From d77fa3bb089b59e4c079aa2d1fdd56296431c2a7 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 26 Dec 2021 02:17:36 +0900
Subject: wip

---
 packages/client/src/pizzax.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 396abc2418..6a876c0797 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -1,6 +1,6 @@
 import { onUnmounted, Ref, ref, watch } from 'vue';
 import { $i } from './account';
-import { api } from './os';
+import { api, stream } from './os';
 
 type StateDef = Record<string, {
 	where: 'account' | 'device' | 'deviceAccount';
@@ -19,6 +19,8 @@ export class Storage<T extends StateDef> {
 	public readonly state: { [K in keyof T]: T[K]['default'] };
 	public readonly reactiveState: { [K in keyof T]: Ref<T[K]['default']> };
 
+	private connection = stream.useChannel('main');
+
 	constructor(key: string, def: T) {
 		this.key = key;
 		this.keyForLocalStorage = 'pizzax::' + key;
@@ -70,7 +72,14 @@ export class Storage<T extends StateDef> {
 				});
 			}, 1);
 
-			// TODO: streamingのuser storage updateイベントを監視して更新
+			// streamingのuser storage updateイベントを監視して更新
+			this.connection.on('registryUpdated', ({ scope, key, value }) => {
+				this.state[key] = value;
+				this.reactiveState[key].value = value;
+				const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
+				cache[key] = value;
+				localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
+			});
 		}
 	}
 
-- 
cgit v1.2.3-freya


From 2012f4a198f2071d0212af3b2feebecda24d2f37 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 26 Dec 2021 02:24:45 +0900
Subject: wip?

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 6a876c0797..8672276fe7 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -74,8 +74,9 @@ export class Storage<T extends StateDef> {
 
 			// streamingのuser storage updateイベントを監視して更新
 			this.connection.on('registryUpdated', ({ scope, key, value }) => {
-				this.state[key] = value;
+				this.state[key] = value as typeof this.state[key]['default'];
 				this.reactiveState[key].value = value;
+
 				const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
 				cache[key] = value;
 				localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
-- 
cgit v1.2.3-freya


From f9f64a5e4cadd012e3a6809122a962387029181c Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 29 Dec 2021 00:03:44 +0900
Subject: ?

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 8672276fe7..f405ed855b 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -73,8 +73,10 @@ export class Storage<T extends StateDef> {
 			}, 1);
 
 			// streamingのuser storage updateイベントを監視して更新
-			this.connection.on('registryUpdated', ({ scope, key, value }) => {
-				this.state[key] = value as typeof this.state[key]['default'];
+			this.connection.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
+				if (scope[1] !== this.key) return;
+
+				this.state[key] = value;
 				this.reactiveState[key].value = value;
 
 				const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
-- 
cgit v1.2.3-freya


From 40abe3d907c85fa3688f8197246973a021f7d711 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 29 Dec 2021 16:05:25 +0900
Subject: streamingのuser storage updateイベントを監視して更新
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/pizzax.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index f405ed855b..63abe40b03 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -74,7 +74,7 @@ export class Storage<T extends StateDef> {
 
 			// streamingのuser storage updateイベントを監視して更新
 			this.connection.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
-				if (scope[1] !== this.key) return;
+				if (scope[1] !== this.key || this.state[key] === value) return;
 
 				this.state[key] = value;
 				this.reactiveState[key].value = value;
-- 
cgit v1.2.3-freya


From 54bf2808744a552fca45bdd6a08c351147f3cff2 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 29 Dec 2021 16:13:42 +0900
Subject: 必要な時以外はストレージを更新しない
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 63abe40b03..7bfa6a2ab5 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -80,8 +80,10 @@ export class Storage<T extends StateDef> {
 				this.reactiveState[key].value = value;
 
 				const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
-				cache[key] = value;
-				localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
+				if (cache[key] !== value) {
+					cache[key] = value;
+					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
+				}
 			});
 		}
 	}
-- 
cgit v1.2.3-freya


From 6836c8e98e46dbf3129b4e8fb3a799070454f356 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 29 Dec 2021 16:42:28 +0900
Subject: fix?

---
 packages/client/src/pizzax.ts | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 7bfa6a2ab5..8a742e85fe 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -70,21 +70,21 @@ export class Storage<T extends StateDef> {
 					}
 					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
 				});
-			}, 1);
 
-			// streamingのuser storage updateイベントを監視して更新
-			this.connection.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
-				if (scope[1] !== this.key || this.state[key] === value) return;
+				// streamingのuser storage updateイベントを監視して更新
+				this.connection.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
+					if (scope[1] !== this.key || this.state[key] === value) return;
 
-				this.state[key] = value;
-				this.reactiveState[key].value = value;
+					this.state[key] = value;
+					this.reactiveState[key].value = value;
 
-				const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
-				if (cache[key] !== value) {
-					cache[key] = value;
-					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
-				}
-			});
+					const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
+					if (cache[key] !== value) {
+						cache[key] = value;
+						localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
+					}
+				});
+			}, 1);
 		}
 	}
 
-- 
cgit v1.2.3-freya


From 39b377c06fd15b8402bb2015b347694ac01cda2f Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 29 Dec 2021 17:40:39 +0900
Subject: wip

---
 packages/client/src/components/drive.vue           |  3 ++-
 packages/client/src/components/follow-button.vue   |  3 ++-
 packages/client/src/components/note-detailed.vue   |  3 ++-
 packages/client/src/components/note.vue            |  3 ++-
 packages/client/src/components/notification.vue    |  5 ++--
 packages/client/src/components/notifications.vue   |  5 ++--
 packages/client/src/components/post-form.vue       |  4 ++--
 packages/client/src/components/taskmanager.vue     |  9 +++----
 packages/client/src/components/timeline.vue        | 21 ++++++++--------
 packages/client/src/os.ts                          |  2 --
 packages/client/src/pages/admin/metrics.vue        |  5 ++--
 packages/client/src/pages/admin/overview.vue       |  3 ++-
 packages/client/src/pages/admin/queue.vue          |  3 ++-
 packages/client/src/pages/messaging/index.vue      |  3 ++-
 .../src/pages/messaging/messaging-room.form.vue    |  3 ++-
 .../client/src/pages/messaging/messaging-room.vue  |  3 ++-
 packages/client/src/pages/reversi/game.vue         |  3 ++-
 packages/client/src/pages/reversi/index.vue        |  3 ++-
 packages/client/src/pizzax.ts                      | 28 +++++++++++-----------
 packages/client/src/scripts/select-file.ts         |  3 ++-
 packages/client/src/stream.ts                      |  6 +++++
 .../client/src/ui/_common_/stream-indicator.vue    |  7 +++---
 packages/client/src/ui/chat/note.vue               |  3 ++-
 packages/client/src/ui/chat/pages/channel.vue      |  3 ++-
 packages/client/src/ui/chat/pages/timeline.vue     | 11 +++++----
 packages/client/src/ui/chat/post-form.vue          |  3 ++-
 packages/client/src/widgets/job-queue.vue          |  3 ++-
 packages/client/src/widgets/photos.vue             |  3 ++-
 .../client/src/widgets/server-metric/index.vue     |  3 ++-
 29 files changed, 93 insertions(+), 64 deletions(-)
 create mode 100644 packages/client/src/stream.ts

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/drive.vue b/packages/client/src/components/drive.vue
index 46bcd42558..f8d3d810b7 100644
--- a/packages/client/src/components/drive.vue
+++ b/packages/client/src/components/drive.vue
@@ -53,6 +53,7 @@ import XFolder from './drive.folder.vue';
 import XFile from './drive.file.vue';
 import MkButton from './ui/button.vue';
 import * as os from '@/os';
+import { stream } from '@/stream';
 
 export default defineComponent({
 	components: {
@@ -140,7 +141,7 @@ export default defineComponent({
 			});
 		}
 
-		this.connection = markRaw(os.stream.useChannel('drive'));
+		this.connection = markRaw(stream.useChannel('drive'));
 
 		this.connection.on('fileCreated', this.onStreamDriveFileCreated);
 		this.connection.on('fileUpdated', this.onStreamDriveFileUpdated);
diff --git a/packages/client/src/components/follow-button.vue b/packages/client/src/components/follow-button.vue
index 7136261914..b16b22f26f 100644
--- a/packages/client/src/components/follow-button.vue
+++ b/packages/client/src/components/follow-button.vue
@@ -30,6 +30,7 @@
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
 import * as os from '@/os';
+import { stream } from '@/stream';
 
 export default defineComponent({
 	props: {
@@ -71,7 +72,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.connection = markRaw(os.stream.useChannel('main'));
+		this.connection = markRaw(stream.useChannel('main'));
 
 		this.connection.on('follow', this.onFollowChange);
 		this.connection.on('unfollow', this.onFollowChange);
diff --git a/packages/client/src/components/note-detailed.vue b/packages/client/src/components/note-detailed.vue
index 55a02f1e73..a5cb2f0426 100644
--- a/packages/client/src/components/note-detailed.vue
+++ b/packages/client/src/components/note-detailed.vue
@@ -140,6 +140,7 @@ import { checkWordMute } from '@/scripts/check-word-mute';
 import { userPage } from '@/filters/user';
 import { notePage } from '@/filters/note';
 import * as os from '@/os';
+import { stream } from '@/stream';
 import { noteActions, noteViewInterruptors } from '@/store';
 import { reactionPicker } from '@/scripts/reaction-picker';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
@@ -260,7 +261,7 @@ export default defineComponent({
 
 	async created() {
 		if (this.$i) {
-			this.connection = os.stream;
+			this.connection = stream;
 		}
 
 		this.muted = await checkWordMute(this.appearNote, this.$i, this.$store.state.mutedWords);
diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/note.vue
index c4040388a9..3cf924928a 100644
--- a/packages/client/src/components/note.vue
+++ b/packages/client/src/components/note.vue
@@ -122,6 +122,7 @@ import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { checkWordMute } from '@/scripts/check-word-mute';
 import { userPage } from '@/filters/user';
 import * as os from '@/os';
+import { stream } from '@/stream';
 import { noteActions, noteViewInterruptors } from '@/store';
 import { reactionPicker } from '@/scripts/reaction-picker';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
@@ -245,7 +246,7 @@ export default defineComponent({
 
 	async created() {
 		if (this.$i) {
-			this.connection = os.stream;
+			this.connection = stream;
 		}
 
 		this.collapsed = this.appearNote.cw == null && this.appearNote.text && (
diff --git a/packages/client/src/components/notification.vue b/packages/client/src/components/notification.vue
index 37a88edc64..5659c899be 100644
--- a/packages/client/src/components/notification.vue
+++ b/packages/client/src/components/notification.vue
@@ -74,6 +74,7 @@ import { notePage } from '@/filters/note';
 import { userPage } from '@/filters/user';
 import { i18n } from '@/i18n';
 import * as os from '@/os';
+import { stream } from '@/stream';
 import { useTooltip } from '@/scripts/use-tooltip';
 
 export default defineComponent({
@@ -106,7 +107,7 @@ export default defineComponent({
 			if (!props.notification.isRead) {
 				const readObserver = new IntersectionObserver((entries, observer) => {
 					if (!entries.some(entry => entry.isIntersecting)) return;
-					os.stream.send('readNotification', {
+					stream.send('readNotification', {
 						id: props.notification.id
 					});
 					observer.disconnect();
@@ -114,7 +115,7 @@ export default defineComponent({
 
 				readObserver.observe(elRef.value);
 
-				const connection = os.stream.useChannel('main');
+				const connection = stream.useChannel('main');
 				connection.on('readAllNotifications', () => readObserver.disconnect());
 
 				onUnmounted(() => {
diff --git a/packages/client/src/components/notifications.vue b/packages/client/src/components/notifications.vue
index f3e5ee32f7..328888c355 100644
--- a/packages/client/src/components/notifications.vue
+++ b/packages/client/src/components/notifications.vue
@@ -28,6 +28,7 @@ import XList from './date-separated-list.vue';
 import XNote from './note.vue';
 import { notificationTypes } from 'misskey-js';
 import * as os from '@/os';
+import { stream } from '@/stream';
 import MkButton from '@/components/ui/button.vue';
 
 export default defineComponent({
@@ -100,7 +101,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.connection = markRaw(os.stream.useChannel('main'));
+		this.connection = markRaw(stream.useChannel('main'));
 		this.connection.on('notification', this.onNotification);
 	},
 
@@ -112,7 +113,7 @@ export default defineComponent({
 		onNotification(notification) {
 			const isMuted = !this.allIncludeTypes.includes(notification.type);
 			if (isMuted || document.visibilityState === 'visible') {
-				os.stream.send('readNotification', {
+				stream.send('readNotification', {
 					id: notification.id
 				});
 			}
diff --git a/packages/client/src/components/post-form.vue b/packages/client/src/components/post-form.vue
index 4265c575e2..24f35da2e9 100644
--- a/packages/client/src/components/post-form.vue
+++ b/packages/client/src/components/post-form.vue
@@ -74,11 +74,11 @@ import { formatTimeString } from '@/scripts/format-time-string';
 import { Autocomplete } from '@/scripts/autocomplete';
 import { noteVisibilities } from 'misskey-js';
 import * as os from '@/os';
+import { stream } from '@/stream';
 import { selectFiles } from '@/scripts/select-file';
 import { defaultStore, notePostInterruptors, postFormActions } from '@/store';
 import { throttle } from 'throttle-debounce';
 import MkInfo from '@/components/ui/info.vue';
-import { defaultStore } from '@/store';
 
 export default defineComponent({
 	components: {
@@ -176,7 +176,7 @@ export default defineComponent({
 			imeText: '',
 			typing: throttle(3000, () => {
 				if (this.channel) {
-					os.stream.send('typingOnChannel', { channel: this.channel.id });
+					stream.send('typingOnChannel', { channel: this.channel.id });
 				}
 			}),
 			postFormActions,
diff --git a/packages/client/src/components/taskmanager.vue b/packages/client/src/components/taskmanager.vue
index 6901d88c2c..c5d2c6d8f8 100644
--- a/packages/client/src/components/taskmanager.vue
+++ b/packages/client/src/components/taskmanager.vue
@@ -83,6 +83,7 @@ import MkTab from '@/components/tab.vue';
 import MkButton from '@/components/ui/button.vue';
 import follow from '@/directives/follow-append';
 import * as os from '@/os';
+import { stream } from '@/stream';
 
 export default defineComponent({
 	components: {
@@ -104,15 +105,15 @@ export default defineComponent({
 		const connections = shallowRef([]);
 		const pools = shallowRef([]);
 		const refreshStreamInfo = () => {
-			console.log(os.stream.sharedConnectionPools, os.stream.sharedConnections, os.stream.nonSharedConnections);
-			const conn = os.stream.sharedConnections.map(c => ({
+			console.log(stream.sharedConnectionPools, stream.sharedConnections, stream.nonSharedConnections);
+			const conn = stream.sharedConnections.map(c => ({
 				id: c.id, name: c.name, channel: c.channel, users: c.pool.users, in: c.inCount, out: c.outCount,
-			})).concat(os.stream.nonSharedConnections.map(c => ({
+			})).concat(stream.nonSharedConnections.map(c => ({
 				id: c.id, name: c.name, channel: c.channel, users: null, in: c.inCount, out: c.outCount,
 			})));
 			conn.sort((a, b) => (a.id > b.id) ? 1 : -1);
 			connections.value = conn;
-			pools.value = os.stream.sharedConnectionPools;
+			pools.value = stream.sharedConnectionPools;
 		};
 		const interval = setInterval(refreshStreamInfo, 1000);
 		onBeforeUnmount(() => {
diff --git a/packages/client/src/components/timeline.vue b/packages/client/src/components/timeline.vue
index f8a800872f..53697671b2 100644
--- a/packages/client/src/components/timeline.vue
+++ b/packages/client/src/components/timeline.vue
@@ -6,6 +6,7 @@
 import { defineComponent, markRaw } from 'vue';
 import XNotes from './notes.vue';
 import * as os from '@/os';
+import { stream } from '@/stream';
 import * as sound from '@/scripts/sound';
 
 export default defineComponent({
@@ -92,33 +93,33 @@ export default defineComponent({
 			this.query = {
 				antennaId: this.antenna
 			};
-			this.connection = markRaw(os.stream.useChannel('antenna', {
+			this.connection = markRaw(stream.useChannel('antenna', {
 				antennaId: this.antenna
 			}));
 			this.connection.on('note', prepend);
 		} else if (this.src == 'home') {
 			endpoint = 'notes/timeline';
-			this.connection = markRaw(os.stream.useChannel('homeTimeline'));
+			this.connection = markRaw(stream.useChannel('homeTimeline'));
 			this.connection.on('note', prepend);
 
-			this.connection2 = markRaw(os.stream.useChannel('main'));
+			this.connection2 = markRaw(stream.useChannel('main'));
 			this.connection2.on('follow', onChangeFollowing);
 			this.connection2.on('unfollow', onChangeFollowing);
 		} else if (this.src == 'local') {
 			endpoint = 'notes/local-timeline';
-			this.connection = markRaw(os.stream.useChannel('localTimeline'));
+			this.connection = markRaw(stream.useChannel('localTimeline'));
 			this.connection.on('note', prepend);
 		} else if (this.src == 'social') {
 			endpoint = 'notes/hybrid-timeline';
-			this.connection = markRaw(os.stream.useChannel('hybridTimeline'));
+			this.connection = markRaw(stream.useChannel('hybridTimeline'));
 			this.connection.on('note', prepend);
 		} else if (this.src == 'global') {
 			endpoint = 'notes/global-timeline';
-			this.connection = markRaw(os.stream.useChannel('globalTimeline'));
+			this.connection = markRaw(stream.useChannel('globalTimeline'));
 			this.connection.on('note', prepend);
 		} else if (this.src == 'mentions') {
 			endpoint = 'notes/mentions';
-			this.connection = markRaw(os.stream.useChannel('main'));
+			this.connection = markRaw(stream.useChannel('main'));
 			this.connection.on('mention', prepend);
 		} else if (this.src == 'directs') {
 			endpoint = 'notes/mentions';
@@ -130,14 +131,14 @@ export default defineComponent({
 					prepend(note);
 				}
 			};
-			this.connection = markRaw(os.stream.useChannel('main'));
+			this.connection = markRaw(stream.useChannel('main'));
 			this.connection.on('mention', onNote);
 		} else if (this.src == 'list') {
 			endpoint = 'notes/user-list-timeline';
 			this.query = {
 				listId: this.list
 			};
-			this.connection = markRaw(os.stream.useChannel('userList', {
+			this.connection = markRaw(stream.useChannel('userList', {
 				listId: this.list
 			}));
 			this.connection.on('note', prepend);
@@ -148,7 +149,7 @@ export default defineComponent({
 			this.query = {
 				channelId: this.channel
 			};
-			this.connection = markRaw(os.stream.useChannel('channel', {
+			this.connection = markRaw(stream.useChannel('channel', {
 				channelId: this.channel
 			}));
 			this.connection.on('note', prepend);
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index 4ed69e0ec0..1ea205d5c8 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -12,8 +12,6 @@ import { resolve } from '@/router';
 import { $i } from '@/account';
 import { defaultStore } from '@/store';
 
-export const stream = markRaw(new Misskey.Stream(url, $i));
-
 export const pendingApiRequestsCount = ref(0);
 let apiRequestsCount = 0; // for debug
 export const apiRequests = ref([]); // for debug
diff --git a/packages/client/src/pages/admin/metrics.vue b/packages/client/src/pages/admin/metrics.vue
index 05b64b235c..f566061ceb 100644
--- a/packages/client/src/pages/admin/metrics.vue
+++ b/packages/client/src/pages/admin/metrics.vue
@@ -101,6 +101,7 @@ const alpha = (hex, a) => {
 	return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
 import * as os from '@/os';
+import { stream } from '@/stream';
 
 export default defineComponent({
 	components: {
@@ -119,7 +120,7 @@ export default defineComponent({
 			stats: null,
 			serverInfo: null,
 			connection: null,
-			queueConnection: markRaw(os.stream.useChannel('queueStats')),
+			queueConnection: markRaw(stream.useChannel('queueStats')),
 			memUsage: 0,
 			chartCpuMem: null,
 			chartNet: null,
@@ -150,7 +151,7 @@ export default defineComponent({
 		os.api('admin/server-info', {}).then(res => {
 			this.serverInfo = res;
 
-			this.connection = markRaw(os.stream.useChannel('serverStats'));
+			this.connection = markRaw(stream.useChannel('serverStats'));
 			this.connection.on('stats', this.onStats);
 			this.connection.on('statsLog', this.onStatsLog);
 			this.connection.send('requestLog', {
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index da5fc0ba6d..59a4281599 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -81,6 +81,7 @@ import number from '@/filters/number';
 import MkInstanceInfo from './instance.vue';
 import XMetrics from './metrics.vue';
 import * as os from '@/os';
+import { stream } from '@/stream';
 import * as symbols from '@/symbols';
 
 export default defineComponent({
@@ -113,7 +114,7 @@ export default defineComponent({
 			notesComparedToThePrevDay: null,
 			fetchJobs: () => os.api('admin/queue/deliver-delayed', {}),
 			fetchModLogs: () => os.api('admin/show-moderation-logs', {}),
-			queueStatsConnection: markRaw(os.stream.useChannel('queueStats')),
+			queueStatsConnection: markRaw(stream.useChannel('queueStats')),
 		}
 	},
 
diff --git a/packages/client/src/pages/admin/queue.vue b/packages/client/src/pages/admin/queue.vue
index 37a87089cb..49f3c63e82 100644
--- a/packages/client/src/pages/admin/queue.vue
+++ b/packages/client/src/pages/admin/queue.vue
@@ -17,6 +17,7 @@ import XQueue from './queue.chart.vue';
 import FormBase from '@/components/debobigego/base.vue';
 import FormButton from '@/components/debobigego/button.vue';
 import * as os from '@/os';
+import { stream } from '@/stream';
 import * as symbols from '@/symbols';
 
 export default defineComponent({
@@ -36,7 +37,7 @@ export default defineComponent({
 				icon: 'fas fa-clipboard-list',
 				bg: 'var(--bg)',
 			},
-			connection: markRaw(os.stream.useChannel('queueStats')),
+			connection: markRaw(stream.useChannel('queueStats')),
 		}
 	},
 
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index 01f9d4518f..554ebc4b6b 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -44,6 +44,7 @@ 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';
 
 export default defineComponent({
@@ -66,7 +67,7 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.connection = markRaw(os.stream.useChannel('messagingIndex'));
+		this.connection = markRaw(stream.useChannel('messagingIndex'));
 
 		this.connection.on('message', this.onMessage);
 		this.connection.on('read', this.onRead);
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 8d92c430f1..f2a90fbfba 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -28,6 +28,7 @@ import * as autosize from 'autosize';
 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';
 
@@ -48,7 +49,7 @@ export default defineComponent({
 			file: null,
 			sending: false,
 			typing: throttle(3000, () => {
-				os.stream.send('typingOnMessaging', this.user ? { partner: this.user.id } : { group: this.group.id });
+				stream.send('typingOnMessaging', this.user ? { partner: this.user.id } : { group: this.group.id });
 			}),
 		};
 	},
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index ffc7f7bc0d..1bcee01d29 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -43,6 +43,7 @@ import XForm from './messaging-room.form.vue';
 import * as Acct from 'misskey-js/built/acct';
 import { isBottom, onScrollBottom, scroll } 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';
@@ -141,7 +142,7 @@ const Component = defineComponent({
 				this.group = group;
 			}
 
-			this.connection = markRaw(os.stream.useChannel('messaging', {
+			this.connection = markRaw(stream.useChannel('messaging', {
 				otherparty: this.user ? this.user.id : undefined,
 				group: this.group ? this.group.id : undefined,
 			}));
diff --git a/packages/client/src/pages/reversi/game.vue b/packages/client/src/pages/reversi/game.vue
index b1ed632904..697d2898b9 100644
--- a/packages/client/src/pages/reversi/game.vue
+++ b/packages/client/src/pages/reversi/game.vue
@@ -9,6 +9,7 @@ import { defineComponent, markRaw } from 'vue';
 import GameSetting from './game.setting.vue';
 import GameBoard from './game.board.vue';
 import * as os from '@/os';
+import { stream } from '@/stream';
 import * as symbols from '@/symbols';
 
 export default defineComponent({
@@ -61,7 +62,7 @@ export default defineComponent({
 				if (this.connection) {
 					this.connection.dispose();
 				}
-				this.connection = markRaw(os.stream.useChannel('gamesReversiGame', {
+				this.connection = markRaw(stream.useChannel('gamesReversiGame', {
 					gameId: this.game.id
 				}));
 				this.connection.on('started', this.onStarted);
diff --git a/packages/client/src/pages/reversi/index.vue b/packages/client/src/pages/reversi/index.vue
index 0b118531fc..93c22c02f3 100644
--- a/packages/client/src/pages/reversi/index.vue
+++ b/packages/client/src/pages/reversi/index.vue
@@ -62,6 +62,7 @@
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
 import * as os from '@/os';
+import { stream } from '@/stream';
 import MkButton from '@/components/ui/button.vue';
 import MkFolder from '@/components/ui/folder.vue';
 import * as symbols from '@/symbols';
@@ -92,7 +93,7 @@ export default defineComponent({
 
 	mounted() {
 		if (this.$i) {
-			this.connection = markRaw(os.stream.useChannel('gamesReversi'));
+			this.connection = markRaw(stream.useChannel('gamesReversi'));
 
 			this.connection.on('invited', this.onInvited);
 
diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 8a742e85fe..0611599a29 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -1,6 +1,7 @@
 import { onUnmounted, Ref, ref, watch } from 'vue';
 import { $i } from './account';
-import { api, stream } from './os';
+import { api } from './os';
+import { stream } from './stream';
 
 type StateDef = Record<string, {
 	where: 'account' | 'device' | 'deviceAccount';
@@ -70,21 +71,20 @@ export class Storage<T extends StateDef> {
 					}
 					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
 				});
+			}, 1);
+			// streamingのuser storage updateイベントを監視して更新
+			this.connection.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
+				if (scope[1] !== this.key || this.state[key] === value) return;
 
-				// streamingのuser storage updateイベントを監視して更新
-				this.connection.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
-					if (scope[1] !== this.key || this.state[key] === value) return;
-
-					this.state[key] = value;
-					this.reactiveState[key].value = value;
+				this.state[key] = value;
+				this.reactiveState[key].value = value;
 
-					const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
-					if (cache[key] !== value) {
-						cache[key] = value;
-						localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
-					}
-				});
-			}, 1);
+				const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
+				if (cache[key] !== value) {
+					cache[key] = value;
+					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
+				}
+			});
 		}
 	}
 
diff --git a/packages/client/src/scripts/select-file.ts b/packages/client/src/scripts/select-file.ts
index 6019890444..6bb3f8bf8a 100644
--- a/packages/client/src/scripts/select-file.ts
+++ b/packages/client/src/scripts/select-file.ts
@@ -1,4 +1,5 @@
 import * as os from '@/os';
+import { stream } from '@/stream';
 import { i18n } from '@/i18n';
 import { defaultStore } from '@/store';
 import { DriveFile } from 'misskey-js/built/entities';
@@ -48,7 +49,7 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
 
 				const marker = Math.random().toString(); // TODO: UUIDとか使う
 
-				const connection = os.stream.useChannel('main');
+				const connection = stream.useChannel('main');
 				connection.on('urlUploadFinished', data => {
 					if (data.marker === marker) {
 						res(multiple ? [data.file] : data.file);
diff --git a/packages/client/src/stream.ts b/packages/client/src/stream.ts
new file mode 100644
index 0000000000..10502444b6
--- /dev/null
+++ b/packages/client/src/stream.ts
@@ -0,0 +1,6 @@
+import * as Misskey from 'misskey-js';
+import { markRaw } from 'vue';
+import { $i } from '@/account';
+import { url } from '@/config';
+
+export const stream = markRaw(new Misskey.Stream(url, $i));
diff --git a/packages/client/src/ui/_common_/stream-indicator.vue b/packages/client/src/ui/_common_/stream-indicator.vue
index 3f86f94549..c75c6d1c0a 100644
--- a/packages/client/src/ui/_common_/stream-indicator.vue
+++ b/packages/client/src/ui/_common_/stream-indicator.vue
@@ -11,6 +11,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import * as os from '@/os';
+import { stream } from '@/stream';
 
 export default defineComponent({
 	data() {
@@ -20,14 +21,14 @@ export default defineComponent({
 	},
 	computed: {
 		stream() {
-			return os.stream;
+			return stream;
 		},
 	},
 	created() {
-		os.stream.on('_disconnected_', this.onDisconnected);
+		stream.on('_disconnected_', this.onDisconnected);
 	},
 	beforeUnmount() {
-		os.stream.off('_disconnected_', this.onDisconnected);
+		stream.off('_disconnected_', this.onDisconnected);
 	},
 	methods: {
 		onDisconnected() {
diff --git a/packages/client/src/ui/chat/note.vue b/packages/client/src/ui/chat/note.vue
index 6927dd0eaf..fa5faa4ec3 100644
--- a/packages/client/src/ui/chat/note.vue
+++ b/packages/client/src/ui/chat/note.vue
@@ -118,6 +118,7 @@ import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { checkWordMute } from '@/scripts/check-word-mute';
 import { userPage } from '@/filters/user';
 import * as os from '@/os';
+import { stream } from '@/stream';
 import { noteActions, noteViewInterruptors } from '@/store';
 import { reactionPicker } from '@/scripts/reaction-picker';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
@@ -243,7 +244,7 @@ export default defineComponent({
 
 	async created() {
 		if (this.$i) {
-			this.connection = os.stream;
+			this.connection = stream;
 		}
 
 		this.collapsed = this.appearNote.cw == null && this.appearNote.text && (
diff --git a/packages/client/src/ui/chat/pages/channel.vue b/packages/client/src/ui/chat/pages/channel.vue
index 13c735cd47..2755cc92b7 100644
--- a/packages/client/src/ui/chat/pages/channel.vue
+++ b/packages/client/src/ui/chat/pages/channel.vue
@@ -26,6 +26,7 @@ import { computed, defineComponent, markRaw } from 'vue';
 import * as Misskey from 'misskey-js';
 import XNotes from '../notes.vue';
 import * as os from '@/os';
+import { stream } from '@/stream';
 import * as sound from '@/scripts/sound';
 import { scrollToBottom, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
 import follow from '@/directives/follow-append';
@@ -106,7 +107,7 @@ export default defineComponent({
 			sound.play(note.userId === this.$i.id ? 'noteMy' : 'note');
 		};
 
-		this.connection = markRaw(os.stream.useChannel('channel', {
+		this.connection = markRaw(stream.useChannel('channel', {
 			channelId: this.channelId
 		}));
 		this.connection.on('note', prepend);
diff --git a/packages/client/src/ui/chat/pages/timeline.vue b/packages/client/src/ui/chat/pages/timeline.vue
index 07e847ad73..f67d333398 100644
--- a/packages/client/src/ui/chat/pages/timeline.vue
+++ b/packages/client/src/ui/chat/pages/timeline.vue
@@ -17,6 +17,7 @@
 import { computed, defineComponent, markRaw } from 'vue';
 import XNotes from '../notes.vue';
 import * as os from '@/os';
+import { stream } from '@/stream';
 import * as sound from '@/scripts/sound';
 import { scrollToBottom, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
 import follow from '@/directives/follow-append';
@@ -90,23 +91,23 @@ export default defineComponent({
 
 		if (this.src == 'home') {
 			endpoint = 'notes/timeline';
-			this.connection = markRaw(os.stream.useChannel('homeTimeline'));
+			this.connection = markRaw(stream.useChannel('homeTimeline'));
 			this.connection.on('note', prepend);
 
-			this.connection2 = markRaw(os.stream.useChannel('main'));
+			this.connection2 = markRaw(stream.useChannel('main'));
 			this.connection2.on('follow', onChangeFollowing);
 			this.connection2.on('unfollow', onChangeFollowing);
 		} else if (this.src == 'local') {
 			endpoint = 'notes/local-timeline';
-			this.connection = markRaw(os.stream.useChannel('localTimeline'));
+			this.connection = markRaw(stream.useChannel('localTimeline'));
 			this.connection.on('note', prepend);
 		} else if (this.src == 'social') {
 			endpoint = 'notes/hybrid-timeline';
-			this.connection = markRaw(os.stream.useChannel('hybridTimeline'));
+			this.connection = markRaw(stream.useChannel('hybridTimeline'));
 			this.connection.on('note', prepend);
 		} else if (this.src == 'global') {
 			endpoint = 'notes/global-timeline';
-			this.connection = markRaw(os.stream.useChannel('globalTimeline'));
+			this.connection = markRaw(stream.useChannel('globalTimeline'));
 			this.connection.on('note', prepend);
 		}
 
diff --git a/packages/client/src/ui/chat/post-form.vue b/packages/client/src/ui/chat/post-form.vue
index 8c572e3b1c..0f04096653 100644
--- a/packages/client/src/ui/chat/post-form.vue
+++ b/packages/client/src/ui/chat/post-form.vue
@@ -59,6 +59,7 @@ import * as Acct from 'misskey-js/built/acct';
 import { formatTimeString } from '@/scripts/format-time-string';
 import { Autocomplete } from '@/scripts/autocomplete';
 import * as os from '@/os';
+import { stream } from '@/stream';
 import { selectFiles } from '@/scripts/select-file';
 import { notePostInterruptors, postFormActions } from '@/store';
 import { throttle } from 'throttle-debounce';
@@ -130,7 +131,7 @@ export default defineComponent({
 			imeText: '',
 			typing: throttle(3000, () => {
 				if (this.channel) {
-					os.stream.send('typingOnChannel', { channel: this.channel });
+					stream.send('typingOnChannel', { channel: this.channel });
 				}
 			}),
 			postFormActions,
diff --git a/packages/client/src/widgets/job-queue.vue b/packages/client/src/widgets/job-queue.vue
index ef440881e5..1b7c71de67 100644
--- a/packages/client/src/widgets/job-queue.vue
+++ b/packages/client/src/widgets/job-queue.vue
@@ -49,6 +49,7 @@
 import { defineComponent, markRaw } from 'vue';
 import define from './define';
 import * as os from '@/os';
+import { stream } from '@/stream';
 import number from '@/filters/number';
 import * as sound from '@/scripts/sound';
 
@@ -70,7 +71,7 @@ export default defineComponent({
 	extends: widget,
 	data() {
 		return {
-			connection: markRaw(os.stream.useChannel('queueStats')),
+			connection: markRaw(stream.useChannel('queueStats')),
 			inbox: {
 				activeSincePrevTick: 0,
 				active: 0,
diff --git a/packages/client/src/widgets/photos.vue b/packages/client/src/widgets/photos.vue
index a91d4f6c49..7a0b54027b 100644
--- a/packages/client/src/widgets/photos.vue
+++ b/packages/client/src/widgets/photos.vue
@@ -20,6 +20,7 @@ import MkContainer from '@/components/ui/container.vue';
 import define from './define';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import * as os from '@/os';
+import { stream } from '@/stream';
 
 const widget = define({
 	name: 'photos',
@@ -48,7 +49,7 @@ export default defineComponent({
 		};
 	},
 	mounted() {
-		this.connection = markRaw(os.stream.useChannel('main'));
+		this.connection = markRaw(stream.useChannel('main'));
 
 		this.connection.on('driveFileCreated', this.onDriveFileCreated);
 
diff --git a/packages/client/src/widgets/server-metric/index.vue b/packages/client/src/widgets/server-metric/index.vue
index 019e16fb33..107b750906 100644
--- a/packages/client/src/widgets/server-metric/index.vue
+++ b/packages/client/src/widgets/server-metric/index.vue
@@ -23,6 +23,7 @@ import XCpu from './cpu.vue';
 import XMemory from './mem.vue';
 import XDisk from './disk.vue';
 import * as os from '@/os';
+import { stream } from '@/stream';
 
 const widget = define({
 	name: 'serverMetric',
@@ -63,7 +64,7 @@ export default defineComponent({
 		os.api('server-info', {}).then(res => {
 			this.meta = res;
 		});
-		this.connection = markRaw(os.stream.useChannel('serverStats'));
+		this.connection = markRaw(stream.useChannel('serverStats'));
 	},
 	unmounted() {
 		this.connection.dispose();
-- 
cgit v1.2.3-freya


From 7308abc21a67d8fd447689c15b548f7307d52ef3 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 29 Dec 2021 17:48:47 +0900
Subject: fix

---
 packages/client/src/ui/_common_/common.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue
index 956ec556c1..98069258d9 100644
--- a/packages/client/src/ui/_common_/common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -15,9 +15,10 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import { stream, popup, popups, uploads, pendingApiRequestsCount } from '@/os';
+import { popup, popups, uploads, pendingApiRequestsCount } from '@/os';
 import * as sound from '@/scripts/sound';
 import { $i } from '@/account';
+import { stream } from '@/stream';
 
 export default defineComponent({
 	components: {
-- 
cgit v1.2.3-freya


From 32eb7503b701158e0336a4c9240dc8a59a4dda64 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 29 Dec 2021 17:50:17 +0900
Subject: fix

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 82a1e169ce..66d75e70fb 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -26,7 +26,8 @@ import { router } from '@/router';
 import { applyTheme } from '@/scripts/theme';
 import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
 import { i18n } from '@/i18n';
-import { stream, confirm, alert, post, popup, toast } from '@/os';
+import { confirm, alert, post, popup, toast } from '@/os';
+import { stream } from '@/stream';
 import * as sound from '@/scripts/sound';
 import { $i, refreshAccount, login, updateAccount, signout } from '@/account';
 import { defaultStore, ColdDeviceStorage } from '@/store';
-- 
cgit v1.2.3-freya


From 7b7368b81503b45f913858f342ea1eae80426174 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 30 Dec 2021 00:18:27 +0900
Subject: wip

---
 packages/client/src/pizzax.ts | 200 ++++++++++++++++++++++++------------------
 1 file changed, 113 insertions(+), 87 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 0611599a29..1ebff07fa7 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -1,6 +1,7 @@
 import { onUnmounted, Ref, ref, watch } from 'vue';
 import { $i } from './account';
 import { api } from './os';
+import { get, set } from './scripts/idb-proxy';
 import { stream } from './stream';
 
 type StateDef = Record<string, {
@@ -8,119 +9,144 @@ type StateDef = Record<string, {
 	default: any;
 }>;
 
+type State<T extends StateDef> = { [K in keyof T]: T[K]['default']; };
+type ReactiveState<T extends StateDef> = { [K in keyof T]: Ref<T[K]['default']>; };
+
 type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
 
+const connection = $i ? stream.useChannel('main') : null;
+
 export class Storage<T extends StateDef> {
+	public readonly ready: PromiseLike<void>;
+
 	public readonly key: string;
-	public readonly keyForLocalStorage: string;
+	public readonly deviceStateKeyName: string;
+	public readonly deviceAccountStateKeyName: string;
+	public readonly registryCacheKeyName: string;
 
 	public readonly def: T;
 
 	// TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487
-	public readonly state: { [K in keyof T]: T[K]['default'] };
-	public readonly reactiveState: { [K in keyof T]: Ref<T[K]['default']> };
-
-	private connection = stream.useChannel('main');
+	public readonly state = {} as State<T>;
+	public readonly reactiveState = {} as ReactiveState<T>;
+
+	private nextIdbJob: Promise<any> = Promise.resolve();
+	private addIdbSetJob<T>(job: () => Promise<T>) {
+		const promise = this.nextIdbJob.then(job, e => {
+			console.error('Pizzax failed to save data to idb!', e);
+			return job();
+		});
+		this.nextIdbJob = promise;
+		return promise;
+	}
 
 	constructor(key: string, def: T) {
 		this.key = key;
-		this.keyForLocalStorage = 'pizzax::' + key;
+		this.deviceStateKeyName = `pizzax::${key}`;
+		this.deviceAccountStateKeyName = $i ? `pizzax::${key}::${$i.id}` : '';
+		this.registryCacheKeyName = $i ? `pizzax::${key}::cache::${$i.id}` : '';
 		this.def = def;
 
-		// TODO: indexedDBにする
-		const deviceState = JSON.parse(localStorage.getItem(this.keyForLocalStorage) || '{}');
-		const deviceAccountState = $i ? JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::' + $i.id) || '{}') : {};
-		const registryCache = $i ? JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}') : {};
-
-		const state = {};
-		const reactiveState = {};
-		for (const [k, v] of Object.entries(def)) {
-			if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
-				state[k] = deviceState[k];
-			} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) {
-				state[k] = registryCache[k];
-			} else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
-				state[k] = deviceAccountState[k];
-			} else {
-				state[k] = v.default;
-				if (_DEV_) console.log('Use default value', k, v.default);
+		this.ready = this.init();
+	}
+
+	private init(): Promise<void> {
+		return new Promise(async (resolve, reject) => {
+			const deviceState: State<T> = await get(this.deviceStateKeyName);
+			const deviceAccountState = $i ? await get(this.deviceAccountStateKeyName) : {};
+			const registryCache = $i ? await get(this.registryCacheKeyName) : {};
+	
+			for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]][]) {
+				if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
+					this.state[k] = deviceState[k];
+				} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) {
+					this.state[k] = registryCache[k];
+				} else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
+					this.state[k] = deviceAccountState[k];
+				} else {
+					this.state[k] = v.default;
+					if (_DEV_) console.log('Use default value', k, v.default);
+				}
 			}
-		}
-		for (const [k, v] of Object.entries(state)) {
-			reactiveState[k] = ref(v);
-		}
-		this.state = state as any;
-		this.reactiveState = reactiveState as any;
-
-		if ($i) {
-			// なぜかsetTimeoutしないとapi関数内でエラーになる(おそらく循環参照してることに原因がありそう)
-			setTimeout(() => {
-				api('i/registry/get-all', { scope: ['client', this.key] }).then(kvs => {
-					const cache = {};
-					for (const [k, v] of Object.entries(def)) {
-						if (v.where === 'account') {
-							if (Object.prototype.hasOwnProperty.call(kvs, k)) {
-								state[k] = kvs[k];
-								reactiveState[k].value = kvs[k];
-								cache[k] = kvs[k];
-							} else {
-								state[k] = v.default;
-								reactiveState[k].value = v.default;
+			for (const [k, v] of Object.entries(this.state) as [keyof T, T[keyof T]][]) {
+				this.reactiveState[k] = ref(v);
+			}
+	
+			if ($i) {
+				// なぜかsetTimeoutしないとapi関数内でエラーになる(おそらく循環参照してることに原因がありそう)
+				setTimeout(() => {
+					api('i/registry/get-all', { scope: ['client', this.key] })
+					.then(kvs => {
+						const cache = {};
+						for (const [k, v] of Object.entries(this.def)) {
+							if (v.where === 'account') {
+								if (Object.prototype.hasOwnProperty.call(kvs, k)) {
+									this.state[k as keyof T] = kvs[k];
+									this.reactiveState[k as keyof T].value = kvs[k as string];
+									cache[k] = kvs[k];
+								} else {
+									this.state[k as keyof T] = v.default;
+									this.reactiveState[k].value = v.default;
+								}
 							}
 						}
+
+						return set(this.registryCacheKeyName, cache);
+					})
+					.then(() => resolve());
+				}, 1);
+				// streamingのuser storage updateイベントを監視して更新
+				connection?.on('registryUpdated', async ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
+					if (scope[1] !== this.key || this.state[key] === value) return;
+	
+					this.state[key] = value;
+					this.reactiveState[key].value = value;
+	
+					const cache = await get(this.registryCacheKeyName);
+					if (cache[key] !== value) {
+						cache[key] = value;
+						await set(this.registryCacheKeyName, cache);
 					}
-					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
 				});
-			}, 1);
-			// streamingのuser storage updateイベントを監視して更新
-			this.connection.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
-				if (scope[1] !== this.key || this.state[key] === value) return;
-
-				this.state[key] = value;
-				this.reactiveState[key].value = value;
-
-				const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
-				if (cache[key] !== value) {
-					cache[key] = value;
-					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
-				}
-			});
-		}
+			}
+		});
 	}
 
-	public set<K extends keyof T>(key: K, value: T[K]['default']): void {
+	public set<K extends keyof T>(key: K, value: T[K]['default']): Promise<void> {
 		if (_DEV_) console.log('set', key, value);
 
 		this.state[key] = value;
 		this.reactiveState[key].value = value;
 
-		switch (this.def[key].where) {
-			case 'device': {
-				const deviceState = JSON.parse(localStorage.getItem(this.keyForLocalStorage) || '{}');
-				deviceState[key] = value;
-				localStorage.setItem(this.keyForLocalStorage, JSON.stringify(deviceState));
-				break;
-			}
-			case 'deviceAccount': {
-				if ($i == null) break;
-				const deviceAccountState = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::' + $i.id) || '{}');
-				deviceAccountState[key] = value;
-				localStorage.setItem(this.keyForLocalStorage + '::' + $i.id, JSON.stringify(deviceAccountState));
-				break;
-			}
-			case 'account': {
-				if ($i == null) break;
-				const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
-				cache[key] = value;
-				localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
-				api('i/registry/set', {
-					scope: ['client', this.key],
-					key: key,
-					value: value
-				});
-				break;
+		return this.addIdbSetJob(async () => {
+			switch (this.def[key].where) {
+				case 'device': {
+					const deviceState = await get(this.deviceStateKeyName) || {};
+					deviceState[key] = value;
+					await set(this.deviceStateKeyName, deviceState);
+					break;
+				}
+				case 'deviceAccount': {
+					if ($i == null) break;
+					const deviceAccountState = await get(this.deviceAccountStateKeyName) || {};
+					deviceAccountState[key] = value;
+					await set(this.deviceAccountStateKeyName, deviceAccountState);
+					break;
+				}
+				case 'account': {
+					if ($i == null) break;
+					const cache = await get(this.registryCacheKeyName) || {};
+					cache[key] = value;
+					await set(this.registryCacheKeyName, cache);
+					await api('i/registry/set', {
+						scope: ['client', this.key],
+						key: key,
+						value: value
+					});
+					break;
+				}
 			}
-		}
+		});
 	}
 
 	public push<K extends keyof T>(key: K, value: ArrayElement<T[K]['default']>): void {
-- 
cgit v1.2.3-freya


From 41a7ab50240b1a4a1baeb0fa935530be012fa3c8 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 30 Dec 2021 00:34:23 +0900
Subject: migrate

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 1ebff07fa7..3ac4c5c720 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -30,6 +30,7 @@ export class Storage<T extends StateDef> {
 	public readonly state = {} as State<T>;
 	public readonly reactiveState = {} as ReactiveState<T>;
 
+	// indexedDB保存を重複させないために簡易的にキューイング
 	private nextIdbJob: Promise<any> = Promise.resolve();
 	private addIdbSetJob<T>(job: () => Promise<T>) {
 		const promise = this.nextIdbJob.then(job, e => {
@@ -52,6 +53,8 @@ export class Storage<T extends StateDef> {
 
 	private init(): Promise<void> {
 		return new Promise(async (resolve, reject) => {
+			await this.migrate();
+
 			const deviceState: State<T> = await get(this.deviceStateKeyName);
 			const deviceAccountState = $i ? await get(this.deviceAccountStateKeyName) : {};
 			const registryCache = $i ? await get(this.registryCacheKeyName) : {};
@@ -95,6 +98,7 @@ export class Storage<T extends StateDef> {
 					})
 					.then(() => resolve());
 				}, 1);
+
 				// streamingのuser storage updateイベントを監視して更新
 				connection?.on('registryUpdated', async ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
 					if (scope[1] !== this.key || this.state[key] === value) return;
@@ -190,4 +194,25 @@ export class Storage<T extends StateDef> {
 			}
 		};
 	}
+
+	// localStorage => indexedDBのマイグレーション
+	private async migrate() {
+		const deviceState = localStorage.getItem(this.deviceStateKeyName);
+		if (deviceState) { 
+			await set(this.deviceStateKeyName, JSON.parse(deviceState));
+			localStorage.removeItem(this.deviceStateKeyName);
+		}
+
+		const deviceAccountState = $i && localStorage.getItem(this.deviceAccountStateKeyName);
+		if ($i && deviceAccountState) {
+			await set(this.deviceAccountStateKeyName, JSON.parse(deviceAccountState));
+			localStorage.removeItem(this.deviceAccountStateKeyName);
+		}
+
+		const registryCache = $i && localStorage.getItem(this.registryCacheKeyName);
+		if ($i && registryCache) {
+			await set(this.registryCacheKeyName, JSON.parse(registryCache));
+			localStorage.removeItem(this.registryCacheKeyName);
+		}
+	}
 }
-- 
cgit v1.2.3-freya


From 57ee70459521ca572375de7fb1f4074871569462 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 30 Dec 2021 00:53:22 +0900
Subject: fix

---
 packages/client/src/pizzax.ts | 2 --
 1 file changed, 2 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 8156f99444..3ac4c5c720 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -41,8 +41,6 @@ export class Storage<T extends StateDef> {
 		return promise;
 	}
 
-	private connection = stream.useChannel('main');
-
 	constructor(key: string, def: T) {
 		this.key = key;
 		this.deviceStateKeyName = `pizzax::${key}`;
-- 
cgit v1.2.3-freya


From 019529d76c5f856817b9b1a51d9ed14b13447321 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 30 Dec 2021 01:09:20 +0900
Subject: :v:

---
 packages/client/src/pizzax.ts             | 4 ++--
 packages/client/src/ui/deck/deck-store.ts | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 3ac4c5c720..bbd68e762f 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -56,8 +56,8 @@ export class Storage<T extends StateDef> {
 			await this.migrate();
 
 			const deviceState: State<T> = await get(this.deviceStateKeyName);
-			const deviceAccountState = $i ? await get(this.deviceAccountStateKeyName) : {};
-			const registryCache = $i ? await get(this.registryCacheKeyName) : {};
+			const deviceAccountState = $i ? await get(this.deviceAccountStateKeyName) || {} : {};
+			const registryCache = $i ? await get(this.registryCacheKeyName) || {} : {};
 	
 			for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]][]) {
 				if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
diff --git a/packages/client/src/ui/deck/deck-store.ts b/packages/client/src/ui/deck/deck-store.ts
index 6b6b02f3f9..c9200ad981 100644
--- a/packages/client/src/ui/deck/deck-store.ts
+++ b/packages/client/src/ui/deck/deck-store.ts
@@ -61,6 +61,8 @@ export const deckStore = markRaw(new Storage('deck', {
 export const loadDeck = async () => {
 	let deck;
 
+	await deckStore.ready;
+
 	try {
 		deck = await api('i/registry/get', {
 			scope: ['client', 'deck', 'profiles'],
-- 
cgit v1.2.3-freya


From 9e6d13ce46f4605bf35679f571a9f2760d55eada Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 30 Dec 2021 01:37:16 +0900
Subject: :v:

---
 packages/client/src/pizzax.ts             | 2 +-
 packages/client/src/ui/chat/index.vue     | 4 +++-
 packages/client/src/ui/deck.vue           | 4 +++-
 packages/client/src/ui/deck/deck-store.ts | 2 --
 4 files changed, 7 insertions(+), 5 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index bbd68e762f..479799d1f9 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -55,7 +55,7 @@ export class Storage<T extends StateDef> {
 		return new Promise(async (resolve, reject) => {
 			await this.migrate();
 
-			const deviceState: State<T> = await get(this.deviceStateKeyName);
+			const deviceState: State<T> = await get(this.deviceStateKeyName) || {};
 			const deviceAccountState = $i ? await get(this.deviceAccountStateKeyName) || {} : {};
 			const registryCache = $i ? await get(this.registryCacheKeyName) || {} : {};
 	
diff --git a/packages/client/src/ui/chat/index.vue b/packages/client/src/ui/chat/index.vue
index f66ab4dcee..10cad6b98e 100644
--- a/packages/client/src/ui/chat/index.vue
+++ b/packages/client/src/ui/chat/index.vue
@@ -160,12 +160,14 @@ export default defineComponent({
 		}
 	},
 
-	created() {
+	async created() {
 		if (window.innerWidth < 1024) {
 			localStorage.setItem('ui', 'default');
 			location.reload();
 		}
 
+		await store.ready;
+
 		os.api('users/lists/list').then(lists => {
 			this.lists = lists;
 		});
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 73dc83180f..e1718d3df9 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -68,7 +68,7 @@ export default defineComponent({
 		DeckColumnCore,
 	},
 
-	setup() {
+	async setup() {
 		const isMobile = ref(window.innerWidth <= 500);
 		window.addEventListener('resize', () => {
 			isMobile.value = window.innerWidth <= 500;
@@ -81,6 +81,8 @@ export default defineComponent({
 			drawerMenuShowing.value = false;
 		});
 
+		await deckStore.ready;
+
 		const columns = deckStore.reactiveState.columns;
 		const layout = deckStore.reactiveState.layout;
 		const menuIndicated = computed(() => {
diff --git a/packages/client/src/ui/deck/deck-store.ts b/packages/client/src/ui/deck/deck-store.ts
index c9200ad981..6b6b02f3f9 100644
--- a/packages/client/src/ui/deck/deck-store.ts
+++ b/packages/client/src/ui/deck/deck-store.ts
@@ -61,8 +61,6 @@ export const deckStore = markRaw(new Storage('deck', {
 export const loadDeck = async () => {
 	let deck;
 
-	await deckStore.ready;
-
 	try {
 		deck = await api('i/registry/get', {
 			scope: ['client', 'deck', 'profiles'],
-- 
cgit v1.2.3-freya


From 14e74beba13009fde35db75a1db7a999e1967733 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 30 Dec 2021 02:03:39 +0900
Subject: :v:

---
 packages/client/src/pizzax.ts | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 479799d1f9..1a48dc0a2c 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -117,35 +117,37 @@ export class Storage<T extends StateDef> {
 	}
 
 	public set<K extends keyof T>(key: K, value: T[K]['default']): Promise<void> {
-		if (_DEV_) console.log('set', key, value);
+		const rawValue = JSON.parse(JSON.stringify(value));
 
-		this.state[key] = value;
-		this.reactiveState[key].value = value;
+		if (_DEV_) console.log('set', key, rawValue, value);
+
+		this.state[key] = rawValue;
+		this.reactiveState[key].value = rawValue;
 
 		return this.addIdbSetJob(async () => {
 			switch (this.def[key].where) {
 				case 'device': {
 					const deviceState = await get(this.deviceStateKeyName) || {};
-					deviceState[key] = value;
+					deviceState[key] = rawValue;
 					await set(this.deviceStateKeyName, deviceState);
 					break;
 				}
 				case 'deviceAccount': {
 					if ($i == null) break;
 					const deviceAccountState = await get(this.deviceAccountStateKeyName) || {};
-					deviceAccountState[key] = value;
+					deviceAccountState[key] = rawValue;
 					await set(this.deviceAccountStateKeyName, deviceAccountState);
 					break;
 				}
 				case 'account': {
 					if ($i == null) break;
 					const cache = await get(this.registryCacheKeyName) || {};
-					cache[key] = value;
+					cache[key] = rawValue;
 					await set(this.registryCacheKeyName, cache);
 					await api('i/registry/set', {
 						scope: ['client', this.key],
 						key: key,
-						value: value
+						value: rawValue
 					});
 					break;
 				}
-- 
cgit v1.2.3-freya


From 69057b5787dfc2a3c251da13a12a831c9b020880 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 30 Dec 2021 02:30:24 +0900
Subject: add debug comment

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 1a48dc0a2c..de3924da1a 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -125,6 +125,7 @@ export class Storage<T extends StateDef> {
 		this.reactiveState[key].value = rawValue;
 
 		return this.addIdbSetJob(async () => {
+			if (_DEV_) console.log(`set ${key} start`);
 			switch (this.def[key].where) {
 				case 'device': {
 					const deviceState = await get(this.deviceStateKeyName) || {};
@@ -152,6 +153,7 @@ export class Storage<T extends StateDef> {
 					break;
 				}
 			}
+			if (_DEV_) console.log(`set ${key} complete`);
 		});
 	}
 
-- 
cgit v1.2.3-freya


From 93e3aede354aac458db444e5a47060fc3b01cc3f Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 30 Dec 2021 02:57:56 +0900
Subject: スコープの判定を厳密に
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/pizzax.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index fc01e92ee7..dbbbfc228a 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -74,7 +74,7 @@ export class Storage<T extends StateDef> {
 			}, 1);
 			// streamingのuser storage updateイベントを監視して更新
 			connection?.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
-				if (scope[1] !== this.key || this.state[key] === value) return;
+				if (scope.length !== 2 || scope[0] !== 'client' || scope[1] !== this.key || this.state[key] === value) return;
 
 				this.state[key] = value;
 				this.reactiveState[key].value = value;
-- 
cgit v1.2.3-freya


From c1aa60bc40be5af2b1521d7b1799e50aa95f0a5d Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 30 Dec 2021 03:26:21 +0900
Subject: :v:

---
 packages/client/src/init.ts     | 6 ++++++
 packages/client/src/ui/deck.vue | 4 +---
 2 files changed, 7 insertions(+), 3 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 66d75e70fb..899bf1f107 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -40,9 +40,12 @@ import { reloadChannel } from '@/scripts/unison-reload';
 import { reactionPicker } from '@/scripts/reaction-picker';
 import { getUrlWithoutLoginId } from '@/scripts/login-id';
 import { getAccountFromId } from '@/scripts/get-account-from-id';
+import { deckStore } from './ui/deck/deck-store';
 
 console.info(`Misskey v${version}`);
 
+await defaultStore.ready;
+
 if (_DEV_) {
 	console.warn('Development mode!!!');
 
@@ -219,6 +222,9 @@ if (splash) splash.addEventListener('transitionend', () => {
 
 const rootEl = document.createElement('div');
 document.body.appendChild(rootEl);
+
+if (ui === 'deck') await deckStore.ready;
+
 app.mount(rootEl);
 
 // boot.jsのやつを解除
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index e1718d3df9..73dc83180f 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -68,7 +68,7 @@ export default defineComponent({
 		DeckColumnCore,
 	},
 
-	async setup() {
+	setup() {
 		const isMobile = ref(window.innerWidth <= 500);
 		window.addEventListener('resize', () => {
 			isMobile.value = window.innerWidth <= 500;
@@ -81,8 +81,6 @@ export default defineComponent({
 			drawerMenuShowing.value = false;
 		});
 
-		await deckStore.ready;
-
 		const columns = deckStore.reactiveState.columns;
 		const layout = deckStore.reactiveState.layout;
 		const menuIndicated = computed(() => {
-- 
cgit v1.2.3-freya


From 97696b18a662185d1b50b6541166e5f4373cf6a6 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 30 Dec 2021 03:37:57 +0900
Subject: fix

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index c8f75273fb..543450e070 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -106,10 +106,12 @@ export class Storage<T extends StateDef> {
 					this.state[key] = value;
 					this.reactiveState[key].value = value;
 
-					const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
-					if (cache[key] !== value) {
-						cache[key] = value;
-						localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
+					this.addIdbSetJob(async () => {
+						const cache = await get(this.registryCacheKeyName);
+						if (cache[key] !== value) {
+							cache[key] = value;
+							await set(this.registryCacheKeyName, cache);
+						}
 					}
 				});
 			}
-- 
cgit v1.2.3-freya


From e60517f53bff1e4b2736fa9cafad186e4d4b2d3c Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 30 Dec 2021 03:41:49 +0900
Subject: comment

---
 packages/client/src/pizzax.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 543450e070..8ee1e5575c 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -30,7 +30,7 @@ export class Storage<T extends StateDef> {
 	public readonly state = {} as State<T>;
 	public readonly reactiveState = {} as ReactiveState<T>;
 
-	// indexedDB保存を重複させないために簡易的にキューイング
+	// 簡易的にキューイングして占有ロックとする
 	private nextIdbJob: Promise<any> = Promise.resolve();
 	private addIdbSetJob<T>(job: () => Promise<T>) {
 		const promise = this.nextIdbJob.then(job, e => {
-- 
cgit v1.2.3-freya


From 24a2fff9294fa6288c2afed373c8d3a9ca515ea1 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 30 Dec 2021 03:42:40 +0900
Subject: プロパティ名変更
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/pizzax.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 8ee1e5575c..1dad1bbd77 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -31,13 +31,13 @@ export class Storage<T extends StateDef> {
 	public readonly reactiveState = {} as ReactiveState<T>;
 
 	// 簡易的にキューイングして占有ロックとする
-	private nextIdbJob: Promise<any> = Promise.resolve();
+	private currentIdbJob: Promise<any> = Promise.resolve();
 	private addIdbSetJob<T>(job: () => Promise<T>) {
-		const promise = this.nextIdbJob.then(job, e => {
+		const promise = this.currentIdbJob.then(job, e => {
 			console.error('Pizzax failed to save data to idb!', e);
 			return job();
 		});
-		this.nextIdbJob = promise;
+		this.currentIdbJob = promise;
 		return promise;
 	}
 
-- 
cgit v1.2.3-freya


From 8e290ba7f6e736d5bee1e9a01e16c75f9b665adb Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 2 Jan 2022 20:31:48 +0900
Subject: fix

---
 packages/client/src/pizzax.ts | 82 +++++++++++++++++++++++--------------------
 1 file changed, 44 insertions(+), 38 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 1dad1bbd77..d5dce70e7c 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -17,7 +17,8 @@ type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
 const connection = $i && stream.useChannel('main');
 
 export class Storage<T extends StateDef> {
-	public readonly ready: PromiseLike<void>;
+	public readonly ready: Promise<void>;
+	public readonly loaded: Promise<void>;
 
 	public readonly key: string;
 	public readonly deviceStateKeyName: string;
@@ -49,32 +50,53 @@ export class Storage<T extends StateDef> {
 		this.def = def;
 
 		this.ready = this.init();
+		this.loaded = this.ready.then(() => this.load());
 	}
 
-	private init(): Promise<void> {
-		return new Promise(async (resolve, reject) => {
-			await this.migrate();
+	private async init(): Promise<void> {
+		await this.migrate();
 
-			const deviceState: State<T> = await get(this.deviceStateKeyName) || {};
-			const deviceAccountState = $i ? await get(this.deviceAccountStateKeyName) || {} : {};
-			const registryCache = $i ? await get(this.registryCacheKeyName) || {} : {};
+		const deviceState: State<T> = await get(this.deviceStateKeyName) || {};
+		const deviceAccountState = $i ? await get(this.deviceAccountStateKeyName) || {} : {};
+		const registryCache = $i ? await get(this.registryCacheKeyName) || {} : {};
 	
-			for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]][]) {
-				if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
-					this.state[k] = deviceState[k];
-				} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) {
-					this.state[k] = registryCache[k];
-				} else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
-					this.state[k] = deviceAccountState[k];
-				} else {
-					this.state[k] = v.default;
-					if (_DEV_) console.log('Use default value', k, v.default);
-				}
-			}
-			for (const [k, v] of Object.entries(this.state) as [keyof T, T[keyof T]][]) {
-				this.reactiveState[k] = ref(v);
+		for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]][]) {
+			if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
+				this.state[k] = deviceState[k];
+			} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) {
+				this.state[k] = registryCache[k];
+			} else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
+				this.state[k] = deviceAccountState[k];
+			} else {
+				this.state[k] = v.default;
+				if (_DEV_) console.log('Use default value', k, v.default);
 			}
+		}
+		for (const [k, v] of Object.entries(this.state) as [keyof T, T[keyof T]][]) {
+			this.reactiveState[k] = ref(v);
+		}
+
+		if ($i) {
+			// streamingのuser storage updateイベントを監視して更新
+			connection?.on('registryUpdated', ({ scope, key, value }: { scope?: string[], key: keyof T, value: T[typeof key]['default'] }) => {
+				if (!scope || scope.length !== 2 || scope[0] !== 'client' || scope[1] !== this.key || this.state[key] === value) return;
+	
+				this.state[key] = value;
+				this.reactiveState[key].value = value;
 	
+				this.addIdbSetJob(async () => {
+					const cache = await get(this.registryCacheKeyName);
+					if (cache[key] !== value) {
+						cache[key] = value;
+						await set(this.registryCacheKeyName, cache);
+					}
+				});
+			});
+		}
+	}
+
+	private async load(): Promise<void> {
+		return new Promise((resolve, reject) => {
 			if ($i) {
 				// なぜかsetTimeoutしないとapi関数内でエラーになる(おそらく循環参照してることに原因がありそう)
 				setTimeout(() => {
@@ -93,27 +115,11 @@ export class Storage<T extends StateDef> {
 								}
 							}
 						}
-
+	
 						return set(this.registryCacheKeyName, cache);
 					})
 					.then(() => resolve());
 				}, 1);
-
-				// streamingのuser storage updateイベントを監視して更新
-				connection?.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
-					if (scope.length !== 2 || scope[0] !== 'client' || scope[1] !== this.key || this.state[key] === value) return;
-
-					this.state[key] = value;
-					this.reactiveState[key].value = value;
-
-					this.addIdbSetJob(async () => {
-						const cache = await get(this.registryCacheKeyName);
-						if (cache[key] !== value) {
-							cache[key] = value;
-							await set(this.registryCacheKeyName, cache);
-						}
-					}
-				});
 			}
 		});
 	}
-- 
cgit v1.2.3-freya


From 67c627e93fc312f983820a2f098939d0dd2f43b4 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 2 Jan 2022 20:33:57 +0900
Subject: fix

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index d5dce70e7c..4fe53a8bb9 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -121,6 +121,8 @@ export class Storage<T extends StateDef> {
 					.then(() => resolve());
 				}, 1);
 			}
+
+			resolve();
 		});
 	}
 
-- 
cgit v1.2.3-freya


From caee136b6b8d46d521f365c3a8914609e954d073 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 2 Jan 2022 20:36:00 +0900
Subject: modify comment

---
 packages/client/src/pizzax.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 4fe53a8bb9..4bc3706e91 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -98,7 +98,7 @@ export class Storage<T extends StateDef> {
 	private async load(): Promise<void> {
 		return new Promise((resolve, reject) => {
 			if ($i) {
-				// なぜかsetTimeoutしないとapi関数内でエラーになる(おそらく循環参照してることに原因がありそう)
+				// api関数と循環参照なので一応setTimeoutしておく
 				setTimeout(() => {
 					api('i/registry/get-all', { scope: ['client', this.key] })
 					.then(kvs => {
-- 
cgit v1.2.3-freya


From cb6d38713f77b346c7a6bf656d39a89be798da4d Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 4 Jan 2022 13:35:30 +0900
Subject: test

---
 packages/client/src/pizzax.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 4bc3706e91..a0c9a1badf 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -2,6 +2,7 @@ import { onUnmounted, Ref, ref, watch } from 'vue';
 import { $i } from './account';
 import { api } from './os';
 import { get, set } from './scripts/idb-proxy';
+import { defaultStore } from './store';
 import { stream } from './stream';
 
 type StateDef = Record<string, {
@@ -95,11 +96,13 @@ export class Storage<T extends StateDef> {
 		}
 	}
 
-	private async load(): Promise<void> {
+	private load(): Promise<void> {
 		return new Promise((resolve, reject) => {
 			if ($i) {
 				// api関数と循環参照なので一応setTimeoutしておく
-				setTimeout(() => {
+				setTimeout(async () => {
+					await defaultStore.ready;
+
 					api('i/registry/get-all', { scope: ['client', this.key] })
 					.then(kvs => {
 						const cache = {};
-- 
cgit v1.2.3-freya


From 5bf637b9789e15d8a635b9fedf461419795013e4 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 4 Jan 2022 15:39:19 +0900
Subject: return reset value

---
 packages/client/src/pizzax.ts | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index a0c9a1badf..867d2f9bd3 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -177,6 +177,7 @@ export class Storage<T extends StateDef> {
 
 	public reset(key: keyof T) {
 		this.set(key, this.def[key].default);
+		return this.def[key].default;
 	}
 
 	/**
-- 
cgit v1.2.3-freya


From 52840faa85ed5c2262301a0e4b851d34e4bebe64 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 5 Jan 2022 00:55:30 +0900
Subject: wip

---
 packages/client/src/pizzax.ts | 38 ++++++++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 867d2f9bd3..51b5cd40d8 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -4,6 +4,8 @@ import { api } from './os';
 import { get, set } from './scripts/idb-proxy';
 import { defaultStore } from './store';
 import { stream } from './stream';
+// SafariがBroadcastChannel未実装なのでライブラリを使う
+import { BroadcastChannel } from 'broadcast-channel';
 
 type StateDef = Record<string, {
 	where: 'account' | 'device' | 'deviceAccount';
@@ -15,6 +17,13 @@ type ReactiveState<T extends StateDef> = { [K in keyof T]: Ref<T[K]['default']>;
 
 type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
 
+type PizzaxChannelMessage<T extends StateDef> = {
+	where: 'device' | 'deviceAccount';
+	key: keyof T;
+	value: T[keyof T];
+	userId?: string;
+};
+
 const connection = $i && stream.useChannel('main');
 
 export class Storage<T extends StateDef> {
@@ -22,9 +31,9 @@ export class Storage<T extends StateDef> {
 	public readonly loaded: Promise<void>;
 
 	public readonly key: string;
-	public readonly deviceStateKeyName: string;
-	public readonly deviceAccountStateKeyName: string;
-	public readonly registryCacheKeyName: string;
+	public readonly deviceStateKeyName: `pizzax::${this['key']}`;
+	public readonly deviceAccountStateKeyName: `pizzax::${this['key']}::${string}` | '';
+	public readonly registryCacheKeyName: `pizzax::${this['key']}::cache::${string}` | '';
 
 	public readonly def: T;
 
@@ -32,6 +41,8 @@ export class Storage<T extends StateDef> {
 	public readonly state = {} as State<T>;
 	public readonly reactiveState = {} as ReactiveState<T>;
 
+	private pizzaxChannel: BroadcastChannel<PizzaxChannelMessage<T>>;
+
 	// 簡易的にキューイングして占有ロックとする
 	private currentIdbJob: Promise<any> = Promise.resolve();
 	private addIdbSetJob<T>(job: () => Promise<T>) {
@@ -50,6 +61,8 @@ export class Storage<T extends StateDef> {
 		this.registryCacheKeyName = $i ? `pizzax::${key}::cache::${$i.id}` : '';
 		this.def = def;
 
+		this.pizzaxChannel = new BroadcastChannel(`pizzax::${key}`);
+
 		this.ready = this.init();
 		this.loaded = this.ready.then(() => this.load());
 	}
@@ -77,11 +90,17 @@ export class Storage<T extends StateDef> {
 			this.reactiveState[k] = ref(v);
 		}
 
+		this.pizzaxChannel.addEventListener('message', ({ where, key, value, userId }) => {
+			if (where === 'deviceAccount' && !($i && userId !== $i.id)) return;
+			this.state[key] = value;
+			this.reactiveState[key].value = value;
+		});
+
 		if ($i) {
 			// streamingのuser storage updateイベントを監視して更新
 			connection?.on('registryUpdated', ({ scope, key, value }: { scope?: string[], key: keyof T, value: T[typeof key]['default'] }) => {
 				if (!scope || scope.length !== 2 || scope[0] !== 'client' || scope[1] !== this.key || this.state[key] === value) return;
-	
+
 				this.state[key] = value;
 				this.reactiveState[key].value = value;
 	
@@ -141,6 +160,11 @@ export class Storage<T extends StateDef> {
 			if (_DEV_) console.log(`set ${key} start`);
 			switch (this.def[key].where) {
 				case 'device': {
+					this.pizzaxChannel.postMessage({
+						where: 'device',
+						key,
+						value: rawValue,
+					});
 					const deviceState = await get(this.deviceStateKeyName) || {};
 					deviceState[key] = rawValue;
 					await set(this.deviceStateKeyName, deviceState);
@@ -148,6 +172,12 @@ export class Storage<T extends StateDef> {
 				}
 				case 'deviceAccount': {
 					if ($i == null) break;
+					this.pizzaxChannel.postMessage({
+						where: 'deviceAccount',
+						key,
+						value: rawValue,
+						userId: $i.id,
+					});
 					const deviceAccountState = await get(this.deviceAccountStateKeyName) || {};
 					deviceAccountState[key] = rawValue;
 					await set(this.deviceAccountStateKeyName, deviceAccountState);
-- 
cgit v1.2.3-freya


From 418d936044d5eba18cfad575b561372aac97b94d Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 5 Jan 2022 01:25:34 +0900
Subject: add comment

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 51b5cd40d8..a4c54ccd57 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -91,6 +91,8 @@ export class Storage<T extends StateDef> {
 		}
 
 		this.pizzaxChannel.addEventListener('message', ({ where, key, value, userId }) => {
+			// アカウント変更すればunisonReloadが効くため、このreturnが発火することは
+			// まずないと思うけど一応弾いておく
 			if (where === 'deviceAccount' && !($i && userId !== $i.id)) return;
 			this.state[key] = value;
 			this.reactiveState[key].value = value;
-- 
cgit v1.2.3-freya


From dbd46fbeb5e156eb21ed1fe78ad44ff984f75d82 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 9 Jan 2022 02:55:27 +0900
Subject: 初期値にデフォルト値を挿入する & JSON.parse/stringify操作をdeepcopyに
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/package.json  |  1 +
 packages/client/src/pizzax.ts | 55 +++++++++++++++++++++++--------------------
 packages/client/tsconfig.json |  1 +
 packages/client/yarn.lock     | 12 ++++++++++
 4 files changed, 43 insertions(+), 26 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/package.json b/packages/client/package.json
index 167ab2e816..5f841dc77a 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -55,6 +55,7 @@
 		"css-loader": "6.5.1",
 		"cssnano": "5.0.14",
 		"date-fns": "2.28.0",
+		"deepcopy": "2.1.0",
 		"escape-regexp": "0.0.1",
 		"eslint": "8.6.0",
 		"eslint-plugin-vue": "8.2.0",
diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index a4c54ccd57..17a91af58b 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -4,6 +4,7 @@ import { api } from './os';
 import { get, set } from './scripts/idb-proxy';
 import { defaultStore } from './store';
 import { stream } from './stream';
+import * as deepcopy from 'deepcopy';
 // SafariがBroadcastChannel未実装なのでライブラリを使う
 import { BroadcastChannel } from 'broadcast-channel';
 
@@ -20,7 +21,7 @@ type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
 type PizzaxChannelMessage<T extends StateDef> = {
 	where: 'device' | 'deviceAccount';
 	key: keyof T;
-	value: T[keyof T];
+	value: T[keyof T]['default'];
 	userId?: string;
 };
 
@@ -38,8 +39,8 @@ export class Storage<T extends StateDef> {
 	public readonly def: T;
 
 	// TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487
-	public readonly state = {} as State<T>;
-	public readonly reactiveState = {} as ReactiveState<T>;
+	public readonly state: State<T>;
+	public readonly reactiveState: ReactiveState<T>;
 
 	private pizzaxChannel: BroadcastChannel<PizzaxChannelMessage<T>>;
 
@@ -63,6 +64,14 @@ export class Storage<T extends StateDef> {
 
 		this.pizzaxChannel = new BroadcastChannel(`pizzax::${key}`);
 
+		this.state = {} as State<T>;
+		this.reactiveState = {} as ReactiveState<T>;
+
+		for (const [k, v] of Object.entries(def) as [keyof T, T[keyof T]['default']][]) {
+			this.state[k] = v.default;
+			this.reactiveState[k] = ref(v.default);
+		}
+	
 		this.ready = this.init();
 		this.loaded = this.ready.then(() => this.load());
 	}
@@ -74,28 +83,24 @@ export class Storage<T extends StateDef> {
 		const deviceAccountState = $i ? await get(this.deviceAccountStateKeyName) || {} : {};
 		const registryCache = $i ? await get(this.registryCacheKeyName) || {} : {};
 	
-		for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]][]) {
+		for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]['default']][]) {
 			if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
-				this.state[k] = deviceState[k];
+				this.reactiveState[k].value = this.state[k] = deviceState[k];
 			} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) {
-				this.state[k] = registryCache[k];
+				this.reactiveState[k].value = this.state[k] = registryCache[k];
 			} else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
-				this.state[k] = deviceAccountState[k];
+				this.reactiveState[k].value = this.state[k] = deviceAccountState[k];
 			} else {
-				this.state[k] = v.default;
+				this.reactiveState[k].value = this.state[k] = v.default;
 				if (_DEV_) console.log('Use default value', k, v.default);
 			}
 		}
-		for (const [k, v] of Object.entries(this.state) as [keyof T, T[keyof T]][]) {
-			this.reactiveState[k] = ref(v);
-		}
 
 		this.pizzaxChannel.addEventListener('message', ({ where, key, value, userId }) => {
 			// アカウント変更すればunisonReloadが効くため、このreturnが発火することは
 			// まずないと思うけど一応弾いておく
 			if (where === 'deviceAccount' && !($i && userId !== $i.id)) return;
-			this.state[key] = value;
-			this.reactiveState[key].value = value;
+			this.reactiveState[key].value = this.state[key] = value;
 		});
 
 		if ($i) {
@@ -103,8 +108,7 @@ export class Storage<T extends StateDef> {
 			connection?.on('registryUpdated', ({ scope, key, value }: { scope?: string[], key: keyof T, value: T[typeof key]['default'] }) => {
 				if (!scope || scope.length !== 2 || scope[0] !== 'client' || scope[1] !== this.key || this.state[key] === value) return;
 
-				this.state[key] = value;
-				this.reactiveState[key].value = value;
+				this.reactiveState[key].value = this.state[key] = value;
 	
 				this.addIdbSetJob(async () => {
 					const cache = await get(this.registryCacheKeyName);
@@ -126,16 +130,14 @@ export class Storage<T extends StateDef> {
 
 					api('i/registry/get-all', { scope: ['client', this.key] })
 					.then(kvs => {
-						const cache = {};
-						for (const [k, v] of Object.entries(this.def)) {
+						const cache: Partial<T> = {};
+						for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]['default']][]) {
 							if (v.where === 'account') {
 								if (Object.prototype.hasOwnProperty.call(kvs, k)) {
-									this.state[k as keyof T] = kvs[k];
-									this.reactiveState[k as keyof T].value = kvs[k as string];
-									cache[k] = kvs[k];
+									this.reactiveState[k].value = this.state[k] = (kvs as Partial<T>)[k];
+									cache[k] = (kvs as Partial<T>)[k];
 								} else {
-									this.state[k as keyof T] = v.default;
-									this.reactiveState[k].value = v.default;
+									this.reactiveState[k].value = this.state[k] = v.default;
 								}
 							}
 						}
@@ -151,12 +153,13 @@ export class Storage<T extends StateDef> {
 	}
 
 	public set<K extends keyof T>(key: K, value: T[K]['default']): Promise<void> {
-		const rawValue = JSON.parse(JSON.stringify(value));
+		// IndexedDBやBroadcastChannelで扱うために単純なオブジェクトにする
+		// (JSON.parse(JSON.stringify(value))の代わり)
+		const rawValue = deepcopy(value);
 
 		if (_DEV_) console.log('set', key, rawValue, value);
 
-		this.state[key] = rawValue;
-		this.reactiveState[key].value = rawValue;
+		this.reactiveState[key].value = this.state[key] = rawValue;
 
 		return this.addIdbSetJob(async () => {
 			if (_DEV_) console.log(`set ${key} start`);
@@ -192,7 +195,7 @@ export class Storage<T extends StateDef> {
 					await set(this.registryCacheKeyName, cache);
 					await api('i/registry/set', {
 						scope: ['client', this.key],
-						key: key,
+						key: key.toString(),
 						value: rawValue
 					});
 					break;
diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json
index b44cf2f895..f344ae09c6 100644
--- a/packages/client/tsconfig.json
+++ b/packages/client/tsconfig.json
@@ -12,6 +12,7 @@
 		"target": "es2017",
 		"module": "esnext",
 		"moduleResolution": "node",
+		"allowSyntheticDefaultImports": true,
 		"removeComments": false,
 		"noLib": false,
 		"strict": true,
diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock
index 80cf1fc982..76cc499b06 100644
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock
@@ -2097,6 +2097,13 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepcopy@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/deepcopy/-/deepcopy-2.1.0.tgz#2deb0dd52d079c2ecb7924b640a7c3abd4db1d6d"
+  integrity sha512-8cZeTb1ZKC3bdSCP6XOM1IsTczIO73fdqtwa2B0N15eAz7gmyhQo+mc5gnFuulsgN3vIQYmTgbmQVKalH1dKvQ==
+  dependencies:
+    type-detect "^4.0.8"
+
 define-properties@^1.1.2, define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -5934,6 +5941,11 @@ type-check@^0.4.0, type-check@~0.4.0:
   dependencies:
     prelude-ls "^1.2.1"
 
+type-detect@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
+
 type-fest@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
-- 
cgit v1.2.3-freya


From f4bd147299e9f588efb2b4a877ece8b545f0d984 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 17 Apr 2022 00:11:37 +0900
Subject: Fix settings page

---
 packages/client/src/pages/settings/index.vue | 30 ++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 44c3be62fe..3786cf60f6 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -2,7 +2,10 @@
 <MkSpacer :content-max="900" :margin-min="20" :margin-max="32">
 	<div ref="el" class="vvcocwet" :class="{ wide: !narrow }">
 		<div class="header">
-			<div class="title">{{ $ts.settings }}</div>
+			<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">
@@ -12,7 +15,7 @@
 					<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
 				</div>
 			</div>
-			<div class="main">
+			<div v-if="!(narrow && page == null)" class="main">
 				<div class="bkzroven">
 					<component :is="component" :ref="el => pageChanged(el)" :key="page" v-bind="pageProps"/>
 				</div>
@@ -23,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineAsyncComponent, nextTick, onMounted, ref, watch } from 'vue';
+import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { i18n } from '@/i18n';
 import MkInfo from '@/components/ui/info.vue';
 import MkSuperMenu from '@/components/ui/super-menu.vue';
@@ -46,10 +49,18 @@ const indexInfo = {
 };
 const INFO = ref(indexInfo);
 const page = ref(props.initialPage);
-const narrow = ref(false);
 const view = ref(null);
 const el = ref<HTMLElement | null>(null);
 const childInfo = ref(null);
+
+const narrow = ref(false);
+const NARROW_THRESHOLD = 600;
+
+const ro = new ResizeObserver((entries, observer) => {
+	if (entries.length === 0) return;
+	narrow.value = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
+});
+
 const menuDef = computed(() => [{
 	title: i18n.ts.basicSettings,
 	items: [{
@@ -240,12 +251,18 @@ watch(() => props.initialPage, () => {
 });
 
 onMounted(() => {
-	narrow.value = el.value.offsetWidth < 800;
+	ro.observe(el.value);
+
+	narrow.value = el.value.offsetWidth < NARROW_THRESHOLD;
 	if (!narrow.value) {
-		page.value = 'profile';
+		page.value = props.initialPage || 'profile';
 	}
 });
 
+onUnmounted(() => {
+	ro.disconnect();
+});
+
 const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
 
 const pageChanged = (page) => {
@@ -267,6 +284,7 @@ defineExpose({
 		font-weight: bold;
 
 		> .title {
+			display: block;
 			width: 34%;
 		}
 
-- 
cgit v1.2.3-freya


From b3818d9c48ce78f6a5886ade6a378f952bef51c9 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 17 Apr 2022 01:17:11 +0900
Subject: nanka iroiro

---
 packages/client/src/components/global/a.vue  | 25 ++--------
 packages/client/src/pages/settings/index.vue | 70 +++++++++++++++-------------
 packages/client/src/scripts/navigate.ts      | 34 ++++++++++++++
 3 files changed, 77 insertions(+), 52 deletions(-)
 create mode 100644 packages/client/src/scripts/navigate.ts

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/global/a.vue b/packages/client/src/components/global/a.vue
index 52fef50f9b..5287d59b3e 100644
--- a/packages/client/src/components/global/a.vue
+++ b/packages/client/src/components/global/a.vue
@@ -5,14 +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 { defaultStore } from '@/store';
+import { MisskeyNavigator } from '@/scripts/navigate';
 
 const props = withDefaults(defineProps<{
 	to: string;
@@ -23,9 +22,7 @@ const props = withDefaults(defineProps<{
 	behavior: null,
 });
 
-type Navigate = (path: string, record?: boolean) => void;
-const navHook = inject<null | Navigate>('navHook', null);
-const sideViewHook = inject<null | Navigate>('sideViewHook', null);
+const mkNav = new MisskeyNavigator();
 
 const active = $computed(() => {
 	if (props.activeClass == null) return false;
@@ -48,11 +45,11 @@ function onContextmenu(ev) {
 		action: () => {
 			os.pageWindow(props.to);
 		}
-	}, sideViewHook ? {
+	}, mkNav.sideViewHook ? {
 		icon: 'fas fa-columns',
 		text: i18n.ts.openInSideView,
 		action: () => {
-			sideViewHook(props.to);
+			if (mkNav.sideViewHook) mkNav.sideViewHook(props.to);
 		}
 	} : undefined, {
 		icon: 'fas fa-expand-alt',
@@ -101,18 +98,6 @@ function nav() {
 		}
 	}
 
-	if (navHook) {
-		navHook(props.to);
-	} else {
-		if (defaultStore.state.defaultSideView && sideViewHook && props.to !== '/') {
-			return sideViewHook(props.to);
-		}
-
-		if (router.currentRoute.value.path === props.to) {
-			window.scroll({ top: 0, behavior: 'smooth' });
-		} else {
-			router.push(props.to);
-		}
-	}
+	mkNav.push(props.to);
 }
 </script>
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 3786cf60f6..68be795008 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -9,15 +9,15 @@
 			<div v-if="childInfo" class="subtitle">{{ childInfo.title }}</div>
 		</div>
 		<div class="body">
-			<div v-if="!narrow || page == null" class="nav">
+			<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="page == null"></MkSuperMenu>
+					<MkSuperMenu :def="menuDef" :grid="initialPage == null"></MkSuperMenu>
 				</div>
 			</div>
-			<div v-if="!(narrow && page == null)" class="main">
+			<div v-if="!(narrow && initialPage == null)" class="main">
 				<div class="bkzroven">
-					<component :is="component" :ref="el => pageChanged(el)" :key="page" v-bind="pageProps"/>
+					<component :is="component" :ref="el => pageChanged(el)" :key="initialPage" v-bind="pageProps"/>
 				</div>
 			</div>
 		</div>
@@ -36,6 +36,7 @@ import { unisonReload } from '@/scripts/unison-reload';
 import * as symbols from '@/symbols';
 import { instance } from '@/instance';
 import { $i } from '@/account';
+import { MisskeyNavigator } from '@/scripts/navigate';
 
 const props = defineProps<{
   initialPage?: string
@@ -48,11 +49,11 @@ const indexInfo = {
 	hideHeader: true,
 };
 const INFO = ref(indexInfo);
-const page = ref(props.initialPage);
-const view = ref(null);
 const el = ref<HTMLElement | null>(null);
 const childInfo = ref(null);
 
+const nav = new MisskeyNavigator();
+
 const narrow = ref(false);
 const NARROW_THRESHOLD = 600;
 
@@ -67,42 +68,42 @@ const menuDef = computed(() => [{
 		icon: 'fas fa-user',
 		text: i18n.ts.profile,
 		to: '/settings/profile',
-		active: page.value === 'profile',
+		active: props.initialPage === 'profile',
 	}, {
 		icon: 'fas fa-lock-open',
 		text: i18n.ts.privacy,
 		to: '/settings/privacy',
-		active: page.value === 'privacy',
+		active: props.initialPage === 'privacy',
 	}, {
 		icon: 'fas fa-laugh',
 		text: i18n.ts.reaction,
 		to: '/settings/reaction',
-		active: page.value === 'reaction',
+		active: props.initialPage === 'reaction',
 	}, {
 		icon: 'fas fa-cloud',
 		text: i18n.ts.drive,
 		to: '/settings/drive',
-		active: page.value === 'drive',
+		active: props.initialPage === 'drive',
 	}, {
 		icon: 'fas fa-bell',
 		text: i18n.ts.notifications,
 		to: '/settings/notifications',
-		active: page.value === 'notifications',
+		active: props.initialPage === 'notifications',
 	}, {
 		icon: 'fas fa-envelope',
 		text: i18n.ts.email,
 		to: '/settings/email',
-		active: page.value === 'email',
+		active: props.initialPage === 'email',
 	}, {
 		icon: 'fas fa-share-alt',
 		text: i18n.ts.integration,
 		to: '/settings/integration',
-		active: page.value === 'integration',
+		active: props.initialPage === 'integration',
 	}, {
 		icon: 'fas fa-lock',
 		text: i18n.ts.security,
 		to: '/settings/security',
-		active: page.value === 'security',
+		active: props.initialPage === 'security',
 	}],
 }, {
 	title: i18n.ts.clientSettings,
@@ -110,27 +111,27 @@ const menuDef = computed(() => [{
 		icon: 'fas fa-cogs',
 		text: i18n.ts.general,
 		to: '/settings/general',
-		active: page.value === 'general',
+		active: props.initialPage === 'general',
 	}, {
 		icon: 'fas fa-palette',
 		text: i18n.ts.theme,
 		to: '/settings/theme',
-		active: page.value === 'theme',
+		active: props.initialPage === 'theme',
 	}, {
 		icon: 'fas fa-list-ul',
 		text: i18n.ts.menu,
 		to: '/settings/menu',
-		active: page.value === 'menu',
+		active: props.initialPage === 'menu',
 	}, {
 		icon: 'fas fa-music',
 		text: i18n.ts.sounds,
 		to: '/settings/sounds',
-		active: page.value === 'sounds',
+		active: props.initialPage === 'sounds',
 	}, {
 		icon: 'fas fa-plug',
 		text: i18n.ts.plugins,
 		to: '/settings/plugin',
-		active: page.value === 'plugin',
+		active: props.initialPage === 'plugin',
 	}],
 }, {
 	title: i18n.ts.otherSettings,
@@ -138,37 +139,37 @@ const menuDef = computed(() => [{
 		icon: 'fas fa-boxes',
 		text: i18n.ts.importAndExport,
 		to: '/settings/import-export',
-		active: page.value === 'import-export',
+		active: props.initialPage === 'import-export',
 	}, {
 		icon: 'fas fa-volume-mute',
 		text: i18n.ts.instanceMute,
 		to: '/settings/instance-mute',
-		active: page.value === 'instance-mute',
+		active: props.initialPage === 'instance-mute',
 	}, {
 		icon: 'fas fa-ban',
 		text: i18n.ts.muteAndBlock,
 		to: '/settings/mute-block',
-		active: page.value === 'mute-block',
+		active: props.initialPage === 'mute-block',
 	}, {
 		icon: 'fas fa-comment-slash',
 		text: i18n.ts.wordMute,
 		to: '/settings/word-mute',
-		active: page.value === 'word-mute',
+		active: props.initialPage === 'word-mute',
 	}, {
 		icon: 'fas fa-key',
 		text: 'API',
 		to: '/settings/api',
-		active: page.value === 'api',
+		active: props.initialPage === 'api',
 	}, {
 		icon: 'fas fa-bolt',
 		text: 'Webhook',
 		to: '/settings/webhook',
-		active: page.value === 'webhook',
+		active: props.initialPage === 'webhook',
 	}, {
 		icon: 'fas fa-ellipsis-h',
 		text: i18n.ts.other,
 		to: '/settings/other',
-		active: page.value === 'other',
+		active: props.initialPage === 'other',
 	}],
 }, {
 	items: [{
@@ -193,8 +194,8 @@ const menuDef = computed(() => [{
 
 const pageProps = ref({});
 const component = computed(() => {
-	if (page.value == null) return null;
-	switch (page.value) {
+	if (props.initialPage == null) return null;
+	switch (props.initialPage) {
 		case 'accounts': return defineAsyncComponent(() => import('./accounts.vue'));
 		case 'profile': return defineAsyncComponent(() => import('./profile.vue'));
 		case 'privacy': return defineAsyncComponent(() => import('./privacy.vue'));
@@ -241,21 +242,26 @@ watch(component, () => {
 
 watch(() => props.initialPage, () => {
 	if (props.initialPage == null && !narrow.value) {
-		page.value = 'profile';
+		nav.push('/settings/profile');
 	} else {
-		page.value = props.initialPage;
 		if (props.initialPage == null) {
 			INFO.value = indexInfo;
 		}
 	}
 });
 
+watch(narrow, () => {
+	if (!narrow.value && props.initialPage == null) {
+		nav.push('/settings/profile');
+	}
+});
+
 onMounted(() => {
 	ro.observe(el.value);
 
 	narrow.value = el.value.offsetWidth < NARROW_THRESHOLD;
-	if (!narrow.value) {
-		page.value = props.initialPage || 'profile';
+	if (!narrow.value && props.initialPage == null) {
+		nav.push('/settings/profile');
 	}
 });
 
diff --git a/packages/client/src/scripts/navigate.ts b/packages/client/src/scripts/navigate.ts
new file mode 100644
index 0000000000..5e0fd60734
--- /dev/null
+++ b/packages/client/src/scripts/navigate.ts
@@ -0,0 +1,34 @@
+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<null | Navigate>('navHook', null);
+		this.sideViewHook = inject<null | Navigate>('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);
+			}
+		}
+	}
+}
-- 
cgit v1.2.3-freya


From fed59b1b71573cdb275a5e7b38bd1b302cc2bdde Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 17 Apr 2022 01:24:13 +0900
Subject: clean up

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 68be795008..1838cb73e3 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -251,7 +251,7 @@ watch(() => props.initialPage, () => {
 });
 
 watch(narrow, () => {
-	if (!narrow.value && props.initialPage == null) {
+	if (props.initialPage == null && !narrow.value) {
 		nav.push('/settings/profile');
 	}
 });
@@ -260,7 +260,7 @@ onMounted(() => {
 	ro.observe(el.value);
 
 	narrow.value = el.value.offsetWidth < NARROW_THRESHOLD;
-	if (!narrow.value && props.initialPage == null) {
+	if (props.initialPage == null && !narrow.value) {
 		nav.push('/settings/profile');
 	}
 });
-- 
cgit v1.2.3-freya


From 55c6f5a740094631369d44f802c473c983231001 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 17 Apr 2022 01:25:45 +0900
Subject: clean up

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/scripts/navigate.ts b/packages/client/src/scripts/navigate.ts
index 5e0fd60734..08b891ec5b 100644
--- a/packages/client/src/scripts/navigate.ts
+++ b/packages/client/src/scripts/navigate.ts
@@ -10,8 +10,8 @@ export class MisskeyNavigator {
 
 	// It should be constructed during vue creating in order for inject function to work
 	constructor() {
-		this.navHook = inject<null | Navigate>('navHook', null);
-		this.sideViewHook = inject<null | Navigate>('sideViewHook', null);
+		this.navHook = inject<Navigate | null>('navHook', null);
+		this.sideViewHook = inject<Navigate | null>('sideViewHook', null);
 	}
 
 	// Use this method instead of router.push()
-- 
cgit v1.2.3-freya


From 39e4f2c137fbdf9be30e986bceac7230841576ab Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 17 Apr 2022 05:12:33 +0900
Subject: feature: Client Preferences Registry on the account

---
 locales/ja-JP.yml                                  |  21 ++
 packages/client/src/pages/settings/index.vue       |   6 +
 .../src/pages/settings/preferences-registry.vue    | 278 +++++++++++++++++++++
 packages/client/src/store.ts                       |  10 +
 4 files changed, 315 insertions(+)
 create mode 100644 packages/client/src/pages/settings/preferences-registry.vue

(limited to 'packages/client/src')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 6326094dd8..5754ed2bfc 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -559,6 +559,8 @@ author: "作者"
 leaveConfirm: "未保存の変更があります。破棄しますか？"
 manage: "管理"
 plugins: "プラグイン"
+preferencesRegistry: "クライアント設定のレジストリ"
+preferencesRegistryShort: "レジストリ"
 deck: "デッキ"
 undeck: "デッキ解除"
 useBlurEffectForModal: "モーダルにぼかし効果を使用"
@@ -894,6 +896,25 @@ _plugin:
   installWarn: "信頼できないプラグインはインストールしないでください。"
   manage: "プラグインの管理"
 
+_preferencesRegistry:
+  list: "一覧"
+  saveNew: "新規保存"
+  apply: "適用"
+  delete: "削除"
+  save: "上書き保存"
+  rename: "名称変更"
+  saveNewDescription: "現在のデバイスの状態をサーバーに保存します。"
+  inputName: "レジストリ名を入力"
+  cannotSave: "保存できません"
+  nameAlreadyExists: "レジストリ名「{name}」は既に存在します。違うレジストリ名を指定してください。"
+  applyConfirm: "プロファイル「{name}」を現在のデバイスに適用しますか？現在のデバイス設定は失われます。"
+  saveConfirm: "{name}に上書き保存しますか？"
+  deleteConfirm: "{name}を削除しますか？"
+  renameConfirm: "「{old}」を「{new}」に変更しますか？"
+  noRegistries: "レジストリは登録されていません。「新規保存」で現在のクライアント設定をサーバーに保存できます。"
+  createdAt: "作成日時: {date} {time}"
+  updatedAt: "更新日時: {date} {time}"
+
 _registry:
   scope: "スコープ"
   key: "キー"
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 1838cb73e3..752054e9b3 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -132,6 +132,11 @@ const menuDef = computed(() => [{
 		text: i18n.ts.plugins,
 		to: '/settings/plugin',
 		active: props.initialPage === 'plugin',
+	}, {
+		icon: 'fas fa-floppy-disk',
+		text: i18n.ts.preferencesRegistryShort,
+		to: '/settings/preferences-registry',
+		active: props.initialPage === 'preferences-registry',
 	}],
 }, {
 	title: i18n.ts.otherSettings,
@@ -225,6 +230,7 @@ const component = computed(() => {
 		case 'deck': return defineAsyncComponent(() => import('./deck.vue'));
 		case 'plugin': return defineAsyncComponent(() => import('./plugin.vue'));
 		case 'plugin/install': return defineAsyncComponent(() => import('./plugin.install.vue'));
+		case 'preferences-registry': return defineAsyncComponent(() => import('./preferences-registry.vue'));
 		case 'import-export': return defineAsyncComponent(() => import('./import-export.vue'));
 		case 'account-info': return defineAsyncComponent(() => import('./account-info.vue'));
 		case 'delete-account': return defineAsyncComponent(() => import('./delete-account.vue'));
diff --git a/packages/client/src/pages/settings/preferences-registry.vue b/packages/client/src/pages/settings/preferences-registry.vue
new file mode 100644
index 0000000000..d668150045
--- /dev/null
+++ b/packages/client/src/pages/settings/preferences-registry.vue
@@ -0,0 +1,278 @@
+<template>
+<div class="_formRoot">
+	<MkButton class="primary" @click="saveNew">{{ ts._preferencesRegistry.saveNew }}</MkButton>
+
+	<FormSection>
+		<template #label>{{ ts._preferencesRegistry.list }}</template>
+		<div
+			v-if="registries && Object.keys(registries).length > 0"
+			v-for="(registry, id) in registries"
+			:key="id"
+			class="_formBlock _panel"
+			:class="$style.registry"
+			@click="$event => menu($event, id)"
+			@contextmenu.prevent.stop="$event => menu($event, id)"
+		>
+			<div :class="$style.registryName">{{ registry.name }}</div>
+			<div :class="$style.registryTime">{{ t('_preferencesRegistry.createdAt', { date: (new Date(registry.createdAt)).toLocaleDateString(), time: (new Date(registry.createdAt)).toLocaleTimeString() }) }}</div>
+			<div :class="$style.registryTime" v-if="registry.updatedAt">{{ t('_preferencesRegistry.updatedAt', { date: (new Date(registry.createdAt)).toLocaleDateString(), time: (new Date(registry.createdAt)).toLocaleTimeString() }) }}</div>
+		</div>
+		<div v-else-if="registries">
+			<MkInfo>{{ ts._preferencesRegistry.noRegistries }}</MkInfo>
+		</div>
+		<MkLoading v-else />
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, useCssModule } from 'vue';
+import FormSection from '@/components/form/section.vue';
+import MkButton from '@/components/ui/button.vue';
+import MkInfo from '@/components/ui/info.vue';
+import * as os from '@/os';
+import { v4 as uuid } from 'uuid';
+import { ColdDeviceStorage, defaultStore } from '@/store';
+import * as symbols from '@/symbols';
+import { unisonReload } from '@/scripts/unison-reload';
+import { stream } from '@/stream';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+const { t, ts } = i18n;
+
+useCssModule();
+
+const scope = ['clientPreferencesProfiles'];
+
+const connection = $i && stream.useChannel('main');
+
+type Registry = {
+	name: string;
+	createdAt: string;
+	updatedAt: string | null;
+	defaultStore: Partial<typeof defaultStore.state>;
+	coldDeviceStorage: Partial<typeof ColdDeviceStorage.default>;
+	fontSize: string | null;
+	useSystemFont: 't' | null;
+};
+
+type Registries = {
+	[key: string]: Registry;
+};
+
+let registries = $ref<Registries | null>(null);
+
+os.api('i/registry/get-all', { scope })
+	.then(res => {
+		registries = res || {};
+		console.log(registries);
+	});
+
+function getDefaultStoreValues() {
+	return (Object.keys(defaultStore.state) as (keyof typeof defaultStore.state)[]).reduce((acc, key) => {
+		if (defaultStore.def[key].where !== 'account') acc[key] = defaultStore.state[key];
+		return acc;
+	}, {} as any);
+}
+
+async function saveNew() {
+	if (!registries) return;
+
+	const { canceled, result: name } = await os.inputText({
+		title: ts._preferencesRegistry.inputName,
+		text: ts._preferencesRegistry.saveNewDescription,
+	});
+
+	if (canceled) return;
+	if (Object.entries(registries).some(e => e[1].name === name)) {
+		return os.alert({
+			title: ts._preferencesRegistry.cannotSave,
+			text: t('_preferencesRegistry.nameAlreadyExists', { name }),
+		});
+	}
+
+	const id = uuid();
+	const registry: Registry = {
+		name,
+		createdAt: (new Date()).toISOString(),
+		updatedAt: null,
+		defaultStore: getDefaultStoreValues(),
+		coldDeviceStorage: ColdDeviceStorage.getAll(),
+		fontSize: localStorage.getItem('fontSize'),
+		useSystemFont: localStorage.getItem('useSystemFont') as 't' | null,
+	};
+	await os.api('i/registry/set', { scope, key: id, value: registry });
+	registries[id] = registry;
+}
+
+async function applyRegistry(id: string) {
+	if (!registries) return;
+
+	const registry = registries[id];
+
+	const { canceled: cancel1 } = await os.confirm({
+		type: 'warning',
+		title: ts._preferencesRegistry.apply,
+		text: t('_preferencesRegistry.applyConfirm', { name: registry.name }),
+	});
+	if (cancel1) return;
+
+	// defaultStore
+	for (const [key, value] of Object.entries(registry.defaultStore)) {
+		if (key in defaultStore.def && defaultStore.def[key].where !== 'account') {
+			console.log(key);
+			defaultStore.set(key as keyof Registry['defaultStore'], value);
+		}
+	}
+
+	// coldDeviceStorage
+	for (const [key, value] of Object.entries(registry.coldDeviceStorage)) {
+		ColdDeviceStorage.set(key as keyof Registry['coldDeviceStorage'], value);
+	}
+
+	// fontSize
+	if (registry.fontSize) {
+		localStorage.setItem('fontSize', registry.fontSize);
+	} else {
+		localStorage.removeItem('fontSize');
+	}
+
+	// useSystemFont
+	if (registry.useSystemFont) {
+		localStorage.setItem('useSystemFont', registry.useSystemFont);
+	} else {
+		localStorage.removeItem('useSystemFont');
+	}
+
+	const { canceled: cancel2 } = await os.confirm({
+		type: 'info',
+		text: ts.reloadToApplySetting,
+	});
+	if (cancel2) return;
+
+	unisonReload();
+}
+
+async function deleteRegistry(id: string) {
+	if (!registries) return;
+
+	const { canceled } = await os.confirm({
+		type: 'info',
+		title: ts._preferencesRegistry.delete,
+		text: t('_preferencesRegistry.deleteConfirm', { name: registries[id].name }),
+	});
+	if (canceled) return;
+
+	await os.api('i/registry/remove', { scope, key: id });
+	delete registries[id];
+}
+
+async function save(id: string) {
+	if (!registries) return;
+
+	const { name, createdAt } = registries[id];
+
+	const { canceled } = await os.confirm({
+		type: 'info',
+		title: ts._preferencesRegistry.save,
+		text: t('_preferencesRegistry.saveConfirm', { name }),
+	});
+	if (canceled) return;
+
+	const registry: Registry = {
+		name,
+		createdAt,
+		updatedAt: (new Date()).toISOString(),
+		defaultStore: getDefaultStoreValues(),
+		coldDeviceStorage: ColdDeviceStorage.getAll(),
+	};
+	await os.api('i/registry/set', { scope, key: id, value: registry });
+	registries[id] = registry;
+}
+
+async function rename(id: string) {
+	if (!registries) return;
+
+	const { canceled: cancel1, result: name } = await os.inputText({
+		title: ts._preferencesRegistry.inputName,
+	});
+	if (cancel1 || registries[id].name === name) return;
+
+	if (Object.entries(registries).some(e => e[1].name === name)) {
+		return os.alert({
+			title: ts._preferencesRegistry.cannotSave,
+			text: t('_preferencesRegistry.nameAlreadyExists', { name }),
+		});
+	}
+
+	const registry = Object.assign({}, { ...registries[id] });
+
+	const { canceled: cancel2 } = await os.confirm({
+		type: 'info',
+		title: ts._preferencesRegistry.rename,
+		text: t('_preferencesRegistry.renameConfirm', { old: registry.name, new: name }),
+	});
+	if (cancel2) return;
+
+	registry.name = name;
+	await os.api('i/registry/set', { scope, key: id, value: registry });
+}
+
+function menu(ev: MouseEvent, registryId: string) {
+	return os.popupMenu([{
+		text: ts._preferencesRegistry.apply,
+		icon: 'fas fa-circle-down',
+		action: () => applyRegistry(registryId),
+	}, {
+		text: ts._preferencesRegistry.rename,
+		icon: 'fas fa-i-cursor',
+		action: () => rename(registryId),
+	}, {
+		text: ts._preferencesRegistry.save,
+		icon: 'fas fa-floppy-disk',
+		action: () => save(registryId),
+	}, {
+		text: ts._preferencesRegistry.delete,
+		icon: 'fas fa-trash-can',
+		action: () => deleteRegistry(registryId),
+	}], ev.currentTarget ?? ev.target)
+}
+
+onMounted(() => {
+	// streamingのuser storage updateイベントを監視して更新
+	connection?.on('registryUpdated', ({ scope: recievedScope, key, value }) => {
+		if (!recievedScope || recievedScope.length !== scope.length || recievedScope[0] !== scope[0]) return;
+		if (!registries) return;
+
+		registries[key] = value;
+	});
+});
+
+onUnmounted(() => {
+	connection?.off('registryUpdated');
+});
+
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: ts.preferencesRegistry,
+		icon: 'fas fa-floppy-disk',
+		bg: 'var(--bg)',
+	}
+})
+</script>
+
+<style lang="scss" module>
+.registry {
+	padding: 20px;
+	cursor: pointer;
+
+	&Name {
+		font-weight: 700;
+	}
+
+	&Time {
+		font-size: .85em;
+		opacity: .7;
+	}
+}
+</style>
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index b9800ec607..296eaa2068 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -286,6 +286,16 @@ export class ColdDeviceStorage {
 		}
 	}
 
+	public static getAll(): Partial<typeof this.default> {
+		return (Object.keys(this.default) as (keyof typeof this.default)[]).reduce((acc, key) => {
+			const value = localStorage.getItem(PREFIX + key);
+			if (value != null) {
+				acc[key] = JSON.parse(value);
+			}
+			return acc;
+		}, {} as any);
+	}
+
 	public static set<T extends keyof typeof ColdDeviceStorage.default>(key: T, value: typeof ColdDeviceStorage.default[T]): void {
 		localStorage.setItem(PREFIX + key, JSON.stringify(value));
 
-- 
cgit v1.2.3-freya


From 0f9bc926f58446d0f778c26e47ac91165dfa37a1 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 17 Apr 2022 05:25:15 +0900
Subject: インデックスに戻ってもタイトルが残ってしまうのを修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/pages/settings/index.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 1838cb73e3..e6670ea930 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -272,8 +272,11 @@ onUnmounted(() => {
 const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
 
 const pageChanged = (page) => {
-	if (page == null) return;
-	childInfo.value = page[symbols.PAGE_INFO];
+	if (page == null) {
+		childInfo.value = null;
+	} else {
+		childInfo.value = page[symbols.PAGE_INFO];
+	}
 };
 
 defineExpose({
-- 
cgit v1.2.3-freya


From 3f14887d2065b5cdfaaee63206aa0530d0029430 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 17 Apr 2022 05:29:02 +0900
Subject: fix createdAt -> updatedAt

---
 packages/client/src/pages/settings/preferences-registry.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/settings/preferences-registry.vue b/packages/client/src/pages/settings/preferences-registry.vue
index d668150045..fbf38520b2 100644
--- a/packages/client/src/pages/settings/preferences-registry.vue
+++ b/packages/client/src/pages/settings/preferences-registry.vue
@@ -15,7 +15,7 @@
 		>
 			<div :class="$style.registryName">{{ registry.name }}</div>
 			<div :class="$style.registryTime">{{ t('_preferencesRegistry.createdAt', { date: (new Date(registry.createdAt)).toLocaleDateString(), time: (new Date(registry.createdAt)).toLocaleTimeString() }) }}</div>
-			<div :class="$style.registryTime" v-if="registry.updatedAt">{{ t('_preferencesRegistry.updatedAt', { date: (new Date(registry.createdAt)).toLocaleDateString(), time: (new Date(registry.createdAt)).toLocaleTimeString() }) }}</div>
+			<div :class="$style.registryTime" v-if="registry.updatedAt">{{ t('_preferencesRegistry.updatedAt', { date: (new Date(registry.updatedAt)).toLocaleDateString(), time: (new Date(registry.updatedAt)).toLocaleTimeString() }) }}</div>
 		</div>
 		<div v-else-if="registries">
 			<MkInfo>{{ ts._preferencesRegistry.noRegistries }}</MkInfo>
-- 
cgit v1.2.3-freya


From 0da0980f94692249f32031b866f2e6b999aafc14 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 17 Apr 2022 05:32:44 +0900
Subject: remove console.log

---
 packages/client/src/pages/settings/preferences-registry.vue | 2 --
 1 file changed, 2 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/settings/preferences-registry.vue b/packages/client/src/pages/settings/preferences-registry.vue
index fbf38520b2..26ddd1fd1f 100644
--- a/packages/client/src/pages/settings/preferences-registry.vue
+++ b/packages/client/src/pages/settings/preferences-registry.vue
@@ -65,7 +65,6 @@ let registries = $ref<Registries | null>(null);
 os.api('i/registry/get-all', { scope })
 	.then(res => {
 		registries = res || {};
-		console.log(registries);
 	});
 
 function getDefaultStoreValues() {
@@ -120,7 +119,6 @@ async function applyRegistry(id: string) {
 	// defaultStore
 	for (const [key, value] of Object.entries(registry.defaultStore)) {
 		if (key in defaultStore.def && defaultStore.def[key].where !== 'account') {
-			console.log(key);
 			defaultStore.set(key as keyof Registry['defaultStore'], value);
 		}
 	}
-- 
cgit v1.2.3-freya


From 3d4c09510b875ac995661c3371fd110314a578b2 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 17 Apr 2022 06:31:35 +0900
Subject: add wallpaper

---
 packages/client/src/pages/settings/preferences-registry.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/settings/preferences-registry.vue b/packages/client/src/pages/settings/preferences-registry.vue
index 26ddd1fd1f..8b5b1c00a5 100644
--- a/packages/client/src/pages/settings/preferences-registry.vue
+++ b/packages/client/src/pages/settings/preferences-registry.vue
@@ -54,6 +54,7 @@ type Registry = {
 	coldDeviceStorage: Partial<typeof ColdDeviceStorage.default>;
 	fontSize: string | null;
 	useSystemFont: 't' | null;
+	wallpaper: string | null;
 };
 
 type Registries = {
@@ -99,6 +100,7 @@ async function saveNew() {
 		coldDeviceStorage: ColdDeviceStorage.getAll(),
 		fontSize: localStorage.getItem('fontSize'),
 		useSystemFont: localStorage.getItem('useSystemFont') as 't' | null,
+		wallpaper: localStorage.getItem('wallpaper'),
 	};
 	await os.api('i/registry/set', { scope, key: id, value: registry });
 	registries[id] = registry;
@@ -142,6 +144,13 @@ async function applyRegistry(id: string) {
 		localStorage.removeItem('useSystemFont');
 	}
 
+	// wallpaper
+	if (registry.wallpaper != null) {
+		localStorage.setItem('wallpaper', registry.wallpaper);
+	} else {
+		localStorage.removeItem('wallpaper');
+	}
+
 	const { canceled: cancel2 } = await os.confirm({
 		type: 'info',
 		text: ts.reloadToApplySetting,
@@ -183,6 +192,9 @@ async function save(id: string) {
 		updatedAt: (new Date()).toISOString(),
 		defaultStore: getDefaultStoreValues(),
 		coldDeviceStorage: ColdDeviceStorage.getAll(),
+		fontSize: localStorage.getItem('fontSize'),
+		useSystemFont: localStorage.getItem('useSystemFont') as 't' | null,
+		wallpaper: localStorage.getItem('wallpaper'),
 	};
 	await os.api('i/registry/set', { scope, key: id, value: registry });
 	registries[id] = registry;
-- 
cgit v1.2.3-freya


From 426885bff5dac12298224985bfd833bec79a8b0f Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 17 Apr 2022 21:10:50 +0900
Subject: ローカルのjsonファイルを保存・読み込みできるように
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                  |  4 +
 .../src/pages/settings/preferences-registry.vue    | 98 +++++++++++++++++++++-
 2 files changed, 99 insertions(+), 3 deletions(-)

(limited to 'packages/client/src')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 18d8b3d9e3..a52c67d34b 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -899,10 +899,12 @@ _plugin:
 _preferencesRegistry:
   list: "一覧"
   saveNew: "新規保存"
+  loadFile: "ファイルを読み込み"
   apply: "このデバイスに適用"
   delete: "削除"
   save: "上書き保存"
   rename: "名称変更"
+  download: "ダウンロード"
   saveNewDescription: "現在のデバイスの状態をサーバーに保存します。"
   inputName: "レジストリ名を入力"
   cannotSave: "保存できません"
@@ -914,6 +916,8 @@ _preferencesRegistry:
   noRegistries: "レジストリは登録されていません。「新規保存」で現在のクライアント設定をサーバーに保存できます。"
   createdAt: "作成日時: {date} {time}"
   updatedAt: "更新日時: {date} {time}"
+  cannotLoad: "読み込みできません"
+  invalidFile: "ファイル形式が違います。"
 
 _registry:
   scope: "スコープ"
diff --git a/packages/client/src/pages/settings/preferences-registry.vue b/packages/client/src/pages/settings/preferences-registry.vue
index 8b5b1c00a5..c01e4ee83d 100644
--- a/packages/client/src/pages/settings/preferences-registry.vue
+++ b/packages/client/src/pages/settings/preferences-registry.vue
@@ -1,6 +1,9 @@
 <template>
 <div class="_formRoot">
-	<MkButton class="primary" @click="saveNew">{{ ts._preferencesRegistry.saveNew }}</MkButton>
+	<div :class="$style.buttons">
+		<MkButton inline class="primary" @click="saveNew">{{ ts._preferencesRegistry.saveNew }}</MkButton>
+		<MkButton inline class="" @click="loadFile">{{ ts._preferencesRegistry.loadFile }}</MkButton>
+	</div>
 
 	<FormSection>
 		<template #label>{{ ts._preferencesRegistry.list }}</template>
@@ -38,6 +41,7 @@ import { unisonReload } from '@/scripts/unison-reload';
 import { stream } from '@/stream';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
+import { version } from '@/config';
 const { t, ts } = i18n;
 
 useCssModule();
@@ -46,10 +50,12 @@ const scope = ['clientPreferencesProfiles'];
 
 const connection = $i && stream.useChannel('main');
 
+const registryProps = ['name', 'createdAt', 'updatedAt', 'version', 'defaultStore', 'coldDeviceStorage', 'fontSize', 'useSystemFont', 'wallpaper'];
 type Registry = {
 	name: string;
 	createdAt: string;
 	updatedAt: string | null;
+	version: string;
 	defaultStore: Partial<typeof defaultStore.state>;
 	coldDeviceStorage: Partial<typeof ColdDeviceStorage.default>;
 	fontSize: string | null;
@@ -75,6 +81,34 @@ function getDefaultStoreValues() {
 	}, {} as any);
 }
 
+function isObject(value: any) {
+	return value && typeof value === 'object' && !Array.isArray(value);
+}
+
+function validate(registry: any): void {
+	if (!registries) return;
+
+	// Check if unnecessary properties exist
+	if (Object.keys(registry).some(key => !registryProps.includes(key))) throw Error('Unnecessary properties exist');
+
+	if (!registry.name) throw Error('Name is falsy');
+	if (!registry.version) throw Error('Version is falsy');
+	
+	// Check if createdAt and updatedAt is Date
+	// https://zenn.dev/lollipop_onl/articles/eoz-judge-js-invalid-date
+	if (!registry.createdAt || Number.isNaN(new Date(registry.createdAt).getTime())) throw Error('createdAt is falsy or not Date');
+	if (registry.updatedAt) {
+		if (Number.isNaN(new Date(registry.updatedAt).getTime())) {
+			throw Error('updatedAt is not Date');
+		}
+	} else if (registry.updatedAt !== null) {
+		throw Error('updatedAt is not null');
+	}
+
+	if (!registry.defaultStore || !isObject(registry.defaultStore)) throw Error('defaultStore is falsy or not an object');
+	if (!registry.coldDeviceStorage || !isObject(registry.coldDeviceStorage)) throw Error('coldDeviceStorage is falsy or not an object');
+}
+
 async function saveNew() {
 	if (!registries) return;
 
@@ -96,6 +130,7 @@ async function saveNew() {
 		name,
 		createdAt: (new Date()).toISOString(),
 		updatedAt: null,
+		version,
 		defaultStore: getDefaultStoreValues(),
 		coldDeviceStorage: ColdDeviceStorage.getAll(),
 		fontSize: localStorage.getItem('fontSize'),
@@ -103,7 +138,50 @@ async function saveNew() {
 		wallpaper: localStorage.getItem('wallpaper'),
 	};
 	await os.api('i/registry/set', { scope, key: id, value: registry });
-	registries[id] = registry;
+}
+
+function loadFile() {
+	const input = document.createElement('input');
+	input.type = 'file';
+	input.multiple = false;
+	input.onchange = async () => {
+		if (!registries) return;
+		if (!input.files || input.files.length === 0) return;
+
+		const file = input.files[0];
+
+		if (file.type !== 'application/json') {
+			return os.alert({
+				type: 'error',
+				title: ts._preferencesRegistry.cannotLoad,
+				text: ts._preferencesRegistry.invalidFile,
+			});
+		}
+
+		let registry: Registry;
+		try {
+			registry = JSON.parse(await file.text()) as unknown as Registry;
+			validate(registry);
+		} catch (e) {
+			return os.alert({
+				type: 'error',
+				title: ts._preferencesRegistry.cannotLoad,
+				text: e?.message,
+			});
+		}
+
+		const id = uuid();
+		await os.api('i/registry/set', { scope, key: id, value: registry });
+
+		// 一応廃棄
+		(window as any).__misskey_input_ref__ = null;
+	};
+
+	// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
+	// iOS Safari で正常に動かす為のおまじない
+	(window as any).__misskey_input_ref__ = input;
+
+	input.click();
 }
 
 async function applyRegistry(id: string) {
@@ -190,6 +268,7 @@ async function save(id: string) {
 		name,
 		createdAt,
 		updatedAt: (new Date()).toISOString(),
+		version,
 		defaultStore: getDefaultStoreValues(),
 		coldDeviceStorage: ColdDeviceStorage.getAll(),
 		fontSize: localStorage.getItem('fontSize'),
@@ -197,7 +276,6 @@ async function save(id: string) {
 		wallpaper: localStorage.getItem('wallpaper'),
 	};
 	await os.api('i/registry/set', { scope, key: id, value: registry });
-	registries[id] = registry;
 }
 
 async function rename(id: string) {
@@ -229,10 +307,18 @@ async function rename(id: string) {
 }
 
 function menu(ev: MouseEvent, registryId: string) {
+	if (!registries) return;
+
 	return os.popupMenu([{
 		text: ts._preferencesRegistry.apply,
 		icon: 'fas fa-circle-down',
 		action: () => applyRegistry(registryId),
+	}, {
+		type: 'a',
+		text: ts._preferencesRegistry.download,
+		icon: 'fas fa-download',
+		href: URL.createObjectURL(new Blob([JSON.stringify(registries[registryId], null, 2)], { type: 'application/json' })),
+		download: `${registries[registryId].name}.json`,
 	}, {
 		text: ts._preferencesRegistry.rename,
 		icon: 'fas fa-i-cursor',
@@ -272,6 +358,12 @@ defineExpose({
 </script>
 
 <style lang="scss" module>
+.buttons {
+	display: flex;
+	gap: var(--margin);
+	flex-wrap: wrap;
+}
+
 .registry {
 	padding: 20px;
 	cursor: pointer;
-- 
cgit v1.2.3-freya


From f9bae60357ec4c67d3cf96b5d53c6eee852569cb Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 27 Apr 2022 23:06:40 +0900
Subject: remove deepcopy and broadcast-channel (=< Safari 15.4)

---
 packages/client/package.json                 |   2 -
 packages/client/src/pizzax.ts                |   5 +-
 packages/client/src/scripts/unison-reload.ts |   5 +-
 packages/client/yarn.lock                    | 104 +--------------------------
 4 files changed, 4 insertions(+), 112 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/package.json b/packages/client/package.json
index 71c733d21a..bd11858f7e 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -20,7 +20,6 @@
 		"autosize": "5.0.1",
 		"autwh": "0.1.0",
 		"blurhash": "1.1.5",
-		"broadcast-channel": "4.11.0",
 		"chart.js": "3.7.1",
 		"chartjs-adapter-date-fns": "2.0.0",
 		"chartjs-plugin-gradient": "0.2.2",
@@ -30,7 +29,6 @@
 		"css-loader": "6.7.1",
 		"cssnano": "5.1.7",
 		"date-fns": "2.28.0",
-		"deepcopy": "2.1.0",
 		"escape-regexp": "0.0.1",
 		"eslint": "8.14.0",
 		"eslint-plugin-vue": "8.7.1",
diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 11bf4f9c48..e71f139246 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -4,9 +4,6 @@ import { api } from './os';
 import { get, set } from './scripts/idb-proxy';
 import { defaultStore } from './store';
 import { stream } from './stream';
-import * as deepcopy from 'deepcopy';
-// SafariがBroadcastChannel未実装なのでライブラリを使う
-import { BroadcastChannel } from 'broadcast-channel';
 
 type StateDef = Record<string, {
 	where: 'account' | 'device' | 'deviceAccount';
@@ -155,7 +152,7 @@ export class Storage<T extends StateDef> {
 	public set<K extends keyof T>(key: K, value: T[K]['default']): Promise<void> {
 		// IndexedDBやBroadcastChannelで扱うために単純なオブジェクトにする
 		// (JSON.parse(JSON.stringify(value))の代わり)
-		const rawValue = deepcopy(value);
+		const rawValue = structuredClone(value);
 
 		if (_DEV_) console.log('set', key, rawValue, value);
 
diff --git a/packages/client/src/scripts/unison-reload.ts b/packages/client/src/scripts/unison-reload.ts
index 59af584c1b..0cd7eff38d 100644
--- a/packages/client/src/scripts/unison-reload.ts
+++ b/packages/client/src/scripts/unison-reload.ts
@@ -1,7 +1,4 @@
-// SafariがBroadcastChannel未実装なのでライブラリを使う
-import { BroadcastChannel } from 'broadcast-channel';
-
-export const reloadChannel = new BroadcastChannel<string | null>('reload');
+export const reloadChannel = new BroadcastChannel('reload'); // string | null
 
 // BroadcastChannelを用いて、クライアントが一斉にreloadするようにします。
 export function unisonReload(path?: string) {
diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock
index b16a359333..1fc385e332 100644
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock
@@ -33,20 +33,6 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.9.tgz#ca34cb95e1c2dd126863a84465ae8ef66114be99"
   integrity sha512-nEUfRiARCcaVo3ny3ZQjURjHQZUo/JkEw7rLlSZy/psWGnvwXFtPcr6jb7Yb41DVW5LTe6KRq9LGleRNsg1Frw==
 
-"@babel/runtime@^7.16.0":
-  version "7.16.3"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
-  integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/runtime@^7.6.2":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.13.tgz#0a21452352b02542db0ffb928ac2d3ca7cb6d66d"
-  integrity sha512-8+3UMPBrjFa/6TtKi/7sehPKqfAm4g6K+YQjyyFOLUTxzOngcRZTlAVY8sc2CORJYqdHQY8gRPHmn+qo15rCBw==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/types@^7.6.1", "@babel/types@^7.9.6":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.0.tgz#74424d2816f0171b4100f0ab34e9a374efdf7f80"
@@ -1286,19 +1272,6 @@ braces@^3.0.1, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-broadcast-channel@4.11.0:
-  version "4.11.0"
-  resolved "https://registry.yarnpkg.com/broadcast-channel/-/broadcast-channel-4.11.0.tgz#b9ebc7ce1326120088e61d2197477496908a1a9e"
-  integrity sha512-4FS1Zk+ttekfXHq5I2R7KhN9AsnZUFVV5SczrTtnZPuf5w+jw+fqM1PJHuHzwEXJezJeCbJxoZMDcFqsIN2c1Q==
-  dependencies:
-    "@babel/runtime" "^7.16.0"
-    detect-node "^2.1.0"
-    microtime "3.0.0"
-    oblivious-set "1.0.0"
-    p-queue "6.6.2"
-    rimraf "3.0.2"
-    unload "2.3.1"
-
 browser-stdout@1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
@@ -1957,13 +1930,6 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
-deepcopy@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/deepcopy/-/deepcopy-2.1.0.tgz#2deb0dd52d079c2ecb7924b640a7c3abd4db1d6d"
-  integrity sha512-8cZeTb1ZKC3bdSCP6XOM1IsTczIO73fdqtwa2B0N15eAz7gmyhQo+mc5gnFuulsgN3vIQYmTgbmQVKalH1dKvQ==
-  dependencies:
-    type-detect "^4.0.8"
-
 define-properties@^1.1.2, define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -1981,11 +1947,6 @@ detect-file@^1.0.0:
   resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
   integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
 
-detect-node@2.1.0, detect-node@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
-  integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
-
 diff@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
@@ -2500,7 +2461,7 @@ eventemitter2@^6.4.3:
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.4.tgz#aa96e8275c4dbeb017a5d0e03780c65612a1202b"
   integrity sha512-HLU3NDY6wARrLCEwyGKRBvuWYyvW6mHYv72SJJAH3iJN3a6eVUvkjFkcxah1bcTgGVBBrFdIopBJPhCQFMLyXw==
 
-eventemitter3@4.0.7, eventemitter3@^4.0.4, eventemitter3@^4.0.7:
+eventemitter3@4.0.7, eventemitter3@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@@ -3791,14 +3752,6 @@ micromatch@^4.0.0, micromatch@^4.0.2:
     braces "^3.0.1"
     picomatch "^2.0.5"
 
-microtime@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/microtime/-/microtime-3.0.0.tgz#d140914bde88aa89b4f9fd2a18620b435af0f39b"
-  integrity sha512-SirJr7ZL4ow2iWcb54bekS4aWyBQNVcEDBiwAz9D/sTgY59A+uE8UJU15cp5wyZmPBwg/3zf8lyCJ5NUe1nVlQ==
-  dependencies:
-    node-addon-api "^1.2.0"
-    node-gyp-build "^3.8.0"
-
 mime-db@1.44.0:
   version "1.44.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
@@ -3938,16 +3891,6 @@ next-tick@~1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
-node-addon-api@^1.2.0:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-1.7.2.tgz#3df30b95720b53c24e59948b49532b662444f54d"
-  integrity sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg==
-
-node-gyp-build@^3.8.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-3.9.0.tgz#53a350187dd4d5276750da21605d1cb681d09e25"
-  integrity sha512-zLcTg6P4AbcHPq465ZMFNXx7XpKKJh+7kkN699NiQWisR2uWYOWNWqRHAmbnmKiL4e9aLSlmy5U7rEMUXV59+A==
-
 node-gyp-build@~3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-3.7.0.tgz#daa77a4f547b9aed3e2aac779eaf151afd60ec8d"
@@ -4068,11 +4011,6 @@ object.values@^1.1.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
-oblivious-set@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566"
-  integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==
-
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -4104,11 +4042,6 @@ ospath@^1.2.2:
   resolved "https://registry.yarnpkg.com/ospath/-/ospath-1.2.2.tgz#1276639774a3f8ef2572f7fe4280e0ea4550c07b"
   integrity sha1-EnZjl3Sj+O8lcvf+QoDg6kVQwHs=
 
-p-finally@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
-  integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
-
 p-limit@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
@@ -4165,21 +4098,6 @@ p-map@^4.0.0:
   dependencies:
     aggregate-error "^3.0.0"
 
-p-queue@6.6.2:
-  version "6.6.2"
-  resolved "https://registry.yarnpkg.com/p-queue/-/p-queue-6.6.2.tgz#2068a9dcf8e67dd0ec3e7a2bcb76810faa85e426"
-  integrity sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==
-  dependencies:
-    eventemitter3 "^4.0.4"
-    p-timeout "^3.2.0"
-
-p-timeout@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-3.2.0.tgz#c7e17abc971d2a7962ef83626b35d635acf23dfe"
-  integrity sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==
-  dependencies:
-    p-finally "^1.0.0"
-
 p-try@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
@@ -4838,11 +4756,6 @@ reflect-metadata@0.1.13:
   resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.13.tgz#67ae3ca57c972a2aa1642b10fe363fe32d49dc08"
   integrity sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==
 
-regenerator-runtime@^0.13.4:
-  version "0.13.7"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
-  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
-
 regexpp@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
@@ -4928,7 +4841,7 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2:
+rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
@@ -5589,11 +5502,6 @@ type-check@^0.4.0, type-check@~0.4.0:
   dependencies:
     prelude-ls "^1.2.1"
 
-type-detect@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
-  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
-
 type-fest@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
@@ -5651,14 +5559,6 @@ universalify@^2.0.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
-unload@2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/unload/-/unload-2.3.1.tgz#9d16862d372a5ce5cb630ad1309c2fd6e35dacfe"
-  integrity sha512-MUZEiDqvAN9AIDRbbBnVYVvfcR6DrjCqeU2YQMmliFZl9uaBUjTkhuDQkBiyAy8ad5bx1TXVbqZ3gg7namsWjA==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    detect-node "2.1.0"
-
 unquote@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
-- 
cgit v1.2.3-freya


From 36f9fb99ae2951858b623422f677c16d5a1ee698 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 28 Apr 2022 02:57:59 +0900
Subject: ressurect broadcast-channel

---
 packages/client/package.json                 |  1 +
 packages/client/src/pizzax.ts                |  1 +
 packages/client/src/scripts/unison-reload.ts |  4 +-
 packages/client/yarn.lock                    | 85 +++++++++++++++++++++++++++-
 4 files changed, 88 insertions(+), 3 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/package.json b/packages/client/package.json
index bd11858f7e..21093cdb7c 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -20,6 +20,7 @@
 		"autosize": "5.0.1",
 		"autwh": "0.1.0",
 		"blurhash": "1.1.5",
+		"broadcast-channel": "4.11.0",
 		"chart.js": "3.7.1",
 		"chartjs-adapter-date-fns": "2.0.0",
 		"chartjs-plugin-gradient": "0.2.2",
diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index e71f139246..5de866ef60 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -4,6 +4,7 @@ import { api } from './os';
 import { get, set } from './scripts/idb-proxy';
 import { defaultStore } from './store';
 import { stream } from './stream';
+import { BroadcastChannel } from 'broadcast-channel';
 
 type StateDef = Record<string, {
 	where: 'account' | 'device' | 'deviceAccount';
diff --git a/packages/client/src/scripts/unison-reload.ts b/packages/client/src/scripts/unison-reload.ts
index 0cd7eff38d..b5afe9b07d 100644
--- a/packages/client/src/scripts/unison-reload.ts
+++ b/packages/client/src/scripts/unison-reload.ts
@@ -1,4 +1,6 @@
-export const reloadChannel = new BroadcastChannel('reload'); // string | null
+import { BroadcastChannel } from 'broadcast-channel';
+
+export const reloadChannel = new BroadcastChannel<string | null>('reload');
 
 // BroadcastChannelを用いて、クライアントが一斉にreloadするようにします。
 export function unisonReload(path?: string) {
diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock
index 1fc385e332..0fc35ddecf 100644
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock
@@ -33,6 +33,13 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.9.tgz#ca34cb95e1c2dd126863a84465ae8ef66114be99"
   integrity sha512-nEUfRiARCcaVo3ny3ZQjURjHQZUo/JkEw7rLlSZy/psWGnvwXFtPcr6jb7Yb41DVW5LTe6KRq9LGleRNsg1Frw==
 
+"@babel/runtime@^7.16.0", "@babel/runtime@^7.6.2":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/types@^7.6.1", "@babel/types@^7.9.6":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.0.tgz#74424d2816f0171b4100f0ab34e9a374efdf7f80"
@@ -1272,6 +1279,19 @@ braces@^3.0.1, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+broadcast-channel@4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/broadcast-channel/-/broadcast-channel-4.11.0.tgz#b9ebc7ce1326120088e61d2197477496908a1a9e"
+  integrity sha512-4FS1Zk+ttekfXHq5I2R7KhN9AsnZUFVV5SczrTtnZPuf5w+jw+fqM1PJHuHzwEXJezJeCbJxoZMDcFqsIN2c1Q==
+  dependencies:
+    "@babel/runtime" "^7.16.0"
+    detect-node "^2.1.0"
+    microtime "3.0.0"
+    oblivious-set "1.0.0"
+    p-queue "6.6.2"
+    rimraf "3.0.2"
+    unload "2.3.1"
+
 browser-stdout@1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
@@ -1947,6 +1967,11 @@ detect-file@^1.0.0:
   resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
   integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc=
 
+detect-node@2.1.0, detect-node@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
+  integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
+
 diff@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
@@ -2461,7 +2486,7 @@ eventemitter2@^6.4.3:
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.4.tgz#aa96e8275c4dbeb017a5d0e03780c65612a1202b"
   integrity sha512-HLU3NDY6wARrLCEwyGKRBvuWYyvW6mHYv72SJJAH3iJN3a6eVUvkjFkcxah1bcTgGVBBrFdIopBJPhCQFMLyXw==
 
-eventemitter3@4.0.7, eventemitter3@^4.0.7:
+eventemitter3@4.0.7, eventemitter3@^4.0.4, eventemitter3@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@@ -3752,6 +3777,14 @@ micromatch@^4.0.0, micromatch@^4.0.2:
     braces "^3.0.1"
     picomatch "^2.0.5"
 
+microtime@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/microtime/-/microtime-3.0.0.tgz#d140914bde88aa89b4f9fd2a18620b435af0f39b"
+  integrity sha512-SirJr7ZL4ow2iWcb54bekS4aWyBQNVcEDBiwAz9D/sTgY59A+uE8UJU15cp5wyZmPBwg/3zf8lyCJ5NUe1nVlQ==
+  dependencies:
+    node-addon-api "^1.2.0"
+    node-gyp-build "^3.8.0"
+
 mime-db@1.44.0:
   version "1.44.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
@@ -3891,6 +3924,16 @@ next-tick@~1.0.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
   integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
 
+node-addon-api@^1.2.0:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-1.7.2.tgz#3df30b95720b53c24e59948b49532b662444f54d"
+  integrity sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg==
+
+node-gyp-build@^3.8.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-3.9.0.tgz#53a350187dd4d5276750da21605d1cb681d09e25"
+  integrity sha512-zLcTg6P4AbcHPq465ZMFNXx7XpKKJh+7kkN699NiQWisR2uWYOWNWqRHAmbnmKiL4e9aLSlmy5U7rEMUXV59+A==
+
 node-gyp-build@~3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-3.7.0.tgz#daa77a4f547b9aed3e2aac779eaf151afd60ec8d"
@@ -4011,6 +4054,11 @@ object.values@^1.1.5:
     define-properties "^1.1.3"
     es-abstract "^1.19.1"
 
+oblivious-set@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/oblivious-set/-/oblivious-set-1.0.0.tgz#c8316f2c2fb6ff7b11b6158db3234c49f733c566"
+  integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==
+
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -4042,6 +4090,11 @@ ospath@^1.2.2:
   resolved "https://registry.yarnpkg.com/ospath/-/ospath-1.2.2.tgz#1276639774a3f8ef2572f7fe4280e0ea4550c07b"
   integrity sha1-EnZjl3Sj+O8lcvf+QoDg6kVQwHs=
 
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+  integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
+
 p-limit@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
@@ -4098,6 +4151,21 @@ p-map@^4.0.0:
   dependencies:
     aggregate-error "^3.0.0"
 
+p-queue@6.6.2:
+  version "6.6.2"
+  resolved "https://registry.yarnpkg.com/p-queue/-/p-queue-6.6.2.tgz#2068a9dcf8e67dd0ec3e7a2bcb76810faa85e426"
+  integrity sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==
+  dependencies:
+    eventemitter3 "^4.0.4"
+    p-timeout "^3.2.0"
+
+p-timeout@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-3.2.0.tgz#c7e17abc971d2a7962ef83626b35d635acf23dfe"
+  integrity sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==
+  dependencies:
+    p-finally "^1.0.0"
+
 p-try@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
@@ -4756,6 +4824,11 @@ reflect-metadata@0.1.13:
   resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.13.tgz#67ae3ca57c972a2aa1642b10fe363fe32d49dc08"
   integrity sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==
 
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
 regexpp@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
@@ -4841,7 +4914,7 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rimraf@^3.0.0, rimraf@^3.0.2:
+rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
@@ -5559,6 +5632,14 @@ universalify@^2.0.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
   integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
 
+unload@2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/unload/-/unload-2.3.1.tgz#9d16862d372a5ce5cb630ad1309c2fd6e35dacfe"
+  integrity sha512-MUZEiDqvAN9AIDRbbBnVYVvfcR6DrjCqeU2YQMmliFZl9uaBUjTkhuDQkBiyAy8ad5bx1TXVbqZ3gg7namsWjA==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    detect-node "2.1.0"
+
 unquote@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
-- 
cgit v1.2.3-freya


From b3ccfa867172b4b4aa012e1d09b9f2474674c185 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 28 Apr 2022 03:14:41 +0000
Subject: resolve conflict of preferences-registry #8511

---
 packages/client/src/pages/settings/preferences-registry.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/settings/preferences-registry.vue b/packages/client/src/pages/settings/preferences-registry.vue
index c01e4ee83d..916bb30498 100644
--- a/packages/client/src/pages/settings/preferences-registry.vue
+++ b/packages/client/src/pages/settings/preferences-registry.vue
@@ -187,7 +187,7 @@ function loadFile() {
 async function applyRegistry(id: string) {
 	if (!registries) return;
 
-	const registry = registries[id];
+	const registry = structuredClone(registries[id]);
 
 	const { canceled: cancel1 } = await os.confirm({
 		type: 'warning',
-- 
cgit v1.2.3-freya


From 747acd025d69c44d7e7d3db117ad4ba084f3f000 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 28 Apr 2022 03:47:26 +0000
Subject: use toRaw?

---
 packages/client/src/pages/settings/preferences-registry.vue | 2 +-
 packages/client/src/pizzax.ts                               | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/settings/preferences-registry.vue b/packages/client/src/pages/settings/preferences-registry.vue
index 916bb30498..c01e4ee83d 100644
--- a/packages/client/src/pages/settings/preferences-registry.vue
+++ b/packages/client/src/pages/settings/preferences-registry.vue
@@ -187,7 +187,7 @@ function loadFile() {
 async function applyRegistry(id: string) {
 	if (!registries) return;
 
-	const registry = structuredClone(registries[id]);
+	const registry = registries[id];
 
 	const { canceled: cancel1 } = await os.confirm({
 		type: 'warning',
diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 5de866ef60..338898005a 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -1,4 +1,4 @@
-import { onUnmounted, Ref, ref, watch } from 'vue';
+import { onUnmounted, Ref, ref, toRaw, watch } from 'vue';
 import { $i } from './account';
 import { api } from './os';
 import { get, set } from './scripts/idb-proxy';
@@ -153,7 +153,7 @@ export class Storage<T extends StateDef> {
 	public set<K extends keyof T>(key: K, value: T[K]['default']): Promise<void> {
 		// IndexedDBやBroadcastChannelで扱うために単純なオブジェクトにする
 		// (JSON.parse(JSON.stringify(value))の代わり)
-		const rawValue = structuredClone(value);
+		const rawValue = structuredClone(toRaw(value));
 
 		if (_DEV_) console.log('set', key, rawValue, value);
 
-- 
cgit v1.2.3-freya


From 27b48ef96dc0f2c84e8e2c447db16f2c3511561a Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 1 May 2022 05:15:01 +0000
Subject: ressurect deepcopy

---
 packages/client/package.json  |  1 +
 packages/client/src/pizzax.ts |  5 +++--
 packages/client/yarn.lock     | 12 ++++++++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/package.json b/packages/client/package.json
index e533e1fb87..0a9473a54a 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -31,6 +31,7 @@
 		"css-loader": "6.7.1",
 		"cssnano": "5.1.7",
 		"date-fns": "2.28.0",
+		"deepcopy": "2.1.0",
 		"escape-regexp": "0.0.1",
 		"eslint": "8.14.0",
 		"eslint-plugin-vue": "8.7.1",
diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index 338898005a..389554247e 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -1,10 +1,11 @@
-import { onUnmounted, Ref, ref, toRaw, watch } from 'vue';
+import { onUnmounted, Ref, ref, watch } from 'vue';
 import { $i } from './account';
 import { api } from './os';
 import { get, set } from './scripts/idb-proxy';
 import { defaultStore } from './store';
 import { stream } from './stream';
 import { BroadcastChannel } from 'broadcast-channel';
+import deepcopy from 'deepcopy';
 
 type StateDef = Record<string, {
 	where: 'account' | 'device' | 'deviceAccount';
@@ -153,7 +154,7 @@ export class Storage<T extends StateDef> {
 	public set<K extends keyof T>(key: K, value: T[K]['default']): Promise<void> {
 		// IndexedDBやBroadcastChannelで扱うために単純なオブジェクトにする
 		// (JSON.parse(JSON.stringify(value))の代わり)
-		const rawValue = structuredClone(toRaw(value));
+		const rawValue = deepcopy(value);
 
 		if (_DEV_) console.log('set', key, rawValue, value);
 
diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock
index 05e1755440..9b10508a5b 100644
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock
@@ -1954,6 +1954,13 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepcopy@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/deepcopy/-/deepcopy-2.1.0.tgz#2deb0dd52d079c2ecb7924b640a7c3abd4db1d6d"
+  integrity sha512-8cZeTb1ZKC3bdSCP6XOM1IsTczIO73fdqtwa2B0N15eAz7gmyhQo+mc5gnFuulsgN3vIQYmTgbmQVKalH1dKvQ==
+  dependencies:
+    type-detect "^4.0.8"
+
 define-properties@^1.1.2, define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -5579,6 +5586,11 @@ type-check@^0.4.0, type-check@~0.4.0:
   dependencies:
     prelude-ls "^1.2.1"
 
+type-detect@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
+  integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
+
 type-fest@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
-- 
cgit v1.2.3-freya


From b75184ec8e3436200bacdcd832e3324702553d20 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 18 Sep 2022 03:27:08 +0900
Subject: なんかもうめっちゃ変えた
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/test.yml                         |    8 +-
 CONTRIBUTING.md                                    |    2 +-
 package.json                                       |    6 +-
 packages/backend/.mocharc.json                     |   10 -
 packages/backend/jest-resolver.cjs                 |   14 +
 packages/backend/jest.config.cjs                   |  214 ++
 packages/backend/ormconfig.js                      |    6 +-
 packages/backend/package.json                      |   17 +-
 packages/backend/src/AppModule.ts                  |   15 +
 packages/backend/src/GlobalModule.ts               |   63 +
 packages/backend/src/RepositoryModule.ts           |  519 +++++
 packages/backend/src/boot/index.ts                 |    2 +-
 packages/backend/src/boot/master.ts                |   37 +-
 packages/backend/src/boot/worker.ts                |   20 +-
 packages/backend/src/config.ts                     |  149 ++
 packages/backend/src/config/index.ts               |    3 -
 packages/backend/src/config/load.ts                |   62 -
 packages/backend/src/config/types.ts               |   87 -
 packages/backend/src/core/AccountUpdateService.ts  |   38 +
 packages/backend/src/core/AiService.ts             |   60 +
 packages/backend/src/core/AntennaService.ts        |  228 +++
 packages/backend/src/core/AppLockService.ts        |   40 +
 packages/backend/src/core/CaptchaService.ts        |   70 +
 packages/backend/src/core/CoreModule.ts            |  696 +++++++
 .../backend/src/core/CreateNotificationService.ts  |  114 ++
 .../backend/src/core/CreateSystemUserService.ts    |   80 +
 packages/backend/src/core/CustomEmojiService.ts    |  175 ++
 packages/backend/src/core/DeleteAccountService.ts  |   38 +
 packages/backend/src/core/DownloadService.ts       |  123 ++
 packages/backend/src/core/DriveService.ts          |  740 +++++++
 packages/backend/src/core/EmailService.ts          |  175 ++
 .../backend/src/core/FederatedInstanceService.ts   |   46 +
 .../src/core/FetchInstanceMetadataService.ts       |  283 +++
 packages/backend/src/core/FileInfoService.ts       |  382 ++++
 packages/backend/src/core/GlobalEventService.ts    |  109 +
 packages/backend/src/core/HashtagService.ts        |  147 ++
 packages/backend/src/core/HttpRequestService.ts    |  154 ++
 packages/backend/src/core/IdService.ts             |   33 +
 .../backend/src/core/ImageProcessingService.ts     |   99 +
 packages/backend/src/core/InstanceActorService.ts  |   42 +
 .../backend/src/core/InternalStorageService.ts     |   45 +
 packages/backend/src/core/MessagingService.ts      |  300 +++
 packages/backend/src/core/MetaService.ts           |   63 +
 packages/backend/src/core/MfmService.ts            |  384 ++++
 packages/backend/src/core/ModerationLogService.ts  |   26 +
 packages/backend/src/core/NoteCreateService.ts     |  742 +++++++
 packages/backend/src/core/NoteDeleteService.ts     |  168 ++
 packages/backend/src/core/NotePiningService.ts     |  117 ++
 packages/backend/src/core/NoteReadService.ts       |  214 ++
 packages/backend/src/core/NotificationService.ts   |   67 +
 packages/backend/src/core/PollService.ts           |  115 ++
 packages/backend/src/core/ProxyAccountService.ts   |   22 +
 .../backend/src/core/PushNotificationService.ts    |  101 +
 packages/backend/src/core/QueryService.ts          |  262 +++
 packages/backend/src/core/QueueService.ts          |  242 +++
 packages/backend/src/core/ReactionService.ts       |  340 ++++
 packages/backend/src/core/RelayService.ts          |  119 ++
 packages/backend/src/core/S3Service.ts             |   38 +
 packages/backend/src/core/SignupService.ts         |  141 ++
 .../src/core/TwoFactorAuthenticationService.ts     |  439 ++++
 packages/backend/src/core/UserBlockingService.ts   |  199 ++
 packages/backend/src/core/UserCacheService.ts      |   74 +
 packages/backend/src/core/UserFollowingService.ts  |  574 ++++++
 .../backend/src/core/UserKeypairStoreService.ts    |   22 +
 packages/backend/src/core/UserListService.ts       |   48 +
 packages/backend/src/core/UserMutingService.ts     |   32 +
 packages/backend/src/core/UserSuspendService.ts    |   88 +
 packages/backend/src/core/UtilityService.ts        |   37 +
 .../backend/src/core/VideoProcessingService.ts     |   44 +
 packages/backend/src/core/WebhookService.ts        |   70 +
 .../src/core/chart/ChartManagementService.ts       |   59 +
 .../backend/src/core/chart/charts/active-users.ts  |   54 +
 .../backend/src/core/chart/charts/ap-request.ts    |   49 +
 packages/backend/src/core/chart/charts/drive.ts    |   47 +
 .../src/core/chart/charts/entities/active-users.ts |   17 +
 .../src/core/chart/charts/entities/ap-request.ts   |   11 +
 .../src/core/chart/charts/entities/drive.ts        |   16 +
 .../src/core/chart/charts/entities/federation.ts   |   16 +
 .../src/core/chart/charts/entities/hashtag.ts      |   10 +
 .../src/core/chart/charts/entities/instance.ts     |   32 +
 .../src/core/chart/charts/entities/notes.ts        |   22 +
 .../core/chart/charts/entities/per-user-drive.ts   |   14 +
 .../chart/charts/entities/per-user-following.ts    |   20 +
 .../core/chart/charts/entities/per-user-notes.ts   |   15 +
 .../chart/charts/entities/per-user-reactions.ts    |   10 +
 .../src/core/chart/charts/entities/test-grouped.ts |   11 +
 .../chart/charts/entities/test-intersection.ts     |   11 +
 .../src/core/chart/charts/entities/test-unique.ts  |    9 +
 .../backend/src/core/chart/charts/entities/test.ts |   11 +
 .../src/core/chart/charts/entities/users.ts        |   14 +
 .../backend/src/core/chart/charts/federation.ts    |  121 ++
 packages/backend/src/core/chart/charts/hashtag.ts  |   41 +
 packages/backend/src/core/chart/charts/instance.ts |  127 ++
 packages/backend/src/core/chart/charts/notes.ts    |   58 +
 .../src/core/chart/charts/per-user-drive.ts        |   58 +
 .../src/core/chart/charts/per-user-following.ts    |   71 +
 .../src/core/chart/charts/per-user-notes.ts        |   55 +
 .../src/core/chart/charts/per-user-reactions.ts    |   42 +
 .../backend/src/core/chart/charts/test-grouped.ts  |   46 +
 .../src/core/chart/charts/test-intersection.ts     |   43 +
 .../backend/src/core/chart/charts/test-unique.ts   |   37 +
 packages/backend/src/core/chart/charts/test.ts     |   53 +
 packages/backend/src/core/chart/charts/users.ts    |   56 +
 packages/backend/src/core/chart/core.ts            |  679 +++++++
 packages/backend/src/core/chart/entities.ts        |   39 +
 .../core/entities/AbuseUserReportEntityService.ts  |   49 +
 .../src/core/entities/AntennaEntityService.ts      |   47 +
 .../backend/src/core/entities/AppEntityService.ts  |   52 +
 .../src/core/entities/AuthSessionEntityService.ts  |   33 +
 .../src/core/entities/BlockingEntityService.ts     |   42 +
 .../src/core/entities/ChannelEntityService.ts      |   66 +
 .../backend/src/core/entities/ClipEntityService.ts |   43 +
 .../src/core/entities/DriveFileEntityService.ts    |  214 ++
 .../src/core/entities/DriveFolderEntityService.ts  |   57 +
 .../src/core/entities/EmojiEntityService.ts        |   43 +
 .../core/entities/FollowRequestEntityService.ts    |   34 +
 .../src/core/entities/FollowingEntityService.ts    |   98 +
 .../src/core/entities/GalleryLikeEntityService.ts  |   41 +
 .../src/core/entities/GalleryPostEntityService.ts  |   57 +
 .../src/core/entities/HashtagEntityService.ts      |   41 +
 .../src/core/entities/InstanceEntityService.ts     |   59 +
 .../core/entities/MessagingMessageEntityService.ts |   57 +
 .../core/entities/ModerationLogEntityService.ts    |   44 +
 .../src/core/entities/MutingEntityService.ts       |   45 +
 .../backend/src/core/entities/NoteEntityService.ts |  396 ++++
 .../src/core/entities/NoteFavoriteEntityService.ts |   42 +
 .../src/core/entities/NoteReactionEntityService.ts |   62 +
 .../src/core/entities/NotificationEntityService.ts |  151 ++
 .../backend/src/core/entities/PageEntityService.ts |  109 +
 .../src/core/entities/PageLikeEntityService.ts     |   41 +
 .../src/core/entities/SigninEntityService.ts       |   27 +
 .../backend/src/core/entities/UserEntityService.ts |  515 +++++
 .../src/core/entities/UserGroupEntityService.ts    |   42 +
 .../entities/UserGroupInvitationEntityService.ts   |   39 +
 .../src/core/entities/UserListEntityService.ts     |   41 +
 packages/backend/src/core/queue/QueueModule.ts     |  112 ++
 .../backend/src/core/remote/RemoteLoggerService.ts |   12 +
 .../backend/src/core/remote/ResolveUserService.ts  |  132 ++
 .../backend/src/core/remote/WebfingerService.ts    |   48 +
 .../core/remote/activitypub/ApAudienceService.ts   |  104 +
 .../core/remote/activitypub/ApDbResolverService.ts |  179 ++
 .../remote/activitypub/ApDeliverManagerService.ts  |  199 ++
 .../src/core/remote/activitypub/ApInboxService.ts  |  735 +++++++
 .../src/core/remote/activitypub/ApLoggerService.ts |   14 +
 .../src/core/remote/activitypub/ApMfmService.ts    |   30 +
 .../core/remote/activitypub/ApRendererService.ts   |  702 +++++++
 .../core/remote/activitypub/ApRequestService.ts    |  182 ++
 .../core/remote/activitypub/ApResolverService.ts   |  190 ++
 .../core/remote/activitypub/LdSignatureService.ts  |  150 ++
 .../src/core/remote/activitypub/misc/contexts.ts   |  526 +++++
 .../core/remote/activitypub/misc/get-note-html.ts  |    8 +
 .../remote/activitypub/models/ApImageService.ts    |   90 +
 .../remote/activitypub/models/ApMentionService.ts  |   41 +
 .../remote/activitypub/models/ApNoteService.ts     |  403 ++++
 .../remote/activitypub/models/ApPersonService.ts   |  594 ++++++
 .../remote/activitypub/models/ApQuestionService.ts |  109 +
 .../src/core/remote/activitypub/models/icon.ts     |    5 +
 .../core/remote/activitypub/models/identifier.ts   |    5 +
 .../src/core/remote/activitypub/models/tag.ts      |   19 +
 .../backend/src/core/remote/activitypub/type.ts    |  295 +++
 packages/backend/src/daemons/DaemonModule.ts       |   24 +
 packages/backend/src/daemons/JanitorService.ts     |   37 +
 packages/backend/src/daemons/QueueStatsService.ts  |   77 +
 packages/backend/src/daemons/ServerStatsService.ts |   95 +
 packages/backend/src/daemons/janitor.ts            |   20 -
 packages/backend/src/daemons/queue-stats.ts        |   60 -
 packages/backend/src/daemons/server-stats.ts       |   79 -
 packages/backend/src/db/elasticsearch.ts           |   56 -
 packages/backend/src/db/logger.ts                  |    3 -
 packages/backend/src/db/postgre.ts                 |  256 ---
 packages/backend/src/db/redis.ts                   |   18 -
 packages/backend/src/di-symbols.ts                 |   72 +
 packages/backend/src/logger.ts                     |  112 ++
 packages/backend/src/mfm/from-html.ts              |  213 --
 packages/backend/src/mfm/to-html.ts                |  159 --
 packages/backend/src/misc/acct.ts                  |    2 +-
 packages/backend/src/misc/antenna-cache.ts         |   36 -
 packages/backend/src/misc/app-lock.ts              |   31 -
 packages/backend/src/misc/before-shutdown.ts       |    2 +-
 packages/backend/src/misc/captcha.ts               |   57 -
 packages/backend/src/misc/check-hit-antenna.ts     |   99 -
 packages/backend/src/misc/check-word-mute.ts       |    4 +-
 packages/backend/src/misc/convert-host.ts          |   26 -
 packages/backend/src/misc/count-same-renotes.ts    |   15 -
 packages/backend/src/misc/detect-url-mime.ts       |   15 -
 packages/backend/src/misc/download-text-file.ts    |   25 -
 packages/backend/src/misc/download-url.ts          |   89 -
 .../src/misc/extract-custom-emojis-from-mfm.ts     |    2 +-
 packages/backend/src/misc/extract-hashtags.ts      |    2 +-
 packages/backend/src/misc/extract-mentions.ts      |    2 +-
 packages/backend/src/misc/fetch-meta.ts            |   44 -
 packages/backend/src/misc/fetch-proxy-account.ts   |    9 -
 packages/backend/src/misc/fetch.ts                 |  141 --
 packages/backend/src/misc/gen-id.ts                |   21 -
 .../backend/src/misc/generate-native-user-token.ts |    3 +
 packages/backend/src/misc/get-file-info.ts         |  374 ----
 packages/backend/src/misc/get-note-summary.ts      |   10 +-
 packages/backend/src/misc/identifiable-error.ts    |    2 +-
 packages/backend/src/misc/is-native-token.ts       |    1 +
 packages/backend/src/misc/is-quote.ts              |    2 +-
 packages/backend/src/misc/keypair-store.ts         |   10 -
 packages/backend/src/misc/populate-emojis.ts       |  125 --
 packages/backend/src/misc/prelude/README.md        |    3 +
 packages/backend/src/misc/prelude/array.ts         |  138 ++
 packages/backend/src/misc/prelude/await-all.ts     |   21 +
 packages/backend/src/misc/prelude/math.ts          |    3 +
 packages/backend/src/misc/prelude/maybe.ts         |   20 +
 packages/backend/src/misc/prelude/relation.ts      |    5 +
 packages/backend/src/misc/prelude/string.ts        |   15 +
 packages/backend/src/misc/prelude/symbol.ts        |    1 +
 packages/backend/src/misc/prelude/time.ts          |   39 +
 packages/backend/src/misc/prelude/url.ts           |   13 +
 packages/backend/src/misc/prelude/xml.ts           |   41 +
 packages/backend/src/misc/reaction-lib.ts          |  131 --
 packages/backend/src/misc/reset-db.ts              |   28 +
 packages/backend/src/misc/show-machine-info.ts     |    2 +-
 packages/backend/src/misc/status-error.ts          |   13 +
 packages/backend/src/misc/webhook-cache.ts         |   49 -
 .../backend/src/models/entities/AbuseUserReport.ts |   79 +
 .../backend/src/models/entities/AccessToken.ts     |   90 +
 packages/backend/src/models/entities/Ad.ts         |   59 +
 .../backend/src/models/entities/Announcement.ts    |   43 +
 .../src/models/entities/AnnouncementRead.ts        |   36 +
 packages/backend/src/models/entities/Antenna.ts    |   99 +
 .../backend/src/models/entities/AntennaNote.ts     |   43 +
 packages/backend/src/models/entities/App.ts        |   60 +
 .../src/models/entities/AttestationChallenge.ts    |   46 +
 .../backend/src/models/entities/AuthSession.ts     |   43 +
 packages/backend/src/models/entities/Blocking.ts   |   42 +
 packages/backend/src/models/entities/Channel.ts    |   75 +
 .../src/models/entities/ChannelFollowing.ts        |   43 +
 .../src/models/entities/ChannelNotePining.ts       |   35 +
 packages/backend/src/models/entities/Clip.ts       |   44 +
 packages/backend/src/models/entities/ClipNote.ts   |   37 +
 packages/backend/src/models/entities/DriveFile.ts  |  192 ++
 .../backend/src/models/entities/DriveFolder.ts     |   49 +
 packages/backend/src/models/entities/Emoji.ts      |   58 +
 .../backend/src/models/entities/FollowRequest.ts   |   85 +
 packages/backend/src/models/entities/Following.ts  |   82 +
 .../backend/src/models/entities/GalleryLike.ts     |   33 +
 .../backend/src/models/entities/GalleryPost.ts     |   79 +
 packages/backend/src/models/entities/Hashtag.ts    |   87 +
 packages/backend/src/models/entities/Instance.ts   |  164 ++
 .../src/models/entities/MessagingMessage.ts        |   89 +
 packages/backend/src/models/entities/Meta.ts       |  462 +++++
 .../backend/src/models/entities/ModerationLog.ts   |   32 +
 packages/backend/src/models/entities/MutedNote.ts  |   48 +
 packages/backend/src/models/entities/Muting.ts     |   48 +
 packages/backend/src/models/entities/Note.ts       |  242 +++
 .../backend/src/models/entities/NoteFavorite.ts    |   35 +
 .../backend/src/models/entities/NoteReaction.ts    |   44 +
 .../src/models/entities/NoteThreadMuting.ts        |   33 +
 packages/backend/src/models/entities/NoteUnread.ts |   63 +
 .../backend/src/models/entities/Notification.ts    |  173 ++
 packages/backend/src/models/entities/Page.ts       |  121 ++
 packages/backend/src/models/entities/PageLike.ts   |   33 +
 .../src/models/entities/PasswordResetRequest.ts    |   30 +
 packages/backend/src/models/entities/Poll.ts       |   72 +
 packages/backend/src/models/entities/PollVote.ts   |   40 +
 packages/backend/src/models/entities/PromoNote.ts  |   28 +
 packages/backend/src/models/entities/PromoRead.ts  |   35 +
 .../src/models/entities/RegistrationTickets.ts     |   17 +
 .../backend/src/models/entities/RegistryItem.ts    |   58 +
 packages/backend/src/models/entities/Relay.ts      |   19 +
 packages/backend/src/models/entities/Signin.ts     |   35 +
 .../backend/src/models/entities/SwSubscription.ts  |   37 +
 .../backend/src/models/entities/UsedUsername.ts    |   20 +
 packages/backend/src/models/entities/User.ts       |  255 +++
 packages/backend/src/models/entities/UserGroup.ts  |   46 +
 .../src/models/entities/UserGroupInvitation.ts     |   42 +
 .../src/models/entities/UserGroupJoining.ts        |   42 +
 packages/backend/src/models/entities/UserIp.ts     |   24 +
 .../backend/src/models/entities/UserKeypair.ts     |   33 +
 packages/backend/src/models/entities/UserList.ts   |   33 +
 .../backend/src/models/entities/UserListJoining.ts |   42 +
 .../backend/src/models/entities/UserNotePining.ts  |   35 +
 .../backend/src/models/entities/UserPending.ts     |   32 +
 .../backend/src/models/entities/UserProfile.ts     |  232 +++
 .../backend/src/models/entities/UserPublickey.ts   |   34 +
 .../backend/src/models/entities/UserSecurityKey.ts |   48 +
 packages/backend/src/models/entities/Webhook.ts    |   73 +
 .../src/models/entities/abuse-user-report.ts       |   79 -
 .../backend/src/models/entities/access-token.ts    |   90 -
 packages/backend/src/models/entities/ad.ts         |   59 -
 .../src/models/entities/announcement-read.ts       |   36 -
 .../backend/src/models/entities/announcement.ts    |   43 -
 .../backend/src/models/entities/antenna-note.ts    |   43 -
 packages/backend/src/models/entities/antenna.ts    |   99 -
 packages/backend/src/models/entities/app.ts        |   60 -
 .../src/models/entities/attestation-challenge.ts   |   46 -
 .../backend/src/models/entities/auth-session.ts    |   43 -
 packages/backend/src/models/entities/blocking.ts   |   42 -
 .../src/models/entities/channel-following.ts       |   43 -
 .../src/models/entities/channel-note-pining.ts     |   35 -
 packages/backend/src/models/entities/channel.ts    |   75 -
 packages/backend/src/models/entities/clip-note.ts  |   37 -
 packages/backend/src/models/entities/clip.ts       |   44 -
 packages/backend/src/models/entities/drive-file.ts |  192 --
 .../backend/src/models/entities/drive-folder.ts    |   49 -
 packages/backend/src/models/entities/emoji.ts      |   58 -
 .../backend/src/models/entities/follow-request.ts  |   85 -
 packages/backend/src/models/entities/following.ts  |   82 -
 .../backend/src/models/entities/gallery-like.ts    |   33 -
 .../backend/src/models/entities/gallery-post.ts    |   79 -
 packages/backend/src/models/entities/hashtag.ts    |   87 -
 packages/backend/src/models/entities/instance.ts   |  164 --
 .../src/models/entities/messaging-message.ts       |   89 -
 packages/backend/src/models/entities/meta.ts       |  462 -----
 .../backend/src/models/entities/moderation-log.ts  |   32 -
 packages/backend/src/models/entities/muted-note.ts |   48 -
 packages/backend/src/models/entities/muting.ts     |   48 -
 .../backend/src/models/entities/note-favorite.ts   |   35 -
 .../backend/src/models/entities/note-reaction.ts   |   44 -
 .../src/models/entities/note-thread-muting.ts      |   33 -
 .../backend/src/models/entities/note-unread.ts     |   63 -
 .../backend/src/models/entities/note-watching.ts   |   52 -
 packages/backend/src/models/entities/note.ts       |  242 ---
 .../backend/src/models/entities/notification.ts    |  173 --
 packages/backend/src/models/entities/page-like.ts  |   33 -
 packages/backend/src/models/entities/page.ts       |  121 --
 .../src/models/entities/password-reset-request.ts  |   30 -
 packages/backend/src/models/entities/poll-vote.ts  |   40 -
 packages/backend/src/models/entities/poll.ts       |   72 -
 packages/backend/src/models/entities/promo-note.ts |   28 -
 packages/backend/src/models/entities/promo-read.ts |   35 -
 .../src/models/entities/registration-tickets.ts    |   17 -
 .../backend/src/models/entities/registry-item.ts   |   58 -
 packages/backend/src/models/entities/relay.ts      |   19 -
 packages/backend/src/models/entities/signin.ts     |   35 -
 .../backend/src/models/entities/sw-subscription.ts |   37 -
 .../backend/src/models/entities/used-username.ts   |   20 -
 .../src/models/entities/user-group-invitation.ts   |   42 -
 .../src/models/entities/user-group-joining.ts      |   42 -
 packages/backend/src/models/entities/user-group.ts |   46 -
 packages/backend/src/models/entities/user-ip.ts    |   24 -
 .../backend/src/models/entities/user-keypair.ts    |   33 -
 .../src/models/entities/user-list-joining.ts       |   42 -
 packages/backend/src/models/entities/user-list.ts  |   33 -
 .../src/models/entities/user-note-pining.ts        |   35 -
 .../backend/src/models/entities/user-pending.ts    |   32 -
 .../backend/src/models/entities/user-profile.ts    |  232 ---
 .../backend/src/models/entities/user-publickey.ts  |   34 -
 .../src/models/entities/user-security-key.ts       |   48 -
 packages/backend/src/models/entities/user.ts       |  248 ---
 packages/backend/src/models/entities/webhook.ts    |   73 -
 packages/backend/src/models/index.ts               |  323 +--
 .../src/models/repositories/abuse-user-report.ts   |   38 -
 .../backend/src/models/repositories/antenna.ts     |   32 -
 packages/backend/src/models/repositories/app.ts    |   39 -
 .../src/models/repositories/auth-session.ts        |   20 -
 .../backend/src/models/repositories/blocking.ts    |   31 -
 .../backend/src/models/repositories/channel.ts     |   41 -
 packages/backend/src/models/repositories/clip.ts   |   30 -
 .../backend/src/models/repositories/drive-file.ts  |  188 --
 .../src/models/repositories/drive-folder.ts        |   42 -
 packages/backend/src/models/repositories/emoji.ts  |   27 -
 .../src/models/repositories/follow-request.ts      |   19 -
 .../backend/src/models/repositories/following.ts   |   85 -
 .../src/models/repositories/gallery-like.ts        |   24 -
 .../src/models/repositories/gallery-post.ts        |   39 -
 .../backend/src/models/repositories/hashtag.ts     |   25 -
 .../backend/src/models/repositories/instance.ts    |   43 -
 .../src/models/repositories/messaging-message.ts   |   39 -
 .../src/models/repositories/moderation-logs.ts     |   29 -
 packages/backend/src/models/repositories/muting.ts |   32 -
 .../src/models/repositories/note-favorite.ts       |   27 -
 .../src/models/repositories/note-reaction.ts       |   32 -
 packages/backend/src/models/repositories/note.ts   |  326 ---
 .../src/models/repositories/notification.ts        |  115 --
 .../backend/src/models/repositories/page-like.ts   |   25 -
 packages/backend/src/models/repositories/page.ts   |   88 -
 packages/backend/src/models/repositories/relay.ts  |    5 -
 packages/backend/src/models/repositories/signin.ts |   10 -
 .../models/repositories/user-group-invitation.ts   |   22 -
 .../backend/src/models/repositories/user-group.ts  |   24 -
 .../backend/src/models/repositories/user-list.ts   |   23 -
 packages/backend/src/models/repositories/user.ts   |  436 ----
 .../src/models/schema/federation-instance.ts       |    3 -
 packages/backend/src/postgre.ts                    |  215 ++
 packages/backend/src/prelude/README.md             |    3 -
 packages/backend/src/prelude/array.ts              |  138 --
 packages/backend/src/prelude/await-all.ts          |   21 -
 packages/backend/src/prelude/math.ts               |    3 -
 packages/backend/src/prelude/maybe.ts              |   20 -
 packages/backend/src/prelude/relation.ts           |    5 -
 packages/backend/src/prelude/string.ts             |   15 -
 packages/backend/src/prelude/symbol.ts             |    1 -
 packages/backend/src/prelude/time.ts               |   39 -
 packages/backend/src/prelude/url.ts                |   13 -
 packages/backend/src/prelude/xml.ts                |   41 -
 .../backend/src/queue/DbQueueProcessorsService.ts  |   63 +
 .../queue/ObjectStorageQueueProcessorsService.ts   |   30 +
 packages/backend/src/queue/QueueLoggerService.ts   |   12 +
 packages/backend/src/queue/QueueProcessorModule.ts |   72 +
 .../backend/src/queue/QueueProcessorService.ts     |  141 ++
 .../src/queue/SystemQueueProcessorsService.ts      |   38 +
 packages/backend/src/queue/index.ts                |  342 ----
 packages/backend/src/queue/initialize.ts           |   34 -
 packages/backend/src/queue/logger.ts               |    3 -
 .../CheckExpiredMutingsProcessorService.ts         |   50 +
 .../processors/CleanChartsProcessorService.ts      |   68 +
 .../src/queue/processors/CleanProcessorService.ts  |   36 +
 .../processors/CleanRemoteFilesProcessorService.ts |   69 +
 .../processors/DeleteAccountProcessorService.ts    |  124 ++
 .../processors/DeleteDriveFilesProcessorService.ts |   78 +
 .../queue/processors/DeleteFileProcessorService.ts |   31 +
 .../queue/processors/DeliverProcessorService.ts    |  130 ++
 .../EndedPollNotificationProcessorService.ts       |   56 +
 .../processors/ExportBlockingProcessorService.ts   |  117 ++
 .../ExportCustomEmojisProcessorService.ts          |  135 ++
 .../processors/ExportFollowingProcessorService.ts  |  120 ++
 .../processors/ExportMutingProcessorService.ts     |  120 ++
 .../processors/ExportNotesProcessorService.ts      |  143 ++
 .../processors/ExportUserListsProcessorService.ts  |   96 +
 .../processors/ImportBlockingProcessorService.ts   |  102 +
 .../ImportCustomEmojisProcessorService.ts          |  110 +
 .../processors/ImportFollowingProcessorService.ts  |   99 +
 .../processors/ImportMutingProcessorService.ts     |  100 +
 .../processors/ImportUserListsProcessorService.ts  |  112 ++
 .../src/queue/processors/InboxProcessorService.ts  |  195 ++
 .../processors/ResyncChartsProcessorService.ts     |   61 +
 .../queue/processors/TickChartsProcessorService.ts |   68 +
 .../processors/WebhookDeliverProcessorService.ts   |   79 +
 .../src/queue/processors/db/delete-account.ts      |   94 -
 .../src/queue/processors/db/delete-drive-files.ts  |   56 -
 .../src/queue/processors/db/export-blocking.ts     |   93 -
 .../queue/processors/db/export-custom-emojis.ts    |  114 --
 .../src/queue/processors/db/export-following.ts    |   94 -
 .../backend/src/queue/processors/db/export-mute.ts |   94 -
 .../src/queue/processors/db/export-notes.ts        |  118 --
 .../src/queue/processors/db/export-user-lists.ts   |   70 -
 .../src/queue/processors/db/import-blocking.ts     |   75 -
 .../queue/processors/db/import-custom-emojis.ts    |   81 -
 .../src/queue/processors/db/import-following.ts    |   74 -
 .../src/queue/processors/db/import-muting.ts       |   84 -
 .../src/queue/processors/db/import-user-lists.ts   |   80 -
 packages/backend/src/queue/processors/db/index.ts  |   37 -
 packages/backend/src/queue/processors/deliver.ts   |   98 -
 .../queue/processors/ended-poll-notification.ts    |   33 -
 packages/backend/src/queue/processors/inbox.ts     |  157 --
 .../object-storage/clean-remote-files.ts           |   50 -
 .../queue/processors/object-storage/delete-file.ts |   11 -
 .../src/queue/processors/object-storage/index.ts   |   15 -
 .../processors/system/check-expired-mutings.ts     |   30 -
 .../src/queue/processors/system/clean-charts.ts    |   28 -
 .../backend/src/queue/processors/system/clean.ts   |   18 -
 .../backend/src/queue/processors/system/index.ts   |   20 -
 .../src/queue/processors/system/resync-charts.ts   |   21 -
 .../src/queue/processors/system/tick-charts.ts     |   28 -
 .../src/queue/processors/webhook-deliver.ts        |   59 -
 packages/backend/src/queue/queues.ts               |   21 -
 packages/backend/src/queue/types.ts                |   12 +-
 packages/backend/src/redis.ts                      |   15 +
 .../backend/src/remote/activitypub/ap-request.ts   |  104 -
 .../backend/src/remote/activitypub/audience.ts     |   92 -
 .../backend/src/remote/activitypub/db-resolver.ts  |  155 --
 .../src/remote/activitypub/deliver-manager.ts      |  151 --
 .../src/remote/activitypub/kernel/accept/follow.ts |   29 -
 .../src/remote/activitypub/kernel/accept/index.ts  |   24 -
 .../src/remote/activitypub/kernel/add/index.ts     |   23 -
 .../remote/activitypub/kernel/announce/index.ts    |   19 -
 .../src/remote/activitypub/kernel/announce/note.ts |   72 -
 .../src/remote/activitypub/kernel/block/index.ts   |   23 -
 .../src/remote/activitypub/kernel/create/index.ts  |   43 -
 .../src/remote/activitypub/kernel/create/note.ts   |   44 -
 .../src/remote/activitypub/kernel/delete/actor.ts  |   27 -
 .../src/remote/activitypub/kernel/delete/index.ts  |   49 -
 .../src/remote/activitypub/kernel/delete/note.ts   |   41 -
 .../src/remote/activitypub/kernel/flag/index.ts    |   30 -
 .../src/remote/activitypub/kernel/follow.ts        |   20 -
 .../backend/src/remote/activitypub/kernel/index.ts |   74 -
 .../backend/src/remote/activitypub/kernel/like.ts  |   21 -
 .../backend/src/remote/activitypub/kernel/read.ts  |   27 -
 .../src/remote/activitypub/kernel/reject/follow.ts |   30 -
 .../src/remote/activitypub/kernel/reject/index.ts  |   24 -
 .../src/remote/activitypub/kernel/remove/index.ts  |   23 -
 .../src/remote/activitypub/kernel/undo/accept.ts   |   27 -
 .../src/remote/activitypub/kernel/undo/announce.ts |   18 -
 .../src/remote/activitypub/kernel/undo/block.ts    |   21 -
 .../src/remote/activitypub/kernel/undo/follow.ts   |   41 -
 .../src/remote/activitypub/kernel/undo/index.ts    |   36 -
 .../src/remote/activitypub/kernel/undo/like.ts     |   21 -
 .../src/remote/activitypub/kernel/update/index.ts  |   34 -
 packages/backend/src/remote/activitypub/logger.ts  |    3 -
 .../src/remote/activitypub/misc/contexts.ts        |  526 -----
 .../src/remote/activitypub/misc/get-note-html.ts   |    8 -
 .../src/remote/activitypub/misc/html-to-mfm.ts     |    9 -
 .../src/remote/activitypub/misc/ld-signature.ts    |  135 --
 .../backend/src/remote/activitypub/models/icon.ts  |    5 -
 .../src/remote/activitypub/models/identifier.ts    |    5 -
 .../backend/src/remote/activitypub/models/image.ts |   68 -
 .../src/remote/activitypub/models/mention.ts       |   24 -
 .../backend/src/remote/activitypub/models/note.ts  |  359 ----
 .../src/remote/activitypub/models/person.ts        |  504 -----
 .../src/remote/activitypub/models/question.ts      |   83 -
 .../backend/src/remote/activitypub/models/tag.ts   |   18 -
 packages/backend/src/remote/activitypub/perform.ts |   17 -
 .../src/remote/activitypub/renderer/accept.ts      |    8 -
 .../backend/src/remote/activitypub/renderer/add.ts |    9 -
 .../src/remote/activitypub/renderer/announce.ts    |   29 -
 .../src/remote/activitypub/renderer/block.ts       |   20 -
 .../src/remote/activitypub/renderer/create.ts      |   17 -
 .../src/remote/activitypub/renderer/delete.ts      |    9 -
 .../src/remote/activitypub/renderer/document.ts    |    9 -
 .../src/remote/activitypub/renderer/emoji.ts       |   14 -
 .../src/remote/activitypub/renderer/flag.ts        |   15 -
 .../remote/activitypub/renderer/follow-relay.ts    |   14 -
 .../src/remote/activitypub/renderer/follow-user.ts |   12 -
 .../src/remote/activitypub/renderer/follow.ts      |   14 -
 .../src/remote/activitypub/renderer/hashtag.ts     |    7 -
 .../src/remote/activitypub/renderer/image.ts       |    9 -
 .../src/remote/activitypub/renderer/index.ts       |   59 -
 .../backend/src/remote/activitypub/renderer/key.ts |   14 -
 .../src/remote/activitypub/renderer/like.ts        |   31 -
 .../src/remote/activitypub/renderer/mention.ts     |    9 -
 .../src/remote/activitypub/renderer/note.ts        |  169 --
 .../renderer/ordered-collection-page.ts            |   23 -
 .../activitypub/renderer/ordered-collection.ts     |   28 -
 .../src/remote/activitypub/renderer/person.ts      |   89 -
 .../src/remote/activitypub/renderer/question.ts    |   23 -
 .../src/remote/activitypub/renderer/read.ts        |    9 -
 .../src/remote/activitypub/renderer/reject.ts      |    8 -
 .../src/remote/activitypub/renderer/remove.ts      |    9 -
 .../src/remote/activitypub/renderer/tombstone.ts   |    4 -
 .../src/remote/activitypub/renderer/undo.ts        |   15 -
 .../src/remote/activitypub/renderer/update.ts      |   15 -
 .../src/remote/activitypub/renderer/vote.ts        |   23 -
 packages/backend/src/remote/activitypub/request.ts |   58 -
 .../backend/src/remote/activitypub/resolver.ts     |  133 --
 packages/backend/src/remote/activitypub/type.ts    |  295 ---
 packages/backend/src/remote/logger.ts              |    3 -
 packages/backend/src/remote/resolve-user.ts        |  111 --
 packages/backend/src/remote/webfinger.ts           |   34 -
 .../backend/src/server/ActivityPubServerService.ts |  584 ++++++
 packages/backend/src/server/FileServerService.ts   |  178 ++
 .../backend/src/server/MediaProxyServerService.ts  |  137 ++
 .../backend/src/server/NodeinfoServerService.ts    |  129 ++
 packages/backend/src/server/ServerModule.ts        |   92 +
 packages/backend/src/server/ServerService.ts       |  177 ++
 .../backend/src/server/WellKnownServerService.ts   |  168 ++
 packages/backend/src/server/activitypub.ts         |  254 ---
 .../backend/src/server/activitypub/featured.ts     |   41 -
 .../backend/src/server/activitypub/followers.ts    |   95 -
 .../backend/src/server/activitypub/following.ts    |   95 -
 packages/backend/src/server/activitypub/outbox.ts  |  108 -
 packages/backend/src/server/api/2fa.ts             |  422 ----
 packages/backend/src/server/api/ApiCallService.ts  |  258 +++
 .../backend/src/server/api/ApiLoggerService.ts     |   12 +
 .../backend/src/server/api/ApiServerService.ts     |  160 ++
 .../backend/src/server/api/AuthenticateService.ts  |   86 +
 packages/backend/src/server/api/EndpointsModule.ts | 1268 ++++++++++++
 .../backend/src/server/api/RateLimiterService.ts   |   89 +
 .../backend/src/server/api/SigninApiService.ts     |  282 +++
 packages/backend/src/server/api/SigninService.ts   |   64 +
 .../backend/src/server/api/SignupApiService.ts     |  175 ++
 .../src/server/api/StreamingApiServerService.ts    |  120 ++
 packages/backend/src/server/api/api-handler.ts     |   92 -
 packages/backend/src/server/api/authenticate.ts    |   66 -
 packages/backend/src/server/api/call.ts            |  147 --
 .../backend/src/server/api/common/GetterService.ts |   71 +
 .../src/server/api/common/generate-block-query.ts  |   42 -
 .../server/api/common/generate-channel-query.ts    |   24 -
 .../server/api/common/generate-muted-note-query.ts |   13 -
 .../api/common/generate-muted-note-thread-query.ts |   17 -
 .../server/api/common/generate-muted-user-query.ts |   57 -
 .../api/common/generate-native-user-token.ts       |    3 -
 .../server/api/common/generate-replies-query.ts    |   27 -
 .../server/api/common/generate-visibility-query.ts |   42 -
 packages/backend/src/server/api/common/getters.ts  |   56 -
 .../src/server/api/common/inject-featured.ts       |    4 +-
 .../backend/src/server/api/common/inject-promo.ts  |    4 +-
 .../src/server/api/common/is-native-token.ts       |    1 -
 .../src/server/api/common/make-pagination-query.ts |   28 -
 .../server/api/common/read-messaging-message.ts    |  151 --
 .../src/server/api/common/read-notification.ts     |   50 -
 packages/backend/src/server/api/common/signin.ts   |   44 -
 packages/backend/src/server/api/common/signup.ts   |  114 --
 packages/backend/src/server/api/define.ts          |   59 -
 packages/backend/src/server/api/endpoint-base.ts   |   62 +
 packages/backend/src/server/api/endpoints.ts       |   10 +-
 .../api/endpoints/admin/abuse-user-reports.ts      |   56 +-
 .../server/api/endpoints/admin/accounts/create.ts  |   67 +-
 .../server/api/endpoints/admin/accounts/delete.ts  |   82 +-
 .../src/server/api/endpoints/admin/ad/create.ts    |   44 +-
 .../src/server/api/endpoints/admin/ad/delete.ts    |   24 +-
 .../src/server/api/endpoints/admin/ad/list.ts      |   30 +-
 .../src/server/api/endpoints/admin/ad/update.ts    |   40 +-
 .../api/endpoints/admin/announcements/create.ts    |   40 +-
 .../api/endpoints/admin/announcements/delete.ts    |   24 +-
 .../api/endpoints/admin/announcements/list.ts      |   61 +-
 .../api/endpoints/admin/announcements/update.ts    |   34 +-
 .../server/api/endpoints/admin/delete-account.ts   |   32 +-
 .../endpoints/admin/delete-all-files-of-a-user.ts  |   32 +-
 .../api/endpoints/admin/drive-capacity-override.ts |   58 +-
 .../endpoints/admin/drive/clean-remote-files.ts    |   18 +-
 .../server/api/endpoints/admin/drive/cleanup.ts    |   32 +-
 .../src/server/api/endpoints/admin/drive/files.ts  |   66 +-
 .../server/api/endpoints/admin/drive/show-file.ts  |   52 +-
 .../api/endpoints/admin/emoji/add-aliases-bulk.ts  |   47 +-
 .../src/server/api/endpoints/admin/emoji/add.ts    |  104 +-
 .../src/server/api/endpoints/admin/emoji/copy.ts   |  101 +-
 .../api/endpoints/admin/emoji/delete-bulk.ts       |   47 +-
 .../src/server/api/endpoints/admin/emoji/delete.ts |   43 +-
 .../server/api/endpoints/admin/emoji/import-zip.ts |   19 +-
 .../api/endpoints/admin/emoji/list-remote.ts       |   55 +-
 .../src/server/api/endpoints/admin/emoji/list.ts   |   56 +-
 .../endpoints/admin/emoji/remove-aliases-bulk.ts   |   47 +-
 .../api/endpoints/admin/emoji/set-aliases-bulk.ts  |   41 +-
 .../api/endpoints/admin/emoji/set-category-bulk.ts |   41 +-
 .../src/server/api/endpoints/admin/emoji/update.ts |   43 +-
 .../endpoints/admin/federation/delete-all-files.ts |   32 +-
 .../federation/refresh-remote-instance-metadata.ts |   35 +-
 .../admin/federation/remove-all-following.ts       |   47 +-
 .../endpoints/admin/federation/update-instance.ts  |   36 +-
 .../server/api/endpoints/admin/get-index-stats.ts  |   34 +-
 .../server/api/endpoints/admin/get-table-stats.ts  |   43 +-
 .../src/server/api/endpoints/admin/get-user-ips.ts |   36 +-
 .../src/server/api/endpoints/admin/invite.ts       |   50 +-
 .../backend/src/server/api/endpoints/admin/meta.ts |  192 +-
 .../server/api/endpoints/admin/moderators/add.ts   |   50 +-
 .../api/endpoints/admin/moderators/remove.ts       |   38 +-
 .../src/server/api/endpoints/admin/promo/create.ts |   48 +-
 .../src/server/api/endpoints/admin/queue/clear.ts  |   23 +-
 .../api/endpoints/admin/queue/deliver-delayed.ts   |   44 +-
 .../api/endpoints/admin/queue/inbox-delayed.ts     |   44 +-
 .../src/server/api/endpoints/admin/queue/stats.ts  |   42 +-
 .../src/server/api/endpoints/admin/relays/add.ts   |   28 +-
 .../src/server/api/endpoints/admin/relays/list.ts  |   18 +-
 .../server/api/endpoints/admin/relays/remove.ts    |   18 +-
 .../server/api/endpoints/admin/reset-password.ts   |   57 +-
 .../endpoints/admin/resolve-abuse-user-report.ts   |   68 +-
 .../src/server/api/endpoints/admin/send-email.ts   |   18 +-
 .../src/server/api/endpoints/admin/server-info.ts  |   78 +-
 .../api/endpoints/admin/show-moderation-logs.ts    |   28 +-
 .../src/server/api/endpoints/admin/show-user.ts    |  112 +-
 .../src/server/api/endpoints/admin/show-users.ts   |   84 +-
 .../src/server/api/endpoints/admin/silence-user.ts |   61 +-
 .../src/server/api/endpoints/admin/suspend-user.ts |  145 +-
 .../server/api/endpoints/admin/unsilence-user.ts   |   53 +-
 .../server/api/endpoints/admin/unsuspend-user.ts   |   53 +-
 .../src/server/api/endpoints/admin/update-meta.ts  |  582 +++---
 .../server/api/endpoints/admin/update-user-note.ts |   35 +-
 .../src/server/api/endpoints/admin/vacuum.ts       |   36 -
 .../src/server/api/endpoints/announcements.ts      |   55 +-
 .../src/server/api/endpoints/antennas/create.ts    |  113 +-
 .../src/server/api/endpoints/antennas/delete.ts    |   44 +-
 .../src/server/api/endpoints/antennas/list.ts      |   29 +-
 .../src/server/api/endpoints/antennas/notes.ts     |  108 +-
 .../src/server/api/endpoints/antennas/show.ts      |   41 +-
 .../src/server/api/endpoints/antennas/update.ts    |  126 +-
 .../backend/src/server/api/endpoints/ap/get.ts     |   24 +-
 .../backend/src/server/api/endpoints/ap/show.ts    |  167 +-
 .../backend/src/server/api/endpoints/app/create.ts |   70 +-
 .../backend/src/server/api/endpoints/app/show.ts   |   45 +-
 .../src/server/api/endpoints/auth/accept.ts        |  110 +-
 .../server/api/endpoints/auth/session/generate.ts  |   70 +-
 .../src/server/api/endpoints/auth/session/show.ts  |   39 +-
 .../server/api/endpoints/auth/session/userkey.ts   |  104 +-
 .../src/server/api/endpoints/blocking/create.ts    |   89 +-
 .../src/server/api/endpoints/blocking/delete.ts    |   86 +-
 .../src/server/api/endpoints/blocking/list.ts      |   40 +-
 .../src/server/api/endpoints/channels/create.ts    |   69 +-
 .../src/server/api/endpoints/channels/featured.ts  |   31 +-
 .../src/server/api/endpoints/channels/follow.ts    |   54 +-
 .../src/server/api/endpoints/channels/followed.ts  |   40 +-
 .../src/server/api/endpoints/channels/owned.ts     |   40 +-
 .../src/server/api/endpoints/channels/show.ts      |   37 +-
 .../src/server/api/endpoints/channels/timeline.ts  |   80 +-
 .../src/server/api/endpoints/channels/unfollow.ts  |   51 +-
 .../src/server/api/endpoints/channels/update.ts    |   80 +-
 .../server/api/endpoints/charts/active-users.ts    |   23 +-
 .../src/server/api/endpoints/charts/ap-request.ts  |   23 +-
 .../src/server/api/endpoints/charts/drive.ts       |   23 +-
 .../src/server/api/endpoints/charts/federation.ts  |   23 +-
 .../src/server/api/endpoints/charts/hashtag.ts     |   23 +-
 .../src/server/api/endpoints/charts/instance.ts    |   23 +-
 .../src/server/api/endpoints/charts/notes.ts       |   23 +-
 .../src/server/api/endpoints/charts/user/drive.ts  |   23 +-
 .../server/api/endpoints/charts/user/following.ts  |   23 +-
 .../src/server/api/endpoints/charts/user/notes.ts  |   23 +-
 .../server/api/endpoints/charts/user/reactions.ts  |   23 +-
 .../src/server/api/endpoints/charts/users.ts       |   23 +-
 .../src/server/api/endpoints/clips/add-note.ts     |   74 +-
 .../src/server/api/endpoints/clips/create.ts       |   44 +-
 .../src/server/api/endpoints/clips/delete.ts       |   36 +-
 .../backend/src/server/api/endpoints/clips/list.ts |   29 +-
 .../src/server/api/endpoints/clips/notes.ts        |   99 +-
 .../src/server/api/endpoints/clips/remove-note.ts  |   57 +-
 .../backend/src/server/api/endpoints/clips/show.ts |   45 +-
 .../src/server/api/endpoints/clips/update.ts       |   51 +-
 packages/backend/src/server/api/endpoints/drive.ts |   37 +-
 .../src/server/api/endpoints/drive/files.ts        |   58 +-
 .../api/endpoints/drive/files/attached-notes.ts    |   54 +-
 .../api/endpoints/drive/files/check-existence.ts   |   30 +-
 .../src/server/api/endpoints/drive/files/create.ts |  106 +-
 .../src/server/api/endpoints/drive/files/delete.ts |   47 +-
 .../api/endpoints/drive/files/find-by-hash.ts      |   33 +-
 .../src/server/api/endpoints/drive/files/find.ts   |   35 +-
 .../src/server/api/endpoints/drive/files/show.ts   |   73 +-
 .../src/server/api/endpoints/drive/files/update.ts |  101 +-
 .../api/endpoints/drive/files/upload-from-url.ts   |   39 +-
 .../src/server/api/endpoints/drive/folders.ts      |   46 +-
 .../server/api/endpoints/drive/folders/create.ts   |   77 +-
 .../server/api/endpoints/drive/folders/delete.ts   |   63 +-
 .../src/server/api/endpoints/drive/folders/find.ts |   35 +-
 .../src/server/api/endpoints/drive/folders/show.ts |   45 +-
 .../server/api/endpoints/drive/folders/update.ts   |  132 +-
 .../src/server/api/endpoints/drive/stream.ts       |   48 +-
 .../api/endpoints/email-address/available.ts       |   18 +-
 .../backend/src/server/api/endpoints/endpoint.ts   |   29 +-
 .../backend/src/server/api/endpoints/endpoints.ts  |   15 +-
 .../server/api/endpoints/export-custom-emojis.ts   |   18 +-
 .../server/api/endpoints/federation/followers.ts   |   36 +-
 .../server/api/endpoints/federation/following.ts   |   36 +-
 .../server/api/endpoints/federation/instances.ts   |  177 +-
 .../api/endpoints/federation/show-instance.ts      |   30 +-
 .../src/server/api/endpoints/federation/stats.ts   |  102 +-
 .../api/endpoints/federation/update-remote-user.ts |   23 +-
 .../src/server/api/endpoints/federation/users.ts   |   36 +-
 .../backend/src/server/api/endpoints/fetch-rss.ts  |   48 +-
 .../src/server/api/endpoints/following/create.ts   |   98 +-
 .../src/server/api/endpoints/following/delete.ts   |   80 +-
 .../server/api/endpoints/following/invalidate.ts   |   80 +-
 .../api/endpoints/following/requests/accept.ts     |   43 +-
 .../api/endpoints/following/requests/cancel.ts     |   60 +-
 .../api/endpoints/following/requests/list.ts       |   29 +-
 .../api/endpoints/following/requests/reject.ts     |   37 +-
 .../src/server/api/endpoints/gallery/featured.ts   |   33 +-
 .../src/server/api/endpoints/gallery/popular.ts    |   31 +-
 .../src/server/api/endpoints/gallery/posts.ts      |   32 +-
 .../server/api/endpoints/gallery/posts/create.ts   |   71 +-
 .../server/api/endpoints/gallery/posts/delete.ts   |   36 +-
 .../src/server/api/endpoints/gallery/posts/like.ts |   71 +-
 .../src/server/api/endpoints/gallery/posts/show.ts |   37 +-
 .../server/api/endpoints/gallery/posts/unlike.ts   |   49 +-
 .../server/api/endpoints/gallery/posts/update.ts   |   70 +-
 .../server/api/endpoints/get-online-users-count.ts |   30 +-
 .../src/server/api/endpoints/hashtags/list.ts      |   79 +-
 .../src/server/api/endpoints/hashtags/search.ts    |   34 +-
 .../src/server/api/endpoints/hashtags/show.ts      |   33 +-
 .../src/server/api/endpoints/hashtags/trend.ts     |  184 +-
 .../src/server/api/endpoints/hashtags/users.ts     |   67 +-
 packages/backend/src/server/api/endpoints/i.ts     |   33 +-
 .../backend/src/server/api/endpoints/i/2fa/done.ts |   60 +-
 .../src/server/api/endpoints/i/2fa/key-done.ts     |  248 +--
 .../server/api/endpoints/i/2fa/password-less.ts    |   24 +-
 .../src/server/api/endpoints/i/2fa/register-key.ts |   90 +-
 .../src/server/api/endpoints/i/2fa/register.ts     |   85 +-
 .../src/server/api/endpoints/i/2fa/remove-key.ts   |   70 +-
 .../src/server/api/endpoints/i/2fa/unregister.ts   |   38 +-
 .../backend/src/server/api/endpoints/i/apps.ts     |   52 +-
 .../src/server/api/endpoints/i/authorized-apps.ts  |   51 +-
 .../src/server/api/endpoints/i/change-password.ts  |   48 +-
 .../src/server/api/endpoints/i/delete-account.ts   |   47 +-
 .../src/server/api/endpoints/i/export-blocking.ts  |   18 +-
 .../src/server/api/endpoints/i/export-following.ts |   18 +-
 .../src/server/api/endpoints/i/export-mute.ts      |   18 +-
 .../src/server/api/endpoints/i/export-notes.ts     |   18 +-
 .../server/api/endpoints/i/export-user-lists.ts    |   18 +-
 .../src/server/api/endpoints/i/favorites.ts        |   42 +-
 .../src/server/api/endpoints/i/gallery/likes.ts    |   40 +-
 .../src/server/api/endpoints/i/gallery/posts.ts    |   40 +-
 .../api/endpoints/i/get-word-muted-notes-count.ts  |   30 +-
 .../src/server/api/endpoints/i/import-blocking.ts  |   34 +-
 .../src/server/api/endpoints/i/import-following.ts |   34 +-
 .../src/server/api/endpoints/i/import-muting.ts    |   34 +-
 .../server/api/endpoints/i/import-user-lists.ts    |   34 +-
 .../src/server/api/endpoints/i/notifications.ts    |  222 ++-
 .../src/server/api/endpoints/i/page-likes.ts       |   40 +-
 .../backend/src/server/api/endpoints/i/pages.ts    |   40 +-
 packages/backend/src/server/api/endpoints/i/pin.ts |   40 +-
 .../api/endpoints/i/read-all-messaging-messages.ts |   65 +-
 .../api/endpoints/i/read-all-unread-notes.ts       |   36 +-
 .../server/api/endpoints/i/read-announcement.ts    |   75 +-
 .../src/server/api/endpoints/i/regenerate-token.ts |   65 +-
 .../src/server/api/endpoints/i/registry/get-all.ts |   44 +-
 .../server/api/endpoints/i/registry/get-detail.ts  |   48 +-
 .../src/server/api/endpoints/i/registry/get.ts     |   42 +-
 .../api/endpoints/i/registry/keys-with-type.ts     |   46 +-
 .../src/server/api/endpoints/i/registry/keys.ts    |   32 +-
 .../src/server/api/endpoints/i/registry/remove.ts  |   42 +-
 .../src/server/api/endpoints/i/registry/scopes.ts  |   46 +-
 .../src/server/api/endpoints/i/registry/set.ts     |   85 +-
 .../src/server/api/endpoints/i/revoke-token.ts     |   38 +-
 .../src/server/api/endpoints/i/signin-history.ts   |   32 +-
 .../backend/src/server/api/endpoints/i/unpin.ts    |   36 +-
 .../src/server/api/endpoints/i/update-email.ts     |  122 +-
 .../backend/src/server/api/endpoints/i/update.ts   |  273 +--
 .../server/api/endpoints/i/user-group-invites.ts   |   38 +-
 .../src/server/api/endpoints/i/webhooks/create.ts  |   55 +-
 .../src/server/api/endpoints/i/webhooks/delete.ts  |   46 +-
 .../src/server/api/endpoints/i/webhooks/list.ts    |   26 +-
 .../src/server/api/endpoints/i/webhooks/show.ts    |   36 +-
 .../src/server/api/endpoints/i/webhooks/update.ts  |   58 +-
 .../src/server/api/endpoints/messaging/history.ts  |  131 +-
 .../src/server/api/endpoints/messaging/messages.ts |  171 +-
 .../api/endpoints/messaging/messages/create.ts     |  154 +-
 .../api/endpoints/messaging/messages/delete.ts     |   40 +-
 .../api/endpoints/messaging/messages/read.ts       |   52 +-
 packages/backend/src/server/api/endpoints/meta.ts  |  226 ++-
 .../src/server/api/endpoints/miauth/gen-token.ts   |   62 +-
 .../src/server/api/endpoints/mute/create.ts        |  107 +-
 .../src/server/api/endpoints/mute/delete.ts        |   71 +-
 .../backend/src/server/api/endpoints/mute/list.ts  |   40 +-
 .../backend/src/server/api/endpoints/my/apps.ts    |   47 +-
 packages/backend/src/server/api/endpoints/notes.ts |  106 +-
 .../src/server/api/endpoints/notes/children.ts     |   85 +-
 .../src/server/api/endpoints/notes/clips.ts        |   57 +-
 .../src/server/api/endpoints/notes/conversation.ts |   74 +-
 .../src/server/api/endpoints/notes/create.ts       |  234 ++-
 .../src/server/api/endpoints/notes/delete.ts       |   45 +-
 .../server/api/endpoints/notes/favorites/create.ts |   69 +-
 .../server/api/endpoints/notes/favorites/delete.ts |   56 +-
 .../src/server/api/endpoints/notes/featured.ts     |   81 +-
 .../server/api/endpoints/notes/global-timeline.ts  |  112 +-
 .../server/api/endpoints/notes/hybrid-timeline.ts  |  193 +-
 .../server/api/endpoints/notes/local-timeline.ts   |  137 +-
 .../src/server/api/endpoints/notes/mentions.ts     |  101 +-
 .../api/endpoints/notes/polls/recommendation.ts    |  130 +-
 .../src/server/api/endpoints/notes/polls/vote.ts   |  204 +-
 .../src/server/api/endpoints/notes/reactions.ts    |   66 +-
 .../server/api/endpoints/notes/reactions/create.ts |   39 +-
 .../server/api/endpoints/notes/reactions/delete.ts |   35 +-
 .../src/server/api/endpoints/notes/renotes.ts      |   74 +-
 .../src/server/api/endpoints/notes/replies.ts      |   69 +-
 .../server/api/endpoints/notes/search-by-tag.ts    |  145 +-
 .../src/server/api/endpoints/notes/search.ts       |  151 +-
 .../backend/src/server/api/endpoints/notes/show.ts |   40 +-
 .../src/server/api/endpoints/notes/state.ts        |   74 +-
 .../api/endpoints/notes/thread-muting/create.ts    |   73 +-
 .../api/endpoints/notes/thread-muting/delete.ts    |   40 +-
 .../src/server/api/endpoints/notes/timeline.ts     |  185 +-
 .../src/server/api/endpoints/notes/translate.ts    |  129 +-
 .../src/server/api/endpoints/notes/unrenote.ts     |   52 +-
 .../api/endpoints/notes/user-list-timeline.ts      |  166 +-
 .../server/api/endpoints/notes/watching/create.ts  |   38 -
 .../server/api/endpoints/notes/watching/delete.ts  |   38 -
 .../server/api/endpoints/notifications/create.ts   |   28 +-
 .../endpoints/notifications/mark-all-as-read.ts    |   45 +-
 .../src/server/api/endpoints/notifications/read.ts |   20 +-
 .../backend/src/server/api/endpoints/page-push.ts  |   51 +-
 .../src/server/api/endpoints/pages/create.ts       |  101 +-
 .../src/server/api/endpoints/pages/delete.ts       |   34 +-
 .../src/server/api/endpoints/pages/featured.ts     |   33 +-
 .../backend/src/server/api/endpoints/pages/like.ts |   71 +-
 .../backend/src/server/api/endpoints/pages/show.ts |   64 +-
 .../src/server/api/endpoints/pages/unlike.ts       |   49 +-
 .../src/server/api/endpoints/pages/update.ts       |  107 +-
 packages/backend/src/server/api/endpoints/ping.ts  |   19 +-
 .../src/server/api/endpoints/pinned-users.ts       |   38 +-
 .../backend/src/server/api/endpoints/promo/read.ts |   63 +-
 .../server/api/endpoints/request-reset-password.ts |  107 +-
 .../backend/src/server/api/endpoints/reset-db.ts   |   34 +-
 .../src/server/api/endpoints/reset-password.ts     |   57 +-
 .../src/server/api/endpoints/server-info.ts        |   45 +-
 packages/backend/src/server/api/endpoints/stats.ts |   84 +-
 .../src/server/api/endpoints/sw/register.ts        |   77 +-
 .../src/server/api/endpoints/sw/unregister.ts      |   26 +-
 packages/backend/src/server/api/endpoints/test.ts  |   15 +-
 .../src/server/api/endpoints/username/available.ts |   46 +-
 packages/backend/src/server/api/endpoints/users.ts |   85 +-
 .../src/server/api/endpoints/users/clips.ts        |   38 +-
 .../src/server/api/endpoints/users/followers.ts    |   95 +-
 .../src/server/api/endpoints/users/following.ts    |   95 +-
 .../server/api/endpoints/users/gallery/posts.ts    |   36 +-
 .../users/get-frequently-replied-users.ts          |  133 +-
 .../server/api/endpoints/users/groups/create.ts    |   63 +-
 .../server/api/endpoints/users/groups/delete.ts    |   36 +-
 .../endpoints/users/groups/invitations/accept.ts   |   65 +-
 .../endpoints/users/groups/invitations/reject.ts   |   44 +-
 .../server/api/endpoints/users/groups/invite.ts    |  126 +-
 .../server/api/endpoints/users/groups/joined.ts    |   48 +-
 .../src/server/api/endpoints/users/groups/leave.ts |   45 +-
 .../src/server/api/endpoints/users/groups/owned.ts |   31 +-
 .../src/server/api/endpoints/users/groups/pull.ts  |   61 +-
 .../src/server/api/endpoints/users/groups/show.ts  |   56 +-
 .../server/api/endpoints/users/groups/transfer.ts  |   85 +-
 .../server/api/endpoints/users/groups/update.ts    |   47 +-
 .../src/server/api/endpoints/users/lists/create.ts |   42 +-
 .../src/server/api/endpoints/users/lists/delete.ts |   36 +-
 .../src/server/api/endpoints/users/lists/list.ts   |   31 +-
 .../src/server/api/endpoints/users/lists/pull.ts   |   64 +-
 .../src/server/api/endpoints/users/lists/push.ts   |  103 +-
 .../src/server/api/endpoints/users/lists/show.ts   |   41 +-
 .../src/server/api/endpoints/users/lists/update.ts |   47 +-
 .../src/server/api/endpoints/users/notes.ts        |  144 +-
 .../src/server/api/endpoints/users/pages.ts        |   38 +-
 .../src/server/api/endpoints/users/reactions.ts    |   54 +-
 .../server/api/endpoints/users/recommendation.ts   |   64 +-
 .../src/server/api/endpoints/users/relation.ts     |   27 +-
 .../src/server/api/endpoints/users/report-abuse.ts |  129 +-
 .../endpoints/users/search-by-username-and-host.ts |  168 +-
 .../src/server/api/endpoints/users/search.ts       |  186 +-
 .../backend/src/server/api/endpoints/users/show.ts |  124 +-
 .../src/server/api/endpoints/users/stats.ts        |  187 +-
 packages/backend/src/server/api/error.ts           |   16 +-
 packages/backend/src/server/api/index.ts           |  126 --
 .../server/api/integration/DiscordServerService.ts |  315 +++
 .../server/api/integration/GithubServerService.ts  |  287 +++
 .../server/api/integration/TwitterServerService.ts |  230 +++
 packages/backend/src/server/api/limiter.ts         |   77 -
 packages/backend/src/server/api/logger.ts          |    3 -
 .../backend/src/server/api/openapi/gen-spec.ts     |  190 --
 packages/backend/src/server/api/private/signin.ts  |  250 ---
 .../src/server/api/private/signup-pending.ts       |   35 -
 packages/backend/src/server/api/private/signup.ts  |  112 --
 packages/backend/src/server/api/service/discord.ts |  287 ---
 packages/backend/src/server/api/service/github.ts  |  259 ---
 packages/backend/src/server/api/service/twitter.ts |  201 --
 .../src/server/api/stream/ChannelsService.ts       |   62 +
 packages/backend/src/server/api/stream/channel.ts  |    2 +-
 .../src/server/api/stream/channels/admin.ts        |   20 +-
 .../src/server/api/stream/channels/antenna.ts      |   38 +-
 .../src/server/api/stream/channels/channel.ts      |   50 +-
 .../src/server/api/stream/channels/drive.ts        |   20 +-
 .../server/api/stream/channels/global-timeline.ts  |   47 +-
 .../src/server/api/stream/channels/hashtag.ts      |   38 +-
 .../server/api/stream/channels/home-timeline.ts    |   42 +-
 .../server/api/stream/channels/hybrid-timeline.ts  |   54 +-
 .../src/server/api/stream/channels/index.ts        |   33 -
 .../server/api/stream/channels/local-timeline.ts   |   47 +-
 .../backend/src/server/api/stream/channels/main.ts |   40 +-
 .../server/api/stream/channels/messaging-index.ts  |   20 +-
 .../src/server/api/stream/channels/messaging.ts    |   75 +-
 .../src/server/api/stream/channels/queue-stats.ts  |   20 +-
 .../src/server/api/stream/channels/server-stats.ts |   20 +-
 .../src/server/api/stream/channels/user-list.ts    |   60 +-
 packages/backend/src/server/api/stream/index.ts    |   68 +-
 packages/backend/src/server/api/stream/types.ts    |   35 +-
 packages/backend/src/server/api/streaming.ts       |   67 -
 packages/backend/src/server/assets/bad-egg.png     |  Bin 0 -> 1676 bytes
 .../backend/src/server/assets/cache-expired.png    |  Bin 0 -> 6048 bytes
 packages/backend/src/server/assets/dummy.png       |  Bin 0 -> 6285 bytes
 .../backend/src/server/assets/not-an-image.png     |  Bin 0 -> 2780 bytes
 .../src/server/assets/thumbnail-not-available.png  |  Bin 0 -> 5705 bytes
 packages/backend/src/server/assets/tombstone.png   |  Bin 0 -> 5028 bytes
 .../backend/src/server/file/assets/bad-egg.png     |  Bin 1676 -> 0 bytes
 .../src/server/file/assets/cache-expired.png       |  Bin 6048 -> 0 bytes
 packages/backend/src/server/file/assets/dummy.png  |  Bin 6285 -> 0 bytes
 .../src/server/file/assets/not-an-image.png        |  Bin 2780 -> 0 bytes
 .../server/file/assets/thumbnail-not-available.png |  Bin 5705 -> 0 bytes
 .../backend/src/server/file/assets/tombstone.png   |  Bin 5028 -> 0 bytes
 packages/backend/src/server/file/index.ts          |   40 -
 .../backend/src/server/file/send-drive-file.ts     |  126 --
 packages/backend/src/server/index.ts               |  168 --
 packages/backend/src/server/nodeinfo.ts            |  104 -
 packages/backend/src/server/proxy/index.ts         |   26 -
 packages/backend/src/server/proxy/proxy-media.ts   |   98 -
 .../backend/src/server/web/ClientServerService.ts  |  594 ++++++
 packages/backend/src/server/web/FeedService.ts     |   86 +
 .../backend/src/server/web/UrlPreviewService.ts    |   84 +
 packages/backend/src/server/web/feed.ts            |   58 -
 packages/backend/src/server/web/index.ts           |  521 -----
 packages/backend/src/server/web/manifest.ts        |   18 -
 packages/backend/src/server/web/url-preview.ts     |   65 -
 packages/backend/src/server/well-known.ts          |  151 --
 .../backend/src/services/add-note-to-antenna.ts    |   54 -
 packages/backend/src/services/blocking/create.ts   |  145 --
 packages/backend/src/services/blocking/delete.ts   |   34 -
 .../src/services/chart/charts/active-users.ts      |   44 -
 .../src/services/chart/charts/ap-request.ts        |   38 -
 .../backend/src/services/chart/charts/drive.ts     |   38 -
 .../services/chart/charts/entities/active-users.ts |   17 -
 .../services/chart/charts/entities/ap-request.ts   |   11 -
 .../src/services/chart/charts/entities/drive.ts    |   16 -
 .../services/chart/charts/entities/federation.ts   |   16 -
 .../src/services/chart/charts/entities/hashtag.ts  |   10 -
 .../src/services/chart/charts/entities/instance.ts |   32 -
 .../src/services/chart/charts/entities/notes.ts    |   22 -
 .../chart/charts/entities/per-user-drive.ts        |   14 -
 .../chart/charts/entities/per-user-following.ts    |   20 -
 .../chart/charts/entities/per-user-notes.ts        |   15 -
 .../chart/charts/entities/per-user-reactions.ts    |   10 -
 .../services/chart/charts/entities/test-grouped.ts |   11 -
 .../chart/charts/entities/test-intersection.ts     |   11 -
 .../services/chart/charts/entities/test-unique.ts  |    9 -
 .../src/services/chart/charts/entities/test.ts     |   11 -
 .../src/services/chart/charts/entities/users.ts    |   14 -
 .../src/services/chart/charts/federation.ts        |  103 -
 .../backend/src/services/chart/charts/hashtag.ts   |   29 -
 .../backend/src/services/chart/charts/instance.ts  |  103 -
 .../backend/src/services/chart/charts/notes.ts     |   45 -
 .../src/services/chart/charts/per-user-drive.ts    |   42 -
 .../services/chart/charts/per-user-following.ts    |   56 -
 .../src/services/chart/charts/per-user-notes.ts    |   41 -
 .../services/chart/charts/per-user-reactions.ts    |   30 -
 .../src/services/chart/charts/test-grouped.ts      |   35 -
 .../src/services/chart/charts/test-intersection.ts |   32 -
 .../src/services/chart/charts/test-unique.ts       |   26 -
 packages/backend/src/services/chart/charts/test.ts |   42 -
 .../backend/src/services/chart/charts/users.ts     |   41 -
 packages/backend/src/services/chart/core.ts        |  677 -------
 packages/backend/src/services/chart/entities.ts    |   39 -
 packages/backend/src/services/chart/index.ts       |   51 -
 .../backend/src/services/create-notification.ts    |   62 -
 .../backend/src/services/create-system-user.ts     |   68 -
 packages/backend/src/services/delete-account.ts    |   23 -
 packages/backend/src/services/detect-sensitive.ts  |   48 -
 packages/backend/src/services/drive/add-file.ts    |  540 -----
 packages/backend/src/services/drive/delete-file.ts |  101 -
 .../src/services/drive/generate-video-thumbnail.ts |   29 -
 .../backend/src/services/drive/image-processor.ts  |   87 -
 .../backend/src/services/drive/internal-storage.ts |   34 -
 packages/backend/src/services/drive/logger.ts      |    3 -
 packages/backend/src/services/drive/s3.ts          |   24 -
 .../backend/src/services/drive/upload-from-url.ts  |   68 -
 .../src/services/fetch-instance-metadata.ts        |  268 ---
 packages/backend/src/services/following/create.ts  |  201 --
 packages/backend/src/services/following/delete.ts  |   83 -
 packages/backend/src/services/following/reject.ts  |  122 --
 .../src/services/following/requests/accept-all.ts  |   18 -
 .../src/services/following/requests/accept.ts      |   31 -
 .../src/services/following/requests/cancel.ts      |   36 -
 .../src/services/following/requests/create.ts      |   63 -
 packages/backend/src/services/i/pin.ts             |   92 -
 packages/backend/src/services/i/update.ts          |   19 -
 .../backend/src/services/insert-moderation-log.ts  |   13 -
 packages/backend/src/services/instance-actor.ts    |   28 -
 packages/backend/src/services/logger.ts            |  128 --
 packages/backend/src/services/messages/create.ts   |  108 -
 packages/backend/src/services/messages/delete.ts   |   30 -
 packages/backend/src/services/note/create.ts       |  692 -------
 packages/backend/src/services/note/delete.ts       |  141 --
 packages/backend/src/services/note/polls/update.ts |   21 -
 packages/backend/src/services/note/polls/vote.ts   |   81 -
 .../backend/src/services/note/reaction/create.ts   |  145 --
 .../backend/src/services/note/reaction/delete.ts   |   58 -
 packages/backend/src/services/note/read.ts         |  132 --
 packages/backend/src/services/note/unread.ts       |   55 -
 packages/backend/src/services/note/unwatch.ts      |   10 -
 packages/backend/src/services/note/watch.ts        |   20 -
 packages/backend/src/services/push-notification.ts |   85 -
 .../src/services/register-or-fetch-instance-doc.ts |   31 -
 packages/backend/src/services/relay.ts             |  101 -
 .../src/services/send-email-notification.ts        |   36 -
 packages/backend/src/services/send-email.ts        |  122 --
 packages/backend/src/services/stream.ts            |  116 --
 packages/backend/src/services/suspend-user.ts      |   37 -
 packages/backend/src/services/unsuspend-user.ts    |   38 -
 packages/backend/src/services/update-hashtag.ts    |  128 --
 packages/backend/src/services/user-cache.ts        |   44 -
 packages/backend/src/services/user-list/push.ts    |   27 -
 .../src/services/validate-email-for-account.ts     |   37 -
 packages/backend/test/.eslintrc.cjs                |    2 +-
 packages/backend/test/_e2e/api-visibility.ts       |  477 +++++
 packages/backend/test/_e2e/api.ts                  |   83 +
 packages/backend/test/_e2e/block.ts                |   85 +
 packages/backend/test/_e2e/endpoints.ts            |  881 ++++++++
 packages/backend/test/_e2e/fetch-resource.ts       |  205 ++
 packages/backend/test/_e2e/ff-visibility.ts        |  167 ++
 packages/backend/test/_e2e/mute.ts                 |  123 ++
 packages/backend/test/_e2e/note.ts                 |  370 ++++
 packages/backend/test/_e2e/streaming.ts            |  545 +++++
 packages/backend/test/_e2e/thread-mute.ts          |  103 +
 packages/backend/test/_e2e/user-notes.ts           |   61 +
 packages/backend/test/activitypub.ts               |   96 -
 packages/backend/test/ap-request.ts                |   55 -
 packages/backend/test/api-visibility.ts            |  476 -----
 packages/backend/test/api.ts                       |   83 -
 packages/backend/test/block.ts                     |   85 -
 packages/backend/test/chart.ts                     |  531 -----
 packages/backend/test/endpoints.ts                 |  865 --------
 packages/backend/test/extract-mentions.ts          |   42 -
 packages/backend/test/fetch-resource.ts            |  205 --
 packages/backend/test/ff-visibility.ts             |  167 --
 packages/backend/test/get-file-info.ts             |  191 --
 packages/backend/test/mfm.ts                       |   89 -
 packages/backend/test/mute.ts                      |  123 --
 packages/backend/test/note.ts                      |  370 ----
 packages/backend/test/prelude/maybe.ts             |    2 +-
 packages/backend/test/prelude/url.ts               |    2 +-
 packages/backend/test/reaction-lib.ts              |   83 -
 packages/backend/test/streaming.ts                 |  545 -----
 packages/backend/test/tests/activitypub.ts         |   89 +
 packages/backend/test/tests/ap-request.ts          |   55 +
 packages/backend/test/tests/extract-mentions.ts    |   42 +
 packages/backend/test/tests/mfm.ts                 |   89 +
 packages/backend/test/tests/reaction-lib.ts        |   83 +
 packages/backend/test/thread-mute.ts               |  103 -
 packages/backend/test/tsconfig.json                |    3 +-
 packages/backend/test/unit/FileInfoService.ts      |  237 +++
 packages/backend/test/unit/RelayService.ts         |   96 +
 packages/backend/test/unit/chart.ts                |  574 ++++++
 packages/backend/test/user-notes.ts                |   61 -
 packages/backend/test/utils.ts                     |   94 +-
 packages/backend/yarn.lock                         | 2094 +++++++++++++++++---
 packages/client/.eslintrc.js                       |    3 +
 packages/client/src/scripts/aiscript/api.ts        |    2 +-
 packages/client/src/scripts/hpml/type-checker.ts   |   12 +-
 packages/shared/.eslintrc.js                       |    5 +
 packages/sw/src/types.ts                           |    2 +-
 1091 files changed, 52548 insertions(+), 40168 deletions(-)
 delete mode 100644 packages/backend/.mocharc.json
 create mode 100644 packages/backend/jest-resolver.cjs
 create mode 100644 packages/backend/jest.config.cjs
 create mode 100644 packages/backend/src/AppModule.ts
 create mode 100644 packages/backend/src/GlobalModule.ts
 create mode 100644 packages/backend/src/RepositoryModule.ts
 create mode 100644 packages/backend/src/config.ts
 delete mode 100644 packages/backend/src/config/index.ts
 delete mode 100644 packages/backend/src/config/load.ts
 delete mode 100644 packages/backend/src/config/types.ts
 create mode 100644 packages/backend/src/core/AccountUpdateService.ts
 create mode 100644 packages/backend/src/core/AiService.ts
 create mode 100644 packages/backend/src/core/AntennaService.ts
 create mode 100644 packages/backend/src/core/AppLockService.ts
 create mode 100644 packages/backend/src/core/CaptchaService.ts
 create mode 100644 packages/backend/src/core/CoreModule.ts
 create mode 100644 packages/backend/src/core/CreateNotificationService.ts
 create mode 100644 packages/backend/src/core/CreateSystemUserService.ts
 create mode 100644 packages/backend/src/core/CustomEmojiService.ts
 create mode 100644 packages/backend/src/core/DeleteAccountService.ts
 create mode 100644 packages/backend/src/core/DownloadService.ts
 create mode 100644 packages/backend/src/core/DriveService.ts
 create mode 100644 packages/backend/src/core/EmailService.ts
 create mode 100644 packages/backend/src/core/FederatedInstanceService.ts
 create mode 100644 packages/backend/src/core/FetchInstanceMetadataService.ts
 create mode 100644 packages/backend/src/core/FileInfoService.ts
 create mode 100644 packages/backend/src/core/GlobalEventService.ts
 create mode 100644 packages/backend/src/core/HashtagService.ts
 create mode 100644 packages/backend/src/core/HttpRequestService.ts
 create mode 100644 packages/backend/src/core/IdService.ts
 create mode 100644 packages/backend/src/core/ImageProcessingService.ts
 create mode 100644 packages/backend/src/core/InstanceActorService.ts
 create mode 100644 packages/backend/src/core/InternalStorageService.ts
 create mode 100644 packages/backend/src/core/MessagingService.ts
 create mode 100644 packages/backend/src/core/MetaService.ts
 create mode 100644 packages/backend/src/core/MfmService.ts
 create mode 100644 packages/backend/src/core/ModerationLogService.ts
 create mode 100644 packages/backend/src/core/NoteCreateService.ts
 create mode 100644 packages/backend/src/core/NoteDeleteService.ts
 create mode 100644 packages/backend/src/core/NotePiningService.ts
 create mode 100644 packages/backend/src/core/NoteReadService.ts
 create mode 100644 packages/backend/src/core/NotificationService.ts
 create mode 100644 packages/backend/src/core/PollService.ts
 create mode 100644 packages/backend/src/core/ProxyAccountService.ts
 create mode 100644 packages/backend/src/core/PushNotificationService.ts
 create mode 100644 packages/backend/src/core/QueryService.ts
 create mode 100644 packages/backend/src/core/QueueService.ts
 create mode 100644 packages/backend/src/core/ReactionService.ts
 create mode 100644 packages/backend/src/core/RelayService.ts
 create mode 100644 packages/backend/src/core/S3Service.ts
 create mode 100644 packages/backend/src/core/SignupService.ts
 create mode 100644 packages/backend/src/core/TwoFactorAuthenticationService.ts
 create mode 100644 packages/backend/src/core/UserBlockingService.ts
 create mode 100644 packages/backend/src/core/UserCacheService.ts
 create mode 100644 packages/backend/src/core/UserFollowingService.ts
 create mode 100644 packages/backend/src/core/UserKeypairStoreService.ts
 create mode 100644 packages/backend/src/core/UserListService.ts
 create mode 100644 packages/backend/src/core/UserMutingService.ts
 create mode 100644 packages/backend/src/core/UserSuspendService.ts
 create mode 100644 packages/backend/src/core/UtilityService.ts
 create mode 100644 packages/backend/src/core/VideoProcessingService.ts
 create mode 100644 packages/backend/src/core/WebhookService.ts
 create mode 100644 packages/backend/src/core/chart/ChartManagementService.ts
 create mode 100644 packages/backend/src/core/chart/charts/active-users.ts
 create mode 100644 packages/backend/src/core/chart/charts/ap-request.ts
 create mode 100644 packages/backend/src/core/chart/charts/drive.ts
 create mode 100644 packages/backend/src/core/chart/charts/entities/active-users.ts
 create mode 100644 packages/backend/src/core/chart/charts/entities/ap-request.ts
 create mode 100644 packages/backend/src/core/chart/charts/entities/drive.ts
 create mode 100644 packages/backend/src/core/chart/charts/entities/federation.ts
 create mode 100644 packages/backend/src/core/chart/charts/entities/hashtag.ts
 create mode 100644 packages/backend/src/core/chart/charts/entities/instance.ts
 create mode 100644 packages/backend/src/core/chart/charts/entities/notes.ts
 create mode 100644 packages/backend/src/core/chart/charts/entities/per-user-drive.ts
 create mode 100644 packages/backend/src/core/chart/charts/entities/per-user-following.ts
 create mode 100644 packages/backend/src/core/chart/charts/entities/per-user-notes.ts
 create mode 100644 packages/backend/src/core/chart/charts/entities/per-user-reactions.ts
 create mode 100644 packages/backend/src/core/chart/charts/entities/test-grouped.ts
 create mode 100644 packages/backend/src/core/chart/charts/entities/test-intersection.ts
 create mode 100644 packages/backend/src/core/chart/charts/entities/test-unique.ts
 create mode 100644 packages/backend/src/core/chart/charts/entities/test.ts
 create mode 100644 packages/backend/src/core/chart/charts/entities/users.ts
 create mode 100644 packages/backend/src/core/chart/charts/federation.ts
 create mode 100644 packages/backend/src/core/chart/charts/hashtag.ts
 create mode 100644 packages/backend/src/core/chart/charts/instance.ts
 create mode 100644 packages/backend/src/core/chart/charts/notes.ts
 create mode 100644 packages/backend/src/core/chart/charts/per-user-drive.ts
 create mode 100644 packages/backend/src/core/chart/charts/per-user-following.ts
 create mode 100644 packages/backend/src/core/chart/charts/per-user-notes.ts
 create mode 100644 packages/backend/src/core/chart/charts/per-user-reactions.ts
 create mode 100644 packages/backend/src/core/chart/charts/test-grouped.ts
 create mode 100644 packages/backend/src/core/chart/charts/test-intersection.ts
 create mode 100644 packages/backend/src/core/chart/charts/test-unique.ts
 create mode 100644 packages/backend/src/core/chart/charts/test.ts
 create mode 100644 packages/backend/src/core/chart/charts/users.ts
 create mode 100644 packages/backend/src/core/chart/core.ts
 create mode 100644 packages/backend/src/core/chart/entities.ts
 create mode 100644 packages/backend/src/core/entities/AbuseUserReportEntityService.ts
 create mode 100644 packages/backend/src/core/entities/AntennaEntityService.ts
 create mode 100644 packages/backend/src/core/entities/AppEntityService.ts
 create mode 100644 packages/backend/src/core/entities/AuthSessionEntityService.ts
 create mode 100644 packages/backend/src/core/entities/BlockingEntityService.ts
 create mode 100644 packages/backend/src/core/entities/ChannelEntityService.ts
 create mode 100644 packages/backend/src/core/entities/ClipEntityService.ts
 create mode 100644 packages/backend/src/core/entities/DriveFileEntityService.ts
 create mode 100644 packages/backend/src/core/entities/DriveFolderEntityService.ts
 create mode 100644 packages/backend/src/core/entities/EmojiEntityService.ts
 create mode 100644 packages/backend/src/core/entities/FollowRequestEntityService.ts
 create mode 100644 packages/backend/src/core/entities/FollowingEntityService.ts
 create mode 100644 packages/backend/src/core/entities/GalleryLikeEntityService.ts
 create mode 100644 packages/backend/src/core/entities/GalleryPostEntityService.ts
 create mode 100644 packages/backend/src/core/entities/HashtagEntityService.ts
 create mode 100644 packages/backend/src/core/entities/InstanceEntityService.ts
 create mode 100644 packages/backend/src/core/entities/MessagingMessageEntityService.ts
 create mode 100644 packages/backend/src/core/entities/ModerationLogEntityService.ts
 create mode 100644 packages/backend/src/core/entities/MutingEntityService.ts
 create mode 100644 packages/backend/src/core/entities/NoteEntityService.ts
 create mode 100644 packages/backend/src/core/entities/NoteFavoriteEntityService.ts
 create mode 100644 packages/backend/src/core/entities/NoteReactionEntityService.ts
 create mode 100644 packages/backend/src/core/entities/NotificationEntityService.ts
 create mode 100644 packages/backend/src/core/entities/PageEntityService.ts
 create mode 100644 packages/backend/src/core/entities/PageLikeEntityService.ts
 create mode 100644 packages/backend/src/core/entities/SigninEntityService.ts
 create mode 100644 packages/backend/src/core/entities/UserEntityService.ts
 create mode 100644 packages/backend/src/core/entities/UserGroupEntityService.ts
 create mode 100644 packages/backend/src/core/entities/UserGroupInvitationEntityService.ts
 create mode 100644 packages/backend/src/core/entities/UserListEntityService.ts
 create mode 100644 packages/backend/src/core/queue/QueueModule.ts
 create mode 100644 packages/backend/src/core/remote/RemoteLoggerService.ts
 create mode 100644 packages/backend/src/core/remote/ResolveUserService.ts
 create mode 100644 packages/backend/src/core/remote/WebfingerService.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/ApAudienceService.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/ApDbResolverService.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/ApDeliverManagerService.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/ApInboxService.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/ApLoggerService.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/ApMfmService.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/ApRendererService.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/ApRequestService.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/ApResolverService.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/LdSignatureService.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/misc/contexts.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/misc/get-note-html.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/models/ApImageService.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/models/ApMentionService.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/models/ApNoteService.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/models/ApPersonService.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/models/ApQuestionService.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/models/icon.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/models/identifier.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/models/tag.ts
 create mode 100644 packages/backend/src/core/remote/activitypub/type.ts
 create mode 100644 packages/backend/src/daemons/DaemonModule.ts
 create mode 100644 packages/backend/src/daemons/JanitorService.ts
 create mode 100644 packages/backend/src/daemons/QueueStatsService.ts
 create mode 100644 packages/backend/src/daemons/ServerStatsService.ts
 delete mode 100644 packages/backend/src/daemons/janitor.ts
 delete mode 100644 packages/backend/src/daemons/queue-stats.ts
 delete mode 100644 packages/backend/src/daemons/server-stats.ts
 delete mode 100644 packages/backend/src/db/elasticsearch.ts
 delete mode 100644 packages/backend/src/db/logger.ts
 delete mode 100644 packages/backend/src/db/postgre.ts
 delete mode 100644 packages/backend/src/db/redis.ts
 create mode 100644 packages/backend/src/di-symbols.ts
 create mode 100644 packages/backend/src/logger.ts
 delete mode 100644 packages/backend/src/mfm/from-html.ts
 delete mode 100644 packages/backend/src/mfm/to-html.ts
 delete mode 100644 packages/backend/src/misc/antenna-cache.ts
 delete mode 100644 packages/backend/src/misc/app-lock.ts
 delete mode 100644 packages/backend/src/misc/captcha.ts
 delete mode 100644 packages/backend/src/misc/check-hit-antenna.ts
 delete mode 100644 packages/backend/src/misc/convert-host.ts
 delete mode 100644 packages/backend/src/misc/count-same-renotes.ts
 delete mode 100644 packages/backend/src/misc/detect-url-mime.ts
 delete mode 100644 packages/backend/src/misc/download-text-file.ts
 delete mode 100644 packages/backend/src/misc/download-url.ts
 delete mode 100644 packages/backend/src/misc/fetch-meta.ts
 delete mode 100644 packages/backend/src/misc/fetch-proxy-account.ts
 delete mode 100644 packages/backend/src/misc/fetch.ts
 delete mode 100644 packages/backend/src/misc/gen-id.ts
 create mode 100644 packages/backend/src/misc/generate-native-user-token.ts
 delete mode 100644 packages/backend/src/misc/get-file-info.ts
 create mode 100644 packages/backend/src/misc/is-native-token.ts
 delete mode 100644 packages/backend/src/misc/keypair-store.ts
 delete mode 100644 packages/backend/src/misc/populate-emojis.ts
 create mode 100644 packages/backend/src/misc/prelude/README.md
 create mode 100644 packages/backend/src/misc/prelude/array.ts
 create mode 100644 packages/backend/src/misc/prelude/await-all.ts
 create mode 100644 packages/backend/src/misc/prelude/math.ts
 create mode 100644 packages/backend/src/misc/prelude/maybe.ts
 create mode 100644 packages/backend/src/misc/prelude/relation.ts
 create mode 100644 packages/backend/src/misc/prelude/string.ts
 create mode 100644 packages/backend/src/misc/prelude/symbol.ts
 create mode 100644 packages/backend/src/misc/prelude/time.ts
 create mode 100644 packages/backend/src/misc/prelude/url.ts
 create mode 100644 packages/backend/src/misc/prelude/xml.ts
 delete mode 100644 packages/backend/src/misc/reaction-lib.ts
 create mode 100644 packages/backend/src/misc/reset-db.ts
 create mode 100644 packages/backend/src/misc/status-error.ts
 delete mode 100644 packages/backend/src/misc/webhook-cache.ts
 create mode 100644 packages/backend/src/models/entities/AbuseUserReport.ts
 create mode 100644 packages/backend/src/models/entities/AccessToken.ts
 create mode 100644 packages/backend/src/models/entities/Ad.ts
 create mode 100644 packages/backend/src/models/entities/Announcement.ts
 create mode 100644 packages/backend/src/models/entities/AnnouncementRead.ts
 create mode 100644 packages/backend/src/models/entities/Antenna.ts
 create mode 100644 packages/backend/src/models/entities/AntennaNote.ts
 create mode 100644 packages/backend/src/models/entities/App.ts
 create mode 100644 packages/backend/src/models/entities/AttestationChallenge.ts
 create mode 100644 packages/backend/src/models/entities/AuthSession.ts
 create mode 100644 packages/backend/src/models/entities/Blocking.ts
 create mode 100644 packages/backend/src/models/entities/Channel.ts
 create mode 100644 packages/backend/src/models/entities/ChannelFollowing.ts
 create mode 100644 packages/backend/src/models/entities/ChannelNotePining.ts
 create mode 100644 packages/backend/src/models/entities/Clip.ts
 create mode 100644 packages/backend/src/models/entities/ClipNote.ts
 create mode 100644 packages/backend/src/models/entities/DriveFile.ts
 create mode 100644 packages/backend/src/models/entities/DriveFolder.ts
 create mode 100644 packages/backend/src/models/entities/Emoji.ts
 create mode 100644 packages/backend/src/models/entities/FollowRequest.ts
 create mode 100644 packages/backend/src/models/entities/Following.ts
 create mode 100644 packages/backend/src/models/entities/GalleryLike.ts
 create mode 100644 packages/backend/src/models/entities/GalleryPost.ts
 create mode 100644 packages/backend/src/models/entities/Hashtag.ts
 create mode 100644 packages/backend/src/models/entities/Instance.ts
 create mode 100644 packages/backend/src/models/entities/MessagingMessage.ts
 create mode 100644 packages/backend/src/models/entities/Meta.ts
 create mode 100644 packages/backend/src/models/entities/ModerationLog.ts
 create mode 100644 packages/backend/src/models/entities/MutedNote.ts
 create mode 100644 packages/backend/src/models/entities/Muting.ts
 create mode 100644 packages/backend/src/models/entities/Note.ts
 create mode 100644 packages/backend/src/models/entities/NoteFavorite.ts
 create mode 100644 packages/backend/src/models/entities/NoteReaction.ts
 create mode 100644 packages/backend/src/models/entities/NoteThreadMuting.ts
 create mode 100644 packages/backend/src/models/entities/NoteUnread.ts
 create mode 100644 packages/backend/src/models/entities/Notification.ts
 create mode 100644 packages/backend/src/models/entities/Page.ts
 create mode 100644 packages/backend/src/models/entities/PageLike.ts
 create mode 100644 packages/backend/src/models/entities/PasswordResetRequest.ts
 create mode 100644 packages/backend/src/models/entities/Poll.ts
 create mode 100644 packages/backend/src/models/entities/PollVote.ts
 create mode 100644 packages/backend/src/models/entities/PromoNote.ts
 create mode 100644 packages/backend/src/models/entities/PromoRead.ts
 create mode 100644 packages/backend/src/models/entities/RegistrationTickets.ts
 create mode 100644 packages/backend/src/models/entities/RegistryItem.ts
 create mode 100644 packages/backend/src/models/entities/Relay.ts
 create mode 100644 packages/backend/src/models/entities/Signin.ts
 create mode 100644 packages/backend/src/models/entities/SwSubscription.ts
 create mode 100644 packages/backend/src/models/entities/UsedUsername.ts
 create mode 100644 packages/backend/src/models/entities/User.ts
 create mode 100644 packages/backend/src/models/entities/UserGroup.ts
 create mode 100644 packages/backend/src/models/entities/UserGroupInvitation.ts
 create mode 100644 packages/backend/src/models/entities/UserGroupJoining.ts
 create mode 100644 packages/backend/src/models/entities/UserIp.ts
 create mode 100644 packages/backend/src/models/entities/UserKeypair.ts
 create mode 100644 packages/backend/src/models/entities/UserList.ts
 create mode 100644 packages/backend/src/models/entities/UserListJoining.ts
 create mode 100644 packages/backend/src/models/entities/UserNotePining.ts
 create mode 100644 packages/backend/src/models/entities/UserPending.ts
 create mode 100644 packages/backend/src/models/entities/UserProfile.ts
 create mode 100644 packages/backend/src/models/entities/UserPublickey.ts
 create mode 100644 packages/backend/src/models/entities/UserSecurityKey.ts
 create mode 100644 packages/backend/src/models/entities/Webhook.ts
 delete mode 100644 packages/backend/src/models/entities/abuse-user-report.ts
 delete mode 100644 packages/backend/src/models/entities/access-token.ts
 delete mode 100644 packages/backend/src/models/entities/ad.ts
 delete mode 100644 packages/backend/src/models/entities/announcement-read.ts
 delete mode 100644 packages/backend/src/models/entities/announcement.ts
 delete mode 100644 packages/backend/src/models/entities/antenna-note.ts
 delete mode 100644 packages/backend/src/models/entities/antenna.ts
 delete mode 100644 packages/backend/src/models/entities/app.ts
 delete mode 100644 packages/backend/src/models/entities/attestation-challenge.ts
 delete mode 100644 packages/backend/src/models/entities/auth-session.ts
 delete mode 100644 packages/backend/src/models/entities/blocking.ts
 delete mode 100644 packages/backend/src/models/entities/channel-following.ts
 delete mode 100644 packages/backend/src/models/entities/channel-note-pining.ts
 delete mode 100644 packages/backend/src/models/entities/channel.ts
 delete mode 100644 packages/backend/src/models/entities/clip-note.ts
 delete mode 100644 packages/backend/src/models/entities/clip.ts
 delete mode 100644 packages/backend/src/models/entities/drive-file.ts
 delete mode 100644 packages/backend/src/models/entities/drive-folder.ts
 delete mode 100644 packages/backend/src/models/entities/emoji.ts
 delete mode 100644 packages/backend/src/models/entities/follow-request.ts
 delete mode 100644 packages/backend/src/models/entities/following.ts
 delete mode 100644 packages/backend/src/models/entities/gallery-like.ts
 delete mode 100644 packages/backend/src/models/entities/gallery-post.ts
 delete mode 100644 packages/backend/src/models/entities/hashtag.ts
 delete mode 100644 packages/backend/src/models/entities/instance.ts
 delete mode 100644 packages/backend/src/models/entities/messaging-message.ts
 delete mode 100644 packages/backend/src/models/entities/meta.ts
 delete mode 100644 packages/backend/src/models/entities/moderation-log.ts
 delete mode 100644 packages/backend/src/models/entities/muted-note.ts
 delete mode 100644 packages/backend/src/models/entities/muting.ts
 delete mode 100644 packages/backend/src/models/entities/note-favorite.ts
 delete mode 100644 packages/backend/src/models/entities/note-reaction.ts
 delete mode 100644 packages/backend/src/models/entities/note-thread-muting.ts
 delete mode 100644 packages/backend/src/models/entities/note-unread.ts
 delete mode 100644 packages/backend/src/models/entities/note-watching.ts
 delete mode 100644 packages/backend/src/models/entities/note.ts
 delete mode 100644 packages/backend/src/models/entities/notification.ts
 delete mode 100644 packages/backend/src/models/entities/page-like.ts
 delete mode 100644 packages/backend/src/models/entities/page.ts
 delete mode 100644 packages/backend/src/models/entities/password-reset-request.ts
 delete mode 100644 packages/backend/src/models/entities/poll-vote.ts
 delete mode 100644 packages/backend/src/models/entities/poll.ts
 delete mode 100644 packages/backend/src/models/entities/promo-note.ts
 delete mode 100644 packages/backend/src/models/entities/promo-read.ts
 delete mode 100644 packages/backend/src/models/entities/registration-tickets.ts
 delete mode 100644 packages/backend/src/models/entities/registry-item.ts
 delete mode 100644 packages/backend/src/models/entities/relay.ts
 delete mode 100644 packages/backend/src/models/entities/signin.ts
 delete mode 100644 packages/backend/src/models/entities/sw-subscription.ts
 delete mode 100644 packages/backend/src/models/entities/used-username.ts
 delete mode 100644 packages/backend/src/models/entities/user-group-invitation.ts
 delete mode 100644 packages/backend/src/models/entities/user-group-joining.ts
 delete mode 100644 packages/backend/src/models/entities/user-group.ts
 delete mode 100644 packages/backend/src/models/entities/user-ip.ts
 delete mode 100644 packages/backend/src/models/entities/user-keypair.ts
 delete mode 100644 packages/backend/src/models/entities/user-list-joining.ts
 delete mode 100644 packages/backend/src/models/entities/user-list.ts
 delete mode 100644 packages/backend/src/models/entities/user-note-pining.ts
 delete mode 100644 packages/backend/src/models/entities/user-pending.ts
 delete mode 100644 packages/backend/src/models/entities/user-profile.ts
 delete mode 100644 packages/backend/src/models/entities/user-publickey.ts
 delete mode 100644 packages/backend/src/models/entities/user-security-key.ts
 delete mode 100644 packages/backend/src/models/entities/user.ts
 delete mode 100644 packages/backend/src/models/entities/webhook.ts
 delete mode 100644 packages/backend/src/models/repositories/abuse-user-report.ts
 delete mode 100644 packages/backend/src/models/repositories/antenna.ts
 delete mode 100644 packages/backend/src/models/repositories/app.ts
 delete mode 100644 packages/backend/src/models/repositories/auth-session.ts
 delete mode 100644 packages/backend/src/models/repositories/blocking.ts
 delete mode 100644 packages/backend/src/models/repositories/channel.ts
 delete mode 100644 packages/backend/src/models/repositories/clip.ts
 delete mode 100644 packages/backend/src/models/repositories/drive-file.ts
 delete mode 100644 packages/backend/src/models/repositories/drive-folder.ts
 delete mode 100644 packages/backend/src/models/repositories/emoji.ts
 delete mode 100644 packages/backend/src/models/repositories/follow-request.ts
 delete mode 100644 packages/backend/src/models/repositories/following.ts
 delete mode 100644 packages/backend/src/models/repositories/gallery-like.ts
 delete mode 100644 packages/backend/src/models/repositories/gallery-post.ts
 delete mode 100644 packages/backend/src/models/repositories/hashtag.ts
 delete mode 100644 packages/backend/src/models/repositories/instance.ts
 delete mode 100644 packages/backend/src/models/repositories/messaging-message.ts
 delete mode 100644 packages/backend/src/models/repositories/moderation-logs.ts
 delete mode 100644 packages/backend/src/models/repositories/muting.ts
 delete mode 100644 packages/backend/src/models/repositories/note-favorite.ts
 delete mode 100644 packages/backend/src/models/repositories/note-reaction.ts
 delete mode 100644 packages/backend/src/models/repositories/note.ts
 delete mode 100644 packages/backend/src/models/repositories/notification.ts
 delete mode 100644 packages/backend/src/models/repositories/page-like.ts
 delete mode 100644 packages/backend/src/models/repositories/page.ts
 delete mode 100644 packages/backend/src/models/repositories/relay.ts
 delete mode 100644 packages/backend/src/models/repositories/signin.ts
 delete mode 100644 packages/backend/src/models/repositories/user-group-invitation.ts
 delete mode 100644 packages/backend/src/models/repositories/user-group.ts
 delete mode 100644 packages/backend/src/models/repositories/user-list.ts
 delete mode 100644 packages/backend/src/models/repositories/user.ts
 create mode 100644 packages/backend/src/postgre.ts
 delete mode 100644 packages/backend/src/prelude/README.md
 delete mode 100644 packages/backend/src/prelude/array.ts
 delete mode 100644 packages/backend/src/prelude/await-all.ts
 delete mode 100644 packages/backend/src/prelude/math.ts
 delete mode 100644 packages/backend/src/prelude/maybe.ts
 delete mode 100644 packages/backend/src/prelude/relation.ts
 delete mode 100644 packages/backend/src/prelude/string.ts
 delete mode 100644 packages/backend/src/prelude/symbol.ts
 delete mode 100644 packages/backend/src/prelude/time.ts
 delete mode 100644 packages/backend/src/prelude/url.ts
 delete mode 100644 packages/backend/src/prelude/xml.ts
 create mode 100644 packages/backend/src/queue/DbQueueProcessorsService.ts
 create mode 100644 packages/backend/src/queue/ObjectStorageQueueProcessorsService.ts
 create mode 100644 packages/backend/src/queue/QueueLoggerService.ts
 create mode 100644 packages/backend/src/queue/QueueProcessorModule.ts
 create mode 100644 packages/backend/src/queue/QueueProcessorService.ts
 create mode 100644 packages/backend/src/queue/SystemQueueProcessorsService.ts
 delete mode 100644 packages/backend/src/queue/index.ts
 delete mode 100644 packages/backend/src/queue/initialize.ts
 delete mode 100644 packages/backend/src/queue/logger.ts
 create mode 100644 packages/backend/src/queue/processors/CheckExpiredMutingsProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/CleanChartsProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/CleanProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/CleanRemoteFilesProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/DeleteAccountProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/DeleteDriveFilesProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/DeleteFileProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/DeliverProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/EndedPollNotificationProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/ExportBlockingProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/ExportCustomEmojisProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/ExportFollowingProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/ExportMutingProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/ExportNotesProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/ExportUserListsProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/ImportBlockingProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/ImportCustomEmojisProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/ImportFollowingProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/ImportMutingProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/ImportUserListsProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/InboxProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/ResyncChartsProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/TickChartsProcessorService.ts
 create mode 100644 packages/backend/src/queue/processors/WebhookDeliverProcessorService.ts
 delete mode 100644 packages/backend/src/queue/processors/db/delete-account.ts
 delete mode 100644 packages/backend/src/queue/processors/db/delete-drive-files.ts
 delete mode 100644 packages/backend/src/queue/processors/db/export-blocking.ts
 delete mode 100644 packages/backend/src/queue/processors/db/export-custom-emojis.ts
 delete mode 100644 packages/backend/src/queue/processors/db/export-following.ts
 delete mode 100644 packages/backend/src/queue/processors/db/export-mute.ts
 delete mode 100644 packages/backend/src/queue/processors/db/export-notes.ts
 delete mode 100644 packages/backend/src/queue/processors/db/export-user-lists.ts
 delete mode 100644 packages/backend/src/queue/processors/db/import-blocking.ts
 delete mode 100644 packages/backend/src/queue/processors/db/import-custom-emojis.ts
 delete mode 100644 packages/backend/src/queue/processors/db/import-following.ts
 delete mode 100644 packages/backend/src/queue/processors/db/import-muting.ts
 delete mode 100644 packages/backend/src/queue/processors/db/import-user-lists.ts
 delete mode 100644 packages/backend/src/queue/processors/db/index.ts
 delete mode 100644 packages/backend/src/queue/processors/deliver.ts
 delete mode 100644 packages/backend/src/queue/processors/ended-poll-notification.ts
 delete mode 100644 packages/backend/src/queue/processors/inbox.ts
 delete mode 100644 packages/backend/src/queue/processors/object-storage/clean-remote-files.ts
 delete mode 100644 packages/backend/src/queue/processors/object-storage/delete-file.ts
 delete mode 100644 packages/backend/src/queue/processors/object-storage/index.ts
 delete mode 100644 packages/backend/src/queue/processors/system/check-expired-mutings.ts
 delete mode 100644 packages/backend/src/queue/processors/system/clean-charts.ts
 delete mode 100644 packages/backend/src/queue/processors/system/clean.ts
 delete mode 100644 packages/backend/src/queue/processors/system/index.ts
 delete mode 100644 packages/backend/src/queue/processors/system/resync-charts.ts
 delete mode 100644 packages/backend/src/queue/processors/system/tick-charts.ts
 delete mode 100644 packages/backend/src/queue/processors/webhook-deliver.ts
 delete mode 100644 packages/backend/src/queue/queues.ts
 create mode 100644 packages/backend/src/redis.ts
 delete mode 100644 packages/backend/src/remote/activitypub/ap-request.ts
 delete mode 100644 packages/backend/src/remote/activitypub/audience.ts
 delete mode 100644 packages/backend/src/remote/activitypub/db-resolver.ts
 delete mode 100644 packages/backend/src/remote/activitypub/deliver-manager.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/accept/follow.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/accept/index.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/add/index.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/announce/index.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/announce/note.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/block/index.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/create/index.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/create/note.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/delete/actor.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/delete/index.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/delete/note.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/flag/index.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/follow.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/index.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/like.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/read.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/reject/follow.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/reject/index.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/remove/index.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/undo/accept.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/undo/announce.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/undo/block.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/undo/follow.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/undo/index.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/undo/like.ts
 delete mode 100644 packages/backend/src/remote/activitypub/kernel/update/index.ts
 delete mode 100644 packages/backend/src/remote/activitypub/logger.ts
 delete mode 100644 packages/backend/src/remote/activitypub/misc/contexts.ts
 delete mode 100644 packages/backend/src/remote/activitypub/misc/get-note-html.ts
 delete mode 100644 packages/backend/src/remote/activitypub/misc/html-to-mfm.ts
 delete mode 100644 packages/backend/src/remote/activitypub/misc/ld-signature.ts
 delete mode 100644 packages/backend/src/remote/activitypub/models/icon.ts
 delete mode 100644 packages/backend/src/remote/activitypub/models/identifier.ts
 delete mode 100644 packages/backend/src/remote/activitypub/models/image.ts
 delete mode 100644 packages/backend/src/remote/activitypub/models/mention.ts
 delete mode 100644 packages/backend/src/remote/activitypub/models/note.ts
 delete mode 100644 packages/backend/src/remote/activitypub/models/person.ts
 delete mode 100644 packages/backend/src/remote/activitypub/models/question.ts
 delete mode 100644 packages/backend/src/remote/activitypub/models/tag.ts
 delete mode 100644 packages/backend/src/remote/activitypub/perform.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/accept.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/add.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/announce.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/block.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/create.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/delete.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/document.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/emoji.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/flag.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/follow-relay.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/follow-user.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/follow.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/hashtag.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/image.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/index.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/key.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/like.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/mention.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/note.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/ordered-collection-page.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/ordered-collection.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/person.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/question.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/read.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/reject.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/remove.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/tombstone.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/undo.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/update.ts
 delete mode 100644 packages/backend/src/remote/activitypub/renderer/vote.ts
 delete mode 100644 packages/backend/src/remote/activitypub/request.ts
 delete mode 100644 packages/backend/src/remote/activitypub/resolver.ts
 delete mode 100644 packages/backend/src/remote/activitypub/type.ts
 delete mode 100644 packages/backend/src/remote/logger.ts
 delete mode 100644 packages/backend/src/remote/resolve-user.ts
 delete mode 100644 packages/backend/src/remote/webfinger.ts
 create mode 100644 packages/backend/src/server/ActivityPubServerService.ts
 create mode 100644 packages/backend/src/server/FileServerService.ts
 create mode 100644 packages/backend/src/server/MediaProxyServerService.ts
 create mode 100644 packages/backend/src/server/NodeinfoServerService.ts
 create mode 100644 packages/backend/src/server/ServerModule.ts
 create mode 100644 packages/backend/src/server/ServerService.ts
 create mode 100644 packages/backend/src/server/WellKnownServerService.ts
 delete mode 100644 packages/backend/src/server/activitypub.ts
 delete mode 100644 packages/backend/src/server/activitypub/featured.ts
 delete mode 100644 packages/backend/src/server/activitypub/followers.ts
 delete mode 100644 packages/backend/src/server/activitypub/following.ts
 delete mode 100644 packages/backend/src/server/activitypub/outbox.ts
 delete mode 100644 packages/backend/src/server/api/2fa.ts
 create mode 100644 packages/backend/src/server/api/ApiCallService.ts
 create mode 100644 packages/backend/src/server/api/ApiLoggerService.ts
 create mode 100644 packages/backend/src/server/api/ApiServerService.ts
 create mode 100644 packages/backend/src/server/api/AuthenticateService.ts
 create mode 100644 packages/backend/src/server/api/EndpointsModule.ts
 create mode 100644 packages/backend/src/server/api/RateLimiterService.ts
 create mode 100644 packages/backend/src/server/api/SigninApiService.ts
 create mode 100644 packages/backend/src/server/api/SigninService.ts
 create mode 100644 packages/backend/src/server/api/SignupApiService.ts
 create mode 100644 packages/backend/src/server/api/StreamingApiServerService.ts
 delete mode 100644 packages/backend/src/server/api/api-handler.ts
 delete mode 100644 packages/backend/src/server/api/authenticate.ts
 delete mode 100644 packages/backend/src/server/api/call.ts
 create mode 100644 packages/backend/src/server/api/common/GetterService.ts
 delete mode 100644 packages/backend/src/server/api/common/generate-block-query.ts
 delete mode 100644 packages/backend/src/server/api/common/generate-channel-query.ts
 delete mode 100644 packages/backend/src/server/api/common/generate-muted-note-query.ts
 delete mode 100644 packages/backend/src/server/api/common/generate-muted-note-thread-query.ts
 delete mode 100644 packages/backend/src/server/api/common/generate-muted-user-query.ts
 delete mode 100644 packages/backend/src/server/api/common/generate-native-user-token.ts
 delete mode 100644 packages/backend/src/server/api/common/generate-replies-query.ts
 delete mode 100644 packages/backend/src/server/api/common/generate-visibility-query.ts
 delete mode 100644 packages/backend/src/server/api/common/getters.ts
 delete mode 100644 packages/backend/src/server/api/common/is-native-token.ts
 delete mode 100644 packages/backend/src/server/api/common/make-pagination-query.ts
 delete mode 100644 packages/backend/src/server/api/common/read-messaging-message.ts
 delete mode 100644 packages/backend/src/server/api/common/read-notification.ts
 delete mode 100644 packages/backend/src/server/api/common/signin.ts
 delete mode 100644 packages/backend/src/server/api/common/signup.ts
 delete mode 100644 packages/backend/src/server/api/define.ts
 create mode 100644 packages/backend/src/server/api/endpoint-base.ts
 delete mode 100644 packages/backend/src/server/api/endpoints/admin/vacuum.ts
 delete mode 100644 packages/backend/src/server/api/endpoints/notes/watching/create.ts
 delete mode 100644 packages/backend/src/server/api/endpoints/notes/watching/delete.ts
 delete mode 100644 packages/backend/src/server/api/index.ts
 create mode 100644 packages/backend/src/server/api/integration/DiscordServerService.ts
 create mode 100644 packages/backend/src/server/api/integration/GithubServerService.ts
 create mode 100644 packages/backend/src/server/api/integration/TwitterServerService.ts
 delete mode 100644 packages/backend/src/server/api/limiter.ts
 delete mode 100644 packages/backend/src/server/api/logger.ts
 delete mode 100644 packages/backend/src/server/api/openapi/gen-spec.ts
 delete mode 100644 packages/backend/src/server/api/private/signin.ts
 delete mode 100644 packages/backend/src/server/api/private/signup-pending.ts
 delete mode 100644 packages/backend/src/server/api/private/signup.ts
 delete mode 100644 packages/backend/src/server/api/service/discord.ts
 delete mode 100644 packages/backend/src/server/api/service/github.ts
 delete mode 100644 packages/backend/src/server/api/service/twitter.ts
 create mode 100644 packages/backend/src/server/api/stream/ChannelsService.ts
 delete mode 100644 packages/backend/src/server/api/stream/channels/index.ts
 delete mode 100644 packages/backend/src/server/api/streaming.ts
 create mode 100644 packages/backend/src/server/assets/bad-egg.png
 create mode 100644 packages/backend/src/server/assets/cache-expired.png
 create mode 100644 packages/backend/src/server/assets/dummy.png
 create mode 100644 packages/backend/src/server/assets/not-an-image.png
 create mode 100644 packages/backend/src/server/assets/thumbnail-not-available.png
 create mode 100644 packages/backend/src/server/assets/tombstone.png
 delete mode 100644 packages/backend/src/server/file/assets/bad-egg.png
 delete mode 100644 packages/backend/src/server/file/assets/cache-expired.png
 delete mode 100644 packages/backend/src/server/file/assets/dummy.png
 delete mode 100644 packages/backend/src/server/file/assets/not-an-image.png
 delete mode 100644 packages/backend/src/server/file/assets/thumbnail-not-available.png
 delete mode 100644 packages/backend/src/server/file/assets/tombstone.png
 delete mode 100644 packages/backend/src/server/file/index.ts
 delete mode 100644 packages/backend/src/server/file/send-drive-file.ts
 delete mode 100644 packages/backend/src/server/index.ts
 delete mode 100644 packages/backend/src/server/nodeinfo.ts
 delete mode 100644 packages/backend/src/server/proxy/index.ts
 delete mode 100644 packages/backend/src/server/proxy/proxy-media.ts
 create mode 100644 packages/backend/src/server/web/ClientServerService.ts
 create mode 100644 packages/backend/src/server/web/FeedService.ts
 create mode 100644 packages/backend/src/server/web/UrlPreviewService.ts
 delete mode 100644 packages/backend/src/server/web/feed.ts
 delete mode 100644 packages/backend/src/server/web/index.ts
 delete mode 100644 packages/backend/src/server/web/manifest.ts
 delete mode 100644 packages/backend/src/server/web/url-preview.ts
 delete mode 100644 packages/backend/src/server/well-known.ts
 delete mode 100644 packages/backend/src/services/add-note-to-antenna.ts
 delete mode 100644 packages/backend/src/services/blocking/create.ts
 delete mode 100644 packages/backend/src/services/blocking/delete.ts
 delete mode 100644 packages/backend/src/services/chart/charts/active-users.ts
 delete mode 100644 packages/backend/src/services/chart/charts/ap-request.ts
 delete mode 100644 packages/backend/src/services/chart/charts/drive.ts
 delete mode 100644 packages/backend/src/services/chart/charts/entities/active-users.ts
 delete mode 100644 packages/backend/src/services/chart/charts/entities/ap-request.ts
 delete mode 100644 packages/backend/src/services/chart/charts/entities/drive.ts
 delete mode 100644 packages/backend/src/services/chart/charts/entities/federation.ts
 delete mode 100644 packages/backend/src/services/chart/charts/entities/hashtag.ts
 delete mode 100644 packages/backend/src/services/chart/charts/entities/instance.ts
 delete mode 100644 packages/backend/src/services/chart/charts/entities/notes.ts
 delete mode 100644 packages/backend/src/services/chart/charts/entities/per-user-drive.ts
 delete mode 100644 packages/backend/src/services/chart/charts/entities/per-user-following.ts
 delete mode 100644 packages/backend/src/services/chart/charts/entities/per-user-notes.ts
 delete mode 100644 packages/backend/src/services/chart/charts/entities/per-user-reactions.ts
 delete mode 100644 packages/backend/src/services/chart/charts/entities/test-grouped.ts
 delete mode 100644 packages/backend/src/services/chart/charts/entities/test-intersection.ts
 delete mode 100644 packages/backend/src/services/chart/charts/entities/test-unique.ts
 delete mode 100644 packages/backend/src/services/chart/charts/entities/test.ts
 delete mode 100644 packages/backend/src/services/chart/charts/entities/users.ts
 delete mode 100644 packages/backend/src/services/chart/charts/federation.ts
 delete mode 100644 packages/backend/src/services/chart/charts/hashtag.ts
 delete mode 100644 packages/backend/src/services/chart/charts/instance.ts
 delete mode 100644 packages/backend/src/services/chart/charts/notes.ts
 delete mode 100644 packages/backend/src/services/chart/charts/per-user-drive.ts
 delete mode 100644 packages/backend/src/services/chart/charts/per-user-following.ts
 delete mode 100644 packages/backend/src/services/chart/charts/per-user-notes.ts
 delete mode 100644 packages/backend/src/services/chart/charts/per-user-reactions.ts
 delete mode 100644 packages/backend/src/services/chart/charts/test-grouped.ts
 delete mode 100644 packages/backend/src/services/chart/charts/test-intersection.ts
 delete mode 100644 packages/backend/src/services/chart/charts/test-unique.ts
 delete mode 100644 packages/backend/src/services/chart/charts/test.ts
 delete mode 100644 packages/backend/src/services/chart/charts/users.ts
 delete mode 100644 packages/backend/src/services/chart/core.ts
 delete mode 100644 packages/backend/src/services/chart/entities.ts
 delete mode 100644 packages/backend/src/services/chart/index.ts
 delete mode 100644 packages/backend/src/services/create-notification.ts
 delete mode 100644 packages/backend/src/services/create-system-user.ts
 delete mode 100644 packages/backend/src/services/delete-account.ts
 delete mode 100644 packages/backend/src/services/detect-sensitive.ts
 delete mode 100644 packages/backend/src/services/drive/add-file.ts
 delete mode 100644 packages/backend/src/services/drive/delete-file.ts
 delete mode 100644 packages/backend/src/services/drive/generate-video-thumbnail.ts
 delete mode 100644 packages/backend/src/services/drive/image-processor.ts
 delete mode 100644 packages/backend/src/services/drive/internal-storage.ts
 delete mode 100644 packages/backend/src/services/drive/logger.ts
 delete mode 100644 packages/backend/src/services/drive/s3.ts
 delete mode 100644 packages/backend/src/services/drive/upload-from-url.ts
 delete mode 100644 packages/backend/src/services/fetch-instance-metadata.ts
 delete mode 100644 packages/backend/src/services/following/create.ts
 delete mode 100644 packages/backend/src/services/following/delete.ts
 delete mode 100644 packages/backend/src/services/following/reject.ts
 delete mode 100644 packages/backend/src/services/following/requests/accept-all.ts
 delete mode 100644 packages/backend/src/services/following/requests/accept.ts
 delete mode 100644 packages/backend/src/services/following/requests/cancel.ts
 delete mode 100644 packages/backend/src/services/following/requests/create.ts
 delete mode 100644 packages/backend/src/services/i/pin.ts
 delete mode 100644 packages/backend/src/services/i/update.ts
 delete mode 100644 packages/backend/src/services/insert-moderation-log.ts
 delete mode 100644 packages/backend/src/services/instance-actor.ts
 delete mode 100644 packages/backend/src/services/logger.ts
 delete mode 100644 packages/backend/src/services/messages/create.ts
 delete mode 100644 packages/backend/src/services/messages/delete.ts
 delete mode 100644 packages/backend/src/services/note/create.ts
 delete mode 100644 packages/backend/src/services/note/delete.ts
 delete mode 100644 packages/backend/src/services/note/polls/update.ts
 delete mode 100644 packages/backend/src/services/note/polls/vote.ts
 delete mode 100644 packages/backend/src/services/note/reaction/create.ts
 delete mode 100644 packages/backend/src/services/note/reaction/delete.ts
 delete mode 100644 packages/backend/src/services/note/read.ts
 delete mode 100644 packages/backend/src/services/note/unread.ts
 delete mode 100644 packages/backend/src/services/note/unwatch.ts
 delete mode 100644 packages/backend/src/services/note/watch.ts
 delete mode 100644 packages/backend/src/services/push-notification.ts
 delete mode 100644 packages/backend/src/services/register-or-fetch-instance-doc.ts
 delete mode 100644 packages/backend/src/services/relay.ts
 delete mode 100644 packages/backend/src/services/send-email-notification.ts
 delete mode 100644 packages/backend/src/services/send-email.ts
 delete mode 100644 packages/backend/src/services/stream.ts
 delete mode 100644 packages/backend/src/services/suspend-user.ts
 delete mode 100644 packages/backend/src/services/unsuspend-user.ts
 delete mode 100644 packages/backend/src/services/update-hashtag.ts
 delete mode 100644 packages/backend/src/services/user-cache.ts
 delete mode 100644 packages/backend/src/services/user-list/push.ts
 delete mode 100644 packages/backend/src/services/validate-email-for-account.ts
 create mode 100644 packages/backend/test/_e2e/api-visibility.ts
 create mode 100644 packages/backend/test/_e2e/api.ts
 create mode 100644 packages/backend/test/_e2e/block.ts
 create mode 100644 packages/backend/test/_e2e/endpoints.ts
 create mode 100644 packages/backend/test/_e2e/fetch-resource.ts
 create mode 100644 packages/backend/test/_e2e/ff-visibility.ts
 create mode 100644 packages/backend/test/_e2e/mute.ts
 create mode 100644 packages/backend/test/_e2e/note.ts
 create mode 100644 packages/backend/test/_e2e/streaming.ts
 create mode 100644 packages/backend/test/_e2e/thread-mute.ts
 create mode 100644 packages/backend/test/_e2e/user-notes.ts
 delete mode 100644 packages/backend/test/activitypub.ts
 delete mode 100644 packages/backend/test/ap-request.ts
 delete mode 100644 packages/backend/test/api-visibility.ts
 delete mode 100644 packages/backend/test/api.ts
 delete mode 100644 packages/backend/test/block.ts
 delete mode 100644 packages/backend/test/chart.ts
 delete mode 100644 packages/backend/test/endpoints.ts
 delete mode 100644 packages/backend/test/extract-mentions.ts
 delete mode 100644 packages/backend/test/fetch-resource.ts
 delete mode 100644 packages/backend/test/ff-visibility.ts
 delete mode 100644 packages/backend/test/get-file-info.ts
 delete mode 100644 packages/backend/test/mfm.ts
 delete mode 100644 packages/backend/test/mute.ts
 delete mode 100644 packages/backend/test/note.ts
 delete mode 100644 packages/backend/test/reaction-lib.ts
 delete mode 100644 packages/backend/test/streaming.ts
 create mode 100644 packages/backend/test/tests/activitypub.ts
 create mode 100644 packages/backend/test/tests/ap-request.ts
 create mode 100644 packages/backend/test/tests/extract-mentions.ts
 create mode 100644 packages/backend/test/tests/mfm.ts
 create mode 100644 packages/backend/test/tests/reaction-lib.ts
 delete mode 100644 packages/backend/test/thread-mute.ts
 create mode 100644 packages/backend/test/unit/FileInfoService.ts
 create mode 100644 packages/backend/test/unit/RelayService.ts
 create mode 100644 packages/backend/test/unit/chart.ts
 delete mode 100644 packages/backend/test/user-notes.ts

(limited to 'packages/client/src')

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index c32c82e2a1..bb35cce137 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -8,7 +8,7 @@ on:
   pull_request:
 
 jobs:
-  mocha:
+  jest:
     runs-on: ubuntu-latest
 
     strategy:
@@ -49,7 +49,11 @@ jobs:
     - name: Build
       run: yarn build
     - name: Test
-      run: yarn mocha
+      run: yarn jest-and-coverage
+    - name: Upload Coverage
+      uses: codecov/codecov-action@v3
+      with:
+        files: ./packages/backend/coverage/coverage-final.json
 
   e2e:
     runs-on: ubuntu-latest
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 4547138eb4..9a4c93e9fb 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -124,7 +124,7 @@ npm run test
 
 #### Run specify test
 ```
-npx cross-env TS_NODE_FILES=true TS_NODE_TRANSPILE_ONLY=true TS_NODE_PROJECT="./test/tsconfig.json" npx mocha test/foo.ts --require ts-node/register
+npm run jest -- foo.ts
 ```
 
 ### e2e tests
diff --git a/package.json b/package.json
index 37f0762f5a..efb749c288 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,10 @@
 		"cy:open": "cypress open --browser --e2e --config-file=cypress.config.ts",
 		"cy:run": "cypress run",
 		"e2e": "start-server-and-test start:test http://localhost:61812 cy:run",
-		"mocha": "cd packages/backend && cross-env NODE_ENV=test TS_NODE_FILES=true TS_NODE_TRANSPILE_ONLY=true TS_NODE_PROJECT=\"./test/tsconfig.json\" npx mocha",
-		"test": "npm run mocha",
+		"jest": "cd packages/backend && cross-env NODE_ENV=test node --experimental-vm-modules --experimental-import-meta-resolve node_modules/jest/bin/jest.js --forceExit --detectOpenHandles --runInBand",
+		"jest-and-coverage": "cd packages/backend && cross-env NODE_ENV=test node --experimental-vm-modules --experimental-import-meta-resolve node_modules/jest/bin/jest.js --coverage --forceExit --detectOpenHandles --runInBand",
+		"test": "npm run jest",
+		"test-and-coverage": "npm run jest-and-coverage",
 		"format": "gulp format",
 		"clean": "node ./scripts/clean.js",
 		"clean-all": "node ./scripts/clean-all.js",
diff --git a/packages/backend/.mocharc.json b/packages/backend/.mocharc.json
deleted file mode 100644
index f836f9e900..0000000000
--- a/packages/backend/.mocharc.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-	"extension": ["ts","js","cjs","mjs"],
-	"node-option": [
-		"experimental-specifier-resolution=node",
-		"loader=./test/loader.js"
-	],
-	"slow": 1000,
-	"timeout": 30000,
-	"exit": true
-}
diff --git a/packages/backend/jest-resolver.cjs b/packages/backend/jest-resolver.cjs
new file mode 100644
index 0000000000..4424b800dc
--- /dev/null
+++ b/packages/backend/jest-resolver.cjs
@@ -0,0 +1,14 @@
+// https://github.com/facebook/jest/issues/12270#issuecomment-1194746382
+
+const nativeModule = require('node:module');
+
+function resolver(module, options) {
+  const { basedir, defaultResolver } = options;
+  try {
+    return defaultResolver(module, options);
+  } catch (error) {
+    return nativeModule.createRequire(basedir).resolve(module);
+  }
+}
+
+module.exports = resolver;
diff --git a/packages/backend/jest.config.cjs b/packages/backend/jest.config.cjs
new file mode 100644
index 0000000000..4f85bd36bd
--- /dev/null
+++ b/packages/backend/jest.config.cjs
@@ -0,0 +1,214 @@
+/*
+* For a detailed explanation regarding each configuration property and type check, visit:
+* https://jestjs.io/docs/en/configuration.html
+*/
+
+module.exports = {
+	// All imported modules in your tests should be mocked automatically
+	// automock: false,
+
+	// Stop running tests after `n` failures
+	// bail: 0,
+
+	// The directory where Jest should store its cached dependency information
+	// cacheDirectory: "C:\\Users\\ai\\AppData\\Local\\Temp\\jest",
+
+	// Automatically clear mock calls and instances between every test
+	// clearMocks: false,
+
+	// Indicates whether the coverage information should be collected while executing the test
+	// collectCoverage: false,
+
+	// An array of glob patterns indicating a set of files for which coverage information should be collected
+	collectCoverageFrom: ['src/**/*.ts'],
+
+	// The directory where Jest should output its coverage files
+	coverageDirectory: "coverage",
+
+	// An array of regexp pattern strings used to skip coverage collection
+	// coveragePathIgnorePatterns: [
+	//   "\\\\node_modules\\\\"
+	// ],
+
+	// Indicates which provider should be used to instrument code for coverage
+	coverageProvider: "v8",
+
+	// A list of reporter names that Jest uses when writing coverage reports
+	// coverageReporters: [
+	//   "json",
+	//   "text",
+	//   "lcov",
+	//   "clover"
+	// ],
+
+	// An object that configures minimum threshold enforcement for coverage results
+	// coverageThreshold: undefined,
+
+	// A path to a custom dependency extractor
+	// dependencyExtractor: undefined,
+
+	// Make calling deprecated APIs throw helpful error messages
+	// errorOnDeprecated: false,
+
+	// Force coverage collection from ignored files using an array of glob patterns
+	// forceCoverageMatch: [],
+
+	// A path to a module which exports an async function that is triggered once before all test suites
+	// globalSetup: undefined,
+
+	// A path to a module which exports an async function that is triggered once after all test suites
+	// globalTeardown: undefined,
+
+	// A set of global variables that need to be available in all test environments
+	globals: {
+		"ts-jest": {
+			"useESM": true,
+			tsconfig: "test/tsconfig.json",
+			diagnostics: {
+        exclude: ['**'],
+      },
+		}
+	},
+
+	// The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+	// maxWorkers: "50%",
+
+	// An array of directory names to be searched recursively up from the requiring module's location
+	// moduleDirectories: [
+	//   "node_modules"
+	// ],
+
+	// An array of file extensions your modules use
+	// moduleFileExtensions: [
+	//   "js",
+	//   "json",
+	//   "jsx",
+	//   "ts",
+	//   "tsx",
+	//   "node"
+	// ],
+
+	// A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+	moduleNameMapper: {
+		"^@/(.*?).js": "<rootDir>/src/$1.ts",
+		'^(\\.{1,2}/.*)\\.js$': '$1',
+	},
+
+	// An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+	// modulePathIgnorePatterns: [],
+
+	// Activates notifications for test results
+	// notify: false,
+
+	// An enum that specifies notification mode. Requires { notify: true }
+	// notifyMode: "failure-change",
+
+	// A preset that is used as a base for Jest's configuration
+	preset: "ts-jest/presets/js-with-ts-esm",
+
+	// Run tests from one or more projects
+	// projects: undefined,
+
+	// Use this configuration option to add custom reporters to Jest
+	// reporters: undefined,
+
+	// Automatically reset mock state between every test
+	// resetMocks: false,
+
+	// Reset the module registry before running each individual test
+	// resetModules: false,
+
+	// A path to a custom resolver
+	resolver: './jest-resolver.cjs',
+
+	// Automatically restore mock state between every test
+	// restoreMocks: false,
+
+	// The root directory that Jest should scan for tests and modules within
+	// rootDir: undefined,
+
+	// A list of paths to directories that Jest should use to search for files in
+	roots: [
+		"<rootDir>"
+	],
+
+	// Allows you to use a custom runner instead of Jest's default test runner
+	// runner: "jest-runner",
+
+	// The paths to modules that run some code to configure or set up the testing environment before each test
+	// setupFiles: [],
+
+	// A list of paths to modules that run some code to configure or set up the testing framework before each test
+	// setupFilesAfterEnv: [],
+
+	// The number of seconds after which a test is considered as slow and reported as such in the results.
+	// slowTestThreshold: 5,
+
+	// A list of paths to snapshot serializer modules Jest should use for snapshot testing
+	// snapshotSerializers: [],
+
+	// The test environment that will be used for testing
+	testEnvironment: "node",
+
+	// Options that will be passed to the testEnvironment
+	// testEnvironmentOptions: {},
+
+	// Adds a location field to test results
+	// testLocationInResults: false,
+
+	// The glob patterns Jest uses to detect test files
+	testMatch: [
+		"<rootDir>/test/unit/**/*.ts",
+		//"<rootDir>/test/e2e/**/*.ts"
+	],
+
+	// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+	// testPathIgnorePatterns: [
+	//   "\\\\node_modules\\\\"
+	// ],
+
+	// The regexp pattern or array of patterns that Jest uses to detect test files
+	// testRegex: [],
+
+	// This option allows the use of a custom results processor
+	// testResultsProcessor: undefined,
+
+	// This option allows use of a custom test runner
+	// testRunner: "jasmine2",
+
+	// This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
+	// testURL: "http://localhost",
+
+	// Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
+	// timers: "real",
+
+	// A map from regular expressions to paths to transformers
+	transform: {
+		"<regex_match_files>": [
+			"ts-jest",
+			{
+				"useESM": true
+			}
+		]
+	},
+
+	// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+	// transformIgnorePatterns: [
+	//   "\\\\node_modules\\\\",
+	//   "\\.pnp\\.[^\\\\]+$"
+	// ],
+
+	// An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+	// unmockedModulePathPatterns: undefined,
+
+	// Indicates whether each individual test should be reported during the run
+	// verbose: undefined,
+
+	// An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+	// watchPathIgnorePatterns: [],
+
+	// Whether to use watchman for file crawling
+	// watchman: true,
+
+	extensionsToTreatAsEsm: ['.ts'],
+};
diff --git a/packages/backend/ormconfig.js b/packages/backend/ormconfig.js
index a4e903abad..32c26f7b67 100644
--- a/packages/backend/ormconfig.js
+++ b/packages/backend/ormconfig.js
@@ -1,6 +1,8 @@
 import { DataSource } from 'typeorm';
-import config from './built/config/index.js';
-import { entities } from './built/db/postgre.js';
+import { loadConfig } from './built/config.js';
+import { entities } from './built/postgre.js';
+
+const config = loadConfig();
 
 export default new DataSource({
 	type: 'postgres',
diff --git a/packages/backend/package.json b/packages/backend/package.json
index be8283e4a0..30bf9faa32 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -1,13 +1,14 @@
 {
-	"main": "./index.js",
 	"private": true,
 	"type": "module",
 	"scripts": {
 		"build": "tsc -p tsconfig.json || echo done. && tsc-alias -p tsconfig.json",
 		"watch": "node watch.mjs",
 		"lint": "eslint --quiet \"src/**/*.ts\"",
-		"mocha": "cross-env NODE_ENV=test TS_NODE_FILES=true TS_NODE_TRANSPILE_ONLY=true TS_NODE_PROJECT=\"./test/tsconfig.json\" mocha",
-		"test": "npm run mocha"
+		"jest": "cross-env NODE_ENV=test node --experimental-vm-modules --experimental-import-meta-resolve node_modules/jest/bin/jest.js --forceExit --detectOpenHandles --runInBand",
+		"jest-and-coverage": "cross-env NODE_ENV=test node --experimental-vm-modules --experimental-import-meta-resolve node_modules/jest/bin/jest.js --coverage --forceExit --detectOpenHandles --runInBand",
+		"test": "npm run jest",
+		"test-and-coverage": "npm run jest-and-coverage"
 	},
 	"resolutions": {
 		"chokidar": "^3.3.1",
@@ -23,9 +24,13 @@
 		"@koa/cors": "3.1.0",
 		"@koa/multer": "3.0.0",
 		"@koa/router": "9.0.1",
+		"@nestjs/common": "9.0.11",
+		"@nestjs/core": "9.0.11",
+		"@nestjs/testing": "9.0.11",
 		"@peertube/http-signature": "1.7.0",
 		"@sinonjs/fake-timers": "9.1.2",
 		"@syuilo/aiscript": "0.11.1",
+		"@types/pg": "8.6.5",
 		"ajv": "8.11.0",
 		"archiver": "5.3.1",
 		"autobind-decorator": "2.4.0",
@@ -71,7 +76,6 @@
 		"mfm-js": "0.23.0",
 		"mime-types": "2.1.35",
 		"misskey-js": "0.0.14",
-		"mocha": "10.0.0",
 		"ms": "3.0.0-canary.1",
 		"multer": "1.4.4",
 		"nested-property": "4.0.0",
@@ -96,6 +100,7 @@
 		"rename": "1.0.4",
 		"rndstr": "1.0.0",
 		"rss-parser": "3.12.0",
+		"rxjs": "7.5.6",
 		"s-age": "1.1.2",
 		"sanitize-html": "2.7.1",
 		"semver": "7.3.7",
@@ -129,6 +134,7 @@
 		"@types/cbor": "6.0.0",
 		"@types/escape-regexp": "0.0.1",
 		"@types/fluent-ffmpeg": "2.1.20",
+		"@types/jest": "29.0.0",
 		"@types/js-yaml": "4.0.5",
 		"@types/jsdom": "20.0.0",
 		"@types/jsonld": "1.5.6",
@@ -144,7 +150,6 @@
 		"@types/koa__cors": "3.1.1",
 		"@types/koa__multer": "2.0.4",
 		"@types/koa__router": "8.0.11",
-		"@types/mocha": "9.1.1",
 		"@types/node": "18.7.16",
 		"@types/node-fetch": "3.0.3",
 		"@types/nodemailer": "6.4.5",
@@ -173,6 +178,8 @@
 		"eslint": "8.23.0",
 		"eslint-plugin-import": "2.26.0",
 		"execa": "6.1.0",
+		"jest": "29.0.1",
+		"ts-jest": "28.0.8",
 		"typescript": "4.8.3"
 	}
 }
diff --git a/packages/backend/src/AppModule.ts b/packages/backend/src/AppModule.ts
new file mode 100644
index 0000000000..14f48576a7
--- /dev/null
+++ b/packages/backend/src/AppModule.ts
@@ -0,0 +1,15 @@
+import { Module } from '@nestjs/common';
+import { CoreModule } from '@/core/CoreModule.js';
+import { ServerModule } from '@/server/ServerModule.js';
+import { GlobalModule } from '@/GlobalModule.js';
+import { QueueProcessorModule } from '@/queue/QueueProcessorModule.js';
+
+@Module({
+	imports: [
+		GlobalModule,
+		CoreModule,
+		ServerModule,
+		QueueProcessorModule,
+	],
+})
+export class AppModule {}
diff --git a/packages/backend/src/GlobalModule.ts b/packages/backend/src/GlobalModule.ts
new file mode 100644
index 0000000000..dbc5c698df
--- /dev/null
+++ b/packages/backend/src/GlobalModule.ts
@@ -0,0 +1,63 @@
+import { Global, Inject, Module } from '@nestjs/common';
+import { Redis } from 'ioredis';
+import { DataSource } from 'typeorm';
+import { createRedisConnection } from '@/redis.js';
+import { DI } from './di-symbols.js';
+import { loadConfig } from './config.js';
+import { createPostgreDataSource } from './postgre.js';
+import { RepositoryModule } from './RepositoryModule.js';
+import type { Provider, OnApplicationShutdown } from '@nestjs/common';
+
+const config = loadConfig();
+
+const $config: Provider = {
+	provide: DI.config,
+	useValue: config,
+};
+
+const $db: Provider = {
+	provide: DI.db,
+	useFactory: async () => {
+		const db = createPostgreDataSource();
+		return await db.initialize();
+	},
+};
+
+const $redis: Provider = {
+	provide: DI.redis,
+	useFactory: () => {
+		const redisClient = createRedisConnection();
+		return redisClient;
+	},
+};
+
+const $redisSubscriber: Provider = {
+	provide: DI.redisSubscriber,
+	useFactory: () => {
+		const redisSubscriber = createRedisConnection();
+		redisSubscriber.subscribe(config.host);
+		return redisSubscriber;
+	},
+};
+
+@Global()
+@Module({
+	imports: [RepositoryModule],
+	providers: [$config, $db, $redis, $redisSubscriber],
+	exports: [$config, $db, $redis, $redisSubscriber, RepositoryModule],
+})
+export class GlobalModule implements OnApplicationShutdown {
+	constructor(
+		@Inject(DI.db) private db: DataSource,
+		@Inject(DI.redis) private redisClient: Redis,
+		@Inject(DI.redisSubscriber) private redisSubscriber: Redis,
+	) {}
+
+	async onApplicationShutdown(signal: string): Promise<void> {
+		await Promise.all([
+			this.db.destroy(),
+			this.redisClient.disconnect(),
+			this.redisSubscriber.disconnect(),
+		]);
+	}
+}
diff --git a/packages/backend/src/RepositoryModule.ts b/packages/backend/src/RepositoryModule.ts
new file mode 100644
index 0000000000..0e3ef58992
--- /dev/null
+++ b/packages/backend/src/RepositoryModule.ts
@@ -0,0 +1,519 @@
+import { Module } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { User, Note, Announcement, AnnouncementRead, App, NoteFavorite, NoteThreadMuting, NoteReaction, NoteUnread, Notification, Poll, PollVote, UserProfile, UserKeypair, UserPending, AttestationChallenge, UserSecurityKey, UserPublickey, UserList, UserListJoining, UserGroup, UserGroupJoining, UserGroupInvitation, UserNotePining, UserIp, UsedUsername, Following, FollowRequest, Instance, Emoji, DriveFile, DriveFolder, Meta, Muting, Blocking, SwSubscription, Hashtag, AbuseUserReport, RegistrationTicket, AuthSession, AccessToken, Signin, MessagingMessage, Page, PageLike, GalleryPost, GalleryLike, ModerationLog, Clip, ClipNote, Antenna, AntennaNote, PromoNote, PromoRead, Relay, MutedNote, Channel, ChannelFollowing, ChannelNotePining, RegistryItem, Webhook, Ad, PasswordResetRequest } from './models/index.js';
+import type { DataSource } from 'typeorm';
+import type { Provider } from '@nestjs/common';
+
+const $usersRepository: Provider = {
+	provide: DI.usersRepository,
+	useFactory: (db: DataSource) => db.getRepository(User),
+	inject: [DI.db],
+};
+
+const $notesRepository: Provider = {
+	provide: DI.notesRepository,
+	useFactory: (db: DataSource) => db.getRepository(Note),
+	inject: [DI.db],
+};
+
+const $announcementsRepository: Provider = {
+	provide: DI.announcementsRepository,
+	useFactory: (db: DataSource) => db.getRepository(Announcement),
+	inject: [DI.db],
+};
+
+const $announcementReadsRepository: Provider = {
+	provide: DI.announcementReadsRepository,
+	useFactory: (db: DataSource) => db.getRepository(AnnouncementRead),
+	inject: [DI.db],
+};
+
+const $appsRepository: Provider = {
+	provide: DI.appsRepository,
+	useFactory: (db: DataSource) => db.getRepository(App),
+	inject: [DI.db],
+};
+
+const $noteFavoritesRepository: Provider = {
+	provide: DI.noteFavoritesRepository,
+	useFactory: (db: DataSource) => db.getRepository(NoteFavorite),
+	inject: [DI.db],
+};
+
+const $noteThreadMutingsRepository: Provider = {
+	provide: DI.noteThreadMutingsRepository,
+	useFactory: (db: DataSource) => db.getRepository(NoteThreadMuting),
+	inject: [DI.db],
+};
+
+const $noteReactionsRepository: Provider = {
+	provide: DI.noteReactionsRepository,
+	useFactory: (db: DataSource) => db.getRepository(NoteReaction),
+	inject: [DI.db],
+};
+
+const $noteUnreadsRepository: Provider = {
+	provide: DI.noteUnreadsRepository,
+	useFactory: (db: DataSource) => db.getRepository(NoteUnread),
+	inject: [DI.db],
+};
+
+const $pollsRepository: Provider = {
+	provide: DI.pollsRepository,
+	useFactory: (db: DataSource) => db.getRepository(Poll),
+	inject: [DI.db],
+};
+
+const $pollVotesRepository: Provider = {
+	provide: DI.pollVotesRepository,
+	useFactory: (db: DataSource) => db.getRepository(PollVote),
+	inject: [DI.db],
+};
+
+const $userProfilesRepository: Provider = {
+	provide: DI.userProfilesRepository,
+	useFactory: (db: DataSource) => db.getRepository(UserProfile),
+	inject: [DI.db],
+};
+
+const $userKeypairsRepository: Provider = {
+	provide: DI.userKeypairsRepository,
+	useFactory: (db: DataSource) => db.getRepository(UserKeypair),
+	inject: [DI.db],
+};
+
+const $userPendingsRepository: Provider = {
+	provide: DI.userPendingsRepository,
+	useFactory: (db: DataSource) => db.getRepository(UserPending),
+	inject: [DI.db],
+};
+
+const $attestationChallengesRepository: Provider = {
+	provide: DI.attestationChallengesRepository,
+	useFactory: (db: DataSource) => db.getRepository(AttestationChallenge),
+	inject: [DI.db],
+};
+
+const $userSecurityKeysRepository: Provider = {
+	provide: DI.userSecurityKeysRepository,
+	useFactory: (db: DataSource) => db.getRepository(UserSecurityKey),
+	inject: [DI.db],
+};
+
+const $userPublickeysRepository: Provider = {
+	provide: DI.userPublickeysRepository,
+	useFactory: (db: DataSource) => db.getRepository(UserPublickey),
+	inject: [DI.db],
+};
+
+const $userListsRepository: Provider = {
+	provide: DI.userListsRepository,
+	useFactory: (db: DataSource) => db.getRepository(UserList),
+	inject: [DI.db],
+};
+
+const $userListJoiningsRepository: Provider = {
+	provide: DI.userListJoiningsRepository,
+	useFactory: (db: DataSource) => db.getRepository(UserListJoining),
+	inject: [DI.db],
+};
+
+const $userGroupsRepository: Provider = {
+	provide: DI.userGroupsRepository,
+	useFactory: (db: DataSource) => db.getRepository(UserGroup),
+	inject: [DI.db],
+};
+
+const $userGroupJoiningsRepository: Provider = {
+	provide: DI.userGroupJoiningsRepository,
+	useFactory: (db: DataSource) => db.getRepository(UserGroupJoining),
+	inject: [DI.db],
+};
+
+const $userGroupInvitationsRepository: Provider = {
+	provide: DI.userGroupInvitationsRepository,
+	useFactory: (db: DataSource) => db.getRepository(UserGroupInvitation),
+	inject: [DI.db],
+};
+
+const $userNotePiningsRepository: Provider = {
+	provide: DI.userNotePiningsRepository,
+	useFactory: (db: DataSource) => db.getRepository(UserNotePining),
+	inject: [DI.db],
+};
+
+const $userIpsRepository: Provider = {
+	provide: DI.userIpsRepository,
+	useFactory: (db: DataSource) => db.getRepository(UserIp),
+	inject: [DI.db],
+};
+
+const $usedUsernamesRepository: Provider = {
+	provide: DI.usedUsernamesRepository,
+	useFactory: (db: DataSource) => db.getRepository(UsedUsername),
+	inject: [DI.db],
+};
+
+const $followingsRepository: Provider = {
+	provide: DI.followingsRepository,
+	useFactory: (db: DataSource) => db.getRepository(Following),
+	inject: [DI.db],
+};
+
+const $followRequestsRepository: Provider = {
+	provide: DI.followRequestsRepository,
+	useFactory: (db: DataSource) => db.getRepository(FollowRequest),
+	inject: [DI.db],
+};
+
+const $instancesRepository: Provider = {
+	provide: DI.instancesRepository,
+	useFactory: (db: DataSource) => db.getRepository(Instance),
+	inject: [DI.db],
+};
+
+const $emojisRepository: Provider = {
+	provide: DI.emojisRepository,
+	useFactory: (db: DataSource) => db.getRepository(Emoji),
+	inject: [DI.db],
+};
+
+const $driveFilesRepository: Provider = {
+	provide: DI.driveFilesRepository,
+	useFactory: (db: DataSource) => db.getRepository(DriveFile),
+	inject: [DI.db],
+};
+
+const $driveFoldersRepository: Provider = {
+	provide: DI.driveFoldersRepository,
+	useFactory: (db: DataSource) => db.getRepository(DriveFolder),
+	inject: [DI.db],
+};
+
+const $notificationsRepository: Provider = {
+	provide: DI.notificationsRepository,
+	useFactory: (db: DataSource) => db.getRepository(Notification),
+	inject: [DI.db],
+};
+
+const $metasRepository: Provider = {
+	provide: DI.metasRepository,
+	useFactory: (db: DataSource) => db.getRepository(Meta),
+	inject: [DI.db],
+};
+
+const $mutingsRepository: Provider = {
+	provide: DI.mutingsRepository,
+	useFactory: (db: DataSource) => db.getRepository(Muting),
+	inject: [DI.db],
+};
+
+const $blockingsRepository: Provider = {
+	provide: DI.blockingsRepository,
+	useFactory: (db: DataSource) => db.getRepository(Blocking),
+	inject: [DI.db],
+};
+
+const $swSubscriptionsRepository: Provider = {
+	provide: DI.swSubscriptionsRepository,
+	useFactory: (db: DataSource) => db.getRepository(SwSubscription),
+	inject: [DI.db],
+};
+
+const $hashtagsRepository: Provider = {
+	provide: DI.hashtagsRepository,
+	useFactory: (db: DataSource) => db.getRepository(Hashtag),
+	inject: [DI.db],
+};
+
+const $abuseUserReportsRepository: Provider = {
+	provide: DI.abuseUserReportsRepository,
+	useFactory: (db: DataSource) => db.getRepository(AbuseUserReport),
+	inject: [DI.db],
+};
+
+const $registrationTicketsRepository: Provider = {
+	provide: DI.registrationTicketsRepository,
+	useFactory: (db: DataSource) => db.getRepository(RegistrationTicket),
+	inject: [DI.db],
+};
+
+const $authSessionsRepository: Provider = {
+	provide: DI.authSessionsRepository,
+	useFactory: (db: DataSource) => db.getRepository(AuthSession),
+	inject: [DI.db],
+};
+
+const $accessTokensRepository: Provider = {
+	provide: DI.accessTokensRepository,
+	useFactory: (db: DataSource) => db.getRepository(AccessToken),
+	inject: [DI.db],
+};
+
+const $signinsRepository: Provider = {
+	provide: DI.signinsRepository,
+	useFactory: (db: DataSource) => db.getRepository(Signin),
+	inject: [DI.db],
+};
+
+const $messagingMessagesRepository: Provider = {
+	provide: DI.messagingMessagesRepository,
+	useFactory: (db: DataSource) => db.getRepository(MessagingMessage),
+	inject: [DI.db],
+};
+
+const $pagesRepository: Provider = {
+	provide: DI.pagesRepository,
+	useFactory: (db: DataSource) => db.getRepository(Page),
+	inject: [DI.db],
+};
+
+const $pageLikesRepository: Provider = {
+	provide: DI.pageLikesRepository,
+	useFactory: (db: DataSource) => db.getRepository(PageLike),
+	inject: [DI.db],
+};
+
+const $galleryPostsRepository: Provider = {
+	provide: DI.galleryPostsRepository,
+	useFactory: (db: DataSource) => db.getRepository(GalleryPost),
+	inject: [DI.db],
+};
+
+const $galleryLikesRepository: Provider = {
+	provide: DI.galleryLikesRepository,
+	useFactory: (db: DataSource) => db.getRepository(GalleryLike),
+	inject: [DI.db],
+};
+
+const $moderationLogsRepository: Provider = {
+	provide: DI.moderationLogsRepository,
+	useFactory: (db: DataSource) => db.getRepository(ModerationLog),
+	inject: [DI.db],
+};
+
+const $clipsRepository: Provider = {
+	provide: DI.clipsRepository,
+	useFactory: (db: DataSource) => db.getRepository(Clip),
+	inject: [DI.db],
+};
+
+const $clipNotesRepository: Provider = {
+	provide: DI.clipNotesRepository,
+	useFactory: (db: DataSource) => db.getRepository(ClipNote),
+	inject: [DI.db],
+};
+
+const $antennasRepository: Provider = {
+	provide: DI.antennasRepository,
+	useFactory: (db: DataSource) => db.getRepository(Antenna),
+	inject: [DI.db],
+};
+
+const $antennaNotesRepository: Provider = {
+	provide: DI.antennaNotesRepository,
+	useFactory: (db: DataSource) => db.getRepository(AntennaNote),
+	inject: [DI.db],
+};
+
+const $promoNotesRepository: Provider = {
+	provide: DI.promoNotesRepository,
+	useFactory: (db: DataSource) => db.getRepository(PromoNote),
+	inject: [DI.db],
+};
+
+const $promoReadsRepository: Provider = {
+	provide: DI.promoReadsRepository,
+	useFactory: (db: DataSource) => db.getRepository(PromoRead),
+	inject: [DI.db],
+};
+
+const $relaysRepository: Provider = {
+	provide: DI.relaysRepository,
+	useFactory: (db: DataSource) => db.getRepository(Relay),
+	inject: [DI.db],
+};
+
+const $mutedNotesRepository: Provider = {
+	provide: DI.mutedNotesRepository,
+	useFactory: (db: DataSource) => db.getRepository(MutedNote),
+	inject: [DI.db],
+};
+
+const $channelsRepository: Provider = {
+	provide: DI.channelsRepository,
+	useFactory: (db: DataSource) => db.getRepository(Channel),
+	inject: [DI.db],
+};
+
+const $channelFollowingsRepository: Provider = {
+	provide: DI.channelFollowingsRepository,
+	useFactory: (db: DataSource) => db.getRepository(ChannelFollowing),
+	inject: [DI.db],
+};
+
+const $channelNotePiningsRepository: Provider = {
+	provide: DI.channelNotePiningsRepository,
+	useFactory: (db: DataSource) => db.getRepository(ChannelNotePining),
+	inject: [DI.db],
+};
+
+const $registryItemsRepository: Provider = {
+	provide: DI.registryItemsRepository,
+	useFactory: (db: DataSource) => db.getRepository(RegistryItem),
+	inject: [DI.db],
+};
+
+const $webhooksRepository: Provider = {
+	provide: DI.webhooksRepository,
+	useFactory: (db: DataSource) => db.getRepository(Webhook),
+	inject: [DI.db],
+};
+
+const $adsRepository: Provider = {
+	provide: DI.adsRepository,
+	useFactory: (db: DataSource) => db.getRepository(Ad),
+	inject: [DI.db],
+};
+
+const $passwordResetRequestsRepository: Provider = {
+	provide: DI.passwordResetRequestsRepository,
+	useFactory: (db: DataSource) => db.getRepository(PasswordResetRequest),
+	inject: [DI.db],
+};
+
+@Module({
+	imports: [
+	],
+	providers: [
+		$usersRepository,
+		$notesRepository,
+		$announcementsRepository,
+		$announcementReadsRepository,
+		$appsRepository,
+		$noteFavoritesRepository,
+		$noteThreadMutingsRepository,
+		$noteReactionsRepository,
+		$noteUnreadsRepository,
+		$pollsRepository,
+		$pollVotesRepository,
+		$userProfilesRepository,
+		$userKeypairsRepository,
+		$userPendingsRepository,
+		$attestationChallengesRepository,
+		$userSecurityKeysRepository,
+		$userPublickeysRepository,
+		$userListsRepository,
+		$userListJoiningsRepository,
+		$userGroupsRepository,
+		$userGroupJoiningsRepository,
+		$userGroupInvitationsRepository,
+		$userNotePiningsRepository,
+		$userIpsRepository,
+		$usedUsernamesRepository,
+		$followingsRepository,
+		$followRequestsRepository,
+		$instancesRepository,
+		$emojisRepository,
+		$driveFilesRepository,
+		$driveFoldersRepository,
+		$notificationsRepository,
+		$metasRepository,
+		$mutingsRepository,
+		$blockingsRepository,
+		$swSubscriptionsRepository,
+		$hashtagsRepository,
+		$abuseUserReportsRepository,
+		$registrationTicketsRepository,
+		$authSessionsRepository,
+		$accessTokensRepository,
+		$signinsRepository,
+		$messagingMessagesRepository,
+		$pagesRepository,
+		$pageLikesRepository,
+		$galleryPostsRepository,
+		$galleryLikesRepository,
+		$moderationLogsRepository,
+		$clipsRepository,
+		$clipNotesRepository,
+		$antennasRepository,
+		$antennaNotesRepository,
+		$promoNotesRepository,
+		$promoReadsRepository,
+		$relaysRepository,
+		$mutedNotesRepository,
+		$channelsRepository,
+		$channelFollowingsRepository,
+		$channelNotePiningsRepository,
+		$registryItemsRepository,
+		$webhooksRepository,
+		$adsRepository,
+		$passwordResetRequestsRepository,
+	],
+	exports: [
+		$usersRepository,
+		$notesRepository,
+		$announcementsRepository,
+		$announcementReadsRepository,
+		$appsRepository,
+		$noteFavoritesRepository,
+		$noteThreadMutingsRepository,
+		$noteReactionsRepository,
+		$noteUnreadsRepository,
+		$pollsRepository,
+		$pollVotesRepository,
+		$userProfilesRepository,
+		$userKeypairsRepository,
+		$userPendingsRepository,
+		$attestationChallengesRepository,
+		$userSecurityKeysRepository,
+		$userPublickeysRepository,
+		$userListsRepository,
+		$userListJoiningsRepository,
+		$userGroupsRepository,
+		$userGroupJoiningsRepository,
+		$userGroupInvitationsRepository,
+		$userNotePiningsRepository,
+		$userIpsRepository,
+		$usedUsernamesRepository,
+		$followingsRepository,
+		$followRequestsRepository,
+		$instancesRepository,
+		$emojisRepository,
+		$driveFilesRepository,
+		$driveFoldersRepository,
+		$notificationsRepository,
+		$metasRepository,
+		$mutingsRepository,
+		$blockingsRepository,
+		$swSubscriptionsRepository,
+		$hashtagsRepository,
+		$abuseUserReportsRepository,
+		$registrationTicketsRepository,
+		$authSessionsRepository,
+		$accessTokensRepository,
+		$signinsRepository,
+		$messagingMessagesRepository,
+		$pagesRepository,
+		$pageLikesRepository,
+		$galleryPostsRepository,
+		$galleryLikesRepository,
+		$moderationLogsRepository,
+		$clipsRepository,
+		$clipNotesRepository,
+		$antennasRepository,
+		$antennaNotesRepository,
+		$promoNotesRepository,
+		$promoReadsRepository,
+		$relaysRepository,
+		$mutedNotesRepository,
+		$channelsRepository,
+		$channelFollowingsRepository,
+		$channelNotePiningsRepository,
+		$registryItemsRepository,
+		$webhooksRepository,
+		$adsRepository,
+		$passwordResetRequestsRepository,
+	],
+})
+export class RepositoryModule {}
diff --git a/packages/backend/src/boot/index.ts b/packages/backend/src/boot/index.ts
index c3d0592256..f67b09b1cc 100644
--- a/packages/backend/src/boot/index.ts
+++ b/packages/backend/src/boot/index.ts
@@ -2,7 +2,7 @@ import cluster from 'node:cluster';
 import chalk from 'chalk';
 import Xev from 'xev';
 
-import Logger from '@/services/logger.js';
+import Logger from '@/logger.js';
 import { envOption } from '../env.js';
 
 // for typeorm
diff --git a/packages/backend/src/boot/master.ts b/packages/backend/src/boot/master.ts
index bf51960482..ec09b4350b 100644
--- a/packages/backend/src/boot/master.ts
+++ b/packages/backend/src/boot/master.ts
@@ -6,14 +6,17 @@ import cluster from 'node:cluster';
 import chalk from 'chalk';
 import chalkTemplate from 'chalk-template';
 import semver from 'semver';
-
-import Logger from '@/services/logger.js';
-import loadConfig from '@/config/load.js';
-import { Config } from '@/config/types.js';
-import { lessThan } from '@/prelude/array.js';
-import { envOption } from '../env.js';
+import { NestFactory } from '@nestjs/core';
+import Logger from '@/logger.js';
+import { loadConfig } from '@/config.js';
+import type { Config } from '@/config.js';
+import { lessThan } from '@/misc/prelude/array.js';
 import { showMachineInfo } from '@/misc/show-machine-info.js';
-import { db, initDb } from '../db/postgre.js';
+import { DaemonModule } from '@/daemons/DaemonModule.js';
+import { JanitorService } from '@/daemons/JanitorService.js';
+import { QueueStatsService } from '@/daemons/QueueStatsService.js';
+import { ServerStatsService } from '@/daemons/ServerStatsService.js';
+import { envOption } from '../env.js';
 
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = dirname(_filename);
@@ -60,7 +63,7 @@ export async function masterMain() {
 		await showMachineInfo(bootLogger);
 		showNodejsVersion();
 		config = loadConfigBoot();
-		await connectDb();
+		//await connectDb();
 	} catch (e) {
 		bootLogger.error('Fatal error occurred during initialization', null, true);
 		process.exit(1);
@@ -75,9 +78,11 @@ export async function masterMain() {
 	bootLogger.succ(`Now listening on port ${config.port} on ${config.url}`, null, true);
 
 	if (!envOption.noDaemons) {
-		import('../daemons/server-stats.js').then(x => x.default());
-		import('../daemons/queue-stats.js').then(x => x.default());
-		import('../daemons/janitor.js').then(x => x.default());
+		const daemons = await NestFactory.createApplicationContext(DaemonModule);
+		daemons.enableShutdownHooks();
+		daemons.get(JanitorService).start();
+		daemons.get(QueueStatsService).start();
+		daemons.get(ServerStatsService).start();
 	}
 }
 
@@ -127,6 +132,7 @@ function loadConfigBoot(): Config {
 	return config;
 }
 
+/*
 async function connectDb(): Promise<void> {
 	const dbLogger = bootLogger.createSubLogger('db');
 
@@ -136,14 +142,15 @@ async function connectDb(): Promise<void> {
 		await initDb();
 		const v = await db.query('SHOW server_version').then(x => x[0].server_version);
 		dbLogger.succ(`Connected: v${v}`);
-	} catch (e) {
+	} catch (err) {
 		dbLogger.error('Cannot connect', null, true);
-		dbLogger.error(e);
+		dbLogger.error(err);
 		process.exit(1);
 	}
 }
+*/
 
-async function spawnWorkers(limit: number = 1) {
+async function spawnWorkers(limit = 1) {
 	const workers = Math.min(limit, os.cpus().length);
 	bootLogger.info(`Starting ${workers} worker${workers === 1 ? '' : 's'}...`);
 	await Promise.all([...Array(workers)].map(spawnWorker));
@@ -155,7 +162,7 @@ function spawnWorker(): Promise<void> {
 		const worker = cluster.fork();
 		worker.on('message', message => {
 			if (message === 'listenFailed') {
-				bootLogger.error(`The server Listen failed due to the previous error.`);
+				bootLogger.error('The server Listen failed due to the previous error.');
 				process.exit(1);
 			}
 			if (message !== 'ready') return;
diff --git a/packages/backend/src/boot/worker.ts b/packages/backend/src/boot/worker.ts
index 8038e25631..91f0c76317 100644
--- a/packages/backend/src/boot/worker.ts
+++ b/packages/backend/src/boot/worker.ts
@@ -1,17 +1,29 @@
 import cluster from 'node:cluster';
-import { initDb } from '../db/postgre.js';
+import { NestFactory } from '@nestjs/core';
+import { envOption } from '@/env.js';
+import { ChartManagementService } from '@/core/chart/ChartManagementService.js';
+import { ServerService } from '@/server/ServerService.js';
+import { QueueProcessorService } from '@/queue/QueueProcessorService.js';
+import { AppModule } from '../AppModule.js';
 
 /**
  * Init worker process
  */
 export async function workerMain() {
-	await initDb();
+	const app = await NestFactory.createApplicationContext(AppModule);
+	app.enableShutdownHooks();
 
 	// start server
-	await import('../server/index.js').then(x => x.default());
+	const serverService = app.get(ServerService);
+	serverService.launch();
 
 	// start job queue
-	import('../queue/index.js').then(x => x.default());
+	if (!envOption.onlyServer) {
+		const queueProcessorService = app.get(QueueProcessorService);
+		queueProcessorService.start();
+	}
+
+	app.get(ChartManagementService).run();
 
 	if (cluster.isWorker) {
 		// Send a 'ready' message to parent process
diff --git a/packages/backend/src/config.ts b/packages/backend/src/config.ts
new file mode 100644
index 0000000000..11d8db5c04
--- /dev/null
+++ b/packages/backend/src/config.ts
@@ -0,0 +1,149 @@
+/**
+ * Config loader
+ */
+
+import * as fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import * as yaml from 'js-yaml';
+
+/**
+ * ユーザーが設定する必要のある情報
+ */
+export type Source = {
+	repository_url?: string;
+	feedback_url?: string;
+	url: string;
+	port: number;
+	disableHsts?: boolean;
+	db: {
+		host: string;
+		port: number;
+		db: string;
+		user: string;
+		pass: string;
+		disableCache?: boolean;
+		extra?: { [x: string]: string };
+	};
+	redis: {
+		host: string;
+		port: number;
+		family?: number;
+		pass: string;
+		db?: number;
+		prefix?: string;
+	};
+	elasticsearch: {
+		host: string;
+		port: number;
+		ssl?: boolean;
+		user?: string;
+		pass?: string;
+		index?: string;
+	};
+
+	proxy?: string;
+	proxySmtp?: string;
+	proxyBypassHosts?: string[];
+
+	allowedPrivateNetworks?: string[];
+
+	maxFileSize?: number;
+
+	accesslog?: string;
+
+	clusterLimit?: number;
+
+	id: string;
+
+	outgoingAddressFamily?: 'ipv4' | 'ipv6' | 'dual';
+
+	deliverJobConcurrency?: number;
+	inboxJobConcurrency?: number;
+	deliverJobPerSec?: number;
+	inboxJobPerSec?: number;
+	deliverJobMaxAttempts?: number;
+	inboxJobMaxAttempts?: number;
+
+	syslog: {
+		host: string;
+		port: number;
+	};
+
+	mediaProxy?: string;
+	proxyRemoteFiles?: boolean;
+
+	signToActivityPubGet?: boolean;
+};
+
+/**
+ * Misskeyが自動的に(ユーザーが設定した情報から推論して)設定する情報
+ */
+export type Mixin = {
+	version: string;
+	host: string;
+	hostname: string;
+	scheme: string;
+	wsScheme: string;
+	apiUrl: string;
+	wsUrl: string;
+	authUrl: string;
+	driveUrl: string;
+	userAgent: string;
+	clientEntry: string;
+};
+
+export type Config = Source & Mixin;
+
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = dirname(_filename);
+
+/**
+ * Path of configuration directory
+ */
+const dir = `${_dirname}/../../../.config`;
+
+/**
+ * Path of configuration file
+ */
+const path = process.env.NODE_ENV === 'test'
+	? `${dir}/test.yml`
+	: `${dir}/default.yml`;
+
+export function loadConfig() {
+	const meta = JSON.parse(fs.readFileSync(`${_dirname}/../../../built/meta.json`, 'utf-8'));
+	const clientManifest = JSON.parse(fs.readFileSync(`${_dirname}/../../../built/_client_dist_/manifest.json`, 'utf-8'));
+	const config = yaml.load(fs.readFileSync(path, 'utf-8')) as Source;
+
+	const mixin = {} as Mixin;
+
+	const url = tryCreateUrl(config.url);
+
+	config.url = url.origin;
+
+	config.port = config.port ?? parseInt(process.env.PORT ?? '', 10);
+
+	mixin.version = meta.version;
+	mixin.host = url.host;
+	mixin.hostname = url.hostname;
+	mixin.scheme = url.protocol.replace(/:$/, '');
+	mixin.wsScheme = mixin.scheme.replace('http', 'ws');
+	mixin.wsUrl = `${mixin.wsScheme}://${mixin.host}`;
+	mixin.apiUrl = `${mixin.scheme}://${mixin.host}/api`;
+	mixin.authUrl = `${mixin.scheme}://${mixin.host}/auth`;
+	mixin.driveUrl = `${mixin.scheme}://${mixin.host}/files`;
+	mixin.userAgent = `Misskey/${meta.version} (${config.url})`;
+	mixin.clientEntry = clientManifest['src/init.ts'];
+
+	if (!config.redis.prefix) config.redis.prefix = mixin.host;
+
+	return Object.assign(config, mixin);
+}
+
+function tryCreateUrl(url: string) {
+	try {
+		return new URL(url);
+	} catch (e) {
+		throw `url="${url}" is not a valid URL.`;
+	}
+}
diff --git a/packages/backend/src/config/index.ts b/packages/backend/src/config/index.ts
deleted file mode 100644
index 3e53b00036..0000000000
--- a/packages/backend/src/config/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import load from './load.js';
-
-export default load();
diff --git a/packages/backend/src/config/load.ts b/packages/backend/src/config/load.ts
deleted file mode 100644
index 9654a4f3b0..0000000000
--- a/packages/backend/src/config/load.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Config loader
- */
-
-import * as fs from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { dirname } from 'node:path';
-import * as yaml from 'js-yaml';
-import { Source, Mixin } from './types.js';
-
-const _filename = fileURLToPath(import.meta.url);
-const _dirname = dirname(_filename);
-
-/**
- * Path of configuration directory
- */
-const dir = `${_dirname}/../../../../.config`;
-
-/**
- * Path of configuration file
- */
-const path = process.env.NODE_ENV === 'test'
-	? `${dir}/test.yml`
-	: `${dir}/default.yml`;
-
-export default function load() {
-	const meta = JSON.parse(fs.readFileSync(`${_dirname}/../../../../built/meta.json`, 'utf-8'));
-	const clientManifest = JSON.parse(fs.readFileSync(`${_dirname}/../../../../built/_client_dist_/manifest.json`, 'utf-8'));
-	const config = yaml.load(fs.readFileSync(path, 'utf-8')) as Source;
-
-	const mixin = {} as Mixin;
-
-	const url = tryCreateUrl(config.url);
-
-	config.url = url.origin;
-
-	config.port = config.port || parseInt(process.env.PORT || '', 10);
-
-	mixin.version = meta.version;
-	mixin.host = url.host;
-	mixin.hostname = url.hostname;
-	mixin.scheme = url.protocol.replace(/:$/, '');
-	mixin.wsScheme = mixin.scheme.replace('http', 'ws');
-	mixin.wsUrl = `${mixin.wsScheme}://${mixin.host}`;
-	mixin.apiUrl = `${mixin.scheme}://${mixin.host}/api`;
-	mixin.authUrl = `${mixin.scheme}://${mixin.host}/auth`;
-	mixin.driveUrl = `${mixin.scheme}://${mixin.host}/files`;
-	mixin.userAgent = `Misskey/${meta.version} (${config.url})`;
-	mixin.clientEntry = clientManifest['src/init.ts'];
-
-	if (!config.redis.prefix) config.redis.prefix = mixin.host;
-
-	return Object.assign(config, mixin);
-}
-
-function tryCreateUrl(url: string) {
-	try {
-		return new URL(url);
-	} catch (e) {
-		throw `url="${url}" is not a valid URL.`;
-	}
-}
diff --git a/packages/backend/src/config/types.ts b/packages/backend/src/config/types.ts
deleted file mode 100644
index 78510c8377..0000000000
--- a/packages/backend/src/config/types.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * ユーザーが設定する必要のある情報
- */
-export type Source = {
-	repository_url?: string;
-	feedback_url?: string;
-	url: string;
-	port: number;
-	disableHsts?: boolean;
-	db: {
-		host: string;
-		port: number;
-		db: string;
-		user: string;
-		pass: string;
-		disableCache?: boolean;
-		extra?: { [x: string]: string };
-	};
-	redis: {
-		host: string;
-		port: number;
-		family?: number;
-		pass: string;
-		db?: number;
-		prefix?: string;
-	};
-	elasticsearch: {
-		host: string;
-		port: number;
-		ssl?: boolean;
-		user?: string;
-		pass?: string;
-		index?: string;
-	};
-
-	proxy?: string;
-	proxySmtp?: string;
-	proxyBypassHosts?: string[];
-
-	allowedPrivateNetworks?: string[];
-
-	maxFileSize?: number;
-
-	accesslog?: string;
-
-	clusterLimit?: number;
-
-	id: string;
-
-	outgoingAddressFamily?: 'ipv4' | 'ipv6' | 'dual';
-
-	deliverJobConcurrency?: number;
-	inboxJobConcurrency?: number;
-	deliverJobPerSec?: number;
-	inboxJobPerSec?: number;
-	deliverJobMaxAttempts?: number;
-	inboxJobMaxAttempts?: number;
-
-	syslog: {
-		host: string;
-		port: number;
-	};
-
-	mediaProxy?: string;
-	proxyRemoteFiles?: boolean;
-
-	signToActivityPubGet?: boolean;
-};
-
-/**
- * Misskeyが自動的に(ユーザーが設定した情報から推論して)設定する情報
- */
-export type Mixin = {
-	version: string;
-	host: string;
-	hostname: string;
-	scheme: string;
-	wsScheme: string;
-	apiUrl: string;
-	wsUrl: string;
-	authUrl: string;
-	driveUrl: string;
-	userAgent: string;
-	clientEntry: string;
-};
-
-export type Config = Source & Mixin;
diff --git a/packages/backend/src/core/AccountUpdateService.ts b/packages/backend/src/core/AccountUpdateService.ts
new file mode 100644
index 0000000000..204e1d0170
--- /dev/null
+++ b/packages/backend/src/core/AccountUpdateService.ts
@@ -0,0 +1,38 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type { User } from '@/models/entities/User.js';
+import { ApRendererService } from '@/core/remote/activitypub/ApRendererService.js';
+import { RelayService } from '@/core/RelayService.js';
+import { ApDeliverManagerService } from '@/core/remote/activitypub/ApDeliverManagerService.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+
+@Injectable()
+export class AccountUpdateService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private userEntityService: UserEntityService,
+		private apRendererService: ApRendererService,
+		private apDeliverManagerService: ApDeliverManagerService,
+		private relayService: RelayService,
+	) {
+	}
+
+	public async publishToFollowers(userId: User['id']) {
+		const user = await this.usersRepository.findOneBy({ id: userId });
+		if (user == null) throw new Error('user not found');
+	
+		// フォロワーがリモートユーザーかつ投稿者がローカルユーザーならUpdateを配信
+		if (this.userEntityService.isLocalUser(user)) {
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderUpdate(await this.apRendererService.renderPerson(user), user));
+			this.apDeliverManagerService.deliverToFollowers(user, content);
+			this.relayService.deliverToRelays(user, content);
+		}
+	}
+}
diff --git a/packages/backend/src/core/AiService.ts b/packages/backend/src/core/AiService.ts
new file mode 100644
index 0000000000..1cfc3382a9
--- /dev/null
+++ b/packages/backend/src/core/AiService.ts
@@ -0,0 +1,60 @@
+import * as fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import { Inject, Injectable } from '@nestjs/common';
+import * as nsfw from 'nsfwjs';
+import si from 'systeminformation';
+import { Config } from '@/config.js';
+import { DI } from '@/di-symbols.js';
+
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = dirname(_filename);
+
+const REQUIRED_CPU_FLAGS = ['avx2', 'fma'];
+let isSupportedCpu: undefined | boolean = undefined;
+
+@Injectable()
+export class AiService {
+	#model: nsfw.NSFWJS;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+	) {
+	}
+
+	public async detectSensitive(path: string): Promise<nsfw.predictionType[] | null> {
+		try {
+			if (isSupportedCpu === undefined) {
+				const cpuFlags = await this.#getCpuFlags();
+				isSupportedCpu = REQUIRED_CPU_FLAGS.every(required => cpuFlags.includes(required));
+			}
+	
+			if (!isSupportedCpu) {
+				console.error('This CPU cannot use TensorFlow.');
+				return null;
+			}
+	
+			const tf = await import('@tensorflow/tfjs-node');
+	
+			if (this.#model == null) this.#model = await nsfw.load(`file://${_dirname}/../../nsfw-model/`, { size: 299 });
+	
+			const buffer = await fs.promises.readFile(path);
+			const image = await tf.node.decodeImage(buffer, 3) as any;
+			try {
+				const predictions = await this.#model.classify(image);
+				return predictions;
+			} finally {
+				image.dispose();
+			}
+		} catch (err) {
+			console.error(err);
+			return null;
+		}
+	}
+
+	async #getCpuFlags(): Promise<string[]> {
+		const str = await si.cpuFlags();
+		return str.split(/\s+/);
+	}
+}
diff --git a/packages/backend/src/core/AntennaService.ts b/packages/backend/src/core/AntennaService.ts
new file mode 100644
index 0000000000..8993880a06
--- /dev/null
+++ b/packages/backend/src/core/AntennaService.ts
@@ -0,0 +1,228 @@
+import { Inject, Injectable } from '@nestjs/common';
+import Redis from 'ioredis';
+import type { Antenna } from '@/models/entities/Antenna.js';
+import type { Note } from '@/models/entities/Note.js';
+import type { User } from '@/models/entities/User.js';
+import { IdService } from '@/core/IdService.js';
+import { isUserRelated } from '@/misc/is-user-related.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import * as Acct from '@/misc/acct.js';
+import { Cache } from '@/misc/cache.js';
+import type { Packed } from '@/misc/schema.js';
+import { DI } from '@/di-symbols.js';
+import { MutingsRepository, BlockingsRepository, NotesRepository, AntennaNotesRepository, AntennasRepository, UserGroupJoiningsRepository, UserListJoiningsRepository } from '@/models/index.js';
+import { UtilityService } from './UtilityService.js';
+import type { OnApplicationShutdown } from '@nestjs/common';
+
+@Injectable()
+export class AntennaService implements OnApplicationShutdown {
+	#antennasFetched: boolean;
+	#antennas: Antenna[];
+	#blockingCache: Cache<User['id'][]>;
+
+	constructor(
+		@Inject(DI.redisSubscriber)
+		private redisSubscriber: Redis.Redis,
+
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.antennaNotesRepository)
+		private antennaNotesRepository: AntennaNotesRepository,
+
+		@Inject(DI.antennasRepository)
+		private antennasRepository: AntennasRepository,
+
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+
+		@Inject(DI.userListJoiningsRepository)
+		private userListJoiningsRepository: UserListJoiningsRepository,
+
+		private utilityService: UtilityService,
+		private idService: IdService,
+		private globalEventServie: GlobalEventService,
+	) {
+		this.#antennasFetched = false;
+		this.#antennas = [];
+		this.#blockingCache = new Cache<User['id'][]>(1000 * 60 * 5);
+
+		this.redisSubscriber.on('message', this.onRedisMessage);
+	}
+
+	public onApplicationShutdown(signal?: string | undefined) {
+		this.redisSubscriber.off('message', this.onRedisMessage);
+	}
+
+	private async onRedisMessage(_, data) {
+		const obj = JSON.parse(data);
+
+		if (obj.channel === 'internal') {
+			const { type, body } = obj.message;
+			switch (type) {
+				case 'antennaCreated':
+					this.#antennas.push(body);
+					break;
+				case 'antennaUpdated':
+					this.#antennas[this.#antennas.findIndex(a => a.id === body.id)] = body;
+					break;
+				case 'antennaDeleted':
+					this.#antennas = this.#antennas.filter(a => a.id !== body.id);
+					break;
+				default:
+					break;
+			}
+		}
+	}
+
+	public async addNoteToAntenna(antenna: Antenna, note: Note, noteUser: { id: User['id']; }): Promise<void> {
+		// 通知しない設定になっているか、自分自身の投稿なら既読にする
+		const read = !antenna.notify || (antenna.userId === noteUser.id);
+	
+		this.antennaNotesRepository.insert({
+			id: this.idService.genId(),
+			antennaId: antenna.id,
+			noteId: note.id,
+			read: read,
+		});
+	
+		this.globalEventServie.publishAntennaStream(antenna.id, 'note', note);
+	
+		if (!read) {
+			const mutings = await this.mutingsRepository.find({
+				where: {
+					muterId: antenna.userId,
+				},
+				select: ['muteeId'],
+			});
+	
+			// Copy
+			const _note: Note = {
+				...note,
+			};
+	
+			if (note.replyId != null) {
+				_note.reply = await this.notesRepository.findOneByOrFail({ id: note.replyId });
+			}
+			if (note.renoteId != null) {
+				_note.renote = await this.notesRepository.findOneByOrFail({ id: note.renoteId });
+			}
+	
+			if (isUserRelated(_note, new Set<string>(mutings.map(x => x.muteeId)))) {
+				return;
+			}
+	
+			// 2秒経っても既読にならなかったら通知
+			setTimeout(async () => {
+				const unread = await this.antennaNotesRepository.findOneBy({ antennaId: antenna.id, read: false });
+				if (unread) {
+					this.globalEventServie.publishMainStream(antenna.userId, 'unreadAntenna', antenna);
+				}
+			}, 2000);
+		}
+	}
+
+	// NOTE: フォローしているユーザーのノート、リストのユーザーのノート、グループのユーザーのノート指定はパフォーマンス上の理由で無効になっている
+
+	/**
+	 * noteUserFollowers / antennaUserFollowing はどちらか一方が指定されていればよい
+	 */
+	public async checkHitAntenna(antenna: Antenna, note: (Note | Packed<'Note'>), noteUser: { id: User['id']; username: string; host: string | null; }, noteUserFollowers?: User['id'][], antennaUserFollowing?: User['id'][]): Promise<boolean> {
+		if (note.visibility === 'specified') return false;
+	
+		// アンテナ作成者がノート作成者にブロックされていたらスキップ
+		const blockings = await this.#blockingCache.fetch(noteUser.id, () => this.blockingsRepository.findBy({ blockerId: noteUser.id }).then(res => res.map(x => x.blockeeId)));
+		if (blockings.some(blocking => blocking === antenna.userId)) return false;
+	
+		if (note.visibility === 'followers') {
+			if (noteUserFollowers && !noteUserFollowers.includes(antenna.userId)) return false;
+			if (antennaUserFollowing && !antennaUserFollowing.includes(note.userId)) return false;
+		}
+	
+		if (!antenna.withReplies && note.replyId != null) return false;
+	
+		if (antenna.src === 'home') {
+			if (noteUserFollowers && !noteUserFollowers.includes(antenna.userId)) return false;
+			if (antennaUserFollowing && !antennaUserFollowing.includes(note.userId)) return false;
+		} else if (antenna.src === 'list') {
+			const listUsers = (await this.userListJoiningsRepository.findBy({
+				userListId: antenna.userListId!,
+			})).map(x => x.userId);
+	
+			if (!listUsers.includes(note.userId)) return false;
+		} else if (antenna.src === 'group') {
+			const joining = await this.userGroupJoiningsRepository.findOneByOrFail({ id: antenna.userGroupJoiningId! });
+	
+			const groupUsers = (await this.userGroupJoiningsRepository.findBy({
+				userGroupId: joining.userGroupId,
+			})).map(x => x.userId);
+	
+			if (!groupUsers.includes(note.userId)) return false;
+		} else if (antenna.src === 'users') {
+			const accts = antenna.users.map(x => {
+				const { username, host } = Acct.parse(x);
+				return this.utilityService.getFullApAccount(username, host).toLowerCase();
+			});
+			if (!accts.includes(this.utilityService.getFullApAccount(noteUser.username, noteUser.host).toLowerCase())) return false;
+		}
+	
+		const keywords = antenna.keywords
+			// Clean up
+			.map(xs => xs.filter(x => x !== ''))
+			.filter(xs => xs.length > 0);
+	
+		if (keywords.length > 0) {
+			if (note.text == null) return false;
+	
+			const matched = keywords.some(and =>
+				and.every(keyword =>
+					antenna.caseSensitive
+						? note.text!.includes(keyword)
+						: note.text!.toLowerCase().includes(keyword.toLowerCase()),
+				));
+	
+			if (!matched) return false;
+		}
+	
+		const excludeKeywords = antenna.excludeKeywords
+			// Clean up
+			.map(xs => xs.filter(x => x !== ''))
+			.filter(xs => xs.length > 0);
+	
+		if (excludeKeywords.length > 0) {
+			if (note.text == null) return false;
+	
+			const matched = excludeKeywords.some(and =>
+				and.every(keyword =>
+					antenna.caseSensitive
+						? note.text!.includes(keyword)
+						: note.text!.toLowerCase().includes(keyword.toLowerCase()),
+				));
+	
+			if (matched) return false;
+		}
+	
+		if (antenna.withFile) {
+			if (note.fileIds && note.fileIds.length === 0) return false;
+		}
+	
+		// TODO: eval expression
+	
+		return true;
+	}
+
+	public async getAntennas() {
+		if (!this.#antennasFetched) {
+			this.#antennas = await this.antennasRepository.find();
+			this.#antennasFetched = true;
+		}
+	
+		return this.#antennas;
+	}
+}
diff --git a/packages/backend/src/core/AppLockService.ts b/packages/backend/src/core/AppLockService.ts
new file mode 100644
index 0000000000..f3c345493b
--- /dev/null
+++ b/packages/backend/src/core/AppLockService.ts
@@ -0,0 +1,40 @@
+import { promisify } from 'node:util';
+import { Inject, Injectable } from '@nestjs/common';
+import redisLock from 'redis-lock';
+import Redis from 'ioredis';
+import { DI } from '@/di-symbols.js';
+
+/**
+ * Retry delay (ms) for lock acquisition
+ */
+const retryDelay = 100;
+
+@Injectable()
+export class AppLockService {
+	#lock: (key: string, timeout?: number) => Promise<() => void>;
+
+	constructor(
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+	) {
+		this.#lock = promisify(redisLock(this.redisClient, retryDelay));
+	}
+
+	/**
+	 * Get AP Object lock
+	 * @param uri AP object ID
+	 * @param timeout Lock timeout (ms), The timeout releases previous lock.
+	 * @returns Unlock function
+	 */
+	public getApLock(uri: string, timeout = 30 * 1000): Promise<() => void> {
+		return this.#lock(`ap-object:${uri}`, timeout);
+	}
+
+	public getFetchInstanceMetadataLock(host: string, timeout = 30 * 1000): Promise<() => void> {
+		return this.#lock(`instance:${host}`, timeout);
+	}
+
+	public getChartInsertLock(lockKey: string, timeout = 30 * 1000): Promise<() => void> {
+		return this.#lock(`chart-insert:${lockKey}`, timeout);
+	}
+}
diff --git a/packages/backend/src/core/CaptchaService.ts b/packages/backend/src/core/CaptchaService.ts
new file mode 100644
index 0000000000..891e5315c2
--- /dev/null
+++ b/packages/backend/src/core/CaptchaService.ts
@@ -0,0 +1,70 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import type { UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import { HttpRequestService } from './HttpRequestService.js';
+
+type CaptchaResponse = {
+	success: boolean;
+	'error-codes'?: string[];
+};
+
+@Injectable()
+export class CaptchaService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private httpRequestService: HttpRequestService,
+	) {
+	}
+
+	async #getCaptchaResponse(url: string, secret: string, response: string): Promise<CaptchaResponse> {
+		const params = new URLSearchParams({
+			secret,
+			response,
+		});
+	
+		const res = await fetch(url, {
+			method: 'POST',
+			body: params,
+			headers: {
+				'User-Agent': this.config.userAgent,
+			},
+			// TODO
+			//timeout: 10 * 1000,
+			agent: (url, bypassProxy) => this.httpRequestService.getAgentByUrl(url, bypassProxy),
+		}).catch(err => {
+			throw `${err.message ?? err}`;
+		});
+	
+		if (!res.ok) {
+			throw `${res.status}`;
+		}
+	
+		return await res.json() as CaptchaResponse;
+	}	
+	
+	public async verifyRecaptcha(secret: string, response: string): Promise<void> {
+		const result = await this.#getCaptchaResponse('https://www.recaptcha.net/recaptcha/api/siteverify', secret, response).catch(e => {
+			throw `recaptcha-request-failed: ${e}`;
+		});
+
+		if (result.success !== true) {
+			const errorCodes = result['error-codes'] ? result['error-codes'].join(', ') : '';
+			throw `recaptcha-failed: ${errorCodes}`;
+		}
+	}
+
+	public async verifyHcaptcha(secret: string, response: string): Promise<void> {
+		const result = await this.#getCaptchaResponse('https://hcaptcha.com/siteverify', secret, response).catch(e => {
+			throw `hcaptcha-request-failed: ${e}`;
+		});
+
+		if (result.success !== true) {
+			const errorCodes = result['error-codes'] ? result['error-codes'].join(', ') : '';
+			throw `hcaptcha-failed: ${errorCodes}`;
+		}
+	}
+}
+
diff --git a/packages/backend/src/core/CoreModule.ts b/packages/backend/src/core/CoreModule.ts
new file mode 100644
index 0000000000..f6dd0debb9
--- /dev/null
+++ b/packages/backend/src/core/CoreModule.ts
@@ -0,0 +1,696 @@
+import { Module } from '@nestjs/common';
+import { DI } from '../di-symbols.js';
+import { AccountUpdateService } from './AccountUpdateService.js';
+import { AiService } from './AiService.js';
+import { AntennaService } from './AntennaService.js';
+import { AppLockService } from './AppLockService.js';
+import { CaptchaService } from './CaptchaService.js';
+import { CreateNotificationService } from './CreateNotificationService.js';
+import { CreateSystemUserService } from './CreateSystemUserService.js';
+import { CustomEmojiService } from './CustomEmojiService.js';
+import { DeleteAccountService } from './DeleteAccountService.js';
+import { DownloadService } from './DownloadService.js';
+import { DriveService } from './DriveService.js';
+import { EmailService } from './EmailService.js';
+import { FederatedInstanceService } from './FederatedInstanceService.js';
+import { FetchInstanceMetadataService } from './FetchInstanceMetadataService.js';
+import { GlobalEventService } from './GlobalEventService.js';
+import { HashtagService } from './HashtagService.js';
+import { HttpRequestService } from './HttpRequestService.js';
+import { IdService } from './IdService.js';
+import { ImageProcessingService } from './ImageProcessingService.js';
+import { InstanceActorService } from './InstanceActorService.js';
+import { InternalStorageService } from './InternalStorageService.js';
+import { MessagingService } from './MessagingService.js';
+import { MetaService } from './MetaService.js';
+import { MfmService } from './MfmService.js';
+import { ModerationLogService } from './ModerationLogService.js';
+import { NoteCreateService } from './NoteCreateService.js';
+import { NoteDeleteService } from './NoteDeleteService.js';
+import { NotePiningService } from './NotePiningService.js';
+import { NoteReadService } from './NoteReadService.js';
+import { NotificationService } from './NotificationService.js';
+import { PollService } from './PollService.js';
+import { PushNotificationService } from './PushNotificationService.js';
+import { QueryService } from './QueryService.js';
+import { ReactionService } from './ReactionService.js';
+import { RelayService } from './RelayService.js';
+import { S3Service } from './S3Service.js';
+import { SignupService } from './SignupService.js';
+import { TwoFactorAuthenticationService } from './TwoFactorAuthenticationService.js';
+import { UserBlockingService } from './UserBlockingService.js';
+import { UserCacheService } from './UserCacheService.js';
+import { UserFollowingService } from './UserFollowingService.js';
+import { UserKeypairStoreService } from './UserKeypairStoreService.js';
+import { UserListService } from './UserListService.js';
+import { UserMutingService } from './UserMutingService.js';
+import { UserSuspendService } from './UserSuspendService.js';
+import { VideoProcessingService } from './VideoProcessingService.js';
+import { WebhookService } from './WebhookService.js';
+import { ProxyAccountService } from './ProxyAccountService.js';
+import { UtilityService } from './UtilityService.js';
+import { FileInfoService } from './FileInfoService.js';
+import FederationChart from './chart/charts/federation.js';
+import NotesChart from './chart/charts/notes.js';
+import UsersChart from './chart/charts/users.js';
+import ActiveUsersChart from './chart/charts/active-users.js';
+import InstanceChart from './chart/charts/instance.js';
+import PerUserNotesChart from './chart/charts/per-user-notes.js';
+import DriveChart from './chart/charts/drive.js';
+import PerUserReactionsChart from './chart/charts/per-user-reactions.js';
+import HashtagChart from './chart/charts/hashtag.js';
+import PerUserFollowingChart from './chart/charts/per-user-following.js';
+import PerUserDriveChart from './chart/charts/per-user-drive.js';
+import ApRequestChart from './chart/charts/ap-request.js';
+import { ChartManagementService } from './chart/ChartManagementService.js';
+import { AbuseUserReportEntityService } from './entities/AbuseUserReportEntityService.js';
+import { AntennaEntityService } from './entities/AntennaEntityService.js';
+import { AppEntityService } from './entities/AppEntityService.js';
+import { AuthSessionEntityService } from './entities/AuthSessionEntityService.js';
+import { BlockingEntityService } from './entities/BlockingEntityService.js';
+import { ChannelEntityService } from './entities/ChannelEntityService.js';
+import { ClipEntityService } from './entities/ClipEntityService.js';
+import { DriveFileEntityService } from './entities/DriveFileEntityService.js';
+import { DriveFolderEntityService } from './entities/DriveFolderEntityService.js';
+import { EmojiEntityService } from './entities/EmojiEntityService.js';
+import { FollowingEntityService } from './entities/FollowingEntityService.js';
+import { FollowRequestEntityService } from './entities/FollowRequestEntityService.js';
+import { GalleryLikeEntityService } from './entities/GalleryLikeEntityService.js';
+import { GalleryPostEntityService } from './entities/GalleryPostEntityService.js';
+import { HashtagEntityService } from './entities/HashtagEntityService.js';
+import { InstanceEntityService } from './entities/InstanceEntityService.js';
+import { MessagingMessageEntityService } from './entities/MessagingMessageEntityService.js';
+import { ModerationLogEntityService } from './entities/ModerationLogEntityService.js';
+import { MutingEntityService } from './entities/MutingEntityService.js';
+import { NoteEntityService } from './entities/NoteEntityService.js';
+import { NoteFavoriteEntityService } from './entities/NoteFavoriteEntityService.js';
+import { NoteReactionEntityService } from './entities/NoteReactionEntityService.js';
+import { NotificationEntityService } from './entities/NotificationEntityService.js';
+import { PageEntityService } from './entities/PageEntityService.js';
+import { PageLikeEntityService } from './entities/PageLikeEntityService.js';
+import { SigninEntityService } from './entities/SigninEntityService.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+import { UserGroupEntityService } from './entities/UserGroupEntityService.js';
+import { UserGroupInvitationEntityService } from './entities/UserGroupInvitationEntityService.js';
+import { UserListEntityService } from './entities/UserListEntityService.js';
+import { ApAudienceService } from './remote/activitypub/ApAudienceService.js';
+import { ApDbResolverService } from './remote/activitypub/ApDbResolverService.js';
+import { ApDeliverManagerService } from './remote/activitypub/ApDeliverManagerService.js';
+import { ApInboxService } from './remote/activitypub/ApInboxService.js';
+import { ApLoggerService } from './remote/activitypub/ApLoggerService.js';
+import { ApMfmService } from './remote/activitypub/ApMfmService.js';
+import { ApRendererService } from './remote/activitypub/ApRendererService.js';
+import { ApRequestService } from './remote/activitypub/ApRequestService.js';
+import { ApResolverService } from './remote/activitypub/ApResolverService.js';
+import { LdSignatureService } from './remote/activitypub/LdSignatureService.js';
+import { RemoteLoggerService } from './remote/RemoteLoggerService.js';
+import { ResolveUserService } from './remote/ResolveUserService.js';
+import { WebfingerService } from './remote/WebfingerService.js';
+import { ApImageService } from './remote/activitypub/models/ApImageService.js';
+import { ApMentionService } from './remote/activitypub/models/ApMentionService.js';
+import { ApNoteService } from './remote/activitypub/models/ApNoteService.js';
+import { ApPersonService } from './remote/activitypub/models/ApPersonService.js';
+import { ApQuestionService } from './remote/activitypub/models/ApQuestionService.js';
+import { QueueModule } from './queue/QueueModule.js';
+import { QueueService } from './QueueService.js';
+import type { Provider } from '@nestjs/common';
+
+//#region 文字列ベースでのinjection用(循環参照対応のため)
+const $AccountUpdateService: Provider = { provide: 'AccountUpdateService', useClass: AccountUpdateService };
+const $AiService: Provider = { provide: 'AiService', useClass: AiService };
+const $AntennaService: Provider = { provide: 'AntennaService', useClass: AntennaService };
+const $AppLockService: Provider = { provide: 'AppLockService', useClass: AppLockService };
+const $CaptchaService: Provider = { provide: 'CaptchaService', useClass: CaptchaService };
+const $CreateNotificationService: Provider = { provide: 'CreateNotificationService', useClass: CreateNotificationService };
+const $CreateSystemUserService: Provider = { provide: 'CreateSystemUserService', useClass: CreateSystemUserService };
+const $CustomEmojiService: Provider = { provide: 'CustomEmojiService', useClass: CustomEmojiService };
+const $DeleteAccountService: Provider = { provide: 'DeleteAccountService', useClass: DeleteAccountService };
+const $DownloadService: Provider = { provide: 'DownloadService', useClass: DownloadService };
+const $DriveService: Provider = { provide: 'DriveService', useClass: DriveService };
+const $EmailService: Provider = { provide: 'EmailService', useClass: EmailService };
+const $FederatedInstanceService: Provider = { provide: 'FederatedInstanceService', useClass: FederatedInstanceService };
+const $FetchInstanceMetadataService: Provider = { provide: 'FetchInstanceMetadataService', useClass: FetchInstanceMetadataService };
+const $GlobalEventService: Provider = { provide: 'GlobalEventService', useClass: GlobalEventService };
+const $HashtagService: Provider = { provide: 'HashtagService', useClass: HashtagService };
+const $HttpRequestService: Provider = { provide: 'HttpRequestService', useClass: HttpRequestService };
+const $IdService: Provider = { provide: 'IdService', useClass: IdService };
+const $ImageProcessingService: Provider = { provide: 'ImageProcessingService', useClass: ImageProcessingService };
+const $InstanceActorService: Provider = { provide: 'InstanceActorService', useClass: InstanceActorService };
+const $InternalStorageService: Provider = { provide: 'InternalStorageService', useClass: InternalStorageService };
+const $MessagingService: Provider = { provide: 'MessagingService', useClass: MessagingService };
+const $MetaService: Provider = { provide: 'MetaService', useClass: MetaService };
+const $MfmService: Provider = { provide: 'MfmService', useClass: MfmService };
+const $ModerationLogService: Provider = { provide: 'ModerationLogService', useClass: ModerationLogService };
+const $NoteCreateService: Provider = { provide: 'NoteCreateService', useClass: NoteCreateService };
+const $NoteDeleteService: Provider = { provide: 'NoteDeleteService', useClass: NoteDeleteService };
+const $NotePiningService: Provider = { provide: 'NotePiningService', useClass: NotePiningService };
+const $NoteReadService: Provider = { provide: 'NoteReadService', useClass: NoteReadService };
+const $NotificationService: Provider = { provide: 'NotificationService', useClass: NotificationService };
+const $PollService: Provider = { provide: 'PollService', useClass: PollService };
+const $ProxyAccountService: Provider = { provide: 'ProxyAccountService', useClass: ProxyAccountService };
+const $PushNotificationService: Provider = { provide: 'PushNotificationService', useClass: PushNotificationService };
+const $QueryService: Provider = { provide: 'QueryService', useClass: QueryService };
+const $ReactionService: Provider = { provide: 'ReactionService', useClass: ReactionService };
+const $RelayService: Provider = { provide: 'RelayService', useClass: RelayService };
+const $S3Service: Provider = { provide: 'S3Service', useClass: S3Service };
+const $SignupService: Provider = { provide: 'SignupService', useClass: SignupService };
+const $TwoFactorAuthenticationService: Provider = { provide: 'TwoFactorAuthenticationService', useClass: TwoFactorAuthenticationService };
+const $UserBlockingService: Provider = { provide: 'UserBlockingService', useClass: UserBlockingService };
+const $UserCacheService: Provider = { provide: 'UserCacheService', useClass: UserCacheService };
+const $UserFollowingService: Provider = { provide: 'UserFollowingService', useClass: UserFollowingService };
+const $UserKeypairStoreService: Provider = { provide: 'UserKeypairStoreService', useClass: UserKeypairStoreService };
+const $UserListService: Provider = { provide: 'UserListService', useClass: UserListService };
+const $UserMutingService: Provider = { provide: 'UserMutingService', useClass: UserMutingService };
+const $UserSuspendService: Provider = { provide: 'UserSuspendService', useClass: UserSuspendService };
+const $VideoProcessingService: Provider = { provide: 'VideoProcessingService', useClass: VideoProcessingService };
+const $WebhookService: Provider = { provide: 'WebhookService', useClass: WebhookService };
+const $UtilityService: Provider = { provide: 'UtilityService', useClass: UtilityService };
+const $FileInfoService: Provider = { provide: 'FileInfoService', useClass: FileInfoService };
+const $FederationChart: Provider = { provide: 'FederationChart', useClass: FederationChart };
+const $NotesChart: Provider = { provide: 'NotesChart', useClass: NotesChart };
+const $UsersChart: Provider = { provide: 'UsersChart', useClass: UsersChart };
+const $ActiveUsersChart: Provider = { provide: 'ActiveUsersChart', useClass: ActiveUsersChart };
+const $InstanceChart: Provider = { provide: 'InstanceChart', useClass: InstanceChart };
+const $PerUserNotesChart: Provider = { provide: 'PerUserNotesChart', useClass: PerUserNotesChart };
+const $DriveChart: Provider = { provide: 'DriveChart', useClass: DriveChart };
+const $PerUserReactionsChart: Provider = { provide: 'PerUserReactionsChart', useClass: PerUserReactionsChart };
+const $HashtagChart: Provider = { provide: 'HashtagChart', useClass: HashtagChart };
+const $PerUserFollowingChart: Provider = { provide: 'PerUserFollowingChart', useClass: PerUserFollowingChart };
+const $PerUserDriveChart: Provider = { provide: 'PerUserDriveChart', useClass: PerUserDriveChart };
+const $ApRequestChart: Provider = { provide: 'ApRequestChart', useClass: ApRequestChart };
+const $ChartManagementService: Provider = { provide: 'ChartManagementService', useClass: ChartManagementService };
+
+const $AbuseUserReportEntityService: Provider = { provide: 'AbuseUserReportEntityService', useClass: AbuseUserReportEntityService };
+const $AntennaEntityService: Provider = { provide: 'AntennaEntityService', useClass: AntennaEntityService };
+const $AppEntityService: Provider = { provide: 'AppEntityService', useClass: AppEntityService };
+const $AuthSessionEntityService: Provider = { provide: 'AuthSessionEntityService', useClass: AuthSessionEntityService };
+const $BlockingEntityService: Provider = { provide: 'BlockingEntityService', useClass: BlockingEntityService };
+const $ChannelEntityService: Provider = { provide: 'ChannelEntityService', useClass: ChannelEntityService };
+const $ClipEntityService: Provider = { provide: 'ClipEntityService', useClass: ClipEntityService };
+const $DriveFileEntityService: Provider = { provide: 'DriveFileEntityService', useClass: DriveFileEntityService };
+const $DriveFolderEntityService: Provider = { provide: 'DriveFolderEntityService', useClass: DriveFolderEntityService };
+const $EmojiEntityService: Provider = { provide: 'EmojiEntityService', useClass: EmojiEntityService };
+const $FollowingEntityService: Provider = { provide: 'FollowingEntityService', useClass: FollowingEntityService };
+const $FollowRequestEntityService: Provider = { provide: 'FollowRequestEntityService', useClass: FollowRequestEntityService };
+const $GalleryLikeEntityService: Provider = { provide: 'GalleryLikeEntityService', useClass: GalleryLikeEntityService };
+const $GalleryPostEntityService: Provider = { provide: 'GalleryPostEntityService', useClass: GalleryPostEntityService };
+const $HashtagEntityService: Provider = { provide: 'HashtagEntityService', useClass: HashtagEntityService };
+const $InstanceEntityService: Provider = { provide: 'InstanceEntityService', useClass: InstanceEntityService };
+const $MessagingMessageEntityService: Provider = { provide: 'MessagingMessageEntityService', useClass: MessagingMessageEntityService };
+const $ModerationLogEntityService: Provider = { provide: 'ModerationLogEntityService', useClass: ModerationLogEntityService };
+const $MutingEntityService: Provider = { provide: 'MutingEntityService', useClass: MutingEntityService };
+const $NoteEntityService: Provider = { provide: 'NoteEntityService', useClass: NoteEntityService };
+const $NoteFavoriteEntityService: Provider = { provide: 'NoteFavoriteEntityService', useClass: NoteFavoriteEntityService };
+const $NoteReactionEntityService: Provider = { provide: 'NoteReactionEntityService', useClass: NoteReactionEntityService };
+const $NotificationEntityService: Provider = { provide: 'NotificationEntityService', useClass: NotificationEntityService };
+const $PageEntityService: Provider = { provide: 'PageEntityService', useClass: PageEntityService };
+const $PageLikeEntityService: Provider = { provide: 'PageLikeEntityService', useClass: PageLikeEntityService };
+const $SigninEntityService: Provider = { provide: 'SigninEntityService', useClass: SigninEntityService };
+const $UserEntityService: Provider = { provide: 'UserEntityService', useClass: UserEntityService };
+const $UserGroupEntityService: Provider = { provide: 'UserGroupEntityService', useClass: UserGroupEntityService };
+const $UserGroupInvitationEntityService: Provider = { provide: 'UserGroupInvitationEntityService', useClass: UserGroupInvitationEntityService };
+const $UserListEntityService: Provider = { provide: 'UserListEntityService', useClass: UserListEntityService };
+
+const $ApAudienceService: Provider = { provide: 'ApAudienceService', useClass: ApAudienceService };
+const $ApDbResolverService: Provider = { provide: 'ApDbResolverService', useClass: ApDbResolverService };
+const $ApDeliverManagerService: Provider = { provide: 'ApDeliverManagerService', useClass: ApDeliverManagerService };
+const $ApInboxService: Provider = { provide: 'ApInboxService', useClass: ApInboxService };
+const $ApLoggerService: Provider = { provide: 'ApLoggerService', useClass: ApLoggerService };
+const $ApMfmService: Provider = { provide: 'ApMfmService', useClass: ApMfmService };
+const $ApRendererService: Provider = { provide: 'ApRendererService', useClass: ApRendererService };
+const $ApRequestService: Provider = { provide: 'ApRequestService', useClass: ApRequestService };
+const $ApResolverService: Provider = { provide: 'ApResolverService', useClass: ApResolverService };
+const $LdSignatureService: Provider = { provide: 'LdSignatureService', useClass: LdSignatureService };
+const $RemoteLoggerService: Provider = { provide: 'RemoteLoggerService', useClass: RemoteLoggerService };
+const $ResolveUserService: Provider = { provide: 'ResolveUserService', useClass: ResolveUserService };
+const $WebfingerService: Provider = { provide: 'WebfingerService', useClass: WebfingerService };
+const $ApImageService: Provider = { provide: 'ApImageService', useClass: ApImageService };
+const $ApMentionService: Provider = { provide: 'ApMentionService', useClass: ApMentionService };
+const $ApNoteService: Provider = { provide: 'ApNoteService', useClass: ApNoteService };
+const $ApPersonService: Provider = { provide: 'ApPersonService', useClass: ApPersonService };
+const $ApQuestionService: Provider = { provide: 'ApQuestionService', useClass: ApQuestionService };
+//#endregion
+
+@Module({
+	imports: [
+		QueueModule,
+	],
+	providers: [
+		AccountUpdateService,
+		AiService,
+		AntennaService,
+		AppLockService,
+		CaptchaService,
+		CreateNotificationService,
+		CreateSystemUserService,
+		CustomEmojiService,
+		DeleteAccountService,
+		DownloadService,
+		DriveService,
+		EmailService,
+		FederatedInstanceService,
+		FetchInstanceMetadataService,
+		GlobalEventService,
+		HashtagService,
+		HttpRequestService,
+		IdService,
+		ImageProcessingService,
+		InstanceActorService,
+		InternalStorageService,
+		MessagingService,
+		MetaService,
+		MfmService,
+		ModerationLogService,
+		NoteCreateService,
+		NoteDeleteService,
+		NotePiningService,
+		NoteReadService,
+		NotificationService,
+		PollService,
+		ProxyAccountService,
+		PushNotificationService,
+		QueryService,
+		ReactionService,
+		RelayService,
+		S3Service,
+		SignupService,
+		TwoFactorAuthenticationService,
+		UserBlockingService,
+		UserCacheService,
+		UserFollowingService,
+		UserKeypairStoreService,
+		UserListService,
+		UserMutingService,
+		UserSuspendService,
+		VideoProcessingService,
+		WebhookService,
+		UtilityService,
+		FileInfoService,
+		FederationChart,
+		NotesChart,
+		UsersChart,
+		ActiveUsersChart,
+		InstanceChart,
+		PerUserNotesChart,
+		DriveChart,
+		PerUserReactionsChart,
+		HashtagChart,
+		PerUserFollowingChart,
+		PerUserDriveChart,
+		ApRequestChart,
+		ChartManagementService,
+		AbuseUserReportEntityService,
+		AntennaEntityService,
+		AppEntityService,
+		AuthSessionEntityService,
+		BlockingEntityService,
+		ChannelEntityService,
+		ClipEntityService,
+		DriveFileEntityService,
+		DriveFolderEntityService,
+		EmojiEntityService,
+		FollowingEntityService,
+		FollowRequestEntityService,
+		GalleryLikeEntityService,
+		GalleryPostEntityService,
+		HashtagEntityService,
+		InstanceEntityService,
+		MessagingMessageEntityService,
+		ModerationLogEntityService,
+		MutingEntityService,
+		NoteEntityService,
+		NoteFavoriteEntityService,
+		NoteReactionEntityService,
+		NotificationEntityService,
+		PageEntityService,
+		PageLikeEntityService,
+		SigninEntityService,
+		UserEntityService,
+		UserGroupEntityService,
+		UserGroupInvitationEntityService,
+		UserListEntityService,
+		ApAudienceService,
+		ApDbResolverService,
+		ApDeliverManagerService,
+		ApInboxService,
+		ApLoggerService,
+		ApMfmService,
+		ApRendererService,
+		ApRequestService,
+		ApResolverService,
+		LdSignatureService,
+		RemoteLoggerService,
+		ResolveUserService,
+		WebfingerService,
+		ApImageService,
+		ApMentionService,
+		ApNoteService,
+		ApPersonService,
+		ApQuestionService,
+		QueueService,
+
+		//#region 文字列ベースでのinjection用(循環参照対応のため)
+		$AccountUpdateService,
+		$AiService,
+		$AntennaService,
+		$AppLockService,
+		$CaptchaService,
+		$CreateNotificationService,
+		$CreateSystemUserService,
+		$CustomEmojiService,
+		$DeleteAccountService,
+		$DownloadService,
+		$DriveService,
+		$EmailService,
+		$FederatedInstanceService,
+		$FetchInstanceMetadataService,
+		$GlobalEventService,
+		$HashtagService,
+		$HttpRequestService,
+		$IdService,
+		$ImageProcessingService,
+		$InstanceActorService,
+		$InternalStorageService,
+		$MessagingService,
+		$MetaService,
+		$MfmService,
+		$ModerationLogService,
+		$NoteCreateService,
+		$NoteDeleteService,
+		$NotePiningService,
+		$NoteReadService,
+		$NotificationService,
+		$PollService,
+		$ProxyAccountService,
+		$PushNotificationService,
+		$QueryService,
+		$ReactionService,
+		$RelayService,
+		$S3Service,
+		$SignupService,
+		$TwoFactorAuthenticationService,
+		$UserBlockingService,
+		$UserCacheService,
+		$UserFollowingService,
+		$UserKeypairStoreService,
+		$UserListService,
+		$UserMutingService,
+		$UserSuspendService,
+		$VideoProcessingService,
+		$WebhookService,
+		$UtilityService,
+		$FileInfoService,
+		$FederationChart,
+		$NotesChart,
+		$UsersChart,
+		$ActiveUsersChart,
+		$InstanceChart,
+		$PerUserNotesChart,
+		$DriveChart,
+		$PerUserReactionsChart,
+		$HashtagChart,
+		$PerUserFollowingChart,
+		$PerUserDriveChart,
+		$ApRequestChart,
+		$ChartManagementService,
+		$AbuseUserReportEntityService,
+		$AntennaEntityService,
+		$AppEntityService,
+		$AuthSessionEntityService,
+		$BlockingEntityService,
+		$ChannelEntityService,
+		$ClipEntityService,
+		$DriveFileEntityService,
+		$DriveFolderEntityService,
+		$EmojiEntityService,
+		$FollowingEntityService,
+		$FollowRequestEntityService,
+		$GalleryLikeEntityService,
+		$GalleryPostEntityService,
+		$HashtagEntityService,
+		$InstanceEntityService,
+		$MessagingMessageEntityService,
+		$ModerationLogEntityService,
+		$MutingEntityService,
+		$NoteEntityService,
+		$NoteFavoriteEntityService,
+		$NoteReactionEntityService,
+		$NotificationEntityService,
+		$PageEntityService,
+		$PageLikeEntityService,
+		$SigninEntityService,
+		$UserEntityService,
+		$UserGroupEntityService,
+		$UserGroupInvitationEntityService,
+		$UserListEntityService,
+		$ApAudienceService,
+		$ApDbResolverService,
+		$ApDeliverManagerService,
+		$ApInboxService,
+		$ApLoggerService,
+		$ApMfmService,
+		$ApRendererService,
+		$ApRequestService,
+		$ApResolverService,
+		$LdSignatureService,
+		$RemoteLoggerService,
+		$ResolveUserService,
+		$WebfingerService,
+		$ApImageService,
+		$ApMentionService,
+		$ApNoteService,
+		$ApPersonService,
+		$ApQuestionService,
+		//#endregion
+	],
+	exports: [
+		QueueModule,
+		AccountUpdateService,
+		AiService,
+		AntennaService,
+		AppLockService,
+		CaptchaService,
+		CreateNotificationService,
+		CreateSystemUserService,
+		CustomEmojiService,
+		DeleteAccountService,
+		DownloadService,
+		DriveService,
+		EmailService,
+		FederatedInstanceService,
+		FetchInstanceMetadataService,
+		GlobalEventService,
+		HashtagService,
+		HttpRequestService,
+		IdService,
+		ImageProcessingService,
+		InstanceActorService,
+		InternalStorageService,
+		MessagingService,
+		MetaService,
+		MfmService,
+		ModerationLogService,
+		NoteCreateService,
+		NoteDeleteService,
+		NotePiningService,
+		NoteReadService,
+		NotificationService,
+		PollService,
+		ProxyAccountService,
+		PushNotificationService,
+		QueryService,
+		ReactionService,
+		RelayService,
+		S3Service,
+		SignupService,
+		TwoFactorAuthenticationService,
+		UserBlockingService,
+		UserCacheService,
+		UserFollowingService,
+		UserKeypairStoreService,
+		UserListService,
+		UserMutingService,
+		UserSuspendService,
+		VideoProcessingService,
+		WebhookService,
+		UtilityService,
+		FileInfoService,
+		FederationChart,
+		NotesChart,
+		UsersChart,
+		ActiveUsersChart,
+		InstanceChart,
+		PerUserNotesChart,
+		DriveChart,
+		PerUserReactionsChart,
+		HashtagChart,
+		PerUserFollowingChart,
+		PerUserDriveChart,
+		ApRequestChart,
+		ChartManagementService,
+		AbuseUserReportEntityService,
+		AntennaEntityService,
+		AppEntityService,
+		AuthSessionEntityService,
+		BlockingEntityService,
+		ChannelEntityService,
+		ClipEntityService,
+		DriveFileEntityService,
+		DriveFolderEntityService,
+		EmojiEntityService,
+		FollowingEntityService,
+		FollowRequestEntityService,
+		GalleryLikeEntityService,
+		GalleryPostEntityService,
+		HashtagEntityService,
+		InstanceEntityService,
+		MessagingMessageEntityService,
+		ModerationLogEntityService,
+		MutingEntityService,
+		NoteEntityService,
+		NoteFavoriteEntityService,
+		NoteReactionEntityService,
+		NotificationEntityService,
+		PageEntityService,
+		PageLikeEntityService,
+		SigninEntityService,
+		UserEntityService,
+		UserGroupEntityService,
+		UserGroupInvitationEntityService,
+		UserListEntityService,
+		ApAudienceService,
+		ApDbResolverService,
+		ApDeliverManagerService,
+		ApInboxService,
+		ApLoggerService,
+		ApMfmService,
+		ApRendererService,
+		ApRequestService,
+		ApResolverService,
+		LdSignatureService,
+		RemoteLoggerService,
+		ResolveUserService,
+		WebfingerService,
+		ApImageService,
+		ApMentionService,
+		ApNoteService,
+		ApPersonService,
+		ApQuestionService,
+		QueueService,
+
+		//#region 文字列ベースでのinjection用(循環参照対応のため)
+		$AccountUpdateService,
+		$AiService,
+		$AntennaService,
+		$AppLockService,
+		$CaptchaService,
+		$CreateNotificationService,
+		$CreateSystemUserService,
+		$CustomEmojiService,
+		$DeleteAccountService,
+		$DownloadService,
+		$DriveService,
+		$EmailService,
+		$FederatedInstanceService,
+		$FetchInstanceMetadataService,
+		$GlobalEventService,
+		$HashtagService,
+		$HttpRequestService,
+		$IdService,
+		$ImageProcessingService,
+		$InstanceActorService,
+		$InternalStorageService,
+		$MessagingService,
+		$MetaService,
+		$MfmService,
+		$ModerationLogService,
+		$NoteCreateService,
+		$NoteDeleteService,
+		$NotePiningService,
+		$NoteReadService,
+		$NotificationService,
+		$PollService,
+		$ProxyAccountService,
+		$PushNotificationService,
+		$QueryService,
+		$ReactionService,
+		$RelayService,
+		$S3Service,
+		$SignupService,
+		$TwoFactorAuthenticationService,
+		$UserBlockingService,
+		$UserCacheService,
+		$UserFollowingService,
+		$UserKeypairStoreService,
+		$UserListService,
+		$UserMutingService,
+		$UserSuspendService,
+		$VideoProcessingService,
+		$WebhookService,
+		$UtilityService,
+		$FileInfoService,
+		$FederationChart,
+		$NotesChart,
+		$UsersChart,
+		$ActiveUsersChart,
+		$InstanceChart,
+		$PerUserNotesChart,
+		$DriveChart,
+		$PerUserReactionsChart,
+		$HashtagChart,
+		$PerUserFollowingChart,
+		$PerUserDriveChart,
+		$ApRequestChart,
+		$ChartManagementService,
+		$AbuseUserReportEntityService,
+		$AntennaEntityService,
+		$AppEntityService,
+		$AuthSessionEntityService,
+		$BlockingEntityService,
+		$ChannelEntityService,
+		$ClipEntityService,
+		$DriveFileEntityService,
+		$DriveFolderEntityService,
+		$EmojiEntityService,
+		$FollowingEntityService,
+		$FollowRequestEntityService,
+		$GalleryLikeEntityService,
+		$GalleryPostEntityService,
+		$HashtagEntityService,
+		$InstanceEntityService,
+		$MessagingMessageEntityService,
+		$ModerationLogEntityService,
+		$MutingEntityService,
+		$NoteEntityService,
+		$NoteFavoriteEntityService,
+		$NoteReactionEntityService,
+		$NotificationEntityService,
+		$PageEntityService,
+		$PageLikeEntityService,
+		$SigninEntityService,
+		$UserEntityService,
+		$UserGroupEntityService,
+		$UserGroupInvitationEntityService,
+		$UserListEntityService,
+		$ApAudienceService,
+		$ApDbResolverService,
+		$ApDeliverManagerService,
+		$ApInboxService,
+		$ApLoggerService,
+		$ApMfmService,
+		$ApRendererService,
+		$ApRequestService,
+		$ApResolverService,
+		$LdSignatureService,
+		$RemoteLoggerService,
+		$ResolveUserService,
+		$WebfingerService,
+		$ApImageService,
+		$ApMentionService,
+		$ApNoteService,
+		$ApPersonService,
+		$ApQuestionService,
+		//#endregion
+	],
+})
+export class CoreModule {}
diff --git a/packages/backend/src/core/CreateNotificationService.ts b/packages/backend/src/core/CreateNotificationService.ts
new file mode 100644
index 0000000000..10aa2c5df5
--- /dev/null
+++ b/packages/backend/src/core/CreateNotificationService.ts
@@ -0,0 +1,114 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { MutingsRepository, NotificationsRepository, UserProfilesRepository, UsersRepository } from '@/models/index.js';
+import type { User } from '@/models/entities/User.js';
+import type { Notification } from '@/models/entities/Notification.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { IdService } from '@/core/IdService.js';
+import { DI } from '@/di-symbols.js';
+import { NotificationEntityService } from './entities/NotificationEntityService.js';
+import { PushNotificationService } from './PushNotificationService.js';
+
+@Injectable()
+export class CreateNotificationService {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.notificationsRepository)
+		private notificationsRepository: NotificationsRepository,
+
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		private notificationEntityService: NotificationEntityService,
+		private idService: IdService,
+		private globalEventServie: GlobalEventService,
+		private pushNotificationService: PushNotificationService,
+	) {
+	}
+
+	public async createNotification(
+		notifieeId: User['id'],
+		type: Notification['type'],
+		data: Partial<Notification>,
+	): Promise<Notification | null> {
+		if (data.notifierId && (notifieeId === data.notifierId)) {
+			return null;
+		}
+	
+		const profile = await this.userProfilesRepository.findOneBy({ userId: notifieeId });
+	
+		const isMuted = profile?.mutingNotificationTypes.includes(type);
+	
+		// Create notification
+		const notification = await this.notificationsRepository.insert({
+			id: this.idService.genId(),
+			createdAt: new Date(),
+			notifieeId: notifieeId,
+			type: type,
+			// 相手がこの通知をミュートしているようなら、既読を予めつけておく
+			isRead: isMuted,
+			...data,
+		} as Partial<Notification>)
+			.then(x => this.notificationsRepository.findOneByOrFail(x.identifiers[0]));
+	
+		const packed = await this.notificationEntityService.pack(notification, {});
+	
+		// Publish notification event
+		this.globalEventServie.publishMainStream(notifieeId, 'notification', packed);
+	
+		// 2秒経っても(今回作成した)通知が既読にならなかったら「未読の通知がありますよ」イベントを発行する
+		setTimeout(async () => {
+			const fresh = await this.notificationsRepository.findOneBy({ id: notification.id });
+			if (fresh == null) return; // 既に削除されているかもしれない
+			if (fresh.isRead) return;
+	
+			//#region ただしミュートしているユーザーからの通知なら無視
+			const mutings = await this.mutingsRepository.findBy({
+				muterId: notifieeId,
+			});
+			if (data.notifierId && mutings.map(m => m.muteeId).includes(data.notifierId)) {
+				return;
+			}
+			//#endregion
+	
+			this.globalEventServie.publishMainStream(notifieeId, 'unreadNotification', packed);
+			this.pushNotificationService.pushNotification(notifieeId, 'notification', packed);
+	
+			if (type === 'follow') this.#emailNotificationFollow(notifieeId, await this.usersRepository.findOneByOrFail({ id: data.notifierId! }));
+			if (type === 'receiveFollowRequest') this.#emailNotificationReceiveFollowRequest(notifieeId, await this.usersRepository.findOneByOrFail({ id: data.notifierId! }));
+		}, 2000);
+	
+		return notification;
+	}
+
+	// TODO
+	//const locales = await import('../../../../locales/index.js');
+
+	// TODO: locale ファイルをクライアント用とサーバー用で分けたい
+
+	async #emailNotificationFollow(userId: User['id'], follower: User) {
+		/*
+		const userProfile = await UserProfiles.findOneByOrFail({ userId: userId });
+		if (!userProfile.email || !userProfile.emailNotificationTypes.includes('follow')) return;
+		const locale = locales[userProfile.lang ?? 'ja-JP'];
+		const i18n = new I18n(locale);
+		// TODO: render user information html
+		sendEmail(userProfile.email, i18n.t('_email._follow.title'), `${follower.name} (@${Acct.toString(follower)})`, `${follower.name} (@${Acct.toString(follower)})`);
+		*/
+	}
+	
+	async #emailNotificationReceiveFollowRequest(userId: User['id'], follower: User) {
+		/*
+		const userProfile = await UserProfiles.findOneByOrFail({ userId: userId });
+		if (!userProfile.email || !userProfile.emailNotificationTypes.includes('receiveFollowRequest')) return;
+		const locale = locales[userProfile.lang ?? 'ja-JP'];
+		const i18n = new I18n(locale);
+		// TODO: render user information html
+		sendEmail(userProfile.email, i18n.t('_email._receiveFollowRequest.title'), `${follower.name} (@${Acct.toString(follower)})`, `${follower.name} (@${Acct.toString(follower)})`);
+		*/
+	}
+}
diff --git a/packages/backend/src/core/CreateSystemUserService.ts b/packages/backend/src/core/CreateSystemUserService.ts
new file mode 100644
index 0000000000..71f50d7cb3
--- /dev/null
+++ b/packages/backend/src/core/CreateSystemUserService.ts
@@ -0,0 +1,80 @@
+import { Inject, Injectable } from '@nestjs/common';
+import bcrypt from 'bcryptjs';
+import { v4 as uuid } from 'uuid';
+import { IsNull, DataSource } from 'typeorm';
+import { genRsaKeyPair } from '@/misc/gen-key-pair.js';
+import { User } from '@/models/entities/User.js';
+import { UserProfile } from '@/models/entities/UserProfile.js';
+import { IdService } from '@/core/IdService.js';
+import { UserKeypair } from '@/models/entities/UserKeypair.js';
+import { UsedUsername } from '@/models/entities/UsedUsername.js';
+import { DI } from '@/di-symbols.js';
+import generateNativeUserToken from '@/misc/generate-native-user-token.js';
+
+@Injectable()
+export class CreateSystemUserService {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		private idService: IdService,
+	) {
+	}
+
+	public async createSystemUser(username: string): Promise<User> {
+		const password = uuid();
+	
+		// Generate hash of password
+		const salt = await bcrypt.genSalt(8);
+		const hash = await bcrypt.hash(password, salt);
+	
+		// Generate secret
+		const secret = generateNativeUserToken();
+	
+		const keyPair = await genRsaKeyPair(4096);
+	
+		let account!: User;
+	
+		// Start transaction
+		await this.db.transaction(async transactionalEntityManager => {
+			const exist = await transactionalEntityManager.findOneBy(User, {
+				usernameLower: username.toLowerCase(),
+				host: IsNull(),
+			});
+	
+			if (exist) throw new Error('the user is already exists');
+	
+			account = await transactionalEntityManager.insert(User, {
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				username: username,
+				usernameLower: username.toLowerCase(),
+				host: null,
+				token: secret,
+				isAdmin: false,
+				isLocked: true,
+				isExplorable: false,
+				isBot: true,
+			}).then(x => transactionalEntityManager.findOneByOrFail(User, x.identifiers[0]));
+	
+			await transactionalEntityManager.insert(UserKeypair, {
+				publicKey: keyPair.publicKey,
+				privateKey: keyPair.privateKey,
+				userId: account.id,
+			});
+	
+			await transactionalEntityManager.insert(UserProfile, {
+				userId: account.id,
+				autoAcceptFollowed: false,
+				password: hash,
+			});
+	
+			await transactionalEntityManager.insert(UsedUsername, {
+				createdAt: new Date(),
+				username: username.toLowerCase(),
+			});
+		});
+	
+		return account;
+	}
+}
diff --git a/packages/backend/src/core/CustomEmojiService.ts b/packages/backend/src/core/CustomEmojiService.ts
new file mode 100644
index 0000000000..83e28baea4
--- /dev/null
+++ b/packages/backend/src/core/CustomEmojiService.ts
@@ -0,0 +1,175 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DataSource, In, IsNull } from 'typeorm';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import { IdService } from '@/core/IdService.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import type { Emoji } from '@/models/entities/Emoji.js';
+import { Cache } from '@/misc/cache.js';
+import { query } from '@/misc/prelude/url.js';
+import type { Note } from '@/models/entities/Note.js';
+import { EmojisRepository } from '@/models/index.js';
+import { UtilityService } from './UtilityService.js';
+import { ReactionService } from './ReactionService.js';
+
+/**
+ * 添付用絵文字情報
+ */
+type PopulatedEmoji = {
+	name: string;
+	url: string;
+};
+
+@Injectable()
+export class CustomEmojiService {
+	#cache: Cache<Emoji | null>;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+
+		private idService: IdService,
+		private globalEventServie: GlobalEventService,
+		private utilityService: UtilityService,
+		private reactionService: ReactionService,
+	) {
+		this.#cache = new Cache<Emoji | null>(1000 * 60 * 60 * 12);
+	}
+
+	public async add(data: {
+		driveFile: DriveFile;
+		name: string;
+		category: string | null;
+		aliases: string[];
+		host: string | null;
+	}): Promise<Emoji> {
+		const emoji = await this.emojisRepository.insert({
+			id: this.idService.genId(),
+			updatedAt: new Date(),
+			name: data.name,
+			category: data.category,
+			host: data.host,
+			aliases: data.aliases,
+			originalUrl: data.driveFile.url,
+			publicUrl: data.driveFile.webpublicUrl ?? data.driveFile.url,
+			type: data.driveFile.webpublicType ?? data.driveFile.type,
+		}).then(x => this.emojisRepository.findOneByOrFail(x.identifiers[0]));
+
+		await this.db.queryResultCache!.remove(['meta_emojis']);
+
+		return emoji;
+	}
+	
+	#normalizeHost(src: string | undefined, noteUserHost: string | null): string | null {
+	// クエリに使うホスト
+		let host = src === '.' ? null	// .はローカルホスト (ここがマッチするのはリアクションのみ)
+			: src === undefined ? noteUserHost	// ノートなどでホスト省略表記の場合はローカルホスト (ここがリアクションにマッチすることはない)
+			: this.utilityService.isSelfHost(src) ? null	// 自ホスト指定
+			: (src || noteUserHost);	// 指定されたホスト || ノートなどの所有者のホスト (こっちがリアクションにマッチすることはない)
+
+		host = this.utilityService.toPunyNullable(host);
+
+		return host;
+	}
+
+	#parseEmojiStr(emojiName: string, noteUserHost: string | null) {
+		const match = emojiName.match(/^(\w+)(?:@([\w.-]+))?$/);
+		if (!match) return { name: null, host: null };
+
+		const name = match[1];
+
+		// ホスト正規化
+		const host = this.utilityService.toPunyNullable(this.#normalizeHost(match[2], noteUserHost));
+
+		return { name, host };
+	}
+
+	/**
+ * 添付用絵文字情報を解決する
+ * @param emojiName ノートやユーザープロフィールに添付された、またはリアクションのカスタム絵文字名 (:は含めない, リアクションでローカルホストの場合は@.を付ける (これはdecodeReactionで可能))
+ * @param noteUserHost ノートやユーザープロフィールの所有者のホスト
+ * @returns 絵文字情報, nullは未マッチを意味する
+ */
+	public async populateEmoji(emojiName: string, noteUserHost: string | null): Promise<PopulatedEmoji | null> {
+		const { name, host } = this.#parseEmojiStr(emojiName, noteUserHost);
+		if (name == null) return null;
+
+		const queryOrNull = async () => (await this.emojisRepository.findOneBy({
+			name,
+			host: host ?? IsNull(),
+		})) ?? null;
+
+		const emoji = await this.#cache.fetch(`${name} ${host}`, queryOrNull);
+
+		if (emoji == null) return null;
+
+		const isLocal = emoji.host == null;
+		const emojiUrl = emoji.publicUrl || emoji.originalUrl; // || emoji.originalUrl してるのは後方互換性のため
+		const url = isLocal ? emojiUrl : `${this.config.url}/proxy/${encodeURIComponent((new URL(emojiUrl)).pathname)}?${query({ url: emojiUrl })}`;
+
+		return {
+			name: emojiName,
+			url,
+		};
+	}
+
+	/**
+ * 複数の添付用絵文字情報を解決する (キャシュ付き, 存在しないものは結果から除外される)
+ */
+	public async populateEmojis(emojiNames: string[], noteUserHost: string | null): Promise<PopulatedEmoji[]> {
+		const emojis = await Promise.all(emojiNames.map(x => this.populateEmoji(x, noteUserHost)));
+		return emojis.filter((x): x is PopulatedEmoji => x != null);
+	}
+
+	public aggregateNoteEmojis(notes: Note[]) {
+		let emojis: { name: string | null; host: string | null; }[] = [];
+		for (const note of notes) {
+			emojis = emojis.concat(note.emojis
+				.map(e => this.#parseEmojiStr(e, note.userHost)));
+			if (note.renote) {
+				emojis = emojis.concat(note.renote.emojis
+					.map(e => this.#parseEmojiStr(e, note.renote!.userHost)));
+				if (note.renote.user) {
+					emojis = emojis.concat(note.renote.user.emojis
+						.map(e => this.#parseEmojiStr(e, note.renote!.userHost)));
+				}
+			}
+			const customReactions = Object.keys(note.reactions).map(x => this.reactionService.decodeReaction(x)).filter(x => x.name != null) as typeof emojis;
+			emojis = emojis.concat(customReactions);
+			if (note.user) {
+				emojis = emojis.concat(note.user.emojis
+					.map(e => this.#parseEmojiStr(e, note.userHost)));
+			}
+		}
+		return emojis.filter(x => x.name != null) as { name: string; host: string | null; }[];
+	}
+
+	/**
+ * 与えられた絵文字のリストをデータベースから取得し、キャッシュに追加します
+ */
+	public async prefetchEmojis(emojis: { name: string; host: string | null; }[]): Promise<void> {
+		const notCachedEmojis = emojis.filter(emoji => this.#cache.get(`${emoji.name} ${emoji.host}`) == null);
+		const emojisQuery: any[] = [];
+		const hosts = new Set(notCachedEmojis.map(e => e.host));
+		for (const host of hosts) {
+			emojisQuery.push({
+				name: In(notCachedEmojis.filter(e => e.host === host).map(e => e.name)),
+				host: host ?? IsNull(),
+			});
+		}
+		const _emojis = emojisQuery.length > 0 ? await this.emojisRepository.find({
+			where: emojisQuery,
+			select: ['name', 'host', 'originalUrl', 'publicUrl'],
+		}) : [];
+		for (const emoji of _emojis) {
+			this.#cache.set(`${emoji.name} ${emoji.host}`, emoji);
+		}
+	}
+}
diff --git a/packages/backend/src/core/DeleteAccountService.ts b/packages/backend/src/core/DeleteAccountService.ts
new file mode 100644
index 0000000000..ba67bc499e
--- /dev/null
+++ b/packages/backend/src/core/DeleteAccountService.ts
@@ -0,0 +1,38 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository } from '@/models/index.js';
+import { QueueService } from '@/core/QueueService.js';
+import { UserSuspendService } from '@/core/UserSuspendService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
+
+@Injectable()
+export class DeleteAccountService {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private userSuspendService: UserSuspendService,
+		private queueService: QueueService,
+		private globalEventServie: GlobalEventService,
+	) {
+	}
+
+	public async deleteAccount(user: {
+		id: string;
+		host: string | null;
+	}): Promise<void> {
+		// 物理削除する前にDelete activityを送信する
+		await this.userSuspendService.doPostSuspend(user).catch(e => {});
+	
+		this.queueService.createDeleteAccountJob(user, {
+			soft: false,
+		});
+	
+		await this.usersRepository.update(user.id, {
+			isDeleted: true,
+		});
+	
+		// Terminate streaming
+		this.globalEventServie.publishUserEvent(user.id, 'terminate', {});
+	}
+}
diff --git a/packages/backend/src/core/DownloadService.ts b/packages/backend/src/core/DownloadService.ts
new file mode 100644
index 0000000000..84d5ca2e8b
--- /dev/null
+++ b/packages/backend/src/core/DownloadService.ts
@@ -0,0 +1,123 @@
+import * as fs from 'node:fs';
+import * as stream from 'node:stream';
+import * as util from 'node:util';
+import { Inject, Injectable } from '@nestjs/common';
+import IPCIDR from 'ip-cidr';
+import PrivateIp from 'private-ip';
+import got, * as Got from 'got';
+import chalk from 'chalk';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import Logger from '@/logger.js';
+import { HttpRequestService } from '@/core/HttpRequestService.js';
+import { createTemp } from '@/misc/create-temp.js';
+import { StatusError } from '@/misc/status-error.js';
+
+const pipeline = util.promisify(stream.pipeline);
+
+@Injectable()
+export class DownloadService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private httpRequestService: HttpRequestService,
+	) {
+		this.#logger = new Logger('download');
+	}
+
+	public async downloadUrl(url: string, path: string): Promise<void> {
+		this.#logger.info(`Downloading ${chalk.cyan(url)} ...`);
+	
+		const timeout = 30 * 1000;
+		const operationTimeout = 60 * 1000;
+		const maxSize = this.config.maxFileSize ?? 262144000;
+	
+		const req = got.stream(url, {
+			headers: {
+				'User-Agent': this.config.userAgent,
+			},
+			timeout: {
+				lookup: timeout,
+				connect: timeout,
+				secureConnect: timeout,
+				socket: timeout,	// read timeout
+				response: timeout,
+				send: timeout,
+				request: operationTimeout,	// whole operation timeout
+			},
+			agent: {
+				http: this.httpRequestService.httpAgent,
+				https: this.httpRequestService.httpsAgent,
+			},
+			http2: false,	// default
+			retry: {
+				limit: 0,
+			},
+		}).on('response', (res: Got.Response) => {
+			if ((process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test') && !this.config.proxy && res.ip) {
+				if (this.#isPrivateIp(res.ip)) {
+					this.#logger.warn(`Blocked address: ${res.ip}`);
+					req.destroy();
+				}
+			}
+	
+			const contentLength = res.headers['content-length'];
+			if (contentLength != null) {
+				const size = Number(contentLength);
+				if (size > maxSize) {
+					this.#logger.warn(`maxSize exceeded (${size} > ${maxSize}) on response`);
+					req.destroy();
+				}
+			}
+		}).on('downloadProgress', (progress: Got.Progress) => {
+			if (progress.transferred > maxSize) {
+				this.#logger.warn(`maxSize exceeded (${progress.transferred} > ${maxSize}) on downloadProgress`);
+				req.destroy();
+			}
+		});
+	
+		try {
+			await pipeline(req, fs.createWriteStream(path));
+		} catch (e) {
+			if (e instanceof Got.HTTPError) {
+				throw new StatusError(`${e.response.statusCode} ${e.response.statusMessage}`, e.response.statusCode, e.response.statusMessage);
+			} else {
+				throw e;
+			}
+		}
+	
+		this.#logger.succ(`Download finished: ${chalk.cyan(url)}`);
+	}
+
+	public async downloadTextFile(url: string): Promise<string> {
+		// Create temp file
+		const [path, cleanup] = await createTemp();
+	
+		this.#logger.info(`text file: Temp file is ${path}`);
+	
+		try {
+			// write content at URL to temp file
+			await this.downloadUrl(url, path);
+	
+			const text = await util.promisify(fs.readFile)(path, 'utf8');
+	
+			return text;
+		} finally {
+			cleanup();
+		}
+	}
+	
+	#isPrivateIp(ip: string): boolean {
+		for (const net of this.config.allowedPrivateNetworks ?? []) {
+			const cidr = new IPCIDR(net);
+			if (cidr.contains(ip)) {
+				return false;
+			}
+		}
+
+		return PrivateIp(ip);
+	}
+}
diff --git a/packages/backend/src/core/DriveService.ts b/packages/backend/src/core/DriveService.ts
new file mode 100644
index 0000000000..f54412ff41
--- /dev/null
+++ b/packages/backend/src/core/DriveService.ts
@@ -0,0 +1,740 @@
+import * as fs from 'node:fs';
+import { Inject, Injectable } from '@nestjs/common';
+import { v4 as uuid } from 'uuid';
+import sharp from 'sharp';
+import { IsNull } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { DriveFilesRepository, UsersRepository, DriveFoldersRepository, UserProfilesRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import Logger from '@/Logger.js';
+import type { IRemoteUser, User } from '@/models/entities/User.js';
+import { MetaService } from '@/core/MetaService.js';
+import { DriveFile } from '@/models/entities/DriveFile.js';
+import { IdService } from '@/core/IdService.js';
+import { isDuplicateKeyValueError } from '@/misc/is-duplicate-key-value-error.js';
+import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
+import { IdentifiableError } from '@/misc/identifiable-error.js';
+import { contentDisposition } from '@/misc/content-disposition.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { VideoProcessingService } from '@/core/VideoProcessingService.js';
+import { ImageProcessingService } from '@/core/ImageProcessingService.js';
+import type { IImage } from '@/core/ImageProcessingService.js';
+import { QueueService } from '@/core/QueueService.js';
+import type { DriveFolder } from '@/models/entities/DriveFolder.js';
+import { createTemp } from '@/misc/create-temp.js';
+import DriveChart from '@/core/chart/charts/drive.js';
+import PerUserDriveChart from '@/core/chart/charts/per-user-drive.js';
+import InstanceChart from '@/core/chart/charts/instance.js';
+import { DownloadService } from '@/core/DownloadService.js';
+import { S3Service } from '@/core/S3Service.js';
+import { InternalStorageService } from '@/core/InternalStorageService.js';
+import { DriveFileEntityService } from './entities/DriveFileEntityService.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+import { FileInfoService } from './FileInfoService.js';
+import type S3 from 'aws-sdk/clients/s3.js';
+
+type AddFileArgs = {
+	/** User who wish to add file */
+	user: { id: User['id']; host: User['host']; driveCapacityOverrideMb: User['driveCapacityOverrideMb'] } | null;
+	/** File path */
+	path: string;
+	/** Name */
+	name?: string | null;
+	/** Comment */
+	comment?: string | null;
+	/** Folder ID */
+	folderId?: any;
+	/** If set to true, forcibly upload the file even if there is a file with the same hash. */
+	force?: boolean;
+	/** Do not save file to local */
+	isLink?: boolean;
+	/** URL of source (URLからアップロードされた場合(ローカル/リモート)の元URL) */
+	url?: string | null;
+	/** URL of source (リモートインスタンスのURLからアップロードされた場合の元URL) */
+	uri?: string | null;
+	/** Mark file as sensitive */
+	sensitive?: boolean | null;
+
+	requestIp?: string | null;
+	requestHeaders?: Record<string, string> | null;
+};
+
+type UploadFromUrlArgs = {
+	url: string;
+	user: { id: User['id']; host: User['host'] } | null;
+	folderId?: DriveFolder['id'] | null;
+	uri?: string | null;
+	sensitive?: boolean;
+	force?: boolean;
+	isLink?: boolean;
+	comment?: string | null;
+	requestIp?: string | null;
+	requestHeaders?: Record<string, string> | null;
+};
+
+@Injectable()
+export class DriveService {
+	#registerLogger: Logger;
+	#downloaderLogger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		@Inject(DI.driveFoldersRepository)
+		private driveFoldersRepository: DriveFoldersRepository,
+
+		private fileInfoService: FileInfoService,
+		private userEntityService: UserEntityService,
+		private driveFileEntityService: DriveFileEntityService,
+		private idService: IdService,
+		private metaService: MetaService,
+		private downloadService: DownloadService,
+		private internalStorageService: InternalStorageService,
+		private s3Service: S3Service,
+		private imageProcessingService: ImageProcessingService,
+		private videoProcessingService: VideoProcessingService,
+		private globalEventService: GlobalEventService,
+		private queueService: QueueService,
+		private driveChart: DriveChart,
+		private perUserDriveChart: PerUserDriveChart,
+		private instanceChart: InstanceChart,
+	) {
+		const logger = new Logger('drive', 'blue');
+		this.#registerLogger = logger.createSubLogger('register', 'yellow');
+		this.#downloaderLogger = logger.createSubLogger('downloader');
+	}
+
+	/***
+	 * Save file
+	 * @param path Path for original
+	 * @param name Name for original
+	 * @param type Content-Type for original
+	 * @param hash Hash for original
+	 * @param size Size for original
+	 */
+	async #save(file: DriveFile, path: string, name: string, type: string, hash: string, size: number): Promise<DriveFile> {
+	// thunbnail, webpublic を必要なら生成
+		const alts = await this.generateAlts(path, type, !file.uri);
+
+		const meta = await this.metaService.fetch();
+
+		if (meta.useObjectStorage) {
+		//#region ObjectStorage params
+			let [ext] = (name.match(/\.([a-zA-Z0-9_-]+)$/) ?? ['']);
+
+			if (ext === '') {
+				if (type === 'image/jpeg') ext = '.jpg';
+				if (type === 'image/png') ext = '.png';
+				if (type === 'image/webp') ext = '.webp';
+				if (type === 'image/apng') ext = '.apng';
+				if (type === 'image/vnd.mozilla.apng') ext = '.apng';
+			}
+
+			// 拡張子からContent-Typeを設定してそうな挙動を示すオブジェクトストレージ (upcloud?) も存在するので、
+			// 許可されているファイル形式でしか拡張子をつけない
+			if (!FILE_TYPE_BROWSERSAFE.includes(type)) {
+				ext = '';
+			}
+
+			const baseUrl = meta.objectStorageBaseUrl
+			|| `${ meta.objectStorageUseSSL ? 'https' : 'http' }://${ meta.objectStorageEndpoint }${ meta.objectStoragePort ? `:${meta.objectStoragePort}` : '' }/${ meta.objectStorageBucket }`;
+
+			// for original
+			const key = `${meta.objectStoragePrefix}/${uuid()}${ext}`;
+			const url = `${ baseUrl }/${ key }`;
+
+			// for alts
+			let webpublicKey: string | null = null;
+			let webpublicUrl: string | null = null;
+			let thumbnailKey: string | null = null;
+			let thumbnailUrl: string | null = null;
+			//#endregion
+
+			//#region Uploads
+			this.#registerLogger.info(`uploading original: ${key}`);
+			const uploads = [
+				this.#upload(key, fs.createReadStream(path), type, name),
+			];
+
+			if (alts.webpublic) {
+				webpublicKey = `${meta.objectStoragePrefix}/webpublic-${uuid()}.${alts.webpublic.ext}`;
+				webpublicUrl = `${ baseUrl }/${ webpublicKey }`;
+
+				this.#registerLogger.info(`uploading webpublic: ${webpublicKey}`);
+				uploads.push(this.#upload(webpublicKey, alts.webpublic.data, alts.webpublic.type, name));
+			}
+
+			if (alts.thumbnail) {
+				thumbnailKey = `${meta.objectStoragePrefix}/thumbnail-${uuid()}.${alts.thumbnail.ext}`;
+				thumbnailUrl = `${ baseUrl }/${ thumbnailKey }`;
+
+				this.#registerLogger.info(`uploading thumbnail: ${thumbnailKey}`);
+				uploads.push(this.#upload(thumbnailKey, alts.thumbnail.data, alts.thumbnail.type));
+			}
+
+			await Promise.all(uploads);
+			//#endregion
+
+			file.url = url;
+			file.thumbnailUrl = thumbnailUrl;
+			file.webpublicUrl = webpublicUrl;
+			file.accessKey = key;
+			file.thumbnailAccessKey = thumbnailKey;
+			file.webpublicAccessKey = webpublicKey;
+			file.webpublicType = alts.webpublic?.type ?? null;
+			file.name = name;
+			file.type = type;
+			file.md5 = hash;
+			file.size = size;
+			file.storedInternal = false;
+
+			return await this.driveFilesRepository.insert(file).then(x => this.driveFilesRepository.findOneByOrFail(x.identifiers[0]));
+		} else { // use internal storage
+			const accessKey = uuid();
+			const thumbnailAccessKey = 'thumbnail-' + uuid();
+			const webpublicAccessKey = 'webpublic-' + uuid();
+
+			const url = this.internalStorageService.saveFromPath(accessKey, path);
+
+			let thumbnailUrl: string | null = null;
+			let webpublicUrl: string | null = null;
+
+			if (alts.thumbnail) {
+				thumbnailUrl = this.internalStorageService.saveFromBuffer(thumbnailAccessKey, alts.thumbnail.data);
+				this.#registerLogger.info(`thumbnail stored: ${thumbnailAccessKey}`);
+			}
+
+			if (alts.webpublic) {
+				webpublicUrl = this.internalStorageService.saveFromBuffer(webpublicAccessKey, alts.webpublic.data);
+				this.#registerLogger.info(`web stored: ${webpublicAccessKey}`);
+			}
+
+			file.storedInternal = true;
+			file.url = url;
+			file.thumbnailUrl = thumbnailUrl;
+			file.webpublicUrl = webpublicUrl;
+			file.accessKey = accessKey;
+			file.thumbnailAccessKey = thumbnailAccessKey;
+			file.webpublicAccessKey = webpublicAccessKey;
+			file.webpublicType = alts.webpublic?.type ?? null;
+			file.name = name;
+			file.type = type;
+			file.md5 = hash;
+			file.size = size;
+
+			return await this.driveFilesRepository.insert(file).then(x => this.driveFilesRepository.findOneByOrFail(x.identifiers[0]));
+		}
+	}
+
+	/**
+	 * Generate webpublic, thumbnail, etc
+	 * @param path Path for original
+	 * @param type Content-Type for original
+	 * @param generateWeb Generate webpublic or not
+	 */
+	public async generateAlts(path: string, type: string, generateWeb: boolean) {
+		if (type.startsWith('video/')) {
+			try {
+				const thumbnail = await this.videoProcessingService.generateVideoThumbnail(path);
+				return {
+					webpublic: null,
+					thumbnail,
+				};
+			} catch (err) {
+				this.#registerLogger.warn(`GenerateVideoThumbnail failed: ${err}`);
+				return {
+					webpublic: null,
+					thumbnail: null,
+				};
+			}
+		}
+
+		if (!['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml'].includes(type)) {
+			this.#registerLogger.debug('web image and thumbnail not created (not an required file)');
+			return {
+				webpublic: null,
+				thumbnail: null,
+			};
+		}
+
+		let img: sharp.Sharp | null = null;
+		let satisfyWebpublic: boolean;
+
+		try {
+			img = sharp(path);
+			const metadata = await img.metadata();
+			const isAnimated = metadata.pages && metadata.pages > 1;
+
+			// skip animated
+			if (isAnimated) {
+				return {
+					webpublic: null,
+					thumbnail: null,
+				};
+			}
+
+			satisfyWebpublic = !!(
+				type !== 'image/svg+xml' && type !== 'image/webp' &&
+			!(metadata.exif || metadata.iptc || metadata.xmp || metadata.tifftagPhotoshop) &&
+			metadata.width && metadata.width <= 2048 &&
+			metadata.height && metadata.height <= 2048
+			);
+		} catch (err) {
+			this.#registerLogger.warn(`sharp failed: ${err}`);
+			return {
+				webpublic: null,
+				thumbnail: null,
+			};
+		}
+
+		// #region webpublic
+		let webpublic: IImage | null = null;
+
+		if (generateWeb && !satisfyWebpublic) {
+			this.#registerLogger.info('creating web image');
+
+			try {
+				if (['image/jpeg', 'image/webp'].includes(type)) {
+					webpublic = await this.imageProcessingService.convertSharpToJpeg(img, 2048, 2048);
+				} else if (['image/png'].includes(type)) {
+					webpublic = await this.imageProcessingService.convertSharpToPng(img, 2048, 2048);
+				} else if (['image/svg+xml'].includes(type)) {
+					webpublic = await this.imageProcessingService.convertSharpToPng(img, 2048, 2048);
+				} else {
+					this.#registerLogger.debug('web image not created (not an required image)');
+				}
+			} catch (err) {
+				this.#registerLogger.warn('web image not created (an error occured)', err as Error);
+			}
+		} else {
+			if (satisfyWebpublic) this.#registerLogger.info('web image not created (original satisfies webpublic)');
+			else this.#registerLogger.info('web image not created (from remote)');
+		}
+		// #endregion webpublic
+
+		// #region thumbnail
+		let thumbnail: IImage | null = null;
+
+		try {
+			if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml'].includes(type)) {
+				thumbnail = await this.imageProcessingService.convertSharpToWebp(img, 498, 280);
+			} else {
+				this.#registerLogger.debug('thumbnail not created (not an required file)');
+			}
+		} catch (err) {
+			this.#registerLogger.warn('thumbnail not created (an error occured)', err as Error);
+		}
+		// #endregion thumbnail
+
+		return {
+			webpublic,
+			thumbnail,
+		};
+	}
+
+	/**
+	 * Upload to ObjectStorage
+	 */
+	async #upload(key: string, stream: fs.ReadStream | Buffer, type: string, filename?: string) {
+		if (type === 'image/apng') type = 'image/png';
+		if (!FILE_TYPE_BROWSERSAFE.includes(type)) type = 'application/octet-stream';
+
+		const meta = await this.metaService.fetch();
+
+		const params = {
+			Bucket: meta.objectStorageBucket,
+			Key: key,
+			Body: stream,
+			ContentType: type,
+			CacheControl: 'max-age=31536000, immutable',
+		} as S3.PutObjectRequest;
+
+		if (filename) params.ContentDisposition = contentDisposition('inline', filename);
+		if (meta.objectStorageSetPublicRead) params.ACL = 'public-read';
+
+		const s3 = this.s3Service.getS3(meta);
+
+		const upload = s3.upload(params, {
+			partSize: s3.endpoint.hostname === 'storage.googleapis.com' ? 500 * 1024 * 1024 : 8 * 1024 * 1024,
+		});
+
+		const result = await upload.promise();
+		if (result) this.#registerLogger.debug(`Uploaded: ${result.Bucket}/${result.Key} => ${result.Location}`);
+	}
+
+	async #deleteOldFile(user: IRemoteUser) {
+		const q = this.driveFilesRepository.createQueryBuilder('file')
+			.where('file.userId = :userId', { userId: user.id })
+			.andWhere('file.isLink = FALSE');
+
+		if (user.avatarId) {
+			q.andWhere('file.id != :avatarId', { avatarId: user.avatarId });
+		}
+
+		if (user.bannerId) {
+			q.andWhere('file.id != :bannerId', { bannerId: user.bannerId });
+		}
+
+		q.orderBy('file.id', 'ASC');
+
+		const oldFile = await q.getOne();
+
+		if (oldFile) {
+			this.deleteFile(oldFile, true);
+		}
+	}
+
+	/**
+	 * Add file to drive
+	 *
+	 */
+	public async addFile({
+		user,
+		path,
+		name = null,
+		comment = null,
+		folderId = null,
+		force = false,
+		isLink = false,
+		url = null,
+		uri = null,
+		sensitive = null,
+		requestIp = null,
+		requestHeaders = null,
+	}: AddFileArgs): Promise<DriveFile> {
+		let skipNsfwCheck = false;
+		const instance = await this.metaService.fetch();
+		if (user == null) skipNsfwCheck = true;
+		if (instance.sensitiveMediaDetection === 'none') skipNsfwCheck = true;
+		if (user && instance.sensitiveMediaDetection === 'local' && this.userEntityService.isRemoteUser(user)) skipNsfwCheck = true;
+		if (user && instance.sensitiveMediaDetection === 'remote' && this.userEntityService.isLocalUser(user)) skipNsfwCheck = true;
+
+		const info = await this.fileInfoService.getFileInfo(path, {
+			skipSensitiveDetection: skipNsfwCheck,
+			sensitiveThreshold: // 感度が高いほどしきい値は低くすることになる
+			instance.sensitiveMediaDetectionSensitivity === 'veryHigh' ? 0.1 :
+			instance.sensitiveMediaDetectionSensitivity === 'high' ? 0.3 :
+			instance.sensitiveMediaDetectionSensitivity === 'low' ? 0.7 :
+			instance.sensitiveMediaDetectionSensitivity === 'veryLow' ? 0.9 :
+			0.5,
+			sensitiveThresholdForPorn: 0.75,
+			enableSensitiveMediaDetectionForVideos: instance.enableSensitiveMediaDetectionForVideos,
+		});
+		this.#registerLogger.info(`${JSON.stringify(info)}`);
+
+		// 現状 false positive が多すぎて実用に耐えない
+		//if (info.porn && instance.disallowUploadWhenPredictedAsPorn) {
+		//	throw new IdentifiableError('282f77bf-5816-4f72-9264-aa14d8261a21', 'Detected as porn.');
+		//}
+
+		// detect name
+		const detectedName = name || (info.type.ext ? `untitled.${info.type.ext}` : 'untitled');
+
+		if (user && !force) {
+		// Check if there is a file with the same hash
+			const much = await this.driveFilesRepository.findOneBy({
+				md5: info.md5,
+				userId: user.id,
+			});
+
+			if (much) {
+				this.#registerLogger.info(`file with same hash is found: ${much.id}`);
+				return much;
+			}
+		}
+
+		//#region Check drive usage
+		if (user && !isLink) {
+			const usage = await this.driveFileEntityService.calcDriveUsageOf(user);
+			const u = await this.usersRepository.findOneBy({ id: user.id });
+
+			const instance = await this.metaService.fetch();
+			let driveCapacity = 1024 * 1024 * (this.userEntityService.isLocalUser(user) ? instance.localDriveCapacityMb : instance.remoteDriveCapacityMb);
+
+			if (this.userEntityService.isLocalUser(user) && u?.driveCapacityOverrideMb != null) {
+				driveCapacity = 1024 * 1024 * u.driveCapacityOverrideMb;
+				this.#registerLogger.debug('drive capacity override applied');
+				this.#registerLogger.debug(`overrideCap: ${driveCapacity}bytes, usage: ${usage}bytes, u+s: ${usage + info.size}bytes`);
+			}
+
+			this.#registerLogger.debug(`drive usage is ${usage} (max: ${driveCapacity})`);
+
+			// If usage limit exceeded
+			if (usage + info.size > driveCapacity) {
+				if (this.userEntityService.isLocalUser(user)) {
+					throw new IdentifiableError('c6244ed2-a39a-4e1c-bf93-f0fbd7764fa6', 'No free space.');
+				} else {
+				// (アバターまたはバナーを含まず)最も古いファイルを削除する
+					this.#deleteOldFile(await this.usersRepository.findOneByOrFail({ id: user.id }) as IRemoteUser);
+				}
+			}
+		}
+		//#endregion
+
+		const fetchFolder = async () => {
+			if (!folderId) {
+				return null;
+			}
+
+			const driveFolder = await this.driveFoldersRepository.findOneBy({
+				id: folderId,
+				userId: user ? user.id : IsNull(),
+			});
+
+			if (driveFolder == null) throw new Error('folder-not-found');
+
+			return driveFolder;
+		};
+
+		const properties: {
+		width?: number;
+		height?: number;
+		orientation?: number;
+	} = {};
+
+		if (info.width) {
+			properties['width'] = info.width;
+			properties['height'] = info.height;
+		}
+		if (info.orientation != null) {
+			properties['orientation'] = info.orientation;
+		}
+
+		const profile = user ? await this.userProfilesRepository.findOneBy({ userId: user.id }) : null;
+
+		const folder = await fetchFolder();
+
+		let file = new DriveFile();
+		file.id = this.idService.genId();
+		file.createdAt = new Date();
+		file.userId = user ? user.id : null;
+		file.userHost = user ? user.host : null;
+		file.folderId = folder !== null ? folder.id : null;
+		file.comment = comment;
+		file.properties = properties;
+		file.blurhash = info.blurhash ?? null;
+		file.isLink = isLink;
+		file.requestIp = requestIp;
+		file.requestHeaders = requestHeaders;
+		file.maybeSensitive = info.sensitive;
+		file.maybePorn = info.porn;
+		file.isSensitive = user
+			? this.userEntityService.isLocalUser(user) && profile!.alwaysMarkNsfw ? true :
+			(sensitive !== null && sensitive !== undefined)
+				? sensitive
+				: false
+			: false;
+
+		if (info.sensitive && profile!.autoSensitive) file.isSensitive = true;
+		if (info.sensitive && instance.setSensitiveFlagAutomatically) file.isSensitive = true;
+
+		if (url !== null) {
+			file.src = url;
+
+			if (isLink) {
+				file.url = url;
+				// ローカルプロキシ用
+				file.accessKey = uuid();
+				file.thumbnailAccessKey = 'thumbnail-' + uuid();
+				file.webpublicAccessKey = 'webpublic-' + uuid();
+			}
+		}
+
+		if (uri !== null) {
+			file.uri = uri;
+		}
+
+		if (isLink) {
+			try {
+				file.size = 0;
+				file.md5 = info.md5;
+				file.name = detectedName;
+				file.type = info.type.mime;
+				file.storedInternal = false;
+
+				file = await this.driveFilesRepository.insert(file).then(x => this.driveFilesRepository.findOneByOrFail(x.identifiers[0]));
+			} catch (err) {
+			// duplicate key error (when already registered)
+				if (isDuplicateKeyValueError(err)) {
+					this.#registerLogger.info(`already registered ${file.uri}`);
+
+					file = await this.driveFilesRepository.findOneBy({
+						uri: file.uri!,
+						userId: user ? user.id : IsNull(),
+					}) as DriveFile;
+				} else {
+					this.#registerLogger.error(err as Error);
+					throw err;
+				}
+			}
+		} else {
+			file = await (this.#save(file, path, detectedName, info.type.mime, info.md5, info.size));
+		}
+
+		this.#registerLogger.succ(`drive file has been created ${file.id}`);
+
+		if (user) {
+			this.driveFileEntityService.pack(file, { self: true }).then(packedFile => {
+			// Publish driveFileCreated event
+				this.globalEventService.publishMainStream(user.id, 'driveFileCreated', packedFile);
+				this.globalEventService.publishDriveStream(user.id, 'fileCreated', packedFile);
+			});
+		}
+
+		// 統計を更新
+		this.driveChart.update(file, true);
+		this.perUserDriveChart.update(file, true);
+		if (file.userHost !== null) {
+			this.instanceChart.updateDrive(file, true);
+		}
+
+		return file;
+	}
+
+	public async deleteFile(file: DriveFile, isExpired = false) {
+		if (file.storedInternal) {
+			this.internalStorageService.del(file.accessKey!);
+
+			if (file.thumbnailUrl) {
+				this.internalStorageService.del(file.thumbnailAccessKey!);
+			}
+
+			if (file.webpublicUrl) {
+				this.internalStorageService.del(file.webpublicAccessKey!);
+			}
+		} else if (!file.isLink) {
+			this.queueService.createDeleteObjectStorageFileJob(file.accessKey!);
+
+			if (file.thumbnailUrl) {
+				this.queueService.createDeleteObjectStorageFileJob(file.thumbnailAccessKey!);
+			}
+
+			if (file.webpublicUrl) {
+				this.queueService.createDeleteObjectStorageFileJob(file.webpublicAccessKey!);
+			}
+		}
+
+		this.#deletePostProcess(file, isExpired);
+	}
+
+	public async deleteFileSync(file: DriveFile, isExpired = false) {
+		if (file.storedInternal) {
+			this.internalStorageService.del(file.accessKey!);
+
+			if (file.thumbnailUrl) {
+				this.internalStorageService.del(file.thumbnailAccessKey!);
+			}
+
+			if (file.webpublicUrl) {
+				this.internalStorageService.del(file.webpublicAccessKey!);
+			}
+		} else if (!file.isLink) {
+			const promises = [];
+
+			promises.push(this.deleteObjectStorageFile(file.accessKey!));
+
+			if (file.thumbnailUrl) {
+				promises.push(this.deleteObjectStorageFile(file.thumbnailAccessKey!));
+			}
+
+			if (file.webpublicUrl) {
+				promises.push(this.deleteObjectStorageFile(file.webpublicAccessKey!));
+			}
+
+			await Promise.all(promises);
+		}
+
+		this.#deletePostProcess(file, isExpired);
+	}
+
+	async #deletePostProcess(file: DriveFile, isExpired = false) {
+	// リモートファイル期限切れ削除後は直リンクにする
+		if (isExpired && file.userHost !== null && file.uri != null) {
+			this.driveFilesRepository.update(file.id, {
+				isLink: true,
+				url: file.uri,
+				thumbnailUrl: null,
+				webpublicUrl: null,
+				storedInternal: false,
+				// ローカルプロキシ用
+				accessKey: uuid(),
+				thumbnailAccessKey: 'thumbnail-' + uuid(),
+				webpublicAccessKey: 'webpublic-' + uuid(),
+			});
+		} else {
+			this.driveFilesRepository.delete(file.id);
+		}
+
+		// 統計を更新
+		this.driveChart.update(file, false);
+		this.perUserDriveChart.update(file, false);
+		if (file.userHost !== null) {
+			this.instanceChart.updateDrive(file, false);
+		}
+	}
+
+	public async deleteObjectStorageFile(key: string) {
+		const meta = await this.metaService.fetch();
+
+		const s3 = this.s3Service.getS3(meta);
+
+		await s3.deleteObject({
+			Bucket: meta.objectStorageBucket!,
+			Key: key,
+		}).promise();
+	}
+
+	public async uploadFromUrl({
+		url,
+		user,
+		folderId = null,
+		uri = null,
+		sensitive = false,
+		force = false,
+		isLink = false,
+		comment = null,
+		requestIp = null,
+		requestHeaders = null,
+	}: UploadFromUrlArgs): Promise<DriveFile> {
+		let name = new URL(url).pathname.split('/').pop() ?? null;
+		if (name == null || !this.driveFileEntityService.validateFileName(name)) {
+			name = null;
+		}
+	
+		// If the comment is same as the name, skip comment
+		// (image.name is passed in when receiving attachment)
+		if (comment !== null && name === comment) {
+			comment = null;
+		}
+	
+		// Create temp file
+		const [path, cleanup] = await createTemp();
+	
+		try {
+			// write content at URL to temp file
+			await this.downloadService.downloadUrl(url, path);
+	
+			const driveFile = await this.addFile({ user, path, name, comment, folderId, force, isLink, url, uri, sensitive, requestIp, requestHeaders });
+			this.#downloaderLogger.succ(`Got: ${driveFile.id}`);
+			return driveFile!;
+		} catch (err) {
+			this.#downloaderLogger.error(`Failed to create drive file: ${err}`, {
+				url: url,
+				e: err,
+			});
+			throw err;
+		} finally {
+			cleanup();
+		}
+	}
+}
diff --git a/packages/backend/src/core/EmailService.ts b/packages/backend/src/core/EmailService.ts
new file mode 100644
index 0000000000..7d6960b73b
--- /dev/null
+++ b/packages/backend/src/core/EmailService.ts
@@ -0,0 +1,175 @@
+import * as nodemailer from 'nodemailer';
+import { Inject, Injectable } from '@nestjs/common';
+import { validate as validateEmail } from 'deep-email-validator';
+import { MetaService } from '@/core/MetaService.js';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import Logger from '@/logger.js';
+import { UserProfilesRepository } from '@/models/index.js';
+
+@Injectable()
+export class EmailService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		private metaService: MetaService,
+	) {
+		this.#logger = new Logger('email');
+	}
+
+	public async sendEmail(to: string, subject: string, html: string, text: string) {
+		const meta = await this.metaService.fetch(true);
+	
+		const iconUrl = `${this.config.url}/static-assets/mi-white.png`;
+		const emailSettingUrl = `${this.config.url}/settings/email`;
+	
+		const enableAuth = meta.smtpUser != null && meta.smtpUser !== '';
+	
+		const transporter = nodemailer.createTransport({
+			host: meta.smtpHost,
+			port: meta.smtpPort,
+			secure: meta.smtpSecure,
+			ignoreTLS: !enableAuth,
+			proxy: this.config.proxySmtp,
+			auth: enableAuth ? {
+				user: meta.smtpUser,
+				pass: meta.smtpPass,
+			} : undefined,
+		} as any);
+	
+		try {
+			// TODO: htmlサニタイズ
+			const info = await transporter.sendMail({
+				from: meta.email!,
+				to: to,
+				subject: subject,
+				text: text,
+				html: `<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>${ subject }</title>
+		<style>
+			html {
+				background: #eee;
+			}
+
+			body {
+				padding: 16px;
+				margin: 0;
+				font-family: sans-serif;
+				font-size: 14px;
+			}
+
+			a {
+				text-decoration: none;
+				color: #86b300;
+			}
+			a:hover {
+				text-decoration: underline;
+			}
+
+			main {
+				max-width: 500px;
+				margin: 0 auto;
+				background: #fff;
+				color: #555;
+			}
+				main > header {
+					padding: 32px;
+					background: #86b300;
+				}
+					main > header > img {
+						max-width: 128px;
+						max-height: 28px;
+						vertical-align: bottom;
+					}
+				main > article {
+					padding: 32px;
+				}
+					main > article > h1 {
+						margin: 0 0 1em 0;
+					}
+				main > footer {
+					padding: 32px;
+					border-top: solid 1px #eee;
+				}
+
+			nav {
+				box-sizing: border-box;
+				max-width: 500px;
+				margin: 16px auto 0 auto;
+				padding: 0 32px;
+			}
+				nav > a {
+					color: #888;
+				}
+		</style>
+	</head>
+	<body>
+		<main>
+			<header>
+				<img src="${ meta.logoImageUrl ?? meta.iconUrl ?? iconUrl }"/>
+			</header>
+			<article>
+				<h1>${ subject }</h1>
+				<div>${ html }</div>
+			</article>
+			<footer>
+				<a href="${ emailSettingUrl }">${ 'Email setting' }</a>
+			</footer>
+		</main>
+		<nav>
+			<a href="${ this.config.url }">${ this.config.host }</a>
+		</nav>
+	</body>
+</html>`,
+			});
+	
+			this.#logger.info(`Message sent: ${info.messageId}`);
+		} catch (err) {
+			this.#logger.error(err as Error);
+			throw err;
+		}
+	}
+
+	public async validateEmailForAccount(emailAddress: string): Promise<{
+		available: boolean;
+		reason: null | 'used' | 'format' | 'disposable' | 'mx' | 'smtp';
+	}> {
+		const meta = await this.metaService.fetch();
+	
+		const exist = await this.userProfilesRepository.countBy({
+			emailVerified: true,
+			email: emailAddress,
+		});
+	
+		const validated = meta.enableActiveEmailValidation ? await validateEmail({
+			email: emailAddress,
+			validateRegex: true,
+			validateMx: true,
+			validateTypo: false, // TLDを見ているみたいだけどclubとか弾かれるので
+			validateDisposable: true, // 捨てアドかどうかチェック
+			validateSMTP: false, // 日本だと25ポートが殆どのプロバイダーで塞がれていてタイムアウトになるので
+		}) : { valid: true };
+	
+		const available = exist === 0 && validated.valid;
+	
+		return {
+			available,
+			reason: available ? null :
+			exist !== 0 ? 'used' :
+			validated.reason === 'regex' ? 'format' :
+			validated.reason === 'disposable' ? 'disposable' :
+			validated.reason === 'mx' ? 'mx' :
+			validated.reason === 'smtp' ? 'smtp' :
+			null,
+		};
+	}
+}
diff --git a/packages/backend/src/core/FederatedInstanceService.ts b/packages/backend/src/core/FederatedInstanceService.ts
new file mode 100644
index 0000000000..24bedd8192
--- /dev/null
+++ b/packages/backend/src/core/FederatedInstanceService.ts
@@ -0,0 +1,46 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { InstancesRepository } from '@/models/index.js';
+import type { Instance } from '@/models/entities/Instance.js';
+import { Cache } from '@/misc/cache.js';
+import { IdService } from '@/core/IdService.js';
+import { DI } from '@/di-symbols.js';
+import { UtilityService } from './UtilityService.js';
+
+@Injectable()
+export class FederatedInstanceService {
+	#cache: Cache<Instance>;
+
+	constructor(
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
+
+		private utilityService: UtilityService,
+		private idService: IdService,
+	) {
+		this.#cache = new Cache<Instance>(1000 * 60 * 60);
+	}
+
+	public async registerOrFetchInstanceDoc(host: string): Promise<Instance> {
+		host = this.utilityService.toPuny(host);
+	
+		const cached = this.#cache.get(host);
+		if (cached) return cached;
+	
+		const index = await this.instancesRepository.findOneBy({ host });
+	
+		if (index == null) {
+			const i = await this.instancesRepository.insert({
+				id: this.idService.genId(),
+				host,
+				caughtAt: new Date(),
+				lastCommunicatedAt: new Date(),
+			}).then(x => this.instancesRepository.findOneByOrFail(x.identifiers[0]));
+	
+			this.#cache.set(host, i);
+			return i;
+		} else {
+			this.#cache.set(host, index);
+			return index;
+		}
+	}
+}
diff --git a/packages/backend/src/core/FetchInstanceMetadataService.ts b/packages/backend/src/core/FetchInstanceMetadataService.ts
new file mode 100644
index 0000000000..6353784c13
--- /dev/null
+++ b/packages/backend/src/core/FetchInstanceMetadataService.ts
@@ -0,0 +1,283 @@
+import { URL } from 'node:url';
+import { Inject, Injectable } from '@nestjs/common';
+import { JSDOM } from 'jsdom';
+import fetch from 'node-fetch';
+import tinycolor from 'tinycolor2';
+import type { Instance } from '@/models/entities/Instance.js';
+import { InstancesRepository } from '@/models/index.js';
+import { AppLockService } from '@/core/AppLockService.js';
+import Logger from '@/logger.js';
+import { DI } from '@/di-symbols.js';
+import { HttpRequestService } from './HttpRequestService.js';
+import type { DOMWindow } from 'jsdom';
+
+const logger = new Logger('metadata', 'cyan');
+
+type NodeInfo = {
+	openRegistrations?: any;
+	software?: {
+		name?: any;
+		version?: any;
+	};
+	metadata?: {
+		name?: any;
+		nodeName?: any;
+		nodeDescription?: any;
+		description?: any;
+		maintainer?: {
+			name?: any;
+			email?: any;
+		};
+	};
+};
+
+@Injectable()
+export class FetchInstanceMetadataService {
+	constructor(
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
+
+		private appLockService: AppLockService,
+		private httpRequestService: HttpRequestService,
+	) {
+	}
+
+	public async fetchInstanceMetadata(instance: Instance, force = false): Promise<void> {
+		const unlock = await this.appLockService.getFetchInstanceMetadataLock(instance.host);
+	
+		if (!force) {
+			const _instance = await this.instancesRepository.findOneBy({ host: instance.host });
+			const now = Date.now();
+			if (_instance && _instance.infoUpdatedAt && (now - _instance.infoUpdatedAt.getTime() < 1000 * 60 * 60 * 24)) {
+				unlock();
+				return;
+			}
+		}
+	
+		logger.info(`Fetching metadata of ${instance.host} ...`);
+	
+		try {
+			const [info, dom, manifest] = await Promise.all([
+				this.#fetchNodeinfo(instance).catch(() => null),
+				this.#fetchDom(instance).catch(() => null),
+				this.#fetchManifest(instance).catch(() => null),
+			]);
+	
+			const [favicon, icon, themeColor, name, description] = await Promise.all([
+				this.#fetchFaviconUrl(instance, dom).catch(() => null),
+				this.#fetchIconUrl(instance, dom, manifest).catch(() => null),
+				this.#getThemeColor(info, dom, manifest).catch(() => null),
+				this.#getSiteName(info, dom, manifest).catch(() => null),
+				this.#getDescription(info, dom, manifest).catch(() => null),
+			]);
+	
+			logger.succ(`Successfuly fetched metadata of ${instance.host}`);
+	
+			const updates = {
+				infoUpdatedAt: new Date(),
+			} as Record<string, any>;
+	
+			if (info) {
+				updates.softwareName = info.software?.name.toLowerCase();
+				updates.softwareVersion = info.software?.version;
+				updates.openRegistrations = info.openRegistrations;
+				updates.maintainerName = info.metadata ? info.metadata.maintainer ? (info.metadata.maintainer.name ?? null) : null : null;
+				updates.maintainerEmail = info.metadata ? info.metadata.maintainer ? (info.metadata.maintainer.email ?? null) : null : null;
+			}
+	
+			if (name) updates.name = name;
+			if (description) updates.description = description;
+			if (icon || favicon) updates.iconUrl = icon ?? favicon;
+			if (favicon) updates.faviconUrl = favicon;
+			if (themeColor) updates.themeColor = themeColor;
+	
+			await this.instancesRepository.update(instance.id, updates);
+	
+			logger.succ(`Successfuly updated metadata of ${instance.host}`);
+		} catch (e) {
+			logger.error(`Failed to update metadata of ${instance.host}: ${e}`);
+		} finally {
+			unlock();
+		}
+	}
+
+	async #fetchNodeinfo(instance: Instance): Promise<NodeInfo> {
+		logger.info(`Fetching nodeinfo of ${instance.host} ...`);
+	
+		try {
+			const wellknown = await this.httpRequestService.getJson('https://' + instance.host + '/.well-known/nodeinfo')
+				.catch(err => {
+					if (err.statusCode === 404) {
+						throw 'No nodeinfo provided';
+					} else {
+						throw err.statusCode ?? err.message;
+					}
+				}) as Record<string, unknown>;
+	
+			if (wellknown.links == null || !Array.isArray(wellknown.links)) {
+				throw 'No wellknown links';
+			}
+	
+			const links = wellknown.links as any[];
+	
+			const lnik1_0 = links.find(link => link.rel === 'http://nodeinfo.diaspora.software/ns/schema/1.0');
+			const lnik2_0 = links.find(link => link.rel === 'http://nodeinfo.diaspora.software/ns/schema/2.0');
+			const lnik2_1 = links.find(link => link.rel === 'http://nodeinfo.diaspora.software/ns/schema/2.1');
+			const link = lnik2_1 ?? lnik2_0 ?? lnik1_0;
+	
+			if (link == null) {
+				throw 'No nodeinfo link provided';
+			}
+	
+			const info = await this.httpRequestService.getJson(link.href)
+				.catch(err => {
+					throw err.statusCode ?? err.message;
+				});
+	
+			logger.succ(`Successfuly fetched nodeinfo of ${instance.host}`);
+	
+			return info as NodeInfo;
+		} catch (err) {
+			logger.error(`Failed to fetch nodeinfo of ${instance.host}: ${err}`);
+	
+			throw err;
+		}
+	}
+
+	async #fetchDom(instance: Instance): Promise<DOMWindow['document']> {
+		logger.info(`Fetching HTML of ${instance.host} ...`);
+	
+		const url = 'https://' + instance.host;
+	
+		const html = await this.httpRequestService.getHtml(url);
+	
+		const { window } = new JSDOM(html);
+		const doc = window.document;
+	
+		return doc;
+	}
+
+	async #fetchManifest(instance: Instance): Promise<Record<string, unknown> | null> {
+		const url = 'https://' + instance.host;
+	
+		const manifestUrl = url + '/manifest.json';
+	
+		const manifest = await this.httpRequestService.getJson(manifestUrl) as Record<string, unknown>;
+	
+		return manifest;
+	}
+
+	async #fetchFaviconUrl(instance: Instance, doc: DOMWindow['document'] | null): Promise<string | null> {
+		const url = 'https://' + instance.host;
+	
+		if (doc) {
+			// https://github.com/misskey-dev/misskey/pull/8220#issuecomment-1025104043
+			const href = Array.from(doc.getElementsByTagName('link')).reverse().find(link => link.relList.contains('icon'))?.href;
+	
+			if (href) {
+				return (new URL(href, url)).href;
+			}
+		}
+	
+		const faviconUrl = url + '/favicon.ico';
+	
+		const favicon = await fetch(faviconUrl, {
+			// TODO
+			//timeout: 10000,
+			agent: url => this.httpRequestService.getAgentByUrl(url),
+		});
+	
+		if (favicon.ok) {
+			return faviconUrl;
+		}
+	
+		return null;
+	}
+
+	async #fetchIconUrl(instance: Instance, doc: DOMWindow['document'] | null, manifest: Record<string, any> | null): Promise<string | null> {
+		if (manifest && manifest.icons && manifest.icons.length > 0 && manifest.icons[0].src) {
+			const url = 'https://' + instance.host;
+			return (new URL(manifest.icons[0].src, url)).href;
+		}
+	
+		if (doc) {
+			const url = 'https://' + instance.host;
+	
+			// https://github.com/misskey-dev/misskey/pull/8220#issuecomment-1025104043
+			const links = Array.from(doc.getElementsByTagName('link')).reverse();
+			// https://github.com/misskey-dev/misskey/pull/8220/files/0ec4eba22a914e31b86874f12448f88b3e58dd5a#r796487559
+			const href = 
+				[
+					links.find(link => link.relList.contains('apple-touch-icon-precomposed'))?.href,
+					links.find(link => link.relList.contains('apple-touch-icon'))?.href,
+					links.find(link => link.relList.contains('icon'))?.href,
+				]
+					.find(href => href);
+	
+			if (href) {
+				return (new URL(href, url)).href;
+			}
+		}
+	
+		return null;
+	}
+
+	async #getThemeColor(info: NodeInfo | null, doc: DOMWindow['document'] | null, manifest: Record<string, any> | null): Promise<string | null> {
+		const themeColor = info?.metadata?.themeColor ?? doc?.querySelector('meta[name="theme-color"]')?.getAttribute('content') ?? manifest?.theme_color;
+	
+		if (themeColor) {
+			const color = new tinycolor(themeColor);
+			if (color.isValid()) return color.toHexString();
+		}
+	
+		return null;
+	}
+
+	async #getSiteName(info: NodeInfo | null, doc: DOMWindow['document'] | null, manifest: Record<string, any> | null): Promise<string | null> {
+		if (info && info.metadata) {
+			if (info.metadata.nodeName || info.metadata.name) {
+				return info.metadata.nodeName ?? info.metadata.name;
+			}
+		}
+	
+		if (doc) {
+			const og = doc.querySelector('meta[property="og:title"]')?.getAttribute('content');
+	
+			if (og) {
+				return og;
+			}
+		}
+	
+		if (manifest) {
+			return manifest.name ?? manifest.short_name;
+		}
+	
+		return null;
+	}
+
+	async #getDescription(info: NodeInfo | null, doc: DOMWindow['document'] | null, manifest: Record<string, any> | null): Promise<string | null> {
+		if (info && info.metadata) {
+			if (info.metadata.nodeDescription || info.metadata.description) {
+				return info.metadata.nodeDescription ?? info.metadata.description;
+			}
+		}
+	
+		if (doc) {
+			const meta = doc.querySelector('meta[name="description"]')?.getAttribute('content');
+			if (meta) {
+				return meta;
+			}
+	
+			const og = doc.querySelector('meta[property="og:description"]')?.getAttribute('content');
+			if (og) {
+				return og;
+			}
+		}
+	
+		if (manifest) {
+			return manifest.name ?? manifest.short_name;
+		}
+	
+		return null;
+	}
+}
diff --git a/packages/backend/src/core/FileInfoService.ts b/packages/backend/src/core/FileInfoService.ts
new file mode 100644
index 0000000000..45c94dafdc
--- /dev/null
+++ b/packages/backend/src/core/FileInfoService.ts
@@ -0,0 +1,382 @@
+import * as fs from 'node:fs';
+import * as crypto from 'node:crypto';
+import { join } from 'node:path';
+import * as stream from 'node:stream';
+import * as util from 'node:util';
+import { Inject, Injectable } from '@nestjs/common';
+import { FSWatcher } from 'chokidar';
+import { fileTypeFromFile } from 'file-type';
+import FFmpeg from 'fluent-ffmpeg';
+import isSvg from 'is-svg';
+import probeImageSize from 'probe-image-size';
+import { type predictionType } from 'nsfwjs';
+import sharp from 'sharp';
+import { encode } from 'blurhash';
+import { createTempDir } from '@/misc/create-temp.js';
+import { AiService } from '@/core/AiService.js';
+
+const pipeline = util.promisify(stream.pipeline);
+
+export type FileInfo = {
+	size: number;
+	md5: string;
+	type: {
+		mime: string;
+		ext: string | null;
+	};
+	width?: number;
+	height?: number;
+	orientation?: number;
+	blurhash?: string;
+	sensitive: boolean;
+	porn: boolean;
+	warnings: string[];
+};
+
+const TYPE_OCTET_STREAM = {
+	mime: 'application/octet-stream',
+	ext: null,
+};
+
+const TYPE_SVG = {
+	mime: 'image/svg+xml',
+	ext: 'svg',
+};
+@Injectable()
+export class FileInfoService {
+	constructor(
+		private aiService: AiService,
+	) {
+	}
+
+	/**
+	 * Get file information
+	 */
+	public async getFileInfo(path: string, opts: {
+		skipSensitiveDetection: boolean;
+		sensitiveThreshold?: number;
+		sensitiveThresholdForPorn?: number;
+		enableSensitiveMediaDetectionForVideos?: boolean;
+	}): Promise<FileInfo> {
+		const warnings = [] as string[];
+
+		const size = await this.getFileSize(path);
+		const md5 = await this.#calcHash(path);
+
+		let type = await this.detectType(path);
+
+		// image dimensions
+		let width: number | undefined;
+		let height: number | undefined;
+		let orientation: number | undefined;
+
+		if (['image/jpeg', 'image/gif', 'image/png', 'image/apng', 'image/webp', 'image/bmp', 'image/tiff', 'image/svg+xml', 'image/vnd.adobe.photoshop'].includes(type.mime)) {
+			const imageSize = await this.#detectImageSize(path).catch(e => {
+				warnings.push(`detectImageSize failed: ${e}`);
+				return undefined;
+			});
+
+			// うまく判定できない画像は octet-stream にする
+			if (!imageSize) {
+				warnings.push('cannot detect image dimensions');
+				type = TYPE_OCTET_STREAM;
+			} else if (imageSize.wUnits === 'px') {
+				width = imageSize.width;
+				height = imageSize.height;
+				orientation = imageSize.orientation;
+
+				// 制限を超えている画像は octet-stream にする
+				if (imageSize.width > 16383 || imageSize.height > 16383) {
+					warnings.push('image dimensions exceeds limits');
+					type = TYPE_OCTET_STREAM;
+				}
+			} else {
+				warnings.push(`unsupported unit type: ${imageSize.wUnits}`);
+			}
+		}
+
+		let blurhash: string | undefined;
+
+		if (['image/jpeg', 'image/gif', 'image/png', 'image/apng', 'image/webp', 'image/svg+xml'].includes(type.mime)) {
+			blurhash = await this.#getBlurhash(path).catch(e => {
+				warnings.push(`getBlurhash failed: ${e}`);
+				return undefined;
+			});
+		}
+
+		let sensitive = false;
+		let porn = false;
+
+		if (!opts.skipSensitiveDetection) {
+			await this.#detectSensitivity(
+				path,
+				type.mime,
+				opts.sensitiveThreshold ?? 0.5,
+				opts.sensitiveThresholdForPorn ?? 0.75,
+				opts.enableSensitiveMediaDetectionForVideos ?? false,
+			).then(value => {
+				[sensitive, porn] = value;
+			}, error => {
+				warnings.push(`detectSensitivity failed: ${error}`);
+			});
+		}
+
+		return {
+			size,
+			md5,
+			type,
+			width,
+			height,
+			orientation,
+			blurhash,
+			sensitive,
+			porn,
+			warnings,
+		};
+	}
+
+	async #detectSensitivity(source: string, mime: string, sensitiveThreshold: number, sensitiveThresholdForPorn: number, analyzeVideo: boolean): Promise<[sensitive: boolean, porn: boolean]> {
+		let sensitive = false;
+		let porn = false;
+	
+		function judgePrediction(result: readonly predictionType[]): [sensitive: boolean, porn: boolean] {
+			let sensitive = false;
+			let porn = false;
+	
+			if ((result.find(x => x.className === 'Sexy')?.probability ?? 0) > sensitiveThreshold) sensitive = true;
+			if ((result.find(x => x.className === 'Hentai')?.probability ?? 0) > sensitiveThreshold) sensitive = true;
+			if ((result.find(x => x.className === 'Porn')?.probability ?? 0) > sensitiveThreshold) sensitive = true;
+	
+			if ((result.find(x => x.className === 'Porn')?.probability ?? 0) > sensitiveThresholdForPorn) porn = true;
+	
+			return [sensitive, porn];
+		}
+	
+		if (['image/jpeg', 'image/png', 'image/webp'].includes(mime)) {
+			const result = await this.aiService.detectSensitive(source);
+			if (result) {
+				[sensitive, porn] = judgePrediction(result);
+			}
+		} else if (analyzeVideo && (mime === 'image/apng' || mime.startsWith('video/'))) {
+			const [outDir, disposeOutDir] = await createTempDir();
+			try {
+				const command = FFmpeg()
+					.input(source)
+					.inputOptions([
+						'-skip_frame', 'nokey', // 可能ならキーフレームのみを取得してほしいとする（そうなるとは限らない）
+						'-lowres', '3', // 元の画質でデコードする必要はないので 1/8 画質でデコードしてもよいとする（そうなるとは限らない）
+					])
+					.noAudio()
+					.videoFilters([
+						{
+							filter: 'select', // フレームのフィルタリング
+							options: {
+								e: 'eq(pict_type,PICT_TYPE_I)', // I-Frame のみをフィルタする（VP9 とかはデコードしてみないとわからないっぽい）
+							},
+						},
+						{
+							filter: 'blackframe', // 暗いフレームの検出
+							options: {
+								amount: '0', // 暗さに関わらず全てのフレームで測定値を取る
+							},
+						},
+						{
+							filter: 'metadata',
+							options: {
+								mode: 'select', // フレーム選択モード
+								key: 'lavfi.blackframe.pblack', // フレームにおける暗部の百分率（前のフィルタからのメタデータを参照する）
+								value: '50',
+								function: 'less', // 50% 未満のフレームを選択する（50% 以上暗部があるフレームだと誤検知を招くかもしれないので）
+							},
+						},
+						{
+							filter: 'scale',
+							options: {
+								w: 299,
+								h: 299,
+							},
+						},
+					])
+					.format('image2')
+					.output(join(outDir, '%d.png'))
+					.outputOptions(['-vsync', '0']); // 可変フレームレートにすることで穴埋めをさせない
+				const results: ReturnType<typeof judgePrediction>[] = [];
+				let frameIndex = 0;
+				let targetIndex = 0;
+				let nextIndex = 1;
+				for await (const path of this.#asyncIterateFrames(outDir, command)) {
+					try {
+						const index = frameIndex++;
+						if (index !== targetIndex) {
+							continue;
+						}
+						targetIndex = nextIndex;
+						nextIndex += index; // fibonacci sequence によってフレーム数制限を掛ける
+						const result = await this.aiService.detectSensitive(path);
+						if (result) {
+							results.push(judgePrediction(result));
+						}
+					} finally {
+						fs.promises.unlink(path);
+					}
+				}
+				sensitive = results.filter(x => x[0]).length >= Math.ceil(results.length * sensitiveThreshold);
+				porn = results.filter(x => x[1]).length >= Math.ceil(results.length * sensitiveThresholdForPorn);
+			} finally {
+				disposeOutDir();
+			}
+		}
+	
+		return [sensitive, porn];
+	}
+	
+	async *#asyncIterateFrames(cwd: string, command: FFmpeg.FfmpegCommand): AsyncGenerator<string, void> {
+		const watcher = new FSWatcher({
+			cwd,
+			disableGlobbing: true,
+		});
+		let finished = false;
+		command.once('end', () => {
+			finished = true;
+			watcher.close();
+		});
+		command.run();
+		for (let i = 1; true; i++) { // eslint-disable-line @typescript-eslint/no-unnecessary-condition
+			const current = `${i}.png`;
+			const next = `${i + 1}.png`;
+			const framePath = join(cwd, current);
+			if (await this.#exists(join(cwd, next))) {
+				yield framePath;
+			} else if (!finished) { // eslint-disable-line @typescript-eslint/no-unnecessary-condition
+				watcher.add(next);
+				await new Promise<void>((resolve, reject) => {
+					watcher.on('add', function onAdd(path) {
+						if (path === next) { // 次フレームの書き出しが始まっているなら、現在フレームの書き出しは終わっている
+							watcher.unwatch(current);
+							watcher.off('add', onAdd);
+							resolve();
+						}
+					});
+					command.once('end', resolve); // 全てのフレームを処理し終わったなら、最終フレームである現在フレームの書き出しは終わっている
+					command.once('error', reject);
+				});
+				yield framePath;
+			} else if (await this.#exists(framePath)) {
+				yield framePath;
+			} else {
+				return;
+			}
+		}
+	}
+	
+	#exists(path: string): Promise<boolean> {
+		return fs.promises.access(path).then(() => true, () => false);
+	}
+
+	/**
+	 * Detect MIME Type and extension
+	 */
+	public async detectType(path: string): Promise<{
+	mime: string;
+	ext: string | null;
+}> {
+	// Check 0 byte
+		const fileSize = await this.getFileSize(path);
+		if (fileSize === 0) {
+			return TYPE_OCTET_STREAM;
+		}
+
+		const type = await fileTypeFromFile(path);
+
+		if (type) {
+		// XMLはSVGかもしれない
+			if (type.mime === 'application/xml' && await this.checkSvg(path)) {
+				return TYPE_SVG;
+			}
+
+			return {
+				mime: type.mime,
+				ext: type.ext,
+			};
+		}
+
+		// 種類が不明でもSVGかもしれない
+		if (await this.checkSvg(path)) {
+			return TYPE_SVG;
+		}
+
+		// それでも種類が不明なら application/octet-stream にする
+		return TYPE_OCTET_STREAM;
+	}
+
+	/**
+	 * Check the file is SVG or not
+	 */
+	public async checkSvg(path: string) {
+		try {
+			const size = await this.getFileSize(path);
+			if (size > 1 * 1024 * 1024) return false;
+			return isSvg(fs.readFileSync(path));
+		} catch {
+			return false;
+		}
+	}
+
+	/**
+	 * Get file size
+	 */
+	public async getFileSize(path: string): Promise<number> {
+		const getStat = util.promisify(fs.stat);
+		return (await getStat(path)).size;
+	}
+
+	/**
+	 * Calculate MD5 hash
+	 */
+	async #calcHash(path: string): Promise<string> {
+		const hash = crypto.createHash('md5').setEncoding('hex');
+		await pipeline(fs.createReadStream(path), hash);
+		return hash.read();
+	}
+
+	/**
+	 * Detect dimensions of image
+	 */
+	async #detectImageSize(path: string): Promise<{
+	width: number;
+	height: number;
+	wUnits: string;
+	hUnits: string;
+	orientation?: number;
+}> {
+		const readable = fs.createReadStream(path);
+		const imageSize = await probeImageSize(readable);
+		readable.destroy();
+		return imageSize;
+	}
+
+	/**
+	 * Calculate average color of image
+	 */
+	#getBlurhash(path: string): Promise<string> {
+		return new Promise((resolve, reject) => {
+			sharp(path)
+				.raw()
+				.ensureAlpha()
+				.resize(64, 64, { fit: 'inside' })
+				.toBuffer((err, buffer, { width, height }) => {
+					if (err) return reject(err);
+
+					let hash;
+
+					try {
+						hash = encode(new Uint8ClampedArray(buffer), width, height, 7, 7);
+					} catch (e) {
+						return reject(e);
+					}
+
+					resolve(hash);
+				});
+		});
+	}
+}
diff --git a/packages/backend/src/core/GlobalEventService.ts b/packages/backend/src/core/GlobalEventService.ts
new file mode 100644
index 0000000000..c36de63fde
--- /dev/null
+++ b/packages/backend/src/core/GlobalEventService.ts
@@ -0,0 +1,109 @@
+import { Inject, Injectable } from '@nestjs/common';
+import Redis from 'ioredis';
+import type { User } from '@/models/entities/User.js';
+import type { Note } from '@/models/entities/Note.js';
+import type { UserList } from '@/models/entities/UserList.js';
+import type { UserGroup } from '@/models/entities/UserGroup.js';
+import type { Antenna } from '@/models/entities/Antenna.js';
+import type { Channel } from '@/models/entities/Channel.js';
+import type {
+	StreamChannels,
+	AdminStreamTypes,
+	AntennaStreamTypes,
+	BroadcastTypes,
+	ChannelStreamTypes,
+	DriveStreamTypes,
+	GroupMessagingStreamTypes,
+	InternalStreamTypes,
+	MainStreamTypes,
+	MessagingIndexStreamTypes,
+	MessagingStreamTypes,
+	NoteStreamTypes,
+	UserListStreamTypes,
+	UserStreamTypes,
+} from '@/server/api/stream/types.js';
+import type { Packed } from '@/misc/schema.js';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+
+@Injectable()
+export class GlobalEventService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+	) {
+	}
+
+	private publish(channel: StreamChannels, type: string | null, value?: any): void {
+		const message = type == null ? value : value == null ?
+			{ type: type, body: null } :
+			{ type: type, body: value };
+
+		this.redisClient.publish(this.config.host, JSON.stringify({
+			channel: channel,
+			message: message,
+		}));
+	}
+
+	public publishInternalEvent<K extends keyof InternalStreamTypes>(type: K, value?: InternalStreamTypes[K]): void {
+		this.publish('internal', type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishUserEvent<K extends keyof UserStreamTypes>(userId: User['id'], type: K, value?: UserStreamTypes[K]): void {
+		this.publish(`user:${userId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishBroadcastStream<K extends keyof BroadcastTypes>(type: K, value?: BroadcastTypes[K]): void {
+		this.publish('broadcast', type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishMainStream<K extends keyof MainStreamTypes>(userId: User['id'], type: K, value?: MainStreamTypes[K]): void {
+		this.publish(`mainStream:${userId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishDriveStream<K extends keyof DriveStreamTypes>(userId: User['id'], type: K, value?: DriveStreamTypes[K]): void {
+		this.publish(`driveStream:${userId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishNoteStream<K extends keyof NoteStreamTypes>(noteId: Note['id'], type: K, value?: NoteStreamTypes[K]): void {
+		this.publish(`noteStream:${noteId}`, type, {
+			id: noteId,
+			body: value,
+		});
+	}
+
+	public publishChannelStream<K extends keyof ChannelStreamTypes>(channelId: Channel['id'], type: K, value?: ChannelStreamTypes[K]): void {
+		this.publish(`channelStream:${channelId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishUserListStream<K extends keyof UserListStreamTypes>(listId: UserList['id'], type: K, value?: UserListStreamTypes[K]): void {
+		this.publish(`userListStream:${listId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishAntennaStream<K extends keyof AntennaStreamTypes>(antennaId: Antenna['id'], type: K, value?: AntennaStreamTypes[K]): void {
+		this.publish(`antennaStream:${antennaId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishMessagingStream<K extends keyof MessagingStreamTypes>(userId: User['id'], otherpartyId: User['id'], type: K, value?: MessagingStreamTypes[K]): void {
+		this.publish(`messagingStream:${userId}-${otherpartyId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishGroupMessagingStream<K extends keyof GroupMessagingStreamTypes>(groupId: UserGroup['id'], type: K, value?: GroupMessagingStreamTypes[K]): void {
+		this.publish(`messagingStream:${groupId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishMessagingIndexStream<K extends keyof MessagingIndexStreamTypes>(userId: User['id'], type: K, value?: MessagingIndexStreamTypes[K]): void {
+		this.publish(`messagingIndexStream:${userId}`, type, typeof value === 'undefined' ? null : value);
+	}
+
+	public publishNotesStream(note: Packed<'Note'>): void {
+		this.publish('notesStream', null, note);
+	}
+
+	public publishAdminStream<K extends keyof AdminStreamTypes>(userId: User['id'], type: K, value?: AdminStreamTypes[K]): void {
+		this.publish(`adminStream:${userId}`, type, typeof value === 'undefined' ? null : value);
+	}
+}
diff --git a/packages/backend/src/core/HashtagService.ts b/packages/backend/src/core/HashtagService.ts
new file mode 100644
index 0000000000..f6c06d48f4
--- /dev/null
+++ b/packages/backend/src/core/HashtagService.ts
@@ -0,0 +1,147 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import type { User } from '@/models/entities/User.js';
+import { normalizeForSearch } from '@/misc/normalize-for-search.js';
+import { IdService } from '@/core/IdService.js';
+import type { Hashtag } from '@/models/entities/Hashtag.js';
+import HashtagChart from '@/core/chart/charts/hashtag.js';
+import { HashtagsRepository, UsersRepository } from '@/models/index.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+
+@Injectable()
+export class HashtagService {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.hashtagsRepository)
+		private hashtagsRepository: HashtagsRepository,
+
+		private userEntityService: UserEntityService,
+		private idService: IdService,
+		private hashtagChart: HashtagChart,
+	) {
+	}
+
+	public async updateHashtags(user: { id: User['id']; host: User['host']; }, tags: string[]) {
+		for (const tag of tags) {
+			await this.updateHashtag(user, tag);
+		}
+	}
+
+	public async updateUsertags(user: User, tags: string[]) {
+		for (const tag of tags) {
+			await this.updateHashtag(user, tag, true, true);
+		}
+
+		for (const tag of (user.tags ?? []).filter(x => !tags.includes(x))) {
+			await this.updateHashtag(user, tag, true, false);
+		}
+	}
+
+	public async updateHashtag(user: { id: User['id']; host: User['host']; }, tag: string, isUserAttached = false, inc = true) {
+		tag = normalizeForSearch(tag);
+
+		const index = await this.hashtagsRepository.findOneBy({ name: tag });
+
+		if (index == null && !inc) return;
+
+		if (index != null) {
+			const q = this.hashtagsRepository.createQueryBuilder('tag').update()
+				.where('name = :name', { name: tag });
+
+			const set = {} as any;
+
+			if (isUserAttached) {
+				if (inc) {
+				// 自分が初めてこのタグを使ったなら
+					if (!index.attachedUserIds.some(id => id === user.id)) {
+						set.attachedUserIds = () => `array_append("attachedUserIds", '${user.id}')`;
+						set.attachedUsersCount = () => '"attachedUsersCount" + 1';
+					}
+					// 自分が(ローカル内で)初めてこのタグを使ったなら
+					if (this.userEntityService.isLocalUser(user) && !index.attachedLocalUserIds.some(id => id === user.id)) {
+						set.attachedLocalUserIds = () => `array_append("attachedLocalUserIds", '${user.id}')`;
+						set.attachedLocalUsersCount = () => '"attachedLocalUsersCount" + 1';
+					}
+					// 自分が(リモートで)初めてこのタグを使ったなら
+					if (this.userEntityService.isRemoteUser(user) && !index.attachedRemoteUserIds.some(id => id === user.id)) {
+						set.attachedRemoteUserIds = () => `array_append("attachedRemoteUserIds", '${user.id}')`;
+						set.attachedRemoteUsersCount = () => '"attachedRemoteUsersCount" + 1';
+					}
+				} else {
+					set.attachedUserIds = () => `array_remove("attachedUserIds", '${user.id}')`;
+					set.attachedUsersCount = () => '"attachedUsersCount" - 1';
+					if (this.userEntityService.isLocalUser(user)) {
+						set.attachedLocalUserIds = () => `array_remove("attachedLocalUserIds", '${user.id}')`;
+						set.attachedLocalUsersCount = () => '"attachedLocalUsersCount" - 1';
+					} else {
+						set.attachedRemoteUserIds = () => `array_remove("attachedRemoteUserIds", '${user.id}')`;
+						set.attachedRemoteUsersCount = () => '"attachedRemoteUsersCount" - 1';
+					}
+				}
+			} else {
+			// 自分が初めてこのタグを使ったなら
+				if (!index.mentionedUserIds.some(id => id === user.id)) {
+					set.mentionedUserIds = () => `array_append("mentionedUserIds", '${user.id}')`;
+					set.mentionedUsersCount = () => '"mentionedUsersCount" + 1';
+				}
+				// 自分が(ローカル内で)初めてこのタグを使ったなら
+				if (this.userEntityService.isLocalUser(user) && !index.mentionedLocalUserIds.some(id => id === user.id)) {
+					set.mentionedLocalUserIds = () => `array_append("mentionedLocalUserIds", '${user.id}')`;
+					set.mentionedLocalUsersCount = () => '"mentionedLocalUsersCount" + 1';
+				}
+				// 自分が(リモートで)初めてこのタグを使ったなら
+				if (this.userEntityService.isRemoteUser(user) && !index.mentionedRemoteUserIds.some(id => id === user.id)) {
+					set.mentionedRemoteUserIds = () => `array_append("mentionedRemoteUserIds", '${user.id}')`;
+					set.mentionedRemoteUsersCount = () => '"mentionedRemoteUsersCount" + 1';
+				}
+			}
+
+			if (Object.keys(set).length > 0) {
+				q.set(set);
+				q.execute();
+			}
+		} else {
+			if (isUserAttached) {
+				this.hashtagsRepository.insert({
+					id: this.idService.genId(),
+					name: tag,
+					mentionedUserIds: [],
+					mentionedUsersCount: 0,
+					mentionedLocalUserIds: [],
+					mentionedLocalUsersCount: 0,
+					mentionedRemoteUserIds: [],
+					mentionedRemoteUsersCount: 0,
+					attachedUserIds: [user.id],
+					attachedUsersCount: 1,
+					attachedLocalUserIds: this.userEntityService.isLocalUser(user) ? [user.id] : [],
+					attachedLocalUsersCount: this.userEntityService.isLocalUser(user) ? 1 : 0,
+					attachedRemoteUserIds: this.userEntityService.isRemoteUser(user) ? [user.id] : [],
+					attachedRemoteUsersCount: this.userEntityService.isRemoteUser(user) ? 1 : 0,
+				} as Hashtag);
+			} else {
+				this.hashtagsRepository.insert({
+					id: this.idService.genId(),
+					name: tag,
+					mentionedUserIds: [user.id],
+					mentionedUsersCount: 1,
+					mentionedLocalUserIds: this.userEntityService.isLocalUser(user) ? [user.id] : [],
+					mentionedLocalUsersCount: this.userEntityService.isLocalUser(user) ? 1 : 0,
+					mentionedRemoteUserIds: this.userEntityService.isRemoteUser(user) ? [user.id] : [],
+					mentionedRemoteUsersCount: this.userEntityService.isRemoteUser(user) ? 1 : 0,
+					attachedUserIds: [],
+					attachedUsersCount: 0,
+					attachedLocalUserIds: [],
+					attachedLocalUsersCount: 0,
+					attachedRemoteUserIds: [],
+					attachedRemoteUsersCount: 0,
+				} as Hashtag);
+			}
+		}
+
+		if (!isUserAttached) {
+			this.hashtagChart.update(tag, user);
+		}
+	}
+}
diff --git a/packages/backend/src/core/HttpRequestService.ts b/packages/backend/src/core/HttpRequestService.ts
new file mode 100644
index 0000000000..21cde12536
--- /dev/null
+++ b/packages/backend/src/core/HttpRequestService.ts
@@ -0,0 +1,154 @@
+import * as http from 'node:http';
+import * as https from 'node:https';
+import CacheableLookup from 'cacheable-lookup';
+import fetch from 'node-fetch';
+import { HttpProxyAgent, HttpsProxyAgent } from 'hpagent';
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import { StatusError } from '@/misc/status-error.js';
+import type { Response } from 'node-fetch';
+import type { URL } from 'node:url';
+
+@Injectable()
+export class HttpRequestService {
+	/**
+	 * Get http non-proxy agent
+	 */
+	#http: http.Agent;
+
+	/**
+	 * Get https non-proxy agent
+	 */
+	#https: https.Agent;
+
+	/**
+	 * Get http proxy or non-proxy agent
+	 */
+	public httpAgent: http.Agent;
+
+	/**
+	 * Get https proxy or non-proxy agent
+	 */
+	public httpsAgent: https.Agent;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+	) {
+		const cache = new CacheableLookup({
+			maxTtl: 3600,	// 1hours
+			errorTtl: 30,	// 30secs
+			lookup: false,	// nativeのdns.lookupにfallbackしない
+		});
+		
+		this.#http = new http.Agent({
+			keepAlive: true,
+			keepAliveMsecs: 30 * 1000,
+			lookup: cache.lookup,
+		} as http.AgentOptions);
+		
+		this.#https = new https.Agent({
+			keepAlive: true,
+			keepAliveMsecs: 30 * 1000,
+			lookup: cache.lookup,
+		} as https.AgentOptions);
+		
+		const maxSockets = Math.max(256, config.deliverJobConcurrency ?? 128);
+		
+		this.httpAgent = config.proxy
+			? new HttpProxyAgent({
+				keepAlive: true,
+				keepAliveMsecs: 30 * 1000,
+				maxSockets,
+				maxFreeSockets: 256,
+				scheduling: 'lifo',
+				proxy: config.proxy,
+			})
+			: this.#http;
+
+		this.httpsAgent = config.proxy
+			? new HttpsProxyAgent({
+				keepAlive: true,
+				keepAliveMsecs: 30 * 1000,
+				maxSockets,
+				maxFreeSockets: 256,
+				scheduling: 'lifo',
+				proxy: config.proxy,
+			})
+			: this.#https;
+	}
+
+	/**
+	 * Get agent by URL
+	 * @param url URL
+	 * @param bypassProxy Allways bypass proxy
+	 */
+	public getAgentByUrl(url: URL, bypassProxy = false): http.Agent | https.Agent {
+		if (bypassProxy || (this.config.proxyBypassHosts || []).includes(url.hostname)) {
+			return url.protocol === 'http:' ? this.#http : this.#https;
+		} else {
+			return url.protocol === 'http:' ? this.httpAgent : this.httpsAgent;
+		}
+	}
+
+	public async getJson(url: string, accept = 'application/json, */*', timeout = 10000, headers?: Record<string, string>): Promise<unknown> {
+		const res = await this.getResponse({
+			url,
+			method: 'GET',
+			headers: Object.assign({
+				'User-Agent': this.config.userAgent,
+				Accept: accept,
+			}, headers ?? {}),
+			timeout,
+		});
+
+		return await res.json();
+	}
+
+	public async getHtml(url: string, accept = 'text/html, */*', timeout = 10000, headers?: Record<string, string>): Promise<string> {
+		const res = await this.getResponse({
+			url,
+			method: 'GET',
+			headers: Object.assign({
+				'User-Agent': this.config.userAgent,
+				Accept: accept,
+			}, headers ?? {}),
+			timeout,
+		});
+
+		return await res.text();
+	}
+
+	public async getResponse(args: {
+		url: string,
+		method: string,
+		body?: string,
+		headers: Record<string, string>,
+		timeout?: number,
+		size?: number,
+	}): Promise<Response> {
+		const timeout = args.timeout ?? 10 * 1000;
+
+		const controller = new AbortController();
+		setTimeout(() => {
+			controller.abort();
+		}, timeout * 6);
+
+		const res = await fetch(args.url, {
+			method: args.method,
+			headers: args.headers,
+			body: args.body,
+			timeout,
+			size: args.size ?? 10 * 1024 * 1024,
+			agent: (url) => this.getAgentByUrl(url),
+			signal: controller.signal,
+		});
+
+		if (!res.ok) {
+			throw new StatusError(`${res.status} ${res.statusText}`, res.status, res.statusText);
+		}
+
+		return res;
+	}
+}
diff --git a/packages/backend/src/core/IdService.ts b/packages/backend/src/core/IdService.ts
new file mode 100644
index 0000000000..b3b0d63627
--- /dev/null
+++ b/packages/backend/src/core/IdService.ts
@@ -0,0 +1,33 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { ulid } from 'ulid';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import { genAid } from '@/misc/id/aid.js';
+import { genMeid } from '@/misc/id/meid.js';
+import { genMeidg } from '@/misc/id/meidg.js';
+import { genObjectId } from '@/misc/id/object-id.js';
+
+@Injectable()
+export class IdService {
+	#metohd: string;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+	) {
+		this.#metohd = config.id.toLowerCase();
+	}
+
+	public genId(date?: Date): string {
+		if (!date || (date > new Date())) date = new Date();
+	
+		switch (this.#metohd) {
+			case 'aid': return genAid(date);
+			case 'meid': return genMeid(date);
+			case 'meidg': return genMeidg(date);
+			case 'ulid': return ulid(date.getTime());
+			case 'objectid': return genObjectId(date);
+			default: throw new Error('unrecognized id generation method');
+		}
+	}
+}
diff --git a/packages/backend/src/core/ImageProcessingService.ts b/packages/backend/src/core/ImageProcessingService.ts
new file mode 100644
index 0000000000..d215be2131
--- /dev/null
+++ b/packages/backend/src/core/ImageProcessingService.ts
@@ -0,0 +1,99 @@
+import { Inject, Injectable } from '@nestjs/common';
+import sharp from 'sharp';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+
+export type IImage = {
+	data: Buffer;
+	ext: string | null;
+	type: string;
+};
+
+@Injectable()
+export class ImageProcessingService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+	) {
+	}
+
+	/**
+	 * Convert to JPEG
+	 *   with resize, remove metadata, resolve orientation, stop animation
+	 */
+	public async convertToJpeg(path: string, width: number, height: number): Promise<IImage> {
+		return this.convertSharpToJpeg(await sharp(path), width, height);
+	}
+
+	public async convertSharpToJpeg(sharp: sharp.Sharp, width: number, height: number): Promise<IImage> {
+		const data = await sharp
+			.resize(width, height, {
+				fit: 'inside',
+				withoutEnlargement: true,
+			})
+			.rotate()
+			.jpeg({
+				quality: 85,
+				progressive: true,
+			})
+			.toBuffer();
+
+		return {
+			data,
+			ext: 'jpg',
+			type: 'image/jpeg',
+		};
+	}
+
+	/**
+	 * Convert to WebP
+	 *   with resize, remove metadata, resolve orientation, stop animation
+	 */
+	public async convertToWebp(path: string, width: number, height: number, quality = 85): Promise<IImage> {
+		return this.convertSharpToWebp(await sharp(path), width, height, quality);
+	}
+
+	public async convertSharpToWebp(sharp: sharp.Sharp, width: number, height: number, quality = 85): Promise<IImage> {
+		const data = await sharp
+			.resize(width, height, {
+				fit: 'inside',
+				withoutEnlargement: true,
+			})
+			.rotate()
+			.webp({
+				quality,
+			})
+			.toBuffer();
+
+		return {
+			data,
+			ext: 'webp',
+			type: 'image/webp',
+		};
+	}
+
+	/**
+	 * Convert to PNG
+	 *   with resize, remove metadata, resolve orientation, stop animation
+	 */
+	public async convertToPng(path: string, width: number, height: number): Promise<IImage> {
+		return this.convertSharpToPng(await sharp(path), width, height);
+	}
+
+	public async convertSharpToPng(sharp: sharp.Sharp, width: number, height: number): Promise<IImage> {
+		const data = await sharp
+			.resize(width, height, {
+				fit: 'inside',
+				withoutEnlargement: true,
+			})
+			.rotate()
+			.png()
+			.toBuffer();
+
+		return {
+			data,
+			ext: 'png',
+			type: 'image/png',
+		};
+	}
+}
diff --git a/packages/backend/src/core/InstanceActorService.ts b/packages/backend/src/core/InstanceActorService.ts
new file mode 100644
index 0000000000..3a93a49c7b
--- /dev/null
+++ b/packages/backend/src/core/InstanceActorService.ts
@@ -0,0 +1,42 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { IsNull } from 'typeorm';
+import type { ILocalUser } from '@/models/entities/User.js';
+import { UsersRepository } from '@/models/index.js';
+import { Cache } from '@/misc/cache.js';
+import { DI } from '@/di-symbols.js';
+import { CreateSystemUserService } from './CreateSystemUserService.js';
+
+const ACTOR_USERNAME = 'instance.actor' as const;
+
+@Injectable()
+export class InstanceActorService {
+	#cache: Cache<ILocalUser>;
+
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private createSystemUserService: CreateSystemUserService,
+	) {
+		this.#cache = new Cache<ILocalUser>(Infinity);
+	}
+
+	public async getInstanceActor(): Promise<ILocalUser> {
+		const cached = this.#cache.get(null);
+		if (cached) return cached;
+	
+		const user = await this.usersRepository.findOneBy({
+			host: IsNull(),
+			username: ACTOR_USERNAME,
+		}) as ILocalUser | undefined;
+	
+		if (user) {
+			this.#cache.set(null, user);
+			return user;
+		} else {
+			const created = await this.createSystemUserService.createSystemUser(ACTOR_USERNAME) as ILocalUser;
+			this.#cache.set(null, created);
+			return created;
+		}
+	}
+}
diff --git a/packages/backend/src/core/InternalStorageService.ts b/packages/backend/src/core/InternalStorageService.ts
new file mode 100644
index 0000000000..9bc3597baf
--- /dev/null
+++ b/packages/backend/src/core/InternalStorageService.ts
@@ -0,0 +1,45 @@
+import * as fs from 'node:fs';
+import * as Path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = dirname(_filename);
+
+const path = Path.resolve(_dirname, '../../../../files');
+
+@Injectable()
+export class InternalStorageService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+	) {
+	}
+
+	public resolvePath(key: string) {
+		return Path.resolve(path, key);
+	}
+
+	public read(key: string) {
+		return fs.createReadStream(this.resolvePath(key));
+	}
+
+	public saveFromPath(key: string, srcPath: string) {
+		fs.mkdirSync(path, { recursive: true });
+		fs.copyFileSync(srcPath, this.resolvePath(key));
+		return `${this.config.url}/files/${key}`;
+	}
+
+	public saveFromBuffer(key: string, data: Buffer) {
+		fs.mkdirSync(path, { recursive: true });
+		fs.writeFileSync(this.resolvePath(key), data);
+		return `${this.config.url}/files/${key}`;
+	}
+
+	public del(key: string) {
+		fs.unlink(this.resolvePath(key), () => {});
+	}
+}
diff --git a/packages/backend/src/core/MessagingService.ts b/packages/backend/src/core/MessagingService.ts
new file mode 100644
index 0000000000..669089e1e5
--- /dev/null
+++ b/packages/backend/src/core/MessagingService.ts
@@ -0,0 +1,300 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { In, Not } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import type { MessagingMessage } from '@/models/entities/MessagingMessage.js';
+import type { Note } from '@/models/entities/Note.js';
+import type { User, CacheableUser, IRemoteUser } from '@/models/entities/User.js';
+import type { UserGroup } from '@/models/entities/UserGroup.js';
+import { QueueService } from '@/core/QueueService.js';
+import { toArray } from '@/misc/prelude/array.js';
+import { IdentifiableError } from '@/misc/identifiable-error.js';
+import { MessagingMessagesRepository, MutingsRepository, UserGroupJoiningsRepository, UsersRepository } from '@/models/index.js';
+import { IdService } from './IdService.js';
+import { GlobalEventService } from './GlobalEventService.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+import { ApRendererService } from './remote/activitypub/ApRendererService.js';
+import { MessagingMessageEntityService } from './entities/MessagingMessageEntityService.js';
+import { PushNotificationService } from './PushNotificationService.js';
+
+@Injectable()
+export class MessagingService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.messagingMessagesRepository)
+		private messagingMessagesRepository: MessagingMessagesRepository,
+
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		private userEntityService: UserEntityService,
+		private messagingMessageEntityService: MessagingMessageEntityService,
+		private idService: IdService,
+		private globalEventService: GlobalEventService,
+		private apRendererService: ApRendererService,
+		private queueService: QueueService,
+		private pushNotificationService: PushNotificationService,
+	) {
+	}
+
+	public async createMessage(user: { id: User['id']; host: User['host']; }, recipientUser: CacheableUser | undefined, recipientGroup: UserGroup | undefined, text: string | null | undefined, file: DriveFile | null, uri?: string) {
+		const message = {
+			id: this.idService.genId(),
+			createdAt: new Date(),
+			fileId: file ? file.id : null,
+			recipientId: recipientUser ? recipientUser.id : null,
+			groupId: recipientGroup ? recipientGroup.id : null,
+			text: text ? text.trim() : null,
+			userId: user.id,
+			isRead: false,
+			reads: [] as any[],
+			uri,
+		} as MessagingMessage;
+	
+		await this.messagingMessagesRepository.insert(message);
+	
+		const messageObj = await this.messagingMessageEntityService.pack(message);
+	
+		if (recipientUser) {
+			if (this.userEntityService.isLocalUser(user)) {
+				// 自分のストリーム
+				this.globalEventService.publishMessagingStream(message.userId, recipientUser.id, 'message', messageObj);
+				this.globalEventService.publishMessagingIndexStream(message.userId, 'message', messageObj);
+				this.globalEventService.publishMainStream(message.userId, 'messagingMessage', messageObj);
+			}
+	
+			if (this.userEntityService.isLocalUser(recipientUser)) {
+				// 相手のストリーム
+				this.globalEventService.publishMessagingStream(recipientUser.id, message.userId, 'message', messageObj);
+				this.globalEventService.publishMessagingIndexStream(recipientUser.id, 'message', messageObj);
+				this.globalEventService.publishMainStream(recipientUser.id, 'messagingMessage', messageObj);
+			}
+		} else if (recipientGroup) {
+			// グループのストリーム
+			this.globalEventService.publishGroupMessagingStream(recipientGroup.id, 'message', messageObj);
+	
+			// メンバーのストリーム
+			const joinings = await this.userGroupJoiningsRepository.findBy({ userGroupId: recipientGroup.id });
+			for (const joining of joinings) {
+				this.globalEventService.publishMessagingIndexStream(joining.userId, 'message', messageObj);
+				this.globalEventService.publishMainStream(joining.userId, 'messagingMessage', messageObj);
+			}
+		}
+	
+		// 2秒経っても(今回作成した)メッセージが既読にならなかったら「未読のメッセージがありますよ」イベントを発行する
+		setTimeout(async () => {
+			const freshMessage = await this.messagingMessagesRepository.findOneBy({ id: message.id });
+			if (freshMessage == null) return; // メッセージが削除されている場合もある
+	
+			if (recipientUser && this.userEntityService.isLocalUser(recipientUser)) {
+				if (freshMessage.isRead) return; // 既読
+	
+				//#region ただしミュートされているなら発行しない
+				const mute = await this.mutingsRepository.findBy({
+					muterId: recipientUser.id,
+				});
+				if (mute.map(m => m.muteeId).includes(user.id)) return;
+				//#endregion
+	
+				this.globalEventService.publishMainStream(recipientUser.id, 'unreadMessagingMessage', messageObj);
+				this.pushNotificationService.pushNotification(recipientUser.id, 'unreadMessagingMessage', messageObj);
+			} else if (recipientGroup) {
+				const joinings = await this.userGroupJoiningsRepository.findBy({ userGroupId: recipientGroup.id, userId: Not(user.id) });
+				for (const joining of joinings) {
+					if (freshMessage.reads.includes(joining.userId)) return; // 既読
+					this.globalEventService.publishMainStream(joining.userId, 'unreadMessagingMessage', messageObj);
+					this.pushNotificationService.pushNotification(joining.userId, 'unreadMessagingMessage', messageObj);
+				}
+			}
+		}, 2000);
+	
+		if (recipientUser && this.userEntityService.isLocalUser(user) && this.userEntityService.isRemoteUser(recipientUser)) {
+			const note = {
+				id: message.id,
+				createdAt: message.createdAt,
+				fileIds: message.fileId ? [message.fileId] : [],
+				text: message.text,
+				userId: message.userId,
+				visibility: 'specified',
+				mentions: [recipientUser].map(u => u.id),
+				mentionedRemoteUsers: JSON.stringify([recipientUser].map(u => ({
+					uri: u.uri,
+					username: u.username,
+					host: u.host,
+				}))),
+			} as Note;
+	
+			const activity = this.apRendererService.renderActivity(this.apRendererService.renderCreate(await this.apRendererService.renderNote(note, false, true), note));
+	
+			this.queueService.deliver(user, activity, recipientUser.inbox);
+		}
+		return messageObj;
+	}
+
+	public async deleteMessage(message: MessagingMessage) {
+		await this.messagingMessagesRepository.delete(message.id);
+		this.#postDeleteMessage(message);
+	}
+	
+	async #postDeleteMessage(message: MessagingMessage) {
+		if (message.recipientId) {
+			const user = await this.usersRepository.findOneByOrFail({ id: message.userId });
+			const recipient = await this.usersRepository.findOneByOrFail({ id: message.recipientId });
+	
+			if (this.userEntityService.isLocalUser(user)) this.globalEventService.publishMessagingStream(message.userId, message.recipientId, 'deleted', message.id);
+			if (this.userEntityService.isLocalUser(recipient)) this.globalEventService.publishMessagingStream(message.recipientId, message.userId, 'deleted', message.id);
+	
+			if (this.userEntityService.isLocalUser(user) && this.userEntityService.isRemoteUser(recipient)) {
+				const activity = this.apRendererService.renderActivity(this.apRendererService.renderDelete(this.apRendererService.renderTombstone(`${this.config.url}/notes/${message.id}`), user));
+				this.queueService.deliver(user, activity, recipient.inbox);
+			}
+		} else if (message.groupId) {
+			this.globalEventService.publishGroupMessagingStream(message.groupId, 'deleted', message.id);
+		}
+	}
+
+	/**
+	 * Mark messages as read
+	 */
+	public async readUserMessagingMessage(
+		userId: User['id'],
+		otherpartyId: User['id'],
+		messageIds: MessagingMessage['id'][],
+	) {
+		if (messageIds.length === 0) return;
+
+		const messages = await this.messagingMessagesRepository.findBy({
+			id: In(messageIds),
+		});
+
+		for (const message of messages) {
+			if (message.recipientId !== userId) {
+				throw new IdentifiableError('e140a4bf-49ce-4fb6-b67c-b78dadf6b52f', 'Access denied (user).');
+			}
+		}
+
+		// Update documents
+		await this.messagingMessagesRepository.update({
+			id: In(messageIds),
+			userId: otherpartyId,
+			recipientId: userId,
+			isRead: false,
+		}, {
+			isRead: true,
+		});
+
+		// Publish event
+		this.globalEventService.publishMessagingStream(otherpartyId, userId, 'read', messageIds);
+		this.globalEventService.publishMessagingIndexStream(userId, 'read', messageIds);
+
+		if (!await this.userEntityService.getHasUnreadMessagingMessage(userId)) {
+		// 全ての(いままで未読だった)自分宛てのメッセージを(これで)読みましたよというイベントを発行
+			this.globalEventService.publishMainStream(userId, 'readAllMessagingMessages');
+			this.pushNotificationService.pushNotification(userId, 'readAllMessagingMessages', undefined);
+		} else {
+		// そのユーザーとのメッセージで未読がなければイベント発行
+			const count = await this.messagingMessagesRepository.count({
+				where: {
+					userId: otherpartyId,
+					recipientId: userId,
+					isRead: false,
+				},
+				take: 1,
+			});
+
+			if (!count) {
+				this.pushNotificationService.pushNotification(userId, 'readAllMessagingMessagesOfARoom', { userId: otherpartyId });
+			}
+		}
+	}
+
+	/**
+	 * Mark messages as read
+	 */
+	public async readGroupMessagingMessage(
+		userId: User['id'],
+		groupId: UserGroup['id'],
+		messageIds: MessagingMessage['id'][],
+	) {
+		if (messageIds.length === 0) return;
+
+		// check joined
+		const joining = await this.userGroupJoiningsRepository.findOneBy({
+			userId: userId,
+			userGroupId: groupId,
+		});
+
+		if (joining == null) {
+			throw new IdentifiableError('930a270c-714a-46b2-b776-ad27276dc569', 'Access denied (group).');
+		}
+
+		const messages = await this.messagingMessagesRepository.findBy({
+			id: In(messageIds),
+		});
+
+		const reads: MessagingMessage['id'][] = [];
+
+		for (const message of messages) {
+			if (message.userId === userId) continue;
+			if (message.reads.includes(userId)) continue;
+
+			// Update document
+			await this.messagingMessagesRepository.createQueryBuilder().update()
+				.set({
+					reads: (() => `array_append("reads", '${joining.userId}')`) as any,
+				})
+				.where('id = :id', { id: message.id })
+				.execute();
+
+			reads.push(message.id);
+		}
+
+		// Publish event
+		this.globalEventService.publishGroupMessagingStream(groupId, 'read', {
+			ids: reads,
+			userId: userId,
+		});
+		this.globalEventService.publishMessagingIndexStream(userId, 'read', reads);
+
+		if (!await this.userEntityService.getHasUnreadMessagingMessage(userId)) {
+		// 全ての(いままで未読だった)自分宛てのメッセージを(これで)読みましたよというイベントを発行
+			this.globalEventService.publishMainStream(userId, 'readAllMessagingMessages');
+			this.pushNotificationService.pushNotification(userId, 'readAllMessagingMessages', undefined);
+		} else {
+		// そのグループにおいて未読がなければイベント発行
+			const unreadExist = await this.messagingMessagesRepository.createQueryBuilder('message')
+				.where('message.groupId = :groupId', { groupId: groupId })
+				.andWhere('message.userId != :userId', { userId: userId })
+				.andWhere('NOT (:userId = ANY(message.reads))', { userId: userId })
+				.andWhere('message.createdAt > :joinedAt', { joinedAt: joining.createdAt }) // 自分が加入する前の会話については、未読扱いしない
+				.getOne().then(x => x != null);
+
+			if (!unreadExist) {
+				this.pushNotificationService.pushNotification(userId, 'readAllMessagingMessagesOfARoom', { groupId });
+			}
+		}
+	}
+
+	public async deliverReadActivity(user: { id: User['id']; host: null; }, recipient: IRemoteUser, messages: MessagingMessage | MessagingMessage[]) {
+		messages = toArray(messages).filter(x => x.uri);
+		const contents = messages.map(x => this.apRendererService.renderRead(user, x));
+
+		if (contents.length > 1) {
+			const collection = this.apRendererService.renderOrderedCollection(null, contents.length, undefined, undefined, contents);
+			this.queueService.deliver(user, this.apRendererService.renderActivity(collection), recipient.inbox);
+		} else {
+			for (const content of contents) {
+				this.queueService.deliver(user, this.apRendererService.renderActivity(content), recipient.inbox);
+			}
+		}
+	}
+}
diff --git a/packages/backend/src/core/MetaService.ts b/packages/backend/src/core/MetaService.ts
new file mode 100644
index 0000000000..b5bd423765
--- /dev/null
+++ b/packages/backend/src/core/MetaService.ts
@@ -0,0 +1,63 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import type { UsersRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
+import { Meta } from '@/models/entities/Meta.js';
+import type { OnApplicationShutdown } from '@nestjs/common';
+
+@Injectable()
+export class MetaService implements OnApplicationShutdown {
+	#cache: Meta | undefined;
+	#intervalId: NodeJS.Timer;
+
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+	) {
+		if (process.env.NODE_ENV !== 'test') {
+			this.#intervalId = setInterval(() => {
+				this.fetch(true).then(meta => {
+					this.#cache = meta;
+				});
+			}, 1000 * 10);
+		}
+	}
+
+	async fetch(noCache = false): Promise<Meta> {
+		if (!noCache && this.#cache) return this.#cache;
+	
+		return await this.db.transaction(async transactionalEntityManager => {
+			// 過去のバグでレコードが複数出来てしまっている可能性があるので新しいIDを優先する
+			const metas = await transactionalEntityManager.find(Meta, {
+				order: {
+					id: 'DESC',
+				},
+			});
+	
+			const meta = metas[0];
+	
+			if (meta) {
+				this.#cache = meta;
+				return meta;
+			} else {
+				// metaが空のときfetchMetaが同時に呼ばれるとここが同時に呼ばれてしまうことがあるのでフェイルセーフなupsertを使う
+				const saved = await transactionalEntityManager
+					.upsert(
+						Meta,
+						{
+							id: 'x',
+						},
+						['id'],
+					)
+					.then((x) => transactionalEntityManager.findOneByOrFail(Meta, x.identifiers[0]));
+	
+				this.#cache = saved;
+				return saved;
+			}
+		});
+	}
+	
+	public onApplicationShutdown(signal?: string | undefined) {
+		clearInterval(this.#intervalId);
+	}
+}
diff --git a/packages/backend/src/core/MfmService.ts b/packages/backend/src/core/MfmService.ts
new file mode 100644
index 0000000000..236be4bbf8
--- /dev/null
+++ b/packages/backend/src/core/MfmService.ts
@@ -0,0 +1,384 @@
+import { URL } from 'node:url';
+import { Inject, Injectable } from '@nestjs/common';
+import * as parse5 from 'parse5';
+import { JSDOM } from 'jsdom';
+import { DI } from '@/di-symbols.js';
+import type { UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import { intersperse } from '@/misc/prelude/array.js';
+import type { IMentionedRemoteUsers } from '@/models/entities/Note.js';
+import * as TreeAdapter from '../../node_modules/parse5/dist/tree-adapters/default.js';
+import type * as mfm from 'mfm-js';
+
+const treeAdapter = TreeAdapter.defaultTreeAdapter;
+
+const urlRegex = /^https?:\/\/[\w\/:%#@$&?!()\[\]~.,=+\-]+/;
+const urlRegexFull = /^https?:\/\/[\w\/:%#@$&?!()\[\]~.,=+\-]+$/;
+
+@Injectable()
+export class MfmService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+	) {
+	}
+
+	public fromHtml(html: string, hashtagNames?: string[]): string {
+		// some AP servers like Pixelfed use br tags as well as newlines
+		html = html.replace(/<br\s?\/?>\r?\n/gi, '\n');
+	
+		const dom = parse5.parseFragment(html);
+	
+		let text = '';
+	
+		for (const n of dom.childNodes) {
+			analyze(n);
+		}
+	
+		return text.trim();
+	
+		function getText(node: TreeAdapter.Node): string {
+			if (treeAdapter.isTextNode(node)) return node.value;
+			if (!treeAdapter.isElementNode(node)) return '';
+			if (node.nodeName === 'br') return '\n';
+	
+			if (node.childNodes) {
+				return node.childNodes.map(n => getText(n)).join('');
+			}
+	
+			return '';
+		}
+	
+		function appendChildren(childNodes: TreeAdapter.ChildNode[]): void {
+			if (childNodes) {
+				for (const n of childNodes) {
+					analyze(n);
+				}
+			}
+		}
+	
+		function analyze(node: TreeAdapter.Node) {
+			if (treeAdapter.isTextNode(node)) {
+				text += node.value;
+				return;
+			}
+	
+			// Skip comment or document type node
+			if (!treeAdapter.isElementNode(node)) return;
+	
+			switch (node.nodeName) {
+				case 'br': {
+					text += '\n';
+					break;
+				}
+	
+				case 'a':
+				{
+					const txt = getText(node);
+					const rel = node.attrs.find(x => x.name === 'rel');
+					const href = node.attrs.find(x => x.name === 'href');
+	
+					// ハッシュタグ
+					if (hashtagNames && href && hashtagNames.map(x => x.toLowerCase()).includes(txt.toLowerCase())) {
+						text += txt;
+					// メンション
+					} else if (txt.startsWith('@') && !(rel && rel.value.match(/^me /))) {
+						const part = txt.split('@');
+	
+						if (part.length === 2 && href) {
+							//#region ホスト名部分が省略されているので復元する
+							const acct = `${txt}@${(new URL(href.value)).hostname}`;
+							text += acct;
+							//#endregion
+						} else if (part.length === 3) {
+							text += txt;
+						}
+					// その他
+					} else {
+						const generateLink = () => {
+							if (!href && !txt) {
+								return '';
+							}
+							if (!href) {
+								return txt;
+							}
+							if (!txt || txt === href.value) {	// #6383: Missing text node
+								if (href.value.match(urlRegexFull)) {
+									return href.value;
+								} else {
+									return `<${href.value}>`;
+								}
+							}
+							if (href.value.match(urlRegex) && !href.value.match(urlRegexFull)) {
+								return `[${txt}](<${href.value}>)`;	// #6846
+							} else {
+								return `[${txt}](${href.value})`;
+							}
+						};
+	
+						text += generateLink();
+					}
+					break;
+				}
+	
+				case 'h1':
+				{
+					text += '【';
+					appendChildren(node.childNodes);
+					text += '】\n';
+					break;
+				}
+	
+				case 'b':
+				case 'strong':
+				{
+					text += '**';
+					appendChildren(node.childNodes);
+					text += '**';
+					break;
+				}
+	
+				case 'small':
+				{
+					text += '<small>';
+					appendChildren(node.childNodes);
+					text += '</small>';
+					break;
+				}
+	
+				case 's':
+				case 'del':
+				{
+					text += '~~';
+					appendChildren(node.childNodes);
+					text += '~~';
+					break;
+				}
+	
+				case 'i':
+				case 'em':
+				{
+					text += '<i>';
+					appendChildren(node.childNodes);
+					text += '</i>';
+					break;
+				}
+	
+				// block code (<pre><code>)
+				case 'pre': {
+					if (node.childNodes.length === 1 && node.childNodes[0].nodeName === 'code') {
+						text += '\n```\n';
+						text += getText(node.childNodes[0]);
+						text += '\n```\n';
+					} else {
+						appendChildren(node.childNodes);
+					}
+					break;
+				}
+	
+				// inline code (<code>)
+				case 'code': {
+					text += '`';
+					appendChildren(node.childNodes);
+					text += '`';
+					break;
+				}
+	
+				case 'blockquote': {
+					const t = getText(node);
+					if (t) {
+						text += '\n> ';
+						text += t.split('\n').join('\n> ');
+					}
+					break;
+				}
+	
+				case 'p':
+				case 'h2':
+				case 'h3':
+				case 'h4':
+				case 'h5':
+				case 'h6':
+				{
+					text += '\n\n';
+					appendChildren(node.childNodes);
+					break;
+				}
+	
+				// other block elements
+				case 'div':
+				case 'header':
+				case 'footer':
+				case 'article':
+				case 'li':
+				case 'dt':
+				case 'dd':
+				{
+					text += '\n';
+					appendChildren(node.childNodes);
+					break;
+				}
+	
+				default:	// includes inline elements
+				{
+					appendChildren(node.childNodes);
+					break;
+				}
+			}
+		}
+	}
+
+	public toHtml(nodes: mfm.MfmNode[] | null, mentionedRemoteUsers: IMentionedRemoteUsers = []) {
+		if (nodes == null) {
+			return null;
+		}
+	
+		const { window } = new JSDOM('');
+	
+		const doc = window.document;
+	
+		function appendChildren(children: mfm.MfmNode[], targetElement: any): void {
+			if (children) {
+				for (const child of children.map(x => (handlers as any)[x.type](x))) targetElement.appendChild(child);
+			}
+		}
+	
+		const handlers: { [K in mfm.MfmNode['type']]: (node: mfm.NodeType<K>) => any } = {
+			bold: (node) => {
+				const el = doc.createElement('b');
+				appendChildren(node.children, el);
+				return el;
+			},
+	
+			small: (node) => {
+				const el = doc.createElement('small');
+				appendChildren(node.children, el);
+				return el;
+			},
+	
+			strike: (node) => {
+				const el = doc.createElement('del');
+				appendChildren(node.children, el);
+				return el;
+			},
+	
+			italic: (node) => {
+				const el = doc.createElement('i');
+				appendChildren(node.children, el);
+				return el;
+			},
+	
+			fn: (node) => {
+				const el = doc.createElement('i');
+				appendChildren(node.children, el);
+				return el;
+			},
+	
+			blockCode: (node) => {
+				const pre = doc.createElement('pre');
+				const inner = doc.createElement('code');
+				inner.textContent = node.props.code;
+				pre.appendChild(inner);
+				return pre;
+			},
+	
+			center: (node) => {
+				const el = doc.createElement('div');
+				appendChildren(node.children, el);
+				return el;
+			},
+	
+			emojiCode: (node) => {
+				return doc.createTextNode(`\u200B:${node.props.name}:\u200B`);
+			},
+	
+			unicodeEmoji: (node) => {
+				return doc.createTextNode(node.props.emoji);
+			},
+	
+			hashtag: (node) => {
+				const a = doc.createElement('a');
+				a.href = `${this.config.url}/tags/${node.props.hashtag}`;
+				a.textContent = `#${node.props.hashtag}`;
+				a.setAttribute('rel', 'tag');
+				return a;
+			},
+	
+			inlineCode: (node) => {
+				const el = doc.createElement('code');
+				el.textContent = node.props.code;
+				return el;
+			},
+	
+			mathInline: (node) => {
+				const el = doc.createElement('code');
+				el.textContent = node.props.formula;
+				return el;
+			},
+	
+			mathBlock: (node) => {
+				const el = doc.createElement('code');
+				el.textContent = node.props.formula;
+				return el;
+			},
+	
+			link: (node) => {
+				const a = doc.createElement('a');
+				a.href = node.props.url;
+				appendChildren(node.children, a);
+				return a;
+			},
+	
+			mention: (node) => {
+				const a = doc.createElement('a');
+				const { username, host, acct } = node.props;
+				const remoteUserInfo = mentionedRemoteUsers.find(remoteUser => remoteUser.username === username && remoteUser.host === host);
+				a.href = remoteUserInfo ? (remoteUserInfo.url ? remoteUserInfo.url : remoteUserInfo.uri) : `${this.config.url}/${acct}`;
+				a.className = 'u-url mention';
+				a.textContent = acct;
+				return a;
+			},
+	
+			quote: (node) => {
+				const el = doc.createElement('blockquote');
+				appendChildren(node.children, el);
+				return el;
+			},
+	
+			text: (node) => {
+				const el = doc.createElement('span');
+				const nodes = node.props.text.split(/\r\n|\r|\n/).map(x => doc.createTextNode(x));
+	
+				for (const x of intersperse<FIXME | 'br'>('br', nodes)) {
+					el.appendChild(x === 'br' ? doc.createElement('br') : x);
+				}
+	
+				return el;
+			},
+	
+			url: (node) => {
+				const a = doc.createElement('a');
+				a.href = node.props.url;
+				a.textContent = node.props.url;
+				return a;
+			},
+	
+			search: (node) => {
+				const a = doc.createElement('a');
+				a.href = `https://www.google.com/search?q=${node.props.query}`;
+				a.textContent = node.props.content;
+				return a;
+			},
+	
+			plain: (node) => {
+				const el = doc.createElement('span');
+				appendChildren(node.children, el);
+				return el;
+			},
+		};
+	
+		appendChildren(nodes, doc.body);
+	
+		return `<p>${doc.body.innerHTML}</p>`;
+	}	
+}
diff --git a/packages/backend/src/core/ModerationLogService.ts b/packages/backend/src/core/ModerationLogService.ts
new file mode 100644
index 0000000000..191148ac25
--- /dev/null
+++ b/packages/backend/src/core/ModerationLogService.ts
@@ -0,0 +1,26 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { ModerationLogsRepository } from '@/models/index.js';
+import type { User } from '@/models/entities/User.js';
+import { IdService } from '@/core/IdService.js';
+
+@Injectable()
+export class ModerationLogService {
+	constructor(
+		@Inject(DI.moderationLogsRepository)
+		private moderationLogsRepository: ModerationLogsRepository,
+
+		private idService: IdService,
+	) {
+	}
+
+	public async insertModerationLog(moderator: { id: User['id'] }, type: string, info?: Record<string, any>) {
+		await this.moderationLogsRepository.insert({
+			id: this.idService.genId(),
+			createdAt: new Date(),
+			userId: moderator.id,
+			type: type,
+			info: info ?? {},
+		});
+	}
+}
diff --git a/packages/backend/src/core/NoteCreateService.ts b/packages/backend/src/core/NoteCreateService.ts
new file mode 100644
index 0000000000..83c080893d
--- /dev/null
+++ b/packages/backend/src/core/NoteCreateService.ts
@@ -0,0 +1,742 @@
+import * as mfm from 'mfm-js';
+import { Not, In, DataSource } from 'typeorm';
+import { Inject, Injectable } from '@nestjs/common';
+import { extractMentions } from '@/misc/extract-mentions.js';
+import { extractCustomEmojisFromMfm } from '@/misc/extract-custom-emojis-from-mfm.js';
+import { extractHashtags } from '@/misc/extract-hashtags.js';
+import type { IMentionedRemoteUsers } from '@/models/entities/Note.js';
+import { Note } from '@/models/entities/Note.js';
+import { ChannelFollowingsRepository, ChannelsRepository, InstancesRepository, MutedNotesRepository, MutingsRepository, NotesRepository, NoteThreadMutingsRepository, UserProfilesRepository, UsersRepository } from '@/models/index.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import type { App } from '@/models/entities/App.js';
+import { concat } from '@/misc/prelude/array.js';
+import { IdService } from '@/core/IdService.js';
+import type { User, ILocalUser, IRemoteUser } from '@/models/entities/User.js';
+import type { IPoll } from '@/models/entities/Poll.js';
+import { Poll } from '@/models/entities/Poll.js';
+import { isDuplicateKeyValueError } from '@/misc/is-duplicate-key-value-error.js';
+import { checkWordMute } from '@/misc/check-word-mute.js';
+import type { Channel } from '@/models/entities/Channel.js';
+import { normalizeForSearch } from '@/misc/normalize-for-search.js';
+import { Cache } from '@/misc/cache.js';
+import type { UserProfile } from '@/models/entities/UserProfile.js';
+import { RelayService } from '@/core/RelayService.js';
+import { FederatedInstanceService } from '@/core/FederatedInstanceService.js';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import NotesChart from '@/core/chart/charts/notes.js';
+import PerUserNotesChart from '@/core/chart/charts/per-user-notes.js';
+import InstanceChart from '@/core/chart/charts/instance.js';
+import ActiveUsersChart from '@/core/chart/charts/active-users.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { CreateNotificationService } from '@/core/CreateNotificationService.js';
+import { WebhookService } from '@/core/WebhookService.js';
+import { HashtagService } from '@/core/HashtagService.js';
+import { AntennaService } from '@/core/AntennaService.js';
+import { QueueService } from '@/core/QueueService.js';
+import { NoteEntityService } from './entities/NoteEntityService.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+import { NoteReadService } from './NoteReadService.js';
+import { ApRendererService } from './remote/activitypub/ApRendererService.js';
+import { ResolveUserService } from './remote/ResolveUserService.js';
+import { ApDeliverManagerService } from './remote/activitypub/ApDeliverManagerService.js';
+
+const mutedWordsCache = new Cache<{ userId: UserProfile['userId']; mutedWords: UserProfile['mutedWords']; }[]>(1000 * 60 * 5);
+
+type NotificationType = 'reply' | 'renote' | 'quote' | 'mention';
+
+class NotificationManager {
+	private notifier: { id: User['id']; };
+	private note: Note;
+	private queue: {
+		target: ILocalUser['id'];
+		reason: NotificationType;
+	}[];
+
+	constructor(
+		private mutingsRepository: MutingsRepository,
+		private createNotificationService: CreateNotificationService,
+		notifier: { id: User['id']; },
+		note: Note,
+	) {
+		this.notifier = notifier;
+		this.note = note;
+		this.queue = [];
+	}
+
+	public push(notifiee: ILocalUser['id'], reason: NotificationType) {
+		// 自分自身へは通知しない
+		if (this.notifier.id === notifiee) return;
+
+		const exist = this.queue.find(x => x.target === notifiee);
+
+		if (exist) {
+			// 「メンションされているかつ返信されている」場合は、メンションとしての通知ではなく返信としての通知にする
+			if (reason !== 'mention') {
+				exist.reason = reason;
+			}
+		} else {
+			this.queue.push({
+				reason: reason,
+				target: notifiee,
+			});
+		}
+	}
+
+	public async deliver() {
+		for (const x of this.queue) {
+			// ミュート情報を取得
+			const mentioneeMutes = await this.mutingsRepository.findBy({
+				muterId: x.target,
+			});
+
+			const mentioneesMutedUserIds = mentioneeMutes.map(m => m.muteeId);
+
+			// 通知される側のユーザーが通知する側のユーザーをミュートしていない限りは通知する
+			if (!mentioneesMutedUserIds.includes(this.notifier.id)) {
+				this.createNotificationService.createNotification(x.target, x.reason, {
+					notifierId: this.notifier.id,
+					noteId: this.note.id,
+				});
+			}
+		}
+	}
+}
+
+type MinimumUser = {
+	id: User['id'];
+	host: User['host'];
+	username: User['username'];
+	uri: User['uri'];
+};
+
+type Option = {
+	createdAt?: Date | null;
+	name?: string | null;
+	text?: string | null;
+	reply?: Note | null;
+	renote?: Note | null;
+	files?: DriveFile[] | null;
+	poll?: IPoll | null;
+	localOnly?: boolean | null;
+	cw?: string | null;
+	visibility?: string;
+	visibleUsers?: MinimumUser[] | null;
+	channel?: Channel | null;
+	apMentions?: MinimumUser[] | null;
+	apHashtags?: string[] | null;
+	apEmojis?: string[] | null;
+	uri?: string | null;
+	url?: string | null;
+	app?: App | null;
+};
+
+@Injectable()
+export class NoteCreateService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.mutedNotesRepository)
+		private mutedNotesRepository: MutedNotesRepository,
+
+		@Inject(DI.channelsRepository)
+		private channelsRepository: ChannelsRepository,
+
+		@Inject(DI.channelFollowingsRepository)
+		private channelFollowingsRepository: ChannelFollowingsRepository,
+
+		@Inject(DI.noteThreadMutingsRepository)
+		private noteThreadMutingsRepository: NoteThreadMutingsRepository,
+
+		private userEntityService: UserEntityService,
+		private noteEntityService: NoteEntityService,
+		private idService: IdService,
+		private globalEventServie: GlobalEventService,
+		private queueService: QueueService,
+		private noteReadService: NoteReadService,
+		private createNotificationService: CreateNotificationService,
+		private relayService: RelayService,
+		private federatedInstanceService: FederatedInstanceService,
+		private hashtagService: HashtagService,
+		private antennaService: AntennaService,
+		private webhookService: WebhookService,
+		private resolveUserService: ResolveUserService,
+		private apDeliverManagerService: ApDeliverManagerService,
+		private apRendererService: ApRendererService,
+		private notesChart: NotesChart,
+		private perUserNotesChart: PerUserNotesChart,
+		private activeUsersChart: ActiveUsersChart,
+		private instanceChart: InstanceChart,
+	) {}
+
+	public async create(user: {
+		id: User['id'];
+		username: User['username'];
+		host: User['host'];
+		isSilenced: User['isSilenced'];
+		createdAt: User['createdAt'];
+	}, data: Option, silent = false): Promise<Note> {
+		// チャンネル外にリプライしたら対象のスコープに合わせる
+		// (クライアントサイドでやっても良い処理だと思うけどとりあえずサーバーサイドで)
+		if (data.reply && data.channel && data.reply.channelId !== data.channel.id) {
+			if (data.reply.channelId) {
+				data.channel = await this.channelsRepository.findOneBy({ id: data.reply.channelId });
+			} else {
+				data.channel = null;
+			}
+		}
+
+		// チャンネル内にリプライしたら対象のスコープに合わせる
+		// (クライアントサイドでやっても良い処理だと思うけどとりあえずサーバーサイドで)
+		if (data.reply && (data.channel == null) && data.reply.channelId) {
+			data.channel = await this.channelsRepository.findOneBy({ id: data.reply.channelId });
+		}
+
+		if (data.createdAt == null) data.createdAt = new Date();
+		if (data.visibility == null) data.visibility = 'public';
+		if (data.localOnly == null) data.localOnly = false;
+		if (data.channel != null) data.visibility = 'public';
+		if (data.channel != null) data.visibleUsers = [];
+		if (data.channel != null) data.localOnly = true;
+
+		// サイレンス
+		if (user.isSilenced && data.visibility === 'public' && data.channel == null) {
+			data.visibility = 'home';
+		}
+
+		// Renote対象が「ホームまたは全体」以外の公開範囲ならreject
+		if (data.renote && data.renote.visibility !== 'public' && data.renote.visibility !== 'home' && data.renote.userId !== user.id) {
+			throw new Error('Renote target is not public or home');
+		}
+
+		// Renote対象がpublicではないならhomeにする
+		if (data.renote && data.renote.visibility !== 'public' && data.visibility === 'public') {
+			data.visibility = 'home';
+		}
+
+		// Renote対象がfollowersならfollowersにする
+		if (data.renote && data.renote.visibility === 'followers') {
+			data.visibility = 'followers';
+		}
+
+		// 返信対象がpublicではないならhomeにする
+		if (data.reply && data.reply.visibility !== 'public' && data.visibility === 'public') {
+			data.visibility = 'home';
+		}
+
+		// ローカルのみをRenoteしたらローカルのみにする
+		if (data.renote && data.renote.localOnly && data.channel == null) {
+			data.localOnly = true;
+		}
+
+		// ローカルのみにリプライしたらローカルのみにする
+		if (data.reply && data.reply.localOnly && data.channel == null) {
+			data.localOnly = true;
+		}
+
+		if (data.text) {
+			data.text = data.text.trim();
+		} else {
+			data.text = null;
+		}
+
+		let tags = data.apHashtags;
+		let emojis = data.apEmojis;
+		let mentionedUsers = data.apMentions;
+
+		// Parse MFM if needed
+		if (!tags || !emojis || !mentionedUsers) {
+			const tokens = data.text ? mfm.parse(data.text)! : [];
+			const cwTokens = data.cw ? mfm.parse(data.cw)! : [];
+			const choiceTokens = data.poll && data.poll.choices
+				? concat(data.poll.choices.map(choice => mfm.parse(choice)!))
+				: [];
+
+			const combinedTokens = tokens.concat(cwTokens).concat(choiceTokens);
+
+			tags = data.apHashtags ?? extractHashtags(combinedTokens);
+
+			emojis = data.apEmojis ?? extractCustomEmojisFromMfm(combinedTokens);
+
+			mentionedUsers = data.apMentions ?? await this.#extractMentionedUsers(user, combinedTokens);
+		}
+
+		tags = tags.filter(tag => Array.from(tag ?? '').length <= 128).splice(0, 32);
+
+		if (data.reply && (user.id !== data.reply.userId) && !mentionedUsers.some(u => u.id === data.reply!.userId)) {
+			mentionedUsers.push(await this.usersRepository.findOneByOrFail({ id: data.reply!.userId }));
+		}
+
+		if (data.visibility === 'specified') {
+			if (data.visibleUsers == null) throw new Error('invalid param');
+
+			for (const u of data.visibleUsers) {
+				if (!mentionedUsers.some(x => x.id === u.id)) {
+					mentionedUsers.push(u);
+				}
+			}
+
+			if (data.reply && !data.visibleUsers.some(x => x.id === data.reply!.userId)) {
+				data.visibleUsers.push(await this.usersRepository.findOneByOrFail({ id: data.reply!.userId }));
+			}
+		}
+
+		const note = await this.#insertNote(user, data, tags, emojis, mentionedUsers);
+
+		setImmediate(() => this.#postNoteCreated(note, user, data, silent, tags!, mentionedUsers!));
+
+		return note;
+	}
+
+	async #insertNote(user: { id: User['id']; host: User['host']; }, data: Option, tags: string[], emojis: string[], mentionedUsers: MinimumUser[]) {
+		const insert = new Note({
+			id: this.idService.genId(data.createdAt!),
+			createdAt: data.createdAt!,
+			fileIds: data.files ? data.files.map(file => file.id) : [],
+			replyId: data.reply ? data.reply.id : null,
+			renoteId: data.renote ? data.renote.id : null,
+			channelId: data.channel ? data.channel.id : null,
+			threadId: data.reply
+				? data.reply.threadId
+					? data.reply.threadId
+					: data.reply.id
+				: null,
+			name: data.name,
+			text: data.text,
+			hasPoll: data.poll != null,
+			cw: data.cw == null ? null : data.cw,
+			tags: tags.map(tag => normalizeForSearch(tag)),
+			emojis,
+			userId: user.id,
+			localOnly: data.localOnly!,
+			visibility: data.visibility as any,
+			visibleUserIds: data.visibility === 'specified'
+				? data.visibleUsers
+					? data.visibleUsers.map(u => u.id)
+					: []
+				: [],
+
+			attachedFileTypes: data.files ? data.files.map(file => file.type) : [],
+
+			// 以下非正規化データ
+			replyUserId: data.reply ? data.reply.userId : null,
+			replyUserHost: data.reply ? data.reply.userHost : null,
+			renoteUserId: data.renote ? data.renote.userId : null,
+			renoteUserHost: data.renote ? data.renote.userHost : null,
+			userHost: user.host,
+		});
+
+		if (data.uri != null) insert.uri = data.uri;
+		if (data.url != null) insert.url = data.url;
+
+		// Append mentions data
+		if (mentionedUsers.length > 0) {
+			insert.mentions = mentionedUsers.map(u => u.id);
+			const profiles = await this.userProfilesRepository.findBy({ userId: In(insert.mentions) });
+			insert.mentionedRemoteUsers = JSON.stringify(mentionedUsers.filter(u => this.userEntityService.isRemoteUser(u)).map(u => {
+				const profile = profiles.find(p => p.userId === u.id);
+				const url = profile != null ? profile.url : null;
+				return {
+					uri: u.uri,
+					url: url == null ? undefined : url,
+					username: u.username,
+					host: u.host,
+				} as IMentionedRemoteUsers[0];
+			}));
+		}
+
+		// 投稿を作成
+		try {
+			if (insert.hasPoll) {
+			// Start transaction
+				await this.db.transaction(async transactionalEntityManager => {
+					await transactionalEntityManager.insert(Note, insert);
+
+					const poll = new Poll({
+						noteId: insert.id,
+						choices: data.poll!.choices,
+						expiresAt: data.poll!.expiresAt,
+						multiple: data.poll!.multiple,
+						votes: new Array(data.poll!.choices.length).fill(0),
+						noteVisibility: insert.visibility,
+						userId: user.id,
+						userHost: user.host,
+					});
+
+					await transactionalEntityManager.insert(Poll, poll);
+				});
+			} else {
+				await this.notesRepository.insert(insert);
+			}
+
+			return insert;
+		} catch (e) {
+		// duplicate key error
+			if (isDuplicateKeyValueError(e)) {
+				const err = new Error('Duplicated note');
+				err.name = 'duplicated';
+				throw err;
+			}
+
+			console.error(e);
+
+			throw e;
+		}
+	}
+
+	async #postNoteCreated(note: Note, user: {
+		id: User['id'];
+		username: User['username'];
+		host: User['host'];
+		isSilenced: User['isSilenced'];
+		createdAt: User['createdAt'];
+	}, data: Option, silent: boolean, tags: string[], mentionedUsers: MinimumUser[]) {
+		// 統計を更新
+		this.notesChart.update(note, true);
+		this.perUserNotesChart.update(user, note, true);
+
+		// Register host
+		if (this.userEntityService.isRemoteUser(user)) {
+			this.federatedInstanceService.registerOrFetchInstanceDoc(user.host).then(i => {
+				this.instancesRepository.increment({ id: i.id }, 'notesCount', 1);
+				this.instanceChart.updateNote(i.host, note, true);
+			});
+		}
+
+		// ハッシュタグ更新
+		if (data.visibility === 'public' || data.visibility === 'home') {
+			this.hashtagService.updateHashtags(user, tags);
+		}
+
+		// Increment notes count (user)
+		this.#incNotesCountOfUser(user);
+
+		// Word mute
+		mutedWordsCache.fetch(null, () => this.userProfilesRepository.find({
+			where: {
+				enableWordMute: true,
+			},
+			select: ['userId', 'mutedWords'],
+		})).then(us => {
+			for (const u of us) {
+				checkWordMute(note, { id: u.userId }, u.mutedWords).then(shouldMute => {
+					if (shouldMute) {
+						this.mutedNotesRepository.insert({
+							id: this.idService.genId(),
+							userId: u.userId,
+							noteId: note.id,
+							reason: 'word',
+						});
+					}
+				});
+			}
+		});
+
+		// Antenna
+		for (const antenna of (await this.antennaService.getAntennas())) {
+			this.antennaService.checkHitAntenna(antenna, note, user).then(hit => {
+				if (hit) {
+					this.antennaService.addNoteToAntenna(antenna, note, user);
+				}
+			});
+		}
+
+		// Channel
+		if (note.channelId) {
+			this.channelFollowingsRepository.findBy({ followeeId: note.channelId }).then(followings => {
+				for (const following of followings) {
+					this.noteReadService.insertNoteUnread(following.followerId, note, {
+						isSpecified: false,
+						isMentioned: false,
+					});
+				}
+			});
+		}
+
+		if (data.reply) {
+			this.#saveReply(data.reply, note);
+		}
+
+		// この投稿を除く指定したユーザーによる指定したノートのリノートが存在しないとき
+		if (data.renote && (await this.noteEntityService.countSameRenotes(user.id, data.renote.id, note.id) === 0)) {
+			this.#incRenoteCount(data.renote);
+		}
+
+		if (data.poll && data.poll.expiresAt) {
+			const delay = data.poll.expiresAt.getTime() - Date.now();
+			this.queueService.endedPollNotificationQueue.add({
+				noteId: note.id,
+			}, {
+				delay,
+				removeOnComplete: true,
+			});
+		}
+
+		if (!silent) {
+			if (this.userEntityService.isLocalUser(user)) this.activeUsersChart.write(user);
+
+			// 未読通知を作成
+			if (data.visibility === 'specified') {
+				if (data.visibleUsers == null) throw new Error('invalid param');
+
+				for (const u of data.visibleUsers) {
+					// ローカルユーザーのみ
+					if (!this.userEntityService.isLocalUser(u)) continue;
+
+					this.noteReadService.insertNoteUnread(u.id, note, {
+						isSpecified: true,
+						isMentioned: false,
+					});
+				}
+			} else {
+				for (const u of mentionedUsers) {
+					// ローカルユーザーのみ
+					if (!this.userEntityService.isLocalUser(u)) continue;
+
+					this.noteReadService.insertNoteUnread(u.id, note, {
+						isSpecified: false,
+						isMentioned: true,
+					});
+				}
+			}
+
+			// Pack the note
+			const noteObj = await this.noteEntityService.pack(note);
+
+			this.globalEventServie.publishNotesStream(noteObj);
+
+			this.webhookService.getActiveWebhooks().then(webhooks => {
+				webhooks = webhooks.filter(x => x.userId === user.id && x.on.includes('note'));
+				for (const webhook of webhooks) {
+					this.queueService.webhookDeliver(webhook, 'note', {
+						note: noteObj,
+					});
+				}
+			});
+
+			const nm = new NotificationManager(this.mutingsRepository, this.createNotificationService, user, note);
+			const nmRelatedPromises = [];
+
+			await this.#createMentionedEvents(mentionedUsers, note, nm);
+
+			// If has in reply to note
+			if (data.reply) {
+				// 通知
+				if (data.reply.userHost === null) {
+					const threadMuted = await this.noteThreadMutingsRepository.findOneBy({
+						userId: data.reply.userId,
+						threadId: data.reply.threadId ?? data.reply.id,
+					});
+
+					if (!threadMuted) {
+						nm.push(data.reply.userId, 'reply');
+						this.globalEventServie.publishMainStream(data.reply.userId, 'reply', noteObj);
+
+						const webhooks = (await this.webhookService.getActiveWebhooks()).filter(x => x.userId === data.reply!.userId && x.on.includes('reply'));
+						for (const webhook of webhooks) {
+							this.queueService.webhookDeliver(webhook, 'reply', {
+								note: noteObj,
+							});
+						}
+					}
+				}
+			}
+
+			// If it is renote
+			if (data.renote) {
+				const type = data.text ? 'quote' : 'renote';
+
+				// Notify
+				if (data.renote.userHost === null) {
+					nm.push(data.renote.userId, type);
+				}
+
+				// Publish event
+				if ((user.id !== data.renote.userId) && data.renote.userHost === null) {
+					this.globalEventServie.publishMainStream(data.renote.userId, 'renote', noteObj);
+
+					const webhooks = (await this.webhookService.getActiveWebhooks()).filter(x => x.userId === data.renote!.userId && x.on.includes('renote'));
+					for (const webhook of webhooks) {
+						this.queueService.webhookDeliver(webhook, 'renote', {
+							note: noteObj,
+						});
+					}
+				}
+			}
+
+			Promise.all(nmRelatedPromises).then(() => {
+				nm.deliver();
+			});
+
+			//#region AP deliver
+			if (this.userEntityService.isLocalUser(user)) {
+				(async () => {
+					const noteActivity = await this.#renderNoteOrRenoteActivity(data, note);
+					const dm = this.apDeliverManagerService.createDeliverManager(user, noteActivity);
+
+					// メンションされたリモートユーザーに配送
+					for (const u of mentionedUsers.filter(u => this.userEntityService.isRemoteUser(u))) {
+						dm.addDirectRecipe(u as IRemoteUser);
+					}
+
+					// 投稿がリプライかつ投稿者がローカルユーザーかつリプライ先の投稿の投稿者がリモートユーザーなら配送
+					if (data.reply && data.reply.userHost !== null) {
+						const u = await this.usersRepository.findOneBy({ id: data.reply.userId });
+						if (u && this.userEntityService.isRemoteUser(u)) dm.addDirectRecipe(u);
+					}
+
+					// 投稿がRenoteかつ投稿者がローカルユーザーかつRenote元の投稿の投稿者がリモートユーザーなら配送
+					if (data.renote && data.renote.userHost !== null) {
+						const u = await this.usersRepository.findOneBy({ id: data.renote.userId });
+						if (u && this.userEntityService.isRemoteUser(u)) dm.addDirectRecipe(u);
+					}
+
+					// フォロワーに配送
+					if (['public', 'home', 'followers'].includes(note.visibility)) {
+						dm.addFollowersRecipe();
+					}
+
+					if (['public'].includes(note.visibility)) {
+						this.relayService.deliverToRelays(user, noteActivity);
+					}
+
+					dm.execute();
+				})();
+			}
+			//#endregion
+		}
+
+		if (data.channel) {
+			this.channelsRepository.increment({ id: data.channel.id }, 'notesCount', 1);
+			this.channelsRepository.update(data.channel.id, {
+				lastNotedAt: new Date(),
+			});
+
+			this.notesRepository.countBy({
+				userId: user.id,
+				channelId: data.channel.id,
+			}).then(count => {
+				// この処理が行われるのはノート作成後なので、ノートが一つしかなかったら最初の投稿だと判断できる
+				// TODO: とはいえノートを削除して何回も投稿すればその分だけインクリメントされる雑さもあるのでどうにかしたい
+				if (count === 1) {
+					this.channelsRepository.increment({ id: data.channel!.id }, 'usersCount', 1);
+				}
+			});
+		}
+
+		// Register to search database
+		this.#index(note);
+	}
+
+	#incRenoteCount(renote: Note) {
+		this.notesRepository.createQueryBuilder().update()
+			.set({
+				renoteCount: () => '"renoteCount" + 1',
+				score: () => '"score" + 1',
+			})
+			.where('id = :id', { id: renote.id })
+			.execute();
+	}
+
+	async #createMentionedEvents(mentionedUsers: MinimumUser[], note: Note, nm: NotificationManager) {
+		for (const u of mentionedUsers.filter(u => this.userEntityService.isLocalUser(u))) {
+			const threadMuted = await this.noteThreadMutingsRepository.findOneBy({
+				userId: u.id,
+				threadId: note.threadId ?? note.id,
+			});
+
+			if (threadMuted) {
+				continue;
+			}
+
+			const detailPackedNote = await this.noteEntityService.pack(note, u, {
+				detail: true,
+			});
+
+			this.globalEventServie.publishMainStream(u.id, 'mention', detailPackedNote);
+
+			const webhooks = (await this.webhookService.getActiveWebhooks()).filter(x => x.userId === u.id && x.on.includes('mention'));
+			for (const webhook of webhooks) {
+				this.queueService.webhookDeliver(webhook, 'mention', {
+					note: detailPackedNote,
+				});
+			}
+
+			// Create notification
+			nm.push(u.id, 'mention');
+		}
+	}
+
+	#saveReply(reply: Note, note: Note) {
+		this.notesRepository.increment({ id: reply.id }, 'repliesCount', 1);
+	}
+
+	async #renderNoteOrRenoteActivity(data: Option, note: Note) {
+		if (data.localOnly) return null;
+
+		const content = data.renote && data.text == null && data.poll == null && (data.files == null || data.files.length === 0)
+			? this.apRendererService.renderAnnounce(data.renote.uri ? data.renote.uri : `${this.config.url}/notes/${data.renote.id}`, note)
+			: this.apRendererService.renderCreate(await this.apRendererService.renderNote(note, false), note);
+
+		return this.apRendererService.renderActivity(content);
+	}
+
+	#index(note: Note) {
+		if (note.text == null || this.config.elasticsearch == null) return;
+		/*
+	es!.index({
+		index: this.config.elasticsearch.index ?? 'misskey_note',
+		id: note.id.toString(),
+		body: {
+			text: normalizeForSearch(note.text),
+			userId: note.userId,
+			userHost: note.userHost,
+		},
+	});*/
+	}
+
+	#incNotesCountOfUser(user: { id: User['id']; }) {
+		this.usersRepository.createQueryBuilder().update()
+			.set({
+				updatedAt: new Date(),
+				notesCount: () => '"notesCount" + 1',
+			})
+			.where('id = :id', { id: user.id })
+			.execute();
+	}
+
+	async #extractMentionedUsers(user: { host: User['host']; }, tokens: mfm.MfmNode[]): Promise<User[]> {
+		if (tokens == null) return [];
+
+		const mentions = extractMentions(tokens);
+		let mentionedUsers = (await Promise.all(mentions.map(m =>
+			this.resolveUserService.resolveUser(m.username, m.host ?? user.host).catch(() => null),
+		))).filter(x => x != null) as User[];
+
+		// Drop duplicate users
+		mentionedUsers = mentionedUsers.filter((u, i, self) =>
+			i === self.findIndex(u2 => u.id === u2.id),
+		);
+
+		return mentionedUsers;
+	}
+}
diff --git a/packages/backend/src/core/NoteDeleteService.ts b/packages/backend/src/core/NoteDeleteService.ts
new file mode 100644
index 0000000000..9153418beb
--- /dev/null
+++ b/packages/backend/src/core/NoteDeleteService.ts
@@ -0,0 +1,168 @@
+import { Brackets, In } from 'typeorm';
+import { Injectable, Inject } from '@nestjs/common';
+import type { User, ILocalUser, IRemoteUser } from '@/models/entities/User.js';
+import type { Note, IMentionedRemoteUsers } from '@/models/entities/Note.js';
+import { InstancesRepository, NotesRepository, UsersRepository } from '@/models/index.js';
+import { RelayService } from '@/core/RelayService.js';
+import { FederatedInstanceService } from '@/core/FederatedInstanceService.js';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import NotesChart from '@/core/chart/charts/notes.js';
+import PerUserNotesChart from '@/core/chart/charts/per-user-notes.js';
+import InstanceChart from '@/core/chart/charts/instance.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { ApRendererService } from './remote/activitypub/ApRendererService.js';
+import { ApDeliverManagerService } from './remote/activitypub/ApDeliverManagerService.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+
+@Injectable()
+export class NoteDeleteService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
+
+		private userEntityService: UserEntityService,
+		private globalEventServie: GlobalEventService,
+		private relayService: RelayService,
+		private federatedInstanceService: FederatedInstanceService,
+		private apRendererService: ApRendererService,
+		private apDeliverManagerService: ApDeliverManagerService,
+		private notesChart: NotesChart,
+		private perUserNotesChart: PerUserNotesChart,
+		private instanceChart: InstanceChart,
+	) {}
+	
+	/**
+ * 投稿を削除します。
+ * @param user 投稿者
+ * @param note 投稿
+ */
+	async delete(user: { id: User['id']; uri: User['uri']; host: User['host']; }, note: Note, quiet = false) {
+		const deletedAt = new Date();
+
+		// この投稿を除く指定したユーザーによる指定したノートのリノートが存在しないとき
+		if (note.renoteId && (await this.noteEntityService.countSameRenotes(user.id, note.renoteId, note.id)) === 0) {
+			this.notesRepository.decrement({ id: note.renoteId }, 'renoteCount', 1);
+			this.notesRepository.decrement({ id: note.renoteId }, 'score', 1);
+		}
+
+		if (note.replyId) {
+			await this.notesRepository.decrement({ id: note.replyId }, 'repliesCount', 1);
+		}
+
+		if (!quiet) {
+			this.globalEventServie.publishNoteStream(note.id, 'deleted', {
+				deletedAt: deletedAt,
+			});
+
+			//#region ローカルの投稿なら削除アクティビティを配送
+			if (this.userEntityService.isLocalUser(user) && !note.localOnly) {
+				let renote: Note | null = null;
+
+				// if deletd note is renote
+				if (note.renoteId && note.text == null && !note.hasPoll && (note.fileIds == null || note.fileIds.length === 0)) {
+					renote = await this.notesRepository.findOneBy({
+						id: note.renoteId,
+					});
+				}
+
+				const content = this.apRendererService.renderActivity(renote
+					? this.apRendererService.renderUndo(this.apRendererService.renderAnnounce(renote.uri ?? `${this.config.url}/notes/${renote.id}`, note), user)
+					: this.apRendererService.renderDelete(this.apRendererService.renderTombstone(`${this.config.url}/notes/${note.id}`), user));
+
+				this.#deliverToConcerned(user, note, content);
+			}
+
+			// also deliever delete activity to cascaded notes
+			const cascadingNotes = (await this.#findCascadingNotes(note)).filter(note => !note.localOnly); // filter out local-only notes
+			for (const cascadingNote of cascadingNotes) {
+				if (!cascadingNote.user) continue;
+				if (!this.userEntityService.isLocalUser(cascadingNote.user)) continue;
+				const content = this.apRendererService.renderActivity(this.apRendererService.renderDelete(this.apRendererService.renderTombstone(`${this.config.url}/notes/${cascadingNote.id}`), cascadingNote.user));
+				this.#deliverToConcerned(cascadingNote.user, cascadingNote, content);
+			}
+			//#endregion
+
+			// 統計を更新
+			this.notesChart.update(note, false);
+			this.perUserNotesChart.update(user, note, false);
+
+			if (this.userEntityService.isRemoteUser(user)) {
+				this.federatedInstanceService.registerOrFetchInstanceDoc(user.host).then(i => {
+					this.instancesRepository.decrement({ id: i.id }, 'notesCount', 1);
+					this.instanceChart.updateNote(i.host, note, false);
+				});
+			}
+		}
+
+		await this.notesRepository.delete({
+			id: note.id,
+			userId: user.id,
+		});
+	}
+
+	async #findCascadingNotes(note: Note) {
+		const cascadingNotes: Note[] = [];
+
+		const recursive = async (noteId: string) => {
+			const query = this.notesRepository.createQueryBuilder('note')
+				.where('note.replyId = :noteId', { noteId })
+				.orWhere(new Brackets(q => {
+					q.where('note.renoteId = :noteId', { noteId })
+						.andWhere('note.text IS NOT NULL');
+				}))
+				.leftJoinAndSelect('note.user', 'user');
+			const replies = await query.getMany();
+			for (const reply of replies) {
+				cascadingNotes.push(reply);
+				await recursive(reply.id);
+			}
+		};
+		await recursive(note.id);
+
+		return cascadingNotes.filter(note => note.userHost === null); // filter out non-local users
+	}
+
+	async #getMentionedRemoteUsers(note: Note) {
+		const where = [] as any[];
+
+		// mention / reply / dm
+		const uris = (JSON.parse(note.mentionedRemoteUsers) as IMentionedRemoteUsers).map(x => x.uri);
+		if (uris.length > 0) {
+			where.push(
+				{ uri: In(uris) },
+			);
+		}
+
+		// renote / quote
+		if (note.renoteUserId) {
+			where.push({
+				id: note.renoteUserId,
+			});
+		}
+
+		if (where.length === 0) return [];
+
+		return await this.usersRepository.find({
+			where,
+		}) as IRemoteUser[];
+	}
+
+	async #deliverToConcerned(user: { id: ILocalUser['id']; host: null; }, note: Note, content: any) {
+		this.apDeliverManagerService.deliverToFollowers(user, content);
+		this.relayService.deliverToRelays(user, content);
+		const remoteUsers = await this.#getMentionedRemoteUsers(note);
+		for (const remoteUser of remoteUsers) {
+			this.apDeliverManagerService.deliverToUser(user, content, remoteUser);
+		}
+	}
+}
diff --git a/packages/backend/src/core/NotePiningService.ts b/packages/backend/src/core/NotePiningService.ts
new file mode 100644
index 0000000000..576e90bd43
--- /dev/null
+++ b/packages/backend/src/core/NotePiningService.ts
@@ -0,0 +1,117 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { UsersRepository } from '@/models/index.js';
+import { IdentifiableError } from '@/misc/identifiable-error.js';
+import type { User } from '@/models/entities/User.js';
+import type { Note } from '@/models/entities/Note.js';
+import { IdService } from '@/core/IdService.js';
+import type { UserNotePining } from '@/models/entities/UserNotePining.js';
+import { RelayService } from '@/core/RelayService.js';
+import { Config } from '@/config.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+import { ApDeliverManagerService } from './remote/activitypub/ApDeliverManagerService.js';
+import { ApRendererService } from './remote/activitypub/ApRendererService.js';
+
+@Injectable()
+export class NotePiningService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.userNotePiningsRepository)
+		private userNotePiningsRepository: UserNotePiningsRepository,
+
+		private userEntityService: UserEntityService,
+		private idService: IdService,
+		private relayService: RelayService,
+		private apDeliverManagerService: ApDeliverManagerService,
+		private apRendererService: ApRendererService,
+	) {
+	}
+
+	/**
+	 * 指定した投稿をピン留めします
+	 * @param user
+	 * @param noteId
+	 */
+	public async addPinned(user: { id: User['id']; host: User['host']; }, noteId: Note['id']) {
+	// Fetch pinee
+		const note = await this.notesRepository.findOneBy({
+			id: noteId,
+			userId: user.id,
+		});
+
+		if (note == null) {
+			throw new IdentifiableError('70c4e51f-5bea-449c-a030-53bee3cce202', 'No such note.');
+		}
+
+		const pinings = await this.userNotePiningsRepository.findBy({ userId: user.id });
+
+		if (pinings.length >= 5) {
+			throw new IdentifiableError('15a018eb-58e5-4da1-93be-330fcc5e4e1a', 'You can not pin notes any more.');
+		}
+
+		if (pinings.some(pining => pining.noteId === note.id)) {
+			throw new IdentifiableError('23f0cf4e-59a3-4276-a91d-61a5891c1514', 'That note has already been pinned.');
+		}
+
+		await this.userNotePiningsRepository.insert({
+			id: this.idService.genId(),
+			createdAt: new Date(),
+			userId: user.id,
+			noteId: note.id,
+		} as UserNotePining);
+
+		// Deliver to remote followers
+		if (this.userEntityService.isLocalUser(user)) {
+			this.deliverPinnedChange(user.id, note.id, true);
+		}
+	}
+
+	/**
+	 * 指定した投稿のピン留めを解除します
+	 * @param user
+	 * @param noteId
+	 */
+	public async removePinned(user: { id: User['id']; host: User['host']; }, noteId: Note['id']) {
+	// Fetch unpinee
+		const note = await this.notesRepository.findOneBy({
+			id: noteId,
+			userId: user.id,
+		});
+
+		if (note == null) {
+			throw new IdentifiableError('b302d4cf-c050-400a-bbb3-be208681f40c', 'No such note.');
+		}
+
+		this.userNotePiningsRepository.delete({
+			userId: user.id,
+			noteId: note.id,
+		});
+
+		// Deliver to remote followers
+		if (this.userEntityService.isLocalUser(user)) {
+			this.deliverPinnedChange(user.id, noteId, false);
+		}
+	}
+
+	public async deliverPinnedChange(userId: User['id'], noteId: Note['id'], isAddition: boolean) {
+		const user = await this.usersRepository.findOneBy({ id: userId });
+		if (user == null) throw new Error('user not found');
+
+		if (!this.userEntityService.isLocalUser(user)) return;
+
+		const target = `${this.config.url}/users/${user.id}/collections/featured`;
+		const item = `${this.config.url}/notes/${noteId}`;
+		const content = this.apRendererService.renderActivity(isAddition ? this.apRendererService.renderAdd(user, target, item) : this.apRendererService.renderRemove(user, target, item));
+
+		this.apDeliverManagerService.deliverToFollowers(user, content);
+		this.relayService.deliverToRelays(user, content);
+	}
+}
diff --git a/packages/backend/src/core/NoteReadService.ts b/packages/backend/src/core/NoteReadService.ts
new file mode 100644
index 0000000000..b1572c631a
--- /dev/null
+++ b/packages/backend/src/core/NoteReadService.ts
@@ -0,0 +1,214 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { In, IsNull, Not } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import type { User } from '@/models/entities/User.js';
+import type { Channel } from '@/models/entities/Channel.js';
+import type { Packed } from '@/misc/schema.js';
+import type { Note } from '@/models/entities/Note.js';
+import { IdService } from '@/core/IdService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+import { NotificationService } from './NotificationService.js';
+import { AntennaService } from './AntennaService.js';
+
+@Injectable()
+export class NoteReadService {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.noteUnreadsRepository)
+		private noteUnreadsRepository: NoteUnreadsRepository,
+
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		@Inject(DI.noteThreadMutingsRepository)
+		private noteThreadMutingsRepository: NoteThreadMutingsRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		@Inject(DI.channelFollowingsRepository)
+		private channelFollowingsRepository: ChannelFollowingsRepository,
+
+		@Inject(DI.antennaNotesRepository)
+		private antennaNotesRepository: AntennaNotesRepository,
+
+		private userEntityService: UserEntityService,
+		private idService: IdService,
+		private globalEventServie: GlobalEventService,
+		private notificationService: NotificationService,
+		private antennaService: AntennaService,
+	) {
+	}
+
+	public async insertNoteUnread(userId: User['id'], note: Note, params: {
+		// NOTE: isSpecifiedがtrueならisMentionedは必ずfalse
+		isSpecified: boolean;
+		isMentioned: boolean;
+	}): Promise<void> {
+		//#region ミュートしているなら無視
+		// TODO: 現在の仕様ではChannelにミュートは適用されないのでよしなにケアする
+		const mute = await this.mutingsRepository.findBy({
+			muterId: userId,
+		});
+		if (mute.map(m => m.muteeId).includes(note.userId)) return;
+		//#endregion
+	
+		// スレッドミュート
+		const threadMute = await this.noteThreadMutingsRepository.findOneBy({
+			userId: userId,
+			threadId: note.threadId ?? note.id,
+		});
+		if (threadMute) return;
+	
+		const unread = {
+			id: this.idService.genId(),
+			noteId: note.id,
+			userId: userId,
+			isSpecified: params.isSpecified,
+			isMentioned: params.isMentioned,
+			noteChannelId: note.channelId,
+			noteUserId: note.userId,
+		};
+	
+		await this.noteUnreadsRepository.insert(unread);
+	
+		// 2秒経っても既読にならなかったら「未読の投稿がありますよ」イベントを発行する
+		setTimeout(async () => {
+			const exist = await this.noteUnreadsRepository.findOneBy({ id: unread.id });
+	
+			if (exist == null) return;
+	
+			if (params.isMentioned) {
+				this.globalEventServie.publishMainStream(userId, 'unreadMention', note.id);
+			}
+			if (params.isSpecified) {
+				this.globalEventServie.publishMainStream(userId, 'unreadSpecifiedNote', note.id);
+			}
+			if (note.channelId) {
+				this.globalEventServie.publishMainStream(userId, 'unreadChannel', note.id);
+			}
+		}, 2000);
+	}	
+
+	public async read(
+		userId: User['id'],
+		notes: (Note | Packed<'Note'>)[],
+		info?: {
+			following: Set<User['id']>;
+			followingChannels: Set<Channel['id']>;
+		},
+	): Promise<void> {
+		const following = info?.following ? info.following : new Set<string>((await this.followingsRepository.find({
+			where: {
+				followerId: userId,
+			},
+			select: ['followeeId'],
+		})).map(x => x.followeeId));
+		const followingChannels = info?.followingChannels ? info.followingChannels : new Set<string>((await this.channelFollowingsRepository.find({
+			where: {
+				followerId: userId,
+			},
+			select: ['followeeId'],
+		})).map(x => x.followeeId));
+	
+		const myAntennas = (await this.antennaService.getAntennas()).filter(a => a.userId === userId);
+		const readMentions: (Note | Packed<'Note'>)[] = [];
+		const readSpecifiedNotes: (Note | Packed<'Note'>)[] = [];
+		const readChannelNotes: (Note | Packed<'Note'>)[] = [];
+		const readAntennaNotes: (Note | Packed<'Note'>)[] = [];
+	
+		for (const note of notes) {
+			if (note.mentions && note.mentions.includes(userId)) {
+				readMentions.push(note);
+			} else if (note.visibleUserIds && note.visibleUserIds.includes(userId)) {
+				readSpecifiedNotes.push(note);
+			}
+	
+			if (note.channelId && followingChannels.has(note.channelId)) {
+				readChannelNotes.push(note);
+			}
+	
+			if (note.user != null) { // たぶんnullになることは無いはずだけど一応
+				for (const antenna of myAntennas) {
+					if (await this.antennaService.checkHitAntenna(antenna, note, note.user, undefined, Array.from(following))) {
+						readAntennaNotes.push(note);
+					}
+				}
+			}
+		}
+	
+		if ((readMentions.length > 0) || (readSpecifiedNotes.length > 0) || (readChannelNotes.length > 0)) {
+			// Remove the record
+			await this.noteUnreadsRepository.delete({
+				userId: userId,
+				noteId: In([...readMentions.map(n => n.id), ...readSpecifiedNotes.map(n => n.id), ...readChannelNotes.map(n => n.id)]),
+			});
+	
+			// TODO: ↓まとめてクエリしたい
+	
+			this.noteUnreadsRepository.countBy({
+				userId: userId,
+				isMentioned: true,
+			}).then(mentionsCount => {
+				if (mentionsCount === 0) {
+					// 全て既読になったイベントを発行
+					this.globalEventServie.publishMainStream(userId, 'readAllUnreadMentions');
+				}
+			});
+	
+			this.noteUnreadsRepository.countBy({
+				userId: userId,
+				isSpecified: true,
+			}).then(specifiedCount => {
+				if (specifiedCount === 0) {
+					// 全て既読になったイベントを発行
+					this.globalEventServie.publishMainStream(userId, 'readAllUnreadSpecifiedNotes');
+				}
+			});
+	
+			this.noteUnreadsRepository.countBy({
+				userId: userId,
+				noteChannelId: Not(IsNull()),
+			}).then(channelNoteCount => {
+				if (channelNoteCount === 0) {
+					// 全て既読になったイベントを発行
+					this.globalEventServie.publishMainStream(userId, 'readAllChannels');
+				}
+			});
+	
+			this.notificationService.readNotificationByQuery(userId, {
+				noteId: In([...readMentions.map(n => n.id), ...readSpecifiedNotes.map(n => n.id)]),
+			});
+		}
+	
+		if (readAntennaNotes.length > 0) {
+			await this.antennaNotesRepository.update({
+				antennaId: In(myAntennas.map(a => a.id)),
+				noteId: In(readAntennaNotes.map(n => n.id)),
+			}, {
+				read: true,
+			});
+	
+			// TODO: まとめてクエリしたい
+			for (const antenna of myAntennas) {
+				const count = await this.antennaNotesRepository.countBy({
+					antennaId: antenna.id,
+					read: false,
+				});
+	
+				if (count === 0) {
+					this.globalEventServie.publishMainStream(userId, 'readAntenna', antenna);
+				}
+			}
+	
+			this.userEntityService.getHasUnreadAntenna(userId).then(unread => {
+				if (!unread) {
+					this.globalEventServie.publishMainStream(userId, 'readAllAntennas');
+				}
+			});
+		}
+	}
+}
diff --git a/packages/backend/src/core/NotificationService.ts b/packages/backend/src/core/NotificationService.ts
new file mode 100644
index 0000000000..44957d62d3
--- /dev/null
+++ b/packages/backend/src/core/NotificationService.ts
@@ -0,0 +1,67 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { In } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { NotificationsRepository } from '@/models/index.js';
+import type { UsersRepository } from '@/models/index.js';
+import type { User } from '@/models/entities/User.js';
+import type { Notification } from '@/models/entities/Notification.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+import { GlobalEventService } from './GlobalEventService.js';
+import { PushNotificationService } from './PushNotificationService.js';
+
+@Injectable()
+export class NotificationService {
+	constructor(
+		@Inject(DI.notificationsRepository)
+		private notificationsRepository: NotificationsRepository,
+
+		private userEntityService: UserEntityService,
+		private globalEventService: GlobalEventService,
+		private pushNotificationService: PushNotificationService,
+	) {
+	}
+
+	public async readNotification(
+		userId: User['id'],
+		notificationIds: Notification['id'][],
+	) {
+		if (notificationIds.length === 0) return;
+
+		// Update documents
+		const result = await this.notificationsRepository.update({
+			notifieeId: userId,
+			id: In(notificationIds),
+			isRead: false,
+		}, {
+			isRead: true,
+		});
+
+		if (result.affected === 0) return;
+
+		if (!await this.userEntityService.getHasUnreadNotification(userId)) return this.#postReadAllNotifications(userId);
+		else return this.#postReadNotifications(userId, notificationIds);
+	}
+
+	public async readNotificationByQuery(
+		userId: User['id'],
+		query: Record<string, any>,
+	) {
+		const notificationIds = await this.notificationsRepository.findBy({
+			...query,
+			notifieeId: userId,
+			isRead: false,
+		}).then(notifications => notifications.map(notification => notification.id));
+
+		return this.readNotification(userId, notificationIds);
+	}
+
+	#postReadAllNotifications(userId: User['id']) {
+		this.globalEventService.publishMainStream(userId, 'readAllNotifications');
+		return this.pushNotificationService.pushNotification(userId, 'readAllNotifications', undefined);
+	}
+
+	#postReadNotifications(userId: User['id'], notificationIds: Notification['id'][]) {
+		this.globalEventService.publishMainStream(userId, 'readNotifications', notificationIds);
+		return this.pushNotificationService.pushNotification(userId, 'readNotifications', { notificationIds });
+	}
+}
diff --git a/packages/backend/src/core/PollService.ts b/packages/backend/src/core/PollService.ts
new file mode 100644
index 0000000000..8bc94c8a82
--- /dev/null
+++ b/packages/backend/src/core/PollService.ts
@@ -0,0 +1,115 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { Not } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { NotesRepository, UsersRepository, BlockingsRepository } from '@/models/index.js';
+import type { Note } from '@/models/entities/Note.js';
+import { RelayService } from '@/core/RelayService.js';
+import type { CacheableUser } from '@/models/entities/User.js';
+import { IdService } from '@/core/IdService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { CreateNotificationService } from '@/core/CreateNotificationService.js';
+import { ApRendererService } from './remote/activitypub/ApRendererService.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+import { ApDeliverManagerService } from './remote/activitypub/ApDeliverManagerService.js';
+
+@Injectable()
+export class PollService {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.pollsRepository)
+		private pollsRepository: PollsRepository,
+
+		@Inject(DI.pollVotesRepository)
+		private pollVotesRepository: PollVotesRepository,
+
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		private userEntityService: UserEntityService,
+		private idService: IdService,
+		private relayService: RelayService,
+		private globalEventServie: GlobalEventService,
+		private createNotificationService: CreateNotificationService,
+		private apRendererService: ApRendererService,
+		private apDeliverManagerService: ApDeliverManagerService,
+	) {
+	}
+
+	public async vote(user: CacheableUser, note: Note, choice: number) {
+		const poll = await this.pollsRepository.findOneBy({ noteId: note.id });
+	
+		if (poll == null) throw new Error('poll not found');
+	
+		// Check whether is valid choice
+		if (poll.choices[choice] == null) throw new Error('invalid choice param');
+	
+		// Check blocking
+		if (note.userId !== user.id) {
+			const block = await this.blockingsRepository.findOneBy({
+				blockerId: note.userId,
+				blockeeId: user.id,
+			});
+			if (block) {
+				throw new Error('blocked');
+			}
+		}
+	
+		// if already voted
+		const exist = await this.pollVotesRepository.findBy({
+			noteId: note.id,
+			userId: user.id,
+		});
+	
+		if (poll.multiple) {
+			if (exist.some(x => x.choice === choice)) {
+				throw new Error('already voted');
+			}
+		} else if (exist.length !== 0) {
+			throw new Error('already voted');
+		}
+	
+		// Create vote
+		await this.pollVotesRepository.insert({
+			id: this.idService.genId(),
+			createdAt: new Date(),
+			noteId: note.id,
+			userId: user.id,
+			choice: choice,
+		});
+	
+		// Increment votes count
+		const index = choice + 1; // In SQL, array index is 1 based
+		await this.pollsRepository.query(`UPDATE poll SET votes[${index}] = votes[${index}] + 1 WHERE "noteId" = '${poll.noteId}'`);
+	
+		this.globalEventServie.publishNoteStream(note.id, 'pollVoted', {
+			choice: choice,
+			userId: user.id,
+		});
+	
+		// Notify
+		this.createNotificationService.createNotification(note.userId, 'pollVote', {
+			notifierId: user.id,
+			noteId: note.id,
+			choice: choice,
+		});
+	}
+
+	public async deliverQuestionUpdate(noteId: Note['id']) {
+		const note = await this.notesRepository.findOneBy({ id: noteId });
+		if (note == null) throw new Error('note not found');
+	
+		const user = await this.usersRepository.findOneBy({ id: note.userId });
+		if (user == null) throw new Error('note not found');
+	
+		if (this.userEntityService.isLocalUser(user)) {
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderUpdate(await this.apRendererService.renderNote(note, false), user));
+			this.apDeliverManagerService.deliverToFollowers(user, content);
+			this.relayService.deliverToRelays(user, content);
+		}
+	}
+}
diff --git a/packages/backend/src/core/ProxyAccountService.ts b/packages/backend/src/core/ProxyAccountService.ts
new file mode 100644
index 0000000000..40ccc8226a
--- /dev/null
+++ b/packages/backend/src/core/ProxyAccountService.ts
@@ -0,0 +1,22 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository } from '@/models/index.js';
+import type { ILocalUser, User } from '@/models/entities/User.js';
+import { DI } from '@/di-symbols.js';
+import { MetaService } from './MetaService.js';
+
+@Injectable()
+export class ProxyAccountService {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private metaService: MetaService,
+	) {
+	}
+
+	public async fetch(): Promise<ILocalUser | null> {
+		const meta = await this.metaService.fetch();
+		if (meta.proxyAccountId == null) return null;
+		return await this.usersRepository.findOneByOrFail({ id: meta.proxyAccountId }) as ILocalUser;
+	}
+}
diff --git a/packages/backend/src/core/PushNotificationService.ts b/packages/backend/src/core/PushNotificationService.ts
new file mode 100644
index 0000000000..31d29bed97
--- /dev/null
+++ b/packages/backend/src/core/PushNotificationService.ts
@@ -0,0 +1,101 @@
+import { Inject, Injectable } from '@nestjs/common';
+import push from 'web-push';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import type { Packed } from '@/misc/schema';
+import { getNoteSummary } from '@/misc/get-note-summary.js';
+import { SwSubscriptionsRepository } from '@/models/index.js';
+import { MetaService } from './MetaService.js';
+
+// Defined also packages/sw/types.ts#L14-L21
+type pushNotificationsTypes = {
+	'notification': Packed<'Notification'>;
+	'unreadMessagingMessage': Packed<'MessagingMessage'>;
+	'readNotifications': { notificationIds: string[] };
+	'readAllNotifications': undefined;
+	'readAllMessagingMessages': undefined;
+	'readAllMessagingMessagesOfARoom': { userId: string } | { groupId: string };
+};
+
+// プッシュメッセージサーバーには文字数制限があるため、内容を削減します
+function truncateNotification(notification: Packed<'Notification'>): any {
+	if (notification.note) {
+		return {
+			...notification,
+			note: {
+				...notification.note,
+				// textをgetNoteSummaryしたものに置き換える
+				text: getNoteSummary(notification.type === 'renote' ? notification.note.renote as Packed<'Note'> : notification.note),
+
+				cw: undefined,
+				reply: undefined,
+				renote: undefined,
+				user: undefined as any, // 通知を受け取ったユーザーである場合が多いのでこれも捨てる
+			},
+		};
+	}
+
+	return notification;
+}
+
+@Injectable()
+export class PushNotificationService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.swSubscriptionsRepository)
+		private swSubscriptionsRepository: SwSubscriptionsRepository,
+
+		private metaService: MetaService,
+	) {
+	}
+
+	public async pushNotification<T extends keyof pushNotificationsTypes>(userId: string, type: T, body: pushNotificationsTypes[T]) {
+		const meta = await this.metaService.fetch();
+	
+		if (!meta.enableServiceWorker || meta.swPublicKey == null || meta.swPrivateKey == null) return;
+	
+		// アプリケーションの連絡先と、サーバーサイドの鍵ペアの情報を登録
+		push.setVapidDetails(this.config.url,
+			meta.swPublicKey,
+			meta.swPrivateKey);
+	
+		// Fetch
+		const subscriptions = await this.swSubscriptionsRepository.findBy({
+			userId: userId,
+		});
+	
+		for (const subscription of subscriptions) {
+			const pushSubscription = {
+				endpoint: subscription.endpoint,
+				keys: {
+					auth: subscription.auth,
+					p256dh: subscription.publickey,
+				},
+			};
+	
+			push.sendNotification(pushSubscription, JSON.stringify({
+				type,
+				body: type === 'notification' ? truncateNotification(body as Packed<'Notification'>) : body,
+				userId,
+				dateTime: (new Date()).getTime(),
+			}), {
+				proxy: this.config.proxy,
+			}).catch((err: any) => {
+				//swLogger.info(err.statusCode);
+				//swLogger.info(err.headers);
+				//swLogger.info(err.body);
+	
+				if (err.statusCode === 410) {
+					this.swSubscriptionsRepository.delete({
+						userId: userId,
+						endpoint: subscription.endpoint,
+						auth: subscription.auth,
+						publickey: subscription.publickey,
+					});
+				}
+			});
+		}
+	}
+}
diff --git a/packages/backend/src/core/QueryService.ts b/packages/backend/src/core/QueryService.ts
new file mode 100644
index 0000000000..1613f70c80
--- /dev/null
+++ b/packages/backend/src/core/QueryService.ts
@@ -0,0 +1,262 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { Brackets } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import type { User } from '@/models/entities/User.js';
+import type { SelectQueryBuilder } from 'typeorm';
+
+@Injectable()
+export class QueryService {
+	constructor(
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		@Inject(DI.channelFollowingsRepository)
+		private channelFollowingsRepository: ChannelFollowingsRepository,
+
+		@Inject(DI.mutedNotesRepository)
+		private mutedNotesRepository: MutedNotesRepository,
+
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		@Inject(DI.noteThreadMutingsRepository)
+		private noteThreadMutingsRepository: NoteThreadMutingsRepository,
+
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+	) {
+	}
+
+	public makePaginationQuery<T>(q: SelectQueryBuilder<T>, sinceId?: string, untilId?: string, sinceDate?: number, untilDate?: number): SelectQueryBuilder<T> {
+		if (sinceId && untilId) {
+			q.andWhere(`${q.alias}.id > :sinceId`, { sinceId: sinceId });
+			q.andWhere(`${q.alias}.id < :untilId`, { untilId: untilId });
+			q.orderBy(`${q.alias}.id`, 'DESC');
+		} else if (sinceId) {
+			q.andWhere(`${q.alias}.id > :sinceId`, { sinceId: sinceId });
+			q.orderBy(`${q.alias}.id`, 'ASC');
+		} else if (untilId) {
+			q.andWhere(`${q.alias}.id < :untilId`, { untilId: untilId });
+			q.orderBy(`${q.alias}.id`, 'DESC');
+		} else if (sinceDate && untilDate) {
+			q.andWhere(`${q.alias}.createdAt > :sinceDate`, { sinceDate: new Date(sinceDate) });
+			q.andWhere(`${q.alias}.createdAt < :untilDate`, { untilDate: new Date(untilDate) });
+			q.orderBy(`${q.alias}.createdAt`, 'DESC');
+		} else if (sinceDate) {
+			q.andWhere(`${q.alias}.createdAt > :sinceDate`, { sinceDate: new Date(sinceDate) });
+			q.orderBy(`${q.alias}.createdAt`, 'ASC');
+		} else if (untilDate) {
+			q.andWhere(`${q.alias}.createdAt < :untilDate`, { untilDate: new Date(untilDate) });
+			q.orderBy(`${q.alias}.createdAt`, 'DESC');
+		} else {
+			q.orderBy(`${q.alias}.id`, 'DESC');
+		}
+		return q;
+	}	
+	
+	// ここでいうBlockedは被Blockedの意
+	public generateBlockedUserQuery(q: SelectQueryBuilder<any>, me: { id: User['id'] }): void {
+		const blockingQuery = this.blockingsRepository.createQueryBuilder('blocking')
+			.select('blocking.blockerId')
+			.where('blocking.blockeeId = :blockeeId', { blockeeId: me.id });
+
+		// 投稿の作者にブロックされていない かつ
+		// 投稿の返信先の作者にブロックされていない かつ
+		// 投稿の引用元の作者にブロックされていない
+		q
+			.andWhere(`note.userId NOT IN (${ blockingQuery.getQuery() })`)
+			.andWhere(new Brackets(qb => { qb
+				.where('note.replyUserId IS NULL')
+				.orWhere(`note.replyUserId NOT IN (${ blockingQuery.getQuery() })`);
+			}))
+			.andWhere(new Brackets(qb => { qb
+				.where('note.renoteUserId IS NULL')
+				.orWhere(`note.renoteUserId NOT IN (${ blockingQuery.getQuery() })`);
+			}));
+
+		q.setParameters(blockingQuery.getParameters());
+	}
+
+	public generateBlockQueryForUsers(q: SelectQueryBuilder<any>, me: { id: User['id'] }): void {
+		const blockingQuery = this.blockingsRepository.createQueryBuilder('blocking')
+			.select('blocking.blockeeId')
+			.where('blocking.blockerId = :blockerId', { blockerId: me.id });
+
+		const blockedQuery = this.blockingsRepository.createQueryBuilder('blocking')
+			.select('blocking.blockerId')
+			.where('blocking.blockeeId = :blockeeId', { blockeeId: me.id });
+
+		q.andWhere(`user.id NOT IN (${ blockingQuery.getQuery() })`);
+		q.setParameters(blockingQuery.getParameters());
+
+		q.andWhere(`user.id NOT IN (${ blockedQuery.getQuery() })`);
+		q.setParameters(blockedQuery.getParameters());
+	}
+
+	public generateChannelQuery(q: SelectQueryBuilder<any>, me?: { id: User['id'] } | null): void {
+		if (me == null) {
+			q.andWhere('note.channelId IS NULL');
+		} else {
+			q.leftJoinAndSelect('note.channel', 'channel');
+	
+			const channelFollowingQuery = this.channelFollowingsRepository.createQueryBuilder('channelFollowing')
+				.select('channelFollowing.followeeId')
+				.where('channelFollowing.followerId = :followerId', { followerId: me.id });
+	
+			q.andWhere(new Brackets(qb => { qb
+				// チャンネルのノートではない
+				.where('note.channelId IS NULL')
+				// または自分がフォローしているチャンネルのノート
+				.orWhere(`note.channelId IN (${ channelFollowingQuery.getQuery() })`);
+			}));
+	
+			q.setParameters(channelFollowingQuery.getParameters());
+		}
+	}
+
+	public generateMutedNoteQuery(q: SelectQueryBuilder<any>, me: { id: User['id'] }): void {
+		const mutedQuery = this.mutedNotesRepository.createQueryBuilder('muted')
+			.select('muted.noteId')
+			.where('muted.userId = :userId', { userId: me.id });
+	
+		q.andWhere(`note.id NOT IN (${ mutedQuery.getQuery() })`);
+	
+		q.setParameters(mutedQuery.getParameters());
+	}
+
+	public generateMutedNoteThreadQuery(q: SelectQueryBuilder<any>, me: { id: User['id'] }): void {
+		const mutedQuery = this.noteThreadMutingsRepository.createQueryBuilder('threadMuted')
+			.select('threadMuted.threadId')
+			.where('threadMuted.userId = :userId', { userId: me.id });
+	
+		q.andWhere(`note.id NOT IN (${ mutedQuery.getQuery() })`);
+		q.andWhere(new Brackets(qb => { qb
+			.where('note.threadId IS NULL')
+			.orWhere(`note.threadId NOT IN (${ mutedQuery.getQuery() })`);
+		}));
+	
+		q.setParameters(mutedQuery.getParameters());
+	}
+
+	public generateMutedUserQuery(q: SelectQueryBuilder<any>, me: { id: User['id'] }, exclude?: User): void {
+		const mutingQuery = this.mutingsRepository.createQueryBuilder('muting')
+			.select('muting.muteeId')
+			.where('muting.muterId = :muterId', { muterId: me.id });
+	
+		if (exclude) {
+			mutingQuery.andWhere('muting.muteeId != :excludeId', { excludeId: exclude.id });
+		}
+	
+		const mutingInstanceQuery = this.userProfilesRepository.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')
+				.orWhere(`note.replyUserId NOT IN (${ mutingQuery.getQuery() })`);
+			}))
+			.andWhere(new Brackets(qb => { qb
+				.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());
+	}
+
+	public generateMutedUserQueryForUsers(q: SelectQueryBuilder<any>, me: { id: User['id'] }): void {
+		const mutingQuery = this.mutingsRepository.createQueryBuilder('muting')
+			.select('muting.muteeId')
+			.where('muting.muterId = :muterId', { muterId: me.id });
+	
+		q.andWhere(`user.id NOT IN (${ mutingQuery.getQuery() })`);
+	
+		q.setParameters(mutingQuery.getParameters());
+	}
+
+	public generateRepliesQuery(q: SelectQueryBuilder<any>, me?: Pick<User, 'id' | 'showTimelineReplies'> | null): void {
+		if (me == null) {
+			q.andWhere(new Brackets(qb => { qb
+				.where('note.replyId IS NULL') // 返信ではない
+				.orWhere(new Brackets(qb => { qb // 返信だけど投稿者自身への返信
+					.where('note.replyId IS NOT NULL')
+					.andWhere('note.replyUserId = note.userId');
+				}));
+			}));
+		} else if (!me.showTimelineReplies) {
+			q.andWhere(new Brackets(qb => { qb
+				.where('note.replyId IS NULL') // 返信ではない
+				.orWhere('note.replyUserId = :meId', { meId: me.id }) // 返信だけど自分のノートへの返信
+				.orWhere(new Brackets(qb => { qb // 返信だけど自分の行った返信
+					.where('note.replyId IS NOT NULL')
+					.andWhere('note.userId = :meId', { meId: me.id });
+				}))
+				.orWhere(new Brackets(qb => { qb // 返信だけど投稿者自身への返信
+					.where('note.replyId IS NOT NULL')
+					.andWhere('note.replyUserId = note.userId');
+				}));
+			}));
+		}
+	}
+
+	public generateVisibilityQuery(q: SelectQueryBuilder<any>, me?: { id: User['id'] } | null): void {
+		// This code must always be synchronized with the checks in Notes.isVisibleForMe.
+		if (me == null) {
+			q.andWhere(new Brackets(qb => { qb
+				.where('note.visibility = \'public\'')
+				.orWhere('note.visibility = \'home\'');
+			}));
+		} else {
+			const followingQuery = this.followingsRepository.createQueryBuilder('following')
+				.select('following.followeeId')
+				.where('following.followerId = :meId');
+	
+			q.andWhere(new Brackets(qb => { qb
+				// 公開投稿である
+				.where(new Brackets(qb => { qb
+					.where('note.visibility = \'public\'')
+					.orWhere('note.visibility = \'home\'');
+				}))
+				// または 自分自身
+				.orWhere('note.userId = :meId')
+				// または 自分宛て
+				.orWhere(':meId = ANY(note.visibleUserIds)')
+				.orWhere(':meId = ANY(note.mentions)')
+				.orWhere(new Brackets(qb => { qb
+					// または フォロワー宛ての投稿であり、
+					.where('note.visibility = \'followers\'')
+					.andWhere(new Brackets(qb => { qb
+						// 自分がフォロワーである
+						.where(`note.userId IN (${ followingQuery.getQuery() })`)
+						// または 自分の投稿へのリプライ
+						.orWhere('note.replyUserId = :meId');
+					}));
+				}));
+			}));
+	
+			q.setParameters({ meId: me.id });
+		}
+	}
+}
+
diff --git a/packages/backend/src/core/QueueService.ts b/packages/backend/src/core/QueueService.ts
new file mode 100644
index 0000000000..7e771c100f
--- /dev/null
+++ b/packages/backend/src/core/QueueService.ts
@@ -0,0 +1,242 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { v4 as uuid } from 'uuid';
+import type { IActivity } from '@/core/remote/activitypub/type.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import type { Webhook, webhookEventTypes } from '@/models/entities/Webhook.js';
+import { Config } from '@/config.js';
+import { DI } from '@/di-symbols.js';
+import { DbQueue, DeliverQueue, EndedPollNotificationQueue, InboxQueue, ObjectStorageQueue, SystemQueue, WebhookDeliverQueue } from './queue/QueueModule.js';
+import type { ThinUser } from '../queue/types.js';
+import type httpSignature from '@peertube/http-signature';
+
+@Injectable()
+export class QueueService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject('queue:system') public systemQueue: SystemQueue,
+		@Inject('queue:endedPollNotification') public endedPollNotificationQueue: EndedPollNotificationQueue,
+		@Inject('queue:deliver') public deliverQueue: DeliverQueue,
+		@Inject('queue:inbox') public inboxQueue: InboxQueue,
+		@Inject('queue:db') public dbQueue: DbQueue,
+		@Inject('queue:objectStorage') public objectStorageQueue: ObjectStorageQueue,
+		@Inject('queue:webhookDeliver') public webhookDeliverQueue: WebhookDeliverQueue,
+	) {}
+
+	public deliver(user: ThinUser, content: IActivity, to: string | null) {
+		if (content == null) return null;
+		if (to == null) return null;
+
+		const data = {
+			user: {
+				id: user.id,
+			},
+			content,
+			to,
+		};
+
+		return this.deliverQueue.add(data, {
+			attempts: this.config.deliverJobMaxAttempts ?? 12,
+			timeout: 1 * 60 * 1000,	// 1min
+			backoff: {
+				type: 'apBackoff',
+			},
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public inbox(activity: IActivity, signature: httpSignature.IParsedSignature) {
+		const data = {
+			activity: activity,
+			signature,
+		};
+	
+		return this.inboxQueue.add(data, {
+			attempts: this.config.inboxJobMaxAttempts ?? 8,
+			timeout: 5 * 60 * 1000,	// 5min
+			backoff: {
+				type: 'apBackoff',
+			},
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public createDeleteDriveFilesJob(user: ThinUser) {
+		return this.dbQueue.add('deleteDriveFiles', {
+			user: user,
+		}, {
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public createExportCustomEmojisJob(user: ThinUser) {
+		return this.dbQueue.add('exportCustomEmojis', {
+			user: user,
+		}, {
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public createExportNotesJob(user: ThinUser) {
+		return this.dbQueue.add('exportNotes', {
+			user: user,
+		}, {
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public createExportFollowingJob(user: ThinUser, excludeMuting = false, excludeInactive = false) {
+		return this.dbQueue.add('exportFollowing', {
+			user: user,
+			excludeMuting,
+			excludeInactive,
+		}, {
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public createExportMuteJob(user: ThinUser) {
+		return this.dbQueue.add('exportMuting', {
+			user: user,
+		}, {
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public createExportBlockingJob(user: ThinUser) {
+		return this.dbQueue.add('exportBlocking', {
+			user: user,
+		}, {
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public createExportUserListsJob(user: ThinUser) {
+		return this.dbQueue.add('exportUserLists', {
+			user: user,
+		}, {
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public createImportFollowingJob(user: ThinUser, fileId: DriveFile['id']) {
+		return this.dbQueue.add('importFollowing', {
+			user: user,
+			fileId: fileId,
+		}, {
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public createImportMutingJob(user: ThinUser, fileId: DriveFile['id']) {
+		return this.dbQueue.add('importMuting', {
+			user: user,
+			fileId: fileId,
+		}, {
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public createImportBlockingJob(user: ThinUser, fileId: DriveFile['id']) {
+		return this.dbQueue.add('importBlocking', {
+			user: user,
+			fileId: fileId,
+		}, {
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public createImportUserListsJob(user: ThinUser, fileId: DriveFile['id']) {
+		return this.dbQueue.add('importUserLists', {
+			user: user,
+			fileId: fileId,
+		}, {
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public createImportCustomEmojisJob(user: ThinUser, fileId: DriveFile['id']) {
+		return this.dbQueue.add('importCustomEmojis', {
+			user: user,
+			fileId: fileId,
+		}, {
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public createDeleteAccountJob(user: ThinUser, opts: { soft?: boolean; } = {}) {
+		return this.dbQueue.add('deleteAccount', {
+			user: user,
+			soft: opts.soft,
+		}, {
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public createDeleteObjectStorageFileJob(key: string) {
+		return this.objectStorageQueue.add('deleteFile', {
+			key: key,
+		}, {
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public createCleanRemoteFilesJob() {
+		return this.objectStorageQueue.add('cleanRemoteFiles', {}, {
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public webhookDeliver(webhook: Webhook, type: typeof webhookEventTypes[number], content: unknown) {
+		const data = {
+			type,
+			content,
+			webhookId: webhook.id,
+			userId: webhook.userId,
+			to: webhook.url,
+			secret: webhook.secret,
+			createdAt: Date.now(),
+			eventId: uuid(),
+		};
+	
+		return this.webhookDeliverQueue.add(data, {
+			attempts: 4,
+			timeout: 1 * 60 * 1000,	// 1min
+			backoff: {
+				type: 'apBackoff',
+			},
+			removeOnComplete: true,
+			removeOnFail: true,
+		});
+	}
+
+	public destroy() {
+		this.deliverQueue.once('cleaned', (jobs, status) => {
+			//deliverLogger.succ(`Cleaned ${jobs.length} ${status} jobs`);
+		});
+		this.deliverQueue.clean(0, 'delayed');
+	
+		this.inboxQueue.once('cleaned', (jobs, status) => {
+			//inboxLogger.succ(`Cleaned ${jobs.length} ${status} jobs`);
+		});
+		this.inboxQueue.clean(0, 'delayed');
+	}
+}
diff --git a/packages/backend/src/core/ReactionService.ts b/packages/backend/src/core/ReactionService.ts
new file mode 100644
index 0000000000..3006456577
--- /dev/null
+++ b/packages/backend/src/core/ReactionService.ts
@@ -0,0 +1,340 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { IsNull } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { EmojisRepository, BlockingsRepository, NoteReactionsRepository, UsersRepository, NotesRepository } from '@/models/index.js';
+import { IdentifiableError } from '@/misc/identifiable-error.js';
+import type { IRemoteUser, User } from '@/models/entities/User.js';
+import type { Note } from '@/models/entities/Note.js';
+import { IdService } from '@/core/IdService.js';
+import type { NoteReaction } from '@/models/entities/NoteReaction.js';
+import { isDuplicateKeyValueError } from '@/misc/is-duplicate-key-value-error.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { CreateNotificationService } from '@/core/CreateNotificationService.js';
+import PerUserReactionsChart from '@/core/chart/charts/per-user-reactions.js';
+import { emojiRegex } from '@/misc/emoji-regex.js';
+import { ApDeliverManagerService } from './remote/activitypub/ApDeliverManagerService.js';
+import { NoteEntityService } from './entities/NoteEntityService.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+import { ApRendererService } from './remote/activitypub/ApRendererService.js';
+import { MetaService } from './MetaService.js';
+import { UtilityService } from './UtilityService.js';
+
+const legacies: Record<string, string> = {
+	'like': '👍',
+	'love': '❤', // ここに記述する場合は異体字セレクタを入れない
+	'laugh': '😆',
+	'hmm': '🤔',
+	'surprise': '😮',
+	'congrats': '🎉',
+	'angry': '💢',
+	'confused': '😥',
+	'rip': '😇',
+	'pudding': '🍮',
+	'star': '⭐',
+};
+
+type DecodedReaction = {
+	/**
+	 * リアクション名 (Unicode Emoji or ':name@hostname' or ':name@.')
+	 */
+	reaction: string;
+
+	/**
+	 * name (カスタム絵文字の場合name, Emojiクエリに使う)
+	 */
+	name?: string;
+
+	/**
+	 * host (カスタム絵文字の場合host, Emojiクエリに使う)
+	 */
+	host?: string | null;
+};
+
+@Injectable()
+export class ReactionService {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.noteReactionsRepository)
+		private noteReactionsRepository: NoteReactionsRepository,
+
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+
+		private utilityService: UtilityService,
+		private metaService: MetaService,
+		private userEntityService: UserEntityService,
+		private noteEntityService: NoteEntityService,
+		private idService: IdService,
+		private globalEventServie: GlobalEventService,
+		private apRendererService: ApRendererService,
+		private apDeliverManagerService: ApDeliverManagerService,
+		private createNotificationService: CreateNotificationService,
+		private perUserReactionsChart: PerUserReactionsChart,
+	) {
+	}
+
+	public async create(user: { id: User['id']; host: User['host']; }, note: Note, reaction?: string) {
+		// Check blocking
+		if (note.userId !== user.id) {
+			const block = await this.blockingsRepository.findOneBy({
+				blockerId: note.userId,
+				blockeeId: user.id,
+			});
+			if (block) {
+				throw new IdentifiableError('e70412a4-7197-4726-8e74-f3e0deb92aa7');
+			}
+		}
+	
+		// check visibility
+		if (!await this.noteEntityService.isVisibleForMe(note, user.id)) {
+			throw new IdentifiableError('68e9d2d1-48bf-42c2-b90a-b20e09fd3d48', 'Note not accessible for you.');
+		}
+	
+		// TODO: cache
+		reaction = await this.toDbReaction(reaction, user.host);
+	
+		const record: NoteReaction = {
+			id: this.idService.genId(),
+			createdAt: new Date(),
+			noteId: note.id,
+			userId: user.id,
+			reaction,
+		};
+	
+		// Create reaction
+		try {
+			await this.noteReactionsRepository.insert(record);
+		} catch (e) {
+			if (isDuplicateKeyValueError(e)) {
+				const exists = await this.noteReactionsRepository.findOneByOrFail({
+					noteId: note.id,
+					userId: user.id,
+				});
+	
+				if (exists.reaction !== reaction) {
+					// 別のリアクションがすでにされていたら置き換える
+					await this.delete(user, note);
+					await this.noteReactionsRepository.insert(record);
+				} else {
+					// 同じリアクションがすでにされていたらエラー
+					throw new IdentifiableError('51c42bb4-931a-456b-bff7-e5a8a70dd298');
+				}
+			} else {
+				throw e;
+			}
+		}
+	
+		// Increment reactions count
+		const sql = `jsonb_set("reactions", '{${reaction}}', (COALESCE("reactions"->>'${reaction}', '0')::int + 1)::text::jsonb)`;
+		await this.notesRepository.createQueryBuilder().update()
+			.set({
+				reactions: () => sql,
+				score: () => '"score" + 1',
+			})
+			.where('id = :id', { id: note.id })
+			.execute();
+	
+		this.perUserReactionsChart.update(user, note);
+	
+		// カスタム絵文字リアクションだったら絵文字情報も送る
+		const decodedReaction = this.decodeReaction(reaction);
+	
+		const emoji = await this.emojisRepository.findOne({
+			where: {
+				name: decodedReaction.name,
+				host: decodedReaction.host ?? IsNull(),
+			},
+			select: ['name', 'host', 'originalUrl', 'publicUrl'],
+		});
+	
+		this.globalEventServie.publishNoteStream(note.id, 'reacted', {
+			reaction: decodedReaction.reaction,
+			emoji: emoji != null ? {
+				name: emoji.host ? `${emoji.name}@${emoji.host}` : `${emoji.name}@.`,
+				url: emoji.publicUrl ?? emoji.originalUrl, // || emoji.originalUrl してるのは後方互換性のため
+			} : null,
+			userId: user.id,
+		});
+	
+		// リアクションされたユーザーがローカルユーザーなら通知を作成
+		if (note.userHost === null) {
+			this.createNotificationService.createNotification(note.userId, 'reaction', {
+				notifierId: user.id,
+				noteId: note.id,
+				reaction: reaction,
+			});
+		}
+	
+		//#region 配信
+		if (this.userEntityService.isLocalUser(user) && !note.localOnly) {
+			const content = this.apRendererService.renderActivity(await this.apRendererService.renderLike(record, note));
+			const dm = this.apDeliverManagerService.createDeliverManager(user, content);
+			if (note.userHost !== null) {
+				const reactee = await this.usersRepository.findOneBy({ id: note.userId });
+				dm.addDirectRecipe(reactee as IRemoteUser);
+			}
+	
+			if (['public', 'home', 'followers'].includes(note.visibility)) {
+				dm.addFollowersRecipe();
+			} else if (note.visibility === 'specified') {
+				const visibleUsers = await Promise.all(note.visibleUserIds.map(id => this.usersRepository.findOneBy({ id })));
+				for (const u of visibleUsers.filter(u => u && this.userEntityService.isRemoteUser(u))) {
+					dm.addDirectRecipe(u as IRemoteUser);
+				}
+			}
+	
+			dm.execute();
+		}
+		//#endregion
+	}
+
+	public async delete(user: { id: User['id']; host: User['host']; }, note: Note) {
+		// if already unreacted
+		const exist = await this.noteReactionsRepository.findOneBy({
+			noteId: note.id,
+			userId: user.id,
+		});
+	
+		if (exist == null) {
+			throw new IdentifiableError('60527ec9-b4cb-4a88-a6bd-32d3ad26817d', 'not reacted');
+		}
+	
+		// Delete reaction
+		const result = await this.noteReactionsRepository.delete(exist.id);
+	
+		if (result.affected !== 1) {
+			throw new IdentifiableError('60527ec9-b4cb-4a88-a6bd-32d3ad26817d', 'not reacted');
+		}
+	
+		// Decrement reactions count
+		const sql = `jsonb_set("reactions", '{${exist.reaction}}', (COALESCE("reactions"->>'${exist.reaction}', '0')::int - 1)::text::jsonb)`;
+		await this.notesRepository.createQueryBuilder().update()
+			.set({
+				reactions: () => sql,
+			})
+			.where('id = :id', { id: note.id })
+			.execute();
+	
+		this.notesRepository.decrement({ id: note.id }, 'score', 1);
+	
+		this.globalEventServie.publishNoteStream(note.id, 'unreacted', {
+			reaction: this.decodeReaction(exist.reaction).reaction,
+			userId: user.id,
+		});
+	
+		//#region 配信
+		if (this.userEntityService.isLocalUser(user) && !note.localOnly) {
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderUndo(await this.apRendererService.renderLike(exist, note), user));
+			const dm = this.apDeliverManagerService.createDeliverManager(user, content);
+			if (note.userHost !== null) {
+				const reactee = await this.usersRepository.findOneBy({ id: note.userId });
+				dm.addDirectRecipe(reactee as IRemoteUser);
+			}
+			dm.addFollowersRecipe();
+			dm.execute();
+		}
+		//#endregion
+	}
+	
+	public async getFallbackReaction(): Promise<string> {
+		const meta = await this.metaService.fetch();
+		return meta.useStarForReactionFallback ? '⭐' : '👍';
+	}
+
+	public convertLegacyReactions(reactions: Record<string, number>) {
+		const _reactions = {} as Record<string, number>;
+
+		for (const reaction of Object.keys(reactions)) {
+			if (reactions[reaction] <= 0) continue;
+
+			if (Object.keys(legacies).includes(reaction)) {
+				if (_reactions[legacies[reaction]]) {
+					_reactions[legacies[reaction]] += reactions[reaction];
+				} else {
+					_reactions[legacies[reaction]] = reactions[reaction];
+				}
+			} else {
+				if (_reactions[reaction]) {
+					_reactions[reaction] += reactions[reaction];
+				} else {
+					_reactions[reaction] = reactions[reaction];
+				}
+			}
+		}
+
+		const _reactions2 = {} as Record<string, number>;
+
+		for (const reaction of Object.keys(_reactions)) {
+			_reactions2[this.decodeReaction(reaction).reaction] = _reactions[reaction];
+		}
+
+		return _reactions2;
+	}
+
+	public async toDbReaction(reaction?: string | null, reacterHost?: string | null): Promise<string> {
+		if (reaction == null) return await this.getFallbackReaction();
+
+		reacterHost = this.utilityService.toPunyNullable(reacterHost);
+
+		// 文字列タイプのリアクションを絵文字に変換
+		if (Object.keys(legacies).includes(reaction)) return legacies[reaction];
+
+		// Unicode絵文字
+		const match = emojiRegex.exec(reaction);
+		if (match) {
+		// 合字を含む1つの絵文字
+			const unicode = match[0];
+
+			// 異体字セレクタ除去
+			return unicode.match('\u200d') ? unicode : unicode.replace(/\ufe0f/g, '');
+		}
+
+		const custom = reaction.match(/^:([\w+-]+)(?:@\.)?:$/);
+		if (custom) {
+			const name = custom[1];
+			const emoji = await this.emojisRepository.findOneBy({
+				host: reacterHost ?? IsNull(),
+				name,
+			});
+
+			if (emoji) return reacterHost ? `:${name}@${reacterHost}:` : `:${name}:`;
+		}
+
+		return await this.getFallbackReaction();
+	}
+
+	public decodeReaction(str: string): DecodedReaction {
+		const custom = str.match(/^:([\w+-]+)(?:@([\w.-]+))?:$/);
+
+		if (custom) {
+			const name = custom[1];
+			const host = custom[2] ?? null;
+
+			return {
+				reaction: `:${name}@${host ?? '.'}:`,	// ローカル分は@以降を省略するのではなく.にする
+				name,
+				host,
+			};
+		}
+
+		return {
+			reaction: str,
+			name: undefined,
+			host: undefined,
+		};
+	}
+
+	public convertLegacyReaction(reaction: string): string {
+		reaction = this.decodeReaction(reaction).reaction;
+		if (Object.keys(legacies).includes(reaction)) return legacies[reaction];
+		return reaction;
+	}
+}
diff --git a/packages/backend/src/core/RelayService.ts b/packages/backend/src/core/RelayService.ts
new file mode 100644
index 0000000000..c1d85e8b48
--- /dev/null
+++ b/packages/backend/src/core/RelayService.ts
@@ -0,0 +1,119 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { IsNull } from 'typeorm';
+import type { ILocalUser, User } from '@/models/entities/User.js';
+import { RelaysRepository, UsersRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { Cache } from '@/misc/cache.js';
+import type { Relay } from '@/models/entities/Relay.js';
+import { QueueService } from '@/core/QueueService.js';
+import { CreateSystemUserService } from '@/core/CreateSystemUserService.js';
+import { ApRendererService } from '@/core/remote/activitypub/ApRendererService.js';
+import { DI } from '@/di-symbols.js';
+
+const ACTOR_USERNAME = 'relay.actor' as const;
+
+@Injectable()
+export class RelayService {
+	#relaysCache: Cache<Relay[]>;
+
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.relaysRepository)
+		private relaysRepository: RelaysRepository,
+
+		private idService: IdService,
+		private queueService: QueueService,
+		private createSystemUserService: CreateSystemUserService,
+		private apRendererService: ApRendererService,
+	) {
+		this.#relaysCache = new Cache<Relay[]>(1000 * 60 * 10);
+	}
+
+	async #getRelayActor(): Promise<ILocalUser> {
+		const user = await this.usersRepository.findOneBy({
+			host: IsNull(),
+			username: ACTOR_USERNAME,
+		});
+	
+		if (user) return user as ILocalUser;
+	
+		const created = await this.createSystemUserService.createSystemUser(ACTOR_USERNAME);
+		return created as ILocalUser;
+	}
+
+	public async addRelay(inbox: string): Promise<Relay> {
+		const relay = await this.relaysRepository.insert({
+			id: this.idService.genId(),
+			inbox,
+			status: 'requesting',
+		}).then(x => this.relaysRepository.findOneByOrFail(x.identifiers[0]));
+	
+		const relayActor = await this.#getRelayActor();
+		const follow = await this.apRendererService.renderFollowRelay(relay, relayActor);
+		const activity = this.apRendererService.renderActivity(follow);
+		this.queueService.deliver(relayActor, activity, relay.inbox);
+	
+		return relay;
+	}
+
+	public async removeRelay(inbox: string): Promise<void> {
+		const relay = await this.relaysRepository.findOneBy({
+			inbox,
+		});
+	
+		if (relay == null) {
+			throw new Error('relay not found');
+		}
+	
+		const relayActor = await this.#getRelayActor();
+		const follow = this.apRendererService.renderFollowRelay(relay, relayActor);
+		const undo = this.apRendererService.renderUndo(follow, relayActor);
+		const activity = this.apRendererService.renderActivity(undo);
+		this.queueService.deliver(relayActor, activity, relay.inbox);
+	
+		await this.relaysRepository.delete(relay.id);
+	}
+
+	public async listRelay(): Promise<Relay[]> {
+		const relays = await this.relaysRepository.find();
+		return relays;
+	}
+	
+	public async relayAccepted(id: string): Promise<string> {
+		const result = await this.relaysRepository.update(id, {
+			status: 'accepted',
+		});
+	
+		return JSON.stringify(result);
+	}
+
+	public async relayRejected(id: string): Promise<string> {
+		const result = await this.relaysRepository.update(id, {
+			status: 'rejected',
+		});
+	
+		return JSON.stringify(result);
+	}
+
+	public async deliverToRelays(user: { id: User['id']; host: null; }, activity: any): Promise<void> {
+		if (activity == null) return;
+	
+		const relays = await this.#relaysCache.fetch(null, () => this.relaysRepository.findBy({
+			status: 'accepted',
+		}));
+		if (relays.length === 0) return;
+	
+		// TODO
+		//const copy = structuredClone(activity);
+		const copy = JSON.parse(JSON.stringify(activity));
+		if (!copy.to) copy.to = ['https://www.w3.org/ns/activitystreams#Public'];
+	
+		const signed = await this.apRendererService.attachLdSignature(copy, user);
+	
+		for (const relay of relays) {
+			this.queueService.deliver(user, signed, relay.inbox);
+		}
+	}
+}
diff --git a/packages/backend/src/core/S3Service.ts b/packages/backend/src/core/S3Service.ts
new file mode 100644
index 0000000000..9549e19990
--- /dev/null
+++ b/packages/backend/src/core/S3Service.ts
@@ -0,0 +1,38 @@
+import { URL } from 'node:url';
+import { Inject, Injectable } from '@nestjs/common';
+import S3 from 'aws-sdk/clients/s3.js';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import type { Meta } from '@/models/entities/Meta.js';
+import { HttpRequestService } from './HttpRequestService.js';
+
+@Injectable()
+export class S3Service {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private httpRequestService: HttpRequestService,
+	) {
+	}
+
+	public getS3(meta: Meta) {
+		const u = meta.objectStorageEndpoint != null
+			? `${meta.objectStorageUseSSL ? 'https://' : 'http://'}${meta.objectStorageEndpoint}`
+			: `${meta.objectStorageUseSSL ? 'https://' : 'http://'}example.net`;
+	
+		return new S3({
+			endpoint: meta.objectStorageEndpoint ?? undefined,
+			accessKeyId: meta.objectStorageAccessKey!,
+			secretAccessKey: meta.objectStorageSecretKey!,
+			region: meta.objectStorageRegion ?? undefined,
+			sslEnabled: meta.objectStorageUseSSL,
+			s3ForcePathStyle: !meta.objectStorageEndpoint	// AWS with endPoint omitted
+				? false
+				: meta.objectStorageS3ForcePathStyle,
+			httpOptions: {
+				agent: this.httpRequestService.getAgentByUrl(new URL(u), !meta.objectStorageUseProxy),
+			},
+		});
+	}
+}
diff --git a/packages/backend/src/core/SignupService.ts b/packages/backend/src/core/SignupService.ts
new file mode 100644
index 0000000000..a876668b94
--- /dev/null
+++ b/packages/backend/src/core/SignupService.ts
@@ -0,0 +1,141 @@
+import { generateKeyPair } from 'node:crypto';
+import { Inject, Injectable } from '@nestjs/common';
+import bcrypt from 'bcryptjs';
+import { DataSource, IsNull } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { UsedUsernamesRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import { User } from '@/models/entities/User.js';
+import { UserProfile } from '@/models/entities/UserProfile.js';
+import { IdService } from '@/core/IdService.js';
+import { UserKeypair } from '@/models/entities/UserKeypair.js';
+import { UsedUsername } from '@/models/entities/UsedUsername.js';
+import generateUserToken from '@/misc/generate-native-user-token.js';
+import UsersChart from './chart/charts/users.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+import { UtilityService } from './UtilityService.js';
+
+@Injectable()
+export class SignupService {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.usedUsernamesRepository)
+		private usedUsernamesRepository: UsedUsernamesRepository,
+
+		private utilityService: UtilityService,
+		private userEntityService: UserEntityService,
+		private idService: IdService,
+		private usersChart: UsersChart,
+	) {
+	}
+
+	public async signup(opts: {
+		username: User['username'];
+		password?: string | null;
+		passwordHash?: UserProfile['password'] | null;
+		host?: string | null;
+	}) {
+		const { username, password, passwordHash, host } = opts;
+		let hash = passwordHash;
+	
+		// Validate username
+		if (!this.userEntityService.validateLocalUsername(username)) {
+			throw new Error('INVALID_USERNAME');
+		}
+	
+		if (password != null && passwordHash == null) {
+			// Validate password
+			if (!this.userEntityService.validatePassword(password)) {
+				throw new Error('INVALID_PASSWORD');
+			}
+	
+			// Generate hash of password
+			const salt = await bcrypt.genSalt(8);
+			hash = await bcrypt.hash(password, salt);
+		}
+	
+		// Generate secret
+		const secret = generateUserToken();
+	
+		// Check username duplication
+		if (await this.usersRepository.findOneBy({ usernameLower: username.toLowerCase(), host: IsNull() })) {
+			throw new Error('DUPLICATED_USERNAME');
+		}
+	
+		// Check deleted username duplication
+		if (await this.usedUsernamesRepository.findOneBy({ username: username.toLowerCase() })) {
+			throw new Error('USED_USERNAME');
+		}
+	
+		const keyPair = await new Promise<string[]>((res, rej) =>
+			generateKeyPair('rsa', {
+				modulusLength: 4096,
+				publicKeyEncoding: {
+					type: 'spki',
+					format: 'pem',
+				},
+				privateKeyEncoding: {
+					type: 'pkcs8',
+					format: 'pem',
+					cipher: undefined,
+					passphrase: undefined,
+				},
+			} as any, (err, publicKey, privateKey) =>
+				err ? rej(err) : res([publicKey, privateKey]),
+			));
+	
+		let account!: User;
+	
+		// Start transaction
+		await this.db.transaction(async transactionalEntityManager => {
+			const exist = await transactionalEntityManager.findOneBy(User, {
+				usernameLower: username.toLowerCase(),
+				host: IsNull(),
+			});
+	
+			if (exist) throw new Error(' the username is already used');
+	
+			account = await transactionalEntityManager.save(new User({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				username: username,
+				usernameLower: username.toLowerCase(),
+				host: this.utilityService.toPunyNullable(host),
+				token: secret,
+				isAdmin: (await this.usersRepository.countBy({
+					host: IsNull(),
+				})) === 0,
+			}));
+	
+			await transactionalEntityManager.save(new UserKeypair({
+				publicKey: keyPair[0],
+				privateKey: keyPair[1],
+				userId: account.id,
+			}));
+	
+			await transactionalEntityManager.save(new UserProfile({
+				userId: account.id,
+				autoAcceptFollowed: true,
+				password: hash,
+			}));
+	
+			await transactionalEntityManager.save(new UsedUsername({
+				createdAt: new Date(),
+				username: username.toLowerCase(),
+			}));
+		});
+	
+		this.usersChart.update(account, true);
+	
+		return { account, secret };
+	}
+}
+
diff --git a/packages/backend/src/core/TwoFactorAuthenticationService.ts b/packages/backend/src/core/TwoFactorAuthenticationService.ts
new file mode 100644
index 0000000000..be31534c02
--- /dev/null
+++ b/packages/backend/src/core/TwoFactorAuthenticationService.ts
@@ -0,0 +1,439 @@
+import * as crypto from 'node:crypto';
+import { Inject, Injectable } from '@nestjs/common';
+import * as jsrsasign from 'jsrsasign';
+import { DI } from '@/di-symbols.js';
+import { UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+
+const ECC_PRELUDE = Buffer.from([0x04]);
+const NULL_BYTE = Buffer.from([0]);
+const PEM_PRELUDE = Buffer.from(
+	'3059301306072a8648ce3d020106082a8648ce3d030107034200',
+	'hex',
+);
+
+// Android Safetynet attestations are signed with this cert:
+const GSR2 = `-----BEGIN CERTIFICATE-----
+MIIDujCCAqKgAwIBAgILBAAAAAABD4Ym5g0wDQYJKoZIhvcNAQEFBQAwTDEgMB4G
+A1UECxMXR2xvYmFsU2lnbiBSb290IENBIC0gUjIxEzARBgNVBAoTCkdsb2JhbFNp
+Z24xEzARBgNVBAMTCkdsb2JhbFNpZ24wHhcNMDYxMjE1MDgwMDAwWhcNMjExMjE1
+MDgwMDAwWjBMMSAwHgYDVQQLExdHbG9iYWxTaWduIFJvb3QgQ0EgLSBSMjETMBEG
+A1UEChMKR2xvYmFsU2lnbjETMBEGA1UEAxMKR2xvYmFsU2lnbjCCASIwDQYJKoZI
+hvcNAQEBBQADggEPADCCAQoCggEBAKbPJA6+Lm8omUVCxKs+IVSbC9N/hHD6ErPL
+v4dfxn+G07IwXNb9rfF73OX4YJYJkhD10FPe+3t+c4isUoh7SqbKSaZeqKeMWhG8
+eoLrvozps6yWJQeXSpkqBy+0Hne/ig+1AnwblrjFuTosvNYSuetZfeLQBoZfXklq
+tTleiDTsvHgMCJiEbKjNS7SgfQx5TfC4LcshytVsW33hoCmEofnTlEnLJGKRILzd
+C9XZzPnqJworc5HGnRusyMvo4KD0L5CLTfuwNhv2GXqF4G3yYROIXJ/gkwpRl4pa
+zq+r1feqCapgvdzZX99yqWATXgAByUr6P6TqBwMhAo6CygPCm48CAwEAAaOBnDCB
+mTAOBgNVHQ8BAf8EBAMCAQYwDwYDVR0TAQH/BAUwAwEB/zAdBgNVHQ4EFgQUm+IH
+V2ccHsBqBt5ZtJot39wZhi4wNgYDVR0fBC8wLTAroCmgJ4YlaHR0cDovL2NybC5n
+bG9iYWxzaWduLm5ldC9yb290LXIyLmNybDAfBgNVHSMEGDAWgBSb4gdXZxwewGoG
+3lm0mi3f3BmGLjANBgkqhkiG9w0BAQUFAAOCAQEAmYFThxxol4aR7OBKuEQLq4Gs
+J0/WwbgcQ3izDJr86iw8bmEbTUsp9Z8FHSbBuOmDAGJFtqkIk7mpM0sYmsL4h4hO
+291xNBrBVNpGP+DTKqttVCL1OmLNIG+6KYnX3ZHu01yiPqFbQfXf5WRDLenVOavS
+ot+3i9DAgBkcRcAtjOj4LaR0VknFBbVPFd5uRHg5h6h+u/N5GJG79G+dwfCMNYxd
+AfvDbbnvRG15RjF+Cv6pgsH/76tuIMRQyV+dTZsXjAzlAcmgQWpzU/qlULRuJQ/7
+TBj0/VLZjmmx6BEP3ojY+x1J96relc8geMJgEtslQIxq/H5COEBkEveegeGTLg==
+-----END CERTIFICATE-----\n`;
+
+function base64URLDecode(source: string) {
+	return Buffer.from(source.replace(/\-/g, '+').replace(/_/g, '/'), 'base64');
+}
+
+function getCertSubject(certificate: string) {
+	const subjectCert = new jsrsasign.X509();
+	subjectCert.readCertPEM(certificate);
+
+	const subjectString = subjectCert.getSubjectString();
+	const subjectFields = subjectString.slice(1).split('/');
+
+	const fields = {} as Record<string, string>;
+	for (const field of subjectFields) {
+		const eqIndex = field.indexOf('=');
+		fields[field.substring(0, eqIndex)] = field.substring(eqIndex + 1);
+	}
+
+	return fields;
+}
+
+function verifyCertificateChain(certificates: string[]) {
+	let valid = true;
+
+	for (let i = 0; i < certificates.length; i++) {
+		const Cert = certificates[i];
+		const certificate = new jsrsasign.X509();
+		certificate.readCertPEM(Cert);
+
+		const CACert = i + 1 >= certificates.length ? Cert : certificates[i + 1];
+
+		const certStruct = jsrsasign.ASN1HEX.getTLVbyList(certificate.hex!, 0, [0]);
+		const algorithm = certificate.getSignatureAlgorithmField();
+		const signatureHex = certificate.getSignatureValueHex();
+
+		// Verify against CA
+		const Signature = new jsrsasign.KJUR.crypto.Signature({ alg: algorithm });
+		Signature.init(CACert);
+		Signature.updateHex(certStruct);
+		valid = valid && !!Signature.verify(signatureHex); // true if CA signed the certificate
+	}
+
+	return valid;
+}
+
+function PEMString(pemBuffer: Buffer, type = 'CERTIFICATE') {
+	if (pemBuffer.length === 65 && pemBuffer[0] === 0x04) {
+		pemBuffer = Buffer.concat([PEM_PRELUDE, pemBuffer], 91);
+		type = 'PUBLIC KEY';
+	}
+	const cert = pemBuffer.toString('base64');
+
+	const keyParts = [];
+	const max = Math.ceil(cert.length / 64);
+	let start = 0;
+	for (let i = 0; i < max; i++) {
+		keyParts.push(cert.substring(start, start + 64));
+		start += 64;
+	}
+
+	return (
+		`-----BEGIN ${type}-----\n` +
+		keyParts.join('\n') +
+		`\n-----END ${type}-----\n`
+	);
+}
+
+@Injectable()
+export class TwoFactorAuthenticationService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+	) {
+	}
+
+	public hash(data: Buffer) {
+		return crypto
+			.createHash('sha256')
+			.update(data)
+			.digest();
+	}
+
+	public verifySignin({
+		publicKey,
+		authenticatorData,
+		clientDataJSON,
+		clientData,
+		signature,
+		challenge,
+	}: {
+		publicKey: Buffer,
+		authenticatorData: Buffer,
+		clientDataJSON: Buffer,
+		clientData: any,
+		signature: Buffer,
+		challenge: string
+	}) {
+		if (clientData.type !== 'webauthn.get') {
+			throw new Error('type is not webauthn.get');
+		}
+	
+		if (this.hash(clientData.challenge).toString('hex') !== challenge) {
+			throw new Error('challenge mismatch');
+		}
+		if (clientData.origin !== this.config.scheme + '://' + this.config.host) {
+			throw new Error('origin mismatch');
+		}
+	
+		const verificationData = Buffer.concat(
+			[authenticatorData, this.hash(clientDataJSON)],
+			32 + authenticatorData.length,
+		);
+	
+		return crypto
+			.createVerify('SHA256')
+			.update(verificationData)
+			.verify(PEMString(publicKey), signature);
+	}
+
+	public getProcedures() {
+		return {
+			none: {
+				verify({ publicKey }: { publicKey: Map<number, Buffer> }) {
+					const negTwo = publicKey.get(-2);
+		
+					if (!negTwo || negTwo.length !== 32) {
+						throw new Error('invalid or no -2 key given');
+					}
+					const negThree = publicKey.get(-3);
+					if (!negThree || negThree.length !== 32) {
+						throw new Error('invalid or no -3 key given');
+					}
+		
+					const publicKeyU2F = Buffer.concat(
+						[ECC_PRELUDE, negTwo, negThree],
+						1 + 32 + 32,
+					);
+		
+					return {
+						publicKey: publicKeyU2F,
+						valid: true,
+					};
+				},
+			},
+			'android-key': {
+				verify({
+					attStmt,
+					authenticatorData,
+					clientDataHash,
+					publicKey,
+					rpIdHash,
+					credentialId,
+				}: {
+					attStmt: any,
+					authenticatorData: Buffer,
+					clientDataHash: Buffer,
+					publicKey: Map<number, any>;
+					rpIdHash: Buffer,
+					credentialId: Buffer,
+				}) {
+					if (attStmt.alg !== -7) {
+						throw new Error('alg mismatch');
+					}
+		
+					const verificationData = Buffer.concat([
+						authenticatorData,
+						clientDataHash,
+					]);
+		
+					const attCert: Buffer = attStmt.x5c[0];
+		
+					const negTwo = publicKey.get(-2);
+		
+					if (!negTwo || negTwo.length !== 32) {
+						throw new Error('invalid or no -2 key given');
+					}
+					const negThree = publicKey.get(-3);
+					if (!negThree || negThree.length !== 32) {
+						throw new Error('invalid or no -3 key given');
+					}
+		
+					const publicKeyData = Buffer.concat(
+						[ECC_PRELUDE, negTwo, negThree],
+						1 + 32 + 32,
+					);
+		
+					if (!attCert.equals(publicKeyData)) {
+						throw new Error('public key mismatch');
+					}
+		
+					const isValid = crypto
+						.createVerify('SHA256')
+						.update(verificationData)
+						.verify(PEMString(attCert), attStmt.sig);
+		
+					// TODO: Check 'attestationChallenge' field in extension of cert matches hash(clientDataJSON)
+		
+					return {
+						valid: isValid,
+						publicKey: publicKeyData,
+					};
+				},
+			},
+			// what a stupid attestation
+			'android-safetynet': {
+				verify: ({
+					attStmt,
+					authenticatorData,
+					clientDataHash,
+					publicKey,
+					rpIdHash,
+					credentialId,
+				}: {
+					attStmt: any,
+					authenticatorData: Buffer,
+					clientDataHash: Buffer,
+					publicKey: Map<number, any>;
+					rpIdHash: Buffer,
+					credentialId: Buffer,
+				}) => {
+					const verificationData = this.hash(
+						Buffer.concat([authenticatorData, clientDataHash]),
+					);
+		
+					const jwsParts = attStmt.response.toString('utf-8').split('.');
+		
+					const header = JSON.parse(base64URLDecode(jwsParts[0]).toString('utf-8'));
+					const response = JSON.parse(
+						base64URLDecode(jwsParts[1]).toString('utf-8'),
+					);
+					const signature = jwsParts[2];
+		
+					if (!verificationData.equals(Buffer.from(response.nonce, 'base64'))) {
+						throw new Error('invalid nonce');
+					}
+		
+					const certificateChain = header.x5c
+						.map((key: any) => PEMString(key))
+						.concat([GSR2]);
+		
+					if (getCertSubject(certificateChain[0]).CN !== 'attest.android.com') {
+						throw new Error('invalid common name');
+					}
+		
+					if (!verifyCertificateChain(certificateChain)) {
+						throw new Error('Invalid certificate chain!');
+					}
+		
+					const signatureBase = Buffer.from(
+						jwsParts[0] + '.' + jwsParts[1],
+						'utf-8',
+					);
+		
+					const valid = crypto
+						.createVerify('sha256')
+						.update(signatureBase)
+						.verify(certificateChain[0], base64URLDecode(signature));
+		
+					const negTwo = publicKey.get(-2);
+		
+					if (!negTwo || negTwo.length !== 32) {
+						throw new Error('invalid or no -2 key given');
+					}
+					const negThree = publicKey.get(-3);
+					if (!negThree || negThree.length !== 32) {
+						throw new Error('invalid or no -3 key given');
+					}
+		
+					const publicKeyData = Buffer.concat(
+						[ECC_PRELUDE, negTwo, negThree],
+						1 + 32 + 32,
+					);
+					return {
+						valid,
+						publicKey: publicKeyData,
+					};
+				},
+			},
+			packed: {
+				verify({
+					attStmt,
+					authenticatorData,
+					clientDataHash,
+					publicKey,
+					rpIdHash,
+					credentialId,
+				}: {
+					attStmt: any,
+					authenticatorData: Buffer,
+					clientDataHash: Buffer,
+					publicKey: Map<number, any>;
+					rpIdHash: Buffer,
+					credentialId: Buffer,
+				}) {
+					const verificationData = Buffer.concat([
+						authenticatorData,
+						clientDataHash,
+					]);
+		
+					if (attStmt.x5c) {
+						const attCert = attStmt.x5c[0];
+		
+						const validSignature = crypto
+							.createVerify('SHA256')
+							.update(verificationData)
+							.verify(PEMString(attCert), attStmt.sig);
+		
+						const negTwo = publicKey.get(-2);
+		
+						if (!negTwo || negTwo.length !== 32) {
+							throw new Error('invalid or no -2 key given');
+						}
+						const negThree = publicKey.get(-3);
+						if (!negThree || negThree.length !== 32) {
+							throw new Error('invalid or no -3 key given');
+						}
+		
+						const publicKeyData = Buffer.concat(
+							[ECC_PRELUDE, negTwo, negThree],
+							1 + 32 + 32,
+						);
+		
+						return {
+							valid: validSignature,
+							publicKey: publicKeyData,
+						};
+					} else if (attStmt.ecdaaKeyId) {
+						// https://fidoalliance.org/specs/fido-v2.0-id-20180227/fido-ecdaa-algorithm-v2.0-id-20180227.html#ecdaa-verify-operation
+						throw new Error('ECDAA-Verify is not supported');
+					} else {
+						if (attStmt.alg !== -7) throw new Error('alg mismatch');
+		
+						throw new Error('self attestation is not supported');
+					}
+				},
+			},
+		
+			'fido-u2f': {
+				verify({
+					attStmt,
+					authenticatorData,
+					clientDataHash,
+					publicKey,
+					rpIdHash,
+					credentialId,
+				}: {
+					attStmt: any,
+					authenticatorData: Buffer,
+					clientDataHash: Buffer,
+					publicKey: Map<number, any>,
+					rpIdHash: Buffer,
+					credentialId: Buffer
+				}) {
+					const x5c: Buffer[] = attStmt.x5c;
+					if (x5c.length !== 1) {
+						throw new Error('x5c length does not match expectation');
+					}
+		
+					const attCert = x5c[0];
+		
+					// TODO: make sure attCert is an Elliptic Curve (EC) public key over the P-256 curve
+		
+					const negTwo: Buffer = publicKey.get(-2);
+		
+					if (!negTwo || negTwo.length !== 32) {
+						throw new Error('invalid or no -2 key given');
+					}
+					const negThree: Buffer = publicKey.get(-3);
+					if (!negThree || negThree.length !== 32) {
+						throw new Error('invalid or no -3 key given');
+					}
+		
+					const publicKeyU2F = Buffer.concat(
+						[ECC_PRELUDE, negTwo, negThree],
+						1 + 32 + 32,
+					);
+		
+					const verificationData = Buffer.concat([
+						NULL_BYTE,
+						rpIdHash,
+						clientDataHash,
+						credentialId,
+						publicKeyU2F,
+					]);
+		
+					const validSignature = crypto
+						.createVerify('SHA256')
+						.update(verificationData)
+						.verify(PEMString(attCert), attStmt.sig);
+		
+					return {
+						valid: validSignature,
+						publicKey: publicKeyU2F,
+					};
+				},
+			},
+		};
+	}
+}
diff --git a/packages/backend/src/core/UserBlockingService.ts b/packages/backend/src/core/UserBlockingService.ts
new file mode 100644
index 0000000000..a9396fcbba
--- /dev/null
+++ b/packages/backend/src/core/UserBlockingService.ts
@@ -0,0 +1,199 @@
+
+import { Inject, Injectable } from '@nestjs/common';
+import { IdService } from '@/core/IdService.js';
+import type { CacheableUser, User } from '@/models/entities/User.js';
+import type { Blocking } from '@/models/entities/Blocking.js';
+import { QueueService } from '@/core/QueueService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import PerUserFollowingChart from '@/core/chart/charts/per-user-following.js';
+import { DI } from '@/di-symbols.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+import { WebhookService } from './WebhookService.js';
+import { ApRendererService } from './remote/activitypub/ApRendererService.js';
+
+@Injectable()
+export class UserBlockingService {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		@Inject(DI.followRequestsRepository)
+		private followRequestsRepository: FollowRequestsRepository,
+
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		@Inject(DI.userListsRepository)
+		private userListsRepository: UserListsRepository,
+
+		@Inject(DI.userListJoiningsRepository)
+		private userListJoiningsRepository: UserListJoiningsRepository,
+
+		private userEntityService: UserEntityService,
+		private idService: IdService,
+		private queueService: QueueService,
+		private globalEventServie: GlobalEventService,
+		private webhookService: WebhookService,
+		private apRendererService: ApRendererService,
+		private perUserFollowingChart: PerUserFollowingChart,
+	) {
+	}
+
+	public async block(blocker: User, blockee: User) {
+		await Promise.all([
+			this.#cancelRequest(blocker, blockee),
+			this.#cancelRequest(blockee, blocker),
+			this.#unFollow(blocker, blockee),
+			this.#unFollow(blockee, blocker),
+			this.#removeFromList(blockee, blocker),
+		]);
+
+		const blocking = {
+			id: this.idService.genId(),
+			createdAt: new Date(),
+			blocker,
+			blockerId: blocker.id,
+			blockee,
+			blockeeId: blockee.id,
+		} as Blocking;
+
+		await this.blockingsRepository.insert(blocking);
+
+		if (this.userEntityService.isLocalUser(blocker) && this.userEntityService.isRemoteUser(blockee)) {
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderBlock(blocking));
+			this.queueService.deliver(blocker, content, blockee.inbox);
+		}
+	}
+
+	async #cancelRequest(follower: User, followee: User) {
+		const request = await this.followRequestsRepository.findOneBy({
+			followeeId: followee.id,
+			followerId: follower.id,
+		});
+
+		if (request == null) {
+			return;
+		}
+
+		await this.followRequestsRepository.delete({
+			followeeId: followee.id,
+			followerId: follower.id,
+		});
+
+		if (this.userEntityService.isLocalUser(followee)) {
+			this.userEntityService.pack(followee, followee, {
+				detail: true,
+			}).then(packed => this.globalEventServie.publishMainStream(followee.id, 'meUpdated', packed));
+		}
+
+		if (this.userEntityService.isLocalUser(follower)) {
+			this.userEntityService.pack(followee, follower, {
+				detail: true,
+			}).then(async packed => {
+				this.globalEventServie.publishUserEvent(follower.id, 'unfollow', packed);
+				this.globalEventServie.publishMainStream(follower.id, 'unfollow', packed);
+
+				const webhooks = (await this.webhookService.getActiveWebhooks()).filter(x => x.userId === follower.id && x.on.includes('unfollow'));
+				for (const webhook of webhooks) {
+					this.queueService.webhookDeliver(webhook, 'unfollow', {
+						user: packed,
+					});
+				}
+			});
+		}
+
+		// リモートにフォローリクエストをしていたらUndoFollow送信
+		if (this.userEntityService.isLocalUser(follower) && this.userEntityService.isRemoteUser(followee)) {
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderUndo(this.apRendererService.renderFollow(follower, followee), follower));
+			this.queueService.deliver(follower, content, followee.inbox);
+		}
+
+		// リモートからフォローリクエストを受けていたらReject送信
+		if (this.userEntityService.isRemoteUser(follower) && this.userEntityService.isLocalUser(followee)) {
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderReject(this.apRendererService.renderFollow(follower, followee, request.requestId!), followee));
+			this.queueService.deliver(followee, content, follower.inbox);
+		}
+	}
+
+	async #unFollow(follower: User, followee: User) {
+		const following = await this.followingsRepository.findOneBy({
+			followerId: follower.id,
+			followeeId: followee.id,
+		});
+
+		if (following == null) {
+			return;
+		}
+
+		await Promise.all([
+			this.followingsRepository.delete(following.id),
+			this.usersRepository.decrement({ id: follower.id }, 'followingCount', 1),
+			this.usersRepository.decrement({ id: followee.id }, 'followersCount', 1),
+			this.perUserFollowingChart.update(follower, followee, false),
+		]);
+
+		// Publish unfollow event
+		if (this.userEntityService.isLocalUser(follower)) {
+			this.userEntityService.pack(followee, follower, {
+				detail: true,
+			}).then(async packed => {
+				this.globalEventServie.publishUserEvent(follower.id, 'unfollow', packed);
+				this.globalEventServie.publishMainStream(follower.id, 'unfollow', packed);
+
+				const webhooks = (await this.webhookService.getActiveWebhooks()).filter(x => x.userId === follower.id && x.on.includes('unfollow'));
+				for (const webhook of webhooks) {
+					this.queueService.webhookDeliver(webhook, 'unfollow', {
+						user: packed,
+					});
+				}
+			});
+		}
+
+		// リモートにフォローをしていたらUndoFollow送信
+		if (this.userEntityService.isLocalUser(follower) && this.userEntityService.isRemoteUser(followee)) {
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderUndo(this.apRendererService.renderFollow(follower, followee), follower));
+			this.queueService.deliver(follower, content, followee.inbox);
+		}
+	}
+
+	async #removeFromList(listOwner: User, user: User) {
+		const userLists = await this.userListsRepository.findBy({
+			userId: listOwner.id,
+		});
+
+		for (const userList of userLists) {
+			await this.userListJoiningsRepository.delete({
+				userListId: userList.id,
+				userId: user.id,
+			});
+		}
+	}
+
+	public async unblock(blocker: CacheableUser, blockee: CacheableUser) {
+		const blocking = await this.blockingsRepository.findOneBy({
+			blockerId: blocker.id,
+			blockeeId: blockee.id,
+		});
+	
+		if (blocking == null) {
+			logger.warn('ブロック解除がリクエストされましたがブロックしていませんでした');
+			return;
+		}
+	
+		// Since we already have the blocker and blockee, we do not need to fetch
+		// them in the query above and can just manually insert them here.
+		blocking.blocker = blocker;
+		blocking.blockee = blockee;
+	
+		await this.blockingsRepository.delete(blocking.id);
+	
+		// deliver if remote bloking
+		if (this.userEntityService.isLocalUser(blocker) && this.userEntityService.isRemoteUser(blockee)) {
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderUndo(this.apRendererService.renderBlock(blocking), blocker));
+			this.queueService.deliver(blocker, content, blockee.inbox);
+		}
+	}	
+}
diff --git a/packages/backend/src/core/UserCacheService.ts b/packages/backend/src/core/UserCacheService.ts
new file mode 100644
index 0000000000..8212abf7bb
--- /dev/null
+++ b/packages/backend/src/core/UserCacheService.ts
@@ -0,0 +1,74 @@
+import { Inject, Injectable } from '@nestjs/common';
+import Redis from 'ioredis';
+import { UsersRepository } from '@/models/index.js';
+import { Cache } from '@/misc/cache.js';
+import type { CacheableLocalUser, CacheableUser, ILocalUser } from '@/models/entities/User.js';
+import { DI } from '@/di-symbols.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+import type { OnApplicationShutdown } from '@nestjs/common';
+
+@Injectable()
+export class UserCacheService implements OnApplicationShutdown {
+	public userByIdCache: Cache<CacheableUser>;
+	public localUserByNativeTokenCache: Cache<CacheableLocalUser | null>;
+	public localUserByIdCache: Cache<CacheableLocalUser>;
+	public uriPersonCache: Cache<CacheableUser | null>;
+
+	constructor(
+		@Inject(DI.redisSubscriber)
+		private redisSubscriber: Redis.Redis,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+		this.onMessage = this.onMessage.bind(this);
+
+		this.userByIdCache = new Cache<CacheableUser>(Infinity);
+		this.localUserByNativeTokenCache = new Cache<CacheableLocalUser | null>(Infinity);
+		this.localUserByIdCache = new Cache<CacheableLocalUser>(Infinity);
+		this.uriPersonCache = new Cache<CacheableUser | null>(Infinity);
+
+		this.redisSubscriber.on('message', this.onMessage);
+	}
+
+	private async onMessage(_, data) {
+		const obj = JSON.parse(data);
+
+		if (obj.channel === 'internal') {
+			const { type, body } = obj.message;
+			switch (type) {
+				case 'userChangeSuspendedState':
+				case 'userChangeSilencedState':
+				case 'userChangeModeratorState':
+				case 'remoteUserUpdated': {
+					const user = await this.usersRepository.findOneByOrFail({ id: body.id });
+					this.userByIdCache.set(user.id, user);
+					for (const [k, v] of this.uriPersonCache.cache.entries()) {
+						if (v.value?.id === user.id) {
+							this.uriPersonCache.set(k, user);
+						}
+					}
+					if (this.userEntityService.isLocalUser(user)) {
+						this.localUserByNativeTokenCache.set(user.token, user);
+						this.localUserByIdCache.set(user.id, user);
+					}
+					break;
+				}
+				case 'userTokenRegenerated': {
+					const user = await this.usersRepository.findOneByOrFail({ id: body.id }) as ILocalUser;
+					this.localUserByNativeTokenCache.delete(body.oldToken);
+					this.localUserByNativeTokenCache.set(body.newToken, user);
+					break;
+				}
+				default:
+					break;
+			}
+		}
+	}
+
+	public onApplicationShutdown(signal?: string | undefined) {
+		this.redisSubscriber.off('message', this.onMessage);
+	}
+}
diff --git a/packages/backend/src/core/UserFollowingService.ts b/packages/backend/src/core/UserFollowingService.ts
new file mode 100644
index 0000000000..6aae5a6b99
--- /dev/null
+++ b/packages/backend/src/core/UserFollowingService.ts
@@ -0,0 +1,574 @@
+import { Inject, Injectable } from '@nestjs/common';
+import type { CacheableUser, ILocalUser, IRemoteUser, User } from '@/models/entities/User.js';
+import { IdentifiableError } from '@/misc/identifiable-error.js';
+import { QueueService } from '@/core/QueueService.js';
+import PerUserFollowingChart from '@/core/chart/charts/per-user-following.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { IdService } from '@/core/IdService.js';
+import { isDuplicateKeyValueError } from '@/misc/is-duplicate-key-value-error.js';
+import type { Packed } from '@/misc/schema.js';
+import InstanceChart from '@/core/chart/charts/instance.js';
+import { FederatedInstanceService } from '@/core/FederatedInstanceService.js';
+import { WebhookService } from '@/core/WebhookService.js';
+import { CreateNotificationService } from '@/core/CreateNotificationService.js';
+import { DI } from '@/di-symbols.js';
+import Logger from '../logger.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+import { ApRendererService } from './remote/activitypub/ApRendererService.js';
+
+const logger = new Logger('following/create');
+
+type Local = ILocalUser | {
+	id: ILocalUser['id'];
+	host: ILocalUser['host'];
+	uri: ILocalUser['uri']
+};
+type Remote = IRemoteUser | {
+	id: IRemoteUser['id'];
+	host: IRemoteUser['host'];
+	uri: IRemoteUser['uri'];
+	inbox: IRemoteUser['inbox'];
+};
+type Both = Local | Remote;
+
+@Injectable()
+export class UserFollowingService {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		@Inject(DI.followRequestsRepository)
+		private followRequestsRepository: FollowRequestsRepository,
+
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
+
+		private userEntityService: UserEntityService,
+		private idService: IdService,
+		private queueService: QueueService,
+		private globalEventServie: GlobalEventService,
+		private createNotificationService: CreateNotificationService,
+		private federatedInstanceService: FederatedInstanceService,
+		private webhookService: WebhookService,
+		private apRendererService: ApRendererService,
+		private perUserFollowingChart: PerUserFollowingChart,
+		private instanceChart: InstanceChart,
+	) {
+	}
+
+	public async follow(_follower: { id: User['id'] }, _followee: { id: User['id'] }, requestId?: string): Promise<void> {
+		const [follower, followee] = await Promise.all([
+			this.usersRepository.findOneByOrFail({ id: _follower.id }),
+			this.usersRepository.findOneByOrFail({ id: _followee.id }),
+		]);
+
+		// check blocking
+		const [blocking, blocked] = await Promise.all([
+			this.blockingsRepository.findOneBy({
+				blockerId: follower.id,
+				blockeeId: followee.id,
+			}),
+			this.blockingsRepository.findOneBy({
+				blockerId: followee.id,
+				blockeeId: follower.id,
+			}),
+		]);
+
+		if (this.userEntityService.isRemoteUser(follower) && this.userEntityService.isLocalUser(followee) && blocked) {
+		// リモートフォローを受けてブロックしていた場合は、エラーにするのではなくRejectを送り返しておしまい。
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderReject(this.apRendererService.renderFollow(follower, followee, requestId), followee));
+			this.queueService.deliver(followee, content, follower.inbox);
+			return;
+		} else if (this.userEntityService.isRemoteUser(follower) && this.userEntityService.isLocalUser(followee) && blocking) {
+		// リモートフォローを受けてブロックされているはずの場合だったら、ブロック解除しておく。
+			await this.blockingsRepository.delete(blocking.id);
+		} else {
+		// それ以外は単純に例外
+			if (blocking != null) throw new IdentifiableError('710e8fb0-b8c3-4922-be49-d5d93d8e6a6e', 'blocking');
+			if (blocked != null) throw new IdentifiableError('3338392a-f764-498d-8855-db939dcf8c48', 'blocked');
+		}
+
+		const followeeProfile = await this.userProfilesRepository.findOneByOrFail({ userId: followee.id });
+
+		// フォロー対象が鍵アカウントである or
+		// フォロワーがBotであり、フォロー対象がBotからのフォローに慎重である or
+		// フォロワーがローカルユーザーであり、フォロー対象がリモートユーザーである
+		// 上記のいずれかに当てはまる場合はすぐフォローせずにフォローリクエストを発行しておく
+		if (followee.isLocked || (followeeProfile.carefulBot && follower.isBot) || (this.userEntityService.isLocalUser(follower) && this.userEntityService.isRemoteUser(followee))) {
+			let autoAccept = false;
+
+			// 鍵アカウントであっても、既にフォローされていた場合はスルー
+			const following = await this.followingsRepository.findOneBy({
+				followerId: follower.id,
+				followeeId: followee.id,
+			});
+			if (following) {
+				autoAccept = true;
+			}
+
+			// フォローしているユーザーは自動承認オプション
+			if (!autoAccept && (this.userEntityService.isLocalUser(followee) && followeeProfile.autoAcceptFollowed)) {
+				const followed = await this.followingsRepository.findOneBy({
+					followerId: followee.id,
+					followeeId: follower.id,
+				});
+
+				if (followed) autoAccept = true;
+			}
+
+			if (!autoAccept) {
+				await this.createFollowRequest(follower, followee, requestId);
+				return;
+			}
+		}
+
+		await this.#insertFollowingDoc(followee, follower);
+
+		if (this.userEntityService.isRemoteUser(follower) && this.userEntityService.isLocalUser(followee)) {
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderAccept(this.apRendererService.renderFollow(follower, followee, requestId), followee));
+			this.queueService.deliver(followee, content, follower.inbox);
+		}
+	}
+
+	async #insertFollowingDoc(
+		followee: {
+			id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']; sharedInbox: User['sharedInbox']
+		},
+		follower: {
+			id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']; sharedInbox: User['sharedInbox']
+		},
+	): Promise<void> {
+		if (follower.id === followee.id) return;
+	
+		let alreadyFollowed = false as boolean;
+	
+		await this.followingsRepository.insert({
+			id: this.idService.genId(),
+			createdAt: new Date(),
+			followerId: follower.id,
+			followeeId: followee.id,
+	
+			// 非正規化
+			followerHost: follower.host,
+			followerInbox: this.userEntityService.isRemoteUser(follower) ? follower.inbox : null,
+			followerSharedInbox: this.userEntityService.isRemoteUser(follower) ? follower.sharedInbox : null,
+			followeeHost: followee.host,
+			followeeInbox: this.userEntityService.isRemoteUser(followee) ? followee.inbox : null,
+			followeeSharedInbox: this.userEntityService.isRemoteUser(followee) ? followee.sharedInbox : null,
+		}).catch(err => {
+			if (isDuplicateKeyValueError(err) && this.userEntityService.isRemoteUser(follower) && this.userEntityService.isLocalUser(followee)) {
+				logger.info(`Insert duplicated ignore. ${follower.id} => ${followee.id}`);
+				alreadyFollowed = true;
+			} else {
+				throw err;
+			}
+		});
+	
+		const req = await this.followRequestsRepository.findOneBy({
+			followeeId: followee.id,
+			followerId: follower.id,
+		});
+	
+		if (req) {
+			await this.followRequestsRepository.delete({
+				followeeId: followee.id,
+				followerId: follower.id,
+			});
+	
+			// 通知を作成
+			this.createNotificationService.createNotification(follower.id, 'followRequestAccepted', {
+				notifierId: followee.id,
+			});
+		}
+	
+		if (alreadyFollowed) return;
+	
+		//#region Increment counts
+		await Promise.all([
+			this.usersRepository.increment({ id: follower.id }, 'followingCount', 1),
+			this.usersRepository.increment({ id: followee.id }, 'followersCount', 1),
+		]);
+		//#endregion
+	
+		//#region Update instance stats
+		if (this.userEntityService.isRemoteUser(follower) && this.userEntityService.isLocalUser(followee)) {
+			this.federatedInstanceService.registerOrFetchInstanceDoc(follower.host).then(i => {
+				this.instancesRepository.increment({ id: i.id }, 'followingCount', 1);
+				this.instanceChart.updateFollowing(i.host, true);
+			});
+		} else if (this.userEntityService.isLocalUser(follower) && this.userEntityService.isRemoteUser(followee)) {
+			this.federatedInstanceService.registerOrFetchInstanceDoc(followee.host).then(i => {
+				this.instancesRepository.increment({ id: i.id }, 'followersCount', 1);
+				this.instanceChart.updateFollowers(i.host, true);
+			});
+		}
+		//#endregion
+	
+		this.perUserFollowingChart.update(follower, followee, true);
+	
+		// Publish follow event
+		if (this.userEntityService.isLocalUser(follower)) {
+			this.userEntityService.pack(followee.id, follower, {
+				detail: true,
+			}).then(async packed => {
+				this.globalEventServie.publishUserEvent(follower.id, 'follow', packed as Packed<'UserDetailedNotMe'>);
+				this.globalEventServie.publishMainStream(follower.id, 'follow', packed as Packed<'UserDetailedNotMe'>);
+	
+				const webhooks = (await this.webhookService.getActiveWebhooks()).filter(x => x.userId === follower.id && x.on.includes('follow'));
+				for (const webhook of webhooks) {
+					this.queueService.webhookDeliver(webhook, 'follow', {
+						user: packed,
+					});
+				}
+			});
+		}
+	
+		// Publish followed event
+		if (this.userEntityService.isLocalUser(followee)) {
+			this.userEntityService.pack(follower.id, followee).then(async packed => {
+				this.globalEventServie.publishMainStream(followee.id, 'followed', packed);
+	
+				const webhooks = (await this.webhookService.getActiveWebhooks()).filter(x => x.userId === followee.id && x.on.includes('followed'));
+				for (const webhook of webhooks) {
+					this.queueService.webhookDeliver(webhook, 'followed', {
+						user: packed,
+					});
+				}
+			});
+	
+			// 通知を作成
+			this.createNotificationService.createNotification(followee.id, 'follow', {
+				notifierId: follower.id,
+			});
+		}
+	}
+
+	public async unfollow(
+		follower: {
+			id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']; sharedInbox: User['sharedInbox'];
+		},
+		followee: {
+			id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']; sharedInbox: User['sharedInbox'];
+		},
+		silent = false,
+	): Promise<void> {
+		const following = await this.followingsRepository.findOneBy({
+			followerId: follower.id,
+			followeeId: followee.id,
+		});
+	
+		if (following == null) {
+			logger.warn('フォロー解除がリクエストされましたがフォローしていませんでした');
+			return;
+		}
+	
+		await this.followingsRepository.delete(following.id);
+	
+		this.#decrementFollowing(follower, followee);
+	
+		// Publish unfollow event
+		if (!silent && this.userEntityService.isLocalUser(follower)) {
+			this.userEntityService.pack(followee.id, follower, {
+				detail: true,
+			}).then(async packed => {
+				this.globalEventServie.publishUserEvent(follower.id, 'unfollow', packed);
+				this.globalEventServie.publishMainStream(follower.id, 'unfollow', packed);
+	
+				const webhooks = (await this.webhookService.getActiveWebhooks()).filter(x => x.userId === follower.id && x.on.includes('unfollow'));
+				for (const webhook of webhooks) {
+					this.queueService.webhookDeliver(webhook, 'unfollow', {
+						user: packed,
+					});
+				}
+			});
+		}
+	
+		if (this.userEntityService.isLocalUser(follower) && this.userEntityService.isRemoteUser(followee)) {
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderUndo(this.apRendererService.renderFollow(follower, followee), follower));
+			this.queueService.deliver(follower, content, followee.inbox);
+		}
+	
+		if (this.userEntityService.isLocalUser(followee) && this.userEntityService.isRemoteUser(follower)) {
+			// local user has null host
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderReject(this.apRendererService.renderFollow(follower, followee), followee));
+			this.queueService.deliver(followee, content, follower.inbox);
+		}
+	}
+	
+	async #decrementFollowing(
+		follower: {id: User['id']; host: User['host']; },
+		followee: { id: User['id']; host: User['host']; },
+	): Promise<void> {
+		//#region Decrement following / followers counts
+		await Promise.all([
+			this.usersRepository.decrement({ id: follower.id }, 'followingCount', 1),
+			this.usersRepository.decrement({ id: followee.id }, 'followersCount', 1),
+		]);
+		//#endregion
+	
+		//#region Update instance stats
+		if (this.userEntityService.isRemoteUser(follower) && this.userEntityService.isLocalUser(followee)) {
+			this.federatedInstanceService.registerOrFetchInstanceDoc(follower.host).then(i => {
+				this.instancesRepository.decrement({ id: i.id }, 'followingCount', 1);
+				this.instanceChart.updateFollowing(i.host, false);
+			});
+		} else if (this.userEntityService.isLocalUser(follower) && this.userEntityService.isRemoteUser(followee)) {
+			this.federatedInstanceService.registerOrFetchInstanceDoc(followee.host).then(i => {
+				this.instancesRepository.decrement({ id: i.id }, 'followersCount', 1);
+				this.instanceChart.updateFollowers(i.host, false);
+			});
+		}
+		//#endregion
+	
+		this.perUserFollowingChart.update(follower, followee, false);
+	}
+
+	public async createFollowRequest(
+		follower: {
+			id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']; sharedInbox: User['sharedInbox'];
+		},
+		followee: {
+			id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']; sharedInbox: User['sharedInbox'];
+		},
+		requestId?: string,
+	): Promise<void> {
+		if (follower.id === followee.id) return;
+	
+		// check blocking
+		const [blocking, blocked] = await Promise.all([
+			this.blockingsRepository.findOneBy({
+				blockerId: follower.id,
+				blockeeId: followee.id,
+			}),
+			this.blockingsRepository.findOneBy({
+				blockerId: followee.id,
+				blockeeId: follower.id,
+			}),
+		]);
+	
+		if (blocking != null) throw new Error('blocking');
+		if (blocked != null) throw new Error('blocked');
+	
+		const followRequest = await this.followRequestsRepository.insert({
+			id: this.idService.genId(),
+			createdAt: new Date(),
+			followerId: follower.id,
+			followeeId: followee.id,
+			requestId,
+	
+			// 非正規化
+			followerHost: follower.host,
+			followerInbox: this.userEntityService.isRemoteUser(follower) ? follower.inbox : undefined,
+			followerSharedInbox: this.userEntityService.isRemoteUser(follower) ? follower.sharedInbox : undefined,
+			followeeHost: followee.host,
+			followeeInbox: this.userEntityService.isRemoteUser(followee) ? followee.inbox : undefined,
+			followeeSharedInbox: this.userEntityService.isRemoteUser(followee) ? followee.sharedInbox : undefined,
+		}).then(x => this.followRequestsRepository.findOneByOrFail(x.identifiers[0]));
+	
+		// Publish receiveRequest event
+		if (this.userEntityService.isLocalUser(followee)) {
+			this.userEntityService.pack(follower.id, followee).then(packed => this.globalEventServie.publishMainStream(followee.id, 'receiveFollowRequest', packed));
+	
+			this.userEntityService.pack(followee.id, followee, {
+				detail: true,
+			}).then(packed => this.globalEventServie.publishMainStream(followee.id, 'meUpdated', packed));
+	
+			// 通知を作成
+			this.createNotificationService.createNotification(followee.id, 'receiveFollowRequest', {
+				notifierId: follower.id,
+				followRequestId: followRequest.id,
+			});
+		}
+	
+		if (this.userEntityService.isLocalUser(follower) && this.userEntityService.isRemoteUser(followee)) {
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderFollow(follower, followee));
+			this.queueService.deliver(follower, content, followee.inbox);
+		}
+	}
+
+	public async cancelFollowRequest(
+		followee: {
+			id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']
+		},
+		follower: {
+			id: User['id']; host: User['host']; uri: User['host']
+		},
+	): Promise<void> {
+		if (this.userEntityService.isRemoteUser(followee)) {
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderUndo(this.apRendererService.renderFollow(follower, followee), follower));
+	
+			if (this.userEntityService.isLocalUser(follower)) { // 本来このチェックは不要だけどTSに怒られるので
+				this.queueService.deliver(follower, content, followee.inbox);
+			}
+		}
+	
+		const request = await this.followRequestsRepository.findOneBy({
+			followeeId: followee.id,
+			followerId: follower.id,
+		});
+	
+		if (request == null) {
+			throw new IdentifiableError('17447091-ce07-46dd-b331-c1fd4f15b1e7', 'request not found');
+		}
+	
+		await this.followRequestsRepository.delete({
+			followeeId: followee.id,
+			followerId: follower.id,
+		});
+	
+		this.userEntityService.pack(followee.id, followee, {
+			detail: true,
+		}).then(packed => this.globalEventServie.publishMainStream(followee.id, 'meUpdated', packed));
+	}
+
+	public async acceptFollowRequest(
+		followee: {
+			id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']; sharedInbox: User['sharedInbox'];
+		},
+		follower: CacheableUser,
+	): Promise<void> {
+		const request = await this.followRequestsRepository.findOneBy({
+			followeeId: followee.id,
+			followerId: follower.id,
+		});
+	
+		if (request == null) {
+			throw new IdentifiableError('8884c2dd-5795-4ac9-b27e-6a01d38190f9', 'No follow request.');
+		}
+	
+		await this.#insertFollowingDoc(followee, follower);
+	
+		if (this.userEntityService.isRemoteUser(follower) && this.userEntityService.isLocalUser(followee)) {
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderAccept(this.apRendererService.renderFollow(follower, followee, request.requestId!), followee));
+			this.queueService.deliver(followee, content, follower.inbox);
+		}
+	
+		this.userEntityService.pack(followee.id, followee, {
+			detail: true,
+		}).then(packed => this.globalEventServie.publishMainStream(followee.id, 'meUpdated', packed));
+	}
+
+	public async acceptAllFollowRequests(
+		user: {
+			id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']; sharedInbox: User['sharedInbox'];
+		},
+	): Promise<void> {
+		const requests = await this.followRequestsRepository.findBy({
+			followeeId: user.id,
+		});
+	
+		for (const request of requests) {
+			const follower = await this.usersRepository.findOneByOrFail({ id: request.followerId });
+			this.acceptFollowRequest(user, follower);
+		}
+	}
+	
+	/**
+	 * API following/request/reject
+	 */
+	public async rejectFollowRequest(user: Local, follower: Both): Promise<void> {
+		if (this.userEntityService.isRemoteUser(follower)) {
+			this.#deliverReject(user, follower);
+		}
+
+		await this.#removeFollowRequest(user, follower);
+
+		if (this.userEntityService.isLocalUser(follower)) {
+			this.#publishUnfollow(user, follower);
+		}
+	}
+
+	/**
+	 * API following/reject
+	 */
+	public async rejectFollow(user: Local, follower: Both): Promise<void> {
+		if (this.userEntityService.isRemoteUser(follower)) {
+			this.#deliverReject(user, follower);
+		}
+
+		await this.#removeFollow(user, follower);
+
+		if (this.userEntityService.isLocalUser(follower)) {
+			this.#publishUnfollow(user, follower);
+		}
+	}
+
+	/**
+	 * AP Reject/Follow
+	 */
+	public async remoteReject(actor: Remote, follower: Local): Promise<void> {
+		await this.#removeFollowRequest(actor, follower);
+		await this.#removeFollow(actor, follower);
+		this.#publishUnfollow(actor, follower);
+	}
+
+	/**
+	 * Remove follow request record
+	 */
+	async #removeFollowRequest(followee: Both, follower: Both): Promise<void> {
+		const request = await this.followRequestsRepository.findOneBy({
+			followeeId: followee.id,
+			followerId: follower.id,
+		});
+
+		if (!request) return;
+
+		await this.followRequestsRepository.delete(request.id);
+	}
+
+	/**
+	 * Remove follow record
+	 */
+	async #removeFollow(followee: Both, follower: Both): Promise<void> {
+		const following = await this.followingsRepository.findOneBy({
+			followeeId: followee.id,
+			followerId: follower.id,
+		});
+
+		if (!following) return;
+
+		await this.followingsRepository.delete(following.id);
+		this.#decrementFollowing(follower, followee);
+	}
+
+	/**
+	 * Deliver Reject to remote
+	 */
+	async #deliverReject(followee: Local, follower: Remote): Promise<void> {
+		const request = await this.followRequestsRepository.findOneBy({
+			followeeId: followee.id,
+			followerId: follower.id,
+		});
+
+		const content = this.apRendererService.renderActivity(this.apRendererService.renderReject(this.apRendererService.renderFollow(follower, followee, request?.requestId ?? undefined), followee));
+		this.queueService.deliver(followee, content, follower.inbox);
+	}
+
+	/**
+	 * Publish unfollow to local
+	 */
+	async #publishUnfollow(followee: Both, follower: Local): Promise<void> {
+		const packedFollowee = await this.userEntityService.pack(followee.id, follower, {
+			detail: true,
+		});
+
+		this.globalEventServie.publishUserEvent(follower.id, 'unfollow', packedFollowee);
+		this.globalEventServie.publishMainStream(follower.id, 'unfollow', packedFollowee);
+
+		const webhooks = (await this.webhookService.getActiveWebhooks()).filter(x => x.userId === follower.id && x.on.includes('unfollow'));
+		for (const webhook of webhooks) {
+			this.queueService.webhookDeliver(webhook, 'unfollow', {
+				user: packedFollowee,
+			});
+		}
+	}
+}
diff --git a/packages/backend/src/core/UserKeypairStoreService.ts b/packages/backend/src/core/UserKeypairStoreService.ts
new file mode 100644
index 0000000000..f093d2ea91
--- /dev/null
+++ b/packages/backend/src/core/UserKeypairStoreService.ts
@@ -0,0 +1,22 @@
+import { Inject, Injectable } from '@nestjs/common';
+import type { User } from '@/models/entities/User.js';
+import { UserKeypairsRepository } from '@/models/index.js';
+import { Cache } from '@/misc/cache.js';
+import type { UserKeypair } from '@/models/entities/UserKeypair.js';
+import { DI } from '@/di-symbols.js';
+
+@Injectable()
+export class UserKeypairStoreService {
+	#cache: Cache<UserKeypair>;
+
+	constructor(
+		@Inject(DI.userKeypairsRepository)
+		private userKeypairsRepository: UserKeypairsRepository,
+	) {
+		this.#cache = new Cache<UserKeypair>(Infinity);
+	}
+
+	public async getUserKeypair(userId: User['id']): Promise<UserKeypair> {
+		return await this.#cache.fetch(userId, () => this.userKeypairsRepository.findOneByOrFail({ userId: userId }));
+	}
+}
diff --git a/packages/backend/src/core/UserListService.ts b/packages/backend/src/core/UserListService.ts
new file mode 100644
index 0000000000..03113f042a
--- /dev/null
+++ b/packages/backend/src/core/UserListService.ts
@@ -0,0 +1,48 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { UserListJoiningsRepository, UsersRepository } from '@/models/index.js';
+import type { User } from '@/models/entities/User.js';
+import type { UserList } from '@/models/entities/UserList.js';
+import type { UserListJoining } from '@/models/entities/UserListJoining.js';
+import { IdService } from '@/core/IdService.js';
+import { UserFollowingService } from '@/core/UserFollowingService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+import { ProxyAccountService } from './ProxyAccountService.js';
+
+@Injectable()
+export class UserListService {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userListJoiningsRepository)
+		private userListJoiningsRepository: UserListJoiningsRepository,
+
+		private userEntityService: UserEntityService,
+		private idService: IdService,
+		private userFollowingService: UserFollowingService,
+		private globalEventServie: GlobalEventService,
+		private proxyAccountService: ProxyAccountService,
+	) {
+	}
+
+	public async push(target: User, list: UserList) {
+		await this.userListJoiningsRepository.insert({
+			id: this.idService.genId(),
+			createdAt: new Date(),
+			userId: target.id,
+			userListId: list.id,
+		} as UserListJoining);
+	
+		this.globalEventServie.publishUserListStream(list.id, 'userAdded', await this.userEntityService.pack(target));
+	
+		// このインスタンス内にこのリモートユーザーをフォローしているユーザーがいなくても投稿を受け取るためにダミーのユーザーがフォローしたということにする
+		if (this.userEntityService.isRemoteUser(target)) {
+			const proxy = await this.proxyAccountService.fetch();
+			if (proxy) {
+				this.userFollowingService.follow(proxy, target);
+			}
+		}
+	}
+}
diff --git a/packages/backend/src/core/UserMutingService.ts b/packages/backend/src/core/UserMutingService.ts
new file mode 100644
index 0000000000..9146360df1
--- /dev/null
+++ b/packages/backend/src/core/UserMutingService.ts
@@ -0,0 +1,32 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository, MutingsRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { QueueService } from '@/core/QueueService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import type { User } from '@/models/entities/User.js';
+import { DI } from '@/di-symbols.js';
+
+@Injectable()
+export class UserMutingService {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		private idService: IdService,
+		private queueService: QueueService,
+		private globalEventServie: GlobalEventService,
+	) {
+	}
+
+	public async mute(user: User, target: User): Promise<void> {
+		await this.mutingsRepository.insert({
+			id: this.idService.genId(),
+			createdAt: new Date(),
+			muterId: user.id,
+			muteeId: target.id,
+		});
+	}
+}
diff --git a/packages/backend/src/core/UserSuspendService.ts b/packages/backend/src/core/UserSuspendService.ts
new file mode 100644
index 0000000000..068341cb2c
--- /dev/null
+++ b/packages/backend/src/core/UserSuspendService.ts
@@ -0,0 +1,88 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { Not, IsNull } from 'typeorm';
+import { FollowingsRepository, UsersRepository } from '@/models/index.js';
+import type { User } from '@/models/entities/User.js';
+import { QueueService } from '@/core/QueueService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import { ApRendererService } from './remote/activitypub/ApRendererService.js';
+import { UserEntityService } from './entities/UserEntityService.js';
+
+@Injectable()
+export class UserSuspendService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		private userEntityService: UserEntityService,
+		private queueService: QueueService,
+		private globalEventService: GlobalEventService,
+		private apRendererService: ApRendererService,
+	) {
+	}
+
+	public async doPostSuspend(user: { id: User['id']; host: User['host'] }): Promise<void> {
+		this.globalEventService.publishInternalEvent('userChangeSuspendedState', { id: user.id, isSuspended: true });
+	
+		if (this.userEntityService.isLocalUser(user)) {
+			// 知り得る全SharedInboxにDelete配信
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderDelete(`${this.config.url}/users/${user.id}`, user));
+	
+			const queue: string[] = [];
+	
+			const followings = await this.followingsRepository.find({
+				where: [
+					{ followerSharedInbox: Not(IsNull()) },
+					{ followeeSharedInbox: Not(IsNull()) },
+				],
+				select: ['followerSharedInbox', 'followeeSharedInbox'],
+			});
+	
+			const inboxes = followings.map(x => x.followerSharedInbox ?? x.followeeSharedInbox);
+	
+			for (const inbox of inboxes) {
+				if (inbox != null && !queue.includes(inbox)) queue.push(inbox);
+			}
+	
+			for (const inbox of queue) {
+				this.queueService.deliver(user, content, inbox);
+			}
+		}
+	}
+
+	public async doPostUnsuspend(user: User): Promise<void> {
+		this.globalEventService.publishInternalEvent('userChangeSuspendedState', { id: user.id, isSuspended: false });
+	
+		if (this.userEntityService.isLocalUser(user)) {
+			// 知り得る全SharedInboxにUndo Delete配信
+			const content = this.apRendererService.renderActivity(this.apRendererService.renderUndo(this.apRendererService.renderDelete(`${this.config.url}/users/${user.id}`, user), user));
+	
+			const queue: string[] = [];
+	
+			const followings = await this.followingsRepository.find({
+				where: [
+					{ followerSharedInbox: Not(IsNull()) },
+					{ followeeSharedInbox: Not(IsNull()) },
+				],
+				select: ['followerSharedInbox', 'followeeSharedInbox'],
+			});
+	
+			const inboxes = followings.map(x => x.followerSharedInbox ?? x.followeeSharedInbox);
+	
+			for (const inbox of inboxes) {
+				if (inbox != null && !queue.includes(inbox)) queue.push(inbox);
+			}
+	
+			for (const inbox of queue) {
+				this.queueService.deliver(user as any, content, inbox);
+			}
+		}
+	}
+}
diff --git a/packages/backend/src/core/UtilityService.ts b/packages/backend/src/core/UtilityService.ts
new file mode 100644
index 0000000000..ba03dfc069
--- /dev/null
+++ b/packages/backend/src/core/UtilityService.ts
@@ -0,0 +1,37 @@
+import { URL } from 'node:url';
+import { toASCII } from 'punycode';
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+
+@Injectable()
+export class UtilityService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+	) {
+	}
+
+	public getFullApAccount(username: string, host: string | null): string {
+		return host ? `${username}@${this.toPuny(host)}` : `${username}@${this.toPuny(this.config.host)}`;
+	}
+
+	public isSelfHost(host: string | null): boolean {
+		if (host == null) return true;
+		return this.toPuny(this.config.host) === this.toPuny(host);
+	}
+
+	public extractDbHost(uri: string): string {
+		const url = new URL(uri);
+		return this.toPuny(url.hostname);
+	}
+
+	public toPuny(host: string): string {
+		return toASCII(host.toLowerCase());
+	}
+
+	public toPunyNullable(host: string | null | undefined): string | null {
+		if (host == null) return null;
+		return toASCII(host.toLowerCase());
+	}
+}
diff --git a/packages/backend/src/core/VideoProcessingService.ts b/packages/backend/src/core/VideoProcessingService.ts
new file mode 100644
index 0000000000..70b9664c76
--- /dev/null
+++ b/packages/backend/src/core/VideoProcessingService.ts
@@ -0,0 +1,44 @@
+import { Inject, Injectable } from '@nestjs/common';
+import FFmpeg from 'fluent-ffmpeg';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import { ImageProcessingService } from '@/core/ImageProcessingService.js';
+import type { IImage } from '@/core/ImageProcessingService.js';
+import { createTempDir } from '@/misc/create-temp.js';
+
+@Injectable()
+export class VideoProcessingService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private imageProcessingService: ImageProcessingService,
+	) {
+	}
+
+	public async generateVideoThumbnail(source: string): Promise<IImage> {
+		const [dir, cleanup] = await createTempDir();
+	
+		try {
+			await new Promise((res, rej) => {
+				FFmpeg({
+					source,
+				})
+					.on('end', res)
+					.on('error', rej)
+					.screenshot({
+						folder: dir,
+						filename: 'out.png',	// must have .png extension
+						count: 1,
+						timestamps: ['5%'],
+					});
+			});
+	
+			// JPEGに変換 (Webpでもいいが、MastodonはWebpをサポートせず表示できなくなる)
+			return await this.imageProcessingService.convertToJpeg(`${dir}/out.png`, 498, 280);
+		} finally {
+			cleanup();
+		}
+	}
+}
+
diff --git a/packages/backend/src/core/WebhookService.ts b/packages/backend/src/core/WebhookService.ts
new file mode 100644
index 0000000000..3ed615ca0b
--- /dev/null
+++ b/packages/backend/src/core/WebhookService.ts
@@ -0,0 +1,70 @@
+import { Inject, Injectable } from '@nestjs/common';
+import Redis from 'ioredis';
+import { WebhooksRepository } from '@/models/index.js';
+import type { Webhook } from '@/models/entities/Webhook.js';
+import { DI } from '@/di-symbols.js';
+import type { OnApplicationShutdown } from '@nestjs/common';
+
+@Injectable()
+export class WebhookService implements OnApplicationShutdown {
+	#webhooksFetched = false;
+	#webhooks: Webhook[] = [];
+
+	constructor(
+		@Inject(DI.redisSubscriber)
+		private redisSubscriber: Redis.Redis,
+
+		@Inject(DI.webhooksRepository)
+		private webhooksRepository: WebhooksRepository,
+	) {
+		this.onMessage = this.onMessage.bind(this);
+		this.redisSubscriber.on('message', this.onMessage);
+	}
+
+	public async getActiveWebhooks() {
+		if (!this.#webhooksFetched) {
+			this.#webhooks = await this.webhooksRepository.findBy({
+				active: true,
+			});
+			this.#webhooksFetched = true;
+		}
+	
+		return this.#webhooks;
+	}
+
+	private async onMessage(_, data) {
+		const obj = JSON.parse(data);
+
+		if (obj.channel === 'internal') {
+			const { type, body } = obj.message;
+			switch (type) {
+				case 'webhookCreated':
+					if (body.active) {
+						this.#webhooks.push(body);
+					}
+					break;
+				case 'webhookUpdated':
+					if (body.active) {
+						const i = this.#webhooks.findIndex(a => a.id === body.id);
+						if (i > -1) {
+							this.#webhooks[i] = body;
+						} else {
+							this.#webhooks.push(body);
+						}
+					} else {
+						this.#webhooks = this.#webhooks.filter(a => a.id !== body.id);
+					}
+					break;
+				case 'webhookDeleted':
+					this.#webhooks = this.#webhooks.filter(a => a.id !== body.id);
+					break;
+				default:
+					break;
+			}
+		}
+	}
+
+	public onApplicationShutdown(signal?: string | undefined) {
+		this.redisSubscriber.off('message', this.onMessage);
+	}
+}
diff --git a/packages/backend/src/core/chart/ChartManagementService.ts b/packages/backend/src/core/chart/ChartManagementService.ts
new file mode 100644
index 0000000000..2020ca0ca6
--- /dev/null
+++ b/packages/backend/src/core/chart/ChartManagementService.ts
@@ -0,0 +1,59 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { beforeShutdown } from '@/misc/before-shutdown.js';
+
+import FederationChart from './charts/federation.js';
+import NotesChart from './charts/notes.js';
+import UsersChart from './charts/users.js';
+import ActiveUsersChart from './charts/active-users.js';
+import InstanceChart from './charts/instance.js';
+import PerUserNotesChart from './charts/per-user-notes.js';
+import DriveChart from './charts/drive.js';
+import PerUserReactionsChart from './charts/per-user-reactions.js';
+import HashtagChart from './charts/hashtag.js';
+import PerUserFollowingChart from './charts/per-user-following.js';
+import PerUserDriveChart from './charts/per-user-drive.js';
+import ApRequestChart from './charts/ap-request.js';
+
+@Injectable()
+export class ChartManagementService {
+	constructor(
+		private federationChart: FederationChart,
+		private notesChart: NotesChart,
+		private usersChart: UsersChart,
+		private activeUsersChart: ActiveUsersChart,
+		private instanceChart: InstanceChart,
+		private perUserNotesChart: PerUserNotesChart,
+		private driveChart: DriveChart,
+		private perUserReactionsChart: PerUserReactionsChart,
+		private hashtagChart: HashtagChart,
+		private perUserFollowingChart: PerUserFollowingChart,
+		private perUserDriveChart: PerUserDriveChart,
+		private apRequestChart: ApRequestChart,
+	) {}
+
+	public async run() {
+		const charts = [
+			this.federationChart,
+			this.notesChart,
+			this.usersChart,
+			this.activeUsersChart,
+			this.instanceChart,
+			this.perUserNotesChart,
+			this.driveChart,
+			this.perUserReactionsChart,
+			this.hashtagChart,
+			this.perUserFollowingChart,
+			this.perUserDriveChart,
+			this.apRequestChart,
+		];
+		
+		// 20分おきにメモリ情報をDBに書き込み
+		setInterval(() => {
+			for (const chart of charts) {
+				chart.save();
+			}
+		}, 1000 * 60 * 20);
+		
+		beforeShutdown(() => Promise.all(charts.map(chart => chart.save())));
+	}
+}
diff --git a/packages/backend/src/core/chart/charts/active-users.ts b/packages/backend/src/core/chart/charts/active-users.ts
new file mode 100644
index 0000000000..a5d9f166ed
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/active-users.ts
@@ -0,0 +1,54 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import { AppLockService } from '@/core/AppLockService.js';
+import type { User } from '@/models/entities/User.js';
+import { DI } from '@/di-symbols.js';
+import Chart from '../core.js';
+import { name, schema } from './entities/active-users.js';
+import type { KVs } from '../core.js';
+
+const week = 1000 * 60 * 60 * 24 * 7;
+const month = 1000 * 60 * 60 * 24 * 30;
+const year = 1000 * 60 * 60 * 24 * 365;
+
+/**
+ * アクティブユーザーに関するチャート
+ */
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class ActiveUsersChart extends Chart<typeof schema> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		private appLockService: AppLockService,
+	) {
+		super(db, (k) => appLockService.getChartInsertLock(k), name, schema);
+	}
+
+	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	public async read(user: { id: User['id'], host: null, createdAt: User['createdAt'] }): Promise<void> {
+		await this.commit({
+			'read': [user.id],
+			'registeredWithinWeek': (Date.now() - user.createdAt.getTime() < week) ? [user.id] : [],
+			'registeredWithinMonth': (Date.now() - user.createdAt.getTime() < month) ? [user.id] : [],
+			'registeredWithinYear': (Date.now() - user.createdAt.getTime() < year) ? [user.id] : [],
+			'registeredOutsideWeek': (Date.now() - user.createdAt.getTime() > week) ? [user.id] : [],
+			'registeredOutsideMonth': (Date.now() - user.createdAt.getTime() > month) ? [user.id] : [],
+			'registeredOutsideYear': (Date.now() - user.createdAt.getTime() > year) ? [user.id] : [],
+		});
+	}
+
+	public async write(user: { id: User['id'], host: null, createdAt: User['createdAt'] }): Promise<void> {
+		await this.commit({
+			'write': [user.id],
+		});
+	}
+}
diff --git a/packages/backend/src/core/chart/charts/ap-request.ts b/packages/backend/src/core/chart/charts/ap-request.ts
new file mode 100644
index 0000000000..c857cea98c
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/ap-request.ts
@@ -0,0 +1,49 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import { AppLockService } from '@/core/AppLockService.js';
+import { DI } from '@/di-symbols.js';
+import Chart from '../core.js';
+import { name, schema } from './entities/ap-request.js';
+import type { KVs } from '../core.js';
+
+/**
+ * Chart about ActivityPub requests
+ */
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class ApRequestChart extends Chart<typeof schema> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		private appLockService: AppLockService,
+	) {
+		super(db, (k) => appLockService.getChartInsertLock(k), name, schema);
+	}
+
+	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	public async deliverSucc(): Promise<void> {
+		await this.commit({
+			'deliverSucceeded': 1,
+		});
+	}
+
+	public async deliverFail(): Promise<void> {
+		await this.commit({
+			'deliverFailed': 1,
+		});
+	}
+
+	public async inbox(): Promise<void> {
+		await this.commit({
+			'inboxReceived': 1,
+		});
+	}
+}
diff --git a/packages/backend/src/core/chart/charts/drive.ts b/packages/backend/src/core/chart/charts/drive.ts
new file mode 100644
index 0000000000..dd6d002030
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/drive.ts
@@ -0,0 +1,47 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { Not, IsNull, DataSource } from 'typeorm';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import { AppLockService } from '@/core/AppLockService.js';
+import { DI } from '@/di-symbols.js';
+import Chart from '../core.js';
+import { name, schema } from './entities/drive.js';
+import type { KVs } from '../core.js';
+
+/**
+ * ドライブに関するチャート
+ */
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class DriveChart extends Chart<typeof schema> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		private appLockService: AppLockService,
+	) {
+		super(db, (k) => appLockService.getChartInsertLock(k), name, schema);
+	}
+
+	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	public async update(file: DriveFile, isAdditional: boolean): Promise<void> {
+		const fileSizeKb = file.size / 1000;
+		await this.commit(file.userHost === null ? {
+			'local.incCount': isAdditional ? 1 : 0,
+			'local.incSize': isAdditional ? fileSizeKb : 0,
+			'local.decCount': isAdditional ? 0 : 1,
+			'local.decSize': isAdditional ? 0 : fileSizeKb,
+		} : {
+			'remote.incCount': isAdditional ? 1 : 0,
+			'remote.incSize': isAdditional ? fileSizeKb : 0,
+			'remote.decCount': isAdditional ? 0 : 1,
+			'remote.decSize': isAdditional ? 0 : fileSizeKb,
+		});
+	}
+}
diff --git a/packages/backend/src/core/chart/charts/entities/active-users.ts b/packages/backend/src/core/chart/charts/entities/active-users.ts
new file mode 100644
index 0000000000..5767b76f8e
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/entities/active-users.ts
@@ -0,0 +1,17 @@
+import Chart from '../../core.js';
+
+export const name = 'activeUsers';
+
+export const schema = {
+	'readWrite': { intersection: ['read', 'write'], range: 'small' },
+	'read': { uniqueIncrement: true, range: 'small' },
+	'write': { uniqueIncrement: true, range: 'small' },
+	'registeredWithinWeek': { uniqueIncrement: true, range: 'small' },
+	'registeredWithinMonth': { uniqueIncrement: true, range: 'small' },
+	'registeredWithinYear': { uniqueIncrement: true, range: 'small' },
+	'registeredOutsideWeek': { uniqueIncrement: true, range: 'small' },
+	'registeredOutsideMonth': { uniqueIncrement: true, range: 'small' },
+	'registeredOutsideYear': { uniqueIncrement: true, range: 'small' },
+} as const;
+
+export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/core/chart/charts/entities/ap-request.ts b/packages/backend/src/core/chart/charts/entities/ap-request.ts
new file mode 100644
index 0000000000..3a9f3dacfd
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/entities/ap-request.ts
@@ -0,0 +1,11 @@
+import Chart from '../../core.js';
+
+export const name = 'apRequest';
+
+export const schema = {
+	'deliverFailed': { },
+	'deliverSucceeded': { },
+	'inboxReceived': { },
+} as const;
+
+export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/core/chart/charts/entities/drive.ts b/packages/backend/src/core/chart/charts/entities/drive.ts
new file mode 100644
index 0000000000..4bf5bb729e
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/entities/drive.ts
@@ -0,0 +1,16 @@
+import Chart from '../../core.js';
+
+export const name = 'drive';
+
+export const schema = {
+	'local.incCount': {},
+	'local.incSize': {}, // in kilobyte
+	'local.decCount': {},
+	'local.decSize': {}, // in kilobyte
+	'remote.incCount': {},
+	'remote.incSize': {}, // in kilobyte
+	'remote.decCount': {},
+	'remote.decSize': {}, // in kilobyte
+} as const;
+
+export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/core/chart/charts/entities/federation.ts b/packages/backend/src/core/chart/charts/entities/federation.ts
new file mode 100644
index 0000000000..a8466b0b4c
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/entities/federation.ts
@@ -0,0 +1,16 @@
+import Chart from '../../core.js';
+
+export const name = 'federation';
+
+export const schema = {
+	'deliveredInstances': { uniqueIncrement: true, range: 'small' },
+	'inboxInstances': { uniqueIncrement: true, range: 'small' },
+	'stalled': { uniqueIncrement: true, range: 'small' },
+	'sub': { accumulate: true, range: 'small' },
+	'pub': { accumulate: true, range: 'small' },
+	'pubsub': { accumulate: true, range: 'small' },
+	'subActive': { accumulate: true, range: 'small' },
+	'pubActive': { accumulate: true, range: 'small' },
+} as const;
+
+export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/core/chart/charts/entities/hashtag.ts b/packages/backend/src/core/chart/charts/entities/hashtag.ts
new file mode 100644
index 0000000000..4d04039047
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/entities/hashtag.ts
@@ -0,0 +1,10 @@
+import Chart from '../../core.js';
+
+export const name = 'hashtag';
+
+export const schema = {
+	'local.users': { uniqueIncrement: true },
+	'remote.users': { uniqueIncrement: true },
+} as const;
+
+export const entity = Chart.schemaToEntity(name, schema, true);
diff --git a/packages/backend/src/core/chart/charts/entities/instance.ts b/packages/backend/src/core/chart/charts/entities/instance.ts
new file mode 100644
index 0000000000..06962120e2
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/entities/instance.ts
@@ -0,0 +1,32 @@
+import Chart from '../../core.js';
+
+export const name = 'instance';
+
+export const schema = {
+	'requests.failed': { range: 'small' },
+	'requests.succeeded': { range: 'small' },
+	'requests.received': { range: 'small' },
+	'notes.total': { accumulate: true },
+	'notes.inc': {},
+	'notes.dec': {},
+	'notes.diffs.normal': {},
+	'notes.diffs.reply': {},
+	'notes.diffs.renote': {},
+	'notes.diffs.withFile': {},
+	'users.total': { accumulate: true },
+	'users.inc': { range: 'small' },
+	'users.dec': { range: 'small' },
+	'following.total': { accumulate: true },
+	'following.inc': { range: 'small' },
+	'following.dec': { range: 'small' },
+	'followers.total': { accumulate: true },
+	'followers.inc': { range: 'small' },
+	'followers.dec': { range: 'small' },
+	'drive.totalFiles': { accumulate: true },
+	'drive.incFiles': {},
+	'drive.decFiles': {},
+	'drive.incUsage': {}, // in kilobyte
+	'drive.decUsage': {}, // in kilobyte
+} as const;
+
+export const entity = Chart.schemaToEntity(name, schema, true);
diff --git a/packages/backend/src/core/chart/charts/entities/notes.ts b/packages/backend/src/core/chart/charts/entities/notes.ts
new file mode 100644
index 0000000000..9387dbfb2c
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/entities/notes.ts
@@ -0,0 +1,22 @@
+import Chart from '../../core.js';
+
+export const name = 'notes';
+
+export const schema = {
+	'local.total': { accumulate: true },
+	'local.inc': {},
+	'local.dec': {},
+	'local.diffs.normal': {},
+	'local.diffs.reply': {},
+	'local.diffs.renote': {},
+	'local.diffs.withFile': {},
+	'remote.total': { accumulate: true },
+	'remote.inc': {},
+	'remote.dec': {},
+	'remote.diffs.normal': {},
+	'remote.diffs.reply': {},
+	'remote.diffs.renote': {},
+	'remote.diffs.withFile': {},
+} as const;
+
+export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/core/chart/charts/entities/per-user-drive.ts b/packages/backend/src/core/chart/charts/entities/per-user-drive.ts
new file mode 100644
index 0000000000..6111640ea0
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/entities/per-user-drive.ts
@@ -0,0 +1,14 @@
+import Chart from '../../core.js';
+
+export const name = 'perUserDrive';
+
+export const schema = {
+	'totalCount': { accumulate: true },
+	'totalSize': { accumulate: true }, // in kilobyte
+	'incCount': { range: 'small' },
+	'incSize': {}, // in kilobyte
+	'decCount': { range: 'small' },
+	'decSize': {}, // in kilobyte
+} as const;
+
+export const entity = Chart.schemaToEntity(name, schema, true);
diff --git a/packages/backend/src/core/chart/charts/entities/per-user-following.ts b/packages/backend/src/core/chart/charts/entities/per-user-following.ts
new file mode 100644
index 0000000000..4118daa474
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/entities/per-user-following.ts
@@ -0,0 +1,20 @@
+import Chart from '../../core.js';
+
+export const name = 'perUserFollowing';
+
+export const schema = {
+	'local.followings.total': { accumulate: true },
+	'local.followings.inc': { range: 'small' },
+	'local.followings.dec': { range: 'small' },
+	'local.followers.total': { accumulate: true },
+	'local.followers.inc': { range: 'small' },
+	'local.followers.dec': { range: 'small' },
+	'remote.followings.total': { accumulate: true },
+	'remote.followings.inc': { range: 'small' },
+	'remote.followings.dec': { range: 'small' },
+	'remote.followers.total': { accumulate: true },
+	'remote.followers.inc': { range: 'small' },
+	'remote.followers.dec': { range: 'small' },
+} as const;
+
+export const entity = Chart.schemaToEntity(name, schema, true);
diff --git a/packages/backend/src/core/chart/charts/entities/per-user-notes.ts b/packages/backend/src/core/chart/charts/entities/per-user-notes.ts
new file mode 100644
index 0000000000..c1fa174452
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/entities/per-user-notes.ts
@@ -0,0 +1,15 @@
+import Chart from '../../core.js';
+
+export const name = 'perUserNotes';
+
+export const schema = {
+	'total': { accumulate: true },
+	'inc': { range: 'small' },
+	'dec': { range: 'small' },
+	'diffs.normal': { range: 'small' },
+	'diffs.reply': { range: 'small' },
+	'diffs.renote': { range: 'small' },
+	'diffs.withFile': { range: 'small' },
+} as const;
+
+export const entity = Chart.schemaToEntity(name, schema, true);
diff --git a/packages/backend/src/core/chart/charts/entities/per-user-reactions.ts b/packages/backend/src/core/chart/charts/entities/per-user-reactions.ts
new file mode 100644
index 0000000000..5e1a6c7b30
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/entities/per-user-reactions.ts
@@ -0,0 +1,10 @@
+import Chart from '../../core.js';
+
+export const name = 'perUserReaction';
+
+export const schema = {
+	'local.count': { range: 'small' },
+	'remote.count': { range: 'small' },
+} as const;
+
+export const entity = Chart.schemaToEntity(name, schema, true);
diff --git a/packages/backend/src/core/chart/charts/entities/test-grouped.ts b/packages/backend/src/core/chart/charts/entities/test-grouped.ts
new file mode 100644
index 0000000000..66b6e8e864
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/entities/test-grouped.ts
@@ -0,0 +1,11 @@
+import Chart from '../../core.js';
+
+export const name = 'testGrouped';
+
+export const schema = {
+	'foo.total': { accumulate: true },
+	'foo.inc': {},
+	'foo.dec': {},
+} as const;
+
+export const entity = Chart.schemaToEntity(name, schema, true);
diff --git a/packages/backend/src/core/chart/charts/entities/test-intersection.ts b/packages/backend/src/core/chart/charts/entities/test-intersection.ts
new file mode 100644
index 0000000000..a3bdcb367f
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/entities/test-intersection.ts
@@ -0,0 +1,11 @@
+import Chart from '../../core.js';
+
+export const name = 'testIntersection';
+
+export const schema = {
+	'a': { uniqueIncrement: true },
+	'b': { uniqueIncrement: true },
+	'aAndB': { intersection: ['a', 'b'] },
+} as const;
+
+export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/core/chart/charts/entities/test-unique.ts b/packages/backend/src/core/chart/charts/entities/test-unique.ts
new file mode 100644
index 0000000000..b2cfb71b05
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/entities/test-unique.ts
@@ -0,0 +1,9 @@
+import Chart from '../../core.js';
+
+export const name = 'testUnique';
+
+export const schema = {
+	'foo': { uniqueIncrement: true },
+} as const;
+
+export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/core/chart/charts/entities/test.ts b/packages/backend/src/core/chart/charts/entities/test.ts
new file mode 100644
index 0000000000..7cba21e16a
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/entities/test.ts
@@ -0,0 +1,11 @@
+import Chart from '../../core.js';
+
+export const name = 'test';
+
+export const schema = {
+	'foo.total': { accumulate: true },
+	'foo.inc': {},
+	'foo.dec': {},
+} as const;
+
+export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/core/chart/charts/entities/users.ts b/packages/backend/src/core/chart/charts/entities/users.ts
new file mode 100644
index 0000000000..c0b83094ae
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/entities/users.ts
@@ -0,0 +1,14 @@
+import Chart from '../../core.js';
+
+export const name = 'users';
+
+export const schema = {
+	'local.total': { accumulate: true },
+	'local.inc': { range: 'small' },
+	'local.dec': { range: 'small' },
+	'remote.total': { accumulate: true },
+	'remote.inc': { range: 'small' },
+	'remote.dec': { range: 'small' },
+} as const;
+
+export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/core/chart/charts/federation.ts b/packages/backend/src/core/chart/charts/federation.ts
new file mode 100644
index 0000000000..372e0f1fae
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/federation.ts
@@ -0,0 +1,121 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import { FollowingsRepository, InstancesRepository } from '@/models/index.js';
+import { AppLockService } from '@/core/AppLockService.js';
+import { DI } from '@/di-symbols.js';
+import { MetaService } from '@/core/MetaService.js';
+import Chart from '../core.js';
+import { name, schema } from './entities/federation.js';
+import type { KVs } from '../core.js';
+
+/**
+ * フェデレーションに関するチャート
+ */
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class FederationChart extends Chart<typeof schema> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
+
+		private metaService: MetaService,
+		private appLockService: AppLockService,
+	) {
+		super(db, (k) => appLockService.getChartInsertLock(k), name, schema);
+	}
+
+	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
+		return {
+		};
+	}
+
+	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
+		const meta = await this.metaService.fetch();
+
+		const suspendedInstancesQuery = this.instancesRepository.createQueryBuilder('instance')
+			.select('instance.host')
+			.where('instance.isSuspended = true');
+
+		const pubsubSubQuery = this.followingsRepository.createQueryBuilder('f')
+			.select('f.followerHost')
+			.where('f.followerHost IS NOT NULL');
+
+		const subInstancesQuery = this.followingsRepository.createQueryBuilder('f')
+			.select('f.followeeHost')
+			.where('f.followeeHost IS NOT NULL');
+
+		const pubInstancesQuery = this.followingsRepository.createQueryBuilder('f')
+			.select('f.followerHost')
+			.where('f.followerHost IS NOT NULL');
+
+		const [sub, pub, pubsub, subActive, pubActive] = await Promise.all([
+			this.followingsRepository.createQueryBuilder('following')
+				.select('COUNT(DISTINCT following.followeeHost)')
+				.where('following.followeeHost IS NOT NULL')
+				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'following.followeeHost NOT IN (:...blocked)', { blocked: meta.blockedHosts })
+				.andWhere(`following.followeeHost NOT IN (${ suspendedInstancesQuery.getQuery() })`)
+				.getRawOne()
+				.then(x => parseInt(x.count, 10)),
+			this.followingsRepository.createQueryBuilder('following')
+				.select('COUNT(DISTINCT following.followerHost)')
+				.where('following.followerHost IS NOT NULL')
+				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'following.followerHost NOT IN (:...blocked)', { blocked: meta.blockedHosts })
+				.andWhere(`following.followerHost NOT IN (${ suspendedInstancesQuery.getQuery() })`)
+				.getRawOne()
+				.then(x => parseInt(x.count, 10)),
+			this.followingsRepository.createQueryBuilder('following')
+				.select('COUNT(DISTINCT following.followeeHost)')
+				.where('following.followeeHost IS NOT NULL')
+				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'following.followeeHost NOT IN (:...blocked)', { blocked: meta.blockedHosts })
+				.andWhere(`following.followeeHost NOT IN (${ suspendedInstancesQuery.getQuery() })`)
+				.andWhere(`following.followeeHost IN (${ pubsubSubQuery.getQuery() })`)
+				.setParameters(pubsubSubQuery.getParameters())
+				.getRawOne()
+				.then(x => parseInt(x.count, 10)),
+			this.instancesRepository.createQueryBuilder('instance')
+				.select('COUNT(instance.id)')
+				.where(`instance.host IN (${ subInstancesQuery.getQuery() })`)
+				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'instance.host NOT IN (:...blocked)', { blocked: meta.blockedHosts })
+				.andWhere('instance.isSuspended = false')
+				.andWhere('instance.lastCommunicatedAt > :gt', { gt: new Date(Date.now() - (1000 * 60 * 60 * 24 * 30)) })
+				.getRawOne()
+				.then(x => parseInt(x.count, 10)),
+			this.instancesRepository.createQueryBuilder('instance')
+				.select('COUNT(instance.id)')
+				.where(`instance.host IN (${ pubInstancesQuery.getQuery() })`)
+				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : 'instance.host NOT IN (:...blocked)', { blocked: meta.blockedHosts })
+				.andWhere('instance.isSuspended = false')
+				.andWhere('instance.lastCommunicatedAt > :gt', { gt: new Date(Date.now() - (1000 * 60 * 60 * 24 * 30)) })
+				.getRawOne()
+				.then(x => parseInt(x.count, 10)),
+		]);
+
+		return {
+			'sub': sub,
+			'pub': pub,
+			'pubsub': pubsub,
+			'subActive': subActive,
+			'pubActive': pubActive,
+		};
+	}
+
+	public async deliverd(host: string, succeeded: boolean): Promise<void> {
+		await this.commit(succeeded ? {
+			'deliveredInstances': [host],
+		} : {
+			'stalled': [host],
+		});
+	}
+
+	public async inbox(host: string): Promise<void> {
+		await this.commit({
+			'inboxInstances': [host],
+		});
+	}
+}
diff --git a/packages/backend/src/core/chart/charts/hashtag.ts b/packages/backend/src/core/chart/charts/hashtag.ts
new file mode 100644
index 0000000000..66ac0b882b
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/hashtag.ts
@@ -0,0 +1,41 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import type { User } from '@/models/entities/User.js';
+import { AppLockService } from '@/core/AppLockService.js';
+import { DI } from '@/di-symbols.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import Chart from '../core.js';
+import { name, schema } from './entities/hashtag.js';
+import type { KVs } from '../core.js';
+
+/**
+ * ハッシュタグに関するチャート
+ */
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class HashtagChart extends Chart<typeof schema> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		private appLockService: AppLockService,
+		private userEntityService: UserEntityService,
+	) {
+		super(db, (k) => appLockService.getChartInsertLock(k), name, schema, true);
+	}
+
+	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	public async update(hashtag: string, user: { id: User['id'], host: User['host'] }): Promise<void> {
+		await this.commit({
+			'local.users': this.userEntityService.isLocalUser(user) ? [user.id] : [],
+			'remote.users': this.userEntityService.isLocalUser(user) ? [] : [user.id],
+		}, hashtag);
+	}
+}
diff --git a/packages/backend/src/core/chart/charts/instance.ts b/packages/backend/src/core/chart/charts/instance.ts
new file mode 100644
index 0000000000..c43ebeddc1
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/instance.ts
@@ -0,0 +1,127 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import { DriveFilesRepository, FollowingsRepository, UsersRepository, NotesRepository } from '@/models/index.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import type { Note } from '@/models/entities/Note.js';
+import { AppLockService } from '@/core/AppLockService.js';
+import { DI } from '@/di-symbols.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import Chart from '../core.js';
+import { name, schema } from './entities/instance.js';
+import type { KVs } from '../core.js';
+
+/**
+ * インスタンスごとのチャート
+ */
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class InstanceChart extends Chart<typeof schema> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		private utilityService: UtilityService,
+		private appLockService: AppLockService,
+	) {
+		super(db, (k) => appLockService.getChartInsertLock(k), name, schema, true);
+	}
+
+	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {
+		const [
+			notesCount,
+			usersCount,
+			followingCount,
+			followersCount,
+			driveFiles,
+		] = await Promise.all([
+			this.notesRepository.countBy({ userHost: group }),
+			this.usersRepository.countBy({ host: group }),
+			this.followingsRepository.countBy({ followerHost: group }),
+			this.followingsRepository.countBy({ followeeHost: group }),
+			this.driveFilesRepository.countBy({ userHost: group }),
+		]);
+
+		return {
+			'notes.total': notesCount,
+			'users.total': usersCount,
+			'following.total': followingCount,
+			'followers.total': followersCount,
+			'drive.totalFiles': driveFiles,
+		};
+	}
+
+	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	public async requestReceived(host: string): Promise<void> {
+		await this.commit({
+			'requests.received': 1,
+		}, this.utilityService.toPuny(host));
+	}
+
+	public async requestSent(host: string, isSucceeded: boolean): Promise<void> {
+		await this.commit({
+			'requests.succeeded': isSucceeded ? 1 : 0,
+			'requests.failed': isSucceeded ? 0 : 1,
+		}, this.utilityService.toPuny(host));
+	}
+
+	public async newUser(host: string): Promise<void> {
+		await this.commit({
+			'users.total': 1,
+			'users.inc': 1,
+		}, this.utilityService.toPuny(host));
+	}
+
+	public async updateNote(host: string, note: Note, isAdditional: boolean): Promise<void> {
+		await this.commit({
+			'notes.total': isAdditional ? 1 : -1,
+			'notes.inc': isAdditional ? 1 : 0,
+			'notes.dec': isAdditional ? 0 : 1,
+			'notes.diffs.normal': note.replyId == null && note.renoteId == null ? (isAdditional ? 1 : -1) : 0,
+			'notes.diffs.renote': note.renoteId != null ? (isAdditional ? 1 : -1) : 0,
+			'notes.diffs.reply': note.replyId != null ? (isAdditional ? 1 : -1) : 0,
+			'notes.diffs.withFile': note.fileIds.length > 0 ? (isAdditional ? 1 : -1) : 0,
+		}, this.utilityService.toPuny(host));
+	}
+
+	public async updateFollowing(host: string, isAdditional: boolean): Promise<void> {
+		await this.commit({
+			'following.total': isAdditional ? 1 : -1,
+			'following.inc': isAdditional ? 1 : 0,
+			'following.dec': isAdditional ? 0 : 1,
+		}, this.utilityService.toPuny(host));
+	}
+
+	public async updateFollowers(host: string, isAdditional: boolean): Promise<void> {
+		await this.commit({
+			'followers.total': isAdditional ? 1 : -1,
+			'followers.inc': isAdditional ? 1 : 0,
+			'followers.dec': isAdditional ? 0 : 1,
+		}, this.utilityService.toPuny(host));
+	}
+
+	public async updateDrive(file: DriveFile, isAdditional: boolean): Promise<void> {
+		const fileSizeKb = file.size / 1000;
+		await this.commit({
+			'drive.totalFiles': isAdditional ? 1 : -1,
+			'drive.incFiles': isAdditional ? 1 : 0,
+			'drive.incUsage': isAdditional ? fileSizeKb : 0,
+			'drive.decFiles': isAdditional ? 1 : 0,
+			'drive.decUsage': isAdditional ? fileSizeKb : 0,
+		}, file.userHost);
+	}
+}
diff --git a/packages/backend/src/core/chart/charts/notes.ts b/packages/backend/src/core/chart/charts/notes.ts
new file mode 100644
index 0000000000..1597b5727e
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/notes.ts
@@ -0,0 +1,58 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { Not, IsNull, DataSource } from 'typeorm';
+import { NotesRepository } from '@/models/index.js';
+import type { Note } from '@/models/entities/Note.js';
+import { AppLockService } from '@/core/AppLockService.js';
+import { DI } from '@/di-symbols.js';
+import Chart from '../core.js';
+import { name, schema } from './entities/notes.js';
+import type { KVs } from '../core.js';
+
+/**
+ * ノートに関するチャート
+ */
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class NotesChart extends Chart<typeof schema> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		private appLockService: AppLockService,
+	) {
+		super(db, (k) => appLockService.getChartInsertLock(k), name, schema);
+	}
+
+	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
+		const [localCount, remoteCount] = await Promise.all([
+			this.notesRepository.countBy({ userHost: IsNull() }),
+			this.notesRepository.countBy({ userHost: Not(IsNull()) }),
+		]);
+
+		return {
+			'local.total': localCount,
+			'remote.total': remoteCount,
+		};
+	}
+
+	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	public async update(note: Note, isAdditional: boolean): Promise<void> {
+		const prefix = note.userHost === null ? 'local' : 'remote';
+
+		await this.commit({
+			[`${prefix}.total`]: isAdditional ? 1 : -1,
+			[`${prefix}.inc`]: isAdditional ? 1 : 0,
+			[`${prefix}.dec`]: isAdditional ? 0 : 1,
+			[`${prefix}.diffs.normal`]: note.replyId == null && note.renoteId == null ? (isAdditional ? 1 : -1) : 0,
+			[`${prefix}.diffs.renote`]: note.renoteId != null ? (isAdditional ? 1 : -1) : 0,
+			[`${prefix}.diffs.reply`]: note.replyId != null ? (isAdditional ? 1 : -1) : 0,
+			[`${prefix}.diffs.withFile`]: note.fileIds.length > 0 ? (isAdditional ? 1 : -1) : 0,
+		});
+	}
+}
diff --git a/packages/backend/src/core/chart/charts/per-user-drive.ts b/packages/backend/src/core/chart/charts/per-user-drive.ts
new file mode 100644
index 0000000000..181b9a38bb
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/per-user-drive.ts
@@ -0,0 +1,58 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import { DriveFilesRepository } from '@/models/index.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import { AppLockService } from '@/core/AppLockService.js';
+import { DI } from '@/di-symbols.js';
+import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
+import Chart from '../core.js';
+import { name, schema } from './entities/per-user-drive.js';
+import type { KVs } from '../core.js';
+
+/**
+ * ユーザーごとのドライブに関するチャート
+ */
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class PerUserDriveChart extends Chart<typeof schema> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private appLockService: AppLockService,
+		private driveFileEntityService: DriveFileEntityService,
+	) {
+		super(db, (k) => appLockService.getChartInsertLock(k), name, schema, true);
+	}
+
+	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {
+		const [count, size] = await Promise.all([
+			this.driveFilesRepository.countBy({ userId: group }),
+			this.driveFileEntityService.calcDriveUsageOf(group),
+		]);
+
+		return {
+			'totalCount': count,
+			'totalSize': size,
+		};
+	}
+
+	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	public async update(file: DriveFile, isAdditional: boolean): Promise<void> {
+		const fileSizeKb = file.size / 1000;
+		await this.commit({
+			'totalCount': isAdditional ? 1 : -1,
+			'totalSize': isAdditional ? fileSizeKb : -fileSizeKb,
+			'incCount': isAdditional ? 1 : 0,
+			'incSize': isAdditional ? fileSizeKb : 0,
+			'decCount': isAdditional ? 0 : 1,
+			'decSize': isAdditional ? 0 : fileSizeKb,
+		}, file.userId);
+	}
+}
diff --git a/packages/backend/src/core/chart/charts/per-user-following.ts b/packages/backend/src/core/chart/charts/per-user-following.ts
new file mode 100644
index 0000000000..5195723a25
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/per-user-following.ts
@@ -0,0 +1,71 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { Not, IsNull, DataSource } from 'typeorm';
+import type { User } from '@/models/entities/User.js';
+import { AppLockService } from '@/core/AppLockService.js';
+import { DI } from '@/di-symbols.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { FollowingsRepository } from '@/models/index.js';
+import Chart from '../core.js';
+import { name, schema } from './entities/per-user-following.js';
+import type { KVs } from '../core.js';
+
+/**
+ * ユーザーごとのフォローに関するチャート
+ */
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class PerUserFollowingChart extends Chart<typeof schema> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		private appLockService: AppLockService,
+		private userEntityService: UserEntityService,
+	) {
+		super(db, (k) => appLockService.getChartInsertLock(k), name, schema, true);
+	}
+
+	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {
+		const [
+			localFollowingsCount,
+			localFollowersCount,
+			remoteFollowingsCount,
+			remoteFollowersCount,
+		] = await Promise.all([
+			this.followingsRepository.countBy({ followerId: group, followeeHost: IsNull() }),
+			this.followingsRepository.countBy({ followeeId: group, followerHost: IsNull() }),
+			this.followingsRepository.countBy({ followerId: group, followeeHost: Not(IsNull()) }),
+			this.followingsRepository.countBy({ followeeId: group, followerHost: Not(IsNull()) }),
+		]);
+
+		return {
+			'local.followings.total': localFollowingsCount,
+			'local.followers.total': localFollowersCount,
+			'remote.followings.total': remoteFollowingsCount,
+			'remote.followers.total': remoteFollowersCount,
+		};
+	}
+
+	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	public async update(follower: { id: User['id']; host: User['host']; }, followee: { id: User['id']; host: User['host']; }, isFollow: boolean): Promise<void> {
+		const prefixFollower = this.userEntityService.isLocalUser(follower) ? 'local' : 'remote';
+		const prefixFollowee = this.userEntityService.isLocalUser(followee) ? 'local' : 'remote';
+
+		this.commit({
+			[`${prefixFollower}.followings.total`]: isFollow ? 1 : -1,
+			[`${prefixFollower}.followings.inc`]: isFollow ? 1 : 0,
+			[`${prefixFollower}.followings.dec`]: isFollow ? 0 : 1,
+		}, follower.id);
+		this.commit({
+			[`${prefixFollowee}.followers.total`]: isFollow ? 1 : -1,
+			[`${prefixFollowee}.followers.inc`]: isFollow ? 1 : 0,
+			[`${prefixFollowee}.followers.dec`]: isFollow ? 0 : 1,
+		}, followee.id);
+	}
+}
diff --git a/packages/backend/src/core/chart/charts/per-user-notes.ts b/packages/backend/src/core/chart/charts/per-user-notes.ts
new file mode 100644
index 0000000000..6dbe309b7c
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/per-user-notes.ts
@@ -0,0 +1,55 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import type { User } from '@/models/entities/User.js';
+import type { Note } from '@/models/entities/Note.js';
+import { AppLockService } from '@/core/AppLockService.js';
+import { DI } from '@/di-symbols.js';
+import { NotesRepository } from '@/models/index.js';
+import Chart from '../core.js';
+import { name, schema } from './entities/per-user-notes.js';
+import type { KVs } from '../core.js';
+
+/**
+ * ユーザーごとのノートに関するチャート
+ */
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class PerUserNotesChart extends Chart<typeof schema> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		private appLockService: AppLockService,
+	) {
+		super(db, (k) => appLockService.getChartInsertLock(k), name, schema, true);
+	}
+
+	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {
+		const [count] = await Promise.all([
+			this.notesRepository.countBy({ userId: group }),
+		]);
+
+		return {
+			total: count,
+		};
+	}
+
+	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	public async update(user: { id: User['id'] }, note: Note, isAdditional: boolean): Promise<void> {
+		await this.commit({
+			'total': isAdditional ? 1 : -1,
+			'inc': isAdditional ? 1 : 0,
+			'dec': isAdditional ? 0 : 1,
+			'diffs.normal': note.replyId == null && note.renoteId == null ? (isAdditional ? 1 : -1) : 0,
+			'diffs.renote': note.renoteId != null ? (isAdditional ? 1 : -1) : 0,
+			'diffs.reply': note.replyId != null ? (isAdditional ? 1 : -1) : 0,
+			'diffs.withFile': note.fileIds.length > 0 ? (isAdditional ? 1 : -1) : 0,
+		}, user.id);
+	}
+}
diff --git a/packages/backend/src/core/chart/charts/per-user-reactions.ts b/packages/backend/src/core/chart/charts/per-user-reactions.ts
new file mode 100644
index 0000000000..73a58656f8
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/per-user-reactions.ts
@@ -0,0 +1,42 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import type { User } from '@/models/entities/User.js';
+import type { Note } from '@/models/entities/Note.js';
+import { AppLockService } from '@/core/AppLockService.js';
+import { DI } from '@/di-symbols.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import Chart from '../core.js';
+import { name, schema } from './entities/per-user-reactions.js';
+import type { KVs } from '../core.js';
+
+/**
+ * ユーザーごとのリアクションに関するチャート
+ */
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class PerUserReactionsChart extends Chart<typeof schema> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		private appLockService: AppLockService,
+		private userEntityService: UserEntityService,
+	) {
+		super(db, (k) => appLockService.getChartInsertLock(k), name, schema, true);
+	}
+
+	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	public async update(user: { id: User['id'], host: User['host'] }, note: Note): Promise<void> {
+		const prefix = this.userEntityService.isLocalUser(user) ? 'local' : 'remote';
+		this.commit({
+			[`${prefix}.count`]: 1,
+		}, note.userId);
+	}
+}
diff --git a/packages/backend/src/core/chart/charts/test-grouped.ts b/packages/backend/src/core/chart/charts/test-grouped.ts
new file mode 100644
index 0000000000..e6cbe89790
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/test-grouped.ts
@@ -0,0 +1,46 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import { AppLockService } from '@/core/AppLockService.js';
+import { DI } from '@/di-symbols.js';
+import Chart from '../core.js';
+import { name, schema } from './entities/test-grouped.js';
+import type { KVs } from '../core.js';
+
+/**
+ * For testing
+ */
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class TestGroupedChart extends Chart<typeof schema> {
+	private total = {} as Record<string, number>;
+
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		private appLockService: AppLockService,
+	) {
+		super(db, (k) => appLockService.getChartInsertLock(k), name, schema, true);
+	}
+
+	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {
+		return {
+			'foo.total': this.total[group],
+		};
+	}
+
+	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	public async increment(group: string): Promise<void> {
+		if (this.total[group] == null) this.total[group] = 0;
+
+		this.total[group]++;
+
+		await this.commit({
+			'foo.total': 1,
+			'foo.inc': 1,
+		}, group);
+	}
+}
diff --git a/packages/backend/src/core/chart/charts/test-intersection.ts b/packages/backend/src/core/chart/charts/test-intersection.ts
new file mode 100644
index 0000000000..f2f17c8de6
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/test-intersection.ts
@@ -0,0 +1,43 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import { AppLockService } from '@/core/AppLockService.js';
+import { DI } from '@/di-symbols.js';
+import Chart from '../core.js';
+import { name, schema } from './entities/test-intersection.js';
+import type { KVs } from '../core.js';
+
+/**
+ * For testing
+ */
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class TestIntersectionChart extends Chart<typeof schema> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		private appLockService: AppLockService,
+	) {
+		super(db, (k) => appLockService.getChartInsertLock(k), name, schema);
+	}
+
+	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	public async addA(key: string): Promise<void> {
+		await this.commit({
+			a: [key],
+		});
+	}
+
+	public async addB(key: string): Promise<void> {
+		await this.commit({
+			b: [key],
+		});
+	}
+}
diff --git a/packages/backend/src/core/chart/charts/test-unique.ts b/packages/backend/src/core/chart/charts/test-unique.ts
new file mode 100644
index 0000000000..ce01594520
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/test-unique.ts
@@ -0,0 +1,37 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import { AppLockService } from '@/core/AppLockService.js';
+import { DI } from '@/di-symbols.js';
+import Chart from '../core.js';
+import { name, schema } from './entities/test-unique.js';
+import type { KVs } from '../core.js';
+
+/**
+ * For testing
+ */
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class TestUniqueChart extends Chart<typeof schema> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		private appLockService: AppLockService,
+	) {
+		super(db, (k) => appLockService.getChartInsertLock(k), name, schema);
+	}
+
+	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	public async uniqueIncrement(key: string): Promise<void> {
+		await this.commit({
+			foo: [key],
+		});
+	}
+}
diff --git a/packages/backend/src/core/chart/charts/test.ts b/packages/backend/src/core/chart/charts/test.ts
new file mode 100644
index 0000000000..bd59b7aa63
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/test.ts
@@ -0,0 +1,53 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import { AppLockService } from '@/core/AppLockService.js';
+import { DI } from '@/di-symbols.js';
+import Chart from '../core.js';
+import { name, schema } from './entities/test.js';
+import type { KVs } from '../core.js';
+
+/**
+ * For testing
+ */
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class TestChart extends Chart<typeof schema> {
+	public total = 0; // publicにするのはテストのため
+
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		private appLockService: AppLockService,
+	) {
+		super(db, (k) => appLockService.getChartInsertLock(k), name, schema);
+	}
+
+	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
+		return {
+			'foo.total': this.total,
+		};
+	}
+
+	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	public async increment(): Promise<void> {
+		this.total++;
+
+		await this.commit({
+			'foo.total': 1,
+			'foo.inc': 1,
+		});
+	}
+
+	public async decrement(): Promise<void> {
+		this.total--;
+
+		await this.commit({
+			'foo.total': -1,
+			'foo.dec': 1,
+		});
+	}
+}
diff --git a/packages/backend/src/core/chart/charts/users.ts b/packages/backend/src/core/chart/charts/users.ts
new file mode 100644
index 0000000000..4fdddcc0a3
--- /dev/null
+++ b/packages/backend/src/core/chart/charts/users.ts
@@ -0,0 +1,56 @@
+import { Injectable, Inject } from '@nestjs/common';
+import { Not, IsNull, DataSource } from 'typeorm';
+import type { User } from '@/models/entities/User.js';
+import { AppLockService } from '@/core/AppLockService.js';
+import { DI } from '@/di-symbols.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { UsersRepository } from '@/models/index.js';
+import Chart from '../core.js';
+import { name, schema } from './entities/users.js';
+import type { KVs } from '../core.js';
+
+/**
+ * ユーザー数に関するチャート
+ */
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class UsersChart extends Chart<typeof schema> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private appLockService: AppLockService,
+		private userEntityService: UserEntityService,
+	) {
+		super(db, (k) => appLockService.getChartInsertLock(k), name, schema);
+	}
+
+	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
+		const [localCount, remoteCount] = await Promise.all([
+			this.usersRepository.countBy({ host: IsNull() }),
+			this.usersRepository.countBy({ host: Not(IsNull()) }),
+		]);
+
+		return {
+			'local.total': localCount,
+			'remote.total': remoteCount,
+		};
+	}
+
+	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
+		return {};
+	}
+
+	public async update(user: { id: User['id'], host: User['host'] }, isAdditional: boolean): Promise<void> {
+		const prefix = this.userEntityService.isLocalUser(user) ? 'local' : 'remote';
+
+		await this.commit({
+			[`${prefix}.total`]: isAdditional ? 1 : -1,
+			[`${prefix}.inc`]: isAdditional ? 1 : 0,
+			[`${prefix}.dec`]: isAdditional ? 0 : 1,
+		});
+	}
+}
diff --git a/packages/backend/src/core/chart/core.ts b/packages/backend/src/core/chart/core.ts
new file mode 100644
index 0000000000..1933e80c7b
--- /dev/null
+++ b/packages/backend/src/core/chart/core.ts
@@ -0,0 +1,679 @@
+/**
+ * チャートエンジン
+ *
+ * Tests located in test/chart
+ */
+
+import * as nestedProperty from 'nested-property';
+import { EntitySchema, LessThan, Between } from 'typeorm';
+import { dateUTC, isTimeSame, isTimeBefore, subtractTime, addTime } from '@/misc/prelude/time.js';
+import Logger from '@/logger.js';
+import type { Repository, DataSource } from 'typeorm';
+
+const logger = new Logger('chart', 'white', process.env.NODE_ENV !== 'test');
+
+const columnPrefix = '___' as const;
+const uniqueTempColumnPrefix = 'unique_temp___' as const;
+const columnDot = '_' as const;
+
+type Schema = Record<string, {
+	uniqueIncrement?: boolean;
+
+	intersection?: string[] | ReadonlyArray<string>;
+
+	range?: 'big' | 'small' | 'medium';
+
+	// previousな値を引き継ぐかどうか
+	accumulate?: boolean;
+}>;
+
+type KeyToColumnName<T extends string> = T extends `${infer R1}.${infer R2}` ? `${R1}${typeof columnDot}${KeyToColumnName<R2>}` : T;
+
+type Columns<S extends Schema> = {
+	[K in keyof S as `${typeof columnPrefix}${KeyToColumnName<string & K>}`]: number;
+};
+
+type TempColumnsForUnique<S extends Schema> = {
+	[K in keyof S as `${typeof uniqueTempColumnPrefix}${KeyToColumnName<string & K>}`]: S[K]['uniqueIncrement'] extends true ? string[] : never;
+};
+
+type RawRecord<S extends Schema> = {
+	id: number;
+
+	/**
+	 * 集計のグループ
+	 */
+	group?: string | null;
+
+	/**
+	 * 集計日時のUnixタイムスタンプ(秒)
+	 */
+	date: number;
+} & TempColumnsForUnique<S> & Columns<S>;
+
+const camelToSnake = (str: string): string => {
+	return str.replace(/([A-Z])/g, s => '_' + s.charAt(0).toLowerCase());
+};
+
+const removeDuplicates = (array: any[]) => Array.from(new Set(array));
+
+type Commit<S extends Schema> = {
+	[K in keyof S]?: S[K]['uniqueIncrement'] extends true ? string[] : number;
+};
+
+export type KVs<S extends Schema> = {
+	[K in keyof S]: number;
+};
+
+type ChartResult<T extends Schema> = {
+	[P in keyof T]: number[];
+};
+
+type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never;
+
+type UnflattenSingleton<K extends string, V> = K extends `${infer A}.${infer B}`
+	? { [_ in A]: UnflattenSingleton<B, V>; }
+	: { [_ in K]: V; };
+
+type Unflatten<T extends Record<string, any>> = UnionToIntersection<
+	{
+		[K in Extract<keyof T, string>]: UnflattenSingleton<K, T[K]>;
+	}[Extract<keyof T, string>]
+>;
+
+type ToJsonSchema<S> = {
+	type: 'object';
+	properties: {
+		[K in keyof S]: S[K] extends number[] ? { type: 'array'; items: { type: 'number'; }; } : ToJsonSchema<S[K]>;
+	},
+	required: (keyof S)[];
+};
+
+export function getJsonSchema<S extends Schema>(schema: S): ToJsonSchema<Unflatten<ChartResult<S>>> {
+	const jsonSchema = {
+		type: 'object',
+		properties: {} as Record<string, unknown>,
+		required: [],
+	};
+
+	for (const k in schema) {
+		jsonSchema.properties[k] = {
+			type: 'array',
+			items: { type: 'number' },
+		};
+	}
+
+	return jsonSchema as ToJsonSchema<Unflatten<ChartResult<S>>>;
+}
+
+/**
+ * 様々なチャートの管理を司るクラス
+ */
+// eslint-disable-next-line import/no-default-export
+export default abstract class Chart<T extends Schema> {
+	public schema: T;
+
+	private name: string;
+	private buffer: {
+		diff: Commit<T>;
+		group: string | null;
+	}[] = [];
+	// ↓にしたいけどfindOneとかで型エラーになる
+	//private repositoryForHour: Repository<RawRecord<T>>;
+	//private repositoryForDay: Repository<RawRecord<T>>;
+	private repositoryForHour: Repository<{ id: number; group?: string | null; date: number; }>;
+	private repositoryForDay: Repository<{ id: number; group?: string | null; date: number; }>;
+
+	/**
+	 * 1日に一回程度実行されれば良いような計算処理を入れる(主にCASCADE削除などアプリケーション側で感知できない変動によるズレの修正用)
+	 */
+	protected abstract tickMajor(group: string | null): Promise<Partial<KVs<T>>>;
+
+	/**
+	 * 少なくとも最小スパン内に1回は実行されて欲しい計算処理を入れる
+	 */
+	protected abstract tickMinor(group: string | null): Promise<Partial<KVs<T>>>;
+
+	private static convertSchemaToColumnDefinitions(schema: Schema): Record<string, { type: string; array?: boolean; default?: any; }> {
+		const columns = {} as Record<string, { type: string; array?: boolean; default?: any; }>;
+		for (const [k, v] of Object.entries(schema)) {
+			const name = k.replaceAll('.', columnDot);
+			const type = v.range === 'big' ? 'bigint' : v.range === 'small' ? 'smallint' : 'integer';
+			if (v.uniqueIncrement) {
+				columns[uniqueTempColumnPrefix + name] = {
+					type: 'varchar',
+					array: true,
+					default: '{}',
+				};
+				columns[columnPrefix + name] = {
+					type,
+					default: 0,
+				};
+			} else {
+				columns[columnPrefix + name] = {
+					type,
+					default: 0,
+				};
+			}
+		}
+		return columns;
+	}
+
+	private static dateToTimestamp(x: Date): number {
+		return Math.floor(x.getTime() / 1000);
+	}
+
+	private static parseDate(date: Date): [number, number, number, number, number, number, number] {
+		const y = date.getUTCFullYear();
+		const m = date.getUTCMonth();
+		const d = date.getUTCDate();
+		const h = date.getUTCHours();
+		const _m = date.getUTCMinutes();
+		const _s = date.getUTCSeconds();
+		const _ms = date.getUTCMilliseconds();
+
+		return [y, m, d, h, _m, _s, _ms];
+	}
+
+	private static getCurrentDate() {
+		return Chart.parseDate(new Date());
+	}
+
+	public static schemaToEntity(name: string, schema: Schema, grouped = false): {
+		hour: EntitySchema,
+		day: EntitySchema,
+	} {
+		const createEntity = (span: 'hour' | 'day'): EntitySchema => new EntitySchema({
+			name:
+				span === 'hour' ? `__chart__${camelToSnake(name)}` :
+				span === 'day' ? `__chart_day__${camelToSnake(name)}` :
+				new Error('not happen') as never,
+			columns: {
+				id: {
+					type: 'integer',
+					primary: true,
+					generated: true,
+				},
+				date: {
+					type: 'integer',
+				},
+				...(grouped ? {
+					group: {
+						type: 'varchar',
+						length: 128,
+					},
+				} : {}),
+				...Chart.convertSchemaToColumnDefinitions(schema),
+			},
+			indices: [{
+				columns: grouped ? ['date', 'group'] : ['date'],
+				unique: true,
+			}],
+			uniques: [{
+				columns: grouped ? ['date', 'group'] : ['date'],
+			}],
+			relations: {
+				/* TODO
+					group: {
+						target: () => Foo,
+						type: 'many-to-one',
+						onDelete: 'CASCADE',
+					},
+				*/
+			},
+		});
+
+		return {
+			hour: createEntity('hour'),
+			day: createEntity('day'),
+		};
+	}
+
+	private lock: (key: string) => Promise<() => void>;
+
+	constructor(db: DataSource, lock: (key: string) => Promise<() => void>, name: string, schema: T, grouped = false) {
+		this.name = name;
+		this.schema = schema;
+		this.lock = lock;
+
+		const { hour, day } = Chart.schemaToEntity(name, schema, grouped);
+		this.repositoryForHour = db.getRepository<{ id: number; group?: string | null; date: number; }>(hour);
+		this.repositoryForDay = db.getRepository<{ id: number; group?: string | null; date: number; }>(day);
+	}
+
+	private convertRawRecord(x: RawRecord<T>): KVs<T> {
+		const kvs = {} as Record<string, number>;
+		for (const k of Object.keys(x).filter((k) => k.startsWith(columnPrefix)) as (keyof Columns<T>)[]) {
+			kvs[(k as string).substr(columnPrefix.length).split(columnDot).join('.')] = x[k] as unknown as number;
+		}
+		return kvs as KVs<T>;
+	}
+
+	private getNewLog(latest: KVs<T> | null): KVs<T> {
+		const log = {} as Record<keyof T, number>;
+		for (const [k, v] of Object.entries(this.schema) as ([keyof typeof this['schema'], this['schema'][string]])[]) {
+			if (v.accumulate && latest) {
+				log[k] = latest[k];
+			} else {
+				log[k] = 0;
+			}
+		}
+		return log as KVs<T>;
+	}
+
+	private getLatestLog(group: string | null, span: 'hour' | 'day'): Promise<RawRecord<T> | null> {
+		const repository =
+			span === 'hour' ? this.repositoryForHour :
+			span === 'day' ? this.repositoryForDay :
+			new Error('not happen') as never;
+
+		return repository.findOne({
+			where: group ? {
+				group: group,
+			} : {},
+			order: {
+				date: -1,
+			},
+		}).then(x => x ?? null) as Promise<RawRecord<T> | null>;
+	}
+
+	/**
+	 * 現在(=今のHour or Day)のログをデータベースから探して、あればそれを返し、なければ作成して返します。
+	 */
+	private async claimCurrentLog(group: string | null, span: 'hour' | 'day'): Promise<RawRecord<T>> {
+		const [y, m, d, h] = Chart.getCurrentDate();
+
+		const current = dateUTC(
+			span === 'hour' ? [y, m, d, h] :
+			span === 'day' ? [y, m, d] :
+			new Error('not happen') as never);
+
+		const repository =
+			span === 'hour' ? this.repositoryForHour :
+			span === 'day' ? this.repositoryForDay :
+			new Error('not happen') as never;
+
+		// 現在(=今のHour or Day)のログ
+		const currentLog = await repository.findOneBy({
+			date: Chart.dateToTimestamp(current),
+			...(group ? { group: group } : {}),
+		}) as RawRecord<T> | undefined;
+
+		// ログがあればそれを返して終了
+		if (currentLog != null) {
+			return currentLog;
+		}
+
+		let log: RawRecord<T>;
+		let data: KVs<T>;
+
+		// 集計期間が変わってから、初めてのチャート更新なら
+		// 最も最近のログを持ってくる
+		// * 例えば集計期間が「日」である場合で考えると、
+		// * 昨日何もチャートを更新するような出来事がなかった場合は、
+		// * ログがそもそも作られずドキュメントが存在しないということがあり得るため、
+		// * 「昨日の」と決め打ちせずに「もっとも最近の」とします
+		const latest = await this.getLatestLog(group, span);
+
+		if (latest != null) {
+			// 空ログデータを作成
+			data = this.getNewLog(this.convertRawRecord(latest));
+		} else {
+			// ログが存在しなかったら
+			// (Misskeyインスタンスを建てて初めてのチャート更新時など)
+
+			// 初期ログデータを作成
+			data = this.getNewLog(null);
+
+			logger.info(`${this.name + (group ? `:${group}` : '')}(${span}): Initial commit created`);
+		}
+
+		const date = Chart.dateToTimestamp(current);
+		const lockKey = group ? `${this.name}:${date}:${span}:${group}` : `${this.name}:${date}:${span}`;
+
+		const unlock = await this.lock(lockKey);
+		try {
+			// ロック内でもう1回チェックする
+			const currentLog = await repository.findOneBy({
+				date: date,
+				...(group ? { group: group } : {}),
+			}) as RawRecord<T> | undefined;
+
+			// ログがあればそれを返して終了
+			if (currentLog != null) return currentLog;
+
+			const columns = {} as Record<string, number | unknown[]>;
+			for (const [k, v] of Object.entries(data)) {
+				const name = k.replaceAll('.', columnDot);
+				columns[columnPrefix + name] = v;
+			}
+
+			// 新規ログ挿入
+			log = await repository.insert({
+				date: date,
+				...(group ? { group: group } : {}),
+				...columns,
+			}).then(x => repository.findOneByOrFail(x.identifiers[0])) as RawRecord<T>;
+
+			logger.info(`${this.name + (group ? `:${group}` : '')}(${span}): New commit created`);
+
+			return log;
+		} finally {
+			unlock();
+		}
+	}
+
+	protected commit(diff: Commit<T>, group: string | null = null): void {
+		for (const [k, v] of Object.entries(diff)) {
+			if (v == null || v === 0 || (Array.isArray(v) && v.length === 0)) delete diff[k];
+		}
+		this.buffer.push({
+			diff, group,
+		});
+	}
+
+	public async save(): Promise<void> {
+		if (this.buffer.length === 0) {
+			logger.info(`${this.name}: Write skipped`);
+			return;
+		}
+
+		// TODO: 前の時間のログがbufferにあった場合のハンドリング
+		// 例えば、save が20分ごとに行われるとして、前回行われたのは 01:50 だったとする。
+		// 次に save が行われるのは 02:10 ということになるが、もし 01:55 に新規ログが buffer に追加されたとすると、
+		// そのログは本来は 01:00~ のログとしてDBに保存されて欲しいのに、02:00~ のログ扱いになってしまう。
+		// これを回避するための実装は複雑になりそうなため、一旦保留。
+
+		const update = async (logHour: RawRecord<T>, logDay: RawRecord<T>): Promise<void> => {
+			const finalDiffs = {} as Record<string, number | string[]>;
+
+			for (const diff of this.buffer.filter(q => q.group == null || (q.group === logHour.group)).map(q => q.diff)) {
+				for (const [k, v] of Object.entries(diff)) {
+					if (finalDiffs[k] == null) {
+						finalDiffs[k] = v;
+					} else {
+						if (typeof finalDiffs[k] === 'number') {
+							(finalDiffs[k] as number) += v as number;
+						} else {
+							(finalDiffs[k] as string[]) = (finalDiffs[k] as string[]).concat(v);
+						}
+					}
+				}
+			}
+
+			const queryForHour: Record<keyof RawRecord<T>, number | (() => string)> = {} as any;
+			const queryForDay: Record<keyof RawRecord<T>, number | (() => string)> = {} as any;
+			for (const [k, v] of Object.entries(finalDiffs)) {
+				if (typeof v === 'number') {
+					const name = columnPrefix + k.replaceAll('.', columnDot) as string & keyof Columns<T>;
+					if (v > 0) queryForHour[name] = () => `"${name}" + ${v}`;
+					if (v < 0) queryForHour[name] = () => `"${name}" - ${Math.abs(v)}`;
+					if (v > 0) queryForDay[name] = () => `"${name}" + ${v}`;
+					if (v < 0) queryForDay[name] = () => `"${name}" - ${Math.abs(v)}`;
+				} else if (Array.isArray(v) && v.length > 0) { // ユニークインクリメント
+					const tempColumnName = uniqueTempColumnPrefix + k.replaceAll('.', columnDot) as string & keyof TempColumnsForUnique<T>;
+					// TODO: item をSQLエスケープ
+					const itemsForHour = v.filter(item => !(logHour[tempColumnName] as unknown as string[]).includes(item)).map(item => `"${item}"`);
+					const itemsForDay = v.filter(item => !(logDay[tempColumnName] as unknown as string[]).includes(item)).map(item => `"${item}"`);
+					if (itemsForHour.length > 0) queryForHour[tempColumnName] = () => `array_cat("${tempColumnName}", '{${itemsForHour.join(',')}}'::varchar[])`;
+					if (itemsForDay.length > 0) queryForDay[tempColumnName] = () => `array_cat("${tempColumnName}", '{${itemsForDay.join(',')}}'::varchar[])`;
+				}
+			}
+
+			// bake unique count
+			for (const [k, v] of Object.entries(finalDiffs)) {
+				if (this.schema[k].uniqueIncrement) {
+					const name = columnPrefix + k.replaceAll('.', columnDot) as keyof Columns<T>;
+					const tempColumnName = uniqueTempColumnPrefix + k.replaceAll('.', columnDot) as keyof TempColumnsForUnique<T>;
+					queryForHour[name] = new Set([...(v as string[]), ...(logHour[tempColumnName] as unknown as string[])]).size;
+					queryForDay[name] = new Set([...(v as string[]), ...(logDay[tempColumnName] as unknown as string[])]).size;
+				}
+			}
+
+			// compute intersection
+			// TODO: intersectionに指定されたカラムがintersectionだった場合の対応
+			for (const [k, v] of Object.entries(this.schema)) {
+				const intersection = v.intersection;
+				if (intersection) {
+					const name = columnPrefix + k.replaceAll('.', columnDot) as keyof Columns<T>;
+					const firstKey = intersection[0];
+					const firstTempColumnName = uniqueTempColumnPrefix + firstKey.replaceAll('.', columnDot) as keyof TempColumnsForUnique<T>;
+					const firstValues = finalDiffs[firstKey] as string[] | undefined;
+					const currentValuesForHour = new Set([...(firstValues ?? []), ...(logHour[firstTempColumnName] as unknown as string[])]);
+					const currentValuesForDay = new Set([...(firstValues ?? []), ...(logDay[firstTempColumnName] as unknown as string[])]);
+					for (let i = 1; i < intersection.length; i++) {
+						const targetKey = intersection[i];
+						const targetTempColumnName = uniqueTempColumnPrefix + targetKey.replaceAll('.', columnDot) as keyof TempColumnsForUnique<T>;
+						const targetValues = finalDiffs[targetKey] as string[] | undefined;
+						const targetValuesForHour = new Set([...(targetValues ?? []), ...(logHour[targetTempColumnName] as unknown as string[])]);
+						const targetValuesForDay = new Set([...(targetValues ?? []), ...(logDay[targetTempColumnName] as unknown as string[])]);
+						currentValuesForHour.forEach(v => {
+							if (!targetValuesForHour.has(v)) currentValuesForHour.delete(v);
+						});
+						currentValuesForDay.forEach(v => {
+							if (!targetValuesForDay.has(v)) currentValuesForDay.delete(v);
+						});
+					}
+					queryForHour[name] = currentValuesForHour.size;
+					queryForDay[name] = currentValuesForDay.size;
+				}
+			}
+
+			// ログ更新
+			await Promise.all([
+				this.repositoryForHour.createQueryBuilder()
+					.update()
+					.set(queryForHour as any)
+					.where('id = :id', { id: logHour.id })
+					.execute(),
+				this.repositoryForDay.createQueryBuilder()
+					.update()
+					.set(queryForDay as any)
+					.where('id = :id', { id: logDay.id })
+					.execute(),
+			]);
+
+			logger.info(`${this.name + (logHour.group ? `:${logHour.group}` : '')}: Updated`);
+
+			// TODO: この一連の処理が始まった後に新たにbufferに入ったものは消さないようにする
+			this.buffer = this.buffer.filter(q => q.group != null && (q.group !== logHour.group));
+		};
+
+		const groups = removeDuplicates(this.buffer.map(log => log.group));
+
+		await Promise.all(
+			groups.map(group =>
+				Promise.all([
+					this.claimCurrentLog(group, 'hour'),
+					this.claimCurrentLog(group, 'day'),
+				]).then(([logHour, logDay]) =>
+					update(logHour, logDay))));
+	}
+
+	public async tick(major: boolean, group: string | null = null): Promise<void> {
+		const data = major ? await this.tickMajor(group) : await this.tickMinor(group);
+
+		const columns = {} as Record<keyof Columns<T>, number>;
+		for (const [k, v] of Object.entries(data) as ([keyof typeof data, number])[]) {
+			const name = columnPrefix + (k as string).replaceAll('.', columnDot) as keyof Columns<T>;
+			columns[name] = v;
+		}
+
+		if (Object.keys(columns).length === 0) {
+			return;
+		}
+
+		const update = async (logHour: RawRecord<T>, logDay: RawRecord<T>): Promise<void> => {
+			await Promise.all([
+				this.repositoryForHour.createQueryBuilder()
+					.update()
+					.set(columns)
+					.where('id = :id', { id: logHour.id })
+					.execute(),
+				this.repositoryForDay.createQueryBuilder()
+					.update()
+					.set(columns)
+					.where('id = :id', { id: logDay.id })
+					.execute(),
+			]);
+		};
+
+		return Promise.all([
+			this.claimCurrentLog(group, 'hour'),
+			this.claimCurrentLog(group, 'day'),
+		]).then(([logHour, logDay]) =>
+			update(logHour, logDay));
+	}
+
+	public resync(group: string | null = null): Promise<void> {
+		return this.tick(true, group);
+	}
+
+	public async clean(): Promise<void> {
+		const current = dateUTC(Chart.getCurrentDate());
+
+		// 一日以上前かつ三日以内
+		const gt = Chart.dateToTimestamp(current) - (60 * 60 * 24 * 3);
+		const lt = Chart.dateToTimestamp(current) - (60 * 60 * 24);
+
+		const columns = {} as Record<keyof TempColumnsForUnique<T>, []>;
+		for (const [k, v] of Object.entries(this.schema)) {
+			if (v.uniqueIncrement) {
+				const name = uniqueTempColumnPrefix + k.replaceAll('.', columnDot) as keyof TempColumnsForUnique<T>;
+				columns[name] = [];
+			}
+		}
+
+		if (Object.keys(columns).length === 0) {
+			return;
+		}
+
+		await Promise.all([
+			this.repositoryForHour.createQueryBuilder()
+				.update()
+				.set(columns)
+				.where('date > :gt', { gt })
+				.andWhere('date < :lt', { lt })
+				.execute(),
+			this.repositoryForDay.createQueryBuilder()
+				.update()
+				.set(columns)
+				.where('date > :gt', { gt })
+				.andWhere('date < :lt', { lt })
+				.execute(),
+		]);
+	}
+
+	public async getChartRaw(span: 'hour' | 'day', amount: number, cursor: Date | null, group: string | null = null): Promise<ChartResult<T>> {
+		const [y, m, d, h, _m, _s, _ms] = cursor ? Chart.parseDate(subtractTime(addTime(cursor, 1, span), 1)) : Chart.getCurrentDate();
+		const [y2, m2, d2, h2] = cursor ? Chart.parseDate(addTime(cursor, 1, span)) : [] as never;
+
+		const lt = dateUTC([y, m, d, h, _m, _s, _ms]);
+
+		const gt =
+			span === 'day' ? subtractTime(cursor ? dateUTC([y2, m2, d2, 0]) : dateUTC([y, m, d, 0]), amount - 1, 'day') :
+			span === 'hour' ? subtractTime(cursor ? dateUTC([y2, m2, d2, h2]) : dateUTC([y, m, d, h]), amount - 1, 'hour') :
+			new Error('not happen') as never;
+
+		const repository =
+			span === 'hour' ? this.repositoryForHour :
+			span === 'day' ? this.repositoryForDay :
+			new Error('not happen') as never;
+
+		// ログ取得
+		let logs = await repository.find({
+			where: {
+				date: Between(Chart.dateToTimestamp(gt), Chart.dateToTimestamp(lt)),
+				...(group ? { group: group } : {}),
+			},
+			order: {
+				date: -1,
+			},
+		}) as RawRecord<T>[];
+
+		// 要求された範囲にログがひとつもなかったら
+		if (logs.length === 0) {
+			// もっとも新しいログを持ってくる
+			// (すくなくともひとつログが無いと隙間埋めできないため)
+			const recentLog = await repository.findOne({
+				where: group ? {
+					group: group,
+				} : {},
+				order: {
+					date: -1,
+				},
+			}) as RawRecord<T> | undefined;
+
+			if (recentLog) {
+				logs = [recentLog];
+			}
+
+		// 要求された範囲の最も古い箇所に位置するログが存在しなかったら
+		} else if (!isTimeSame(new Date(logs[logs.length - 1].date * 1000), gt)) {
+			// 要求された範囲の最も古い箇所時点での最も新しいログを持ってきて末尾に追加する
+			// (隙間埋めできないため)
+			const outdatedLog = await repository.findOne({
+				where: {
+					date: LessThan(Chart.dateToTimestamp(gt)),
+					...(group ? { group: group } : {}),
+				},
+				order: {
+					date: -1,
+				},
+			}) as RawRecord<T> | undefined;
+
+			if (outdatedLog) {
+				logs.push(outdatedLog);
+			}
+		}
+
+		const chart: KVs<T>[] = [];
+
+		for (let i = (amount - 1); i >= 0; i--) {
+			const current =
+				span === 'hour' ? subtractTime(dateUTC([y, m, d, h]), i, 'hour') :
+				span === 'day' ? subtractTime(dateUTC([y, m, d]), i, 'day') :
+				new Error('not happen') as never;
+
+			const log = logs.find(l => isTimeSame(new Date(l.date * 1000), current));
+
+			if (log) {
+				chart.unshift(this.convertRawRecord(log));
+			} else {
+				// 隙間埋め
+				const latest = logs.find(l => isTimeBefore(new Date(l.date * 1000), current));
+				const data = latest ? this.convertRawRecord(latest) : null;
+				chart.unshift(this.getNewLog(data));
+			}
+		}
+
+		const res = {} as ChartResult<T>;
+
+		/**
+		 * [{ foo: 1, bar: 5 }, { foo: 2, bar: 6 }, { foo: 3, bar: 7 }]
+		 * を
+		 * { foo: [1, 2, 3], bar: [5, 6, 7] }
+		 * にする
+		 */
+		for (const record of chart) {
+			for (const [k, v] of Object.entries(record) as ([keyof typeof record, number])[]) {
+				if (res[k]) {
+					res[k].push(v);
+				} else {
+					res[k] = [v];
+				}
+			}
+		}
+
+		return res;
+	}
+
+	public async getChart(span: 'hour' | 'day', amount: number, cursor: Date | null, group: string | null = null): Promise<Unflatten<ChartResult<T>>> {
+		const result = await this.getChartRaw(span, amount, cursor, group);
+		const object = {};
+		for (const [k, v] of Object.entries(result)) {
+			nestedProperty.set(object, k, v);
+		}
+		return object as Unflatten<ChartResult<T>>;
+	}
+}
diff --git a/packages/backend/src/core/chart/entities.ts b/packages/backend/src/core/chart/entities.ts
new file mode 100644
index 0000000000..a9eeabd639
--- /dev/null
+++ b/packages/backend/src/core/chart/entities.ts
@@ -0,0 +1,39 @@
+import { entity as FederationChart } from './charts/entities/federation.js';
+import { entity as NotesChart } from './charts/entities/notes.js';
+import { entity as UsersChart } from './charts/entities/users.js';
+import { entity as ActiveUsersChart } from './charts/entities/active-users.js';
+import { entity as InstanceChart } from './charts/entities/instance.js';
+import { entity as PerUserNotesChart } from './charts/entities/per-user-notes.js';
+import { entity as DriveChart } from './charts/entities/drive.js';
+import { entity as PerUserReactionsChart } from './charts/entities/per-user-reactions.js';
+import { entity as HashtagChart } from './charts/entities/hashtag.js';
+import { entity as PerUserFollowingChart } from './charts/entities/per-user-following.js';
+import { entity as PerUserDriveChart } from './charts/entities/per-user-drive.js';
+import { entity as ApRequestChart } from './charts/entities/ap-request.js';
+
+import { entity as TestChart } from './charts/entities/test.js';
+import { entity as TestGroupedChart } from './charts/entities/test-grouped.js';
+import { entity as TestUniqueChart } from './charts/entities/test-unique.js';
+import { entity as TestIntersectionChart } from './charts/entities/test-intersection.js';
+
+export const entities = [
+	FederationChart.hour, FederationChart.day,
+	NotesChart.hour, NotesChart.day,
+	UsersChart.hour, UsersChart.day,
+	ActiveUsersChart.hour, ActiveUsersChart.day,
+	InstanceChart.hour, InstanceChart.day,
+	PerUserNotesChart.hour, PerUserNotesChart.day,
+	DriveChart.hour, DriveChart.day,
+	PerUserReactionsChart.hour, PerUserReactionsChart.day,
+	HashtagChart.hour, HashtagChart.day,
+	PerUserFollowingChart.hour, PerUserFollowingChart.day,
+	PerUserDriveChart.hour, PerUserDriveChart.day,
+	ApRequestChart.hour, ApRequestChart.day,
+
+	...(process.env.NODE_ENV === 'test' ? [
+		TestChart.hour, TestChart.day,
+		TestGroupedChart.hour, TestGroupedChart.day,
+		TestUniqueChart.hour, TestUniqueChart.day,
+		TestIntersectionChart.hour, TestIntersectionChart.day,
+	] : []),
+];
diff --git a/packages/backend/src/core/entities/AbuseUserReportEntityService.ts b/packages/backend/src/core/entities/AbuseUserReportEntityService.ts
new file mode 100644
index 0000000000..6cc511fb48
--- /dev/null
+++ b/packages/backend/src/core/entities/AbuseUserReportEntityService.ts
@@ -0,0 +1,49 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { AbuseUserReportsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { AbuseUserReport } from '@/models/entities/AbuseUserReport.js';
+import { UserEntityService } from './UserEntityService.js';
+
+@Injectable()
+export class AbuseUserReportEntityService {
+	constructor(
+		@Inject(DI.abuseUserReportsRepository)
+		private abuseUserReportsRepository: AbuseUserReportsRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+	}
+
+	public async pack(
+		src: AbuseUserReport['id'] | AbuseUserReport,
+	) {
+		const report = typeof src === 'object' ? src : await this.abuseUserReportsRepository.findOneByOrFail({ id: src });
+
+		return await awaitAll({
+			id: report.id,
+			createdAt: report.createdAt.toISOString(),
+			comment: report.comment,
+			resolved: report.resolved,
+			reporterId: report.reporterId,
+			targetUserId: report.targetUserId,
+			assigneeId: report.assigneeId,
+			reporter: this.userEntityService.pack(report.reporter ?? report.reporterId, null, {
+				detail: true,
+			}),
+			targetUser: this.userEntityService.pack(report.targetUser ?? report.targetUserId, null, {
+				detail: true,
+			}),
+			assignee: report.assigneeId ? this.userEntityService.pack(report.assignee ?? report.assigneeId, null, {
+				detail: true,
+			}) : null,
+			forwarded: report.forwarded,
+		});
+	}
+
+	public packMany(
+		reports: any[],
+	) {
+		return Promise.all(reports.map(x => this.pack(x)));
+	}
+}
diff --git a/packages/backend/src/core/entities/AntennaEntityService.ts b/packages/backend/src/core/entities/AntennaEntityService.ts
new file mode 100644
index 0000000000..9193cb81d7
--- /dev/null
+++ b/packages/backend/src/core/entities/AntennaEntityService.ts
@@ -0,0 +1,47 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { AntennaNotesRepository, AntennasRepository, UserGroupJoiningsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { Antenna } from '@/models/entities/Antenna.js';
+
+@Injectable()
+export class AntennaEntityService {
+	constructor(
+		@Inject(DI.antennasRepository)
+		private antennasRepository: AntennasRepository,
+
+		@Inject(DI.antennaNotesRepository)
+		private antennaNotesRepository: AntennaNotesRepository,
+
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+	) {
+	}
+
+	public async pack(
+		src: Antenna['id'] | Antenna,
+	): Promise<Packed<'Antenna'>> {
+		const antenna = typeof src === 'object' ? src : await this.antennasRepository.findOneByOrFail({ id: src });
+
+		const hasUnreadNote = (await this.antennaNotesRepository.findOneBy({ antennaId: antenna.id, read: false })) != null;
+		const userGroupJoining = antenna.userGroupJoiningId ? await this.userGroupJoiningsRepository.findOneBy({ id: antenna.userGroupJoiningId }) : null;
+
+		return {
+			id: antenna.id,
+			createdAt: antenna.createdAt.toISOString(),
+			name: antenna.name,
+			keywords: antenna.keywords,
+			excludeKeywords: antenna.excludeKeywords,
+			src: antenna.src,
+			userListId: antenna.userListId,
+			userGroupId: userGroupJoining ? userGroupJoining.userGroupId : null,
+			users: antenna.users,
+			caseSensitive: antenna.caseSensitive,
+			notify: antenna.notify,
+			withReplies: antenna.withReplies,
+			withFile: antenna.withFile,
+			hasUnreadNote,
+		};
+	}
+}
diff --git a/packages/backend/src/core/entities/AppEntityService.ts b/packages/backend/src/core/entities/AppEntityService.ts
new file mode 100644
index 0000000000..6491b0b2d9
--- /dev/null
+++ b/packages/backend/src/core/entities/AppEntityService.ts
@@ -0,0 +1,52 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { AccessTokensRepository, AppsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { App } from '@/models/entities/App.js';
+import type { User } from '@/models/entities/User.js';
+import { UserEntityService } from './UserEntityService.js';
+
+@Injectable()
+export class AppEntityService {
+	constructor(
+		@Inject(DI.appsRepository)
+		private appsRepository: AppsRepository,
+
+		@Inject(DI.accessTokensRepository)
+		private accessTokensRepository: AccessTokensRepository,
+	) {
+	}
+
+	public async pack(
+		src: App['id'] | App,
+		me?: { id: User['id'] } | null | undefined,
+		options?: {
+			detail?: boolean,
+			includeSecret?: boolean,
+			includeProfileImageIds?: boolean
+		},
+	): Promise<Packed<'App'>> {
+		const opts = Object.assign({
+			detail: false,
+			includeSecret: false,
+			includeProfileImageIds: false,
+		}, options);
+
+		const app = typeof src === 'object' ? src : await this.appsRepository.findOneByOrFail({ id: src });
+
+		return {
+			id: app.id,
+			name: app.name,
+			callbackUrl: app.callbackUrl,
+			permission: app.permission,
+			...(opts.includeSecret ? { secret: app.secret } : {}),
+			...(me ? {
+				isAuthorized: await this.accessTokensRepository.countBy({
+					appId: app.id,
+					userId: me.id,
+				}).then(count => count > 0),
+			} : {}),
+		};
+	}
+}
diff --git a/packages/backend/src/core/entities/AuthSessionEntityService.ts b/packages/backend/src/core/entities/AuthSessionEntityService.ts
new file mode 100644
index 0000000000..a4dab3d9cf
--- /dev/null
+++ b/packages/backend/src/core/entities/AuthSessionEntityService.ts
@@ -0,0 +1,33 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { AuthSessionsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { AuthSession } from '@/models/entities/AuthSession.js';
+import type { User } from '@/models/entities/User.js';
+import { UserEntityService } from './UserEntityService.js';
+import { AppEntityService } from './AppEntityService.js';
+
+@Injectable()
+export class AuthSessionEntityService {
+	constructor(
+		@Inject(DI.authSessionsRepository)
+		private authSessionsRepository: AuthSessionsRepository,
+
+		private appEntityService: AppEntityService,
+	) {
+	}
+
+	public async pack(
+		src: AuthSession['id'] | AuthSession,
+		me?: { id: User['id'] } | null | undefined,
+	) {
+		const session = typeof src === 'object' ? src : await this.authSessionsRepository.findOneByOrFail({ id: src });
+
+		return await awaitAll({
+			id: session.id,
+			app: this.appEntityService.pack(session.appId, me),
+			token: session.token,
+		});
+	}
+}
diff --git a/packages/backend/src/core/entities/BlockingEntityService.ts b/packages/backend/src/core/entities/BlockingEntityService.ts
new file mode 100644
index 0000000000..74ce6830b6
--- /dev/null
+++ b/packages/backend/src/core/entities/BlockingEntityService.ts
@@ -0,0 +1,42 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { BlockingsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { Blocking } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import { UserEntityService } from './UserEntityService.js';
+
+@Injectable()
+export class BlockingEntityService {
+	constructor(
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+	}
+
+	public async pack(
+		src: Blocking['id'] | Blocking,
+		me?: { id: User['id'] } | null | undefined,
+	): Promise<Packed<'Blocking'>> {
+		const blocking = typeof src === 'object' ? src : await this.blockingsRepository.findOneByOrFail({ id: src });
+
+		return await awaitAll({
+			id: blocking.id,
+			createdAt: blocking.createdAt.toISOString(),
+			blockeeId: blocking.blockeeId,
+			blockee: this.userEntityService.pack(blocking.blockeeId, me, {
+				detail: true,
+			}),
+		});
+	}
+
+	public packMany(
+		blockings: any[],
+		me: { id: User['id'] },
+	) {
+		return Promise.all(blockings.map(x => this.pack(x, me)));
+	}
+}
diff --git a/packages/backend/src/core/entities/ChannelEntityService.ts b/packages/backend/src/core/entities/ChannelEntityService.ts
new file mode 100644
index 0000000000..fec76e4e63
--- /dev/null
+++ b/packages/backend/src/core/entities/ChannelEntityService.ts
@@ -0,0 +1,66 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { ChannelFollowingsRepository, ChannelsRepository, DriveFilesRepository, NoteUnreadsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { Channel } from '@/models/entities/Channel.js';
+import { UserEntityService } from './UserEntityService.js';
+import { DriveFileEntityService } from './DriveFileEntityService.js';
+
+@Injectable()
+export class ChannelEntityService {
+	constructor(
+		@Inject(DI.channelsRepository)
+		private channelsRepository: ChannelsRepository,
+
+		@Inject(DI.channelFollowingsRepository)
+		private channelFollowingsRepository: ChannelFollowingsRepository,
+
+		@Inject(DI.noteUnreadsRepository)
+		private noteUnreadsRepository: NoteUnreadsRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private userEntityService: UserEntityService,
+		private driveFileEntityService: DriveFileEntityService,
+	) {
+	}
+
+	public async pack(
+		src: Channel['id'] | Channel,
+		me?: { id: User['id'] } | null | undefined,
+	): Promise<Packed<'Channel'>> {
+		const channel = typeof src === 'object' ? src : await this.channelsRepository.findOneByOrFail({ id: src });
+		const meId = me ? me.id : null;
+
+		const banner = channel.bannerId ? await this.driveFilesRepository.findOneBy({ id: channel.bannerId }) : null;
+
+		const hasUnreadNote = meId ? (await this.noteUnreadsRepository.findOneBy({ noteChannelId: channel.id, userId: meId })) != null : undefined;
+
+		const following = meId ? await this.channelFollowingsRepository.findOneBy({
+			followerId: meId,
+			followeeId: channel.id,
+		}) : null;
+
+		return {
+			id: channel.id,
+			createdAt: channel.createdAt.toISOString(),
+			lastNotedAt: channel.lastNotedAt ? channel.lastNotedAt.toISOString() : null,
+			name: channel.name,
+			description: channel.description,
+			userId: channel.userId,
+			bannerUrl: banner ? this.driveFileEntityService.getPublicUrl(banner, false) : null,
+			usersCount: channel.usersCount,
+			notesCount: channel.notesCount,
+
+			...(me ? {
+				isFollowing: following != null,
+				hasUnreadNote,
+			} : {}),
+		};
+	}
+}
+
diff --git a/packages/backend/src/core/entities/ClipEntityService.ts b/packages/backend/src/core/entities/ClipEntityService.ts
new file mode 100644
index 0000000000..27637e42e8
--- /dev/null
+++ b/packages/backend/src/core/entities/ClipEntityService.ts
@@ -0,0 +1,43 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { ClipsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { Clip } from '@/models/entities/Clip.js';
+import { UserEntityService } from './UserEntityService.js';
+
+@Injectable()
+export class ClipEntityService {
+	constructor(
+		@Inject(DI.clipsRepository)
+		private clipsRepository: ClipsRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+	}
+
+	public async pack(
+		src: Clip['id'] | Clip,
+	): Promise<Packed<'Clip'>> {
+		const clip = typeof src === 'object' ? src : await this.clipsRepository.findOneByOrFail({ id: src });
+
+		return await awaitAll({
+			id: clip.id,
+			createdAt: clip.createdAt.toISOString(),
+			userId: clip.userId,
+			user: this.userEntityService.pack(clip.user ?? clip.userId),
+			name: clip.name,
+			description: clip.description,
+			isPublic: clip.isPublic,
+		});
+	}
+
+	public packMany(
+		clips: Clip[],
+	) {
+		return Promise.all(clips.map(x => this.pack(x)));
+	}
+}
+
diff --git a/packages/backend/src/core/entities/DriveFileEntityService.ts b/packages/backend/src/core/entities/DriveFileEntityService.ts
new file mode 100644
index 0000000000..521bf51da0
--- /dev/null
+++ b/packages/backend/src/core/entities/DriveFileEntityService.ts
@@ -0,0 +1,214 @@
+import { forwardRef, Inject, Injectable } from '@nestjs/common';
+import { DataSource, In } from 'typeorm';
+import * as mfm from 'mfm-js';
+import { DI } from '@/di-symbols.js';
+import { NotesRepository, DriveFilesRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type { Packed } from '@/misc/schema.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { User } from '@/models/entities/User.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import { appendQuery, query } from '@/misc/prelude/url.js';
+import { UtilityService } from '../UtilityService.js';
+import { UserEntityService } from './UserEntityService.js';
+import { DriveFolderEntityService } from './DriveFolderEntityService.js';
+
+type PackOptions = {
+	detail?: boolean,
+	self?: boolean,
+	withUser?: boolean,
+};
+
+@Injectable()
+export class DriveFileEntityService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		// 循環参照のため / for circular dependency
+		@Inject(forwardRef(() => UserEntityService))
+		private userEntityService: UserEntityService,
+
+		private utilityService: UtilityService,
+		private driveFolderEntityService: DriveFolderEntityService,
+	) {
+	}
+	
+	public validateFileName(name: string): boolean {
+		return (
+			(name.trim().length > 0) &&
+			(name.length <= 200) &&
+			(name.indexOf('\\') === -1) &&
+			(name.indexOf('/') === -1) &&
+			(name.indexOf('..') === -1)
+		);
+	}
+
+	public getPublicProperties(file: DriveFile): DriveFile['properties'] {
+		if (file.properties.orientation != null) {
+			// TODO
+			//const properties = structuredClone(file.properties);
+			const properties = JSON.parse(JSON.stringify(file.properties));
+			if (file.properties.orientation >= 5) {
+				[properties.width, properties.height] = [properties.height, properties.width];
+			}
+			properties.orientation = undefined;
+			return properties;
+		}
+
+		return file.properties;
+	}
+
+	public getPublicUrl(file: DriveFile, thumbnail = false): string | null {
+		// リモートかつメディアプロキシ
+		if (file.uri != null && file.userHost != null && this.config.mediaProxy != null) {
+			return appendQuery(this.config.mediaProxy, query({
+				url: file.uri,
+				thumbnail: thumbnail ? '1' : undefined,
+			}));
+		}
+
+		// リモートかつ期限切れはローカルプロキシを試みる
+		if (file.uri != null && file.isLink && this.config.proxyRemoteFiles) {
+			const key = thumbnail ? file.thumbnailAccessKey : file.webpublicAccessKey;
+
+			if (key && !key.match('/')) {	// 古いものはここにオブジェクトストレージキーが入ってるので除外
+				return `${this.config.url}/files/${key}`;
+			}
+		}
+
+		const isImage = file.type && ['image/png', 'image/apng', 'image/gif', 'image/jpeg', 'image/webp', 'image/svg+xml'].includes(file.type);
+
+		return thumbnail ? (file.thumbnailUrl ?? (isImage ? (file.webpublicUrl ?? file.url) : null)) : (file.webpublicUrl ?? file.url);
+	}
+
+	public async calcDriveUsageOf(user: User['id'] | { id: User['id'] }): Promise<number> {
+		const id = typeof user === 'object' ? user.id : user;
+
+		const { sum } = await this.driveFilesRepository
+			.createQueryBuilder('file')
+			.where('file.userId = :id', { id: id })
+			.andWhere('file.isLink = FALSE')
+			.select('SUM(file.size)', 'sum')
+			.getRawOne();
+
+		return parseInt(sum, 10) ?? 0;
+	}
+
+	public async calcDriveUsageOfHost(host: string): Promise<number> {
+		const { sum } = await this.driveFilesRepository
+			.createQueryBuilder('file')
+			.where('file.userHost = :host', { host: this.utilityService.toPuny(host) })
+			.andWhere('file.isLink = FALSE')
+			.select('SUM(file.size)', 'sum')
+			.getRawOne();
+
+		return parseInt(sum, 10) ?? 0;
+	}
+
+	public async calcDriveUsageOfLocal(): Promise<number> {
+		const { sum } = await this.driveFilesRepository
+			.createQueryBuilder('file')
+			.where('file.userHost IS NULL')
+			.andWhere('file.isLink = FALSE')
+			.select('SUM(file.size)', 'sum')
+			.getRawOne();
+
+		return parseInt(sum, 10) ?? 0;
+	}
+
+	public async calcDriveUsageOfRemote(): Promise<number> {
+		const { sum } = await this.driveFilesRepository
+			.createQueryBuilder('file')
+			.where('file.userHost IS NOT NULL')
+			.andWhere('file.isLink = FALSE')
+			.select('SUM(file.size)', 'sum')
+			.getRawOne();
+
+		return parseInt(sum, 10) ?? 0;
+	}
+
+	public async pack(
+		src: DriveFile['id'] | DriveFile,
+		options?: PackOptions,
+	): Promise<Packed<'DriveFile'>> {
+		const opts = Object.assign({
+			detail: false,
+			self: false,
+		}, options);
+
+		const file = typeof src === 'object' ? src : await this.driveFilesRepository.findOneByOrFail({ id: src });
+
+		return await awaitAll<Packed<'DriveFile'>>({
+			id: file.id,
+			createdAt: file.createdAt.toISOString(),
+			name: file.name,
+			type: file.type,
+			md5: file.md5,
+			size: file.size,
+			isSensitive: file.isSensitive,
+			blurhash: file.blurhash,
+			properties: opts.self ? file.properties : this.getPublicProperties(file),
+			url: opts.self ? file.url : this.getPublicUrl(file, false),
+			thumbnailUrl: this.getPublicUrl(file, true),
+			comment: file.comment,
+			folderId: file.folderId,
+			folder: opts.detail && file.folderId ? this.driveFolderEntityService.pack(file.folderId, {
+				detail: true,
+			}) : null,
+			userId: opts.withUser ? file.userId : null,
+			user: (opts.withUser && file.userId) ? this.userEntityService.pack(file.userId) : null,
+		});
+	}
+
+	public async packNullable(
+		src: DriveFile['id'] | DriveFile,
+		options?: PackOptions,
+	): Promise<Packed<'DriveFile'> | null> {
+		const opts = Object.assign({
+			detail: false,
+			self: false,
+		}, options);
+
+		const file = typeof src === 'object' ? src : await this.driveFilesRepository.findOneBy({ id: src });
+		if (file == null) return null;
+
+		return await awaitAll<Packed<'DriveFile'>>({
+			id: file.id,
+			createdAt: file.createdAt.toISOString(),
+			name: file.name,
+			type: file.type,
+			md5: file.md5,
+			size: file.size,
+			isSensitive: file.isSensitive,
+			blurhash: file.blurhash,
+			properties: opts.self ? file.properties : this.getPublicProperties(file),
+			url: opts.self ? file.url : this.getPublicUrl(file, false),
+			thumbnailUrl: this.getPublicUrl(file, true),
+			comment: file.comment,
+			folderId: file.folderId,
+			folder: opts.detail && file.folderId ? this.driveFolderEntityService.pack(file.folderId, {
+				detail: true,
+			}) : null,
+			userId: opts.withUser ? file.userId : null,
+			user: (opts.withUser && file.userId) ? this.userEntityService.pack(file.userId) : null,
+		});
+	}
+
+	public async packMany(
+		files: (DriveFile['id'] | DriveFile)[],
+		options?: PackOptions,
+	): Promise<Packed<'DriveFile'>[]> {
+		const items = await Promise.all(files.map(f => this.packNullable(f, options)));
+		return items.filter((x): x is Packed<'DriveFile'> => x != null);
+	}
+}
diff --git a/packages/backend/src/core/entities/DriveFolderEntityService.ts b/packages/backend/src/core/entities/DriveFolderEntityService.ts
new file mode 100644
index 0000000000..beebbc3206
--- /dev/null
+++ b/packages/backend/src/core/entities/DriveFolderEntityService.ts
@@ -0,0 +1,57 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { DriveFilesRepository, DriveFoldersRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { DriveFolder } from '@/models/entities/DriveFolder.js';
+import { UserEntityService } from './UserEntityService.js';
+
+@Injectable()
+export class DriveFolderEntityService {
+	constructor(
+		@Inject(DI.driveFoldersRepository)
+		private driveFoldersRepository: DriveFoldersRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+	) {
+	}
+
+	public async pack(
+		src: DriveFolder['id'] | DriveFolder,
+		options?: {
+			detail: boolean
+		},
+	): Promise<Packed<'DriveFolder'>> {
+		const opts = Object.assign({
+			detail: false,
+		}, options);
+
+		const folder = typeof src === 'object' ? src : await this.driveFoldersRepository.findOneByOrFail({ id: src });
+
+		return await awaitAll({
+			id: folder.id,
+			createdAt: folder.createdAt.toISOString(),
+			name: folder.name,
+			parentId: folder.parentId,
+
+			...(opts.detail ? {
+				foldersCount: this.driveFoldersRepository.countBy({
+					parentId: folder.id,
+				}),
+				filesCount: this.driveFilesRepository.countBy({
+					folderId: folder.id,
+				}),
+
+				...(folder.parentId ? {
+					parent: this.pack(folder.parentId, {
+						detail: true,
+					}),
+				} : {}),
+			} : {}),
+		});
+	}
+}
+
diff --git a/packages/backend/src/core/entities/EmojiEntityService.ts b/packages/backend/src/core/entities/EmojiEntityService.ts
new file mode 100644
index 0000000000..10ed0f19ee
--- /dev/null
+++ b/packages/backend/src/core/entities/EmojiEntityService.ts
@@ -0,0 +1,43 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { EmojisRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { Emoji } from '@/models/entities/Emoji.js';
+import { UserEntityService } from './UserEntityService.js';
+
+@Injectable()
+export class EmojiEntityService {
+	constructor(
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+	}
+
+	public async pack(
+		src: Emoji['id'] | Emoji,
+	): Promise<Packed<'Emoji'>> {
+		const emoji = typeof src === 'object' ? src : await this.emojisRepository.findOneByOrFail({ id: src });
+
+		return {
+			id: emoji.id,
+			aliases: emoji.aliases,
+			name: emoji.name,
+			category: emoji.category,
+			host: emoji.host,
+			// ?? emoji.originalUrl してるのは後方互換性のため
+			url: emoji.publicUrl ?? emoji.originalUrl,
+		};
+	}
+
+	public packMany(
+		emojis: any[],
+	) {
+		return Promise.all(emojis.map(x => this.pack(x)));
+	}
+}
+
diff --git a/packages/backend/src/core/entities/FollowRequestEntityService.ts b/packages/backend/src/core/entities/FollowRequestEntityService.ts
new file mode 100644
index 0000000000..f7e7fd42e4
--- /dev/null
+++ b/packages/backend/src/core/entities/FollowRequestEntityService.ts
@@ -0,0 +1,34 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { FollowRequestsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { FollowRequest } from '@/models/entities/FollowRequest.js';
+import { UserEntityService } from './UserEntityService.js';
+
+@Injectable()
+export class FollowRequestEntityService {
+	constructor(
+		@Inject(DI.followRequestsRepository)
+		private followRequestsRepository: FollowRequestsRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+	}
+
+	public async pack(
+		src: FollowRequest['id'] | FollowRequest,
+		me?: { id: User['id'] } | null | undefined,
+	) {
+		const request = typeof src === 'object' ? src : await this.followRequestsRepository.findOneByOrFail({ id: src });
+
+		return {
+			id: request.id,
+			follower: await this.userEntityService.pack(request.followerId, me),
+			followee: await this.userEntityService.pack(request.followeeId, me),
+		};
+	}
+}
+
diff --git a/packages/backend/src/core/entities/FollowingEntityService.ts b/packages/backend/src/core/entities/FollowingEntityService.ts
new file mode 100644
index 0000000000..93fed85f72
--- /dev/null
+++ b/packages/backend/src/core/entities/FollowingEntityService.ts
@@ -0,0 +1,98 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { FollowingsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { Following } from '@/models/entities/Following.js';
+import { UserEntityService } from './UserEntityService.js';
+
+type LocalFollowerFollowing = Following & {
+	followerHost: null;
+	followerInbox: null;
+	followerSharedInbox: null;
+};
+
+type RemoteFollowerFollowing = Following & {
+	followerHost: string;
+	followerInbox: string;
+	followerSharedInbox: string;
+};
+
+type LocalFolloweeFollowing = Following & {
+	followeeHost: null;
+	followeeInbox: null;
+	followeeSharedInbox: null;
+};
+
+type RemoteFolloweeFollowing = Following & {
+	followeeHost: string;
+	followeeInbox: string;
+	followeeSharedInbox: string;
+};
+
+@Injectable()
+export class FollowingEntityService {
+	constructor(
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+	}
+
+	public isLocalFollower(following: Following): following is LocalFollowerFollowing {
+		return following.followerHost == null;
+	}
+
+	public isRemoteFollower(following: Following): following is RemoteFollowerFollowing {
+		return following.followerHost != null;
+	}
+
+	public isLocalFollowee(following: Following): following is LocalFolloweeFollowing {
+		return following.followeeHost == null;
+	}
+
+	public isRemoteFollowee(following: Following): following is RemoteFolloweeFollowing {
+		return following.followeeHost != null;
+	}
+
+	public async pack(
+		src: Following['id'] | Following,
+		me?: { id: User['id'] } | null | undefined,
+		opts?: {
+			populateFollowee?: boolean;
+			populateFollower?: boolean;
+		},
+	): Promise<Packed<'Following'>> {
+		const following = typeof src === 'object' ? src : await this.followingsRepository.findOneByOrFail({ id: src });
+
+		if (opts == null) opts = {};
+
+		return await awaitAll({
+			id: following.id,
+			createdAt: following.createdAt.toISOString(),
+			followeeId: following.followeeId,
+			followerId: following.followerId,
+			followee: opts.populateFollowee ? this.userEntityService.pack(following.followee ?? following.followeeId, me, {
+				detail: true,
+			}) : undefined,
+			follower: opts.populateFollower ? this.userEntityService.pack(following.follower ?? following.followerId, me, {
+				detail: true,
+			}) : undefined,
+		});
+	}
+
+	public packMany(
+		followings: any[],
+		me?: { id: User['id'] } | null | undefined,
+		opts?: {
+			populateFollowee?: boolean;
+			populateFollower?: boolean;
+		},
+	) {
+		return Promise.all(followings.map(x => this.pack(x, me, opts)));
+	}
+}
+
diff --git a/packages/backend/src/core/entities/GalleryLikeEntityService.ts b/packages/backend/src/core/entities/GalleryLikeEntityService.ts
new file mode 100644
index 0000000000..9473ed90b7
--- /dev/null
+++ b/packages/backend/src/core/entities/GalleryLikeEntityService.ts
@@ -0,0 +1,41 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { GalleryPosts, GalleryLikesRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { GalleryLike } from '@/models/entities/GalleryLike.js';
+import { UserEntityService } from './UserEntityService.js';
+import { GalleryPostEntityService } from './GalleryPostEntityService.js';
+
+@Injectable()
+export class GalleryLikeEntityService {
+	constructor(
+		@Inject(DI.galleryLikesRepository)
+		private galleryLikesRepository: GalleryLikesRepository,
+
+		private galleryPostEntityService: GalleryPostEntityService,
+	) {
+	}
+
+	public async pack(
+		src: GalleryLike['id'] | GalleryLike,
+		me?: any,
+	) {
+		const like = typeof src === 'object' ? src : await this.galleryLikesRepository.findOneByOrFail({ id: src });
+
+		return {
+			id: like.id,
+			post: await this.galleryPostEntityService.pack(like.post ?? like.postId, me),
+		};
+	}
+
+	public packMany(
+		likes: any[],
+		me: any,
+	) {
+		return Promise.all(likes.map(x => this.pack(x, me)));
+	}
+}
+
diff --git a/packages/backend/src/core/entities/GalleryPostEntityService.ts b/packages/backend/src/core/entities/GalleryPostEntityService.ts
new file mode 100644
index 0000000000..82b41697c9
--- /dev/null
+++ b/packages/backend/src/core/entities/GalleryPostEntityService.ts
@@ -0,0 +1,57 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { GalleryLikesRepository, GalleryPostsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { GalleryPost } from '@/models/entities/GalleryPost.js';
+import { UserEntityService } from './UserEntityService.js';
+import { DriveFileEntityService } from './DriveFileEntityService.js';
+
+@Injectable()
+export class GalleryPostEntityService {
+	constructor(
+		@Inject(DI.galleryPostsRepository)
+		private galleryPostsRepository: GalleryPostsRepository,
+
+		@Inject(DI.galleryLikesRepository)
+		private galleryLikesRepository: GalleryLikesRepository,
+
+		private userEntityService: UserEntityService,
+		private driveFileEntityService: DriveFileEntityService,
+	) {
+	}
+
+	public async pack(
+		src: GalleryPost['id'] | GalleryPost,
+		me?: { id: User['id'] } | null | undefined,
+	): Promise<Packed<'GalleryPost'>> {
+		const meId = me ? me.id : null;
+		const post = typeof src === 'object' ? src : await this.galleryPostsRepository.findOneByOrFail({ id: src });
+
+		return await awaitAll({
+			id: post.id,
+			createdAt: post.createdAt.toISOString(),
+			updatedAt: post.updatedAt.toISOString(),
+			userId: post.userId,
+			user: this.userEntityService.pack(post.user ?? post.userId, me),
+			title: post.title,
+			description: post.description,
+			fileIds: post.fileIds,
+			files: this.driveFileEntityService.packMany(post.fileIds),
+			tags: post.tags.length > 0 ? post.tags : undefined,
+			isSensitive: post.isSensitive,
+			likedCount: post.likedCount,
+			isLiked: meId ? await this.galleryLikesRepository.findOneBy({ postId: post.id, userId: meId }).then(x => x != null) : undefined,
+		});
+	}
+
+	public packMany(
+		posts: GalleryPost[],
+		me?: { id: User['id'] } | null | undefined,
+	) {
+		return Promise.all(posts.map(x => this.pack(x, me)));
+	}
+}
+
diff --git a/packages/backend/src/core/entities/HashtagEntityService.ts b/packages/backend/src/core/entities/HashtagEntityService.ts
new file mode 100644
index 0000000000..6dcbf49030
--- /dev/null
+++ b/packages/backend/src/core/entities/HashtagEntityService.ts
@@ -0,0 +1,41 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { HashtagsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { Hashtag } from '@/models/entities/Hashtag.js';
+import { UserEntityService } from './UserEntityService.js';
+
+@Injectable()
+export class HashtagEntityService {
+	constructor(
+		@Inject(DI.hashtagsRepository)
+		private hashtagsRepository: HashtagsRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+	}
+
+	public async pack(
+		src: Hashtag,
+	): Promise<Packed<'Hashtag'>> {
+		return {
+			tag: src.name,
+			mentionedUsersCount: src.mentionedUsersCount,
+			mentionedLocalUsersCount: src.mentionedLocalUsersCount,
+			mentionedRemoteUsersCount: src.mentionedRemoteUsersCount,
+			attachedUsersCount: src.attachedUsersCount,
+			attachedLocalUsersCount: src.attachedLocalUsersCount,
+			attachedRemoteUsersCount: src.attachedRemoteUsersCount,
+		};
+	}
+
+	public packMany(
+		hashtags: Hashtag[],
+	) {
+		return Promise.all(hashtags.map(x => this.pack(x)));
+	}
+}
+
diff --git a/packages/backend/src/core/entities/InstanceEntityService.ts b/packages/backend/src/core/entities/InstanceEntityService.ts
new file mode 100644
index 0000000000..c58c2f8f34
--- /dev/null
+++ b/packages/backend/src/core/entities/InstanceEntityService.ts
@@ -0,0 +1,59 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { InstancesRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { Instance } from '@/models/entities/Instance.js';
+import { MetaService } from '../MetaService.js';
+import { UserEntityService } from './UserEntityService.js';
+
+@Injectable()
+export class InstanceEntityService {
+	constructor(
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
+
+		private metaService: MetaService,
+	) {
+	}
+
+	public async pack(
+		instance: Instance,
+	): Promise<Packed<'FederationInstance'>> {
+		const meta = await this.metaService.fetch();
+		return {
+			id: instance.id,
+			caughtAt: instance.caughtAt.toISOString(),
+			host: instance.host,
+			usersCount: instance.usersCount,
+			notesCount: instance.notesCount,
+			followingCount: instance.followingCount,
+			followersCount: instance.followersCount,
+			latestRequestSentAt: instance.latestRequestSentAt ? instance.latestRequestSentAt.toISOString() : null,
+			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,
+			name: instance.name,
+			description: instance.description,
+			maintainerName: instance.maintainerName,
+			maintainerEmail: instance.maintainerEmail,
+			iconUrl: instance.iconUrl,
+			faviconUrl: instance.faviconUrl,
+			themeColor: instance.themeColor,
+			infoUpdatedAt: instance.infoUpdatedAt ? instance.infoUpdatedAt.toISOString() : null,
+		};
+	}
+
+	public packMany(
+		instances: Instance[],
+	) {
+		return Promise.all(instances.map(x => this.pack(x)));
+	}
+}
+
diff --git a/packages/backend/src/core/entities/MessagingMessageEntityService.ts b/packages/backend/src/core/entities/MessagingMessageEntityService.ts
new file mode 100644
index 0000000000..04467b94e4
--- /dev/null
+++ b/packages/backend/src/core/entities/MessagingMessageEntityService.ts
@@ -0,0 +1,57 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { MessagingMessagesRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { MessagingMessage } from '@/models/entities/MessagingMessage.js';
+import { UserEntityService } from './UserEntityService.js';
+import { DriveFileEntityService } from './DriveFileEntityService.js';
+import { UserGroupEntityService } from './UserGroupEntityService.js';
+
+@Injectable()
+export class MessagingMessageEntityService {
+	constructor(
+		@Inject(DI.messagingMessagesRepository)
+		private messagingMessagesRepository: MessagingMessagesRepository,
+
+		private userEntityService: UserEntityService,
+		private userGroupEntityService: UserGroupEntityService,
+		private driveFileEntityService: DriveFileEntityService,
+	) {
+	}
+
+	public async pack(
+		src: MessagingMessage['id'] | MessagingMessage,
+		me?: { id: User['id'] } | null | undefined,
+		options?: {
+			populateRecipient?: boolean,
+			populateGroup?: boolean,
+		},
+	): Promise<Packed<'MessagingMessage'>> {
+		const opts = options ?? {
+			populateRecipient: true,
+			populateGroup: true,
+		};
+
+		const message = typeof src === 'object' ? src : await this.messagingMessagesRepository.findOneByOrFail({ id: src });
+
+		return {
+			id: message.id,
+			createdAt: message.createdAt.toISOString(),
+			text: message.text,
+			userId: message.userId,
+			user: await this.userEntityService.pack(message.user ?? message.userId, me),
+			recipientId: message.recipientId,
+			recipient: message.recipientId && opts.populateRecipient ? await this.userEntityService.pack(message.recipient ?? message.recipientId, me) : undefined,
+			groupId: message.groupId,
+			group: message.groupId && opts.populateGroup ? await this.userGroupEntityService.pack(message.group ?? message.groupId) : undefined,
+			fileId: message.fileId,
+			file: message.fileId ? await this.driveFileEntityService.pack(message.fileId) : null,
+			isRead: message.isRead,
+			reads: message.reads,
+		};
+	}
+}
+
diff --git a/packages/backend/src/core/entities/ModerationLogEntityService.ts b/packages/backend/src/core/entities/ModerationLogEntityService.ts
new file mode 100644
index 0000000000..45d15088fc
--- /dev/null
+++ b/packages/backend/src/core/entities/ModerationLogEntityService.ts
@@ -0,0 +1,44 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { ModerationLogsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { ModerationLog } from '@/models/entities/ModerationLog.js';
+import { UserEntityService } from './UserEntityService.js';
+
+@Injectable()
+export class ModerationLogEntityService {
+	constructor(
+		@Inject(DI.moderationLogsRepository)
+		private moderationLogsRepository: ModerationLogsRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+	}
+
+	public async pack(
+		src: ModerationLog['id'] | ModerationLog,
+	) {
+		const log = typeof src === 'object' ? src : await this.moderationLogsRepository.findOneByOrFail({ id: src });
+
+		return await awaitAll({
+			id: log.id,
+			createdAt: log.createdAt.toISOString(),
+			type: log.type,
+			info: log.info,
+			userId: log.userId,
+			user: this.userEntityService.pack(log.user ?? log.userId, null, {
+				detail: true,
+			}),
+		});
+	}
+
+	public packMany(
+		reports: any[],
+	) {
+		return Promise.all(reports.map(x => this.pack(x)));
+	}
+}
+
diff --git a/packages/backend/src/core/entities/MutingEntityService.ts b/packages/backend/src/core/entities/MutingEntityService.ts
new file mode 100644
index 0000000000..c5245bf203
--- /dev/null
+++ b/packages/backend/src/core/entities/MutingEntityService.ts
@@ -0,0 +1,45 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { MutingsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { Muting } from '@/models/entities/Muting.js';
+import { UserEntityService } from './UserEntityService.js';
+
+@Injectable()
+export class MutingEntityService {
+	constructor(
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+	}
+
+	public async pack(
+		src: Muting['id'] | Muting,
+		me?: { id: User['id'] } | null | undefined,
+	): Promise<Packed<'Muting'>> {
+		const muting = typeof src === 'object' ? src : await this.mutingsRepository.findOneByOrFail({ id: src });
+
+		return await awaitAll({
+			id: muting.id,
+			createdAt: muting.createdAt.toISOString(),
+			expiresAt: muting.expiresAt ? muting.expiresAt.toISOString() : null,
+			muteeId: muting.muteeId,
+			mutee: this.userEntityService.pack(muting.muteeId, me, {
+				detail: true,
+			}),
+		});
+	}
+
+	public packMany(
+		mutings: any[],
+		me: { id: User['id'] },
+	) {
+		return Promise.all(mutings.map(x => this.pack(x, me)));
+	}
+}
+
diff --git a/packages/backend/src/core/entities/NoteEntityService.ts b/packages/backend/src/core/entities/NoteEntityService.ts
new file mode 100644
index 0000000000..eab233bbef
--- /dev/null
+++ b/packages/backend/src/core/entities/NoteEntityService.ts
@@ -0,0 +1,396 @@
+import { forwardRef, Inject, Injectable } from '@nestjs/common';
+import { DataSource, In } from 'typeorm';
+import * as mfm from 'mfm-js';
+import { ModuleRef } from '@nestjs/core';
+import { DI } from '@/di-symbols.js';
+import type { Notes, Polls, PollVotes, DriveFiles, Channels, Followings, Users, NoteReactions } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type { Packed } from '@/misc/schema.js';
+import { nyaize } from '@/misc/nyaize.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { User } from '@/models/entities/User.js';
+import type { Note } from '@/models/entities/Note.js';
+import type { NoteReaction } from '@/models/entities/NoteReaction.js';
+import type { OnModuleInit } from '@nestjs/common';
+import type { CustomEmojiService } from '../CustomEmojiService.js';
+import type { ReactionService } from '../ReactionService.js';
+import type { UserEntityService } from './UserEntityService.js';
+import type { DriveFileEntityService } from './DriveFileEntityService.js';
+
+@Injectable()
+export class NoteEntityService implements OnModuleInit {
+	private userEntityService: UserEntityService;
+	private driveFileEntityService: DriveFileEntityService;
+	private customEmojiService: CustomEmojiService;
+	private reactionService: ReactionService;
+	
+	constructor(
+		private moduleRef: ModuleRef,
+
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		@Inject(DI.pollsRepository)
+		private pollsRepository: PollsRepository,
+
+		@Inject(DI.pollVotesRepository)
+		private pollVotesRepository: PollVotesRepository,
+
+		@Inject(DI.noteReactionsRepository)
+		private noteReactionsRepository: NoteReactionsRepository,
+
+		@Inject(DI.channelsRepository)
+		private channelsRepository: ChannelsRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		//private userEntityService: UserEntityService,
+		//private driveFileEntityService: DriveFileEntityService,
+		//private customEmojiService: CustomEmojiService,
+		//private reactionService: ReactionService,
+	) {
+	}
+
+	onModuleInit() {
+		this.userEntityService = this.moduleRef.get('UserEntityService');
+		this.driveFileEntityService = this.moduleRef.get('DriveFileEntityService');
+		this.customEmojiService = this.moduleRef.get('CustomEmojiService');
+		this.reactionService = this.moduleRef.get('ReactionService');
+	}
+	
+	async #hideNote(packedNote: Packed<'Note'>, meId: User['id'] | null) {
+	// TODO: isVisibleForMe を使うようにしても良さそう(型違うけど)
+		let hide = false;
+
+		// visibility が specified かつ自分が指定されていなかったら非表示
+		if (packedNote.visibility === 'specified') {
+			if (meId == null) {
+				hide = true;
+			} else if (meId === packedNote.userId) {
+				hide = false;
+			} else {
+			// 指定されているかどうか
+				const specified = packedNote.visibleUserIds!.some((id: any) => meId === id);
+
+				if (specified) {
+					hide = false;
+				} else {
+					hide = true;
+				}
+			}
+		}
+
+		// visibility が followers かつ自分が投稿者のフォロワーでなかったら非表示
+		if (packedNote.visibility === 'followers') {
+			if (meId == null) {
+				hide = true;
+			} else if (meId === packedNote.userId) {
+				hide = false;
+			} else if (packedNote.reply && (meId === packedNote.reply.userId)) {
+			// 自分の投稿に対するリプライ
+				hide = false;
+			} else if (packedNote.mentions && packedNote.mentions.some(id => meId === id)) {
+			// 自分へのメンション
+				hide = false;
+			} else {
+			// フォロワーかどうか
+				const following = await this.followingsRepository.findOneBy({
+					followeeId: packedNote.userId,
+					followerId: meId,
+				});
+
+				if (following == null) {
+					hide = true;
+				} else {
+					hide = false;
+				}
+			}
+		}
+
+		if (hide) {
+			packedNote.visibleUserIds = undefined;
+			packedNote.fileIds = [];
+			packedNote.files = [];
+			packedNote.text = null;
+			packedNote.poll = undefined;
+			packedNote.cw = null;
+			packedNote.isHidden = true;
+		}
+	}
+
+	async #populatePoll(note: Note, meId: User['id'] | null) {
+		const poll = await this.pollsRepository.findOneByOrFail({ noteId: note.id });
+		const choices = poll.choices.map(c => ({
+			text: c,
+			votes: poll.votes[poll.choices.indexOf(c)],
+			isVoted: false,
+		}));
+
+		if (meId) {
+			if (poll.multiple) {
+				const votes = await this.pollVotesRepository.findBy({
+					userId: meId,
+					noteId: note.id,
+				});
+
+				const myChoices = votes.map(v => v.choice);
+				for (const myChoice of myChoices) {
+					choices[myChoice].isVoted = true;
+				}
+			} else {
+				const vote = await this.pollVotesRepository.findOneBy({
+					userId: meId,
+					noteId: note.id,
+				});
+
+				if (vote) {
+					choices[vote.choice].isVoted = true;
+				}
+			}
+		}
+
+		return {
+			multiple: poll.multiple,
+			expiresAt: poll.expiresAt,
+			choices,
+		};
+	}
+
+	async #populateMyReaction(note: Note, meId: User['id'], _hint_?: {
+		myReactions: Map<Note['id'], NoteReaction | null>;
+	}) {
+		if (_hint_?.myReactions) {
+			const reaction = _hint_.myReactions.get(note.id);
+			if (reaction) {
+				return this.reactionService.convertLegacyReaction(reaction.reaction);
+			} else if (reaction === null) {
+				return undefined;
+			}
+		// 実装上抜けがあるだけかもしれないので、「ヒントに含まれてなかったら(=undefinedなら)return」のようにはしない
+		}
+
+		const reaction = await this.noteReactionsRepository.findOneBy({
+			userId: meId,
+			noteId: note.id,
+		});
+
+		if (reaction) {
+			return this.reactionService.convertLegacyReaction(reaction.reaction);
+		}
+
+		return undefined;
+	}
+
+	public async isVisibleForMe(note: Note, meId: User['id'] | null): Promise<boolean> {
+		// This code must always be synchronized with the checks in generateVisibilityQuery.
+		// visibility が specified かつ自分が指定されていなかったら非表示
+		if (note.visibility === 'specified') {
+			if (meId == null) {
+				return false;
+			} else if (meId === note.userId) {
+				return true;
+			} else {
+				// 指定されているかどうか
+				return note.visibleUserIds.some((id: any) => meId === id);
+			}
+		}
+
+		// visibility が followers かつ自分が投稿者のフォロワーでなかったら非表示
+		if (note.visibility === 'followers') {
+			if (meId == null) {
+				return false;
+			} else if (meId === note.userId) {
+				return true;
+			} else if (note.reply && (meId === note.reply.userId)) {
+				// 自分の投稿に対するリプライ
+				return true;
+			} else if (note.mentions && note.mentions.some(id => meId === id)) {
+				// 自分へのメンション
+				return true;
+			} else {
+				// フォロワーかどうか
+				const [following, user] = await Promise.all([
+					this.followingsRepository.count({
+						where: {
+							followeeId: note.userId,
+							followerId: meId,
+						},
+						take: 1,
+					}),
+					this.usersRepository.findOneByOrFail({ id: meId }),
+				]);
+
+				/* If we know the following, everyhting is fine.
+
+				But if we do not know the following, it might be that both the
+				author of the note and the author of the like are remote users,
+				in which case we can never know the following. Instead we have
+				to assume that the users are following each other.
+				*/
+				return following > 0 || (note.userHost != null && user.host != null);
+			}
+		}
+
+		return true;
+	}
+
+	public async pack(
+		src: Note['id'] | Note,
+		me?: { id: User['id'] } | null | undefined,
+		options?: {
+			detail?: boolean;
+			skipHide?: boolean;
+			_hint_?: {
+				myReactions: Map<Note['id'], NoteReaction | null>;
+			};
+		},
+	): Promise<Packed<'Note'>> {
+		const opts = Object.assign({
+			detail: true,
+			skipHide: false,
+		}, options);
+
+		const meId = me ? me.id : null;
+		const note = typeof src === 'object' ? src : await this.notesRepository.findOneByOrFail({ id: src });
+		const host = note.userHost;
+
+		let text = note.text;
+
+		if (note.name && (note.url ?? note.uri)) {
+			text = `【${note.name}】\n${(note.text || '').trim()}\n\n${note.url ?? note.uri}`;
+		}
+
+		const channel = note.channelId
+			? note.channel
+				? note.channel
+				: await this.channelsRepository.findOneBy({ id: note.channelId })
+			: null;
+
+		const reactionEmojiNames = Object.keys(note.reactions).filter(x => x.startsWith(':')).map(x => this.reactionService.decodeReaction(x).reaction).map(x => x.replace(/:/g, ''));
+
+		const packed: Packed<'Note'> = await awaitAll({
+			id: note.id,
+			createdAt: note.createdAt.toISOString(),
+			userId: note.userId,
+			user: this.userEntityService.pack(note.user ?? note.userId, me, {
+				detail: false,
+			}),
+			text: text,
+			cw: note.cw,
+			visibility: note.visibility,
+			localOnly: note.localOnly ?? undefined,
+			visibleUserIds: note.visibility === 'specified' ? note.visibleUserIds : undefined,
+			renoteCount: note.renoteCount,
+			repliesCount: note.repliesCount,
+			reactions: this.reactionService.convertLegacyReactions(note.reactions),
+			tags: note.tags.length > 0 ? note.tags : undefined,
+			emojis: this.customEmojiService.populateEmojis(note.emojis.concat(reactionEmojiNames), host),
+			fileIds: note.fileIds,
+			files: this.driveFileEntityService.packMany(note.fileIds),
+			replyId: note.replyId,
+			renoteId: note.renoteId,
+			channelId: note.channelId ?? undefined,
+			channel: channel ? {
+				id: channel.id,
+				name: channel.name,
+			} : undefined,
+			mentions: note.mentions.length > 0 ? note.mentions : undefined,
+			uri: note.uri ?? undefined,
+			url: note.url ?? undefined,
+
+			...(opts.detail ? {
+				reply: note.replyId ? this.pack(note.reply ?? note.replyId, me, {
+					detail: false,
+					_hint_: options?._hint_,
+				}) : undefined,
+
+				renote: note.renoteId ? this.pack(note.renote ?? note.renoteId, me, {
+					detail: true,
+					_hint_: options?._hint_,
+				}) : undefined,
+
+				poll: note.hasPoll ? this.#populatePoll(note, meId) : undefined,
+
+				...(meId ? {
+					myReaction: this.#populateMyReaction(note, meId, options?._hint_),
+				} : {}),
+			} : {}),
+		});
+
+		if (packed.user.isCat && packed.text) {
+			const tokens = packed.text ? mfm.parse(packed.text) : [];
+			mfm.inspect(tokens, node => {
+				if (node.type === 'text') {
+					// TODO: quoteなtextはskip
+					node.props.text = nyaize(node.props.text);
+				}
+			});
+			packed.text = mfm.toString(tokens);
+		}
+
+		if (!opts.skipHide) {
+			await this.#hideNote(packed, meId);
+		}
+
+		return packed;
+	}
+
+	public async packMany(
+		notes: Note[],
+		me?: { id: User['id'] } | null | undefined,
+		options?: {
+			detail?: boolean;
+			skipHide?: boolean;
+		},
+	) {
+		if (notes.length === 0) return [];
+
+		const meId = me ? me.id : null;
+		const myReactionsMap = new Map<Note['id'], NoteReaction | null>();
+		if (meId) {
+			const renoteIds = notes.filter(n => n.renoteId != null).map(n => n.renoteId!);
+			const targets = [...notes.map(n => n.id), ...renoteIds];
+			const myReactions = await this.noteReactionsRepository.findBy({
+				userId: meId,
+				noteId: In(targets),
+			});
+
+			for (const target of targets) {
+				myReactionsMap.set(target, myReactions.find(reaction => reaction.noteId === target) ?? null);
+			}
+		}
+
+		await this.customEmojiService.prefetchEmojis(this.customEmojiService.aggregateNoteEmojis(notes));
+
+		return await Promise.all(notes.map(n => this.pack(n, me, {
+			...options,
+			_hint_: {
+				myReactions: myReactionsMap,
+			},
+		})));
+	}
+
+	public async countSameRenotes(userId: string, renoteId: string, excludeNoteId: string | undefined): Promise<number> {
+		// 指定したユーザーの指定したノートのリノートがいくつあるか数える
+		const query = this.notesRepository.createQueryBuilder('note')
+			.where('note.userId = :userId', { userId })
+			.andWhere('note.renoteId = :renoteId', { renoteId });
+	
+		// 指定した投稿を除く
+		if (excludeNoteId) {
+			query.andWhere('note.id != :excludeNoteId', { excludeNoteId });
+		}
+	
+		return await query.getCount();
+	}	
+}
diff --git a/packages/backend/src/core/entities/NoteFavoriteEntityService.ts b/packages/backend/src/core/entities/NoteFavoriteEntityService.ts
new file mode 100644
index 0000000000..f0bbf27b6a
--- /dev/null
+++ b/packages/backend/src/core/entities/NoteFavoriteEntityService.ts
@@ -0,0 +1,42 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { NoteFavoritesRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { NoteFavorite } from '@/models/entities/NoteFavorite.js';
+import { UserEntityService } from './UserEntityService.js';
+import { NoteEntityService } from './NoteEntityService.js';
+
+@Injectable()
+export class NoteFavoriteEntityService {
+	constructor(
+		@Inject(DI.noteFavoritesRepository)
+		private noteFavoritesRepository: NoteFavoritesRepository,
+
+		private noteEntityService: NoteEntityService,
+	) {
+	}
+
+	public async pack(
+		src: NoteFavorite['id'] | NoteFavorite,
+		me?: { id: User['id'] } | null | undefined,
+	) {
+		const favorite = typeof src === 'object' ? src : await this.noteFavoritesRepository.findOneByOrFail({ id: src });
+
+		return {
+			id: favorite.id,
+			createdAt: favorite.createdAt.toISOString(),
+			noteId: favorite.noteId,
+			note: await this.noteEntityService.pack(favorite.note ?? favorite.noteId, me),
+		};
+	}
+
+	public packMany(
+		favorites: any[],
+		me: { id: User['id'] },
+	) {
+		return Promise.all(favorites.map(x => this.pack(x, me)));
+	}
+}
diff --git a/packages/backend/src/core/entities/NoteReactionEntityService.ts b/packages/backend/src/core/entities/NoteReactionEntityService.ts
new file mode 100644
index 0000000000..e64f2af681
--- /dev/null
+++ b/packages/backend/src/core/entities/NoteReactionEntityService.ts
@@ -0,0 +1,62 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { NoteReactionsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { OnModuleInit } from '@nestjs/common';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { NoteReaction } from '@/models/entities/NoteReaction.js';
+import type { ReactionService } from '../ReactionService.js';
+import type { UserEntityService } from './UserEntityService.js';
+import type { NoteEntityService } from './NoteEntityService.js';
+import { ModuleRef } from '@nestjs/core';
+
+@Injectable()
+export class NoteReactionEntityService implements OnModuleInit {
+	private userEntityService: UserEntityService;
+	private noteEntityService: NoteEntityService;
+	private reactionService: ReactionService;
+	
+	constructor(
+		private moduleRef: ModuleRef,
+
+		@Inject(DI.noteReactionsRepository)
+		private noteReactionsRepository: NoteReactionsRepository,
+
+		//private userEntityService: UserEntityService,
+		//private noteEntityService: NoteEntityService,
+		//private reactionService: ReactionService,
+	) {
+	}
+
+	onModuleInit() {
+		this.userEntityService = this.moduleRef.get('UserEntityService');
+		this.noteEntityService = this.moduleRef.get('NoteEntityService');
+		this.reactionService = this.moduleRef.get('ReactionService');
+	}
+
+	public async pack(
+		src: NoteReaction['id'] | NoteReaction,
+		me?: { id: User['id'] } | null | undefined,
+		options?: {
+			withNote: boolean;
+		},
+	): Promise<Packed<'NoteReaction'>> {
+		const opts = Object.assign({
+			withNote: false,
+		}, options);
+
+		const reaction = typeof src === 'object' ? src : await this.noteReactionsRepository.findOneByOrFail({ id: src });
+
+		return {
+			id: reaction.id,
+			createdAt: reaction.createdAt.toISOString(),
+			user: await this.userEntityService.pack(reaction.user ?? reaction.userId, me),
+			type: this.reactionService.convertLegacyReaction(reaction.reaction),
+			...(opts.withNote ? {
+				note: await this.noteEntityService.pack(reaction.note ?? reaction.noteId, me),
+			} : {}),
+		};
+	}
+}
diff --git a/packages/backend/src/core/entities/NotificationEntityService.ts b/packages/backend/src/core/entities/NotificationEntityService.ts
new file mode 100644
index 0000000000..6a0683d543
--- /dev/null
+++ b/packages/backend/src/core/entities/NotificationEntityService.ts
@@ -0,0 +1,151 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { In } from 'typeorm';
+import { ModuleRef } from '@nestjs/core';
+import { DI } from '@/di-symbols.js';
+import { AccessTokensRepository, NoteReactionsRepository, NotificationsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Notification } from '@/models/entities/Notification.js';
+import type { NoteReaction } from '@/models/entities/NoteReaction.js';
+import type { Note } from '@/models/entities/Note.js';
+import type { Packed } from '@/misc/schema.js';
+import type { OnModuleInit } from '@nestjs/common';
+import type { CustomEmojiService } from '../CustomEmojiService.js';
+import type { UserEntityService } from './UserEntityService.js';
+import type { NoteEntityService } from './NoteEntityService.js';
+import type { UserGroupInvitationEntityService } from './UserGroupInvitationEntityService.js';
+
+@Injectable()
+export class NotificationEntityService implements OnModuleInit {
+	private userEntityService: UserEntityService;
+	private noteEntityService: NoteEntityService;
+	private userGroupInvitationEntityService: UserGroupInvitationEntityService;
+	private customEmojiService: CustomEmojiService;
+
+	constructor(
+		private moduleRef: ModuleRef,
+
+		@Inject(DI.notificationsRepository)
+		private notificationsRepository: NotificationsRepository,
+
+		@Inject(DI.noteReactionsRepository)
+		private noteReactionsRepository: NoteReactionsRepository,
+
+		@Inject(DI.accessTokensRepository)
+		private accessTokensRepository: AccessTokensRepository,
+
+		//private userEntityService: UserEntityService,
+		//private noteEntityService: NoteEntityService,
+		//private userGroupInvitationEntityService: UserGroupInvitationEntityService,
+		//private customEmojiService: CustomEmojiService,
+	) {
+	}
+
+	onModuleInit() {
+		this.userEntityService = this.moduleRef.get('UserEntityService');
+		this.noteEntityService = this.moduleRef.get('NoteEntityService');
+		this.userGroupInvitationEntityService = this.moduleRef.get('UserGroupInvitationEntityService');
+		this.customEmojiService = this.moduleRef.get('CustomEmojiService');
+	}
+
+	public async pack(
+		src: Notification['id'] | Notification,
+		options: {
+			_hintForEachNotes_?: {
+				myReactions: Map<Note['id'], NoteReaction | null>;
+			};
+		},
+	): Promise<Packed<'Notification'>> {
+		const notification = typeof src === 'object' ? src : await this.notificationsRepository.findOneByOrFail({ id: src });
+		const token = notification.appAccessTokenId ? await this.accessTokensRepository.findOneByOrFail({ id: notification.appAccessTokenId }) : null;
+
+		return await awaitAll({
+			id: notification.id,
+			createdAt: notification.createdAt.toISOString(),
+			type: notification.type,
+			isRead: notification.isRead,
+			userId: notification.notifierId,
+			user: notification.notifierId ? this.userEntityService.pack(notification.notifier ?? notification.notifierId) : null,
+			...(notification.type === 'mention' ? {
+				note: this.noteEntityService.pack(notification.note ?? notification.noteId!, { id: notification.notifieeId }, {
+					detail: true,
+					_hint_: options._hintForEachNotes_,
+				}),
+			} : {}),
+			...(notification.type === 'reply' ? {
+				note: this.noteEntityService.pack(notification.note ?? notification.noteId!, { id: notification.notifieeId }, {
+					detail: true,
+					_hint_: options._hintForEachNotes_,
+				}),
+			} : {}),
+			...(notification.type === 'renote' ? {
+				note: this.noteEntityService.pack(notification.note ?? notification.noteId!, { id: notification.notifieeId }, {
+					detail: true,
+					_hint_: options._hintForEachNotes_,
+				}),
+			} : {}),
+			...(notification.type === 'quote' ? {
+				note: this.noteEntityService.pack(notification.note ?? notification.noteId!, { id: notification.notifieeId }, {
+					detail: true,
+					_hint_: options._hintForEachNotes_,
+				}),
+			} : {}),
+			...(notification.type === 'reaction' ? {
+				note: this.noteEntityService.pack(notification.note ?? notification.noteId!, { id: notification.notifieeId }, {
+					detail: true,
+					_hint_: options._hintForEachNotes_,
+				}),
+				reaction: notification.reaction,
+			} : {}),
+			...(notification.type === 'pollVote' ? {
+				note: this.noteEntityService.pack(notification.note ?? notification.noteId!, { id: notification.notifieeId }, {
+					detail: true,
+					_hint_: options._hintForEachNotes_,
+				}),
+				choice: notification.choice,
+			} : {}),
+			...(notification.type === 'pollEnded' ? {
+				note: this.noteEntityService.pack(notification.note ?? notification.noteId!, { id: notification.notifieeId }, {
+					detail: true,
+					_hint_: options._hintForEachNotes_,
+				}),
+			} : {}),
+			...(notification.type === 'groupInvited' ? {
+				invitation: this.userGroupInvitationEntityService.pack(notification.userGroupInvitationId!),
+			} : {}),
+			...(notification.type === 'app' ? {
+				body: notification.customBody,
+				header: notification.customHeader ?? token?.name,
+				icon: notification.customIcon ?? token?.iconUrl,
+			} : {}),
+		});
+	}
+
+	public async packMany(
+		notifications: Notification[],
+		meId: User['id'],
+	) {
+		if (notifications.length === 0) return [];
+
+		const notes = notifications.filter(x => x.note != null).map(x => x.note!);
+		const noteIds = notes.map(n => n.id);
+		const myReactionsMap = new Map<Note['id'], NoteReaction | null>();
+		const renoteIds = notes.filter(n => n.renoteId != null).map(n => n.renoteId!);
+		const targets = [...noteIds, ...renoteIds];
+		const myReactions = await this.noteReactionsRepository.findBy({
+			userId: meId,
+			noteId: In(targets),
+		});
+
+		for (const target of targets) {
+			myReactionsMap.set(target, myReactions.find(reaction => reaction.noteId === target) ?? null);
+		}
+
+		await this.customEmojiService.prefetchEmojis(this.customEmojiService.aggregateNoteEmojis(notes));
+
+		return await Promise.all(notifications.map(x => this.pack(x, {
+			_hintForEachNotes_: {
+				myReactions: myReactionsMap,
+			},
+		})));
+	}
+}
diff --git a/packages/backend/src/core/entities/PageEntityService.ts b/packages/backend/src/core/entities/PageEntityService.ts
new file mode 100644
index 0000000000..cbd193fe0a
--- /dev/null
+++ b/packages/backend/src/core/entities/PageEntityService.ts
@@ -0,0 +1,109 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { DriveFilesRepository, PagesRepository, PageLikesRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { Page } from '@/models/entities/Page.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import { UserEntityService } from './UserEntityService.js';
+import { DriveFileEntityService } from './DriveFileEntityService.js';
+
+@Injectable()
+export class PageEntityService {
+	constructor(
+		@Inject(DI.pagesRepository)
+		private pagesRepository: PagesRepository,
+
+		@Inject(DI.pageLikesRepository)
+		private pageLikesRepository: PageLikesRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private userEntityService: UserEntityService,
+		private driveFileEntityService: DriveFileEntityService,
+	) {
+	}
+
+	public async pack(
+		src: Page['id'] | Page,
+		me?: { id: User['id'] } | null | undefined,
+	): Promise<Packed<'Page'>> {
+		const meId = me ? me.id : null;
+		const page = typeof src === 'object' ? src : await this.pagesRepository.findOneByOrFail({ id: src });
+
+		const attachedFiles: Promise<DriveFile | null>[] = [];
+		const collectFile = (xs: any[]) => {
+			for (const x of xs) {
+				if (x.type === 'image') {
+					attachedFiles.push(this.driveFilesRepository.findOneBy({
+						id: x.fileId,
+						userId: page.userId,
+					}));
+				}
+				if (x.children) {
+					collectFile(x.children);
+				}
+			}
+		};
+		collectFile(page.content);
+
+		// 後方互換性のため
+		let migrated = false;
+		const migrate = (xs: any[]) => {
+			for (const x of xs) {
+				if (x.type === 'input') {
+					if (x.inputType === 'text') {
+						x.type = 'textInput';
+					}
+					if (x.inputType === 'number') {
+						x.type = 'numberInput';
+						if (x.default) x.default = parseInt(x.default, 10);
+					}
+					migrated = true;
+				}
+				if (x.children) {
+					migrate(x.children);
+				}
+			}
+		};
+		migrate(page.content);
+		if (migrated) {
+			this.pagesRepository.update(page.id, {
+				content: page.content,
+			});
+		}
+
+		return await awaitAll({
+			id: page.id,
+			createdAt: page.createdAt.toISOString(),
+			updatedAt: page.updatedAt.toISOString(),
+			userId: page.userId,
+			user: this.userEntityService.pack(page.user ?? page.userId, me), // { detail: true } すると無限ループするので注意
+			content: page.content,
+			variables: page.variables,
+			title: page.title,
+			name: page.name,
+			summary: page.summary,
+			hideTitleWhenPinned: page.hideTitleWhenPinned,
+			alignCenter: page.alignCenter,
+			font: page.font,
+			script: page.script,
+			eyeCatchingImageId: page.eyeCatchingImageId,
+			eyeCatchingImage: page.eyeCatchingImageId ? await this.driveFileEntityService.pack(page.eyeCatchingImageId) : null,
+			attachedFiles: this.driveFileEntityService.packMany((await Promise.all(attachedFiles)).filter((x): x is DriveFile => x != null)),
+			likedCount: page.likedCount,
+			isLiked: meId ? await this.pageLikesRepository.findOneBy({ pageId: page.id, userId: meId }).then(x => x != null) : undefined,
+		});
+	}
+
+	public packMany(
+		pages: Page[],
+		me?: { id: User['id'] } | null | undefined,
+	) {
+		return Promise.all(pages.map(x => this.pack(x, me)));
+	}
+}
+
diff --git a/packages/backend/src/core/entities/PageLikeEntityService.ts b/packages/backend/src/core/entities/PageLikeEntityService.ts
new file mode 100644
index 0000000000..dccaf2edec
--- /dev/null
+++ b/packages/backend/src/core/entities/PageLikeEntityService.ts
@@ -0,0 +1,41 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { PageLikesRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { PageLike } from '@/models/entities/PageLike.js';
+import { UserEntityService } from './UserEntityService.js';
+import { PageEntityService } from './PageEntityService.js';
+
+@Injectable()
+export class PageLikeEntityService {
+	constructor(
+		@Inject(DI.pageLikesRepository)
+		private pageLikesRepository: PageLikesRepository,
+
+		private pageEntityService: PageEntityService,
+	) {
+	}
+
+	public async pack(
+		src: PageLike['id'] | PageLike,
+		me?: { id: User['id'] } | null | undefined,
+	) {
+		const like = typeof src === 'object' ? src : await this.pageLikesRepository.findOneByOrFail({ id: src });
+
+		return {
+			id: like.id,
+			page: await this.pageEntityService.pack(like.page ?? like.pageId, me),
+		};
+	}
+
+	public packMany(
+		likes: any[],
+		me: { id: User['id'] },
+	) {
+		return Promise.all(likes.map(x => this.pack(x, me)));
+	}
+}
+
diff --git a/packages/backend/src/core/entities/SigninEntityService.ts b/packages/backend/src/core/entities/SigninEntityService.ts
new file mode 100644
index 0000000000..521c7669e7
--- /dev/null
+++ b/packages/backend/src/core/entities/SigninEntityService.ts
@@ -0,0 +1,27 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { SigninsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { Signin } from '@/models/entities/Signin.js';
+import { UserEntityService } from './UserEntityService.js';
+
+@Injectable()
+export class SigninEntityService {
+	constructor(
+		@Inject(DI.signinsRepository)
+		private signinsRepository: SigninsRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+	}
+
+	public async pack(
+		src: Signin,
+	) {
+		return src;
+	}
+}
+
diff --git a/packages/backend/src/core/entities/UserEntityService.ts b/packages/backend/src/core/entities/UserEntityService.ts
new file mode 100644
index 0000000000..48d8af83fb
--- /dev/null
+++ b/packages/backend/src/core/entities/UserEntityService.ts
@@ -0,0 +1,515 @@
+import { forwardRef, Inject, Injectable } from '@nestjs/common';
+import { EntityRepository, Repository, In, Not } from 'typeorm';
+import Ajv from 'ajv';
+import { ModuleRef } from '@nestjs/core';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import type { Packed } from '@/misc/schema.js';
+import type { Promiseable } from '@/misc/prelude/await-all.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import { USER_ACTIVE_THRESHOLD, USER_ONLINE_THRESHOLD } from '@/const.js';
+import { Cache } from '@/misc/cache.js';
+import type { Instance } from '@/models/entities/Instance.js';
+import type { ILocalUser, IRemoteUser, User } from '@/models/entities/User.js';
+import { birthdaySchema, descriptionSchema, localUsernameSchema, locationSchema, nameSchema, passwordSchema } from '@/models/entities/User.js';
+import type { OnModuleInit } from '@nestjs/common';
+import type { AntennaService } from '../AntennaService.js';
+import type { CustomEmojiService } from '../CustomEmojiService.js';
+import type { NoteEntityService } from './NoteEntityService.js';
+import type { DriveFileEntityService } from './DriveFileEntityService.js';
+import type { PageEntityService } from './PageEntityService.js';
+
+type IsUserDetailed<Detailed extends boolean> = Detailed extends true ? Packed<'UserDetailed'> : Packed<'UserLite'>;
+type IsMeAndIsUserDetailed<ExpectsMe extends boolean | null, Detailed extends boolean> =
+	Detailed extends true ? 
+		ExpectsMe extends true ? Packed<'MeDetailed'> :
+		ExpectsMe extends false ? Packed<'UserDetailedNotMe'> :
+		Packed<'UserDetailed'> :
+	Packed<'UserLite'>;
+
+const ajv = new Ajv();
+
+function isLocalUser(user: User): user is ILocalUser;
+function isLocalUser<T extends { host: User['host'] }>(user: T): user is T & { host: null; };
+function isLocalUser(user: User | { host: User['host'] }): boolean {
+	return user.host == null;
+}
+
+function isRemoteUser(user: User): user is IRemoteUser;
+function isRemoteUser<T extends { host: User['host'] }>(user: T): user is T & { host: string; };
+function isRemoteUser(user: User | { host: User['host'] }): boolean {
+	return !isLocalUser(user);
+}
+
+@Injectable()
+export class UserEntityService implements OnModuleInit {
+	private noteEntityService: NoteEntityService;
+	private driveFileEntityService: DriveFileEntityService;
+	private pageEntityService: PageEntityService;
+	private customEmojiService: CustomEmojiService;
+	private antennaService: AntennaService;
+	#userInstanceCache: Cache<Instance | null>;
+
+	constructor(
+		private moduleRef: ModuleRef,
+
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userSecurityKeysRepository)
+		private userSecurityKeysRepository: UserSecurityKeysRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		@Inject(DI.followRequestsRepository)
+		private followRequestsRepository: FollowRequestsRepository,
+
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		@Inject(DI.noteUnreadsRepository)
+		private noteUnreadsRepository: NoteUnreadsRepository,
+
+		@Inject(DI.channelFollowingsRepository)
+		private channelFollowingsRepository: ChannelFollowingsRepository,
+
+		@Inject(DI.notificationsRepository)
+		private notificationsRepository: NotificationsRepository,
+
+		@Inject(DI.userNotePiningsRepository)
+		private userNotePiningsRepository: UserNotePiningsRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
+
+		@Inject(DI.announcementReadsRepository)
+		private announcementReadsRepository: AnnouncementReadsRepository,
+
+		@Inject(DI.messagingMessagesRepository)
+		private messagingMessagesRepository: MessagingMessagesRepository,
+
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+
+		@Inject(DI.announcementsRepository)
+		private announcementsRepository: AnnouncementsRepository,
+
+		@Inject(DI.antennaNotesRepository)
+		private antennaNotesRepository: AntennaNotesRepository,
+
+		@Inject(DI.pagesRepository)
+		private pagesRepository: PagesRepository,
+
+		//private noteEntityService: NoteEntityService,
+		//private driveFileEntityService: DriveFileEntityService,
+		//private pageEntityService: PageEntityService,
+		//private customEmojiService: CustomEmojiService,
+		//private antennaService: AntennaService,
+	) {
+		this.#userInstanceCache = new Cache<Instance | null>(1000 * 60 * 60 * 3);
+	}
+
+	onModuleInit() {
+		this.noteEntityService = this.moduleRef.get('NoteEntityService');
+		this.driveFileEntityService = this.moduleRef.get('DriveFileEntityService');
+		this.pageEntityService = this.moduleRef.get('PageEntityService');
+		this.customEmojiService = this.moduleRef.get('CustomEmojiService');
+		this.antennaService = this.moduleRef.get('AntennaService');
+	}
+
+	//#region Validators
+	public validateLocalUsername = ajv.compile(localUsernameSchema);
+	public validatePassword = ajv.compile(passwordSchema);
+	public validateName = ajv.compile(nameSchema);
+	public validateDescription = ajv.compile(descriptionSchema);
+	public validateLocation = ajv.compile(locationSchema);
+	public validateBirthday = ajv.compile(birthdaySchema);
+	//#endregion
+
+	public isLocalUser = isLocalUser;
+	public isRemoteUser = isRemoteUser;
+
+	public async getRelation(me: User['id'], target: User['id']) {
+		return awaitAll({
+			id: target,
+			isFollowing: this.followingsRepository.count({
+				where: {
+					followerId: me,
+					followeeId: target,
+				},
+				take: 1,
+			}).then(n => n > 0),
+			isFollowed: this.followingsRepository.count({
+				where: {
+					followerId: target,
+					followeeId: me,
+				},
+				take: 1,
+			}).then(n => n > 0),
+			hasPendingFollowRequestFromYou: this.followRequestsRepository.count({
+				where: {
+					followerId: me,
+					followeeId: target,
+				},
+				take: 1,
+			}).then(n => n > 0),
+			hasPendingFollowRequestToYou: this.followRequestsRepository.count({
+				where: {
+					followerId: target,
+					followeeId: me,
+				},
+				take: 1,
+			}).then(n => n > 0),
+			isBlocking: this.blockingsRepository.count({
+				where: {
+					blockerId: me,
+					blockeeId: target,
+				},
+				take: 1,
+			}).then(n => n > 0),
+			isBlocked: this.blockingsRepository.count({
+				where: {
+					blockerId: target,
+					blockeeId: me,
+				},
+				take: 1,
+			}).then(n => n > 0),
+			isMuted: this.mutingsRepository.count({
+				where: {
+					muterId: me,
+					muteeId: target,
+				},
+				take: 1,
+			}).then(n => n > 0),
+		});
+	}
+
+	public async getHasUnreadMessagingMessage(userId: User['id']): Promise<boolean> {
+		const mute = await this.mutingsRepository.findBy({
+			muterId: userId,
+		});
+
+		const joinings = await this.userGroupJoiningsRepository.findBy({ userId: userId });
+
+		const groupQs = Promise.all(joinings.map(j => this.messagingMessagesRepository.createQueryBuilder('message')
+			.where('message.groupId = :groupId', { groupId: j.userGroupId })
+			.andWhere('message.userId != :userId', { userId: userId })
+			.andWhere('NOT (:userId = ANY(message.reads))', { userId: userId })
+			.andWhere('message.createdAt > :joinedAt', { joinedAt: j.createdAt }) // 自分が加入する前の会話については、未読扱いしない
+			.getOne().then(x => x != null)));
+
+		const [withUser, withGroups] = await Promise.all([
+			this.messagingMessagesRepository.count({
+				where: {
+					recipientId: userId,
+					isRead: false,
+					...(mute.length > 0 ? { userId: Not(In(mute.map(x => x.muteeId))) } : {}),
+				},
+				take: 1,
+			}).then(count => count > 0),
+			groupQs,
+		]);
+
+		return withUser || withGroups.some(x => x);
+	}
+
+	public async getHasUnreadAnnouncement(userId: User['id']): Promise<boolean> {
+		const reads = await this.announcementReadsRepository.findBy({
+			userId: userId,
+		});
+
+		const count = await this.announcementsRepository.countBy(reads.length > 0 ? {
+			id: Not(In(reads.map(read => read.announcementId))),
+		} : {});
+
+		return count > 0;
+	}
+
+	public async getHasUnreadAntenna(userId: User['id']): Promise<boolean> {
+		const myAntennas = (await this.antennaService.getAntennas()).filter(a => a.userId === userId);
+
+		const unread = myAntennas.length > 0 ? await this.antennaNotesRepository.findOneBy({
+			antennaId: In(myAntennas.map(x => x.id)),
+			read: false,
+		}) : null;
+
+		return unread != null;
+	}
+
+	public async getHasUnreadChannel(userId: User['id']): Promise<boolean> {
+		const channels = await this.channelFollowingsRepository.findBy({ followerId: userId });
+
+		const unread = channels.length > 0 ? await this.noteUnreadsRepository.findOneBy({
+			userId: userId,
+			noteChannelId: In(channels.map(x => x.followeeId)),
+		}) : null;
+
+		return unread != null;
+	}
+
+	public async getHasUnreadNotification(userId: User['id']): Promise<boolean> {
+		const mute = await this.mutingsRepository.findBy({
+			muterId: userId,
+		});
+		const mutedUserIds = mute.map(m => m.muteeId);
+
+		const count = await this.notificationsRepository.count({
+			where: {
+				notifieeId: userId,
+				...(mutedUserIds.length > 0 ? { notifierId: Not(In(mutedUserIds)) } : {}),
+				isRead: false,
+			},
+			take: 1,
+		});
+
+		return count > 0;
+	}
+
+	public async getHasPendingReceivedFollowRequest(userId: User['id']): Promise<boolean> {
+		const count = await this.followRequestsRepository.countBy({
+			followeeId: userId,
+		});
+
+		return count > 0;
+	}
+
+	public getOnlineStatus(user: User): 'unknown' | 'online' | 'active' | 'offline' {
+		if (user.hideOnlineStatus) return 'unknown';
+		if (user.lastActiveDate == null) return 'unknown';
+		const elapsed = Date.now() - user.lastActiveDate.getTime();
+		return (
+			elapsed < USER_ONLINE_THRESHOLD ? 'online' :
+			elapsed < USER_ACTIVE_THRESHOLD ? 'active' :
+			'offline'
+		);
+	}
+
+	public async getAvatarUrl(user: User): Promise<string> {
+		if (user.avatar) {
+			return this.driveFileEntityService.getPublicUrl(user.avatar, true) ?? this.getIdenticonUrl(user.id);
+		} else if (user.avatarId) {
+			const avatar = await this.driveFilesRepository.findOneByOrFail({ id: user.avatarId });
+			return this.driveFileEntityService.getPublicUrl(avatar, true) ?? this.getIdenticonUrl(user.id);
+		} else {
+			return this.getIdenticonUrl(user.id);
+		}
+	}
+
+	public getAvatarUrlSync(user: User): string {
+		if (user.avatar) {
+			return this.driveFileEntityService.getPublicUrl(user.avatar, true) ?? this.getIdenticonUrl(user.id);
+		} else {
+			return this.getIdenticonUrl(user.id);
+		}
+	}
+
+	public getIdenticonUrl(userId: User['id']): string {
+		return `${this.config.url}/identicon/${userId}`;
+	}
+
+	public async pack<ExpectsMe extends boolean | null = null, D extends boolean = false>(
+		src: User['id'] | User,
+		me?: { id: User['id'] } | null | undefined,
+		options?: {
+			detail?: D,
+			includeSecrets?: boolean,
+		},
+	): Promise<IsMeAndIsUserDetailed<ExpectsMe, D>> {
+		const opts = Object.assign({
+			detail: false,
+			includeSecrets: false,
+		}, options);
+
+		let user: User;
+
+		if (typeof src === 'object') {
+			user = src;
+			if (src.avatar === undefined && src.avatarId) src.avatar = await this.driveFilesRepository.findOneBy({ id: src.avatarId }) ?? null;
+			if (src.banner === undefined && src.bannerId) src.banner = await this.driveFilesRepository.findOneBy({ id: src.bannerId }) ?? null;
+		} else {
+			user = await this.usersRepository.findOneOrFail({
+				where: { id: src },
+				relations: {
+					avatar: true,
+					banner: true,
+				},
+			});
+		}
+
+		const meId = me ? me.id : null;
+		const isMe = meId === user.id;
+
+		const relation = meId && !isMe && opts.detail ? await this.getRelation(meId, user.id) : null;
+		const pins = opts.detail ? await this.userNotePiningsRepository.createQueryBuilder('pin')
+			.where('pin.userId = :userId', { userId: user.id })
+			.innerJoinAndSelect('pin.note', 'note')
+			.orderBy('pin.id', 'DESC')
+			.getMany() : [];
+		const profile = opts.detail ? await this.userProfilesRepository.findOneByOrFail({ userId: user.id }) : null;
+
+		const followingCount = profile == null ? null :
+			(profile.ffVisibility === 'public') || isMe ? user.followingCount :
+			(profile.ffVisibility === 'followers') && (relation && relation.isFollowing) ? user.followingCount :
+			null;
+
+		const followersCount = profile == null ? null :
+			(profile.ffVisibility === 'public') || isMe ? user.followersCount :
+			(profile.ffVisibility === 'followers') && (relation && relation.isFollowing) ? user.followersCount :
+			null;
+
+		const falsy = opts.detail ? false : undefined;
+
+		const packed = {
+			id: user.id,
+			name: user.name,
+			username: user.username,
+			host: user.host,
+			avatarUrl: this.getAvatarUrlSync(user),
+			avatarBlurhash: user.avatar?.blurhash ?? null,
+			avatarColor: null, // 後方互換性のため
+			isAdmin: user.isAdmin ?? falsy,
+			isModerator: user.isModerator ?? falsy,
+			isBot: user.isBot ?? falsy,
+			isCat: user.isCat ?? falsy,
+			instance: user.host ? this.#userInstanceCache.fetch(user.host,
+				() => this.instancesRepository.findOneBy({ host: user.host! }),
+				v => v != null,
+			).then(instance => instance ? {
+				name: instance.name,
+				softwareName: instance.softwareName,
+				softwareVersion: instance.softwareVersion,
+				iconUrl: instance.iconUrl,
+				faviconUrl: instance.faviconUrl,
+				themeColor: instance.themeColor,
+			} : undefined) : undefined,
+			emojis: this.customEmojiService.populateEmojis(user.emojis, user.host),
+			onlineStatus: this.getOnlineStatus(user),
+			driveCapacityOverrideMb: user.driveCapacityOverrideMb,
+
+			...(opts.detail ? {
+				url: profile!.url,
+				uri: user.uri,
+				createdAt: user.createdAt.toISOString(),
+				updatedAt: user.updatedAt ? user.updatedAt.toISOString() : null,
+				lastFetchedAt: user.lastFetchedAt ? user.lastFetchedAt.toISOString() : null,
+				bannerUrl: user.banner ? this.driveFileEntityService.getPublicUrl(user.banner, false) : null,
+				bannerBlurhash: user.banner?.blurhash ?? null,
+				bannerColor: null, // 後方互換性のため
+				isLocked: user.isLocked,
+				isSilenced: user.isSilenced ?? falsy,
+				isSuspended: user.isSuspended ?? falsy,
+				description: profile!.description,
+				location: profile!.location,
+				birthday: profile!.birthday,
+				lang: profile!.lang,
+				fields: profile!.fields,
+				followersCount: followersCount ?? 0,
+				followingCount: followingCount ?? 0,
+				notesCount: user.notesCount,
+				pinnedNoteIds: pins.map(pin => pin.noteId),
+				pinnedNotes: this.noteEntityService.packMany(pins.map(pin => pin.note!), me, {
+					detail: true,
+				}),
+				pinnedPageId: profile!.pinnedPageId,
+				pinnedPage: profile!.pinnedPageId ? this.pageEntityService.pack(profile!.pinnedPageId, me) : null,
+				publicReactions: profile!.publicReactions,
+				ffVisibility: profile!.ffVisibility,
+				twoFactorEnabled: profile!.twoFactorEnabled,
+				usePasswordLessLogin: profile!.usePasswordLessLogin,
+				securityKeys: profile!.twoFactorEnabled
+					? this.userSecurityKeysRepository.countBy({
+						userId: user.id,
+					}).then(result => result >= 1)
+					: false,
+			} : {}),
+
+			...(opts.detail && isMe ? {
+				avatarId: user.avatarId,
+				bannerId: user.bannerId,
+				injectFeaturedNote: profile!.injectFeaturedNote,
+				receiveAnnouncementEmail: profile!.receiveAnnouncementEmail,
+				alwaysMarkNsfw: profile!.alwaysMarkNsfw,
+				autoSensitive: profile!.autoSensitive,
+				carefulBot: profile!.carefulBot,
+				autoAcceptFollowed: profile!.autoAcceptFollowed,
+				noCrawle: profile!.noCrawle,
+				isExplorable: user.isExplorable,
+				isDeleted: user.isDeleted,
+				hideOnlineStatus: user.hideOnlineStatus,
+				hasUnreadSpecifiedNotes: this.noteUnreadsRepository.count({
+					where: { userId: user.id, isSpecified: true },
+					take: 1,
+				}).then(count => count > 0),
+				hasUnreadMentions: this.noteUnreadsRepository.count({
+					where: { userId: user.id, isMentioned: true },
+					take: 1,
+				}).then(count => count > 0),
+				hasUnreadAnnouncement: this.getHasUnreadAnnouncement(user.id),
+				hasUnreadAntenna: this.getHasUnreadAntenna(user.id),
+				hasUnreadChannel: this.getHasUnreadChannel(user.id),
+				hasUnreadMessagingMessage: this.getHasUnreadMessagingMessage(user.id),
+				hasUnreadNotification: this.getHasUnreadNotification(user.id),
+				hasPendingReceivedFollowRequest: this.getHasPendingReceivedFollowRequest(user.id),
+				integrations: profile!.integrations,
+				mutedWords: profile!.mutedWords,
+				mutedInstances: profile!.mutedInstances,
+				mutingNotificationTypes: profile!.mutingNotificationTypes,
+				emailNotificationTypes: profile!.emailNotificationTypes,
+				showTimelineReplies: user.showTimelineReplies ?? falsy,
+			} : {}),
+
+			...(opts.includeSecrets ? {
+				email: profile!.email,
+				emailVerified: profile!.emailVerified,
+				securityKeysList: profile!.twoFactorEnabled
+					? this.userSecurityKeysRepository.find({
+						where: {
+							userId: user.id,
+						},
+						select: {
+							id: true,
+							name: true,
+							lastUsed: true,
+						},
+					})
+					: [],
+			} : {}),
+
+			...(relation ? {
+				isFollowing: relation.isFollowing,
+				isFollowed: relation.isFollowed,
+				hasPendingFollowRequestFromYou: relation.hasPendingFollowRequestFromYou,
+				hasPendingFollowRequestToYou: relation.hasPendingFollowRequestToYou,
+				isBlocking: relation.isBlocking,
+				isBlocked: relation.isBlocked,
+				isMuted: relation.isMuted,
+			} : {}),
+		} as Promiseable<Packed<'User'>> as Promiseable<IsMeAndIsUserDetailed<ExpectsMe, D>>;
+
+		return await awaitAll(packed);
+	}
+
+	public packMany<D extends boolean = false>(
+		users: (User['id'] | User)[],
+		me?: { id: User['id'] } | null | undefined,
+		options?: {
+			detail?: D,
+			includeSecrets?: boolean,
+		},
+	): Promise<IsUserDetailed<D>[]> {
+		return Promise.all(users.map(u => this.pack(u, me, options)));
+	}
+}
diff --git a/packages/backend/src/core/entities/UserGroupEntityService.ts b/packages/backend/src/core/entities/UserGroupEntityService.ts
new file mode 100644
index 0000000000..acd26ea1eb
--- /dev/null
+++ b/packages/backend/src/core/entities/UserGroupEntityService.ts
@@ -0,0 +1,42 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { UserGroupJoiningsRepository, UserGroupsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { UserGroup } from '@/models/entities/UserGroup.js';
+import { UserEntityService } from './UserEntityService.js';
+
+@Injectable()
+export class UserGroupEntityService {
+	constructor(
+		@Inject(DI.userGroupsRepository)
+		private userGroupsRepository: UserGroupsRepository,
+
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+	}
+
+	public async pack(
+		src: UserGroup['id'] | UserGroup,
+	): Promise<Packed<'UserGroup'>> {
+		const userGroup = typeof src === 'object' ? src : await this.userGroupsRepository.findOneByOrFail({ id: src });
+
+		const users = await this.userGroupJoiningsRepository.findBy({
+			userGroupId: userGroup.id,
+		});
+
+		return {
+			id: userGroup.id,
+			createdAt: userGroup.createdAt.toISOString(),
+			name: userGroup.name,
+			ownerId: userGroup.userId,
+			userIds: users.map(x => x.userId),
+		};
+	}
+}
+
diff --git a/packages/backend/src/core/entities/UserGroupInvitationEntityService.ts b/packages/backend/src/core/entities/UserGroupInvitationEntityService.ts
new file mode 100644
index 0000000000..50ff2231ab
--- /dev/null
+++ b/packages/backend/src/core/entities/UserGroupInvitationEntityService.ts
@@ -0,0 +1,39 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { UserGroupInvitationsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { UserGroupInvitation } from '@/models/entities/UserGroupInvitation.js';
+import { UserEntityService } from './UserEntityService.js';
+import { UserGroupEntityService } from './UserGroupEntityService.js';
+
+@Injectable()
+export class UserGroupInvitationEntityService {
+	constructor(
+		@Inject(DI.userGroupInvitationsRepository)
+		private userGroupInvitationsRepository: UserGroupInvitationsRepository,
+
+		private userGroupEntityService: UserGroupEntityService,
+	) {
+	}
+
+	public async pack(
+		src: UserGroupInvitation['id'] | UserGroupInvitation,
+	) {
+		const invitation = typeof src === 'object' ? src : await this.userGroupInvitationsRepository.findOneByOrFail({ id: src });
+
+		return {
+			id: invitation.id,
+			group: await this.userGroupEntityService.pack(invitation.userGroup ?? invitation.userGroupId),
+		};
+	}
+
+	public packMany(
+		invitations: any[],
+	) {
+		return Promise.all(invitations.map(x => this.pack(x)));
+	}
+}
+
diff --git a/packages/backend/src/core/entities/UserListEntityService.ts b/packages/backend/src/core/entities/UserListEntityService.ts
new file mode 100644
index 0000000000..05434d9c8a
--- /dev/null
+++ b/packages/backend/src/core/entities/UserListEntityService.ts
@@ -0,0 +1,41 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { UserListJoiningsRepository, UserListsRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import type { Packed } from '@/misc/schema.js';
+import type { } from '@/models/entities/Blocking.js';
+import type { User } from '@/models/entities/User.js';
+import type { UserList } from '@/models/entities/UserList.js';
+import { UserEntityService } from './UserEntityService.js';
+
+@Injectable()
+export class UserListEntityService {
+	constructor(
+		@Inject(DI.userListsRepository)
+		private userListsRepository: UserListsRepository,
+
+		@Inject(DI.userListJoiningsRepository)
+		private userListJoiningsRepository: UserListJoiningsRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+	}
+
+	public async pack(
+		src: UserList['id'] | UserList,
+	): Promise<Packed<'UserList'>> {
+		const userList = typeof src === 'object' ? src : await this.userListsRepository.findOneByOrFail({ id: src });
+
+		const users = await this.userListJoiningsRepository.findBy({
+			userListId: userList.id,
+		});
+
+		return {
+			id: userList.id,
+			createdAt: userList.createdAt.toISOString(),
+			name: userList.name,
+			userIds: users.map(x => x.userId),
+		};
+	}
+}
+
diff --git a/packages/backend/src/core/queue/QueueModule.ts b/packages/backend/src/core/queue/QueueModule.ts
new file mode 100644
index 0000000000..3a271ea37f
--- /dev/null
+++ b/packages/backend/src/core/queue/QueueModule.ts
@@ -0,0 +1,112 @@
+import { Module } from '@nestjs/common';
+import Bull from 'bull';
+import { DI } from '@/di-symbols.js';
+import type { Config } from '@/config.js';
+import type { Provider } from '@nestjs/common';
+import type { DeliverJobData, InboxJobData, DbJobData, ObjectStorageJobData, EndedPollNotificationJobData, WebhookDeliverJobData } from '../../queue/types.js';
+
+function q<T>(config: Config, name: string, limitPerSec = -1) {
+	return new Bull<T>(name, {
+		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,
+		},
+		prefix: config.redis.prefix ? `${config.redis.prefix}:queue` : 'queue',
+		limiter: limitPerSec > 0 ? {
+			max: limitPerSec,
+			duration: 1000,
+		} : undefined,
+		settings: {
+			backoffStrategies: {
+				apBackoff,
+			},
+		},
+	});
+}
+
+// ref. https://github.com/misskey-dev/misskey/pull/7635#issue-971097019
+function apBackoff(attemptsMade: number, err: Error) {
+	const baseDelay = 60 * 1000;	// 1min
+	const maxBackoff = 8 * 60 * 60 * 1000;	// 8hours
+	let backoff = (Math.pow(2, attemptsMade) - 1) * baseDelay;
+	backoff = Math.min(backoff, maxBackoff);
+	backoff += Math.round(backoff * Math.random() * 0.2);
+	return backoff;
+}
+
+export type SystemQueue = Bull.Queue<Record<string, unknown>>;
+export type EndedPollNotificationQueue = Bull.Queue<EndedPollNotificationJobData>;
+export type DeliverQueue = Bull.Queue<DeliverJobData>;
+export type InboxQueue = Bull.Queue<InboxJobData>;
+export type DbQueue = Bull.Queue<DbJobData>;
+export type ObjectStorageQueue = Bull.Queue<ObjectStorageJobData>;
+export type WebhookDeliverQueue = Bull.Queue<WebhookDeliverJobData>;
+
+const $system: Provider = {
+	provide: 'queue:system',
+	useFactory: (config: Config) => q(config, 'system'),
+	inject: [DI.config],
+};
+
+const $endedPollNotification: Provider = {
+	provide: 'queue:endedPollNotification',
+	useFactory: (config: Config) => q(config, 'endedPollNotification'),
+	inject: [DI.config],
+};
+
+const $deliver: Provider = {
+	provide: 'queue:deliver',
+	useFactory: (config: Config) => q(config, 'deliver', config.deliverJobPerSec ?? 128),
+	inject: [DI.config],
+};
+
+const $inbox: Provider = {
+	provide: 'queue:inbox',
+	useFactory: (config: Config) => q(config, 'inbox', config.inboxJobPerSec ?? 16),
+	inject: [DI.config],
+};
+
+const $db: Provider = {
+	provide: 'queue:db',
+	useFactory: (config: Config) => q(config, 'db'),
+	inject: [DI.config],
+};
+
+const $objectStorage: Provider = {
+	provide: 'queue:objectStorage',
+	useFactory: (config: Config) => q(config, 'objectStorage'),
+	inject: [DI.config],
+};
+
+const $webhookDeliver: Provider = {
+	provide: 'queue:webhookDeliver',
+	useFactory: (config: Config) => q(config, 'webhookDeliver', 64),
+	inject: [DI.config],
+};
+
+@Module({
+	imports: [
+	],
+	providers: [
+		$system,
+		$endedPollNotification,
+		$deliver,
+		$inbox,
+		$db,
+		$objectStorage,
+		$webhookDeliver,
+	],
+	exports: [
+		$system,
+		$endedPollNotification,
+		$deliver,
+		$inbox,
+		$db,
+		$objectStorage,
+		$webhookDeliver,
+	],
+})
+export class QueueModule {}
diff --git a/packages/backend/src/core/remote/RemoteLoggerService.ts b/packages/backend/src/core/remote/RemoteLoggerService.ts
new file mode 100644
index 0000000000..7ce8fe6cfc
--- /dev/null
+++ b/packages/backend/src/core/remote/RemoteLoggerService.ts
@@ -0,0 +1,12 @@
+import { Inject, Injectable } from '@nestjs/common';
+import Logger from '@/logger.js';
+
+@Injectable()
+export class RemoteLoggerService {
+	public logger: Logger;
+
+	constructor(
+	) {
+		this.logger = new Logger('remote', 'cyan');
+	}
+}
diff --git a/packages/backend/src/core/remote/ResolveUserService.ts b/packages/backend/src/core/remote/ResolveUserService.ts
new file mode 100644
index 0000000000..4ef91bc8e6
--- /dev/null
+++ b/packages/backend/src/core/remote/ResolveUserService.ts
@@ -0,0 +1,132 @@
+import { URL } from 'node:url';
+import { Inject, Injectable } from '@nestjs/common';
+import chalk from 'chalk';
+import { IsNull } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { UsersRepository } from '@/models/index.js';
+import type { IRemoteUser, User } from '@/models/entities/User.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { UtilityService } from '../UtilityService.js';
+import { WebfingerService } from './WebfingerService.js';
+import { RemoteLoggerService } from './RemoteLoggerService.js';
+import { ApPersonService } from './activitypub/models/ApPersonService.js';
+
+@Injectable()
+export class ResolveUserService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private utilityService: UtilityService,
+		private webfingerService: WebfingerService,
+		private remoteLoggerService: RemoteLoggerService,
+		private apPersonService: ApPersonService,
+	) {
+		this.#logger = this.remoteLoggerService.logger.createSubLogger('resolve-user');
+	}
+
+	public async resolveUser(username: string, host: string | null): Promise<User> {
+		const usernameLower = username.toLowerCase();
+	
+		if (host == null) {
+			this.#logger.info(`return local user: ${usernameLower}`);
+			return await this.usersRepository.findOneBy({ usernameLower, host: IsNull() }).then(u => {
+				if (u == null) {
+					throw new Error('user not found');
+				} else {
+					return u;
+				}
+			});
+		}
+	
+		host = this.utilityService.toPuny(host);
+	
+		if (this.config.host === host) {
+			this.#logger.info(`return local user: ${usernameLower}`);
+			return await this.usersRepository.findOneBy({ usernameLower, host: IsNull() }).then(u => {
+				if (u == null) {
+					throw new Error('user not found');
+				} else {
+					return u;
+				}
+			});
+		}
+	
+		const user = await this.usersRepository.findOneBy({ usernameLower, host }) as IRemoteUser | null;
+	
+		const acctLower = `${usernameLower}@${host}`;
+	
+		if (user == null) {
+			const self = await this.#resolveSelf(acctLower);
+	
+			this.#logger.succ(`return new remote user: ${chalk.magenta(acctLower)}`);
+			return await this.apPersonService.createPerson(self.href);
+		}
+	
+		// ユーザー情報が古い場合は、WebFilgerからやりなおして返す
+		if (user.lastFetchedAt == null || Date.now() - user.lastFetchedAt.getTime() > 1000 * 60 * 60 * 24) {
+			// 繋がらないインスタンスに何回も試行するのを防ぐ, 後続の同様処理の連続試行を防ぐ ため 試行前にも更新する
+			await this.usersRepository.update(user.id, {
+				lastFetchedAt: new Date(),
+			});
+	
+			this.#logger.info(`try resync: ${acctLower}`);
+			const self = await this.#resolveSelf(acctLower);
+	
+			if (user.uri !== self.href) {
+				// if uri mismatch, Fix (user@host <=> AP's Person id(IRemoteUser.uri)) mapping.
+				this.#logger.info(`uri missmatch: ${acctLower}`);
+				this.#logger.info(`recovery missmatch uri for (username=${username}, host=${host}) from ${user.uri} to ${self.href}`);
+	
+				// validate uri
+				const uri = new URL(self.href);
+				if (uri.hostname !== host) {
+					throw new Error('Invalid uri');
+				}
+	
+				await this.usersRepository.update({
+					usernameLower,
+					host: host,
+				}, {
+					uri: self.href,
+				});
+			} else {
+				this.#logger.info(`uri is fine: ${acctLower}`);
+			}
+	
+			await this.apPersonService.updatePerson(self.href);
+	
+			this.#logger.info(`return resynced remote user: ${acctLower}`);
+			return await this.usersRepository.findOneBy({ uri: self.href }).then(u => {
+				if (u == null) {
+					throw new Error('user not found');
+				} else {
+					return u;
+				}
+			});
+		}
+	
+		this.#logger.info(`return existing remote user: ${acctLower}`);
+		return user;
+	}
+
+	async #resolveSelf(acctLower: string) {
+		this.#logger.info(`WebFinger for ${chalk.yellow(acctLower)}`);
+		const finger = await this.webfingerService.webfinger(acctLower).catch(err => {
+			this.#logger.error(`Failed to WebFinger for ${chalk.yellow(acctLower)}: ${ err.statusCode ?? err.message }`);
+			throw new Error(`Failed to WebFinger for ${acctLower}: ${ err.statusCode ?? err.message }`);
+		});
+		const self = finger.links.find(link => link.rel != null && link.rel.toLowerCase() === 'self');
+		if (!self) {
+			this.#logger.error(`Failed to WebFinger for ${chalk.yellow(acctLower)}: self link not found`);
+			throw new Error('self link not found');
+		}
+		return self;
+	}
+}
diff --git a/packages/backend/src/core/remote/WebfingerService.ts b/packages/backend/src/core/remote/WebfingerService.ts
new file mode 100644
index 0000000000..24ccaf528b
--- /dev/null
+++ b/packages/backend/src/core/remote/WebfingerService.ts
@@ -0,0 +1,48 @@
+import { URL } from 'node:url';
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import { query as urlQuery } from '@/misc/prelude/url.js';
+import { HttpRequestService } from '@/core/HttpRequestService.js';
+
+type ILink = {
+	href: string;
+	rel?: string;
+};
+
+type IWebFinger = {
+	links: ILink[];
+	subject: string;
+};
+
+@Injectable()
+export class WebfingerService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private httpRequestService: HttpRequestService,
+	) {
+	}
+
+	public async webfinger(query: string): Promise<IWebFinger> {
+		const url = this.#genUrl(query);
+
+		return await this.httpRequestService.getJson(url, 'application/jrd+json, application/json') as IWebFinger;
+	}
+
+	#genUrl(query: string): string {
+		if (query.match(/^https?:\/\//)) {
+			const u = new URL(query);
+			return `${u.protocol}//${u.hostname}/.well-known/webfinger?` + urlQuery({ resource: query });
+		}
+
+		const m = query.match(/^([^@]+)@(.*)/);
+		if (m) {
+			const hostname = m[2];
+			return `https://${hostname}/.well-known/webfinger?` + urlQuery({ resource: `acct:${query}` });
+		}
+
+		throw new Error(`Invalid query (${query})`);
+	}
+}
diff --git a/packages/backend/src/core/remote/activitypub/ApAudienceService.ts b/packages/backend/src/core/remote/activitypub/ApAudienceService.ts
new file mode 100644
index 0000000000..178631ac55
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/ApAudienceService.ts
@@ -0,0 +1,104 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { In } from 'typeorm';
+import promiseLimit from 'promise-limit';
+import { DI } from '@/di-symbols.js';
+import type { CacheableRemoteUser, CacheableUser } from '@/models/entities/User.js';
+import { concat, toArray, toSingle, unique } from '@/misc/prelude/array.js';
+import { getApId, getApIds, getApType, isAccept, isActor, isAdd, isAnnounce, isBlock, isCollection, isCollectionOrOrderedCollection, isCreate, isDelete, isFlag, isFollow, isLike, isPost, isRead, isReject, isRemove, isTombstone, isUndo, isUpdate, validActor, validPost } from './type.js';
+import { ApPersonService } from './models/ApPersonService.js';
+import type { ApObject } from './type.js';
+import type { Resolver } from './ApResolverService.js';
+
+type Visibility = 'public' | 'home' | 'followers' | 'specified';
+
+type AudienceInfo = {
+	visibility: Visibility,
+	mentionedUsers: CacheableUser[],
+	visibleUsers: CacheableUser[],
+};
+
+@Injectable()
+export class ApAudienceService {
+	constructor(
+		private apPersonService: ApPersonService,
+	) {
+	}
+
+	public async parseAudience(actor: CacheableRemoteUser, to?: ApObject, cc?: ApObject, resolver?: Resolver): Promise<AudienceInfo> {
+		const toGroups = this.#groupingAudience(getApIds(to), actor);
+		const ccGroups = this.#groupingAudience(getApIds(cc), actor);
+	
+		const others = unique(concat([toGroups.other, ccGroups.other]));
+	
+		const limit = promiseLimit<CacheableUser | null>(2);
+		const mentionedUsers = (await Promise.all(
+			others.map(id => limit(() => this.apPersonService.resolvePerson(id, resolver).catch(() => null))),
+		)).filter((x): x is CacheableUser => x != null);
+	
+		if (toGroups.public.length > 0) {
+			return {
+				visibility: 'public',
+				mentionedUsers,
+				visibleUsers: [],
+			};
+		}
+	
+		if (ccGroups.public.length > 0) {
+			return {
+				visibility: 'home',
+				mentionedUsers,
+				visibleUsers: [],
+			};
+		}
+	
+		if (toGroups.followers.length > 0) {
+			return {
+				visibility: 'followers',
+				mentionedUsers,
+				visibleUsers: [],
+			};
+		}
+	
+		return {
+			visibility: 'specified',
+			mentionedUsers,
+			visibleUsers: mentionedUsers,
+		};
+	}
+	
+	#groupingAudience(ids: string[], actor: CacheableRemoteUser) {
+		const groups = {
+			public: [] as string[],
+			followers: [] as string[],
+			other: [] as string[],
+		};
+	
+		for (const id of ids) {
+			if (this.#isPublic(id)) {
+				groups.public.push(id);
+			} else if (this.#isFollowers(id, actor)) {
+				groups.followers.push(id);
+			} else {
+				groups.other.push(id);
+			}
+		}
+	
+		groups.other = unique(groups.other);
+	
+		return groups;
+	}
+	
+	#isPublic(id: string) {
+		return [
+			'https://www.w3.org/ns/activitystreams#Public',
+			'as#Public',
+			'Public',
+		].includes(id);
+	}
+	
+	#isFollowers(id: string, actor: CacheableRemoteUser) {
+		return (
+			id === (actor.followersUri ?? `${actor.uri}/followers`)
+		);
+	}
+}
diff --git a/packages/backend/src/core/remote/activitypub/ApDbResolverService.ts b/packages/backend/src/core/remote/activitypub/ApDbResolverService.ts
new file mode 100644
index 0000000000..37f58c6b0c
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/ApDbResolverService.ts
@@ -0,0 +1,179 @@
+import { Inject, Injectable } from '@nestjs/common';
+import escapeRegexp from 'escape-regexp';
+import { DI } from '@/di-symbols.js';
+import { MessagingMessagesRepository, NotesRepository, UserPublickeysRepository, UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type { CacheableRemoteUser, CacheableUser } from '@/models/entities/User.js';
+import { Cache } from '@/misc/cache.js';
+import type { UserPublickey } from '@/models/entities/UserPublickey.js';
+import { UserCacheService } from '@/core/UserCacheService.js';
+import type { Note } from '@/models/entities/Note.js';
+import type { MessagingMessage } from '@/models/entities/MessagingMessage.js';
+import { getApId } from './type.js';
+import { ApPersonService } from './models/ApPersonService.js';
+import type { IObject } from './type.js';
+
+export type UriParseResult = {
+	/** wether the URI was generated by us */
+	local: true;
+	/** id in DB */
+	id: string;
+	/** hint of type, e.g. "notes", "users" */
+	type: string;
+	/** any remaining text after type and id, not including the slash after id. undefined if empty */
+	rest?: string;
+} | {
+	/** wether the URI was generated by us */
+	local: false;
+	/** uri in DB */
+	uri: string;
+};
+
+@Injectable()
+export class ApDbResolverService {
+	#publicKeyCache: Cache<UserPublickey | null>;
+	#publicKeyByUserIdCache: Cache<UserPublickey | null>;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.messagingMessagesRepository)
+		private messagingMessagesRepository: MessagingMessagesRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.userPublickeysRepository)
+		private userPublickeysRepository: UserPublickeysRepository,
+
+		private userCacheService: UserCacheService,
+		private apPersonService: ApPersonService,
+	) {
+		this.#publicKeyCache = new Cache<UserPublickey | null>(Infinity);
+		this.#publicKeyByUserIdCache = new Cache<UserPublickey | null>(Infinity);
+	}
+
+	public parseUri(value: string | IObject): UriParseResult {
+		const uri = getApId(value);
+	
+		// the host part of a URL is case insensitive, so use the 'i' flag.
+		const localRegex = new RegExp('^' + escapeRegexp(this.config.url) + '/(\\w+)/(\\w+)(?:\/(.+))?', 'i');
+		const matchLocal = uri.match(localRegex);
+	
+		if (matchLocal) {
+			return {
+				local: true,
+				type: matchLocal[1],
+				id: matchLocal[2],
+				rest: matchLocal[3],
+			};
+		} else {
+			return {
+				local: false,
+				uri,
+			};
+		}
+	}
+
+	/**
+	 * AP Note => Misskey Note in DB
+	 */
+	public async getNoteFromApId(value: string | IObject): Promise<Note | null> {
+		const parsed = this.parseUri(value);
+
+		if (parsed.local) {
+			if (parsed.type !== 'notes') return null;
+
+			return await this.notesRepository.findOneBy({
+				id: parsed.id,
+			});
+		} else {
+			return await this.notesRepository.findOneBy({
+				uri: parsed.uri,
+			});
+		}
+	}
+
+	public async getMessageFromApId(value: string | IObject): Promise<MessagingMessage | null> {
+		const parsed = this.parseUri(value);
+
+		if (parsed.local) {
+			if (parsed.type !== 'notes') return null;
+
+			return await this.messagingMessagesRepository.findOneBy({
+				id: parsed.id,
+			});
+		} else {
+			return await this.messagingMessagesRepository.findOneBy({
+				uri: parsed.uri,
+			});
+		}
+	}
+
+	/**
+	 * AP Person => Misskey User in DB
+	 */
+	public async getUserFromApId(value: string | IObject): Promise<CacheableUser | null> {
+		const parsed = this.parseUri(value);
+
+		if (parsed.local) {
+			if (parsed.type !== 'users') return null;
+
+			return await this.userCacheService.userByIdCache.fetchMaybe(parsed.id, () => this.usersRepository.findOneBy({
+				id: parsed.id,
+			}).then(x => x ?? undefined)) ?? null;
+		} else {
+			return await this.userCacheService.uriPersonCache.fetch(parsed.uri, () => this.usersRepository.findOneBy({
+				uri: parsed.uri,
+			}));
+		}
+	}
+
+	/**
+	 * AP KeyId => Misskey User and Key
+	 */
+	public async getAuthUserFromKeyId(keyId: string): Promise<{
+		user: CacheableRemoteUser;
+		key: UserPublickey;
+	} | null> {
+		const key = await this.#publicKeyCache.fetch(keyId, async () => {
+			const key = await this.userPublickeysRepository.findOneBy({
+				keyId,
+			});
+	
+			if (key == null) return null;
+
+			return key;
+		}, key => key != null);
+
+		if (key == null) return null;
+
+		return {
+			user: await this.userCacheService.userByIdCache.fetch(key.userId, () => this.usersRepository.findOneByOrFail({ id: key.userId })) as CacheableRemoteUser,
+			key,
+		};
+	}
+
+	/**
+	 * AP Actor id => Misskey User and Key
+	 */
+	public async getAuthUserFromApId(uri: string): Promise<{
+		user: CacheableRemoteUser;
+		key: UserPublickey | null;
+	} | null> {
+		const user = await this.apPersonService.resolvePerson(uri) as CacheableRemoteUser;
+
+		if (user == null) return null;
+
+		const key = await this.#publicKeyByUserIdCache.fetch(user.id, () => this.userPublickeysRepository.findOneBy({ userId: user.id }), v => v != null); 
+
+		return {
+			user,
+			key,
+		};
+	}
+}
diff --git a/packages/backend/src/core/remote/activitypub/ApDeliverManagerService.ts b/packages/backend/src/core/remote/activitypub/ApDeliverManagerService.ts
new file mode 100644
index 0000000000..a6ee857526
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/ApDeliverManagerService.ts
@@ -0,0 +1,199 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { IsNull, Not } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { FollowingsRepository, UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type { ILocalUser, IRemoteUser, User } from '@/models/entities/User.js';
+import { QueueService } from '@/core/QueueService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+
+interface IRecipe {
+	type: string;
+}
+
+interface IFollowersRecipe extends IRecipe {
+	type: 'Followers';
+}
+
+interface IDirectRecipe extends IRecipe {
+	type: 'Direct';
+	to: IRemoteUser;
+}
+
+const isFollowers = (recipe: any): recipe is IFollowersRecipe =>
+	recipe.type === 'Followers';
+
+const isDirect = (recipe: any): recipe is IDirectRecipe =>
+	recipe.type === 'Direct';
+
+@Injectable()
+export class ApDeliverManagerService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		private userEntityService: UserEntityService,
+		private queueService: QueueService,
+	) {
+	}
+
+	/**
+	 * Deliver activity to followers
+	 * @param activity Activity
+	 * @param from Followee
+	 */
+	public async deliverToFollowers(actor: { id: ILocalUser['id']; host: null; }, activity: any) {
+		const manager = new DeliverManager(
+			this.userEntityService,
+			this.followingsRepository,
+			this.queueService,
+			actor,
+			activity,
+		);
+		manager.addFollowersRecipe();
+		await manager.execute();
+	}
+
+	/**
+	 * Deliver activity to user
+	 * @param activity Activity
+	 * @param to Target user
+	 */
+	public async deliverToUser(actor: { id: ILocalUser['id']; host: null; }, activity: any, to: IRemoteUser) {
+		const manager = new DeliverManager(
+			this.userEntityService,
+			this.followingsRepository,
+			this.queueService,
+			actor,
+			activity,
+		);
+		manager.addDirectRecipe(to);
+		await manager.execute();
+	}
+
+	public createDeliverManager(actor: { id: User['id']; host: null; }, activity: any) {
+		return new DeliverManager(
+			this.userEntityService,
+			this.followingsRepository,
+			this.queueService,
+
+			actor, 
+			activity,
+		);
+	}
+}
+
+class DeliverManager {
+	private actor: { id: User['id']; host: null; };
+	private activity: any;
+	private recipes: IRecipe[] = [];
+
+	/**
+	 * Constructor
+	 * @param actor Actor
+	 * @param activity Activity to deliver
+	 */
+	constructor(
+		private userEntityService: UserEntityService,
+		private followingsRepository: FollowingsRepository,
+		private queueService: QueueService,
+
+		actor: { id: User['id']; host: null; },
+		activity: any,
+	) {
+		this.actor = actor;
+		this.activity = activity;
+	}
+
+	/**
+	 * Add recipe for followers deliver
+	 */
+	public addFollowersRecipe() {
+		const deliver = {
+			type: 'Followers',
+		} as IFollowersRecipe;
+
+		this.addRecipe(deliver);
+	}
+
+	/**
+	 * Add recipe for direct deliver
+	 * @param to To
+	 */
+	public addDirectRecipe(to: IRemoteUser) {
+		const recipe = {
+			type: 'Direct',
+			to,
+		} as IDirectRecipe;
+
+		this.addRecipe(recipe);
+	}
+
+	/**
+	 * Add recipe
+	 * @param recipe Recipe
+	 */
+	public addRecipe(recipe: IRecipe) {
+		this.recipes.push(recipe);
+	}
+
+	/**
+	 * Execute delivers
+	 */
+	public async execute() {
+		if (!this.userEntityService.isLocalUser(this.actor)) return;
+
+		const inboxes = new Set<string>();
+
+		/*
+		build inbox list
+
+		Process follower recipes first to avoid duplication when processing
+		direct recipes later.
+		*/
+		if (this.recipes.some(r => isFollowers(r))) {
+			// followers deliver
+			// TODO: SELECT DISTINCT ON ("followerSharedInbox") "followerSharedInbox" みたいな問い合わせにすればよりパフォーマンス向上できそう
+			// ただ、sharedInboxがnullなリモートユーザーも稀におり、その対応ができなさそう？
+			const followers = await this.followingsRepository.find({
+				where: {
+					followeeId: this.actor.id,
+					followerHost: Not(IsNull()),
+				},
+				select: {
+					followerSharedInbox: true,
+					followerInbox: true,
+				},
+			}) as {
+				followerSharedInbox: string | null;
+				followerInbox: string;
+			}[];
+
+			for (const following of followers) {
+				const inbox = following.followerSharedInbox ?? following.followerInbox;
+				inboxes.add(inbox);
+			}
+		}
+
+		this.recipes.filter((recipe): recipe is IDirectRecipe =>
+			// followers recipes have already been processed
+			isDirect(recipe)
+			// check that shared inbox has not been added yet
+			&& !(recipe.to.sharedInbox && inboxes.has(recipe.to.sharedInbox))
+			// check that they actually have an inbox
+			&& recipe.to.inbox != null,
+		)
+			.forEach(recipe => inboxes.add(recipe.to.inbox!));
+
+		// deliver
+		for (const inbox of inboxes) {
+			this.queueService.deliver(this.actor, this.activity, inbox);
+		}
+	}
+}
diff --git a/packages/backend/src/core/remote/activitypub/ApInboxService.ts b/packages/backend/src/core/remote/activitypub/ApInboxService.ts
new file mode 100644
index 0000000000..531a774c50
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/ApInboxService.ts
@@ -0,0 +1,735 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { In } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import type { CacheableRemoteUser } from '@/models/entities/User.js';
+import { UserFollowingService } from '@/core/UserFollowingService.js';
+import { ReactionService } from '@/core/ReactionService.js';
+import { RelayService } from '@/core/RelayService.js';
+import { NotePiningService } from '@/core/NotePiningService.js';
+import { UserBlockingService } from '@/core/UserBlockingService.js';
+import { NoteDeleteService } from '@/core/NoteDeleteService.js';
+import { NoteCreateService } from '@/core/NoteCreateService.js';
+import { concat, toArray, toSingle, unique } from '@/misc/prelude/array.js';
+import { AppLockService } from '@/core/AppLockService.js';
+import type Logger from '@/logger.js';
+import { MetaService } from '@/core/MetaService.js';
+import { IdService } from '@/core/IdService.js';
+import { StatusError } from '@/misc/status-error.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { QueueService } from '@/core/QueueService.js';
+import { MessagingService } from '@/core/MessagingService.js';
+import { getApId, getApIds, getApType, isAccept, isActor, isAdd, isAnnounce, isBlock, isCollection, isCollectionOrOrderedCollection, isCreate, isDelete, isFlag, isFollow, isLike, isPost, isRead, isReject, isRemove, isTombstone, isUndo, isUpdate, validActor, validPost } from './type.js';
+import { ApNoteService } from './models/ApNoteService.js';
+import { ApLoggerService } from './ApLoggerService.js';
+import { ApDbResolverService } from './ApDbResolverService.js';
+import { ApResolverService } from './ApResolverService.js';
+import { ApAudienceService } from './ApAudienceService.js';
+import { ApPersonService } from './models/ApPersonService.js';
+import { ApQuestionService } from './models/ApQuestionService.js';
+import type { Resolver } from './ApResolverService.js';
+import type { IAccept, IAdd, IAnnounce, IBlock, ICreate, IDelete, IFlag, IFollow, ILike, IObject, IRead, IReject, IRemove, IUndo, IUpdate } from './type.js';
+
+@Injectable()
+export class ApInboxService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		@Inject(DI.messagingMessagesRepository)
+		private messagingMessagesRepository: MessagingMessagesRepository,
+
+		@Inject(DI.abuseUserReportsRepository)
+		private abuseUserReportsRepository: AbuseUserReportsRepository,
+
+		@Inject(DI.followRequestsRepository)
+		private followRequestsRepository: FollowRequestsRepository,
+
+		private userEntityService: UserEntityService,
+		private noteEntityService: NoteEntityService,
+		private utilityService: UtilityService,
+		private idService: IdService,
+		private metaService: MetaService,
+		private userFollowingService: UserFollowingService,
+		private apAudienceService: ApAudienceService,
+		private reactionService: ReactionService,
+		private relayService: RelayService,
+		private notePiningService: NotePiningService,
+		private userBlockingService: UserBlockingService,
+		private noteCreateService: NoteCreateService,
+		private noteDeleteService: NoteDeleteService,
+		private appLockService: AppLockService,
+		private apResolverService: ApResolverService,
+		private apDbResolverService: ApDbResolverService,
+		private apLoggerService: ApLoggerService,
+		private apNoteService: ApNoteService,
+		private apPersonService: ApPersonService,
+		private apQuestionService: ApQuestionService,
+		private queueService: QueueService,
+		private messagingService: MessagingService,
+	) {
+		this.#logger = this.apLoggerService.logger;
+	}
+	
+	public async performActivity(actor: CacheableRemoteUser, activity: IObject) {
+		if (isCollectionOrOrderedCollection(activity)) {
+			const resolver = this.apResolverService.createResolver();
+			for (const item of toArray(isCollection(activity) ? activity.items : activity.orderedItems)) {
+				const act = await resolver.resolve(item);
+				try {
+					await this.performOneActivity(actor, act);
+				} catch (err) {
+					if (err instanceof Error || typeof err === 'string') {
+						this.#logger.error(err);
+					}
+				}
+			}
+		} else {
+			await this.performOneActivity(actor, activity);
+		}
+
+		// ついでにリモートユーザーの情報が古かったら更新しておく
+		if (actor.uri) {
+			if (actor.lastFetchedAt == null || Date.now() - actor.lastFetchedAt.getTime() > 1000 * 60 * 60 * 24) {
+				setImmediate(() => {
+					this.apPersonService.updatePerson(actor.uri!);
+				});
+			}
+		}
+	}
+
+	public async performOneActivity(actor: CacheableRemoteUser, activity: IObject): Promise<void> {
+		if (actor.isSuspended) return;
+
+		if (isCreate(activity)) {
+			await this.#create(actor, activity);
+		} else if (isDelete(activity)) {
+			await this.#delete(actor, activity);
+		} else if (isUpdate(activity)) {
+			await this.#update(actor, activity);
+		} else if (isRead(activity)) {
+			await this.#read(actor, activity);
+		} else if (isFollow(activity)) {
+			await this.#follow(actor, activity);
+		} else if (isAccept(activity)) {
+			await this.#accept(actor, activity);
+		} else if (isReject(activity)) {
+			await this.#reject(actor, activity);
+		} else if (isAdd(activity)) {
+			await this.#add(actor, activity).catch(err => this.#logger.error(err));
+		} else if (isRemove(activity)) {
+			await this.#remove(actor, activity).catch(err => this.#logger.error(err));
+		} else if (isAnnounce(activity)) {
+			await this.#announce(actor, activity);
+		} else if (isLike(activity)) {
+			await this.#like(actor, activity);
+		} else if (isUndo(activity)) {
+			await this.#undo(actor, activity);
+		} else if (isBlock(activity)) {
+			await this.#block(actor, activity);
+		} else if (isFlag(activity)) {
+			await this.#flag(actor, activity);
+		} else {
+			this.#logger.warn(`unrecognized activity type: ${(activity as any).type}`);
+		}
+	}
+
+	async #follow(actor: CacheableRemoteUser, activity: IFollow): Promise<string> {
+		const followee = await this.apDbResolverService.getUserFromApId(activity.object);
+	
+		if (followee == null) {
+			return 'skip: followee not found';
+		}
+	
+		if (followee.host != null) {
+			return 'skip: フォローしようとしているユーザーはローカルユーザーではありません';
+		}
+	
+		await this.userFollowingService.follow(actor, followee, activity.id);
+		return 'ok';
+	}
+
+	async #like(actor: CacheableRemoteUser, activity: ILike): Promise<string> {
+		const targetUri = getApId(activity.object);
+
+		const note = await this.apNoteService.fetchNote(targetUri);
+		if (!note) return `skip: target note not found ${targetUri}`;
+
+		await this.apNoteService.extractEmojis(activity.tag ?? [], actor.host).catch(() => null);
+
+		return await this.reactionService.create(actor, note, activity._misskey_reaction ?? activity.content ?? activity.name).catch(e => {
+			if (e.id === '51c42bb4-931a-456b-bff7-e5a8a70dd298') {
+				return 'skip: already reacted';
+			} else {
+				throw e;
+			}
+		}).then(() => 'ok');
+	}
+
+	async #read(actor: CacheableRemoteUser, activity: IRead): Promise<string> {
+		const id = await getApId(activity.object);
+
+		if (!this.utilityService.isSelfHost(this.utilityService.extractDbHost(id))) {
+			return `skip: Read to foreign host (${id})`;
+		}
+
+		const messageId = id.split('/').pop();
+
+		const message = await this.messagingMessagesRepository.findOneBy({ id: messageId });
+		if (message == null) {
+			return 'skip: message not found';
+		}
+
+		if (actor.id !== message.recipientId) {
+			return 'skip: actor is not a message recipient';
+		}
+
+		await this.messagingService.readUserMessagingMessage(message.recipientId!, message.userId, [message.id]);
+		return `ok: mark as read (${message.userId} => ${message.recipientId} ${message.id})`;
+	}
+
+	async #accept(actor: CacheableRemoteUser, activity: IAccept): Promise<string> {
+		const uri = activity.id ?? activity;
+
+		this.#logger.info(`Accept: ${uri}`);
+	
+		const resolver = this.apResolverService.createResolver();
+	
+		const object = await resolver.resolve(activity.object).catch(err => {
+			this.#logger.error(`Resolution failed: ${err}`);
+			throw err;
+		});
+	
+		if (isFollow(object)) return await this.#acceptFollow(actor, object);
+	
+		return `skip: Unknown Accept type: ${getApType(object)}`;
+	}
+
+	async #acceptFollow(actor: CacheableRemoteUser, activity: IFollow): Promise<string> {
+		// ※ activityはこっちから投げたフォローリクエストなので、activity.actorは存在するローカルユーザーである必要がある
+
+		const follower = await this.apDbResolverService.getUserFromApId(activity.actor);
+
+		if (follower == null) {
+			return 'skip: follower not found';
+		}
+
+		if (follower.host != null) {
+			return 'skip: follower is not a local user';
+		}
+
+		// relay
+		const match = activity.id?.match(/follow-relay\/(\w+)/);
+		if (match) {
+			return await this.relayService.relayAccepted(match[1]);
+		}
+
+		await this.userFollowingService.acceptFollowRequest(actor, follower);
+		return 'ok';
+	}
+
+	async #add(actor: CacheableRemoteUser, activity: IAdd): Promise<void> {
+		if ('actor' in activity && actor.uri !== activity.actor) {
+			throw new Error('invalid actor');
+		}
+	
+		if (activity.target == null) {
+			throw new Error('target is null');
+		}
+	
+		if (activity.target === actor.featured) {
+			const note = await this.apNoteService.resolveNote(activity.object);
+			if (note == null) throw new Error('note not found');
+			await this.notePiningService.addPinned(actor, note.id);
+			return;
+		}
+	
+		throw new Error(`unknown target: ${activity.target}`);
+	}
+
+	async #announce(actor: CacheableRemoteUser, activity: IAnnounce): Promise<void> {
+		const uri = getApId(activity);
+
+		this.#logger.info(`Announce: ${uri}`);
+
+		const targetUri = getApId(activity.object);
+
+		this.#announceNote(actor, activity, targetUri);
+	}
+
+	async #announceNote(actor: CacheableRemoteUser, activity: IAnnounce, targetUri: string): Promise<void> {
+		const uri = getApId(activity);
+
+		if (actor.isSuspended) {
+			return;
+		}
+
+		// アナウンス先をブロックしてたら中断
+		const meta = await this.metaService.fetch();
+		if (meta.blockedHosts.includes(this.utilityService.extractDbHost(uri))) return;
+
+		const unlock = await this.appLockService.getApLock(uri);
+
+		try {
+		// 既に同じURIを持つものが登録されていないかチェック
+			const exist = await this.apNoteService.fetchNote(uri);
+			if (exist) {
+				return;
+			}
+
+			// Announce対象をresolve
+			let renote;
+			try {
+				renote = await this.apNoteService.resolveNote(targetUri);
+			} catch (err) {
+			// 対象が4xxならスキップ
+				if (err instanceof StatusError) {
+					if (err.isClientError) {
+						this.#logger.warn(`Ignored announce target ${targetUri} - ${err.statusCode}`);
+						return;
+					}
+
+					this.#logger.warn(`Error in announce target ${targetUri} - ${err.statusCode ?? err}`);
+				}
+				throw err;
+			}
+
+			if (!await this.noteEntityService.isVisibleForMe(renote, actor.id)) return 'skip: invalid actor for this activity';
+
+			this.#logger.info(`Creating the (Re)Note: ${uri}`);
+
+			const activityAudience = await this.apAudienceService.parseAudience(actor, activity.to, activity.cc);
+
+			await this.noteCreateService.create(actor, {
+				createdAt: activity.published ? new Date(activity.published) : null,
+				renote,
+				visibility: activityAudience.visibility,
+				visibleUsers: activityAudience.visibleUsers,
+				uri,
+			});
+		} finally {
+			unlock();
+		}
+	}
+
+	async #block(actor: CacheableRemoteUser, activity: IBlock): Promise<string> {
+		// ※ activity.objectにブロック対象があり、それは存在するローカルユーザーのはず
+
+		const blockee = await this.apDbResolverService.getUserFromApId(activity.object);
+
+		if (blockee == null) {
+			return 'skip: blockee not found';
+		}
+
+		if (blockee.host != null) {
+			return 'skip: ブロックしようとしているユーザーはローカルユーザーではありません';
+		}
+
+		await this.userBlockingService.block(await this.usersRepository.findOneByOrFail({ id: actor.id }), await this.usersRepository.findOneByOrFail({ id: blockee.id }));
+		return 'ok';
+	}
+
+	async #create(actor: CacheableRemoteUser, activity: ICreate): Promise<void> {
+		const uri = getApId(activity);
+
+		this.#logger.info(`Create: ${uri}`);
+
+		// copy audiences between activity <=> object.
+		if (typeof activity.object === 'object') {
+			const to = unique(concat([toArray(activity.to), toArray(activity.object.to)]));
+			const cc = unique(concat([toArray(activity.cc), toArray(activity.object.cc)]));
+
+			activity.to = to;
+			activity.cc = cc;
+			activity.object.to = to;
+			activity.object.cc = cc;
+		}
+
+		// If there is no attributedTo, use Activity actor.
+		if (typeof activity.object === 'object' && !activity.object.attributedTo) {
+			activity.object.attributedTo = activity.actor;
+		}
+
+		const resolver = this.apResolverService.createResolver();
+
+		const object = await resolver.resolve(activity.object).catch(e => {
+			this.#logger.error(`Resolution failed: ${e}`);
+			throw e;
+		});
+
+		if (isPost(object)) {
+			this.#createNote(resolver, actor, object, false, activity);
+		} else {
+			this.#logger.warn(`Unknown type: ${getApType(object)}`);
+		}
+	}
+
+	async #createNote(resolver: Resolver, actor: CacheableRemoteUser, note: IObject, silent = false, activity?: ICreate): Promise<string> {
+		const uri = getApId(note);
+
+		if (typeof note === 'object') {
+			if (actor.uri !== note.attributedTo) {
+				return 'skip: actor.uri !== note.attributedTo';
+			}
+
+			if (typeof note.id === 'string') {
+				if (this.utilityService.extractDbHost(actor.uri) !== this.utilityService.extractDbHost(note.id)) {
+					return 'skip: host in actor.uri !== note.id';
+				}
+			}
+		}
+
+		const unlock = await this.appLockService.getApLock(uri);
+
+		try {
+			const exist = await this.apNoteService.fetchNote(note);
+			if (exist) return 'skip: note exists';
+
+			await this.apNoteService.createNote(note, resolver, silent);
+			return 'ok';
+		} catch (e) {
+			if (e instanceof StatusError && e.isClientError) {
+				return `skip ${e.statusCode}`;
+			} else {
+				throw e;
+			}
+		} finally {
+			unlock();
+		}
+	}
+
+	async #delete(actor: CacheableRemoteUser, activity: IDelete): Promise<string> {
+		if ('actor' in activity && actor.uri !== activity.actor) {
+			throw new Error('invalid actor');
+		}
+	
+		// 削除対象objectのtype
+		let formerType: string | undefined;
+	
+		if (typeof activity.object === 'string') {
+			// typeが不明だけど、どうせ消えてるのでremote resolveしない
+			formerType = undefined;
+		} else {
+			const object = activity.object as IObject;
+			if (isTombstone(object)) {
+				formerType = toSingle(object.formerType);
+			} else {
+				formerType = toSingle(object.type);
+			}
+		}
+	
+		const uri = getApId(activity.object);
+	
+		// type不明でもactorとobjectが同じならばそれはPersonに違いない
+		if (!formerType && actor.uri === uri) {
+			formerType = 'Person';
+		}
+	
+		// それでもなかったらおそらくNote
+		if (!formerType) {
+			formerType = 'Note';
+		}
+	
+		if (validPost.includes(formerType)) {
+			return await this.#deleteNote(actor, uri);
+		} else if (validActor.includes(formerType)) {
+			return await this.#deleteActor(actor, uri);
+		} else {
+			return `Unknown type ${formerType}`;
+		}
+	}
+
+	async #deleteActor(actor: CacheableRemoteUser, uri: string): Promise<string> {
+		this.#logger.info(`Deleting the Actor: ${uri}`);
+	
+		if (actor.uri !== uri) {
+			return `skip: delete actor ${actor.uri} !== ${uri}`;
+		}
+	
+		const user = await this.usersRepository.findOneByOrFail({ id: actor.id });
+		if (user.isDeleted) {
+			this.#logger.info('skip: already deleted');
+		}
+	
+		const job = await this.queueService.createDeleteAccountJob(actor);
+	
+		await this.usersRepository.update(actor.id, {
+			isDeleted: true,
+		});
+	
+		return `ok: queued ${job.name} ${job.id}`;
+	}
+
+	async #deleteNote(actor: CacheableRemoteUser, uri: string): Promise<string> {
+		this.#logger.info(`Deleting the Note: ${uri}`);
+	
+		const unlock = await this.appLockService.getApLock(uri);
+	
+		try {
+			const note = await this.apDbResolverService.getNoteFromApId(uri);
+	
+			if (note == null) {
+				const message = await this.apDbResolverService.getMessageFromApId(uri);
+				if (message == null) return 'message not found';
+	
+				if (message.userId !== actor.id) {
+					return '投稿を削除しようとしているユーザーは投稿の作成者ではありません';
+				}
+	
+				await this.messagingService.deleteMessage(message);
+	
+				return 'ok: message deleted';
+			}
+	
+			if (note.userId !== actor.id) {
+				return '投稿を削除しようとしているユーザーは投稿の作成者ではありません';
+			}
+	
+			await this.noteDeleteService.delete(actor, note);
+			return 'ok: note deleted';
+		} finally {
+			unlock();
+		}
+	}
+
+	async #flag(actor: CacheableRemoteUser, activity: IFlag): Promise<string> {
+		// objectは `(User|Note) | (User|Note)[]` だけど、全パターンDBスキーマと対応させられないので
+		// 対象ユーザーは一番最初のユーザー として あとはコメントとして格納する
+		const uris = getApIds(activity.object);
+
+		const userIds = uris.filter(uri => uri.startsWith(this.config.url + '/users/')).map(uri => uri.split('/').pop()!);
+		const users = await this.usersRepository.findBy({
+			id: In(userIds),
+		});
+		if (users.length < 1) return 'skip';
+
+		await this.abuseUserReportsRepository.insert({
+			id: this.idService.genId(),
+			createdAt: new Date(),
+			targetUserId: users[0].id,
+			targetUserHost: users[0].host,
+			reporterId: actor.id,
+			reporterHost: actor.host,
+			comment: `${activity.content}\n${JSON.stringify(uris, null, 2)}`,
+		});
+
+		return 'ok';
+	}
+
+	async #reject(actor: CacheableRemoteUser, activity: IReject): Promise<string> {
+		const uri = activity.id ?? activity;
+
+		this.#logger.info(`Reject: ${uri}`);
+
+		const resolver = this.apResolverService.createResolver();
+
+		const object = await resolver.resolve(activity.object).catch(e => {
+			this.#logger.error(`Resolution failed: ${e}`);
+			throw e;
+		});
+
+		if (isFollow(object)) return await this.#rejectFollow(actor, object);
+
+		return `skip: Unknown Reject type: ${getApType(object)}`;
+	}
+
+	async #rejectFollow(actor: CacheableRemoteUser, activity: IFollow): Promise<string> {
+		// ※ activityはこっちから投げたフォローリクエストなので、activity.actorは存在するローカルユーザーである必要がある
+	
+		const follower = await this.apDbResolverService.getUserFromApId(activity.actor);
+	
+		if (follower == null) {
+			return 'skip: follower not found';
+		}
+	
+		if (!this.userEntityService.isLocalUser(follower)) {
+			return 'skip: follower is not a local user';
+		}
+	
+		// relay
+		const match = activity.id?.match(/follow-relay\/(\w+)/);
+		if (match) {
+			return await this.relayService.relayRejected(match[1]);
+		}
+	
+		await this.userFollowingService.remoteReject(actor, follower);
+		return 'ok';
+	}
+
+	async #remove(actor: CacheableRemoteUser, activity: IRemove): Promise<void> {
+		if ('actor' in activity && actor.uri !== activity.actor) {
+			throw new Error('invalid actor');
+		}
+	
+		if (activity.target == null) {
+			throw new Error('target is null');
+		}
+	
+		if (activity.target === actor.featured) {
+			const note = await this.apNoteService.resolveNote(activity.object);
+			if (note == null) throw new Error('note not found');
+			await this.notePiningService.removePinned(actor, note.id);
+			return;
+		}
+	
+		throw new Error(`unknown target: ${activity.target}`);
+	}
+
+	async #undo(actor: CacheableRemoteUser, activity: IUndo): Promise<string> {
+		if ('actor' in activity && actor.uri !== activity.actor) {
+			throw new Error('invalid actor');
+		}
+	
+		const uri = activity.id ?? activity;
+	
+		this.#logger.info(`Undo: ${uri}`);
+	
+		const resolver = this.apResolverService.createResolver();
+	
+		const object = await resolver.resolve(activity.object).catch(e => {
+			this.#logger.error(`Resolution failed: ${e}`);
+			throw e;
+		});
+	
+		if (isFollow(object)) return await this.#undoFollow(actor, object);
+		if (isBlock(object)) return await this.#undoBlock(actor, object);
+		if (isLike(object)) return await this.#undoLike(actor, object);
+		if (isAnnounce(object)) return await this.#undoAnnounce(actor, object);
+		if (isAccept(object)) return await this.#undoAccept(actor, object);
+	
+		return `skip: unknown object type ${getApType(object)}`;
+	}
+
+	async #undoAccept(actor: CacheableRemoteUser, activity: IAccept): Promise<string> {
+		const follower = await this.apDbResolverService.getUserFromApId(activity.object);
+		if (follower == null) {
+			return 'skip: follower not found';
+		}
+	
+		const following = await this.followingsRepository.findOneBy({
+			followerId: follower.id,
+			followeeId: actor.id,
+		});
+	
+		if (following) {
+			await this.userFollowingService.unfollow(follower, actor);
+			return 'ok: unfollowed';
+		}
+	
+		return 'skip: フォローされていない';
+	}
+
+	async #undoAnnounce(actor: CacheableRemoteUser, activity: IAnnounce): Promise<string> {
+		const uri = getApId(activity);
+
+		const note = await this.notesRepository.findOneBy({
+			uri,
+			userId: actor.id,
+		});
+
+		if (!note) return 'skip: no such Announce';
+
+		await this.noteDeleteService.delete(actor, note);
+		return 'ok: deleted';
+	}
+
+	async #undoBlock(actor: CacheableRemoteUser, activity: IBlock): Promise<string> {
+		const blockee = await this.apDbResolverService.getUserFromApId(activity.object);
+
+		if (blockee == null) {
+			return 'skip: blockee not found';
+		}
+
+		if (blockee.host != null) {
+			return 'skip: ブロック解除しようとしているユーザーはローカルユーザーではありません';
+		}
+
+		await this.userBlockingService.unblock(await this.usersRepository.findOneByOrFail({ id: actor.id }), blockee);
+		return 'ok';
+	}
+
+	async #undoFollow(actor: CacheableRemoteUser, activity: IFollow): Promise<string> {
+		const followee = await this.apDbResolverService.getUserFromApId(activity.object);
+		if (followee == null) {
+			return 'skip: followee not found';
+		}
+
+		if (followee.host != null) {
+			return 'skip: フォロー解除しようとしているユーザーはローカルユーザーではありません';
+		}
+
+		const req = await this.followRequestsRepository.findOneBy({
+			followerId: actor.id,
+			followeeId: followee.id,
+		});
+
+		const following = await this.followingsRepository.findOneBy({
+			followerId: actor.id,
+			followeeId: followee.id,
+		});
+
+		if (req) {
+			await this.userFollowingService.cancelFollowRequest(followee, actor);
+			return 'ok: follow request canceled';
+		}
+
+		if (following) {
+			await this.userFollowingService.unfollow(actor, followee);
+			return 'ok: unfollowed';
+		}
+
+		return 'skip: リクエストもフォローもされていない';
+	}
+
+	async #undoLike(actor: CacheableRemoteUser, activity: ILike): Promise<string> {
+		const targetUri = getApId(activity.object);
+
+		const note = await this.apNoteService.fetchNote(targetUri);
+		if (!note) return `skip: target note not found ${targetUri}`;
+
+		await this.reactionService.delete(actor, note).catch(e => {
+			if (e.id === '60527ec9-b4cb-4a88-a6bd-32d3ad26817d') return;
+			throw e;
+		});
+
+		return 'ok';
+	}
+
+	async #update(actor: CacheableRemoteUser, activity: IUpdate): Promise<string> {
+		if ('actor' in activity && actor.uri !== activity.actor) {
+			return 'skip: invalid actor';
+		}
+	
+		this.#logger.debug('Update');
+	
+		const resolver = this.apResolverService.createResolver();
+	
+		const object = await resolver.resolve(activity.object).catch(e => {
+			this.#logger.error(`Resolution failed: ${e}`);
+			throw e;
+		});
+	
+		if (isActor(object)) {
+			await this.apPersonService.updatePerson(actor.uri!, resolver, object);
+			return 'ok: Person updated';
+		} else if (getApType(object) === 'Question') {
+			await this.apQuestionService.updateQuestion(object).catch(err => console.error(err));
+			return 'ok: Question updated';
+		} else {
+			return `skip: Unknown type: ${getApType(object)}`;
+		}
+	}
+}
diff --git a/packages/backend/src/core/remote/activitypub/ApLoggerService.ts b/packages/backend/src/core/remote/activitypub/ApLoggerService.ts
new file mode 100644
index 0000000000..82fd7c5f18
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/ApLoggerService.ts
@@ -0,0 +1,14 @@
+import { Inject, Injectable } from '@nestjs/common';
+import type Logger from '@/logger.js';
+import { RemoteLoggerService } from '@/core/remote/RemoteLoggerService.js';
+
+@Injectable()
+export class ApLoggerService {
+	public logger: Logger;
+
+	constructor(
+		private remoteLoggerService: RemoteLoggerService,
+	) {
+		this.logger = this.remoteLoggerService.logger.createSubLogger('ap', 'magenta');
+	}
+}
diff --git a/packages/backend/src/core/remote/activitypub/ApMfmService.ts b/packages/backend/src/core/remote/activitypub/ApMfmService.ts
new file mode 100644
index 0000000000..3c3b98b139
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/ApMfmService.ts
@@ -0,0 +1,30 @@
+import { Inject, Injectable } from '@nestjs/common';
+import * as mfm from 'mfm-js';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import { MfmService } from '@/core/MfmService.js';
+import type { Note } from '@/models/entities/Note.js';
+import { extractApHashtagObjects } from './models/tag.js';
+import type { IObject } from './type.js';
+
+@Injectable()
+export class ApMfmService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private mfmService: MfmService,
+	) {
+	}
+
+	public htmlToMfm(html: string, tag?: IObject | IObject[]) {
+		const hashtagNames = extractApHashtagObjects(tag).map(x => x.name).filter((x): x is string => x != null);
+	
+		return this.mfmService.fromHtml(html, hashtagNames);
+	}
+
+	public getNoteHtml(note: Note) {
+		if (!note.text) return '';
+		return this.mfmService.toHtml(mfm.parse(note.text), JSON.parse(note.mentionedRemoteUsers));
+	}	
+}
diff --git a/packages/backend/src/core/remote/activitypub/ApRendererService.ts b/packages/backend/src/core/remote/activitypub/ApRendererService.ts
new file mode 100644
index 0000000000..b065c1acdd
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/ApRendererService.ts
@@ -0,0 +1,702 @@
+import { createPublicKey } from 'node:crypto';
+import { Inject, Injectable } from '@nestjs/common';
+import { In, IsNull } from 'typeorm';
+import { v4 as uuid } from 'uuid';
+import * as mfm from 'mfm-js';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import type { ILocalUser, IRemoteUser, User } from '@/models/entities/User.js';
+import type { IMentionedRemoteUsers, Note } from '@/models/entities/Note.js';
+import type { Blocking } from '@/models/entities/Blocking.js';
+import type { Relay } from '@/models/entities/Relay.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import type { NoteReaction } from '@/models/entities/NoteReaction.js';
+import type { Emoji } from '@/models/entities/Emoji.js';
+import type { Poll } from '@/models/entities/Poll.js';
+import type { MessagingMessage } from '@/models/entities/MessagingMessage.js';
+import type { PollVote } from '@/models/entities/PollVote.js';
+import { UserKeypairStoreService } from '@/core/UserKeypairStoreService.js';
+import { MfmService } from '@/core/MfmService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
+import type { UserKeypair } from '@/models/entities/UserKeypair.js';
+import { LdSignatureService } from './LdSignatureService.js';
+import { ApMfmService } from './ApMfmService.js';
+import type { IActivity } from './type.js';
+import type { IIdentifier } from './models/identifier.js';
+
+@Injectable()
+export class ApRendererService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+
+		@Inject(DI.pollsRepository)
+		private pollsRepository: PollsRepository,
+
+		private userEntityService: UserEntityService,
+		private driveFileEntityService: DriveFileEntityService,
+		private ldSignatureService: LdSignatureService,
+		private userKeypairStoreService: UserKeypairStoreService,
+		private apMfmService: ApMfmService,
+		private mfmService: MfmService,
+	) {
+	}
+
+	public renderAccept(object: any, user: { id: User['id']; host: null }) {
+		return {
+			type: 'Accept',
+			actor: `${this.config.url}/users/${user.id}`,
+			object,
+		};
+	}
+
+	public renderAdd(user: ILocalUser, target: any, object: any) {
+		return {
+			type: 'Add',
+			actor: `${this.config.url}/users/${user.id}`,
+			target,
+			object,
+		};
+	}
+
+	public renderAnnounce(object: any, note: Note) {
+		const attributedTo = `${this.config.url}/users/${note.userId}`;
+
+		let to: string[] = [];
+		let cc: string[] = [];
+
+		if (note.visibility === 'public') {
+			to = ['https://www.w3.org/ns/activitystreams#Public'];
+			cc = [`${attributedTo}/followers`];
+		} else if (note.visibility === 'home') {
+			to = [`${attributedTo}/followers`];
+			cc = ['https://www.w3.org/ns/activitystreams#Public'];
+		} else {
+			return null;
+		}
+
+		return {
+			id: `${this.config.url}/notes/${note.id}/activity`,
+			actor: `${this.config.url}/users/${note.userId}`,
+			type: 'Announce',
+			published: note.createdAt.toISOString(),
+			to,
+			cc,
+			object,
+		};
+	}
+
+	/**
+	 * Renders a block into its ActivityPub representation.
+	 *
+	 * @param block The block to be rendered. The blockee relation must be loaded.
+	 */
+	public renderBlock(block: Blocking) {
+		if (block.blockee?.uri == null) {
+			throw new Error('renderBlock: missing blockee uri');
+		}
+	
+		return {
+			type: 'Block',
+			id: `${this.config.url}/blocks/${block.id}`,
+			actor: `${this.config.url}/users/${block.blockerId}`,
+			object: block.blockee.uri,
+		};
+	}
+
+	public renderCreate(object: any, note: Note) {
+		const activity = {
+			id: `${this.config.url}/notes/${note.id}/activity`,
+			actor: `${this.config.url}/users/${note.userId}`,
+			type: 'Create',
+			published: note.createdAt.toISOString(),
+			object,
+		} as any;
+	
+		if (object.to) activity.to = object.to;
+		if (object.cc) activity.cc = object.cc;
+	
+		return activity;
+	}
+
+	public renderDelete(object: any, user: { id: User['id']; host: null }) {
+		return {
+			type: 'Delete',
+			actor: `${this.config.url}/users/${user.id}`,
+			object,
+			published: new Date().toISOString(),
+		};
+	}
+
+	public renderDocument(file: DriveFile) {
+		return {
+			type: 'Document',
+			mediaType: file.type,
+			url: this.driveFileEntityService.getPublicUrl(file),
+			name: file.comment,
+		};
+	}
+
+	public renderEmoji(emoji: Emoji) {
+		return {
+			id: `${this.config.url}/emojis/${emoji.name}`,
+			type: 'Emoji',
+			name: `:${emoji.name}:`,
+			updated: emoji.updatedAt != null ? emoji.updatedAt.toISOString() : new Date().toISOString,
+			icon: {
+				type: 'Image',
+				mediaType: emoji.type ?? 'image/png',
+				url: emoji.publicUrl ?? emoji.originalUrl, // ?? emoji.originalUrl してるのは後方互換性のため
+			},
+		};
+	}
+
+	// to anonymise reporters, the reporting actor must be a system user
+	// object has to be a uri or array of uris
+	public renderFlag(user: ILocalUser, object: [string], content: string) {
+		return {
+			type: 'Flag',
+			actor: `${this.config.url}/users/${user.id}`,
+			content,
+			object,
+		};
+	}
+
+	public renderFollowRelay(relay: Relay, relayActor: ILocalUser) {
+		const follow = {
+			id: `${this.config.url}/activities/follow-relay/${relay.id}`,
+			type: 'Follow',
+			actor: `${this.config.url}/users/${relayActor.id}`,
+			object: 'https://www.w3.org/ns/activitystreams#Public',
+		};
+	
+		return follow;
+	}
+
+	/**
+	 * Convert (local|remote)(Follower|Followee)ID to URL
+	 * @param id Follower|Followee ID
+	 */
+	public async renderFollowUser(id: User['id']) {
+		const user = await this.usersRepository.findOneByOrFail({ id: id });
+		return this.userEntityService.isLocalUser(user) ? `${this.config.url}/users/${user.id}` : user.uri;
+	}
+
+	public renderFollow(
+		follower: { id: User['id']; host: User['host']; uri: User['host'] },
+		followee: { id: User['id']; host: User['host']; uri: User['host'] },
+		requestId?: string,
+	) {
+		const follow = {
+			id: requestId ?? `${this.config.url}/follows/${follower.id}/${followee.id}`,
+			type: 'Follow',
+			actor: this.userEntityService.isLocalUser(follower) ? `${this.config.url}/users/${follower.id}` : follower.uri,
+			object: this.userEntityService.isLocalUser(followee) ? `${this.config.url}/users/${followee.id}` : followee.uri,
+		} as any;
+	
+		return follow;
+	}
+
+	public renderHashtag(tag: string) {
+		return {
+			type: 'Hashtag',
+			href: `${this.config.url}/tags/${encodeURIComponent(tag)}`,
+			name: `#${tag}`,
+		};
+	}
+
+	public renderImage(file: DriveFile) {
+		return {
+			type: 'Image',
+			url: this.driveFileEntityService.getPublicUrl(file),
+			sensitive: file.isSensitive,
+			name: file.comment,
+		};
+	}
+
+	public renderKey(user: ILocalUser, key: UserKeypair, postfix?: string) {
+		return {
+			id: `${this.config.url}/users/${user.id}${postfix ?? '/publickey'}`,
+			type: 'Key',
+			owner: `${this.config.url}/users/${user.id}`,
+			publicKeyPem: createPublicKey(key.publicKey).export({
+				type: 'spki',
+				format: 'pem',
+			}),
+		};
+	}
+
+	public async renderLike(noteReaction: NoteReaction, note: Note) {
+		const reaction = noteReaction.reaction;
+
+		const object = {
+			type: 'Like',
+			id: `${this.config.url}/likes/${noteReaction.id}`,
+			actor: `${this.config.url}/users/${noteReaction.userId}`,
+			object: note.uri ? note.uri : `${this.config.url}/notes/${noteReaction.noteId}`,
+			content: reaction,
+			_misskey_reaction: reaction,
+		} as any;
+
+		if (reaction.startsWith(':')) {
+			const name = reaction.replace(/:/g, '');
+			const emoji = await this.emojisRepository.findOneBy({
+				name,
+				host: IsNull(),
+			});
+
+			if (emoji) object.tag = [this.renderEmoji(emoji)];
+		}
+
+		return object;
+	}
+
+	public renderMention(mention: User) {
+		return {
+			type: 'Mention',
+			href: this.userEntityService.isRemoteUser(mention) ? mention.uri : `${this.config.url}/users/${(mention as ILocalUser).id}`,
+			name: this.userEntityService.isRemoteUser(mention) ? `@${mention.username}@${mention.host}` : `@${(mention as ILocalUser).username}`,
+		};
+	}
+
+	public async renderNote(note: Note, dive = true, isTalk = false): Promise<Record<string, unknown>> {
+		const getPromisedFiles = async (ids: string[]) => {
+			if (!ids || ids.length === 0) return [];
+			const items = await this.driveFilesRepository.findBy({ id: In(ids) });
+			return ids.map(id => items.find(item => item.id === id)).filter(item => item != null) as DriveFile[];
+		};
+	
+		let inReplyTo;
+		let inReplyToNote: Note | null;
+	
+		if (note.replyId) {
+			inReplyToNote = await this.notesRepository.findOneBy({ id: note.replyId });
+	
+			if (inReplyToNote != null) {
+				const inReplyToUser = await this.usersRepository.findOneBy({ id: inReplyToNote.userId });
+	
+				if (inReplyToUser != null) {
+					if (inReplyToNote.uri) {
+						inReplyTo = inReplyToNote.uri;
+					} else {
+						if (dive) {
+							inReplyTo = await this.renderNote(inReplyToNote, false);
+						} else {
+							inReplyTo = `${this.config.url}/notes/${inReplyToNote.id}`;
+						}
+					}
+				}
+			}
+		} else {
+			inReplyTo = null;
+		}
+	
+		let quote;
+	
+		if (note.renoteId) {
+			const renote = await this.notesRepository.findOneBy({ id: note.renoteId });
+	
+			if (renote) {
+				quote = renote.uri ? renote.uri : `${this.config.url}/notes/${renote.id}`;
+			}
+		}
+	
+		const attributedTo = `${this.config.url}/users/${note.userId}`;
+	
+		const mentions = (JSON.parse(note.mentionedRemoteUsers) as IMentionedRemoteUsers).map(x => x.uri);
+	
+		let to: string[] = [];
+		let cc: string[] = [];
+	
+		if (note.visibility === 'public') {
+			to = ['https://www.w3.org/ns/activitystreams#Public'];
+			cc = [`${attributedTo}/followers`].concat(mentions);
+		} else if (note.visibility === 'home') {
+			to = [`${attributedTo}/followers`];
+			cc = ['https://www.w3.org/ns/activitystreams#Public'].concat(mentions);
+		} else if (note.visibility === 'followers') {
+			to = [`${attributedTo}/followers`];
+			cc = mentions;
+		} else {
+			to = mentions;
+		}
+	
+		const mentionedUsers = note.mentions.length > 0 ? await this.usersRepository.findBy({
+			id: In(note.mentions),
+		}) : [];
+	
+		const hashtagTags = (note.tags ?? []).map(tag => this.renderHashtag(tag));
+		const mentionTags = mentionedUsers.map(u => this.renderMention(u));
+	
+		const files = await getPromisedFiles(note.fileIds);
+	
+		const text = note.text ?? '';
+		let poll: Poll | null = null;
+	
+		if (note.hasPoll) {
+			poll = await this.pollsRepository.findOneBy({ noteId: note.id });
+		}
+	
+		let apText = text;
+	
+		if (quote) {
+			apText += `\n\nRE: ${quote}`;
+		}
+	
+		const summary = note.cw === '' ? String.fromCharCode(0x200B) : note.cw;
+	
+		const content = this.apMfmService.getNoteHtml(Object.assign({}, note, {
+			text: apText,
+		}));
+	
+		const emojis = await this.#getEmojis(note.emojis);
+		const apemojis = emojis.map(emoji => this.renderEmoji(emoji));
+	
+		const tag = [
+			...hashtagTags,
+			...mentionTags,
+			...apemojis,
+		];
+	
+		const asPoll = poll ? {
+			type: 'Question',
+			content: this.apMfmService.getNoteHtml(Object.assign({}, note, {
+				text: text,
+			})),
+			[poll.expiresAt && poll.expiresAt < new Date() ? 'closed' : 'endTime']: poll.expiresAt,
+			[poll.multiple ? 'anyOf' : 'oneOf']: poll.choices.map((text, i) => ({
+				type: 'Note',
+				name: text,
+				replies: {
+					type: 'Collection',
+					totalItems: poll!.votes[i],
+				},
+			})),
+		} : {};
+	
+		const asTalk = isTalk ? {
+			_misskey_talk: true,
+		} : {};
+	
+		return {
+			id: `${this.config.url}/notes/${note.id}`,
+			type: 'Note',
+			attributedTo,
+			summary,
+			content,
+			_misskey_content: text,
+			source: {
+				content: text,
+				mediaType: 'text/x.misskeymarkdown',
+			},
+			_misskey_quote: quote,
+			quoteUrl: quote,
+			published: note.createdAt.toISOString(),
+			to,
+			cc,
+			inReplyTo,
+			attachment: files.map(x => this.renderDocument(x)),
+			sensitive: note.cw != null || files.some(file => file.isSensitive),
+			tag,
+			...asPoll,
+			...asTalk,
+		};
+	}
+
+	public async renderPerson(user: ILocalUser) {
+		const id = `${this.config.url}/users/${user.id}`;
+		const isSystem = !!user.username.match(/\./);
+
+		const [avatar, banner, profile] = await Promise.all([
+			user.avatarId ? this.driveFilesRepository.findOneBy({ id: user.avatarId }) : Promise.resolve(undefined),
+			user.bannerId ? this.driveFilesRepository.findOneBy({ id: user.bannerId }) : Promise.resolve(undefined),
+			this.userProfilesRepository.findOneByOrFail({ userId: user.id }),
+		]);
+
+		const attachment: {
+			type: 'PropertyValue',
+			name: string,
+			value: string,
+			identifier?: IIdentifier,
+		}[] = [];
+
+		if (profile.fields) {
+			for (const field of profile.fields) {
+				attachment.push({
+					type: 'PropertyValue',
+					name: field.name,
+					value: (field.value != null && field.value.match(/^https?:/))
+						? `<a href="${new URL(field.value).href}" rel="me nofollow noopener" target="_blank">${new URL(field.value).href}</a>`
+						: field.value,
+				});
+			}
+		}
+
+		const emojis = await this.#getEmojis(user.emojis);
+		const apemojis = emojis.map(emoji => this.renderEmoji(emoji));
+
+		const hashtagTags = (user.tags ?? []).map(tag => this.renderHashtag(tag));
+
+		const tag = [
+			...apemojis,
+			...hashtagTags,
+		];
+
+		const keypair = await this.userKeypairStoreService.getUserKeypair(user.id);
+
+		const person = {
+			type: isSystem ? 'Application' : user.isBot ? 'Service' : 'Person',
+			id,
+			inbox: `${id}/inbox`,
+			outbox: `${id}/outbox`,
+			followers: `${id}/followers`,
+			following: `${id}/following`,
+			featured: `${id}/collections/featured`,
+			sharedInbox: `${this.config.url}/inbox`,
+			endpoints: { sharedInbox: `${this.config.url}/inbox` },
+			url: `${this.config.url}/@${user.username}`,
+			preferredUsername: user.username,
+			name: user.name,
+			summary: profile.description ? this.mfmService.toHtml(mfm.parse(profile.description)) : null,
+			icon: avatar ? this.renderImage(avatar) : null,
+			image: banner ? this.renderImage(banner) : null,
+			tag,
+			manuallyApprovesFollowers: user.isLocked,
+			discoverable: !!user.isExplorable,
+			publicKey: this.renderKey(user, keypair, '#main-key'),
+			isCat: user.isCat,
+			attachment: attachment.length ? attachment : undefined,
+		} as any;
+
+		if (profile.birthday) {
+			person['vcard:bday'] = profile.birthday;
+		}
+
+		if (profile.location) {
+			person['vcard:Address'] = profile.location;
+		}
+
+		return person;
+	}
+
+	public async renderQuestion(user: { id: User['id'] }, note: Note, poll: Poll) {
+		const question = {
+			type: 'Question',
+			id: `${this.config.url}/questions/${note.id}`,
+			actor: `${this.config.url}/users/${user.id}`,
+			content: note.text ?? '',
+			[poll.multiple ? 'anyOf' : 'oneOf']: poll.choices.map((text, i) => ({
+				name: text,
+				_misskey_votes: poll.votes[i],
+				replies: {
+					type: 'Collection',
+					totalItems: poll.votes[i],
+				},
+			})),
+		};
+	
+		return question;
+	}
+
+	public renderRead(user: { id: User['id'] }, message: MessagingMessage) {
+		return {
+			type: 'Read',
+			actor: `${this.config.url}/users/${user.id}`,
+			object: message.uri,
+		};
+	}
+
+	public renderReject(object: any, user: { id: User['id'] }) {
+		return {
+			type: 'Reject',
+			actor: `${this.config.url}/users/${user.id}`,
+			object,
+		};
+	}
+
+	public renderRemove(user: { id: User['id'] }, target: any, object: any) {
+		return {
+			type: 'Remove',
+			actor: `${this.config.url}/users/${user.id}`,
+			target,
+			object,
+		};
+	}
+
+	public renderTombstone(id: string) {
+		return {
+			id,
+			type: 'Tombstone',
+		};
+	}
+
+	public renderUndo(object: any, user: { id: User['id'] }) {
+		if (object == null) return null;
+		const id = typeof object.id === 'string' && object.id.startsWith(this.config.url) ? `${object.id}/undo` : undefined;
+
+		return {
+			type: 'Undo',
+			...(id ? { id } : {}),
+			actor: `${this.config.url}/users/${user.id}`,
+			object,
+			published: new Date().toISOString(),
+		};
+	}
+
+	public renderUpdate(object: any, user: { id: User['id'] }) {
+		const activity = {
+			id: `${this.config.url}/users/${user.id}#updates/${new Date().getTime()}`,
+			actor: `${this.config.url}/users/${user.id}`,
+			type: 'Update',
+			to: ['https://www.w3.org/ns/activitystreams#Public'],
+			object,
+			published: new Date().toISOString(),
+		} as any;
+	
+		return activity;
+	}
+
+	public renderVote(user: { id: User['id'] }, vote: PollVote, note: Note, poll: Poll, pollOwner: IRemoteUser) {
+		return {
+			id: `${this.config.url}/users/${user.id}#votes/${vote.id}/activity`,
+			actor: `${this.config.url}/users/${user.id}`,
+			type: 'Create',
+			to: [pollOwner.uri],
+			published: new Date().toISOString(),
+			object: {
+				id: `${this.config.url}/users/${user.id}#votes/${vote.id}`,
+				type: 'Note',
+				attributedTo: `${this.config.url}/users/${user.id}`,
+				to: [pollOwner.uri],
+				inReplyTo: note.uri,
+				name: poll.choices[vote.choice],
+			},
+		};
+	}
+
+	public renderActivity(x: any): IActivity | null {
+		if (x == null) return null;
+	
+		if (typeof x === 'object' && x.id == null) {
+			x.id = `${this.config.url}/${uuid()}`;
+		}
+	
+		return Object.assign({
+			'@context': [
+				'https://www.w3.org/ns/activitystreams',
+				'https://w3id.org/security/v1',
+				{
+					// as non-standards
+					manuallyApprovesFollowers: 'as:manuallyApprovesFollowers',
+					sensitive: 'as:sensitive',
+					Hashtag: 'as:Hashtag',
+					quoteUrl: 'as:quoteUrl',
+					// Mastodon
+					toot: 'http://joinmastodon.org/ns#',
+					Emoji: 'toot:Emoji',
+					featured: 'toot:featured',
+					discoverable: 'toot:discoverable',
+					// schema
+					schema: 'http://schema.org#',
+					PropertyValue: 'schema:PropertyValue',
+					value: 'schema:value',
+					// Misskey
+					misskey: 'https://misskey-hub.net/ns#',
+					'_misskey_content': 'misskey:_misskey_content',
+					'_misskey_quote': 'misskey:_misskey_quote',
+					'_misskey_reaction': 'misskey:_misskey_reaction',
+					'_misskey_votes': 'misskey:_misskey_votes',
+					'_misskey_talk': 'misskey:_misskey_talk',
+					'isCat': 'misskey:isCat',
+					// vcard
+					vcard: 'http://www.w3.org/2006/vcard/ns#',
+				},
+			],
+		}, x);
+	}
+	
+	public async attachLdSignature(activity: any, user: { id: User['id']; host: null; }): Promise<IActivity> {
+		const keypair = await this.userKeypairStoreService.getUserKeypair(user.id);
+	
+		const ldSignature = this.ldSignatureService.use();
+		ldSignature.debug = false;
+		activity = await ldSignature.signRsaSignature2017(activity, keypair.privateKey, `${this.config.url}/users/${user.id}#main-key`);
+	
+		return activity;
+	}
+	
+	/**
+	 * Render OrderedCollectionPage
+	 * @param id URL of self
+	 * @param totalItems Number of total items
+	 * @param orderedItems Items
+	 * @param partOf URL of base
+	 * @param prev URL of prev page (optional)
+	 * @param next URL of next page (optional)
+	 */
+	public renderOrderedCollectionPage(id: string, totalItems: any, orderedItems: any, partOf: string, prev?: string, next?: string) {
+		const page = {
+			id,
+			partOf,
+			type: 'OrderedCollectionPage',
+			totalItems,
+			orderedItems,
+		} as any;
+
+		if (prev) page.prev = prev;
+		if (next) page.next = next;
+
+		return page;
+	}
+
+	/**
+	 * Render OrderedCollection
+	 * @param id URL of self
+	 * @param totalItems Total number of items
+	 * @param first URL of first page (optional)
+	 * @param last URL of last page (optional)
+	 * @param orderedItems attached objects (optional)
+	 */
+	public renderOrderedCollection(id: string | null, totalItems: any, first?: string, last?: string, orderedItems?: Record<string, unknown>[]) {
+		const page: any = {
+			id,
+			type: 'OrderedCollection',
+			totalItems,
+		};
+	
+		if (first) page.first = first;
+		if (last) page.last = last;
+		if (orderedItems) page.orderedItems = orderedItems;
+	
+		return page;
+	}
+
+	async #getEmojis(names: string[]): Promise<Emoji[]> {
+		if (names == null || names.length === 0) return [];
+
+		const emojis = await Promise.all(
+			names.map(name => this.emojisRepository.findOneBy({
+				name,
+				host: IsNull(),
+			})),
+		);
+
+		return emojis.filter(emoji => emoji != null) as Emoji[];
+	}
+}
diff --git a/packages/backend/src/core/remote/activitypub/ApRequestService.ts b/packages/backend/src/core/remote/activitypub/ApRequestService.ts
new file mode 100644
index 0000000000..a449a77dc8
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/ApRequestService.ts
@@ -0,0 +1,182 @@
+import * as crypto from 'node:crypto';
+import { URL } from 'node:url';
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import type { User } from '@/models/entities/User.js';
+import { UserKeypairStoreService } from '@/core/UserKeypairStoreService.js';
+import { HttpRequestService } from '@/core/HttpRequestService.js';
+
+type Request = {
+	url: string;
+	method: string;
+	headers: Record<string, string>;
+};
+
+type Signed = {
+	request: Request;
+	signingString: string;
+	signature: string;
+	signatureHeader: string;
+};
+
+type PrivateKey = {
+	privateKeyPem: string;
+	keyId: string;
+};
+
+@Injectable()
+export class ApRequestService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private userKeypairStoreService: UserKeypairStoreService,
+		private httpRequestService: HttpRequestService,
+	) {
+	}
+
+	#createSignedPost(args: { key: PrivateKey, url: string, body: string, additionalHeaders: Record<string, string> }): Signed {
+		const u = new URL(args.url);
+		const digestHeader = `SHA-256=${crypto.createHash('sha256').update(args.body).digest('base64')}`;
+
+		const request: Request = {
+			url: u.href,
+			method: 'POST',
+			headers: this.#objectAssignWithLcKey({
+				'Date': new Date().toUTCString(),
+				'Host': u.hostname,
+				'Content-Type': 'application/activity+json',
+				'Digest': digestHeader,
+			}, args.additionalHeaders),
+		};
+
+		const result = this.#signToRequest(request, args.key, ['(request-target)', 'date', 'host', 'digest']);
+
+		return {
+			request,
+			signingString: result.signingString,
+			signature: result.signature,
+			signatureHeader: result.signatureHeader,
+		};
+	}
+
+	#createSignedGet(args: { key: PrivateKey, url: string, additionalHeaders: Record<string, string> }): Signed {
+		const u = new URL(args.url);
+
+		const request: Request = {
+			url: u.href,
+			method: 'GET',
+			headers: this.#objectAssignWithLcKey({
+				'Accept': 'application/activity+json, application/ld+json',
+				'Date': new Date().toUTCString(),
+				'Host': new URL(args.url).hostname,
+			}, args.additionalHeaders),
+		};
+
+		const result = this.#signToRequest(request, args.key, ['(request-target)', 'date', 'host', 'accept']);
+
+		return {
+			request,
+			signingString: result.signingString,
+			signature: result.signature,
+			signatureHeader: result.signatureHeader,
+		};
+	}
+
+	#signToRequest(request: Request, key: PrivateKey, includeHeaders: string[]): Signed {
+		const signingString = this.#genSigningString(request, includeHeaders);
+		const signature = crypto.sign('sha256', Buffer.from(signingString), key.privateKeyPem).toString('base64');
+		const signatureHeader = `keyId="${key.keyId}",algorithm="rsa-sha256",headers="${includeHeaders.join(' ')}",signature="${signature}"`;
+
+		request.headers = this.#objectAssignWithLcKey(request.headers, {
+			Signature: signatureHeader,
+		});
+
+		return {
+			request,
+			signingString,
+			signature,
+			signatureHeader,
+		};
+	}
+
+	#genSigningString(request: Request, includeHeaders: string[]): string {
+		request.headers = this.#lcObjectKey(request.headers);
+
+		const results: string[] = [];
+
+		for (const key of includeHeaders.map(x => x.toLowerCase())) {
+			if (key === '(request-target)') {
+				results.push(`(request-target): ${request.method.toLowerCase()} ${new URL(request.url).pathname}`);
+			} else {
+				results.push(`${key}: ${request.headers[key]}`);
+			}
+		}
+
+		return results.join('\n');
+	}
+
+	#lcObjectKey(src: Record<string, string>): Record<string, string> {
+		const dst: Record<string, string> = {};
+		for (const key of Object.keys(src).filter(x => x !== '__proto__' && typeof src[x] === 'string')) dst[key.toLowerCase()] = src[key];
+		return dst;
+	}
+
+	#objectAssignWithLcKey(a: Record<string, string>, b: Record<string, string>): Record<string, string> {
+		return Object.assign(this.#lcObjectKey(a), this.#lcObjectKey(b));
+	}
+
+	public async signedPost(user: { id: User['id'] }, url: string, object: any) {
+		const body = JSON.stringify(object);
+
+		const keypair = await this.userKeypairStoreService.getUserKeypair(user.id);
+
+		const req = this.#createSignedPost({
+			key: {
+				privateKeyPem: keypair.privateKey,
+				keyId: `${this.config.url}/users/${user.id}#main-key`,
+			},
+			url,
+			body,
+			additionalHeaders: {
+				'User-Agent': this.config.userAgent,
+			},
+		});
+
+		await this.httpRequestService.getResponse({
+			url,
+			method: req.request.method,
+			headers: req.request.headers,
+			body,
+		});
+	}
+
+	/**
+	 * Get AP object with http-signature
+	 * @param user http-signature user
+	 * @param url URL to fetch
+	 */
+	public async signedGet(url: string, user: { id: User['id'] }) {
+		const keypair = await this.userKeypairStoreService.getUserKeypair(user.id);
+
+		const req = this.#createSignedGet({
+			key: {
+				privateKeyPem: keypair.privateKey,
+				keyId: `${this.config.url}/users/${user.id}#main-key`,
+			},
+			url,
+			additionalHeaders: {
+				'User-Agent': this.config.userAgent,
+			},
+		});
+
+		const res = await this.httpRequestService.getResponse({
+			url,
+			method: req.request.method,
+			headers: req.request.headers,
+		});
+
+		return await res.json();
+	}
+}
diff --git a/packages/backend/src/core/remote/activitypub/ApResolverService.ts b/packages/backend/src/core/remote/activitypub/ApResolverService.ts
new file mode 100644
index 0000000000..9d8e177758
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/ApResolverService.ts
@@ -0,0 +1,190 @@
+import { Inject, Injectable } from '@nestjs/common';
+import type { ILocalUser } from '@/models/entities/User.js';
+import { InstanceActorService } from '@/core/InstanceActorService.js';
+import { NotesRepository, PollsRepository, NoteReactionsRepository, UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import { MetaService } from '@/core/MetaService.js';
+import { HttpRequestService } from '@/core/HttpRequestService.js';
+import { DI } from '@/di-symbols.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { isCollectionOrOrderedCollection } from './type.js';
+import { ApDbResolverService } from './ApDbResolverService.js';
+import { ApRendererService } from './ApRendererService.js';
+import { ApRequestService } from './ApRequestService.js';
+import type { IObject, ICollection, IOrderedCollection } from './type.js';
+
+@Injectable()
+export class ApResolverService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.pollsRepository)
+		private pollsRepository: PollsRepository,
+
+		@Inject(DI.noteReactionsRepository)
+		private noteReactionsRepository: NoteReactionsRepository,
+
+		private utilityService: UtilityService,
+		private instanceActorService: InstanceActorService,
+		private metaService: MetaService,
+		private apRequestService: ApRequestService,
+		private httpRequestService: HttpRequestService,
+		private apRendererService: ApRendererService,
+		private apDbResolverService: ApDbResolverService,
+	) {
+	}
+
+	public createResolver(): Resolver {
+		return new Resolver(
+			this.config,
+			this.usersRepository,
+			this.notesRepository,
+			this.pollsRepository,
+			this.noteReactionsRepository,
+			this.utilityService,
+			this.instanceActorService,
+			this.metaService,
+			this.apRequestService,
+			this.httpRequestService,
+			this.apRendererService,
+			this.apDbResolverService,
+		);
+	}
+}
+
+export class Resolver {
+	private history: Set<string>;
+	private user?: ILocalUser;
+
+	constructor(
+		private config: Config,
+		private usersRepository: UsersRepository,
+		private notesRepository: NotesRepository,
+		private pollsRepository: PollsRepository,
+		private noteReactionsRepository: NoteReactionsRepository,
+		private utilityService: UtilityService,
+		private instanceActorService: InstanceActorService,
+		private metaService: MetaService,
+		private apRequestService: ApRequestService,
+		private httpRequestService: HttpRequestService,
+		private apRendererService: ApRendererService,
+		private apDbResolverService: ApDbResolverService,
+	) {
+		this.history = new Set();
+	}
+
+	public getHistory(): string[] {
+		return Array.from(this.history);
+	}
+
+	public async resolveCollection(value: string | IObject): Promise<ICollection | IOrderedCollection> {
+		const collection = typeof value === 'string'
+			? await this.resolve(value)
+			: value;
+
+		if (isCollectionOrOrderedCollection(collection)) {
+			return collection;
+		} else {
+			throw new Error(`unrecognized collection type: ${collection.type}`);
+		}
+	}
+
+	public async resolve(value: string | IObject): Promise<IObject> {
+		if (value == null) {
+			throw new Error('resolvee is null (or undefined)');
+		}
+
+		if (typeof value !== 'string') {
+			return value;
+		}
+
+		if (value.includes('#')) {
+			// URLs with fragment parts cannot be resolved correctly because
+			// the fragment part does not get transmitted over HTTP(S).
+			// Avoid strange behaviour by not trying to resolve these at all.
+			throw new Error(`cannot resolve URL with fragment: ${value}`);
+		}
+
+		if (this.history.has(value)) {
+			throw new Error('cannot resolve already resolved one');
+		}
+
+		this.history.add(value);
+
+		const host = this.utilityService.extractDbHost(value);
+		if (this.utilityService.isSelfHost(host)) {
+			return await this.resolveLocal(value);
+		}
+
+		const meta = await this.metaService.fetch();
+		if (meta.blockedHosts.includes(host)) {
+			throw new Error('Instance is blocked');
+		}
+
+		if (this.config.signToActivityPubGet && !this.user) {
+			this.user = await this.instanceActorService.getInstanceActor();
+		}
+
+		const object = (this.user
+			? await this.apRequestService.signedGet(value, this.user)
+			: await this.httpRequestService.getJson(value, 'application/activity+json, application/ld+json')) as IObject;
+
+		if (object == null || (
+			Array.isArray(object['@context']) ?
+				!(object['@context'] as unknown[]).includes('https://www.w3.org/ns/activitystreams') :
+				object['@context'] !== 'https://www.w3.org/ns/activitystreams'
+		)) {
+			throw new Error('invalid response');
+		}
+
+		return object;
+	}
+
+	private resolveLocal(url: string): Promise<IObject> {
+		const parsed = this.apDbResolverService.parseUri(url);
+		if (!parsed.local) throw new Error('resolveLocal: not local');
+
+		switch (parsed.type) {
+			case 'notes':
+				return this.notesRepository.findOneByOrFail({ id: parsed.id })
+					.then(note => {
+						if (parsed.rest === 'activity') {
+						// this refers to the create activity and not the note itself
+							return this.apRendererService.renderActivity(this.apRendererService.renderCreate(this.apRendererService.renderNote(note)));
+						} else {
+							return this.apRendererService.renderNote(note);
+						}
+					});
+			case 'users':
+				return this.usersRepository.findOneByOrFail({ id: parsed.id })
+					.then(user => this.apRendererService.renderPerson(user as ILocalUser));
+			case 'questions':
+				// Polls are indexed by the note they are attached to.
+				return Promise.all([
+					this.notesRepository.findOneByOrFail({ id: parsed.id }),
+					this.pollsRepository.findOneByOrFail({ noteId: parsed.id }),
+				])
+					.then(([note, poll]) => this.apRendererService.renderQuestion({ id: note.userId }, note, poll));
+			case 'likes':
+				return this.noteReactionsRepository.findOneByOrFail({ id: parsed.id }).then(reaction =>
+					this.apRendererService.renderActivity(this.apRendererService.renderLike(reaction, { uri: null })));
+			case 'follows':
+				// rest should be <followee id>
+				if (parsed.rest == null || !/^\w+$/.test(parsed.rest)) throw new Error('resolveLocal: invalid follow URI');
+
+				return Promise.all(
+					[parsed.id, parsed.rest].map(id => this.usersRepository.findOneByOrFail({ id })),
+				)
+					.then(([follower, followee]) => this.apRendererService.renderActivity(this.apRendererService.renderFollow(follower, followee, url)));
+			default:
+				throw new Error(`resolveLocal: type ${type} unhandled`);
+		}
+	}
+}
diff --git a/packages/backend/src/core/remote/activitypub/LdSignatureService.ts b/packages/backend/src/core/remote/activitypub/LdSignatureService.ts
new file mode 100644
index 0000000000..ea0d2daf3d
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/LdSignatureService.ts
@@ -0,0 +1,150 @@
+import * as crypto from 'node:crypto';
+import { Inject, Injectable } from '@nestjs/common';
+import jsonld from 'jsonld';
+import fetch from 'node-fetch';
+import { HttpRequestService } from '@/core/HttpRequestService.js';
+import { CONTEXTS } from './misc/contexts.js';
+
+// RsaSignature2017 based from https://github.com/transmute-industries/RsaSignature2017
+
+@Injectable()
+export class LdSignatureService {
+	constructor(
+		private httpRequestService: HttpRequestService,
+	) {
+	}
+
+	public use(): LdSignature {
+		return new LdSignature(this.httpRequestService);
+	}
+}
+
+class LdSignature {
+	public debug = false;
+	public preLoad = true;
+	public loderTimeout = 10 * 1000;
+
+	constructor(
+		private httpRequestService: HttpRequestService,
+	) {
+	}
+
+	public async signRsaSignature2017(data: any, privateKey: string, creator: string, domain?: string, created?: Date): Promise<any> {
+		const options = {
+			type: 'RsaSignature2017',
+			creator,
+			domain,
+			nonce: crypto.randomBytes(16).toString('hex'),
+			created: (created ?? new Date()).toISOString(),
+		} as {
+			type: string;
+			creator: string;
+			domain?: string;
+			nonce: string;
+			created: string;
+		};
+
+		if (!domain) {
+			delete options.domain;
+		}
+
+		const toBeSigned = await this.createVerifyData(data, options);
+
+		const signer = crypto.createSign('sha256');
+		signer.update(toBeSigned);
+		signer.end();
+
+		const signature = signer.sign(privateKey);
+
+		return {
+			...data,
+			signature: {
+				...options,
+				signatureValue: signature.toString('base64'),
+			},
+		};
+	}
+
+	public async verifyRsaSignature2017(data: any, publicKey: string): Promise<boolean> {
+		const toBeSigned = await this.createVerifyData(data, data.signature);
+		const verifier = crypto.createVerify('sha256');
+		verifier.update(toBeSigned);
+		return verifier.verify(publicKey, data.signature.signatureValue, 'base64');
+	}
+
+	public async createVerifyData(data: any, options: any) {
+		const transformedOptions = {
+			...options,
+			'@context': 'https://w3id.org/identity/v1',
+		};
+		delete transformedOptions['type'];
+		delete transformedOptions['id'];
+		delete transformedOptions['signatureValue'];
+		const canonizedOptions = await this.normalize(transformedOptions);
+		const optionsHash = this.sha256(canonizedOptions);
+		const transformedData = { ...data };
+		delete transformedData['signature'];
+		const cannonidedData = await this.normalize(transformedData);
+		if (this.debug) console.debug(`cannonidedData: ${cannonidedData}`);
+		const documentHash = this.sha256(cannonidedData);
+		const verifyData = `${optionsHash}${documentHash}`;
+		return verifyData;
+	}
+
+	public async normalize(data: any) {
+		const customLoader = this.getLoader();
+		return await jsonld.normalize(data, {
+			documentLoader: customLoader,
+		});
+	}
+
+	private getLoader() {
+		return async (url: string): Promise<any> => {
+			if (!url.match('^https?\:\/\/')) throw `Invalid URL ${url}`;
+
+			if (this.preLoad) {
+				if (url in CONTEXTS) {
+					if (this.debug) console.debug(`HIT: ${url}`);
+					return {
+						contextUrl: null,
+						document: CONTEXTS[url],
+						documentUrl: url,
+					};
+				}
+			}
+
+			if (this.debug) console.debug(`MISS: ${url}`);
+			const document = await this.fetchDocument(url);
+			return {
+				contextUrl: null,
+				document: document,
+				documentUrl: url,
+			};
+		};
+	}
+
+	private async fetchDocument(url: string) {
+		const json = await fetch(url, {
+			headers: {
+				Accept: 'application/ld+json, application/json',
+			},
+			// TODO
+			//timeout: this.loderTimeout,
+			agent: u => u.protocol === 'http:' ? this.httpRequestService.httpAgent : this.httpRequestService.httpsAgent,
+		}).then(res => {
+			if (!res.ok) {
+				throw `${res.status} ${res.statusText}`;
+			} else {
+				return res.json();
+			}
+		});
+
+		return json;
+	}
+
+	public sha256(data: string): string {
+		const hash = crypto.createHash('sha256');
+		hash.update(data);
+		return hash.digest('hex');
+	}
+}
diff --git a/packages/backend/src/core/remote/activitypub/misc/contexts.ts b/packages/backend/src/core/remote/activitypub/misc/contexts.ts
new file mode 100644
index 0000000000..aee0d3629c
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/misc/contexts.ts
@@ -0,0 +1,526 @@
+/* eslint:disable:quotemark indent */
+const id_v1 = {
+	'@context': {
+		'id': '@id',
+		'type': '@type',
+
+		'cred': 'https://w3id.org/credentials#',
+		'dc': 'http://purl.org/dc/terms/',
+		'identity': 'https://w3id.org/identity#',
+		'perm': 'https://w3id.org/permissions#',
+		'ps': 'https://w3id.org/payswarm#',
+		'rdf': 'http://www.w3.org/1999/02/22-rdf-syntax-ns#',
+		'rdfs': 'http://www.w3.org/2000/01/rdf-schema#',
+		'sec': 'https://w3id.org/security#',
+		'schema': 'http://schema.org/',
+		'xsd': 'http://www.w3.org/2001/XMLSchema#',
+
+		'Group': 'https://www.w3.org/ns/activitystreams#Group',
+
+		'claim': { '@id': 'cred:claim', '@type': '@id' },
+		'credential': { '@id': 'cred:credential', '@type': '@id' },
+		'issued': { '@id': 'cred:issued', '@type': 'xsd:dateTime' },
+		'issuer': { '@id': 'cred:issuer', '@type': '@id' },
+		'recipient': { '@id': 'cred:recipient', '@type': '@id' },
+		'Credential': 'cred:Credential',
+		'CryptographicKeyCredential': 'cred:CryptographicKeyCredential',
+
+		'about': { '@id': 'schema:about', '@type': '@id' },
+		'address': { '@id': 'schema:address', '@type': '@id' },
+		'addressCountry': 'schema:addressCountry',
+		'addressLocality': 'schema:addressLocality',
+		'addressRegion': 'schema:addressRegion',
+		'comment': 'rdfs:comment',
+		'created': { '@id': 'dc:created', '@type': 'xsd:dateTime' },
+		'creator': { '@id': 'dc:creator', '@type': '@id' },
+		'description': 'schema:description',
+		'email': 'schema:email',
+		'familyName': 'schema:familyName',
+		'givenName': 'schema:givenName',
+		'image': { '@id': 'schema:image', '@type': '@id' },
+		'label': 'rdfs:label',
+		'name': 'schema:name',
+		'postalCode': 'schema:postalCode',
+		'streetAddress': 'schema:streetAddress',
+		'title': 'dc:title',
+		'url': { '@id': 'schema:url', '@type': '@id' },
+		'Person': 'schema:Person',
+		'PostalAddress': 'schema:PostalAddress',
+		'Organization': 'schema:Organization',
+
+		'identityService': { '@id': 'identity:identityService', '@type': '@id' },
+		'idp': { '@id': 'identity:idp', '@type': '@id' },
+		'Identity': 'identity:Identity',
+
+		'paymentProcessor': 'ps:processor',
+		'preferences': { '@id': 'ps:preferences', '@type': '@vocab' },
+
+		'cipherAlgorithm': 'sec:cipherAlgorithm',
+		'cipherData': 'sec:cipherData',
+		'cipherKey': 'sec:cipherKey',
+		'digestAlgorithm': 'sec:digestAlgorithm',
+		'digestValue': 'sec:digestValue',
+		'domain': 'sec:domain',
+		'expires': { '@id': 'sec:expiration', '@type': 'xsd:dateTime' },
+		'initializationVector': 'sec:initializationVector',
+		'member': { '@id': 'schema:member', '@type': '@id' },
+		'memberOf': { '@id': 'schema:memberOf', '@type': '@id' },
+		'nonce': 'sec:nonce',
+		'normalizationAlgorithm': 'sec:normalizationAlgorithm',
+		'owner': { '@id': 'sec:owner', '@type': '@id' },
+		'password': 'sec:password',
+		'privateKey': { '@id': 'sec:privateKey', '@type': '@id' },
+		'privateKeyPem': 'sec:privateKeyPem',
+		'publicKey': { '@id': 'sec:publicKey', '@type': '@id' },
+		'publicKeyPem': 'sec:publicKeyPem',
+		'publicKeyService': { '@id': 'sec:publicKeyService', '@type': '@id' },
+		'revoked': { '@id': 'sec:revoked', '@type': 'xsd:dateTime' },
+		'signature': 'sec:signature',
+		'signatureAlgorithm': 'sec:signatureAlgorithm',
+		'signatureValue': 'sec:signatureValue',
+		'CryptographicKey': 'sec:Key',
+		'EncryptedMessage': 'sec:EncryptedMessage',
+		'GraphSignature2012': 'sec:GraphSignature2012',
+		'LinkedDataSignature2015': 'sec:LinkedDataSignature2015',
+
+		'accessControl': { '@id': 'perm:accessControl', '@type': '@id' },
+		'writePermission': { '@id': 'perm:writePermission', '@type': '@id' },
+	},
+};
+
+const security_v1 = {
+	'@context': {
+		'id': '@id',
+		'type': '@type',
+
+		'dc': 'http://purl.org/dc/terms/',
+		'sec': 'https://w3id.org/security#',
+		'xsd': 'http://www.w3.org/2001/XMLSchema#',
+
+		'EcdsaKoblitzSignature2016': 'sec:EcdsaKoblitzSignature2016',
+		'Ed25519Signature2018': 'sec:Ed25519Signature2018',
+		'EncryptedMessage': 'sec:EncryptedMessage',
+		'GraphSignature2012': 'sec:GraphSignature2012',
+		'LinkedDataSignature2015': 'sec:LinkedDataSignature2015',
+		'LinkedDataSignature2016': 'sec:LinkedDataSignature2016',
+		'CryptographicKey': 'sec:Key',
+
+		'authenticationTag': 'sec:authenticationTag',
+		'canonicalizationAlgorithm': 'sec:canonicalizationAlgorithm',
+		'cipherAlgorithm': 'sec:cipherAlgorithm',
+		'cipherData': 'sec:cipherData',
+		'cipherKey': 'sec:cipherKey',
+		'created': { '@id': 'dc:created', '@type': 'xsd:dateTime' },
+		'creator': { '@id': 'dc:creator', '@type': '@id' },
+		'digestAlgorithm': 'sec:digestAlgorithm',
+		'digestValue': 'sec:digestValue',
+		'domain': 'sec:domain',
+		'encryptionKey': 'sec:encryptionKey',
+		'expiration': { '@id': 'sec:expiration', '@type': 'xsd:dateTime' },
+		'expires': { '@id': 'sec:expiration', '@type': 'xsd:dateTime' },
+		'initializationVector': 'sec:initializationVector',
+		'iterationCount': 'sec:iterationCount',
+		'nonce': 'sec:nonce',
+		'normalizationAlgorithm': 'sec:normalizationAlgorithm',
+		'owner': { '@id': 'sec:owner', '@type': '@id' },
+		'password': 'sec:password',
+		'privateKey': { '@id': 'sec:privateKey', '@type': '@id' },
+		'privateKeyPem': 'sec:privateKeyPem',
+		'publicKey': { '@id': 'sec:publicKey', '@type': '@id' },
+		'publicKeyBase58': 'sec:publicKeyBase58',
+		'publicKeyPem': 'sec:publicKeyPem',
+		'publicKeyWif': 'sec:publicKeyWif',
+		'publicKeyService': { '@id': 'sec:publicKeyService', '@type': '@id' },
+		'revoked': { '@id': 'sec:revoked', '@type': 'xsd:dateTime' },
+		'salt': 'sec:salt',
+		'signature': 'sec:signature',
+		'signatureAlgorithm': 'sec:signingAlgorithm',
+		'signatureValue': 'sec:signatureValue',
+	},
+};
+
+const activitystreams = {
+	'@context': {
+		'@vocab': '_:',
+		'xsd': 'http://www.w3.org/2001/XMLSchema#',
+		'as': 'https://www.w3.org/ns/activitystreams#',
+		'ldp': 'http://www.w3.org/ns/ldp#',
+		'vcard': 'http://www.w3.org/2006/vcard/ns#',
+		'id': '@id',
+		'type': '@type',
+		'Accept': 'as:Accept',
+		'Activity': 'as:Activity',
+		'IntransitiveActivity': 'as:IntransitiveActivity',
+		'Add': 'as:Add',
+		'Announce': 'as:Announce',
+		'Application': 'as:Application',
+		'Arrive': 'as:Arrive',
+		'Article': 'as:Article',
+		'Audio': 'as:Audio',
+		'Block': 'as:Block',
+		'Collection': 'as:Collection',
+		'CollectionPage': 'as:CollectionPage',
+		'Relationship': 'as:Relationship',
+		'Create': 'as:Create',
+		'Delete': 'as:Delete',
+		'Dislike': 'as:Dislike',
+		'Document': 'as:Document',
+		'Event': 'as:Event',
+		'Follow': 'as:Follow',
+		'Flag': 'as:Flag',
+		'Group': 'as:Group',
+		'Ignore': 'as:Ignore',
+		'Image': 'as:Image',
+		'Invite': 'as:Invite',
+		'Join': 'as:Join',
+		'Leave': 'as:Leave',
+		'Like': 'as:Like',
+		'Link': 'as:Link',
+		'Mention': 'as:Mention',
+		'Note': 'as:Note',
+		'Object': 'as:Object',
+		'Offer': 'as:Offer',
+		'OrderedCollection': 'as:OrderedCollection',
+		'OrderedCollectionPage': 'as:OrderedCollectionPage',
+		'Organization': 'as:Organization',
+		'Page': 'as:Page',
+		'Person': 'as:Person',
+		'Place': 'as:Place',
+		'Profile': 'as:Profile',
+		'Question': 'as:Question',
+		'Reject': 'as:Reject',
+		'Remove': 'as:Remove',
+		'Service': 'as:Service',
+		'TentativeAccept': 'as:TentativeAccept',
+		'TentativeReject': 'as:TentativeReject',
+		'Tombstone': 'as:Tombstone',
+		'Undo': 'as:Undo',
+		'Update': 'as:Update',
+		'Video': 'as:Video',
+		'View': 'as:View',
+		'Listen': 'as:Listen',
+		'Read': 'as:Read',
+		'Move': 'as:Move',
+		'Travel': 'as:Travel',
+		'IsFollowing': 'as:IsFollowing',
+		'IsFollowedBy': 'as:IsFollowedBy',
+		'IsContact': 'as:IsContact',
+		'IsMember': 'as:IsMember',
+		'subject': {
+			'@id': 'as:subject',
+			'@type': '@id',
+		},
+		'relationship': {
+			'@id': 'as:relationship',
+			'@type': '@id',
+		},
+		'actor': {
+			'@id': 'as:actor',
+			'@type': '@id',
+		},
+		'attributedTo': {
+			'@id': 'as:attributedTo',
+			'@type': '@id',
+		},
+		'attachment': {
+			'@id': 'as:attachment',
+			'@type': '@id',
+		},
+		'bcc': {
+			'@id': 'as:bcc',
+			'@type': '@id',
+		},
+		'bto': {
+			'@id': 'as:bto',
+			'@type': '@id',
+		},
+		'cc': {
+			'@id': 'as:cc',
+			'@type': '@id',
+		},
+		'context': {
+			'@id': 'as:context',
+			'@type': '@id',
+		},
+		'current': {
+			'@id': 'as:current',
+			'@type': '@id',
+		},
+		'first': {
+			'@id': 'as:first',
+			'@type': '@id',
+		},
+		'generator': {
+			'@id': 'as:generator',
+			'@type': '@id',
+		},
+		'icon': {
+			'@id': 'as:icon',
+			'@type': '@id',
+		},
+		'image': {
+			'@id': 'as:image',
+			'@type': '@id',
+		},
+		'inReplyTo': {
+			'@id': 'as:inReplyTo',
+			'@type': '@id',
+		},
+		'items': {
+			'@id': 'as:items',
+			'@type': '@id',
+		},
+		'instrument': {
+			'@id': 'as:instrument',
+			'@type': '@id',
+		},
+		'orderedItems': {
+			'@id': 'as:items',
+			'@type': '@id',
+			'@container': '@list',
+		},
+		'last': {
+			'@id': 'as:last',
+			'@type': '@id',
+		},
+		'location': {
+			'@id': 'as:location',
+			'@type': '@id',
+		},
+		'next': {
+			'@id': 'as:next',
+			'@type': '@id',
+		},
+		'object': {
+			'@id': 'as:object',
+			'@type': '@id',
+		},
+		'oneOf': {
+			'@id': 'as:oneOf',
+			'@type': '@id',
+		},
+		'anyOf': {
+			'@id': 'as:anyOf',
+			'@type': '@id',
+		},
+		'closed': {
+			'@id': 'as:closed',
+			'@type': 'xsd:dateTime',
+		},
+		'origin': {
+			'@id': 'as:origin',
+			'@type': '@id',
+		},
+		'accuracy': {
+			'@id': 'as:accuracy',
+			'@type': 'xsd:float',
+		},
+		'prev': {
+			'@id': 'as:prev',
+			'@type': '@id',
+		},
+		'preview': {
+			'@id': 'as:preview',
+			'@type': '@id',
+		},
+		'replies': {
+			'@id': 'as:replies',
+			'@type': '@id',
+		},
+		'result': {
+			'@id': 'as:result',
+			'@type': '@id',
+		},
+		'audience': {
+			'@id': 'as:audience',
+			'@type': '@id',
+		},
+		'partOf': {
+			'@id': 'as:partOf',
+			'@type': '@id',
+		},
+		'tag': {
+			'@id': 'as:tag',
+			'@type': '@id',
+		},
+		'target': {
+			'@id': 'as:target',
+			'@type': '@id',
+		},
+		'to': {
+			'@id': 'as:to',
+			'@type': '@id',
+		},
+		'url': {
+			'@id': 'as:url',
+			'@type': '@id',
+		},
+		'altitude': {
+			'@id': 'as:altitude',
+			'@type': 'xsd:float',
+		},
+		'content': 'as:content',
+		'contentMap': {
+			'@id': 'as:content',
+			'@container': '@language',
+		},
+		'name': 'as:name',
+		'nameMap': {
+			'@id': 'as:name',
+			'@container': '@language',
+		},
+		'duration': {
+			'@id': 'as:duration',
+			'@type': 'xsd:duration',
+		},
+		'endTime': {
+			'@id': 'as:endTime',
+			'@type': 'xsd:dateTime',
+		},
+		'height': {
+			'@id': 'as:height',
+			'@type': 'xsd:nonNegativeInteger',
+		},
+		'href': {
+			'@id': 'as:href',
+			'@type': '@id',
+		},
+		'hreflang': 'as:hreflang',
+		'latitude': {
+			'@id': 'as:latitude',
+			'@type': 'xsd:float',
+		},
+		'longitude': {
+			'@id': 'as:longitude',
+			'@type': 'xsd:float',
+		},
+		'mediaType': 'as:mediaType',
+		'published': {
+			'@id': 'as:published',
+			'@type': 'xsd:dateTime',
+		},
+		'radius': {
+			'@id': 'as:radius',
+			'@type': 'xsd:float',
+		},
+		'rel': 'as:rel',
+		'startIndex': {
+			'@id': 'as:startIndex',
+			'@type': 'xsd:nonNegativeInteger',
+		},
+		'startTime': {
+			'@id': 'as:startTime',
+			'@type': 'xsd:dateTime',
+		},
+		'summary': 'as:summary',
+		'summaryMap': {
+			'@id': 'as:summary',
+			'@container': '@language',
+		},
+		'totalItems': {
+			'@id': 'as:totalItems',
+			'@type': 'xsd:nonNegativeInteger',
+		},
+		'units': 'as:units',
+		'updated': {
+			'@id': 'as:updated',
+			'@type': 'xsd:dateTime',
+		},
+		'width': {
+			'@id': 'as:width',
+			'@type': 'xsd:nonNegativeInteger',
+		},
+		'describes': {
+			'@id': 'as:describes',
+			'@type': '@id',
+		},
+		'formerType': {
+			'@id': 'as:formerType',
+			'@type': '@id',
+		},
+		'deleted': {
+			'@id': 'as:deleted',
+			'@type': 'xsd:dateTime',
+		},
+		'inbox': {
+			'@id': 'ldp:inbox',
+			'@type': '@id',
+		},
+		'outbox': {
+			'@id': 'as:outbox',
+			'@type': '@id',
+		},
+		'following': {
+			'@id': 'as:following',
+			'@type': '@id',
+		},
+		'followers': {
+			'@id': 'as:followers',
+			'@type': '@id',
+		},
+		'streams': {
+			'@id': 'as:streams',
+			'@type': '@id',
+		},
+		'preferredUsername': 'as:preferredUsername',
+		'endpoints': {
+			'@id': 'as:endpoints',
+			'@type': '@id',
+		},
+		'uploadMedia': {
+			'@id': 'as:uploadMedia',
+			'@type': '@id',
+		},
+		'proxyUrl': {
+			'@id': 'as:proxyUrl',
+			'@type': '@id',
+		},
+		'liked': {
+			'@id': 'as:liked',
+			'@type': '@id',
+		},
+		'oauthAuthorizationEndpoint': {
+			'@id': 'as:oauthAuthorizationEndpoint',
+			'@type': '@id',
+		},
+		'oauthTokenEndpoint': {
+			'@id': 'as:oauthTokenEndpoint',
+			'@type': '@id',
+		},
+		'provideClientKey': {
+			'@id': 'as:provideClientKey',
+			'@type': '@id',
+		},
+		'signClientKey': {
+			'@id': 'as:signClientKey',
+			'@type': '@id',
+		},
+		'sharedInbox': {
+			'@id': 'as:sharedInbox',
+			'@type': '@id',
+		},
+		'Public': {
+			'@id': 'as:Public',
+			'@type': '@id',
+		},
+		'source': 'as:source',
+		'likes': {
+			'@id': 'as:likes',
+			'@type': '@id',
+		},
+		'shares': {
+			'@id': 'as:shares',
+			'@type': '@id',
+		},
+		'alsoKnownAs': {
+			'@id': 'as:alsoKnownAs',
+			'@type': '@id',
+		},
+	},
+};
+
+export const CONTEXTS: Record<string, unknown> = {
+	'https://w3id.org/identity/v1': id_v1,
+	'https://w3id.org/security/v1': security_v1,
+	'https://www.w3.org/ns/activitystreams': activitystreams,
+};
diff --git a/packages/backend/src/core/remote/activitypub/misc/get-note-html.ts b/packages/backend/src/core/remote/activitypub/misc/get-note-html.ts
new file mode 100644
index 0000000000..af23a04a71
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/misc/get-note-html.ts
@@ -0,0 +1,8 @@
+import * as mfm from 'mfm-js';
+import type { Note } from '@/models/entities/Note.js';
+import { toHtml } from '../../../../mfm/to-html.js';
+
+export default function(note: Note) {
+	if (!note.text) return '';
+	return toHtml(mfm.parse(note.text), JSON.parse(note.mentionedRemoteUsers));
+}
diff --git a/packages/backend/src/core/remote/activitypub/models/ApImageService.ts b/packages/backend/src/core/remote/activitypub/models/ApImageService.ts
new file mode 100644
index 0000000000..d4e01923a2
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/models/ApImageService.ts
@@ -0,0 +1,90 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type { CacheableRemoteUser } from '@/models/entities/User.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import { MetaService } from '@/core/MetaService.js';
+import { truncate } from '@/misc/truncate.js';
+import { DB_MAX_IMAGE_COMMENT_LENGTH } from '@/misc/hard-limits.js';
+import { DriveService } from '@/core/DriveService.js';
+import type Logger from '@/logger.js';
+import { ApResolverService } from '../ApResolverService.js';
+import { ApLoggerService } from '../ApLoggerService.js';
+
+@Injectable()
+export class ApImageService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private metaService: MetaService,
+		private apResolverService: ApResolverService,
+		private driveService: DriveService,
+		private apLoggerService: ApLoggerService,
+	) {
+		this.#logger = this.apLoggerService.logger;
+	}
+	
+	/**
+	 * Imageを作成します。
+	 */
+	public async createImage(actor: CacheableRemoteUser, value: any): Promise<DriveFile> {
+		// 投稿者が凍結されていたらスキップ
+		if (actor.isSuspended) {
+			throw new Error('actor has been suspended');
+		}
+
+		const image = await this.apResolverService.createResolver().resolve(value) as any;
+
+		if (image.url == null) {
+			throw new Error('invalid image: url not privided');
+		}
+
+		this.#logger.info(`Creating the Image: ${image.url}`);
+
+		const instance = await this.metaService.fetch();
+
+		let file = await this.driveService.uploadFromUrl({
+			url: image.url,
+			user: actor,
+			uri: image.url,
+			sensitive: image.sensitive,
+			isLink: !instance.cacheRemoteFiles,
+			comment: truncate(image.name, DB_MAX_IMAGE_COMMENT_LENGTH),
+		});
+
+		if (file.isLink) {
+			// URLが異なっている場合、同じ画像が以前に異なるURLで登録されていたということなので、
+			// URLを更新する
+			if (file.url !== image.url) {
+				await this.driveFilesRepository.update({ id: file.id }, {
+					url: image.url,
+					uri: image.url,
+				});
+
+				file = await this.driveFilesRepository.findOneByOrFail({ id: file.id });
+			}
+		}
+
+		return file;
+	}
+
+	/**
+	 * Imageを解決します。
+	 *
+	 * Misskeyに対象のImageが登録されていればそれを返し、そうでなければ
+	 * リモートサーバーからフェッチしてMisskeyに登録しそれを返します。
+	 */
+	public async resolveImage(actor: CacheableRemoteUser, value: any): Promise<DriveFile> {
+		// TODO
+
+		// リモートサーバーからフェッチしてきて登録
+		return await this.createImage(actor, value);
+	}
+}
diff --git a/packages/backend/src/core/remote/activitypub/models/ApMentionService.ts b/packages/backend/src/core/remote/activitypub/models/ApMentionService.ts
new file mode 100644
index 0000000000..898da07a26
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/models/ApMentionService.ts
@@ -0,0 +1,41 @@
+import { Inject, Injectable } from '@nestjs/common';
+import promiseLimit from 'promise-limit';
+import { DI } from '@/di-symbols.js';
+import type { UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import { toArray, unique } from '@/misc/prelude/array.js';
+import type { CacheableUser } from '@/models/entities/User.js';
+import { isMention } from '../type.js';
+import { ApResolverService } from '../ApResolverService.js';
+import { ApPersonService } from './ApPersonService.js';
+import type { IObject, IApMention } from '../type.js';
+
+@Injectable()
+export class ApMentionService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private apResolverService: ApResolverService,
+		private apPersonService: ApPersonService,
+	) {
+	}
+
+	public async extractApMentions(tags: IObject | IObject[] | null | undefined) {
+		const hrefs = unique(this.extractApMentionObjects(tags).map(x => x.href as string));
+	
+		const resolver = this.apResolverService.createResolver();
+	
+		const limit = promiseLimit<CacheableUser | null>(2);
+		const mentionedUsers = (await Promise.all(
+			hrefs.map(x => limit(() => this.apPersonService.resolvePerson(x, resolver).catch(() => null))),
+		)).filter((x): x is CacheableUser => x != null);
+	
+		return mentionedUsers;
+	}
+	
+	public extractApMentionObjects(tags: IObject | IObject[] | null | undefined): IApMention[] {
+		if (tags == null) return [];
+		return toArray(tags).filter(isMention);
+	}
+}
diff --git a/packages/backend/src/core/remote/activitypub/models/ApNoteService.ts b/packages/backend/src/core/remote/activitypub/models/ApNoteService.ts
new file mode 100644
index 0000000000..c74949c595
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/models/ApNoteService.ts
@@ -0,0 +1,403 @@
+import { forwardRef, Inject, Injectable } from '@nestjs/common';
+import promiseLimit from 'promise-limit';
+import { DI } from '@/di-symbols.js';
+import { MessagingMessagesRepository, PollsRepository, EmojisRepository } from '@/models/index.js';
+import type { UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type { CacheableRemoteUser } from '@/models/entities/User.js';
+import type { Note } from '@/models/entities/Note.js';
+import { toArray, toSingle, unique } from '@/misc/prelude/array.js';
+import type { Emoji } from '@/models/entities/Emoji.js';
+import { MetaService } from '@/core/MetaService.js';
+import { AppLockService } from '@/core/AppLockService.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import { NoteCreateService } from '@/core/NoteCreateService.js';
+import type Logger from '@/logger.js';
+import { IdService } from '@/core/IdService.js';
+import { PollService } from '@/core/PollService.js';
+import { StatusError } from '@/misc/status-error.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { MessagingService } from '@/core/MessagingService.js';
+import { getOneApId, getApId, getOneApHrefNullable, validPost, isEmoji, getApType } from '../type.js';
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+import { ApLoggerService } from '../ApLoggerService.js';
+import { ApMfmService } from '../ApMfmService.js';
+import { ApDbResolverService } from '../ApDbResolverService.js';
+import { ApResolverService } from '../ApResolverService.js';
+import { ApAudienceService } from '../ApAudienceService.js';
+import { ApPersonService } from './ApPersonService.js';
+import { extractApHashtags } from './tag.js';
+import { ApMentionService } from './ApMentionService.js';
+import { ApQuestionService } from './ApQuestionService.js';
+import { ApImageService } from './ApImageService.js';
+import type { Resolver } from '../ApResolverService.js';
+import type { IObject, IPost } from '../type.js';
+
+@Injectable()
+export class ApNoteService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.pollsRepository)
+		private pollsRepository: PollsRepository,
+
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+
+		@Inject(DI.messagingMessagesRepository)
+		private messagingMessagesRepository: MessagingMessagesRepository,
+
+		private idService: IdService,
+		private apMfmService: ApMfmService,
+		private apResolverService: ApResolverService,
+
+		// 循環参照のため / for circular dependency
+		@Inject(forwardRef(() => ApPersonService))
+		private apPersonService: ApPersonService,
+	
+		private utilityService: UtilityService,
+		private apAudienceService: ApAudienceService,
+		private apMentionService: ApMentionService,
+		private apImageService: ApImageService,
+		private apQuestionService: ApQuestionService,
+		private metaService: MetaService,
+		private messagingService: MessagingService,
+		private appLockService: AppLockService,
+		private pollService: PollService,
+		private noteCreateService: NoteCreateService,
+		private apDbResolverService: ApDbResolverService,
+		private apLoggerService: ApLoggerService,
+	) {
+		this.#logger = this.apLoggerService.logger;
+	}
+
+	public validateNote(object: any, uri: string) {
+		const expectHost = this.utilityService.extractDbHost(uri);
+	
+		if (object == null) {
+			return new Error('invalid Note: object is null');
+		}
+	
+		if (!validPost.includes(getApType(object))) {
+			return new Error(`invalid Note: invalid object type ${getApType(object)}`);
+		}
+	
+		if (object.id && this.utilityService.extractDbHost(object.id) !== expectHost) {
+			return new Error(`invalid Note: id has different host. expected: ${expectHost}, actual: ${this.utilityService.extractDbHost(object.id)}`);
+		}
+	
+		if (object.attributedTo && this.utilityService.extractDbHost(getOneApId(object.attributedTo)) !== expectHost) {
+			return new Error(`invalid Note: attributedTo has different host. expected: ${expectHost}, actual: ${this.utilityService.extractDbHost(object.attributedTo)}`);
+		}
+	
+		return null;
+	}
+	
+	/**
+	 * Noteをフェッチします。
+	 *
+	 * Misskeyに対象のNoteが登録されていればそれを返します。
+	 */
+	public async fetchNote(object: string | IObject): Promise<Note | null> {
+		return await this.apDbResolverService.getNoteFromApId(object);
+	}
+	
+	/**
+	 * Noteを作成します。
+	 */
+	public async createNote(value: string | IObject, resolver?: Resolver, silent = false): Promise<Note | null> {
+		if (resolver == null) resolver = this.apResolverService.createResolver();
+	
+		const object: any = await resolver.resolve(value);
+	
+		const entryUri = getApId(value);
+		const err = this.validateNote(object, entryUri);
+		if (err) {
+			this.#logger.error(`${err.message}`, {
+				resolver: {
+					history: resolver.getHistory(),
+				},
+				value: value,
+				object: object,
+			});
+			throw new Error('invalid note');
+		}
+	
+		const note: IPost = object;
+	
+		this.#logger.debug(`Note fetched: ${JSON.stringify(note, null, 2)}`);
+	
+		this.#logger.info(`Creating the Note: ${note.id}`);
+	
+		// 投稿者をフェッチ
+		const actor = await this.apPersonService.resolvePerson(getOneApId(note.attributedTo), resolver) as CacheableRemoteUser;
+	
+		// 投稿者が凍結されていたらスキップ
+		if (actor.isSuspended) {
+			throw new Error('actor has been suspended');
+		}
+	
+		const noteAudience = await this.apAudienceService.parseAudience(actor, note.to, note.cc);
+		let visibility = noteAudience.visibility;
+		const visibleUsers = noteAudience.visibleUsers;
+	
+		// Audience (to, cc) が指定されてなかった場合
+		if (visibility === 'specified' && visibleUsers.length === 0) {
+			if (typeof value === 'string') {	// 入力がstringならばresolverでGETが発生している
+				// こちらから匿名GET出来たものならばpublic
+				visibility = 'public';
+			}
+		}
+	
+		let isMessaging = note._misskey_talk && visibility === 'specified';
+	
+		const apMentions = await this.apMentionService.extractApMentions(note.tag);
+		const apHashtags = await extractApHashtags(note.tag);
+	
+		// 添付ファイル
+		// TODO: attachmentは必ずしもImageではない
+		// TODO: attachmentは必ずしも配列ではない
+		// Noteがsensitiveなら添付もsensitiveにする
+		const limit = promiseLimit(2);
+	
+		note.attachment = Array.isArray(note.attachment) ? note.attachment : note.attachment ? [note.attachment] : [];
+		const files = note.attachment
+			.map(attach => attach.sensitive = note.sensitive)
+			? (await Promise.all(note.attachment.map(x => limit(() => this.apImageService.resolveImage(actor, x)) as Promise<DriveFile>)))
+				.filter(image => image != null)
+			: [];
+	
+		// リプライ
+		const reply: Note | null = note.inReplyTo
+			? await this.resolveNote(note.inReplyTo, resolver).then(x => {
+				if (x == null) {
+					this.#logger.warn('Specified inReplyTo, but nout found');
+					throw new Error('inReplyTo not found');
+				} else {
+					return x;
+				}
+			}).catch(async err => {
+				// トークだったらinReplyToのエラーは無視
+				const uri = getApId(note.inReplyTo);
+				if (uri.startsWith(this.config.url + '/')) {
+					const id = uri.split('/').pop();
+					const talk = await this.messagingMessagesRepository.findOneBy({ id });
+					if (talk) {
+						isMessaging = true;
+						return null;
+					}
+				}
+	
+				this.#logger.warn(`Error in inReplyTo ${note.inReplyTo} - ${err.statusCode ?? err}`);
+				throw err;
+			})
+			: null;
+	
+		// 引用
+		let quote: Note | undefined | null;
+	
+		if (note._misskey_quote || note.quoteUrl) {
+			const tryResolveNote = async (uri: string): Promise<{
+				status: 'ok';
+				res: Note | null;
+			} | {
+				status: 'permerror' | 'temperror';
+			}> => {
+				if (typeof uri !== 'string' || !uri.match(/^https?:/)) return { status: 'permerror' };
+				try {
+					const res = await this.resolveNote(uri);
+					if (res) {
+						return {
+							status: 'ok',
+							res,
+						};
+					} else {
+						return {
+							status: 'permerror',
+						};
+					}
+				} catch (e) {
+					return {
+						status: (e instanceof StatusError && e.isClientError) ? 'permerror' : 'temperror',
+					};
+				}
+			};
+	
+			const uris = unique([note._misskey_quote, note.quoteUrl].filter((x): x is string => typeof x === 'string'));
+			const results = await Promise.all(uris.map(uri => tryResolveNote(uri)));
+	
+			quote = results.filter((x): x is { status: 'ok', res: Note | null } => x.status === 'ok').map(x => x.res).find(x => x);
+			if (!quote) {
+				if (results.some(x => x.status === 'temperror')) {
+					throw 'quote resolve failed';
+				}
+			}
+		}
+	
+		const cw = note.summary === '' ? null : note.summary;
+	
+		// テキストのパース
+		let text: string | null = null;
+		if (note.source?.mediaType === 'text/x.misskeymarkdown' && typeof note.source.content === 'string') {
+			text = note.source.content;
+		} else if (typeof note._misskey_content !== 'undefined') {
+			text = note._misskey_content;
+		} else if (typeof note.content === 'string') {
+			text = this.apMfmService.htmlToMfm(note.content, note.tag);
+		}
+	
+		// vote
+		if (reply && reply.hasPoll) {
+			const poll = await this.pollsRepository.findOneByOrFail({ noteId: reply.id });
+	
+			const tryCreateVote = async (name: string, index: number): Promise<null> => {
+				if (poll.expiresAt && Date.now() > new Date(poll.expiresAt).getTime()) {
+					this.#logger.warn(`vote to expired poll from AP: actor=${actor.username}@${actor.host}, note=${note.id}, choice=${name}`);
+				} else if (index >= 0) {
+					this.#logger.info(`vote from AP: actor=${actor.username}@${actor.host}, note=${note.id}, choice=${name}`);
+					await this.pollService.vote(actor, reply, index);
+	
+					// リモートフォロワーにUpdate配信
+					this.pollService.deliverQuestionUpdate(reply.id);
+				}
+				return null;
+			};
+	
+			if (note.name) {
+				return await tryCreateVote(note.name, poll.choices.findIndex(x => x === note.name));
+			}
+		}
+	
+		const emojis = await this.extractEmojis(note.tag ?? [], actor.host).catch(e => {
+			this.#logger.info(`extractEmojis: ${e}`);
+			return [] as Emoji[];
+		});
+	
+		const apEmojis = emojis.map(emoji => emoji.name);
+	
+		const poll = await this.apQuestionService.extractPollFromQuestion(note, resolver).catch(() => undefined);
+	
+		if (isMessaging) {
+			for (const recipient of visibleUsers) {
+				await this.messagingService.createMessage(actor, recipient, undefined, text ?? undefined, (files && files.length > 0) ? files[0] : null, object.id);
+				return null;
+			}
+		}
+	
+		return await this.noteCreateService.create(actor, {
+			createdAt: note.published ? new Date(note.published) : null,
+			files,
+			reply,
+			renote: quote,
+			name: note.name,
+			cw,
+			text,
+			localOnly: false,
+			visibility,
+			visibleUsers,
+			apMentions,
+			apHashtags,
+			apEmojis,
+			poll,
+			uri: note.id,
+			url: getOneApHrefNullable(note.url),
+		}, silent);
+	}
+	
+	/**
+	 * Noteを解決します。
+	 *
+	 * Misskeyに対象のNoteが登録されていればそれを返し、そうでなければ
+	 * リモートサーバーからフェッチしてMisskeyに登録しそれを返します。
+	 */
+	public async resolveNote(value: string | IObject, resolver?: Resolver): Promise<Note | null> {
+		const uri = typeof value === 'string' ? value : value.id;
+		if (uri == null) throw new Error('missing uri');
+	
+		// ブロックしてたら中断
+		const meta = await this.metaService.fetch();
+		if (meta.blockedHosts.includes(this.utilityService.extractDbHost(uri))) throw { statusCode: 451 };
+	
+		const unlock = await this.appLockService.getApLock(uri);
+	
+		try {
+			//#region このサーバーに既に登録されていたらそれを返す
+			const exist = await this.fetchNote(uri);
+	
+			if (exist) {
+				return exist;
+			}
+			//#endregion
+	
+			if (uri.startsWith(this.config.url)) {
+				throw new StatusError('cannot resolve local note', 400, 'cannot resolve local note');
+			}
+	
+			// リモートサーバーからフェッチしてきて登録
+			// ここでuriの代わりに添付されてきたNote Objectが指定されていると、サーバーフェッチを経ずにノートが生成されるが
+			// 添付されてきたNote Objectは偽装されている可能性があるため、常にuriを指定してサーバーフェッチを行う。
+			return await this.createNote(uri, resolver, true);
+		} finally {
+			unlock();
+		}
+	}
+	
+	public async extractEmojis(tags: IObject | IObject[], host: string): Promise<Emoji[]> {
+		host = this.utilityService.toPuny(host);
+	
+		if (!tags) return [];
+	
+		const eomjiTags = toArray(tags).filter(isEmoji);
+	
+		return await Promise.all(eomjiTags.map(async tag => {
+			const name = tag.name!.replace(/^:/, '').replace(/:$/, '');
+			tag.icon = toSingle(tag.icon);
+	
+			const exists = await this.emojisRepository.findOneBy({
+				host,
+				name,
+			});
+	
+			if (exists) {
+				if ((tag.updated != null && exists.updatedAt == null)
+					|| (tag.id != null && exists.uri == null)
+					|| (tag.updated != null && exists.updatedAt != null && new Date(tag.updated) > exists.updatedAt)
+					|| (tag.icon!.url !== exists.originalUrl)
+				) {
+					await this.emojisRepository.update({
+						host,
+						name,
+					}, {
+						uri: tag.id,
+						originalUrl: tag.icon!.url,
+						publicUrl: tag.icon!.url,
+						updatedAt: new Date(),
+					});
+	
+					return await this.emojisRepository.findOneBy({
+						host,
+						name,
+					}) as Emoji;
+				}
+	
+				return exists;
+			}
+	
+			this.#logger.info(`register emoji host=${host}, name=${name}`);
+	
+			return await this.emojisRepository.insert({
+				id: this.idService.genId(),
+				host,
+				name,
+				uri: tag.id,
+				originalUrl: tag.icon!.url,
+				publicUrl: tag.icon!.url,
+				updatedAt: new Date(),
+				aliases: [],
+			} as Partial<Emoji>).then(x => this.emojisRepository.findOneByOrFail(x.identifiers[0]));
+		}));
+	}
+}
diff --git a/packages/backend/src/core/remote/activitypub/models/ApPersonService.ts b/packages/backend/src/core/remote/activitypub/models/ApPersonService.ts
new file mode 100644
index 0000000000..1ca6463484
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/models/ApPersonService.ts
@@ -0,0 +1,594 @@
+import { forwardRef, Inject, Injectable } from '@nestjs/common';
+import promiseLimit from 'promise-limit';
+import { DataSource } from 'typeorm';
+import { ModuleRef } from '@nestjs/core';
+import { DI } from '@/di-symbols.js';
+import { FollowingsRepository, InstancesRepository, UserProfilesRepository, UserPublickeysRepository, UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type { CacheableUser, IRemoteUser } from '@/models/entities/User.js';
+import { User } from '@/models/entities/User.js';
+import { truncate } from '@/misc/truncate.js';
+import type { UserCacheService } from '@/core/UserCacheService.js';
+import { normalizeForSearch } from '@/misc/normalize-for-search.js';
+import { isDuplicateKeyValueError } from '@/misc/is-duplicate-key-value-error.js';
+import type Logger from '@/logger.js';
+import type { Note } from '@/models/entities/Note.js';
+import type { IdService } from '@/core/IdService.js';
+import type { MfmService } from '@/core/MfmService.js';
+import type { Emoji } from '@/models/entities/Emoji.js';
+import { toArray } from '@/misc/prelude/array.js';
+import type { GlobalEventService } from '@/core/GlobalEventService.js';
+import type { FederatedInstanceService } from '@/core/FederatedInstanceService.js';
+import type { FetchInstanceMetadataService } from '@/core/FetchInstanceMetadataService.js';
+import { UserProfile } from '@/models/entities/UserProfile.js';
+import { UserPublickey } from '@/models/entities/UserPublickey.js';
+import type UsersChart from '@/core/chart/charts/users.js';
+import type InstanceChart from '@/core/chart/charts/instance.js';
+import type { HashtagService } from '@/core/HashtagService.js';
+import { UserNotePining } from '@/models/entities/UserNotePining.js';
+import { StatusError } from '@/misc/status-error.js';
+import type { UtilityService } from '@/core/UtilityService.js';
+import type { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { getApId, getApType, getOneApHrefNullable, isActor, isCollection, isCollectionOrOrderedCollection, isPropertyValue } from '../type.js';
+import { extractApHashtags } from './tag.js';
+import type { OnModuleInit } from '@nestjs/common';
+import type { ApNoteService } from './ApNoteService.js';
+import type { ApMfmService } from '../ApMfmService.js';
+import type { ApResolverService, Resolver } from '../ApResolverService.js';
+import type { ApLoggerService } from '../ApLoggerService.js';
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+import type { ApImageService } from './ApImageService.js';
+import type { IActor, IObject, IApPropertyValue } from '../type.js';
+
+const nameLength = 128;
+const summaryLength = 2048;
+
+const services: {
+	[x: string]: (id: string, username: string) => any
+} = {
+	'misskey:authentication:twitter': (userId, screenName) => ({ userId, screenName }),
+	'misskey:authentication:github': (id, login) => ({ id, login }),
+	'misskey:authentication:discord': (id, name) => $discord(id, name),
+};
+
+const $discord = (id: string, name: string) => {
+	if (typeof name !== 'string') {
+		name = 'unknown#0000';
+	}
+	const [username, discriminator] = name.split('#');
+	return { id, username, discriminator };
+};
+
+function addService(target: { [x: string]: any }, source: IApPropertyValue) {
+	const service = services[source.name];
+
+	if (typeof source.value !== 'string') {
+		source.value = 'unknown';
+	}
+
+	const [id, username] = source.value.split('@');
+
+	if (service) {
+		target[source.name.split(':')[2]] = service(id, username);
+	}
+}
+
+@Injectable()
+export class ApPersonService implements OnModuleInit {
+	private utilityService: UtilityService;
+	private userEntityService: UserEntityService;
+	private idService: IdService;
+	private globalEventService: GlobalEventService;
+	private federatedInstanceService: FederatedInstanceService;
+	private fetchInstanceMetadataService: FetchInstanceMetadataService;
+	private userCacheService: UserCacheService;
+	private apResolverService: ApResolverService;
+	private apNoteService: ApNoteService;
+	private apImageService: ApImageService;
+	private apMfmService: ApMfmService;
+	private mfmService: MfmService;
+	private hashtagService: HashtagService;
+	private usersChart: UsersChart;
+	private instanceChart: InstanceChart;
+	private apLoggerService: ApLoggerService;
+	#logger: Logger;
+
+	constructor(
+		private moduleRef: ModuleRef,
+
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.userPublickeysRepository)
+		private userPublickeysRepository: UserPublickeysRepository,
+
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		//private utilityService: UtilityService,
+		//private userEntityService: UserEntityService,
+		//private idService: IdService,
+		//private globalEventService: GlobalEventService,
+		//private federatedInstanceService: FederatedInstanceService,
+		//private fetchInstanceMetadataService: FetchInstanceMetadataService,
+		//private userCacheService: UserCacheService,
+		//private apResolverService: ApResolverService,
+		//private apNoteService: ApNoteService,
+		//private apImageService: ApImageService,
+		//private apMfmService: ApMfmService,
+		//private mfmService: MfmService,
+		//private hashtagService: HashtagService,
+		//private usersChart: UsersChart,
+		//private instanceChart: InstanceChart,
+		//private apLoggerService: ApLoggerService,
+	) {
+	}
+
+	onModuleInit() {
+		this.utilityService = this.moduleRef.get('UtilityService');
+		this.userEntityService = this.moduleRef.get('UserEntityService');
+		this.idService = this.moduleRef.get('IdService');
+		this.globalEventService = this.moduleRef.get('GlobalEventService');
+		this.federatedInstanceService = this.moduleRef.get('FederatedInstanceService');
+		this.fetchInstanceMetadataService = this.moduleRef.get('FetchInstanceMetadataService');
+		this.userCacheService = this.moduleRef.get('UserCacheService');
+		this.apResolverService = this.moduleRef.get('ApResolverService');
+		this.apNoteService = this.moduleRef.get('ApNoteService');
+		this.apImageService = this.moduleRef.get('ApImageService');
+		this.apMfmService = this.moduleRef.get('ApMfmService');
+		this.mfmService = this.moduleRef.get('MfmService');
+		this.hashtagService = this.moduleRef.get('HashtagService');
+		this.usersChart = this.moduleRef.get('UsersChart');
+		this.instanceChart = this.moduleRef.get('InstanceChart');
+		this.apLoggerService = this.moduleRef.get('ApLoggerService');
+		this.#logger = this.apLoggerService.logger;
+	}
+
+	/**
+	 * Validate and convert to actor object
+	 * @param x Fetched object
+	 * @param uri Fetch target URI
+	 */
+	#validateActor(x: IObject, uri: string): IActor {
+		const expectHost = this.utilityService.toPuny(new URL(uri).hostname);
+
+		if (x == null) {
+			throw new Error('invalid Actor: object is null');
+		}
+
+		if (!isActor(x)) {
+			throw new Error(`invalid Actor type '${x.type}'`);
+		}
+
+		if (!(typeof x.id === 'string' && x.id.length > 0)) {
+			throw new Error('invalid Actor: wrong id');
+		}
+
+		if (!(typeof x.inbox === 'string' && x.inbox.length > 0)) {
+			throw new Error('invalid Actor: wrong inbox');
+		}
+
+		if (!(typeof x.preferredUsername === 'string' && x.preferredUsername.length > 0 && x.preferredUsername.length <= 128 && /^\w([\w-.]*\w)?$/.test(x.preferredUsername))) {
+			throw new Error('invalid Actor: wrong username');
+		}
+
+		// These fields are only informational, and some AP software allows these
+		// fields to be very long. If they are too long, we cut them off. This way
+		// we can at least see these users and their activities.
+		if (x.name) {
+			if (!(typeof x.name === 'string' && x.name.length > 0)) {
+				throw new Error('invalid Actor: wrong name');
+			}
+			x.name = truncate(x.name, nameLength);
+		}
+		if (x.summary) {
+			if (!(typeof x.summary === 'string' && x.summary.length > 0)) {
+				throw new Error('invalid Actor: wrong summary');
+			}
+			x.summary = truncate(x.summary, summaryLength);
+		}
+
+		const idHost = this.utilityService.toPuny(new URL(x.id!).hostname);
+		if (idHost !== expectHost) {
+			throw new Error('invalid Actor: id has different host');
+		}
+
+		if (x.publicKey) {
+			if (typeof x.publicKey.id !== 'string') {
+				throw new Error('invalid Actor: publicKey.id is not a string');
+			}
+
+			const publicKeyIdHost = this.utilityService.toPuny(new URL(x.publicKey.id).hostname);
+			if (publicKeyIdHost !== expectHost) {
+				throw new Error('invalid Actor: publicKey.id has different host');
+			}
+		}
+
+		return x;
+	}
+
+	/**
+	 * Personをフェッチします。
+	 *
+	 * Misskeyに対象のPersonが登録されていればそれを返します。
+	 */
+	public async fetchPerson(uri: string, resolver?: Resolver): Promise<CacheableUser | null> {
+		if (typeof uri !== 'string') throw new Error('uri is not string');
+
+		const cached = this.userCacheService.uriPersonCache.get(uri);
+		if (cached) return cached;
+
+		// URIがこのサーバーを指しているならデータベースからフェッチ
+		if (uri.startsWith(this.config.url + '/')) {
+			const id = uri.split('/').pop();
+			const u = await this.usersRepository.findOneBy({ id });
+			if (u) this.userCacheService.uriPersonCache.set(uri, u);
+			return u;
+		}
+
+		//#region このサーバーに既に登録されていたらそれを返す
+		const exist = await this.usersRepository.findOneBy({ uri });
+
+		if (exist) {
+			this.userCacheService.uriPersonCache.set(uri, exist);
+			return exist;
+		}
+		//#endregion
+
+		return null;
+	}
+
+	/**
+	 * Personを作成します。
+	 */
+	public async createPerson(uri: string, resolver?: Resolver): Promise<User> {
+		if (typeof uri !== 'string') throw new Error('uri is not string');
+
+		if (uri.startsWith(this.config.url)) {
+			throw new StatusError('cannot resolve local user', 400, 'cannot resolve local user');
+		}
+
+		if (resolver == null) resolver = this.apResolverService.createResolver();
+
+		const object = await resolver.resolve(uri) as any;
+
+		const person = this.#validateActor(object, uri);
+
+		this.#logger.info(`Creating the Person: ${person.id}`);
+
+		const host = this.utilityService.toPuny(new URL(object.id).hostname);
+
+		const { fields } = this.analyzeAttachments(person.attachment ?? []);
+
+		const tags = extractApHashtags(person.tag).map(tag => normalizeForSearch(tag)).splice(0, 32);
+
+		const isBot = getApType(object) === 'Service';
+
+		const bday = person['vcard:bday']?.match(/^\d{4}-\d{2}-\d{2}/);
+
+		// Create user
+		let user: IRemoteUser;
+		try {
+		// Start transaction
+			await this.db.transaction(async transactionalEntityManager => {
+				user = await transactionalEntityManager.save(new User({
+					id: this.idService.genId(),
+					avatarId: null,
+					bannerId: null,
+					createdAt: new Date(),
+					lastFetchedAt: new Date(),
+					name: truncate(person.name, nameLength),
+					isLocked: !!person.manuallyApprovesFollowers,
+					isExplorable: !!person.discoverable,
+					username: person.preferredUsername,
+					usernameLower: person.preferredUsername!.toLowerCase(),
+					host,
+					inbox: person.inbox,
+					sharedInbox: person.sharedInbox ?? (person.endpoints ? person.endpoints.sharedInbox : undefined),
+					followersUri: person.followers ? getApId(person.followers) : undefined,
+					featured: person.featured ? getApId(person.featured) : undefined,
+					uri: person.id,
+					tags,
+					isBot,
+					isCat: (person as any).isCat === true,
+					showTimelineReplies: false,
+				})) as IRemoteUser;
+
+				await transactionalEntityManager.save(new UserProfile({
+					userId: user.id,
+					description: person.summary ? this.apMfmService.htmlToMfm(truncate(person.summary, summaryLength), person.tag) : null,
+					url: getOneApHrefNullable(person.url),
+					fields,
+					birthday: bday ? bday[0] : null,
+					location: person['vcard:Address'] ?? null,
+					userHost: host,
+				}));
+
+				if (person.publicKey) {
+					await transactionalEntityManager.save(new UserPublickey({
+						userId: user.id,
+						keyId: person.publicKey.id,
+						keyPem: person.publicKey.publicKeyPem,
+					}));
+				}
+			});
+		} catch (e) {
+		// duplicate key error
+			if (isDuplicateKeyValueError(e)) {
+			// /users/@a => /users/:id のように入力がaliasなときにエラーになることがあるのを対応
+				const u = await this.usersRepository.findOneBy({
+					uri: person.id,
+				});
+
+				if (u) {
+					user = u as IRemoteUser;
+				} else {
+					throw new Error('already registered');
+				}
+			} else {
+				this.#logger.error(e instanceof Error ? e : new Error(e as string));
+				throw e;
+			}
+		}
+
+		// Register host
+		this.federatedInstanceService.registerOrFetchInstanceDoc(host).then(i => {
+			this.instancesRepository.increment({ id: i.id }, 'usersCount', 1);
+			this.instanceChart.newUser(i.host);
+			this.fetchInstanceMetadataService.fetchInstanceMetadata(i);
+		});
+
+		this.usersChart.update(user!, true);
+
+		// ハッシュタグ更新
+		this.hashtagService.updateUsertags(user!, tags);
+
+		//#region アバターとヘッダー画像をフェッチ
+		const [avatar, banner] = await Promise.all([
+			person.icon,
+			person.image,
+		].map(img =>
+			img == null
+				? Promise.resolve(null)
+				: this.apImageService.resolveImage(user!, img).catch(() => null),
+		));
+
+		const avatarId = avatar ? avatar.id : null;
+		const bannerId = banner ? banner.id : null;
+
+		await this.usersRepository.update(user!.id, {
+			avatarId,
+			bannerId,
+		});
+
+	user!.avatarId = avatarId;
+	user!.bannerId = bannerId;
+	//#endregion
+
+	//#region カスタム絵文字取得
+	const emojis = await this.apNoteService.extractEmojis(person.tag ?? [], host).catch(err => {
+		this.#logger.info(`extractEmojis: ${err}`);
+		return [] as Emoji[];
+	});
+
+	const emojiNames = emojis.map(emoji => emoji.name);
+
+	await this.usersRepository.update(user!.id, {
+		emojis: emojiNames,
+	});
+	//#endregion
+
+	await this.updateFeatured(user!.id).catch(err => this.#logger.error(err));
+
+	return user!;
+	}
+
+	/**
+	 * Personの情報を更新します。
+	 * Misskeyに対象のPersonが登録されていなければ無視します。
+	 * @param uri URI of Person
+	 * @param resolver Resolver
+	 * @param hint Hint of Person object (この値が正当なPersonの場合、Remote resolveをせずに更新に利用します)
+	 */
+	public async updatePerson(uri: string, resolver?: Resolver | null, hint?: IObject): Promise<void> {
+		if (typeof uri !== 'string') throw new Error('uri is not string');
+
+		// URIがこのサーバーを指しているならスキップ
+		if (uri.startsWith(this.config.url + '/')) {
+			return;
+		}
+
+		//#region このサーバーに既に登録されているか
+		const exist = await this.usersRepository.findOneBy({ uri }) as IRemoteUser;
+
+		if (exist == null) {
+			return;
+		}
+		//#endregion
+
+		if (resolver == null) resolver = this.apResolverService.createResolver();
+
+		const object = hint ?? await resolver.resolve(uri);
+
+		const person = this.#validateActor(object, uri);
+
+		this.#logger.info(`Updating the Person: ${person.id}`);
+
+		// アバターとヘッダー画像をフェッチ
+		const [avatar, banner] = await Promise.all([
+			person.icon,
+			person.image,
+		].map(img =>
+			img == null
+				? Promise.resolve(null)
+				: this.apImageService.resolveImage(exist, img).catch(() => null),
+		));
+
+		// カスタム絵文字取得
+		const emojis = await this.apNoteService.extractEmojis(person.tag ?? [], exist.host).catch(e => {
+			this.#logger.info(`extractEmojis: ${e}`);
+			return [] as Emoji[];
+		});
+
+		const emojiNames = emojis.map(emoji => emoji.name);
+
+		const { fields } = this.analyzeAttachments(person.attachment ?? []);
+
+		const tags = extractApHashtags(person.tag).map(tag => normalizeForSearch(tag)).splice(0, 32);
+
+		const bday = person['vcard:bday']?.match(/^\d{4}-\d{2}-\d{2}/);
+
+		const updates = {
+			lastFetchedAt: new Date(),
+			inbox: person.inbox,
+			sharedInbox: person.sharedInbox ?? (person.endpoints ? person.endpoints.sharedInbox : undefined),
+			followersUri: person.followers ? getApId(person.followers) : undefined,
+			featured: person.featured,
+			emojis: emojiNames,
+			name: truncate(person.name, nameLength),
+			tags,
+			isBot: getApType(object) === 'Service',
+			isCat: (person as any).isCat === true,
+			isLocked: !!person.manuallyApprovesFollowers,
+			isExplorable: !!person.discoverable,
+		} as Partial<User>;
+
+		if (avatar) {
+			updates.avatarId = avatar.id;
+		}
+
+		if (banner) {
+			updates.bannerId = banner.id;
+		}
+
+		// Update user
+		await this.usersRepository.update(exist.id, updates);
+
+		if (person.publicKey) {
+			await this.userPublickeysRepository.update({ userId: exist.id }, {
+				keyId: person.publicKey.id,
+				keyPem: person.publicKey.publicKeyPem,
+			});
+		}
+
+		await this.userProfilesRepository.update({ userId: exist.id }, {
+			url: getOneApHrefNullable(person.url),
+			fields,
+			description: person.summary ? this.apMfmService.htmlToMfm(truncate(person.summary, summaryLength), person.tag) : null,
+			birthday: bday ? bday[0] : null,
+			location: person['vcard:Address'] ?? null,
+		});
+
+		this.globalEventService.publishInternalEvent('remoteUserUpdated', { id: exist.id });
+
+		// ハッシュタグ更新
+		this.hashtagService.updateUsertags(exist, tags);
+
+		// 該当ユーザーが既にフォロワーになっていた場合はFollowingもアップデートする
+		await this.followingsRepository.update({
+			followerId: exist.id,
+		}, {
+			followerSharedInbox: person.sharedInbox ?? (person.endpoints ? person.endpoints.sharedInbox : undefined),
+		});
+
+		await this.updateFeatured(exist.id).catch(err => this.#logger.error(err));
+	}
+
+	/**
+	 * Personを解決します。
+	 *
+	 * Misskeyに対象のPersonが登録されていればそれを返し、そうでなければ
+	 * リモートサーバーからフェッチしてMisskeyに登録しそれを返します。
+	 */
+	public async resolvePerson(uri: string, resolver?: Resolver): Promise<CacheableUser> {
+		if (typeof uri !== 'string') throw new Error('uri is not string');
+
+		//#region このサーバーに既に登録されていたらそれを返す
+		const exist = await this.fetchPerson(uri);
+
+		if (exist) {
+			return exist;
+		}
+		//#endregion
+
+		// リモートサーバーからフェッチしてきて登録
+		if (resolver == null) resolver = this.apResolverService.createResolver();
+		return await this.createPerson(uri, resolver);
+	}
+
+	public analyzeAttachments(attachments: IObject | IObject[] | undefined) {
+		const fields: {
+		name: string,
+		value: string
+	}[] = [];
+		const services: { [x: string]: any } = {};
+
+		if (Array.isArray(attachments)) {
+			for (const attachment of attachments.filter(isPropertyValue)) {
+				if (isPropertyValue(attachment.identifier)) {
+					addService(services, attachment.identifier);
+				} else {
+					fields.push({
+						name: attachment.name,
+						value: this.mfmService.fromHtml(attachment.value),
+					});
+				}
+			}
+		}
+
+		return { fields, services };
+	}
+
+	public async updateFeatured(userId: User['id']) {
+		const user = await this.usersRepository.findOneByOrFail({ id: userId });
+		if (!this.userEntityService.isRemoteUser(user)) return;
+		if (!user.featured) return;
+
+		this.#logger.info(`Updating the featured: ${user.uri}`);
+
+		const resolver = this.apResolverService.createResolver();
+
+		// Resolve to (Ordered)Collection Object
+		const collection = await resolver.resolveCollection(user.featured);
+		if (!isCollectionOrOrderedCollection(collection)) throw new Error('Object is not Collection or OrderedCollection');
+
+		// Resolve to Object(may be Note) arrays
+		const unresolvedItems = isCollection(collection) ? collection.items : collection.orderedItems;
+		const items = await Promise.all(toArray(unresolvedItems).map(x => resolver.resolve(x)));
+
+		// Resolve and regist Notes
+		const limit = promiseLimit<Note | null>(2);
+		const featuredNotes = await Promise.all(items
+			.filter(item => getApType(item) === 'Note')	// TODO: Noteでなくてもいいかも
+			.slice(0, 5)
+			.map(item => limit(() => this.apNoteService.resolveNote(item, resolver))));
+
+		await this.db.transaction(async transactionalEntityManager => {
+			await transactionalEntityManager.delete(UserNotePining, { userId: user.id });
+
+			// とりあえずidを別の時間で生成して順番を維持
+			let td = 0;
+			for (const note of featuredNotes.filter(note => note != null)) {
+				td -= 1000;
+				transactionalEntityManager.insert(UserNotePining, {
+					id: this.idService.genId(new Date(Date.now() + td)),
+					createdAt: new Date(),
+					userId: user.id,
+					noteId: note!.id,
+				});
+			}
+		});
+	}
+}
diff --git a/packages/backend/src/core/remote/activitypub/models/ApQuestionService.ts b/packages/backend/src/core/remote/activitypub/models/ApQuestionService.ts
new file mode 100644
index 0000000000..97f26d1681
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/models/ApQuestionService.ts
@@ -0,0 +1,109 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { NotesRepository, PollsRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type { IPoll } from '@/models/entities/Poll.js';
+import type Logger from '@/logger.js';
+import { isQuestion } from '../type.js';
+import { ApLoggerService } from '../ApLoggerService.js';
+import { ApResolverService } from '../ApResolverService.js';
+import type { Resolver } from '../ApResolverService.js';
+import type { IObject, IQuestion } from '../type.js';
+
+@Injectable()
+export class ApQuestionService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.pollsRepository)
+		private pollsRepository: PollsRepository,
+
+		private apResolverService: ApResolverService,
+		private apLoggerService: ApLoggerService,
+	) {
+		this.#logger = this.apLoggerService.logger;
+	}
+
+	public async extractPollFromQuestion(source: string | IObject, resolver?: Resolver): Promise<IPoll> {
+		if (resolver == null) resolver = this.apResolverService.createResolver();
+
+		const question = await resolver.resolve(source);
+
+		if (!isQuestion(question)) {
+			throw new Error('invalid type');
+		}
+
+		const multiple = !question.oneOf;
+		const expiresAt = question.endTime ? new Date(question.endTime) : question.closed ? new Date(question.closed) : null;
+
+		if (multiple && !question.anyOf) {
+			throw new Error('invalid question');
+		}
+
+		const choices = question[multiple ? 'anyOf' : 'oneOf']!
+			.map((x, i) => x.name!);
+
+		const votes = question[multiple ? 'anyOf' : 'oneOf']!
+			.map((x, i) => x.replies && x.replies.totalItems || x._misskey_votes || 0);
+
+		return {
+			choices,
+			votes,
+			multiple,
+			expiresAt,
+		};
+	}
+
+	/**
+	 * Update votes of Question
+	 * @param uri URI of AP Question object
+	 * @returns true if updated
+	 */
+	public async updateQuestion(value: any) {
+		const uri = typeof value === 'string' ? value : value.id;
+
+		// URIがこのサーバーを指しているならスキップ
+		if (uri.startsWith(this.config.url + '/')) throw new Error('uri points local');
+
+		//#region このサーバーに既に登録されているか
+		const note = await this.notesRepository.findOneBy({ uri });
+		if (note == null) throw new Error('Question is not registed');
+
+		const poll = await this.pollsRepository.findOneBy({ noteId: note.id });
+		if (poll == null) throw new Error('Question is not registed');
+		//#endregion
+
+		// resolve new Question object
+		const resolver = this.apResolverService.createResolver();
+		const question = await resolver.resolve(value) as IQuestion;
+		this.#logger.debug(`fetched question: ${JSON.stringify(question, null, 2)}`);
+
+		if (question.type !== 'Question') throw new Error('object is not a Question');
+
+		const apChoices = question.oneOf ?? question.anyOf;
+
+		let changed = false;
+
+		for (const choice of poll.choices) {
+			const oldCount = poll.votes[poll.choices.indexOf(choice)];
+			const newCount = apChoices!.filter(ap => ap.name === choice)[0].replies!.totalItems;
+
+			if (oldCount !== newCount) {
+				changed = true;
+				poll.votes[poll.choices.indexOf(choice)] = newCount;
+			}
+		}
+
+		await this.pollsRepository.update({ noteId: note.id }, {
+			votes: poll.votes,
+		});
+
+		return changed;
+	}
+}
diff --git a/packages/backend/src/core/remote/activitypub/models/icon.ts b/packages/backend/src/core/remote/activitypub/models/icon.ts
new file mode 100644
index 0000000000..50794a937d
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/models/icon.ts
@@ -0,0 +1,5 @@
+export type IIcon = {
+	type: string;
+	mediaType?: string;
+	url?: string;
+};
diff --git a/packages/backend/src/core/remote/activitypub/models/identifier.ts b/packages/backend/src/core/remote/activitypub/models/identifier.ts
new file mode 100644
index 0000000000..f6c3bb8c88
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/models/identifier.ts
@@ -0,0 +1,5 @@
+export type IIdentifier = {
+	type: string;
+	name: string;
+	value: string;
+};
diff --git a/packages/backend/src/core/remote/activitypub/models/tag.ts b/packages/backend/src/core/remote/activitypub/models/tag.ts
new file mode 100644
index 0000000000..803846a0b0
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/models/tag.ts
@@ -0,0 +1,19 @@
+import { toArray } from '@/misc/prelude/array.js';
+import { isHashtag } from '../type.js';
+import type { IObject, IApHashtag } from '../type.js';
+
+export function extractApHashtags(tags: IObject | IObject[] | null | undefined) {
+	if (tags == null) return [];
+
+	const hashtags = extractApHashtagObjects(tags);
+
+	return hashtags.map(tag => {
+		const m = tag.name.match(/^#(.+)/);
+		return m ? m[1] : null;
+	}).filter((x): x is string => x != null);
+}
+
+export function extractApHashtagObjects(tags: IObject | IObject[] | null | undefined): IApHashtag[] {
+	if (tags == null) return [];
+	return toArray(tags).filter(isHashtag);
+}
diff --git a/packages/backend/src/core/remote/activitypub/type.ts b/packages/backend/src/core/remote/activitypub/type.ts
new file mode 100644
index 0000000000..de7eb0ed83
--- /dev/null
+++ b/packages/backend/src/core/remote/activitypub/type.ts
@@ -0,0 +1,295 @@
+export type obj = { [x: string]: any };
+export type ApObject = IObject | string | (IObject | string)[];
+
+export interface IObject {
+	'@context': string | string[] | obj | obj[];
+	type: string | string[];
+	id?: string;
+	summary?: string;
+	published?: string;
+	cc?: ApObject;
+	to?: ApObject;
+	attributedTo: ApObject;
+	attachment?: any[];
+	inReplyTo?: any;
+	replies?: ICollection;
+	content?: string;
+	name?: string;
+	startTime?: Date;
+	endTime?: Date;
+	icon?: any;
+	image?: any;
+	url?: ApObject;
+	href?: string;
+	tag?: IObject | IObject[];
+	sensitive?: boolean;
+}
+
+/**
+ * Get array of ActivityStreams Objects id
+ */
+export function getApIds(value: ApObject | undefined): string[] {
+	if (value == null) return [];
+	const array = Array.isArray(value) ? value : [value];
+	return array.map(x => getApId(x));
+}
+
+/**
+ * Get first ActivityStreams Object id
+ */
+export function getOneApId(value: ApObject): string {
+	const firstOne = Array.isArray(value) ? value[0] : value;
+	return getApId(firstOne);
+}
+
+/**
+ * Get ActivityStreams Object id
+ */
+export function getApId(value: string | IObject): string {
+	if (typeof value === 'string') return value;
+	if (typeof value.id === 'string') return value.id;
+	throw new Error('cannot detemine id');
+}
+
+/**
+ * Get ActivityStreams Object type
+ */
+export function getApType(value: IObject): string {
+	if (typeof value.type === 'string') return value.type;
+	if (Array.isArray(value.type) && typeof value.type[0] === 'string') return value.type[0];
+	throw new Error('cannot detect type');
+}
+
+export function getOneApHrefNullable(value: ApObject | undefined): string | undefined {
+	const firstOne = Array.isArray(value) ? value[0] : value;
+	return getApHrefNullable(firstOne);
+}
+
+export function getApHrefNullable(value: string | IObject | undefined): string | undefined {
+	if (typeof value === 'string') return value;
+	if (typeof value?.href === 'string') return value.href;
+	return undefined;
+}
+
+export interface IActivity extends IObject {
+	//type: 'Activity';
+	actor: IObject | string;
+	object: IObject | string;
+	target?: IObject | string;
+	/** LD-Signature */
+	signature?: {
+		type: string;
+		created: Date;
+		creator: string;
+		domain?: string;
+		nonce?: string;
+		signatureValue: string;
+	};
+}
+
+export interface ICollection extends IObject {
+	type: 'Collection';
+	totalItems: number;
+	items: ApObject;
+}
+
+export interface IOrderedCollection extends IObject {
+	type: 'OrderedCollection';
+	totalItems: number;
+	orderedItems: ApObject;
+}
+
+export const validPost = ['Note', 'Question', 'Article', 'Audio', 'Document', 'Image', 'Page', 'Video', 'Event'];
+
+export const isPost = (object: IObject): object is IPost =>
+	validPost.includes(getApType(object));
+
+export interface IPost extends IObject {
+	type: 'Note' | 'Question' | 'Article' | 'Audio' | 'Document' | 'Image' | 'Page' | 'Video' | 'Event';
+	source?: {
+		content: string;
+		mediaType: string;
+	};
+	_misskey_quote?: string;
+	quoteUrl?: string;
+	_misskey_talk: boolean;
+}
+
+export interface IQuestion extends IObject {
+	type: 'Note' | 'Question';
+	source?: {
+		content: string;
+		mediaType: string;
+	};
+	_misskey_quote?: string;
+	quoteUrl?: string;
+	oneOf?: IQuestionChoice[];
+	anyOf?: IQuestionChoice[];
+	endTime?: Date;
+	closed?: Date;
+}
+
+export const isQuestion = (object: IObject): object is IQuestion =>
+	getApType(object) === 'Note' || getApType(object) === 'Question';
+
+interface IQuestionChoice {
+	name?: string;
+	replies?: ICollection;
+	_misskey_votes?: number;
+}
+export interface ITombstone extends IObject {
+	type: 'Tombstone';
+	formerType?: string;
+	deleted?: Date;
+}
+
+export const isTombstone = (object: IObject): object is ITombstone =>
+	getApType(object) === 'Tombstone';
+
+export const validActor = ['Person', 'Service', 'Group', 'Organization', 'Application'];
+
+export const isActor = (object: IObject): object is IActor =>
+	validActor.includes(getApType(object));
+
+export interface IActor extends IObject {
+	type: 'Person' | 'Service' | 'Organization' | 'Group' | 'Application';
+	name?: string;
+	preferredUsername?: string;
+	manuallyApprovesFollowers?: boolean;
+	discoverable?: boolean;
+	inbox: string;
+	sharedInbox?: string;	// 後方互換性のため
+	publicKey?: {
+		id: string;
+		publicKeyPem: string;
+	};
+	followers?: string | ICollection | IOrderedCollection;
+	following?: string | ICollection | IOrderedCollection;
+	featured?: string | IOrderedCollection;
+	outbox: string | IOrderedCollection;
+	endpoints?: {
+		sharedInbox?: string;
+	};
+	'vcard:bday'?: string;
+	'vcard:Address'?: string;
+}
+
+export const isCollection = (object: IObject): object is ICollection =>
+	getApType(object) === 'Collection';
+
+export const isOrderedCollection = (object: IObject): object is IOrderedCollection =>
+	getApType(object) === 'OrderedCollection';
+
+export const isCollectionOrOrderedCollection = (object: IObject): object is ICollection | IOrderedCollection =>
+	isCollection(object) || isOrderedCollection(object);
+
+export interface IApPropertyValue extends IObject {
+	type: 'PropertyValue';
+	identifier: IApPropertyValue;
+	name: string;
+	value: string;
+}
+
+export const isPropertyValue = (object: IObject): object is IApPropertyValue =>
+	object &&
+	getApType(object) === 'PropertyValue' &&
+	typeof object.name === 'string' &&
+	typeof (object as any).value === 'string';
+
+export interface IApMention extends IObject {
+	type: 'Mention';
+	href: string;
+}
+
+export const isMention = (object: IObject): object is IApMention =>
+	getApType(object) === 'Mention' &&
+	typeof object.href === 'string';
+
+export interface IApHashtag extends IObject {
+	type: 'Hashtag';
+	name: string;
+}
+
+export const isHashtag = (object: IObject): object is IApHashtag =>
+	getApType(object) === 'Hashtag' &&
+	typeof object.name === 'string';
+
+export interface IApEmoji extends IObject {
+	type: 'Emoji';
+	updated: Date;
+}
+
+export const isEmoji = (object: IObject): object is IApEmoji =>
+	getApType(object) === 'Emoji' && !Array.isArray(object.icon) && object.icon.url != null;
+
+export interface ICreate extends IActivity {
+	type: 'Create';
+}
+
+export interface IDelete extends IActivity {
+	type: 'Delete';
+}
+
+export interface IUpdate extends IActivity {
+	type: 'Update';
+}
+
+export interface IRead extends IActivity {
+	type: 'Read';
+}
+
+export interface IUndo extends IActivity {
+	type: 'Undo';
+}
+
+export interface IFollow extends IActivity {
+	type: 'Follow';
+}
+
+export interface IAccept extends IActivity {
+	type: 'Accept';
+}
+
+export interface IReject extends IActivity {
+	type: 'Reject';
+}
+
+export interface IAdd extends IActivity {
+	type: 'Add';
+}
+
+export interface IRemove extends IActivity {
+	type: 'Remove';
+}
+
+export interface ILike extends IActivity {
+	type: 'Like' | 'EmojiReaction' | 'EmojiReact';
+	_misskey_reaction?: string;
+}
+
+export interface IAnnounce extends IActivity {
+	type: 'Announce';
+}
+
+export interface IBlock extends IActivity {
+	type: 'Block';
+}
+
+export interface IFlag extends IActivity {
+	type: 'Flag';
+}
+
+export const isCreate = (object: IObject): object is ICreate => getApType(object) === 'Create';
+export const isDelete = (object: IObject): object is IDelete => getApType(object) === 'Delete';
+export const isUpdate = (object: IObject): object is IUpdate => getApType(object) === 'Update';
+export const isRead = (object: IObject): object is IRead => getApType(object) === 'Read';
+export const isUndo = (object: IObject): object is IUndo => getApType(object) === 'Undo';
+export const isFollow = (object: IObject): object is IFollow => getApType(object) === 'Follow';
+export const isAccept = (object: IObject): object is IAccept => getApType(object) === 'Accept';
+export const isReject = (object: IObject): object is IReject => getApType(object) === 'Reject';
+export const isAdd = (object: IObject): object is IAdd => getApType(object) === 'Add';
+export const isRemove = (object: IObject): object is IRemove => getApType(object) === 'Remove';
+export const isLike = (object: IObject): object is ILike => getApType(object) === 'Like' || getApType(object) === 'EmojiReaction' || getApType(object) === 'EmojiReact';
+export const isAnnounce = (object: IObject): object is IAnnounce => getApType(object) === 'Announce';
+export const isBlock = (object: IObject): object is IBlock => getApType(object) === 'Block';
+export const isFlag = (object: IObject): object is IFlag => getApType(object) === 'Flag';
diff --git a/packages/backend/src/daemons/DaemonModule.ts b/packages/backend/src/daemons/DaemonModule.ts
new file mode 100644
index 0000000000..683f9cbfe3
--- /dev/null
+++ b/packages/backend/src/daemons/DaemonModule.ts
@@ -0,0 +1,24 @@
+import { Module } from '@nestjs/common';
+import { CoreModule } from '@/core/CoreModule.js';
+import { GlobalModule } from '@/GlobalModule.js';
+import { JanitorService } from './JanitorService.js';
+import { QueueStatsService } from './QueueStatsService.js';
+import { ServerStatsService } from './ServerStatsService.js';
+
+@Module({
+	imports: [
+		GlobalModule,
+		CoreModule,
+	],
+	providers: [
+		JanitorService,
+		QueueStatsService,
+		ServerStatsService,
+	],
+	exports: [
+		JanitorService,
+		QueueStatsService,
+		ServerStatsService,
+	],
+})
+export class DaemonModule {}
diff --git a/packages/backend/src/daemons/JanitorService.ts b/packages/backend/src/daemons/JanitorService.ts
new file mode 100644
index 0000000000..dacbb8cca6
--- /dev/null
+++ b/packages/backend/src/daemons/JanitorService.ts
@@ -0,0 +1,37 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { LessThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { AttestationChallengesRepository } from '@/models/index.js';
+import type { OnApplicationShutdown } from '@nestjs/common';
+
+const interval = 30 * 60 * 1000;
+
+@Injectable()
+export class JanitorService implements OnApplicationShutdown {
+	#intervalId: NodeJS.Timer;
+
+	constructor(
+		@Inject(DI.attestationChallengesRepository)
+		private attestationChallengesRepository: AttestationChallengesRepository,
+	) {
+	}
+
+	/**
+	 * Clean up database occasionally
+	 */
+	public start(): void {
+		const tick = async () => {
+			await this.attestationChallengesRepository.delete({
+				createdAt: LessThan(new Date(new Date().getTime() - 5 * 60 * 1000)),
+			});
+		};
+
+		tick();
+
+		this.#intervalId = setInterval(tick, interval);
+	}
+
+	public onApplicationShutdown(signal?: string | undefined) {
+		clearInterval(this.#intervalId);
+	}
+}
diff --git a/packages/backend/src/daemons/QueueStatsService.ts b/packages/backend/src/daemons/QueueStatsService.ts
new file mode 100644
index 0000000000..f05d3ce33f
--- /dev/null
+++ b/packages/backend/src/daemons/QueueStatsService.ts
@@ -0,0 +1,77 @@
+import { Inject, Injectable } from '@nestjs/common';
+import Xev from 'xev';
+import { DI } from '@/di-symbols.js';
+import { QueueService } from '@/core/QueueService.js';
+import type { OnApplicationShutdown } from '@nestjs/common';
+
+const ev = new Xev();
+
+const interval = 10000;
+
+@Injectable()
+export class QueueStatsService implements OnApplicationShutdown {
+	#intervalId: NodeJS.Timer;
+
+	constructor(
+		private queueService: QueueService,
+	) {
+	}
+
+	/**
+	 * Report queue stats regularly
+	 */
+	public start(): void {
+		const log = [] as any[];
+
+		ev.on('requestQueueStatsLog', x => {
+			ev.emit(`queueStatsLog:${x.id}`, log.slice(0, x.length ?? 50));
+		});
+
+		let activeDeliverJobs = 0;
+		let activeInboxJobs = 0;
+
+		this.queueService.deliverQueue.on('global:active', () => {
+			activeDeliverJobs++;
+		});
+
+		this.queueService.inboxQueue.on('global:active', () => {
+			activeInboxJobs++;
+		});
+
+		const tick = async () => {
+			const deliverJobCounts = await this.queueService.deliverQueue.getJobCounts();
+			const inboxJobCounts = await this.queueService.inboxQueue.getJobCounts();
+
+			const stats = {
+				deliver: {
+					activeSincePrevTick: activeDeliverJobs,
+					active: deliverJobCounts.active,
+					waiting: deliverJobCounts.waiting,
+					delayed: deliverJobCounts.delayed,
+				},
+				inbox: {
+					activeSincePrevTick: activeInboxJobs,
+					active: inboxJobCounts.active,
+					waiting: inboxJobCounts.waiting,
+					delayed: inboxJobCounts.delayed,
+				},
+			};
+
+			ev.emit('queueStats', stats);
+
+			log.unshift(stats);
+			if (log.length > 200) log.pop();
+
+			activeDeliverJobs = 0;
+			activeInboxJobs = 0;
+		};
+
+		tick();
+
+		this.#intervalId = setInterval(tick, interval);
+	}
+
+	public onApplicationShutdown(signal?: string | undefined) {
+		clearInterval(this.#intervalId);
+	}
+}
diff --git a/packages/backend/src/daemons/ServerStatsService.ts b/packages/backend/src/daemons/ServerStatsService.ts
new file mode 100644
index 0000000000..3a6d408431
--- /dev/null
+++ b/packages/backend/src/daemons/ServerStatsService.ts
@@ -0,0 +1,95 @@
+import { Inject, Injectable } from '@nestjs/common';
+import si from 'systeminformation';
+import Xev from 'xev';
+import * as osUtils from 'os-utils';
+import { DI } from '@/di-symbols.js';
+import type { OnApplicationShutdown } from '@nestjs/common';
+
+const ev = new Xev();
+
+const interval = 2000;
+
+const roundCpu = (num: number) => Math.round(num * 1000) / 1000;
+const round = (num: number) => Math.round(num * 10) / 10;
+
+@Injectable()
+export class ServerStatsService implements OnApplicationShutdown {
+	#intervalId: NodeJS.Timer;
+
+	constructor(
+	) {
+	}
+
+	/**
+	 * Report server stats regularly
+	 */
+	public start(): void {
+		const log = [] as any[];
+
+		ev.on('requestServerStatsLog', x => {
+			ev.emit(`serverStatsLog:${x.id}`, log.slice(0, x.length ?? 50));
+		});
+
+		const tick = async () => {
+			const cpu = await cpuUsage();
+			const memStats = await mem();
+			const netStats = await net();
+			const fsStats = await fs();
+
+			const stats = {
+				cpu: roundCpu(cpu),
+				mem: {
+					used: round(memStats.used - memStats.buffers - memStats.cached),
+					active: round(memStats.active),
+				},
+				net: {
+					rx: round(Math.max(0, netStats.rx_sec)),
+					tx: round(Math.max(0, netStats.tx_sec)),
+				},
+				fs: {
+					r: round(Math.max(0, fsStats.rIO_sec ?? 0)),
+					w: round(Math.max(0, fsStats.wIO_sec ?? 0)),
+				},
+			};
+			ev.emit('serverStats', stats);
+			log.unshift(stats);
+			if (log.length > 200) log.pop();
+		};
+
+		tick();
+
+		this.#intervalId = setInterval(tick, interval);
+	}
+
+	public onApplicationShutdown(signal?: string | undefined) {
+		clearInterval(this.#intervalId);
+	}
+}
+
+// CPU STAT
+function cpuUsage(): Promise<number> {
+	return new Promise((res, rej) => {
+		osUtils.cpuUsage((cpuUsage) => {
+			res(cpuUsage);
+		});
+	});
+}
+
+// MEMORY STAT
+async function mem() {
+	const data = await si.mem();
+	return data;
+}
+
+// NETWORK STAT
+async function net() {
+	const iface = await si.networkInterfaceDefault();
+	const data = await si.networkStats(iface);
+	return data[0];
+}
+
+// FS STAT
+async function fs() {
+	const data = await si.disksIO().catch(() => ({ rIO_sec: 0, wIO_sec: 0 }));
+	return data ?? { rIO_sec: 0, wIO_sec: 0 };
+}
diff --git a/packages/backend/src/daemons/janitor.ts b/packages/backend/src/daemons/janitor.ts
deleted file mode 100644
index f2a1bfcc2f..0000000000
--- a/packages/backend/src/daemons/janitor.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// TODO: 消したい
-
-const interval = 30 * 60 * 1000;
-import { AttestationChallenges } from '@/models/index.js';
-import { LessThan } from 'typeorm';
-
-/**
- * Clean up database occasionally
- */
-export default function() {
-	async function tick() {
-		await AttestationChallenges.delete({
-			createdAt: LessThan(new Date(new Date().getTime() - 5 * 60 * 1000)),
-		});
-	}
-
-	tick();
-
-	setInterval(tick, interval);
-}
diff --git a/packages/backend/src/daemons/queue-stats.ts b/packages/backend/src/daemons/queue-stats.ts
deleted file mode 100644
index 1535abc6af..0000000000
--- a/packages/backend/src/daemons/queue-stats.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import Xev from 'xev';
-import { deliverQueue, inboxQueue } from '../queue/queues.js';
-
-const ev = new Xev();
-
-const interval = 10000;
-
-/**
- * Report queue stats regularly
- */
-export default function() {
-	const log = [] as any[];
-
-	ev.on('requestQueueStatsLog', x => {
-		ev.emit(`queueStatsLog:${x.id}`, log.slice(0, x.length || 50));
-	});
-
-	let activeDeliverJobs = 0;
-	let activeInboxJobs = 0;
-
-	deliverQueue.on('global:active', () => {
-		activeDeliverJobs++;
-	});
-
-	inboxQueue.on('global:active', () => {
-		activeInboxJobs++;
-	});
-
-	async function tick() {
-		const deliverJobCounts = await deliverQueue.getJobCounts();
-		const inboxJobCounts = await inboxQueue.getJobCounts();
-
-		const stats = {
-			deliver: {
-				activeSincePrevTick: activeDeliverJobs,
-				active: deliverJobCounts.active,
-				waiting: deliverJobCounts.waiting,
-				delayed: deliverJobCounts.delayed,
-			},
-			inbox: {
-				activeSincePrevTick: activeInboxJobs,
-				active: inboxJobCounts.active,
-				waiting: inboxJobCounts.waiting,
-				delayed: inboxJobCounts.delayed,
-			},
-		};
-
-		ev.emit('queueStats', stats);
-
-		log.unshift(stats);
-		if (log.length > 200) log.pop();
-
-		activeDeliverJobs = 0;
-		activeInboxJobs = 0;
-	}
-
-	tick();
-
-	setInterval(tick, interval);
-}
diff --git a/packages/backend/src/daemons/server-stats.ts b/packages/backend/src/daemons/server-stats.ts
deleted file mode 100644
index faf4e6e4a4..0000000000
--- a/packages/backend/src/daemons/server-stats.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import si from 'systeminformation';
-import Xev from 'xev';
-import * as osUtils from 'os-utils';
-
-const ev = new Xev();
-
-const interval = 2000;
-
-const roundCpu = (num: number) => Math.round(num * 1000) / 1000;
-const round = (num: number) => Math.round(num * 10) / 10;
-
-/**
- * Report server stats regularly
- */
-export default function() {
-	const log = [] as any[];
-
-	ev.on('requestServerStatsLog', x => {
-		ev.emit(`serverStatsLog:${x.id}`, log.slice(0, x.length || 50));
-	});
-
-	async function tick() {
-		const cpu = await cpuUsage();
-		const memStats = await mem();
-		const netStats = await net();
-		const fsStats = await fs();
-
-		const stats = {
-			cpu: roundCpu(cpu),
-			mem: {
-				used: round(memStats.used - memStats.buffers - memStats.cached),
-				active: round(memStats.active),
-			},
-			net: {
-				rx: round(Math.max(0, netStats.rx_sec)),
-				tx: round(Math.max(0, netStats.tx_sec)),
-			},
-			fs: {
-				r: round(Math.max(0, fsStats.rIO_sec ?? 0)),
-				w: round(Math.max(0, fsStats.wIO_sec ?? 0)),
-			},
-		};
-		ev.emit('serverStats', stats);
-		log.unshift(stats);
-		if (log.length > 200) log.pop();
-	}
-
-	tick();
-
-	setInterval(tick, interval);
-}
-
-// CPU STAT
-function cpuUsage(): Promise<number> {
-	return new Promise((res, rej) => {
-		osUtils.cpuUsage((cpuUsage) => {
-			res(cpuUsage);
-		});
-	});
-}
-
-// MEMORY STAT
-async function mem() {
-	const data = await si.mem();
-	return data;
-}
-
-// NETWORK STAT
-async function net() {
-	const iface = await si.networkInterfaceDefault();
-	const data = await si.networkStats(iface);
-	return data[0];
-}
-
-// FS STAT
-async function fs() {
-	const data = await si.disksIO().catch(() => ({ rIO_sec: 0, wIO_sec: 0 }));
-	return data || { rIO_sec: 0, wIO_sec: 0 };
-}
diff --git a/packages/backend/src/db/elasticsearch.ts b/packages/backend/src/db/elasticsearch.ts
deleted file mode 100644
index d98c5d180b..0000000000
--- a/packages/backend/src/db/elasticsearch.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as elasticsearch from '@elastic/elasticsearch';
-import config from '@/config/index.js';
-
-const index = {
-	settings: {
-		analysis: {
-			analyzer: {
-				ngram: {
-					tokenizer: 'ngram',
-				},
-			},
-		},
-	},
-	mappings: {
-		properties: {
-			text: {
-				type: 'text',
-				index: true,
-				analyzer: 'ngram',
-			},
-			userId: {
-				type: 'keyword',
-				index: true,
-			},
-			userHost: {
-				type: 'keyword',
-				index: true,
-			},
-		},
-	},
-};
-
-// Init ElasticSearch connection
-const client = config.elasticsearch ? new elasticsearch.Client({
-	node: `${config.elasticsearch.ssl ? 'https://' : 'http://'}${config.elasticsearch.host}:${config.elasticsearch.port}`,
-	auth: (config.elasticsearch.user && config.elasticsearch.pass) ? {
-		username: config.elasticsearch.user,
-		password: config.elasticsearch.pass,
-	} : undefined,
-	pingTimeout: 30000,
-}) : null;
-
-if (client) {
-	client.indices.exists({
-		index: config.elasticsearch.index || 'misskey_note',
-	}).then(exist => {
-		if (!exist.body) {
-			client.indices.create({
-				index: config.elasticsearch.index || 'misskey_note',
-				body: index,
-			});
-		}
-	});
-}
-
-export default client;
diff --git a/packages/backend/src/db/logger.ts b/packages/backend/src/db/logger.ts
deleted file mode 100644
index 22f4c6b1b0..0000000000
--- a/packages/backend/src/db/logger.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Logger from '@/services/logger.js';
-
-export const dbLogger = new Logger('db');
diff --git a/packages/backend/src/db/postgre.ts b/packages/backend/src/db/postgre.ts
deleted file mode 100644
index 94d55e4310..0000000000
--- a/packages/backend/src/db/postgre.ts
+++ /dev/null
@@ -1,256 +0,0 @@
-// https://github.com/typeorm/typeorm/issues/2400
-import pg from 'pg';
-pg.types.setTypeParser(20, Number);
-
-import { Logger, DataSource } from 'typeorm';
-import * as highlight from 'cli-highlight';
-import config from '@/config/index.js';
-
-import { User } from '@/models/entities/user.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { DriveFolder } from '@/models/entities/drive-folder.js';
-import { AccessToken } from '@/models/entities/access-token.js';
-import { App } from '@/models/entities/app.js';
-import { PollVote } from '@/models/entities/poll-vote.js';
-import { Note } from '@/models/entities/note.js';
-import { NoteReaction } from '@/models/entities/note-reaction.js';
-import { NoteWatching } from '@/models/entities/note-watching.js';
-import { NoteThreadMuting } from '@/models/entities/note-thread-muting.js';
-import { NoteUnread } from '@/models/entities/note-unread.js';
-import { Notification } from '@/models/entities/notification.js';
-import { Meta } from '@/models/entities/meta.js';
-import { Following } from '@/models/entities/following.js';
-import { Instance } from '@/models/entities/instance.js';
-import { Muting } from '@/models/entities/muting.js';
-import { SwSubscription } from '@/models/entities/sw-subscription.js';
-import { Blocking } from '@/models/entities/blocking.js';
-import { UserList } from '@/models/entities/user-list.js';
-import { UserListJoining } from '@/models/entities/user-list-joining.js';
-import { UserGroup } from '@/models/entities/user-group.js';
-import { UserGroupJoining } from '@/models/entities/user-group-joining.js';
-import { UserGroupInvitation } from '@/models/entities/user-group-invitation.js';
-import { Hashtag } from '@/models/entities/hashtag.js';
-import { NoteFavorite } from '@/models/entities/note-favorite.js';
-import { AbuseUserReport } from '@/models/entities/abuse-user-report.js';
-import { RegistrationTicket } from '@/models/entities/registration-tickets.js';
-import { MessagingMessage } from '@/models/entities/messaging-message.js';
-import { Signin } from '@/models/entities/signin.js';
-import { AuthSession } from '@/models/entities/auth-session.js';
-import { FollowRequest } from '@/models/entities/follow-request.js';
-import { Emoji } from '@/models/entities/emoji.js';
-import { UserNotePining } from '@/models/entities/user-note-pining.js';
-import { Poll } from '@/models/entities/poll.js';
-import { UserKeypair } from '@/models/entities/user-keypair.js';
-import { UserPublickey } from '@/models/entities/user-publickey.js';
-import { UserProfile } from '@/models/entities/user-profile.js';
-import { UserSecurityKey } from '@/models/entities/user-security-key.js';
-import { AttestationChallenge } from '@/models/entities/attestation-challenge.js';
-import { Page } from '@/models/entities/page.js';
-import { PageLike } from '@/models/entities/page-like.js';
-import { GalleryPost } from '@/models/entities/gallery-post.js';
-import { GalleryLike } from '@/models/entities/gallery-like.js';
-import { ModerationLog } from '@/models/entities/moderation-log.js';
-import { UsedUsername } from '@/models/entities/used-username.js';
-import { Announcement } from '@/models/entities/announcement.js';
-import { AnnouncementRead } from '@/models/entities/announcement-read.js';
-import { Clip } from '@/models/entities/clip.js';
-import { ClipNote } from '@/models/entities/clip-note.js';
-import { Antenna } from '@/models/entities/antenna.js';
-import { AntennaNote } from '@/models/entities/antenna-note.js';
-import { PromoNote } from '@/models/entities/promo-note.js';
-import { PromoRead } from '@/models/entities/promo-read.js';
-import { Relay } from '@/models/entities/relay.js';
-import { MutedNote } from '@/models/entities/muted-note.js';
-import { Channel } from '@/models/entities/channel.js';
-import { ChannelFollowing } from '@/models/entities/channel-following.js';
-import { ChannelNotePining } from '@/models/entities/channel-note-pining.js';
-import { RegistryItem } from '@/models/entities/registry-item.js';
-import { Ad } from '@/models/entities/ad.js';
-import { PasswordResetRequest } from '@/models/entities/password-reset-request.js';
-import { UserPending } from '@/models/entities/user-pending.js';
-import { Webhook } from '@/models/entities/webhook.js';
-import { UserIp } from '@/models/entities/user-ip.js';
-
-import { entities as charts } from '@/services/chart/entities.js';
-import { envOption } from '../env.js';
-import { dbLogger } from './logger.js';
-import { redisClient } from './redis.js';
-
-const sqlLogger = dbLogger.createSubLogger('sql', 'gray', false);
-
-class MyCustomLogger implements Logger {
-	private highlight(sql: string) {
-		return highlight.highlight(sql, {
-			language: 'sql', ignoreIllegals: true,
-		});
-	}
-
-	public logQuery(query: string, parameters?: any[]) {
-		sqlLogger.info(this.highlight(query).substring(0, 100));
-	}
-
-	public logQueryError(error: string, query: string, parameters?: any[]) {
-		sqlLogger.error(this.highlight(query));
-	}
-
-	public logQuerySlow(time: number, query: string, parameters?: any[]) {
-		sqlLogger.warn(this.highlight(query));
-	}
-
-	public logSchemaBuild(message: string) {
-		sqlLogger.info(message);
-	}
-
-	public log(message: string) {
-		sqlLogger.info(message);
-	}
-
-	public logMigration(message: string) {
-		sqlLogger.info(message);
-	}
-}
-
-export const entities = [
-	Announcement,
-	AnnouncementRead,
-	Meta,
-	Instance,
-	App,
-	AuthSession,
-	AccessToken,
-	User,
-	UserProfile,
-	UserKeypair,
-	UserPublickey,
-	UserList,
-	UserListJoining,
-	UserGroup,
-	UserGroupJoining,
-	UserGroupInvitation,
-	UserNotePining,
-	UserSecurityKey,
-	UsedUsername,
-	AttestationChallenge,
-	Following,
-	FollowRequest,
-	Muting,
-	Blocking,
-	Note,
-	NoteFavorite,
-	NoteReaction,
-	NoteWatching,
-	NoteThreadMuting,
-	NoteUnread,
-	Page,
-	PageLike,
-	GalleryPost,
-	GalleryLike,
-	DriveFile,
-	DriveFolder,
-	Poll,
-	PollVote,
-	Notification,
-	Emoji,
-	Hashtag,
-	SwSubscription,
-	AbuseUserReport,
-	RegistrationTicket,
-	MessagingMessage,
-	Signin,
-	ModerationLog,
-	Clip,
-	ClipNote,
-	Antenna,
-	AntennaNote,
-	PromoNote,
-	PromoRead,
-	Relay,
-	MutedNote,
-	Channel,
-	ChannelFollowing,
-	ChannelNotePining,
-	RegistryItem,
-	Ad,
-	PasswordResetRequest,
-	UserPending,
-	Webhook,
-	UserIp,
-	...charts,
-];
-
-const log = process.env.NODE_ENV !== 'production';
-
-export const db = new DataSource({
-	type: 'postgres',
-	host: config.db.host,
-	port: config.db.port,
-	username: config.db.user,
-	password: config.db.pass,
-	database: config.db.db,
-	extra: {
-		statement_timeout: 1000 * 10,
-		...config.db.extra,
-	},
-	synchronize: process.env.NODE_ENV === 'test',
-	dropSchema: process.env.NODE_ENV === 'test',
-	cache: !config.db.disableCache ? {
-		type: 'ioredis',
-		options: {
-			host: config.redis.host,
-			port: config.redis.port,
-			family: config.redis.family == null ? 0 : config.redis.family,
-			password: config.redis.pass,
-			keyPrefix: `${config.redis.prefix}:query:`,
-			db: config.redis.db || 0,
-		},
-	} : false,
-	logging: log,
-	logger: log ? new MyCustomLogger() : undefined,
-	maxQueryExecutionTime: 300,
-	entities: entities,
-	migrations: ['../../migration/*.js'],
-});
-
-export async function initDb(force = false) {
-	if (force) {
-		if (db.isInitialized) {
-			await db.destroy();
-		}
-		await db.initialize();
-		return;
-	}
-
-	if (db.isInitialized) {
-		// nop
-	} else {
-		await db.initialize();
-	}
-}
-
-export async function resetDb() {
-	const reset = async () => {
-		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')
-			AND C.relkind = 'r'
-			AND nspname !~ '^pg_toast';`);
-		for (const table of tables) {
-			await db.query(`DELETE FROM "${table.table}" CASCADE`);
-		}
-	};
-
-	for (let i = 1; i <= 3; i++) {
-		try {
-			await reset();
-		} catch (e) {
-			if (i === 3) {
-				throw e;
-			} else {
-				await new Promise(resolve => setTimeout(resolve, 1000));
-				continue;
-			}
-		}
-		break;
-	}
-}
diff --git a/packages/backend/src/db/redis.ts b/packages/backend/src/db/redis.ts
deleted file mode 100644
index 49f5bb2ba8..0000000000
--- a/packages/backend/src/db/redis.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import Redis from 'ioredis';
-import config from '@/config/index.js';
-
-export function createConnection() {
-	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();
-subsdcriber.subscribe(config.host);
-
-export const redisClient = createConnection();
diff --git a/packages/backend/src/di-symbols.ts b/packages/backend/src/di-symbols.ts
new file mode 100644
index 0000000000..cc775a9c8a
--- /dev/null
+++ b/packages/backend/src/di-symbols.ts
@@ -0,0 +1,72 @@
+export const DI = {
+	config: Symbol('config'),
+	db: Symbol('db'),
+	redis: Symbol('redis'),
+	redisSubscriber: Symbol('redisSubscriber'),
+
+	//#region Repositories
+	usersRepository: Symbol('usersRepository'),
+	notesRepository: Symbol('notesRepository'),
+	announcementsRepository: Symbol('announcementsRepository'),
+	announcementReadsRepository: Symbol('announcementReadsRepository'),
+	appsRepository: Symbol('appsRepository'),
+	noteFavoritesRepository: Symbol('noteFavoritesRepository'),
+	noteThreadMutingsRepository: Symbol('noteThreadMutingsRepository'),
+	noteReactionsRepository: Symbol('noteReactionsRepository'),
+	noteUnreadsRepository: Symbol('noteUnreadsRepository'),
+	pollsRepository: Symbol('pollsRepository'),
+	pollVotesRepository: Symbol('pollVotesRepository'),
+	userProfilesRepository: Symbol('userProfilesRepository'),
+	userKeypairsRepository: Symbol('userKeypairsRepository'),
+	userPendingsRepository: Symbol('userPendingsRepository'),
+	attestationChallengesRepository: Symbol('attestationChallengesRepository'),
+	userSecurityKeysRepository: Symbol('userSecurityKeysRepository'),
+	userPublickeysRepository: Symbol('userPublickeysRepository'),
+	userListsRepository: Symbol('userListsRepository'),
+	userListJoiningsRepository: Symbol('userListJoiningsRepository'),
+	userGroupsRepository: Symbol('userGroupsRepository'),
+	userGroupJoiningsRepository: Symbol('userGroupJoiningsRepository'),
+	userGroupInvitationsRepository: Symbol('userGroupInvitationsRepository'),
+	userNotePiningsRepository: Symbol('userNotePiningsRepository'),
+	userIpsRepository: Symbol('userIpsRepository'),
+	usedUsernamesRepository: Symbol('usedUsernamesRepository'),
+	followingsRepository: Symbol('followingsRepository'),
+	followRequestsRepository: Symbol('followRequestsRepository'),
+	instancesRepository: Symbol('instancesRepository'),
+	emojisRepository: Symbol('emojisRepository'),
+	driveFilesRepository: Symbol('driveFilesRepository'),
+	driveFoldersRepository: Symbol('driveFoldersRepository'),
+	notificationsRepository: Symbol('notificationsRepository'),
+	metasRepository: Symbol('metasRepository'),
+	mutingsRepository: Symbol('mutingsRepository'),
+	blockingsRepository: Symbol('blockingsRepository'),
+	swSubscriptionsRepository: Symbol('swSubscriptionsRepository'),
+	hashtagsRepository: Symbol('hashtagsRepository'),
+	abuseUserReportsRepository: Symbol('abuseUserReportsRepository'),
+	registrationTicketsRepository: Symbol('registrationTicketsRepository'),
+	authSessionsRepository: Symbol('authSessionsRepository'),
+	accessTokensRepository: Symbol('accessTokensRepository'),
+	signinsRepository: Symbol('signinsRepository'),
+	messagingMessagesRepository: Symbol('messagingMessagesRepository'),
+	pagesRepository: Symbol('pagesRepository'),
+	pageLikesRepository: Symbol('pageLikesRepository'),
+	galleryPostsRepository: Symbol('galleryPostsRepository'),
+	galleryLikesRepository: Symbol('galleryLikesRepository'),
+	moderationLogsRepository: Symbol('moderationLogsRepository'),
+	clipsRepository: Symbol('clipsRepository'),
+	clipNotesRepository: Symbol('clipNotesRepository'),
+	antennasRepository: Symbol('antennasRepository'),
+	antennaNotesRepository: Symbol('antennaNotesRepository'),
+	promoNotesRepository: Symbol('promoNotesRepository'),
+	promoReadsRepository: Symbol('promoReadsRepository'),
+	relaysRepository: Symbol('relaysRepository'),
+	mutedNotesRepository: Symbol('mutedNotesRepository'),
+	channelsRepository: Symbol('channelsRepository'),
+	channelFollowingsRepository: Symbol('channelFollowingsRepository'),
+	channelNotePiningsRepository: Symbol('channelNotePiningsRepository'),
+	registryItemsRepository: Symbol('registryItemsRepository'),
+	webhooksRepository: Symbol('webhooksRepository'),
+	adsRepository: Symbol('adsRepository'),
+	passwordResetRequestsRepository: Symbol('passwordResetRequestsRepository'),
+	//#endregion
+};
diff --git a/packages/backend/src/logger.ts b/packages/backend/src/logger.ts
new file mode 100644
index 0000000000..6722220681
--- /dev/null
+++ b/packages/backend/src/logger.ts
@@ -0,0 +1,112 @@
+import cluster from 'node:cluster';
+import chalk from 'chalk';
+import { default as convertColor } from 'color-convert';
+import { format as dateFormat } from 'date-fns';
+import { envOption } from './env.js';
+
+type Domain = {
+	name: string;
+	color?: string;
+};
+
+type Level = 'error' | 'success' | 'warning' | 'debug' | 'info';
+
+export default class Logger {
+	private domain: Domain;
+	private parentLogger: Logger | null = null;
+	private store: boolean;
+	private syslogClient: any | null = null;
+
+	constructor(domain: string, color?: string, store = true, syslogClient = null) {
+		this.domain = {
+			name: domain,
+			color: color,
+		};
+		this.store = store;
+		this.syslogClient = syslogClient;
+	}
+
+	public createSubLogger(domain: string, color?: string, store = true): Logger {
+		const logger = new Logger(domain, color, store);
+		logger.parentLogger = this;
+		return logger;
+	}
+
+	private log(level: Level, message: string, data?: Record<string, any> | null, important = false, subDomains: Domain[] = [], store = true): void {
+		if (envOption.quiet) return;
+		if (!this.store) store = false;
+		if (level === 'debug') store = false;
+
+		if (this.parentLogger) {
+			this.parentLogger.log(level, message, data, important, [this.domain].concat(subDomains), store);
+			return;
+		}
+
+		const time = dateFormat(new Date(), 'HH:mm:ss');
+		const worker = cluster.isPrimary ? '*' : cluster.worker.id;
+		const l =
+			level === 'error' ? important ? chalk.bgRed.white('ERR ') : chalk.red('ERR ') :
+			level === 'warning' ? chalk.yellow('WARN') :
+			level === 'success' ? important ? chalk.bgGreen.white('DONE') : chalk.green('DONE') :
+			level === 'debug' ? chalk.gray('VERB') :
+			level === 'info' ? chalk.blue('INFO') :
+			null;
+		const domains = [this.domain].concat(subDomains).map(d => d.color ? chalk.rgb(...convertColor.keyword.rgb(d.color))(d.name) : chalk.white(d.name));
+		const m =
+			level === 'error' ? chalk.red(message) :
+			level === 'warning' ? chalk.yellow(message) :
+			level === 'success' ? chalk.green(message) :
+			level === 'debug' ? chalk.gray(message) :
+			level === 'info' ? message :
+			null;
+
+		let log = `${l} ${worker}\t[${domains.join(' ')}]\t${m}`;
+		if (envOption.withLogTime) log = chalk.gray(time) + ' ' + log;
+
+		console.log(important ? chalk.bold(log) : log);
+
+		if (store) {
+			if (this.syslogClient) {
+				const send =
+					level === 'error' ? this.syslogClient.error :
+					level === 'warning' ? this.syslogClient.warning :
+					level === 'success' ? this.syslogClient.info :
+					level === 'debug' ? this.syslogClient.info :
+					level === 'info' ? this.syslogClient.info :
+					null as never;
+
+				send.bind(this.syslogClient)(message).catch(() => {});
+			}
+		}
+	}
+
+	public error(x: string | Error, data?: Record<string, any> | null, important = false): void { // 実行を継続できない状況で使う
+		if (x instanceof Error) {
+			data = data ?? {};
+			data.e = x;
+			this.log('error', x.toString(), data, important);
+		} else if (typeof x === 'object') {
+			this.log('error', `${(x as any).message ?? (x as any).name ?? x}`, data, important);
+		} else {
+			this.log('error', `${x}`, data, important);
+		}
+	}
+
+	public warn(message: string, data?: Record<string, any> | null, important = false): void { // 実行を継続できるが改善すべき状況で使う
+		this.log('warning', message, data, important);
+	}
+
+	public succ(message: string, data?: Record<string, any> | null, important = false): void { // 何かに成功した状況で使う
+		this.log('success', message, data, important);
+	}
+
+	public debug(message: string, data?: Record<string, any> | null, important = false): void { // デバッグ用に使う(開発者に必要だが利用者に不要な情報)
+		if (process.env.NODE_ENV !== 'production' || envOption.verbose) {
+			this.log('debug', message, data, important);
+		}
+	}
+
+	public info(message: string, data?: Record<string, any> | null, important = false): void { // それ以外
+		this.log('info', message, data, important);
+	}
+}
diff --git a/packages/backend/src/mfm/from-html.ts b/packages/backend/src/mfm/from-html.ts
deleted file mode 100644
index 7751bac563..0000000000
--- a/packages/backend/src/mfm/from-html.ts
+++ /dev/null
@@ -1,213 +0,0 @@
-import { URL } from 'node:url';
-import * as parse5 from 'parse5';
-import * as TreeAdapter from '../../node_modules/parse5/dist/tree-adapters/default.js';
-
-const treeAdapter = TreeAdapter.defaultTreeAdapter;
-
-const urlRegex = /^https?:\/\/[\w\/:%#@$&?!()\[\]~.,=+\-]+/;
-const urlRegexFull = /^https?:\/\/[\w\/:%#@$&?!()\[\]~.,=+\-]+$/;
-
-export function fromHtml(html: string, hashtagNames?: string[]): string {
-	// some AP servers like Pixelfed use br tags as well as newlines
-	html = html.replace(/<br\s?\/?>\r?\n/gi, '\n');
-
-	const dom = parse5.parseFragment(html);
-
-	let text = '';
-
-	for (const n of dom.childNodes) {
-		analyze(n);
-	}
-
-	return text.trim();
-
-	function getText(node: TreeAdapter.Node): string {
-		if (treeAdapter.isTextNode(node)) return node.value;
-		if (!treeAdapter.isElementNode(node)) return '';
-		if (node.nodeName === 'br') return '\n';
-
-		if (node.childNodes) {
-			return node.childNodes.map(n => getText(n)).join('');
-		}
-
-		return '';
-	}
-
-	function appendChildren(childNodes: TreeAdapter.ChildNode[]): void {
-		if (childNodes) {
-			for (const n of childNodes) {
-				analyze(n);
-			}
-		}
-	}
-
-	function analyze(node: TreeAdapter.Node) {
-		if (treeAdapter.isTextNode(node)) {
-			text += node.value;
-			return;
-		}
-
-		// Skip comment or document type node
-		if (!treeAdapter.isElementNode(node)) return;
-
-		switch (node.nodeName) {
-			case 'br': {
-				text += '\n';
-				break;
-			}
-
-			case 'a':
-			{
-				const txt = getText(node);
-				const rel = node.attrs.find(x => x.name === 'rel');
-				const href = node.attrs.find(x => x.name === 'href');
-
-				// ハッシュタグ
-				if (hashtagNames && href && hashtagNames.map(x => x.toLowerCase()).includes(txt.toLowerCase())) {
-					text += txt;
-				// メンション
-				} else if (txt.startsWith('@') && !(rel && rel.value.match(/^me /))) {
-					const part = txt.split('@');
-
-					if (part.length === 2 && href) {
-						//#region ホスト名部分が省略されているので復元する
-						const acct = `${txt}@${(new URL(href.value)).hostname}`;
-						text += acct;
-						//#endregion
-					} else if (part.length === 3) {
-						text += txt;
-					}
-				// その他
-				} else {
-					const generateLink = () => {
-						if (!href && !txt) {
-							return '';
-						}
-						if (!href) {
-							return txt;
-						}
-						if (!txt || txt === href.value) {	// #6383: Missing text node
-							if (href.value.match(urlRegexFull)) {
-								return href.value;
-							} else {
-								return `<${href.value}>`;
-							}
-						}
-						if (href.value.match(urlRegex) && !href.value.match(urlRegexFull)) {
-							return `[${txt}](<${href.value}>)`;	// #6846
-						} else {
-							return `[${txt}](${href.value})`;
-						}
-					};
-
-					text += generateLink();
-				}
-				break;
-			}
-
-			case 'h1':
-			{
-				text += '【';
-				appendChildren(node.childNodes);
-				text += '】\n';
-				break;
-			}
-
-			case 'b':
-			case 'strong':
-			{
-				text += '**';
-				appendChildren(node.childNodes);
-				text += '**';
-				break;
-			}
-
-			case 'small':
-			{
-				text += '<small>';
-				appendChildren(node.childNodes);
-				text += '</small>';
-				break;
-			}
-
-			case 's':
-			case 'del':
-			{
-				text += '~~';
-				appendChildren(node.childNodes);
-				text += '~~';
-				break;
-			}
-
-			case 'i':
-			case 'em':
-			{
-				text += '<i>';
-				appendChildren(node.childNodes);
-				text += '</i>';
-				break;
-			}
-
-			// block code (<pre><code>)
-			case 'pre': {
-				if (node.childNodes.length === 1 && node.childNodes[0].nodeName === 'code') {
-					text += '\n```\n';
-					text += getText(node.childNodes[0]);
-					text += '\n```\n';
-				} else {
-					appendChildren(node.childNodes);
-				}
-				break;
-			}
-
-			// inline code (<code>)
-			case 'code': {
-				text += '`';
-				appendChildren(node.childNodes);
-				text += '`';
-				break;
-			}
-
-			case 'blockquote': {
-				const t = getText(node);
-				if (t) {
-					text += '\n> ';
-					text += t.split('\n').join('\n> ');
-				}
-				break;
-			}
-
-			case 'p':
-			case 'h2':
-			case 'h3':
-			case 'h4':
-			case 'h5':
-			case 'h6':
-			{
-				text += '\n\n';
-				appendChildren(node.childNodes);
-				break;
-			}
-
-			// other block elements
-			case 'div':
-			case 'header':
-			case 'footer':
-			case 'article':
-			case 'li':
-			case 'dt':
-			case 'dd':
-			{
-				text += '\n';
-				appendChildren(node.childNodes);
-				break;
-			}
-
-			default:	// includes inline elements
-			{
-				appendChildren(node.childNodes);
-				break;
-			}
-		}
-	}
-}
diff --git a/packages/backend/src/mfm/to-html.ts b/packages/backend/src/mfm/to-html.ts
deleted file mode 100644
index bcb5c86a3d..0000000000
--- a/packages/backend/src/mfm/to-html.ts
+++ /dev/null
@@ -1,159 +0,0 @@
-import { JSDOM } from 'jsdom';
-import * as mfm from 'mfm-js';
-import config from '@/config/index.js';
-import { intersperse } from '@/prelude/array.js';
-import { IMentionedRemoteUsers } from '@/models/entities/note.js';
-
-export function toHtml(nodes: mfm.MfmNode[] | null, mentionedRemoteUsers: IMentionedRemoteUsers = []) {
-	if (nodes == null) {
-		return null;
-	}
-
-	const { window } = new JSDOM('');
-
-	const doc = window.document;
-
-	function appendChildren(children: mfm.MfmNode[], targetElement: any): void {
-		if (children) {
-			for (const child of children.map(x => (handlers as any)[x.type](x))) targetElement.appendChild(child);
-		}
-	}
-
-	const handlers: { [K in mfm.MfmNode['type']]: (node: mfm.NodeType<K>) => any } = {
-		bold(node) {
-			const el = doc.createElement('b');
-			appendChildren(node.children, el);
-			return el;
-		},
-
-		small(node) {
-			const el = doc.createElement('small');
-			appendChildren(node.children, el);
-			return el;
-		},
-
-		strike(node) {
-			const el = doc.createElement('del');
-			appendChildren(node.children, el);
-			return el;
-		},
-
-		italic(node) {
-			const el = doc.createElement('i');
-			appendChildren(node.children, el);
-			return el;
-		},
-
-		fn(node) {
-			const el = doc.createElement('i');
-			appendChildren(node.children, el);
-			return el;
-		},
-
-		blockCode(node) {
-			const pre = doc.createElement('pre');
-			const inner = doc.createElement('code');
-			inner.textContent = node.props.code;
-			pre.appendChild(inner);
-			return pre;
-		},
-
-		center(node) {
-			const el = doc.createElement('div');
-			appendChildren(node.children, el);
-			return el;
-		},
-
-		emojiCode(node) {
-			return doc.createTextNode(`\u200B:${node.props.name}:\u200B`);
-		},
-
-		unicodeEmoji(node) {
-			return doc.createTextNode(node.props.emoji);
-		},
-
-		hashtag(node) {
-			const a = doc.createElement('a');
-			a.href = `${config.url}/tags/${node.props.hashtag}`;
-			a.textContent = `#${node.props.hashtag}`;
-			a.setAttribute('rel', 'tag');
-			return a;
-		},
-
-		inlineCode(node) {
-			const el = doc.createElement('code');
-			el.textContent = node.props.code;
-			return el;
-		},
-
-		mathInline(node) {
-			const el = doc.createElement('code');
-			el.textContent = node.props.formula;
-			return el;
-		},
-
-		mathBlock(node) {
-			const el = doc.createElement('code');
-			el.textContent = node.props.formula;
-			return el;
-		},
-
-		link(node) {
-			const a = doc.createElement('a');
-			a.href = node.props.url;
-			appendChildren(node.children, a);
-			return a;
-		},
-
-		mention(node) {
-			const a = doc.createElement('a');
-			const { username, host, acct } = node.props;
-			const remoteUserInfo = mentionedRemoteUsers.find(remoteUser => remoteUser.username === username && remoteUser.host === host);
-			a.href = remoteUserInfo ? (remoteUserInfo.url ? remoteUserInfo.url : remoteUserInfo.uri) : `${config.url}/${acct}`;
-			a.className = 'u-url mention';
-			a.textContent = acct;
-			return a;
-		},
-
-		quote(node) {
-			const el = doc.createElement('blockquote');
-			appendChildren(node.children, el);
-			return el;
-		},
-
-		text(node) {
-			const el = doc.createElement('span');
-			const nodes = node.props.text.split(/\r\n|\r|\n/).map(x => doc.createTextNode(x));
-
-			for (const x of intersperse<FIXME | 'br'>('br', nodes)) {
-				el.appendChild(x === 'br' ? doc.createElement('br') : x);
-			}
-
-			return el;
-		},
-
-		url(node) {
-			const a = doc.createElement('a');
-			a.href = node.props.url;
-			a.textContent = node.props.url;
-			return a;
-		},
-
-		search(node) {
-			const a = doc.createElement('a');
-			a.href = `https://www.google.com/search?q=${node.props.query}`;
-			a.textContent = node.props.content;
-			return a;
-		},
-
-		plain(node) {
-			const el = doc.createElement('span');
-			appendChildren(node.children, el);
-			return el;
-		},
-	};
-
-	appendChildren(nodes, doc.body);
-
-	return `<p>${doc.body.innerHTML}</p>`;
-}
diff --git a/packages/backend/src/misc/acct.ts b/packages/backend/src/misc/acct.ts
index c32cee86c9..d1a6852a95 100644
--- a/packages/backend/src/misc/acct.ts
+++ b/packages/backend/src/misc/acct.ts
@@ -6,7 +6,7 @@ export type Acct = {
 export function parse(acct: string): Acct {
 	if (acct.startsWith('@')) acct = acct.substr(1);
 	const split = acct.split('@', 2);
-	return { username: split[0], host: split[1] || null };
+	return { username: split[0], host: split[1] ?? null };
 }
 
 export function toString(acct: Acct): string {
diff --git a/packages/backend/src/misc/antenna-cache.ts b/packages/backend/src/misc/antenna-cache.ts
deleted file mode 100644
index dcf96c1610..0000000000
--- a/packages/backend/src/misc/antenna-cache.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Antennas } from '@/models/index.js';
-import { Antenna } from '@/models/entities/antenna.js';
-import { subsdcriber } from '../db/redis.js';
-
-let antennasFetched = false;
-let antennas: Antenna[] = [];
-
-export async function getAntennas() {
-	if (!antennasFetched) {
-		antennas = await Antennas.find();
-		antennasFetched = true;
-	}
-
-	return antennas;
-}
-
-subsdcriber.on('message', async (_, data) => {
-	const obj = JSON.parse(data);
-
-	if (obj.channel === 'internal') {
-		const { type, body } = obj.message;
-		switch (type) {
-			case 'antennaCreated':
-				antennas.push(body);
-				break;
-			case 'antennaUpdated':
-				antennas[antennas.findIndex(a => a.id === body.id)] = body;
-				break;
-			case 'antennaDeleted':
-				antennas = antennas.filter(a => a.id !== body.id);
-				break;
-			default:
-				break;
-		}
-	}
-});
diff --git a/packages/backend/src/misc/app-lock.ts b/packages/backend/src/misc/app-lock.ts
deleted file mode 100644
index b5089cc6a6..0000000000
--- a/packages/backend/src/misc/app-lock.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { redisClient } from '../db/redis.js';
-import { promisify } from 'node:util';
-import redisLock from 'redis-lock';
-
-/**
- * Retry delay (ms) for lock acquisition
- */
-const retryDelay = 100;
-
-const lock: (key: string, timeout?: number) => Promise<() => void>
-	= redisClient
-	? promisify(redisLock(redisClient, retryDelay))
-	: async () => () => { };
-
-/**
- * Get AP Object lock
- * @param uri AP object ID
- * @param timeout Lock timeout (ms), The timeout releases previous lock.
- * @returns Unlock function
- */
-export function getApLock(uri: string, timeout = 30 * 1000) {
-	return lock(`ap-object:${uri}`, timeout);
-}
-
-export function getFetchInstanceMetadataLock(host: string, timeout = 30 * 1000) {
-	return lock(`instance:${host}`, timeout);
-}
-
-export function getChartInsertLock(lockKey: string, timeout = 30 * 1000) {
-	return lock(`chart-insert:${lockKey}`, timeout);
-}
diff --git a/packages/backend/src/misc/before-shutdown.ts b/packages/backend/src/misc/before-shutdown.ts
index 93ac7a1f39..74489293d7 100644
--- a/packages/backend/src/misc/before-shutdown.ts
+++ b/packages/backend/src/misc/before-shutdown.ts
@@ -65,7 +65,7 @@ async function shutdownHandler(signalOrEvent: string) {
 			await listener(signalOrEvent);
 		} catch (err) {
 			if (err instanceof Error) {
-				console.warn(`A shutdown handler failed before completing with: ${err.message || err}`);
+				console.warn(`A shutdown handler failed before completing with: ${err.message ?? err}`);
 			}
 		}
 	}
diff --git a/packages/backend/src/misc/captcha.ts b/packages/backend/src/misc/captcha.ts
deleted file mode 100644
index 9a87a4a3c8..0000000000
--- a/packages/backend/src/misc/captcha.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import fetch from 'node-fetch';
-import { URLSearchParams } from 'node:url';
-import { getAgentByUrl } from './fetch.js';
-import config from '@/config/index.js';
-
-export async function verifyRecaptcha(secret: string, response: string) {
-	const result = await getCaptchaResponse('https://www.recaptcha.net/recaptcha/api/siteverify', secret, response).catch(e => {
-		throw `recaptcha-request-failed: ${e}`;
-	});
-
-	if (result.success !== true) {
-		const errorCodes = result['error-codes'] ? result['error-codes']?.join(', ') : '';
-		throw `recaptcha-failed: ${errorCodes}`;
-	}
-}
-
-export async function verifyHcaptcha(secret: string, response: string) {
-	const result = await getCaptchaResponse('https://hcaptcha.com/siteverify', secret, response).catch(e => {
-		throw `hcaptcha-request-failed: ${e}`;
-	});
-
-	if (result.success !== true) {
-		const errorCodes = result['error-codes'] ? result['error-codes']?.join(', ') : '';
-		throw `hcaptcha-failed: ${errorCodes}`;
-	}
-}
-
-type CaptchaResponse = {
-	success: boolean;
-	'error-codes'?: string[];
-};
-
-async function getCaptchaResponse(url: string, secret: string, response: string): Promise<CaptchaResponse> {
-	const params = new URLSearchParams({
-		secret,
-		response,
-	});
-
-	const res = await fetch(url, {
-		method: 'POST',
-		body: params,
-		headers: {
-			'User-Agent': config.userAgent,
-		},
-		// TODO
-		//timeout: 10 * 1000,
-		agent: getAgentByUrl,
-	}).catch(e => {
-		throw `${e.message || e}`;
-	});
-
-	if (!res.ok) {
-		throw `${res.status}`;
-	}
-
-	return await res.json() as CaptchaResponse;
-}
diff --git a/packages/backend/src/misc/check-hit-antenna.ts b/packages/backend/src/misc/check-hit-antenna.ts
deleted file mode 100644
index d9cedee7df..0000000000
--- a/packages/backend/src/misc/check-hit-antenna.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { Antenna } from '@/models/entities/antenna.js';
-import { Note } from '@/models/entities/note.js';
-import { User } from '@/models/entities/user.js';
-import { UserListJoinings, UserGroupJoinings, Blockings } from '@/models/index.js';
-import { getFullApAccount } from './convert-host.js';
-import * as Acct from '@/misc/acct.js';
-import { Packed } from './schema.js';
-import { Cache } from './cache.js';
-
-const blockingCache = new Cache<User['id'][]>(1000 * 60 * 5);
-
-// NOTE: フォローしているユーザーのノート、リストのユーザーのノート、グループのユーザーのノート指定はパフォーマンス上の理由で無効になっている
-
-/**
- * noteUserFollowers / antennaUserFollowing はどちらか一方が指定されていればよい
- */
-export async function checkHitAntenna(antenna: Antenna, note: (Note | Packed<'Note'>), noteUser: { id: User['id']; username: string; host: string | null; }, noteUserFollowers?: User['id'][], antennaUserFollowing?: User['id'][]): Promise<boolean> {
-	if (note.visibility === 'specified') return false;
-
-	// アンテナ作成者がノート作成者にブロックされていたらスキップ
-	const blockings = await blockingCache.fetch(noteUser.id, () => Blockings.findBy({ blockerId: noteUser.id }).then(res => res.map(x => x.blockeeId)));
-	if (blockings.some(blocking => blocking === antenna.userId)) return false;
-
-	if (note.visibility === 'followers') {
-		if (noteUserFollowers && !noteUserFollowers.includes(antenna.userId)) return false;
-		if (antennaUserFollowing && !antennaUserFollowing.includes(note.userId)) return false;
-	}
-
-	if (!antenna.withReplies && note.replyId != null) return false;
-
-	if (antenna.src === 'home') {
-		if (noteUserFollowers && !noteUserFollowers.includes(antenna.userId)) return false;
-		if (antennaUserFollowing && !antennaUserFollowing.includes(note.userId)) return false;
-	} else if (antenna.src === 'list') {
-		const listUsers = (await UserListJoinings.findBy({
-			userListId: antenna.userListId!,
-		})).map(x => x.userId);
-
-		if (!listUsers.includes(note.userId)) return false;
-	} else if (antenna.src === 'group') {
-		const joining = await UserGroupJoinings.findOneByOrFail({ id: antenna.userGroupJoiningId! });
-
-		const groupUsers = (await UserGroupJoinings.findBy({
-			userGroupId: joining.userGroupId,
-		})).map(x => x.userId);
-
-		if (!groupUsers.includes(note.userId)) return false;
-	} else if (antenna.src === 'users') {
-		const accts = antenna.users.map(x => {
-			const { username, host } = Acct.parse(x);
-			return getFullApAccount(username, host).toLowerCase();
-		});
-		if (!accts.includes(getFullApAccount(noteUser.username, noteUser.host).toLowerCase())) return false;
-	}
-
-	const keywords = antenna.keywords
-		// Clean up
-		.map(xs => xs.filter(x => x !== ''))
-		.filter(xs => xs.length > 0);
-
-	if (keywords.length > 0) {
-		if (note.text == null) return false;
-
-		const matched = keywords.some(and =>
-			and.every(keyword =>
-				antenna.caseSensitive
-					? note.text!.includes(keyword)
-					: note.text!.toLowerCase().includes(keyword.toLowerCase())
-			));
-
-		if (!matched) return false;
-	}
-
-	const excludeKeywords = antenna.excludeKeywords
-		// Clean up
-		.map(xs => xs.filter(x => x !== ''))
-		.filter(xs => xs.length > 0);
-
-	if (excludeKeywords.length > 0) {
-		if (note.text == null) return false;
-
-		const matched = excludeKeywords.some(and =>
-			and.every(keyword =>
-				antenna.caseSensitive
-					? note.text!.includes(keyword)
-					: note.text!.toLowerCase().includes(keyword.toLowerCase())
-			));
-
-		if (matched) return false;
-	}
-
-	if (antenna.withFile) {
-		if (note.fileIds && note.fileIds.length === 0) return false;
-	}
-
-	// TODO: eval expression
-
-	return true;
-}
diff --git a/packages/backend/src/misc/check-word-mute.ts b/packages/backend/src/misc/check-word-mute.ts
index d7662820af..d10aca9e88 100644
--- a/packages/backend/src/misc/check-word-mute.ts
+++ b/packages/backend/src/misc/check-word-mute.ts
@@ -1,6 +1,6 @@
 import RE2 from 're2';
-import { Note } from '@/models/entities/note.js';
-import { User } from '@/models/entities/user.js';
+import type { Note } from '@/models/entities/Note.js';
+import type { User } from '@/models/entities/User.js';
 
 type NoteLike = {
 	userId: Note['userId'];
diff --git a/packages/backend/src/misc/convert-host.ts b/packages/backend/src/misc/convert-host.ts
deleted file mode 100644
index 7eb940a7e0..0000000000
--- a/packages/backend/src/misc/convert-host.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { URL } from 'node:url';
-import config from '@/config/index.js';
-import { toASCII } from 'punycode';
-
-export function getFullApAccount(username: string, host: string | null) {
-	return host ? `${username}@${toPuny(host)}` : `${username}@${toPuny(config.host)}`;
-}
-
-export function isSelfHost(host: string) {
-	if (host == null) return true;
-	return toPuny(config.host) === toPuny(host);
-}
-
-export function extractDbHost(uri: string) {
-	const url = new URL(uri);
-	return toPuny(url.hostname);
-}
-
-export function toPuny(host: string) {
-	return toASCII(host.toLowerCase());
-}
-
-export function toPunyNullable(host: string | null | undefined): string | null {
-	if (host == null) return null;
-	return toASCII(host.toLowerCase());
-}
diff --git a/packages/backend/src/misc/count-same-renotes.ts b/packages/backend/src/misc/count-same-renotes.ts
deleted file mode 100644
index b7f8ce90c8..0000000000
--- a/packages/backend/src/misc/count-same-renotes.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Notes } from '@/models/index.js';
-
-export async function countSameRenotes(userId: string, renoteId: string, excludeNoteId: string | undefined): Promise<number> {
-	// 指定したユーザーの指定したノートのリノートがいくつあるか数える
-	const query = Notes.createQueryBuilder('note')
-		.where('note.userId = :userId', { userId })
-		.andWhere('note.renoteId = :renoteId', { renoteId });
-
-	// 指定した投稿を除く
-	if (excludeNoteId) {
-		query.andWhere('note.id != :excludeNoteId', { excludeNoteId });
-	}
-
-	return await query.getCount();
-}
diff --git a/packages/backend/src/misc/detect-url-mime.ts b/packages/backend/src/misc/detect-url-mime.ts
deleted file mode 100644
index cd143cf2fb..0000000000
--- a/packages/backend/src/misc/detect-url-mime.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createTemp } from './create-temp.js';
-import { downloadUrl } from './download-url.js';
-import { detectType } from './get-file-info.js';
-
-export async function detectUrlMime(url: string) {
-	const [path, cleanup] = await createTemp();
-
-	try {
-		await downloadUrl(url, path);
-		const { mime } = await detectType(path);
-		return mime;
-	} finally {
-		cleanup();
-	}
-}
diff --git a/packages/backend/src/misc/download-text-file.ts b/packages/backend/src/misc/download-text-file.ts
deleted file mode 100644
index c62c70ee33..0000000000
--- a/packages/backend/src/misc/download-text-file.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as fs from 'node:fs';
-import * as util from 'node:util';
-import Logger from '@/services/logger.js';
-import { createTemp } from './create-temp.js';
-import { downloadUrl } from './download-url.js';
-
-const logger = new Logger('download-text-file');
-
-export async function downloadTextFile(url: string): Promise<string> {
-	// Create temp file
-	const [path, cleanup] = await createTemp();
-
-	logger.info(`Temp file is ${path}`);
-
-	try {
-		// write content at URL to temp file
-		await downloadUrl(url, path);
-
-		const text = await util.promisify(fs.readFile)(path, 'utf8');
-
-		return text;
-	} finally {
-		cleanup();
-	}
-}
diff --git a/packages/backend/src/misc/download-url.ts b/packages/backend/src/misc/download-url.ts
deleted file mode 100644
index 7c57b140ef..0000000000
--- a/packages/backend/src/misc/download-url.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import * as fs from 'node:fs';
-import * as stream from 'node:stream';
-import * as util from 'node:util';
-import got, * as Got from 'got';
-import { httpAgent, httpsAgent, StatusError } from './fetch.js';
-import config from '@/config/index.js';
-import chalk from 'chalk';
-import Logger from '@/services/logger.js';
-import IPCIDR from 'ip-cidr';
-import PrivateIp from 'private-ip';
-
-const pipeline = util.promisify(stream.pipeline);
-
-export async function downloadUrl(url: string, path: string): Promise<void> {
-	const logger = new Logger('download');
-
-	logger.info(`Downloading ${chalk.cyan(url)} ...`);
-
-	const timeout = 30 * 1000;
-	const operationTimeout = 60 * 1000;
-	const maxSize = config.maxFileSize || 262144000;
-
-	const req = got.stream(url, {
-		headers: {
-			'User-Agent': config.userAgent,
-		},
-		timeout: {
-			lookup: timeout,
-			connect: timeout,
-			secureConnect: timeout,
-			socket: timeout,	// read timeout
-			response: timeout,
-			send: timeout,
-			request: operationTimeout,	// whole operation timeout
-		},
-		agent: {
-			http: httpAgent,
-			https: httpsAgent,
-		},
-		http2: false,	// default
-		retry: {
-			limit: 0,
-		},
-	}).on('response', (res: Got.Response) => {
-		if ((process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test') && !config.proxy && res.ip) {
-			if (isPrivateIp(res.ip)) {
-				logger.warn(`Blocked address: ${res.ip}`);
-				req.destroy();
-			}
-		}
-
-		const contentLength = res.headers['content-length'];
-		if (contentLength != null) {
-			const size = Number(contentLength);
-			if (size > maxSize) {
-				logger.warn(`maxSize exceeded (${size} > ${maxSize}) on response`);
-				req.destroy();
-			}
-		}
-	}).on('downloadProgress', (progress: Got.Progress) => {
-		if (progress.transferred > maxSize) {
-			logger.warn(`maxSize exceeded (${progress.transferred} > ${maxSize}) on downloadProgress`);
-			req.destroy();
-		}
-	});
-
-	try {
-		await pipeline(req, fs.createWriteStream(path));
-	} catch (e) {
-		if (e instanceof Got.HTTPError) {
-			throw new StatusError(`${e.response.statusCode} ${e.response.statusMessage}`, e.response.statusCode, e.response.statusMessage);
-		} else {
-			throw e;
-		}
-	}
-
-	logger.succ(`Download finished: ${chalk.cyan(url)}`);
-}
-
-function isPrivateIp(ip: string): boolean {
-	for (const net of config.allowedPrivateNetworks || []) {
-		const cidr = new IPCIDR(net);
-		if (cidr.contains(ip)) {
-			return false;
-		}
-	}
-
-	return PrivateIp(ip);
-}
diff --git a/packages/backend/src/misc/extract-custom-emojis-from-mfm.ts b/packages/backend/src/misc/extract-custom-emojis-from-mfm.ts
index a0319d8dd5..8fb3f4b19e 100644
--- a/packages/backend/src/misc/extract-custom-emojis-from-mfm.ts
+++ b/packages/backend/src/misc/extract-custom-emojis-from-mfm.ts
@@ -1,5 +1,5 @@
 import * as mfm from 'mfm-js';
-import { unique } from '@/prelude/array.js';
+import { unique } from '@/misc/prelude/array.js';
 
 export function extractCustomEmojisFromMfm(nodes: mfm.MfmNode[]): string[] {
 	const emojiNodes = mfm.extract(nodes, (node) => {
diff --git a/packages/backend/src/misc/extract-hashtags.ts b/packages/backend/src/misc/extract-hashtags.ts
index 0b0418eefd..f8cabda3d6 100644
--- a/packages/backend/src/misc/extract-hashtags.ts
+++ b/packages/backend/src/misc/extract-hashtags.ts
@@ -1,5 +1,5 @@
 import * as mfm from 'mfm-js';
-import { unique } from '@/prelude/array.js';
+import { unique } from '@/misc/prelude/array.js';
 
 export function extractHashtags(nodes: mfm.MfmNode[]): string[] {
 	const hashtagNodes = mfm.extract(nodes, (node) => node.type === 'hashtag');
diff --git a/packages/backend/src/misc/extract-mentions.ts b/packages/backend/src/misc/extract-mentions.ts
index cc19b161a8..c8762e797b 100644
--- a/packages/backend/src/misc/extract-mentions.ts
+++ b/packages/backend/src/misc/extract-mentions.ts
@@ -4,7 +4,7 @@ import * as mfm from 'mfm-js';
 
 export function extractMentions(nodes: mfm.MfmNode[]): mfm.MfmMention['props'][] {
 	// TODO: 重複を削除
-	const mentionNodes = mfm.extract(nodes, (node) => node.type === 'mention');
+	const mentionNodes = mfm.extract(nodes, (node) => node.type === 'mention') as mfm.MfmMention[];
 	const mentions = mentionNodes.map(x => x.props);
 
 	return mentions;
diff --git a/packages/backend/src/misc/fetch-meta.ts b/packages/backend/src/misc/fetch-meta.ts
deleted file mode 100644
index e855ac28ee..0000000000
--- a/packages/backend/src/misc/fetch-meta.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { Meta } from '@/models/entities/meta.js';
-
-let cache: Meta;
-
-export async function fetchMeta(noCache = false): Promise<Meta> {
-	if (!noCache && cache) return cache;
-
-	return await db.transaction(async transactionalEntityManager => {
-		// 過去のバグでレコードが複数出来てしまっている可能性があるので新しいIDを優先する
-		const metas = await transactionalEntityManager.find(Meta, {
-			order: {
-				id: 'DESC',
-			},
-		});
-
-		const meta = metas[0];
-
-		if (meta) {
-			cache = meta;
-			return meta;
-		} else {
-			// metaが空のときfetchMetaが同時に呼ばれるとここが同時に呼ばれてしまうことがあるのでフェイルセーフなupsertを使う
-			const saved = await transactionalEntityManager
-				.upsert(
-					Meta,
-					{
-						id: 'x',
-					},
-					['id'],
-				)
-				.then((x) => transactionalEntityManager.findOneByOrFail(Meta, x.identifiers[0]));
-
-			cache = saved;
-			return saved;
-		}
-	});
-}
-
-setInterval(() => {
-	fetchMeta(true).then(meta => {
-		cache = meta;
-	});
-}, 1000 * 10);
diff --git a/packages/backend/src/misc/fetch-proxy-account.ts b/packages/backend/src/misc/fetch-proxy-account.ts
deleted file mode 100644
index b61bba264b..0000000000
--- a/packages/backend/src/misc/fetch-proxy-account.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { fetchMeta } from './fetch-meta.js';
-import { ILocalUser } from '@/models/entities/user.js';
-import { Users } from '@/models/index.js';
-
-export async function fetchProxyAccount(): Promise<ILocalUser | null> {
-	const meta = await fetchMeta();
-	if (meta.proxyAccountId == null) return null;
-	return await Users.findOneByOrFail({ id: meta.proxyAccountId }) as ILocalUser;
-}
diff --git a/packages/backend/src/misc/fetch.ts b/packages/backend/src/misc/fetch.ts
deleted file mode 100644
index af6bf2fca7..0000000000
--- a/packages/backend/src/misc/fetch.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import * as http from 'node:http';
-import * as https from 'node:https';
-import { URL } from 'node:url';
-import CacheableLookup from 'cacheable-lookup';
-import fetch from 'node-fetch';
-import { HttpProxyAgent, HttpsProxyAgent } from 'hpagent';
-import config from '@/config/index.js';
-
-export async function getJson(url: string, accept = 'application/json, */*', timeout = 10000, headers?: Record<string, string>) {
-	const res = await getResponse({
-		url,
-		method: 'GET',
-		headers: Object.assign({
-			'User-Agent': config.userAgent,
-			Accept: accept,
-		}, headers || {}),
-		timeout,
-	});
-
-	return await res.json();
-}
-
-export async function getHtml(url: string, accept = 'text/html, */*', timeout = 10000, headers?: Record<string, string>) {
-	const res = await getResponse({
-		url,
-		method: 'GET',
-		headers: Object.assign({
-			'User-Agent': config.userAgent,
-			Accept: accept,
-		}, headers || {}),
-		timeout,
-	});
-
-	return await res.text();
-}
-
-export async function getResponse(args: { url: string, method: string, body?: string, headers: Record<string, string>, timeout?: number, size?: number }) {
-	const timeout = args.timeout || 10 * 1000;
-
-	const controller = new AbortController();
-	setTimeout(() => {
-		controller.abort();
-	}, timeout * 6);
-
-	const res = await fetch(args.url, {
-		method: args.method,
-		headers: args.headers,
-		body: args.body,
-		timeout,
-		size: args.size || 10 * 1024 * 1024,
-		agent: getAgentByUrl,
-		signal: controller.signal,
-	});
-
-	if (!res.ok) {
-		throw new StatusError(`${res.status} ${res.statusText}`, res.status, res.statusText);
-	}
-
-	return res;
-}
-
-const cache = new CacheableLookup({
-	maxTtl: 3600,	// 1hours
-	errorTtl: 30,	// 30secs
-	lookup: false,	// nativeのdns.lookupにfallbackしない
-});
-
-/**
- * Get http non-proxy agent
- */
-const _http = new http.Agent({
-	keepAlive: true,
-	keepAliveMsecs: 30 * 1000,
-	lookup: cache.lookup,
-} as http.AgentOptions);
-
-/**
- * Get https non-proxy agent
- */
-const _https = new https.Agent({
-	keepAlive: true,
-	keepAliveMsecs: 30 * 1000,
-	lookup: cache.lookup,
-} as https.AgentOptions);
-
-const maxSockets = Math.max(256, config.deliverJobConcurrency || 128);
-
-/**
- * Get http proxy or non-proxy agent
- */
-export const httpAgent = config.proxy
-	? new HttpProxyAgent({
-		keepAlive: true,
-		keepAliveMsecs: 30 * 1000,
-		maxSockets,
-		maxFreeSockets: 256,
-		scheduling: 'lifo',
-		proxy: config.proxy,
-	})
-	: _http;
-
-/**
- * Get https proxy or non-proxy agent
- */
-export const httpsAgent = config.proxy
-	? new HttpsProxyAgent({
-		keepAlive: true,
-		keepAliveMsecs: 30 * 1000,
-		maxSockets,
-		maxFreeSockets: 256,
-		scheduling: 'lifo',
-		proxy: config.proxy,
-	})
-	: _https;
-
-/**
- * Get agent by URL
- * @param url URL
- * @param bypassProxy Allways bypass proxy
- */
-export function getAgentByUrl(url: URL, bypassProxy = false) {
-	if (bypassProxy || (config.proxyBypassHosts || []).includes(url.hostname)) {
-		return url.protocol === 'http:' ? _http : _https;
-	} else {
-		return url.protocol === 'http:' ? httpAgent : httpsAgent;
-	}
-}
-
-export class StatusError extends Error {
-	public statusCode: number;
-	public statusMessage?: string;
-	public isClientError: boolean;
-
-	constructor(message: string, statusCode: number, statusMessage?: string) {
-		super(message);
-		this.name = 'StatusError';
-		this.statusCode = statusCode;
-		this.statusMessage = statusMessage;
-		this.isClientError = typeof this.statusCode === 'number' && this.statusCode >= 400 && this.statusCode < 500;
-	}
-}
diff --git a/packages/backend/src/misc/gen-id.ts b/packages/backend/src/misc/gen-id.ts
deleted file mode 100644
index fcf476857f..0000000000
--- a/packages/backend/src/misc/gen-id.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ulid } from 'ulid';
-import { genAid } from './id/aid.js';
-import { genMeid } from './id/meid.js';
-import { genMeidg } from './id/meidg.js';
-import { genObjectId } from './id/object-id.js';
-import config from '@/config/index.js';
-
-const metohd = config.id.toLowerCase();
-
-export function genId(date?: Date): string {
-	if (!date || (date > new Date())) date = new Date();
-
-	switch (metohd) {
-		case 'aid': return genAid(date);
-		case 'meid': return genMeid(date);
-		case 'meidg': return genMeidg(date);
-		case 'ulid': return ulid(date.getTime());
-		case 'objectid': return genObjectId(date);
-		default: throw new Error('unrecognized id generation method');
-	}
-}
diff --git a/packages/backend/src/misc/generate-native-user-token.ts b/packages/backend/src/misc/generate-native-user-token.ts
new file mode 100644
index 0000000000..5d8a4c5378
--- /dev/null
+++ b/packages/backend/src/misc/generate-native-user-token.ts
@@ -0,0 +1,3 @@
+import { secureRndstr } from '@/misc/secure-rndstr.js';
+
+export default () => secureRndstr(16, true);
diff --git a/packages/backend/src/misc/get-file-info.ts b/packages/backend/src/misc/get-file-info.ts
deleted file mode 100644
index 1c988b2487..0000000000
--- a/packages/backend/src/misc/get-file-info.ts
+++ /dev/null
@@ -1,374 +0,0 @@
-import * as fs from 'node:fs';
-import * as crypto from 'node:crypto';
-import { join } from 'node:path';
-import * as stream from 'node:stream';
-import * as util from 'node:util';
-import { FSWatcher } from 'chokidar';
-import { fileTypeFromFile } from 'file-type';
-import FFmpeg from 'fluent-ffmpeg';
-import isSvg from 'is-svg';
-import probeImageSize from 'probe-image-size';
-import { type predictionType } from 'nsfwjs';
-import sharp from 'sharp';
-import { encode } from 'blurhash';
-import { detectSensitive } from '@/services/detect-sensitive.js';
-import { createTempDir } from './create-temp.js';
-
-const pipeline = util.promisify(stream.pipeline);
-
-export type FileInfo = {
-	size: number;
-	md5: string;
-	type: {
-		mime: string;
-		ext: string | null;
-	};
-	width?: number;
-	height?: number;
-	orientation?: number;
-	blurhash?: string;
-	sensitive: boolean;
-	porn: boolean;
-	warnings: string[];
-};
-
-const TYPE_OCTET_STREAM = {
-	mime: 'application/octet-stream',
-	ext: null,
-};
-
-const TYPE_SVG = {
-	mime: 'image/svg+xml',
-	ext: 'svg',
-};
-
-/**
- * Get file information
- */
-export async function getFileInfo(path: string, opts: {
-	skipSensitiveDetection: boolean;
-	sensitiveThreshold?: number;
-	sensitiveThresholdForPorn?: number;
-	enableSensitiveMediaDetectionForVideos?: boolean;
-}): Promise<FileInfo> {
-	const warnings = [] as string[];
-
-	const size = await getFileSize(path);
-	const md5 = await calcHash(path);
-
-	let type = await detectType(path);
-
-	// image dimensions
-	let width: number | undefined;
-	let height: number | undefined;
-	let orientation: number | undefined;
-
-	if (['image/jpeg', 'image/gif', 'image/png', 'image/apng', 'image/webp', 'image/bmp', 'image/tiff', 'image/svg+xml', 'image/vnd.adobe.photoshop'].includes(type.mime)) {
-		const imageSize = await detectImageSize(path).catch(e => {
-			warnings.push(`detectImageSize failed: ${e}`);
-			return undefined;
-		});
-
-		// うまく判定できない画像は octet-stream にする
-		if (!imageSize) {
-			warnings.push('cannot detect image dimensions');
-			type = TYPE_OCTET_STREAM;
-		} else if (imageSize.wUnits === 'px') {
-			width = imageSize.width;
-			height = imageSize.height;
-			orientation = imageSize.orientation;
-
-			// 制限を超えている画像は octet-stream にする
-			if (imageSize.width > 16383 || imageSize.height > 16383) {
-				warnings.push('image dimensions exceeds limits');
-				type = TYPE_OCTET_STREAM;
-			}
-		} else {
-			warnings.push(`unsupported unit type: ${imageSize.wUnits}`);
-		}
-	}
-
-	let blurhash: string | undefined;
-
-	if (['image/jpeg', 'image/gif', 'image/png', 'image/apng', 'image/webp', 'image/svg+xml'].includes(type.mime)) {
-		blurhash = await getBlurhash(path).catch(e => {
-			warnings.push(`getBlurhash failed: ${e}`);
-			return undefined;
-		});
-	}
-
-	let sensitive = false;
-	let porn = false;
-
-	if (!opts.skipSensitiveDetection) {
-		await detectSensitivity(
-			path,
-			type.mime,
-			opts.sensitiveThreshold ?? 0.5,
-			opts.sensitiveThresholdForPorn ?? 0.75,
-			opts.enableSensitiveMediaDetectionForVideos ?? false,
-		).then(value => {
-			[sensitive, porn] = value;
-		}, error => {
-			warnings.push(`detectSensitivity failed: ${error}`);
-		});
-	}
-
-	return {
-		size,
-		md5,
-		type,
-		width,
-		height,
-		orientation,
-		blurhash,
-		sensitive,
-		porn,
-		warnings,
-	};
-}
-
-async function detectSensitivity(source: string, mime: string, sensitiveThreshold: number, sensitiveThresholdForPorn: number, analyzeVideo: boolean): Promise<[sensitive: boolean, porn: boolean]> {
-	let sensitive = false;
-	let porn = false;
-
-	function judgePrediction(result: readonly predictionType[]): [sensitive: boolean, porn: boolean] {
-		let sensitive = false;
-		let porn = false;
-
-		if ((result.find(x => x.className === 'Sexy')?.probability ?? 0) > sensitiveThreshold) sensitive = true;
-		if ((result.find(x => x.className === 'Hentai')?.probability ?? 0) > sensitiveThreshold) sensitive = true;
-		if ((result.find(x => x.className === 'Porn')?.probability ?? 0) > sensitiveThreshold) sensitive = true;
-
-		if ((result.find(x => x.className === 'Porn')?.probability ?? 0) > sensitiveThresholdForPorn) porn = true;
-
-		return [sensitive, porn];
-	}
-
-	if (['image/jpeg', 'image/png', 'image/webp'].includes(mime)) {
-		const result = await detectSensitive(source);
-		if (result) {
-			[sensitive, porn] = judgePrediction(result);
-		}
-	} else if (analyzeVideo && (mime === 'image/apng' || mime.startsWith('video/'))) {
-		const [outDir, disposeOutDir] = await createTempDir();
-		try {
-			const command = FFmpeg()
-				.input(source)
-				.inputOptions([
-					'-skip_frame', 'nokey', // 可能ならキーフレームのみを取得してほしいとする（そうなるとは限らない）
-					'-lowres', '3', // 元の画質でデコードする必要はないので 1/8 画質でデコードしてもよいとする（そうなるとは限らない）
-				])
-				.noAudio()
-				.videoFilters([
-					{
-						filter: 'select', // フレームのフィルタリング
-						options: {
-							e: 'eq(pict_type,PICT_TYPE_I)', // I-Frame のみをフィルタする（VP9 とかはデコードしてみないとわからないっぽい）
-						},
-					},
-					{
-						filter: 'blackframe', // 暗いフレームの検出
-						options: {
-							amount: '0', // 暗さに関わらず全てのフレームで測定値を取る
-						},
-					},
-					{
-						filter: 'metadata',
-						options: {
-							mode: 'select', // フレーム選択モード
-							key: 'lavfi.blackframe.pblack', // フレームにおける暗部の百分率（前のフィルタからのメタデータを参照する）
-							value: '50',
-							function: 'less', // 50% 未満のフレームを選択する（50% 以上暗部があるフレームだと誤検知を招くかもしれないので）
-						},
-					},
-					{
-						filter: 'scale',
-						options: {
-							w: 299,
-							h: 299,
-						},
-					},
-				])
-				.format('image2')
-				.output(join(outDir, '%d.png'))
-				.outputOptions(['-vsync', '0']); // 可変フレームレートにすることで穴埋めをさせない
-			const results: ReturnType<typeof judgePrediction>[] = [];
-			let frameIndex = 0;
-			let targetIndex = 0;
-			let nextIndex = 1;
-			for await (const path of asyncIterateFrames(outDir, command)) {
-				try {
-					const index = frameIndex++;
-					if (index !== targetIndex) {
-						continue;
-					}
-					targetIndex = nextIndex;
-					nextIndex += index; // fibonacci sequence によってフレーム数制限を掛ける
-					const result = await detectSensitive(path);
-					if (result) {
-						results.push(judgePrediction(result));
-					}
-				} finally {
-					fs.promises.unlink(path);
-				}
-			}
-			sensitive = results.filter(x => x[0]).length >= Math.ceil(results.length * sensitiveThreshold);
-			porn = results.filter(x => x[1]).length >= Math.ceil(results.length * sensitiveThresholdForPorn);
-		} finally {
-			disposeOutDir();
-		}
-	}
-
-	return [sensitive, porn];
-}
-
-async function* asyncIterateFrames(cwd: string, command: FFmpeg.FfmpegCommand): AsyncGenerator<string, void> {
-	const watcher = new FSWatcher({
-		cwd,
-		disableGlobbing: true,
-	});
-	let finished = false;
-	command.once('end', () => {
-		finished = true;
-		watcher.close();
-	});
-	command.run();
-	for (let i = 1; true; i++) { // eslint-disable-line @typescript-eslint/no-unnecessary-condition
-		const current = `${i}.png`;
-		const next = `${i + 1}.png`;
-		const framePath = join(cwd, current);
-		if (await exists(join(cwd, next))) {
-			yield framePath;
-		} else if (!finished) { // eslint-disable-line @typescript-eslint/no-unnecessary-condition
-			watcher.add(next);
-			await new Promise<void>((resolve, reject) => {
-				watcher.on('add', function onAdd(path) {
-					if (path === next) { // 次フレームの書き出しが始まっているなら、現在フレームの書き出しは終わっている
-						watcher.unwatch(current);
-						watcher.off('add', onAdd);
-						resolve();
-					}
-				});
-				command.once('end', resolve); // 全てのフレームを処理し終わったなら、最終フレームである現在フレームの書き出しは終わっている
-				command.once('error', reject);
-			});
-			yield framePath;
-		} else if (await exists(framePath)) {
-			yield framePath;
-		} else {
-			return;
-		}
-	}
-}
-
-function exists(path: string): Promise<boolean> {
-	return fs.promises.access(path).then(() => true, () => false);
-}
-
-/**
- * Detect MIME Type and extension
- */
-export async function detectType(path: string): Promise<{
-	mime: string;
-	ext: string | null;
-}> {
-	// Check 0 byte
-	const fileSize = await getFileSize(path);
-	if (fileSize === 0) {
-		return TYPE_OCTET_STREAM;
-	}
-
-	const type = await fileTypeFromFile(path);
-
-	if (type) {
-		// XMLはSVGかもしれない
-		if (type.mime === 'application/xml' && await checkSvg(path)) {
-			return TYPE_SVG;
-		}
-
-		return {
-			mime: type.mime,
-			ext: type.ext,
-		};
-	}
-
-	// 種類が不明でもSVGかもしれない
-	if (await checkSvg(path)) {
-		return TYPE_SVG;
-	}
-
-	// それでも種類が不明なら application/octet-stream にする
-	return TYPE_OCTET_STREAM;
-}
-
-/**
- * Check the file is SVG or not
- */
-export async function checkSvg(path: string) {
-	try {
-		const size = await getFileSize(path);
-		if (size > 1 * 1024 * 1024) return false;
-		return isSvg(fs.readFileSync(path));
-	} catch {
-		return false;
-	}
-}
-
-/**
- * Get file size
- */
-export async function getFileSize(path: string): Promise<number> {
-	const getStat = util.promisify(fs.stat);
-	return (await getStat(path)).size;
-}
-
-/**
- * Calculate MD5 hash
- */
-async function calcHash(path: string): Promise<string> {
-	const hash = crypto.createHash('md5').setEncoding('hex');
-	await pipeline(fs.createReadStream(path), hash);
-	return hash.read();
-}
-
-/**
- * Detect dimensions of image
- */
-async function detectImageSize(path: string): Promise<{
-	width: number;
-	height: number;
-	wUnits: string;
-	hUnits: string;
-	orientation?: number;
-}> {
-	const readable = fs.createReadStream(path);
-	const imageSize = await probeImageSize(readable);
-	readable.destroy();
-	return imageSize;
-}
-
-/**
- * Calculate average color of image
- */
-function getBlurhash(path: string): Promise<string> {
-	return new Promise((resolve, reject) => {
-		sharp(path)
-			.raw()
-			.ensureAlpha()
-			.resize(64, 64, { fit: 'inside' })
-			.toBuffer((err, buffer, { width, height }) => {
-				if (err) return reject(err);
-
-				let hash;
-
-				try {
-					hash = encode(new Uint8ClampedArray(buffer), width, height, 7, 7);
-				} catch (e) {
-					return reject(e);
-				}
-
-				resolve(hash);
-			});
-	});
-}
diff --git a/packages/backend/src/misc/get-note-summary.ts b/packages/backend/src/misc/get-note-summary.ts
index 3f35ccee82..85bc2ec94d 100644
--- a/packages/backend/src/misc/get-note-summary.ts
+++ b/packages/backend/src/misc/get-note-summary.ts
@@ -1,4 +1,4 @@
-import { Packed } from './schema.js';
+import type { Packed } from './schema.js';
 
 /**
  * 投稿を表す文字列を取得します。
@@ -6,11 +6,11 @@ import { Packed } from './schema.js';
  */
 export const getNoteSummary = (note: Packed<'Note'>): string => {
 	if (note.deletedAt) {
-		return `(❌⛔)`;
+		return '(❌⛔)';
 	}
 
 	if (note.isHidden) {
-		return `(⛔)`;
+		return '(⛔)';
 	}
 
 	let summary = '';
@@ -23,13 +23,13 @@ export const getNoteSummary = (note: Packed<'Note'>): string => {
 	}
 
 	// ファイルが添付されているとき
-	if ((note.files || []).length !== 0) {
+	if ((note.files ?? []).length !== 0) {
 		summary += ` (📎${note.files!.length})`;
 	}
 
 	// 投票が添付されているとき
 	if (note.poll) {
-		summary += ` (📊)`;
+		summary += ' (📊)';
 	}
 
 	// 返信のとき
diff --git a/packages/backend/src/misc/identifiable-error.ts b/packages/backend/src/misc/identifiable-error.ts
index 2d7c6bd0c6..e394123f1b 100644
--- a/packages/backend/src/misc/identifiable-error.ts
+++ b/packages/backend/src/misc/identifiable-error.ts
@@ -7,7 +7,7 @@ export class IdentifiableError extends Error {
 
 	constructor(id: string, message?: string) {
 		super(message);
-		this.message = message || '';
+		this.message = message ?? '';
 		this.id = id;
 	}
 }
diff --git a/packages/backend/src/misc/is-native-token.ts b/packages/backend/src/misc/is-native-token.ts
new file mode 100644
index 0000000000..2833c570c8
--- /dev/null
+++ b/packages/backend/src/misc/is-native-token.ts
@@ -0,0 +1 @@
+export default (token: string) => token.length === 16;
diff --git a/packages/backend/src/misc/is-quote.ts b/packages/backend/src/misc/is-quote.ts
index 779f548b03..6ea71cd878 100644
--- a/packages/backend/src/misc/is-quote.ts
+++ b/packages/backend/src/misc/is-quote.ts
@@ -1,4 +1,4 @@
-import { Note } from '@/models/entities/note.js';
+import { Note } from '@/models/entities/Note.js';
 
 export default function(note: Note): boolean {
 	return note.renoteId != null && (note.text != null || note.hasPoll || (note.fileIds != null && note.fileIds.length > 0));
diff --git a/packages/backend/src/misc/keypair-store.ts b/packages/backend/src/misc/keypair-store.ts
deleted file mode 100644
index 1183b9a781..0000000000
--- a/packages/backend/src/misc/keypair-store.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { UserKeypairs } from '@/models/index.js';
-import { User } from '@/models/entities/user.js';
-import { UserKeypair } from '@/models/entities/user-keypair.js';
-import { Cache } from './cache.js';
-
-const cache = new Cache<UserKeypair>(Infinity);
-
-export async function getUserKeypair(userId: User['id']): Promise<UserKeypair> {
-	return await cache.fetch(userId, () => UserKeypairs.findOneByOrFail({ userId: userId }));
-}
diff --git a/packages/backend/src/misc/populate-emojis.ts b/packages/backend/src/misc/populate-emojis.ts
deleted file mode 100644
index 6a185d09f6..0000000000
--- a/packages/backend/src/misc/populate-emojis.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import { In, IsNull } from 'typeorm';
-import { Emojis } from '@/models/index.js';
-import { Emoji } from '@/models/entities/emoji.js';
-import { Note } from '@/models/entities/note.js';
-import { Cache } from './cache.js';
-import { isSelfHost, toPunyNullable } from './convert-host.js';
-import { decodeReaction } from './reaction-lib.js';
-import config from '@/config/index.js';
-import { query } from '@/prelude/url.js';
-
-const cache = new Cache<Emoji | null>(1000 * 60 * 60 * 12);
-
-/**
- * 添付用絵文字情報
- */
-type PopulatedEmoji = {
-	name: string;
-	url: string;
-};
-
-function normalizeHost(src: string | undefined, noteUserHost: string | null): string | null {
-	// クエリに使うホスト
-	let host = src === '.' ? null	// .はローカルホスト (ここがマッチするのはリアクションのみ)
-		: src === undefined ? noteUserHost	// ノートなどでホスト省略表記の場合はローカルホスト (ここがリアクションにマッチすることはない)
-		: isSelfHost(src) ? null	// 自ホスト指定
-		: (src || noteUserHost);	// 指定されたホスト || ノートなどの所有者のホスト (こっちがリアクションにマッチすることはない)
-
-	host = toPunyNullable(host);
-
-	return host;
-}
-
-function parseEmojiStr(emojiName: string, noteUserHost: string | null) {
-	const match = emojiName.match(/^(\w+)(?:@([\w.-]+))?$/);
-	if (!match) return { name: null, host: null };
-
-	const name = match[1];
-
-	// ホスト正規化
-	const host = toPunyNullable(normalizeHost(match[2], noteUserHost));
-
-	return { name, host };
-}
-
-/**
- * 添付用絵文字情報を解決する
- * @param emojiName ノートやユーザープロフィールに添付された、またはリアクションのカスタム絵文字名 (:は含めない, リアクションでローカルホストの場合は@.を付ける (これはdecodeReactionで可能))
- * @param noteUserHost ノートやユーザープロフィールの所有者のホスト
- * @returns 絵文字情報, nullは未マッチを意味する
- */
-export async function populateEmoji(emojiName: string, noteUserHost: string | null): Promise<PopulatedEmoji | null> {
-	const { name, host } = parseEmojiStr(emojiName, noteUserHost);
-	if (name == null) return null;
-
-	const queryOrNull = async () => (await Emojis.findOneBy({
-		name,
-		host: host ?? IsNull(),
-	})) || null;
-
-	const emoji = await cache.fetch(`${name} ${host}`, queryOrNull);
-
-	if (emoji == null) return null;
-
-	const isLocal = emoji.host == null;
-	const emojiUrl = emoji.publicUrl || emoji.originalUrl; // || emoji.originalUrl してるのは後方互換性のため
-	const url = isLocal ? emojiUrl : `${config.url}/proxy/${encodeURIComponent((new URL(emojiUrl)).pathname)}?${query({ url: emojiUrl })}`;
-
-	return {
-		name: emojiName,
-		url,
-	};
-}
-
-/**
- * 複数の添付用絵文字情報を解決する (キャシュ付き, 存在しないものは結果から除外される)
- */
-export async function populateEmojis(emojiNames: string[], noteUserHost: string | null): Promise<PopulatedEmoji[]> {
-	const emojis = await Promise.all(emojiNames.map(x => populateEmoji(x, noteUserHost)));
-	return emojis.filter((x): x is PopulatedEmoji => x != null);
-}
-
-export function aggregateNoteEmojis(notes: Note[]) {
-	let emojis: { name: string | null; host: string | null; }[] = [];
-	for (const note of notes) {
-		emojis = emojis.concat(note.emojis
-			.map(e => parseEmojiStr(e, note.userHost)));
-		if (note.renote) {
-			emojis = emojis.concat(note.renote.emojis
-				.map(e => parseEmojiStr(e, note.renote!.userHost)));
-			if (note.renote.user) {
-				emojis = emojis.concat(note.renote.user.emojis
-					.map(e => parseEmojiStr(e, note.renote!.userHost)));
-			}
-		}
-		const customReactions = Object.keys(note.reactions).map(x => decodeReaction(x)).filter(x => x.name != null) as typeof emojis;
-		emojis = emojis.concat(customReactions);
-		if (note.user) {
-			emojis = emojis.concat(note.user.emojis
-				.map(e => parseEmojiStr(e, note.userHost)));
-		}
-	}
-	return emojis.filter(x => x.name != null) as { name: string; host: string | null; }[];
-}
-
-/**
- * 与えられた絵文字のリストをデータベースから取得し、キャッシュに追加します
- */
-export async function prefetchEmojis(emojis: { name: string; host: string | null; }[]): Promise<void> {
-	const notCachedEmojis = emojis.filter(emoji => cache.get(`${emoji.name} ${emoji.host}`) == null);
-	const emojisQuery: any[] = [];
-	const hosts = new Set(notCachedEmojis.map(e => e.host));
-	for (const host of hosts) {
-		emojisQuery.push({
-			name: In(notCachedEmojis.filter(e => e.host === host).map(e => e.name)),
-			host: host ?? IsNull(),
-		});
-	}
-	const _emojis = emojisQuery.length > 0 ? await Emojis.find({
-		where: emojisQuery,
-		select: ['name', 'host', 'originalUrl', 'publicUrl'],
-	}) : [];
-	for (const emoji of _emojis) {
-		cache.set(`${emoji.name} ${emoji.host}`, emoji);
-	}
-}
diff --git a/packages/backend/src/misc/prelude/README.md b/packages/backend/src/misc/prelude/README.md
new file mode 100644
index 0000000000..bb728cfb1b
--- /dev/null
+++ b/packages/backend/src/misc/prelude/README.md
@@ -0,0 +1,3 @@
+# Prelude
+このディレクトリのコードはJavaScriptの表現能力を補うためのコードです。
+Misskey固有の処理とは独立したコードの集まりですが、Misskeyのコードを読みやすくすることを目的としています。
diff --git a/packages/backend/src/misc/prelude/array.ts b/packages/backend/src/misc/prelude/array.ts
new file mode 100644
index 0000000000..0b2830cb7b
--- /dev/null
+++ b/packages/backend/src/misc/prelude/array.ts
@@ -0,0 +1,138 @@
+import { EndoRelation, Predicate } from './relation.js';
+
+/**
+ * Count the number of elements that satisfy the predicate
+ */
+
+export function countIf<T>(f: Predicate<T>, xs: T[]): number {
+	return xs.filter(f).length;
+}
+
+/**
+ * Count the number of elements that is equal to the element
+ */
+export function count<T>(a: T, xs: T[]): number {
+	return countIf(x => x === a, xs);
+}
+
+/**
+ * Concatenate an array of arrays
+ */
+export function concat<T>(xss: T[][]): T[] {
+	return ([] as T[]).concat(...xss);
+}
+
+/**
+ * Intersperse the element between the elements of the array
+ * @param sep The element to be interspersed
+ */
+export function intersperse<T>(sep: T, xs: T[]): T[] {
+	return concat(xs.map(x => [sep, x])).slice(1);
+}
+
+/**
+ * Returns the array of elements that is not equal to the element
+ */
+export function erase<T>(a: T, xs: T[]): T[] {
+	return xs.filter(x => x !== a);
+}
+
+/**
+ * Finds the array of all elements in the first array not contained in the second array.
+ * The order of result values are determined by the first array.
+ */
+export function difference<T>(xs: T[], ys: T[]): T[] {
+	return xs.filter(x => !ys.includes(x));
+}
+
+/**
+ * Remove all but the first element from every group of equivalent elements
+ */
+export function unique<T>(xs: T[]): T[] {
+	return [...new Set(xs)];
+}
+
+export function sum(xs: number[]): number {
+	return xs.reduce((a, b) => a + b, 0);
+}
+
+export function maximum(xs: number[]): number {
+	return Math.max(...xs);
+}
+
+/**
+ * Splits an array based on the equivalence relation.
+ * The concatenation of the result is equal to the argument.
+ */
+export function groupBy<T>(f: EndoRelation<T>, xs: T[]): T[][] {
+	const groups = [] as T[][];
+	for (const x of xs) {
+		if (groups.length !== 0 && f(groups[groups.length - 1][0], x)) {
+			groups[groups.length - 1].push(x);
+		} else {
+			groups.push([x]);
+		}
+	}
+	return groups;
+}
+
+/**
+ * Splits an array based on the equivalence relation induced by the function.
+ * The concatenation of the result is equal to the argument.
+ */
+export function groupOn<T, S>(f: (x: T) => S, xs: T[]): T[][] {
+	return groupBy((a, b) => f(a) === f(b), xs);
+}
+
+export function groupByX<T>(collections: T[], keySelector: (x: T) => string) {
+	return collections.reduce((obj: Record<string, T[]>, item: T) => {
+		const key = keySelector(item);
+		if (!Object.prototype.hasOwnProperty.call(obj, key)) {
+			obj[key] = [];
+		}
+
+		obj[key].push(item);
+
+		return obj;
+	}, {});
+}
+
+/**
+ * Compare two arrays by lexicographical order
+ */
+export function lessThan(xs: number[], ys: number[]): boolean {
+	for (let i = 0; i < Math.min(xs.length, ys.length); i++) {
+		if (xs[i] < ys[i]) return true;
+		if (xs[i] > ys[i]) return false;
+	}
+	return xs.length < ys.length;
+}
+
+/**
+ * Returns the longest prefix of elements that satisfy the predicate
+ */
+export function takeWhile<T>(f: Predicate<T>, xs: T[]): T[] {
+	const ys = [];
+	for (const x of xs) {
+		if (f(x)) {
+			ys.push(x);
+		} else {
+			break;
+		}
+	}
+	return ys;
+}
+
+export function cumulativeSum(xs: number[]): number[] {
+	const ys = Array.from(xs); // deep copy
+	for (let i = 1; i < ys.length; i++) ys[i] += ys[i - 1];
+	return ys;
+}
+
+export function toArray<T>(x: T | T[] | undefined): T[] {
+	return Array.isArray(x) ? x : x != null ? [x] : [];
+}
+
+export function toSingle<T>(x: T | T[] | undefined): T | undefined {
+	return Array.isArray(x) ? x[0] : x;
+}
diff --git a/packages/backend/src/misc/prelude/await-all.ts b/packages/backend/src/misc/prelude/await-all.ts
new file mode 100644
index 0000000000..b955c3a5d8
--- /dev/null
+++ b/packages/backend/src/misc/prelude/await-all.ts
@@ -0,0 +1,21 @@
+export type Promiseable<T> = {
+	[K in keyof T]: Promise<T[K]> | T[K];
+};
+
+export async function awaitAll<T>(obj: Promiseable<T>): Promise<T> {
+	const target = {} as T;
+	const keys = Object.keys(obj) as unknown as (keyof T)[];
+	const values = Object.values(obj) as any[];
+
+	const resolvedValues = await Promise.all(values.map(value =>
+		(!value || !value.constructor || value.constructor.name !== 'Object')
+			? value
+			: awaitAll(value)
+	));
+
+	for (let i = 0; i < keys.length; i++) {
+		target[keys[i]] = resolvedValues[i];
+	}
+
+	return target;
+}
diff --git a/packages/backend/src/misc/prelude/math.ts b/packages/backend/src/misc/prelude/math.ts
new file mode 100644
index 0000000000..07b94bec30
--- /dev/null
+++ b/packages/backend/src/misc/prelude/math.ts
@@ -0,0 +1,3 @@
+export function gcd(a: number, b: number): number {
+	return b === 0 ? a : gcd(b, a % b);
+}
diff --git a/packages/backend/src/misc/prelude/maybe.ts b/packages/backend/src/misc/prelude/maybe.ts
new file mode 100644
index 0000000000..df7c4ed52a
--- /dev/null
+++ b/packages/backend/src/misc/prelude/maybe.ts
@@ -0,0 +1,20 @@
+export interface IMaybe<T> {
+	isJust(): this is IJust<T>;
+}
+
+export interface IJust<T> extends IMaybe<T> {
+	get(): T;
+}
+
+export function just<T>(value: T): IJust<T> {
+	return {
+		isJust: () => true,
+		get: () => value,
+	};
+}
+
+export function nothing<T>(): IMaybe<T> {
+	return {
+		isJust: () => false,
+	};
+}
diff --git a/packages/backend/src/misc/prelude/relation.ts b/packages/backend/src/misc/prelude/relation.ts
new file mode 100644
index 0000000000..1f4703f52f
--- /dev/null
+++ b/packages/backend/src/misc/prelude/relation.ts
@@ -0,0 +1,5 @@
+export type Predicate<T> = (a: T) => boolean;
+
+export type Relation<T, U> = (a: T, b: U) => boolean;
+
+export type EndoRelation<T> = Relation<T, T>;
diff --git a/packages/backend/src/misc/prelude/string.ts b/packages/backend/src/misc/prelude/string.ts
new file mode 100644
index 0000000000..b907e0a2e1
--- /dev/null
+++ b/packages/backend/src/misc/prelude/string.ts
@@ -0,0 +1,15 @@
+export function concat(xs: string[]): string {
+	return xs.join('');
+}
+
+export function capitalize(s: string): string {
+	return toUpperCase(s.charAt(0)) + toLowerCase(s.slice(1));
+}
+
+export function toUpperCase(s: string): string {
+	return s.toUpperCase();
+}
+
+export function toLowerCase(s: string): string {
+	return s.toLowerCase();
+}
diff --git a/packages/backend/src/misc/prelude/symbol.ts b/packages/backend/src/misc/prelude/symbol.ts
new file mode 100644
index 0000000000..51e12f7450
--- /dev/null
+++ b/packages/backend/src/misc/prelude/symbol.ts
@@ -0,0 +1 @@
+export const fallback = Symbol('fallback');
diff --git a/packages/backend/src/misc/prelude/time.ts b/packages/backend/src/misc/prelude/time.ts
new file mode 100644
index 0000000000..34e8b6b17c
--- /dev/null
+++ b/packages/backend/src/misc/prelude/time.ts
@@ -0,0 +1,39 @@
+const dateTimeIntervals = {
+	'day': 86400000,
+	'hour': 3600000,
+	'ms': 1,
+};
+
+export function dateUTC(time: number[]): Date {
+	const d = time.length === 2 ? Date.UTC(time[0], time[1])
+					: time.length === 3 ? Date.UTC(time[0], time[1], time[2])
+					: time.length === 4 ? Date.UTC(time[0], time[1], time[2], time[3])
+					: time.length === 5 ? Date.UTC(time[0], time[1], time[2], time[3], time[4])
+					: time.length === 6 ? Date.UTC(time[0], time[1], time[2], time[3], time[4], time[5])
+					: time.length === 7 ? Date.UTC(time[0], time[1], time[2], time[3], time[4], time[5], time[6])
+					: null;
+
+	if (!d) throw 'wrong number of arguments';
+
+	return new Date(d);
+}
+
+export function isTimeSame(a: Date, b: Date): boolean {
+	return a.getTime() === b.getTime();
+}
+
+export function isTimeBefore(a: Date, b: Date): boolean {
+	return (a.getTime() - b.getTime()) < 0;
+}
+
+export function isTimeAfter(a: Date, b: Date): boolean {
+	return (a.getTime() - b.getTime()) > 0;
+}
+
+export function addTime(x: Date, value: number, span: keyof typeof dateTimeIntervals = 'ms'): Date {
+	return new Date(x.getTime() + (value * dateTimeIntervals[span]));
+}
+
+export function subtractTime(x: Date, value: number, span: keyof typeof dateTimeIntervals = 'ms'): Date {
+	return new Date(x.getTime() - (value * dateTimeIntervals[span]));
+}
diff --git a/packages/backend/src/misc/prelude/url.ts b/packages/backend/src/misc/prelude/url.ts
new file mode 100644
index 0000000000..a4f2f7f5a8
--- /dev/null
+++ b/packages/backend/src/misc/prelude/url.ts
@@ -0,0 +1,13 @@
+export function query(obj: Record<string, unknown>): 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}`;
+}
diff --git a/packages/backend/src/misc/prelude/xml.ts b/packages/backend/src/misc/prelude/xml.ts
new file mode 100644
index 0000000000..b4469a1d8d
--- /dev/null
+++ b/packages/backend/src/misc/prelude/xml.ts
@@ -0,0 +1,41 @@
+const map: Record<string, string> = {
+	'&': '&amp;',
+	'<': '&lt;',
+	'>': '&gt;',
+	'"': '&quot;',
+	'\'': '&apos;',
+};
+
+const beginingOfCDATA = '<![CDATA[';
+const endOfCDATA = ']]>';
+
+export function escapeValue(x: string): string {
+	let insideOfCDATA = false;
+	let builder = '';
+	for (
+		let i = 0;
+		i < x.length;
+	) {
+		if (insideOfCDATA) {
+			if (x.slice(i, i + beginingOfCDATA.length) === beginingOfCDATA) {
+				insideOfCDATA = true;
+				i += beginingOfCDATA.length;
+			} else {
+				builder += x[i++];
+			}
+		} else {
+			if (x.slice(i, i + endOfCDATA.length) === endOfCDATA) {
+				insideOfCDATA = false;
+				i += endOfCDATA.length;
+			} else {
+				const b = x[i++];
+				builder += map[b] || b;
+			}
+		}
+	}
+	return builder;
+}
+
+export function escapeAttribute(x: string): string {
+	return Object.entries(map).reduce((a, [k, v]) => a.replace(k, v), x);
+}
diff --git a/packages/backend/src/misc/reaction-lib.ts b/packages/backend/src/misc/reaction-lib.ts
deleted file mode 100644
index fefc2781f3..0000000000
--- a/packages/backend/src/misc/reaction-lib.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-/* eslint-disable key-spacing */
-import { emojiRegex } from './emoji-regex.js';
-import { fetchMeta } from './fetch-meta.js';
-import { Emojis } from '@/models/index.js';
-import { toPunyNullable } from './convert-host.js';
-import { IsNull } from 'typeorm';
-
-const legacies: Record<string, string> = {
-	'like':     '👍',
-	'love':     '❤', // ここに記述する場合は異体字セレクタを入れない
-	'laugh':    '😆',
-	'hmm':      '🤔',
-	'surprise': '😮',
-	'congrats': '🎉',
-	'angry':    '💢',
-	'confused': '😥',
-	'rip':      '😇',
-	'pudding':  '🍮',
-	'star':     '⭐',
-};
-
-export async function getFallbackReaction(): Promise<string> {
-	const meta = await fetchMeta();
-	return meta.useStarForReactionFallback ? '⭐' : '👍';
-}
-
-export function convertLegacyReactions(reactions: Record<string, number>) {
-	const _reactions = {} as Record<string, number>;
-
-	for (const reaction of Object.keys(reactions)) {
-		if (reactions[reaction] <= 0) continue;
-
-		if (Object.keys(legacies).includes(reaction)) {
-			if (_reactions[legacies[reaction]]) {
-				_reactions[legacies[reaction]] += reactions[reaction];
-			} else {
-				_reactions[legacies[reaction]] = reactions[reaction];
-			}
-		} else {
-			if (_reactions[reaction]) {
-				_reactions[reaction] += reactions[reaction];
-			} else {
-				_reactions[reaction] = reactions[reaction];
-			}
-		}
-	}
-
-	const _reactions2 = {} as Record<string, number>;
-
-	for (const reaction of Object.keys(_reactions)) {
-		_reactions2[decodeReaction(reaction).reaction] = _reactions[reaction];
-	}
-
-	return _reactions2;
-}
-
-export async function toDbReaction(reaction?: string | null, reacterHost?: string | null): Promise<string> {
-	if (reaction == null) return await getFallbackReaction();
-
-	reacterHost = toPunyNullable(reacterHost);
-
-	// 文字列タイプのリアクションを絵文字に変換
-	if (Object.keys(legacies).includes(reaction)) return legacies[reaction];
-
-	// Unicode絵文字
-	const match = emojiRegex.exec(reaction);
-	if (match) {
-		// 合字を含む1つの絵文字
-		const unicode = match[0];
-
-		// 異体字セレクタ除去
-		return unicode.match('\u200d') ? unicode : unicode.replace(/\ufe0f/g, '');
-	}
-
-	const custom = reaction.match(/^:([\w+-]+)(?:@\.)?:$/);
-	if (custom) {
-		const name = custom[1];
-		const emoji = await Emojis.findOneBy({
-			host: reacterHost ?? IsNull(),
-			name,
-		});
-
-		if (emoji) return reacterHost ? `:${name}@${reacterHost}:` : `:${name}:`;
-	}
-
-	return await getFallbackReaction();
-}
-
-type DecodedReaction = {
-	/**
-	 * リアクション名 (Unicode Emoji or ':name@hostname' or ':name@.')
-	 */
-	reaction: string;
-
-	/**
-	 * name (カスタム絵文字の場合name, Emojiクエリに使う)
-	 */
-	name?: string;
-
-	/**
-	 * host (カスタム絵文字の場合host, Emojiクエリに使う)
-	 */
-	host?: string | null;
-};
-
-export function decodeReaction(str: string): DecodedReaction {
-	const custom = str.match(/^:([\w+-]+)(?:@([\w.-]+))?:$/);
-
-	if (custom) {
-		const name = custom[1];
-		const host = custom[2] || null;
-
-		return {
-			reaction: `:${name}@${host || '.'}:`,	// ローカル分は@以降を省略するのではなく.にする
-			name,
-			host,
-		};
-	}
-
-	return {
-		reaction: str,
-		name: undefined,
-		host: undefined,
-	};
-}
-
-export function convertLegacyReaction(reaction: string): string {
-	reaction = decodeReaction(reaction).reaction;
-	if (Object.keys(legacies).includes(reaction)) return legacies[reaction];
-	return reaction;
-}
diff --git a/packages/backend/src/misc/reset-db.ts b/packages/backend/src/misc/reset-db.ts
new file mode 100644
index 0000000000..835cd2ba28
--- /dev/null
+++ b/packages/backend/src/misc/reset-db.ts
@@ -0,0 +1,28 @@
+import type { DataSource } from 'typeorm';
+
+export async function resetDb(db: DataSource) {
+	const reset = async () => {
+		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')
+			AND C.relkind = 'r'
+			AND nspname !~ '^pg_toast';`);
+		for (const table of tables) {
+			await db.query(`DELETE FROM "${table.table}" CASCADE`);
+		}
+	};
+
+	for (let i = 1; i <= 3; i++) {
+		try {
+			await reset();
+		} catch (e) {
+			if (i === 3) {
+				throw e;
+			} else {
+				await new Promise(resolve => setTimeout(resolve, 1000));
+				continue;
+			}
+		}
+		break;
+	}
+}
diff --git a/packages/backend/src/misc/show-machine-info.ts b/packages/backend/src/misc/show-machine-info.ts
index bc71cfbe96..bfb1b85f33 100644
--- a/packages/backend/src/misc/show-machine-info.ts
+++ b/packages/backend/src/misc/show-machine-info.ts
@@ -1,6 +1,6 @@
 import * as os from 'node:os';
 import sysUtils from 'systeminformation';
-import Logger from '@/services/logger.js';
+import Logger from '@/core/logger.js';
 
 export async function showMachineInfo(parentLogger: Logger) {
 	const logger = parentLogger.createSubLogger('machine');
diff --git a/packages/backend/src/misc/status-error.ts b/packages/backend/src/misc/status-error.ts
new file mode 100644
index 0000000000..0a33f8acaf
--- /dev/null
+++ b/packages/backend/src/misc/status-error.ts
@@ -0,0 +1,13 @@
+export class StatusError extends Error {
+	public statusCode: number;
+	public statusMessage?: string;
+	public isClientError: boolean;
+
+	constructor(message: string, statusCode: number, statusMessage?: string) {
+		super(message);
+		this.name = 'StatusError';
+		this.statusCode = statusCode;
+		this.statusMessage = statusMessage;
+		this.isClientError = typeof this.statusCode === 'number' && this.statusCode >= 400 && this.statusCode < 500;
+	}
+}
diff --git a/packages/backend/src/misc/webhook-cache.ts b/packages/backend/src/misc/webhook-cache.ts
deleted file mode 100644
index 4bd2333661..0000000000
--- a/packages/backend/src/misc/webhook-cache.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Webhooks } from '@/models/index.js';
-import { Webhook } from '@/models/entities/webhook.js';
-import { subsdcriber } from '../db/redis.js';
-
-let webhooksFetched = false;
-let webhooks: Webhook[] = [];
-
-export async function getActiveWebhooks() {
-	if (!webhooksFetched) {
-		webhooks = await Webhooks.findBy({
-			active: true,
-		});
-		webhooksFetched = true;
-	}
-
-	return webhooks;
-}
-
-subsdcriber.on('message', async (_, data) => {
-	const obj = JSON.parse(data);
-
-	if (obj.channel === 'internal') {
-		const { type, body } = obj.message;
-		switch (type) {
-			case 'webhookCreated':
-				if (body.active) {
-					webhooks.push(body);
-				}
-				break;
-			case 'webhookUpdated':
-				if (body.active) {
-					const i = webhooks.findIndex(a => a.id === body.id);
-					if (i > -1) {
-						webhooks[i] = body;
-					} else {
-						webhooks.push(body);
-					}
-				} else {
-					webhooks = webhooks.filter(a => a.id !== body.id);
-				}
-				break;
-			case 'webhookDeleted':
-				webhooks = webhooks.filter(a => a.id !== body.id);
-				break;
-			default:
-				break;
-		}
-	}
-});
diff --git a/packages/backend/src/models/entities/AbuseUserReport.ts b/packages/backend/src/models/entities/AbuseUserReport.ts
new file mode 100644
index 0000000000..07305cf23a
--- /dev/null
+++ b/packages/backend/src/models/entities/AbuseUserReport.ts
@@ -0,0 +1,79 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+export class AbuseUserReport {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the AbuseUserReport.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column(id())
+	public targetUserId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public targetUser: User | null;
+
+	@Index()
+	@Column(id())
+	public reporterId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public reporter: User | null;
+
+	@Column({
+		...id(),
+		nullable: true,
+	})
+	public assigneeId: User['id'] | null;
+
+	@ManyToOne(type => User, {
+		onDelete: 'SET NULL',
+	})
+	@JoinColumn()
+	public assignee: User | null;
+
+	@Index()
+	@Column('boolean', {
+		default: false,
+	})
+	public resolved: boolean;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public forwarded: boolean;
+
+	@Column('varchar', {
+		length: 2048,
+	})
+	public comment: string;
+
+	//#region Denormalized fields
+	@Index()
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public targetUserHost: string | null;
+
+	@Index()
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public reporterHost: string | null;
+	//#endregion
+}
diff --git a/packages/backend/src/models/entities/AccessToken.ts b/packages/backend/src/models/entities/AccessToken.ts
new file mode 100644
index 0000000000..8e987ffeef
--- /dev/null
+++ b/packages/backend/src/models/entities/AccessToken.ts
@@ -0,0 +1,90 @@
+import { Entity, PrimaryColumn, Index, Column, ManyToOne, JoinColumn } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { App } from './App.js';
+
+@Entity()
+export class AccessToken {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the AccessToken.',
+	})
+	public createdAt: Date;
+
+	@Column('timestamp with time zone', {
+		nullable: true,
+	})
+	public lastUsedAt: Date | null;
+
+	@Index()
+	@Column('varchar', {
+		length: 128,
+	})
+	public token: string;
+
+	@Index()
+	@Column('varchar', {
+		length: 128,
+		nullable: true,
+	})
+	public session: string | null;
+
+	@Index()
+	@Column('varchar', {
+		length: 128,
+	})
+	public hash: string;
+
+	@Index()
+	@Column(id())
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column({
+		...id(),
+		nullable: true,
+	})
+	public appId: App['id'] | null;
+
+	@ManyToOne(type => App, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public app: App | null;
+
+	@Column('varchar', {
+		length: 128,
+		nullable: true,
+	})
+	public name: string | null;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+	})
+	public description: string | null;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+	})
+	public iconUrl: string | null;
+
+	@Column('varchar', {
+		length: 64, array: true,
+		default: '{}',
+	})
+	public permission: string[];
+
+	@Column('boolean', {
+		default: false,
+	})
+	public fetched: boolean;
+}
diff --git a/packages/backend/src/models/entities/Ad.ts b/packages/backend/src/models/entities/Ad.ts
new file mode 100644
index 0000000000..36b758f205
--- /dev/null
+++ b/packages/backend/src/models/entities/Ad.ts
@@ -0,0 +1,59 @@
+import { Entity, Index, Column, PrimaryColumn } from 'typeorm';
+import { id } from '../id.js';
+
+@Entity()
+export class Ad {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the Ad.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The expired date of the Ad.',
+	})
+	public expiresAt: Date;
+
+	@Column('varchar', {
+		length: 32, nullable: false,
+	})
+	public place: string;
+
+	// 今は使われていないが将来的に活用される可能性はある
+	@Column('varchar', {
+		length: 32, nullable: false,
+	})
+	public priority: string;
+
+	@Column('integer', {
+		default: 1, nullable: false,
+	})
+	public ratio: number;
+
+	@Column('varchar', {
+		length: 1024, nullable: false,
+	})
+	public url: string;
+
+	@Column('varchar', {
+		length: 1024, nullable: false,
+	})
+	public imageUrl: string;
+
+	@Column('varchar', {
+		length: 8192, nullable: false,
+	})
+	public memo: string;
+
+	constructor(data: Partial<Ad>) {
+		if (data == null) return;
+
+		for (const [k, v] of Object.entries(data)) {
+			(this as any)[k] = v;
+		}
+	}
+}
diff --git a/packages/backend/src/models/entities/Announcement.ts b/packages/backend/src/models/entities/Announcement.ts
new file mode 100644
index 0000000000..beb2f82462
--- /dev/null
+++ b/packages/backend/src/models/entities/Announcement.ts
@@ -0,0 +1,43 @@
+import { Entity, Index, Column, PrimaryColumn } from 'typeorm';
+import { id } from '../id.js';
+
+@Entity()
+export class Announcement {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the Announcement.',
+	})
+	public createdAt: Date;
+
+	@Column('timestamp with time zone', {
+		comment: 'The updated date of the Announcement.',
+		nullable: true,
+	})
+	public updatedAt: Date | null;
+
+	@Column('varchar', {
+		length: 8192, nullable: false,
+	})
+	public text: string;
+
+	@Column('varchar', {
+		length: 256, nullable: false,
+	})
+	public title: string;
+
+	@Column('varchar', {
+		length: 1024, nullable: true,
+	})
+	public imageUrl: string | null;
+
+	constructor(data: Partial<Announcement>) {
+		if (data == null) return;
+
+		for (const [k, v] of Object.entries(data)) {
+			(this as any)[k] = v;
+		}
+	}
+}
diff --git a/packages/backend/src/models/entities/AnnouncementRead.ts b/packages/backend/src/models/entities/AnnouncementRead.ts
new file mode 100644
index 0000000000..72cf688800
--- /dev/null
+++ b/packages/backend/src/models/entities/AnnouncementRead.ts
@@ -0,0 +1,36 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { Announcement } from './Announcement.js';
+
+@Entity()
+@Index(['userId', 'announcementId'], { unique: true })
+export class AnnouncementRead {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the AnnouncementRead.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column(id())
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Index()
+	@Column(id())
+	public announcementId: Announcement['id'];
+
+	@ManyToOne(type => Announcement, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public announcement: Announcement | null;
+}
diff --git a/packages/backend/src/models/entities/Antenna.ts b/packages/backend/src/models/entities/Antenna.ts
new file mode 100644
index 0000000000..860fd9cf55
--- /dev/null
+++ b/packages/backend/src/models/entities/Antenna.ts
@@ -0,0 +1,99 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { UserList } from './UserList.js';
+import { UserGroupJoining } from './UserGroupJoining.js';
+
+@Entity()
+export class Antenna {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the Antenna.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The owner ID.',
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column('varchar', {
+		length: 128,
+		comment: 'The name of the Antenna.',
+	})
+	public name: string;
+
+	@Column('enum', { enum: ['home', 'all', 'users', 'list', 'group'] })
+	public src: 'home' | 'all' | 'users' | 'list' | 'group';
+
+	@Column({
+		...id(),
+		nullable: true,
+	})
+	public userListId: UserList['id'] | null;
+
+	@ManyToOne(type => UserList, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public userList: UserList | null;
+
+	@Column({
+		...id(),
+		nullable: true,
+	})
+	public userGroupJoiningId: UserGroupJoining['id'] | null;
+
+	@ManyToOne(type => UserGroupJoining, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public userGroupJoining: UserGroupJoining | null;
+
+	@Column('varchar', {
+		length: 1024, array: true,
+		default: '{}',
+	})
+	public users: string[];
+
+	@Column('jsonb', {
+		default: [],
+	})
+	public keywords: string[][];
+
+	@Column('jsonb', {
+		default: [],
+	})
+	public excludeKeywords: string[][];
+
+	@Column('boolean', {
+		default: false,
+	})
+	public caseSensitive: boolean;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public withReplies: boolean;
+
+	@Column('boolean')
+	public withFile: boolean;
+
+	@Column('varchar', {
+		length: 2048, nullable: true,
+	})
+	public expression: string | null;
+
+	@Column('boolean')
+	public notify: boolean;
+}
diff --git a/packages/backend/src/models/entities/AntennaNote.ts b/packages/backend/src/models/entities/AntennaNote.ts
new file mode 100644
index 0000000000..5524a89367
--- /dev/null
+++ b/packages/backend/src/models/entities/AntennaNote.ts
@@ -0,0 +1,43 @@
+import { Entity, Index, JoinColumn, Column, ManyToOne, PrimaryColumn } from 'typeorm';
+import { id } from '../id.js';
+import { Note } from './Note.js';
+import { Antenna } from './Antenna.js';
+
+@Entity()
+@Index(['noteId', 'antennaId'], { unique: true })
+export class AntennaNote {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The note ID.',
+	})
+	public noteId: Note['id'];
+
+	@ManyToOne(type => Note, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public note: Note | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The antenna ID.',
+	})
+	public antennaId: Antenna['id'];
+
+	@ManyToOne(type => Antenna, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public antenna: Antenna | null;
+
+	@Index()
+	@Column('boolean', {
+		default: false,
+	})
+	public read: boolean;
+}
diff --git a/packages/backend/src/models/entities/App.ts b/packages/backend/src/models/entities/App.ts
new file mode 100644
index 0000000000..3a1ea7732e
--- /dev/null
+++ b/packages/backend/src/models/entities/App.ts
@@ -0,0 +1,60 @@
+import { Entity, PrimaryColumn, Column, Index, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+export class App {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the App.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		nullable: true,
+		comment: 'The owner ID.',
+	})
+	public userId: User['id'] | null;
+
+	@ManyToOne(type => User, {
+		onDelete: 'SET NULL',
+		nullable: true,
+	})
+	public user: User | null;
+
+	@Index()
+	@Column('varchar', {
+		length: 64,
+		comment: 'The secret key of the App.',
+	})
+	public secret: string;
+
+	@Column('varchar', {
+		length: 128,
+		comment: 'The name of the App.',
+	})
+	public name: string;
+
+	@Column('varchar', {
+		length: 512,
+		comment: 'The description of the App.',
+	})
+	public description: string;
+
+	@Column('varchar', {
+		length: 64, array: true,
+		comment: 'The permission of the App.',
+	})
+	public permission: string[];
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: 'The callbackUrl of the App.',
+	})
+	public callbackUrl: string | null;
+}
diff --git a/packages/backend/src/models/entities/AttestationChallenge.ts b/packages/backend/src/models/entities/AttestationChallenge.ts
new file mode 100644
index 0000000000..4795642657
--- /dev/null
+++ b/packages/backend/src/models/entities/AttestationChallenge.ts
@@ -0,0 +1,46 @@
+import { PrimaryColumn, Entity, JoinColumn, Column, ManyToOne, Index } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+export class AttestationChallenge {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@PrimaryColumn(id())
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Index()
+	@Column('varchar', {
+		length: 64,
+		comment: 'Hex-encoded sha256 hash of the challenge.',
+	})
+	public challenge: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The date challenge was created for expiry purposes.',
+	})
+	public createdAt: Date;
+
+	@Column('boolean', {
+		comment:
+			'Indicates that the challenge is only for registration purposes if true to prevent the challenge for being used as authentication.',
+		default: false,
+	})
+	public registrationChallenge: boolean;
+
+	constructor(data: Partial<AttestationChallenge>) {
+		if (data == null) return;
+
+		for (const [k, v] of Object.entries(data)) {
+			(this as any)[k] = v;
+		}
+	}
+}
diff --git a/packages/backend/src/models/entities/AuthSession.ts b/packages/backend/src/models/entities/AuthSession.ts
new file mode 100644
index 0000000000..6b2f50e8d6
--- /dev/null
+++ b/packages/backend/src/models/entities/AuthSession.ts
@@ -0,0 +1,43 @@
+import { Entity, PrimaryColumn, Index, Column, ManyToOne, JoinColumn } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { App } from './App.js';
+
+@Entity()
+export class AuthSession {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the AuthSession.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column('varchar', {
+		length: 128,
+	})
+	public token: string;
+
+	@Column({
+		...id(),
+		nullable: true,
+	})
+	public userId: User['id'] | null;
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+		nullable: true,
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column(id())
+	public appId: App['id'];
+
+	@ManyToOne(type => App, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public app: App | null;
+}
diff --git a/packages/backend/src/models/entities/Blocking.ts b/packages/backend/src/models/entities/Blocking.ts
new file mode 100644
index 0000000000..9892ff308e
--- /dev/null
+++ b/packages/backend/src/models/entities/Blocking.ts
@@ -0,0 +1,42 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+@Index(['blockerId', 'blockeeId'], { unique: true })
+export class Blocking {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the Blocking.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The blockee user ID.',
+	})
+	public blockeeId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public blockee: User | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The blocker user ID.',
+	})
+	public blockerId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public blocker: User | null;
+}
diff --git a/packages/backend/src/models/entities/Channel.ts b/packages/backend/src/models/entities/Channel.ts
new file mode 100644
index 0000000000..a6e32d54f7
--- /dev/null
+++ b/packages/backend/src/models/entities/Channel.ts
@@ -0,0 +1,75 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { DriveFile } from './DriveFile.js';
+
+@Entity()
+export class Channel {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the Channel.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		nullable: true,
+	})
+	public lastNotedAt: Date | null;
+
+	@Index()
+	@Column({
+		...id(),
+		nullable: true,
+		comment: 'The owner ID.',
+	})
+	public userId: User['id'] | null;
+
+	@ManyToOne(type => User, {
+		onDelete: 'SET NULL',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column('varchar', {
+		length: 128,
+		comment: 'The name of the Channel.',
+	})
+	public name: string;
+
+	@Column('varchar', {
+		length: 2048, nullable: true,
+		comment: 'The description of the Channel.',
+	})
+	public description: string | null;
+
+	@Column({
+		...id(),
+		nullable: true,
+		comment: 'The ID of banner Channel.',
+	})
+	public bannerId: DriveFile['id'] | null;
+
+	@ManyToOne(type => DriveFile, {
+		onDelete: 'SET NULL',
+	})
+	@JoinColumn()
+	public banner: DriveFile | null;
+
+	@Index()
+	@Column('integer', {
+		default: 0,
+		comment: 'The count of notes.',
+	})
+	public notesCount: number;
+
+	@Index()
+	@Column('integer', {
+		default: 0,
+		comment: 'The count of users.',
+	})
+	public usersCount: number;
+}
diff --git a/packages/backend/src/models/entities/ChannelFollowing.ts b/packages/backend/src/models/entities/ChannelFollowing.ts
new file mode 100644
index 0000000000..c65c38b67d
--- /dev/null
+++ b/packages/backend/src/models/entities/ChannelFollowing.ts
@@ -0,0 +1,43 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { Channel } from './Channel.js';
+
+@Entity()
+@Index(['followerId', 'followeeId'], { unique: true })
+export class ChannelFollowing {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the ChannelFollowing.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The followee channel ID.',
+	})
+	public followeeId: Channel['id'];
+
+	@ManyToOne(type => Channel, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public followee: Channel | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The follower user ID.',
+	})
+	public followerId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public follower: User | null;
+}
diff --git a/packages/backend/src/models/entities/ChannelNotePining.ts b/packages/backend/src/models/entities/ChannelNotePining.ts
new file mode 100644
index 0000000000..ab5796626a
--- /dev/null
+++ b/packages/backend/src/models/entities/ChannelNotePining.ts
@@ -0,0 +1,35 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { Note } from './Note.js';
+import { Channel } from './Channel.js';
+
+@Entity()
+@Index(['channelId', 'noteId'], { unique: true })
+export class ChannelNotePining {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the ChannelNotePining.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column(id())
+	public channelId: Channel['id'];
+
+	@ManyToOne(type => Channel, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public channel: Channel | null;
+
+	@Column(id())
+	public noteId: Note['id'];
+
+	@ManyToOne(type => Note, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public note: Note | null;
+}
diff --git a/packages/backend/src/models/entities/Clip.ts b/packages/backend/src/models/entities/Clip.ts
new file mode 100644
index 0000000000..57a310ac03
--- /dev/null
+++ b/packages/backend/src/models/entities/Clip.ts
@@ -0,0 +1,44 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+export class Clip {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the Clip.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The owner ID.',
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column('varchar', {
+		length: 128,
+		comment: 'The name of the Clip.',
+	})
+	public name: string;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public isPublic: boolean;
+
+	@Column('varchar', {
+		length: 2048, nullable: true,
+		comment: 'The description of the Clip.',
+	})
+	public description: string | null;
+}
diff --git a/packages/backend/src/models/entities/ClipNote.ts b/packages/backend/src/models/entities/ClipNote.ts
new file mode 100644
index 0000000000..bc9ef4b874
--- /dev/null
+++ b/packages/backend/src/models/entities/ClipNote.ts
@@ -0,0 +1,37 @@
+import { Entity, Index, JoinColumn, Column, ManyToOne, PrimaryColumn } from 'typeorm';
+import { id } from '../id.js';
+import { Note } from './Note.js';
+import { Clip } from './Clip.js';
+
+@Entity()
+@Index(['noteId', 'clipId'], { unique: true })
+export class ClipNote {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The note ID.',
+	})
+	public noteId: Note['id'];
+
+	@ManyToOne(type => Note, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public note: Note | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The clip ID.',
+	})
+	public clipId: Clip['id'];
+
+	@ManyToOne(type => Clip, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public clip: Clip | null;
+}
diff --git a/packages/backend/src/models/entities/DriveFile.ts b/packages/backend/src/models/entities/DriveFile.ts
new file mode 100644
index 0000000000..7b9670fb92
--- /dev/null
+++ b/packages/backend/src/models/entities/DriveFile.ts
@@ -0,0 +1,192 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { DriveFolder } from './DriveFolder.js';
+
+@Entity()
+@Index(['userId', 'folderId', 'id'])
+export class DriveFile {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the DriveFile.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		nullable: true,
+		comment: 'The owner ID.',
+	})
+	public userId: User['id'] | null;
+
+	@ManyToOne(type => User, {
+		onDelete: 'SET NULL',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Index()
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: 'The host of owner. It will be null if the user in local.',
+	})
+	public userHost: string | null;
+
+	@Index()
+	@Column('varchar', {
+		length: 32,
+		comment: 'The MD5 hash of the DriveFile.',
+	})
+	public md5: string;
+
+	@Column('varchar', {
+		length: 256,
+		comment: 'The file name of the DriveFile.',
+	})
+	public name: string;
+
+	@Index()
+	@Column('varchar', {
+		length: 128,
+		comment: 'The content type (MIME) of the DriveFile.',
+	})
+	public type: string;
+
+	@Column('integer', {
+		comment: 'The file size (bytes) of the DriveFile.',
+	})
+	public size: number;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: 'The comment of the DriveFile.',
+	})
+	public comment: string | null;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: 'The BlurHash string.',
+	})
+	public blurhash: string | null;
+
+	@Column('jsonb', {
+		default: {},
+		comment: 'The any properties of the DriveFile. For example, it includes image width/height.',
+	})
+	public properties: { width?: number; height?: number; orientation?: number; avgColor?: string };
+
+	@Column('boolean')
+	public storedInternal: boolean;
+
+	@Column('varchar', {
+		length: 512,
+		comment: 'The URL of the DriveFile.',
+	})
+	public url: string;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: 'The URL of the thumbnail of the DriveFile.',
+	})
+	public thumbnailUrl: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: 'The URL of the webpublic of the DriveFile.',
+	})
+	public webpublicUrl: string | null;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+	})
+	public webpublicType: string | null;
+
+	@Index({ unique: true })
+	@Column('varchar', {
+		length: 256, nullable: true,
+	})
+	public accessKey: string | null;
+
+	@Index({ unique: true })
+	@Column('varchar', {
+		length: 256, nullable: true,
+	})
+	public thumbnailAccessKey: string | null;
+
+	@Index({ unique: true })
+	@Column('varchar', {
+		length: 256, nullable: true,
+	})
+	public webpublicAccessKey: string | null;
+
+	@Index()
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: 'The URI of the DriveFile. it will be null when the DriveFile is local.',
+	})
+	public uri: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+	})
+	public src: string | null;
+
+	@Index()
+	@Column({
+		...id(),
+		nullable: true,
+		comment: 'The parent folder ID. If null, it means the DriveFile is located in root.',
+	})
+	public folderId: DriveFolder['id'] | null;
+
+	@ManyToOne(type => DriveFolder, {
+		onDelete: 'SET NULL',
+	})
+	@JoinColumn()
+	public folder: DriveFolder | null;
+
+	@Index()
+	@Column('boolean', {
+		default: false,
+		comment: 'Whether the DriveFile is NSFW.',
+	})
+	public isSensitive: boolean;
+
+	@Index()
+	@Column('boolean', {
+		default: false,
+		comment: 'Whether the DriveFile is NSFW. (predict)',
+	})
+	public maybeSensitive: boolean;
+
+	@Index()
+	@Column('boolean', {
+		default: false,
+	})
+	public maybePorn: boolean;
+
+	/**
+	 * 外部の(信頼されていない)URLへの直リンクか否か
+	 */
+	@Index()
+	@Column('boolean', {
+		default: false,
+		comment: 'Whether the DriveFile is direct link to remote server.',
+	})
+	public isLink: boolean;
+
+	@Column('jsonb', {
+		default: {},
+		nullable: true,
+	})
+	public requestHeaders: Record<string, string> | null;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+	})
+	public requestIp: string | null;
+}
diff --git a/packages/backend/src/models/entities/DriveFolder.ts b/packages/backend/src/models/entities/DriveFolder.ts
new file mode 100644
index 0000000000..2a73a0875d
--- /dev/null
+++ b/packages/backend/src/models/entities/DriveFolder.ts
@@ -0,0 +1,49 @@
+import { JoinColumn, ManyToOne, Entity, PrimaryColumn, Index, Column } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+export class DriveFolder {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the DriveFolder.',
+	})
+	public createdAt: Date;
+
+	@Column('varchar', {
+		length: 128,
+		comment: 'The name of the DriveFolder.',
+	})
+	public name: string;
+
+	@Index()
+	@Column({
+		...id(),
+		nullable: true,
+		comment: 'The owner ID.',
+	})
+	public userId: User['id'] | null;
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Index()
+	@Column({
+		...id(),
+		nullable: true,
+		comment: 'The parent folder ID. If null, it means the DriveFolder is located in root.',
+	})
+	public parentId: DriveFolder['id'] | null;
+
+	@ManyToOne(type => DriveFolder, {
+		onDelete: 'SET NULL',
+	})
+	@JoinColumn()
+	public parent: DriveFolder | null;
+}
diff --git a/packages/backend/src/models/entities/Emoji.ts b/packages/backend/src/models/entities/Emoji.ts
new file mode 100644
index 0000000000..7332dd1857
--- /dev/null
+++ b/packages/backend/src/models/entities/Emoji.ts
@@ -0,0 +1,58 @@
+import { PrimaryColumn, Entity, Index, Column } from 'typeorm';
+import { id } from '../id.js';
+
+@Entity()
+@Index(['name', 'host'], { unique: true })
+export class Emoji {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		nullable: true,
+	})
+	public updatedAt: Date | null;
+
+	@Index()
+	@Column('varchar', {
+		length: 128,
+	})
+	public name: string;
+
+	@Index()
+	@Column('varchar', {
+		length: 128, nullable: true,
+	})
+	public host: string | null;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+	})
+	public category: string | null;
+
+	@Column('varchar', {
+		length: 512,
+	})
+	public originalUrl: string;
+
+	@Column('varchar', {
+		length: 512,
+		default: '',
+	})
+	public publicUrl: string;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+	})
+	public uri: string | null;
+
+	// publicUrlの方のtypeが入る
+	@Column('varchar', {
+		length: 64, nullable: true,
+	})
+	public type: string | null;
+
+	@Column('varchar', {
+		array: true, length: 128, default: '{}',
+	})
+	public aliases: string[];
+}
diff --git a/packages/backend/src/models/entities/FollowRequest.ts b/packages/backend/src/models/entities/FollowRequest.ts
new file mode 100644
index 0000000000..0988e7e504
--- /dev/null
+++ b/packages/backend/src/models/entities/FollowRequest.ts
@@ -0,0 +1,85 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+@Index(['followerId', 'followeeId'], { unique: true })
+export class FollowRequest {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the FollowRequest.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The followee user ID.',
+	})
+	public followeeId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public followee: User | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The follower user ID.',
+	})
+	public followerId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public follower: User | null;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: 'id of Follow Activity.',
+	})
+	public requestId: string | null;
+
+	//#region Denormalized fields
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public followerHost: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public followerInbox: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public followerSharedInbox: string | null;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public followeeHost: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public followeeInbox: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public followeeSharedInbox: string | null;
+	//#endregion
+}
diff --git a/packages/backend/src/models/entities/Following.ts b/packages/backend/src/models/entities/Following.ts
new file mode 100644
index 0000000000..112afd7e6e
--- /dev/null
+++ b/packages/backend/src/models/entities/Following.ts
@@ -0,0 +1,82 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+@Index(['followerId', 'followeeId'], { unique: true })
+export class Following {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the Following.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The followee user ID.',
+	})
+	public followeeId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public followee: User | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The follower user ID.',
+	})
+	public followerId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public follower: User | null;
+
+	//#region Denormalized fields
+	@Index()
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public followerHost: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public followerInbox: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public followerSharedInbox: string | null;
+
+	@Index()
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public followeeHost: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public followeeInbox: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public followeeSharedInbox: string | null;
+	//#endregion
+}
diff --git a/packages/backend/src/models/entities/GalleryLike.ts b/packages/backend/src/models/entities/GalleryLike.ts
new file mode 100644
index 0000000000..cc54b528e9
--- /dev/null
+++ b/packages/backend/src/models/entities/GalleryLike.ts
@@ -0,0 +1,33 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { GalleryPost } from './GalleryPost.js';
+
+@Entity()
+@Index(['userId', 'postId'], { unique: true })
+export class GalleryLike {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone')
+	public createdAt: Date;
+
+	@Index()
+	@Column(id())
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column(id())
+	public postId: GalleryPost['id'];
+
+	@ManyToOne(type => GalleryPost, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public post: GalleryPost | null;
+}
diff --git a/packages/backend/src/models/entities/GalleryPost.ts b/packages/backend/src/models/entities/GalleryPost.ts
new file mode 100644
index 0000000000..36e879afa7
--- /dev/null
+++ b/packages/backend/src/models/entities/GalleryPost.ts
@@ -0,0 +1,79 @@
+import { Entity, Index, JoinColumn, Column, PrimaryColumn, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import type { DriveFile } from './DriveFile.js';
+
+@Entity()
+export class GalleryPost {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the GalleryPost.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The updated date of the GalleryPost.',
+	})
+	public updatedAt: Date;
+
+	@Column('varchar', {
+		length: 256,
+	})
+	public title: string;
+
+	@Column('varchar', {
+		length: 2048, nullable: true,
+	})
+	public description: string | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The ID of author.',
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Index()
+	@Column({
+		...id(),
+		array: true, default: '{}',
+	})
+	public fileIds: DriveFile['id'][];
+
+	@Index()
+	@Column('boolean', {
+		default: false,
+		comment: 'Whether the post is sensitive.',
+	})
+	public isSensitive: boolean;
+
+	@Index()
+	@Column('integer', {
+		default: 0,
+	})
+	public likedCount: number;
+
+	@Index()
+	@Column('varchar', {
+		length: 128, array: true, default: '{}',
+	})
+	public tags: string[];
+
+	constructor(data: Partial<GalleryPost>) {
+		if (data == null) return;
+
+		for (const [k, v] of Object.entries(data)) {
+			(this as any)[k] = v;
+		}
+	}
+}
diff --git a/packages/backend/src/models/entities/Hashtag.ts b/packages/backend/src/models/entities/Hashtag.ts
new file mode 100644
index 0000000000..2d6bfaa045
--- /dev/null
+++ b/packages/backend/src/models/entities/Hashtag.ts
@@ -0,0 +1,87 @@
+import { Entity, PrimaryColumn, Index, Column } from 'typeorm';
+import { id } from '../id.js';
+import type { User } from './User.js';
+
+@Entity()
+export class Hashtag {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index({ unique: true })
+	@Column('varchar', {
+		length: 128,
+	})
+	public name: string;
+
+	@Column({
+		...id(),
+		array: true,
+	})
+	public mentionedUserIds: User['id'][];
+
+	@Index()
+	@Column('integer', {
+		default: 0,
+	})
+	public mentionedUsersCount: number;
+
+	@Column({
+		...id(),
+		array: true,
+	})
+	public mentionedLocalUserIds: User['id'][];
+
+	@Index()
+	@Column('integer', {
+		default: 0,
+	})
+	public mentionedLocalUsersCount: number;
+
+	@Column({
+		...id(),
+		array: true,
+	})
+	public mentionedRemoteUserIds: User['id'][];
+
+	@Index()
+	@Column('integer', {
+		default: 0,
+	})
+	public mentionedRemoteUsersCount: number;
+
+	@Column({
+		...id(),
+		array: true,
+	})
+	public attachedUserIds: User['id'][];
+
+	@Index()
+	@Column('integer', {
+		default: 0,
+	})
+	public attachedUsersCount: number;
+
+	@Column({
+		...id(),
+		array: true,
+	})
+	public attachedLocalUserIds: User['id'][];
+
+	@Index()
+	@Column('integer', {
+		default: 0,
+	})
+	public attachedLocalUsersCount: number;
+
+	@Column({
+		...id(),
+		array: true,
+	})
+	public attachedRemoteUserIds: User['id'][];
+
+	@Index()
+	@Column('integer', {
+		default: 0,
+	})
+	public attachedRemoteUsersCount: number;
+}
diff --git a/packages/backend/src/models/entities/Instance.ts b/packages/backend/src/models/entities/Instance.ts
new file mode 100644
index 0000000000..7ea9234384
--- /dev/null
+++ b/packages/backend/src/models/entities/Instance.ts
@@ -0,0 +1,164 @@
+import { Entity, PrimaryColumn, Index, Column } from 'typeorm';
+import { id } from '../id.js';
+
+@Entity()
+export class Instance {
+	@PrimaryColumn(id())
+	public id: string;
+
+	/**
+	 * このインスタンスを捕捉した日時
+	 */
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The caught date of the Instance.',
+	})
+	public caughtAt: Date;
+
+	/**
+	 * ホスト
+	 */
+	@Index({ unique: true })
+	@Column('varchar', {
+		length: 128,
+		comment: 'The host of the Instance.',
+	})
+	public host: string;
+
+	/**
+	 * インスタンスのユーザー数
+	 */
+	@Column('integer', {
+		default: 0,
+		comment: 'The count of the users of the Instance.',
+	})
+	public usersCount: number;
+
+	/**
+	 * インスタンスの投稿数
+	 */
+	@Column('integer', {
+		default: 0,
+		comment: 'The count of the notes of the Instance.',
+	})
+	public notesCount: number;
+
+	/**
+	 * このインスタンスのユーザーからフォローされている、自インスタンスのユーザーの数
+	 */
+	@Column('integer', {
+		default: 0,
+	})
+	public followingCount: number;
+
+	/**
+	 * このインスタンスのユーザーをフォローしている、自インスタンスのユーザーの数
+	 */
+	@Column('integer', {
+		default: 0,
+	})
+	public followersCount: number;
+
+	/**
+	 * 直近のリクエスト送信日時
+	 */
+	@Column('timestamp with time zone', {
+		nullable: true,
+	})
+	public latestRequestSentAt: Date | null;
+
+	/**
+	 * 直近のリクエスト送信時のHTTPステータスコード
+	 */
+	@Column('integer', {
+		nullable: true,
+	})
+	public latestStatus: number | null;
+
+	/**
+	 * 直近のリクエスト受信日時
+	 */
+	@Column('timestamp with time zone', {
+		nullable: true,
+	})
+	public latestRequestReceivedAt: Date | null;
+
+	/**
+	 * このインスタンスと最後にやり取りした日時
+	 */
+	@Column('timestamp with time zone')
+	public lastCommunicatedAt: Date;
+
+	/**
+	 * このインスタンスと不通かどうか
+	 */
+	@Column('boolean', {
+		default: false,
+	})
+	public isNotResponding: boolean;
+
+	/**
+	 * このインスタンスへの配信を停止するか
+	 */
+	@Index()
+	@Column('boolean', {
+		default: false,
+	})
+	public isSuspended: boolean;
+
+	@Column('varchar', {
+		length: 64, nullable: true,
+		comment: 'The software of the Instance.',
+	})
+	public softwareName: string | null;
+
+	@Column('varchar', {
+		length: 64, nullable: true,
+	})
+	public softwareVersion: string | null;
+
+	@Column('boolean', {
+		nullable: true,
+	})
+	public openRegistrations: boolean | null;
+
+	@Column('varchar', {
+		length: 256, nullable: true,
+	})
+	public name: string | null;
+
+	@Column('varchar', {
+		length: 4096, nullable: true,
+	})
+	public description: string | null;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+	})
+	public maintainerName: string | null;
+
+	@Column('varchar', {
+		length: 256, nullable: true,
+	})
+	public maintainerEmail: string | null;
+
+	@Column('varchar', {
+		length: 256, nullable: true,
+	})
+	public iconUrl: string | null;
+
+	@Column('varchar', {
+		length: 256, nullable: true,
+	})
+	public faviconUrl: string | null;
+
+	@Column('varchar', {
+		length: 64, nullable: true,
+	})
+	public themeColor: string | null;
+
+	@Column('timestamp with time zone', {
+		nullable: true,
+	})
+	public infoUpdatedAt: Date | null;
+}
diff --git a/packages/backend/src/models/entities/MessagingMessage.ts b/packages/backend/src/models/entities/MessagingMessage.ts
new file mode 100644
index 0000000000..69fc9815d4
--- /dev/null
+++ b/packages/backend/src/models/entities/MessagingMessage.ts
@@ -0,0 +1,89 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { DriveFile } from './DriveFile.js';
+import { UserGroup } from './UserGroup.js';
+
+@Entity()
+export class MessagingMessage {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the MessagingMessage.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The sender user ID.',
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Index()
+	@Column({
+		...id(), nullable: true,
+		comment: 'The recipient user ID.',
+	})
+	public recipientId: User['id'] | null;
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public recipient: User | null;
+
+	@Index()
+	@Column({
+		...id(), nullable: true,
+		comment: 'The recipient group ID.',
+	})
+	public groupId: UserGroup['id'] | null;
+
+	@ManyToOne(type => UserGroup, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public group: UserGroup | null;
+
+	@Column('varchar', {
+		length: 4096, nullable: true,
+	})
+	public text: string | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public isRead: boolean;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+	})
+	public uri: string | null;
+
+	@Column({
+		...id(),
+		array: true, default: '{}',
+	})
+	public reads: User['id'][];
+
+	@Column({
+		...id(),
+		nullable: true,
+	})
+	public fileId: DriveFile['id'] | null;
+
+	@ManyToOne(type => DriveFile, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public file: DriveFile | null;
+}
diff --git a/packages/backend/src/models/entities/Meta.ts b/packages/backend/src/models/entities/Meta.ts
new file mode 100644
index 0000000000..f528b7ac08
--- /dev/null
+++ b/packages/backend/src/models/entities/Meta.ts
@@ -0,0 +1,462 @@
+import { Entity, Column, PrimaryColumn, ManyToOne, JoinColumn } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import type { Clip } from './Clip.js';
+
+@Entity()
+export class Meta {
+	@PrimaryColumn({
+		type: 'varchar',
+		length: 32,
+	})
+	public id: string;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+	})
+	public name: string | null;
+
+	@Column('varchar', {
+		length: 1024, nullable: true,
+	})
+	public description: string | null;
+
+	/**
+	 * メンテナの名前
+	 */
+	@Column('varchar', {
+		length: 128, nullable: true,
+	})
+	public maintainerName: string | null;
+
+	/**
+	 * メンテナの連絡先
+	 */
+	@Column('varchar', {
+		length: 128, nullable: true,
+	})
+	public maintainerEmail: string | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public disableRegistration: boolean;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public disableLocalTimeline: boolean;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public disableGlobalTimeline: boolean;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public useStarForReactionFallback: boolean;
+
+	@Column('varchar', {
+		length: 64, array: true, default: '{}',
+	})
+	public langs: string[];
+
+	@Column('varchar', {
+		length: 256, array: true, default: '{}',
+	})
+	public pinnedUsers: string[];
+
+	@Column('varchar', {
+		length: 256, array: true, default: '{}',
+	})
+	public hiddenTags: string[];
+
+	@Column('varchar', {
+		length: 256, array: true, default: '{}',
+	})
+	public blockedHosts: string[];
+
+	@Column('varchar', {
+		length: 512, array: true, default: '{/featured,/channels,/explore,/pages,/about-misskey}',
+	})
+	public pinnedPages: string[];
+
+	@Column({
+		...id(),
+		nullable: true,
+	})
+	public pinnedClipId: Clip['id'] | null;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+	})
+	public themeColor: string | null;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+		default: '/assets/ai.png',
+	})
+	public mascotImageUrl: string | null;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+	})
+	public bannerUrl: string | null;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+	})
+	public backgroundImageUrl: string | null;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+	})
+	public logoImageUrl: string | null;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+		default: 'https://xn--931a.moe/aiart/yubitun.png',
+	})
+	public errorImageUrl: string | null;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+	})
+	public iconUrl: string | null;
+
+	@Column('boolean', {
+		default: true,
+	})
+	public cacheRemoteFiles: boolean;
+
+	@Column({
+		...id(),
+		nullable: true,
+	})
+	public proxyAccountId: User['id'] | null;
+
+	@ManyToOne(type => User, {
+		onDelete: 'SET NULL',
+	})
+	@JoinColumn()
+	public proxyAccount: User | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public emailRequiredForSignup: boolean;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public enableHcaptcha: boolean;
+
+	@Column('varchar', {
+		length: 64,
+		nullable: true,
+	})
+	public hcaptchaSiteKey: string | null;
+
+	@Column('varchar', {
+		length: 64,
+		nullable: true,
+	})
+	public hcaptchaSecretKey: string | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public enableRecaptcha: boolean;
+
+	@Column('varchar', {
+		length: 64,
+		nullable: true,
+	})
+	public recaptchaSiteKey: string | null;
+
+	@Column('varchar', {
+		length: 64,
+		nullable: true,
+	})
+	public recaptchaSecretKey: string | null;
+
+	@Column('enum', {
+		enum: ['none', 'all', 'local', 'remote'],
+		default: 'none',
+	})
+	public sensitiveMediaDetection: 'none' | 'all' | 'local' | 'remote';
+
+	@Column('enum', {
+		enum: ['medium', 'low', 'high', 'veryLow', 'veryHigh'],
+		default: 'medium',
+	})
+	public sensitiveMediaDetectionSensitivity: 'medium' | 'low' | 'high' | 'veryLow' | 'veryHigh';
+
+	@Column('boolean', {
+		default: false,
+	})
+	public setSensitiveFlagAutomatically: boolean;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public enableSensitiveMediaDetectionForVideos: boolean;
+
+	@Column('integer', {
+		default: 1024,
+		comment: 'Drive capacity of a local user (MB)',
+	})
+	public localDriveCapacityMb: number;
+
+	@Column('integer', {
+		default: 32,
+		comment: 'Drive capacity of a remote user (MB)',
+	})
+	public remoteDriveCapacityMb: number;
+
+	@Column('varchar', {
+		length: 128,
+		nullable: true,
+	})
+	public summalyProxy: string | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public enableEmail: boolean;
+
+	@Column('varchar', {
+		length: 128,
+		nullable: true,
+	})
+	public email: string | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public smtpSecure: boolean;
+
+	@Column('varchar', {
+		length: 128,
+		nullable: true,
+	})
+	public smtpHost: string | null;
+
+	@Column('integer', {
+		nullable: true,
+	})
+	public smtpPort: number | null;
+
+	@Column('varchar', {
+		length: 128,
+		nullable: true,
+	})
+	public smtpUser: string | null;
+
+	@Column('varchar', {
+		length: 128,
+		nullable: true,
+	})
+	public smtpPass: string | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public enableServiceWorker: boolean;
+
+	@Column('varchar', {
+		length: 128,
+		nullable: true,
+	})
+	public swPublicKey: string | null;
+
+	@Column('varchar', {
+		length: 128,
+		nullable: true,
+	})
+	public swPrivateKey: string | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public enableTwitterIntegration: boolean;
+
+	@Column('varchar', {
+		length: 128,
+		nullable: true,
+	})
+	public twitterConsumerKey: string | null;
+
+	@Column('varchar', {
+		length: 128,
+		nullable: true,
+	})
+	public twitterConsumerSecret: string | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public enableGithubIntegration: boolean;
+
+	@Column('varchar', {
+		length: 128,
+		nullable: true,
+	})
+	public githubClientId: string | null;
+
+	@Column('varchar', {
+		length: 128,
+		nullable: true,
+	})
+	public githubClientSecret: string | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public enableDiscordIntegration: boolean;
+
+	@Column('varchar', {
+		length: 128,
+		nullable: true,
+	})
+	public discordClientId: string | null;
+
+	@Column('varchar', {
+		length: 128,
+		nullable: true,
+	})
+	public discordClientSecret: string | null;
+
+	@Column('varchar', {
+		length: 128,
+		nullable: true,
+	})
+	public deeplAuthKey: string | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public deeplIsPro: boolean;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+	})
+	public ToSUrl: string | null;
+
+	@Column('varchar', {
+		length: 512,
+		default: 'https://github.com/misskey-dev/misskey',
+		nullable: false,
+	})
+	public repositoryUrl: string;
+
+	@Column('varchar', {
+		length: 512,
+		default: 'https://github.com/misskey-dev/misskey/issues/new',
+		nullable: true,
+	})
+	public feedbackUrl: string | null;
+
+	@Column('varchar', {
+		length: 8192,
+		nullable: true,
+	})
+	public defaultLightTheme: string | null;
+
+	@Column('varchar', {
+		length: 8192,
+		nullable: true,
+	})
+	public defaultDarkTheme: string | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public useObjectStorage: boolean;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+	})
+	public objectStorageBucket: string | null;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+	})
+	public objectStoragePrefix: string | null;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+	})
+	public objectStorageBaseUrl: string | null;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+	})
+	public objectStorageEndpoint: string | null;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+	})
+	public objectStorageRegion: string | null;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+	})
+	public objectStorageAccessKey: string | null;
+
+	@Column('varchar', {
+		length: 512,
+		nullable: true,
+	})
+	public objectStorageSecretKey: string | null;
+
+	@Column('integer', {
+		nullable: true,
+	})
+	public objectStoragePort: number | null;
+
+	@Column('boolean', {
+		default: true,
+	})
+	public objectStorageUseSSL: boolean;
+
+	@Column('boolean', {
+		default: true,
+	})
+	public objectStorageUseProxy: boolean;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public objectStorageSetPublicRead: boolean;
+
+	@Column('boolean', {
+		default: true,
+	})
+	public objectStorageS3ForcePathStyle: boolean;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public enableIpLogging: boolean;
+
+	@Column('boolean', {
+		default: true,
+	})
+	public enableActiveEmailValidation: boolean;
+}
diff --git a/packages/backend/src/models/entities/ModerationLog.ts b/packages/backend/src/models/entities/ModerationLog.ts
new file mode 100644
index 0000000000..ab6a226cf7
--- /dev/null
+++ b/packages/backend/src/models/entities/ModerationLog.ts
@@ -0,0 +1,32 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+export class ModerationLog {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the ModerationLog.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column(id())
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column('varchar', {
+		length: 128,
+	})
+	public type: string;
+
+	@Column('jsonb')
+	public info: Record<string, any>;
+}
diff --git a/packages/backend/src/models/entities/MutedNote.ts b/packages/backend/src/models/entities/MutedNote.ts
new file mode 100644
index 0000000000..78347d8917
--- /dev/null
+++ b/packages/backend/src/models/entities/MutedNote.ts
@@ -0,0 +1,48 @@
+import { Entity, Index, JoinColumn, Column, ManyToOne, PrimaryColumn } from 'typeorm';
+import { id } from '../id.js';
+import { mutedNoteReasons } from '../../types.js';
+import { Note } from './Note.js';
+import { User } from './User.js';
+
+@Entity()
+@Index(['noteId', 'userId'], { unique: true })
+export class MutedNote {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The note ID.',
+	})
+	public noteId: Note['id'];
+
+	@ManyToOne(type => Note, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public note: Note | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The user ID.',
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	/**
+	 * ミュートされた理由。
+	 */
+	@Index()
+	@Column('enum', {
+		enum: mutedNoteReasons,
+		comment: 'The reason of the MutedNote.',
+	})
+	public reason: typeof mutedNoteReasons[number];
+}
diff --git a/packages/backend/src/models/entities/Muting.ts b/packages/backend/src/models/entities/Muting.ts
new file mode 100644
index 0000000000..bf5498b96a
--- /dev/null
+++ b/packages/backend/src/models/entities/Muting.ts
@@ -0,0 +1,48 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+@Index(['muterId', 'muteeId'], { unique: true })
+export class Muting {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the Muting.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		nullable: true,
+	})
+	public expiresAt: Date | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The mutee user ID.',
+	})
+	public muteeId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public mutee: User | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The muter user ID.',
+	})
+	public muterId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public muter: User | null;
+}
diff --git a/packages/backend/src/models/entities/Note.ts b/packages/backend/src/models/entities/Note.ts
new file mode 100644
index 0000000000..f1a94bd9ce
--- /dev/null
+++ b/packages/backend/src/models/entities/Note.ts
@@ -0,0 +1,242 @@
+import { Entity, Index, JoinColumn, Column, PrimaryColumn, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { noteVisibilities } from '../../types.js';
+import { User } from './User.js';
+import { Channel } from './Channel.js';
+import type { DriveFile } from './DriveFile.js';
+
+@Entity()
+@Index('IDX_NOTE_TAGS', { synchronize: false })
+@Index('IDX_NOTE_MENTIONS', { synchronize: false })
+@Index('IDX_NOTE_VISIBLE_USER_IDS', { synchronize: false })
+export class Note {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the Note.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		nullable: true,
+		comment: 'The ID of reply target.',
+	})
+	public replyId: Note['id'] | null;
+
+	@ManyToOne(type => Note, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public reply: Note | null;
+
+	@Index()
+	@Column({
+		...id(),
+		nullable: true,
+		comment: 'The ID of renote target.',
+	})
+	public renoteId: Note['id'] | null;
+
+	@ManyToOne(type => Note, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public renote: Note | null;
+
+	@Index()
+	@Column('varchar', {
+		length: 256, nullable: true,
+	})
+	public threadId: string | null;
+
+	@Column('text', {
+		nullable: true,
+	})
+	public text: string | null;
+
+	@Column('varchar', {
+		length: 256, nullable: true,
+	})
+	public name: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+	})
+	public cw: string | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The ID of author.',
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public localOnly: boolean;
+
+	@Column('smallint', {
+		default: 0,
+	})
+	public renoteCount: number;
+
+	@Column('smallint', {
+		default: 0,
+	})
+	public repliesCount: number;
+
+	@Column('jsonb', {
+		default: {},
+	})
+	public reactions: Record<string, number>;
+
+	/**
+	 * public ... 公開
+	 * home ... ホームタイムライン(ユーザーページのタイムライン含む)のみに流す
+	 * followers ... フォロワーのみ
+	 * specified ... visibleUserIds で指定したユーザーのみ
+	 */
+	@Column('enum', { enum: noteVisibilities })
+	public visibility: typeof noteVisibilities[number];
+
+	@Index({ unique: true })
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: 'The URI of a note. it will be null when the note is local.',
+	})
+	public uri: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: 'The human readable url of a note. it will be null when the note is local.',
+	})
+	public url: string | null;
+
+	@Column('integer', {
+		default: 0, select: false,
+	})
+	public score: number;
+
+	@Index()
+	@Column({
+		...id(),
+		array: true, default: '{}',
+	})
+	public fileIds: DriveFile['id'][];
+
+	@Index()
+	@Column('varchar', {
+		length: 256, array: true, default: '{}',
+	})
+	public attachedFileTypes: string[];
+
+	@Index()
+	@Column({
+		...id(),
+		array: true, default: '{}',
+	})
+	public visibleUserIds: User['id'][];
+
+	@Index()
+	@Column({
+		...id(),
+		array: true, default: '{}',
+	})
+	public mentions: User['id'][];
+
+	@Column('text', {
+		default: '[]',
+	})
+	public mentionedRemoteUsers: string;
+
+	@Column('varchar', {
+		length: 128, array: true, default: '{}',
+	})
+	public emojis: string[];
+
+	@Index()
+	@Column('varchar', {
+		length: 128, array: true, default: '{}',
+	})
+	public tags: string[];
+
+	@Column('boolean', {
+		default: false,
+	})
+	public hasPoll: boolean;
+
+	@Index()
+	@Column({
+		...id(),
+		nullable: true,
+		comment: 'The ID of source channel.',
+	})
+	public channelId: Channel['id'] | null;
+
+	@ManyToOne(type => Channel, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public channel: Channel | null;
+
+	//#region Denormalized fields
+	@Index()
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public userHost: string | null;
+
+	@Column({
+		...id(),
+		nullable: true,
+		comment: '[Denormalized]',
+	})
+	public replyUserId: User['id'] | null;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public replyUserHost: string | null;
+
+	@Column({
+		...id(),
+		nullable: true,
+		comment: '[Denormalized]',
+	})
+	public renoteUserId: User['id'] | null;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public renoteUserHost: string | null;
+	//#endregion
+
+	constructor(data: Partial<Note>) {
+		if (data == null) return;
+
+		for (const [k, v] of Object.entries(data)) {
+			(this as any)[k] = v;
+		}
+	}
+}
+
+export type IMentionedRemoteUsers = {
+	uri: string;
+	url?: string;
+	username: string;
+	host: string;
+}[];
diff --git a/packages/backend/src/models/entities/NoteFavorite.ts b/packages/backend/src/models/entities/NoteFavorite.ts
new file mode 100644
index 0000000000..80c97cb531
--- /dev/null
+++ b/packages/backend/src/models/entities/NoteFavorite.ts
@@ -0,0 +1,35 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { Note } from './Note.js';
+import { User } from './User.js';
+
+@Entity()
+@Index(['userId', 'noteId'], { unique: true })
+export class NoteFavorite {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the NoteFavorite.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column(id())
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column(id())
+	public noteId: Note['id'];
+
+	@ManyToOne(type => Note, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public note: Note | null;
+}
diff --git a/packages/backend/src/models/entities/NoteReaction.ts b/packages/backend/src/models/entities/NoteReaction.ts
new file mode 100644
index 0000000000..c3c381af56
--- /dev/null
+++ b/packages/backend/src/models/entities/NoteReaction.ts
@@ -0,0 +1,44 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { Note } from './Note.js';
+
+@Entity()
+@Index(['userId', 'noteId'], { unique: true })
+export class NoteReaction {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the NoteReaction.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column(id())
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user?: User | null;
+
+	@Index()
+	@Column(id())
+	public noteId: Note['id'];
+
+	@ManyToOne(type => Note, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public note?: Note | null;
+
+	// TODO: 対象noteのuserIdを非正規化したい(「受け取ったリアクション一覧」のようなものを(JOIN無しで)実装したいため)
+
+	@Column('varchar', {
+		length: 260,
+	})
+	public reaction: string;
+}
diff --git a/packages/backend/src/models/entities/NoteThreadMuting.ts b/packages/backend/src/models/entities/NoteThreadMuting.ts
new file mode 100644
index 0000000000..a23176b994
--- /dev/null
+++ b/packages/backend/src/models/entities/NoteThreadMuting.ts
@@ -0,0 +1,33 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { Note } from './Note.js';
+
+@Entity()
+@Index(['userId', 'threadId'], { unique: true })
+export class NoteThreadMuting {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Index()
+	@Column('varchar', {
+		length: 256,
+	})
+	public threadId: string;
+}
diff --git a/packages/backend/src/models/entities/NoteUnread.ts b/packages/backend/src/models/entities/NoteUnread.ts
new file mode 100644
index 0000000000..af91234d0f
--- /dev/null
+++ b/packages/backend/src/models/entities/NoteUnread.ts
@@ -0,0 +1,63 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { Note } from './Note.js';
+import type { Channel } from './Channel.js';
+
+@Entity()
+@Index(['userId', 'noteId'], { unique: true })
+export class NoteUnread {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column(id())
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Index()
+	@Column(id())
+	public noteId: Note['id'];
+
+	@ManyToOne(type => Note, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public note: Note | null;
+
+	/**
+	 * メンションか否か
+	 */
+	@Index()
+	@Column('boolean')
+	public isMentioned: boolean;
+
+	/**
+	 * ダイレクト投稿か否か
+	 */
+	@Index()
+	@Column('boolean')
+	public isSpecified: boolean;
+
+	//#region Denormalized fields
+	@Index()
+	@Column({
+		...id(),
+		comment: '[Denormalized]',
+	})
+	public noteUserId: User['id'];
+
+	@Index()
+	@Column({
+		...id(),
+		nullable: true,
+		comment: '[Denormalized]',
+	})
+	public noteChannelId: Channel['id'] | null;
+	//#endregion
+}
diff --git a/packages/backend/src/models/entities/Notification.ts b/packages/backend/src/models/entities/Notification.ts
new file mode 100644
index 0000000000..53a7dda43a
--- /dev/null
+++ b/packages/backend/src/models/entities/Notification.ts
@@ -0,0 +1,173 @@
+import { Entity, Index, JoinColumn, ManyToOne, Column, PrimaryColumn } from 'typeorm';
+import { notificationTypes } from '@/types.js';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { Note } from './Note.js';
+import { FollowRequest } from './FollowRequest.js';
+import { UserGroupInvitation } from './UserGroupInvitation.js';
+import { AccessToken } from './AccessToken.js';
+
+@Entity()
+export class Notification {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the Notification.',
+	})
+	public createdAt: Date;
+
+	/**
+	 * 通知の受信者
+	 */
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The ID of recipient user of the Notification.',
+	})
+	public notifieeId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public notifiee: User | null;
+
+	/**
+	 * 通知の送信者(initiator)
+	 */
+	@Index()
+	@Column({
+		...id(),
+		nullable: true,
+		comment: 'The ID of sender user of the Notification.',
+	})
+	public notifierId: User['id'] | null;
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public notifier: User | null;
+
+	/**
+	 * 通知の種類。
+	 * follow - フォローされた
+	 * mention - 投稿で自分が言及された
+	 * reply - (自分または自分がWatchしている)投稿が返信された
+	 * renote - (自分または自分がWatchしている)投稿がRenoteされた
+	 * quote - (自分または自分がWatchしている)投稿が引用Renoteされた
+	 * reaction - (自分または自分がWatchしている)投稿にリアクションされた
+	 * pollVote - (自分または自分がWatchしている)投稿のアンケートに投票された
+	 * pollEnded - 自分のアンケートもしくは自分が投票したアンケートが終了した
+	 * receiveFollowRequest - フォローリクエストされた
+	 * followRequestAccepted - 自分の送ったフォローリクエストが承認された
+	 * groupInvited - グループに招待された
+	 * app - アプリ通知
+	 */
+	@Index()
+	@Column('enum', {
+		enum: notificationTypes,
+		comment: 'The type of the Notification.',
+	})
+	public type: typeof notificationTypes[number];
+
+	/**
+	 * 通知が読まれたかどうか
+	 */
+	@Index()
+	@Column('boolean', {
+		default: false,
+		comment: 'Whether the Notification is read.',
+	})
+	public isRead: boolean;
+
+	@Column({
+		...id(),
+		nullable: true,
+	})
+	public noteId: Note['id'] | null;
+
+	@ManyToOne(type => Note, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public note: Note | null;
+
+	@Column({
+		...id(),
+		nullable: true,
+	})
+	public followRequestId: FollowRequest['id'] | null;
+
+	@ManyToOne(type => FollowRequest, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public followRequest: FollowRequest | null;
+
+	@Column({
+		...id(),
+		nullable: true,
+	})
+	public userGroupInvitationId: UserGroupInvitation['id'] | null;
+
+	@ManyToOne(type => UserGroupInvitation, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public userGroupInvitation: UserGroupInvitation | null;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+	})
+	public reaction: string | null;
+
+	@Column('integer', {
+		nullable: true,
+	})
+	public choice: number | null;
+
+	/**
+	 * アプリ通知のbody
+	 */
+	@Column('varchar', {
+		length: 2048, nullable: true,
+	})
+	public customBody: string | null;
+
+	/**
+	 * アプリ通知のheader
+	 * (省略時はアプリ名で表示されることを期待)
+	 */
+	@Column('varchar', {
+		length: 256, nullable: true,
+	})
+	public customHeader: string | null;
+
+	/**
+	 * アプリ通知のicon(URL)
+	 * (省略時はアプリアイコンで表示されることを期待)
+	 */
+	@Column('varchar', {
+		length: 1024, nullable: true,
+	})
+	public customIcon: string | null;
+
+	/**
+	 * アプリ通知のアプリ(のトークン)
+	 */
+	@Index()
+	@Column({
+		...id(),
+		nullable: true,
+	})
+	public appAccessTokenId: AccessToken['id'] | null;
+
+	@ManyToOne(type => AccessToken, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public appAccessToken: AccessToken | null;
+}
diff --git a/packages/backend/src/models/entities/Page.ts b/packages/backend/src/models/entities/Page.ts
new file mode 100644
index 0000000000..6078bc1bc7
--- /dev/null
+++ b/packages/backend/src/models/entities/Page.ts
@@ -0,0 +1,121 @@
+import { Entity, Index, JoinColumn, Column, PrimaryColumn, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { DriveFile } from './DriveFile.js';
+
+@Entity()
+@Index(['userId', 'name'], { unique: true })
+export class Page {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the Page.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The updated date of the Page.',
+	})
+	public updatedAt: Date;
+
+	@Column('varchar', {
+		length: 256,
+	})
+	public title: string;
+
+	@Index()
+	@Column('varchar', {
+		length: 256,
+	})
+	public name: string;
+
+	@Column('varchar', {
+		length: 256, nullable: true,
+	})
+	public summary: string | null;
+
+	@Column('boolean')
+	public alignCenter: boolean;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public hideTitleWhenPinned: boolean;
+
+	@Column('varchar', {
+		length: 32,
+	})
+	public font: string;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The ID of author.',
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column({
+		...id(),
+		nullable: true,
+	})
+	public eyeCatchingImageId: DriveFile['id'] | null;
+
+	@ManyToOne(type => DriveFile, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public eyeCatchingImage: DriveFile | null;
+
+	@Column('jsonb', {
+		default: [],
+	})
+	public content: Record<string, any>[];
+
+	@Column('jsonb', {
+		default: [],
+	})
+	public variables: Record<string, any>[];
+
+	@Column('varchar', {
+		length: 16384,
+		default: '',
+	})
+	public script: string;
+
+	/**
+	 * public ... 公開
+	 * followers ... フォロワーのみ
+	 * specified ... visibleUserIds で指定したユーザーのみ
+	 */
+	@Column('enum', { enum: ['public', 'followers', 'specified'] })
+	public visibility: 'public' | 'followers' | 'specified';
+
+	@Index()
+	@Column({
+		...id(),
+		array: true, default: '{}',
+	})
+	public visibleUserIds: User['id'][];
+
+	@Column('integer', {
+		default: 0,
+	})
+	public likedCount: number;
+
+	constructor(data: Partial<Page>) {
+		if (data == null) return;
+
+		for (const [k, v] of Object.entries(data)) {
+			(this as any)[k] = v;
+		}
+	}
+}
diff --git a/packages/backend/src/models/entities/PageLike.ts b/packages/backend/src/models/entities/PageLike.ts
new file mode 100644
index 0000000000..f8c5943a3e
--- /dev/null
+++ b/packages/backend/src/models/entities/PageLike.ts
@@ -0,0 +1,33 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { Page } from './Page.js';
+
+@Entity()
+@Index(['userId', 'pageId'], { unique: true })
+export class PageLike {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone')
+	public createdAt: Date;
+
+	@Index()
+	@Column(id())
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column(id())
+	public pageId: Page['id'];
+
+	@ManyToOne(type => Page, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public page: Page | null;
+}
diff --git a/packages/backend/src/models/entities/PasswordResetRequest.ts b/packages/backend/src/models/entities/PasswordResetRequest.ts
new file mode 100644
index 0000000000..939fcc460f
--- /dev/null
+++ b/packages/backend/src/models/entities/PasswordResetRequest.ts
@@ -0,0 +1,30 @@
+import { PrimaryColumn, Entity, Index, Column, ManyToOne, JoinColumn } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+export class PasswordResetRequest {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone')
+	public createdAt: Date;
+
+	@Index({ unique: true })
+	@Column('varchar', {
+		length: 256,
+	})
+	public token: string;
+
+	@Index()
+	@Column({
+		...id(),
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+}
diff --git a/packages/backend/src/models/entities/Poll.ts b/packages/backend/src/models/entities/Poll.ts
new file mode 100644
index 0000000000..6641b435eb
--- /dev/null
+++ b/packages/backend/src/models/entities/Poll.ts
@@ -0,0 +1,72 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, OneToOne } from 'typeorm';
+import { id } from '../id.js';
+import { noteVisibilities } from '../../types.js';
+import { Note } from './Note.js';
+import type { User } from './User.js';
+
+@Entity()
+export class Poll {
+	@PrimaryColumn(id())
+	public noteId: Note['id'];
+
+	@OneToOne(type => Note, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public note: Note | null;
+
+	@Column('timestamp with time zone', {
+		nullable: true,
+	})
+	public expiresAt: Date | null;
+
+	@Column('boolean')
+	public multiple: boolean;
+
+	@Column('varchar', {
+		length: 128, array: true, default: '{}',
+	})
+	public choices: string[];
+
+	@Column('integer', {
+		array: true,
+	})
+	public votes: number[];
+
+	//#region Denormalized fields
+	@Column('enum', {
+		enum: noteVisibilities,
+		comment: '[Denormalized]',
+	})
+	public noteVisibility: typeof noteVisibilities[number];
+
+	@Index()
+	@Column({
+		...id(),
+		comment: '[Denormalized]',
+	})
+	public userId: User['id'];
+
+	@Index()
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public userHost: string | null;
+	//#endregion
+
+	constructor(data: Partial<Poll>) {
+		if (data == null) return;
+
+		for (const [k, v] of Object.entries(data)) {
+			(this as any)[k] = v;
+		}
+	}
+}
+
+export type IPoll = {
+	choices: string[];
+	votes?: number[];
+	multiple: boolean;
+	expiresAt: Date | null;
+};
diff --git a/packages/backend/src/models/entities/PollVote.ts b/packages/backend/src/models/entities/PollVote.ts
new file mode 100644
index 0000000000..d447a7be8f
--- /dev/null
+++ b/packages/backend/src/models/entities/PollVote.ts
@@ -0,0 +1,40 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { Note } from './Note.js';
+
+@Entity()
+@Index(['userId', 'noteId', 'choice'], { unique: true })
+export class PollVote {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the PollVote.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column(id())
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Index()
+	@Column(id())
+	public noteId: Note['id'];
+
+	@ManyToOne(type => Note, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public note: Note | null;
+
+	@Column('integer')
+	public choice: number;
+}
diff --git a/packages/backend/src/models/entities/PromoNote.ts b/packages/backend/src/models/entities/PromoNote.ts
new file mode 100644
index 0000000000..958008338a
--- /dev/null
+++ b/packages/backend/src/models/entities/PromoNote.ts
@@ -0,0 +1,28 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, OneToOne } from 'typeorm';
+import { id } from '../id.js';
+import { Note } from './Note.js';
+import type { User } from './User.js';
+
+@Entity()
+export class PromoNote {
+	@PrimaryColumn(id())
+	public noteId: Note['id'];
+
+	@OneToOne(type => Note, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public note: Note | null;
+
+	@Column('timestamp with time zone')
+	public expiresAt: Date;
+
+	//#region Denormalized fields
+	@Index()
+	@Column({
+		...id(),
+		comment: '[Denormalized]',
+	})
+	public userId: User['id'];
+	//#endregion
+}
diff --git a/packages/backend/src/models/entities/PromoRead.ts b/packages/backend/src/models/entities/PromoRead.ts
new file mode 100644
index 0000000000..27f5d0dc11
--- /dev/null
+++ b/packages/backend/src/models/entities/PromoRead.ts
@@ -0,0 +1,35 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { Note } from './Note.js';
+import { User } from './User.js';
+
+@Entity()
+@Index(['userId', 'noteId'], { unique: true })
+export class PromoRead {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the PromoRead.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column(id())
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column(id())
+	public noteId: Note['id'];
+
+	@ManyToOne(type => Note, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public note: Note | null;
+}
diff --git a/packages/backend/src/models/entities/RegistrationTickets.ts b/packages/backend/src/models/entities/RegistrationTickets.ts
new file mode 100644
index 0000000000..139e40f85e
--- /dev/null
+++ b/packages/backend/src/models/entities/RegistrationTickets.ts
@@ -0,0 +1,17 @@
+import { PrimaryColumn, Entity, Index, Column } from 'typeorm';
+import { id } from '../id.js';
+
+@Entity()
+export class RegistrationTicket {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone')
+	public createdAt: Date;
+
+	@Index({ unique: true })
+	@Column('varchar', {
+		length: 64,
+	})
+	public code: string;
+}
diff --git a/packages/backend/src/models/entities/RegistryItem.ts b/packages/backend/src/models/entities/RegistryItem.ts
new file mode 100644
index 0000000000..670a236ea0
--- /dev/null
+++ b/packages/backend/src/models/entities/RegistryItem.ts
@@ -0,0 +1,58 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+// TODO: 同じdomain、同じscope、同じkeyのレコードは二つ以上存在しないように制約付けたい
+@Entity()
+export class RegistryItem {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the RegistryItem.',
+	})
+	public createdAt: Date;
+
+	@Column('timestamp with time zone', {
+		comment: 'The updated date of the RegistryItem.',
+	})
+	public updatedAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The owner ID.',
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column('varchar', {
+		length: 1024,
+		comment: 'The key of the RegistryItem.',
+	})
+	public key: string;
+
+	@Column('jsonb', {
+		default: {}, nullable: true,
+		comment: 'The value of the RegistryItem.',
+	})
+	public value: any | null;
+
+	@Index()
+	@Column('varchar', {
+		length: 1024, array: true, default: '{}',
+	})
+	public scope: string[];
+
+	// サードパーティアプリに開放するときのためのカラム
+	@Index()
+	@Column('varchar', {
+		length: 512, nullable: true,
+	})
+	public domain: string | null;
+}
diff --git a/packages/backend/src/models/entities/Relay.ts b/packages/backend/src/models/entities/Relay.ts
new file mode 100644
index 0000000000..94d1929574
--- /dev/null
+++ b/packages/backend/src/models/entities/Relay.ts
@@ -0,0 +1,19 @@
+import { PrimaryColumn, Entity, Index, Column } from 'typeorm';
+import { id } from '../id.js';
+
+@Entity()
+export class Relay {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index({ unique: true })
+	@Column('varchar', {
+		length: 512, nullable: false,
+	})
+	public inbox: string;
+
+	@Column('enum', {
+		enum: ['requesting', 'accepted', 'rejected'],
+	})
+	public status: 'requesting' | 'accepted' | 'rejected';
+}
diff --git a/packages/backend/src/models/entities/Signin.ts b/packages/backend/src/models/entities/Signin.ts
new file mode 100644
index 0000000000..380bf028a6
--- /dev/null
+++ b/packages/backend/src/models/entities/Signin.ts
@@ -0,0 +1,35 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+export class Signin {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the Signin.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column(id())
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column('varchar', {
+		length: 128,
+	})
+	public ip: string;
+
+	@Column('jsonb')
+	public headers: Record<string, any>;
+
+	@Column('boolean')
+	public success: boolean;
+}
diff --git a/packages/backend/src/models/entities/SwSubscription.ts b/packages/backend/src/models/entities/SwSubscription.ts
new file mode 100644
index 0000000000..51b9786e96
--- /dev/null
+++ b/packages/backend/src/models/entities/SwSubscription.ts
@@ -0,0 +1,37 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+export class SwSubscription {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone')
+	public createdAt: Date;
+
+	@Index()
+	@Column(id())
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column('varchar', {
+		length: 512,
+	})
+	public endpoint: string;
+
+	@Column('varchar', {
+		length: 256,
+	})
+	public auth: string;
+
+	@Column('varchar', {
+		length: 128,
+	})
+	public publickey: string;
+}
diff --git a/packages/backend/src/models/entities/UsedUsername.ts b/packages/backend/src/models/entities/UsedUsername.ts
new file mode 100644
index 0000000000..eb90bef6ca
--- /dev/null
+++ b/packages/backend/src/models/entities/UsedUsername.ts
@@ -0,0 +1,20 @@
+import { PrimaryColumn, Entity, Column } from 'typeorm';
+
+@Entity()
+export class UsedUsername {
+	@PrimaryColumn('varchar', {
+		length: 128,
+	})
+	public username: string;
+
+	@Column('timestamp with time zone')
+	public createdAt: Date;
+
+	constructor(data: Partial<UsedUsername>) {
+		if (data == null) return;
+
+		for (const [k, v] of Object.entries(data)) {
+			(this as any)[k] = v;
+		}
+	}
+}
diff --git a/packages/backend/src/models/entities/User.ts b/packages/backend/src/models/entities/User.ts
new file mode 100644
index 0000000000..73736f0150
--- /dev/null
+++ b/packages/backend/src/models/entities/User.ts
@@ -0,0 +1,255 @@
+import { Entity, Column, Index, OneToOne, JoinColumn, PrimaryColumn } from 'typeorm';
+import { id } from '../id.js';
+import { DriveFile } from './DriveFile.js';
+
+@Entity()
+@Index(['usernameLower', 'host'], { unique: true })
+export class User {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the User.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		nullable: true,
+		comment: 'The updated date of the User.',
+	})
+	public updatedAt: Date | null;
+
+	@Column('timestamp with time zone', {
+		nullable: true,
+	})
+	public lastFetchedAt: Date | null;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		nullable: true,
+	})
+	public lastActiveDate: Date | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public hideOnlineStatus: boolean;
+
+	@Column('varchar', {
+		length: 128,
+		comment: 'The username of the User.',
+	})
+	public username: string;
+
+	@Index()
+	@Column('varchar', {
+		length: 128, select: false,
+		comment: 'The username (lowercased) of the User.',
+	})
+	public usernameLower: string;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: 'The name of the User.',
+	})
+	public name: string | null;
+
+	@Column('integer', {
+		default: 0,
+		comment: 'The count of followers.',
+	})
+	public followersCount: number;
+
+	@Column('integer', {
+		default: 0,
+		comment: 'The count of following.',
+	})
+	public followingCount: number;
+
+	@Column('integer', {
+		default: 0,
+		comment: 'The count of notes.',
+	})
+	public notesCount: number;
+
+	@Column({
+		...id(),
+		nullable: true,
+		comment: 'The ID of avatar DriveFile.',
+	})
+	public avatarId: DriveFile['id'] | null;
+
+	@OneToOne(type => DriveFile, {
+		onDelete: 'SET NULL',
+	})
+	@JoinColumn()
+	public avatar: DriveFile | null;
+
+	@Column({
+		...id(),
+		nullable: true,
+		comment: 'The ID of banner DriveFile.',
+	})
+	public bannerId: DriveFile['id'] | null;
+
+	@OneToOne(type => DriveFile, {
+		onDelete: 'SET NULL',
+	})
+	@JoinColumn()
+	public banner: DriveFile | null;
+
+	@Index()
+	@Column('varchar', {
+		length: 128, array: true, default: '{}',
+	})
+	public tags: string[];
+
+	@Column('boolean', {
+		default: false,
+		comment: 'Whether the User is suspended.',
+	})
+	public isSuspended: boolean;
+
+	@Column('boolean', {
+		default: false,
+		comment: 'Whether the User is silenced.',
+	})
+	public isSilenced: boolean;
+
+	@Column('boolean', {
+		default: false,
+		comment: 'Whether the User is locked.',
+	})
+	public isLocked: boolean;
+
+	@Column('boolean', {
+		default: false,
+		comment: 'Whether the User is a bot.',
+	})
+	public isBot: boolean;
+
+	@Column('boolean', {
+		default: false,
+		comment: 'Whether the User is a cat.',
+	})
+	public isCat: boolean;
+
+	@Column('boolean', {
+		default: false,
+		comment: 'Whether the User is the admin.',
+	})
+	public isAdmin: boolean;
+
+	@Column('boolean', {
+		default: false,
+		comment: 'Whether the User is a moderator.',
+	})
+	public isModerator: boolean;
+
+	@Index()
+	@Column('boolean', {
+		default: true,
+		comment: 'Whether the User is explorable.',
+	})
+	public isExplorable: boolean;
+
+	// アカウントが削除されたかどうかのフラグだが、完全に削除される際は物理削除なので実質削除されるまでの「削除が進行しているかどうか」のフラグ
+	@Column('boolean', {
+		default: false,
+		comment: 'Whether the User is deleted.',
+	})
+	public isDeleted: boolean;
+
+	@Column('varchar', {
+		length: 128, array: true, default: '{}',
+	})
+	public emojis: string[];
+
+	@Index()
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: 'The host of the User. It will be null if the origin of the user is local.',
+	})
+	public host: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: 'The inbox URL of the User. It will be null if the origin of the user is local.',
+	})
+	public inbox: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: 'The sharedInbox URL of the User. It will be null if the origin of the user is local.',
+	})
+	public sharedInbox: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: 'The featured URL of the User. It will be null if the origin of the user is local.',
+	})
+	public featured: string | null;
+
+	@Index()
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: 'The URI of the User. It will be null if the origin of the user is local.',
+	})
+	public uri: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: 'The URI of the user Follower Collection. It will be null if the origin of the user is local.',
+	})
+	public followersUri: string | null;
+
+	@Column('boolean', {
+		default: false,
+		comment: 'Whether to show users replying to other users in the timeline.',
+	})
+	public showTimelineReplies: boolean;
+
+	@Index({ unique: true })
+	@Column('char', {
+		length: 16, nullable: true, unique: true,
+		comment: 'The native access token of the User. It will be null if the origin of the user is local.',
+	})
+	public token: string | null;
+
+	@Column('integer', {
+		nullable: true,
+		comment: 'Overrides user drive capacity limit',
+	})
+	public driveCapacityOverrideMb: number | null;
+
+	constructor(data: Partial<User>) {
+		if (data == null) return;
+
+		for (const [k, v] of Object.entries(data)) {
+			(this as any)[k] = v;
+		}
+	}
+}
+
+export interface ILocalUser extends User {
+	host: null;
+}
+
+export interface IRemoteUser extends User {
+	host: string;
+}
+
+export type CacheableLocalUser = ILocalUser;
+
+export type CacheableRemoteUser = IRemoteUser;
+
+export type CacheableUser = CacheableLocalUser | CacheableRemoteUser;
+
+export const localUsernameSchema = { type: 'string', pattern: /^\w{1,20}$/.toString().slice(1, -1) } as const;
+export const passwordSchema = { type: 'string', minLength: 1 } as const;
+export const nameSchema = { type: 'string', minLength: 1, maxLength: 50 } as const;
+export const descriptionSchema = { type: 'string', minLength: 1, maxLength: 500 } as const;
+export const locationSchema = { type: 'string', minLength: 1, maxLength: 50 } as const;
+export const birthdaySchema = { type: 'string', pattern: /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/.toString().slice(1, -1) } as const;
diff --git a/packages/backend/src/models/entities/UserGroup.ts b/packages/backend/src/models/entities/UserGroup.ts
new file mode 100644
index 0000000000..328a1883cb
--- /dev/null
+++ b/packages/backend/src/models/entities/UserGroup.ts
@@ -0,0 +1,46 @@
+import { Entity, Index, JoinColumn, Column, PrimaryColumn, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+export class UserGroup {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Index()
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the UserGroup.',
+	})
+	public createdAt: Date;
+
+	@Column('varchar', {
+		length: 256,
+	})
+	public name: string;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The ID of owner.',
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public isPrivate: boolean;
+
+	constructor(data: Partial<UserGroup>) {
+		if (data == null) return;
+
+		for (const [k, v] of Object.entries(data)) {
+			(this as any)[k] = v;
+		}
+	}
+}
diff --git a/packages/backend/src/models/entities/UserGroupInvitation.ts b/packages/backend/src/models/entities/UserGroupInvitation.ts
new file mode 100644
index 0000000000..e4aa3ccae1
--- /dev/null
+++ b/packages/backend/src/models/entities/UserGroupInvitation.ts
@@ -0,0 +1,42 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { UserGroup } from './UserGroup.js';
+
+@Entity()
+@Index(['userId', 'userGroupId'], { unique: true })
+export class UserGroupInvitation {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the UserGroupInvitation.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The user ID.',
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The group ID.',
+	})
+	public userGroupId: UserGroup['id'];
+
+	@ManyToOne(type => UserGroup, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public userGroup: UserGroup | null;
+}
diff --git a/packages/backend/src/models/entities/UserGroupJoining.ts b/packages/backend/src/models/entities/UserGroupJoining.ts
new file mode 100644
index 0000000000..fae7241525
--- /dev/null
+++ b/packages/backend/src/models/entities/UserGroupJoining.ts
@@ -0,0 +1,42 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { UserGroup } from './UserGroup.js';
+
+@Entity()
+@Index(['userId', 'userGroupId'], { unique: true })
+export class UserGroupJoining {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the UserGroupJoining.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The user ID.',
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The group ID.',
+	})
+	public userGroupId: UserGroup['id'];
+
+	@ManyToOne(type => UserGroup, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public userGroup: UserGroup | null;
+}
diff --git a/packages/backend/src/models/entities/UserIp.ts b/packages/backend/src/models/entities/UserIp.ts
new file mode 100644
index 0000000000..e9afd40d49
--- /dev/null
+++ b/packages/backend/src/models/entities/UserIp.ts
@@ -0,0 +1,24 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne, PrimaryGeneratedColumn } from 'typeorm';
+import { id } from '../id.js';
+import { Note } from './Note.js';
+import type { User } from './User.js';
+
+@Entity()
+@Index(['userId', 'ip'], { unique: true })
+export class UserIp {
+	@PrimaryGeneratedColumn()
+	public id: string;
+
+	@Column('timestamp with time zone', {
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column(id())
+	public userId: User['id'];
+
+	@Column('varchar', {
+		length: 128,
+	})
+	public ip: string;
+}
diff --git a/packages/backend/src/models/entities/UserKeypair.ts b/packages/backend/src/models/entities/UserKeypair.ts
new file mode 100644
index 0000000000..3cd02d3c4f
--- /dev/null
+++ b/packages/backend/src/models/entities/UserKeypair.ts
@@ -0,0 +1,33 @@
+import { PrimaryColumn, Entity, JoinColumn, Column, OneToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+export class UserKeypair {
+	@PrimaryColumn(id())
+	public userId: User['id'];
+
+	@OneToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column('varchar', {
+		length: 4096,
+	})
+	public publicKey: string;
+
+	@Column('varchar', {
+		length: 4096,
+	})
+	public privateKey: string;
+
+	constructor(data: Partial<UserKeypair>) {
+		if (data == null) return;
+
+		for (const [k, v] of Object.entries(data)) {
+			(this as any)[k] = v;
+		}
+	}
+}
diff --git a/packages/backend/src/models/entities/UserList.ts b/packages/backend/src/models/entities/UserList.ts
new file mode 100644
index 0000000000..b8a4b54d4c
--- /dev/null
+++ b/packages/backend/src/models/entities/UserList.ts
@@ -0,0 +1,33 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+export class UserList {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the UserList.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The owner ID.',
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column('varchar', {
+		length: 128,
+		comment: 'The name of the UserList.',
+	})
+	public name: string;
+}
diff --git a/packages/backend/src/models/entities/UserListJoining.ts b/packages/backend/src/models/entities/UserListJoining.ts
new file mode 100644
index 0000000000..a40793a3e8
--- /dev/null
+++ b/packages/backend/src/models/entities/UserListJoining.ts
@@ -0,0 +1,42 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { UserList } from './UserList.js';
+
+@Entity()
+@Index(['userId', 'userListId'], { unique: true })
+export class UserListJoining {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the UserListJoining.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The user ID.',
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The list ID.',
+	})
+	public userListId: UserList['id'];
+
+	@ManyToOne(type => UserList, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public userList: UserList | null;
+}
diff --git a/packages/backend/src/models/entities/UserNotePining.ts b/packages/backend/src/models/entities/UserNotePining.ts
new file mode 100644
index 0000000000..fee95d4f7d
--- /dev/null
+++ b/packages/backend/src/models/entities/UserNotePining.ts
@@ -0,0 +1,35 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { Note } from './Note.js';
+import { User } from './User.js';
+
+@Entity()
+@Index(['userId', 'noteId'], { unique: true })
+export class UserNotePining {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the UserNotePinings.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column(id())
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column(id())
+	public noteId: Note['id'];
+
+	@ManyToOne(type => Note, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public note: Note | null;
+}
diff --git a/packages/backend/src/models/entities/UserPending.ts b/packages/backend/src/models/entities/UserPending.ts
new file mode 100644
index 0000000000..7637948841
--- /dev/null
+++ b/packages/backend/src/models/entities/UserPending.ts
@@ -0,0 +1,32 @@
+import { PrimaryColumn, Entity, Index, Column } from 'typeorm';
+import { id } from '../id.js';
+
+@Entity()
+export class UserPending {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone')
+	public createdAt: Date;
+
+	@Index({ unique: true })
+	@Column('varchar', {
+		length: 128,
+	})
+	public code: string;
+
+	@Column('varchar', {
+		length: 128,
+	})
+	public username: string;
+
+	@Column('varchar', {
+		length: 128,
+	})
+	public email: string;
+
+	@Column('varchar', {
+		length: 128,
+	})
+	public password: string;
+}
diff --git a/packages/backend/src/models/entities/UserProfile.ts b/packages/backend/src/models/entities/UserProfile.ts
new file mode 100644
index 0000000000..c561da87ce
--- /dev/null
+++ b/packages/backend/src/models/entities/UserProfile.ts
@@ -0,0 +1,232 @@
+import { Entity, Column, Index, OneToOne, JoinColumn, PrimaryColumn } from 'typeorm';
+import { ffVisibility, notificationTypes } from '@/types.js';
+import { id } from '../id.js';
+import { User } from './User.js';
+import { Page } from './Page.js';
+
+// TODO: このテーブルで管理している情報すべてレジストリで管理するようにしても良いかも
+//       ただ、「emailVerified が true なユーザーを find する」のようなクエリは書けなくなるからウーン
+@Entity()
+export class UserProfile {
+	@PrimaryColumn(id())
+	public userId: User['id'];
+
+	@OneToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: 'The location of the User.',
+	})
+	public location: string | null;
+
+	@Column('char', {
+		length: 10, nullable: true,
+		comment: 'The birthday (YYYY-MM-DD) of the User.',
+	})
+	public birthday: string | null;
+
+	@Column('varchar', {
+		length: 2048, nullable: true,
+		comment: 'The description (bio) of the User.',
+	})
+	public description: string | null;
+
+	@Column('jsonb', {
+		default: [],
+	})
+	public fields: {
+		name: string;
+		value: string;
+	}[];
+
+	@Column('varchar', {
+		length: 32, nullable: true,
+	})
+	public lang: string | null;
+
+	@Column('varchar', {
+		length: 512, nullable: true,
+		comment: 'Remote URL of the user.',
+	})
+	public url: string | null;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: 'The email address of the User.',
+	})
+	public email: string | null;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+	})
+	public emailVerifyCode: string | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public emailVerified: boolean;
+
+	@Column('jsonb', {
+		default: ['follow', 'receiveFollowRequest', 'groupInvited'],
+	})
+	public emailNotificationTypes: string[];
+
+	@Column('boolean', {
+		default: false,
+	})
+	public publicReactions: boolean;
+
+	@Column('enum', {
+		enum: ffVisibility,
+		default: 'public',
+	})
+	public ffVisibility: typeof ffVisibility[number];
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+	})
+	public twoFactorTempSecret: string | null;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+	})
+	public twoFactorSecret: string | null;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public twoFactorEnabled: boolean;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public securityKeysAvailable: boolean;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public usePasswordLessLogin: boolean;
+
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: 'The password hash of the User. It will be null if the origin of the user is local.',
+	})
+	public password: string | null;
+
+	@Column('varchar', {
+		length: 8192, default: '',
+	})
+	public moderationNote: string | null;
+
+	// TODO: そのうち消す
+	@Column('jsonb', {
+		default: {},
+		comment: 'The client-specific data of the User.',
+	})
+	public clientData: Record<string, any>;
+
+	// TODO: そのうち消す
+	@Column('jsonb', {
+		default: {},
+		comment: 'The room data of the User.',
+	})
+	public room: Record<string, any>;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public autoAcceptFollowed: boolean;
+
+	@Column('boolean', {
+		default: false,
+		comment: 'Whether reject index by crawler.',
+	})
+	public noCrawle: boolean;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public alwaysMarkNsfw: boolean;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public autoSensitive: boolean;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public carefulBot: boolean;
+
+	@Column('boolean', {
+		default: true,
+	})
+	public injectFeaturedNote: boolean;
+
+	@Column('boolean', {
+		default: true,
+	})
+	public receiveAnnouncementEmail: boolean;
+
+	@Column({
+		...id(),
+		nullable: true,
+	})
+	public pinnedPageId: Page['id'] | null;
+
+	@OneToOne(type => Page, {
+		onDelete: 'SET NULL',
+	})
+	@JoinColumn()
+	public pinnedPage: Page | null;
+
+	@Column('jsonb', {
+		default: {},
+	})
+	public integrations: Record<string, any>;
+
+	@Index()
+	@Column('boolean', {
+		default: false, select: false,
+	})
+	public enableWordMute: boolean;
+
+	@Column('jsonb', {
+		default: [],
+	})
+	public mutedWords: string[][];
+
+	@Column('jsonb', {
+		default: [],
+		comment: 'List of instances muted by the user.',
+	})
+	public mutedInstances: string[];
+
+	@Column('enum', {
+		enum: notificationTypes,
+		array: true,
+		default: [],
+	})
+	public mutingNotificationTypes: typeof notificationTypes[number][];
+
+	//#region Denormalized fields
+	@Index()
+	@Column('varchar', {
+		length: 128, nullable: true,
+		comment: '[Denormalized]',
+	})
+	public userHost: string | null;
+	//#endregion
+
+	constructor(data: Partial<UserProfile>) {
+		if (data == null) return;
+
+		for (const [k, v] of Object.entries(data)) {
+			(this as any)[k] = v;
+		}
+	}
+}
diff --git a/packages/backend/src/models/entities/UserPublickey.ts b/packages/backend/src/models/entities/UserPublickey.ts
new file mode 100644
index 0000000000..7b505e5b4c
--- /dev/null
+++ b/packages/backend/src/models/entities/UserPublickey.ts
@@ -0,0 +1,34 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, OneToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+export class UserPublickey {
+	@PrimaryColumn(id())
+	public userId: User['id'];
+
+	@OneToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Index({ unique: true })
+	@Column('varchar', {
+		length: 256,
+	})
+	public keyId: string;
+
+	@Column('varchar', {
+		length: 4096,
+	})
+	public keyPem: string;
+
+	constructor(data: Partial<UserPublickey>) {
+		if (data == null) return;
+
+		for (const [k, v] of Object.entries(data)) {
+			(this as any)[k] = v;
+		}
+	}
+}
diff --git a/packages/backend/src/models/entities/UserSecurityKey.ts b/packages/backend/src/models/entities/UserSecurityKey.ts
new file mode 100644
index 0000000000..947692a32b
--- /dev/null
+++ b/packages/backend/src/models/entities/UserSecurityKey.ts
@@ -0,0 +1,48 @@
+import { PrimaryColumn, Entity, JoinColumn, Column, ManyToOne, Index } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+@Entity()
+export class UserSecurityKey {
+	@PrimaryColumn('varchar', {
+		comment: 'Variable-length id given to navigator.credentials.get()',
+	})
+	public id: string;
+
+	@Index()
+	@Column(id())
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Index()
+	@Column('varchar', {
+		comment:
+			'Variable-length public key used to verify attestations (hex-encoded).',
+	})
+	public publicKey: string;
+
+	@Column('timestamp with time zone', {
+		comment:
+			'The date of the last time the UserSecurityKey was successfully validated.',
+	})
+	public lastUsed: Date;
+
+	@Column('varchar', {
+		comment: 'User-defined name for this key',
+		length: 30,
+	})
+	public name: string;
+
+	constructor(data: Partial<UserSecurityKey>) {
+		if (data == null) return;
+
+		for (const [k, v] of Object.entries(data)) {
+			(this as any)[k] = v;
+		}
+	}
+}
diff --git a/packages/backend/src/models/entities/Webhook.ts b/packages/backend/src/models/entities/Webhook.ts
new file mode 100644
index 0000000000..eabb604de9
--- /dev/null
+++ b/packages/backend/src/models/entities/Webhook.ts
@@ -0,0 +1,73 @@
+import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
+import { id } from '../id.js';
+import { User } from './User.js';
+
+export const webhookEventTypes = ['mention', 'unfollow', 'follow', 'followed', 'note', 'reply', 'renote', 'reaction'] as const;
+
+@Entity()
+export class Webhook {
+	@PrimaryColumn(id())
+	public id: string;
+
+	@Column('timestamp with time zone', {
+		comment: 'The created date of the Antenna.',
+	})
+	public createdAt: Date;
+
+	@Index()
+	@Column({
+		...id(),
+		comment: 'The owner ID.',
+	})
+	public userId: User['id'];
+
+	@ManyToOne(type => User, {
+		onDelete: 'CASCADE',
+	})
+	@JoinColumn()
+	public user: User | null;
+
+	@Column('varchar', {
+		length: 128,
+		comment: 'The name of the Antenna.',
+	})
+	public name: string;
+
+	@Index()
+	@Column('varchar', {
+		length: 128, array: true, default: '{}',
+	})
+	public on: (typeof webhookEventTypes)[number][];
+
+	@Column('varchar', {
+		length: 1024,
+	})
+	public url: string;
+
+	@Column('varchar', {
+		length: 1024,
+	})
+	public secret: string;
+
+	@Index()
+	@Column('boolean', {
+		default: true,
+	})
+	public active: boolean;
+
+	/**
+	 * 直近のリクエスト送信日時
+	 */
+	@Column('timestamp with time zone', {
+		nullable: true,
+	})
+	public latestSentAt: Date | null;
+
+	/**
+	 * 直近のリクエスト送信時のHTTPステータスコード
+	 */
+	@Column('integer', {
+		nullable: true,
+	})
+	public latestStatus: number | null;
+}
diff --git a/packages/backend/src/models/entities/abuse-user-report.ts b/packages/backend/src/models/entities/abuse-user-report.ts
deleted file mode 100644
index 6ac5635528..0000000000
--- a/packages/backend/src/models/entities/abuse-user-report.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-export class AbuseUserReport {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the AbuseUserReport.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column(id())
-	public targetUserId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public targetUser: User | null;
-
-	@Index()
-	@Column(id())
-	public reporterId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public reporter: User | null;
-
-	@Column({
-		...id(),
-		nullable: true,
-	})
-	public assigneeId: User['id'] | null;
-
-	@ManyToOne(type => User, {
-		onDelete: 'SET NULL',
-	})
-	@JoinColumn()
-	public assignee: User | null;
-
-	@Index()
-	@Column('boolean', {
-		default: false,
-	})
-	public resolved: boolean;
-
-	@Column('boolean', {
-		default: false
-	})
-	public forwarded: boolean;
-
-	@Column('varchar', {
-		length: 2048,
-	})
-	public comment: string;
-
-	//#region Denormalized fields
-	@Index()
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public targetUserHost: string | null;
-
-	@Index()
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public reporterHost: string | null;
-	//#endregion
-}
diff --git a/packages/backend/src/models/entities/access-token.ts b/packages/backend/src/models/entities/access-token.ts
deleted file mode 100644
index c6e2141a46..0000000000
--- a/packages/backend/src/models/entities/access-token.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Entity, PrimaryColumn, Index, Column, ManyToOne, JoinColumn } from 'typeorm';
-import { User } from './user.js';
-import { App } from './app.js';
-import { id } from '../id.js';
-
-@Entity()
-export class AccessToken {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the AccessToken.',
-	})
-	public createdAt: Date;
-
-	@Column('timestamp with time zone', {
-		nullable: true,
-	})
-	public lastUsedAt: Date | null;
-
-	@Index()
-	@Column('varchar', {
-		length: 128,
-	})
-	public token: string;
-
-	@Index()
-	@Column('varchar', {
-		length: 128,
-		nullable: true,
-	})
-	public session: string | null;
-
-	@Index()
-	@Column('varchar', {
-		length: 128,
-	})
-	public hash: string;
-
-	@Index()
-	@Column(id())
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column({
-		...id(),
-		nullable: true,
-	})
-	public appId: App['id'] | null;
-
-	@ManyToOne(type => App, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public app: App | null;
-
-	@Column('varchar', {
-		length: 128,
-		nullable: true,
-	})
-	public name: string | null;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-	})
-	public description: string | null;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-	})
-	public iconUrl: string | null;
-
-	@Column('varchar', {
-		length: 64, array: true,
-		default: '{}',
-	})
-	public permission: string[];
-
-	@Column('boolean', {
-		default: false,
-	})
-	public fetched: boolean;
-}
diff --git a/packages/backend/src/models/entities/ad.ts b/packages/backend/src/models/entities/ad.ts
deleted file mode 100644
index 36b758f205..0000000000
--- a/packages/backend/src/models/entities/ad.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Entity, Index, Column, PrimaryColumn } from 'typeorm';
-import { id } from '../id.js';
-
-@Entity()
-export class Ad {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the Ad.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The expired date of the Ad.',
-	})
-	public expiresAt: Date;
-
-	@Column('varchar', {
-		length: 32, nullable: false,
-	})
-	public place: string;
-
-	// 今は使われていないが将来的に活用される可能性はある
-	@Column('varchar', {
-		length: 32, nullable: false,
-	})
-	public priority: string;
-
-	@Column('integer', {
-		default: 1, nullable: false,
-	})
-	public ratio: number;
-
-	@Column('varchar', {
-		length: 1024, nullable: false,
-	})
-	public url: string;
-
-	@Column('varchar', {
-		length: 1024, nullable: false,
-	})
-	public imageUrl: string;
-
-	@Column('varchar', {
-		length: 8192, nullable: false,
-	})
-	public memo: string;
-
-	constructor(data: Partial<Ad>) {
-		if (data == null) return;
-
-		for (const [k, v] of Object.entries(data)) {
-			(this as any)[k] = v;
-		}
-	}
-}
diff --git a/packages/backend/src/models/entities/announcement-read.ts b/packages/backend/src/models/entities/announcement-read.ts
deleted file mode 100644
index e4d256a864..0000000000
--- a/packages/backend/src/models/entities/announcement-read.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { Announcement } from './announcement.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['userId', 'announcementId'], { unique: true })
-export class AnnouncementRead {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the AnnouncementRead.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column(id())
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Index()
-	@Column(id())
-	public announcementId: Announcement['id'];
-
-	@ManyToOne(type => Announcement, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public announcement: Announcement | null;
-}
diff --git a/packages/backend/src/models/entities/announcement.ts b/packages/backend/src/models/entities/announcement.ts
deleted file mode 100644
index beb2f82462..0000000000
--- a/packages/backend/src/models/entities/announcement.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Entity, Index, Column, PrimaryColumn } from 'typeorm';
-import { id } from '../id.js';
-
-@Entity()
-export class Announcement {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the Announcement.',
-	})
-	public createdAt: Date;
-
-	@Column('timestamp with time zone', {
-		comment: 'The updated date of the Announcement.',
-		nullable: true,
-	})
-	public updatedAt: Date | null;
-
-	@Column('varchar', {
-		length: 8192, nullable: false,
-	})
-	public text: string;
-
-	@Column('varchar', {
-		length: 256, nullable: false,
-	})
-	public title: string;
-
-	@Column('varchar', {
-		length: 1024, nullable: true,
-	})
-	public imageUrl: string | null;
-
-	constructor(data: Partial<Announcement>) {
-		if (data == null) return;
-
-		for (const [k, v] of Object.entries(data)) {
-			(this as any)[k] = v;
-		}
-	}
-}
diff --git a/packages/backend/src/models/entities/antenna-note.ts b/packages/backend/src/models/entities/antenna-note.ts
deleted file mode 100644
index fcca493fe0..0000000000
--- a/packages/backend/src/models/entities/antenna-note.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Entity, Index, JoinColumn, Column, ManyToOne, PrimaryColumn } from 'typeorm';
-import { Note } from './note.js';
-import { Antenna } from './antenna.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['noteId', 'antennaId'], { unique: true })
-export class AntennaNote {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The note ID.',
-	})
-	public noteId: Note['id'];
-
-	@ManyToOne(type => Note, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public note: Note | null;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The antenna ID.',
-	})
-	public antennaId: Antenna['id'];
-
-	@ManyToOne(type => Antenna, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public antenna: Antenna | null;
-
-	@Index()
-	@Column('boolean', {
-		default: false,
-	})
-	public read: boolean;
-}
diff --git a/packages/backend/src/models/entities/antenna.ts b/packages/backend/src/models/entities/antenna.ts
deleted file mode 100644
index 6c8bb13e50..0000000000
--- a/packages/backend/src/models/entities/antenna.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-import { UserList } from './user-list.js';
-import { UserGroupJoining } from './user-group-joining.js';
-
-@Entity()
-export class Antenna {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the Antenna.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The owner ID.',
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column('varchar', {
-		length: 128,
-		comment: 'The name of the Antenna.',
-	})
-	public name: string;
-
-	@Column('enum', { enum: ['home', 'all', 'users', 'list', 'group'] })
-	public src: 'home' | 'all' | 'users' | 'list' | 'group';
-
-	@Column({
-		...id(),
-		nullable: true,
-	})
-	public userListId: UserList['id'] | null;
-
-	@ManyToOne(type => UserList, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public userList: UserList | null;
-
-	@Column({
-		...id(),
-		nullable: true,
-	})
-	public userGroupJoiningId: UserGroupJoining['id'] | null;
-
-	@ManyToOne(type => UserGroupJoining, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public userGroupJoining: UserGroupJoining | null;
-
-	@Column('varchar', {
-		length: 1024, array: true,
-		default: '{}',
-	})
-	public users: string[];
-
-	@Column('jsonb', {
-		default: [],
-	})
-	public keywords: string[][];
-
-	@Column('jsonb', {
-		default: [],
-	})
-	public excludeKeywords: string[][];
-
-	@Column('boolean', {
-		default: false,
-	})
-	public caseSensitive: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public withReplies: boolean;
-
-	@Column('boolean')
-	public withFile: boolean;
-
-	@Column('varchar', {
-		length: 2048, nullable: true,
-	})
-	public expression: string | null;
-
-	@Column('boolean')
-	public notify: boolean;
-}
diff --git a/packages/backend/src/models/entities/app.ts b/packages/backend/src/models/entities/app.ts
deleted file mode 100644
index 46c11548a5..0000000000
--- a/packages/backend/src/models/entities/app.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Entity, PrimaryColumn, Column, Index, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-export class App {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the App.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		nullable: true,
-		comment: 'The owner ID.',
-	})
-	public userId: User['id'] | null;
-
-	@ManyToOne(type => User, {
-		onDelete: 'SET NULL',
-		nullable: true,
-	})
-	public user: User | null;
-
-	@Index()
-	@Column('varchar', {
-		length: 64,
-		comment: 'The secret key of the App.',
-	})
-	public secret: string;
-
-	@Column('varchar', {
-		length: 128,
-		comment: 'The name of the App.',
-	})
-	public name: string;
-
-	@Column('varchar', {
-		length: 512,
-		comment: 'The description of the App.',
-	})
-	public description: string;
-
-	@Column('varchar', {
-		length: 64, array: true,
-		comment: 'The permission of the App.',
-	})
-	public permission: string[];
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: 'The callbackUrl of the App.',
-	})
-	public callbackUrl: string | null;
-}
diff --git a/packages/backend/src/models/entities/attestation-challenge.ts b/packages/backend/src/models/entities/attestation-challenge.ts
deleted file mode 100644
index c40df23293..0000000000
--- a/packages/backend/src/models/entities/attestation-challenge.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { PrimaryColumn, Entity, JoinColumn, Column, ManyToOne, Index } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-export class AttestationChallenge {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@PrimaryColumn(id())
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Index()
-	@Column('varchar', {
-		length: 64,
-		comment: 'Hex-encoded sha256 hash of the challenge.',
-	})
-	public challenge: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The date challenge was created for expiry purposes.',
-	})
-	public createdAt: Date;
-
-	@Column('boolean', {
-		comment:
-			'Indicates that the challenge is only for registration purposes if true to prevent the challenge for being used as authentication.',
-		default: false,
-	})
-	public registrationChallenge: boolean;
-
-	constructor(data: Partial<AttestationChallenge>) {
-		if (data == null) return;
-
-		for (const [k, v] of Object.entries(data)) {
-			(this as any)[k] = v;
-		}
-	}
-}
diff --git a/packages/backend/src/models/entities/auth-session.ts b/packages/backend/src/models/entities/auth-session.ts
deleted file mode 100644
index 295d1b486c..0000000000
--- a/packages/backend/src/models/entities/auth-session.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Entity, PrimaryColumn, Index, Column, ManyToOne, JoinColumn } from 'typeorm';
-import { User } from './user.js';
-import { App } from './app.js';
-import { id } from '../id.js';
-
-@Entity()
-export class AuthSession {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the AuthSession.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column('varchar', {
-		length: 128,
-	})
-	public token: string;
-
-	@Column({
-		...id(),
-		nullable: true,
-	})
-	public userId: User['id'] | null;
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-		nullable: true,
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column(id())
-	public appId: App['id'];
-
-	@ManyToOne(type => App, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public app: App | null;
-}
diff --git a/packages/backend/src/models/entities/blocking.ts b/packages/backend/src/models/entities/blocking.ts
deleted file mode 100644
index 4ac73a00b5..0000000000
--- a/packages/backend/src/models/entities/blocking.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['blockerId', 'blockeeId'], { unique: true })
-export class Blocking {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the Blocking.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The blockee user ID.',
-	})
-	public blockeeId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public blockee: User | null;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The blocker user ID.',
-	})
-	public blockerId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public blocker: User | null;
-}
diff --git a/packages/backend/src/models/entities/channel-following.ts b/packages/backend/src/models/entities/channel-following.ts
deleted file mode 100644
index 029dd6cf1a..0000000000
--- a/packages/backend/src/models/entities/channel-following.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-import { Channel } from './channel.js';
-
-@Entity()
-@Index(['followerId', 'followeeId'], { unique: true })
-export class ChannelFollowing {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the ChannelFollowing.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The followee channel ID.',
-	})
-	public followeeId: Channel['id'];
-
-	@ManyToOne(type => Channel, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public followee: Channel | null;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The follower user ID.',
-	})
-	public followerId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public follower: User | null;
-}
diff --git a/packages/backend/src/models/entities/channel-note-pining.ts b/packages/backend/src/models/entities/channel-note-pining.ts
deleted file mode 100644
index 23be3b69d4..0000000000
--- a/packages/backend/src/models/entities/channel-note-pining.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { Note } from './note.js';
-import { Channel } from './channel.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['channelId', 'noteId'], { unique: true })
-export class ChannelNotePining {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the ChannelNotePining.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column(id())
-	public channelId: Channel['id'];
-
-	@ManyToOne(type => Channel, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public channel: Channel | null;
-
-	@Column(id())
-	public noteId: Note['id'];
-
-	@ManyToOne(type => Note, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public note: Note | null;
-}
diff --git a/packages/backend/src/models/entities/channel.ts b/packages/backend/src/models/entities/channel.ts
deleted file mode 100644
index abf6668bd2..0000000000
--- a/packages/backend/src/models/entities/channel.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-import { DriveFile } from './drive-file.js';
-
-@Entity()
-export class Channel {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the Channel.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		nullable: true,
-	})
-	public lastNotedAt: Date | null;
-
-	@Index()
-	@Column({
-		...id(),
-		nullable: true,
-		comment: 'The owner ID.',
-	})
-	public userId: User['id'] | null;
-
-	@ManyToOne(type => User, {
-		onDelete: 'SET NULL',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column('varchar', {
-		length: 128,
-		comment: 'The name of the Channel.',
-	})
-	public name: string;
-
-	@Column('varchar', {
-		length: 2048, nullable: true,
-		comment: 'The description of the Channel.',
-	})
-	public description: string | null;
-
-	@Column({
-		...id(),
-		nullable: true,
-		comment: 'The ID of banner Channel.',
-	})
-	public bannerId: DriveFile['id'] | null;
-
-	@ManyToOne(type => DriveFile, {
-		onDelete: 'SET NULL',
-	})
-	@JoinColumn()
-	public banner: DriveFile | null;
-
-	@Index()
-	@Column('integer', {
-		default: 0,
-		comment: 'The count of notes.',
-	})
-	public notesCount: number;
-
-	@Index()
-	@Column('integer', {
-		default: 0,
-		comment: 'The count of users.',
-	})
-	public usersCount: number;
-}
diff --git a/packages/backend/src/models/entities/clip-note.ts b/packages/backend/src/models/entities/clip-note.ts
deleted file mode 100644
index 6f36885508..0000000000
--- a/packages/backend/src/models/entities/clip-note.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Entity, Index, JoinColumn, Column, ManyToOne, PrimaryColumn } from 'typeorm';
-import { Note } from './note.js';
-import { Clip } from './clip.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['noteId', 'clipId'], { unique: true })
-export class ClipNote {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The note ID.',
-	})
-	public noteId: Note['id'];
-
-	@ManyToOne(type => Note, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public note: Note | null;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The clip ID.',
-	})
-	public clipId: Clip['id'];
-
-	@ManyToOne(type => Clip, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public clip: Clip | null;
-}
diff --git a/packages/backend/src/models/entities/clip.ts b/packages/backend/src/models/entities/clip.ts
deleted file mode 100644
index 1386684c32..0000000000
--- a/packages/backend/src/models/entities/clip.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-export class Clip {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the Clip.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The owner ID.',
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column('varchar', {
-		length: 128,
-		comment: 'The name of the Clip.',
-	})
-	public name: string;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public isPublic: boolean;
-
-	@Column('varchar', {
-		length: 2048, nullable: true,
-		comment: 'The description of the Clip.',
-	})
-	public description: string | null;
-}
diff --git a/packages/backend/src/models/entities/drive-file.ts b/packages/backend/src/models/entities/drive-file.ts
deleted file mode 100644
index d410b1d429..0000000000
--- a/packages/backend/src/models/entities/drive-file.ts
+++ /dev/null
@@ -1,192 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { id } from '../id.js';
-import { User } from './user.js';
-import { DriveFolder } from './drive-folder.js';
-
-@Entity()
-@Index(['userId', 'folderId', 'id'])
-export class DriveFile {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the DriveFile.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		nullable: true,
-		comment: 'The owner ID.',
-	})
-	public userId: User['id'] | null;
-
-	@ManyToOne(type => User, {
-		onDelete: 'SET NULL',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Index()
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: 'The host of owner. It will be null if the user in local.',
-	})
-	public userHost: string | null;
-
-	@Index()
-	@Column('varchar', {
-		length: 32,
-		comment: 'The MD5 hash of the DriveFile.',
-	})
-	public md5: string;
-
-	@Column('varchar', {
-		length: 256,
-		comment: 'The file name of the DriveFile.',
-	})
-	public name: string;
-
-	@Index()
-	@Column('varchar', {
-		length: 128,
-		comment: 'The content type (MIME) of the DriveFile.',
-	})
-	public type: string;
-
-	@Column('integer', {
-		comment: 'The file size (bytes) of the DriveFile.',
-	})
-	public size: number;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: 'The comment of the DriveFile.',
-	})
-	public comment: string | null;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: 'The BlurHash string.',
-	})
-	public blurhash: string | null;
-
-	@Column('jsonb', {
-		default: {},
-		comment: 'The any properties of the DriveFile. For example, it includes image width/height.',
-	})
-	public properties: { width?: number; height?: number; orientation?: number; avgColor?: string };
-
-	@Column('boolean')
-	public storedInternal: boolean;
-
-	@Column('varchar', {
-		length: 512,
-		comment: 'The URL of the DriveFile.',
-	})
-	public url: string;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: 'The URL of the thumbnail of the DriveFile.',
-	})
-	public thumbnailUrl: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: 'The URL of the webpublic of the DriveFile.',
-	})
-	public webpublicUrl: string | null;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-	})
-	public webpublicType: string | null;
-
-	@Index({ unique: true })
-	@Column('varchar', {
-		length: 256, nullable: true,
-	})
-	public accessKey: string | null;
-
-	@Index({ unique: true })
-	@Column('varchar', {
-		length: 256, nullable: true,
-	})
-	public thumbnailAccessKey: string | null;
-
-	@Index({ unique: true })
-	@Column('varchar', {
-		length: 256, nullable: true,
-	})
-	public webpublicAccessKey: string | null;
-
-	@Index()
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: 'The URI of the DriveFile. it will be null when the DriveFile is local.',
-	})
-	public uri: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-	})
-	public src: string | null;
-
-	@Index()
-	@Column({
-		...id(),
-		nullable: true,
-		comment: 'The parent folder ID. If null, it means the DriveFile is located in root.',
-	})
-	public folderId: DriveFolder['id'] | null;
-
-	@ManyToOne(type => DriveFolder, {
-		onDelete: 'SET NULL',
-	})
-	@JoinColumn()
-	public folder: DriveFolder | null;
-
-	@Index()
-	@Column('boolean', {
-		default: false,
-		comment: 'Whether the DriveFile is NSFW.',
-	})
-	public isSensitive: boolean;
-
-	@Index()
-	@Column('boolean', {
-		default: false,
-		comment: 'Whether the DriveFile is NSFW. (predict)',
-	})
-	public maybeSensitive: boolean;
-
-	@Index()
-	@Column('boolean', {
-		default: false,
-	})
-	public maybePorn: boolean;
-
-	/**
-	 * 外部の(信頼されていない)URLへの直リンクか否か
-	 */
-	@Index()
-	@Column('boolean', {
-		default: false,
-		comment: 'Whether the DriveFile is direct link to remote server.',
-	})
-	public isLink: boolean;
-
-	@Column('jsonb', {
-		default: {},
-		nullable: true,
-	})
-	public requestHeaders: Record<string, string> | null;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-	})
-	public requestIp: string | null;
-}
diff --git a/packages/backend/src/models/entities/drive-folder.ts b/packages/backend/src/models/entities/drive-folder.ts
deleted file mode 100644
index d4022c6ebc..0000000000
--- a/packages/backend/src/models/entities/drive-folder.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { JoinColumn, ManyToOne, Entity, PrimaryColumn, Index, Column } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-export class DriveFolder {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the DriveFolder.',
-	})
-	public createdAt: Date;
-
-	@Column('varchar', {
-		length: 128,
-		comment: 'The name of the DriveFolder.',
-	})
-	public name: string;
-
-	@Index()
-	@Column({
-		...id(),
-		nullable: true,
-		comment: 'The owner ID.',
-	})
-	public userId: User['id'] | null;
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Index()
-	@Column({
-		...id(),
-		nullable: true,
-		comment: 'The parent folder ID. If null, it means the DriveFolder is located in root.',
-	})
-	public parentId: DriveFolder['id'] | null;
-
-	@ManyToOne(type => DriveFolder, {
-		onDelete: 'SET NULL',
-	})
-	@JoinColumn()
-	public parent: DriveFolder | null;
-}
diff --git a/packages/backend/src/models/entities/emoji.ts b/packages/backend/src/models/entities/emoji.ts
deleted file mode 100644
index 7332dd1857..0000000000
--- a/packages/backend/src/models/entities/emoji.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { PrimaryColumn, Entity, Index, Column } from 'typeorm';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['name', 'host'], { unique: true })
-export class Emoji {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		nullable: true,
-	})
-	public updatedAt: Date | null;
-
-	@Index()
-	@Column('varchar', {
-		length: 128,
-	})
-	public name: string;
-
-	@Index()
-	@Column('varchar', {
-		length: 128, nullable: true,
-	})
-	public host: string | null;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-	})
-	public category: string | null;
-
-	@Column('varchar', {
-		length: 512,
-	})
-	public originalUrl: string;
-
-	@Column('varchar', {
-		length: 512,
-		default: '',
-	})
-	public publicUrl: string;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-	})
-	public uri: string | null;
-
-	// publicUrlの方のtypeが入る
-	@Column('varchar', {
-		length: 64, nullable: true,
-	})
-	public type: string | null;
-
-	@Column('varchar', {
-		array: true, length: 128, default: '{}',
-	})
-	public aliases: string[];
-}
diff --git a/packages/backend/src/models/entities/follow-request.ts b/packages/backend/src/models/entities/follow-request.ts
deleted file mode 100644
index 89946f6d35..0000000000
--- a/packages/backend/src/models/entities/follow-request.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['followerId', 'followeeId'], { unique: true })
-export class FollowRequest {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the FollowRequest.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The followee user ID.',
-	})
-	public followeeId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public followee: User | null;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The follower user ID.',
-	})
-	public followerId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public follower: User | null;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: 'id of Follow Activity.',
-	})
-	public requestId: string | null;
-
-	//#region Denormalized fields
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public followerHost: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public followerInbox: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public followerSharedInbox: string | null;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public followeeHost: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public followeeInbox: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public followeeSharedInbox: string | null;
-	//#endregion
-}
diff --git a/packages/backend/src/models/entities/following.ts b/packages/backend/src/models/entities/following.ts
deleted file mode 100644
index b283ca7e8a..0000000000
--- a/packages/backend/src/models/entities/following.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['followerId', 'followeeId'], { unique: true })
-export class Following {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the Following.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The followee user ID.',
-	})
-	public followeeId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public followee: User | null;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The follower user ID.',
-	})
-	public followerId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public follower: User | null;
-
-	//#region Denormalized fields
-	@Index()
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public followerHost: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public followerInbox: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public followerSharedInbox: string | null;
-
-	@Index()
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public followeeHost: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public followeeInbox: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public followeeSharedInbox: string | null;
-	//#endregion
-}
diff --git a/packages/backend/src/models/entities/gallery-like.ts b/packages/backend/src/models/entities/gallery-like.ts
deleted file mode 100644
index 4ce166d194..0000000000
--- a/packages/backend/src/models/entities/gallery-like.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-import { GalleryPost } from './gallery-post.js';
-
-@Entity()
-@Index(['userId', 'postId'], { unique: true })
-export class GalleryLike {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone')
-	public createdAt: Date;
-
-	@Index()
-	@Column(id())
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column(id())
-	public postId: GalleryPost['id'];
-
-	@ManyToOne(type => GalleryPost, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public post: GalleryPost | null;
-}
diff --git a/packages/backend/src/models/entities/gallery-post.ts b/packages/backend/src/models/entities/gallery-post.ts
deleted file mode 100644
index 774cb946e9..0000000000
--- a/packages/backend/src/models/entities/gallery-post.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Entity, Index, JoinColumn, Column, PrimaryColumn, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-import { DriveFile } from './drive-file.js';
-
-@Entity()
-export class GalleryPost {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the GalleryPost.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The updated date of the GalleryPost.',
-	})
-	public updatedAt: Date;
-
-	@Column('varchar', {
-		length: 256,
-	})
-	public title: string;
-
-	@Column('varchar', {
-		length: 2048, nullable: true,
-	})
-	public description: string | null;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The ID of author.',
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Index()
-	@Column({
-		...id(),
-		array: true, default: '{}',
-	})
-	public fileIds: DriveFile['id'][];
-
-	@Index()
-	@Column('boolean', {
-		default: false,
-		comment: 'Whether the post is sensitive.',
-	})
-	public isSensitive: boolean;
-
-	@Index()
-	@Column('integer', {
-		default: 0,
-	})
-	public likedCount: number;
-
-	@Index()
-	@Column('varchar', {
-		length: 128, array: true, default: '{}',
-	})
-	public tags: string[];
-
-	constructor(data: Partial<GalleryPost>) {
-		if (data == null) return;
-
-		for (const [k, v] of Object.entries(data)) {
-			(this as any)[k] = v;
-		}
-	}
-}
diff --git a/packages/backend/src/models/entities/hashtag.ts b/packages/backend/src/models/entities/hashtag.ts
deleted file mode 100644
index 6bd991f629..0000000000
--- a/packages/backend/src/models/entities/hashtag.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Entity, PrimaryColumn, Index, Column } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-export class Hashtag {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index({ unique: true })
-	@Column('varchar', {
-		length: 128,
-	})
-	public name: string;
-
-	@Column({
-		...id(),
-		array: true,
-	})
-	public mentionedUserIds: User['id'][];
-
-	@Index()
-	@Column('integer', {
-		default: 0,
-	})
-	public mentionedUsersCount: number;
-
-	@Column({
-		...id(),
-		array: true,
-	})
-	public mentionedLocalUserIds: User['id'][];
-
-	@Index()
-	@Column('integer', {
-		default: 0,
-	})
-	public mentionedLocalUsersCount: number;
-
-	@Column({
-		...id(),
-		array: true,
-	})
-	public mentionedRemoteUserIds: User['id'][];
-
-	@Index()
-	@Column('integer', {
-		default: 0,
-	})
-	public mentionedRemoteUsersCount: number;
-
-	@Column({
-		...id(),
-		array: true,
-	})
-	public attachedUserIds: User['id'][];
-
-	@Index()
-	@Column('integer', {
-		default: 0,
-	})
-	public attachedUsersCount: number;
-
-	@Column({
-		...id(),
-		array: true,
-	})
-	public attachedLocalUserIds: User['id'][];
-
-	@Index()
-	@Column('integer', {
-		default: 0,
-	})
-	public attachedLocalUsersCount: number;
-
-	@Column({
-		...id(),
-		array: true,
-	})
-	public attachedRemoteUserIds: User['id'][];
-
-	@Index()
-	@Column('integer', {
-		default: 0,
-	})
-	public attachedRemoteUsersCount: number;
-}
diff --git a/packages/backend/src/models/entities/instance.ts b/packages/backend/src/models/entities/instance.ts
deleted file mode 100644
index 7ea9234384..0000000000
--- a/packages/backend/src/models/entities/instance.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-import { Entity, PrimaryColumn, Index, Column } from 'typeorm';
-import { id } from '../id.js';
-
-@Entity()
-export class Instance {
-	@PrimaryColumn(id())
-	public id: string;
-
-	/**
-	 * このインスタンスを捕捉した日時
-	 */
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The caught date of the Instance.',
-	})
-	public caughtAt: Date;
-
-	/**
-	 * ホスト
-	 */
-	@Index({ unique: true })
-	@Column('varchar', {
-		length: 128,
-		comment: 'The host of the Instance.',
-	})
-	public host: string;
-
-	/**
-	 * インスタンスのユーザー数
-	 */
-	@Column('integer', {
-		default: 0,
-		comment: 'The count of the users of the Instance.',
-	})
-	public usersCount: number;
-
-	/**
-	 * インスタンスの投稿数
-	 */
-	@Column('integer', {
-		default: 0,
-		comment: 'The count of the notes of the Instance.',
-	})
-	public notesCount: number;
-
-	/**
-	 * このインスタンスのユーザーからフォローされている、自インスタンスのユーザーの数
-	 */
-	@Column('integer', {
-		default: 0,
-	})
-	public followingCount: number;
-
-	/**
-	 * このインスタンスのユーザーをフォローしている、自インスタンスのユーザーの数
-	 */
-	@Column('integer', {
-		default: 0,
-	})
-	public followersCount: number;
-
-	/**
-	 * 直近のリクエスト送信日時
-	 */
-	@Column('timestamp with time zone', {
-		nullable: true,
-	})
-	public latestRequestSentAt: Date | null;
-
-	/**
-	 * 直近のリクエスト送信時のHTTPステータスコード
-	 */
-	@Column('integer', {
-		nullable: true,
-	})
-	public latestStatus: number | null;
-
-	/**
-	 * 直近のリクエスト受信日時
-	 */
-	@Column('timestamp with time zone', {
-		nullable: true,
-	})
-	public latestRequestReceivedAt: Date | null;
-
-	/**
-	 * このインスタンスと最後にやり取りした日時
-	 */
-	@Column('timestamp with time zone')
-	public lastCommunicatedAt: Date;
-
-	/**
-	 * このインスタンスと不通かどうか
-	 */
-	@Column('boolean', {
-		default: false,
-	})
-	public isNotResponding: boolean;
-
-	/**
-	 * このインスタンスへの配信を停止するか
-	 */
-	@Index()
-	@Column('boolean', {
-		default: false,
-	})
-	public isSuspended: boolean;
-
-	@Column('varchar', {
-		length: 64, nullable: true,
-		comment: 'The software of the Instance.',
-	})
-	public softwareName: string | null;
-
-	@Column('varchar', {
-		length: 64, nullable: true,
-	})
-	public softwareVersion: string | null;
-
-	@Column('boolean', {
-		nullable: true,
-	})
-	public openRegistrations: boolean | null;
-
-	@Column('varchar', {
-		length: 256, nullable: true,
-	})
-	public name: string | null;
-
-	@Column('varchar', {
-		length: 4096, nullable: true,
-	})
-	public description: string | null;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-	})
-	public maintainerName: string | null;
-
-	@Column('varchar', {
-		length: 256, nullable: true,
-	})
-	public maintainerEmail: string | null;
-
-	@Column('varchar', {
-		length: 256, nullable: true,
-	})
-	public iconUrl: string | null;
-
-	@Column('varchar', {
-		length: 256, nullable: true,
-	})
-	public faviconUrl: string | null;
-
-	@Column('varchar', {
-		length: 64, nullable: true,
-	})
-	public themeColor: string | null;
-
-	@Column('timestamp with time zone', {
-		nullable: true,
-	})
-	public infoUpdatedAt: Date | null;
-}
diff --git a/packages/backend/src/models/entities/messaging-message.ts b/packages/backend/src/models/entities/messaging-message.ts
deleted file mode 100644
index 099fb7aa01..0000000000
--- a/packages/backend/src/models/entities/messaging-message.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { DriveFile } from './drive-file.js';
-import { id } from '../id.js';
-import { UserGroup } from './user-group.js';
-
-@Entity()
-export class MessagingMessage {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the MessagingMessage.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The sender user ID.',
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Index()
-	@Column({
-		...id(), nullable: true,
-		comment: 'The recipient user ID.',
-	})
-	public recipientId: User['id'] | null;
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public recipient: User | null;
-
-	@Index()
-	@Column({
-		...id(), nullable: true,
-		comment: 'The recipient group ID.',
-	})
-	public groupId: UserGroup['id'] | null;
-
-	@ManyToOne(type => UserGroup, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public group: UserGroup | null;
-
-	@Column('varchar', {
-		length: 4096, nullable: true,
-	})
-	public text: string | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public isRead: boolean;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-	})
-	public uri: string | null;
-
-	@Column({
-		...id(),
-		array: true, default: '{}',
-	})
-	public reads: User['id'][];
-
-	@Column({
-		...id(),
-		nullable: true,
-	})
-	public fileId: DriveFile['id'] | null;
-
-	@ManyToOne(type => DriveFile, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public file: DriveFile | null;
-}
diff --git a/packages/backend/src/models/entities/meta.ts b/packages/backend/src/models/entities/meta.ts
deleted file mode 100644
index d33ff2519e..0000000000
--- a/packages/backend/src/models/entities/meta.ts
+++ /dev/null
@@ -1,462 +0,0 @@
-import { Entity, Column, PrimaryColumn, ManyToOne, JoinColumn } from 'typeorm';
-import { id } from '../id.js';
-import { User } from './user.js';
-import { Clip } from './clip.js';
-
-@Entity()
-export class Meta {
-	@PrimaryColumn({
-		type: 'varchar',
-		length: 32,
-	})
-	public id: string;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-	})
-	public name: string | null;
-
-	@Column('varchar', {
-		length: 1024, nullable: true,
-	})
-	public description: string | null;
-
-	/**
-	 * メンテナの名前
-	 */
-	@Column('varchar', {
-		length: 128, nullable: true,
-	})
-	public maintainerName: string | null;
-
-	/**
-	 * メンテナの連絡先
-	 */
-	@Column('varchar', {
-		length: 128, nullable: true,
-	})
-	public maintainerEmail: string | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public disableRegistration: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public disableLocalTimeline: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public disableGlobalTimeline: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public useStarForReactionFallback: boolean;
-
-	@Column('varchar', {
-		length: 64, array: true, default: '{}',
-	})
-	public langs: string[];
-
-	@Column('varchar', {
-		length: 256, array: true, default: '{}',
-	})
-	public pinnedUsers: string[];
-
-	@Column('varchar', {
-		length: 256, array: true, default: '{}',
-	})
-	public hiddenTags: string[];
-
-	@Column('varchar', {
-		length: 256, array: true, default: '{}',
-	})
-	public blockedHosts: string[];
-
-	@Column('varchar', {
-		length: 512, array: true, default: '{/featured,/channels,/explore,/pages,/about-misskey}',
-	})
-	public pinnedPages: string[];
-
-	@Column({
-		...id(),
-		nullable: true,
-	})
-	public pinnedClipId: Clip['id'] | null;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-	})
-	public themeColor: string | null;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-		default: '/assets/ai.png',
-	})
-	public mascotImageUrl: string | null;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-	})
-	public bannerUrl: string | null;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-	})
-	public backgroundImageUrl: string | null;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-	})
-	public logoImageUrl: string | null;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-		default: 'https://xn--931a.moe/aiart/yubitun.png',
-	})
-	public errorImageUrl: string | null;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-	})
-	public iconUrl: string | null;
-
-	@Column('boolean', {
-		default: true,
-	})
-	public cacheRemoteFiles: boolean;
-
-	@Column({
-		...id(),
-		nullable: true,
-	})
-	public proxyAccountId: User['id'] | null;
-
-	@ManyToOne(type => User, {
-		onDelete: 'SET NULL',
-	})
-	@JoinColumn()
-	public proxyAccount: User | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public emailRequiredForSignup: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public enableHcaptcha: boolean;
-
-	@Column('varchar', {
-		length: 64,
-		nullable: true,
-	})
-	public hcaptchaSiteKey: string | null;
-
-	@Column('varchar', {
-		length: 64,
-		nullable: true,
-	})
-	public hcaptchaSecretKey: string | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public enableRecaptcha: boolean;
-
-	@Column('varchar', {
-		length: 64,
-		nullable: true,
-	})
-	public recaptchaSiteKey: string | null;
-
-	@Column('varchar', {
-		length: 64,
-		nullable: true,
-	})
-	public recaptchaSecretKey: string | null;
-
-	@Column('enum', {
-		enum: ['none', 'all', 'local', 'remote'],
-		default: 'none',
-	})
-	public sensitiveMediaDetection: 'none' | 'all' | 'local' | 'remote';
-
-	@Column('enum', {
-		enum: ['medium', 'low', 'high', 'veryLow', 'veryHigh'],
-		default: 'medium',
-	})
-	public sensitiveMediaDetectionSensitivity: 'medium' | 'low' | 'high' | 'veryLow' | 'veryHigh';
-
-	@Column('boolean', {
-		default: false,
-	})
-	public setSensitiveFlagAutomatically: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public enableSensitiveMediaDetectionForVideos: boolean;
-
-	@Column('integer', {
-		default: 1024,
-		comment: 'Drive capacity of a local user (MB)',
-	})
-	public localDriveCapacityMb: number;
-
-	@Column('integer', {
-		default: 32,
-		comment: 'Drive capacity of a remote user (MB)',
-	})
-	public remoteDriveCapacityMb: number;
-
-	@Column('varchar', {
-		length: 128,
-		nullable: true,
-	})
-	public summalyProxy: string | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public enableEmail: boolean;
-
-	@Column('varchar', {
-		length: 128,
-		nullable: true,
-	})
-	public email: string | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public smtpSecure: boolean;
-
-	@Column('varchar', {
-		length: 128,
-		nullable: true,
-	})
-	public smtpHost: string | null;
-
-	@Column('integer', {
-		nullable: true,
-	})
-	public smtpPort: number | null;
-
-	@Column('varchar', {
-		length: 128,
-		nullable: true,
-	})
-	public smtpUser: string | null;
-
-	@Column('varchar', {
-		length: 128,
-		nullable: true,
-	})
-	public smtpPass: string | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public enableServiceWorker: boolean;
-
-	@Column('varchar', {
-		length: 128,
-		nullable: true,
-	})
-	public swPublicKey: string | null;
-
-	@Column('varchar', {
-		length: 128,
-		nullable: true,
-	})
-	public swPrivateKey: string | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public enableTwitterIntegration: boolean;
-
-	@Column('varchar', {
-		length: 128,
-		nullable: true,
-	})
-	public twitterConsumerKey: string | null;
-
-	@Column('varchar', {
-		length: 128,
-		nullable: true,
-	})
-	public twitterConsumerSecret: string | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public enableGithubIntegration: boolean;
-
-	@Column('varchar', {
-		length: 128,
-		nullable: true,
-	})
-	public githubClientId: string | null;
-
-	@Column('varchar', {
-		length: 128,
-		nullable: true,
-	})
-	public githubClientSecret: string | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public enableDiscordIntegration: boolean;
-
-	@Column('varchar', {
-		length: 128,
-		nullable: true,
-	})
-	public discordClientId: string | null;
-
-	@Column('varchar', {
-		length: 128,
-		nullable: true,
-	})
-	public discordClientSecret: string | null;
-
-	@Column('varchar', {
-		length: 128,
-		nullable: true,
-	})
-	public deeplAuthKey: string | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public deeplIsPro: boolean;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-	})
-	public ToSUrl: string | null;
-
-	@Column('varchar', {
-		length: 512,
-		default: 'https://github.com/misskey-dev/misskey',
-		nullable: false,
-	})
-	public repositoryUrl: string;
-
-	@Column('varchar', {
-		length: 512,
-		default: 'https://github.com/misskey-dev/misskey/issues/new',
-		nullable: true,
-	})
-	public feedbackUrl: string | null;
-
-	@Column('varchar', {
-		length: 8192,
-		nullable: true,
-	})
-	public defaultLightTheme: string | null;
-
-	@Column('varchar', {
-		length: 8192,
-		nullable: true,
-	})
-	public defaultDarkTheme: string | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public useObjectStorage: boolean;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-	})
-	public objectStorageBucket: string | null;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-	})
-	public objectStoragePrefix: string | null;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-	})
-	public objectStorageBaseUrl: string | null;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-	})
-	public objectStorageEndpoint: string | null;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-	})
-	public objectStorageRegion: string | null;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-	})
-	public objectStorageAccessKey: string | null;
-
-	@Column('varchar', {
-		length: 512,
-		nullable: true,
-	})
-	public objectStorageSecretKey: string | null;
-
-	@Column('integer', {
-		nullable: true,
-	})
-	public objectStoragePort: number | null;
-
-	@Column('boolean', {
-		default: true,
-	})
-	public objectStorageUseSSL: boolean;
-
-	@Column('boolean', {
-		default: true,
-	})
-	public objectStorageUseProxy: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public objectStorageSetPublicRead: boolean;
-
-	@Column('boolean', {
-		default: true,
-	})
-	public objectStorageS3ForcePathStyle: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public enableIpLogging: boolean;
-
-	@Column('boolean', {
-		default: true,
-	})
-	public enableActiveEmailValidation: boolean;
-}
diff --git a/packages/backend/src/models/entities/moderation-log.ts b/packages/backend/src/models/entities/moderation-log.ts
deleted file mode 100644
index c99e550782..0000000000
--- a/packages/backend/src/models/entities/moderation-log.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-export class ModerationLog {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the ModerationLog.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column(id())
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column('varchar', {
-		length: 128,
-	})
-	public type: string;
-
-	@Column('jsonb')
-	public info: Record<string, any>;
-}
diff --git a/packages/backend/src/models/entities/muted-note.ts b/packages/backend/src/models/entities/muted-note.ts
deleted file mode 100644
index 96a4fa8e33..0000000000
--- a/packages/backend/src/models/entities/muted-note.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Entity, Index, JoinColumn, Column, ManyToOne, PrimaryColumn } from 'typeorm';
-import { Note } from './note.js';
-import { User } from './user.js';
-import { id } from '../id.js';
-import { mutedNoteReasons } from '../../types.js';
-
-@Entity()
-@Index(['noteId', 'userId'], { unique: true })
-export class MutedNote {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The note ID.',
-	})
-	public noteId: Note['id'];
-
-	@ManyToOne(type => Note, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public note: Note | null;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The user ID.',
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	/**
-	 * ミュートされた理由。
-	 */
-	@Index()
-	@Column('enum', {
-		enum: mutedNoteReasons,
-		comment: 'The reason of the MutedNote.',
-	})
-	public reason: typeof mutedNoteReasons[number];
-}
diff --git a/packages/backend/src/models/entities/muting.ts b/packages/backend/src/models/entities/muting.ts
deleted file mode 100644
index 8f9e69063a..0000000000
--- a/packages/backend/src/models/entities/muting.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['muterId', 'muteeId'], { unique: true })
-export class Muting {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the Muting.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		nullable: true,
-	})
-	public expiresAt: Date | null;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The mutee user ID.',
-	})
-	public muteeId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public mutee: User | null;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The muter user ID.',
-	})
-	public muterId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public muter: User | null;
-}
diff --git a/packages/backend/src/models/entities/note-favorite.ts b/packages/backend/src/models/entities/note-favorite.ts
deleted file mode 100644
index fe065b77a8..0000000000
--- a/packages/backend/src/models/entities/note-favorite.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { Note } from './note.js';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['userId', 'noteId'], { unique: true })
-export class NoteFavorite {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the NoteFavorite.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column(id())
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column(id())
-	public noteId: Note['id'];
-
-	@ManyToOne(type => Note, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public note: Note | null;
-}
diff --git a/packages/backend/src/models/entities/note-reaction.ts b/packages/backend/src/models/entities/note-reaction.ts
deleted file mode 100644
index d7bc609898..0000000000
--- a/packages/backend/src/models/entities/note-reaction.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { Note } from './note.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['userId', 'noteId'], { unique: true })
-export class NoteReaction {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the NoteReaction.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column(id())
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user?: User | null;
-
-	@Index()
-	@Column(id())
-	public noteId: Note['id'];
-
-	@ManyToOne(type => Note, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public note?: Note | null;
-
-	// TODO: 対象noteのuserIdを非正規化したい(「受け取ったリアクション一覧」のようなものを(JOIN無しで)実装したいため)
-
-	@Column('varchar', {
-		length: 260,
-	})
-	public reaction: string;
-}
diff --git a/packages/backend/src/models/entities/note-thread-muting.ts b/packages/backend/src/models/entities/note-thread-muting.ts
deleted file mode 100644
index 8c5f7bbab4..0000000000
--- a/packages/backend/src/models/entities/note-thread-muting.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { Note } from './note.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['userId', 'threadId'], { unique: true })
-export class NoteThreadMuting {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Index()
-	@Column('varchar', {
-		length: 256,
-	})
-	public threadId: string;
-}
diff --git a/packages/backend/src/models/entities/note-unread.ts b/packages/backend/src/models/entities/note-unread.ts
deleted file mode 100644
index a7acf254d3..0000000000
--- a/packages/backend/src/models/entities/note-unread.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { Note } from './note.js';
-import { id } from '../id.js';
-import { Channel } from './channel.js';
-
-@Entity()
-@Index(['userId', 'noteId'], { unique: true })
-export class NoteUnread {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column(id())
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Index()
-	@Column(id())
-	public noteId: Note['id'];
-
-	@ManyToOne(type => Note, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public note: Note | null;
-
-	/**
-	 * メンションか否か
-	 */
-	@Index()
-	@Column('boolean')
-	public isMentioned: boolean;
-
-	/**
-	 * ダイレクト投稿か否か
-	 */
-	@Index()
-	@Column('boolean')
-	public isSpecified: boolean;
-
-	//#region Denormalized fields
-	@Index()
-	@Column({
-		...id(),
-		comment: '[Denormalized]',
-	})
-	public noteUserId: User['id'];
-
-	@Index()
-	@Column({
-		...id(),
-		nullable: true,
-		comment: '[Denormalized]',
-	})
-	public noteChannelId: Channel['id'] | null;
-	//#endregion
-}
diff --git a/packages/backend/src/models/entities/note-watching.ts b/packages/backend/src/models/entities/note-watching.ts
deleted file mode 100644
index ed82e7dfe7..0000000000
--- a/packages/backend/src/models/entities/note-watching.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { Note } from './note.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['userId', 'noteId'], { unique: true })
-export class NoteWatching {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the NoteWatching.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The watcher ID.',
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The target Note ID.',
-	})
-	public noteId: Note['id'];
-
-	@ManyToOne(type => Note, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public note: Note | null;
-
-	//#region Denormalized fields
-	@Index()
-	@Column({
-		...id(),
-		comment: '[Denormalized]',
-	})
-	public noteUserId: Note['userId'];
-	//#endregion
-}
diff --git a/packages/backend/src/models/entities/note.ts b/packages/backend/src/models/entities/note.ts
deleted file mode 100644
index 0ffeb85f69..0000000000
--- a/packages/backend/src/models/entities/note.ts
+++ /dev/null
@@ -1,242 +0,0 @@
-import { Entity, Index, JoinColumn, Column, PrimaryColumn, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { DriveFile } from './drive-file.js';
-import { id } from '../id.js';
-import { noteVisibilities } from '../../types.js';
-import { Channel } from './channel.js';
-
-@Entity()
-@Index('IDX_NOTE_TAGS', { synchronize: false })
-@Index('IDX_NOTE_MENTIONS', { synchronize: false })
-@Index('IDX_NOTE_VISIBLE_USER_IDS', { synchronize: false })
-export class Note {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the Note.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		nullable: true,
-		comment: 'The ID of reply target.',
-	})
-	public replyId: Note['id'] | null;
-
-	@ManyToOne(type => Note, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public reply: Note | null;
-
-	@Index()
-	@Column({
-		...id(),
-		nullable: true,
-		comment: 'The ID of renote target.',
-	})
-	public renoteId: Note['id'] | null;
-
-	@ManyToOne(type => Note, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public renote: Note | null;
-
-	@Index()
-	@Column('varchar', {
-		length: 256, nullable: true,
-	})
-	public threadId: string | null;
-
-	@Column('text', {
-		nullable: true,
-	})
-	public text: string | null;
-
-	@Column('varchar', {
-		length: 256, nullable: true,
-	})
-	public name: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-	})
-	public cw: string | null;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The ID of author.',
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public localOnly: boolean;
-
-	@Column('smallint', {
-		default: 0,
-	})
-	public renoteCount: number;
-
-	@Column('smallint', {
-		default: 0,
-	})
-	public repliesCount: number;
-
-	@Column('jsonb', {
-		default: {},
-	})
-	public reactions: Record<string, number>;
-
-	/**
-	 * public ... 公開
-	 * home ... ホームタイムライン(ユーザーページのタイムライン含む)のみに流す
-	 * followers ... フォロワーのみ
-	 * specified ... visibleUserIds で指定したユーザーのみ
-	 */
-	@Column('enum', { enum: noteVisibilities })
-	public visibility: typeof noteVisibilities[number];
-
-	@Index({ unique: true })
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: 'The URI of a note. it will be null when the note is local.',
-	})
-	public uri: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: 'The human readable url of a note. it will be null when the note is local.',
-	})
-	public url: string | null;
-
-	@Column('integer', {
-		default: 0, select: false,
-	})
-	public score: number;
-
-	@Index()
-	@Column({
-		...id(),
-		array: true, default: '{}',
-	})
-	public fileIds: DriveFile['id'][];
-
-	@Index()
-	@Column('varchar', {
-		length: 256, array: true, default: '{}',
-	})
-	public attachedFileTypes: string[];
-
-	@Index()
-	@Column({
-		...id(),
-		array: true, default: '{}',
-	})
-	public visibleUserIds: User['id'][];
-
-	@Index()
-	@Column({
-		...id(),
-		array: true, default: '{}',
-	})
-	public mentions: User['id'][];
-
-	@Column('text', {
-		default: '[]',
-	})
-	public mentionedRemoteUsers: string;
-
-	@Column('varchar', {
-		length: 128, array: true, default: '{}',
-	})
-	public emojis: string[];
-
-	@Index()
-	@Column('varchar', {
-		length: 128, array: true, default: '{}',
-	})
-	public tags: string[];
-
-	@Column('boolean', {
-		default: false,
-	})
-	public hasPoll: boolean;
-
-	@Index()
-	@Column({
-		...id(),
-		nullable: true,
-		comment: 'The ID of source channel.',
-	})
-	public channelId: Channel['id'] | null;
-
-	@ManyToOne(type => Channel, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public channel: Channel | null;
-
-	//#region Denormalized fields
-	@Index()
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public userHost: string | null;
-
-	@Column({
-		...id(),
-		nullable: true,
-		comment: '[Denormalized]',
-	})
-	public replyUserId: User['id'] | null;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public replyUserHost: string | null;
-
-	@Column({
-		...id(),
-		nullable: true,
-		comment: '[Denormalized]',
-	})
-	public renoteUserId: User['id'] | null;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public renoteUserHost: string | null;
-	//#endregion
-
-	constructor(data: Partial<Note>) {
-		if (data == null) return;
-
-		for (const [k, v] of Object.entries(data)) {
-			(this as any)[k] = v;
-		}
-	}
-}
-
-export type IMentionedRemoteUsers = {
-	uri: string;
-	url?: string;
-	username: string;
-	host: string;
-}[];
diff --git a/packages/backend/src/models/entities/notification.ts b/packages/backend/src/models/entities/notification.ts
deleted file mode 100644
index db3dba3632..0000000000
--- a/packages/backend/src/models/entities/notification.ts
+++ /dev/null
@@ -1,173 +0,0 @@
-import { Entity, Index, JoinColumn, ManyToOne, Column, PrimaryColumn } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-import { Note } from './note.js';
-import { FollowRequest } from './follow-request.js';
-import { UserGroupInvitation } from './user-group-invitation.js';
-import { AccessToken } from './access-token.js';
-import { notificationTypes } from '@/types.js';
-
-@Entity()
-export class Notification {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the Notification.',
-	})
-	public createdAt: Date;
-
-	/**
-	 * 通知の受信者
-	 */
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The ID of recipient user of the Notification.',
-	})
-	public notifieeId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public notifiee: User | null;
-
-	/**
-	 * 通知の送信者(initiator)
-	 */
-	@Index()
-	@Column({
-		...id(),
-		nullable: true,
-		comment: 'The ID of sender user of the Notification.',
-	})
-	public notifierId: User['id'] | null;
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public notifier: User | null;
-
-	/**
-	 * 通知の種類。
-	 * follow - フォローされた
-	 * mention - 投稿で自分が言及された
-	 * reply - (自分または自分がWatchしている)投稿が返信された
-	 * renote - (自分または自分がWatchしている)投稿がRenoteされた
-	 * quote - (自分または自分がWatchしている)投稿が引用Renoteされた
-	 * reaction - (自分または自分がWatchしている)投稿にリアクションされた
-	 * pollVote - (自分または自分がWatchしている)投稿のアンケートに投票された
-	 * pollEnded - 自分のアンケートもしくは自分が投票したアンケートが終了した
-	 * receiveFollowRequest - フォローリクエストされた
-	 * followRequestAccepted - 自分の送ったフォローリクエストが承認された
-	 * groupInvited - グループに招待された
-	 * app - アプリ通知
-	 */
-	@Index()
-	@Column('enum', {
-		enum: notificationTypes,
-		comment: 'The type of the Notification.',
-	})
-	public type: typeof notificationTypes[number];
-
-	/**
-	 * 通知が読まれたかどうか
-	 */
-	@Index()
-	@Column('boolean', {
-		default: false,
-		comment: 'Whether the Notification is read.',
-	})
-	public isRead: boolean;
-
-	@Column({
-		...id(),
-		nullable: true,
-	})
-	public noteId: Note['id'] | null;
-
-	@ManyToOne(type => Note, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public note: Note | null;
-
-	@Column({
-		...id(),
-		nullable: true,
-	})
-	public followRequestId: FollowRequest['id'] | null;
-
-	@ManyToOne(type => FollowRequest, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public followRequest: FollowRequest | null;
-
-	@Column({
-		...id(),
-		nullable: true,
-	})
-	public userGroupInvitationId: UserGroupInvitation['id'] | null;
-
-	@ManyToOne(type => UserGroupInvitation, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public userGroupInvitation: UserGroupInvitation | null;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-	})
-	public reaction: string | null;
-
-	@Column('integer', {
-		nullable: true,
-	})
-	public choice: number | null;
-
-	/**
-	 * アプリ通知のbody
-	 */
-	@Column('varchar', {
-		length: 2048, nullable: true,
-	})
-	public customBody: string | null;
-
-	/**
-	 * アプリ通知のheader
-	 * (省略時はアプリ名で表示されることを期待)
-	 */
-	@Column('varchar', {
-		length: 256, nullable: true,
-	})
-	public customHeader: string | null;
-
-	/**
-	 * アプリ通知のicon(URL)
-	 * (省略時はアプリアイコンで表示されることを期待)
-	 */
-	@Column('varchar', {
-		length: 1024, nullable: true,
-	})
-	public customIcon: string | null;
-
-	/**
-	 * アプリ通知のアプリ(のトークン)
-	 */
-	@Index()
-	@Column({
-		...id(),
-		nullable: true,
-	})
-	public appAccessTokenId: AccessToken['id'] | null;
-
-	@ManyToOne(type => AccessToken, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public appAccessToken: AccessToken | null;
-}
diff --git a/packages/backend/src/models/entities/page-like.ts b/packages/backend/src/models/entities/page-like.ts
deleted file mode 100644
index 17f4ebf520..0000000000
--- a/packages/backend/src/models/entities/page-like.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-import { Page } from './page.js';
-
-@Entity()
-@Index(['userId', 'pageId'], { unique: true })
-export class PageLike {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone')
-	public createdAt: Date;
-
-	@Index()
-	@Column(id())
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column(id())
-	public pageId: Page['id'];
-
-	@ManyToOne(type => Page, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public page: Page | null;
-}
diff --git a/packages/backend/src/models/entities/page.ts b/packages/backend/src/models/entities/page.ts
deleted file mode 100644
index baad3a36fa..0000000000
--- a/packages/backend/src/models/entities/page.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import { Entity, Index, JoinColumn, Column, PrimaryColumn, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-import { DriveFile } from './drive-file.js';
-
-@Entity()
-@Index(['userId', 'name'], { unique: true })
-export class Page {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the Page.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The updated date of the Page.',
-	})
-	public updatedAt: Date;
-
-	@Column('varchar', {
-		length: 256,
-	})
-	public title: string;
-
-	@Index()
-	@Column('varchar', {
-		length: 256,
-	})
-	public name: string;
-
-	@Column('varchar', {
-		length: 256, nullable: true,
-	})
-	public summary: string | null;
-
-	@Column('boolean')
-	public alignCenter: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public hideTitleWhenPinned: boolean;
-
-	@Column('varchar', {
-		length: 32,
-	})
-	public font: string;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The ID of author.',
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column({
-		...id(),
-		nullable: true,
-	})
-	public eyeCatchingImageId: DriveFile['id'] | null;
-
-	@ManyToOne(type => DriveFile, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public eyeCatchingImage: DriveFile | null;
-
-	@Column('jsonb', {
-		default: [],
-	})
-	public content: Record<string, any>[];
-
-	@Column('jsonb', {
-		default: [],
-	})
-	public variables: Record<string, any>[];
-
-	@Column('varchar', {
-		length: 16384,
-		default: '',
-	})
-	public script: string;
-
-	/**
-	 * public ... 公開
-	 * followers ... フォロワーのみ
-	 * specified ... visibleUserIds で指定したユーザーのみ
-	 */
-	@Column('enum', { enum: ['public', 'followers', 'specified'] })
-	public visibility: 'public' | 'followers' | 'specified';
-
-	@Index()
-	@Column({
-		...id(),
-		array: true, default: '{}',
-	})
-	public visibleUserIds: User['id'][];
-
-	@Column('integer', {
-		default: 0,
-	})
-	public likedCount: number;
-
-	constructor(data: Partial<Page>) {
-		if (data == null) return;
-
-		for (const [k, v] of Object.entries(data)) {
-			(this as any)[k] = v;
-		}
-	}
-}
diff --git a/packages/backend/src/models/entities/password-reset-request.ts b/packages/backend/src/models/entities/password-reset-request.ts
deleted file mode 100644
index 05e62cc5ab..0000000000
--- a/packages/backend/src/models/entities/password-reset-request.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { PrimaryColumn, Entity, Index, Column, ManyToOne, JoinColumn } from 'typeorm';
-import { id } from '../id.js';
-import { User } from './user.js';
-
-@Entity()
-export class PasswordResetRequest {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone')
-	public createdAt: Date;
-
-	@Index({ unique: true })
-	@Column('varchar', {
-		length: 256,
-	})
-	public token: string;
-
-	@Index()
-	@Column({
-		...id(),
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-}
diff --git a/packages/backend/src/models/entities/poll-vote.ts b/packages/backend/src/models/entities/poll-vote.ts
deleted file mode 100644
index fca1cd0099..0000000000
--- a/packages/backend/src/models/entities/poll-vote.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { Note } from './note.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['userId', 'noteId', 'choice'], { unique: true })
-export class PollVote {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the PollVote.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column(id())
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Index()
-	@Column(id())
-	public noteId: Note['id'];
-
-	@ManyToOne(type => Note, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public note: Note | null;
-
-	@Column('integer')
-	public choice: number;
-}
diff --git a/packages/backend/src/models/entities/poll.ts b/packages/backend/src/models/entities/poll.ts
deleted file mode 100644
index 83d0873cc5..0000000000
--- a/packages/backend/src/models/entities/poll.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, OneToOne } from 'typeorm';
-import { id } from '../id.js';
-import { Note } from './note.js';
-import { User } from './user.js';
-import { noteVisibilities } from '../../types.js';
-
-@Entity()
-export class Poll {
-	@PrimaryColumn(id())
-	public noteId: Note['id'];
-
-	@OneToOne(type => Note, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public note: Note | null;
-
-	@Column('timestamp with time zone', {
-		nullable: true,
-	})
-	public expiresAt: Date | null;
-
-	@Column('boolean')
-	public multiple: boolean;
-
-	@Column('varchar', {
-		length: 128, array: true, default: '{}',
-	})
-	public choices: string[];
-
-	@Column('integer', {
-		array: true,
-	})
-	public votes: number[];
-
-	//#region Denormalized fields
-	@Column('enum', {
-		enum: noteVisibilities,
-		comment: '[Denormalized]',
-	})
-	public noteVisibility: typeof noteVisibilities[number];
-
-	@Index()
-	@Column({
-		...id(),
-		comment: '[Denormalized]',
-	})
-	public userId: User['id'];
-
-	@Index()
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public userHost: string | null;
-	//#endregion
-
-	constructor(data: Partial<Poll>) {
-		if (data == null) return;
-
-		for (const [k, v] of Object.entries(data)) {
-			(this as any)[k] = v;
-		}
-	}
-}
-
-export type IPoll = {
-	choices: string[];
-	votes?: number[];
-	multiple: boolean;
-	expiresAt: Date | null;
-};
diff --git a/packages/backend/src/models/entities/promo-note.ts b/packages/backend/src/models/entities/promo-note.ts
deleted file mode 100644
index d110b81e93..0000000000
--- a/packages/backend/src/models/entities/promo-note.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, OneToOne } from 'typeorm';
-import { Note } from './note.js';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-export class PromoNote {
-	@PrimaryColumn(id())
-	public noteId: Note['id'];
-
-	@OneToOne(type => Note, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public note: Note | null;
-
-	@Column('timestamp with time zone')
-	public expiresAt: Date;
-
-	//#region Denormalized fields
-	@Index()
-	@Column({
-		...id(),
-		comment: '[Denormalized]',
-	})
-	public userId: User['id'];
-	//#endregion
-}
diff --git a/packages/backend/src/models/entities/promo-read.ts b/packages/backend/src/models/entities/promo-read.ts
deleted file mode 100644
index a63b79cd1e..0000000000
--- a/packages/backend/src/models/entities/promo-read.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { Note } from './note.js';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['userId', 'noteId'], { unique: true })
-export class PromoRead {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the PromoRead.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column(id())
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column(id())
-	public noteId: Note['id'];
-
-	@ManyToOne(type => Note, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public note: Note | null;
-}
diff --git a/packages/backend/src/models/entities/registration-tickets.ts b/packages/backend/src/models/entities/registration-tickets.ts
deleted file mode 100644
index 139e40f85e..0000000000
--- a/packages/backend/src/models/entities/registration-tickets.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { PrimaryColumn, Entity, Index, Column } from 'typeorm';
-import { id } from '../id.js';
-
-@Entity()
-export class RegistrationTicket {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone')
-	public createdAt: Date;
-
-	@Index({ unique: true })
-	@Column('varchar', {
-		length: 64,
-	})
-	public code: string;
-}
diff --git a/packages/backend/src/models/entities/registry-item.ts b/packages/backend/src/models/entities/registry-item.ts
deleted file mode 100644
index 283796df91..0000000000
--- a/packages/backend/src/models/entities/registry-item.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-// TODO: 同じdomain、同じscope、同じkeyのレコードは二つ以上存在しないように制約付けたい
-@Entity()
-export class RegistryItem {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the RegistryItem.',
-	})
-	public createdAt: Date;
-
-	@Column('timestamp with time zone', {
-		comment: 'The updated date of the RegistryItem.',
-	})
-	public updatedAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The owner ID.',
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column('varchar', {
-		length: 1024,
-		comment: 'The key of the RegistryItem.',
-	})
-	public key: string;
-
-	@Column('jsonb', {
-		default: {}, nullable: true,
-		comment: 'The value of the RegistryItem.',
-	})
-	public value: any | null;
-
-	@Index()
-	@Column('varchar', {
-		length: 1024, array: true, default: '{}',
-	})
-	public scope: string[];
-
-	// サードパーティアプリに開放するときのためのカラム
-	@Index()
-	@Column('varchar', {
-		length: 512, nullable: true,
-	})
-	public domain: string | null;
-}
diff --git a/packages/backend/src/models/entities/relay.ts b/packages/backend/src/models/entities/relay.ts
deleted file mode 100644
index 94d1929574..0000000000
--- a/packages/backend/src/models/entities/relay.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { PrimaryColumn, Entity, Index, Column } from 'typeorm';
-import { id } from '../id.js';
-
-@Entity()
-export class Relay {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index({ unique: true })
-	@Column('varchar', {
-		length: 512, nullable: false,
-	})
-	public inbox: string;
-
-	@Column('enum', {
-		enum: ['requesting', 'accepted', 'rejected'],
-	})
-	public status: 'requesting' | 'accepted' | 'rejected';
-}
diff --git a/packages/backend/src/models/entities/signin.ts b/packages/backend/src/models/entities/signin.ts
deleted file mode 100644
index ba81f45e49..0000000000
--- a/packages/backend/src/models/entities/signin.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-export class Signin {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the Signin.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column(id())
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column('varchar', {
-		length: 128,
-	})
-	public ip: string;
-
-	@Column('jsonb')
-	public headers: Record<string, any>;
-
-	@Column('boolean')
-	public success: boolean;
-}
diff --git a/packages/backend/src/models/entities/sw-subscription.ts b/packages/backend/src/models/entities/sw-subscription.ts
deleted file mode 100644
index 59144d348b..0000000000
--- a/packages/backend/src/models/entities/sw-subscription.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-export class SwSubscription {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone')
-	public createdAt: Date;
-
-	@Index()
-	@Column(id())
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column('varchar', {
-		length: 512,
-	})
-	public endpoint: string;
-
-	@Column('varchar', {
-		length: 256,
-	})
-	public auth: string;
-
-	@Column('varchar', {
-		length: 128,
-	})
-	public publickey: string;
-}
diff --git a/packages/backend/src/models/entities/used-username.ts b/packages/backend/src/models/entities/used-username.ts
deleted file mode 100644
index eb90bef6ca..0000000000
--- a/packages/backend/src/models/entities/used-username.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { PrimaryColumn, Entity, Column } from 'typeorm';
-
-@Entity()
-export class UsedUsername {
-	@PrimaryColumn('varchar', {
-		length: 128,
-	})
-	public username: string;
-
-	@Column('timestamp with time zone')
-	public createdAt: Date;
-
-	constructor(data: Partial<UsedUsername>) {
-		if (data == null) return;
-
-		for (const [k, v] of Object.entries(data)) {
-			(this as any)[k] = v;
-		}
-	}
-}
diff --git a/packages/backend/src/models/entities/user-group-invitation.ts b/packages/backend/src/models/entities/user-group-invitation.ts
deleted file mode 100644
index 10f357049f..0000000000
--- a/packages/backend/src/models/entities/user-group-invitation.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { UserGroup } from './user-group.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['userId', 'userGroupId'], { unique: true })
-export class UserGroupInvitation {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the UserGroupInvitation.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The user ID.',
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The group ID.',
-	})
-	public userGroupId: UserGroup['id'];
-
-	@ManyToOne(type => UserGroup, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public userGroup: UserGroup | null;
-}
diff --git a/packages/backend/src/models/entities/user-group-joining.ts b/packages/backend/src/models/entities/user-group-joining.ts
deleted file mode 100644
index 62a814218a..0000000000
--- a/packages/backend/src/models/entities/user-group-joining.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { UserGroup } from './user-group.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['userId', 'userGroupId'], { unique: true })
-export class UserGroupJoining {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the UserGroupJoining.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The user ID.',
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The group ID.',
-	})
-	public userGroupId: UserGroup['id'];
-
-	@ManyToOne(type => UserGroup, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public userGroup: UserGroup | null;
-}
diff --git a/packages/backend/src/models/entities/user-group.ts b/packages/backend/src/models/entities/user-group.ts
deleted file mode 100644
index 8d5de1d926..0000000000
--- a/packages/backend/src/models/entities/user-group.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Entity, Index, JoinColumn, Column, PrimaryColumn, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-export class UserGroup {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the UserGroup.',
-	})
-	public createdAt: Date;
-
-	@Column('varchar', {
-		length: 256,
-	})
-	public name: string;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The ID of owner.',
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public isPrivate: boolean;
-
-	constructor(data: Partial<UserGroup>) {
-		if (data == null) return;
-
-		for (const [k, v] of Object.entries(data)) {
-			(this as any)[k] = v;
-		}
-	}
-}
diff --git a/packages/backend/src/models/entities/user-ip.ts b/packages/backend/src/models/entities/user-ip.ts
deleted file mode 100644
index 543e9e7289..0000000000
--- a/packages/backend/src/models/entities/user-ip.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne, PrimaryGeneratedColumn } from 'typeorm';
-import { id } from '../id.js';
-import { Note } from './note.js';
-import { User } from './user.js';
-
-@Entity()
-@Index(['userId', 'ip'], { unique: true })
-export class UserIp {
-	@PrimaryGeneratedColumn()
-	public id: string;
-
-	@Column('timestamp with time zone', {
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column(id())
-	public userId: User['id'];
-
-	@Column('varchar', {
-		length: 128,
-	})
-	public ip: string;
-}
diff --git a/packages/backend/src/models/entities/user-keypair.ts b/packages/backend/src/models/entities/user-keypair.ts
deleted file mode 100644
index 85fa062977..0000000000
--- a/packages/backend/src/models/entities/user-keypair.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { PrimaryColumn, Entity, JoinColumn, Column, OneToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-export class UserKeypair {
-	@PrimaryColumn(id())
-	public userId: User['id'];
-
-	@OneToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column('varchar', {
-		length: 4096,
-	})
-	public publicKey: string;
-
-	@Column('varchar', {
-		length: 4096,
-	})
-	public privateKey: string;
-
-	constructor(data: Partial<UserKeypair>) {
-		if (data == null) return;
-
-		for (const [k, v] of Object.entries(data)) {
-			(this as any)[k] = v;
-		}
-	}
-}
diff --git a/packages/backend/src/models/entities/user-list-joining.ts b/packages/backend/src/models/entities/user-list-joining.ts
deleted file mode 100644
index 12f28c4149..0000000000
--- a/packages/backend/src/models/entities/user-list-joining.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { UserList } from './user-list.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['userId', 'userListId'], { unique: true })
-export class UserListJoining {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the UserListJoining.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The user ID.',
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The list ID.',
-	})
-	public userListId: UserList['id'];
-
-	@ManyToOne(type => UserList, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public userList: UserList | null;
-}
diff --git a/packages/backend/src/models/entities/user-list.ts b/packages/backend/src/models/entities/user-list.ts
deleted file mode 100644
index ca69394e93..0000000000
--- a/packages/backend/src/models/entities/user-list.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-export class UserList {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the UserList.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The owner ID.',
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column('varchar', {
-		length: 128,
-		comment: 'The name of the UserList.',
-	})
-	public name: string;
-}
diff --git a/packages/backend/src/models/entities/user-note-pining.ts b/packages/backend/src/models/entities/user-note-pining.ts
deleted file mode 100644
index c91ab7fdd8..0000000000
--- a/packages/backend/src/models/entities/user-note-pining.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { Note } from './note.js';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-@Index(['userId', 'noteId'], { unique: true })
-export class UserNotePining {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the UserNotePinings.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column(id())
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column(id())
-	public noteId: Note['id'];
-
-	@ManyToOne(type => Note, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public note: Note | null;
-}
diff --git a/packages/backend/src/models/entities/user-pending.ts b/packages/backend/src/models/entities/user-pending.ts
deleted file mode 100644
index 7637948841..0000000000
--- a/packages/backend/src/models/entities/user-pending.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { PrimaryColumn, Entity, Index, Column } from 'typeorm';
-import { id } from '../id.js';
-
-@Entity()
-export class UserPending {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone')
-	public createdAt: Date;
-
-	@Index({ unique: true })
-	@Column('varchar', {
-		length: 128,
-	})
-	public code: string;
-
-	@Column('varchar', {
-		length: 128,
-	})
-	public username: string;
-
-	@Column('varchar', {
-		length: 128,
-	})
-	public email: string;
-
-	@Column('varchar', {
-		length: 128,
-	})
-	public password: string;
-}
diff --git a/packages/backend/src/models/entities/user-profile.ts b/packages/backend/src/models/entities/user-profile.ts
deleted file mode 100644
index 3654b0a994..0000000000
--- a/packages/backend/src/models/entities/user-profile.ts
+++ /dev/null
@@ -1,232 +0,0 @@
-import { Entity, Column, Index, OneToOne, JoinColumn, PrimaryColumn } from 'typeorm';
-import { ffVisibility, notificationTypes } from '@/types.js';
-import { id } from '../id.js';
-import { User } from './user.js';
-import { Page } from './page.js';
-
-// TODO: このテーブルで管理している情報すべてレジストリで管理するようにしても良いかも
-//       ただ、「emailVerified が true なユーザーを find する」のようなクエリは書けなくなるからウーン
-@Entity()
-export class UserProfile {
-	@PrimaryColumn(id())
-	public userId: User['id'];
-
-	@OneToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: 'The location of the User.',
-	})
-	public location: string | null;
-
-	@Column('char', {
-		length: 10, nullable: true,
-		comment: 'The birthday (YYYY-MM-DD) of the User.',
-	})
-	public birthday: string | null;
-
-	@Column('varchar', {
-		length: 2048, nullable: true,
-		comment: 'The description (bio) of the User.',
-	})
-	public description: string | null;
-
-	@Column('jsonb', {
-		default: [],
-	})
-	public fields: {
-		name: string;
-		value: string;
-	}[];
-
-	@Column('varchar', {
-		length: 32, nullable: true,
-	})
-	public lang: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: 'Remote URL of the user.',
-	})
-	public url: string | null;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: 'The email address of the User.',
-	})
-	public email: string | null;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-	})
-	public emailVerifyCode: string | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public emailVerified: boolean;
-
-	@Column('jsonb', {
-		default: ['follow', 'receiveFollowRequest', 'groupInvited'],
-	})
-	public emailNotificationTypes: string[];
-
-	@Column('boolean', {
-		default: false,
-	})
-	public publicReactions: boolean;
-
-	@Column('enum', {
-		enum: ffVisibility,
-		default: 'public',
-	})
-	public ffVisibility: typeof ffVisibility[number];
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-	})
-	public twoFactorTempSecret: string | null;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-	})
-	public twoFactorSecret: string | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public twoFactorEnabled: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public securityKeysAvailable: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public usePasswordLessLogin: boolean;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: 'The password hash of the User. It will be null if the origin of the user is local.',
-	})
-	public password: string | null;
-
-	@Column('varchar', {
-		length: 8192, default: '',
-	})
-	public moderationNote: string | null;
-
-	// TODO: そのうち消す
-	@Column('jsonb', {
-		default: {},
-		comment: 'The client-specific data of the User.',
-	})
-	public clientData: Record<string, any>;
-
-	// TODO: そのうち消す
-	@Column('jsonb', {
-		default: {},
-		comment: 'The room data of the User.',
-	})
-	public room: Record<string, any>;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public autoAcceptFollowed: boolean;
-
-	@Column('boolean', {
-		default: false,
-		comment: 'Whether reject index by crawler.',
-	})
-	public noCrawle: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public alwaysMarkNsfw: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public autoSensitive: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public carefulBot: boolean;
-
-	@Column('boolean', {
-		default: true,
-	})
-	public injectFeaturedNote: boolean;
-
-	@Column('boolean', {
-		default: true,
-	})
-	public receiveAnnouncementEmail: boolean;
-
-	@Column({
-		...id(),
-		nullable: true,
-	})
-	public pinnedPageId: Page['id'] | null;
-
-	@OneToOne(type => Page, {
-		onDelete: 'SET NULL',
-	})
-	@JoinColumn()
-	public pinnedPage: Page | null;
-
-	@Column('jsonb', {
-		default: {},
-	})
-	public integrations: Record<string, any>;
-
-	@Index()
-	@Column('boolean', {
-		default: false, select: false,
-	})
-	public enableWordMute: boolean;
-
-	@Column('jsonb', {
-		default: [],
-	})
-	public mutedWords: string[][];
-
-	@Column('jsonb', {
-		default: [],
-		comment: 'List of instances muted by the user.',
-	})
-	public mutedInstances: string[];
-
-	@Column('enum', {
-		enum: notificationTypes,
-		array: true,
-		default: [],
-	})
-	public mutingNotificationTypes: typeof notificationTypes[number][];
-
-	//#region Denormalized fields
-	@Index()
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: '[Denormalized]',
-	})
-	public userHost: string | null;
-	//#endregion
-
-	constructor(data: Partial<UserProfile>) {
-		if (data == null) return;
-
-		for (const [k, v] of Object.entries(data)) {
-			(this as any)[k] = v;
-		}
-	}
-}
diff --git a/packages/backend/src/models/entities/user-publickey.ts b/packages/backend/src/models/entities/user-publickey.ts
deleted file mode 100644
index 31ed60de82..0000000000
--- a/packages/backend/src/models/entities/user-publickey.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, OneToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-export class UserPublickey {
-	@PrimaryColumn(id())
-	public userId: User['id'];
-
-	@OneToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Index({ unique: true })
-	@Column('varchar', {
-		length: 256,
-	})
-	public keyId: string;
-
-	@Column('varchar', {
-		length: 4096,
-	})
-	public keyPem: string;
-
-	constructor(data: Partial<UserPublickey>) {
-		if (data == null) return;
-
-		for (const [k, v] of Object.entries(data)) {
-			(this as any)[k] = v;
-		}
-	}
-}
diff --git a/packages/backend/src/models/entities/user-security-key.ts b/packages/backend/src/models/entities/user-security-key.ts
deleted file mode 100644
index c4f2a852e2..0000000000
--- a/packages/backend/src/models/entities/user-security-key.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { PrimaryColumn, Entity, JoinColumn, Column, ManyToOne, Index } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-@Entity()
-export class UserSecurityKey {
-	@PrimaryColumn('varchar', {
-		comment: 'Variable-length id given to navigator.credentials.get()',
-	})
-	public id: string;
-
-	@Index()
-	@Column(id())
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Index()
-	@Column('varchar', {
-		comment:
-			'Variable-length public key used to verify attestations (hex-encoded).',
-	})
-	public publicKey: string;
-
-	@Column('timestamp with time zone', {
-		comment:
-			'The date of the last time the UserSecurityKey was successfully validated.',
-	})
-	public lastUsed: Date;
-
-	@Column('varchar', {
-		comment: 'User-defined name for this key',
-		length: 30,
-	})
-	public name: string;
-
-	constructor(data: Partial<UserSecurityKey>) {
-		if (data == null) return;
-
-		for (const [k, v] of Object.entries(data)) {
-			(this as any)[k] = v;
-		}
-	}
-}
diff --git a/packages/backend/src/models/entities/user.ts b/packages/backend/src/models/entities/user.ts
deleted file mode 100644
index bc9446be41..0000000000
--- a/packages/backend/src/models/entities/user.ts
+++ /dev/null
@@ -1,248 +0,0 @@
-import { Entity, Column, Index, OneToOne, JoinColumn, PrimaryColumn } from 'typeorm';
-import { id } from '../id.js';
-import { DriveFile } from './drive-file.js';
-
-@Entity()
-@Index(['usernameLower', 'host'], { unique: true })
-export class User {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the User.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		nullable: true,
-		comment: 'The updated date of the User.',
-	})
-	public updatedAt: Date | null;
-
-	@Column('timestamp with time zone', {
-		nullable: true,
-	})
-	public lastFetchedAt: Date | null;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		nullable: true,
-	})
-	public lastActiveDate: Date | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public hideOnlineStatus: boolean;
-
-	@Column('varchar', {
-		length: 128,
-		comment: 'The username of the User.',
-	})
-	public username: string;
-
-	@Index()
-	@Column('varchar', {
-		length: 128, select: false,
-		comment: 'The username (lowercased) of the User.',
-	})
-	public usernameLower: string;
-
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: 'The name of the User.',
-	})
-	public name: string | null;
-
-	@Column('integer', {
-		default: 0,
-		comment: 'The count of followers.',
-	})
-	public followersCount: number;
-
-	@Column('integer', {
-		default: 0,
-		comment: 'The count of following.',
-	})
-	public followingCount: number;
-
-	@Column('integer', {
-		default: 0,
-		comment: 'The count of notes.',
-	})
-	public notesCount: number;
-
-	@Column({
-		...id(),
-		nullable: true,
-		comment: 'The ID of avatar DriveFile.',
-	})
-	public avatarId: DriveFile['id'] | null;
-
-	@OneToOne(type => DriveFile, {
-		onDelete: 'SET NULL',
-	})
-	@JoinColumn()
-	public avatar: DriveFile | null;
-
-	@Column({
-		...id(),
-		nullable: true,
-		comment: 'The ID of banner DriveFile.',
-	})
-	public bannerId: DriveFile['id'] | null;
-
-	@OneToOne(type => DriveFile, {
-		onDelete: 'SET NULL',
-	})
-	@JoinColumn()
-	public banner: DriveFile | null;
-
-	@Index()
-	@Column('varchar', {
-		length: 128, array: true, default: '{}',
-	})
-	public tags: string[];
-
-	@Column('boolean', {
-		default: false,
-		comment: 'Whether the User is suspended.',
-	})
-	public isSuspended: boolean;
-
-	@Column('boolean', {
-		default: false,
-		comment: 'Whether the User is silenced.',
-	})
-	public isSilenced: boolean;
-
-	@Column('boolean', {
-		default: false,
-		comment: 'Whether the User is locked.',
-	})
-	public isLocked: boolean;
-
-	@Column('boolean', {
-		default: false,
-		comment: 'Whether the User is a bot.',
-	})
-	public isBot: boolean;
-
-	@Column('boolean', {
-		default: false,
-		comment: 'Whether the User is a cat.',
-	})
-	public isCat: boolean;
-
-	@Column('boolean', {
-		default: false,
-		comment: 'Whether the User is the admin.',
-	})
-	public isAdmin: boolean;
-
-	@Column('boolean', {
-		default: false,
-		comment: 'Whether the User is a moderator.',
-	})
-	public isModerator: boolean;
-
-	@Index()
-	@Column('boolean', {
-		default: true,
-		comment: 'Whether the User is explorable.',
-	})
-	public isExplorable: boolean;
-
-	// アカウントが削除されたかどうかのフラグだが、完全に削除される際は物理削除なので実質削除されるまでの「削除が進行しているかどうか」のフラグ
-	@Column('boolean', {
-		default: false,
-		comment: 'Whether the User is deleted.',
-	})
-	public isDeleted: boolean;
-
-	@Column('varchar', {
-		length: 128, array: true, default: '{}',
-	})
-	public emojis: string[];
-
-	@Index()
-	@Column('varchar', {
-		length: 128, nullable: true,
-		comment: 'The host of the User. It will be null if the origin of the user is local.',
-	})
-	public host: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: 'The inbox URL of the User. It will be null if the origin of the user is local.',
-	})
-	public inbox: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: 'The sharedInbox URL of the User. It will be null if the origin of the user is local.',
-	})
-	public sharedInbox: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: 'The featured URL of the User. It will be null if the origin of the user is local.',
-	})
-	public featured: string | null;
-
-	@Index()
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: 'The URI of the User. It will be null if the origin of the user is local.',
-	})
-	public uri: string | null;
-
-	@Column('varchar', {
-		length: 512, nullable: true,
-		comment: 'The URI of the user Follower Collection. It will be null if the origin of the user is local.',
-	})
-	public followersUri: string | null;
-
-	@Column('boolean', {
-		default: false,
-		comment: 'Whether to show users replying to other users in the timeline.',
-	})
-	public showTimelineReplies: boolean;
-
-	@Index({ unique: true })
-	@Column('char', {
-		length: 16, nullable: true, unique: true,
-		comment: 'The native access token of the User. It will be null if the origin of the user is local.',
-	})
-	public token: string | null;
-
-	@Column('integer', {
-		nullable: true,
-		comment: 'Overrides user drive capacity limit',
-	})
-	public driveCapacityOverrideMb: number | null;
-
-	constructor(data: Partial<User>) {
-		if (data == null) return;
-
-		for (const [k, v] of Object.entries(data)) {
-			(this as any)[k] = v;
-		}
-	}
-}
-
-export interface ILocalUser extends User {
-	host: null;
-}
-
-export interface IRemoteUser extends User {
-	host: string;
-}
-
-export type CacheableLocalUser = ILocalUser;
-
-export type CacheableRemoteUser = IRemoteUser;
-
-export type CacheableUser = CacheableLocalUser | CacheableRemoteUser;
diff --git a/packages/backend/src/models/entities/webhook.ts b/packages/backend/src/models/entities/webhook.ts
deleted file mode 100644
index 56b411f879..0000000000
--- a/packages/backend/src/models/entities/webhook.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from './user.js';
-import { id } from '../id.js';
-
-export const webhookEventTypes = ['mention', 'unfollow', 'follow', 'followed', 'note', 'reply', 'renote', 'reaction'] as const;
-
-@Entity()
-export class Webhook {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the Antenna.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column({
-		...id(),
-		comment: 'The owner ID.',
-	})
-	public userId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user: User | null;
-
-	@Column('varchar', {
-		length: 128,
-		comment: 'The name of the Antenna.',
-	})
-	public name: string;
-
-	@Index()
-	@Column('varchar', {
-		length: 128, array: true, default: '{}',
-	})
-	public on: (typeof webhookEventTypes)[number][];
-
-	@Column('varchar', {
-		length: 1024,
-	})
-	public url: string;
-
-	@Column('varchar', {
-		length: 1024,
-	})
-	public secret: string;
-
-	@Index()
-	@Column('boolean', {
-		default: true,
-	})
-	public active: boolean;
-
-	/**
-	 * 直近のリクエスト送信日時
-	 */
-	@Column('timestamp with time zone', {
-		nullable: true,
-	})
-	public latestSentAt: Date | null;
-
-	/**
-	 * 直近のリクエスト送信時のHTTPステータスコード
-	 */
-	@Column('integer', {
-		nullable: true,
-	})
-	public latestStatus: number | null;
-}
diff --git a/packages/backend/src/models/index.ts b/packages/backend/src/models/index.ts
index 3f73269318..559ed8c45a 100644
--- a/packages/backend/src/models/index.ts
+++ b/packages/backend/src/models/index.ts
@@ -1,133 +1,194 @@
-import { } from 'typeorm';
-import { db } from '@/db/postgre.js';
+import { AbuseUserReport } from '@/models/entities/AbuseUserReport.js';
+import { AccessToken } from '@/models/entities/AccessToken.js';
+import { Ad } from '@/models/entities/Ad.js';
+import { Announcement } from '@/models/entities/Announcement.js';
+import { AnnouncementRead } from '@/models/entities/AnnouncementRead.js';
+import { Antenna } from '@/models/entities/Antenna.js';
+import { AntennaNote } from '@/models/entities/AntennaNote.js';
+import { App } from '@/models/entities/App.js';
+import { AttestationChallenge } from '@/models/entities/AttestationChallenge.js';
+import { AuthSession } from '@/models/entities/AuthSession.js';
+import { Blocking } from '@/models/entities/Blocking.js';
+import { ChannelFollowing } from '@/models/entities/ChannelFollowing.js';
+import { ChannelNotePining } from '@/models/entities/ChannelNotePining.js';
+import { Clip } from '@/models/entities/Clip.js';
+import { ClipNote } from '@/models/entities/ClipNote.js';
+import { DriveFile } from '@/models/entities/DriveFile.js';
+import { DriveFolder } from '@/models/entities/DriveFolder.js';
+import { Emoji } from '@/models/entities/Emoji.js';
+import { Following } from '@/models/entities/Following.js';
+import { FollowRequest } from '@/models/entities/FollowRequest.js';
+import { GalleryLike } from '@/models/entities/GalleryLike.js';
+import { GalleryPost } from '@/models/entities/GalleryPost.js';
+import { Hashtag } from '@/models/entities/Hashtag.js';
+import { Instance } from '@/models/entities/Instance.js';
+import { MessagingMessage } from '@/models/entities/MessagingMessage.js';
+import { Meta } from '@/models/entities/Meta.js';
+import { ModerationLog } from '@/models/entities/ModerationLog.js';
+import { MutedNote } from '@/models/entities/MutedNote.js';
+import { Muting } from '@/models/entities/Muting.js';
+import { Note } from '@/models/entities/Note.js';
+import { NoteFavorite } from '@/models/entities/NoteFavorite.js';
+import { NoteReaction } from '@/models/entities/NoteReaction.js';
+import { NoteThreadMuting } from '@/models/entities/NoteThreadMuting.js';
+import { NoteUnread } from '@/models/entities/NoteUnread.js';
+import { Notification } from '@/models/entities/Notification.js';
+import { Page } from '@/models/entities/Page.js';
+import { PageLike } from '@/models/entities/PageLike.js';
+import { PasswordResetRequest } from '@/models/entities/PasswordResetRequest.js';
+import { Poll } from '@/models/entities/Poll.js';
+import { PollVote } from '@/models/entities/PollVote.js';
+import { PromoNote } from '@/models/entities/PromoNote.js';
+import { PromoRead } from '@/models/entities/PromoRead.js';
+import { RegistrationTicket } from '@/models/entities/RegistrationTickets.js';
+import { RegistryItem } from '@/models/entities/RegistryItem.js';
+import { Relay } from '@/models/entities/Relay.js';
+import { Signin } from '@/models/entities/Signin.js';
+import { SwSubscription } from '@/models/entities/SwSubscription.js';
+import { UsedUsername } from '@/models/entities/UsedUsername.js';
+import { User } from '@/models/entities/User.js';
+import { UserGroup } from '@/models/entities/UserGroup.js';
+import { UserGroupInvitation } from '@/models/entities/UserGroupInvitation.js';
+import { UserGroupJoining } from '@/models/entities/UserGroupJoining.js';
+import { UserIp } from '@/models/entities/UserIp.js';
+import { UserKeypair } from '@/models/entities/UserKeypair.js';
+import { UserList } from '@/models/entities/UserList.js';
+import { UserListJoining } from '@/models/entities/UserListJoining.js';
+import { UserNotePining } from '@/models/entities/UserNotePining.js';
+import { UserPending } from '@/models/entities/UserPending.js';
+import { UserProfile } from '@/models/entities/UserProfile.js';
+import { UserPublickey } from '@/models/entities/UserPublickey.js';
+import { UserSecurityKey } from '@/models/entities/UserSecurityKey.js';
+import { Webhook } from '@/models/entities/Webhook.js';
+import { Channel } from '@/models/entities/Channel.js';
+import type { Repository } from 'typeorm';
 
-import { Announcement } from './entities/announcement.js';
-import { AnnouncementRead } from './entities/announcement-read.js';
-import { Instance } from './entities/instance.js';
-import { Poll } from './entities/poll.js';
-import { PollVote } from './entities/poll-vote.js';
-import { Meta } from './entities/meta.js';
-import { SwSubscription } from './entities/sw-subscription.js';
-import { NoteWatching } from './entities/note-watching.js';
-import { NoteThreadMuting } from './entities/note-thread-muting.js';
-import { NoteUnread } from './entities/note-unread.js';
-import { RegistrationTicket } from './entities/registration-tickets.js';
-import { UserRepository } from './repositories/user.js';
-import { NoteRepository } from './repositories/note.js';
-import { DriveFileRepository } from './repositories/drive-file.js';
-import { DriveFolderRepository } from './repositories/drive-folder.js';
-import { AccessToken } from './entities/access-token.js';
-import { UserNotePining } from './entities/user-note-pining.js';
-import { SigninRepository } from './repositories/signin.js';
-import { MessagingMessageRepository } from './repositories/messaging-message.js';
-import { UserListRepository } from './repositories/user-list.js';
-import { UserListJoining } from './entities/user-list-joining.js';
-import { UserGroupRepository } from './repositories/user-group.js';
-import { UserGroupJoining } from './entities/user-group-joining.js';
-import { UserGroupInvitationRepository } from './repositories/user-group-invitation.js';
-import { FollowRequestRepository } from './repositories/follow-request.js';
-import { MutingRepository } from './repositories/muting.js';
-import { BlockingRepository } from './repositories/blocking.js';
-import { NoteReactionRepository } from './repositories/note-reaction.js';
-import { NotificationRepository } from './repositories/notification.js';
-import { NoteFavoriteRepository } from './repositories/note-favorite.js';
-import { UserPublickey } from './entities/user-publickey.js';
-import { UserKeypair } from './entities/user-keypair.js';
-import { AppRepository } from './repositories/app.js';
-import { FollowingRepository } from './repositories/following.js';
-import { AbuseUserReportRepository } from './repositories/abuse-user-report.js';
-import { AuthSessionRepository } from './repositories/auth-session.js';
-import { UserProfile } from './entities/user-profile.js';
-import { AttestationChallenge } from './entities/attestation-challenge.js';
-import { UserSecurityKey } from './entities/user-security-key.js';
-import { HashtagRepository } from './repositories/hashtag.js';
-import { PageRepository } from './repositories/page.js';
-import { PageLikeRepository } from './repositories/page-like.js';
-import { GalleryPostRepository } from './repositories/gallery-post.js';
-import { GalleryLikeRepository } from './repositories/gallery-like.js';
-import { ModerationLogRepository } from './repositories/moderation-logs.js';
-import { UsedUsername } from './entities/used-username.js';
-import { ClipRepository } from './repositories/clip.js';
-import { ClipNote } from './entities/clip-note.js';
-import { AntennaRepository } from './repositories/antenna.js';
-import { AntennaNote } from './entities/antenna-note.js';
-import { PromoNote } from './entities/promo-note.js';
-import { PromoRead } from './entities/promo-read.js';
-import { EmojiRepository } from './repositories/emoji.js';
-import { RelayRepository } from './repositories/relay.js';
-import { ChannelRepository } from './repositories/channel.js';
-import { MutedNote } from './entities/muted-note.js';
-import { ChannelFollowing } from './entities/channel-following.js';
-import { ChannelNotePining } from './entities/channel-note-pining.js';
-import { RegistryItem } from './entities/registry-item.js';
-import { Ad } from './entities/ad.js';
-import { PasswordResetRequest } from './entities/password-reset-request.js';
-import { UserPending } from './entities/user-pending.js';
-import { InstanceRepository } from './repositories/instance.js';
-import { Webhook } from './entities/webhook.js';
-import { UserIp } from './entities/user-ip.js';
+export {
+	AbuseUserReport,
+	AccessToken,
+	Ad,
+	Announcement,
+	AnnouncementRead,
+	Antenna,
+	AntennaNote,
+	App,
+	AttestationChallenge,
+	AuthSession,
+	Blocking,
+	ChannelFollowing,
+	ChannelNotePining,
+	Clip,
+	ClipNote,
+	DriveFile,
+	DriveFolder,
+	Emoji,
+	Following,
+	FollowRequest,
+	GalleryLike,
+	GalleryPost,
+	Hashtag,
+	Instance,
+	MessagingMessage,
+	Meta,
+	ModerationLog,
+	MutedNote,
+	Muting,
+	Note,
+	NoteFavorite,
+	NoteReaction,
+	NoteThreadMuting,
+	NoteUnread,
+	Notification,
+	Page,
+	PageLike,
+	PasswordResetRequest,
+	Poll,
+	PollVote,
+	PromoNote,
+	PromoRead,
+	RegistrationTicket,
+	RegistryItem,
+	Relay,
+	Signin,
+	SwSubscription,
+	UsedUsername,
+	User,
+	UserGroup,
+	UserGroupInvitation,
+	UserGroupJoining,
+	UserIp,
+	UserKeypair,
+	UserList,
+	UserListJoining,
+	UserNotePining,
+	UserPending,
+	UserProfile,
+	UserPublickey,
+	UserSecurityKey,
+	Webhook,
+	Channel,
+};
 
-export const Announcements = db.getRepository(Announcement);
-export const AnnouncementReads = db.getRepository(AnnouncementRead);
-export const Apps = (AppRepository);
-export const Notes = (NoteRepository);
-export const NoteFavorites = (NoteFavoriteRepository);
-export const NoteWatchings = db.getRepository(NoteWatching);
-export const NoteThreadMutings = db.getRepository(NoteThreadMuting);
-export const NoteReactions = (NoteReactionRepository);
-export const NoteUnreads = db.getRepository(NoteUnread);
-export const Polls = db.getRepository(Poll);
-export const PollVotes = db.getRepository(PollVote);
-export const Users = (UserRepository);
-export const UserProfiles = db.getRepository(UserProfile);
-export const UserKeypairs = db.getRepository(UserKeypair);
-export const UserPendings = db.getRepository(UserPending);
-export const AttestationChallenges = db.getRepository(AttestationChallenge);
-export const UserSecurityKeys = db.getRepository(UserSecurityKey);
-export const UserPublickeys = db.getRepository(UserPublickey);
-export const UserLists = (UserListRepository);
-export const UserListJoinings = db.getRepository(UserListJoining);
-export const UserGroups = (UserGroupRepository);
-export const UserGroupJoinings = db.getRepository(UserGroupJoining);
-export const UserGroupInvitations = (UserGroupInvitationRepository);
-export const UserNotePinings = db.getRepository(UserNotePining);
-export const UserIps = db.getRepository(UserIp);
-export const UsedUsernames = db.getRepository(UsedUsername);
-export const Followings = (FollowingRepository);
-export const FollowRequests = (FollowRequestRepository);
-export const Instances = (InstanceRepository);
-export const Emojis = (EmojiRepository);
-export const DriveFiles = (DriveFileRepository);
-export const DriveFolders = (DriveFolderRepository);
-export const Notifications = (NotificationRepository);
-export const Metas = db.getRepository(Meta);
-export const Mutings = (MutingRepository);
-export const Blockings = (BlockingRepository);
-export const SwSubscriptions = db.getRepository(SwSubscription);
-export const Hashtags = (HashtagRepository);
-export const AbuseUserReports = (AbuseUserReportRepository);
-export const RegistrationTickets = db.getRepository(RegistrationTicket);
-export const AuthSessions = (AuthSessionRepository);
-export const AccessTokens = db.getRepository(AccessToken);
-export const Signins = (SigninRepository);
-export const MessagingMessages = (MessagingMessageRepository);
-export const Pages = (PageRepository);
-export const PageLikes = (PageLikeRepository);
-export const GalleryPosts = (GalleryPostRepository);
-export const GalleryLikes = (GalleryLikeRepository);
-export const ModerationLogs = (ModerationLogRepository);
-export const Clips = (ClipRepository);
-export const ClipNotes = db.getRepository(ClipNote);
-export const Antennas = (AntennaRepository);
-export const AntennaNotes = db.getRepository(AntennaNote);
-export const PromoNotes = db.getRepository(PromoNote);
-export const PromoReads = db.getRepository(PromoRead);
-export const Relays = (RelayRepository);
-export const MutedNotes = db.getRepository(MutedNote);
-export const Channels = (ChannelRepository);
-export const ChannelFollowings = db.getRepository(ChannelFollowing);
-export const ChannelNotePinings = db.getRepository(ChannelNotePining);
-export const RegistryItems = db.getRepository(RegistryItem);
-export const Webhooks = db.getRepository(Webhook);
-export const Ads = db.getRepository(Ad);
-export const PasswordResetRequests = db.getRepository(PasswordResetRequest);
+export type AbuseUserReportsRepository = Repository<AbuseUserReport>;
+export type AccessTokensRepository = Repository<AccessToken>;
+export type AdsRepository = Repository<Ad>;
+export type AnnouncementsRepository = Repository<Announcement>;
+export type AnnouncementReadsRepository = Repository<AnnouncementRead>;
+export type AntennasRepository = Repository<Antenna>;
+export type AntennaNotesRepository = Repository<AntennaNote>;
+export type AppsRepository = Repository<App>;
+export type AttestationChallengesRepository = Repository<AttestationChallenge>;
+export type AuthSessionsRepository = Repository<AuthSession>;
+export type BlockingsRepository = Repository<Blocking>;
+export type ChannelFollowingsRepository = Repository<ChannelFollowing>;
+export type ChannelNotePiningsRepository = Repository<ChannelNotePining>;
+export type ClipsRepository = Repository<Clip>;
+export type ClipNotesRepository = Repository<ClipNote>;
+export type DriveFilesRepository = Repository<DriveFile>;
+export type DriveFoldersRepository = Repository<DriveFolder>;
+export type EmojisRepository = Repository<Emoji>;
+export type FollowingsRepository = Repository<Following>;
+export type FollowRequestsRepository = Repository<FollowRequest>;
+export type GalleryLikesRepository = Repository<GalleryLike>;
+export type GalleryPostsRepository = Repository<GalleryPost>;
+export type HashtagsRepository = Repository<Hashtag>;
+export type InstancesRepository = Repository<Instance>;
+export type MessagingMessagesRepository = Repository<MessagingMessage>;
+export type MetasRepository = Repository<Meta>;
+export type ModerationLogsRepository = Repository<ModerationLog>;
+export type MutedNotesRepository = Repository<MutedNote>;
+export type MutingsRepository = Repository<Muting>;
+export type NotesRepository = Repository<Note>;
+export type NoteFavoritesRepository = Repository<NoteFavorite>;
+export type NoteReactionsRepository = Repository<NoteReaction>;
+export type NoteThreadMutingsRepository = Repository<NoteThreadMuting>;
+export type NoteUnreadsRepository = Repository<NoteUnread>;
+export type NotificationsRepository = Repository<Notification>;
+export type PagesRepository = Repository<Page>;
+export type PageLikesRepository = Repository<PageLike>;
+export type PasswordResetRequestsRepository = Repository<PasswordResetRequest>;
+export type PollsRepository = Repository<Poll>;
+export type PollVotesRepository = Repository<PollVote>;
+export type PromoNotesRepository = Repository<PromoNote>;
+export type PromoReadsRepository = Repository<PromoRead>;
+export type RegistrationTicketsRepository = Repository<RegistrationTicket>;
+export type RegistryItemsRepository = Repository<RegistryItem>;
+export type RelaysRepository = Repository<Relay>;
+export type SigninsRepository = Repository<Signin>;
+export type SwSubscriptionsRepository = Repository<SwSubscription>;
+export type UsedUsernamesRepository = Repository<UsedUsername>;
+export type UsersRepository = Repository<User>;
+export type UserGroupsRepository = Repository<UserGroup>;
+export type UserGroupInvitationsRepository = Repository<UserGroupInvitation>;
+export type UserGroupJoiningsRepository = Repository<UserGroupJoining>;
+export type UserIpsRepository = Repository<UserIp>;
+export type UserKeypairsRepository = Repository<UserKeypair>;
+export type UserListsRepository = Repository<UserList>;
+export type UserListJoiningsRepository = Repository<UserListJoining>;
+export type UserNotePiningsRepository = Repository<UserNotePining>;
+export type UserPendingsRepository = Repository<UserPending>;
+export type UserProfilesRepository = Repository<UserProfile>;
+export type UserPublickeysRepository = Repository<UserPublickey>;
+export type UserSecurityKeysRepository = Repository<UserSecurityKey>;
+export type WebhooksRepository = Repository<Webhook>;
+export type ChannelsRepository = Repository<Channel>;
diff --git a/packages/backend/src/models/repositories/abuse-user-report.ts b/packages/backend/src/models/repositories/abuse-user-report.ts
deleted file mode 100644
index 36d7ab90c5..0000000000
--- a/packages/backend/src/models/repositories/abuse-user-report.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { Users } from '../index.js';
-import { AbuseUserReport } from '@/models/entities/abuse-user-report.js';
-import { awaitAll } from '@/prelude/await-all.js';
-
-export const AbuseUserReportRepository = db.getRepository(AbuseUserReport).extend({
-	async pack(
-		src: AbuseUserReport['id'] | AbuseUserReport,
-	) {
-		const report = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return await awaitAll({
-			id: report.id,
-			createdAt: report.createdAt.toISOString(),
-			comment: report.comment,
-			resolved: report.resolved,
-			reporterId: report.reporterId,
-			targetUserId: report.targetUserId,
-			assigneeId: report.assigneeId,
-			reporter: Users.pack(report.reporter || report.reporterId, null, {
-				detail: true,
-			}),
-			targetUser: Users.pack(report.targetUser || report.targetUserId, null, {
-				detail: true,
-			}),
-			assignee: report.assigneeId ? Users.pack(report.assignee || report.assigneeId, null, {
-				detail: true,
-			}) : null,
-			forwarded: report.forwarded,
-		});
-	},
-
-	packMany(
-		reports: any[],
-	) {
-		return Promise.all(reports.map(x => this.pack(x)));
-	},
-});
diff --git a/packages/backend/src/models/repositories/antenna.ts b/packages/backend/src/models/repositories/antenna.ts
deleted file mode 100644
index 70180e2dec..0000000000
--- a/packages/backend/src/models/repositories/antenna.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { Antenna } from '@/models/entities/antenna.js';
-import { Packed } from '@/misc/schema.js';
-import { AntennaNotes, UserGroupJoinings } from '../index.js';
-
-export const AntennaRepository = db.getRepository(Antenna).extend({
-	async pack(
-		src: Antenna['id'] | Antenna,
-	): Promise<Packed<'Antenna'>> {
-		const antenna = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		const hasUnreadNote = (await AntennaNotes.findOneBy({ antennaId: antenna.id, read: false })) != null;
-		const userGroupJoining = antenna.userGroupJoiningId ? await UserGroupJoinings.findOneBy({ id: antenna.userGroupJoiningId }) : null;
-
-		return {
-			id: antenna.id,
-			createdAt: antenna.createdAt.toISOString(),
-			name: antenna.name,
-			keywords: antenna.keywords,
-			excludeKeywords: antenna.excludeKeywords,
-			src: antenna.src,
-			userListId: antenna.userListId,
-			userGroupId: userGroupJoining ? userGroupJoining.userGroupId : null,
-			users: antenna.users,
-			caseSensitive: antenna.caseSensitive,
-			notify: antenna.notify,
-			withReplies: antenna.withReplies,
-			withFile: antenna.withFile,
-			hasUnreadNote,
-		};
-	},
-});
diff --git a/packages/backend/src/models/repositories/app.ts b/packages/backend/src/models/repositories/app.ts
deleted file mode 100644
index e08dd6f0e3..0000000000
--- a/packages/backend/src/models/repositories/app.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { App } from '@/models/entities/app.js';
-import { AccessTokens } from '../index.js';
-import { Packed } from '@/misc/schema.js';
-import { User } from '../entities/user.js';
-
-export const AppRepository = db.getRepository(App).extend({
-	async pack(
-		src: App['id'] | App,
-		me?: { id: User['id'] } | null | undefined,
-		options?: {
-			detail?: boolean,
-			includeSecret?: boolean,
-			includeProfileImageIds?: boolean
-		}
-	): Promise<Packed<'App'>> {
-		const opts = Object.assign({
-			detail: false,
-			includeSecret: false,
-			includeProfileImageIds: false,
-		}, options);
-
-		const app = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return {
-			id: app.id,
-			name: app.name,
-			callbackUrl: app.callbackUrl,
-			permission: app.permission,
-			...(opts.includeSecret ? { secret: app.secret } : {}),
-			...(me ? {
-				isAuthorized: await AccessTokens.countBy({
-					appId: app.id,
-					userId: me.id,
-				}).then(count => count > 0),
-			} : {}),
-		};
-	},
-});
diff --git a/packages/backend/src/models/repositories/auth-session.ts b/packages/backend/src/models/repositories/auth-session.ts
deleted file mode 100644
index 3f1f6f4897..0000000000
--- a/packages/backend/src/models/repositories/auth-session.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { Apps } from '../index.js';
-import { AuthSession } from '@/models/entities/auth-session.js';
-import { awaitAll } from '@/prelude/await-all.js';
-import { User } from '@/models/entities/user.js';
-
-export const AuthSessionRepository = db.getRepository(AuthSession).extend({
-	async pack(
-		src: AuthSession['id'] | AuthSession,
-		me?: { id: User['id'] } | null | undefined
-	) {
-		const session = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return await awaitAll({
-			id: session.id,
-			app: Apps.pack(session.appId, me),
-			token: session.token,
-		});
-	},
-});
diff --git a/packages/backend/src/models/repositories/blocking.ts b/packages/backend/src/models/repositories/blocking.ts
deleted file mode 100644
index 1d569fb875..0000000000
--- a/packages/backend/src/models/repositories/blocking.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { Users } from '../index.js';
-import { Blocking } from '@/models/entities/blocking.js';
-import { awaitAll } from '@/prelude/await-all.js';
-import { Packed } from '@/misc/schema.js';
-import { User } from '@/models/entities/user.js';
-
-export const BlockingRepository = db.getRepository(Blocking).extend({
-	async pack(
-		src: Blocking['id'] | Blocking,
-		me?: { id: User['id'] } | null | undefined
-	): Promise<Packed<'Blocking'>> {
-		const blocking = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return await awaitAll({
-			id: blocking.id,
-			createdAt: blocking.createdAt.toISOString(),
-			blockeeId: blocking.blockeeId,
-			blockee: Users.pack(blocking.blockeeId, me, {
-				detail: true,
-			}),
-		});
-	},
-
-	packMany(
-		blockings: any[],
-		me: { id: User['id'] }
-	) {
-		return Promise.all(blockings.map(x => this.pack(x, me)));
-	},
-});
diff --git a/packages/backend/src/models/repositories/channel.ts b/packages/backend/src/models/repositories/channel.ts
deleted file mode 100644
index 213ac3671a..0000000000
--- a/packages/backend/src/models/repositories/channel.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { Channel } from '@/models/entities/channel.js';
-import { Packed } from '@/misc/schema.js';
-import { DriveFiles, ChannelFollowings, NoteUnreads } from '../index.js';
-import { User } from '@/models/entities/user.js';
-
-export const ChannelRepository = db.getRepository(Channel).extend({
-	async pack(
-		src: Channel['id'] | Channel,
-		me?: { id: User['id'] } | null | undefined,
-	): Promise<Packed<'Channel'>> {
-		const channel = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-		const meId = me ? me.id : null;
-
-		const banner = channel.bannerId ? await DriveFiles.findOneBy({ id: channel.bannerId }) : null;
-
-		const hasUnreadNote = meId ? (await NoteUnreads.findOneBy({ noteChannelId: channel.id, userId: meId })) != null : undefined;
-
-		const following = meId ? await ChannelFollowings.findOneBy({
-			followerId: meId,
-			followeeId: channel.id,
-		}) : null;
-
-		return {
-			id: channel.id,
-			createdAt: channel.createdAt.toISOString(),
-			lastNotedAt: channel.lastNotedAt ? channel.lastNotedAt.toISOString() : null,
-			name: channel.name,
-			description: channel.description,
-			userId: channel.userId,
-			bannerUrl: banner ? DriveFiles.getPublicUrl(banner, false) : null,
-			usersCount: channel.usersCount,
-			notesCount: channel.notesCount,
-
-			...(me ? {
-				isFollowing: following != null,
-				hasUnreadNote,
-			} : {}),
-		};
-	},
-});
diff --git a/packages/backend/src/models/repositories/clip.ts b/packages/backend/src/models/repositories/clip.ts
deleted file mode 100644
index b4a342905e..0000000000
--- a/packages/backend/src/models/repositories/clip.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { Clip } from '@/models/entities/clip.js';
-import { Packed } from '@/misc/schema.js';
-import { Users } from '../index.js';
-import { awaitAll } from '@/prelude/await-all.js';
-
-export const ClipRepository = db.getRepository(Clip).extend({
-	async pack(
-		src: Clip['id'] | Clip,
-	): Promise<Packed<'Clip'>> {
-		const clip = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return await awaitAll({
-			id: clip.id,
-			createdAt: clip.createdAt.toISOString(),
-			userId: clip.userId,
-			user: Users.pack(clip.user || clip.userId),
-			name: clip.name,
-			description: clip.description,
-			isPublic: clip.isPublic,
-		});
-	},
-
-	packMany(
-		clips: Clip[],
-	) {
-		return Promise.all(clips.map(x => this.pack(x)));
-	},
-});
-
diff --git a/packages/backend/src/models/repositories/drive-file.ts b/packages/backend/src/models/repositories/drive-file.ts
deleted file mode 100644
index 0d589d4f11..0000000000
--- a/packages/backend/src/models/repositories/drive-file.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { User } from '@/models/entities/user.js';
-import { toPuny } from '@/misc/convert-host.js';
-import { awaitAll, Promiseable } from '@/prelude/await-all.js';
-import { Packed } from '@/misc/schema.js';
-import config from '@/config/index.js';
-import { query, appendQuery } from '@/prelude/url.js';
-import { Meta } from '@/models/entities/meta.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Users, DriveFolders } from '../index.js';
-
-type PackOptions = {
-	detail?: boolean,
-	self?: boolean,
-	withUser?: boolean,
-};
-
-export const DriveFileRepository = db.getRepository(DriveFile).extend({
-	validateFileName(name: string): boolean {
-		return (
-			(name.trim().length > 0) &&
-			(name.length <= 200) &&
-			(name.indexOf('\\') === -1) &&
-			(name.indexOf('/') === -1) &&
-			(name.indexOf('..') === -1)
-		);
-	},
-
-	getPublicProperties(file: DriveFile): DriveFile['properties'] {
-		if (file.properties.orientation != null) {
-			// TODO
-			//const properties = structuredClone(file.properties);
-			const properties = JSON.parse(JSON.stringify(file.properties));
-			if (file.properties.orientation >= 5) {
-				[properties.width, properties.height] = [properties.height, properties.width];
-			}
-			properties.orientation = undefined;
-			return properties;
-		}
-
-		return file.properties;
-	},
-
-	getPublicUrl(file: DriveFile, thumbnail = false): string | null {
-		// リモートかつメディアプロキシ
-		if (file.uri != null && file.userHost != null && config.mediaProxy != null) {
-			return appendQuery(config.mediaProxy, query({
-				url: file.uri,
-				thumbnail: thumbnail ? '1' : undefined,
-			}));
-		}
-
-		// リモートかつ期限切れはローカルプロキシを試みる
-		if (file.uri != null && file.isLink && config.proxyRemoteFiles) {
-			const key = thumbnail ? file.thumbnailAccessKey : file.webpublicAccessKey;
-
-			if (key && !key.match('/')) {	// 古いものはここにオブジェクトストレージキーが入ってるので除外
-				return `${config.url}/files/${key}`;
-			}
-		}
-
-		const isImage = file.type && ['image/png', 'image/apng', 'image/gif', 'image/jpeg', 'image/webp', 'image/svg+xml'].includes(file.type);
-
-		return thumbnail ? (file.thumbnailUrl || (isImage ? (file.webpublicUrl || file.url) : null)) : (file.webpublicUrl || file.url);
-	},
-
-	async calcDriveUsageOf(user: User['id'] | { id: User['id'] }): Promise<number> {
-		const id = typeof user === 'object' ? user.id : user;
-
-		const { sum } = await this
-			.createQueryBuilder('file')
-			.where('file.userId = :id', { id: id })
-			.andWhere('file.isLink = FALSE')
-			.select('SUM(file.size)', 'sum')
-			.getRawOne();
-
-		return parseInt(sum, 10) || 0;
-	},
-
-	async calcDriveUsageOfHost(host: string): Promise<number> {
-		const { sum } = await this
-			.createQueryBuilder('file')
-			.where('file.userHost = :host', { host: toPuny(host) })
-			.andWhere('file.isLink = FALSE')
-			.select('SUM(file.size)', 'sum')
-			.getRawOne();
-
-		return parseInt(sum, 10) || 0;
-	},
-
-	async calcDriveUsageOfLocal(): Promise<number> {
-		const { sum } = await this
-			.createQueryBuilder('file')
-			.where('file.userHost IS NULL')
-			.andWhere('file.isLink = FALSE')
-			.select('SUM(file.size)', 'sum')
-			.getRawOne();
-
-		return parseInt(sum, 10) || 0;
-	},
-
-	async calcDriveUsageOfRemote(): Promise<number> {
-		const { sum } = await this
-			.createQueryBuilder('file')
-			.where('file.userHost IS NOT NULL')
-			.andWhere('file.isLink = FALSE')
-			.select('SUM(file.size)', 'sum')
-			.getRawOne();
-
-		return parseInt(sum, 10) || 0;
-	},
-
-	async pack(
-		src: DriveFile['id'] | DriveFile,
-		options?: PackOptions,
-	): Promise<Packed<'DriveFile'>> {
-		const opts = Object.assign({
-			detail: false,
-			self: false,
-		}, options);
-
-		const file = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return await awaitAll<Packed<'DriveFile'>>({
-			id: file.id,
-			createdAt: file.createdAt.toISOString(),
-			name: file.name,
-			type: file.type,
-			md5: file.md5,
-			size: file.size,
-			isSensitive: file.isSensitive,
-			blurhash: file.blurhash,
-			properties: opts.self ? file.properties : this.getPublicProperties(file),
-			url: opts.self ? file.url : this.getPublicUrl(file, false),
-			thumbnailUrl: this.getPublicUrl(file, true),
-			comment: file.comment,
-			folderId: file.folderId,
-			folder: opts.detail && file.folderId ? DriveFolders.pack(file.folderId, {
-				detail: true,
-			}) : null,
-			userId: opts.withUser ? file.userId : null,
-			user: (opts.withUser && file.userId) ? Users.pack(file.userId) : null,
-		});
-	},
-
-	async packNullable(
-		src: DriveFile['id'] | DriveFile,
-		options?: PackOptions,
-	): Promise<Packed<'DriveFile'> | null> {
-		const opts = Object.assign({
-			detail: false,
-			self: false,
-		}, options);
-
-		const file = typeof src === 'object' ? src : await this.findOneBy({ id: src });
-		if (file == null) return null;
-
-		return await awaitAll<Packed<'DriveFile'>>({
-			id: file.id,
-			createdAt: file.createdAt.toISOString(),
-			name: file.name,
-			type: file.type,
-			md5: file.md5,
-			size: file.size,
-			isSensitive: file.isSensitive,
-			blurhash: file.blurhash,
-			properties: opts.self ? file.properties : this.getPublicProperties(file),
-			url: opts.self ? file.url : this.getPublicUrl(file, false),
-			thumbnailUrl: this.getPublicUrl(file, true),
-			comment: file.comment,
-			folderId: file.folderId,
-			folder: opts.detail && file.folderId ? DriveFolders.pack(file.folderId, {
-				detail: true,
-			}) : null,
-			userId: opts.withUser ? file.userId : null,
-			user: (opts.withUser && file.userId) ? Users.pack(file.userId) : null,
-		});
-	},
-
-	async packMany(
-		files: (DriveFile['id'] | DriveFile)[],
-		options?: PackOptions,
-	): Promise<Packed<'DriveFile'>[]> {
-		const items = await Promise.all(files.map(f => this.packNullable(f, options)));
-		return items.filter((x): x is Packed<'DriveFile'> => x != null);
-	},
-});
diff --git a/packages/backend/src/models/repositories/drive-folder.ts b/packages/backend/src/models/repositories/drive-folder.ts
deleted file mode 100644
index ab5f3dab63..0000000000
--- a/packages/backend/src/models/repositories/drive-folder.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { DriveFolders, DriveFiles } from '../index.js';
-import { DriveFolder } from '@/models/entities/drive-folder.js';
-import { awaitAll } from '@/prelude/await-all.js';
-import { Packed } from '@/misc/schema.js';
-
-export const DriveFolderRepository = db.getRepository(DriveFolder).extend({
-	async pack(
-		src: DriveFolder['id'] | DriveFolder,
-		options?: {
-			detail: boolean
-		}
-	): Promise<Packed<'DriveFolder'>> {
-		const opts = Object.assign({
-			detail: false,
-		}, options);
-
-		const folder = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return await awaitAll({
-			id: folder.id,
-			createdAt: folder.createdAt.toISOString(),
-			name: folder.name,
-			parentId: folder.parentId,
-
-			...(opts.detail ? {
-				foldersCount: DriveFolders.countBy({
-					parentId: folder.id,
-				}),
-				filesCount: DriveFiles.countBy({
-					folderId: folder.id,
-				}),
-
-				...(folder.parentId ? {
-					parent: this.pack(folder.parentId, {
-						detail: true,
-					}),
-				} : {}),
-			} : {}),
-		});
-	},
-});
diff --git a/packages/backend/src/models/repositories/emoji.ts b/packages/backend/src/models/repositories/emoji.ts
deleted file mode 100644
index a0d390d793..0000000000
--- a/packages/backend/src/models/repositories/emoji.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { Emoji } from '@/models/entities/emoji.js';
-import { Packed } from '@/misc/schema.js';
-
-export const EmojiRepository = db.getRepository(Emoji).extend({
-	async pack(
-		src: Emoji['id'] | Emoji,
-	): Promise<Packed<'Emoji'>> {
-		const emoji = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return {
-			id: emoji.id,
-			aliases: emoji.aliases,
-			name: emoji.name,
-			category: emoji.category,
-			host: emoji.host,
-			// || emoji.originalUrl してるのは後方互換性のため
-			url: emoji.publicUrl || emoji.originalUrl,
-		};
-	},
-
-	packMany(
-		emojis: any[],
-	) {
-		return Promise.all(emojis.map(x => this.pack(x)));
-	},
-});
diff --git a/packages/backend/src/models/repositories/follow-request.ts b/packages/backend/src/models/repositories/follow-request.ts
deleted file mode 100644
index c4a7203aa1..0000000000
--- a/packages/backend/src/models/repositories/follow-request.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { FollowRequest } from '@/models/entities/follow-request.js';
-import { Users } from '../index.js';
-import { User } from '@/models/entities/user.js';
-
-export const FollowRequestRepository = db.getRepository(FollowRequest).extend({
-	async pack(
-		src: FollowRequest['id'] | FollowRequest,
-		me?: { id: User['id'] } | null | undefined
-	) {
-		const request = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return {
-			id: request.id,
-			follower: await Users.pack(request.followerId, me),
-			followee: await Users.pack(request.followeeId, me),
-		};
-	},
-});
diff --git a/packages/backend/src/models/repositories/following.ts b/packages/backend/src/models/repositories/following.ts
deleted file mode 100644
index 46109244fa..0000000000
--- a/packages/backend/src/models/repositories/following.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { Users } from '../index.js';
-import { Following } from '@/models/entities/following.js';
-import { awaitAll } from '@/prelude/await-all.js';
-import { Packed } from '@/misc/schema.js';
-import { User } from '@/models/entities/user.js';
-
-type LocalFollowerFollowing = Following & {
-	followerHost: null;
-	followerInbox: null;
-	followerSharedInbox: null;
-};
-
-type RemoteFollowerFollowing = Following & {
-	followerHost: string;
-	followerInbox: string;
-	followerSharedInbox: string;
-};
-
-type LocalFolloweeFollowing = Following & {
-	followeeHost: null;
-	followeeInbox: null;
-	followeeSharedInbox: null;
-};
-
-type RemoteFolloweeFollowing = Following & {
-	followeeHost: string;
-	followeeInbox: string;
-	followeeSharedInbox: string;
-};
-
-export const FollowingRepository = db.getRepository(Following).extend({
-	isLocalFollower(following: Following): following is LocalFollowerFollowing {
-		return following.followerHost == null;
-	},
-
-	isRemoteFollower(following: Following): following is RemoteFollowerFollowing {
-		return following.followerHost != null;
-	},
-
-	isLocalFollowee(following: Following): following is LocalFolloweeFollowing {
-		return following.followeeHost == null;
-	},
-
-	isRemoteFollowee(following: Following): following is RemoteFolloweeFollowing {
-		return following.followeeHost != null;
-	},
-
-	async pack(
-		src: Following['id'] | Following,
-		me?: { id: User['id'] } | null | undefined,
-		opts?: {
-			populateFollowee?: boolean;
-			populateFollower?: boolean;
-		}
-	): Promise<Packed<'Following'>> {
-		const following = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		if (opts == null) opts = {};
-
-		return await awaitAll({
-			id: following.id,
-			createdAt: following.createdAt.toISOString(),
-			followeeId: following.followeeId,
-			followerId: following.followerId,
-			followee: opts.populateFollowee ? Users.pack(following.followee || following.followeeId, me, {
-				detail: true,
-			}) : undefined,
-			follower: opts.populateFollower ? Users.pack(following.follower || following.followerId, me, {
-				detail: true,
-			}) : undefined,
-		});
-	},
-
-	packMany(
-		followings: any[],
-		me?: { id: User['id'] } | null | undefined,
-		opts?: {
-			populateFollowee?: boolean;
-			populateFollower?: boolean;
-		}
-	) {
-		return Promise.all(followings.map(x => this.pack(x, me, opts)));
-	},
-});
diff --git a/packages/backend/src/models/repositories/gallery-like.ts b/packages/backend/src/models/repositories/gallery-like.ts
deleted file mode 100644
index 08ca4962b8..0000000000
--- a/packages/backend/src/models/repositories/gallery-like.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { GalleryLike } from '@/models/entities/gallery-like.js';
-import { GalleryPosts } from '../index.js';
-
-export const GalleryLikeRepository = db.getRepository(GalleryLike).extend({
-	async pack(
-		src: GalleryLike['id'] | GalleryLike,
-		me?: any
-	) {
-		const like = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return {
-			id: like.id,
-			post: await GalleryPosts.pack(like.post || like.postId, me),
-		};
-	},
-
-	packMany(
-		likes: any[],
-		me: any
-	) {
-		return Promise.all(likes.map(x => this.pack(x, me)));
-	},
-});
diff --git a/packages/backend/src/models/repositories/gallery-post.ts b/packages/backend/src/models/repositories/gallery-post.ts
deleted file mode 100644
index bb8d40b75e..0000000000
--- a/packages/backend/src/models/repositories/gallery-post.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { GalleryPost } from '@/models/entities/gallery-post.js';
-import { Packed } from '@/misc/schema.js';
-import { Users, DriveFiles, GalleryLikes } from '../index.js';
-import { awaitAll } from '@/prelude/await-all.js';
-import { User } from '@/models/entities/user.js';
-
-export const GalleryPostRepository = db.getRepository(GalleryPost).extend({
-	async pack(
-		src: GalleryPost['id'] | GalleryPost,
-		me?: { id: User['id'] } | null | undefined,
-	): Promise<Packed<'GalleryPost'>> {
-		const meId = me ? me.id : null;
-		const post = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return await awaitAll({
-			id: post.id,
-			createdAt: post.createdAt.toISOString(),
-			updatedAt: post.updatedAt.toISOString(),
-			userId: post.userId,
-			user: Users.pack(post.user || post.userId, me),
-			title: post.title,
-			description: post.description,
-			fileIds: post.fileIds,
-			files: DriveFiles.packMany(post.fileIds),
-			tags: post.tags.length > 0 ? post.tags : undefined,
-			isSensitive: post.isSensitive,
-			likedCount: post.likedCount,
-			isLiked: meId ? await GalleryLikes.findOneBy({ postId: post.id, userId: meId }).then(x => x != null) : undefined,
-		});
-	},
-
-	packMany(
-		posts: GalleryPost[],
-		me?: { id: User['id'] } | null | undefined,
-	) {
-		return Promise.all(posts.map(x => this.pack(x, me)));
-	},
-});
diff --git a/packages/backend/src/models/repositories/hashtag.ts b/packages/backend/src/models/repositories/hashtag.ts
deleted file mode 100644
index e6c0e36f00..0000000000
--- a/packages/backend/src/models/repositories/hashtag.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { Hashtag } from '@/models/entities/hashtag.js';
-import { Packed } from '@/misc/schema.js';
-
-export const HashtagRepository = db.getRepository(Hashtag).extend({
-	async pack(
-		src: Hashtag,
-	): Promise<Packed<'Hashtag'>> {
-		return {
-			tag: src.name,
-			mentionedUsersCount: src.mentionedUsersCount,
-			mentionedLocalUsersCount: src.mentionedLocalUsersCount,
-			mentionedRemoteUsersCount: src.mentionedRemoteUsersCount,
-			attachedUsersCount: src.attachedUsersCount,
-			attachedLocalUsersCount: src.attachedLocalUsersCount,
-			attachedRemoteUsersCount: src.attachedRemoteUsersCount,
-		};
-	},
-
-	packMany(
-		hashtags: Hashtag[],
-	) {
-		return Promise.all(hashtags.map(x => this.pack(x)));
-	},
-});
diff --git a/packages/backend/src/models/repositories/instance.ts b/packages/backend/src/models/repositories/instance.ts
deleted file mode 100644
index 5f0fd8d582..0000000000
--- a/packages/backend/src/models/repositories/instance.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-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(),
-			host: instance.host,
-			usersCount: instance.usersCount,
-			notesCount: instance.notesCount,
-			followingCount: instance.followingCount,
-			followersCount: instance.followersCount,
-			latestRequestSentAt: instance.latestRequestSentAt ? instance.latestRequestSentAt.toISOString() : null,
-			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,
-			name: instance.name,
-			description: instance.description,
-			maintainerName: instance.maintainerName,
-			maintainerEmail: instance.maintainerEmail,
-			iconUrl: instance.iconUrl,
-			faviconUrl: instance.faviconUrl,
-			themeColor: instance.themeColor,
-			infoUpdatedAt: instance.infoUpdatedAt ? instance.infoUpdatedAt.toISOString() : null,
-		};
-	},
-
-	packMany(
-		instances: Instance[],
-	) {
-		return Promise.all(instances.map(x => this.pack(x)));
-	},
-});
diff --git a/packages/backend/src/models/repositories/messaging-message.ts b/packages/backend/src/models/repositories/messaging-message.ts
deleted file mode 100644
index 6c51c93ff7..0000000000
--- a/packages/backend/src/models/repositories/messaging-message.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { MessagingMessage } from '@/models/entities/messaging-message.js';
-import { Users, DriveFiles, UserGroups } from '../index.js';
-import { Packed } from '@/misc/schema.js';
-import { User } from '@/models/entities/user.js';
-
-export const MessagingMessageRepository = db.getRepository(MessagingMessage).extend({
-	async pack(
-		src: MessagingMessage['id'] | MessagingMessage,
-		me?: { id: User['id'] } | null | undefined,
-		options?: {
-			populateRecipient?: boolean,
-			populateGroup?: boolean,
-		}
-	): Promise<Packed<'MessagingMessage'>> {
-		const opts = options || {
-			populateRecipient: true,
-			populateGroup: true,
-		};
-
-		const message = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return {
-			id: message.id,
-			createdAt: message.createdAt.toISOString(),
-			text: message.text,
-			userId: message.userId,
-			user: await Users.pack(message.user || message.userId, me),
-			recipientId: message.recipientId,
-			recipient: message.recipientId && opts.populateRecipient ? await Users.pack(message.recipient || message.recipientId, me) : undefined,
-			groupId: message.groupId,
-			group: message.groupId && opts.populateGroup ? await UserGroups.pack(message.group || message.groupId) : undefined,
-			fileId: message.fileId,
-			file: message.fileId ? await DriveFiles.pack(message.fileId) : null,
-			isRead: message.isRead,
-			reads: message.reads,
-		};
-	},
-});
diff --git a/packages/backend/src/models/repositories/moderation-logs.ts b/packages/backend/src/models/repositories/moderation-logs.ts
deleted file mode 100644
index 1488b1eabe..0000000000
--- a/packages/backend/src/models/repositories/moderation-logs.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { Users } from '../index.js';
-import { ModerationLog } from '@/models/entities/moderation-log.js';
-import { awaitAll } from '@/prelude/await-all.js';
-
-export const ModerationLogRepository = db.getRepository(ModerationLog).extend({
-	async pack(
-		src: ModerationLog['id'] | ModerationLog,
-	) {
-		const log = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return await awaitAll({
-			id: log.id,
-			createdAt: log.createdAt.toISOString(),
-			type: log.type,
-			info: log.info,
-			userId: log.userId,
-			user: Users.pack(log.user || log.userId, null, {
-				detail: true,
-			}),
-		});
-	},
-
-	packMany(
-		reports: any[],
-	) {
-		return Promise.all(reports.map(x => this.pack(x)));
-	},
-});
diff --git a/packages/backend/src/models/repositories/muting.ts b/packages/backend/src/models/repositories/muting.ts
deleted file mode 100644
index 7891b10fb0..0000000000
--- a/packages/backend/src/models/repositories/muting.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { Users } from '../index.js';
-import { Muting } from '@/models/entities/muting.js';
-import { awaitAll } from '@/prelude/await-all.js';
-import { Packed } from '@/misc/schema.js';
-import { User } from '@/models/entities/user.js';
-
-export const MutingRepository = db.getRepository(Muting).extend({
-	async pack(
-		src: Muting['id'] | Muting,
-		me?: { id: User['id'] } | null | undefined
-	): Promise<Packed<'Muting'>> {
-		const muting = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return await awaitAll({
-			id: muting.id,
-			createdAt: muting.createdAt.toISOString(),
-			expiresAt: muting.expiresAt ? muting.expiresAt.toISOString() : null,
-			muteeId: muting.muteeId,
-			mutee: Users.pack(muting.muteeId, me, {
-				detail: true,
-			}),
-		});
-	},
-
-	packMany(
-		mutings: any[],
-		me: { id: User['id'] }
-	) {
-		return Promise.all(mutings.map(x => this.pack(x, me)));
-	},
-});
diff --git a/packages/backend/src/models/repositories/note-favorite.ts b/packages/backend/src/models/repositories/note-favorite.ts
deleted file mode 100644
index 9bd97f9880..0000000000
--- a/packages/backend/src/models/repositories/note-favorite.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { NoteFavorite } from '@/models/entities/note-favorite.js';
-import { Notes } from '../index.js';
-import { User } from '@/models/entities/user.js';
-
-export const NoteFavoriteRepository = db.getRepository(NoteFavorite).extend({
-	async pack(
-		src: NoteFavorite['id'] | NoteFavorite,
-		me?: { id: User['id'] } | null | undefined
-	) {
-		const favorite = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return {
-			id: favorite.id,
-			createdAt: favorite.createdAt.toISOString(),
-			noteId: favorite.noteId,
-			note: await Notes.pack(favorite.note || favorite.noteId, me),
-		};
-	},
-
-	packMany(
-		favorites: any[],
-		me: { id: User['id'] }
-	) {
-		return Promise.all(favorites.map(x => this.pack(x, me)));
-	},
-});
diff --git a/packages/backend/src/models/repositories/note-reaction.ts b/packages/backend/src/models/repositories/note-reaction.ts
deleted file mode 100644
index 4deae51c93..0000000000
--- a/packages/backend/src/models/repositories/note-reaction.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { NoteReaction } from '@/models/entities/note-reaction.js';
-import { Notes, Users } from '../index.js';
-import { Packed } from '@/misc/schema.js';
-import { convertLegacyReaction } from '@/misc/reaction-lib.js';
-import { User } from '@/models/entities/user.js';
-
-export const NoteReactionRepository = db.getRepository(NoteReaction).extend({
-	async pack(
-		src: NoteReaction['id'] | NoteReaction,
-		me?: { id: User['id'] } | null | undefined,
-		options?: {
-			withNote: boolean;
-		},
-	): Promise<Packed<'NoteReaction'>> {
-		const opts = Object.assign({
-			withNote: false,
-		}, options);
-
-		const reaction = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return {
-			id: reaction.id,
-			createdAt: reaction.createdAt.toISOString(),
-			user: await Users.pack(reaction.user ?? reaction.userId, me),
-			type: convertLegacyReaction(reaction.reaction),
-			...(opts.withNote ? {
-				note: await Notes.pack(reaction.note ?? reaction.noteId, me),
-			} : {}),
-		};
-	},
-});
diff --git a/packages/backend/src/models/repositories/note.ts b/packages/backend/src/models/repositories/note.ts
deleted file mode 100644
index 3fefab0319..0000000000
--- a/packages/backend/src/models/repositories/note.ts
+++ /dev/null
@@ -1,326 +0,0 @@
-import { In } from 'typeorm';
-import * as mfm from 'mfm-js';
-import { Note } from '@/models/entities/note.js';
-import { User } from '@/models/entities/user.js';
-import { Users, PollVotes, DriveFiles, NoteReactions, Followings, Polls, Channels } from '../index.js';
-import { Packed } from '@/misc/schema.js';
-import { nyaize } from '@/misc/nyaize.js';
-import { awaitAll } from '@/prelude/await-all.js';
-import { convertLegacyReaction, convertLegacyReactions, decodeReaction } from '@/misc/reaction-lib.js';
-import { NoteReaction } from '@/models/entities/note-reaction.js';
-import { aggregateNoteEmojis, populateEmojis, prefetchEmojis } from '@/misc/populate-emojis.js';
-import { db } from '@/db/postgre.js';
-
-async function hideNote(packedNote: Packed<'Note'>, meId: User['id'] | null) {
-	// TODO: isVisibleForMe を使うようにしても良さそう(型違うけど)
-	let hide = false;
-
-	// visibility が specified かつ自分が指定されていなかったら非表示
-	if (packedNote.visibility === 'specified') {
-		if (meId == null) {
-			hide = true;
-		} else if (meId === packedNote.userId) {
-			hide = false;
-		} else {
-			// 指定されているかどうか
-			const specified = packedNote.visibleUserIds!.some((id: any) => meId === id);
-
-			if (specified) {
-				hide = false;
-			} else {
-				hide = true;
-			}
-		}
-	}
-
-	// visibility が followers かつ自分が投稿者のフォロワーでなかったら非表示
-	if (packedNote.visibility === 'followers') {
-		if (meId == null) {
-			hide = true;
-		} else if (meId === packedNote.userId) {
-			hide = false;
-		} else if (packedNote.reply && (meId === packedNote.reply.userId)) {
-			// 自分の投稿に対するリプライ
-			hide = false;
-		} else if (packedNote.mentions && packedNote.mentions.some(id => meId === id)) {
-			// 自分へのメンション
-			hide = false;
-		} else {
-			// フォロワーかどうか
-			const following = await Followings.findOneBy({
-				followeeId: packedNote.userId,
-				followerId: meId,
-			});
-
-			if (following == null) {
-				hide = true;
-			} else {
-				hide = false;
-			}
-		}
-	}
-
-	if (hide) {
-		packedNote.visibleUserIds = undefined;
-		packedNote.fileIds = [];
-		packedNote.files = [];
-		packedNote.text = null;
-		packedNote.poll = undefined;
-		packedNote.cw = null;
-		packedNote.isHidden = true;
-	}
-}
-
-async function populatePoll(note: Note, meId: User['id'] | null) {
-	const poll = await Polls.findOneByOrFail({ noteId: note.id });
-	const choices = poll.choices.map(c => ({
-		text: c,
-		votes: poll.votes[poll.choices.indexOf(c)],
-		isVoted: false,
-	}));
-
-	if (meId) {
-		if (poll.multiple) {
-			const votes = await PollVotes.findBy({
-				userId: meId,
-				noteId: note.id,
-			});
-
-			const myChoices = votes.map(v => v.choice);
-			for (const myChoice of myChoices) {
-				choices[myChoice].isVoted = true;
-			}
-		} else {
-			const vote = await PollVotes.findOneBy({
-				userId: meId,
-				noteId: note.id,
-			});
-
-			if (vote) {
-				choices[vote.choice].isVoted = true;
-			}
-		}
-	}
-
-	return {
-		multiple: poll.multiple,
-		expiresAt: poll.expiresAt,
-		choices,
-	};
-}
-
-async function populateMyReaction(note: Note, meId: User['id'], _hint_?: {
-	myReactions: Map<Note['id'], NoteReaction | null>;
-}) {
-	if (_hint_?.myReactions) {
-		const reaction = _hint_.myReactions.get(note.id);
-		if (reaction) {
-			return convertLegacyReaction(reaction.reaction);
-		} else if (reaction === null) {
-			return undefined;
-		}
-		// 実装上抜けがあるだけかもしれないので、「ヒントに含まれてなかったら(=undefinedなら)return」のようにはしない
-	}
-
-	const reaction = await NoteReactions.findOneBy({
-		userId: meId,
-		noteId: note.id,
-	});
-
-	if (reaction) {
-		return convertLegacyReaction(reaction.reaction);
-	}
-
-	return undefined;
-}
-
-export const NoteRepository = db.getRepository(Note).extend({
-	async isVisibleForMe(note: Note, meId: User['id'] | null): Promise<boolean> {
-		// This code must always be synchronized with the checks in generateVisibilityQuery.
-		// visibility が specified かつ自分が指定されていなかったら非表示
-		if (note.visibility === 'specified') {
-			if (meId == null) {
-				return false;
-			} else if (meId === note.userId) {
-				return true;
-			} else {
-				// 指定されているかどうか
-				return note.visibleUserIds.some((id: any) => meId === id);
-			}
-		}
-
-		// visibility が followers かつ自分が投稿者のフォロワーでなかったら非表示
-		if (note.visibility === 'followers') {
-			if (meId == null) {
-				return false;
-			} else if (meId === note.userId) {
-				return true;
-			} else if (note.reply && (meId === note.reply.userId)) {
-				// 自分の投稿に対するリプライ
-				return true;
-			} else if (note.mentions && note.mentions.some(id => meId === id)) {
-				// 自分へのメンション
-				return true;
-			} else {
-				// フォロワーかどうか
-				const [following, user] = await Promise.all([
-					Followings.count({
-						where: {
-							followeeId: note.userId,
-							followerId: meId,
-						},
-						take: 1,
-					}),
-					Users.findOneByOrFail({ id: meId }),
-				]);
-
-				/* If we know the following, everyhting is fine.
-
-				But if we do not know the following, it might be that both the
-				author of the note and the author of the like are remote users,
-				in which case we can never know the following. Instead we have
-				to assume that the users are following each other.
-				*/
-				return following > 0 || (note.userHost != null && user.host != null);
-			}
-		}
-
-		return true;
-	},
-
-	async pack(
-		src: Note['id'] | Note,
-		me?: { id: User['id'] } | null | undefined,
-		options?: {
-			detail?: boolean;
-			skipHide?: boolean;
-			_hint_?: {
-				myReactions: Map<Note['id'], NoteReaction | null>;
-			};
-		}
-	): Promise<Packed<'Note'>> {
-		const opts = Object.assign({
-			detail: true,
-			skipHide: false,
-		}, options);
-
-		const meId = me ? me.id : null;
-		const note = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-		const host = note.userHost;
-
-		let text = note.text;
-
-		if (note.name && (note.url ?? note.uri)) {
-			text = `【${note.name}】\n${(note.text || '').trim()}\n\n${note.url ?? note.uri}`;
-		}
-
-		const channel = note.channelId
-			? note.channel
-				? note.channel
-				: await Channels.findOneBy({ id: note.channelId })
-			: null;
-
-		const reactionEmojiNames = Object.keys(note.reactions).filter(x => x?.startsWith(':')).map(x => decodeReaction(x).reaction).map(x => x.replace(/:/g, ''));
-
-		const packed: Packed<'Note'> = await awaitAll({
-			id: note.id,
-			createdAt: note.createdAt.toISOString(),
-			userId: note.userId,
-			user: Users.pack(note.user ?? note.userId, me, {
-				detail: false,
-			}),
-			text: text,
-			cw: note.cw,
-			visibility: note.visibility,
-			localOnly: note.localOnly || undefined,
-			visibleUserIds: note.visibility === 'specified' ? note.visibleUserIds : undefined,
-			renoteCount: note.renoteCount,
-			repliesCount: note.repliesCount,
-			reactions: convertLegacyReactions(note.reactions),
-			tags: note.tags.length > 0 ? note.tags : undefined,
-			emojis: populateEmojis(note.emojis.concat(reactionEmojiNames), host),
-			fileIds: note.fileIds,
-			files: DriveFiles.packMany(note.fileIds),
-			replyId: note.replyId,
-			renoteId: note.renoteId,
-			channelId: note.channelId || undefined,
-			channel: channel ? {
-				id: channel.id,
-				name: channel.name,
-			} : undefined,
-			mentions: note.mentions.length > 0 ? note.mentions : undefined,
-			uri: note.uri || undefined,
-			url: note.url || undefined,
-
-			...(opts.detail ? {
-				reply: note.replyId ? this.pack(note.reply || note.replyId, me, {
-					detail: false,
-					_hint_: options?._hint_,
-				}) : undefined,
-
-				renote: note.renoteId ? this.pack(note.renote || note.renoteId, me, {
-					detail: true,
-					_hint_: options?._hint_,
-				}) : undefined,
-
-				poll: note.hasPoll ? populatePoll(note, meId) : undefined,
-
-				...(meId ? {
-					myReaction: populateMyReaction(note, meId, options?._hint_),
-				} : {}),
-			} : {}),
-		});
-
-		if (packed.user.isCat && packed.text) {
-			const tokens = packed.text ? mfm.parse(packed.text) : [];
-			mfm.inspect(tokens, node => {
-				if (node.type === 'text') {
-					// TODO: quoteなtextはskip
-					node.props.text = nyaize(node.props.text);
-				}
-			});
-			packed.text = mfm.toString(tokens);
-		}
-
-		if (!opts.skipHide) {
-			await hideNote(packed, meId);
-		}
-
-		return packed;
-	},
-
-	async packMany(
-		notes: Note[],
-		me?: { id: User['id'] } | null | undefined,
-		options?: {
-			detail?: boolean;
-			skipHide?: boolean;
-		}
-	) {
-		if (notes.length === 0) return [];
-
-		const meId = me ? me.id : null;
-		const myReactionsMap = new Map<Note['id'], NoteReaction | null>();
-		if (meId) {
-			const renoteIds = notes.filter(n => n.renoteId != null).map(n => n.renoteId!);
-			const targets = [...notes.map(n => n.id), ...renoteIds];
-			const myReactions = await NoteReactions.findBy({
-				userId: meId,
-				noteId: In(targets),
-			});
-
-			for (const target of targets) {
-				myReactionsMap.set(target, myReactions.find(reaction => reaction.noteId === target) || null);
-			}
-		}
-
-		await prefetchEmojis(aggregateNoteEmojis(notes));
-
-		return await Promise.all(notes.map(n => this.pack(n, me, {
-			...options,
-			_hint_: {
-				myReactions: myReactionsMap,
-			},
-		})));
-	},
-});
diff --git a/packages/backend/src/models/repositories/notification.ts b/packages/backend/src/models/repositories/notification.ts
deleted file mode 100644
index 42b47ab150..0000000000
--- a/packages/backend/src/models/repositories/notification.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { In, Repository } from 'typeorm';
-import { Users, Notes, UserGroupInvitations, AccessTokens, NoteReactions } from '../index.js';
-import { Notification } from '@/models/entities/notification.js';
-import { awaitAll } from '@/prelude/await-all.js';
-import { Packed } from '@/misc/schema.js';
-import { Note } from '@/models/entities/note.js';
-import { NoteReaction } from '@/models/entities/note-reaction.js';
-import { User } from '@/models/entities/user.js';
-import { aggregateNoteEmojis, prefetchEmojis } from '@/misc/populate-emojis.js';
-import { notificationTypes } from '@/types.js';
-import { db } from '@/db/postgre.js';
-
-export const NotificationRepository = db.getRepository(Notification).extend({
-	async pack(
-		src: Notification['id'] | Notification,
-		options: {
-			_hintForEachNotes_?: {
-				myReactions: Map<Note['id'], NoteReaction | null>;
-			};
-		}
-	): Promise<Packed<'Notification'>> {
-		const notification = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-		const token = notification.appAccessTokenId ? await AccessTokens.findOneByOrFail({ id: notification.appAccessTokenId }) : null;
-
-		return await awaitAll({
-			id: notification.id,
-			createdAt: notification.createdAt.toISOString(),
-			type: notification.type,
-			isRead: notification.isRead,
-			userId: notification.notifierId,
-			user: notification.notifierId ? Users.pack(notification.notifier || notification.notifierId) : null,
-			...(notification.type === 'mention' ? {
-				note: Notes.pack(notification.note || notification.noteId!, { id: notification.notifieeId }, {
-					detail: true,
-					_hint_: options._hintForEachNotes_,
-				}),
-			} : {}),
-			...(notification.type === 'reply' ? {
-				note: Notes.pack(notification.note || notification.noteId!, { id: notification.notifieeId }, {
-					detail: true,
-					_hint_: options._hintForEachNotes_,
-				}),
-			} : {}),
-			...(notification.type === 'renote' ? {
-				note: Notes.pack(notification.note || notification.noteId!, { id: notification.notifieeId }, {
-					detail: true,
-					_hint_: options._hintForEachNotes_,
-				}),
-			} : {}),
-			...(notification.type === 'quote' ? {
-				note: Notes.pack(notification.note || notification.noteId!, { id: notification.notifieeId }, {
-					detail: true,
-					_hint_: options._hintForEachNotes_,
-				}),
-			} : {}),
-			...(notification.type === 'reaction' ? {
-				note: Notes.pack(notification.note || notification.noteId!, { id: notification.notifieeId }, {
-					detail: true,
-					_hint_: options._hintForEachNotes_,
-				}),
-				reaction: notification.reaction,
-			} : {}),
-			...(notification.type === 'pollVote' ? {
-				note: Notes.pack(notification.note || notification.noteId!, { id: notification.notifieeId }, {
-					detail: true,
-					_hint_: options._hintForEachNotes_,
-				}),
-				choice: notification.choice,
-			} : {}),
-			...(notification.type === 'pollEnded' ? {
-				note: Notes.pack(notification.note || notification.noteId!, { id: notification.notifieeId }, {
-					detail: true,
-					_hint_: options._hintForEachNotes_,
-				}),
-			} : {}),
-			...(notification.type === 'groupInvited' ? {
-				invitation: UserGroupInvitations.pack(notification.userGroupInvitationId!),
-			} : {}),
-			...(notification.type === 'app' ? {
-				body: notification.customBody,
-				header: notification.customHeader || token?.name,
-				icon: notification.customIcon || token?.iconUrl,
-			} : {}),
-		});
-	},
-
-	async packMany(
-		notifications: Notification[],
-		meId: User['id']
-	) {
-		if (notifications.length === 0) return [];
-
-		const notes = notifications.filter(x => x.note != null).map(x => x.note!);
-		const noteIds = notes.map(n => n.id);
-		const myReactionsMap = new Map<Note['id'], NoteReaction | null>();
-		const renoteIds = notes.filter(n => n.renoteId != null).map(n => n.renoteId!);
-		const targets = [...noteIds, ...renoteIds];
-		const myReactions = await NoteReactions.findBy({
-			userId: meId,
-			noteId: In(targets),
-		});
-
-		for (const target of targets) {
-			myReactionsMap.set(target, myReactions.find(reaction => reaction.noteId === target) || null);
-		}
-
-		await prefetchEmojis(aggregateNoteEmojis(notes));
-
-		return await Promise.all(notifications.map(x => this.pack(x, {
-			_hintForEachNotes_: {
-				myReactions: myReactionsMap,
-			},
-		})));
-	},
-});
diff --git a/packages/backend/src/models/repositories/page-like.ts b/packages/backend/src/models/repositories/page-like.ts
deleted file mode 100644
index 87d6accc34..0000000000
--- a/packages/backend/src/models/repositories/page-like.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { PageLike } from '@/models/entities/page-like.js';
-import { Pages } from '../index.js';
-import { User } from '@/models/entities/user.js';
-
-export const PageLikeRepository = db.getRepository(PageLike).extend({
-	async pack(
-		src: PageLike['id'] | PageLike,
-		me?: { id: User['id'] } | null | undefined
-	) {
-		const like = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return {
-			id: like.id,
-			page: await Pages.pack(like.page || like.pageId, me),
-		};
-	},
-
-	packMany(
-		likes: any[],
-		me: { id: User['id'] }
-	) {
-		return Promise.all(likes.map(x => this.pack(x, me)));
-	},
-});
diff --git a/packages/backend/src/models/repositories/page.ts b/packages/backend/src/models/repositories/page.ts
deleted file mode 100644
index 092b26b396..0000000000
--- a/packages/backend/src/models/repositories/page.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { Page } from '@/models/entities/page.js';
-import { Packed } from '@/misc/schema.js';
-import { awaitAll } from '@/prelude/await-all.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { User } from '@/models/entities/user.js';
-import { Users, DriveFiles, PageLikes } from '../index.js';
-
-export const PageRepository = db.getRepository(Page).extend({
-	async pack(
-		src: Page['id'] | Page,
-		me?: { id: User['id'] } | null | undefined,
-	): Promise<Packed<'Page'>> {
-		const meId = me ? me.id : null;
-		const page = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		const attachedFiles: Promise<DriveFile | null>[] = [];
-		const collectFile = (xs: any[]) => {
-			for (const x of xs) {
-				if (x.type === 'image') {
-					attachedFiles.push(DriveFiles.findOneBy({
-						id: x.fileId,
-						userId: page.userId,
-					}));
-				}
-				if (x.children) {
-					collectFile(x.children);
-				}
-			}
-		};
-		collectFile(page.content);
-
-		// 後方互換性のため
-		let migrated = false;
-		const migrate = (xs: any[]) => {
-			for (const x of xs) {
-				if (x.type === 'input') {
-					if (x.inputType === 'text') {
-						x.type = 'textInput';
-					}
-					if (x.inputType === 'number') {
-						x.type = 'numberInput';
-						if (x.default) x.default = parseInt(x.default, 10);
-					}
-					migrated = true;
-				}
-				if (x.children) {
-					migrate(x.children);
-				}
-			}
-		};
-		migrate(page.content);
-		if (migrated) {
-			this.update(page.id, {
-				content: page.content,
-			});
-		}
-
-		return await awaitAll({
-			id: page.id,
-			createdAt: page.createdAt.toISOString(),
-			updatedAt: page.updatedAt.toISOString(),
-			userId: page.userId,
-			user: Users.pack(page.user || page.userId, me), // { detail: true } すると無限ループするので注意
-			content: page.content,
-			variables: page.variables,
-			title: page.title,
-			name: page.name,
-			summary: page.summary,
-			hideTitleWhenPinned: page.hideTitleWhenPinned,
-			alignCenter: page.alignCenter,
-			font: page.font,
-			script: page.script,
-			eyeCatchingImageId: page.eyeCatchingImageId,
-			eyeCatchingImage: page.eyeCatchingImageId ? await DriveFiles.pack(page.eyeCatchingImageId) : null,
-			attachedFiles: DriveFiles.packMany((await Promise.all(attachedFiles)).filter((x): x is DriveFile => x != null)),
-			likedCount: page.likedCount,
-			isLiked: meId ? await PageLikes.findOneBy({ pageId: page.id, userId: meId }).then(x => x != null) : undefined,
-		});
-	},
-
-	packMany(
-		pages: Page[],
-		me?: { id: User['id'] } | null | undefined,
-	) {
-		return Promise.all(pages.map(x => this.pack(x, me)));
-	},
-});
diff --git a/packages/backend/src/models/repositories/relay.ts b/packages/backend/src/models/repositories/relay.ts
deleted file mode 100644
index fa1c8f4d8d..0000000000
--- a/packages/backend/src/models/repositories/relay.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { Relay } from '@/models/entities/relay.js';
-
-export const RelayRepository = db.getRepository(Relay).extend({
-});
diff --git a/packages/backend/src/models/repositories/signin.ts b/packages/backend/src/models/repositories/signin.ts
deleted file mode 100644
index 94410ec58a..0000000000
--- a/packages/backend/src/models/repositories/signin.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { Signin } from '@/models/entities/signin.js';
-
-export const SigninRepository = db.getRepository(Signin).extend({
-	async pack(
-		src: Signin,
-	) {
-		return src;
-	},
-});
diff --git a/packages/backend/src/models/repositories/user-group-invitation.ts b/packages/backend/src/models/repositories/user-group-invitation.ts
deleted file mode 100644
index 79ad019c99..0000000000
--- a/packages/backend/src/models/repositories/user-group-invitation.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { UserGroupInvitation } from '@/models/entities/user-group-invitation.js';
-import { UserGroups } from '../index.js';
-
-export const UserGroupInvitationRepository = db.getRepository(UserGroupInvitation).extend({
-	async pack(
-		src: UserGroupInvitation['id'] | UserGroupInvitation,
-	) {
-		const invitation = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		return {
-			id: invitation.id,
-			group: await UserGroups.pack(invitation.userGroup || invitation.userGroupId),
-		};
-	},
-
-	packMany(
-		invitations: any[],
-	) {
-		return Promise.all(invitations.map(x => this.pack(x)));
-	},
-});
diff --git a/packages/backend/src/models/repositories/user-group.ts b/packages/backend/src/models/repositories/user-group.ts
deleted file mode 100644
index 6eb9234244..0000000000
--- a/packages/backend/src/models/repositories/user-group.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { UserGroup } from '@/models/entities/user-group.js';
-import { UserGroupJoinings } from '../index.js';
-import { Packed } from '@/misc/schema.js';
-
-export const UserGroupRepository = db.getRepository(UserGroup).extend({
-	async pack(
-		src: UserGroup['id'] | UserGroup,
-	): Promise<Packed<'UserGroup'>> {
-		const userGroup = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		const users = await UserGroupJoinings.findBy({
-			userGroupId: userGroup.id,
-		});
-
-		return {
-			id: userGroup.id,
-			createdAt: userGroup.createdAt.toISOString(),
-			name: userGroup.name,
-			ownerId: userGroup.userId,
-			userIds: users.map(x => x.userId),
-		};
-	},
-});
diff --git a/packages/backend/src/models/repositories/user-list.ts b/packages/backend/src/models/repositories/user-list.ts
deleted file mode 100644
index 2b6f411ef6..0000000000
--- a/packages/backend/src/models/repositories/user-list.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { db } from '@/db/postgre.js';
-import { UserList } from '@/models/entities/user-list.js';
-import { UserListJoinings } from '../index.js';
-import { Packed } from '@/misc/schema.js';
-
-export const UserListRepository = db.getRepository(UserList).extend({
-	async pack(
-		src: UserList['id'] | UserList,
-	): Promise<Packed<'UserList'>> {
-		const userList = typeof src === 'object' ? src : await this.findOneByOrFail({ id: src });
-
-		const users = await UserListJoinings.findBy({
-			userListId: userList.id,
-		});
-
-		return {
-			id: userList.id,
-			createdAt: userList.createdAt.toISOString(),
-			name: userList.name,
-			userIds: users.map(x => x.userId),
-		};
-	},
-});
diff --git a/packages/backend/src/models/repositories/user.ts b/packages/backend/src/models/repositories/user.ts
deleted file mode 100644
index 5c46ae27a3..0000000000
--- a/packages/backend/src/models/repositories/user.ts
+++ /dev/null
@@ -1,436 +0,0 @@
-import { EntityRepository, Repository, In, Not } from 'typeorm';
-import Ajv from 'ajv';
-import { User, ILocalUser, IRemoteUser } from '@/models/entities/user.js';
-import config from '@/config/index.js';
-import { Packed } from '@/misc/schema.js';
-import { awaitAll, Promiseable } from '@/prelude/await-all.js';
-import { populateEmojis } from '@/misc/populate-emojis.js';
-import { getAntennas } from '@/misc/antenna-cache.js';
-import { USER_ACTIVE_THRESHOLD, USER_ONLINE_THRESHOLD } from '@/const.js';
-import { Cache } from '@/misc/cache.js';
-import { db } from '@/db/postgre.js';
-import { Instance } from '../entities/instance.js';
-import { Notes, NoteUnreads, FollowRequests, Notifications, MessagingMessages, UserNotePinings, Followings, Blockings, Mutings, UserProfiles, UserSecurityKeys, UserGroupJoinings, Pages, Announcements, AnnouncementReads, Antennas, AntennaNotes, ChannelFollowings, Instances, DriveFiles } from '../index.js';
-
-const userInstanceCache = new Cache<Instance | null>(1000 * 60 * 60 * 3);
-
-type IsUserDetailed<Detailed extends boolean> = Detailed extends true ? Packed<'UserDetailed'> : Packed<'UserLite'>;
-type IsMeAndIsUserDetailed<ExpectsMe extends boolean | null, Detailed extends boolean> =
-	Detailed extends true ? 
-		ExpectsMe extends true ? Packed<'MeDetailed'> :
-		ExpectsMe extends false ? Packed<'UserDetailedNotMe'> :
-		Packed<'UserDetailed'> :
-	Packed<'UserLite'>;
-
-const ajv = new Ajv();
-
-const localUsernameSchema = { type: 'string', pattern: /^\w{1,20}$/.toString().slice(1, -1) } as const;
-const passwordSchema = { type: 'string', minLength: 1 } as const;
-const nameSchema = { type: 'string', minLength: 1, maxLength: 50 } as const;
-const descriptionSchema = { type: 'string', minLength: 1, maxLength: 500 } as const;
-const locationSchema = { type: 'string', minLength: 1, maxLength: 50 } as const;
-const birthdaySchema = { type: 'string', pattern: /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/.toString().slice(1, -1) } as const;
-
-function isLocalUser(user: User): user is ILocalUser;
-function isLocalUser<T extends { host: User['host'] }>(user: T): user is T & { host: null; };
-function isLocalUser(user: User | { host: User['host'] }): boolean {
-	return user.host == null;
-}
-
-function isRemoteUser(user: User): user is IRemoteUser;
-function isRemoteUser<T extends { host: User['host'] }>(user: T): user is T & { host: string; };
-function isRemoteUser(user: User | { host: User['host'] }): boolean {
-	return !isLocalUser(user);
-}
-
-export const UserRepository = db.getRepository(User).extend({
-	localUsernameSchema,
-	passwordSchema,
-	nameSchema,
-	descriptionSchema,
-	locationSchema,
-	birthdaySchema,
-
-	//#region Validators
-	validateLocalUsername: ajv.compile(localUsernameSchema),
-	validatePassword: ajv.compile(passwordSchema),
-	validateName: ajv.compile(nameSchema),
-	validateDescription: ajv.compile(descriptionSchema),
-	validateLocation: ajv.compile(locationSchema),
-	validateBirthday: ajv.compile(birthdaySchema),
-	//#endregion
-
-	async getRelation(me: User['id'], target: User['id']) {
-		return awaitAll({
-			id: target,
-			isFollowing: Followings.count({
-				where: {
-					followerId: me,
-					followeeId: target,
-				},
-				take: 1,
-			}).then(n => n > 0),
-			isFollowed: Followings.count({
-				where: {
-					followerId: target,
-					followeeId: me,
-				},
-				take: 1,
-			}).then(n => n > 0),
-			hasPendingFollowRequestFromYou: FollowRequests.count({
-				where: {
-					followerId: me,
-					followeeId: target,
-				},
-				take: 1,
-			}).then(n => n > 0),
-			hasPendingFollowRequestToYou: FollowRequests.count({
-				where: {
-					followerId: target,
-					followeeId: me,
-				},
-				take: 1,
-			}).then(n => n > 0),
-			isBlocking: Blockings.count({
-				where: {
-					blockerId: me,
-					blockeeId: target,
-				},
-				take: 1,
-			}).then(n => n > 0),
-			isBlocked: Blockings.count({
-				where: {
-					blockerId: target,
-					blockeeId: me,
-				},
-				take: 1,
-			}).then(n => n > 0),
-			isMuted: Mutings.count({
-				where: {
-					muterId: me,
-					muteeId: target,
-				},
-				take: 1,
-			}).then(n => n > 0),
-		});
-	},
-
-	async getHasUnreadMessagingMessage(userId: User['id']): Promise<boolean> {
-		const mute = await Mutings.findBy({
-			muterId: userId,
-		});
-
-		const joinings = await UserGroupJoinings.findBy({ userId: userId });
-
-		const groupQs = Promise.all(joinings.map(j => MessagingMessages.createQueryBuilder('message')
-			.where('message.groupId = :groupId', { groupId: j.userGroupId })
-			.andWhere('message.userId != :userId', { userId: userId })
-			.andWhere('NOT (:userId = ANY(message.reads))', { userId: userId })
-			.andWhere('message.createdAt > :joinedAt', { joinedAt: j.createdAt }) // 自分が加入する前の会話については、未読扱いしない
-			.getOne().then(x => x != null)));
-
-		const [withUser, withGroups] = await Promise.all([
-			MessagingMessages.count({
-				where: {
-					recipientId: userId,
-					isRead: false,
-					...(mute.length > 0 ? { userId: Not(In(mute.map(x => x.muteeId))) } : {}),
-				},
-				take: 1,
-			}).then(count => count > 0),
-			groupQs,
-		]);
-
-		return withUser || withGroups.some(x => x);
-	},
-
-	async getHasUnreadAnnouncement(userId: User['id']): Promise<boolean> {
-		const reads = await AnnouncementReads.findBy({
-			userId: userId,
-		});
-
-		const count = await Announcements.countBy(reads.length > 0 ? {
-			id: Not(In(reads.map(read => read.announcementId))),
-		} : {});
-
-		return count > 0;
-	},
-
-	async getHasUnreadAntenna(userId: User['id']): Promise<boolean> {
-		const myAntennas = (await getAntennas()).filter(a => a.userId === userId);
-
-		const unread = myAntennas.length > 0 ? await AntennaNotes.findOneBy({
-			antennaId: In(myAntennas.map(x => x.id)),
-			read: false,
-		}) : null;
-
-		return unread != null;
-	},
-
-	async getHasUnreadChannel(userId: User['id']): Promise<boolean> {
-		const channels = await ChannelFollowings.findBy({ followerId: userId });
-
-		const unread = channels.length > 0 ? await NoteUnreads.findOneBy({
-			userId: userId,
-			noteChannelId: In(channels.map(x => x.followeeId)),
-		}) : null;
-
-		return unread != null;
-	},
-
-	async getHasUnreadNotification(userId: User['id']): Promise<boolean> {
-		const mute = await Mutings.findBy({
-			muterId: userId,
-		});
-		const mutedUserIds = mute.map(m => m.muteeId);
-
-		const count = await Notifications.count({
-			where: {
-				notifieeId: userId,
-				...(mutedUserIds.length > 0 ? { notifierId: Not(In(mutedUserIds)) } : {}),
-				isRead: false,
-			},
-			take: 1,
-		});
-
-		return count > 0;
-	},
-
-	async getHasPendingReceivedFollowRequest(userId: User['id']): Promise<boolean> {
-		const count = await FollowRequests.countBy({
-			followeeId: userId,
-		});
-
-		return count > 0;
-	},
-
-	getOnlineStatus(user: User): 'unknown' | 'online' | 'active' | 'offline' {
-		if (user.hideOnlineStatus) return 'unknown';
-		if (user.lastActiveDate == null) return 'unknown';
-		const elapsed = Date.now() - user.lastActiveDate.getTime();
-		return (
-			elapsed < USER_ONLINE_THRESHOLD ? 'online' :
-			elapsed < USER_ACTIVE_THRESHOLD ? 'active' :
-			'offline'
-		);
-	},
-
-	async getAvatarUrl(user: User): Promise<string> {
-		if (user.avatar) {
-			return DriveFiles.getPublicUrl(user.avatar, true) || this.getIdenticonUrl(user.id);
-		} else if (user.avatarId) {
-			const avatar = await DriveFiles.findOneByOrFail({ id: user.avatarId });
-			return DriveFiles.getPublicUrl(avatar, true) || this.getIdenticonUrl(user.id);
-		} else {
-			return this.getIdenticonUrl(user.id);
-		}
-	},
-
-	getAvatarUrlSync(user: User): string {
-		if (user.avatar) {
-			return DriveFiles.getPublicUrl(user.avatar, true) || this.getIdenticonUrl(user.id);
-		} else {
-			return this.getIdenticonUrl(user.id);
-		}
-	},
-
-	getIdenticonUrl(userId: User['id']): string {
-		return `${config.url}/identicon/${userId}`;
-	},
-
-	async pack<ExpectsMe extends boolean | null = null, D extends boolean = false>(
-		src: User['id'] | User,
-		me?: { id: User['id'] } | null | undefined,
-		options?: {
-			detail?: D,
-			includeSecrets?: boolean,
-		},
-	): Promise<IsMeAndIsUserDetailed<ExpectsMe, D>> {
-		const opts = Object.assign({
-			detail: false,
-			includeSecrets: false,
-		}, options);
-
-		let user: User;
-
-		if (typeof src === 'object') {
-			user = src;
-			if (src.avatar === undefined && src.avatarId) src.avatar = await DriveFiles.findOneBy({ id: src.avatarId }) ?? null;
-			if (src.banner === undefined && src.bannerId) src.banner = await DriveFiles.findOneBy({ id: src.bannerId }) ?? null;
-		} else {
-			user = await this.findOneOrFail({
-				where: { id: src },
-				relations: {
-					avatar: true,
-					banner: true,
-				},
-			});
-		}
-
-		const meId = me ? me.id : null;
-		const isMe = meId === user.id;
-
-		const relation = meId && !isMe && opts.detail ? await this.getRelation(meId, user.id) : null;
-		const pins = opts.detail ? await UserNotePinings.createQueryBuilder('pin')
-			.where('pin.userId = :userId', { userId: user.id })
-			.innerJoinAndSelect('pin.note', 'note')
-			.orderBy('pin.id', 'DESC')
-			.getMany() : [];
-		const profile = opts.detail ? await UserProfiles.findOneByOrFail({ userId: user.id }) : null;
-
-		const followingCount = profile == null ? null :
-			(profile.ffVisibility === 'public') || isMe ? user.followingCount :
-			(profile.ffVisibility === 'followers') && (relation && relation.isFollowing) ? user.followingCount :
-			null;
-
-		const followersCount = profile == null ? null :
-			(profile.ffVisibility === 'public') || isMe ? user.followersCount :
-			(profile.ffVisibility === 'followers') && (relation && relation.isFollowing) ? user.followersCount :
-			null;
-
-		const falsy = opts.detail ? false : undefined;
-
-		const packed = {
-			id: user.id,
-			name: user.name,
-			username: user.username,
-			host: user.host,
-			avatarUrl: this.getAvatarUrlSync(user),
-			avatarBlurhash: user.avatar?.blurhash || null,
-			avatarColor: null, // 後方互換性のため
-			isAdmin: user.isAdmin || falsy,
-			isModerator: user.isModerator || falsy,
-			isBot: user.isBot || falsy,
-			isCat: user.isCat || falsy,
-			instance: user.host ? userInstanceCache.fetch(user.host,
-				() => Instances.findOneBy({ host: user.host! }),
-				v => v != null,
-			).then(instance => instance ? {
-				name: instance.name,
-				softwareName: instance.softwareName,
-				softwareVersion: instance.softwareVersion,
-				iconUrl: instance.iconUrl,
-				faviconUrl: instance.faviconUrl,
-				themeColor: instance.themeColor,
-			} : undefined) : undefined,
-			emojis: populateEmojis(user.emojis, user.host),
-			onlineStatus: this.getOnlineStatus(user),
-			driveCapacityOverrideMb: user.driveCapacityOverrideMb,
-
-			...(opts.detail ? {
-				url: profile!.url,
-				uri: user.uri,
-				createdAt: user.createdAt.toISOString(),
-				updatedAt: user.updatedAt ? user.updatedAt.toISOString() : null,
-				lastFetchedAt: user.lastFetchedAt ? user.lastFetchedAt.toISOString() : null,
-				bannerUrl: user.banner ? DriveFiles.getPublicUrl(user.banner, false) : null,
-				bannerBlurhash: user.banner?.blurhash || null,
-				bannerColor: null, // 後方互換性のため
-				isLocked: user.isLocked,
-				isSilenced: user.isSilenced || falsy,
-				isSuspended: user.isSuspended || falsy,
-				description: profile!.description,
-				location: profile!.location,
-				birthday: profile!.birthday,
-				lang: profile!.lang,
-				fields: profile!.fields,
-				followersCount: followersCount || 0,
-				followingCount: followingCount || 0,
-				notesCount: user.notesCount,
-				pinnedNoteIds: pins.map(pin => pin.noteId),
-				pinnedNotes: Notes.packMany(pins.map(pin => pin.note!), me, {
-					detail: true,
-				}),
-				pinnedPageId: profile!.pinnedPageId,
-				pinnedPage: profile!.pinnedPageId ? Pages.pack(profile!.pinnedPageId, me) : null,
-				publicReactions: profile!.publicReactions,
-				ffVisibility: profile!.ffVisibility,
-				twoFactorEnabled: profile!.twoFactorEnabled,
-				usePasswordLessLogin: profile!.usePasswordLessLogin,
-				securityKeys: profile!.twoFactorEnabled
-					? UserSecurityKeys.countBy({
-						userId: user.id,
-					}).then(result => result >= 1)
-					: false,
-			} : {}),
-
-			...(opts.detail && isMe ? {
-				avatarId: user.avatarId,
-				bannerId: user.bannerId,
-				injectFeaturedNote: profile!.injectFeaturedNote,
-				receiveAnnouncementEmail: profile!.receiveAnnouncementEmail,
-				alwaysMarkNsfw: profile!.alwaysMarkNsfw,
-				autoSensitive: profile!.autoSensitive,
-				carefulBot: profile!.carefulBot,
-				autoAcceptFollowed: profile!.autoAcceptFollowed,
-				noCrawle: profile!.noCrawle,
-				isExplorable: user.isExplorable,
-				isDeleted: user.isDeleted,
-				hideOnlineStatus: user.hideOnlineStatus,
-				hasUnreadSpecifiedNotes: NoteUnreads.count({
-					where: { userId: user.id, isSpecified: true },
-					take: 1,
-				}).then(count => count > 0),
-				hasUnreadMentions: NoteUnreads.count({
-					where: { userId: user.id, isMentioned: true },
-					take: 1,
-				}).then(count => count > 0),
-				hasUnreadAnnouncement: this.getHasUnreadAnnouncement(user.id),
-				hasUnreadAntenna: this.getHasUnreadAntenna(user.id),
-				hasUnreadChannel: this.getHasUnreadChannel(user.id),
-				hasUnreadMessagingMessage: this.getHasUnreadMessagingMessage(user.id),
-				hasUnreadNotification: this.getHasUnreadNotification(user.id),
-				hasPendingReceivedFollowRequest: this.getHasPendingReceivedFollowRequest(user.id),
-				integrations: profile!.integrations,
-				mutedWords: profile!.mutedWords,
-				mutedInstances: profile!.mutedInstances,
-				mutingNotificationTypes: profile!.mutingNotificationTypes,
-				emailNotificationTypes: profile!.emailNotificationTypes,
-				showTimelineReplies: user.showTimelineReplies || falsy,
-			} : {}),
-
-			...(opts.includeSecrets ? {
-				email: profile!.email,
-				emailVerified: profile!.emailVerified,
-				securityKeysList: profile!.twoFactorEnabled
-					? UserSecurityKeys.find({
-						where: {
-							userId: user.id,
-						},
-						select: {
-							id: true,
-							name: true,
-							lastUsed: true,
-						},
-					})
-					: [],
-			} : {}),
-
-			...(relation ? {
-				isFollowing: relation.isFollowing,
-				isFollowed: relation.isFollowed,
-				hasPendingFollowRequestFromYou: relation.hasPendingFollowRequestFromYou,
-				hasPendingFollowRequestToYou: relation.hasPendingFollowRequestToYou,
-				isBlocking: relation.isBlocking,
-				isBlocked: relation.isBlocked,
-				isMuted: relation.isMuted,
-			} : {}),
-		} as Promiseable<Packed<'User'>> as Promiseable<IsMeAndIsUserDetailed<ExpectsMe, D>>;
-
-		return await awaitAll(packed);
-	},
-
-	packMany<D extends boolean = false>(
-		users: (User['id'] | User)[],
-		me?: { id: User['id'] } | null | undefined,
-		options?: {
-			detail?: D,
-			includeSecrets?: boolean,
-		},
-	): Promise<IsUserDetailed<D>[]> {
-		return Promise.all(users.map(u => this.pack(u, me, options)));
-	},
-
-	isLocalUser,
-	isRemoteUser,
-});
diff --git a/packages/backend/src/models/schema/federation-instance.ts b/packages/backend/src/models/schema/federation-instance.ts
index 93327304f3..c57b3fec19 100644
--- a/packages/backend/src/models/schema/federation-instance.ts
+++ b/packages/backend/src/models/schema/federation-instance.ts
@@ -1,5 +1,3 @@
-import config from '@/config/index.js';
-
 export const packedFederationInstanceSchema = {
 	type: 'object',
 	properties: {
@@ -64,7 +62,6 @@ export const packedFederationInstanceSchema = {
 		softwareVersion: {
 			type: 'string',
 			optional: false, nullable: true,
-			example: config.version,
 		},
 		openRegistrations: {
 			type: 'boolean',
diff --git a/packages/backend/src/postgre.ts b/packages/backend/src/postgre.ts
new file mode 100644
index 0000000000..f7044b374e
--- /dev/null
+++ b/packages/backend/src/postgre.ts
@@ -0,0 +1,215 @@
+// https://github.com/typeorm/typeorm/issues/2400
+import pg from 'pg';
+pg.types.setTypeParser(20, Number);
+
+import { DataSource } from 'typeorm';
+import * as highlight from 'cli-highlight';
+import { entities as charts } from '@/core/chart/entities.js';
+
+import { AbuseUserReport } from '@/models/entities/AbuseUserReport.js';
+import { AccessToken } from '@/models/entities/AccessToken.js';
+import { Ad } from '@/models/entities/Ad.js';
+import { Announcement } from '@/models/entities/Announcement.js';
+import { AnnouncementRead } from '@/models/entities/AnnouncementRead.js';
+import { Antenna } from '@/models/entities/Antenna.js';
+import { AntennaNote } from '@/models/entities/AntennaNote.js';
+import { App } from '@/models/entities/App.js';
+import { AttestationChallenge } from '@/models/entities/AttestationChallenge.js';
+import { AuthSession } from '@/models/entities/AuthSession.js';
+import { Blocking } from '@/models/entities/Blocking.js';
+import { ChannelFollowing } from '@/models/entities/ChannelFollowing.js';
+import { ChannelNotePining } from '@/models/entities/ChannelNotePining.js';
+import { Clip } from '@/models/entities/Clip.js';
+import { ClipNote } from '@/models/entities/ClipNote.js';
+import { DriveFile } from '@/models/entities/DriveFile.js';
+import { DriveFolder } from '@/models/entities/DriveFolder.js';
+import { Emoji } from '@/models/entities/Emoji.js';
+import { Following } from '@/models/entities/Following.js';
+import { FollowRequest } from '@/models/entities/FollowRequest.js';
+import { GalleryLike } from '@/models/entities/GalleryLike.js';
+import { GalleryPost } from '@/models/entities/GalleryPost.js';
+import { Hashtag } from '@/models/entities/Hashtag.js';
+import { Instance } from '@/models/entities/Instance.js';
+import { MessagingMessage } from '@/models/entities/MessagingMessage.js';
+import { Meta } from '@/models/entities/Meta.js';
+import { ModerationLog } from '@/models/entities/ModerationLog.js';
+import { MutedNote } from '@/models/entities/MutedNote.js';
+import { Muting } from '@/models/entities/Muting.js';
+import { Note } from '@/models/entities/Note.js';
+import { NoteFavorite } from '@/models/entities/NoteFavorite.js';
+import { NoteReaction } from '@/models/entities/NoteReaction.js';
+import { NoteThreadMuting } from '@/models/entities/NoteThreadMuting.js';
+import { NoteUnread } from '@/models/entities/NoteUnread.js';
+import { Notification } from '@/models/entities/Notification.js';
+import { Page } from '@/models/entities/Page.js';
+import { PageLike } from '@/models/entities/PageLike.js';
+import { PasswordResetRequest } from '@/models/entities/PasswordResetRequest.js';
+import { Poll } from '@/models/entities/Poll.js';
+import { PollVote } from '@/models/entities/PollVote.js';
+import { PromoNote } from '@/models/entities/PromoNote.js';
+import { PromoRead } from '@/models/entities/PromoRead.js';
+import { RegistrationTicket } from '@/models/entities/RegistrationTickets.js';
+import { RegistryItem } from '@/models/entities/RegistryItem.js';
+import { Relay } from '@/models/entities/Relay.js';
+import { Signin } from '@/models/entities/Signin.js';
+import { SwSubscription } from '@/models/entities/SwSubscription.js';
+import { UsedUsername } from '@/models/entities/UsedUsername.js';
+import { User } from '@/models/entities/User.js';
+import { UserGroup } from '@/models/entities/UserGroup.js';
+import { UserGroupInvitation } from '@/models/entities/UserGroupInvitation.js';
+import { UserGroupJoining } from '@/models/entities/UserGroupJoining.js';
+import { UserIp } from '@/models/entities/UserIp.js';
+import { UserKeypair } from '@/models/entities/UserKeypair.js';
+import { UserList } from '@/models/entities/UserList.js';
+import { UserListJoining } from '@/models/entities/UserListJoining.js';
+import { UserNotePining } from '@/models/entities/UserNotePining.js';
+import { UserPending } from '@/models/entities/UserPending.js';
+import { UserProfile } from '@/models/entities/UserProfile.js';
+import { UserPublickey } from '@/models/entities/UserPublickey.js';
+import { UserSecurityKey } from '@/models/entities/UserSecurityKey.js';
+import { Webhook } from '@/models/entities/Webhook.js';
+import { Channel } from '@/models/entities/Channel.js';
+
+import { loadConfig } from '@/config.js';
+import Logger from '@/logger.js';
+import { envOption } from './env.js';
+
+export const dbLogger = new Logger('db');
+
+const sqlLogger = dbLogger.createSubLogger('sql', 'gray', false);
+
+class MyCustomLogger implements Logger {
+	private highlight(sql: string) {
+		return highlight.highlight(sql, {
+			language: 'sql', ignoreIllegals: true,
+		});
+	}
+
+	public logQuery(query: string, parameters?: any[]) {
+		sqlLogger.info(this.highlight(query).substring(0, 100));
+	}
+
+	public logQueryError(error: string, query: string, parameters?: any[]) {
+		sqlLogger.error(this.highlight(query));
+	}
+
+	public logQuerySlow(time: number, query: string, parameters?: any[]) {
+		sqlLogger.warn(this.highlight(query));
+	}
+
+	public logSchemaBuild(message: string) {
+		sqlLogger.info(message);
+	}
+
+	public log(message: string) {
+		sqlLogger.info(message);
+	}
+
+	public logMigration(message: string) {
+		sqlLogger.info(message);
+	}
+}
+
+export const entities = [
+	Announcement,
+	AnnouncementRead,
+	Meta,
+	Instance,
+	App,
+	AuthSession,
+	AccessToken,
+	User,
+	UserProfile,
+	UserKeypair,
+	UserPublickey,
+	UserList,
+	UserListJoining,
+	UserGroup,
+	UserGroupJoining,
+	UserGroupInvitation,
+	UserNotePining,
+	UserSecurityKey,
+	UsedUsername,
+	AttestationChallenge,
+	Following,
+	FollowRequest,
+	Muting,
+	Blocking,
+	Note,
+	NoteFavorite,
+	NoteReaction,
+	NoteThreadMuting,
+	NoteUnread,
+	Page,
+	PageLike,
+	GalleryPost,
+	GalleryLike,
+	DriveFile,
+	DriveFolder,
+	Poll,
+	PollVote,
+	Notification,
+	Emoji,
+	Hashtag,
+	SwSubscription,
+	AbuseUserReport,
+	RegistrationTicket,
+	MessagingMessage,
+	Signin,
+	ModerationLog,
+	Clip,
+	ClipNote,
+	Antenna,
+	AntennaNote,
+	PromoNote,
+	PromoRead,
+	Relay,
+	MutedNote,
+	Channel,
+	ChannelFollowing,
+	ChannelNotePining,
+	RegistryItem,
+	Ad,
+	PasswordResetRequest,
+	UserPending,
+	Webhook,
+	UserIp,
+	...charts,
+];
+
+const log = process.env.NODE_ENV !== 'production';
+
+const config = loadConfig();
+
+export function createPostgreDataSource() {
+	return new DataSource({
+		type: 'postgres',
+		host: config.db.host,
+		port: config.db.port,
+		username: config.db.user,
+		password: config.db.pass,
+		database: config.db.db,
+		extra: {
+			statement_timeout: 1000 * 10,
+			...config.db.extra,
+		},
+		synchronize: process.env.NODE_ENV === 'test',
+		dropSchema: process.env.NODE_ENV === 'test',
+		cache: !config.db.disableCache && process.env.NODE_ENV !== 'test' ? { // dbをcloseしても何故か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,
+				keyPrefix: `${config.redis.prefix}:query:`,
+				db: config.redis.db ?? 0,
+			},
+		} : false,
+		logging: log,
+		logger: log ? new MyCustomLogger() : undefined,
+		maxQueryExecutionTime: 300,
+		entities: entities,
+		migrations: ['../../migration/*.js'],
+	});
+}
diff --git a/packages/backend/src/prelude/README.md b/packages/backend/src/prelude/README.md
deleted file mode 100644
index bb728cfb1b..0000000000
--- a/packages/backend/src/prelude/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Prelude
-このディレクトリのコードはJavaScriptの表現能力を補うためのコードです。
-Misskey固有の処理とは独立したコードの集まりですが、Misskeyのコードを読みやすくすることを目的としています。
diff --git a/packages/backend/src/prelude/array.ts b/packages/backend/src/prelude/array.ts
deleted file mode 100644
index 0b2830cb7b..0000000000
--- a/packages/backend/src/prelude/array.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-import { EndoRelation, Predicate } from './relation.js';
-
-/**
- * Count the number of elements that satisfy the predicate
- */
-
-export function countIf<T>(f: Predicate<T>, xs: T[]): number {
-	return xs.filter(f).length;
-}
-
-/**
- * Count the number of elements that is equal to the element
- */
-export function count<T>(a: T, xs: T[]): number {
-	return countIf(x => x === a, xs);
-}
-
-/**
- * Concatenate an array of arrays
- */
-export function concat<T>(xss: T[][]): T[] {
-	return ([] as T[]).concat(...xss);
-}
-
-/**
- * Intersperse the element between the elements of the array
- * @param sep The element to be interspersed
- */
-export function intersperse<T>(sep: T, xs: T[]): T[] {
-	return concat(xs.map(x => [sep, x])).slice(1);
-}
-
-/**
- * Returns the array of elements that is not equal to the element
- */
-export function erase<T>(a: T, xs: T[]): T[] {
-	return xs.filter(x => x !== a);
-}
-
-/**
- * Finds the array of all elements in the first array not contained in the second array.
- * The order of result values are determined by the first array.
- */
-export function difference<T>(xs: T[], ys: T[]): T[] {
-	return xs.filter(x => !ys.includes(x));
-}
-
-/**
- * Remove all but the first element from every group of equivalent elements
- */
-export function unique<T>(xs: T[]): T[] {
-	return [...new Set(xs)];
-}
-
-export function sum(xs: number[]): number {
-	return xs.reduce((a, b) => a + b, 0);
-}
-
-export function maximum(xs: number[]): number {
-	return Math.max(...xs);
-}
-
-/**
- * Splits an array based on the equivalence relation.
- * The concatenation of the result is equal to the argument.
- */
-export function groupBy<T>(f: EndoRelation<T>, xs: T[]): T[][] {
-	const groups = [] as T[][];
-	for (const x of xs) {
-		if (groups.length !== 0 && f(groups[groups.length - 1][0], x)) {
-			groups[groups.length - 1].push(x);
-		} else {
-			groups.push([x]);
-		}
-	}
-	return groups;
-}
-
-/**
- * Splits an array based on the equivalence relation induced by the function.
- * The concatenation of the result is equal to the argument.
- */
-export function groupOn<T, S>(f: (x: T) => S, xs: T[]): T[][] {
-	return groupBy((a, b) => f(a) === f(b), xs);
-}
-
-export function groupByX<T>(collections: T[], keySelector: (x: T) => string) {
-	return collections.reduce((obj: Record<string, T[]>, item: T) => {
-		const key = keySelector(item);
-		if (!Object.prototype.hasOwnProperty.call(obj, key)) {
-			obj[key] = [];
-		}
-
-		obj[key].push(item);
-
-		return obj;
-	}, {});
-}
-
-/**
- * Compare two arrays by lexicographical order
- */
-export function lessThan(xs: number[], ys: number[]): boolean {
-	for (let i = 0; i < Math.min(xs.length, ys.length); i++) {
-		if (xs[i] < ys[i]) return true;
-		if (xs[i] > ys[i]) return false;
-	}
-	return xs.length < ys.length;
-}
-
-/**
- * Returns the longest prefix of elements that satisfy the predicate
- */
-export function takeWhile<T>(f: Predicate<T>, xs: T[]): T[] {
-	const ys = [];
-	for (const x of xs) {
-		if (f(x)) {
-			ys.push(x);
-		} else {
-			break;
-		}
-	}
-	return ys;
-}
-
-export function cumulativeSum(xs: number[]): number[] {
-	const ys = Array.from(xs); // deep copy
-	for (let i = 1; i < ys.length; i++) ys[i] += ys[i - 1];
-	return ys;
-}
-
-export function toArray<T>(x: T | T[] | undefined): T[] {
-	return Array.isArray(x) ? x : x != null ? [x] : [];
-}
-
-export function toSingle<T>(x: T | T[] | undefined): T | undefined {
-	return Array.isArray(x) ? x[0] : x;
-}
diff --git a/packages/backend/src/prelude/await-all.ts b/packages/backend/src/prelude/await-all.ts
deleted file mode 100644
index b955c3a5d8..0000000000
--- a/packages/backend/src/prelude/await-all.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export type Promiseable<T> = {
-	[K in keyof T]: Promise<T[K]> | T[K];
-};
-
-export async function awaitAll<T>(obj: Promiseable<T>): Promise<T> {
-	const target = {} as T;
-	const keys = Object.keys(obj) as unknown as (keyof T)[];
-	const values = Object.values(obj) as any[];
-
-	const resolvedValues = await Promise.all(values.map(value =>
-		(!value || !value.constructor || value.constructor.name !== 'Object')
-			? value
-			: awaitAll(value)
-	));
-
-	for (let i = 0; i < keys.length; i++) {
-		target[keys[i]] = resolvedValues[i];
-	}
-
-	return target;
-}
diff --git a/packages/backend/src/prelude/math.ts b/packages/backend/src/prelude/math.ts
deleted file mode 100644
index 07b94bec30..0000000000
--- a/packages/backend/src/prelude/math.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function gcd(a: number, b: number): number {
-	return b === 0 ? a : gcd(b, a % b);
-}
diff --git a/packages/backend/src/prelude/maybe.ts b/packages/backend/src/prelude/maybe.ts
deleted file mode 100644
index df7c4ed52a..0000000000
--- a/packages/backend/src/prelude/maybe.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export interface IMaybe<T> {
-	isJust(): this is IJust<T>;
-}
-
-export interface IJust<T> extends IMaybe<T> {
-	get(): T;
-}
-
-export function just<T>(value: T): IJust<T> {
-	return {
-		isJust: () => true,
-		get: () => value,
-	};
-}
-
-export function nothing<T>(): IMaybe<T> {
-	return {
-		isJust: () => false,
-	};
-}
diff --git a/packages/backend/src/prelude/relation.ts b/packages/backend/src/prelude/relation.ts
deleted file mode 100644
index 1f4703f52f..0000000000
--- a/packages/backend/src/prelude/relation.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type Predicate<T> = (a: T) => boolean;
-
-export type Relation<T, U> = (a: T, b: U) => boolean;
-
-export type EndoRelation<T> = Relation<T, T>;
diff --git a/packages/backend/src/prelude/string.ts b/packages/backend/src/prelude/string.ts
deleted file mode 100644
index b907e0a2e1..0000000000
--- a/packages/backend/src/prelude/string.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-export function concat(xs: string[]): string {
-	return xs.join('');
-}
-
-export function capitalize(s: string): string {
-	return toUpperCase(s.charAt(0)) + toLowerCase(s.slice(1));
-}
-
-export function toUpperCase(s: string): string {
-	return s.toUpperCase();
-}
-
-export function toLowerCase(s: string): string {
-	return s.toLowerCase();
-}
diff --git a/packages/backend/src/prelude/symbol.ts b/packages/backend/src/prelude/symbol.ts
deleted file mode 100644
index 51e12f7450..0000000000
--- a/packages/backend/src/prelude/symbol.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const fallback = Symbol('fallback');
diff --git a/packages/backend/src/prelude/time.ts b/packages/backend/src/prelude/time.ts
deleted file mode 100644
index 34e8b6b17c..0000000000
--- a/packages/backend/src/prelude/time.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-const dateTimeIntervals = {
-	'day': 86400000,
-	'hour': 3600000,
-	'ms': 1,
-};
-
-export function dateUTC(time: number[]): Date {
-	const d = time.length === 2 ? Date.UTC(time[0], time[1])
-					: time.length === 3 ? Date.UTC(time[0], time[1], time[2])
-					: time.length === 4 ? Date.UTC(time[0], time[1], time[2], time[3])
-					: time.length === 5 ? Date.UTC(time[0], time[1], time[2], time[3], time[4])
-					: time.length === 6 ? Date.UTC(time[0], time[1], time[2], time[3], time[4], time[5])
-					: time.length === 7 ? Date.UTC(time[0], time[1], time[2], time[3], time[4], time[5], time[6])
-					: null;
-
-	if (!d) throw 'wrong number of arguments';
-
-	return new Date(d);
-}
-
-export function isTimeSame(a: Date, b: Date): boolean {
-	return a.getTime() === b.getTime();
-}
-
-export function isTimeBefore(a: Date, b: Date): boolean {
-	return (a.getTime() - b.getTime()) < 0;
-}
-
-export function isTimeAfter(a: Date, b: Date): boolean {
-	return (a.getTime() - b.getTime()) > 0;
-}
-
-export function addTime(x: Date, value: number, span: keyof typeof dateTimeIntervals = 'ms'): Date {
-	return new Date(x.getTime() + (value * dateTimeIntervals[span]));
-}
-
-export function subtractTime(x: Date, value: number, span: keyof typeof dateTimeIntervals = 'ms'): Date {
-	return new Date(x.getTime() - (value * dateTimeIntervals[span]));
-}
diff --git a/packages/backend/src/prelude/url.ts b/packages/backend/src/prelude/url.ts
deleted file mode 100644
index a4f2f7f5a8..0000000000
--- a/packages/backend/src/prelude/url.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export function query(obj: Record<string, unknown>): 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}`;
-}
diff --git a/packages/backend/src/prelude/xml.ts b/packages/backend/src/prelude/xml.ts
deleted file mode 100644
index b4469a1d8d..0000000000
--- a/packages/backend/src/prelude/xml.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-const map: Record<string, string> = {
-	'&': '&amp;',
-	'<': '&lt;',
-	'>': '&gt;',
-	'"': '&quot;',
-	'\'': '&apos;',
-};
-
-const beginingOfCDATA = '<![CDATA[';
-const endOfCDATA = ']]>';
-
-export function escapeValue(x: string): string {
-	let insideOfCDATA = false;
-	let builder = '';
-	for (
-		let i = 0;
-		i < x.length;
-	) {
-		if (insideOfCDATA) {
-			if (x.slice(i, i + beginingOfCDATA.length) === beginingOfCDATA) {
-				insideOfCDATA = true;
-				i += beginingOfCDATA.length;
-			} else {
-				builder += x[i++];
-			}
-		} else {
-			if (x.slice(i, i + endOfCDATA.length) === endOfCDATA) {
-				insideOfCDATA = false;
-				i += endOfCDATA.length;
-			} else {
-				const b = x[i++];
-				builder += map[b] || b;
-			}
-		}
-	}
-	return builder;
-}
-
-export function escapeAttribute(x: string): string {
-	return Object.entries(map).reduce((a, [k, v]) => a.replace(k, v), x);
-}
diff --git a/packages/backend/src/queue/DbQueueProcessorsService.ts b/packages/backend/src/queue/DbQueueProcessorsService.ts
new file mode 100644
index 0000000000..fcc9873a6f
--- /dev/null
+++ b/packages/backend/src/queue/DbQueueProcessorsService.ts
@@ -0,0 +1,63 @@
+import { Inject, Injectable } from '@nestjs/common';
+import type { DbJobData } from '@/queue/types.js';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import { DeleteDriveFilesProcessorService } from './processors/DeleteDriveFilesProcessorService.js';
+import { ExportCustomEmojisProcessorService } from './processors/ExportCustomEmojisProcessorService.js';
+import { ExportNotesProcessorService } from './processors/ExportNotesProcessorService.js';
+import { ExportFollowingProcessorService } from './processors/ExportFollowingProcessorService.js';
+import { ExportMutingProcessorService } from './processors/ExportMutingProcessorService.js';
+import { ExportBlockingProcessorService } from './processors/ExportBlockingProcessorService.js';
+import { ExportUserListsProcessorService } from './processors/ExportUserListsProcessorService.js';
+import { ImportFollowingProcessorService } from './processors/ImportFollowingProcessorService.js';
+import { ImportMutingProcessorService } from './processors/ImportMutingProcessorService.js';
+import { ImportBlockingProcessorService } from './processors/ImportBlockingProcessorService.js';
+import { ImportUserListsProcessorService } from './processors/ImportUserListsProcessorService.js';
+import { ImportCustomEmojisProcessorService } from './processors/ImportCustomEmojisProcessorService.js';
+import { DeleteAccountProcessorService } from './processors/DeleteAccountProcessorService.js';
+import type Bull from 'bull';
+
+@Injectable()
+export class DbQueueProcessorsService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private deleteDriveFilesProcessorService: DeleteDriveFilesProcessorService,
+		private exportCustomEmojisProcessorService: ExportCustomEmojisProcessorService,
+		private exportNotesProcessorService: ExportNotesProcessorService,
+		private exportFollowingProcessorService: ExportFollowingProcessorService,
+		private exportMutingProcessorService: ExportMutingProcessorService,
+		private exportBlockingProcessorService: ExportBlockingProcessorService,
+		private exportUserListsProcessorService: ExportUserListsProcessorService,
+		private importFollowingProcessorService: ImportFollowingProcessorService,
+		private importMutingProcessorService: ImportMutingProcessorService,
+		private importBlockingProcessorService: ImportBlockingProcessorService,
+		private importUserListsProcessorService: ImportUserListsProcessorService,
+		private importCustomEmojisProcessorService: ImportCustomEmojisProcessorService,
+		private deleteAccountProcessorService: DeleteAccountProcessorService,
+	) {
+	}
+
+	public start(dbQueue: Bull.Queue<DbJobData>) {
+		const jobs = {
+			deleteDriveFiles: (job, done) => this.deleteDriveFilesProcessorService.process(job, done),
+			exportCustomEmojis: (job, done) => this.exportCustomEmojisProcessorService.process(job, done),
+			exportNotes: (job, done) => this.exportNotesProcessorService.process(job, done),
+			exportFollowing: (job, done) => this.exportFollowingProcessorService.process(job, done),
+			exportMuting: (job, done) => this.exportMutingProcessorService.process(job, done),
+			exportBlocking: (job, done) => this.exportBlockingProcessorService.process(job, done),
+			exportUserLists: (job, done) => this.exportUserListsProcessorService.process(job, done),
+			importFollowing: (job, done) => this.importFollowingProcessorService.process(job, done),
+			importMuting: (job, done) => this.importMutingProcessorService.process(job, done),
+			importBlocking: (job, done) => this.importBlockingProcessorService.process(job, done),
+			importUserLists: (job, done) => this.importUserListsProcessorService.process(job, done),
+			importCustomEmojis: (job, done) => this.importCustomEmojisProcessorService.process(job, done),
+			deleteAccount: (job, done) => this.deleteAccountProcessorService.process(job, done),
+		} as Record<string, Bull.ProcessCallbackFunction<DbJobData | Bull.ProcessPromiseFunction<DbJobData>>>;
+		
+		for (const [k, v] of Object.entries(jobs)) {
+			dbQueue.process(k, v);
+		}
+	}
+}
diff --git a/packages/backend/src/queue/ObjectStorageQueueProcessorsService.ts b/packages/backend/src/queue/ObjectStorageQueueProcessorsService.ts
new file mode 100644
index 0000000000..402c038be0
--- /dev/null
+++ b/packages/backend/src/queue/ObjectStorageQueueProcessorsService.ts
@@ -0,0 +1,30 @@
+import { Inject, Injectable } from '@nestjs/common';
+import type { ObjectStorageJobData } from '@/queue/types.js';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import { CleanRemoteFilesProcessorService } from './processors/CleanRemoteFilesProcessorService.js';
+import { DeleteFileProcessorService } from './processors/DeleteFileProcessorService.js';
+import type Bull from 'bull';
+
+@Injectable()
+export class ObjectStorageQueueProcessorsService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private deleteFileProcessorService: DeleteFileProcessorService,
+		private cleanRemoteFilesProcessorService: CleanRemoteFilesProcessorService,
+	) {
+	}
+
+	public start(q: Bull.Queue) {
+		const jobs = {
+			deleteFile: (job, done) => this.deleteFileProcessorService.process(job, done),
+			cleanRemoteFiles: (job, done) => this.cleanRemoteFilesProcessorService.process(job, done),
+		} as Record<string, Bull.ProcessCallbackFunction<ObjectStorageJobData | Bull.ProcessPromiseFunction<ObjectStorageJobData>>>;
+		
+		for (const [k, v] of Object.entries(jobs)) {
+			q.process(k, 16, v);
+		}
+	}
+}
diff --git a/packages/backend/src/queue/QueueLoggerService.ts b/packages/backend/src/queue/QueueLoggerService.ts
new file mode 100644
index 0000000000..4cdd4edfbb
--- /dev/null
+++ b/packages/backend/src/queue/QueueLoggerService.ts
@@ -0,0 +1,12 @@
+import { Inject, Injectable } from '@nestjs/common';
+import Logger from '@/logger.js';
+
+@Injectable()
+export class QueueLoggerService {
+	public logger: Logger;
+
+	constructor(
+	) {
+		this.logger = new Logger('queue', 'orange');
+	}
+}
diff --git a/packages/backend/src/queue/QueueProcessorModule.ts b/packages/backend/src/queue/QueueProcessorModule.ts
new file mode 100644
index 0000000000..f13dd3ef19
--- /dev/null
+++ b/packages/backend/src/queue/QueueProcessorModule.ts
@@ -0,0 +1,72 @@
+import { Module } from '@nestjs/common';
+import { CoreModule } from '@/core/CoreModule.js';
+import { QueueLoggerService } from './QueueLoggerService.js';
+import { QueueProcessorService } from './QueueProcessorService.js';
+import { DbQueueProcessorsService } from './DbQueueProcessorsService.js';
+import { ObjectStorageQueueProcessorsService } from './ObjectStorageQueueProcessorsService.js';
+import { DeliverProcessorService } from './processors/DeliverProcessorService.js';
+import { EndedPollNotificationProcessorService } from './processors/EndedPollNotificationProcessorService.js';
+import { InboxProcessorService } from './processors/InboxProcessorService.js';
+import { WebhookDeliverProcessorService } from './processors/WebhookDeliverProcessorService.js';
+import { SystemQueueProcessorsService } from './SystemQueueProcessorsService.js';
+import { CheckExpiredMutingsProcessorService } from './processors/CheckExpiredMutingsProcessorService.js';
+import { CleanChartsProcessorService } from './processors/CleanChartsProcessorService.js';
+import { CleanProcessorService } from './processors/CleanProcessorService.js';
+import { CleanRemoteFilesProcessorService } from './processors/CleanRemoteFilesProcessorService.js';
+import { DeleteAccountProcessorService } from './processors/DeleteAccountProcessorService.js';
+import { DeleteDriveFilesProcessorService } from './processors/DeleteDriveFilesProcessorService.js';
+import { DeleteFileProcessorService } from './processors/DeleteFileProcessorService.js';
+import { ExportBlockingProcessorService } from './processors/ExportBlockingProcessorService.js';
+import { ExportCustomEmojisProcessorService } from './processors/ExportCustomEmojisProcessorService.js';
+import { ExportFollowingProcessorService } from './processors/ExportFollowingProcessorService.js';
+import { ExportMutingProcessorService } from './processors/ExportMutingProcessorService.js';
+import { ExportNotesProcessorService } from './processors/ExportNotesProcessorService.js';
+import { ExportUserListsProcessorService } from './processors/ExportUserListsProcessorService.js';
+import { ImportBlockingProcessorService } from './processors/ImportBlockingProcessorService.js';
+import { ImportCustomEmojisProcessorService } from './processors/ImportCustomEmojisProcessorService.js';
+import { ImportFollowingProcessorService } from './processors/ImportFollowingProcessorService.js';
+import { ImportMutingProcessorService } from './processors/ImportMutingProcessorService.js';
+import { ImportUserListsProcessorService } from './processors/ImportUserListsProcessorService.js';
+import { ResyncChartsProcessorService } from './processors/ResyncChartsProcessorService.js';
+import { TickChartsProcessorService } from './processors/TickChartsProcessorService.js';
+
+@Module({
+	imports: [
+		CoreModule,
+	],
+	providers: [
+		QueueLoggerService,
+		TickChartsProcessorService,
+		ResyncChartsProcessorService,
+		CleanChartsProcessorService,
+		CheckExpiredMutingsProcessorService,
+		CleanProcessorService,
+		DeleteDriveFilesProcessorService,
+		ExportCustomEmojisProcessorService,
+		ExportNotesProcessorService,
+		ExportFollowingProcessorService,
+		ExportMutingProcessorService,
+		ExportBlockingProcessorService,
+		ExportUserListsProcessorService,
+		ImportFollowingProcessorService,
+		ImportMutingProcessorService,
+		ImportBlockingProcessorService,
+		ImportUserListsProcessorService,
+		ImportCustomEmojisProcessorService,
+		DeleteAccountProcessorService,
+		DeleteFileProcessorService,
+		CleanRemoteFilesProcessorService,
+		SystemQueueProcessorsService,
+		ObjectStorageQueueProcessorsService,
+		DbQueueProcessorsService,
+		WebhookDeliverProcessorService,
+		EndedPollNotificationProcessorService,
+		DeliverProcessorService,
+		InboxProcessorService,
+		QueueProcessorService,
+	],
+	exports: [
+		QueueProcessorService,
+	],
+})
+export class QueueProcessorModule {}
diff --git a/packages/backend/src/queue/QueueProcessorService.ts b/packages/backend/src/queue/QueueProcessorService.ts
new file mode 100644
index 0000000000..27afce0824
--- /dev/null
+++ b/packages/backend/src/queue/QueueProcessorService.ts
@@ -0,0 +1,141 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { ModuleRef } from '@nestjs/core';
+import { Config } from '@/config.js';
+import { DI } from '@/di-symbols.js';
+import type Logger from '@/logger.js';
+import { QueueService } from '@/core/QueueService.js';
+import { getJobInfo } from './get-job-info.js';
+import { SystemQueueProcessorsService } from './SystemQueueProcessorsService.js';
+import { ObjectStorageQueueProcessorsService } from './ObjectStorageQueueProcessorsService.js';
+import { DbQueueProcessorsService } from './DbQueueProcessorsService.js';
+import { WebhookDeliverProcessorService } from './processors/WebhookDeliverProcessorService.js';
+import { EndedPollNotificationProcessorService } from './processors/EndedPollNotificationProcessorService.js';
+import { DeliverProcessorService } from './processors/DeliverProcessorService.js';
+import { InboxProcessorService } from './processors/InboxProcessorService.js';
+import { QueueLoggerService } from './QueueLoggerService.js';
+
+@Injectable()
+export class QueueProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private queueLoggerService: QueueLoggerService,
+		private queueService: QueueService,
+		private systemQueueProcessorsService: SystemQueueProcessorsService,
+		private objectStorageQueueProcessorsService: ObjectStorageQueueProcessorsService,
+		private dbQueueProcessorsService: DbQueueProcessorsService,
+		private webhookDeliverProcessorService: WebhookDeliverProcessorService,
+		private endedPollNotificationProcessorService: EndedPollNotificationProcessorService,
+		private deliverProcessorService: DeliverProcessorService,
+		private inboxProcessorService: InboxProcessorService,
+	) {
+		this.#logger = this.queueLoggerService.logger;
+	}
+
+	public start() {
+		function renderError(e: Error): any {
+			return {
+				stack: e.stack,
+				message: e.message,
+				name: e.name,
+			};
+		}
+	
+		const systemLogger = this.#logger.createSubLogger('system');
+		const deliverLogger = this.#logger.createSubLogger('deliver');
+		const webhookLogger = this.#logger.createSubLogger('webhook');
+		const inboxLogger = this.#logger.createSubLogger('inbox');
+		const dbLogger = this.#logger.createSubLogger('db');
+		const objectStorageLogger = this.#logger.createSubLogger('objectStorage');
+		
+		this.queueService.systemQueue
+			.on('waiting', (jobId) => systemLogger.debug(`waiting id=${jobId}`))
+			.on('active', (job) => systemLogger.debug(`active id=${job.id}`))
+			.on('completed', (job, result) => systemLogger.debug(`completed(${result}) id=${job.id}`))
+			.on('failed', (job, err) => systemLogger.warn(`failed(${err}) id=${job.id}`, { job, e: renderError(err) }))
+			.on('error', (job: any, err: Error) => systemLogger.error(`error ${err}`, { job, e: renderError(err) }))
+			.on('stalled', (job) => systemLogger.warn(`stalled id=${job.id}`));
+		
+		this.queueService.deliverQueue
+			.on('waiting', (jobId) => deliverLogger.debug(`waiting id=${jobId}`))
+			.on('active', (job) => deliverLogger.debug(`active ${getJobInfo(job, true)} to=${job.data.to}`))
+			.on('completed', (job, result) => deliverLogger.debug(`completed(${result}) ${getJobInfo(job, true)} to=${job.data.to}`))
+			.on('failed', (job, err) => deliverLogger.warn(`failed(${err}) ${getJobInfo(job)} to=${job.data.to}`))
+			.on('error', (job: any, err: Error) => deliverLogger.error(`error ${err}`, { job, e: renderError(err) }))
+			.on('stalled', (job) => deliverLogger.warn(`stalled ${getJobInfo(job)} to=${job.data.to}`));
+		
+		this.queueService.inboxQueue
+			.on('waiting', (jobId) => inboxLogger.debug(`waiting id=${jobId}`))
+			.on('active', (job) => inboxLogger.debug(`active ${getJobInfo(job, true)}`))
+			.on('completed', (job, result) => inboxLogger.debug(`completed(${result}) ${getJobInfo(job, true)}`))
+			.on('failed', (job, err) => inboxLogger.warn(`failed(${err}) ${getJobInfo(job)} activity=${job.data.activity ? job.data.activity.id : 'none'}`, { job, e: renderError(err) }))
+			.on('error', (job: any, err: Error) => inboxLogger.error(`error ${err}`, { job, e: renderError(err) }))
+			.on('stalled', (job) => inboxLogger.warn(`stalled ${getJobInfo(job)} activity=${job.data.activity ? job.data.activity.id : 'none'}`));
+		
+		this.queueService.dbQueue
+			.on('waiting', (jobId) => dbLogger.debug(`waiting id=${jobId}`))
+			.on('active', (job) => dbLogger.debug(`active id=${job.id}`))
+			.on('completed', (job, result) => dbLogger.debug(`completed(${result}) id=${job.id}`))
+			.on('failed', (job, err) => dbLogger.warn(`failed(${err}) id=${job.id}`, { job, e: renderError(err) }))
+			.on('error', (job: any, err: Error) => dbLogger.error(`error ${err}`, { job, e: renderError(err) }))
+			.on('stalled', (job) => dbLogger.warn(`stalled id=${job.id}`));
+		
+		this.queueService.objectStorageQueue
+			.on('waiting', (jobId) => objectStorageLogger.debug(`waiting id=${jobId}`))
+			.on('active', (job) => objectStorageLogger.debug(`active id=${job.id}`))
+			.on('completed', (job, result) => objectStorageLogger.debug(`completed(${result}) id=${job.id}`))
+			.on('failed', (job, err) => objectStorageLogger.warn(`failed(${err}) id=${job.id}`, { job, e: renderError(err) }))
+			.on('error', (job: any, err: Error) => objectStorageLogger.error(`error ${err}`, { job, e: renderError(err) }))
+			.on('stalled', (job) => objectStorageLogger.warn(`stalled id=${job.id}`));
+		
+		this.queueService.webhookDeliverQueue
+			.on('waiting', (jobId) => webhookLogger.debug(`waiting id=${jobId}`))
+			.on('active', (job) => webhookLogger.debug(`active ${getJobInfo(job, true)} to=${job.data.to}`))
+			.on('completed', (job, result) => webhookLogger.debug(`completed(${result}) ${getJobInfo(job, true)} to=${job.data.to}`))
+			.on('failed', (job, err) => webhookLogger.warn(`failed(${err}) ${getJobInfo(job)} to=${job.data.to}`))
+			.on('error', (job: any, err: Error) => webhookLogger.error(`error ${err}`, { job, e: renderError(err) }))
+			.on('stalled', (job) => webhookLogger.warn(`stalled ${getJobInfo(job)} to=${job.data.to}`));
+	
+		this.queueService.deliverQueue.process(this.config.deliverJobConcurrency ?? 128, (job, done) => this.deliverProcessorService.process(job));
+		this.queueService.inboxQueue.process(this.config.inboxJobConcurrency ?? 16, (job, done) => this.inboxProcessorService.process(job));
+		this.queueService.endedPollNotificationQueue.process((job, done) => this.endedPollNotificationProcessorService.process(job, done));
+		this.queueService.webhookDeliverQueue.process(64, (job, done) => this.webhookDeliverProcessorService.process(job));
+		this.dbQueueProcessorsService.start(this.queueService.dbQueue);
+		this.objectStorageQueueProcessorsService.start(this.queueService.objectStorageQueue);
+	
+		this.queueService.systemQueue.add('tickCharts', {
+		}, {
+			repeat: { cron: '55 * * * *' },
+			removeOnComplete: true,
+		});
+	
+		this.queueService.systemQueue.add('resyncCharts', {
+		}, {
+			repeat: { cron: '0 0 * * *' },
+			removeOnComplete: true,
+		});
+	
+		this.queueService.systemQueue.add('cleanCharts', {
+		}, {
+			repeat: { cron: '0 0 * * *' },
+			removeOnComplete: true,
+		});
+	
+		this.queueService.systemQueue.add('clean', {
+		}, {
+			repeat: { cron: '0 0 * * *' },
+			removeOnComplete: true,
+		});
+	
+		this.queueService.systemQueue.add('checkExpiredMutings', {
+		}, {
+			repeat: { cron: '*/5 * * * *' },
+			removeOnComplete: true,
+		});
+	
+		this.systemQueueProcessorsService.start(this.queueService.systemQueue);
+	}
+}
diff --git a/packages/backend/src/queue/SystemQueueProcessorsService.ts b/packages/backend/src/queue/SystemQueueProcessorsService.ts
new file mode 100644
index 0000000000..7c227296e7
--- /dev/null
+++ b/packages/backend/src/queue/SystemQueueProcessorsService.ts
@@ -0,0 +1,38 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import { TickChartsProcessorService } from './processors/TickChartsProcessorService.js';
+import { ResyncChartsProcessorService } from './processors/ResyncChartsProcessorService.js';
+import { CleanChartsProcessorService } from './processors/CleanChartsProcessorService.js';
+import { CheckExpiredMutingsProcessorService } from './processors/CheckExpiredMutingsProcessorService.js';
+import { CleanProcessorService } from './processors/CleanProcessorService.js';
+import type Bull from 'bull';
+
+@Injectable()
+export class SystemQueueProcessorsService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private tickChartsProcessorService: TickChartsProcessorService,
+		private resyncChartsProcessorService: ResyncChartsProcessorService,
+		private cleanChartsProcessorService: CleanChartsProcessorService,
+		private checkExpiredMutingsProcessorService: CheckExpiredMutingsProcessorService,
+		private cleanProcessorService: CleanProcessorService,
+	) {
+	}
+
+	public start(dbQueue: Bull.Queue<Record<string, unknown>>) {
+		const jobs = {
+			tickCharts: (job, done) => this.tickChartsProcessorService.process(job, done),
+			resyncCharts: (job, done) => this.resyncChartsProcessorService.process(job, done),
+			cleanCharts: (job, done) => this.cleanChartsProcessorService.process(job, done),
+			checkExpiredMutings: (job, done) => this.checkExpiredMutingsProcessorService.process(job, done),
+			clean: (job, done) => this.cleanProcessorService.process(job, done),
+		} as Record<string, Bull.ProcessCallbackFunction<Record<string, unknown>> | Bull.ProcessPromiseFunction<Record<string, unknown>>>;
+		
+		for (const [k, v] of Object.entries(jobs)) {
+			dbQueue.process(k, v);
+		}
+	}
+}
diff --git a/packages/backend/src/queue/index.ts b/packages/backend/src/queue/index.ts
deleted file mode 100644
index ebb3a77cab..0000000000
--- a/packages/backend/src/queue/index.ts
+++ /dev/null
@@ -1,342 +0,0 @@
-import httpSignature from '@peertube/http-signature';
-import { v4 as uuid } from 'uuid';
-
-import config from '@/config/index.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { IActivity } from '@/remote/activitypub/type.js';
-import { Webhook, webhookEventTypes } from '@/models/entities/webhook.js';
-import { envOption } from '../env.js';
-
-import processDeliver from './processors/deliver.js';
-import processInbox from './processors/inbox.js';
-import processDb from './processors/db/index.js';
-import processObjectStorage from './processors/object-storage/index.js';
-import processSystemQueue from './processors/system/index.js';
-import processWebhookDeliver from './processors/webhook-deliver.js';
-import { endedPollNotification } from './processors/ended-poll-notification.js';
-import { queueLogger } from './logger.js';
-import { getJobInfo } from './get-job-info.js';
-import { systemQueue, dbQueue, deliverQueue, inboxQueue, objectStorageQueue, endedPollNotificationQueue, webhookDeliverQueue } from './queues.js';
-import { ThinUser } from './types.js';
-
-function renderError(e: Error): any {
-	return {
-		stack: e.stack,
-		message: e.message,
-		name: e.name,
-	};
-}
-
-const systemLogger = queueLogger.createSubLogger('system');
-const deliverLogger = queueLogger.createSubLogger('deliver');
-const webhookLogger = queueLogger.createSubLogger('webhook');
-const inboxLogger = queueLogger.createSubLogger('inbox');
-const dbLogger = queueLogger.createSubLogger('db');
-const objectStorageLogger = queueLogger.createSubLogger('objectStorage');
-
-systemQueue
-	.on('waiting', (jobId) => systemLogger.debug(`waiting id=${jobId}`))
-	.on('active', (job) => systemLogger.debug(`active id=${job.id}`))
-	.on('completed', (job, result) => systemLogger.debug(`completed(${result}) id=${job.id}`))
-	.on('failed', (job, err) => systemLogger.warn(`failed(${err}) id=${job.id}`, { job, e: renderError(err) }))
-	.on('error', (job: any, err: Error) => systemLogger.error(`error ${err}`, { job, e: renderError(err) }))
-	.on('stalled', (job) => systemLogger.warn(`stalled id=${job.id}`));
-
-deliverQueue
-	.on('waiting', (jobId) => deliverLogger.debug(`waiting id=${jobId}`))
-	.on('active', (job) => deliverLogger.debug(`active ${getJobInfo(job, true)} to=${job.data.to}`))
-	.on('completed', (job, result) => deliverLogger.debug(`completed(${result}) ${getJobInfo(job, true)} to=${job.data.to}`))
-	.on('failed', (job, err) => deliverLogger.warn(`failed(${err}) ${getJobInfo(job)} to=${job.data.to}`))
-	.on('error', (job: any, err: Error) => deliverLogger.error(`error ${err}`, { job, e: renderError(err) }))
-	.on('stalled', (job) => deliverLogger.warn(`stalled ${getJobInfo(job)} to=${job.data.to}`));
-
-inboxQueue
-	.on('waiting', (jobId) => inboxLogger.debug(`waiting id=${jobId}`))
-	.on('active', (job) => inboxLogger.debug(`active ${getJobInfo(job, true)}`))
-	.on('completed', (job, result) => inboxLogger.debug(`completed(${result}) ${getJobInfo(job, true)}`))
-	.on('failed', (job, err) => inboxLogger.warn(`failed(${err}) ${getJobInfo(job)} activity=${job.data.activity ? job.data.activity.id : 'none'}`, { job, e: renderError(err) }))
-	.on('error', (job: any, err: Error) => inboxLogger.error(`error ${err}`, { job, e: renderError(err) }))
-	.on('stalled', (job) => inboxLogger.warn(`stalled ${getJobInfo(job)} activity=${job.data.activity ? job.data.activity.id : 'none'}`));
-
-dbQueue
-	.on('waiting', (jobId) => dbLogger.debug(`waiting id=${jobId}`))
-	.on('active', (job) => dbLogger.debug(`active id=${job.id}`))
-	.on('completed', (job, result) => dbLogger.debug(`completed(${result}) id=${job.id}`))
-	.on('failed', (job, err) => dbLogger.warn(`failed(${err}) id=${job.id}`, { job, e: renderError(err) }))
-	.on('error', (job: any, err: Error) => dbLogger.error(`error ${err}`, { job, e: renderError(err) }))
-	.on('stalled', (job) => dbLogger.warn(`stalled id=${job.id}`));
-
-objectStorageQueue
-	.on('waiting', (jobId) => objectStorageLogger.debug(`waiting id=${jobId}`))
-	.on('active', (job) => objectStorageLogger.debug(`active id=${job.id}`))
-	.on('completed', (job, result) => objectStorageLogger.debug(`completed(${result}) id=${job.id}`))
-	.on('failed', (job, err) => objectStorageLogger.warn(`failed(${err}) id=${job.id}`, { job, e: renderError(err) }))
-	.on('error', (job: any, err: Error) => objectStorageLogger.error(`error ${err}`, { job, e: renderError(err) }))
-	.on('stalled', (job) => objectStorageLogger.warn(`stalled id=${job.id}`));
-
-webhookDeliverQueue
-	.on('waiting', (jobId) => webhookLogger.debug(`waiting id=${jobId}`))
-	.on('active', (job) => webhookLogger.debug(`active ${getJobInfo(job, true)} to=${job.data.to}`))
-	.on('completed', (job, result) => webhookLogger.debug(`completed(${result}) ${getJobInfo(job, true)} to=${job.data.to}`))
-	.on('failed', (job, err) => webhookLogger.warn(`failed(${err}) ${getJobInfo(job)} to=${job.data.to}`))
-	.on('error', (job: any, err: Error) => webhookLogger.error(`error ${err}`, { job, e: renderError(err) }))
-	.on('stalled', (job) => webhookLogger.warn(`stalled ${getJobInfo(job)} to=${job.data.to}`));
-
-export function deliver(user: ThinUser, content: unknown, to: string | null) {
-	if (content == null) return null;
-	if (to == null) return null;
-
-	const data = {
-		user: {
-			id: user.id,
-		},
-		content,
-		to,
-	};
-
-	return deliverQueue.add(data, {
-		attempts: config.deliverJobMaxAttempts || 12,
-		timeout: 1 * 60 * 1000,	// 1min
-		backoff: {
-			type: 'apBackoff',
-		},
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function inbox(activity: IActivity, signature: httpSignature.IParsedSignature) {
-	const data = {
-		activity: activity,
-		signature,
-	};
-
-	return inboxQueue.add(data, {
-		attempts: config.inboxJobMaxAttempts || 8,
-		timeout: 5 * 60 * 1000,	// 5min
-		backoff: {
-			type: 'apBackoff',
-		},
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function createDeleteDriveFilesJob(user: ThinUser) {
-	return dbQueue.add('deleteDriveFiles', {
-		user: user,
-	}, {
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function createExportCustomEmojisJob(user: ThinUser) {
-	return dbQueue.add('exportCustomEmojis', {
-		user: user,
-	}, {
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function createExportNotesJob(user: ThinUser) {
-	return dbQueue.add('exportNotes', {
-		user: user,
-	}, {
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function createExportFollowingJob(user: ThinUser, excludeMuting = false, excludeInactive = false) {
-	return dbQueue.add('exportFollowing', {
-		user: user,
-		excludeMuting,
-		excludeInactive,
-	}, {
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function createExportMuteJob(user: ThinUser) {
-	return dbQueue.add('exportMute', {
-		user: user,
-	}, {
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function createExportBlockingJob(user: ThinUser) {
-	return dbQueue.add('exportBlocking', {
-		user: user,
-	}, {
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function createExportUserListsJob(user: ThinUser) {
-	return dbQueue.add('exportUserLists', {
-		user: user,
-	}, {
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function createImportFollowingJob(user: ThinUser, fileId: DriveFile['id']) {
-	return dbQueue.add('importFollowing', {
-		user: user,
-		fileId: fileId,
-	}, {
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function createImportMutingJob(user: ThinUser, fileId: DriveFile['id']) {
-	return dbQueue.add('importMuting', {
-		user: user,
-		fileId: fileId,
-	}, {
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function createImportBlockingJob(user: ThinUser, fileId: DriveFile['id']) {
-	return dbQueue.add('importBlocking', {
-		user: user,
-		fileId: fileId,
-	}, {
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function createImportUserListsJob(user: ThinUser, fileId: DriveFile['id']) {
-	return dbQueue.add('importUserLists', {
-		user: user,
-		fileId: fileId,
-	}, {
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function createImportCustomEmojisJob(user: ThinUser, fileId: DriveFile['id']) {
-	return dbQueue.add('importCustomEmojis', {
-		user: user,
-		fileId: fileId,
-	}, {
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function createDeleteAccountJob(user: ThinUser, opts: { soft?: boolean; } = {}) {
-	return dbQueue.add('deleteAccount', {
-		user: user,
-		soft: opts.soft,
-	}, {
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function createDeleteObjectStorageFileJob(key: string) {
-	return objectStorageQueue.add('deleteFile', {
-		key: key,
-	}, {
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function createCleanRemoteFilesJob() {
-	return objectStorageQueue.add('cleanRemoteFiles', {}, {
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export function webhookDeliver(webhook: Webhook, type: typeof webhookEventTypes[number], content: unknown) {
-	const data = {
-		type,
-		content,
-		webhookId: webhook.id,
-		userId: webhook.userId,
-		to: webhook.url,
-		secret: webhook.secret,
-		createdAt: Date.now(),
-		eventId: uuid(),
-	};
-
-	return webhookDeliverQueue.add(data, {
-		attempts: 4,
-		timeout: 1 * 60 * 1000,	// 1min
-		backoff: {
-			type: 'apBackoff',
-		},
-		removeOnComplete: true,
-		removeOnFail: true,
-	});
-}
-
-export default function() {
-	if (envOption.onlyServer) return;
-
-	deliverQueue.process(config.deliverJobConcurrency || 128, processDeliver);
-	inboxQueue.process(config.inboxJobConcurrency || 16, processInbox);
-	endedPollNotificationQueue.process(endedPollNotification);
-	webhookDeliverQueue.process(64, processWebhookDeliver);
-	processDb(dbQueue);
-	processObjectStorage(objectStorageQueue);
-
-	systemQueue.add('tickCharts', {
-	}, {
-		repeat: { cron: '55 * * * *' },
-		removeOnComplete: true,
-	});
-
-	systemQueue.add('resyncCharts', {
-	}, {
-		repeat: { cron: '0 0 * * *' },
-		removeOnComplete: true,
-	});
-
-	systemQueue.add('cleanCharts', {
-	}, {
-		repeat: { cron: '0 0 * * *' },
-		removeOnComplete: true,
-	});
-
-	systemQueue.add('clean', {
-	}, {
-		repeat: { cron: '0 0 * * *' },
-		removeOnComplete: true,
-	});
-
-	systemQueue.add('checkExpiredMutings', {
-	}, {
-		repeat: { cron: '*/5 * * * *' },
-		removeOnComplete: true,
-	});
-
-	processSystemQueue(systemQueue);
-}
-
-export function destroy() {
-	deliverQueue.once('cleaned', (jobs, status) => {
-		deliverLogger.succ(`Cleaned ${jobs.length} ${status} jobs`);
-	});
-	deliverQueue.clean(0, 'delayed');
-
-	inboxQueue.once('cleaned', (jobs, status) => {
-		inboxLogger.succ(`Cleaned ${jobs.length} ${status} jobs`);
-	});
-	inboxQueue.clean(0, 'delayed');
-}
diff --git a/packages/backend/src/queue/initialize.ts b/packages/backend/src/queue/initialize.ts
deleted file mode 100644
index eef4080af3..0000000000
--- a/packages/backend/src/queue/initialize.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import Bull from 'bull';
-import config from '@/config/index.js';
-
-export function initialize<T>(name: string, limitPerSec = -1) {
-	return new Bull<T>(name, {
-		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,
-		},
-		prefix: config.redis.prefix ? `${config.redis.prefix}:queue` : 'queue',
-		limiter: limitPerSec > 0 ? {
-			max: limitPerSec,
-			duration: 1000,
-		} : undefined,
-		settings: {
-			backoffStrategies: {
-				apBackoff,
-			},
-		},
-	});
-}
-
-// ref. https://github.com/misskey-dev/misskey/pull/7635#issue-971097019
-function apBackoff(attemptsMade: number, err: Error) {
-	const baseDelay = 60 * 1000;	// 1min
-	const maxBackoff = 8 * 60 * 60 * 1000;	// 8hours
-	let backoff = (Math.pow(2, attemptsMade) - 1) * baseDelay;
-	backoff = Math.min(backoff, maxBackoff);
-	backoff += Math.round(backoff * Math.random() * 0.2);
-	return backoff;
-}
diff --git a/packages/backend/src/queue/logger.ts b/packages/backend/src/queue/logger.ts
deleted file mode 100644
index 2843a3c263..0000000000
--- a/packages/backend/src/queue/logger.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Logger from '@/services/logger.js';
-
-export const queueLogger = new Logger('queue', 'orange');
diff --git a/packages/backend/src/queue/processors/CheckExpiredMutingsProcessorService.ts b/packages/backend/src/queue/processors/CheckExpiredMutingsProcessorService.ts
new file mode 100644
index 0000000000..514dc1dcf3
--- /dev/null
+++ b/packages/backend/src/queue/processors/CheckExpiredMutingsProcessorService.ts
@@ -0,0 +1,50 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { In, MoreThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { MutingsRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+
+@Injectable()
+export class CheckExpiredMutingsProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		private globalEventService: GlobalEventService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('check-expired-mutings');
+	}
+
+	public async process(job: Bull.Job<Record<string, unknown>>, done: () => void): Promise<void> {
+		this.#logger.info('Checking expired mutings...');
+
+		const expired = await this.mutingsRepository.createQueryBuilder('muting')
+			.where('muting.expiresAt IS NOT NULL')
+			.andWhere('muting.expiresAt < :now', { now: new Date() })
+			.innerJoinAndSelect('muting.mutee', 'mutee')
+			.getMany();
+
+		if (expired.length > 0) {
+			await this.mutingsRepository.delete({
+				id: In(expired.map(m => m.id)),
+			});
+
+			for (const m of expired) {
+				this.globalEventService.publishUserEvent(m.muterId, 'unmute', m.mutee!);
+			}
+		}
+
+		this.#logger.succ('All expired mutings checked.');
+		done();
+	}
+}
diff --git a/packages/backend/src/queue/processors/CleanChartsProcessorService.ts b/packages/backend/src/queue/processors/CleanChartsProcessorService.ts
new file mode 100644
index 0000000000..0eaad9b9ed
--- /dev/null
+++ b/packages/backend/src/queue/processors/CleanChartsProcessorService.ts
@@ -0,0 +1,68 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { In, MoreThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import FederationChart from '@/core/chart/charts/federation.js';
+import NotesChart from '@/core/chart/charts/notes.js';
+import UsersChart from '@/core/chart/charts/users.js';
+import ActiveUsersChart from '@/core/chart/charts/active-users.js';
+import InstanceChart from '@/core/chart/charts/instance.js';
+import PerUserNotesChart from '@/core/chart/charts/per-user-notes.js';
+import DriveChart from '@/core/chart/charts/drive.js';
+import PerUserReactionsChart from '@/core/chart/charts/per-user-reactions.js';
+import HashtagChart from '@/core/chart/charts/hashtag.js';
+import PerUserFollowingChart from '@/core/chart/charts/per-user-following.js';
+import PerUserDriveChart from '@/core/chart/charts/per-user-drive.js';
+import ApRequestChart from '@/core/chart/charts/ap-request.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+
+@Injectable()
+export class CleanChartsProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private federationChart: FederationChart,
+		private notesChart: NotesChart,
+		private usersChart: UsersChart,
+		private activeUsersChart: ActiveUsersChart,
+		private instanceChart: InstanceChart,
+		private perUserNotesChart: PerUserNotesChart,
+		private driveChart: DriveChart,
+		private perUserReactionsChart: PerUserReactionsChart,
+		private hashtagChart: HashtagChart,
+		private perUserFollowingChart: PerUserFollowingChart,
+		private perUserDriveChart: PerUserDriveChart,
+		private apRequestChart: ApRequestChart,
+
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('clean-charts');
+	}
+
+	public async process(job: Bull.Job<Record<string, unknown>>, done: () => void): Promise<void> {
+		this.#logger.info('Clean charts...');
+
+		await Promise.all([
+			this.federationChart.clean(),
+			this.notesChart.clean(),
+			this.usersChart.clean(),
+			this.activeUsersChart.clean(),
+			this.instanceChart.clean(),
+			this.perUserNotesChart.clean(),
+			this.driveChart.clean(),
+			this.perUserReactionsChart.clean(),
+			this.hashtagChart.clean(),
+			this.perUserFollowingChart.clean(),
+			this.perUserDriveChart.clean(),
+			this.apRequestChart.clean(),
+		]);
+
+		this.#logger.succ('All charts successfully cleaned.');
+		done();
+	}
+}
diff --git a/packages/backend/src/queue/processors/CleanProcessorService.ts b/packages/backend/src/queue/processors/CleanProcessorService.ts
new file mode 100644
index 0000000000..6150120806
--- /dev/null
+++ b/packages/backend/src/queue/processors/CleanProcessorService.ts
@@ -0,0 +1,36 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { In, LessThan, MoreThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { UserIpsRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+
+@Injectable()
+export class CleanProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.userIpsRepository)
+		private userIpsRepository: UserIpsRepository,
+
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('clean');
+	}
+
+	public async process(job: Bull.Job<Record<string, unknown>>, done: () => void): Promise<void> {
+		this.#logger.info('Cleaning...');
+
+		this.userIpsRepository.delete({
+			createdAt: LessThan(new Date(Date.now() - (1000 * 60 * 60 * 24 * 90))),
+		});
+
+		this.#logger.succ('Cleaned.');
+		done();
+	}
+}
diff --git a/packages/backend/src/queue/processors/CleanRemoteFilesProcessorService.ts b/packages/backend/src/queue/processors/CleanRemoteFilesProcessorService.ts
new file mode 100644
index 0000000000..8c53632563
--- /dev/null
+++ b/packages/backend/src/queue/processors/CleanRemoteFilesProcessorService.ts
@@ -0,0 +1,69 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { IsNull, MoreThan, Not } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { DriveService } from '@/core/DriveService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+
+@Injectable()
+export class CleanRemoteFilesProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private driveService: DriveService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('clean-remote-files');
+	}
+
+	public async process(job: Bull.Job<Record<string, unknown>>, done: () => void): Promise<void> {
+		this.#logger.info('Deleting cached remote files...');
+
+		let deletedCount = 0;
+		let cursor: any = null;
+
+		while (true) {
+			const files = await this.driveFilesRepository.find({
+				where: {
+					userHost: Not(IsNull()),
+					isLink: false,
+					...(cursor ? { id: MoreThan(cursor) } : {}),
+				},
+				take: 8,
+				order: {
+					id: 1,
+				},
+			});
+
+			if (files.length === 0) {
+				job.progress(100);
+				break;
+			}
+
+			cursor = files[files.length - 1].id;
+
+			await Promise.all(files.map(file => this.driveService.deleteFileSync(file, true)));
+
+			deletedCount += 8;
+
+			const total = await this.driveFilesRepository.countBy({
+				userHost: Not(IsNull()),
+				isLink: false,
+			});
+
+			job.progress(deletedCount / total);
+		}
+
+		this.#logger.succ('All cahced remote files has been deleted.');
+		done();
+	}
+}
diff --git a/packages/backend/src/queue/processors/DeleteAccountProcessorService.ts b/packages/backend/src/queue/processors/DeleteAccountProcessorService.ts
new file mode 100644
index 0000000000..a5255c5c05
--- /dev/null
+++ b/packages/backend/src/queue/processors/DeleteAccountProcessorService.ts
@@ -0,0 +1,124 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { MoreThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { DriveFilesRepository, UserProfilesRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { DriveService } from '@/core/DriveService.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import type { Note } from '@/models/entities/Note.js';
+import { EmailService } from '@/core/EmailService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { DbUserDeleteJobData } from '../types.js';
+
+@Injectable()
+export class DeleteAccountProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private driveService: DriveService,
+		private emailService: EmailService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('delete-account');
+	}
+
+	public async process(job: Bull.Job<DbUserDeleteJobData>): Promise<string | void> {
+		this.#logger.info(`Deleting account of ${job.data.user.id} ...`);
+
+		const user = await this.usersRepository.findOneBy({ id: job.data.user.id });
+		if (user == null) {
+			return;
+		}
+
+		{ // Delete notes
+			let cursor: Note['id'] | null = null;
+
+			while (true) {
+				const notes = await this.notesRepository.find({
+					where: {
+						userId: user.id,
+						...(cursor ? { id: MoreThan(cursor) } : {}),
+					},
+					take: 100,
+					order: {
+						id: 1,
+					},
+				}) as Note[];
+
+				if (notes.length === 0) {
+					break;
+				}
+
+				cursor = notes[notes.length - 1].id;
+
+				await this.notesRepository.delete(notes.map(note => note.id));
+			}
+
+			this.#logger.succ('All of notes deleted');
+		}
+
+		{ // Delete files
+			let cursor: DriveFile['id'] | null = null;
+
+			while (true) {
+				const files = await this.driveFilesRepository.find({
+					where: {
+						userId: user.id,
+						...(cursor ? { id: MoreThan(cursor) } : {}),
+					},
+					take: 10,
+					order: {
+						id: 1,
+					},
+				}) as DriveFile[];
+
+				if (files.length === 0) {
+					break;
+				}
+
+				cursor = files[files.length - 1].id;
+
+				for (const file of files) {
+					await this.driveService.deleteFileSync(file);
+				}
+			}
+
+			this.#logger.succ('All of files deleted');
+		}
+
+		{ // Send email notification
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+			if (profile.email && profile.emailVerified) {
+				this.emailService.sendEmail(profile.email, 'Account deleted',
+					'Your account has been deleted.',
+					'Your account has been deleted.');
+			}
+		}
+
+		// soft指定されている場合は物理削除しない
+		if (job.data.soft) {
+		// nop
+		} else {
+			await this.usersRepository.delete(job.data.user.id);
+		}
+
+		return 'Account deleted';
+	}
+}
diff --git a/packages/backend/src/queue/processors/DeleteDriveFilesProcessorService.ts b/packages/backend/src/queue/processors/DeleteDriveFilesProcessorService.ts
new file mode 100644
index 0000000000..80814bb5a2
--- /dev/null
+++ b/packages/backend/src/queue/processors/DeleteDriveFilesProcessorService.ts
@@ -0,0 +1,78 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { MoreThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { UsersRepository, DriveFilesRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { DriveService } from '@/core/DriveService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { DbUserJobData } from '../types.js';
+
+@Injectable()
+export class DeleteDriveFilesProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private driveService: DriveService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('delete-drive-files');
+	}
+
+	public async process(job: Bull.Job<DbUserJobData>, done: () => void): Promise<void> {
+		this.#logger.info(`Deleting drive files of ${job.data.user.id} ...`);
+
+		const user = await this.usersRepository.findOneBy({ id: job.data.user.id });
+		if (user == null) {
+			done();
+			return;
+		}
+
+		let deletedCount = 0;
+		let cursor: any = null;
+
+		while (true) {
+			const files = await this.driveFilesRepository.find({
+				where: {
+					userId: user.id,
+					...(cursor ? { id: MoreThan(cursor) } : {}),
+				},
+				take: 100,
+				order: {
+					id: 1,
+				},
+			});
+
+			if (files.length === 0) {
+				job.progress(100);
+				break;
+			}
+
+			cursor = files[files.length - 1].id;
+
+			for (const file of files) {
+				await this.driveService.deleteFileSync(file);
+				deletedCount++;
+			}
+
+			const total = await this.driveFilesRepository.countBy({
+				userId: user.id,
+			});
+
+			job.progress(deletedCount / total);
+		}
+
+		this.#logger.succ(`All drive files (${deletedCount}) of ${user.id} has been deleted.`);
+		done();
+	}
+}
diff --git a/packages/backend/src/queue/processors/DeleteFileProcessorService.ts b/packages/backend/src/queue/processors/DeleteFileProcessorService.ts
new file mode 100644
index 0000000000..55424f6444
--- /dev/null
+++ b/packages/backend/src/queue/processors/DeleteFileProcessorService.ts
@@ -0,0 +1,31 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { DriveService } from '@/core/DriveService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { ObjectStorageFileJobData } from '../types.js';
+
+@Injectable()
+export class DeleteFileProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private driveService: DriveService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('delete-file');
+	}
+
+	public async process(job: Bull.Job<ObjectStorageFileJobData>): Promise<string> {
+		const key: string = job.data.key;
+
+		await this.driveService.deleteObjectStorageFile(key);
+
+		return 'Success';
+	}
+}
diff --git a/packages/backend/src/queue/processors/DeliverProcessorService.ts b/packages/backend/src/queue/processors/DeliverProcessorService.ts
new file mode 100644
index 0000000000..3403ec83a9
--- /dev/null
+++ b/packages/backend/src/queue/processors/DeliverProcessorService.ts
@@ -0,0 +1,130 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { MoreThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { DriveFilesRepository, InstancesRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { MetaService } from '@/core/MetaService.js';
+import { ApRequestService } from '@/core/remote/activitypub/ApRequestService.js';
+import { FederatedInstanceService } from '@/core/FederatedInstanceService.js';
+import { FetchInstanceMetadataService } from '@/core/FetchInstanceMetadataService.js';
+import { Cache } from '@/misc/cache.js';
+import type { Instance } from '@/models/entities/Instance.js';
+import InstanceChart from '@/core/chart/charts/instance.js';
+import ApRequestChart from '@/core/chart/charts/ap-request.js';
+import FederationChart from '@/core/chart/charts/federation.js';
+import { StatusError } from '@/misc/status-error.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { DeliverJobData } from '../types.js';
+
+@Injectable()
+export class DeliverProcessorService {
+	#logger: Logger;
+	#suspendedHostsCache: Cache<Instance[]>;
+	#latest: string | null;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private metaService: MetaService,
+		private utilityService: UtilityService,
+		private federatedInstanceService: FederatedInstanceService,
+		private fetchInstanceMetadataService: FetchInstanceMetadataService,
+		private apRequestService: ApRequestService,
+		private instanceChart: InstanceChart,
+		private apRequestChart: ApRequestChart,
+		private federationChart: FederationChart,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('deliver');
+		this.#suspendedHostsCache = new Cache<Instance[]>(1000 * 60 * 60);
+		this.#latest = null;
+	}
+
+	public async process(job: Bull.Job<DeliverJobData>): Promise<string> {
+		const { host } = new URL(job.data.to);
+
+		// ブロックしてたら中断
+		const meta = await this.metaService.fetch();
+		if (meta.blockedHosts.includes(this.utilityService.toPuny(host))) {
+			return 'skip (blocked)';
+		}
+
+		// isSuspendedなら中断
+		let suspendedHosts = this.#suspendedHostsCache.get(null);
+		if (suspendedHosts == null) {
+			suspendedHosts = await this.instancesRepository.find({
+				where: {
+					isSuspended: true,
+				},
+			});
+			this.#suspendedHostsCache.set(null, suspendedHosts);
+		}
+		if (suspendedHosts.map(x => x.host).includes(this.utilityService.toPuny(host))) {
+			return 'skip (suspended)';
+		}
+
+		try {
+			if (this.#latest !== (this.#latest = JSON.stringify(job.data.content, null, 2))) {
+				this.#logger.debug(`delivering ${this.#latest}`);
+			}
+
+			await this.apRequestService.signedPost(job.data.user, job.data.to, job.data.content);
+
+			// Update stats
+			this.federatedInstanceService.registerOrFetchInstanceDoc(host).then(i => {
+				this.instancesRepository.update(i.id, {
+					latestRequestSentAt: new Date(),
+					latestStatus: 200,
+					lastCommunicatedAt: new Date(),
+					isNotResponding: false,
+				});
+
+				this.fetchInstanceMetadataService.fetchInstanceMetadata(i);
+
+				this.instanceChart.requestSent(i.host, true);
+				this.apRequestChart.deliverSucc();
+				this.federationChart.deliverd(i.host, true);
+			});
+
+			return 'Success';
+		} catch (res) {
+		// Update stats
+			this.federatedInstanceService.registerOrFetchInstanceDoc(host).then(i => {
+				this.instancesRepository.update(i.id, {
+					latestRequestSentAt: new Date(),
+					latestStatus: res instanceof StatusError ? res.statusCode : null,
+					isNotResponding: true,
+				});
+
+				this.instanceChart.requestSent(i.host, false);
+				this.apRequestChart.deliverFail();
+				this.federationChart.deliverd(i.host, false);
+			});
+
+			if (res instanceof StatusError) {
+			// 4xx
+				if (res.isClientError) {
+				// HTTPステータスコード4xxはクライアントエラーであり、それはつまり
+				// 何回再送しても成功することはないということなのでエラーにはしないでおく
+					return `${res.statusCode} ${res.statusMessage}`;
+				}
+
+				// 5xx etc.
+				throw `${res.statusCode} ${res.statusMessage}`;
+			} else {
+			// DNS error, socket error, timeout ...
+				throw res;
+			}
+		}
+	}
+}
diff --git a/packages/backend/src/queue/processors/EndedPollNotificationProcessorService.ts b/packages/backend/src/queue/processors/EndedPollNotificationProcessorService.ts
new file mode 100644
index 0000000000..b90c7be629
--- /dev/null
+++ b/packages/backend/src/queue/processors/EndedPollNotificationProcessorService.ts
@@ -0,0 +1,56 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { MoreThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { PollVotesRepository, NotesRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { CreateNotificationService } from '@/core/CreateNotificationService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { EndedPollNotificationJobData } from '../types.js';
+
+@Injectable()
+export class EndedPollNotificationProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.pollVotesRepository)
+		private pollVotesRepository: PollVotesRepository,
+
+		private createNotificationService: CreateNotificationService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('ended-poll-notification');
+	}
+
+	public async process(job: Bull.Job<EndedPollNotificationJobData>, done: () => void): Promise<void> {
+		const note = await this.notesRepository.findOneBy({ id: job.data.noteId });
+		if (note == null || !note.hasPoll) {
+			done();
+			return;
+		}
+
+		const votes = await this.pollVotesRepository.createQueryBuilder('vote')
+			.select('vote.userId')
+			.where('vote.noteId = :noteId', { noteId: note.id })
+			.innerJoinAndSelect('vote.user', 'user')
+			.andWhere('user.host IS NULL')
+			.getMany();
+
+		const userIds = [...new Set([note.userId, ...votes.map(v => v.userId)])];
+
+		for (const userId of userIds) {
+			this.createNotificationService.createNotification(userId, 'pollEnded', {
+				noteId: note.id,
+			});
+		}
+
+		done();
+	}
+}
diff --git a/packages/backend/src/queue/processors/ExportBlockingProcessorService.ts b/packages/backend/src/queue/processors/ExportBlockingProcessorService.ts
new file mode 100644
index 0000000000..9b520be06e
--- /dev/null
+++ b/packages/backend/src/queue/processors/ExportBlockingProcessorService.ts
@@ -0,0 +1,117 @@
+import * as fs from 'node:fs';
+import { Inject, Injectable } from '@nestjs/common';
+import { MoreThan } from 'typeorm';
+import { format as dateFormat } from 'date-fns';
+import { DI } from '@/di-symbols.js';
+import { UsersRepository, BlockingsRepository } from '@/models/index.js';
+import type { DriveFilesRepository, UserProfilesRepository, NotesRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { DriveService } from '@/core/DriveService.js';
+import { createTemp } from '@/misc/create-temp.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { DbUserJobData } from '../types.js';
+
+@Injectable()
+export class ExportBlockingProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		private utilityService: UtilityService,
+		private driveService: DriveService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('export-blocking');
+	}
+
+	public async process(job: Bull.Job<DbUserJobData>, done: () => void): Promise<void> {
+		this.#logger.info(`Exporting blocking of ${job.data.user.id} ...`);
+
+		const user = await this.usersRepository.findOneBy({ id: job.data.user.id });
+		if (user == null) {
+			done();
+			return;
+		}
+
+		// Create temp file
+		const [path, cleanup] = await createTemp();
+
+		this.#logger.info(`Temp file is ${path}`);
+
+		try {
+			const stream = fs.createWriteStream(path, { flags: 'a' });
+
+			let exportedCount = 0;
+			let cursor: any = null;
+
+			while (true) {
+				const blockings = await this.blockingsRepository.find({
+					where: {
+						blockerId: user.id,
+						...(cursor ? { id: MoreThan(cursor) } : {}),
+					},
+					take: 100,
+					order: {
+						id: 1,
+					},
+				});
+
+				if (blockings.length === 0) {
+					job.progress(100);
+					break;
+				}
+
+				cursor = blockings[blockings.length - 1].id;
+
+				for (const block of blockings) {
+					const u = await this.usersRepository.findOneBy({ id: block.blockeeId });
+					if (u == null) {
+						exportedCount++; continue;
+					}
+
+					const content = this.utilityService.getFullApAccount(u.username, u.host);
+					await new Promise<void>((res, rej) => {
+						stream.write(content + '\n', err => {
+							if (err) {
+								this.#logger.error(err);
+								rej(err);
+							} else {
+								res();
+							}
+						});
+					});
+					exportedCount++;
+				}
+
+				const total = await this.blockingsRepository.countBy({
+					blockerId: user.id,
+				});
+
+				job.progress(exportedCount / total);
+			}
+
+			stream.end();
+			this.#logger.succ(`Exported to: ${path}`);
+
+			const fileName = 'blocking-' + dateFormat(new Date(), 'yyyy-MM-dd-HH-mm-ss') + '.csv';
+			const driveFile = await this.driveService.addFile({ user, path, name: fileName, force: true });
+
+			this.#logger.succ(`Exported to: ${driveFile.id}`);
+		} finally {
+			cleanup();
+		}
+
+		done();
+	}
+}
diff --git a/packages/backend/src/queue/processors/ExportCustomEmojisProcessorService.ts b/packages/backend/src/queue/processors/ExportCustomEmojisProcessorService.ts
new file mode 100644
index 0000000000..93341c2c63
--- /dev/null
+++ b/packages/backend/src/queue/processors/ExportCustomEmojisProcessorService.ts
@@ -0,0 +1,135 @@
+import * as fs from 'node:fs';
+import { Inject, Injectable } from '@nestjs/common';
+import { IsNull, MoreThan } from 'typeorm';
+import { format as dateFormat } from 'date-fns';
+import { ulid } from 'ulid';
+import mime from 'mime-types';
+import archiver from 'archiver';
+import { DI } from '@/di-symbols.js';
+import { EmojisRepository, UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { DriveService } from '@/core/DriveService.js';
+import { createTemp, createTempDir } from '@/misc/create-temp.js';
+import { DownloadService } from '@/core/DownloadService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+
+@Injectable()
+export class ExportCustomEmojisProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+
+		private driveService: DriveService,
+		private downloadService: DownloadService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('export-custom-emojis');
+	}
+
+	public async process(job: Bull.Job, done: () => void): Promise<void> {
+		this.#logger.info('Exporting custom emojis ...');
+
+		const user = await this.usersRepository.findOneBy({ id: job.data.user.id });
+		if (user == null) {
+			done();
+			return;
+		}
+
+		const [path, cleanup] = await createTempDir();
+
+		this.#logger.info(`Temp dir is ${path}`);
+
+		const metaPath = path + '/meta.json';
+
+		fs.writeFileSync(metaPath, '', 'utf-8');
+
+		const metaStream = fs.createWriteStream(metaPath, { flags: 'a' });
+
+		const writeMeta = (text: string): Promise<void> => {
+			return new Promise<void>((res, rej) => {
+				metaStream.write(text, err => {
+					if (err) {
+						this.#logger.error(err);
+						rej(err);
+					} else {
+						res();
+					}
+				});
+			});
+		};
+
+		await writeMeta(`{"metaVersion":2,"host":"${this.config.host}","exportedAt":"${new Date().toString()}","emojis":[`);
+
+		const customEmojis = await this.emojisRepository.find({
+			where: {
+				host: IsNull(),
+			},
+			order: {
+				id: 'ASC',
+			},
+		});
+
+		for (const emoji of customEmojis) {
+			const ext = mime.extension(emoji.type);
+			const fileName = emoji.name + (ext ? '.' + ext : '');
+			const emojiPath = path + '/' + fileName;
+			fs.writeFileSync(emojiPath, '', 'binary');
+			let downloaded = false;
+
+			try {
+				await this.downloadService.downloadUrl(emoji.originalUrl, emojiPath);
+				downloaded = true;
+			} catch (e) { // TODO: 何度か再試行
+				this.#logger.error(e instanceof Error ? e : new Error(e as string));
+			}
+
+			if (!downloaded) {
+				fs.unlinkSync(emojiPath);
+			}
+
+			const content = JSON.stringify({
+				fileName: fileName,
+				downloaded: downloaded,
+				emoji: emoji,
+			});
+			const isFirst = customEmojis.indexOf(emoji) === 0;
+
+			await writeMeta(isFirst ? content : ',\n' + content);
+		}
+
+		await writeMeta(']}');
+
+		metaStream.end();
+
+		// Create archive
+		const [archivePath, archiveCleanup] = await createTemp();
+		const archiveStream = fs.createWriteStream(archivePath);
+		const archive = archiver('zip', {
+			zlib: { level: 0 },
+		});
+		archiveStream.on('close', async () => {
+			this.#logger.succ(`Exported to: ${archivePath}`);
+
+			const fileName = 'custom-emojis-' + dateFormat(new Date(), 'yyyy-MM-dd-HH-mm-ss') + '.zip';
+			const driveFile = await this.driveService.addFile({ user, path: archivePath, name: fileName, force: true });
+
+			this.#logger.succ(`Exported to: ${driveFile.id}`);
+			cleanup();
+			archiveCleanup();
+			done();
+		});
+		archive.pipe(archiveStream);
+		archive.directory(path, false);
+		archive.finalize();
+	}
+}
diff --git a/packages/backend/src/queue/processors/ExportFollowingProcessorService.ts b/packages/backend/src/queue/processors/ExportFollowingProcessorService.ts
new file mode 100644
index 0000000000..9946015ff7
--- /dev/null
+++ b/packages/backend/src/queue/processors/ExportFollowingProcessorService.ts
@@ -0,0 +1,120 @@
+import * as fs from 'node:fs';
+import { Inject, Injectable } from '@nestjs/common';
+import { In, MoreThan, Not } from 'typeorm';
+import { format as dateFormat } from 'date-fns';
+import { DI } from '@/di-symbols.js';
+import { FollowingsRepository, MutingsRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { DriveService } from '@/core/DriveService.js';
+import { createTemp } from '@/misc/create-temp.js';
+import type { Following } from '@/models/entities/Following.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { DbUserJobData } from '../types.js';
+
+@Injectable()
+export class ExportFollowingProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		private utilityService: UtilityService,
+		private driveService: DriveService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('export-following');
+	}
+
+	public async process(job: Bull.Job<DbUserJobData>, done: () => void): Promise<void> {
+		this.#logger.info(`Exporting following of ${job.data.user.id} ...`);
+
+		const user = await this.usersRepository.findOneBy({ id: job.data.user.id });
+		if (user == null) {
+			done();
+			return;
+		}
+
+		// Create temp file
+		const [path, cleanup] = await createTemp();
+
+		this.#logger.info(`Temp file is ${path}`);
+
+		try {
+			const stream = fs.createWriteStream(path, { flags: 'a' });
+
+			let cursor: Following['id'] | null = null;
+
+			const mutings = job.data.excludeMuting ? await this.mutingsRepository.findBy({
+				muterId: user.id,
+			}) : [];
+
+			while (true) {
+				const followings = await this.followingsRepository.find({
+					where: {
+						followerId: user.id,
+						...(mutings.length > 0 ? { followeeId: Not(In(mutings.map(x => x.muteeId))) } : {}),
+						...(cursor ? { id: MoreThan(cursor) } : {}),
+					},
+					take: 100,
+					order: {
+						id: 1,
+					},
+				}) as Following[];
+
+				if (followings.length === 0) {
+					break;
+				}
+
+				cursor = followings[followings.length - 1].id;
+
+				for (const following of followings) {
+					const u = await this.usersRepository.findOneBy({ id: following.followeeId });
+					if (u == null) {
+						continue;
+					}
+
+					if (job.data.excludeInactive && u.updatedAt && (Date.now() - u.updatedAt.getTime() > 1000 * 60 * 60 * 24 * 90)) {
+						continue;
+					}
+
+					const content = this.utilityService.getFullApAccount(u.username, u.host);
+					await new Promise<void>((res, rej) => {
+						stream.write(content + '\n', err => {
+							if (err) {
+								this.#logger.error(err);
+								rej(err);
+							} else {
+								res();
+							}
+						});
+					});
+				}
+			}
+
+			stream.end();
+			this.#logger.succ(`Exported to: ${path}`);
+
+			const fileName = 'following-' + dateFormat(new Date(), 'yyyy-MM-dd-HH-mm-ss') + '.csv';
+			const driveFile = await this.driveService.addFile({ user, path, name: fileName, force: true });
+
+			this.#logger.succ(`Exported to: ${driveFile.id}`);
+		} finally {
+			cleanup();
+		}
+
+		done();
+	}
+}
diff --git a/packages/backend/src/queue/processors/ExportMutingProcessorService.ts b/packages/backend/src/queue/processors/ExportMutingProcessorService.ts
new file mode 100644
index 0000000000..a34cea0f41
--- /dev/null
+++ b/packages/backend/src/queue/processors/ExportMutingProcessorService.ts
@@ -0,0 +1,120 @@
+import * as fs from 'node:fs';
+import { Inject, Injectable } from '@nestjs/common';
+import { IsNull, MoreThan } from 'typeorm';
+import { format as dateFormat } from 'date-fns';
+import { DI } from '@/di-symbols.js';
+import { MutingsRepository, UsersRepository, BlockingsRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { DriveService } from '@/core/DriveService.js';
+import { createTemp } from '@/misc/create-temp.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { DbUserJobData } from '../types.js';
+
+@Injectable()
+export class ExportMutingProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		private utilityService: UtilityService,
+		private driveService: DriveService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('export-muting');
+	}
+
+	public async process(job: Bull.Job<DbUserJobData>, done: () => void): Promise<void> {
+		this.#logger.info(`Exporting muting of ${job.data.user.id} ...`);
+
+		const user = await this.usersRepository.findOneBy({ id: job.data.user.id });
+		if (user == null) {
+			done();
+			return;
+		}
+
+		// Create temp file
+		const [path, cleanup] = await createTemp();
+
+		this.#logger.info(`Temp file is ${path}`);
+
+		try {
+			const stream = fs.createWriteStream(path, { flags: 'a' });
+
+			let exportedCount = 0;
+			let cursor: any = null;
+
+			while (true) {
+				const mutes = await this.mutingsRepository.find({
+					where: {
+						muterId: user.id,
+						expiresAt: IsNull(),
+						...(cursor ? { id: MoreThan(cursor) } : {}),
+					},
+					take: 100,
+					order: {
+						id: 1,
+					},
+				});
+
+				if (mutes.length === 0) {
+					job.progress(100);
+					break;
+				}
+
+				cursor = mutes[mutes.length - 1].id;
+
+				for (const mute of mutes) {
+					const u = await this.usersRepository.findOneBy({ id: mute.muteeId });
+					if (u == null) {
+						exportedCount++; continue;
+					}
+
+					const content = this.utilityService.getFullApAccount(u.username, u.host);
+					await new Promise<void>((res, rej) => {
+						stream.write(content + '\n', err => {
+							if (err) {
+								this.#logger.error(err);
+								rej(err);
+							} else {
+								res();
+							}
+						});
+					});
+					exportedCount++;
+				}
+
+				const total = await this.mutingsRepository.countBy({
+					muterId: user.id,
+				});
+
+				job.progress(exportedCount / total);
+			}
+
+			stream.end();
+			this.#logger.succ(`Exported to: ${path}`);
+
+			const fileName = 'mute-' + dateFormat(new Date(), 'yyyy-MM-dd-HH-mm-ss') + '.csv';
+			const driveFile = await this.driveService.addFile({ user, path, name: fileName, force: true });
+
+			this.#logger.succ(`Exported to: ${driveFile.id}`);
+		} finally {
+			cleanup();
+		}
+
+		done();
+	}
+}
diff --git a/packages/backend/src/queue/processors/ExportNotesProcessorService.ts b/packages/backend/src/queue/processors/ExportNotesProcessorService.ts
new file mode 100644
index 0000000000..24fcc1a8ad
--- /dev/null
+++ b/packages/backend/src/queue/processors/ExportNotesProcessorService.ts
@@ -0,0 +1,143 @@
+import * as fs from 'node:fs';
+import { Inject, Injectable } from '@nestjs/common';
+import { IsNull, MoreThan } from 'typeorm';
+import { format as dateFormat } from 'date-fns';
+import { DI } from '@/di-symbols.js';
+import { NotesRepository, PollsRepository, UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { DriveService } from '@/core/DriveService.js';
+import { createTemp } from '@/misc/create-temp.js';
+import type { Poll } from '@/models/entities/Poll.js';
+import type { Note } from '@/models/entities/Note.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { DbUserJobData } from '../types.js';
+
+@Injectable()
+export class ExportNotesProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.pollsRepository)
+		private pollsRepository: PollsRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		private driveService: DriveService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('export-notes');
+	}
+
+	public async process(job: Bull.Job<DbUserJobData>, done: () => void): Promise<void> {
+		this.#logger.info(`Exporting notes of ${job.data.user.id} ...`);
+
+		const user = await this.usersRepository.findOneBy({ id: job.data.user.id });
+		if (user == null) {
+			done();
+			return;
+		}
+
+		// Create temp file
+		const [path, cleanup] = await createTemp();
+
+		this.#logger.info(`Temp file is ${path}`);
+
+		try {
+			const stream = fs.createWriteStream(path, { flags: 'a' });
+
+			const write = (text: string): Promise<void> => {
+				return new Promise<void>((res, rej) => {
+					stream.write(text, err => {
+						if (err) {
+							this.#logger.error(err);
+							rej(err);
+						} else {
+							res();
+						}
+					});
+				});
+			};
+
+			await write('[');
+
+			let exportedNotesCount = 0;
+			let cursor: Note['id'] | null = null;
+
+			while (true) {
+				const notes = await this.notesRepository.find({
+					where: {
+						userId: user.id,
+						...(cursor ? { id: MoreThan(cursor) } : {}),
+					},
+					take: 100,
+					order: {
+						id: 1,
+					},
+				}) as Note[];
+
+				if (notes.length === 0) {
+					job.progress(100);
+					break;
+				}
+
+				cursor = notes[notes.length - 1].id;
+
+				for (const note of notes) {
+					let poll: Poll | undefined;
+					if (note.hasPoll) {
+						poll = await this.pollsRepository.findOneByOrFail({ noteId: note.id });
+					}
+					const content = JSON.stringify(serialize(note, poll));
+					const isFirst = exportedNotesCount === 0;
+					await write(isFirst ? content : ',\n' + content);
+					exportedNotesCount++;
+				}
+
+				const total = await this.notesRepository.countBy({
+					userId: user.id,
+				});
+
+				job.progress(exportedNotesCount / total);
+			}
+
+			await write(']');
+
+			stream.end();
+			this.#logger.succ(`Exported to: ${path}`);
+
+			const fileName = 'notes-' + dateFormat(new Date(), 'yyyy-MM-dd-HH-mm-ss') + '.json';
+			const driveFile = await this.driveService.addFile({ user, path, name: fileName, force: true });
+
+			this.#logger.succ(`Exported to: ${driveFile.id}`);
+		} finally {
+			cleanup();
+		}
+
+		done();
+	}
+}
+
+function serialize(note: Note, poll: Poll | null = null): Record<string, unknown> {
+	return {
+		id: note.id,
+		text: note.text,
+		createdAt: note.createdAt,
+		fileIds: note.fileIds,
+		replyId: note.replyId,
+		renoteId: note.renoteId,
+		poll: poll,
+		cw: note.cw,
+		visibility: note.visibility,
+		visibleUserIds: note.visibleUserIds,
+		localOnly: note.localOnly,
+	};
+}
diff --git a/packages/backend/src/queue/processors/ExportUserListsProcessorService.ts b/packages/backend/src/queue/processors/ExportUserListsProcessorService.ts
new file mode 100644
index 0000000000..a02e9bdee4
--- /dev/null
+++ b/packages/backend/src/queue/processors/ExportUserListsProcessorService.ts
@@ -0,0 +1,96 @@
+import * as fs from 'node:fs';
+import { Inject, Injectable } from '@nestjs/common';
+import { In, IsNull, MoreThan } from 'typeorm';
+import { format as dateFormat } from 'date-fns';
+import { DI } from '@/di-symbols.js';
+import { UserListJoiningsRepository, UserListsRepository, UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { DriveService } from '@/core/DriveService.js';
+import { createTemp } from '@/misc/create-temp.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { DbUserJobData } from '../types.js';
+
+@Injectable()
+export class ExportUserListsProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userListsRepository)
+		private userListsRepository: UserListsRepository,
+
+		@Inject(DI.userListJoiningsRepository)
+		private userListJoiningsRepository: UserListJoiningsRepository,
+
+		private utilityService: UtilityService,
+		private driveService: DriveService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('export-user-lists');
+	}
+
+	public async process(job: Bull.Job<DbUserJobData>, done: () => void): Promise<void> {
+		this.#logger.info(`Exporting user lists of ${job.data.user.id} ...`);
+
+		const user = await this.usersRepository.findOneBy({ id: job.data.user.id });
+		if (user == null) {
+			done();
+			return;
+		}
+
+		const lists = await this.userListsRepository.findBy({
+			userId: user.id,
+		});
+
+		// Create temp file
+		const [path, cleanup] = await createTemp();
+
+		this.#logger.info(`Temp file is ${path}`);
+
+		try {
+			const stream = fs.createWriteStream(path, { flags: 'a' });
+
+			for (const list of lists) {
+				const joinings = await this.userListJoiningsRepository.findBy({ userListId: list.id });
+				const users = await this.usersRepository.findBy({
+					id: In(joinings.map(j => j.userId)),
+				});
+
+				for (const u of users) {
+					const acct = this.utilityService.getFullApAccount(u.username, u.host);
+					const content = `${list.name},${acct}`;
+					await new Promise<void>((res, rej) => {
+						stream.write(content + '\n', err => {
+							if (err) {
+								this.#logger.error(err);
+								rej(err);
+							} else {
+								res();
+							}
+						});
+					});
+				}
+			}
+
+			stream.end();
+			this.#logger.succ(`Exported to: ${path}`);
+
+			const fileName = 'user-lists-' + dateFormat(new Date(), 'yyyy-MM-dd-HH-mm-ss') + '.csv';
+			const driveFile = await this.driveService.addFile({ user, path, name: fileName, force: true });
+
+			this.#logger.succ(`Exported to: ${driveFile.id}`);
+		} finally {
+			cleanup();
+		}
+
+		done();
+	}
+}
diff --git a/packages/backend/src/queue/processors/ImportBlockingProcessorService.ts b/packages/backend/src/queue/processors/ImportBlockingProcessorService.ts
new file mode 100644
index 0000000000..abae196299
--- /dev/null
+++ b/packages/backend/src/queue/processors/ImportBlockingProcessorService.ts
@@ -0,0 +1,102 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { IsNull, MoreThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { BlockingsRepository, DriveFilesRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import * as Acct from '@/misc/acct.js';
+import { ResolveUserService } from '@/core/remote/ResolveUserService.js';
+import { UserBlockingService } from '@/core/UserBlockingService.js';
+import { DownloadService } from '@/core/DownloadService.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { DbUserImportJobData } from '../types.js';
+
+@Injectable()
+export class ImportBlockingProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private utilityService: UtilityService,
+		private userBlockingService: UserBlockingService,
+		private resolveUserService: ResolveUserService,
+		private downloadService: DownloadService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('import-blocking');
+	}
+
+	public async process(job: Bull.Job<DbUserImportJobData>, done: () => void): Promise<void> {
+		this.#logger.info(`Importing blocking of ${job.data.user.id} ...`);
+
+		const user = await this.usersRepository.findOneBy({ id: job.data.user.id });
+		if (user == null) {
+			done();
+			return;
+		}
+
+		const file = await this.driveFilesRepository.findOneBy({
+			id: job.data.fileId,
+		});
+		if (file == null) {
+			done();
+			return;
+		}
+
+		const csv = await this.downloadService.downloadTextFile(file.url);
+
+		let linenum = 0;
+
+		for (const line of csv.trim().split('\n')) {
+			linenum++;
+
+			try {
+				const acct = line.split(',')[0].trim();
+				const { username, host } = Acct.parse(acct);
+
+				let target = this.utilityService.isSelfHost(host!) ? await this.usersRepository.findOneBy({
+					host: IsNull(),
+					usernameLower: username.toLowerCase(),
+				}) : await this.usersRepository.findOneBy({
+					host: this.utilityService.toPuny(host!),
+					usernameLower: username.toLowerCase(),
+				});
+
+				if (host == null && target == null) continue;
+
+				if (target == null) {
+					target = await this.resolveUserService.resolveUser(username, host);
+				}
+
+				if (target == null) {
+					throw `cannot resolve user: @${username}@${host}`;
+				}
+
+				// skip myself
+				if (target.id === job.data.user.id) continue;
+
+				this.#logger.info(`Block[${linenum}] ${target.id} ...`);
+
+				await this.userBlockingService.block(user, target);
+			} catch (e) {
+				this.#logger.warn(`Error in line:${linenum} ${e}`);
+			}
+		}
+
+		this.#logger.succ('Imported');
+		done();
+	}
+}
diff --git a/packages/backend/src/queue/processors/ImportCustomEmojisProcessorService.ts b/packages/backend/src/queue/processors/ImportCustomEmojisProcessorService.ts
new file mode 100644
index 0000000000..6f86589aec
--- /dev/null
+++ b/packages/backend/src/queue/processors/ImportCustomEmojisProcessorService.ts
@@ -0,0 +1,110 @@
+import * as fs from 'node:fs';
+import { Inject, Injectable } from '@nestjs/common';
+import { IsNull, MoreThan, DataSource } from 'typeorm';
+import unzipper from 'unzipper';
+import { DI } from '@/di-symbols.js';
+import { EmojisRepository, DriveFilesRepository, UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { CustomEmojiService } from '@/core/CustomEmojiService.js';
+import { createTempDir } from '@/misc/create-temp.js';
+import { DriveService } from '@/core/DriveService.js';
+import { DownloadService } from '@/core/DownloadService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { DbUserImportJobData } from '../types.js';
+
+// TODO: 名前衝突時の動作を選べるようにする
+@Injectable()
+export class ImportCustomEmojisProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+
+		private customEmojiService: CustomEmojiService,
+		private driveService: DriveService,
+		private downloadService: DownloadService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('import-custom-emojis');
+	}
+
+	public async process(job: Bull.Job<DbUserImportJobData>, done: () => void): Promise<void> {
+		this.#logger.info('Importing custom emojis ...');
+
+		const file = await this.driveFilesRepository.findOneBy({
+			id: job.data.fileId,
+		});
+		if (file == null) {
+			done();
+			return;
+		}
+
+		const [path, cleanup] = await createTempDir();
+
+		this.#logger.info(`Temp dir is ${path}`);
+
+		const destPath = path + '/emojis.zip';
+
+		try {
+			fs.writeFileSync(destPath, '', 'binary');
+			await this.downloadService.downloadUrl(file.url, destPath);
+		} catch (e) { // TODO: 何度か再試行
+			if (e instanceof Error || typeof e === 'string') {
+				this.#logger.error(e);
+			}
+			throw e;
+		}
+
+		const outputPath = path + '/emojis';
+		const unzipStream = fs.createReadStream(destPath);
+		const extractor = unzipper.Extract({ path: outputPath });
+		extractor.on('close', async () => {
+			const metaRaw = fs.readFileSync(outputPath + '/meta.json', 'utf-8');
+			const meta = JSON.parse(metaRaw);
+
+			for (const record of meta.emojis) {
+				if (!record.downloaded) continue;
+				const emojiInfo = record.emoji;
+				const emojiPath = outputPath + '/' + record.fileName;
+				await this.emojisRepository.delete({
+					name: emojiInfo.name,
+				});
+				const driveFile = await this.driveService.addFile({
+					user: null,
+					path: emojiPath,
+					name: record.fileName,
+					force: true,
+				});
+				await this.customEmojiService.add({
+					name: emojiInfo.name,
+					category: emojiInfo.category,
+					host: null,
+					aliases: emojiInfo.aliases,
+					driveFile,
+				});
+			}
+
+			cleanup();
+	
+			this.#logger.succ('Imported');
+			done();
+		});
+		unzipStream.pipe(extractor);
+		this.#logger.succ(`Unzipping to ${outputPath}`);
+	}
+}
diff --git a/packages/backend/src/queue/processors/ImportFollowingProcessorService.ts b/packages/backend/src/queue/processors/ImportFollowingProcessorService.ts
new file mode 100644
index 0000000000..087e0baf96
--- /dev/null
+++ b/packages/backend/src/queue/processors/ImportFollowingProcessorService.ts
@@ -0,0 +1,99 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { IsNull, MoreThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import * as Acct from '@/misc/acct.js';
+import { ResolveUserService } from '@/core/remote/ResolveUserService.js';
+import { DownloadService } from '@/core/DownloadService.js';
+import { UserFollowingService } from '@/core/UserFollowingService.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { DbUserImportJobData } from '../types.js';
+
+@Injectable()
+export class ImportFollowingProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private utilityService: UtilityService,
+		private userFollowingService: UserFollowingService,
+		private resolveUserService: ResolveUserService,
+		private downloadService: DownloadService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('import-following');
+	}
+
+	public async process(job: Bull.Job<DbUserImportJobData>, done: () => void): Promise<void> {
+		this.#logger.info(`Importing following of ${job.data.user.id} ...`);
+
+		const user = await this.usersRepository.findOneBy({ id: job.data.user.id });
+		if (user == null) {
+			done();
+			return;
+		}
+
+		const file = await this.driveFilesRepository.findOneBy({
+			id: job.data.fileId,
+		});
+		if (file == null) {
+			done();
+			return;
+		}
+
+		const csv = await this.downloadService.downloadTextFile(file.url);
+
+		let linenum = 0;
+
+		for (const line of csv.trim().split('\n')) {
+			linenum++;
+
+			try {
+				const acct = line.split(',')[0].trim();
+				const { username, host } = Acct.parse(acct);
+
+				let target = this.utilityService.isSelfHost(host!) ? await this.usersRepository.findOneBy({
+					host: IsNull(),
+					usernameLower: username.toLowerCase(),
+				}) : await this.usersRepository.findOneBy({
+					host: this.utilityService.toPuny(host!),
+					usernameLower: username.toLowerCase(),
+				});
+
+				if (host == null && target == null) continue;
+
+				if (target == null) {
+					target = await this.resolveUserService.resolveUser(username, host);
+				}
+
+				if (target == null) {
+					throw `cannot resolve user: @${username}@${host}`;
+				}
+
+				// skip myself
+				if (target.id === job.data.user.id) continue;
+
+				this.#logger.info(`Follow[${linenum}] ${target.id} ...`);
+
+				this.userFollowingService.follow(user, target);
+			} catch (e) {
+				this.#logger.warn(`Error in line:${linenum} ${e}`);
+			}
+		}
+
+		this.#logger.succ('Imported');
+		done();
+	}
+}
diff --git a/packages/backend/src/queue/processors/ImportMutingProcessorService.ts b/packages/backend/src/queue/processors/ImportMutingProcessorService.ts
new file mode 100644
index 0000000000..404091e8ca
--- /dev/null
+++ b/packages/backend/src/queue/processors/ImportMutingProcessorService.ts
@@ -0,0 +1,100 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { IsNull, MoreThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import * as Acct from '@/misc/acct.js';
+import { ResolveUserService } from '@/core/remote/ResolveUserService.js';
+import { DownloadService } from '@/core/DownloadService.js';
+import type { UserFollowingService } from '@/core/UserFollowingService.js';
+import { UserMutingService } from '@/core/UserMutingService.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { DbUserImportJobData } from '../types.js';
+
+@Injectable()
+export class ImportMutingProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private utilityService: UtilityService,
+		private userMutingService: UserMutingService,
+		private resolveUserService: ResolveUserService,
+		private downloadService: DownloadService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('import-muting');
+	}
+
+	public async process(job: Bull.Job<DbUserImportJobData>, done: () => void): Promise<void> {
+		this.#logger.info(`Importing muting of ${job.data.user.id} ...`);
+
+		const user = await this.usersRepository.findOneBy({ id: job.data.user.id });
+		if (user == null) {
+			done();
+			return;
+		}
+
+		const file = await this.driveFilesRepository.findOneBy({
+			id: job.data.fileId,
+		});
+		if (file == null) {
+			done();
+			return;
+		}
+
+		const csv = await this.downloadService.downloadTextFile(file.url);
+
+		let linenum = 0;
+
+		for (const line of csv.trim().split('\n')) {
+			linenum++;
+
+			try {
+				const acct = line.split(',')[0].trim();
+				const { username, host } = Acct.parse(acct);
+
+				let target = this.utilityService.isSelfHost(host!) ? await this.usersRepository.findOneBy({
+					host: IsNull(),
+					usernameLower: username.toLowerCase(),
+				}) : await this.usersRepository.findOneBy({
+					host: this.utilityService.toPuny(host!),
+					usernameLower: username.toLowerCase(),
+				});
+
+				if (host == null && target == null) continue;
+
+				if (target == null) {
+					target = await this.resolveUserService.resolveUser(username, host);
+				}
+
+				if (target == null) {
+					throw `cannot resolve user: @${username}@${host}`;
+				}
+
+				// skip myself
+				if (target.id === job.data.user.id) continue;
+
+				this.#logger.info(`Mute[${linenum}] ${target.id} ...`);
+
+				await this.userMutingService.mute(user, target);
+			} catch (e) {
+				this.#logger.warn(`Error in line:${linenum} ${e}`);
+			}
+		}
+
+		this.#logger.succ('Imported');
+		done();
+	}
+}
diff --git a/packages/backend/src/queue/processors/ImportUserListsProcessorService.ts b/packages/backend/src/queue/processors/ImportUserListsProcessorService.ts
new file mode 100644
index 0000000000..aed1a4cde5
--- /dev/null
+++ b/packages/backend/src/queue/processors/ImportUserListsProcessorService.ts
@@ -0,0 +1,112 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { IsNull, MoreThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { DriveFilesRepository, UserListJoiningsRepository, UserListsRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import * as Acct from '@/misc/acct.js';
+import { ResolveUserService } from '@/core/remote/ResolveUserService.js';
+import { DownloadService } from '@/core/DownloadService.js';
+import { UserListService } from '@/core/UserListService.js';
+import { IdService } from '@/core/IdService.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { DbUserImportJobData } from '../types.js';
+
+@Injectable()
+export class ImportUserListsProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		@Inject(DI.userListsRepository)
+		private userListsRepository: UserListsRepository,
+
+		@Inject(DI.userListJoiningsRepository)
+		private userListJoiningsRepository: UserListJoiningsRepository,
+
+		private utilityService: UtilityService,
+		private idService: IdService,
+		private userListService: UserListService,
+		private resolveUserService: ResolveUserService,
+		private downloadService: DownloadService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('import-user-lists');
+	}
+
+	public async process(job: Bull.Job<DbUserImportJobData>, done: () => void): Promise<void> {
+		this.#logger.info(`Importing user lists of ${job.data.user.id} ...`);
+
+		const user = await this.usersRepository.findOneBy({ id: job.data.user.id });
+		if (user == null) {
+			done();
+			return;
+		}
+
+		const file = await this.driveFilesRepository.findOneBy({
+			id: job.data.fileId,
+		});
+		if (file == null) {
+			done();
+			return;
+		}
+
+		const csv = await this.downloadService.downloadTextFile(file.url);
+
+		let linenum = 0;
+
+		for (const line of csv.trim().split('\n')) {
+			linenum++;
+
+			try {
+				const listName = line.split(',')[0].trim();
+				const { username, host } = Acct.parse(line.split(',')[1].trim());
+
+				let list = await this.userListsRepository.findOneBy({
+					userId: user.id,
+					name: listName,
+				});
+
+				if (list == null) {
+					list = await this.userListsRepository.insert({
+						id: this.idService.genId(),
+						createdAt: new Date(),
+						userId: user.id,
+						name: listName,
+					}).then(x => this.userListsRepository.findOneByOrFail(x.identifiers[0]));
+				}
+
+				let target = this.utilityService.isSelfHost(host!) ? await this.usersRepository.findOneBy({
+					host: IsNull(),
+					usernameLower: username.toLowerCase(),
+				}) : await this.usersRepository.findOneBy({
+					host: this.utilityService.toPuny(host!),
+					usernameLower: username.toLowerCase(),
+				});
+
+				if (target == null) {
+					target = await this.resolveUserService.resolveUser(username, host);
+				}
+
+				if (await this.userListJoiningsRepository.findOneBy({ userListId: list!.id, userId: target.id }) != null) continue;
+
+				this.userListService.push(target, list!);
+			} catch (e) {
+				this.#logger.warn(`Error in line:${linenum} ${e}`);
+			}
+		}
+
+		this.#logger.succ('Imported');
+		done();
+	}
+}
diff --git a/packages/backend/src/queue/processors/InboxProcessorService.ts b/packages/backend/src/queue/processors/InboxProcessorService.ts
new file mode 100644
index 0000000000..5733f5d0a9
--- /dev/null
+++ b/packages/backend/src/queue/processors/InboxProcessorService.ts
@@ -0,0 +1,195 @@
+import { URL } from 'node:url';
+import { Inject, Injectable } from '@nestjs/common';
+import { MoreThan } from 'typeorm';
+import httpSignature from '@peertube/http-signature';
+import { DI } from '@/di-symbols.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { MetaService } from '@/core/MetaService.js';
+import { ApRequestService } from '@/core/remote/activitypub/ApRequestService.js';
+import { FederatedInstanceService } from '@/core/FederatedInstanceService.js';
+import { FetchInstanceMetadataService } from '@/core/FetchInstanceMetadataService.js';
+import { Cache } from '@/misc/cache.js';
+import type { Instance } from '@/models/entities/Instance.js';
+import InstanceChart from '@/core/chart/charts/instance.js';
+import ApRequestChart from '@/core/chart/charts/ap-request.js';
+import FederationChart from '@/core/chart/charts/federation.js';
+import { getApId } from '@/core/remote/activitypub/type.js';
+import type { CacheableRemoteUser } from '@/models/entities/User.js';
+import type { UserPublickey } from '@/models/entities/UserPublickey.js';
+import { ApDbResolverService } from '@/core/remote/activitypub/ApDbResolverService.js';
+import { StatusError } from '@/misc/status-error.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { ApPersonService } from '@/core/remote/activitypub/models/ApPersonService.js';
+import { LdSignatureService } from '@/core/remote/activitypub/LdSignatureService.js';
+import { ApInboxService } from '@/core/remote/activitypub/ApInboxService.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { DeliverJobData, InboxJobData } from '../types.js';
+
+// ユーザーのinboxにアクティビティが届いた時の処理
+@Injectable()
+export class InboxProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private utilityService: UtilityService,
+		private metaService: MetaService,
+		private apInboxService: ApInboxService,
+		private federatedInstanceService: FederatedInstanceService,
+		private fetchInstanceMetadataService: FetchInstanceMetadataService,
+		private ldSignatureService: LdSignatureService,
+		private apRequestService: ApRequestService,
+		private apPersonService: ApPersonService,
+		private apDbResolverService: ApDbResolverService,
+		private instanceChart: InstanceChart,
+		private apRequestChart: ApRequestChart,
+		private federationChart: FederationChart,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('inbox');
+	}
+
+	public async process(job: Bull.Job<InboxJobData>): Promise<string> {
+		const signature = job.data.signature;	// HTTP-signature
+		const activity = job.data.activity;
+
+		//#region Log
+		const info = Object.assign({}, activity) as any;
+		delete info['@context'];
+		this.#logger.debug(JSON.stringify(info, null, 2));
+		//#endregion
+
+		const host = this.utilityService.toPuny(new URL(signature.keyId).hostname);
+
+		// ブロックしてたら中断
+		const meta = await this.metaService.fetch();
+		if (meta.blockedHosts.includes(host)) {
+			return `Blocked request: ${host}`;
+		}
+
+		const keyIdLower = signature.keyId.toLowerCase();
+		if (keyIdLower.startsWith('acct:')) {
+			return `Old keyId is no longer supported. ${keyIdLower}`;
+		}
+
+		// HTTP-Signature keyIdを元にDBから取得
+		let authUser: {
+		user: CacheableRemoteUser;
+		key: UserPublickey | null;
+	} | null = await this.apDbResolverService.getAuthUserFromKeyId(signature.keyId);
+
+		// keyIdでわからなければ、activity.actorを元にDBから取得 || activity.actorを元にリモートから取得
+		if (authUser == null) {
+			try {
+				authUser = await this.apDbResolverService.getAuthUserFromApId(getApId(activity.actor));
+			} catch (err) {
+			// 対象が4xxならスキップ
+				if (err instanceof StatusError) {
+					if (err.isClientError) {
+						return `skip: Ignored deleted actors on both ends ${activity.actor} - ${err.statusCode}`;
+					}
+					throw `Error in actor ${activity.actor} - ${err.statusCode ?? err}`;
+				}
+			}
+		}
+
+		// それでもわからなければ終了
+		if (authUser == null) {
+			return 'skip: failed to resolve user';
+		}
+
+		// publicKey がなくても終了
+		if (authUser.key == null) {
+			return 'skip: failed to resolve user publicKey';
+		}
+
+		// HTTP-Signatureの検証
+		const httpSignatureValidated = httpSignature.verifySignature(signature, authUser.key.keyPem);
+
+		// また、signatureのsignerは、activity.actorと一致する必要がある
+		if (!httpSignatureValidated || authUser.user.uri !== activity.actor) {
+		// 一致しなくても、でもLD-Signatureがありそうならそっちも見る
+			if (activity.signature) {
+				if (activity.signature.type !== 'RsaSignature2017') {
+					return `skip: unsupported LD-signature type ${activity.signature.type}`;
+				}
+
+				// activity.signature.creator: https://example.oom/users/user#main-key
+				// みたいになっててUserを引っ張れば公開キーも入ることを期待する
+				if (activity.signature.creator) {
+					const candicate = activity.signature.creator.replace(/#.*/, '');
+					await this.apPersonService.resolvePerson(candicate).catch(() => null);
+				}
+
+				// keyIdからLD-Signatureのユーザーを取得
+				authUser = await this.apDbResolverService.getAuthUserFromKeyId(activity.signature.creator);
+				if (authUser == null) {
+					return 'skip: LD-Signatureのユーザーが取得できませんでした';
+				}
+
+				if (authUser.key == null) {
+					return 'skip: LD-SignatureのユーザーはpublicKeyを持っていませんでした';
+				}
+
+				// LD-Signature検証
+				const ldSignature = this.ldSignatureService.use();
+				const verified = await ldSignature.verifyRsaSignature2017(activity, authUser.key.keyPem).catch(() => false);
+				if (!verified) {
+					return 'skip: LD-Signatureの検証に失敗しました';
+				}
+
+				// もう一度actorチェック
+				if (authUser.user.uri !== activity.actor) {
+					return `skip: LD-Signature user(${authUser.user.uri}) !== activity.actor(${activity.actor})`;
+				}
+
+				// ブロックしてたら中断
+				const ldHost = this.utilityService.extractDbHost(authUser.user.uri);
+				if (meta.blockedHosts.includes(ldHost)) {
+					return `Blocked request: ${ldHost}`;
+				}
+			} else {
+				return `skip: http-signature verification failed and no LD-Signature. keyId=${signature.keyId}`;
+			}
+		}
+
+		// activity.idがあればホストが署名者のホストであることを確認する
+		if (typeof activity.id === 'string') {
+			const signerHost = this.utilityService.extractDbHost(authUser.user.uri!);
+			const activityIdHost = this.utilityService.extractDbHost(activity.id);
+			if (signerHost !== activityIdHost) {
+				return `skip: signerHost(${signerHost}) !== activity.id host(${activityIdHost}`;
+			}
+		}
+
+		// Update stats
+		this.federatedInstanceService.registerOrFetchInstanceDoc(authUser.user.host).then(i => {
+			this.instancesRepository.update(i.id, {
+				latestRequestReceivedAt: new Date(),
+				lastCommunicatedAt: new Date(),
+				isNotResponding: false,
+			});
+
+			this.fetchInstanceMetadataService.fetchInstanceMetadata(i);
+
+			this.instanceChart.requestReceived(i.host);
+			this.apRequestChart.inbox();
+			this.federationChart.inbox(i.host);
+		});
+
+		// アクティビティを処理
+		await this.apInboxService.performActivity(authUser.user, activity);
+		return 'ok';
+	}
+}
diff --git a/packages/backend/src/queue/processors/ResyncChartsProcessorService.ts b/packages/backend/src/queue/processors/ResyncChartsProcessorService.ts
new file mode 100644
index 0000000000..f976232a24
--- /dev/null
+++ b/packages/backend/src/queue/processors/ResyncChartsProcessorService.ts
@@ -0,0 +1,61 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { In, MoreThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import FederationChart from '@/core/chart/charts/federation.js';
+import NotesChart from '@/core/chart/charts/notes.js';
+import UsersChart from '@/core/chart/charts/users.js';
+import ActiveUsersChart from '@/core/chart/charts/active-users.js';
+import InstanceChart from '@/core/chart/charts/instance.js';
+import PerUserNotesChart from '@/core/chart/charts/per-user-notes.js';
+import DriveChart from '@/core/chart/charts/drive.js';
+import PerUserReactionsChart from '@/core/chart/charts/per-user-reactions.js';
+import HashtagChart from '@/core/chart/charts/hashtag.js';
+import PerUserFollowingChart from '@/core/chart/charts/per-user-following.js';
+import PerUserDriveChart from '@/core/chart/charts/per-user-drive.js';
+import ApRequestChart from '@/core/chart/charts/ap-request.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+
+@Injectable()
+export class ResyncChartsProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private federationChart: FederationChart,
+		private notesChart: NotesChart,
+		private usersChart: UsersChart,
+		private activeUsersChart: ActiveUsersChart,
+		private instanceChart: InstanceChart,
+		private perUserNotesChart: PerUserNotesChart,
+		private driveChart: DriveChart,
+		private perUserReactionsChart: PerUserReactionsChart,
+		private hashtagChart: HashtagChart,
+		private perUserFollowingChart: PerUserFollowingChart,
+		private perUserDriveChart: PerUserDriveChart,
+		private apRequestChart: ApRequestChart,
+
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('resync-charts');
+	}
+
+	public async process(job: Bull.Job<Record<string, unknown>>, done: () => void): Promise<void> {
+		this.#logger.info('Resync charts...');
+
+		// TODO: ユーザーごとのチャートも更新する
+		// TODO: インスタンスごとのチャートも更新する
+		await Promise.all([
+			this.driveChart.resync(),
+			this.notesChart.resync(),
+			this.usersChart.resync(),
+		]);
+
+		this.#logger.succ('All charts successfully resynced.');
+		done();
+	}
+}
diff --git a/packages/backend/src/queue/processors/TickChartsProcessorService.ts b/packages/backend/src/queue/processors/TickChartsProcessorService.ts
new file mode 100644
index 0000000000..d1ca3c4576
--- /dev/null
+++ b/packages/backend/src/queue/processors/TickChartsProcessorService.ts
@@ -0,0 +1,68 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { In, MoreThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import FederationChart from '@/core/chart/charts/federation.js';
+import NotesChart from '@/core/chart/charts/notes.js';
+import UsersChart from '@/core/chart/charts/users.js';
+import ActiveUsersChart from '@/core/chart/charts/active-users.js';
+import InstanceChart from '@/core/chart/charts/instance.js';
+import PerUserNotesChart from '@/core/chart/charts/per-user-notes.js';
+import DriveChart from '@/core/chart/charts/drive.js';
+import PerUserReactionsChart from '@/core/chart/charts/per-user-reactions.js';
+import HashtagChart from '@/core/chart/charts/hashtag.js';
+import PerUserFollowingChart from '@/core/chart/charts/per-user-following.js';
+import PerUserDriveChart from '@/core/chart/charts/per-user-drive.js';
+import ApRequestChart from '@/core/chart/charts/ap-request.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+
+@Injectable()
+export class TickChartsProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private federationChart: FederationChart,
+		private notesChart: NotesChart,
+		private usersChart: UsersChart,
+		private activeUsersChart: ActiveUsersChart,
+		private instanceChart: InstanceChart,
+		private perUserNotesChart: PerUserNotesChart,
+		private driveChart: DriveChart,
+		private perUserReactionsChart: PerUserReactionsChart,
+		private hashtagChart: HashtagChart,
+		private perUserFollowingChart: PerUserFollowingChart,
+		private perUserDriveChart: PerUserDriveChart,
+		private apRequestChart: ApRequestChart,
+
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('tick-charts');
+	}
+
+	public async process(job: Bull.Job<Record<string, unknown>>, done: () => void): Promise<void> {
+		this.#logger.info('Tick charts...');
+
+		await Promise.all([
+			this.federationChart.tick(false),
+			this.notesChart.tick(false),
+			this.usersChart.tick(false),
+			this.activeUsersChart.tick(false),
+			this.instanceChart.tick(false),
+			this.perUserNotesChart.tick(false),
+			this.driveChart.tick(false),
+			this.perUserReactionsChart.tick(false),
+			this.hashtagChart.tick(false),
+			this.perUserFollowingChart.tick(false),
+			this.perUserDriveChart.tick(false),
+			this.apRequestChart.tick(false),
+		]);
+
+		this.#logger.succ('All charts successfully ticked.');
+		done();
+	}
+}
diff --git a/packages/backend/src/queue/processors/WebhookDeliverProcessorService.ts b/packages/backend/src/queue/processors/WebhookDeliverProcessorService.ts
new file mode 100644
index 0000000000..5723fe2eeb
--- /dev/null
+++ b/packages/backend/src/queue/processors/WebhookDeliverProcessorService.ts
@@ -0,0 +1,79 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { IsNull, MoreThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { WebhooksRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type Logger from '@/logger.js';
+import { HttpRequestService } from '@/core/HttpRequestService.js';
+import { StatusError } from '@/misc/status-error.js';
+import { QueueLoggerService } from '../QueueLoggerService.js';
+import type Bull from 'bull';
+import type { WebhookDeliverJobData } from '../types.js';
+
+@Injectable()
+export class WebhookDeliverProcessorService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.webhooksRepository)
+		private webhooksRepository: WebhooksRepository,
+
+		private httpRequestService: HttpRequestService,
+		private queueLoggerService: QueueLoggerService,
+	) {
+		this.#logger = this.queueLoggerService.logger.createSubLogger('webhook');
+	}
+
+	public async process(job: Bull.Job<WebhookDeliverJobData>): Promise<string> {
+		try {
+			this.#logger.debug(`delivering ${job.data.webhookId}`);
+	
+			const res = await this.httpRequestService.getResponse({
+				url: job.data.to,
+				method: 'POST',
+				headers: {
+					'User-Agent': 'Misskey-Hooks',
+					'X-Misskey-Host': this.config.host,
+					'X-Misskey-Hook-Id': job.data.webhookId,
+					'X-Misskey-Hook-Secret': job.data.secret,
+				},
+				body: JSON.stringify({
+					hookId: job.data.webhookId,
+					userId: job.data.userId,
+					eventId: job.data.eventId,
+					createdAt: job.data.createdAt,
+					type: job.data.type,
+					body: job.data.content,
+				}),
+			});
+	
+			this.webhooksRepository.update({ id: job.data.webhookId }, {
+				latestSentAt: new Date(),
+				latestStatus: res.status,
+			});
+	
+			return 'Success';
+		} catch (res) {
+			this.webhooksRepository.update({ id: job.data.webhookId }, {
+				latestSentAt: new Date(),
+				latestStatus: res instanceof StatusError ? res.statusCode : 1,
+			});
+	
+			if (res instanceof StatusError) {
+				// 4xx
+				if (res.isClientError) {
+					return `${res.statusCode} ${res.statusMessage}`;
+				}
+	
+				// 5xx etc.
+				throw `${res.statusCode} ${res.statusMessage}`;
+			} else {
+				// DNS error, socket error, timeout ...
+				throw res;
+			}
+		}
+	}
+}
diff --git a/packages/backend/src/queue/processors/db/delete-account.ts b/packages/backend/src/queue/processors/db/delete-account.ts
deleted file mode 100644
index c1657b4be6..0000000000
--- a/packages/backend/src/queue/processors/db/delete-account.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import Bull from 'bull';
-import { queueLogger } from '../../logger.js';
-import { DriveFiles, Notes, UserProfiles, Users } from '@/models/index.js';
-import { DbUserDeleteJobData } from '@/queue/types.js';
-import { Note } from '@/models/entities/note.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { MoreThan } from 'typeorm';
-import { deleteFileSync } from '@/services/drive/delete-file.js';
-import { sendEmail } from '@/services/send-email.js';
-
-const logger = queueLogger.createSubLogger('delete-account');
-
-export async function deleteAccount(job: Bull.Job<DbUserDeleteJobData>): Promise<string | void> {
-	logger.info(`Deleting account of ${job.data.user.id} ...`);
-
-	const user = await Users.findOneBy({ id: job.data.user.id });
-	if (user == null) {
-		return;
-	}
-
-	{ // Delete notes
-		let cursor: Note['id'] | null = null;
-
-		while (true) {
-			const notes = await Notes.find({
-				where: {
-					userId: user.id,
-					...(cursor ? { id: MoreThan(cursor) } : {}),
-				},
-				take: 100,
-				order: {
-					id: 1,
-				},
-			}) as Note[];
-
-			if (notes.length === 0) {
-				break;
-			}
-
-			cursor = notes[notes.length - 1].id;
-
-			await Notes.delete(notes.map(note => note.id));
-		}
-
-		logger.succ(`All of notes deleted`);
-	}
-
-	{ // Delete files
-		let cursor: DriveFile['id'] | null = null;
-
-		while (true) {
-			const files = await DriveFiles.find({
-				where: {
-					userId: user.id,
-					...(cursor ? { id: MoreThan(cursor) } : {}),
-				},
-				take: 10,
-				order: {
-					id: 1,
-				},
-			}) as DriveFile[];
-
-			if (files.length === 0) {
-				break;
-			}
-
-			cursor = files[files.length - 1].id;
-
-			for (const file of files) {
-				await deleteFileSync(file);
-			}
-		}
-
-		logger.succ(`All of files deleted`);
-	}
-
-	{ // Send email notification
-		const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-		if (profile.email && profile.emailVerified) {
-			sendEmail(profile.email, 'Account deleted',
-				`Your account has been deleted.`,
-				`Your account has been deleted.`);
-		}
-	}
-
-	// soft指定されている場合は物理削除しない
-	if (job.data.soft) {
-		// nop
-	} else {
-		await Users.delete(job.data.user.id);
-	}
-
-	return 'Account deleted';
-}
diff --git a/packages/backend/src/queue/processors/db/delete-drive-files.ts b/packages/backend/src/queue/processors/db/delete-drive-files.ts
deleted file mode 100644
index b3832d9f04..0000000000
--- a/packages/backend/src/queue/processors/db/delete-drive-files.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import Bull from 'bull';
-
-import { queueLogger } from '../../logger.js';
-import { deleteFileSync } from '@/services/drive/delete-file.js';
-import { Users, DriveFiles } from '@/models/index.js';
-import { MoreThan } from 'typeorm';
-import { DbUserJobData } from '@/queue/types.js';
-
-const logger = queueLogger.createSubLogger('delete-drive-files');
-
-export async function deleteDriveFiles(job: Bull.Job<DbUserJobData>, done: any): Promise<void> {
-	logger.info(`Deleting drive files of ${job.data.user.id} ...`);
-
-	const user = await Users.findOneBy({ id: job.data.user.id });
-	if (user == null) {
-		done();
-		return;
-	}
-
-	let deletedCount = 0;
-	let cursor: any = null;
-
-	while (true) {
-		const files = await DriveFiles.find({
-			where: {
-				userId: user.id,
-				...(cursor ? { id: MoreThan(cursor) } : {}),
-			},
-			take: 100,
-			order: {
-				id: 1,
-			},
-		});
-
-		if (files.length === 0) {
-			job.progress(100);
-			break;
-		}
-
-		cursor = files[files.length - 1].id;
-
-		for (const file of files) {
-			await deleteFileSync(file);
-			deletedCount++;
-		}
-
-		const total = await DriveFiles.countBy({
-			userId: user.id,
-		});
-
-		job.progress(deletedCount / total);
-	}
-
-	logger.succ(`All drive files (${deletedCount}) of ${user.id} has been deleted.`);
-	done();
-}
diff --git a/packages/backend/src/queue/processors/db/export-blocking.ts b/packages/backend/src/queue/processors/db/export-blocking.ts
deleted file mode 100644
index f5e0424a79..0000000000
--- a/packages/backend/src/queue/processors/db/export-blocking.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import Bull from 'bull';
-import * as fs from 'node:fs';
-
-import { queueLogger } from '../../logger.js';
-import { addFile } from '@/services/drive/add-file.js';
-import { format as dateFormat } from 'date-fns';
-import { getFullApAccount } from '@/misc/convert-host.js';
-import { createTemp } from '@/misc/create-temp.js';
-import { Users, Blockings } from '@/models/index.js';
-import { MoreThan } from 'typeorm';
-import { DbUserJobData } from '@/queue/types.js';
-
-const logger = queueLogger.createSubLogger('export-blocking');
-
-export async function exportBlocking(job: Bull.Job<DbUserJobData>, done: any): Promise<void> {
-	logger.info(`Exporting blocking of ${job.data.user.id} ...`);
-
-	const user = await Users.findOneBy({ id: job.data.user.id });
-	if (user == null) {
-		done();
-		return;
-	}
-
-	// Create temp file
-	const [path, cleanup] = await createTemp();
-
-	logger.info(`Temp file is ${path}`);
-
-	try {
-		const stream = fs.createWriteStream(path, { flags: 'a' });
-
-		let exportedCount = 0;
-		let cursor: any = null;
-
-		while (true) {
-			const blockings = await Blockings.find({
-				where: {
-					blockerId: user.id,
-					...(cursor ? { id: MoreThan(cursor) } : {}),
-				},
-				take: 100,
-				order: {
-					id: 1,
-				},
-			});
-
-			if (blockings.length === 0) {
-				job.progress(100);
-				break;
-			}
-
-			cursor = blockings[blockings.length - 1].id;
-
-			for (const block of blockings) {
-				const u = await Users.findOneBy({ id: block.blockeeId });
-				if (u == null) {
-					exportedCount++; continue;
-				}
-
-				const content = getFullApAccount(u.username, u.host);
-				await new Promise<void>((res, rej) => {
-					stream.write(content + '\n', err => {
-						if (err) {
-							logger.error(err);
-							rej(err);
-						} else {
-							res();
-						}
-					});
-				});
-				exportedCount++;
-			}
-
-			const total = await Blockings.countBy({
-				blockerId: user.id,
-			});
-
-			job.progress(exportedCount / total);
-		}
-
-		stream.end();
-		logger.succ(`Exported to: ${path}`);
-
-		const fileName = 'blocking-' + dateFormat(new Date(), 'yyyy-MM-dd-HH-mm-ss') + '.csv';
-		const driveFile = await addFile({ user, path, name: fileName, force: true });
-
-		logger.succ(`Exported to: ${driveFile.id}`);
-	} finally {
-		cleanup();
-	}
-
-	done();
-}
diff --git a/packages/backend/src/queue/processors/db/export-custom-emojis.ts b/packages/backend/src/queue/processors/db/export-custom-emojis.ts
deleted file mode 100644
index 3da887cda2..0000000000
--- a/packages/backend/src/queue/processors/db/export-custom-emojis.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import Bull from 'bull';
-import * as fs from 'node:fs';
-
-import { ulid } from 'ulid';
-import mime from 'mime-types';
-import archiver from 'archiver';
-import { queueLogger } from '../../logger.js';
-import { addFile } from '@/services/drive/add-file.js';
-import { format as dateFormat } from 'date-fns';
-import { Users, Emojis } from '@/models/index.js';
-import { } from '@/queue/types.js';
-import { createTemp, createTempDir } from '@/misc/create-temp.js';
-import { downloadUrl } from '@/misc/download-url.js';
-import config from '@/config/index.js';
-import { IsNull } from 'typeorm';
-
-const logger = queueLogger.createSubLogger('export-custom-emojis');
-
-export async function exportCustomEmojis(job: Bull.Job, done: () => void): Promise<void> {
-	logger.info(`Exporting custom emojis ...`);
-
-	const user = await Users.findOneBy({ id: job.data.user.id });
-	if (user == null) {
-		done();
-		return;
-	}
-
-	const [path, cleanup] = await createTempDir();
-
-	logger.info(`Temp dir is ${path}`);
-
-	const metaPath = path + '/meta.json';
-
-	fs.writeFileSync(metaPath, '', 'utf-8');
-
-	const metaStream = fs.createWriteStream(metaPath, { flags: 'a' });
-
-	const writeMeta = (text: string): Promise<void> => {
-		return new Promise<void>((res, rej) => {
-			metaStream.write(text, err => {
-				if (err) {
-					logger.error(err);
-					rej(err);
-				} else {
-					res();
-				}
-			});
-		});
-	};
-
-	await writeMeta(`{"metaVersion":2,"host":"${config.host}","exportedAt":"${new Date().toString()}","emojis":[`);
-
-	const customEmojis = await Emojis.find({
-		where: {
-			host: IsNull(),
-		},
-		order: {
-			id: 'ASC',
-		},
-	});
-
-	for (const emoji of customEmojis) {
-		const ext = mime.extension(emoji.type);
-		const fileName = emoji.name + (ext ? '.' + ext : '');
-		const emojiPath = path + '/' + fileName;
-		fs.writeFileSync(emojiPath, '', 'binary');
-		let downloaded = false;
-
-		try {
-			await downloadUrl(emoji.originalUrl, emojiPath);
-			downloaded = true;
-		} catch (e) { // TODO: 何度か再試行
-			logger.error(e instanceof Error ? e : new Error(e as string));
-		}
-
-		if (!downloaded) {
-			fs.unlinkSync(emojiPath);
-		}
-
-		const content = JSON.stringify({
-			fileName: fileName,
-			downloaded: downloaded,
-			emoji: emoji,
-		});
-		const isFirst = customEmojis.indexOf(emoji) === 0;
-
-		await writeMeta(isFirst ? content : ',\n' + content);
-	}
-
-	await writeMeta(']}');
-
-	metaStream.end();
-
-	// Create archive
-	const [archivePath, archiveCleanup] = await createTemp();
-	const archiveStream = fs.createWriteStream(archivePath);
-	const archive = archiver('zip', {
-		zlib: { level: 0 },
-	});
-	archiveStream.on('close', async () => {
-		logger.succ(`Exported to: ${archivePath}`);
-
-		const fileName = 'custom-emojis-' + dateFormat(new Date(), 'yyyy-MM-dd-HH-mm-ss') + '.zip';
-		const driveFile = await addFile({ user, path: archivePath, name: fileName, force: true });
-
-		logger.succ(`Exported to: ${driveFile.id}`);
-		cleanup();
-		archiveCleanup();
-		done();
-	});
-	archive.pipe(archiveStream);
-	archive.directory(path, false);
-	archive.finalize();
-}
diff --git a/packages/backend/src/queue/processors/db/export-following.ts b/packages/backend/src/queue/processors/db/export-following.ts
deleted file mode 100644
index 4ac165567b..0000000000
--- a/packages/backend/src/queue/processors/db/export-following.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import Bull from 'bull';
-import * as fs from 'node:fs';
-
-import { queueLogger } from '../../logger.js';
-import { addFile } from '@/services/drive/add-file.js';
-import { format as dateFormat } from 'date-fns';
-import { getFullApAccount } from '@/misc/convert-host.js';
-import { createTemp } from '@/misc/create-temp.js';
-import { Users, Followings, Mutings } from '@/models/index.js';
-import { In, MoreThan, Not } from 'typeorm';
-import { DbUserJobData } from '@/queue/types.js';
-import { Following } from '@/models/entities/following.js';
-
-const logger = queueLogger.createSubLogger('export-following');
-
-export async function exportFollowing(job: Bull.Job<DbUserJobData>, done: () => void): Promise<void> {
-	logger.info(`Exporting following of ${job.data.user.id} ...`);
-
-	const user = await Users.findOneBy({ id: job.data.user.id });
-	if (user == null) {
-		done();
-		return;
-	}
-
-	// Create temp file
-	const [path, cleanup] = await createTemp();
-
-	logger.info(`Temp file is ${path}`);
-
-	try {
-		const stream = fs.createWriteStream(path, { flags: 'a' });
-
-		let cursor: Following['id'] | null = null;
-
-		const mutings = job.data.excludeMuting ? await Mutings.findBy({
-			muterId: user.id,
-		}) : [];
-
-		while (true) {
-			const followings = await Followings.find({
-				where: {
-					followerId: user.id,
-					...(mutings.length > 0 ? { followeeId: Not(In(mutings.map(x => x.muteeId))) } : {}),
-					...(cursor ? { id: MoreThan(cursor) } : {}),
-				},
-				take: 100,
-				order: {
-					id: 1,
-				},
-			}) as Following[];
-
-			if (followings.length === 0) {
-				break;
-			}
-
-			cursor = followings[followings.length - 1].id;
-
-			for (const following of followings) {
-				const u = await Users.findOneBy({ id: following.followeeId });
-				if (u == null) {
-					continue;
-				}
-
-				if (job.data.excludeInactive && u.updatedAt && (Date.now() - u.updatedAt.getTime() > 1000 * 60 * 60 * 24 * 90)) {
-					continue;
-				}
-
-				const content = getFullApAccount(u.username, u.host);
-				await new Promise<void>((res, rej) => {
-					stream.write(content + '\n', err => {
-						if (err) {
-							logger.error(err);
-							rej(err);
-						} else {
-							res();
-						}
-					});
-				});
-			}
-		}
-
-		stream.end();
-		logger.succ(`Exported to: ${path}`);
-
-		const fileName = 'following-' + dateFormat(new Date(), 'yyyy-MM-dd-HH-mm-ss') + '.csv';
-		const driveFile = await addFile({ user, path, name: fileName, force: true });
-
-		logger.succ(`Exported to: ${driveFile.id}`);
-	} finally {
-		cleanup();
-	}
-
-	done();
-}
diff --git a/packages/backend/src/queue/processors/db/export-mute.ts b/packages/backend/src/queue/processors/db/export-mute.ts
deleted file mode 100644
index 6a36cfa072..0000000000
--- a/packages/backend/src/queue/processors/db/export-mute.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import Bull from 'bull';
-import * as fs from 'node:fs';
-
-import { queueLogger } from '../../logger.js';
-import { addFile } from '@/services/drive/add-file.js';
-import { format as dateFormat } from 'date-fns';
-import { getFullApAccount } from '@/misc/convert-host.js';
-import { createTemp } from '@/misc/create-temp.js';
-import { Users, Mutings } from '@/models/index.js';
-import { IsNull, MoreThan } from 'typeorm';
-import { DbUserJobData } from '@/queue/types.js';
-
-const logger = queueLogger.createSubLogger('export-mute');
-
-export async function exportMute(job: Bull.Job<DbUserJobData>, done: any): Promise<void> {
-	logger.info(`Exporting mute of ${job.data.user.id} ...`);
-
-	const user = await Users.findOneBy({ id: job.data.user.id });
-	if (user == null) {
-		done();
-		return;
-	}
-
-	// Create temp file
-	const [path, cleanup] = await createTemp();
-
-	logger.info(`Temp file is ${path}`);
-
-	try {
-		const stream = fs.createWriteStream(path, { flags: 'a' });
-
-		let exportedCount = 0;
-		let cursor: any = null;
-
-		while (true) {
-			const mutes = await Mutings.find({
-				where: {
-					muterId: user.id,
-					expiresAt: IsNull(),
-					...(cursor ? { id: MoreThan(cursor) } : {}),
-				},
-				take: 100,
-				order: {
-					id: 1,
-				},
-			});
-
-			if (mutes.length === 0) {
-				job.progress(100);
-				break;
-			}
-
-			cursor = mutes[mutes.length - 1].id;
-
-			for (const mute of mutes) {
-				const u = await Users.findOneBy({ id: mute.muteeId });
-				if (u == null) {
-					exportedCount++; continue;
-				}
-
-				const content = getFullApAccount(u.username, u.host);
-				await new Promise<void>((res, rej) => {
-					stream.write(content + '\n', err => {
-						if (err) {
-							logger.error(err);
-							rej(err);
-						} else {
-							res();
-						}
-					});
-				});
-				exportedCount++;
-			}
-
-			const total = await Mutings.countBy({
-				muterId: user.id,
-			});
-
-			job.progress(exportedCount / total);
-		}
-
-		stream.end();
-		logger.succ(`Exported to: ${path}`);
-
-		const fileName = 'mute-' + dateFormat(new Date(), 'yyyy-MM-dd-HH-mm-ss') + '.csv';
-		const driveFile = await addFile({ user, path, name: fileName, force: true });
-
-		logger.succ(`Exported to: ${driveFile.id}`);
-	} finally {
-		cleanup();
-	}
-
-	done();
-}
diff --git a/packages/backend/src/queue/processors/db/export-notes.ts b/packages/backend/src/queue/processors/db/export-notes.ts
deleted file mode 100644
index 051fcdf385..0000000000
--- a/packages/backend/src/queue/processors/db/export-notes.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import Bull from 'bull';
-import * as fs from 'node:fs';
-
-import { queueLogger } from '../../logger.js';
-import { addFile } from '@/services/drive/add-file.js';
-import { format as dateFormat } from 'date-fns';
-import { Users, Notes, Polls } from '@/models/index.js';
-import { MoreThan } from 'typeorm';
-import { Note } from '@/models/entities/note.js';
-import { Poll } from '@/models/entities/poll.js';
-import { DbUserJobData } from '@/queue/types.js';
-import { createTemp } from '@/misc/create-temp.js';
-
-const logger = queueLogger.createSubLogger('export-notes');
-
-export async function exportNotes(job: Bull.Job<DbUserJobData>, done: any): Promise<void> {
-	logger.info(`Exporting notes of ${job.data.user.id} ...`);
-
-	const user = await Users.findOneBy({ id: job.data.user.id });
-	if (user == null) {
-		done();
-		return;
-	}
-
-	// Create temp file
-	const [path, cleanup] = await createTemp();
-
-	logger.info(`Temp file is ${path}`);
-
-	try {
-		const stream = fs.createWriteStream(path, { flags: 'a' });
-
-		const write = (text: string): Promise<void> => {
-			return new Promise<void>((res, rej) => {
-				stream.write(text, err => {
-					if (err) {
-						logger.error(err);
-						rej(err);
-					} else {
-						res();
-					}
-				});
-			});
-		};
-
-		await write('[');
-
-		let exportedNotesCount = 0;
-		let cursor: Note['id'] | null = null;
-
-		while (true) {
-			const notes = await Notes.find({
-				where: {
-					userId: user.id,
-					...(cursor ? { id: MoreThan(cursor) } : {}),
-				},
-				take: 100,
-				order: {
-					id: 1,
-				},
-			}) as Note[];
-
-			if (notes.length === 0) {
-				job.progress(100);
-				break;
-			}
-
-			cursor = notes[notes.length - 1].id;
-
-			for (const note of notes) {
-				let poll: Poll | undefined;
-				if (note.hasPoll) {
-					poll = await Polls.findOneByOrFail({ noteId: note.id });
-				}
-				const content = JSON.stringify(serialize(note, poll));
-				const isFirst = exportedNotesCount === 0;
-				await write(isFirst ? content : ',\n' + content);
-				exportedNotesCount++;
-			}
-
-			const total = await Notes.countBy({
-				userId: user.id,
-			});
-
-			job.progress(exportedNotesCount / total);
-		}
-
-		await write(']');
-
-		stream.end();
-		logger.succ(`Exported to: ${path}`);
-
-		const fileName = 'notes-' + dateFormat(new Date(), 'yyyy-MM-dd-HH-mm-ss') + '.json';
-		const driveFile = await addFile({ user, path, name: fileName, force: true });
-
-		logger.succ(`Exported to: ${driveFile.id}`);
-	} finally {
-		cleanup();
-	}
-
-	done();
-}
-
-function serialize(note: Note, poll: Poll | null = null): Record<string, unknown> {
-	return {
-		id: note.id,
-		text: note.text,
-		createdAt: note.createdAt,
-		fileIds: note.fileIds,
-		replyId: note.replyId,
-		renoteId: note.renoteId,
-		poll: poll,
-		cw: note.cw,
-		visibility: note.visibility,
-		visibleUserIds: note.visibleUserIds,
-		localOnly: note.localOnly,
-	};
-}
diff --git a/packages/backend/src/queue/processors/db/export-user-lists.ts b/packages/backend/src/queue/processors/db/export-user-lists.ts
deleted file mode 100644
index 71dd72df27..0000000000
--- a/packages/backend/src/queue/processors/db/export-user-lists.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import Bull from 'bull';
-import * as fs from 'node:fs';
-
-import { queueLogger } from '../../logger.js';
-import { addFile } from '@/services/drive/add-file.js';
-import { format as dateFormat } from 'date-fns';
-import { getFullApAccount } from '@/misc/convert-host.js';
-import { createTemp } from '@/misc/create-temp.js';
-import { Users, UserLists, UserListJoinings } from '@/models/index.js';
-import { In } from 'typeorm';
-import { DbUserJobData } from '@/queue/types.js';
-
-const logger = queueLogger.createSubLogger('export-user-lists');
-
-export async function exportUserLists(job: Bull.Job<DbUserJobData>, done: any): Promise<void> {
-	logger.info(`Exporting user lists of ${job.data.user.id} ...`);
-
-	const user = await Users.findOneBy({ id: job.data.user.id });
-	if (user == null) {
-		done();
-		return;
-	}
-
-	const lists = await UserLists.findBy({
-		userId: user.id,
-	});
-
-	// Create temp file
-	const [path, cleanup] = await createTemp();
-
-	logger.info(`Temp file is ${path}`);
-
-	try {
-		const stream = fs.createWriteStream(path, { flags: 'a' });
-
-		for (const list of lists) {
-			const joinings = await UserListJoinings.findBy({ userListId: list.id });
-			const users = await Users.findBy({
-				id: In(joinings.map(j => j.userId)),
-			});
-
-			for (const u of users) {
-				const acct = getFullApAccount(u.username, u.host);
-				const content = `${list.name},${acct}`;
-				await new Promise<void>((res, rej) => {
-					stream.write(content + '\n', err => {
-						if (err) {
-							logger.error(err);
-							rej(err);
-						} else {
-							res();
-						}
-					});
-				});
-			}
-		}
-
-		stream.end();
-		logger.succ(`Exported to: ${path}`);
-
-		const fileName = 'user-lists-' + dateFormat(new Date(), 'yyyy-MM-dd-HH-mm-ss') + '.csv';
-		const driveFile = await addFile({ user, path, name: fileName, force: true });
-
-		logger.succ(`Exported to: ${driveFile.id}`);
-	} finally {
-		cleanup();
-	}
-
-	done();
-}
diff --git a/packages/backend/src/queue/processors/db/import-blocking.ts b/packages/backend/src/queue/processors/db/import-blocking.ts
deleted file mode 100644
index 8bddf34bc2..0000000000
--- a/packages/backend/src/queue/processors/db/import-blocking.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import Bull from 'bull';
-
-import { queueLogger } from '../../logger.js';
-import * as Acct from '@/misc/acct.js';
-import { resolveUser } from '@/remote/resolve-user.js';
-import { downloadTextFile } from '@/misc/download-text-file.js';
-import { isSelfHost, toPuny } from '@/misc/convert-host.js';
-import { Users, DriveFiles, Blockings } from '@/models/index.js';
-import { DbUserImportJobData } from '@/queue/types.js';
-import block from '@/services/blocking/create.js';
-import { IsNull } from 'typeorm';
-
-const logger = queueLogger.createSubLogger('import-blocking');
-
-export async function importBlocking(job: Bull.Job<DbUserImportJobData>, done: any): Promise<void> {
-	logger.info(`Importing blocking of ${job.data.user.id} ...`);
-
-	const user = await Users.findOneBy({ id: job.data.user.id });
-	if (user == null) {
-		done();
-		return;
-	}
-
-	const file = await DriveFiles.findOneBy({
-		id: job.data.fileId,
-	});
-	if (file == null) {
-		done();
-		return;
-	}
-
-	const csv = await downloadTextFile(file.url);
-
-	let linenum = 0;
-
-	for (const line of csv.trim().split('\n')) {
-		linenum++;
-
-		try {
-			const acct = line.split(',')[0].trim();
-			const { username, host } = Acct.parse(acct);
-
-			let target = isSelfHost(host!) ? await Users.findOneBy({
-				host: IsNull(),
-				usernameLower: username.toLowerCase(),
-			}) : await Users.findOneBy({
-				host: toPuny(host!),
-				usernameLower: username.toLowerCase(),
-			});
-
-			if (host == null && target == null) continue;
-
-			if (target == null) {
-				target = await resolveUser(username, host);
-			}
-
-			if (target == null) {
-				throw `cannot resolve user: @${username}@${host}`;
-			}
-
-			// skip myself
-			if (target.id === job.data.user.id) continue;
-
-			logger.info(`Block[${linenum}] ${target.id} ...`);
-
-			await block(user, target);
-		} catch (e) {
-			logger.warn(`Error in line:${linenum} ${e}`);
-		}
-	}
-
-	logger.succ('Imported');
-	done();
-}
-
diff --git a/packages/backend/src/queue/processors/db/import-custom-emojis.ts b/packages/backend/src/queue/processors/db/import-custom-emojis.ts
deleted file mode 100644
index 64dfe85374..0000000000
--- a/packages/backend/src/queue/processors/db/import-custom-emojis.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import Bull from 'bull';
-import * as fs from 'node:fs';
-import unzipper from 'unzipper';
-
-import { queueLogger } from '../../logger.js';
-import { createTempDir } from '@/misc/create-temp.js';
-import { downloadUrl } from '@/misc/download-url.js';
-import { DriveFiles, Emojis } from '@/models/index.js';
-import { DbUserImportJobData } from '@/queue/types.js';
-import { addFile } from '@/services/drive/add-file.js';
-import { genId } from '@/misc/gen-id.js';
-import { db } from '@/db/postgre.js';
-
-const logger = queueLogger.createSubLogger('import-custom-emojis');
-
-// TODO: 名前衝突時の動作を選べるようにする
-export async function importCustomEmojis(job: Bull.Job<DbUserImportJobData>, done: any): Promise<void> {
-	logger.info(`Importing custom emojis ...`);
-
-	const file = await DriveFiles.findOneBy({
-		id: job.data.fileId,
-	});
-	if (file == null) {
-		done();
-		return;
-	}
-
-	const [path, cleanup] = await createTempDir();
-
-	logger.info(`Temp dir is ${path}`);
-
-	const destPath = path + '/emojis.zip';
-
-	try {
-		fs.writeFileSync(destPath, '', 'binary');
-		await downloadUrl(file.url, destPath);
-	} catch (e) { // TODO: 何度か再試行
-		if (e instanceof Error || typeof e === 'string') {
-			logger.error(e);
-		}
-		throw e;
-	}
-
-	const outputPath = path + '/emojis';
-	const unzipStream = fs.createReadStream(destPath);
-	const extractor = unzipper.Extract({ path: outputPath });
-	extractor.on('close', async () => {
-		const metaRaw = fs.readFileSync(outputPath + '/meta.json', 'utf-8');
-		const meta = JSON.parse(metaRaw);
-
-		for (const record of meta.emojis) {
-			if (!record.downloaded) continue;
-			const emojiInfo = record.emoji;
-			const emojiPath = outputPath + '/' + record.fileName;
-			await Emojis.delete({
-				name: emojiInfo.name,
-			});
-			const driveFile = await addFile({ user: null, path: emojiPath, name: record.fileName, force: true });
-			const emoji = await Emojis.insert({
-				id: genId(),
-				updatedAt: new Date(),
-				name: emojiInfo.name,
-				category: emojiInfo.category,
-				host: null,
-				aliases: emojiInfo.aliases,
-				originalUrl: driveFile.url,
-				publicUrl: driveFile.webpublicUrl ?? driveFile.url,
-				type: driveFile.webpublicType ?? driveFile.type,
-			}).then(x => Emojis.findOneByOrFail(x.identifiers[0]));
-		}
-
-		await db.queryResultCache!.remove(['meta_emojis']);
-
-		cleanup();
-	
-		logger.succ('Imported');
-		done();
-	});
-	unzipStream.pipe(extractor);
-	logger.succ(`Unzipping to ${outputPath}`);
-}
diff --git a/packages/backend/src/queue/processors/db/import-following.ts b/packages/backend/src/queue/processors/db/import-following.ts
deleted file mode 100644
index 8ce2c367d6..0000000000
--- a/packages/backend/src/queue/processors/db/import-following.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import Bull from 'bull';
-
-import { queueLogger } from '../../logger.js';
-import follow from '@/services/following/create.js';
-import * as Acct from '@/misc/acct.js';
-import { resolveUser } from '@/remote/resolve-user.js';
-import { downloadTextFile } from '@/misc/download-text-file.js';
-import { isSelfHost, toPuny } from '@/misc/convert-host.js';
-import { Users, DriveFiles } from '@/models/index.js';
-import { DbUserImportJobData } from '@/queue/types.js';
-import { IsNull } from 'typeorm';
-
-const logger = queueLogger.createSubLogger('import-following');
-
-export async function importFollowing(job: Bull.Job<DbUserImportJobData>, done: any): Promise<void> {
-	logger.info(`Importing following of ${job.data.user.id} ...`);
-
-	const user = await Users.findOneBy({ id: job.data.user.id });
-	if (user == null) {
-		done();
-		return;
-	}
-
-	const file = await DriveFiles.findOneBy({
-		id: job.data.fileId,
-	});
-	if (file == null) {
-		done();
-		return;
-	}
-
-	const csv = await downloadTextFile(file.url);
-
-	let linenum = 0;
-
-	for (const line of csv.trim().split('\n')) {
-		linenum++;
-
-		try {
-			const acct = line.split(',')[0].trim();
-			const { username, host } = Acct.parse(acct);
-
-			let target = isSelfHost(host!) ? await Users.findOneBy({
-				host: IsNull(),
-				usernameLower: username.toLowerCase(),
-			}) : await Users.findOneBy({
-				host: toPuny(host!),
-				usernameLower: username.toLowerCase(),
-			});
-
-			if (host == null && target == null) continue;
-
-			if (target == null) {
-				target = await resolveUser(username, host);
-			}
-
-			if (target == null) {
-				throw `cannot resolve user: @${username}@${host}`;
-			}
-
-			// skip myself
-			if (target.id === job.data.user.id) continue;
-
-			logger.info(`Follow[${linenum}] ${target.id} ...`);
-
-			follow(user, target);
-		} catch (e) {
-			logger.warn(`Error in line:${linenum} ${e}`);
-		}
-	}
-
-	logger.succ('Imported');
-	done();
-}
diff --git a/packages/backend/src/queue/processors/db/import-muting.ts b/packages/backend/src/queue/processors/db/import-muting.ts
deleted file mode 100644
index 8552b797be..0000000000
--- a/packages/backend/src/queue/processors/db/import-muting.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import Bull from 'bull';
-
-import { queueLogger } from '../../logger.js';
-import * as Acct from '@/misc/acct.js';
-import { resolveUser } from '@/remote/resolve-user.js';
-import { downloadTextFile } from '@/misc/download-text-file.js';
-import { isSelfHost, toPuny } from '@/misc/convert-host.js';
-import { Users, DriveFiles, Mutings } from '@/models/index.js';
-import { DbUserImportJobData } from '@/queue/types.js';
-import { User } from '@/models/entities/user.js';
-import { genId } from '@/misc/gen-id.js';
-import { IsNull } from 'typeorm';
-
-const logger = queueLogger.createSubLogger('import-muting');
-
-export async function importMuting(job: Bull.Job<DbUserImportJobData>, done: any): Promise<void> {
-	logger.info(`Importing muting of ${job.data.user.id} ...`);
-
-	const user = await Users.findOneBy({ id: job.data.user.id });
-	if (user == null) {
-		done();
-		return;
-	}
-
-	const file = await DriveFiles.findOneBy({
-		id: job.data.fileId,
-	});
-	if (file == null) {
-		done();
-		return;
-	}
-
-	const csv = await downloadTextFile(file.url);
-
-	let linenum = 0;
-
-	for (const line of csv.trim().split('\n')) {
-		linenum++;
-
-		try {
-			const acct = line.split(',')[0].trim();
-			const { username, host } = Acct.parse(acct);
-
-			let target = isSelfHost(host!) ? await Users.findOneBy({
-				host: IsNull(),
-				usernameLower: username.toLowerCase(),
-			}) : await Users.findOneBy({
-				host: toPuny(host!),
-				usernameLower: username.toLowerCase(),
-			});
-
-			if (host == null && target == null) continue;
-
-			if (target == null) {
-				target = await resolveUser(username, host);
-			}
-
-			if (target == null) {
-				throw `cannot resolve user: @${username}@${host}`;
-			}
-
-			// skip myself
-			if (target.id === job.data.user.id) continue;
-
-			logger.info(`Mute[${linenum}] ${target.id} ...`);
-
-			await mute(user, target);
-		} catch (e) {
-			logger.warn(`Error in line:${linenum} ${e}`);
-		}
-	}
-
-	logger.succ('Imported');
-	done();
-}
-
-async function mute(user: User, target: User) {
-	await Mutings.insert({
-		id: genId(),
-		createdAt: new Date(),
-		muterId: user.id,
-		muteeId: target.id,
-	});
-}
diff --git a/packages/backend/src/queue/processors/db/import-user-lists.ts b/packages/backend/src/queue/processors/db/import-user-lists.ts
deleted file mode 100644
index 9919b7c53c..0000000000
--- a/packages/backend/src/queue/processors/db/import-user-lists.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import Bull from 'bull';
-
-import { queueLogger } from '../../logger.js';
-import * as Acct from '@/misc/acct.js';
-import { resolveUser } from '@/remote/resolve-user.js';
-import { pushUserToUserList } from '@/services/user-list/push.js';
-import { downloadTextFile } from '@/misc/download-text-file.js';
-import { isSelfHost, toPuny } from '@/misc/convert-host.js';
-import { DriveFiles, Users, UserLists, UserListJoinings } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { DbUserImportJobData } from '@/queue/types.js';
-import { IsNull } from 'typeorm';
-
-const logger = queueLogger.createSubLogger('import-user-lists');
-
-export async function importUserLists(job: Bull.Job<DbUserImportJobData>, done: any): Promise<void> {
-	logger.info(`Importing user lists of ${job.data.user.id} ...`);
-
-	const user = await Users.findOneBy({ id: job.data.user.id });
-	if (user == null) {
-		done();
-		return;
-	}
-
-	const file = await DriveFiles.findOneBy({
-		id: job.data.fileId,
-	});
-	if (file == null) {
-		done();
-		return;
-	}
-
-	const csv = await downloadTextFile(file.url);
-
-	let linenum = 0;
-
-	for (const line of csv.trim().split('\n')) {
-		linenum++;
-
-		try {
-			const listName = line.split(',')[0].trim();
-			const { username, host } = Acct.parse(line.split(',')[1].trim());
-
-			let list = await UserLists.findOneBy({
-				userId: user.id,
-				name: listName,
-			});
-
-			if (list == null) {
-				list = await UserLists.insert({
-					id: genId(),
-					createdAt: new Date(),
-					userId: user.id,
-					name: listName,
-				}).then(x => UserLists.findOneByOrFail(x.identifiers[0]));
-			}
-
-			let target = isSelfHost(host!) ? await Users.findOneBy({
-				host: IsNull(),
-				usernameLower: username.toLowerCase(),
-			}) : await Users.findOneBy({
-				host: toPuny(host!),
-				usernameLower: username.toLowerCase(),
-			});
-
-			if (target == null) {
-				target = await resolveUser(username, host);
-			}
-
-			if (await UserListJoinings.findOneBy({ userListId: list!.id, userId: target.id }) != null) continue;
-
-			pushUserToUserList(target, list!);
-		} catch (e) {
-			logger.warn(`Error in line:${linenum} ${e}`);
-		}
-	}
-
-	logger.succ('Imported');
-	done();
-}
diff --git a/packages/backend/src/queue/processors/db/index.ts b/packages/backend/src/queue/processors/db/index.ts
deleted file mode 100644
index e91d569779..0000000000
--- a/packages/backend/src/queue/processors/db/index.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import Bull from 'bull';
-import { DbJobData } from '@/queue/types.js';
-import { deleteDriveFiles } from './delete-drive-files.js';
-import { exportCustomEmojis } from './export-custom-emojis.js';
-import { exportNotes } from './export-notes.js';
-import { exportFollowing } from './export-following.js';
-import { exportMute } from './export-mute.js';
-import { exportBlocking } from './export-blocking.js';
-import { exportUserLists } from './export-user-lists.js';
-import { importFollowing } from './import-following.js';
-import { importUserLists } from './import-user-lists.js';
-import { deleteAccount } from './delete-account.js';
-import { importMuting } from './import-muting.js';
-import { importBlocking } from './import-blocking.js';
-import { importCustomEmojis } from './import-custom-emojis.js';
-
-const jobs = {
-	deleteDriveFiles,
-	exportCustomEmojis,
-	exportNotes,
-	exportFollowing,
-	exportMute,
-	exportBlocking,
-	exportUserLists,
-	importFollowing,
-	importMuting,
-	importBlocking,
-	importUserLists,
-	importCustomEmojis,
-	deleteAccount,
-} as Record<string, Bull.ProcessCallbackFunction<DbJobData> | Bull.ProcessPromiseFunction<DbJobData>>;
-
-export default function(dbQueue: Bull.Queue<DbJobData>) {
-	for (const [k, v] of Object.entries(jobs)) {
-		dbQueue.process(k, v);
-	}
-}
diff --git a/packages/backend/src/queue/processors/deliver.ts b/packages/backend/src/queue/processors/deliver.ts
deleted file mode 100644
index 291c05766e..0000000000
--- a/packages/backend/src/queue/processors/deliver.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { URL } from 'node:url';
-import Bull from 'bull';
-import request from '@/remote/activitypub/request.js';
-import { registerOrFetchInstanceDoc } from '@/services/register-or-fetch-instance-doc.js';
-import Logger from '@/services/logger.js';
-import { Instances } from '@/models/index.js';
-import { apRequestChart, federationChart, instanceChart } from '@/services/chart/index.js';
-import { fetchInstanceMetadata } from '@/services/fetch-instance-metadata.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { toPuny } from '@/misc/convert-host.js';
-import { Cache } from '@/misc/cache.js';
-import { Instance } from '@/models/entities/instance.js';
-import { DeliverJobData } from '../types.js';
-import { StatusError } from '@/misc/fetch.js';
-
-const logger = new Logger('deliver');
-
-let latest: string | null = null;
-
-const suspendedHostsCache = new Cache<Instance[]>(1000 * 60 * 60);
-
-export default async (job: Bull.Job<DeliverJobData>) => {
-	const { host } = new URL(job.data.to);
-
-	// ブロックしてたら中断
-	const meta = await fetchMeta();
-	if (meta.blockedHosts.includes(toPuny(host))) {
-		return 'skip (blocked)';
-	}
-
-	// isSuspendedなら中断
-	let suspendedHosts = suspendedHostsCache.get(null);
-	if (suspendedHosts == null) {
-		suspendedHosts = await Instances.find({
-			where: {
-				isSuspended: true,
-			},
-		});
-		suspendedHostsCache.set(null, suspendedHosts);
-	}
-	if (suspendedHosts.map(x => x.host).includes(toPuny(host))) {
-		return 'skip (suspended)';
-	}
-
-	try {
-		if (latest !== (latest = JSON.stringify(job.data.content, null, 2))) {
-			logger.debug(`delivering ${latest}`);
-		}
-
-		await request(job.data.user, job.data.to, job.data.content);
-
-		// Update stats
-		registerOrFetchInstanceDoc(host).then(i => {
-			Instances.update(i.id, {
-				latestRequestSentAt: new Date(),
-				latestStatus: 200,
-				lastCommunicatedAt: new Date(),
-				isNotResponding: false,
-			});
-
-			fetchInstanceMetadata(i);
-
-			instanceChart.requestSent(i.host, true);
-			apRequestChart.deliverSucc();
-			federationChart.deliverd(i.host, true);
-		});
-
-		return 'Success';
-	} catch (res) {
-		// Update stats
-		registerOrFetchInstanceDoc(host).then(i => {
-			Instances.update(i.id, {
-				latestRequestSentAt: new Date(),
-				latestStatus: res instanceof StatusError ? res.statusCode : null,
-				isNotResponding: true,
-			});
-
-			instanceChart.requestSent(i.host, false);
-			apRequestChart.deliverFail();
-			federationChart.deliverd(i.host, false);
-		});
-
-		if (res instanceof StatusError) {
-			// 4xx
-			if (res.isClientError) {
-				// HTTPステータスコード4xxはクライアントエラーであり、それはつまり
-				// 何回再送しても成功することはないということなのでエラーにはしないでおく
-				return `${res.statusCode} ${res.statusMessage}`;
-			}
-
-			// 5xx etc.
-			throw `${res.statusCode} ${res.statusMessage}`;
-		} else {
-			// DNS error, socket error, timeout ...
-			throw res;
-		}
-	}
-};
diff --git a/packages/backend/src/queue/processors/ended-poll-notification.ts b/packages/backend/src/queue/processors/ended-poll-notification.ts
deleted file mode 100644
index 6151c96ad6..0000000000
--- a/packages/backend/src/queue/processors/ended-poll-notification.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import Bull from 'bull';
-import { In } from 'typeorm';
-import { Notes, Polls, PollVotes } from '@/models/index.js';
-import { queueLogger } from '../logger.js';
-import { EndedPollNotificationJobData } from '@/queue/types.js';
-import { createNotification } from '@/services/create-notification.js';
-
-const logger = queueLogger.createSubLogger('ended-poll-notification');
-
-export async function endedPollNotification(job: Bull.Job<EndedPollNotificationJobData>, done: any): Promise<void> {
-	const note = await Notes.findOneBy({ id: job.data.noteId });
-	if (note == null || !note.hasPoll) {
-		done();
-		return;
-	}
-
-	const votes = await PollVotes.createQueryBuilder('vote')
-		.select('vote.userId')
-		.where('vote.noteId = :noteId', { noteId: note.id })
-		.innerJoinAndSelect('vote.user', 'user')
-		.andWhere('user.host IS NULL')
-		.getMany();
-
-	const userIds = [...new Set([note.userId, ...votes.map(v => v.userId)])];
-
-	for (const userId of userIds) {
-		createNotification(userId, 'pollEnded', {
-			noteId: note.id,
-		});
-	}
-
-	done();
-}
diff --git a/packages/backend/src/queue/processors/inbox.ts b/packages/backend/src/queue/processors/inbox.ts
deleted file mode 100644
index 198dde6050..0000000000
--- a/packages/backend/src/queue/processors/inbox.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-import { URL } from 'node:url';
-import Bull from 'bull';
-import httpSignature from '@peertube/http-signature';
-import perform from '@/remote/activitypub/perform.js';
-import Logger from '@/services/logger.js';
-import { registerOrFetchInstanceDoc } from '@/services/register-or-fetch-instance-doc.js';
-import { Instances } from '@/models/index.js';
-import { apRequestChart, federationChart, instanceChart } from '@/services/chart/index.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { toPuny, extractDbHost } from '@/misc/convert-host.js';
-import { getApId } from '@/remote/activitypub/type.js';
-import { fetchInstanceMetadata } from '@/services/fetch-instance-metadata.js';
-import { InboxJobData } from '../types.js';
-import DbResolver from '@/remote/activitypub/db-resolver.js';
-import { resolvePerson } from '@/remote/activitypub/models/person.js';
-import { LdSignature } from '@/remote/activitypub/misc/ld-signature.js';
-import { StatusError } from '@/misc/fetch.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { UserPublickey } from '@/models/entities/user-publickey.js';
-
-const logger = new Logger('inbox');
-
-// ユーザーのinboxにアクティビティが届いた時の処理
-export default async (job: Bull.Job<InboxJobData>): Promise<string> => {
-	const signature = job.data.signature;	// HTTP-signature
-	const activity = job.data.activity;
-
-	//#region Log
-	const info = Object.assign({}, activity) as any;
-	delete info['@context'];
-	logger.debug(JSON.stringify(info, null, 2));
-	//#endregion
-
-	const host = toPuny(new URL(signature.keyId).hostname);
-
-	// ブロックしてたら中断
-	const meta = await fetchMeta();
-	if (meta.blockedHosts.includes(host)) {
-		return `Blocked request: ${host}`;
-	}
-
-	const keyIdLower = signature.keyId.toLowerCase();
-	if (keyIdLower.startsWith('acct:')) {
-		return `Old keyId is no longer supported. ${keyIdLower}`;
-	}
-
-	const dbResolver = new DbResolver();
-
-	// HTTP-Signature keyIdを元にDBから取得
-	let authUser: {
-		user: CacheableRemoteUser;
-		key: UserPublickey | null;
-	} | null = await dbResolver.getAuthUserFromKeyId(signature.keyId);
-
-	// keyIdでわからなければ、activity.actorを元にDBから取得 || activity.actorを元にリモートから取得
-	if (authUser == null) {
-		try {
-			authUser = await dbResolver.getAuthUserFromApId(getApId(activity.actor));
-		} catch (e) {
-			// 対象が4xxならスキップ
-			if (e instanceof StatusError) {
-				if (e.isClientError) {
-					return `skip: Ignored deleted actors on both ends ${activity.actor} - ${e.statusCode}`;
-				}
-				throw `Error in actor ${activity.actor} - ${e.statusCode || e}`;
-			}
-		}
-	}
-
-	// それでもわからなければ終了
-	if (authUser == null) {
-		return `skip: failed to resolve user`;
-	}
-
-	// publicKey がなくても終了
-	if (authUser.key == null) {
-		return `skip: failed to resolve user publicKey`;
-	}
-
-	// HTTP-Signatureの検証
-	const httpSignatureValidated = httpSignature.verifySignature(signature, authUser.key.keyPem);
-
-	// また、signatureのsignerは、activity.actorと一致する必要がある
-	if (!httpSignatureValidated || authUser.user.uri !== activity.actor) {
-		// 一致しなくても、でもLD-Signatureがありそうならそっちも見る
-		if (activity.signature) {
-			if (activity.signature.type !== 'RsaSignature2017') {
-				return `skip: unsupported LD-signature type ${activity.signature.type}`;
-			}
-
-			// activity.signature.creator: https://example.oom/users/user#main-key
-			// みたいになっててUserを引っ張れば公開キーも入ることを期待する
-			if (activity.signature.creator) {
-				const candicate = activity.signature.creator.replace(/#.*/, '');
-				await resolvePerson(candicate).catch(() => null);
-			}
-
-			// keyIdからLD-Signatureのユーザーを取得
-			authUser = await dbResolver.getAuthUserFromKeyId(activity.signature.creator);
-			if (authUser == null) {
-				return `skip: LD-Signatureのユーザーが取得できませんでした`;
-			}
-
-			if (authUser.key == null) {
-				return `skip: LD-SignatureのユーザーはpublicKeyを持っていませんでした`;
-			}
-
-			// LD-Signature検証
-			const ldSignature = new LdSignature();
-			const verified = await ldSignature.verifyRsaSignature2017(activity, authUser.key.keyPem).catch(() => false);
-			if (!verified) {
-				return `skip: LD-Signatureの検証に失敗しました`;
-			}
-
-			// もう一度actorチェック
-			if (authUser.user.uri !== activity.actor) {
-				return `skip: LD-Signature user(${authUser.user.uri}) !== activity.actor(${activity.actor})`;
-			}
-
-			// ブロックしてたら中断
-			const ldHost = extractDbHost(authUser.user.uri);
-			if (meta.blockedHosts.includes(ldHost)) {
-				return `Blocked request: ${ldHost}`;
-			}
-		} else {
-			return `skip: http-signature verification failed and no LD-Signature. keyId=${signature.keyId}`;
-		}
-	}
-
-	// activity.idがあればホストが署名者のホストであることを確認する
-	if (typeof activity.id === 'string') {
-		const signerHost = extractDbHost(authUser.user.uri!);
-		const activityIdHost = extractDbHost(activity.id);
-		if (signerHost !== activityIdHost) {
-			return `skip: signerHost(${signerHost}) !== activity.id host(${activityIdHost}`;
-		}
-	}
-
-	// Update stats
-	registerOrFetchInstanceDoc(authUser.user.host).then(i => {
-		Instances.update(i.id, {
-			latestRequestReceivedAt: new Date(),
-			lastCommunicatedAt: new Date(),
-			isNotResponding: false,
-		});
-
-		fetchInstanceMetadata(i);
-
-		instanceChart.requestReceived(i.host);
-		apRequestChart.inbox();
-		federationChart.inbox(i.host);
-	});
-
-	// アクティビティを処理
-	await perform(authUser.user, activity);
-	return `ok`;
-};
diff --git a/packages/backend/src/queue/processors/object-storage/clean-remote-files.ts b/packages/backend/src/queue/processors/object-storage/clean-remote-files.ts
deleted file mode 100644
index 77da162f6e..0000000000
--- a/packages/backend/src/queue/processors/object-storage/clean-remote-files.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import Bull from 'bull';
-
-import { queueLogger } from '../../logger.js';
-import { deleteFileSync } from '@/services/drive/delete-file.js';
-import { DriveFiles } from '@/models/index.js';
-import { MoreThan, Not, IsNull } from 'typeorm';
-
-const logger = queueLogger.createSubLogger('clean-remote-files');
-
-export default async function cleanRemoteFiles(job: Bull.Job<Record<string, unknown>>, done: any): Promise<void> {
-	logger.info(`Deleting cached remote files...`);
-
-	let deletedCount = 0;
-	let cursor: any = null;
-
-	while (true) {
-		const files = await DriveFiles.find({
-			where: {
-				userHost: Not(IsNull()),
-				isLink: false,
-				...(cursor ? { id: MoreThan(cursor) } : {}),
-			},
-			take: 8,
-			order: {
-				id: 1,
-			},
-		});
-
-		if (files.length === 0) {
-			job.progress(100);
-			break;
-		}
-
-		cursor = files[files.length - 1].id;
-
-		await Promise.all(files.map(file => deleteFileSync(file, true)));
-
-		deletedCount += 8;
-
-		const total = await DriveFiles.countBy({
-			userHost: Not(IsNull()),
-			isLink: false,
-		});
-
-		job.progress(deletedCount / total);
-	}
-
-	logger.succ(`All cahced remote files has been deleted.`);
-	done();
-}
diff --git a/packages/backend/src/queue/processors/object-storage/delete-file.ts b/packages/backend/src/queue/processors/object-storage/delete-file.ts
deleted file mode 100644
index c271e3ddd4..0000000000
--- a/packages/backend/src/queue/processors/object-storage/delete-file.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ObjectStorageFileJobData } from '@/queue/types.js';
-import Bull from 'bull';
-import { deleteObjectStorageFile } from '@/services/drive/delete-file.js';
-
-export default async (job: Bull.Job<ObjectStorageFileJobData>) => {
-	const key: string = job.data.key;
-
-	await deleteObjectStorageFile(key);
-
-	return 'Success';
-};
diff --git a/packages/backend/src/queue/processors/object-storage/index.ts b/packages/backend/src/queue/processors/object-storage/index.ts
deleted file mode 100644
index ae6c481fea..0000000000
--- a/packages/backend/src/queue/processors/object-storage/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import Bull from 'bull';
-import { ObjectStorageJobData } from '@/queue/types.js';
-import deleteFile from './delete-file.js';
-import cleanRemoteFiles from './clean-remote-files.js';
-
-const jobs = {
-	deleteFile,
-	cleanRemoteFiles,
-} as Record<string, Bull.ProcessCallbackFunction<ObjectStorageJobData> | Bull.ProcessPromiseFunction<ObjectStorageJobData>>;
-
-export default function(q: Bull.Queue) {
-	for (const [k, v] of Object.entries(jobs)) {
-		q.process(k, 16, v);
-	}
-}
diff --git a/packages/backend/src/queue/processors/system/check-expired-mutings.ts b/packages/backend/src/queue/processors/system/check-expired-mutings.ts
deleted file mode 100644
index 621269e7e1..0000000000
--- a/packages/backend/src/queue/processors/system/check-expired-mutings.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import Bull from 'bull';
-import { In } from 'typeorm';
-import { Mutings } from '@/models/index.js';
-import { queueLogger } from '../../logger.js';
-import { publishUserEvent } from '@/services/stream.js';
-
-const logger = queueLogger.createSubLogger('check-expired-mutings');
-
-export async function checkExpiredMutings(job: Bull.Job<Record<string, unknown>>, done: any): Promise<void> {
-	logger.info(`Checking expired mutings...`);
-
-	const expired = await Mutings.createQueryBuilder('muting')
-		.where('muting.expiresAt IS NOT NULL')
-		.andWhere('muting.expiresAt < :now', { now: new Date() })
-		.innerJoinAndSelect('muting.mutee', 'mutee')
-		.getMany();
-
-	if (expired.length > 0) {
-		await Mutings.delete({
-			id: In(expired.map(m => m.id)),
-		});
-
-		for (const m of expired) {
-			publishUserEvent(m.muterId, 'unmute', m.mutee!);
-		}
-	}
-
-	logger.succ(`All expired mutings checked.`);
-	done();
-}
diff --git a/packages/backend/src/queue/processors/system/clean-charts.ts b/packages/backend/src/queue/processors/system/clean-charts.ts
deleted file mode 100644
index c9169d5acf..0000000000
--- a/packages/backend/src/queue/processors/system/clean-charts.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import Bull from 'bull';
-
-import { queueLogger } from '../../logger.js';
-import { activeUsersChart, driveChart, federationChart, hashtagChart, instanceChart, notesChart, perUserDriveChart, perUserFollowingChart, perUserNotesChart, perUserReactionsChart, usersChart, apRequestChart } from '@/services/chart/index.js';
-
-const logger = queueLogger.createSubLogger('clean-charts');
-
-export async function cleanCharts(job: Bull.Job<Record<string, unknown>>, done: any): Promise<void> {
-	logger.info(`Clean charts...`);
-
-	await Promise.all([
-		federationChart.clean(),
-		notesChart.clean(),
-		usersChart.clean(),
-		activeUsersChart.clean(),
-		instanceChart.clean(),
-		perUserNotesChart.clean(),
-		driveChart.clean(),
-		perUserReactionsChart.clean(),
-		hashtagChart.clean(),
-		perUserFollowingChart.clean(),
-		perUserDriveChart.clean(),
-		apRequestChart.clean(),
-	]);
-
-	logger.succ(`All charts successfully cleaned.`);
-	done();
-}
diff --git a/packages/backend/src/queue/processors/system/clean.ts b/packages/backend/src/queue/processors/system/clean.ts
deleted file mode 100644
index c4f978d7c9..0000000000
--- a/packages/backend/src/queue/processors/system/clean.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import Bull from 'bull';
-import { LessThan } from 'typeorm';
-import { UserIps } from '@/models/index.js';
-
-import { queueLogger } from '../../logger.js';
-
-const logger = queueLogger.createSubLogger('clean');
-
-export async function clean(job: Bull.Job<Record<string, unknown>>, done: any): Promise<void> {
-	logger.info('Cleaning...');
-
-	UserIps.delete({
-		createdAt: LessThan(new Date(Date.now() - (1000 * 60 * 60 * 24 * 90))),
-	});
-
-	logger.succ('Cleaned.');
-	done();
-}
diff --git a/packages/backend/src/queue/processors/system/index.ts b/packages/backend/src/queue/processors/system/index.ts
deleted file mode 100644
index 9527d40b0f..0000000000
--- a/packages/backend/src/queue/processors/system/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import Bull from 'bull';
-import { tickCharts } from './tick-charts.js';
-import { resyncCharts } from './resync-charts.js';
-import { cleanCharts } from './clean-charts.js';
-import { checkExpiredMutings } from './check-expired-mutings.js';
-import { clean } from './clean.js';
-
-const jobs = {
-	tickCharts,
-	resyncCharts,
-	cleanCharts,
-	checkExpiredMutings,
-	clean,
-} as Record<string, Bull.ProcessCallbackFunction<Record<string, unknown>> | Bull.ProcessPromiseFunction<Record<string, unknown>>>;
-
-export default function(dbQueue: Bull.Queue<Record<string, unknown>>) {
-	for (const [k, v] of Object.entries(jobs)) {
-		dbQueue.process(k, v);
-	}
-}
diff --git a/packages/backend/src/queue/processors/system/resync-charts.ts b/packages/backend/src/queue/processors/system/resync-charts.ts
deleted file mode 100644
index 20012513af..0000000000
--- a/packages/backend/src/queue/processors/system/resync-charts.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import Bull from 'bull';
-
-import { queueLogger } from '../../logger.js';
-import { driveChart, notesChart, usersChart } from '@/services/chart/index.js';
-
-const logger = queueLogger.createSubLogger('resync-charts');
-
-export async function resyncCharts(job: Bull.Job<Record<string, unknown>>, done: any): Promise<void> {
-	logger.info(`Resync charts...`);
-
-	// TODO: ユーザーごとのチャートも更新する
-	// TODO: インスタンスごとのチャートも更新する
-	await Promise.all([
-		driveChart.resync(),
-		notesChart.resync(),
-		usersChart.resync(),
-	]);
-
-	logger.succ(`All charts successfully resynced.`);
-	done();
-}
diff --git a/packages/backend/src/queue/processors/system/tick-charts.ts b/packages/backend/src/queue/processors/system/tick-charts.ts
deleted file mode 100644
index 13403f8f73..0000000000
--- a/packages/backend/src/queue/processors/system/tick-charts.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import Bull from 'bull';
-
-import { queueLogger } from '../../logger.js';
-import { activeUsersChart, driveChart, federationChart, hashtagChart, instanceChart, notesChart, perUserDriveChart, perUserFollowingChart, perUserNotesChart, perUserReactionsChart, usersChart, apRequestChart } from '@/services/chart/index.js';
-
-const logger = queueLogger.createSubLogger('tick-charts');
-
-export async function tickCharts(job: Bull.Job<Record<string, unknown>>, done: any): Promise<void> {
-	logger.info(`Tick charts...`);
-
-	await Promise.all([
-		federationChart.tick(false),
-		notesChart.tick(false),
-		usersChart.tick(false),
-		activeUsersChart.tick(false),
-		instanceChart.tick(false),
-		perUserNotesChart.tick(false),
-		driveChart.tick(false),
-		perUserReactionsChart.tick(false),
-		hashtagChart.tick(false),
-		perUserFollowingChart.tick(false),
-		perUserDriveChart.tick(false),
-		apRequestChart.tick(false),
-	]);
-
-	logger.succ(`All charts successfully ticked.`);
-	done();
-}
diff --git a/packages/backend/src/queue/processors/webhook-deliver.ts b/packages/backend/src/queue/processors/webhook-deliver.ts
deleted file mode 100644
index d49206f68f..0000000000
--- a/packages/backend/src/queue/processors/webhook-deliver.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { URL } from 'node:url';
-import Bull from 'bull';
-import Logger from '@/services/logger.js';
-import { WebhookDeliverJobData } from '../types.js';
-import { getResponse, StatusError } from '@/misc/fetch.js';
-import { Webhooks } from '@/models/index.js';
-import config from '@/config/index.js';
-
-const logger = new Logger('webhook');
-
-export default async (job: Bull.Job<WebhookDeliverJobData>) => {
-	try {
-		logger.debug(`delivering ${job.data.webhookId}`);
-
-		const res = await getResponse({
-			url: job.data.to,
-			method: 'POST',
-			headers: {
-				'User-Agent': 'Misskey-Hooks',
-				'X-Misskey-Host': config.host,
-				'X-Misskey-Hook-Id': job.data.webhookId,
-				'X-Misskey-Hook-Secret': job.data.secret,
-			},
-			body: JSON.stringify({
-				hookId: job.data.webhookId,
-				userId: job.data.userId,
-				eventId: job.data.eventId,
-				createdAt: job.data.createdAt,
-				type: job.data.type,
-				body: job.data.content,
-			}),
-		});
-
-		Webhooks.update({ id: job.data.webhookId }, {
-			latestSentAt: new Date(),
-			latestStatus: res.status,
-		});
-
-		return 'Success';
-	} catch (res) {
-		Webhooks.update({ id: job.data.webhookId }, {
-			latestSentAt: new Date(),
-			latestStatus: res instanceof StatusError ? res.statusCode : 1,
-		});
-
-		if (res instanceof StatusError) {
-			// 4xx
-			if (res.isClientError) {
-				return `${res.statusCode} ${res.statusMessage}`;
-			}
-
-			// 5xx etc.
-			throw `${res.statusCode} ${res.statusMessage}`;
-		} else {
-			// DNS error, socket error, timeout ...
-			throw res;
-		}
-	}
-};
diff --git a/packages/backend/src/queue/queues.ts b/packages/backend/src/queue/queues.ts
deleted file mode 100644
index f3a267790c..0000000000
--- a/packages/backend/src/queue/queues.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import config from '@/config/index.js';
-import { initialize as initializeQueue } from './initialize.js';
-import { DeliverJobData, InboxJobData, DbJobData, ObjectStorageJobData, EndedPollNotificationJobData, WebhookDeliverJobData } from './types.js';
-
-export const systemQueue = initializeQueue<Record<string, unknown>>('system');
-export const endedPollNotificationQueue = initializeQueue<EndedPollNotificationJobData>('endedPollNotification');
-export const deliverQueue = initializeQueue<DeliverJobData>('deliver', config.deliverJobPerSec || 128);
-export const inboxQueue = initializeQueue<InboxJobData>('inbox', config.inboxJobPerSec || 16);
-export const dbQueue = initializeQueue<DbJobData>('db');
-export const objectStorageQueue = initializeQueue<ObjectStorageJobData>('objectStorage');
-export const webhookDeliverQueue = initializeQueue<WebhookDeliverJobData>('webhookDeliver', 64);
-
-export const queues = [
-	systemQueue,
-	endedPollNotificationQueue,
-	deliverQueue,
-	inboxQueue,
-	dbQueue,
-	objectStorageQueue,
-	webhookDeliverQueue,
-];
diff --git a/packages/backend/src/queue/types.ts b/packages/backend/src/queue/types.ts
index 5ea4725561..18ec997a1b 100644
--- a/packages/backend/src/queue/types.ts
+++ b/packages/backend/src/queue/types.ts
@@ -1,9 +1,9 @@
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { Note } from '@/models/entities/note';
-import { User } from '@/models/entities/user.js';
-import { Webhook } from '@/models/entities/webhook';
-import { IActivity } from '@/remote/activitypub/type.js';
-import httpSignature from '@peertube/http-signature';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import type { Note } from '@/models/entities/Note.js';
+import type { User } from '@/models/entities/User.js';
+import type { Webhook } from '@/models/entities/Webhook.js';
+import type { IActivity } from '@/core/remote/activitypub/type.js';
+import type httpSignature from '@peertube/http-signature';
 
 export type DeliverJobData = {
 	/** Actor */
diff --git a/packages/backend/src/redis.ts b/packages/backend/src/redis.ts
new file mode 100644
index 0000000000..d1678ae65f
--- /dev/null
+++ b/packages/backend/src/redis.ts
@@ -0,0 +1,15 @@
+import Redis from 'ioredis';
+import { loadConfig } from '@/config.js';
+
+export function createRedisConnection(): Redis.Redis {
+	const config = loadConfig();
+
+	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,
+	});
+}
diff --git a/packages/backend/src/remote/activitypub/ap-request.ts b/packages/backend/src/remote/activitypub/ap-request.ts
deleted file mode 100644
index 8b55f22477..0000000000
--- a/packages/backend/src/remote/activitypub/ap-request.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import * as crypto from 'node:crypto';
-import { URL } from 'node:url';
-
-type Request = {
-	url: string;
-	method: string;
-	headers: Record<string, string>;
-};
-
-type PrivateKey = {
-	privateKeyPem: string;
-	keyId: string;
-};
-
-export function createSignedPost(args: { key: PrivateKey, url: string, body: string, additionalHeaders: Record<string, string> }) {
-	const u = new URL(args.url);
-	const digestHeader = `SHA-256=${crypto.createHash('sha256').update(args.body).digest('base64')}`;
-
-	const request: Request = {
-		url: u.href,
-		method: 'POST',
-		headers: objectAssignWithLcKey({
-			'Date': new Date().toUTCString(),
-			'Host': u.hostname,
-			'Content-Type': 'application/activity+json',
-			'Digest': digestHeader,
-		}, args.additionalHeaders),
-	};
-
-	const result = signToRequest(request, args.key, ['(request-target)', 'date', 'host', 'digest']);
-
-	return {
-		request,
-		signingString: result.signingString,
-		signature: result.signature,
-		signatureHeader: result.signatureHeader,
-	};
-}
-
-export function createSignedGet(args: { key: PrivateKey, url: string, additionalHeaders: Record<string, string> }) {
-	const u = new URL(args.url);
-
-	const request: Request = {
-		url: u.href,
-		method: 'GET',
-		headers: objectAssignWithLcKey({
-			'Accept': 'application/activity+json, application/ld+json',
-			'Date': new Date().toUTCString(),
-			'Host': new URL(args.url).hostname,
-		}, args.additionalHeaders),
-	};
-
-	const result = signToRequest(request, args.key, ['(request-target)', 'date', 'host', 'accept']);
-
-	return {
-		request,
-		signingString: result.signingString,
-		signature: result.signature,
-		signatureHeader: result.signatureHeader,
-	};
-}
-
-function signToRequest(request: Request, key: PrivateKey, includeHeaders: string[]) {
-	const signingString = genSigningString(request, includeHeaders);
-	const signature = crypto.sign('sha256', Buffer.from(signingString), key.privateKeyPem).toString('base64');
-	const signatureHeader = `keyId="${key.keyId}",algorithm="rsa-sha256",headers="${includeHeaders.join(' ')}",signature="${signature}"`;
-
-	request.headers = objectAssignWithLcKey(request.headers, {
-		Signature: signatureHeader,
-	});
-
-	return {
-		request,
-		signingString,
-		signature,
-		signatureHeader,
-	};
-}
-
-function genSigningString(request: Request, includeHeaders: string[]) {
-	request.headers = lcObjectKey(request.headers);
-
-	const results: string[] = [];
-
-	for (const key of includeHeaders.map(x => x.toLowerCase())) {
-		if (key === '(request-target)') {
-			results.push(`(request-target): ${request.method.toLowerCase()} ${new URL(request.url).pathname}`);
-		} else {
-			results.push(`${key}: ${request.headers[key]}`);
-		}
-	}
-
-	return results.join('\n');
-}
-
-function lcObjectKey(src: Record<string, string>) {
-	const dst: Record<string, string> = {};
-	for (const key of Object.keys(src).filter(x => x !== '__proto__' && typeof src[x] === 'string')) dst[key.toLowerCase()] = src[key];
-	return dst;
-}
-
-function objectAssignWithLcKey(a: Record<string, string>, b: Record<string, string>) {
-	return Object.assign(lcObjectKey(a), lcObjectKey(b));
-}
diff --git a/packages/backend/src/remote/activitypub/audience.ts b/packages/backend/src/remote/activitypub/audience.ts
deleted file mode 100644
index 846ccf9c00..0000000000
--- a/packages/backend/src/remote/activitypub/audience.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { ApObject, getApIds } from './type.js';
-import Resolver from './resolver.js';
-import { resolvePerson } from './models/person.js';
-import { unique, concat } from '@/prelude/array.js';
-import promiseLimit from 'promise-limit';
-import { User, CacheableRemoteUser, CacheableUser } from '@/models/entities/user.js';
-
-type Visibility = 'public' | 'home' | 'followers' | 'specified';
-
-type AudienceInfo = {
-	visibility: Visibility,
-	mentionedUsers: CacheableUser[],
-	visibleUsers: CacheableUser[],
-};
-
-export async function parseAudience(actor: CacheableRemoteUser, to?: ApObject, cc?: ApObject, resolver?: Resolver): Promise<AudienceInfo> {
-	const toGroups = groupingAudience(getApIds(to), actor);
-	const ccGroups = groupingAudience(getApIds(cc), actor);
-
-	const others = unique(concat([toGroups.other, ccGroups.other]));
-
-	const limit = promiseLimit<CacheableUser | null>(2);
-	const mentionedUsers = (await Promise.all(
-		others.map(id => limit(() => resolvePerson(id, resolver).catch(() => null)))
-	)).filter((x): x is CacheableUser => x != null);
-
-	if (toGroups.public.length > 0) {
-		return {
-			visibility: 'public',
-			mentionedUsers,
-			visibleUsers: [],
-		};
-	}
-
-	if (ccGroups.public.length > 0) {
-		return {
-			visibility: 'home',
-			mentionedUsers,
-			visibleUsers: [],
-		};
-	}
-
-	if (toGroups.followers.length > 0) {
-		return {
-			visibility: 'followers',
-			mentionedUsers,
-			visibleUsers: [],
-		};
-	}
-
-	return {
-		visibility: 'specified',
-		mentionedUsers,
-		visibleUsers: mentionedUsers,
-	};
-}
-
-function groupingAudience(ids: string[], actor: CacheableRemoteUser) {
-	const groups = {
-		public: [] as string[],
-		followers: [] as string[],
-		other: [] as string[],
-	};
-
-	for (const id of ids) {
-		if (isPublic(id)) {
-			groups.public.push(id);
-		} else if (isFollowers(id, actor)) {
-			groups.followers.push(id);
-		} else {
-			groups.other.push(id);
-		}
-	}
-
-	groups.other = unique(groups.other);
-
-	return groups;
-}
-
-function isPublic(id: string) {
-	return [
-		'https://www.w3.org/ns/activitystreams#Public',
-		'as#Public',
-		'Public',
-	].includes(id);
-}
-
-function isFollowers(id: string, actor: CacheableRemoteUser) {
-	return (
-		id === (actor.followersUri || `${actor.uri}/followers`)
-	);
-}
diff --git a/packages/backend/src/remote/activitypub/db-resolver.ts b/packages/backend/src/remote/activitypub/db-resolver.ts
deleted file mode 100644
index 1a02f675ca..0000000000
--- a/packages/backend/src/remote/activitypub/db-resolver.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import escapeRegexp from 'escape-regexp';
-import config from '@/config/index.js';
-import { Note } from '@/models/entities/note.js';
-import { User, IRemoteUser, CacheableRemoteUser, CacheableUser } from '@/models/entities/user.js';
-import { UserPublickey } from '@/models/entities/user-publickey.js';
-import { MessagingMessage } from '@/models/entities/messaging-message.js';
-import { Notes, Users, UserPublickeys, MessagingMessages } from '@/models/index.js';
-import { Cache } from '@/misc/cache.js';
-import { uriPersonCache, userByIdCache } from '@/services/user-cache.js';
-import { IObject, getApId } from './type.js';
-import { resolvePerson } from './models/person.js';
-
-const publicKeyCache = new Cache<UserPublickey | null>(Infinity);
-const publicKeyByUserIdCache = new Cache<UserPublickey | null>(Infinity);
-
-export type UriParseResult = {
-	/** wether the URI was generated by us */
-	local: true;
-	/** id in DB */
-	id: string;
-	/** hint of type, e.g. "notes", "users" */
-	type: string;
-	/** any remaining text after type and id, not including the slash after id. undefined if empty */
-	rest?: string;
-} | {
-	/** wether the URI was generated by us */
-	local: false;
-	/** uri in DB */
-	uri: string;
-};
-
-export function parseUri(value: string | IObject): UriParseResult {
-	const uri = getApId(value);
-
-	// the host part of a URL is case insensitive, so use the 'i' flag.
-	const localRegex = new RegExp('^' + escapeRegexp(config.url) + '/(\\w+)/(\\w+)(?:\/(.+))?', 'i');
-	const matchLocal = uri.match(localRegex);
-
-	if (matchLocal) {
-		return {
-			local: true,
-			type: matchLocal[1],
-			id: matchLocal[2],
-			rest: matchLocal[3],
-		};
-	} else {
-		return {
-			local: false,
-			uri,
-		};
-	}
-}
-
-export default class DbResolver {
-	constructor() {
-	}
-
-	/**
-	 * AP Note => Misskey Note in DB
-	 */
-	public async getNoteFromApId(value: string | IObject): Promise<Note | null> {
-		const parsed = parseUri(value);
-
-		if (parsed.local) {
-			if (parsed.type !== 'notes') return null;
-
-			return await Notes.findOneBy({
-				id: parsed.id,
-			});
-		} else {
-			return await Notes.findOneBy({
-				uri: parsed.uri,
-			});
-		}
-	}
-
-	public async getMessageFromApId(value: string | IObject): Promise<MessagingMessage | null> {
-		const parsed = parseUri(value);
-
-		if (parsed.local) {
-			if (parsed.type !== 'notes') return null;
-
-			return await MessagingMessages.findOneBy({
-				id: parsed.id,
-			});
-		} else {
-			return await MessagingMessages.findOneBy({
-				uri: parsed.uri,
-			});
-		}
-	}
-
-	/**
-	 * AP Person => Misskey User in DB
-	 */
-	public async getUserFromApId(value: string | IObject): Promise<CacheableUser | null> {
-		const parsed = parseUri(value);
-
-		if (parsed.local) {
-			if (parsed.type !== 'users') return null;
-
-			return await userByIdCache.fetchMaybe(parsed.id, () => Users.findOneBy({
-				id: parsed.id,
-			}).then(x => x ?? undefined)) ?? null;
-		} else {
-			return await uriPersonCache.fetch(parsed.uri, () => Users.findOneBy({
-				uri: parsed.uri,
-			}));
-		}
-	}
-
-	/**
-	 * AP KeyId => Misskey User and Key
-	 */
-	public async getAuthUserFromKeyId(keyId: string): Promise<{
-		user: CacheableRemoteUser;
-		key: UserPublickey;
-	} | null> {
-		const key = await publicKeyCache.fetch(keyId, async () => {
-			const key = await UserPublickeys.findOneBy({
-				keyId,
-			});
-	
-			if (key == null) return null;
-
-			return key;
-		}, key => key != null);
-
-		if (key == null) return null;
-
-		return {
-			user: await userByIdCache.fetch(key.userId, () => Users.findOneByOrFail({ id: key.userId })) as CacheableRemoteUser,
-			key,
-		};
-	}
-
-	/**
-	 * AP Actor id => Misskey User and Key
-	 */
-	public async getAuthUserFromApId(uri: string): Promise<{
-		user: CacheableRemoteUser;
-		key: UserPublickey | null;
-	} | null> {
-		const user = await resolvePerson(uri) as CacheableRemoteUser;
-
-		if (user == null) return null;
-
-		const key = await publicKeyByUserIdCache.fetch(user.id, () => UserPublickeys.findOneBy({ userId: user.id }), v => v != null); 
-
-		return {
-			user,
-			key,
-		};
-	}
-}
diff --git a/packages/backend/src/remote/activitypub/deliver-manager.ts b/packages/backend/src/remote/activitypub/deliver-manager.ts
deleted file mode 100644
index 4c1999e4cb..0000000000
--- a/packages/backend/src/remote/activitypub/deliver-manager.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-import { Users, Followings } from '@/models/index.js';
-import { ILocalUser, IRemoteUser, User } from '@/models/entities/user.js';
-import { deliver } from '@/queue/index.js';
-import { IsNull, Not } from 'typeorm';
-
-//#region types
-interface IRecipe {
-	type: string;
-}
-
-interface IFollowersRecipe extends IRecipe {
-	type: 'Followers';
-}
-
-interface IDirectRecipe extends IRecipe {
-	type: 'Direct';
-	to: IRemoteUser;
-}
-
-const isFollowers = (recipe: any): recipe is IFollowersRecipe =>
-	recipe.type === 'Followers';
-
-const isDirect = (recipe: any): recipe is IDirectRecipe =>
-	recipe.type === 'Direct';
-//#endregion
-
-export default class DeliverManager {
-	private actor: { id: User['id']; host: null; };
-	private activity: any;
-	private recipes: IRecipe[] = [];
-
-	/**
-	 * Constructor
-	 * @param actor Actor
-	 * @param activity Activity to deliver
-	 */
-	constructor(actor: { id: User['id']; host: null; }, activity: any) {
-		this.actor = actor;
-		this.activity = activity;
-	}
-
-	/**
-	 * Add recipe for followers deliver
-	 */
-	public addFollowersRecipe() {
-		const deliver = {
-			type: 'Followers',
-		} as IFollowersRecipe;
-
-		this.addRecipe(deliver);
-	}
-
-	/**
-	 * Add recipe for direct deliver
-	 * @param to To
-	 */
-	public addDirectRecipe(to: IRemoteUser) {
-		const recipe = {
-			type: 'Direct',
-			to,
-		} as IDirectRecipe;
-
-		this.addRecipe(recipe);
-	}
-
-	/**
-	 * Add recipe
-	 * @param recipe Recipe
-	 */
-	public addRecipe(recipe: IRecipe) {
-		this.recipes.push(recipe);
-	}
-
-	/**
-	 * Execute delivers
-	 */
-	public async execute() {
-		if (!Users.isLocalUser(this.actor)) return;
-
-		const inboxes = new Set<string>();
-
-		/*
-		build inbox list
-
-		Process follower recipes first to avoid duplication when processing
-		direct recipes later.
-		*/
-		if (this.recipes.some(r => isFollowers(r))) {
-			// followers deliver
-			// TODO: SELECT DISTINCT ON ("followerSharedInbox") "followerSharedInbox" みたいな問い合わせにすればよりパフォーマンス向上できそう
-			// ただ、sharedInboxがnullなリモートユーザーも稀におり、その対応ができなさそう？
-			const followers = await Followings.find({
-				where: {
-					followeeId: this.actor.id,
-					followerHost: Not(IsNull()),
-				},
-				select: {
-					followerSharedInbox: true,
-					followerInbox: true,
-				},
-			}) as {
-				followerSharedInbox: string | null;
-				followerInbox: string;
-			}[];
-
-			for (const following of followers) {
-				const inbox = following.followerSharedInbox || following.followerInbox;
-				inboxes.add(inbox);
-			}
-		}
-
-		this.recipes.filter((recipe): recipe is IDirectRecipe =>
-			// followers recipes have already been processed
-			isDirect(recipe)
-			// check that shared inbox has not been added yet
-			&& !(recipe.to.sharedInbox && inboxes.has(recipe.to.sharedInbox))
-			// check that they actually have an inbox
-			&& recipe.to.inbox != null,
-		)
-		.forEach(recipe => inboxes.add(recipe.to.inbox!));
-
-		// deliver
-		for (const inbox of inboxes) {
-			deliver(this.actor, this.activity, inbox);
-		}
-	}
-}
-
-//#region Utilities
-/**
- * Deliver activity to followers
- * @param activity Activity
- * @param from Followee
- */
-export async function deliverToFollowers(actor: { id: ILocalUser['id']; host: null; }, activity: any) {
-	const manager = new DeliverManager(actor, activity);
-	manager.addFollowersRecipe();
-	await manager.execute();
-}
-
-/**
- * Deliver activity to user
- * @param activity Activity
- * @param to Target user
- */
-export async function deliverToUser(actor: { id: ILocalUser['id']; host: null; }, activity: any, to: IRemoteUser) {
-	const manager = new DeliverManager(actor, activity);
-	manager.addDirectRecipe(to);
-	await manager.execute();
-}
-//#endregion
diff --git a/packages/backend/src/remote/activitypub/kernel/accept/follow.ts b/packages/backend/src/remote/activitypub/kernel/accept/follow.ts
deleted file mode 100644
index 4350ef1333..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/accept/follow.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import accept from '@/services/following/requests/accept.js';
-import { IFollow } from '../../type.js';
-import DbResolver from '../../db-resolver.js';
-import { relayAccepted } from '@/services/relay.js';
-
-export default async (actor: CacheableRemoteUser, activity: IFollow): Promise<string> => {
-	// ※ activityはこっちから投げたフォローリクエストなので、activity.actorは存在するローカルユーザーである必要がある
-
-	const dbResolver = new DbResolver();
-	const follower = await dbResolver.getUserFromApId(activity.actor);
-
-	if (follower == null) {
-		return `skip: follower not found`;
-	}
-
-	if (follower.host != null) {
-		return `skip: follower is not a local user`;
-	}
-
-	// relay
-	const match = activity.id?.match(/follow-relay\/(\w+)/);
-	if (match) {
-		return await relayAccepted(match[1]);
-	}
-
-	await accept(actor, follower);
-	return `ok`;
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/accept/index.ts b/packages/backend/src/remote/activitypub/kernel/accept/index.ts
deleted file mode 100644
index 78ef75ade3..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/accept/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import Resolver from '../../resolver.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import acceptFollow from './follow.js';
-import { IAccept, isFollow, getApType } from '../../type.js';
-import { apLogger } from '../../logger.js';
-
-const logger = apLogger;
-
-export default async (actor: CacheableRemoteUser, activity: IAccept): Promise<string> => {
-	const uri = activity.id || activity;
-
-	logger.info(`Accept: ${uri}`);
-
-	const resolver = new Resolver();
-
-	const object = await resolver.resolve(activity.object).catch(e => {
-		logger.error(`Resolution failed: ${e}`);
-		throw e;
-	});
-
-	if (isFollow(object)) return await acceptFollow(actor, object);
-
-	return `skip: Unknown Accept type: ${getApType(object)}`;
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/add/index.ts b/packages/backend/src/remote/activitypub/kernel/add/index.ts
deleted file mode 100644
index c813414f93..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/add/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { IAdd } from '../../type.js';
-import { resolveNote } from '../../models/note.js';
-import { addPinned } from '@/services/i/pin.js';
-
-export default async (actor: CacheableRemoteUser, activity: IAdd): Promise<void> => {
-	if ('actor' in activity && actor.uri !== activity.actor) {
-		throw new Error('invalid actor');
-	}
-
-	if (activity.target == null) {
-		throw new Error('target is null');
-	}
-
-	if (activity.target === actor.featured) {
-		const note = await resolveNote(activity.object);
-		if (note == null) throw new Error('note not found');
-		await addPinned(actor, note.id);
-		return;
-	}
-
-	throw new Error(`unknown target: ${activity.target}`);
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/announce/index.ts b/packages/backend/src/remote/activitypub/kernel/announce/index.ts
deleted file mode 100644
index ae7e507c99..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/announce/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import Resolver from '../../resolver.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import announceNote from './note.js';
-import { IAnnounce, getApId } from '../../type.js';
-import { apLogger } from '../../logger.js';
-
-const logger = apLogger;
-
-export default async (actor: CacheableRemoteUser, activity: IAnnounce): Promise<void> => {
-	const uri = getApId(activity);
-
-	logger.info(`Announce: ${uri}`);
-
-	const resolver = new Resolver();
-
-	const targetUri = getApId(activity.object);
-
-	announceNote(resolver, actor, activity, targetUri);
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/announce/note.ts b/packages/backend/src/remote/activitypub/kernel/announce/note.ts
deleted file mode 100644
index 759cb4ae83..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/announce/note.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import Resolver from '../../resolver.js';
-import post from '@/services/note/create.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { IAnnounce, getApId } from '../../type.js';
-import { fetchNote, resolveNote } from '../../models/note.js';
-import { apLogger } from '../../logger.js';
-import { extractDbHost } from '@/misc/convert-host.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { getApLock } from '@/misc/app-lock.js';
-import { parseAudience } from '../../audience.js';
-import { StatusError } from '@/misc/fetch.js';
-import { Notes } from '@/models/index.js';
-
-const logger = apLogger;
-
-/**
- * アナウンスアクティビティを捌きます
- */
-export default async function(resolver: Resolver, actor: CacheableRemoteUser, activity: IAnnounce, targetUri: string): Promise<void> {
-	const uri = getApId(activity);
-
-	if (actor.isSuspended) {
-		return;
-	}
-
-	// アナウンス先をブロックしてたら中断
-	const meta = await fetchMeta();
-	if (meta.blockedHosts.includes(extractDbHost(uri))) return;
-
-	const unlock = await getApLock(uri);
-
-	try {
-		// 既に同じURIを持つものが登録されていないかチェック
-		const exist = await fetchNote(uri);
-		if (exist) {
-			return;
-		}
-
-		// Announce対象をresolve
-		let renote;
-		try {
-			renote = await resolveNote(targetUri);
-		} catch (e) {
-			// 対象が4xxならスキップ
-			if (e instanceof StatusError) {
-				if (e.isClientError) {
-					logger.warn(`Ignored announce target ${targetUri} - ${e.statusCode}`);
-					return;
-				}
-
-				logger.warn(`Error in announce target ${targetUri} - ${e.statusCode || e}`);
-			}
-			throw e;
-		}
-
-		if (!await Notes.isVisibleForMe(renote, actor.id)) return 'skip: invalid actor for this activity';
-
-		logger.info(`Creating the (Re)Note: ${uri}`);
-
-		const activityAudience = await parseAudience(actor, activity.to, activity.cc);
-
-		await post(actor, {
-			createdAt: activity.published ? new Date(activity.published) : null,
-			renote,
-			visibility: activityAudience.visibility,
-			visibleUsers: activityAudience.visibleUsers,
-			uri,
-		});
-	} finally {
-		unlock();
-	}
-}
diff --git a/packages/backend/src/remote/activitypub/kernel/block/index.ts b/packages/backend/src/remote/activitypub/kernel/block/index.ts
deleted file mode 100644
index 5e230ad7b7..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/block/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { IBlock } from '../../type.js';
-import block from '@/services/blocking/create.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import DbResolver from '../../db-resolver.js';
-import { Users } from '@/models/index.js';
-
-export default async (actor: CacheableRemoteUser, activity: IBlock): Promise<string> => {
-	// ※ activity.objectにブロック対象があり、それは存在するローカルユーザーのはず
-
-	const dbResolver = new DbResolver();
-	const blockee = await dbResolver.getUserFromApId(activity.object);
-
-	if (blockee == null) {
-		return `skip: blockee not found`;
-	}
-
-	if (blockee.host != null) {
-		return `skip: ブロックしようとしているユーザーはローカルユーザーではありません`;
-	}
-
-	await block(await Users.findOneByOrFail({ id: actor.id }), await Users.findOneByOrFail({ id: blockee.id }));
-	return `ok`;
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/create/index.ts b/packages/backend/src/remote/activitypub/kernel/create/index.ts
deleted file mode 100644
index c253f9f667..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/create/index.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import Resolver from '../../resolver.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import createNote from './note.js';
-import { ICreate, getApId, isPost, getApType } from '../../type.js';
-import { apLogger } from '../../logger.js';
-import { toArray, concat, unique } from '@/prelude/array.js';
-
-const logger = apLogger;
-
-export default async (actor: CacheableRemoteUser, activity: ICreate): Promise<void> => {
-	const uri = getApId(activity);
-
-	logger.info(`Create: ${uri}`);
-
-	// copy audiences between activity <=> object.
-	if (typeof activity.object === 'object') {
-		const to = unique(concat([toArray(activity.to), toArray(activity.object.to)]));
-		const cc = unique(concat([toArray(activity.cc), toArray(activity.object.cc)]));
-
-		activity.to = to;
-		activity.cc = cc;
-		activity.object.to = to;
-		activity.object.cc = cc;
-	}
-
-	// If there is no attributedTo, use Activity actor.
-	if (typeof activity.object === 'object' && !activity.object.attributedTo) {
-		activity.object.attributedTo = activity.actor;
-	}
-
-	const resolver = new Resolver();
-
-	const object = await resolver.resolve(activity.object).catch(e => {
-		logger.error(`Resolution failed: ${e}`);
-		throw e;
-	});
-
-	if (isPost(object)) {
-		createNote(resolver, actor, object, false, activity);
-	} else {
-		logger.warn(`Unknown type: ${getApType(object)}`);
-	}
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/create/note.ts b/packages/backend/src/remote/activitypub/kernel/create/note.ts
deleted file mode 100644
index f8dabe06e2..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/create/note.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import Resolver from '../../resolver.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { createNote, fetchNote } from '../../models/note.js';
-import { getApId, IObject, ICreate } from '../../type.js';
-import { getApLock } from '@/misc/app-lock.js';
-import { extractDbHost } from '@/misc/convert-host.js';
-import { StatusError } from '@/misc/fetch.js';
-
-/**
- * 投稿作成アクティビティを捌きます
- */
-export default async function(resolver: Resolver, actor: CacheableRemoteUser, note: IObject, silent = false, activity?: ICreate): Promise<string> {
-	const uri = getApId(note);
-
-	if (typeof note === 'object') {
-		if (actor.uri !== note.attributedTo) {
-			return `skip: actor.uri !== note.attributedTo`;
-		}
-
-		if (typeof note.id === 'string') {
-			if (extractDbHost(actor.uri) !== extractDbHost(note.id)) {
-				return `skip: host in actor.uri !== note.id`;
-			}
-		}
-	}
-
-	const unlock = await getApLock(uri);
-
-	try {
-		const exist = await fetchNote(note);
-		if (exist) return 'skip: note exists';
-
-		await createNote(note, resolver, silent);
-		return 'ok';
-	} catch (e) {
-		if (e instanceof StatusError && e.isClientError) {
-			return `skip ${e.statusCode}`;
-		} else {
-			throw e;
-		}
-	} finally {
-		unlock();
-	}
-}
diff --git a/packages/backend/src/remote/activitypub/kernel/delete/actor.ts b/packages/backend/src/remote/activitypub/kernel/delete/actor.ts
deleted file mode 100644
index 1f94df033d..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/delete/actor.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { apLogger } from '../../logger.js';
-import { createDeleteAccountJob } from '@/queue/index.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { Users } from '@/models/index.js';
-
-const logger = apLogger;
-
-export async function deleteActor(actor: CacheableRemoteUser, uri: string): Promise<string> {
-	logger.info(`Deleting the Actor: ${uri}`);
-
-	if (actor.uri !== uri) {
-		return `skip: delete actor ${actor.uri} !== ${uri}`;
-	}
-
-	const user = await Users.findOneByOrFail({ id: actor.id });
-	if (user.isDeleted) {
-		logger.info(`skip: already deleted`);
-	}
-
-	const job = await createDeleteAccountJob(actor);
-
-	await Users.update(actor.id, {
-		isDeleted: true,
-	});
-
-	return `ok: queued ${job.name} ${job.id}`;
-}
diff --git a/packages/backend/src/remote/activitypub/kernel/delete/index.ts b/packages/backend/src/remote/activitypub/kernel/delete/index.ts
deleted file mode 100644
index c7064f553b..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/delete/index.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import deleteNote from './note.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { IDelete, getApId, isTombstone, IObject, validPost, validActor } from '../../type.js';
-import { toSingle } from '@/prelude/array.js';
-import { deleteActor } from './actor.js';
-
-/**
- * 削除アクティビティを捌きます
- */
-export default async (actor: CacheableRemoteUser, activity: IDelete): Promise<string> => {
-	if ('actor' in activity && actor.uri !== activity.actor) {
-		throw new Error('invalid actor');
-	}
-
-	// 削除対象objectのtype
-	let formerType: string | undefined;
-
-	if (typeof activity.object === 'string') {
-		// typeが不明だけど、どうせ消えてるのでremote resolveしない
-		formerType = undefined;
-	} else {
-		const object = activity.object as IObject;
-		if (isTombstone(object)) {
-			formerType = toSingle(object.formerType);
-		} else {
-			formerType = toSingle(object.type);
-		}
-	}
-
-	const uri = getApId(activity.object);
-
-	// type不明でもactorとobjectが同じならばそれはPersonに違いない
-	if (!formerType && actor.uri === uri) {
-		formerType = 'Person';
-	}
-
-	// それでもなかったらおそらくNote
-	if (!formerType) {
-		formerType = 'Note';
-	}
-
-	if (validPost.includes(formerType)) {
-		return await deleteNote(actor, uri);
-	} else if (validActor.includes(formerType)) {
-		return await deleteActor(actor, uri);
-	} else {
-		return `Unknown type ${formerType}`;
-	}
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/delete/note.ts b/packages/backend/src/remote/activitypub/kernel/delete/note.ts
deleted file mode 100644
index 1f44c35562..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/delete/note.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import deleteNode from '@/services/note/delete.js';
-import { apLogger } from '../../logger.js';
-import DbResolver from '../../db-resolver.js';
-import { getApLock } from '@/misc/app-lock.js';
-import { deleteMessage } from '@/services/messages/delete.js';
-
-const logger = apLogger;
-
-export default async function(actor: CacheableRemoteUser, uri: string): Promise<string> {
-	logger.info(`Deleting the Note: ${uri}`);
-
-	const unlock = await getApLock(uri);
-
-	try {
-		const dbResolver = new DbResolver();
-		const note = await dbResolver.getNoteFromApId(uri);
-
-		if (note == null) {
-			const message = await dbResolver.getMessageFromApId(uri);
-			if (message == null) return 'message not found';
-
-			if (message.userId !== actor.id) {
-				return '投稿を削除しようとしているユーザーは投稿の作成者ではありません';
-			}
-
-			await deleteMessage(message);
-
-			return 'ok: message deleted';
-		}
-
-		if (note.userId !== actor.id) {
-			return '投稿を削除しようとしているユーザーは投稿の作成者ではありません';
-		}
-
-		await deleteNode(actor, note);
-		return 'ok: note deleted';
-	} finally {
-		unlock();
-	}
-}
diff --git a/packages/backend/src/remote/activitypub/kernel/flag/index.ts b/packages/backend/src/remote/activitypub/kernel/flag/index.ts
deleted file mode 100644
index aa2f1f5362..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/flag/index.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import config from '@/config/index.js';
-import { IFlag, getApIds } from '../../type.js';
-import { AbuseUserReports, Users } from '@/models/index.js';
-import { In } from 'typeorm';
-import { genId } from '@/misc/gen-id.js';
-
-export default async (actor: CacheableRemoteUser, activity: IFlag): Promise<string> => {
-	// objectは `(User|Note) | (User|Note)[]` だけど、全パターンDBスキーマと対応させられないので
-	// 対象ユーザーは一番最初のユーザー として あとはコメントとして格納する
-	const uris = getApIds(activity.object);
-
-	const userIds = uris.filter(uri => uri.startsWith(config.url + '/users/')).map(uri => uri.split('/').pop()!);
-	const users = await Users.findBy({
-		id: In(userIds),
-	});
-	if (users.length < 1) return `skip`;
-
-	await AbuseUserReports.insert({
-		id: genId(),
-		createdAt: new Date(),
-		targetUserId: users[0].id,
-		targetUserHost: users[0].host,
-		reporterId: actor.id,
-		reporterHost: actor.host,
-		comment: `${activity.content}\n${JSON.stringify(uris, null, 2)}`,
-	});
-
-	return `ok`;
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/follow.ts b/packages/backend/src/remote/activitypub/kernel/follow.ts
deleted file mode 100644
index a9e92fa229..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/follow.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import follow from '@/services/following/create.js';
-import { IFollow } from '../type.js';
-import DbResolver from '../db-resolver.js';
-
-export default async (actor: CacheableRemoteUser, activity: IFollow): Promise<string> => {
-	const dbResolver = new DbResolver();
-	const followee = await dbResolver.getUserFromApId(activity.object);
-
-	if (followee == null) {
-		return `skip: followee not found`;
-	}
-
-	if (followee.host != null) {
-		return `skip: フォローしようとしているユーザーはローカルユーザーではありません`;
-	}
-
-	await follow(actor, followee, activity.id);
-	return `ok`;
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/index.ts b/packages/backend/src/remote/activitypub/kernel/index.ts
deleted file mode 100644
index 254a121605..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/index.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { IObject, isCreate, isDelete, isUpdate, isRead, isFollow, isAccept, isReject, isAdd, isRemove, isAnnounce, isLike, isUndo, isBlock, isCollectionOrOrderedCollection, isCollection, isFlag } from '../type.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import create from './create/index.js';
-import performDeleteActivity from './delete/index.js';
-import performUpdateActivity from './update/index.js';
-import { performReadActivity } from './read.js';
-import follow from './follow.js';
-import undo from './undo/index.js';
-import like from './like.js';
-import announce from './announce/index.js';
-import accept from './accept/index.js';
-import reject from './reject/index.js';
-import add from './add/index.js';
-import remove from './remove/index.js';
-import block from './block/index.js';
-import flag from './flag/index.js';
-import { apLogger } from '../logger.js';
-import Resolver from '../resolver.js';
-import { toArray } from '@/prelude/array.js';
-import { Users } from '@/models/index.js';
-
-export async function performActivity(actor: CacheableRemoteUser, activity: IObject) {
-	if (isCollectionOrOrderedCollection(activity)) {
-		const resolver = new Resolver();
-		for (const item of toArray(isCollection(activity) ? activity.items : activity.orderedItems)) {
-			const act = await resolver.resolve(item);
-			try {
-				await performOneActivity(actor, act);
-			} catch (err) {
-				if (err instanceof Error || typeof err === 'string') {
-					apLogger.error(err);
-				}
-			}
-		}
-	} else {
-		await performOneActivity(actor, activity);
-	}
-}
-
-async function performOneActivity(actor: CacheableRemoteUser, activity: IObject): Promise<void> {
-	if (actor.isSuspended) return;
-
-	if (isCreate(activity)) {
-		await create(actor, activity);
-	} else if (isDelete(activity)) {
-		await performDeleteActivity(actor, activity);
-	} else if (isUpdate(activity)) {
-		await performUpdateActivity(actor, activity);
-	} else if (isRead(activity)) {
-		await performReadActivity(actor, activity);
-	} else if (isFollow(activity)) {
-		await follow(actor, activity);
-	} else if (isAccept(activity)) {
-		await accept(actor, activity);
-	} else if (isReject(activity)) {
-		await reject(actor, activity);
-	} else if (isAdd(activity)) {
-		await add(actor, activity).catch(err => apLogger.error(err));
-	} else if (isRemove(activity)) {
-		await remove(actor, activity).catch(err => apLogger.error(err));
-	} else if (isAnnounce(activity)) {
-		await announce(actor, activity);
-	} else if (isLike(activity)) {
-		await like(actor, activity);
-	} else if (isUndo(activity)) {
-		await undo(actor, activity);
-	} else if (isBlock(activity)) {
-		await block(actor, activity);
-	} else if (isFlag(activity)) {
-		await flag(actor, activity);
-	} else {
-		apLogger.warn(`unrecognized activity type: ${(activity as any).type}`);
-	}
-}
diff --git a/packages/backend/src/remote/activitypub/kernel/like.ts b/packages/backend/src/remote/activitypub/kernel/like.ts
deleted file mode 100644
index 2b65ff7383..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/like.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { ILike, getApId } from '../type.js';
-import create from '@/services/note/reaction/create.js';
-import { fetchNote, extractEmojis } from '../models/note.js';
-
-export default async (actor: CacheableRemoteUser, activity: ILike) => {
-	const targetUri = getApId(activity.object);
-
-	const note = await fetchNote(targetUri);
-	if (!note) return `skip: target note not found ${targetUri}`;
-
-	await extractEmojis(activity.tag || [], actor.host).catch(() => null);
-
-	return await create(actor, note, activity._misskey_reaction || activity.content || activity.name).catch(e => {
-		if (e.id === '51c42bb4-931a-456b-bff7-e5a8a70dd298') {
-			return 'skip: already reacted';
-		} else {
-			throw e;
-		}
-	}).then(() => 'ok');
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/read.ts b/packages/backend/src/remote/activitypub/kernel/read.ts
deleted file mode 100644
index f7b0bcecdf..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/read.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { IRead, getApId } from '../type.js';
-import { isSelfHost, extractDbHost } from '@/misc/convert-host.js';
-import { MessagingMessages } from '@/models/index.js';
-import { readUserMessagingMessage } from '../../../server/api/common/read-messaging-message.js';
-
-export const performReadActivity = async (actor: CacheableRemoteUser, activity: IRead): Promise<string> => {
-	const id = await getApId(activity.object);
-
-	if (!isSelfHost(extractDbHost(id))) {
-		return `skip: Read to foreign host (${id})`;
-	}
-
-	const messageId = id.split('/').pop();
-
-	const message = await MessagingMessages.findOneBy({ id: messageId });
-	if (message == null) {
-		return `skip: message not found`;
-	}
-
-	if (actor.id !== message.recipientId) {
-		return `skip: actor is not a message recipient`;
-	}
-
-	await readUserMessagingMessage(message.recipientId!, message.userId, [message.id]);
-	return `ok: mark as read (${message.userId} => ${message.recipientId} ${message.id})`;
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/reject/follow.ts b/packages/backend/src/remote/activitypub/kernel/reject/follow.ts
deleted file mode 100644
index 824ac69d70..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/reject/follow.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { remoteReject } from '@/services/following/reject.js';
-import { IFollow } from '../../type.js';
-import DbResolver from '../../db-resolver.js';
-import { relayRejected } from '@/services/relay.js';
-import { Users } from '@/models/index.js';
-
-export default async (actor: CacheableRemoteUser, activity: IFollow): Promise<string> => {
-	// ※ activityはこっちから投げたフォローリクエストなので、activity.actorは存在するローカルユーザーである必要がある
-
-	const dbResolver = new DbResolver();
-	const follower = await dbResolver.getUserFromApId(activity.actor);
-
-	if (follower == null) {
-		return `skip: follower not found`;
-	}
-
-	if (!Users.isLocalUser(follower)) {
-		return `skip: follower is not a local user`;
-	}
-
-	// relay
-	const match = activity.id?.match(/follow-relay\/(\w+)/);
-	if (match) {
-		return await relayRejected(match[1]);
-	}
-
-	await remoteReject(actor, follower);
-	return `ok`;
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/reject/index.ts b/packages/backend/src/remote/activitypub/kernel/reject/index.ts
deleted file mode 100644
index 00f08842f4..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/reject/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import Resolver from '../../resolver.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import rejectFollow from './follow.js';
-import { IReject, isFollow, getApType } from '../../type.js';
-import { apLogger } from '../../logger.js';
-
-const logger = apLogger;
-
-export default async (actor: CacheableRemoteUser, activity: IReject): Promise<string> => {
-	const uri = activity.id || activity;
-
-	logger.info(`Reject: ${uri}`);
-
-	const resolver = new Resolver();
-
-	const object = await resolver.resolve(activity.object).catch(e => {
-		logger.error(`Resolution failed: ${e}`);
-		throw e;
-	});
-
-	if (isFollow(object)) return await rejectFollow(actor, object);
-
-	return `skip: Unknown Reject type: ${getApType(object)}`;
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/remove/index.ts b/packages/backend/src/remote/activitypub/kernel/remove/index.ts
deleted file mode 100644
index 11a994a83b..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/remove/index.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { IRemove } from '../../type.js';
-import { resolveNote } from '../../models/note.js';
-import { removePinned } from '@/services/i/pin.js';
-
-export default async (actor: CacheableRemoteUser, activity: IRemove): Promise<void> => {
-	if ('actor' in activity && actor.uri !== activity.actor) {
-		throw new Error('invalid actor');
-	}
-
-	if (activity.target == null) {
-		throw new Error('target is null');
-	}
-
-	if (activity.target === actor.featured) {
-		const note = await resolveNote(activity.object);
-		if (note == null) throw new Error('note not found');
-		await removePinned(actor, note.id);
-		return;
-	}
-
-	throw new Error(`unknown target: ${activity.target}`);
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/undo/accept.ts b/packages/backend/src/remote/activitypub/kernel/undo/accept.ts
deleted file mode 100644
index a6e3929b0f..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/undo/accept.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import unfollow from '@/services/following/delete.js';
-import cancelRequest from '@/services/following/requests/cancel.js';
-import { IAccept } from '../../type.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { Followings } from '@/models/index.js';
-import DbResolver from '../../db-resolver.js';
-
-export default async (actor: CacheableRemoteUser, activity: IAccept): Promise<string> => {
-	const dbResolver = new DbResolver();
-
-	const follower = await dbResolver.getUserFromApId(activity.object);
-	if (follower == null) {
-		return `skip: follower not found`;
-	}
-
-	const following = await Followings.findOneBy({
-		followerId: follower.id,
-		followeeId: actor.id,
-	});
-
-	if (following) {
-		await unfollow(follower, actor);
-		return `ok: unfollowed`;
-	}
-
-	return `skip: フォローされていない`;
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/undo/announce.ts b/packages/backend/src/remote/activitypub/kernel/undo/announce.ts
deleted file mode 100644
index 417f39722f..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/undo/announce.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Notes } from '@/models/index.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { IAnnounce, getApId } from '../../type.js';
-import deleteNote from '@/services/note/delete.js';
-
-export const undoAnnounce = async (actor: CacheableRemoteUser, activity: IAnnounce): Promise<string> => {
-	const uri = getApId(activity);
-
-	const note = await Notes.findOneBy({
-		uri,
-		userId: actor.id,
-	});
-
-	if (!note) return 'skip: no such Announce';
-
-	await deleteNote(actor, note);
-	return 'ok: deleted';
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/undo/block.ts b/packages/backend/src/remote/activitypub/kernel/undo/block.ts
deleted file mode 100644
index 4ac6698578..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/undo/block.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { IBlock } from '../../type.js';
-import unblock from '@/services/blocking/delete.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import DbResolver from '../../db-resolver.js';
-import { Users } from '@/models/index.js';
-
-export default async (actor: CacheableRemoteUser, activity: IBlock): Promise<string> => {
-	const dbResolver = new DbResolver();
-	const blockee = await dbResolver.getUserFromApId(activity.object);
-
-	if (blockee == null) {
-		return `skip: blockee not found`;
-	}
-
-	if (blockee.host != null) {
-		return `skip: ブロック解除しようとしているユーザーはローカルユーザーではありません`;
-	}
-
-	await unblock(await Users.findOneByOrFail({ id: actor.id }), blockee);
-	return `ok`;
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/undo/follow.ts b/packages/backend/src/remote/activitypub/kernel/undo/follow.ts
deleted file mode 100644
index 6a43c1444a..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/undo/follow.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import unfollow from '@/services/following/delete.js';
-import cancelRequest from '@/services/following/requests/cancel.js';
-import { IFollow } from '../../type.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { FollowRequests, Followings } from '@/models/index.js';
-import DbResolver from '../../db-resolver.js';
-
-export default async (actor: CacheableRemoteUser, activity: IFollow): Promise<string> => {
-	const dbResolver = new DbResolver();
-
-	const followee = await dbResolver.getUserFromApId(activity.object);
-	if (followee == null) {
-		return `skip: followee not found`;
-	}
-
-	if (followee.host != null) {
-		return `skip: フォロー解除しようとしているユーザーはローカルユーザーではありません`;
-	}
-
-	const req = await FollowRequests.findOneBy({
-		followerId: actor.id,
-		followeeId: followee.id,
-	});
-
-	const following = await Followings.findOneBy({
-		followerId: actor.id,
-		followeeId: followee.id,
-	});
-
-	if (req) {
-		await cancelRequest(followee, actor);
-		return `ok: follow request canceled`;
-	}
-
-	if (following) {
-		await unfollow(actor, followee);
-		return `ok: unfollowed`;
-	}
-
-	return `skip: リクエストもフォローもされていない`;
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/undo/index.ts b/packages/backend/src/remote/activitypub/kernel/undo/index.ts
deleted file mode 100644
index 27d433eb33..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/undo/index.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { IUndo, isFollow, isBlock, isLike, isAnnounce, getApType, isAccept } from '../../type.js';
-import unfollow from './follow.js';
-import unblock from './block.js';
-import undoLike from './like.js';
-import undoAccept from './accept.js';
-import { undoAnnounce } from './announce.js';
-import Resolver from '../../resolver.js';
-import { apLogger } from '../../logger.js';
-
-const logger = apLogger;
-
-export default async (actor: CacheableRemoteUser, activity: IUndo): Promise<string> => {
-	if ('actor' in activity && actor.uri !== activity.actor) {
-		throw new Error('invalid actor');
-	}
-
-	const uri = activity.id || activity;
-
-	logger.info(`Undo: ${uri}`);
-
-	const resolver = new Resolver();
-
-	const object = await resolver.resolve(activity.object).catch(e => {
-		logger.error(`Resolution failed: ${e}`);
-		throw e;
-	});
-
-	if (isFollow(object)) return await unfollow(actor, object);
-	if (isBlock(object)) return await unblock(actor, object);
-	if (isLike(object)) return await undoLike(actor, object);
-	if (isAnnounce(object)) return await undoAnnounce(actor, object);
-	if (isAccept(object)) return await undoAccept(actor, object);
-
-	return `skip: unknown object type ${getApType(object)}`;
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/undo/like.ts b/packages/backend/src/remote/activitypub/kernel/undo/like.ts
deleted file mode 100644
index 01aeba1fb7..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/undo/like.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { ILike, getApId } from '../../type.js';
-import deleteReaction from '@/services/note/reaction/delete.js';
-import { fetchNote } from '../../models/note.js';
-
-/**
- * Process Undo.Like activity
- */
-export default async (actor: CacheableRemoteUser, activity: ILike) => {
-	const targetUri = getApId(activity.object);
-
-	const note = await fetchNote(targetUri);
-	if (!note) return `skip: target note not found ${targetUri}`;
-
-	await deleteReaction(actor, note).catch(e => {
-		if (e.id === '60527ec9-b4cb-4a88-a6bd-32d3ad26817d') return;
-		throw e;
-	});
-
-	return `ok`;
-};
diff --git a/packages/backend/src/remote/activitypub/kernel/update/index.ts b/packages/backend/src/remote/activitypub/kernel/update/index.ts
deleted file mode 100644
index 9e8a81bb39..0000000000
--- a/packages/backend/src/remote/activitypub/kernel/update/index.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { getApType, IUpdate, isActor } from '../../type.js';
-import { apLogger } from '../../logger.js';
-import { updateQuestion } from '../../models/question.js';
-import Resolver from '../../resolver.js';
-import { updatePerson } from '../../models/person.js';
-
-/**
- * Updateアクティビティを捌きます
- */
-export default async (actor: CacheableRemoteUser, activity: IUpdate): Promise<string> => {
-	if ('actor' in activity && actor.uri !== activity.actor) {
-		return `skip: invalid actor`;
-	}
-
-	apLogger.debug('Update');
-
-	const resolver = new Resolver();
-
-	const object = await resolver.resolve(activity.object).catch(e => {
-		apLogger.error(`Resolution failed: ${e}`);
-		throw e;
-	});
-
-	if (isActor(object)) {
-		await updatePerson(actor.uri!, resolver, object);
-		return `ok: Person updated`;
-	} else if (getApType(object) === 'Question') {
-		await updateQuestion(object).catch(e => console.log(e));
-		return `ok: Question updated`;
-	} else {
-		return `skip: Unknown type: ${getApType(object)}`;
-	}
-};
diff --git a/packages/backend/src/remote/activitypub/logger.ts b/packages/backend/src/remote/activitypub/logger.ts
deleted file mode 100644
index cab51b3bf5..0000000000
--- a/packages/backend/src/remote/activitypub/logger.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { remoteLogger } from '../logger.js';
-
-export const apLogger = remoteLogger.createSubLogger('ap', 'magenta');
diff --git a/packages/backend/src/remote/activitypub/misc/contexts.ts b/packages/backend/src/remote/activitypub/misc/contexts.ts
deleted file mode 100644
index aee0d3629c..0000000000
--- a/packages/backend/src/remote/activitypub/misc/contexts.ts
+++ /dev/null
@@ -1,526 +0,0 @@
-/* eslint:disable:quotemark indent */
-const id_v1 = {
-	'@context': {
-		'id': '@id',
-		'type': '@type',
-
-		'cred': 'https://w3id.org/credentials#',
-		'dc': 'http://purl.org/dc/terms/',
-		'identity': 'https://w3id.org/identity#',
-		'perm': 'https://w3id.org/permissions#',
-		'ps': 'https://w3id.org/payswarm#',
-		'rdf': 'http://www.w3.org/1999/02/22-rdf-syntax-ns#',
-		'rdfs': 'http://www.w3.org/2000/01/rdf-schema#',
-		'sec': 'https://w3id.org/security#',
-		'schema': 'http://schema.org/',
-		'xsd': 'http://www.w3.org/2001/XMLSchema#',
-
-		'Group': 'https://www.w3.org/ns/activitystreams#Group',
-
-		'claim': { '@id': 'cred:claim', '@type': '@id' },
-		'credential': { '@id': 'cred:credential', '@type': '@id' },
-		'issued': { '@id': 'cred:issued', '@type': 'xsd:dateTime' },
-		'issuer': { '@id': 'cred:issuer', '@type': '@id' },
-		'recipient': { '@id': 'cred:recipient', '@type': '@id' },
-		'Credential': 'cred:Credential',
-		'CryptographicKeyCredential': 'cred:CryptographicKeyCredential',
-
-		'about': { '@id': 'schema:about', '@type': '@id' },
-		'address': { '@id': 'schema:address', '@type': '@id' },
-		'addressCountry': 'schema:addressCountry',
-		'addressLocality': 'schema:addressLocality',
-		'addressRegion': 'schema:addressRegion',
-		'comment': 'rdfs:comment',
-		'created': { '@id': 'dc:created', '@type': 'xsd:dateTime' },
-		'creator': { '@id': 'dc:creator', '@type': '@id' },
-		'description': 'schema:description',
-		'email': 'schema:email',
-		'familyName': 'schema:familyName',
-		'givenName': 'schema:givenName',
-		'image': { '@id': 'schema:image', '@type': '@id' },
-		'label': 'rdfs:label',
-		'name': 'schema:name',
-		'postalCode': 'schema:postalCode',
-		'streetAddress': 'schema:streetAddress',
-		'title': 'dc:title',
-		'url': { '@id': 'schema:url', '@type': '@id' },
-		'Person': 'schema:Person',
-		'PostalAddress': 'schema:PostalAddress',
-		'Organization': 'schema:Organization',
-
-		'identityService': { '@id': 'identity:identityService', '@type': '@id' },
-		'idp': { '@id': 'identity:idp', '@type': '@id' },
-		'Identity': 'identity:Identity',
-
-		'paymentProcessor': 'ps:processor',
-		'preferences': { '@id': 'ps:preferences', '@type': '@vocab' },
-
-		'cipherAlgorithm': 'sec:cipherAlgorithm',
-		'cipherData': 'sec:cipherData',
-		'cipherKey': 'sec:cipherKey',
-		'digestAlgorithm': 'sec:digestAlgorithm',
-		'digestValue': 'sec:digestValue',
-		'domain': 'sec:domain',
-		'expires': { '@id': 'sec:expiration', '@type': 'xsd:dateTime' },
-		'initializationVector': 'sec:initializationVector',
-		'member': { '@id': 'schema:member', '@type': '@id' },
-		'memberOf': { '@id': 'schema:memberOf', '@type': '@id' },
-		'nonce': 'sec:nonce',
-		'normalizationAlgorithm': 'sec:normalizationAlgorithm',
-		'owner': { '@id': 'sec:owner', '@type': '@id' },
-		'password': 'sec:password',
-		'privateKey': { '@id': 'sec:privateKey', '@type': '@id' },
-		'privateKeyPem': 'sec:privateKeyPem',
-		'publicKey': { '@id': 'sec:publicKey', '@type': '@id' },
-		'publicKeyPem': 'sec:publicKeyPem',
-		'publicKeyService': { '@id': 'sec:publicKeyService', '@type': '@id' },
-		'revoked': { '@id': 'sec:revoked', '@type': 'xsd:dateTime' },
-		'signature': 'sec:signature',
-		'signatureAlgorithm': 'sec:signatureAlgorithm',
-		'signatureValue': 'sec:signatureValue',
-		'CryptographicKey': 'sec:Key',
-		'EncryptedMessage': 'sec:EncryptedMessage',
-		'GraphSignature2012': 'sec:GraphSignature2012',
-		'LinkedDataSignature2015': 'sec:LinkedDataSignature2015',
-
-		'accessControl': { '@id': 'perm:accessControl', '@type': '@id' },
-		'writePermission': { '@id': 'perm:writePermission', '@type': '@id' },
-	},
-};
-
-const security_v1 = {
-	'@context': {
-		'id': '@id',
-		'type': '@type',
-
-		'dc': 'http://purl.org/dc/terms/',
-		'sec': 'https://w3id.org/security#',
-		'xsd': 'http://www.w3.org/2001/XMLSchema#',
-
-		'EcdsaKoblitzSignature2016': 'sec:EcdsaKoblitzSignature2016',
-		'Ed25519Signature2018': 'sec:Ed25519Signature2018',
-		'EncryptedMessage': 'sec:EncryptedMessage',
-		'GraphSignature2012': 'sec:GraphSignature2012',
-		'LinkedDataSignature2015': 'sec:LinkedDataSignature2015',
-		'LinkedDataSignature2016': 'sec:LinkedDataSignature2016',
-		'CryptographicKey': 'sec:Key',
-
-		'authenticationTag': 'sec:authenticationTag',
-		'canonicalizationAlgorithm': 'sec:canonicalizationAlgorithm',
-		'cipherAlgorithm': 'sec:cipherAlgorithm',
-		'cipherData': 'sec:cipherData',
-		'cipherKey': 'sec:cipherKey',
-		'created': { '@id': 'dc:created', '@type': 'xsd:dateTime' },
-		'creator': { '@id': 'dc:creator', '@type': '@id' },
-		'digestAlgorithm': 'sec:digestAlgorithm',
-		'digestValue': 'sec:digestValue',
-		'domain': 'sec:domain',
-		'encryptionKey': 'sec:encryptionKey',
-		'expiration': { '@id': 'sec:expiration', '@type': 'xsd:dateTime' },
-		'expires': { '@id': 'sec:expiration', '@type': 'xsd:dateTime' },
-		'initializationVector': 'sec:initializationVector',
-		'iterationCount': 'sec:iterationCount',
-		'nonce': 'sec:nonce',
-		'normalizationAlgorithm': 'sec:normalizationAlgorithm',
-		'owner': { '@id': 'sec:owner', '@type': '@id' },
-		'password': 'sec:password',
-		'privateKey': { '@id': 'sec:privateKey', '@type': '@id' },
-		'privateKeyPem': 'sec:privateKeyPem',
-		'publicKey': { '@id': 'sec:publicKey', '@type': '@id' },
-		'publicKeyBase58': 'sec:publicKeyBase58',
-		'publicKeyPem': 'sec:publicKeyPem',
-		'publicKeyWif': 'sec:publicKeyWif',
-		'publicKeyService': { '@id': 'sec:publicKeyService', '@type': '@id' },
-		'revoked': { '@id': 'sec:revoked', '@type': 'xsd:dateTime' },
-		'salt': 'sec:salt',
-		'signature': 'sec:signature',
-		'signatureAlgorithm': 'sec:signingAlgorithm',
-		'signatureValue': 'sec:signatureValue',
-	},
-};
-
-const activitystreams = {
-	'@context': {
-		'@vocab': '_:',
-		'xsd': 'http://www.w3.org/2001/XMLSchema#',
-		'as': 'https://www.w3.org/ns/activitystreams#',
-		'ldp': 'http://www.w3.org/ns/ldp#',
-		'vcard': 'http://www.w3.org/2006/vcard/ns#',
-		'id': '@id',
-		'type': '@type',
-		'Accept': 'as:Accept',
-		'Activity': 'as:Activity',
-		'IntransitiveActivity': 'as:IntransitiveActivity',
-		'Add': 'as:Add',
-		'Announce': 'as:Announce',
-		'Application': 'as:Application',
-		'Arrive': 'as:Arrive',
-		'Article': 'as:Article',
-		'Audio': 'as:Audio',
-		'Block': 'as:Block',
-		'Collection': 'as:Collection',
-		'CollectionPage': 'as:CollectionPage',
-		'Relationship': 'as:Relationship',
-		'Create': 'as:Create',
-		'Delete': 'as:Delete',
-		'Dislike': 'as:Dislike',
-		'Document': 'as:Document',
-		'Event': 'as:Event',
-		'Follow': 'as:Follow',
-		'Flag': 'as:Flag',
-		'Group': 'as:Group',
-		'Ignore': 'as:Ignore',
-		'Image': 'as:Image',
-		'Invite': 'as:Invite',
-		'Join': 'as:Join',
-		'Leave': 'as:Leave',
-		'Like': 'as:Like',
-		'Link': 'as:Link',
-		'Mention': 'as:Mention',
-		'Note': 'as:Note',
-		'Object': 'as:Object',
-		'Offer': 'as:Offer',
-		'OrderedCollection': 'as:OrderedCollection',
-		'OrderedCollectionPage': 'as:OrderedCollectionPage',
-		'Organization': 'as:Organization',
-		'Page': 'as:Page',
-		'Person': 'as:Person',
-		'Place': 'as:Place',
-		'Profile': 'as:Profile',
-		'Question': 'as:Question',
-		'Reject': 'as:Reject',
-		'Remove': 'as:Remove',
-		'Service': 'as:Service',
-		'TentativeAccept': 'as:TentativeAccept',
-		'TentativeReject': 'as:TentativeReject',
-		'Tombstone': 'as:Tombstone',
-		'Undo': 'as:Undo',
-		'Update': 'as:Update',
-		'Video': 'as:Video',
-		'View': 'as:View',
-		'Listen': 'as:Listen',
-		'Read': 'as:Read',
-		'Move': 'as:Move',
-		'Travel': 'as:Travel',
-		'IsFollowing': 'as:IsFollowing',
-		'IsFollowedBy': 'as:IsFollowedBy',
-		'IsContact': 'as:IsContact',
-		'IsMember': 'as:IsMember',
-		'subject': {
-			'@id': 'as:subject',
-			'@type': '@id',
-		},
-		'relationship': {
-			'@id': 'as:relationship',
-			'@type': '@id',
-		},
-		'actor': {
-			'@id': 'as:actor',
-			'@type': '@id',
-		},
-		'attributedTo': {
-			'@id': 'as:attributedTo',
-			'@type': '@id',
-		},
-		'attachment': {
-			'@id': 'as:attachment',
-			'@type': '@id',
-		},
-		'bcc': {
-			'@id': 'as:bcc',
-			'@type': '@id',
-		},
-		'bto': {
-			'@id': 'as:bto',
-			'@type': '@id',
-		},
-		'cc': {
-			'@id': 'as:cc',
-			'@type': '@id',
-		},
-		'context': {
-			'@id': 'as:context',
-			'@type': '@id',
-		},
-		'current': {
-			'@id': 'as:current',
-			'@type': '@id',
-		},
-		'first': {
-			'@id': 'as:first',
-			'@type': '@id',
-		},
-		'generator': {
-			'@id': 'as:generator',
-			'@type': '@id',
-		},
-		'icon': {
-			'@id': 'as:icon',
-			'@type': '@id',
-		},
-		'image': {
-			'@id': 'as:image',
-			'@type': '@id',
-		},
-		'inReplyTo': {
-			'@id': 'as:inReplyTo',
-			'@type': '@id',
-		},
-		'items': {
-			'@id': 'as:items',
-			'@type': '@id',
-		},
-		'instrument': {
-			'@id': 'as:instrument',
-			'@type': '@id',
-		},
-		'orderedItems': {
-			'@id': 'as:items',
-			'@type': '@id',
-			'@container': '@list',
-		},
-		'last': {
-			'@id': 'as:last',
-			'@type': '@id',
-		},
-		'location': {
-			'@id': 'as:location',
-			'@type': '@id',
-		},
-		'next': {
-			'@id': 'as:next',
-			'@type': '@id',
-		},
-		'object': {
-			'@id': 'as:object',
-			'@type': '@id',
-		},
-		'oneOf': {
-			'@id': 'as:oneOf',
-			'@type': '@id',
-		},
-		'anyOf': {
-			'@id': 'as:anyOf',
-			'@type': '@id',
-		},
-		'closed': {
-			'@id': 'as:closed',
-			'@type': 'xsd:dateTime',
-		},
-		'origin': {
-			'@id': 'as:origin',
-			'@type': '@id',
-		},
-		'accuracy': {
-			'@id': 'as:accuracy',
-			'@type': 'xsd:float',
-		},
-		'prev': {
-			'@id': 'as:prev',
-			'@type': '@id',
-		},
-		'preview': {
-			'@id': 'as:preview',
-			'@type': '@id',
-		},
-		'replies': {
-			'@id': 'as:replies',
-			'@type': '@id',
-		},
-		'result': {
-			'@id': 'as:result',
-			'@type': '@id',
-		},
-		'audience': {
-			'@id': 'as:audience',
-			'@type': '@id',
-		},
-		'partOf': {
-			'@id': 'as:partOf',
-			'@type': '@id',
-		},
-		'tag': {
-			'@id': 'as:tag',
-			'@type': '@id',
-		},
-		'target': {
-			'@id': 'as:target',
-			'@type': '@id',
-		},
-		'to': {
-			'@id': 'as:to',
-			'@type': '@id',
-		},
-		'url': {
-			'@id': 'as:url',
-			'@type': '@id',
-		},
-		'altitude': {
-			'@id': 'as:altitude',
-			'@type': 'xsd:float',
-		},
-		'content': 'as:content',
-		'contentMap': {
-			'@id': 'as:content',
-			'@container': '@language',
-		},
-		'name': 'as:name',
-		'nameMap': {
-			'@id': 'as:name',
-			'@container': '@language',
-		},
-		'duration': {
-			'@id': 'as:duration',
-			'@type': 'xsd:duration',
-		},
-		'endTime': {
-			'@id': 'as:endTime',
-			'@type': 'xsd:dateTime',
-		},
-		'height': {
-			'@id': 'as:height',
-			'@type': 'xsd:nonNegativeInteger',
-		},
-		'href': {
-			'@id': 'as:href',
-			'@type': '@id',
-		},
-		'hreflang': 'as:hreflang',
-		'latitude': {
-			'@id': 'as:latitude',
-			'@type': 'xsd:float',
-		},
-		'longitude': {
-			'@id': 'as:longitude',
-			'@type': 'xsd:float',
-		},
-		'mediaType': 'as:mediaType',
-		'published': {
-			'@id': 'as:published',
-			'@type': 'xsd:dateTime',
-		},
-		'radius': {
-			'@id': 'as:radius',
-			'@type': 'xsd:float',
-		},
-		'rel': 'as:rel',
-		'startIndex': {
-			'@id': 'as:startIndex',
-			'@type': 'xsd:nonNegativeInteger',
-		},
-		'startTime': {
-			'@id': 'as:startTime',
-			'@type': 'xsd:dateTime',
-		},
-		'summary': 'as:summary',
-		'summaryMap': {
-			'@id': 'as:summary',
-			'@container': '@language',
-		},
-		'totalItems': {
-			'@id': 'as:totalItems',
-			'@type': 'xsd:nonNegativeInteger',
-		},
-		'units': 'as:units',
-		'updated': {
-			'@id': 'as:updated',
-			'@type': 'xsd:dateTime',
-		},
-		'width': {
-			'@id': 'as:width',
-			'@type': 'xsd:nonNegativeInteger',
-		},
-		'describes': {
-			'@id': 'as:describes',
-			'@type': '@id',
-		},
-		'formerType': {
-			'@id': 'as:formerType',
-			'@type': '@id',
-		},
-		'deleted': {
-			'@id': 'as:deleted',
-			'@type': 'xsd:dateTime',
-		},
-		'inbox': {
-			'@id': 'ldp:inbox',
-			'@type': '@id',
-		},
-		'outbox': {
-			'@id': 'as:outbox',
-			'@type': '@id',
-		},
-		'following': {
-			'@id': 'as:following',
-			'@type': '@id',
-		},
-		'followers': {
-			'@id': 'as:followers',
-			'@type': '@id',
-		},
-		'streams': {
-			'@id': 'as:streams',
-			'@type': '@id',
-		},
-		'preferredUsername': 'as:preferredUsername',
-		'endpoints': {
-			'@id': 'as:endpoints',
-			'@type': '@id',
-		},
-		'uploadMedia': {
-			'@id': 'as:uploadMedia',
-			'@type': '@id',
-		},
-		'proxyUrl': {
-			'@id': 'as:proxyUrl',
-			'@type': '@id',
-		},
-		'liked': {
-			'@id': 'as:liked',
-			'@type': '@id',
-		},
-		'oauthAuthorizationEndpoint': {
-			'@id': 'as:oauthAuthorizationEndpoint',
-			'@type': '@id',
-		},
-		'oauthTokenEndpoint': {
-			'@id': 'as:oauthTokenEndpoint',
-			'@type': '@id',
-		},
-		'provideClientKey': {
-			'@id': 'as:provideClientKey',
-			'@type': '@id',
-		},
-		'signClientKey': {
-			'@id': 'as:signClientKey',
-			'@type': '@id',
-		},
-		'sharedInbox': {
-			'@id': 'as:sharedInbox',
-			'@type': '@id',
-		},
-		'Public': {
-			'@id': 'as:Public',
-			'@type': '@id',
-		},
-		'source': 'as:source',
-		'likes': {
-			'@id': 'as:likes',
-			'@type': '@id',
-		},
-		'shares': {
-			'@id': 'as:shares',
-			'@type': '@id',
-		},
-		'alsoKnownAs': {
-			'@id': 'as:alsoKnownAs',
-			'@type': '@id',
-		},
-	},
-};
-
-export const CONTEXTS: Record<string, unknown> = {
-	'https://w3id.org/identity/v1': id_v1,
-	'https://w3id.org/security/v1': security_v1,
-	'https://www.w3.org/ns/activitystreams': activitystreams,
-};
diff --git a/packages/backend/src/remote/activitypub/misc/get-note-html.ts b/packages/backend/src/remote/activitypub/misc/get-note-html.ts
deleted file mode 100644
index 389039ebed..0000000000
--- a/packages/backend/src/remote/activitypub/misc/get-note-html.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as mfm from 'mfm-js';
-import { Note } from '@/models/entities/note.js';
-import { toHtml } from '../../../mfm/to-html.js';
-
-export default function(note: Note) {
-	if (!note.text) return '';
-	return toHtml(mfm.parse(note.text), JSON.parse(note.mentionedRemoteUsers));
-}
diff --git a/packages/backend/src/remote/activitypub/misc/html-to-mfm.ts b/packages/backend/src/remote/activitypub/misc/html-to-mfm.ts
deleted file mode 100644
index bb1ba7925c..0000000000
--- a/packages/backend/src/remote/activitypub/misc/html-to-mfm.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { IObject } from '../type.js';
-import { extractApHashtagObjects } from '../models/tag.js';
-import { fromHtml } from '../../../mfm/from-html.js';
-
-export function htmlToMfm(html: string, tag?: IObject | IObject[]) {
-	const hashtagNames = extractApHashtagObjects(tag).map(x => x.name).filter((x): x is string => x != null);
-
-	return fromHtml(html, hashtagNames);
-}
diff --git a/packages/backend/src/remote/activitypub/misc/ld-signature.ts b/packages/backend/src/remote/activitypub/misc/ld-signature.ts
deleted file mode 100644
index 362a543ece..0000000000
--- a/packages/backend/src/remote/activitypub/misc/ld-signature.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import * as crypto from 'node:crypto';
-import jsonld from 'jsonld';
-import { CONTEXTS } from './contexts.js';
-import fetch from 'node-fetch';
-import { httpAgent, httpsAgent } from '@/misc/fetch.js';
-
-// RsaSignature2017 based from https://github.com/transmute-industries/RsaSignature2017
-
-export class LdSignature {
-	public debug = false;
-	public preLoad = true;
-	public loderTimeout = 10 * 1000;
-
-	constructor() {
-	}
-
-	public async signRsaSignature2017(data: any, privateKey: string, creator: string, domain?: string, created?: Date): Promise<any> {
-		const options = {
-			type: 'RsaSignature2017',
-			creator,
-			domain,
-			nonce: crypto.randomBytes(16).toString('hex'),
-			created: (created || new Date()).toISOString(),
-		} as {
-			type: string;
-			creator: string;
-			domain?: string;
-			nonce: string;
-			created: string;
-		};
-
-		if (!domain) {
-			delete options.domain;
-		}
-
-		const toBeSigned = await this.createVerifyData(data, options);
-
-		const signer = crypto.createSign('sha256');
-		signer.update(toBeSigned);
-		signer.end();
-
-		const signature = signer.sign(privateKey);
-
-		return {
-			...data,
-			signature: {
-				...options,
-				signatureValue: signature.toString('base64'),
-			},
-		};
-	}
-
-	public async verifyRsaSignature2017(data: any, publicKey: string): Promise<boolean> {
-		const toBeSigned = await this.createVerifyData(data, data.signature);
-		const verifier = crypto.createVerify('sha256');
-		verifier.update(toBeSigned);
-		return verifier.verify(publicKey, data.signature.signatureValue, 'base64');
-	}
-
-	public async createVerifyData(data: any, options: any) {
-		const transformedOptions = {
-			...options,
-			'@context': 'https://w3id.org/identity/v1',
-		};
-		delete transformedOptions['type'];
-		delete transformedOptions['id'];
-		delete transformedOptions['signatureValue'];
-		const canonizedOptions = await this.normalize(transformedOptions);
-		const optionsHash = this.sha256(canonizedOptions);
-		const transformedData = { ...data };
-		delete transformedData['signature'];
-		const cannonidedData = await this.normalize(transformedData);
-		if (this.debug) console.debug(`cannonidedData: ${cannonidedData}`);
-		const documentHash = this.sha256(cannonidedData);
-		const verifyData = `${optionsHash}${documentHash}`;
-		return verifyData;
-	}
-
-	public async normalize(data: any) {
-		const customLoader = this.getLoader();
-		return await jsonld.normalize(data, {
-			documentLoader: customLoader,
-		});
-	}
-
-	private getLoader() {
-		return async (url: string): Promise<any> => {
-			if (!url.match('^https?\:\/\/')) throw `Invalid URL ${url}`;
-
-			if (this.preLoad) {
-				if (url in CONTEXTS) {
-					if (this.debug) console.debug(`HIT: ${url}`);
-					return {
-						contextUrl: null,
-						document: CONTEXTS[url],
-						documentUrl: url,
-					};
-				}
-			}
-
-			if (this.debug) console.debug(`MISS: ${url}`);
-			const document = await this.fetchDocument(url);
-			return {
-				contextUrl: null,
-				document: document,
-				documentUrl: url,
-			};
-		};
-	}
-
-	private async fetchDocument(url: string) {
-		const json = await fetch(url, {
-			headers: {
-				Accept: 'application/ld+json, application/json',
-			},
-			// TODO
-			//timeout: this.loderTimeout,
-			agent: u => u.protocol === 'http:' ? httpAgent : httpsAgent,
-		}).then(res => {
-			if (!res.ok) {
-				throw `${res.status} ${res.statusText}`;
-			} else {
-				return res.json();
-			}
-		});
-
-		return json;
-	}
-
-	public sha256(data: string): string {
-		const hash = crypto.createHash('sha256');
-		hash.update(data);
-		return hash.digest('hex');
-	}
-}
diff --git a/packages/backend/src/remote/activitypub/models/icon.ts b/packages/backend/src/remote/activitypub/models/icon.ts
deleted file mode 100644
index 50794a937d..0000000000
--- a/packages/backend/src/remote/activitypub/models/icon.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type IIcon = {
-	type: string;
-	mediaType?: string;
-	url?: string;
-};
diff --git a/packages/backend/src/remote/activitypub/models/identifier.ts b/packages/backend/src/remote/activitypub/models/identifier.ts
deleted file mode 100644
index f6c3bb8c88..0000000000
--- a/packages/backend/src/remote/activitypub/models/identifier.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type IIdentifier = {
-	type: string;
-	name: string;
-	value: string;
-};
diff --git a/packages/backend/src/remote/activitypub/models/image.ts b/packages/backend/src/remote/activitypub/models/image.ts
deleted file mode 100644
index 102b7b1346..0000000000
--- a/packages/backend/src/remote/activitypub/models/image.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { uploadFromUrl } from '@/services/drive/upload-from-url.js';
-import { CacheableRemoteUser, IRemoteUser } from '@/models/entities/user.js';
-import Resolver from '../resolver.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { apLogger } from '../logger.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { DriveFiles, Users } from '@/models/index.js';
-import { truncate } from '@/misc/truncate.js';
-import { DB_MAX_IMAGE_COMMENT_LENGTH } from '@/misc/hard-limits.js';
-
-const logger = apLogger;
-
-/**
- * Imageを作成します。
- */
-export async function createImage(actor: CacheableRemoteUser, value: any): Promise<DriveFile> {
-	// 投稿者が凍結されていたらスキップ
-	if (actor.isSuspended) {
-		throw new Error('actor has been suspended');
-	}
-
-	const image = await new Resolver().resolve(value) as any;
-
-	if (image.url == null) {
-		throw new Error('invalid image: url not privided');
-	}
-
-	logger.info(`Creating the Image: ${image.url}`);
-
-	const instance = await fetchMeta();
-
-	let file = await uploadFromUrl({
-		url: image.url,
-		user: actor,
-		uri: image.url,
-		sensitive: image.sensitive,
-		isLink: !instance.cacheRemoteFiles,
-		comment: truncate(image.name, DB_MAX_IMAGE_COMMENT_LENGTH)
-	});
-
-	if (file.isLink) {
-		// URLが異なっている場合、同じ画像が以前に異なるURLで登録されていたということなので、
-		// URLを更新する
-		if (file.url !== image.url) {
-			await DriveFiles.update({ id: file.id }, {
-				url: image.url,
-				uri: image.url,
-			});
-
-			file = await DriveFiles.findOneByOrFail({ id: file.id });
-		}
-	}
-
-	return file;
-}
-
-/**
- * Imageを解決します。
- *
- * Misskeyに対象のImageが登録されていればそれを返し、そうでなければ
- * リモートサーバーからフェッチしてMisskeyに登録しそれを返します。
- */
-export async function resolveImage(actor: CacheableRemoteUser, value: any): Promise<DriveFile> {
-	// TODO
-
-	// リモートサーバーからフェッチしてきて登録
-	return await createImage(actor, value);
-}
diff --git a/packages/backend/src/remote/activitypub/models/mention.ts b/packages/backend/src/remote/activitypub/models/mention.ts
deleted file mode 100644
index 13f77424ec..0000000000
--- a/packages/backend/src/remote/activitypub/models/mention.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import promiseLimit from 'promise-limit';
-import { toArray, unique } from '@/prelude/array.js';
-import { CacheableUser, User } from '@/models/entities/user.js';
-import { IObject, isMention, IApMention } from '../type.js';
-import Resolver from '../resolver.js';
-import { resolvePerson } from './person.js';
-
-export async function extractApMentions(tags: IObject | IObject[] | null | undefined) {
-	const hrefs = unique(extractApMentionObjects(tags).map(x => x.href as string));
-
-	const resolver = new Resolver();
-
-	const limit = promiseLimit<CacheableUser | null>(2);
-	const mentionedUsers = (await Promise.all(
-		hrefs.map(x => limit(() => resolvePerson(x, resolver).catch(() => null))),
-	)).filter((x): x is CacheableUser => x != null);
-
-	return mentionedUsers;
-}
-
-export function extractApMentionObjects(tags: IObject | IObject[] | null | undefined): IApMention[] {
-	if (tags == null) return [];
-	return toArray(tags).filter(isMention);
-}
diff --git a/packages/backend/src/remote/activitypub/models/note.ts b/packages/backend/src/remote/activitypub/models/note.ts
deleted file mode 100644
index 5d63f2605a..0000000000
--- a/packages/backend/src/remote/activitypub/models/note.ts
+++ /dev/null
@@ -1,359 +0,0 @@
-import promiseLimit from 'promise-limit';
-
-import config from '@/config/index.js';
-import Resolver from '../resolver.js';
-import post from '@/services/note/create.js';
-import { resolvePerson } from './person.js';
-import { resolveImage } from './image.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { htmlToMfm } from '../misc/html-to-mfm.js';
-import { extractApHashtags } from './tag.js';
-import { unique, toArray, toSingle } from '@/prelude/array.js';
-import { extractPollFromQuestion } from './question.js';
-import vote from '@/services/note/polls/vote.js';
-import { apLogger } from '../logger.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { deliverQuestionUpdate } from '@/services/note/polls/update.js';
-import { extractDbHost, toPuny } from '@/misc/convert-host.js';
-import { Emojis, Polls, MessagingMessages } from '@/models/index.js';
-import { Note } from '@/models/entities/note.js';
-import { IObject, getOneApId, getApId, getOneApHrefNullable, validPost, IPost, isEmoji, getApType } from '../type.js';
-import { Emoji } from '@/models/entities/emoji.js';
-import { genId } from '@/misc/gen-id.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { getApLock } from '@/misc/app-lock.js';
-import { createMessage } from '@/services/messages/create.js';
-import { parseAudience } from '../audience.js';
-import { extractApMentions } from './mention.js';
-import DbResolver from '../db-resolver.js';
-import { StatusError } from '@/misc/fetch.js';
-
-const logger = apLogger;
-
-export function validateNote(object: any, uri: string) {
-	const expectHost = extractDbHost(uri);
-
-	if (object == null) {
-		return new Error('invalid Note: object is null');
-	}
-
-	if (!validPost.includes(getApType(object))) {
-		return new Error(`invalid Note: invalid object type ${getApType(object)}`);
-	}
-
-	if (object.id && extractDbHost(object.id) !== expectHost) {
-		return new Error(`invalid Note: id has different host. expected: ${expectHost}, actual: ${extractDbHost(object.id)}`);
-	}
-
-	if (object.attributedTo && extractDbHost(getOneApId(object.attributedTo)) !== expectHost) {
-		return new Error(`invalid Note: attributedTo has different host. expected: ${expectHost}, actual: ${extractDbHost(object.attributedTo)}`);
-	}
-
-	return null;
-}
-
-/**
- * Noteをフェッチします。
- *
- * Misskeyに対象のNoteが登録されていればそれを返します。
- */
-export async function fetchNote(object: string | IObject): Promise<Note | null> {
-	const dbResolver = new DbResolver();
-	return await dbResolver.getNoteFromApId(object);
-}
-
-/**
- * Noteを作成します。
- */
-export async function createNote(value: string | IObject, resolver?: Resolver, silent = false): Promise<Note | null> {
-	if (resolver == null) resolver = new Resolver();
-
-	const object: any = await resolver.resolve(value);
-
-	const entryUri = getApId(value);
-	const err = validateNote(object, entryUri);
-	if (err) {
-		logger.error(`${err.message}`, {
-			resolver: {
-				history: resolver.getHistory(),
-			},
-			value: value,
-			object: object,
-		});
-		throw new Error('invalid note');
-	}
-
-	const note: IPost = object;
-
-	logger.debug(`Note fetched: ${JSON.stringify(note, null, 2)}`);
-
-	logger.info(`Creating the Note: ${note.id}`);
-
-	// 投稿者をフェッチ
-	const actor = await resolvePerson(getOneApId(note.attributedTo), resolver) as CacheableRemoteUser;
-
-	// 投稿者が凍結されていたらスキップ
-	if (actor.isSuspended) {
-		throw new Error('actor has been suspended');
-	}
-
-	const noteAudience = await parseAudience(actor, note.to, note.cc);
-	let visibility = noteAudience.visibility;
-	const visibleUsers = noteAudience.visibleUsers;
-
-	// Audience (to, cc) が指定されてなかった場合
-	if (visibility === 'specified' && visibleUsers.length === 0) {
-		if (typeof value === 'string') {	// 入力がstringならばresolverでGETが発生している
-			// こちらから匿名GET出来たものならばpublic
-			visibility = 'public';
-		}
-	}
-
-	let isTalk = note._misskey_talk && visibility === 'specified';
-
-	const apMentions = await extractApMentions(note.tag);
-	const apHashtags = await extractApHashtags(note.tag);
-
-	// 添付ファイル
-	// TODO: attachmentは必ずしもImageではない
-	// TODO: attachmentは必ずしも配列ではない
-	// Noteがsensitiveなら添付もsensitiveにする
-	const limit = promiseLimit(2);
-
-	note.attachment = Array.isArray(note.attachment) ? note.attachment : note.attachment ? [note.attachment] : [];
-	const files = note.attachment
-		.map(attach => attach.sensitive = note.sensitive)
-		? (await Promise.all(note.attachment.map(x => limit(() => resolveImage(actor, x)) as Promise<DriveFile>)))
-			.filter(image => image != null)
-		: [];
-
-	// リプライ
-	const reply: Note | null = note.inReplyTo
-		? await resolveNote(note.inReplyTo, resolver).then(x => {
-			if (x == null) {
-				logger.warn(`Specified inReplyTo, but nout found`);
-				throw new Error('inReplyTo not found');
-			} else {
-				return x;
-			}
-		}).catch(async e => {
-			// トークだったらinReplyToのエラーは無視
-			const uri = getApId(note.inReplyTo);
-			if (uri.startsWith(config.url + '/')) {
-				const id = uri.split('/').pop();
-				const talk = await MessagingMessages.findOneBy({ id });
-				if (talk) {
-					isTalk = true;
-					return null;
-				}
-			}
-
-			logger.warn(`Error in inReplyTo ${note.inReplyTo} - ${e.statusCode || e}`);
-			throw e;
-		})
-		: null;
-
-	// 引用
-	let quote: Note | undefined | null;
-
-	if (note._misskey_quote || note.quoteUrl) {
-		const tryResolveNote = async (uri: string): Promise<{
-			status: 'ok';
-			res: Note | null;
-		} | {
-			status: 'permerror' | 'temperror';
-		}> => {
-			if (typeof uri !== 'string' || !uri.match(/^https?:/)) return { status: 'permerror' };
-			try {
-				const res = await resolveNote(uri);
-				if (res) {
-					return {
-						status: 'ok',
-						res,
-					};
-				} else {
-					return {
-						status: 'permerror',
-					};
-				}
-			} catch (e) {
-				return {
-					status: (e instanceof StatusError && e.isClientError) ? 'permerror' : 'temperror',
-				};
-			}
-		};
-
-		const uris = unique([note._misskey_quote, note.quoteUrl].filter((x): x is string => typeof x === 'string'));
-		const results = await Promise.all(uris.map(uri => tryResolveNote(uri)));
-
-		quote = results.filter((x): x is { status: 'ok', res: Note | null } => x.status === 'ok').map(x => x.res).find(x => x);
-		if (!quote) {
-			if (results.some(x => x.status === 'temperror')) {
-				throw 'quote resolve failed';
-			}
-		}
-	}
-
-	const cw = note.summary === '' ? null : note.summary;
-
-	// テキストのパース
-	let text: string | null = null;
-	if (note.source?.mediaType === 'text/x.misskeymarkdown' && typeof note.source?.content === 'string') {
-		text = note.source.content;
-	} else if (typeof note._misskey_content !== 'undefined') {
-		text = note._misskey_content;
-	} else if (typeof note.content === 'string') {
-		text = htmlToMfm(note.content, note.tag);
-	}
-
-	// vote
-	if (reply && reply.hasPoll) {
-		const poll = await Polls.findOneByOrFail({ noteId: reply.id });
-
-		const tryCreateVote = async (name: string, index: number): Promise<null> => {
-			if (poll.expiresAt && Date.now() > new Date(poll.expiresAt).getTime()) {
-				logger.warn(`vote to expired poll from AP: actor=${actor.username}@${actor.host}, note=${note.id}, choice=${name}`);
-			} else if (index >= 0) {
-				logger.info(`vote from AP: actor=${actor.username}@${actor.host}, note=${note.id}, choice=${name}`);
-				await vote(actor, reply, index);
-
-				// リモートフォロワーにUpdate配信
-				deliverQuestionUpdate(reply.id);
-			}
-			return null;
-		};
-
-		if (note.name) {
-			return await tryCreateVote(note.name, poll.choices.findIndex(x => x === note.name));
-		}
-	}
-
-	const emojis = await extractEmojis(note.tag || [], actor.host).catch(e => {
-		logger.info(`extractEmojis: ${e}`);
-		return [] as Emoji[];
-	});
-
-	const apEmojis = emojis.map(emoji => emoji.name);
-
-	const poll = await extractPollFromQuestion(note, resolver).catch(() => undefined);
-
-	if (isTalk) {
-		for (const recipient of visibleUsers) {
-			await createMessage(actor, recipient, undefined, text || undefined, (files && files.length > 0) ? files[0] : null, object.id);
-			return null;
-		}
-	}
-
-	return await post(actor, {
-		createdAt: note.published ? new Date(note.published) : null,
-		files,
-		reply,
-		renote: quote,
-		name: note.name,
-		cw,
-		text,
-		localOnly: false,
-		visibility,
-		visibleUsers,
-		apMentions,
-		apHashtags,
-		apEmojis,
-		poll,
-		uri: note.id,
-		url: getOneApHrefNullable(note.url),
-	}, silent);
-}
-
-/**
- * Noteを解決します。
- *
- * Misskeyに対象のNoteが登録されていればそれを返し、そうでなければ
- * リモートサーバーからフェッチしてMisskeyに登録しそれを返します。
- */
-export async function resolveNote(value: string | IObject, resolver?: Resolver): Promise<Note | null> {
-	const uri = typeof value === 'string' ? value : value.id;
-	if (uri == null) throw new Error('missing uri');
-
-	// ブロックしてたら中断
-	const meta = await fetchMeta();
-	if (meta.blockedHosts.includes(extractDbHost(uri))) throw { statusCode: 451 };
-
-	const unlock = await getApLock(uri);
-
-	try {
-		//#region このサーバーに既に登録されていたらそれを返す
-		const exist = await fetchNote(uri);
-
-		if (exist) {
-			return exist;
-		}
-		//#endregion
-
-		if (uri.startsWith(config.url)) {
-			throw new StatusError('cannot resolve local note', 400, 'cannot resolve local note');
-		}
-
-		// リモートサーバーからフェッチしてきて登録
-		// ここでuriの代わりに添付されてきたNote Objectが指定されていると、サーバーフェッチを経ずにノートが生成されるが
-		// 添付されてきたNote Objectは偽装されている可能性があるため、常にuriを指定してサーバーフェッチを行う。
-		return await createNote(uri, resolver, true);
-	} finally {
-		unlock();
-	}
-}
-
-export async function extractEmojis(tags: IObject | IObject[], host: string): Promise<Emoji[]> {
-	host = toPuny(host);
-
-	if (!tags) return [];
-
-	const eomjiTags = toArray(tags).filter(isEmoji);
-
-	return await Promise.all(eomjiTags.map(async tag => {
-		const name = tag.name!.replace(/^:/, '').replace(/:$/, '');
-		tag.icon = toSingle(tag.icon);
-
-		const exists = await Emojis.findOneBy({
-			host,
-			name,
-		});
-
-		if (exists) {
-			if ((tag.updated != null && exists.updatedAt == null)
-				|| (tag.id != null && exists.uri == null)
-				|| (tag.updated != null && exists.updatedAt != null && new Date(tag.updated) > exists.updatedAt)
-				|| (tag.icon!.url !== exists.originalUrl)
-			) {
-				await Emojis.update({
-					host,
-					name,
-				}, {
-					uri: tag.id,
-					originalUrl: tag.icon!.url,
-					publicUrl: tag.icon!.url,
-					updatedAt: new Date(),
-				});
-
-				return await Emojis.findOneBy({
-					host,
-					name,
-				}) as Emoji;
-			}
-
-			return exists;
-		}
-
-		logger.info(`register emoji host=${host}, name=${name}`);
-
-		return await Emojis.insert({
-			id: genId(),
-			host,
-			name,
-			uri: tag.id,
-			originalUrl: tag.icon!.url,
-			publicUrl: tag.icon!.url,
-			updatedAt: new Date(),
-			aliases: [],
-		} as Partial<Emoji>).then(x => Emojis.findOneByOrFail(x.identifiers[0]));
-	}));
-}
diff --git a/packages/backend/src/remote/activitypub/models/person.ts b/packages/backend/src/remote/activitypub/models/person.ts
deleted file mode 100644
index 6097e3b6ed..0000000000
--- a/packages/backend/src/remote/activitypub/models/person.ts
+++ /dev/null
@@ -1,504 +0,0 @@
-import { URL } from 'node:url';
-import promiseLimit from 'promise-limit';
-
-import config from '@/config/index.js';
-import { registerOrFetchInstanceDoc } from '@/services/register-or-fetch-instance-doc.js';
-import { Note } from '@/models/entities/note.js';
-import { updateUsertags } from '@/services/update-hashtag.js';
-import { Users, Instances, DriveFiles, Followings, UserProfiles, UserPublickeys } from '@/models/index.js';
-import { User, IRemoteUser, CacheableUser } from '@/models/entities/user.js';
-import { Emoji } from '@/models/entities/emoji.js';
-import { UserNotePining } from '@/models/entities/user-note-pining.js';
-import { genId } from '@/misc/gen-id.js';
-import { instanceChart, usersChart } from '@/services/chart/index.js';
-import { UserPublickey } from '@/models/entities/user-publickey.js';
-import { isDuplicateKeyValueError } from '@/misc/is-duplicate-key-value-error.js';
-import { toPuny } from '@/misc/convert-host.js';
-import { UserProfile } from '@/models/entities/user-profile.js';
-import { toArray } from '@/prelude/array.js';
-import { fetchInstanceMetadata } from '@/services/fetch-instance-metadata.js';
-import { normalizeForSearch } from '@/misc/normalize-for-search.js';
-import { truncate } from '@/misc/truncate.js';
-import { StatusError } from '@/misc/fetch.js';
-import { uriPersonCache } from '@/services/user-cache.js';
-import { publishInternalEvent } from '@/services/stream.js';
-import { db } from '@/db/postgre.js';
-import { apLogger } from '../logger.js';
-import { htmlToMfm } from '../misc/html-to-mfm.js';
-import { fromHtml } from '../../../mfm/from-html.js';
-import { isCollectionOrOrderedCollection, isCollection, IActor, getApId, getOneApHrefNullable, IObject, isPropertyValue, IApPropertyValue, getApType, isActor } from '../type.js';
-import Resolver from '../resolver.js';
-import { extractApHashtags } from './tag.js';
-import { resolveNote, extractEmojis } from './note.js';
-import { resolveImage } from './image.js';
-
-const logger = apLogger;
-
-const nameLength = 128;
-const summaryLength = 2048;
-
-/**
- * Validate and convert to actor object
- * @param x Fetched object
- * @param uri Fetch target URI
- */
-function validateActor(x: IObject, uri: string): IActor {
-	const expectHost = toPuny(new URL(uri).hostname);
-
-	if (x == null) {
-		throw new Error('invalid Actor: object is null');
-	}
-
-	if (!isActor(x)) {
-		throw new Error(`invalid Actor type '${x.type}'`);
-	}
-
-	if (!(typeof x.id === 'string' && x.id.length > 0)) {
-		throw new Error('invalid Actor: wrong id');
-	}
-
-	if (!(typeof x.inbox === 'string' && x.inbox.length > 0)) {
-		throw new Error('invalid Actor: wrong inbox');
-	}
-
-	if (!(typeof x.preferredUsername === 'string' && x.preferredUsername.length > 0 && x.preferredUsername.length <= 128 && /^\w([\w-.]*\w)?$/.test(x.preferredUsername))) {
-		throw new Error('invalid Actor: wrong username');
-	}
-
-	// These fields are only informational, and some AP software allows these
-	// fields to be very long. If they are too long, we cut them off. This way
-	// we can at least see these users and their activities.
-	if (x.name) {
-		if (!(typeof x.name === 'string' && x.name.length > 0)) {
-			throw new Error('invalid Actor: wrong name');
-		}
-		x.name = truncate(x.name, nameLength);
-	}
-	if (x.summary) {
-		if (!(typeof x.summary === 'string' && x.summary.length > 0)) {
-			throw new Error('invalid Actor: wrong summary');
-		}
-		x.summary = truncate(x.summary, summaryLength);
-	}
-
-	const idHost = toPuny(new URL(x.id!).hostname);
-	if (idHost !== expectHost) {
-		throw new Error('invalid Actor: id has different host');
-	}
-
-	if (x.publicKey) {
-		if (typeof x.publicKey.id !== 'string') {
-			throw new Error('invalid Actor: publicKey.id is not a string');
-		}
-
-		const publicKeyIdHost = toPuny(new URL(x.publicKey.id).hostname);
-		if (publicKeyIdHost !== expectHost) {
-			throw new Error('invalid Actor: publicKey.id has different host');
-		}
-	}
-
-	return x;
-}
-
-/**
- * Personをフェッチします。
- *
- * Misskeyに対象のPersonが登録されていればそれを返します。
- */
-export async function fetchPerson(uri: string, resolver?: Resolver): Promise<CacheableUser | null> {
-	if (typeof uri !== 'string') throw new Error('uri is not string');
-
-	const cached = uriPersonCache.get(uri);
-	if (cached) return cached;
-
-	// URIがこのサーバーを指しているならデータベースからフェッチ
-	if (uri.startsWith(config.url + '/')) {
-		const id = uri.split('/').pop();
-		const u = await Users.findOneBy({ id });
-		if (u) uriPersonCache.set(uri, u);
-		return u;
-	}
-
-	//#region このサーバーに既に登録されていたらそれを返す
-	const exist = await Users.findOneBy({ uri });
-
-	if (exist) {
-		uriPersonCache.set(uri, exist);
-		return exist;
-	}
-	//#endregion
-
-	return null;
-}
-
-/**
- * Personを作成します。
- */
-export async function createPerson(uri: string, resolver?: Resolver): Promise<User> {
-	if (typeof uri !== 'string') throw new Error('uri is not string');
-
-	if (uri.startsWith(config.url)) {
-		throw new StatusError('cannot resolve local user', 400, 'cannot resolve local user');
-	}
-
-	if (resolver == null) resolver = new Resolver();
-
-	const object = await resolver.resolve(uri) as any;
-
-	const person = validateActor(object, uri);
-
-	logger.info(`Creating the Person: ${person.id}`);
-
-	const host = toPuny(new URL(object.id).hostname);
-
-	const { fields } = analyzeAttachments(person.attachment || []);
-
-	const tags = extractApHashtags(person.tag).map(tag => normalizeForSearch(tag)).splice(0, 32);
-
-	const isBot = getApType(object) === 'Service';
-
-	const bday = person['vcard:bday']?.match(/^\d{4}-\d{2}-\d{2}/);
-
-	// Create user
-	let user: IRemoteUser;
-	try {
-		// Start transaction
-		await db.transaction(async transactionalEntityManager => {
-			user = await transactionalEntityManager.save(new User({
-				id: genId(),
-				avatarId: null,
-				bannerId: null,
-				createdAt: new Date(),
-				lastFetchedAt: new Date(),
-				name: truncate(person.name, nameLength),
-				isLocked: !!person.manuallyApprovesFollowers,
-				isExplorable: !!person.discoverable,
-				username: person.preferredUsername,
-				usernameLower: person.preferredUsername!.toLowerCase(),
-				host,
-				inbox: person.inbox,
-				sharedInbox: person.sharedInbox || (person.endpoints ? person.endpoints.sharedInbox : undefined),
-				followersUri: person.followers ? getApId(person.followers) : undefined,
-				featured: person.featured ? getApId(person.featured) : undefined,
-				uri: person.id,
-				tags,
-				isBot,
-				isCat: (person as any).isCat === true,
-				showTimelineReplies: false,
-			})) as IRemoteUser;
-
-			await transactionalEntityManager.save(new UserProfile({
-				userId: user.id,
-				description: person.summary ? htmlToMfm(truncate(person.summary, summaryLength), person.tag) : null,
-				url: getOneApHrefNullable(person.url),
-				fields,
-				birthday: bday ? bday[0] : null,
-				location: person['vcard:Address'] || null,
-				userHost: host,
-			}));
-
-			if (person.publicKey) {
-				await transactionalEntityManager.save(new UserPublickey({
-					userId: user.id,
-					keyId: person.publicKey.id,
-					keyPem: person.publicKey.publicKeyPem,
-				}));
-			}
-		});
-	} catch (e) {
-		// duplicate key error
-		if (isDuplicateKeyValueError(e)) {
-			// /users/@a => /users/:id のように入力がaliasなときにエラーになることがあるのを対応
-			const u = await Users.findOneBy({
-				uri: person.id,
-			});
-
-			if (u) {
-				user = u as IRemoteUser;
-			} else {
-				throw new Error('already registered');
-			}
-		} else {
-			logger.error(e instanceof Error ? e : new Error(e as string));
-			throw e;
-		}
-	}
-
-	// Register host
-	registerOrFetchInstanceDoc(host).then(i => {
-		Instances.increment({ id: i.id }, 'usersCount', 1);
-		instanceChart.newUser(i.host);
-		fetchInstanceMetadata(i);
-	});
-
-	usersChart.update(user!, true);
-
-	// ハッシュタグ更新
-	updateUsertags(user!, tags);
-
-	//#region アバターとヘッダー画像をフェッチ
-	const [avatar, banner] = await Promise.all([
-		person.icon,
-		person.image,
-	].map(img =>
-		img == null
-			? Promise.resolve(null)
-			: resolveImage(user!, img).catch(() => null),
-	));
-
-	const avatarId = avatar ? avatar.id : null;
-	const bannerId = banner ? banner.id : null;
-
-	await Users.update(user!.id, {
-		avatarId,
-		bannerId,
-	});
-
-	user!.avatarId = avatarId;
-	user!.bannerId = bannerId;
-	//#endregion
-
-	//#region カスタム絵文字取得
-	const emojis = await extractEmojis(person.tag || [], host).catch(e => {
-		logger.info(`extractEmojis: ${e}`);
-		return [] as Emoji[];
-	});
-
-	const emojiNames = emojis.map(emoji => emoji.name);
-
-	await Users.update(user!.id, {
-		emojis: emojiNames,
-	});
-	//#endregion
-
-	await updateFeatured(user!.id).catch(err => logger.error(err));
-
-	return user!;
-}
-
-/**
- * Personの情報を更新します。
- * Misskeyに対象のPersonが登録されていなければ無視します。
- * @param uri URI of Person
- * @param resolver Resolver
- * @param hint Hint of Person object (この値が正当なPersonの場合、Remote resolveをせずに更新に利用します)
- */
-export async function updatePerson(uri: string, resolver?: Resolver | null, hint?: IObject): Promise<void> {
-	if (typeof uri !== 'string') throw new Error('uri is not string');
-
-	// URIがこのサーバーを指しているならスキップ
-	if (uri.startsWith(config.url + '/')) {
-		return;
-	}
-
-	//#region このサーバーに既に登録されているか
-	const exist = await Users.findOneBy({ uri }) as IRemoteUser;
-
-	if (exist == null) {
-		return;
-	}
-	//#endregion
-
-	if (resolver == null) resolver = new Resolver();
-
-	const object = hint || await resolver.resolve(uri);
-
-	const person = validateActor(object, uri);
-
-	logger.info(`Updating the Person: ${person.id}`);
-
-	// アバターとヘッダー画像をフェッチ
-	const [avatar, banner] = await Promise.all([
-		person.icon,
-		person.image,
-	].map(img =>
-		img == null
-			? Promise.resolve(null)
-			: resolveImage(exist, img).catch(() => null),
-	));
-
-	// カスタム絵文字取得
-	const emojis = await extractEmojis(person.tag || [], exist.host).catch(e => {
-		logger.info(`extractEmojis: ${e}`);
-		return [] as Emoji[];
-	});
-
-	const emojiNames = emojis.map(emoji => emoji.name);
-
-	const { fields } = analyzeAttachments(person.attachment || []);
-
-	const tags = extractApHashtags(person.tag).map(tag => normalizeForSearch(tag)).splice(0, 32);
-
-	const bday = person['vcard:bday']?.match(/^\d{4}-\d{2}-\d{2}/);
-
-	const updates = {
-		lastFetchedAt: new Date(),
-		inbox: person.inbox,
-		sharedInbox: person.sharedInbox || (person.endpoints ? person.endpoints.sharedInbox : undefined),
-		followersUri: person.followers ? getApId(person.followers) : undefined,
-		featured: person.featured,
-		emojis: emojiNames,
-		name: truncate(person.name, nameLength),
-		tags,
-		isBot: getApType(object) === 'Service',
-		isCat: (person as any).isCat === true,
-		isLocked: !!person.manuallyApprovesFollowers,
-		isExplorable: !!person.discoverable,
-	} as Partial<User>;
-
-	if (avatar) {
-		updates.avatarId = avatar.id;
-	}
-
-	if (banner) {
-		updates.bannerId = banner.id;
-	}
-
-	// Update user
-	await Users.update(exist.id, updates);
-
-	if (person.publicKey) {
-		await UserPublickeys.update({ userId: exist.id }, {
-			keyId: person.publicKey.id,
-			keyPem: person.publicKey.publicKeyPem,
-		});
-	}
-
-	await UserProfiles.update({ userId: exist.id }, {
-		url: getOneApHrefNullable(person.url),
-		fields,
-		description: person.summary ? htmlToMfm(truncate(person.summary, summaryLength), person.tag) : null,
-		birthday: bday ? bday[0] : null,
-		location: person['vcard:Address'] || null,
-	});
-
-	publishInternalEvent('remoteUserUpdated', { id: exist.id });
-
-	// ハッシュタグ更新
-	updateUsertags(exist, tags);
-
-	// 該当ユーザーが既にフォロワーになっていた場合はFollowingもアップデートする
-	await Followings.update({
-		followerId: exist.id,
-	}, {
-		followerSharedInbox: person.sharedInbox || (person.endpoints ? person.endpoints.sharedInbox : undefined),
-	});
-
-	await updateFeatured(exist.id).catch(err => logger.error(err));
-}
-
-/**
- * Personを解決します。
- *
- * Misskeyに対象のPersonが登録されていればそれを返し、そうでなければ
- * リモートサーバーからフェッチしてMisskeyに登録しそれを返します。
- */
-export async function resolvePerson(uri: string, resolver?: Resolver): Promise<CacheableUser> {
-	if (typeof uri !== 'string') throw new Error('uri is not string');
-
-	//#region このサーバーに既に登録されていたらそれを返す
-	const exist = await fetchPerson(uri);
-
-	if (exist) {
-		return exist;
-	}
-	//#endregion
-
-	// リモートサーバーからフェッチしてきて登録
-	if (resolver == null) resolver = new Resolver();
-	return await createPerson(uri, resolver);
-}
-
-const services: {
-		[x: string]: (id: string, username: string) => any
-	} = {
-		'misskey:authentication:twitter': (userId, screenName) => ({ userId, screenName }),
-		'misskey:authentication:github': (id, login) => ({ id, login }),
-		'misskey:authentication:discord': (id, name) => $discord(id, name),
-	};
-
-const $discord = (id: string, name: string) => {
-	if (typeof name !== 'string') {
-		name = 'unknown#0000';
-	}
-	const [username, discriminator] = name.split('#');
-	return { id, username, discriminator };
-};
-
-function addService(target: { [x: string]: any }, source: IApPropertyValue) {
-	const service = services[source.name];
-
-	if (typeof source.value !== 'string') {
-		source.value = 'unknown';
-	}
-
-	const [id, username] = source.value.split('@');
-
-	if (service) {
-		target[source.name.split(':')[2]] = service(id, username);
-	}
-}
-
-export function analyzeAttachments(attachments: IObject | IObject[] | undefined) {
-	const fields: {
-		name: string,
-		value: string
-	}[] = [];
-	const services: { [x: string]: any } = {};
-
-	if (Array.isArray(attachments)) {
-		for (const attachment of attachments.filter(isPropertyValue)) {
-			if (isPropertyValue(attachment.identifier)) {
-				addService(services, attachment.identifier);
-			} else {
-				fields.push({
-					name: attachment.name,
-					value: fromHtml(attachment.value),
-				});
-			}
-		}
-	}
-
-	return { fields, services };
-}
-
-export async function updateFeatured(userId: User['id']) {
-	const user = await Users.findOneByOrFail({ id: userId });
-	if (!Users.isRemoteUser(user)) return;
-	if (!user.featured) return;
-
-	logger.info(`Updating the featured: ${user.uri}`);
-
-	const resolver = new Resolver();
-
-	// Resolve to (Ordered)Collection Object
-	const collection = await resolver.resolveCollection(user.featured);
-	if (!isCollectionOrOrderedCollection(collection)) throw new Error('Object is not Collection or OrderedCollection');
-
-	// Resolve to Object(may be Note) arrays
-	const unresolvedItems = isCollection(collection) ? collection.items : collection.orderedItems;
-	const items = await Promise.all(toArray(unresolvedItems).map(x => resolver.resolve(x)));
-
-	// Resolve and regist Notes
-	const limit = promiseLimit<Note | null>(2);
-	const featuredNotes = await Promise.all(items
-		.filter(item => getApType(item) === 'Note')	// TODO: Noteでなくてもいいかも
-		.slice(0, 5)
-		.map(item => limit(() => resolveNote(item, resolver))));
-
-	await db.transaction(async transactionalEntityManager => {
-		await transactionalEntityManager.delete(UserNotePining, { userId: user.id });
-
-		// とりあえずidを別の時間で生成して順番を維持
-		let td = 0;
-		for (const note of featuredNotes.filter(note => note != null)) {
-			td -= 1000;
-			transactionalEntityManager.insert(UserNotePining, {
-				id: genId(new Date(Date.now() + td)),
-				createdAt: new Date(),
-				userId: user.id,
-				noteId: note!.id,
-			});
-		}
-	});
-}
diff --git a/packages/backend/src/remote/activitypub/models/question.ts b/packages/backend/src/remote/activitypub/models/question.ts
deleted file mode 100644
index f0321fdf2f..0000000000
--- a/packages/backend/src/remote/activitypub/models/question.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import config from '@/config/index.js';
-import Resolver from '../resolver.js';
-import { IObject, IQuestion, isQuestion } from '../type.js';
-import { apLogger } from '../logger.js';
-import { Notes, Polls } from '@/models/index.js';
-import { IPoll } from '@/models/entities/poll.js';
-
-export async function extractPollFromQuestion(source: string | IObject, resolver?: Resolver): Promise<IPoll> {
-	if (resolver == null) resolver = new Resolver();
-
-	const question = await resolver.resolve(source);
-
-	if (!isQuestion(question)) {
-		throw new Error('invalid type');
-	}
-
-	const multiple = !question.oneOf;
-	const expiresAt = question.endTime ? new Date(question.endTime) : question.closed ? new Date(question.closed) : null;
-
-	if (multiple && !question.anyOf) {
-		throw new Error('invalid question');
-	}
-
-	const choices = question[multiple ? 'anyOf' : 'oneOf']!
-		.map((x, i) => x.name!);
-
-	const votes = question[multiple ? 'anyOf' : 'oneOf']!
-		.map((x, i) => x.replies && x.replies.totalItems || x._misskey_votes || 0);
-
-	return {
-		choices,
-		votes,
-		multiple,
-		expiresAt,
-	};
-}
-
-/**
- * Update votes of Question
- * @param uri URI of AP Question object
- * @returns true if updated
- */
-export async function updateQuestion(value: any) {
-	const uri = typeof value === 'string' ? value : value.id;
-
-	// URIがこのサーバーを指しているならスキップ
-	if (uri.startsWith(config.url + '/')) throw new Error('uri points local');
-
-	//#region このサーバーに既に登録されているか
-	const note = await Notes.findOneBy({ uri });
-	if (note == null) throw new Error('Question is not registed');
-
-	const poll = await Polls.findOneBy({ noteId: note.id });
-	if (poll == null) throw new Error('Question is not registed');
-	//#endregion
-
-	// resolve new Question object
-	const resolver = new Resolver();
-	const question = await resolver.resolve(value) as IQuestion;
-	apLogger.debug(`fetched question: ${JSON.stringify(question, null, 2)}`);
-
-	if (question.type !== 'Question') throw new Error('object is not a Question');
-
-	const apChoices = question.oneOf || question.anyOf;
-
-	let changed = false;
-
-	for (const choice of poll.choices) {
-		const oldCount = poll.votes[poll.choices.indexOf(choice)];
-		const newCount = apChoices!.filter(ap => ap.name === choice)[0].replies!.totalItems;
-
-		if (oldCount !== newCount) {
-			changed = true;
-			poll.votes[poll.choices.indexOf(choice)] = newCount;
-		}
-	}
-
-	await Polls.update({ noteId: note.id }, {
-		votes: poll.votes,
-	});
-
-	return changed;
-}
diff --git a/packages/backend/src/remote/activitypub/models/tag.ts b/packages/backend/src/remote/activitypub/models/tag.ts
deleted file mode 100644
index 964dabad04..0000000000
--- a/packages/backend/src/remote/activitypub/models/tag.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { toArray } from '@/prelude/array.js';
-import { IObject, isHashtag, IApHashtag } from '../type.js';
-
-export function extractApHashtags(tags: IObject | IObject[] | null | undefined) {
-	if (tags == null) return [];
-
-	const hashtags = extractApHashtagObjects(tags);
-
-	return hashtags.map(tag => {
-		const m = tag.name.match(/^#(.+)/);
-		return m ? m[1] : null;
-	}).filter((x): x is string => x != null);
-}
-
-export function extractApHashtagObjects(tags: IObject | IObject[] | null | undefined): IApHashtag[] {
-	if (tags == null) return [];
-	return toArray(tags).filter(isHashtag);
-}
diff --git a/packages/backend/src/remote/activitypub/perform.ts b/packages/backend/src/remote/activitypub/perform.ts
deleted file mode 100644
index a3c10ba945..0000000000
--- a/packages/backend/src/remote/activitypub/perform.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { IObject } from './type.js';
-import { CacheableRemoteUser } from '@/models/entities/user.js';
-import { performActivity } from './kernel/index.js';
-import { updatePerson } from './models/person.js';
-
-export default async (actor: CacheableRemoteUser, activity: IObject): Promise<void> => {
-	await performActivity(actor, activity);
-
-	// ついでにリモートユーザーの情報が古かったら更新しておく
-	if (actor.uri) {
-		if (actor.lastFetchedAt == null || Date.now() - actor.lastFetchedAt.getTime() > 1000 * 60 * 60 * 24) {
-			setImmediate(() => {
-				updatePerson(actor.uri!);
-			});
-		}
-	}
-};
diff --git a/packages/backend/src/remote/activitypub/renderer/accept.ts b/packages/backend/src/remote/activitypub/renderer/accept.ts
deleted file mode 100644
index cb01f6a91b..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/accept.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import config from '@/config/index.js';
-import { User } from '@/models/entities/user.js';
-
-export default (object: any, user: { id: User['id']; host: null }) => ({
-	type: 'Accept',
-	actor: `${config.url}/users/${user.id}`,
-	object,
-});
diff --git a/packages/backend/src/remote/activitypub/renderer/add.ts b/packages/backend/src/remote/activitypub/renderer/add.ts
deleted file mode 100644
index ec47884291..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/add.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import config from '@/config/index.js';
-import { ILocalUser } from '@/models/entities/user.js';
-
-export default (user: ILocalUser, target: any, object: any) => ({
-	type: 'Add',
-	actor: `${config.url}/users/${user.id}`,
-	target,
-	object,
-});
diff --git a/packages/backend/src/remote/activitypub/renderer/announce.ts b/packages/backend/src/remote/activitypub/renderer/announce.ts
deleted file mode 100644
index 2709fea51d..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/announce.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import config from '@/config/index.js';
-import { Note } from '@/models/entities/note.js';
-
-export default (object: any, note: Note) => {
-	const attributedTo = `${config.url}/users/${note.userId}`;
-
-	let to: string[] = [];
-	let cc: string[] = [];
-
-	if (note.visibility === 'public') {
-		to = ['https://www.w3.org/ns/activitystreams#Public'];
-		cc = [`${attributedTo}/followers`];
-	} else if (note.visibility === 'home') {
-		to = [`${attributedTo}/followers`];
-		cc = ['https://www.w3.org/ns/activitystreams#Public'];
-	} else {
-		return null;
-	}
-
-	return {
-		id: `${config.url}/notes/${note.id}/activity`,
-		actor: `${config.url}/users/${note.userId}`,
-		type: 'Announce',
-		published: note.createdAt.toISOString(),
-		to,
-		cc,
-		object,
-	};
-};
diff --git a/packages/backend/src/remote/activitypub/renderer/block.ts b/packages/backend/src/remote/activitypub/renderer/block.ts
deleted file mode 100644
index 802d7280b1..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/block.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import config from '@/config/index.js';
-import { Blocking } from '@/models/entities/blocking.js';
-
-/**
- * Renders a block into its ActivityPub representation.
- *
- * @param block The block to be rendered. The blockee relation must be loaded.
- */
-export function renderBlock(block: Blocking) {
-	if (block.blockee?.uri == null) {
-		throw new Error('renderBlock: missing blockee uri');
-	}
-
-	return {
-		type: 'Block',
-		id: `${config.url}/blocks/${block.id}`,
-		actor: `${config.url}/users/${block.blockerId}`,
-		object: block.blockee.uri,
-	};
-}
diff --git a/packages/backend/src/remote/activitypub/renderer/create.ts b/packages/backend/src/remote/activitypub/renderer/create.ts
deleted file mode 100644
index 281a3cb2af..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/create.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import config from '@/config/index.js';
-import { Note } from '@/models/entities/note.js';
-
-export default (object: any, note: Note) => {
-	const activity = {
-		id: `${config.url}/notes/${note.id}/activity`,
-		actor: `${config.url}/users/${note.userId}`,
-		type: 'Create',
-		published: note.createdAt.toISOString(),
-		object,
-	} as any;
-
-	if (object.to) activity.to = object.to;
-	if (object.cc) activity.cc = object.cc;
-
-	return activity;
-};
diff --git a/packages/backend/src/remote/activitypub/renderer/delete.ts b/packages/backend/src/remote/activitypub/renderer/delete.ts
deleted file mode 100644
index 4edd3a8807..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/delete.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import config from '@/config/index.js';
-import { User } from '@/models/entities/user.js';
-
-export default (object: any, user: { id: User['id']; host: null }) => ({
-	type: 'Delete',
-	actor: `${config.url}/users/${user.id}`,
-	object,
-	published: new Date().toISOString(),
-});
diff --git a/packages/backend/src/remote/activitypub/renderer/document.ts b/packages/backend/src/remote/activitypub/renderer/document.ts
deleted file mode 100644
index c973de4c4c..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/document.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { DriveFiles } from '@/models/index.js';
-
-export default (file: DriveFile) => ({
-	type: 'Document',
-	mediaType: file.type,
-	url: DriveFiles.getPublicUrl(file),
-	name: file.comment,
-});
diff --git a/packages/backend/src/remote/activitypub/renderer/emoji.ts b/packages/backend/src/remote/activitypub/renderer/emoji.ts
deleted file mode 100644
index 0bf15eefd9..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/emoji.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import config from '@/config/index.js';
-import { Emoji } from '@/models/entities/emoji.js';
-
-export default (emoji: Emoji) => ({
-	id: `${config.url}/emojis/${emoji.name}`,
-	type: 'Emoji',
-	name: `:${emoji.name}:`,
-	updated: emoji.updatedAt != null ? emoji.updatedAt.toISOString() : new Date().toISOString,
-	icon: {
-		type: 'Image',
-		mediaType: emoji.type || 'image/png',
-		url: emoji.publicUrl || emoji.originalUrl, // || emoji.originalUrl してるのは後方互換性のため
-	},
-});
diff --git a/packages/backend/src/remote/activitypub/renderer/flag.ts b/packages/backend/src/remote/activitypub/renderer/flag.ts
deleted file mode 100644
index 58eadddbaa..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/flag.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import config from '@/config/index.js';
-import { IObject, IActivity } from '@/remote/activitypub/type.js';
-import { ILocalUser, IRemoteUser } from '@/models/entities/user.js';
-import { getInstanceActor } from '@/services/instance-actor.js';
-
-// to anonymise reporters, the reporting actor must be a system user
-// object has to be a uri or array of uris
-export const renderFlag = (user: ILocalUser, object: [string], content: string) => {
-	return {
-		type: 'Flag',
-		actor: `${config.url}/users/${user.id}`,
-		content,
-		object,
-	};
-};
diff --git a/packages/backend/src/remote/activitypub/renderer/follow-relay.ts b/packages/backend/src/remote/activitypub/renderer/follow-relay.ts
deleted file mode 100644
index 2c9678090f..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/follow-relay.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import config from '@/config/index.js';
-import { Relay } from '@/models/entities/relay.js';
-import { ILocalUser } from '@/models/entities/user.js';
-
-export function renderFollowRelay(relay: Relay, relayActor: ILocalUser) {
-	const follow = {
-		id: `${config.url}/activities/follow-relay/${relay.id}`,
-		type: 'Follow',
-		actor: `${config.url}/users/${relayActor.id}`,
-		object: 'https://www.w3.org/ns/activitystreams#Public',
-	};
-
-	return follow;
-}
diff --git a/packages/backend/src/remote/activitypub/renderer/follow-user.ts b/packages/backend/src/remote/activitypub/renderer/follow-user.ts
deleted file mode 100644
index 9a8a16d749..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/follow-user.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import config from '@/config/index.js';
-import { Users } from '@/models/index.js';
-import { User } from '@/models/entities/user.js';
-
-/**
- * Convert (local|remote)(Follower|Followee)ID to URL
- * @param id Follower|Followee ID
- */
-export default async function renderFollowUser(id: User['id']): Promise<any> {
-	const user = await Users.findOneByOrFail({ id: id });
-	return Users.isLocalUser(user) ? `${config.url}/users/${user.id}` : user.uri;
-}
diff --git a/packages/backend/src/remote/activitypub/renderer/follow.ts b/packages/backend/src/remote/activitypub/renderer/follow.ts
deleted file mode 100644
index 00fac18ad5..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/follow.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import config from '@/config/index.js';
-import { User } from '@/models/entities/user.js';
-import { Users } from '@/models/index.js';
-
-export default (follower: { id: User['id']; host: User['host']; uri: User['host'] }, followee: { id: User['id']; host: User['host']; uri: User['host'] }, requestId?: string) => {
-	const follow = {
-		id: requestId ?? `${config.url}/follows/${follower.id}/${followee.id}`,
-		type: 'Follow',
-		actor: Users.isLocalUser(follower) ? `${config.url}/users/${follower.id}` : follower.uri,
-		object: Users.isLocalUser(followee) ? `${config.url}/users/${followee.id}` : followee.uri,
-	} as any;
-
-	return follow;
-};
diff --git a/packages/backend/src/remote/activitypub/renderer/hashtag.ts b/packages/backend/src/remote/activitypub/renderer/hashtag.ts
deleted file mode 100644
index a7b441e006..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/hashtag.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import config from '@/config/index.js';
-
-export default (tag: string) => ({
-	type: 'Hashtag',
-	href: `${config.url}/tags/${encodeURIComponent(tag)}`,
-	name: `#${tag}`,
-});
diff --git a/packages/backend/src/remote/activitypub/renderer/image.ts b/packages/backend/src/remote/activitypub/renderer/image.ts
deleted file mode 100644
index c7d5a31a27..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/image.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { DriveFiles } from '@/models/index.js';
-
-export default (file: DriveFile) => ({
-	type: 'Image',
-	url: DriveFiles.getPublicUrl(file),
-	sensitive: file.isSensitive,
-	name: file.comment,
-});
diff --git a/packages/backend/src/remote/activitypub/renderer/index.ts b/packages/backend/src/remote/activitypub/renderer/index.ts
deleted file mode 100644
index f100b77ce5..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/index.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import config from '@/config/index.js';
-import { v4 as uuid } from 'uuid';
-import { IActivity } from '../type.js';
-import { LdSignature } from '../misc/ld-signature.js';
-import { getUserKeypair } from '@/misc/keypair-store.js';
-import { User } from '@/models/entities/user.js';
-
-export const renderActivity = (x: any): IActivity | null => {
-	if (x == null) return null;
-
-	if (typeof x === 'object' && x.id == null) {
-		x.id = `${config.url}/${uuid()}`;
-	}
-
-	return Object.assign({
-		'@context': [
-			'https://www.w3.org/ns/activitystreams',
-			'https://w3id.org/security/v1',
-			{
-				// as non-standards
-				manuallyApprovesFollowers: 'as:manuallyApprovesFollowers',
-				sensitive: 'as:sensitive',
-				Hashtag: 'as:Hashtag',
-				quoteUrl: 'as:quoteUrl',
-				// Mastodon
-				toot: 'http://joinmastodon.org/ns#',
-				Emoji: 'toot:Emoji',
-				featured: 'toot:featured',
-				discoverable: 'toot:discoverable',
-				// schema
-				schema: 'http://schema.org#',
-				PropertyValue: 'schema:PropertyValue',
-				value: 'schema:value',
-				// Misskey
-				misskey: 'https://misskey-hub.net/ns#',
-				'_misskey_content': 'misskey:_misskey_content',
-				'_misskey_quote': 'misskey:_misskey_quote',
-				'_misskey_reaction': 'misskey:_misskey_reaction',
-				'_misskey_votes': 'misskey:_misskey_votes',
-				'_misskey_talk': 'misskey:_misskey_talk',
-				'isCat': 'misskey:isCat',
-				// vcard
-				vcard: 'http://www.w3.org/2006/vcard/ns#',
-			},
-		],
-	}, x);
-};
-
-export const attachLdSignature = async (activity: any, user: { id: User['id']; host: null; }): Promise<IActivity | null> => {
-	if (activity == null) return null;
-
-	const keypair = await getUserKeypair(user.id);
-
-	const ldSignature = new LdSignature();
-	ldSignature.debug = false;
-	activity = await ldSignature.signRsaSignature2017(activity, keypair.privateKey, `${config.url}/users/${user.id}#main-key`);
-
-	return activity;
-};
diff --git a/packages/backend/src/remote/activitypub/renderer/key.ts b/packages/backend/src/remote/activitypub/renderer/key.ts
deleted file mode 100644
index c4f3d464f8..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/key.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import config from '@/config/index.js';
-import { ILocalUser } from '@/models/entities/user.js';
-import { UserKeypair } from '@/models/entities/user-keypair.js';
-import { createPublicKey } from 'node:crypto';
-
-export default (user: ILocalUser, key: UserKeypair, postfix?: string) => ({
-	id: `${config.url}/users/${user.id}${postfix || '/publickey'}`,
-	type: 'Key',
-	owner: `${config.url}/users/${user.id}`,
-	publicKeyPem: createPublicKey(key.publicKey).export({
-		type: 'spki',
-		format: 'pem',
-	}),
-});
diff --git a/packages/backend/src/remote/activitypub/renderer/like.ts b/packages/backend/src/remote/activitypub/renderer/like.ts
deleted file mode 100644
index 00fb72e8a3..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/like.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import config from '@/config/index.js';
-import { NoteReaction } from '@/models/entities/note-reaction.js';
-import { Note } from '@/models/entities/note.js';
-import { Emojis } from '@/models/index.js';
-import { IsNull } from 'typeorm';
-import renderEmoji from './emoji.js';
-
-export const renderLike = async (noteReaction: NoteReaction, note: Note) => {
-	const reaction = noteReaction.reaction;
-
-	const object = {
-		type: 'Like',
-		id: `${config.url}/likes/${noteReaction.id}`,
-		actor: `${config.url}/users/${noteReaction.userId}`,
-		object: note.uri ? note.uri : `${config.url}/notes/${noteReaction.noteId}`,
-		content: reaction,
-		_misskey_reaction: reaction,
-	} as any;
-
-	if (reaction.startsWith(':')) {
-		const name = reaction.replace(/:/g, '');
-		const emoji = await Emojis.findOneBy({
-			name,
-			host: IsNull(),
-		});
-
-		if (emoji) object.tag = [ renderEmoji(emoji) ];
-	}
-
-	return object;
-};
diff --git a/packages/backend/src/remote/activitypub/renderer/mention.ts b/packages/backend/src/remote/activitypub/renderer/mention.ts
deleted file mode 100644
index c7e62e8840..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/mention.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import config from '@/config/index.js';
-import { User, ILocalUser } from '@/models/entities/user.js';
-import { Users } from '@/models/index.js';
-
-export default (mention: User) => ({
-	type: 'Mention',
-	href: Users.isRemoteUser(mention) ? mention.uri : `${config.url}/users/${(mention as ILocalUser).id}`,
-	name: Users.isRemoteUser(mention) ? `@${mention.username}@${mention.host}` : `@${(mention as ILocalUser).username}`,
-});
diff --git a/packages/backend/src/remote/activitypub/renderer/note.ts b/packages/backend/src/remote/activitypub/renderer/note.ts
deleted file mode 100644
index b3bafaa3ab..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/note.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-import { In, IsNull } from 'typeorm';
-import config from '@/config/index.js';
-import { Note, IMentionedRemoteUsers } from '@/models/entities/note.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { DriveFiles, Notes, Users, Emojis, Polls } from '@/models/index.js';
-import { Emoji } from '@/models/entities/emoji.js';
-import { Poll } from '@/models/entities/poll.js';
-import toHtml from '../misc/get-note-html.js';
-import renderEmoji from './emoji.js';
-import renderMention from './mention.js';
-import renderHashtag from './hashtag.js';
-import renderDocument from './document.js';
-
-export default async function renderNote(note: Note, dive = true, isTalk = false): Promise<Record<string, unknown>> {
-	const getPromisedFiles = async (ids: string[]) => {
-		if (!ids || ids.length === 0) return [];
-		const items = await DriveFiles.findBy({ id: In(ids) });
-		return ids.map(id => items.find(item => item.id === id)).filter(item => item != null) as DriveFile[];
-	};
-
-	let inReplyTo;
-	let inReplyToNote: Note | null;
-
-	if (note.replyId) {
-		inReplyToNote = await Notes.findOneBy({ id: note.replyId });
-
-		if (inReplyToNote != null) {
-			const inReplyToUser = await Users.findOneBy({ id: inReplyToNote.userId });
-
-			if (inReplyToUser != null) {
-				if (inReplyToNote.uri) {
-					inReplyTo = inReplyToNote.uri;
-				} else {
-					if (dive) {
-						inReplyTo = await renderNote(inReplyToNote, false);
-					} else {
-						inReplyTo = `${config.url}/notes/${inReplyToNote.id}`;
-					}
-				}
-			}
-		}
-	} else {
-		inReplyTo = null;
-	}
-
-	let quote;
-
-	if (note.renoteId) {
-		const renote = await Notes.findOneBy({ id: note.renoteId });
-
-		if (renote) {
-			quote = renote.uri ? renote.uri : `${config.url}/notes/${renote.id}`;
-		}
-	}
-
-	const attributedTo = `${config.url}/users/${note.userId}`;
-
-	const mentions = (JSON.parse(note.mentionedRemoteUsers) as IMentionedRemoteUsers).map(x => x.uri);
-
-	let to: string[] = [];
-	let cc: string[] = [];
-
-	if (note.visibility === 'public') {
-		to = ['https://www.w3.org/ns/activitystreams#Public'];
-		cc = [`${attributedTo}/followers`].concat(mentions);
-	} else if (note.visibility === 'home') {
-		to = [`${attributedTo}/followers`];
-		cc = ['https://www.w3.org/ns/activitystreams#Public'].concat(mentions);
-	} else if (note.visibility === 'followers') {
-		to = [`${attributedTo}/followers`];
-		cc = mentions;
-	} else {
-		to = mentions;
-	}
-
-	const mentionedUsers = note.mentions.length > 0 ? await Users.findBy({
-		id: In(note.mentions),
-	}) : [];
-
-	const hashtagTags = (note.tags || []).map(tag => renderHashtag(tag));
-	const mentionTags = mentionedUsers.map(u => renderMention(u));
-
-	const files = await getPromisedFiles(note.fileIds);
-
-	const text = note.text ?? '';
-	let poll: Poll | null = null;
-
-	if (note.hasPoll) {
-		poll = await Polls.findOneBy({ noteId: note.id });
-	}
-
-	let apText = text;
-
-	if (quote) {
-		apText += `\n\nRE: ${quote}`;
-	}
-
-	const summary = note.cw === '' ? String.fromCharCode(0x200B) : note.cw;
-
-	const content = toHtml(Object.assign({}, note, {
-		text: apText,
-	}));
-
-	const emojis = await getEmojis(note.emojis);
-	const apemojis = emojis.map(emoji => renderEmoji(emoji));
-
-	const tag = [
-		...hashtagTags,
-		...mentionTags,
-		...apemojis,
-	];
-
-	const asPoll = poll ? {
-		type: 'Question',
-		content: toHtml(Object.assign({}, note, {
-			text: text,
-		})),
-		[poll.expiresAt && poll.expiresAt < new Date() ? 'closed' : 'endTime']: poll.expiresAt,
-		[poll.multiple ? 'anyOf' : 'oneOf']: poll.choices.map((text, i) => ({
-			type: 'Note',
-			name: text,
-			replies: {
-				type: 'Collection',
-				totalItems: poll!.votes[i],
-			},
-		})),
-	} : {};
-
-	const asTalk = isTalk ? {
-		_misskey_talk: true,
-	} : {};
-
-	return {
-		id: `${config.url}/notes/${note.id}`,
-		type: 'Note',
-		attributedTo,
-		summary,
-		content,
-		_misskey_content: text,
-		source: {
-			content: text,
-			mediaType: "text/x.misskeymarkdown",
-		},
-		_misskey_quote: quote,
-		quoteUrl: quote,
-		published: note.createdAt.toISOString(),
-		to,
-		cc,
-		inReplyTo,
-		attachment: files.map(renderDocument),
-		sensitive: note.cw != null || files.some(file => file.isSensitive),
-		tag,
-		...asPoll,
-		...asTalk,
-	};
-}
-
-export async function getEmojis(names: string[]): Promise<Emoji[]> {
-	if (names == null || names.length === 0) return [];
-
-	const emojis = await Promise.all(
-		names.map(name => Emojis.findOneBy({
-			name,
-			host: IsNull(),
-		})),
-	);
-
-	return emojis.filter(emoji => emoji != null) as Emoji[];
-}
diff --git a/packages/backend/src/remote/activitypub/renderer/ordered-collection-page.ts b/packages/backend/src/remote/activitypub/renderer/ordered-collection-page.ts
deleted file mode 100644
index c5e25f577b..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/ordered-collection-page.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Render OrderedCollectionPage
- * @param id URL of self
- * @param totalItems Number of total items
- * @param orderedItems Items
- * @param partOf URL of base
- * @param prev URL of prev page (optional)
- * @param next URL of next page (optional)
- */
-export default function(id: string, totalItems: any, orderedItems: any, partOf: string, prev?: string, next?: string) {
-	const page = {
-		id,
-		partOf,
-		type: 'OrderedCollectionPage',
-		totalItems,
-		orderedItems,
-	} as any;
-
-	if (prev) page.prev = prev;
-	if (next) page.next = next;
-
-	return page;
-}
diff --git a/packages/backend/src/remote/activitypub/renderer/ordered-collection.ts b/packages/backend/src/remote/activitypub/renderer/ordered-collection.ts
deleted file mode 100644
index ff9a77be3d..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/ordered-collection.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Render OrderedCollection
- * @param id URL of self
- * @param totalItems Total number of items
- * @param first URL of first page (optional)
- * @param last URL of last page (optional)
- * @param orderedItems attached objects (optional)
- */
-export default function(id: string | null, totalItems: any, first?: string, last?: string, orderedItems?: Record<string, unknown>[]): {
-	id: string | null;
-	type: 'OrderedCollection';
-	totalItems: any;
-	first?: string;
-	last?: string;
-	orderedItems?: Record<string, unknown>[];
-} {
-	const page: any = {
-		id,
-		type: 'OrderedCollection',
-		totalItems,
-	};
-
-	if (first) page.first = first;
-	if (last) page.last = last;
-	if (orderedItems) page.orderedItems = orderedItems;
-
-	return page;
-}
diff --git a/packages/backend/src/remote/activitypub/renderer/person.ts b/packages/backend/src/remote/activitypub/renderer/person.ts
deleted file mode 100644
index cd2fd74d47..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/person.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { URL } from 'node:url';
-import * as mfm from 'mfm-js';
-import renderImage from './image.js';
-import renderKey from './key.js';
-import config from '@/config/index.js';
-import { ILocalUser } from '@/models/entities/user.js';
-import { toHtml } from '../../../mfm/to-html.js';
-import { getEmojis } from './note.js';
-import renderEmoji from './emoji.js';
-import { IIdentifier } from '../models/identifier.js';
-import renderHashtag from './hashtag.js';
-import { DriveFiles, UserProfiles } from '@/models/index.js';
-import { getUserKeypair } from '@/misc/keypair-store.js';
-
-export async function renderPerson(user: ILocalUser) {
-	const id = `${config.url}/users/${user.id}`;
-	const isSystem = !!user.username.match(/\./);
-
-	const [avatar, banner, profile] = await Promise.all([
-		user.avatarId ? DriveFiles.findOneBy({ id: user.avatarId }) : Promise.resolve(undefined),
-		user.bannerId ? DriveFiles.findOneBy({ id: user.bannerId }) : Promise.resolve(undefined),
-		UserProfiles.findOneByOrFail({ userId: user.id }),
-	]);
-
-	const attachment: {
-		type: 'PropertyValue',
-		name: string,
-		value: string,
-		identifier?: IIdentifier
-	}[] = [];
-
-	if (profile.fields) {
-		for (const field of profile.fields) {
-			attachment.push({
-				type: 'PropertyValue',
-				name: field.name,
-				value: (field.value != null && field.value.match(/^https?:/))
-					? `<a href="${new URL(field.value).href}" rel="me nofollow noopener" target="_blank">${new URL(field.value).href}</a>`
-					: field.value,
-			});
-		}
-	}
-
-	const emojis = await getEmojis(user.emojis);
-	const apemojis = emojis.map(emoji => renderEmoji(emoji));
-
-	const hashtagTags = (user.tags || []).map(tag => renderHashtag(tag));
-
-	const tag = [
-		...apemojis,
-		...hashtagTags,
-	];
-
-	const keypair = await getUserKeypair(user.id);
-
-	const person = {
-		type: isSystem ? 'Application' : user.isBot ? 'Service' : 'Person',
-		id,
-		inbox: `${id}/inbox`,
-		outbox: `${id}/outbox`,
-		followers: `${id}/followers`,
-		following: `${id}/following`,
-		featured: `${id}/collections/featured`,
-		sharedInbox: `${config.url}/inbox`,
-		endpoints: { sharedInbox: `${config.url}/inbox` },
-		url: `${config.url}/@${user.username}`,
-		preferredUsername: user.username,
-		name: user.name,
-		summary: profile.description ? toHtml(mfm.parse(profile.description)) : null,
-		icon: avatar ? renderImage(avatar) : null,
-		image: banner ? renderImage(banner) : null,
-		tag,
-		manuallyApprovesFollowers: user.isLocked,
-		discoverable: !!user.isExplorable,
-		publicKey: renderKey(user, keypair, `#main-key`),
-		isCat: user.isCat,
-		attachment: attachment.length ? attachment : undefined,
-	} as any;
-
-	if (profile?.birthday) {
-		person['vcard:bday'] = profile.birthday;
-	}
-
-	if (profile?.location) {
-		person['vcard:Address'] = profile.location;
-	}
-
-	return person;
-}
diff --git a/packages/backend/src/remote/activitypub/renderer/question.ts b/packages/backend/src/remote/activitypub/renderer/question.ts
deleted file mode 100644
index d4d1b590af..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/question.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import config from '@/config/index.js';
-import { User } from '@/models/entities/user.js';
-import { Note } from '@/models/entities/note.js';
-import { Poll } from '@/models/entities/poll.js';
-
-export default async function renderQuestion(user: { id: User['id'] }, note: Note, poll: Poll) {
-	const question = {
-		type: 'Question',
-		id: `${config.url}/questions/${note.id}`,
-		actor: `${config.url}/users/${user.id}`,
-		content: note.text || '',
-		[poll.multiple ? 'anyOf' : 'oneOf']: poll.choices.map((text, i) => ({
-			name: text,
-			_misskey_votes: poll.votes[i],
-			replies: {
-				type: 'Collection',
-				totalItems: poll.votes[i],
-			},
-		})),
-	};
-
-	return question;
-}
diff --git a/packages/backend/src/remote/activitypub/renderer/read.ts b/packages/backend/src/remote/activitypub/renderer/read.ts
deleted file mode 100644
index a30e649f64..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/read.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import config from '@/config/index.js';
-import { User } from '@/models/entities/user.js';
-import { MessagingMessage } from '@/models/entities/messaging-message.js';
-
-export const renderReadActivity = (user: { id: User['id'] }, message: MessagingMessage) => ({
-	type: 'Read',
-	actor: `${config.url}/users/${user.id}`,
-	object: message.uri,
-});
diff --git a/packages/backend/src/remote/activitypub/renderer/reject.ts b/packages/backend/src/remote/activitypub/renderer/reject.ts
deleted file mode 100644
index ab4cc1646a..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/reject.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import config from '@/config/index.js';
-import { User } from '@/models/entities/user.js';
-
-export default (object: any, user: { id: User['id'] }) => ({
-	type: 'Reject',
-	actor: `${config.url}/users/${user.id}`,
-	object,
-});
diff --git a/packages/backend/src/remote/activitypub/renderer/remove.ts b/packages/backend/src/remote/activitypub/renderer/remove.ts
deleted file mode 100644
index 1be3edc5d5..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/remove.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import config from '@/config/index.js';
-import { User } from '@/models/entities/user.js';
-
-export default (user: { id: User['id'] }, target: any, object: any) => ({
-	type: 'Remove',
-	actor: `${config.url}/users/${user.id}`,
-	target,
-	object,
-});
diff --git a/packages/backend/src/remote/activitypub/renderer/tombstone.ts b/packages/backend/src/remote/activitypub/renderer/tombstone.ts
deleted file mode 100644
index 313ca74e9d..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/tombstone.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export default (id: string) => ({
-	id,
-	type: 'Tombstone',
-});
diff --git a/packages/backend/src/remote/activitypub/renderer/undo.ts b/packages/backend/src/remote/activitypub/renderer/undo.ts
deleted file mode 100644
index 46631df9ea..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/undo.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import config from '@/config/index.js';
-import { ILocalUser, User } from '@/models/entities/user.js';
-
-export default (object: any, user: { id: User['id'] }) => {
-	if (object == null) return null;
-	const id = typeof object.id === 'string' && object.id.startsWith(config.url) ? `${object.id}/undo` : undefined;
-
-	return {
-		type: 'Undo',
-		...(id ? { id } : {}),
-		actor: `${config.url}/users/${user.id}`,
-		object,
-		published: new Date().toISOString(),
-	};
-};
diff --git a/packages/backend/src/remote/activitypub/renderer/update.ts b/packages/backend/src/remote/activitypub/renderer/update.ts
deleted file mode 100644
index cf880f03fc..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/update.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import config from '@/config/index.js';
-import { User } from '@/models/entities/user.js';
-
-export default (object: any, user: { id: User['id'] }) => {
-	const activity = {
-		id: `${config.url}/users/${user.id}#updates/${new Date().getTime()}`,
-		actor: `${config.url}/users/${user.id}`,
-		type: 'Update',
-		to: [ 'https://www.w3.org/ns/activitystreams#Public' ],
-		object,
-		published: new Date().toISOString(),
-	} as any;
-
-	return activity;
-};
diff --git a/packages/backend/src/remote/activitypub/renderer/vote.ts b/packages/backend/src/remote/activitypub/renderer/vote.ts
deleted file mode 100644
index b6eb8e095d..0000000000
--- a/packages/backend/src/remote/activitypub/renderer/vote.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import config from '@/config/index.js';
-import { Note } from '@/models/entities/note.js';
-import { IRemoteUser, User } from '@/models/entities/user.js';
-import { PollVote } from '@/models/entities/poll-vote.js';
-import { Poll } from '@/models/entities/poll.js';
-
-export default async function renderVote(user: { id: User['id'] }, vote: PollVote, note: Note, poll: Poll, pollOwner: IRemoteUser): Promise<any> {
-	return {
-		id: `${config.url}/users/${user.id}#votes/${vote.id}/activity`,
-		actor: `${config.url}/users/${user.id}`,
-		type: 'Create',
-		to: [pollOwner.uri],
-		published: new Date().toISOString(),
-		object: {
-			id: `${config.url}/users/${user.id}#votes/${vote.id}`,
-			type: 'Note',
-			attributedTo: `${config.url}/users/${user.id}`,
-			to: [pollOwner.uri],
-			inReplyTo: note.uri,
-			name: poll.choices[vote.choice],
-		},
-	};
-}
diff --git a/packages/backend/src/remote/activitypub/request.ts b/packages/backend/src/remote/activitypub/request.ts
deleted file mode 100644
index 5cbfd8c259..0000000000
--- a/packages/backend/src/remote/activitypub/request.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import config from '@/config/index.js';
-import { getUserKeypair } from '@/misc/keypair-store.js';
-import { User } from '@/models/entities/user.js';
-import { getResponse } from '../../misc/fetch.js';
-import { createSignedPost, createSignedGet } from './ap-request.js';
-
-export default async (user: { id: User['id'] }, url: string, object: any) => {
-	const body = JSON.stringify(object);
-
-	const keypair = await getUserKeypair(user.id);
-
-	const req = createSignedPost({
-		key: {
-			privateKeyPem: keypair.privateKey,
-			keyId: `${config.url}/users/${user.id}#main-key`,
-		},
-		url,
-		body,
-		additionalHeaders: {
-			'User-Agent': config.userAgent,
-		},
-	});
-
-	await getResponse({
-		url,
-		method: req.request.method,
-		headers: req.request.headers,
-		body,
-	});
-};
-
-/**
- * Get AP object with http-signature
- * @param user http-signature user
- * @param url URL to fetch
- */
-export async function signedGet(url: string, user: { id: User['id'] }) {
-	const keypair = await getUserKeypair(user.id);
-
-	const req = createSignedGet({
-		key: {
-			privateKeyPem: keypair.privateKey,
-			keyId: `${config.url}/users/${user.id}#main-key`,
-		},
-		url,
-		additionalHeaders: {
-			'User-Agent': config.userAgent,
-		},
-	});
-
-	const res = await getResponse({
-		url,
-		method: req.request.method,
-		headers: req.request.headers,
-	});
-
-	return await res.json();
-}
diff --git a/packages/backend/src/remote/activitypub/resolver.ts b/packages/backend/src/remote/activitypub/resolver.ts
deleted file mode 100644
index 2f9af43c0c..0000000000
--- a/packages/backend/src/remote/activitypub/resolver.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import config from '@/config/index.js';
-import { getJson } from '@/misc/fetch.js';
-import { ILocalUser } from '@/models/entities/user.js';
-import { getInstanceActor } from '@/services/instance-actor.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { extractDbHost, isSelfHost } from '@/misc/convert-host.js';
-import { signedGet } from './request.js';
-import { IObject, isCollectionOrOrderedCollection, ICollection, IOrderedCollection } from './type.js';
-import { FollowRequests, Notes, NoteReactions, Polls, Users } from '@/models/index.js';
-import { parseUri } from './db-resolver.js';
-import renderNote from '@/remote/activitypub/renderer/note.js';
-import { renderLike } from '@/remote/activitypub/renderer/like.js';
-import { renderPerson } from '@/remote/activitypub/renderer/person.js';
-import renderQuestion from '@/remote/activitypub/renderer/question.js';
-import renderCreate from '@/remote/activitypub/renderer/create.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderFollow from '@/remote/activitypub/renderer/follow.js';
-
-export default class Resolver {
-	private history: Set<string>;
-	private user?: ILocalUser;
-
-	constructor() {
-		this.history = new Set();
-	}
-
-	public getHistory(): string[] {
-		return Array.from(this.history);
-	}
-
-	public async resolveCollection(value: string | IObject): Promise<ICollection | IOrderedCollection> {
-		const collection = typeof value === 'string'
-			? await this.resolve(value)
-			: value;
-
-		if (isCollectionOrOrderedCollection(collection)) {
-			return collection;
-		} else {
-			throw new Error(`unrecognized collection type: ${collection.type}`);
-		}
-	}
-
-	public async resolve(value: string | IObject): Promise<IObject> {
-		if (value == null) {
-			throw new Error('resolvee is null (or undefined)');
-		}
-
-		if (typeof value !== 'string') {
-			return value;
-		}
-
-		if (value.includes('#')) {
-			// URLs with fragment parts cannot be resolved correctly because
-			// the fragment part does not get transmitted over HTTP(S).
-			// Avoid strange behaviour by not trying to resolve these at all.
-			throw new Error(`cannot resolve URL with fragment: ${value}`);
-		}
-
-		if (this.history.has(value)) {
-			throw new Error('cannot resolve already resolved one');
-		}
-
-		this.history.add(value);
-
-		const host = extractDbHost(value);
-		if (isSelfHost(host)) {
-			return await this.resolveLocal(value);
-		}
-
-		const meta = await fetchMeta();
-		if (meta.blockedHosts.includes(host)) {
-			throw new Error('Instance is blocked');
-		}
-
-		if (config.signToActivityPubGet && !this.user) {
-			this.user = await getInstanceActor();
-		}
-
-		const object = (this.user
-			? await signedGet(value, this.user)
-			: await getJson(value, 'application/activity+json, application/ld+json')) as IObject;
-
-		if (object == null || (
-			Array.isArray(object['@context']) ?
-				!(object['@context'] as unknown[]).includes('https://www.w3.org/ns/activitystreams') :
-				object['@context'] !== 'https://www.w3.org/ns/activitystreams'
-		)) {
-			throw new Error('invalid response');
-		}
-
-		return object;
-	}
-
-	private resolveLocal(url: string): Promise<IObject> {
-		const parsed = parseUri(url);
-		if (!parsed.local) throw new Error('resolveLocal: not local');
-
-		switch (parsed.type) {
-			case 'notes':
-				return Notes.findOneByOrFail({ id: parsed.id })
-				.then(note => {
-					if (parsed.rest === 'activity') {
-						// this refers to the create activity and not the note itself
-						return renderActivity(renderCreate(renderNote(note)));
-					} else {
-						return renderNote(note);
-					}
-				});
-			case 'users':
-				return Users.findOneByOrFail({ id: parsed.id })
-				.then(user => renderPerson(user as ILocalUser));
-			case 'questions':
-				// Polls are indexed by the note they are attached to.
-				return Promise.all([
-					Notes.findOneByOrFail({ id: parsed.id }),
-					Polls.findOneByOrFail({ noteId: parsed.id }),
-				])
-				.then(([note, poll]) => renderQuestion({ id: note.userId }, note, poll));
-			case 'likes':
-				return NoteReactions.findOneByOrFail({ id: parsed.id }).then(reaction => renderActivity(renderLike(reaction, { uri: null })));
-			case 'follows':
-				// rest should be <followee id>
-				if (parsed.rest == null || !/^\w+$/.test(parsed.rest)) throw new Error('resolveLocal: invalid follow URI');
-
-				return Promise.all(
-					[parsed.id, parsed.rest].map(id => Users.findOneByOrFail({ id }))
-				)
-				.then(([follower, followee]) => renderActivity(renderFollow(follower, followee, url)));
-			default:
-				throw new Error(`resolveLocal: type ${type} unhandled`);
-		}
-	}
-}
diff --git a/packages/backend/src/remote/activitypub/type.ts b/packages/backend/src/remote/activitypub/type.ts
deleted file mode 100644
index de7eb0ed83..0000000000
--- a/packages/backend/src/remote/activitypub/type.ts
+++ /dev/null
@@ -1,295 +0,0 @@
-export type obj = { [x: string]: any };
-export type ApObject = IObject | string | (IObject | string)[];
-
-export interface IObject {
-	'@context': string | string[] | obj | obj[];
-	type: string | string[];
-	id?: string;
-	summary?: string;
-	published?: string;
-	cc?: ApObject;
-	to?: ApObject;
-	attributedTo: ApObject;
-	attachment?: any[];
-	inReplyTo?: any;
-	replies?: ICollection;
-	content?: string;
-	name?: string;
-	startTime?: Date;
-	endTime?: Date;
-	icon?: any;
-	image?: any;
-	url?: ApObject;
-	href?: string;
-	tag?: IObject | IObject[];
-	sensitive?: boolean;
-}
-
-/**
- * Get array of ActivityStreams Objects id
- */
-export function getApIds(value: ApObject | undefined): string[] {
-	if (value == null) return [];
-	const array = Array.isArray(value) ? value : [value];
-	return array.map(x => getApId(x));
-}
-
-/**
- * Get first ActivityStreams Object id
- */
-export function getOneApId(value: ApObject): string {
-	const firstOne = Array.isArray(value) ? value[0] : value;
-	return getApId(firstOne);
-}
-
-/**
- * Get ActivityStreams Object id
- */
-export function getApId(value: string | IObject): string {
-	if (typeof value === 'string') return value;
-	if (typeof value.id === 'string') return value.id;
-	throw new Error('cannot detemine id');
-}
-
-/**
- * Get ActivityStreams Object type
- */
-export function getApType(value: IObject): string {
-	if (typeof value.type === 'string') return value.type;
-	if (Array.isArray(value.type) && typeof value.type[0] === 'string') return value.type[0];
-	throw new Error('cannot detect type');
-}
-
-export function getOneApHrefNullable(value: ApObject | undefined): string | undefined {
-	const firstOne = Array.isArray(value) ? value[0] : value;
-	return getApHrefNullable(firstOne);
-}
-
-export function getApHrefNullable(value: string | IObject | undefined): string | undefined {
-	if (typeof value === 'string') return value;
-	if (typeof value?.href === 'string') return value.href;
-	return undefined;
-}
-
-export interface IActivity extends IObject {
-	//type: 'Activity';
-	actor: IObject | string;
-	object: IObject | string;
-	target?: IObject | string;
-	/** LD-Signature */
-	signature?: {
-		type: string;
-		created: Date;
-		creator: string;
-		domain?: string;
-		nonce?: string;
-		signatureValue: string;
-	};
-}
-
-export interface ICollection extends IObject {
-	type: 'Collection';
-	totalItems: number;
-	items: ApObject;
-}
-
-export interface IOrderedCollection extends IObject {
-	type: 'OrderedCollection';
-	totalItems: number;
-	orderedItems: ApObject;
-}
-
-export const validPost = ['Note', 'Question', 'Article', 'Audio', 'Document', 'Image', 'Page', 'Video', 'Event'];
-
-export const isPost = (object: IObject): object is IPost =>
-	validPost.includes(getApType(object));
-
-export interface IPost extends IObject {
-	type: 'Note' | 'Question' | 'Article' | 'Audio' | 'Document' | 'Image' | 'Page' | 'Video' | 'Event';
-	source?: {
-		content: string;
-		mediaType: string;
-	};
-	_misskey_quote?: string;
-	quoteUrl?: string;
-	_misskey_talk: boolean;
-}
-
-export interface IQuestion extends IObject {
-	type: 'Note' | 'Question';
-	source?: {
-		content: string;
-		mediaType: string;
-	};
-	_misskey_quote?: string;
-	quoteUrl?: string;
-	oneOf?: IQuestionChoice[];
-	anyOf?: IQuestionChoice[];
-	endTime?: Date;
-	closed?: Date;
-}
-
-export const isQuestion = (object: IObject): object is IQuestion =>
-	getApType(object) === 'Note' || getApType(object) === 'Question';
-
-interface IQuestionChoice {
-	name?: string;
-	replies?: ICollection;
-	_misskey_votes?: number;
-}
-export interface ITombstone extends IObject {
-	type: 'Tombstone';
-	formerType?: string;
-	deleted?: Date;
-}
-
-export const isTombstone = (object: IObject): object is ITombstone =>
-	getApType(object) === 'Tombstone';
-
-export const validActor = ['Person', 'Service', 'Group', 'Organization', 'Application'];
-
-export const isActor = (object: IObject): object is IActor =>
-	validActor.includes(getApType(object));
-
-export interface IActor extends IObject {
-	type: 'Person' | 'Service' | 'Organization' | 'Group' | 'Application';
-	name?: string;
-	preferredUsername?: string;
-	manuallyApprovesFollowers?: boolean;
-	discoverable?: boolean;
-	inbox: string;
-	sharedInbox?: string;	// 後方互換性のため
-	publicKey?: {
-		id: string;
-		publicKeyPem: string;
-	};
-	followers?: string | ICollection | IOrderedCollection;
-	following?: string | ICollection | IOrderedCollection;
-	featured?: string | IOrderedCollection;
-	outbox: string | IOrderedCollection;
-	endpoints?: {
-		sharedInbox?: string;
-	};
-	'vcard:bday'?: string;
-	'vcard:Address'?: string;
-}
-
-export const isCollection = (object: IObject): object is ICollection =>
-	getApType(object) === 'Collection';
-
-export const isOrderedCollection = (object: IObject): object is IOrderedCollection =>
-	getApType(object) === 'OrderedCollection';
-
-export const isCollectionOrOrderedCollection = (object: IObject): object is ICollection | IOrderedCollection =>
-	isCollection(object) || isOrderedCollection(object);
-
-export interface IApPropertyValue extends IObject {
-	type: 'PropertyValue';
-	identifier: IApPropertyValue;
-	name: string;
-	value: string;
-}
-
-export const isPropertyValue = (object: IObject): object is IApPropertyValue =>
-	object &&
-	getApType(object) === 'PropertyValue' &&
-	typeof object.name === 'string' &&
-	typeof (object as any).value === 'string';
-
-export interface IApMention extends IObject {
-	type: 'Mention';
-	href: string;
-}
-
-export const isMention = (object: IObject): object is IApMention =>
-	getApType(object) === 'Mention' &&
-	typeof object.href === 'string';
-
-export interface IApHashtag extends IObject {
-	type: 'Hashtag';
-	name: string;
-}
-
-export const isHashtag = (object: IObject): object is IApHashtag =>
-	getApType(object) === 'Hashtag' &&
-	typeof object.name === 'string';
-
-export interface IApEmoji extends IObject {
-	type: 'Emoji';
-	updated: Date;
-}
-
-export const isEmoji = (object: IObject): object is IApEmoji =>
-	getApType(object) === 'Emoji' && !Array.isArray(object.icon) && object.icon.url != null;
-
-export interface ICreate extends IActivity {
-	type: 'Create';
-}
-
-export interface IDelete extends IActivity {
-	type: 'Delete';
-}
-
-export interface IUpdate extends IActivity {
-	type: 'Update';
-}
-
-export interface IRead extends IActivity {
-	type: 'Read';
-}
-
-export interface IUndo extends IActivity {
-	type: 'Undo';
-}
-
-export interface IFollow extends IActivity {
-	type: 'Follow';
-}
-
-export interface IAccept extends IActivity {
-	type: 'Accept';
-}
-
-export interface IReject extends IActivity {
-	type: 'Reject';
-}
-
-export interface IAdd extends IActivity {
-	type: 'Add';
-}
-
-export interface IRemove extends IActivity {
-	type: 'Remove';
-}
-
-export interface ILike extends IActivity {
-	type: 'Like' | 'EmojiReaction' | 'EmojiReact';
-	_misskey_reaction?: string;
-}
-
-export interface IAnnounce extends IActivity {
-	type: 'Announce';
-}
-
-export interface IBlock extends IActivity {
-	type: 'Block';
-}
-
-export interface IFlag extends IActivity {
-	type: 'Flag';
-}
-
-export const isCreate = (object: IObject): object is ICreate => getApType(object) === 'Create';
-export const isDelete = (object: IObject): object is IDelete => getApType(object) === 'Delete';
-export const isUpdate = (object: IObject): object is IUpdate => getApType(object) === 'Update';
-export const isRead = (object: IObject): object is IRead => getApType(object) === 'Read';
-export const isUndo = (object: IObject): object is IUndo => getApType(object) === 'Undo';
-export const isFollow = (object: IObject): object is IFollow => getApType(object) === 'Follow';
-export const isAccept = (object: IObject): object is IAccept => getApType(object) === 'Accept';
-export const isReject = (object: IObject): object is IReject => getApType(object) === 'Reject';
-export const isAdd = (object: IObject): object is IAdd => getApType(object) === 'Add';
-export const isRemove = (object: IObject): object is IRemove => getApType(object) === 'Remove';
-export const isLike = (object: IObject): object is ILike => getApType(object) === 'Like' || getApType(object) === 'EmojiReaction' || getApType(object) === 'EmojiReact';
-export const isAnnounce = (object: IObject): object is IAnnounce => getApType(object) === 'Announce';
-export const isBlock = (object: IObject): object is IBlock => getApType(object) === 'Block';
-export const isFlag = (object: IObject): object is IFlag => getApType(object) === 'Flag';
diff --git a/packages/backend/src/remote/logger.ts b/packages/backend/src/remote/logger.ts
deleted file mode 100644
index 4921f53bd8..0000000000
--- a/packages/backend/src/remote/logger.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Logger from '@/services/logger.js';
-
-export const remoteLogger = new Logger('remote', 'cyan');
diff --git a/packages/backend/src/remote/resolve-user.ts b/packages/backend/src/remote/resolve-user.ts
deleted file mode 100644
index 6fc6f2c4d3..0000000000
--- a/packages/backend/src/remote/resolve-user.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { URL } from 'node:url';
-import webFinger from './webfinger.js';
-import config from '@/config/index.js';
-import { createPerson, updatePerson } from './activitypub/models/person.js';
-import { remoteLogger } from './logger.js';
-import chalk from 'chalk';
-import { User, IRemoteUser } from '@/models/entities/user.js';
-import { Users } from '@/models/index.js';
-import { toPuny } from '@/misc/convert-host.js';
-import { IsNull } from 'typeorm';
-
-const logger = remoteLogger.createSubLogger('resolve-user');
-
-export async function resolveUser(username: string, host: string | null): Promise<User> {
-	const usernameLower = username.toLowerCase();
-
-	if (host == null) {
-		logger.info(`return local user: ${usernameLower}`);
-		return await Users.findOneBy({ usernameLower, host: IsNull() }).then(u => {
-			if (u == null) {
-				throw new Error('user not found');
-			} else {
-				return u;
-			}
-		});
-	}
-
-	host = toPuny(host);
-
-	if (config.host === host) {
-		logger.info(`return local user: ${usernameLower}`);
-		return await Users.findOneBy({ usernameLower, host: IsNull() }).then(u => {
-			if (u == null) {
-				throw new Error('user not found');
-			} else {
-				return u;
-			}
-		});
-	}
-
-	const user = await Users.findOneBy({ usernameLower, host }) as IRemoteUser | null;
-
-	const acctLower = `${usernameLower}@${host}`;
-
-	if (user == null) {
-		const self = await resolveSelf(acctLower);
-
-		logger.succ(`return new remote user: ${chalk.magenta(acctLower)}`);
-		return await createPerson(self.href);
-	}
-
-	// ユーザー情報が古い場合は、WebFilgerからやりなおして返す
-	if (user.lastFetchedAt == null || Date.now() - user.lastFetchedAt.getTime() > 1000 * 60 * 60 * 24) {
-		// 繋がらないインスタンスに何回も試行するのを防ぐ, 後続の同様処理の連続試行を防ぐ ため 試行前にも更新する
-		await Users.update(user.id, {
-			lastFetchedAt: new Date(),
-		});
-
-		logger.info(`try resync: ${acctLower}`);
-		const self = await resolveSelf(acctLower);
-
-		if (user.uri !== self.href) {
-			// if uri mismatch, Fix (user@host <=> AP's Person id(IRemoteUser.uri)) mapping.
-			logger.info(`uri missmatch: ${acctLower}`);
-			logger.info(`recovery missmatch uri for (username=${username}, host=${host}) from ${user.uri} to ${self.href}`);
-
-			// validate uri
-			const uri = new URL(self.href);
-			if (uri.hostname !== host) {
-				throw new Error(`Invalid uri`);
-			}
-
-			await Users.update({
-				usernameLower,
-				host: host,
-			}, {
-				uri: self.href,
-			});
-		} else {
-			logger.info(`uri is fine: ${acctLower}`);
-		}
-
-		await updatePerson(self.href);
-
-		logger.info(`return resynced remote user: ${acctLower}`);
-		return await Users.findOneBy({ uri: self.href }).then(u => {
-			if (u == null) {
-				throw new Error('user not found');
-			} else {
-				return u;
-			}
-		});
-	}
-
-	logger.info(`return existing remote user: ${acctLower}`);
-	return user;
-}
-
-async function resolveSelf(acctLower: string) {
-	logger.info(`WebFinger for ${chalk.yellow(acctLower)}`);
-	const finger = await webFinger(acctLower).catch(e => {
-		logger.error(`Failed to WebFinger for ${chalk.yellow(acctLower)}: ${ e.statusCode || e.message }`);
-		throw new Error(`Failed to WebFinger for ${acctLower}: ${ e.statusCode || e.message }`);
-	});
-	const self = finger.links.find(link => link.rel != null && link.rel.toLowerCase() === 'self');
-	if (!self) {
-		logger.error(`Failed to WebFinger for ${chalk.yellow(acctLower)}: self link not found`);
-		throw new Error('self link not found');
-	}
-	return self;
-}
diff --git a/packages/backend/src/remote/webfinger.ts b/packages/backend/src/remote/webfinger.ts
deleted file mode 100644
index 337df34c2d..0000000000
--- a/packages/backend/src/remote/webfinger.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { URL } from 'node:url';
-import { getJson } from '@/misc/fetch.js';
-import { query as urlQuery } from '@/prelude/url.js';
-
-type ILink = {
-	href: string;
-	rel?: string;
-};
-
-type IWebFinger = {
-	links: ILink[];
-	subject: string;
-};
-
-export default async function(query: string): Promise<IWebFinger> {
-	const url = genUrl(query);
-
-	return await getJson(url, 'application/jrd+json, application/json') as IWebFinger;
-}
-
-function genUrl(query: string) {
-	if (query.match(/^https?:\/\//)) {
-		const u = new URL(query);
-		return `${u.protocol}//${u.hostname}/.well-known/webfinger?` + urlQuery({ resource: query });
-	}
-
-	const m = query.match(/^([^@]+)@(.*)/);
-	if (m) {
-		const hostname = m[2];
-		return `https://${hostname}/.well-known/webfinger?` + urlQuery({ resource: `acct:${query}` });
-	}
-
-	throw new Error(`Invalid query (${query})`);
-}
diff --git a/packages/backend/src/server/ActivityPubServerService.ts b/packages/backend/src/server/ActivityPubServerService.ts
new file mode 100644
index 0000000000..281da5175d
--- /dev/null
+++ b/packages/backend/src/server/ActivityPubServerService.ts
@@ -0,0 +1,584 @@
+import { Inject, Injectable } from '@nestjs/common';
+import Router from '@koa/router';
+import json from 'koa-json-body';
+import httpSignature from '@peertube/http-signature';
+import { Brackets, In, IsNull, LessThan, Not } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { EmojisRepository, NoteReactionsRepository, UserProfilesRepository, UserNotePiningsRepository, UsersRepository } from '@/models/index.js';
+import * as url from '@/misc/prelude/url.js';
+import { Config } from '@/config.js';
+import { ApRendererService } from '@/core/remote/activitypub/ApRendererService.js';
+import { QueueService } from '@/core/QueueService.js';
+import type { ILocalUser, User } from '@/models/entities/User.js';
+import { UserKeypairStoreService } from '@/core/UserKeypairStoreService.js';
+import type { Following } from '@/models/entities/Following.js';
+import { countIf } from '@/misc/prelude/array.js';
+import type { Note } from '@/models/entities/Note.js';
+import { QueryService } from '@/core/QueryService.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import type { FindOptionsWhere } from 'typeorm';
+
+const ACTIVITY_JSON = 'application/activity+json; charset=utf-8';
+const LD_JSON = 'application/ld+json; profile="https://www.w3.org/ns/activitystreams"; charset=utf-8';
+
+@Injectable()
+export class ActivityPubServerService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.noteReactionsRepository)
+		private noteReactionsRepository: NoteReactionsRepository,
+
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+
+		@Inject(DI.userNotePiningsRepository)
+		private userNotePiningsRepository: UserNotePiningsRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		private utilityService: UtilityService,
+		private userEntityService: UserEntityService,
+		private apRendererService: ApRendererService,
+		private queueService: QueueService,
+		private userKeypairStoreService: UserKeypairStoreService,
+		private queryService: QueryService,
+	) {
+	}
+
+	#setResponseType(ctx: Router.RouterContext) {
+		const accept = ctx.accepts(ACTIVITY_JSON, LD_JSON);
+		if (accept === LD_JSON) {
+			ctx.response.type = LD_JSON;
+		} else {
+			ctx.response.type = ACTIVITY_JSON;
+		}
+	}
+
+	/**
+	 * Pack Create<Note> or Announce Activity
+	 * @param note Note
+	 */
+	async #packActivity(note: Note): Promise<any> {
+		if (note.renoteId && note.text == null && !note.hasPoll && (note.fileIds == null || note.fileIds.length === 0)) {
+			const renote = await Notes.findOneByOrFail({ id: note.renoteId });
+			return this.apRendererService.renderAnnounce(renote.uri ? renote.uri : `${this.config.url}/notes/${renote.id}`, note);
+		}
+
+		return this.apRendererService.renderCreate(await this.apRendererService.renderNote(note, false), note);
+	}
+
+	#inbox(ctx: Router.RouterContext) {
+		let signature;
+
+		try {
+			signature = httpSignature.parseRequest(ctx.req, { 'headers': [] });
+		} catch (e) {
+			ctx.status = 401;
+			return;
+		}
+
+		this.queueService.inbox(ctx.request.body, signature);
+
+		ctx.status = 202;
+	}
+
+	async #followers(ctx: Router.RouterContext) {
+		const userId = ctx.params.user;
+
+		const cursor = ctx.request.query.cursor;
+		if (cursor != null && typeof cursor !== 'string') {
+			ctx.status = 400;
+			return;
+		}
+
+		const page = ctx.request.query.page === 'true';
+
+		const user = await this.usersRepository.findOneBy({
+			id: userId,
+			host: IsNull(),
+		});
+
+		if (user == null) {
+			ctx.status = 404;
+			return;
+		}
+
+		//#region Check ff visibility
+		const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+
+		if (profile.ffVisibility === 'private') {
+			ctx.status = 403;
+			ctx.set('Cache-Control', 'public, max-age=30');
+			return;
+		} else if (profile.ffVisibility === 'followers') {
+			ctx.status = 403;
+			ctx.set('Cache-Control', 'public, max-age=30');
+			return;
+		}
+		//#endregion
+
+		const limit = 10;
+		const partOf = `${this.config.url}/users/${userId}/followers`;
+
+		if (page) {
+			const query = {
+				followeeId: user.id,
+			} as FindOptionsWhere<Following>;
+
+			// カーソルが指定されている場合
+			if (cursor) {
+				query.id = LessThan(cursor);
+			}
+
+			// Get followers
+			const followings = await this.followingsRepository.find({
+				where: query,
+				take: limit + 1,
+				order: { id: -1 },
+			});
+
+			// 「次のページ」があるかどうか
+			const inStock = followings.length === limit + 1;
+			if (inStock) followings.pop();
+
+			const renderedFollowers = await Promise.all(followings.map(following => this.apRendererService.renderFollowUser(following.followerId)));
+			const rendered = this.apRendererService.renderOrderedCollectionPage(
+				`${partOf}?${url.query({
+					page: 'true',
+					cursor,
+				})}`,
+				user.followersCount, renderedFollowers, partOf,
+				undefined,
+				inStock ? `${partOf}?${url.query({
+					page: 'true',
+					cursor: followings[followings.length - 1].id,
+				})}` : undefined,
+			);
+
+			ctx.body = this.apRendererService.renderActivity(rendered);
+			this.#setResponseType(ctx);
+		} else {
+			// index page
+			const rendered = this.apRendererService.renderOrderedCollection(partOf, user.followersCount, `${partOf}?page=true`);
+			ctx.body = this.apRendererService.renderActivity(rendered);
+			ctx.set('Cache-Control', 'public, max-age=180');
+			this.#setResponseType(ctx);
+		}
+	}
+
+	async #following(ctx: Router.RouterContext) {
+		const userId = ctx.params.user;
+
+		const cursor = ctx.request.query.cursor;
+		if (cursor != null && typeof cursor !== 'string') {
+			ctx.status = 400;
+			return;
+		}
+	
+		const page = ctx.request.query.page === 'true';
+	
+		const user = await this.usersRepository.findOneBy({
+			id: userId,
+			host: IsNull(),
+		});
+	
+		if (user == null) {
+			ctx.status = 404;
+			return;
+		}
+	
+		//#region Check ff visibility
+		const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+	
+		if (profile.ffVisibility === 'private') {
+			ctx.status = 403;
+			ctx.set('Cache-Control', 'public, max-age=30');
+			return;
+		} else if (profile.ffVisibility === 'followers') {
+			ctx.status = 403;
+			ctx.set('Cache-Control', 'public, max-age=30');
+			return;
+		}
+		//#endregion
+	
+		const limit = 10;
+		const partOf = `${this.config.url}/users/${userId}/following`;
+	
+		if (page) {
+			const query = {
+				followerId: user.id,
+			} as FindOptionsWhere<Following>;
+	
+			// カーソルが指定されている場合
+			if (cursor) {
+				query.id = LessThan(cursor);
+			}
+	
+			// Get followings
+			const followings = await this.followingsRepository.find({
+				where: query,
+				take: limit + 1,
+				order: { id: -1 },
+			});
+	
+			// 「次のページ」があるかどうか
+			const inStock = followings.length === limit + 1;
+			if (inStock) followings.pop();
+	
+			const renderedFollowees = await Promise.all(followings.map(following => this.apRendererService.renderFollowUser(following.followeeId)));
+			const rendered = this.apRendererService.renderOrderedCollectionPage(
+				`${partOf}?${url.query({
+					page: 'true',
+					cursor,
+				})}`,
+				user.followingCount, renderedFollowees, partOf,
+				undefined,
+				inStock ? `${partOf}?${url.query({
+					page: 'true',
+					cursor: followings[followings.length - 1].id,
+				})}` : undefined,
+			);
+	
+			ctx.body = this.apRendererService.renderActivity(rendered);
+			this.#setResponseType(ctx);
+		} else {
+			// index page
+			const rendered = this.apRendererService.renderOrderedCollection(partOf, user.followingCount, `${partOf}?page=true`);
+			ctx.body = this.apRendererService.renderActivity(rendered);
+			ctx.set('Cache-Control', 'public, max-age=180');
+			this.#setResponseType(ctx);
+		}
+	}
+
+	async #featured(ctx: Router.RouterContext) {
+		const userId = ctx.params.user;
+
+		const user = await this.usersRepository.findOneBy({
+			id: userId,
+			host: IsNull(),
+		});
+
+		if (user == null) {
+			ctx.status = 404;
+			return;
+		}
+
+		const pinings = await this.userNotePiningsRepository.find({
+			where: { userId: user.id },
+			order: { id: 'DESC' },
+		});
+
+		const pinnedNotes = await Promise.all(pinings.map(pining =>
+			this.notesRepository.findOneByOrFail({ id: pining.noteId })));
+
+		const renderedNotes = await Promise.all(pinnedNotes.map(note => this.apRendererService.renderNote(note)));
+
+		const rendered = this.apRendererService.renderOrderedCollection(
+			`${this.config.url}/users/${userId}/collections/featured`,
+			renderedNotes.length, undefined, undefined, renderedNotes,
+		);
+
+		ctx.body = this.apRendererService.renderActivity(rendered);
+		ctx.set('Cache-Control', 'public, max-age=180');
+		this.#setResponseType(ctx);
+	}
+
+	async #outbox(ctx: Router.RouterContext) {
+		const userId = ctx.params.user;
+
+		const sinceId = ctx.request.query.since_id;
+		if (sinceId != null && typeof sinceId !== 'string') {
+			ctx.status = 400;
+			return;
+		}
+	
+		const untilId = ctx.request.query.until_id;
+		if (untilId != null && typeof untilId !== 'string') {
+			ctx.status = 400;
+			return;
+		}
+	
+		const page = ctx.request.query.page === 'true';
+	
+		if (countIf(x => x != null, [sinceId, untilId]) > 1) {
+			ctx.status = 400;
+			return;
+		}
+	
+		const user = await this.usersRepository.findOneBy({
+			id: userId,
+			host: IsNull(),
+		});
+	
+		if (user == null) {
+			ctx.status = 404;
+			return;
+		}
+	
+		const limit = 20;
+		const partOf = `${this.config.url}/users/${userId}/outbox`;
+	
+		if (page) {
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), sinceId, untilId)
+				.andWhere('note.userId = :userId', { userId: user.id })
+				.andWhere(new Brackets(qb => { qb
+					.where('note.visibility = \'public\'')
+					.orWhere('note.visibility = \'home\'');
+				}))
+				.andWhere('note.localOnly = FALSE');
+	
+			const notes = await query.take(limit).getMany();
+	
+			if (sinceId) notes.reverse();
+	
+			const activities = await Promise.all(notes.map(note => this.#packActivity(note)));
+			const rendered = this.apRendererService.renderOrderedCollectionPage(
+				`${partOf}?${url.query({
+					page: 'true',
+					since_id: sinceId,
+					until_id: untilId,
+				})}`,
+				user.notesCount, activities, partOf,
+				notes.length ? `${partOf}?${url.query({
+					page: 'true',
+					since_id: notes[0].id,
+				})}` : undefined,
+				notes.length ? `${partOf}?${url.query({
+					page: 'true',
+					until_id: notes[notes.length - 1].id,
+				})}` : undefined,
+			);
+	
+			ctx.body = this.apRendererService.renderActivity(rendered);
+			this.#setResponseType(ctx);
+		} else {
+			// index page
+			const rendered = this.apRendererService.renderOrderedCollection(partOf, user.notesCount,
+				`${partOf}?page=true`,
+				`${partOf}?page=true&since_id=000000000000000000000000`,
+			);
+			ctx.body = this.apRendererService.renderActivity(rendered);
+			ctx.set('Cache-Control', 'public, max-age=180');
+			this.#setResponseType(ctx);
+		}
+	}
+
+	async #userInfo(ctx: Router.RouterContext, user: User | null) {
+		if (user == null) {
+			ctx.status = 404;
+			return;
+		}
+
+		ctx.body = this.apRendererService.renderActivity(await this.apRendererService.renderPerson(user as ILocalUser));
+		ctx.set('Cache-Control', 'public, max-age=180');
+		this.#setResponseType(ctx);
+	}
+
+	public createRouter() {
+		// Init router
+		const router = new Router();
+
+		//#region Routing
+		function isActivityPubReq(ctx: Router.RouterContext) {
+			ctx.response.vary('Accept');
+			const accepted = ctx.accepts('html', ACTIVITY_JSON, LD_JSON);
+			return typeof accepted === 'string' && !accepted.match(/html/);
+		}
+
+		// inbox
+		router.post('/inbox', json(), ctx => this.#inbox(ctx));
+		router.post('/users/:user/inbox', json(), ctx => this.#inbox(ctx));
+
+		// note
+		router.get('/notes/:note', async (ctx, next) => {
+			if (!isActivityPubReq(ctx)) return await next();
+
+			const note = await this.notesRepository.findOneBy({
+				id: ctx.params.note,
+				visibility: In(['public' as const, 'home' as const]),
+				localOnly: false,
+			});
+
+			if (note == null) {
+				ctx.status = 404;
+				return;
+			}
+
+			// リモートだったらリダイレクト
+			if (note.userHost != null) {
+				if (note.uri == null || this.utilityService.isSelfHost(note.userHost)) {
+					ctx.status = 500;
+					return;
+				}
+				ctx.redirect(note.uri);
+				return;
+			}
+
+			ctx.body = this.apRendererService.renderActivity(await this.apRendererService.renderNote(note, false));
+			ctx.set('Cache-Control', 'public, max-age=180');
+			this.#setResponseType(ctx);
+		});
+
+		// note activity
+		router.get('/notes/:note/activity', async ctx => {
+			const note = await this.notesRepository.findOneBy({
+				id: ctx.params.note,
+				userHost: IsNull(),
+				visibility: In(['public' as const, 'home' as const]),
+				localOnly: false,
+			});
+
+			if (note == null) {
+				ctx.status = 404;
+				return;
+			}
+
+			ctx.body = this.apRendererService.renderActivity(await this.#packActivity(note));
+			ctx.set('Cache-Control', 'public, max-age=180');
+			this.#setResponseType(ctx);
+		});
+
+		// outbox
+		router.get('/users/:user/outbox', (ctx) => this.#outbox(ctx));
+
+		// followers
+		router.get('/users/:user/followers', (ctx) => this.#followers(ctx));
+
+		// following
+		router.get('/users/:user/following', (ctx) => this.#following(ctx));
+
+		// featured
+		router.get('/users/:user/collections/featured', (ctx) => this.#featured(ctx));
+
+		// publickey
+		router.get('/users/:user/publickey', async ctx => {
+			const userId = ctx.params.user;
+
+			const user = await this.usersRepository.findOneBy({
+				id: userId,
+				host: IsNull(),
+			});
+
+			if (user == null) {
+				ctx.status = 404;
+				return;
+			}
+
+			const keypair = await this.userKeypairStoreService.getUserKeypair(user.id);
+
+			if (this.userEntityService.isLocalUser(user)) {
+				ctx.body = this.apRendererService.renderActivity(this.apRendererService.renderKey(user, keypair));
+				ctx.set('Cache-Control', 'public, max-age=180');
+				this.#setResponseType(ctx);
+			} else {
+				ctx.status = 400;
+			}
+		});
+
+		router.get('/users/:user', async (ctx, next) => {
+			if (!isActivityPubReq(ctx)) return await next();
+
+			const userId = ctx.params.user;
+
+			const user = await this.usersRepository.findOneBy({
+				id: userId,
+				host: IsNull(),
+				isSuspended: false,
+			});
+
+			await this.#userInfo(ctx, user);
+		});
+
+		router.get('/@:user', async (ctx, next) => {
+			if (!isActivityPubReq(ctx)) return await next();
+
+			const user = await this.usersRepository.findOneBy({
+				usernameLower: ctx.params.user.toLowerCase(),
+				host: IsNull(),
+				isSuspended: false,
+			});
+
+			await this.#userInfo(ctx, user);
+		});
+		//#endregion
+
+		// emoji
+		router.get('/emojis/:emoji', async ctx => {
+			const emoji = await this.emojisRepository.findOneBy({
+				host: IsNull(),
+				name: ctx.params.emoji,
+			});
+
+			if (emoji == null) {
+				ctx.status = 404;
+				return;
+			}
+
+			ctx.body = this.apRendererService.renderActivity(await this.apRendererService.renderEmoji(emoji));
+			ctx.set('Cache-Control', 'public, max-age=180');
+			this.#setResponseType(ctx);
+		});
+
+		// like
+		router.get('/likes/:like', async ctx => {
+			const reaction = await this.noteReactionsRepository.findOneBy({ id: ctx.params.like });
+
+			if (reaction == null) {
+				ctx.status = 404;
+				return;
+			}
+
+			const note = await this.notesRepository.findOneBy({ id: reaction.noteId });
+
+			if (note == null) {
+				ctx.status = 404;
+				return;
+			}
+
+			ctx.body = this.apRendererService.renderActivity(await this.apRendererService.renderLike(reaction, note));
+			ctx.set('Cache-Control', 'public, max-age=180');
+			this.#setResponseType(ctx);
+		});
+
+		// follow
+		router.get('/follows/:follower/:followee', async ctx => {
+			// This may be used before the follow is completed, so we do not
+			// check if the following exists.
+
+			const [follower, followee] = await Promise.all([
+				this.usersRepository.findOneBy({
+					id: ctx.params.follower,
+					host: IsNull(),
+				}),
+				this.usersRepository.findOneBy({
+					id: ctx.params.followee,
+					host: Not(IsNull()),
+				}),
+			]);
+
+			if (follower == null || followee == null) {
+				ctx.status = 404;
+				return;
+			}
+
+			ctx.body = this.apRendererService.renderActivity(this.apRendererService.renderFollow(follower, followee));
+			ctx.set('Cache-Control', 'public, max-age=180');
+			this.#setResponseType(ctx);
+		});
+
+		return router;
+	}
+}
diff --git a/packages/backend/src/server/FileServerService.ts b/packages/backend/src/server/FileServerService.ts
new file mode 100644
index 0000000000..0f4246bfd1
--- /dev/null
+++ b/packages/backend/src/server/FileServerService.ts
@@ -0,0 +1,178 @@
+import * as fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import { Inject, Injectable } from '@nestjs/common';
+import Koa from 'koa';
+import cors from '@koa/cors';
+import Router from '@koa/router';
+import send from 'koa-send';
+import rename from 'rename';
+import { Config } from '@/config.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
+import { createTemp } from '@/misc/create-temp.js';
+import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
+import { StatusError } from '@/misc/status-error.js';
+import Logger from '@/logger.js';
+import { DownloadService } from '@/core/DownloadService.js';
+import { ImageProcessingService } from '@/core/ImageProcessingService.js';
+import { VideoProcessingService } from '@/core/VideoProcessingService.js';
+import { InternalStorageService } from '@/core/InternalStorageService.js';
+import { contentDisposition } from '@/misc/content-disposition.js';
+import { FileInfoService } from '@/core/FileInfoService.js';
+
+const serverLogger = new Logger('server', 'gray', false);
+
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = dirname(_filename);
+
+const assets = `${_dirname}/../../server/file/assets/`;
+
+const commonReadableHandlerGenerator = (ctx: Koa.Context) => (e: Error): void => {
+	serverLogger.error(e);
+	ctx.status = 500;
+	ctx.set('Cache-Control', 'max-age=300');
+};
+
+@Injectable()
+export class FileServerService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private fileInfoService: FileInfoService,
+		private downloadService: DownloadService,
+		private imageProcessingService: ImageProcessingService,
+		private videoProcessingService: VideoProcessingService,
+		private internalStorageService: InternalStorageService,
+	) {
+	}
+
+	public createServer() {
+		const app = new Koa();
+		app.use(cors());
+		app.use(async (ctx, next) => {
+			ctx.set('Content-Security-Policy', 'default-src \'none\'; img-src \'self\'; media-src \'self\'; style-src \'unsafe-inline\'');
+			await next();
+		});
+
+		// Init router
+		const router = new Router();
+
+		router.get('/app-default.jpg', ctx => {
+			const file = fs.createReadStream(`${_dirname}/assets/dummy.png`);
+			ctx.body = file;
+			ctx.set('Content-Type', 'image/jpeg');
+			ctx.set('Cache-Control', 'max-age=31536000, immutable');
+		});
+
+		router.get('/:key', ctx => this.#sendDriveFile(ctx));
+		router.get('/:key/(.*)', ctx => this.#sendDriveFile(ctx));
+
+		// Register router
+		app.use(router.routes());
+
+		return app;
+	}
+
+	async #sendDriveFile(ctx: Koa.Context) {
+		const key = ctx.params.key;
+
+		// Fetch drive file
+		const file = await this.driveFilesRepository.createQueryBuilder('file')
+			.where('file.accessKey = :accessKey', { accessKey: key })
+			.orWhere('file.thumbnailAccessKey = :thumbnailAccessKey', { thumbnailAccessKey: key })
+			.orWhere('file.webpublicAccessKey = :webpublicAccessKey', { webpublicAccessKey: key })
+			.getOne();
+
+		if (file == null) {
+			ctx.status = 404;
+			ctx.set('Cache-Control', 'max-age=86400');
+			await send(ctx as any, '/dummy.png', { root: assets });
+			return;
+		}
+
+		const isThumbnail = file.thumbnailAccessKey === key;
+		const isWebpublic = file.webpublicAccessKey === key;
+
+		if (!file.storedInternal) {
+			if (file.isLink && file.uri) {	// 期限切れリモートファイル
+				const [path, cleanup] = await createTemp();
+
+				try {
+					await this.downloadService.downloadUrl(file.uri, path);
+
+					const { mime, ext } = await this.fileInfoService.detectType(path);
+
+					const convertFile = async () => {
+						if (isThumbnail) {
+							if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml'].includes(mime)) {
+								return await this.imageProcessingService.convertToWebp(path, 498, 280);
+							} else if (mime.startsWith('video/')) {
+								return await this.videoProcessingService.generateVideoThumbnail(path);
+							}
+						}
+
+						if (isWebpublic) {
+							if (['image/svg+xml'].includes(mime)) {
+								return await this.imageProcessingService.convertToPng(path, 2048, 2048);
+							}
+						}
+
+						return {
+							data: fs.readFileSync(path),
+							ext,
+							type: mime,
+						};
+					};
+
+					const image = await convertFile();
+					ctx.body = image.data;
+					ctx.set('Content-Type', FILE_TYPE_BROWSERSAFE.includes(image.type) ? image.type : 'application/octet-stream');
+					ctx.set('Cache-Control', 'max-age=31536000, immutable');
+				} catch (err) {
+					serverLogger.error(`${err}`);
+
+					if (err instanceof StatusError && err.isClientError) {
+						ctx.status = err.statusCode;
+						ctx.set('Cache-Control', 'max-age=86400');
+					} else {
+						ctx.status = 500;
+						ctx.set('Cache-Control', 'max-age=300');
+					}
+				} finally {
+					cleanup();
+				}
+				return;
+			}
+
+			ctx.status = 204;
+			ctx.set('Cache-Control', 'max-age=86400');
+			return;
+		}
+
+		if (isThumbnail || isWebpublic) {
+			const { mime, ext } = await this.fileInfoService.detectType(this.internalStorageService.resolvePath(key));
+			const filename = rename(file.name, {
+				suffix: isThumbnail ? '-thumb' : '-web',
+				extname: ext ? `.${ext}` : undefined,
+			}).toString();
+
+			ctx.body = this.internalStorageService.read(key);
+			ctx.set('Content-Type', FILE_TYPE_BROWSERSAFE.includes(mime) ? mime : 'application/octet-stream');
+			ctx.set('Cache-Control', 'max-age=31536000, immutable');
+			ctx.set('Content-Disposition', contentDisposition('inline', filename));
+		} else {
+			const readable = this.internalStorageService.read(file.accessKey!);
+			readable.on('error', commonReadableHandlerGenerator(ctx));
+			ctx.body = readable;
+			ctx.set('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.type) ? file.type : 'application/octet-stream');
+			ctx.set('Cache-Control', 'max-age=31536000, immutable');
+			ctx.set('Content-Disposition', contentDisposition('inline', file.name));
+		}
+	}
+}
+
diff --git a/packages/backend/src/server/MediaProxyServerService.ts b/packages/backend/src/server/MediaProxyServerService.ts
new file mode 100644
index 0000000000..b9cee38f0a
--- /dev/null
+++ b/packages/backend/src/server/MediaProxyServerService.ts
@@ -0,0 +1,137 @@
+import * as fs from 'node:fs';
+import { Inject, Injectable } from '@nestjs/common';
+import Koa from 'koa';
+import cors from '@koa/cors';
+import Router from '@koa/router';
+import sharp from 'sharp';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
+import { isMimeImage } from '@/misc/is-mime-image.js';
+import { createTemp } from '@/misc/create-temp.js';
+import { DownloadService } from '@/core/DownloadService.js';
+import { ImageProcessingService } from '@/core/ImageProcessingService.js';
+import type { IImage } from '@/core/ImageProcessingService.js';
+import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
+import { StatusError } from '@/misc/status-error.js';
+import Logger from '@/logger.js';
+import { FileInfoService } from '@/core/FileInfoService.js';
+
+const serverLogger = new Logger('server', 'gray', false);
+
+@Injectable()
+export class MediaProxyServerService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private fileInfoService: FileInfoService,
+		private downloadService: DownloadService,
+		private imageProcessingService: ImageProcessingService,
+	) {
+	}
+
+	public createServer() {
+		const app = new Koa();
+		app.use(cors());
+		app.use(async (ctx, next) => {
+			ctx.set('Content-Security-Policy', 'default-src \'none\'; img-src \'self\'; media-src \'self\'; style-src \'unsafe-inline\'');
+			await next();
+		});
+
+		// Init router
+		const router = new Router();
+
+		router.get('/:url*', ctx => this.#handler(ctx));
+
+		// Register router
+		app.use(router.routes());
+
+		return app;
+	}
+
+	async #handler(ctx: Koa.Context) {
+		const url = 'url' in ctx.query ? ctx.query.url : 'https://' + ctx.params.url;
+	
+		if (typeof url !== 'string') {
+			ctx.status = 400;
+			return;
+		}
+	
+		// Create temp file
+		const [path, cleanup] = await createTemp();
+	
+		try {
+			await this.downloadService.downloadUrl(url, path);
+	
+			const { mime, ext } = await this.fileInfoService.detectType(path);
+			const isConvertibleImage = isMimeImage(mime, 'sharp-convertible-image');
+	
+			let image: IImage;
+	
+			if ('static' in ctx.query && isConvertibleImage) {
+				image = await this.imageProcessingService.convertToWebp(path, 498, 280);
+			} else if ('preview' in ctx.query && isConvertibleImage) {
+				image = await this.imageProcessingService.convertToWebp(path, 200, 200);
+			} 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 this.imageProcessingService.convertToWebp(path, 2048, 2048, 1);
+			} else if (!mime.startsWith('image/') || !FILE_TYPE_BROWSERSAFE.includes(mime)) {
+				throw new StatusError('Rejected type', 403, 'Rejected type');
+			} else {
+				image = {
+					data: fs.readFileSync(path),
+					ext,
+					type: mime,
+				};
+			}
+	
+			ctx.set('Content-Type', image.type);
+			ctx.set('Cache-Control', 'max-age=31536000, immutable');
+			ctx.body = image.data;
+		} catch (err) {
+			serverLogger.error(`${err}`);
+	
+			if (err instanceof StatusError && (err.statusCode === 302 || err.isClientError)) {
+				ctx.status = err.statusCode;
+			} else {
+				ctx.status = 500;
+			}
+		} finally {
+			cleanup();
+		}
+	}
+}
diff --git a/packages/backend/src/server/NodeinfoServerService.ts b/packages/backend/src/server/NodeinfoServerService.ts
new file mode 100644
index 0000000000..04a5f1484b
--- /dev/null
+++ b/packages/backend/src/server/NodeinfoServerService.ts
@@ -0,0 +1,129 @@
+import { Inject, Injectable } from '@nestjs/common';
+import Router from '@koa/router';
+import { IsNull, MoreThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { NotesRepository, UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import { MetaService } from '@/core/MetaService.js';
+import { MAX_NOTE_TEXT_LENGTH } from '@/const.js';
+import { Cache } from '@/misc/cache.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+
+const nodeinfo2_1path = '/nodeinfo/2.1';
+const nodeinfo2_0path = '/nodeinfo/2.0';
+
+@Injectable()
+export class NodeinfoServerService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		private userEntityService: UserEntityService,
+		private metaService: MetaService,
+	) {
+	}
+
+	public getLinks() {
+		return [/* (awaiting release) {
+			rel: 'http://nodeinfo.diaspora.software/ns/schema/2.1',
+			href: config.url + nodeinfo2_1path
+		}, */{
+				rel: 'http://nodeinfo.diaspora.software/ns/schema/2.0',
+				href: this.config.url + nodeinfo2_0path,
+			}];
+	}
+
+	public createRouter() {
+		const router = new Router();
+
+		const nodeinfo2 = async () => {
+			const now = Date.now();
+			const [
+				meta,
+				total,
+				activeHalfyear,
+				activeMonth,
+				localPosts,
+			] = await Promise.all([
+				this.metaService.fetch(true),
+				this.usersRepository.count({ where: { host: IsNull() } }),
+				this.usersRepository.count({ where: { host: IsNull(), lastActiveDate: MoreThan(new Date(now - 15552000000)) } }),
+				this.usersRepository.count({ where: { host: IsNull(), lastActiveDate: MoreThan(new Date(now - 2592000000)) } }),
+				this.notesRepository.count({ where: { userHost: IsNull() } }),
+			]);
+
+			const proxyAccount = meta.proxyAccountId ? await this.userEntityService.pack(meta.proxyAccountId).catch(() => null) : null;
+
+			return {
+				software: {
+					name: 'misskey',
+					version: this.config.version,
+					repository: meta.repositoryUrl,
+				},
+				protocols: ['activitypub'],
+				services: {
+					inbound: [] as string[],
+					outbound: ['atom1.0', 'rss2.0'],
+				},
+				openRegistrations: !meta.disableRegistration,
+				usage: {
+					users: { total, activeHalfyear, activeMonth },
+					localPosts,
+					localComments: 0,
+				},
+				metadata: {
+					nodeName: meta.name,
+					nodeDescription: meta.description,
+					maintainer: {
+						name: meta.maintainerName,
+						email: meta.maintainerEmail,
+					},
+					langs: meta.langs,
+					tosUrl: meta.ToSUrl,
+					repositoryUrl: meta.repositoryUrl,
+					feedbackUrl: meta.feedbackUrl,
+					disableRegistration: meta.disableRegistration,
+					disableLocalTimeline: meta.disableLocalTimeline,
+					disableGlobalTimeline: meta.disableGlobalTimeline,
+					emailRequiredForSignup: meta.emailRequiredForSignup,
+					enableHcaptcha: meta.enableHcaptcha,
+					enableRecaptcha: meta.enableRecaptcha,
+					maxNoteTextLength: MAX_NOTE_TEXT_LENGTH,
+					enableTwitterIntegration: meta.enableTwitterIntegration,
+					enableGithubIntegration: meta.enableGithubIntegration,
+					enableDiscordIntegration: meta.enableDiscordIntegration,
+					enableEmail: meta.enableEmail,
+					enableServiceWorker: meta.enableServiceWorker,
+					proxyAccountName: proxyAccount ? proxyAccount.username : null,
+					themeColor: meta.themeColor ?? '#86b300',
+				},
+			};
+		};
+
+		const cache = new Cache<Awaited<ReturnType<typeof nodeinfo2>>>(1000 * 60 * 10);
+
+		router.get(nodeinfo2_1path, async ctx => {
+			const base = await cache.fetch(null, () => nodeinfo2());
+
+			ctx.body = { version: '2.1', ...base };
+			ctx.set('Cache-Control', 'public, max-age=600');
+		});
+
+		router.get(nodeinfo2_0path, async ctx => {
+			const base = await cache.fetch(null, () => nodeinfo2());
+
+			delete base.software.repository;
+
+			ctx.body = { version: '2.0', ...base };
+			ctx.set('Cache-Control', 'public, max-age=600');
+		});
+
+		return router;
+	}
+}
diff --git a/packages/backend/src/server/ServerModule.ts b/packages/backend/src/server/ServerModule.ts
new file mode 100644
index 0000000000..f05eda1cb8
--- /dev/null
+++ b/packages/backend/src/server/ServerModule.ts
@@ -0,0 +1,92 @@
+import { Module } from '@nestjs/common';
+import { EndpointsModule } from '@/server/api/EndpointsModule.js';
+import { CoreModule } from '@/core/CoreModule.js';
+import { ApiCallService } from './api/ApiCallService.js';
+import { FileServerService } from './FileServerService.js';
+import { MediaProxyServerService } from './MediaProxyServerService.js';
+import { NodeinfoServerService } from './NodeinfoServerService.js';
+import { ServerService } from './ServerService.js';
+import { WellKnownServerService } from './WellKnownServerService.js';
+import { GetterService } from './api/common/GetterService.js';
+import { DiscordServerService } from './api/integration/DiscordServerService.js';
+import { GithubServerService } from './api/integration/GithubServerService.js';
+import { TwitterServerService } from './api/integration/TwitterServerService.js';
+import { ChannelsService } from './api/stream/ChannelsService.js';
+import { ActivityPubServerService } from './ActivityPubServerService.js';
+import { ApiLoggerService } from './api/ApiLoggerService.js';
+import { ApiServerService } from './api/ApiServerService.js';
+import { AuthenticateService } from './api/AuthenticateService.js';
+import { RateLimiterService } from './api/RateLimiterService.js';
+import { SigninApiService } from './api/SigninApiService.js';
+import { SigninService } from './api/SigninService.js';
+import { SignupApiService } from './api/SignupApiService.js';
+import { StreamingApiServerService } from './api/StreamingApiServerService.js';
+import { ClientServerService } from './web/ClientServerService.js';
+import { FeedService } from './web/FeedService.js';
+import { UrlPreviewService } from './web/UrlPreviewService.js';
+import { MainChannelService } from './api/stream/channels/main.js';
+import { AdminChannelService } from './api/stream/channels/admin.js';
+import { AntennaChannelService } from './api/stream/channels/antenna.js';
+import { ChannelChannelService } from './api/stream/channels/channel.js';
+import { DriveChannelService } from './api/stream/channels/drive.js';
+import { GlobalTimelineChannelService } from './api/stream/channels/global-timeline.js';
+import { HashtagChannelService } from './api/stream/channels/hashtag.js';
+import { HomeTimelineChannelService } from './api/stream/channels/home-timeline.js';
+import { HybridTimelineChannelService } from './api/stream/channels/hybrid-timeline.js';
+import { LocalTimelineChannelService } from './api/stream/channels/local-timeline.js';
+import { MessagingIndexChannelService } from './api/stream/channels/messaging-index.js';
+import { MessagingChannelService } from './api/stream/channels/messaging.js';
+import { QueueStatsChannelService } from './api/stream/channels/queue-stats.js';
+import { ServerStatsChannelService } from './api/stream/channels/server-stats.js';
+import { UserListChannelService } from './api/stream/channels/user-list.js';
+
+@Module({
+	imports: [
+		EndpointsModule,
+		CoreModule,
+	],
+	providers: [
+		ClientServerService,
+		FeedService,
+		UrlPreviewService,
+		ActivityPubServerService,
+		FileServerService,
+		MediaProxyServerService,
+		NodeinfoServerService,
+		ServerService,
+		WellKnownServerService,
+		GetterService,
+		DiscordServerService,
+		GithubServerService,
+		TwitterServerService,
+		ChannelsService,
+		ApiCallService,
+		ApiLoggerService,
+		ApiServerService,
+		AuthenticateService,
+		RateLimiterService,
+		SigninApiService,
+		SigninService,
+		SignupApiService,
+		StreamingApiServerService,
+		MainChannelService,
+		AdminChannelService,
+		AntennaChannelService,
+		ChannelChannelService,
+		DriveChannelService,
+		GlobalTimelineChannelService,
+		HashtagChannelService,
+		HomeTimelineChannelService,
+		HybridTimelineChannelService,
+		LocalTimelineChannelService,
+		MessagingIndexChannelService,
+		MessagingChannelService,
+		QueueStatsChannelService,
+		ServerStatsChannelService,
+		UserListChannelService,
+	],
+	exports: [
+		ServerService,
+	],
+})
+export class ServerModule {}
diff --git a/packages/backend/src/server/ServerService.ts b/packages/backend/src/server/ServerService.ts
new file mode 100644
index 0000000000..2ee7135c2a
--- /dev/null
+++ b/packages/backend/src/server/ServerService.ts
@@ -0,0 +1,177 @@
+import cluster from 'node:cluster';
+import * as fs from 'node:fs';
+import * as http from 'node:http';
+import { Inject, Injectable } from '@nestjs/common';
+import Koa from 'koa';
+import Router from '@koa/router';
+import mount from 'koa-mount';
+import koaLogger from 'koa-logger';
+import * as slow from 'koa-slow';
+import { IsNull } from 'typeorm';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { Config } from '@/config.js';
+import { UserProfilesRepository, UsersRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
+import Logger from '@/logger.js';
+import { envOption } from '@/env.js';
+import * as Acct from '@/misc/acct.js';
+import { genIdenticon } from '@/misc/gen-identicon.js';
+import { createTemp } from '@/misc/create-temp.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { ActivityPubServerService } from './ActivityPubServerService.js';
+import { NodeinfoServerService } from './NodeinfoServerService.js';
+import { ApiServerService } from './api/ApiServerService.js';
+import { StreamingApiServerService } from './api/StreamingApiServerService.js';
+import { WellKnownServerService } from './WellKnownServerService.js';
+import { MediaProxyServerService } from './MediaProxyServerService.js';
+import { FileServerService } from './FileServerService.js';
+import { ClientServerService } from './web/ClientServerService.js';
+
+const serverLogger = new Logger('server', 'gray', false);
+
+@Injectable()
+export class ServerService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		private userEntityService: UserEntityService,
+		private apiServerService: ApiServerService,
+		private streamingApiServerService: StreamingApiServerService,
+		private activityPubServerService: ActivityPubServerService,
+		private wellKnownServerService: WellKnownServerService,
+		private nodeinfoServerService: NodeinfoServerService,
+		private fileServerService: FileServerService,
+		private mediaProxyServerService: MediaProxyServerService,
+		private clientServerService: ClientServerService,
+		private globalEventService: GlobalEventService,
+	) {
+	}
+
+	public launch() {
+		// Init app
+		const koa = new Koa();
+		koa.proxy = true;
+
+		if (!['production', 'test'].includes(process.env.NODE_ENV ?? '')) {
+		// Logger
+			koa.use(koaLogger(str => {
+				serverLogger.info(str);
+			}));
+
+			// Delay
+			if (envOption.slow) {
+				koa.use(slow({
+					delay: 3000,
+				}));
+			}
+		}
+
+		// HSTS
+		// 6months (15552000sec)
+		if (this.config.url.startsWith('https') && !this.config.disableHsts) {
+			koa.use(async (ctx, next) => {
+				ctx.set('strict-transport-security', 'max-age=15552000; preload');
+				await next();
+			});
+		}
+
+		koa.use(mount('/api', this.apiServerService.createApiServer(koa)));
+		koa.use(mount('/files', this.fileServerService.createServer()));
+		koa.use(mount('/proxy', this.mediaProxyServerService.createServer()));
+
+		// Init router
+		const router = new Router();
+
+		// Routing
+		router.use(this.activityPubServerService.createRouter().routes());
+		router.use(this.nodeinfoServerService.createRouter().routes());
+		router.use(this.wellKnownServerService.createRouter().routes());
+
+		router.get('/avatar/@:acct', async ctx => {
+			const { username, host } = Acct.parse(ctx.params.acct);
+			const user = await this.usersRepository.findOne({
+				where: {
+					usernameLower: username.toLowerCase(),
+					host: (host == null) || (host === this.config.host) ? IsNull() : host,
+					isSuspended: false,
+				},
+				relations: ['avatar'],
+			});
+
+			if (user) {
+				ctx.redirect(this.userEntityService.getAvatarUrlSync(user));
+			} else {
+				ctx.redirect('/static-assets/user-unknown.png');
+			}
+		});
+
+		router.get('/identicon/:x', async ctx => {
+			const [temp, cleanup] = await createTemp();
+			await genIdenticon(ctx.params.x, fs.createWriteStream(temp));
+			ctx.set('Content-Type', 'image/png');
+			ctx.body = fs.createReadStream(temp).on('close', () => cleanup());
+		});
+
+		router.get('/verify-email/:code', async ctx => {
+			const profile = await this.userProfilesRepository.findOneBy({
+				emailVerifyCode: ctx.params.code,
+			});
+
+			if (profile != null) {
+				ctx.body = 'Verify succeeded!';
+				ctx.status = 200;
+
+				await this.userProfilesRepository.update({ userId: profile.userId }, {
+					emailVerified: true,
+					emailVerifyCode: null,
+				});
+
+				this.globalEventService.publishMainStream(profile.userId, 'meUpdated', await this.userEntityService.pack(profile.userId, { id: profile.userId }, {
+					detail: true,
+					includeSecrets: true,
+				}));
+			} else {
+				ctx.status = 404;
+			}
+		});
+
+		// Register router
+		koa.use(router.routes());
+
+		koa.use(mount(this.clientServerService.createApp()));
+
+		const server = http.createServer(koa.callback());
+
+		this.streamingApiServerService.attachStreamingApi(server);
+
+		server.on('error', e => {
+			switch ((e as any).code) {
+				case 'EACCES':
+					serverLogger.error(`You do not have permission to listen on port ${this.config.port}.`);
+					break;
+				case 'EADDRINUSE':
+					serverLogger.error(`Port ${this.config.port} is already in use by another process.`);
+					break;
+				default:
+					serverLogger.error(e);
+					break;
+			}
+
+			if (cluster.isWorker) {
+			process.send!('listenFailed');
+			} else {
+			// disableClustering
+				process.exit(1);
+			}
+		});
+
+		server.listen(this.config.port);
+	}
+}
diff --git a/packages/backend/src/server/WellKnownServerService.ts b/packages/backend/src/server/WellKnownServerService.ts
new file mode 100644
index 0000000000..7f827d439b
--- /dev/null
+++ b/packages/backend/src/server/WellKnownServerService.ts
@@ -0,0 +1,168 @@
+import { Inject, Injectable } from '@nestjs/common';
+import Router from '@koa/router';
+import { IsNull, MoreThan } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import { escapeAttribute, escapeValue } from '@/misc/prelude/xml.js';
+import type { User } from '@/models/entities/User.js';
+import * as Acct from '@/misc/acct.js';
+import { NodeinfoServerService } from './NodeinfoServerService.js';
+import type { FindOptionsWhere } from 'typeorm';
+
+@Injectable()
+export class WellKnownServerService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private nodeinfoServerService: NodeinfoServerService,
+	) {
+	}
+
+	public createRouter() {
+		const router = new Router();
+
+		const XRD = (...x: { element: string, value?: string, attributes?: Record<string, string> }[]) =>
+			`<?xml version="1.0" encoding="UTF-8"?><XRD xmlns="http://docs.oasis-open.org/ns/xri/xrd-1.0">${x.map(({ element, value, attributes }) =>
+				`<${
+					Object.entries(typeof attributes === 'object' && attributes || {}).reduce((a, [k, v]) => `${a} ${k}="${escapeAttribute(v)}"`, element)
+				}${
+					typeof value === 'string' ? `>${escapeValue(value)}</${element}` : '/'
+				}>`).reduce((a, c) => a + c, '')}</XRD>`;
+
+		const allPath = '/.well-known/(.*)';
+		const webFingerPath = '/.well-known/webfinger';
+		const jrd = 'application/jrd+json';
+		const xrd = 'application/xrd+xml';
+
+		router.use(allPath, async (ctx, next) => {
+			ctx.set({
+				'Access-Control-Allow-Headers': 'Accept',
+				'Access-Control-Allow-Methods': 'GET, OPTIONS',
+				'Access-Control-Allow-Origin': '*',
+				'Access-Control-Expose-Headers': 'Vary',
+			});
+			await next();
+		});
+
+		router.options(allPath, async ctx => {
+			ctx.status = 204;
+		});
+
+		router.get('/.well-known/host-meta', async ctx => {
+			ctx.set('Content-Type', xrd);
+			ctx.body = XRD({ element: 'Link', attributes: {
+				rel: 'lrdd',
+				type: xrd,
+				template: `${this.config.url}${webFingerPath}?resource={uri}`,
+			} });
+		});
+
+		router.get('/.well-known/host-meta.json', async ctx => {
+			ctx.set('Content-Type', jrd);
+			ctx.body = {
+				links: [{
+					rel: 'lrdd',
+					type: jrd,
+					template: `${this.config.url}${webFingerPath}?resource={uri}`,
+				}],
+			};
+		});
+
+		router.get('/.well-known/nodeinfo', async ctx => {
+			ctx.body = { links: this.nodeinfoServerService.getLinks() };
+		});
+
+		/* TODO
+router.get('/.well-known/change-password', async ctx => {
+});
+*/
+
+		router.get(webFingerPath, async ctx => {
+			const fromId = (id: User['id']): FindOptionsWhere<User> => ({
+				id,
+				host: IsNull(),
+				isSuspended: false,
+			});
+
+			const generateQuery = (resource: string): FindOptionsWhere<User> | number =>
+				resource.startsWith(`${this.config.url.toLowerCase()}/users/`) ?
+					fromId(resource.split('/').pop()!) :
+					fromAcct(Acct.parse(
+						resource.startsWith(`${this.config.url.toLowerCase()}/@`) ? resource.split('/').pop()! :
+						resource.startsWith('acct:') ? resource.slice('acct:'.length) :
+						resource));
+
+			const fromAcct = (acct: Acct.Acct): FindOptionsWhere<User> | number =>
+				!acct.host || acct.host === this.config.host.toLowerCase() ? {
+					usernameLower: acct.username,
+					host: IsNull(),
+					isSuspended: false,
+				} : 422;
+
+			if (typeof ctx.query.resource !== 'string') {
+				ctx.status = 400;
+				return;
+			}
+
+			const query = generateQuery(ctx.query.resource.toLowerCase());
+
+			if (typeof query === 'number') {
+				ctx.status = query;
+				return;
+			}
+
+			const user = await this.usersRepository.findOneBy(query);
+
+			if (user == null) {
+				ctx.status = 404;
+				return;
+			}
+
+			const subject = `acct:${user.username}@${this.config.host}`;
+			const self = {
+				rel: 'self',
+				type: 'application/activity+json',
+				href: `${this.config.url}/users/${user.id}`,
+			};
+			const profilePage = {
+				rel: 'http://webfinger.net/rel/profile-page',
+				type: 'text/html',
+				href: `${this.config.url}/@${user.username}`,
+			};
+			const subscribe = {
+				rel: 'http://ostatus.org/schema/1.0/subscribe',
+				template: `${this.config.url}/authorize-follow?acct={uri}`,
+			};
+
+			if (ctx.accepts(jrd, xrd) === xrd) {
+				ctx.body = XRD(
+					{ element: 'Subject', value: subject },
+					{ element: 'Link', attributes: self },
+					{ element: 'Link', attributes: profilePage },
+					{ element: 'Link', attributes: subscribe });
+				ctx.type = xrd;
+			} else {
+				ctx.body = {
+					subject,
+					links: [self, profilePage, subscribe],
+				};
+				ctx.type = jrd;
+			}
+
+			ctx.vary('Accept');
+			ctx.set('Cache-Control', 'public, max-age=180');
+		});
+
+		// Return 404 for other .well-known
+		router.all(allPath, async ctx => {
+			ctx.status = 404;
+		});
+
+		return router;
+	}
+}
diff --git a/packages/backend/src/server/activitypub.ts b/packages/backend/src/server/activitypub.ts
deleted file mode 100644
index cd5f917c40..0000000000
--- a/packages/backend/src/server/activitypub.ts
+++ /dev/null
@@ -1,254 +0,0 @@
-import Router from '@koa/router';
-import json from 'koa-json-body';
-import httpSignature from '@peertube/http-signature';
-
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderNote from '@/remote/activitypub/renderer/note.js';
-import renderKey from '@/remote/activitypub/renderer/key.js';
-import { renderPerson } from '@/remote/activitypub/renderer/person.js';
-import renderEmoji from '@/remote/activitypub/renderer/emoji.js';
-import Outbox, { packActivity } from './activitypub/outbox.js';
-import Followers from './activitypub/followers.js';
-import Following from './activitypub/following.js';
-import Featured from './activitypub/featured.js';
-import { inbox as processInbox } from '@/queue/index.js';
-import { isSelfHost } from '@/misc/convert-host.js';
-import { Notes, Users, Emojis, NoteReactions } from '@/models/index.js';
-import { ILocalUser, User } from '@/models/entities/user.js';
-import { In, IsNull, Not } from 'typeorm';
-import { renderLike } from '@/remote/activitypub/renderer/like.js';
-import { getUserKeypair } from '@/misc/keypair-store.js';
-import renderFollow from '@/remote/activitypub/renderer/follow.js';
-
-// Init router
-const router = new Router();
-
-//#region Routing
-
-function inbox(ctx: Router.RouterContext) {
-	let signature;
-
-	try {
-		signature = httpSignature.parseRequest(ctx.req, { 'headers': [] });
-	} catch (e) {
-		ctx.status = 401;
-		return;
-	}
-
-	processInbox(ctx.request.body, signature);
-
-	ctx.status = 202;
-}
-
-const ACTIVITY_JSON = 'application/activity+json; charset=utf-8';
-const LD_JSON = 'application/ld+json; profile="https://www.w3.org/ns/activitystreams"; charset=utf-8';
-
-function isActivityPubReq(ctx: Router.RouterContext) {
-	ctx.response.vary('Accept');
-	const accepted = ctx.accepts('html', ACTIVITY_JSON, LD_JSON);
-	return typeof accepted === 'string' && !accepted.match(/html/);
-}
-
-export function setResponseType(ctx: Router.RouterContext) {
-	const accept = ctx.accepts(ACTIVITY_JSON, LD_JSON);
-	if (accept === LD_JSON) {
-		ctx.response.type = LD_JSON;
-	} else {
-		ctx.response.type = ACTIVITY_JSON;
-	}
-}
-
-// inbox
-router.post('/inbox', json(), inbox);
-router.post('/users/:user/inbox', json(), inbox);
-
-// note
-router.get('/notes/:note', async (ctx, next) => {
-	if (!isActivityPubReq(ctx)) return await next();
-
-	const note = await Notes.findOneBy({
-		id: ctx.params.note,
-		visibility: In(['public' as const, 'home' as const]),
-		localOnly: false,
-	});
-
-	if (note == null) {
-		ctx.status = 404;
-		return;
-	}
-
-	// リモートだったらリダイレクト
-	if (note.userHost != null) {
-		if (note.uri == null || isSelfHost(note.userHost)) {
-			ctx.status = 500;
-			return;
-		}
-		ctx.redirect(note.uri);
-		return;
-	}
-
-	ctx.body = renderActivity(await renderNote(note, false));
-	ctx.set('Cache-Control', 'public, max-age=180');
-	setResponseType(ctx);
-});
-
-// note activity
-router.get('/notes/:note/activity', async ctx => {
-	const note = await Notes.findOneBy({
-		id: ctx.params.note,
-		userHost: IsNull(),
-		visibility: In(['public' as const, 'home' as const]),
-		localOnly: false,
-	});
-
-	if (note == null) {
-		ctx.status = 404;
-		return;
-	}
-
-	ctx.body = renderActivity(await packActivity(note));
-	ctx.set('Cache-Control', 'public, max-age=180');
-	setResponseType(ctx);
-});
-
-// outbox
-router.get('/users/:user/outbox', Outbox);
-
-// followers
-router.get('/users/:user/followers', Followers);
-
-// following
-router.get('/users/:user/following', Following);
-
-// featured
-router.get('/users/:user/collections/featured', Featured);
-
-// publickey
-router.get('/users/:user/publickey', async ctx => {
-	const userId = ctx.params.user;
-
-	const user = await Users.findOneBy({
-		id: userId,
-		host: IsNull(),
-	});
-
-	if (user == null) {
-		ctx.status = 404;
-		return;
-	}
-
-	const keypair = await getUserKeypair(user.id);
-
-	if (Users.isLocalUser(user)) {
-		ctx.body = renderActivity(renderKey(user, keypair));
-		ctx.set('Cache-Control', 'public, max-age=180');
-		setResponseType(ctx);
-	} else {
-		ctx.status = 400;
-	}
-});
-
-// user
-async function userInfo(ctx: Router.RouterContext, user: User | null) {
-	if (user == null) {
-		ctx.status = 404;
-		return;
-	}
-
-	ctx.body = renderActivity(await renderPerson(user as ILocalUser));
-	ctx.set('Cache-Control', 'public, max-age=180');
-	setResponseType(ctx);
-}
-
-router.get('/users/:user', async (ctx, next) => {
-	if (!isActivityPubReq(ctx)) return await next();
-
-	const userId = ctx.params.user;
-
-	const user = await Users.findOneBy({
-		id: userId,
-		host: IsNull(),
-		isSuspended: false,
-	});
-
-	await userInfo(ctx, user);
-});
-
-router.get('/@:user', async (ctx, next) => {
-	if (!isActivityPubReq(ctx)) return await next();
-
-	const user = await Users.findOneBy({
-		usernameLower: ctx.params.user.toLowerCase(),
-		host: IsNull(),
-		isSuspended: false,
-	});
-
-	await userInfo(ctx, user);
-});
-//#endregion
-
-// emoji
-router.get('/emojis/:emoji', async ctx => {
-	const emoji = await Emojis.findOneBy({
-		host: IsNull(),
-		name: ctx.params.emoji,
-	});
-
-	if (emoji == null) {
-		ctx.status = 404;
-		return;
-	}
-
-	ctx.body = renderActivity(await renderEmoji(emoji));
-	ctx.set('Cache-Control', 'public, max-age=180');
-	setResponseType(ctx);
-});
-
-// like
-router.get('/likes/:like', async ctx => {
-	const reaction = await NoteReactions.findOneBy({ id: ctx.params.like });
-
-	if (reaction == null) {
-		ctx.status = 404;
-		return;
-	}
-
-	const note = await Notes.findOneBy({ id: reaction.noteId });
-
-	if (note == null) {
-		ctx.status = 404;
-		return;
-	}
-
-	ctx.body = renderActivity(await renderLike(reaction, note));
-	ctx.set('Cache-Control', 'public, max-age=180');
-	setResponseType(ctx);
-});
-
-// follow
-router.get('/follows/:follower/:followee', async ctx => {
-	// This may be used before the follow is completed, so we do not
-	// check if the following exists.
-
-	const [follower, followee] = await Promise.all([
-		Users.findOneBy({
-			id: ctx.params.follower,
-			host: IsNull(),
-		}),
-		Users.findOneBy({
-			id: ctx.params.followee,
-			host: Not(IsNull()),
-		}),
-	]);
-
-	if (follower == null || followee == null) {
-		ctx.status = 404;
-		return;
-	}
-
-	ctx.body = renderActivity(renderFollow(follower, followee));
-	ctx.set('Cache-Control', 'public, max-age=180');
-	setResponseType(ctx);
-});
-
-export default router;
diff --git a/packages/backend/src/server/activitypub/featured.ts b/packages/backend/src/server/activitypub/featured.ts
deleted file mode 100644
index c03fd1049f..0000000000
--- a/packages/backend/src/server/activitypub/featured.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import Router from '@koa/router';
-import config from '@/config/index.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderOrderedCollection from '@/remote/activitypub/renderer/ordered-collection.js';
-import { setResponseType } from '../activitypub.js';
-import renderNote from '@/remote/activitypub/renderer/note.js';
-import { Users, Notes, UserNotePinings } from '@/models/index.js';
-import { IsNull } from 'typeorm';
-
-export default async (ctx: Router.RouterContext) => {
-	const userId = ctx.params.user;
-
-	const user = await Users.findOneBy({
-		id: userId,
-		host: IsNull(),
-	});
-
-	if (user == null) {
-		ctx.status = 404;
-		return;
-	}
-
-	const pinings = await UserNotePinings.find({
-		where: { userId: user.id },
-		order: { id: 'DESC' },
-	});
-
-	const pinnedNotes = await Promise.all(pinings.map(pining =>
-		Notes.findOneByOrFail({ id: pining.noteId })));
-
-	const renderedNotes = await Promise.all(pinnedNotes.map(note => renderNote(note)));
-
-	const rendered = renderOrderedCollection(
-		`${config.url}/users/${userId}/collections/featured`,
-		renderedNotes.length, undefined, undefined, renderedNotes,
-	);
-
-	ctx.body = renderActivity(rendered);
-	ctx.set('Cache-Control', 'public, max-age=180');
-	setResponseType(ctx);
-};
diff --git a/packages/backend/src/server/activitypub/followers.ts b/packages/backend/src/server/activitypub/followers.ts
deleted file mode 100644
index beb48713a6..0000000000
--- a/packages/backend/src/server/activitypub/followers.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import Router from '@koa/router';
-import { FindOptionsWhere, IsNull, LessThan } from 'typeorm';
-import config from '@/config/index.js';
-import * as url from '@/prelude/url.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderOrderedCollection from '@/remote/activitypub/renderer/ordered-collection.js';
-import renderOrderedCollectionPage from '@/remote/activitypub/renderer/ordered-collection-page.js';
-import renderFollowUser from '@/remote/activitypub/renderer/follow-user.js';
-import { Users, Followings, UserProfiles } from '@/models/index.js';
-import { Following } from '@/models/entities/following.js';
-import { setResponseType } from '../activitypub.js';
-
-export default async (ctx: Router.RouterContext) => {
-	const userId = ctx.params.user;
-
-	const cursor = ctx.request.query.cursor;
-	if (cursor != null && typeof cursor !== 'string') {
-		ctx.status = 400;
-		return;
-	}
-
-	const page = ctx.request.query.page === 'true';
-
-	const user = await Users.findOneBy({
-		id: userId,
-		host: IsNull(),
-	});
-
-	if (user == null) {
-		ctx.status = 404;
-		return;
-	}
-
-	//#region Check ff visibility
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	if (profile.ffVisibility === 'private') {
-		ctx.status = 403;
-		ctx.set('Cache-Control', 'public, max-age=30');
-		return;
-	} else if (profile.ffVisibility === 'followers') {
-		ctx.status = 403;
-		ctx.set('Cache-Control', 'public, max-age=30');
-		return;
-	}
-	//#endregion
-
-	const limit = 10;
-	const partOf = `${config.url}/users/${userId}/followers`;
-
-	if (page) {
-		const query = {
-			followeeId: user.id,
-		} as FindOptionsWhere<Following>;
-
-		// カーソルが指定されている場合
-		if (cursor) {
-			query.id = LessThan(cursor);
-		}
-
-		// Get followers
-		const followings = await Followings.find({
-			where: query,
-			take: limit + 1,
-			order: { id: -1 },
-		});
-
-		// 「次のページ」があるかどうか
-		const inStock = followings.length === limit + 1;
-		if (inStock) followings.pop();
-
-		const renderedFollowers = await Promise.all(followings.map(following => renderFollowUser(following.followerId)));
-		const rendered = renderOrderedCollectionPage(
-			`${partOf}?${url.query({
-				page: 'true',
-				cursor,
-			})}`,
-			user.followersCount, renderedFollowers, partOf,
-			undefined,
-			inStock ? `${partOf}?${url.query({
-				page: 'true',
-				cursor: followings[followings.length - 1].id,
-			})}` : undefined,
-		);
-
-		ctx.body = renderActivity(rendered);
-		setResponseType(ctx);
-	} else {
-		// index page
-		const rendered = renderOrderedCollection(partOf, user.followersCount, `${partOf}?page=true`);
-		ctx.body = renderActivity(rendered);
-		ctx.set('Cache-Control', 'public, max-age=180');
-		setResponseType(ctx);
-	}
-};
diff --git a/packages/backend/src/server/activitypub/following.ts b/packages/backend/src/server/activitypub/following.ts
deleted file mode 100644
index 3a25a6316c..0000000000
--- a/packages/backend/src/server/activitypub/following.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import Router from '@koa/router';
-import { LessThan, IsNull, FindOptionsWhere } from 'typeorm';
-import config from '@/config/index.js';
-import * as url from '@/prelude/url.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderOrderedCollection from '@/remote/activitypub/renderer/ordered-collection.js';
-import renderOrderedCollectionPage from '@/remote/activitypub/renderer/ordered-collection-page.js';
-import renderFollowUser from '@/remote/activitypub/renderer/follow-user.js';
-import { Users, Followings, UserProfiles } from '@/models/index.js';
-import { Following } from '@/models/entities/following.js';
-import { setResponseType } from '../activitypub.js';
-
-export default async (ctx: Router.RouterContext) => {
-	const userId = ctx.params.user;
-
-	const cursor = ctx.request.query.cursor;
-	if (cursor != null && typeof cursor !== 'string') {
-		ctx.status = 400;
-		return;
-	}
-
-	const page = ctx.request.query.page === 'true';
-
-	const user = await Users.findOneBy({
-		id: userId,
-		host: IsNull(),
-	});
-
-	if (user == null) {
-		ctx.status = 404;
-		return;
-	}
-
-	//#region Check ff visibility
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	if (profile.ffVisibility === 'private') {
-		ctx.status = 403;
-		ctx.set('Cache-Control', 'public, max-age=30');
-		return;
-	} else if (profile.ffVisibility === 'followers') {
-		ctx.status = 403;
-		ctx.set('Cache-Control', 'public, max-age=30');
-		return;
-	}
-	//#endregion
-
-	const limit = 10;
-	const partOf = `${config.url}/users/${userId}/following`;
-
-	if (page) {
-		const query = {
-			followerId: user.id,
-		} as FindOptionsWhere<Following>;
-
-		// カーソルが指定されている場合
-		if (cursor) {
-			query.id = LessThan(cursor);
-		}
-
-		// Get followings
-		const followings = await Followings.find({
-			where: query,
-			take: limit + 1,
-			order: { id: -1 },
-		});
-
-		// 「次のページ」があるかどうか
-		const inStock = followings.length === limit + 1;
-		if (inStock) followings.pop();
-
-		const renderedFollowees = await Promise.all(followings.map(following => renderFollowUser(following.followeeId)));
-		const rendered = renderOrderedCollectionPage(
-			`${partOf}?${url.query({
-				page: 'true',
-				cursor,
-			})}`,
-			user.followingCount, renderedFollowees, partOf,
-			undefined,
-			inStock ? `${partOf}?${url.query({
-				page: 'true',
-				cursor: followings[followings.length - 1].id,
-			})}` : undefined,
-		);
-
-		ctx.body = renderActivity(rendered);
-		setResponseType(ctx);
-	} else {
-		// index page
-		const rendered = renderOrderedCollection(partOf, user.followingCount, `${partOf}?page=true`);
-		ctx.body = renderActivity(rendered);
-		ctx.set('Cache-Control', 'public, max-age=180');
-		setResponseType(ctx);
-	}
-};
diff --git a/packages/backend/src/server/activitypub/outbox.ts b/packages/backend/src/server/activitypub/outbox.ts
deleted file mode 100644
index 7a2586998a..0000000000
--- a/packages/backend/src/server/activitypub/outbox.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import Router from '@koa/router';
-import { Brackets, IsNull } from 'typeorm';
-import config from '@/config/index.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderOrderedCollection from '@/remote/activitypub/renderer/ordered-collection.js';
-import renderOrderedCollectionPage from '@/remote/activitypub/renderer/ordered-collection-page.js';
-import renderNote from '@/remote/activitypub/renderer/note.js';
-import renderCreate from '@/remote/activitypub/renderer/create.js';
-import renderAnnounce from '@/remote/activitypub/renderer/announce.js';
-import { countIf } from '@/prelude/array.js';
-import * as url from '@/prelude/url.js';
-import { Users, Notes } from '@/models/index.js';
-import { Note } from '@/models/entities/note.js';
-import { makePaginationQuery } from '../api/common/make-pagination-query.js';
-import { setResponseType } from '../activitypub.js';
-
-export default async (ctx: Router.RouterContext) => {
-	const userId = ctx.params.user;
-
-	const sinceId = ctx.request.query.since_id;
-	if (sinceId != null && typeof sinceId !== 'string') {
-		ctx.status = 400;
-		return;
-	}
-
-	const untilId = ctx.request.query.until_id;
-	if (untilId != null && typeof untilId !== 'string') {
-		ctx.status = 400;
-		return;
-	}
-
-	const page = ctx.request.query.page === 'true';
-
-	if (countIf(x => x != null, [sinceId, untilId]) > 1) {
-		ctx.status = 400;
-		return;
-	}
-
-	const user = await Users.findOneBy({
-		id: userId,
-		host: IsNull(),
-	});
-
-	if (user == null) {
-		ctx.status = 404;
-		return;
-	}
-
-	const limit = 20;
-	const partOf = `${config.url}/users/${userId}/outbox`;
-
-	if (page) {
-		const query = makePaginationQuery(Notes.createQueryBuilder('note'), sinceId, untilId)
-			.andWhere('note.userId = :userId', { userId: user.id })
-			.andWhere(new Brackets(qb => { qb
-				.where('note.visibility = \'public\'')
-				.orWhere('note.visibility = \'home\'');
-			}))
-			.andWhere('note.localOnly = FALSE');
-
-		const notes = await query.take(limit).getMany();
-
-		if (sinceId) notes.reverse();
-
-		const activities = await Promise.all(notes.map(note => packActivity(note)));
-		const rendered = renderOrderedCollectionPage(
-			`${partOf}?${url.query({
-				page: 'true',
-				since_id: sinceId,
-				until_id: untilId,
-			})}`,
-			user.notesCount, activities, partOf,
-			notes.length ? `${partOf}?${url.query({
-				page: 'true',
-				since_id: notes[0].id,
-			})}` : undefined,
-			notes.length ? `${partOf}?${url.query({
-				page: 'true',
-				until_id: notes[notes.length - 1].id,
-			})}` : undefined,
-		);
-
-		ctx.body = renderActivity(rendered);
-		setResponseType(ctx);
-	} else {
-		// index page
-		const rendered = renderOrderedCollection(partOf, user.notesCount,
-			`${partOf}?page=true`,
-			`${partOf}?page=true&since_id=000000000000000000000000`,
-		);
-		ctx.body = renderActivity(rendered);
-		ctx.set('Cache-Control', 'public, max-age=180');
-		setResponseType(ctx);
-	}
-};
-
-/**
- * Pack Create<Note> or Announce Activity
- * @param note Note
- */
-export async function packActivity(note: Note): Promise<any> {
-	if (note.renoteId && note.text == null && !note.hasPoll && (note.fileIds == null || note.fileIds.length === 0)) {
-		const renote = await Notes.findOneByOrFail({ id: note.renoteId });
-		return renderAnnounce(renote.uri ? renote.uri : `${config.url}/notes/${renote.id}`, note);
-	}
-
-	return renderCreate(await renderNote(note, false), note);
-}
diff --git a/packages/backend/src/server/api/2fa.ts b/packages/backend/src/server/api/2fa.ts
deleted file mode 100644
index 96b9316e47..0000000000
--- a/packages/backend/src/server/api/2fa.ts
+++ /dev/null
@@ -1,422 +0,0 @@
-import * as crypto from 'node:crypto';
-import * as jsrsasign from 'jsrsasign';
-import config from '@/config/index.js';
-
-const ECC_PRELUDE = Buffer.from([0x04]);
-const NULL_BYTE = Buffer.from([0]);
-const PEM_PRELUDE = Buffer.from(
-	'3059301306072a8648ce3d020106082a8648ce3d030107034200',
-	'hex',
-);
-
-// Android Safetynet attestations are signed with this cert:
-const GSR2 = `-----BEGIN CERTIFICATE-----
-MIIDujCCAqKgAwIBAgILBAAAAAABD4Ym5g0wDQYJKoZIhvcNAQEFBQAwTDEgMB4G
-A1UECxMXR2xvYmFsU2lnbiBSb290IENBIC0gUjIxEzARBgNVBAoTCkdsb2JhbFNp
-Z24xEzARBgNVBAMTCkdsb2JhbFNpZ24wHhcNMDYxMjE1MDgwMDAwWhcNMjExMjE1
-MDgwMDAwWjBMMSAwHgYDVQQLExdHbG9iYWxTaWduIFJvb3QgQ0EgLSBSMjETMBEG
-A1UEChMKR2xvYmFsU2lnbjETMBEGA1UEAxMKR2xvYmFsU2lnbjCCASIwDQYJKoZI
-hvcNAQEBBQADggEPADCCAQoCggEBAKbPJA6+Lm8omUVCxKs+IVSbC9N/hHD6ErPL
-v4dfxn+G07IwXNb9rfF73OX4YJYJkhD10FPe+3t+c4isUoh7SqbKSaZeqKeMWhG8
-eoLrvozps6yWJQeXSpkqBy+0Hne/ig+1AnwblrjFuTosvNYSuetZfeLQBoZfXklq
-tTleiDTsvHgMCJiEbKjNS7SgfQx5TfC4LcshytVsW33hoCmEofnTlEnLJGKRILzd
-C9XZzPnqJworc5HGnRusyMvo4KD0L5CLTfuwNhv2GXqF4G3yYROIXJ/gkwpRl4pa
-zq+r1feqCapgvdzZX99yqWATXgAByUr6P6TqBwMhAo6CygPCm48CAwEAAaOBnDCB
-mTAOBgNVHQ8BAf8EBAMCAQYwDwYDVR0TAQH/BAUwAwEB/zAdBgNVHQ4EFgQUm+IH
-V2ccHsBqBt5ZtJot39wZhi4wNgYDVR0fBC8wLTAroCmgJ4YlaHR0cDovL2NybC5n
-bG9iYWxzaWduLm5ldC9yb290LXIyLmNybDAfBgNVHSMEGDAWgBSb4gdXZxwewGoG
-3lm0mi3f3BmGLjANBgkqhkiG9w0BAQUFAAOCAQEAmYFThxxol4aR7OBKuEQLq4Gs
-J0/WwbgcQ3izDJr86iw8bmEbTUsp9Z8FHSbBuOmDAGJFtqkIk7mpM0sYmsL4h4hO
-291xNBrBVNpGP+DTKqttVCL1OmLNIG+6KYnX3ZHu01yiPqFbQfXf5WRDLenVOavS
-ot+3i9DAgBkcRcAtjOj4LaR0VknFBbVPFd5uRHg5h6h+u/N5GJG79G+dwfCMNYxd
-AfvDbbnvRG15RjF+Cv6pgsH/76tuIMRQyV+dTZsXjAzlAcmgQWpzU/qlULRuJQ/7
-TBj0/VLZjmmx6BEP3ojY+x1J96relc8geMJgEtslQIxq/H5COEBkEveegeGTLg==
------END CERTIFICATE-----\n`;
-
-function base64URLDecode(source: string) {
-	return Buffer.from(source.replace(/\-/g, '+').replace(/_/g, '/'), 'base64');
-}
-
-function getCertSubject(certificate: string) {
-	const subjectCert = new jsrsasign.X509();
-	subjectCert.readCertPEM(certificate);
-
-	const subjectString = subjectCert.getSubjectString();
-	const subjectFields = subjectString.slice(1).split('/');
-
-	const fields = {} as Record<string, string>;
-	for (const field of subjectFields) {
-		const eqIndex = field.indexOf('=');
-		fields[field.substring(0, eqIndex)] = field.substring(eqIndex + 1);
-	}
-
-	return fields;
-}
-
-function verifyCertificateChain(certificates: string[]) {
-	let valid = true;
-
-	for (let i = 0; i < certificates.length; i++) {
-		const Cert = certificates[i];
-		const certificate = new jsrsasign.X509();
-		certificate.readCertPEM(Cert);
-
-		const CACert = i + 1 >= certificates.length ? Cert : certificates[i + 1];
-
-		const certStruct = jsrsasign.ASN1HEX.getTLVbyList(certificate.hex!, 0, [0]);
-		const algorithm = certificate.getSignatureAlgorithmField();
-		const signatureHex = certificate.getSignatureValueHex();
-
-		// Verify against CA
-		const Signature = new jsrsasign.KJUR.crypto.Signature({ alg: algorithm });
-		Signature.init(CACert);
-		Signature.updateHex(certStruct);
-		valid = valid && !!Signature.verify(signatureHex); // true if CA signed the certificate
-	}
-
-	return valid;
-}
-
-function PEMString(pemBuffer: Buffer, type = 'CERTIFICATE') {
-	if (pemBuffer.length === 65 && pemBuffer[0] === 0x04) {
-		pemBuffer = Buffer.concat([PEM_PRELUDE, pemBuffer], 91);
-		type = 'PUBLIC KEY';
-	}
-	const cert = pemBuffer.toString('base64');
-
-	const keyParts = [];
-	const max = Math.ceil(cert.length / 64);
-	let start = 0;
-	for (let i = 0; i < max; i++) {
-		keyParts.push(cert.substring(start, start + 64));
-		start += 64;
-	}
-
-	return (
-		`-----BEGIN ${type}-----\n` +
-		keyParts.join('\n') +
-		`\n-----END ${type}-----\n`
-	);
-}
-
-export function hash(data: Buffer) {
-	return crypto
-		.createHash('sha256')
-		.update(data)
-		.digest();
-}
-
-export function verifyLogin({
-	publicKey,
-	authenticatorData,
-	clientDataJSON,
-	clientData,
-	signature,
-	challenge,
-}: {
-	publicKey: Buffer,
-	authenticatorData: Buffer,
-	clientDataJSON: Buffer,
-	clientData: any,
-	signature: Buffer,
-	challenge: string
-}) {
-	if (clientData.type !== 'webauthn.get') {
-		throw new Error('type is not webauthn.get');
-	}
-
-	if (hash(clientData.challenge).toString('hex') !== challenge) {
-		throw new Error('challenge mismatch');
-	}
-	if (clientData.origin !== config.scheme + '://' + config.host) {
-		throw new Error('origin mismatch');
-	}
-
-	const verificationData = Buffer.concat(
-		[authenticatorData, hash(clientDataJSON)],
-		32 + authenticatorData.length,
-	);
-
-	return crypto
-		.createVerify('SHA256')
-		.update(verificationData)
-		.verify(PEMString(publicKey), signature);
-}
-
-export const procedures = {
-	none: {
-		verify({ publicKey }: { publicKey: Map<number, Buffer> }) {
-			const negTwo = publicKey.get(-2);
-
-			if (!negTwo || negTwo.length !== 32) {
-				throw new Error('invalid or no -2 key given');
-			}
-			const negThree = publicKey.get(-3);
-			if (!negThree || negThree.length !== 32) {
-				throw new Error('invalid or no -3 key given');
-			}
-
-			const publicKeyU2F = Buffer.concat(
-				[ECC_PRELUDE, negTwo, negThree],
-				1 + 32 + 32,
-			);
-
-			return {
-				publicKey: publicKeyU2F,
-				valid: true,
-			};
-		},
-	},
-	'android-key': {
-		verify({
-			attStmt,
-			authenticatorData,
-			clientDataHash,
-			publicKey,
-			rpIdHash,
-			credentialId,
-		}: {
-			attStmt: any,
-			authenticatorData: Buffer,
-			clientDataHash: Buffer,
-			publicKey: Map<number, any>;
-			rpIdHash: Buffer,
-			credentialId: Buffer,
-		}) {
-			if (attStmt.alg !== -7) {
-				throw new Error('alg mismatch');
-			}
-
-			const verificationData = Buffer.concat([
-				authenticatorData,
-				clientDataHash,
-			]);
-
-			const attCert: Buffer = attStmt.x5c[0];
-
-			const negTwo = publicKey.get(-2);
-
-			if (!negTwo || negTwo.length !== 32) {
-				throw new Error('invalid or no -2 key given');
-			}
-			const negThree = publicKey.get(-3);
-			if (!negThree || negThree.length !== 32) {
-				throw new Error('invalid or no -3 key given');
-			}
-
-			const publicKeyData = Buffer.concat(
-				[ECC_PRELUDE, negTwo, negThree],
-				1 + 32 + 32,
-			);
-
-			if (!attCert.equals(publicKeyData)) {
-				throw new Error('public key mismatch');
-			}
-
-			const isValid = crypto
-				.createVerify('SHA256')
-				.update(verificationData)
-				.verify(PEMString(attCert), attStmt.sig);
-
-			// TODO: Check 'attestationChallenge' field in extension of cert matches hash(clientDataJSON)
-
-			return {
-				valid: isValid,
-				publicKey: publicKeyData,
-			};
-		},
-	},
-	// what a stupid attestation
-	'android-safetynet': {
-		verify({
-			attStmt,
-			authenticatorData,
-			clientDataHash,
-			publicKey,
-			rpIdHash,
-			credentialId,
-		}: {
-			attStmt: any,
-			authenticatorData: Buffer,
-			clientDataHash: Buffer,
-			publicKey: Map<number, any>;
-			rpIdHash: Buffer,
-			credentialId: Buffer,
-		}) {
-			const verificationData = hash(
-				Buffer.concat([authenticatorData, clientDataHash]),
-			);
-
-			const jwsParts = attStmt.response.toString('utf-8').split('.');
-
-			const header = JSON.parse(base64URLDecode(jwsParts[0]).toString('utf-8'));
-			const response = JSON.parse(
-				base64URLDecode(jwsParts[1]).toString('utf-8'),
-			);
-			const signature = jwsParts[2];
-
-			if (!verificationData.equals(Buffer.from(response.nonce, 'base64'))) {
-				throw new Error('invalid nonce');
-			}
-
-			const certificateChain = header.x5c
-				.map((key: any) => PEMString(key))
-				.concat([GSR2]);
-
-			if (getCertSubject(certificateChain[0]).CN !== 'attest.android.com') {
-				throw new Error('invalid common name');
-			}
-
-			if (!verifyCertificateChain(certificateChain)) {
-				throw new Error('Invalid certificate chain!');
-			}
-
-			const signatureBase = Buffer.from(
-				jwsParts[0] + '.' + jwsParts[1],
-				'utf-8',
-			);
-
-			const valid = crypto
-				.createVerify('sha256')
-				.update(signatureBase)
-				.verify(certificateChain[0], base64URLDecode(signature));
-
-			const negTwo = publicKey.get(-2);
-
-			if (!negTwo || negTwo.length !== 32) {
-				throw new Error('invalid or no -2 key given');
-			}
-			const negThree = publicKey.get(-3);
-			if (!negThree || negThree.length !== 32) {
-				throw new Error('invalid or no -3 key given');
-			}
-
-			const publicKeyData = Buffer.concat(
-				[ECC_PRELUDE, negTwo, negThree],
-				1 + 32 + 32,
-			);
-			return {
-				valid,
-				publicKey: publicKeyData,
-			};
-		},
-	},
-	packed: {
-		verify({
-			attStmt,
-			authenticatorData,
-			clientDataHash,
-			publicKey,
-			rpIdHash,
-			credentialId,
-		}: {
-			attStmt: any,
-			authenticatorData: Buffer,
-			clientDataHash: Buffer,
-			publicKey: Map<number, any>;
-			rpIdHash: Buffer,
-			credentialId: Buffer,
-		}) {
-			const verificationData = Buffer.concat([
-				authenticatorData,
-				clientDataHash,
-			]);
-
-			if (attStmt.x5c) {
-				const attCert = attStmt.x5c[0];
-
-				const validSignature = crypto
-					.createVerify('SHA256')
-					.update(verificationData)
-					.verify(PEMString(attCert), attStmt.sig);
-
-				const negTwo = publicKey.get(-2);
-
-				if (!negTwo || negTwo.length !== 32) {
-					throw new Error('invalid or no -2 key given');
-				}
-				const negThree = publicKey.get(-3);
-				if (!negThree || negThree.length !== 32) {
-					throw new Error('invalid or no -3 key given');
-				}
-
-				const publicKeyData = Buffer.concat(
-					[ECC_PRELUDE, negTwo, negThree],
-					1 + 32 + 32,
-				);
-
-				return {
-					valid: validSignature,
-					publicKey: publicKeyData,
-				};
-			} else if (attStmt.ecdaaKeyId) {
-				// https://fidoalliance.org/specs/fido-v2.0-id-20180227/fido-ecdaa-algorithm-v2.0-id-20180227.html#ecdaa-verify-operation
-				throw new Error('ECDAA-Verify is not supported');
-			} else {
-				if (attStmt.alg !== -7) throw new Error('alg mismatch');
-
-				throw new Error('self attestation is not supported');
-			}
-		},
-	},
-
-	'fido-u2f': {
-		verify({
-			attStmt,
-			authenticatorData,
-			clientDataHash,
-			publicKey,
-			rpIdHash,
-			credentialId,
-		}: {
-			attStmt: any,
-			authenticatorData: Buffer,
-			clientDataHash: Buffer,
-			publicKey: Map<number, any>,
-			rpIdHash: Buffer,
-			credentialId: Buffer
-		}) {
-			const x5c: Buffer[] = attStmt.x5c;
-			if (x5c.length !== 1) {
-				throw new Error('x5c length does not match expectation');
-			}
-
-			const attCert = x5c[0];
-
-			// TODO: make sure attCert is an Elliptic Curve (EC) public key over the P-256 curve
-
-			const negTwo: Buffer = publicKey.get(-2);
-
-			if (!negTwo || negTwo.length !== 32) {
-				throw new Error('invalid or no -2 key given');
-			}
-			const negThree: Buffer = publicKey.get(-3);
-			if (!negThree || negThree.length !== 32) {
-				throw new Error('invalid or no -3 key given');
-			}
-
-			const publicKeyU2F = Buffer.concat(
-				[ECC_PRELUDE, negTwo, negThree],
-				1 + 32 + 32,
-			);
-
-			const verificationData = Buffer.concat([
-				NULL_BYTE,
-				rpIdHash,
-				clientDataHash,
-				credentialId,
-				publicKeyU2F,
-			]);
-
-			const validSignature = crypto
-				.createVerify('SHA256')
-				.update(verificationData)
-				.verify(PEMString(attCert), attStmt.sig);
-
-			return {
-				valid: validSignature,
-				publicKey: publicKeyU2F,
-			};
-		},
-	},
-};
diff --git a/packages/backend/src/server/api/ApiCallService.ts b/packages/backend/src/server/api/ApiCallService.ts
new file mode 100644
index 0000000000..f2ead3d4a1
--- /dev/null
+++ b/packages/backend/src/server/api/ApiCallService.ts
@@ -0,0 +1,258 @@
+import { performance } from 'perf_hooks';
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { getIpHash } from '@/misc/get-ip-hash.js';
+import type { CacheableLocalUser, User } from '@/models/entities/User.js';
+import type { AccessToken } from '@/models/entities/AccessToken.js';
+import type Logger from '@/logger.js';
+import { UserIpsRepository } from '@/models/index.js';
+import { MetaService } from '@/core/MetaService.js';
+import { ApiError } from './error.js';
+import { RateLimiterService } from './RateLimiterService.js';
+import { ApiLoggerService } from './ApiLoggerService.js';
+import { AuthenticateService, AuthenticationError } from './AuthenticateService.js';
+import type { OnApplicationShutdown } from '@nestjs/common';
+import type { IEndpointMeta, IEndpoint } from './endpoints.js';
+import type Koa from 'koa';
+
+const accessDenied = {
+	message: 'Access denied.',
+	code: 'ACCESS_DENIED',
+	id: '56f35758-7dd5-468b-8439-5d6fb8ec9b8e',
+};
+
+@Injectable()
+export class ApiCallService implements OnApplicationShutdown {
+	#logger: Logger;
+	#userIpHistories: Map<User['id'], Set<string>>;
+	#userIpHistoriesClearIntervalId: NodeJS.Timer;
+
+	constructor(
+		@Inject(DI.userIpsRepository)
+		private userIpsRepository: UserIpsRepository,
+
+		private metaService: MetaService,
+		private authenticateService: AuthenticateService,
+		private rateLimiterService: RateLimiterService,
+		private apiLoggerService: ApiLoggerService,
+	) {
+		this.#logger = this.apiLoggerService.logger;
+		this.#userIpHistories = new Map<User['id'], Set<string>>();
+
+		this.#userIpHistoriesClearIntervalId = setInterval(() => {
+			this.#userIpHistories.clear();
+		}, 1000 * 60 * 60);
+	}
+
+	public handleRequest(endpoint: IEndpoint, exec: any, ctx: Koa.Context) {
+		return new Promise<void>((res) => {
+			const body = ctx.is('multipart/form-data')
+				? (ctx.request as any).body
+				: ctx.method === 'GET'
+					? ctx.query
+					: ctx.request.body;
+		
+			const reply = (x?: any, y?: ApiError) => {
+				if (x == null) {
+					ctx.status = 204;
+				} else if (typeof x === 'number' && y) {
+					ctx.status = x;
+					ctx.body = {
+						error: {
+							message: y!.message,
+							code: y!.code,
+							id: y!.id,
+							kind: y!.kind,
+							...(y!.info ? { info: y!.info } : {}),
+						},
+					};
+				} else {
+					// 文字列を返す場合は、JSON.stringify通さないとJSONと認識されない
+					ctx.body = typeof x === 'string' ? JSON.stringify(x) : x;
+				}
+				res();
+			};
+		
+			// Authentication
+			this.authenticateService.authenticate(body['i']).then(([user, app]) => {
+				// API invoking
+				this.#call(endpoint, exec, 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);
+				});
+		
+				// Log IP
+				if (user) {
+					this.metaService.fetch().then(meta => {
+						if (!meta.enableIpLogging) return;
+						const ip = ctx.ip;
+						const ips = this.#userIpHistories.get(user.id);
+						if (ips == null || !ips.has(ip)) {
+							if (ips == null) {
+								this.#userIpHistories.set(user.id, new Set([ip]));
+							} else {
+								ips.add(ip);
+							}
+		
+							try {
+								this.userIpsRepository.createQueryBuilder().insert().values({
+									createdAt: new Date(),
+									userId: user.id,
+									ip: ip,
+								}).orIgnore(true).execute();
+							} catch {
+							}
+						}
+					});
+				}
+			}).catch(e => {
+				if (e instanceof AuthenticationError) {
+					reply(403, new ApiError({
+						message: 'Authentication failed. Please ensure your token is correct.',
+						code: 'AUTHENTICATION_FAILED',
+						id: 'b0a7f5f8-dc2f-4171-b91f-de88ad238e14',
+					}));
+				} else {
+					reply(500, new ApiError());
+				}
+			});
+		});
+	}
+
+	async #call(
+		ep: IEndpoint,
+		exec: any,
+		user: CacheableLocalUser | null | undefined,
+		token: AccessToken | null | undefined,
+		data: any,
+		ctx?: Koa.Context,
+	) {
+		const isSecure = user != null && token == null;
+		const isModerator = user != null && (user.isModerator || user.isAdmin);
+
+		if (ep.meta.secure && !isSecure) {
+			throw new ApiError(accessDenied);
+		}
+
+		if (ep.meta.limit) {
+		// koa will automatically load the `X-Forwarded-For` header if `proxy: true` is configured in the app.
+			let limitActor: string;
+			if (user) {
+				limitActor = user.id;
+			} else {
+				limitActor = getIpHash(ctx!.ip);
+			}
+
+			const limit = Object.assign({}, ep.meta.limit);
+
+			if (!limit.key) {
+				limit.key = ep.name;
+			}
+
+			// Rate limit
+			await this.rateLimiterService.limit(limit as IEndpointMeta['limit'] & { key: NonNullable<string> }, limitActor).catch(e => {
+				throw new ApiError({
+					message: 'Rate limit exceeded. Please try again later.',
+					code: 'RATE_LIMIT_EXCEEDED',
+					id: 'd5826d14-3982-4d2e-8011-b9e9f02499ef',
+					httpStatusCode: 429,
+				});
+			});
+		}
+
+		if (ep.meta.requireCredential && user == null) {
+			throw new ApiError({
+				message: 'Credential required.',
+				code: 'CREDENTIAL_REQUIRED',
+				id: '1384574d-a912-4b81-8601-c7b1c4085df1',
+				httpStatusCode: 401,
+			});
+		}
+
+		if (ep.meta.requireCredential && user!.isSuspended) {
+			throw new ApiError({
+				message: 'Your account has been suspended.',
+				code: 'YOUR_ACCOUNT_SUSPENDED',
+				id: 'a8c724b3-6e9c-4b46-b1a8-bc3ed6258370',
+				httpStatusCode: 403,
+			});
+		}
+
+		if (ep.meta.requireAdmin && !user!.isAdmin) {
+			throw new ApiError(accessDenied, { reason: 'You are not the admin.' });
+		}
+
+		if (ep.meta.requireModerator && !isModerator) {
+			throw new ApiError(accessDenied, { reason: 'You are not a moderator.' });
+		}
+
+		if (token && ep.meta.kind && !token.permission.some(p => p === ep.meta.kind)) {
+			throw new ApiError({
+				message: 'Your app does not have the necessary permissions to use this endpoint.',
+				code: 'PERMISSION_DENIED',
+				id: '1370e5b7-d4eb-4566-bb1d-7748ee6a1838',
+			});
+		}
+
+		// Cast non JSON input
+		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') {
+					try {
+						data[k] = JSON.parse(data[k]);
+					} catch (e) {
+						throw	new ApiError({
+							message: 'Invalid param.',
+							code: 'INVALID_PARAM',
+							id: '0b5f1631-7c1a-41a6-b399-cce335f34d85',
+						}, {
+							param: k,
+							reason: `cannot cast to ${param.type}`,
+						});
+					}
+				}
+			}
+		}
+
+		// API invoking
+		const before = performance.now();
+		return await exec(data, user, token, ctx?.file, ctx?.ip, ctx?.headers).catch((err: Error) => {
+			if (err instanceof ApiError) {
+				throw err;
+			} else {
+				this.#logger.error(`Internal error occurred in ${ep.name}: ${err.message}`, {
+					ep: ep.name,
+					ps: data,
+					e: {
+						message: err.message,
+						code: err.name,
+						stack: err.stack,
+					},
+				});
+				console.error(err);
+				throw new ApiError(null, {
+					e: {
+						message: err.message,
+						code: err.name,
+						stack: err.stack,
+					},
+				});
+			}
+		}).finally(() => {
+			const after = performance.now();
+			const time = after - before;
+			if (time > 1000) {
+				this.#logger.warn(`SLOW API CALL DETECTED: ${ep.name} (${time}ms)`);
+			}
+		});
+	}
+
+	public onApplicationShutdown(signal?: string | undefined) {
+		clearInterval(this.#userIpHistoriesClearIntervalId);
+	}
+}
diff --git a/packages/backend/src/server/api/ApiLoggerService.ts b/packages/backend/src/server/api/ApiLoggerService.ts
new file mode 100644
index 0000000000..c8c5fec85c
--- /dev/null
+++ b/packages/backend/src/server/api/ApiLoggerService.ts
@@ -0,0 +1,12 @@
+import { Inject, Injectable } from '@nestjs/common';
+import Logger from '@/logger.js';
+
+@Injectable()
+export class ApiLoggerService {
+	public logger: Logger;
+
+	constructor(
+	) {
+		this.logger = new Logger('api');
+	}
+}
diff --git a/packages/backend/src/server/api/ApiServerService.ts b/packages/backend/src/server/api/ApiServerService.ts
new file mode 100644
index 0000000000..cfe39238dd
--- /dev/null
+++ b/packages/backend/src/server/api/ApiServerService.ts
@@ -0,0 +1,160 @@
+import { Inject, Injectable } from '@nestjs/common';
+import Koa from 'koa';
+import Router from '@koa/router';
+import multer from '@koa/multer';
+import bodyParser from 'koa-bodyparser';
+import cors from '@koa/cors';
+import { ModuleRef } from '@nestjs/core';
+import { Config } from '@/config.js';
+import { UsersRepository, InstancesRepository, AccessTokensRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import endpoints from './endpoints.js';
+import { ApiCallService } from './ApiCallService.js';
+import { SignupApiService } from './SignupApiService.js';
+import { SigninApiService } from './SigninApiService.js';
+import { GithubServerService } from './integration/GithubServerService.js';
+import { DiscordServerService } from './integration/DiscordServerService.js';
+import { TwitterServerService } from './integration/TwitterServerService.js';
+
+@Injectable()
+export class ApiServerService {
+	constructor(
+		private moduleRef: ModuleRef,
+
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
+
+		@Inject(DI.accessTokensRepository)
+		private accessTokensRepository: AccessTokensRepository,
+
+		private userEntityService: UserEntityService,
+		private apiCallService: ApiCallService,
+		private signupApiServiceService: SignupApiService,
+		private signinApiServiceService: SigninApiService,
+		private githubServerService: GithubServerService,
+		private discordServerService: DiscordServerService,
+		private twitterServerService: TwitterServerService,
+	) {
+	}
+
+	public createApiServer() {
+		const handlers: Record<string, any> = {};
+
+		for (const endpoint of endpoints) {
+			handlers[endpoint.name] = this.moduleRef.get('ep:' + endpoint.name, { strict: false }).exec;
+		}
+
+		// Init app
+		const apiServer = new Koa();
+
+		apiServer.use(cors({
+			origin: '*',
+		}));
+
+		// No caching
+		apiServer.use(async (ctx, next) => {
+			ctx.set('Cache-Control', 'private, max-age=0, must-revalidate');
+			await next();
+		});
+
+		apiServer.use(bodyParser({
+			// リクエストが multipart/form-data でない限りはJSONだと見なす
+			detectJSON: ctx => !ctx.is('multipart/form-data'),
+		}));
+
+		// Init multer instance
+		const upload = multer({
+			storage: multer.diskStorage({}),
+			limits: {
+				fileSize: this.config.maxFileSize ?? 262144000,
+				files: 1,
+			},
+		});
+
+		// Init router
+		const router = new Router();
+
+		/**
+		 * Register endpoint handlers
+		 */
+		for (const endpoint of endpoints) {
+			if (endpoint.meta.requireFile) {
+				router.post(`/${endpoint.name}`, upload.single('file'), this.apiCallService.handleRequest.bind(this.apiCallService, endpoint, handlers[endpoint.name]));
+			} else {
+				// 後方互換性のため
+				if (endpoint.name.includes('-')) {
+					router.post(`/${endpoint.name.replace(/-/g, '_')}`, this.apiCallService.handleRequest.bind(this.apiCallService, endpoint, handlers[endpoint.name]));
+
+					if (endpoint.meta.allowGet) {
+						router.get(`/${endpoint.name.replace(/-/g, '_')}`, this.apiCallService.handleRequest.bind(this.apiCallService, endpoint, handlers[endpoint.name]));
+					} else {
+						router.get(`/${endpoint.name.replace(/-/g, '_')}`, async ctx => { ctx.status = 405; });
+					}
+				}
+
+				router.post(`/${endpoint.name}`, this.apiCallService.handleRequest.bind(this.apiCallService, endpoint, handlers[endpoint.name]));
+
+				if (endpoint.meta.allowGet) {
+					router.get(`/${endpoint.name}`, this.apiCallService.handleRequest.bind(this.apiCallService, endpoint, handlers[endpoint.name]));
+				} else {
+					router.get(`/${endpoint.name}`, async ctx => { ctx.status = 405; });
+				}
+			}
+		}
+
+		router.post('/signup', ctx => this.signupApiServiceService.signup(ctx));
+		router.post('/signin', ctx => this.signinApiServiceService.signin(ctx));
+		router.post('/signup-pending', ctx => this.signupApiServiceService.signupPending(ctx));
+
+		router.use(this.discordServerService.create().routes());
+		router.use(this.githubServerService.create().routes());
+		router.use(this.twitterServerService.create().routes());
+
+		router.get('/v1/instance/peers', async ctx => {
+			const instances = await this.instancesRepository.find({
+				select: ['host'],
+			});
+
+			ctx.body = instances.map(instance => instance.host);
+		});
+
+		router.post('/miauth/:session/check', async ctx => {
+			const token = await this.accessTokensRepository.findOneBy({
+				session: ctx.params.session,
+			});
+
+			if (token && token.session != null && !token.fetched) {
+				this.accessTokensRepository.update(token.id, {
+					fetched: true,
+				});
+
+				ctx.body = {
+					ok: true,
+					token: token.token,
+					user: await this.userEntityService.pack(token.userId, null, { detail: true }),
+				};
+			} else {
+				ctx.body = {
+					ok: false,
+				};
+			}
+		});
+
+		// Return 404 for unknown API
+		router.all('(.*)', async ctx => {
+			ctx.status = 404;
+		});
+
+		// Register router
+		apiServer.use(router.routes());
+
+		return apiServer;
+	}
+}
diff --git a/packages/backend/src/server/api/AuthenticateService.ts b/packages/backend/src/server/api/AuthenticateService.ts
new file mode 100644
index 0000000000..b8bd09509a
--- /dev/null
+++ b/packages/backend/src/server/api/AuthenticateService.ts
@@ -0,0 +1,86 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { AccessTokensRepository, AppsRepository, UsersRepository } from '@/models/index.js';
+import type { CacheableLocalUser, ILocalUser } from '@/models/entities/User.js';
+import type { AccessToken } from '@/models/entities/AccessToken.js';
+import { Cache } from '@/misc/cache.js';
+import type { App } from '@/models/entities/App.js';
+import { UserCacheService } from '@/core/UserCacheService.js';
+import isNativeToken from '@/misc/is-native-token.js';
+
+export class AuthenticationError extends Error {
+	constructor(message: string) {
+		super(message);
+		this.name = 'AuthenticationError';
+	}
+}
+
+@Injectable()
+export class AuthenticateService {
+	#appCache: Cache<App>;
+
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.accessTokensRepository)
+		private accessTokensRepository: AccessTokensRepository,
+
+		@Inject(DI.appsRepository)
+		private appsRepository: AppsRepository,
+
+		private userCacheService: UserCacheService,
+	) {
+		this.#appCache = new Cache<App>(Infinity);
+	}
+
+	public async authenticate(token: string | null): Promise<[CacheableLocalUser | null | undefined, AccessToken | null | undefined]> {
+		if (token == null) {
+			return [null, null];
+		}
+	
+		if (isNativeToken(token)) {
+			const user = await this.userCacheService.localUserByNativeTokenCache.fetch(token,
+				() => this.usersRepository.findOneBy({ token }) as Promise<ILocalUser | null>);
+	
+			if (user == null) {
+				throw new AuthenticationError('user not found');
+			}
+	
+			return [user, null];
+		} else {
+			const accessToken = await this.accessTokensRepository.findOne({
+				where: [{
+					hash: token.toLowerCase(), // app
+				}, {
+					token: token, // miauth
+				}],
+			});
+	
+			if (accessToken == null) {
+				throw new AuthenticationError('invalid signature');
+			}
+	
+			this.accessTokensRepository.update(accessToken.id, {
+				lastUsedAt: new Date(),
+			});
+	
+			const user = await this.userCacheService.localUserByIdCache.fetch(accessToken.userId,
+				() => this.usersRepository.findOneBy({
+					id: accessToken.userId,
+				}) as Promise<ILocalUser>);
+	
+			if (accessToken.appId) {
+				const app = await this.#appCache.fetch(accessToken.appId,
+					() => this.appsRepository.findOneByOrFail({ id: accessToken.appId! }));
+	
+				return [user, {
+					id: accessToken.id,
+					permission: app.permission,
+				} as AccessToken];
+			} else {
+				return [user, accessToken];
+			}
+		}
+	}
+}
diff --git a/packages/backend/src/server/api/EndpointsModule.ts b/packages/backend/src/server/api/EndpointsModule.ts
new file mode 100644
index 0000000000..d2dfd78fd4
--- /dev/null
+++ b/packages/backend/src/server/api/EndpointsModule.ts
@@ -0,0 +1,1268 @@
+import { Module } from '@nestjs/common';
+
+import { CoreModule } from '@/core/CoreModule.js';
+import * as ep___admin_meta from './endpoints/admin/meta.js';
+import * as ep___admin_abuseUserReports from './endpoints/admin/abuse-user-reports.js';
+import * as ep___admin_accounts_create from './endpoints/admin/accounts/create.js';
+import * as ep___admin_accounts_delete from './endpoints/admin/accounts/delete.js';
+import * as ep___admin_ad_create from './endpoints/admin/ad/create.js';
+import * as ep___admin_ad_delete from './endpoints/admin/ad/delete.js';
+import * as ep___admin_ad_list from './endpoints/admin/ad/list.js';
+import * as ep___admin_ad_update from './endpoints/admin/ad/update.js';
+import * as ep___admin_announcements_create from './endpoints/admin/announcements/create.js';
+import * as ep___admin_announcements_delete from './endpoints/admin/announcements/delete.js';
+import * as ep___admin_announcements_list from './endpoints/admin/announcements/list.js';
+import * as ep___admin_announcements_update from './endpoints/admin/announcements/update.js';
+import * as ep___admin_deleteAllFilesOfAUser from './endpoints/admin/delete-all-files-of-a-user.js';
+import * as ep___admin_drive_cleanRemoteFiles from './endpoints/admin/drive/clean-remote-files.js';
+import * as ep___admin_drive_cleanup from './endpoints/admin/drive/cleanup.js';
+import * as ep___admin_drive_files from './endpoints/admin/drive/files.js';
+import * as ep___admin_drive_showFile from './endpoints/admin/drive/show-file.js';
+import * as ep___admin_emoji_addAliasesBulk from './endpoints/admin/emoji/add-aliases-bulk.js';
+import * as ep___admin_emoji_add from './endpoints/admin/emoji/add.js';
+import * as ep___admin_emoji_copy from './endpoints/admin/emoji/copy.js';
+import * as ep___admin_emoji_deleteBulk from './endpoints/admin/emoji/delete-bulk.js';
+import * as ep___admin_emoji_delete from './endpoints/admin/emoji/delete.js';
+import * as ep___admin_emoji_importZip from './endpoints/admin/emoji/import-zip.js';
+import * as ep___admin_emoji_listRemote from './endpoints/admin/emoji/list-remote.js';
+import * as ep___admin_emoji_list from './endpoints/admin/emoji/list.js';
+import * as ep___admin_emoji_removeAliasesBulk from './endpoints/admin/emoji/remove-aliases-bulk.js';
+import * as ep___admin_emoji_setAliasesBulk from './endpoints/admin/emoji/set-aliases-bulk.js';
+import * as ep___admin_emoji_setCategoryBulk from './endpoints/admin/emoji/set-category-bulk.js';
+import * as ep___admin_emoji_update from './endpoints/admin/emoji/update.js';
+import * as ep___admin_federation_deleteAllFiles from './endpoints/admin/federation/delete-all-files.js';
+import * as ep___admin_federation_refreshRemoteInstanceMetadata from './endpoints/admin/federation/refresh-remote-instance-metadata.js';
+import * as ep___admin_federation_removeAllFollowing from './endpoints/admin/federation/remove-all-following.js';
+import * as ep___admin_federation_updateInstance from './endpoints/admin/federation/update-instance.js';
+import * as ep___admin_getIndexStats from './endpoints/admin/get-index-stats.js';
+import * as ep___admin_getTableStats from './endpoints/admin/get-table-stats.js';
+import * as ep___admin_getUserIps from './endpoints/admin/get-user-ips.js';
+import * as ep___admin_invite from './endpoints/admin/invite.js';
+import * as ep___admin_moderators_add from './endpoints/admin/moderators/add.js';
+import * as ep___admin_moderators_remove from './endpoints/admin/moderators/remove.js';
+import * as ep___admin_promo_create from './endpoints/admin/promo/create.js';
+import * as ep___admin_queue_clear from './endpoints/admin/queue/clear.js';
+import * as ep___admin_queue_deliverDelayed from './endpoints/admin/queue/deliver-delayed.js';
+import * as ep___admin_queue_inboxDelayed from './endpoints/admin/queue/inbox-delayed.js';
+import * as ep___admin_queue_stats from './endpoints/admin/queue/stats.js';
+import * as ep___admin_relays_add from './endpoints/admin/relays/add.js';
+import * as ep___admin_relays_list from './endpoints/admin/relays/list.js';
+import * as ep___admin_relays_remove from './endpoints/admin/relays/remove.js';
+import * as ep___admin_resetPassword from './endpoints/admin/reset-password.js';
+import * as ep___admin_resolveAbuseUserReport from './endpoints/admin/resolve-abuse-user-report.js';
+import * as ep___admin_sendEmail from './endpoints/admin/send-email.js';
+import * as ep___admin_serverInfo from './endpoints/admin/server-info.js';
+import * as ep___admin_showModerationLogs from './endpoints/admin/show-moderation-logs.js';
+import * as ep___admin_showUser from './endpoints/admin/show-user.js';
+import * as ep___admin_showUsers from './endpoints/admin/show-users.js';
+import * as ep___admin_silenceUser from './endpoints/admin/silence-user.js';
+import * as ep___admin_suspendUser from './endpoints/admin/suspend-user.js';
+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_deleteAccount from './endpoints/admin/delete-account.js';
+import * as ep___admin_updateUserNote from './endpoints/admin/update-user-note.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';
+import * as ep___antennas_list from './endpoints/antennas/list.js';
+import * as ep___antennas_notes from './endpoints/antennas/notes.js';
+import * as ep___antennas_show from './endpoints/antennas/show.js';
+import * as ep___antennas_update from './endpoints/antennas/update.js';
+import * as ep___ap_get from './endpoints/ap/get.js';
+import * as ep___ap_show from './endpoints/ap/show.js';
+import * as ep___app_create from './endpoints/app/create.js';
+import * as ep___app_show from './endpoints/app/show.js';
+import * as ep___auth_accept from './endpoints/auth/accept.js';
+import * as ep___auth_session_generate from './endpoints/auth/session/generate.js';
+import * as ep___auth_session_show from './endpoints/auth/session/show.js';
+import * as ep___auth_session_userkey from './endpoints/auth/session/userkey.js';
+import * as ep___blocking_create from './endpoints/blocking/create.js';
+import * as ep___blocking_delete from './endpoints/blocking/delete.js';
+import * as ep___blocking_list from './endpoints/blocking/list.js';
+import * as ep___channels_create from './endpoints/channels/create.js';
+import * as ep___channels_featured from './endpoints/channels/featured.js';
+import * as ep___channels_follow from './endpoints/channels/follow.js';
+import * as ep___channels_followed from './endpoints/channels/followed.js';
+import * as ep___channels_owned from './endpoints/channels/owned.js';
+import * as ep___channels_show from './endpoints/channels/show.js';
+import * as ep___channels_timeline from './endpoints/channels/timeline.js';
+import * as ep___channels_unfollow from './endpoints/channels/unfollow.js';
+import * as ep___channels_update from './endpoints/channels/update.js';
+import * as ep___charts_activeUsers from './endpoints/charts/active-users.js';
+import * as ep___charts_apRequest from './endpoints/charts/ap-request.js';
+import * as ep___charts_drive from './endpoints/charts/drive.js';
+import * as ep___charts_federation from './endpoints/charts/federation.js';
+import * as ep___charts_hashtag from './endpoints/charts/hashtag.js';
+import * as ep___charts_instance from './endpoints/charts/instance.js';
+import * as ep___charts_notes from './endpoints/charts/notes.js';
+import * as ep___charts_user_drive from './endpoints/charts/user/drive.js';
+import * as ep___charts_user_following from './endpoints/charts/user/following.js';
+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';
+import * as ep___clips_notes from './endpoints/clips/notes.js';
+import * as ep___clips_show from './endpoints/clips/show.js';
+import * as ep___clips_update from './endpoints/clips/update.js';
+import * as ep___drive from './endpoints/drive.js';
+import * as ep___drive_files from './endpoints/drive/files.js';
+import * as ep___drive_files_attachedNotes from './endpoints/drive/files/attached-notes.js';
+import * as ep___drive_files_checkExistence from './endpoints/drive/files/check-existence.js';
+import * as ep___drive_files_create from './endpoints/drive/files/create.js';
+import * as ep___drive_files_delete from './endpoints/drive/files/delete.js';
+import * as ep___drive_files_findByHash from './endpoints/drive/files/find-by-hash.js';
+import * as ep___drive_files_find from './endpoints/drive/files/find.js';
+import * as ep___drive_files_show from './endpoints/drive/files/show.js';
+import * as ep___drive_files_update from './endpoints/drive/files/update.js';
+import * as ep___drive_files_uploadFromUrl from './endpoints/drive/files/upload-from-url.js';
+import * as ep___drive_folders from './endpoints/drive/folders.js';
+import * as ep___drive_folders_create from './endpoints/drive/folders/create.js';
+import * as ep___drive_folders_delete from './endpoints/drive/folders/delete.js';
+import * as ep___drive_folders_find from './endpoints/drive/folders/find.js';
+import * as ep___drive_folders_show from './endpoints/drive/folders/show.js';
+import * as ep___drive_folders_update from './endpoints/drive/folders/update.js';
+import * as ep___drive_stream from './endpoints/drive/stream.js';
+import * as ep___emailAddress_available from './endpoints/email-address/available.js';
+import * as ep___endpoint from './endpoints/endpoint.js';
+import * as ep___endpoints from './endpoints/endpoints.js';
+import * as ep___exportCustomEmojis from './endpoints/export-custom-emojis.js';
+import * as ep___federation_followers from './endpoints/federation/followers.js';
+import * as ep___federation_following from './endpoints/federation/following.js';
+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';
+import * as ep___following_requests_accept from './endpoints/following/requests/accept.js';
+import * as ep___following_requests_cancel from './endpoints/following/requests/cancel.js';
+import * as ep___following_requests_list from './endpoints/following/requests/list.js';
+import * as ep___following_requests_reject from './endpoints/following/requests/reject.js';
+import * as ep___gallery_featured from './endpoints/gallery/featured.js';
+import * as ep___gallery_popular from './endpoints/gallery/popular.js';
+import * as ep___gallery_posts from './endpoints/gallery/posts.js';
+import * as ep___gallery_posts_create from './endpoints/gallery/posts/create.js';
+import * as ep___gallery_posts_delete from './endpoints/gallery/posts/delete.js';
+import * as ep___gallery_posts_like from './endpoints/gallery/posts/like.js';
+import * as ep___gallery_posts_show from './endpoints/gallery/posts/show.js';
+import * as ep___gallery_posts_unlike from './endpoints/gallery/posts/unlike.js';
+import * as ep___gallery_posts_update from './endpoints/gallery/posts/update.js';
+import * as ep___getOnlineUsersCount from './endpoints/get-online-users-count.js';
+import * as ep___hashtags_list from './endpoints/hashtags/list.js';
+import * as ep___hashtags_search from './endpoints/hashtags/search.js';
+import * as ep___hashtags_show from './endpoints/hashtags/show.js';
+import * as ep___hashtags_trend from './endpoints/hashtags/trend.js';
+import * as ep___hashtags_users from './endpoints/hashtags/users.js';
+import * as ep___i from './endpoints/i.js';
+import * as ep___i_2fa_done from './endpoints/i/2fa/done.js';
+import * as ep___i_2fa_keyDone from './endpoints/i/2fa/key-done.js';
+import * as ep___i_2fa_passwordLess from './endpoints/i/2fa/password-less.js';
+import * as ep___i_2fa_registerKey from './endpoints/i/2fa/register-key.js';
+import * as ep___i_2fa_register from './endpoints/i/2fa/register.js';
+import * as ep___i_2fa_removeKey from './endpoints/i/2fa/remove-key.js';
+import * as ep___i_2fa_unregister from './endpoints/i/2fa/unregister.js';
+import * as ep___i_apps from './endpoints/i/apps.js';
+import * as ep___i_authorizedApps from './endpoints/i/authorized-apps.js';
+import * as ep___i_changePassword from './endpoints/i/change-password.js';
+import * as ep___i_deleteAccount from './endpoints/i/delete-account.js';
+import * as ep___i_exportBlocking from './endpoints/i/export-blocking.js';
+import * as ep___i_exportFollowing from './endpoints/i/export-following.js';
+import * as ep___i_exportMute from './endpoints/i/export-mute.js';
+import * as ep___i_exportNotes from './endpoints/i/export-notes.js';
+import * as ep___i_exportUserLists from './endpoints/i/export-user-lists.js';
+import * as ep___i_favorites from './endpoints/i/favorites.js';
+import * as ep___i_gallery_likes from './endpoints/i/gallery/likes.js';
+import * as ep___i_gallery_posts from './endpoints/i/gallery/posts.js';
+import * as ep___i_getWordMutedNotesCount from './endpoints/i/get-word-muted-notes-count.js';
+import * as ep___i_importBlocking from './endpoints/i/import-blocking.js';
+import * as ep___i_importFollowing from './endpoints/i/import-following.js';
+import * as ep___i_importMuting from './endpoints/i/import-muting.js';
+import * as ep___i_importUserLists from './endpoints/i/import-user-lists.js';
+import * as ep___i_notifications from './endpoints/i/notifications.js';
+import * as ep___i_pageLikes from './endpoints/i/page-likes.js';
+import * as ep___i_pages from './endpoints/i/pages.js';
+import * as ep___i_pin from './endpoints/i/pin.js';
+import * as ep___i_readAllMessagingMessages from './endpoints/i/read-all-messaging-messages.js';
+import * as ep___i_readAllUnreadNotes from './endpoints/i/read-all-unread-notes.js';
+import * as ep___i_readAnnouncement from './endpoints/i/read-announcement.js';
+import * as ep___i_regenerateToken from './endpoints/i/regenerate-token.js';
+import * as ep___i_registry_getAll from './endpoints/i/registry/get-all.js';
+import * as ep___i_registry_getDetail from './endpoints/i/registry/get-detail.js';
+import * as ep___i_registry_get from './endpoints/i/registry/get.js';
+import * as ep___i_registry_keysWithType from './endpoints/i/registry/keys-with-type.js';
+import * as ep___i_registry_keys from './endpoints/i/registry/keys.js';
+import * as ep___i_registry_remove from './endpoints/i/registry/remove.js';
+import * as ep___i_registry_scopes from './endpoints/i/registry/scopes.js';
+import * as ep___i_registry_set from './endpoints/i/registry/set.js';
+import * as ep___i_revokeToken from './endpoints/i/revoke-token.js';
+import * as ep___i_signinHistory from './endpoints/i/signin-history.js';
+import * as ep___i_unpin from './endpoints/i/unpin.js';
+import * as ep___i_updateEmail from './endpoints/i/update-email.js';
+import * as ep___i_update from './endpoints/i/update.js';
+import * as ep___i_userGroupInvites from './endpoints/i/user-group-invites.js';
+import * as ep___i_webhooks_create from './endpoints/i/webhooks/create.js';
+import * as ep___i_webhooks_show from './endpoints/i/webhooks/show.js';
+import * as ep___i_webhooks_list from './endpoints/i/webhooks/list.js';
+import * as ep___i_webhooks_update from './endpoints/i/webhooks/update.js';
+import * as ep___i_webhooks_delete from './endpoints/i/webhooks/delete.js';
+import * as ep___messaging_history from './endpoints/messaging/history.js';
+import * as ep___messaging_messages from './endpoints/messaging/messages.js';
+import * as ep___messaging_messages_create from './endpoints/messaging/messages/create.js';
+import * as ep___messaging_messages_delete from './endpoints/messaging/messages/delete.js';
+import * as ep___messaging_messages_read from './endpoints/messaging/messages/read.js';
+import * as ep___meta from './endpoints/meta.js';
+import * as ep___miauth_genToken from './endpoints/miauth/gen-token.js';
+import * as ep___mute_create from './endpoints/mute/create.js';
+import * as ep___mute_delete from './endpoints/mute/delete.js';
+import * as ep___mute_list from './endpoints/mute/list.js';
+import * as ep___my_apps from './endpoints/my/apps.js';
+import * as ep___notes from './endpoints/notes.js';
+import * as ep___notes_children from './endpoints/notes/children.js';
+import * as ep___notes_clips from './endpoints/notes/clips.js';
+import * as ep___notes_conversation from './endpoints/notes/conversation.js';
+import * as ep___notes_create from './endpoints/notes/create.js';
+import * as ep___notes_delete from './endpoints/notes/delete.js';
+import * as ep___notes_favorites_create from './endpoints/notes/favorites/create.js';
+import * as ep___notes_favorites_delete from './endpoints/notes/favorites/delete.js';
+import * as ep___notes_featured from './endpoints/notes/featured.js';
+import * as ep___notes_globalTimeline from './endpoints/notes/global-timeline.js';
+import * as ep___notes_hybridTimeline from './endpoints/notes/hybrid-timeline.js';
+import * as ep___notes_localTimeline from './endpoints/notes/local-timeline.js';
+import * as ep___notes_mentions from './endpoints/notes/mentions.js';
+import * as ep___notes_polls_recommendation from './endpoints/notes/polls/recommendation.js';
+import * as ep___notes_polls_vote from './endpoints/notes/polls/vote.js';
+import * as ep___notes_reactions from './endpoints/notes/reactions.js';
+import * as ep___notes_reactions_create from './endpoints/notes/reactions/create.js';
+import * as ep___notes_reactions_delete from './endpoints/notes/reactions/delete.js';
+import * as ep___notes_renotes from './endpoints/notes/renotes.js';
+import * as ep___notes_replies from './endpoints/notes/replies.js';
+import * as ep___notes_searchByTag from './endpoints/notes/search-by-tag.js';
+import * as ep___notes_search from './endpoints/notes/search.js';
+import * as ep___notes_show from './endpoints/notes/show.js';
+import * as ep___notes_state from './endpoints/notes/state.js';
+import * as ep___notes_threadMuting_create from './endpoints/notes/thread-muting/create.js';
+import * as ep___notes_threadMuting_delete from './endpoints/notes/thread-muting/delete.js';
+import * as ep___notes_timeline from './endpoints/notes/timeline.js';
+import * as ep___notes_translate from './endpoints/notes/translate.js';
+import * as ep___notes_unrenote from './endpoints/notes/unrenote.js';
+import * as ep___notes_userListTimeline from './endpoints/notes/user-list-timeline.js';
+import * as ep___notifications_create from './endpoints/notifications/create.js';
+import * as ep___notifications_markAllAsRead from './endpoints/notifications/mark-all-as-read.js';
+import * as ep___notifications_read from './endpoints/notifications/read.js';
+import * as ep___pagePush from './endpoints/page-push.js';
+import * as ep___pages_create from './endpoints/pages/create.js';
+import * as ep___pages_delete from './endpoints/pages/delete.js';
+import * as ep___pages_featured from './endpoints/pages/featured.js';
+import * as ep___pages_like from './endpoints/pages/like.js';
+import * as ep___pages_show from './endpoints/pages/show.js';
+import * as ep___pages_unlike from './endpoints/pages/unlike.js';
+import * as ep___pages_update from './endpoints/pages/update.js';
+import * as ep___ping from './endpoints/ping.js';
+import * as ep___pinnedUsers from './endpoints/pinned-users.js';
+import * as ep___promo_read from './endpoints/promo/read.js';
+import * as ep___requestResetPassword from './endpoints/request-reset-password.js';
+import * as ep___resetDb from './endpoints/reset-db.js';
+import * as ep___resetPassword from './endpoints/reset-password.js';
+import * as ep___serverInfo from './endpoints/server-info.js';
+import * as ep___stats from './endpoints/stats.js';
+import * as ep___sw_register from './endpoints/sw/register.js';
+import * as ep___sw_unregister from './endpoints/sw/unregister.js';
+import * as ep___test from './endpoints/test.js';
+import * as ep___username_available from './endpoints/username/available.js';
+import * as ep___users from './endpoints/users.js';
+import * as ep___users_clips from './endpoints/users/clips.js';
+import * as ep___users_followers from './endpoints/users/followers.js';
+import * as ep___users_following from './endpoints/users/following.js';
+import * as ep___users_gallery_posts from './endpoints/users/gallery/posts.js';
+import * as ep___users_getFrequentlyRepliedUsers from './endpoints/users/get-frequently-replied-users.js';
+import * as ep___users_groups_create from './endpoints/users/groups/create.js';
+import * as ep___users_groups_delete from './endpoints/users/groups/delete.js';
+import * as ep___users_groups_invitations_accept from './endpoints/users/groups/invitations/accept.js';
+import * as ep___users_groups_invitations_reject from './endpoints/users/groups/invitations/reject.js';
+import * as ep___users_groups_invite from './endpoints/users/groups/invite.js';
+import * as ep___users_groups_joined from './endpoints/users/groups/joined.js';
+import * as ep___users_groups_leave from './endpoints/users/groups/leave.js';
+import * as ep___users_groups_owned from './endpoints/users/groups/owned.js';
+import * as ep___users_groups_pull from './endpoints/users/groups/pull.js';
+import * as ep___users_groups_show from './endpoints/users/groups/show.js';
+import * as ep___users_groups_transfer from './endpoints/users/groups/transfer.js';
+import * as ep___users_groups_update from './endpoints/users/groups/update.js';
+import * as ep___users_lists_create from './endpoints/users/lists/create.js';
+import * as ep___users_lists_delete from './endpoints/users/lists/delete.js';
+import * as ep___users_lists_list from './endpoints/users/lists/list.js';
+import * as ep___users_lists_pull from './endpoints/users/lists/pull.js';
+import * as ep___users_lists_push from './endpoints/users/lists/push.js';
+import * as ep___users_lists_show from './endpoints/users/lists/show.js';
+import * as ep___users_lists_update from './endpoints/users/lists/update.js';
+import * as ep___users_notes from './endpoints/users/notes.js';
+import * as ep___users_pages from './endpoints/users/pages.js';
+import * as ep___users_reactions from './endpoints/users/reactions.js';
+import * as ep___users_recommendation from './endpoints/users/recommendation.js';
+import * as ep___users_relation from './endpoints/users/relation.js';
+import * as ep___users_reportAbuse from './endpoints/users/report-abuse.js';
+import * as ep___users_searchByUsernameAndHost from './endpoints/users/search-by-username-and-host.js';
+import * as ep___users_search from './endpoints/users/search.js';
+import * as ep___users_show from './endpoints/users/show.js';
+import * as ep___users_stats from './endpoints/users/stats.js';
+import * as ep___fetchRss from './endpoints/fetch-rss.js';
+import * as ep___admin_driveCapOverride from './endpoints/admin/drive-capacity-override.js';
+import { GetterService } from './common/GetterService.js';
+import { ApiLoggerService } from './ApiLoggerService.js';
+import type { Provider } from '@nestjs/common';
+
+const $admin_meta: Provider = { provide: 'ep:admin/meta', useClass: ep___admin_meta.default };
+const $admin_abuseUserReports: Provider = { provide: 'ep:admin/abuse-user-reports', useClass: ep___admin_abuseUserReports.default };
+const $admin_accounts_create: Provider = { provide: 'ep:admin/accounts/create', useClass: ep___admin_accounts_create.default };
+const $admin_accounts_delete: Provider = { provide: 'ep:admin/accounts/delete', useClass: ep___admin_accounts_delete.default };
+const $admin_ad_create: Provider = { provide: 'ep:admin/ad/create', useClass: ep___admin_ad_create.default };
+const $admin_ad_delete: Provider = { provide: 'ep:admin/ad/delete', useClass: ep___admin_ad_delete.default };
+const $admin_ad_list: Provider = { provide: 'ep:admin/ad/list', useClass: ep___admin_ad_list.default };
+const $admin_ad_update: Provider = { provide: 'ep:admin/ad/update', useClass: ep___admin_ad_update.default };
+const $admin_announcements_create: Provider = { provide: 'ep:admin/announcements/create', useClass: ep___admin_announcements_create.default };
+const $admin_announcements_delete: Provider = { provide: 'ep:admin/announcements/delete', useClass: ep___admin_announcements_delete.default };
+const $admin_announcements_list: Provider = { provide: 'ep:admin/announcements/list', useClass: ep___admin_announcements_list.default };
+const $admin_announcements_update: Provider = { provide: 'ep:admin/announcements/update', useClass: ep___admin_announcements_update.default };
+const $admin_deleteAllFilesOfAUser: Provider = { provide: 'ep:admin/delete-all-files-of-a-user', useClass: ep___admin_deleteAllFilesOfAUser.default };
+const $admin_drive_cleanRemoteFiles: Provider = { provide: 'ep:admin/drive/clean-remote-files', useClass: ep___admin_drive_cleanRemoteFiles.default };
+const $admin_drive_cleanup: Provider = { provide: 'ep:admin/drive/cleanup', useClass: ep___admin_drive_cleanup.default };
+const $admin_drive_files: Provider = { provide: 'ep:admin/drive/files', useClass: ep___admin_drive_files.default };
+const $admin_drive_showFile: Provider = { provide: 'ep:admin/drive/show-file', useClass: ep___admin_drive_showFile.default };
+const $admin_emoji_addAliasesBulk: Provider = { provide: 'ep:admin/emoji/add-aliases-bulk', useClass: ep___admin_emoji_addAliasesBulk.default };
+const $admin_emoji_add: Provider = { provide: 'ep:admin/emoji/add', useClass: ep___admin_emoji_add.default };
+const $admin_emoji_copy: Provider = { provide: 'ep:admin/emoji/copy', useClass: ep___admin_emoji_copy.default };
+const $admin_emoji_deleteBulk: Provider = { provide: 'ep:admin/emoji/delete-bulk', useClass: ep___admin_emoji_deleteBulk.default };
+const $admin_emoji_delete: Provider = { provide: 'ep:admin/emoji/delete', useClass: ep___admin_emoji_delete.default };
+const $admin_emoji_importZip: Provider = { provide: 'ep:admin/emoji/import-zip', useClass: ep___admin_emoji_importZip.default };
+const $admin_emoji_listRemote: Provider = { provide: 'ep:admin/emoji/list-remote', useClass: ep___admin_emoji_listRemote.default };
+const $admin_emoji_list: Provider = { provide: 'ep:admin/emoji/list', useClass: ep___admin_emoji_list.default };
+const $admin_emoji_removeAliasesBulk: Provider = { provide: 'ep:admin/emoji/remove-aliases-bulk', useClass: ep___admin_emoji_removeAliasesBulk.default };
+const $admin_emoji_setAliasesBulk: Provider = { provide: 'ep:admin/emoji/set-aliases-bulk', useClass: ep___admin_emoji_setAliasesBulk.default };
+const $admin_emoji_setCategoryBulk: Provider = { provide: 'ep:admin/emoji/set-category-bulk', useClass: ep___admin_emoji_setCategoryBulk.default };
+const $admin_emoji_update: Provider = { provide: 'ep:admin/emoji/update', useClass: ep___admin_emoji_update.default };
+const $admin_federation_deleteAllFiles: Provider = { provide: 'ep:admin/federation/delete-all-files', useClass: ep___admin_federation_deleteAllFiles.default };
+const $admin_federation_refreshRemoteInstanceMetadata: Provider = { provide: 'ep:admin/federation/refresh-remote-instance-metadata', useClass: ep___admin_federation_refreshRemoteInstanceMetadata.default };
+const $admin_federation_removeAllFollowing: Provider = { provide: 'ep:admin/federation/remove-all-following', useClass: ep___admin_federation_removeAllFollowing.default };
+const $admin_federation_updateInstance: Provider = { provide: 'ep:admin/federation/update-instance', useClass: ep___admin_federation_updateInstance.default };
+const $admin_getIndexStats: Provider = { provide: 'ep:admin/get-index-stats', useClass: ep___admin_getIndexStats.default };
+const $admin_getTableStats: Provider = { provide: 'ep:admin/get-table-stats', useClass: ep___admin_getTableStats.default };
+const $admin_getUserIps: Provider = { provide: 'ep:admin/get-user-ips', useClass: ep___admin_getUserIps.default };
+const $admin_invite: Provider = { provide: 'ep:admin/invite', useClass: ep___admin_invite.default };
+const $admin_moderators_add: Provider = { provide: 'ep:admin/moderators/add', useClass: ep___admin_moderators_add.default };
+const $admin_moderators_remove: Provider = { provide: 'ep:admin/moderators/remove', useClass: ep___admin_moderators_remove.default };
+const $admin_promo_create: Provider = { provide: 'ep:admin/promo/create', useClass: ep___admin_promo_create.default };
+const $admin_queue_clear: Provider = { provide: 'ep:admin/queue/clear', useClass: ep___admin_queue_clear.default };
+const $admin_queue_deliverDelayed: Provider = { provide: 'ep:admin/queue/deliver-delayed', useClass: ep___admin_queue_deliverDelayed.default };
+const $admin_queue_inboxDelayed: Provider = { provide: 'ep:admin/queue/inbox-delayed', useClass: ep___admin_queue_inboxDelayed.default };
+const $admin_queue_stats: Provider = { provide: 'ep:admin/queue/stats', useClass: ep___admin_queue_stats.default };
+const $admin_relays_add: Provider = { provide: 'ep:admin/relays/add', useClass: ep___admin_relays_add.default };
+const $admin_relays_list: Provider = { provide: 'ep:admin/relays/list', useClass: ep___admin_relays_list.default };
+const $admin_relays_remove: Provider = { provide: 'ep:admin/relays/remove', useClass: ep___admin_relays_remove.default };
+const $admin_resetPassword: Provider = { provide: 'ep:admin/reset-password', useClass: ep___admin_resetPassword.default };
+const $admin_resolveAbuseUserReport: Provider = { provide: 'ep:admin/resolve-abuse-user-report', useClass: ep___admin_resolveAbuseUserReport.default };
+const $admin_sendEmail: Provider = { provide: 'ep:admin/send-email', useClass: ep___admin_sendEmail.default };
+const $admin_serverInfo: Provider = { provide: 'ep:admin/server-info', useClass: ep___admin_serverInfo.default };
+const $admin_showModerationLogs: Provider = { provide: 'ep:admin/show-moderation-logs', useClass: ep___admin_showModerationLogs.default };
+const $admin_showUser: Provider = { provide: 'ep:admin/show-user', useClass: ep___admin_showUser.default };
+const $admin_showUsers: Provider = { provide: 'ep:admin/show-users', useClass: ep___admin_showUsers.default };
+const $admin_silenceUser: Provider = { provide: 'ep:admin/silence-user', useClass: ep___admin_silenceUser.default };
+const $admin_suspendUser: Provider = { provide: 'ep:admin/suspend-user', useClass: ep___admin_suspendUser.default };
+const $admin_unsilenceUser: Provider = { provide: 'ep:admin/unsilence-user', useClass: ep___admin_unsilenceUser.default };
+const $admin_unsuspendUser: Provider = { provide: 'ep:admin/unsuspend-user', useClass: ep___admin_unsuspendUser.default };
+const $admin_updateMeta: Provider = { provide: 'ep:admin/update-meta', useClass: ep___admin_updateMeta.default };
+const $admin_deleteAccount: Provider = { provide: 'ep:admin/delete-account', useClass: ep___admin_deleteAccount.default };
+const $admin_updateUserNote: Provider = { provide: 'ep:admin/update-user-note', useClass: ep___admin_updateUserNote.default };
+const $announcements: Provider = { provide: 'ep:announcements', useClass: ep___announcements.default };
+const $antennas_create: Provider = { provide: 'ep:antennas/create', useClass: ep___antennas_create.default };
+const $antennas_delete: Provider = { provide: 'ep:antennas/delete', useClass: ep___antennas_delete.default };
+const $antennas_list: Provider = { provide: 'ep:antennas/list', useClass: ep___antennas_list.default };
+const $antennas_notes: Provider = { provide: 'ep:antennas/notes', useClass: ep___antennas_notes.default };
+const $antennas_show: Provider = { provide: 'ep:antennas/show', useClass: ep___antennas_show.default };
+const $antennas_update: Provider = { provide: 'ep:antennas/update', useClass: ep___antennas_update.default };
+const $ap_get: Provider = { provide: 'ep:ap/get', useClass: ep___ap_get.default };
+const $ap_show: Provider = { provide: 'ep:ap/show', useClass: ep___ap_show.default };
+const $app_create: Provider = { provide: 'ep:app/create', useClass: ep___app_create.default };
+const $app_show: Provider = { provide: 'ep:app/show', useClass: ep___app_show.default };
+const $auth_accept: Provider = { provide: 'ep:auth/accept', useClass: ep___auth_accept.default };
+const $auth_session_generate: Provider = { provide: 'ep:auth/session/generate', useClass: ep___auth_session_generate.default };
+const $auth_session_show: Provider = { provide: 'ep:auth/session/show', useClass: ep___auth_session_show.default };
+const $auth_session_userkey: Provider = { provide: 'ep:auth/session/userkey', useClass: ep___auth_session_userkey.default };
+const $blocking_create: Provider = { provide: 'ep:blocking/create', useClass: ep___blocking_create.default };
+const $blocking_delete: Provider = { provide: 'ep:blocking/delete', useClass: ep___blocking_delete.default };
+const $blocking_list: Provider = { provide: 'ep:blocking/list', useClass: ep___blocking_list.default };
+const $channels_create: Provider = { provide: 'ep:channels/create', useClass: ep___channels_create.default };
+const $channels_featured: Provider = { provide: 'ep:channels/featured', useClass: ep___channels_featured.default };
+const $channels_follow: Provider = { provide: 'ep:channels/follow', useClass: ep___channels_follow.default };
+const $channels_followed: Provider = { provide: 'ep:channels/followed', useClass: ep___channels_followed.default };
+const $channels_owned: Provider = { provide: 'ep:channels/owned', useClass: ep___channels_owned.default };
+const $channels_show: Provider = { provide: 'ep:channels/show', useClass: ep___channels_show.default };
+const $channels_timeline: Provider = { provide: 'ep:channels/timeline', useClass: ep___channels_timeline.default };
+const $channels_unfollow: Provider = { provide: 'ep:channels/unfollow', useClass: ep___channels_unfollow.default };
+const $channels_update: Provider = { provide: 'ep:channels/update', useClass: ep___channels_update.default };
+const $charts_activeUsers: Provider = { provide: 'ep:charts/active-users', useClass: ep___charts_activeUsers.default };
+const $charts_apRequest: Provider = { provide: 'ep:charts/ap-request', useClass: ep___charts_apRequest.default };
+const $charts_drive: Provider = { provide: 'ep:charts/drive', useClass: ep___charts_drive.default };
+const $charts_federation: Provider = { provide: 'ep:charts/federation', useClass: ep___charts_federation.default };
+const $charts_hashtag: Provider = { provide: 'ep:charts/hashtag', useClass: ep___charts_hashtag.default };
+const $charts_instance: Provider = { provide: 'ep:charts/instance', useClass: ep___charts_instance.default };
+const $charts_notes: Provider = { provide: 'ep:charts/notes', useClass: ep___charts_notes.default };
+const $charts_user_drive: Provider = { provide: 'ep:charts/user/drive', useClass: ep___charts_user_drive.default };
+const $charts_user_following: Provider = { provide: 'ep:charts/user/following', useClass: ep___charts_user_following.default };
+const $charts_user_notes: Provider = { provide: 'ep:charts/user/notes', useClass: ep___charts_user_notes.default };
+const $charts_user_reactions: Provider = { provide: 'ep:charts/user/reactions', useClass: ep___charts_user_reactions.default };
+const $charts_users: Provider = { provide: 'ep:charts/users', useClass: ep___charts_users.default };
+const $clips_addNote: Provider = { provide: 'ep:clips/add-note', useClass: ep___clips_addNote.default };
+const $clips_removeNote: Provider = { provide: 'ep:clips/remove-note', useClass: ep___clips_removeNote.default };
+const $clips_create: Provider = { provide: 'ep:clips/create', useClass: ep___clips_create.default };
+const $clips_delete: Provider = { provide: 'ep:clips/delete', useClass: ep___clips_delete.default };
+const $clips_list: Provider = { provide: 'ep:clips/list', useClass: ep___clips_list.default };
+const $clips_notes: Provider = { provide: 'ep:clips/notes', useClass: ep___clips_notes.default };
+const $clips_show: Provider = { provide: 'ep:clips/show', useClass: ep___clips_show.default };
+const $clips_update: Provider = { provide: 'ep:clips/update', useClass: ep___clips_update.default };
+const $drive: Provider = { provide: 'ep:drive', useClass: ep___drive.default };
+const $drive_files: Provider = { provide: 'ep:drive/files', useClass: ep___drive_files.default };
+const $drive_files_attachedNotes: Provider = { provide: 'ep:drive/files/attached-notes', useClass: ep___drive_files_attachedNotes.default };
+const $drive_files_checkExistence: Provider = { provide: 'ep:drive/files/check-existence', useClass: ep___drive_files_checkExistence.default };
+const $drive_files_create: Provider = { provide: 'ep:drive/files/create', useClass: ep___drive_files_create.default };
+const $drive_files_delete: Provider = { provide: 'ep:drive/files/delete', useClass: ep___drive_files_delete.default };
+const $drive_files_findByHash: Provider = { provide: 'ep:drive/files/find-by-hash', useClass: ep___drive_files_findByHash.default };
+const $drive_files_find: Provider = { provide: 'ep:drive/files/find', useClass: ep___drive_files_find.default };
+const $drive_files_show: Provider = { provide: 'ep:drive/files/show', useClass: ep___drive_files_show.default };
+const $drive_files_update: Provider = { provide: 'ep:drive/files/update', useClass: ep___drive_files_update.default };
+const $drive_files_uploadFromUrl: Provider = { provide: 'ep:drive/files/upload-from-url', useClass: ep___drive_files_uploadFromUrl.default };
+const $drive_folders: Provider = { provide: 'ep:drive/folders', useClass: ep___drive_folders.default };
+const $drive_folders_create: Provider = { provide: 'ep:drive/folders/create', useClass: ep___drive_folders_create.default };
+const $drive_folders_delete: Provider = { provide: 'ep:drive/folders/delete', useClass: ep___drive_folders_delete.default };
+const $drive_folders_find: Provider = { provide: 'ep:drive/folders/find', useClass: ep___drive_folders_find.default };
+const $drive_folders_show: Provider = { provide: 'ep:drive/folders/show', useClass: ep___drive_folders_show.default };
+const $drive_folders_update: Provider = { provide: 'ep:drive/folders/update', useClass: ep___drive_folders_update.default };
+const $drive_stream: Provider = { provide: 'ep:drive/stream', useClass: ep___drive_stream.default };
+const $emailAddress_available: Provider = { provide: 'ep:email-address/available', useClass: ep___emailAddress_available.default };
+const $endpoint: Provider = { provide: 'ep:endpoint', useClass: ep___endpoint.default };
+const $endpoints: Provider = { provide: 'ep:endpoints', useClass: ep___endpoints.default };
+const $exportCustomEmojis: Provider = { provide: 'ep:export-custom-emojis', useClass: ep___exportCustomEmojis.default };
+const $federation_followers: Provider = { provide: 'ep:federation/followers', useClass: ep___federation_followers.default };
+const $federation_following: Provider = { provide: 'ep:federation/following', useClass: ep___federation_following.default };
+const $federation_instances: Provider = { provide: 'ep:federation/instances', useClass: ep___federation_instances.default };
+const $federation_showInstance: Provider = { provide: 'ep:federation/show-instance', useClass: ep___federation_showInstance.default };
+const $federation_updateRemoteUser: Provider = { provide: 'ep:federation/update-remote-user', useClass: ep___federation_updateRemoteUser.default };
+const $federation_users: Provider = { provide: 'ep:federation/users', useClass: ep___federation_users.default };
+const $federation_stats: Provider = { provide: 'ep:federation/stats', useClass: ep___federation_stats.default };
+const $following_create: Provider = { provide: 'ep:following/create', useClass: ep___following_create.default };
+const $following_delete: Provider = { provide: 'ep:following/delete', useClass: ep___following_delete.default };
+const $following_invalidate: Provider = { provide: 'ep:following/invalidate', useClass: ep___following_invalidate.default };
+const $following_requests_accept: Provider = { provide: 'ep:following/requests/accept', useClass: ep___following_requests_accept.default };
+const $following_requests_cancel: Provider = { provide: 'ep:following/requests/cancel', useClass: ep___following_requests_cancel.default };
+const $following_requests_list: Provider = { provide: 'ep:following/requests/list', useClass: ep___following_requests_list.default };
+const $following_requests_reject: Provider = { provide: 'ep:following/requests/reject', useClass: ep___following_requests_reject.default };
+const $gallery_featured: Provider = { provide: 'ep:gallery/featured', useClass: ep___gallery_featured.default };
+const $gallery_popular: Provider = { provide: 'ep:gallery/popular', useClass: ep___gallery_popular.default };
+const $gallery_posts: Provider = { provide: 'ep:gallery/posts', useClass: ep___gallery_posts.default };
+const $gallery_posts_create: Provider = { provide: 'ep:gallery/posts/create', useClass: ep___gallery_posts_create.default };
+const $gallery_posts_delete: Provider = { provide: 'ep:gallery/posts/delete', useClass: ep___gallery_posts_delete.default };
+const $gallery_posts_like: Provider = { provide: 'ep:gallery/posts/like', useClass: ep___gallery_posts_like.default };
+const $gallery_posts_show: Provider = { provide: 'ep:gallery/posts/show', useClass: ep___gallery_posts_show.default };
+const $gallery_posts_unlike: Provider = { provide: 'ep:gallery/posts/unlike', useClass: ep___gallery_posts_unlike.default };
+const $gallery_posts_update: Provider = { provide: 'ep:gallery/posts/update', useClass: ep___gallery_posts_update.default };
+const $getOnlineUsersCount: Provider = { provide: 'ep:get-online-users-count', useClass: ep___getOnlineUsersCount.default };
+const $hashtags_list: Provider = { provide: 'ep:hashtags/list', useClass: ep___hashtags_list.default };
+const $hashtags_search: Provider = { provide: 'ep:hashtags/search', useClass: ep___hashtags_search.default };
+const $hashtags_show: Provider = { provide: 'ep:hashtags/show', useClass: ep___hashtags_show.default };
+const $hashtags_trend: Provider = { provide: 'ep:hashtags/trend', useClass: ep___hashtags_trend.default };
+const $hashtags_users: Provider = { provide: 'ep:hashtags/users', useClass: ep___hashtags_users.default };
+const $i: Provider = { provide: 'ep:i', useClass: ep___i.default };
+const $i_2fa_done: Provider = { provide: 'ep:i/2fa/done', useClass: ep___i_2fa_done.default };
+const $i_2fa_keyDone: Provider = { provide: 'ep:i/2fa/key-done', useClass: ep___i_2fa_keyDone.default };
+const $i_2fa_passwordLess: Provider = { provide: 'ep:i/2fa/password-less', useClass: ep___i_2fa_passwordLess.default };
+const $i_2fa_registerKey: Provider = { provide: 'ep:i/2fa/register-key', useClass: ep___i_2fa_registerKey.default };
+const $i_2fa_register: Provider = { provide: 'ep:i/2fa/register', useClass: ep___i_2fa_register.default };
+const $i_2fa_removeKey: Provider = { provide: 'ep:i/2fa/remove-key', useClass: ep___i_2fa_removeKey.default };
+const $i_2fa_unregister: Provider = { provide: 'ep:i/2fa/unregister', useClass: ep___i_2fa_unregister.default };
+const $i_apps: Provider = { provide: 'ep:i/apps', useClass: ep___i_apps.default };
+const $i_authorizedApps: Provider = { provide: 'ep:i/authorized-apps', useClass: ep___i_authorizedApps.default };
+const $i_changePassword: Provider = { provide: 'ep:i/change-password', useClass: ep___i_changePassword.default };
+const $i_deleteAccount: Provider = { provide: 'ep:i/delete-account', useClass: ep___i_deleteAccount.default };
+const $i_exportBlocking: Provider = { provide: 'ep:i/export-blocking', useClass: ep___i_exportBlocking.default };
+const $i_exportFollowing: Provider = { provide: 'ep:i/export-following', useClass: ep___i_exportFollowing.default };
+const $i_exportMute: Provider = { provide: 'ep:i/export-mute', useClass: ep___i_exportMute.default };
+const $i_exportNotes: Provider = { provide: 'ep:i/export-notes', useClass: ep___i_exportNotes.default };
+const $i_exportUserLists: Provider = { provide: 'ep:i/export-user-lists', useClass: ep___i_exportUserLists.default };
+const $i_favorites: Provider = { provide: 'ep:i/favorites', useClass: ep___i_favorites.default };
+const $i_gallery_likes: Provider = { provide: 'ep:i/gallery/likes', useClass: ep___i_gallery_likes.default };
+const $i_gallery_posts: Provider = { provide: 'ep:i/gallery/posts', useClass: ep___i_gallery_posts.default };
+const $i_getWordMutedNotesCount: Provider = { provide: 'ep:i/get-word-muted-notes-count', useClass: ep___i_getWordMutedNotesCount.default };
+const $i_importBlocking: Provider = { provide: 'ep:i/import-blocking', useClass: ep___i_importBlocking.default };
+const $i_importFollowing: Provider = { provide: 'ep:i/import-following', useClass: ep___i_importFollowing.default };
+const $i_importMuting: Provider = { provide: 'ep:i/import-muting', useClass: ep___i_importMuting.default };
+const $i_importUserLists: Provider = { provide: 'ep:i/import-user-lists', useClass: ep___i_importUserLists.default };
+const $i_notifications: Provider = { provide: 'ep:i/notifications', useClass: ep___i_notifications.default };
+const $i_pageLikes: Provider = { provide: 'ep:i/page-likes', useClass: ep___i_pageLikes.default };
+const $i_pages: Provider = { provide: 'ep:i/pages', useClass: ep___i_pages.default };
+const $i_pin: Provider = { provide: 'ep:i/pin', useClass: ep___i_pin.default };
+const $i_readAllMessagingMessages: Provider = { provide: 'ep:i/read-all-messaging-messages', useClass: ep___i_readAllMessagingMessages.default };
+const $i_readAllUnreadNotes: Provider = { provide: 'ep:i/read-all-unread-notes', useClass: ep___i_readAllUnreadNotes.default };
+const $i_readAnnouncement: Provider = { provide: 'ep:i/read-announcement', useClass: ep___i_readAnnouncement.default };
+const $i_regenerateToken: Provider = { provide: 'ep:i/regenerate-token', useClass: ep___i_regenerateToken.default };
+const $i_registry_getAll: Provider = { provide: 'ep:i/registry/get-all', useClass: ep___i_registry_getAll.default };
+const $i_registry_getDetail: Provider = { provide: 'ep:i/registry/get-detail', useClass: ep___i_registry_getDetail.default };
+const $i_registry_get: Provider = { provide: 'ep:i/registry/get', useClass: ep___i_registry_get.default };
+const $i_registry_keysWithType: Provider = { provide: 'ep:i/registry/keys-with-type', useClass: ep___i_registry_keysWithType.default };
+const $i_registry_keys: Provider = { provide: 'ep:i/registry/keys', useClass: ep___i_registry_keys.default };
+const $i_registry_remove: Provider = { provide: 'ep:i/registry/remove', useClass: ep___i_registry_remove.default };
+const $i_registry_scopes: Provider = { provide: 'ep:i/registry/scopes', useClass: ep___i_registry_scopes.default };
+const $i_registry_set: Provider = { provide: 'ep:i/registry/set', useClass: ep___i_registry_set.default };
+const $i_revokeToken: Provider = { provide: 'ep:i/revoke-token', useClass: ep___i_revokeToken.default };
+const $i_signinHistory: Provider = { provide: 'ep:i/signin-history', useClass: ep___i_signinHistory.default };
+const $i_unpin: Provider = { provide: 'ep:i/unpin', useClass: ep___i_unpin.default };
+const $i_updateEmail: Provider = { provide: 'ep:i/update-email', useClass: ep___i_updateEmail.default };
+const $i_update: Provider = { provide: 'ep:i/update', useClass: ep___i_update.default };
+const $i_userGroupInvites: Provider = { provide: 'ep:i/user-group-invites', useClass: ep___i_userGroupInvites.default };
+const $i_webhooks_create: Provider = { provide: 'ep:i/webhooks/create', useClass: ep___i_webhooks_create.default };
+const $i_webhooks_list: Provider = { provide: 'ep:i/webhooks/list', useClass: ep___i_webhooks_list.default };
+const $i_webhooks_show: Provider = { provide: 'ep:i/webhooks/show', useClass: ep___i_webhooks_show.default };
+const $i_webhooks_update: Provider = { provide: 'ep:i/webhooks/update', useClass: ep___i_webhooks_update.default };
+const $i_webhooks_delete: Provider = { provide: 'ep:i/webhooks/delete', useClass: ep___i_webhooks_delete.default };
+const $messaging_history: Provider = { provide: 'ep:messaging/history', useClass: ep___messaging_history.default };
+const $messaging_messages: Provider = { provide: 'ep:messaging/messages', useClass: ep___messaging_messages.default };
+const $messaging_messages_create: Provider = { provide: 'ep:messaging/messages/create', useClass: ep___messaging_messages_create.default };
+const $messaging_messages_delete: Provider = { provide: 'ep:messaging/messages/delete', useClass: ep___messaging_messages_delete.default };
+const $messaging_messages_read: Provider = { provide: 'ep:messaging/messages/read', useClass: ep___messaging_messages_read.default };
+const $meta: Provider = { provide: 'ep:meta', useClass: ep___meta.default };
+const $miauth_genToken: Provider = { provide: 'ep:miauth/gen-token', useClass: ep___miauth_genToken.default };
+const $mute_create: Provider = { provide: 'ep:mute/create', useClass: ep___mute_create.default };
+const $mute_delete: Provider = { provide: 'ep:mute/delete', useClass: ep___mute_delete.default };
+const $mute_list: Provider = { provide: 'ep:mute/list', useClass: ep___mute_list.default };
+const $my_apps: Provider = { provide: 'ep:my/apps', useClass: ep___my_apps.default };
+const $notes: Provider = { provide: 'ep:notes', useClass: ep___notes.default };
+const $notes_children: Provider = { provide: 'ep:notes/children', useClass: ep___notes_children.default };
+const $notes_clips: Provider = { provide: 'ep:notes/clips', useClass: ep___notes_clips.default };
+const $notes_conversation: Provider = { provide: 'ep:notes/conversation', useClass: ep___notes_conversation.default };
+const $notes_create: Provider = { provide: 'ep:notes/create', useClass: ep___notes_create.default };
+const $notes_delete: Provider = { provide: 'ep:notes/delete', useClass: ep___notes_delete.default };
+const $notes_favorites_create: Provider = { provide: 'ep:notes/favorites/create', useClass: ep___notes_favorites_create.default };
+const $notes_favorites_delete: Provider = { provide: 'ep:notes/favorites/delete', useClass: ep___notes_favorites_delete.default };
+const $notes_featured: Provider = { provide: 'ep:notes/featured', useClass: ep___notes_featured.default };
+const $notes_globalTimeline: Provider = { provide: 'ep:notes/global-timeline', useClass: ep___notes_globalTimeline.default };
+const $notes_hybridTimeline: Provider = { provide: 'ep:notes/hybrid-timeline', useClass: ep___notes_hybridTimeline.default };
+const $notes_localTimeline: Provider = { provide: 'ep:notes/local-timeline', useClass: ep___notes_localTimeline.default };
+const $notes_mentions: Provider = { provide: 'ep:notes/mentions', useClass: ep___notes_mentions.default };
+const $notes_polls_recommendation: Provider = { provide: 'ep:notes/polls/recommendation', useClass: ep___notes_polls_recommendation.default };
+const $notes_polls_vote: Provider = { provide: 'ep:notes/polls/vote', useClass: ep___notes_polls_vote.default };
+const $notes_reactions: Provider = { provide: 'ep:notes/reactions', useClass: ep___notes_reactions.default };
+const $notes_reactions_create: Provider = { provide: 'ep:notes/reactions/create', useClass: ep___notes_reactions_create.default };
+const $notes_reactions_delete: Provider = { provide: 'ep:notes/reactions/delete', useClass: ep___notes_reactions_delete.default };
+const $notes_renotes: Provider = { provide: 'ep:notes/renotes', useClass: ep___notes_renotes.default };
+const $notes_replies: Provider = { provide: 'ep:notes/replies', useClass: ep___notes_replies.default };
+const $notes_searchByTag: Provider = { provide: 'ep:notes/search-by-tag', useClass: ep___notes_searchByTag.default };
+const $notes_search: Provider = { provide: 'ep:notes/search', useClass: ep___notes_search.default };
+const $notes_show: Provider = { provide: 'ep:notes/show', useClass: ep___notes_show.default };
+const $notes_state: Provider = { provide: 'ep:notes/state', useClass: ep___notes_state.default };
+const $notes_threadMuting_create: Provider = { provide: 'ep:notes/thread-muting/create', useClass: ep___notes_threadMuting_create.default };
+const $notes_threadMuting_delete: Provider = { provide: 'ep:notes/thread-muting/delete', useClass: ep___notes_threadMuting_delete.default };
+const $notes_timeline: Provider = { provide: 'ep:notes/timeline', useClass: ep___notes_timeline.default };
+const $notes_translate: Provider = { provide: 'ep:notes/translate', useClass: ep___notes_translate.default };
+const $notes_unrenote: Provider = { provide: 'ep:notes/unrenote', useClass: ep___notes_unrenote.default };
+const $notes_userListTimeline: Provider = { provide: 'ep:notes/user-list-timeline', useClass: ep___notes_userListTimeline.default };
+const $notifications_create: Provider = { provide: 'ep:notifications/create', useClass: ep___notifications_create.default };
+const $notifications_markAllAsRead: Provider = { provide: 'ep:notifications/mark-all-as-read', useClass: ep___notifications_markAllAsRead.default };
+const $notifications_read: Provider = { provide: 'ep:notifications/read', useClass: ep___notifications_read.default };
+const $pagePush: Provider = { provide: 'ep:page-push', useClass: ep___pagePush.default };
+const $pages_create: Provider = { provide: 'ep:pages/create', useClass: ep___pages_create.default };
+const $pages_delete: Provider = { provide: 'ep:pages/delete', useClass: ep___pages_delete.default };
+const $pages_featured: Provider = { provide: 'ep:pages/featured', useClass: ep___pages_featured.default };
+const $pages_like: Provider = { provide: 'ep:pages/like', useClass: ep___pages_like.default };
+const $pages_show: Provider = { provide: 'ep:pages/show', useClass: ep___pages_show.default };
+const $pages_unlike: Provider = { provide: 'ep:pages/unlike', useClass: ep___pages_unlike.default };
+const $pages_update: Provider = { provide: 'ep:pages/update', useClass: ep___pages_update.default };
+const $ping: Provider = { provide: 'ep:ping', useClass: ep___ping.default };
+const $pinnedUsers: Provider = { provide: 'ep:pinned-users', useClass: ep___pinnedUsers.default };
+const $promo_read: Provider = { provide: 'ep:promo/read', useClass: ep___promo_read.default };
+const $requestResetPassword: Provider = { provide: 'ep:request-reset-password', useClass: ep___requestResetPassword.default };
+const $resetDb: Provider = { provide: 'ep:reset-db', useClass: ep___resetDb.default };
+const $resetPassword: Provider = { provide: 'ep:reset-password', useClass: ep___resetPassword.default };
+const $serverInfo: Provider = { provide: 'ep:server-info', useClass: ep___serverInfo.default };
+const $stats: Provider = { provide: 'ep:stats', useClass: ep___stats.default };
+const $sw_register: Provider = { provide: 'ep:sw/register', useClass: ep___sw_register.default };
+const $sw_unregister: Provider = { provide: 'ep:sw/unregister', useClass: ep___sw_unregister.default };
+const $test: Provider = { provide: 'ep:test', useClass: ep___test.default };
+const $username_available: Provider = { provide: 'ep:username/available', useClass: ep___username_available.default };
+const $users: Provider = { provide: 'ep:users', useClass: ep___users.default };
+const $users_clips: Provider = { provide: 'ep:users/clips', useClass: ep___users_clips.default };
+const $users_followers: Provider = { provide: 'ep:users/followers', useClass: ep___users_followers.default };
+const $users_following: Provider = { provide: 'ep:users/following', useClass: ep___users_following.default };
+const $users_gallery_posts: Provider = { provide: 'ep:users/gallery/posts', useClass: ep___users_gallery_posts.default };
+const $users_getFrequentlyRepliedUsers: Provider = { provide: 'ep:users/get-frequently-replied-users', useClass: ep___users_getFrequentlyRepliedUsers.default };
+const $users_groups_create: Provider = { provide: 'ep:users/groups/create', useClass: ep___users_groups_create.default };
+const $users_groups_delete: Provider = { provide: 'ep:users/groups/delete', useClass: ep___users_groups_delete.default };
+const $users_groups_invitations_accept: Provider = { provide: 'ep:users/groups/invitations/accept', useClass: ep___users_groups_invitations_accept.default };
+const $users_groups_invitations_reject: Provider = { provide: 'ep:users/groups/invitations/reject', useClass: ep___users_groups_invitations_reject.default };
+const $users_groups_invite: Provider = { provide: 'ep:users/groups/invite', useClass: ep___users_groups_invite.default };
+const $users_groups_joined: Provider = { provide: 'ep:users/groups/joined', useClass: ep___users_groups_joined.default };
+const $users_groups_leave: Provider = { provide: 'ep:users/groups/leave', useClass: ep___users_groups_leave.default };
+const $users_groups_owned: Provider = { provide: 'ep:users/groups/owned', useClass: ep___users_groups_owned.default };
+const $users_groups_pull: Provider = { provide: 'ep:users/groups/pull', useClass: ep___users_groups_pull.default };
+const $users_groups_show: Provider = { provide: 'ep:users/groups/show', useClass: ep___users_groups_show.default };
+const $users_groups_transfer: Provider = { provide: 'ep:users/groups/transfer', useClass: ep___users_groups_transfer.default };
+const $users_groups_update: Provider = { provide: 'ep:users/groups/update', useClass: ep___users_groups_update.default };
+const $users_lists_create: Provider = { provide: 'ep:users/lists/create', useClass: ep___users_lists_create.default };
+const $users_lists_delete: Provider = { provide: 'ep:users/lists/delete', useClass: ep___users_lists_delete.default };
+const $users_lists_list: Provider = { provide: 'ep:users/lists/list', useClass: ep___users_lists_list.default };
+const $users_lists_pull: Provider = { provide: 'ep:users/lists/pull', useClass: ep___users_lists_pull.default };
+const $users_lists_push: Provider = { provide: 'ep:users/lists/push', useClass: ep___users_lists_push.default };
+const $users_lists_show: Provider = { provide: 'ep:users/lists/show', useClass: ep___users_lists_show.default };
+const $users_lists_update: Provider = { provide: 'ep:users/lists/update', useClass: ep___users_lists_update.default };
+const $users_notes: Provider = { provide: 'ep:users/notes', useClass: ep___users_notes.default };
+const $users_pages: Provider = { provide: 'ep:users/pages', useClass: ep___users_pages.default };
+const $users_reactions: Provider = { provide: 'ep:users/reactions', useClass: ep___users_reactions.default };
+const $users_recommendation: Provider = { provide: 'ep:users/recommendation', useClass: ep___users_recommendation.default };
+const $users_relation: Provider = { provide: 'ep:users/relation', useClass: ep___users_relation.default };
+const $users_reportAbuse: Provider = { provide: 'ep:users/report-abuse', useClass: ep___users_reportAbuse.default };
+const $users_searchByUsernameAndHost: Provider = { provide: 'ep:users/search-by-username-and-host', useClass: ep___users_searchByUsernameAndHost.default };
+const $users_search: Provider = { provide: 'ep:users/search', useClass: ep___users_search.default };
+const $users_show: Provider = { provide: 'ep:users/show', useClass: ep___users_show.default };
+const $users_stats: Provider = { provide: 'ep:users/stats', useClass: ep___users_stats.default };
+const $admin_driveCapOverride: Provider = { provide: 'ep:admin/drive-capacity-override', useClass: ep___admin_driveCapOverride.default };
+const $fetchRss: Provider = { provide: 'ep:fetch-rss', useClass: ep___fetchRss.default };
+
+@Module({
+	imports: [
+		CoreModule,
+	],
+	providers: [
+		GetterService,
+		ApiLoggerService,
+		$admin_meta,
+		$admin_abuseUserReports,
+		$admin_accounts_create,
+		$admin_accounts_delete,
+		$admin_ad_create,
+		$admin_ad_delete,
+		$admin_ad_list,
+		$admin_ad_update,
+		$admin_announcements_create,
+		$admin_announcements_delete,
+		$admin_announcements_list,
+		$admin_announcements_update,
+		$admin_deleteAllFilesOfAUser,
+		$admin_drive_cleanRemoteFiles,
+		$admin_drive_cleanup,
+		$admin_drive_files,
+		$admin_drive_showFile,
+		$admin_emoji_addAliasesBulk,
+		$admin_emoji_add,
+		$admin_emoji_copy,
+		$admin_emoji_deleteBulk,
+		$admin_emoji_delete,
+		$admin_emoji_importZip,
+		$admin_emoji_listRemote,
+		$admin_emoji_list,
+		$admin_emoji_removeAliasesBulk,
+		$admin_emoji_setAliasesBulk,
+		$admin_emoji_setCategoryBulk,
+		$admin_emoji_update,
+		$admin_federation_deleteAllFiles,
+		$admin_federation_refreshRemoteInstanceMetadata,
+		$admin_federation_removeAllFollowing,
+		$admin_federation_updateInstance,
+		$admin_getIndexStats,
+		$admin_getTableStats,
+		$admin_getUserIps,
+		$admin_invite,
+		$admin_moderators_add,
+		$admin_moderators_remove,
+		$admin_promo_create,
+		$admin_queue_clear,
+		$admin_queue_deliverDelayed,
+		$admin_queue_inboxDelayed,
+		$admin_queue_stats,
+		$admin_relays_add,
+		$admin_relays_list,
+		$admin_relays_remove,
+		$admin_resetPassword,
+		$admin_resolveAbuseUserReport,
+		$admin_sendEmail,
+		$admin_serverInfo,
+		$admin_showModerationLogs,
+		$admin_showUser,
+		$admin_showUsers,
+		$admin_silenceUser,
+		$admin_suspendUser,
+		$admin_unsilenceUser,
+		$admin_unsuspendUser,
+		$admin_updateMeta,
+		$admin_deleteAccount,
+		$admin_updateUserNote,
+		$announcements,
+		$antennas_create,
+		$antennas_delete,
+		$antennas_list,
+		$antennas_notes,
+		$antennas_show,
+		$antennas_update,
+		$ap_get,
+		$ap_show,
+		$app_create,
+		$app_show,
+		$auth_accept,
+		$auth_session_generate,
+		$auth_session_show,
+		$auth_session_userkey,
+		$blocking_create,
+		$blocking_delete,
+		$blocking_list,
+		$channels_create,
+		$channels_featured,
+		$channels_follow,
+		$channels_followed,
+		$channels_owned,
+		$channels_show,
+		$channels_timeline,
+		$channels_unfollow,
+		$channels_update,
+		$charts_activeUsers,
+		$charts_apRequest,
+		$charts_drive,
+		$charts_federation,
+		$charts_hashtag,
+		$charts_instance,
+		$charts_notes,
+		$charts_user_drive,
+		$charts_user_following,
+		$charts_user_notes,
+		$charts_user_reactions,
+		$charts_users,
+		$clips_addNote,
+		$clips_removeNote,
+		$clips_create,
+		$clips_delete,
+		$clips_list,
+		$clips_notes,
+		$clips_show,
+		$clips_update,
+		$drive,
+		$drive_files,
+		$drive_files_attachedNotes,
+		$drive_files_checkExistence,
+		$drive_files_create,
+		$drive_files_delete,
+		$drive_files_findByHash,
+		$drive_files_find,
+		$drive_files_show,
+		$drive_files_update,
+		$drive_files_uploadFromUrl,
+		$drive_folders,
+		$drive_folders_create,
+		$drive_folders_delete,
+		$drive_folders_find,
+		$drive_folders_show,
+		$drive_folders_update,
+		$drive_stream,
+		$emailAddress_available,
+		$endpoint,
+		$endpoints,
+		$exportCustomEmojis,
+		$federation_followers,
+		$federation_following,
+		$federation_instances,
+		$federation_showInstance,
+		$federation_updateRemoteUser,
+		$federation_users,
+		$federation_stats,
+		$following_create,
+		$following_delete,
+		$following_invalidate,
+		$following_requests_accept,
+		$following_requests_cancel,
+		$following_requests_list,
+		$following_requests_reject,
+		$gallery_featured,
+		$gallery_popular,
+		$gallery_posts,
+		$gallery_posts_create,
+		$gallery_posts_delete,
+		$gallery_posts_like,
+		$gallery_posts_show,
+		$gallery_posts_unlike,
+		$gallery_posts_update,
+		$getOnlineUsersCount,
+		$hashtags_list,
+		$hashtags_search,
+		$hashtags_show,
+		$hashtags_trend,
+		$hashtags_users,
+		$i,
+		$i_2fa_done,
+		$i_2fa_keyDone,
+		$i_2fa_passwordLess,
+		$i_2fa_registerKey,
+		$i_2fa_register,
+		$i_2fa_removeKey,
+		$i_2fa_unregister,
+		$i_apps,
+		$i_authorizedApps,
+		$i_changePassword,
+		$i_deleteAccount,
+		$i_exportBlocking,
+		$i_exportFollowing,
+		$i_exportMute,
+		$i_exportNotes,
+		$i_exportUserLists,
+		$i_favorites,
+		$i_gallery_likes,
+		$i_gallery_posts,
+		$i_getWordMutedNotesCount,
+		$i_importBlocking,
+		$i_importFollowing,
+		$i_importMuting,
+		$i_importUserLists,
+		$i_notifications,
+		$i_pageLikes,
+		$i_pages,
+		$i_pin,
+		$i_readAllMessagingMessages,
+		$i_readAllUnreadNotes,
+		$i_readAnnouncement,
+		$i_regenerateToken,
+		$i_registry_getAll,
+		$i_registry_getDetail,
+		$i_registry_get,
+		$i_registry_keysWithType,
+		$i_registry_keys,
+		$i_registry_remove,
+		$i_registry_scopes,
+		$i_registry_set,
+		$i_revokeToken,
+		$i_signinHistory,
+		$i_unpin,
+		$i_updateEmail,
+		$i_update,
+		$i_userGroupInvites,
+		$i_webhooks_create,
+		$i_webhooks_list,
+		$i_webhooks_show,
+		$i_webhooks_update,
+		$i_webhooks_delete,
+		$messaging_history,
+		$messaging_messages,
+		$messaging_messages_create,
+		$messaging_messages_delete,
+		$messaging_messages_read,
+		$meta,
+		$miauth_genToken,
+		$mute_create,
+		$mute_delete,
+		$mute_list,
+		$my_apps,
+		$notes,
+		$notes_children,
+		$notes_clips,
+		$notes_conversation,
+		$notes_create,
+		$notes_delete,
+		$notes_favorites_create,
+		$notes_favorites_delete,
+		$notes_featured,
+		$notes_globalTimeline,
+		$notes_hybridTimeline,
+		$notes_localTimeline,
+		$notes_mentions,
+		$notes_polls_recommendation,
+		$notes_polls_vote,
+		$notes_reactions,
+		$notes_reactions_create,
+		$notes_reactions_delete,
+		$notes_renotes,
+		$notes_replies,
+		$notes_searchByTag,
+		$notes_search,
+		$notes_show,
+		$notes_state,
+		$notes_threadMuting_create,
+		$notes_threadMuting_delete,
+		$notes_timeline,
+		$notes_translate,
+		$notes_unrenote,
+		$notes_userListTimeline,
+		$notifications_create,
+		$notifications_markAllAsRead,
+		$notifications_read,
+		$pagePush,
+		$pages_create,
+		$pages_delete,
+		$pages_featured,
+		$pages_like,
+		$pages_show,
+		$pages_unlike,
+		$pages_update,
+		$ping,
+		$pinnedUsers,
+		$promo_read,
+		$requestResetPassword,
+		$resetDb,
+		$resetPassword,
+		$serverInfo,
+		$stats,
+		$sw_register,
+		$sw_unregister,
+		$test,
+		$username_available,
+		$users,
+		$users_clips,
+		$users_followers,
+		$users_following,
+		$users_gallery_posts,
+		$users_getFrequentlyRepliedUsers,
+		$users_groups_create,
+		$users_groups_delete,
+		$users_groups_invitations_accept,
+		$users_groups_invitations_reject,
+		$users_groups_invite,
+		$users_groups_joined,
+		$users_groups_leave,
+		$users_groups_owned,
+		$users_groups_pull,
+		$users_groups_show,
+		$users_groups_transfer,
+		$users_groups_update,
+		$users_lists_create,
+		$users_lists_delete,
+		$users_lists_list,
+		$users_lists_pull,
+		$users_lists_push,
+		$users_lists_show,
+		$users_lists_update,
+		$users_notes,
+		$users_pages,
+		$users_reactions,
+		$users_recommendation,
+		$users_relation,
+		$users_reportAbuse,
+		$users_searchByUsernameAndHost,
+		$users_search,
+		$users_show,
+		$users_stats,
+		$admin_driveCapOverride,
+		$fetchRss,
+	],
+	exports: [
+		$admin_meta,
+		$admin_abuseUserReports,
+		$admin_accounts_create,
+		$admin_accounts_delete,
+		$admin_ad_create,
+		$admin_ad_delete,
+		$admin_ad_list,
+		$admin_ad_update,
+		$admin_announcements_create,
+		$admin_announcements_delete,
+		$admin_announcements_list,
+		$admin_announcements_update,
+		$admin_deleteAllFilesOfAUser,
+		$admin_drive_cleanRemoteFiles,
+		$admin_drive_cleanup,
+		$admin_drive_files,
+		$admin_drive_showFile,
+		$admin_emoji_addAliasesBulk,
+		$admin_emoji_add,
+		$admin_emoji_copy,
+		$admin_emoji_deleteBulk,
+		$admin_emoji_delete,
+		$admin_emoji_importZip,
+		$admin_emoji_listRemote,
+		$admin_emoji_list,
+		$admin_emoji_removeAliasesBulk,
+		$admin_emoji_setAliasesBulk,
+		$admin_emoji_setCategoryBulk,
+		$admin_emoji_update,
+		$admin_federation_deleteAllFiles,
+		$admin_federation_refreshRemoteInstanceMetadata,
+		$admin_federation_removeAllFollowing,
+		$admin_federation_updateInstance,
+		$admin_getIndexStats,
+		$admin_getTableStats,
+		$admin_getUserIps,
+		$admin_invite,
+		$admin_moderators_add,
+		$admin_moderators_remove,
+		$admin_promo_create,
+		$admin_queue_clear,
+		$admin_queue_deliverDelayed,
+		$admin_queue_inboxDelayed,
+		$admin_queue_stats,
+		$admin_relays_add,
+		$admin_relays_list,
+		$admin_relays_remove,
+		$admin_resetPassword,
+		$admin_resolveAbuseUserReport,
+		$admin_sendEmail,
+		$admin_serverInfo,
+		$admin_showModerationLogs,
+		$admin_showUser,
+		$admin_showUsers,
+		$admin_silenceUser,
+		$admin_suspendUser,
+		$admin_unsilenceUser,
+		$admin_unsuspendUser,
+		$admin_updateMeta,
+		$admin_deleteAccount,
+		$admin_updateUserNote,
+		$announcements,
+		$antennas_create,
+		$antennas_delete,
+		$antennas_list,
+		$antennas_notes,
+		$antennas_show,
+		$antennas_update,
+		$ap_get,
+		$ap_show,
+		$app_create,
+		$app_show,
+		$auth_accept,
+		$auth_session_generate,
+		$auth_session_show,
+		$auth_session_userkey,
+		$blocking_create,
+		$blocking_delete,
+		$blocking_list,
+		$channels_create,
+		$channels_featured,
+		$channels_follow,
+		$channels_followed,
+		$channels_owned,
+		$channels_show,
+		$channels_timeline,
+		$channels_unfollow,
+		$channels_update,
+		$charts_activeUsers,
+		$charts_apRequest,
+		$charts_drive,
+		$charts_federation,
+		$charts_hashtag,
+		$charts_instance,
+		$charts_notes,
+		$charts_user_drive,
+		$charts_user_following,
+		$charts_user_notes,
+		$charts_user_reactions,
+		$charts_users,
+		$clips_addNote,
+		$clips_removeNote,
+		$clips_create,
+		$clips_delete,
+		$clips_list,
+		$clips_notes,
+		$clips_show,
+		$clips_update,
+		$drive,
+		$drive_files,
+		$drive_files_attachedNotes,
+		$drive_files_checkExistence,
+		$drive_files_create,
+		$drive_files_delete,
+		$drive_files_findByHash,
+		$drive_files_find,
+		$drive_files_show,
+		$drive_files_update,
+		$drive_files_uploadFromUrl,
+		$drive_folders,
+		$drive_folders_create,
+		$drive_folders_delete,
+		$drive_folders_find,
+		$drive_folders_show,
+		$drive_folders_update,
+		$drive_stream,
+		$emailAddress_available,
+		$endpoint,
+		$endpoints,
+		$exportCustomEmojis,
+		$federation_followers,
+		$federation_following,
+		$federation_instances,
+		$federation_showInstance,
+		$federation_updateRemoteUser,
+		$federation_users,
+		$federation_stats,
+		$following_create,
+		$following_delete,
+		$following_invalidate,
+		$following_requests_accept,
+		$following_requests_cancel,
+		$following_requests_list,
+		$following_requests_reject,
+		$gallery_featured,
+		$gallery_popular,
+		$gallery_posts,
+		$gallery_posts_create,
+		$gallery_posts_delete,
+		$gallery_posts_like,
+		$gallery_posts_show,
+		$gallery_posts_unlike,
+		$gallery_posts_update,
+		$getOnlineUsersCount,
+		$hashtags_list,
+		$hashtags_search,
+		$hashtags_show,
+		$hashtags_trend,
+		$hashtags_users,
+		$i,
+		$i_2fa_done,
+		$i_2fa_keyDone,
+		$i_2fa_passwordLess,
+		$i_2fa_registerKey,
+		$i_2fa_register,
+		$i_2fa_removeKey,
+		$i_2fa_unregister,
+		$i_apps,
+		$i_authorizedApps,
+		$i_changePassword,
+		$i_deleteAccount,
+		$i_exportBlocking,
+		$i_exportFollowing,
+		$i_exportMute,
+		$i_exportNotes,
+		$i_exportUserLists,
+		$i_favorites,
+		$i_gallery_likes,
+		$i_gallery_posts,
+		$i_getWordMutedNotesCount,
+		$i_importBlocking,
+		$i_importFollowing,
+		$i_importMuting,
+		$i_importUserLists,
+		$i_notifications,
+		$i_pageLikes,
+		$i_pages,
+		$i_pin,
+		$i_readAllMessagingMessages,
+		$i_readAllUnreadNotes,
+		$i_readAnnouncement,
+		$i_regenerateToken,
+		$i_registry_getAll,
+		$i_registry_getDetail,
+		$i_registry_get,
+		$i_registry_keysWithType,
+		$i_registry_keys,
+		$i_registry_remove,
+		$i_registry_scopes,
+		$i_registry_set,
+		$i_revokeToken,
+		$i_signinHistory,
+		$i_unpin,
+		$i_updateEmail,
+		$i_update,
+		$i_userGroupInvites,
+		$i_webhooks_create,
+		$i_webhooks_list,
+		$i_webhooks_show,
+		$i_webhooks_update,
+		$i_webhooks_delete,
+		$messaging_history,
+		$messaging_messages,
+		$messaging_messages_create,
+		$messaging_messages_delete,
+		$messaging_messages_read,
+		$meta,
+		$miauth_genToken,
+		$mute_create,
+		$mute_delete,
+		$mute_list,
+		$my_apps,
+		$notes,
+		$notes_children,
+		$notes_clips,
+		$notes_conversation,
+		$notes_create,
+		$notes_delete,
+		$notes_favorites_create,
+		$notes_favorites_delete,
+		$notes_featured,
+		$notes_globalTimeline,
+		$notes_hybridTimeline,
+		$notes_localTimeline,
+		$notes_mentions,
+		$notes_polls_recommendation,
+		$notes_polls_vote,
+		$notes_reactions,
+		$notes_reactions_create,
+		$notes_reactions_delete,
+		$notes_renotes,
+		$notes_replies,
+		$notes_searchByTag,
+		$notes_search,
+		$notes_show,
+		$notes_state,
+		$notes_threadMuting_create,
+		$notes_threadMuting_delete,
+		$notes_timeline,
+		$notes_translate,
+		$notes_unrenote,
+		$notes_userListTimeline,
+		$notifications_create,
+		$notifications_markAllAsRead,
+		$notifications_read,
+		$pagePush,
+		$pages_create,
+		$pages_delete,
+		$pages_featured,
+		$pages_like,
+		$pages_show,
+		$pages_unlike,
+		$pages_update,
+		$ping,
+		$pinnedUsers,
+		$promo_read,
+		$requestResetPassword,
+		$resetDb,
+		$resetPassword,
+		$serverInfo,
+		$stats,
+		$sw_register,
+		$sw_unregister,
+		$test,
+		$username_available,
+		$users,
+		$users_clips,
+		$users_followers,
+		$users_following,
+		$users_gallery_posts,
+		$users_getFrequentlyRepliedUsers,
+		$users_groups_create,
+		$users_groups_delete,
+		$users_groups_invitations_accept,
+		$users_groups_invitations_reject,
+		$users_groups_invite,
+		$users_groups_joined,
+		$users_groups_leave,
+		$users_groups_owned,
+		$users_groups_pull,
+		$users_groups_show,
+		$users_groups_transfer,
+		$users_groups_update,
+		$users_lists_create,
+		$users_lists_delete,
+		$users_lists_list,
+		$users_lists_pull,
+		$users_lists_push,
+		$users_lists_show,
+		$users_lists_update,
+		$users_notes,
+		$users_pages,
+		$users_reactions,
+		$users_recommendation,
+		$users_relation,
+		$users_reportAbuse,
+		$users_searchByUsernameAndHost,
+		$users_search,
+		$users_show,
+		$users_stats,
+		$admin_driveCapOverride,
+		$fetchRss,
+	],
+})
+export class EndpointsModule {}
diff --git a/packages/backend/src/server/api/RateLimiterService.ts b/packages/backend/src/server/api/RateLimiterService.ts
new file mode 100644
index 0000000000..d390a47b8f
--- /dev/null
+++ b/packages/backend/src/server/api/RateLimiterService.ts
@@ -0,0 +1,89 @@
+import { Inject, Injectable } from '@nestjs/common';
+import Limiter from 'ratelimiter';
+import Redis from 'ioredis';
+import { DI } from '@/di-symbols.js';
+import Logger from '@/logger.js';
+import type { IEndpointMeta } from './endpoints.js';
+
+const logger = new Logger('limiter');
+
+@Injectable()
+export class RateLimiterService {
+	constructor(
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+	) {
+	}
+
+	public limit(limitation: IEndpointMeta['limit'] & { key: NonNullable<string> }, actor: string) {
+		return new Promise<void>((ok, reject) => {
+			if (process.env.NODE_ENV === 'test') ok();
+			
+			// Short-term limit
+			const min = (): void => {
+				const minIntervalLimiter = new Limiter({
+					id: `${actor}:${limitation.key}:min`,
+					duration: limitation.minInterval,
+					max: 1,
+					db: this.redisClient,
+				});
+		
+				minIntervalLimiter.get((err, info) => {
+					if (err) {
+						return reject('ERR');
+					}
+		
+					logger.debug(`${actor} ${limitation.key} min remaining: ${info.remaining}`);
+		
+					if (info.remaining === 0) {
+						reject('BRIEF_REQUEST_INTERVAL');
+					} else {
+						if (hasLongTermLimit) {
+							max();
+						} else {
+							ok();
+						}
+					}
+				});
+			};
+		
+			// Long term limit
+			const max = (): void => {
+				const limiter = new Limiter({
+					id: `${actor}:${limitation.key}`,
+					duration: limitation.duration,
+					max: limitation.max,
+					db: this.redisClient,
+				});
+		
+				limiter.get((err, info) => {
+					if (err) {
+						return reject('ERR');
+					}
+		
+					logger.debug(`${actor} ${limitation.key} max remaining: ${info.remaining}`);
+		
+					if (info.remaining === 0) {
+						reject('RATE_LIMIT_EXCEEDED');
+					} else {
+						ok();
+					}
+				});
+			};
+		
+			const hasShortTermLimit = typeof limitation.minInterval === 'number';
+		
+			const hasLongTermLimit =
+				typeof limitation.duration === 'number' &&
+				typeof limitation.max === 'number';
+		
+			if (hasShortTermLimit) {
+				min();
+			} else if (hasLongTermLimit) {
+				max();
+			} else {
+				ok();
+			}
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/SigninApiService.ts b/packages/backend/src/server/api/SigninApiService.ts
new file mode 100644
index 0000000000..5cda3c6205
--- /dev/null
+++ b/packages/backend/src/server/api/SigninApiService.ts
@@ -0,0 +1,282 @@
+import { randomBytes } from 'node:crypto';
+import { Inject, Injectable } from '@nestjs/common';
+import bcrypt from 'bcryptjs';
+import * as speakeasy from 'speakeasy';
+import { IsNull } from 'typeorm';
+import { DI } from '@/di-symbols.js';
+import { UserSecurityKeysRepository, SigninsRepository, UserProfilesRepository, AttestationChallengesRepository, UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import { getIpHash } from '@/misc/get-ip-hash.js';
+import type { ILocalUser } from '@/models/entities/User.js';
+import { IdService } from '@/core/IdService.js';
+import { TwoFactorAuthenticationService } from '@/core/TwoFactorAuthenticationService.js';
+import { RateLimiterService } from './RateLimiterService.js';
+import { SigninService } from './SigninService.js';
+import type Koa from 'koa';
+
+@Injectable()
+export class SigninApiService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userSecurityKeysRepository)
+		private userSecurityKeysRepository: UserSecurityKeysRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.attestationChallengesRepository)
+		private attestationChallengesRepository: AttestationChallengesRepository,
+
+		@Inject(DI.signinsRepository)
+		private signinsRepository: SigninsRepository,
+
+		private idService: IdService,
+		private rateLimiterService: RateLimiterService,
+		private signinService: SigninService,
+		private twoFactorAuthenticationService: TwoFactorAuthenticationService,
+	) {
+	}
+
+	public async signin(ctx: Koa.Context) {
+		ctx.set('Access-Control-Allow-Origin', this.config.url);
+		ctx.set('Access-Control-Allow-Credentials', 'true');
+
+		const body = ctx.request.body as any;
+		const username = body['username'];
+		const password = body['password'];
+		const token = body['token'];
+
+		function error(status: number, error: { id: string }) {
+			ctx.status = status;
+			ctx.body = { error };
+		}
+
+		try {
+		// not more than 1 attempt per second and not more than 10 attempts per hour
+			await this.rateLimiterService.limit({ key: 'signin', duration: 60 * 60 * 1000, max: 10, minInterval: 1000 }, getIpHash(ctx.ip));
+		} catch (err) {
+			ctx.status = 429;
+			ctx.body = {
+				error: {
+					message: 'Too many failed attempts to sign in. Try again later.',
+					code: 'TOO_MANY_AUTHENTICATION_FAILURES',
+					id: '22d05606-fbcf-421a-a2db-b32610dcfd1b',
+				},
+			};
+			return;
+		}
+
+		if (typeof username !== 'string') {
+			ctx.status = 400;
+			return;
+		}
+
+		if (typeof password !== 'string') {
+			ctx.status = 400;
+			return;
+		}
+
+		if (token != null && typeof token !== 'string') {
+			ctx.status = 400;
+			return;
+		}
+
+		// Fetch user
+		const user = await this.usersRepository.findOneBy({
+			usernameLower: username.toLowerCase(),
+			host: IsNull(),
+		}) as ILocalUser;
+
+		if (user == null) {
+			error(404, {
+				id: '6cc579cc-885d-43d8-95c2-b8c7fc963280',
+			});
+			return;
+		}
+
+		if (user.isSuspended) {
+			error(403, {
+				id: 'e03a5f46-d309-4865-9b69-56282d94e1eb',
+			});
+			return;
+		}
+
+		const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+
+		// Compare password
+		const same = await bcrypt.compare(password, profile.password!);
+
+		const fail = async (status?: number, failure?: { id: string }) => {
+		// Append signin history
+			await this.signinsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				userId: user.id,
+				ip: ctx.ip,
+				headers: ctx.headers,
+				success: false,
+			});
+
+			error(status ?? 500, failure ?? { id: '4e30e80c-e338-45a0-8c8f-44455efa3b76' });
+		};
+
+		if (!profile.twoFactorEnabled) {
+			if (same) {
+				this.signinService.signin(ctx, user);
+				return;
+			} else {
+				await fail(403, {
+					id: '932c904e-9460-45b7-9ce6-7ed33be7eb2c',
+				});
+				return;
+			}
+		}
+
+		if (token) {
+			if (!same) {
+				await fail(403, {
+					id: '932c904e-9460-45b7-9ce6-7ed33be7eb2c',
+				});
+				return;
+			}
+
+			const verified = (speakeasy as any).totp.verify({
+				secret: profile.twoFactorSecret,
+				encoding: 'base32',
+				token: token,
+				window: 2,
+			});
+
+			if (verified) {
+				this.signinService.signin(ctx, user);
+				return;
+			} else {
+				await fail(403, {
+					id: 'cdf1235b-ac71-46d4-a3a6-84ccce48df6f',
+				});
+				return;
+			}
+		} else if (body.credentialId) {
+			if (!same && !profile.usePasswordLessLogin) {
+				await fail(403, {
+					id: '932c904e-9460-45b7-9ce6-7ed33be7eb2c',
+				});
+				return;
+			}
+
+			const clientDataJSON = Buffer.from(body.clientDataJSON, 'hex');
+			const clientData = JSON.parse(clientDataJSON.toString('utf-8'));
+			const challenge = await this.attestationChallengesRepository.findOneBy({
+				userId: user.id,
+				id: body.challengeId,
+				registrationChallenge: false,
+				challenge: this.twoFactorAuthenticationService.hash(clientData.challenge).toString('hex'),
+			});
+
+			if (!challenge) {
+				await fail(403, {
+					id: '2715a88a-2125-4013-932f-aa6fe72792da',
+				});
+				return;
+			}
+
+			await this.attestationChallengesRepository.delete({
+				userId: user.id,
+				id: body.challengeId,
+			});
+
+			if (new Date().getTime() - challenge.createdAt.getTime() >= 5 * 60 * 1000) {
+				await fail(403, {
+					id: '2715a88a-2125-4013-932f-aa6fe72792da',
+				});
+				return;
+			}
+
+			const securityKey = await this.userSecurityKeysRepository.findOneBy({
+				id: Buffer.from(
+					body.credentialId
+						.replace(/-/g, '+')
+						.replace(/_/g, '/'),
+					'base64',
+				).toString('hex'),
+			});
+
+			if (!securityKey) {
+				await fail(403, {
+					id: '66269679-aeaf-4474-862b-eb761197e046',
+				});
+				return;
+			}
+
+			const isValid = this.twoFactorAuthenticationService.verifySignin({
+				publicKey: Buffer.from(securityKey.publicKey, 'hex'),
+				authenticatorData: Buffer.from(body.authenticatorData, 'hex'),
+				clientDataJSON,
+				clientData,
+				signature: Buffer.from(body.signature, 'hex'),
+				challenge: challenge.challenge,
+			});
+
+			if (isValid) {
+				this.signinService.signin(ctx, user);
+				return;
+			} else {
+				await fail(403, {
+					id: '93b86c4b-72f9-40eb-9815-798928603d1e',
+				});
+				return;
+			}
+		} else {
+			if (!same && !profile.usePasswordLessLogin) {
+				await fail(403, {
+					id: '932c904e-9460-45b7-9ce6-7ed33be7eb2c',
+				});
+				return;
+			}
+
+			const keys = await this.userSecurityKeysRepository.findBy({
+				userId: user.id,
+			});
+
+			if (keys.length === 0) {
+				await fail(403, {
+					id: 'f27fd449-9af4-4841-9249-1f989b9fa4a4',
+				});
+				return;
+			}
+
+			// 32 byte challenge
+			const challenge = randomBytes(32).toString('base64')
+				.replace(/=/g, '')
+				.replace(/\+/g, '-')
+				.replace(/\//g, '_');
+
+			const challengeId = this.idService.genId();
+
+			await this.attestationChallengesRepository.insert({
+				userId: user.id,
+				id: challengeId,
+				challenge: this.twoFactorAuthenticationService.hash(Buffer.from(challenge, 'utf-8')).toString('hex'),
+				createdAt: new Date(),
+				registrationChallenge: false,
+			});
+
+			ctx.body = {
+				challenge,
+				challengeId,
+				securityKeys: keys.map(key => ({
+					id: key.id,
+				})),
+			};
+			ctx.status = 200;
+			return;
+		}
+	// never get here
+	}
+}
+
diff --git a/packages/backend/src/server/api/SigninService.ts b/packages/backend/src/server/api/SigninService.ts
new file mode 100644
index 0000000000..19d14bad67
--- /dev/null
+++ b/packages/backend/src/server/api/SigninService.ts
@@ -0,0 +1,64 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { SigninsRepository } from '@/models/index.js';
+import type { UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import { IdService } from '@/core/IdService.js';
+import type { ILocalUser } from '@/models/entities/User.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { SigninEntityService } from '@/core/entities/SigninEntityService.js';
+import type Koa from 'koa';
+
+@Injectable()
+export class SigninService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.signinsRepository)
+		private signinsRepository: SigninsRepository,
+
+		private signinEntityService: SigninEntityService,
+		private idService: IdService,
+		private globalEventService: GlobalEventService,
+	) {
+	}
+
+	public signin(ctx: Koa.Context, user: ILocalUser, redirect = false) {
+		if (redirect) {
+			//#region Cookie
+			ctx.cookies.set('igi', user.token!, {
+				path: '/',
+				// SEE: https://github.com/koajs/koa/issues/974
+				// When using a SSL proxy it should be configured to add the "X-Forwarded-Proto: https" header
+				secure: this.config.url.startsWith('https'),
+				httpOnly: false,
+			});
+			//#endregion
+	
+			ctx.redirect(this.config.url);
+		} else {
+			ctx.body = {
+				id: user.id,
+				i: user.token,
+			};
+			ctx.status = 200;
+		}
+	
+		(async () => {
+			// Append signin history
+			const record = await this.signinsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				userId: user.id,
+				ip: ctx.ip,
+				headers: ctx.headers,
+				success: true,
+			}).then(x => this.signinsRepository.findOneByOrFail(x.identifiers[0]));
+	
+			// Publish signin event
+			this.globalEventService.publishMainStream(user.id, 'signin', await this.signinEntityService.pack(record));
+		})();
+	}
+}
+
diff --git a/packages/backend/src/server/api/SignupApiService.ts b/packages/backend/src/server/api/SignupApiService.ts
new file mode 100644
index 0000000000..df040ddcf8
--- /dev/null
+++ b/packages/backend/src/server/api/SignupApiService.ts
@@ -0,0 +1,175 @@
+import { Inject, Injectable } from '@nestjs/common';
+import rndstr from 'rndstr';
+import bcrypt from 'bcryptjs';
+import { DI } from '@/di-symbols.js';
+import { RegistrationTicketsRepository, UserPendingsRepository, UserProfilesRepository, UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import { MetaService } from '@/core/MetaService.js';
+import { CaptchaService } from '@/core/CaptchaService.js';
+import { IdService } from '@/core/IdService.js';
+import { SignupService } from '@/core/SignupService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { EmailService } from '@/core/EmailService.js';
+import { SigninService } from './SigninService.js';
+import type Koa from 'koa';
+
+@Injectable()
+export class SignupApiService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.userPendingsRepository)
+		private userPendingsRepository: UserPendingsRepository,
+
+		@Inject(DI.registrationTicketsRepository)
+		private registrationTicketsRepository: RegistrationTicketsRepository,
+
+		private userEntityService: UserEntityService,
+		private idService: IdService,
+		private metaService: MetaService,
+		private captchaService: CaptchaService,
+		private signupService: SignupService,
+		private signinService: SigninService,
+		private emailService: EmailService,
+	) {
+	}
+
+	public async signup(ctx: Koa.Context) {
+		const body = ctx.request.body;
+
+		const instance = await this.metaService.fetch(true);
+	
+		// Verify *Captcha
+		// ただしテスト時はこの機構は障害となるため無効にする
+		if (process.env.NODE_ENV !== 'test') {
+			if (instance.enableHcaptcha && instance.hcaptchaSecretKey) {
+				await this.captchaService.verifyHcaptcha(instance.hcaptchaSecretKey, body['hcaptcha-response']).catch(e => {
+					ctx.throw(400, e);
+				});
+			}
+	
+			if (instance.enableRecaptcha && instance.recaptchaSecretKey) {
+				await this.captchaService.verifyRecaptcha(instance.recaptchaSecretKey, body['g-recaptcha-response']).catch(e => {
+					ctx.throw(400, e);
+				});
+			}
+		}
+	
+		const username = body['username'];
+		const password = body['password'];
+		const host: string | null = process.env.NODE_ENV === 'test' ? (body['host'] ?? null) : null;
+		const invitationCode = body['invitationCode'];
+		const emailAddress = body['emailAddress'];
+	
+		if (instance.emailRequiredForSignup) {
+			if (emailAddress == null || typeof emailAddress !== 'string') {
+				ctx.status = 400;
+				return;
+			}
+	
+			const available = await this.emailService.validateEmailForAccount(emailAddress);
+			if (!available) {
+				ctx.status = 400;
+				return;
+			}
+		}
+	
+		if (instance.disableRegistration) {
+			if (invitationCode == null || typeof invitationCode !== 'string') {
+				ctx.status = 400;
+				return;
+			}
+	
+			const ticket = await this.registrationTicketsRepository.findOneBy({
+				code: invitationCode,
+			});
+	
+			if (ticket == null) {
+				ctx.status = 400;
+				return;
+			}
+	
+			this.registrationTicketsRepository.delete(ticket.id);
+		}
+	
+		if (instance.emailRequiredForSignup) {
+			const code = rndstr('a-z0-9', 16);
+	
+			// Generate hash of password
+			const salt = await bcrypt.genSalt(8);
+			const hash = await bcrypt.hash(password, salt);
+	
+			await this.userPendingsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				code,
+				email: emailAddress,
+				username: username,
+				password: hash,
+			});
+	
+			const link = `${this.config.url}/signup-complete/${code}`;
+	
+			sendEmail(emailAddress, 'Signup',
+				`To complete signup, please click this link:<br><a href="${link}">${link}</a>`,
+				`To complete signup, please click this link: ${link}`);
+	
+			ctx.status = 204;
+		} else {
+			try {
+				const { account, secret } = await this.signupService.signup({
+					username, password, host,
+				});
+	
+				const res = await this.userEntityService.pack(account, account, {
+					detail: true,
+					includeSecrets: true,
+				});
+	
+				(res as any).token = secret;
+	
+				ctx.body = res;
+			} catch (e) {
+				ctx.throw(400, e);
+			}
+		}
+	}
+
+	public async signupPending(ctx: Koa.Context) {
+		const body = ctx.request.body;
+
+		const code = body['code'];
+
+		try {
+			const pendingUser = await this.userPendingsRepository.findOneByOrFail({ code });
+
+			const { account, secret } = await this.signupService.signup({
+				username: pendingUser.username,
+				passwordHash: pendingUser.password,
+			});
+
+			this.userPendingsRepository.delete({
+				id: pendingUser.id,
+			});
+
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: account.id });
+
+			await this.userProfilesRepository.update({ userId: profile.userId }, {
+				email: pendingUser.email,
+				emailVerified: true,
+				emailVerifyCode: null,
+			});
+
+			this.signinService.signin(ctx, account);
+		} catch (e) {
+			ctx.throw(400, e);
+		}
+	}
+}
diff --git a/packages/backend/src/server/api/StreamingApiServerService.ts b/packages/backend/src/server/api/StreamingApiServerService.ts
new file mode 100644
index 0000000000..b08b01aef9
--- /dev/null
+++ b/packages/backend/src/server/api/StreamingApiServerService.ts
@@ -0,0 +1,120 @@
+import { EventEmitter } from 'events';
+import { Inject, Injectable } from '@nestjs/common';
+import Redis from 'ioredis';
+import * as websocket from 'websocket';
+import { DI } from '@/di-symbols.js';
+import { UsersRepository, BlockingsRepository, ChannelFollowingsRepository, FollowingsRepository, MutingsRepository, UserProfilesRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import { NoteReadService } from '@/core/NoteReadService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { NotificationService } from '@/core/NotificationService.js';
+import { AuthenticateService } from './AuthenticateService.js';
+import MainStreamConnection from './stream/index.js';
+import { ChannelsService } from './stream/ChannelsService.js';
+import type { ParsedUrlQuery } from 'querystring';
+import type * as http from 'node:http';
+
+@Injectable()
+export class StreamingApiServerService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.redisSubscriber)
+		private redisSubscriber: Redis.Redis,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		@Inject(DI.channelFollowingsRepository)
+		private channelFollowingsRepository: ChannelFollowingsRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+	
+		private globalEventService: GlobalEventService,
+		private noteReadService: NoteReadService,
+		private authenticateService: AuthenticateService,
+		private channelsService: ChannelsService,
+		private notificationService: NotificationService,
+	) {
+	}
+
+	public attachStreamingApi(server: http.Server) {
+		// Init websocket server
+		const ws = new websocket.server({
+			httpServer: server,
+		});
+
+		ws.on('request', async (request) => {
+			const q = request.resourceURL.query as ParsedUrlQuery;
+
+			// TODO: トークンが間違ってるなどしてauthenticateに失敗したら
+			// コネクション切断するなりエラーメッセージ返すなりする
+			// (現状はエラーがキャッチされておらずサーバーのログに流れて邪魔なので)
+			const [user, miapp] = await this.authenticateService.authenticate(q.i as string);
+
+			if (user?.isSuspended) {
+				request.reject(400);
+				return;
+			}
+
+			const connection = request.accept();
+
+			const ev = new EventEmitter();
+
+			async function onRedisMessage(_: string, data: string) {
+				const parsed = JSON.parse(data);
+				ev.emit(parsed.channel, parsed.message);
+			}
+
+			this.redisSubscriber.on('message', onRedisMessage);
+
+			const main = new MainStreamConnection(
+				this.followingsRepository,
+				this.mutingsRepository,
+				this.blockingsRepository,
+				this.channelFollowingsRepository,
+				this.userProfilesRepository,
+				this.channelsService,
+				this.globalEventService,
+				this.noteReadService,
+				this.notificationService,
+				connection, ev, user, miapp,
+			);
+
+			const intervalId = user ? setInterval(() => {
+				this.usersRepository.update(user.id, {
+					lastActiveDate: new Date(),
+				});
+			}, 1000 * 60 * 5) : null;
+			if (user) {
+				this.usersRepository.update(user.id, {
+					lastActiveDate: new Date(),
+				});
+			}
+
+			connection.once('close', () => {
+				ev.removeAllListeners();
+				main.dispose();
+				this.redisSubscriber.off('message', onRedisMessage);
+				if (intervalId) clearInterval(intervalId);
+			});
+
+			connection.on('message', async (data) => {
+				if (data.type === 'utf8' && data.utf8Data === 'ping') {
+					connection.send('pong');
+				}
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/api-handler.ts b/packages/backend/src/server/api/api-handler.ts
deleted file mode 100644
index ec71ddd2c0..0000000000
--- a/packages/backend/src/server/api/api-handler.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import Koa from 'koa';
-
-import { User } from '@/models/entities/user.js';
-import { UserIps } from '@/models/index.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { IEndpoint } from './endpoints.js';
-import authenticate, { AuthenticationError } from './authenticate.js';
-import call from './call.js';
-import { ApiError } from './error.js';
-
-const userIpHistories = new Map<User['id'], Set<string>>();
-
-setInterval(() => {
-	userIpHistories.clear();
-}, 1000 * 60 * 60);
-
-export default (endpoint: IEndpoint, ctx: Koa.Context) => new Promise<void>((res) => {
-	const body = ctx.is('multipart/form-data')
-		? (ctx.request as any).body
-		: ctx.method === 'GET'
-			? ctx.query
-			: ctx.request.body;
-
-	const reply = (x?: any, y?: ApiError) => {
-		if (x == null) {
-			ctx.status = 204;
-		} else if (typeof x === 'number' && y) {
-			ctx.status = x;
-			ctx.body = {
-				error: {
-					message: y!.message,
-					code: y!.code,
-					id: y!.id,
-					kind: y!.kind,
-					...(y!.info ? { info: y!.info } : {}),
-				},
-			};
-		} else {
-			// 文字列を返す場合は、JSON.stringify通さないとJSONと認識されない
-			ctx.body = typeof x === 'string' ? JSON.stringify(x) : x;
-		}
-		res();
-	};
-
-	// Authentication
-	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);
-		});
-
-		// Log IP
-		if (user) {
-			fetchMeta().then(meta => {
-				if (!meta.enableIpLogging) return;
-				const ip = ctx.ip;
-				const ips = userIpHistories.get(user.id);
-				if (ips == null || !ips.has(ip)) {
-					if (ips == null) {
-						userIpHistories.set(user.id, new Set([ip]));
-					} else {
-						ips.add(ip);
-					}
-
-					try {
-						UserIps.createQueryBuilder().insert().values({
-							createdAt: new Date(),
-							userId: user.id,
-							ip: ip,
-						}).orIgnore(true).execute();
-					} catch {
-					}
-				}
-			});
-		}
-	}).catch(e => {
-		if (e instanceof AuthenticationError) {
-			reply(403, new ApiError({
-				message: 'Authentication failed. Please ensure your token is correct.',
-				code: 'AUTHENTICATION_FAILED',
-				id: 'b0a7f5f8-dc2f-4171-b91f-de88ad238e14',
-			}));
-		} else {
-			reply(500, new ApiError());
-		}
-	});
-});
diff --git a/packages/backend/src/server/api/authenticate.ts b/packages/backend/src/server/api/authenticate.ts
deleted file mode 100644
index 65ccfcf551..0000000000
--- a/packages/backend/src/server/api/authenticate.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import isNativeToken from './common/is-native-token.js';
-import { CacheableLocalUser, ILocalUser } from '@/models/entities/user.js';
-import { Users, AccessTokens, Apps } from '@/models/index.js';
-import { AccessToken } from '@/models/entities/access-token.js';
-import { Cache } from '@/misc/cache.js';
-import { App } from '@/models/entities/app.js';
-import { localUserByIdCache, localUserByNativeTokenCache } from '@/services/user-cache.js';
-
-const appCache = new Cache<App>(Infinity);
-
-export class AuthenticationError extends Error {
-	constructor(message: string) {
-		super(message);
-		this.name = 'AuthenticationError';
-	}
-}
-
-export default async (token: string | null): Promise<[CacheableLocalUser | null | undefined, AccessToken | null | undefined]> => {
-	if (token == null) {
-		return [null, null];
-	}
-
-	if (isNativeToken(token)) {
-		const user = await localUserByNativeTokenCache.fetch(token,
-			() => Users.findOneBy({ token }) as Promise<ILocalUser | null>);
-
-		if (user == null) {
-			throw new AuthenticationError('user not found');
-		}
-
-		return [user, null];
-	} else {
-		const accessToken = await AccessTokens.findOne({
-			where: [{
-				hash: token.toLowerCase(), // app
-			}, {
-				token: token, // miauth
-			}],
-		});
-
-		if (accessToken == null) {
-			throw new AuthenticationError('invalid signature');
-		}
-
-		AccessTokens.update(accessToken.id, {
-			lastUsedAt: new Date(),
-		});
-
-		const user = await localUserByIdCache.fetch(accessToken.userId,
-			() => Users.findOneBy({
-				id: accessToken.userId,
-			}) as Promise<ILocalUser>);
-
-		if (accessToken.appId) {
-			const app = await appCache.fetch(accessToken.appId,
-				() => Apps.findOneByOrFail({ id: accessToken.appId! }));
-
-			return [user, {
-				id: accessToken.id,
-				permission: app.permission,
-			} as AccessToken];
-		} else {
-			return [user, accessToken];
-		}
-	}
-};
diff --git a/packages/backend/src/server/api/call.ts b/packages/backend/src/server/api/call.ts
deleted file mode 100644
index aa130459a3..0000000000
--- a/packages/backend/src/server/api/call.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-import { performance } from 'perf_hooks';
-import Koa from 'koa';
-import { CacheableLocalUser, User } from '@/models/entities/user.js';
-import { AccessToken } from '@/models/entities/access-token.js';
-import { getIpHash } from '@/misc/get-ip-hash.js';
-import { limiter } from './limiter.js';
-import endpoints, { IEndpointMeta } from './endpoints.js';
-import { ApiError } from './error.js';
-import { apiLogger } from './logger.js';
-
-const accessDenied = {
-	message: 'Access denied.',
-	code: 'ACCESS_DENIED',
-	id: '56f35758-7dd5-468b-8439-5d6fb8ec9b8e',
-};
-
-export default async (endpoint: string, user: CacheableLocalUser | null | undefined, token: AccessToken | null | undefined, data: any, ctx?: Koa.Context) => {
-	const isSecure = user != null && token == null;
-	const isModerator = user != null && (user.isModerator || user.isAdmin);
-
-	const ep = endpoints.find(e => e.name === endpoint);
-
-	if (ep == null) {
-		throw new ApiError({
-			message: 'No such endpoint.',
-			code: 'NO_SUCH_ENDPOINT',
-			id: 'f8080b67-5f9c-4eb7-8c18-7f1eeae8f709',
-			httpStatusCode: 404,
-		});
-	}
-
-	if (ep.meta.secure && !isSecure) {
-		throw new ApiError(accessDenied);
-	}
-
-	if (ep.meta.limit) {
-		// koa will automatically load the `X-Forwarded-For` header if `proxy: true` is configured in the app.
-		let limitActor: string;
-		if (user) {
-			limitActor = user.id;
-		} else {
-			limitActor = getIpHash(ctx!.ip);
-		}
-
-		const limit = Object.assign({}, ep.meta.limit);
-
-		if (!limit.key) {
-			limit.key = ep.name;
-		}
-
-		// Rate limit
-		await limiter(limit as IEndpointMeta['limit'] & { key: NonNullable<string> }, limitActor).catch(e => {
-			throw new ApiError({
-				message: 'Rate limit exceeded. Please try again later.',
-				code: 'RATE_LIMIT_EXCEEDED',
-				id: 'd5826d14-3982-4d2e-8011-b9e9f02499ef',
-				httpStatusCode: 429,
-			});
-		});
-	}
-
-	if (ep.meta.requireCredential && user == null) {
-		throw new ApiError({
-			message: 'Credential required.',
-			code: 'CREDENTIAL_REQUIRED',
-			id: '1384574d-a912-4b81-8601-c7b1c4085df1',
-			httpStatusCode: 401,
-		});
-	}
-
-	if (ep.meta.requireCredential && user!.isSuspended) {
-		throw new ApiError({
-			message: 'Your account has been suspended.',
-			code: 'YOUR_ACCOUNT_SUSPENDED',
-			id: 'a8c724b3-6e9c-4b46-b1a8-bc3ed6258370',
-			httpStatusCode: 403,
-		});
-	}
-
-	if (ep.meta.requireAdmin && !user!.isAdmin) {
-		throw new ApiError(accessDenied, { reason: 'You are not the admin.' });
-	}
-
-	if (ep.meta.requireModerator && !isModerator) {
-		throw new ApiError(accessDenied, { reason: 'You are not a moderator.' });
-	}
-
-	if (token && ep.meta.kind && !token.permission.some(p => p === ep.meta.kind)) {
-		throw new ApiError({
-			message: 'Your app does not have the necessary permissions to use this endpoint.',
-			code: 'PERMISSION_DENIED',
-			id: '1370e5b7-d4eb-4566-bb1d-7748ee6a1838',
-		});
-	}
-
-	// Cast non JSON input
-	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') {
-				try {
-					data[k] = JSON.parse(data[k]);
-				} catch (e) {
-					throw	new ApiError({
-						message: 'Invalid param.',
-						code: 'INVALID_PARAM',
-						id: '0b5f1631-7c1a-41a6-b399-cce335f34d85',
-					}, {
-						param: k,
-						reason: `cannot cast to ${param.type}`,
-					});
-				}
-			}
-		}
-	}
-
-	// API invoking
-	const before = performance.now();
-	return await ep.exec(data, user, token, ctx?.file, ctx?.ip, ctx?.headers).catch((e: Error) => {
-		if (e instanceof ApiError) {
-			throw e;
-		} else {
-			apiLogger.error(`Internal error occurred in ${ep.name}: ${e.message}`, {
-				ep: ep.name,
-				ps: data,
-				e: {
-					message: e.message,
-					code: e.name,
-					stack: e.stack,
-				},
-			});
-			throw new ApiError(null, {
-				e: {
-					message: e.message,
-					code: e.name,
-					stack: e.stack,
-				},
-			});
-		}
-	}).finally(() => {
-		const after = performance.now();
-		const time = after - before;
-		if (time > 1000) {
-			apiLogger.warn(`SLOW API CALL DETECTED: ${ep.name} (${time}ms)`);
-		}
-	});
-};
diff --git a/packages/backend/src/server/api/common/GetterService.ts b/packages/backend/src/server/api/common/GetterService.ts
new file mode 100644
index 0000000000..a6b60d1f5a
--- /dev/null
+++ b/packages/backend/src/server/api/common/GetterService.ts
@@ -0,0 +1,71 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import type { NotesRepository, UsersRepository } from '@/models/index.js';
+import { IdentifiableError } from '@/misc/identifiable-error.js';
+import type { User } from '@/models/entities/User.js';
+import type { Note } from '@/models/entities/Note.js';
+
+@Injectable()
+export class GetterService {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+	) {
+	}
+
+	/**
+	 * Get note for API processing
+	 */
+	public async getNote(noteId: Note['id']) {
+		const note = await this.notesRepository.findOneBy({ id: noteId });
+
+		if (note == null) {
+			throw new IdentifiableError('9725d0ce-ba28-4dde-95a7-2cbb2c15de24', 'No such note.');
+		}
+
+		return note;
+	}
+
+	/**
+	 * Get user for API processing
+	 */
+	public async getUser(userId: User['id']) {
+		const user = await this.usersRepository.findOneBy({ id: userId });
+
+		if (user == null) {
+			throw new IdentifiableError('15348ddd-432d-49c2-8a5a-8069753becff', 'No such user.');
+		}
+
+		return user;
+	}
+
+	/**
+	 * Get remote user for API processing
+	 */
+	public async getRemoteUser(userId: User['id']) {
+		const user = await this.getUser(userId);
+
+		if (!this.userEntityService.isRemoteUser(user)) {
+			throw new Error('user is not a remote user');
+		}
+
+		return user;
+	}
+
+	/**
+	 * Get local user for API processing
+	 */
+	public async getLocalUser(userId: User['id']) {
+		const user = await this.getUser(userId);
+
+		if (!this.userEntityService.isLocalUser(user)) {
+			throw new Error('user is not a local user');
+		}
+
+		return user;
+	}
+}
+
diff --git a/packages/backend/src/server/api/common/generate-block-query.ts b/packages/backend/src/server/api/common/generate-block-query.ts
deleted file mode 100644
index 60db1e731b..0000000000
--- a/packages/backend/src/server/api/common/generate-block-query.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { User } from '@/models/entities/user.js';
-import { Blockings } from '@/models/index.js';
-import { Brackets, SelectQueryBuilder } from 'typeorm';
-
-// ここでいうBlockedは被Blockedの意
-export function generateBlockedUserQuery(q: SelectQueryBuilder<any>, me: { id: User['id'] }) {
-	const blockingQuery = Blockings.createQueryBuilder('blocking')
-		.select('blocking.blockerId')
-		.where('blocking.blockeeId = :blockeeId', { blockeeId: me.id });
-
-	// 投稿の作者にブロックされていない かつ
-	// 投稿の返信先の作者にブロックされていない かつ
-	// 投稿の引用元の作者にブロックされていない
-	q
-		.andWhere(`note.userId NOT IN (${ blockingQuery.getQuery() })`)
-		.andWhere(new Brackets(qb => { qb
-			.where(`note.replyUserId IS NULL`)
-			.orWhere(`note.replyUserId NOT IN (${ blockingQuery.getQuery() })`);
-		}))
-		.andWhere(new Brackets(qb => { qb
-			.where(`note.renoteUserId IS NULL`)
-			.orWhere(`note.renoteUserId NOT IN (${ blockingQuery.getQuery() })`);
-		}));
-
-	q.setParameters(blockingQuery.getParameters());
-}
-
-export function generateBlockQueryForUsers(q: SelectQueryBuilder<any>, me: { id: User['id'] }) {
-	const blockingQuery = Blockings.createQueryBuilder('blocking')
-		.select('blocking.blockeeId')
-		.where('blocking.blockerId = :blockerId', { blockerId: me.id });
-
-	const blockedQuery = Blockings.createQueryBuilder('blocking')
-		.select('blocking.blockerId')
-		.where('blocking.blockeeId = :blockeeId', { blockeeId: me.id });
-
-	q.andWhere(`user.id NOT IN (${ blockingQuery.getQuery() })`);
-	q.setParameters(blockingQuery.getParameters());
-
-	q.andWhere(`user.id NOT IN (${ blockedQuery.getQuery() })`);
-	q.setParameters(blockedQuery.getParameters());
-}
diff --git a/packages/backend/src/server/api/common/generate-channel-query.ts b/packages/backend/src/server/api/common/generate-channel-query.ts
deleted file mode 100644
index 333bb73b86..0000000000
--- a/packages/backend/src/server/api/common/generate-channel-query.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { User } from '@/models/entities/user.js';
-import { ChannelFollowings } from '@/models/index.js';
-import { Brackets, SelectQueryBuilder } from 'typeorm';
-
-export function generateChannelQuery(q: SelectQueryBuilder<any>, me?: { id: User['id'] } | null) {
-	if (me == null) {
-		q.andWhere('note.channelId IS NULL');
-	} else {
-		q.leftJoinAndSelect('note.channel', 'channel');
-
-		const channelFollowingQuery = ChannelFollowings.createQueryBuilder('channelFollowing')
-			.select('channelFollowing.followeeId')
-			.where('channelFollowing.followerId = :followerId', { followerId: me.id });
-
-		q.andWhere(new Brackets(qb => { qb
-			// チャンネルのノートではない
-			.where('note.channelId IS NULL')
-			// または自分がフォローしているチャンネルのノート
-			.orWhere(`note.channelId IN (${ channelFollowingQuery.getQuery() })`);
-		}));
-
-		q.setParameters(channelFollowingQuery.getParameters());
-	}
-}
diff --git a/packages/backend/src/server/api/common/generate-muted-note-query.ts b/packages/backend/src/server/api/common/generate-muted-note-query.ts
deleted file mode 100644
index f544e334d3..0000000000
--- a/packages/backend/src/server/api/common/generate-muted-note-query.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { User } from '@/models/entities/user.js';
-import { MutedNotes } from '@/models/index.js';
-import { SelectQueryBuilder } from 'typeorm';
-
-export function generateMutedNoteQuery(q: SelectQueryBuilder<any>, me: { id: User['id'] }) {
-	const mutedQuery = MutedNotes.createQueryBuilder('muted')
-		.select('muted.noteId')
-		.where('muted.userId = :userId', { userId: me.id });
-
-	q.andWhere(`note.id NOT IN (${ mutedQuery.getQuery() })`);
-
-	q.setParameters(mutedQuery.getParameters());
-}
diff --git a/packages/backend/src/server/api/common/generate-muted-note-thread-query.ts b/packages/backend/src/server/api/common/generate-muted-note-thread-query.ts
deleted file mode 100644
index 7263ea2e60..0000000000
--- a/packages/backend/src/server/api/common/generate-muted-note-thread-query.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { User } from '@/models/entities/user.js';
-import { NoteThreadMutings } from '@/models/index.js';
-import { Brackets, SelectQueryBuilder } from 'typeorm';
-
-export function generateMutedNoteThreadQuery(q: SelectQueryBuilder<any>, me: { id: User['id'] }) {
-	const mutedQuery = NoteThreadMutings.createQueryBuilder('threadMuted')
-		.select('threadMuted.threadId')
-		.where('threadMuted.userId = :userId', { userId: me.id });
-
-	q.andWhere(`note.id NOT IN (${ mutedQuery.getQuery() })`);
-	q.andWhere(new Brackets(qb => { qb
-		.where(`note.threadId IS NULL`)
-		.orWhere(`note.threadId NOT IN (${ mutedQuery.getQuery() })`);
-	}));
-
-	q.setParameters(mutedQuery.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
deleted file mode 100644
index 470ece1a62..0000000000
--- a/packages/backend/src/server/api/common/generate-muted-user-query.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-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')
-		.select('muting.muteeId')
-		.where('muting.muterId = :muterId', { muterId: me.id });
-
-	if (exclude) {
-		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')
-			.orWhere(`note.replyUserId NOT IN (${ mutingQuery.getQuery() })`);
-		}))
-		.andWhere(new Brackets(qb => { qb
-			.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'] }) {
-	const mutingQuery = Mutings.createQueryBuilder('muting')
-		.select('muting.muteeId')
-		.where('muting.muterId = :muterId', { muterId: me.id });
-
-	q.andWhere(`user.id NOT IN (${ mutingQuery.getQuery() })`);
-
-	q.setParameters(mutingQuery.getParameters());
-}
diff --git a/packages/backend/src/server/api/common/generate-native-user-token.ts b/packages/backend/src/server/api/common/generate-native-user-token.ts
deleted file mode 100644
index 5d8a4c5378..0000000000
--- a/packages/backend/src/server/api/common/generate-native-user-token.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { secureRndstr } from '@/misc/secure-rndstr.js';
-
-export default () => secureRndstr(16, true);
diff --git a/packages/backend/src/server/api/common/generate-replies-query.ts b/packages/backend/src/server/api/common/generate-replies-query.ts
deleted file mode 100644
index 301782eab9..0000000000
--- a/packages/backend/src/server/api/common/generate-replies-query.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { User } from '@/models/entities/user.js';
-import { Brackets, SelectQueryBuilder } from 'typeorm';
-
-export function generateRepliesQuery(q: SelectQueryBuilder<any>, me?: Pick<User, 'id' | 'showTimelineReplies'> | null) {
-	if (me == null) {
-		q.andWhere(new Brackets(qb => { qb
-			.where(`note.replyId IS NULL`) // 返信ではない
-			.orWhere(new Brackets(qb => { qb // 返信だけど投稿者自身への返信
-				.where(`note.replyId IS NOT NULL`)
-				.andWhere('note.replyUserId = note.userId');
-			}));
-		}));
-	} else if (!me.showTimelineReplies) {
-		q.andWhere(new Brackets(qb => { qb
-			.where(`note.replyId IS NULL`) // 返信ではない
-			.orWhere('note.replyUserId = :meId', { meId: me.id }) // 返信だけど自分のノートへの返信
-			.orWhere(new Brackets(qb => { qb // 返信だけど自分の行った返信
-				.where(`note.replyId IS NOT NULL`)
-				.andWhere('note.userId = :meId', { meId: me.id });
-			}))
-			.orWhere(new Brackets(qb => { qb // 返信だけど投稿者自身への返信
-				.where(`note.replyId IS NOT NULL`)
-				.andWhere('note.replyUserId = note.userId');
-			}));
-		}));
-	}
-}
diff --git a/packages/backend/src/server/api/common/generate-visibility-query.ts b/packages/backend/src/server/api/common/generate-visibility-query.ts
deleted file mode 100644
index b50b6812f4..0000000000
--- a/packages/backend/src/server/api/common/generate-visibility-query.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { User } from '@/models/entities/user.js';
-import { Followings } from '@/models/index.js';
-import { Brackets, SelectQueryBuilder } from 'typeorm';
-
-export function generateVisibilityQuery(q: SelectQueryBuilder<any>, me?: { id: User['id'] } | null) {
-	// This code must always be synchronized with the checks in Notes.isVisibleForMe.
-	if (me == null) {
-		q.andWhere(new Brackets(qb => { qb
-			.where(`note.visibility = 'public'`)
-			.orWhere(`note.visibility = 'home'`);
-		}));
-	} else {
-		const followingQuery = Followings.createQueryBuilder('following')
-			.select('following.followeeId')
-			.where('following.followerId = :meId');
-
-		q.andWhere(new Brackets(qb => { qb
-			// 公開投稿である
-			.where(new Brackets(qb => { qb
-				.where(`note.visibility = 'public'`)
-				.orWhere(`note.visibility = 'home'`);
-			}))
-			// または 自分自身
-			.orWhere('note.userId = :meId')
-			// または 自分宛て
-			.orWhere(':meId = ANY(note.visibleUserIds)')
-			.orWhere(':meId = ANY(note.mentions)')
-			.orWhere(new Brackets(qb => { qb
-				// または フォロワー宛ての投稿であり、
-				.where(`note.visibility = 'followers'`)
-				.andWhere(new Brackets(qb => { qb
-					// 自分がフォロワーである
-					.where(`note.userId IN (${ followingQuery.getQuery() })`)
-					// または 自分の投稿へのリプライ
-					.orWhere('note.replyUserId = :meId');
-				}));
-			}));
-		}));
-
-		q.setParameters({ meId: me.id });
-	}
-}
diff --git a/packages/backend/src/server/api/common/getters.ts b/packages/backend/src/server/api/common/getters.ts
deleted file mode 100644
index 783ea9ef75..0000000000
--- a/packages/backend/src/server/api/common/getters.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { IdentifiableError } from '@/misc/identifiable-error.js';
-import { User } from '@/models/entities/user.js';
-import { Note } from '@/models/entities/note.js';
-import { Notes, Users } from '@/models/index.js';
-
-/**
- * Get note for API processing
- */
-export async function getNote(noteId: Note['id']) {
-	const note = await Notes.findOneBy({ id: noteId });
-
-	if (note == null) {
-		throw new IdentifiableError('9725d0ce-ba28-4dde-95a7-2cbb2c15de24', 'No such note.');
-	}
-
-	return note;
-}
-
-/**
- * Get user for API processing
- */
-export async function getUser(userId: User['id']) {
-	const user = await Users.findOneBy({ id: userId });
-
-	if (user == null) {
-		throw new IdentifiableError('15348ddd-432d-49c2-8a5a-8069753becff', 'No such user.');
-	}
-
-	return user;
-}
-
-/**
- * Get remote user for API processing
- */
-export async function getRemoteUser(userId: User['id']) {
-	const user = await getUser(userId);
-
-	if (!Users.isRemoteUser(user)) {
-		throw new Error('user is not a remote user');
-	}
-
-	return user;
-}
-
-/**
- * Get local user for API processing
- */
-export async function getLocalUser(userId: User['id']) {
-	const user = await getUser(userId);
-
-	if (!Users.isLocalUser(user)) {
-		throw new Error('user is not a local user');
-	}
-
-	return user;
-}
diff --git a/packages/backend/src/server/api/common/inject-featured.ts b/packages/backend/src/server/api/common/inject-featured.ts
index f7cdd365ed..75126fa304 100644
--- a/packages/backend/src/server/api/common/inject-featured.ts
+++ b/packages/backend/src/server/api/common/inject-featured.ts
@@ -1,6 +1,6 @@
 import rndstr from 'rndstr';
-import { Note } from '@/models/entities/note.js';
-import { User } from '@/models/entities/user.js';
+import { Note } from '@/models/entities/Note.js';
+import { User } from '@/models/entities/User.js';
 import { Notes, UserProfiles, NoteReactions } from '@/models/index.js';
 import { generateMutedUserQuery } from './generate-muted-user-query.js';
 import { generateBlockedUserQuery } from './generate-block-query.js';
diff --git a/packages/backend/src/server/api/common/inject-promo.ts b/packages/backend/src/server/api/common/inject-promo.ts
index b0da8118b4..454f5dbb0e 100644
--- a/packages/backend/src/server/api/common/inject-promo.ts
+++ b/packages/backend/src/server/api/common/inject-promo.ts
@@ -1,6 +1,6 @@
 import rndstr from 'rndstr';
-import { Note } from '@/models/entities/note.js';
-import { User } from '@/models/entities/user.js';
+import { Note } from '@/models/entities/Note.js';
+import { User } from '@/models/entities/User.js';
 import { PromoReads, PromoNotes, Notes, Users } from '@/models/index.js';
 
 export async function injectPromo(timeline: Note[], user?: User | null) {
diff --git a/packages/backend/src/server/api/common/is-native-token.ts b/packages/backend/src/server/api/common/is-native-token.ts
deleted file mode 100644
index 2833c570c8..0000000000
--- a/packages/backend/src/server/api/common/is-native-token.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default (token: string) => token.length === 16;
diff --git a/packages/backend/src/server/api/common/make-pagination-query.ts b/packages/backend/src/server/api/common/make-pagination-query.ts
deleted file mode 100644
index 51c11e5dff..0000000000
--- a/packages/backend/src/server/api/common/make-pagination-query.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { SelectQueryBuilder } from 'typeorm';
-
-export function makePaginationQuery<T>(q: SelectQueryBuilder<T>, sinceId?: string, untilId?: string, sinceDate?: number, untilDate?: number) {
-	if (sinceId && untilId) {
-		q.andWhere(`${q.alias}.id > :sinceId`, { sinceId: sinceId });
-		q.andWhere(`${q.alias}.id < :untilId`, { untilId: untilId });
-		q.orderBy(`${q.alias}.id`, 'DESC');
-	} else if (sinceId) {
-		q.andWhere(`${q.alias}.id > :sinceId`, { sinceId: sinceId });
-		q.orderBy(`${q.alias}.id`, 'ASC');
-	} else if (untilId) {
-		q.andWhere(`${q.alias}.id < :untilId`, { untilId: untilId });
-		q.orderBy(`${q.alias}.id`, 'DESC');
-	} else if (sinceDate && untilDate) {
-		q.andWhere(`${q.alias}.createdAt > :sinceDate`, { sinceDate: new Date(sinceDate) });
-		q.andWhere(`${q.alias}.createdAt < :untilDate`, { untilDate: new Date(untilDate) });
-		q.orderBy(`${q.alias}.createdAt`, 'DESC');
-	} else if (sinceDate) {
-		q.andWhere(`${q.alias}.createdAt > :sinceDate`, { sinceDate: new Date(sinceDate) });
-		q.orderBy(`${q.alias}.createdAt`, 'ASC');
-	} else if (untilDate) {
-		q.andWhere(`${q.alias}.createdAt < :untilDate`, { untilDate: new Date(untilDate) });
-		q.orderBy(`${q.alias}.createdAt`, 'DESC');
-	} else {
-		q.orderBy(`${q.alias}.id`, 'DESC');
-	}
-	return q;
-}
diff --git a/packages/backend/src/server/api/common/read-messaging-message.ts b/packages/backend/src/server/api/common/read-messaging-message.ts
deleted file mode 100644
index c4c18ffa06..0000000000
--- a/packages/backend/src/server/api/common/read-messaging-message.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-import { publishMainStream, publishGroupMessagingStream } from '@/services/stream.js';
-import { publishMessagingStream } from '@/services/stream.js';
-import { publishMessagingIndexStream } from '@/services/stream.js';
-import { pushNotification } from '@/services/push-notification.js';
-import { User, IRemoteUser } from '@/models/entities/user.js';
-import { MessagingMessage } from '@/models/entities/messaging-message.js';
-import { MessagingMessages, UserGroupJoinings, Users } from '@/models/index.js';
-import { In } from 'typeorm';
-import { IdentifiableError } from '@/misc/identifiable-error.js';
-import { UserGroup } from '@/models/entities/user-group.js';
-import { toArray } from '@/prelude/array.js';
-import { renderReadActivity } from '@/remote/activitypub/renderer/read.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import { deliver } from '@/queue/index.js';
-import orderedCollection from '@/remote/activitypub/renderer/ordered-collection.js';
-
-/**
- * Mark messages as read
- */
-export async function readUserMessagingMessage(
-	userId: User['id'],
-	otherpartyId: User['id'],
-	messageIds: MessagingMessage['id'][]
-) {
-	if (messageIds.length === 0) return;
-
-	const messages = await MessagingMessages.findBy({
-		id: In(messageIds),
-	});
-
-	for (const message of messages) {
-		if (message.recipientId !== userId) {
-			throw new IdentifiableError('e140a4bf-49ce-4fb6-b67c-b78dadf6b52f', 'Access denied (user).');
-		}
-	}
-
-	// Update documents
-	await MessagingMessages.update({
-		id: In(messageIds),
-		userId: otherpartyId,
-		recipientId: userId,
-		isRead: false,
-	}, {
-		isRead: true,
-	});
-
-	// Publish event
-	publishMessagingStream(otherpartyId, userId, 'read', messageIds);
-	publishMessagingIndexStream(userId, 'read', messageIds);
-
-	if (!await Users.getHasUnreadMessagingMessage(userId)) {
-		// 全ての(いままで未読だった)自分宛てのメッセージを(これで)読みましたよというイベントを発行
-		publishMainStream(userId, 'readAllMessagingMessages');
-		pushNotification(userId, 'readAllMessagingMessages', undefined);
-	} else {
-		// そのユーザーとのメッセージで未読がなければイベント発行
-		const count = await MessagingMessages.count({
-			where: {
-				userId: otherpartyId,
-				recipientId: userId,
-				isRead: false,
-			},
-			take: 1
-		});
-
-		if (!count) {
-			pushNotification(userId, 'readAllMessagingMessagesOfARoom', { userId: otherpartyId });
-		}
-	}
-}
-
-/**
- * Mark messages as read
- */
-export async function readGroupMessagingMessage(
-	userId: User['id'],
-	groupId: UserGroup['id'],
-	messageIds: MessagingMessage['id'][]
-) {
-	if (messageIds.length === 0) return;
-
-	// check joined
-	const joining = await UserGroupJoinings.findOneBy({
-		userId: userId,
-		userGroupId: groupId,
-	});
-
-	if (joining == null) {
-		throw new IdentifiableError('930a270c-714a-46b2-b776-ad27276dc569', 'Access denied (group).');
-	}
-
-	const messages = await MessagingMessages.findBy({
-		id: In(messageIds),
-	});
-
-	const reads: MessagingMessage['id'][] = [];
-
-	for (const message of messages) {
-		if (message.userId === userId) continue;
-		if (message.reads.includes(userId)) continue;
-
-		// Update document
-		await MessagingMessages.createQueryBuilder().update()
-			.set({
-				reads: (() => `array_append("reads", '${joining.userId}')`) as any,
-			})
-			.where('id = :id', { id: message.id })
-			.execute();
-
-		reads.push(message.id);
-	}
-
-	// Publish event
-	publishGroupMessagingStream(groupId, 'read', {
-		ids: reads,
-		userId: userId,
-	});
-	publishMessagingIndexStream(userId, 'read', reads);
-
-	if (!await Users.getHasUnreadMessagingMessage(userId)) {
-		// 全ての(いままで未読だった)自分宛てのメッセージを(これで)読みましたよというイベントを発行
-		publishMainStream(userId, 'readAllMessagingMessages');
-		pushNotification(userId, 'readAllMessagingMessages', undefined);
-	} else {
-		// そのグループにおいて未読がなければイベント発行
-		const unreadExist = await MessagingMessages.createQueryBuilder('message')
-			.where(`message.groupId = :groupId`, { groupId: groupId })
-			.andWhere('message.userId != :userId', { userId: userId })
-			.andWhere('NOT (:userId = ANY(message.reads))', { userId: userId })
-			.andWhere('message.createdAt > :joinedAt', { joinedAt: joining.createdAt }) // 自分が加入する前の会話については、未読扱いしない
-			.getOne().then(x => x != null);
-
-		if (!unreadExist) {
-			pushNotification(userId, 'readAllMessagingMessagesOfARoom', { groupId });
-		}
-	}
-}
-
-export async function deliverReadActivity(user: { id: User['id']; host: null; }, recipient: IRemoteUser, messages: MessagingMessage | MessagingMessage[]) {
-	messages = toArray(messages).filter(x => x.uri);
-	const contents = messages.map(x => renderReadActivity(user, x));
-
-	if (contents.length > 1) {
-		const collection = orderedCollection(null, contents.length, undefined, undefined, contents);
-		deliver(user, renderActivity(collection), recipient.inbox);
-	} else {
-		for (const content of contents) {
-			deliver(user, renderActivity(content), recipient.inbox);
-		}
-	}
-}
diff --git a/packages/backend/src/server/api/common/read-notification.ts b/packages/backend/src/server/api/common/read-notification.ts
deleted file mode 100644
index b0d38a9e39..0000000000
--- a/packages/backend/src/server/api/common/read-notification.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { In } from 'typeorm';
-import { publishMainStream } from '@/services/stream.js';
-import { pushNotification } from '@/services/push-notification.js';
-import { User } from '@/models/entities/user.js';
-import { Notification } from '@/models/entities/notification.js';
-import { Notifications, Users } from '@/models/index.js';
-
-export async function readNotification(
-	userId: User['id'],
-	notificationIds: Notification['id'][],
-) {
-	if (notificationIds.length === 0) return;
-
-	// Update documents
-	const result = await Notifications.update({
-		notifieeId: userId,
-		id: In(notificationIds),
-		isRead: false,
-	}, {
-		isRead: true,
-	});
-
-	if (result.affected === 0) return;
-
-	if (!await Users.getHasUnreadNotification(userId)) return postReadAllNotifications(userId);
-	else return postReadNotifications(userId, notificationIds);
-}
-
-export async function readNotificationByQuery(
-	userId: User['id'],
-	query: Record<string, any>,
-) {
-	const notificationIds = await Notifications.findBy({
-		...query,
-		notifieeId: userId,
-		isRead: false,
-	}).then(notifications => notifications.map(notification => notification.id));
-
-	return readNotification(userId, notificationIds);
-}
-
-function postReadAllNotifications(userId: User['id']) {
-	publishMainStream(userId, 'readAllNotifications');
-	return pushNotification(userId, 'readAllNotifications', undefined);
-}
-
-function postReadNotifications(userId: User['id'], notificationIds: Notification['id'][]) {
-	publishMainStream(userId, 'readNotifications', notificationIds);
-	return pushNotification(userId, 'readNotifications', { notificationIds });
-}
diff --git a/packages/backend/src/server/api/common/signin.ts b/packages/backend/src/server/api/common/signin.ts
deleted file mode 100644
index 038fd8d96e..0000000000
--- a/packages/backend/src/server/api/common/signin.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import Koa from 'koa';
-
-import config from '@/config/index.js';
-import { ILocalUser } from '@/models/entities/user.js';
-import { Signins } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { publishMainStream } from '@/services/stream.js';
-
-export default function(ctx: Koa.Context, user: ILocalUser, redirect = false) {
-	if (redirect) {
-		//#region Cookie
-		ctx.cookies.set('igi', user.token!, {
-			path: '/',
-			// SEE: https://github.com/koajs/koa/issues/974
-			// When using a SSL proxy it should be configured to add the "X-Forwarded-Proto: https" header
-			secure: config.url.startsWith('https'),
-			httpOnly: false,
-		});
-		//#endregion
-
-		ctx.redirect(config.url);
-	} else {
-		ctx.body = {
-			id: user.id,
-			i: user.token,
-		};
-		ctx.status = 200;
-	}
-
-	(async () => {
-		// Append signin history
-		const record = await Signins.insert({
-			id: genId(),
-			createdAt: new Date(),
-			userId: user.id,
-			ip: ctx.ip,
-			headers: ctx.headers,
-			success: true,
-		}).then(x => Signins.findOneByOrFail(x.identifiers[0]));
-
-		// Publish signin event
-		publishMainStream(user.id, 'signin', await Signins.pack(record));
-	})();
-}
diff --git a/packages/backend/src/server/api/common/signup.ts b/packages/backend/src/server/api/common/signup.ts
deleted file mode 100644
index abc142472a..0000000000
--- a/packages/backend/src/server/api/common/signup.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import bcrypt from 'bcryptjs';
-import { generateKeyPair } from 'node:crypto';
-import generateUserToken from './generate-native-user-token.js';
-import { User } from '@/models/entities/user.js';
-import { Users, UsedUsernames } from '@/models/index.js';
-import { UserProfile } from '@/models/entities/user-profile.js';
-import { IsNull } from 'typeorm';
-import { genId } from '@/misc/gen-id.js';
-import { toPunyNullable } from '@/misc/convert-host.js';
-import { UserKeypair } from '@/models/entities/user-keypair.js';
-import { usersChart } from '@/services/chart/index.js';
-import { UsedUsername } from '@/models/entities/used-username.js';
-import { db } from '@/db/postgre.js';
-
-export async function signup(opts: {
-	username: User['username'];
-	password?: string | null;
-	passwordHash?: UserProfile['password'] | null;
-	host?: string | null;
-}) {
-	const { username, password, passwordHash, host } = opts;
-	let hash = passwordHash;
-
-	// Validate username
-	if (!Users.validateLocalUsername(username)) {
-		throw new Error('INVALID_USERNAME');
-	}
-
-	if (password != null && passwordHash == null) {
-		// Validate password
-		if (!Users.validatePassword(password)) {
-			throw new Error('INVALID_PASSWORD');
-		}
-
-		// Generate hash of password
-		const salt = await bcrypt.genSalt(8);
-		hash = await bcrypt.hash(password, salt);
-	}
-
-	// Generate secret
-	const secret = generateUserToken();
-
-	// Check username duplication
-	if (await Users.findOneBy({ usernameLower: username.toLowerCase(), host: IsNull() })) {
-		throw new Error('DUPLICATED_USERNAME');
-	}
-
-	// Check deleted username duplication
-	if (await UsedUsernames.findOneBy({ username: username.toLowerCase() })) {
-		throw new Error('USED_USERNAME');
-	}
-
-	const keyPair = await new Promise<string[]>((res, rej) =>
-		generateKeyPair('rsa', {
-			modulusLength: 4096,
-			publicKeyEncoding: {
-				type: 'spki',
-				format: 'pem',
-			},
-			privateKeyEncoding: {
-				type: 'pkcs8',
-				format: 'pem',
-				cipher: undefined,
-				passphrase: undefined,
-			},
-		} as any, (err, publicKey, privateKey) =>
-			err ? rej(err) : res([publicKey, privateKey])
-		));
-
-	let account!: User;
-
-	// Start transaction
-	await db.transaction(async transactionalEntityManager => {
-		const exist = await transactionalEntityManager.findOneBy(User, {
-			usernameLower: username.toLowerCase(),
-			host: IsNull(),
-		});
-
-		if (exist) throw new Error(' the username is already used');
-
-		account = await transactionalEntityManager.save(new User({
-			id: genId(),
-			createdAt: new Date(),
-			username: username,
-			usernameLower: username.toLowerCase(),
-			host: toPunyNullable(host),
-			token: secret,
-			isAdmin: (await Users.countBy({
-				host: IsNull(),
-			})) === 0,
-		}));
-
-		await transactionalEntityManager.save(new UserKeypair({
-			publicKey: keyPair[0],
-			privateKey: keyPair[1],
-			userId: account.id,
-		}));
-
-		await transactionalEntityManager.save(new UserProfile({
-			userId: account.id,
-			autoAcceptFollowed: true,
-			password: hash,
-		}));
-
-		await transactionalEntityManager.save(new UsedUsername({
-			createdAt: new Date(),
-			username: username.toLowerCase(),
-		}));
-	});
-
-	usersChart.update(account, true);
-
-	return { account, secret };
-}
diff --git a/packages/backend/src/server/api/define.ts b/packages/backend/src/server/api/define.ts
deleted file mode 100644
index c1b56b8a83..0000000000
--- a/packages/backend/src/server/api/define.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as fs from 'node:fs';
-import Ajv from 'ajv';
-import { CacheableLocalUser, ILocalUser } from '@/models/entities/user.js';
-import { Schema, SchemaType } from '@/misc/schema.js';
-import { AccessToken } from '@/models/entities/access-token.js';
-import { IEndpointMeta } from './endpoints.js';
-import { ApiError } from './error.js';
-
-export type Response = Record<string, any> | void;
-
-// TODO: paramsの型をT['params']のスキーマ定義から推論する
-type executor<T extends IEndpointMeta, Ps extends Schema> =
-	(params: SchemaType<Ps>, user: T['requireCredential'] extends true ? CacheableLocalUser : CacheableLocalUser | null, token: AccessToken | null, file?: any, cleanup?: () => any, ip?: string | null, headers?: Record<string, string> | null) =>
-		Promise<T['res'] extends undefined ? Response : SchemaType<NonNullable<T['res']>>>;
-
-const ajv = new Ajv({
-	useDefaults: true,
-});
-
-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, ip?: string | null, headers?: Record<string, string> | null) => Promise<any> {
-	const validate = ajv.compile(paramDef);
-
-	return (params: any, user: T['requireCredential'] extends true ? CacheableLocalUser : CacheableLocalUser | null, token: AccessToken | null, file?: any, ip?: string | null, headers?: Record<string, string> | null) => {
-		let cleanup: undefined | (() => void) = undefined;
-
-		if (meta.requireFile) {
-			cleanup = () => {
-				fs.unlink(file.path, () => {});
-			};
-
-			if (file == null) return Promise.reject(new ApiError({
-				message: 'File required.',
-				code: 'FILE_REQUIRED',
-				id: '4267801e-70d1-416a-b011-4ee502885d8b',
-			}));
-		}
-
-		const valid = validate(params);
-		if (!valid) {
-			if (file) cleanup!();
-
-			const errors = validate.errors!;
-			const err = new ApiError({
-				message: 'Invalid param.',
-				code: 'INVALID_PARAM',
-				id: '3d81ceae-475f-4600-b2a8-2bc116157532',
-			}, {
-				param: errors[0].schemaPath,
-				reason: errors[0].message,
-			});
-			return Promise.reject(err);
-		}
-
-		return cb(params as SchemaType<Ps>, user, token, file, cleanup, ip, headers);
-	};
-}
diff --git a/packages/backend/src/server/api/endpoint-base.ts b/packages/backend/src/server/api/endpoint-base.ts
new file mode 100644
index 0000000000..0a7f9b3008
--- /dev/null
+++ b/packages/backend/src/server/api/endpoint-base.ts
@@ -0,0 +1,62 @@
+import * as fs from 'node:fs';
+import Ajv from 'ajv';
+import type { Schema, SchemaType } from '@/misc/schema.js';
+import type { CacheableLocalUser } from '@/models/entities/User.js';
+import type { AccessToken } from '@/models/entities/AccessToken.js';
+import { ApiError } from './error.js';
+import type { IEndpointMeta } from './endpoints.js';
+
+const ajv = new Ajv({
+	useDefaults: true,
+});
+
+ajv.addFormat('misskey:id', /^[a-zA-Z0-9]+$/);
+
+export type Response = Record<string, any> | void;
+
+// TODO: paramsの型をT['params']のスキーマ定義から推論する
+type executor<T extends IEndpointMeta, Ps extends Schema> =
+	(params: SchemaType<Ps>, user: T['requireCredential'] extends true ? CacheableLocalUser : CacheableLocalUser | null, token: AccessToken | null, file?: any, cleanup?: () => any, ip?: string | null, headers?: Record<string, string> | null) =>
+		Promise<T['res'] extends undefined ? Response : SchemaType<NonNullable<T['res']>>>;
+
+export abstract class Endpoint<T extends IEndpointMeta, Ps extends Schema> {
+	public exec: (params: any, user: T['requireCredential'] extends true ? CacheableLocalUser : CacheableLocalUser | null, token: AccessToken | null, file?: any, ip?: string | null, headers?: Record<string, string> | null) => Promise<any>;
+
+	constructor(meta: T, paramDef: Ps, cb: executor<T, Ps>) {
+		const validate = ajv.compile(paramDef);
+
+		this.exec = (params: any, user: T['requireCredential'] extends true ? CacheableLocalUser : CacheableLocalUser | null, token: AccessToken | null, file?: any, ip?: string | null, headers?: Record<string, string> | null) => {
+			let cleanup: undefined | (() => void) = undefined;
+	
+			if (meta.requireFile) {
+				cleanup = () => {
+					fs.unlink(file.path, () => {});
+				};
+	
+				if (file == null) return Promise.reject(new ApiError({
+					message: 'File required.',
+					code: 'FILE_REQUIRED',
+					id: '4267801e-70d1-416a-b011-4ee502885d8b',
+				}));
+			}
+	
+			const valid = validate(params);
+			if (!valid) {
+				if (file) cleanup!();
+	
+				const errors = validate.errors!;
+				const err = new ApiError({
+					message: 'Invalid param.',
+					code: 'INVALID_PARAM',
+					id: '3d81ceae-475f-4600-b2a8-2bc116157532',
+				}, {
+					param: errors[0].schemaPath,
+					reason: errors[0].message,
+				});
+				return Promise.reject(err);
+			}
+	
+			return cb(params as SchemaType<Ps>, user, token, file, cleanup, ip, headers);
+		};
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints.ts b/packages/backend/src/server/api/endpoints.ts
index 4644f34d94..a05bb5a7e0 100644
--- a/packages/backend/src/server/api/endpoints.ts
+++ b/packages/backend/src/server/api/endpoints.ts
@@ -1,4 +1,4 @@
-import { Schema } from '@/misc/schema.js';
+import type { Schema } from '@/misc/schema.js';
 
 import * as ep___admin_meta from './endpoints/admin/meta.js';
 import * as ep___admin_abuseUserReports from './endpoints/admin/abuse-user-reports.js';
@@ -59,7 +59,6 @@ import * as ep___admin_suspendUser from './endpoints/admin/suspend-user.js';
 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___admin_updateUserNote from './endpoints/admin/update-user-note.js';
 import * as ep___announcements from './endpoints/announcements.js';
@@ -253,8 +252,6 @@ import * as ep___notes_timeline from './endpoints/notes/timeline.js';
 import * as ep___notes_translate from './endpoints/notes/translate.js';
 import * as ep___notes_unrenote from './endpoints/notes/unrenote.js';
 import * as ep___notes_userListTimeline from './endpoints/notes/user-list-timeline.js';
-import * as ep___notes_watching_create from './endpoints/notes/watching/create.js';
-import * as ep___notes_watching_delete from './endpoints/notes/watching/delete.js';
 import * as ep___notifications_create from './endpoints/notifications/create.js';
 import * as ep___notifications_markAllAsRead from './endpoints/notifications/mark-all-as-read.js';
 import * as ep___notifications_read from './endpoints/notifications/read.js';
@@ -376,7 +373,6 @@ const eps = [
 	['admin/unsilence-user', ep___admin_unsilenceUser],
 	['admin/unsuspend-user', ep___admin_unsuspendUser],
 	['admin/update-meta', ep___admin_updateMeta],
-	['admin/vacuum', ep___admin_vacuum],
 	['admin/delete-account', ep___admin_deleteAccount],
 	['admin/update-user-note', ep___admin_updateUserNote],
 	['announcements', ep___announcements],
@@ -570,8 +566,6 @@ const eps = [
 	['notes/translate', ep___notes_translate],
 	['notes/unrenote', ep___notes_unrenote],
 	['notes/user-list-timeline', ep___notes_userListTimeline],
-	['notes/watching/create', ep___notes_watching_create],
-	['notes/watching/delete', ep___notes_watching_delete],
 	['notifications/create', ep___notifications_create],
 	['notifications/mark-all-as-read', ep___notifications_markAllAsRead],
 	['notifications/read', ep___notifications_read],
@@ -727,7 +721,6 @@ export interface IEndpointMeta {
 
 export interface IEndpoint {
 	name: string;
-	exec: any;
 	meta: IEndpointMeta;
 	params: Schema;
 }
@@ -735,7 +728,6 @@ export interface IEndpoint {
 const endpoints: IEndpoint[] = eps.map(([name, ep]) => {
 	return {
 		name: name,
-		exec: ep.default,
 		meta: ep.meta || {},
 		params: ep.paramDef,
 	};
diff --git a/packages/backend/src/server/api/endpoints/admin/abuse-user-reports.ts b/packages/backend/src/server/api/endpoints/admin/abuse-user-reports.ts
index 333746f423..480ae7166e 100644
--- a/packages/backend/src/server/api/endpoints/admin/abuse-user-reports.ts
+++ b/packages/backend/src/server/api/endpoints/admin/abuse-user-reports.ts
@@ -1,6 +1,8 @@
-import define from '../../define.js';
-import { AbuseUserReports } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AbuseUserReportsRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -77,33 +79,43 @@ export const paramDef = {
 		sinceId: { type: 'string', format: 'misskey:id' },
 		untilId: { type: 'string', format: 'misskey:id' },
 		state: { type: 'string', nullable: true, default: null },
-		reporterOrigin: { type: 'string', enum: ['combined', 'local', 'remote'], default: "combined" },
-		targetUserOrigin: { type: 'string', enum: ['combined', 'local', 'remote'], default: "combined" },
+		reporterOrigin: { type: 'string', enum: ['combined', 'local', 'remote'], default: 'combined' },
+		targetUserOrigin: { type: 'string', enum: ['combined', 'local', 'remote'], default: 'combined' },
 		forwarded: { type: 'boolean', default: false },
 	},
 	required: [],
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const query = makePaginationQuery(AbuseUserReports.createQueryBuilder('report'), ps.sinceId, ps.untilId);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.abuseUserReportsRepository)
+		private abuseUserReportsRepository: AbuseUserReportsRepository,
 
-	switch (ps.state) {
-		case 'resolved': query.andWhere('report.resolved = TRUE'); break;
-		case 'unresolved': query.andWhere('report.resolved = FALSE'); break;
-	}
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.abuseUserReportsRepository.createQueryBuilder('report'), ps.sinceId, ps.untilId);
 
-	switch (ps.reporterOrigin) {
-		case 'local': query.andWhere('report.reporterHost IS NULL'); break;
-		case 'remote': query.andWhere('report.reporterHost IS NOT NULL'); break;
-	}
+			switch (ps.state) {
+				case 'resolved': query.andWhere('report.resolved = TRUE'); break;
+				case 'unresolved': query.andWhere('report.resolved = FALSE'); break;
+			}
 
-	switch (ps.targetUserOrigin) {
-		case 'local': query.andWhere('report.targetUserHost IS NULL'); break;
-		case 'remote': query.andWhere('report.targetUserHost IS NOT NULL'); break;
-	}
+			switch (ps.reporterOrigin) {
+				case 'local': query.andWhere('report.reporterHost IS NULL'); break;
+				case 'remote': query.andWhere('report.reporterHost IS NOT NULL'); break;
+			}
 
-	const reports = await query.take(ps.limit).getMany();
+			switch (ps.targetUserOrigin) {
+				case 'local': query.andWhere('report.targetUserHost IS NULL'); break;
+				case 'remote': query.andWhere('report.targetUserHost IS NOT NULL'); break;
+			}
 
-	return await AbuseUserReports.packMany(reports);
-});
+			const reports = await query.take(ps.limit).getMany();
+
+			return await this.abuseUserReportEntityService.packMany(reports);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/accounts/create.ts b/packages/backend/src/server/api/endpoints/admin/accounts/create.ts
index 5f89219991..1b173379a0 100644
--- a/packages/backend/src/server/api/endpoints/admin/accounts/create.ts
+++ b/packages/backend/src/server/api/endpoints/admin/accounts/create.ts
@@ -1,7 +1,11 @@
-import define from '../../../define.js';
-import { Users } from '@/models/index.js';
-import { signup } from '../../../common/signup.js';
+import { Inject, Injectable } from '@nestjs/common';
 import { IsNull } from 'typeorm';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository } from '@/models/index.js';
+import { SignupService } from '@/core/SignupService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { localUsernameSchema, passwordSchema } from '@/models/entities/User.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -22,31 +26,42 @@ export const meta = {
 export const paramDef = {
 	type: 'object',
 	properties: {
-		username: Users.localUsernameSchema,
-		password: Users.passwordSchema,
+		username: localUsernameSchema,
+		password: passwordSchema,
 	},
 	required: ['username', 'password'],
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, _me) => {
-	const me = _me ? await Users.findOneByOrFail({ id: _me.id }) : null;
-	const noUsers = (await Users.countBy({
-		host: IsNull(),
-	})) === 0;
-	if (!noUsers && !me?.isAdmin) throw new Error('access denied');
-
-	const { account, secret } = await signup({
-		username: ps.username,
-		password: ps.password,
-	});
-
-	const res = await Users.pack(account, account, {
-		detail: true,
-		includeSecrets: true,
-	});
-
-	(res as any).token = secret;
-
-	return res;
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private userEntityService: UserEntityService,
+		private signupService: SignupService,
+	) {
+		super(meta, paramDef, async (ps, _me) => {
+			const me = _me ? await this.usersRepository.findOneByOrFail({ id: _me.id }) : null;
+			const noUsers = (await this.usersRepository.countBy({
+				host: IsNull(),
+			})) === 0;
+			if (!noUsers && !me?.isAdmin) throw new Error('access denied');
+
+			const { account, secret } = await this.signupService.signup({
+				username: ps.username,
+				password: ps.password,
+			});
+
+			const res = await this.userEntityService.pack(account, account, {
+				detail: true,
+				includeSecrets: true,
+			});
+
+			(res as any).token = secret;
+
+			return res;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/accounts/delete.ts b/packages/backend/src/server/api/endpoints/admin/accounts/delete.ts
index 629d700582..2e0222f0c6 100644
--- a/packages/backend/src/server/api/endpoints/admin/accounts/delete.ts
+++ b/packages/backend/src/server/api/endpoints/admin/accounts/delete.ts
@@ -1,8 +1,10 @@
-import define from '../../../define.js';
-import { 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 { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository } from '@/models/index.js';
+import { QueueService } from '@/core/QueueService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { UserSuspendService } from '@/core/UserSuspendService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -20,40 +22,52 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const user = await Users.findOneBy({ id: ps.userId });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	if (user == null) {
-		throw new Error('user not found');
-	}
+		private queueService: QueueService,
+		private globalEventService: GlobalEventService,
+		private userSuspendService: UserSuspendService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const user = await this.usersRepository.findOneBy({ id: ps.userId });
 
-	if (user.isAdmin) {
-		throw new Error('cannot suspend admin');
-	}
+			if (user == null) {
+				throw new Error('user not found');
+			}
 
-	if (user.isModerator) {
-		throw new Error('cannot suspend moderator');
-	}
+			if (user.isAdmin) {
+				throw new Error('cannot suspend admin');
+			}
 
-	if (Users.isLocalUser(user)) {
-		// 物理削除する前にDelete activityを送信する
-		await doPostSuspend(user).catch(e => {});
+			if (user.isModerator) {
+				throw new Error('cannot suspend moderator');
+			}
 
-		createDeleteAccountJob(user, {
-			soft: false,
-		});
-	} else {
-		createDeleteAccountJob(user, {
-			soft: true, // リモートユーザーの削除は、完全にDBから物理削除してしまうと再度連合してきてアカウントが復活する可能性があるため、soft指定する
-		});
-	}
+			if (this.userEntityService.isLocalUser(user)) {
+				// 物理削除する前にDelete activityを送信する
+				await this.userSuspendService.doPostSuspend(user).catch(err => {});
 
-	await Users.update(user.id, {
-		isDeleted: true,
-	});
+				this.queueService.createDeleteAccountJob(user, {
+					soft: false,
+				});
+			} else {
+				this.queueService.createDeleteAccountJob(user, {
+					soft: true, // リモートユーザーの削除は、完全にDBから物理削除してしまうと再度連合してきてアカウントが復活する可能性があるため、soft指定する
+				});
+			}
 
-	if (Users.isLocalUser(user)) {
-		// Terminate streaming
-		publishUserEvent(user.id, 'terminate', {});
+			await this.usersRepository.update(user.id, {
+				isDeleted: true,
+			});
+
+			if (this.userEntityService.isLocalUser(user)) {
+				// Terminate streaming
+				this.globalEventService.publishUserEvent(user.id, 'terminate', {});
+			}
+		});
 	}
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/ad/create.ts b/packages/backend/src/server/api/endpoints/admin/ad/create.ts
index ab2c50b50f..6b32391e8d 100644
--- a/packages/backend/src/server/api/endpoints/admin/ad/create.ts
+++ b/packages/backend/src/server/api/endpoints/admin/ad/create.ts
@@ -1,6 +1,8 @@
-import define from '../../../define.js';
-import { Ads } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AdsRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -24,16 +26,26 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	await Ads.insert({
-		id: genId(),
-		createdAt: new Date(),
-		expiresAt: new Date(ps.expiresAt),
-		url: ps.url,
-		imageUrl: ps.imageUrl,
-		priority: ps.priority,
-		ratio: ps.ratio,
-		place: ps.place,
-		memo: ps.memo,
-	});
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.adsRepository)
+		private adsRepository: AdsRepository,
+
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			await this.adsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				expiresAt: new Date(ps.expiresAt),
+				url: ps.url,
+				imageUrl: ps.imageUrl,
+				priority: ps.priority,
+				ratio: ps.ratio,
+				place: ps.place,
+				memo: ps.memo,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/ad/delete.ts b/packages/backend/src/server/api/endpoints/admin/ad/delete.ts
index 0ead2be005..7abefe156b 100644
--- a/packages/backend/src/server/api/endpoints/admin/ad/delete.ts
+++ b/packages/backend/src/server/api/endpoints/admin/ad/delete.ts
@@ -1,5 +1,7 @@
-import define from '../../../define.js';
-import { Ads } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AdsRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -26,10 +28,18 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const ad = await Ads.findOneBy({ id: ps.id });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.adsRepository)
+		private adsRepository: AdsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const ad = await this.adsRepository.findOneBy({ id: ps.id });
 
-	if (ad == null) throw new ApiError(meta.errors.noSuchAd);
+			if (ad == null) throw new ApiError(meta.errors.noSuchAd);
 
-	await Ads.delete(ad.id);
-});
+			await this.adsRepository.delete(ad.id);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/ad/list.ts b/packages/backend/src/server/api/endpoints/admin/ad/list.ts
index 74f154f272..efece31bbf 100644
--- a/packages/backend/src/server/api/endpoints/admin/ad/list.ts
+++ b/packages/backend/src/server/api/endpoints/admin/ad/list.ts
@@ -1,6 +1,8 @@
-import define from '../../../define.js';
-import { Ads } from '@/models/index.js';
-import { makePaginationQuery } from '../../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AdsRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -20,11 +22,21 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const query = makePaginationQuery(Ads.createQueryBuilder('ad'), ps.sinceId, ps.untilId)
-		.andWhere('ad.expiresAt > :now', { now: new Date() });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.adsRepository)
+		private adsRepository: AdsRepository,
 
-	const ads = await query.take(ps.limit).getMany();
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.adsRepository.createQueryBuilder('ad'), ps.sinceId, ps.untilId)
+				.andWhere('ad.expiresAt > :now', { now: new Date() });
 
-	return ads;
-});
+			const ads = await query.take(ps.limit).getMany();
+
+			return ads;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/ad/update.ts b/packages/backend/src/server/api/endpoints/admin/ad/update.ts
index 650f8670e3..098a593379 100644
--- a/packages/backend/src/server/api/endpoints/admin/ad/update.ts
+++ b/packages/backend/src/server/api/endpoints/admin/ad/update.ts
@@ -1,5 +1,7 @@
-import define from '../../../define.js';
-import { Ads } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AdsRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -33,18 +35,26 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const ad = await Ads.findOneBy({ id: ps.id });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private adsRepository: AdsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const ad = await this.adsRepository.findOneBy({ id: ps.id });
 
-	if (ad == null) throw new ApiError(meta.errors.noSuchAd);
+			if (ad == null) throw new ApiError(meta.errors.noSuchAd);
 
-	await Ads.update(ad.id, {
-		url: ps.url,
-		place: ps.place,
-		priority: ps.priority,
-		ratio: ps.ratio,
-		memo: ps.memo,
-		imageUrl: ps.imageUrl,
-		expiresAt: new Date(ps.expiresAt),
-	});
-});
+			await this.adsRepository.update(ad.id, {
+				url: ps.url,
+				place: ps.place,
+				priority: ps.priority,
+				ratio: ps.ratio,
+				memo: ps.memo,
+				imageUrl: ps.imageUrl,
+				expiresAt: new Date(ps.expiresAt),
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/announcements/create.ts b/packages/backend/src/server/api/endpoints/admin/announcements/create.ts
index 33076b6d30..ee07170d62 100644
--- a/packages/backend/src/server/api/endpoints/admin/announcements/create.ts
+++ b/packages/backend/src/server/api/endpoints/admin/announcements/create.ts
@@ -1,6 +1,8 @@
-import define from '../../../define.js';
-import { Announcements } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AnnouncementsRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -55,15 +57,25 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const announcement = await Announcements.insert({
-		id: genId(),
-		createdAt: new Date(),
-		updatedAt: null,
-		title: ps.title,
-		text: ps.text,
-		imageUrl: ps.imageUrl,
-	}).then(x => Announcements.findOneByOrFail(x.identifiers[0]));
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.announcementsRepository)
+		private announcementsRepository: AnnouncementsRepository,
 
-	return Object.assign({}, announcement, { createdAt: announcement.createdAt.toISOString(), updatedAt: null });
-});
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const announcement = await this.announcementsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				updatedAt: null,
+				title: ps.title,
+				text: ps.text,
+				imageUrl: ps.imageUrl,
+			}).then(x => this.announcementsRepository.findOneByOrFail(x.identifiers[0]));
+
+			return Object.assign({}, announcement, { createdAt: announcement.createdAt.toISOString(), updatedAt: null });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/announcements/delete.ts b/packages/backend/src/server/api/endpoints/admin/announcements/delete.ts
index c17765f4fc..9a67bdb1aa 100644
--- a/packages/backend/src/server/api/endpoints/admin/announcements/delete.ts
+++ b/packages/backend/src/server/api/endpoints/admin/announcements/delete.ts
@@ -1,5 +1,7 @@
-import define from '../../../define.js';
-import { Announcements } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AnnouncementsRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -26,10 +28,18 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const announcement = await Announcements.findOneBy({ id: ps.id });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.announcementsRepository)
+		private announcementsRepository: AnnouncementsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const announcement = await this.announcementsRepository.findOneBy({ id: ps.id });
 
-	if (announcement == null) throw new ApiError(meta.errors.noSuchAnnouncement);
+			if (announcement == null) throw new ApiError(meta.errors.noSuchAnnouncement);
 
-	await Announcements.delete(announcement.id);
-});
+			await this.announcementsRepository.delete(announcement.id);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/announcements/list.ts b/packages/backend/src/server/api/endpoints/admin/announcements/list.ts
index 7a5758d75b..35c14abda2 100644
--- a/packages/backend/src/server/api/endpoints/admin/announcements/list.ts
+++ b/packages/backend/src/server/api/endpoints/admin/announcements/list.ts
@@ -1,7 +1,9 @@
-import { Announcements, AnnouncementReads } from '@/models/index.js';
-import { Announcement } from '@/models/entities/announcement.js';
-import define from '../../../define.js';
-import { makePaginationQuery } from '../../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { AnnouncementsRepository, AnnouncementReadsRepository } from '@/models/index.js';
+import type { Announcement } from '@/models/entities/Announcement.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -64,26 +66,39 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const query = makePaginationQuery(Announcements.createQueryBuilder('announcement'), ps.sinceId, ps.untilId);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.announcementsRepository)
+		private announcementsRepository: AnnouncementsRepository,
 
-	const announcements = await query.take(ps.limit).getMany();
+		@Inject(DI.announcementReadsRepository)
+		private announcementReadsRepository: AnnouncementReadsRepository,
 
-	const reads = new Map<Announcement, number>();
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.announcementsRepository.createQueryBuilder('announcement'), ps.sinceId, ps.untilId);
 
-	for (const announcement of announcements) {
-		reads.set(announcement, await AnnouncementReads.countBy({
-			announcementId: announcement.id,
-		}));
-	}
+			const announcements = await query.take(ps.limit).getMany();
+
+			const reads = new Map<Announcement, number>();
 
-	return announcements.map(announcement => ({
-		id: announcement.id,
-		createdAt: announcement.createdAt.toISOString(),
-		updatedAt: announcement.updatedAt?.toISOString() ?? null,
-		title: announcement.title,
-		text: announcement.text,
-		imageUrl: announcement.imageUrl,
-		reads: reads.get(announcement)!,
-	}));
-});
+			for (const announcement of announcements) {
+				reads.set(announcement, await this.announcementReadsRepository.countBy({
+					announcementId: announcement.id,
+				}));
+			}
+
+			return announcements.map(announcement => ({
+				id: announcement.id,
+				createdAt: announcement.createdAt.toISOString(),
+				updatedAt: announcement.updatedAt?.toISOString() ?? null,
+				title: announcement.title,
+				text: announcement.text,
+				imageUrl: announcement.imageUrl,
+				reads: reads.get(announcement)!,
+			}));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/announcements/update.ts b/packages/backend/src/server/api/endpoints/admin/announcements/update.ts
index 61ce106d88..38358dff10 100644
--- a/packages/backend/src/server/api/endpoints/admin/announcements/update.ts
+++ b/packages/backend/src/server/api/endpoints/admin/announcements/update.ts
@@ -1,5 +1,7 @@
-import define from '../../../define.js';
-import { Announcements } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AnnouncementsRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -29,15 +31,23 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const announcement = await Announcements.findOneBy({ id: ps.id });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.announcementsRepository)
+		private announcementsRepository: AnnouncementsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const announcement = await this.announcementsRepository.findOneBy({ id: ps.id });
 
-	if (announcement == null) throw new ApiError(meta.errors.noSuchAnnouncement);
+			if (announcement == null) throw new ApiError(meta.errors.noSuchAnnouncement);
 
-	await Announcements.update(announcement.id, {
-		updatedAt: new Date(),
-		title: ps.title,
-		text: ps.text,
-		imageUrl: ps.imageUrl,
-	});
-});
+			await this.announcementsRepository.update(announcement.id, {
+				updatedAt: new Date(),
+				title: ps.title,
+				text: ps.text,
+				imageUrl: ps.imageUrl,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/delete-account.ts b/packages/backend/src/server/api/endpoints/admin/delete-account.ts
index 2d7ef2f236..c8b67fe1c0 100644
--- a/packages/backend/src/server/api/endpoints/admin/delete-account.ts
+++ b/packages/backend/src/server/api/endpoints/admin/delete-account.ts
@@ -1,6 +1,8 @@
-import { Users } from '@/models/index.js';
-import { deleteAccount } from '@/services/delete-account.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DeleteAccountService } from '@/core/DeleteAccountService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -21,11 +23,21 @@ export const paramDef = {
 } 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;
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private deleteAccountService: DeleteAccountService,
+	) {
+		super(meta, paramDef, async (ps) => {
+			const user = await this.usersRepository.findOneByOrFail({ id: ps.userId });
+			if (user.isDeleted) {
+				return;
+			}
 
-	await deleteAccount(user);
-});
+			await this.deleteAccountService.deleteAccount(user);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/delete-all-files-of-a-user.ts b/packages/backend/src/server/api/endpoints/admin/delete-all-files-of-a-user.ts
index dc1976624d..051e4c60fb 100644
--- a/packages/backend/src/server/api/endpoints/admin/delete-all-files-of-a-user.ts
+++ b/packages/backend/src/server/api/endpoints/admin/delete-all-files-of-a-user.ts
@@ -1,6 +1,8 @@
-import define from '../../define.js';
-import { deleteFile } from '@/services/drive/delete-file.js';
-import { DriveFiles } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { DriveService } from '@/core/DriveService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -18,12 +20,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const files = await DriveFiles.findBy({
-		userId: ps.userId,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
 
-	for (const file of files) {
-		deleteFile(file);
+		private driveService: DriveService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const files = await this.driveFilesRepository.findBy({
+				userId: ps.userId,
+			});
+
+			for (const file of files) {
+				this.driveService.deleteFile(file);
+			}
+		});
 	}
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/drive-capacity-override.ts b/packages/backend/src/server/api/endpoints/admin/drive-capacity-override.ts
index a4b29770e1..770bade06d 100644
--- a/packages/backend/src/server/api/endpoints/admin/drive-capacity-override.ts
+++ b/packages/backend/src/server/api/endpoints/admin/drive-capacity-override.ts
@@ -1,7 +1,9 @@
-import define from '../../define.js';
-import { Users } from '@/models/index.js';
-import { User } from '@/models/entities/user.js';
-import { insertModerationLog } from '@/services/insert-moderation-log.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository } from '@/models/index.js';
+import { ModerationLogService } from '@/core/ModerationLogService.js';
+import { DI } from '@/di-symbols.js';
+
 export const meta = {
 	tags: ['admin'],
 
@@ -19,29 +21,39 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const user = await Users.findOneBy({ id: ps.userId });
-
-	if (user == null) {
-		throw new Error('user not found');
-	}
-
-	if (!Users.isLocalUser(user)) {
-		throw new Error('user is not local user');
-	} 
-
-	/*if (user.isAdmin) {
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private moderationLogService: ModerationLogService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const user = await this.usersRepository.findOneBy({ id: ps.userId });
+
+			if (user == null) {
+				throw new Error('user not found');
+			}
+
+			if (!this.userEntityService.isLocalUser(user)) {
+				throw new Error('user is not local user');
+			} 
+
+			/*if (user.isAdmin) {
 		throw new Error('cannot suspend admin');
 	}
 	if (user.isModerator) {
 		throw new Error('cannot suspend moderator');
 	}*/
 
-	await Users.update(user.id, {
-		driveCapacityOverrideMb: ps.overrideMb,
-	});
+			await this.usersRepository.update(user.id, {
+				driveCapacityOverrideMb: ps.overrideMb,
+			});
 
-	insertModerationLog(me, 'change-drive-capacity-override', {
-		targetId: user.id,
-	});
-});
+			this.moderationLogService.insertModerationLog(me, 'change-drive-capacity-override', {
+				targetId: user.id,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/drive/clean-remote-files.ts b/packages/backend/src/server/api/endpoints/admin/drive/clean-remote-files.ts
index bab149532e..2cc4e70e55 100644
--- a/packages/backend/src/server/api/endpoints/admin/drive/clean-remote-files.ts
+++ b/packages/backend/src/server/api/endpoints/admin/drive/clean-remote-files.ts
@@ -1,5 +1,6 @@
-import define from '../../../define.js';
-import { createCleanRemoteFilesJob } from '@/queue/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueueService } from '@/core/QueueService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -15,6 +16,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	createCleanRemoteFilesJob();
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private queueService: QueueService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			this.queueService.createCleanRemoteFilesJob();
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/drive/cleanup.ts b/packages/backend/src/server/api/endpoints/admin/drive/cleanup.ts
index 3db942e6cd..3927a89f90 100644
--- a/packages/backend/src/server/api/endpoints/admin/drive/cleanup.ts
+++ b/packages/backend/src/server/api/endpoints/admin/drive/cleanup.ts
@@ -1,7 +1,9 @@
 import { IsNull } from 'typeorm';
-import define from '../../../define.js';
-import { deleteFile } from '@/services/drive/delete-file.js';
-import { DriveFiles } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { DriveService } from '@/core/DriveService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -17,12 +19,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const files = await DriveFiles.findBy({
-		userId: IsNull(),
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
 
-	for (const file of files) {
-		deleteFile(file);
+		private driveService: DriveService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const files = await this.driveFilesRepository.findBy({
+				userId: IsNull(),
+			});
+
+			for (const file of files) {
+				this.driveService.deleteFile(file);
+			}
+		});
 	}
-});
+}
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 ba32aac431..88529ab0aa 100644
--- a/packages/backend/src/server/api/endpoints/admin/drive/files.ts
+++ b/packages/backend/src/server/api/endpoints/admin/drive/files.ts
@@ -1,6 +1,8 @@
-import { DriveFiles } from '@/models/index.js';
-import define from '../../../define.js';
-import { makePaginationQuery } from '../../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DriveFilesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -39,32 +41,42 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = makePaginationQuery(DriveFiles.createQueryBuilder('file'), ps.sinceId, ps.untilId);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
 
-	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');
-		}
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.driveFilesRepository.createQueryBuilder('file'), ps.sinceId, ps.untilId);
 
-		if (ps.hostname) {
-			query.andWhere('file.userHost = :hostname', { hostname: ps.hostname });
-		}
-	}
+			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.type) {
-		if (ps.type.endsWith('/*')) {
-			query.andWhere('file.type like :type', { type: ps.type.replace('/*', '/') + '%' });
-		} else {
-			query.andWhere('file.type = :type', { type: ps.type });
-		}
-	}
+				if (ps.hostname) {
+					query.andWhere('file.userHost = :hostname', { hostname: ps.hostname });
+				}
+			}
 
-	const files = await query.take(ps.limit).getMany();
+			if (ps.type) {
+				if (ps.type.endsWith('/*')) {
+					query.andWhere('file.type like :type', { type: ps.type.replace('/*', '/') + '%' });
+				} else {
+					query.andWhere('file.type = :type', { type: ps.type });
+				}
+			}
 
-	return await DriveFiles.packMany(files, { detail: true, withUser: true, self: true });
-});
+			const files = await query.take(ps.limit).getMany();
+
+			return await this.driveFileEntityService.packMany(files, { detail: true, withUser: true, self: true });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/drive/show-file.ts b/packages/backend/src/server/api/endpoints/admin/drive/show-file.ts
index e9117a23c8..45ea9cdb50 100644
--- a/packages/backend/src/server/api/endpoints/admin/drive/show-file.ts
+++ b/packages/backend/src/server/api/endpoints/admin/drive/show-file.ts
@@ -1,5 +1,7 @@
-import { DriveFiles } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DriveFilesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -169,25 +171,33 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const file = ps.fileId ? await DriveFiles.findOneBy({ id: ps.fileId }) : await DriveFiles.findOne({
-		where: [{
-			url: ps.url,
-		}, {
-			thumbnailUrl: ps.url,
-		}, {
-			webpublicUrl: ps.url,
-		}],
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const file = ps.fileId ? await this.driveFilesRepository.findOneBy({ id: ps.fileId }) : await this.driveFilesRepository.findOne({
+				where: [{
+					url: ps.url,
+				}, {
+					thumbnailUrl: ps.url,
+				}, {
+					webpublicUrl: ps.url,
+				}],
+			});
 
-	if (file == null) {
-		throw new ApiError(meta.errors.noSuchFile);
-	}
+			if (file == null) {
+				throw new ApiError(meta.errors.noSuchFile);
+			}
 
-	if (!me.isAdmin) {
-		delete file.requestIp;
-		delete file.requestHeaders;
-	}
+			if (!me.isAdmin) {
+				delete file.requestIp;
+				delete file.requestHeaders;
+			}
 
-	return file;
-});
+			return file;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/emoji/add-aliases-bulk.ts b/packages/backend/src/server/api/endpoints/admin/emoji/add-aliases-bulk.ts
index 232fbbd573..0b6e744ef8 100644
--- a/packages/backend/src/server/api/endpoints/admin/emoji/add-aliases-bulk.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/add-aliases-bulk.ts
@@ -1,8 +1,8 @@
-import define from '../../../define.js';
-import { Emojis } from '@/models/index.js';
-import { In } from 'typeorm';
-import { ApiError } from '../../../error.js';
-import { db } from '@/db/postgre.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DataSource, In } from 'typeorm';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { EmojisRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -24,18 +24,31 @@ export const paramDef = {
 	required: ['ids', 'aliases'],
 } as const;
 
+// TODO: ロジックをサービスに切り出す
+
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const emojis = await Emojis.findBy({
-		id: In(ps.ids),
-	});
-
-	for (const emoji of emojis) {
-		await Emojis.update(emoji.id, {
-			updatedAt: new Date(),
-			aliases: [...new Set(emoji.aliases.concat(ps.aliases))],
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const emojis = await this.emojisRepository.findBy({
+				id: In(ps.ids),
+			});
+
+			for (const emoji of emojis) {
+				await this.emojisRepository.update(emoji.id, {
+					updatedAt: new Date(),
+					aliases: [...new Set(emoji.aliases.concat(ps.aliases))],
+				});
+			}
+
+			await this.db.queryResultCache!.remove(['meta_emojis']);
 		});
 	}
-
-	await db.queryResultCache!.remove(['meta_emojis']);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/emoji/add.ts b/packages/backend/src/server/api/endpoints/admin/emoji/add.ts
index 67349c24e0..daa57e8eb2 100644
--- a/packages/backend/src/server/api/endpoints/admin/emoji/add.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/add.ts
@@ -1,11 +1,14 @@
-import define from '../../../define.js';
-import { Emojis, DriveFiles } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { insertModerationLog } from '@/services/insert-moderation-log.js';
-import { ApiError } from '../../../error.js';
+import { Inject, Injectable } from '@nestjs/common';
 import rndstr from 'rndstr';
-import { publishBroadcastStream } from '@/services/stream.js';
-import { db } from '@/db/postgre.js';
+import { DataSource } from 'typeorm';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFilesRepository, EmojisRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { DI } from '@/di-symbols.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { ModerationLogService } from '@/core/ModerationLogService.js';
+import { EmojiEntityService } from '@/core/entities/EmojiEntityService.js';
+import { ApiError } from '../../../error.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -30,37 +33,58 @@ export const paramDef = {
 	required: ['fileId'],
 } as const;
 
+// TODO: ロジックをサービスに切り出す
+
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const file = await DriveFiles.findOneBy({ id: ps.fileId });
-
-	if (file == null) throw new ApiError(meta.errors.noSuchFile);
-
-	const name = file.name.split('.')[0].match(/^[a-z0-9_]+$/) ? file.name.split('.')[0] : `_${rndstr('a-z0-9', 8)}_`;
-
-	const emoji = await Emojis.insert({
-		id: genId(),
-		updatedAt: new Date(),
-		name: name,
-		category: null,
-		host: null,
-		aliases: [],
-		originalUrl: file.url,
-		publicUrl: file.webpublicUrl ?? file.url,
-		type: file.webpublicType ?? file.type,
-	}).then(x => Emojis.findOneByOrFail(x.identifiers[0]));
-
-	await db.queryResultCache!.remove(['meta_emojis']);
-
-	publishBroadcastStream('emojiAdded', {
-		emoji: await Emojis.pack(emoji.id),
-	});
-
-	insertModerationLog(me, 'addEmoji', {
-		emojiId: emoji.id,
-	});
-
-	return {
-		id: emoji.id,
-	};
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+
+		private emojiEntityService: EmojiEntityService,
+		private idService: IdService,
+		private globalEventService: GlobalEventService,
+		private moderationLogService: ModerationLogService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const file = await this.driveFilesRepository.findOneBy({ id: ps.fileId });
+
+			if (file == null) throw new ApiError(meta.errors.noSuchFile);
+
+			const name = file.name.split('.')[0].match(/^[a-z0-9_]+$/) ? file.name.split('.')[0] : `_${rndstr('a-z0-9', 8)}_`;
+
+			const emoji = await this.emojisRepository.insert({
+				id: this.idService.genId(),
+				updatedAt: new Date(),
+				name: name,
+				category: null,
+				host: null,
+				aliases: [],
+				originalUrl: file.url,
+				publicUrl: file.webpublicUrl ?? file.url,
+				type: file.webpublicType ?? file.type,
+			}).then(x => this.emojisRepository.findOneByOrFail(x.identifiers[0]));
+
+			await this.db.queryResultCache!.remove(['meta_emojis']);
+
+			this.globalEventService.publishBroadcastStream('emojiAdded', {
+				emoji: await this.emojiEntityService.pack(emoji.id),
+			});
+
+			this.moderationLogService.insertModerationLog(me, 'addEmoji', {
+				emojiId: emoji.id,
+			});
+
+			return {
+				id: emoji.id,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/emoji/copy.ts b/packages/backend/src/server/api/endpoints/admin/emoji/copy.ts
index 7010ade0d8..08d40834c1 100644
--- a/packages/backend/src/server/api/endpoints/admin/emoji/copy.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/copy.ts
@@ -1,11 +1,14 @@
-import define from '../../../define.js';
-import { Emojis } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { EmojisRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import { DI } from '@/di-symbols.js';
+import { DriveService } from '@/core/DriveService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { EmojiEntityService } from '@/core/entities/EmojiEntityService.js';
 import { ApiError } from '../../../error.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { uploadFromUrl } from '@/services/drive/upload-from-url.js';
-import { publishBroadcastStream } from '@/services/stream.js';
-import { db } from '@/db/postgre.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -42,41 +45,59 @@ export const paramDef = {
 	required: ['emojiId'],
 } as const;
 
+// TODO: ロジックをサービスに切り出す
+
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const emoji = await Emojis.findOneBy({ id: ps.emojiId });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
 
-	if (emoji == null) {
-		throw new ApiError(meta.errors.noSuchEmoji);
-	}
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
 
-	let driveFile: DriveFile;
+		private emojiEntityService: EmojiEntityService,
+		private idService: IdService,
+		private globalEventService: GlobalEventService,
+		private driveService: DriveService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const emoji = await this.emojisRepository.findOneBy({ id: ps.emojiId });
 
-	try {
-		// Create file
-		driveFile = await uploadFromUrl({ url: emoji.originalUrl, user: null, force: true });
-	} catch (e) {
-		throw new ApiError();
-	}
+			if (emoji == null) {
+				throw new ApiError(meta.errors.noSuchEmoji);
+			}
+
+			let driveFile: DriveFile;
+
+			try {
+				// Create file
+				driveFile = await this.driveService.uploadFromUrl({ url: emoji.originalUrl, user: null, force: true });
+			} catch (e) {
+				throw new ApiError();
+			}
 
-	const copied = await Emojis.insert({
-		id: genId(),
-		updatedAt: new Date(),
-		name: emoji.name,
-		host: null,
-		aliases: [],
-		originalUrl: driveFile.url,
-		publicUrl: driveFile.webpublicUrl ?? driveFile.url,
-		type: driveFile.webpublicType ?? driveFile.type,
-	}).then(x => Emojis.findOneByOrFail(x.identifiers[0]));
-
-	await db.queryResultCache!.remove(['meta_emojis']);
-
-	publishBroadcastStream('emojiAdded', {
-		emoji: await Emojis.pack(copied.id),
-	});
-
-	return {
-		id: copied.id,
-	};
-});
+			const copied = await this.emojisRepository.insert({
+				id: this.idService.genId(),
+				updatedAt: new Date(),
+				name: emoji.name,
+				host: null,
+				aliases: [],
+				originalUrl: driveFile.url,
+				publicUrl: driveFile.webpublicUrl ?? driveFile.url,
+				type: driveFile.webpublicType ?? driveFile.type,
+			}).then(x => this.emojisRepository.findOneByOrFail(x.identifiers[0]));
+
+			await this.db.queryResultCache!.remove(['meta_emojis']);
+
+			this.globalEventService.publishBroadcastStream('emojiAdded', {
+				emoji: await this.emojiEntityService.pack(copied.id),
+			});
+
+			return {
+				id: copied.id,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/emoji/delete-bulk.ts b/packages/backend/src/server/api/endpoints/admin/emoji/delete-bulk.ts
index 93a6c4e4e2..81b095cb57 100644
--- a/packages/backend/src/server/api/endpoints/admin/emoji/delete-bulk.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/delete-bulk.ts
@@ -1,9 +1,9 @@
-import define from '../../../define.js';
-import { Emojis } from '@/models/index.js';
-import { In } from 'typeorm';
-import { insertModerationLog } from '@/services/insert-moderation-log.js';
-import { ApiError } from '../../../error.js';
-import { db } from '@/db/postgre.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DataSource, In } from 'typeorm';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { EmojisRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
+import { ModerationLogService } from '@/core/ModerationLogService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -22,19 +22,34 @@ export const paramDef = {
 	required: ['ids'],
 } as const;
 
+// TODO: ロジックをサービスに切り出す
+
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const emojis = await Emojis.findBy({
-		id: In(ps.ids),
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+
+		private moderationLogService: ModerationLogService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const emojis = await this.emojisRepository.findBy({
+				id: In(ps.ids),
+			});
 
-	for (const emoji of emojis) {
-		await Emojis.delete(emoji.id);
+			for (const emoji of emojis) {
+				await this.emojisRepository.delete(emoji.id);
 	
-		await db.queryResultCache!.remove(['meta_emojis']);
+				await this.db.queryResultCache!.remove(['meta_emojis']);
 	
-		insertModerationLog(me, 'deleteEmoji', {
-			emoji: emoji,
+				this.moderationLogService.insertModerationLog(me, 'deleteEmoji', {
+					emoji: emoji,
+				});
+			}
 		});
 	}
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/emoji/delete.ts b/packages/backend/src/server/api/endpoints/admin/emoji/delete.ts
index 67dbf28d85..e4278dc33a 100644
--- a/packages/backend/src/server/api/endpoints/admin/emoji/delete.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/delete.ts
@@ -1,8 +1,10 @@
-import define from '../../../define.js';
-import { Emojis } from '@/models/index.js';
-import { insertModerationLog } from '@/services/insert-moderation-log.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { EmojisRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
+import { ModerationLogService } from '@/core/ModerationLogService.js';
 import { ApiError } from '../../../error.js';
-import { db } from '@/db/postgre.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -27,17 +29,32 @@ export const paramDef = {
 	required: ['id'],
 } as const;
 
+// TODO: ロジックをサービスに切り出す
+
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const emoji = await Emojis.findOneBy({ id: ps.id });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+
+		private moderationLogService: ModerationLogService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const emoji = await this.emojisRepository.findOneBy({ id: ps.id });
 
-	if (emoji == null) throw new ApiError(meta.errors.noSuchEmoji);
+			if (emoji == null) throw new ApiError(meta.errors.noSuchEmoji);
 
-	await Emojis.delete(emoji.id);
+			await this.emojisRepository.delete(emoji.id);
 
-	await db.queryResultCache!.remove(['meta_emojis']);
+			await this.db.queryResultCache!.remove(['meta_emojis']);
 
-	insertModerationLog(me, 'deleteEmoji', {
-		emoji: emoji,
-	});
-});
+			this.moderationLogService.insertModerationLog(me, 'deleteEmoji', {
+				emoji: emoji,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/emoji/import-zip.ts b/packages/backend/src/server/api/endpoints/admin/emoji/import-zip.ts
index 3f03dc2da4..6fe492cb75 100644
--- a/packages/backend/src/server/api/endpoints/admin/emoji/import-zip.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/import-zip.ts
@@ -1,6 +1,6 @@
-import define from '../../../define.js';
-import { createImportCustomEmojisJob } from '@/queue/index.js';
-import ms from 'ms';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueueService } from '@/core/QueueService.js';
 
 export const meta = {
 	secure: true,
@@ -17,6 +17,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	createImportCustomEmojisJob(user, ps.fileId);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private queueService: QueueService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			this.queueService.createImportCustomEmojisJob(me, ps.fileId);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/emoji/list-remote.ts b/packages/backend/src/server/api/endpoints/admin/emoji/list-remote.ts
index d16689a280..9d6fa53417 100644
--- a/packages/backend/src/server/api/endpoints/admin/emoji/list-remote.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/list-remote.ts
@@ -1,7 +1,10 @@
-import define from '../../../define.js';
-import { Emojis } from '@/models/index.js';
-import { toPuny } from '@/misc/convert-host.js';
-import { makePaginationQuery } from '../../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { EmojisRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { EmojiEntityService } from '@/core/entities/EmojiEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -69,23 +72,35 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const q = makePaginationQuery(Emojis.createQueryBuilder('emoji'), ps.sinceId, ps.untilId);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
 
-	if (ps.host == null) {
-		q.andWhere(`emoji.host IS NOT NULL`);
-	} else {
-		q.andWhere(`emoji.host = :host`, { host: toPuny(ps.host) });
-	}
+		private utilityService: UtilityService,
+		private queryService: QueryService,
+		private emojiEntityService: EmojiEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const q = this.queryService.makePaginationQuery(this.emojisRepository.createQueryBuilder('emoji'), ps.sinceId, ps.untilId);
 
-	if (ps.query) {
-		q.andWhere('emoji.name like :query', { query: '%' + ps.query + '%' });
-	}
+			if (ps.host == null) {
+				q.andWhere('emoji.host IS NOT NULL');
+			} else {
+				q.andWhere('emoji.host = :host', { host: this.utilityService.toPuny(ps.host) });
+			}
 
-	const emojis = await q
-		.orderBy('emoji.id', 'DESC')
-		.take(ps.limit)
-		.getMany();
+			if (ps.query) {
+				q.andWhere('emoji.name like :query', { query: '%' + ps.query + '%' });
+			}
 
-	return Emojis.packMany(emojis);
-});
+			const emojis = await q
+				.orderBy('emoji.id', 'DESC')
+				.take(ps.limit)
+				.getMany();
+
+			return this.emojiEntityService.packMany(emojis);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/emoji/list.ts b/packages/backend/src/server/api/endpoints/admin/emoji/list.ts
index 6192978fad..736d664cc3 100644
--- a/packages/backend/src/server/api/endpoints/admin/emoji/list.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/list.ts
@@ -1,7 +1,9 @@
-import define from '../../../define.js';
-import { Emojis } from '@/models/index.js';
-import { makePaginationQuery } from '../../../common/make-pagination-query.js';
-import { Emoji } from '@/models/entities/emoji.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { EmojisRepository } from '@/models/index.js';
+import type { Emoji } from '@/models/entities/Emoji.js';
+import { QueryService } from '@/core/QueryService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -63,27 +65,37 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const q = makePaginationQuery(Emojis.createQueryBuilder('emoji'), ps.sinceId, ps.untilId)
-		.andWhere(`emoji.host IS NULL`);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
 
-	let emojis: Emoji[];
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const q = this.queryService.makePaginationQuery(this.emojisRepository.createQueryBuilder('emoji'), ps.sinceId, ps.untilId)
+				.andWhere('emoji.host IS NULL');
 
-	if (ps.query) {
-		//q.andWhere('emoji.name ILIKE :q', { q: `%${ps.query}%` });
-		//const emojis = await q.take(ps.limit).getMany();
+			let emojis: Emoji[];
 
-		emojis = await q.getMany();
+			if (ps.query) {
+				//q.andWhere('emoji.name ILIKE :q', { q: `%${ps.query}%` });
+				//const emojis = await q.take(ps.limit).getMany();
 
-		emojis = emojis.filter(emoji =>
-			emoji.name.includes(ps.query!) ||
-			emoji.aliases.some(a => a.includes(ps.query!)) ||
-			emoji.category?.includes(ps.query!));
+				emojis = await q.getMany();
 
-		emojis.splice(ps.limit + 1);
-	} else {
-		emojis = await q.take(ps.limit).getMany();
-	}
+				emojis = emojis.filter(emoji =>
+					emoji.name.includes(ps.query!) ||
+					emoji.aliases.some(a => a.includes(ps.query!)) ||
+					emoji.category?.includes(ps.query!));
+
+				emojis.splice(ps.limit + 1);
+			} else {
+				emojis = await q.take(ps.limit).getMany();
+			}
 
-	return Emojis.packMany(emojis);
-});
+			return this.emojiEntityService.packMany(emojis);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/emoji/remove-aliases-bulk.ts b/packages/backend/src/server/api/endpoints/admin/emoji/remove-aliases-bulk.ts
index a4da40fffd..d6c70eaae7 100644
--- a/packages/backend/src/server/api/endpoints/admin/emoji/remove-aliases-bulk.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/remove-aliases-bulk.ts
@@ -1,8 +1,8 @@
-import define from '../../../define.js';
-import { Emojis } from '@/models/index.js';
-import { In } from 'typeorm';
-import { ApiError } from '../../../error.js';
-import { db } from '@/db/postgre.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DataSource, In } from 'typeorm';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { EmojisRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -24,18 +24,31 @@ export const paramDef = {
 	required: ['ids', 'aliases'],
 } as const;
 
+// TODO: ロジックをサービスに切り出す
+
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const emojis = await Emojis.findBy({
-		id: In(ps.ids),
-	});
-
-	for (const emoji of emojis) {
-		await Emojis.update(emoji.id, {
-			updatedAt: new Date(),
-			aliases: emoji.aliases.filter(x => !ps.aliases.includes(x)),
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const emojis = await this.emojisRepository.findBy({
+				id: In(ps.ids),
+			});
+
+			for (const emoji of emojis) {
+				await this.emojisRepository.update(emoji.id, {
+					updatedAt: new Date(),
+					aliases: emoji.aliases.filter(x => !ps.aliases.includes(x)),
+				});
+			}
+
+			await this.db.queryResultCache!.remove(['meta_emojis']);
 		});
 	}
-
-	await db.queryResultCache!.remove(['meta_emojis']);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/emoji/set-aliases-bulk.ts b/packages/backend/src/server/api/endpoints/admin/emoji/set-aliases-bulk.ts
index ae3b190f40..c438b7f9b7 100644
--- a/packages/backend/src/server/api/endpoints/admin/emoji/set-aliases-bulk.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/set-aliases-bulk.ts
@@ -1,8 +1,8 @@
-import define from '../../../define.js';
-import { Emojis } from '@/models/index.js';
-import { In } from 'typeorm';
-import { ApiError } from '../../../error.js';
-import { db } from '@/db/postgre.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DataSource, In } from 'typeorm';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { EmojisRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -24,14 +24,27 @@ export const paramDef = {
 	required: ['ids', 'aliases'],
 } as const;
 
+// TODO: ロジックをサービスに切り出す
+
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	await Emojis.update({
-		id: In(ps.ids),
-	}, {
-		updatedAt: new Date(),
-		aliases: ps.aliases,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			await this.emojisRepository.update({
+				id: In(ps.ids),
+			}, {
+				updatedAt: new Date(),
+				aliases: ps.aliases,
+			});
 
-	await db.queryResultCache!.remove(['meta_emojis']);
-});
+			await this.db.queryResultCache!.remove(['meta_emojis']);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/emoji/set-category-bulk.ts b/packages/backend/src/server/api/endpoints/admin/emoji/set-category-bulk.ts
index cff58d6170..4a9b31fd28 100644
--- a/packages/backend/src/server/api/endpoints/admin/emoji/set-category-bulk.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/set-category-bulk.ts
@@ -1,8 +1,8 @@
-import define from '../../../define.js';
-import { Emojis } from '@/models/index.js';
-import { In } from 'typeorm';
-import { ApiError } from '../../../error.js';
-import { db } from '@/db/postgre.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DataSource, In } from 'typeorm';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { EmojisRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -26,14 +26,27 @@ export const paramDef = {
 	required: ['ids'],
 } as const;
 
+// TODO: ロジックをサービスに切り出す
+
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	await Emojis.update({
-		id: In(ps.ids),
-	}, {
-		updatedAt: new Date(),
-		category: ps.category,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			await this.emojisRepository.update({
+				id: In(ps.ids),
+			}, {
+				updatedAt: new Date(),
+				category: ps.category,
+			});
 
-	await db.queryResultCache!.remove(['meta_emojis']);
-});
+			await this.db.queryResultCache!.remove(['meta_emojis']);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/emoji/update.ts b/packages/backend/src/server/api/endpoints/admin/emoji/update.ts
index 5b547b3b79..e6eb9eb9a6 100644
--- a/packages/backend/src/server/api/endpoints/admin/emoji/update.ts
+++ b/packages/backend/src/server/api/endpoints/admin/emoji/update.ts
@@ -1,7 +1,9 @@
-import define from '../../../define.js';
-import { Emojis } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { EmojisRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { db } from '@/db/postgre.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -35,18 +37,31 @@ export const paramDef = {
 	required: ['id', 'name', 'aliases'],
 } as const;
 
+// TODO: ロジックをサービスに切り出す
+
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const emoji = await Emojis.findOneBy({ id: ps.id });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const emoji = await this.emojisRepository.findOneBy({ id: ps.id });
 
-	if (emoji == null) throw new ApiError(meta.errors.noSuchEmoji);
+			if (emoji == null) throw new ApiError(meta.errors.noSuchEmoji);
 
-	await Emojis.update(emoji.id, {
-		updatedAt: new Date(),
-		name: ps.name,
-		category: ps.category,
-		aliases: ps.aliases,
-	});
+			await this.emojisRepository.update(emoji.id, {
+				updatedAt: new Date(),
+				name: ps.name,
+				category: ps.category,
+				aliases: ps.aliases,
+			});
 
-	await db.queryResultCache!.remove(['meta_emojis']);
-});
+			await this.db.queryResultCache!.remove(['meta_emojis']);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/federation/delete-all-files.ts b/packages/backend/src/server/api/endpoints/admin/federation/delete-all-files.ts
index da54201473..789838661c 100644
--- a/packages/backend/src/server/api/endpoints/admin/federation/delete-all-files.ts
+++ b/packages/backend/src/server/api/endpoints/admin/federation/delete-all-files.ts
@@ -1,6 +1,8 @@
-import define from '../../../define.js';
-import { deleteFile } from '@/services/drive/delete-file.js';
-import { DriveFiles } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { DriveService } from '@/core/DriveService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -18,12 +20,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const files = await DriveFiles.findBy({
-		userHost: ps.host,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
 
-	for (const file of files) {
-		deleteFile(file);
+		private driveService: DriveService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const files = await this.driveFilesRepository.findBy({
+				userHost: ps.host,
+			});
+
+			for (const file of files) {
+				this.driveService.deleteFile(file);
+			}
+		});
 	}
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/federation/refresh-remote-instance-metadata.ts b/packages/backend/src/server/api/endpoints/admin/federation/refresh-remote-instance-metadata.ts
index cb2be5ab37..476b821523 100644
--- a/packages/backend/src/server/api/endpoints/admin/federation/refresh-remote-instance-metadata.ts
+++ b/packages/backend/src/server/api/endpoints/admin/federation/refresh-remote-instance-metadata.ts
@@ -1,7 +1,9 @@
-import define from '../../../define.js';
-import { Instances } from '@/models/index.js';
-import { toPuny } from '@/misc/convert-host.js';
-import { fetchInstanceMetadata } from '@/services/fetch-instance-metadata.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { InstancesRepository } from '@/models/index.js';
+import { FetchInstanceMetadataService } from '@/core/FetchInstanceMetadataService.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -19,12 +21,23 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const instance = await Instances.findOneBy({ host: toPuny(ps.host) });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
 
-	if (instance == null) {
-		throw new Error('instance not found');
-	}
+		private utilityService: UtilityService,
+		private fetchInstanceMetadataService: FetchInstanceMetadataService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const instance = await this.instancesRepository.findOneBy({ host: this.utilityService.toPuny(ps.host) });
+
+			if (instance == null) {
+				throw new Error('instance not found');
+			}
 
-	fetchInstanceMetadata(instance, true);
-});
+			this.fetchInstanceMetadataService.fetchInstanceMetadata(instance, true);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/federation/remove-all-following.ts b/packages/backend/src/server/api/endpoints/admin/federation/remove-all-following.ts
index b7ee27db64..67165dc47e 100644
--- a/packages/backend/src/server/api/endpoints/admin/federation/remove-all-following.ts
+++ b/packages/backend/src/server/api/endpoints/admin/federation/remove-all-following.ts
@@ -1,6 +1,8 @@
-import define from '../../../define.js';
-import deleteFollowing from '@/services/following/delete.js';
-import { Followings, Users } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { FollowingsRepository, UsersRepository } from '@/models/index.js';
+import { UserFollowingService } from '@/core/UserFollowingService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -18,17 +20,30 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const followings = await Followings.findBy({
-		followerHost: ps.host,
-	});
-
-	const pairs = await Promise.all(followings.map(f => Promise.all([
-		Users.findOneByOrFail({ id: f.followerId }),
-		Users.findOneByOrFail({ id: f.followeeId }),
-	])));
-
-	for (const pair of pairs) {
-		deleteFollowing(pair[0], pair[1]);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.notesRepository)
+		private followingsRepository: FollowingsRepository,
+
+		private userFollowingService: UserFollowingService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const followings = await this.followingsRepository.findBy({
+				followerHost: ps.host,
+			});
+
+			const pairs = await Promise.all(followings.map(f => Promise.all([
+				this.usersRepository.findOneByOrFail({ id: f.followerId }),
+				this.usersRepository.findOneByOrFail({ id: f.followeeId }),
+			])));
+
+			for (const pair of pairs) {
+				this.userFollowingService.unfollow(pair[0], pair[1]);
+			}
+		});
 	}
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/federation/update-instance.ts b/packages/backend/src/server/api/endpoints/admin/federation/update-instance.ts
index 278131fb37..b9eade5b40 100644
--- a/packages/backend/src/server/api/endpoints/admin/federation/update-instance.ts
+++ b/packages/backend/src/server/api/endpoints/admin/federation/update-instance.ts
@@ -1,6 +1,8 @@
-import define from '../../../define.js';
-import { Instances } from '@/models/index.js';
-import { toPuny } from '@/misc/convert-host.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { InstancesRepository } from '@/models/index.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -19,14 +21,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const instance = await Instances.findOneBy({ host: toPuny(ps.host) });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
 
-	if (instance == null) {
-		throw new Error('instance not found');
-	}
+		private utilityService: UtilityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const instance = await this.instancesRepository.findOneBy({ host: this.utilityService.toPuny(ps.host) });
+
+			if (instance == null) {
+				throw new Error('instance not found');
+			}
 
-	Instances.update({ host: toPuny(ps.host) }, {
-		isSuspended: ps.isSuspended,
-	});
-});
+			this.instancesRepository.update({ host: this.utilityService.toPuny(ps.host) }, {
+				isSuspended: ps.isSuspended,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/get-index-stats.ts b/packages/backend/src/server/api/endpoints/admin/get-index-stats.ts
index dd16473f30..e53d0bfcea 100644
--- a/packages/backend/src/server/api/endpoints/admin/get-index-stats.ts
+++ b/packages/backend/src/server/api/endpoints/admin/get-index-stats.ts
@@ -1,5 +1,7 @@
-import define from '../../define.js';
-import { db } from '@/db/postgre.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -15,14 +17,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async () => {
-	const stats = await db.query(`SELECT * FROM pg_indexes;`).then(recs => {
-		const res = [] as { tablename: string; indexname: string; }[];
-		for (const rec of recs) {
-			res.push(rec);
-		}
-		return res;
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+	) {
+		super(meta, paramDef, async () => {
+			const stats = await this.db.query('SELECT * FROM pg_indexes;').then(recs => {
+				const res = [] as { tablename: string; indexname: string; }[];
+				for (const rec of recs) {
+					res.push(rec);
+				}
+				return res;
+			});
 
-	return stats;
-});
+			return stats;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/get-table-stats.ts b/packages/backend/src/server/api/endpoints/admin/get-table-stats.ts
index aca2540fd5..41014cb167 100644
--- a/packages/backend/src/server/api/endpoints/admin/get-table-stats.ts
+++ b/packages/backend/src/server/api/endpoints/admin/get-table-stats.ts
@@ -1,5 +1,7 @@
-import { db } from '@/db/postgre.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -26,24 +28,31 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async () => {
-	const sizes = await
-		db.query(`
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+	) {
+		super(meta, paramDef, async () => {
+			const sizes = await this.db.query(`
 			SELECT relname AS "table", reltuples as "count", pg_total_relation_size(C.oid) AS "size"
 			FROM pg_class C LEFT JOIN pg_namespace N ON (N.oid = C.relnamespace)
 			WHERE nspname NOT IN ('pg_catalog', 'information_schema')
 				AND C.relkind <> 'i'
 				AND nspname !~ '^pg_toast';`)
-		.then(recs => {
-			const res = {} as Record<string, { count: number; size: number; }>;
-			for (const rec of recs) {
-				res[rec.table] = {
-					count: parseInt(rec.count, 10),
-					size: parseInt(rec.size, 10),
-				};
-			}
-			return res;
-		});
+				.then(recs => {
+					const res = {} as Record<string, { count: number; size: number; }>;
+					for (const rec of recs) {
+						res[rec.table] = {
+							count: parseInt(rec.count, 10),
+							size: parseInt(rec.size, 10),
+						};
+					}
+					return res;
+				});
 
-	return sizes;
-});
+			return sizes;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/get-user-ips.ts b/packages/backend/src/server/api/endpoints/admin/get-user-ips.ts
index e8b9cb3b09..eddaade919 100644
--- a/packages/backend/src/server/api/endpoints/admin/get-user-ips.ts
+++ b/packages/backend/src/server/api/endpoints/admin/get-user-ips.ts
@@ -1,5 +1,7 @@
-import { UserIps } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserIpsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -17,15 +19,23 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const ips = await UserIps.find({
-		where: { userId: ps.userId },
-		order: { createdAt: 'DESC' },
-		take: 30,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userIpsRepository)
+		private userIpsRepository: UserIpsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const ips = await this.userIpsRepository.find({
+				where: { userId: ps.userId },
+				order: { createdAt: 'DESC' },
+				take: 30,
+			});
 
-	return ips.map(x => ({
-		ip: x.ip,
-		createdAt: x.createdAt.toISOString(),
-	}));
-});
+			return ips.map(x => ({
+				ip: x.ip,
+				createdAt: x.createdAt.toISOString(),
+			}));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/invite.ts b/packages/backend/src/server/api/endpoints/admin/invite.ts
index 7e950cf87b..5fe341e5ca 100644
--- a/packages/backend/src/server/api/endpoints/admin/invite.ts
+++ b/packages/backend/src/server/api/endpoints/admin/invite.ts
@@ -1,7 +1,9 @@
 import rndstr from 'rndstr';
-import define from '../../define.js';
-import { RegistrationTickets } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { RegistrationTicketsRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -31,19 +33,29 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async () => {
-	const code = rndstr({
-		length: 8,
-		chars: '2-9A-HJ-NP-Z', // [0-9A-Z] w/o [01IO] (32 patterns)
-	});
-
-	await RegistrationTickets.insert({
-		id: genId(),
-		createdAt: new Date(),
-		code,
-	});
-
-	return {
-		code,
-	};
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.registrationTicketsRepository)
+		private registrationTicketsRepository: RegistrationTicketsRepository,
+
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async () => {
+			const code = rndstr({
+				length: 8,
+				chars: '2-9A-HJ-NP-Z', // [0-9A-Z] w/o [01IO] (32 patterns)
+			});
+
+			await this.registrationTicketsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				code,
+			});
+
+			return {
+				code,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/meta.ts b/packages/backend/src/server/api/endpoints/admin/meta.ts
index 8746119687..615c0a0e70 100644
--- a/packages/backend/src/server/api/endpoints/admin/meta.ts
+++ b/packages/backend/src/server/api/endpoints/admin/meta.ts
@@ -1,7 +1,9 @@
-import config from '@/config/index.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
+import { Inject, Injectable } from '@nestjs/common';
 import { MAX_NOTE_TEXT_LENGTH } from '@/const.js';
-import define from '../../define.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { MetaService } from '@/core/MetaService.js';
+import { Config } from '@/config.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['meta'],
@@ -340,91 +342,101 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const instance = await fetchMeta(true);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
 
-	return {
-		maintainerName: instance.maintainerName,
-		maintainerEmail: instance.maintainerEmail,
-		version: config.version,
-		name: instance.name,
-		uri: config.url,
-		description: instance.description,
-		langs: instance.langs,
-		tosUrl: instance.ToSUrl,
-		repositoryUrl: instance.repositoryUrl,
-		feedbackUrl: instance.feedbackUrl,
-		disableRegistration: instance.disableRegistration,
-		disableLocalTimeline: instance.disableLocalTimeline,
-		disableGlobalTimeline: instance.disableGlobalTimeline,
-		driveCapacityPerLocalUserMb: instance.localDriveCapacityMb,
-		driveCapacityPerRemoteUserMb: instance.remoteDriveCapacityMb,
-		emailRequiredForSignup: instance.emailRequiredForSignup,
-		enableHcaptcha: instance.enableHcaptcha,
-		hcaptchaSiteKey: instance.hcaptchaSiteKey,
-		enableRecaptcha: instance.enableRecaptcha,
-		recaptchaSiteKey: instance.recaptchaSiteKey,
-		swPublickey: instance.swPublicKey,
-		themeColor: instance.themeColor,
-		mascotImageUrl: instance.mascotImageUrl,
-		bannerUrl: instance.bannerUrl,
-		errorImageUrl: instance.errorImageUrl,
-		iconUrl: instance.iconUrl,
-		backgroundImageUrl: instance.backgroundImageUrl,
-		logoImageUrl: instance.logoImageUrl,
-		maxNoteTextLength: MAX_NOTE_TEXT_LENGTH, // 後方互換性のため
-		defaultLightTheme: instance.defaultLightTheme,
-		defaultDarkTheme: instance.defaultDarkTheme,
-		enableEmail: instance.enableEmail,
-		enableTwitterIntegration: instance.enableTwitterIntegration,
-		enableGithubIntegration: instance.enableGithubIntegration,
-		enableDiscordIntegration: instance.enableDiscordIntegration,
-		enableServiceWorker: instance.enableServiceWorker,
-		translatorAvailable: instance.deeplAuthKey != null,
-		pinnedPages: instance.pinnedPages,
-		pinnedClipId: instance.pinnedClipId,
-		cacheRemoteFiles: instance.cacheRemoteFiles,
-		useStarForReactionFallback: instance.useStarForReactionFallback,
-		pinnedUsers: instance.pinnedUsers,
-		hiddenTags: instance.hiddenTags,
-		blockedHosts: instance.blockedHosts,
-		hcaptchaSecretKey: instance.hcaptchaSecretKey,
-		recaptchaSecretKey: instance.recaptchaSecretKey,
-		sensitiveMediaDetection: instance.sensitiveMediaDetection,
-		sensitiveMediaDetectionSensitivity: instance.sensitiveMediaDetectionSensitivity,
-		setSensitiveFlagAutomatically: instance.setSensitiveFlagAutomatically,
-		enableSensitiveMediaDetectionForVideos: instance.enableSensitiveMediaDetectionForVideos,
-		proxyAccountId: instance.proxyAccountId,
-		twitterConsumerKey: instance.twitterConsumerKey,
-		twitterConsumerSecret: instance.twitterConsumerSecret,
-		githubClientId: instance.githubClientId,
-		githubClientSecret: instance.githubClientSecret,
-		discordClientId: instance.discordClientId,
-		discordClientSecret: instance.discordClientSecret,
-		summalyProxy: instance.summalyProxy,
-		email: instance.email,
-		smtpSecure: instance.smtpSecure,
-		smtpHost: instance.smtpHost,
-		smtpPort: instance.smtpPort,
-		smtpUser: instance.smtpUser,
-		smtpPass: instance.smtpPass,
-		swPrivateKey: instance.swPrivateKey,
-		useObjectStorage: instance.useObjectStorage,
-		objectStorageBaseUrl: instance.objectStorageBaseUrl,
-		objectStorageBucket: instance.objectStorageBucket,
-		objectStoragePrefix: instance.objectStoragePrefix,
-		objectStorageEndpoint: instance.objectStorageEndpoint,
-		objectStorageRegion: instance.objectStorageRegion,
-		objectStoragePort: instance.objectStoragePort,
-		objectStorageAccessKey: instance.objectStorageAccessKey,
-		objectStorageSecretKey: instance.objectStorageSecretKey,
-		objectStorageUseSSL: instance.objectStorageUseSSL,
-		objectStorageUseProxy: instance.objectStorageUseProxy,
-		objectStorageSetPublicRead: instance.objectStorageSetPublicRead,
-		objectStorageS3ForcePathStyle: instance.objectStorageS3ForcePathStyle,
-		deeplAuthKey: instance.deeplAuthKey,
-		deeplIsPro: instance.deeplIsPro,
-		enableIpLogging: instance.enableIpLogging,
-		enableActiveEmailValidation: instance.enableActiveEmailValidation,
-	};
-});
+		private metaService: MetaService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const instance = await this.metaService.fetch(true);
+
+			return {
+				maintainerName: instance.maintainerName,
+				maintainerEmail: instance.maintainerEmail,
+				version: this.config.version,
+				name: instance.name,
+				uri: this.config.url,
+				description: instance.description,
+				langs: instance.langs,
+				tosUrl: instance.ToSUrl,
+				repositoryUrl: instance.repositoryUrl,
+				feedbackUrl: instance.feedbackUrl,
+				disableRegistration: instance.disableRegistration,
+				disableLocalTimeline: instance.disableLocalTimeline,
+				disableGlobalTimeline: instance.disableGlobalTimeline,
+				driveCapacityPerLocalUserMb: instance.localDriveCapacityMb,
+				driveCapacityPerRemoteUserMb: instance.remoteDriveCapacityMb,
+				emailRequiredForSignup: instance.emailRequiredForSignup,
+				enableHcaptcha: instance.enableHcaptcha,
+				hcaptchaSiteKey: instance.hcaptchaSiteKey,
+				enableRecaptcha: instance.enableRecaptcha,
+				recaptchaSiteKey: instance.recaptchaSiteKey,
+				swPublickey: instance.swPublicKey,
+				themeColor: instance.themeColor,
+				mascotImageUrl: instance.mascotImageUrl,
+				bannerUrl: instance.bannerUrl,
+				errorImageUrl: instance.errorImageUrl,
+				iconUrl: instance.iconUrl,
+				backgroundImageUrl: instance.backgroundImageUrl,
+				logoImageUrl: instance.logoImageUrl,
+				maxNoteTextLength: MAX_NOTE_TEXT_LENGTH, // 後方互換性のため
+				defaultLightTheme: instance.defaultLightTheme,
+				defaultDarkTheme: instance.defaultDarkTheme,
+				enableEmail: instance.enableEmail,
+				enableTwitterIntegration: instance.enableTwitterIntegration,
+				enableGithubIntegration: instance.enableGithubIntegration,
+				enableDiscordIntegration: instance.enableDiscordIntegration,
+				enableServiceWorker: instance.enableServiceWorker,
+				translatorAvailable: instance.deeplAuthKey != null,
+				pinnedPages: instance.pinnedPages,
+				pinnedClipId: instance.pinnedClipId,
+				cacheRemoteFiles: instance.cacheRemoteFiles,
+				useStarForReactionFallback: instance.useStarForReactionFallback,
+				pinnedUsers: instance.pinnedUsers,
+				hiddenTags: instance.hiddenTags,
+				blockedHosts: instance.blockedHosts,
+				hcaptchaSecretKey: instance.hcaptchaSecretKey,
+				recaptchaSecretKey: instance.recaptchaSecretKey,
+				sensitiveMediaDetection: instance.sensitiveMediaDetection,
+				sensitiveMediaDetectionSensitivity: instance.sensitiveMediaDetectionSensitivity,
+				setSensitiveFlagAutomatically: instance.setSensitiveFlagAutomatically,
+				enableSensitiveMediaDetectionForVideos: instance.enableSensitiveMediaDetectionForVideos,
+				proxyAccountId: instance.proxyAccountId,
+				twitterConsumerKey: instance.twitterConsumerKey,
+				twitterConsumerSecret: instance.twitterConsumerSecret,
+				githubClientId: instance.githubClientId,
+				githubClientSecret: instance.githubClientSecret,
+				discordClientId: instance.discordClientId,
+				discordClientSecret: instance.discordClientSecret,
+				summalyProxy: instance.summalyProxy,
+				email: instance.email,
+				smtpSecure: instance.smtpSecure,
+				smtpHost: instance.smtpHost,
+				smtpPort: instance.smtpPort,
+				smtpUser: instance.smtpUser,
+				smtpPass: instance.smtpPass,
+				swPrivateKey: instance.swPrivateKey,
+				useObjectStorage: instance.useObjectStorage,
+				objectStorageBaseUrl: instance.objectStorageBaseUrl,
+				objectStorageBucket: instance.objectStorageBucket,
+				objectStoragePrefix: instance.objectStoragePrefix,
+				objectStorageEndpoint: instance.objectStorageEndpoint,
+				objectStorageRegion: instance.objectStorageRegion,
+				objectStoragePort: instance.objectStoragePort,
+				objectStorageAccessKey: instance.objectStorageAccessKey,
+				objectStorageSecretKey: instance.objectStorageSecretKey,
+				objectStorageUseSSL: instance.objectStorageUseSSL,
+				objectStorageUseProxy: instance.objectStorageUseProxy,
+				objectStorageSetPublicRead: instance.objectStorageSetPublicRead,
+				objectStorageS3ForcePathStyle: instance.objectStorageS3ForcePathStyle,
+				deeplAuthKey: instance.deeplAuthKey,
+				deeplIsPro: instance.deeplIsPro,
+				enableIpLogging: instance.enableIpLogging,
+				enableActiveEmailValidation: instance.enableActiveEmailValidation,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/moderators/add.ts b/packages/backend/src/server/api/endpoints/admin/moderators/add.ts
index 7b209c2d99..fe200da6ad 100644
--- a/packages/backend/src/server/api/endpoints/admin/moderators/add.ts
+++ b/packages/backend/src/server/api/endpoints/admin/moderators/add.ts
@@ -1,6 +1,8 @@
-import define from '../../../define.js';
-import { Users } from '@/models/index.js';
-import { publishInternalEvent } from '@/services/stream.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository } from '@/models/index.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -18,20 +20,30 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const user = await Users.findOneBy({ id: ps.userId });
-
-	if (user == null) {
-		throw new Error('user not found');
-	}
-
-	if (user.isAdmin) {
-		throw new Error('cannot mark as moderator if admin user');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps) => {
+			const user = await this.usersRepository.findOneBy({ id: ps.userId });
+
+			if (user == null) {
+				throw new Error('user not found');
+			}
+
+			if (user.isAdmin) {
+				throw new Error('cannot mark as moderator if admin user');
+			}
+
+			await this.usersRepository.update(user.id, {
+				isModerator: true,
+			});
+
+			this.globalEventService.publishInternalEvent('userChangeModeratorState', { id: user.id, isModerator: true });
+		});
 	}
-
-	await Users.update(user.id, {
-		isModerator: true,
-	});
-
-	publishInternalEvent('userChangeModeratorState', { id: user.id, isModerator: true });
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/moderators/remove.ts b/packages/backend/src/server/api/endpoints/admin/moderators/remove.ts
index a01e9f3c69..3dc7158ba9 100644
--- a/packages/backend/src/server/api/endpoints/admin/moderators/remove.ts
+++ b/packages/backend/src/server/api/endpoints/admin/moderators/remove.ts
@@ -1,6 +1,8 @@
-import define from '../../../define.js';
-import { Users } from '@/models/index.js';
-import { publishInternalEvent } from '@/services/stream.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository } from '@/models/index.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -18,16 +20,26 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const user = await Users.findOneBy({ id: ps.userId });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	if (user == null) {
-		throw new Error('user not found');
-	}
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps) => {
+			const user = await this.usersRepository.findOneBy({ id: ps.userId });
+
+			if (user == null) {
+				throw new Error('user not found');
+			}
 
-	await Users.update(user.id, {
-		isModerator: false,
-	});
+			await this.usersRepository.update(user.id, {
+				isModerator: false,
+			});
 
-	publishInternalEvent('userChangeModeratorState', { id: user.id, isModerator: false });
-});
+			this.globalEventService.publishInternalEvent('userChangeModeratorState', { id: user.id, isModerator: false });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/promo/create.ts b/packages/backend/src/server/api/endpoints/admin/promo/create.ts
index 68a17867b2..a179f163df 100644
--- a/packages/backend/src/server/api/endpoints/admin/promo/create.ts
+++ b/packages/backend/src/server/api/endpoints/admin/promo/create.ts
@@ -1,7 +1,9 @@
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { PromoNotesRepository } from '@/models/index.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { getNote } from '../../../common/getters.js';
-import { PromoNotes } from '@/models/index.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -34,21 +36,31 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const note = await getNote(ps.noteId).catch(e => {
-		if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
-		throw e;
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.promoNotesRepository)
+		private promoNotesRepository: PromoNotesRepository,
 
-	const exist = await PromoNotes.findOneBy({ noteId: note.id });
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const note = await this.getterService.getNote(ps.noteId).catch(e => {
+				if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw e;
+			});
 
-	if (exist != null) {
-		throw new ApiError(meta.errors.alreadyPromoted);
-	}
+			const exist = await this.promoNotesRepository.findOneBy({ noteId: note.id });
+
+			if (exist != null) {
+				throw new ApiError(meta.errors.alreadyPromoted);
+			}
 
-	await PromoNotes.insert({
-		noteId: note.id,
-		expiresAt: new Date(ps.expiresAt),
-		userId: note.userId,
-	});
-});
+			await this.promoNotesRepository.insert({
+				noteId: note.id,
+				expiresAt: new Date(ps.expiresAt),
+				userId: note.userId,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/queue/clear.ts b/packages/backend/src/server/api/endpoints/admin/queue/clear.ts
index 8f015c280a..9129f53f06 100644
--- a/packages/backend/src/server/api/endpoints/admin/queue/clear.ts
+++ b/packages/backend/src/server/api/endpoints/admin/queue/clear.ts
@@ -1,6 +1,7 @@
-import define from '../../../define.js';
-import { destroy } from '@/queue/index.js';
-import { insertModerationLog } from '@/services/insert-moderation-log.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ModerationLogService } from '@/core/ModerationLogService.js';
+import { QueueService } from '@/core/QueueService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -16,8 +17,16 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	destroy();
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private moderationLogService: ModerationLogService,
+		private queueService: QueueService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			this.queueService.destroy();
 
-	insertModerationLog(me, 'clearQueue');
-});
+			this.moderationLogService.insertModerationLog(me, 'clearQueue');
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/queue/deliver-delayed.ts b/packages/backend/src/server/api/endpoints/admin/queue/deliver-delayed.ts
index 70f7d77de4..4b5be70d56 100644
--- a/packages/backend/src/server/api/endpoints/admin/queue/deliver-delayed.ts
+++ b/packages/backend/src/server/api/endpoints/admin/queue/deliver-delayed.ts
@@ -1,6 +1,7 @@
-import { deliverQueue } from '@/queue/queues.js';
 import { URL } from 'node:url';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DeliverQueue } from '@/core/queue/QueueModule.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -39,21 +40,28 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const jobs = await deliverQueue.getJobs(['delayed']);
-
-	const res = [] as [string, number][];
-
-	for (const job of jobs) {
-		const host = new URL(job.data.to).host;
-		if (res.find(x => x[0] === host)) {
-			res.find(x => x[0] === host)![1]++;
-		} else {
-			res.push([host, 1]);
-		}
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject('queue:deliver') public deliverQueue: DeliverQueue,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const jobs = await this.deliverQueue.getJobs(['delayed']);
+
+			const res = [] as [string, number][];
 
-	res.sort((a, b) => b[1] - a[1]);
+			for (const job of jobs) {
+				const host = new URL(job.data.to).host;
+				if (res.find(x => x[0] === host)) {
+					res.find(x => x[0] === host)![1]++;
+				} else {
+					res.push([host, 1]);
+				}
+			}
 
-	return res;
-});
+			res.sort((a, b) => b[1] - a[1]);
+
+			return res;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/queue/inbox-delayed.ts b/packages/backend/src/server/api/endpoints/admin/queue/inbox-delayed.ts
index 2235ce8f97..715974e917 100644
--- a/packages/backend/src/server/api/endpoints/admin/queue/inbox-delayed.ts
+++ b/packages/backend/src/server/api/endpoints/admin/queue/inbox-delayed.ts
@@ -1,6 +1,7 @@
 import { URL } from 'node:url';
-import define from '../../../define.js';
-import { inboxQueue } from '@/queue/queues.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { InboxQueue } from '@/core/queue/QueueModule.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -39,21 +40,28 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const jobs = await inboxQueue.getJobs(['delayed']);
-
-	const res = [] as [string, number][];
-
-	for (const job of jobs) {
-		const host = new URL(job.data.signature.keyId).host;
-		if (res.find(x => x[0] === host)) {
-			res.find(x => x[0] === host)![1]++;
-		} else {
-			res.push([host, 1]);
-		}
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject('queue:inbox') public inboxQueue: InboxQueue,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const jobs = await this.inboxQueue.getJobs(['delayed']);
+
+			const res = [] as [string, number][];
 
-	res.sort((a, b) => b[1] - a[1]);
+			for (const job of jobs) {
+				const host = new URL(job.data.signature.keyId).host;
+				if (res.find(x => x[0] === host)) {
+					res.find(x => x[0] === host)![1]++;
+				} else {
+					res.push([host, 1]);
+				}
+			}
 
-	return res;
-});
+			res.sort((a, b) => b[1] - a[1]);
+
+			return res;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/queue/stats.ts b/packages/backend/src/server/api/endpoints/admin/queue/stats.ts
index 988b5a5e35..f2ca81a8da 100644
--- a/packages/backend/src/server/api/endpoints/admin/queue/stats.ts
+++ b/packages/backend/src/server/api/endpoints/admin/queue/stats.ts
@@ -1,5 +1,6 @@
-import { deliverQueue, inboxQueue, dbQueue, objectStorageQueue } from '@/queue/queues.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DbQueue, DeliverQueue, EndedPollNotificationQueue, InboxQueue, ObjectStorageQueue, SystemQueue, WebhookDeliverQueue } from '@/core/queue/QueueModule.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -38,16 +39,29 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const deliverJobCounts = await deliverQueue.getJobCounts();
-	const inboxJobCounts = await inboxQueue.getJobCounts();
-	const dbJobCounts = await dbQueue.getJobCounts();
-	const objectStorageJobCounts = await objectStorageQueue.getJobCounts();
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject('queue:system') public systemQueue: SystemQueue,
+		@Inject('queue:endedPollNotification') public endedPollNotificationQueue: EndedPollNotificationQueue,
+		@Inject('queue:deliver') public deliverQueue: DeliverQueue,
+		@Inject('queue:inbox') public inboxQueue: InboxQueue,
+		@Inject('queue:db') public dbQueue: DbQueue,
+		@Inject('queue:objectStorage') public objectStorageQueue: ObjectStorageQueue,
+		@Inject('queue:webhookDeliver') public webhookDeliverQueue: WebhookDeliverQueue,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const deliverJobCounts = await this.deliverQueue.getJobCounts();
+			const inboxJobCounts = await this.inboxQueue.getJobCounts();
+			const dbJobCounts = await this.dbQueue.getJobCounts();
+			const objectStorageJobCounts = await this.objectStorageQueue.getJobCounts();
 
-	return {
-		deliver: deliverJobCounts,
-		inbox: inboxJobCounts,
-		db: dbJobCounts,
-		objectStorage: objectStorageJobCounts,
-	};
-});
+			return {
+				deliver: deliverJobCounts,
+				inbox: inboxJobCounts,
+				db: dbJobCounts,
+				objectStorage: objectStorageJobCounts,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/relays/add.ts b/packages/backend/src/server/api/endpoints/admin/relays/add.ts
index 348e9baca1..32ad79918f 100644
--- a/packages/backend/src/server/api/endpoints/admin/relays/add.ts
+++ b/packages/backend/src/server/api/endpoints/admin/relays/add.ts
@@ -1,6 +1,7 @@
 import { URL } from 'node:url';
-import define from '../../../define.js';
-import { addRelay } from '@/services/relay.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { RelayService } from '@/core/RelayService.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -54,12 +55,19 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	try {
-		if (new URL(ps.inbox).protocol !== 'https:') throw 'https only';
-	} catch {
-		throw new ApiError(meta.errors.invalidUrl);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private relayService: RelayService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			try {
+				if (new URL(ps.inbox).protocol !== 'https:') throw 'https only';
+			} catch {
+				throw new ApiError(meta.errors.invalidUrl);
+			}
 
-	return await addRelay(ps.inbox);
-});
+			return await this.relayService.addRelay(ps.inbox);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/relays/list.ts b/packages/backend/src/server/api/endpoints/admin/relays/list.ts
index 89ec651e61..079b351add 100644
--- a/packages/backend/src/server/api/endpoints/admin/relays/list.ts
+++ b/packages/backend/src/server/api/endpoints/admin/relays/list.ts
@@ -1,5 +1,6 @@
-import define from '../../../define.js';
-import { listRelay } from '@/services/relay.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { RelayService } from '@/core/RelayService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -46,6 +47,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	return await listRelay();
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private relayService: RelayService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.relayService.listRelay();
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/relays/remove.ts b/packages/backend/src/server/api/endpoints/admin/relays/remove.ts
index b59cf72c58..9dc4105d14 100644
--- a/packages/backend/src/server/api/endpoints/admin/relays/remove.ts
+++ b/packages/backend/src/server/api/endpoints/admin/relays/remove.ts
@@ -1,5 +1,6 @@
-import define from '../../../define.js';
-import { removeRelay } from '@/services/relay.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { RelayService } from '@/core/RelayService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -17,6 +18,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	return await removeRelay(ps.inbox);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private relayService: RelayService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.relayService.removeRelay(ps.inbox);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/reset-password.ts b/packages/backend/src/server/api/endpoints/admin/reset-password.ts
index be4c2dceed..7446746b45 100644
--- a/packages/backend/src/server/api/endpoints/admin/reset-password.ts
+++ b/packages/backend/src/server/api/endpoints/admin/reset-password.ts
@@ -1,7 +1,9 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
 import bcrypt from 'bcryptjs';
 import rndstr from 'rndstr';
-import { Users, UserProfiles } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository, UserProfilesRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -32,29 +34,40 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const user = await Users.findOneBy({ id: ps.userId });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	if (user == null) {
-		throw new Error('user not found');
-	}
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+	) {
+		super(meta, paramDef, async (ps) => {
+			const user = await this.usersRepository.findOneBy({ id: ps.userId });
 
-	if (user.isAdmin) {
-		throw new Error('cannot reset password of admin');
-	}
+			if (user == null) {
+				throw new Error('user not found');
+			}
 
-	const passwd = rndstr('a-zA-Z0-9', 8);
+			if (user.isAdmin) {
+				throw new Error('cannot reset password of admin');
+			}
 
-	// Generate hash of password
-	const hash = bcrypt.hashSync(passwd);
+			const passwd = rndstr('a-zA-Z0-9', 8);
 
-	await UserProfiles.update({
-		userId: user.id,
-	}, {
-		password: hash,
-	});
+			// Generate hash of password
+			const hash = bcrypt.hashSync(passwd);
 
-	return {
-		password: passwd,
-	};
-});
+			await this.userProfilesRepository.update({
+				userId: user.id,
+			}, {
+				password: hash,
+			});
+
+			return {
+				password: passwd,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/resolve-abuse-user-report.ts b/packages/backend/src/server/api/endpoints/admin/resolve-abuse-user-report.ts
index 3edae4a85f..b5828ae9be 100644
--- a/packages/backend/src/server/api/endpoints/admin/resolve-abuse-user-report.ts
+++ b/packages/backend/src/server/api/endpoints/admin/resolve-abuse-user-report.ts
@@ -1,9 +1,10 @@
-import define from '../../define.js';
-import { AbuseUserReports, Users } from '@/models/index.js';
-import { getInstanceActor } from '@/services/instance-actor.js';
-import { deliver } from '@/queue/index.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import { renderFlag } from '@/remote/activitypub/renderer/flag.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository, AbuseUserReportsRepository } from '@/models/index.js';
+import { InstanceActorService } from '@/core/InstanceActorService.js';
+import { QueueService } from '@/core/QueueService.js';
+import { ApRendererService } from '@/core/remote/activitypub/ApRendererService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -21,24 +22,41 @@ export const paramDef = {
 	required: ['reportId'],
 } as const;
 
-// eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const report = await AbuseUserReports.findOneByOrFail({ id: ps.reportId });
-
-	if (report == null) {
-		throw new Error('report not found');
-	}
+// TODO: ロジックをサービスに切り出す
 
-	if (ps.forward && report.targetUserHost != null) {
-		const actor = await getInstanceActor();
-		const targetUser = await Users.findOneByOrFail({ id: report.targetUserId });
-
-		deliver(actor, renderActivity(renderFlag(actor, [targetUser.uri!], report.comment)), targetUser.inbox);
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.abuseUserReportsRepository)
+		private abuseUserReportsRepository: AbuseUserReportsRepository,
+
+		private queueService: QueueService,
+		private instanceActorService: InstanceActorService,
+		private apRendererService: ApRendererService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const report = await this.abuseUserReportsRepository.findOneBy({ id: ps.reportId });
+
+			if (report == null) {
+				throw new Error('report not found');
+			}
+
+			if (ps.forward && report.targetUserHost != null) {
+				const actor = await this.instanceActorService.getInstanceActor();
+				const targetUser = await this.usersRepository.findOneByOrFail({ id: report.targetUserId });
+
+				this.queueService.deliver(actor, this.apRendererService.renderActivity(this.apRendererService.renderFlag(actor, [targetUser.uri!], report.comment)), targetUser.inbox);
+			}
+
+			await this.abuseUserReportsRepository.update(report.id, {
+				resolved: true,
+				assigneeId: me.id,
+				forwarded: ps.forward && report.targetUserHost != null,
+			});
+		});
 	}
-
-	await AbuseUserReports.update(report.id, {
-		resolved: true,
-		assigneeId: me.id,
-		forwarded: ps.forward && report.targetUserHost != null,
-	});
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/send-email.ts b/packages/backend/src/server/api/endpoints/admin/send-email.ts
index bbdd66e4c9..7434bf4c91 100644
--- a/packages/backend/src/server/api/endpoints/admin/send-email.ts
+++ b/packages/backend/src/server/api/endpoints/admin/send-email.ts
@@ -1,5 +1,6 @@
-import define from '../../define.js';
-import { sendEmail } from '@/services/send-email.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { EmailService } from '@/core/EmailService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -19,6 +20,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	await sendEmail(ps.to, ps.subject, ps.text, ps.text);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private emailService: EmailService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			await this.emailService.sendEmail(ps.to, ps.subject, ps.text, ps.text);
+		});
+	}
+}
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 85c6fb82e7..9c576dffe9 100644
--- a/packages/backend/src/server/api/endpoints/admin/server-info.ts
+++ b/packages/backend/src/server/api/endpoints/admin/server-info.ts
@@ -1,8 +1,10 @@
 import * as os from 'node:os';
 import si from 'systeminformation';
-import define from '../../define.js';
-import { redisClient } from '../../../../db/redis.js';
-import { db } from '@/db/postgre.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import Redis from 'ioredis';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -94,34 +96,46 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async () => {
-	const memStats = await si.mem();
-	const fsStats = await si.fsSize();
-	const netInterface = await si.networkInterfaceDefault();
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
 
-	const redisServerInfo = await redisClient.info('Server');
-	const m = redisServerInfo.match(new RegExp('^redis_version:(.*)', 'm'));
-	const redis_version = m?.[1];
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
 
-	return {
-		machine: os.hostname(),
-		os: os.platform(),
-		node: process.version,
-		psql: await db.query('SHOW server_version').then(x => x[0].server_version),
-		redis: redis_version,
-		cpu: {
-			model: os.cpus()[0].model,
-			cores: os.cpus().length,
-		},
-		mem: {
-			total: memStats.total,
-		},
-		fs: {
-			total: fsStats[0].size,
-			used: fsStats[0].used,
-		},
-		net: {
-			interface: netInterface,
-		},
-	};
-});
+	) {
+		super(meta, paramDef, async () => {
+			const memStats = await si.mem();
+			const fsStats = await si.fsSize();
+			const netInterface = await si.networkInterfaceDefault();
+
+			const redisServerInfo = await this.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 this.db.query('SHOW server_version').then(x => x[0].server_version),
+				redis: redis_version,
+				cpu: {
+					model: os.cpus()[0].model,
+					cores: os.cpus().length,
+				},
+				mem: {
+					total: memStats.total,
+				},
+				fs: {
+					total: fsStats[0].size,
+					used: fsStats[0].used,
+				},
+				net: {
+					interface: netInterface,
+				},
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/show-moderation-logs.ts b/packages/backend/src/server/api/endpoints/admin/show-moderation-logs.ts
index 3545536aa2..2424cac425 100644
--- a/packages/backend/src/server/api/endpoints/admin/show-moderation-logs.ts
+++ b/packages/backend/src/server/api/endpoints/admin/show-moderation-logs.ts
@@ -1,6 +1,8 @@
-import define from '../../define.js';
-import { ModerationLogs } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ModerationLogsRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -59,10 +61,20 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const query = makePaginationQuery(ModerationLogs.createQueryBuilder('report'), ps.sinceId, ps.untilId);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.moderationLogsRepository)
+		private moderationLogsRepository: ModerationLogsRepository,
 
-	const reports = await query.take(ps.limit).getMany();
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.moderationLogsRepository.createQueryBuilder('report'), ps.sinceId, ps.untilId);
 
-	return await ModerationLogs.packMany(reports);
-});
+			const reports = await query.take(ps.limit).getMany();
+
+			return await this.moderationLogEntityService.packMany(reports);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/show-user.ts b/packages/backend/src/server/api/endpoints/admin/show-user.ts
index 0d866b3113..b50564210b 100644
--- a/packages/backend/src/server/api/endpoints/admin/show-user.ts
+++ b/packages/backend/src/server/api/endpoints/admin/show-user.ts
@@ -1,5 +1,7 @@
-import { Signins, UserProfiles, Users } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository, SigninsRepository, UserProfilesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -22,55 +24,69 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const [user, profile] = await Promise.all([
-		Users.findOneBy({ id: ps.userId }),
-		UserProfiles.findOneBy({ userId: ps.userId }),
-	]);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	if (user == null || profile == null) {
-		throw new Error('user not found');
-	}
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
 
-	const _me = await Users.findOneByOrFail({ id: me.id });
-	if ((_me.isModerator && !_me.isAdmin) && user.isAdmin) {
-		throw new Error('cannot show info of admin');
-	}
+		@Inject(DI.signinsRepository)
+		private signinsRepository: SigninsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const [user, profile] = await Promise.all([
+				this.usersRepository.findOneBy({ id: ps.userId }),
+				this.userProfilesRepository.findOneBy({ userId: ps.userId }),
+			]);
 
-	if (!_me.isAdmin) {
-		return {
-			isModerator: user.isModerator,
-			isSilenced: user.isSilenced,
-			isSuspended: user.isSuspended,
-		};
-	}
+			if (user == null || profile == null) {
+				throw new Error('user not found');
+			}
 
-	const maskedKeys = ['accessToken', 'accessTokenSecret', 'refreshToken'];
-	Object.keys(profile.integrations).forEach(integration => {
-		maskedKeys.forEach(key => profile.integrations[integration][key] = '<MASKED>');
-	});
+			const _me = await this.usersRepository.findOneByOrFail({ id: me.id });
+			if ((_me.isModerator && !_me.isAdmin) && user.isAdmin) {
+				throw new Error('cannot show info of admin');
+			}
 
-	const signins = await Signins.findBy({ userId: user.id });
+			if (!_me.isAdmin) {
+				return {
+					isModerator: user.isModerator,
+					isSilenced: user.isSilenced,
+					isSuspended: user.isSuspended,
+				};
+			}
 
-	return {
-		email: profile.email,
-		emailVerified: profile.emailVerified,
-		autoAcceptFollowed: profile.autoAcceptFollowed,
-		noCrawle: profile.noCrawle,
-		alwaysMarkNsfw: profile.alwaysMarkNsfw,
-		autoSensitive: profile.autoSensitive,
-		carefulBot: profile.carefulBot,
-		injectFeaturedNote: profile.injectFeaturedNote,
-		receiveAnnouncementEmail: profile.receiveAnnouncementEmail,
-		integrations: profile.integrations,
-		mutedWords: profile.mutedWords,
-		mutedInstances: profile.mutedInstances,
-		mutingNotificationTypes: profile.mutingNotificationTypes,
-		isModerator: user.isModerator,
-		isSilenced: user.isSilenced,
-		isSuspended: user.isSuspended,
-		lastActiveDate: user.lastActiveDate,
-		moderationNote: profile.moderationNote,
-		signins,
-	};
-});
+			const maskedKeys = ['accessToken', 'accessTokenSecret', 'refreshToken'];
+			Object.keys(profile.integrations).forEach(integration => {
+				maskedKeys.forEach(key => profile.integrations[integration][key] = '<MASKED>');
+			});
+
+			const signins = await this.signinsRepository.findBy({ userId: user.id });
+
+			return {
+				email: profile.email,
+				emailVerified: profile.emailVerified,
+				autoAcceptFollowed: profile.autoAcceptFollowed,
+				noCrawle: profile.noCrawle,
+				alwaysMarkNsfw: profile.alwaysMarkNsfw,
+				autoSensitive: profile.autoSensitive,
+				carefulBot: profile.carefulBot,
+				injectFeaturedNote: profile.injectFeaturedNote,
+				receiveAnnouncementEmail: profile.receiveAnnouncementEmail,
+				integrations: profile.integrations,
+				mutedWords: profile.mutedWords,
+				mutedInstances: profile.mutedInstances,
+				mutingNotificationTypes: profile.mutingNotificationTypes,
+				isModerator: user.isModerator,
+				isSilenced: user.isSilenced,
+				isSuspended: user.isSuspended,
+				lastActiveDate: user.lastActiveDate,
+				moderationNote: profile.moderationNote,
+				signins,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/show-users.ts b/packages/backend/src/server/api/endpoints/admin/show-users.ts
index 8e09e72d5b..8d11e3ea7a 100644
--- a/packages/backend/src/server/api/endpoints/admin/show-users.ts
+++ b/packages/backend/src/server/api/endpoints/admin/show-users.ts
@@ -1,5 +1,7 @@
-import { Users } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -38,46 +40,54 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = Users.createQueryBuilder('user');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.usersRepository.createQueryBuilder('user');
 
-	switch (ps.state) {
-		case 'available': query.where('user.isSuspended = FALSE'); break;
-		case 'admin': query.where('user.isAdmin = TRUE'); break;
-		case 'moderator': query.where('user.isModerator = TRUE'); break;
-		case 'adminOrModerator': query.where('user.isAdmin = TRUE OR user.isModerator = TRUE'); break;
-		case 'alive': query.where('user.updatedAt > :date', { date: new Date(Date.now() - 1000 * 60 * 60 * 24 * 5) }); break;
-		case 'silenced': query.where('user.isSilenced = TRUE'); break;
-		case 'suspended': query.where('user.isSuspended = TRUE'); break;
-	}
+			switch (ps.state) {
+				case 'available': query.where('user.isSuspended = FALSE'); break;
+				case 'admin': query.where('user.isAdmin = TRUE'); break;
+				case 'moderator': query.where('user.isModerator = TRUE'); break;
+				case 'adminOrModerator': query.where('user.isAdmin = TRUE OR user.isModerator = TRUE'); break;
+				case 'alive': query.where('user.updatedAt > :date', { date: new Date(Date.now() - 1000 * 60 * 60 * 24 * 5) }); break;
+				case 'silenced': query.where('user.isSilenced = TRUE'); break;
+				case 'suspended': query.where('user.isSuspended = TRUE'); break;
+			}
 
-	switch (ps.origin) {
-		case 'local': query.andWhere('user.host IS NULL'); break;
-		case 'remote': query.andWhere('user.host IS NOT NULL'); break;
-	}
+			switch (ps.origin) {
+				case 'local': query.andWhere('user.host IS NULL'); break;
+				case 'remote': query.andWhere('user.host IS NOT NULL'); break;
+			}
 
-	if (ps.username) {
-		query.andWhere('user.usernameLower like :username', { username: ps.username.toLowerCase() + '%' });
-	}
+			if (ps.username) {
+				query.andWhere('user.usernameLower like :username', { username: ps.username.toLowerCase() + '%' });
+			}
 
-	if (ps.hostname) {
-		query.andWhere('user.host = :hostname', { hostname: ps.hostname.toLowerCase() });
-	}
+			if (ps.hostname) {
+				query.andWhere('user.host = :hostname', { hostname: ps.hostname.toLowerCase() });
+			}
 
-	switch (ps.sort) {
-		case '+follower': query.orderBy('user.followersCount', 'DESC'); break;
-		case '-follower': query.orderBy('user.followersCount', 'ASC'); break;
-		case '+createdAt': query.orderBy('user.createdAt', 'DESC'); break;
-		case '-createdAt': query.orderBy('user.createdAt', 'ASC'); break;
-		case '+updatedAt': query.orderBy('user.updatedAt', 'DESC', 'NULLS LAST'); break;
-		case '-updatedAt': query.orderBy('user.updatedAt', 'ASC', 'NULLS FIRST'); break;
-		default: query.orderBy('user.id', 'ASC'); break;
-	}
+			switch (ps.sort) {
+				case '+follower': query.orderBy('user.followersCount', 'DESC'); break;
+				case '-follower': query.orderBy('user.followersCount', 'ASC'); break;
+				case '+createdAt': query.orderBy('user.createdAt', 'DESC'); break;
+				case '-createdAt': query.orderBy('user.createdAt', 'ASC'); break;
+				case '+updatedAt': query.orderBy('user.updatedAt', 'DESC', 'NULLS LAST'); break;
+				case '-updatedAt': query.orderBy('user.updatedAt', 'ASC', 'NULLS FIRST'); break;
+				default: query.orderBy('user.id', 'ASC'); break;
+			}
 
-	query.take(ps.limit);
-	query.skip(ps.offset);
+			query.take(ps.limit);
+			query.skip(ps.offset);
 
-	const users = await query.getMany();
+			const users = await query.getMany();
 
-	return await Users.packMany(users, me, { detail: true });
-});
+			return await this.userEntityService.packMany(users, me, { detail: true });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/silence-user.ts b/packages/backend/src/server/api/endpoints/admin/silence-user.ts
index 17b9f3b5a0..bec8f7719e 100644
--- a/packages/backend/src/server/api/endpoints/admin/silence-user.ts
+++ b/packages/backend/src/server/api/endpoints/admin/silence-user.ts
@@ -1,7 +1,9 @@
-import define from '../../define.js';
-import { Users } from '@/models/index.js';
-import { insertModerationLog } from '@/services/insert-moderation-log.js';
-import { publishInternalEvent } from '@/services/stream.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ModerationLogService } from '@/core/ModerationLogService.js';
+import { UsersRepository } from '@/models/index.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -19,24 +21,35 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const user = await Users.findOneBy({ id: ps.userId });
-
-	if (user == null) {
-		throw new Error('user not found');
-	}
-
-	if (user.isAdmin) {
-		throw new Error('cannot silence admin');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private moderationLogService: ModerationLogService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const user = await this.usersRepository.findOneBy({ id: ps.userId });
+
+			if (user == null) {
+				throw new Error('user not found');
+			}
+
+			if (user.isAdmin) {
+				throw new Error('cannot silence admin');
+			}
+
+			await this.usersRepository.update(user.id, {
+				isSilenced: true,
+			});
+
+			this.globalEventService.publishInternalEvent('userChangeSilencedState', { id: user.id, isSilenced: true });
+
+			this.moderationLogService.insertModerationLog(me, 'silence', {
+				targetId: user.id,
+			});
+		});
 	}
-
-	await Users.update(user.id, {
-		isSilenced: true,
-	});
-
-	publishInternalEvent('userChangeSilencedState', { id: user.id, isSilenced: true });
-
-	insertModerationLog(me, 'silence', {
-		targetId: user.id,
-	});
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/suspend-user.ts b/packages/backend/src/server/api/endpoints/admin/suspend-user.ts
index ed513eda08..fa057dadb6 100644
--- a/packages/backend/src/server/api/endpoints/admin/suspend-user.ts
+++ b/packages/backend/src/server/api/endpoints/admin/suspend-user.ts
@@ -1,10 +1,12 @@
-import define from '../../define.js';
-import deleteFollowing from '@/services/following/delete.js';
-import { Users, Followings, Notifications } from '@/models/index.js';
-import { User } from '@/models/entities/user.js';
-import { insertModerationLog } from '@/services/insert-moderation-log.js';
-import { doPostSuspend } from '@/services/suspend-user.js';
-import { publishUserEvent } from '@/services/stream.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository, FollowingsRepository, NotificationsRepository } from '@/models/index.js';
+import type { User } from '@/models/entities/User.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { ModerationLogService } from '@/core/ModerationLogService.js';
+import { UserSuspendService } from '@/core/UserSuspendService.js';
+import { UserFollowingService } from '@/core/UserFollowingService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -22,64 +24,83 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const user = await Users.findOneBy({ id: ps.userId });
-
-	if (user == null) {
-		throw new Error('user not found');
-	}
-
-	if (user.isAdmin) {
-		throw new Error('cannot suspend admin');
-	}
-
-	if (user.isModerator) {
-		throw new Error('cannot suspend moderator');
-	}
-
-	await Users.update(user.id, {
-		isSuspended: true,
-	});
-
-	insertModerationLog(me, 'suspend', {
-		targetId: user.id,
-	});
-
-	// Terminate streaming
-	if (Users.isLocalUser(user)) {
-		publishUserEvent(user.id, 'terminate', {});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		@Inject(DI.notificationsRepository)
+		private notificationsRepository: NotificationsRepository,
+
+		private userFollowingService: UserFollowingService,
+		private userSuspendService: UserSuspendService,
+		private moderationLogService: ModerationLogService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const user = await this.usersRepository.findOneBy({ id: ps.userId });
+
+			if (user == null) {
+				throw new Error('user not found');
+			}
+
+			if (user.isAdmin) {
+				throw new Error('cannot suspend admin');
+			}
+
+			if (user.isModerator) {
+				throw new Error('cannot suspend moderator');
+			}
+
+			await this.usersRepository.update(user.id, {
+				isSuspended: true,
+			});
+
+			this.moderationLogService.insertModerationLog(me, 'suspend', {
+				targetId: user.id,
+			});
+
+			// Terminate streaming
+			if (this.userEntityService.isLocalUser(user)) {
+				this.globalEventService.publishUserEvent(user.id, 'terminate', {});
+			}
+
+			(async () => {
+				await this.userSuspendService.doPostSuspend(user).catch(e => {});
+				await this.#unFollowAll(user).catch(e => {});
+				await this.#readAllNotify(user).catch(e => {});
+			})();
+		});
 	}
 
-	(async () => {
-		await doPostSuspend(user).catch(e => {});
-		await unFollowAll(user).catch(e => {});
-		await readAllNotify(user).catch(e => {});
-	})();
-});
-
-async function unFollowAll(follower: User) {
-	const followings = await Followings.findBy({
-		followerId: follower.id,
-	});
-
-	for (const following of followings) {
-		const followee = await Users.findOneBy({
-			id: following.followeeId,
+	async #unFollowAll(follower: User) {
+		const followings = await this.followingsRepository.findBy({
+			followerId: follower.id,
 		});
-
-		if (followee == null) {
-			throw `Cant find followee ${following.followeeId}`;
+	
+		for (const following of followings) {
+			const followee = await this.usersRepository.findOneBy({
+				id: following.followeeId,
+			});
+	
+			if (followee == null) {
+				throw `Cant find followee ${following.followeeId}`;
+			}
+	
+			await this.userFollowingService.unfollow(follower, followee, true);
 		}
-
-		await deleteFollowing(follower, followee, true);
 	}
-}
-
-async function readAllNotify(notifier: User) {
-	await Notifications.update({
-		notifierId: notifier.id,
-		isRead: false,
-	}, {
-		isRead: true,
-	});
+	
+	async #readAllNotify(notifier: User) {
+		await this.notificationsRepository.update({
+			notifierId: notifier.id,
+			isRead: false,
+		}, {
+			isRead: true,
+		});
+	}
 }
diff --git a/packages/backend/src/server/api/endpoints/admin/unsilence-user.ts b/packages/backend/src/server/api/endpoints/admin/unsilence-user.ts
index a4b373f5c7..b4671a2f41 100644
--- a/packages/backend/src/server/api/endpoints/admin/unsilence-user.ts
+++ b/packages/backend/src/server/api/endpoints/admin/unsilence-user.ts
@@ -1,7 +1,9 @@
-import define from '../../define.js';
-import { Users } from '@/models/index.js';
-import { insertModerationLog } from '@/services/insert-moderation-log.js';
-import { publishInternalEvent } from '@/services/stream.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository } from '@/models/index.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { ModerationLogService } from '@/core/ModerationLogService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -19,20 +21,31 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const user = await Users.findOneBy({ id: ps.userId });
-
-	if (user == null) {
-		throw new Error('user not found');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private moderationLogService: ModerationLogService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const user = await this.usersRepository.findOneBy({ id: ps.userId });
+
+			if (user == null) {
+				throw new Error('user not found');
+			}
+
+			await this.usersRepository.update(user.id, {
+				isSilenced: false,
+			});
+
+			this.globalEventService.publishInternalEvent('userChangeSilencedState', { id: user.id, isSilenced: false });
+
+			this.moderationLogService.insertModerationLog(me, 'unsilence', {
+				targetId: user.id,
+			});
+		});
 	}
-
-	await Users.update(user.id, {
-		isSilenced: false,
-	});
-
-	publishInternalEvent('userChangeSilencedState', { id: user.id, isSilenced: false });
-
-	insertModerationLog(me, 'unsilence', {
-		targetId: user.id,
-	});
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/unsuspend-user.ts b/packages/backend/src/server/api/endpoints/admin/unsuspend-user.ts
index 5cf26251be..96283d251f 100644
--- a/packages/backend/src/server/api/endpoints/admin/unsuspend-user.ts
+++ b/packages/backend/src/server/api/endpoints/admin/unsuspend-user.ts
@@ -1,7 +1,9 @@
-import define from '../../define.js';
-import { Users } from '@/models/index.js';
-import { insertModerationLog } from '@/services/insert-moderation-log.js';
-import { doPostUnsuspend } from '@/services/unsuspend-user.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository } from '@/models/index.js';
+import { ModerationLogService } from '@/core/ModerationLogService.js';
+import { UserSuspendService } from '@/core/UserSuspendService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -19,20 +21,31 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const user = await Users.findOneBy({ id: ps.userId });
-
-	if (user == null) {
-		throw new Error('user not found');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private userSuspendService: UserSuspendService,
+		private moderationLogService: ModerationLogService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const user = await this.usersRepository.findOneBy({ id: ps.userId });
+
+			if (user == null) {
+				throw new Error('user not found');
+			}
+
+			await this.usersRepository.update(user.id, {
+				isSuspended: false,
+			});
+
+			this.moderationLogService.insertModerationLog(me, 'unsuspend', {
+				targetId: user.id,
+			});
+
+			this.userSuspendService.doPostUnsuspend(user);
+		});
 	}
-
-	await Users.update(user.id, {
-		isSuspended: false,
-	});
-
-	insertModerationLog(me, 'unsuspend', {
-		targetId: user.id,
-	});
-
-	doPostUnsuspend(user);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/update-meta.ts b/packages/backend/src/server/api/endpoints/admin/update-meta.ts
index f14aa41050..968ed4d26d 100644
--- a/packages/backend/src/server/api/endpoints/admin/update-meta.ts
+++ b/packages/backend/src/server/api/endpoints/admin/update-meta.ts
@@ -1,8 +1,10 @@
-import { Meta } from '@/models/entities/meta.js';
-import { insertModerationLog } from '@/services/insert-moderation-log.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import { Meta } from '@/models/entities/Meta.js';
+import { ModerationLogService } from '@/core/ModerationLogService.js';
 import { DB_MAX_NOTE_TEXT_LENGTH } from '@/misc/hard-limits.js';
-import { db } from '@/db/postgre.js';
-import define from '../../define.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -107,340 +109,350 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const set = {} as Partial<Meta>;
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		private moderationLogService: ModerationLogService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const set = {} as Partial<Meta>;
 
-	if (typeof ps.disableRegistration === 'boolean') {
-		set.disableRegistration = ps.disableRegistration;
-	}
-
-	if (typeof ps.disableLocalTimeline === 'boolean') {
-		set.disableLocalTimeline = ps.disableLocalTimeline;
-	}
-
-	if (typeof ps.disableGlobalTimeline === 'boolean') {
-		set.disableGlobalTimeline = ps.disableGlobalTimeline;
-	}
-
-	if (typeof ps.useStarForReactionFallback === 'boolean') {
-		set.useStarForReactionFallback = ps.useStarForReactionFallback;
-	}
+			if (typeof ps.disableRegistration === 'boolean') {
+				set.disableRegistration = ps.disableRegistration;
+			}
 
-	if (Array.isArray(ps.pinnedUsers)) {
-		set.pinnedUsers = ps.pinnedUsers.filter(Boolean);
-	}
-
-	if (Array.isArray(ps.hiddenTags)) {
-		set.hiddenTags = ps.hiddenTags.filter(Boolean);
-	}
+			if (typeof ps.disableLocalTimeline === 'boolean') {
+				set.disableLocalTimeline = ps.disableLocalTimeline;
+			}
 
-	if (Array.isArray(ps.blockedHosts)) {
-		set.blockedHosts = ps.blockedHosts.filter(Boolean);
-	}
+			if (typeof ps.disableGlobalTimeline === 'boolean') {
+				set.disableGlobalTimeline = ps.disableGlobalTimeline;
+			}
 
-	if (ps.themeColor !== undefined) {
-		set.themeColor = ps.themeColor;
-	}
-
-	if (ps.mascotImageUrl !== undefined) {
-		set.mascotImageUrl = ps.mascotImageUrl;
-	}
+			if (typeof ps.useStarForReactionFallback === 'boolean') {
+				set.useStarForReactionFallback = ps.useStarForReactionFallback;
+			}
 
-	if (ps.bannerUrl !== undefined) {
-		set.bannerUrl = ps.bannerUrl;
-	}
-
-	if (ps.iconUrl !== undefined) {
-		set.iconUrl = ps.iconUrl;
-	}
-
-	if (ps.backgroundImageUrl !== undefined) {
-		set.backgroundImageUrl = ps.backgroundImageUrl;
-	}
-
-	if (ps.logoImageUrl !== undefined) {
-		set.logoImageUrl = ps.logoImageUrl;
-	}
-
-	if (ps.name !== undefined) {
-		set.name = ps.name;
-	}
-
-	if (ps.description !== undefined) {
-		set.description = ps.description;
-	}
-
-	if (ps.defaultLightTheme !== undefined) {
-		set.defaultLightTheme = ps.defaultLightTheme;
-	}
-
-	if (ps.defaultDarkTheme !== undefined) {
-		set.defaultDarkTheme = ps.defaultDarkTheme;
-	}
-
-	if (ps.localDriveCapacityMb !== undefined) {
-		set.localDriveCapacityMb = ps.localDriveCapacityMb;
-	}
-
-	if (ps.remoteDriveCapacityMb !== undefined) {
-		set.remoteDriveCapacityMb = ps.remoteDriveCapacityMb;
-	}
-
-	if (ps.cacheRemoteFiles !== undefined) {
-		set.cacheRemoteFiles = ps.cacheRemoteFiles;
-	}
-
-	if (ps.emailRequiredForSignup !== undefined) {
-		set.emailRequiredForSignup = ps.emailRequiredForSignup;
-	}
-
-	if (ps.enableHcaptcha !== undefined) {
-		set.enableHcaptcha = ps.enableHcaptcha;
-	}
-
-	if (ps.hcaptchaSiteKey !== undefined) {
-		set.hcaptchaSiteKey = ps.hcaptchaSiteKey;
-	}
-
-	if (ps.hcaptchaSecretKey !== undefined) {
-		set.hcaptchaSecretKey = ps.hcaptchaSecretKey;
-	}
-
-	if (ps.enableRecaptcha !== undefined) {
-		set.enableRecaptcha = ps.enableRecaptcha;
-	}
-
-	if (ps.recaptchaSiteKey !== undefined) {
-		set.recaptchaSiteKey = ps.recaptchaSiteKey;
-	}
-
-	if (ps.recaptchaSecretKey !== undefined) {
-		set.recaptchaSecretKey = ps.recaptchaSecretKey;
-	}
-
-	if (ps.sensitiveMediaDetection !== undefined) {
-		set.sensitiveMediaDetection = ps.sensitiveMediaDetection;
-	}
-
-	if (ps.sensitiveMediaDetectionSensitivity !== undefined) {
-		set.sensitiveMediaDetectionSensitivity = ps.sensitiveMediaDetectionSensitivity;
-	}
+			if (Array.isArray(ps.pinnedUsers)) {
+				set.pinnedUsers = ps.pinnedUsers.filter(Boolean);
+			}
 
-	if (ps.setSensitiveFlagAutomatically !== undefined) {
-		set.setSensitiveFlagAutomatically = ps.setSensitiveFlagAutomatically;
-	}
+			if (Array.isArray(ps.hiddenTags)) {
+				set.hiddenTags = ps.hiddenTags.filter(Boolean);
+			}
 
-	if (ps.enableSensitiveMediaDetectionForVideos !== undefined) {
-		set.enableSensitiveMediaDetectionForVideos = ps.enableSensitiveMediaDetectionForVideos;
-	}
+			if (Array.isArray(ps.blockedHosts)) {
+				set.blockedHosts = ps.blockedHosts.filter(Boolean);
+			}
 
-	if (ps.proxyAccountId !== undefined) {
-		set.proxyAccountId = ps.proxyAccountId;
-	}
+			if (ps.themeColor !== undefined) {
+				set.themeColor = ps.themeColor;
+			}
 
-	if (ps.maintainerName !== undefined) {
-		set.maintainerName = ps.maintainerName;
-	}
+			if (ps.mascotImageUrl !== undefined) {
+				set.mascotImageUrl = ps.mascotImageUrl;
+			}
 
-	if (ps.maintainerEmail !== undefined) {
-		set.maintainerEmail = ps.maintainerEmail;
-	}
+			if (ps.bannerUrl !== undefined) {
+				set.bannerUrl = ps.bannerUrl;
+			}
 
-	if (Array.isArray(ps.langs)) {
-		set.langs = ps.langs.filter(Boolean);
-	}
+			if (ps.iconUrl !== undefined) {
+				set.iconUrl = ps.iconUrl;
+			}
 
-	if (Array.isArray(ps.pinnedPages)) {
-		set.pinnedPages = ps.pinnedPages.filter(Boolean);
-	}
+			if (ps.backgroundImageUrl !== undefined) {
+				set.backgroundImageUrl = ps.backgroundImageUrl;
+			}
 
-	if (ps.pinnedClipId !== undefined) {
-		set.pinnedClipId = ps.pinnedClipId;
-	}
+			if (ps.logoImageUrl !== undefined) {
+				set.logoImageUrl = ps.logoImageUrl;
+			}
 
-	if (ps.summalyProxy !== undefined) {
-		set.summalyProxy = ps.summalyProxy;
-	}
+			if (ps.name !== undefined) {
+				set.name = ps.name;
+			}
 
-	if (ps.enableTwitterIntegration !== undefined) {
-		set.enableTwitterIntegration = ps.enableTwitterIntegration;
-	}
+			if (ps.description !== undefined) {
+				set.description = ps.description;
+			}
 
-	if (ps.twitterConsumerKey !== undefined) {
-		set.twitterConsumerKey = ps.twitterConsumerKey;
-	}
+			if (ps.defaultLightTheme !== undefined) {
+				set.defaultLightTheme = ps.defaultLightTheme;
+			}
 
-	if (ps.twitterConsumerSecret !== undefined) {
-		set.twitterConsumerSecret = ps.twitterConsumerSecret;
-	}
+			if (ps.defaultDarkTheme !== undefined) {
+				set.defaultDarkTheme = ps.defaultDarkTheme;
+			}
 
-	if (ps.enableGithubIntegration !== undefined) {
-		set.enableGithubIntegration = ps.enableGithubIntegration;
-	}
+			if (ps.localDriveCapacityMb !== undefined) {
+				set.localDriveCapacityMb = ps.localDriveCapacityMb;
+			}
 
-	if (ps.githubClientId !== undefined) {
-		set.githubClientId = ps.githubClientId;
-	}
+			if (ps.remoteDriveCapacityMb !== undefined) {
+				set.remoteDriveCapacityMb = ps.remoteDriveCapacityMb;
+			}
 
-	if (ps.githubClientSecret !== undefined) {
-		set.githubClientSecret = ps.githubClientSecret;
-	}
+			if (ps.cacheRemoteFiles !== undefined) {
+				set.cacheRemoteFiles = ps.cacheRemoteFiles;
+			}
 
-	if (ps.enableDiscordIntegration !== undefined) {
-		set.enableDiscordIntegration = ps.enableDiscordIntegration;
-	}
+			if (ps.emailRequiredForSignup !== undefined) {
+				set.emailRequiredForSignup = ps.emailRequiredForSignup;
+			}
 
-	if (ps.discordClientId !== undefined) {
-		set.discordClientId = ps.discordClientId;
-	}
+			if (ps.enableHcaptcha !== undefined) {
+				set.enableHcaptcha = ps.enableHcaptcha;
+			}
 
-	if (ps.discordClientSecret !== undefined) {
-		set.discordClientSecret = ps.discordClientSecret;
-	}
+			if (ps.hcaptchaSiteKey !== undefined) {
+				set.hcaptchaSiteKey = ps.hcaptchaSiteKey;
+			}
 
-	if (ps.enableEmail !== undefined) {
-		set.enableEmail = ps.enableEmail;
-	}
+			if (ps.hcaptchaSecretKey !== undefined) {
+				set.hcaptchaSecretKey = ps.hcaptchaSecretKey;
+			}
 
-	if (ps.email !== undefined) {
-		set.email = ps.email;
-	}
+			if (ps.enableRecaptcha !== undefined) {
+				set.enableRecaptcha = ps.enableRecaptcha;
+			}
 
-	if (ps.smtpSecure !== undefined) {
-		set.smtpSecure = ps.smtpSecure;
-	}
+			if (ps.recaptchaSiteKey !== undefined) {
+				set.recaptchaSiteKey = ps.recaptchaSiteKey;
+			}
 
-	if (ps.smtpHost !== undefined) {
-		set.smtpHost = ps.smtpHost;
-	}
+			if (ps.recaptchaSecretKey !== undefined) {
+				set.recaptchaSecretKey = ps.recaptchaSecretKey;
+			}
 
-	if (ps.smtpPort !== undefined) {
-		set.smtpPort = ps.smtpPort;
-	}
+			if (ps.sensitiveMediaDetection !== undefined) {
+				set.sensitiveMediaDetection = ps.sensitiveMediaDetection;
+			}
 
-	if (ps.smtpUser !== undefined) {
-		set.smtpUser = ps.smtpUser;
-	}
+			if (ps.sensitiveMediaDetectionSensitivity !== undefined) {
+				set.sensitiveMediaDetectionSensitivity = ps.sensitiveMediaDetectionSensitivity;
+			}
 
-	if (ps.smtpPass !== undefined) {
-		set.smtpPass = ps.smtpPass;
-	}
+			if (ps.setSensitiveFlagAutomatically !== undefined) {
+				set.setSensitiveFlagAutomatically = ps.setSensitiveFlagAutomatically;
+			}
 
-	if (ps.errorImageUrl !== undefined) {
-		set.errorImageUrl = ps.errorImageUrl;
-	}
+			if (ps.enableSensitiveMediaDetectionForVideos !== undefined) {
+				set.enableSensitiveMediaDetectionForVideos = ps.enableSensitiveMediaDetectionForVideos;
+			}
 
-	if (ps.enableServiceWorker !== undefined) {
-		set.enableServiceWorker = ps.enableServiceWorker;
-	}
+			if (ps.proxyAccountId !== undefined) {
+				set.proxyAccountId = ps.proxyAccountId;
+			}
 
-	if (ps.swPublicKey !== undefined) {
-		set.swPublicKey = ps.swPublicKey;
-	}
+			if (ps.maintainerName !== undefined) {
+				set.maintainerName = ps.maintainerName;
+			}
 
-	if (ps.swPrivateKey !== undefined) {
-		set.swPrivateKey = ps.swPrivateKey;
-	}
+			if (ps.maintainerEmail !== undefined) {
+				set.maintainerEmail = ps.maintainerEmail;
+			}
 
-	if (ps.tosUrl !== undefined) {
-		set.ToSUrl = ps.tosUrl;
-	}
+			if (Array.isArray(ps.langs)) {
+				set.langs = ps.langs.filter(Boolean);
+			}
 
-	if (ps.repositoryUrl !== undefined) {
-		set.repositoryUrl = ps.repositoryUrl;
-	}
+			if (Array.isArray(ps.pinnedPages)) {
+				set.pinnedPages = ps.pinnedPages.filter(Boolean);
+			}
 
-	if (ps.feedbackUrl !== undefined) {
-		set.feedbackUrl = ps.feedbackUrl;
-	}
+			if (ps.pinnedClipId !== undefined) {
+				set.pinnedClipId = ps.pinnedClipId;
+			}
 
-	if (ps.useObjectStorage !== undefined) {
-		set.useObjectStorage = ps.useObjectStorage;
-	}
+			if (ps.summalyProxy !== undefined) {
+				set.summalyProxy = ps.summalyProxy;
+			}
 
-	if (ps.objectStorageBaseUrl !== undefined) {
-		set.objectStorageBaseUrl = ps.objectStorageBaseUrl;
-	}
+			if (ps.enableTwitterIntegration !== undefined) {
+				set.enableTwitterIntegration = ps.enableTwitterIntegration;
+			}
 
-	if (ps.objectStorageBucket !== undefined) {
-		set.objectStorageBucket = ps.objectStorageBucket;
-	}
+			if (ps.twitterConsumerKey !== undefined) {
+				set.twitterConsumerKey = ps.twitterConsumerKey;
+			}
 
-	if (ps.objectStoragePrefix !== undefined) {
-		set.objectStoragePrefix = ps.objectStoragePrefix;
-	}
+			if (ps.twitterConsumerSecret !== undefined) {
+				set.twitterConsumerSecret = ps.twitterConsumerSecret;
+			}
 
-	if (ps.objectStorageEndpoint !== undefined) {
-		set.objectStorageEndpoint = ps.objectStorageEndpoint;
-	}
+			if (ps.enableGithubIntegration !== undefined) {
+				set.enableGithubIntegration = ps.enableGithubIntegration;
+			}
 
-	if (ps.objectStorageRegion !== undefined) {
-		set.objectStorageRegion = ps.objectStorageRegion;
-	}
+			if (ps.githubClientId !== undefined) {
+				set.githubClientId = ps.githubClientId;
+			}
 
-	if (ps.objectStoragePort !== undefined) {
-		set.objectStoragePort = ps.objectStoragePort;
-	}
+			if (ps.githubClientSecret !== undefined) {
+				set.githubClientSecret = ps.githubClientSecret;
+			}
 
-	if (ps.objectStorageAccessKey !== undefined) {
-		set.objectStorageAccessKey = ps.objectStorageAccessKey;
-	}
+			if (ps.enableDiscordIntegration !== undefined) {
+				set.enableDiscordIntegration = ps.enableDiscordIntegration;
+			}
 
-	if (ps.objectStorageSecretKey !== undefined) {
-		set.objectStorageSecretKey = ps.objectStorageSecretKey;
-	}
+			if (ps.discordClientId !== undefined) {
+				set.discordClientId = ps.discordClientId;
+			}
 
-	if (ps.objectStorageUseSSL !== undefined) {
-		set.objectStorageUseSSL = ps.objectStorageUseSSL;
-	}
+			if (ps.discordClientSecret !== undefined) {
+				set.discordClientSecret = ps.discordClientSecret;
+			}
 
-	if (ps.objectStorageUseProxy !== undefined) {
-		set.objectStorageUseProxy = ps.objectStorageUseProxy;
-	}
+			if (ps.enableEmail !== undefined) {
+				set.enableEmail = ps.enableEmail;
+			}
 
-	if (ps.objectStorageSetPublicRead !== undefined) {
-		set.objectStorageSetPublicRead = ps.objectStorageSetPublicRead;
-	}
+			if (ps.email !== undefined) {
+				set.email = ps.email;
+			}
 
-	if (ps.objectStorageS3ForcePathStyle !== undefined) {
-		set.objectStorageS3ForcePathStyle = ps.objectStorageS3ForcePathStyle;
-	}
+			if (ps.smtpSecure !== undefined) {
+				set.smtpSecure = ps.smtpSecure;
+			}
 
-	if (ps.deeplAuthKey !== undefined) {
-		if (ps.deeplAuthKey === '') {
-			set.deeplAuthKey = null;
-		} else {
-			set.deeplAuthKey = ps.deeplAuthKey;
-		}
-	}
+			if (ps.smtpHost !== undefined) {
+				set.smtpHost = ps.smtpHost;
+			}
 
-	if (ps.deeplIsPro !== undefined) {
-		set.deeplIsPro = ps.deeplIsPro;
-	}
+			if (ps.smtpPort !== undefined) {
+				set.smtpPort = ps.smtpPort;
+			}
 
-	if (ps.enableIpLogging !== undefined) {
-		set.enableIpLogging = ps.enableIpLogging;
-	}
+			if (ps.smtpUser !== undefined) {
+				set.smtpUser = ps.smtpUser;
+			}
 
-	if (ps.enableActiveEmailValidation !== undefined) {
-		set.enableActiveEmailValidation = ps.enableActiveEmailValidation;
-	}
+			if (ps.smtpPass !== undefined) {
+				set.smtpPass = ps.smtpPass;
+			}
 
-	await db.transaction(async transactionalEntityManager => {
-		const metas = await transactionalEntityManager.find(Meta, {
-			order: {
-				id: 'DESC',
-			},
+			if (ps.errorImageUrl !== undefined) {
+				set.errorImageUrl = ps.errorImageUrl;
+			}
+
+			if (ps.enableServiceWorker !== undefined) {
+				set.enableServiceWorker = ps.enableServiceWorker;
+			}
+
+			if (ps.swPublicKey !== undefined) {
+				set.swPublicKey = ps.swPublicKey;
+			}
+
+			if (ps.swPrivateKey !== undefined) {
+				set.swPrivateKey = ps.swPrivateKey;
+			}
+
+			if (ps.tosUrl !== undefined) {
+				set.ToSUrl = ps.tosUrl;
+			}
+
+			if (ps.repositoryUrl !== undefined) {
+				set.repositoryUrl = ps.repositoryUrl;
+			}
+
+			if (ps.feedbackUrl !== undefined) {
+				set.feedbackUrl = ps.feedbackUrl;
+			}
+
+			if (ps.useObjectStorage !== undefined) {
+				set.useObjectStorage = ps.useObjectStorage;
+			}
+
+			if (ps.objectStorageBaseUrl !== undefined) {
+				set.objectStorageBaseUrl = ps.objectStorageBaseUrl;
+			}
+
+			if (ps.objectStorageBucket !== undefined) {
+				set.objectStorageBucket = ps.objectStorageBucket;
+			}
+
+			if (ps.objectStoragePrefix !== undefined) {
+				set.objectStoragePrefix = ps.objectStoragePrefix;
+			}
+
+			if (ps.objectStorageEndpoint !== undefined) {
+				set.objectStorageEndpoint = ps.objectStorageEndpoint;
+			}
+
+			if (ps.objectStorageRegion !== undefined) {
+				set.objectStorageRegion = ps.objectStorageRegion;
+			}
+
+			if (ps.objectStoragePort !== undefined) {
+				set.objectStoragePort = ps.objectStoragePort;
+			}
+
+			if (ps.objectStorageAccessKey !== undefined) {
+				set.objectStorageAccessKey = ps.objectStorageAccessKey;
+			}
+
+			if (ps.objectStorageSecretKey !== undefined) {
+				set.objectStorageSecretKey = ps.objectStorageSecretKey;
+			}
+
+			if (ps.objectStorageUseSSL !== undefined) {
+				set.objectStorageUseSSL = ps.objectStorageUseSSL;
+			}
+
+			if (ps.objectStorageUseProxy !== undefined) {
+				set.objectStorageUseProxy = ps.objectStorageUseProxy;
+			}
+
+			if (ps.objectStorageSetPublicRead !== undefined) {
+				set.objectStorageSetPublicRead = ps.objectStorageSetPublicRead;
+			}
+
+			if (ps.objectStorageS3ForcePathStyle !== undefined) {
+				set.objectStorageS3ForcePathStyle = ps.objectStorageS3ForcePathStyle;
+			}
+
+			if (ps.deeplAuthKey !== undefined) {
+				if (ps.deeplAuthKey === '') {
+					set.deeplAuthKey = null;
+				} else {
+					set.deeplAuthKey = ps.deeplAuthKey;
+				}
+			}
+
+			if (ps.deeplIsPro !== undefined) {
+				set.deeplIsPro = ps.deeplIsPro;
+			}
+
+			if (ps.enableIpLogging !== undefined) {
+				set.enableIpLogging = ps.enableIpLogging;
+			}
+
+			if (ps.enableActiveEmailValidation !== undefined) {
+				set.enableActiveEmailValidation = ps.enableActiveEmailValidation;
+			}
+
+			await this.db.transaction(async transactionalEntityManager => {
+				const metas = await transactionalEntityManager.find(Meta, {
+					order: {
+						id: 'DESC',
+					},
+				});
+
+				const meta = metas[0];
+
+				if (meta) {
+					await transactionalEntityManager.update(Meta, meta.id, set);
+				} else {
+					await transactionalEntityManager.save(Meta, set);
+				}
+			});
+
+			this.moderationLogService.insertModerationLog(me, 'updateMeta');
 		});
-
-		const meta = metas[0];
-
-		if (meta) {
-			await transactionalEntityManager.update(Meta, meta.id, set);
-		} else {
-			await transactionalEntityManager.save(Meta, set);
-		}
-	});
-
-	insertModerationLog(me, 'updateMeta');
-});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/update-user-note.ts b/packages/backend/src/server/api/endpoints/admin/update-user-note.ts
index fa21ab7833..1ea0e6aac4 100644
--- a/packages/backend/src/server/api/endpoints/admin/update-user-note.ts
+++ b/packages/backend/src/server/api/endpoints/admin/update-user-note.ts
@@ -1,5 +1,7 @@
-import { UserProfiles, Users } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserProfilesRepository, UsersRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -18,14 +20,25 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const user = await Users.findOneBy({ id: ps.userId });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	if (user == null) {
-		throw new Error('user not found');
-	}
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const user = await this.usersRepository.findOneBy({ id: ps.userId });
+
+			if (user == null) {
+				throw new Error('user not found');
+			}
 
-	await UserProfiles.update({ userId: user.id }, {
-		moderationNote: ps.text,
-	});
-});
+			await this.userProfilesRepository.update({ userId: user.id }, {
+				moderationNote: ps.text,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/admin/vacuum.ts b/packages/backend/src/server/api/endpoints/admin/vacuum.ts
deleted file mode 100644
index 0546acfacb..0000000000
--- a/packages/backend/src/server/api/endpoints/admin/vacuum.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import define from '../../define.js';
-import { insertModerationLog } from '@/services/insert-moderation-log.js';
-import { db } from '@/db/postgre.js';
-
-export const meta = {
-	tags: ['admin'],
-
-	requireCredential: true,
-	requireModerator: true,
-} as const;
-
-export const paramDef = {
-	type: 'object',
-	properties: {
-		full: { type: 'boolean' },
-		analyze: { type: 'boolean' },
-	},
-	required: ['full', 'analyze'],
-} as const;
-
-// eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const params: string[] = [];
-
-	if (ps.full) {
-		params.push('FULL');
-	}
-
-	if (ps.analyze) {
-		params.push('ANALYZE');
-	}
-
-	db.query('VACUUM ' + params.join(' '));
-
-	insertModerationLog(me, 'vacuum', ps);
-});
diff --git a/packages/backend/src/server/api/endpoints/announcements.ts b/packages/backend/src/server/api/endpoints/announcements.ts
index 23cb93c9a5..aa44dfd5dc 100644
--- a/packages/backend/src/server/api/endpoints/announcements.ts
+++ b/packages/backend/src/server/api/endpoints/announcements.ts
@@ -1,6 +1,8 @@
-import { Announcements, AnnouncementReads } from '@/models/index.js';
-import define from '../define.js';
-import { makePaginationQuery } from '../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { DI } from '@/di-symbols.js';
+import { AnnouncementReadsRepository, AnnouncementsRepository } from '@/models';
 
 export const meta = {
 	tags: ['meta'],
@@ -63,24 +65,37 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = makePaginationQuery(Announcements.createQueryBuilder('announcement'), ps.sinceId, ps.untilId);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.announcementsRepository)
+		private announcementsRepository: AnnouncementsRepository,
 
-	const announcements = await query.take(ps.limit).getMany();
+		@Inject(DI.announcementReadsRepository)
+		private announcementReadsRepository: AnnouncementReadsRepository,
 
-	if (user) {
-		const reads = (await AnnouncementReads.findBy({
-			userId: user.id,
-		})).map(x => x.announcementId);
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.announcementsRepository.createQueryBuilder('announcement'), ps.sinceId, ps.untilId);
 
-		for (const announcement of announcements) {
-			(announcement as any).isRead = reads.includes(announcement.id);
-		}
-	}
+			const announcements = await query.take(ps.limit).getMany();
+
+			if (me) {
+				const reads = (await this.announcementReadsRepository.findBy({
+					userId: me.id,
+				})).map(x => x.announcementId);
 
-	return (ps.withUnreads ? announcements.filter((a: any) => !a.isRead) : announcements).map((a) => ({
-		...a,
-		createdAt: a.createdAt.toISOString(),
-		updatedAt: a.updatedAt?.toISOString() ?? null,
-	}));
-});
+				for (const announcement of announcements) {
+					(announcement as any).isRead = reads.includes(announcement.id);
+				}
+			}
+
+			return (ps.withUnreads ? announcements.filter((a: any) => !a.isRead) : announcements).map((a) => ({
+				...a,
+				createdAt: a.createdAt.toISOString(),
+				updatedAt: a.updatedAt?.toISOString() ?? null,
+			}));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/antennas/create.ts b/packages/backend/src/server/api/endpoints/antennas/create.ts
index 7a4923b944..56bd343d55 100644
--- a/packages/backend/src/server/api/endpoints/antennas/create.ts
+++ b/packages/backend/src/server/api/endpoints/antennas/create.ts
@@ -1,8 +1,11 @@
-import define from '../../define.js';
-import { genId } from '@/misc/gen-id.js';
-import { Antennas, UserLists, UserGroupJoinings } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { IdService } from '@/core/IdService.js';
+import { UserListsRepository, UserGroupJoiningsRepository, AntennasRepository } from '@/models/index.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { AntennaEntityService } from '@/core/entities/AntennaEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { publishInternalEvent } from '@/services/stream.js';
 
 export const meta = {
 	tags: ['antennas'],
@@ -61,48 +64,66 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	let userList;
-	let userGroupJoining;
-
-	if (ps.src === 'list' && ps.userListId) {
-		userList = await UserLists.findOneBy({
-			id: ps.userListId,
-			userId: user.id,
-		});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.antennasRepository)
+		private antennasRepository: AntennasRepository,
 
-		if (userList == null) {
-			throw new ApiError(meta.errors.noSuchUserList);
-		}
-	} else if (ps.src === 'group' && ps.userGroupId) {
-		userGroupJoining = await UserGroupJoinings.findOneBy({
-			userGroupId: ps.userGroupId,
-			userId: user.id,
-		});
+		@Inject(DI.userListsRepository)
+		private userListsRepository: UserListsRepository,
 
-		if (userGroupJoining == null) {
-			throw new ApiError(meta.errors.noSuchUserGroup);
-		}
-	}
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+
+		private antennaEntityService: AntennaEntityService,
+		private idService: IdService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			let userList;
+			let userGroupJoining;
+
+			if (ps.src === 'list' && ps.userListId) {
+				userList = await this.userListsRepository.findOneBy({
+					id: ps.userListId,
+					userId: me.id,
+				});
+
+				if (userList == null) {
+					throw new ApiError(meta.errors.noSuchUserList);
+				}
+			} else if (ps.src === 'group' && ps.userGroupId) {
+				userGroupJoining = await this.userGroupJoiningsRepository.findOneBy({
+					userGroupId: ps.userGroupId,
+					userId: me.id,
+				});
 
-	const antenna = await Antennas.insert({
-		id: genId(),
-		createdAt: new Date(),
-		userId: user.id,
-		name: ps.name,
-		src: ps.src,
-		userListId: userList ? userList.id : null,
-		userGroupJoiningId: userGroupJoining ? userGroupJoining.id : null,
-		keywords: ps.keywords,
-		excludeKeywords: ps.excludeKeywords,
-		users: ps.users,
-		caseSensitive: ps.caseSensitive,
-		withReplies: ps.withReplies,
-		withFile: ps.withFile,
-		notify: ps.notify,
-	}).then(x => Antennas.findOneByOrFail(x.identifiers[0]));
-
-	publishInternalEvent('antennaCreated', antenna);
-
-	return await Antennas.pack(antenna);
-});
+				if (userGroupJoining == null) {
+					throw new ApiError(meta.errors.noSuchUserGroup);
+				}
+			}
+
+			const antenna = await this.antennasRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				userId: me.id,
+				name: ps.name,
+				src: ps.src,
+				userListId: userList ? userList.id : null,
+				userGroupJoiningId: userGroupJoining ? userGroupJoining.id : null,
+				keywords: ps.keywords,
+				excludeKeywords: ps.excludeKeywords,
+				users: ps.users,
+				caseSensitive: ps.caseSensitive,
+				withReplies: ps.withReplies,
+				withFile: ps.withFile,
+				notify: ps.notify,
+			}).then(x => this.antennasRepository.findOneByOrFail(x.identifiers[0]));
+
+			this.globalEventService.publishInternalEvent('antennaCreated', antenna);
+
+			return await this.antennaEntityService.pack(antenna);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/antennas/delete.ts b/packages/backend/src/server/api/endpoints/antennas/delete.ts
index ced34ba313..127aca0c33 100644
--- a/packages/backend/src/server/api/endpoints/antennas/delete.ts
+++ b/packages/backend/src/server/api/endpoints/antennas/delete.ts
@@ -1,7 +1,9 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AntennasRepository } from '@/models/index.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { Antennas } from '@/models/index.js';
-import { publishInternalEvent } from '@/services/stream.js';
 
 export const meta = {
 	tags: ['antennas'],
@@ -28,17 +30,27 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const antenna = await Antennas.findOneBy({
-		id: ps.antennaId,
-		userId: user.id,
-	});
-
-	if (antenna == null) {
-		throw new ApiError(meta.errors.noSuchAntenna);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.antennasRepository)
+		private antennasRepository: AntennasRepository,
+
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const antenna = await this.antennasRepository.findOneBy({
+				id: ps.antennaId,
+				userId: me.id,
+			});
+
+			if (antenna == null) {
+				throw new ApiError(meta.errors.noSuchAntenna);
+			}
+
+			await this.antennasRepository.delete(antenna.id);
+
+			this.globalEventService.publishInternalEvent('antennaDeleted', antenna);
+		});
 	}
-
-	await Antennas.delete(antenna.id);
-
-	publishInternalEvent('antennaDeleted', antenna);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/antennas/list.ts b/packages/backend/src/server/api/endpoints/antennas/list.ts
index c519b452ef..bdc44895cc 100644
--- a/packages/backend/src/server/api/endpoints/antennas/list.ts
+++ b/packages/backend/src/server/api/endpoints/antennas/list.ts
@@ -1,5 +1,8 @@
-import define from '../../define.js';
-import { Antennas } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AntennasRepository } from '@/models/index.js';
+import { AntennaEntityService } from '@/core/entities/AntennaEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['antennas', 'account'],
@@ -26,10 +29,20 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const antennas = await Antennas.findBy({
-		userId: me.id,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.antennasRepository)
+		private antennasRepository: AntennasRepository,
 
-	return await Promise.all(antennas.map(x => Antennas.pack(x)));
-});
+		private antennaEntityService: AntennaEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const antennas = await this.antennasRepository.findBy({
+				userId: me.id,
+			});
+
+			return await Promise.all(antennas.map(x => this.antennaEntityService.pack(x)));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/antennas/notes.ts b/packages/backend/src/server/api/endpoints/antennas/notes.ts
index 8aac55b4a0..eba42afe56 100644
--- a/packages/backend/src/server/api/endpoints/antennas/notes.ts
+++ b/packages/backend/src/server/api/endpoints/antennas/notes.ts
@@ -1,11 +1,11 @@
-import define from '../../define.js';
-import readNote from '@/services/note/read.js';
-import { Antennas, Notes, AntennaNotes } from '@/models/index.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 { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { NotesRepository, AntennaNotesRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteReadService } from '@/core/NoteReadService.js';
+import { DI } from '@/di-symbols.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
 import { ApiError } from '../../error.js';
-import { generateBlockedUserQuery } from '../../common/generate-block-query.js';
 
 export const meta = {
 	tags: ['antennas', 'account', 'notes'],
@@ -47,43 +47,61 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const antenna = await Antennas.findOneBy({
-		id: ps.antennaId,
-		userId: user.id,
-	});
-
-	if (antenna == null) {
-		throw new ApiError(meta.errors.noSuchAntenna);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
 
-	const query = makePaginationQuery(Notes.createQueryBuilder('note'),
-			ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
-		.innerJoin(AntennaNotes.metadata.targetName, 'antennaNote', 'antennaNote.noteId = note.id')
-		.innerJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner')
-		.andWhere('antennaNote.antennaId = :antennaId', { antennaId: antenna.id });
-
-	generateVisibilityQuery(query, user);
-	generateMutedUserQuery(query, user);
-	generateBlockedUserQuery(query, user);
-
-	const notes = await query
-		.take(ps.limit)
-		.getMany();
-
-	if (notes.length > 0) {
-		readNote(user.id, notes);
-	}
+		@Inject(DI.antennasRepository)
+		private antennasRepository: AntennasRepository,
+
+		@Inject(DI.antennaNotesRepository)
+		private antennaNotesRepository: AntennaNotesRepository,
+
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+		private noteReadService: NoteReadService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const antenna = await this.antennasRepository.findOneBy({
+				id: ps.antennaId,
+				userId: me.id,
+			});
+
+			if (antenna == null) {
+				throw new ApiError(meta.errors.noSuchAntenna);
+			}
 
-	return await Notes.packMany(notes, user);
-});
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'),
+				ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
+				.innerJoin(this.antennaNotesRepository.metadata.targetName, 'antennaNote', 'antennaNote.noteId = note.id')
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner')
+				.andWhere('antennaNote.antennaId = :antennaId', { antennaId: antenna.id });
+
+			this.queryService.generateVisibilityQuery(query, me);
+			this.queryService.generateMutedUserQuery(query, me);
+			this.queryService.generateBlockedUserQuery(query, me);
+
+			const notes = await query
+				.take(ps.limit)
+				.getMany();
+
+			if (notes.length > 0) {
+				this.noteReadService.read(me.id, notes);
+			}
+
+			return await this.noteEntityService.packMany(notes, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/antennas/show.ts b/packages/backend/src/server/api/endpoints/antennas/show.ts
index dd693789cb..8bd8ad124d 100644
--- a/packages/backend/src/server/api/endpoints/antennas/show.ts
+++ b/packages/backend/src/server/api/endpoints/antennas/show.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AntennasRepository } from '@/models/index.js';
+import { AntennaEntityService } from '@/core/entities/AntennaEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { Antennas } from '@/models/index.js';
 
 export const meta = {
 	tags: ['antennas', 'account'],
@@ -33,16 +36,26 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	// Fetch the antenna
-	const antenna = await Antennas.findOneBy({
-		id: ps.antennaId,
-		userId: me.id,
-	});
-
-	if (antenna == null) {
-		throw new ApiError(meta.errors.noSuchAntenna);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.antennasRepository)
+		private antennasRepository: AntennasRepository,
+
+		private antennaEntityService: AntennaEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch the antenna
+			const antenna = await this.antennasRepository.findOneBy({
+				id: ps.antennaId,
+				userId: me.id,
+			});
+
+			if (antenna == null) {
+				throw new ApiError(meta.errors.noSuchAntenna);
+			}
+
+			return await this.antennaEntityService.pack(antenna);
+		});
 	}
-
-	return await Antennas.pack(antenna);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/antennas/update.ts b/packages/backend/src/server/api/endpoints/antennas/update.ts
index edfedc1752..59bba04ee1 100644
--- a/packages/backend/src/server/api/endpoints/antennas/update.ts
+++ b/packages/backend/src/server/api/endpoints/antennas/update.ts
@@ -1,7 +1,10 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AntennasRepository, UserListsRepository, UserGroupJoiningsRepository } from '@/models/index.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { AntennaEntityService } from '@/core/entities/AntennaEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { Antennas, UserLists, UserGroupJoinings } from '@/models/index.js';
-import { publishInternalEvent } from '@/services/stream.js';
 
 export const meta = {
 	tags: ['antennas'],
@@ -67,55 +70,72 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Fetch the antenna
-	const antenna = await Antennas.findOneBy({
-		id: ps.antennaId,
-		userId: user.id,
-	});
-
-	if (antenna == null) {
-		throw new ApiError(meta.errors.noSuchAntenna);
-	}
-
-	let userList;
-	let userGroupJoining;
-
-	if (ps.src === 'list' && ps.userListId) {
-		userList = await UserLists.findOneBy({
-			id: ps.userListId,
-			userId: user.id,
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.antennasRepository)
+		private antennasRepository: AntennasRepository,
+
+		@Inject(DI.userListsRepository)
+		private userListsRepository: UserListsRepository,
+
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+		
+		private antennaEntityService: AntennaEntityService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch the antenna
+			const antenna = await this.antennasRepository.findOneBy({
+				id: ps.antennaId,
+				userId: me.id,
+			});
+
+			if (antenna == null) {
+				throw new ApiError(meta.errors.noSuchAntenna);
+			}
+
+			let userList;
+			let userGroupJoining;
+
+			if (ps.src === 'list' && ps.userListId) {
+				userList = await this.userListsRepository.findOneBy({
+					id: ps.userListId,
+					userId: me.id,
+				});
+
+				if (userList == null) {
+					throw new ApiError(meta.errors.noSuchUserList);
+				}
+			} else if (ps.src === 'group' && ps.userGroupId) {
+				userGroupJoining = await this.userGroupJoiningsRepository.findOneBy({
+					userGroupId: ps.userGroupId,
+					userId: me.id,
+				});
+
+				if (userGroupJoining == null) {
+					throw new ApiError(meta.errors.noSuchUserGroup);
+				}
+			}
+
+			await this.antennasRepository.update(antenna.id, {
+				name: ps.name,
+				src: ps.src,
+				userListId: userList ? userList.id : null,
+				userGroupJoiningId: userGroupJoining ? userGroupJoining.id : null,
+				keywords: ps.keywords,
+				excludeKeywords: ps.excludeKeywords,
+				users: ps.users,
+				caseSensitive: ps.caseSensitive,
+				withReplies: ps.withReplies,
+				withFile: ps.withFile,
+				notify: ps.notify,
+			});
+
+			this.globalEventService.publishInternalEvent('antennaUpdated', await this.antennasRepository.findOneByOrFail({ id: antenna.id }));
+
+			return await this.antennaEntityService.pack(antenna.id);
 		});
-
-		if (userList == null) {
-			throw new ApiError(meta.errors.noSuchUserList);
-		}
-	} else if (ps.src === 'group' && ps.userGroupId) {
-		userGroupJoining = await UserGroupJoinings.findOneBy({
-			userGroupId: ps.userGroupId,
-			userId: user.id,
-		});
-
-		if (userGroupJoining == null) {
-			throw new ApiError(meta.errors.noSuchUserGroup);
-		}
 	}
-
-	await Antennas.update(antenna.id, {
-		name: ps.name,
-		src: ps.src,
-		userListId: userList ? userList.id : null,
-		userGroupJoiningId: userGroupJoining ? userGroupJoining.id : null,
-		keywords: ps.keywords,
-		excludeKeywords: ps.excludeKeywords,
-		users: ps.users,
-		caseSensitive: ps.caseSensitive,
-		withReplies: ps.withReplies,
-		withFile: ps.withFile,
-		notify: ps.notify,
-	});
-
-	publishInternalEvent('antennaUpdated', await Antennas.findOneByOrFail({ id: antenna.id }));
-
-	return await Antennas.pack(antenna.id);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/ap/get.ts b/packages/backend/src/server/api/endpoints/ap/get.ts
index 0cbe7ebc67..3d4c85e50b 100644
--- a/packages/backend/src/server/api/endpoints/ap/get.ts
+++ b/packages/backend/src/server/api/endpoints/ap/get.ts
@@ -1,7 +1,8 @@
-import define from '../../define.js';
-import Resolver from '@/remote/activitypub/resolver.js';
-import { ApiError } from '../../error.js';
+import { Inject, Injectable } from '@nestjs/common';
 import ms from 'ms';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ApResolverService } from '@/core/remote/activitypub/ApResolverService.js';
+import { ApiError } from '../../error.js';
 
 export const meta = {
 	tags: ['federation'],
@@ -31,8 +32,15 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const resolver = new Resolver();
-	const object = await resolver.resolve(ps.uri);
-	return object;
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private apResolverService: ApResolverService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const resolver = this.apResolverService.createResolver();
+			const object = await resolver.resolve(ps.uri);
+			return object;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/ap/show.ts b/packages/backend/src/server/api/endpoints/ap/show.ts
index 6442a1412c..eaf93ee977 100644
--- a/packages/backend/src/server/api/endpoints/ap/show.ts
+++ b/packages/backend/src/server/api/endpoints/ap/show.ts
@@ -1,18 +1,21 @@
-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 { CacheableLocalUser, User } from '@/models/entities/user.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { isActor, isPost, getApId } from '@/remote/activitypub/type.js';
+import { Inject, Injectable } from '@nestjs/common';
 import ms from 'ms';
-import { SchemaType } from '@/misc/schema.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository, NotesRepository } from '@/models/index.js';
+import type { Note } from '@/models/entities/Note.js';
+import type { CacheableLocalUser, User } from '@/models/entities/User.js';
+import { isActor, isPost, getApId } from '@/core/remote/activitypub/type.js';
+import type { SchemaType } from '@/misc/schema.js';
+import { ApResolverService } from '@/core/remote/activitypub/ApResolverService.js';
+import { ApDbResolverService } from '@/core/remote/activitypub/ApDbResolverService.js';
+import { MetaService } from '@/core/MetaService.js';
+import { ApPersonService } from '@/core/remote/activitypub/models/ApPersonService.js';
+import { ApNoteService } from '@/core/remote/activitypub/models/ApNoteService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { DI } from '@/di-symbols.js';
+import { ApiError } from '../../error.js';
 
 export const meta = {
 	tags: ['federation'],
@@ -47,8 +50,8 @@ export const meta = {
 						type: 'object',
 						optional: false, nullable: false,
 						ref: 'UserDetailedNotMe',
-					}
-				}
+					},
+				},
 			},
 			{
 				type: 'object',
@@ -62,9 +65,9 @@ export const meta = {
 						type: 'object',
 						optional: false, nullable: false,
 						ref: 'Note',
-					}
-				}
-			}
+					},
+				},
+			},
 		],
 	},
 } as const;
@@ -78,70 +81,88 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const object = await fetchAny(ps.uri, me);
-	if (object) {
-		return object;
-	} else {
-		throw new ApiError(meta.errors.noSuchObject);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		private utilityService: UtilityService,
+		private userEntityService: UserEntityService,
+		private noteEntityService: NoteEntityService,
+		private metaService: MetaService,
+		private apResolverService: ApResolverService,
+		private apDbResolverService: ApDbResolverService,
+		private apPersonService: ApPersonService,
+		private apNoteService: ApNoteService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const object = await this.#fetchAny(ps.uri, me);
+			if (object) {
+				return object;
+			} else {
+				throw new ApiError(meta.errors.noSuchObject);
+			}
+		});
 	}
-});
 
-/***
- * URIからUserかNoteを解決する
- */
-async function fetchAny(uri: string, me: CacheableLocalUser | null | undefined): Promise<SchemaType<typeof meta['res']> | null> {
+	/***
+	 * URIからUserかNoteを解決する
+	 */
+	async #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;
-
-	const dbResolver = new DbResolver();
-
-	let local = await mergePack(me, ...await Promise.all([
-		dbResolver.getUserFromApId(uri),
-		dbResolver.getNoteFromApId(uri),
-	]));
-	if (local != null) return local;
-
-	// リモートから一旦オブジェクトフェッチ
-	const resolver = new Resolver();
-	const object = await resolver.resolve(uri) as any;
-
-	// /@user のような正規id以外で取得できるURIが指定されていた場合、ここで初めて正規URIが確定する
-	// これはDBに存在する可能性があるため再度DB検索
-	if (uri !== object.id) {
-		local = await mergePack(me, ...await Promise.all([
-			dbResolver.getUserFromApId(object.id),
-			dbResolver.getNoteFromApId(object.id),
+		const fetchedMeta = await this.metaService.fetch();
+		if (fetchedMeta.blockedHosts.includes(this.utilityService.extractDbHost(uri))) return null;
+
+		let local = await this.#mergePack(me, ...await Promise.all([
+			this.apDbResolverService.getUserFromApId(uri),
+			this.apDbResolverService.getNoteFromApId(uri),
 		]));
 		if (local != null) return local;
-	}
 
-	return await mergePack(
-		me,
-		isActor(object) ? await createPerson(getApId(object)) : null,
-		isPost(object) ? await createNote(getApId(object), undefined, true) : null,
-	);
-}
+		// リモートから一旦オブジェクトフェッチ
+		const resolver = this.apResolverService.createResolver();
+		const object = await resolver.resolve(uri) as any;
+
+		// /@user のような正規id以外で取得できるURIが指定されていた場合、ここで初めて正規URIが確定する
+		// これはDBに存在する可能性があるため再度DB検索
+		if (uri !== object.id) {
+			local = await this.#mergePack(me, ...await Promise.all([
+				this.apDbResolverService.getUserFromApId(object.id),
+				this.apDbResolverService.getNoteFromApId(object.id),
+			]));
+			if (local != null) return local;
+		}
 
-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, me, { detail: true }),
-		};
-	} else if (note != null) {
-		try {
-			const object = await Notes.pack(note, me, { detail: true });
+		return await this.#mergePack(
+			me,
+			isActor(object) ? await this.apPersonService.createPerson(getApId(object)) : null,
+			isPost(object) ? await this.apNoteService.createNote(getApId(object), undefined, true) : null,
+		);
+	}
 
+	async #mergePack(me: CacheableLocalUser | null | undefined, user: User | null | undefined, note: Note | null | undefined): Promise<SchemaType<typeof meta.res> | null> {
+		if (user != null) {
 			return {
-				type: 'Note',
-				object,
+				type: 'User',
+				object: await this.userEntityService.pack(user, me, { detail: true }),
 			};
-		} catch (e) {
-			return null;
+		} else if (note != null) {
+			try {
+				const object = await this.noteEntityService.pack(note, me, { detail: true });
+
+				return {
+					type: 'Note',
+					object,
+				};
+			} catch (e) {
+				return null;
+			}
 		}
-	}
 
-	return null;
+		return null;
+	}
 }
diff --git a/packages/backend/src/server/api/endpoints/app/create.ts b/packages/backend/src/server/api/endpoints/app/create.ts
index a0a7350822..f52d18f7fe 100644
--- a/packages/backend/src/server/api/endpoints/app/create.ts
+++ b/packages/backend/src/server/api/endpoints/app/create.ts
@@ -1,8 +1,11 @@
-import define from '../../define.js';
-import { Apps } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { unique } from '@/prelude/array.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AppsRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { unique } from '@/misc/prelude/array.js';
 import { secureRndstr } from '@/misc/secure-rndstr.js';
+import { AppEntityService } from '@/core/entities/AppEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['app'],
@@ -30,27 +33,38 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Generate secret
-	const secret = secureRndstr(32, true);
-
-	// for backward compatibility
-	const permission = unique(ps.permission.map(v => v.replace(/^(.+)(\/|-)(read|write)$/, '$3:$1')));
-
-	// Create account
-	const app = await Apps.insert({
-		id: genId(),
-		createdAt: new Date(),
-		userId: user ? user.id : null,
-		name: ps.name,
-		description: ps.description,
-		permission,
-		callbackUrl: ps.callbackUrl,
-		secret: secret,
-	}).then(x => Apps.findOneByOrFail(x.identifiers[0]));
-
-	return await Apps.pack(app, null, {
-		detail: true,
-		includeSecret: true,
-	});
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.appsRepository)
+		private appsRepository: AppsRepository,
+
+		private appEntityService: AppEntityService,
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Generate secret
+			const secret = secureRndstr(32, true);
+
+			// for backward compatibility
+			const permission = unique(ps.permission.map(v => v.replace(/^(.+)(\/|-)(read|write)$/, '$3:$1')));
+
+			// Create account
+			const app = await this.appsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				userId: me ? me.id : null,
+				name: ps.name,
+				description: ps.description,
+				permission,
+				callbackUrl: ps.callbackUrl,
+				secret: secret,
+			}).then(x => this.appsRepository.findOneByOrFail(x.identifiers[0]));
+
+			return await this.appEntityService.pack(app, null, {
+				detail: true,
+				includeSecret: true,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/app/show.ts b/packages/backend/src/server/api/endpoints/app/show.ts
index 451969d971..f94fed5344 100644
--- a/packages/backend/src/server/api/endpoints/app/show.ts
+++ b/packages/backend/src/server/api/endpoints/app/show.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AppsRepository } from '@/models/index.js';
+import { AppEntityService } from '@/core/entities/AppEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { Apps } from '@/models/index.js';
 
 export const meta = {
 	tags: ['app'],
@@ -29,18 +32,28 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user, token) => {
-	const isSecure = user != null && token == null;
-
-	// Lookup app
-	const ap = await Apps.findOneBy({ id: ps.appId });
-
-	if (ap == null) {
-		throw new ApiError(meta.errors.noSuchApp);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.appsRepository)
+		private appsRepository: AppsRepository,
+
+		private appEntityService: AppEntityService,
+	) {
+		super(meta, paramDef, async (ps, user, token) => {
+			const isSecure = user != null && token == null;
+
+			// Lookup app
+			const ap = await this.appsRepository.findOneBy({ id: ps.appId });
+
+			if (ap == null) {
+				throw new ApiError(meta.errors.noSuchApp);
+			}
+
+			return await this.appEntityService.pack(ap, user, {
+				detail: true,
+				includeSecret: isSecure && (ap.userId === user!.id),
+			});
+		});
 	}
-
-	return await Apps.pack(ap, user, {
-		detail: true,
-		includeSecret: isSecure && (ap.userId === user!.id),
-	});
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/auth/accept.ts b/packages/backend/src/server/api/endpoints/auth/accept.ts
index b5c06792bb..6032b59bef 100644
--- a/packages/backend/src/server/api/endpoints/auth/accept.ts
+++ b/packages/backend/src/server/api/endpoints/auth/accept.ts
@@ -1,9 +1,11 @@
 import * as crypto from 'node:crypto';
-import define from '../../define.js';
-import { ApiError } from '../../error.js';
-import { AuthSessions, AccessTokens, Apps } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AuthSessionsRepository, AppsRepository, AccessTokensRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
 import { secureRndstr } from '@/misc/secure-rndstr.js';
+import { DI } from '@/di-symbols.js';
+import { ApiError } from '../../error.js';
 
 export const meta = {
 	tags: ['auth'],
@@ -30,49 +32,65 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Fetch token
-	const session = await AuthSessions
-		.findOneBy({ token: ps.token });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.appsRepository)
+		private appsRepository: AppsRepository,
 
-	if (session == null) {
-		throw new ApiError(meta.errors.noSuchSession);
-	}
+		@Inject(DI.authSessionsRepository)
+		private authSessionsRepository: AuthSessionsRepository,
+
+		@Inject(DI.accessTokensRepository)
+		private accessTokensRepository: AccessTokensRepository,
+
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch token
+			const session = await this.authSessionsRepository
+				.findOneBy({ token: ps.token });
+
+			if (session == null) {
+				throw new ApiError(meta.errors.noSuchSession);
+			}
+
+			// Generate access token
+			const accessToken = secureRndstr(32, true);
 
-	// Generate access token
-	const accessToken = secureRndstr(32, true);
-
-	// Fetch exist access token
-	const exist = await AccessTokens.findOneBy({
-		appId: session.appId,
-		userId: user.id,
-	});
-
-	if (exist == null) {
-		// Lookup app
-		const app = await Apps.findOneByOrFail({ id: session.appId });
-
-		// Generate Hash
-		const sha256 = crypto.createHash('sha256');
-		sha256.update(accessToken + app.secret);
-		const hash = sha256.digest('hex');
-
-		const now = new Date();
-
-		// Insert access token doc
-		await AccessTokens.insert({
-			id: genId(),
-			createdAt: now,
-			lastUsedAt: now,
-			appId: session.appId,
-			userId: user.id,
-			token: accessToken,
-			hash: hash,
+			// Fetch exist access token
+			const exist = await this.accessTokensRepository.findOneBy({
+				appId: session.appId,
+				userId: me.id,
+			});
+
+			if (exist == null) {
+				// Lookup app
+				const app = await this.appsRepository.findOneByOrFail({ id: session.appId });
+
+				// Generate Hash
+				const sha256 = crypto.createHash('sha256');
+				sha256.update(accessToken + app.secret);
+				const hash = sha256.digest('hex');
+
+				const now = new Date();
+
+				// Insert access token doc
+				await this.accessTokensRepository.insert({
+					id: this.idService.genId(),
+					createdAt: now,
+					lastUsedAt: now,
+					appId: session.appId,
+					userId: me.id,
+					token: accessToken,
+					hash: hash,
+				});
+			}
+
+			// Update session
+			await this.authSessionsRepository.update(session.id, {
+				userId: me.id,
+			});
 		});
 	}
-
-	// Update session
-	await AuthSessions.update(session.id, {
-		userId: user.id,
-	});
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/auth/session/generate.ts b/packages/backend/src/server/api/endpoints/auth/session/generate.ts
index 717c3e5086..7f8325dbbd 100644
--- a/packages/backend/src/server/api/endpoints/auth/session/generate.ts
+++ b/packages/backend/src/server/api/endpoints/auth/session/generate.ts
@@ -1,9 +1,11 @@
 import { v4 as uuid } from 'uuid';
-import config from '@/config/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AppsRepository, AuthSessionsRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { Config } from '@/config.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { Apps, AuthSessions } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
 
 export const meta = {
 	tags: ['auth'],
@@ -44,29 +46,45 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	// Lookup app
-	const app = await Apps.findOneBy({
-		secret: ps.appSecret,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
 
-	if (app == null) {
-		throw new ApiError(meta.errors.noSuchApp);
-	}
+		@Inject(DI.appsRepository)
+		private appsRepository: AppsRepository,
+
+		@Inject(DI.authSessionsRepository)
+		private authSessionsRepository: AuthSessionsRepository,
+
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Lookup app
+			const app = await this.appsRepository.findOneBy({
+				secret: ps.appSecret,
+			});
 
-	// Generate token
-	const token = uuid();
+			if (app == null) {
+				throw new ApiError(meta.errors.noSuchApp);
+			}
 
-	// Create session token document
-	const doc = await AuthSessions.insert({
-		id: genId(),
-		createdAt: new Date(),
-		appId: app.id,
-		token: token,
-	}).then(x => AuthSessions.findOneByOrFail(x.identifiers[0]));
+			// Generate token
+			const token = uuid();
 
-	return {
-		token: doc.token,
-		url: `${config.authUrl}/${doc.token}`,
-	};
-});
+			// Create session token document
+			const doc = await this.authSessionsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				appId: app.id,
+				token: token,
+			}).then(x => this.authSessionsRepository.findOneByOrFail(x.identifiers[0]));
+
+			return {
+				token: doc.token,
+				url: `${this.config.authUrl}/${doc.token}`,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/auth/session/show.ts b/packages/backend/src/server/api/endpoints/auth/session/show.ts
index 3f3a4d1427..dff4c74340 100644
--- a/packages/backend/src/server/api/endpoints/auth/session/show.ts
+++ b/packages/backend/src/server/api/endpoints/auth/session/show.ts
@@ -1,6 +1,9 @@
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AuthSessionsRepository } from '@/models/index.js';
+import { AuthSessionEntityService } from '@/core/entities/AuthSessionEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { AuthSessions } from '@/models/index.js';
 
 export const meta = {
 	tags: ['auth'],
@@ -46,15 +49,25 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Lookup session
-	const session = await AuthSessions.findOneBy({
-		token: ps.token,
-	});
-
-	if (session == null) {
-		throw new ApiError(meta.errors.noSuchSession);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.authSessionsRepository)
+		private authSessionsRepository: AuthSessionsRepository,
+
+		private authSessionEntityService: AuthSessionEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Lookup session
+			const session = await this.authSessionsRepository.findOneBy({
+				token: ps.token,
+			});
 
-	return await AuthSessions.pack(session, user);
-});
+			if (session == null) {
+				throw new ApiError(meta.errors.noSuchSession);
+			}
+
+			return await this.authSessionEntityService.pack(session, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/auth/session/userkey.ts b/packages/backend/src/server/api/endpoints/auth/session/userkey.ts
index 89884ed38a..9c9f13f502 100644
--- a/packages/backend/src/server/api/endpoints/auth/session/userkey.ts
+++ b/packages/backend/src/server/api/endpoints/auth/session/userkey.ts
@@ -1,6 +1,9 @@
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository, AppsRepository, AccessTokensRepository, AuthSessionsRepository } from '@/models/index.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { Apps, AuthSessions, AccessTokens, Users } from '@/models/index.js';
 
 export const meta = {
 	tags: ['auth'],
@@ -55,43 +58,62 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	// Lookup app
-	const app = await Apps.findOneBy({
-		secret: ps.appSecret,
-	});
-
-	if (app == null) {
-		throw new ApiError(meta.errors.noSuchApp);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.appsRepository)
+		private appsRepository: AppsRepository,
+
+		@Inject(DI.authSessionsRepository)
+		private authSessionsRepository: AuthSessionsRepository,
+
+		@Inject(DI.accessTokensRepository)
+		private accessTokensRepository: AccessTokensRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Lookup app
+			const app = await this.appsRepository.findOneBy({
+				secret: ps.appSecret,
+			});
+
+			if (app == null) {
+				throw new ApiError(meta.errors.noSuchApp);
+			}
+
+			// Fetch token
+			const session = await this.authSessionsRepository.findOneBy({
+				token: ps.token,
+				appId: app.id,
+			});
+
+			if (session == null) {
+				throw new ApiError(meta.errors.noSuchSession);
+			}
+
+			if (session.userId == null) {
+				throw new ApiError(meta.errors.pendingSession);
+			}
+
+			// Lookup access token
+			const accessToken = await this.accessTokensRepository.findOneByOrFail({
+				appId: app.id,
+				userId: session.userId,
+			});
+
+			// Delete session
+			this.authSessionsRepository.delete(session.id);
+
+			return {
+				accessToken: accessToken.token,
+				user: await this.userEntityService.pack(session.userId, null, {
+					detail: true,
+				}),
+			};
+		});
 	}
-
-	// Fetch token
-	const session = await AuthSessions.findOneBy({
-		token: ps.token,
-		appId: app.id,
-	});
-
-	if (session == null) {
-		throw new ApiError(meta.errors.noSuchSession);
-	}
-
-	if (session.userId == null) {
-		throw new ApiError(meta.errors.pendingSession);
-	}
-
-	// Lookup access token
-	const accessToken = await AccessTokens.findOneByOrFail({
-		appId: app.id,
-		userId: session.userId,
-	});
-
-	// Delete session
-	AuthSessions.delete(session.id);
-
-	return {
-		accessToken: accessToken.token,
-		user: await Users.pack(session.userId, null, {
-			detail: true,
-		}),
-	};
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/blocking/create.ts b/packages/backend/src/server/api/endpoints/blocking/create.ts
index 0540e6ab0f..33614a1554 100644
--- a/packages/backend/src/server/api/endpoints/blocking/create.ts
+++ b/packages/backend/src/server/api/endpoints/blocking/create.ts
@@ -1,9 +1,12 @@
 import ms from 'ms';
-import create from '@/services/blocking/create.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository, BlockingsRepository } from '@/models/index.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { UserBlockingService } from '@/core/UserBlockingService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { getUser } from '../../common/getters.js';
-import { Blockings, NoteWatchings, Users } from '@/models/index.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['account'],
@@ -53,38 +56,48 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const blocker = await Users.findOneByOrFail({ id: user.id });
-
-	// 自分自身
-	if (user.id === ps.userId) {
-		throw new ApiError(meta.errors.blockeeIsYourself);
-	}
-
-	// Get blockee
-	const blockee = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
-
-	// Check if already blocking
-	const exist = await Blockings.findOneBy({
-		blockerId: blocker.id,
-		blockeeId: blockee.id,
-	});
-
-	if (exist != null) {
-		throw new ApiError(meta.errors.alreadyBlocking);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		private userEntityService: UserEntityService,
+		private getterService: GetterService,
+		private userBlockingService: UserBlockingService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const blocker = await this.usersRepository.findOneByOrFail({ id: me.id });
+
+			// 自分自身
+			if (me.id === ps.userId) {
+				throw new ApiError(meta.errors.blockeeIsYourself);
+			}
+
+			// Get blockee
+			const blockee = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
+
+			// Check if already blocking
+			const exist = await this.blockingsRepository.findOneBy({
+				blockerId: blocker.id,
+				blockeeId: blockee.id,
+			});
+
+			if (exist != null) {
+				throw new ApiError(meta.errors.alreadyBlocking);
+			}
+
+			await this.userBlockingService.block(blocker, blockee);
+
+			return await this.userEntityService.pack(blockee.id, blocker, {
+				detail: true,
+			});
+		});
 	}
-
-	await create(blocker, blockee);
-
-	NoteWatchings.delete({
-		userId: blocker.id,
-		noteUserId: blockee.id,
-	});
-
-	return await Users.pack(blockee.id, blocker, {
-		detail: true,
-	});
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/blocking/delete.ts b/packages/backend/src/server/api/endpoints/blocking/delete.ts
index 77e17b3ba9..f2cc28e922 100644
--- a/packages/backend/src/server/api/endpoints/blocking/delete.ts
+++ b/packages/backend/src/server/api/endpoints/blocking/delete.ts
@@ -1,9 +1,12 @@
 import ms from 'ms';
-import deleteBlocking from '@/services/blocking/delete.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository, BlockingsRepository } from '@/models/index.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { UserBlockingService } from '@/core/UserBlockingService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { getUser } from '../../common/getters.js';
-import { Blockings, Users } from '@/models/index.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['account'],
@@ -53,34 +56,49 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const blocker = await Users.findOneByOrFail({ id: user.id });
-
-	// Check if the blockee is yourself
-	if (user.id === ps.userId) {
-		throw new ApiError(meta.errors.blockeeIsYourself);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		private userEntityService: UserEntityService,
+		private getterService: GetterService,
+		private userBlockingService: UserBlockingService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const blocker = await this.usersRepository.findOneByOrFail({ id: me.id });
+
+			// Check if the blockee is yourself
+			if (me.id === ps.userId) {
+				throw new ApiError(meta.errors.blockeeIsYourself);
+			}
+
+			// Get blockee
+			const blockee = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
+
+			// Check not blocking
+			const exist = await this.blockingsRepository.findOneBy({
+				blockerId: blocker.id,
+				blockeeId: blockee.id,
+			});
+
+			if (exist == null) {
+				throw new ApiError(meta.errors.notBlocking);
+			}
+
+			// Delete blocking
+			await this.userBlockingService.unblock(blocker, blockee);
+
+			return await this.userEntityService.pack(blockee.id, blocker, {
+				detail: true,
+			});
+		});
 	}
-
-	// Get blockee
-	const blockee = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
-
-	// Check not blocking
-	const exist = await Blockings.findOneBy({
-		blockerId: blocker.id,
-		blockeeId: blockee.id,
-	});
-
-	if (exist == null) {
-		throw new ApiError(meta.errors.notBlocking);
-	}
-
-	// Delete blocking
-	await deleteBlocking(blocker, blockee);
-
-	return await Users.pack(blockee.id, blocker, {
-		detail: true,
-	});
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/blocking/list.ts b/packages/backend/src/server/api/endpoints/blocking/list.ts
index 29095ebe21..4f5e11cd68 100644
--- a/packages/backend/src/server/api/endpoints/blocking/list.ts
+++ b/packages/backend/src/server/api/endpoints/blocking/list.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { Blockings } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { BlockingsRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { BlockingEntityService } from '@/core/entities/BlockingEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['account'],
@@ -31,13 +34,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = makePaginationQuery(Blockings.createQueryBuilder('blocking'), ps.sinceId, ps.untilId)
-		.andWhere(`blocking.blockerId = :meId`, { meId: me.id });
-
-	const blockings = await query
-		.take(ps.limit)
-		.getMany();
-
-	return await Blockings.packMany(blockings, me);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		private blockingEntityService: BlockingEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.blockingsRepository.createQueryBuilder('blocking'), ps.sinceId, ps.untilId)
+				.andWhere('blocking.blockerId = :meId', { meId: me.id });
+
+			const blockings = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await this.blockingEntityService.packMany(blockings, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/channels/create.ts b/packages/backend/src/server/api/endpoints/channels/create.ts
index 94dcfe5023..21979884f9 100644
--- a/packages/backend/src/server/api/endpoints/channels/create.ts
+++ b/packages/backend/src/server/api/endpoints/channels/create.ts
@@ -1,8 +1,11 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ChannelsRepository, DriveFilesRepository } from '@/models/index.js';
+import type { Channel } from '@/models/entities/Channel.js';
+import { IdService } from '@/core/IdService.js';
+import { ChannelEntityService } from '@/core/entities/ChannelEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { Channels, DriveFiles } from '@/models/index.js';
-import { Channel } from '@/models/entities/channel.js';
-import { genId } from '@/misc/gen-id.js';
 
 export const meta = {
 	tags: ['channels'],
@@ -37,27 +40,41 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	let banner = null;
-	if (ps.bannerId != null) {
-		banner = await DriveFiles.findOneBy({
-			id: ps.bannerId,
-			userId: user.id,
-		});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
 
-		if (banner == null) {
-			throw new ApiError(meta.errors.noSuchFile);
-		}
-	}
+		@Inject(DI.channelsRepository)
+		private channelsRepository: ChannelsRepository,
+
+		private idService: IdService,
+		private channelEntityService: ChannelEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			let banner = null;
+			if (ps.bannerId != null) {
+				banner = await this.driveFilesRepository.findOneBy({
+					id: ps.bannerId,
+					userId: me.id,
+				});
+
+				if (banner == null) {
+					throw new ApiError(meta.errors.noSuchFile);
+				}
+			}
 
-	const channel = await Channels.insert({
-		id: genId(),
-		createdAt: new Date(),
-		userId: user.id,
-		name: ps.name,
-		description: ps.description || null,
-		bannerId: banner ? banner.id : null,
-	} as Channel).then(x => Channels.findOneByOrFail(x.identifiers[0]));
-
-	return await Channels.pack(channel, user);
-});
+			const channel = await this.channelsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				userId: me.id,
+				name: ps.name,
+				description: ps.description ?? null,
+				bannerId: banner ? banner.id : null,
+			} as Channel).then(x => this.channelsRepository.findOneByOrFail(x.identifiers[0]));
+
+			return await this.channelEntityService.pack(channel, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/channels/featured.ts b/packages/backend/src/server/api/endpoints/channels/featured.ts
index 73980c0fad..0c3f9509d1 100644
--- a/packages/backend/src/server/api/endpoints/channels/featured.ts
+++ b/packages/backend/src/server/api/endpoints/channels/featured.ts
@@ -1,5 +1,8 @@
-import define from '../../define.js';
-import { Channels } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ChannelsRepository } from '@/models/index.js';
+import { ChannelEntityService } from '@/core/entities/ChannelEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['channels'],
@@ -24,12 +27,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = Channels.createQueryBuilder('channel')
-		.where('channel.lastNotedAt IS NOT NULL')
-		.orderBy('channel.lastNotedAt', 'DESC');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.channelsRepository)
+		private channelsRepository: ChannelsRepository,
 
-	const channels = await query.take(10).getMany();
+		private channelEntityService: ChannelEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.channelsRepository.createQueryBuilder('channel')
+				.where('channel.lastNotedAt IS NOT NULL')
+				.orderBy('channel.lastNotedAt', 'DESC');
 
-	return await Promise.all(channels.map(x => Channels.pack(x, me)));
-});
+			const channels = await query.take(10).getMany();
+
+			return await Promise.all(channels.map(x => this.channelEntityService.pack(x, me)));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/channels/follow.ts b/packages/backend/src/server/api/endpoints/channels/follow.ts
index 895ffed0bd..6c6b498a94 100644
--- a/packages/backend/src/server/api/endpoints/channels/follow.ts
+++ b/packages/backend/src/server/api/endpoints/channels/follow.ts
@@ -1,8 +1,10 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ChannelFollowingsRepository, ChannelsRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { Channels, ChannelFollowings } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { publishUserEvent } from '@/services/stream.js';
 
 export const meta = {
 	tags: ['channels'],
@@ -29,21 +31,35 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const channel = await Channels.findOneBy({
-		id: ps.channelId,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.channelsRepository)
+		private channelsRepository: ChannelsRepository,
 
-	if (channel == null) {
-		throw new ApiError(meta.errors.noSuchChannel);
-	}
+		@Inject(DI.channelFollowingsRepository)
+		private channelFollowingsRepository: ChannelFollowingsRepository,
+
+		private idService: IdService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const channel = await Channels.findOneBy({
+				id: ps.channelId,
+			});
 
-	await ChannelFollowings.insert({
-		id: genId(),
-		createdAt: new Date(),
-		followerId: user.id,
-		followeeId: channel.id,
-	});
+			if (channel == null) {
+				throw new ApiError(meta.errors.noSuchChannel);
+			}
 
-	publishUserEvent(user.id, 'followChannel', channel);
-});
+			await this.channelFollowingsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				followerId: me.id,
+				followeeId: channel.id,
+			});
+
+			this.globalEventService.publishUserEvent(me.id, 'followChannel', channel);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/channels/followed.ts b/packages/backend/src/server/api/endpoints/channels/followed.ts
index e4aa4d1614..5a8ab26af9 100644
--- a/packages/backend/src/server/api/endpoints/channels/followed.ts
+++ b/packages/backend/src/server/api/endpoints/channels/followed.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { Channels, ChannelFollowings } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ChannelFollowingsRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { ChannelEntityService } from '@/core/entities/ChannelEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['channels', 'account'],
@@ -31,13 +34,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = makePaginationQuery(ChannelFollowings.createQueryBuilder(), ps.sinceId, ps.untilId)
-		.andWhere({ followerId: me.id });
-
-	const followings = await query
-		.take(ps.limit)
-		.getMany();
-
-	return await Promise.all(followings.map(x => Channels.pack(x.followeeId, me)));
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.channelFollowingsRepository)
+		private channelFollowingsRepository: ChannelFollowingsRepository,
+
+		private channelEntityService: ChannelEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.channelFollowingsRepository.createQueryBuilder(), ps.sinceId, ps.untilId)
+				.andWhere({ followerId: me.id });
+
+			const followings = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await Promise.all(followings.map(x => this.channelEntityService.pack(x.followeeId, me)));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/channels/owned.ts b/packages/backend/src/server/api/endpoints/channels/owned.ts
index ed7e41cac2..8b8b5819e6 100644
--- a/packages/backend/src/server/api/endpoints/channels/owned.ts
+++ b/packages/backend/src/server/api/endpoints/channels/owned.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { Channels } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ChannelsRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { ChannelEntityService } from '@/core/entities/ChannelEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['channels', 'account'],
@@ -31,13 +34,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = makePaginationQuery(Channels.createQueryBuilder(), ps.sinceId, ps.untilId)
-		.andWhere({ userId: me.id });
-
-	const channels = await query
-		.take(ps.limit)
-		.getMany();
-
-	return await Promise.all(channels.map(x => Channels.pack(x, me)));
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.channelsRepository)
+		private channelsRepository: ChannelsRepository,
+
+		private channelEntityService: ChannelEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.channelsRepository.createQueryBuilder(), ps.sinceId, ps.untilId)
+				.andWhere({ userId: me.id });
+
+			const channels = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await Promise.all(channels.map(x => this.channelEntityService.pack(x, me)));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/channels/show.ts b/packages/backend/src/server/api/endpoints/channels/show.ts
index 87665a9865..54ae31790b 100644
--- a/packages/backend/src/server/api/endpoints/channels/show.ts
+++ b/packages/backend/src/server/api/endpoints/channels/show.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ChannelsRepository } from '@/models/index.js';
+import { ChannelEntityService } from '@/core/entities/ChannelEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { Channels } from '@/models/index.js';
 
 export const meta = {
 	tags: ['channels'],
@@ -31,14 +34,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const channel = await Channels.findOneBy({
-		id: ps.channelId,
-	});
-
-	if (channel == null) {
-		throw new ApiError(meta.errors.noSuchChannel);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.channelsRepository)
+		private channelsRepository: ChannelsRepository,
+
+		private channelEntityService: ChannelEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const channel = await this.channelsRepository.findOneBy({
+				id: ps.channelId,
+			});
+
+			if (channel == null) {
+				throw new ApiError(meta.errors.noSuchChannel);
+			}
+
+			return await this.channelEntityService.pack(channel, me);
+		});
 	}
-
-	return await Channels.pack(channel, me);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/channels/timeline.ts b/packages/backend/src/server/api/endpoints/channels/timeline.ts
index deaa299013..1c7f1360b9 100644
--- a/packages/backend/src/server/api/endpoints/channels/timeline.ts
+++ b/packages/backend/src/server/api/endpoints/channels/timeline.ts
@@ -1,8 +1,11 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ChannelsRepository, NotesRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import ActiveUsersChart from '@/core/chart/charts/active-users.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { Notes, Channels } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
-import { activeUsersChart } from '@/services/chart/index.js';
 
 export const meta = {
 	tags: ['notes', 'channels'],
@@ -42,35 +45,50 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const channel = await Channels.findOneBy({
-		id: ps.channelId,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
 
-	if (channel == null) {
-		throw new ApiError(meta.errors.noSuchChannel);
-	}
+		@Inject(DI.channelsRepository)
+		private channelsRepository: ChannelsRepository,
+
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+		private activeUsersChart: ActiveUsersChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const channel = await this.channelsRepository.findOneBy({
+				id: ps.channelId,
+			});
 
-	//#region Construct query
-	const query = makePaginationQuery(Notes.createQueryBuilder('note'), ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
-		.andWhere('note.channelId = :channelId', { channelId: channel.id })
-		.innerJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner')
-		.leftJoinAndSelect('note.channel', 'channel');
-	//#endregion
+			if (channel == null) {
+				throw new ApiError(meta.errors.noSuchChannel);
+			}
 
-	const timeline = await query.take(ps.limit).getMany();
+			//#region Construct query
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
+				.andWhere('note.channelId = :channelId', { channelId: channel.id })
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner')
+				.leftJoinAndSelect('note.channel', 'channel');
+			//#endregion
 
-	if (user) activeUsersChart.read(user);
+			const timeline = await query.take(ps.limit).getMany();
 
-	return await Notes.packMany(timeline, user);
-});
+			if (me) this.activeUsersChart.read(me);
+
+			return await this.noteEntityService.packMany(timeline, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/channels/unfollow.ts b/packages/backend/src/server/api/endpoints/channels/unfollow.ts
index e065d897a5..b464c55097 100644
--- a/packages/backend/src/server/api/endpoints/channels/unfollow.ts
+++ b/packages/backend/src/server/api/endpoints/channels/unfollow.ts
@@ -1,7 +1,9 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ChannelFollowingsRepository, ChannelsRepository } from '@/models/index.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { Channels, ChannelFollowings } from '@/models/index.js';
-import { publishUserEvent } from '@/services/stream.js';
 
 export const meta = {
 	tags: ['channels'],
@@ -28,19 +30,32 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const channel = await Channels.findOneBy({
-		id: ps.channelId,
-	});
-
-	if (channel == null) {
-		throw new ApiError(meta.errors.noSuchChannel);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.channelsRepository)
+		private channelsRepository: ChannelsRepository,
+
+		@Inject(DI.channelFollowingsRepository)
+		private channelFollowingsRepository: ChannelFollowingsRepository,
+
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const channel = await this.channelsRepository.findOneBy({
+				id: ps.channelId,
+			});
+
+			if (channel == null) {
+				throw new ApiError(meta.errors.noSuchChannel);
+			}
+
+			await this.channelFollowingsRepository.delete({
+				followerId: me.id,
+				followeeId: channel.id,
+			});
+
+			this.globalEventService.publishUserEvent(me.id, 'unfollowChannel', channel);
+		});
 	}
-
-	await ChannelFollowings.delete({
-		followerId: user.id,
-		followeeId: channel.id,
-	});
-
-	publishUserEvent(user.id, 'unfollowChannel', channel);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/channels/update.ts b/packages/backend/src/server/api/endpoints/channels/update.ts
index 13104f324f..ba62e9d371 100644
--- a/packages/backend/src/server/api/endpoints/channels/update.ts
+++ b/packages/backend/src/server/api/endpoints/channels/update.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFilesRepository, ChannelsRepository } from '@/models/index.js';
+import { ChannelEntityService } from '@/core/entities/ChannelEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { Channels, DriveFiles } from '@/models/index.js';
 
 export const meta = {
 	tags: ['channels'],
@@ -48,39 +51,52 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const channel = await Channels.findOneBy({
-		id: ps.channelId,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.channelsRepository)
+		private channelsRepository: ChannelsRepository,
 
-	if (channel == null) {
-		throw new ApiError(meta.errors.noSuchChannel);
-	}
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
 
-	if (channel.userId !== me.id) {
-		throw new ApiError(meta.errors.accessDenied);
-	}
+		private channelEntityService: ChannelEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const channel = await this.channelsRepository.findOneBy({
+				id: ps.channelId,
+			});
 
-	// eslint:disable-next-line:no-unnecessary-initializer
-	let banner = undefined;
-	if (ps.bannerId != null) {
-		banner = await DriveFiles.findOneBy({
-			id: ps.bannerId,
-			userId: me.id,
-		});
+			if (channel == null) {
+				throw new ApiError(meta.errors.noSuchChannel);
+			}
 
-		if (banner == null) {
-			throw new ApiError(meta.errors.noSuchFile);
-		}
-	} else if (ps.bannerId === null) {
-		banner = null;
-	}
+			if (channel.userId !== me.id) {
+				throw new ApiError(meta.errors.accessDenied);
+			}
 
-	await Channels.update(channel.id, {
-		...(ps.name !== undefined ? { name: ps.name } : {}),
-		...(ps.description !== undefined ? { description: ps.description } : {}),
-		...(banner ? { bannerId: banner.id } : {}),
-	});
+			// eslint:disable-next-line:no-unnecessary-initializer
+			let banner = undefined;
+			if (ps.bannerId != null) {
+				banner = await this.driveFilesRepository.findOneBy({
+					id: ps.bannerId,
+					userId: me.id,
+				});
 
-	return await Channels.pack(channel.id, me);
-});
+				if (banner == null) {
+					throw new ApiError(meta.errors.noSuchFile);
+				}
+			} else if (ps.bannerId === null) {
+				banner = null;
+			}
+
+			await this.channelsRepository.update(channel.id, {
+				...(ps.name !== undefined ? { name: ps.name } : {}),
+				...(ps.description !== undefined ? { description: ps.description } : {}),
+				...(banner ? { bannerId: banner.id } : {}),
+			});
+
+			return await this.channelEntityService.pack(channel.id, me);
+		});
+	}
+}
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 ea23794296..862ef89268 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,13 @@
-import { getJsonSchema } from '@/services/chart/core.js';
-import { activeUsersChart } from '@/services/chart/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { getJsonSchema } from '@/core/chart/core.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import ActiveUsersChart from '@/core/chart/charts/active-users.js';
+import { schema } from '@/core/chart/charts/entities/active-users.js';
 
 export const meta = {
 	tags: ['charts', 'users'],
 
-	res: getJsonSchema(activeUsersChart.schema),
+	res: getJsonSchema(schema),
 
 	allowGet: true,
 	cacheSec: 60 * 60,
@@ -22,6 +24,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	return await activeUsersChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private activeUsersChart: ActiveUsersChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.activeUsersChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null);
+		});
+	}
+}
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 06dee250ee..1d5b8f05f8 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,13 @@
-import { getJsonSchema } from '@/services/chart/core.js';
-import { apRequestChart } from '@/services/chart/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { getJsonSchema } from '@/core/chart/core.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import ApRequestChart from '@/core/chart/charts/ap-request.js';
+import { schema } from '@/core/chart/charts/entities/ap-request.js';
 
 export const meta = {
 	tags: ['charts'],
 
-	res: getJsonSchema(apRequestChart.schema),
+	res: getJsonSchema(schema),
 
 	allowGet: true,
 	cacheSec: 60 * 60,
@@ -22,6 +24,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	return await apRequestChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private apRequestChart: ApRequestChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.apRequestChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/charts/drive.ts b/packages/backend/src/server/api/endpoints/charts/drive.ts
index dd2c2d6838..ec28fa75de 100644
--- a/packages/backend/src/server/api/endpoints/charts/drive.ts
+++ b/packages/backend/src/server/api/endpoints/charts/drive.ts
@@ -1,11 +1,13 @@
-import { getJsonSchema } from '@/services/chart/core.js';
-import { driveChart } from '@/services/chart/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { getJsonSchema } from '@/core/chart/core.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import DriveChart from '@/core/chart/charts/drive.js';
+import { schema } from '@/core/chart/charts/entities/drive.js';
 
 export const meta = {
 	tags: ['charts', 'drive'],
 
-	res: getJsonSchema(driveChart.schema),
+	res: getJsonSchema(schema),
 
 	allowGet: true,
 	cacheSec: 60 * 60,
@@ -22,6 +24,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	return await driveChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private driveChart: DriveChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.driveChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/charts/federation.ts b/packages/backend/src/server/api/endpoints/charts/federation.ts
index 8c35b3c46d..6c24cbbb77 100644
--- a/packages/backend/src/server/api/endpoints/charts/federation.ts
+++ b/packages/backend/src/server/api/endpoints/charts/federation.ts
@@ -1,11 +1,13 @@
-import { getJsonSchema } from '@/services/chart/core.js';
-import { federationChart } from '@/services/chart/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { getJsonSchema } from '@/core/chart/core.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import FederationChart from '@/core/chart/charts/federation.js';
+import { schema } from '@/core/chart/charts/entities/federation.js';
 
 export const meta = {
 	tags: ['charts'],
 
-	res: getJsonSchema(federationChart.schema),
+	res: getJsonSchema(schema),
 
 	allowGet: true,
 	cacheSec: 60 * 60,
@@ -22,6 +24,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	return await federationChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private federationChart: FederationChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.federationChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/charts/hashtag.ts b/packages/backend/src/server/api/endpoints/charts/hashtag.ts
index 77e24a62c3..71e5bab766 100644
--- a/packages/backend/src/server/api/endpoints/charts/hashtag.ts
+++ b/packages/backend/src/server/api/endpoints/charts/hashtag.ts
@@ -1,11 +1,13 @@
-import { getJsonSchema } from '@/services/chart/core.js';
-import { hashtagChart } from '@/services/chart/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { getJsonSchema } from '@/core/chart/core.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import HashtagChart from '@/core/chart/charts/hashtag.js';
+import { schema } from '@/core/chart/charts/entities/hashtag.js';
 
 export const meta = {
 	tags: ['charts', 'hashtags'],
 
-	res: getJsonSchema(hashtagChart.schema),
+	res: getJsonSchema(schema),
 
 	allowGet: true,
 	cacheSec: 60 * 60,
@@ -23,6 +25,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	return await hashtagChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null, ps.tag);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private hashtagChart: HashtagChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.hashtagChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null, ps.tag);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/charts/instance.ts b/packages/backend/src/server/api/endpoints/charts/instance.ts
index 817d51ad01..a6a538ea5c 100644
--- a/packages/backend/src/server/api/endpoints/charts/instance.ts
+++ b/packages/backend/src/server/api/endpoints/charts/instance.ts
@@ -1,11 +1,13 @@
-import { getJsonSchema } from '@/services/chart/core.js';
-import { instanceChart } from '@/services/chart/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { getJsonSchema } from '@/core/chart/core.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import InstanceChart from '@/core/chart/charts/instance.js';
+import { schema } from '@/core/chart/charts/entities/instance.js';
 
 export const meta = {
 	tags: ['charts'],
 
-	res: getJsonSchema(instanceChart.schema),
+	res: getJsonSchema(schema),
 
 	allowGet: true,
 	cacheSec: 60 * 60,
@@ -23,6 +25,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	return await instanceChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null, ps.host);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private instanceChart: InstanceChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.instanceChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null, ps.host);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/charts/notes.ts b/packages/backend/src/server/api/endpoints/charts/notes.ts
index 951adf5408..8d03f2eaf1 100644
--- a/packages/backend/src/server/api/endpoints/charts/notes.ts
+++ b/packages/backend/src/server/api/endpoints/charts/notes.ts
@@ -1,11 +1,13 @@
-import { getJsonSchema } from '@/services/chart/core.js';
-import { notesChart } from '@/services/chart/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { getJsonSchema } from '@/core/chart/core.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import NotesChart from '@/core/chart/charts/notes.js';
+import { schema } from '@/core/chart/charts/entities/notes.js';
 
 export const meta = {
 	tags: ['charts', 'notes'],
 
-	res: getJsonSchema(notesChart.schema),
+	res: getJsonSchema(schema),
 
 	allowGet: true,
 	cacheSec: 60 * 60,
@@ -22,6 +24,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	return await notesChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private notesChart: NotesChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.notesChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null);
+		});
+	}
+}
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 f165b40224..87d56f38b7 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,13 @@
-import { getJsonSchema } from '@/services/chart/core.js';
-import { perUserDriveChart } from '@/services/chart/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { getJsonSchema } from '@/core/chart/core.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import PerUserDriveChart from '@/core/chart/charts/per-user-drive.js';
+import { schema } from '@/core/chart/charts/entities/per-user-drive.js';
 
 export const meta = {
 	tags: ['charts', 'drive', 'users'],
 
-	res: getJsonSchema(perUserDriveChart.schema),
+	res: getJsonSchema(schema),
 
 	allowGet: true,
 	cacheSec: 60 * 60,
@@ -23,6 +25,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	return await perUserDriveChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null, ps.userId);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private perUserDriveChart: PerUserDriveChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.perUserDriveChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null, ps.userId);
+		});
+	}
+}
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 f5d42e21c2..7a61544aea 100644
--- a/packages/backend/src/server/api/endpoints/charts/user/following.ts
+++ b/packages/backend/src/server/api/endpoints/charts/user/following.ts
@@ -1,11 +1,13 @@
-import define from '../../../define.js';
-import { getJsonSchema } from '@/services/chart/core.js';
-import { perUserFollowingChart } from '@/services/chart/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { getJsonSchema } from '@/core/chart/core.js';
+import PerUserFollowingChart from '@/core/chart/charts/per-user-following.js';
+import { schema } from '@/core/chart/charts/entities/per-user-following.js';
 
 export const meta = {
 	tags: ['charts', 'users', 'following'],
 
-	res: getJsonSchema(perUserFollowingChart.schema),
+	res: getJsonSchema(schema),
 
 	allowGet: true,
 	cacheSec: 60 * 60,
@@ -23,6 +25,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	return await perUserFollowingChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null, ps.userId);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private perUserFollowingChart: PerUserFollowingChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.perUserFollowingChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null, ps.userId);
+		});
+	}
+}
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 aefe550d43..fdc385191f 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,13 @@
-import { getJsonSchema } from '@/services/chart/core.js';
-import { perUserNotesChart } from '@/services/chart/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { getJsonSchema } from '@/core/chart/core.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import PerUserNotesChart from '@/core/chart/charts/per-user-notes.js';
+import { schema } from '@/core/chart/charts/entities/per-user-notes.js';
 
 export const meta = {
 	tags: ['charts', 'users', 'notes'],
 
-	res: getJsonSchema(perUserNotesChart.schema),
+	res: getJsonSchema(schema),
 
 	allowGet: true,
 	cacheSec: 60 * 60,
@@ -23,6 +25,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	return await perUserNotesChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null, ps.userId);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private perUserNotesChart: PerUserNotesChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.perUserNotesChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null, ps.userId);
+		});
+	}
+}
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 6bc6b56bf0..f0f3e520da 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,13 @@
-import { getJsonSchema } from '@/services/chart/core.js';
-import { perUserReactionsChart } from '@/services/chart/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { getJsonSchema } from '@/core/chart/core.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import PerUserReactionsChart from '@/core/chart/charts/per-user-reactions.js';
+import { schema } from '@/core/chart/charts/entities/per-user-reactions.js';
 
 export const meta = {
 	tags: ['charts', 'users', 'reactions'],
 
-	res: getJsonSchema(perUserReactionsChart.schema),
+	res: getJsonSchema(schema),
 
 	allowGet: true,
 	cacheSec: 60 * 60,
@@ -23,6 +25,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	return await perUserReactionsChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null, ps.userId);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private perUserReactionsChart: PerUserReactionsChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.perUserReactionsChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null, ps.userId);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/charts/users.ts b/packages/backend/src/server/api/endpoints/charts/users.ts
index 338e8fd338..d09f2512e5 100644
--- a/packages/backend/src/server/api/endpoints/charts/users.ts
+++ b/packages/backend/src/server/api/endpoints/charts/users.ts
@@ -1,11 +1,13 @@
-import { getJsonSchema } from '@/services/chart/core.js';
-import { usersChart } from '@/services/chart/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { getJsonSchema } from '@/core/chart/core.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import UsersChart from '@/core/chart/charts/users.js';
+import { schema } from '@/core/chart/charts/entities/users.js';
 
 export const meta = {
 	tags: ['charts', 'users'],
 
-	res: getJsonSchema(usersChart.schema),
+	res: getJsonSchema(schema),
 
 	allowGet: true,
 	cacheSec: 60 * 60,
@@ -22,6 +24,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	return await usersChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private usersChart: UsersChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.usersChart.getChart(ps.span, ps.limit, ps.offset ? new Date(ps.offset) : null);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/clips/add-note.ts b/packages/backend/src/server/api/endpoints/clips/add-note.ts
index 5d72f5c1bf..c733d28657 100644
--- a/packages/backend/src/server/api/endpoints/clips/add-note.ts
+++ b/packages/backend/src/server/api/endpoints/clips/add-note.ts
@@ -1,8 +1,10 @@
-import define from '../../define.js';
-import { ClipNotes, Clips } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { IdService } from '@/core/IdService.js';
+import { DI } from '@/di-symbols.js';
+import { ClipNotesRepository, ClipsRepository } from '@/models/index.js';
 import { ApiError } from '../../error.js';
-import { genId } from '@/misc/gen-id.js';
-import { getNote } from '../../common/getters.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['account', 'notes', 'clips'],
@@ -42,33 +44,47 @@ export const paramDef = {
 } 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,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.clipsRepository)
+		private clipsRepository: ClipsRepository,
 
-	if (clip == null) {
-		throw new ApiError(meta.errors.noSuchClip);
-	}
+		@Inject(DI.clipNotesRepository)
+		private clipNotesRepository: ClipNotesRepository,
 
-	const note = await getNote(ps.noteId).catch(e => {
-		if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
-		throw e;
-	});
+		private idService: IdService,
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const clip = await this.clipsRepository.findOneBy({
+				id: ps.clipId,
+				userId: me.id,
+			});
 
-	const exist = await ClipNotes.findOneBy({
-		noteId: note.id,
-		clipId: clip.id,
-	});
+			if (clip == null) {
+				throw new ApiError(meta.errors.noSuchClip);
+			}
 
-	if (exist != null) {
-		throw new ApiError(meta.errors.alreadyClipped);
-	}
+			const note = await this.getterService.getNote(ps.noteId).catch(e => {
+				if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw e;
+			});
+
+			const exist = await this.clipNotesRepository.findOneBy({
+				noteId: note.id,
+				clipId: clip.id,
+			});
 
-	await ClipNotes.insert({
-		id: genId(),
-		noteId: note.id,
-		clipId: clip.id,
-	});
-});
+			if (exist != null) {
+				throw new ApiError(meta.errors.alreadyClipped);
+			}
+
+			await this.clipNotesRepository.insert({
+				id: this.idService.genId(),
+				noteId: note.id,
+				clipId: clip.id,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/clips/create.ts b/packages/backend/src/server/api/endpoints/clips/create.ts
index 4afe4222a1..8eca3d66d1 100644
--- a/packages/backend/src/server/api/endpoints/clips/create.ts
+++ b/packages/backend/src/server/api/endpoints/clips/create.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { genId } from '@/misc/gen-id.js';
-import { Clips } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { IdService } from '@/core/IdService.js';
+import { ClipsRepository } from '@/models/index.js';
+import { ClipEntityService } from '@/core/entities/ClipEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['clips'],
@@ -27,15 +30,26 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const clip = await Clips.insert({
-		id: genId(),
-		createdAt: new Date(),
-		userId: user.id,
-		name: ps.name,
-		isPublic: ps.isPublic,
-		description: ps.description,
-	}).then(x => Clips.findOneByOrFail(x.identifiers[0]));
-
-	return await Clips.pack(clip);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.clipsRepository)
+		private clipsRepository: ClipsRepository,
+
+		private clipEntityService: ClipEntityService,
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const clip = await this.clipsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				userId: me.id,
+				name: ps.name,
+				isPublic: ps.isPublic,
+				description: ps.description,
+			}).then(x => this.clipsRepository.findOneByOrFail(x.identifiers[0]));
+
+			return await this.clipEntityService.pack(clip);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/clips/delete.ts b/packages/backend/src/server/api/endpoints/clips/delete.ts
index b6c0eb702a..ea361ae9c0 100644
--- a/packages/backend/src/server/api/endpoints/clips/delete.ts
+++ b/packages/backend/src/server/api/endpoints/clips/delete.ts
@@ -1,6 +1,8 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ClipsRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { Clips } from '@/models/index.js';
 
 export const meta = {
 	tags: ['clips'],
@@ -27,15 +29,23 @@ export const paramDef = {
 } 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);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.clipsRepository)
+		private clipsRepository: ClipsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const clip = await this.clipsRepository.findOneBy({
+				id: ps.clipId,
+				userId: me.id,
+			});
+
+			if (clip == null) {
+				throw new ApiError(meta.errors.noSuchClip);
+			}
+
+			await this.clipsRepository.delete(clip.id);
+		});
 	}
-
-	await Clips.delete(clip.id);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/clips/list.ts b/packages/backend/src/server/api/endpoints/clips/list.ts
index 378811eba0..b57affd1c4 100644
--- a/packages/backend/src/server/api/endpoints/clips/list.ts
+++ b/packages/backend/src/server/api/endpoints/clips/list.ts
@@ -1,5 +1,8 @@
-import define from '../../define.js';
-import { Clips } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ClipsRepository } from '@/models/index.js';
+import { ClipEntityService } from '@/core/entities/ClipEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['clips', 'account'],
@@ -26,10 +29,20 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const clips = await Clips.findBy({
-		userId: me.id,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.clipsRepository)
+		private clipsRepository: ClipsRepository,
 
-	return await Promise.all(clips.map(x => Clips.pack(x)));
-});
+		private clipEntityService: ClipEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const clips = await this.clipsRepository.findBy({
+				userId: me.id,
+			});
+
+			return await Promise.all(clips.map(x => this.clipEntityService.pack(x)));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/clips/notes.ts b/packages/backend/src/server/api/endpoints/clips/notes.ts
index 4ace747efe..4282498931 100644
--- a/packages/backend/src/server/api/endpoints/clips/notes.ts
+++ b/packages/backend/src/server/api/endpoints/clips/notes.ts
@@ -1,10 +1,10 @@
-import define from '../../define.js';
-import { ClipNotes, Clips, Notes } from '@/models/index.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 { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { NotesRepository, ClipsRepository, ClipNotesRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { generateBlockedUserQuery } from '../../common/generate-block-query.js';
 
 export const meta = {
 	tags: ['account', 'notes', 'clips'],
@@ -44,43 +44,60 @@ export const paramDef = {
 } 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,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.clipsRepository)
+		private clipsRepository: ClipsRepository,
 
-	if (clip == null) {
-		throw new ApiError(meta.errors.noSuchClip);
-	}
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
 
-	if (!clip.isPublic && (user == null || (clip.userId !== user.id))) {
-		throw new ApiError(meta.errors.noSuchClip);
-	}
+		@Inject(DI.clipNotesRepository)
+		private clipNotesRepository: ClipNotesRepository,
 
-	const query = makePaginationQuery(Notes.createQueryBuilder('note'), ps.sinceId, ps.untilId)
-		.innerJoin(ClipNotes.metadata.targetName, 'clipNote', 'clipNote.noteId = note.id')
-		.innerJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner')
-		.andWhere('clipNote.clipId = :clipId', { clipId: clip.id });
-
-	if (user) {
-		generateVisibilityQuery(query, user);
-		generateMutedUserQuery(query, user);
-		generateBlockedUserQuery(query, user);
-	}
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const clip = await this.clipsRepository.findOneBy({
+				id: ps.clipId,
+			});
+
+			if (clip == null) {
+				throw new ApiError(meta.errors.noSuchClip);
+			}
 
-	const notes = await query
-		.take(ps.limit)
-		.getMany();
+			if (!clip.isPublic && (me == null || (clip.userId !== me.id))) {
+				throw new ApiError(meta.errors.noSuchClip);
+			}
 
-	return await Notes.packMany(notes, user);
-});
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), ps.sinceId, ps.untilId)
+				.innerJoin(this.clipNotesRepository.metadata.targetName, 'clipNote', 'clipNote.noteId = note.id')
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner')
+				.andWhere('clipNote.clipId = :clipId', { clipId: clip.id });
+
+			if (me) {
+				this.queryService.generateVisibilityQuery(query, me);
+				this.queryService.generateMutedUserQuery(query, me);
+				this.queryService.generateBlockedUserQuery(query, me);
+			}
+
+			const notes = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await this.noteEntityService.packMany(notes, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/clips/remove-note.ts b/packages/backend/src/server/api/endpoints/clips/remove-note.ts
index 8b90e31f65..3fc60e3639 100644
--- a/packages/backend/src/server/api/endpoints/clips/remove-note.ts
+++ b/packages/backend/src/server/api/endpoints/clips/remove-note.ts
@@ -1,7 +1,9 @@
-import define from '../../define.js';
-import { ClipNotes, Clips } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ClipNotesRepository, ClipsRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { getNote } from '../../common/getters.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['account', 'notes', 'clips'],
@@ -35,23 +37,36 @@ export const paramDef = {
 } 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);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.clipsRepository)
+		private clipsRepository: ClipsRepository,
+
+		@Inject(DI.clipNotesRepository)
+		private clipNotesRepository: ClipNotesRepository,
+
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const clip = await this.clipsRepository.findOneBy({
+				id: ps.clipId,
+				userId: me.id,
+			});
 
-	const note = await getNote(ps.noteId).catch(e => {
-		if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
-		throw e;
-	});
+			if (clip == null) {
+				throw new ApiError(meta.errors.noSuchClip);
+			}
 
-	await ClipNotes.delete({
-		noteId: note.id,
-		clipId: clip.id,
-	});
-});
+			const note = await this.getterService.getNote(ps.noteId).catch(err => {
+				if (err.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
+
+			await this.clipNotesRepository.delete({
+				noteId: note.id,
+				clipId: clip.id,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/clips/show.ts b/packages/backend/src/server/api/endpoints/clips/show.ts
index c3d73c168d..4e93540054 100644
--- a/packages/backend/src/server/api/endpoints/clips/show.ts
+++ b/packages/backend/src/server/api/endpoints/clips/show.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ClipsRepository } from '@/models/index.js';
+import { ClipEntityService } from '@/core/entities/ClipEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { Clips } from '@/models/index.js';
 
 export const meta = {
 	tags: ['clips', 'account'],
@@ -33,19 +36,29 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	// Fetch the clip
-	const clip = await Clips.findOneBy({
-		id: ps.clipId,
-	});
-
-	if (clip == null) {
-		throw new ApiError(meta.errors.noSuchClip);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.clipsRepository)
+		private clipsRepository: ClipsRepository,
 
-	if (!clip.isPublic && (me == null || (clip.userId !== me.id))) {
-		throw new ApiError(meta.errors.noSuchClip);
-	}
+		private clipEntityService: ClipEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch the clip
+			const clip = await this.clipsRepository.findOneBy({
+				id: ps.clipId,
+			});
+
+			if (clip == null) {
+				throw new ApiError(meta.errors.noSuchClip);
+			}
 
-	return await Clips.pack(clip);
-});
+			if (!clip.isPublic && (me == null || (clip.userId !== me.id))) {
+				throw new ApiError(meta.errors.noSuchClip);
+			}
+
+			return await this.clipEntityService.pack(clip);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/clips/update.ts b/packages/backend/src/server/api/endpoints/clips/update.ts
index b67d844f6e..9880505d06 100644
--- a/packages/backend/src/server/api/endpoints/clips/update.ts
+++ b/packages/backend/src/server/api/endpoints/clips/update.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ClipsRepository } from '@/models/index.js';
+import { ClipEntityService } from '@/core/entities/ClipEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { Clips } from '@/models/index.js';
 
 export const meta = {
 	tags: ['clips'],
@@ -36,22 +39,32 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Fetch the clip
-	const clip = await Clips.findOneBy({
-		id: ps.clipId,
-		userId: user.id,
-	});
-
-	if (clip == null) {
-		throw new ApiError(meta.errors.noSuchClip);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.clipsRepository)
+		private clipsRepository: ClipsRepository,
+
+		private clipEntityService: ClipEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch the clip
+			const clip = await this.clipsRepository.findOneBy({
+				id: ps.clipId,
+				userId: me.id,
+			});
 
-	await Clips.update(clip.id, {
-		name: ps.name,
-		description: ps.description,
-		isPublic: ps.isPublic,
-	});
+			if (clip == null) {
+				throw new ApiError(meta.errors.noSuchClip);
+			}
 
-	return await Clips.pack(clip.id);
-});
+			await this.clipsRepository.update(clip.id, {
+				name: ps.name,
+				description: ps.description,
+				isPublic: ps.isPublic,
+			});
+
+			return await this.clipEntityService.pack(clip.id);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/drive.ts b/packages/backend/src/server/api/endpoints/drive.ts
index 82497adefa..6f40225f15 100644
--- a/packages/backend/src/server/api/endpoints/drive.ts
+++ b/packages/backend/src/server/api/endpoints/drive.ts
@@ -1,6 +1,7 @@
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { DriveFiles } from '@/models/index.js';
-import define from '../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { MetaService } from '@/core/MetaService.js';
+import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
 
 export const meta = {
 	tags: ['drive', 'account'],
@@ -32,14 +33,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const instance = await fetchMeta(true);
-
-	// Calculate drive usage
-	const usage = await DriveFiles.calcDriveUsageOf(user.id);
-
-	return {
-		capacity: 1024 * 1024 * (user.driveCapacityOverrideMb || instance.localDriveCapacityMb),
-		usage: usage,
-	};
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private metaService: MetaService,
+		private driveFileEntityService: DriveFileEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const instance = await this.metaService.fetch(true);
+
+			// Calculate drive usage
+			const usage = await this.driveFileEntityService.calcDriveUsageOf(me.id);
+
+			return {
+				capacity: 1024 * 1024 * (me.driveCapacityOverrideMb ?? instance.localDriveCapacityMb),
+				usage: usage,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/files.ts b/packages/backend/src/server/api/endpoints/drive/files.ts
index 40e6c16c9c..56055d1340 100644
--- a/packages/backend/src/server/api/endpoints/drive/files.ts
+++ b/packages/backend/src/server/api/endpoints/drive/files.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { DriveFiles } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['drive'],
@@ -33,25 +36,36 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = makePaginationQuery(DriveFiles.createQueryBuilder('file'), ps.sinceId, ps.untilId)
-		.andWhere('file.userId = :userId', { userId: user.id });
-
-	if (ps.folderId) {
-		query.andWhere('file.folderId = :folderId', { folderId: ps.folderId });
-	} else {
-		query.andWhere('file.folderId IS NULL');
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
 
-	if (ps.type) {
-		if (ps.type.endsWith('/*')) {
-			query.andWhere('file.type like :type', { type: ps.type.replace('/*', '/') + '%' });
-		} else {
-			query.andWhere('file.type = :type', { type: ps.type });
-		}
-	}
+		private driveFileEntityService: DriveFileEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.driveFilesRepository.createQueryBuilder('file'), ps.sinceId, ps.untilId)
+				.andWhere('file.userId = :userId', { userId: me.id });
+
+			if (ps.folderId) {
+				query.andWhere('file.folderId = :folderId', { folderId: ps.folderId });
+			} else {
+				query.andWhere('file.folderId IS NULL');
+			}
 
-	const files = await query.take(ps.limit).getMany();
+			if (ps.type) {
+				if (ps.type.endsWith('/*')) {
+					query.andWhere('file.type like :type', { type: ps.type.replace('/*', '/') + '%' });
+				} else {
+					query.andWhere('file.type = :type', { type: ps.type });
+				}
+			}
 
-	return await DriveFiles.packMany(files, { detail: false, self: true });
-});
+			const files = await query.take(ps.limit).getMany();
+
+			return await this.driveFileEntityService.packMany(files, { detail: false, self: true });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/files/attached-notes.ts b/packages/backend/src/server/api/endpoints/drive/files/attached-notes.ts
index 415a8cc693..9f11eb8b53 100644
--- a/packages/backend/src/server/api/endpoints/drive/files/attached-notes.ts
+++ b/packages/backend/src/server/api/endpoints/drive/files/attached-notes.ts
@@ -1,6 +1,9 @@
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { NotesRepository, DriveFilesRepository } from '@/models/index.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { DriveFiles, Notes } from '@/models/index.js';
 
 export const meta = {
 	tags: ['drive', 'notes'],
@@ -39,22 +42,35 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Fetch file
-	const file = await DriveFiles.findOneBy({
-		id: ps.fileId,
-		userId: user.id,
-	});
-
-	if (file == null) {
-		throw new ApiError(meta.errors.noSuchFile);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		private noteEntityService: NoteEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch file
+			const file = await this.driveFilesRepository.findOneBy({
+				id: ps.fileId,
+				userId: me.id,
+			});
 
-	const notes = await Notes.createQueryBuilder('note')
-		.where(':file = ANY(note.fileIds)', { file: file.id })
-		.getMany();
+			if (file == null) {
+				throw new ApiError(meta.errors.noSuchFile);
+			}
 
-	return await Notes.packMany(notes, user, {
-		detail: true,
-	});
-});
+			const notes = await this.notesRepository.createQueryBuilder('note')
+				.where(':file = ANY(note.fileIds)', { file: file.id })
+				.getMany();
+
+			return await this.noteEntityService.packMany(notes, me, {
+				detail: true,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/files/check-existence.ts b/packages/backend/src/server/api/endpoints/drive/files/check-existence.ts
index bbae9bf4e4..176031d808 100644
--- a/packages/backend/src/server/api/endpoints/drive/files/check-existence.ts
+++ b/packages/backend/src/server/api/endpoints/drive/files/check-existence.ts
@@ -1,5 +1,7 @@
-import define from '../../../define.js';
-import { DriveFiles } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['drive'],
@@ -25,11 +27,19 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const file = await DriveFiles.findOneBy({
-		md5: ps.md5,
-		userId: user.id,
-	});
-
-	return file != null;
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const file = await this.driveFilesRepository.findOneBy({
+				md5: ps.md5,
+				userId: me.id,
+			});
+
+			return file != null;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/files/create.ts b/packages/backend/src/server/api/endpoints/drive/files/create.ts
index ddcbd62889..bff83876d7 100644
--- a/packages/backend/src/server/api/endpoints/drive/files/create.ts
+++ b/packages/backend/src/server/api/endpoints/drive/files/create.ts
@@ -1,11 +1,13 @@
 import ms from 'ms';
-import { addFile } from '@/services/drive/add-file.js';
-import { DriveFiles } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DriveFilesRepository } from '@/models/index.js';
 import { DB_MAX_IMAGE_COMMENT_LENGTH } from '@/misc/hard-limits.js';
 import { IdentifiableError } from '@/misc/identifiable-error.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import define from '../../../define.js';
-import { apiLogger } from '../../../logger.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
+import { MetaService } from '@/core/MetaService.js';
+import { DriveService } from '@/core/DriveService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -64,48 +66,60 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user, _, file, cleanup, ip, headers) => {
-	// Get 'name' parameter
-	let name = ps.name || file.originalname;
-	if (name !== undefined && name !== null) {
-		name = name.trim();
-		if (name.length === 0) {
-			name = null;
-		} else if (name === 'blob') {
-			name = null;
-		} else if (!DriveFiles.validateFileName(name)) {
-			throw new ApiError(meta.errors.invalidFileName);
-		}
-	} else {
-		name = null;
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
 
-	const meta = await fetchMeta();
+		private driveFileEntityService: DriveFileEntityService,
+		private metaService: MetaService,
+		private driveService: DriveService,
+	) {
+		super(meta, paramDef, async (ps, me, _, file, cleanup, ip, headers) => {
+			// Get 'name' parameter
+			let name = ps.name ?? file.originalname;
+			if (name !== undefined && name !== null) {
+				name = name.trim();
+				if (name.length === 0) {
+					name = null;
+				} else if (name === 'blob') {
+					name = null;
+				} else if (!this.driveFileEntityService.validateFileName(name)) {
+					throw new ApiError(meta.errors.invalidFileName);
+				}
+			} else {
+				name = null;
+			}
 
-	try {
-		// Create file
-		const driveFile = await addFile({
-			user,
-			path: file.path,
-			name,
-			comment: ps.comment,
-			folderId: ps.folderId,
-			force: ps.force,
-			sensitive: ps.isSensitive,
-			requestIp: meta.enableIpLogging ? ip : null,
-			requestHeaders: meta.enableIpLogging ? headers : null,
-		});
-		return await DriveFiles.pack(driveFile, { self: true });
-	} catch (e) {
-		if (e instanceof Error || typeof e === 'string') {
-			apiLogger.error(e);
-		}
-		if (e instanceof IdentifiableError) {
-			if (e.id === '282f77bf-5816-4f72-9264-aa14d8261a21') throw new ApiError(meta.errors.inappropriate);
-			if (e.id === 'c6244ed2-a39a-4e1c-bf93-f0fbd7764fa6') throw new ApiError(meta.errors.noFreeSpace);
-		}
-		throw new ApiError();
-	} finally {
+			const meta = await this.metaService.fetch();
+
+			try {
+				// Create file
+				const driveFile = await this.driveService.addFile({
+					user: me,
+					path: file.path,
+					name,
+					comment: ps.comment,
+					folderId: ps.folderId,
+					force: ps.force,
+					sensitive: ps.isSensitive,
+					requestIp: meta.enableIpLogging ? ip : null,
+					requestHeaders: meta.enableIpLogging ? headers : null,
+				});
+				return await this.driveFileEntityService.pack(driveFile, { self: true });
+			} catch (err) {
+				if (err instanceof Error || typeof err === 'string') {
+					console.error(err);
+				}
+				if (err instanceof IdentifiableError) {
+					if (err.id === '282f77bf-5816-4f72-9264-aa14d8261a21') throw new ApiError(meta.errors.inappropriate);
+					if (err.id === 'c6244ed2-a39a-4e1c-bf93-f0fbd7764fa6') throw new ApiError(meta.errors.noFreeSpace);
+				}
+				throw new ApiError();
+			} finally {
 		cleanup!();
+			}
+		});
 	}
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/files/delete.ts b/packages/backend/src/server/api/endpoints/drive/files/delete.ts
index 6108ae7da9..9d2ea6011a 100644
--- a/packages/backend/src/server/api/endpoints/drive/files/delete.ts
+++ b/packages/backend/src/server/api/endpoints/drive/files/delete.ts
@@ -1,8 +1,10 @@
-import { deleteFile } from '@/services/drive/delete-file.js';
-import { publishDriveStream } from '@/services/stream.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { DriveService } from '@/core/DriveService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { DriveFiles, Users } from '@/models/index.js';
 
 export const meta = {
 	tags: ['drive'],
@@ -37,20 +39,31 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const file = await DriveFiles.findOneBy({ id: ps.fileId });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
 
-	if (file == null) {
-		throw new ApiError(meta.errors.noSuchFile);
-	}
+		private driveService: DriveService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const file = await this.driveFilesRepository.findOneBy({ id: ps.fileId });
 
-	if ((!user.isAdmin && !user.isModerator) && (file.userId !== user.id)) {
-		throw new ApiError(meta.errors.accessDenied);
-	}
+			if (file == null) {
+				throw new ApiError(meta.errors.noSuchFile);
+			}
 
-	// Delete
-	await deleteFile(file);
+			if ((!me.isAdmin && !me.isModerator) && (file.userId !== me.id)) {
+				throw new ApiError(meta.errors.accessDenied);
+			}
 
-	// Publish fileDeleted event
-	publishDriveStream(user.id, 'fileDeleted', file.id);
-});
+			// Delete
+			await this.driveService.deleteFile(file);
+
+			// Publish fileDeleted event
+			this.globalEventService.publishDriveStream(me.id, 'fileDeleted', file.id);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/files/find-by-hash.ts b/packages/backend/src/server/api/endpoints/drive/files/find-by-hash.ts
index f2bc7348c6..6299ca8f6b 100644
--- a/packages/backend/src/server/api/endpoints/drive/files/find-by-hash.ts
+++ b/packages/backend/src/server/api/endpoints/drive/files/find-by-hash.ts
@@ -1,5 +1,8 @@
-import { DriveFiles } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DriveFilesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['drive'],
@@ -30,11 +33,21 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const files = await DriveFiles.findBy({
-		md5: ps.md5,
-		userId: user.id,
-	});
-
-	return await DriveFiles.packMany(files, { self: true });
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private driveFileEntityService: DriveFileEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const files = await this.driveFilesRepository.findBy({
+				md5: ps.md5,
+				userId: me.id,
+			});
+
+			return await this.driveFileEntityService.packMany(files, { self: true });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/files/find.ts b/packages/backend/src/server/api/endpoints/drive/files/find.ts
index 245fb45a65..e4cd5213dd 100644
--- a/packages/backend/src/server/api/endpoints/drive/files/find.ts
+++ b/packages/backend/src/server/api/endpoints/drive/files/find.ts
@@ -1,6 +1,9 @@
-import define from '../../../define.js';
-import { DriveFiles } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
 import { IsNull } from 'typeorm';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -32,12 +35,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const files = await DriveFiles.findBy({
-		name: ps.name,
-		userId: user.id,
-		folderId: ps.folderId ?? IsNull(),
-	});
-
-	return await Promise.all(files.map(file => DriveFiles.pack(file, { self: true })));
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private driveFileEntityService: DriveFileEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const files = await this.driveFilesRepository.findBy({
+				name: ps.name,
+				userId: me.id,
+				folderId: ps.folderId ?? IsNull(),
+			});
+
+			return await Promise.all(files.map(file => this.driveFileEntityService.pack(file, { self: true })));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/files/show.ts b/packages/backend/src/server/api/endpoints/drive/files/show.ts
index 2c604c54c8..bae4d7d66f 100644
--- a/packages/backend/src/server/api/endpoints/drive/files/show.ts
+++ b/packages/backend/src/server/api/endpoints/drive/files/show.ts
@@ -1,6 +1,9 @@
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { DriveFiles, Users } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -52,34 +55,44 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	let file: DriveFile | null = null;
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
 
-	if (ps.fileId) {
-		file = await DriveFiles.findOneBy({ id: ps.fileId });
-	} else if (ps.url) {
-		file = await DriveFiles.findOne({
-			where: [{
-				url: ps.url,
-			}, {
-				webpublicUrl: ps.url,
-			}, {
-				thumbnailUrl: ps.url,
-			}],
-		});
-	}
+		private driveFileEntityService: DriveFileEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			let file: DriveFile | null = null;
 
-	if (file == null) {
-		throw new ApiError(meta.errors.noSuchFile);
-	}
+			if (ps.fileId) {
+				file = await this.driveFilesRepository.findOneBy({ id: ps.fileId });
+			} else if (ps.url) {
+				file = await this.driveFilesRepository.findOne({
+					where: [{
+						url: ps.url,
+					}, {
+						webpublicUrl: ps.url,
+					}, {
+						thumbnailUrl: ps.url,
+					}],
+				});
+			}
 
-	if ((!user.isAdmin && !user.isModerator) && (file.userId !== user.id)) {
-		throw new ApiError(meta.errors.accessDenied);
-	}
+			if (file == null) {
+				throw new ApiError(meta.errors.noSuchFile);
+			}
 
-	return await DriveFiles.pack(file, {
-		detail: true,
-		withUser: true,
-		self: true,
-	});
-});
+			if ((!me.isAdmin && !me.isModerator) && (file.userId !== me.id)) {
+				throw new ApiError(meta.errors.accessDenied);
+			}
+
+			return await this.driveFileEntityService.pack(file, {
+				detail: true,
+				withUser: true,
+				self: true,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/files/update.ts b/packages/backend/src/server/api/endpoints/drive/files/update.ts
index fa2ec8519c..03e3663f08 100644
--- a/packages/backend/src/server/api/endpoints/drive/files/update.ts
+++ b/packages/backend/src/server/api/endpoints/drive/files/update.ts
@@ -1,7 +1,10 @@
-import { publishDriveStream } from '@/services/stream.js';
-import { DriveFiles, DriveFolders, Users } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DriveFilesRepository, DriveFoldersRepository } from '@/models/index.js';
 import { DB_MAX_IMAGE_COMMENT_LENGTH } from '@/misc/hard-limits.js';
-import define from '../../../define.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -59,54 +62,68 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const file = await DriveFiles.findOneBy({ id: ps.fileId });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		@Inject(DI.driveFoldersRepository)
+		private driveFoldersRepository: DriveFoldersRepository,
+
+		private driveFileEntityService: DriveFileEntityService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const file = await this.driveFilesRepository.findOneBy({ id: ps.fileId });
+
+			if (file == null) {
+				throw new ApiError(meta.errors.noSuchFile);
+			}
 
-	if (file == null) {
-		throw new ApiError(meta.errors.noSuchFile);
-	}
+			if ((!me.isAdmin && !me.isModerator) && (file.userId !== me.id)) {
+				throw new ApiError(meta.errors.accessDenied);
+			}
 
-	if ((!user.isAdmin && !user.isModerator) && (file.userId !== user.id)) {
-		throw new ApiError(meta.errors.accessDenied);
-	}
+			if (ps.name) file.name = ps.name;
+			if (!this.driveFileEntityService.validateFileName(file.name)) {
+				throw new ApiError(meta.errors.invalidFileName);
+			}
 
-	if (ps.name) file.name = ps.name;
-	if (!DriveFiles.validateFileName(file.name)) {
-		throw new ApiError(meta.errors.invalidFileName);
-	}
+			if (ps.comment !== undefined) file.comment = ps.comment;
 
-	if (ps.comment !== undefined) file.comment = ps.comment;
+			if (ps.isSensitive !== undefined) file.isSensitive = ps.isSensitive;
 
-	if (ps.isSensitive !== undefined) file.isSensitive = ps.isSensitive;
+			if (ps.folderId !== undefined) {
+				if (ps.folderId === null) {
+					file.folderId = null;
+				} else {
+					const folder = await this.driveFoldersRepository.findOneBy({
+						id: ps.folderId,
+						userId: me.id,
+					});
 
-	if (ps.folderId !== undefined) {
-		if (ps.folderId === null) {
-			file.folderId = null;
-		} else {
-			const folder = await DriveFolders.findOneBy({
-				id: ps.folderId,
-				userId: user.id,
-			});
+					if (folder == null) {
+						throw new ApiError(meta.errors.noSuchFolder);
+					}
 
-			if (folder == null) {
-				throw new ApiError(meta.errors.noSuchFolder);
+					file.folderId = folder.id;
+				}
 			}
 
-			file.folderId = folder.id;
-		}
-	}
-
-	await DriveFiles.update(file.id, {
-		name: file.name,
-		comment: file.comment,
-		folderId: file.folderId,
-		isSensitive: file.isSensitive,
-	});
+			await this.driveFilesRepository.update(file.id, {
+				name: file.name,
+				comment: file.comment,
+				folderId: file.folderId,
+				isSensitive: file.isSensitive,
+			});
 
-	const fileObj = await DriveFiles.pack(file, { self: true });
+			const fileObj = await this.driveFileEntityService.pack(file, { self: true });
 
-	// Publish fileUpdated event
-	publishDriveStream(user.id, 'fileUpdated', fileObj);
+			// Publish fileUpdated event
+			this.globalEventService.publishDriveStream(me.id, 'fileUpdated', fileObj);
 
-	return fileObj;
-});
+			return fileObj;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/files/upload-from-url.ts b/packages/backend/src/server/api/endpoints/drive/files/upload-from-url.ts
index eb8071c3c9..f4f8df3c2b 100644
--- a/packages/backend/src/server/api/endpoints/drive/files/upload-from-url.ts
+++ b/packages/backend/src/server/api/endpoints/drive/files/upload-from-url.ts
@@ -1,9 +1,12 @@
 import ms from 'ms';
-import { uploadFromUrl } from '@/services/drive/upload-from-url.js';
-import { DriveFiles } from '@/models/index.js';
-import { publishMainStream } from '@/services/stream.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DriveFilesRepository } from '@/models/index.js';
 import { DB_MAX_IMAGE_COMMENT_LENGTH } from '@/misc/hard-limits.js';
-import define from '../../../define.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
+import { DriveService } from '@/core/DriveService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['drive'],
@@ -34,13 +37,25 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user, _1, _2, _3, ip, headers) => {
-	uploadFromUrl({ url: ps.url, user, folderId: ps.folderId, sensitive: ps.isSensitive, force: ps.force, comment: ps.comment, requestIp: ip, requestHeaders: headers }).then(file => {
-		DriveFiles.pack(file, { self: true }).then(packedFile => {
-			publishMainStream(user.id, 'urlUploadFinished', {
-				marker: ps.marker,
-				file: packedFile,
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private driveFileEntityService: DriveFileEntityService,
+		private driveService: DriveService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, user, _1, _2, _3, ip, headers) => {
+			this.driveService.uploadFromUrl({ url: ps.url, user, folderId: ps.folderId, sensitive: ps.isSensitive, force: ps.force, comment: ps.comment, requestIp: ip, requestHeaders: headers }).then(file => {
+				this.driveFileEntityService.pack(file, { self: true }).then(packedFile => {
+					this.globalEventService.publishMainStream(user.id, 'urlUploadFinished', {
+						marker: ps.marker,
+						file: packedFile,
+					});
+				});
 			});
 		});
-	});
-});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/folders.ts b/packages/backend/src/server/api/endpoints/drive/folders.ts
index d4d530ba9e..703dc83ecd 100644
--- a/packages/backend/src/server/api/endpoints/drive/folders.ts
+++ b/packages/backend/src/server/api/endpoints/drive/folders.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { DriveFolders } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFoldersRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { DriveFolderEntityService } from '@/core/entities/DriveFolderEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['drive'],
@@ -32,17 +35,28 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = makePaginationQuery(DriveFolders.createQueryBuilder('folder'), ps.sinceId, ps.untilId)
-		.andWhere('folder.userId = :userId', { userId: user.id });
-
-	if (ps.folderId) {
-		query.andWhere('folder.parentId = :parentId', { parentId: ps.folderId });
-	} else {
-		query.andWhere('folder.parentId IS NULL');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFoldersRepository)
+		private driveFoldersRepository: DriveFoldersRepository,
+
+		private driveFolderEntityService: DriveFolderEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.driveFoldersRepository.createQueryBuilder('folder'), ps.sinceId, ps.untilId)
+				.andWhere('folder.userId = :userId', { userId: me.id });
+
+			if (ps.folderId) {
+				query.andWhere('folder.parentId = :parentId', { parentId: ps.folderId });
+			} else {
+				query.andWhere('folder.parentId IS NULL');
+			}
+
+			const folders = await query.take(ps.limit).getMany();
+
+			return await Promise.all(folders.map(folder => this.driveFolderEntityService.pack(folder)));
+		});
 	}
-
-	const folders = await query.take(ps.limit).getMany();
-
-	return await Promise.all(folders.map(folder => DriveFolders.pack(folder)));
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/folders/create.ts b/packages/backend/src/server/api/endpoints/drive/folders/create.ts
index 3d7f514c85..7604eaf489 100644
--- a/packages/backend/src/server/api/endpoints/drive/folders/create.ts
+++ b/packages/backend/src/server/api/endpoints/drive/folders/create.ts
@@ -1,8 +1,11 @@
-import { publishDriveStream } from '@/services/stream.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFoldersRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { DriveFolderEntityService } from '@/core/entities/DriveFolderEntityService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { DriveFolders } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
 
 export const meta = {
 	tags: ['drive'],
@@ -29,41 +32,53 @@ export const meta = {
 export const paramDef = {
 	type: 'object',
 	properties: {
-		name: { type: 'string', default: "Untitled", maxLength: 200 },
+		name: { type: 'string', default: 'Untitled', maxLength: 200 },
 		parentId: { type: 'string', format: 'misskey:id', nullable: true },
 	},
 	required: [],
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// If the parent folder is specified
-	let parent = null;
-	if (ps.parentId) {
-		// Fetch parent folder
-		parent = await DriveFolders.findOneBy({
-			id: ps.parentId,
-			userId: user.id,
-		});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFoldersRepository)
+		private driveFoldersRepository: DriveFoldersRepository,
 
-		if (parent == null) {
-			throw new ApiError(meta.errors.noSuchFolder);
-		}
-	}
+		private driveFolderEntityService: DriveFolderEntityService,
+		private idService: IdService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// If the parent folder is specified
+			let parent = null;
+			if (ps.parentId) {
+				// Fetch parent folder
+				parent = await this.driveFoldersRepository.findOneBy({
+					id: ps.parentId,
+					userId: me.id,
+				});
+
+				if (parent == null) {
+					throw new ApiError(meta.errors.noSuchFolder);
+				}
+			}
 
-	// Create folder
-	const folder = await DriveFolders.insert({
-		id: genId(),
-		createdAt: new Date(),
-		name: ps.name,
-		parentId: parent !== null ? parent.id : null,
-		userId: user.id,
-	}).then(x => DriveFolders.findOneByOrFail(x.identifiers[0]));
+			// Create folder
+			const folder = await this.driveFoldersRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				name: ps.name,
+				parentId: parent !== null ? parent.id : null,
+				userId: me.id,
+			}).then(x => this.driveFoldersRepository.findOneByOrFail(x.identifiers[0]));
 
-	const folderObj = await DriveFolders.pack(folder);
+			const folderObj = await this.driveFolderEntityService.pack(folder);
 
-	// Publish folderCreated event
-	publishDriveStream(user.id, 'folderCreated', folderObj);
+			// Publish folderCreated event
+			this.globalEventService.publishDriveStream(me.id, 'folderCreated', folderObj);
 
-	return folderObj;
-});
+			return folderObj;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/folders/delete.ts b/packages/backend/src/server/api/endpoints/drive/folders/delete.ts
index ab9d411ec0..dcbaecf8af 100644
--- a/packages/backend/src/server/api/endpoints/drive/folders/delete.ts
+++ b/packages/backend/src/server/api/endpoints/drive/folders/delete.ts
@@ -1,7 +1,9 @@
-import define from '../../../define.js';
-import { publishDriveStream } from '@/services/stream.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFoldersRepository, DriveFilesRepository } from '@/models/index.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { DriveFolders, DriveFiles } from '@/models/index.js';
 
 export const meta = {
 	tags: ['drive'],
@@ -34,28 +36,41 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Get folder
-	const folder = await DriveFolders.findOneBy({
-		id: ps.folderId,
-		userId: user.id,
-	});
-
-	if (folder == null) {
-		throw new ApiError(meta.errors.noSuchFolder);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
 
-	const [childFoldersCount, childFilesCount] = await Promise.all([
-		DriveFolders.countBy({ parentId: folder.id }),
-		DriveFiles.countBy({ folderId: folder.id }),
-	]);
+		@Inject(DI.driveFoldersRepository)
+		private driveFoldersRepository: DriveFoldersRepository,
 
-	if (childFoldersCount !== 0 || childFilesCount !== 0) {
-		throw new ApiError(meta.errors.hasChildFilesOrFolders);
-	}
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Get folder
+			const folder = await this.driveFoldersRepository.findOneBy({
+				id: ps.folderId,
+				userId: me.id,
+			});
+
+			if (folder == null) {
+				throw new ApiError(meta.errors.noSuchFolder);
+			}
 
-	await DriveFolders.delete(folder.id);
+			const [childFoldersCount, childFilesCount] = await Promise.all([
+				this.driveFoldersRepository.countBy({ parentId: folder.id }),
+				this.driveFilesRepository.countBy({ folderId: folder.id }),
+			]);
 
-	// Publish folderCreated event
-	publishDriveStream(user.id, 'folderDeleted', folder.id);
-});
+			if (childFoldersCount !== 0 || childFilesCount !== 0) {
+				throw new ApiError(meta.errors.hasChildFilesOrFolders);
+			}
+
+			await this.driveFoldersRepository.delete(folder.id);
+
+			// Publish folderCreated event
+			this.globalEventService.publishDriveStream(me.id, 'folderDeleted', folder.id);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/folders/find.ts b/packages/backend/src/server/api/endpoints/drive/folders/find.ts
index 1feab273a1..96a87344a9 100644
--- a/packages/backend/src/server/api/endpoints/drive/folders/find.ts
+++ b/packages/backend/src/server/api/endpoints/drive/folders/find.ts
@@ -1,6 +1,9 @@
-import define from '../../../define.js';
-import { DriveFolders } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
 import { IsNull } from 'typeorm';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFoldersRepository } from '@/models/index.js';
+import { DriveFolderEntityService } from '@/core/entities/DriveFolderEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['drive'],
@@ -30,12 +33,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const folders = await DriveFolders.findBy({
-		name: ps.name,
-		userId: user.id,
-		parentId: ps.parentId ?? IsNull(),
-	});
-
-	return await Promise.all(folders.map(folder => DriveFolders.pack(folder)));
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFoldersRepository)
+		private driveFoldersRepository: DriveFoldersRepository,
+
+		private driveFolderEntityService: DriveFolderEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const folders = await this.driveFoldersRepository.findBy({
+				name: ps.name,
+				userId: me.id,
+				parentId: ps.parentId ?? IsNull(),
+			});
+
+			return await Promise.all(folders.map(folder => this.driveFolderEntityService.pack(folder)));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/folders/show.ts b/packages/backend/src/server/api/endpoints/drive/folders/show.ts
index 1e7aa2b16c..4c25bc705c 100644
--- a/packages/backend/src/server/api/endpoints/drive/folders/show.ts
+++ b/packages/backend/src/server/api/endpoints/drive/folders/show.ts
@@ -1,6 +1,9 @@
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFoldersRepository } from '@/models/index.js';
+import { DriveFolderEntityService } from '@/core/entities/DriveFolderEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { DriveFolders } from '@/models/index.js';
 
 export const meta = {
 	tags: ['drive'],
@@ -33,18 +36,28 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Get folder
-	const folder = await DriveFolders.findOneBy({
-		id: ps.folderId,
-		userId: user.id,
-	});
-
-	if (folder == null) {
-		throw new ApiError(meta.errors.noSuchFolder);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFoldersRepository)
+		private driveFoldersRepository: DriveFoldersRepository,
+
+		private driveFolderEntityService: DriveFolderEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Get folder
+			const folder = await this.driveFoldersRepository.findOneBy({
+				id: ps.folderId,
+				userId: me.id,
+			});
+
+			if (folder == null) {
+				throw new ApiError(meta.errors.noSuchFolder);
+			}
+
+			return await this.driveFolderEntityService.pack(folder, {
+				detail: true,
+			});
+		});
 	}
-
-	return await DriveFolders.pack(folder, {
-		detail: true,
-	});
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/folders/update.ts b/packages/backend/src/server/api/endpoints/drive/folders/update.ts
index 1aa2e84292..4fcd37bbbf 100644
--- a/packages/backend/src/server/api/endpoints/drive/folders/update.ts
+++ b/packages/backend/src/server/api/endpoints/drive/folders/update.ts
@@ -1,7 +1,10 @@
-import { publishDriveStream } from '@/services/stream.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFoldersRepository } from '@/models/index.js';
+import { DriveFolderEntityService } from '@/core/entities/DriveFolderEntityService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { DriveFolders } from '@/models/index.js';
 
 export const meta = {
 	tags: ['drive'],
@@ -48,71 +51,82 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Fetch folder
-	const folder = await DriveFolders.findOneBy({
-		id: ps.folderId,
-		userId: user.id,
-	});
-
-	if (folder == null) {
-		throw new ApiError(meta.errors.noSuchFolder);
-	}
-
-	if (ps.name) folder.name = ps.name;
-
-	if (ps.parentId !== undefined) {
-		if (ps.parentId === folder.id) {
-			throw new ApiError(meta.errors.recursiveNesting);
-		} else if (ps.parentId === null) {
-			folder.parentId = null;
-		} else {
-			// Get parent folder
-			const parent = await DriveFolders.findOneBy({
-				id: ps.parentId,
-				userId: user.id,
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFoldersRepository)
+		private driveFoldersRepository: DriveFoldersRepository,
+
+		private driveFolderEntityService: DriveFolderEntityService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch folder
+			const folder = await this.driveFoldersRepository.findOneBy({
+				id: ps.folderId,
+				userId: me.id,
 			});
 
-			if (parent == null) {
-				throw new ApiError(meta.errors.noSuchParentFolder);
+			if (folder == null) {
+				throw new ApiError(meta.errors.noSuchFolder);
 			}
 
-			// Check if the circular reference will occur
-			async function checkCircle(folderId: string): Promise<boolean> {
-				// Fetch folder
-				const folder2 = await DriveFolders.findOneBy({
-					id: folderId,
-				});
-
-				if (folder2!.id === folder!.id) {
-					return true;
-				} else if (folder2!.parentId) {
-					return await checkCircle(folder2!.parentId);
-				} else {
-					return false;
-				}
-			}
+			if (ps.name) folder.name = ps.name;
 
-			if (parent.parentId !== null) {
-				if (await checkCircle(parent.parentId)) {
+			if (ps.parentId !== undefined) {
+				if (ps.parentId === folder.id) {
 					throw new ApiError(meta.errors.recursiveNesting);
+				} else if (ps.parentId === null) {
+					folder.parentId = null;
+				} else {
+					// Get parent folder
+					const parent = await this.driveFoldersRepository.findOneBy({
+						id: ps.parentId,
+						userId: me.id,
+					});
+
+					if (parent == null) {
+						throw new ApiError(meta.errors.noSuchParentFolder);
+					}
+
+					// Check if the circular reference will occur
+					const checkCircle = async (folderId: string): Promise<boolean> => {
+						// Fetch folder
+						const folder2 = await this.driveFoldersRepository.findOneBy({
+							id: folderId,
+						});
+
+						if (folder2!.id === folder!.id) {
+							return true;
+						} else if (folder2!.parentId) {
+							return await checkCircle(folder2!.parentId);
+						} else {
+							return false;
+						}
+					};
+
+					if (parent.parentId !== null) {
+						if (await checkCircle(parent.parentId)) {
+							throw new ApiError(meta.errors.recursiveNesting);
+						}
+					}
+
+					folder.parentId = parent.id;
 				}
 			}
 
-			folder.parentId = parent.id;
-		}
-	}
-
-	// Update
-	DriveFolders.update(folder.id, {
-		name: folder.name,
-		parentId: folder.parentId,
-	});
+			// Update
+			this.driveFoldersRepository.update(folder.id, {
+				name: folder.name,
+				parentId: folder.parentId,
+			});
 
-	const folderObj = await DriveFolders.pack(folder);
+			const folderObj = await this.driveFolderEntityService.pack(folder);
 
-	// Publish folderUpdated event
-	publishDriveStream(user.id, 'folderUpdated', folderObj);
+			// Publish folderUpdated event
+			this.globalEventService.publishDriveStream(me.id, 'folderUpdated', folderObj);
 
-	return folderObj;
-});
+			return folderObj;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/drive/stream.ts b/packages/backend/src/server/api/endpoints/drive/stream.ts
index 99e8d024fb..aba73c2092 100644
--- a/packages/backend/src/server/api/endpoints/drive/stream.ts
+++ b/packages/backend/src/server/api/endpoints/drive/stream.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { DriveFiles } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['drive'],
@@ -32,19 +35,30 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = makePaginationQuery(DriveFiles.createQueryBuilder('file'), ps.sinceId, ps.untilId)
-		.andWhere('file.userId = :userId', { userId: user.id });
-
-	if (ps.type) {
-		if (ps.type.endsWith('/*')) {
-			query.andWhere('file.type like :type', { type: ps.type.replace('/*', '/') + '%' });
-		} else {
-			query.andWhere('file.type = :type', { type: ps.type });
-		}
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private driveFileEntityService: DriveFileEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.driveFilesRepository.createQueryBuilder('file'), ps.sinceId, ps.untilId)
+				.andWhere('file.userId = :userId', { userId: me.id });
 
-	const files = await query.take(ps.limit).getMany();
+			if (ps.type) {
+				if (ps.type.endsWith('/*')) {
+					query.andWhere('file.type like :type', { type: ps.type.replace('/*', '/') + '%' });
+				} else {
+					query.andWhere('file.type = :type', { type: ps.type });
+				}
+			}
 
-	return await DriveFiles.packMany(files, { detail: false, self: true });
-});
+			const files = await query.take(ps.limit).getMany();
+
+			return await this.driveFileEntityService.packMany(files, { detail: false, self: true });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/email-address/available.ts b/packages/backend/src/server/api/endpoints/email-address/available.ts
index 07064ce9fa..8a497a514e 100644
--- a/packages/backend/src/server/api/endpoints/email-address/available.ts
+++ b/packages/backend/src/server/api/endpoints/email-address/available.ts
@@ -1,5 +1,6 @@
-import define from '../../define.js';
-import { validateEmailForAccount } from '@/services/validate-email-for-account.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { EmailService } from '@/core/EmailService.js';
 
 export const meta = {
 	tags: ['users'],
@@ -31,6 +32,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	return await validateEmailForAccount(ps.emailAddress);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private emailService: EmailService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return await this.emailService.validateEmailForAccount(ps.emailAddress);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/endpoint.ts b/packages/backend/src/server/api/endpoints/endpoint.ts
index c174126779..2141dfbeb0 100644
--- a/packages/backend/src/server/api/endpoints/endpoint.ts
+++ b/packages/backend/src/server/api/endpoints/endpoint.ts
@@ -1,4 +1,5 @@
-import define from '../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
 import endpoints from '../endpoints.js';
 
 export const meta = {
@@ -16,13 +17,19 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const ep = endpoints.find(x => x.name === ps.endpoint);
-	if (ep == null) return null;
-	return {
-		params: Object.entries(ep.params.properties || {}).map(([k, v]) => ({
-			name: k,
-			type: v.type.charAt(0).toUpperCase() + v.type.slice(1),
-		})),
-	};
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+	) {
+		super(meta, paramDef, async (ps) => {
+			const ep = endpoints.find(x => x.name === ps.endpoint);
+			if (ep == null) return null;
+			return {
+				params: Object.entries(ep.params.properties || {}).map(([k, v]) => ({
+					name: k,
+					type: v.type.charAt(0).toUpperCase() + v.type.slice(1),
+				})),
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/endpoints.ts b/packages/backend/src/server/api/endpoints/endpoints.ts
index b20da96eb3..91fc3ec98d 100644
--- a/packages/backend/src/server/api/endpoints/endpoints.ts
+++ b/packages/backend/src/server/api/endpoints/endpoints.ts
@@ -1,4 +1,5 @@
-import define from '../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
 import endpoints from '../endpoints.js';
 
 export const meta = {
@@ -29,6 +30,12 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async () => {
-	return endpoints.map(x => x.name);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+	) {
+		super(meta, paramDef, async () => {
+			return endpoints.map(x => x.name);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/export-custom-emojis.ts b/packages/backend/src/server/api/endpoints/export-custom-emojis.ts
index 5fe622932d..ead6b037cc 100644
--- a/packages/backend/src/server/api/endpoints/export-custom-emojis.ts
+++ b/packages/backend/src/server/api/endpoints/export-custom-emojis.ts
@@ -1,6 +1,7 @@
 import ms from 'ms';
-import { createExportCustomEmojisJob } from '@/queue/index.js';
-import define from '../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueueService } from '@/core/QueueService.js';
 
 export const meta = {
 	secure: true,
@@ -18,6 +19,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	createExportCustomEmojisJob(user);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private queueService: QueueService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			this.queueService.createExportCustomEmojisJob(me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/federation/followers.ts b/packages/backend/src/server/api/endpoints/federation/followers.ts
index 7b1197d1e5..e5222fcbfd 100644
--- a/packages/backend/src/server/api/endpoints/federation/followers.ts
+++ b/packages/backend/src/server/api/endpoints/federation/followers.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { Followings } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { FollowingsRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { FollowingEntityService } from '@/core/entities/FollowingEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['federation'],
@@ -30,13 +33,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = makePaginationQuery(Followings.createQueryBuilder('following'), ps.sinceId, ps.untilId)
-		.andWhere(`following.followeeHost = :host`, { host: ps.host });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
 
-	const followings = await query
-		.take(ps.limit)
-		.getMany();
+		private followingEntityService: FollowingEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.followingsRepository.createQueryBuilder('following'), ps.sinceId, ps.untilId)
+				.andWhere('following.followeeHost = :host', { host: ps.host });
 
-	return await Followings.packMany(followings, me, { populateFollowee: true });
-});
+			const followings = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await this.followingEntityService.packMany(followings, me, { populateFollowee: true });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/federation/following.ts b/packages/backend/src/server/api/endpoints/federation/following.ts
index ed1f142d88..a20c5a31b3 100644
--- a/packages/backend/src/server/api/endpoints/federation/following.ts
+++ b/packages/backend/src/server/api/endpoints/federation/following.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { Followings } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { FollowingsRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { FollowingEntityService } from '@/core/entities/FollowingEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['federation'],
@@ -30,13 +33,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = makePaginationQuery(Followings.createQueryBuilder('following'), ps.sinceId, ps.untilId)
-		.andWhere(`following.followerHost = :host`, { host: ps.host });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
 
-	const followings = await query
-		.take(ps.limit)
-		.getMany();
+		private followingEntityService: FollowingEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.followingsRepository.createQueryBuilder('following'), ps.sinceId, ps.untilId)
+				.andWhere('following.followerHost = :host', { host: ps.host });
 
-	return await Followings.packMany(followings, me, { populateFollowee: true });
-});
+			const followings = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await this.followingEntityService.packMany(followings, me, { populateFollowee: true });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/federation/instances.ts b/packages/backend/src/server/api/endpoints/federation/instances.ts
index 07e5c07c6a..e7f8cefff5 100644
--- a/packages/backend/src/server/api/endpoints/federation/instances.ts
+++ b/packages/backend/src/server/api/endpoints/federation/instances.ts
@@ -1,7 +1,9 @@
-import config from '@/config/index.js';
-import define from '../../define.js';
-import { Instances } from '@/models/index.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { InstancesRepository } from '@/models/index.js';
+import { InstanceEntityService } from '@/core/entities/InstanceEntityService.js';
+import { MetaService } from '@/core/MetaService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['federation'],
@@ -37,82 +39,93 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = Instances.createQueryBuilder('instance');
-
-	switch (ps.sort) {
-		case '+pubSub': query.orderBy('instance.followingCount', 'DESC').orderBy('instance.followersCount', 'DESC'); break;
-		case '-pubSub': query.orderBy('instance.followingCount', 'ASC').orderBy('instance.followersCount', 'ASC'); break;
-		case '+notes': query.orderBy('instance.notesCount', 'DESC'); break;
-		case '-notes': query.orderBy('instance.notesCount', 'ASC'); break;
-		case '+users': query.orderBy('instance.usersCount', 'DESC'); break;
-		case '-users': query.orderBy('instance.usersCount', 'ASC'); break;
-		case '+following': query.orderBy('instance.followingCount', 'DESC'); break;
-		case '-following': query.orderBy('instance.followingCount', 'ASC'); break;
-		case '+followers': query.orderBy('instance.followersCount', 'DESC'); break;
-		case '-followers': query.orderBy('instance.followersCount', 'ASC'); break;
-		case '+caughtAt': query.orderBy('instance.caughtAt', 'DESC'); break;
-		case '-caughtAt': query.orderBy('instance.caughtAt', 'ASC'); break;
-		case '+lastCommunicatedAt': query.orderBy('instance.lastCommunicatedAt', 'DESC'); break;
-		case '-lastCommunicatedAt': query.orderBy('instance.lastCommunicatedAt', 'ASC'); break;
-
-		default: query.orderBy('instance.id', 'DESC'); break;
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
+
+		private instanceEntityService: InstanceEntityService,
+		private metaService: MetaService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.instancesRepository.createQueryBuilder('instance');
+
+			switch (ps.sort) {
+				case '+pubSub': query.orderBy('instance.followingCount', 'DESC').orderBy('instance.followersCount', 'DESC'); break;
+				case '-pubSub': query.orderBy('instance.followingCount', 'ASC').orderBy('instance.followersCount', 'ASC'); break;
+				case '+notes': query.orderBy('instance.notesCount', 'DESC'); break;
+				case '-notes': query.orderBy('instance.notesCount', 'ASC'); break;
+				case '+users': query.orderBy('instance.usersCount', 'DESC'); break;
+				case '-users': query.orderBy('instance.usersCount', 'ASC'); break;
+				case '+following': query.orderBy('instance.followingCount', 'DESC'); break;
+				case '-following': query.orderBy('instance.followingCount', 'ASC'); break;
+				case '+followers': query.orderBy('instance.followersCount', 'DESC'); break;
+				case '-followers': query.orderBy('instance.followersCount', 'ASC'); break;
+				case '+caughtAt': query.orderBy('instance.caughtAt', 'DESC'); break;
+				case '-caughtAt': query.orderBy('instance.caughtAt', 'ASC'); break;
+				case '+lastCommunicatedAt': query.orderBy('instance.lastCommunicatedAt', 'DESC'); break;
+				case '-lastCommunicatedAt': query.orderBy('instance.lastCommunicatedAt', 'ASC'); break;
+
+				default: query.orderBy('instance.id', 'DESC'); break;
+			}
+
+			if (typeof ps.blocked === 'boolean') {
+				const meta = await this.metaService.fetch(true);
+				if (ps.blocked) {
+					query.andWhere('instance.host IN (:...blocks)', { blocks: meta.blockedHosts });
+				} else {
+					query.andWhere('instance.host NOT IN (:...blocks)', { blocks: meta.blockedHosts });
+				}
+			}
+
+			if (typeof ps.notResponding === 'boolean') {
+				if (ps.notResponding) {
+					query.andWhere('instance.isNotResponding = TRUE');
+				} else {
+					query.andWhere('instance.isNotResponding = FALSE');
+				}
+			}
+
+			if (typeof ps.suspended === 'boolean') {
+				if (ps.suspended) {
+					query.andWhere('instance.isSuspended = TRUE');
+				} else {
+					query.andWhere('instance.isSuspended = FALSE');
+				}
+			}
+
+			if (typeof ps.federating === 'boolean') {
+				if (ps.federating) {
+					query.andWhere('((instance.followingCount > 0) OR (instance.followersCount > 0))');
+				} else {
+					query.andWhere('((instance.followingCount = 0) AND (instance.followersCount = 0))');
+				}
+			}
+
+			if (typeof ps.subscribing === 'boolean') {
+				if (ps.subscribing) {
+					query.andWhere('instance.followersCount > 0');
+				} else {
+					query.andWhere('instance.followersCount = 0');
+				}
+			}
+
+			if (typeof ps.publishing === 'boolean') {
+				if (ps.publishing) {
+					query.andWhere('instance.followingCount > 0');
+				} else {
+					query.andWhere('instance.followingCount = 0');
+				}
+			}
+
+			if (ps.host) {
+				query.andWhere('instance.host like :host', { host: '%' + ps.host.toLowerCase() + '%' });
+			}
+
+			const instances = await query.take(ps.limit).skip(ps.offset).getMany();
+
+			return await this.instanceEntityService.packMany(instances);
+		});
 	}
-
-	if (typeof ps.blocked === 'boolean') {
-		const meta = await fetchMeta(true);
-		if (ps.blocked) {
-			query.andWhere('instance.host IN (:...blocks)', { blocks: meta.blockedHosts });
-		} else {
-			query.andWhere('instance.host NOT IN (:...blocks)', { blocks: meta.blockedHosts });
-		}
-	}
-
-	if (typeof ps.notResponding === 'boolean') {
-		if (ps.notResponding) {
-			query.andWhere('instance.isNotResponding = TRUE');
-		} else {
-			query.andWhere('instance.isNotResponding = FALSE');
-		}
-	}
-
-	if (typeof ps.suspended === 'boolean') {
-		if (ps.suspended) {
-			query.andWhere('instance.isSuspended = TRUE');
-		} else {
-			query.andWhere('instance.isSuspended = FALSE');
-		}
-	}
-
-	if (typeof ps.federating === 'boolean') {
-		if (ps.federating) {
-			query.andWhere('((instance.followingCount > 0) OR (instance.followersCount > 0))');
-		} else {
-			query.andWhere('((instance.followingCount = 0) AND (instance.followersCount = 0))');
-		}
-	}
-
-	if (typeof ps.subscribing === 'boolean') {
-		if (ps.subscribing) {
-			query.andWhere('instance.followersCount > 0');
-		} else {
-			query.andWhere('instance.followersCount = 0');
-		}
-	}
-
-	if (typeof ps.publishing === 'boolean') {
-		if (ps.publishing) {
-			query.andWhere('instance.followingCount > 0');
-		} else {
-			query.andWhere('instance.followingCount = 0');
-		}
-	}
-
-	if (ps.host) {
-		query.andWhere('instance.host like :host', { host: '%' + ps.host.toLowerCase() + '%' });
-	}
-
-	const instances = await query.take(ps.limit).skip(ps.offset).getMany();
-
-	return await Instances.packMany(instances);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/federation/show-instance.ts b/packages/backend/src/server/api/endpoints/federation/show-instance.ts
index 2fbb8a15cb..f855b54537 100644
--- a/packages/backend/src/server/api/endpoints/federation/show-instance.ts
+++ b/packages/backend/src/server/api/endpoints/federation/show-instance.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { Instances } from '@/models/index.js';
-import { toPuny } from '@/misc/convert-host.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { InstancesRepository } from '@/models/index.js';
+import { InstanceEntityService } from '@/core/entities/InstanceEntityService.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['federation'],
@@ -26,9 +29,20 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const instance = await Instances
-		.findOneBy({ host: toPuny(ps.host) });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
 
-	return instance ? await Instances.pack(instance) : null;
-});
+		private utilityService: UtilityService,
+		private instanceEntityService: InstanceEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const instance = await this.instancesRepository
+				.findOneBy({ host: this.utilityService.toPuny(ps.host) });
+
+			return instance ? await this.instanceEntityService.pack(instance) : null;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/federation/stats.ts b/packages/backend/src/server/api/endpoints/federation/stats.ts
index e02c7b97e0..d07a08637f 100644
--- a/packages/backend/src/server/api/endpoints/federation/stats.ts
+++ b/packages/backend/src/server/api/endpoints/federation/stats.ts
@@ -1,7 +1,10 @@
 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';
+import { Inject, Injectable } from '@nestjs/common';
+import { FollowingsRepository, InstancesRepository } from '@/models/index.js';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { InstanceEntityService } from '@/core/entities/InstanceEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['federation'],
@@ -21,45 +24,58 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const [topSubInstances, topPubInstances, allSubCount, allPubCount] = await Promise.all([
-		Instances.find({
-			where: {
-				followersCount: MoreThan(0),
-			},
-			order: {
-				followersCount: 'DESC',
-			},
-			take: ps.limit,
-		}),
-		Instances.find({
-			where: {
-				followingCount: MoreThan(0),
-			},
-			order: {
-				followingCount: 'DESC',
-			},
-			take: ps.limit,
-		}),
-		Followings.count({
-			where: {
-				followeeHost: Not(IsNull()),
-			},
-		}),
-		Followings.count({
-			where: {
-				followerHost: Not(IsNull()),
-			},
-		}),
-	]);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
 
-	const gotSubCount = topSubInstances.map(x => x.followersCount).reduce((a, b) => a + b, 0);
-	const gotPubCount = topPubInstances.map(x => x.followingCount).reduce((a, b) => a + b, 0);
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
 
-	return await awaitAll({
-		topSubInstances: Instances.packMany(topSubInstances),
-		otherFollowersCount: Math.max(0, allSubCount - gotSubCount),
-		topPubInstances: Instances.packMany(topPubInstances),
-		otherFollowingCount: Math.max(0, allPubCount - gotPubCount),
-	});
-});
+		private instanceEntityService: InstanceEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const [topSubInstances, topPubInstances, allSubCount, allPubCount] = await Promise.all([
+				this.instancesRepository.find({
+					where: {
+						followersCount: MoreThan(0),
+					},
+					order: {
+						followersCount: 'DESC',
+					},
+					take: ps.limit,
+				}),
+				this.instancesRepository.find({
+					where: {
+						followingCount: MoreThan(0),
+					},
+					order: {
+						followingCount: 'DESC',
+					},
+					take: ps.limit,
+				}),
+				this.followingsRepository.count({
+					where: {
+						followeeHost: Not(IsNull()),
+					},
+				}),
+				this.followingsRepository.count({
+					where: {
+						followerHost: Not(IsNull()),
+					},
+				}),
+			]);
+
+			const gotSubCount = topSubInstances.map(x => x.followersCount).reduce((a, b) => a + b, 0);
+			const gotPubCount = topPubInstances.map(x => x.followingCount).reduce((a, b) => a + b, 0);
+
+			return await awaitAll({
+				topSubInstances: this.instanceEntityService.packMany(topSubInstances),
+				otherFollowersCount: Math.max(0, allSubCount - gotSubCount),
+				topPubInstances: this.instanceEntityService.packMany(topPubInstances),
+				otherFollowingCount: Math.max(0, allPubCount - gotPubCount),
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/federation/update-remote-user.ts b/packages/backend/src/server/api/endpoints/federation/update-remote-user.ts
index 409cc7695e..57497bbf62 100644
--- a/packages/backend/src/server/api/endpoints/federation/update-remote-user.ts
+++ b/packages/backend/src/server/api/endpoints/federation/update-remote-user.ts
@@ -1,6 +1,7 @@
-import define from '../../define.js';
-import { getRemoteUser } from '../../common/getters.js';
-import { updatePerson } from '@/remote/activitypub/models/person.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ApPersonService } from '@/core/remote/activitypub/models/ApPersonService.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['federation'],
@@ -17,7 +18,15 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const user = await getRemoteUser(ps.userId);
-	await updatePerson(user.uri!);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private getterService: GetterService,
+		private apPersonService: ApPersonService,
+	) {
+		super(meta, paramDef, async (ps) => {
+			const user = await this.getterService.getRemoteUser(ps.userId);
+			await this.apPersonService.updatePerson(user.uri!);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/federation/users.ts b/packages/backend/src/server/api/endpoints/federation/users.ts
index 65ad9f88d3..0400cacd02 100644
--- a/packages/backend/src/server/api/endpoints/federation/users.ts
+++ b/packages/backend/src/server/api/endpoints/federation/users.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { Users } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['federation'],
@@ -30,13 +33,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = makePaginationQuery(Users.createQueryBuilder('user'), ps.sinceId, ps.untilId)
-		.andWhere(`user.host = :host`, { host: ps.host });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	const users = await query
-		.take(ps.limit)
-		.getMany();
+		private userEntityService: UserEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.usersRepository.createQueryBuilder('user'), ps.sinceId, ps.untilId)
+				.andWhere('user.host = :host', { host: ps.host });
 
-	return await Users.packMany(users, me, { detail: true });
-});
+			const users = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await this.userEntityService.packMany(users, me, { detail: true });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/fetch-rss.ts b/packages/backend/src/server/api/endpoints/fetch-rss.ts
index 05fa22a9e4..9e6a3cc717 100644
--- a/packages/backend/src/server/api/endpoints/fetch-rss.ts
+++ b/packages/backend/src/server/api/endpoints/fetch-rss.ts
@@ -1,7 +1,9 @@
 import Parser from 'rss-parser';
-import { getResponse } from '@/misc/fetch.js';
-import config from '@/config/index.js';
-import define from '../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { Config } from '@/config.js';
+import { DI } from '@/di-symbols.js';
+import { HttpRequestService } from '@/core/HttpRequestService.js';
 
 const rssParser = new Parser();
 
@@ -22,18 +24,28 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const res = await getResponse({
-		url: ps.url,
-		method: 'GET',
-		headers: Object.assign({
-			'User-Agent': config.userAgent,
-			Accept: 'application/rss+xml, */*',
-		}),
-		timeout: 5000,
-	});
-
-	const text = await res.text();
-
-	return rssParser.parseString(text);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		private httpRequestService: HttpRequestService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const res = await this.httpRequestService.getResponse({
+				url: ps.url,
+				method: 'GET',
+				headers: Object.assign({
+					'User-Agent': config.userAgent,
+					Accept: 'application/rss+xml, */*',
+				}),
+				timeout: 5000,
+			});
+
+			const text = await res.text();
+
+			return rssParser.parseString(text);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/following/create.ts b/packages/backend/src/server/api/endpoints/following/create.ts
index 02a030cd5e..3a06c63d52 100644
--- a/packages/backend/src/server/api/endpoints/following/create.ts
+++ b/packages/backend/src/server/api/endpoints/following/create.ts
@@ -1,10 +1,13 @@
 import ms from 'ms';
-import create from '@/services/following/create.js';
-import define from '../../define.js';
-import { ApiError } from '../../error.js';
-import { getUser } from '../../common/getters.js';
-import { Followings, Users } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository, FollowingsRepository } from '@/models/index.js';
 import { IdentifiableError } from '@/misc/identifiable-error.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { UserFollowingService } from '@/core/UserFollowingService.js';
+import { DI } from '@/di-symbols.js';
+import { ApiError } from '../../error.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['following', 'users'],
@@ -66,39 +69,54 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const follower = user;
-
-	// 自分自身
-	if (user.id === ps.userId) {
-		throw new ApiError(meta.errors.followeeIsYourself);
-	}
-
-	// Get followee
-	const followee = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
-
-	// Check if already following
-	const exist = await Followings.findOneBy({
-		followerId: follower.id,
-		followeeId: followee.id,
-	});
-
-	if (exist != null) {
-		throw new ApiError(meta.errors.alreadyFollowing);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		private userEntityService: UserEntityService,
+		private getterService: GetterService,
+		private userFollowingService: UserFollowingService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const follower = me;
+
+			// 自分自身
+			if (me.id === ps.userId) {
+				throw new ApiError(meta.errors.followeeIsYourself);
+			}
+
+			// Get followee
+			const followee = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
+
+			// Check if already following
+			const exist = await this.followingsRepository.findOneBy({
+				followerId: follower.id,
+				followeeId: followee.id,
+			});
+
+			if (exist != null) {
+				throw new ApiError(meta.errors.alreadyFollowing);
+			}
+
+			try {
+				await this.userFollowingService.follow(follower, followee);
+			} catch (e) {
+				if (e instanceof IdentifiableError) {
+					if (e.id === '710e8fb0-b8c3-4922-be49-d5d93d8e6a6e') throw new ApiError(meta.errors.blocking);
+					if (e.id === '3338392a-f764-498d-8855-db939dcf8c48') throw new ApiError(meta.errors.blocked);
+				}
+				throw e;
+			}
+
+			return await this.userEntityService.pack(followee.id, me);
+		});
 	}
-
-	try {
-		await create(follower, followee);
-	} catch (e) {
-		if (e instanceof IdentifiableError) {
-			if (e.id === '710e8fb0-b8c3-4922-be49-d5d93d8e6a6e') throw new ApiError(meta.errors.blocking);
-			if (e.id === '3338392a-f764-498d-8855-db939dcf8c48') throw new ApiError(meta.errors.blocked);
-		}
-		throw e;
-	}
-
-	return await Users.pack(followee.id, user);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/following/delete.ts b/packages/backend/src/server/api/endpoints/following/delete.ts
index 2f41b16e9a..07366bc821 100644
--- a/packages/backend/src/server/api/endpoints/following/delete.ts
+++ b/packages/backend/src/server/api/endpoints/following/delete.ts
@@ -1,9 +1,12 @@
 import ms from 'ms';
-import deleteFollowing from '@/services/following/delete.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository, FollowingsRepository } from '@/models/index.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { UserFollowingService } from '@/core/UserFollowingService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { getUser } from '../../common/getters.js';
-import { Followings, Users } from '@/models/index.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['following', 'users'],
@@ -53,31 +56,46 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const follower = user;
-
-	// Check if the followee is yourself
-	if (user.id === ps.userId) {
-		throw new ApiError(meta.errors.followeeIsYourself);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		private userEntityService: UserEntityService,
+		private getterService: GetterService,
+		private userFollowingService: UserFollowingService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const follower = me;
+
+			// Check if the followee is yourself
+			if (me.id === ps.userId) {
+				throw new ApiError(meta.errors.followeeIsYourself);
+			}
+
+			// Get followee
+			const followee = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
+
+			// Check not following
+			const exist = await this.followingsRepository.findOneBy({
+				followerId: follower.id,
+				followeeId: followee.id,
+			});
+
+			if (exist == null) {
+				throw new ApiError(meta.errors.notFollowing);
+			}
+
+			await this.userFollowingService.unfollow(follower, followee);
+
+			return await this.userEntityService.pack(followee.id, me);
+		});
 	}
-
-	// Get followee
-	const followee = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
-
-	// Check not following
-	const exist = await Followings.findOneBy({
-		followerId: follower.id,
-		followeeId: followee.id,
-	});
-
-	if (exist == null) {
-		throw new ApiError(meta.errors.notFollowing);
-	}
-
-	await deleteFollowing(follower, followee);
-
-	return await Users.pack(followee.id, user);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/following/invalidate.ts b/packages/backend/src/server/api/endpoints/following/invalidate.ts
index 18ec5affe8..8285189d66 100644
--- a/packages/backend/src/server/api/endpoints/following/invalidate.ts
+++ b/packages/backend/src/server/api/endpoints/following/invalidate.ts
@@ -1,9 +1,12 @@
 import ms from 'ms';
-import deleteFollowing from '@/services/following/delete.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository, FollowingsRepository } from '@/models/index.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { UserFollowingService } from '@/core/UserFollowingService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { getUser } from '../../common/getters.js';
-import { Followings, Users } from '@/models/index.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['following', 'users'],
@@ -53,31 +56,46 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const followee = user;
-
-	// Check if the follower is yourself
-	if (user.id === ps.userId) {
-		throw new ApiError(meta.errors.followerIsYourself);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		private userEntityService: UserEntityService,
+		private getterService: GetterService,
+		private userFollowingService: UserFollowingService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const followee = me;
+
+			// Check if the follower is yourself
+			if (me.id === ps.userId) {
+				throw new ApiError(meta.errors.followerIsYourself);
+			}
+
+			// Get follower
+			const follower = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
+
+			// Check not following
+			const exist = await this.followingsRepository.findOneBy({
+				followerId: follower.id,
+				followeeId: followee.id,
+			});
+
+			if (exist == null) {
+				throw new ApiError(meta.errors.notFollowing);
+			}
+
+			await this.userFollowingService.unfollow(follower, followee);
+
+			return await this.userEntityService.pack(followee.id, me);
+		});
 	}
-
-	// Get follower
-	const follower = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
-
-	// Check not following
-	const exist = await Followings.findOneBy({
-		followerId: follower.id,
-		followeeId: followee.id,
-	});
-
-	if (exist == null) {
-		throw new ApiError(meta.errors.notFollowing);
-	}
-
-	await deleteFollowing(follower, followee);
-
-	return await Users.pack(followee.id, user);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/following/requests/accept.ts b/packages/backend/src/server/api/endpoints/following/requests/accept.ts
index e5df55375e..5f082c087a 100644
--- a/packages/backend/src/server/api/endpoints/following/requests/accept.ts
+++ b/packages/backend/src/server/api/endpoints/following/requests/accept.ts
@@ -1,7 +1,8 @@
-import acceptFollowRequest from '@/services/following/requests/accept.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { UserFollowingService } from '@/core/UserFollowingService.js';
 import { ApiError } from '../../../error.js';
-import { getUser } from '../../../common/getters.js';
 
 export const meta = {
 	tags: ['following', 'account'],
@@ -33,17 +34,25 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Fetch follower
-	const follower = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
-
-	await acceptFollowRequest(user, follower).catch(e => {
-		if (e.id === '8884c2dd-5795-4ac9-b27e-6a01d38190f9') throw new ApiError(meta.errors.noFollowRequest);
-		throw e;
-	});
-
-	return;
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private getterService: GetterService,
+		private userFollowingService: UserFollowingService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch follower
+			const follower = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
+
+			await this.userFollowingService.acceptFollowRequest(me, follower).catch(err => {
+				if (err.id === '8884c2dd-5795-4ac9-b27e-6a01d38190f9') throw new ApiError(meta.errors.noFollowRequest);
+				throw err;
+			});
+
+			return;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/following/requests/cancel.ts b/packages/backend/src/server/api/endpoints/following/requests/cancel.ts
index 80d37fb075..0b79a80649 100644
--- a/packages/backend/src/server/api/endpoints/following/requests/cancel.ts
+++ b/packages/backend/src/server/api/endpoints/following/requests/cancel.ts
@@ -1,9 +1,13 @@
-import cancelFollowRequest from '@/services/following/requests/cancel.js';
-import define from '../../../define.js';
-import { ApiError } from '../../../error.js';
-import { getUser } from '../../../common/getters.js';
-import { Users } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { FollowingsRepository } from '@/models/index.js';
+import type { UsersRepository } from '@/models/index.js';
 import { IdentifiableError } from '@/misc/identifiable-error.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { UserFollowingService } from '@/core/UserFollowingService.js';
+import { DI } from '@/di-symbols.js';
+import { ApiError } from '../../../error.js';
 
 export const meta = {
 	tags: ['following', 'account'],
@@ -42,21 +46,33 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Fetch followee
-	const followee = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
-
-	try {
-		await cancelFollowRequest(followee, user);
-	} catch (e) {
-		if (e instanceof IdentifiableError) {
-			if (e.id === '17447091-ce07-46dd-b331-c1fd4f15b1e7') throw new ApiError(meta.errors.followRequestNotFound);
-		}
-		throw e;
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
 
-	return await Users.pack(followee.id, user);
-});
+		private userEntityService: UserEntityService,
+		private getterService: GetterService,
+		private userFollowingService: UserFollowingService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch followee
+			const followee = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
+
+			try {
+				await this.userFollowingService.cancelFollowRequest(followee, me);
+			} catch (err) {
+				if (err instanceof IdentifiableError) {
+					if (err.id === '17447091-ce07-46dd-b331-c1fd4f15b1e7') throw new ApiError(meta.errors.followRequestNotFound);
+				}
+				throw err;
+			}
+
+			return await this.userEntityService.pack(followee.id, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/following/requests/list.ts b/packages/backend/src/server/api/endpoints/following/requests/list.ts
index a8f42c481d..c36d4a077f 100644
--- a/packages/backend/src/server/api/endpoints/following/requests/list.ts
+++ b/packages/backend/src/server/api/endpoints/following/requests/list.ts
@@ -1,5 +1,8 @@
-import define from '../../../define.js';
-import { FollowRequests } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { FollowRequestsRepository } from '@/models/index.js';
+import { FollowRequestEntityService } from '@/core/entities/FollowRequestEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['following', 'account'],
@@ -42,10 +45,20 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const reqs = await FollowRequests.findBy({
-		followeeId: user.id,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.followRequestsRepository)
+		private followRequestsRepository: FollowRequestsRepository,
 
-	return await Promise.all(reqs.map(req => FollowRequests.pack(req)));
-});
+		private followRequestEntityService: FollowRequestEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const reqs = await this.followRequestsRepository.findBy({
+				followeeId: me.id,
+			});
+
+			return await Promise.all(reqs.map(req => this.followRequestEntityService.pack(req)));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/following/requests/reject.ts b/packages/backend/src/server/api/endpoints/following/requests/reject.ts
index cebe604284..663c659bf3 100644
--- a/packages/backend/src/server/api/endpoints/following/requests/reject.ts
+++ b/packages/backend/src/server/api/endpoints/following/requests/reject.ts
@@ -1,7 +1,8 @@
-import { rejectFollowRequest } from '@/services/following/reject.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { UserFollowingService } from '@/core/UserFollowingService.js';
 import { ApiError } from '../../../error.js';
-import { getUser } from '../../../common/getters.js';
 
 export const meta = {
 	tags: ['following', 'account'],
@@ -28,14 +29,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Fetch follower
-	const follower = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
-
-	await rejectFollowRequest(user, follower);
-
-	return;
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private getterService: GetterService,
+		private userFollowingService: UserFollowingService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch follower
+			const follower = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
+
+			await this.userFollowingService.rejectFollowRequest(me, follower);
+
+			return;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/gallery/featured.ts b/packages/backend/src/server/api/endpoints/gallery/featured.ts
index e6acd36911..3b892ef522 100644
--- a/packages/backend/src/server/api/endpoints/gallery/featured.ts
+++ b/packages/backend/src/server/api/endpoints/gallery/featured.ts
@@ -1,5 +1,8 @@
-import define from '../../define.js';
-import { GalleryPosts } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GalleryPostsRepository } from '@/models/index.js';
+import { GalleryPostEntityService } from '@/core/entities/GalleryPostEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['gallery'],
@@ -24,13 +27,23 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = GalleryPosts.createQueryBuilder('post')
-		.andWhere('post.createdAt > :date', { date: new Date(Date.now() - (1000 * 60 * 60 * 24 * 3)) })
-		.andWhere('post.likedCount > 0')
-		.orderBy('post.likedCount', 'DESC');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.galleryPostsRepository)
+		private galleryPostsRepository: GalleryPostsRepository,
 
-	const posts = await query.take(10).getMany();
+		private galleryPostEntityService: GalleryPostEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.galleryPostsRepository.createQueryBuilder('post')
+				.andWhere('post.createdAt > :date', { date: new Date(Date.now() - (1000 * 60 * 60 * 24 * 3)) })
+				.andWhere('post.likedCount > 0')
+				.orderBy('post.likedCount', 'DESC');
 
-	return await GalleryPosts.packMany(posts, me);
-});
+			const posts = await query.take(10).getMany();
+
+			return await this.galleryPostEntityService.packMany(posts, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/gallery/popular.ts b/packages/backend/src/server/api/endpoints/gallery/popular.ts
index c4c8982fcc..551ea64835 100644
--- a/packages/backend/src/server/api/endpoints/gallery/popular.ts
+++ b/packages/backend/src/server/api/endpoints/gallery/popular.ts
@@ -1,5 +1,8 @@
-import define from '../../define.js';
-import { GalleryPosts } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GalleryPostsRepository } from '@/models/index.js';
+import { GalleryPostEntityService } from '@/core/entities/GalleryPostEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['gallery'],
@@ -24,12 +27,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = GalleryPosts.createQueryBuilder('post')
-		.andWhere('post.likedCount > 0')
-		.orderBy('post.likedCount', 'DESC');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.galleryPostsRepository)
+		private galleryPostsRepository: GalleryPostsRepository,
 
-	const posts = await query.take(10).getMany();
+		private galleryPostEntityService: GalleryPostEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.galleryPostsRepository.createQueryBuilder('post')
+				.andWhere('post.likedCount > 0')
+				.orderBy('post.likedCount', 'DESC');
 
-	return await GalleryPosts.packMany(posts, me);
-});
+			const posts = await query.take(10).getMany();
+
+			return await this.galleryPostEntityService.packMany(posts, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/gallery/posts.ts b/packages/backend/src/server/api/endpoints/gallery/posts.ts
index 428ba9cc71..4afcbce816 100644
--- a/packages/backend/src/server/api/endpoints/gallery/posts.ts
+++ b/packages/backend/src/server/api/endpoints/gallery/posts.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
-import { GalleryPosts } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GalleryPostsRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { GalleryPostEntityService } from '@/core/entities/GalleryPostEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['gallery'],
@@ -27,11 +30,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = makePaginationQuery(GalleryPosts.createQueryBuilder('post'), ps.sinceId, ps.untilId)
-		.innerJoinAndSelect('post.user', 'user');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.galleryPostsRepository)
+		private galleryPostsRepository: GalleryPostsRepository,
 
-	const posts = await query.take(ps.limit).getMany();
+		private galleryPostEntityService: GalleryPostEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.galleryPostsRepository.createQueryBuilder('post'), ps.sinceId, ps.untilId)
+				.innerJoinAndSelect('post.user', 'user');
 
-	return await GalleryPosts.packMany(posts, me);
-});
+			const posts = await query.take(ps.limit).getMany();
+
+			return await this.galleryPostEntityService.packMany(posts, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/gallery/posts/create.ts b/packages/backend/src/server/api/endpoints/gallery/posts/create.ts
index 8074a3b34f..9e8bcac131 100644
--- a/packages/backend/src/server/api/endpoints/gallery/posts/create.ts
+++ b/packages/backend/src/server/api/endpoints/gallery/posts/create.ts
@@ -1,10 +1,13 @@
 import ms from 'ms';
-import define from '../../../define.js';
-import { DriveFiles, GalleryPosts } from '@/models/index.js';
-import { genId } from '../../../../../misc/gen-id.js';
-import { GalleryPost } from '@/models/entities/gallery-post.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFilesRepository, GalleryPostsRepository } from '@/models/index.js';
+import { GalleryPost } from '@/models/entities/GalleryPost.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import { IdService } from '@/core/IdService.js';
+import { GalleryPostEntityService } from '@/core/entities/GalleryPostEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
 
 export const meta = {
 	tags: ['gallery'],
@@ -43,28 +46,42 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const files = (await Promise.all(ps.fileIds.map(fileId =>
-		DriveFiles.findOneBy({
-			id: fileId,
-			userId: user.id,
-		})
-	))).filter((file): file is DriveFile => file != null);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.galleryPostsRepository)
+		private galleryPostsRepository: GalleryPostsRepository,
 
-	if (files.length === 0) {
-		throw new Error();
-	}
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private galleryPostEntityService: GalleryPostEntityService,
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const files = (await Promise.all(ps.fileIds.map(fileId =>
+				this.driveFilesRepository.findOneBy({
+					id: fileId,
+					userId: me.id,
+				}),
+			))).filter((file): file is DriveFile => file != null);
 
-	const post = await GalleryPosts.insert(new GalleryPost({
-		id: genId(),
-		createdAt: new Date(),
-		updatedAt: new Date(),
-		title: ps.title,
-		description: ps.description,
-		userId: user.id,
-		isSensitive: ps.isSensitive,
-		fileIds: files.map(file => file.id),
-	})).then(x => GalleryPosts.findOneByOrFail(x.identifiers[0]));
+			if (files.length === 0) {
+				throw new Error();
+			}
 
-	return await GalleryPosts.pack(post, user);
-});
+			const post = await this.galleryPostsRepository.insert(new GalleryPost({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				updatedAt: new Date(),
+				title: ps.title,
+				description: ps.description,
+				userId: me.id,
+				isSensitive: ps.isSensitive,
+				fileIds: files.map(file => file.id),
+			})).then(x => this.galleryPostsRepository.findOneByOrFail(x.identifiers[0]));
+
+			return await this.galleryPostEntityService.pack(post, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/gallery/posts/delete.ts b/packages/backend/src/server/api/endpoints/gallery/posts/delete.ts
index b00ee0e2ae..ad5f95c853 100644
--- a/packages/backend/src/server/api/endpoints/gallery/posts/delete.ts
+++ b/packages/backend/src/server/api/endpoints/gallery/posts/delete.ts
@@ -1,6 +1,8 @@
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GalleryPostsRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { GalleryPosts } from '@/models/index.js';
 
 export const meta = {
 	tags: ['gallery'],
@@ -27,15 +29,23 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const post = await GalleryPosts.findOneBy({
-		id: ps.postId,
-		userId: user.id,
-	});
-
-	if (post == null) {
-		throw new ApiError(meta.errors.noSuchPost);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.galleryPostsRepository)
+		private galleryPostsRepository: GalleryPostsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const post = await this.galleryPostsRepository.findOneBy({
+				id: ps.postId,
+				userId: me.id,
+			});
+
+			if (post == null) {
+				throw new ApiError(meta.errors.noSuchPost);
+			}
+
+			await this.galleryPostsRepository.delete(post.id);
+		});
 	}
-
-	await GalleryPosts.delete(post.id);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/gallery/posts/like.ts b/packages/backend/src/server/api/endpoints/gallery/posts/like.ts
index b858114aec..8aca98119b 100644
--- a/packages/backend/src/server/api/endpoints/gallery/posts/like.ts
+++ b/packages/backend/src/server/api/endpoints/gallery/posts/like.ts
@@ -1,7 +1,9 @@
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GalleryLikesRepository, GalleryPostsRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { GalleryPosts, GalleryLikes } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
 
 export const meta = {
 	tags: ['gallery'],
@@ -40,33 +42,46 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const post = await GalleryPosts.findOneBy({ id: ps.postId });
-	if (post == null) {
-		throw new ApiError(meta.errors.noSuchPost);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.galleryPostsRepository)
+		private galleryPostsRepository: GalleryPostsRepository,
 
-	if (post.userId === user.id) {
-		throw new ApiError(meta.errors.yourPost);
-	}
+		@Inject(DI.galleryLikesRepository)
+		private galleryLikesRepository: GalleryLikesRepository,
 
-	// if already liked
-	const exist = await GalleryLikes.findOneBy({
-		postId: post.id,
-		userId: user.id,
-	});
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const post = await this.galleryPostsRepository.findOneBy({ id: ps.postId });
+			if (post == null) {
+				throw new ApiError(meta.errors.noSuchPost);
+			}
 
-	if (exist != null) {
-		throw new ApiError(meta.errors.alreadyLiked);
-	}
+			if (post.userId === me.id) {
+				throw new ApiError(meta.errors.yourPost);
+			}
 
-	// Create like
-	await GalleryLikes.insert({
-		id: genId(),
-		createdAt: new Date(),
-		postId: post.id,
-		userId: user.id,
-	});
+			// if already liked
+			const exist = await this.galleryLikesRepository.findOneBy({
+				postId: post.id,
+				userId: me.id,
+			});
 
-	GalleryPosts.increment({ id: post.id }, 'likedCount', 1);
-});
+			if (exist != null) {
+				throw new ApiError(meta.errors.alreadyLiked);
+			}
+
+			// Create like
+			await this.galleryLikesRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				postId: post.id,
+				userId: me.id,
+			});
+
+			this.galleryPostsRepository.increment({ id: post.id }, 'likedCount', 1);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/gallery/posts/show.ts b/packages/backend/src/server/api/endpoints/gallery/posts/show.ts
index 4f6dafd7cb..723906d60f 100644
--- a/packages/backend/src/server/api/endpoints/gallery/posts/show.ts
+++ b/packages/backend/src/server/api/endpoints/gallery/posts/show.ts
@@ -1,6 +1,9 @@
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GalleryPostsRepository } from '@/models/index.js';
+import { GalleryPostEntityService } from '@/core/entities/GalleryPostEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { GalleryPosts } from '@/models/index.js';
 
 export const meta = {
 	tags: ['gallery'],
@@ -31,14 +34,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const post = await GalleryPosts.findOneBy({
-		id: ps.postId,
-	});
-
-	if (post == null) {
-		throw new ApiError(meta.errors.noSuchPost);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.galleryPostsRepository)
+		private galleryPostsRepository: GalleryPostsRepository,
+
+		private galleryPostEntityService: GalleryPostEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const post = await this.galleryPostsRepository.findOneBy({
+				id: ps.postId,
+			});
+
+			if (post == null) {
+				throw new ApiError(meta.errors.noSuchPost);
+			}
+
+			return await this.galleryPostEntityService.pack(post, me);
+		});
 	}
-
-	return await GalleryPosts.pack(post, me);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/gallery/posts/unlike.ts b/packages/backend/src/server/api/endpoints/gallery/posts/unlike.ts
index d136239e5e..d878582998 100644
--- a/packages/backend/src/server/api/endpoints/gallery/posts/unlike.ts
+++ b/packages/backend/src/server/api/endpoints/gallery/posts/unlike.ts
@@ -1,6 +1,8 @@
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GalleryPostsRepository, GalleryLikesRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { GalleryPosts, GalleryLikes } from '@/models/index.js';
 
 export const meta = {
 	tags: ['gallery'],
@@ -33,23 +35,34 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const post = await GalleryPosts.findOneBy({ id: ps.postId });
-	if (post == null) {
-		throw new ApiError(meta.errors.noSuchPost);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.galleryPostsRepository)
+		private galleryPostsRepository: GalleryPostsRepository,
 
-	const exist = await GalleryLikes.findOneBy({
-		postId: post.id,
-		userId: user.id,
-	});
+		@Inject(DI.galleryLikesRepository)
+		private galleryLikesRepository: GalleryLikesRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const post = await this.galleryPostsRepository.findOneBy({ id: ps.postId });
+			if (post == null) {
+				throw new ApiError(meta.errors.noSuchPost);
+			}
 
-	if (exist == null) {
-		throw new ApiError(meta.errors.notLiked);
-	}
+			const exist = await this.galleryLikesRepository.findOneBy({
+				postId: post.id,
+				userId: me.id,
+			});
 
-	// Delete like
-	await GalleryLikes.delete(exist.id);
+			if (exist == null) {
+				throw new ApiError(meta.errors.notLiked);
+			}
 
-	GalleryPosts.decrement({ id: post.id }, 'likedCount', 1);
-});
+			// Delete like
+			await this.galleryLikesRepository.delete(exist.id);
+
+			this.galleryPostsRepository.decrement({ id: post.id }, 'likedCount', 1);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/gallery/posts/update.ts b/packages/backend/src/server/api/endpoints/gallery/posts/update.ts
index 82fe38078e..1900afaeb6 100644
--- a/packages/backend/src/server/api/endpoints/gallery/posts/update.ts
+++ b/packages/backend/src/server/api/endpoints/gallery/posts/update.ts
@@ -1,9 +1,12 @@
 import ms from 'ms';
-import define from '../../../define.js';
-import { DriveFiles, GalleryPosts } from '@/models/index.js';
-import { GalleryPost } from '@/models/entities/gallery-post.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFilesRepository, GalleryPostsRepository } from '@/models/index.js';
+import { GalleryPost } from '@/models/entities/GalleryPost.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import { GalleryPostEntityService } from '@/core/entities/GalleryPostEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
 
 export const meta = {
 	tags: ['gallery'],
@@ -43,30 +46,43 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const files = (await Promise.all(ps.fileIds.map(fileId =>
-		DriveFiles.findOneBy({
-			id: fileId,
-			userId: user.id,
-		})
-	))).filter((file): file is DriveFile => file != null);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.galleryPostsRepository)
+		private galleryPostsRepository: GalleryPostsRepository,
 
-	if (files.length === 0) {
-		throw new Error();
-	}
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private galleryPostEntityService: GalleryPostEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const files = (await Promise.all(ps.fileIds.map(fileId =>
+				this.driveFilesRepository.findOneBy({
+					id: fileId,
+					userId: me.id,
+				}),
+			))).filter((file): file is DriveFile => file != null);
 
-	await GalleryPosts.update({
-		id: ps.postId,
-		userId: user.id,
-	}, {
-		updatedAt: new Date(),
-		title: ps.title,
-		description: ps.description,
-		isSensitive: ps.isSensitive,
-		fileIds: files.map(file => file.id),
-	});
+			if (files.length === 0) {
+				throw new Error();
+			}
 
-	const post = await GalleryPosts.findOneByOrFail({ id: ps.postId });
+			await this.galleryPostsRepository.update({
+				id: ps.postId,
+				userId: me.id,
+			}, {
+				updatedAt: new Date(),
+				title: ps.title,
+				description: ps.description,
+				isSensitive: ps.isSensitive,
+				fileIds: files.map(file => file.id),
+			});
 
-	return await GalleryPosts.pack(post, user);
-});
+			const post = await this.galleryPostsRepository.findOneByOrFail({ id: ps.postId });
+
+			return await this.galleryPostEntityService.pack(post, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/get-online-users-count.ts b/packages/backend/src/server/api/endpoints/get-online-users-count.ts
index 56c5502978..2d9bf29dd9 100644
--- a/packages/backend/src/server/api/endpoints/get-online-users-count.ts
+++ b/packages/backend/src/server/api/endpoints/get-online-users-count.ts
@@ -1,7 +1,9 @@
 import { MoreThan } from 'typeorm';
+import { Inject, Injectable } from '@nestjs/common';
 import { USER_ONLINE_THRESHOLD } from '@/const.js';
-import { Users } from '@/models/index.js';
-import define from '../define.js';
+import { UsersRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['meta'],
@@ -16,12 +18,20 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async () => {
-	const count = await Users.countBy({
-		lastActiveDate: MoreThan(new Date(Date.now() - USER_ONLINE_THRESHOLD)),
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+	) {
+		super(meta, paramDef, async () => {
+			const count = await this.usersRepository.countBy({
+				lastActiveDate: MoreThan(new Date(Date.now() - USER_ONLINE_THRESHOLD)),
+			});
 
-	return {
-		count,
-	};
-});
+			return {
+				count,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/hashtags/list.ts b/packages/backend/src/server/api/endpoints/hashtags/list.ts
index 50e36386cf..a7e7e6ba35 100644
--- a/packages/backend/src/server/api/endpoints/hashtags/list.ts
+++ b/packages/backend/src/server/api/endpoints/hashtags/list.ts
@@ -1,5 +1,8 @@
-import define from '../../define.js';
-import { Hashtags } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { HashtagsRepository } from '@/models/index.js';
+import { HashtagEntityService } from '@/core/entities/HashtagEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['hashtags'],
@@ -30,39 +33,49 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = Hashtags.createQueryBuilder('tag');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.hashtagsRepository)
+		private hashtagsRepository: HashtagsRepository,
 
-	if (ps.attachedToUserOnly) query.andWhere('tag.attachedUsersCount != 0');
-	if (ps.attachedToLocalUserOnly) query.andWhere('tag.attachedLocalUsersCount != 0');
-	if (ps.attachedToRemoteUserOnly) query.andWhere('tag.attachedRemoteUsersCount != 0');
+		private hashtagEntityService: HashtagEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.hashtagsRepository.createQueryBuilder('tag');
 
-	switch (ps.sort) {
-		case '+mentionedUsers': query.orderBy('tag.mentionedUsersCount', 'DESC'); break;
-		case '-mentionedUsers': query.orderBy('tag.mentionedUsersCount', 'ASC'); break;
-		case '+mentionedLocalUsers': query.orderBy('tag.mentionedLocalUsersCount', 'DESC'); break;
-		case '-mentionedLocalUsers': query.orderBy('tag.mentionedLocalUsersCount', 'ASC'); break;
-		case '+mentionedRemoteUsers': query.orderBy('tag.mentionedRemoteUsersCount', 'DESC'); break;
-		case '-mentionedRemoteUsers': query.orderBy('tag.mentionedRemoteUsersCount', 'ASC'); break;
-		case '+attachedUsers': query.orderBy('tag.attachedUsersCount', 'DESC'); break;
-		case '-attachedUsers': query.orderBy('tag.attachedUsersCount', 'ASC'); break;
-		case '+attachedLocalUsers': query.orderBy('tag.attachedLocalUsersCount', 'DESC'); break;
-		case '-attachedLocalUsers': query.orderBy('tag.attachedLocalUsersCount', 'ASC'); break;
-		case '+attachedRemoteUsers': query.orderBy('tag.attachedRemoteUsersCount', 'DESC'); break;
-		case '-attachedRemoteUsers': query.orderBy('tag.attachedRemoteUsersCount', 'ASC'); break;
-	}
+			if (ps.attachedToUserOnly) query.andWhere('tag.attachedUsersCount != 0');
+			if (ps.attachedToLocalUserOnly) query.andWhere('tag.attachedLocalUsersCount != 0');
+			if (ps.attachedToRemoteUserOnly) query.andWhere('tag.attachedRemoteUsersCount != 0');
+
+			switch (ps.sort) {
+				case '+mentionedUsers': query.orderBy('tag.mentionedUsersCount', 'DESC'); break;
+				case '-mentionedUsers': query.orderBy('tag.mentionedUsersCount', 'ASC'); break;
+				case '+mentionedLocalUsers': query.orderBy('tag.mentionedLocalUsersCount', 'DESC'); break;
+				case '-mentionedLocalUsers': query.orderBy('tag.mentionedLocalUsersCount', 'ASC'); break;
+				case '+mentionedRemoteUsers': query.orderBy('tag.mentionedRemoteUsersCount', 'DESC'); break;
+				case '-mentionedRemoteUsers': query.orderBy('tag.mentionedRemoteUsersCount', 'ASC'); break;
+				case '+attachedUsers': query.orderBy('tag.attachedUsersCount', 'DESC'); break;
+				case '-attachedUsers': query.orderBy('tag.attachedUsersCount', 'ASC'); break;
+				case '+attachedLocalUsers': query.orderBy('tag.attachedLocalUsersCount', 'DESC'); break;
+				case '-attachedLocalUsers': query.orderBy('tag.attachedLocalUsersCount', 'ASC'); break;
+				case '+attachedRemoteUsers': query.orderBy('tag.attachedRemoteUsersCount', 'DESC'); break;
+				case '-attachedRemoteUsers': query.orderBy('tag.attachedRemoteUsersCount', 'ASC'); break;
+			}
 
-	query.select([
-		'tag.name',
-		'tag.mentionedUsersCount',
-		'tag.mentionedLocalUsersCount',
-		'tag.mentionedRemoteUsersCount',
-		'tag.attachedUsersCount',
-		'tag.attachedLocalUsersCount',
-		'tag.attachedRemoteUsersCount',
-	]);
+			query.select([
+				'tag.name',
+				'tag.mentionedUsersCount',
+				'tag.mentionedLocalUsersCount',
+				'tag.mentionedRemoteUsersCount',
+				'tag.attachedUsersCount',
+				'tag.attachedLocalUsersCount',
+				'tag.attachedRemoteUsersCount',
+			]);
 
-	const tags = await query.take(ps.limit).getMany();
+			const tags = await query.take(ps.limit).getMany();
 
-	return Hashtags.packMany(tags);
-});
+			return this.hashtagEntityService.packMany(tags);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/hashtags/search.ts b/packages/backend/src/server/api/endpoints/hashtags/search.ts
index c289844775..3fb77bef9b 100644
--- a/packages/backend/src/server/api/endpoints/hashtags/search.ts
+++ b/packages/backend/src/server/api/endpoints/hashtags/search.ts
@@ -1,5 +1,7 @@
-import define from '../../define.js';
-import { Hashtags } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { HashtagsRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['hashtags'],
@@ -27,14 +29,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const hashtags = await Hashtags.createQueryBuilder('tag')
-		.where('tag.name like :q', { q: ps.query.toLowerCase() + '%' })
-		.orderBy('tag.count', 'DESC')
-		.groupBy('tag.id')
-		.take(ps.limit)
-		.skip(ps.offset)
-		.getMany();
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.hashtagsRepository)
+		private hashtagsRepository: HashtagsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const hashtags = await this.hashtagsRepository.createQueryBuilder('tag')
+				.where('tag.name like :q', { q: ps.query.toLowerCase() + '%' })
+				.orderBy('tag.count', 'DESC')
+				.groupBy('tag.id')
+				.take(ps.limit)
+				.skip(ps.offset)
+				.getMany();
 
-	return hashtags.map(tag => tag.name);
-});
+			return hashtags.map(tag => tag.name);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/hashtags/show.ts b/packages/backend/src/server/api/endpoints/hashtags/show.ts
index 5b78f6ac7f..59170f6d0e 100644
--- a/packages/backend/src/server/api/endpoints/hashtags/show.ts
+++ b/packages/backend/src/server/api/endpoints/hashtags/show.ts
@@ -1,7 +1,10 @@
-import define from '../../define.js';
-import { ApiError } from '../../error.js';
-import { Hashtags } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { HashtagsRepository } from '@/models/index.js';
 import { normalizeForSearch } from '@/misc/normalize-for-search.js';
+import { HashtagEntityService } from '@/core/entities/HashtagEntityService.js';
+import { DI } from '@/di-symbols.js';
+import { ApiError } from '../../error.js';
 
 export const meta = {
 	tags: ['hashtags'],
@@ -32,11 +35,21 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const hashtag = await Hashtags.findOneBy({ name: normalizeForSearch(ps.tag) });
-	if (hashtag == null) {
-		throw new ApiError(meta.errors.noSuchHashtag);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.hashtagsRepository)
+		private hashtagsRepository: HashtagsRepository,
 
-	return await Hashtags.pack(hashtag);
-});
+		private hashtagEntityService: HashtagEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const hashtag = await this.hashtagsRepository.findOneBy({ name: normalizeForSearch(ps.tag) });
+			if (hashtag == null) {
+				throw new ApiError(meta.errors.noSuchHashtag);
+			}
+
+			return await this.hashtagEntityService.pack(hashtag);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/hashtags/trend.ts b/packages/backend/src/server/api/endpoints/hashtags/trend.ts
index 9cdbc8941c..7e483ea214 100644
--- a/packages/backend/src/server/api/endpoints/hashtags/trend.ts
+++ b/packages/backend/src/server/api/endpoints/hashtags/trend.ts
@@ -1,10 +1,12 @@
 import { Brackets } from 'typeorm';
-import define from '../../define.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Notes } from '@/models/index.js';
-import { Note } from '@/models/entities/note.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { NotesRepository } from '@/models/index.js';
+import type { Note } from '@/models/entities/Note.js';
 import { safeForSql } from '@/misc/safe-for-sql.js';
 import { normalizeForSearch } from '@/misc/normalize-for-search.js';
+import { MetaService } from '@/core/MetaService.js';
+import { DI } from '@/di-symbols.js';
 
 /*
 トレンドに載るためには「『直近a分間のユニーク投稿数が今からa分前～今からb分前の間のユニーク投稿数のn倍以上』のハッシュタグの上位5位以内に入る」ことが必要
@@ -60,94 +62,104 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async () => {
-	const instance = await fetchMeta(true);
-	const hiddenTags = instance.hiddenTags.map(t => normalizeForSearch(t));
-
-	const now = new Date(); // 5分単位で丸めた現在日時
-	now.setMinutes(Math.round(now.getMinutes() / 5) * 5, 0, 0);
-
-	const tagNotes = await Notes.createQueryBuilder('note')
-		.where(`note.createdAt > :date`, { date: new Date(now.getTime() - rangeA) })
-		.andWhere(new Brackets(qb => { qb
-			.where(`note.visibility = 'public'`)
-			.orWhere(`note.visibility = 'home'`);
-		}))
-		.andWhere(`note.tags != '{}'`)
-		.select(['note.tags', 'note.userId'])
-		.cache(60000) // 1 min
-		.getMany();
-
-	if (tagNotes.length === 0) {
-		return [];
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		private metaService: MetaService,
+	) {
+		super(meta, paramDef, async () => {
+			const instance = await this.metaService.fetch(true);
+			const hiddenTags = instance.hiddenTags.map(t => normalizeForSearch(t));
+
+			const now = new Date(); // 5分単位で丸めた現在日時
+			now.setMinutes(Math.round(now.getMinutes() / 5) * 5, 0, 0);
+
+			const tagNotes = await this.notesRepository.createQueryBuilder('note')
+				.where('note.createdAt > :date', { date: new Date(now.getTime() - rangeA) })
+				.andWhere(new Brackets(qb => { qb
+					.where('note.visibility = \'public\'')
+					.orWhere('note.visibility = \'home\'');
+				}))
+				.andWhere('note.tags != \'{}\'')
+				.select(['note.tags', 'note.userId'])
+				.cache(60000) // 1 min
+				.getMany();
+
+			if (tagNotes.length === 0) {
+				return [];
+			}
 
-	const tags: {
+			const tags: {
 		name: string;
 		users: Note['userId'][];
 	}[] = [];
 
-	for (const note of tagNotes) {
-		for (const tag of note.tags) {
-			if (hiddenTags.includes(tag)) continue;
-
-			const x = tags.find(x => x.name === tag);
-			if (x) {
-				if (!x.users.includes(note.userId)) {
-					x.users.push(note.userId);
+			for (const note of tagNotes) {
+				for (const tag of note.tags) {
+					if (hiddenTags.includes(tag)) continue;
+
+					const x = tags.find(x => x.name === tag);
+					if (x) {
+						if (!x.users.includes(note.userId)) {
+							x.users.push(note.userId);
+						}
+					} else {
+						tags.push({
+							name: tag,
+							users: [note.userId],
+						});
+					}
 				}
-			} else {
-				tags.push({
-					name: tag,
-					users: [note.userId],
-				});
 			}
-		}
-	}
 
-	// タグを人気順に並べ替え
-	const hots = tags
-		.sort((a, b) => b.users.length - a.users.length)
-		.map(tag => tag.name)
-		.slice(0, max);
-
-	//#region 2(または3)で話題と判定されたタグそれぞれについて過去の投稿数グラフを取得する
-	const countPromises: Promise<number[]>[] = [];
-
-	const range = 20;
-
-	// 10分
-	const interval = 1000 * 60 * 10;
-
-	for (let i = 0; i < range; i++) {
-		countPromises.push(Promise.all(hots.map(tag => Notes.createQueryBuilder('note')
-			.select('count(distinct note.userId)')
-			.where(`'{"${safeForSql(tag) ? tag : 'aichan_kawaii'}"}' <@ note.tags`)
-			.andWhere('note.createdAt < :lt', { lt: new Date(now.getTime() - (interval * i)) })
-			.andWhere('note.createdAt > :gt', { gt: new Date(now.getTime() - (interval * (i + 1))) })
-			.cache(60000) // 1 min
-			.getRawOne()
-			.then(x => parseInt(x.count, 10))
-		)));
-	}
+			// タグを人気順に並べ替え
+			const hots = tags
+				.sort((a, b) => b.users.length - a.users.length)
+				.map(tag => tag.name)
+				.slice(0, max);
+
+			//#region 2(または3)で話題と判定されたタグそれぞれについて過去の投稿数グラフを取得する
+			const countPromises: Promise<number[]>[] = [];
+
+			const range = 20;
+
+			// 10分
+			const interval = 1000 * 60 * 10;
+
+			for (let i = 0; i < range; i++) {
+				countPromises.push(Promise.all(hots.map(tag => this.notesRepository.createQueryBuilder('note')
+					.select('count(distinct note.userId)')
+					.where(`'{"${safeForSql(tag) ? tag : 'aichan_kawaii'}"}' <@ note.tags`)
+					.andWhere('note.createdAt < :lt', { lt: new Date(now.getTime() - (interval * i)) })
+					.andWhere('note.createdAt > :gt', { gt: new Date(now.getTime() - (interval * (i + 1))) })
+					.cache(60000) // 1 min
+					.getRawOne()
+					.then(x => parseInt(x.count, 10)),
+				)));
+			}
 
-	const countsLog = await Promise.all(countPromises);
-	//#endregion
-
-	const totalCounts = await Promise.all(hots.map(tag => Notes.createQueryBuilder('note')
-		.select('count(distinct note.userId)')
-		.where(`'{"${safeForSql(tag) ? tag : 'aichan_kawaii'}"}' <@ note.tags`)
-		.andWhere('note.createdAt > :gt', { gt: new Date(now.getTime() - rangeA) })
-		.cache(60000 * 60) // 60 min
-		.getRawOne()
-		.then(x => parseInt(x.count, 10))
-	));
-
-	const stats = hots.map((tag, i) => ({
-		tag,
-		chart: countsLog.map(counts => counts[i]),
-		usersCount: totalCounts[i],
-	}));
-
-	return stats;
-});
+			const countsLog = await Promise.all(countPromises);
+			//#endregion
+
+			const totalCounts = await Promise.all(hots.map(tag => this.notesRepository.createQueryBuilder('note')
+				.select('count(distinct note.userId)')
+				.where(`'{"${safeForSql(tag) ? tag : 'aichan_kawaii'}"}' <@ note.tags`)
+				.andWhere('note.createdAt > :gt', { gt: new Date(now.getTime() - rangeA) })
+				.cache(60000 * 60) // 60 min
+				.getRawOne()
+				.then(x => parseInt(x.count, 10)),
+			));
+
+			const stats = hots.map((tag, i) => ({
+				tag,
+				chart: countsLog.map(counts => counts[i]),
+				usersCount: totalCounts[i],
+			}));
+
+			return stats;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/hashtags/users.ts b/packages/backend/src/server/api/endpoints/hashtags/users.ts
index a5df21a7e3..10a88fbefa 100644
--- a/packages/backend/src/server/api/endpoints/hashtags/users.ts
+++ b/packages/backend/src/server/api/endpoints/hashtags/users.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { Users } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository } from '@/models/index.js';
 import { normalizeForSearch } from '@/misc/normalize-for-search.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: false,
@@ -24,39 +27,49 @@ export const paramDef = {
 		tag: { type: 'string' },
 		limit: { type: 'integer', minimum: 1, maximum: 100, default: 10 },
 		sort: { type: 'string', enum: ['+follower', '-follower', '+createdAt', '-createdAt', '+updatedAt', '-updatedAt'] },
-		state: { type: 'string', enum: ['all', 'alive'], default: "all" },
-		origin: { type: 'string', enum: ['combined', 'local', 'remote'], default: "local" },
+		state: { type: 'string', enum: ['all', 'alive'], default: 'all' },
+		origin: { type: 'string', enum: ['combined', 'local', 'remote'], default: 'local' },
 	},
 	required: ['tag', 'sort'],
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = Users.createQueryBuilder('user')
-		.where(':tag = ANY(user.tags)', { tag: normalizeForSearch(ps.tag) });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+		
+		private userEntityService: UserEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.usersRepository.createQueryBuilder('user')
+				.where(':tag = ANY(user.tags)', { tag: normalizeForSearch(ps.tag) });
 
-	const recent = new Date(Date.now() - (1000 * 60 * 60 * 24 * 5));
+			const recent = new Date(Date.now() - (1000 * 60 * 60 * 24 * 5));
 
-	if (ps.state === 'alive') {
-		query.andWhere('user.updatedAt > :date', { date: recent });
-	}
+			if (ps.state === 'alive') {
+				query.andWhere('user.updatedAt > :date', { date: recent });
+			}
 
-	if (ps.origin === 'local') {
-		query.andWhere('user.host IS NULL');
-	} else if (ps.origin === 'remote') {
-		query.andWhere('user.host IS NOT NULL');
-	}
+			if (ps.origin === 'local') {
+				query.andWhere('user.host IS NULL');
+			} else if (ps.origin === 'remote') {
+				query.andWhere('user.host IS NOT NULL');
+			}
 
-	switch (ps.sort) {
-		case '+follower': query.orderBy('user.followersCount', 'DESC'); break;
-		case '-follower': query.orderBy('user.followersCount', 'ASC'); break;
-		case '+createdAt': query.orderBy('user.createdAt', 'DESC'); break;
-		case '-createdAt': query.orderBy('user.createdAt', 'ASC'); break;
-		case '+updatedAt': query.orderBy('user.updatedAt', 'DESC'); break;
-		case '-updatedAt': query.orderBy('user.updatedAt', 'ASC'); break;
-	}
+			switch (ps.sort) {
+				case '+follower': query.orderBy('user.followersCount', 'DESC'); break;
+				case '-follower': query.orderBy('user.followersCount', 'ASC'); break;
+				case '+createdAt': query.orderBy('user.createdAt', 'DESC'); break;
+				case '-createdAt': query.orderBy('user.createdAt', 'ASC'); break;
+				case '+updatedAt': query.orderBy('user.updatedAt', 'DESC'); break;
+				case '-updatedAt': query.orderBy('user.updatedAt', 'ASC'); break;
+			}
 
-	const users = await query.take(ps.limit).getMany();
+			const users = await query.take(ps.limit).getMany();
 
-	return await Users.packMany(users, me, { detail: true });
-});
+			return await this.userEntityService.packMany(users, me, { detail: true });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i.ts b/packages/backend/src/server/api/endpoints/i.ts
index 22aedfeee8..815b3168b4 100644
--- a/packages/backend/src/server/api/endpoints/i.ts
+++ b/packages/backend/src/server/api/endpoints/i.ts
@@ -1,5 +1,8 @@
-import { Users } from '@/models/index.js';
-import define from '../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['account'],
@@ -20,12 +23,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user, token) => {
-	const isSecure = token == null;
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	// ここで渡ってきている user はキャッシュされていて古い可能性もあるので id だけ渡す
-	return await Users.pack<true, true>(user.id, user, {
-		detail: true,
-		includeSecrets: isSecure,
-	});
-});
+		private userEntityService: UserEntityService,
+	) {
+		super(meta, paramDef, async (ps, user, token) => {
+			const isSecure = token == null;
+
+			// ここで渡ってきている user はキャッシュされていて古い可能性もあるので id だけ渡す
+			return await this.userEntityService.pack<true, true>(user.id, user, {
+				detail: true,
+				includeSecrets: isSecure,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/2fa/done.ts b/packages/backend/src/server/api/endpoints/i/2fa/done.ts
index 35806b2bc3..bcf3931b04 100644
--- a/packages/backend/src/server/api/endpoints/i/2fa/done.ts
+++ b/packages/backend/src/server/api/endpoints/i/2fa/done.ts
@@ -1,6 +1,8 @@
 import * as speakeasy from 'speakeasy';
-import define from '../../../define.js';
-import { UserProfiles } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserProfilesRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -17,27 +19,35 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const token = ps.token.replace(/\s/g, '');
-
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	if (profile.twoFactorTempSecret == null) {
-		throw new Error('二段階認証の設定が開始されていません');
-	}
-
-	const verified = (speakeasy as any).totp.verify({
-		secret: profile.twoFactorTempSecret,
-		encoding: 'base32',
-		token: token,
-	});
-
-	if (!verified) {
-		throw new Error('not verified');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const token = ps.token.replace(/\s/g, '');
+
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: me.id });
+
+			if (profile.twoFactorTempSecret == null) {
+				throw new Error('二段階認証の設定が開始されていません');
+			}
+
+			const verified = (speakeasy as any).totp.verify({
+				secret: profile.twoFactorTempSecret,
+				encoding: 'base32',
+				token: token,
+			});
+
+			if (!verified) {
+				throw new Error('not verified');
+			}
+
+			await this.userProfilesRepository.update(me.id, {
+				twoFactorSecret: profile.twoFactorTempSecret,
+				twoFactorEnabled: true,
+			});
+		});
 	}
-
-	await UserProfiles.update(user.id, {
-		twoFactorSecret: profile.twoFactorTempSecret,
-		twoFactorEnabled: true,
-	});
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/i/2fa/key-done.ts b/packages/backend/src/server/api/endpoints/i/2fa/key-done.ts
index 1afb34bfda..f2f4c2044e 100644
--- a/packages/backend/src/server/api/endpoints/i/2fa/key-done.ts
+++ b/packages/backend/src/server/api/endpoints/i/2fa/key-done.ts
@@ -1,19 +1,16 @@
-import bcrypt from 'bcryptjs';
 import { promisify } from 'node:util';
+import bcrypt from 'bcryptjs';
 import * as cbor from 'cbor';
-import define from '../../../define.js';
-import {
-	UserProfiles,
-	UserSecurityKeys,
-	AttestationChallenges,
-	Users,
-} from '@/models/index.js';
-import config from '@/config/index.js';
-import { procedures, hash } from '../../../2fa.js';
-import { publishMainStream } from '@/services/stream.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { Config } from '@/config.js';
+import { DI } from '@/di-symbols.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { TwoFactorAuthenticationService } from '@/core/TwoFactorAuthenticationService.js';
+import { AttestationChallengesRepository, UserProfilesRepository, UserSecurityKeysRepository } from '@/models/index.js';
 
 const cborDecodeFirst = promisify(cbor.decodeFirst) as any;
-const rpIdHashReal = hash(Buffer.from(config.hostname, 'utf-8'));
 
 export const meta = {
 	requireCredential: true,
@@ -34,110 +31,135 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	// Compare password
-	const same = await bcrypt.compare(ps.password, profile.password!);
-
-	if (!same) {
-		throw new Error('incorrect password');
-	}
-
-	if (!profile.twoFactorEnabled) {
-		throw new Error('2fa not enabled');
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
 
-	const clientData = JSON.parse(ps.clientDataJSON);
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
 
-	if (clientData.type !== 'webauthn.create') {
-		throw new Error('not a creation attestation');
-	}
-	if (clientData.origin !== config.scheme + '://' + config.host) {
-		throw new Error('origin mismatch');
-	}
-
-	const clientDataJSONHash = hash(Buffer.from(ps.clientDataJSON, 'utf-8'));
-
-	const attestation = await cborDecodeFirst(ps.attestationObject);
-
-	const rpIdHash = attestation.authData.slice(0, 32);
-	if (!rpIdHashReal.equals(rpIdHash)) {
-		throw new Error('rpIdHash mismatch');
-	}
+		@Inject(DI.userSecurityKeysRepository)
+		private userSecurityKeysRepository: UserSecurityKeysRepository,
 
-	const flags = attestation.authData[32];
+		@Inject(DI.attestationChallengesRepository)
+		private attestationChallengesRepository: AttestationChallengesRepository,
 
-	// eslint:disable-next-line:no-bitwise
-	if (!(flags & 1)) {
-		throw new Error('user not present');
-	}
-
-	const authData = Buffer.from(attestation.authData);
-	const credentialIdLength = authData.readUInt16BE(53);
-	const credentialId = authData.slice(55, 55 + credentialIdLength);
-	const publicKeyData = authData.slice(55 + credentialIdLength);
-	const publicKey: Map<number, any> = await cborDecodeFirst(publicKeyData);
-	if (publicKey.get(3) !== -7) {
-		throw new Error('alg mismatch');
-	}
-
-	if (!(procedures as any)[attestation.fmt]) {
-		throw new Error('unsupported fmt');
-	}
-
-	const verificationData = (procedures as any)[attestation.fmt].verify({
-		attStmt: attestation.attStmt,
-		authenticatorData: authData,
-		clientDataHash: clientDataJSONHash,
-		credentialId,
-		publicKey,
-		rpIdHash,
-	});
-	if (!verificationData.valid) throw new Error('signature invalid');
-
-	const attestationChallenge = await AttestationChallenges.findOneBy({
-		userId: user.id,
-		id: ps.challengeId,
-		registrationChallenge: true,
-		challenge: hash(clientData.challenge).toString('hex'),
-	});
-
-	if (!attestationChallenge) {
-		throw new Error('non-existent challenge');
-	}
-
-	await AttestationChallenges.delete({
-		userId: user.id,
-		id: ps.challengeId,
-	});
-
-	// Expired challenge (> 5min old)
-	if (
-		new Date().getTime() - attestationChallenge.createdAt.getTime() >=
-		5 * 60 * 1000
+		private userEntityService: UserEntityService,
+		private globalEventService: GlobalEventService,
+		private twoFactorAuthenticationService: TwoFactorAuthenticationService,
 	) {
-		throw new Error('expired challenge');
+		super(meta, paramDef, async (ps, me) => {
+			const rpIdHashReal = this.twoFactorAuthenticationService.hash(Buffer.from(this.config.hostname, 'utf-8'));
+
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: me.id });
+
+			// Compare password
+			const same = await bcrypt.compare(ps.password, profile.password!);
+
+			if (!same) {
+				throw new Error('incorrect password');
+			}
+
+			if (!profile.twoFactorEnabled) {
+				throw new Error('2fa not enabled');
+			}
+
+			const clientData = JSON.parse(ps.clientDataJSON);
+
+			if (clientData.type !== 'webauthn.create') {
+				throw new Error('not a creation attestation');
+			}
+			if (clientData.origin !== this.config.scheme + '://' + this.config.host) {
+				throw new Error('origin mismatch');
+			}
+
+			const clientDataJSONHash = this.twoFactorAuthenticationService.hash(Buffer.from(ps.clientDataJSON, 'utf-8'));
+
+			const attestation = await cborDecodeFirst(ps.attestationObject);
+
+			const rpIdHash = attestation.authData.slice(0, 32);
+			if (!rpIdHashReal.equals(rpIdHash)) {
+				throw new Error('rpIdHash mismatch');
+			}
+
+			const flags = attestation.authData[32];
+
+			// eslint:disable-next-line:no-bitwise
+			if (!(flags & 1)) {
+				throw new Error('user not present');
+			}
+
+			const authData = Buffer.from(attestation.authData);
+			const credentialIdLength = authData.readUInt16BE(53);
+			const credentialId = authData.slice(55, 55 + credentialIdLength);
+			const publicKeyData = authData.slice(55 + credentialIdLength);
+			const publicKey: Map<number, any> = await cborDecodeFirst(publicKeyData);
+			if (publicKey.get(3) !== -7) {
+				throw new Error('alg mismatch');
+			}
+
+			const procedures = this.twoFactorAuthenticationService.getProcedures();
+
+			if (!(procedures as any)[attestation.fmt]) {
+				throw new Error('unsupported fmt');
+			}
+
+			const verificationData = (procedures as any)[attestation.fmt].verify({
+				attStmt: attestation.attStmt,
+				authenticatorData: authData,
+				clientDataHash: clientDataJSONHash,
+				credentialId,
+				publicKey,
+				rpIdHash,
+			});
+			if (!verificationData.valid) throw new Error('signature invalid');
+
+			const attestationChallenge = await this.attestationChallengesRepository.findOneBy({
+				userId: me.id,
+				id: ps.challengeId,
+				registrationChallenge: true,
+				challenge: this.twoFactorAuthenticationService.hash(clientData.challenge).toString('hex'),
+			});
+
+			if (!attestationChallenge) {
+				throw new Error('non-existent challenge');
+			}
+
+			await this.attestationChallengesRepository.delete({
+				userId: me.id,
+				id: ps.challengeId,
+			});
+
+			// Expired challenge (> 5min old)
+			if (
+				new Date().getTime() - attestationChallenge.createdAt.getTime() >=
+		5 * 60 * 1000
+			) {
+				throw new Error('expired challenge');
+			}
+
+			const credentialIdString = credentialId.toString('hex');
+
+			await this.userSecurityKeysRepository.insert({
+				userId: me.id,
+				id: credentialIdString,
+				lastUsed: new Date(),
+				name: ps.name,
+				publicKey: verificationData.publicKey.toString('hex'),
+			});
+
+			// Publish meUpdated event
+			this.globalEventService.publishMainStream(me.id, 'meUpdated', await this.userEntityService.pack(me.id, me, {
+				detail: true,
+				includeSecrets: true,
+			}));
+
+			return {
+				id: credentialIdString,
+				name: ps.name,
+			};
+		});
 	}
-
-	const credentialIdString = credentialId.toString('hex');
-
-	await UserSecurityKeys.insert({
-		userId: user.id,
-		id: credentialIdString,
-		lastUsed: new Date(),
-		name: ps.name,
-		publicKey: verificationData.publicKey.toString('hex'),
-	});
-
-	// Publish meUpdated event
-	publishMainStream(user.id, 'meUpdated', await Users.pack(user.id, user, {
-		detail: true,
-		includeSecrets: true,
-	}));
-
-	return {
-		id: credentialIdString,
-		name: ps.name,
-	};
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/i/2fa/password-less.ts b/packages/backend/src/server/api/endpoints/i/2fa/password-less.ts
index 4bfa24f97f..3eb9f43c2b 100644
--- a/packages/backend/src/server/api/endpoints/i/2fa/password-less.ts
+++ b/packages/backend/src/server/api/endpoints/i/2fa/password-less.ts
@@ -1,5 +1,7 @@
-import define from '../../../define.js';
-import { UserProfiles } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserProfilesRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -16,8 +18,16 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	await UserProfiles.update(user.id, {
-		usePasswordLessLogin: ps.value,
-	});
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			await this.userProfilesRepository.update(me.id, {
+				usePasswordLessLogin: ps.value,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/2fa/register-key.ts b/packages/backend/src/server/api/endpoints/i/2fa/register-key.ts
index e906b82043..df37db4c6a 100644
--- a/packages/backend/src/server/api/endpoints/i/2fa/register-key.ts
+++ b/packages/backend/src/server/api/endpoints/i/2fa/register-key.ts
@@ -1,10 +1,12 @@
-import bcrypt from 'bcryptjs';
-import define from '../../../define.js';
-import { UserProfiles, AttestationChallenges } from '@/models/index.js';
 import { promisify } from 'node:util';
 import * as crypto from 'node:crypto';
-import { genId } from '@/misc/gen-id.js';
-import { hash } from '../../../2fa.js';
+import bcrypt from 'bcryptjs';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserProfilesRepository, AttestationChallengesRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { TwoFactorAuthenticationService } from '@/core/TwoFactorAuthenticationService.js';
+import { DI } from '@/di-symbols.js';
 
 const randomBytes = promisify(crypto.randomBytes);
 
@@ -23,39 +25,53 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
 
-	// Compare password
-	const same = await bcrypt.compare(ps.password, profile.password!);
+		@Inject(DI.attestationChallengesRepository)
+		private attestationChallengesRepository: AttestationChallengesRepository,
 
-	if (!same) {
-		throw new Error('incorrect password');
-	}
+		private idService: IdService,
+		private twoFactorAuthenticationService: TwoFactorAuthenticationService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: me.id });
 
-	if (!profile.twoFactorEnabled) {
-		throw new Error('2fa not enabled');
-	}
+			// Compare password
+			const same = await bcrypt.compare(ps.password, profile.password!);
+
+			if (!same) {
+				throw new Error('incorrect password');
+			}
 
-	// 32 byte challenge
-	const entropy = await randomBytes(32);
-	const challenge = entropy.toString('base64')
-		.replace(/=/g, '')
-		.replace(/\+/g, '-')
-		.replace(/\//g, '_');
-
-	const challengeId = genId();
-
-	await AttestationChallenges.insert({
-		userId: user.id,
-		id: challengeId,
-		challenge: hash(Buffer.from(challenge, 'utf-8')).toString('hex'),
-		createdAt: new Date(),
-		registrationChallenge: true,
-	});
-
-	return {
-		challengeId,
-		challenge,
-	};
-});
+			if (!profile.twoFactorEnabled) {
+				throw new Error('2fa not enabled');
+			}
+
+			// 32 byte challenge
+			const entropy = await randomBytes(32);
+			const challenge = entropy.toString('base64')
+				.replace(/=/g, '')
+				.replace(/\+/g, '-')
+				.replace(/\//g, '_');
+
+			const challengeId = this.idService.genId();
+
+			await this.attestationChallengesRepository.insert({
+				userId: me.id,
+				id: challengeId,
+				challenge: this.twoFactorAuthenticationService.hash(Buffer.from(challenge, 'utf-8')).toString('hex'),
+				createdAt: new Date(),
+				registrationChallenge: true,
+			});
+
+			return {
+				challengeId,
+				challenge,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/2fa/register.ts b/packages/backend/src/server/api/endpoints/i/2fa/register.ts
index 33f5717728..e20911f35e 100644
--- a/packages/backend/src/server/api/endpoints/i/2fa/register.ts
+++ b/packages/backend/src/server/api/endpoints/i/2fa/register.ts
@@ -1,9 +1,11 @@
 import bcrypt from 'bcryptjs';
 import * as speakeasy from 'speakeasy';
 import * as QRCode from 'qrcode';
-import config from '@/config/index.js';
-import { UserProfiles } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserProfilesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
+import { Config } from '@/config.js';
 
 export const meta = {
 	requireCredential: true,
@@ -20,39 +22,50 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
 
-	// Compare password
-	const same = await bcrypt.compare(ps.password, profile.password!);
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: me.id });
 
-	if (!same) {
-		throw new Error('incorrect password');
-	}
+			// Compare password
+			const same = await bcrypt.compare(ps.password, profile.password!);
+
+			if (!same) {
+				throw new Error('incorrect password');
+			}
+
+			// Generate user's secret key
+			const secret = speakeasy.generateSecret({
+				length: 32,
+			});
 
-	// Generate user's secret key
-	const secret = speakeasy.generateSecret({
-		length: 32,
-	});
-
-	await UserProfiles.update(user.id, {
-		twoFactorTempSecret: secret.base32,
-	});
-
-	// Get the data URL of the authenticator URL
-	const url = speakeasy.otpauthURL({
-		secret: secret.base32,
-		encoding: 'base32',
-		label: user.username,
-		issuer: config.host,
-	});
-	const dataUrl = await QRCode.toDataURL(url);
-
-	return {
-		qr: dataUrl,
-		url,
-		secret: secret.base32,
-		label: user.username,
-		issuer: config.host,
-	};
-});
+			await this.userProfilesRepository.update(me.id, {
+				twoFactorTempSecret: secret.base32,
+			});
+
+			// Get the data URL of the authenticator URL
+			const url = speakeasy.otpauthURL({
+				secret: secret.base32,
+				encoding: 'base32',
+				label: me.username,
+				issuer: this.config.host,
+			});
+			const dataUrl = await QRCode.toDataURL(url);
+
+			return {
+				qr: dataUrl,
+				url,
+				secret: secret.base32,
+				label: me.username,
+				issuer: this.config.host,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/2fa/remove-key.ts b/packages/backend/src/server/api/endpoints/i/2fa/remove-key.ts
index eb2f75308d..1889dd7893 100644
--- a/packages/backend/src/server/api/endpoints/i/2fa/remove-key.ts
+++ b/packages/backend/src/server/api/endpoints/i/2fa/remove-key.ts
@@ -1,7 +1,11 @@
 import bcrypt from 'bcryptjs';
-import define from '../../../define.js';
-import { UserProfiles, UserSecurityKeys, Users } from '@/models/index.js';
-import { publishMainStream } from '@/services/stream.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserProfilesRepository, UserSecurityKeysRepository } from '@/models/index.js';
+import type { UsersRepository } from '@/models/index.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -19,27 +23,41 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	// Compare password
-	const same = await bcrypt.compare(ps.password, profile.password!);
-
-	if (!same) {
-		throw new Error('incorrect password');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userSecurityKeysRepository)
+		private userSecurityKeysRepository: UserSecurityKeysRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		private userEntityService: UserEntityService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: me.id });
+
+			// Compare password
+			const same = await bcrypt.compare(ps.password, profile.password!);
+
+			if (!same) {
+				throw new Error('incorrect password');
+			}
+
+			// Make sure we only delete the user's own creds
+			await this.userSecurityKeysRepository.delete({
+				userId: me.id,
+				id: ps.credentialId,
+			});
+
+			// Publish meUpdated event
+			this.globalEventService.publishMainStream(me.id, 'meUpdated', await this.userEntityService.pack(me.id, me, {
+				detail: true,
+				includeSecrets: true,
+			}));
+
+			return {};
+		});
 	}
-
-	// Make sure we only delete the user's own creds
-	await UserSecurityKeys.delete({
-		userId: user.id,
-		id: ps.credentialId,
-	});
-
-	// Publish meUpdated event
-	publishMainStream(user.id, 'meUpdated', await Users.pack(user.id, user, {
-		detail: true,
-		includeSecrets: true,
-	}));
-
-	return {};
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/i/2fa/unregister.ts b/packages/backend/src/server/api/endpoints/i/2fa/unregister.ts
index 45e7a98639..4607e5d981 100644
--- a/packages/backend/src/server/api/endpoints/i/2fa/unregister.ts
+++ b/packages/backend/src/server/api/endpoints/i/2fa/unregister.ts
@@ -1,6 +1,8 @@
 import bcrypt from 'bcryptjs';
-import define from '../../../define.js';
-import { UserProfiles } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserProfilesRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -17,18 +19,26 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: me.id });
 
-	// Compare password
-	const same = await bcrypt.compare(ps.password, profile.password!);
+			// Compare password
+			const same = await bcrypt.compare(ps.password, profile.password!);
 
-	if (!same) {
-		throw new Error('incorrect password');
-	}
+			if (!same) {
+				throw new Error('incorrect password');
+			}
 
-	await UserProfiles.update(user.id, {
-		twoFactorSecret: null,
-		twoFactorEnabled: false,
-	});
-});
+			await this.userProfilesRepository.update(me.id, {
+				twoFactorSecret: null,
+				twoFactorEnabled: false,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/apps.ts b/packages/backend/src/server/api/endpoints/i/apps.ts
index eca9558847..8d5851659b 100644
--- a/packages/backend/src/server/api/endpoints/i/apps.ts
+++ b/packages/backend/src/server/api/endpoints/i/apps.ts
@@ -1,5 +1,7 @@
-import define from '../../define.js';
-import { AccessTokens } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AccessTokensRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -16,25 +18,33 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = AccessTokens.createQueryBuilder('token')
-		.where('token.userId = :userId', { userId: user.id });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.accessTokensRepository)
+		private accessTokensRepository: AccessTokensRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.accessTokensRepository.createQueryBuilder('token')
+				.where('token.userId = :userId', { userId: me.id });
 
-	switch (ps.sort) {
-		case '+createdAt': query.orderBy('token.createdAt', 'DESC'); break;
-		case '-createdAt': query.orderBy('token.createdAt', 'ASC'); break;
-		case '+lastUsedAt': query.orderBy('token.lastUsedAt', 'DESC'); break;
-		case '-lastUsedAt': query.orderBy('token.lastUsedAt', 'ASC'); break;
-		default: query.orderBy('token.id', 'ASC'); break;
-	}
+			switch (ps.sort) {
+				case '+createdAt': query.orderBy('token.createdAt', 'DESC'); break;
+				case '-createdAt': query.orderBy('token.createdAt', 'ASC'); break;
+				case '+lastUsedAt': query.orderBy('token.lastUsedAt', 'DESC'); break;
+				case '-lastUsedAt': query.orderBy('token.lastUsedAt', 'ASC'); break;
+				default: query.orderBy('token.id', 'ASC'); break;
+			}
 
-	const tokens = await query.getMany();
+			const tokens = await query.getMany();
 
-	return await Promise.all(tokens.map(token => ({
-		id: token.id,
-		name: token.name,
-		createdAt: token.createdAt,
-		lastUsedAt: token.lastUsedAt,
-		permission: token.permission,
-	})));
-});
+			return await Promise.all(tokens.map(token => ({
+				id: token.id,
+				name: token.name,
+				createdAt: token.createdAt,
+				lastUsedAt: token.lastUsedAt,
+				permission: token.permission,
+			})));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/authorized-apps.ts b/packages/backend/src/server/api/endpoints/i/authorized-apps.ts
index 68bd103a6d..a5592d20de 100644
--- a/packages/backend/src/server/api/endpoints/i/authorized-apps.ts
+++ b/packages/backend/src/server/api/endpoints/i/authorized-apps.ts
@@ -1,5 +1,8 @@
-import define from '../../define.js';
-import { AccessTokens, Apps } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AccessTokensRepository } from '@/models/index.js';
+import { AppEntityService } from '@/core/entities/AppEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -12,26 +15,36 @@ export const paramDef = {
 	properties: {
 		limit: { type: 'integer', minimum: 1, maximum: 100, default: 10 },
 		offset: { type: 'integer', default: 0 },
-		sort: { type: 'string', enum: ['desc', 'asc'], default: "desc" },
+		sort: { type: 'string', enum: ['desc', 'asc'], default: 'desc' },
 	},
 	required: [],
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Get tokens
-	const tokens = await AccessTokens.find({
-		where: {
-			userId: user.id,
-		},
-		take: ps.limit,
-		skip: ps.offset,
-		order: {
-			id: ps.sort === 'asc' ? 1 : -1,
-		},
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.accessTokensRepository)
+		private accessTokensRepository: AccessTokensRepository,
 
-	return await Promise.all(tokens.map(token => Apps.pack(token.appId, user, {
-		detail: true,
-	})));
-});
+		private appEntityService: AppEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Get tokens
+			const tokens = await this.accessTokensRepository.find({
+				where: {
+					userId: me.id,
+				},
+				take: ps.limit,
+				skip: ps.offset,
+				order: {
+					id: ps.sort === 'asc' ? 1 : -1,
+				},
+			});
+
+			return await Promise.all(tokens.map(token => this.appEntityService.pack(token.appId, me, {
+				detail: true,
+			})));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/change-password.ts b/packages/backend/src/server/api/endpoints/i/change-password.ts
index f9f6a33a80..cc5b712ecf 100644
--- a/packages/backend/src/server/api/endpoints/i/change-password.ts
+++ b/packages/backend/src/server/api/endpoints/i/change-password.ts
@@ -1,6 +1,8 @@
 import bcrypt from 'bcryptjs';
-import define from '../../define.js';
-import { UserProfiles } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserProfilesRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -18,21 +20,29 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	// Compare password
-	const same = await bcrypt.compare(ps.currentPassword, profile.password!);
-
-	if (!same) {
-		throw new Error('incorrect password');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: me.id });
+
+			// Compare password
+			const same = await bcrypt.compare(ps.currentPassword, profile.password!);
+
+			if (!same) {
+				throw new Error('incorrect password');
+			}
+
+			// Generate hash of password
+			const salt = await bcrypt.genSalt(8);
+			const hash = await bcrypt.hash(ps.newPassword, salt);
+
+			await this.userProfilesRepository.update(me.id, {
+				password: hash,
+			});
+		});
 	}
-
-	// Generate hash of password
-	const salt = await bcrypt.genSalt(8);
-	const hash = await bcrypt.hash(ps.newPassword, salt);
-
-	await UserProfiles.update(user.id, {
-		password: hash,
-	});
-});
+}
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 ede4a9d03b..a1804599df 100644
--- a/packages/backend/src/server/api/endpoints/i/delete-account.ts
+++ b/packages/backend/src/server/api/endpoints/i/delete-account.ts
@@ -1,7 +1,9 @@
 import bcrypt from 'bcryptjs';
-import { UserProfiles, Users } from '@/models/index.js';
-import { deleteAccount } from '@/services/delete-account.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository, UserProfilesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DeleteAccountService } from '@/core/DeleteAccountService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -18,19 +20,32 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-	const userDetailed = await Users.findOneByOrFail({ id: user.id });
-	if (userDetailed.isDeleted) {
-		return;
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	// Compare password
-	const same = await bcrypt.compare(ps.password, profile.password!);
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
 
-	if (!same) {
-		throw new Error('incorrect password');
-	}
+		private deleteAccountService: DeleteAccountService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: me.id });
+			const userDetailed = await this.usersRepository.findOneByOrFail({ id: me.id });
+			if (userDetailed.isDeleted) {
+				return;
+			}
+
+			// Compare password
+			const same = await bcrypt.compare(ps.password, profile.password!);
 
-	await deleteAccount(user);
-});
+			if (!same) {
+				throw new Error('incorrect password');
+			}
+
+			await this.deleteAccountService.deleteAccount(me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/export-blocking.ts b/packages/backend/src/server/api/endpoints/i/export-blocking.ts
index aed4c2e0a3..770708e685 100644
--- a/packages/backend/src/server/api/endpoints/i/export-blocking.ts
+++ b/packages/backend/src/server/api/endpoints/i/export-blocking.ts
@@ -1,6 +1,7 @@
-import define from '../../define.js';
-import { createExportBlockingJob } from '@/queue/index.js';
+import { Inject, Injectable } from '@nestjs/common';
 import ms from 'ms';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueueService } from '@/core/QueueService.js';
 
 export const meta = {
 	secure: true,
@@ -18,6 +19,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	createExportBlockingJob(user);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private queueService: QueueService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			this.queueService.createExportBlockingJob(me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/export-following.ts b/packages/backend/src/server/api/endpoints/i/export-following.ts
index 058d77b3c2..fcaa59b12d 100644
--- a/packages/backend/src/server/api/endpoints/i/export-following.ts
+++ b/packages/backend/src/server/api/endpoints/i/export-following.ts
@@ -1,6 +1,7 @@
-import define from '../../define.js';
-import { createExportFollowingJob } from '@/queue/index.js';
+import { Inject, Injectable } from '@nestjs/common';
 import ms from 'ms';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueueService } from '@/core/QueueService.js';
 
 export const meta = {
 	secure: true,
@@ -21,6 +22,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	createExportFollowingJob(user, ps.excludeMuting, ps.excludeInactive);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private queueService: QueueService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			this.queueService.createExportFollowingJob(me, ps.excludeMuting, ps.excludeInactive);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/export-mute.ts b/packages/backend/src/server/api/endpoints/i/export-mute.ts
index c0216fac0c..37bef0a117 100644
--- a/packages/backend/src/server/api/endpoints/i/export-mute.ts
+++ b/packages/backend/src/server/api/endpoints/i/export-mute.ts
@@ -1,6 +1,7 @@
-import define from '../../define.js';
-import { createExportMuteJob } from '@/queue/index.js';
+import { Inject, Injectable } from '@nestjs/common';
 import ms from 'ms';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueueService } from '@/core/QueueService.js';
 
 export const meta = {
 	secure: true,
@@ -18,6 +19,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	createExportMuteJob(user);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private queueService: QueueService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			this.queueService.createExportMuteJob(me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/export-notes.ts b/packages/backend/src/server/api/endpoints/i/export-notes.ts
index 4b85a45554..9d2505e403 100644
--- a/packages/backend/src/server/api/endpoints/i/export-notes.ts
+++ b/packages/backend/src/server/api/endpoints/i/export-notes.ts
@@ -1,6 +1,7 @@
-import define from '../../define.js';
-import { createExportNotesJob } from '@/queue/index.js';
+import { Inject, Injectable } from '@nestjs/common';
 import ms from 'ms';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueueService } from '@/core/QueueService.js';
 
 export const meta = {
 	secure: true,
@@ -18,6 +19,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	createExportNotesJob(user);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private queueService: QueueService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			this.queueService.createExportNotesJob(me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/export-user-lists.ts b/packages/backend/src/server/api/endpoints/i/export-user-lists.ts
index fa5c1f5e5a..0f8e4bca76 100644
--- a/packages/backend/src/server/api/endpoints/i/export-user-lists.ts
+++ b/packages/backend/src/server/api/endpoints/i/export-user-lists.ts
@@ -1,6 +1,7 @@
-import define from '../../define.js';
-import { createExportUserListsJob } from '@/queue/index.js';
+import { Inject, Injectable } from '@nestjs/common';
 import ms from 'ms';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueueService } from '@/core/QueueService.js';
 
 export const meta = {
 	secure: true,
@@ -18,6 +19,13 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	createExportUserListsJob(user);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private queueService: QueueService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			this.queueService.createExportUserListsJob(me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/favorites.ts b/packages/backend/src/server/api/endpoints/i/favorites.ts
index 3c420e4d0f..350abd9f7b 100644
--- a/packages/backend/src/server/api/endpoints/i/favorites.ts
+++ b/packages/backend/src/server/api/endpoints/i/favorites.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { NoteFavorites } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { NoteFavoritesRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteFavoriteEntityService } from '@/core/entities/NoteFavoriteEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['account', 'notes', 'favorites'],
@@ -31,14 +34,25 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = makePaginationQuery(NoteFavorites.createQueryBuilder('favorite'), ps.sinceId, ps.untilId)
-		.andWhere(`favorite.userId = :meId`, { meId: user.id })
-		.leftJoinAndSelect('favorite.note', 'note');
-
-	const favorites = await query
-		.take(ps.limit)
-		.getMany();
-
-	return await NoteFavorites.packMany(favorites, user);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.noteFavoritesRepository)
+		private noteFavoritesRepository: NoteFavoritesRepository,
+
+		private noteFavoriteEntityService: NoteFavoriteEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.noteFavoritesRepository.createQueryBuilder('favorite'), ps.sinceId, ps.untilId)
+				.andWhere('favorite.userId = :meId', { meId: me.id })
+				.leftJoinAndSelect('favorite.note', 'note');
+
+			const favorites = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await this.noteFavoriteEntityService.packMany(favorites, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/gallery/likes.ts b/packages/backend/src/server/api/endpoints/i/gallery/likes.ts
index a38383f30e..ff6bcc01ab 100644
--- a/packages/backend/src/server/api/endpoints/i/gallery/likes.ts
+++ b/packages/backend/src/server/api/endpoints/i/gallery/likes.ts
@@ -1,6 +1,9 @@
-import define from '../../../define.js';
-import { GalleryLikes } from '@/models/index.js';
-import { makePaginationQuery } from '../../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GalleryLikesRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { GalleryLikeEntityService } from '@/core/entities/GalleryLikeEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['account', 'gallery'],
@@ -27,7 +30,7 @@ export const meta = {
 					ref: 'GalleryPost',
 				},
 			},
-		}
+		},
 	},
 } as const;
 
@@ -42,14 +45,25 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = makePaginationQuery(GalleryLikes.createQueryBuilder('like'), ps.sinceId, ps.untilId)
-		.andWhere(`like.userId = :meId`, { meId: user.id })
-		.leftJoinAndSelect('like.post', 'post');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.galleryLikesRepository)
+		private galleryLikesRepository: GalleryLikesRepository,
 
-	const likes = await query
-		.take(ps.limit)
-		.getMany();
+		private galleryLikeEntityService: GalleryLikeEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.galleryLikesRepository.createQueryBuilder('like'), ps.sinceId, ps.untilId)
+				.andWhere('like.userId = :meId', { meId: me.id })
+				.leftJoinAndSelect('like.post', 'post');
 
-	return await GalleryLikes.packMany(likes, user);
-});
+			const likes = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await this.galleryLikeEntityService.packMany(likes, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/gallery/posts.ts b/packages/backend/src/server/api/endpoints/i/gallery/posts.ts
index b4edb5f73d..927be51f79 100644
--- a/packages/backend/src/server/api/endpoints/i/gallery/posts.ts
+++ b/packages/backend/src/server/api/endpoints/i/gallery/posts.ts
@@ -1,6 +1,9 @@
-import define from '../../../define.js';
-import { GalleryPosts } from '@/models/index.js';
-import { makePaginationQuery } from '../../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GalleryPostsRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { GalleryPostEntityService } from '@/core/entities/GalleryPostEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['account', 'gallery'],
@@ -31,13 +34,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = makePaginationQuery(GalleryPosts.createQueryBuilder('post'), ps.sinceId, ps.untilId)
-		.andWhere(`post.userId = :meId`, { meId: user.id });
-
-	const posts = await query
-		.take(ps.limit)
-		.getMany();
-
-	return await GalleryPosts.packMany(posts, user);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.galleryPostsRepository)
+		private galleryPostsRepository: GalleryPostsRepository,
+
+		private galleryPostEntityService: GalleryPostEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.galleryPostsRepository.createQueryBuilder('post'), ps.sinceId, ps.untilId)
+				.andWhere('post.userId = :meId', { meId: me.id });
+
+			const posts = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await this.galleryPostEntityService.packMany(posts, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/get-word-muted-notes-count.ts b/packages/backend/src/server/api/endpoints/i/get-word-muted-notes-count.ts
index e7d7518c5b..0695abdd85 100644
--- a/packages/backend/src/server/api/endpoints/i/get-word-muted-notes-count.ts
+++ b/packages/backend/src/server/api/endpoints/i/get-word-muted-notes-count.ts
@@ -1,5 +1,7 @@
-import define from '../../define.js';
-import { MutedNotes } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { MutedNotesRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['account'],
@@ -27,11 +29,19 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	return {
-		count: await MutedNotes.countBy({
-			userId: user.id,
-			reason: 'word',
-		}),
-	};
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.mutedNotesRepository)
+		private mutedNotesRepository: MutedNotesRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return {
+				count: await this.mutedNotesRepository.countBy({
+					userId: me.id,
+					reason: 'word',
+				}),
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/import-blocking.ts b/packages/backend/src/server/api/endpoints/i/import-blocking.ts
index 0bcbf37ddd..bfba1fc36f 100644
--- a/packages/backend/src/server/api/endpoints/i/import-blocking.ts
+++ b/packages/backend/src/server/api/endpoints/i/import-blocking.ts
@@ -1,8 +1,10 @@
-import define from '../../define.js';
-import { createImportBlockingJob } from '@/queue/index.js';
+import { Inject, Injectable } from '@nestjs/common';
 import ms from 'ms';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueueService } from '@/core/QueueService.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { DriveFiles } from '@/models/index.js';
 
 export const meta = {
 	secure: true,
@@ -49,13 +51,23 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const file = await DriveFiles.findOneBy({ id: ps.fileId });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
 
-	if (file == null) throw new ApiError(meta.errors.noSuchFile);
-	//if (!file.type.endsWith('/csv')) throw new ApiError(meta.errors.unexpectedFileType);
-	if (file.size > 50000) throw new ApiError(meta.errors.tooBigFile);
-	if (file.size === 0) throw new ApiError(meta.errors.emptyFile);
+		private queueService: QueueService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const file = await this.driveFilesRepository.findOneBy({ id: ps.fileId });
 
-	createImportBlockingJob(user, file.id);
-});
+			if (file == null) throw new ApiError(meta.errors.noSuchFile);
+			//if (!file.type.endsWith('/csv')) throw new ApiError(meta.errors.unexpectedFileType);
+			if (file.size > 50000) throw new ApiError(meta.errors.tooBigFile);
+			if (file.size === 0) throw new ApiError(meta.errors.emptyFile);
+
+			this.queueService.createImportBlockingJob(me, file.id);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/import-following.ts b/packages/backend/src/server/api/endpoints/i/import-following.ts
index ee2abbea19..c7cb2e0330 100644
--- a/packages/backend/src/server/api/endpoints/i/import-following.ts
+++ b/packages/backend/src/server/api/endpoints/i/import-following.ts
@@ -1,8 +1,10 @@
-import define from '../../define.js';
-import { createImportFollowingJob } from '@/queue/index.js';
+import { Inject, Injectable } from '@nestjs/common';
 import ms from 'ms';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueueService } from '@/core/QueueService.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { DriveFiles } from '@/models/index.js';
 
 export const meta = {
 	secure: true,
@@ -48,13 +50,23 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const file = await DriveFiles.findOneBy({ id: ps.fileId });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
 
-	if (file == null) throw new ApiError(meta.errors.noSuchFile);
-	//if (!file.type.endsWith('/csv')) throw new ApiError(meta.errors.unexpectedFileType);
-	if (file.size > 50000) throw new ApiError(meta.errors.tooBigFile);
-	if (file.size === 0) throw new ApiError(meta.errors.emptyFile);
+		private queueService: QueueService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const file = await this.driveFilesRepository.findOneBy({ id: ps.fileId });
 
-	createImportFollowingJob(user, file.id);
-});
+			if (file == null) throw new ApiError(meta.errors.noSuchFile);
+			//if (!file.type.endsWith('/csv')) throw new ApiError(meta.errors.unexpectedFileType);
+			if (file.size > 50000) throw new ApiError(meta.errors.tooBigFile);
+			if (file.size === 0) throw new ApiError(meta.errors.emptyFile);
+
+			this.queueService.createImportFollowingJob(me, file.id);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/import-muting.ts b/packages/backend/src/server/api/endpoints/i/import-muting.ts
index b3b3b39238..060c37c13f 100644
--- a/packages/backend/src/server/api/endpoints/i/import-muting.ts
+++ b/packages/backend/src/server/api/endpoints/i/import-muting.ts
@@ -1,8 +1,10 @@
-import define from '../../define.js';
-import { createImportMutingJob } from '@/queue/index.js';
+import { Inject, Injectable } from '@nestjs/common';
 import ms from 'ms';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueueService } from '@/core/QueueService.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { DriveFiles } from '@/models/index.js';
 
 export const meta = {
 	secure: true,
@@ -49,13 +51,23 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const file = await DriveFiles.findOneBy({ id: ps.fileId });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
 
-	if (file == null) throw new ApiError(meta.errors.noSuchFile);
-	//if (!file.type.endsWith('/csv')) throw new ApiError(meta.errors.unexpectedFileType);
-	if (file.size > 50000) throw new ApiError(meta.errors.tooBigFile);
-	if (file.size === 0) throw new ApiError(meta.errors.emptyFile);
+		private queueService: QueueService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const file = await this.driveFilesRepository.findOneBy({ id: ps.fileId });
 
-	createImportMutingJob(user, file.id);
-});
+			if (file == null) throw new ApiError(meta.errors.noSuchFile);
+			//if (!file.type.endsWith('/csv')) throw new ApiError(meta.errors.unexpectedFileType);
+			if (file.size > 50000) throw new ApiError(meta.errors.tooBigFile);
+			if (file.size === 0) throw new ApiError(meta.errors.emptyFile);
+
+			this.queueService.createImportMutingJob(me, file.id);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/import-user-lists.ts b/packages/backend/src/server/api/endpoints/i/import-user-lists.ts
index 64f5ec05fd..a5e17283e5 100644
--- a/packages/backend/src/server/api/endpoints/i/import-user-lists.ts
+++ b/packages/backend/src/server/api/endpoints/i/import-user-lists.ts
@@ -1,8 +1,10 @@
-import define from '../../define.js';
-import { createImportUserListsJob } from '@/queue/index.js';
+import { Inject, Injectable } from '@nestjs/common';
 import ms from 'ms';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueueService } from '@/core/QueueService.js';
+import { DriveFilesRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { DriveFiles } from '@/models/index.js';
 
 export const meta = {
 	secure: true,
@@ -48,13 +50,23 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const file = await DriveFiles.findOneBy({ id: ps.fileId });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
 
-	if (file == null) throw new ApiError(meta.errors.noSuchFile);
-	//if (!file.type.endsWith('/csv')) throw new ApiError(meta.errors.unexpectedFileType);
-	if (file.size > 30000) throw new ApiError(meta.errors.tooBigFile);
-	if (file.size === 0) throw new ApiError(meta.errors.emptyFile);
+		private queueService: QueueService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const file = await this.driveFilesRepository.findOneBy({ id: ps.fileId });
 
-	createImportUserListsJob(user, file.id);
-});
+			if (file == null) throw new ApiError(meta.errors.noSuchFile);
+			//if (!file.type.endsWith('/csv')) throw new ApiError(meta.errors.unexpectedFileType);
+			if (file.size > 30000) throw new ApiError(meta.errors.tooBigFile);
+			if (file.size === 0) throw new ApiError(meta.errors.emptyFile);
+
+			this.queueService.createImportUserListsJob(me, file.id);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/notifications.ts b/packages/backend/src/server/api/endpoints/i/notifications.ts
index 2b343dabdd..96927dad49 100644
--- a/packages/backend/src/server/api/endpoints/i/notifications.ts
+++ b/packages/backend/src/server/api/endpoints/i/notifications.ts
@@ -1,10 +1,13 @@
 import { Brackets } from 'typeorm';
-import { Notifications, Followings, Mutings, Users, UserProfiles } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository, FollowingsRepository, MutingsRepository, UserProfilesRepository, NotificationsRepository } 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 { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteReadService } from '@/core/NoteReadService.js';
+import { NotificationEntityService } from '@/core/entities/NotificationEntityService.js';
+import { NotificationService } from '@/core/NotificationService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['account', 'notifications'],
@@ -49,96 +52,121 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// includeTypes が空の場合はクエリしない
-	if (ps.includeTypes && ps.includeTypes.length === 0) {
-		return [];
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.notificationsRepository)
+		private notificationsRepository: NotificationsRepository,
+
+		private notificationEntityService: NotificationEntityService,
+		private notificationService: NotificationService,
+		private queryService: QueryService,
+		private noteReadService: NoteReadService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// includeTypes が空の場合はクエリしない
+			if (ps.includeTypes && ps.includeTypes.length === 0) {
+				return [];
+			}
+			// excludeTypes に全指定されている場合はクエリしない
+			if (notificationTypes.every(type => ps.excludeTypes?.includes(type))) {
+				return [];
+			}
+			const followingQuery = this.followingsRepository.createQueryBuilder('following')
+				.select('following.followeeId')
+				.where('following.followerId = :followerId', { followerId: me.id });
+
+			const mutingQuery = this.mutingsRepository.createQueryBuilder('muting')
+				.select('muting.muteeId')
+				.where('muting.muterId = :muterId', { muterId: me.id });
+
+			const mutingInstanceQuery = this.userProfilesRepository.createQueryBuilder('user_profile')
+				.select('user_profile.mutedInstances')
+				.where('user_profile.userId = :muterId', { muterId: me.id });
+
+			const suspendedQuery = this.usersRepository.createQueryBuilder('users')
+				.select('users.id')
+				.where('users.isSuspended = TRUE');
+
+			const query = this.queryService.makePaginationQuery(this.notificationsRepository.createQueryBuilder('notification'), ps.sinceId, ps.untilId)
+				.andWhere('notification.notifieeId = :meId', { meId: me.id })
+				.leftJoinAndSelect('notification.notifier', 'notifier')
+				.leftJoinAndSelect('notification.note', 'note')
+				.leftJoinAndSelect('notifier.avatar', 'notifierAvatar')
+				.leftJoinAndSelect('notifier.banner', 'notifierBanner')
+				.leftJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.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());
+
+			// 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');
+			}));
+
+			if (ps.following) {
+				query.andWhere(`((notification.notifierId IN (${ followingQuery.getQuery() })) OR (notification.notifierId = :meId))`, { meId: me.id });
+				query.setParameters(followingQuery.getParameters());
+			}
+
+			if (ps.includeTypes && ps.includeTypes.length > 0) {
+				query.andWhere('notification.type IN (:...includeTypes)', { includeTypes: ps.includeTypes });
+			} else if (ps.excludeTypes && ps.excludeTypes.length > 0) {
+				query.andWhere('notification.type NOT IN (:...excludeTypes)', { excludeTypes: ps.excludeTypes });
+			}
+
+			if (ps.unreadOnly) {
+				query.andWhere('notification.isRead = false');
+			}
+
+			const notifications = await query.take(ps.limit).getMany();
+
+			// Mark all as read
+			if (notifications.length > 0 && ps.markAsRead) {
+				this.notificationService.readNotification(me.id, notifications.map(x => x.id));
+			}
+
+			const notes = notifications.filter(notification => ['mention', 'reply', 'quote'].includes(notification.type)).map(notification => notification.note!);
+
+			if (notes.length > 0) {
+				this.noteReadService.read(me.id, notes);
+			}
+
+			return await this.notificationEntityService.packMany(notifications, me.id);
+		});
 	}
-	// excludeTypes に全指定されている場合はクエリしない
-	if (notificationTypes.every(type => ps.excludeTypes?.includes(type))) {
-		return [];
-	}
-	const followingQuery = Followings.createQueryBuilder('following')
-		.select('following.followeeId')
-		.where('following.followerId = :followerId', { followerId: user.id });
-
-	const mutingQuery = Mutings.createQueryBuilder('muting')
-		.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');
-
-	const query = makePaginationQuery(Notifications.createQueryBuilder('notification'), ps.sinceId, ps.untilId)
-		.andWhere('notification.notifieeId = :meId', { meId: user.id })
-		.leftJoinAndSelect('notification.notifier', 'notifier')
-		.leftJoinAndSelect('notification.note', 'note')
-		.leftJoinAndSelect('notifier.avatar', 'notifierAvatar')
-		.leftJoinAndSelect('notifier.banner', 'notifierBanner')
-		.leftJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.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());
-
-	// 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');
-	}));
-
-	if (ps.following) {
-		query.andWhere(`((notification.notifierId IN (${ followingQuery.getQuery() })) OR (notification.notifierId = :meId))`, { meId: user.id });
-		query.setParameters(followingQuery.getParameters());
-	}
-
-	if (ps.includeTypes && ps.includeTypes.length > 0) {
-		query.andWhere('notification.type IN (:...includeTypes)', { includeTypes: ps.includeTypes });
-	} else if (ps.excludeTypes && ps.excludeTypes.length > 0) {
-		query.andWhere('notification.type NOT IN (:...excludeTypes)', { excludeTypes: ps.excludeTypes });
-	}
-
-	if (ps.unreadOnly) {
-		query.andWhere('notification.isRead = false');
-	}
-
-	const notifications = await query.take(ps.limit).getMany();
-
-	// Mark all as read
-	if (notifications.length > 0 && ps.markAsRead) {
-		readNotification(user.id, notifications.map(x => x.id));
-	}
-
-	const notes = notifications.filter(notification => ['mention', 'reply', 'quote'].includes(notification.type)).map(notification => notification.note!);
-
-	if (notes.length > 0) {
-		read(user.id, notes);
-	}
-
-	return await Notifications.packMany(notifications, user.id);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/i/page-likes.ts b/packages/backend/src/server/api/endpoints/i/page-likes.ts
index 71e326e2f0..9a909eedf4 100644
--- a/packages/backend/src/server/api/endpoints/i/page-likes.ts
+++ b/packages/backend/src/server/api/endpoints/i/page-likes.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { PageLikes } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { PageLikesRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { PageLikeEntityService } from '@/core/entities/PageLikeEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['account', 'pages'],
@@ -26,7 +29,7 @@ export const meta = {
 					ref: 'Page',
 				},
 			},
-		}
+		},
 	},
 } as const;
 
@@ -41,14 +44,25 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = makePaginationQuery(PageLikes.createQueryBuilder('like'), ps.sinceId, ps.untilId)
-		.andWhere(`like.userId = :meId`, { meId: user.id })
-		.leftJoinAndSelect('like.page', 'page');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.pageLikesRepository)
+		private pageLikesRepository: PageLikesRepository,
 
-	const likes = await query
-		.take(ps.limit)
-		.getMany();
+		private pageLikeEntityService: PageLikeEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.pageLikesRepository.createQueryBuilder('like'), ps.sinceId, ps.untilId)
+				.andWhere('like.userId = :meId', { meId: me.id })
+				.leftJoinAndSelect('like.page', 'page');
 
-	return PageLikes.packMany(likes, user);
-});
+			const likes = await query
+				.take(ps.limit)
+				.getMany();
+
+			return this.pageLikeEntityService.packMany(likes, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/pages.ts b/packages/backend/src/server/api/endpoints/i/pages.ts
index f28aed3fd4..7c4e4a6c7d 100644
--- a/packages/backend/src/server/api/endpoints/i/pages.ts
+++ b/packages/backend/src/server/api/endpoints/i/pages.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { Pages } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { PagesRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { PageEntityService } from '@/core/entities/PageEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['account', 'pages'],
@@ -31,13 +34,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = makePaginationQuery(Pages.createQueryBuilder('page'), ps.sinceId, ps.untilId)
-		.andWhere(`page.userId = :meId`, { meId: user.id });
-
-	const pages = await query
-		.take(ps.limit)
-		.getMany();
-
-	return await Pages.packMany(pages);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.pagesRepository)
+		private pagesRepository: PagesRepository,
+
+		private pageEntityService: PageEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.pagesRepository.createQueryBuilder('page'), ps.sinceId, ps.untilId)
+				.andWhere('page.userId = :meId', { meId: me.id });
+
+			const pages = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await this.pageEntityService.packMany(pages);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/pin.ts b/packages/backend/src/server/api/endpoints/i/pin.ts
index 67b7026be1..f31b0dc35e 100644
--- a/packages/backend/src/server/api/endpoints/i/pin.ts
+++ b/packages/backend/src/server/api/endpoints/i/pin.ts
@@ -1,7 +1,9 @@
-import { addPinned } from '@/services/i/pin.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import type { UsersRepository } from '@/models/index.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { NotePiningService } from '@/core/NotePiningService.js';
 import { ApiError } from '../../error.js';
-import { Users } from '@/models/index.js';
 
 export const meta = {
 	tags: ['account', 'notes'],
@@ -46,15 +48,23 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	await addPinned(user, ps.noteId).catch(e => {
-		if (e.id === '70c4e51f-5bea-449c-a030-53bee3cce202') throw new ApiError(meta.errors.noSuchNote);
-		if (e.id === '15a018eb-58e5-4da1-93be-330fcc5e4e1a') throw new ApiError(meta.errors.pinLimitExceeded);
-		if (e.id === '23f0cf4e-59a3-4276-a91d-61a5891c1514') throw new ApiError(meta.errors.alreadyPinned);
-		throw e;
-	});
-
-	return await Users.pack<true, true>(user.id, user, {
-		detail: true,
-	});
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private userEntityService: UserEntityService,
+		private notePiningService: NotePiningService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			await this.notePiningService.addPinned(me, ps.noteId).catch(err => {
+				if (err.id === '70c4e51f-5bea-449c-a030-53bee3cce202') throw new ApiError(meta.errors.noSuchNote);
+				if (err.id === '15a018eb-58e5-4da1-93be-330fcc5e4e1a') throw new ApiError(meta.errors.pinLimitExceeded);
+				if (err.id === '23f0cf4e-59a3-4276-a91d-61a5891c1514') throw new ApiError(meta.errors.alreadyPinned);
+				throw err;
+			});
+
+			return await this.userEntityService.pack<true, true>(me.id, me, {
+				detail: true,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/read-all-messaging-messages.ts b/packages/backend/src/server/api/endpoints/i/read-all-messaging-messages.ts
index 7ff6409caf..36c3566f55 100644
--- a/packages/backend/src/server/api/endpoints/i/read-all-messaging-messages.ts
+++ b/packages/backend/src/server/api/endpoints/i/read-all-messaging-messages.ts
@@ -1,6 +1,8 @@
-import { publishMainStream } from '@/services/stream.js';
-import define from '../../define.js';
-import { MessagingMessages, UserGroupJoinings } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { MessagingMessagesRepository, UserGroupJoiningsRepository } from '@/models/index.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['account', 'messaging'],
@@ -17,25 +19,38 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Update documents
-	await MessagingMessages.update({
-		recipientId: user.id,
-		isRead: false,
-	}, {
-		isRead: true,
-	});
-
-	const joinings = await UserGroupJoinings.findBy({ userId: user.id });
-
-	await Promise.all(joinings.map(j => MessagingMessages.createQueryBuilder().update()
-		.set({
-			reads: (() => `array_append("reads", '${user.id}')`) as any,
-		})
-		.where(`groupId = :groupId`, { groupId: j.userGroupId })
-		.andWhere('userId != :userId', { userId: user.id })
-		.andWhere('NOT (:userId = ANY(reads))', { userId: user.id })
-		.execute()));
-
-	publishMainStream(user.id, 'readAllMessagingMessages');
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.messagingMessagesRepository)
+		private messagingMessagesRepository: MessagingMessagesRepository,
+
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Update documents
+			await this.messagingMessagesRepository.update({
+				recipientId: me.id,
+				isRead: false,
+			}, {
+				isRead: true,
+			});
+
+			const joinings = await this.userGroupJoiningsRepository.findBy({ userId: me.id });
+
+			await Promise.all(joinings.map(j => this.messagingMessagesRepository.createQueryBuilder().update()
+				.set({
+					reads: (() => `array_append("reads", '${me.id}')`) as any,
+				})
+				.where('groupId = :groupId', { groupId: j.userGroupId })
+				.andWhere('userId != :userId', { userId: me.id })
+				.andWhere('NOT (:userId = ANY(reads))', { userId: me.id })
+				.execute()));
+
+			this.globalEventService.publishMainStream(me.id, 'readAllMessagingMessages');
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/read-all-unread-notes.ts b/packages/backend/src/server/api/endpoints/i/read-all-unread-notes.ts
index 49f3deb331..b4bb83c6eb 100644
--- a/packages/backend/src/server/api/endpoints/i/read-all-unread-notes.ts
+++ b/packages/backend/src/server/api/endpoints/i/read-all-unread-notes.ts
@@ -1,6 +1,8 @@
-import { publishMainStream } from '@/services/stream.js';
-import define from '../../define.js';
-import { NoteUnreads } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { NoteUnreadsRepository } from '@/models/index.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['account'],
@@ -17,13 +19,23 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Remove documents
-	await NoteUnreads.delete({
-		userId: user.id,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.noteUnreadsRepository)
+		private noteUnreadsRepository: NoteUnreadsRepository,
 
-	// 全て既読になったイベントを発行
-	publishMainStream(user.id, 'readAllUnreadMentions');
-	publishMainStream(user.id, 'readAllUnreadSpecifiedNotes');
-});
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Remove documents
+			await this.noteUnreadsRepository.delete({
+				userId: me.id,
+			});
+
+			// 全て既読になったイベントを発行
+			this.globalEventService.publishMainStream(me.id, 'readAllUnreadMentions');
+			this.globalEventService.publishMainStream(me.id, 'readAllUnreadSpecifiedNotes');
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/read-announcement.ts b/packages/backend/src/server/api/endpoints/i/read-announcement.ts
index 45b6e98c86..5a7909674f 100644
--- a/packages/backend/src/server/api/endpoints/i/read-announcement.ts
+++ b/packages/backend/src/server/api/endpoints/i/read-announcement.ts
@@ -1,8 +1,12 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { IdService } from '@/core/IdService.js';
+import { AnnouncementReadsRepository, AnnouncementsRepository } from '@/models/index.js';
+import type { UsersRepository } from '@/models/index.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { genId } from '@/misc/gen-id.js';
-import { AnnouncementReads, Announcements, Users } from '@/models/index.js';
-import { publishMainStream } from '@/services/stream.js';
 
 export const meta = {
 	tags: ['account'],
@@ -29,33 +33,48 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Check if announcement exists
-	const announcement = await Announcements.findOneBy({ id: ps.announcementId });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.announcementsRepository)
+		private announcementsRepository: AnnouncementsRepository,
 
-	if (announcement == null) {
-		throw new ApiError(meta.errors.noSuchAnnouncement);
-	}
+		@Inject(DI.announcementReadsRepository)
+		private announcementReadsRepository: AnnouncementReadsRepository,
 
-	// Check if already read
-	const read = await AnnouncementReads.findOneBy({
-		announcementId: ps.announcementId,
-		userId: user.id,
-	});
+		private userEntityService: UserEntityService,
+		private idService: IdService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Check if announcement exists
+			const announcement = await this.announcementsRepository.findOneBy({ id: ps.announcementId });
 
-	if (read != null) {
-		return;
-	}
+			if (announcement == null) {
+				throw new ApiError(meta.errors.noSuchAnnouncement);
+			}
+
+			// Check if already read
+			const read = await this.announcementReadsRepository.findOneBy({
+				announcementId: ps.announcementId,
+				userId: me.id,
+			});
+
+			if (read != null) {
+				return;
+			}
 
-	// Create read
-	await AnnouncementReads.insert({
-		id: genId(),
-		createdAt: new Date(),
-		announcementId: ps.announcementId,
-		userId: user.id,
-	});
+			// Create read
+			await this.announcementReadsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				announcementId: ps.announcementId,
+				userId: me.id,
+			});
 
-	if (!await Users.getHasUnreadAnnouncement(user.id)) {
-		publishMainStream(user.id, 'readAllAnnouncements');
+			if (!await this.userEntityService.getHasUnreadAnnouncement(me.id)) {
+				this.globalEventService.publishMainStream(me.id, 'readAllAnnouncements');
+			}
+		});
 	}
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/i/regenerate-token.ts b/packages/backend/src/server/api/endpoints/i/regenerate-token.ts
index af929b04e8..7796fd97cb 100644
--- a/packages/backend/src/server/api/endpoints/i/regenerate-token.ts
+++ b/packages/backend/src/server/api/endpoints/i/regenerate-token.ts
@@ -1,8 +1,10 @@
 import bcrypt from 'bcryptjs';
-import { publishInternalEvent, publishMainStream, publishUserEvent } from '@/services/stream.js';
-import generateUserToken from '../../common/generate-native-user-token.js';
-import define from '../../define.js';
-import { Users, UserProfiles } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository, UserProfilesRepository } from '@/models/index.js';
+import generateUserToken from '@/misc/generate-native-user-token.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -19,31 +21,44 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const freshUser = await Users.findOneByOrFail({ id: user.id });
-	const oldToken = freshUser.token;
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
 
-	// Compare password
-	const same = await bcrypt.compare(ps.password, profile.password!);
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const freshUser = await this.usersRepository.findOneByOrFail({ id: me.id });
+			const oldToken = freshUser.token;
 
-	if (!same) {
-		throw new Error('incorrect password');
-	}
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: me.id });
+
+			// Compare password
+			const same = await bcrypt.compare(ps.password, profile.password!);
 
-	const newToken = generateUserToken();
+			if (!same) {
+				throw new Error('incorrect password');
+			}
 
-	await Users.update(user.id, {
-		token: newToken,
-	});
+			const newToken = generateUserToken();
 
-	// Publish event
-	publishInternalEvent('userTokenRegenerated', { id: user.id, oldToken, newToken });
-	publishMainStream(user.id, 'myTokenRegenerated');
+			await this.usersRepository.update(me.id, {
+				token: newToken,
+			});
 
-	// Terminate streaming
-	setTimeout(() => {
-		publishUserEvent(user.id, 'terminate', {});
-	}, 5000);
-});
+			// Publish event
+			this.globalEventService.publishInternalEvent('userTokenRegenerated', { id: me.id, oldToken, newToken });
+			this.globalEventService.publishMainStream(me.id, 'myTokenRegenerated');
+
+			// Terminate streaming
+			setTimeout(() => {
+				this.globalEventService.publishUserEvent(me.id, 'terminate', {});
+			}, 5000);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/registry/get-all.ts b/packages/backend/src/server/api/endpoints/i/registry/get-all.ts
index d0b16dbc48..3b4db5fae3 100644
--- a/packages/backend/src/server/api/endpoints/i/registry/get-all.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/get-all.ts
@@ -1,5 +1,7 @@
-import define from '../../../define.js';
-import { RegistryItems } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { RegistryItemsRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -18,19 +20,27 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = RegistryItems.createQueryBuilder('item')
-		.where('item.domain IS NULL')
-		.andWhere('item.userId = :userId', { userId: user.id })
-		.andWhere('item.scope = :scope', { scope: ps.scope });
-
-	const items = await query.getMany();
-
-	const res = {} as Record<string, any>;
-
-	for (const item of items) {
-		res[item.key] = item.value;
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.registryItemsRepository)
+		private registryItemsRepository: RegistryItemsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.registryItemsRepository.createQueryBuilder('item')
+				.where('item.domain IS NULL')
+				.andWhere('item.userId = :userId', { userId: me.id })
+				.andWhere('item.scope = :scope', { scope: ps.scope });
+
+			const items = await query.getMany();
+
+			const res = {} as Record<string, any>;
+
+			for (const item of items) {
+				res[item.key] = item.value;
+			}
+
+			return res;
+		});
 	}
-
-	return res;
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/i/registry/get-detail.ts b/packages/backend/src/server/api/endpoints/i/registry/get-detail.ts
index cc5d5a8c6f..d24dff95b0 100644
--- a/packages/backend/src/server/api/endpoints/i/registry/get-detail.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/get-detail.ts
@@ -1,5 +1,7 @@
-import define from '../../../define.js';
-import { RegistryItems } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { RegistryItemsRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -28,21 +30,29 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = RegistryItems.createQueryBuilder('item')
-		.where('item.domain IS NULL')
-		.andWhere('item.userId = :userId', { userId: user.id })
-		.andWhere('item.key = :key', { key: ps.key })
-		.andWhere('item.scope = :scope', { scope: ps.scope });
-
-	const item = await query.getOne();
-
-	if (item == null) {
-		throw new ApiError(meta.errors.noSuchKey);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.registryItemsRepository)
+		private registryItemsRepository: RegistryItemsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.registryItemsRepository.createQueryBuilder('item')
+				.where('item.domain IS NULL')
+				.andWhere('item.userId = :userId', { userId: me.id })
+				.andWhere('item.key = :key', { key: ps.key })
+				.andWhere('item.scope = :scope', { scope: ps.scope });
+
+			const item = await query.getOne();
+
+			if (item == null) {
+				throw new ApiError(meta.errors.noSuchKey);
+			}
+
+			return {
+				updatedAt: item.updatedAt,
+				value: item.value,
+			};
+		});
 	}
-
-	return {
-		updatedAt: item.updatedAt,
-		value: item.value,
-	};
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/i/registry/get.ts b/packages/backend/src/server/api/endpoints/i/registry/get.ts
index a79319744c..98d94a4c02 100644
--- a/packages/backend/src/server/api/endpoints/i/registry/get.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/get.ts
@@ -1,5 +1,7 @@
-import define from '../../../define.js';
-import { RegistryItems } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { RegistryItemsRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -28,18 +30,26 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = RegistryItems.createQueryBuilder('item')
-		.where('item.domain IS NULL')
-		.andWhere('item.userId = :userId', { userId: user.id })
-		.andWhere('item.key = :key', { key: ps.key })
-		.andWhere('item.scope = :scope', { scope: ps.scope });
-
-	const item = await query.getOne();
-
-	if (item == null) {
-		throw new ApiError(meta.errors.noSuchKey);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.registryItemsRepository)
+		private registryItemsRepository: RegistryItemsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.registryItemsRepository.createQueryBuilder('item')
+				.where('item.domain IS NULL')
+				.andWhere('item.userId = :userId', { userId: me.id })
+				.andWhere('item.key = :key', { key: ps.key })
+				.andWhere('item.scope = :scope', { scope: ps.scope });
+
+			const item = await query.getOne();
+
+			if (item == null) {
+				throw new ApiError(meta.errors.noSuchKey);
+			}
+
+			return item.value;
+		});
 	}
-
-	return item.value;
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/i/registry/keys-with-type.ts b/packages/backend/src/server/api/endpoints/i/registry/keys-with-type.ts
index ac209c06a6..d1a05d9d06 100644
--- a/packages/backend/src/server/api/endpoints/i/registry/keys-with-type.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/keys-with-type.ts
@@ -1,5 +1,7 @@
-import define from '../../../define.js';
-import { RegistryItems } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { RegistryItemsRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -18,19 +20,25 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = RegistryItems.createQueryBuilder('item')
-		.where('item.domain IS NULL')
-		.andWhere('item.userId = :userId', { userId: user.id })
-		.andWhere('item.scope = :scope', { scope: ps.scope });
-
-	const items = await query.getMany();
-
-	const res = {} as Record<string, string>;
-
-	for (const item of items) {
-		const type = typeof item.value;
-		res[item.key] =
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.registryItemsRepository)
+		private registryItemsRepository: RegistryItemsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.registryItemsRepository.createQueryBuilder('item')
+				.where('item.domain IS NULL')
+				.andWhere('item.userId = :userId', { userId: me.id })
+				.andWhere('item.scope = :scope', { scope: ps.scope });
+
+			const items = await query.getMany();
+
+			const res = {} as Record<string, string>;
+
+			for (const item of items) {
+				const type = typeof item.value;
+				res[item.key] =
 			item.value === null ? 'null' :
 			Array.isArray(item.value) ? 'array' :
 			type === 'number' ? 'number' :
@@ -38,7 +46,9 @@ export default define(meta, paramDef, async (ps, user) => {
 			type === 'boolean' ? 'boolean' :
 			type === 'object' ? 'object' :
 			null as never;
-	}
+			}
 
-	return res;
-});
+			return res;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/registry/keys.ts b/packages/backend/src/server/api/endpoints/i/registry/keys.ts
index 5ea1a9d344..6df5f4ecc3 100644
--- a/packages/backend/src/server/api/endpoints/i/registry/keys.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/keys.ts
@@ -1,5 +1,7 @@
-import define from '../../../define.js';
-import { RegistryItems } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { RegistryItemsRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -18,14 +20,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = RegistryItems.createQueryBuilder('item')
-		.select('item.key')
-		.where('item.domain IS NULL')
-		.andWhere('item.userId = :userId', { userId: user.id })
-		.andWhere('item.scope = :scope', { scope: ps.scope });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.registryItemsRepository)
+		private registryItemsRepository: RegistryItemsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.registryItemsRepository.createQueryBuilder('item')
+				.select('item.key')
+				.where('item.domain IS NULL')
+				.andWhere('item.userId = :userId', { userId: me.id })
+				.andWhere('item.scope = :scope', { scope: ps.scope });
 
-	const items = await query.getMany();
+			const items = await query.getMany();
 
-	return items.map(x => x.key);
-});
+			return items.map(x => x.key);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/registry/remove.ts b/packages/backend/src/server/api/endpoints/i/registry/remove.ts
index 92473654c6..b5870f099d 100644
--- a/packages/backend/src/server/api/endpoints/i/registry/remove.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/remove.ts
@@ -1,5 +1,7 @@
-import define from '../../../define.js';
-import { RegistryItems } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { RegistryItemsRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -28,18 +30,26 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = RegistryItems.createQueryBuilder('item')
-		.where('item.domain IS NULL')
-		.andWhere('item.userId = :userId', { userId: user.id })
-		.andWhere('item.key = :key', { key: ps.key })
-		.andWhere('item.scope = :scope', { scope: ps.scope });
-
-	const item = await query.getOne();
-
-	if (item == null) {
-		throw new ApiError(meta.errors.noSuchKey);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.registryItemsRepository)
+		private registryItemsRepository: RegistryItemsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.registryItemsRepository.createQueryBuilder('item')
+				.where('item.domain IS NULL')
+				.andWhere('item.userId = :userId', { userId: me.id })
+				.andWhere('item.key = :key', { key: ps.key })
+				.andWhere('item.scope = :scope', { scope: ps.scope });
+
+			const item = await query.getOne();
+
+			if (item == null) {
+				throw new ApiError(meta.errors.noSuchKey);
+			}
+
+			await this.registryItemsRepository.remove(item);
+		});
 	}
-
-	await RegistryItems.remove(item);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/i/registry/scopes.ts b/packages/backend/src/server/api/endpoints/i/registry/scopes.ts
index de4b313e25..58085ddbc5 100644
--- a/packages/backend/src/server/api/endpoints/i/registry/scopes.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/scopes.ts
@@ -1,5 +1,7 @@
-import define from '../../../define.js';
-import { RegistryItems } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { RegistryItemsRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -14,20 +16,28 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = RegistryItems.createQueryBuilder('item')
-		.select('item.scope')
-		.where('item.domain IS NULL')
-		.andWhere('item.userId = :userId', { userId: user.id });
-
-	const items = await query.getMany();
-
-	const res = [] as string[][];
-
-	for (const item of items) {
-		if (res.some(scope => scope.join('.') === item.scope.join('.'))) continue;
-		res.push(item.scope);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.registryItemsRepository)
+		private registryItemsRepository: RegistryItemsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.registryItemsRepository.createQueryBuilder('item')
+				.select('item.scope')
+				.where('item.domain IS NULL')
+				.andWhere('item.userId = :userId', { userId: me.id });
+
+			const items = await query.getMany();
+
+			const res = [] as string[][];
+
+			for (const item of items) {
+				if (res.some(scope => scope.join('.') === item.scope.join('.'))) continue;
+				res.push(item.scope);
+			}
+
+			return res;
+		});
 	}
-
-	return res;
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/i/registry/set.ts b/packages/backend/src/server/api/endpoints/i/registry/set.ts
index d380b428a3..585aac2e01 100644
--- a/packages/backend/src/server/api/endpoints/i/registry/set.ts
+++ b/packages/backend/src/server/api/endpoints/i/registry/set.ts
@@ -1,7 +1,9 @@
-import { publishMainStream } from '@/services/stream.js';
-import define from '../../../define.js';
-import { RegistryItems } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { RegistryItemsRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -22,37 +24,48 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = RegistryItems.createQueryBuilder('item')
-		.where('item.domain IS NULL')
-		.andWhere('item.userId = :userId', { userId: user.id })
-		.andWhere('item.key = :key', { key: ps.key })
-		.andWhere('item.scope = :scope', { scope: ps.scope });
-
-	const existingItem = await query.getOne();
-
-	if (existingItem) {
-		await RegistryItems.update(existingItem.id, {
-			updatedAt: new Date(),
-			value: ps.value,
-		});
-	} else {
-		await RegistryItems.insert({
-			id: genId(),
-			createdAt: new Date(),
-			updatedAt: new Date(),
-			userId: user.id,
-			domain: null,
-			scope: ps.scope,
-			key: ps.key,
-			value: ps.value,
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.registryItemsRepository)
+		private registryItemsRepository: RegistryItemsRepository,
+
+		private idService: IdService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.registryItemsRepository.createQueryBuilder('item')
+				.where('item.domain IS NULL')
+				.andWhere('item.userId = :userId', { userId: me.id })
+				.andWhere('item.key = :key', { key: ps.key })
+				.andWhere('item.scope = :scope', { scope: ps.scope });
+
+			const existingItem = await query.getOne();
+
+			if (existingItem) {
+				await this.registryItemsRepository.update(existingItem.id, {
+					updatedAt: new Date(),
+					value: ps.value,
+				});
+			} else {
+				await this.registryItemsRepository.insert({
+					id: this.idService.genId(),
+					createdAt: new Date(),
+					updatedAt: new Date(),
+					userId: me.id,
+					domain: null,
+					scope: ps.scope,
+					key: ps.key,
+					value: ps.value,
+				});
+			}
+
+			// TODO: サードパーティアプリが傍受出来てしまうのでどうにかする
+			this.globalEventService.publishMainStream(me.id, 'registryUpdated', {
+				scope: ps.scope,
+				key: ps.key,
+				value: ps.value,
+			});
 		});
 	}
-
-	// TODO: サードパーティアプリが傍受出来てしまうのでどうにかする
-	publishMainStream(user.id, 'registryUpdated', {
-		scope: ps.scope,
-		key: ps.key,
-		value: ps.value,
-	});
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/i/revoke-token.ts b/packages/backend/src/server/api/endpoints/i/revoke-token.ts
index c692453794..86a82e6a6c 100644
--- a/packages/backend/src/server/api/endpoints/i/revoke-token.ts
+++ b/packages/backend/src/server/api/endpoints/i/revoke-token.ts
@@ -1,6 +1,8 @@
-import define from '../../define.js';
-import { AccessTokens } from '@/models/index.js';
-import { publishUserEvent } from '@/services/stream.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AccessTokensRepository } from '@/models/index.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -17,16 +19,26 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const token = await AccessTokens.findOneBy({ id: ps.tokenId });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.accessTokensRepository)
+		private accessTokensRepository: AccessTokensRepository,
 
-	if (token) {
-		await AccessTokens.delete({
-			id: ps.tokenId,
-			userId: user.id,
-		});
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const token = await this.accessTokensRepository.findOneBy({ id: ps.tokenId });
+
+			if (token) {
+				await this.accessTokensRepository.delete({
+					id: ps.tokenId,
+					userId: me.id,
+				});
 
-		// Terminate streaming
-		publishUserEvent(user.id, 'terminate');
+				// Terminate streaming
+				this.globalEventService.publishUserEvent(me.id, 'terminate');
+			}
+		});
 	}
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/i/signin-history.ts b/packages/backend/src/server/api/endpoints/i/signin-history.ts
index ca37411662..410cd72065 100644
--- a/packages/backend/src/server/api/endpoints/i/signin-history.ts
+++ b/packages/backend/src/server/api/endpoints/i/signin-history.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { Signins } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { SigninsRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { SigninEntityService } from '@/core/entities/SigninEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: true,
@@ -19,11 +22,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = makePaginationQuery(Signins.createQueryBuilder('signin'), ps.sinceId, ps.untilId)
-		.andWhere(`signin.userId = :meId`, { meId: user.id });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.signinsRepository)
+		private signinsRepository: SigninsRepository,
 
-	const history = await query.take(ps.limit).getMany();
+		private signinEntityService: SigninEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.signinsRepository.createQueryBuilder('signin'), ps.sinceId, ps.untilId)
+				.andWhere('signin.userId = :meId', { meId: me.id });
 
-	return await Promise.all(history.map(record => Signins.pack(record)));
-});
+			const history = await query.take(ps.limit).getMany();
+
+			return await Promise.all(history.map(record => this.signinEntityService.pack(record)));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/unpin.ts b/packages/backend/src/server/api/endpoints/i/unpin.ts
index 9912689da5..9a735e1168 100644
--- a/packages/backend/src/server/api/endpoints/i/unpin.ts
+++ b/packages/backend/src/server/api/endpoints/i/unpin.ts
@@ -1,7 +1,9 @@
-import { removePinned } from '@/services/i/pin.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import type { UsersRepository } from '@/models/index.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { NotePiningService } from '@/core/NotePiningService.js';
 import { ApiError } from '../../error.js';
-import { Users } from '@/models/index.js';
 
 export const meta = {
 	tags: ['account', 'notes'],
@@ -34,13 +36,21 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	await removePinned(user, ps.noteId).catch(e => {
-		if (e.id === 'b302d4cf-c050-400a-bbb3-be208681f40c') throw new ApiError(meta.errors.noSuchNote);
-		throw e;
-	});
-
-	return await Users.pack<true, true>(user.id, user, {
-		detail: true,
-	});
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private userEntityService: UserEntityService,
+		private notePiningService: NotePiningService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			await this.notePiningService.removePinned(me, ps.noteId).catch(err => {
+				if (err.id === 'b302d4cf-c050-400a-bbb3-be208681f40c') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
+
+			return await this.userEntityService.pack<true, true>(me.id, me, {
+				detail: true,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/update-email.ts b/packages/backend/src/server/api/endpoints/i/update-email.ts
index 3318078523..719cc14f09 100644
--- a/packages/backend/src/server/api/endpoints/i/update-email.ts
+++ b/packages/backend/src/server/api/endpoints/i/update-email.ts
@@ -1,13 +1,15 @@
-import { publishMainStream } from '@/services/stream.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
 import rndstr from 'rndstr';
-import config from '@/config/index.js';
 import ms from 'ms';
 import bcrypt from 'bcryptjs';
-import { Users, UserProfiles } from '@/models/index.js';
-import { sendEmail } from '@/services/send-email.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UsersRepository, UserProfilesRepository } from '@/models/index.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { EmailService } from '@/core/EmailService.js';
+import { Config } from '@/config.js';
+import { DI } from '@/di-symbols.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
 import { ApiError } from '../../error.js';
-import { validateEmailForAccount } from '@/services/validate-email-for-account.js';
 
 export const meta = {
 	requireCredential: true,
@@ -44,50 +46,68 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	// Compare password
-	const same = await bcrypt.compare(ps.password, profile.password!);
-
-	if (!same) {
-		throw new ApiError(meta.errors.incorrectPassword);
-	}
-
-	if (ps.email != null) {
-		const available = await validateEmailForAccount(ps.email);
-		if (!available) {
-			throw new ApiError(meta.errors.unavailable);
-		}
-	}
-
-	await UserProfiles.update(user.id, {
-		email: ps.email,
-		emailVerified: false,
-		emailVerifyCode: null,
-	});
-
-	const iObj = await Users.pack(user.id, user, {
-		detail: true,
-		includeSecrets: true,
-	});
-
-	// Publish meUpdated event
-	publishMainStream(user.id, 'meUpdated', iObj);
-
-	if (ps.email != null) {
-		const code = rndstr('a-z0-9', 16);
-
-		await UserProfiles.update(user.id, {
-			emailVerifyCode: code,
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		private userEntityService: UserEntityService,
+		private emailService: EmailService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: me.id });
+
+			// Compare password
+			const same = await bcrypt.compare(ps.password, profile.password!);
+
+			if (!same) {
+				throw new ApiError(meta.errors.incorrectPassword);
+			}
+
+			if (ps.email != null) {
+				const available = await this.emailService.validateEmailForAccount(ps.email);
+				if (!available) {
+					throw new ApiError(meta.errors.unavailable);
+				}
+			}
+
+			await this.userProfilesRepository.update(me.id, {
+				email: ps.email,
+				emailVerified: false,
+				emailVerifyCode: null,
+			});
+
+			const iObj = await this.userEntityService.pack(me.id, me, {
+				detail: true,
+				includeSecrets: true,
+			});
+
+			// Publish meUpdated event
+			this.globalEventService.publishMainStream(me.id, 'meUpdated', iObj);
+
+			if (ps.email != null) {
+				const code = rndstr('a-z0-9', 16);
+
+				await this.userProfilesRepository.update(me.id, {
+					emailVerifyCode: code,
+				});
+
+				const link = `${this.config.url}/verify-email/${code}`;
+
+				this.emailService.sendEmail(ps.email, 'Email verification',
+					`To verify email, please click this link:<br><a href="${link}">${link}</a>`,
+					`To verify email, please click this link: ${link}`);
+			}
+
+			return iObj;
 		});
-
-		const link = `${config.url}/verify-email/${code}`;
-
-		sendEmail(ps.email, 'Email verification',
-			`To verify email, please click this link:<br><a href="${link}">${link}</a>`,
-			`To verify email, please click this link: ${link}`);
 	}
-
-	return iObj;
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/i/update.ts b/packages/backend/src/server/api/endpoints/i/update.ts
index 3c2f1cea0d..4b904d4696 100644
--- a/packages/backend/src/server/api/endpoints/i/update.ts
+++ b/packages/backend/src/server/api/endpoints/i/update.ts
@@ -1,19 +1,23 @@
 import RE2 from 're2';
 import * as mfm from 'mfm-js';
-import { publishMainStream, publishUserEvent } from '@/services/stream.js';
-import acceptAllFollowRequests from '@/services/following/requests/accept-all.js';
-import { publishToFollowers } from '@/services/i/update.js';
+import { Inject, Injectable } from '@nestjs/common';
 import { extractCustomEmojisFromMfm } from '@/misc/extract-custom-emojis-from-mfm.js';
 import { extractHashtags } from '@/misc/extract-hashtags.js';
-import { updateUsertags } from '@/services/update-hashtag.js';
-import { Users, DriveFiles, UserProfiles, Pages } from '@/models/index.js';
-import { User } from '@/models/entities/user.js';
-import { UserProfile } from '@/models/entities/user-profile.js';
+import { UsersRepository, DriveFilesRepository, UserProfilesRepository, PagesRepository } from '@/models/index.js';
+import type { User } from '@/models/entities/User.js';
+import { birthdaySchema, descriptionSchema, locationSchema, nameSchema } from '@/models/entities/User.js';
+import type { UserProfile } from '@/models/entities/UserProfile.js';
 import { notificationTypes } from '@/types.js';
 import { normalizeForSearch } from '@/misc/normalize-for-search.js';
 import { langmap } from '@/misc/langmap.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { UserFollowingService } from '@/core/UserFollowingService.js';
+import { AccountUpdateService } from '@/core/AccountUpdateService.js';
+import { HashtagService } from '@/core/HashtagService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import define from '../../define.js';
 
 export const meta = {
 	tags: ['account'],
@@ -70,10 +74,10 @@ export const meta = {
 export const paramDef = {
 	type: 'object',
 	properties: {
-		name: { ...Users.nameSchema, nullable: true },
-		description: { ...Users.descriptionSchema, nullable: true },
-		location: { ...Users.locationSchema, nullable: true },
-		birthday: { ...Users.birthdaySchema, nullable: true },
+		name: { ...nameSchema, nullable: true },
+		description: { ...descriptionSchema, nullable: true },
+		location: { ...locationSchema, nullable: true },
+		birthday: { ...birthdaySchema, nullable: true },
 		lang: { type: 'string', enum: [null, ...Object.keys(langmap)], nullable: true },
 		avatarId: { type: 'string', format: 'misskey:id', nullable: true },
 		bannerId: { type: 'string', format: 'misskey:id', nullable: true },
@@ -122,134 +126,157 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, _user, token) => {
-	const user = await Users.findOneByOrFail({ id: _user.id });
-	const isSecure = token == null;
-
-	const updates = {} as Partial<User>;
-	const profileUpdates = {} as Partial<UserProfile>;
-
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	if (ps.name !== undefined) updates.name = ps.name;
-	if (ps.description !== undefined) profileUpdates.description = ps.description;
-	if (ps.lang !== undefined) profileUpdates.lang = ps.lang;
-	if (ps.location !== undefined) profileUpdates.location = ps.location;
-	if (ps.birthday !== undefined) profileUpdates.birthday = ps.birthday;
-	if (ps.ffVisibility !== undefined) profileUpdates.ffVisibility = ps.ffVisibility;
-	if (ps.avatarId !== undefined) updates.avatarId = ps.avatarId;
-	if (ps.bannerId !== undefined) updates.bannerId = ps.bannerId;
-	if (ps.mutedWords !== undefined) {
-		// validate regular expression syntax
-		ps.mutedWords.filter(x => !Array.isArray(x)).forEach(x => {
-			const regexp = x.match(/^\/(.+)\/(.*)$/);
-			if (!regexp) throw new ApiError(meta.errors.invalidRegexp);
-
-			try {
-				new RE2(regexp[1], regexp[2]);
-			} catch (err) {
-				throw new ApiError(meta.errors.invalidRegexp);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		@Inject(DI.pagesRepository)
+		private pagesRepository: PagesRepository,
+
+		private userEntityService: UserEntityService,
+		private globalEventService: GlobalEventService,
+		private userFollowingService: UserFollowingService,
+		private accountUpdateService: AccountUpdateService,
+		private hashtagService: HashtagService,
+	) {
+		super(meta, paramDef, async (ps, _user, token) => {
+			const user = await this.usersRepository.findOneByOrFail({ id: _user.id });
+			const isSecure = token == null;
+
+			const updates = {} as Partial<User>;
+			const profileUpdates = {} as Partial<UserProfile>;
+
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+
+			if (ps.name !== undefined) updates.name = ps.name;
+			if (ps.description !== undefined) profileUpdates.description = ps.description;
+			if (ps.lang !== undefined) profileUpdates.lang = ps.lang;
+			if (ps.location !== undefined) profileUpdates.location = ps.location;
+			if (ps.birthday !== undefined) profileUpdates.birthday = ps.birthday;
+			if (ps.ffVisibility !== undefined) profileUpdates.ffVisibility = ps.ffVisibility;
+			if (ps.avatarId !== undefined) updates.avatarId = ps.avatarId;
+			if (ps.bannerId !== undefined) updates.bannerId = ps.bannerId;
+			if (ps.mutedWords !== undefined) {
+				// validate regular expression syntax
+				ps.mutedWords.filter(x => !Array.isArray(x)).forEach(x => {
+					const regexp = x.match(/^\/(.+)\/(.*)$/);
+					if (!regexp) throw new ApiError(meta.errors.invalidRegexp);
+
+					try {
+						new RE2(regexp[1], regexp[2]);
+					} catch (err) {
+						throw new ApiError(meta.errors.invalidRegexp);
+					}
+				});
+
+				profileUpdates.mutedWords = ps.mutedWords;
+				profileUpdates.enableWordMute = ps.mutedWords.length > 0;
+			}
+			if (ps.mutedInstances !== undefined) profileUpdates.mutedInstances = ps.mutedInstances;
+			if (ps.mutingNotificationTypes !== undefined) profileUpdates.mutingNotificationTypes = ps.mutingNotificationTypes as typeof notificationTypes[number][];
+			if (typeof ps.isLocked === 'boolean') updates.isLocked = ps.isLocked;
+			if (typeof ps.isExplorable === 'boolean') updates.isExplorable = ps.isExplorable;
+			if (typeof ps.hideOnlineStatus === 'boolean') updates.hideOnlineStatus = ps.hideOnlineStatus;
+			if (typeof ps.publicReactions === 'boolean') profileUpdates.publicReactions = ps.publicReactions;
+			if (typeof ps.isBot === 'boolean') updates.isBot = ps.isBot;
+			if (typeof ps.showTimelineReplies === 'boolean') updates.showTimelineReplies = ps.showTimelineReplies;
+			if (typeof ps.carefulBot === 'boolean') profileUpdates.carefulBot = ps.carefulBot;
+			if (typeof ps.autoAcceptFollowed === 'boolean') profileUpdates.autoAcceptFollowed = ps.autoAcceptFollowed;
+			if (typeof ps.noCrawle === 'boolean') profileUpdates.noCrawle = ps.noCrawle;
+			if (typeof ps.isCat === 'boolean') updates.isCat = ps.isCat;
+			if (typeof ps.injectFeaturedNote === 'boolean') profileUpdates.injectFeaturedNote = ps.injectFeaturedNote;
+			if (typeof ps.receiveAnnouncementEmail === 'boolean') profileUpdates.receiveAnnouncementEmail = ps.receiveAnnouncementEmail;
+			if (typeof ps.alwaysMarkNsfw === 'boolean') profileUpdates.alwaysMarkNsfw = ps.alwaysMarkNsfw;
+			if (typeof ps.autoSensitive === 'boolean') profileUpdates.autoSensitive = ps.autoSensitive;
+			if (ps.emailNotificationTypes !== undefined) profileUpdates.emailNotificationTypes = ps.emailNotificationTypes;
+
+			if (ps.avatarId) {
+				const avatar = await this.driveFilesRepository.findOneBy({ id: ps.avatarId });
+
+				if (avatar == null || avatar.userId !== user.id) throw new ApiError(meta.errors.noSuchAvatar);
+				if (!avatar.type.startsWith('image/')) throw new ApiError(meta.errors.avatarNotAnImage);
 			}
-		});
-
-		profileUpdates.mutedWords = ps.mutedWords;
-		profileUpdates.enableWordMute = ps.mutedWords.length > 0;
-	}
-	if (ps.mutedInstances !== undefined) profileUpdates.mutedInstances = ps.mutedInstances;
-	if (ps.mutingNotificationTypes !== undefined) profileUpdates.mutingNotificationTypes = ps.mutingNotificationTypes as typeof notificationTypes[number][];
-	if (typeof ps.isLocked === 'boolean') updates.isLocked = ps.isLocked;
-	if (typeof ps.isExplorable === 'boolean') updates.isExplorable = ps.isExplorable;
-	if (typeof ps.hideOnlineStatus === 'boolean') updates.hideOnlineStatus = ps.hideOnlineStatus;
-	if (typeof ps.publicReactions === 'boolean') profileUpdates.publicReactions = ps.publicReactions;
-	if (typeof ps.isBot === 'boolean') updates.isBot = ps.isBot;
-	if (typeof ps.showTimelineReplies === 'boolean') updates.showTimelineReplies = ps.showTimelineReplies;
-	if (typeof ps.carefulBot === 'boolean') profileUpdates.carefulBot = ps.carefulBot;
-	if (typeof ps.autoAcceptFollowed === 'boolean') profileUpdates.autoAcceptFollowed = ps.autoAcceptFollowed;
-	if (typeof ps.noCrawle === 'boolean') profileUpdates.noCrawle = ps.noCrawle;
-	if (typeof ps.isCat === 'boolean') updates.isCat = ps.isCat;
-	if (typeof ps.injectFeaturedNote === 'boolean') profileUpdates.injectFeaturedNote = ps.injectFeaturedNote;
-	if (typeof ps.receiveAnnouncementEmail === 'boolean') profileUpdates.receiveAnnouncementEmail = ps.receiveAnnouncementEmail;
-	if (typeof ps.alwaysMarkNsfw === 'boolean') profileUpdates.alwaysMarkNsfw = ps.alwaysMarkNsfw;
-	if (typeof ps.autoSensitive === 'boolean') profileUpdates.autoSensitive = ps.autoSensitive;
-	if (ps.emailNotificationTypes !== undefined) profileUpdates.emailNotificationTypes = ps.emailNotificationTypes;
-
-	if (ps.avatarId) {
-		const avatar = await DriveFiles.findOneBy({ id: ps.avatarId });
-
-		if (avatar == null || avatar.userId !== user.id) throw new ApiError(meta.errors.noSuchAvatar);
-		if (!avatar.type.startsWith('image/')) throw new ApiError(meta.errors.avatarNotAnImage);
-	}
 
-	if (ps.bannerId) {
-		const banner = await DriveFiles.findOneBy({ id: ps.bannerId });
+			if (ps.bannerId) {
+				const banner = await this.driveFilesRepository.findOneBy({ id: ps.bannerId });
 
-		if (banner == null || banner.userId !== user.id) throw new ApiError(meta.errors.noSuchBanner);
-		if (!banner.type.startsWith('image/')) throw new ApiError(meta.errors.bannerNotAnImage);
-	}
+				if (banner == null || banner.userId !== user.id) throw new ApiError(meta.errors.noSuchBanner);
+				if (!banner.type.startsWith('image/')) throw new ApiError(meta.errors.bannerNotAnImage);
+			}
 
-	if (ps.pinnedPageId) {
-		const page = await Pages.findOneBy({ id: ps.pinnedPageId });
+			if (ps.pinnedPageId) {
+				const page = await this.pagesRepository.findOneBy({ id: ps.pinnedPageId });
 
-		if (page == null || page.userId !== user.id) throw new ApiError(meta.errors.noSuchPage);
+				if (page == null || page.userId !== user.id) throw new ApiError(meta.errors.noSuchPage);
 
-		profileUpdates.pinnedPageId = page.id;
-	} else if (ps.pinnedPageId === null) {
-		profileUpdates.pinnedPageId = null;
-	}
+				profileUpdates.pinnedPageId = page.id;
+			} else if (ps.pinnedPageId === null) {
+				profileUpdates.pinnedPageId = null;
+			}
 
-	if (ps.fields) {
-		profileUpdates.fields = ps.fields
-			.filter(x => typeof x.name === 'string' && x.name !== '' && typeof x.value === 'string' && x.value !== '')
-			.map(x => {
-				return { name: x.name, value: x.value };
-			});
-	}
+			if (ps.fields) {
+				profileUpdates.fields = ps.fields
+					.filter(x => typeof x.name === 'string' && x.name !== '' && typeof x.value === 'string' && x.value !== '')
+					.map(x => {
+						return { name: x.name, value: x.value };
+					});
+			}
 
-	//#region emojis/tags
+			//#region emojis/tags
 
-	let emojis = [] as string[];
-	let tags = [] as string[];
+			let emojis = [] as string[];
+			let tags = [] as string[];
 
-	const newName = updates.name === undefined ? user.name : updates.name;
-	const newDescription = profileUpdates.description === undefined ? profile.description : profileUpdates.description;
+			const newName = updates.name === undefined ? user.name : updates.name;
+			const newDescription = profileUpdates.description === undefined ? profile.description : profileUpdates.description;
 
-	if (newName != null) {
-		const tokens = mfm.parseSimple(newName);
-		emojis = emojis.concat(extractCustomEmojisFromMfm(tokens!));
-	}
+			if (newName != null) {
+				const tokens = mfm.parseSimple(newName);
+				emojis = emojis.concat(extractCustomEmojisFromMfm(tokens!));
+			}
 
-	if (newDescription != null) {
-		const tokens = mfm.parse(newDescription);
-		emojis = emojis.concat(extractCustomEmojisFromMfm(tokens!));
-		tags = extractHashtags(tokens!).map(tag => normalizeForSearch(tag)).splice(0, 32);
-	}
+			if (newDescription != null) {
+				const tokens = mfm.parse(newDescription);
+				emojis = emojis.concat(extractCustomEmojisFromMfm(tokens!));
+				tags = extractHashtags(tokens!).map(tag => normalizeForSearch(tag)).splice(0, 32);
+			}
 
-	updates.emojis = emojis;
-	updates.tags = tags;
+			updates.emojis = emojis;
+			updates.tags = tags;
 
-	// ハッシュタグ更新
-	updateUsertags(user, tags);
-	//#endregion
+			// ハッシュタグ更新
+			this.hashtagService.updateUsertags(user, tags);
+			//#endregion
 
-	if (Object.keys(updates).length > 0) await Users.update(user.id, updates);
-	if (Object.keys(profileUpdates).length > 0) await UserProfiles.update(user.id, profileUpdates);
+			if (Object.keys(updates).length > 0) await this.usersRepository.update(user.id, updates);
+			if (Object.keys(profileUpdates).length > 0) await this.userProfilesRepository.update(user.id, profileUpdates);
 
-	const iObj = await Users.pack<true, true>(user.id, user, {
-		detail: true,
-		includeSecrets: isSecure,
-	});
+			const iObj = await this.userEntityService.pack<true, true>(user.id, user, {
+				detail: true,
+				includeSecrets: isSecure,
+			});
 
-	// Publish meUpdated event
-	publishMainStream(user.id, 'meUpdated', iObj);
-	publishUserEvent(user.id, 'updateUserProfile', await UserProfiles.findOneBy({ userId: user.id }));
+			// Publish meUpdated event
+			this.globalEventService.publishMainStream(user.id, 'meUpdated', iObj);
+			this.globalEventService.publishUserEvent(user.id, 'updateUserProfile', await this.userProfilesRepository.findOneBy({ userId: user.id }));
 
-	// 鍵垢を解除したとき、溜まっていたフォローリクエストがあるならすべて承認
-	if (user.isLocked && ps.isLocked === false) {
-		acceptAllFollowRequests(user);
-	}
+			// 鍵垢を解除したとき、溜まっていたフォローリクエストがあるならすべて承認
+			if (user.isLocked && ps.isLocked === false) {
+				this.userFollowingService.acceptAllFollowRequests(user);
+			}
 
-	// フォロワーにUpdateを配信
-	publishToFollowers(user.id);
+			// フォロワーにUpdateを配信
+			this.accountUpdateService.publishToFollowers(user.id);
 
-	return iObj;
-});
+			return iObj;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/user-group-invites.ts b/packages/backend/src/server/api/endpoints/i/user-group-invites.ts
index 1d7e4a16b3..6dd1626bb8 100644
--- a/packages/backend/src/server/api/endpoints/i/user-group-invites.ts
+++ b/packages/backend/src/server/api/endpoints/i/user-group-invites.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { UserGroupInvitations } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserGroupInvitationsRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { UserGroupInvitationEntityService } from '@/core/entities/UserGroupInvitationEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['account', 'groups'],
@@ -42,14 +45,25 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = makePaginationQuery(UserGroupInvitations.createQueryBuilder('invitation'), ps.sinceId, ps.untilId)
-		.andWhere(`invitation.userId = :meId`, { meId: user.id })
-		.leftJoinAndSelect('invitation.userGroup', 'user_group');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userGroupInvitationsRepository)
+		private userGroupInvitationsRepository: UserGroupInvitationsRepository,
 
-	const invitations = await query
-		.take(ps.limit)
-		.getMany();
+		private userGroupInvitationEntityService: UserGroupInvitationEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.userGroupInvitationsRepository.createQueryBuilder('invitation'), ps.sinceId, ps.untilId)
+				.andWhere('invitation.userId = :meId', { meId: me.id })
+				.leftJoinAndSelect('invitation.userGroup', 'user_group');
 
-	return await UserGroupInvitations.packMany(invitations);
-});
+			const invitations = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await this.userGroupInvitationEntityService.packMany(invitations);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/webhooks/create.ts b/packages/backend/src/server/api/endpoints/i/webhooks/create.ts
index 2e2fd00b8c..016b1b5d6a 100644
--- a/packages/backend/src/server/api/endpoints/i/webhooks/create.ts
+++ b/packages/backend/src/server/api/endpoints/i/webhooks/create.ts
@@ -1,8 +1,10 @@
-import define from '../../../define.js';
-import { genId } from '@/misc/gen-id.js';
-import { Webhooks } from '@/models/index.js';
-import { publishInternalEvent } from '@/services/stream.js';
-import { webhookEventTypes } from '@/models/entities/webhook.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { IdService } from '@/core/IdService.js';
+import { WebhooksRepository } from '@/models/index.js';
+import { webhookEventTypes } from '@/models/entities/Webhook.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['webhooks'],
@@ -25,19 +27,32 @@ export const paramDef = {
 	required: ['name', 'url', 'secret', 'on'],
 } as const;
 
+// TODO: ロジックをサービスに切り出す
+
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const webhook = await Webhooks.insert({
-		id: genId(),
-		createdAt: new Date(),
-		userId: user.id,
-		name: ps.name,
-		url: ps.url,
-		secret: ps.secret,
-		on: ps.on,
-	}).then(x => Webhooks.findOneByOrFail(x.identifiers[0]));
-
-	publishInternalEvent('webhookCreated', webhook);
-
-	return webhook;
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.webhooksRepository)
+		private webhooksRepository: WebhooksRepository,
+
+		private idService: IdService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const webhook = await this.webhooksRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				userId: me.id,
+				name: ps.name,
+				url: ps.url,
+				secret: ps.secret,
+				on: ps.on,
+			}).then(x => this.webhooksRepository.findOneByOrFail(x.identifiers[0]));
+
+			this.globalEventService.publishInternalEvent('webhookCreated', webhook);
+
+			return webhook;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/webhooks/delete.ts b/packages/backend/src/server/api/endpoints/i/webhooks/delete.ts
index 2821eaa5f1..53b553b43e 100644
--- a/packages/backend/src/server/api/endpoints/i/webhooks/delete.ts
+++ b/packages/backend/src/server/api/endpoints/i/webhooks/delete.ts
@@ -1,7 +1,9 @@
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { WebhooksRepository } from '@/models/index.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { Webhooks } from '@/models/index.js';
-import { publishInternalEvent } from '@/services/stream.js';
 
 export const meta = {
 	tags: ['webhooks'],
@@ -27,18 +29,30 @@ export const paramDef = {
 	required: ['webhookId'],
 } as const;
 
+// TODO: ロジックをサービスに切り出す
+
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const webhook = await Webhooks.findOneBy({
-		id: ps.webhookId,
-		userId: user.id,
-	});
-
-	if (webhook == null) {
-		throw new ApiError(meta.errors.noSuchWebhook);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.webhooksRepository)
+		private webhooksRepository: WebhooksRepository,
+
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const webhook = await this.webhooksRepository.findOneBy({
+				id: ps.webhookId,
+				userId: me.id,
+			});
+
+			if (webhook == null) {
+				throw new ApiError(meta.errors.noSuchWebhook);
+			}
+
+			await this.webhooksRepository.delete(webhook.id);
+
+			this.globalEventService.publishInternalEvent('webhookDeleted', webhook);
+		});
 	}
-
-	await Webhooks.delete(webhook.id);
-
-	publishInternalEvent('webhookDeleted', webhook);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/i/webhooks/list.ts b/packages/backend/src/server/api/endpoints/i/webhooks/list.ts
index 54e4563732..8e4aff45dd 100644
--- a/packages/backend/src/server/api/endpoints/i/webhooks/list.ts
+++ b/packages/backend/src/server/api/endpoints/i/webhooks/list.ts
@@ -1,5 +1,7 @@
-import define from '../../../define.js';
-import { Webhooks } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { WebhooksRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['webhooks', 'account'],
@@ -16,10 +18,18 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const webhooks = await Webhooks.findBy({
-		userId: me.id,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.webhooksRepository)
+		private webhooksRepository: WebhooksRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const webhooks = await this.webhooksRepository.findBy({
+				userId: me.id,
+			});
 
-	return webhooks;
-});
+			return webhooks;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/i/webhooks/show.ts b/packages/backend/src/server/api/endpoints/i/webhooks/show.ts
index 02fa1edb5e..622c2ade98 100644
--- a/packages/backend/src/server/api/endpoints/i/webhooks/show.ts
+++ b/packages/backend/src/server/api/endpoints/i/webhooks/show.ts
@@ -1,6 +1,8 @@
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { WebhooksRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { Webhooks } from '@/models/index.js';
 
 export const meta = {
 	tags: ['webhooks'],
@@ -27,15 +29,23 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const webhook = await Webhooks.findOneBy({
-		id: ps.webhookId,
-		userId: user.id,
-	});
-
-	if (webhook == null) {
-		throw new ApiError(meta.errors.noSuchWebhook);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.webhooksRepository)
+		private webhooksRepository: WebhooksRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const webhook = await this.webhooksRepository.findOneBy({
+				id: ps.webhookId,
+				userId: me.id,
+			});
+
+			if (webhook == null) {
+				throw new ApiError(meta.errors.noSuchWebhook);
+			}
+
+			return webhook;
+		});
 	}
-
-	return webhook;
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/i/webhooks/update.ts b/packages/backend/src/server/api/endpoints/i/webhooks/update.ts
index f87b9753fb..3a0ef1a526 100644
--- a/packages/backend/src/server/api/endpoints/i/webhooks/update.ts
+++ b/packages/backend/src/server/api/endpoints/i/webhooks/update.ts
@@ -1,8 +1,10 @@
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { WebhooksRepository } from '@/models/index.js';
+import { webhookEventTypes } from '@/models/entities/Webhook.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { Webhooks } from '@/models/index.js';
-import { publishInternalEvent } from '@/services/stream.js';
-import { webhookEventTypes } from '@/models/entities/webhook.js';
 
 export const meta = {
 	tags: ['webhooks'],
@@ -36,24 +38,36 @@ export const paramDef = {
 	required: ['webhookId', 'name', 'url', 'secret', 'on', 'active'],
 } as const;
 
+// TODO: ロジックをサービスに切り出す
+
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const webhook = await Webhooks.findOneBy({
-		id: ps.webhookId,
-		userId: user.id,
-	});
-
-	if (webhook == null) {
-		throw new ApiError(meta.errors.noSuchWebhook);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.webhooksRepository)
+		private webhooksRepository: WebhooksRepository,
+
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const webhook = await this.webhooksRepository.findOneBy({
+				id: ps.webhookId,
+				userId: me.id,
+			});
 
-	await Webhooks.update(webhook.id, {
-		name: ps.name,
-		url: ps.url,
-		secret: ps.secret,
-		on: ps.on,
-		active: ps.active,
-	});
+			if (webhook == null) {
+				throw new ApiError(meta.errors.noSuchWebhook);
+			}
 
-	publishInternalEvent('webhookUpdated', webhook);
-});
+			await this.webhooksRepository.update(webhook.id, {
+				name: ps.name,
+				url: ps.url,
+				secret: ps.secret,
+				on: ps.on,
+				active: ps.active,
+			});
+
+			this.globalEventService.publishInternalEvent('webhookUpdated', webhook);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/messaging/history.ts b/packages/backend/src/server/api/endpoints/messaging/history.ts
index ea0600d0e4..da3ba59df9 100644
--- a/packages/backend/src/server/api/endpoints/messaging/history.ts
+++ b/packages/backend/src/server/api/endpoints/messaging/history.ts
@@ -1,7 +1,10 @@
-import define from '../../define.js';
-import { MessagingMessage } from '@/models/entities/messaging-message.js';
-import { MessagingMessages, Mutings, UserGroupJoinings } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
 import { Brackets } from 'typeorm';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import type { MessagingMessage } from '@/models/entities/MessagingMessage.js';
+import { MutingsRepository, UserGroupJoiningsRepository, MessagingMessagesRepository } from '@/models/index.js';
+import { MessagingMessageEntityService } from '@/core/entities/MessagingMessageEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['messaging'],
@@ -31,61 +34,77 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const mute = await Mutings.findBy({
-		muterId: user.id,
-	});
-
-	const groups = ps.group ? await UserGroupJoinings.findBy({
-		userId: user.id,
-	}).then(xs => xs.map(x => x.userGroupId)) : [];
-
-	if (ps.group && groups.length === 0) {
-		return [];
-	}
-
-	const history: MessagingMessage[] = [];
-
-	for (let i = 0; i < ps.limit; i++) {
-		const found = ps.group
-			? history.map(m => m.groupId!)
-			: history.map(m => (m.userId === user.id) ? m.recipientId! : m.userId!);
-
-		const query = MessagingMessages.createQueryBuilder('message')
-			.orderBy('message.createdAt', 'DESC');
-
-		if (ps.group) {
-			query.where(`message.groupId IN (:...groups)`, { groups: groups });
-
-			if (found.length > 0) {
-				query.andWhere(`message.groupId NOT IN (:...found)`, { found: found });
-			}
-		} else {
-			query.where(new Brackets(qb => { qb
-				.where(`message.userId = :userId`, { userId: user.id })
-				.orWhere(`message.recipientId = :userId`, { userId: user.id });
-			}));
-			query.andWhere(`message.groupId IS NULL`);
-
-			if (found.length > 0) {
-				query.andWhere(`message.userId NOT IN (:...found)`, { found: found });
-				query.andWhere(`message.recipientId NOT IN (:...found)`, { found: found });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.messagingMessagesRepository)
+		private messagingMessagesRepository: MessagingMessagesRepository,
+
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+
+		private messagingMessageEntityService: MessagingMessageEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const mute = await this.mutingsRepository.findBy({
+				muterId: me.id,
+			});
+
+			const groups = ps.group ? await this.userGroupJoiningsRepository.findBy({
+				userId: me.id,
+			}).then(xs => xs.map(x => x.userGroupId)) : [];
+
+			if (ps.group && groups.length === 0) {
+				return [];
 			}
 
-			if (mute.length > 0) {
-				query.andWhere(`message.userId NOT IN (:...mute)`, { mute: mute.map(m => m.muteeId) });
-				query.andWhere(`message.recipientId NOT IN (:...mute)`, { mute: mute.map(m => m.muteeId) });
+			const history: MessagingMessage[] = [];
+
+			for (let i = 0; i < ps.limit; i++) {
+				const found = ps.group
+					? history.map(m => m.groupId!)
+					: history.map(m => (m.userId === me.id) ? m.recipientId! : m.userId!);
+
+				const query = this.messagingMessagesRepository.createQueryBuilder('message')
+					.orderBy('message.createdAt', 'DESC');
+
+				if (ps.group) {
+					query.where('message.groupId IN (:...groups)', { groups: groups });
+
+					if (found.length > 0) {
+						query.andWhere('message.groupId NOT IN (:...found)', { found: found });
+					}
+				} else {
+					query.where(new Brackets(qb => { qb
+						.where('message.userId = :userId', { userId: me.id })
+						.orWhere('message.recipientId = :userId', { userId: me.id });
+					}));
+					query.andWhere('message.groupId IS NULL');
+
+					if (found.length > 0) {
+						query.andWhere('message.userId NOT IN (:...found)', { found: found });
+						query.andWhere('message.recipientId NOT IN (:...found)', { found: found });
+					}
+
+					if (mute.length > 0) {
+						query.andWhere('message.userId NOT IN (:...mute)', { mute: mute.map(m => m.muteeId) });
+						query.andWhere('message.recipientId NOT IN (:...mute)', { mute: mute.map(m => m.muteeId) });
+					}
+				}
+
+				const message = await query.getOne();
+
+				if (message) {
+					history.push(message);
+				} else {
+					break;
+				}
 			}
-		}
 
-		const message = await query.getOne();
-
-		if (message) {
-			history.push(message);
-		} else {
-			break;
-		}
+			return await Promise.all(history.map(h => this.messagingMessageEntityService.pack(h.id, me)));
+		});
 	}
-
-	return await Promise.all(history.map(h => MessagingMessages.pack(h.id, user)));
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/messaging/messages.ts b/packages/backend/src/server/api/endpoints/messaging/messages.ts
index dbf1f6c868..6579b03987 100644
--- a/packages/backend/src/server/api/endpoints/messaging/messages.ts
+++ b/packages/backend/src/server/api/endpoints/messaging/messages.ts
@@ -1,10 +1,15 @@
-import define from '../../define.js';
-import { ApiError } from '../../error.js';
-import { getUser } from '../../common/getters.js';
-import { MessagingMessages, UserGroups, UserGroupJoinings, Users } from '@/models/index.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
 import { Brackets } from 'typeorm';
-import { readUserMessagingMessage, readGroupMessagingMessage, deliverReadActivity } from '../../common/read-messaging-message.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import type { UsersRepository } from '@/models/index.js';
+import { UserGroupsRepository, MessagingMessagesRepository, UserGroupJoiningsRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { MessagingMessageEntityService } from '@/core/entities/MessagingMessageEntityService.js';
+import { MessagingService } from '@/core/MessagingService.js';
+import { DI } from '@/di-symbols.js';
+import { ApiError } from '../../error.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['messaging'],
@@ -69,73 +74,93 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	if (ps.userId != null) {
-		// Fetch recipient (user)
-		const recipient = await getUser(ps.userId).catch(e => {
-			if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-			throw e;
-		});
-
-		const query = makePaginationQuery(MessagingMessages.createQueryBuilder('message'), ps.sinceId, ps.untilId)
-			.andWhere(new Brackets(qb => { qb
-				.where(new Brackets(qb => { qb
-					.where('message.userId = :meId')
-					.andWhere('message.recipientId = :recipientId');
-				}))
-				.orWhere(new Brackets(qb => { qb
-					.where('message.userId = :recipientId')
-					.andWhere('message.recipientId = :meId');
-				}));
-			}))
-			.setParameter('meId', user.id)
-			.setParameter('recipientId', recipient.id);
-
-		const messages = await query.take(ps.limit).getMany();
-
-		// Mark all as read
-		if (ps.markAsRead) {
-			readUserMessagingMessage(user.id, recipient.id, messages.filter(m => m.recipientId === user.id).map(x => x.id));
-
-			// リモートユーザーとのメッセージだったら既読配信
-			if (Users.isLocalUser(user) && Users.isRemoteUser(recipient)) {
-				deliverReadActivity(user, recipient, messages);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.messagingMessagesRepository)
+		private messagingMessagesRepository: MessagingMessagesRepository,
+
+		@Inject(DI.userGroupsRepository)
+		private userGroupRepository: UserGroupsRepository,
+
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+
+		private messagingMessageEntityService: MessagingMessageEntityService,
+		private messagingService: MessagingService,
+		private userEntityService: UserEntityService,
+		private queryService: QueryService,
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			if (ps.userId != null) {
+				// Fetch recipient (user)
+				const recipient = await this.getterService.getUser(ps.userId).catch(err => {
+					if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+					throw err;
+				});
+
+				const query = this.queryService.makePaginationQuery(this.messagingMessagesRepository.createQueryBuilder('message'), ps.sinceId, ps.untilId)
+					.andWhere(new Brackets(qb => { qb
+						.where(new Brackets(qb => { qb
+							.where('message.userId = :meId')
+							.andWhere('message.recipientId = :recipientId');
+						}))
+						.orWhere(new Brackets(qb => { qb
+							.where('message.userId = :recipientId')
+							.andWhere('message.recipientId = :meId');
+						}));
+					}))
+					.setParameter('meId', me.id)
+					.setParameter('recipientId', recipient.id);
+
+				const messages = await query.take(ps.limit).getMany();
+
+				// Mark all as read
+				if (ps.markAsRead) {
+					this.messagingService.readUserMessagingMessage(me.id, recipient.id, messages.filter(m => m.recipientId === me.id).map(x => x.id));
+
+					// リモートユーザーとのメッセージだったら既読配信
+					if (this.userEntityService.isLocalUser(me) && this.userEntityService.isRemoteUser(recipient)) {
+						this.messagingService.deliverReadActivity(me, recipient, messages);
+					}
+				}
+
+				return await Promise.all(messages.map(message => this.messagingMessageEntityService.pack(message, me, {
+					populateRecipient: false,
+				})));
+			} else if (ps.groupId != null) {
+				// Fetch recipient (group)
+				const recipientGroup = await this.userGroupRepository.findOneBy({ id: ps.groupId });
+
+				if (recipientGroup == null) {
+					throw new ApiError(meta.errors.noSuchGroup);
+				}
+
+				// check joined
+				const joining = await this.userGroupJoiningsRepository.findOneBy({
+					userId: me.id,
+					userGroupId: recipientGroup.id,
+				});
+
+				if (joining == null) {
+					throw new ApiError(meta.errors.groupAccessDenied);
+				}
+
+				const query = this.queryService.makePaginationQuery(this.messagingMessagesRepository.createQueryBuilder('message'), ps.sinceId, ps.untilId)
+					.andWhere('message.groupId = :groupId', { groupId: recipientGroup.id });
+
+				const messages = await query.take(ps.limit).getMany();
+
+				// Mark all as read
+				if (ps.markAsRead) {
+					this.messagingService.readGroupMessagingMessage(me.id, recipientGroup.id, messages.map(x => x.id));
+				}
+
+				return await Promise.all(messages.map(message => this.messagingMessageEntityService.pack(message, me, {
+					populateGroup: false,
+				})));
 			}
-		}
-
-		return await Promise.all(messages.map(message => MessagingMessages.pack(message, user, {
-			populateRecipient: false,
-		})));
-	} else if (ps.groupId != null) {
-		// Fetch recipient (group)
-		const recipientGroup = await UserGroups.findOneBy({ id: ps.groupId });
-
-		if (recipientGroup == null) {
-			throw new ApiError(meta.errors.noSuchGroup);
-		}
-
-		// check joined
-		const joining = await UserGroupJoinings.findOneBy({
-			userId: user.id,
-			userGroupId: recipientGroup.id,
 		});
-
-		if (joining == null) {
-			throw new ApiError(meta.errors.groupAccessDenied);
-		}
-
-		const query = makePaginationQuery(MessagingMessages.createQueryBuilder('message'), ps.sinceId, ps.untilId)
-			.andWhere(`message.groupId = :groupId`, { groupId: recipientGroup.id });
-
-		const messages = await query.take(ps.limit).getMany();
-
-		// Mark all as read
-		if (ps.markAsRead) {
-			readGroupMessagingMessage(user.id, recipientGroup.id, messages.map(x => x.id));
-		}
-
-		return await Promise.all(messages.map(message => MessagingMessages.pack(message, user, {
-			populateGroup: false,
-		})));
 	}
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/messaging/messages/create.ts b/packages/backend/src/server/api/endpoints/messaging/messages/create.ts
index 405af5ec17..e02afcbcfd 100644
--- a/packages/backend/src/server/api/endpoints/messaging/messages/create.ts
+++ b/packages/backend/src/server/api/endpoints/messaging/messages/create.ts
@@ -1,10 +1,12 @@
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { BlockingsRepository, UserGroupJoiningsRepository, DriveFilesRepository, UserGroupsRepository } from '@/models/index.js';
+import type { User } from '@/models/entities/User.js';
+import type { UserGroup } from '@/models/entities/UserGroup.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { MessagingService } from '@/core/MessagingService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { getUser } from '../../../common/getters.js';
-import { MessagingMessages, DriveFiles, UserGroups, UserGroupJoinings, Blockings } from '@/models/index.js';
-import { User } from '@/models/entities/user.js';
-import { UserGroup } from '@/models/entities/user-group.js';
-import { createMessage } from '@/services/messages/create.js';
 
 export const meta = {
 	tags: ['messaging'],
@@ -87,65 +89,85 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	let recipientUser: User | null;
-	let recipientGroup: UserGroup | null;
-
-	if (ps.userId != null) {
-		// Myself
-		if (ps.userId === user.id) {
-			throw new ApiError(meta.errors.recipientIsYourself);
-		}
-
-		// Fetch recipient (user)
-		recipientUser = await getUser(ps.userId).catch(e => {
-			if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-			throw e;
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userGroupsRepository)
+		private userGroupsRepository: UserGroupsRepository,
+
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private getterService: GetterService,
+		private messagingService: MessagingService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			let recipientUser: User | null;
+			let recipientGroup: UserGroup | null;
+
+			if (ps.userId != null) {
+				// Myself
+				if (ps.userId === me.id) {
+					throw new ApiError(meta.errors.recipientIsYourself);
+				}
+
+				// Fetch recipient (user)
+				recipientUser = await this.getterService.getUser(ps.userId).catch(err => {
+					if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+					throw err;
+				});
+
+				// Check blocking
+				const block = await this.blockingsRepository.findOneBy({
+					blockerId: recipientUser.id,
+					blockeeId: me.id,
+				});
+				if (block) {
+					throw new ApiError(meta.errors.youHaveBeenBlocked);
+				}
+			} else if (ps.groupId != null) {
+				// Fetch recipient (group)
+				recipientGroup = await this.userGroupsRepository.findOneBy({ id: ps.groupId! });
+
+				if (recipientGroup == null) {
+					throw new ApiError(meta.errors.noSuchGroup);
+				}
+
+				// check joined
+				const joining = await this.userGroupJoiningsRepository.findOneBy({
+					userId: me.id,
+					userGroupId: recipientGroup.id,
+				});
+
+				if (joining == null) {
+					throw new ApiError(meta.errors.groupAccessDenied);
+				}
+			}
+
+			let file = null;
+			if (ps.fileId != null) {
+				file = await this.driveFilesRepository.findOneBy({
+					id: ps.fileId,
+					userId: me.id,
+				});
+
+				if (file == null) {
+					throw new ApiError(meta.errors.noSuchFile);
+				}
+			}
+
+			// テキストが無いかつ添付ファイルも無かったらエラー
+			if (ps.text == null && file == null) {
+				throw new ApiError(meta.errors.contentRequired);
+			}
+
+			return await this.messagingService.createMessage(me, recipientUser, recipientGroup, ps.text, file);
 		});
-
-		// Check blocking
-		const block = await Blockings.findOneBy({
-			blockerId: recipientUser.id,
-			blockeeId: user.id,
-		});
-		if (block) {
-			throw new ApiError(meta.errors.youHaveBeenBlocked);
-		}
-	} else if (ps.groupId != null) {
-		// Fetch recipient (group)
-		recipientGroup = await UserGroups.findOneBy({ id: ps.groupId! });
-
-		if (recipientGroup == null) {
-			throw new ApiError(meta.errors.noSuchGroup);
-		}
-
-		// check joined
-		const joining = await UserGroupJoinings.findOneBy({
-			userId: user.id,
-			userGroupId: recipientGroup.id,
-		});
-
-		if (joining == null) {
-			throw new ApiError(meta.errors.groupAccessDenied);
-		}
 	}
-
-	let file = null;
-	if (ps.fileId != null) {
-		file = await DriveFiles.findOneBy({
-			id: ps.fileId,
-			userId: user.id,
-		});
-
-		if (file == null) {
-			throw new ApiError(meta.errors.noSuchFile);
-		}
-	}
-
-	// テキストが無いかつ添付ファイルも無かったらエラー
-	if (ps.text == null && file == null) {
-		throw new ApiError(meta.errors.contentRequired);
-	}
-
-	return await createMessage(user, recipientUser, recipientGroup, ps.text, file);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/messaging/messages/delete.ts b/packages/backend/src/server/api/endpoints/messaging/messages/delete.ts
index f66d75873c..5baecb9114 100644
--- a/packages/backend/src/server/api/endpoints/messaging/messages/delete.ts
+++ b/packages/backend/src/server/api/endpoints/messaging/messages/delete.ts
@@ -1,8 +1,10 @@
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
 import ms from 'ms';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { MessagingMessagesRepository } from '@/models/index.js';
+import { MessagingService } from '@/core/MessagingService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { MessagingMessages } from '@/models/index.js';
-import { deleteMessage } from '@/services/messages/delete.js';
 
 export const meta = {
 	tags: ['messaging'],
@@ -35,15 +37,25 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const message = await MessagingMessages.findOneBy({
-		id: ps.messageId,
-		userId: user.id,
-	});
-
-	if (message == null) {
-		throw new ApiError(meta.errors.noSuchMessage);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.messagingMessagesRepository)
+		private messagingMessagesRepository: MessagingMessagesRepository,
+
+		private messagingService: MessagingService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const message = await this.messagingMessagesRepository.findOneBy({
+				id: ps.messageId,
+				userId: me.id,
+			});
+
+			if (message == null) {
+				throw new ApiError(meta.errors.noSuchMessage);
+			}
+
+			await this.messagingService.deleteMessage(message);
+		});
 	}
-
-	await deleteMessage(message);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/messaging/messages/read.ts b/packages/backend/src/server/api/endpoints/messaging/messages/read.ts
index db12ae922c..6e66cafe1e 100644
--- a/packages/backend/src/server/api/endpoints/messaging/messages/read.ts
+++ b/packages/backend/src/server/api/endpoints/messaging/messages/read.ts
@@ -1,7 +1,9 @@
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { MessagingMessagesRepository } from '@/models/index.js';
+import { MessagingService } from '@/core/MessagingService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { MessagingMessages } from '@/models/index.js';
-import { readUserMessagingMessage, readGroupMessagingMessage } from '../../../common/read-messaging-message.js';
 
 export const meta = {
 	tags: ['messaging'],
@@ -28,22 +30,32 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const message = await MessagingMessages.findOneBy({ id: ps.messageId });
-
-	if (message == null) {
-		throw new ApiError(meta.errors.noSuchMessage);
-	}
-
-	if (message.recipientId) {
-		await readUserMessagingMessage(user.id, message.userId, [message.id]).catch(e => {
-			if (e.id === 'e140a4bf-49ce-4fb6-b67c-b78dadf6b52f') throw new ApiError(meta.errors.noSuchMessage);
-			throw e;
-		});
-	} else if (message.groupId) {
-		await readGroupMessagingMessage(user.id, message.groupId, [message.id]).catch(e => {
-			if (e.id === '930a270c-714a-46b2-b776-ad27276dc569') throw new ApiError(meta.errors.noSuchMessage);
-			throw e;
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.messagingMessagesRepository)
+		private messagingMessagesRepository: MessagingMessagesRepository,
+
+		private messagingService: MessagingService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const message = await this.messagingMessagesRepository.findOneBy({ id: ps.messageId });
+
+			if (message == null) {
+				throw new ApiError(meta.errors.noSuchMessage);
+			}
+
+			if (message.recipientId) {
+				await this.messagingService.readUserMessagingMessage(me.id, message.userId, [message.id]).catch(err => {
+					if (err.id === 'e140a4bf-49ce-4fb6-b67c-b78dadf6b52f') throw new ApiError(meta.errors.noSuchMessage);
+					throw err;
+				});
+			} else if (message.groupId) {
+				await this.messagingService.readGroupMessagingMessage(me.id, message.groupId, [message.id]).catch(err => {
+					if (err.id === '930a270c-714a-46b2-b776-ad27276dc569') throw new ApiError(meta.errors.noSuchMessage);
+					throw err;
+				});
+			}
 		});
 	}
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/meta.ts b/packages/backend/src/server/api/endpoints/meta.ts
index 5b624842c3..9a6258d7dd 100644
--- a/packages/backend/src/server/api/endpoints/meta.ts
+++ b/packages/backend/src/server/api/endpoints/meta.ts
@@ -1,10 +1,14 @@
 import { IsNull, MoreThan } from 'typeorm';
-import config from '@/config/index.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Ads, Emojis, Users } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { AdsRepository, EmojisRepository, UsersRepository } from '@/models/index.js';
 import { DB_MAX_NOTE_TEXT_LENGTH } from '@/misc/hard-limits.js';
 import { MAX_NOTE_TEXT_LENGTH } from '@/const.js';
-import define from '../define.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { EmojiEntityService } from '@/core/entities/EmojiEntityService.js';
+import { MetaService } from '@/core/MetaService.js';
+import { Config } from '@/config.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['meta'],
@@ -26,7 +30,6 @@ export const meta = {
 			version: {
 				type: 'string',
 				optional: false, nullable: false,
-				example: config.version,
 			},
 			name: {
 				type: 'string',
@@ -304,111 +307,132 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const instance = await fetchMeta(true);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+	
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	const emojis = await Emojis.find({
-		where: {
-			host: IsNull(),
-		},
-		order: {
-			category: 'ASC',
-			name: 'ASC',
-		},
-		cache: {
-			id: 'meta_emojis',
-			milliseconds: 3600000,	// 1 hour
-		},
-	});
+		@Inject(DI.adsRepository)
+		private adsRepository: AdsRepository,
 
-	const ads = await Ads.find({
-		where: {
-			expiresAt: MoreThan(new Date()),
-		},
-	});
+		@Inject(DI.emojisRepository)
+		private emojisRepository: EmojisRepository,
 
-	const response: any = {
-		maintainerName: instance.maintainerName,
-		maintainerEmail: instance.maintainerEmail,
+		private userEntityService: UserEntityService,
+		private emojiEntityService: EmojiEntityService,
+		private metaService: MetaService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const instance = await this.metaService.fetch(true);
 
-		version: config.version,
+			const emojis = await this.emojisRepository.find({
+				where: {
+					host: IsNull(),
+				},
+				order: {
+					category: 'ASC',
+					name: 'ASC',
+				},
+				cache: {
+					id: 'meta_emojis',
+					milliseconds: 3600000,	// 1 hour
+				},
+			});
 
-		name: instance.name,
-		uri: config.url,
-		description: instance.description,
-		langs: instance.langs,
-		tosUrl: instance.ToSUrl,
-		repositoryUrl: instance.repositoryUrl,
-		feedbackUrl: instance.feedbackUrl,
-		disableRegistration: instance.disableRegistration,
-		disableLocalTimeline: instance.disableLocalTimeline,
-		disableGlobalTimeline: instance.disableGlobalTimeline,
-		driveCapacityPerLocalUserMb: instance.localDriveCapacityMb,
-		driveCapacityPerRemoteUserMb: instance.remoteDriveCapacityMb,
-		emailRequiredForSignup: instance.emailRequiredForSignup,
-		enableHcaptcha: instance.enableHcaptcha,
-		hcaptchaSiteKey: instance.hcaptchaSiteKey,
-		enableRecaptcha: instance.enableRecaptcha,
-		recaptchaSiteKey: instance.recaptchaSiteKey,
-		swPublickey: instance.swPublicKey,
-		themeColor: instance.themeColor,
-		mascotImageUrl: instance.mascotImageUrl,
-		bannerUrl: instance.bannerUrl,
-		errorImageUrl: instance.errorImageUrl,
-		iconUrl: instance.iconUrl,
-		backgroundImageUrl: instance.backgroundImageUrl,
-		logoImageUrl: instance.logoImageUrl,
-		maxNoteTextLength: MAX_NOTE_TEXT_LENGTH, // 後方互換性のため
-		emojis: await Emojis.packMany(emojis),
-		defaultLightTheme: instance.defaultLightTheme,
-		defaultDarkTheme: instance.defaultDarkTheme,
-		ads: ads.map(ad => ({
-			id: ad.id,
-			url: ad.url,
-			place: ad.place,
-			ratio: ad.ratio,
-			imageUrl: ad.imageUrl,
-		})),
-		enableEmail: instance.enableEmail,
+			const ads = await this.adsRepository.find({
+				where: {
+					expiresAt: MoreThan(new Date()),
+				},
+			});
 
-		enableTwitterIntegration: instance.enableTwitterIntegration,
-		enableGithubIntegration: instance.enableGithubIntegration,
-		enableDiscordIntegration: instance.enableDiscordIntegration,
+			const response: any = {
+				maintainerName: instance.maintainerName,
+				maintainerEmail: instance.maintainerEmail,
 
-		enableServiceWorker: instance.enableServiceWorker,
+				version: this.config.version,
 
-		translatorAvailable: instance.deeplAuthKey != null,
+				name: instance.name,
+				uri: this.config.url,
+				description: instance.description,
+				langs: instance.langs,
+				tosUrl: instance.ToSUrl,
+				repositoryUrl: instance.repositoryUrl,
+				feedbackUrl: instance.feedbackUrl,
+				disableRegistration: instance.disableRegistration,
+				disableLocalTimeline: instance.disableLocalTimeline,
+				disableGlobalTimeline: instance.disableGlobalTimeline,
+				driveCapacityPerLocalUserMb: instance.localDriveCapacityMb,
+				driveCapacityPerRemoteUserMb: instance.remoteDriveCapacityMb,
+				emailRequiredForSignup: instance.emailRequiredForSignup,
+				enableHcaptcha: instance.enableHcaptcha,
+				hcaptchaSiteKey: instance.hcaptchaSiteKey,
+				enableRecaptcha: instance.enableRecaptcha,
+				recaptchaSiteKey: instance.recaptchaSiteKey,
+				swPublickey: instance.swPublicKey,
+				themeColor: instance.themeColor,
+				mascotImageUrl: instance.mascotImageUrl,
+				bannerUrl: instance.bannerUrl,
+				errorImageUrl: instance.errorImageUrl,
+				iconUrl: instance.iconUrl,
+				backgroundImageUrl: instance.backgroundImageUrl,
+				logoImageUrl: instance.logoImageUrl,
+				maxNoteTextLength: MAX_NOTE_TEXT_LENGTH, // 後方互換性のため
+				emojis: await this.emojiEntityService.packMany(emojis),
+				defaultLightTheme: instance.defaultLightTheme,
+				defaultDarkTheme: instance.defaultDarkTheme,
+				ads: ads.map(ad => ({
+					id: ad.id,
+					url: ad.url,
+					place: ad.place,
+					ratio: ad.ratio,
+					imageUrl: ad.imageUrl,
+				})),
+				enableEmail: instance.enableEmail,
 
-		...(ps.detail ? {
-			pinnedPages: instance.pinnedPages,
-			pinnedClipId: instance.pinnedClipId,
-			cacheRemoteFiles: instance.cacheRemoteFiles,
-			requireSetup: (await Users.countBy({
-				host: IsNull(),
-			})) === 0,
-		} : {}),
-	};
+				enableTwitterIntegration: instance.enableTwitterIntegration,
+				enableGithubIntegration: instance.enableGithubIntegration,
+				enableDiscordIntegration: instance.enableDiscordIntegration,
 
-	if (ps.detail) {
-		const proxyAccount = instance.proxyAccountId ? await Users.pack(instance.proxyAccountId).catch(() => null) : null;
+				enableServiceWorker: instance.enableServiceWorker,
 
-		response.proxyAccountName = proxyAccount ? proxyAccount.username : null;
-		response.features = {
-			registration: !instance.disableRegistration,
-			localTimeLine: !instance.disableLocalTimeline,
-			globalTimeLine: !instance.disableGlobalTimeline,
-			emailRequiredForSignup: instance.emailRequiredForSignup,
-			elasticsearch: config.elasticsearch ? true : false,
-			hcaptcha: instance.enableHcaptcha,
-			recaptcha: instance.enableRecaptcha,
-			objectStorage: instance.useObjectStorage,
-			twitter: instance.enableTwitterIntegration,
-			github: instance.enableGithubIntegration,
-			discord: instance.enableDiscordIntegration,
-			serviceWorker: instance.enableServiceWorker,
-			miauth: true,
-		};
-	}
+				translatorAvailable: instance.deeplAuthKey != null,
+
+				...(ps.detail ? {
+					pinnedPages: instance.pinnedPages,
+					pinnedClipId: instance.pinnedClipId,
+					cacheRemoteFiles: instance.cacheRemoteFiles,
+					requireSetup: (await this.usersRepository.countBy({
+						host: IsNull(),
+					})) === 0,
+				} : {}),
+			};
 
-	return response;
-});
+			if (ps.detail) {
+				const proxyAccount = instance.proxyAccountId ? await this.userEntityService.pack(instance.proxyAccountId).catch(() => null) : null;
+
+				response.proxyAccountName = proxyAccount ? proxyAccount.username : null;
+				response.features = {
+					registration: !instance.disableRegistration,
+					localTimeLine: !instance.disableLocalTimeline,
+					globalTimeLine: !instance.disableGlobalTimeline,
+					emailRequiredForSignup: instance.emailRequiredForSignup,
+					elasticsearch: this.config.elasticsearch ? true : false,
+					hcaptcha: instance.enableHcaptcha,
+					recaptcha: instance.enableRecaptcha,
+					objectStorage: instance.useObjectStorage,
+					twitter: instance.enableTwitterIntegration,
+					github: instance.enableGithubIntegration,
+					discord: instance.enableDiscordIntegration,
+					serviceWorker: instance.enableServiceWorker,
+					miauth: true,
+				};
+			}
+
+			return response;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/miauth/gen-token.ts b/packages/backend/src/server/api/endpoints/miauth/gen-token.ts
index 73ecdaeb03..d8eb89c0e6 100644
--- a/packages/backend/src/server/api/endpoints/miauth/gen-token.ts
+++ b/packages/backend/src/server/api/endpoints/miauth/gen-token.ts
@@ -1,7 +1,9 @@
-import define from '../../define.js';
-import { AccessTokens } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AccessTokensRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
 import { secureRndstr } from '@/misc/secure-rndstr.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['auth'],
@@ -37,28 +39,38 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Generate access token
-	const accessToken = secureRndstr(32, true);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.accessTokensRepository)
+		private accessTokensRepository: AccessTokensRepository,
 
-	const now = new Date();
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Generate access token
+			const accessToken = secureRndstr(32, true);
 
-	// Insert access token doc
-	await AccessTokens.insert({
-		id: genId(),
-		createdAt: now,
-		lastUsedAt: now,
-		session: ps.session,
-		userId: user.id,
-		token: accessToken,
-		hash: accessToken,
-		name: ps.name,
-		description: ps.description,
-		iconUrl: ps.iconUrl,
-		permission: ps.permission,
-	});
+			const now = new Date();
 
-	return {
-		token: accessToken,
-	};
-});
+			// Insert access token doc
+			await this.accessTokensRepository.insert({
+				id: this.idService.genId(),
+				createdAt: now,
+				lastUsedAt: now,
+				session: ps.session,
+				userId: me.id,
+				token: accessToken,
+				hash: accessToken,
+				name: ps.name,
+				description: ps.description,
+				iconUrl: ps.iconUrl,
+				permission: ps.permission,
+			});
+
+			return {
+				token: accessToken,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/mute/create.ts b/packages/backend/src/server/api/endpoints/mute/create.ts
index 7e857e6731..cbdd001185 100644
--- a/packages/backend/src/server/api/endpoints/mute/create.ts
+++ b/packages/backend/src/server/api/endpoints/mute/create.ts
@@ -1,10 +1,12 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { IdService } from '@/core/IdService.js';
+import { MutingsRepository } from '@/models/index.js';
+import type { Muting } from '@/models/entities/Muting.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { getUser } from '../../common/getters.js';
-import { genId } from '@/misc/gen-id.js';
-import { Mutings, NoteWatchings } from '@/models/index.js';
-import { Muting } from '@/models/entities/muting.js';
-import { publishUserEvent } from '@/services/stream.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['account'],
@@ -48,47 +50,54 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const muter = user;
-
-	// 自分自身
-	if (user.id === ps.userId) {
-		throw new ApiError(meta.errors.muteeIsYourself);
-	}
-
-	// Get mutee
-	const mutee = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
-
-	// Check if already muting
-	const exist = await Mutings.findOneBy({
-		muterId: muter.id,
-		muteeId: mutee.id,
-	});
-
-	if (exist != null) {
-		throw new ApiError(meta.errors.alreadyMuting);
-	}
-
-	if (ps.expiresAt && ps.expiresAt <= Date.now()) {
-		return;
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		private globalEventService: GlobalEventService,
+		private getterService: GetterService,
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const muter = me;
+
+			// 自分自身
+			if (me.id === ps.userId) {
+				throw new ApiError(meta.errors.muteeIsYourself);
+			}
+
+			// Get mutee
+			const mutee = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
+
+			// Check if already muting
+			const exist = await this.mutingsRepository.findOneBy({
+				muterId: muter.id,
+				muteeId: mutee.id,
+			});
+
+			if (exist != null) {
+				throw new ApiError(meta.errors.alreadyMuting);
+			}
+
+			if (ps.expiresAt && ps.expiresAt <= Date.now()) {
+				return;
+			}
+
+			// Create mute
+			await this.mutingsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				expiresAt: ps.expiresAt ? new Date(ps.expiresAt) : null,
+				muterId: muter.id,
+				muteeId: mutee.id,
+			} as Muting);
+
+			this.globalEventService.publishUserEvent(me.id, 'mute', mutee);
+		});
 	}
-
-	// Create mute
-	await Mutings.insert({
-		id: genId(),
-		createdAt: new Date(),
-		expiresAt: ps.expiresAt ? new Date(ps.expiresAt) : null,
-		muterId: muter.id,
-		muteeId: mutee.id,
-	} as Muting);
-
-	publishUserEvent(user.id, 'mute', mutee);
-
-	NoteWatchings.delete({
-		userId: muter.id,
-		noteUserId: mutee.id,
-	});
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/mute/delete.ts b/packages/backend/src/server/api/endpoints/mute/delete.ts
index 0b173dbe24..c7098059d5 100644
--- a/packages/backend/src/server/api/endpoints/mute/delete.ts
+++ b/packages/backend/src/server/api/endpoints/mute/delete.ts
@@ -1,8 +1,10 @@
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { MutingsRepository } from '@/models/index.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { getUser } from '../../common/getters.js';
-import { Mutings } from '@/models/index.js';
-import { publishUserEvent } from '@/services/stream.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['account'],
@@ -41,34 +43,45 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const muter = user;
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
 
-	// Check if the mutee is yourself
-	if (user.id === ps.userId) {
-		throw new ApiError(meta.errors.muteeIsYourself);
-	}
+		private globalEventService: GlobalEventService,
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const muter = me;
 
-	// Get mutee
-	const mutee = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
+			// Check if the mutee is yourself
+			if (me.id === ps.userId) {
+				throw new ApiError(meta.errors.muteeIsYourself);
+			}
 
-	// Check not muting
-	const exist = await Mutings.findOneBy({
-		muterId: muter.id,
-		muteeId: mutee.id,
-	});
+			// Get mutee
+			const mutee = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
 
-	if (exist == null) {
-		throw new ApiError(meta.errors.notMuting);
-	}
+			// Check not muting
+			const exist = await this.mutingsRepository.findOneBy({
+				muterId: muter.id,
+				muteeId: mutee.id,
+			});
 
-	// Delete mute
-	await Mutings.delete({
-		id: exist.id,
-	});
+			if (exist == null) {
+				throw new ApiError(meta.errors.notMuting);
+			}
 
-	publishUserEvent(user.id, 'unmute', mutee);
-});
+			// Delete mute
+			await this.mutingsRepository.delete({
+				id: exist.id,
+			});
+
+			this.globalEventService.publishUserEvent(me.id, 'unmute', mutee);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/mute/list.ts b/packages/backend/src/server/api/endpoints/mute/list.ts
index 31283cf4c1..11c05eb795 100644
--- a/packages/backend/src/server/api/endpoints/mute/list.ts
+++ b/packages/backend/src/server/api/endpoints/mute/list.ts
@@ -1,6 +1,9 @@
-import define from '../../define.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
-import { Mutings } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { MutingsRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { MutingEntityService } from '@/core/entities/MutingEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['account'],
@@ -31,13 +34,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = makePaginationQuery(Mutings.createQueryBuilder('muting'), ps.sinceId, ps.untilId)
-		.andWhere(`muting.muterId = :meId`, { meId: me.id });
-
-	const mutings = await query
-		.take(ps.limit)
-		.getMany();
-
-	return await Mutings.packMany(mutings, me);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		private mutingEntityService: MutingEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.mutingsRepository.createQueryBuilder('muting'), ps.sinceId, ps.untilId)
+				.andWhere('muting.muterId = :meId', { meId: me.id });
+
+			const mutings = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await this.mutingEntityService.packMany(mutings, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/my/apps.ts b/packages/backend/src/server/api/endpoints/my/apps.ts
index 85b75c15df..90cd53a133 100644
--- a/packages/backend/src/server/api/endpoints/my/apps.ts
+++ b/packages/backend/src/server/api/endpoints/my/apps.ts
@@ -1,5 +1,8 @@
-import define from '../../define.js';
-import { Apps } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { AppsRepository } from '@/models/index.js';
+import { AppEntityService } from '@/core/entities/AppEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['account', 'app'],
@@ -27,18 +30,28 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = {
-		userId: user.id,
-	};
-
-	const apps = await Apps.find({
-		where: query,
-		take: ps.limit,
-		skip: ps.offset,
-	});
-
-	return await Promise.all(apps.map(app => Apps.pack(app, user, {
-		detail: true,
-	})));
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.appsRepository)
+		private appsRepository: AppsRepository,
+
+		private appEntityService: AppEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = {
+				userId: me.id,
+			};
+
+			const apps = await this.appsRepository.find({
+				where: query,
+				take: ps.limit,
+				skip: ps.offset,
+			});
+
+			return await Promise.all(apps.map(app => this.appEntityService.pack(app, me, {
+				detail: true,
+			})));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes.ts b/packages/backend/src/server/api/endpoints/notes.ts
index 015b0338e3..288e195316 100644
--- a/packages/backend/src/server/api/endpoints/notes.ts
+++ b/packages/backend/src/server/api/endpoints/notes.ts
@@ -1,6 +1,9 @@
-import { Notes } from '@/models/index.js';
-import define from '../define.js';
-import { makePaginationQuery } from '../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -32,48 +35,59 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const query = makePaginationQuery(Notes.createQueryBuilder('note'), ps.sinceId, ps.untilId)
-		.andWhere('note.visibility = \'public\'')
-		.andWhere('note.localOnly = FALSE')
-		.innerJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
 
-	if (ps.local) {
-		query.andWhere('note.userHost IS NULL');
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), ps.sinceId, ps.untilId)
+				.andWhere('note.visibility = \'public\'')
+				.andWhere('note.localOnly = FALSE')
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
+		
+			if (ps.local) {
+				query.andWhere('note.userHost IS NULL');
+			}
+		
+			if (ps.reply !== undefined) {
+				query.andWhere(ps.reply ? 'note.replyId IS NOT NULL' : 'note.replyId IS NULL');
+			}
+		
+			if (ps.renote !== undefined) {
+				query.andWhere(ps.renote ? 'note.renoteId IS NOT NULL' : 'note.renoteId IS NULL');
+			}
+		
+			if (ps.withFiles !== undefined) {
+				query.andWhere(ps.withFiles ? 'note.fileIds != \'{}\'' : 'note.fileIds = \'{}\'');
+			}
+		
+			if (ps.poll !== undefined) {
+				query.andWhere(ps.poll ? 'note.hasPoll = TRUE' : 'note.hasPoll = FALSE');
+			}
+		
+			// TODO
+			//if (bot != undefined) {
+			//	query.isBot = bot;
+			//}
+		
+			const notes = await query.take(ps.limit).getMany();
+		
+			return await this.noteEntityService.packMany(notes);
+		});
 	}
-
-	if (ps.reply !== undefined) {
-		query.andWhere(ps.reply ? 'note.replyId IS NOT NULL' : 'note.replyId IS NULL');
-	}
-
-	if (ps.renote !== undefined) {
-		query.andWhere(ps.renote ? 'note.renoteId IS NOT NULL' : 'note.renoteId IS NULL');
-	}
-
-	if (ps.withFiles !== undefined) {
-		query.andWhere(ps.withFiles ? 'note.fileIds != \'{}\'' : 'note.fileIds = \'{}\'');
-	}
-
-	if (ps.poll !== undefined) {
-		query.andWhere(ps.poll ? 'note.hasPoll = TRUE' : 'note.hasPoll = FALSE');
-	}
-
-	// TODO
-	//if (bot != undefined) {
-	//	query.isBot = bot;
-	//}
-
-	const notes = await query.take(ps.limit).getMany();
-
-	return await Notes.packMany(notes);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/children.ts b/packages/backend/src/server/api/endpoints/notes/children.ts
index efc109105c..86f90e049f 100644
--- a/packages/backend/src/server/api/endpoints/notes/children.ts
+++ b/packages/backend/src/server/api/endpoints/notes/children.ts
@@ -1,10 +1,10 @@
 import { Brackets } from 'typeorm';
-import { Notes } from '@/models/index.js';
-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 { generateBlockedUserQuery } from '../../common/generate-block-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -34,38 +34,49 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = makePaginationQuery(Notes.createQueryBuilder('note'), ps.sinceId, ps.untilId)
-		.andWhere(new Brackets(qb => { qb
-			.where('note.replyId = :noteId', { noteId: ps.noteId })
-			.orWhere(new Brackets(qb => { qb
-				.where('note.renoteId = :noteId', { noteId: ps.noteId })
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), ps.sinceId, ps.untilId)
 				.andWhere(new Brackets(qb => { qb
-					.where('note.text IS NOT NULL')
-					.orWhere('note.fileIds != \'{}\'')
-					.orWhere('note.hasPoll = TRUE');
-				}));
-			}));
-		}))
-		.innerJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
+					.where('note.replyId = :noteId', { noteId: ps.noteId })
+					.orWhere(new Brackets(qb => { qb
+						.where('note.renoteId = :noteId', { noteId: ps.noteId })
+						.andWhere(new Brackets(qb => { qb
+							.where('note.text IS NOT NULL')
+							.orWhere('note.fileIds != \'{}\'')
+							.orWhere('note.hasPoll = TRUE');
+						}));
+					}));
+				}))
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
 
-	generateVisibilityQuery(query, user);
-	if (user) {
-		generateMutedUserQuery(query, user);
-		generateBlockedUserQuery(query, user);
-	}
+			this.queryService.generateVisibilityQuery(query, me);
+			if (me) {
+				this.queryService.generateMutedUserQuery(query, me);
+				this.queryService.generateBlockedUserQuery(query, me);
+			}
 
-	const notes = await query.take(ps.limit).getMany();
+			const notes = await query.take(ps.limit).getMany();
 
-	return await Notes.packMany(notes, user);
-});
+			return await this.noteEntityService.packMany(notes, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/clips.ts b/packages/backend/src/server/api/endpoints/notes/clips.ts
index e79f8563e8..7d893f32a1 100644
--- a/packages/backend/src/server/api/endpoints/notes/clips.ts
+++ b/packages/backend/src/server/api/endpoints/notes/clips.ts
@@ -1,8 +1,11 @@
 import { In } from 'typeorm';
-import { ClipNotes, Clips } from '@/models/index.js';
-import define from '../../define.js';
-import { getNote } from '../../common/getters.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { ClipNotesRepository, ClipsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { ClipEntityService } from '@/core/entities/ClipEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['clips', 'notes'],
@@ -37,20 +40,34 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const note = await getNote(ps.noteId).catch(e => {
-		if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
-		throw e;
-	});
-
-	const clipNotes = await ClipNotes.findBy({
-		noteId: note.id,
-	});
-
-	const clips = await Clips.findBy({
-		id: In(clipNotes.map(x => x.clipId)),
-		isPublic: true,
-	});
-
-	return await Promise.all(clips.map(x => Clips.pack(x)));
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.clipsRepository)
+		private clipsRepository: ClipsRepository,
+
+		@Inject(DI.clipNotesRepository)
+		private clipNotesRepository: ClipNotesRepository,
+
+		private clipEntityService: ClipEntityService,
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const note = await this.getterService.getNote(ps.noteId).catch(err => {
+				if (err.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
+
+			const clipNotes = await this.clipNotesRepository.findBy({
+				noteId: note.id,
+			});
+
+			const clips = await this.clipsRepository.findBy({
+				id: In(clipNotes.map(x => x.clipId)),
+				isPublic: true,
+			});
+
+			return await Promise.all(clips.map(x => this.clipEntityService.pack(x)));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/conversation.ts b/packages/backend/src/server/api/endpoints/notes/conversation.ts
index b731d18248..2f8324ed62 100644
--- a/packages/backend/src/server/api/endpoints/notes/conversation.ts
+++ b/packages/backend/src/server/api/endpoints/notes/conversation.ts
@@ -1,8 +1,11 @@
-import { Note } from '@/models/entities/note.js';
-import { Notes } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import type { Note } from '@/models/entities/Note.js';
+import { NotesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { getNote } from '../../common/getters.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -39,36 +42,47 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const note = await getNote(ps.noteId).catch(e => {
-		if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
-		throw e;
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
 
-	const conversation: Note[] = [];
-	let i = 0;
+		private noteEntityService: NoteEntityService,
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const note = await this.getterService.getNote(ps.noteId).catch(err => {
+				if (err.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
 
-	async function get(id: any) {
-		i++;
-		const p = await Notes.findOneBy({ id });
-		if (p == null) return;
+			const conversation: Note[] = [];
+			let i = 0;
 
-		if (i > ps.offset!) {
-			conversation.push(p);
-		}
+			const get = async (id: any) => {
+				i++;
+				const p = await this.notesRepository.findOneBy({ id });
+				if (p == null) return;
 
-		if (conversation.length === ps.limit) {
-			return;
-		}
+				if (i > ps.offset!) {
+					conversation.push(p);
+				}
 
-		if (p.replyId) {
-			await get(p.replyId);
-		}
-	}
+				if (conversation.length === ps.limit) {
+					return;
+				}
 
-	if (note.replyId) {
-		await get(note.replyId);
-	}
+				if (p.replyId) {
+					await get(p.replyId);
+				}
+			};
 
-	return await Notes.packMany(conversation, user);
-});
+			if (note.replyId) {
+				await get(note.replyId);
+			}
+
+			return await this.noteEntityService.packMany(conversation, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/create.ts b/packages/backend/src/server/api/endpoints/notes/create.ts
index a133294169..30b7a889fc 100644
--- a/packages/backend/src/server/api/endpoints/notes/create.ts
+++ b/packages/backend/src/server/api/endpoints/notes/create.ts
@@ -1,15 +1,18 @@
 import ms from 'ms';
 import { In } from 'typeorm';
-import create from '@/services/note/create.js';
-import { User } from '@/models/entities/user.js';
-import { Users, DriveFiles, Notes, Channels, Blockings } from '@/models/index.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { Note } from '@/models/entities/note.js';
-import { Channel } from '@/models/entities/channel.js';
+import { Inject, Injectable } from '@nestjs/common';
+import type { User } from '@/models/entities/User.js';
+import { UsersRepository, NotesRepository, BlockingsRepository, DriveFilesRepository, ChannelsRepository } from '@/models/index.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import type { Note } from '@/models/entities/Note.js';
+import type { Channel } from '@/models/entities/Channel.js';
 import { MAX_NOTE_TEXT_LENGTH } from '@/const.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { NoteCreateService } from '@/core/NoteCreateService.js';
+import { DI } from '@/di-symbols.js';
 import { noteVisibilities } from '../../../../types.js';
 import { ApiError } from '../../error.js';
-import define from '../../define.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -161,115 +164,138 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	let visibleUsers: User[] = [];
-	if (ps.visibleUserIds) {
-		visibleUsers = await Users.findBy({
-			id: In(ps.visibleUserIds),
-		});
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	let files: DriveFile[] = [];
-	const fileIds = ps.fileIds != null ? ps.fileIds : ps.mediaIds != null ? ps.mediaIds : null;
-	if (fileIds != null) {
-		files = await DriveFiles.createQueryBuilder('file')
-			.where('file.userId = :userId AND file.id IN (:...fileIds)', {
-				userId: user.id,
-				fileIds,
-			})
-			.orderBy('array_position(ARRAY[:...fileIds], "id"::text)')
-			.setParameters({ fileIds })
-			.getMany();
-	}
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
 
-	let renote: Note | null = null;
-	if (ps.renoteId != null) {
-		// Fetch renote to note
-		renote = await Notes.findOneBy({ id: ps.renoteId });
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
 
-		if (renote == null) {
-			throw new ApiError(meta.errors.noSuchRenoteTarget);
-		} else if (renote.renoteId && !renote.text && !renote.fileIds && !renote.hasPoll) {
-			throw new ApiError(meta.errors.cannotReRenote);
-		}
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
 
-		// Check blocking
-		if (renote.userId !== user.id) {
-			const block = await Blockings.findOneBy({
-				blockerId: renote.userId,
-				blockeeId: user.id,
-			});
-			if (block) {
-				throw new ApiError(meta.errors.youHaveBeenBlocked);
+		@Inject(DI.channelsRepository)
+		private channelsRepository: ChannelsRepository,
+
+		private noteEntityService: NoteEntityService,
+		private noteCreateService: NoteCreateService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			let visibleUsers: User[] = [];
+			if (ps.visibleUserIds) {
+				visibleUsers = await this.usersRepository.findBy({
+					id: In(ps.visibleUserIds),
+				});
 			}
-		}
-	}
 
-	let reply: Note | null = null;
-	if (ps.replyId != null) {
-		// Fetch reply
-		reply = await Notes.findOneBy({ id: ps.replyId });
+			let files: DriveFile[] = [];
+			const fileIds = ps.fileIds != null ? ps.fileIds : ps.mediaIds != null ? ps.mediaIds : null;
+			if (fileIds != null) {
+				files = await this.driveFilesRepository.createQueryBuilder('file')
+					.where('file.userId = :userId AND file.id IN (:...fileIds)', {
+						userId: me.id,
+						fileIds,
+					})
+					.orderBy('array_position(ARRAY[:...fileIds], "id"::text)')
+					.setParameters({ fileIds })
+					.getMany();
+			}
 
-		if (reply == null) {
-			throw new ApiError(meta.errors.noSuchReplyTarget);
-		} else if (reply.renoteId && !reply.text && !reply.fileIds && !reply.hasPoll) {
-			throw new ApiError(meta.errors.cannotReplyToPureRenote);
-		}
+			let renote: Note | null = null;
+			if (ps.renoteId != null) {
+				// Fetch renote to note
+				renote = await this.notesRepository.findOneBy({ id: ps.renoteId });
 
-		// Check blocking
-		if (reply.userId !== user.id) {
-			const block = await Blockings.findOneBy({
-				blockerId: reply.userId,
-				blockeeId: user.id,
-			});
-			if (block) {
-				throw new ApiError(meta.errors.youHaveBeenBlocked);
+				if (renote == null) {
+					throw new ApiError(meta.errors.noSuchRenoteTarget);
+				} else if (renote.renoteId && !renote.text && !renote.fileIds && !renote.hasPoll) {
+					throw new ApiError(meta.errors.cannotReRenote);
+				}
+
+				// Check blocking
+				if (renote.userId !== me.id) {
+					const block = await this.blockingsRepository.findOneBy({
+						blockerId: renote.userId,
+						blockeeId: me.id,
+					});
+					if (block) {
+						throw new ApiError(meta.errors.youHaveBeenBlocked);
+					}
+				}
 			}
-		}
-	}
 
-	if (ps.poll) {
-		if (typeof ps.poll.expiresAt === 'number') {
-			if (ps.poll.expiresAt < Date.now()) {
-				throw new ApiError(meta.errors.cannotCreateAlreadyExpiredPoll);
+			let reply: Note | null = null;
+			if (ps.replyId != null) {
+				// Fetch reply
+				reply = await this.notesRepository.findOneBy({ id: ps.replyId });
+
+				if (reply == null) {
+					throw new ApiError(meta.errors.noSuchReplyTarget);
+				} else if (reply.renoteId && !reply.text && !reply.fileIds && !reply.hasPoll) {
+					throw new ApiError(meta.errors.cannotReplyToPureRenote);
+				}
+
+				// Check blocking
+				if (reply.userId !== me.id) {
+					const block = await this.blockingsRepository.findOneBy({
+						blockerId: reply.userId,
+						blockeeId: me.id,
+					});
+					if (block) {
+						throw new ApiError(meta.errors.youHaveBeenBlocked);
+					}
+				}
 			}
-		} else if (typeof ps.poll.expiredAfter === 'number') {
-			ps.poll.expiresAt = Date.now() + ps.poll.expiredAfter;
-		}
-	}
 
-	let channel: Channel | null = null;
-	if (ps.channelId != null) {
-		channel = await Channels.findOneBy({ id: ps.channelId });
+			if (ps.poll) {
+				if (typeof ps.poll.expiresAt === 'number') {
+					if (ps.poll.expiresAt < Date.now()) {
+						throw new ApiError(meta.errors.cannotCreateAlreadyExpiredPoll);
+					}
+				} else if (typeof ps.poll.expiredAfter === 'number') {
+					ps.poll.expiresAt = Date.now() + ps.poll.expiredAfter;
+				}
+			}
 
-		if (channel == null) {
-			throw new ApiError(meta.errors.noSuchChannel);
-		}
-	}
+			let channel: Channel | null = null;
+			if (ps.channelId != null) {
+				channel = await this.channelsRepository.findOneBy({ id: ps.channelId });
 
-	// 投稿を作成
-	const note = await create(user, {
-		createdAt: new Date(),
-		files: files,
-		poll: ps.poll ? {
-			choices: ps.poll.choices,
-			multiple: ps.poll.multiple || false,
-			expiresAt: ps.poll.expiresAt ? new Date(ps.poll.expiresAt) : null,
-		} : undefined,
-		text: ps.text || undefined,
-		reply,
-		renote,
-		cw: ps.cw,
-		localOnly: ps.localOnly,
-		visibility: ps.visibility,
-		visibleUsers,
-		channel,
-		apMentions: ps.noExtractMentions ? [] : undefined,
-		apHashtags: ps.noExtractHashtags ? [] : undefined,
-		apEmojis: ps.noExtractEmojis ? [] : undefined,
-	});
+				if (channel == null) {
+					throw new ApiError(meta.errors.noSuchChannel);
+				}
+			}
+
+			// 投稿を作成
+			const note = await this.noteCreateService.create(me, {
+				createdAt: new Date(),
+				files: files,
+				poll: ps.poll ? {
+					choices: ps.poll.choices,
+					multiple: ps.poll.multiple || false,
+					expiresAt: ps.poll.expiresAt ? new Date(ps.poll.expiresAt) : null,
+				} : undefined,
+				text: ps.text ?? undefined,
+				reply,
+				renote,
+				cw: ps.cw,
+				localOnly: ps.localOnly,
+				visibility: ps.visibility,
+				visibleUsers,
+				channel,
+				apMentions: ps.noExtractMentions ? [] : undefined,
+				apHashtags: ps.noExtractHashtags ? [] : undefined,
+				apEmojis: ps.noExtractEmojis ? [] : undefined,
+			});
 
-	return {
-		createdNote: await Notes.pack(note, user),
-	};
-});
+			return {
+				createdNote: await this.noteEntityService.pack(note, me),
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/delete.ts b/packages/backend/src/server/api/endpoints/notes/delete.ts
index c23ceeb5bf..4769c8bdf1 100644
--- a/packages/backend/src/server/api/endpoints/notes/delete.ts
+++ b/packages/backend/src/server/api/endpoints/notes/delete.ts
@@ -1,9 +1,11 @@
 import ms from 'ms';
-import deleteNote from '@/services/note/delete.js';
-import { Users } from '@/models/index.js';
-import define from '../../define.js';
-import { getNote } from '../../common/getters.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { NoteDeleteService } from '@/core/NoteDeleteService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -42,16 +44,27 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const note = await getNote(ps.noteId).catch(e => {
-		if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
-		throw e;
-	});
-
-	if ((!user.isAdmin && !user.isModerator) && (note.userId !== user.id)) {
-		throw new ApiError(meta.errors.accessDenied);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private getterService: GetterService,
+		private noteDeleteService: NoteDeleteService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const note = await this.getterService.getNote(ps.noteId).catch(err => {
+				if (err.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
 
-	// この操作を行うのが投稿者とは限らない(例えばモデレーター)ため
-	await deleteNote(await Users.findOneByOrFail({ id: note.userId }), note);
-});
+			if ((!me.isAdmin && !me.isModerator) && (note.userId !== me.id)) {
+				throw new ApiError(meta.errors.accessDenied);
+			}
+
+			// この操作を行うのが投稿者とは限らない(例えばモデレーター)ため
+			await this.noteDeleteService.delete(await this.usersRepository.findOneByOrFail({ id: note.userId }), note);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/favorites/create.ts b/packages/backend/src/server/api/endpoints/notes/favorites/create.ts
index 097371a425..bfdd1acd22 100644
--- a/packages/backend/src/server/api/endpoints/notes/favorites/create.ts
+++ b/packages/backend/src/server/api/endpoints/notes/favorites/create.ts
@@ -1,8 +1,10 @@
-import { NoteFavorites } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NoteFavoritesRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { getNote } from '../../../common/getters.js';
 
 export const meta = {
 	tags: ['notes', 'favorites'],
@@ -35,28 +37,39 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Get favoritee
-	const note = await getNote(ps.noteId).catch(e => {
-		if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
-		throw e;
-	});
-
-	// if already favorited
-	const exist = await NoteFavorites.findOneBy({
-		noteId: note.id,
-		userId: user.id,
-	});
-
-	if (exist != null) {
-		throw new ApiError(meta.errors.alreadyFavorited);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.noteFavoritesRepository)
+		private noteFavoritesRepository: NoteFavoritesRepository,
+
+		private idService: IdService,
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Get favoritee
+			const note = await this.getterService.getNote(ps.noteId).catch(err => {
+				if (err.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
+
+			// if already favorited
+			const exist = await this.noteFavoritesRepository.findOneBy({
+				noteId: note.id,
+				userId: me.id,
+			});
 
-	// Create favorite
-	await NoteFavorites.insert({
-		id: genId(),
-		createdAt: new Date(),
-		noteId: note.id,
-		userId: user.id,
-	});
-});
+			if (exist != null) {
+				throw new ApiError(meta.errors.alreadyFavorited);
+			}
+
+			// Create favorite
+			await this.noteFavoritesRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				noteId: note.id,
+				userId: me.id,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/favorites/delete.ts b/packages/backend/src/server/api/endpoints/notes/favorites/delete.ts
index 82ef4fa197..6b3a02b101 100644
--- a/packages/backend/src/server/api/endpoints/notes/favorites/delete.ts
+++ b/packages/backend/src/server/api/endpoints/notes/favorites/delete.ts
@@ -1,7 +1,9 @@
-import { NoteFavorites } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { DI } from '@/di-symbols.js';
+import { NoteFavoritesRepository } from '@/models/index.js';
 import { ApiError } from '../../../error.js';
-import { getNote } from '../../../common/getters.js';
 
 export const meta = {
 	tags: ['notes', 'favorites'],
@@ -34,23 +36,33 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Get favoritee
-	const note = await getNote(ps.noteId).catch(e => {
-		if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
-		throw e;
-	});
-
-	// if already favorited
-	const exist = await NoteFavorites.findOneBy({
-		noteId: note.id,
-		userId: user.id,
-	});
-
-	if (exist == null) {
-		throw new ApiError(meta.errors.notFavorited);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.noteFavoritesRepository)
+		private noteFavoritesRepository: NoteFavoritesRepository,
+
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Get favoritee
+			const note = await this.getterService.getNote(ps.noteId).catch(err => {
+				if (err.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
+
+			// if already favorited
+			const exist = await this.noteFavoritesRepository.findOneBy({
+				noteId: note.id,
+				userId: me.id,
+			});
 
-	// Delete favorite
-	await NoteFavorites.delete(exist.id);
-});
+			if (exist == null) {
+				throw new ApiError(meta.errors.notFavorited);
+			}
+
+			// Delete favorite
+			await this.noteFavoritesRepository.delete(exist.id);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/featured.ts b/packages/backend/src/server/api/endpoints/notes/featured.ts
index dd9cc581aa..9985f9d257 100644
--- a/packages/backend/src/server/api/endpoints/notes/featured.ts
+++ b/packages/backend/src/server/api/endpoints/notes/featured.ts
@@ -1,7 +1,9 @@
-import { Notes } from '@/models/index.js';
-import define from '../../define.js';
-import { generateMutedUserQuery } from '../../common/generate-muted-user-query.js';
-import { generateBlockedUserQuery } from '../../common/generate-block-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -29,39 +31,50 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const max = 30;
-	const day = 1000 * 60 * 60 * 24 * 3; // 3日前まで
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
 
-	const query = Notes.createQueryBuilder('note')
-		.addSelect('note.score')
-		.where('note.userHost IS NULL')
-		.andWhere('note.score > 0')
-		.andWhere('note.createdAt > :date', { date: new Date(Date.now() - day) })
-		.andWhere('note.visibility = \'public\'')
-		.innerJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const max = 30;
+			const day = 1000 * 60 * 60 * 24 * 3; // 3日前まで
 
-	if (user) generateMutedUserQuery(query, user);
-	if (user) generateBlockedUserQuery(query, user);
+			const query = this.notesRepository.createQueryBuilder('note')
+				.addSelect('note.score')
+				.where('note.userHost IS NULL')
+				.andWhere('note.score > 0')
+				.andWhere('note.createdAt > :date', { date: new Date(Date.now() - day) })
+				.andWhere('note.visibility = \'public\'')
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
 
-	let notes = await query
-		.orderBy('note.score', 'DESC')
-		.take(max)
-		.getMany();
+			if (me) this.queryService.generateMutedUserQuery(query, me);
+			if (me) this.queryService.generateBlockedUserQuery(query, me);
 
-	notes.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
+			let notes = await query
+				.orderBy('note.score', 'DESC')
+				.take(max)
+				.getMany();
 
-	notes = notes.slice(ps.offset, ps.offset + ps.limit);
+			notes.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime());
 
-	return await Notes.packMany(notes, user);
-});
+			notes = notes.slice(ps.offset, ps.offset + ps.limit);
+
+			return await this.noteEntityService.packMany(notes, me);
+		});
+	}
+}
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 925318f544..73b5afa40a 100644
--- a/packages/backend/src/server/api/endpoints/notes/global-timeline.ts
+++ b/packages/backend/src/server/api/endpoints/notes/global-timeline.ts
@@ -1,13 +1,12 @@
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Notes } from '@/models/index.js';
-import { activeUsersChart } from '@/services/chart/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { MetaService } from '@/core/MetaService.js';
+import ActiveUsersChart from '@/core/chart/charts/active-users.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
-import { generateMutedUserQuery } from '../../common/generate-muted-user-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';
 
 export const meta = {
 	tags: ['notes'],
@@ -49,50 +48,63 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const m = await fetchMeta();
-	if (m.disableGlobalTimeline) {
-		if (user == null || (!user.isAdmin && !user.isModerator)) {
-			throw new ApiError(meta.errors.gtlDisabled);
-		}
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
 
-	//#region Construct query
-	const query = makePaginationQuery(Notes.createQueryBuilder('note'),
-		ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
-		.andWhere('note.visibility = \'public\'')
-		.andWhere('note.channelId IS NULL')
-		.innerJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+		private metaService: MetaService,
+		private activeUsersChart: ActiveUsersChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const m = await this.metaService.fetch();
+			if (m.disableGlobalTimeline) {
+				if (me == null || (!me.isAdmin && !me.isModerator)) {
+					throw new ApiError(meta.errors.gtlDisabled);
+				}
+			}
 
-	generateRepliesQuery(query, user);
-	if (user) {
-		generateMutedUserQuery(query, user);
-		generateMutedNoteQuery(query, user);
-		generateBlockedUserQuery(query, user);
-	}
+			//#region Construct query
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'),
+				ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
+				.andWhere('note.visibility = \'public\'')
+				.andWhere('note.channelId IS NULL')
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
 
-	if (ps.withFiles) {
-		query.andWhere('note.fileIds != \'{}\'');
-	}
-	//#endregion
+			this.queryService.generateRepliesQuery(query, me);
+			if (me) {
+				this.queryService.generateMutedUserQuery(query, me);
+				this.queryService.generateMutedNoteQuery(query, me);
+				this.queryService.generateBlockedUserQuery(query, me);
+			}
 
-	const timeline = await query.take(ps.limit).getMany();
+			if (ps.withFiles) {
+				query.andWhere('note.fileIds != \'{}\'');
+			}
+			//#endregion
 
-	process.nextTick(() => {
-		if (user) {
-			activeUsersChart.read(user);
-		}
-	});
+			const timeline = await query.take(ps.limit).getMany();
 
-	return await Notes.packMany(timeline, user);
-});
+			process.nextTick(() => {
+				if (me) {
+					this.activeUsersChart.read(me);
+				}
+			});
+
+			return await this.noteEntityService.packMany(timeline, me);
+		});
+	}
+}
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 2dc98c4c9f..c6458223eb 100644
--- a/packages/backend/src/server/api/endpoints/notes/hybrid-timeline.ts
+++ b/packages/backend/src/server/api/endpoints/notes/hybrid-timeline.ts
@@ -1,16 +1,13 @@
 import { Brackets } from 'typeorm';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Followings, Notes } from '@/models/index.js';
-import { activeUsersChart } from '@/services/chart/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository, FollowingsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import ActiveUsersChart from '@/core/chart/charts/active-users.js';
+import { MetaService } from '@/core/MetaService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { DI } from '@/di-symbols.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 { generateRepliesQuery } from '../../common/generate-replies-query.js';
-import { generateMutedNoteQuery } from '../../common/generate-muted-note-query.js';
-import { generateChannelQuery } from '../../common/generate-channel-query.js';
-import { generateBlockedUserQuery } from '../../common/generate-block-query.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -57,83 +54,99 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const m = await fetchMeta();
-	if (m.disableLocalTimeline && (!user.isAdmin && !user.isModerator)) {
-		throw new ApiError(meta.errors.stlDisabled);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+		private metaService: MetaService,
+		private activeUsersChart: ActiveUsersChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const m = await this.metaService.fetch();
+			if (m.disableLocalTimeline && (!me.isAdmin && !me.isModerator)) {
+				throw new ApiError(meta.errors.stlDisabled);
+			}
+
+			//#region Construct query
+			const followingQuery = this.followingsRepository.createQueryBuilder('following')
+				.select('following.followeeId')
+				.where('following.followerId = :followerId', { followerId: me.id });
+
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'),
+				ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
+				.andWhere(new Brackets(qb => {
+					qb.where(`((note.userId IN (${ followingQuery.getQuery() })) OR (note.userId = :meId))`, { meId: me.id })
+						.orWhere('(note.visibility = \'public\') AND (note.userHost IS NULL)');
+				}))
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner')
+				.setParameters(followingQuery.getParameters());
+
+			this.queryService.generateChannelQuery(query, me);
+			this.queryService.generateRepliesQuery(query, me);
+			this.queryService.generateVisibilityQuery(query, me);
+			this.queryService.generateMutedUserQuery(query, me);
+			this.queryService.generateMutedNoteQuery(query, me);
+			this.queryService.generateBlockedUserQuery(query, me);
+
+			if (ps.includeMyRenotes === false) {
+				query.andWhere(new Brackets(qb => {
+					qb.orWhere('note.userId != :meId', { meId: me.id });
+					qb.orWhere('note.renoteId IS NULL');
+					qb.orWhere('note.text IS NOT NULL');
+					qb.orWhere('note.fileIds != \'{}\'');
+					qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
+				}));
+			}
+
+			if (ps.includeRenotedMyNotes === false) {
+				query.andWhere(new Brackets(qb => {
+					qb.orWhere('note.renoteUserId != :meId', { meId: me.id });
+					qb.orWhere('note.renoteId IS NULL');
+					qb.orWhere('note.text IS NOT NULL');
+					qb.orWhere('note.fileIds != \'{}\'');
+					qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
+				}));
+			}
+
+			if (ps.includeLocalRenotes === false) {
+				query.andWhere(new Brackets(qb => {
+					qb.orWhere('note.renoteUserHost IS NOT NULL');
+					qb.orWhere('note.renoteId IS NULL');
+					qb.orWhere('note.text IS NOT NULL');
+					qb.orWhere('note.fileIds != \'{}\'');
+					qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
+				}));
+			}
+
+			if (ps.withFiles) {
+				query.andWhere('note.fileIds != \'{}\'');
+			}
+			//#endregion
+
+			const timeline = await query.take(ps.limit).getMany();
+
+			process.nextTick(() => {
+				this.activeUsersChart.read(me);
+			});
+
+			return await this.noteEntityService.packMany(timeline, me);
+		});
 	}
-
-	//#region Construct query
-	const followingQuery = Followings.createQueryBuilder('following')
-		.select('following.followeeId')
-		.where('following.followerId = :followerId', { followerId: user.id });
-
-	const query = makePaginationQuery(Notes.createQueryBuilder('note'),
-		ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
-		.andWhere(new Brackets(qb => {
-			qb.where(`((note.userId IN (${ followingQuery.getQuery() })) OR (note.userId = :meId))`, { meId: user.id })
-				.orWhere('(note.visibility = \'public\') AND (note.userHost IS NULL)');
-		}))
-		.innerJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner')
-		.setParameters(followingQuery.getParameters());
-
-	generateChannelQuery(query, user);
-	generateRepliesQuery(query, user);
-	generateVisibilityQuery(query, user);
-	generateMutedUserQuery(query, user);
-	generateMutedNoteQuery(query, user);
-	generateBlockedUserQuery(query, user);
-
-	if (ps.includeMyRenotes === false) {
-		query.andWhere(new Brackets(qb => {
-			qb.orWhere('note.userId != :meId', { meId: user.id });
-			qb.orWhere('note.renoteId IS NULL');
-			qb.orWhere('note.text IS NOT NULL');
-			qb.orWhere('note.fileIds != \'{}\'');
-			qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
-		}));
-	}
-
-	if (ps.includeRenotedMyNotes === false) {
-		query.andWhere(new Brackets(qb => {
-			qb.orWhere('note.renoteUserId != :meId', { meId: user.id });
-			qb.orWhere('note.renoteId IS NULL');
-			qb.orWhere('note.text IS NOT NULL');
-			qb.orWhere('note.fileIds != \'{}\'');
-			qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
-		}));
-	}
-
-	if (ps.includeLocalRenotes === false) {
-		query.andWhere(new Brackets(qb => {
-			qb.orWhere('note.renoteUserHost IS NOT NULL');
-			qb.orWhere('note.renoteId IS NULL');
-			qb.orWhere('note.text IS NOT NULL');
-			qb.orWhere('note.fileIds != \'{}\'');
-			qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
-		}));
-	}
-
-	if (ps.withFiles) {
-		query.andWhere('note.fileIds != \'{}\'');
-	}
-	//#endregion
-
-	const timeline = await query.take(ps.limit).getMany();
-
-	process.nextTick(() => {
-		activeUsersChart.read(user);
-	});
-
-	return await Notes.packMany(timeline, user);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/local-timeline.ts b/packages/backend/src/server/api/endpoints/notes/local-timeline.ts
index aac2a3749c..7b8859639d 100644
--- a/packages/backend/src/server/api/endpoints/notes/local-timeline.ts
+++ b/packages/backend/src/server/api/endpoints/notes/local-timeline.ts
@@ -1,16 +1,14 @@
 import { Brackets } from 'typeorm';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Notes, Users } from '@/models/index.js';
-import { activeUsersChart } from '@/services/chart/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository } from '@/models/index.js';
+import type { UsersRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { MetaService } from '@/core/MetaService.js';
+import ActiveUsersChart from '@/core/chart/charts/active-users.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { generateMutedUserQuery } from '../../common/generate-muted-user-query.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
-import { generateVisibilityQuery } from '../../common/generate-visibility-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';
-import { generateBlockedUserQuery } from '../../common/generate-block-query.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -56,64 +54,77 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const m = await fetchMeta();
-	if (m.disableLocalTimeline) {
-		if (user == null || (!user.isAdmin && !user.isModerator)) {
-			throw new ApiError(meta.errors.ltlDisabled);
-		}
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
 
-	//#region Construct query
-	const query = makePaginationQuery(Notes.createQueryBuilder('note'),
-		ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
-		.andWhere('(note.visibility = \'public\') AND (note.userHost IS NULL)')
-		.innerJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+		private metaService: MetaService,
+		private activeUsersChart: ActiveUsersChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const m = await this.metaService.fetch();
+			if (m.disableLocalTimeline) {
+				if (me == null || (!me.isAdmin && !me.isModerator)) {
+					throw new ApiError(meta.errors.ltlDisabled);
+				}
+			}
 
-	generateChannelQuery(query, user);
-	generateRepliesQuery(query, user);
-	generateVisibilityQuery(query, user);
-	if (user) generateMutedUserQuery(query, user);
-	if (user) generateMutedNoteQuery(query, user);
-	if (user) generateBlockedUserQuery(query, user);
+			//#region Construct query
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'),
+				ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
+				.andWhere('(note.visibility = \'public\') AND (note.userHost IS NULL)')
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
 
-	if (ps.withFiles) {
-		query.andWhere('note.fileIds != \'{}\'');
-	}
+			this.queryService.generateChannelQuery(query, me);
+			this.queryService.generateRepliesQuery(query, me);
+			this.queryService.generateVisibilityQuery(query, me);
+			if (me) this.queryService.generateMutedUserQuery(query, me);
+			if (me) this.queryService.generateMutedNoteQuery(query, me);
+			if (me) this.queryService.generateBlockedUserQuery(query, me);
 
-	if (ps.fileType != null) {
-		query.andWhere('note.fileIds != \'{}\'');
-		query.andWhere(new Brackets(qb => {
-			for (const type of ps.fileType!) {
-				const i = ps.fileType!.indexOf(type);
-				qb.orWhere(`:type${i} = ANY(note.attachedFileTypes)`, { [`type${i}`]: type });
+			if (ps.withFiles) {
+				query.andWhere('note.fileIds != \'{}\'');
 			}
-		}));
 
-		if (ps.excludeNsfw) {
-			query.andWhere('note.cw IS NULL');
-			query.andWhere('0 = (SELECT COUNT(*) FROM drive_file df WHERE df.id = ANY(note."fileIds") AND df."isSensitive" = TRUE)');
-		}
-	}
-	//#endregion
+			if (ps.fileType != null) {
+				query.andWhere('note.fileIds != \'{}\'');
+				query.andWhere(new Brackets(qb => {
+					for (const type of ps.fileType!) {
+						const i = ps.fileType!.indexOf(type);
+						qb.orWhere(`:type${i} = ANY(note.attachedFileTypes)`, { [`type${i}`]: type });
+					}
+				}));
 
-	const timeline = await query.take(ps.limit).getMany();
+				if (ps.excludeNsfw) {
+					query.andWhere('note.cw IS NULL');
+					query.andWhere('0 = (SELECT COUNT(*) FROM drive_file df WHERE df.id = ANY(note."fileIds") AND df."isSensitive" = TRUE)');
+				}
+			}
+			//#endregion
+
+			const timeline = await query.take(ps.limit).getMany();
 
-	process.nextTick(() => {
-		if (user) {
-			activeUsersChart.read(user);
-		}
-	});
+			process.nextTick(() => {
+				if (me) {
+					this.activeUsersChart.read(me);
+				}
+			});
 
-	return await Notes.packMany(timeline, user);
-});
+			return await this.noteEntityService.packMany(timeline, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/mentions.ts b/packages/backend/src/server/api/endpoints/notes/mentions.ts
index 9b41544523..9b2dabc88b 100644
--- a/packages/backend/src/server/api/endpoints/notes/mentions.ts
+++ b/packages/backend/src/server/api/endpoints/notes/mentions.ts
@@ -1,12 +1,12 @@
 import { Brackets } from 'typeorm';
-import read from '@/services/note/read.js';
-import { Notes, Followings } from '@/models/index.js';
-import define from '../../define.js';
-import { generateVisibilityQuery } from '../../common/generate-visibility-query.js';
-import { generateMutedUserQuery } from '../../common/generate-muted-user-query.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
-import { generateBlockedUserQuery } from '../../common/generate-block-query.js';
-import { generateMutedNoteThreadQuery } from '../../common/generate-muted-note-thread-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository, FollowingsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { MetaService } from '@/core/MetaService.js';
+import { NoteReadService } from '@/core/NoteReadService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -37,45 +37,60 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const followingQuery = Followings.createQueryBuilder('following')
-		.select('following.followeeId')
-		.where('following.followerId = :followerId', { followerId: user.id });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
 
-	const query = makePaginationQuery(Notes.createQueryBuilder('note'), ps.sinceId, ps.untilId)
-		.andWhere(new Brackets(qb => { qb
-			.where(`'{"${user.id}"}' <@ note.mentions`)
-			.orWhere(`'{"${user.id}"}' <@ note.visibleUserIds`);
-		}))
-		.innerJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
 
-	generateVisibilityQuery(query, user);
-	generateMutedUserQuery(query, user);
-	generateMutedNoteThreadQuery(query, user);
-	generateBlockedUserQuery(query, user);
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+		private noteReadService: NoteReadService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const followingQuery = this.followingsRepository.createQueryBuilder('following')
+				.select('following.followeeId')
+				.where('following.followerId = :followerId', { followerId: me.id });
 
-	if (ps.visibility) {
-		query.andWhere('note.visibility = :visibility', { visibility: ps.visibility });
-	}
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), ps.sinceId, ps.untilId)
+				.andWhere(new Brackets(qb => { qb
+					.where(`'{"${me.id}"}' <@ note.mentions`)
+					.orWhere(`'{"${me.id}"}' <@ note.visibleUserIds`);
+				}))
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
 
-	if (ps.following) {
-		query.andWhere(`((note.userId IN (${ followingQuery.getQuery() })) OR (note.userId = :meId))`, { meId: user.id });
-		query.setParameters(followingQuery.getParameters());
-	}
+			this.queryService.generateVisibilityQuery(query, me);
+			this.queryService.generateMutedUserQuery(query, me);
+			this.queryService.generateMutedNoteThreadQuery(query, me);
+			this.queryService.generateBlockedUserQuery(query, me);
+
+			if (ps.visibility) {
+				query.andWhere('note.visibility = :visibility', { visibility: ps.visibility });
+			}
 
-	const mentions = await query.take(ps.limit).getMany();
+			if (ps.following) {
+				query.andWhere(`((note.userId IN (${ followingQuery.getQuery() })) OR (note.userId = :meId))`, { meId: me.id });
+				query.setParameters(followingQuery.getParameters());
+			}
 
-	read(user.id, mentions);
+			const mentions = await query.take(ps.limit).getMany();
 
-	return await Notes.packMany(mentions, user);
-});
+			this.noteReadService.read(me.id, mentions);
+
+			return await this.noteEntityService.packMany(mentions, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/polls/recommendation.ts b/packages/backend/src/server/api/endpoints/notes/polls/recommendation.ts
index 5a04d68f3e..11bfdbba0f 100644
--- a/packages/backend/src/server/api/endpoints/notes/polls/recommendation.ts
+++ b/packages/backend/src/server/api/endpoints/notes/polls/recommendation.ts
@@ -1,6 +1,9 @@
 import { Brackets, In } from 'typeorm';
-import { Polls, Mutings, Notes, PollVotes } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository, MutingsRepository, PollsRepository, PollVotesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -28,56 +31,75 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = Polls.createQueryBuilder('poll')
-		.where('poll.userHost IS NULL')
-		.andWhere('poll.userId != :meId', { meId: user.id })
-		.andWhere('poll.noteVisibility = \'public\'')
-		.andWhere(new Brackets(qb => { qb
-			.where('poll.expiresAt IS NULL')
-			.orWhere('poll.expiresAt > :now', { now: new Date() });
-		}));
-
-	//#region exclude arleady voted polls
-	const votedQuery = PollVotes.createQueryBuilder('vote')
-		.select('vote.noteId')
-		.where('vote.userId = :meId', { meId: user.id });
-
-	query
-		.andWhere(`poll.noteId NOT IN (${ votedQuery.getQuery() })`);
-
-	query.setParameters(votedQuery.getParameters());
-	//#endregion
-
-	//#region mute
-	const mutingQuery = Mutings.createQueryBuilder('muting')
-		.select('muting.muteeId')
-		.where('muting.muterId = :muterId', { muterId: user.id });
-
-	query
-		.andWhere(`poll.userId NOT IN (${ mutingQuery.getQuery() })`);
-
-	query.setParameters(mutingQuery.getParameters());
-	//#endregion
-
-	const polls = await query
-		.orderBy('poll.noteId', 'DESC')
-		.take(ps.limit)
-		.skip(ps.offset)
-		.getMany();
-
-	if (polls.length === 0) return [];
-
-	const notes = await Notes.find({
-		where: {
-			id: In(polls.map(poll => poll.noteId)),
-		},
-		order: {
-			createdAt: 'DESC',
-		},
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.pollsRepository)
+		private pollsRepository: PollsRepository,
+
+		@Inject(DI.pollVotesRepository)
+		private pollVotesRepository: PollVotesRepository,
+
+		@Inject(DI.mutingsRepository)
+		private mutingsRepository: MutingsRepository,
+
+		private noteEntityService: NoteEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.pollsRepository.createQueryBuilder('poll')
+				.where('poll.userHost IS NULL')
+				.andWhere('poll.userId != :meId', { meId: me.id })
+				.andWhere('poll.noteVisibility = \'public\'')
+				.andWhere(new Brackets(qb => { qb
+					.where('poll.expiresAt IS NULL')
+					.orWhere('poll.expiresAt > :now', { now: new Date() });
+				}));
+
+			//#region exclude arleady voted polls
+			const votedQuery = this.pollVotesRepository.createQueryBuilder('vote')
+				.select('vote.noteId')
+				.where('vote.userId = :meId', { meId: me.id });
+
+			query
+				.andWhere(`poll.noteId NOT IN (${ votedQuery.getQuery() })`);
+
+			query.setParameters(votedQuery.getParameters());
+			//#endregion
+
+			//#region mute
+			const mutingQuery = this.mutingsRepository.createQueryBuilder('muting')
+				.select('muting.muteeId')
+				.where('muting.muterId = :muterId', { muterId: me.id });
+
+			query
+				.andWhere(`poll.userId NOT IN (${ mutingQuery.getQuery() })`);
+
+			query.setParameters(mutingQuery.getParameters());
+			//#endregion
+
+			const polls = await query
+				.orderBy('poll.noteId', 'DESC')
+				.take(ps.limit)
+				.skip(ps.offset)
+				.getMany();
+
+			if (polls.length === 0) return [];
+
+			const notes = await this.notesRepository.find({
+				where: {
+					id: In(polls.map(poll => poll.noteId)),
+				},
+				order: {
+					createdAt: 'DESC',
+				},
+			});
 
-	return await Notes.packMany(notes, user, {
-		detail: true,
-	});
-});
+			return await this.noteEntityService.packMany(notes, me, {
+				detail: true,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/polls/vote.ts b/packages/backend/src/server/api/endpoints/notes/polls/vote.ts
index 45a832cbd2..76f07528d7 100644
--- a/packages/backend/src/server/api/endpoints/notes/polls/vote.ts
+++ b/packages/backend/src/server/api/endpoints/notes/polls/vote.ts
@@ -1,16 +1,17 @@
 import { Not } from 'typeorm';
-import { publishNoteStream } from '@/services/stream.js';
-import { createNotification } from '@/services/create-notification.js';
-import { deliver } from '@/queue/index.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderVote from '@/remote/activitypub/renderer/vote.js';
-import { deliverQuestionUpdate } from '@/services/note/polls/update.js';
-import { PollVotes, NoteWatchings, Users, Polls, Blockings } from '@/models/index.js';
-import { IRemoteUser } from '@/models/entities/user.js';
-import { genId } from '@/misc/gen-id.js';
-import { getNote } from '../../../common/getters.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository, BlockingsRepository, PollsRepository, PollVotesRepository } from '@/models/index.js';
+import type { IRemoteUser } from '@/models/entities/User.js';
+import { IdService } from '@/core/IdService.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { QueueService } from '@/core/QueueService.js';
+import { PollService } from '@/core/PollService.js';
+import { ApRendererService } from '@/core/remote/activitypub/ApRendererService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { CreateNotificationService } from '@/core/CreateNotificationService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import define from '../../../define.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -67,103 +68,116 @@ export const paramDef = {
 	required: ['noteId', 'choice'],
 } as const;
 
-// eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const createdAt = new Date();
+// TODO: ロジックをサービスに切り出す
 
-	// Get votee
-	const note = await getNote(ps.noteId).catch(e => {
-		if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
-		throw e;
-	});
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		@Inject(DI.pollsRepository)
+		private pollsRepository: PollsRepository,
+
+		@Inject(DI.pollVotesRepository)
+		private pollVotesRepository: PollVotesRepository,
+
+		private idService: IdService,
+		private getterService: GetterService,
+		private queueService: QueueService,
+		private pollService: PollService,
+		private apRendererService: ApRendererService,
+		private globalEventService: GlobalEventService,
+		private createNotificationService: CreateNotificationService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const createdAt = new Date();
+
+			// Get votee
+			const note = await this.getterService.getNote(ps.noteId).catch(err => {
+				if (err.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
 
-	if (!note.hasPoll) {
-		throw new ApiError(meta.errors.noPoll);
-	}
+			if (!note.hasPoll) {
+				throw new ApiError(meta.errors.noPoll);
+			}
 
-	// Check blocking
-	if (note.userId !== user.id) {
-		const block = await Blockings.findOneBy({
-			blockerId: note.userId,
-			blockeeId: user.id,
-		});
-		if (block) {
-			throw new ApiError(meta.errors.youHaveBeenBlocked);
-		}
-	}
+			// Check blocking
+			if (note.userId !== me.id) {
+				const block = await this.blockingsRepository.findOneBy({
+					blockerId: note.userId,
+					blockeeId: me.id,
+				});
+				if (block) {
+					throw new ApiError(meta.errors.youHaveBeenBlocked);
+				}
+			}
 
-	const poll = await Polls.findOneByOrFail({ noteId: note.id });
+			const poll = await this.pollsRepository.findOneByOrFail({ noteId: note.id });
 
-	if (poll.expiresAt && poll.expiresAt < createdAt) {
-		throw new ApiError(meta.errors.alreadyExpired);
-	}
+			if (poll.expiresAt && poll.expiresAt < createdAt) {
+				throw new ApiError(meta.errors.alreadyExpired);
+			}
 
-	if (poll.choices[ps.choice] == null) {
-		throw new ApiError(meta.errors.invalidChoice);
-	}
+			if (poll.choices[ps.choice] == null) {
+				throw new ApiError(meta.errors.invalidChoice);
+			}
 
-	// if already voted
-	const exist = await PollVotes.findBy({
-		noteId: note.id,
-		userId: user.id,
-	});
+			// if already voted
+			const exist = await this.pollVotesRepository.findBy({
+				noteId: note.id,
+				userId: me.id,
+			});
 
-	if (exist.length) {
-		if (poll.multiple) {
-			if (exist.some(x => x.choice === ps.choice)) {
-				throw new ApiError(meta.errors.alreadyVoted);
+			if (exist.length) {
+				if (poll.multiple) {
+					if (exist.some(x => x.choice === ps.choice)) {
+						throw new ApiError(meta.errors.alreadyVoted);
+					}
+				} else {
+					throw new ApiError(meta.errors.alreadyVoted);
+				}
 			}
-		} else {
-			throw new ApiError(meta.errors.alreadyVoted);
-		}
-	}
 
-	// Create vote
-	const vote = await PollVotes.insert({
-		id: genId(),
-		createdAt,
-		noteId: note.id,
-		userId: user.id,
-		choice: ps.choice,
-	}).then(x => PollVotes.findOneByOrFail(x.identifiers[0]));
-
-	// Increment votes count
-	const index = ps.choice + 1; // In SQL, array index is 1 based
-	await Polls.query(`UPDATE poll SET votes[${index}] = votes[${index}] + 1 WHERE "noteId" = '${poll.noteId}'`);
-
-	publishNoteStream(note.id, 'pollVoted', {
-		choice: ps.choice,
-		userId: user.id,
-	});
-
-	// Notify
-	createNotification(note.userId, 'pollVote', {
-		notifierId: user.id,
-		noteId: note.id,
-		choice: ps.choice,
-	});
-
-	// Fetch watchers
-	NoteWatchings.findBy({
-		noteId: note.id,
-		userId: Not(user.id),
-	}).then(watchers => {
-		for (const watcher of watchers) {
-			createNotification(watcher.userId, 'pollVote', {
-				notifierId: user.id,
+			// Create vote
+			const vote = await this.pollVotesRepository.insert({
+				id: this.idService.genId(),
+				createdAt,
 				noteId: note.id,
+				userId: me.id,
 				choice: ps.choice,
+			}).then(x => this.pollVotesRepository.findOneByOrFail(x.identifiers[0]));
+
+			// Increment votes count
+			const index = ps.choice + 1; // In SQL, array index is 1 based
+			await this.pollsRepository.query(`UPDATE poll SET votes[${index}] = votes[${index}] + 1 WHERE "noteId" = '${poll.noteId}'`);
+
+			this.globalEventService.publishNoteStream(note.id, 'pollVoted', {
+				choice: ps.choice,
+				userId: me.id,
 			});
-		}
-	});
 
-	// リモート投票の場合リプライ送信
-	if (note.userHost != null) {
-		const pollOwner = await Users.findOneByOrFail({ id: note.userId }) as IRemoteUser;
+			// Notify
+			this.createNotificationService.createNotification(note.userId, 'pollVote', {
+				notifierId: me.id,
+				noteId: note.id,
+				choice: ps.choice,
+			});
 
-		deliver(user, renderActivity(await renderVote(user, vote, note, poll, pollOwner)), pollOwner.inbox);
-	}
+			// リモート投票の場合リプライ送信
+			if (note.userHost != null) {
+				const pollOwner = await this.usersRepository.findOneByOrFail({ id: note.userId }) as IRemoteUser;
+
+				this.queueService.deliver(me, this.apRendererService.renderActivity(await this.apRendererService.renderVote(me, vote, note, poll, pollOwner)), pollOwner.inbox);
+			}
 
-	// リモートフォロワーにUpdate配信
-	deliverQuestionUpdate(note.id);
-});
+			// リモートフォロワーにUpdate配信
+			this.pollService.deliverQuestionUpdate(note.id);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/reactions.ts b/packages/backend/src/server/api/endpoints/notes/reactions.ts
index 15a62d394d..d57950f012 100644
--- a/packages/backend/src/server/api/endpoints/notes/reactions.ts
+++ b/packages/backend/src/server/api/endpoints/notes/reactions.ts
@@ -1,8 +1,12 @@
-import { DeepPartial, FindOptionsWhere } from 'typeorm';
-import { NoteReactions } from '@/models/index.js';
-import { NoteReaction } from '@/models/entities/note-reaction.js';
-import define from '../../define.js';
+import { DeepPartial } from 'typeorm';
+import { Inject, Injectable } from '@nestjs/common';
+import { NoteReactionsRepository } from '@/models/index.js';
+import type { NoteReaction } from '@/models/entities/NoteReaction.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { NoteReactionEntityService } from '@/core/entities/NoteReactionEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
+import type { FindOptionsWhere } from 'typeorm';
 
 export const meta = {
 	tags: ['notes', 'reactions'],
@@ -45,28 +49,38 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = {
-		noteId: ps.noteId,
-	} as FindOptionsWhere<NoteReaction>;
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.noteReactionsRepository)
+		private noteReactionsRepository: NoteReactionsRepository,
 
-	if (ps.type) {
-		// ローカルリアクションはホスト名が . とされているが
-		// DB 上ではそうではないので、必要に応じて変換
-		const suffix = '@.:';
-		const type = ps.type.endsWith(suffix) ? ps.type.slice(0, ps.type.length - suffix.length) + ':' : ps.type;
-		query.reaction = type;
-	}
+		private noteReactionEntityService: NoteReactionEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = {
+				noteId: ps.noteId,
+			} as FindOptionsWhere<NoteReaction>;
 
-	const reactions = await NoteReactions.find({
-		where: query,
-		take: ps.limit,
-		skip: ps.offset,
-		order: {
-			id: -1,
-		},
-		relations: ['user', 'user.avatar', 'user.banner', 'note'],
-	});
+			if (ps.type) {
+				// ローカルリアクションはホスト名が . とされているが
+				// DB 上ではそうではないので、必要に応じて変換
+				const suffix = '@.:';
+				const type = ps.type.endsWith(suffix) ? ps.type.slice(0, ps.type.length - suffix.length) + ':' : ps.type;
+				query.reaction = type;
+			}
 
-	return await Promise.all(reactions.map(reaction => NoteReactions.pack(reaction, user)));
-});
+			const reactions = await this.noteReactionsRepository.find({
+				where: query,
+				take: ps.limit,
+				skip: ps.offset,
+				order: {
+					id: -1,
+				},
+				relations: ['user', 'user.avatar', 'user.banner', 'note'],
+			});
+
+			return await Promise.all(reactions.map(reaction => this.noteReactionEntityService.pack(reaction, me)));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/reactions/create.ts b/packages/backend/src/server/api/endpoints/notes/reactions/create.ts
index 07e52a9266..2af734307d 100644
--- a/packages/backend/src/server/api/endpoints/notes/reactions/create.ts
+++ b/packages/backend/src/server/api/endpoints/notes/reactions/create.ts
@@ -1,6 +1,7 @@
-import createReaction from '@/services/note/reaction/create.js';
-import define from '../../../define.js';
-import { getNote } from '../../../common/getters.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { ReactionService } from '@/core/ReactionService.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -41,15 +42,23 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	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 createReaction(user, note, ps.reaction).catch(e => {
-		if (e.id === '51c42bb4-931a-456b-bff7-e5a8a70dd298') throw new ApiError(meta.errors.alreadyReacted);
-		if (e.id === 'e70412a4-7197-4726-8e74-f3e0deb92aa7') throw new ApiError(meta.errors.youHaveBeenBlocked);
-		throw e;
-	});
-	return;
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private getterService: GetterService,
+		private reactionService: ReactionService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const note = await this.getterService.getNote(ps.noteId).catch(err => {
+				if (err.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
+			await this.reactionService.create(me, note, ps.reaction).catch(err => {
+				if (err.id === '51c42bb4-931a-456b-bff7-e5a8a70dd298') throw new ApiError(meta.errors.alreadyReacted);
+				if (err.id === 'e70412a4-7197-4726-8e74-f3e0deb92aa7') throw new ApiError(meta.errors.youHaveBeenBlocked);
+				throw err;
+			});
+			return;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/reactions/delete.ts b/packages/backend/src/server/api/endpoints/notes/reactions/delete.ts
index c13cafa21d..31ed962922 100644
--- a/packages/backend/src/server/api/endpoints/notes/reactions/delete.ts
+++ b/packages/backend/src/server/api/endpoints/notes/reactions/delete.ts
@@ -1,7 +1,8 @@
 import ms from 'ms';
-import deleteReaction from '@/services/note/reaction/delete.js';
-import define from '../../../define.js';
-import { getNote } from '../../../common/getters.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { ReactionService } from '@/core/ReactionService.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -41,13 +42,21 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	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 deleteReaction(user, note).catch(e => {
-		if (e.id === '60527ec9-b4cb-4a88-a6bd-32d3ad26817d') throw new ApiError(meta.errors.notReacted);
-		throw e;
-	});
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private getterService: GetterService,
+		private reactionService: ReactionService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const note = await this.getterService.getNote(ps.noteId).catch(err => {
+				if (err.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
+			await this.reactionService.delete(me, note).catch(err => {
+				if (err.id === '60527ec9-b4cb-4a88-a6bd-32d3ad26817d') throw new ApiError(meta.errors.notReacted);
+				throw err;
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/renotes.ts b/packages/backend/src/server/api/endpoints/notes/renotes.ts
index 28be360763..57b7aeae0d 100644
--- a/packages/backend/src/server/api/endpoints/notes/renotes.ts
+++ b/packages/backend/src/server/api/endpoints/notes/renotes.ts
@@ -1,11 +1,11 @@
-import { Notes } from '@/models/index.js';
-import define from '../../define.js';
-import { getNote } from '../../common/getters.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { generateVisibilityQuery } from '../../common/generate-visibility-query.js';
-import { generateMutedUserQuery } from '../../common/generate-muted-user-query.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
-import { generateBlockedUserQuery } from '../../common/generate-block-query.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -43,31 +43,43 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const note = await getNote(ps.noteId).catch(e => {
-		if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
-		throw e;
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
 
-	const query = makePaginationQuery(Notes.createQueryBuilder('note'), ps.sinceId, ps.untilId)
-		.andWhere('note.renoteId = :renoteId', { renoteId: note.id })
-		.innerJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const note = await this.getterService.getNote(ps.noteId).catch(err => {
+				if (err.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
 
-	generateVisibilityQuery(query, user);
-	if (user) generateMutedUserQuery(query, user);
-	if (user) generateBlockedUserQuery(query, user);
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), ps.sinceId, ps.untilId)
+				.andWhere('note.renoteId = :renoteId', { renoteId: note.id })
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
 
-	const renotes = await query.take(ps.limit).getMany();
+			this.queryService.generateVisibilityQuery(query, me);
+			if (me) this.queryService.generateMutedUserQuery(query, me);
+			if (me) this.queryService.generateBlockedUserQuery(query, me);
 
-	return await Notes.packMany(renotes, user);
-});
+			const renotes = await query.take(ps.limit).getMany();
+
+			return await this.noteEntityService.packMany(renotes, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/replies.ts b/packages/backend/src/server/api/endpoints/notes/replies.ts
index ab0018f58e..7020d0c681 100644
--- a/packages/backend/src/server/api/endpoints/notes/replies.ts
+++ b/packages/backend/src/server/api/endpoints/notes/replies.ts
@@ -1,9 +1,9 @@
-import { Notes } from '@/models/index.js';
-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 { generateBlockedUserQuery } from '../../common/generate-block-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -33,26 +33,37 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = makePaginationQuery(Notes.createQueryBuilder('note'), ps.sinceId, ps.untilId)
-		.andWhere('note.replyId = :replyId', { replyId: ps.noteId })
-		.innerJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
-
-	generateVisibilityQuery(query, user);
-	if (user) generateMutedUserQuery(query, user);
-	if (user) generateBlockedUserQuery(query, user);
-
-	const timeline = await query.take(ps.limit).getMany();
-
-	return await Notes.packMany(timeline, user);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), ps.sinceId, ps.untilId)
+				.andWhere('note.replyId = :replyId', { replyId: ps.noteId })
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
+
+			this.queryService.generateVisibilityQuery(query, me);
+			if (me) this.queryService.generateMutedUserQuery(query, me);
+			if (me) this.queryService.generateBlockedUserQuery(query, me);
+
+			const timeline = await query.take(ps.limit).getMany();
+
+			return await this.noteEntityService.packMany(timeline, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/search-by-tag.ts b/packages/backend/src/server/api/endpoints/notes/search-by-tag.ts
index 777de7221c..0727c9af6c 100644
--- a/packages/backend/src/server/api/endpoints/notes/search-by-tag.ts
+++ b/packages/backend/src/server/api/endpoints/notes/search-by-tag.ts
@@ -1,12 +1,12 @@
 import { Brackets } from 'typeorm';
-import { Notes } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository } from '@/models/index.js';
 import { safeForSql } from '@/misc/safe-for-sql.js';
 import { normalizeForSearch } from '@/misc/normalize-for-search.js';
-import define from '../../define.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
-import { generateMutedUserQuery } from '../../common/generate-muted-user-query.js';
-import { generateVisibilityQuery } from '../../common/generate-visibility-query.js';
-import { generateBlockedUserQuery } from '../../common/generate-block-query.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['notes', 'hashtags'],
@@ -66,75 +66,86 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = makePaginationQuery(Notes.createQueryBuilder('note'), ps.sinceId, ps.untilId)
-		.innerJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
 
-	generateVisibilityQuery(query, me);
-	if (me) generateMutedUserQuery(query, me);
-	if (me) generateBlockedUserQuery(query, me);
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), ps.sinceId, ps.untilId)
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
 
-	try {
-		if (ps.tag) {
-			if (!safeForSql(ps.tag)) throw 'Injection';
-			query.andWhere(`'{"${normalizeForSearch(ps.tag)}"}' <@ note.tags`);
-		} else {
-			query.andWhere(new Brackets(qb => {
-				for (const tags of ps.query!) {
-					qb.orWhere(new Brackets(qb => {
-						for (const tag of tags) {
-							if (!safeForSql(tag)) throw 'Injection';
-							qb.andWhere(`'{"${normalizeForSearch(tag)}"}' <@ note.tags`);
+			this.queryService.generateVisibilityQuery(query, me);
+			if (me) this.queryService.generateMutedUserQuery(query, me);
+			if (me) this.queryService.generateBlockedUserQuery(query, me);
+
+			try {
+				if (ps.tag) {
+					if (!safeForSql(ps.tag)) throw 'Injection';
+					query.andWhere(`'{"${normalizeForSearch(ps.tag)}"}' <@ note.tags`);
+				} else {
+					query.andWhere(new Brackets(qb => {
+						for (const tags of ps.query!) {
+							qb.orWhere(new Brackets(qb => {
+								for (const tag of tags) {
+									if (!safeForSql(tag)) throw 'Injection';
+									qb.andWhere(`'{"${normalizeForSearch(tag)}"}' <@ note.tags`);
+								}
+							}));
 						}
 					}));
 				}
-			}));
-		}
-	} catch (e) {
-		if (e === 'Injection') return [];
-		throw e;
-	}
+			} catch (e) {
+				if (e === 'Injection') return [];
+				throw e;
+			}
 
-	if (ps.reply != null) {
-		if (ps.reply) {
-			query.andWhere('note.replyId IS NOT NULL');
-		} else {
-			query.andWhere('note.replyId IS NULL');
-		}
-	}
+			if (ps.reply != null) {
+				if (ps.reply) {
+					query.andWhere('note.replyId IS NOT NULL');
+				} else {
+					query.andWhere('note.replyId IS NULL');
+				}
+			}
 
-	if (ps.renote != null) {
-		if (ps.renote) {
-			query.andWhere('note.renoteId IS NOT NULL');
-		} else {
-			query.andWhere('note.renoteId IS NULL');
-		}
-	}
+			if (ps.renote != null) {
+				if (ps.renote) {
+					query.andWhere('note.renoteId IS NOT NULL');
+				} else {
+					query.andWhere('note.renoteId IS NULL');
+				}
+			}
 
-	if (ps.withFiles) {
-		query.andWhere('note.fileIds != \'{}\'');
-	}
+			if (ps.withFiles) {
+				query.andWhere('note.fileIds != \'{}\'');
+			}
 
-	if (ps.poll != null) {
-		if (ps.poll) {
-			query.andWhere('note.hasPoll = TRUE');
-		} else {
-			query.andWhere('note.hasPoll = FALSE');
-		}
-	}
+			if (ps.poll != null) {
+				if (ps.poll) {
+					query.andWhere('note.hasPoll = TRUE');
+				} else {
+					query.andWhere('note.hasPoll = FALSE');
+				}
+			}
 
-	// Search notes
-	const notes = await query.take(ps.limit).getMany();
+			// Search notes
+			const notes = await query.take(ps.limit).getMany();
 
-	return await Notes.packMany(notes, me);
-});
+			return await this.noteEntityService.packMany(notes, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/search.ts b/packages/backend/src/server/api/endpoints/notes/search.ts
index 4e2cdae801..484cfc1128 100644
--- a/packages/backend/src/server/api/endpoints/notes/search.ts
+++ b/packages/backend/src/server/api/endpoints/notes/search.ts
@@ -1,12 +1,11 @@
 import { In } from 'typeorm';
-import { Notes } from '@/models/index.js';
-import config from '@/config/index.js';
-import es from '../../../../db/elasticsearch.js';
-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 { generateBlockedUserQuery } from '../../common/generate-block-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { Config } from '@/config.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -46,97 +45,51 @@ export const paramDef = {
 	required: ['query'],
 } as const;
 
-// eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	if (es == null) {
-		const query = makePaginationQuery(Notes.createQueryBuilder('note'), ps.sinceId, ps.untilId);
-
-		if (ps.userId) {
-			query.andWhere('note.userId = :userId', { userId: ps.userId });
-		} else if (ps.channelId) {
-			query.andWhere('note.channelId = :channelId', { channelId: ps.channelId });
-		}
-
-		query
-			.andWhere('note.text ILIKE :q', { q: `%${ps.query}%` })
-			.innerJoinAndSelect('note.user', 'user')
-			.leftJoinAndSelect('user.avatar', 'avatar')
-			.leftJoinAndSelect('user.banner', 'banner')
-			.leftJoinAndSelect('note.reply', 'reply')
-			.leftJoinAndSelect('note.renote', 'renote')
-			.leftJoinAndSelect('reply.user', 'replyUser')
-			.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-			.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-			.leftJoinAndSelect('renote.user', 'renoteUser')
-			.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-			.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
-
-		generateVisibilityQuery(query, me);
-		if (me) generateMutedUserQuery(query, me);
-		if (me) generateBlockedUserQuery(query, me);
-
-		const notes = await query.take(ps.limit).getMany();
-
-		return await Notes.packMany(notes, me);
-	} else {
-		const userQuery = ps.userId != null ? [{
-			term: {
-				userId: ps.userId,
-			},
-		}] : [];
-
-		const hostQuery = ps.userId == null ?
-			ps.host === null ? [{
-				bool: {
-					must_not: {
-						exists: {
-							field: 'userHost',
-						},
-					},
-				},
-			}] : ps.host !== undefined ? [{
-				term: {
-					userHost: ps.host,
-				},
-			}] : []
-			: [];
+// TODO: ロジックをサービスに切り出す
 
-		const result = await es.search({
-			index: config.elasticsearch.index || 'misskey_note',
-			body: {
-				size: ps.limit,
-				from: ps.offset,
-				query: {
-					bool: {
-						must: [{
-							simple_query_string: {
-								fields: ['text'],
-								query: ps.query.toLowerCase(),
-								default_operator: 'and',
-							},
-						}, ...hostQuery, ...userQuery],
-					},
-				},
-				sort: [{
-					_doc: 'desc',
-				}],
-			},
-		});
-
-		const hits = result.body.hits.hits.map((hit: any) => hit._id);
-
-		if (hits.length === 0) return [];
-
-		// Fetch found notes
-		const notes = await Notes.find({
-			where: {
-				id: In(hits),
-			},
-			order: {
-				id: -1,
-			},
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+	
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), ps.sinceId, ps.untilId);
+
+			if (ps.userId) {
+				query.andWhere('note.userId = :userId', { userId: ps.userId });
+			} else if (ps.channelId) {
+				query.andWhere('note.channelId = :channelId', { channelId: ps.channelId });
+			}
+
+			query
+				.andWhere('note.text ILIKE :q', { q: `%${ps.query}%` })
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
+
+			this.queryService.generateVisibilityQuery(query, me);
+			if (me) this.queryService.generateMutedUserQuery(query, me);
+			if (me) this.queryService.generateBlockedUserQuery(query, me);
+
+			const notes = await query.take(ps.limit).getMany();
+
+			return await this.noteEntityService.packMany(notes, me);
 		});
-
-		return await Notes.packMany(notes, me);
 	}
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/show.ts b/packages/backend/src/server/api/endpoints/notes/show.ts
index 5cd74bd2ca..c3f5b9dfb0 100644
--- a/packages/backend/src/server/api/endpoints/notes/show.ts
+++ b/packages/backend/src/server/api/endpoints/notes/show.ts
@@ -1,7 +1,10 @@
-import { Notes } from '@/models/index.js';
-import define from '../../define.js';
-import { getNote } from '../../common/getters.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -32,13 +35,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const note = await getNote(ps.noteId).catch(e => {
-		if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
-		throw e;
-	});
-
-	return await Notes.pack(note, user, {
-		detail: true,
-	});
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		private noteEntityService: NoteEntityService,
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const note = await this.getterService.getNote(ps.noteId).catch(err => {
+				if (err.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
+
+			return await this.noteEntityService.pack(note, me, {
+				detail: true,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/state.ts b/packages/backend/src/server/api/endpoints/notes/state.ts
index 01afa5add2..7756d39f7c 100644
--- a/packages/backend/src/server/api/endpoints/notes/state.ts
+++ b/packages/backend/src/server/api/endpoints/notes/state.ts
@@ -1,5 +1,7 @@
-import { NoteFavorites, Notes, NoteThreadMutings, NoteWatchings } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository, NoteThreadMutingsRepository, NoteFavoritesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -35,36 +37,42 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const note = await Notes.findOneByOrFail({ id: ps.noteId });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
 
-	const [favorite, watching, threadMuting] = await Promise.all([
-		NoteFavorites.count({
-			where: {
-				userId: user.id,
-				noteId: note.id,
-			},
-			take: 1,
-		}),
-		NoteWatchings.count({
-			where: {
-				userId: user.id,
-				noteId: note.id,
-			},
-			take: 1,
-		}),
-		NoteThreadMutings.count({
-			where: {
-				userId: user.id,
-				threadId: note.threadId || note.id,
-			},
-			take: 1,
-		}),
-	]);
+		@Inject(DI.noteThreadMutingsRepository)
+		private noteThreadMutingsRepository: NoteThreadMutingsRepository,
+
+		@Inject(DI.noteFavoritesRepository)
+		private noteFavoritesRepository: NoteFavoritesRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const note = await this.notesRepository.findOneByOrFail({ id: ps.noteId });
+
+			const [favorite, threadMuting] = await Promise.all([
+				this.noteFavoritesRepository.count({
+					where: {
+						userId: me.id,
+						noteId: note.id,
+					},
+					take: 1,
+				}),
+				this.noteThreadMutingsRepository.count({
+					where: {
+						userId: me.id,
+						threadId: note.threadId || note.id,
+					},
+					take: 1,
+				}),
+			]);
 
-	return {
-		isFavorited: favorite !== 0,
-		isWatching: watching !== 0,
-		isMutedThread: threadMuting !== 0,
-	};
-});
+			return {
+				isFavorited: favorite !== 0,
+				isMutedThread: threadMuting !== 0,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/thread-muting/create.ts b/packages/backend/src/server/api/endpoints/notes/thread-muting/create.ts
index cf360526d3..1c83adddff 100644
--- a/packages/backend/src/server/api/endpoints/notes/thread-muting/create.ts
+++ b/packages/backend/src/server/api/endpoints/notes/thread-muting/create.ts
@@ -1,8 +1,10 @@
-import { Notes, NoteThreadMutings } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import readNote from '@/services/note/read.js';
-import define from '../../../define.js';
-import { getNote } from '../../../common/getters.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository, NoteThreadMutingsRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { NoteReadService } from '@/core/NoteReadService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -30,26 +32,41 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const note = await getNote(ps.noteId).catch(e => {
-		if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
-		throw e;
-	});
-
-	const mutedNotes = await Notes.find({
-		where: [{
-			id: note.threadId || note.id,
-		}, {
-			threadId: note.threadId || note.id,
-		}],
-	});
-
-	await readNote(user.id, mutedNotes);
-
-	await NoteThreadMutings.insert({
-		id: genId(),
-		createdAt: new Date(),
-		threadId: note.threadId || note.id,
-		userId: user.id,
-	});
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.noteThreadMutingsRepository)
+		private noteThreadMutingsRepository: NoteThreadMutingsRepository,
+
+		private getterService: GetterService,
+		private noteReadService: NoteReadService,
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const note = await this.getterService.getNote(ps.noteId).catch(err => {
+				if (err.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
+
+			const mutedNotes = await this.notesRepository.find({
+				where: [{
+					id: note.threadId || note.id,
+				}, {
+					threadId: note.threadId || note.id,
+				}],
+			});
+
+			await this.noteReadService.read(me.id, mutedNotes);
+
+			await this.noteThreadMutingsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				threadId: note.threadId || note.id,
+				userId: me.id,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/thread-muting/delete.ts b/packages/backend/src/server/api/endpoints/notes/thread-muting/delete.ts
index ac310d0fe6..1f896734d1 100644
--- a/packages/backend/src/server/api/endpoints/notes/thread-muting/delete.ts
+++ b/packages/backend/src/server/api/endpoints/notes/thread-muting/delete.ts
@@ -1,6 +1,8 @@
-import { NoteThreadMutings } from '@/models/index.js';
-import define from '../../../define.js';
-import { getNote } from '../../../common/getters.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NoteThreadMutingsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -28,14 +30,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	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 NoteThreadMutings.delete({
-		threadId: note.threadId || note.id,
-		userId: user.id,
-	});
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.noteThreadMutingsRepository)
+		private noteThreadMutingsRepository: NoteThreadMutingsRepository,
+
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const note = await this.getterService.getNote(ps.noteId).catch(err => {
+				if (err.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
+
+			await this.noteThreadMutingsRepository.delete({
+				threadId: note.threadId || note.id,
+				userId: me.id,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/timeline.ts b/packages/backend/src/server/api/endpoints/notes/timeline.ts
index 22f4925175..53a1ae1348 100644
--- a/packages/backend/src/server/api/endpoints/notes/timeline.ts
+++ b/packages/backend/src/server/api/endpoints/notes/timeline.ts
@@ -1,14 +1,12 @@
 import { Brackets } from 'typeorm';
-import { Notes, Followings } from '@/models/index.js';
-import { activeUsersChart } from '@/services/chart/index.js';
-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 { generateRepliesQuery } from '../../common/generate-replies-query.js';
-import { generateMutedNoteQuery } from '../../common/generate-muted-note-query.js';
-import { generateChannelQuery } from '../../common/generate-channel-query.js';
-import { generateBlockedUserQuery } from '../../common/generate-block-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository, FollowingsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import ActiveUsersChart from '@/core/chart/charts/active-users.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { MetaService } from '@/core/MetaService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -47,85 +45,100 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const hasFollowing = (await Followings.count({
-		where: {
-			followerId: user.id,
-		},
-		take: 1,
-	})) !== 0;
-
-	//#region Construct query
-	const followingQuery = Followings.createQueryBuilder('following')
-		.select('following.followeeId')
-		.where('following.followerId = :followerId', { followerId: user.id });
-
-	const query = makePaginationQuery(Notes.createQueryBuilder('note'),
-		ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
-		.andWhere(new Brackets(qb => { qb
-			.where('note.userId = :meId', { meId: user.id });
-		if (hasFollowing) qb.orWhere(`note.userId IN (${ followingQuery.getQuery() })`);
-		}))
-		.innerJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner')
-		.setParameters(followingQuery.getParameters());
-
-	generateChannelQuery(query, user);
-	generateRepliesQuery(query, user);
-	generateVisibilityQuery(query, user);
-	generateMutedUserQuery(query, user);
-	generateMutedNoteQuery(query, user);
-	generateBlockedUserQuery(query, user);
-
-	if (ps.includeMyRenotes === false) {
-		query.andWhere(new Brackets(qb => {
-			qb.orWhere('note.userId != :meId', { meId: user.id });
-			qb.orWhere('note.renoteId IS NULL');
-			qb.orWhere('note.text IS NOT NULL');
-			qb.orWhere('note.fileIds != \'{}\'');
-			qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
-		}));
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
 
-	if (ps.includeRenotedMyNotes === false) {
-		query.andWhere(new Brackets(qb => {
-			qb.orWhere('note.renoteUserId != :meId', { meId: user.id });
-			qb.orWhere('note.renoteId IS NULL');
-			qb.orWhere('note.text IS NOT NULL');
-			qb.orWhere('note.fileIds != \'{}\'');
-			qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
-		}));
-	}
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
 
-	if (ps.includeLocalRenotes === false) {
-		query.andWhere(new Brackets(qb => {
-			qb.orWhere('note.renoteUserHost IS NOT NULL');
-			qb.orWhere('note.renoteId IS NULL');
-			qb.orWhere('note.text IS NOT NULL');
-			qb.orWhere('note.fileIds != \'{}\'');
-			qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
-		}));
-	}
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+		private activeUsersChart: ActiveUsersChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const hasFollowing = (await this.followingsRepository.count({
+				where: {
+					followerId: me.id,
+				},
+				take: 1,
+			})) !== 0;
 
-	if (ps.withFiles) {
-		query.andWhere('note.fileIds != \'{}\'');
-	}
-	//#endregion
+			//#region Construct query
+			const followingQuery = this.followingsRepository.createQueryBuilder('following')
+				.select('following.followeeId')
+				.where('following.followerId = :followerId', { followerId: me.id });
+
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'),
+				ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
+				.andWhere(new Brackets(qb => { qb
+					.where('note.userId = :meId', { meId: me.id });
+				if (hasFollowing) qb.orWhere(`note.userId IN (${ followingQuery.getQuery() })`);
+				}))
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner')
+				.setParameters(followingQuery.getParameters());
 
-	const timeline = await query.take(ps.limit).getMany();
+			this.queryService.generateChannelQuery(query, me);
+			this.queryService.generateRepliesQuery(query, me);
+			this.queryService.generateVisibilityQuery(query, me);
+			this.queryService.generateMutedUserQuery(query, me);
+			this.queryService.generateMutedNoteQuery(query, me);
+			this.queryService.generateBlockedUserQuery(query, me);
 
-	process.nextTick(() => {
-		activeUsersChart.read(user);
-	});
+			if (ps.includeMyRenotes === false) {
+				query.andWhere(new Brackets(qb => {
+					qb.orWhere('note.userId != :meId', { meId: me.id });
+					qb.orWhere('note.renoteId IS NULL');
+					qb.orWhere('note.text IS NOT NULL');
+					qb.orWhere('note.fileIds != \'{}\'');
+					qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
+				}));
+			}
 
-	return await Notes.packMany(timeline, user);
-});
+			if (ps.includeRenotedMyNotes === false) {
+				query.andWhere(new Brackets(qb => {
+					qb.orWhere('note.renoteUserId != :meId', { meId: me.id });
+					qb.orWhere('note.renoteId IS NULL');
+					qb.orWhere('note.text IS NOT NULL');
+					qb.orWhere('note.fileIds != \'{}\'');
+					qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
+				}));
+			}
+
+			if (ps.includeLocalRenotes === false) {
+				query.andWhere(new Brackets(qb => {
+					qb.orWhere('note.renoteUserHost IS NOT NULL');
+					qb.orWhere('note.renoteId IS NULL');
+					qb.orWhere('note.text IS NOT NULL');
+					qb.orWhere('note.fileIds != \'{}\'');
+					qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
+				}));
+			}
+
+			if (ps.withFiles) {
+				query.andWhere('note.fileIds != \'{}\'');
+			}
+			//#endregion
+
+			const timeline = await query.take(ps.limit).getMany();
+
+			process.nextTick(() => {
+				this.activeUsersChart.read(me);
+			});
+
+			return await this.noteEntityService.packMany(timeline, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/translate.ts b/packages/backend/src/server/api/endpoints/notes/translate.ts
index 5e40e7106f..c24f1e401e 100644
--- a/packages/backend/src/server/api/endpoints/notes/translate.ts
+++ b/packages/backend/src/server/api/endpoints/notes/translate.ts
@@ -1,12 +1,15 @@
 import { URLSearchParams } from 'node:url';
 import fetch from 'node-fetch';
-import config from '@/config/index.js';
-import { getAgentByUrl } from '@/misc/fetch.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Notes } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { Config } from '@/config.js';
+import { DI } from '@/di-symbols.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { MetaService } from '@/core/MetaService.js';
+import { HttpRequestService } from '@/core/HttpRequestService.js';
 import { ApiError } from '../../error.js';
-import { getNote } from '../../common/getters.js';
-import define from '../../define.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -37,58 +40,74 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const note = await getNote(ps.noteId).catch(e => {
-		if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
-		throw e;
-	});
-
-	if (!(await Notes.isVisibleForMe(note, user ? user.id : null))) {
-		return 204; // TODO: 良い感じのエラー返す
-	}
-
-	if (note.text == null) {
-		return 204;
-	}
-
-	const instance = await fetchMeta();
-
-	if (instance.deeplAuthKey == null) {
-		return 204; // TODO: 良い感じのエラー返す
-	}
-
-	let targetLang = ps.targetLang;
-	if (targetLang.includes('-')) targetLang = targetLang.split('-')[0];
-
-	const params = new URLSearchParams();
-	params.append('auth_key', instance.deeplAuthKey);
-	params.append('text', note.text);
-	params.append('target_lang', targetLang);
-
-	const endpoint = instance.deeplIsPro ? 'https://api.deepl.com/v2/translate' : 'https://api-free.deepl.com/v2/translate';
-
-	const res = await fetch(endpoint, {
-		method: 'POST',
-		headers: {
-			'Content-Type': 'application/x-www-form-urlencoded',
-			'User-Agent': config.userAgent,
-			Accept: 'application/json, */*',
-		},
-		body: params,
-		// TODO
-		//timeout: 10000,
-		agent: getAgentByUrl,
-	});
-
-	const json = (await res.json()) as {
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+	
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		private noteEntityService: NoteEntityService,
+		private getterService: GetterService,
+		private metaService: MetaService,
+		private httpRequestService: HttpRequestService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const note = await this.getterService.getNote(ps.noteId).catch(err => {
+				if (err.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
+
+			if (!(await this.noteEntityService.isVisibleForMe(note, me ? me.id : null))) {
+				return 204; // TODO: 良い感じのエラー返す
+			}
+
+			if (note.text == null) {
+				return 204;
+			}
+
+			const instance = await this.metaService.fetch();
+
+			if (instance.deeplAuthKey == null) {
+				return 204; // TODO: 良い感じのエラー返す
+			}
+
+			let targetLang = ps.targetLang;
+			if (targetLang.includes('-')) targetLang = targetLang.split('-')[0];
+
+			const params = new URLSearchParams();
+			params.append('auth_key', instance.deeplAuthKey);
+			params.append('text', note.text);
+			params.append('target_lang', targetLang);
+
+			const endpoint = instance.deeplIsPro ? 'https://api.deepl.com/v2/translate' : 'https://api-free.deepl.com/v2/translate';
+
+			const res = await fetch(endpoint, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/x-www-form-urlencoded',
+					'User-Agent': config.userAgent,
+					Accept: 'application/json, */*',
+				},
+				body: params,
+				// TODO
+				//timeout: 10000,
+				agent: (url) => this.httpRequestService.getAgentByUrl(url),
+			});
+
+			const json = (await res.json()) as {
 		translations: {
 			detected_source_language: string;
 			text: string;
 		}[];
 	};
 
-	return {
-		sourceLang: json.translations[0].detected_source_language,
-		text: json.translations[0].text,
-	};
-});
+			return {
+				sourceLang: json.translations[0].detected_source_language,
+				text: json.translations[0].text,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/unrenote.ts b/packages/backend/src/server/api/endpoints/notes/unrenote.ts
index 3fba0efe0c..c0048888b4 100644
--- a/packages/backend/src/server/api/endpoints/notes/unrenote.ts
+++ b/packages/backend/src/server/api/endpoints/notes/unrenote.ts
@@ -1,9 +1,11 @@
 import ms from 'ms';
-import deleteNote from '@/services/note/delete.js';
-import { Notes, Users } from '@/models/index.js';
-import define from '../../define.js';
-import { getNote } from '../../common/getters.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository, NotesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { NoteDeleteService } from '@/core/NoteDeleteService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -36,18 +38,32 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const note = await getNote(ps.noteId).catch(e => {
-		if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
-		throw e;
-	});
-
-	const renotes = await Notes.findBy({
-		userId: user.id,
-		renoteId: note.id,
-	});
-
-	for (const note of renotes) {
-		deleteNote(await Users.findOneByOrFail({ id: user.id }), note);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		private getterService: GetterService,
+		private noteDeleteService: NoteDeleteService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const note = await this.getterService.getNote(ps.noteId).catch(err => {
+				if (err.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
+
+			const renotes = await this.notesRepository.findBy({
+				userId: me.id,
+				renoteId: note.id,
+			});
+
+			for (const note of renotes) {
+				this.noteDeleteService.delete(await this.usersRepository.findOneByOrFail({ id: me.id }), note);
+			}
+		});
 	}
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/user-list-timeline.ts b/packages/backend/src/server/api/endpoints/notes/user-list-timeline.ts
index e603a8f625..87a464578c 100644
--- a/packages/backend/src/server/api/endpoints/notes/user-list-timeline.ts
+++ b/packages/backend/src/server/api/endpoints/notes/user-list-timeline.ts
@@ -1,10 +1,12 @@
 import { Brackets } from 'typeorm';
-import { UserLists, UserListJoinings, Notes } from '@/models/index.js';
-import { activeUsersChart } from '@/services/chart/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository, UserListsRepository, UserListJoiningsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import ActiveUsersChart from '@/core/chart/charts/active-users.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
-import { generateVisibilityQuery } from '../../common/generate-visibility-query.js';
 
 export const meta = {
 	tags: ['notes', 'lists'],
@@ -52,72 +54,90 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const list = await UserLists.findOneBy({
-		id: ps.listId,
-		userId: user.id,
-	});
-
-	if (list == null) {
-		throw new ApiError(meta.errors.noSuchList);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.userListsRepository)
+		private userListsRepository: UserListsRepository,
+
+		@Inject(DI.userListJoiningsRepository)
+		private userListJoiningsRepository: UserListJoiningsRepository,
+
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+		private activeUsersChart: ActiveUsersChart,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const list = await this.userListsRepository.findOneBy({
+				id: ps.listId,
+				userId: me.id,
+			});
+
+			if (list == null) {
+				throw new ApiError(meta.errors.noSuchList);
+			}
+
+			//#region Construct query
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), ps.sinceId, ps.untilId)
+				.innerJoin(this.userListJoiningsRepository.metadata.targetName, 'userListJoining', 'userListJoining.userId = note.userId')
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner')
+				.andWhere('userListJoining.userListId = :userListId', { userListId: list.id });
+
+			this.queryService.generateVisibilityQuery(query, me);
+
+			if (ps.includeMyRenotes === false) {
+				query.andWhere(new Brackets(qb => {
+					qb.orWhere('note.userId != :meId', { meId: me.id });
+					qb.orWhere('note.renoteId IS NULL');
+					qb.orWhere('note.text IS NOT NULL');
+					qb.orWhere('note.fileIds != \'{}\'');
+					qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
+				}));
+			}
+
+			if (ps.includeRenotedMyNotes === false) {
+				query.andWhere(new Brackets(qb => {
+					qb.orWhere('note.renoteUserId != :meId', { meId: me.id });
+					qb.orWhere('note.renoteId IS NULL');
+					qb.orWhere('note.text IS NOT NULL');
+					qb.orWhere('note.fileIds != \'{}\'');
+					qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
+				}));
+			}
+
+			if (ps.includeLocalRenotes === false) {
+				query.andWhere(new Brackets(qb => {
+					qb.orWhere('note.renoteUserHost IS NOT NULL');
+					qb.orWhere('note.renoteId IS NULL');
+					qb.orWhere('note.text IS NOT NULL');
+					qb.orWhere('note.fileIds != \'{}\'');
+					qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
+				}));
+			}
+
+			if (ps.withFiles) {
+				query.andWhere('note.fileIds != \'{}\'');
+			}
+			//#endregion
+
+			const timeline = await query.take(ps.limit).getMany();
+
+			this.activeUsersChart.read(me);
+
+			return await this.noteEntityService.packMany(timeline, me);
+		});
 	}
-
-	//#region Construct query
-	const query = makePaginationQuery(Notes.createQueryBuilder('note'), ps.sinceId, ps.untilId)
-		.innerJoin(UserListJoinings.metadata.targetName, 'userListJoining', 'userListJoining.userId = note.userId')
-		.innerJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner')
-		.andWhere('userListJoining.userListId = :userListId', { userListId: list.id });
-
-	generateVisibilityQuery(query, user);
-
-	if (ps.includeMyRenotes === false) {
-		query.andWhere(new Brackets(qb => {
-			qb.orWhere('note.userId != :meId', { meId: user.id });
-			qb.orWhere('note.renoteId IS NULL');
-			qb.orWhere('note.text IS NOT NULL');
-			qb.orWhere('note.fileIds != \'{}\'');
-			qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
-		}));
-	}
-
-	if (ps.includeRenotedMyNotes === false) {
-		query.andWhere(new Brackets(qb => {
-			qb.orWhere('note.renoteUserId != :meId', { meId: user.id });
-			qb.orWhere('note.renoteId IS NULL');
-			qb.orWhere('note.text IS NOT NULL');
-			qb.orWhere('note.fileIds != \'{}\'');
-			qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
-		}));
-	}
-
-	if (ps.includeLocalRenotes === false) {
-		query.andWhere(new Brackets(qb => {
-			qb.orWhere('note.renoteUserHost IS NOT NULL');
-			qb.orWhere('note.renoteId IS NULL');
-			qb.orWhere('note.text IS NOT NULL');
-			qb.orWhere('note.fileIds != \'{}\'');
-			qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
-		}));
-	}
-
-	if (ps.withFiles) {
-		query.andWhere('note.fileIds != \'{}\'');
-	}
-	//#endregion
-
-	const timeline = await query.take(ps.limit).getMany();
-
-	activeUsersChart.read(user);
-
-	return await Notes.packMany(timeline, user);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/notes/watching/create.ts b/packages/backend/src/server/api/endpoints/notes/watching/create.ts
deleted file mode 100644
index 7d482b0732..0000000000
--- a/packages/backend/src/server/api/endpoints/notes/watching/create.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import watch from '@/services/note/watch.js';
-import define from '../../../define.js';
-import { getNote } from '../../../common/getters.js';
-import { ApiError } from '../../../error.js';
-
-export const meta = {
-	tags: ['notes'],
-
-	requireCredential: true,
-
-	kind: 'write:account',
-
-	errors: {
-		noSuchNote: {
-			message: 'No such note.',
-			code: 'NO_SUCH_NOTE',
-			id: 'ea0e37a6-90a3-4f58-ba6b-c328ca206fc7',
-		},
-	},
-} as const;
-
-export const paramDef = {
-	type: 'object',
-	properties: {
-		noteId: { type: 'string', format: 'misskey:id' },
-	},
-	required: ['noteId'],
-} as const;
-
-// eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	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 watch(user.id, note);
-});
diff --git a/packages/backend/src/server/api/endpoints/notes/watching/delete.ts b/packages/backend/src/server/api/endpoints/notes/watching/delete.ts
deleted file mode 100644
index 2c1a2e5fbd..0000000000
--- a/packages/backend/src/server/api/endpoints/notes/watching/delete.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import unwatch from '@/services/note/unwatch.js';
-import define from '../../../define.js';
-import { getNote } from '../../../common/getters.js';
-import { ApiError } from '../../../error.js';
-
-export const meta = {
-	tags: ['notes'],
-
-	requireCredential: true,
-
-	kind: 'write:account',
-
-	errors: {
-		noSuchNote: {
-			message: 'No such note.',
-			code: 'NO_SUCH_NOTE',
-			id: '09b3695c-f72c-4731-a428-7cff825fc82e',
-		},
-	},
-} as const;
-
-export const paramDef = {
-	type: 'object',
-	properties: {
-		noteId: { type: 'string', format: 'misskey:id' },
-	},
-	required: ['noteId'],
-} as const;
-
-// eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	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 unwatch(user.id, note);
-});
diff --git a/packages/backend/src/server/api/endpoints/notifications/create.ts b/packages/backend/src/server/api/endpoints/notifications/create.ts
index 80d513d8da..3427a3eb5c 100644
--- a/packages/backend/src/server/api/endpoints/notifications/create.ts
+++ b/packages/backend/src/server/api/endpoints/notifications/create.ts
@@ -1,5 +1,6 @@
-import { createNotification } from '@/services/create-notification.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { CreateNotificationService } from '@/core/CreateNotificationService.js';
 
 export const meta = {
 	tags: ['notifications'],
@@ -23,11 +24,18 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user, token) => {
-	createNotification(user.id, 'app', {
-		appAccessTokenId: token ? token.id : null,
-		customBody: ps.body,
-		customHeader: ps.header,
-		customIcon: ps.icon,
-	});
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private createNotificationService: CreateNotificationService,
+	) {
+		super(meta, paramDef, async (ps, user, token) => {
+			this.createNotificationService.createNotification(user.id, 'app', {
+				appAccessTokenId: token ? token.id : null,
+				customBody: ps.body,
+				customHeader: ps.header,
+				customIcon: ps.icon,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notifications/mark-all-as-read.ts b/packages/backend/src/server/api/endpoints/notifications/mark-all-as-read.ts
index d169afbb35..3d1eb2b39c 100644
--- a/packages/backend/src/server/api/endpoints/notifications/mark-all-as-read.ts
+++ b/packages/backend/src/server/api/endpoints/notifications/mark-all-as-read.ts
@@ -1,7 +1,9 @@
-import { publishMainStream } from '@/services/stream.js';
-import { pushNotification } from '@/services/push-notification.js';
-import { Notifications } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotificationsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { PushNotificationService } from '@/core/PushNotificationService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['notifications', 'account'],
@@ -18,16 +20,27 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Update documents
-	await Notifications.update({
-		notifieeId: user.id,
-		isRead: false,
-	}, {
-		isRead: true,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notificationsRepository)
+		private notificationsRepository: NotificationsRepository,
 
-	// 全ての通知を読みましたよというイベントを発行
-	publishMainStream(user.id, 'readAllNotifications');
-	pushNotification(user.id, 'readAllNotifications', undefined);
-});
+		private globalEventService: GlobalEventService,
+		private pushNotificationService: PushNotificationService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Update documents
+			await this.notificationsRepository.update({
+				notifieeId: me.id,
+				isRead: false,
+			}, {
+				isRead: true,
+			});
+
+			// 全ての通知を読みましたよというイベントを発行
+			this.globalEventService.publishMainStream(me.id, 'readAllNotifications');
+			this.pushNotificationService.pushNotification(me.id, 'readAllNotifications', undefined);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/notifications/read.ts b/packages/backend/src/server/api/endpoints/notifications/read.ts
index 7bce525a55..cdf8d09f9e 100644
--- a/packages/backend/src/server/api/endpoints/notifications/read.ts
+++ b/packages/backend/src/server/api/endpoints/notifications/read.ts
@@ -1,5 +1,6 @@
-import define from '../../define.js';
-import { readNotification } from '../../common/read-notification.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { NotificationService } from '@/core/NotificationService.js';
 
 export const meta = {
 	tags: ['notifications', 'account'],
@@ -43,7 +44,14 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	if ('notificationId' in ps) return readNotification(user.id, [ps.notificationId]);
-	return readNotification(user.id, ps.notificationIds);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		private notificationService: NotificationService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			if ('notificationId' in ps) return this.notificationService.readNotification(me.id, [ps.notificationId]);
+			return this.notificationService.readNotification(me.id, ps.notificationIds);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/page-push.ts b/packages/backend/src/server/api/endpoints/page-push.ts
index 6dd3ede85a..1b0299c3c6 100644
--- a/packages/backend/src/server/api/endpoints/page-push.ts
+++ b/packages/backend/src/server/api/endpoints/page-push.ts
@@ -1,6 +1,10 @@
-import { publishMainStream } from '@/services/stream.js';
-import { Users, Pages } from '@/models/index.js';
-import define from '../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { PagesRepository } from '@/models/index.js';
+import type { UsersRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../error.js';
 
 export const meta = {
@@ -27,19 +31,30 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const page = await Pages.findOneBy({ id: ps.pageId });
-	if (page == null) {
-		throw new ApiError(meta.errors.noSuchPage);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.pagesRepository)
+		private pagesRepository: PagesRepository,
+
+		private userEntityService: UserEntityService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const page = await this.pagesRepository.findOneBy({ id: ps.pageId });
+			if (page == null) {
+				throw new ApiError(meta.errors.noSuchPage);
+			}
 
-	publishMainStream(page.userId, 'pageEvent', {
-		pageId: ps.pageId,
-		event: ps.event,
-		var: ps.var,
-		userId: user.id,
-		user: await Users.pack(user.id, { id: page.userId }, {
-			detail: true,
-		}),
-	});
-});
+			this.globalEventService.publishMainStream(page.userId, 'pageEvent', {
+				pageId: ps.pageId,
+				event: ps.event,
+				var: ps.var,
+				userId: me.id,
+				user: await this.userEntityService.pack(me.id, { id: page.userId }, {
+					detail: true,
+				}),
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/pages/create.ts b/packages/backend/src/server/api/endpoints/pages/create.ts
index b008cde84e..ac80849aa0 100644
--- a/packages/backend/src/server/api/endpoints/pages/create.ts
+++ b/packages/backend/src/server/api/endpoints/pages/create.ts
@@ -1,8 +1,11 @@
 import ms from 'ms';
-import { Pages, DriveFiles } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { Page } from '@/models/entities/page.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DriveFilesRepository, PagesRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { Page } from '@/models/entities/Page.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { PageEntityService } from '@/core/entities/PageEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
 
 export const meta = {
@@ -59,45 +62,59 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	let eyeCatchingImage = null;
-	if (ps.eyeCatchingImageId != null) {
-		eyeCatchingImage = await DriveFiles.findOneBy({
-			id: ps.eyeCatchingImageId,
-			userId: user.id,
-		});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.pagesRepository)
+		private pagesRepository: PagesRepository,
 
-		if (eyeCatchingImage == null) {
-			throw new ApiError(meta.errors.noSuchFile);
-		}
-	}
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private pageEntityService: PageEntityService,
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			let eyeCatchingImage = null;
+			if (ps.eyeCatchingImageId != null) {
+				eyeCatchingImage = await this.driveFilesRepository.findOneBy({
+					id: ps.eyeCatchingImageId,
+					userId: me.id,
+				});
 
-	await Pages.findBy({
-		userId: user.id,
-		name: ps.name,
-	}).then(result => {
-		if (result.length > 0) {
-			throw new ApiError(meta.errors.nameAlreadyExists);
-		}
-	});
+				if (eyeCatchingImage == null) {
+					throw new ApiError(meta.errors.noSuchFile);
+				}
+			}
 
-	const page = await Pages.insert(new Page({
-		id: genId(),
-		createdAt: new Date(),
-		updatedAt: new Date(),
-		title: ps.title,
-		name: ps.name,
-		summary: ps.summary,
-		content: ps.content,
-		variables: ps.variables,
-		script: ps.script,
-		eyeCatchingImageId: eyeCatchingImage ? eyeCatchingImage.id : null,
-		userId: user.id,
-		visibility: 'public',
-		alignCenter: ps.alignCenter,
-		hideTitleWhenPinned: ps.hideTitleWhenPinned,
-		font: ps.font,
-	})).then(x => Pages.findOneByOrFail(x.identifiers[0]));
+			await this.pagesRepository.findBy({
+				userId: me.id,
+				name: ps.name,
+			}).then(result => {
+				if (result.length > 0) {
+					throw new ApiError(meta.errors.nameAlreadyExists);
+				}
+			});
 
-	return await Pages.pack(page);
-});
+			const page = await this.pagesRepository.insert(new Page({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				updatedAt: new Date(),
+				title: ps.title,
+				name: ps.name,
+				summary: ps.summary,
+				content: ps.content,
+				variables: ps.variables,
+				script: ps.script,
+				eyeCatchingImageId: eyeCatchingImage ? eyeCatchingImage.id : null,
+				userId: me.id,
+				visibility: 'public',
+				alignCenter: ps.alignCenter,
+				hideTitleWhenPinned: ps.hideTitleWhenPinned,
+				font: ps.font,
+			})).then(x => this.pagesRepository.findOneByOrFail(x.identifiers[0]));
+
+			return await this.pageEntityService.pack(page);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/pages/delete.ts b/packages/backend/src/server/api/endpoints/pages/delete.ts
index a7708e6585..4e97755761 100644
--- a/packages/backend/src/server/api/endpoints/pages/delete.ts
+++ b/packages/backend/src/server/api/endpoints/pages/delete.ts
@@ -1,5 +1,7 @@
-import { Pages } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { PagesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
 
 export const meta = {
@@ -33,14 +35,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const page = await Pages.findOneBy({ id: ps.pageId });
-	if (page == null) {
-		throw new ApiError(meta.errors.noSuchPage);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.pagesRepository)
+		private pagesRepository: PagesRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const page = await this.pagesRepository.findOneBy({ id: ps.pageId });
+			if (page == null) {
+				throw new ApiError(meta.errors.noSuchPage);
+			}
+			if (page.userId !== me.id) {
+				throw new ApiError(meta.errors.accessDenied);
+			}
+
+			await this.pagesRepository.delete(page.id);
+		});
 	}
-	if (page.userId !== user.id) {
-		throw new ApiError(meta.errors.accessDenied);
-	}
-
-	await Pages.delete(page.id);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/pages/featured.ts b/packages/backend/src/server/api/endpoints/pages/featured.ts
index 5a149a626e..3e3dbb0832 100644
--- a/packages/backend/src/server/api/endpoints/pages/featured.ts
+++ b/packages/backend/src/server/api/endpoints/pages/featured.ts
@@ -1,5 +1,8 @@
-import { Pages } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { PagesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { PageEntityService } from '@/core/entities/PageEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['pages'],
@@ -24,13 +27,23 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = Pages.createQueryBuilder('page')
-		.where('page.visibility = \'public\'')
-		.andWhere('page.likedCount > 0')
-		.orderBy('page.likedCount', 'DESC');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.pagesRepository)
+		private pagesRepository: PagesRepository,
 
-	const pages = await query.take(10).getMany();
+		private pageEntityService: PageEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.pagesRepository.createQueryBuilder('page')
+				.where('page.visibility = \'public\'')
+				.andWhere('page.likedCount > 0')
+				.orderBy('page.likedCount', 'DESC');
 
-	return await Pages.packMany(pages, me);
-});
+			const pages = await query.take(10).getMany();
+
+			return await this.pageEntityService.packMany(pages, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/pages/like.ts b/packages/backend/src/server/api/endpoints/pages/like.ts
index 269b539f74..f3c55fed8b 100644
--- a/packages/backend/src/server/api/endpoints/pages/like.ts
+++ b/packages/backend/src/server/api/endpoints/pages/like.ts
@@ -1,6 +1,8 @@
-import { Pages, PageLikes } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { PagesRepository, PageLikesRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
 
 export const meta = {
@@ -40,33 +42,46 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const page = await Pages.findOneBy({ id: ps.pageId });
-	if (page == null) {
-		throw new ApiError(meta.errors.noSuchPage);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.pagesRepository)
+		private pagesRepository: PagesRepository,
 
-	if (page.userId === user.id) {
-		throw new ApiError(meta.errors.yourPage);
-	}
+		@Inject(DI.pageLikesRepository)
+		private pageLikesRepository: PageLikesRepository,
 
-	// if already liked
-	const exist = await PageLikes.findOneBy({
-		pageId: page.id,
-		userId: user.id,
-	});
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const page = await this.pagesRepository.findOneBy({ id: ps.pageId });
+			if (page == null) {
+				throw new ApiError(meta.errors.noSuchPage);
+			}
 
-	if (exist != null) {
-		throw new ApiError(meta.errors.alreadyLiked);
-	}
+			if (page.userId === me.id) {
+				throw new ApiError(meta.errors.yourPage);
+			}
 
-	// Create like
-	await PageLikes.insert({
-		id: genId(),
-		createdAt: new Date(),
-		pageId: page.id,
-		userId: user.id,
-	});
+			// if already liked
+			const exist = await this.pageLikesRepository.findOneBy({
+				pageId: page.id,
+				userId: me.id,
+			});
 
-	Pages.increment({ id: page.id }, 'likedCount', 1);
-});
+			if (exist != null) {
+				throw new ApiError(meta.errors.alreadyLiked);
+			}
+
+			// Create like
+			await this.pageLikesRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				pageId: page.id,
+				userId: me.id,
+			});
+
+			this.pagesRepository.increment({ id: page.id }, 'likedCount', 1);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/pages/show.ts b/packages/backend/src/server/api/endpoints/pages/show.ts
index 5d37e86b91..6d73889d39 100644
--- a/packages/backend/src/server/api/endpoints/pages/show.ts
+++ b/packages/backend/src/server/api/endpoints/pages/show.ts
@@ -1,7 +1,10 @@
 import { IsNull } from 'typeorm';
-import { Pages, Users } from '@/models/index.js';
-import { Page } from '@/models/entities/page.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository, PagesRepository } from '@/models/index.js';
+import type { Page } from '@/models/entities/Page.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { PageEntityService } from '@/core/entities/PageEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
 
 export const meta = {
@@ -44,27 +47,40 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	let page: Page | null = null;
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	if (ps.pageId) {
-		page = await Pages.findOneBy({ id: ps.pageId });
-	} else if (ps.name && ps.username) {
-		const author = await Users.findOneBy({
-			host: IsNull(),
-			usernameLower: ps.username.toLowerCase(),
-		});
-		if (author) {
-			page = await Pages.findOneBy({
-				name: ps.name,
-				userId: author.id,
-			});
-		}
-	}
+		@Inject(DI.pagesRepository)
+		private pagesRepository: PagesRepository,
 
-	if (page == null) {
-		throw new ApiError(meta.errors.noSuchPage);
-	}
+		private pageEntityService: PageEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			let page: Page | null = null;
+
+			if (ps.pageId) {
+				page = await this.pagesRepository.findOneBy({ id: ps.pageId });
+			} else if (ps.name && ps.username) {
+				const author = await this.usersRepository.findOneBy({
+					host: IsNull(),
+					usernameLower: ps.username.toLowerCase(),
+				});
+				if (author) {
+					page = await this.pagesRepository.findOneBy({
+						name: ps.name,
+						userId: author.id,
+					});
+				}
+			}
 
-	return await Pages.pack(page, user);
-});
+			if (page == null) {
+				throw new ApiError(meta.errors.noSuchPage);
+			}
+
+			return await this.pageEntityService.pack(page, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/pages/unlike.ts b/packages/backend/src/server/api/endpoints/pages/unlike.ts
index 6b3a2bec10..88386739be 100644
--- a/packages/backend/src/server/api/endpoints/pages/unlike.ts
+++ b/packages/backend/src/server/api/endpoints/pages/unlike.ts
@@ -1,5 +1,7 @@
-import { Pages, PageLikes } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { PagesRepository, PageLikesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
 
 export const meta = {
@@ -33,23 +35,34 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const page = await Pages.findOneBy({ id: ps.pageId });
-	if (page == null) {
-		throw new ApiError(meta.errors.noSuchPage);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.pagesRepository)
+		private pagesRepository: PagesRepository,
 
-	const exist = await PageLikes.findOneBy({
-		pageId: page.id,
-		userId: user.id,
-	});
+		@Inject(DI.pageLikesRepository)
+		private pageLikesRepository: PageLikesRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const page = await this.pagesRepository.findOneBy({ id: ps.pageId });
+			if (page == null) {
+				throw new ApiError(meta.errors.noSuchPage);
+			}
 
-	if (exist == null) {
-		throw new ApiError(meta.errors.notLiked);
-	}
+			const exist = await this.pageLikesRepository.findOneBy({
+				pageId: page.id,
+				userId: me.id,
+			});
 
-	// Delete like
-	await PageLikes.delete(exist.id);
+			if (exist == null) {
+				throw new ApiError(meta.errors.notLiked);
+			}
 
-	Pages.decrement({ id: page.id }, 'likedCount', 1);
-});
+			// Delete like
+			await this.pageLikesRepository.delete(exist.id);
+
+			this.pagesRepository.decrement({ id: page.id }, 'likedCount', 1);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/pages/update.ts b/packages/backend/src/server/api/endpoints/pages/update.ts
index d241f585aa..8980ac4906 100644
--- a/packages/backend/src/server/api/endpoints/pages/update.ts
+++ b/packages/backend/src/server/api/endpoints/pages/update.ts
@@ -1,7 +1,9 @@
 import ms from 'ms';
 import { Not } from 'typeorm';
-import { Pages, DriveFiles } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { PagesRepository, DriveFilesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
 
 export const meta = {
@@ -65,52 +67,63 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const page = await Pages.findOneBy({ id: ps.pageId });
-	if (page == null) {
-		throw new ApiError(meta.errors.noSuchPage);
-	}
-	if (page.userId !== user.id) {
-		throw new ApiError(meta.errors.accessDenied);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.pagesRepository)
+		private pagesRepository: PagesRepository,
 
-	let eyeCatchingImage = null;
-	if (ps.eyeCatchingImageId != null) {
-		eyeCatchingImage = await DriveFiles.findOneBy({
-			id: ps.eyeCatchingImageId,
-			userId: user.id,
-		});
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const page = await this.pagesRepository.findOneBy({ id: ps.pageId });
+			if (page == null) {
+				throw new ApiError(meta.errors.noSuchPage);
+			}
+			if (page.userId !== me.id) {
+				throw new ApiError(meta.errors.accessDenied);
+			}
 
-		if (eyeCatchingImage == null) {
-			throw new ApiError(meta.errors.noSuchFile);
-		}
-	}
+			let eyeCatchingImage = null;
+			if (ps.eyeCatchingImageId != null) {
+				eyeCatchingImage = await this.driveFilesRepository.findOneBy({
+					id: ps.eyeCatchingImageId,
+					userId: me.id,
+				});
 
-	await Pages.findBy({
-		id: Not(ps.pageId),
-		userId: user.id,
-		name: ps.name,
-	}).then(result => {
-		if (result.length > 0) {
-			throw new ApiError(meta.errors.nameAlreadyExists);
-		}
-	});
+				if (eyeCatchingImage == null) {
+					throw new ApiError(meta.errors.noSuchFile);
+				}
+			}
 
-	await Pages.update(page.id, {
-		updatedAt: new Date(),
-		title: ps.title,
-		name: ps.name === undefined ? page.name : ps.name,
-		summary: ps.name === undefined ? page.summary : ps.summary,
-		content: ps.content,
-		variables: ps.variables,
-		script: ps.script,
-		alignCenter: ps.alignCenter === undefined ? page.alignCenter : ps.alignCenter,
-		hideTitleWhenPinned: ps.hideTitleWhenPinned === undefined ? page.hideTitleWhenPinned : ps.hideTitleWhenPinned,
-		font: ps.font === undefined ? page.font : ps.font,
-		eyeCatchingImageId: ps.eyeCatchingImageId === null
-			? null
-			: ps.eyeCatchingImageId === undefined
-				? page.eyeCatchingImageId
-				: eyeCatchingImage!.id,
-	});
-});
+			await this.pagesRepository.findBy({
+				id: Not(ps.pageId),
+				userId: me.id,
+				name: ps.name,
+			}).then(result => {
+				if (result.length > 0) {
+					throw new ApiError(meta.errors.nameAlreadyExists);
+				}
+			});
+
+			await this.pagesRepository.update(page.id, {
+				updatedAt: new Date(),
+				title: ps.title,
+				name: ps.name === undefined ? page.name : ps.name,
+				summary: ps.name === undefined ? page.summary : ps.summary,
+				content: ps.content,
+				variables: ps.variables,
+				script: ps.script,
+				alignCenter: ps.alignCenter === undefined ? page.alignCenter : ps.alignCenter,
+				hideTitleWhenPinned: ps.hideTitleWhenPinned === undefined ? page.hideTitleWhenPinned : ps.hideTitleWhenPinned,
+				font: ps.font === undefined ? page.font : ps.font,
+				eyeCatchingImageId: ps.eyeCatchingImageId === null
+					? null
+					: ps.eyeCatchingImageId === undefined
+						? page.eyeCatchingImageId
+						: eyeCatchingImage!.id,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/ping.ts b/packages/backend/src/server/api/endpoints/ping.ts
index 2891a0860a..4bb62b298e 100644
--- a/packages/backend/src/server/api/endpoints/ping.ts
+++ b/packages/backend/src/server/api/endpoints/ping.ts
@@ -1,4 +1,5 @@
-import define from '../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
 
 export const meta = {
 	requireCredential: false,
@@ -24,8 +25,14 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async () => {
-	return {
-		pong: Date.now(),
-	};
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+	) {
+		super(meta, paramDef, async () => {
+			return {
+				pong: Date.now(),
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/pinned-users.ts b/packages/backend/src/server/api/endpoints/pinned-users.ts
index 41595b47d9..573331e0d8 100644
--- a/packages/backend/src/server/api/endpoints/pinned-users.ts
+++ b/packages/backend/src/server/api/endpoints/pinned-users.ts
@@ -1,9 +1,12 @@
 import { IsNull } from 'typeorm';
-import { Users } from '@/models/index.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository } from '@/models/index.js';
 import * as Acct from '@/misc/acct.js';
-import { User } from '@/models/entities/user.js';
-import define from '../define.js';
+import type { User } from '@/models/entities/User.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { MetaService } from '@/core/MetaService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['users'],
@@ -28,13 +31,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const meta = await fetchMeta();
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	const users = await Promise.all(meta.pinnedUsers.map(acct => Acct.parse(acct)).map(acct => Users.findOneBy({
-		usernameLower: acct.username.toLowerCase(),
-		host: acct.host ?? IsNull(),
-	})));
+		private metaService: MetaService,
+		private userEntityService: UserEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const meta = await this.metaService.fetch();
 
-	return await Users.packMany(users.filter(x => x !== undefined) as User[], me, { detail: true });
-});
+			const users = await Promise.all(meta.pinnedthis.usersRepository.map(acct => Acct.parse(acct)).map(acct => this.usersRepository.findOneBy({
+				usernameLower: acct.username.toLowerCase(),
+				host: acct.host ?? IsNull(),
+			})));
+
+			return await this.userEntityService.packMany(users.filter(x => x !== undefined) as User[], me, { detail: true });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/promo/read.ts b/packages/backend/src/server/api/endpoints/promo/read.ts
index c6a940c65e..7c8188ce3c 100644
--- a/packages/backend/src/server/api/endpoints/promo/read.ts
+++ b/packages/backend/src/server/api/endpoints/promo/read.ts
@@ -1,8 +1,10 @@
-import { PromoReads } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { PromoReadsRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { getNote } from '../../common/getters.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['notes'],
@@ -27,25 +29,36 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const note = await getNote(ps.noteId).catch(e => {
-		if (e.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
-		throw e;
-	});
-
-	const exist = await PromoReads.findOneBy({
-		noteId: note.id,
-		userId: user.id,
-	});
-
-	if (exist != null) {
-		return;
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.promoReadsRepository)
+		private promoReadsRepository: PromoReadsRepository,
+
+		private idService: IdService,
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const note = await this.getterService.getNote(ps.noteId).catch(err => {
+				if (err.id === '9725d0ce-ba28-4dde-95a7-2cbb2c15de24') throw new ApiError(meta.errors.noSuchNote);
+				throw err;
+			});
+
+			const exist = await this.promoReadsRepository.findOneBy({
+				noteId: note.id,
+				userId: me.id,
+			});
 
-	await PromoReads.insert({
-		id: genId(),
-		createdAt: new Date(),
-		noteId: note.id,
-		userId: user.id,
-	});
-});
+			if (exist != null) {
+				return;
+			}
+
+			await this.promoReadsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				noteId: note.id,
+				userId: me.id,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/request-reset-password.ts b/packages/backend/src/server/api/endpoints/request-reset-password.ts
index 511a6bbb53..4766239533 100644
--- a/packages/backend/src/server/api/endpoints/request-reset-password.ts
+++ b/packages/backend/src/server/api/endpoints/request-reset-password.ts
@@ -1,13 +1,14 @@
 import rndstr from 'rndstr';
 import ms from 'ms';
 import { IsNull } from 'typeorm';
-import { publishMainStream } from '@/services/stream.js';
-import config from '@/config/index.js';
-import { Users, UserProfiles, PasswordResetRequests } from '@/models/index.js';
-import { sendEmail } from '@/services/send-email.js';
-import { genId } from '@/misc/gen-id.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { PasswordResetRequestsRepository, UserProfilesRepository, UsersRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { IdService } from '@/core/IdService.js';
+import { Config } from '@/config.js';
+import { DI } from '@/di-symbols.js';
+import { EmailService } from '@/core/EmailService.js';
 import { ApiError } from '../error.js';
-import define from '../define.js';
 
 export const meta = {
 	tags: ['reset password'],
@@ -36,41 +37,61 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	const user = await Users.findOneBy({
-		usernameLower: ps.username.toLowerCase(),
-		host: IsNull(),
-	});
-
-	// 合致するユーザーが登録されていなかったら無視
-	if (user == null) {
-		return;
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+		
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.passwordResetRequestsRepository)
+		private passwordResetRequestsRepository: PasswordResetRequestsRepository,
+
+		private idService: IdService,
+		private emailService: EmailService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const user = await this.usersRepository.findOneBy({
+				usernameLower: ps.username.toLowerCase(),
+				host: IsNull(),
+			});
+
+			// 合致するユーザーが登録されていなかったら無視
+			if (user == null) {
+				return;
+			}
+
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+
+			// 合致するメアドが登録されていなかったら無視
+			if (profile.email !== ps.email) {
+				return;
+			}
+
+			// メアドが認証されていなかったら無視
+			if (!profile.emailVerified) {
+				return;
+			}
+
+			const token = rndstr('a-z0-9', 64);
+
+			await this.passwordResetRequestsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				userId: profile.userId,
+				token,
+			});
+
+			const link = `${this.config.url}/reset-password/${token}`;
+
+			this.emailService.sendEmail(ps.email, 'Password reset requested',
+				`To reset password, please click this link:<br><a href="${link}">${link}</a>`,
+				`To reset password, please click this link: ${link}`);
+		});
 	}
-
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	// 合致するメアドが登録されていなかったら無視
-	if (profile.email !== ps.email) {
-		return;
-	}
-
-	// メアドが認証されていなかったら無視
-	if (!profile.emailVerified) {
-		return;
-	}
-
-	const token = rndstr('a-z0-9', 64);
-
-	await PasswordResetRequests.insert({
-		id: genId(),
-		createdAt: new Date(),
-		userId: profile.userId,
-		token,
-	});
-
-	const link = `${config.url}/reset-password/${token}`;
-
-	sendEmail(ps.email, 'Password reset requested',
-		`To reset password, please click this link:<br><a href="${link}">${link}</a>`,
-		`To reset password, please click this link: ${link}`);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/reset-db.ts b/packages/backend/src/server/api/endpoints/reset-db.ts
index 140f96d579..526efbc2f6 100644
--- a/packages/backend/src/server/api/endpoints/reset-db.ts
+++ b/packages/backend/src/server/api/endpoints/reset-db.ts
@@ -1,5 +1,9 @@
-import { resetDb } from '@/db/postgre.js';
-import define from '../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { DataSource } from 'typeorm';
+import Redis from 'ioredis';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
+import { resetDb } from '@/misc/reset-db.js';
 import { ApiError } from '../error.js';
 
 export const meta = {
@@ -21,10 +25,22 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	if (process.env.NODE_ENV !== 'test') throw 'NODE_ENV is not a test';
-
-	await resetDb();
-
-	await new Promise(resolve => setTimeout(resolve, 1000));
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.db)
+		private db: DataSource,
+
+		@Inject(DI.redis)
+		private redisClient: Redis.Redis,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			if (process.env.NODE_ENV !== 'test') throw 'NODE_ENV is not a test';
+
+			await redisClient.flushdb();
+			await resetDb(this.db);
+
+			await new Promise(resolve => setTimeout(resolve, 1000));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/reset-password.ts b/packages/backend/src/server/api/endpoints/reset-password.ts
index 797169c2c3..48edde5196 100644
--- a/packages/backend/src/server/api/endpoints/reset-password.ts
+++ b/packages/backend/src/server/api/endpoints/reset-password.ts
@@ -1,7 +1,9 @@
 import bcrypt from 'bcryptjs';
-import { publishMainStream } from '@/services/stream.js';
-import { Users, UserProfiles, PasswordResetRequests } from '@/models/index.js';
-import define from '../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserProfilesRepository, PasswordResetRequestsRepository } from '@/models/index.js';
+import type { UsersRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../error.js';
 
 export const meta = {
@@ -26,23 +28,34 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const req = await PasswordResetRequests.findOneByOrFail({
-		token: ps.token,
-	});
-
-	// 発行してから30分以上経過していたら無効
-	if (Date.now() - req.createdAt.getTime() > 1000 * 60 * 30) {
-		throw new Error(); // TODO
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.passwordResetRequestsRepository)
+		private passwordResetRequestsRepository: PasswordResetRequestsRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const req = await this.passwordResetRequestsRepository.findOneByOrFail({
+				token: ps.token,
+			});
+
+			// 発行してから30分以上経過していたら無効
+			if (Date.now() - req.createdAt.getTime() > 1000 * 60 * 30) {
+				throw new Error(); // TODO
+			}
+
+			// Generate hash of password
+			const salt = await bcrypt.genSalt(8);
+			const hash = await bcrypt.hash(ps.password, salt);
+
+			await this.userProfilesRepository.update(req.userId, {
+				password: hash,
+			});
+
+			this.passwordResetRequestsRepository.delete(req.id);
+		});
 	}
-
-	// Generate hash of password
-	const salt = await bcrypt.genSalt(8);
-	const hash = await bcrypt.hash(ps.password, salt);
-
-	await UserProfiles.update(req.userId, {
-		password: hash,
-	});
-
-	PasswordResetRequests.delete(req.id);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/server-info.ts b/packages/backend/src/server/api/endpoints/server-info.ts
index 99f3730e97..8989a3073d 100644
--- a/packages/backend/src/server/api/endpoints/server-info.ts
+++ b/packages/backend/src/server/api/endpoints/server-info.ts
@@ -1,6 +1,7 @@
 import * as os from 'node:os';
 import si from 'systeminformation';
-import define from '../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
 
 export const meta = {
 	requireCredential: false,
@@ -15,22 +16,28 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async () => {
-	const memStats = await si.mem();
-	const fsStats = await si.fsSize();
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+	) {
+		super(meta, paramDef, async () => {
+			const memStats = await si.mem();
+			const fsStats = await si.fsSize();
 
-	return {
-		machine: os.hostname(),
-		cpu: {
-			model: os.cpus()[0].model,
-			cores: os.cpus().length,
-		},
-		mem: {
-			total: memStats.total,
-		},
-		fs: {
-			total: fsStats[0].size,
-			used: fsStats[0].used,
-		},
-	};
-});
+			return {
+				machine: os.hostname(),
+				cpu: {
+					model: os.cpus()[0].model,
+					cores: os.cpus().length,
+				},
+				mem: {
+					total: memStats.total,
+				},
+				fs: {
+					total: fsStats[0].size,
+					used: fsStats[0].used,
+				},
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/stats.ts b/packages/backend/src/server/api/endpoints/stats.ts
index cc94f8bf26..17af75578b 100644
--- a/packages/backend/src/server/api/endpoints/stats.ts
+++ b/packages/backend/src/server/api/endpoints/stats.ts
@@ -1,7 +1,8 @@
-import { Instances, NoteReactions, Notes, Users } from '@/models/index.js';
-import define from '../define.js';
-import { } from '@/services/chart/index.js';
+import { Inject, Injectable } from '@nestjs/common';
 import { IsNull } from 'typeorm';
+import { InstancesRepository, NotesRepository, UsersRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	requireCredential: false,
@@ -51,34 +52,51 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async () => {
-	const [
-		notesCount,
-		originalNotesCount,
-		usersCount,
-		originalUsersCount,
-		reactionsCount,
-		//originalReactionsCount,
-		instances,
-	] = await Promise.all([
-		Notes.count({ cache: 3600000 }), // 1 hour
-		Notes.count({ where: { userHost: IsNull() }, cache: 3600000 }),
-		Users.count({ cache: 3600000 }),
-		Users.count({ where: { host: IsNull() }, cache: 3600000 }),
-		NoteReactions.count({ cache: 3600000 }), // 1 hour
-		//NoteReactions.count({ where: { userHost: IsNull() }, cache: 3600000 }),
-		Instances.count({ cache: 3600000 }),
-	]);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	return {
-		notesCount,
-		originalNotesCount,
-		usersCount,
-		originalUsersCount,
-		reactionsCount,
-		//originalReactionsCount,
-		instances,
-		driveUsageLocal: 0,
-		driveUsageRemote: 0,
-	};
-});
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.instancesRepository)
+		private instancesRepository: InstancesRepository,
+
+		@Inject(DI.noteReactionsRepository)
+		private noteReactionsRepository: NoteReactionsRepository,
+	) {
+		super(meta, paramDef, async () => {
+			const [
+				notesCount,
+				originalNotesCount,
+				usersCount,
+				originalUsersCount,
+				reactionsCount,
+				//originalReactionsCount,
+				instances,
+			] = await Promise.all([
+				this.notesRepository.count({ cache: 3600000 }), // 1 hour
+				this.notesRepository.count({ where: { userHost: IsNull() }, cache: 3600000 }),
+				this.usersRepository.count({ cache: 3600000 }),
+				this.usersRepository.count({ where: { host: IsNull() }, cache: 3600000 }),
+				this.noteReactionsRepository.count({ cache: 3600000 }), // 1 hour
+				//this.noteReactionsRepository.count({ where: { userHost: IsNull() }, cache: 3600000 }),
+				this.instancesRepository.count({ cache: 3600000 }),
+			]);
+
+			return {
+				notesCount,
+				originalNotesCount,
+				usersCount,
+				originalUsersCount,
+				reactionsCount,
+				//originalReactionsCount,
+				instances,
+				driveUsageLocal: 0,
+				driveUsageRemote: 0,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/sw/register.ts b/packages/backend/src/server/api/endpoints/sw/register.ts
index 437f8874ff..73a084c2ad 100644
--- a/packages/backend/src/server/api/endpoints/sw/register.ts
+++ b/packages/backend/src/server/api/endpoints/sw/register.ts
@@ -1,7 +1,9 @@
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { genId } from '@/misc/gen-id.js';
-import { SwSubscriptions } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { IdService } from '@/core/IdService.js';
+import { SwSubscriptionsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { MetaService } from '@/core/MetaService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['account'],
@@ -38,35 +40,46 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// if already subscribed
-	const exist = await SwSubscriptions.findOneBy({
-		userId: user.id,
-		endpoint: ps.endpoint,
-		auth: ps.auth,
-		publickey: ps.publickey,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.swSubscriptionsRepository)
+		private swSubscriptionsRepository: SwSubscriptionsRepository,
 
-	const instance = await fetchMeta(true);
+		private idService: IdService,
+		private metaService: MetaService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// if already subscribed
+			const exist = await this.swSubscriptionsRepository.findOneBy({
+				userId: me.id,
+				endpoint: ps.endpoint,
+				auth: ps.auth,
+				publickey: ps.publickey,
+			});
 
-	if (exist != null) {
-		return {
-			state: 'already-subscribed' as const,
-			key: instance.swPublicKey,
-		};
-	}
+			const instance = await this.metaService.fetch(true);
+
+			if (exist != null) {
+				return {
+					state: 'already-subscribed' as const,
+					key: instance.swPublicKey,
+				};
+			}
 
-	await SwSubscriptions.insert({
-		id: genId(),
-		createdAt: new Date(),
-		userId: user.id,
-		endpoint: ps.endpoint,
-		auth: ps.auth,
-		publickey: ps.publickey,
-	});
+			await this.swSubscriptionsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				userId: me.id,
+				endpoint: ps.endpoint,
+				auth: ps.auth,
+				publickey: ps.publickey,
+			});
 
-	return {
-		state: 'subscribed' as const,
-		key: instance.swPublicKey,
-	};
-});
+			return {
+				state: 'subscribed' as const,
+				key: instance.swPublicKey,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/sw/unregister.ts b/packages/backend/src/server/api/endpoints/sw/unregister.ts
index c19e06b879..feb6730154 100644
--- a/packages/backend/src/server/api/endpoints/sw/unregister.ts
+++ b/packages/backend/src/server/api/endpoints/sw/unregister.ts
@@ -1,5 +1,7 @@
-import { SwSubscriptions } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { SwSubscriptionsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['account'],
@@ -18,9 +20,17 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	await SwSubscriptions.delete({
-		userId: user.id,
-		endpoint: ps.endpoint,
-	});
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.swSubscriptionsRepository)
+		private swSubscriptionsRepository: SwSubscriptionsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			await this.swSubscriptionsRepository.delete({
+				userId: me.id,
+				endpoint: ps.endpoint,
+			});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/test.ts b/packages/backend/src/server/api/endpoints/test.ts
index 9949237a7e..39ea1f2171 100644
--- a/packages/backend/src/server/api/endpoints/test.ts
+++ b/packages/backend/src/server/api/endpoints/test.ts
@@ -1,4 +1,5 @@
-import define from '../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
 
 export const meta = {
 	tags: ['non-productive'],
@@ -21,6 +22,12 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	return ps;
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			return ps;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/username/available.ts b/packages/backend/src/server/api/endpoints/username/available.ts
index 3e41aeaed8..56474d6988 100644
--- a/packages/backend/src/server/api/endpoints/username/available.ts
+++ b/packages/backend/src/server/api/endpoints/username/available.ts
@@ -1,6 +1,9 @@
 import { IsNull } from 'typeorm';
-import { Users, UsedUsernames } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsedUsernamesRepository, UsersRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { localUsernameSchema } from '@/models/entities/User.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['users'],
@@ -22,22 +25,33 @@ export const meta = {
 export const paramDef = {
 	type: 'object',
 	properties: {
-		username: Users.localUsernameSchema,
+		username: localUsernameSchema,
 	},
 	required: ['username'],
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps) => {
-	// Get exist
-	const exist = await Users.countBy({
-		host: IsNull(),
-		usernameLower: ps.username.toLowerCase(),
-	});
-
-	const exist2 = await UsedUsernames.countBy({ username: ps.username.toLowerCase() });
-
-	return {
-		available: exist === 0 && exist2 === 0,
-	};
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.usedUsernamesRepository)
+		private usedUsernamesRepository: UsedUsernamesRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Get exist
+			const exist = await this.usersRepository.countBy({
+				host: IsNull(),
+				usernameLower: ps.username.toLowerCase(),
+			});
+
+			const exist2 = await this.usedUsernamesRepository.countBy({ username: ps.username.toLowerCase() });
+
+			return {
+				available: exist === 0 && exist2 === 0,
+			};
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users.ts b/packages/backend/src/server/api/endpoints/users.ts
index 3a8211374b..3d05ec2e1d 100644
--- a/packages/backend/src/server/api/endpoints/users.ts
+++ b/packages/backend/src/server/api/endpoints/users.ts
@@ -1,7 +1,9 @@
-import { Users } from '@/models/index.js';
-import define from '../define.js';
-import { generateMutedUserQueryForUsers } from '../common/generate-muted-user-query.js';
-import { generateBlockQueryForUsers } from '../common/generate-block-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['users'],
@@ -38,43 +40,54 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = Users.createQueryBuilder('user');
-	query.where('user.isExplorable = TRUE');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	switch (ps.state) {
-		case 'admin': query.andWhere('user.isAdmin = TRUE'); break;
-		case 'moderator': query.andWhere('user.isModerator = TRUE'); break;
-		case 'adminOrModerator': query.andWhere('user.isAdmin = TRUE OR user.isModerator = TRUE'); break;
-		case 'alive': query.andWhere('user.updatedAt > :date', { date: new Date(Date.now() - 1000 * 60 * 60 * 24 * 5) }); break;
-	}
+		private userEntityService: UserEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.usersRepository.createQueryBuilder('user');
+			query.where('user.isExplorable = TRUE');
 
-	switch (ps.origin) {
-		case 'local': query.andWhere('user.host IS NULL'); break;
-		case 'remote': query.andWhere('user.host IS NOT NULL'); break;
-	}
+			switch (ps.state) {
+				case 'admin': query.andWhere('user.isAdmin = TRUE'); break;
+				case 'moderator': query.andWhere('user.isModerator = TRUE'); break;
+				case 'adminOrModerator': query.andWhere('user.isAdmin = TRUE OR user.isModerator = TRUE'); break;
+				case 'alive': query.andWhere('user.updatedAt > :date', { date: new Date(Date.now() - 1000 * 60 * 60 * 24 * 5) }); break;
+			}
 
-	if (ps.hostname) {
-		query.andWhere('user.host = :hostname', { hostname: ps.hostname.toLowerCase() });
-	}
+			switch (ps.origin) {
+				case 'local': query.andWhere('user.host IS NULL'); break;
+				case 'remote': query.andWhere('user.host IS NOT NULL'); break;
+			}
 
-	switch (ps.sort) {
-		case '+follower': query.orderBy('user.followersCount', 'DESC'); break;
-		case '-follower': query.orderBy('user.followersCount', 'ASC'); break;
-		case '+createdAt': query.orderBy('user.createdAt', 'DESC'); break;
-		case '-createdAt': query.orderBy('user.createdAt', 'ASC'); break;
-		case '+updatedAt': query.andWhere('user.updatedAt IS NOT NULL').orderBy('user.updatedAt', 'DESC'); break;
-		case '-updatedAt': query.andWhere('user.updatedAt IS NOT NULL').orderBy('user.updatedAt', 'ASC'); break;
-		default: query.orderBy('user.id', 'ASC'); break;
-	}
+			if (ps.hostname) {
+				query.andWhere('user.host = :hostname', { hostname: ps.hostname.toLowerCase() });
+			}
+
+			switch (ps.sort) {
+				case '+follower': query.orderBy('user.followersCount', 'DESC'); break;
+				case '-follower': query.orderBy('user.followersCount', 'ASC'); break;
+				case '+createdAt': query.orderBy('user.createdAt', 'DESC'); break;
+				case '-createdAt': query.orderBy('user.createdAt', 'ASC'); break;
+				case '+updatedAt': query.andWhere('user.updatedAt IS NOT NULL').orderBy('user.updatedAt', 'DESC'); break;
+				case '-updatedAt': query.andWhere('user.updatedAt IS NOT NULL').orderBy('user.updatedAt', 'ASC'); break;
+				default: query.orderBy('user.id', 'ASC'); break;
+			}
 
-	if (me) generateMutedUserQueryForUsers(query, me);
-	if (me) generateBlockQueryForUsers(query, me);
+			if (me) this.queryService.generateMutedUserQueryForUsers(query, me);
+			if (me) this.queryService.generateBlockQueryForUsers(query, me);
 
-	query.take(ps.limit);
-	query.skip(ps.offset);
+			query.take(ps.limit);
+			query.skip(ps.offset);
 
-	const users = await query.getMany();
+			const users = await query.getMany();
 
-	return await Users.packMany(users, me, { detail: true });
-});
+			return await this.userEntityService.packMany(users, me, { detail: true });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/clips.ts b/packages/backend/src/server/api/endpoints/users/clips.ts
index 09fdf27c23..2d5545cbab 100644
--- a/packages/backend/src/server/api/endpoints/users/clips.ts
+++ b/packages/backend/src/server/api/endpoints/users/clips.ts
@@ -1,6 +1,9 @@
-import { Clips } from '@/models/index.js';
-import define from '../../define.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { ClipsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { ClipEntityService } from '@/core/entities/ClipEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['users', 'clips'],
@@ -30,14 +33,25 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = makePaginationQuery(Clips.createQueryBuilder('clip'), ps.sinceId, ps.untilId)
-		.andWhere('clip.userId = :userId', { userId: ps.userId })
-		.andWhere('clip.isPublic = true');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.clipsRepository)
+		private clipsRepository: ClipsRepository,
 
-	const clips = await query
-		.take(ps.limit)
-		.getMany();
+		private clipEntityService: ClipEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.clipsRepository.createQueryBuilder('clip'), ps.sinceId, ps.untilId)
+				.andWhere('clip.userId = :userId', { userId: ps.userId })
+				.andWhere('clip.isPublic = true');
 
-	return await Clips.packMany(clips);
-});
+			const clips = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await this.clipEntityService.packMany(clips);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/followers.ts b/packages/backend/src/server/api/endpoints/users/followers.ts
index 7f9f980764..08bcdd9f88 100644
--- a/packages/backend/src/server/api/endpoints/users/followers.ts
+++ b/packages/backend/src/server/api/endpoints/users/followers.ts
@@ -1,9 +1,12 @@
 import { IsNull } from 'typeorm';
-import { Users, Followings, UserProfiles } from '@/models/index.js';
-import { toPunyNullable } from '@/misc/convert-host.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository, FollowingsRepository, UserProfilesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { FollowingEntityService } from '@/core/entities/FollowingEntityService.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
 
 export const meta = {
 	tags: ['users'],
@@ -66,42 +69,60 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const user = await Users.findOneBy(ps.userId != null
-		? { id: ps.userId }
-		: { usernameLower: ps.username!.toLowerCase(), host: toPunyNullable(ps.host) ?? IsNull() });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	if (user == null) {
-		throw new ApiError(meta.errors.noSuchUser);
-	}
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
 
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	if (profile.ffVisibility === 'private') {
-		if (me == null || (me.id !== user.id)) {
-			throw new ApiError(meta.errors.forbidden);
-		}
-	} else if (profile.ffVisibility === 'followers') {
-		if (me == null) {
-			throw new ApiError(meta.errors.forbidden);
-		} else if (me.id !== user.id) {
-			const following = await Followings.findOneBy({
-				followeeId: user.id,
-				followerId: me.id,
-			});
-			if (following == null) {
-				throw new ApiError(meta.errors.forbidden);
+		private utilityService: UtilityService,
+		private followingEntityService: FollowingEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const user = await this.usersRepository.findOneBy(ps.userId != null
+				? { id: ps.userId }
+				: { usernameLower: ps.username!.toLowerCase(), host: this.utilityService.toPunyNullable(ps.host) ?? IsNull() });
+
+			if (user == null) {
+				throw new ApiError(meta.errors.noSuchUser);
 			}
-		}
-	}
 
-	const query = makePaginationQuery(Followings.createQueryBuilder('following'), ps.sinceId, ps.untilId)
-		.andWhere('following.followeeId = :userId', { userId: user.id })
-		.innerJoinAndSelect('following.follower', 'follower');
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
 
-	const followings = await query
-		.take(ps.limit)
-		.getMany();
+			if (profile.ffVisibility === 'private') {
+				if (me == null || (me.id !== user.id)) {
+					throw new ApiError(meta.errors.forbidden);
+				}
+			} else if (profile.ffVisibility === 'followers') {
+				if (me == null) {
+					throw new ApiError(meta.errors.forbidden);
+				} else if (me.id !== user.id) {
+					const following = await this.followingsRepository.findOneBy({
+						followeeId: user.id,
+						followerId: me.id,
+					});
+					if (following == null) {
+						throw new ApiError(meta.errors.forbidden);
+					}
+				}
+			}
+
+			const query = this.queryService.makePaginationQuery(this.followingsRepository.createQueryBuilder('following'), ps.sinceId, ps.untilId)
+				.andWhere('following.followeeId = :userId', { userId: user.id })
+				.innerJoinAndSelect('following.follower', 'follower');
 
-	return await Followings.packMany(followings, me, { populateFollower: true });
-});
+			const followings = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await this.followingEntityService.packMany(followings, me, { populateFollower: true });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/following.ts b/packages/backend/src/server/api/endpoints/users/following.ts
index 0aaa810f76..225ab5210a 100644
--- a/packages/backend/src/server/api/endpoints/users/following.ts
+++ b/packages/backend/src/server/api/endpoints/users/following.ts
@@ -1,9 +1,12 @@
 import { IsNull } from 'typeorm';
-import { Users, Followings, UserProfiles } from '@/models/index.js';
-import { toPunyNullable } from '@/misc/convert-host.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository, FollowingsRepository, UserProfilesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { FollowingEntityService } from '@/core/entities/FollowingEntityService.js';
+import { UtilityService } from '@/core/UtilityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
 
 export const meta = {
 	tags: ['users'],
@@ -66,42 +69,60 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const user = await Users.findOneBy(ps.userId != null
-		? { id: ps.userId }
-		: { usernameLower: ps.username!.toLowerCase(), host: toPunyNullable(ps.host) ?? IsNull() });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	if (user == null) {
-		throw new ApiError(meta.errors.noSuchUser);
-	}
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
 
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	if (profile.ffVisibility === 'private') {
-		if (me == null || (me.id !== user.id)) {
-			throw new ApiError(meta.errors.forbidden);
-		}
-	} else if (profile.ffVisibility === 'followers') {
-		if (me == null) {
-			throw new ApiError(meta.errors.forbidden);
-		} else if (me.id !== user.id) {
-			const following = await Followings.findOneBy({
-				followeeId: user.id,
-				followerId: me.id,
-			});
-			if (following == null) {
-				throw new ApiError(meta.errors.forbidden);
+		private utilityService: UtilityService,
+		private followingEntityService: FollowingEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const user = await this.usersRepository.findOneBy(ps.userId != null
+				? { id: ps.userId }
+				: { usernameLower: ps.username!.toLowerCase(), host: this.utilityService.toPunyNullable(ps.host) ?? IsNull() });
+
+			if (user == null) {
+				throw new ApiError(meta.errors.noSuchUser);
 			}
-		}
-	}
 
-	const query = makePaginationQuery(Followings.createQueryBuilder('following'), ps.sinceId, ps.untilId)
-		.andWhere('following.followerId = :userId', { userId: user.id })
-		.innerJoinAndSelect('following.followee', 'followee');
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
 
-	const followings = await query
-		.take(ps.limit)
-		.getMany();
+			if (profile.ffVisibility === 'private') {
+				if (me == null || (me.id !== user.id)) {
+					throw new ApiError(meta.errors.forbidden);
+				}
+			} else if (profile.ffVisibility === 'followers') {
+				if (me == null) {
+					throw new ApiError(meta.errors.forbidden);
+				} else if (me.id !== user.id) {
+					const following = await this.followingsRepository.findOneBy({
+						followeeId: user.id,
+						followerId: me.id,
+					});
+					if (following == null) {
+						throw new ApiError(meta.errors.forbidden);
+					}
+				}
+			}
+
+			const query = this.queryService.makePaginationQuery(this.followingsRepository.createQueryBuilder('following'), ps.sinceId, ps.untilId)
+				.andWhere('following.followerId = :userId', { userId: user.id })
+				.innerJoinAndSelect('following.followee', 'followee');
 
-	return await Followings.packMany(followings, me, { populateFollowee: true });
-});
+			const followings = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await this.followingEntityService.packMany(followings, me, { populateFollowee: true });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/gallery/posts.ts b/packages/backend/src/server/api/endpoints/users/gallery/posts.ts
index 35bf2df598..2d28d6ca07 100644
--- a/packages/backend/src/server/api/endpoints/users/gallery/posts.ts
+++ b/packages/backend/src/server/api/endpoints/users/gallery/posts.ts
@@ -1,6 +1,9 @@
-import define from '../../../define.js';
-import { GalleryPosts } from '@/models/index.js';
-import { makePaginationQuery } from '../../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GalleryPostsRepository } from '@/models/index.js';
+import { QueryService } from '@/core/QueryService.js';
+import { GalleryPostEntityService } from '@/core/entities/GalleryPostEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['users', 'gallery'],
@@ -30,13 +33,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = makePaginationQuery(GalleryPosts.createQueryBuilder('post'), ps.sinceId, ps.untilId)
-		.andWhere(`post.userId = :userId`, { userId: ps.userId });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.galleryPostsRepository)
+		private galleryPostsRepository: GalleryPostsRepository,
 
-	const posts = await query
-		.take(ps.limit)
-		.getMany();
+		private galleryPostEntityService: GalleryPostEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.galleryPostsRepository.createQueryBuilder('post'), ps.sinceId, ps.untilId)
+				.andWhere('post.userId = :userId', { userId: ps.userId });
 
-	return await GalleryPosts.packMany(posts, user);
-});
+			const posts = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await this.galleryPostEntityService.packMany(posts, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/get-frequently-replied-users.ts b/packages/backend/src/server/api/endpoints/users/get-frequently-replied-users.ts
index 56965d3066..3eeca7562f 100644
--- a/packages/backend/src/server/api/endpoints/users/get-frequently-replied-users.ts
+++ b/packages/backend/src/server/api/endpoints/users/get-frequently-replied-users.ts
@@ -1,9 +1,12 @@
 import { Not, In, IsNull } from 'typeorm';
-import { maximum } from '@/prelude/array.js';
-import { Notes, Users } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { maximum } from '@/misc/prelude/array.js';
+import { NotesRepository, UsersRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { getUser } from '../../common/getters.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['users'],
@@ -51,64 +54,78 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	// Lookup user
-	const user = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
-
-	// Fetch recent notes
-	const recentNotes = await Notes.find({
-		where: {
-			userId: user.id,
-			replyId: Not(IsNull()),
-		},
-		order: {
-			id: -1,
-		},
-		take: 1000,
-		select: ['replyId'],
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		private userEntityService: UserEntityService,
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Lookup user
+			const user = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
+
+			// Fetch recent notes
+			const recentNotes = await this.notesRepository.find({
+				where: {
+					userId: user.id,
+					replyId: Not(IsNull()),
+				},
+				order: {
+					id: -1,
+				},
+				take: 1000,
+				select: ['replyId'],
+			});
+
+			// 投稿が少なかったら中断
+			if (recentNotes.length === 0) {
+				return [];
+			}
+
+			// TODO ミュートを考慮
+			const replyTargetNotes = await this.notesRepository.find({
+				where: {
+					id: In(recentNotes.map(p => p.replyId)),
+				},
+				select: ['userId'],
+			});
 
-	// 投稿が少なかったら中断
-	if (recentNotes.length === 0) {
-		return [];
-	}
+			const repliedUsers: any = {};
 
-	// TODO ミュートを考慮
-	const replyTargetNotes = await Notes.find({
-		where: {
-			id: In(recentNotes.map(p => p.replyId)),
-		},
-		select: ['userId'],
-	});
-
-	const repliedUsers: any = {};
-
-	// Extract replies from recent notes
-	for (const userId of replyTargetNotes.map(x => x.userId.toString())) {
-		if (repliedUsers[userId]) {
-			repliedUsers[userId]++;
-		} else {
-			repliedUsers[userId] = 1;
-		}
-	}
+			// Extract replies from recent notes
+			for (const userId of replyTargetNotes.map(x => x.userId.toString())) {
+				if (repliedUsers[userId]) {
+					repliedUsers[userId]++;
+				} else {
+					repliedUsers[userId] = 1;
+				}
+			}
 
-	// Calc peak
-	const peak = maximum(Object.values(repliedUsers));
+			// Calc peak
+			const peak = maximum(Object.values(repliedUsers));
 
-	// Sort replies by frequency
-	const repliedUsersSorted = Object.keys(repliedUsers).sort((a, b) => repliedUsers[b] - repliedUsers[a]);
+			// Sort replies by frequency
+			const repliedUsersSorted = Object.keys(repliedUsers).sort((a, b) => repliedUsers[b] - repliedUsers[a]);
 
-	// Extract top replied users
-	const topRepliedUsers = repliedUsersSorted.slice(0, ps.limit);
+			// Extract top replied users
+			const topRepliedUsers = repliedUsersSorted.slice(0, ps.limit);
 
-	// Make replies object (includes weights)
-	const repliesObj = await Promise.all(topRepliedUsers.map(async (user) => ({
-		user: await Users.pack(user, me, { detail: true }),
-		weight: repliedUsers[user] / peak,
-	})));
+			// Make replies object (includes weights)
+			const repliesObj = await Promise.all(topRepliedUsers.map(async (user) => ({
+				user: await this.userEntityService.pack(user, me, { detail: true }),
+				weight: repliedUsers[user] / peak,
+			})));
 
-	return repliesObj;
-});
+			return repliesObj;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/groups/create.ts b/packages/backend/src/server/api/endpoints/users/groups/create.ts
index 4a6362a3c6..5d7ad84ae0 100644
--- a/packages/backend/src/server/api/endpoints/users/groups/create.ts
+++ b/packages/backend/src/server/api/endpoints/users/groups/create.ts
@@ -1,8 +1,11 @@
-import { UserGroups, UserGroupJoinings } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { UserGroup } from '@/models/entities/user-group.js';
-import { UserGroupJoining } from '@/models/entities/user-group-joining.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserGroupsRepository, UserGroupJoiningsRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import type { UserGroup } from '@/models/entities/UserGroup.js';
+import type { UserGroupJoining } from '@/models/entities/UserGroupJoining.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserGroupEntityService } from '@/core/entities/UserGroupEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['groups'],
@@ -29,21 +32,35 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const userGroup = await UserGroups.insert({
-		id: genId(),
-		createdAt: new Date(),
-		userId: user.id,
-		name: ps.name,
-	} as UserGroup).then(x => UserGroups.findOneByOrFail(x.identifiers[0]));
-
-	// Push the owner
-	await UserGroupJoinings.insert({
-		id: genId(),
-		createdAt: new Date(),
-		userId: user.id,
-		userGroupId: userGroup.id,
-	} as UserGroupJoining);
-
-	return await UserGroups.pack(userGroup);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userGroupsRepository)
+		private userGroupsRepository: UserGroupsRepository,
+
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+
+		private userGroupEntityService: UserGroupEntityService,
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const userGroup = await this.userGroupsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				userId: me.id,
+				name: ps.name,
+			} as UserGroup).then(x => this.userGroupsRepository.findOneByOrFail(x.identifiers[0]));
+
+			// Push the owner
+			await this.userGroupJoiningsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				userId: me.id,
+				userGroupId: userGroup.id,
+			} as UserGroupJoining);
+
+			return await this.userGroupEntityService.pack(userGroup);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/groups/delete.ts b/packages/backend/src/server/api/endpoints/users/groups/delete.ts
index 2ff1f9aec1..50156b049e 100644
--- a/packages/backend/src/server/api/endpoints/users/groups/delete.ts
+++ b/packages/backend/src/server/api/endpoints/users/groups/delete.ts
@@ -1,5 +1,7 @@
-import { UserGroups } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserGroupsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -29,15 +31,23 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const userGroup = await UserGroups.findOneBy({
-		id: ps.groupId,
-		userId: user.id,
-	});
-
-	if (userGroup == null) {
-		throw new ApiError(meta.errors.noSuchGroup);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userGroupsRepository)
+		private userGroupsRepository: UserGroupsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const userGroup = await this.userGroupsRepository.findOneBy({
+				id: ps.groupId,
+				userId: me.id,
+			});
+
+			if (userGroup == null) {
+				throw new ApiError(meta.errors.noSuchGroup);
+			}
+
+			await this.userGroupsRepository.delete(userGroup.id);
+		});
 	}
-
-	await UserGroups.delete(userGroup.id);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/users/groups/invitations/accept.ts b/packages/backend/src/server/api/endpoints/users/groups/invitations/accept.ts
index 220fff5f3e..0490fd41a0 100644
--- a/packages/backend/src/server/api/endpoints/users/groups/invitations/accept.ts
+++ b/packages/backend/src/server/api/endpoints/users/groups/invitations/accept.ts
@@ -1,8 +1,10 @@
-import { UserGroupJoinings, UserGroupInvitations } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { UserGroupJoining } from '@/models/entities/user-group-joining.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserGroupInvitationsRepository, UserGroupJoiningsRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import type { UserGroupJoining } from '@/models/entities/UserGroupJoining.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../../error.js';
-import define from '../../../../define.js';
 
 export const meta = {
 	tags: ['groups', 'users'],
@@ -31,27 +33,40 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Fetch the invitation
-	const invitation = await UserGroupInvitations.findOneBy({
-		id: ps.invitationId,
-	});
-
-	if (invitation == null) {
-		throw new ApiError(meta.errors.noSuchInvitation);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userGroupInvitationsRepository)
+		private userGroupInvitationsRepository: UserGroupInvitationsRepository,
 
-	if (invitation.userId !== user.id) {
-		throw new ApiError(meta.errors.noSuchInvitation);
-	}
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch the invitation
+			const invitation = await this.userGroupInvitationsRepository.findOneBy({
+				id: ps.invitationId,
+			});
 
-	// Push the user
-	await UserGroupJoinings.insert({
-		id: genId(),
-		createdAt: new Date(),
-		userId: user.id,
-		userGroupId: invitation.userGroupId,
-	} as UserGroupJoining);
+			if (invitation == null) {
+				throw new ApiError(meta.errors.noSuchInvitation);
+			}
 
-	UserGroupInvitations.delete(invitation.id);
-});
+			if (invitation.userId !== me.id) {
+				throw new ApiError(meta.errors.noSuchInvitation);
+			}
+
+			// Push the user
+			await this.userGroupJoiningsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				userId: me.id,
+				userGroupId: invitation.userGroupId,
+			} as UserGroupJoining);
+
+			this.userGroupInvitationsRepository.delete(invitation.id);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/groups/invitations/reject.ts b/packages/backend/src/server/api/endpoints/users/groups/invitations/reject.ts
index 8d1d3db734..26efc1ecf3 100644
--- a/packages/backend/src/server/api/endpoints/users/groups/invitations/reject.ts
+++ b/packages/backend/src/server/api/endpoints/users/groups/invitations/reject.ts
@@ -1,5 +1,7 @@
-import { UserGroupInvitations } from '@/models/index.js';
-import define from '../../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserGroupInvitationsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../../error.js';
 
 export const meta = {
@@ -29,19 +31,27 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Fetch the invitation
-	const invitation = await UserGroupInvitations.findOneBy({
-		id: ps.invitationId,
-	});
-
-	if (invitation == null) {
-		throw new ApiError(meta.errors.noSuchInvitation);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userGroupInvitationsRepository)
+		private userGroupInvitationsRepository: UserGroupInvitationsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch the invitation
+			const invitation = await this.userGroupInvitationsRepository.findOneBy({
+				id: ps.invitationId,
+			});
+
+			if (invitation == null) {
+				throw new ApiError(meta.errors.noSuchInvitation);
+			}
+
+			if (invitation.userId !== me.id) {
+				throw new ApiError(meta.errors.noSuchInvitation);
+			}
+
+			await this.userGroupInvitationsRepository.delete(invitation.id);
+		});
 	}
-
-	if (invitation.userId !== user.id) {
-		throw new ApiError(meta.errors.noSuchInvitation);
-	}
-
-	await UserGroupInvitations.delete(invitation.id);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/users/groups/invite.ts b/packages/backend/src/server/api/endpoints/users/groups/invite.ts
index 1a8d320f3a..4ae32a6bda 100644
--- a/packages/backend/src/server/api/endpoints/users/groups/invite.ts
+++ b/packages/backend/src/server/api/endpoints/users/groups/invite.ts
@@ -1,10 +1,12 @@
-import { UserGroups, UserGroupJoinings, UserGroupInvitations } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { UserGroupInvitation } from '@/models/entities/user-group-invitation.js';
-import { createNotification } from '@/services/create-notification.js';
-import { getUser } from '../../../common/getters.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserGroupsRepository, UserGroupJoiningsRepository, UserGroupInvitationsRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import type { UserGroupInvitation } from '@/models/entities/UserGroupInvitation.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { CreateNotificationService } from '@/core/CreateNotificationService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import define from '../../../define.js';
 
 export const meta = {
 	tags: ['groups', 'users'],
@@ -52,51 +54,69 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	// Fetch the group
-	const userGroup = await UserGroups.findOneBy({
-		id: ps.groupId,
-		userId: me.id,
-	});
-
-	if (userGroup == null) {
-		throw new ApiError(meta.errors.noSuchGroup);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userGroupsRepository)
+		private userGroupsRepository: UserGroupsRepository,
+
+		@Inject(DI.userGroupInvitationsRepository)
+		private userGroupInvitationsRepository: UserGroupInvitationsRepository,
+
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+
+		private idService: IdService,
+		private getterService: GetterService,
+		private createNotificationService: CreateNotificationService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch the group
+			const userGroup = await this.userGroupsRepository.findOneBy({
+				id: ps.groupId,
+				userId: me.id,
+			});
+
+			if (userGroup == null) {
+				throw new ApiError(meta.errors.noSuchGroup);
+			}
+
+			// Fetch the user
+			const user = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
+
+			const joining = await this.userGroupJoiningsRepository.findOneBy({
+				userGroupId: userGroup.id,
+				userId: user.id,
+			});
+
+			if (joining) {
+				throw new ApiError(meta.errors.alreadyAdded);
+			}
+
+			const existInvitation = await this.userGroupInvitationsRepository.findOneBy({
+				userGroupId: userGroup.id,
+				userId: user.id,
+			});
+
+			if (existInvitation) {
+				throw new ApiError(meta.errors.alreadyInvited);
+			}
+
+			const invitation = await this.userGroupInvitationsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				userId: user.id,
+				userGroupId: userGroup.id,
+			} as UserGroupInvitation).then(x => this.userGroupInvitationsRepository.findOneByOrFail(x.identifiers[0]));
+
+			// 通知を作成
+			this.createNotificationService.createNotification(user.id, 'groupInvited', {
+				notifierId: me.id,
+				userGroupInvitationId: invitation.id,
+			});
+		});
 	}
-
-	// Fetch the user
-	const user = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
-
-	const joining = await UserGroupJoinings.findOneBy({
-		userGroupId: userGroup.id,
-		userId: user.id,
-	});
-
-	if (joining) {
-		throw new ApiError(meta.errors.alreadyAdded);
-	}
-
-	const existInvitation = await UserGroupInvitations.findOneBy({
-		userGroupId: userGroup.id,
-		userId: user.id,
-	});
-
-	if (existInvitation) {
-		throw new ApiError(meta.errors.alreadyInvited);
-	}
-
-	const invitation = await UserGroupInvitations.insert({
-		id: genId(),
-		createdAt: new Date(),
-		userId: user.id,
-		userGroupId: userGroup.id,
-	} as UserGroupInvitation).then(x => UserGroupInvitations.findOneByOrFail(x.identifiers[0]));
-
-	// 通知を作成
-	createNotification(user.id, 'groupInvited', {
-		notifierId: me.id,
-		userGroupInvitationId: invitation.id,
-	});
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/users/groups/joined.ts b/packages/backend/src/server/api/endpoints/users/groups/joined.ts
index 16c6e544e5..e7e69f257d 100644
--- a/packages/backend/src/server/api/endpoints/users/groups/joined.ts
+++ b/packages/backend/src/server/api/endpoints/users/groups/joined.ts
@@ -1,6 +1,9 @@
 import { Not, In } from 'typeorm';
-import { UserGroups, UserGroupJoinings } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserGroupsRepository, UserGroupJoiningsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserGroupEntityService } from '@/core/entities/UserGroupEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['groups', 'account'],
@@ -29,17 +32,30 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const ownedGroups = await UserGroups.findBy({
-		userId: me.id,
-	});
-
-	const joinings = await UserGroupJoinings.findBy({
-		userId: me.id,
-		...(ownedGroups.length > 0 ? {
-			userGroupId: Not(In(ownedGroups.map(x => x.id))),
-		} : {}),
-	});
-
-	return await Promise.all(joinings.map(x => UserGroups.pack(x.userGroupId)));
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userGroupsRepository)
+		private userGroupsRepository: UserGroupsRepository,
+
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+
+		private userGroupEntityService: UserGroupEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const ownedGroups = await this.userGroupsRepository.findBy({
+				userId: me.id,
+			});
+
+			const joinings = await this.userGroupJoiningsRepository.findBy({
+				userId: me.id,
+				...(ownedGroups.length > 0 ? {
+					userGroupId: Not(In(ownedGroups.map(x => x.id))),
+				} : {}),
+			});
+
+			return await Promise.all(joinings.map(x => this.userGroupEntityService.pack(x.userGroupId)));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/groups/leave.ts b/packages/backend/src/server/api/endpoints/users/groups/leave.ts
index 83dc757db1..0a63dbb7f1 100644
--- a/packages/backend/src/server/api/endpoints/users/groups/leave.ts
+++ b/packages/backend/src/server/api/endpoints/users/groups/leave.ts
@@ -1,5 +1,7 @@
-import { UserGroups, UserGroupJoinings } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserGroupsRepository, UserGroupJoiningsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -35,19 +37,30 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	// Fetch the group
-	const userGroup = await UserGroups.findOneBy({
-		id: ps.groupId,
-	});
-
-	if (userGroup == null) {
-		throw new ApiError(meta.errors.noSuchGroup);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userGroupsRepository)
+		private userGroupsRepository: UserGroupsRepository,
 
-	if (me.id === userGroup.userId) {
-		throw new ApiError(meta.errors.youAreOwner);
-	}
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch the group
+			const userGroup = await this.userGroupsRepository.findOneBy({
+				id: ps.groupId,
+			});
+
+			if (userGroup == null) {
+				throw new ApiError(meta.errors.noSuchGroup);
+			}
 
-	await UserGroupJoinings.delete({ userGroupId: userGroup.id, userId: me.id });
-});
+			if (me.id === userGroup.userId) {
+				throw new ApiError(meta.errors.youAreOwner);
+			}
+
+			await this.userGroupJoiningsRepository.delete({ userGroupId: userGroup.id, userId: me.id });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/groups/owned.ts b/packages/backend/src/server/api/endpoints/users/groups/owned.ts
index d77cf1a52e..c9ae39561f 100644
--- a/packages/backend/src/server/api/endpoints/users/groups/owned.ts
+++ b/packages/backend/src/server/api/endpoints/users/groups/owned.ts
@@ -1,5 +1,8 @@
-import { UserGroups } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserGroupsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserGroupEntityService } from '@/core/entities/UserGroupEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['groups', 'account'],
@@ -28,10 +31,20 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const userGroups = await UserGroups.findBy({
-		userId: me.id,
-	});
-
-	return await Promise.all(userGroups.map(x => UserGroups.pack(x)));
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userGroupsRepository)
+		private userGroupsRepository: UserGroupsRepository,
+
+		private userGroupEntityService: UserGroupEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const userGroups = await this.userGroupsRepository.findBy({
+				userId: me.id,
+			});
+
+			return await Promise.all(userGroups.map(x => this.userGroupEntityService.pack(x)));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/groups/pull.ts b/packages/backend/src/server/api/endpoints/users/groups/pull.ts
index ba67a1e5c9..e6f60eef0a 100644
--- a/packages/backend/src/server/api/endpoints/users/groups/pull.ts
+++ b/packages/backend/src/server/api/endpoints/users/groups/pull.ts
@@ -1,7 +1,9 @@
-import { UserGroups, UserGroupJoinings } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserGroupsRepository, UserGroupJoiningsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { getUser } from '../../../common/getters.js';
 
 export const meta = {
 	tags: ['groups', 'users'],
@@ -43,27 +45,40 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	// Fetch the group
-	const userGroup = await UserGroups.findOneBy({
-		id: ps.groupId,
-		userId: me.id,
-	});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userGroupsRepository)
+		private userGroupsRepository: UserGroupsRepository,
 
-	if (userGroup == null) {
-		throw new ApiError(meta.errors.noSuchGroup);
-	}
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
 
-	// Fetch the user
-	const user = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch the group
+			const userGroup = await this.userGroupsRepository.findOneBy({
+				id: ps.groupId,
+				userId: me.id,
+			});
 
-	if (user.id === userGroup.userId) {
-		throw new ApiError(meta.errors.isOwner);
-	}
+			if (userGroup == null) {
+				throw new ApiError(meta.errors.noSuchGroup);
+			}
+
+			// Fetch the user
+			const user = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
 
-	// Pull the user
-	await UserGroupJoinings.delete({ userGroupId: userGroup.id, userId: user.id });
-});
+			if (user.id === userGroup.userId) {
+				throw new ApiError(meta.errors.isOwner);
+			}
+
+			// Pull the user
+			await this.userGroupJoiningsRepository.delete({ userGroupId: userGroup.id, userId: user.id });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/groups/show.ts b/packages/backend/src/server/api/endpoints/users/groups/show.ts
index 21e3d9da26..1cebfcd204 100644
--- a/packages/backend/src/server/api/endpoints/users/groups/show.ts
+++ b/packages/backend/src/server/api/endpoints/users/groups/show.ts
@@ -1,5 +1,8 @@
-import { UserGroups, UserGroupJoinings } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserGroupsRepository, UserGroupJoiningsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserGroupEntityService } from '@/core/entities/UserGroupEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -35,24 +38,37 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	// Fetch the group
-	const userGroup = await UserGroups.findOneBy({
-		id: ps.groupId,
-	});
-
-	if (userGroup == null) {
-		throw new ApiError(meta.errors.noSuchGroup);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userGroupsRepository)
+		private userGroupsRepository: UserGroupsRepository,
 
-	const joining = await UserGroupJoinings.findOneBy({
-		userId: me.id,
-		userGroupId: userGroup.id,
-	});
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
 
-	if (joining == null && userGroup.userId !== me.id) {
-		throw new ApiError(meta.errors.noSuchGroup);
-	}
+		private userGroupEntityService: UserGroupEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch the group
+			const userGroup = await this.userGroupsRepository.findOneBy({
+				id: ps.groupId,
+			});
+
+			if (userGroup == null) {
+				throw new ApiError(meta.errors.noSuchGroup);
+			}
 
-	return await UserGroups.pack(userGroup);
-});
+			const joining = await this.userGroupJoiningsRepository.findOneBy({
+				userId: me.id,
+				userGroupId: userGroup.id,
+			});
+
+			if (joining == null && userGroup.userId !== me.id) {
+				throw new ApiError(meta.errors.noSuchGroup);
+			}
+
+			return await this.userGroupEntityService.pack(userGroup);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/groups/transfer.ts b/packages/backend/src/server/api/endpoints/users/groups/transfer.ts
index 6456e70dd5..a8b2533b73 100644
--- a/packages/backend/src/server/api/endpoints/users/groups/transfer.ts
+++ b/packages/backend/src/server/api/endpoints/users/groups/transfer.ts
@@ -1,7 +1,10 @@
-import { UserGroups, UserGroupJoinings } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserGroupsRepository, UserGroupJoiningsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserGroupEntityService } from '@/core/entities/UserGroupEntityService.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { getUser } from '../../../common/getters.js';
 
 export const meta = {
 	tags: ['groups', 'users'],
@@ -49,35 +52,49 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	// Fetch the group
-	const userGroup = await UserGroups.findOneBy({
-		id: ps.groupId,
-		userId: me.id,
-	});
-
-	if (userGroup == null) {
-		throw new ApiError(meta.errors.noSuchGroup);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userGroupsRepository)
+		private userGroupsRepository: UserGroupsRepository,
+
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+
+		private userGroupEntityService: UserGroupEntityService,
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch the group
+			const userGroup = await this.userGroupsRepository.findOneBy({
+				id: ps.groupId,
+				userId: me.id,
+			});
+
+			if (userGroup == null) {
+				throw new ApiError(meta.errors.noSuchGroup);
+			}
+
+			// Fetch the user
+			const user = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
+
+			const joining = await this.userGroupJoiningsRepository.findOneBy({
+				userGroupId: userGroup.id,
+				userId: user.id,
+			});
+
+			if (joining == null) {
+				throw new ApiError(meta.errors.noSuchGroupMember);
+			}
+
+			await this.userGroupsRepository.update(userGroup.id, {
+				userId: ps.userId,
+			});
+
+			return await this.userGroupEntityService.pack(userGroup.id);
+		});
 	}
-
-	// Fetch the user
-	const user = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
-
-	const joining = await UserGroupJoinings.findOneBy({
-		userGroupId: userGroup.id,
-		userId: user.id,
-	});
-
-	if (joining == null) {
-		throw new ApiError(meta.errors.noSuchGroupMember);
-	}
-
-	await UserGroups.update(userGroup.id, {
-		userId: ps.userId,
-	});
-
-	return await UserGroups.pack(userGroup.id);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/users/groups/update.ts b/packages/backend/src/server/api/endpoints/users/groups/update.ts
index 0a96165fc4..b679625c85 100644
--- a/packages/backend/src/server/api/endpoints/users/groups/update.ts
+++ b/packages/backend/src/server/api/endpoints/users/groups/update.ts
@@ -1,5 +1,8 @@
-import { UserGroups } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserGroupsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserGroupEntityService } from '@/core/entities/UserGroupEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -36,20 +39,30 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	// Fetch the group
-	const userGroup = await UserGroups.findOneBy({
-		id: ps.groupId,
-		userId: me.id,
-	});
-
-	if (userGroup == null) {
-		throw new ApiError(meta.errors.noSuchGroup);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userGroupsRepository)
+		private userGroupsRepository: UserGroupsRepository,
+
+		private userGroupEntityService: UserGroupEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch the group
+			const userGroup = await this.userGroupsRepository.findOneBy({
+				id: ps.groupId,
+				userId: me.id,
+			});
 
-	await UserGroups.update(userGroup.id, {
-		name: ps.name,
-	});
+			if (userGroup == null) {
+				throw new ApiError(meta.errors.noSuchGroup);
+			}
 
-	return await UserGroups.pack(userGroup.id);
-});
+			await this.userGroupsRepository.update(userGroup.id, {
+				name: ps.name,
+			});
+
+			return await this.userGroupEntityService.pack(userGroup.id);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/lists/create.ts b/packages/backend/src/server/api/endpoints/users/lists/create.ts
index 783e63f5de..aa64ca1229 100644
--- a/packages/backend/src/server/api/endpoints/users/lists/create.ts
+++ b/packages/backend/src/server/api/endpoints/users/lists/create.ts
@@ -1,7 +1,10 @@
-import { UserLists } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { UserList } from '@/models/entities/user-list.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserListsRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import type { UserList } from '@/models/entities/UserList.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserListEntityService } from '@/core/entities/UserListEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['lists'],
@@ -28,13 +31,24 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const userList = await UserLists.insert({
-		id: genId(),
-		createdAt: new Date(),
-		userId: user.id,
-		name: ps.name,
-	} as UserList).then(x => UserLists.findOneByOrFail(x.identifiers[0]));
-
-	return await UserLists.pack(userList);
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userListsRepository)
+		private userListsRepository: UserListsRepository,
+
+		private userListEntityService: UserListEntityService,
+		private idService: IdService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const userList = await this.userListsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				userId: me.id,
+				name: ps.name,
+			} as UserList).then(x => this.userListsRepository.findOneByOrFail(x.identifiers[0]));
+
+			return await this.userListEntityService.pack(userList);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/lists/delete.ts b/packages/backend/src/server/api/endpoints/users/lists/delete.ts
index 5a7613c98a..0f4125a39f 100644
--- a/packages/backend/src/server/api/endpoints/users/lists/delete.ts
+++ b/packages/backend/src/server/api/endpoints/users/lists/delete.ts
@@ -1,5 +1,7 @@
-import { UserLists } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserListsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -29,15 +31,23 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const userList = await UserLists.findOneBy({
-		id: ps.listId,
-		userId: user.id,
-	});
-
-	if (userList == null) {
-		throw new ApiError(meta.errors.noSuchList);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userListsRepository)
+		private userListsRepository: UserListsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const userList = await this.userListsRepository.findOneBy({
+				id: ps.listId,
+				userId: me.id,
+			});
+
+			if (userList == null) {
+				throw new ApiError(meta.errors.noSuchList);
+			}
+
+			await this.userListsRepository.delete(userList.id);
+		});
 	}
-
-	await UserLists.delete(userList.id);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/users/lists/list.ts b/packages/backend/src/server/api/endpoints/users/lists/list.ts
index 889052fa30..919de22377 100644
--- a/packages/backend/src/server/api/endpoints/users/lists/list.ts
+++ b/packages/backend/src/server/api/endpoints/users/lists/list.ts
@@ -1,5 +1,8 @@
-import { UserLists } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserListsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserListEntityService } from '@/core/entities/UserListEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['lists', 'account'],
@@ -28,10 +31,20 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const userLists = await UserLists.findBy({
-		userId: me.id,
-	});
-
-	return await Promise.all(userLists.map(x => UserLists.pack(x)));
-});
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userListsRepository)
+		private userListsRepository: UserListsRepository,
+
+		private userListEntityService: UserListEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const userLists = await this.userListsRepository.findBy({
+				userId: me.id,
+			});
+
+			return await Promise.all(userLists.map(x => this.userListEntityService.pack(x)));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/lists/pull.ts b/packages/backend/src/server/api/endpoints/users/lists/pull.ts
index d3d1d6555c..89d97be93e 100644
--- a/packages/backend/src/server/api/endpoints/users/lists/pull.ts
+++ b/packages/backend/src/server/api/endpoints/users/lists/pull.ts
@@ -1,8 +1,11 @@
-import { publishUserListStream } from '@/services/stream.js';
-import { UserLists, UserListJoinings, Users } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserListsRepository, UserListJoiningsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { getUser } from '../../../common/getters.js';
 
 export const meta = {
 	tags: ['lists', 'users'],
@@ -38,25 +41,40 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	// Fetch the list
-	const userList = await UserLists.findOneBy({
-		id: ps.listId,
-		userId: me.id,
-	});
-
-	if (userList == null) {
-		throw new ApiError(meta.errors.noSuchList);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userListsRepository)
+		private userListsRepository: UserListsRepository,
+
+		@Inject(DI.userListJoiningsRepository)
+		private userListJoiningsRepository: UserListJoiningsRepository,
+
+		private userEntityService: UserEntityService,
+		private getterService: GetterService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch the list
+			const userList = await this.userListsRepository.findOneBy({
+				id: ps.listId,
+				userId: me.id,
+			});
 
-	// Fetch the user
-	const user = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
+			if (userList == null) {
+				throw new ApiError(meta.errors.noSuchList);
+			}
 
-	// Pull the user
-	await UserListJoinings.delete({ userListId: userList.id, userId: user.id });
+			// Fetch the user
+			const user = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
 
-	publishUserListStream(userList.id, 'userRemoved', await Users.pack(user));
-});
+			// Pull the user
+			await this.userListJoiningsRepository.delete({ userListId: userList.id, userId: user.id });
+
+			this.globalEventService.publishUserListStream(userList.id, 'userRemoved', await this.userEntityService.pack(user));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/lists/push.ts b/packages/backend/src/server/api/endpoints/users/lists/push.ts
index 12b7b86342..77ad772b13 100644
--- a/packages/backend/src/server/api/endpoints/users/lists/push.ts
+++ b/packages/backend/src/server/api/endpoints/users/lists/push.ts
@@ -1,8 +1,10 @@
-import { pushUserToUserList } from '@/services/user-list/push.js';
-import { UserLists, UserListJoinings, Blockings } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserListsRepository, UserListJoiningsRepository, BlockingsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GetterService } from '@/server/api/common/GetterService.js';
+import { UserListService } from '@/core/UserListService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
-import { getUser } from '../../../common/getters.js';
 
 export const meta = {
 	tags: ['lists', 'users'],
@@ -50,43 +52,60 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	// Fetch the list
-	const userList = await UserLists.findOneBy({
-		id: ps.listId,
-		userId: me.id,
-	});
-
-	if (userList == null) {
-		throw new ApiError(meta.errors.noSuchList);
-	}
-
-	// Fetch the user
-	const user = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
-
-	// Check blocking
-	if (user.id !== me.id) {
-		const block = await Blockings.findOneBy({
-			blockerId: user.id,
-			blockeeId: me.id,
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userListsRepository)
+		private userListsRepository: UserListsRepository,
+
+		@Inject(DI.userListJoiningsRepository)
+		private userListJoiningsRepository: UserListJoiningsRepository,
+
+		@Inject(DI.blockingsRepository)
+		private blockingsRepository: BlockingsRepository,
+
+		private getterService: GetterService,
+		private userListService: UserListService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch the list
+			const userList = await this.userListsRepository.findOneBy({
+				id: ps.listId,
+				userId: me.id,
+			});
+
+			if (userList == null) {
+				throw new ApiError(meta.errors.noSuchList);
+			}
+
+			// Fetch the user
+			const user = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
+
+			// Check blocking
+			if (user.id !== me.id) {
+				const block = await this.blockingsRepository.findOneBy({
+					blockerId: user.id,
+					blockeeId: me.id,
+				});
+				if (block) {
+					throw new ApiError(meta.errors.youHaveBeenBlocked);
+				}
+			}
+
+			const exist = await this.userListJoiningsRepository.findOneBy({
+				userListId: userList.id,
+				userId: user.id,
+			});
+
+			if (exist) {
+				throw new ApiError(meta.errors.alreadyAdded);
+			}
+
+			// Push the user
+			await this.userListService.push(user, userList);
 		});
-		if (block) {
-			throw new ApiError(meta.errors.youHaveBeenBlocked);
-		}
-	}
-
-	const exist = await UserListJoinings.findOneBy({
-		userListId: userList.id,
-		userId: user.id,
-	});
-
-	if (exist) {
-		throw new ApiError(meta.errors.alreadyAdded);
 	}
-
-	// Push the user
-	await pushUserToUserList(user, userList);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/users/lists/show.ts b/packages/backend/src/server/api/endpoints/users/lists/show.ts
index fd0612f735..62e730b2f7 100644
--- a/packages/backend/src/server/api/endpoints/users/lists/show.ts
+++ b/packages/backend/src/server/api/endpoints/users/lists/show.ts
@@ -1,5 +1,8 @@
-import { UserLists } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserListsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserListEntityService } from '@/core/entities/UserListEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -35,16 +38,26 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	// Fetch the list
-	const userList = await UserLists.findOneBy({
-		id: ps.listId,
-		userId: me.id,
-	});
-
-	if (userList == null) {
-		throw new ApiError(meta.errors.noSuchList);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userListsRepository)
+		private userListsRepository: UserListsRepository,
+
+		private userListEntityService: UserListEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch the list
+			const userList = await this.userListsRepository.findOneBy({
+				id: ps.listId,
+				userId: me.id,
+			});
+
+			if (userList == null) {
+				throw new ApiError(meta.errors.noSuchList);
+			}
+
+			return await this.userListEntityService.pack(userList);
+		});
 	}
-
-	return await UserLists.pack(userList);
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/users/lists/update.ts b/packages/backend/src/server/api/endpoints/users/lists/update.ts
index 65e708b959..c6669d24d1 100644
--- a/packages/backend/src/server/api/endpoints/users/lists/update.ts
+++ b/packages/backend/src/server/api/endpoints/users/lists/update.ts
@@ -1,5 +1,8 @@
-import { UserLists } from '@/models/index.js';
-import define from '../../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserListsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserListEntityService } from '@/core/entities/UserListEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../../error.js';
 
 export const meta = {
@@ -36,20 +39,30 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	// Fetch the list
-	const userList = await UserLists.findOneBy({
-		id: ps.listId,
-		userId: user.id,
-	});
-
-	if (userList == null) {
-		throw new ApiError(meta.errors.noSuchList);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userListsRepository)
+		private userListsRepository: UserListsRepository,
+
+		private userListEntityService: UserListEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Fetch the list
+			const userList = await this.userListsRepository.findOneBy({
+				id: ps.listId,
+				userId: me.id,
+			});
 
-	await UserLists.update(userList.id, {
-		name: ps.name,
-	});
+			if (userList == null) {
+				throw new ApiError(meta.errors.noSuchList);
+			}
 
-	return await UserLists.pack(userList.id);
-});
+			await this.userListsRepository.update(userList.id, {
+				name: ps.name,
+			});
+
+			return await this.userListEntityService.pack(userList.id);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/notes.ts b/packages/backend/src/server/api/endpoints/users/notes.ts
index 9fa56fe83a..bb8104584c 100644
--- a/packages/backend/src/server/api/endpoints/users/notes.ts
+++ b/packages/backend/src/server/api/endpoints/users/notes.ts
@@ -1,12 +1,12 @@
 import { Brackets } from 'typeorm';
-import { Notes } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { NotesRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import { getUser } from '../../common/getters.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 { generateBlockedUserQuery } from '../../common/generate-block-query.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['users', 'notes'],
@@ -53,70 +53,82 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	// Lookup user
-	const user = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
-
-	//#region Construct query
-	const query = makePaginationQuery(Notes.createQueryBuilder('note'), ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
-		.andWhere('note.userId = :userId', { userId: user.id })
-		.innerJoinAndSelect('note.user', 'user')
-		.leftJoinAndSelect('user.avatar', 'avatar')
-		.leftJoinAndSelect('user.banner', 'banner')
-		.leftJoinAndSelect('note.reply', 'reply')
-		.leftJoinAndSelect('note.renote', 'renote')
-		.leftJoinAndSelect('reply.user', 'replyUser')
-		.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
-		.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
-		.leftJoinAndSelect('renote.user', 'renoteUser')
-		.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
-		.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
-
-	generateVisibilityQuery(query, me);
-	if (me) {
-		generateMutedUserQuery(query, me, user);
-		generateBlockedUserQuery(query, me);
-	}
-
-	if (ps.withFiles) {
-		query.andWhere('note.fileIds != \'{}\'');
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		private noteEntityService: NoteEntityService,
+		private queryService: QueryService,
+		private getterService: GetterService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Lookup user
+			const user = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
+
+			//#region Construct query
+			const query = this.queryService.makePaginationQuery(this.notesRepository.createQueryBuilder('note'), ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
+				.andWhere('note.userId = :userId', { userId: user.id })
+				.innerJoinAndSelect('note.user', 'user')
+				.leftJoinAndSelect('user.avatar', 'avatar')
+				.leftJoinAndSelect('user.banner', 'banner')
+				.leftJoinAndSelect('note.reply', 'reply')
+				.leftJoinAndSelect('note.renote', 'renote')
+				.leftJoinAndSelect('reply.user', 'replyUser')
+				.leftJoinAndSelect('replyUser.avatar', 'replyUserAvatar')
+				.leftJoinAndSelect('replyUser.banner', 'replyUserBanner')
+				.leftJoinAndSelect('renote.user', 'renoteUser')
+				.leftJoinAndSelect('renoteUser.avatar', 'renoteUserAvatar')
+				.leftJoinAndSelect('renoteUser.banner', 'renoteUserBanner');
+
+			this.queryService.generateVisibilityQuery(query, me);
+			if (me) {
+				this.queryService.generateMutedUserQuery(query, me, user);
+				this.queryService.generateBlockedUserQuery(query, me);
+			}
 
-	if (ps.fileType != null) {
-		query.andWhere('note.fileIds != \'{}\'');
-		query.andWhere(new Brackets(qb => {
-			for (const type of ps.fileType!) {
-				const i = ps.fileType!.indexOf(type);
-				qb.orWhere(`:type${i} = ANY(note.attachedFileTypes)`, { [`type${i}`]: type });
+			if (ps.withFiles) {
+				query.andWhere('note.fileIds != \'{}\'');
 			}
-		}));
 
-		if (ps.excludeNsfw) {
-			query.andWhere('note.cw IS NULL');
-			query.andWhere('0 = (SELECT COUNT(*) FROM drive_file df WHERE df.id = ANY(note."fileIds") AND df."isSensitive" = TRUE)');
-		}
-	}
+			if (ps.fileType != null) {
+				query.andWhere('note.fileIds != \'{}\'');
+				query.andWhere(new Brackets(qb => {
+					for (const type of ps.fileType!) {
+						const i = ps.fileType!.indexOf(type);
+						qb.orWhere(`:type${i} = ANY(note.attachedFileTypes)`, { [`type${i}`]: type });
+					}
+				}));
+
+				if (ps.excludeNsfw) {
+					query.andWhere('note.cw IS NULL');
+					query.andWhere('0 = (SELECT COUNT(*) FROM drive_file df WHERE df.id = ANY(note."fileIds") AND df."isSensitive" = TRUE)');
+				}
+			}
 
-	if (!ps.includeReplies) {
-		query.andWhere('note.replyId IS NULL');
-	}
+			if (!ps.includeReplies) {
+				query.andWhere('note.replyId IS NULL');
+			}
 
-	if (ps.includeMyRenotes === false) {
-		query.andWhere(new Brackets(qb => {
-			qb.orWhere('note.userId != :userId', { userId: user.id });
-			qb.orWhere('note.renoteId IS NULL');
-			qb.orWhere('note.text IS NOT NULL');
-			qb.orWhere('note.fileIds != \'{}\'');
-			qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
-		}));
-	}
+			if (ps.includeMyRenotes === false) {
+				query.andWhere(new Brackets(qb => {
+					qb.orWhere('note.userId != :userId', { userId: user.id });
+					qb.orWhere('note.renoteId IS NULL');
+					qb.orWhere('note.text IS NOT NULL');
+					qb.orWhere('note.fileIds != \'{}\'');
+					qb.orWhere('0 < (SELECT COUNT(*) FROM poll WHERE poll."noteId" = note.id)');
+				}));
+			}
 
-	//#endregion
+			//#endregion
 
-	const timeline = await query.take(ps.limit).getMany();
+			const timeline = await query.take(ps.limit).getMany();
 
-	return await Notes.packMany(timeline, me);
-});
+			return await this.noteEntityService.packMany(timeline, me);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/pages.ts b/packages/backend/src/server/api/endpoints/users/pages.ts
index b1d28af845..96c7ef1e70 100644
--- a/packages/backend/src/server/api/endpoints/users/pages.ts
+++ b/packages/backend/src/server/api/endpoints/users/pages.ts
@@ -1,6 +1,9 @@
-import { Pages } from '@/models/index.js';
-import define from '../../define.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { PageEntityService } from '@/core/entities/PageEntityService.js';
+import { PagesRepository } from '@/models';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['users', 'pages'],
@@ -30,14 +33,25 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, user) => {
-	const query = makePaginationQuery(Pages.createQueryBuilder('page'), ps.sinceId, ps.untilId)
-		.andWhere('page.userId = :userId', { userId: ps.userId })
-		.andWhere('page.visibility = \'public\'');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.pagesRepository)
+		private pagesRepository: PagesRepository,
 
-	const pages = await query
-		.take(ps.limit)
-		.getMany();
+		private pageEntityService: PageEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.queryService.makePaginationQuery(this.pagesRepository.createQueryBuilder('page'), ps.sinceId, ps.untilId)
+				.andWhere('page.userId = :userId', { userId: ps.userId })
+				.andWhere('page.visibility = \'public\'');
 
-	return await Pages.packMany(pages);
-});
+			const pages = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await this.pageEntityService.packMany(pages);
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/reactions.ts b/packages/backend/src/server/api/endpoints/users/reactions.ts
index 9668bd21b8..6b4d882b7c 100644
--- a/packages/backend/src/server/api/endpoints/users/reactions.ts
+++ b/packages/backend/src/server/api/endpoints/users/reactions.ts
@@ -1,7 +1,9 @@
-import { NoteReactions, UserProfiles } from '@/models/index.js';
-import define from '../../define.js';
-import { makePaginationQuery } from '../../common/make-pagination-query.js';
-import { generateVisibilityQuery } from '../../common/generate-visibility-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserProfilesRepository, NoteReactionsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { NoteReactionEntityService } from '@/core/entities/NoteReactionEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
 
 export const meta = {
@@ -44,23 +46,37 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const profile = await UserProfiles.findOneByOrFail({ userId: ps.userId });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
 
-	if (me == null || (me.id !== ps.userId && !profile.publicReactions)) {
-		throw new ApiError(meta.errors.reactionsNotPublic);
-	}
+		@Inject(DI.noteReactionsRepository)
+		private noteReactionsRepository: NoteReactionsRepository,
+
+		private noteReactionEntityService: NoteReactionEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: ps.userId });
 
-	const query = makePaginationQuery(NoteReactions.createQueryBuilder('reaction'),
-		ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
-		.andWhere('reaction.userId = :userId', { userId: ps.userId })
-		.leftJoinAndSelect('reaction.note', 'note');
+			if (me == null || (me.id !== ps.userId && !profile.publicReactions)) {
+				throw new ApiError(meta.errors.reactionsNotPublic);
+			}
 
-	generateVisibilityQuery(query, me);
+			const query = this.queryService.makePaginationQuery(this.noteReactionsRepository.createQueryBuilder('reaction'),
+				ps.sinceId, ps.untilId, ps.sinceDate, ps.untilDate)
+				.andWhere('reaction.userId = :userId', { userId: ps.userId })
+				.leftJoinAndSelect('reaction.note', 'note');
 
-	const reactions = await query
-		.take(ps.limit)
-		.getMany();
+			this.queryService.generateVisibilityQuery(query, me);
 
-	return await Promise.all(reactions.map(reaction => NoteReactions.pack(reaction, me, { withNote: true })));
-});
+			const reactions = await query
+				.take(ps.limit)
+				.getMany();
+
+			return await Promise.all(reactions.map(reaction => this.noteReactionEntityService.pack(reaction, me, { withNote: true })));
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/recommendation.ts b/packages/backend/src/server/api/endpoints/users/recommendation.ts
index e7654e1714..e50a5706d9 100644
--- a/packages/backend/src/server/api/endpoints/users/recommendation.ts
+++ b/packages/backend/src/server/api/endpoints/users/recommendation.ts
@@ -1,8 +1,10 @@
 import ms from 'ms';
-import { Users, Followings } from '@/models/index.js';
-import define from '../../define.js';
-import { generateMutedUserQueryForUsers } from '../../common/generate-muted-user-query.js';
-import { generateBlockedUserQuery, generateBlockQueryForUsers } from '../../common/generate-block-query.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository, FollowingsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { QueryService } from '@/core/QueryService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['users'],
@@ -34,29 +36,43 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const query = Users.createQueryBuilder('user')
-		.where('user.isLocked = FALSE')
-		.andWhere('user.isExplorable = TRUE')
-		.andWhere('user.host IS NULL')
-		.andWhere('user.updatedAt >= :date', { date: new Date(Date.now() - ms('7days')) })
-		.andWhere('user.id != :meId', { meId: me.id })
-		.orderBy('user.followersCount', 'DESC');
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	generateMutedUserQueryForUsers(query, me);
-	generateBlockQueryForUsers(query, me);
-	generateBlockedUserQuery(query, me);
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+		
+		private userEntityService: UserEntityService,
+		private queryService: QueryService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const query = this.usersRepository.createQueryBuilder('user')
+				.where('user.isLocked = FALSE')
+				.andWhere('user.isExplorable = TRUE')
+				.andWhere('user.host IS NULL')
+				.andWhere('user.updatedAt >= :date', { date: new Date(Date.now() - ms('7days')) })
+				.andWhere('user.id != :meId', { meId: me.id })
+				.orderBy('user.followersCount', 'DESC');
 
-	const followingQuery = Followings.createQueryBuilder('following')
-		.select('following.followeeId')
-		.where('following.followerId = :followerId', { followerId: me.id });
+			this.queryService.generateMutedUserQueryForUsers(query, me);
+			this.queryService.generateBlockQueryForUsers(query, me);
+			this.queryService.generateBlockedUserQuery(query, me);
 
-	query
-		.andWhere(`user.id NOT IN (${ followingQuery.getQuery() })`);
+			const followingQuery = this.followingsRepository.createQueryBuilder('following')
+				.select('following.followeeId')
+				.where('following.followerId = :followerId', { followerId: me.id });
 
-	query.setParameters(followingQuery.getParameters());
+			query
+				.andWhere(`user.id NOT IN (${ followingQuery.getQuery() })`);
 
-	const users = await query.take(ps.limit).skip(ps.offset).getMany();
+			query.setParameters(followingQuery.getParameters());
 
-	return await Users.packMany(users, me, { detail: true });
-});
+			const users = await query.take(ps.limit).skip(ps.offset).getMany();
+
+			return await this.userEntityService.packMany(users, me, { detail: true });
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/relation.ts b/packages/backend/src/server/api/endpoints/users/relation.ts
index 233a6a90b4..aea75ae799 100644
--- a/packages/backend/src/server/api/endpoints/users/relation.ts
+++ b/packages/backend/src/server/api/endpoints/users/relation.ts
@@ -1,5 +1,8 @@
-import { Users } from '@/models/index.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['users'],
@@ -112,10 +115,20 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const ids = Array.isArray(ps.userId) ? ps.userId : [ps.userId];
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	const relations = await Promise.all(ids.map(id => Users.getRelation(me.id, id)));
+		private userEntityService: UserEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const ids = Array.isArray(ps.userId) ? ps.userId : [ps.userId];
 
-	return Array.isArray(ps.userId) ? relations : relations[0];
-});
+			const relations = await Promise.all(ids.map(id => this.userEntityService.getRelation(me.id, id)));
+
+			return Array.isArray(ps.userId) ? relations : relations[0];
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/report-abuse.ts b/packages/backend/src/server/api/endpoints/users/report-abuse.ts
index a9987eafa9..5c211a9017 100644
--- a/packages/backend/src/server/api/endpoints/users/report-abuse.ts
+++ b/packages/backend/src/server/api/endpoints/users/report-abuse.ts
@@ -1,12 +1,14 @@
 import * as sanitizeHtml from 'sanitize-html';
-import { publishAdminStream } from '@/services/stream.js';
-import { AbuseUserReports, Users } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { sendEmail } from '@/services/send-email.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { getUser } from '../../common/getters.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository, AbuseUserReportsRepository } from '@/models/index.js';
+import { IdService } from '@/core/IdService.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { MetaService } from '@/core/MetaService.js';
+import { EmailService } from '@/core/EmailService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
-import define from '../../define.js';
+import { GetterService } from '../../common/GetterService.js';
 
 export const meta = {
 	tags: ['users'],
@@ -46,55 +48,72 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	// Lookup user
-	const user = await getUser(ps.userId).catch(e => {
-		if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-		throw e;
-	});
-
-	if (user.id === me.id) {
-		throw new ApiError(meta.errors.cannotReportYourself);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
 
-	if (user.isAdmin) {
-		throw new ApiError(meta.errors.cannotReportAdmin);
-	}
+		@Inject(DI.abuseUserReportsRepository)
+		private abuseUserReportsRepository: AbuseUserReportsRepository,
 
-	const report = await AbuseUserReports.insert({
-		id: genId(),
-		createdAt: new Date(),
-		targetUserId: user.id,
-		targetUserHost: user.host,
-		reporterId: me.id,
-		reporterHost: null,
-		comment: ps.comment,
-	}).then(x => AbuseUserReports.findOneByOrFail(x.identifiers[0]));
-
-	// Publish event to moderators
-	setImmediate(async () => {
-		const moderators = await Users.find({
-			where: [{
-				isAdmin: true,
-			}, {
-				isModerator: true,
-			}],
-		});
+		private idService: IdService,
+		private metaService: MetaService,
+		private emailService: EmailService,
+		private getterService: GetterService,
+		private globalEventService: GlobalEventService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// Lookup user
+			const user = await this.getterService.getUser(ps.userId).catch(err => {
+				if (err.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
+				throw err;
+			});
+
+			if (user.id === me.id) {
+				throw new ApiError(meta.errors.cannotReportYourself);
+			}
+
+			if (user.isAdmin) {
+				throw new ApiError(meta.errors.cannotReportAdmin);
+			}
 
-		for (const moderator of moderators) {
-			publishAdminStream(moderator.id, 'newAbuseUserReport', {
-				id: report.id,
-				targetUserId: report.targetUserId,
-				reporterId: report.reporterId,
-				comment: report.comment,
+			const report = await this.abuseUserReportsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				targetUserId: user.id,
+				targetUserHost: user.host,
+				reporterId: me.id,
+				reporterHost: null,
+				comment: ps.comment,
+			}).then(x => this.abuseUserReportsRepository.findOneByOrFail(x.identifiers[0]));
+
+			// Publish event to moderators
+			setImmediate(async () => {
+				const moderators = await this.usersRepository.find({
+					where: [{
+						isAdmin: true,
+					}, {
+						isModerator: true,
+					}],
+				});
+
+				for (const moderator of moderators) {
+					this.globalEventService.publishAdminStream(moderator.id, 'newAbuseUserReport', {
+						id: report.id,
+						targetUserId: report.targetUserId,
+						reporterId: report.reporterId,
+						comment: report.comment,
+					});
+				}
+
+				const meta = await this.metaService.fetch();
+				if (meta.email) {
+					this.emailService.sendEmail(meta.email, 'New abuse report',
+						sanitizeHtml(ps.comment),
+						sanitizeHtml(ps.comment));
+				}
 			});
-		}
-
-		const meta = await fetchMeta();
-		if (meta.email) {
-			sendEmail(meta.email, 'New abuse report',
-				sanitizeHtml(ps.comment),
-				sanitizeHtml(ps.comment));
-		}
-	});
-});
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/search-by-username-and-host.ts b/packages/backend/src/server/api/endpoints/users/search-by-username-and-host.ts
index 6e5bc46bb5..1747dc93f6 100644
--- a/packages/backend/src/server/api/endpoints/users/search-by-username-and-host.ts
+++ b/packages/backend/src/server/api/endpoints/users/search-by-username-and-host.ts
@@ -1,8 +1,11 @@
 import { Brackets } from 'typeorm';
-import { Followings, Users } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository, FollowingsRepository } from '@/models/index.js';
 import { USER_ACTIVE_THRESHOLD } from '@/const.js';
-import { User } from '@/models/entities/user.js';
-import define from '../../define.js';
+import type { User } from '@/models/entities/User.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['users'],
@@ -39,78 +42,91 @@ export const paramDef = {
 // TODO: avatar,bannerをJOINしたいけどエラーになる
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const activeThreshold = new Date(Date.now() - (1000 * 60 * 60 * 24 * 30)); // 30日
-
-	if (ps.host) {
-		const q = Users.createQueryBuilder('user')
-			.where('user.isSuspended = FALSE')
-			.andWhere('user.host LIKE :host', { host: ps.host.toLowerCase() + '%' });
-
-		if (ps.username) {
-			q.andWhere('user.usernameLower LIKE :username', { username: ps.username.toLowerCase() + '%' });
-		}
-
-		q.andWhere('user.updatedAt IS NOT NULL');
-		q.orderBy('user.updatedAt', 'DESC');
-
-		const users = await q.take(ps.limit).getMany();
-
-		return await Users.packMany(users, me, { detail: ps.detail });
-	} else if (ps.username) {
-		let users: User[] = [];
-
-		if (me) {
-			const followingQuery = Followings.createQueryBuilder('following')
-				.select('following.followeeId')
-				.where('following.followerId = :followerId', { followerId: me.id });
-
-			const query = Users.createQueryBuilder('user')
-				.where(`user.id IN (${ followingQuery.getQuery() })`)
-				.andWhere('user.id != :meId', { meId: me.id })
-				.andWhere('user.isSuspended = FALSE')
-				.andWhere('user.usernameLower LIKE :username', { username: ps.username.toLowerCase() + '%' })
-				.andWhere(new Brackets(qb => { qb
-					.where('user.updatedAt IS NULL')
-					.orWhere('user.updatedAt > :activeThreshold', { activeThreshold: activeThreshold });
-				}));
-
-			query.setParameters(followingQuery.getParameters());
-
-			users = await query
-				.orderBy('user.usernameLower', 'ASC')
-				.take(ps.limit)
-				.getMany();
-
-			if (users.length < ps.limit) {
-				const otherQuery = await Users.createQueryBuilder('user')
-					.where(`user.id NOT IN (${ followingQuery.getQuery() })`)
-					.andWhere('user.id != :meId', { meId: me.id })
-					.andWhere('user.isSuspended = FALSE')
-					.andWhere('user.usernameLower LIKE :username', { username: ps.username.toLowerCase() + '%' })
-					.andWhere('user.updatedAt IS NOT NULL');
-
-				otherQuery.setParameters(followingQuery.getParameters());
-
-				const otherUsers = await otherQuery
-					.orderBy('user.updatedAt', 'DESC')
-					.take(ps.limit - users.length)
-					.getMany();
-
-				users = users.concat(otherUsers);
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const activeThreshold = new Date(Date.now() - (1000 * 60 * 60 * 24 * 30)); // 30日
+
+			if (ps.host) {
+				const q = this.usersRepository.createQueryBuilder('user')
+					.where('user.isSuspended = FALSE')
+					.andWhere('user.host LIKE :host', { host: ps.host.toLowerCase() + '%' });
+
+				if (ps.username) {
+					q.andWhere('user.usernameLower LIKE :username', { username: ps.username.toLowerCase() + '%' });
+				}
+
+				q.andWhere('user.updatedAt IS NOT NULL');
+				q.orderBy('user.updatedAt', 'DESC');
+
+				const users = await q.take(ps.limit).getMany();
+
+				return await this.userEntityService.packMany(users, me, { detail: ps.detail });
+			} else if (ps.username) {
+				let users: User[] = [];
+
+				if (me) {
+					const followingQuery = this.followingsRepository.createQueryBuilder('following')
+						.select('following.followeeId')
+						.where('following.followerId = :followerId', { followerId: me.id });
+
+					const query = this.usersRepository.createQueryBuilder('user')
+						.where(`user.id IN (${ followingQuery.getQuery() })`)
+						.andWhere('user.id != :meId', { meId: me.id })
+						.andWhere('user.isSuspended = FALSE')
+						.andWhere('user.usernameLower LIKE :username', { username: ps.username.toLowerCase() + '%' })
+						.andWhere(new Brackets(qb => { qb
+							.where('user.updatedAt IS NULL')
+							.orWhere('user.updatedAt > :activeThreshold', { activeThreshold: activeThreshold });
+						}));
+
+					query.setParameters(followingQuery.getParameters());
+
+					users = await query
+						.orderBy('user.usernameLower', 'ASC')
+						.take(ps.limit)
+						.getMany();
+
+					if (users.length < ps.limit) {
+						const otherQuery = await this.usersRepository.createQueryBuilder('user')
+							.where(`user.id NOT IN (${ followingQuery.getQuery() })`)
+							.andWhere('user.id != :meId', { meId: me.id })
+							.andWhere('user.isSuspended = FALSE')
+							.andWhere('user.usernameLower LIKE :username', { username: ps.username.toLowerCase() + '%' })
+							.andWhere('user.updatedAt IS NOT NULL');
+
+						otherQuery.setParameters(followingQuery.getParameters());
+
+						const otherUsers = await otherQuery
+							.orderBy('user.updatedAt', 'DESC')
+							.take(ps.limit - users.length)
+							.getMany();
+
+						users = users.concat(otherUsers);
+					}
+				} else {
+					users = await this.usersRepository.createQueryBuilder('user')
+						.where('user.isSuspended = FALSE')
+						.andWhere('user.usernameLower LIKE :username', { username: ps.username.toLowerCase() + '%' })
+						.andWhere('user.updatedAt IS NOT NULL')
+						.orderBy('user.updatedAt', 'DESC')
+						.take(ps.limit - users.length)
+						.getMany();
+				}
+
+				return await this.userEntityService.packMany(users, me, { detail: !!ps.detail });
 			}
-		} else {
-			users = await Users.createQueryBuilder('user')
-				.where('user.isSuspended = FALSE')
-				.andWhere('user.usernameLower LIKE :username', { username: ps.username.toLowerCase() + '%' })
-				.andWhere('user.updatedAt IS NOT NULL')
-				.orderBy('user.updatedAt', 'DESC')
-				.take(ps.limit - users.length)
-				.getMany();
-		}
-
-		return await Users.packMany(users, me, { detail: !!ps.detail });
-	}
 
-	return [];
-});
+			return [];
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/users/search.ts b/packages/backend/src/server/api/endpoints/users/search.ts
index 01729de667..9879b1b68b 100644
--- a/packages/backend/src/server/api/endpoints/users/search.ts
+++ b/packages/backend/src/server/api/endpoints/users/search.ts
@@ -1,7 +1,10 @@
 import { Brackets } from 'typeorm';
-import { UserProfiles, Users } from '@/models/index.js';
-import { User } from '@/models/entities/user.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository, UserProfilesRepository } from '@/models/index.js';
+import type { User } from '@/models/entities/User.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DI } from '@/di-symbols.js';
 
 export const meta = {
 	tags: ['users'],
@@ -34,89 +37,102 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const activeThreshold = new Date(Date.now() - (1000 * 60 * 60 * 24 * 30)); // 30日
-
-	const isUsername = ps.query.startsWith('@');
-
-	let users: User[] = [];
-
-	if (isUsername) {
-		const usernameQuery = Users.createQueryBuilder('user')
-			.where('user.usernameLower LIKE :username', { username: ps.query.replace('@', '').toLowerCase() + '%' })
-			.andWhere(new Brackets(qb => { qb
-				.where('user.updatedAt IS NULL')
-				.orWhere('user.updatedAt > :activeThreshold', { activeThreshold: activeThreshold });
-			}))
-			.andWhere('user.isSuspended = FALSE');
-
-		if (ps.origin === 'local') {
-			usernameQuery.andWhere('user.host IS NULL');
-		} else if (ps.origin === 'remote') {
-			usernameQuery.andWhere('user.host IS NOT NULL');
-		}
-
-		users = await usernameQuery
-			.orderBy('user.updatedAt', 'DESC', 'NULLS LAST')
-			.take(ps.limit)
-			.skip(ps.offset)
-			.getMany();
-	} else {
-		const nameQuery = Users.createQueryBuilder('user')
-			.where(new Brackets(qb => { 
-				qb.where('user.name ILIKE :query', { query: '%' + ps.query + '%' });
-
-				// Also search username if it qualifies as username
-				if (Users.validateLocalUsername(ps.query)) {
-					qb.orWhere('user.usernameLower LIKE :username', { username: '%' + ps.query.toLowerCase() + '%' });
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		private userEntityService: UserEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const activeThreshold = new Date(Date.now() - (1000 * 60 * 60 * 24 * 30)); // 30日
+
+			const isUsername = ps.query.startsWith('@');
+
+			let users: User[] = [];
+
+			if (isUsername) {
+				const usernameQuery = this.usersRepository.createQueryBuilder('user')
+					.where('user.usernameLower LIKE :username', { username: ps.query.replace('@', '').toLowerCase() + '%' })
+					.andWhere(new Brackets(qb => { qb
+						.where('user.updatedAt IS NULL')
+						.orWhere('user.updatedAt > :activeThreshold', { activeThreshold: activeThreshold });
+					}))
+					.andWhere('user.isSuspended = FALSE');
+
+				if (ps.origin === 'local') {
+					usernameQuery.andWhere('user.host IS NULL');
+				} else if (ps.origin === 'remote') {
+					usernameQuery.andWhere('user.host IS NOT NULL');
+				}
+
+				users = await usernameQuery
+					.orderBy('user.updatedAt', 'DESC', 'NULLS LAST')
+					.take(ps.limit)
+					.skip(ps.offset)
+					.getMany();
+			} else {
+				const nameQuery = this.usersRepository.createQueryBuilder('user')
+					.where(new Brackets(qb => { 
+						qb.where('user.name ILIKE :query', { query: '%' + ps.query + '%' });
+
+						// Also search username if it qualifies as username
+						if (this.userEntityService.validateLocalUsername(ps.query)) {
+							qb.orWhere('user.usernameLower LIKE :username', { username: '%' + ps.query.toLowerCase() + '%' });
+						}
+					}))
+					.andWhere(new Brackets(qb => { qb
+						.where('user.updatedAt IS NULL')
+						.orWhere('user.updatedAt > :activeThreshold', { activeThreshold: activeThreshold });
+					}))
+					.andWhere('user.isSuspended = FALSE');
+
+				if (ps.origin === 'local') {
+					nameQuery.andWhere('user.host IS NULL');
+				} else if (ps.origin === 'remote') {
+					nameQuery.andWhere('user.host IS NOT NULL');
+				}
+
+				users = await nameQuery
+					.orderBy('user.updatedAt', 'DESC', 'NULLS LAST')
+					.take(ps.limit)
+					.skip(ps.offset)
+					.getMany();
+
+				if (users.length < ps.limit) {
+					const profQuery = this.userProfilesRepository.createQueryBuilder('prof')
+						.select('prof.userId')
+						.where('prof.description ILIKE :query', { query: '%' + ps.query + '%' });
+
+					if (ps.origin === 'local') {
+						profQuery.andWhere('prof.userHost IS NULL');
+					} else if (ps.origin === 'remote') {
+						profQuery.andWhere('prof.userHost IS NOT NULL');
+					}
+
+					const query = this.usersRepository.createQueryBuilder('user')
+						.where(`user.id IN (${ profQuery.getQuery() })`)
+						.andWhere(new Brackets(qb => { qb
+							.where('user.updatedAt IS NULL')
+							.orWhere('user.updatedAt > :activeThreshold', { activeThreshold: activeThreshold });
+						}))
+						.andWhere('user.isSuspended = FALSE')
+						.setParameters(profQuery.getParameters());
+
+					users = users.concat(await query
+						.orderBy('user.updatedAt', 'DESC', 'NULLS LAST')
+						.take(ps.limit)
+						.skip(ps.offset)
+						.getMany(),
+					);
 				}
-			}))
-			.andWhere(new Brackets(qb => { qb
-				.where('user.updatedAt IS NULL')
-				.orWhere('user.updatedAt > :activeThreshold', { activeThreshold: activeThreshold });
-			}))
-			.andWhere('user.isSuspended = FALSE');
-
-		if (ps.origin === 'local') {
-			nameQuery.andWhere('user.host IS NULL');
-		} else if (ps.origin === 'remote') {
-			nameQuery.andWhere('user.host IS NOT NULL');
-		}
-
-		users = await nameQuery
-			.orderBy('user.updatedAt', 'DESC', 'NULLS LAST')
-			.take(ps.limit)
-			.skip(ps.offset)
-			.getMany();
-
-		if (users.length < ps.limit) {
-			const profQuery = UserProfiles.createQueryBuilder('prof')
-				.select('prof.userId')
-				.where('prof.description ILIKE :query', { query: '%' + ps.query + '%' });
-
-			if (ps.origin === 'local') {
-				profQuery.andWhere('prof.userHost IS NULL');
-			} else if (ps.origin === 'remote') {
-				profQuery.andWhere('prof.userHost IS NOT NULL');
 			}
 
-			const query = Users.createQueryBuilder('user')
-				.where(`user.id IN (${ profQuery.getQuery() })`)
-				.andWhere(new Brackets(qb => { qb
-					.where('user.updatedAt IS NULL')
-					.orWhere('user.updatedAt > :activeThreshold', { activeThreshold: activeThreshold });
-				}))
-				.andWhere('user.isSuspended = FALSE')
-				.setParameters(profQuery.getParameters());
-
-			users = users.concat(await query
-				.orderBy('user.updatedAt', 'DESC', 'NULLS LAST')
-				.take(ps.limit)
-				.skip(ps.offset)
-				.getMany(),
-			);
-		}
+			return await this.userEntityService.packMany(users, me, { detail: ps.detail });
+		});
 	}
-
-	return await Users.packMany(users, me, { detail: ps.detail });
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/users/show.ts b/packages/backend/src/server/api/endpoints/users/show.ts
index 846d83b49f..98f5f03063 100644
--- a/packages/backend/src/server/api/endpoints/users/show.ts
+++ b/packages/backend/src/server/api/endpoints/users/show.ts
@@ -1,10 +1,14 @@
-import { FindOptionsWhere, In, IsNull } from 'typeorm';
-import { resolveUser } from '@/remote/resolve-user.js';
-import { Users } from '@/models/index.js';
-import { User } from '@/models/entities/user.js';
-import define from '../../define.js';
-import { apiLogger } from '../../logger.js';
+import { In, IsNull } from 'typeorm';
+import { Inject, Injectable } from '@nestjs/common';
+import { UsersRepository } from '@/models/index.js';
+import type { User } from '@/models/entities/User.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { ResolveUserService } from '@/core/remote/ResolveUserService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
+import { ApiLoggerService } from '../../ApiLoggerService.js';
+import type { FindOptionsWhere } from 'typeorm';
 
 export const meta = {
 	tags: ['users'],
@@ -78,53 +82,65 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	let user;
-
-	const isAdminOrModerator = me && (me.isAdmin || me.isModerator);
-
-	if (ps.userIds) {
-		if (ps.userIds.length === 0) {
-			return [];
-		}
-
-		const users = await Users.findBy(isAdminOrModerator ? {
-			id: In(ps.userIds),
-		} : {
-			id: In(ps.userIds),
-			isSuspended: false,
-		});
-
-		// リクエストされた通りに並べ替え
-		const _users: User[] = [];
-		for (const id of ps.userIds) {
-			_users.push(users.find(x => x.id === id)!);
-		}
-
-		return await Promise.all(_users.map(u => Users.pack(u, me, {
-			detail: true,
-		})));
-	} else {
-		// Lookup user
-		if (typeof ps.host === 'string' && typeof ps.username === 'string') {
-			user = await resolveUser(ps.username, ps.host).catch(e => {
-				apiLogger.warn(`failed to resolve remote user: ${e}`);
-				throw new ApiError(meta.errors.failedToResolveRemoteUser);
-			});
-		} else {
-			const q: FindOptionsWhere<User> = ps.userId != null
-				? { id: ps.userId }
-				: { usernameLower: ps.username!.toLowerCase(), host: IsNull() };
-
-			user = await Users.findOneBy(q);
-		}
-
-		if (user == null || (!isAdminOrModerator && user.isSuspended)) {
-			throw new ApiError(meta.errors.noSuchUser);
-		}
-
-		return await Users.pack(user, me, {
-			detail: true,
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private userEntityService: UserEntityService,
+		private resolveUserService: ResolveUserService,
+		private apiLoggerService: ApiLoggerService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			let user;
+
+			const isAdminOrModerator = me && (me.isAdmin || me.isModerator);
+
+			if (ps.userIds) {
+				if (ps.userIds.length === 0) {
+					return [];
+				}
+
+				const users = await this.usersRepository.findBy(isAdminOrModerator ? {
+					id: In(ps.userIds),
+				} : {
+					id: In(ps.userIds),
+					isSuspended: false,
+				});
+
+				// リクエストされた通りに並べ替え
+				const _users: User[] = [];
+				for (const id of ps.userIds) {
+					_users.push(users.find(x => x.id === id)!);
+				}
+
+				return await Promise.all(_users.map(u => this.userEntityService.pack(u, me, {
+					detail: true,
+				})));
+			} else {
+				// Lookup user
+				if (typeof ps.host === 'string' && typeof ps.username === 'string') {
+					user = await this.resolveUserService.resolveUser(ps.username, ps.host).catch(err => {
+						this.apiLoggerService.logger.warn(`failed to resolve remote user: ${err}`);
+						throw new ApiError(meta.errors.failedToResolveRemoteUser);
+					});
+				} else {
+					const q: FindOptionsWhere<User> = ps.userId != null
+						? { id: ps.userId }
+						: { usernameLower: ps.username!.toLowerCase(), host: IsNull() };
+
+					user = await this.usersRepository.findOneBy(q);
+				}
+
+				if (user == null || (!isAdminOrModerator && user.isSuspended)) {
+					throw new ApiError(meta.errors.noSuchUser);
+				}
+
+				return await this.userEntityService.pack(user, me, {
+					detail: true,
+				});
+			}
 		});
 	}
-});
+}
diff --git a/packages/backend/src/server/api/endpoints/users/stats.ts b/packages/backend/src/server/api/endpoints/users/stats.ts
index 47f322ee9b..71f4ca0cfa 100644
--- a/packages/backend/src/server/api/endpoints/users/stats.ts
+++ b/packages/backend/src/server/api/endpoints/users/stats.ts
@@ -1,6 +1,8 @@
-import { DriveFiles, Followings, NoteFavorites, NoteReactions, Notes, PageLikes, PollVotes, Users } from '@/models/index.js';
-import { awaitAll } from '@/prelude/await-all.js';
-import define from '../../define.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { awaitAll } from '@/misc/prelude/await-all.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
+import { DI } from '@/di-symbols.js';
 import { ApiError } from '../../error.js';
 
 export const meta = {
@@ -116,78 +118,109 @@ export const paramDef = {
 } as const;
 
 // eslint-disable-next-line import/no-default-export
-export default define(meta, paramDef, async (ps, me) => {
-	const user = await Users.findOneBy({ id: ps.userId });
-	if (user == null) {
-		throw new ApiError(meta.errors.noSuchUser);
-	}
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.followingsRepository)
+		private followingsRepository: FollowingsRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		@Inject(DI.noteReactionsRepository)
+		private noteReactionsRepository: NoteReactionsRepository,
+
+		@Inject(DI.pageLikesRepository)
+		private pageLikesRepository: PageLikesRepository,
 
-	const result = await awaitAll({
-		notesCount: Notes.createQueryBuilder('note')
-			.where('note.userId = :userId', { userId: user.id })
-			.getCount(),
-		repliesCount: Notes.createQueryBuilder('note')
-			.where('note.userId = :userId', { userId: user.id })
-			.andWhere('note.replyId IS NOT NULL')
-			.getCount(),
-		renotesCount: Notes.createQueryBuilder('note')
-			.where('note.userId = :userId', { userId: user.id })
-			.andWhere('note.renoteId IS NOT NULL')
-			.getCount(),
-		repliedCount: Notes.createQueryBuilder('note')
-			.where('note.replyUserId = :userId', { userId: user.id })
-			.getCount(),
-		renotedCount: Notes.createQueryBuilder('note')
-			.where('note.renoteUserId = :userId', { userId: user.id })
-			.getCount(),
-		pollVotesCount: PollVotes.createQueryBuilder('vote')
-			.where('vote.userId = :userId', { userId: user.id })
-			.getCount(),
-		pollVotedCount: PollVotes.createQueryBuilder('vote')
-			.innerJoin('vote.note', 'note')
-			.where('note.userId = :userId', { userId: user.id })
-			.getCount(),
-		localFollowingCount: Followings.createQueryBuilder('following')
-			.where('following.followerId = :userId', { userId: user.id })
-			.andWhere('following.followeeHost IS NULL')
-			.getCount(),
-		remoteFollowingCount: Followings.createQueryBuilder('following')
-			.where('following.followerId = :userId', { userId: user.id })
-			.andWhere('following.followeeHost IS NOT NULL')
-			.getCount(),
-		localFollowersCount: Followings.createQueryBuilder('following')
-			.where('following.followeeId = :userId', { userId: user.id })
-			.andWhere('following.followerHost IS NULL')
-			.getCount(),
-		remoteFollowersCount: Followings.createQueryBuilder('following')
-			.where('following.followeeId = :userId', { userId: user.id })
-			.andWhere('following.followerHost IS NOT NULL')
-			.getCount(),
-		sentReactionsCount: NoteReactions.createQueryBuilder('reaction')
-			.where('reaction.userId = :userId', { userId: user.id })
-			.getCount(),
-		receivedReactionsCount: NoteReactions.createQueryBuilder('reaction')
-			.innerJoin('reaction.note', 'note')
-			.where('note.userId = :userId', { userId: user.id })
-			.getCount(),
-		noteFavoritesCount: NoteFavorites.createQueryBuilder('favorite')
-			.where('favorite.userId = :userId', { userId: user.id })
-			.getCount(),
-		pageLikesCount: PageLikes.createQueryBuilder('like')
-			.where('like.userId = :userId', { userId: user.id })
-			.getCount(),
-		pageLikedCount: PageLikes.createQueryBuilder('like')
-			.innerJoin('like.page', 'page')
-			.where('page.userId = :userId', { userId: user.id })
-			.getCount(),
-		driveFilesCount: DriveFiles.createQueryBuilder('file')
-			.where('file.userId = :userId', { userId: user.id })
-			.getCount(),
-		driveUsage: DriveFiles.calcDriveUsageOf(user),
-	});
-
-	result.followingCount = result.localFollowingCount + result.remoteFollowingCount;
-	result.followersCount = result.localFollowersCount + result.remoteFollowersCount;
-
-	return result;
-});
+		@Inject(DI.noteFavoritesRepository)
+		private noteFavoritesRepository: NoteFavoritesRepository,
+
+		@Inject(DI.pollVotesRepository)
+		private pollVotesRepository: PollVotesRepository,
+
+		private driveFileEntityService: DriveFileEntityService,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const user = await this.usersRepository.findOneBy({ id: ps.userId });
+			if (user == null) {
+				throw new ApiError(meta.errors.noSuchUser);
+			}
+
+			const result = await awaitAll({
+				notesCount: this.notesRepository.createQueryBuilder('note')
+					.where('note.userId = :userId', { userId: user.id })
+					.getCount(),
+				repliesCount: this.notesRepository.createQueryBuilder('note')
+					.where('note.userId = :userId', { userId: user.id })
+					.andWhere('note.replyId IS NOT NULL')
+					.getCount(),
+				renotesCount: this.notesRepository.createQueryBuilder('note')
+					.where('note.userId = :userId', { userId: user.id })
+					.andWhere('note.renoteId IS NOT NULL')
+					.getCount(),
+				repliedCount: this.notesRepository.createQueryBuilder('note')
+					.where('note.replyUserId = :userId', { userId: user.id })
+					.getCount(),
+				renotedCount: this.notesRepository.createQueryBuilder('note')
+					.where('note.renoteUserId = :userId', { userId: user.id })
+					.getCount(),
+				pollVotesCount: this.pollVotesRepository.createQueryBuilder('vote')
+					.where('vote.userId = :userId', { userId: user.id })
+					.getCount(),
+				pollVotedCount: this.pollVotesRepository.createQueryBuilder('vote')
+					.innerJoin('vote.note', 'note')
+					.where('note.userId = :userId', { userId: user.id })
+					.getCount(),
+				localFollowingCount: this.followingsRepository.createQueryBuilder('following')
+					.where('following.followerId = :userId', { userId: user.id })
+					.andWhere('following.followeeHost IS NULL')
+					.getCount(),
+				remoteFollowingCount: this.followingsRepository.createQueryBuilder('following')
+					.where('following.followerId = :userId', { userId: user.id })
+					.andWhere('following.followeeHost IS NOT NULL')
+					.getCount(),
+				localFollowersCount: this.followingsRepository.createQueryBuilder('following')
+					.where('following.followeeId = :userId', { userId: user.id })
+					.andWhere('following.followerHost IS NULL')
+					.getCount(),
+				remoteFollowersCount: this.followingsRepository.createQueryBuilder('following')
+					.where('following.followeeId = :userId', { userId: user.id })
+					.andWhere('following.followerHost IS NOT NULL')
+					.getCount(),
+				sentReactionsCount: this.noteReactionsRepository.createQueryBuilder('reaction')
+					.where('reaction.userId = :userId', { userId: user.id })
+					.getCount(),
+				receivedReactionsCount: this.noteReactionsRepository.createQueryBuilder('reaction')
+					.innerJoin('reaction.note', 'note')
+					.where('note.userId = :userId', { userId: user.id })
+					.getCount(),
+				noteFavoritesCount: this.noteFavoritesRepository.createQueryBuilder('favorite')
+					.where('favorite.userId = :userId', { userId: user.id })
+					.getCount(),
+				pageLikesCount: this.pageLikesRepository.createQueryBuilder('like')
+					.where('like.userId = :userId', { userId: user.id })
+					.getCount(),
+				pageLikedCount: this.pageLikesRepository.createQueryBuilder('like')
+					.innerJoin('like.page', 'page')
+					.where('page.userId = :userId', { userId: user.id })
+					.getCount(),
+				driveFilesCount: this.driveFilesRepository.createQueryBuilder('file')
+					.where('file.userId = :userId', { userId: user.id })
+					.getCount(),
+				driveUsage: this.driveFileEntityService.calcDriveUsageOf(user),
+			});
+
+			result.followingCount = result.localFollowingCount + result.remoteFollowingCount;
+			result.followersCount = result.localFollowersCount + result.remoteFollowersCount;
+
+			return result;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/error.ts b/packages/backend/src/server/api/error.ts
index 3f0861fdb1..347d5650ad 100644
--- a/packages/backend/src/server/api/error.ts
+++ b/packages/backend/src/server/api/error.ts
@@ -8,8 +8,8 @@ export class ApiError extends Error {
 	public httpStatusCode?: number;
 	public info?: any;
 
-	constructor(e?: E | null | undefined, info?: any | null | undefined) {
-		if (e == null) e = {
+	constructor(err?: E | null | undefined, info?: any | null | undefined) {
+		if (err == null) err = {
 			message: 'Internal error occurred. Please contact us if the error persists.',
 			code: 'INTERNAL_ERROR',
 			id: '5d37dbcb-891e-41ca-a3d6-e690c97775ac',
@@ -17,12 +17,12 @@ export class ApiError extends Error {
 			httpStatusCode: 500,
 		};
 
-		super(e.message);
-		this.message = e.message;
-		this.code = e.code;
-		this.id = e.id;
-		this.kind = e.kind || 'client';
-		this.httpStatusCode = e.httpStatusCode;
+		super(err.message);
+		this.message = err.message;
+		this.code = err.code;
+		this.id = err.id;
+		this.kind = err.kind ?? 'client';
+		this.httpStatusCode = err.httpStatusCode;
 		this.info = info;
 	}
 }
diff --git a/packages/backend/src/server/api/index.ts b/packages/backend/src/server/api/index.ts
deleted file mode 100644
index 83ece51f51..0000000000
--- a/packages/backend/src/server/api/index.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * API Server
- */
-
-import Koa from 'koa';
-import Router from '@koa/router';
-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';
-import signin from './private/signin.js';
-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';
-
-// Init app
-const app = new Koa();
-
-app.use(cors({
-	origin: '*',
-}));
-
-// No caching
-app.use(async (ctx, next) => {
-	ctx.set('Cache-Control', 'private, max-age=0, must-revalidate');
-	await next();
-});
-
-app.use(bodyParser({
-	// リクエストが multipart/form-data でない限りはJSONだと見なす
-	detectJSON: ctx => !ctx.is('multipart/form-data'),
-}));
-
-// Init multer instance
-const upload = multer({
-	storage: multer.diskStorage({}),
-	limits: {
-		fileSize: config.maxFileSize || 262144000,
-		files: 1,
-	},
-});
-
-// Init router
-const router = new Router();
-
-/**
- * Register endpoint handlers
- */
-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; });
-		}
-	}
-}
-
-router.post('/signup', signup);
-router.post('/signin', signin);
-router.post('/signup-pending', signupPending);
-
-router.use(discord.routes());
-router.use(github.routes());
-router.use(twitter.routes());
-
-router.get('/v1/instance/peers', async ctx => {
-	const instances = await Instances.find({
-		select: ['host'],
-	});
-
-	ctx.body = instances.map(instance => instance.host);
-});
-
-router.post('/miauth/:session/check', async ctx => {
-	const token = await AccessTokens.findOneBy({
-		session: ctx.params.session,
-	});
-
-	if (token && token.session != null && !token.fetched) {
-		AccessTokens.update(token.id, {
-			fetched: true,
-		});
-
-		ctx.body = {
-			ok: true,
-			token: token.token,
-			user: await Users.pack(token.userId, null, { detail: true }),
-		};
-	} else {
-		ctx.body = {
-			ok: false,
-		};
-	}
-});
-
-// Return 404 for unknown API
-router.all('(.*)', async ctx => {
-	ctx.status = 404;
-});
-
-// Register router
-app.use(router.routes());
-
-export default app;
diff --git a/packages/backend/src/server/api/integration/DiscordServerService.ts b/packages/backend/src/server/api/integration/DiscordServerService.ts
new file mode 100644
index 0000000000..604013c454
--- /dev/null
+++ b/packages/backend/src/server/api/integration/DiscordServerService.ts
@@ -0,0 +1,315 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { Redis } from 'ioredis';
+import Router from '@koa/router';
+import { OAuth2 } from 'oauth';
+import { v4 as uuid } from 'uuid';
+import { IsNull } from 'typeorm';
+import { Config } from '@/config.js';
+import { UserProfilesRepository, UsersRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
+import { HttpRequestService } from '@/core/HttpRequestService.js';
+import type { ILocalUser } from '@/models/entities/User.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { MetaService } from '@/core/MetaService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { SigninService } from '../SigninService.js';
+import type Koa from 'koa';
+
+@Injectable()
+export class DiscordServerService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.redis)
+		private redisClient: Redis,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		private userEntityService: UserEntityService,
+		private httpRequestService: HttpRequestService,
+		private globalEventService: GlobalEventService,
+		private metaService: MetaService,
+		private signinService: SigninService,
+	) {
+	}
+
+	public create() {
+		const router = new Router();
+
+		router.get('/disconnect/discord', async ctx => {
+			if (!this.#compareOrigin(ctx)) {
+				ctx.throw(400, 'invalid origin');
+				return;
+			}
+
+			const userToken = this.#getUserToken(ctx);
+			if (!userToken) {
+				ctx.throw(400, 'signin required');
+				return;
+			}
+
+			const user = await this.usersRepository.findOneByOrFail({
+				host: IsNull(),
+				token: userToken,
+			});
+
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+
+			delete profile.integrations.discord;
+
+			await this.userProfilesRepository.update(user.id, {
+				integrations: profile.integrations,
+			});
+
+			ctx.body = 'Discordの連携を解除しました :v:';
+
+			// Publish i updated event
+			this.globalEventService.publishMainStream(user.id, 'meUpdated', await this.userEntityService.pack(user, user, {
+				detail: true,
+				includeSecrets: true,
+			}));
+		});
+
+		const getOAuth2 = async () => {
+			const meta = await this.metaService.fetch(true);
+
+			if (meta.enableDiscordIntegration) {
+				return new OAuth2(
+			meta.discordClientId!,
+			meta.discordClientSecret!,
+			'https://discord.com/',
+			'api/oauth2/authorize',
+			'api/oauth2/token');
+			} else {
+				return null;
+			}
+		};
+
+		router.get('/connect/discord', async ctx => {
+			if (!this.#compareOrigin(ctx)) {
+				ctx.throw(400, 'invalid origin');
+				return;
+			}
+
+			const userToken = this.#getUserToken(ctx);
+			if (!userToken) {
+				ctx.throw(400, 'signin required');
+				return;
+			}
+
+			const params = {
+				redirect_uri: `${this.config.url}/api/dc/cb`,
+				scope: ['identify'],
+				state: uuid(),
+				response_type: 'code',
+			};
+
+			this.redisClient.set(userToken, JSON.stringify(params));
+
+			const oauth2 = await getOAuth2();
+			ctx.redirect(oauth2!.getAuthorizeUrl(params));
+		});
+
+		router.get('/signin/discord', async ctx => {
+			const sessid = uuid();
+
+			const params = {
+				redirect_uri: `${this.config.url}/api/dc/cb`,
+				scope: ['identify'],
+				state: uuid(),
+				response_type: 'code',
+			};
+
+			ctx.cookies.set('signin_with_discord_sid', sessid, {
+				path: '/',
+				secure: this.config.url.startsWith('https'),
+				httpOnly: true,
+			});
+
+			this.redisClient.set(sessid, JSON.stringify(params));
+
+			const oauth2 = await getOAuth2();
+			ctx.redirect(oauth2!.getAuthorizeUrl(params));
+		});
+
+		router.get('/dc/cb', async ctx => {
+			const userToken = this.#getUserToken(ctx);
+
+			const oauth2 = await getOAuth2();
+
+			if (!userToken) {
+				const sessid = ctx.cookies.get('signin_with_discord_sid');
+
+				if (!sessid) {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const code = ctx.query.code;
+
+				if (!code || typeof code !== 'string') {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const { redirect_uri, state } = await new Promise<any>((res, rej) => {
+					this.redisClient.get(sessid, async (_, state) => {
+						res(JSON.parse(state));
+					});
+				});
+
+				if (ctx.query.state !== state) {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const { accessToken, refreshToken, expiresDate } = await new Promise<any>((res, rej) =>
+			oauth2!.getOAuthAccessToken(code, {
+				grant_type: 'authorization_code',
+				redirect_uri,
+			}, (err, accessToken, refreshToken, result) => {
+				if (err) {
+					rej(err);
+				} else if (result.error) {
+					rej(result.error);
+				} else {
+					res({
+						accessToken,
+						refreshToken,
+						expiresDate: Date.now() + Number(result.expires_in) * 1000,
+					});
+				}
+			}));
+
+				const { id, username, discriminator } = (await this.httpRequestService.getJson('https://discord.com/api/users/@me', '*/*', 10 * 1000, {
+					'Authorization': `Bearer ${accessToken}`,
+				})) as Record<string, unknown>;
+
+				if (typeof id !== 'string' || typeof username !== 'string' || typeof discriminator !== 'string') {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const profile = await this.userProfilesRepository.createQueryBuilder()
+					.where('"integrations"->\'discord\'->>\'id\' = :id', { id: id })
+					.andWhere('"userHost" IS NULL')
+					.getOne();
+
+				if (profile == null) {
+					ctx.throw(404, `@${username}#${discriminator}と連携しているMisskeyアカウントはありませんでした...`);
+					return;
+				}
+
+				await this.userProfilesRepository.update(profile.userId, {
+					integrations: {
+						...profile.integrations,
+						discord: {
+							id: id,
+							accessToken: accessToken,
+							refreshToken: refreshToken,
+							expiresDate: expiresDate,
+							username: username,
+							discriminator: discriminator,
+						},
+					},
+				});
+
+				this.signinService.signin(ctx, await this.usersRepository.findOneBy({ id: profile.userId }) as ILocalUser, true);
+			} else {
+				const code = ctx.query.code;
+
+				if (!code || typeof code !== 'string') {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const { redirect_uri, state } = await new Promise<any>((res, rej) => {
+					this.redisClient.get(userToken, async (_, state) => {
+						res(JSON.parse(state));
+					});
+				});
+
+				if (ctx.query.state !== state) {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const { accessToken, refreshToken, expiresDate } = await new Promise<any>((res, rej) =>
+			oauth2!.getOAuthAccessToken(code, {
+				grant_type: 'authorization_code',
+				redirect_uri,
+			}, (err, accessToken, refreshToken, result) => {
+				if (err) {
+					rej(err);
+				} else if (result.error) {
+					rej(result.error);
+				} else {
+					res({
+						accessToken,
+						refreshToken,
+						expiresDate: Date.now() + Number(result.expires_in) * 1000,
+					});
+				}
+			}));
+
+				const { id, username, discriminator } = (await this.httpRequestService.getJson('https://discord.com/api/users/@me', '*/*', 10 * 1000, {
+					'Authorization': `Bearer ${accessToken}`,
+				})) as Record<string, unknown>;
+				if (typeof id !== 'string' || typeof username !== 'string' || typeof discriminator !== 'string') {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const user = await this.usersRepository.findOneByOrFail({
+					host: IsNull(),
+					token: userToken,
+				});
+
+				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+
+				await this.userProfilesRepository.update(user.id, {
+					integrations: {
+						...profile.integrations,
+						discord: {
+							accessToken: accessToken,
+							refreshToken: refreshToken,
+							expiresDate: expiresDate,
+							id: id,
+							username: username,
+							discriminator: discriminator,
+						},
+					},
+				});
+
+				ctx.body = `Discord: @${username}#${discriminator} を、Misskey: @${user.username} に接続しました！`;
+
+				// Publish i updated event
+				this.globalEventService.publishMainStream(user.id, 'meUpdated', await this.userEntityService.pack(user, user, {
+					detail: true,
+					includeSecrets: true,
+				}));
+			}
+		});
+
+		return router;
+	}
+
+	#getUserToken(ctx: Koa.BaseContext): string | null {
+		return ((ctx.headers['cookie'] ?? '').match(/igi=(\w+)/) ?? [null, null])[1];
+	}
+	
+	#compareOrigin(ctx: Koa.BaseContext): boolean {
+		function normalizeUrl(url?: string): string {
+			return url ? url.endsWith('/') ? url.substr(0, url.length - 1) : url : '';
+		}
+	
+		const referer = ctx.headers['referer'];
+	
+		return (normalizeUrl(referer) === normalizeUrl(this.config.url));
+	}
+}
diff --git a/packages/backend/src/server/api/integration/GithubServerService.ts b/packages/backend/src/server/api/integration/GithubServerService.ts
new file mode 100644
index 0000000000..6864f21523
--- /dev/null
+++ b/packages/backend/src/server/api/integration/GithubServerService.ts
@@ -0,0 +1,287 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { Redis } from 'ioredis';
+import Router from '@koa/router';
+import { OAuth2 } from 'oauth';
+import { v4 as uuid } from 'uuid';
+import { IsNull } from 'typeorm';
+import { Config } from '@/config.js';
+import { UserProfilesRepository, UsersRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
+import { HttpRequestService } from '@/core/HttpRequestService.js';
+import type { ILocalUser } from '@/models/entities/User.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { MetaService } from '@/core/MetaService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { SigninService } from '../SigninService.js';
+import type Koa from 'koa';
+
+@Injectable()
+export class GithubServerService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.redis)
+		private redisClient: Redis,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		private userEntityService: UserEntityService,
+		private httpRequestService: HttpRequestService,
+		private globalEventService: GlobalEventService,
+		private metaService: MetaService,
+		private signinService: SigninService,
+	) {
+	}
+
+	public create() {
+		const router = new Router();
+
+		router.get('/disconnect/github', async ctx => {
+			if (!this.#compareOrigin(ctx)) {
+				ctx.throw(400, 'invalid origin');
+				return;
+			}
+
+			const userToken = this.#getUserToken(ctx);
+			if (!userToken) {
+				ctx.throw(400, 'signin required');
+				return;
+			}
+
+			const user = await this.usersRepository.findOneByOrFail({
+				host: IsNull(),
+				token: userToken,
+			});
+
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+
+			delete profile.integrations.github;
+
+			await this.userProfilesRepository.update(user.id, {
+				integrations: profile.integrations,
+			});
+
+			ctx.body = 'GitHubの連携を解除しました :v:';
+
+			// Publish i updated event
+			this.globalEventService.publishMainStream(user.id, 'meUpdated', await this.userEntityService.pack(user, user, {
+				detail: true,
+				includeSecrets: true,
+			}));
+		});
+
+		const getOath2 = async () => {
+			const meta = await this.metaService.fetch(true);
+
+			if (meta.enableGithubIntegration && meta.githubClientId && meta.githubClientSecret) {
+				return new OAuth2(
+					meta.githubClientId,
+					meta.githubClientSecret,
+					'https://github.com/',
+					'login/oauth/authorize',
+					'login/oauth/access_token');
+			} else {
+				return null;
+			}
+		};
+
+		router.get('/connect/github', async ctx => {
+			if (!this.#compareOrigin(ctx)) {
+				ctx.throw(400, 'invalid origin');
+				return;
+			}
+
+			const userToken = this.#getUserToken(ctx);
+			if (!userToken) {
+				ctx.throw(400, 'signin required');
+				return;
+			}
+
+			const params = {
+				redirect_uri: `${this.config.url}/api/gh/cb`,
+				scope: ['read:user'],
+				state: uuid(),
+			};
+
+			this.redisClient.set(userToken, JSON.stringify(params));
+
+			const oauth2 = await getOath2();
+			ctx.redirect(oauth2!.getAuthorizeUrl(params));
+		});
+
+		router.get('/signin/github', async ctx => {
+			const sessid = uuid();
+
+			const params = {
+				redirect_uri: `${this.config.url}/api/gh/cb`,
+				scope: ['read:user'],
+				state: uuid(),
+			};
+
+			ctx.cookies.set('signin_with_github_sid', sessid, {
+				path: '/',
+				secure: this.config.url.startsWith('https'),
+				httpOnly: true,
+			});
+
+			this.redisClient.set(sessid, JSON.stringify(params));
+
+			const oauth2 = await getOath2();
+			ctx.redirect(oauth2!.getAuthorizeUrl(params));
+		});
+
+		router.get('/gh/cb', async ctx => {
+			const userToken = this.#getUserToken(ctx);
+
+			const oauth2 = await getOath2();
+
+			if (!userToken) {
+				const sessid = ctx.cookies.get('signin_with_github_sid');
+
+				if (!sessid) {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const code = ctx.query.code;
+
+				if (!code || typeof code !== 'string') {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const { redirect_uri, state } = await new Promise<any>((res, rej) => {
+					this.redisClient.get(sessid, async (_, state) => {
+						res(JSON.parse(state));
+					});
+				});
+
+				if (ctx.query.state !== state) {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const { accessToken } = await new Promise<any>((res, rej) =>
+			oauth2!.getOAuthAccessToken(code, {
+				redirect_uri,
+			}, (err, accessToken, refresh, result) => {
+				if (err) {
+					rej(err);
+				} else if (result.error) {
+					rej(result.error);
+				} else {
+					res({ accessToken });
+				}
+			}));
+
+				const { login, id } = (await this.httpRequestService.getJson('https://api.github.com/user', 'application/vnd.github.v3+json', 10 * 1000, {
+					'Authorization': `bearer ${accessToken}`,
+				})) as Record<string, unknown>;
+				if (typeof login !== 'string' || typeof id !== 'string') {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const link = await this.userProfilesRepository.createQueryBuilder()
+					.where('"integrations"->\'github\'->>\'id\' = :id', { id: id })
+					.andWhere('"userHost" IS NULL')
+					.getOne();
+
+				if (link == null) {
+					ctx.throw(404, `@${login}と連携しているMisskeyアカウントはありませんでした...`);
+					return;
+				}
+
+				this.signinService.signin(ctx, await this.usersRepository.findOneBy({ id: link.userId }) as ILocalUser, true);
+			} else {
+				const code = ctx.query.code;
+
+				if (!code || typeof code !== 'string') {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const { redirect_uri, state } = await new Promise<any>((res, rej) => {
+					this.redisClient.get(userToken, async (_, state) => {
+						res(JSON.parse(state));
+					});
+				});
+
+				if (ctx.query.state !== state) {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const { accessToken } = await new Promise<any>((res, rej) =>
+			oauth2!.getOAuthAccessToken(
+				code,
+				{ redirect_uri },
+				(err, accessToken, refresh, result) => {
+					if (err) {
+						rej(err);
+					} else if (result.error) {
+						rej(result.error);
+					} else {
+						res({ accessToken });
+					}
+				}));
+
+				const { login, id } = (await this.httpRequestService.getJson('https://api.github.com/user', 'application/vnd.github.v3+json', 10 * 1000, {
+					'Authorization': `bearer ${accessToken}`,
+				})) as Record<string, unknown>;
+
+				if (typeof login !== 'string' || typeof id !== 'string') {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const user = await this.usersRepository.findOneByOrFail({
+					host: IsNull(),
+					token: userToken,
+				});
+
+				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+
+				await this.userProfilesRepository.update(user.id, {
+					integrations: {
+						...profile.integrations,
+						github: {
+							accessToken: accessToken,
+							id: id,
+							login: login,
+						},
+					},
+				});
+
+				ctx.body = `GitHub: @${login} を、Misskey: @${user.username} に接続しました！`;
+
+				// Publish i updated event
+				this.globalEventService.publishMainStream(user.id, 'meUpdated', await this.userEntityService.pack(user, user, {
+					detail: true,
+					includeSecrets: true,
+				}));
+			}
+		});
+
+		return router;
+	}
+
+	#getUserToken(ctx: Koa.BaseContext): string | null {
+		return ((ctx.headers['cookie'] ?? '').match(/igi=(\w+)/) ?? [null, null])[1];
+	}
+	
+	#compareOrigin(ctx: Koa.BaseContext): boolean {
+		function normalizeUrl(url?: string): string {
+			return url ? url.endsWith('/') ? url.substr(0, url.length - 1) : url : '';
+		}
+	
+		const referer = ctx.headers['referer'];
+	
+		return (normalizeUrl(referer) === normalizeUrl(this.config.url));
+	}
+}
diff --git a/packages/backend/src/server/api/integration/TwitterServerService.ts b/packages/backend/src/server/api/integration/TwitterServerService.ts
new file mode 100644
index 0000000000..14b5f40ea5
--- /dev/null
+++ b/packages/backend/src/server/api/integration/TwitterServerService.ts
@@ -0,0 +1,230 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { Redis } from 'ioredis';
+import Router from '@koa/router';
+import { v4 as uuid } from 'uuid';
+import { IsNull } from 'typeorm';
+import autwh from 'autwh';
+import { Config } from '@/config.js';
+import { UserProfilesRepository, UsersRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
+import { HttpRequestService } from '@/core/HttpRequestService.js';
+import type { ILocalUser } from '@/models/entities/User.js';
+import { GlobalEventService } from '@/core/GlobalEventService.js';
+import { MetaService } from '@/core/MetaService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { SigninService } from '../SigninService.js';
+import type Koa from 'koa';
+
+@Injectable()
+export class TwitterServerService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.redis)
+		private redisClient: Redis,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		private userEntityService: UserEntityService,
+		private httpRequestService: HttpRequestService,
+		private globalEventService: GlobalEventService,
+		private metaService: MetaService,
+		private signinService: SigninService,
+	) {
+	}
+
+	public create() {
+		const router = new Router();
+
+		router.get('/disconnect/twitter', async ctx => {
+			if (!this.#compareOrigin(ctx)) {
+				ctx.throw(400, 'invalid origin');
+				return;
+			}
+
+			const userToken = this.#getUserToken(ctx);
+			if (userToken == null) {
+				ctx.throw(400, 'signin required');
+				return;
+			}
+
+			const user = await this.usersRepository.findOneByOrFail({
+				host: IsNull(),
+				token: userToken,
+			});
+
+			const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+
+			delete profile.integrations.twitter;
+
+			await this.userProfilesRepository.update(user.id, {
+				integrations: profile.integrations,
+			});
+
+			ctx.body = 'Twitterの連携を解除しました :v:';
+
+			// Publish i updated event
+			this.globalEventService.publishMainStream(user.id, 'meUpdated', await this.userEntityService.pack(user, user, {
+				detail: true,
+				includeSecrets: true,
+			}));
+		});
+
+		const getTwAuth = async () => {
+			const meta = await this.metaService.fetch(true);
+
+			if (meta.enableTwitterIntegration && meta.twitterConsumerKey && meta.twitterConsumerSecret) {
+				return autwh({
+					consumerKey: meta.twitterConsumerKey,
+					consumerSecret: meta.twitterConsumerSecret,
+					callbackUrl: `${this.config.url}/api/tw/cb`,
+				});
+			} else {
+				return null;
+			}
+		};
+
+		router.get('/connect/twitter', async ctx => {
+			if (!this.#compareOrigin(ctx)) {
+				ctx.throw(400, 'invalid origin');
+				return;
+			}
+
+			const userToken = this.#getUserToken(ctx);
+			if (userToken == null) {
+				ctx.throw(400, 'signin required');
+				return;
+			}
+
+			const twAuth = await getTwAuth();
+			const twCtx = await twAuth!.begin();
+			this.redisClient.set(userToken, JSON.stringify(twCtx));
+			ctx.redirect(twCtx.url);
+		});
+
+		router.get('/signin/twitter', async ctx => {
+			const twAuth = await getTwAuth();
+			const twCtx = await twAuth!.begin();
+
+			const sessid = uuid();
+
+			this.redisClient.set(sessid, JSON.stringify(twCtx));
+
+			ctx.cookies.set('signin_with_twitter_sid', sessid, {
+				path: '/',
+				secure: this.config.url.startsWith('https'),
+				httpOnly: true,
+			});
+
+			ctx.redirect(twCtx.url);
+		});
+
+		router.get('/tw/cb', async ctx => {
+			const userToken = this.#getUserToken(ctx);
+
+			const twAuth = await getTwAuth();
+
+			if (userToken == null) {
+				const sessid = ctx.cookies.get('signin_with_twitter_sid');
+
+				if (sessid == null) {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const get = new Promise<any>((res, rej) => {
+					this.redisClient.get(sessid, async (_, twCtx) => {
+						res(twCtx);
+					});
+				});
+
+				const twCtx = await get;
+
+				const verifier = ctx.query.oauth_verifier;
+				if (!verifier || typeof verifier !== 'string') {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const result = await twAuth!.done(JSON.parse(twCtx), verifier);
+
+				const link = await this.userProfilesRepository.createQueryBuilder()
+					.where('"integrations"->\'twitter\'->>\'userId\' = :id', { id: result.userId })
+					.andWhere('"userHost" IS NULL')
+					.getOne();
+
+				if (link == null) {
+					ctx.throw(404, `@${result.screenName}と連携しているMisskeyアカウントはありませんでした...`);
+					return;
+				}
+
+				this.signinService.signin(ctx, await this.usersRepository.findOneBy({ id: link.userId }) as ILocalUser, true);
+			} else {
+				const verifier = ctx.query.oauth_verifier;
+
+				if (!verifier || typeof verifier !== 'string') {
+					ctx.throw(400, 'invalid session');
+					return;
+				}
+
+				const get = new Promise<any>((res, rej) => {
+					this.redisClient.get(userToken, async (_, twCtx) => {
+						res(twCtx);
+					});
+				});
+
+				const twCtx = await get;
+
+				const result = await twAuth!.done(JSON.parse(twCtx), verifier);
+
+				const user = await this.usersRepository.findOneByOrFail({
+					host: IsNull(),
+					token: userToken,
+				});
+
+				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+
+				await this.userProfilesRepository.update(user.id, {
+					integrations: {
+						...profile.integrations,
+						twitter: {
+							accessToken: result.accessToken,
+							accessTokenSecret: result.accessTokenSecret,
+							userId: result.userId,
+							screenName: result.screenName,
+						},
+					},
+				});
+
+				ctx.body = `Twitter: @${result.screenName} を、Misskey: @${user.username} に接続しました！`;
+
+				// Publish i updated event
+				this.globalEventService.publishMainStream(user.id, 'meUpdated', await this.userEntityService.pack(user, user, {
+					detail: true,
+					includeSecrets: true,
+				}));
+			}
+		});
+
+		return router;
+	}
+
+	#getUserToken(ctx: Koa.BaseContext): string | null {
+		return ((ctx.headers['cookie'] ?? '').match(/igi=(\w+)/) ?? [null, null])[1];
+	}
+	
+	#compareOrigin(ctx: Koa.BaseContext): boolean {
+		function normalizeUrl(url?: string): string {
+			return url ? url.endsWith('/') ? url.substr(0, url.length - 1) : url : '';
+		}
+	
+		const referer = ctx.headers['referer'];
+	
+		return (normalizeUrl(referer) === normalizeUrl(this.config.url));
+	}
+}
diff --git a/packages/backend/src/server/api/limiter.ts b/packages/backend/src/server/api/limiter.ts
deleted file mode 100644
index 9a7751716e..0000000000
--- a/packages/backend/src/server/api/limiter.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import Limiter from 'ratelimiter';
-import { CacheableLocalUser, User } from '@/models/entities/user.js';
-import Logger from '@/services/logger.js';
-import { redisClient } from '../../db/redis.js';
-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 =
-		typeof limitation.duration === 'number' &&
-		typeof limitation.max === 'number';
-
-	if (hasShortTermLimit) {
-		min();
-	} else if (hasLongTermLimit) {
-		max();
-	} else {
-		ok();
-	}
-
-	// Short-term limit
-	function min(): void {
-		const minIntervalLimiter = new Limiter({
-			id: `${actor}:${limitation.key}:min`,
-			duration: limitation.minInterval,
-			max: 1,
-			db: redisClient,
-		});
-
-		minIntervalLimiter.get((err, info) => {
-			if (err) {
-				return reject('ERR');
-			}
-
-			logger.debug(`${actor} ${limitation.key} min remaining: ${info.remaining}`);
-
-			if (info.remaining === 0) {
-				reject('BRIEF_REQUEST_INTERVAL');
-			} else {
-				if (hasLongTermLimit) {
-					max();
-				} else {
-					ok();
-				}
-			}
-		});
-	}
-
-	// Long term limit
-	function max(): void {
-		const limiter = new Limiter({
-			id: `${actor}:${limitation.key}`,
-			duration: limitation.duration,
-			max: limitation.max,
-			db: redisClient,
-		});
-
-		limiter.get((err, info) => {
-			if (err) {
-				return reject('ERR');
-			}
-
-			logger.debug(`${actor} ${limitation.key} max remaining: ${info.remaining}`);
-
-			if (info.remaining === 0) {
-				reject('RATE_LIMIT_EXCEEDED');
-			} else {
-				ok();
-			}
-		});
-	}
-});
diff --git a/packages/backend/src/server/api/logger.ts b/packages/backend/src/server/api/logger.ts
deleted file mode 100644
index ec22d6c3e2..0000000000
--- a/packages/backend/src/server/api/logger.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Logger from '@/services/logger.js';
-
-export const apiLogger = new Logger('api');
diff --git a/packages/backend/src/server/api/openapi/gen-spec.ts b/packages/backend/src/server/api/openapi/gen-spec.ts
deleted file mode 100644
index 68fa814041..0000000000
--- a/packages/backend/src/server/api/openapi/gen-spec.ts
+++ /dev/null
@@ -1,190 +0,0 @@
-import endpoints from '../endpoints.js';
-import config from '@/config/index.js';
-import { errors as basicErrors } from './errors.js';
-import { schemas, convertSchemaToOpenApiSchema } from './schemas.js';
-
-export function genOpenapiSpec() {
-	const spec = {
-		openapi: '3.0.0',
-
-		info: {
-			version: 'v1',
-			title: 'Misskey API',
-			'x-logo': { url: '/static-assets/api-doc.png' },
-		},
-
-		externalDocs: {
-			description: 'Repository',
-			url: 'https://github.com/misskey-dev/misskey',
-		},
-
-		servers: [{
-			url: config.apiUrl,
-		}],
-
-		paths: {} as any,
-
-		components: {
-			schemas: schemas,
-
-			securitySchemes: {
-				ApiKeyAuth: {
-					type: 'apiKey',
-					in: 'body',
-					name: 'i',
-				},
-			},
-		},
-	};
-
-	for (const endpoint of endpoints.filter(ep => !ep.meta.secure)) {
-		const errors = {} as any;
-
-		if (endpoint.meta.errors) {
-			for (const e of Object.values(endpoint.meta.errors)) {
-				errors[e.code] = {
-					value: {
-						error: e,
-					},
-				};
-			}
-		}
-
-		const resSchema = endpoint.meta.res ? convertSchemaToOpenApiSchema(endpoint.meta.res) : {};
-
-		let desc = (endpoint.meta.description ? endpoint.meta.description : 'No description provided.') + '\n\n';
-		desc += `**Credential required**: *${endpoint.meta.requireCredential ? 'Yes' : 'No'}*`;
-		if (endpoint.meta.kind) {
-			const kind = endpoint.meta.kind;
-			desc += ` / **Permission**: *${kind}*`;
-		}
-
-		const requestType = endpoint.meta.requireFile ? 'multipart/form-data' : 'application/json';
-		const schema = endpoint.params;
-
-		if (endpoint.meta.requireFile) {
-			schema.properties.file = {
-				type: 'string',
-				format: 'binary',
-				description: 'The file contents.',
-			};
-			schema.required.push('file');
-		}
-
-		const info = {
-			operationId: endpoint.name,
-			summary: endpoint.name,
-			description: desc,
-			externalDocs: {
-				description: 'Source code',
-				url: `https://github.com/misskey-dev/misskey/blob/develop/packages/backend/src/server/api/endpoints/${endpoint.name}.ts`,
-			},
-			...(endpoint.meta.tags ? {
-				tags: [endpoint.meta.tags[0]],
-			} : {}),
-			...(endpoint.meta.requireCredential ? {
-				security: [{
-					ApiKeyAuth: [],
-				}],
-			} : {}),
-			requestBody: {
-				required: true,
-				content: {
-					[requestType]: {
-						schema,
-					},
-				},
-			},
-			responses: {
-				...(endpoint.meta.res ? {
-					'200': {
-						description: 'OK (with results)',
-						content: {
-							'application/json': {
-								schema: resSchema,
-							},
-						},
-					},
-				} : {
-					'204': {
-						description: 'OK (without any results)',
-					},
-				}),
-				'400': {
-					description: 'Client error',
-					content: {
-						'application/json': {
-							schema: {
-								$ref: '#/components/schemas/Error',
-							},
-							examples: { ...errors, ...basicErrors['400'] },
-						},
-					},
-				},
-				'401': {
-					description: 'Authentication error',
-					content: {
-						'application/json': {
-							schema: {
-								$ref: '#/components/schemas/Error',
-							},
-							examples: basicErrors['401'],
-						},
-					},
-				},
-				'403': {
-					description: 'Forbidden error',
-					content: {
-						'application/json': {
-							schema: {
-								$ref: '#/components/schemas/Error',
-							},
-							examples: basicErrors['403'],
-						},
-					},
-				},
-				'418': {
-					description: 'I\'m Ai',
-					content: {
-						'application/json': {
-							schema: {
-								$ref: '#/components/schemas/Error',
-							},
-							examples: basicErrors['418'],
-						},
-					},
-				},
-				...(endpoint.meta.limit ? {
-					'429': {
-						description: 'To many requests',
-						content: {
-							'application/json': {
-								schema: {
-									$ref: '#/components/schemas/Error',
-								},
-								examples: basicErrors['429'],
-							},
-						},
-					},
-				} : {}),
-				'500': {
-					description: 'Internal server error',
-					content: {
-						'application/json': {
-							schema: {
-								$ref: '#/components/schemas/Error',
-							},
-							examples: basicErrors['500'],
-						},
-					},
-				},
-			},
-		};
-
-		spec.paths['/' + endpoint.name] = {
-			post: info,
-		};
-	}
-
-	return spec;
-}
diff --git a/packages/backend/src/server/api/private/signin.ts b/packages/backend/src/server/api/private/signin.ts
deleted file mode 100644
index 79b31764fd..0000000000
--- a/packages/backend/src/server/api/private/signin.ts
+++ /dev/null
@@ -1,250 +0,0 @@
-import Koa from 'koa';
-import bcrypt from 'bcryptjs';
-import * as speakeasy from 'speakeasy';
-import signin from '../common/signin.js';
-import config from '@/config/index.js';
-import { Users, Signins, UserProfiles, UserSecurityKeys, AttestationChallenges } from '@/models/index.js';
-import { ILocalUser } from '@/models/entities/user.js';
-import { genId } from '@/misc/gen-id.js';
-import { verifyLogin, hash } from '../2fa.js';
-import { randomBytes } from 'node:crypto';
-import { IsNull } from 'typeorm';
-import { limiter } from '../limiter.js';
-import { getIpHash } from '@/misc/get-ip-hash.js';
-
-export default async (ctx: Koa.Context) => {
-	ctx.set('Access-Control-Allow-Origin', config.url);
-	ctx.set('Access-Control-Allow-Credentials', 'true');
-
-	const body = ctx.request.body as any;
-	const username = body['username'];
-	const password = body['password'];
-	const token = body['token'];
-
-	function error(status: number, error: { id: string }) {
-		ctx.status = status;
-		ctx.body = { error };
-	}
-
-	try {
-		// not more than 1 attempt per second and not more than 10 attempts per hour
-		await limiter({ key: 'signin', duration: 60 * 60 * 1000, max: 10, minInterval: 1000 }, getIpHash(ctx.ip));
-	} catch (err) {
-		ctx.status = 429;
-		ctx.body = {
-			error: {
-				message: 'Too many failed attempts to sign in. Try again later.',
-				code: 'TOO_MANY_AUTHENTICATION_FAILURES',
-				id: '22d05606-fbcf-421a-a2db-b32610dcfd1b',
-			},
-		};
-		return;
-	}
-
-	if (typeof username !== 'string') {
-		ctx.status = 400;
-		return;
-	}
-
-	if (typeof password !== 'string') {
-		ctx.status = 400;
-		return;
-	}
-
-	if (token != null && typeof token !== 'string') {
-		ctx.status = 400;
-		return;
-	}
-
-	// Fetch user
-	const user = await Users.findOneBy({
-		usernameLower: username.toLowerCase(),
-		host: IsNull(),
-	}) as ILocalUser;
-
-	if (user == null) {
-		error(404, {
-			id: '6cc579cc-885d-43d8-95c2-b8c7fc963280',
-		});
-		return;
-	}
-
-	if (user.isSuspended) {
-		error(403, {
-			id: 'e03a5f46-d309-4865-9b69-56282d94e1eb',
-		});
-		return;
-	}
-
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	// Compare password
-	const same = await bcrypt.compare(password, profile.password!);
-
-	async function fail(status?: number, failure?: { id: string }) {
-		// Append signin history
-		await Signins.insert({
-			id: genId(),
-			createdAt: new Date(),
-			userId: user.id,
-			ip: ctx.ip,
-			headers: ctx.headers,
-			success: false,
-		});
-
-		error(status || 500, failure || { id: '4e30e80c-e338-45a0-8c8f-44455efa3b76' });
-	}
-
-	if (!profile.twoFactorEnabled) {
-		if (same) {
-			signin(ctx, user);
-			return;
-		} else {
-			await fail(403, {
-				id: '932c904e-9460-45b7-9ce6-7ed33be7eb2c',
-			});
-			return;
-		}
-	}
-
-	if (token) {
-		if (!same) {
-			await fail(403, {
-				id: '932c904e-9460-45b7-9ce6-7ed33be7eb2c',
-			});
-			return;
-		}
-
-		const verified = (speakeasy as any).totp.verify({
-			secret: profile.twoFactorSecret,
-			encoding: 'base32',
-			token: token,
-			window: 2,
-		});
-
-		if (verified) {
-			signin(ctx, user);
-			return;
-		} else {
-			await fail(403, {
-				id: 'cdf1235b-ac71-46d4-a3a6-84ccce48df6f',
-			});
-			return;
-		}
-	} else if (body.credentialId) {
-		if (!same && !profile.usePasswordLessLogin) {
-			await fail(403, {
-				id: '932c904e-9460-45b7-9ce6-7ed33be7eb2c',
-			});
-			return;
-		}
-
-		const clientDataJSON = Buffer.from(body.clientDataJSON, 'hex');
-		const clientData = JSON.parse(clientDataJSON.toString('utf-8'));
-		const challenge = await AttestationChallenges.findOneBy({
-			userId: user.id,
-			id: body.challengeId,
-			registrationChallenge: false,
-			challenge: hash(clientData.challenge).toString('hex'),
-		});
-
-		if (!challenge) {
-			await fail(403, {
-				id: '2715a88a-2125-4013-932f-aa6fe72792da',
-			});
-			return;
-		}
-
-		await AttestationChallenges.delete({
-			userId: user.id,
-			id: body.challengeId,
-		});
-
-		if (new Date().getTime() - challenge.createdAt.getTime() >= 5 * 60 * 1000) {
-			await fail(403, {
-				id: '2715a88a-2125-4013-932f-aa6fe72792da',
-			});
-			return;
-		}
-
-		const securityKey = await UserSecurityKeys.findOneBy({
-			id: Buffer.from(
-				body.credentialId
-					.replace(/-/g, '+')
-					.replace(/_/g, '/'),
-					'base64'
-			).toString('hex'),
-		});
-
-		if (!securityKey) {
-			await fail(403, {
-				id: '66269679-aeaf-4474-862b-eb761197e046',
-			});
-			return;
-		}
-
-		const isValid = verifyLogin({
-			publicKey: Buffer.from(securityKey.publicKey, 'hex'),
-			authenticatorData: Buffer.from(body.authenticatorData, 'hex'),
-			clientDataJSON,
-			clientData,
-			signature: Buffer.from(body.signature, 'hex'),
-			challenge: challenge.challenge,
-		});
-
-		if (isValid) {
-			signin(ctx, user);
-			return;
-		} else {
-			await fail(403, {
-				id: '93b86c4b-72f9-40eb-9815-798928603d1e',
-			});
-			return;
-		}
-	} else {
-		if (!same && !profile.usePasswordLessLogin) {
-			await fail(403, {
-				id: '932c904e-9460-45b7-9ce6-7ed33be7eb2c',
-			});
-			return;
-		}
-
-		const keys = await UserSecurityKeys.findBy({
-			userId: user.id,
-		});
-
-		if (keys.length === 0) {
-			await fail(403, {
-				id: 'f27fd449-9af4-4841-9249-1f989b9fa4a4',
-			});
-			return;
-		}
-
-		// 32 byte challenge
-		const challenge = randomBytes(32).toString('base64')
-			.replace(/=/g, '')
-			.replace(/\+/g, '-')
-			.replace(/\//g, '_');
-
-		const challengeId = genId();
-
-		await AttestationChallenges.insert({
-			userId: user.id,
-			id: challengeId,
-			challenge: hash(Buffer.from(challenge, 'utf-8')).toString('hex'),
-			createdAt: new Date(),
-			registrationChallenge: false,
-		});
-
-		ctx.body = {
-			challenge,
-			challengeId,
-			securityKeys: keys.map(key => ({
-				id: key.id,
-			})),
-		};
-		ctx.status = 200;
-		return;
-	}
-	// never get here
-};
diff --git a/packages/backend/src/server/api/private/signup-pending.ts b/packages/backend/src/server/api/private/signup-pending.ts
deleted file mode 100644
index e5e39ba00d..0000000000
--- a/packages/backend/src/server/api/private/signup-pending.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import Koa from 'koa';
-import { Users, UserPendings, UserProfiles } from '@/models/index.js';
-import { signup } from '../common/signup.js';
-import signin from '../common/signin.js';
-
-export default async (ctx: Koa.Context) => {
-	const body = ctx.request.body;
-
-	const code = body['code'];
-
-	try {
-		const pendingUser = await UserPendings.findOneByOrFail({ code });
-
-		const { account, secret } = await signup({
-			username: pendingUser.username,
-			passwordHash: pendingUser.password,
-		});
-
-		UserPendings.delete({
-			id: pendingUser.id,
-		});
-
-		const profile = await UserProfiles.findOneByOrFail({ userId: account.id });
-
-		await UserProfiles.update({ userId: profile.userId }, {
-			email: pendingUser.email,
-			emailVerified: true,
-			emailVerifyCode: null,
-		});
-
-		signin(ctx, account);
-	} catch (e) {
-		ctx.throw(400, e);
-	}
-};
diff --git a/packages/backend/src/server/api/private/signup.ts b/packages/backend/src/server/api/private/signup.ts
deleted file mode 100644
index 26f172637c..0000000000
--- a/packages/backend/src/server/api/private/signup.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import Koa from 'koa';
-import rndstr from 'rndstr';
-import bcrypt from 'bcryptjs';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { verifyHcaptcha, verifyRecaptcha } from '@/misc/captcha.js';
-import { Users, RegistrationTickets, UserPendings } from '@/models/index.js';
-import { signup } from '../common/signup.js';
-import config from '@/config/index.js';
-import { sendEmail } from '@/services/send-email.js';
-import { genId } from '@/misc/gen-id.js';
-import { validateEmailForAccount } from '@/services/validate-email-for-account.js';
-
-export default async (ctx: Koa.Context) => {
-	const body = ctx.request.body;
-
-	const instance = await fetchMeta(true);
-
-	// Verify *Captcha
-	// ただしテスト時はこの機構は障害となるため無効にする
-	if (process.env.NODE_ENV !== 'test') {
-		if (instance.enableHcaptcha && instance.hcaptchaSecretKey) {
-			await verifyHcaptcha(instance.hcaptchaSecretKey, body['hcaptcha-response']).catch(e => {
-				ctx.throw(400, e);
-			});
-		}
-
-		if (instance.enableRecaptcha && instance.recaptchaSecretKey) {
-			await verifyRecaptcha(instance.recaptchaSecretKey, body['g-recaptcha-response']).catch(e => {
-				ctx.throw(400, e);
-			});
-		}
-	}
-
-	const username = body['username'];
-	const password = body['password'];
-	const host: string | null = process.env.NODE_ENV === 'test' ? (body['host'] || null) : null;
-	const invitationCode = body['invitationCode'];
-	const emailAddress = body['emailAddress'];
-
-	if (instance.emailRequiredForSignup) {
-		if (emailAddress == null || typeof emailAddress !== 'string') {
-			ctx.status = 400;
-			return;
-		}
-
-		const available = await validateEmailForAccount(emailAddress);
-		if (!available) {
-			ctx.status = 400;
-			return;
-		}
-	}
-
-	if (instance.disableRegistration) {
-		if (invitationCode == null || typeof invitationCode !== 'string') {
-			ctx.status = 400;
-			return;
-		}
-
-		const ticket = await RegistrationTickets.findOneBy({
-			code: invitationCode,
-		});
-
-		if (ticket == null) {
-			ctx.status = 400;
-			return;
-		}
-
-		RegistrationTickets.delete(ticket.id);
-	}
-
-	if (instance.emailRequiredForSignup) {
-		const code = rndstr('a-z0-9', 16);
-
-		// Generate hash of password
-		const salt = await bcrypt.genSalt(8);
-		const hash = await bcrypt.hash(password, salt);
-
-		await UserPendings.insert({
-			id: genId(),
-			createdAt: new Date(),
-			code,
-			email: emailAddress,
-			username: username,
-			password: hash,
-		});
-
-		const link = `${config.url}/signup-complete/${code}`;
-
-		sendEmail(emailAddress, 'Signup',
-			`To complete signup, please click this link:<br><a href="${link}">${link}</a>`,
-			`To complete signup, please click this link: ${link}`);
-
-		ctx.status = 204;
-	} else {
-		try {
-			const { account, secret } = await signup({
-				username, password, host,
-			});
-
-			const res = await Users.pack(account, account, {
-				detail: true,
-				includeSecrets: true,
-			});
-
-			(res as any).token = secret;
-
-			ctx.body = res;
-		} catch (e) {
-			ctx.throw(400, e);
-		}
-	}
-};
diff --git a/packages/backend/src/server/api/service/discord.ts b/packages/backend/src/server/api/service/discord.ts
deleted file mode 100644
index 97cbcbecdb..0000000000
--- a/packages/backend/src/server/api/service/discord.ts
+++ /dev/null
@@ -1,287 +0,0 @@
-import Koa from 'koa';
-import Router from '@koa/router';
-import { OAuth2 } from 'oauth';
-import { v4 as uuid } from 'uuid';
-import { IsNull } from 'typeorm';
-import { getJson } from '@/misc/fetch.js';
-import config from '@/config/index.js';
-import { publishMainStream } from '@/services/stream.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Users, UserProfiles } from '@/models/index.js';
-import { ILocalUser } from '@/models/entities/user.js';
-import { redisClient } from '../../../db/redis.js';
-import signin from '../common/signin.js';
-
-function getUserToken(ctx: Koa.BaseContext): string | null {
-	return ((ctx.headers['cookie'] || '').match(/igi=(\w+)/) || [null, null])[1];
-}
-
-function compareOrigin(ctx: Koa.BaseContext): boolean {
-	function normalizeUrl(url?: string): string {
-		return url ? url.endsWith('/') ? url.substr(0, url.length - 1) : url : '';
-	}
-
-	const referer = ctx.headers['referer'];
-
-	return (normalizeUrl(referer) === normalizeUrl(config.url));
-}
-
-// Init router
-const router = new Router();
-
-router.get('/disconnect/discord', async ctx => {
-	if (!compareOrigin(ctx)) {
-		ctx.throw(400, 'invalid origin');
-		return;
-	}
-
-	const userToken = getUserToken(ctx);
-	if (!userToken) {
-		ctx.throw(400, 'signin required');
-		return;
-	}
-
-	const user = await Users.findOneByOrFail({
-		host: IsNull(),
-		token: userToken,
-	});
-
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	delete profile.integrations.discord;
-
-	await UserProfiles.update(user.id, {
-		integrations: profile.integrations,
-	});
-
-	ctx.body = 'Discordの連携を解除しました :v:';
-
-	// Publish i updated event
-	publishMainStream(user.id, 'meUpdated', await Users.pack(user, user, {
-		detail: true,
-		includeSecrets: true,
-	}));
-});
-
-async function getOAuth2() {
-	const meta = await fetchMeta(true);
-
-	if (meta.enableDiscordIntegration) {
-		return new OAuth2(
-			meta.discordClientId!,
-			meta.discordClientSecret!,
-			'https://discord.com/',
-			'api/oauth2/authorize',
-			'api/oauth2/token');
-	} else {
-		return null;
-	}
-}
-
-router.get('/connect/discord', async ctx => {
-	if (!compareOrigin(ctx)) {
-		ctx.throw(400, 'invalid origin');
-		return;
-	}
-
-	const userToken = getUserToken(ctx);
-	if (!userToken) {
-		ctx.throw(400, 'signin required');
-		return;
-	}
-
-	const params = {
-		redirect_uri: `${config.url}/api/dc/cb`,
-		scope: ['identify'],
-		state: uuid(),
-		response_type: 'code',
-	};
-
-	redisClient.set(userToken, JSON.stringify(params));
-
-	const oauth2 = await getOAuth2();
-	ctx.redirect(oauth2!.getAuthorizeUrl(params));
-});
-
-router.get('/signin/discord', async ctx => {
-	const sessid = uuid();
-
-	const params = {
-		redirect_uri: `${config.url}/api/dc/cb`,
-		scope: ['identify'],
-		state: uuid(),
-		response_type: 'code',
-	};
-
-	ctx.cookies.set('signin_with_discord_sid', sessid, {
-		path: '/',
-		secure: config.url.startsWith('https'),
-		httpOnly: true,
-	});
-
-	redisClient.set(sessid, JSON.stringify(params));
-
-	const oauth2 = await getOAuth2();
-	ctx.redirect(oauth2!.getAuthorizeUrl(params));
-});
-
-router.get('/dc/cb', async ctx => {
-	const userToken = getUserToken(ctx);
-
-	const oauth2 = await getOAuth2();
-
-	if (!userToken) {
-		const sessid = ctx.cookies.get('signin_with_discord_sid');
-
-		if (!sessid) {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const code = ctx.query.code;
-
-		if (!code || typeof code !== 'string') {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const { redirect_uri, state } = await new Promise<any>((res, rej) => {
-			redisClient.get(sessid, async (_, state) => {
-				res(JSON.parse(state));
-			});
-		});
-
-		if (ctx.query.state !== state) {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const { accessToken, refreshToken, expiresDate } = await new Promise<any>((res, rej) =>
-			oauth2!.getOAuthAccessToken(code, {
-				grant_type: 'authorization_code',
-				redirect_uri,
-			}, (err, accessToken, refreshToken, result) => {
-				if (err) {
-					rej(err);
-				} else if (result.error) {
-					rej(result.error);
-				} else {
-					res({
-						accessToken,
-						refreshToken,
-						expiresDate: Date.now() + Number(result.expires_in) * 1000,
-					});
-				}
-			}));
-
-		const { id, username, discriminator } = (await getJson('https://discord.com/api/users/@me', '*/*', 10 * 1000, {
-			'Authorization': `Bearer ${accessToken}`,
-		})) as Record<string, unknown>;
-
-		if (typeof id !== 'string' || typeof username !== 'string' || typeof discriminator !== 'string') {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const profile = await UserProfiles.createQueryBuilder()
-			.where('"integrations"->\'discord\'->>\'id\' = :id', { id: id })
-			.andWhere('"userHost" IS NULL')
-			.getOne();
-
-		if (profile == null) {
-			ctx.throw(404, `@${username}#${discriminator}と連携しているMisskeyアカウントはありませんでした...`);
-			return;
-		}
-
-		await UserProfiles.update(profile.userId, {
-			integrations: {
-				...profile.integrations,
-				discord: {
-					id: id,
-					accessToken: accessToken,
-					refreshToken: refreshToken,
-					expiresDate: expiresDate,
-					username: username,
-					discriminator: discriminator,
-				},
-			},
-		});
-
-		signin(ctx, await Users.findOneBy({ id: profile.userId }) as ILocalUser, true);
-	} else {
-		const code = ctx.query.code;
-
-		if (!code || typeof code !== 'string') {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const { redirect_uri, state } = await new Promise<any>((res, rej) => {
-			redisClient.get(userToken, async (_, state) => {
-				res(JSON.parse(state));
-			});
-		});
-
-		if (ctx.query.state !== state) {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const { accessToken, refreshToken, expiresDate } = await new Promise<any>((res, rej) =>
-			oauth2!.getOAuthAccessToken(code, {
-				grant_type: 'authorization_code',
-				redirect_uri,
-			}, (err, accessToken, refreshToken, result) => {
-				if (err) {
-					rej(err);
-				} else if (result.error) {
-					rej(result.error);
-				} else {
-					res({
-						accessToken,
-						refreshToken,
-						expiresDate: Date.now() + Number(result.expires_in) * 1000,
-					});
-				}
-			}));
-
-		const { id, username, discriminator } = (await getJson('https://discord.com/api/users/@me', '*/*', 10 * 1000, {
-			'Authorization': `Bearer ${accessToken}`,
-		})) as Record<string, unknown>;
-		if (typeof id !== 'string' || typeof username !== 'string' || typeof discriminator !== 'string') {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const user = await Users.findOneByOrFail({
-			host: IsNull(),
-			token: userToken,
-		});
-
-		const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-		await UserProfiles.update(user.id, {
-			integrations: {
-				...profile.integrations,
-				discord: {
-					accessToken: accessToken,
-					refreshToken: refreshToken,
-					expiresDate: expiresDate,
-					id: id,
-					username: username,
-					discriminator: discriminator,
-				},
-			},
-		});
-
-		ctx.body = `Discord: @${username}#${discriminator} を、Misskey: @${user.username} に接続しました！`;
-
-		// Publish i updated event
-		publishMainStream(user.id, 'meUpdated', await Users.pack(user, user, {
-			detail: true,
-			includeSecrets: true,
-		}));
-	}
-});
-
-export default router;
diff --git a/packages/backend/src/server/api/service/github.ts b/packages/backend/src/server/api/service/github.ts
deleted file mode 100644
index 04dbd1f7ab..0000000000
--- a/packages/backend/src/server/api/service/github.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-import Koa from 'koa';
-import Router from '@koa/router';
-import { OAuth2 } from 'oauth';
-import { v4 as uuid } from 'uuid';
-import { IsNull } from 'typeorm';
-import { getJson } from '@/misc/fetch.js';
-import config from '@/config/index.js';
-import { publishMainStream } from '@/services/stream.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Users, UserProfiles } from '@/models/index.js';
-import { ILocalUser } from '@/models/entities/user.js';
-import { redisClient } from '../../../db/redis.js';
-import signin from '../common/signin.js';
-
-function getUserToken(ctx: Koa.BaseContext): string | null {
-	return ((ctx.headers['cookie'] || '').match(/igi=(\w+)/) || [null, null])[1];
-}
-
-function compareOrigin(ctx: Koa.BaseContext): boolean {
-	function normalizeUrl(url?: string): string {
-		return url ? url.endsWith('/') ? url.substr(0, url.length - 1) : url : '';
-	}
-
-	const referer = ctx.headers['referer'];
-
-	return (normalizeUrl(referer) === normalizeUrl(config.url));
-}
-
-// Init router
-const router = new Router();
-
-router.get('/disconnect/github', async ctx => {
-	if (!compareOrigin(ctx)) {
-		ctx.throw(400, 'invalid origin');
-		return;
-	}
-
-	const userToken = getUserToken(ctx);
-	if (!userToken) {
-		ctx.throw(400, 'signin required');
-		return;
-	}
-
-	const user = await Users.findOneByOrFail({
-		host: IsNull(),
-		token: userToken,
-	});
-
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	delete profile.integrations.github;
-
-	await UserProfiles.update(user.id, {
-		integrations: profile.integrations,
-	});
-
-	ctx.body = 'GitHubの連携を解除しました :v:';
-
-	// Publish i updated event
-	publishMainStream(user.id, 'meUpdated', await Users.pack(user, user, {
-		detail: true,
-		includeSecrets: true,
-	}));
-});
-
-async function getOath2() {
-	const meta = await fetchMeta(true);
-
-	if (meta.enableGithubIntegration && meta.githubClientId && meta.githubClientSecret) {
-		return new OAuth2(
-			meta.githubClientId,
-			meta.githubClientSecret,
-			'https://github.com/',
-			'login/oauth/authorize',
-			'login/oauth/access_token');
-	} else {
-		return null;
-	}
-}
-
-router.get('/connect/github', async ctx => {
-	if (!compareOrigin(ctx)) {
-		ctx.throw(400, 'invalid origin');
-		return;
-	}
-
-	const userToken = getUserToken(ctx);
-	if (!userToken) {
-		ctx.throw(400, 'signin required');
-		return;
-	}
-
-	const params = {
-		redirect_uri: `${config.url}/api/gh/cb`,
-		scope: ['read:user'],
-		state: uuid(),
-	};
-
-	redisClient.set(userToken, JSON.stringify(params));
-
-	const oauth2 = await getOath2();
-	ctx.redirect(oauth2!.getAuthorizeUrl(params));
-});
-
-router.get('/signin/github', async ctx => {
-	const sessid = uuid();
-
-	const params = {
-		redirect_uri: `${config.url}/api/gh/cb`,
-		scope: ['read:user'],
-		state: uuid(),
-	};
-
-	ctx.cookies.set('signin_with_github_sid', sessid, {
-		path: '/',
-		secure: config.url.startsWith('https'),
-		httpOnly: true,
-	});
-
-	redisClient.set(sessid, JSON.stringify(params));
-
-	const oauth2 = await getOath2();
-	ctx.redirect(oauth2!.getAuthorizeUrl(params));
-});
-
-router.get('/gh/cb', async ctx => {
-	const userToken = getUserToken(ctx);
-
-	const oauth2 = await getOath2();
-
-	if (!userToken) {
-		const sessid = ctx.cookies.get('signin_with_github_sid');
-
-		if (!sessid) {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const code = ctx.query.code;
-
-		if (!code || typeof code !== 'string') {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const { redirect_uri, state } = await new Promise<any>((res, rej) => {
-			redisClient.get(sessid, async (_, state) => {
-				res(JSON.parse(state));
-			});
-		});
-
-		if (ctx.query.state !== state) {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const { accessToken } = await new Promise<any>((res, rej) =>
-			oauth2!.getOAuthAccessToken(code, {
-				redirect_uri,
-			}, (err, accessToken, refresh, result) => {
-				if (err) {
-					rej(err);
-				} else if (result.error) {
-					rej(result.error);
-				} else {
-					res({ accessToken });
-				}
-			}));
-
-		const { login, id } = (await getJson('https://api.github.com/user', 'application/vnd.github.v3+json', 10 * 1000, {
-			'Authorization': `bearer ${accessToken}`,
-		})) as Record<string, unknown>;
-		if (typeof login !== 'string' || typeof id !== 'string') {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const link = await UserProfiles.createQueryBuilder()
-			.where('"integrations"->\'github\'->>\'id\' = :id', { id: id })
-			.andWhere('"userHost" IS NULL')
-			.getOne();
-
-		if (link == null) {
-			ctx.throw(404, `@${login}と連携しているMisskeyアカウントはありませんでした...`);
-			return;
-		}
-
-		signin(ctx, await Users.findOneBy({ id: link.userId }) as ILocalUser, true);
-	} else {
-		const code = ctx.query.code;
-
-		if (!code || typeof code !== 'string') {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const { redirect_uri, state } = await new Promise<any>((res, rej) => {
-			redisClient.get(userToken, async (_, state) => {
-				res(JSON.parse(state));
-			});
-		});
-
-		if (ctx.query.state !== state) {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const { accessToken } = await new Promise<any>((res, rej) =>
-			oauth2!.getOAuthAccessToken(
-				code,
-				{ redirect_uri },
-				(err, accessToken, refresh, result) => {
-					if (err) {
-						rej(err);
-					} else if (result.error) {
-						rej(result.error);
-					} else {
-						res({ accessToken });
-					}
-				}));
-
-		const { login, id } = (await getJson('https://api.github.com/user', 'application/vnd.github.v3+json', 10 * 1000, {
-			'Authorization': `bearer ${accessToken}`,
-		})) as Record<string, unknown>;
-
-		if (typeof login !== 'string' || typeof id !== 'string') {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const user = await Users.findOneByOrFail({
-			host: IsNull(),
-			token: userToken,
-		});
-
-		const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-		await UserProfiles.update(user.id, {
-			integrations: {
-				...profile.integrations,
-				github: {
-					accessToken: accessToken,
-					id: id,
-					login: login,
-				},
-			},
-		});
-
-		ctx.body = `GitHub: @${login} を、Misskey: @${user.username} に接続しました！`;
-
-		// Publish i updated event
-		publishMainStream(user.id, 'meUpdated', await Users.pack(user, user, {
-			detail: true,
-			includeSecrets: true,
-		}));
-	}
-});
-
-export default router;
diff --git a/packages/backend/src/server/api/service/twitter.ts b/packages/backend/src/server/api/service/twitter.ts
deleted file mode 100644
index 2b4f9f6daa..0000000000
--- a/packages/backend/src/server/api/service/twitter.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-import Koa from 'koa';
-import Router from '@koa/router';
-import { v4 as uuid } from 'uuid';
-import autwh from 'autwh';
-import { IsNull } from 'typeorm';
-import { publishMainStream } from '@/services/stream.js';
-import config from '@/config/index.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Users, UserProfiles } from '@/models/index.js';
-import { ILocalUser } from '@/models/entities/user.js';
-import signin from '../common/signin.js';
-import { redisClient } from '../../../db/redis.js';
-
-function getUserToken(ctx: Koa.BaseContext): string | null {
-	return ((ctx.headers['cookie'] || '').match(/igi=(\w+)/) || [null, null])[1];
-}
-
-function compareOrigin(ctx: Koa.BaseContext): boolean {
-	function normalizeUrl(url?: string): string {
-		return url == null ? '' : url.endsWith('/') ? url.substr(0, url.length - 1) : url;
-	}
-
-	const referer = ctx.headers['referer'];
-
-	return (normalizeUrl(referer) === normalizeUrl(config.url));
-}
-
-// Init router
-const router = new Router();
-
-router.get('/disconnect/twitter', async ctx => {
-	if (!compareOrigin(ctx)) {
-		ctx.throw(400, 'invalid origin');
-		return;
-	}
-
-	const userToken = getUserToken(ctx);
-	if (userToken == null) {
-		ctx.throw(400, 'signin required');
-		return;
-	}
-
-	const user = await Users.findOneByOrFail({
-		host: IsNull(),
-		token: userToken,
-	});
-
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	delete profile.integrations.twitter;
-
-	await UserProfiles.update(user.id, {
-		integrations: profile.integrations,
-	});
-
-	ctx.body = 'Twitterの連携を解除しました :v:';
-
-	// Publish i updated event
-	publishMainStream(user.id, 'meUpdated', await Users.pack(user, user, {
-		detail: true,
-		includeSecrets: true,
-	}));
-});
-
-async function getTwAuth() {
-	const meta = await fetchMeta(true);
-
-	if (meta.enableTwitterIntegration && meta.twitterConsumerKey && meta.twitterConsumerSecret) {
-		return autwh({
-			consumerKey: meta.twitterConsumerKey,
-			consumerSecret: meta.twitterConsumerSecret,
-			callbackUrl: `${config.url}/api/tw/cb`,
-		});
-	} else {
-		return null;
-	}
-}
-
-router.get('/connect/twitter', async ctx => {
-	if (!compareOrigin(ctx)) {
-		ctx.throw(400, 'invalid origin');
-		return;
-	}
-
-	const userToken = getUserToken(ctx);
-	if (userToken == null) {
-		ctx.throw(400, 'signin required');
-		return;
-	}
-
-	const twAuth = await getTwAuth();
-	const twCtx = await twAuth!.begin();
-	redisClient.set(userToken, JSON.stringify(twCtx));
-	ctx.redirect(twCtx.url);
-});
-
-router.get('/signin/twitter', async ctx => {
-	const twAuth = await getTwAuth();
-	const twCtx = await twAuth!.begin();
-
-	const sessid = uuid();
-
-	redisClient.set(sessid, JSON.stringify(twCtx));
-
-	ctx.cookies.set('signin_with_twitter_sid', sessid, {
-		path: '/',
-		secure: config.url.startsWith('https'),
-		httpOnly: true,
-	});
-
-	ctx.redirect(twCtx.url);
-});
-
-router.get('/tw/cb', async ctx => {
-	const userToken = getUserToken(ctx);
-
-	const twAuth = await getTwAuth();
-
-	if (userToken == null) {
-		const sessid = ctx.cookies.get('signin_with_twitter_sid');
-
-		if (sessid == null) {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const get = new Promise<any>((res, rej) => {
-			redisClient.get(sessid, async (_, twCtx) => {
-				res(twCtx);
-			});
-		});
-
-		const twCtx = await get;
-
-		const verifier = ctx.query.oauth_verifier;
-		if (!verifier || typeof verifier !== 'string') {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const result = await twAuth!.done(JSON.parse(twCtx), verifier);
-
-		const link = await UserProfiles.createQueryBuilder()
-			.where('"integrations"->\'twitter\'->>\'userId\' = :id', { id: result.userId })
-			.andWhere('"userHost" IS NULL')
-			.getOne();
-
-		if (link == null) {
-			ctx.throw(404, `@${result.screenName}と連携しているMisskeyアカウントはありませんでした...`);
-			return;
-		}
-
-		signin(ctx, await Users.findOneBy({ id: link.userId }) as ILocalUser, true);
-	} else {
-		const verifier = ctx.query.oauth_verifier;
-
-		if (!verifier || typeof verifier !== 'string') {
-			ctx.throw(400, 'invalid session');
-			return;
-		}
-
-		const get = new Promise<any>((res, rej) => {
-			redisClient.get(userToken, async (_, twCtx) => {
-				res(twCtx);
-			});
-		});
-
-		const twCtx = await get;
-
-		const result = await twAuth!.done(JSON.parse(twCtx), verifier);
-
-		const user = await Users.findOneByOrFail({
-			host: IsNull(),
-			token: userToken,
-		});
-
-		const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-		await UserProfiles.update(user.id, {
-			integrations: {
-				...profile.integrations,
-				twitter: {
-					accessToken: result.accessToken,
-					accessTokenSecret: result.accessTokenSecret,
-					userId: result.userId,
-					screenName: result.screenName,
-				},
-			},
-		});
-
-		ctx.body = `Twitter: @${result.screenName} を、Misskey: @${user.username} に接続しました！`;
-
-		// Publish i updated event
-		publishMainStream(user.id, 'meUpdated', await Users.pack(user, user, {
-			detail: true,
-			includeSecrets: true,
-		}));
-	}
-});
-
-export default router;
diff --git a/packages/backend/src/server/api/stream/ChannelsService.ts b/packages/backend/src/server/api/stream/ChannelsService.ts
new file mode 100644
index 0000000000..d6005b1ee8
--- /dev/null
+++ b/packages/backend/src/server/api/stream/ChannelsService.ts
@@ -0,0 +1,62 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { DI } from '@/di-symbols.js';
+import { HybridTimelineChannelService } from './channels/hybrid-timeline.js';
+import { LocalTimelineChannelService } from './channels/local-timeline.js';
+import { HomeTimelineChannelService } from './channels/home-timeline.js';
+import { GlobalTimelineChannelService } from './channels/global-timeline.js';
+import { MainChannelService } from './channels/main.js';
+import { ChannelChannelService } from './channels/channel.js';
+import { AdminChannelService } from './channels/admin.js';
+import { ServerStatsChannelService } from './channels/server-stats.js';
+import { QueueStatsChannelService } from './channels/queue-stats.js';
+import { UserListChannelService } from './channels/user-list.js';
+import { AntennaChannelService } from './channels/antenna.js';
+import { MessagingChannelService } from './channels/messaging.js';
+import { MessagingIndexChannelService } from './channels/messaging-index.js';
+import { DriveChannelService } from './channels/drive.js';
+import { HashtagChannelService } from './channels/hashtag.js';
+
+@Injectable()
+export class ChannelsService {
+	constructor(
+		private mainChannelService: MainChannelService,
+		private homeTimelineChannelService: HomeTimelineChannelService,
+		private localTimelineChannelService: LocalTimelineChannelService,
+		private hybridTimelineChannelService: HybridTimelineChannelService,
+		private globalTimelineChannelService: GlobalTimelineChannelService,
+		private userListChannelService: UserListChannelService,
+		private hashtagChannelService: HashtagChannelService,
+		private antennaChannelService: AntennaChannelService,
+		private channelChannelService: ChannelChannelService,
+		private messagingChannelService: MessagingChannelService,
+		private messagingIndexChannelService: MessagingIndexChannelService,
+		private driveChannelService: DriveChannelService,
+		private serverStatsChannelService: ServerStatsChannelService,
+		private queueStatsChannelService: QueueStatsChannelService,
+		private adminChannelService: AdminChannelService,
+	) {
+	}
+
+	public getChannelService(name: string) {
+		switch (name) {
+			case 'main': return this.mainChannelService;
+			case 'homeTimeline': return this.homeTimelineChannelService;
+			case 'localTimeline': return this.localTimelineChannelService;
+			case 'hybridTimeline': return this.hybridTimelineChannelService;
+			case 'globalTimeline': return this.globalTimelineChannelService;
+			case 'userList': return this.userListChannelService;
+			case 'hashtag': return this.hashtagChannelService;
+			case 'antenna': return this.antennaChannelService;
+			case 'channel': return this.channelChannelService;
+			case 'messaging': return this.messagingChannelService;
+			case 'messagingIndex': return this.messagingIndexChannelService;
+			case 'drive': return this.driveChannelService;
+			case 'serverStats': return this.serverStatsChannelService;
+			case 'queueStats': return this.queueStatsChannelService;
+			case 'admin': return this.adminChannelService;
+		
+			default:
+				throw new Error(`no such channel: ${name}`);
+		}
+	}
+}
diff --git a/packages/backend/src/server/api/stream/channel.ts b/packages/backend/src/server/api/stream/channel.ts
index d2cc5122d5..5480c12c09 100644
--- a/packages/backend/src/server/api/stream/channel.ts
+++ b/packages/backend/src/server/api/stream/channel.ts
@@ -1,4 +1,4 @@
-import Connection from '.';
+import type Connection from '.';
 
 /**
  * Stream channel
diff --git a/packages/backend/src/server/api/stream/channels/admin.ts b/packages/backend/src/server/api/stream/channels/admin.ts
index 945182ea10..8c3c0d2adf 100644
--- a/packages/backend/src/server/api/stream/channels/admin.ts
+++ b/packages/backend/src/server/api/stream/channels/admin.ts
@@ -1,6 +1,7 @@
+import { Inject, Injectable } from '@nestjs/common';
 import Channel from '../channel.js';
 
-export default class extends Channel {
+class AdminChannel extends Channel {
 	public readonly chName = 'admin';
 	public static shouldShare = true;
 	public static requireCredential = true;
@@ -12,3 +13,20 @@ export default class extends Channel {
 		});
 	}
 }
+
+@Injectable()
+export class AdminChannelService {
+	public readonly shouldShare = AdminChannel.shouldShare;
+	public readonly requireCredential = AdminChannel.requireCredential;
+
+	constructor(
+	) {
+	}
+
+	public create(id: string, connection: Channel['connection']): AdminChannel {
+		return new AdminChannel(
+			id,
+			connection,
+		);
+	}
+}
diff --git a/packages/backend/src/server/api/stream/channels/antenna.ts b/packages/backend/src/server/api/stream/channels/antenna.ts
index d28320d928..7c34aef495 100644
--- a/packages/backend/src/server/api/stream/channels/antenna.ts
+++ b/packages/backend/src/server/api/stream/channels/antenna.ts
@@ -1,15 +1,22 @@
-import Channel from '../channel.js';
-import { Notes } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import type { NotesRepository } from '@/models/index.js';
 import { isUserRelated } from '@/misc/is-user-related.js';
-import { StreamMessages } from '../types.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import Channel from '../channel.js';
+import type { StreamMessages } from '../types.js';
 
-export default class extends Channel {
+class AntennaChannel extends Channel {
 	public readonly chName = 'antenna';
 	public static shouldShare = false;
 	public static requireCredential = false;
 	private antennaId: string;
 
-	constructor(id: string, connection: Channel['connection']) {
+	constructor(
+		private noteEntityService: NoteEntityService,
+
+		id: string,
+		connection: Channel['connection'],
+	) {
 		super(id, connection);
 		this.onEvent = this.onEvent.bind(this);
 	}
@@ -23,7 +30,7 @@ export default class extends Channel {
 
 	private async onEvent(data: StreamMessages['antenna']['payload']) {
 		if (data.type === 'note') {
-			const note = await Notes.pack(data.body.id, this.user, { detail: true });
+			const note = await this.noteEntityService.pack(data.body.id, this.user, { detail: true });
 
 			// 流れてきたNoteがミュートしているユーザーが関わるものだったら無視する
 			if (isUserRelated(note, this.muting)) return;
@@ -43,3 +50,22 @@ export default class extends Channel {
 		this.subscriber.off(`antennaStream:${this.antennaId}`, this.onEvent);
 	}
 }
+
+@Injectable()
+export class AntennaChannelService {
+	public readonly shouldShare = AntennaChannel.shouldShare;
+	public readonly requireCredential = AntennaChannel.requireCredential;
+
+	constructor(
+		private noteEntityService: NoteEntityService,
+	) {
+	}
+
+	public create(id: string, connection: Channel['connection']): AntennaChannel {
+		return new AntennaChannel(
+			this.noteEntityService,
+			id,
+			connection,
+		);
+	}
+}
diff --git a/packages/backend/src/server/api/stream/channels/channel.ts b/packages/backend/src/server/api/stream/channels/channel.ts
index 3cdd89a8b3..2ef70e62e9 100644
--- a/packages/backend/src/server/api/stream/channels/channel.ts
+++ b/packages/backend/src/server/api/stream/channels/channel.ts
@@ -1,11 +1,14 @@
-import Channel from '../channel.js';
-import { Notes, Users } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import type { NotesRepository, UsersRepository } from '@/models/index.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';
+import type { User } from '@/models/entities/User.js';
+import type { Packed } from '@/misc/schema.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import Channel from '../channel.js';
+import type { StreamMessages } from '../types.js';
 
-export default class extends Channel {
+class ChannelChannel extends Channel {
 	public readonly chName = 'channel';
 	public static shouldShare = false;
 	public static requireCredential = false;
@@ -13,7 +16,13 @@ export default class extends Channel {
 	private typers: Record<User['id'], Date> = {};
 	private emitTypersIntervalId: ReturnType<typeof setInterval>;
 
-	constructor(id: string, connection: Channel['connection']) {
+	constructor(
+		private noteEntityService: NoteEntityService,
+		private userEntityService: UserEntityService,
+
+		id: string,
+		connection: Channel['connection'],
+	) {
 		super(id, connection);
 		this.onNote = this.onNote.bind(this);
 		this.emitTypers = this.emitTypers.bind(this);
@@ -33,13 +42,13 @@ export default class extends Channel {
 
 		// リプライなら再pack
 		if (note.replyId != null) {
-			note.reply = await Notes.pack(note.replyId, this.user, {
+			note.reply = await this.noteEntityService.pack(note.replyId, this.user, {
 				detail: true,
 			});
 		}
 		// Renoteなら再pack
 		if (note.renoteId != null) {
-			note.renote = await Notes.pack(note.renoteId, this.user, {
+			note.renote = await this.noteEntityService.pack(note.renoteId, this.user, {
 				detail: true,
 			});
 		}
@@ -73,7 +82,7 @@ export default class extends Channel {
 			if (now.getTime() - date.getTime() > 5000) delete this.typers[userId];
 		}
 
-		const users = await Users.packMany(Object.keys(this.typers), null, { detail: false });
+		const users = await this.userEntityService.packMany(Object.keys(this.typers), null, { detail: false });
 
 		this.send({
 			type: 'typers',
@@ -89,3 +98,24 @@ export default class extends Channel {
 		clearInterval(this.emitTypersIntervalId);
 	}
 }
+
+@Injectable()
+export class ChannelChannelService {
+	public readonly shouldShare = ChannelChannel.shouldShare;
+	public readonly requireCredential = ChannelChannel.requireCredential;
+
+	constructor(
+		private noteEntityService: NoteEntityService,
+		private userEntityService: UserEntityService,
+	) {
+	}
+
+	public create(id: string, connection: Channel['connection']): ChannelChannel {
+		return new ChannelChannel(
+			this.noteEntityService,
+			this.userEntityService,
+			id,
+			connection,
+		);
+	}
+}
diff --git a/packages/backend/src/server/api/stream/channels/drive.ts b/packages/backend/src/server/api/stream/channels/drive.ts
index 140255acd1..80d83cd690 100644
--- a/packages/backend/src/server/api/stream/channels/drive.ts
+++ b/packages/backend/src/server/api/stream/channels/drive.ts
@@ -1,6 +1,7 @@
+import { Inject, Injectable } from '@nestjs/common';
 import Channel from '../channel.js';
 
-export default class extends Channel {
+class DriveChannel extends Channel {
 	public readonly chName = 'drive';
 	public static shouldShare = true;
 	public static requireCredential = true;
@@ -12,3 +13,20 @@ export default class extends Channel {
 		});
 	}
 }
+
+@Injectable()
+export class DriveChannelService {
+	public readonly shouldShare = DriveChannel.shouldShare;
+	public readonly requireCredential = DriveChannel.requireCredential;
+
+	constructor(
+	) {
+	}
+
+	public create(id: string, connection: Channel['connection']): DriveChannel {
+		return new DriveChannel(
+			id,
+			connection,
+		);
+	}
+}
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 5b4ae850ec..a8617582dc 100644
--- a/packages/backend/src/server/api/stream/channels/global-timeline.ts
+++ b/packages/backend/src/server/api/stream/channels/global-timeline.ts
@@ -1,23 +1,31 @@
-import Channel from '../channel.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Notes } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import type { NotesRepository } from '@/models/index.js';
 import { checkWordMute } from '@/misc/check-word-mute.js';
 import { isInstanceMuted } from '@/misc/is-instance-muted.js';
 import { isUserRelated } from '@/misc/is-user-related.js';
-import { Packed } from '@/misc/schema.js';
+import type { Packed } from '@/misc/schema.js';
+import { MetaService } from '@/core/MetaService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import Channel from '../channel.js';
 
-export default class extends Channel {
+class GlobalTimelineChannel extends Channel {
 	public readonly chName = 'globalTimeline';
 	public static shouldShare = true;
 	public static requireCredential = false;
 
-	constructor(id: string, connection: Channel['connection']) {
+	constructor(
+		private metaService: MetaService,
+		private noteEntityService: NoteEntityService,
+
+		id: string,
+		connection: Channel['connection'],
+	) {
 		super(id, connection);
 		this.onNote = this.onNote.bind(this);
 	}
 
 	public async init(params: any) {
-		const meta = await fetchMeta();
+		const meta = await this.metaService.fetch();
 		if (meta.disableGlobalTimeline) {
 			if (this.user == null || (!this.user.isAdmin && !this.user.isModerator)) return;
 		}
@@ -32,13 +40,13 @@ export default class extends Channel {
 
 		// リプライなら再pack
 		if (note.replyId != null) {
-			note.reply = await Notes.pack(note.replyId, this.user, {
+			note.reply = await this.noteEntityService.pack(note.replyId, this.user, {
 				detail: true,
 			});
 		}
 		// Renoteなら再pack
 		if (note.renoteId != null) {
-			note.renote = await Notes.pack(note.renoteId, this.user, {
+			note.renote = await this.noteEntityService.pack(note.renoteId, this.user, {
 				detail: true,
 			});
 		}
@@ -75,3 +83,24 @@ export default class extends Channel {
 		this.subscriber.off('notesStream', this.onNote);
 	}
 }
+
+@Injectable()
+export class GlobalTimelineChannelService {
+	public readonly shouldShare = GlobalTimelineChannel.shouldShare;
+	public readonly requireCredential = GlobalTimelineChannel.requireCredential;
+
+	constructor(
+		private metaService: MetaService,
+		private noteEntityService: NoteEntityService,
+	) {
+	}
+
+	public create(id: string, connection: Channel['connection']): GlobalTimelineChannel {
+		return new GlobalTimelineChannel(
+			this.metaService,
+			this.noteEntityService,
+			id,
+			connection,
+		);
+	}
+}
diff --git a/packages/backend/src/server/api/stream/channels/hashtag.ts b/packages/backend/src/server/api/stream/channels/hashtag.ts
index 741db447e6..0f6c081c12 100644
--- a/packages/backend/src/server/api/stream/channels/hashtag.ts
+++ b/packages/backend/src/server/api/stream/channels/hashtag.ts
@@ -1,16 +1,23 @@
-import Channel from '../channel.js';
-import { Notes } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import type { NotesRepository } from '@/models/index.js';
 import { normalizeForSearch } from '@/misc/normalize-for-search.js';
 import { isUserRelated } from '@/misc/is-user-related.js';
-import { Packed } from '@/misc/schema.js';
+import type { Packed } from '@/misc/schema.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import Channel from '../channel.js';
 
-export default class extends Channel {
+class HashtagChannel extends Channel {
 	public readonly chName = 'hashtag';
 	public static shouldShare = false;
 	public static requireCredential = false;
 	private q: string[][];
 
-	constructor(id: string, connection: Channel['connection']) {
+	constructor(
+		private noteEntityService: NoteEntityService,
+
+		id: string,
+		connection: Channel['connection'],
+	) {
 		super(id, connection);
 		this.onNote = this.onNote.bind(this);
 	}
@@ -31,7 +38,7 @@ export default class extends Channel {
 
 		// Renoteなら再pack
 		if (note.renoteId != null) {
-			note.renote = await Notes.pack(note.renoteId, this.user, {
+			note.renote = await this.noteEntityService.pack(note.renoteId, this.user, {
 				detail: true,
 			});
 		}
@@ -51,3 +58,22 @@ export default class extends Channel {
 		this.subscriber.off('notesStream', this.onNote);
 	}
 }
+
+@Injectable()
+export class HashtagChannelService {
+	public readonly shouldShare = HashtagChannel.shouldShare;
+	public readonly requireCredential = HashtagChannel.requireCredential;
+
+	constructor(
+		private noteEntityService: NoteEntityService,
+	) {
+	}
+
+	public create(id: string, connection: Channel['connection']): HashtagChannel {
+		return new HashtagChannel(
+			this.noteEntityService,
+			id,
+			connection,
+		);
+	}
+}
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 075a242ef0..16e0cebc72 100644
--- a/packages/backend/src/server/api/stream/channels/home-timeline.ts
+++ b/packages/backend/src/server/api/stream/channels/home-timeline.ts
@@ -1,16 +1,23 @@
-import Channel from '../channel.js';
-import { Notes } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import type { NotesRepository } from '@/models/index.js';
 import { checkWordMute } from '@/misc/check-word-mute.js';
 import { isUserRelated } from '@/misc/is-user-related.js';
 import { isInstanceMuted } from '@/misc/is-instance-muted.js';
-import { Packed } from '@/misc/schema.js';
+import type { Packed } from '@/misc/schema.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import Channel from '../channel.js';
 
-export default class extends Channel {
+class HomeTimelineChannel extends Channel {
 	public readonly chName = 'homeTimeline';
 	public static shouldShare = true;
 	public static requireCredential = true;
 
-	constructor(id: string, connection: Channel['connection']) {
+	constructor(
+		private noteEntityService: NoteEntityService,
+
+		id: string,
+		connection: Channel['connection'],
+	) {
 		super(id, connection);
 		this.onNote = this.onNote.bind(this);
 	}
@@ -32,7 +39,7 @@ export default class extends Channel {
 		if (isInstanceMuted(note, new Set<string>(this.userProfile?.mutedInstances ?? []))) return;
 
 		if (['followers', 'specified'].includes(note.visibility)) {
-			note = await Notes.pack(note.id, this.user!, {
+			note = await this.noteEntityService.pack(note.id, this.user!, {
 				detail: true,
 			});
 
@@ -42,13 +49,13 @@ export default class extends Channel {
 		} else {
 			// リプライなら再pack
 			if (note.replyId != null) {
-				note.reply = await Notes.pack(note.replyId, this.user!, {
+				note.reply = await this.noteEntityService.pack(note.replyId, this.user!, {
 					detail: true,
 				});
 			}
 			// Renoteなら再pack
 			if (note.renoteId != null) {
-				note.renote = await Notes.pack(note.renoteId, this.user!, {
+				note.renote = await this.noteEntityService.pack(note.renoteId, this.user!, {
 					detail: true,
 				});
 			}
@@ -83,3 +90,22 @@ export default class extends Channel {
 		this.subscriber.off('notesStream', this.onNote);
 	}
 }
+
+@Injectable()
+export class HomeTimelineChannelService {
+	public readonly shouldShare = HomeTimelineChannel.shouldShare;
+	public readonly requireCredential = HomeTimelineChannel.requireCredential;
+
+	constructor(
+		private noteEntityService: NoteEntityService,
+	) {
+	}
+
+	public create(id: string, connection: Channel['connection']): HomeTimelineChannel {
+		return new HomeTimelineChannel(
+			this.noteEntityService,
+			id,
+			connection,
+		);
+	}
+}
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 f5dedf77ce..f1ce822583 100644
--- a/packages/backend/src/server/api/stream/channels/hybrid-timeline.ts
+++ b/packages/backend/src/server/api/stream/channels/hybrid-timeline.ts
@@ -1,23 +1,32 @@
-import Channel from '../channel.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Notes } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import type { NotesRepository } from '@/models/index.js';
 import { checkWordMute } from '@/misc/check-word-mute.js';
 import { isUserRelated } from '@/misc/is-user-related.js';
 import { isInstanceMuted } from '@/misc/is-instance-muted.js';
-import { Packed } from '@/misc/schema.js';
+import type { Packed } from '@/misc/schema.js';
+import { DI } from '@/di-symbols.js';
+import { MetaService } from '@/core/MetaService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import Channel from '../channel.js';
 
-export default class extends Channel {
+class HybridTimelineChannel extends Channel {
 	public readonly chName = 'hybridTimeline';
 	public static shouldShare = true;
 	public static requireCredential = true;
 
-	constructor(id: string, connection: Channel['connection']) {
+	constructor(
+		private metaService: MetaService,
+		private noteEntityService: NoteEntityService,
+
+		id: string,
+		connection: Channel['connection'],
+	) {
 		super(id, connection);
 		this.onNote = this.onNote.bind(this);
 	}
 
-	public async init(params: any) {
-		const meta = await fetchMeta();
+	public async init(params: any): Promise<void> {
+		const meta = await this.metaService.fetch();
 		if (meta.disableLocalTimeline && !this.user!.isAdmin && !this.user!.isModerator) return;
 
 		// Subscribe events
@@ -37,7 +46,7 @@ export default class extends Channel {
 		)) return;
 
 		if (['followers', 'specified'].includes(note.visibility)) {
-			note = await Notes.pack(note.id, this.user!, {
+			note = await this.noteEntityService.pack(note.id, this.user!, {
 				detail: true,
 			});
 
@@ -47,13 +56,13 @@ export default class extends Channel {
 		} else {
 			// リプライなら再pack
 			if (note.replyId != null) {
-				note.reply = await Notes.pack(note.replyId, this.user!, {
+				note.reply = await this.noteEntityService.pack(note.replyId, this.user!, {
 					detail: true,
 				});
 			}
 			// Renoteなら再pack
 			if (note.renoteId != null) {
-				note.renote = await Notes.pack(note.renoteId, this.user!, {
+				note.renote = await this.noteEntityService.pack(note.renoteId, this.user!, {
 					detail: true,
 				});
 			}
@@ -86,8 +95,29 @@ export default class extends Channel {
 		this.send('note', note);
 	}
 
-	public dispose() {
+	public dispose(): void {
 		// Unsubscribe events
 		this.subscriber.off('notesStream', this.onNote);
 	}
 }
+
+@Injectable()
+export class HybridTimelineChannelService {
+	public readonly shouldShare = HybridTimelineChannel.shouldShare;
+	public readonly requireCredential = HybridTimelineChannel.requireCredential;
+
+	constructor(
+		private metaService: MetaService,
+		private noteEntityService: NoteEntityService,
+	) {
+	}
+
+	public create(id: string, connection: Channel['connection']): HybridTimelineChannel {
+		return new HybridTimelineChannel(
+			this.metaService,
+			this.noteEntityService,
+			id,
+			connection,
+		);
+	}
+}
diff --git a/packages/backend/src/server/api/stream/channels/index.ts b/packages/backend/src/server/api/stream/channels/index.ts
deleted file mode 100644
index d422edde87..0000000000
--- a/packages/backend/src/server/api/stream/channels/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import main from './main.js';
-import homeTimeline from './home-timeline.js';
-import localTimeline from './local-timeline.js';
-import hybridTimeline from './hybrid-timeline.js';
-import globalTimeline from './global-timeline.js';
-import serverStats from './server-stats.js';
-import queueStats from './queue-stats.js';
-import userList from './user-list.js';
-import antenna from './antenna.js';
-import messaging from './messaging.js';
-import messagingIndex from './messaging-index.js';
-import drive from './drive.js';
-import hashtag from './hashtag.js';
-import channel from './channel.js';
-import admin from './admin.js';
-
-export default {
-	main,
-	homeTimeline,
-	localTimeline,
-	hybridTimeline,
-	globalTimeline,
-	serverStats,
-	queueStats,
-	userList,
-	antenna,
-	messaging,
-	messagingIndex,
-	drive,
-	hashtag,
-	channel,
-	admin,
-};
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 f01f477238..5a5a43f845 100644
--- a/packages/backend/src/server/api/stream/channels/local-timeline.ts
+++ b/packages/backend/src/server/api/stream/channels/local-timeline.ts
@@ -1,22 +1,30 @@
-import Channel from '../channel.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Notes } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import type { NotesRepository } from '@/models/index.js';
 import { checkWordMute } from '@/misc/check-word-mute.js';
 import { isUserRelated } from '@/misc/is-user-related.js';
-import { Packed } from '@/misc/schema.js';
+import type { Packed } from '@/misc/schema.js';
+import { MetaService } from '@/core/MetaService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import Channel from '../channel.js';
 
-export default class extends Channel {
+class LocalTimelineChannel extends Channel {
 	public readonly chName = 'localTimeline';
 	public static shouldShare = true;
 	public static requireCredential = false;
 
-	constructor(id: string, connection: Channel['connection']) {
+	constructor(
+		private metaService: MetaService,
+		private noteEntityService: NoteEntityService,
+
+		id: string,
+		connection: Channel['connection'],
+	) {
 		super(id, connection);
 		this.onNote = this.onNote.bind(this);
 	}
 
 	public async init(params: any) {
-		const meta = await fetchMeta();
+		const meta = await this.metaService.fetch();
 		if (meta.disableLocalTimeline) {
 			if (this.user == null || (!this.user.isAdmin && !this.user.isModerator)) return;
 		}
@@ -32,13 +40,13 @@ export default class extends Channel {
 
 		// リプライなら再pack
 		if (note.replyId != null) {
-			note.reply = await Notes.pack(note.replyId, this.user, {
+			note.reply = await this.noteEntityService.pack(note.replyId, this.user, {
 				detail: true,
 			});
 		}
 		// Renoteなら再pack
 		if (note.renoteId != null) {
-			note.renote = await Notes.pack(note.renoteId, this.user, {
+			note.renote = await this.noteEntityService.pack(note.renoteId, this.user, {
 				detail: true,
 			});
 		}
@@ -72,3 +80,24 @@ export default class extends Channel {
 		this.subscriber.off('notesStream', this.onNote);
 	}
 }
+
+@Injectable()
+export class LocalTimelineChannelService {
+	public readonly shouldShare = LocalTimelineChannel.shouldShare;
+	public readonly requireCredential = LocalTimelineChannel.requireCredential;
+
+	constructor(
+		private metaService: MetaService,
+		private noteEntityService: NoteEntityService,
+	) {
+	}
+
+	public create(id: string, connection: Channel['connection']): LocalTimelineChannel {
+		return new LocalTimelineChannel(
+			this.metaService,
+			this.noteEntityService,
+			id,
+			connection,
+		);
+	}
+}
diff --git a/packages/backend/src/server/api/stream/channels/main.ts b/packages/backend/src/server/api/stream/channels/main.ts
index 9cfea0bfc4..12908e07b4 100644
--- a/packages/backend/src/server/api/stream/channels/main.ts
+++ b/packages/backend/src/server/api/stream/channels/main.ts
@@ -1,12 +1,23 @@
-import Channel from '../channel.js';
-import { Notes } from '@/models/index.js';
+import { Inject, Injectable } from '@nestjs/common';
+import type { NotesRepository } from '@/models/index.js';
 import { isInstanceMuted, isUserFromMutedInstance } from '@/misc/is-instance-muted.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import Channel from '../channel.js';
 
-export default class extends Channel {
+class MainChannel extends Channel {
 	public readonly chName = 'main';
 	public static shouldShare = true;
 	public static requireCredential = true;
 
+	constructor(
+		private noteEntityService: NoteEntityService,
+
+		id: string,
+		connection: Channel['connection'],
+	) {
+		super(id, connection);
+	}
+
 	public async init(params: any) {
 		// Subscribe main stream channel
 		this.subscriber.on(`mainStream:${this.user!.id}`, async data => {
@@ -17,7 +28,7 @@ export default class extends Channel {
 					if (data.body.userId && this.muting.has(data.body.userId)) return;
 
 					if (data.body.note && data.body.note.isHidden) {
-						const note = await Notes.pack(data.body.note.id, this.user, {
+						const note = await this.noteEntityService.pack(data.body.note.id, this.user, {
 							detail: true,
 						});
 						this.connection.cacheNote(note);
@@ -30,7 +41,7 @@ export default class extends Channel {
 
 					if (this.muting.has(data.body.userId)) return;
 					if (data.body.isHidden) {
-						const note = await Notes.pack(data.body.id, this.user, {
+						const note = await this.noteEntityService.pack(data.body.id, this.user, {
 							detail: true,
 						});
 						this.connection.cacheNote(note);
@@ -44,3 +55,22 @@ export default class extends Channel {
 		});
 	}
 }
+
+@Injectable()
+export class MainChannelService {
+	public readonly shouldShare = MainChannel.shouldShare;
+	public readonly requireCredential = MainChannel.requireCredential;
+
+	constructor(
+		private noteEntityService: NoteEntityService,
+	) {
+	}
+
+	public create(id: string, connection: Channel['connection']): MainChannel {
+		return new MainChannel(
+			this.noteEntityService,
+			id,
+			connection,
+		);
+	}
+}
diff --git a/packages/backend/src/server/api/stream/channels/messaging-index.ts b/packages/backend/src/server/api/stream/channels/messaging-index.ts
index b930785d20..bebc07f4ad 100644
--- a/packages/backend/src/server/api/stream/channels/messaging-index.ts
+++ b/packages/backend/src/server/api/stream/channels/messaging-index.ts
@@ -1,6 +1,7 @@
+import { Inject, Injectable } from '@nestjs/common';
 import Channel from '../channel.js';
 
-export default class extends Channel {
+class MessagingIndexChannel extends Channel {
 	public readonly chName = 'messagingIndex';
 	public static shouldShare = true;
 	public static requireCredential = true;
@@ -12,3 +13,20 @@ export default class extends Channel {
 		});
 	}
 }
+
+@Injectable()
+export class MessagingIndexChannelService {
+	public readonly shouldShare = MessagingIndexChannel.shouldShare;
+	public readonly requireCredential = MessagingIndexChannel.requireCredential;
+
+	constructor(
+	) {
+	}
+
+	public create(id: string, connection: Channel['connection']): MessagingIndexChannel {
+		return new MessagingIndexChannel(
+			id,
+			connection,
+		);
+	}
+}
diff --git a/packages/backend/src/server/api/stream/channels/messaging.ts b/packages/backend/src/server/api/stream/channels/messaging.ts
index 877d44c38e..5bf20c4101 100644
--- a/packages/backend/src/server/api/stream/channels/messaging.ts
+++ b/packages/backend/src/server/api/stream/channels/messaging.ts
@@ -1,11 +1,14 @@
-import { readUserMessagingMessage, readGroupMessagingMessage, deliverReadActivity } from '../../common/read-messaging-message.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserGroupJoiningsRepository, UsersRepository, MessagingMessagesRepository } from '@/models/index.js';
+import type { User, ILocalUser, IRemoteUser } from '@/models/entities/User.js';
+import type { UserGroup } from '@/models/entities/UserGroup.js';
+import { MessagingService } from '@/core/MessagingService.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DI } from '@/di-symbols.js';
 import Channel from '../channel.js';
-import { UserGroupJoinings, Users, MessagingMessages } from '@/models/index.js';
-import { User, ILocalUser, IRemoteUser } from '@/models/entities/user.js';
-import { UserGroup } from '@/models/entities/user-group.js';
-import { StreamMessages } from '../types.js';
+import type { StreamMessages } from '../types.js';
 
-export default class extends Channel {
+class MessagingChannel extends Channel {
 	public readonly chName = 'messaging';
 	public static shouldShare = false;
 	public static requireCredential = true;
@@ -17,7 +20,16 @@ export default class extends Channel {
 	private typers: Record<User['id'], Date> = {};
 	private emitTypersIntervalId: ReturnType<typeof setInterval>;
 
-	constructor(id: string, connection: Channel['connection']) {
+	constructor(
+		private usersRepository: UsersRepository,
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+		private messagingMessagesRepository: MessagingMessagesRepository,
+		private userEntityService: UserEntityService,
+		private messagingService: MessagingService,
+
+		id: string,
+		connection: Channel['connection'],
+	) {
 		super(id, connection);
 		this.onEvent = this.onEvent.bind(this);
 		this.onMessage = this.onMessage.bind(this);
@@ -26,12 +38,12 @@ export default class extends Channel {
 
 	public async init(params: any) {
 		this.otherpartyId = params.otherparty;
-		this.otherparty = this.otherpartyId ? await Users.findOneByOrFail({ id: this.otherpartyId }) : null;
+		this.otherparty = this.otherpartyId ? await this.usersRepository.findOneByOrFail({ id: this.otherpartyId }) : null;
 		this.groupId = params.group;
 
 		// Check joining
 		if (this.groupId) {
-			const joining = await UserGroupJoinings.findOneBy({
+			const joining = await this.userGroupJoiningsRepository.findOneBy({
 				userId: this.user!.id,
 				userGroupId: this.groupId,
 			});
@@ -68,16 +80,16 @@ export default class extends Channel {
 		switch (type) {
 			case 'read':
 				if (this.otherpartyId) {
-					readUserMessagingMessage(this.user!.id, this.otherpartyId, [body.id]);
+					this.messagingService.readUserMessagingMessage(this.user!.id, this.otherpartyId, [body.id]);
 
 					// リモートユーザーからのメッセージだったら既読配信
-					if (Users.isLocalUser(this.user!) && Users.isRemoteUser(this.otherparty!)) {
-						MessagingMessages.findOneBy({ id: body.id }).then(message => {
-							if (message) deliverReadActivity(this.user as ILocalUser, this.otherparty as IRemoteUser, message);
+					if (this.userEntityService.isLocalUser(this.user!) && this.userEntityService.isRemoteUser(this.otherparty!)) {
+						this.messagingMessagesRepository.findOneBy({ id: body.id }).then(message => {
+							if (message) this.messagingService.deliverReadActivity(this.user as ILocalUser, this.otherparty as IRemoteUser, message);
 						});
 					}
 				} else if (this.groupId) {
-					readGroupMessagingMessage(this.user!.id, this.groupId, [body.id]);
+					this.messagingService.readGroupMessagingMessage(this.user!.id, this.groupId, [body.id]);
 				}
 				break;
 		}
@@ -91,7 +103,7 @@ export default class extends Channel {
 			if (now.getTime() - date.getTime() > 5000) delete this.typers[userId];
 		}
 
-		const users = await Users.packMany(Object.keys(this.typers), null, { detail: false });
+		const users = await this.userEntityService.packMany(Object.keys(this.typers), null, { detail: false });
 
 		this.send({
 			type: 'typers',
@@ -105,3 +117,36 @@ export default class extends Channel {
 		clearInterval(this.emitTypersIntervalId);
 	}
 }
+
+@Injectable()
+export class MessagingChannelService {
+	public readonly shouldShare = MessagingChannel.shouldShare;
+	public readonly requireCredential = MessagingChannel.requireCredential;
+
+	constructor(
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userGroupJoiningsRepository)
+		private userGroupJoiningsRepository: UserGroupJoiningsRepository,
+
+		@Inject(DI.messagingMessagesRepository)
+		private messagingMessagesRepository: MessagingMessagesRepository,
+
+		private userEntityService: UserEntityService,
+		private messagingService: MessagingService,
+	) {
+	}
+
+	public create(id: string, connection: Channel['connection']): MessagingChannel {
+		return new MessagingChannel(
+			this.usersRepository,
+			this.userGroupJoiningsRepository,
+			this.messagingMessagesRepository,
+			this.userEntityService,
+			this.messagingService,
+			id,
+			connection,
+		);
+	}
+}
diff --git a/packages/backend/src/server/api/stream/channels/queue-stats.ts b/packages/backend/src/server/api/stream/channels/queue-stats.ts
index b67600474b..1802c6723b 100644
--- a/packages/backend/src/server/api/stream/channels/queue-stats.ts
+++ b/packages/backend/src/server/api/stream/channels/queue-stats.ts
@@ -1,9 +1,10 @@
 import Xev from 'xev';
+import { Inject, Injectable } from '@nestjs/common';
 import Channel from '../channel.js';
 
 const ev = new Xev();
 
-export default class extends Channel {
+class QueueStatsChannel extends Channel {
 	public readonly chName = 'queueStats';
 	public static shouldShare = true;
 	public static requireCredential = false;
@@ -40,3 +41,20 @@ export default class extends Channel {
 		ev.removeListener('queueStats', this.onStats);
 	}
 }
+
+@Injectable()
+export class QueueStatsChannelService {
+	public readonly shouldShare = QueueStatsChannel.shouldShare;
+	public readonly requireCredential = QueueStatsChannel.requireCredential;
+
+	constructor(
+	) {
+	}
+
+	public create(id: string, connection: Channel['connection']): QueueStatsChannel {
+		return new QueueStatsChannel(
+			id,
+			connection,
+		);
+	}
+}
diff --git a/packages/backend/src/server/api/stream/channels/server-stats.ts b/packages/backend/src/server/api/stream/channels/server-stats.ts
index db75a6fa38..e2b00de25f 100644
--- a/packages/backend/src/server/api/stream/channels/server-stats.ts
+++ b/packages/backend/src/server/api/stream/channels/server-stats.ts
@@ -1,9 +1,10 @@
 import Xev from 'xev';
+import { Inject, Injectable } from '@nestjs/common';
 import Channel from '../channel.js';
 
 const ev = new Xev();
 
-export default class extends Channel {
+class ServerStatsChannel extends Channel {
 	public readonly chName = 'serverStats';
 	public static shouldShare = true;
 	public static requireCredential = false;
@@ -40,3 +41,20 @@ export default class extends Channel {
 		ev.removeListener('serverStats', this.onStats);
 	}
 }
+
+@Injectable()
+export class ServerStatsChannelService {
+	public readonly shouldShare = ServerStatsChannel.shouldShare;
+	public readonly requireCredential = ServerStatsChannel.requireCredential;
+
+	constructor(
+	) {
+	}
+
+	public create(id: string, connection: Channel['connection']): ServerStatsChannel {
+		return new ServerStatsChannel(
+			id,
+			connection,
+		);
+	}
+}
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 97ad2983c5..a45c7d9468 100644
--- a/packages/backend/src/server/api/stream/channels/user-list.ts
+++ b/packages/backend/src/server/api/stream/channels/user-list.ts
@@ -1,10 +1,14 @@
-import Channel from '../channel.js';
-import { Notes, UserListJoinings, UserLists } from '@/models/index.js';
-import { User } from '@/models/entities/user.js';
+import { Inject, Injectable } from '@nestjs/common';
+import { UserListJoiningsRepository, UserListsRepository } from '@/models/index.js';
+import type { NotesRepository } from '@/models/index.js';
+import type { User } from '@/models/entities/User.js';
 import { isUserRelated } from '@/misc/is-user-related.js';
-import { Packed } from '@/misc/schema.js';
+import type { Packed } from '@/misc/schema.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { DI } from '@/di-symbols.js';
+import Channel from '../channel.js';
 
-export default class extends Channel {
+class UserListChannel extends Channel {
 	public readonly chName = 'userList';
 	public static shouldShare = false;
 	public static requireCredential = false;
@@ -12,7 +16,14 @@ export default class extends Channel {
 	public listUsers: User['id'][] = [];
 	private listUsersClock: NodeJS.Timer;
 
-	constructor(id: string, connection: Channel['connection']) {
+	constructor(
+		private userListsRepository: UserListsRepository,
+		private userListJoiningsRepository: UserListJoiningsRepository,
+		private noteEntityService: NoteEntityService,
+		
+		id: string,
+		connection: Channel['connection'],
+	) {
 		super(id, connection);
 		this.updateListUsers = this.updateListUsers.bind(this);
 		this.onNote = this.onNote.bind(this);
@@ -22,7 +33,7 @@ export default class extends Channel {
 		this.listId = params.listId as string;
 
 		// Check existence and owner
-		const list = await UserLists.findOneBy({
+		const list = await this.userListsRepository.findOneBy({
 			id: this.listId,
 			userId: this.user!.id,
 		});
@@ -38,7 +49,7 @@ export default class extends Channel {
 	}
 
 	private async updateListUsers() {
-		const users = await UserListJoinings.find({
+		const users = await this.userListJoiningsRepository.find({
 			where: {
 				userListId: this.listId,
 			},
@@ -52,7 +63,7 @@ export default class extends Channel {
 		if (!this.listUsers.includes(note.userId)) return;
 
 		if (['followers', 'specified'].includes(note.visibility)) {
-			note = await Notes.pack(note.id, this.user, {
+			note = await this.noteEntityService.pack(note.id, this.user, {
 				detail: true,
 			});
 
@@ -62,13 +73,13 @@ export default class extends Channel {
 		} else {
 			// リプライなら再pack
 			if (note.replyId != null) {
-				note.reply = await Notes.pack(note.replyId, this.user, {
+				note.reply = await this.noteEntityService.pack(note.replyId, this.user, {
 					detail: true,
 				});
 			}
 			// Renoteなら再pack
 			if (note.renoteId != null) {
-				note.renote = await Notes.pack(note.renoteId, this.user, {
+				note.renote = await this.noteEntityService.pack(note.renoteId, this.user, {
 					detail: true,
 				});
 			}
@@ -90,3 +101,30 @@ export default class extends Channel {
 		clearInterval(this.listUsersClock);
 	}
 }
+
+@Injectable()
+export class UserListChannelService {
+	public readonly shouldShare = UserListChannel.shouldShare;
+	public readonly requireCredential = UserListChannel.requireCredential;
+
+	constructor(
+		@Inject(DI.userListsRepository)
+		private userListsRepository: UserListsRepository,
+
+		@Inject(DI.userListJoiningsRepository)
+		private userListJoiningsRepository: UserListJoiningsRepository,
+
+		private noteEntityService: NoteEntityService,
+	) {
+	}
+
+	public create(id: string, connection: Channel['connection']): UserListChannel {
+		return new UserListChannel(
+			this.userListsRepository,
+			this.userListJoiningsRepository,
+			this.noteEntityService,
+			id,
+			connection,
+		);
+	}
+}
diff --git a/packages/backend/src/server/api/stream/index.ts b/packages/backend/src/server/api/stream/index.ts
index 2d23145f14..0c5066b736 100644
--- a/packages/backend/src/server/api/stream/index.ts
+++ b/packages/backend/src/server/api/stream/index.ts
@@ -1,18 +1,18 @@
-import { EventEmitter } from 'events';
-import * as websocket from 'websocket';
-import readNote from '@/services/note/read.js';
-import { User } from '@/models/entities/user.js';
-import { Channel as ChannelModel } from '@/models/entities/channel.js';
-import { Users, Followings, Mutings, UserProfiles, ChannelFollowings, Blockings } from '@/models/index.js';
-import { AccessToken } from '@/models/entities/access-token.js';
-import { UserProfile } from '@/models/entities/user-profile.js';
-import { publishChannelStream, publishGroupMessagingStream, publishMessagingStream } from '@/services/stream.js';
-import { UserGroup } from '@/models/entities/user-group.js';
-import { Packed } from '@/misc/schema.js';
-import { readNotification } from '../common/read-notification.js';
-import channels from './channels/index.js';
-import Channel from './channel.js';
-import { StreamEventEmitter, StreamMessages } from './types.js';
+import type { User } from '@/models/entities/User.js';
+import type { Channel as ChannelModel } from '@/models/entities/Channel.js';
+import type { FollowingsRepository, MutingsRepository, UserProfilesRepository, ChannelFollowingsRepository, BlockingsRepository } from '@/models/index.js';
+import type { AccessToken } from '@/models/entities/AccessToken.js';
+import type { UserProfile } from '@/models/entities/UserProfile.js';
+import type { UserGroup } from '@/models/entities/UserGroup.js';
+import type { Packed } from '@/misc/schema.js';
+import type { GlobalEventService } from '@/core/GlobalEventService.js';
+import type { NoteReadService } from '@/core/NoteReadService.js';
+import type { NotificationService } from '@/core/NotificationService.js';
+import type { ChannelsService } from './ChannelsService.js';
+import type * as websocket from 'websocket';
+import type { EventEmitter } from 'events';
+import type Channel from './channel.js';
+import type { StreamEventEmitter, StreamMessages } from './types.js';
 
 /**
  * Main stream connection
@@ -32,6 +32,16 @@ export default class Connection {
 	private cachedNotes: Packed<'Note'>[] = [];
 
 	constructor(
+		private followingsRepository: FollowingsRepository,
+		private mutingsRepository: MutingsRepository,
+		private blockingsRepository: BlockingsRepository,
+		private channelFollowingsRepository: ChannelFollowingsRepository,
+		private userProfilesRepository: UserProfilesRepository,
+		private channelsService: ChannelsService,
+		private globalEventService: GlobalEventService,
+		private noteReadService: NoteReadService,
+		private notificationService: NotificationService,
+
 		wsConnection: websocket.connection,
 		subscriber: EventEmitter,
 		user: User | null | undefined,
@@ -173,7 +183,7 @@ export default class Connection {
 		if (note == null) return;
 
 		if (this.user && (note.userId !== this.user.id)) {
-			readNote(this.user.id, [note], {
+			this.noteReadService.read(this.user.id, [note], {
 				following: this.following,
 				followingChannels: this.followingChannels,
 			});
@@ -182,7 +192,7 @@ export default class Connection {
 
 	private onReadNotification(payload: any) {
 		if (!payload.id) return;
-		readNotification(this.user!.id, [payload.id]);
+		this.notificationService.readNotification(this.user!.id, [payload.id]);
 	}
 
 	/**
@@ -253,16 +263,18 @@ export default class Connection {
 	 * チャンネルに接続
 	 */
 	public connectChannel(id: string, params: any, channel: string, pong = false) {
-		if ((channels as any)[channel].requireCredential && this.user == null) {
+		const channelService = this.channelsService.getChannelService(channel);
+
+		if (channelService.requireCredential && this.user == null) {
 			return;
 		}
 
 		// 共有可能チャンネルに接続しようとしていて、かつそのチャンネルに既に接続していたら無意味なので無視
-		if ((channels as any)[channel].shouldShare && this.channels.some(c => c.chName === channel)) {
+		if (channelService.shouldShare && this.channels.some(c => c.chName === channel)) {
 			return;
 		}
 
-		const ch: Channel = new (channels as any)[channel](id, this);
+		const ch: Channel = channelService.create(id, this);
 		this.channels.push(ch);
 		ch.init(params);
 
@@ -299,22 +311,22 @@ export default class Connection {
 
 	private typingOnChannel(channel: ChannelModel['id']) {
 		if (this.user) {
-			publishChannelStream(channel, 'typing', this.user.id);
+			this.globalEventService.publishChannelStream(channel, 'typing', this.user.id);
 		}
 	}
 
 	private typingOnMessaging(param: { partner?: User['id']; group?: UserGroup['id']; }) {
 		if (this.user) {
 			if (param.partner) {
-				publishMessagingStream(param.partner, this.user.id, 'typing', this.user.id);
+				this.globalEventService.publishMessagingStream(param.partner, this.user.id, 'typing', this.user.id);
 			} else if (param.group) {
-				publishGroupMessagingStream(param.group, 'typing', this.user.id);
+				this.globalEventService.publishGroupMessagingStream(param.group, 'typing', this.user.id);
 			}
 		}
 	}
 
 	private async updateFollowing() {
-		const followings = await Followings.find({
+		const followings = await this.followingsRepository.find({
 			where: {
 				followerId: this.user!.id,
 			},
@@ -325,7 +337,7 @@ export default class Connection {
 	}
 
 	private async updateMuting() {
-		const mutings = await Mutings.find({
+		const mutings = await this.mutingsRepository.find({
 			where: {
 				muterId: this.user!.id,
 			},
@@ -336,7 +348,7 @@ export default class Connection {
 	}
 
 	private async updateBlocking() { // ここでいうBlockingは被Blockingの意
-		const blockings = await Blockings.find({
+		const blockings = await this.blockingsRepository.find({
 			where: {
 				blockeeId: this.user!.id,
 			},
@@ -347,7 +359,7 @@ export default class Connection {
 	}
 
 	private async updateFollowingChannels() {
-		const followings = await ChannelFollowings.find({
+		const followings = await this.channelFollowingsRepository.find({
 			where: {
 				followerId: this.user!.id,
 			},
@@ -358,7 +370,7 @@ export default class Connection {
 	}
 
 	private async updateUserProfile() {
-		this.userProfile = await UserProfiles.findOneBy({
+		this.userProfile = await this.userProfilesRepository.findOneBy({
 			userId: this.user!.id,
 		});
 	}
diff --git a/packages/backend/src/server/api/stream/types.ts b/packages/backend/src/server/api/stream/types.ts
index 3b0a75d793..000f9a25dd 100644
--- a/packages/backend/src/server/api/stream/types.ts
+++ b/packages/backend/src/server/api/stream/types.ts
@@ -1,21 +1,20 @@
-import { EventEmitter } from 'events';
-import Emitter from 'strict-event-emitter-types';
-import { Channel } from '@/models/entities/channel.js';
-import { User } from '@/models/entities/user.js';
-import { UserProfile } from '@/models/entities/user-profile.js';
-import { Note } from '@/models/entities/note.js';
-import { Antenna } from '@/models/entities/antenna.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { DriveFolder } from '@/models/entities/drive-folder.js';
-import { Emoji } from '@/models/entities/emoji.js';
-import { UserList } from '@/models/entities/user-list.js';
-import { MessagingMessage } from '@/models/entities/messaging-message.js';
-import { UserGroup } from '@/models/entities/user-group.js';
-import { AbuseUserReport } from '@/models/entities/abuse-user-report.js';
-import { Signin } from '@/models/entities/signin.js';
-import { Page } from '@/models/entities/page.js';
-import { Packed } from '@/misc/schema.js';
-import { Webhook } from '@/models/entities/webhook';
+import type { Channel } from '@/models/entities/Channel.js';
+import type { User } from '@/models/entities/User.js';
+import type { UserProfile } from '@/models/entities/UserProfile.js';
+import type { Note } from '@/models/entities/Note.js';
+import type { Antenna } from '@/models/entities/Antenna.js';
+import type { DriveFile } from '@/models/entities/DriveFile.js';
+import type { DriveFolder } from '@/models/entities/DriveFolder.js';
+import type { UserList } from '@/models/entities/UserList.js';
+import type { MessagingMessage } from '@/models/entities/MessagingMessage.js';
+import type { UserGroup } from '@/models/entities/UserGroup.js';
+import type { AbuseUserReport } from '@/models/entities/AbuseUserReport.js';
+import type { Signin } from '@/models/entities/Signin.js';
+import type { Page } from '@/models/entities/Page.js';
+import type { Packed } from '@/misc/schema.js';
+import type { Webhook } from '@/models/entities/Webhook.js';
+import type Emitter from 'strict-event-emitter-types';
+import type { EventEmitter } from 'events';
 
 //#region Stream type-body definitions
 export interface InternalStreamTypes {
diff --git a/packages/backend/src/server/api/streaming.ts b/packages/backend/src/server/api/streaming.ts
deleted file mode 100644
index f8e42d27fe..0000000000
--- a/packages/backend/src/server/api/streaming.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import * as http from 'node:http';
-import * as websocket from 'websocket';
-
-import MainStreamConnection from './stream/index.js';
-import { ParsedUrlQuery } from 'querystring';
-import authenticate from './authenticate.js';
-import { EventEmitter } from 'events';
-import { subsdcriber as redisClient } from '../../db/redis.js';
-import { Users } from '@/models/index.js';
-
-export const initializeStreamingServer = (server: http.Server) => {
-	// Init websocket server
-	const ws = new websocket.server({
-		httpServer: server,
-	});
-
-	ws.on('request', async (request) => {
-		const q = request.resourceURL.query as ParsedUrlQuery;
-
-		// TODO: トークンが間違ってるなどしてauthenticateに失敗したら
-		// コネクション切断するなりエラーメッセージ返すなりする
-		// (現状はエラーがキャッチされておらずサーバーのログに流れて邪魔なので)
-		const [user, app] = await authenticate(q.i as string);
-
-		if (user?.isSuspended) {
-			request.reject(400);
-			return;
-		}
-
-		const connection = request.accept();
-
-		const ev = new EventEmitter();
-
-		async function onRedisMessage(_: string, data: string) {
-			const parsed = JSON.parse(data);
-			ev.emit(parsed.channel, parsed.message);
-		}
-
-		redisClient.on('message', onRedisMessage);
-
-		const main = new MainStreamConnection(connection, ev, user, app);
-
-		const intervalId = user ? setInterval(() => {
-			Users.update(user.id, {
-				lastActiveDate: new Date(),
-			});
-		}, 1000 * 60 * 5) : null;
-		if (user) {
-			Users.update(user.id, {
-				lastActiveDate: new Date(),
-			});
-		}
-
-		connection.once('close', () => {
-			ev.removeAllListeners();
-			main.dispose();
-			redisClient.off('message', onRedisMessage);
-			if (intervalId) clearInterval(intervalId);
-		});
-
-		connection.on('message', async (data) => {
-			if (data.type === 'utf8' && data.utf8Data === 'ping') {
-				connection.send('pong');
-			}
-		});
-	});
-};
diff --git a/packages/backend/src/server/assets/bad-egg.png b/packages/backend/src/server/assets/bad-egg.png
new file mode 100644
index 0000000000..e96ba0dcc1
Binary files /dev/null and b/packages/backend/src/server/assets/bad-egg.png differ
diff --git a/packages/backend/src/server/assets/cache-expired.png b/packages/backend/src/server/assets/cache-expired.png
new file mode 100644
index 0000000000..5d988c502b
Binary files /dev/null and b/packages/backend/src/server/assets/cache-expired.png differ
diff --git a/packages/backend/src/server/assets/dummy.png b/packages/backend/src/server/assets/dummy.png
new file mode 100644
index 0000000000..39332b0c1b
Binary files /dev/null and b/packages/backend/src/server/assets/dummy.png differ
diff --git a/packages/backend/src/server/assets/not-an-image.png b/packages/backend/src/server/assets/not-an-image.png
new file mode 100644
index 0000000000..39e4aa0892
Binary files /dev/null and b/packages/backend/src/server/assets/not-an-image.png differ
diff --git a/packages/backend/src/server/assets/thumbnail-not-available.png b/packages/backend/src/server/assets/thumbnail-not-available.png
new file mode 100644
index 0000000000..07cad9919c
Binary files /dev/null and b/packages/backend/src/server/assets/thumbnail-not-available.png differ
diff --git a/packages/backend/src/server/assets/tombstone.png b/packages/backend/src/server/assets/tombstone.png
new file mode 100644
index 0000000000..83159d6b3c
Binary files /dev/null and b/packages/backend/src/server/assets/tombstone.png differ
diff --git a/packages/backend/src/server/file/assets/bad-egg.png b/packages/backend/src/server/file/assets/bad-egg.png
deleted file mode 100644
index e96ba0dcc1..0000000000
Binary files a/packages/backend/src/server/file/assets/bad-egg.png and /dev/null differ
diff --git a/packages/backend/src/server/file/assets/cache-expired.png b/packages/backend/src/server/file/assets/cache-expired.png
deleted file mode 100644
index 5d988c502b..0000000000
Binary files a/packages/backend/src/server/file/assets/cache-expired.png and /dev/null differ
diff --git a/packages/backend/src/server/file/assets/dummy.png b/packages/backend/src/server/file/assets/dummy.png
deleted file mode 100644
index 39332b0c1b..0000000000
Binary files a/packages/backend/src/server/file/assets/dummy.png and /dev/null differ
diff --git a/packages/backend/src/server/file/assets/not-an-image.png b/packages/backend/src/server/file/assets/not-an-image.png
deleted file mode 100644
index 39e4aa0892..0000000000
Binary files a/packages/backend/src/server/file/assets/not-an-image.png and /dev/null differ
diff --git a/packages/backend/src/server/file/assets/thumbnail-not-available.png b/packages/backend/src/server/file/assets/thumbnail-not-available.png
deleted file mode 100644
index 07cad9919c..0000000000
Binary files a/packages/backend/src/server/file/assets/thumbnail-not-available.png and /dev/null differ
diff --git a/packages/backend/src/server/file/assets/tombstone.png b/packages/backend/src/server/file/assets/tombstone.png
deleted file mode 100644
index 83159d6b3c..0000000000
Binary files a/packages/backend/src/server/file/assets/tombstone.png and /dev/null differ
diff --git a/packages/backend/src/server/file/index.ts b/packages/backend/src/server/file/index.ts
deleted file mode 100644
index 07a493700a..0000000000
--- a/packages/backend/src/server/file/index.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * File Server
- */
-
-import * as fs from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { dirname } from 'node:path';
-import Koa from 'koa';
-import cors from '@koa/cors';
-import Router from '@koa/router';
-import sendDriveFile from './send-drive-file.js';
-
-const _filename = fileURLToPath(import.meta.url);
-const _dirname = dirname(_filename);
-
-// Init app
-const app = new Koa();
-app.use(cors());
-app.use(async (ctx, next) => {
-	ctx.set('Content-Security-Policy', `default-src 'none'; img-src 'self'; media-src 'self'; style-src 'unsafe-inline'`);
-	await next();
-});
-
-// Init router
-const router = new Router();
-
-router.get('/app-default.jpg', ctx => {
-	const file = fs.createReadStream(`${_dirname}/assets/dummy.png`);
-	ctx.body = file;
-	ctx.set('Content-Type', 'image/jpeg');
-	ctx.set('Cache-Control', 'max-age=31536000, immutable');
-});
-
-router.get('/:key', sendDriveFile);
-router.get('/:key/(.*)', sendDriveFile);
-
-// Register router
-app.use(router.routes());
-
-export default app;
diff --git a/packages/backend/src/server/file/send-drive-file.ts b/packages/backend/src/server/file/send-drive-file.ts
deleted file mode 100644
index c34e043145..0000000000
--- a/packages/backend/src/server/file/send-drive-file.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import * as fs from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { dirname } from 'node:path';
-import Koa from 'koa';
-import send from 'koa-send';
-import rename from 'rename';
-import { serverLogger } from '../index.js';
-import { contentDisposition } from '@/misc/content-disposition.js';
-import { DriveFiles } from '@/models/index.js';
-import { InternalStorage } from '@/services/drive/internal-storage.js';
-import { createTemp } from '@/misc/create-temp.js';
-import { downloadUrl } from '@/misc/download-url.js';
-import { detectType } from '@/misc/get-file-info.js';
-import { convertToWebp, convertToJpeg, convertToPng } from '@/services/drive/image-processor.js';
-import { GenerateVideoThumbnail } from '@/services/drive/generate-video-thumbnail.js';
-import { StatusError } from '@/misc/fetch.js';
-import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
-
-const _filename = fileURLToPath(import.meta.url);
-const _dirname = dirname(_filename);
-
-const assets = `${_dirname}/../../server/file/assets/`;
-
-const commonReadableHandlerGenerator = (ctx: Koa.Context) => (e: Error): void => {
-	serverLogger.error(e);
-	ctx.status = 500;
-	ctx.set('Cache-Control', 'max-age=300');
-};
-
-// eslint-disable-next-line import/no-default-export
-export default async function(ctx: Koa.Context) {
-	const key = ctx.params.key;
-
-	// Fetch drive file
-	const file = await DriveFiles.createQueryBuilder('file')
-		.where('file.accessKey = :accessKey', { accessKey: key })
-		.orWhere('file.thumbnailAccessKey = :thumbnailAccessKey', { thumbnailAccessKey: key })
-		.orWhere('file.webpublicAccessKey = :webpublicAccessKey', { webpublicAccessKey: key })
-		.getOne();
-
-	if (file == null) {
-		ctx.status = 404;
-		ctx.set('Cache-Control', 'max-age=86400');
-		await send(ctx as any, '/dummy.png', { root: assets });
-		return;
-	}
-
-	const isThumbnail = file.thumbnailAccessKey === key;
-	const isWebpublic = file.webpublicAccessKey === key;
-
-	if (!file.storedInternal) {
-		if (file.isLink && file.uri) {	// 期限切れリモートファイル
-			const [path, cleanup] = await createTemp();
-
-			try {
-				await downloadUrl(file.uri, path);
-
-				const { mime, ext } = await detectType(path);
-
-				const convertFile = async () => {
-					if (isThumbnail) {
-						if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml'].includes(mime)) {
-							return await convertToWebp(path, 498, 280);
-						} else if (mime.startsWith('video/')) {
-							return await GenerateVideoThumbnail(path);
-						}
-					}
-
-					if (isWebpublic) {
-						if (['image/svg+xml'].includes(mime)) {
-							return await convertToPng(path, 2048, 2048);
-						}
-					}
-
-					return {
-						data: fs.readFileSync(path),
-						ext,
-						type: mime,
-					};
-				};
-
-				const image = await convertFile();
-				ctx.body = image.data;
-				ctx.set('Content-Type', FILE_TYPE_BROWSERSAFE.includes(image.type) ? image.type : 'application/octet-stream');
-				ctx.set('Cache-Control', 'max-age=31536000, immutable');
-			} catch (e) {
-				serverLogger.error(`${e}`);
-
-				if (e instanceof StatusError && e.isClientError) {
-					ctx.status = e.statusCode;
-					ctx.set('Cache-Control', 'max-age=86400');
-				} else {
-					ctx.status = 500;
-					ctx.set('Cache-Control', 'max-age=300');
-				}
-			} finally {
-				cleanup();
-			}
-			return;
-		}
-
-		ctx.status = 204;
-		ctx.set('Cache-Control', 'max-age=86400');
-		return;
-	}
-
-	if (isThumbnail || isWebpublic) {
-		const { mime, ext } = await detectType(InternalStorage.resolvePath(key));
-		const filename = rename(file.name, {
-			suffix: isThumbnail ? '-thumb' : '-web',
-			extname: ext ? `.${ext}` : undefined,
-		}).toString();
-
-		ctx.body = InternalStorage.read(key);
-		ctx.set('Content-Type', FILE_TYPE_BROWSERSAFE.includes(mime) ? mime : 'application/octet-stream');
-		ctx.set('Cache-Control', 'max-age=31536000, immutable');
-		ctx.set('Content-Disposition', contentDisposition('inline', filename));
-	} else {
-		const readable = InternalStorage.read(file.accessKey!);
-		readable.on('error', commonReadableHandlerGenerator(ctx));
-		ctx.body = readable;
-		ctx.set('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.type) ? file.type : 'application/octet-stream');
-		ctx.set('Cache-Control', 'max-age=31536000, immutable');
-		ctx.set('Content-Disposition', contentDisposition('inline', file.name));
-	}
-}
diff --git a/packages/backend/src/server/index.ts b/packages/backend/src/server/index.ts
deleted file mode 100644
index f31de2b7f4..0000000000
--- a/packages/backend/src/server/index.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * Core Server
- */
-
-import cluster from 'node:cluster';
-import * as fs from 'node:fs';
-import * as http from 'node:http';
-import Koa from 'koa';
-import Router from '@koa/router';
-import mount from 'koa-mount';
-import koaLogger from 'koa-logger';
-import * as slow from 'koa-slow';
-
-import { IsNull } from 'typeorm';
-import config from '@/config/index.js';
-import Logger from '@/services/logger.js';
-import { UserProfiles, Users } from '@/models/index.js';
-import { genIdenticon } from '@/misc/gen-identicon.js';
-import { createTemp } from '@/misc/create-temp.js';
-import { publishMainStream } from '@/services/stream.js';
-import * as Acct from '@/misc/acct.js';
-import { envOption } from '../env.js';
-import activityPub from './activitypub.js';
-import nodeinfo from './nodeinfo.js';
-import wellKnown from './well-known.js';
-import apiServer from './api/index.js';
-import fileServer from './file/index.js';
-import proxyServer from './proxy/index.js';
-import webServer from './web/index.js';
-import { initializeStreamingServer } from './api/streaming.js';
-
-export const serverLogger = new Logger('server', 'gray', false);
-
-// Init app
-const app = new Koa();
-app.proxy = true;
-
-if (!['production', 'test'].includes(process.env.NODE_ENV || '')) {
-	// Logger
-	app.use(koaLogger(str => {
-		serverLogger.info(str);
-	}));
-
-	// Delay
-	if (envOption.slow) {
-		app.use(slow({
-			delay: 3000,
-		}));
-	}
-}
-
-// HSTS
-// 6months (15552000sec)
-if (config.url.startsWith('https') && !config.disableHsts) {
-	app.use(async (ctx, next) => {
-		ctx.set('strict-transport-security', 'max-age=15552000; preload');
-		await next();
-	});
-}
-
-app.use(mount('/api', apiServer));
-app.use(mount('/files', fileServer));
-app.use(mount('/proxy', proxyServer));
-
-// Init router
-const router = new Router();
-
-// Routing
-router.use(activityPub.routes());
-router.use(nodeinfo.routes());
-router.use(wellKnown.routes());
-
-router.get('/avatar/@:acct', async ctx => {
-	const { username, host } = Acct.parse(ctx.params.acct);
-	const user = await Users.findOne({
-		where: {
-			usernameLower: username.toLowerCase(),
-			host: (host == null) || (host === config.host) ? IsNull() : host,
-			isSuspended: false,
-		},
-		relations: ['avatar'],
-	});
-
-	if (user) {
-		ctx.redirect(Users.getAvatarUrlSync(user));
-	} else {
-		ctx.redirect('/static-assets/user-unknown.png');
-	}
-});
-
-router.get('/identicon/:x', async ctx => {
-	const [temp, cleanup] = await createTemp();
-	await genIdenticon(ctx.params.x, fs.createWriteStream(temp));
-	ctx.set('Content-Type', 'image/png');
-	ctx.body = fs.createReadStream(temp).on('close', () => cleanup());
-});
-
-router.get('/verify-email/:code', async ctx => {
-	const profile = await UserProfiles.findOneBy({
-		emailVerifyCode: ctx.params.code,
-	});
-
-	if (profile != null) {
-		ctx.body = 'Verify succeeded!';
-		ctx.status = 200;
-
-		await UserProfiles.update({ userId: profile.userId }, {
-			emailVerified: true,
-			emailVerifyCode: null,
-		});
-
-		publishMainStream(profile.userId, 'meUpdated', await Users.pack(profile.userId, { id: profile.userId }, {
-			detail: true,
-			includeSecrets: true,
-		}));
-	} else {
-		ctx.status = 404;
-	}
-});
-
-// Register router
-app.use(router.routes());
-
-app.use(mount(webServer));
-
-function createServer() {
-	return http.createServer(app.callback());
-}
-
-// For testing
-export const startServer = () => {
-	const server = createServer();
-
-	initializeStreamingServer(server);
-
-	server.listen(config.port);
-
-	return server;
-};
-
-export default () => new Promise(resolve => {
-	const server = createServer();
-
-	initializeStreamingServer(server);
-
-	server.on('error', e => {
-		switch ((e as any).code) {
-			case 'EACCES':
-				serverLogger.error(`You do not have permission to listen on port ${config.port}.`);
-				break;
-			case 'EADDRINUSE':
-				serverLogger.error(`Port ${config.port} is already in use by another process.`);
-				break;
-			default:
-				serverLogger.error(e);
-				break;
-		}
-
-		if (cluster.isWorker) {
-			process.send!('listenFailed');
-		} else {
-			// disableClustering
-			process.exit(1);
-		}
-	});
-
-	server.listen(config.port, resolve);
-});
diff --git a/packages/backend/src/server/nodeinfo.ts b/packages/backend/src/server/nodeinfo.ts
deleted file mode 100644
index f139d203d2..0000000000
--- a/packages/backend/src/server/nodeinfo.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import Router from '@koa/router';
-import config from '@/config/index.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Users, Notes } from '@/models/index.js';
-import { IsNull, MoreThan } from 'typeorm';
-import { MAX_NOTE_TEXT_LENGTH } from '@/const.js';
-import { Cache } from '@/misc/cache.js';
-
-const router = new Router();
-
-const nodeinfo2_1path = '/nodeinfo/2.1';
-const nodeinfo2_0path = '/nodeinfo/2.0';
-
-export const links = [/* (awaiting release) {
-	rel: 'http://nodeinfo.diaspora.software/ns/schema/2.1',
-	href: config.url + nodeinfo2_1path
-}, */{
-	rel: 'http://nodeinfo.diaspora.software/ns/schema/2.0',
-	href: config.url + nodeinfo2_0path,
-}];
-
-const nodeinfo2 = async () => {
-	const now = Date.now();
-	const [
-		meta,
-		total,
-		activeHalfyear,
-		activeMonth,
-		localPosts,
-	] = await Promise.all([
-		fetchMeta(true),
-		Users.count({ where: { host: IsNull() } }),
-		Users.count({ where: { host: IsNull(), lastActiveDate: MoreThan(new Date(now - 15552000000)) } }),
-		Users.count({ where: { host: IsNull(), lastActiveDate: MoreThan(new Date(now - 2592000000)) } }),
-		Notes.count({ where: { userHost: IsNull() } }),
-	]);
-
-	const proxyAccount = meta.proxyAccountId ? await Users.pack(meta.proxyAccountId).catch(() => null) : null;
-
-	return {
-		software: {
-			name: 'misskey',
-			version: config.version,
-			repository: meta.repositoryUrl,
-		},
-		protocols: ['activitypub'],
-		services: {
-			inbound: [] as string[],
-			outbound: ['atom1.0', 'rss2.0'],
-		},
-		openRegistrations: !meta.disableRegistration,
-		usage: {
-			users: { total, activeHalfyear, activeMonth },
-			localPosts,
-			localComments: 0,
-		},
-		metadata: {
-			nodeName: meta.name,
-			nodeDescription: meta.description,
-			maintainer: {
-				name: meta.maintainerName,
-				email: meta.maintainerEmail,
-			},
-			langs: meta.langs,
-			tosUrl: meta.ToSUrl,
-			repositoryUrl: meta.repositoryUrl,
-			feedbackUrl: meta.feedbackUrl,
-			disableRegistration: meta.disableRegistration,
-			disableLocalTimeline: meta.disableLocalTimeline,
-			disableGlobalTimeline: meta.disableGlobalTimeline,
-			emailRequiredForSignup: meta.emailRequiredForSignup,
-			enableHcaptcha: meta.enableHcaptcha,
-			enableRecaptcha: meta.enableRecaptcha,
-			maxNoteTextLength: MAX_NOTE_TEXT_LENGTH,
-			enableTwitterIntegration: meta.enableTwitterIntegration,
-			enableGithubIntegration: meta.enableGithubIntegration,
-			enableDiscordIntegration: meta.enableDiscordIntegration,
-			enableEmail: meta.enableEmail,
-			enableServiceWorker: meta.enableServiceWorker,
-			proxyAccountName: proxyAccount ? proxyAccount.username : null,
-			themeColor: meta.themeColor || '#86b300',
-		},
-	};
-};
-
-const cache = new Cache<Awaited<ReturnType<typeof nodeinfo2>>>(1000 * 60 * 10);
-
-router.get(nodeinfo2_1path, async ctx => {
-	const base = await cache.fetch(null, () => nodeinfo2());
-
-	ctx.body = { version: '2.1', ...base };
-	ctx.set('Cache-Control', 'public, max-age=600');
-});
-
-router.get(nodeinfo2_0path, async ctx => {
-	const base = await cache.fetch(null, () => nodeinfo2());
-
-	delete base.software.repository;
-
-	ctx.body = { version: '2.0', ...base };
-	ctx.set('Cache-Control', 'public, max-age=600');
-});
-
-export default router;
diff --git a/packages/backend/src/server/proxy/index.ts b/packages/backend/src/server/proxy/index.ts
deleted file mode 100644
index 506ba10ef1..0000000000
--- a/packages/backend/src/server/proxy/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Media Proxy
- */
-
-import Koa from 'koa';
-import cors from '@koa/cors';
-import Router from '@koa/router';
-import { proxyMedia } from './proxy-media.js';
-
-// Init app
-const app = new Koa();
-app.use(cors());
-app.use(async (ctx, next) => {
-	ctx.set('Content-Security-Policy', `default-src 'none'; img-src 'self'; media-src 'self'; style-src 'unsafe-inline'`);
-	await next();
-});
-
-// Init router
-const router = new Router();
-
-router.get('/:url*', proxyMedia);
-
-// Register router
-app.use(router.routes());
-
-export default app;
diff --git a/packages/backend/src/server/proxy/proxy-media.ts b/packages/backend/src/server/proxy/proxy-media.ts
deleted file mode 100644
index ca036e8fdf..0000000000
--- a/packages/backend/src/server/proxy/proxy-media.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import * as fs from 'node:fs';
-import Koa from 'koa';
-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;
-
-	if (typeof url !== 'string') {
-		ctx.status = 400;
-		return;
-	}
-
-	// Create temp file
-	const [path, cleanup] = await createTemp();
-
-	try {
-		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 && isConvertibleImage) {
-			image = await convertToWebp(path, 498, 280);
-		} else if ('preview' in ctx.query && isConvertibleImage) {
-			image = await convertToWebp(path, 200, 200);
-		} 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');
-		} else {
-			image = {
-				data: fs.readFileSync(path),
-				ext,
-				type: mime,
-			};
-		}
-
-		ctx.set('Content-Type', image.type);
-		ctx.set('Cache-Control', 'max-age=31536000, immutable');
-		ctx.body = image.data;
-	} catch (e) {
-		serverLogger.error(`${e}`);
-
-		if (e instanceof StatusError && (e.statusCode === 302 || e.isClientError)) {
-			ctx.status = e.statusCode;
-		} else {
-			ctx.status = 500;
-		}
-	} finally {
-		cleanup();
-	}
-}
diff --git a/packages/backend/src/server/web/ClientServerService.ts b/packages/backend/src/server/web/ClientServerService.ts
new file mode 100644
index 0000000000..67a7efaa25
--- /dev/null
+++ b/packages/backend/src/server/web/ClientServerService.ts
@@ -0,0 +1,594 @@
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { PathOrFileDescriptor, readFileSync } from 'node:fs';
+import { Inject, Injectable } from '@nestjs/common';
+import ms from 'ms';
+import Koa from 'koa';
+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';
+import { In, IsNull } from 'typeorm';
+import { Config } from '@/config.js';
+import { getNoteSummary } from '@/misc/get-note-summary.js';
+import { DI } from '@/di-symbols.js';
+import * as Acct from '@/misc/acct.js';
+import { MetaService } from '@/core/MetaService.js';
+import { DbQueue, DeliverQueue, EndedPollNotificationQueue, InboxQueue, ObjectStorageQueue, SystemQueue, WebhookDeliverQueue } from '@/core/queue/QueueModule.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { PageEntityService } from '@/core/entities/PageEntityService.js';
+import { GalleryPostEntityService } from '@/core/entities/GalleryPostEntityService.js';
+import { ClipEntityService } from '@/core/entities/ClipEntityService.js';
+import { ChannelEntityService } from '@/core/entities/ChannelEntityService.js';
+import manifest from './manifest.json' assert { type: 'json' };
+import { FeedService } from './FeedService.js';
+import { UrlPreviewService } from './UrlPreviewService.js';
+
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = dirname(_filename);
+
+const staticAssets = `${_dirname}/../../../assets/`;
+const clientAssets = `${_dirname}/../../../../client/assets/`;
+const assets = `${_dirname}/../../../../../built/_client_dist_/`;
+const swAssets = `${_dirname}/../../../../../built/_sw_dist_/`;
+
+@Injectable()
+export class ClientServerService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.galleryPostsRepository)
+		private galleryPostsRepository: GalleryPostsRepository,
+
+		@Inject(DI.channelsRepository)
+		private channelsRepository: ChannelsRepository,
+
+		@Inject(DI.clipsRepository)
+		private clipsRepository: ClipsRepository,
+
+		@Inject(DI.pagesRepository)
+		private pagesRepository: PagesRepository,
+
+		private userEntityService: UserEntityService,
+		private noteEntityService: NoteEntityService,
+		private pageEntityService: PageEntityService,
+		private galleryPostEntityService: GalleryPostEntityService,
+		private clipEntityService: ClipEntityService,
+		private channelEntityService: ChannelEntityService,
+		private metaService: MetaService,
+		private urlPreviewService: UrlPreviewService,
+		private feedService: FeedService,
+
+		@Inject('queue:system') public systemQueue: SystemQueue,
+		@Inject('queue:endedPollNotification') public endedPollNotificationQueue: EndedPollNotificationQueue,
+		@Inject('queue:deliver') public deliverQueue: DeliverQueue,
+		@Inject('queue:inbox') public inboxQueue: InboxQueue,
+		@Inject('queue:db') public dbQueue: DbQueue,
+		@Inject('queue:objectStorage') public objectStorageQueue: ObjectStorageQueue,
+		@Inject('queue:webhookDeliver') public webhookDeliverQueue: WebhookDeliverQueue,
+	) {
+	}
+
+	async #manifestHandler(ctx: Koa.Context) {
+		// TODO
+		//const res = structuredClone(manifest);
+		const res = JSON.parse(JSON.stringify(manifest));
+
+		const instance = await this.metaService.fetch(true);
+
+		res.short_name = instance.name ?? 'Misskey';
+		res.name = instance.name ?? 'Misskey';
+		if (instance.themeColor) res.theme_color = instance.themeColor;
+
+		ctx.set('Cache-Control', 'max-age=300');
+		ctx.body = res;
+	}
+
+	public createApp() {
+		const app = new Koa();
+
+		//#region Bull Dashboard
+		const bullBoardPath = '/queue';
+
+		// Authenticate
+		app.use(async (ctx, next) => {
+			if (ctx.path === bullBoardPath || ctx.path.startsWith(bullBoardPath + '/')) {
+				const token = ctx.cookies.get('token');
+				if (token == null) {
+					ctx.status = 401;
+					return;
+				}
+				const user = await this.usersRepository.findOneBy({ token });
+				if (user == null || !(user.isAdmin || user.isModerator)) {
+					ctx.status = 403;
+					return;
+				}
+			}
+			await next();
+		});
+
+		const serverAdapter = new KoaAdapter();
+
+		createBullBoard({
+			queues: [
+				this.systemQueue,
+				this.endedPollNotificationQueue,
+				this.deliverQueue,
+				this.inboxQueue,
+				this.dbQueue,
+				this.objectStorageQueue,
+				this.webhookDeliverQueue,
+			].map(q => new BullAdapter(q)),
+			serverAdapter,
+		});
+
+		serverAdapter.setBasePath(bullBoardPath);
+		app.use(serverAdapter.registerPlugin());
+		//#endregion
+
+		// Init renderer
+		app.use(views(_dirname + '/views', {
+			extension: 'pug',
+			options: {
+				version: this.config.version,
+				getClientEntry: () => process.env.NODE_ENV === 'production' ?
+					this.config.clientEntry :
+					JSON.parse(readFileSync(`${_dirname}/../../../../../built/_client_dist_/manifest.json`, 'utf-8'))['src/init.ts'],
+				config: this.config,
+			},
+		}));
+
+		// Serve favicon
+		app.use(favicon(`${_dirname}/../../../assets/favicon.ico`));
+
+		// Common request handler
+		app.use(async (ctx, next) => {
+			// IFrameの中に入れられないようにする
+			ctx.set('X-Frame-Options', 'DENY');
+			await next();
+		});
+
+		// Init router
+		const router = new Router();
+
+		//#region static assets
+
+		router.get('/static-assets/(.*)', async ctx => {
+			await send(ctx as any, ctx.path.replace('/static-assets/', ''), {
+				root: staticAssets,
+				maxage: ms('7 days'),
+			});
+		});
+
+		router.get('/client-assets/(.*)', async ctx => {
+			await send(ctx as any, ctx.path.replace('/client-assets/', ''), {
+				root: clientAssets,
+				maxage: ms('7 days'),
+			});
+		});
+
+		router.get('/assets/(.*)', async ctx => {
+			await send(ctx as any, ctx.path.replace('/assets/', ''), {
+				root: assets,
+				maxage: ms('7 days'),
+			});
+		});
+
+		// Apple touch icon
+		router.get('/apple-touch-icon.png', async ctx => {
+			await send(ctx as any, '/apple-touch-icon.png', {
+				root: staticAssets,
+			});
+		});
+
+		router.get('/twemoji/(.*)', async ctx => {
+			const path = ctx.path.replace('/twemoji/', '');
+
+			if (!path.match(/^[0-9a-f-]+\.svg$/)) {
+				ctx.status = 404;
+				return;
+			}
+
+			ctx.set('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
+
+			await send(ctx as any, path, {
+				root: `${_dirname}/../../../node_modules/@discordapp/twemoji/dist/svg/`,
+				maxage: ms('30 days'),
+			});
+		});
+
+		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', {
+				root: swAssets,
+				maxage: ms('10 minutes'),
+			});
+		});
+
+		// Manifest
+		router.get('/manifest.json', ctx => this.#manifestHandler(ctx));
+
+		router.get('/robots.txt', async ctx => {
+			await send(ctx as any, '/robots.txt', {
+				root: staticAssets,
+			});
+		});
+
+		//#endregion
+
+		// Docs
+		router.get('/api-doc', async ctx => {
+			await send(ctx as any, '/redoc.html', {
+				root: staticAssets,
+			});
+		});
+
+		// URL preview endpoint
+		router.get('/url', ctx => this.urlPreviewService.handle(ctx));
+
+		router.get('/api.json', async ctx => {
+			ctx.body = genOpenapiSpec();
+		});
+
+		const getFeed = async (acct: string) => {
+			const { username, host } = Acct.parse(acct);
+			const user = await this.usersRepository.findOneBy({
+				usernameLower: username.toLowerCase(),
+				host: host ?? IsNull(),
+				isSuspended: false,
+			});
+
+			return user && await this.feedService.packFeed(user);
+		};
+
+		// Atom
+		router.get('/@:user.atom', async ctx => {
+			const feed = await getFeed(ctx.params.user);
+
+			if (feed) {
+				ctx.set('Content-Type', 'application/atom+xml; charset=utf-8');
+				ctx.body = feed.atom1();
+			} else {
+				ctx.status = 404;
+			}
+		});
+
+		// RSS
+		router.get('/@:user.rss', async ctx => {
+			const feed = await getFeed(ctx.params.user);
+
+			if (feed) {
+				ctx.set('Content-Type', 'application/rss+xml; charset=utf-8');
+				ctx.body = feed.rss2();
+			} else {
+				ctx.status = 404;
+			}
+		});
+
+		// JSON
+		router.get('/@:user.json', async ctx => {
+			const feed = await getFeed(ctx.params.user);
+
+			if (feed) {
+				ctx.set('Content-Type', 'application/json; charset=utf-8');
+				ctx.body = feed.json1();
+			} else {
+				ctx.status = 404;
+			}
+		});
+
+		//#region SSR (for crawlers)
+		// User
+		router.get(['/@:user', '/@:user/:sub'], async (ctx, next) => {
+			const { username, host } = Acct.parse(ctx.params.user);
+			const user = await this.usersRepository.findOneBy({
+				usernameLower: username.toLowerCase(),
+				host: host ?? IsNull(),
+				isSuspended: false,
+			});
+
+			if (user != null) {
+				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+				const meta = await this.metaService.fetch();
+				const me = profile.fields
+					? profile.fields
+						.filter(filed => filed.value != null && filed.value.match(/^https?:/))
+						.map(field => field.value)
+					: [];
+
+				await ctx.render('user', {
+					user, profile, me,
+					avatarUrl: await this.userEntityService.getAvatarUrl(user),
+					sub: ctx.params.sub,
+					instanceName: meta.name ?? 'Misskey',
+					icon: meta.iconUrl,
+					themeColor: meta.themeColor,
+				});
+				ctx.set('Cache-Control', 'public, max-age=15');
+			} else {
+				// リモートユーザーなので
+				// モデレータがAPI経由で参照可能にするために404にはしない
+				await next();
+			}
+		});
+
+		router.get('/users/:user', async ctx => {
+			const user = await this.usersRepository.findOneBy({
+				id: ctx.params.user,
+				host: IsNull(),
+				isSuspended: false,
+			});
+
+			if (user == null) {
+				ctx.status = 404;
+				return;
+			}
+
+			ctx.redirect(`/@${user.username}${ user.host == null ? '' : '@' + user.host}`);
+		});
+
+		// Note
+		router.get('/notes/:note', async (ctx, next) => {
+			const note = await this.notesRepository.findOneBy({
+				id: ctx.params.note,
+				visibility: In(['public', 'home']),
+			});
+
+			if (note) {
+				const _note = await this.noteEntityService.pack(note);
+				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: note.userId });
+				const meta = await this.metaService.fetch();
+				await ctx.render('note', {
+					note: _note,
+					profile,
+					avatarUrl: await this.userEntityService.getAvatarUrl(await this.usersRepository.findOneByOrFail({ id: note.userId })),
+					// TODO: Let locale changeable by instance setting
+					summary: getNoteSummary(_note),
+					instanceName: meta.name ?? 'Misskey',
+					icon: meta.iconUrl,
+					themeColor: meta.themeColor,
+				});
+
+				ctx.set('Cache-Control', 'public, max-age=15');
+
+				return;
+			}
+
+			await next();
+		});
+
+		// Page
+		router.get('/@:user/pages/:page', async (ctx, next) => {
+			const { username, host } = Acct.parse(ctx.params.user);
+			const user = await this.usersRepository.findOneBy({
+				usernameLower: username.toLowerCase(),
+				host: host ?? IsNull(),
+			});
+
+			if (user == null) return;
+
+			const page = await this.pagesRepository.findOneBy({
+				name: ctx.params.page,
+				userId: user.id,
+			});
+
+			if (page) {
+				const _page = await this.pageEntityService.pack(page);
+				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: page.userId });
+				const meta = await this.metaService.fetch();
+				await ctx.render('page', {
+					page: _page,
+					profile,
+					avatarUrl: await this.userEntityService.getAvatarUrl(await this.usersRepository.findOneByOrFail({ id: page.userId })),
+					instanceName: meta.name ?? 'Misskey',
+					icon: meta.iconUrl,
+					themeColor: meta.themeColor,
+				});
+
+				if (['public'].includes(page.visibility)) {
+					ctx.set('Cache-Control', 'public, max-age=15');
+				} else {
+					ctx.set('Cache-Control', 'private, max-age=0, must-revalidate');
+				}
+
+				return;
+			}
+
+			await next();
+		});
+
+		// Clip
+		// TODO: 非publicなclipのハンドリング
+		router.get('/clips/:clip', async (ctx, next) => {
+			const clip = await this.clipsRepository.findOneBy({
+				id: ctx.params.clip,
+			});
+
+			if (clip) {
+				const _clip = await this.clipEntityService.pack(clip);
+				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: clip.userId });
+				const meta = await this.metaService.fetch();
+				await ctx.render('clip', {
+					clip: _clip,
+					profile,
+					avatarUrl: await this.userEntityService.getAvatarUrl(await this.usersRepository.findOneByOrFail({ id: clip.userId })),
+					instanceName: meta.name ?? 'Misskey',
+					icon: meta.iconUrl,
+					themeColor: meta.themeColor,
+				});
+
+				ctx.set('Cache-Control', 'public, max-age=15');
+
+				return;
+			}
+
+			await next();
+		});
+
+		// Gallery post
+		router.get('/gallery/:post', async (ctx, next) => {
+			const post = await this.galleryPostsRepository.findOneBy({ id: ctx.params.post });
+
+			if (post) {
+				const _post = await this.galleryPostEntityService.pack(post);
+				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: post.userId });
+				const meta = await this.metaService.fetch();
+				await ctx.render('gallery-post', {
+					post: _post,
+					profile,
+					avatarUrl: await this.userEntityService.getAvatarUrl(await this.usersRepository.findOneByOrFail({ id: post.userId })),
+					instanceName: meta.name ?? 'Misskey',
+					icon: meta.iconUrl,
+					themeColor: meta.themeColor,
+				});
+
+				ctx.set('Cache-Control', 'public, max-age=15');
+
+				return;
+			}
+
+			await next();
+		});
+
+		// Channel
+		router.get('/channels/:channel', async (ctx, next) => {
+			const channel = await this.channelsRepository.findOneBy({
+				id: ctx.params.channel,
+			});
+
+			if (channel) {
+				const _channel = await this.channelEntityService.pack(channel);
+				const meta = await this.metaService.fetch();
+				await ctx.render('channel', {
+					channel: _channel,
+					instanceName: meta.name ?? 'Misskey',
+					icon: meta.iconUrl,
+					themeColor: meta.themeColor,
+				});
+
+				ctx.set('Cache-Control', 'public, max-age=15');
+
+				return;
+			}
+
+			await next();
+		});
+		//#endregion
+
+		router.get('/_info_card_', async ctx => {
+			const meta = await this.metaService.fetch(true);
+
+			ctx.remove('X-Frame-Options');
+
+			await ctx.render('info-card', {
+				version: this.config.version,
+				host: this.config.host,
+				meta: meta,
+				originalUsersCount: await this.usersRepository.countBy({ host: IsNull() }),
+				originalNotesCount: await this.notesRepository.countBy({ userHost: IsNull() }),
+			});
+		});
+
+		router.get('/bios', async ctx => {
+			await ctx.render('bios', {
+				version: this.config.version,
+			});
+		});
+
+		router.get('/cli', async ctx => {
+			await ctx.render('cli', {
+				version: this.config.version,
+			});
+		});
+
+		const override = (source: string, target: string, depth = 0) =>
+			[, ...target.split('/').filter(x => x), ...source.split('/').filter(x => x).splice(depth)].join('/');
+
+		router.get('/flush', async ctx => {
+			await ctx.render('flush');
+		});
+
+		// streamingに非WebSocketリクエストが来た場合にbase htmlをキャシュ付きで返すと、Proxy等でそのパスがキャッシュされておかしくなる
+		router.get('/streaming', async ctx => {
+			ctx.status = 503;
+			ctx.set('Cache-Control', 'private, max-age=0');
+		});
+
+		// Render base html for all requests
+		router.get('(.*)', async ctx => {
+			const meta = await this.metaService.fetch();
+			await ctx.render('base', {
+				img: meta.bannerUrl,
+				title: meta.name ?? 'Misskey',
+				instanceName: meta.name ?? 'Misskey',
+				desc: meta.description,
+				icon: meta.iconUrl,
+				themeColor: meta.themeColor,
+			});
+			ctx.set('Cache-Control', 'public, max-age=15');
+		});
+
+		// Register router
+		app.use(router.routes());
+
+		return app;
+	}
+}
diff --git a/packages/backend/src/server/web/FeedService.ts b/packages/backend/src/server/web/FeedService.ts
new file mode 100644
index 0000000000..8b676aebe5
--- /dev/null
+++ b/packages/backend/src/server/web/FeedService.ts
@@ -0,0 +1,86 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { In, IsNull } from 'typeorm';
+import { Feed } from 'feed';
+import { DI } from '@/di-symbols.js';
+import { DriveFilesRepository, NotesRepository, UserProfilesRepository, UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import type { User } from '@/models/entities/User.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
+
+@Injectable()
+export class FeedService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private userEntityService: UserEntityService,
+		private driveFileEntityService: DriveFileEntityService,
+	) {
+	}
+
+	public async packFeed(user: User) {
+		const author = {
+			link: `${this.config.url}/@${user.username}`,
+			name: user.name ?? user.username,
+		};
+	
+		const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+	
+		const notes = await this.notesRepository.find({
+			where: {
+				userId: user.id,
+				renoteId: IsNull(),
+				visibility: In(['public', 'home']),
+			},
+			order: { createdAt: -1 },
+			take: 20,
+		});
+	
+		const feed = new Feed({
+			id: author.link,
+			title: `${author.name} (@${user.username}@${this.config.host})`,
+			updated: notes[0].createdAt,
+			generator: 'Misskey',
+			description: `${user.notesCount} Notes, ${profile.ffVisibility === 'public' ? user.followingCount : '?'} Following, ${profile.ffVisibility === 'public' ? user.followersCount : '?'} Followers${profile.description ? ` · ${profile.description}` : ''}`,
+			link: author.link,
+			image: await this.userEntityService.getAvatarUrl(user),
+			feedLinks: {
+				json: `${author.link}.json`,
+				atom: `${author.link}.atom`,
+			},
+			author,
+			copyright: user.name ?? user.username,
+		});
+	
+		for (const note of notes) {
+			const files = note.fileIds.length > 0 ? await this.driveFilesRepository.findBy({
+				id: In(note.fileIds),
+			}) : [];
+			const file = files.find(file => file.type.startsWith('image/'));
+	
+			feed.addItem({
+				title: `New note by ${author.name}`,
+				link: `${this.config.url}/notes/${note.id}`,
+				date: note.createdAt,
+				description: note.cw ?? undefined,
+				content: note.text ?? undefined,
+				image: file ? this.driveFileEntityService.getPublicUrl(file) ?? undefined : undefined,
+			});
+		}
+	
+		return feed;
+	}
+}
diff --git a/packages/backend/src/server/web/UrlPreviewService.ts b/packages/backend/src/server/web/UrlPreviewService.ts
new file mode 100644
index 0000000000..4e3b456144
--- /dev/null
+++ b/packages/backend/src/server/web/UrlPreviewService.ts
@@ -0,0 +1,84 @@
+import { Inject, Injectable } from '@nestjs/common';
+import summaly from 'summaly';
+import { DI } from '@/di-symbols.js';
+import { UsersRepository } from '@/models/index.js';
+import { Config } from '@/config.js';
+import { MetaService } from '@/core/MetaService.js';
+import { HttpRequestService } from '@/core/HttpRequestService.js';
+import Logger from '@/logger.js';
+import { query } from '@/misc/prelude/url.js';
+import type Koa from 'koa';
+
+@Injectable()
+export class UrlPreviewService {
+	#logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private metaService: MetaService,
+		private httpRequestService: HttpRequestService,
+	) {
+		this.#logger = new Logger('url-preview');
+	}
+
+	#wrap(url?: string): string | null {
+		return url != null
+			? url.match(/^https?:\/\//)
+				? `${this.config.url}/proxy/preview.webp?${query({
+					url,
+					preview: '1',
+				})}`
+				: url
+			: null;
+	}
+
+	public async handle(ctx: Koa.Context) {
+		const url = ctx.query.url;
+		if (typeof url !== 'string') {
+			ctx.status = 400;
+			return;
+		}
+	
+		const lang = ctx.query.lang;
+		if (Array.isArray(lang)) {
+			ctx.status = 400;
+			return;
+		}
+	
+		const meta = await this.metaService.fetch();
+	
+		this.#logger.info(meta.summalyProxy
+			? `(Proxy) Getting preview of ${url}@${lang} ...`
+			: `Getting preview of ${url}@${lang} ...`);
+	
+		try {
+			const summary = meta.summalyProxy ? await this.httpRequestService.getJson(`${meta.summalyProxy}?${query({
+				url: url,
+				lang: lang ?? 'ja-JP',
+			})}`) : await summaly.default(url, {
+				followRedirects: false,
+				lang: lang ?? 'ja-JP',
+			});
+	
+			this.#logger.succ(`Got preview of ${url}: ${summary.title}`);
+	
+			summary.icon = this.#wrap(summary.icon);
+			summary.thumbnail = this.#wrap(summary.thumbnail);
+	
+			// Cache 7days
+			ctx.set('Cache-Control', 'max-age=604800, immutable');
+	
+			ctx.body = summary;
+		} catch (err) {
+			this.#logger.warn(`Failed to get preview of ${url}: ${err}`);
+			ctx.status = 200;
+			ctx.set('Cache-Control', 'max-age=86400, immutable');
+			ctx.body = '{}';
+		}
+	}
+}
diff --git a/packages/backend/src/server/web/feed.ts b/packages/backend/src/server/web/feed.ts
deleted file mode 100644
index 4abe2885cf..0000000000
--- a/packages/backend/src/server/web/feed.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Feed } from 'feed';
-import { In, IsNull } from 'typeorm';
-import config from '@/config/index.js';
-import { User } from '@/models/entities/user.js';
-import { Notes, DriveFiles, UserProfiles, Users } from '@/models/index.js';
-
-export default async function(user: User) {
-	const author = {
-		link: `${config.url}/@${user.username}`,
-		name: user.name || user.username,
-	};
-
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	const notes = await Notes.find({
-		where: {
-			userId: user.id,
-			renoteId: IsNull(),
-			visibility: In(['public', 'home']),
-		},
-		order: { createdAt: -1 },
-		take: 20,
-	});
-
-	const feed = new Feed({
-		id: author.link,
-		title: `${author.name} (@${user.username}@${config.host})`,
-		updated: notes[0].createdAt,
-		generator: 'Misskey',
-		description: `${user.notesCount} Notes, ${profile.ffVisibility === 'public' ? user.followingCount : '?'} Following, ${profile.ffVisibility === 'public' ? user.followersCount : '?'} Followers${profile.description ? ` · ${profile.description}` : ''}`,
-		link: author.link,
-		image: await Users.getAvatarUrl(user),
-		feedLinks: {
-			json: `${author.link}.json`,
-			atom: `${author.link}.atom`,
-		},
-		author,
-		copyright: user.name || user.username,
-	});
-
-	for (const note of notes) {
-		const files = note.fileIds.length > 0 ? await DriveFiles.findBy({
-			id: In(note.fileIds),
-		}) : [];
-		const file = files.find(file => file.type.startsWith('image/'));
-
-		feed.addItem({
-			title: `New note by ${author.name}`,
-			link: `${config.url}/notes/${note.id}`,
-			date: note.createdAt,
-			description: note.cw || undefined,
-			content: note.text || undefined,
-			image: file ? DriveFiles.getPublicUrl(file) || undefined : undefined,
-		});
-	}
-
-	return feed;
-}
diff --git a/packages/backend/src/server/web/index.ts b/packages/backend/src/server/web/index.ts
deleted file mode 100644
index be95becb68..0000000000
--- a/packages/backend/src/server/web/index.ts
+++ /dev/null
@@ -1,521 +0,0 @@
-/**
- * Web Client Server
- */
-
-import { dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { PathOrFileDescriptor, readFileSync } from 'node:fs';
-import ms from 'ms';
-import Koa from 'koa';
-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';
-
-import { In, IsNull } from 'typeorm';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import config from '@/config/index.js';
-import { Users, Notes, UserProfiles, Pages, Channels, Clips, GalleryPosts } from '@/models/index.js';
-import * as Acct from '@/misc/acct.js';
-import { getNoteSummary } from '@/misc/get-note-summary.js';
-import { queues } from '@/queue/queues.js';
-import { genOpenapiSpec } from '../api/openapi/gen-spec.js';
-import { urlPreviewHandler } from './url-preview.js';
-import { manifestHandler } from './manifest.js';
-import packFeed from './feed.js';
-
-const _filename = fileURLToPath(import.meta.url);
-const _dirname = dirname(_filename);
-
-const staticAssets = `${_dirname}/../../../assets/`;
-const clientAssets = `${_dirname}/../../../../client/assets/`;
-const assets = `${_dirname}/../../../../../built/_client_dist_/`;
-const swAssets = `${_dirname}/../../../../../built/_sw_dist_/`;
-
-// Init app
-const app = new Koa();
-
-//#region Bull Dashboard
-const bullBoardPath = '/queue';
-
-// Authenticate
-app.use(async (ctx, next) => {
-	if (ctx.path === bullBoardPath || ctx.path.startsWith(bullBoardPath + '/')) {
-		const token = ctx.cookies.get('token');
-		if (token == null) {
-			ctx.status = 401;
-			return;
-		}
-		const user = await Users.findOneBy({ token });
-		if (user == null || !(user.isAdmin || user.isModerator)) {
-			ctx.status = 403;
-			return;
-		}
-	}
-	await next();
-});
-
-const serverAdapter = new KoaAdapter();
-
-createBullBoard({
-	queues: queues.map(q => new BullAdapter(q)),
-	serverAdapter,
-});
-
-serverAdapter.setBasePath(bullBoardPath);
-app.use(serverAdapter.registerPlugin());
-//#endregion
-
-// Init renderer
-app.use(views(_dirname + '/views', {
-	extension: 'pug',
-	options: {
-		version: config.version,
-		getClientEntry: () => process.env.NODE_ENV === 'production' ?
-			config.clientEntry :
-			JSON.parse(readFileSync(`${_dirname}/../../../../../built/_client_dist_/manifest.json`, 'utf-8'))['src/init.ts'],
-		config,
-	},
-}));
-
-// Serve favicon
-app.use(favicon(`${_dirname}/../../../assets/favicon.ico`));
-
-// Common request handler
-app.use(async (ctx, next) => {
-	// IFrameの中に入れられないようにする
-	ctx.set('X-Frame-Options', 'DENY');
-	await next();
-});
-
-// Init router
-const router = new Router();
-
-//#region static assets
-
-router.get('/static-assets/(.*)', async ctx => {
-	await send(ctx as any, ctx.path.replace('/static-assets/', ''), {
-		root: staticAssets,
-		maxage: ms('7 days'),
-	});
-});
-
-router.get('/client-assets/(.*)', async ctx => {
-	await send(ctx as any, ctx.path.replace('/client-assets/', ''), {
-		root: clientAssets,
-		maxage: ms('7 days'),
-	});
-});
-
-router.get('/assets/(.*)', async ctx => {
-	await send(ctx as any, ctx.path.replace('/assets/', ''), {
-		root: assets,
-		maxage: ms('7 days'),
-	});
-});
-
-// Apple touch icon
-router.get('/apple-touch-icon.png', async ctx => {
-	await send(ctx as any, '/apple-touch-icon.png', {
-		root: staticAssets,
-	});
-});
-
-router.get('/twemoji/(.*)', async ctx => {
-	const path = ctx.path.replace('/twemoji/', '');
-
-	if (!path.match(/^[0-9a-f-]+\.svg$/)) {
-		ctx.status = 404;
-		return;
-	}
-
-	ctx.set('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
-
-	await send(ctx as any, path, {
-		root: `${_dirname}/../../../node_modules/@discordapp/twemoji/dist/svg/`,
-		maxage: ms('30 days'),
-	});
-});
-
-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`, {
-		root: swAssets,
-		maxage: ms('10 minutes'),
-	});
-});
-
-// Manifest
-router.get('/manifest.json', manifestHandler);
-
-router.get('/robots.txt', async ctx => {
-	await send(ctx as any, '/robots.txt', {
-		root: staticAssets,
-	});
-});
-
-//#endregion
-
-// Docs
-router.get('/api-doc', async ctx => {
-	await send(ctx as any, '/redoc.html', {
-		root: staticAssets,
-	});
-});
-
-// URL preview endpoint
-router.get('/url', urlPreviewHandler);
-
-router.get('/api.json', async ctx => {
-	ctx.body = genOpenapiSpec();
-});
-
-const getFeed = async (acct: string) => {
-	const { username, host } = Acct.parse(acct);
-	const user = await Users.findOneBy({
-		usernameLower: username.toLowerCase(),
-		host: host ?? IsNull(),
-		isSuspended: false,
-	});
-
-	return user && await packFeed(user);
-};
-
-// Atom
-router.get('/@:user.atom', async ctx => {
-	const feed = await getFeed(ctx.params.user);
-
-	if (feed) {
-		ctx.set('Content-Type', 'application/atom+xml; charset=utf-8');
-		ctx.body = feed.atom1();
-	} else {
-		ctx.status = 404;
-	}
-});
-
-// RSS
-router.get('/@:user.rss', async ctx => {
-	const feed = await getFeed(ctx.params.user);
-
-	if (feed) {
-		ctx.set('Content-Type', 'application/rss+xml; charset=utf-8');
-		ctx.body = feed.rss2();
-	} else {
-		ctx.status = 404;
-	}
-});
-
-// JSON
-router.get('/@:user.json', async ctx => {
-	const feed = await getFeed(ctx.params.user);
-
-	if (feed) {
-		ctx.set('Content-Type', 'application/json; charset=utf-8');
-		ctx.body = feed.json1();
-	} else {
-		ctx.status = 404;
-	}
-});
-
-//#region SSR (for crawlers)
-// User
-router.get(['/@:user', '/@:user/:sub'], async (ctx, next) => {
-	const { username, host } = Acct.parse(ctx.params.user);
-	const user = await Users.findOneBy({
-		usernameLower: username.toLowerCase(),
-		host: host ?? IsNull(),
-		isSuspended: false,
-	});
-
-	if (user != null) {
-		const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-		const meta = await fetchMeta();
-		const me = profile.fields
-			? profile.fields
-				.filter(filed => filed.value != null && filed.value.match(/^https?:/))
-				.map(field => field.value)
-			: [];
-
-		await ctx.render('user', {
-			user, profile, me,
-			avatarUrl: await Users.getAvatarUrl(user),
-			sub: ctx.params.sub,
-			instanceName: meta.name || 'Misskey',
-			icon: meta.iconUrl,
-			themeColor: meta.themeColor,
-		});
-		ctx.set('Cache-Control', 'public, max-age=15');
-	} else {
-		// リモートユーザーなので
-		// モデレータがAPI経由で参照可能にするために404にはしない
-		await next();
-	}
-});
-
-router.get('/users/:user', async ctx => {
-	const user = await Users.findOneBy({
-		id: ctx.params.user,
-		host: IsNull(),
-		isSuspended: false,
-	});
-
-	if (user == null) {
-		ctx.status = 404;
-		return;
-	}
-
-	ctx.redirect(`/@${user.username}${ user.host == null ? '' : '@' + user.host}`);
-});
-
-// Note
-router.get('/notes/:note', async (ctx, next) => {
-	const note = await Notes.findOneBy({
-		id: ctx.params.note,
-		visibility: In(['public', 'home']),
-	});
-
-	if (note) {
-		const _note = await Notes.pack(note);
-		const profile = await UserProfiles.findOneByOrFail({ userId: note.userId });
-		const meta = await fetchMeta();
-		await ctx.render('note', {
-			note: _note,
-			profile,
-			avatarUrl: await Users.getAvatarUrl(await Users.findOneByOrFail({ id: note.userId })),
-			// TODO: Let locale changeable by instance setting
-			summary: getNoteSummary(_note),
-			instanceName: meta.name || 'Misskey',
-			icon: meta.iconUrl,
-			themeColor: meta.themeColor,
-		});
-
-		ctx.set('Cache-Control', 'public, max-age=15');
-
-		return;
-	}
-
-	await next();
-});
-
-// Page
-router.get('/@:user/pages/:page', async (ctx, next) => {
-	const { username, host } = Acct.parse(ctx.params.user);
-	const user = await Users.findOneBy({
-		usernameLower: username.toLowerCase(),
-		host: host ?? IsNull(),
-	});
-
-	if (user == null) return;
-
-	const page = await Pages.findOneBy({
-		name: ctx.params.page,
-		userId: user.id,
-	});
-
-	if (page) {
-		const _page = await Pages.pack(page);
-		const profile = await UserProfiles.findOneByOrFail({ userId: page.userId });
-		const meta = await fetchMeta();
-		await ctx.render('page', {
-			page: _page,
-			profile,
-			avatarUrl: await Users.getAvatarUrl(await Users.findOneByOrFail({ id: page.userId })),
-			instanceName: meta.name || 'Misskey',
-			icon: meta.iconUrl,
-			themeColor: meta.themeColor,
-		});
-
-		if (['public'].includes(page.visibility)) {
-			ctx.set('Cache-Control', 'public, max-age=15');
-		} else {
-			ctx.set('Cache-Control', 'private, max-age=0, must-revalidate');
-		}
-
-		return;
-	}
-
-	await next();
-});
-
-// Clip
-// TODO: 非publicなclipのハンドリング
-router.get('/clips/:clip', async (ctx, next) => {
-	const clip = await Clips.findOneBy({
-		id: ctx.params.clip,
-	});
-
-	if (clip) {
-		const _clip = await Clips.pack(clip);
-		const profile = await UserProfiles.findOneByOrFail({ userId: clip.userId });
-		const meta = await fetchMeta();
-		await ctx.render('clip', {
-			clip: _clip,
-			profile,
-			avatarUrl: await Users.getAvatarUrl(await Users.findOneByOrFail({ id: clip.userId })),
-			instanceName: meta.name || 'Misskey',
-			icon: meta.iconUrl,
-			themeColor: meta.themeColor,
-		});
-
-		ctx.set('Cache-Control', 'public, max-age=15');
-
-		return;
-	}
-
-	await next();
-});
-
-// Gallery post
-router.get('/gallery/:post', async (ctx, next) => {
-	const post = await GalleryPosts.findOneBy({ id: ctx.params.post });
-
-	if (post) {
-		const _post = await GalleryPosts.pack(post);
-		const profile = await UserProfiles.findOneByOrFail({ userId: post.userId });
-		const meta = await fetchMeta();
-		await ctx.render('gallery-post', {
-			post: _post,
-			profile,
-			avatarUrl: await Users.getAvatarUrl(await Users.findOneByOrFail({ id: post.userId })),
-			instanceName: meta.name || 'Misskey',
-			icon: meta.iconUrl,
-			themeColor: meta.themeColor,
-		});
-
-		ctx.set('Cache-Control', 'public, max-age=15');
-
-		return;
-	}
-
-	await next();
-});
-
-// Channel
-router.get('/channels/:channel', async (ctx, next) => {
-	const channel = await Channels.findOneBy({
-		id: ctx.params.channel,
-	});
-
-	if (channel) {
-		const _channel = await Channels.pack(channel);
-		const meta = await fetchMeta();
-		await ctx.render('channel', {
-			channel: _channel,
-			instanceName: meta.name || 'Misskey',
-			icon: meta.iconUrl,
-			themeColor: meta.themeColor,
-		});
-
-		ctx.set('Cache-Control', 'public, max-age=15');
-
-		return;
-	}
-
-	await next();
-});
-//#endregion
-
-router.get('/_info_card_', async ctx => {
-	const meta = await fetchMeta(true);
-
-	ctx.remove('X-Frame-Options');
-
-	await ctx.render('info-card', {
-		version: config.version,
-		host: config.host,
-		meta: meta,
-		originalUsersCount: await Users.countBy({ host: IsNull() }),
-		originalNotesCount: await Notes.countBy({ userHost: IsNull() }),
-	});
-});
-
-router.get('/bios', async ctx => {
-	await ctx.render('bios', {
-		version: config.version,
-	});
-});
-
-router.get('/cli', async ctx => {
-	await ctx.render('cli', {
-		version: config.version,
-	});
-});
-
-const override = (source: string, target: string, depth = 0) =>
-	[, ...target.split('/').filter(x => x), ...source.split('/').filter(x => x).splice(depth)].join('/');
-
-router.get('/flush', async ctx => {
-	await ctx.render('flush');
-});
-
-// streamingに非WebSocketリクエストが来た場合にbase htmlをキャシュ付きで返すと、Proxy等でそのパスがキャッシュされておかしくなる
-router.get('/streaming', async ctx => {
-	ctx.status = 503;
-	ctx.set('Cache-Control', 'private, max-age=0');
-});
-
-// Render base html for all requests
-router.get('(.*)', async ctx => {
-	const meta = await fetchMeta();
-	await ctx.render('base', {
-		img: meta.bannerUrl,
-		title: meta.name || 'Misskey',
-		instanceName: meta.name || 'Misskey',
-		desc: meta.description,
-		icon: meta.iconUrl,
-		themeColor: meta.themeColor,
-	});
-	ctx.set('Cache-Control', 'public, max-age=15');
-});
-
-// Register router
-app.use(router.routes());
-
-export default app;
diff --git a/packages/backend/src/server/web/manifest.ts b/packages/backend/src/server/web/manifest.ts
deleted file mode 100644
index ee568b8077..0000000000
--- a/packages/backend/src/server/web/manifest.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import Koa from 'koa';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import manifest from './manifest.json' assert { type: 'json' };
-
-export const manifestHandler = async (ctx: Koa.Context) => {
-	// TODO
-	//const res = structuredClone(manifest);
-	const res = JSON.parse(JSON.stringify(manifest));
-
-	const instance = await fetchMeta(true);
-
-	res.short_name = instance.name || 'Misskey';
-	res.name = instance.name || 'Misskey';
-	if (instance.themeColor) res.theme_color = instance.themeColor;
-
-	ctx.set('Cache-Control', 'max-age=300');
-	ctx.body = res;
-};
diff --git a/packages/backend/src/server/web/url-preview.ts b/packages/backend/src/server/web/url-preview.ts
deleted file mode 100644
index 1e259649f9..0000000000
--- a/packages/backend/src/server/web/url-preview.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import Koa from 'koa';
-import summaly from 'summaly';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import Logger from '@/services/logger.js';
-import config from '@/config/index.js';
-import { query } from '@/prelude/url.js';
-import { getJson } from '@/misc/fetch.js';
-
-const logger = new Logger('url-preview');
-
-export const urlPreviewHandler = async (ctx: Koa.Context) => {
-	const url = ctx.query.url;
-	if (typeof url !== 'string') {
-		ctx.status = 400;
-		return;
-	}
-
-	const lang = ctx.query.lang;
-	if (Array.isArray(lang)) {
-		ctx.status = 400;
-		return;
-	}
-
-	const meta = await fetchMeta();
-
-	logger.info(meta.summalyProxy
-		? `(Proxy) Getting preview of ${url}@${lang} ...`
-		: `Getting preview of ${url}@${lang} ...`);
-
-	try {
-		const summary = meta.summalyProxy ? await getJson(`${meta.summalyProxy}?${query({
-			url: url,
-			lang: lang ?? 'ja-JP',
-		})}`) : await summaly.default(url, {
-			followRedirects: false,
-			lang: lang ?? 'ja-JP',
-		});
-
-		logger.succ(`Got preview of ${url}: ${summary.title}`);
-
-		summary.icon = wrap(summary.icon);
-		summary.thumbnail = wrap(summary.thumbnail);
-
-		// Cache 7days
-		ctx.set('Cache-Control', 'max-age=604800, immutable');
-
-		ctx.body = summary;
-	} catch (err) {
-		logger.warn(`Failed to get preview of ${url}: ${err}`);
-		ctx.status = 200;
-		ctx.set('Cache-Control', 'max-age=86400, immutable');
-		ctx.body = '{}';
-	}
-};
-
-function wrap(url?: string): string | null {
-	return url != null
-		? url.match(/^https?:\/\//)
-			? `${config.url}/proxy/preview.webp?${query({
-				url,
-				preview: '1',
-			})}`
-			: url
-		: null;
-}
diff --git a/packages/backend/src/server/well-known.ts b/packages/backend/src/server/well-known.ts
deleted file mode 100644
index 1d094f2edd..0000000000
--- a/packages/backend/src/server/well-known.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-import Router from '@koa/router';
-
-import config from '@/config/index.js';
-import * as Acct from '@/misc/acct.js';
-import { links } from './nodeinfo.js';
-import { escapeAttribute, escapeValue } from '@/prelude/xml.js';
-import { Users } from '@/models/index.js';
-import { User } from '@/models/entities/user.js';
-import { FindOptionsWhere, IsNull } from 'typeorm';
-
-// Init router
-const router = new Router();
-
-const XRD = (...x: { element: string, value?: string, attributes?: Record<string, string> }[]) =>
-	`<?xml version="1.0" encoding="UTF-8"?><XRD xmlns="http://docs.oasis-open.org/ns/xri/xrd-1.0">${x.map(({ element, value, attributes }) =>
-	`<${
-		Object.entries(typeof attributes === 'object' && attributes || {}).reduce((a, [k, v]) => `${a} ${k}="${escapeAttribute(v)}"`, element)
-	}${
-		typeof value === 'string' ? `>${escapeValue(value)}</${element}` : '/'
-	}>`).reduce((a, c) => a + c, '')}</XRD>`;
-
-const allPath = '/.well-known/(.*)';
-const webFingerPath = '/.well-known/webfinger';
-const jrd = 'application/jrd+json';
-const xrd = 'application/xrd+xml';
-
-router.use(allPath, async (ctx, next) => {
-	ctx.set({
-		'Access-Control-Allow-Headers': 'Accept',
-		'Access-Control-Allow-Methods': 'GET, OPTIONS',
-		'Access-Control-Allow-Origin': '*',
-		'Access-Control-Expose-Headers': 'Vary',
-	});
-	await next();
-});
-
-router.options(allPath, async ctx => {
-	ctx.status = 204;
-});
-
-router.get('/.well-known/host-meta', async ctx => {
-	ctx.set('Content-Type', xrd);
-	ctx.body = XRD({ element: 'Link', attributes: {
-		rel: 'lrdd',
-		type: xrd,
-		template: `${config.url}${webFingerPath}?resource={uri}`,
-	} });
-});
-
-router.get('/.well-known/host-meta.json', async ctx => {
-	ctx.set('Content-Type', jrd);
-	ctx.body = {
-		links: [{
-			rel: 'lrdd',
-			type: jrd,
-			template: `${config.url}${webFingerPath}?resource={uri}`,
-		}],
-	};
-});
-
-router.get('/.well-known/nodeinfo', async ctx => {
-	ctx.body = { links };
-});
-
-/* TODO
-router.get('/.well-known/change-password', async ctx => {
-});
-*/
-
-router.get(webFingerPath, async ctx => {
-	const fromId = (id: User['id']): FindOptionsWhere<User> => ({
-		id,
-		host: IsNull(),
-		isSuspended: false,
-	});
-
-	const generateQuery = (resource: string): FindOptionsWhere<User> | number =>
-		resource.startsWith(`${config.url.toLowerCase()}/users/`) ?
-			fromId(resource.split('/').pop()!) :
-			fromAcct(Acct.parse(
-				resource.startsWith(`${config.url.toLowerCase()}/@`) ? resource.split('/').pop()! :
-				resource.startsWith('acct:') ? resource.slice('acct:'.length) :
-				resource));
-
-	const fromAcct = (acct: Acct.Acct): FindOptionsWhere<User> | number =>
-		!acct.host || acct.host === config.host.toLowerCase() ? {
-			usernameLower: acct.username,
-			host: IsNull(),
-			isSuspended: false,
-		} : 422;
-
-	if (typeof ctx.query.resource !== 'string') {
-		ctx.status = 400;
-		return;
-	}
-
-	const query = generateQuery(ctx.query.resource.toLowerCase());
-
-	if (typeof query === 'number') {
-		ctx.status = query;
-		return;
-	}
-
-	const user = await Users.findOneBy(query);
-
-	if (user == null) {
-		ctx.status = 404;
-		return;
-	}
-
-	const subject = `acct:${user.username}@${config.host}`;
-	const self = {
-		rel: 'self',
-		type: 'application/activity+json',
-		href: `${config.url}/users/${user.id}`,
-	};
-	const profilePage = {
-		rel: 'http://webfinger.net/rel/profile-page',
-		type: 'text/html',
-		href: `${config.url}/@${user.username}`,
-	};
-	const subscribe = {
-		rel: 'http://ostatus.org/schema/1.0/subscribe',
-		template: `${config.url}/authorize-follow?acct={uri}`,
-	};
-
-	if (ctx.accepts(jrd, xrd) === xrd) {
-		ctx.body = XRD(
-			{ element: 'Subject', value: subject },
-			{ element: 'Link', attributes: self },
-			{ element: 'Link', attributes: profilePage },
-			{ element: 'Link', attributes: subscribe });
-		ctx.type = xrd;
-	} else {
-		ctx.body = {
-			subject,
-			links: [self, profilePage, subscribe],
-		};
-		ctx.type = jrd;
-	}
-
-	ctx.vary('Accept');
-	ctx.set('Cache-Control', 'public, max-age=180');
-});
-
-// Return 404 for other .well-known
-router.all(allPath, async ctx => {
-	ctx.status = 404;
-});
-
-export default router;
diff --git a/packages/backend/src/services/add-note-to-antenna.ts b/packages/backend/src/services/add-note-to-antenna.ts
deleted file mode 100644
index 1f344222e1..0000000000
--- a/packages/backend/src/services/add-note-to-antenna.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-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 { isUserRelated } from '@/misc/is-user-related.js';
-import { publishAntennaStream, publishMainStream } from '@/services/stream.js';
-import { User } from '@/models/entities/user.js';
-
-export async function addNoteToAntenna(antenna: Antenna, note: Note, noteUser: { id: User['id']; }) {
-	// 通知しない設定になっているか、自分自身の投稿なら既読にする
-	const read = !antenna.notify || (antenna.userId === noteUser.id);
-
-	AntennaNotes.insert({
-		id: genId(),
-		antennaId: antenna.id,
-		noteId: note.id,
-		read: read,
-	});
-
-	publishAntennaStream(antenna.id, 'note', note);
-
-	if (!read) {
-		const mutings = await Mutings.find({
-			where: {
-				muterId: antenna.userId,
-			},
-			select: ['muteeId'],
-		});
-
-		// Copy
-		const _note: Note = {
-			...note,
-		};
-
-		if (note.replyId != null) {
-			_note.reply = await Notes.findOneByOrFail({ id: note.replyId });
-		}
-		if (note.renoteId != null) {
-			_note.renote = await Notes.findOneByOrFail({ id: note.renoteId });
-		}
-
-		if (isUserRelated(_note, new Set<string>(mutings.map(x => x.muteeId)))) {
-			return;
-		}
-
-		// 2秒経っても既読にならなかったら通知
-		setTimeout(async () => {
-			const unread = await AntennaNotes.findOneBy({ antennaId: antenna.id, read: false });
-			if (unread) {
-				publishMainStream(antenna.userId, 'unreadAntenna', antenna);
-			}
-		}, 2000);
-	}
-}
diff --git a/packages/backend/src/services/blocking/create.ts b/packages/backend/src/services/blocking/create.ts
deleted file mode 100644
index a2c61cca22..0000000000
--- a/packages/backend/src/services/blocking/create.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { publishMainStream, publishUserEvent } from '@/services/stream.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderFollow from '@/remote/activitypub/renderer/follow.js';
-import renderUndo from '@/remote/activitypub/renderer/undo.js';
-import { renderBlock } from '@/remote/activitypub/renderer/block.js';
-import { deliver } from '@/queue/index.js';
-import renderReject from '@/remote/activitypub/renderer/reject.js';
-import { Blocking } from '@/models/entities/blocking.js';
-import { User } from '@/models/entities/user.js';
-import { Blockings, Users, FollowRequests, Followings, UserListJoinings, UserLists } from '@/models/index.js';
-import { perUserFollowingChart } from '@/services/chart/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { IdentifiableError } from '@/misc/identifiable-error.js';
-import { getActiveWebhooks } from '@/misc/webhook-cache.js';
-import { webhookDeliver } from '@/queue/index.js';
-
-export default async function(blocker: User, blockee: User) {
-	await Promise.all([
-		cancelRequest(blocker, blockee),
-		cancelRequest(blockee, blocker),
-		unFollow(blocker, blockee),
-		unFollow(blockee, blocker),
-		removeFromList(blockee, blocker),
-	]);
-
-	const blocking = {
-		id: genId(),
-		createdAt: new Date(),
-		blocker,
-		blockerId: blocker.id,
-		blockee,
-		blockeeId: blockee.id,
-	} as Blocking;
-
-	await Blockings.insert(blocking);
-
-	if (Users.isLocalUser(blocker) && Users.isRemoteUser(blockee)) {
-		const content = renderActivity(renderBlock(blocking));
-		deliver(blocker, content, blockee.inbox);
-	}
-}
-
-async function cancelRequest(follower: User, followee: User) {
-	const request = await FollowRequests.findOneBy({
-		followeeId: followee.id,
-		followerId: follower.id,
-	});
-
-	if (request == null) {
-		return;
-	}
-
-	await FollowRequests.delete({
-		followeeId: followee.id,
-		followerId: follower.id,
-	});
-
-	if (Users.isLocalUser(followee)) {
-		Users.pack(followee, followee, {
-			detail: true,
-		}).then(packed => publishMainStream(followee.id, 'meUpdated', packed));
-	}
-
-	if (Users.isLocalUser(follower)) {
-		Users.pack(followee, follower, {
-			detail: true,
-		}).then(async packed => {
-			publishUserEvent(follower.id, 'unfollow', packed);
-			publishMainStream(follower.id, 'unfollow', packed);
-
-			const webhooks = (await getActiveWebhooks()).filter(x => x.userId === follower.id && x.on.includes('unfollow'));
-			for (const webhook of webhooks) {
-				webhookDeliver(webhook, 'unfollow', {
-					user: packed,
-				});
-			}
-		});
-	}
-
-	// リモートにフォローリクエストをしていたらUndoFollow送信
-	if (Users.isLocalUser(follower) && Users.isRemoteUser(followee)) {
-		const content = renderActivity(renderUndo(renderFollow(follower, followee), follower));
-		deliver(follower, content, followee.inbox);
-	}
-
-	// リモートからフォローリクエストを受けていたらReject送信
-	if (Users.isRemoteUser(follower) && Users.isLocalUser(followee)) {
-		const content = renderActivity(renderReject(renderFollow(follower, followee, request.requestId!), followee));
-		deliver(followee, content, follower.inbox);
-	}
-}
-
-async function unFollow(follower: User, followee: User) {
-	const following = await Followings.findOneBy({
-		followerId: follower.id,
-		followeeId: followee.id,
-	});
-
-	if (following == null) {
-		return;
-	}
-
-	await Promise.all([
-		Followings.delete(following.id),
-		Users.decrement({ id: follower.id }, 'followingCount', 1),
-		Users.decrement({ id: followee.id }, 'followersCount', 1),
-		perUserFollowingChart.update(follower, followee, false),
-	]);
-
-	// Publish unfollow event
-	if (Users.isLocalUser(follower)) {
-		Users.pack(followee, follower, {
-			detail: true,
-		}).then(async packed => {
-			publishUserEvent(follower.id, 'unfollow', packed);
-			publishMainStream(follower.id, 'unfollow', packed);
-
-			const webhooks = (await getActiveWebhooks()).filter(x => x.userId === follower.id && x.on.includes('unfollow'));
-			for (const webhook of webhooks) {
-				webhookDeliver(webhook, 'unfollow', {
-					user: packed,
-				});
-			}
-		});
-	}
-
-	// リモートにフォローをしていたらUndoFollow送信
-	if (Users.isLocalUser(follower) && Users.isRemoteUser(followee)) {
-		const content = renderActivity(renderUndo(renderFollow(follower, followee), follower));
-		deliver(follower, content, followee.inbox);
-	}
-}
-
-async function removeFromList(listOwner: User, user: User) {
-	const userLists = await UserLists.findBy({
-		userId: listOwner.id,
-	});
-
-	for (const userList of userLists) {
-		await UserListJoinings.delete({
-			userListId: userList.id,
-			userId: user.id,
-		});
-	}
-}
diff --git a/packages/backend/src/services/blocking/delete.ts b/packages/backend/src/services/blocking/delete.ts
deleted file mode 100644
index cb16651bc0..0000000000
--- a/packages/backend/src/services/blocking/delete.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import { renderBlock } from '@/remote/activitypub/renderer/block.js';
-import renderUndo from '@/remote/activitypub/renderer/undo.js';
-import { deliver } from '@/queue/index.js';
-import Logger from '../logger.js';
-import { CacheableUser, User } from '@/models/entities/user.js';
-import { Blockings, Users } from '@/models/index.js';
-
-const logger = new Logger('blocking/delete');
-
-export default async function(blocker: CacheableUser, blockee: CacheableUser) {
-	const blocking = await Blockings.findOneBy({
-		blockerId: blocker.id,
-		blockeeId: blockee.id,
-	});
-
-	if (blocking == null) {
-		logger.warn('ブロック解除がリクエストされましたがブロックしていませんでした');
-		return;
-	}
-
-	// Since we already have the blocker and blockee, we do not need to fetch
-	// them in the query above and can just manually insert them here.
-	blocking.blocker = blocker;
-	blocking.blockee = blockee;
-
-	Blockings.delete(blocking.id);
-
-	// deliver if remote bloking
-	if (Users.isLocalUser(blocker) && Users.isRemoteUser(blockee)) {
-		const content = renderActivity(renderUndo(renderBlock(blocking), blocker));
-		deliver(blocker, content, blockee.inbox);
-	}
-}
diff --git a/packages/backend/src/services/chart/charts/active-users.ts b/packages/backend/src/services/chart/charts/active-users.ts
deleted file mode 100644
index d952ea53bd..0000000000
--- a/packages/backend/src/services/chart/charts/active-users.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import Chart, { KVs } from '../core.js';
-import { User } from '@/models/entities/user.js';
-import { Users } from '@/models/index.js';
-import { name, schema } from './entities/active-users.js';
-
-const week = 1000 * 60 * 60 * 24 * 7;
-const month = 1000 * 60 * 60 * 24 * 30;
-const year = 1000 * 60 * 60 * 24 * 365;
-
-/**
- * アクティブユーザーに関するチャート
- */
-// eslint-disable-next-line import/no-default-export
-export default class ActiveUsersChart extends Chart<typeof schema> {
-	constructor() {
-		super(name, schema);
-	}
-
-	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	public async read(user: { id: User['id'], host: null, createdAt: User['createdAt'] }): Promise<void> {
-		await this.commit({
-			'read': [user.id],
-			'registeredWithinWeek': (Date.now() - user.createdAt.getTime() < week) ? [user.id] : [],
-			'registeredWithinMonth': (Date.now() - user.createdAt.getTime() < month) ? [user.id] : [],
-			'registeredWithinYear': (Date.now() - user.createdAt.getTime() < year) ? [user.id] : [],
-			'registeredOutsideWeek': (Date.now() - user.createdAt.getTime() > week) ? [user.id] : [],
-			'registeredOutsideMonth': (Date.now() - user.createdAt.getTime() > month) ? [user.id] : [],
-			'registeredOutsideYear': (Date.now() - user.createdAt.getTime() > year) ? [user.id] : [],
-		});
-	}
-
-	public async write(user: { id: User['id'], host: null, createdAt: User['createdAt'] }): Promise<void> {
-		await this.commit({
-			'write': [user.id],
-		});
-	}
-}
diff --git a/packages/backend/src/services/chart/charts/ap-request.ts b/packages/backend/src/services/chart/charts/ap-request.ts
deleted file mode 100644
index e9e42ade7f..0000000000
--- a/packages/backend/src/services/chart/charts/ap-request.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import Chart, { KVs } from '../core.js';
-import { name, schema } from './entities/ap-request.js';
-
-/**
- * Chart about ActivityPub requests
- */
-// eslint-disable-next-line import/no-default-export
-export default class ApRequestChart extends Chart<typeof schema> {
-	constructor() {
-		super(name, schema);
-	}
-
-	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	public async deliverSucc(): Promise<void> {
-		await this.commit({
-			'deliverSucceeded': 1,
-		});
-	}
-
-	public async deliverFail(): Promise<void> {
-		await this.commit({
-			'deliverFailed': 1,
-		});
-	}
-
-	public async inbox(): Promise<void> {
-		await this.commit({
-			'inboxReceived': 1,
-		});
-	}
-}
diff --git a/packages/backend/src/services/chart/charts/drive.ts b/packages/backend/src/services/chart/charts/drive.ts
deleted file mode 100644
index 0eeba90dd3..0000000000
--- a/packages/backend/src/services/chart/charts/drive.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import Chart, { KVs } from '../core.js';
-import { DriveFiles } from '@/models/index.js';
-import { Not, IsNull } from 'typeorm';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { name, schema } from './entities/drive.js';
-
-/**
- * ドライブに関するチャート
- */
-// eslint-disable-next-line import/no-default-export
-export default class DriveChart extends Chart<typeof schema> {
-	constructor() {
-		super(name, schema);
-	}
-
-	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	public async update(file: DriveFile, isAdditional: boolean): Promise<void> {
-		const fileSizeKb = file.size / 1000;
-		await this.commit(file.userHost === null ? {
-			'local.incCount': isAdditional ? 1 : 0,
-			'local.incSize': isAdditional ? fileSizeKb : 0,
-			'local.decCount': isAdditional ? 0 : 1,
-			'local.decSize': isAdditional ? 0 : fileSizeKb,
-		} : {
-			'remote.incCount': isAdditional ? 1 : 0,
-			'remote.incSize': isAdditional ? fileSizeKb : 0,
-			'remote.decCount': isAdditional ? 0 : 1,
-			'remote.decSize': isAdditional ? 0 : fileSizeKb,
-		});
-	}
-}
diff --git a/packages/backend/src/services/chart/charts/entities/active-users.ts b/packages/backend/src/services/chart/charts/entities/active-users.ts
deleted file mode 100644
index 5767b76f8e..0000000000
--- a/packages/backend/src/services/chart/charts/entities/active-users.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import Chart from '../../core.js';
-
-export const name = 'activeUsers';
-
-export const schema = {
-	'readWrite': { intersection: ['read', 'write'], range: 'small' },
-	'read': { uniqueIncrement: true, range: 'small' },
-	'write': { uniqueIncrement: true, range: 'small' },
-	'registeredWithinWeek': { uniqueIncrement: true, range: 'small' },
-	'registeredWithinMonth': { uniqueIncrement: true, range: 'small' },
-	'registeredWithinYear': { uniqueIncrement: true, range: 'small' },
-	'registeredOutsideWeek': { uniqueIncrement: true, range: 'small' },
-	'registeredOutsideMonth': { uniqueIncrement: true, range: 'small' },
-	'registeredOutsideYear': { uniqueIncrement: true, range: 'small' },
-} as const;
-
-export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/services/chart/charts/entities/ap-request.ts b/packages/backend/src/services/chart/charts/entities/ap-request.ts
deleted file mode 100644
index 3a9f3dacfd..0000000000
--- a/packages/backend/src/services/chart/charts/entities/ap-request.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import Chart from '../../core.js';
-
-export const name = 'apRequest';
-
-export const schema = {
-	'deliverFailed': { },
-	'deliverSucceeded': { },
-	'inboxReceived': { },
-} as const;
-
-export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/services/chart/charts/entities/drive.ts b/packages/backend/src/services/chart/charts/entities/drive.ts
deleted file mode 100644
index 4bf5bb729e..0000000000
--- a/packages/backend/src/services/chart/charts/entities/drive.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import Chart from '../../core.js';
-
-export const name = 'drive';
-
-export const schema = {
-	'local.incCount': {},
-	'local.incSize': {}, // in kilobyte
-	'local.decCount': {},
-	'local.decSize': {}, // in kilobyte
-	'remote.incCount': {},
-	'remote.incSize': {}, // in kilobyte
-	'remote.decCount': {},
-	'remote.decSize': {}, // in kilobyte
-} as const;
-
-export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/services/chart/charts/entities/federation.ts b/packages/backend/src/services/chart/charts/entities/federation.ts
deleted file mode 100644
index a8466b0b4c..0000000000
--- a/packages/backend/src/services/chart/charts/entities/federation.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import Chart from '../../core.js';
-
-export const name = 'federation';
-
-export const schema = {
-	'deliveredInstances': { uniqueIncrement: true, range: 'small' },
-	'inboxInstances': { uniqueIncrement: true, range: 'small' },
-	'stalled': { uniqueIncrement: true, range: 'small' },
-	'sub': { accumulate: true, range: 'small' },
-	'pub': { accumulate: true, range: 'small' },
-	'pubsub': { accumulate: true, range: 'small' },
-	'subActive': { accumulate: true, range: 'small' },
-	'pubActive': { accumulate: true, range: 'small' },
-} as const;
-
-export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/services/chart/charts/entities/hashtag.ts b/packages/backend/src/services/chart/charts/entities/hashtag.ts
deleted file mode 100644
index 4d04039047..0000000000
--- a/packages/backend/src/services/chart/charts/entities/hashtag.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import Chart from '../../core.js';
-
-export const name = 'hashtag';
-
-export const schema = {
-	'local.users': { uniqueIncrement: true },
-	'remote.users': { uniqueIncrement: true },
-} as const;
-
-export const entity = Chart.schemaToEntity(name, schema, true);
diff --git a/packages/backend/src/services/chart/charts/entities/instance.ts b/packages/backend/src/services/chart/charts/entities/instance.ts
deleted file mode 100644
index 06962120e2..0000000000
--- a/packages/backend/src/services/chart/charts/entities/instance.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import Chart from '../../core.js';
-
-export const name = 'instance';
-
-export const schema = {
-	'requests.failed': { range: 'small' },
-	'requests.succeeded': { range: 'small' },
-	'requests.received': { range: 'small' },
-	'notes.total': { accumulate: true },
-	'notes.inc': {},
-	'notes.dec': {},
-	'notes.diffs.normal': {},
-	'notes.diffs.reply': {},
-	'notes.diffs.renote': {},
-	'notes.diffs.withFile': {},
-	'users.total': { accumulate: true },
-	'users.inc': { range: 'small' },
-	'users.dec': { range: 'small' },
-	'following.total': { accumulate: true },
-	'following.inc': { range: 'small' },
-	'following.dec': { range: 'small' },
-	'followers.total': { accumulate: true },
-	'followers.inc': { range: 'small' },
-	'followers.dec': { range: 'small' },
-	'drive.totalFiles': { accumulate: true },
-	'drive.incFiles': {},
-	'drive.decFiles': {},
-	'drive.incUsage': {}, // in kilobyte
-	'drive.decUsage': {}, // in kilobyte
-} as const;
-
-export const entity = Chart.schemaToEntity(name, schema, true);
diff --git a/packages/backend/src/services/chart/charts/entities/notes.ts b/packages/backend/src/services/chart/charts/entities/notes.ts
deleted file mode 100644
index 9387dbfb2c..0000000000
--- a/packages/backend/src/services/chart/charts/entities/notes.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import Chart from '../../core.js';
-
-export const name = 'notes';
-
-export const schema = {
-	'local.total': { accumulate: true },
-	'local.inc': {},
-	'local.dec': {},
-	'local.diffs.normal': {},
-	'local.diffs.reply': {},
-	'local.diffs.renote': {},
-	'local.diffs.withFile': {},
-	'remote.total': { accumulate: true },
-	'remote.inc': {},
-	'remote.dec': {},
-	'remote.diffs.normal': {},
-	'remote.diffs.reply': {},
-	'remote.diffs.renote': {},
-	'remote.diffs.withFile': {},
-} as const;
-
-export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/services/chart/charts/entities/per-user-drive.ts b/packages/backend/src/services/chart/charts/entities/per-user-drive.ts
deleted file mode 100644
index 6111640ea0..0000000000
--- a/packages/backend/src/services/chart/charts/entities/per-user-drive.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import Chart from '../../core.js';
-
-export const name = 'perUserDrive';
-
-export const schema = {
-	'totalCount': { accumulate: true },
-	'totalSize': { accumulate: true }, // in kilobyte
-	'incCount': { range: 'small' },
-	'incSize': {}, // in kilobyte
-	'decCount': { range: 'small' },
-	'decSize': {}, // in kilobyte
-} as const;
-
-export const entity = Chart.schemaToEntity(name, schema, true);
diff --git a/packages/backend/src/services/chart/charts/entities/per-user-following.ts b/packages/backend/src/services/chart/charts/entities/per-user-following.ts
deleted file mode 100644
index 4118daa474..0000000000
--- a/packages/backend/src/services/chart/charts/entities/per-user-following.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import Chart from '../../core.js';
-
-export const name = 'perUserFollowing';
-
-export const schema = {
-	'local.followings.total': { accumulate: true },
-	'local.followings.inc': { range: 'small' },
-	'local.followings.dec': { range: 'small' },
-	'local.followers.total': { accumulate: true },
-	'local.followers.inc': { range: 'small' },
-	'local.followers.dec': { range: 'small' },
-	'remote.followings.total': { accumulate: true },
-	'remote.followings.inc': { range: 'small' },
-	'remote.followings.dec': { range: 'small' },
-	'remote.followers.total': { accumulate: true },
-	'remote.followers.inc': { range: 'small' },
-	'remote.followers.dec': { range: 'small' },
-} as const;
-
-export const entity = Chart.schemaToEntity(name, schema, true);
diff --git a/packages/backend/src/services/chart/charts/entities/per-user-notes.ts b/packages/backend/src/services/chart/charts/entities/per-user-notes.ts
deleted file mode 100644
index c1fa174452..0000000000
--- a/packages/backend/src/services/chart/charts/entities/per-user-notes.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import Chart from '../../core.js';
-
-export const name = 'perUserNotes';
-
-export const schema = {
-	'total': { accumulate: true },
-	'inc': { range: 'small' },
-	'dec': { range: 'small' },
-	'diffs.normal': { range: 'small' },
-	'diffs.reply': { range: 'small' },
-	'diffs.renote': { range: 'small' },
-	'diffs.withFile': { range: 'small' },
-} as const;
-
-export const entity = Chart.schemaToEntity(name, schema, true);
diff --git a/packages/backend/src/services/chart/charts/entities/per-user-reactions.ts b/packages/backend/src/services/chart/charts/entities/per-user-reactions.ts
deleted file mode 100644
index 5e1a6c7b30..0000000000
--- a/packages/backend/src/services/chart/charts/entities/per-user-reactions.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import Chart from '../../core.js';
-
-export const name = 'perUserReaction';
-
-export const schema = {
-	'local.count': { range: 'small' },
-	'remote.count': { range: 'small' },
-} as const;
-
-export const entity = Chart.schemaToEntity(name, schema, true);
diff --git a/packages/backend/src/services/chart/charts/entities/test-grouped.ts b/packages/backend/src/services/chart/charts/entities/test-grouped.ts
deleted file mode 100644
index 66b6e8e864..0000000000
--- a/packages/backend/src/services/chart/charts/entities/test-grouped.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import Chart from '../../core.js';
-
-export const name = 'testGrouped';
-
-export const schema = {
-	'foo.total': { accumulate: true },
-	'foo.inc': {},
-	'foo.dec': {},
-} as const;
-
-export const entity = Chart.schemaToEntity(name, schema, true);
diff --git a/packages/backend/src/services/chart/charts/entities/test-intersection.ts b/packages/backend/src/services/chart/charts/entities/test-intersection.ts
deleted file mode 100644
index a3bdcb367f..0000000000
--- a/packages/backend/src/services/chart/charts/entities/test-intersection.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import Chart from '../../core.js';
-
-export const name = 'testIntersection';
-
-export const schema = {
-	'a': { uniqueIncrement: true },
-	'b': { uniqueIncrement: true },
-	'aAndB': { intersection: ['a', 'b'] },
-} as const;
-
-export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/services/chart/charts/entities/test-unique.ts b/packages/backend/src/services/chart/charts/entities/test-unique.ts
deleted file mode 100644
index b2cfb71b05..0000000000
--- a/packages/backend/src/services/chart/charts/entities/test-unique.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import Chart from '../../core.js';
-
-export const name = 'testUnique';
-
-export const schema = {
-	'foo': { uniqueIncrement: true },
-} as const;
-
-export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/services/chart/charts/entities/test.ts b/packages/backend/src/services/chart/charts/entities/test.ts
deleted file mode 100644
index 7cba21e16a..0000000000
--- a/packages/backend/src/services/chart/charts/entities/test.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import Chart from '../../core.js';
-
-export const name = 'test';
-
-export const schema = {
-	'foo.total': { accumulate: true },
-	'foo.inc': {},
-	'foo.dec': {},
-} as const;
-
-export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/services/chart/charts/entities/users.ts b/packages/backend/src/services/chart/charts/entities/users.ts
deleted file mode 100644
index c0b83094ae..0000000000
--- a/packages/backend/src/services/chart/charts/entities/users.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import Chart from '../../core.js';
-
-export const name = 'users';
-
-export const schema = {
-	'local.total': { accumulate: true },
-	'local.inc': { range: 'small' },
-	'local.dec': { range: 'small' },
-	'remote.total': { accumulate: true },
-	'remote.inc': { range: 'small' },
-	'remote.dec': { range: 'small' },
-} as const;
-
-export const entity = Chart.schemaToEntity(name, schema);
diff --git a/packages/backend/src/services/chart/charts/federation.ts b/packages/backend/src/services/chart/charts/federation.ts
deleted file mode 100644
index 10221ee1e3..0000000000
--- a/packages/backend/src/services/chart/charts/federation.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import Chart, { KVs } from '../core.js';
-import { Followings, Instances } from '@/models/index.js';
-import { name, schema } from './entities/federation.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-
-/**
- * フェデレーションに関するチャート
- */
-// eslint-disable-next-line import/no-default-export
-export default class FederationChart extends Chart<typeof schema> {
-	constructor() {
-		super(name, schema);
-	}
-
-	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
-		return {
-		};
-	}
-
-	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
-		const meta = await fetchMeta();
-
-		const suspendedInstancesQuery = Instances.createQueryBuilder('instance')
-			.select('instance.host')
-			.where('instance.isSuspended = true');
-
-		const pubsubSubQuery = Followings.createQueryBuilder('f')
-			.select('f.followerHost')
-			.where('f.followerHost IS NOT NULL');
-
-		const subInstancesQuery = Followings.createQueryBuilder('f')
-			.select('f.followeeHost')
-			.where('f.followeeHost IS NOT NULL');
-
-		const pubInstancesQuery = Followings.createQueryBuilder('f')
-			.select('f.followerHost')
-			.where('f.followerHost IS NOT NULL');
-
-		const [sub, pub, pubsub, subActive, pubActive] = await Promise.all([
-			Followings.createQueryBuilder('following')
-				.select('COUNT(DISTINCT following.followeeHost)')
-				.where('following.followeeHost IS NOT NULL')
-				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : `following.followeeHost NOT IN (:...blocked)`, { blocked: meta.blockedHosts })
-				.andWhere(`following.followeeHost NOT IN (${ suspendedInstancesQuery.getQuery() })`)
-				.getRawOne()
-				.then(x => parseInt(x.count, 10)),
-			Followings.createQueryBuilder('following')
-				.select('COUNT(DISTINCT following.followerHost)')
-				.where('following.followerHost IS NOT NULL')
-				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : `following.followerHost NOT IN (:...blocked)`, { blocked: meta.blockedHosts })
-				.andWhere(`following.followerHost NOT IN (${ suspendedInstancesQuery.getQuery() })`)
-				.getRawOne()
-				.then(x => parseInt(x.count, 10)),
-			Followings.createQueryBuilder('following')
-				.select('COUNT(DISTINCT following.followeeHost)')
-				.where('following.followeeHost IS NOT NULL')
-				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : `following.followeeHost NOT IN (:...blocked)`, { blocked: meta.blockedHosts })
-				.andWhere(`following.followeeHost NOT IN (${ suspendedInstancesQuery.getQuery() })`)
-				.andWhere(`following.followeeHost IN (${ pubsubSubQuery.getQuery() })`)
-				.setParameters(pubsubSubQuery.getParameters())
-				.getRawOne()
-				.then(x => parseInt(x.count, 10)),
-			Instances.createQueryBuilder('instance')
-				.select('COUNT(instance.id)')
-				.where(`instance.host IN (${ subInstancesQuery.getQuery() })`)
-				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : `instance.host NOT IN (:...blocked)`, { blocked: meta.blockedHosts })
-				.andWhere(`instance.isSuspended = false`)
-				.andWhere(`instance.lastCommunicatedAt > :gt`, { gt: new Date(Date.now() - (1000 * 60 * 60 * 24 * 30)) })
-				.getRawOne()
-				.then(x => parseInt(x.count, 10)),
-			Instances.createQueryBuilder('instance')
-				.select('COUNT(instance.id)')
-				.where(`instance.host IN (${ pubInstancesQuery.getQuery() })`)
-				.andWhere(meta.blockedHosts.length === 0 ? '1=1' : `instance.host NOT IN (:...blocked)`, { blocked: meta.blockedHosts })
-				.andWhere(`instance.isSuspended = false`)
-				.andWhere(`instance.lastCommunicatedAt > :gt`, { gt: new Date(Date.now() - (1000 * 60 * 60 * 24 * 30)) })
-				.getRawOne()
-				.then(x => parseInt(x.count, 10)),
-		]);
-
-		return {
-			'sub': sub,
-			'pub': pub,
-			'pubsub': pubsub,
-			'subActive': subActive,
-			'pubActive': pubActive,
-		};
-	}
-
-	public async deliverd(host: string, succeeded: boolean): Promise<void> {
-		await this.commit(succeeded ? {
-			'deliveredInstances': [host],
-		} : {
-			'stalled': [host],
-		});
-	}
-
-	public async inbox(host: string): Promise<void> {
-		await this.commit({
-			'inboxInstances': [host],
-		});
-	}
-}
diff --git a/packages/backend/src/services/chart/charts/hashtag.ts b/packages/backend/src/services/chart/charts/hashtag.ts
deleted file mode 100644
index 31f7fa95dc..0000000000
--- a/packages/backend/src/services/chart/charts/hashtag.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import Chart, { KVs } from '../core.js';
-import { User } from '@/models/entities/user.js';
-import { Users } from '@/models/index.js';
-import { name, schema } from './entities/hashtag.js';
-
-/**
- * ハッシュタグに関するチャート
- */
-// eslint-disable-next-line import/no-default-export
-export default class HashtagChart extends Chart<typeof schema> {
-	constructor() {
-		super(name, schema, true);
-	}
-
-	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	public async update(hashtag: string, user: { id: User['id'], host: User['host'] }): Promise<void> {
-		await this.commit({
-			'local.users': Users.isLocalUser(user) ? [user.id] : [],
-			'remote.users': Users.isLocalUser(user) ? [] : [user.id],
-		}, hashtag);
-	}
-}
diff --git a/packages/backend/src/services/chart/charts/instance.ts b/packages/backend/src/services/chart/charts/instance.ts
deleted file mode 100644
index fe29ba5228..0000000000
--- a/packages/backend/src/services/chart/charts/instance.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import Chart, { KVs } from '../core.js';
-import { DriveFiles, Followings, Users, Notes } from '@/models/index.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { Note } from '@/models/entities/note.js';
-import { toPuny } from '@/misc/convert-host.js';
-import { name, schema } from './entities/instance.js';
-
-/**
- * インスタンスごとのチャート
- */
-// eslint-disable-next-line import/no-default-export
-export default class InstanceChart extends Chart<typeof schema> {
-	constructor() {
-		super(name, schema, true);
-	}
-
-	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {
-		const [
-			notesCount,
-			usersCount,
-			followingCount,
-			followersCount,
-			driveFiles,
-		] = await Promise.all([
-			Notes.countBy({ userHost: group }),
-			Users.countBy({ host: group }),
-			Followings.countBy({ followerHost: group }),
-			Followings.countBy({ followeeHost: group }),
-			DriveFiles.countBy({ userHost: group }),
-		]);
-
-		return {
-			'notes.total': notesCount,
-			'users.total': usersCount,
-			'following.total': followingCount,
-			'followers.total': followersCount,
-			'drive.totalFiles': driveFiles,
-		};
-	}
-
-	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	public async requestReceived(host: string): Promise<void> {
-		await this.commit({
-			'requests.received': 1,
-		}, toPuny(host));
-	}
-
-	public async requestSent(host: string, isSucceeded: boolean): Promise<void> {
-		await this.commit({
-			'requests.succeeded': isSucceeded ? 1 : 0,
-			'requests.failed': isSucceeded ? 0 : 1,
-		}, toPuny(host));
-	}
-
-	public async newUser(host: string): Promise<void> {
-		await this.commit({
-			'users.total': 1,
-			'users.inc': 1,
-		}, toPuny(host));
-	}
-
-	public async updateNote(host: string, note: Note, isAdditional: boolean): Promise<void> {
-		await this.commit({
-			'notes.total': isAdditional ? 1 : -1,
-			'notes.inc': isAdditional ? 1 : 0,
-			'notes.dec': isAdditional ? 0 : 1,
-			'notes.diffs.normal': note.replyId == null && note.renoteId == null ? (isAdditional ? 1 : -1) : 0,
-			'notes.diffs.renote': note.renoteId != null ? (isAdditional ? 1 : -1) : 0,
-			'notes.diffs.reply': note.replyId != null ? (isAdditional ? 1 : -1) : 0,
-			'notes.diffs.withFile': note.fileIds.length > 0 ? (isAdditional ? 1 : -1) : 0,
-		}, toPuny(host));
-	}
-
-	public async updateFollowing(host: string, isAdditional: boolean): Promise<void> {
-		await this.commit({
-			'following.total': isAdditional ? 1 : -1,
-			'following.inc': isAdditional ? 1 : 0,
-			'following.dec': isAdditional ? 0 : 1,
-		}, toPuny(host));
-	}
-
-	public async updateFollowers(host: string, isAdditional: boolean): Promise<void> {
-		await this.commit({
-			'followers.total': isAdditional ? 1 : -1,
-			'followers.inc': isAdditional ? 1 : 0,
-			'followers.dec': isAdditional ? 0 : 1,
-		}, toPuny(host));
-	}
-
-	public async updateDrive(file: DriveFile, isAdditional: boolean): Promise<void> {
-		const fileSizeKb = file.size / 1000;
-		await this.commit({
-			'drive.totalFiles': isAdditional ? 1 : -1,
-			'drive.incFiles': isAdditional ? 1 : 0,
-			'drive.incUsage': isAdditional ? fileSizeKb : 0,
-			'drive.decFiles': isAdditional ? 1 : 0,
-			'drive.decUsage': isAdditional ? fileSizeKb : 0,
-		}, file.userHost);
-	}
-}
diff --git a/packages/backend/src/services/chart/charts/notes.ts b/packages/backend/src/services/chart/charts/notes.ts
deleted file mode 100644
index bb14b62f3c..0000000000
--- a/packages/backend/src/services/chart/charts/notes.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import Chart, { KVs } from '../core.js';
-import { Notes } from '@/models/index.js';
-import { Not, IsNull } from 'typeorm';
-import { Note } from '@/models/entities/note.js';
-import { name, schema } from './entities/notes.js';
-
-/**
- * ノートに関するチャート
- */
-// eslint-disable-next-line import/no-default-export
-export default class NotesChart extends Chart<typeof schema> {
-	constructor() {
-		super(name, schema);
-	}
-
-	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
-		const [localCount, remoteCount] = await Promise.all([
-			Notes.countBy({ userHost: IsNull() }),
-			Notes.countBy({ userHost: Not(IsNull()) }),
-		]);
-
-		return {
-			'local.total': localCount,
-			'remote.total': remoteCount,
-		};
-	}
-
-	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	public async update(note: Note, isAdditional: boolean): Promise<void> {
-		const prefix = note.userHost === null ? 'local' : 'remote';
-
-		await this.commit({
-			[`${prefix}.total`]: isAdditional ? 1 : -1,
-			[`${prefix}.inc`]: isAdditional ? 1 : 0,
-			[`${prefix}.dec`]: isAdditional ? 0 : 1,
-			[`${prefix}.diffs.normal`]: note.replyId == null && note.renoteId == null ? (isAdditional ? 1 : -1) : 0,
-			[`${prefix}.diffs.renote`]: note.renoteId != null ? (isAdditional ? 1 : -1) : 0,
-			[`${prefix}.diffs.reply`]: note.replyId != null ? (isAdditional ? 1 : -1) : 0,
-			[`${prefix}.diffs.withFile`]: note.fileIds.length > 0 ? (isAdditional ? 1 : -1) : 0,
-		});
-	}
-}
diff --git a/packages/backend/src/services/chart/charts/per-user-drive.ts b/packages/backend/src/services/chart/charts/per-user-drive.ts
deleted file mode 100644
index 5f75dc6887..0000000000
--- a/packages/backend/src/services/chart/charts/per-user-drive.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import Chart, { KVs } from '../core.js';
-import { DriveFiles } from '@/models/index.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { name, schema } from './entities/per-user-drive.js';
-
-/**
- * ユーザーごとのドライブに関するチャート
- */
-// eslint-disable-next-line import/no-default-export
-export default class PerUserDriveChart extends Chart<typeof schema> {
-	constructor() {
-		super(name, schema, true);
-	}
-
-	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {
-		const [count, size] = await Promise.all([
-			DriveFiles.countBy({ userId: group }),
-			DriveFiles.calcDriveUsageOf(group),
-		]);
-
-		return {
-			'totalCount': count,
-			'totalSize': size,
-		};
-	}
-
-	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	public async update(file: DriveFile, isAdditional: boolean): Promise<void> {
-		const fileSizeKb = file.size / 1000;
-		await this.commit({
-			'totalCount': isAdditional ? 1 : -1,
-			'totalSize': isAdditional ? fileSizeKb : -fileSizeKb,
-			'incCount': isAdditional ? 1 : 0,
-			'incSize': isAdditional ? fileSizeKb : 0,
-			'decCount': isAdditional ? 0 : 1,
-			'decSize': isAdditional ? 0 : fileSizeKb,
-		}, file.userId);
-	}
-}
diff --git a/packages/backend/src/services/chart/charts/per-user-following.ts b/packages/backend/src/services/chart/charts/per-user-following.ts
deleted file mode 100644
index 02b149f52a..0000000000
--- a/packages/backend/src/services/chart/charts/per-user-following.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import Chart, { KVs } from '../core.js';
-import { Followings, Users } from '@/models/index.js';
-import { Not, IsNull } from 'typeorm';
-import { User } from '@/models/entities/user.js';
-import { name, schema } from './entities/per-user-following.js';
-
-/**
- * ユーザーごとのフォローに関するチャート
- */
-// eslint-disable-next-line import/no-default-export
-export default class PerUserFollowingChart extends Chart<typeof schema> {
-	constructor() {
-		super(name, schema, true);
-	}
-
-	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {
-		const [
-			localFollowingsCount,
-			localFollowersCount,
-			remoteFollowingsCount,
-			remoteFollowersCount,
-		] = await Promise.all([
-			Followings.countBy({ followerId: group, followeeHost: IsNull() }),
-			Followings.countBy({ followeeId: group, followerHost: IsNull() }),
-			Followings.countBy({ followerId: group, followeeHost: Not(IsNull()) }),
-			Followings.countBy({ followeeId: group, followerHost: Not(IsNull()) }),
-		]);
-
-		return {
-			'local.followings.total': localFollowingsCount,
-			'local.followers.total': localFollowersCount,
-			'remote.followings.total': remoteFollowingsCount,
-			'remote.followers.total': remoteFollowersCount,
-		};
-	}
-
-	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	public async update(follower: { id: User['id']; host: User['host']; }, followee: { id: User['id']; host: User['host']; }, isFollow: boolean): Promise<void> {
-		const prefixFollower = Users.isLocalUser(follower) ? 'local' : 'remote';
-		const prefixFollowee = Users.isLocalUser(followee) ? 'local' : 'remote';
-
-		this.commit({
-			[`${prefixFollower}.followings.total`]: isFollow ? 1 : -1,
-			[`${prefixFollower}.followings.inc`]: isFollow ? 1 : 0,
-			[`${prefixFollower}.followings.dec`]: isFollow ? 0 : 1,
-		}, follower.id);
-		this.commit({
-			[`${prefixFollowee}.followers.total`]: isFollow ? 1 : -1,
-			[`${prefixFollowee}.followers.inc`]: isFollow ? 1 : 0,
-			[`${prefixFollowee}.followers.dec`]: isFollow ? 0 : 1,
-		}, followee.id);
-	}
-}
diff --git a/packages/backend/src/services/chart/charts/per-user-notes.ts b/packages/backend/src/services/chart/charts/per-user-notes.ts
deleted file mode 100644
index b9191dd088..0000000000
--- a/packages/backend/src/services/chart/charts/per-user-notes.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import Chart, { KVs } from '../core.js';
-import { User } from '@/models/entities/user.js';
-import { Notes } from '@/models/index.js';
-import { Note } from '@/models/entities/note.js';
-import { name, schema } from './entities/per-user-notes.js';
-
-/**
- * ユーザーごとのノートに関するチャート
- */
-// eslint-disable-next-line import/no-default-export
-export default class PerUserNotesChart extends Chart<typeof schema> {
-	constructor() {
-		super(name, schema, true);
-	}
-
-	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {
-		const [count] = await Promise.all([
-			Notes.countBy({ userId: group }),
-		]);
-
-		return {
-			total: count,
-		};
-	}
-
-	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	public async update(user: { id: User['id'] }, note: Note, isAdditional: boolean): Promise<void> {
-		await this.commit({
-			'total': isAdditional ? 1 : -1,
-			'inc': isAdditional ? 1 : 0,
-			'dec': isAdditional ? 0 : 1,
-			'diffs.normal': note.replyId == null && note.renoteId == null ? (isAdditional ? 1 : -1) : 0,
-			'diffs.renote': note.renoteId != null ? (isAdditional ? 1 : -1) : 0,
-			'diffs.reply': note.replyId != null ? (isAdditional ? 1 : -1) : 0,
-			'diffs.withFile': note.fileIds.length > 0 ? (isAdditional ? 1 : -1) : 0,
-		}, user.id);
-	}
-}
diff --git a/packages/backend/src/services/chart/charts/per-user-reactions.ts b/packages/backend/src/services/chart/charts/per-user-reactions.ts
deleted file mode 100644
index 3a830e118c..0000000000
--- a/packages/backend/src/services/chart/charts/per-user-reactions.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import Chart, { KVs } from '../core.js';
-import { User } from '@/models/entities/user.js';
-import { Note } from '@/models/entities/note.js';
-import { Users } from '@/models/index.js';
-import { name, schema } from './entities/per-user-reactions.js';
-
-/**
- * ユーザーごとのリアクションに関するチャート
- */
-// eslint-disable-next-line import/no-default-export
-export default class PerUserReactionsChart extends Chart<typeof schema> {
-	constructor() {
-		super(name, schema, true);
-	}
-
-	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	public async update(user: { id: User['id'], host: User['host'] }, note: Note): Promise<void> {
-		const prefix = Users.isLocalUser(user) ? 'local' : 'remote';
-		this.commit({
-			[`${prefix}.count`]: 1,
-		}, note.userId);
-	}
-}
diff --git a/packages/backend/src/services/chart/charts/test-grouped.ts b/packages/backend/src/services/chart/charts/test-grouped.ts
deleted file mode 100644
index d01c9fcbd6..0000000000
--- a/packages/backend/src/services/chart/charts/test-grouped.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import Chart, { KVs } from '../core.js';
-import { name, schema } from './entities/test-grouped.js';
-
-/**
- * For testing
- */
-// eslint-disable-next-line import/no-default-export
-export default class TestGroupedChart extends Chart<typeof schema> {
-	private total = {} as Record<string, number>;
-
-	constructor() {
-		super(name, schema, true);
-	}
-
-	protected async tickMajor(group: string): Promise<Partial<KVs<typeof schema>>> {
-		return {
-			'foo.total': this.total[group],
-		};
-	}
-
-	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	public async increment(group: string): Promise<void> {
-		if (this.total[group] == null) this.total[group] = 0;
-
-		this.total[group]++;
-
-		await this.commit({
-			'foo.total': 1,
-			'foo.inc': 1,
-		}, group);
-	}
-}
diff --git a/packages/backend/src/services/chart/charts/test-intersection.ts b/packages/backend/src/services/chart/charts/test-intersection.ts
deleted file mode 100644
index 88b5a715c1..0000000000
--- a/packages/backend/src/services/chart/charts/test-intersection.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import Chart, { KVs } from '../core.js';
-import { name, schema } from './entities/test-intersection.js';
-
-/**
- * For testing
- */
-// eslint-disable-next-line import/no-default-export
-export default class TestIntersectionChart extends Chart<typeof schema> {
-	constructor() {
-		super(name, schema);
-	}
-
-	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	public async addA(key: string): Promise<void> {
-		await this.commit({
-			a: [key],
-		});
-	}
-
-	public async addB(key: string): Promise<void> {
-		await this.commit({
-			b: [key],
-		});
-	}
-}
diff --git a/packages/backend/src/services/chart/charts/test-unique.ts b/packages/backend/src/services/chart/charts/test-unique.ts
deleted file mode 100644
index d714f1d40c..0000000000
--- a/packages/backend/src/services/chart/charts/test-unique.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import Chart, { KVs } from '../core.js';
-import { name, schema } from './entities/test-unique.js';
-
-/**
- * For testing
- */
-// eslint-disable-next-line import/no-default-export
-export default class TestUniqueChart extends Chart<typeof schema> {
-	constructor() {
-		super(name, schema);
-	}
-
-	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	public async uniqueIncrement(key: string): Promise<void> {
-		await this.commit({
-			foo: [key],
-		});
-	}
-}
diff --git a/packages/backend/src/services/chart/charts/test.ts b/packages/backend/src/services/chart/charts/test.ts
deleted file mode 100644
index adb2b18c87..0000000000
--- a/packages/backend/src/services/chart/charts/test.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import Chart, { KVs } from '../core.js';
-import { name, schema } from './entities/test.js';
-
-/**
- * For testing
- */
-// eslint-disable-next-line import/no-default-export
-export default class TestChart extends Chart<typeof schema> {
-	public total = 0; // publicにするのはテストのため
-
-	constructor() {
-		super(name, schema);
-	}
-
-	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
-		return {
-			'foo.total': this.total,
-		};
-	}
-
-	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	public async increment(): Promise<void> {
-		this.total++;
-
-		await this.commit({
-			'foo.total': 1,
-			'foo.inc': 1,
-		});
-	}
-
-	public async decrement(): Promise<void> {
-		this.total--;
-
-		await this.commit({
-			'foo.total': -1,
-			'foo.dec': 1,
-		});
-	}
-}
diff --git a/packages/backend/src/services/chart/charts/users.ts b/packages/backend/src/services/chart/charts/users.ts
deleted file mode 100644
index acb16ead87..0000000000
--- a/packages/backend/src/services/chart/charts/users.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import Chart, { KVs } from '../core.js';
-import { Users } from '@/models/index.js';
-import { Not, IsNull } from 'typeorm';
-import { User } from '@/models/entities/user.js';
-import { name, schema } from './entities/users.js';
-
-/**
- * ユーザー数に関するチャート
- */
-// eslint-disable-next-line import/no-default-export
-export default class UsersChart extends Chart<typeof schema> {
-	constructor() {
-		super(name, schema);
-	}
-
-	protected async tickMajor(): Promise<Partial<KVs<typeof schema>>> {
-		const [localCount, remoteCount] = await Promise.all([
-			Users.countBy({ host: IsNull() }),
-			Users.countBy({ host: Not(IsNull()) }),
-		]);
-
-		return {
-			'local.total': localCount,
-			'remote.total': remoteCount,
-		};
-	}
-
-	protected async tickMinor(): Promise<Partial<KVs<typeof schema>>> {
-		return {};
-	}
-
-	public async update(user: { id: User['id'], host: User['host'] }, isAdditional: boolean): Promise<void> {
-		const prefix = Users.isLocalUser(user) ? 'local' : 'remote';
-
-		await this.commit({
-			[`${prefix}.total`]: isAdditional ? 1 : -1,
-			[`${prefix}.inc`]: isAdditional ? 1 : 0,
-			[`${prefix}.dec`]: isAdditional ? 0 : 1,
-		});
-	}
-}
diff --git a/packages/backend/src/services/chart/core.ts b/packages/backend/src/services/chart/core.ts
deleted file mode 100644
index 2960bac8f7..0000000000
--- a/packages/backend/src/services/chart/core.ts
+++ /dev/null
@@ -1,677 +0,0 @@
-/**
- * チャートエンジン
- *
- * Tests located in test/chart
- */
-
-import * as nestedProperty from 'nested-property';
-import Logger from '../logger.js';
-import { EntitySchema, Repository, LessThan, Between } from 'typeorm';
-import { dateUTC, isTimeSame, isTimeBefore, subtractTime, addTime } from '@/prelude/time.js';
-import { getChartInsertLock } from '@/misc/app-lock.js';
-import { db } from '@/db/postgre.js';
-
-const logger = new Logger('chart', 'white', process.env.NODE_ENV !== 'test');
-
-const columnPrefix = '___' as const;
-const uniqueTempColumnPrefix = 'unique_temp___' as const;
-const columnDot = '_' as const;
-
-type Schema = Record<string, {
-	uniqueIncrement?: boolean;
-
-	intersection?: string[] | ReadonlyArray<string>;
-
-	range?: 'big' | 'small' | 'medium';
-
-	// previousな値を引き継ぐかどうか
-	accumulate?: boolean;
-}>;
-
-type KeyToColumnName<T extends string> = T extends `${infer R1}.${infer R2}` ? `${R1}${typeof columnDot}${KeyToColumnName<R2>}` : T;
-
-type Columns<S extends Schema> = {
-	[K in keyof S as `${typeof columnPrefix}${KeyToColumnName<string & K>}`]: number;
-};
-
-type TempColumnsForUnique<S extends Schema> = {
-	[K in keyof S as `${typeof uniqueTempColumnPrefix}${KeyToColumnName<string & K>}`]: S[K]['uniqueIncrement'] extends true ? string[] : never;
-};
-
-type RawRecord<S extends Schema> = {
-	id: number;
-
-	/**
-	 * 集計のグループ
-	 */
-	group?: string | null;
-
-	/**
-	 * 集計日時のUnixタイムスタンプ(秒)
-	 */
-	date: number;
-} & TempColumnsForUnique<S> & Columns<S>;
-
-const camelToSnake = (str: string): string => {
-	return str.replace(/([A-Z])/g, s => '_' + s.charAt(0).toLowerCase());
-};
-
-const removeDuplicates = (array: any[]) => Array.from(new Set(array));
-
-type Commit<S extends Schema> = {
-	[K in keyof S]?: S[K]['uniqueIncrement'] extends true ? string[] : number;
-};
-
-export type KVs<S extends Schema> = {
-	[K in keyof S]: number;
-};
-
-type ChartResult<T extends Schema> = {
-	[P in keyof T]: number[];
-};
-
-type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (x: infer R) => any ? R : never;
-
-type UnflattenSingleton<K extends string, V> = K extends `${infer A}.${infer B}`
-	? { [_ in A]: UnflattenSingleton<B, V>; }
-	: { [_ in K]: V; };
-
-type Unflatten<T extends Record<string, any>> = UnionToIntersection<
-	{
-		[K in Extract<keyof T, string>]: UnflattenSingleton<K, T[K]>;
-	}[Extract<keyof T, string>]
->;
-
-type ToJsonSchema<S> = {
-	type: 'object';
-	properties: {
-		[K in keyof S]: S[K] extends number[] ? { type: 'array'; items: { type: 'number'; }; } : ToJsonSchema<S[K]>;
-	},
-	required: (keyof S)[];
-};
-
-export function getJsonSchema<S extends Schema>(schema: S): ToJsonSchema<Unflatten<ChartResult<S>>> {
-	const jsonSchema = {
-		type: 'object',
-		properties: {} as Record<string, unknown>,
-		required: [],
-	};
-
-	for (const k in schema) {
-		jsonSchema.properties[k] = {
-			type: 'array',
-			items: { type: 'number' },
-		};
-	}
-
-	return jsonSchema as ToJsonSchema<Unflatten<ChartResult<S>>>;
-}
-
-/**
- * 様々なチャートの管理を司るクラス
- */
-// eslint-disable-next-line import/no-default-export
-export default abstract class Chart<T extends Schema> {
-	public schema: T;
-
-	private name: string;
-	private buffer: {
-		diff: Commit<T>;
-		group: string | null;
-	}[] = [];
-	// ↓にしたいけどfindOneとかで型エラーになる
-	//private repositoryForHour: Repository<RawRecord<T>>;
-	//private repositoryForDay: Repository<RawRecord<T>>;
-	private repositoryForHour: Repository<{ id: number; group?: string | null; date: number; }>;
-	private repositoryForDay: Repository<{ id: number; group?: string | null; date: number; }>;
-
-	/**
-	 * 1日に一回程度実行されれば良いような計算処理を入れる(主にCASCADE削除などアプリケーション側で感知できない変動によるズレの修正用)
-	 */
-	protected abstract tickMajor(group: string | null): Promise<Partial<KVs<T>>>;
-
-	/**
-	 * 少なくとも最小スパン内に1回は実行されて欲しい計算処理を入れる
-	 */
-	protected abstract tickMinor(group: string | null): Promise<Partial<KVs<T>>>;
-
-	private static convertSchemaToColumnDefinitions(schema: Schema): Record<string, { type: string; array?: boolean; default?: any; }> {
-		const columns = {} as Record<string, { type: string; array?: boolean; default?: any; }>;
-		for (const [k, v] of Object.entries(schema)) {
-			const name = k.replaceAll('.', columnDot);
-			const type = v.range === 'big' ? 'bigint' : v.range === 'small' ? 'smallint' : 'integer';
-			if (v.uniqueIncrement) {
-				columns[uniqueTempColumnPrefix + name] = {
-					type: 'varchar',
-					array: true,
-					default: '{}',
-				};
-				columns[columnPrefix + name] = {
-					type,
-					default: 0,
-				};
-			} else {
-				columns[columnPrefix + name] = {
-					type,
-					default: 0,
-				};
-			}
-		}
-		return columns;
-	}
-
-	private static dateToTimestamp(x: Date): number {
-		return Math.floor(x.getTime() / 1000);
-	}
-
-	private static parseDate(date: Date): [number, number, number, number, number, number, number] {
-		const y = date.getUTCFullYear();
-		const m = date.getUTCMonth();
-		const d = date.getUTCDate();
-		const h = date.getUTCHours();
-		const _m = date.getUTCMinutes();
-		const _s = date.getUTCSeconds();
-		const _ms = date.getUTCMilliseconds();
-
-		return [y, m, d, h, _m, _s, _ms];
-	}
-
-	private static getCurrentDate() {
-		return Chart.parseDate(new Date());
-	}
-
-	public static schemaToEntity(name: string, schema: Schema, grouped = false): {
-		hour: EntitySchema,
-		day: EntitySchema,
-	} {
-		const createEntity = (span: 'hour' | 'day'): EntitySchema => new EntitySchema({
-			name:
-				span === 'hour' ? `__chart__${camelToSnake(name)}` :
-				span === 'day' ? `__chart_day__${camelToSnake(name)}` :
-				new Error('not happen') as never,
-			columns: {
-				id: {
-					type: 'integer',
-					primary: true,
-					generated: true,
-				},
-				date: {
-					type: 'integer',
-				},
-				...(grouped ? {
-					group: {
-						type: 'varchar',
-						length: 128,
-					},
-				} : {}),
-				...Chart.convertSchemaToColumnDefinitions(schema),
-			},
-			indices: [{
-				columns: grouped ? ['date', 'group'] : ['date'],
-				unique: true,
-			}],
-			uniques: [{
-				columns: grouped ? ['date', 'group'] : ['date'],
-			}],
-			relations: {
-				/* TODO
-					group: {
-						target: () => Foo,
-						type: 'many-to-one',
-						onDelete: 'CASCADE',
-					},
-				*/
-			},
-		});
-
-		return {
-			hour: createEntity('hour'),
-			day: createEntity('day'),
-		};
-	}
-
-	constructor(name: string, schema: T, grouped = false) {
-		this.name = name;
-		this.schema = schema;
-
-		const { hour, day } = Chart.schemaToEntity(name, schema, grouped);
-		this.repositoryForHour = db.getRepository<{ id: number; group?: string | null; date: number; }>(hour);
-		this.repositoryForDay = db.getRepository<{ id: number; group?: string | null; date: number; }>(day);
-	}
-
-	private convertRawRecord(x: RawRecord<T>): KVs<T> {
-		const kvs = {} as Record<string, number>;
-		for (const k of Object.keys(x).filter((k) => k.startsWith(columnPrefix)) as (keyof Columns<T>)[]) {
-			kvs[(k as string).substr(columnPrefix.length).split(columnDot).join('.')] = x[k];
-		}
-		return kvs as KVs<T>;
-	}
-
-	private getNewLog(latest: KVs<T> | null): KVs<T> {
-		const log = {} as Record<keyof T, number>;
-		for (const [k, v] of Object.entries(this.schema) as ([keyof typeof this['schema'], this['schema'][string]])[]) {
-			if (v.accumulate && latest) {
-				log[k] = latest[k];
-			} else {
-				log[k] = 0;
-			}
-		}
-		return log as KVs<T>;
-	}
-
-	private getLatestLog(group: string | null, span: 'hour' | 'day'): Promise<RawRecord<T> | null> {
-		const repository =
-			span === 'hour' ? this.repositoryForHour :
-			span === 'day' ? this.repositoryForDay :
-			new Error('not happen') as never;
-
-		return repository.findOne({
-			where: group ? {
-				group: group,
-			} : {},
-			order: {
-				date: -1,
-			},
-		}).then(x => x ?? null) as Promise<RawRecord<T> | null>;
-	}
-
-	/**
-	 * 現在(=今のHour or Day)のログをデータベースから探して、あればそれを返し、なければ作成して返します。
-	 */
-	private async claimCurrentLog(group: string | null, span: 'hour' | 'day'): Promise<RawRecord<T>> {
-		const [y, m, d, h] = Chart.getCurrentDate();
-
-		const current = dateUTC(
-			span === 'hour' ? [y, m, d, h] :
-			span === 'day' ? [y, m, d] :
-			new Error('not happen') as never);
-
-		const repository =
-			span === 'hour' ? this.repositoryForHour :
-			span === 'day' ? this.repositoryForDay :
-			new Error('not happen') as never;
-
-		// 現在(=今のHour or Day)のログ
-		const currentLog = await repository.findOneBy({
-			date: Chart.dateToTimestamp(current),
-			...(group ? { group: group } : {}),
-		}) as RawRecord<T> | undefined;
-
-		// ログがあればそれを返して終了
-		if (currentLog != null) {
-			return currentLog;
-		}
-
-		let log: RawRecord<T>;
-		let data: KVs<T>;
-
-		// 集計期間が変わってから、初めてのチャート更新なら
-		// 最も最近のログを持ってくる
-		// * 例えば集計期間が「日」である場合で考えると、
-		// * 昨日何もチャートを更新するような出来事がなかった場合は、
-		// * ログがそもそも作られずドキュメントが存在しないということがあり得るため、
-		// * 「昨日の」と決め打ちせずに「もっとも最近の」とします
-		const latest = await this.getLatestLog(group, span);
-
-		if (latest != null) {
-			// 空ログデータを作成
-			data = this.getNewLog(this.convertRawRecord(latest));
-		} else {
-			// ログが存在しなかったら
-			// (Misskeyインスタンスを建てて初めてのチャート更新時など)
-
-			// 初期ログデータを作成
-			data = this.getNewLog(null);
-
-			logger.info(`${this.name + (group ? `:${group}` : '')}(${span}): Initial commit created`);
-		}
-
-		const date = Chart.dateToTimestamp(current);
-		const lockKey = group ? `${this.name}:${date}:${span}:${group}` : `${this.name}:${date}:${span}`;
-
-		const unlock = await getChartInsertLock(lockKey);
-		try {
-			// ロック内でもう1回チェックする
-			const currentLog = await repository.findOneBy({
-				date: date,
-				...(group ? { group: group } : {}),
-			}) as RawRecord<T> | undefined;
-
-			// ログがあればそれを返して終了
-			if (currentLog != null) return currentLog;
-
-			const columns = {} as Record<string, number | unknown[]>;
-			for (const [k, v] of Object.entries(data)) {
-				const name = k.replaceAll('.', columnDot);
-				columns[columnPrefix + name] = v;
-			}
-
-			// 新規ログ挿入
-			log = await repository.insert({
-				date: date,
-				...(group ? { group: group } : {}),
-				...columns,
-			}).then(x => repository.findOneByOrFail(x.identifiers[0])) as RawRecord<T>;
-
-			logger.info(`${this.name + (group ? `:${group}` : '')}(${span}): New commit created`);
-
-			return log;
-		} finally {
-			unlock();
-		}
-	}
-
-	protected commit(diff: Commit<T>, group: string | null = null): void {
-		for (const [k, v] of Object.entries(diff)) {
-			if (v == null || v === 0 || (Array.isArray(v) && v.length === 0)) delete diff[k];
-		}
-		this.buffer.push({
-			diff, group,
-		});
-	}
-
-	public async save(): Promise<void> {
-		if (this.buffer.length === 0) {
-			logger.info(`${this.name}: Write skipped`);
-			return;
-		}
-
-		// TODO: 前の時間のログがbufferにあった場合のハンドリング
-		// 例えば、save が20分ごとに行われるとして、前回行われたのは 01:50 だったとする。
-		// 次に save が行われるのは 02:10 ということになるが、もし 01:55 に新規ログが buffer に追加されたとすると、
-		// そのログは本来は 01:00~ のログとしてDBに保存されて欲しいのに、02:00~ のログ扱いになってしまう。
-		// これを回避するための実装は複雑になりそうなため、一旦保留。
-
-		const update = async (logHour: RawRecord<T>, logDay: RawRecord<T>): Promise<void> => {
-			const finalDiffs = {} as Record<string, number | string[]>;
-
-			for (const diff of this.buffer.filter(q => q.group == null || (q.group === logHour.group)).map(q => q.diff)) {
-				for (const [k, v] of Object.entries(diff)) {
-					if (finalDiffs[k] == null) {
-						finalDiffs[k] = v;
-					} else {
-						if (typeof finalDiffs[k] === 'number') {
-							(finalDiffs[k] as number) += v as number;
-						} else {
-							(finalDiffs[k] as string[]) = (finalDiffs[k] as string[]).concat(v);
-						}
-					}
-				}
-			}
-
-			const queryForHour: Record<keyof RawRecord<T>, number | (() => string)> = {} as any;
-			const queryForDay: Record<keyof RawRecord<T>, number | (() => string)> = {} as any;
-			for (const [k, v] of Object.entries(finalDiffs)) {
-				if (typeof v === 'number') {
-					const name = columnPrefix + k.replaceAll('.', columnDot) as keyof Columns<T>;
-					if (v > 0) queryForHour[name] = () => `"${name}" + ${v}`;
-					if (v < 0) queryForHour[name] = () => `"${name}" - ${Math.abs(v)}`;
-					if (v > 0) queryForDay[name] = () => `"${name}" + ${v}`;
-					if (v < 0) queryForDay[name] = () => `"${name}" - ${Math.abs(v)}`;
-				} else if (Array.isArray(v) && v.length > 0) { // ユニークインクリメント
-					const tempColumnName = uniqueTempColumnPrefix + k.replaceAll('.', columnDot) as keyof TempColumnsForUnique<T>;
-					// TODO: item をSQLエスケープ
-					const itemsForHour = v.filter(item => !logHour[tempColumnName].includes(item)).map(item => `"${item}"`);
-					const itemsForDay = v.filter(item => !logDay[tempColumnName].includes(item)).map(item => `"${item}"`);
-					if (itemsForHour.length > 0) queryForHour[tempColumnName] = () => `array_cat("${tempColumnName}", '{${itemsForHour.join(',')}}'::varchar[])`;
-					if (itemsForDay.length > 0) queryForDay[tempColumnName] = () => `array_cat("${tempColumnName}", '{${itemsForDay.join(',')}}'::varchar[])`;
-				}
-			}
-
-			// bake unique count
-			for (const [k, v] of Object.entries(finalDiffs)) {
-				if (this.schema[k].uniqueIncrement) {
-					const name = columnPrefix + k.replaceAll('.', columnDot) as keyof Columns<T>;
-					const tempColumnName = uniqueTempColumnPrefix + k.replaceAll('.', columnDot) as keyof TempColumnsForUnique<T>;
-					queryForHour[name] = new Set([...(v as string[]), ...logHour[tempColumnName]]).size;
-					queryForDay[name] = new Set([...(v as string[]), ...logDay[tempColumnName]]).size;
-				}
-			}
-
-			// compute intersection
-			// TODO: intersectionに指定されたカラムがintersectionだった場合の対応
-			for (const [k, v] of Object.entries(this.schema)) {
-				const intersection = v.intersection;
-				if (intersection) {
-					const name = columnPrefix + k.replaceAll('.', columnDot) as keyof Columns<T>;
-					const firstKey = intersection[0];
-					const firstTempColumnName = uniqueTempColumnPrefix + firstKey.replaceAll('.', columnDot) as keyof TempColumnsForUnique<T>;
-					const firstValues = finalDiffs[firstKey] as string[] | undefined;
-					const currentValuesForHour = new Set([...(firstValues ?? []), ...logHour[firstTempColumnName]]);
-					const currentValuesForDay = new Set([...(firstValues ?? []), ...logDay[firstTempColumnName]]);
-					for (let i = 1; i < intersection.length; i++) {
-						const targetKey = intersection[i];
-						const targetTempColumnName = uniqueTempColumnPrefix + targetKey.replaceAll('.', columnDot) as keyof TempColumnsForUnique<T>;
-						const targetValues = finalDiffs[targetKey] as string[] | undefined;
-						const targetValuesForHour = new Set([...(targetValues ?? []), ...logHour[targetTempColumnName]]);
-						const targetValuesForDay = new Set([...(targetValues ?? []), ...logDay[targetTempColumnName]]);
-						currentValuesForHour.forEach(v => {
-							if (!targetValuesForHour.has(v)) currentValuesForHour.delete(v);
-						});
-						currentValuesForDay.forEach(v => {
-							if (!targetValuesForDay.has(v)) currentValuesForDay.delete(v);
-						});
-					}
-					queryForHour[name] = currentValuesForHour.size;
-					queryForDay[name] = currentValuesForDay.size;
-				}
-			}
-
-			// ログ更新
-			await Promise.all([
-				this.repositoryForHour.createQueryBuilder()
-					.update()
-					.set(queryForHour as any)
-					.where('id = :id', { id: logHour.id })
-					.execute(),
-				this.repositoryForDay.createQueryBuilder()
-					.update()
-					.set(queryForDay as any)
-					.where('id = :id', { id: logDay.id })
-					.execute(),
-			]);
-
-			logger.info(`${this.name + (logHour.group ? `:${logHour.group}` : '')}: Updated`);
-
-			// TODO: この一連の処理が始まった後に新たにbufferに入ったものは消さないようにする
-			this.buffer = this.buffer.filter(q => q.group != null && (q.group !== logHour.group));
-		};
-
-		const groups = removeDuplicates(this.buffer.map(log => log.group));
-
-		await Promise.all(
-			groups.map(group =>
-				Promise.all([
-					this.claimCurrentLog(group, 'hour'),
-					this.claimCurrentLog(group, 'day'),
-				]).then(([logHour, logDay]) =>
-					update(logHour, logDay))));
-	}
-
-	public async tick(major: boolean, group: string | null = null): Promise<void> {
-		const data = major ? await this.tickMajor(group) : await this.tickMinor(group);
-
-		const columns = {} as Record<keyof Columns<T>, number>;
-		for (const [k, v] of Object.entries(data) as ([keyof typeof data, number])[]) {
-			const name = columnPrefix + (k as string).replaceAll('.', columnDot) as keyof Columns<T>;
-			columns[name] = v;
-		}
-
-		if (Object.keys(columns).length === 0) {
-			return;
-		}
-
-		const update = async (logHour: RawRecord<T>, logDay: RawRecord<T>): Promise<void> => {
-			await Promise.all([
-				this.repositoryForHour.createQueryBuilder()
-					.update()
-					.set(columns)
-					.where('id = :id', { id: logHour.id })
-					.execute(),
-				this.repositoryForDay.createQueryBuilder()
-					.update()
-					.set(columns)
-					.where('id = :id', { id: logDay.id })
-					.execute(),
-			]);
-		};
-
-		return Promise.all([
-			this.claimCurrentLog(group, 'hour'),
-			this.claimCurrentLog(group, 'day'),
-		]).then(([logHour, logDay]) =>
-			update(logHour, logDay));
-	}
-
-	public resync(group: string | null = null): Promise<void> {
-		return this.tick(true, group);
-	}
-
-	public async clean(): Promise<void> {
-		const current = dateUTC(Chart.getCurrentDate());
-
-		// 一日以上前かつ三日以内
-		const gt = Chart.dateToTimestamp(current) - (60 * 60 * 24 * 3);
-		const lt = Chart.dateToTimestamp(current) - (60 * 60 * 24);
-
-		const columns = {} as Record<keyof TempColumnsForUnique<T>, []>;
-		for (const [k, v] of Object.entries(this.schema)) {
-			if (v.uniqueIncrement) {
-				const name = uniqueTempColumnPrefix + k.replaceAll('.', columnDot) as keyof TempColumnsForUnique<T>;
-				columns[name] = [];
-			}
-		}
-
-		if (Object.keys(columns).length === 0) {
-			return;
-		}
-
-		await Promise.all([
-			this.repositoryForHour.createQueryBuilder()
-				.update()
-				.set(columns)
-				.where('date > :gt', { gt })
-				.andWhere('date < :lt', { lt })
-				.execute(),
-			this.repositoryForDay.createQueryBuilder()
-				.update()
-				.set(columns)
-				.where('date > :gt', { gt })
-				.andWhere('date < :lt', { lt })
-				.execute(),
-		]);
-	}
-
-	public async getChartRaw(span: 'hour' | 'day', amount: number, cursor: Date | null, group: string | null = null): Promise<ChartResult<T>> {
-		const [y, m, d, h, _m, _s, _ms] = cursor ? Chart.parseDate(subtractTime(addTime(cursor, 1, span), 1)) : Chart.getCurrentDate();
-		const [y2, m2, d2, h2] = cursor ? Chart.parseDate(addTime(cursor, 1, span)) : [] as never;
-
-		const lt = dateUTC([y, m, d, h, _m, _s, _ms]);
-
-		const gt =
-			span === 'day' ? subtractTime(cursor ? dateUTC([y2, m2, d2, 0]) : dateUTC([y, m, d, 0]), amount - 1, 'day') :
-			span === 'hour' ? subtractTime(cursor ? dateUTC([y2, m2, d2, h2]) : dateUTC([y, m, d, h]), amount - 1, 'hour') :
-			new Error('not happen') as never;
-
-		const repository =
-			span === 'hour' ? this.repositoryForHour :
-			span === 'day' ? this.repositoryForDay :
-			new Error('not happen') as never;
-
-		// ログ取得
-		let logs = await repository.find({
-			where: {
-				date: Between(Chart.dateToTimestamp(gt), Chart.dateToTimestamp(lt)),
-				...(group ? { group: group } : {}),
-			},
-			order: {
-				date: -1,
-			},
-		}) as RawRecord<T>[];
-
-		// 要求された範囲にログがひとつもなかったら
-		if (logs.length === 0) {
-			// もっとも新しいログを持ってくる
-			// (すくなくともひとつログが無いと隙間埋めできないため)
-			const recentLog = await repository.findOne({
-				where: group ? {
-					group: group,
-				} : {},
-				order: {
-					date: -1,
-				},
-			}) as RawRecord<T> | undefined;
-
-			if (recentLog) {
-				logs = [recentLog];
-			}
-
-		// 要求された範囲の最も古い箇所に位置するログが存在しなかったら
-		} else if (!isTimeSame(new Date(logs[logs.length - 1].date * 1000), gt)) {
-			// 要求された範囲の最も古い箇所時点での最も新しいログを持ってきて末尾に追加する
-			// (隙間埋めできないため)
-			const outdatedLog = await repository.findOne({
-				where: {
-					date: LessThan(Chart.dateToTimestamp(gt)),
-					...(group ? { group: group } : {}),
-				},
-				order: {
-					date: -1,
-				},
-			}) as RawRecord<T> | undefined;
-
-			if (outdatedLog) {
-				logs.push(outdatedLog);
-			}
-		}
-
-		const chart: KVs<T>[] = [];
-
-		for (let i = (amount - 1); i >= 0; i--) {
-			const current =
-				span === 'hour' ? subtractTime(dateUTC([y, m, d, h]), i, 'hour') :
-				span === 'day' ? subtractTime(dateUTC([y, m, d]), i, 'day') :
-				new Error('not happen') as never;
-
-			const log = logs.find(l => isTimeSame(new Date(l.date * 1000), current));
-
-			if (log) {
-				chart.unshift(this.convertRawRecord(log));
-			} else {
-				// 隙間埋め
-				const latest = logs.find(l => isTimeBefore(new Date(l.date * 1000), current));
-				const data = latest ? this.convertRawRecord(latest) : null;
-				chart.unshift(this.getNewLog(data));
-			}
-		}
-
-		const res = {} as ChartResult<T>;
-
-		/**
-		 * [{ foo: 1, bar: 5 }, { foo: 2, bar: 6 }, { foo: 3, bar: 7 }]
-		 * を
-		 * { foo: [1, 2, 3], bar: [5, 6, 7] }
-		 * にする
-		 */
-		for (const record of chart) {
-			for (const [k, v] of Object.entries(record) as ([keyof typeof record, number])[]) {
-				if (res[k]) {
-					res[k].push(v);
-				} else {
-					res[k] = [v];
-				}
-			}
-		}
-
-		return res;
-	}
-
-	public async getChart(span: 'hour' | 'day', amount: number, cursor: Date | null, group: string | null = null): Promise<Unflatten<ChartResult<T>>> {
-		const result = await this.getChartRaw(span, amount, cursor, group);
-		const object = {};
-		for (const [k, v] of Object.entries(result)) {
-			nestedProperty.set(object, k, v);
-		}
-		return object as Unflatten<ChartResult<T>>;
-	}
-}
diff --git a/packages/backend/src/services/chart/entities.ts b/packages/backend/src/services/chart/entities.ts
deleted file mode 100644
index a9eeabd639..0000000000
--- a/packages/backend/src/services/chart/entities.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { entity as FederationChart } from './charts/entities/federation.js';
-import { entity as NotesChart } from './charts/entities/notes.js';
-import { entity as UsersChart } from './charts/entities/users.js';
-import { entity as ActiveUsersChart } from './charts/entities/active-users.js';
-import { entity as InstanceChart } from './charts/entities/instance.js';
-import { entity as PerUserNotesChart } from './charts/entities/per-user-notes.js';
-import { entity as DriveChart } from './charts/entities/drive.js';
-import { entity as PerUserReactionsChart } from './charts/entities/per-user-reactions.js';
-import { entity as HashtagChart } from './charts/entities/hashtag.js';
-import { entity as PerUserFollowingChart } from './charts/entities/per-user-following.js';
-import { entity as PerUserDriveChart } from './charts/entities/per-user-drive.js';
-import { entity as ApRequestChart } from './charts/entities/ap-request.js';
-
-import { entity as TestChart } from './charts/entities/test.js';
-import { entity as TestGroupedChart } from './charts/entities/test-grouped.js';
-import { entity as TestUniqueChart } from './charts/entities/test-unique.js';
-import { entity as TestIntersectionChart } from './charts/entities/test-intersection.js';
-
-export const entities = [
-	FederationChart.hour, FederationChart.day,
-	NotesChart.hour, NotesChart.day,
-	UsersChart.hour, UsersChart.day,
-	ActiveUsersChart.hour, ActiveUsersChart.day,
-	InstanceChart.hour, InstanceChart.day,
-	PerUserNotesChart.hour, PerUserNotesChart.day,
-	DriveChart.hour, DriveChart.day,
-	PerUserReactionsChart.hour, PerUserReactionsChart.day,
-	HashtagChart.hour, HashtagChart.day,
-	PerUserFollowingChart.hour, PerUserFollowingChart.day,
-	PerUserDriveChart.hour, PerUserDriveChart.day,
-	ApRequestChart.hour, ApRequestChart.day,
-
-	...(process.env.NODE_ENV === 'test' ? [
-		TestChart.hour, TestChart.day,
-		TestGroupedChart.hour, TestGroupedChart.day,
-		TestUniqueChart.hour, TestUniqueChart.day,
-		TestIntersectionChart.hour, TestIntersectionChart.day,
-	] : []),
-];
diff --git a/packages/backend/src/services/chart/index.ts b/packages/backend/src/services/chart/index.ts
deleted file mode 100644
index 8bf2d8f65f..0000000000
--- a/packages/backend/src/services/chart/index.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { beforeShutdown } from '@/misc/before-shutdown.js';
-
-import FederationChart from './charts/federation.js';
-import NotesChart from './charts/notes.js';
-import UsersChart from './charts/users.js';
-import ActiveUsersChart from './charts/active-users.js';
-import InstanceChart from './charts/instance.js';
-import PerUserNotesChart from './charts/per-user-notes.js';
-import DriveChart from './charts/drive.js';
-import PerUserReactionsChart from './charts/per-user-reactions.js';
-import HashtagChart from './charts/hashtag.js';
-import PerUserFollowingChart from './charts/per-user-following.js';
-import PerUserDriveChart from './charts/per-user-drive.js';
-import ApRequestChart from './charts/ap-request.js';
-
-export const federationChart = new FederationChart();
-export const notesChart = new NotesChart();
-export const usersChart = new UsersChart();
-export const activeUsersChart = new ActiveUsersChart();
-export const instanceChart = new InstanceChart();
-export const perUserNotesChart = new PerUserNotesChart();
-export const driveChart = new DriveChart();
-export const perUserReactionsChart = new PerUserReactionsChart();
-export const hashtagChart = new HashtagChart();
-export const perUserFollowingChart = new PerUserFollowingChart();
-export const perUserDriveChart = new PerUserDriveChart();
-export const apRequestChart = new ApRequestChart();
-
-const charts = [
-	federationChart,
-	notesChart,
-	usersChart,
-	activeUsersChart,
-	instanceChart,
-	perUserNotesChart,
-	driveChart,
-	perUserReactionsChart,
-	hashtagChart,
-	perUserFollowingChart,
-	perUserDriveChart,
-	apRequestChart,
-];
-
-// 20分おきにメモリ情報をDBに書き込み
-setInterval(() => {
-	for (const chart of charts) {
-		chart.save();
-	}
-}, 1000 * 60 * 20);
-
-beforeShutdown(() => Promise.all(charts.map(chart => chart.save())));
diff --git a/packages/backend/src/services/create-notification.ts b/packages/backend/src/services/create-notification.ts
deleted file mode 100644
index d53a4235b8..0000000000
--- a/packages/backend/src/services/create-notification.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { publishMainStream } from '@/services/stream.js';
-import { pushNotification } from '@/services/push-notification.js';
-import { Notifications, Mutings, UserProfiles, Users } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { User } from '@/models/entities/user.js';
-import { Notification } from '@/models/entities/notification.js';
-import { sendEmailNotification } from './send-email-notification.js';
-
-export async function createNotification(
-	notifieeId: User['id'],
-	type: Notification['type'],
-	data: Partial<Notification>
-) {
-	if (data.notifierId && (notifieeId === data.notifierId)) {
-		return null;
-	}
-
-	const profile = await UserProfiles.findOneBy({ userId: notifieeId });
-
-	const isMuted = profile?.mutingNotificationTypes.includes(type);
-
-	// Create notification
-	const notification = await Notifications.insert({
-		id: genId(),
-		createdAt: new Date(),
-		notifieeId: notifieeId,
-		type: type,
-		// 相手がこの通知をミュートしているようなら、既読を予めつけておく
-		isRead: isMuted,
-		...data,
-	} as Partial<Notification>)
-		.then(x => Notifications.findOneByOrFail(x.identifiers[0]));
-
-	const packed = await Notifications.pack(notification, {});
-
-	// Publish notification event
-	publishMainStream(notifieeId, 'notification', packed);
-
-	// 2秒経っても(今回作成した)通知が既読にならなかったら「未読の通知がありますよ」イベントを発行する
-	setTimeout(async () => {
-		const fresh = await Notifications.findOneBy({ id: notification.id });
-		if (fresh == null) return; // 既に削除されているかもしれない
-		if (fresh.isRead) return;
-
-		//#region ただしミュートしているユーザーからの通知なら無視
-		const mutings = await Mutings.findBy({
-			muterId: notifieeId,
-		});
-		if (data.notifierId && mutings.map(m => m.muteeId).includes(data.notifierId)) {
-			return;
-		}
-		//#endregion
-
-		publishMainStream(notifieeId, 'unreadNotification', packed);
-		pushNotification(notifieeId, 'notification', packed);
-
-		if (type === 'follow') sendEmailNotification.follow(notifieeId, await Users.findOneByOrFail({ id: data.notifierId! }));
-		if (type === 'receiveFollowRequest') sendEmailNotification.receiveFollowRequest(notifieeId, await Users.findOneByOrFail({ id: data.notifierId! }));
-	}, 2000);
-
-	return notification;
-}
diff --git a/packages/backend/src/services/create-system-user.ts b/packages/backend/src/services/create-system-user.ts
deleted file mode 100644
index bae91ec4c3..0000000000
--- a/packages/backend/src/services/create-system-user.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import bcrypt from 'bcryptjs';
-import { v4 as uuid } from 'uuid';
-import generateNativeUserToken from '../server/api/common/generate-native-user-token.js';
-import { genRsaKeyPair } from '@/misc/gen-key-pair.js';
-import { User } from '@/models/entities/user.js';
-import { UserProfile } from '@/models/entities/user-profile.js';
-import { IsNull } from 'typeorm';
-import { genId } from '@/misc/gen-id.js';
-import { UserKeypair } from '@/models/entities/user-keypair.js';
-import { UsedUsername } from '@/models/entities/used-username.js';
-import { db } from '@/db/postgre.js';
-
-export async function createSystemUser(username: string) {
-	const password = uuid();
-
-	// Generate hash of password
-	const salt = await bcrypt.genSalt(8);
-	const hash = await bcrypt.hash(password, salt);
-
-	// Generate secret
-	const secret = generateNativeUserToken();
-
-	const keyPair = await genRsaKeyPair(4096);
-
-	let account!: User;
-
-	// Start transaction
-	await db.transaction(async transactionalEntityManager => {
-		const exist = await transactionalEntityManager.findOneBy(User, {
-			usernameLower: username.toLowerCase(),
-			host: IsNull(),
-		});
-
-		if (exist) throw new Error('the user is already exists');
-
-		account = await transactionalEntityManager.insert(User, {
-			id: genId(),
-			createdAt: new Date(),
-			username: username,
-			usernameLower: username.toLowerCase(),
-			host: null,
-			token: secret,
-			isAdmin: false,
-			isLocked: true,
-			isExplorable: false,
-			isBot: true,
-		}).then(x => transactionalEntityManager.findOneByOrFail(User, x.identifiers[0]));
-
-		await transactionalEntityManager.insert(UserKeypair, {
-			publicKey: keyPair.publicKey,
-			privateKey: keyPair.privateKey,
-			userId: account.id,
-		});
-
-		await transactionalEntityManager.insert(UserProfile, {
-			userId: account.id,
-			autoAcceptFollowed: false,
-			password: hash,
-		});
-
-		await transactionalEntityManager.insert(UsedUsername, {
-			createdAt: new Date(),
-			username: username.toLowerCase(),
-		});
-	});
-
-	return account;
-}
diff --git a/packages/backend/src/services/delete-account.ts b/packages/backend/src/services/delete-account.ts
deleted file mode 100644
index 0fdceb671b..0000000000
--- a/packages/backend/src/services/delete-account.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-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/backend/src/services/detect-sensitive.ts b/packages/backend/src/services/detect-sensitive.ts
deleted file mode 100644
index 2ade39d524..0000000000
--- a/packages/backend/src/services/detect-sensitive.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as fs from 'node:fs';
-import { fileURLToPath } from 'node:url';
-import { dirname } from 'node:path';
-import * as nsfw from 'nsfwjs';
-import si from 'systeminformation';
-
-const _filename = fileURLToPath(import.meta.url);
-const _dirname = dirname(_filename);
-
-const REQUIRED_CPU_FLAGS = ['avx2', 'fma'];
-let isSupportedCpu: undefined | boolean = undefined;
-
-let model: nsfw.NSFWJS;
-
-export async function detectSensitive(path: string): Promise<nsfw.predictionType[] | null> {
-	try {
-		if (isSupportedCpu === undefined) {
-			const cpuFlags = await getCpuFlags();
-			isSupportedCpu = REQUIRED_CPU_FLAGS.every(required => cpuFlags.includes(required));
-		}
-
-		if (!isSupportedCpu) {
-			console.error('This CPU cannot use TensorFlow.');
-			return null;
-		}
-
-		const tf = await import('@tensorflow/tfjs-node');
-
-		if (model == null) model = await nsfw.load(`file://${_dirname}/../../nsfw-model/`, { size: 299 });
-
-		const buffer = await fs.promises.readFile(path);
-		const image = await tf.node.decodeImage(buffer, 3) as any;
-		try {
-			const predictions = await model.classify(image);
-			return predictions;
-		} finally {
-			image.dispose();
-		}
-	} catch (err) {
-		console.error(err);
-		return null;
-	}
-}
-
-async function getCpuFlags(): Promise<string[]> {
-	const str = await si.cpuFlags();
-	return str.split(/\s+/);
-}
diff --git a/packages/backend/src/services/drive/add-file.ts b/packages/backend/src/services/drive/add-file.ts
deleted file mode 100644
index 709db88f2f..0000000000
--- a/packages/backend/src/services/drive/add-file.ts
+++ /dev/null
@@ -1,540 +0,0 @@
-import * as fs from 'node:fs';
-
-import { v4 as uuid } from 'uuid';
-
-import S3 from 'aws-sdk/clients/s3.js';
-import sharp from 'sharp';
-import { IsNull } from 'typeorm';
-import { publishMainStream, publishDriveStream } from '@/services/stream.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { contentDisposition } from '@/misc/content-disposition.js';
-import { getFileInfo } from '@/misc/get-file-info.js';
-import { DriveFiles, DriveFolders, Users, Instances, UserProfiles } from '@/models/index.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { IRemoteUser, User } from '@/models/entities/user.js';
-import { driveChart, perUserDriveChart, instanceChart } from '@/services/chart/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { isDuplicateKeyValueError } from '@/misc/is-duplicate-key-value-error.js';
-import { FILE_TYPE_BROWSERSAFE } from '@/const.js';
-import { IdentifiableError } from '@/misc/identifiable-error.js';
-import { getS3 } from './s3.js';
-import { InternalStorage } from './internal-storage.js';
-import { IImage, convertSharpToJpeg, convertSharpToWebp, convertSharpToPng } from './image-processor.js';
-import { driveLogger } from './logger.js';
-import { GenerateVideoThumbnail } from './generate-video-thumbnail.js';
-import { deleteFile } from './delete-file.js';
-
-const logger = driveLogger.createSubLogger('register', 'yellow');
-
-/***
- * Save file
- * @param path Path for original
- * @param name Name for original
- * @param type Content-Type for original
- * @param hash Hash for original
- * @param size Size for original
- */
-async function save(file: DriveFile, path: string, name: string, type: string, hash: string, size: number): Promise<DriveFile> {
-	// thunbnail, webpublic を必要なら生成
-	const alts = await generateAlts(path, type, !file.uri);
-
-	const meta = await fetchMeta();
-
-	if (meta.useObjectStorage) {
-		//#region ObjectStorage params
-		let [ext] = (name.match(/\.([a-zA-Z0-9_-]+)$/) || ['']);
-
-		if (ext === '') {
-			if (type === 'image/jpeg') ext = '.jpg';
-			if (type === 'image/png') ext = '.png';
-			if (type === 'image/webp') ext = '.webp';
-			if (type === 'image/apng') ext = '.apng';
-			if (type === 'image/vnd.mozilla.apng') ext = '.apng';
-		}
-
-		// 拡張子からContent-Typeを設定してそうな挙動を示すオブジェクトストレージ (upcloud?) も存在するので、
-		// 許可されているファイル形式でしか拡張子をつけない
-		if (!FILE_TYPE_BROWSERSAFE.includes(type)) {
-			ext = '';
-		}
-
-		const baseUrl = meta.objectStorageBaseUrl
-			|| `${ meta.objectStorageUseSSL ? 'https' : 'http' }://${ meta.objectStorageEndpoint }${ meta.objectStoragePort ? `:${meta.objectStoragePort}` : '' }/${ meta.objectStorageBucket }`;
-
-		// for original
-		const key = `${meta.objectStoragePrefix}/${uuid()}${ext}`;
-		const url = `${ baseUrl }/${ key }`;
-
-		// for alts
-		let webpublicKey: string | null = null;
-		let webpublicUrl: string | null = null;
-		let thumbnailKey: string | null = null;
-		let thumbnailUrl: string | null = null;
-		//#endregion
-
-		//#region Uploads
-		logger.info(`uploading original: ${key}`);
-		const uploads = [
-			upload(key, fs.createReadStream(path), type, name),
-		];
-
-		if (alts.webpublic) {
-			webpublicKey = `${meta.objectStoragePrefix}/webpublic-${uuid()}.${alts.webpublic.ext}`;
-			webpublicUrl = `${ baseUrl }/${ webpublicKey }`;
-
-			logger.info(`uploading webpublic: ${webpublicKey}`);
-			uploads.push(upload(webpublicKey, alts.webpublic.data, alts.webpublic.type, name));
-		}
-
-		if (alts.thumbnail) {
-			thumbnailKey = `${meta.objectStoragePrefix}/thumbnail-${uuid()}.${alts.thumbnail.ext}`;
-			thumbnailUrl = `${ baseUrl }/${ thumbnailKey }`;
-
-			logger.info(`uploading thumbnail: ${thumbnailKey}`);
-			uploads.push(upload(thumbnailKey, alts.thumbnail.data, alts.thumbnail.type));
-		}
-
-		await Promise.all(uploads);
-		//#endregion
-
-		file.url = url;
-		file.thumbnailUrl = thumbnailUrl;
-		file.webpublicUrl = webpublicUrl;
-		file.accessKey = key;
-		file.thumbnailAccessKey = thumbnailKey;
-		file.webpublicAccessKey = webpublicKey;
-		file.webpublicType = alts.webpublic?.type ?? null;
-		file.name = name;
-		file.type = type;
-		file.md5 = hash;
-		file.size = size;
-		file.storedInternal = false;
-
-		return await DriveFiles.insert(file).then(x => DriveFiles.findOneByOrFail(x.identifiers[0]));
-	} else { // use internal storage
-		const accessKey = uuid();
-		const thumbnailAccessKey = 'thumbnail-' + uuid();
-		const webpublicAccessKey = 'webpublic-' + uuid();
-
-		const url = InternalStorage.saveFromPath(accessKey, path);
-
-		let thumbnailUrl: string | null = null;
-		let webpublicUrl: string | null = null;
-
-		if (alts.thumbnail) {
-			thumbnailUrl = InternalStorage.saveFromBuffer(thumbnailAccessKey, alts.thumbnail.data);
-			logger.info(`thumbnail stored: ${thumbnailAccessKey}`);
-		}
-
-		if (alts.webpublic) {
-			webpublicUrl = InternalStorage.saveFromBuffer(webpublicAccessKey, alts.webpublic.data);
-			logger.info(`web stored: ${webpublicAccessKey}`);
-		}
-
-		file.storedInternal = true;
-		file.url = url;
-		file.thumbnailUrl = thumbnailUrl;
-		file.webpublicUrl = webpublicUrl;
-		file.accessKey = accessKey;
-		file.thumbnailAccessKey = thumbnailAccessKey;
-		file.webpublicAccessKey = webpublicAccessKey;
-		file.webpublicType = alts.webpublic?.type ?? null;
-		file.name = name;
-		file.type = type;
-		file.md5 = hash;
-		file.size = size;
-
-		return await DriveFiles.insert(file).then(x => DriveFiles.findOneByOrFail(x.identifiers[0]));
-	}
-}
-
-/**
- * Generate webpublic, thumbnail, etc
- * @param path Path for original
- * @param type Content-Type for original
- * @param generateWeb Generate webpublic or not
- */
-export async function generateAlts(path: string, type: string, generateWeb: boolean) {
-	if (type.startsWith('video/')) {
-		try {
-			const thumbnail = await GenerateVideoThumbnail(path);
-			return {
-				webpublic: null,
-				thumbnail,
-			};
-		} catch (err) {
-			logger.warn(`GenerateVideoThumbnail failed: ${err}`);
-			return {
-				webpublic: null,
-				thumbnail: null,
-			};
-		}
-	}
-
-	if (!['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml'].includes(type)) {
-		logger.debug('web image and thumbnail not created (not an required file)');
-		return {
-			webpublic: null,
-			thumbnail: null,
-		};
-	}
-
-	let img: sharp.Sharp | null = null;
-	let satisfyWebpublic: boolean;
-
-	try {
-		img = sharp(path);
-		const metadata = await img.metadata();
-		const isAnimated = metadata.pages && metadata.pages > 1;
-
-		// skip animated
-		if (isAnimated) {
-			return {
-				webpublic: null,
-				thumbnail: null,
-			};
-		}
-
-		satisfyWebpublic = !!(
-			type !== 'image/svg+xml' && type !== 'image/webp' &&
-			!(metadata.exif || metadata.iptc || metadata.xmp || metadata.tifftagPhotoshop) &&
-			metadata.width && metadata.width <= 2048 &&
-			metadata.height && metadata.height <= 2048
-		);
-	} catch (err) {
-		logger.warn(`sharp failed: ${err}`);
-		return {
-			webpublic: null,
-			thumbnail: null,
-		};
-	}
-
-	// #region webpublic
-	let webpublic: IImage | null = null;
-
-	if (generateWeb && !satisfyWebpublic) {
-		logger.info('creating web image');
-
-		try {
-			if (['image/jpeg', 'image/webp'].includes(type)) {
-				webpublic = await convertSharpToJpeg(img, 2048, 2048);
-			} else if (['image/png'].includes(type)) {
-				webpublic = await convertSharpToPng(img, 2048, 2048);
-			} else if (['image/svg+xml'].includes(type)) {
-				webpublic = await convertSharpToPng(img, 2048, 2048);
-			} else {
-				logger.debug('web image not created (not an required image)');
-			}
-		} catch (err) {
-			logger.warn('web image not created (an error occured)', err as Error);
-		}
-	} else {
-		if (satisfyWebpublic) logger.info('web image not created (original satisfies webpublic)');
-		else logger.info('web image not created (from remote)');
-	}
-	// #endregion webpublic
-
-	// #region thumbnail
-	let thumbnail: IImage | null = null;
-
-	try {
-		if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml'].includes(type)) {
-			thumbnail = await convertSharpToWebp(img, 498, 280);
-		} else {
-			logger.debug('thumbnail not created (not an required file)');
-		}
-	} catch (err) {
-		logger.warn('thumbnail not created (an error occured)', err as Error);
-	}
-	// #endregion thumbnail
-
-	return {
-		webpublic,
-		thumbnail,
-	};
-}
-
-/**
- * Upload to ObjectStorage
- */
-async function upload(key: string, stream: fs.ReadStream | Buffer, type: string, filename?: string) {
-	if (type === 'image/apng') type = 'image/png';
-	if (!FILE_TYPE_BROWSERSAFE.includes(type)) type = 'application/octet-stream';
-
-	const meta = await fetchMeta();
-
-	const params = {
-		Bucket: meta.objectStorageBucket,
-		Key: key,
-		Body: stream,
-		ContentType: type,
-		CacheControl: 'max-age=31536000, immutable',
-	} as S3.PutObjectRequest;
-
-	if (filename) params.ContentDisposition = contentDisposition('inline', filename);
-	if (meta.objectStorageSetPublicRead) params.ACL = 'public-read';
-
-	const s3 = getS3(meta);
-
-	const upload = s3.upload(params, {
-		partSize: s3.endpoint.hostname === 'storage.googleapis.com' ? 500 * 1024 * 1024 : 8 * 1024 * 1024,
-	});
-
-	const result = await upload.promise();
-	if (result) logger.debug(`Uploaded: ${result.Bucket}/${result.Key} => ${result.Location}`);
-}
-
-async function deleteOldFile(user: IRemoteUser) {
-	const q = DriveFiles.createQueryBuilder('file')
-		.where('file.userId = :userId', { userId: user.id })
-		.andWhere('file.isLink = FALSE');
-
-	if (user.avatarId) {
-		q.andWhere('file.id != :avatarId', { avatarId: user.avatarId });
-	}
-
-	if (user.bannerId) {
-		q.andWhere('file.id != :bannerId', { bannerId: user.bannerId });
-	}
-
-	q.orderBy('file.id', 'ASC');
-
-	const oldFile = await q.getOne();
-
-	if (oldFile) {
-		deleteFile(oldFile, true);
-	}
-}
-
-type AddFileArgs = {
-	/** User who wish to add file */
-	user: { id: User['id']; host: User['host']; driveCapacityOverrideMb: User['driveCapacityOverrideMb'] } | null;
-	/** File path */
-	path: string;
-	/** Name */
-	name?: string | null;
-	/** Comment */
-	comment?: string | null;
-	/** Folder ID */
-	folderId?: any;
-	/** If set to true, forcibly upload the file even if there is a file with the same hash. */
-	force?: boolean;
-	/** Do not save file to local */
-	isLink?: boolean;
-	/** URL of source (URLからアップロードされた場合(ローカル/リモート)の元URL) */
-	url?: string | null;
-	/** URL of source (リモートインスタンスのURLからアップロードされた場合の元URL) */
-	uri?: string | null;
-	/** Mark file as sensitive */
-	sensitive?: boolean | null;
-
-	requestIp?: string | null;
-	requestHeaders?: Record<string, string> | null;
-};
-
-/**
- * Add file to drive
- *
- */
-export async function addFile({
-	user,
-	path,
-	name = null,
-	comment = null,
-	folderId = null,
-	force = false,
-	isLink = false,
-	url = null,
-	uri = null,
-	sensitive = null,
-	requestIp = null,
-	requestHeaders = null,
-}: AddFileArgs): Promise<DriveFile> {
-	let skipNsfwCheck = false;
-	const instance = await fetchMeta();
-	if (user == null) skipNsfwCheck = true;
-	if (instance.sensitiveMediaDetection === 'none') skipNsfwCheck = true;
-	if (user && instance.sensitiveMediaDetection === 'local' && Users.isRemoteUser(user)) skipNsfwCheck = true;
-	if (user && instance.sensitiveMediaDetection === 'remote' && Users.isLocalUser(user)) skipNsfwCheck = true;
-
-	const info = await getFileInfo(path, {
-		skipSensitiveDetection: skipNsfwCheck,
-		sensitiveThreshold: // 感度が高いほどしきい値は低くすることになる
-			instance.sensitiveMediaDetectionSensitivity === 'veryHigh' ? 0.1 :
-			instance.sensitiveMediaDetectionSensitivity === 'high' ? 0.3 :
-			instance.sensitiveMediaDetectionSensitivity === 'low' ? 0.7 :
-			instance.sensitiveMediaDetectionSensitivity === 'veryLow' ? 0.9 :
-			0.5,
-		sensitiveThresholdForPorn: 0.75,
-		enableSensitiveMediaDetectionForVideos: instance.enableSensitiveMediaDetectionForVideos,
-	});
-	logger.info(`${JSON.stringify(info)}`);
-
-	// 現状 false positive が多すぎて実用に耐えない
-	//if (info.porn && instance.disallowUploadWhenPredictedAsPorn) {
-	//	throw new IdentifiableError('282f77bf-5816-4f72-9264-aa14d8261a21', 'Detected as porn.');
-	//}
-
-	// detect name
-	const detectedName = name || (info.type.ext ? `untitled.${info.type.ext}` : 'untitled');
-
-	if (user && !force) {
-		// Check if there is a file with the same hash
-		const much = await DriveFiles.findOneBy({
-			md5: info.md5,
-			userId: user.id,
-		});
-
-		if (much) {
-			logger.info(`file with same hash is found: ${much.id}`);
-			return much;
-		}
-	}
-
-	//#region Check drive usage
-	if (user && !isLink) {
-		const usage = await DriveFiles.calcDriveUsageOf(user);
-		const u = await Users.findOneBy({ id: user.id });
-
-		const instance = await fetchMeta();
-		let driveCapacity = 1024 * 1024 * (Users.isLocalUser(user) ? instance.localDriveCapacityMb : instance.remoteDriveCapacityMb);
-
-		if (Users.isLocalUser(user) && u?.driveCapacityOverrideMb != null) {
-			driveCapacity = 1024 * 1024 * u.driveCapacityOverrideMb;
-			logger.debug('drive capacity override applied');
-			logger.debug(`overrideCap: ${driveCapacity}bytes, usage: ${usage}bytes, u+s: ${usage + info.size}bytes`);
-		}
-
-		logger.debug(`drive usage is ${usage} (max: ${driveCapacity})`);
-
-		// If usage limit exceeded
-		if (usage + info.size > driveCapacity) {
-			if (Users.isLocalUser(user)) {
-				throw new IdentifiableError('c6244ed2-a39a-4e1c-bf93-f0fbd7764fa6', 'No free space.');
-			} else {
-				// (アバターまたはバナーを含まず)最も古いファイルを削除する
-				deleteOldFile(await Users.findOneByOrFail({ id: user.id }) as IRemoteUser);
-			}
-		}
-	}
-	//#endregion
-
-	const fetchFolder = async () => {
-		if (!folderId) {
-			return null;
-		}
-
-		const driveFolder = await DriveFolders.findOneBy({
-			id: folderId,
-			userId: user ? user.id : IsNull(),
-		});
-
-		if (driveFolder == null) throw new Error('folder-not-found');
-
-		return driveFolder;
-	};
-
-	const properties: {
-		width?: number;
-		height?: number;
-		orientation?: number;
-	} = {};
-
-	if (info.width) {
-		properties['width'] = info.width;
-		properties['height'] = info.height;
-	}
-	if (info.orientation != null) {
-		properties['orientation'] = info.orientation;
-	}
-
-	const profile = user ? await UserProfiles.findOneBy({ userId: user.id }) : null;
-
-	const folder = await fetchFolder();
-
-	let file = new DriveFile();
-	file.id = genId();
-	file.createdAt = new Date();
-	file.userId = user ? user.id : null;
-	file.userHost = user ? user.host : null;
-	file.folderId = folder !== null ? folder.id : null;
-	file.comment = comment;
-	file.properties = properties;
-	file.blurhash = info.blurhash || null;
-	file.isLink = isLink;
-	file.requestIp = requestIp;
-	file.requestHeaders = requestHeaders;
-	file.maybeSensitive = info.sensitive;
-	file.maybePorn = info.porn;
-	file.isSensitive = user
-		? Users.isLocalUser(user) && profile!.alwaysMarkNsfw ? true :
-		(sensitive !== null && sensitive !== undefined)
-			? sensitive
-			: false
-		: false;
-
-	if (info.sensitive && profile!.autoSensitive) file.isSensitive = true;
-	if (info.sensitive && instance.setSensitiveFlagAutomatically) file.isSensitive = true;
-
-	if (url !== null) {
-		file.src = url;
-
-		if (isLink) {
-			file.url = url;
-			// ローカルプロキシ用
-			file.accessKey = uuid();
-			file.thumbnailAccessKey = 'thumbnail-' + uuid();
-			file.webpublicAccessKey = 'webpublic-' + uuid();
-		}
-	}
-
-	if (uri !== null) {
-		file.uri = uri;
-	}
-
-	if (isLink) {
-		try {
-			file.size = 0;
-			file.md5 = info.md5;
-			file.name = detectedName;
-			file.type = info.type.mime;
-			file.storedInternal = false;
-
-			file = await DriveFiles.insert(file).then(x => DriveFiles.findOneByOrFail(x.identifiers[0]));
-		} catch (err) {
-			// duplicate key error (when already registered)
-			if (isDuplicateKeyValueError(err)) {
-				logger.info(`already registered ${file.uri}`);
-
-				file = await DriveFiles.findOneBy({
-					uri: file.uri!,
-					userId: user ? user.id : IsNull(),
-				}) as DriveFile;
-			} else {
-				logger.error(err as Error);
-				throw err;
-			}
-		}
-	} else {
-		file = await (save(file, path, detectedName, info.type.mime, info.md5, info.size));
-	}
-
-	logger.succ(`drive file has been created ${file.id}`);
-
-	if (user) {
-		DriveFiles.pack(file, { self: true }).then(packedFile => {
-			// Publish driveFileCreated event
-			publishMainStream(user.id, 'driveFileCreated', packedFile);
-			publishDriveStream(user.id, 'fileCreated', packedFile);
-		});
-	}
-
-	// 統計を更新
-	driveChart.update(file, true);
-	perUserDriveChart.update(file, true);
-	if (file.userHost !== null) {
-		instanceChart.updateDrive(file, true);
-	}
-
-	return file;
-}
diff --git a/packages/backend/src/services/drive/delete-file.ts b/packages/backend/src/services/drive/delete-file.ts
deleted file mode 100644
index 4816a3a31b..0000000000
--- a/packages/backend/src/services/drive/delete-file.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { InternalStorage } from './internal-storage.js';
-import { DriveFiles, Instances } from '@/models/index.js';
-import { driveChart, perUserDriveChart, instanceChart } from '@/services/chart/index.js';
-import { createDeleteObjectStorageFileJob } from '@/queue/index.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { getS3 } from './s3.js';
-import { v4 as uuid } from 'uuid';
-
-export async function deleteFile(file: DriveFile, isExpired = false) {
-	if (file.storedInternal) {
-		InternalStorage.del(file.accessKey!);
-
-		if (file.thumbnailUrl) {
-			InternalStorage.del(file.thumbnailAccessKey!);
-		}
-
-		if (file.webpublicUrl) {
-			InternalStorage.del(file.webpublicAccessKey!);
-		}
-	} else if (!file.isLink) {
-		createDeleteObjectStorageFileJob(file.accessKey!);
-
-		if (file.thumbnailUrl) {
-			createDeleteObjectStorageFileJob(file.thumbnailAccessKey!);
-		}
-
-		if (file.webpublicUrl) {
-			createDeleteObjectStorageFileJob(file.webpublicAccessKey!);
-		}
-	}
-
-	postProcess(file, isExpired);
-}
-
-export async function deleteFileSync(file: DriveFile, isExpired = false) {
-	if (file.storedInternal) {
-		InternalStorage.del(file.accessKey!);
-
-		if (file.thumbnailUrl) {
-			InternalStorage.del(file.thumbnailAccessKey!);
-		}
-
-		if (file.webpublicUrl) {
-			InternalStorage.del(file.webpublicAccessKey!);
-		}
-	} else if (!file.isLink) {
-		const promises = [];
-
-		promises.push(deleteObjectStorageFile(file.accessKey!));
-
-		if (file.thumbnailUrl) {
-			promises.push(deleteObjectStorageFile(file.thumbnailAccessKey!));
-		}
-
-		if (file.webpublicUrl) {
-			promises.push(deleteObjectStorageFile(file.webpublicAccessKey!));
-		}
-
-		await Promise.all(promises);
-	}
-
-	postProcess(file, isExpired);
-}
-
-async function postProcess(file: DriveFile, isExpired = false) {
-	// リモートファイル期限切れ削除後は直リンクにする
-	if (isExpired && file.userHost !== null && file.uri != null) {
-		DriveFiles.update(file.id, {
-			isLink: true,
-			url: file.uri,
-			thumbnailUrl: null,
-			webpublicUrl: null,
-			storedInternal: false,
-			// ローカルプロキシ用
-			accessKey: uuid(),
-			thumbnailAccessKey: 'thumbnail-' + uuid(),
-			webpublicAccessKey: 'webpublic-' + uuid(),
-		});
-	} else {
-		DriveFiles.delete(file.id);
-	}
-
-	// 統計を更新
-	driveChart.update(file, false);
-	perUserDriveChart.update(file, false);
-	if (file.userHost !== null) {
-		instanceChart.updateDrive(file, false);
-	}
-}
-
-export async function deleteObjectStorageFile(key: string) {
-	const meta = await fetchMeta();
-
-	const s3 = getS3(meta);
-
-	await s3.deleteObject({
-		Bucket: meta.objectStorageBucket!,
-		Key: key,
-	}).promise();
-}
diff --git a/packages/backend/src/services/drive/generate-video-thumbnail.ts b/packages/backend/src/services/drive/generate-video-thumbnail.ts
deleted file mode 100644
index 6e6666481d..0000000000
--- a/packages/backend/src/services/drive/generate-video-thumbnail.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as fs from 'node:fs';
-import { createTempDir } from '@/misc/create-temp.js';
-import { IImage, convertToJpeg } from './image-processor.js';
-import FFmpeg from 'fluent-ffmpeg';
-
-export async function GenerateVideoThumbnail(source: string): Promise<IImage> {
-	const [dir, cleanup] = await createTempDir();
-
-	try {
-		await new Promise((res, rej) => {
-			FFmpeg({
-				source,
-			})
-			.on('end', res)
-			.on('error', rej)
-			.screenshot({
-				folder: dir,
-				filename: 'out.png',	// must have .png extension
-				count: 1,
-				timestamps: ['5%'],
-			});
-		});
-
-		// JPEGに変換 (Webpでもいいが、MastodonはWebpをサポートせず表示できなくなる)
-		return await convertToJpeg(`${dir}/out.png`, 498, 280);
-	} finally {
-		cleanup();
-	}
-}
diff --git a/packages/backend/src/services/drive/image-processor.ts b/packages/backend/src/services/drive/image-processor.ts
deleted file mode 100644
index 2c564ea595..0000000000
--- a/packages/backend/src/services/drive/image-processor.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import sharp from 'sharp';
-
-export type IImage = {
-	data: Buffer;
-	ext: string | null;
-	type: string;
-};
-
-/**
- * Convert to JPEG
- *   with resize, remove metadata, resolve orientation, stop animation
- */
-export async function convertToJpeg(path: string, width: number, height: number): Promise<IImage> {
-	return convertSharpToJpeg(await sharp(path), width, height);
-}
-
-export async function convertSharpToJpeg(sharp: sharp.Sharp, width: number, height: number): Promise<IImage> {
-	const data = await sharp
-		.resize(width, height, {
-			fit: 'inside',
-			withoutEnlargement: true,
-		})
-		.rotate()
-		.jpeg({
-			quality: 85,
-			progressive: true,
-		})
-		.toBuffer();
-
-	return {
-		data,
-		ext: 'jpg',
-		type: 'image/jpeg',
-	};
-}
-
-/**
- * Convert to WebP
- *   with resize, remove metadata, resolve orientation, stop animation
- */
-export async function convertToWebp(path: string, width: number, height: number, quality: number = 85): Promise<IImage> {
-	return convertSharpToWebp(await sharp(path), width, height, quality);
-}
-
-export async function convertSharpToWebp(sharp: sharp.Sharp, width: number, height: number, quality: number = 85): Promise<IImage> {
-	const data = await sharp
-		.resize(width, height, {
-			fit: 'inside',
-			withoutEnlargement: true,
-		})
-		.rotate()
-		.webp({
-			quality,
-		})
-		.toBuffer();
-
-	return {
-		data,
-		ext: 'webp',
-		type: 'image/webp',
-	};
-}
-
-/**
- * Convert to PNG
- *   with resize, remove metadata, resolve orientation, stop animation
- */
-export async function convertToPng(path: string, width: number, height: number): Promise<IImage> {
-	return convertSharpToPng(await sharp(path), width, height);
-}
-
-export async function convertSharpToPng(sharp: sharp.Sharp, width: number, height: number): Promise<IImage> {
-	const data = await sharp
-		.resize(width, height, {
-			fit: 'inside',
-			withoutEnlargement: true,
-		})
-		.rotate()
-		.png()
-		.toBuffer();
-
-	return {
-		data,
-		ext: 'png',
-		type: 'image/png',
-	};
-}
diff --git a/packages/backend/src/services/drive/internal-storage.ts b/packages/backend/src/services/drive/internal-storage.ts
deleted file mode 100644
index 8f76c81ca3..0000000000
--- a/packages/backend/src/services/drive/internal-storage.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as fs from 'node:fs';
-import * as Path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { dirname } from 'node:path';
-import config from '@/config/index.js';
-
-const _filename = fileURLToPath(import.meta.url);
-const _dirname = dirname(_filename);
-
-export class InternalStorage {
-	private static readonly path = Path.resolve(_dirname, '../../../../../files');
-
-	public static resolvePath = (key: string) => Path.resolve(InternalStorage.path, key);
-
-	public static read(key: string) {
-		return fs.createReadStream(InternalStorage.resolvePath(key));
-	}
-
-	public static saveFromPath(key: string, srcPath: string) {
-		fs.mkdirSync(InternalStorage.path, { recursive: true });
-		fs.copyFileSync(srcPath, InternalStorage.resolvePath(key));
-		return `${config.url}/files/${key}`;
-	}
-
-	public static saveFromBuffer(key: string, data: Buffer) {
-		fs.mkdirSync(InternalStorage.path, { recursive: true });
-		fs.writeFileSync(InternalStorage.resolvePath(key), data);
-		return `${config.url}/files/${key}`;
-	}
-
-	public static del(key: string) {
-		fs.unlink(InternalStorage.resolvePath(key), () => {});
-	}
-}
diff --git a/packages/backend/src/services/drive/logger.ts b/packages/backend/src/services/drive/logger.ts
deleted file mode 100644
index 917a8317e2..0000000000
--- a/packages/backend/src/services/drive/logger.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import Logger from '../logger.js';
-
-export const driveLogger = new Logger('drive', 'blue');
diff --git a/packages/backend/src/services/drive/s3.ts b/packages/backend/src/services/drive/s3.ts
deleted file mode 100644
index 80e34be956..0000000000
--- a/packages/backend/src/services/drive/s3.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { URL } from 'node:url';
-import S3 from 'aws-sdk/clients/s3.js';
-import { Meta } from '@/models/entities/meta.js';
-import { getAgentByUrl } from '@/misc/fetch.js';
-
-export function getS3(meta: Meta) {
-	const u = meta.objectStorageEndpoint != null
-		? `${meta.objectStorageUseSSL ? 'https://' : 'http://'}${meta.objectStorageEndpoint}`
-		: `${meta.objectStorageUseSSL ? 'https://' : 'http://'}example.net`;
-
-	return new S3({
-		endpoint: meta.objectStorageEndpoint || undefined,
-		accessKeyId: meta.objectStorageAccessKey!,
-		secretAccessKey: meta.objectStorageSecretKey!,
-		region: meta.objectStorageRegion || undefined,
-		sslEnabled: meta.objectStorageUseSSL,
-		s3ForcePathStyle: !meta.objectStorageEndpoint	// AWS with endPoint omitted
-			? false
-			: meta.objectStorageS3ForcePathStyle,
-		httpOptions: {
-			agent: getAgentByUrl(new URL(u), !meta.objectStorageUseProxy),
-		},
-	});
-}
diff --git a/packages/backend/src/services/drive/upload-from-url.ts b/packages/backend/src/services/drive/upload-from-url.ts
deleted file mode 100644
index 3c5e1aa5c1..0000000000
--- a/packages/backend/src/services/drive/upload-from-url.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { URL } from 'node:url';
-import { User } from '@/models/entities/user.js';
-import { createTemp } from '@/misc/create-temp.js';
-import { downloadUrl } from '@/misc/download-url.js';
-import { DriveFolder } from '@/models/entities/drive-folder.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { DriveFiles } from '@/models/index.js';
-import { driveLogger } from './logger.js';
-import { addFile } from './add-file.js';
-
-const logger = driveLogger.createSubLogger('downloader');
-
-type Args = {
-	url: string;
-	user: { id: User['id']; host: User['host'] } | null;
-	folderId?: DriveFolder['id'] | null;
-	uri?: string | null;
-	sensitive?: boolean;
-	force?: boolean;
-	isLink?: boolean;
-	comment?: string | null;
-	requestIp?: string | null;
-	requestHeaders?: Record<string, string> | null;
-};
-
-export async function uploadFromUrl({
-	url,
-	user,
-	folderId = null,
-	uri = null,
-	sensitive = false,
-	force = false,
-	isLink = false,
-	comment = null,
-	requestIp = null,
-	requestHeaders = null,
-}: Args): Promise<DriveFile> {
-	let name = new URL(url).pathname.split('/').pop() || null;
-	if (name == null || !DriveFiles.validateFileName(name)) {
-		name = null;
-	}
-
-	// If the comment is same as the name, skip comment
-	// (image.name is passed in when receiving attachment)
-	if (comment !== null && name === comment) {
-		comment = null;
-	}
-
-	// Create temp file
-	const [path, cleanup] = await createTemp();
-
-	try {
-		// write content at URL to temp file
-		await downloadUrl(url, path);
-
-		const driveFile = await addFile({ user, path, name, comment, folderId, force, isLink, url, uri, sensitive, requestIp, requestHeaders });
-		logger.succ(`Got: ${driveFile.id}`);
-		return driveFile!;
-	} catch (e) {
-		logger.error(`Failed to create drive file: ${e}`, {
-			url: url,
-			e: e,
-		});
-		throw e;
-	} finally {
-		cleanup();
-	}
-}
diff --git a/packages/backend/src/services/fetch-instance-metadata.ts b/packages/backend/src/services/fetch-instance-metadata.ts
deleted file mode 100644
index ee1245132a..0000000000
--- a/packages/backend/src/services/fetch-instance-metadata.ts
+++ /dev/null
@@ -1,268 +0,0 @@
-import { DOMWindow, JSDOM } from 'jsdom';
-import fetch from 'node-fetch';
-import tinycolor from 'tinycolor2';
-import { getJson, getHtml, getAgentByUrl } from '@/misc/fetch.js';
-import { Instance } from '@/models/entities/instance.js';
-import { Instances } from '@/models/index.js';
-import { getFetchInstanceMetadataLock } from '@/misc/app-lock.js';
-import Logger from './logger.js';
-import { URL } from 'node:url';
-
-const logger = new Logger('metadata', 'cyan');
-
-export async function fetchInstanceMetadata(instance: Instance, force = false): Promise<void> {
-	const unlock = await getFetchInstanceMetadataLock(instance.host);
-
-	if (!force) {
-		const _instance = await Instances.findOneBy({ host: instance.host });
-		const now = Date.now();
-		if (_instance && _instance.infoUpdatedAt && (now - _instance.infoUpdatedAt.getTime() < 1000 * 60 * 60 * 24)) {
-			unlock();
-			return;
-		}
-	}
-
-	logger.info(`Fetching metadata of ${instance.host} ...`);
-
-	try {
-		const [info, dom, manifest] = await Promise.all([
-			fetchNodeinfo(instance).catch(() => null),
-			fetchDom(instance).catch(() => null),
-			fetchManifest(instance).catch(() => null),
-		]);
-
-		const [favicon, icon, themeColor, name, description] = await Promise.all([
-			fetchFaviconUrl(instance, dom).catch(() => null),
-			fetchIconUrl(instance, dom, manifest).catch(() => null),
-			getThemeColor(info, dom, manifest).catch(() => null),
-			getSiteName(info, dom, manifest).catch(() => null),
-			getDescription(info, dom, manifest).catch(() => null),
-		]);
-
-		logger.succ(`Successfuly fetched metadata of ${instance.host}`);
-
-		const updates = {
-			infoUpdatedAt: new Date(),
-		} as Record<string, any>;
-
-		if (info) {
-			updates.softwareName = info.software?.name.toLowerCase();
-			updates.softwareVersion = info.software?.version;
-			updates.openRegistrations = info.openRegistrations;
-			updates.maintainerName = info.metadata ? info.metadata.maintainer ? (info.metadata.maintainer.name || null) : null : null;
-			updates.maintainerEmail = info.metadata ? info.metadata.maintainer ? (info.metadata.maintainer.email || null) : null : null;
-		}
-
-		if (name) updates.name = name;
-		if (description) updates.description = description;
-		if (icon || favicon) updates.iconUrl = icon || favicon;
-		if (favicon) updates.faviconUrl = favicon;
-		if (themeColor) updates.themeColor = themeColor;
-
-		await Instances.update(instance.id, updates);
-
-		logger.succ(`Successfuly updated metadata of ${instance.host}`);
-	} catch (e) {
-		logger.error(`Failed to update metadata of ${instance.host}: ${e}`);
-	} finally {
-		unlock();
-	}
-}
-
-type NodeInfo = {
-	openRegistrations?: any;
-	software?: {
-		name?: any;
-		version?: any;
-	};
-	metadata?: {
-		name?: any;
-		nodeName?: any;
-		nodeDescription?: any;
-		description?: any;
-		maintainer?: {
-			name?: any;
-			email?: any;
-		};
-	};
-};
-
-async function fetchNodeinfo(instance: Instance): Promise<NodeInfo> {
-	logger.info(`Fetching nodeinfo of ${instance.host} ...`);
-
-	try {
-		const wellknown = await getJson('https://' + instance.host + '/.well-known/nodeinfo')
-			.catch(e => {
-				if (e.statusCode === 404) {
-					throw 'No nodeinfo provided';
-				} else {
-					throw e.statusCode || e.message;
-				}
-			}) as Record<string, unknown>;
-
-		if (wellknown.links == null || !Array.isArray(wellknown.links)) {
-			throw 'No wellknown links';
-		}
-
-		const links = wellknown.links as any[];
-
-		const lnik1_0 = links.find(link => link.rel === 'http://nodeinfo.diaspora.software/ns/schema/1.0');
-		const lnik2_0 = links.find(link => link.rel === 'http://nodeinfo.diaspora.software/ns/schema/2.0');
-		const lnik2_1 = links.find(link => link.rel === 'http://nodeinfo.diaspora.software/ns/schema/2.1');
-		const link = lnik2_1 || lnik2_0 || lnik1_0;
-
-		if (link == null) {
-			throw 'No nodeinfo link provided';
-		}
-
-		const info = await getJson(link.href)
-			.catch(e => {
-				throw e.statusCode || e.message;
-			});
-
-		logger.succ(`Successfuly fetched nodeinfo of ${instance.host}`);
-
-		return info as NodeInfo;
-	} catch (e) {
-		logger.error(`Failed to fetch nodeinfo of ${instance.host}: ${e}`);
-
-		throw e;
-	}
-}
-
-async function fetchDom(instance: Instance): Promise<DOMWindow['document']> {
-	logger.info(`Fetching HTML of ${instance.host} ...`);
-
-	const url = 'https://' + instance.host;
-
-	const html = await getHtml(url);
-
-	const { window } = new JSDOM(html);
-	const doc = window.document;
-
-	return doc;
-}
-
-async function fetchManifest(instance: Instance): Promise<Record<string, unknown> | null> {
-	const url = 'https://' + instance.host;
-
-	const manifestUrl = url + '/manifest.json';
-
-	const manifest = await getJson(manifestUrl) as Record<string, unknown>;
-
-	return manifest;
-}
-
-async function fetchFaviconUrl(instance: Instance, doc: DOMWindow['document'] | null): Promise<string | null> {
-	const url = 'https://' + instance.host;
-
-	if (doc) {
-		// https://github.com/misskey-dev/misskey/pull/8220#issuecomment-1025104043
-		const href = Array.from(doc.getElementsByTagName('link')).reverse().find(link => link.relList.contains('icon'))?.href;
-
-		if (href) {
-			return (new URL(href, url)).href;
-		}
-	}
-
-	const faviconUrl = url + '/favicon.ico';
-
-	const favicon = await fetch(faviconUrl, {
-		// TODO
-		//timeout: 10000,
-		agent: getAgentByUrl,
-	});
-
-	if (favicon.ok) {
-		return faviconUrl;
-	}
-
-	return null;
-}
-
-async function fetchIconUrl(instance: Instance, doc: DOMWindow['document'] | null, manifest: Record<string, any> | null): Promise<string | null> {
-	if (manifest && manifest.icons && manifest.icons.length > 0 && manifest.icons[0].src) {
-		const url = 'https://' + instance.host;
-		return (new URL(manifest.icons[0].src, url)).href;
-	}
-
-	if (doc) {
-		const url = 'https://' + instance.host;
-
-		// https://github.com/misskey-dev/misskey/pull/8220#issuecomment-1025104043
-		const links = Array.from(doc.getElementsByTagName('link')).reverse();
-		// https://github.com/misskey-dev/misskey/pull/8220/files/0ec4eba22a914e31b86874f12448f88b3e58dd5a#r796487559
-		const href = 
-			[
-				links.find(link => link.relList.contains('apple-touch-icon-precomposed'))?.href,
-				links.find(link => link.relList.contains('apple-touch-icon'))?.href,
-				links.find(link => link.relList.contains('icon'))?.href,
-			]
-			.find(href => href);
-
-		if (href) {
-			return (new URL(href, url)).href;
-		}
-	}
-
-	return null;
-}
-
-async function getThemeColor(info: NodeInfo | null, doc: DOMWindow['document'] | null, manifest: Record<string, any> | null): Promise<string | null> {
-	const themeColor = info?.metadata?.themeColor || doc?.querySelector('meta[name="theme-color"]')?.getAttribute('content') || manifest?.theme_color;
-
-	if (themeColor) {
-		const color = new tinycolor(themeColor);
-		if (color.isValid()) return color.toHexString();
-	}
-
-	return null;
-}
-
-async function getSiteName(info: NodeInfo | null, doc: DOMWindow['document'] | null, manifest: Record<string, any> | null): Promise<string | null> {
-	if (info && info.metadata) {
-		if (info.metadata.nodeName || info.metadata.name) {
-			return info.metadata.nodeName || info.metadata.name;
-		}
-	}
-
-	if (doc) {
-		const og = doc.querySelector('meta[property="og:title"]')?.getAttribute('content');
-
-		if (og) {
-			return og;
-		}
-	}
-
-	if (manifest) {
-		return manifest?.name || manifest?.short_name;
-	}
-
-	return null;
-}
-
-async function getDescription(info: NodeInfo | null, doc: DOMWindow['document'] | null, manifest: Record<string, any> | null): Promise<string | null> {
-	if (info && info.metadata) {
-		if (info.metadata.nodeDescription || info.metadata.description) {
-			return info.metadata.nodeDescription || info.metadata.description;
-		}
-	}
-
-	if (doc) {
-		const meta = doc.querySelector('meta[name="description"]')?.getAttribute('content');
-		if (meta) {
-			return meta;
-		}
-
-		const og = doc.querySelector('meta[property="og:description"]')?.getAttribute('content');
-		if (og) {
-			return og;
-		}
-	}
-
-	if (manifest) {
-		return manifest?.name || manifest?.short_name;
-	}
-
-	return null;
-}
diff --git a/packages/backend/src/services/following/create.ts b/packages/backend/src/services/following/create.ts
deleted file mode 100644
index 72c24676bb..0000000000
--- a/packages/backend/src/services/following/create.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-import { publishMainStream, publishUserEvent } from '@/services/stream.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderFollow from '@/remote/activitypub/renderer/follow.js';
-import renderAccept from '@/remote/activitypub/renderer/accept.js';
-import renderReject from '@/remote/activitypub/renderer/reject.js';
-import { deliver } from '@/queue/index.js';
-import createFollowRequest from './requests/create.js';
-import { registerOrFetchInstanceDoc } from '../register-or-fetch-instance-doc.js';
-import Logger from '../logger.js';
-import { IdentifiableError } from '@/misc/identifiable-error.js';
-import { User } from '@/models/entities/user.js';
-import { Followings, Users, FollowRequests, Blockings, Instances, UserProfiles } from '@/models/index.js';
-import { instanceChart, perUserFollowingChart } from '@/services/chart/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { createNotification } from '../create-notification.js';
-import { isDuplicateKeyValueError } from '@/misc/is-duplicate-key-value-error.js';
-import { Packed } from '@/misc/schema.js';
-import { getActiveWebhooks } from '@/misc/webhook-cache.js';
-import { webhookDeliver } from '@/queue/index.js';
-
-const logger = new Logger('following/create');
-
-export async function insertFollowingDoc(followee: { id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']; sharedInbox: User['sharedInbox'] }, follower: { id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']; sharedInbox: User['sharedInbox'] }) {
-	if (follower.id === followee.id) return;
-
-	let alreadyFollowed = false;
-
-	await Followings.insert({
-		id: genId(),
-		createdAt: new Date(),
-		followerId: follower.id,
-		followeeId: followee.id,
-
-		// 非正規化
-		followerHost: follower.host,
-		followerInbox: Users.isRemoteUser(follower) ? follower.inbox : null,
-		followerSharedInbox: Users.isRemoteUser(follower) ? follower.sharedInbox : null,
-		followeeHost: followee.host,
-		followeeInbox: Users.isRemoteUser(followee) ? followee.inbox : null,
-		followeeSharedInbox: Users.isRemoteUser(followee) ? followee.sharedInbox : null,
-	}).catch(e => {
-		if (isDuplicateKeyValueError(e) && Users.isRemoteUser(follower) && Users.isLocalUser(followee)) {
-			logger.info(`Insert duplicated ignore. ${follower.id} => ${followee.id}`);
-			alreadyFollowed = true;
-		} else {
-			throw e;
-		}
-	});
-
-	const req = await FollowRequests.findOneBy({
-		followeeId: followee.id,
-		followerId: follower.id,
-	});
-
-	if (req) {
-		await FollowRequests.delete({
-			followeeId: followee.id,
-			followerId: follower.id,
-		});
-
-		// 通知を作成
-		createNotification(follower.id, 'followRequestAccepted', {
-			notifierId: followee.id,
-		});
-	}
-
-	if (alreadyFollowed) return;
-
-	//#region Increment counts
-	await Promise.all([
-		Users.increment({ id: follower.id }, 'followingCount', 1),
-		Users.increment({ id: followee.id }, 'followersCount', 1),
-	]);
-	//#endregion
-
-	//#region Update instance stats
-	if (Users.isRemoteUser(follower) && Users.isLocalUser(followee)) {
-		registerOrFetchInstanceDoc(follower.host).then(i => {
-			Instances.increment({ id: i.id }, 'followingCount', 1);
-			instanceChart.updateFollowing(i.host, true);
-		});
-	} else if (Users.isLocalUser(follower) && Users.isRemoteUser(followee)) {
-		registerOrFetchInstanceDoc(followee.host).then(i => {
-			Instances.increment({ id: i.id }, 'followersCount', 1);
-			instanceChart.updateFollowers(i.host, true);
-		});
-	}
-	//#endregion
-
-	perUserFollowingChart.update(follower, followee, true);
-
-	// Publish follow event
-	if (Users.isLocalUser(follower)) {
-		Users.pack(followee.id, follower, {
-			detail: true,
-		}).then(async packed => {
-			publishUserEvent(follower.id, 'follow', packed as Packed<"UserDetailedNotMe">);
-			publishMainStream(follower.id, 'follow', packed as Packed<"UserDetailedNotMe">);
-
-			const webhooks = (await getActiveWebhooks()).filter(x => x.userId === follower.id && x.on.includes('follow'));
-			for (const webhook of webhooks) {
-				webhookDeliver(webhook, 'follow', {
-					user: packed,
-				});
-			}
-		});
-	}
-
-	// Publish followed event
-	if (Users.isLocalUser(followee)) {
-		Users.pack(follower.id, followee).then(async packed => {
-			publishMainStream(followee.id, 'followed', packed);
-
-			const webhooks = (await getActiveWebhooks()).filter(x => x.userId === followee.id && x.on.includes('followed'));
-			for (const webhook of webhooks) {
-				webhookDeliver(webhook, 'followed', {
-					user: packed,
-				});
-			}
-		});
-
-		// 通知を作成
-		createNotification(followee.id, 'follow', {
-			notifierId: follower.id,
-		});
-	}
-}
-
-export default async function(_follower: { id: User['id'] }, _followee: { id: User['id'] }, requestId?: string) {
-	const [follower, followee] = await Promise.all([
-		Users.findOneByOrFail({ id: _follower.id }),
-		Users.findOneByOrFail({ id: _followee.id }),
-	]);
-
-	// check blocking
-	const [blocking, blocked] = await Promise.all([
-		Blockings.findOneBy({
-			blockerId: follower.id,
-			blockeeId: followee.id,
-		}),
-		Blockings.findOneBy({
-			blockerId: followee.id,
-			blockeeId: follower.id,
-		}),
-	]);
-
-	if (Users.isRemoteUser(follower) && Users.isLocalUser(followee) && blocked) {
-		// リモートフォローを受けてブロックしていた場合は、エラーにするのではなくRejectを送り返しておしまい。
-		const content = renderActivity(renderReject(renderFollow(follower, followee, requestId), followee));
-		deliver(followee , content, follower.inbox);
-		return;
-	} else if (Users.isRemoteUser(follower) && Users.isLocalUser(followee) && blocking) {
-		// リモートフォローを受けてブロックされているはずの場合だったら、ブロック解除しておく。
-		await Blockings.delete(blocking.id);
-	} else {
-		// それ以外は単純に例外
-		if (blocking != null) throw new IdentifiableError('710e8fb0-b8c3-4922-be49-d5d93d8e6a6e', 'blocking');
-		if (blocked != null) throw new IdentifiableError('3338392a-f764-498d-8855-db939dcf8c48', 'blocked');
-	}
-
-	const followeeProfile = await UserProfiles.findOneByOrFail({ userId: followee.id });
-
-	// フォロー対象が鍵アカウントである or
-	// フォロワーがBotであり、フォロー対象がBotからのフォローに慎重である or
-	// フォロワーがローカルユーザーであり、フォロー対象がリモートユーザーである
-	// 上記のいずれかに当てはまる場合はすぐフォローせずにフォローリクエストを発行しておく
-	if (followee.isLocked || (followeeProfile.carefulBot && follower.isBot) || (Users.isLocalUser(follower) && Users.isRemoteUser(followee))) {
-		let autoAccept = false;
-
-		// 鍵アカウントであっても、既にフォローされていた場合はスルー
-		const following = await Followings.findOneBy({
-			followerId: follower.id,
-			followeeId: followee.id,
-		});
-		if (following) {
-			autoAccept = true;
-		}
-
-		// フォローしているユーザーは自動承認オプション
-		if (!autoAccept && (Users.isLocalUser(followee) && followeeProfile.autoAcceptFollowed)) {
-			const followed = await Followings.findOneBy({
-				followerId: followee.id,
-				followeeId: follower.id,
-			});
-
-			if (followed) autoAccept = true;
-		}
-
-		if (!autoAccept) {
-			await createFollowRequest(follower, followee, requestId);
-			return;
-		}
-	}
-
-	await insertFollowingDoc(followee, follower);
-
-	if (Users.isRemoteUser(follower) && Users.isLocalUser(followee)) {
-		const content = renderActivity(renderAccept(renderFollow(follower, followee, requestId), followee));
-		deliver(followee, content, follower.inbox);
-	}
-}
diff --git a/packages/backend/src/services/following/delete.ts b/packages/backend/src/services/following/delete.ts
deleted file mode 100644
index 91b5a3d61d..0000000000
--- a/packages/backend/src/services/following/delete.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { publishMainStream, publishUserEvent } from '@/services/stream.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderFollow from '@/remote/activitypub/renderer/follow.js';
-import renderUndo from '@/remote/activitypub/renderer/undo.js';
-import renderReject from '@/remote/activitypub/renderer/reject.js';
-import { deliver, webhookDeliver } from '@/queue/index.js';
-import Logger from '../logger.js';
-import { registerOrFetchInstanceDoc } from '../register-or-fetch-instance-doc.js';
-import { User } from '@/models/entities/user.js';
-import { Followings, Users, Instances } from '@/models/index.js';
-import { instanceChart, perUserFollowingChart } from '@/services/chart/index.js';
-import { getActiveWebhooks } from '@/misc/webhook-cache.js';
-
-const logger = new Logger('following/delete');
-
-export default async function(follower: { id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']; sharedInbox: User['sharedInbox']; }, followee: { id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']; sharedInbox: User['sharedInbox']; }, silent = false) {
-	const following = await Followings.findOneBy({
-		followerId: follower.id,
-		followeeId: followee.id,
-	});
-
-	if (following == null) {
-		logger.warn('フォロー解除がリクエストされましたがフォローしていませんでした');
-		return;
-	}
-
-	await Followings.delete(following.id);
-
-	decrementFollowing(follower, followee);
-
-	// Publish unfollow event
-	if (!silent && Users.isLocalUser(follower)) {
-		Users.pack(followee.id, follower, {
-			detail: true,
-		}).then(async packed => {
-			publishUserEvent(follower.id, 'unfollow', packed);
-			publishMainStream(follower.id, 'unfollow', packed);
-
-			const webhooks = (await getActiveWebhooks()).filter(x => x.userId === follower.id && x.on.includes('unfollow'));
-			for (const webhook of webhooks) {
-				webhookDeliver(webhook, 'unfollow', {
-					user: packed,
-				});
-			}
-		});
-	}
-
-	if (Users.isLocalUser(follower) && Users.isRemoteUser(followee)) {
-		const content = renderActivity(renderUndo(renderFollow(follower, followee), follower));
-		deliver(follower, content, followee.inbox);
-	}
-
-	if (Users.isLocalUser(followee) && Users.isRemoteUser(follower)) {
-		// local user has null host
-		const content = renderActivity(renderReject(renderFollow(follower, followee), followee));
-		deliver(followee, content, follower.inbox);
-	}
-}
-
-export async function decrementFollowing(follower: { id: User['id']; host: User['host']; }, followee: { id: User['id']; host: User['host']; }) {
-	//#region Decrement following / followers counts
-	await Promise.all([
-		Users.decrement({ id: follower.id }, 'followingCount', 1),
-		Users.decrement({ id: followee.id }, 'followersCount', 1),
-	]);
-	//#endregion
-
-	//#region Update instance stats
-	if (Users.isRemoteUser(follower) && Users.isLocalUser(followee)) {
-		registerOrFetchInstanceDoc(follower.host).then(i => {
-			Instances.decrement({ id: i.id }, 'followingCount', 1);
-			instanceChart.updateFollowing(i.host, false);
-		});
-	} else if (Users.isLocalUser(follower) && Users.isRemoteUser(followee)) {
-		registerOrFetchInstanceDoc(followee.host).then(i => {
-			Instances.decrement({ id: i.id }, 'followersCount', 1);
-			instanceChart.updateFollowers(i.host, false);
-		});
-	}
-	//#endregion
-
-	perUserFollowingChart.update(follower, followee, false);
-}
diff --git a/packages/backend/src/services/following/reject.ts b/packages/backend/src/services/following/reject.ts
deleted file mode 100644
index 691fca2456..0000000000
--- a/packages/backend/src/services/following/reject.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderFollow from '@/remote/activitypub/renderer/follow.js';
-import renderReject from '@/remote/activitypub/renderer/reject.js';
-import { deliver, webhookDeliver } from '@/queue/index.js';
-import { publishMainStream, publishUserEvent } from '@/services/stream.js';
-import { User, ILocalUser, IRemoteUser } from '@/models/entities/user.js';
-import { Users, FollowRequests, Followings } from '@/models/index.js';
-import { decrementFollowing } from './delete.js';
-import { getActiveWebhooks } from '@/misc/webhook-cache.js';
-
-type Local = ILocalUser | {
-	id: ILocalUser['id'];
-	host: ILocalUser['host'];
-	uri: ILocalUser['uri']
-};
-type Remote = IRemoteUser | {
-	id: IRemoteUser['id'];
-	host: IRemoteUser['host'];
-	uri: IRemoteUser['uri'];
-	inbox: IRemoteUser['inbox'];
-};
-type Both = Local | Remote;
-
-/**
- * API following/request/reject
- */
-export async function rejectFollowRequest(user: Local, follower: Both) {
-	if (Users.isRemoteUser(follower)) {
-		deliverReject(user, follower);
-	}
-
-	await removeFollowRequest(user, follower);
-
-	if (Users.isLocalUser(follower)) {
-		publishUnfollow(user, follower);
-	}
-}
-
-/**
- * API following/reject
- */
-export async function rejectFollow(user: Local, follower: Both) {
-	if (Users.isRemoteUser(follower)) {
-		deliverReject(user, follower);
-	}
-
-	await removeFollow(user, follower);
-
-	if (Users.isLocalUser(follower)) {
-		publishUnfollow(user, follower);
-	}
-}
-
-/**
- * AP Reject/Follow
- */
-export async function remoteReject(actor: Remote, follower: Local) {
-	await removeFollowRequest(actor, follower);
-	await removeFollow(actor, follower);
-	publishUnfollow(actor, follower);
-}
-
-/**
- * Remove follow request record
- */
-async function removeFollowRequest(followee: Both, follower: Both) {
-	const request = await FollowRequests.findOneBy({
-		followeeId: followee.id,
-		followerId: follower.id,
-	});
-
-	if (!request) return;
-
-	await FollowRequests.delete(request.id);
-}
-
-/**
- * Remove follow record
- */
-async function removeFollow(followee: Both, follower: Both) {
-	const following = await Followings.findOneBy({
-		followeeId: followee.id,
-		followerId: follower.id,
-	});
-
-	if (!following) return;
-
-	await Followings.delete(following.id);
-	decrementFollowing(follower, followee);
-}
-
-/**
- * Deliver Reject to remote
- */
-async function deliverReject(followee: Local, follower: Remote) {
-	const request = await FollowRequests.findOneBy({
-		followeeId: followee.id,
-		followerId: follower.id,
-	});
-
-	const content = renderActivity(renderReject(renderFollow(follower, followee, request?.requestId || undefined), followee));
-	deliver(followee, content, follower.inbox);
-}
-
-/**
- * Publish unfollow to local
- */
-async function publishUnfollow(followee: Both, follower: Local) {
-	const packedFollowee = await Users.pack(followee.id, follower, {
-		detail: true,
-	});
-
-	publishUserEvent(follower.id, 'unfollow', packedFollowee);
-	publishMainStream(follower.id, 'unfollow', packedFollowee);
-
-	const webhooks = (await getActiveWebhooks()).filter(x => x.userId === follower.id && x.on.includes('unfollow'));
-	for (const webhook of webhooks) {
-		webhookDeliver(webhook, 'unfollow', {
-			user: packedFollowee,
-		});
-	}
-}
diff --git a/packages/backend/src/services/following/requests/accept-all.ts b/packages/backend/src/services/following/requests/accept-all.ts
deleted file mode 100644
index 5fbb549e01..0000000000
--- a/packages/backend/src/services/following/requests/accept-all.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import accept from './accept.js';
-import { User } from '@/models/entities/user.js';
-import { FollowRequests, Users } from '@/models/index.js';
-
-/**
- * 指定したユーザー宛てのフォローリクエストをすべて承認
- * @param user ユーザー
- */
-export default async function(user: { id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']; sharedInbox: User['sharedInbox']; }) {
-	const requests = await FollowRequests.findBy({
-		followeeId: user.id,
-	});
-
-	for (const request of requests) {
-		const follower = await Users.findOneByOrFail({ id: request.followerId });
-		accept(user, follower);
-	}
-}
diff --git a/packages/backend/src/services/following/requests/accept.ts b/packages/backend/src/services/following/requests/accept.ts
deleted file mode 100644
index 20829f70c7..0000000000
--- a/packages/backend/src/services/following/requests/accept.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderFollow from '@/remote/activitypub/renderer/follow.js';
-import renderAccept from '@/remote/activitypub/renderer/accept.js';
-import { deliver } from '@/queue/index.js';
-import { publishMainStream } from '@/services/stream.js';
-import { insertFollowingDoc } from '../create.js';
-import { User, ILocalUser, CacheableUser } from '@/models/entities/user.js';
-import { FollowRequests, Users } from '@/models/index.js';
-import { IdentifiableError } from '@/misc/identifiable-error.js';
-
-export default async function(followee: { id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']; sharedInbox: User['sharedInbox']; }, follower: CacheableUser) {
-	const request = await FollowRequests.findOneBy({
-		followeeId: followee.id,
-		followerId: follower.id,
-	});
-
-	if (request == null) {
-		throw new IdentifiableError('8884c2dd-5795-4ac9-b27e-6a01d38190f9', 'No follow request.');
-	}
-
-	await insertFollowingDoc(followee, follower);
-
-	if (Users.isRemoteUser(follower) && Users.isLocalUser(followee)) {
-		const content = renderActivity(renderAccept(renderFollow(follower, followee, request.requestId!), followee));
-		deliver(followee, content, follower.inbox);
-	}
-
-	Users.pack(followee.id, followee, {
-		detail: true,
-	}).then(packed => publishMainStream(followee.id, 'meUpdated', packed));
-}
diff --git a/packages/backend/src/services/following/requests/cancel.ts b/packages/backend/src/services/following/requests/cancel.ts
deleted file mode 100644
index 56531fa1fd..0000000000
--- a/packages/backend/src/services/following/requests/cancel.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderFollow from '@/remote/activitypub/renderer/follow.js';
-import renderUndo from '@/remote/activitypub/renderer/undo.js';
-import { deliver } from '@/queue/index.js';
-import { publishMainStream } from '@/services/stream.js';
-import { IdentifiableError } from '@/misc/identifiable-error.js';
-import { User, ILocalUser } from '@/models/entities/user.js';
-import { Users, FollowRequests } from '@/models/index.js';
-
-export default async function(followee: { id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox'] }, follower: { id: User['id']; host: User['host']; uri: User['host'] }) {
-	if (Users.isRemoteUser(followee)) {
-		const content = renderActivity(renderUndo(renderFollow(follower, followee), follower));
-
-		if (Users.isLocalUser(follower)) { // 本来このチェックは不要だけどTSに怒られるので
-			deliver(follower, content, followee.inbox);
-		}
-	}
-
-	const request = await FollowRequests.findOneBy({
-		followeeId: followee.id,
-		followerId: follower.id,
-	});
-
-	if (request == null) {
-		throw new IdentifiableError('17447091-ce07-46dd-b331-c1fd4f15b1e7', 'request not found');
-	}
-
-	await FollowRequests.delete({
-		followeeId: followee.id,
-		followerId: follower.id,
-	});
-
-	Users.pack(followee.id, followee, {
-		detail: true,
-	}).then(packed => publishMainStream(followee.id, 'meUpdated', packed));
-}
diff --git a/packages/backend/src/services/following/requests/create.ts b/packages/backend/src/services/following/requests/create.ts
deleted file mode 100644
index bda2f8f92d..0000000000
--- a/packages/backend/src/services/following/requests/create.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { publishMainStream } from '@/services/stream.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderFollow from '@/remote/activitypub/renderer/follow.js';
-import { deliver } from '@/queue/index.js';
-import { User } from '@/models/entities/user.js';
-import { Blockings, FollowRequests, Users } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { createNotification } from '../../create-notification.js';
-
-export default async function(follower: { id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']; sharedInbox: User['sharedInbox']; }, followee: { id: User['id']; host: User['host']; uri: User['host']; inbox: User['inbox']; sharedInbox: User['sharedInbox']; }, requestId?: string) {
-	if (follower.id === followee.id) return;
-
-	// check blocking
-	const [blocking, blocked] = await Promise.all([
-		Blockings.findOneBy({
-			blockerId: follower.id,
-			blockeeId: followee.id,
-		}),
-		Blockings.findOneBy({
-			blockerId: followee.id,
-			blockeeId: follower.id,
-		}),
-	]);
-
-	if (blocking != null) throw new Error('blocking');
-	if (blocked != null) throw new Error('blocked');
-
-	const followRequest = await FollowRequests.insert({
-		id: genId(),
-		createdAt: new Date(),
-		followerId: follower.id,
-		followeeId: followee.id,
-		requestId,
-
-		// 非正規化
-		followerHost: follower.host,
-		followerInbox: Users.isRemoteUser(follower) ? follower.inbox : undefined,
-		followerSharedInbox: Users.isRemoteUser(follower) ? follower.sharedInbox : undefined,
-		followeeHost: followee.host,
-		followeeInbox: Users.isRemoteUser(followee) ? followee.inbox : undefined,
-		followeeSharedInbox: Users.isRemoteUser(followee) ? followee.sharedInbox : undefined,
-	}).then(x => FollowRequests.findOneByOrFail(x.identifiers[0]));
-
-	// Publish receiveRequest event
-	if (Users.isLocalUser(followee)) {
-		Users.pack(follower.id, followee).then(packed => publishMainStream(followee.id, 'receiveFollowRequest', packed));
-
-		Users.pack(followee.id, followee, {
-			detail: true,
-		}).then(packed => publishMainStream(followee.id, 'meUpdated', packed));
-
-		// 通知を作成
-		createNotification(followee.id, 'receiveFollowRequest', {
-			notifierId: follower.id,
-			followRequestId: followRequest.id,
-		});
-	}
-
-	if (Users.isLocalUser(follower) && Users.isRemoteUser(followee)) {
-		const content = renderActivity(renderFollow(follower, followee));
-		deliver(follower, content, followee.inbox);
-	}
-}
diff --git a/packages/backend/src/services/i/pin.ts b/packages/backend/src/services/i/pin.ts
deleted file mode 100644
index f35392a34b..0000000000
--- a/packages/backend/src/services/i/pin.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import config from '@/config/index.js';
-import renderAdd from '@/remote/activitypub/renderer/add.js';
-import renderRemove from '@/remote/activitypub/renderer/remove.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import { IdentifiableError } from '@/misc/identifiable-error.js';
-import { User } from '@/models/entities/user.js';
-import { Note } from '@/models/entities/note.js';
-import { Notes, UserNotePinings, Users } from '@/models/index.js';
-import { UserNotePining } from '@/models/entities/user-note-pining.js';
-import { genId } from '@/misc/gen-id.js';
-import { deliverToFollowers } from '@/remote/activitypub/deliver-manager.js';
-import { deliverToRelays } from '../relay.js';
-
-/**
- * 指定した投稿をピン留めします
- * @param user
- * @param noteId
- */
-export async function addPinned(user: { id: User['id']; host: User['host']; }, noteId: Note['id']) {
-	// Fetch pinee
-	const note = await Notes.findOneBy({
-		id: noteId,
-		userId: user.id,
-	});
-
-	if (note == null) {
-		throw new IdentifiableError('70c4e51f-5bea-449c-a030-53bee3cce202', 'No such note.');
-	}
-
-	const pinings = await UserNotePinings.findBy({ userId: user.id });
-
-	if (pinings.length >= 5) {
-		throw new IdentifiableError('15a018eb-58e5-4da1-93be-330fcc5e4e1a', 'You can not pin notes any more.');
-	}
-
-	if (pinings.some(pining => pining.noteId === note.id)) {
-		throw new IdentifiableError('23f0cf4e-59a3-4276-a91d-61a5891c1514', 'That note has already been pinned.');
-	}
-
-	await UserNotePinings.insert({
-		id: genId(),
-		createdAt: new Date(),
-		userId: user.id,
-		noteId: note.id,
-	} as UserNotePining);
-
-	// Deliver to remote followers
-	if (Users.isLocalUser(user)) {
-		deliverPinnedChange(user.id, note.id, true);
-	}
-}
-
-/**
- * 指定した投稿のピン留めを解除します
- * @param user
- * @param noteId
- */
-export async function removePinned(user: { id: User['id']; host: User['host']; }, noteId: Note['id']) {
-	// Fetch unpinee
-	const note = await Notes.findOneBy({
-		id: noteId,
-		userId: user.id,
-	});
-
-	if (note == null) {
-		throw new IdentifiableError('b302d4cf-c050-400a-bbb3-be208681f40c', 'No such note.');
-	}
-
-	UserNotePinings.delete({
-		userId: user.id,
-		noteId: note.id,
-	});
-
-	// Deliver to remote followers
-	if (Users.isLocalUser(user)) {
-		deliverPinnedChange(user.id, noteId, false);
-	}
-}
-
-export async function deliverPinnedChange(userId: User['id'], noteId: Note['id'], isAddition: boolean) {
-	const user = await Users.findOneBy({ id: userId });
-	if (user == null) throw new Error('user not found');
-
-	if (!Users.isLocalUser(user)) return;
-
-	const target = `${config.url}/users/${user.id}/collections/featured`;
-	const item = `${config.url}/notes/${noteId}`;
-	const content = renderActivity(isAddition ? renderAdd(user, target, item) : renderRemove(user, target, item));
-
-	deliverToFollowers(user, content);
-	deliverToRelays(user, content);
-}
diff --git a/packages/backend/src/services/i/update.ts b/packages/backend/src/services/i/update.ts
deleted file mode 100644
index 27bd38bd39..0000000000
--- a/packages/backend/src/services/i/update.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import renderUpdate from '@/remote/activitypub/renderer/update.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import { Users } from '@/models/index.js';
-import { User } from '@/models/entities/user.js';
-import { renderPerson } from '@/remote/activitypub/renderer/person.js';
-import { deliverToFollowers } from '@/remote/activitypub/deliver-manager.js';
-import { deliverToRelays } from '../relay.js';
-
-export async function publishToFollowers(userId: User['id']) {
-	const user = await Users.findOneBy({ id: userId });
-	if (user == null) throw new Error('user not found');
-
-	// フォロワーがリモートユーザーかつ投稿者がローカルユーザーならUpdateを配信
-	if (Users.isLocalUser(user)) {
-		const content = renderActivity(renderUpdate(await renderPerson(user), user));
-		deliverToFollowers(user, content);
-		deliverToRelays(user, content);
-	}
-}
diff --git a/packages/backend/src/services/insert-moderation-log.ts b/packages/backend/src/services/insert-moderation-log.ts
deleted file mode 100644
index 0a7c472d8d..0000000000
--- a/packages/backend/src/services/insert-moderation-log.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { ModerationLogs } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { User } from '@/models/entities/user.js';
-
-export async function insertModerationLog(moderator: { id: User['id'] }, type: string, info?: Record<string, any>) {
-	await ModerationLogs.insert({
-		id: genId(),
-		createdAt: new Date(),
-		userId: moderator.id,
-		type: type,
-		info: info || {},
-	});
-}
diff --git a/packages/backend/src/services/instance-actor.ts b/packages/backend/src/services/instance-actor.ts
deleted file mode 100644
index bddd0355a2..0000000000
--- a/packages/backend/src/services/instance-actor.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { createSystemUser } from './create-system-user.js';
-import { ILocalUser } from '@/models/entities/user.js';
-import { Users } from '@/models/index.js';
-import { Cache } from '@/misc/cache.js';
-import { IsNull } from 'typeorm';
-
-const ACTOR_USERNAME = 'instance.actor' as const;
-
-const cache = new Cache<ILocalUser>(Infinity);
-
-export async function getInstanceActor(): Promise<ILocalUser> {
-	const cached = cache.get(null);
-	if (cached) return cached;
-
-	const user = await Users.findOneBy({
-		host: IsNull(),
-		username: ACTOR_USERNAME,
-	}) as ILocalUser | undefined;
-
-	if (user) {
-		cache.set(null, user);
-		return user;
-	} else {
-		const created = await createSystemUser(ACTOR_USERNAME) as ILocalUser;
-		cache.set(null, created);
-		return created;
-	}
-}
diff --git a/packages/backend/src/services/logger.ts b/packages/backend/src/services/logger.ts
deleted file mode 100644
index 89d6d57209..0000000000
--- a/packages/backend/src/services/logger.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import cluster from 'node:cluster';
-import chalk from 'chalk';
-import { default as convertColor } from 'color-convert';
-import { format as dateFormat } from 'date-fns';
-import { envOption } from '../env.js';
-import config from '@/config/index.js';
-
-import * as SyslogPro from 'syslog-pro';
-
-type Domain = {
-	name: string;
-	color?: string;
-};
-
-type Level = 'error' | 'success' | 'warning' | 'debug' | 'info';
-
-export default class Logger {
-	private domain: Domain;
-	private parentLogger: Logger | null = null;
-	private store: boolean;
-	private syslogClient: any | null = null;
-
-	constructor(domain: string, color?: string, store = true) {
-		this.domain = {
-			name: domain,
-			color: color,
-		};
-		this.store = store;
-
-		if (config.syslog) {
-			this.syslogClient = new SyslogPro.RFC5424({
-				applacationName: 'Misskey',
-				timestamp: true,
-				encludeStructuredData: true,
-				color: true,
-				extendedColor: true,
-				server: {
-					target: config.syslog.host,
-					port: config.syslog.port,
-				},
-			});
-		}
-	}
-
-	public createSubLogger(domain: string, color?: string, store = true): Logger {
-		const logger = new Logger(domain, color, store);
-		logger.parentLogger = this;
-		return logger;
-	}
-
-	private log(level: Level, message: string, data?: Record<string, any> | null, important = false, subDomains: Domain[] = [], store = true): void {
-		if (envOption.quiet) return;
-		if (!this.store) store = false;
-		if (level === 'debug') store = false;
-
-		if (this.parentLogger) {
-			this.parentLogger.log(level, message, data, important, [this.domain].concat(subDomains), store);
-			return;
-		}
-
-		const time = dateFormat(new Date(), 'HH:mm:ss');
-		const worker = cluster.isPrimary ? '*' : cluster.worker.id;
-		const l =
-			level === 'error' ? important ? chalk.bgRed.white('ERR ') : chalk.red('ERR ') :
-			level === 'warning' ? chalk.yellow('WARN') :
-			level === 'success' ? important ? chalk.bgGreen.white('DONE') : chalk.green('DONE') :
-			level === 'debug' ? chalk.gray('VERB') :
-			level === 'info' ? chalk.blue('INFO') :
-			null;
-		const domains = [this.domain].concat(subDomains).map(d => d.color ? chalk.rgb(...convertColor.keyword.rgb(d.color))(d.name) : chalk.white(d.name));
-		const m =
-			level === 'error' ? chalk.red(message) :
-			level === 'warning' ? chalk.yellow(message) :
-			level === 'success' ? chalk.green(message) :
-			level === 'debug' ? chalk.gray(message) :
-			level === 'info' ? message :
-			null;
-
-		let log = `${l} ${worker}\t[${domains.join(' ')}]\t${m}`;
-		if (envOption.withLogTime) log = chalk.gray(time) + ' ' + log;
-
-		console.log(important ? chalk.bold(log) : log);
-
-		if (store) {
-			if (this.syslogClient) {
-				const send =
-					level === 'error' ? this.syslogClient.error :
-					level === 'warning' ? this.syslogClient.warning :
-					level === 'success' ? this.syslogClient.info :
-					level === 'debug' ? this.syslogClient.info :
-					level === 'info' ? this.syslogClient.info :
-					null as never;
-
-				send.bind(this.syslogClient)(message).catch(() => {});
-			}
-		}
-	}
-
-	public error(x: string | Error, data?: Record<string, any> | null, important = false): void { // 実行を継続できない状況で使う
-		if (x instanceof Error) {
-			data = data || {};
-			data.e = x;
-			this.log('error', x.toString(), data, important);
-		} else if (typeof x === 'object') {
-			this.log('error', `${(x as any).message || (x as any).name || x}`, data, important);
-		} else {
-			this.log('error', `${x}`, data, important);
-		}
-	}
-
-	public warn(message: string, data?: Record<string, any> | null, important = false): void { // 実行を継続できるが改善すべき状況で使う
-		this.log('warning', message, data, important);
-	}
-
-	public succ(message: string, data?: Record<string, any> | null, important = false): void { // 何かに成功した状況で使う
-		this.log('success', message, data, important);
-	}
-
-	public debug(message: string, data?: Record<string, any> | null, important = false): void { // デバッグ用に使う(開発者に必要だが利用者に不要な情報)
-		if (process.env.NODE_ENV !== 'production' || envOption.verbose) {
-			this.log('debug', message, data, important);
-		}
-	}
-
-	public info(message: string, data?: Record<string, any> | null, important = false): void { // それ以外
-		this.log('info', message, data, important);
-	}
-}
diff --git a/packages/backend/src/services/messages/create.ts b/packages/backend/src/services/messages/create.ts
deleted file mode 100644
index e6b3204922..0000000000
--- a/packages/backend/src/services/messages/create.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-import { CacheableUser, User } from '@/models/entities/user.js';
-import { UserGroup } from '@/models/entities/user-group.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { MessagingMessages, UserGroupJoinings, Mutings, Users } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { MessagingMessage } from '@/models/entities/messaging-message.js';
-import { publishMessagingStream, publishMessagingIndexStream, publishMainStream, publishGroupMessagingStream } from '@/services/stream.js';
-import { pushNotification } from '@/services/push-notification.js';
-import { Not } from 'typeorm';
-import { Note } from '@/models/entities/note.js';
-import renderNote from '@/remote/activitypub/renderer/note.js';
-import renderCreate from '@/remote/activitypub/renderer/create.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import { deliver } from '@/queue/index.js';
-
-export async function createMessage(user: { id: User['id']; host: User['host']; }, recipientUser: CacheableUser | undefined, recipientGroup: UserGroup | undefined, text: string | null | undefined, file: DriveFile | null, uri?: string) {
-	const message = {
-		id: genId(),
-		createdAt: new Date(),
-		fileId: file ? file.id : null,
-		recipientId: recipientUser ? recipientUser.id : null,
-		groupId: recipientGroup ? recipientGroup.id : null,
-		text: text ? text.trim() : null,
-		userId: user.id,
-		isRead: false,
-		reads: [] as any[],
-		uri,
-	} as MessagingMessage;
-
-	await MessagingMessages.insert(message);
-
-	const messageObj = await MessagingMessages.pack(message);
-
-	if (recipientUser) {
-		if (Users.isLocalUser(user)) {
-			// 自分のストリーム
-			publishMessagingStream(message.userId, recipientUser.id, 'message', messageObj);
-			publishMessagingIndexStream(message.userId, 'message', messageObj);
-			publishMainStream(message.userId, 'messagingMessage', messageObj);
-		}
-
-		if (Users.isLocalUser(recipientUser)) {
-			// 相手のストリーム
-			publishMessagingStream(recipientUser.id, message.userId, 'message', messageObj);
-			publishMessagingIndexStream(recipientUser.id, 'message', messageObj);
-			publishMainStream(recipientUser.id, 'messagingMessage', messageObj);
-		}
-	} else if (recipientGroup) {
-		// グループのストリーム
-		publishGroupMessagingStream(recipientGroup.id, 'message', messageObj);
-
-		// メンバーのストリーム
-		const joinings = await UserGroupJoinings.findBy({ userGroupId: recipientGroup.id });
-		for (const joining of joinings) {
-			publishMessagingIndexStream(joining.userId, 'message', messageObj);
-			publishMainStream(joining.userId, 'messagingMessage', messageObj);
-		}
-	}
-
-	// 2秒経っても(今回作成した)メッセージが既読にならなかったら「未読のメッセージがありますよ」イベントを発行する
-	setTimeout(async () => {
-		const freshMessage = await MessagingMessages.findOneBy({ id: message.id });
-		if (freshMessage == null) return; // メッセージが削除されている場合もある
-
-		if (recipientUser && Users.isLocalUser(recipientUser)) {
-			if (freshMessage.isRead) return; // 既読
-
-			//#region ただしミュートされているなら発行しない
-			const mute = await Mutings.findBy({
-				muterId: recipientUser.id,
-			});
-			if (mute.map(m => m.muteeId).includes(user.id)) return;
-			//#endregion
-
-			publishMainStream(recipientUser.id, 'unreadMessagingMessage', messageObj);
-			pushNotification(recipientUser.id, 'unreadMessagingMessage', messageObj);
-		} else if (recipientGroup) {
-			const joinings = await UserGroupJoinings.findBy({ userGroupId: recipientGroup.id, userId: Not(user.id) });
-			for (const joining of joinings) {
-				if (freshMessage.reads.includes(joining.userId)) return; // 既読
-				publishMainStream(joining.userId, 'unreadMessagingMessage', messageObj);
-				pushNotification(joining.userId, 'unreadMessagingMessage', messageObj);
-			}
-		}
-	}, 2000);
-
-	if (recipientUser && Users.isLocalUser(user) && Users.isRemoteUser(recipientUser)) {
-		const note = {
-			id: message.id,
-			createdAt: message.createdAt,
-			fileIds: message.fileId ? [ message.fileId ] : [],
-			text: message.text,
-			userId: message.userId,
-			visibility: 'specified',
-			mentions: [ recipientUser ].map(u => u.id),
-			mentionedRemoteUsers: JSON.stringify([ recipientUser ].map(u => ({
-				uri: u.uri,
-				username: u.username,
-				host: u.host,
-			}))),
-		} as Note;
-
-		const activity = renderActivity(renderCreate(await renderNote(note, false, true), note));
-
-		deliver(user, activity, recipientUser.inbox);
-	}
-	return messageObj;
-}
diff --git a/packages/backend/src/services/messages/delete.ts b/packages/backend/src/services/messages/delete.ts
deleted file mode 100644
index 1e7ce1981c..0000000000
--- a/packages/backend/src/services/messages/delete.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import config from '@/config/index.js';
-import { MessagingMessages, Users } from '@/models/index.js';
-import { MessagingMessage } from '@/models/entities/messaging-message.js';
-import { publishGroupMessagingStream, publishMessagingStream } from '@/services/stream.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderDelete from '@/remote/activitypub/renderer/delete.js';
-import renderTombstone from '@/remote/activitypub/renderer/tombstone.js';
-import { deliver } from '@/queue/index.js';
-
-export async function deleteMessage(message: MessagingMessage) {
-	await MessagingMessages.delete(message.id);
-	postDeleteMessage(message);
-}
-
-async function postDeleteMessage(message: MessagingMessage) {
-	if (message.recipientId) {
-		const user = await Users.findOneByOrFail({ id: message.userId });
-		const recipient = await Users.findOneByOrFail({ id: message.recipientId });
-
-		if (Users.isLocalUser(user)) publishMessagingStream(message.userId, message.recipientId, 'deleted', message.id);
-		if (Users.isLocalUser(recipient)) publishMessagingStream(message.recipientId, message.userId, 'deleted', message.id);
-
-		if (Users.isLocalUser(user) && Users.isRemoteUser(recipient)) {
-			const activity = renderActivity(renderDelete(renderTombstone(`${config.url}/notes/${message.id}`), user));
-			deliver(user, activity, recipient.inbox);
-		}
-	} else if (message.groupId) {
-		publishGroupMessagingStream(message.groupId, 'deleted', message.id);
-	}
-}
diff --git a/packages/backend/src/services/note/create.ts b/packages/backend/src/services/note/create.ts
deleted file mode 100644
index e2bf9d5b59..0000000000
--- a/packages/backend/src/services/note/create.ts
+++ /dev/null
@@ -1,692 +0,0 @@
-import * as mfm from 'mfm-js';
-import es from '../../db/elasticsearch.js';
-import { publishMainStream, publishNotesStream } from '@/services/stream.js';
-import DeliverManager from '@/remote/activitypub/deliver-manager.js';
-import renderNote from '@/remote/activitypub/renderer/note.js';
-import renderCreate from '@/remote/activitypub/renderer/create.js';
-import renderAnnounce from '@/remote/activitypub/renderer/announce.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import { resolveUser } from '@/remote/resolve-user.js';
-import config from '@/config/index.js';
-import { updateHashtags } from '../update-hashtag.js';
-import { concat } from '@/prelude/array.js';
-import { insertNoteUnread } from '@/services/note/unread.js';
-import { registerOrFetchInstanceDoc } from '../register-or-fetch-instance-doc.js';
-import { extractMentions } from '@/misc/extract-mentions.js';
-import { extractCustomEmojisFromMfm } from '@/misc/extract-custom-emojis-from-mfm.js';
-import { extractHashtags } from '@/misc/extract-hashtags.js';
-import { Note, IMentionedRemoteUsers } from '@/models/entities/note.js';
-import { Mutings, Users, NoteWatchings, Notes, Instances, UserProfiles, Antennas, Followings, MutedNotes, Channels, ChannelFollowings, Blockings, NoteThreadMutings } from '@/models/index.js';
-import { DriveFile } from '@/models/entities/drive-file.js';
-import { App } from '@/models/entities/app.js';
-import { Not, In } from 'typeorm';
-import { User, ILocalUser, IRemoteUser } from '@/models/entities/user.js';
-import { genId } from '@/misc/gen-id.js';
-import { notesChart, perUserNotesChart, activeUsersChart, instanceChart } from '@/services/chart/index.js';
-import { Poll, IPoll } from '@/models/entities/poll.js';
-import { createNotification } from '../create-notification.js';
-import { isDuplicateKeyValueError } from '@/misc/is-duplicate-key-value-error.js';
-import { checkHitAntenna } from '@/misc/check-hit-antenna.js';
-import { checkWordMute } from '@/misc/check-word-mute.js';
-import { addNoteToAntenna } from '../add-note-to-antenna.js';
-import { countSameRenotes } from '@/misc/count-same-renotes.js';
-import { deliverToRelays } from '../relay.js';
-import { Channel } from '@/models/entities/channel.js';
-import { normalizeForSearch } from '@/misc/normalize-for-search.js';
-import { getAntennas } from '@/misc/antenna-cache.js';
-import { endedPollNotificationQueue } from '@/queue/queues.js';
-import { webhookDeliver } from '@/queue/index.js';
-import { Cache } from '@/misc/cache.js';
-import { UserProfile } from '@/models/entities/user-profile.js';
-import { db } from '@/db/postgre.js';
-import { getActiveWebhooks } from '@/misc/webhook-cache.js';
-
-const mutedWordsCache = new Cache<{ userId: UserProfile['userId']; mutedWords: UserProfile['mutedWords']; }[]>(1000 * 60 * 5);
-
-type NotificationType = 'reply' | 'renote' | 'quote' | 'mention';
-
-class NotificationManager {
-	private notifier: { id: User['id']; };
-	private note: Note;
-	private queue: {
-		target: ILocalUser['id'];
-		reason: NotificationType;
-	}[];
-
-	constructor(notifier: { id: User['id']; }, note: Note) {
-		this.notifier = notifier;
-		this.note = note;
-		this.queue = [];
-	}
-
-	public push(notifiee: ILocalUser['id'], reason: NotificationType) {
-		// 自分自身へは通知しない
-		if (this.notifier.id === notifiee) return;
-
-		const exist = this.queue.find(x => x.target === notifiee);
-
-		if (exist) {
-			// 「メンションされているかつ返信されている」場合は、メンションとしての通知ではなく返信としての通知にする
-			if (reason !== 'mention') {
-				exist.reason = reason;
-			}
-		} else {
-			this.queue.push({
-				reason: reason,
-				target: notifiee,
-			});
-		}
-	}
-
-	public async deliver() {
-		for (const x of this.queue) {
-			// ミュート情報を取得
-			const mentioneeMutes = await Mutings.findBy({
-				muterId: x.target,
-			});
-
-			const mentioneesMutedUserIds = mentioneeMutes.map(m => m.muteeId);
-
-			// 通知される側のユーザーが通知する側のユーザーをミュートしていない限りは通知する
-			if (!mentioneesMutedUserIds.includes(this.notifier.id)) {
-				createNotification(x.target, x.reason, {
-					notifierId: this.notifier.id,
-					noteId: this.note.id,
-				});
-			}
-		}
-	}
-}
-
-type MinimumUser = {
-	id: User['id'];
-	host: User['host'];
-	username: User['username'];
-	uri: User['uri'];
-};
-
-type Option = {
-	createdAt?: Date | null;
-	name?: string | null;
-	text?: string | null;
-	reply?: Note | null;
-	renote?: Note | null;
-	files?: DriveFile[] | null;
-	poll?: IPoll | null;
-	localOnly?: boolean | null;
-	cw?: string | null;
-	visibility?: string;
-	visibleUsers?: MinimumUser[] | null;
-	channel?: Channel | null;
-	apMentions?: MinimumUser[] | null;
-	apHashtags?: string[] | null;
-	apEmojis?: string[] | null;
-	uri?: string | null;
-	url?: string | null;
-	app?: App | null;
-};
-
-export default async (user: { id: User['id']; username: User['username']; host: User['host']; isSilenced: User['isSilenced']; createdAt: User['createdAt']; }, data: Option, silent = false) => new Promise<Note>(async (res, rej) => {
-	// チャンネル外にリプライしたら対象のスコープに合わせる
-	// (クライアントサイドでやっても良い処理だと思うけどとりあえずサーバーサイドで)
-	if (data.reply && data.channel && data.reply.channelId !== data.channel.id) {
-		if (data.reply.channelId) {
-			data.channel = await Channels.findOneBy({ id: data.reply.channelId });
-		} else {
-			data.channel = null;
-		}
-	}
-
-	// チャンネル内にリプライしたら対象のスコープに合わせる
-	// (クライアントサイドでやっても良い処理だと思うけどとりあえずサーバーサイドで)
-	if (data.reply && (data.channel == null) && data.reply.channelId) {
-		data.channel = await Channels.findOneBy({ id: data.reply.channelId });
-	}
-
-	if (data.createdAt == null) data.createdAt = new Date();
-	if (data.visibility == null) data.visibility = 'public';
-	if (data.localOnly == null) data.localOnly = false;
-	if (data.channel != null) data.visibility = 'public';
-	if (data.channel != null) data.visibleUsers = [];
-	if (data.channel != null) data.localOnly = true;
-
-	// サイレンス
-	if (user.isSilenced && data.visibility === 'public' && data.channel == null) {
-		data.visibility = 'home';
-	}
-
-	// Renote対象が「ホームまたは全体」以外の公開範囲ならreject
-	if (data.renote && data.renote.visibility !== 'public' && data.renote.visibility !== 'home' && data.renote.userId !== user.id) {
-		return rej('Renote target is not public or home');
-	}
-
-	// Renote対象がpublicではないならhomeにする
-	if (data.renote && data.renote.visibility !== 'public' && data.visibility === 'public') {
-		data.visibility = 'home';
-	}
-
-	// Renote対象がfollowersならfollowersにする
-	if (data.renote && data.renote.visibility === 'followers') {
-		data.visibility = 'followers';
-	}
-
-	// 返信対象がpublicではないならhomeにする
-	if (data.reply && data.reply.visibility !== 'public' && data.visibility === 'public') {
-		data.visibility = 'home';
-	}
-
-	// ローカルのみをRenoteしたらローカルのみにする
-	if (data.renote && data.renote.localOnly && data.channel == null) {
-		data.localOnly = true;
-	}
-
-	// ローカルのみにリプライしたらローカルのみにする
-	if (data.reply && data.reply.localOnly && data.channel == null) {
-		data.localOnly = true;
-	}
-
-	if (data.text) {
-		data.text = data.text.trim();
-	} else {
-		data.text = null;
-	}
-
-	let tags = data.apHashtags;
-	let emojis = data.apEmojis;
-	let mentionedUsers = data.apMentions;
-
-	// Parse MFM if needed
-	if (!tags || !emojis || !mentionedUsers) {
-		const tokens = data.text ? mfm.parse(data.text)! : [];
-		const cwTokens = data.cw ? mfm.parse(data.cw)! : [];
-		const choiceTokens = data.poll && data.poll.choices
-			? concat(data.poll.choices.map(choice => mfm.parse(choice)!))
-			: [];
-
-		const combinedTokens = tokens.concat(cwTokens).concat(choiceTokens);
-
-		tags = data.apHashtags || extractHashtags(combinedTokens);
-
-		emojis = data.apEmojis || extractCustomEmojisFromMfm(combinedTokens);
-
-		mentionedUsers = data.apMentions || await extractMentionedUsers(user, combinedTokens);
-	}
-
-	tags = tags.filter(tag => Array.from(tag || '').length <= 128).splice(0, 32);
-
-	if (data.reply && (user.id !== data.reply.userId) && !mentionedUsers.some(u => u.id === data.reply!.userId)) {
-		mentionedUsers.push(await Users.findOneByOrFail({ id: data.reply!.userId }));
-	}
-
-	if (data.visibility === 'specified') {
-		if (data.visibleUsers == null) throw new Error('invalid param');
-
-		for (const u of data.visibleUsers) {
-			if (!mentionedUsers.some(x => x.id === u.id)) {
-				mentionedUsers.push(u);
-			}
-		}
-
-		if (data.reply && !data.visibleUsers.some(x => x.id === data.reply!.userId)) {
-			data.visibleUsers.push(await Users.findOneByOrFail({ id: data.reply!.userId }));
-		}
-	}
-
-	const note = await insertNote(user, data, tags, emojis, mentionedUsers);
-
-	res(note);
-
-	// 統計を更新
-	notesChart.update(note, true);
-	perUserNotesChart.update(user, note, true);
-
-	// Register host
-	if (Users.isRemoteUser(user)) {
-		registerOrFetchInstanceDoc(user.host).then(i => {
-			Instances.increment({ id: i.id }, 'notesCount', 1);
-			instanceChart.updateNote(i.host, note, true);
-		});
-	}
-
-	// ハッシュタグ更新
-	if (data.visibility === 'public' || data.visibility === 'home') {
-		updateHashtags(user, tags);
-	}
-
-	// Increment notes count (user)
-	incNotesCountOfUser(user);
-
-	// Word mute
-	mutedWordsCache.fetch(null, () => UserProfiles.find({
-		where: {
-			enableWordMute: true,
-		},
-		select: ['userId', 'mutedWords'],
-	})).then(us => {
-		for (const u of us) {
-			checkWordMute(note, { id: u.userId }, u.mutedWords).then(shouldMute => {
-				if (shouldMute) {
-					MutedNotes.insert({
-						id: genId(),
-						userId: u.userId,
-						noteId: note.id,
-						reason: 'word',
-					});
-				}
-			});
-		}
-	});
-
-	// Antenna
-	for (const antenna of (await getAntennas())) {
-		checkHitAntenna(antenna, note, user).then(hit => {
-			if (hit) {
-				addNoteToAntenna(antenna, note, user);
-			}
-		});
-	}
-
-	// Channel
-	if (note.channelId) {
-		ChannelFollowings.findBy({ followeeId: note.channelId }).then(followings => {
-			for (const following of followings) {
-				insertNoteUnread(following.followerId, note, {
-					isSpecified: false,
-					isMentioned: false,
-				});
-			}
-		});
-	}
-
-	if (data.reply) {
-		saveReply(data.reply, note);
-	}
-
-	// この投稿を除く指定したユーザーによる指定したノートのリノートが存在しないとき
-	if (data.renote && (await countSameRenotes(user.id, data.renote.id, note.id) === 0)) {
-		incRenoteCount(data.renote);
-	}
-
-	if (data.poll && data.poll.expiresAt) {
-		const delay = data.poll.expiresAt.getTime() - Date.now();
-		endedPollNotificationQueue.add({
-			noteId: note.id,
-		}, {
-			delay,
-			removeOnComplete: true,
-		});
-	}
-
-	if (!silent) {
-		if (Users.isLocalUser(user)) activeUsersChart.write(user);
-
-		// 未読通知を作成
-		if (data.visibility === 'specified') {
-			if (data.visibleUsers == null) throw new Error('invalid param');
-
-			for (const u of data.visibleUsers) {
-				// ローカルユーザーのみ
-				if (!Users.isLocalUser(u)) continue;
-
-				insertNoteUnread(u.id, note, {
-					isSpecified: true,
-					isMentioned: false,
-				});
-			}
-		} else {
-			for (const u of mentionedUsers) {
-				// ローカルユーザーのみ
-				if (!Users.isLocalUser(u)) continue;
-
-				insertNoteUnread(u.id, note, {
-					isSpecified: false,
-					isMentioned: true,
-				});
-			}
-		}
-
-		// Pack the note
-		const noteObj = await Notes.pack(note);
-
-		publishNotesStream(noteObj);
-
-		getActiveWebhooks().then(webhooks => {
-			webhooks = webhooks.filter(x => x.userId === user.id && x.on.includes('note'));
-			for (const webhook of webhooks) {
-				webhookDeliver(webhook, 'note', {
-					note: noteObj,
-				});
-			}
-		});
-
-		const nm = new NotificationManager(user, note);
-		const nmRelatedPromises = [];
-
-		await createMentionedEvents(mentionedUsers, note, nm);
-
-		// If has in reply to note
-		if (data.reply) {
-			// Fetch watchers
-			nmRelatedPromises.push(notifyToWatchersOfReplyee(data.reply, user, nm));
-
-			// 通知
-			if (data.reply.userHost === null) {
-				const threadMuted = await NoteThreadMutings.findOneBy({
-					userId: data.reply.userId,
-					threadId: data.reply.threadId || data.reply.id,
-				});
-
-				if (!threadMuted) {
-					nm.push(data.reply.userId, 'reply');
-					publishMainStream(data.reply.userId, 'reply', noteObj);
-
-					const webhooks = (await getActiveWebhooks()).filter(x => x.userId === data.reply!.userId && x.on.includes('reply'));
-					for (const webhook of webhooks) {
-						webhookDeliver(webhook, 'reply', {
-							note: noteObj,
-						});
-					}
-				}
-			}
-		}
-
-		// If it is renote
-		if (data.renote) {
-			const type = data.text ? 'quote' : 'renote';
-
-			// Notify
-			if (data.renote.userHost === null) {
-				nm.push(data.renote.userId, type);
-			}
-
-			// Fetch watchers
-			nmRelatedPromises.push(notifyToWatchersOfRenotee(data.renote, user, nm, type));
-
-			// Publish event
-			if ((user.id !== data.renote.userId) && data.renote.userHost === null) {
-				publishMainStream(data.renote.userId, 'renote', noteObj);
-
-				const webhooks = (await getActiveWebhooks()).filter(x => x.userId === data.renote!.userId && x.on.includes('renote'));
-				for (const webhook of webhooks) {
-					webhookDeliver(webhook, 'renote', {
-						note: noteObj,
-					});
-				}
-			}
-		}
-
-		Promise.all(nmRelatedPromises).then(() => {
-			nm.deliver();
-		});
-
-		//#region AP deliver
-		if (Users.isLocalUser(user)) {
-			(async () => {
-				const noteActivity = await renderNoteOrRenoteActivity(data, note);
-				const dm = new DeliverManager(user, noteActivity);
-
-				// メンションされたリモートユーザーに配送
-				for (const u of mentionedUsers.filter(u => Users.isRemoteUser(u))) {
-					dm.addDirectRecipe(u as IRemoteUser);
-				}
-
-				// 投稿がリプライかつ投稿者がローカルユーザーかつリプライ先の投稿の投稿者がリモートユーザーなら配送
-				if (data.reply && data.reply.userHost !== null) {
-					const u = await Users.findOneBy({ id: data.reply.userId });
-					if (u && Users.isRemoteUser(u)) dm.addDirectRecipe(u);
-				}
-
-				// 投稿がRenoteかつ投稿者がローカルユーザーかつRenote元の投稿の投稿者がリモートユーザーなら配送
-				if (data.renote && data.renote.userHost !== null) {
-					const u = await Users.findOneBy({ id: data.renote.userId });
-					if (u && Users.isRemoteUser(u)) dm.addDirectRecipe(u);
-				}
-
-				// フォロワーに配送
-				if (['public', 'home', 'followers'].includes(note.visibility)) {
-					dm.addFollowersRecipe();
-				}
-
-				if (['public'].includes(note.visibility)) {
-					deliverToRelays(user, noteActivity);
-				}
-
-				dm.execute();
-			})();
-		}
-		//#endregion
-	}
-
-	if (data.channel) {
-		Channels.increment({ id: data.channel.id }, 'notesCount', 1);
-		Channels.update(data.channel.id, {
-			lastNotedAt: new Date(),
-		});
-
-		Notes.countBy({
-			userId: user.id,
-			channelId: data.channel.id,
-		}).then(count => {
-			// この処理が行われるのはノート作成後なので、ノートが一つしかなかったら最初の投稿だと判断できる
-			// TODO: とはいえノートを削除して何回も投稿すればその分だけインクリメントされる雑さもあるのでどうにかしたい
-			if (count === 1) {
-				Channels.increment({ id: data.channel!.id }, 'usersCount', 1);
-			}
-		});
-	}
-
-	// Register to search database
-	index(note);
-});
-
-async function renderNoteOrRenoteActivity(data: Option, note: Note) {
-	if (data.localOnly) return null;
-
-	const content = data.renote && data.text == null && data.poll == null && (data.files == null || data.files.length === 0)
-		? renderAnnounce(data.renote.uri ? data.renote.uri : `${config.url}/notes/${data.renote.id}`, note)
-		: renderCreate(await renderNote(note, false), note);
-
-	return renderActivity(content);
-}
-
-function incRenoteCount(renote: Note) {
-	Notes.createQueryBuilder().update()
-		.set({
-			renoteCount: () => '"renoteCount" + 1',
-			score: () => '"score" + 1',
-		})
-		.where('id = :id', { id: renote.id })
-		.execute();
-}
-
-async function insertNote(user: { id: User['id']; host: User['host']; }, data: Option, tags: string[], emojis: string[], mentionedUsers: MinimumUser[]) {
-	const insert = new Note({
-		id: genId(data.createdAt!),
-		createdAt: data.createdAt!,
-		fileIds: data.files ? data.files.map(file => file.id) : [],
-		replyId: data.reply ? data.reply.id : null,
-		renoteId: data.renote ? data.renote.id : null,
-		channelId: data.channel ? data.channel.id : null,
-		threadId: data.reply
-			? data.reply.threadId
-				? data.reply.threadId
-				: data.reply.id
-			: null,
-		name: data.name,
-		text: data.text,
-		hasPoll: data.poll != null,
-		cw: data.cw == null ? null : data.cw,
-		tags: tags.map(tag => normalizeForSearch(tag)),
-		emojis,
-		userId: user.id,
-		localOnly: data.localOnly!,
-		visibility: data.visibility as any,
-		visibleUserIds: data.visibility === 'specified'
-			? data.visibleUsers
-				? data.visibleUsers.map(u => u.id)
-				: []
-			: [],
-
-		attachedFileTypes: data.files ? data.files.map(file => file.type) : [],
-
-		// 以下非正規化データ
-		replyUserId: data.reply ? data.reply.userId : null,
-		replyUserHost: data.reply ? data.reply.userHost : null,
-		renoteUserId: data.renote ? data.renote.userId : null,
-		renoteUserHost: data.renote ? data.renote.userHost : null,
-		userHost: user.host,
-	});
-
-	if (data.uri != null) insert.uri = data.uri;
-	if (data.url != null) insert.url = data.url;
-
-	// Append mentions data
-	if (mentionedUsers.length > 0) {
-		insert.mentions = mentionedUsers.map(u => u.id);
-		const profiles = await UserProfiles.findBy({ userId: In(insert.mentions) });
-		insert.mentionedRemoteUsers = JSON.stringify(mentionedUsers.filter(u => Users.isRemoteUser(u)).map(u => {
-			const profile = profiles.find(p => p.userId === u.id);
-			const url = profile != null ? profile.url : null;
-			return {
-				uri: u.uri,
-				url: url == null ? undefined : url,
-				username: u.username,
-				host: u.host,
-			} as IMentionedRemoteUsers[0];
-		}));
-	}
-
-	// 投稿を作成
-	try {
-		if (insert.hasPoll) {
-			// Start transaction
-			await db.transaction(async transactionalEntityManager => {
-				await transactionalEntityManager.insert(Note, insert);
-
-				const poll = new Poll({
-					noteId: insert.id,
-					choices: data.poll!.choices,
-					expiresAt: data.poll!.expiresAt,
-					multiple: data.poll!.multiple,
-					votes: new Array(data.poll!.choices.length).fill(0),
-					noteVisibility: insert.visibility,
-					userId: user.id,
-					userHost: user.host,
-				});
-
-				await transactionalEntityManager.insert(Poll, poll);
-			});
-		} else {
-			await Notes.insert(insert);
-		}
-
-		return insert;
-	} catch (e) {
-		// duplicate key error
-		if (isDuplicateKeyValueError(e)) {
-			const err = new Error('Duplicated note');
-			err.name = 'duplicated';
-			throw err;
-		}
-
-		console.error(e);
-
-		throw e;
-	}
-}
-
-function index(note: Note) {
-	if (note.text == null || config.elasticsearch == null) return;
-
-	es!.index({
-		index: config.elasticsearch.index || 'misskey_note',
-		id: note.id.toString(),
-		body: {
-			text: normalizeForSearch(note.text),
-			userId: note.userId,
-			userHost: note.userHost,
-		},
-	});
-}
-
-async function notifyToWatchersOfRenotee(renote: Note, user: { id: User['id']; }, nm: NotificationManager, type: NotificationType) {
-	const watchers = await NoteWatchings.findBy({
-		noteId: renote.id,
-		userId: Not(user.id),
-	});
-
-	for (const watcher of watchers) {
-		nm.push(watcher.userId, type);
-	}
-}
-
-async function notifyToWatchersOfReplyee(reply: Note, user: { id: User['id']; }, nm: NotificationManager) {
-	const watchers = await NoteWatchings.findBy({
-		noteId: reply.id,
-		userId: Not(user.id),
-	});
-
-	for (const watcher of watchers) {
-		nm.push(watcher.userId, 'reply');
-	}
-}
-
-async function createMentionedEvents(mentionedUsers: MinimumUser[], note: Note, nm: NotificationManager) {
-	for (const u of mentionedUsers.filter(u => Users.isLocalUser(u))) {
-		const threadMuted = await NoteThreadMutings.findOneBy({
-			userId: u.id,
-			threadId: note.threadId || note.id,
-		});
-
-		if (threadMuted) {
-			continue;
-		}
-
-		const detailPackedNote = await Notes.pack(note, u, {
-			detail: true,
-		});
-
-		publishMainStream(u.id, 'mention', detailPackedNote);
-
-		const webhooks = (await getActiveWebhooks()).filter(x => x.userId === u.id && x.on.includes('mention'));
-		for (const webhook of webhooks) {
-			webhookDeliver(webhook, 'mention', {
-				note: detailPackedNote,
-			});
-		}
-
-		// Create notification
-		nm.push(u.id, 'mention');
-	}
-}
-
-function saveReply(reply: Note, note: Note) {
-	Notes.increment({ id: reply.id }, 'repliesCount', 1);
-}
-
-function incNotesCountOfUser(user: { id: User['id']; }) {
-	Users.createQueryBuilder().update()
-		.set({
-			updatedAt: new Date(),
-			notesCount: () => '"notesCount" + 1',
-		})
-		.where('id = :id', { id: user.id })
-		.execute();
-}
-
-async function extractMentionedUsers(user: { host: User['host']; }, tokens: mfm.MfmNode[]): Promise<User[]> {
-	if (tokens == null) return [];
-
-	const mentions = extractMentions(tokens);
-
-	let mentionedUsers = (await Promise.all(mentions.map(m =>
-		resolveUser(m.username, m.host || user.host).catch(() => null)
-	))).filter(x => x != null) as User[];
-
-	// Drop duplicate users
-	mentionedUsers = mentionedUsers.filter((u, i, self) =>
-		i === self.findIndex(u2 => u.id === u2.id)
-	);
-
-	return mentionedUsers;
-}
diff --git a/packages/backend/src/services/note/delete.ts b/packages/backend/src/services/note/delete.ts
deleted file mode 100644
index 4963200161..0000000000
--- a/packages/backend/src/services/note/delete.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import { Brackets, In } from 'typeorm';
-import { publishNoteStream } from '@/services/stream.js';
-import renderDelete from '@/remote/activitypub/renderer/delete.js';
-import renderAnnounce from '@/remote/activitypub/renderer/announce.js';
-import renderUndo from '@/remote/activitypub/renderer/undo.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderTombstone from '@/remote/activitypub/renderer/tombstone.js';
-import config from '@/config/index.js';
-import { User, ILocalUser, IRemoteUser } from '@/models/entities/user.js';
-import { Note, IMentionedRemoteUsers } from '@/models/entities/note.js';
-import { Notes, Users, Instances } from '@/models/index.js';
-import { notesChart, perUserNotesChart, instanceChart } from '@/services/chart/index.js';
-import { deliverToFollowers, deliverToUser } from '@/remote/activitypub/deliver-manager.js';
-import { countSameRenotes } from '@/misc/count-same-renotes.js';
-import { registerOrFetchInstanceDoc } from '../register-or-fetch-instance-doc.js';
-import { deliverToRelays } from '../relay.js';
-
-/**
- * 投稿を削除します。
- * @param user 投稿者
- * @param note 投稿
- */
-export default async function(user: { id: User['id']; uri: User['uri']; host: User['host']; }, note: Note, quiet = false) {
-	const deletedAt = new Date();
-
-	// この投稿を除く指定したユーザーによる指定したノートのリノートが存在しないとき
-	if (note.renoteId && (await countSameRenotes(user.id, note.renoteId, note.id)) === 0) {
-		Notes.decrement({ id: note.renoteId }, 'renoteCount', 1);
-		Notes.decrement({ id: note.renoteId }, 'score', 1);
-	}
-
-	if (note.replyId) {
-		await Notes.decrement({ id: note.replyId }, 'repliesCount', 1);
-	}
-
-	if (!quiet) {
-		publishNoteStream(note.id, 'deleted', {
-			deletedAt: deletedAt,
-		});
-
-		//#region ローカルの投稿なら削除アクティビティを配送
-		if (Users.isLocalUser(user) && !note.localOnly) {
-			let renote: Note | null = null;
-
-			// if deletd note is renote
-			if (note.renoteId && note.text == null && !note.hasPoll && (note.fileIds == null || note.fileIds.length === 0)) {
-				renote = await Notes.findOneBy({
-					id: note.renoteId,
-				});
-			}
-
-			const content = renderActivity(renote
-				? renderUndo(renderAnnounce(renote.uri || `${config.url}/notes/${renote.id}`, note), user)
-				: renderDelete(renderTombstone(`${config.url}/notes/${note.id}`), user));
-
-			deliverToConcerned(user, note, content);
-		}
-
-		// also deliever delete activity to cascaded notes
-		const cascadingNotes = (await findCascadingNotes(note)).filter(note => !note.localOnly); // filter out local-only notes
-		for (const cascadingNote of cascadingNotes) {
-			if (!cascadingNote.user) continue;
-			if (!Users.isLocalUser(cascadingNote.user)) continue;
-			const content = renderActivity(renderDelete(renderTombstone(`${config.url}/notes/${cascadingNote.id}`), cascadingNote.user));
-			deliverToConcerned(cascadingNote.user, cascadingNote, content);
-		}
-		//#endregion
-
-		// 統計を更新
-		notesChart.update(note, false);
-		perUserNotesChart.update(user, note, false);
-
-		if (Users.isRemoteUser(user)) {
-			registerOrFetchInstanceDoc(user.host).then(i => {
-				Instances.decrement({ id: i.id }, 'notesCount', 1);
-				instanceChart.updateNote(i.host, note, false);
-			});
-		}
-	}
-
-	await Notes.delete({
-		id: note.id,
-		userId: user.id,
-	});
-}
-
-async function findCascadingNotes(note: Note) {
-	const cascadingNotes: Note[] = [];
-
-	const recursive = async (noteId: string) => {
-		const query = Notes.createQueryBuilder('note')
-			.where('note.replyId = :noteId', { noteId })
-			.orWhere(new Brackets(q => {
-				q.where('note.renoteId = :noteId', { noteId })
-				.andWhere('note.text IS NOT NULL');
-			}))
-			.leftJoinAndSelect('note.user', 'user');
-		const replies = await query.getMany();
-		for (const reply of replies) {
-			cascadingNotes.push(reply);
-			await recursive(reply.id);
-		}
-	};
-	await recursive(note.id);
-
-	return cascadingNotes.filter(note => note.userHost === null); // filter out non-local users
-}
-
-async function getMentionedRemoteUsers(note: Note) {
-	const where = [] as any[];
-
-	// mention / reply / dm
-	const uris = (JSON.parse(note.mentionedRemoteUsers) as IMentionedRemoteUsers).map(x => x.uri);
-	if (uris.length > 0) {
-		where.push(
-			{ uri: In(uris) },
-		);
-	}
-
-	// renote / quote
-	if (note.renoteUserId) {
-		where.push({
-			id: note.renoteUserId,
-		});
-	}
-
-	if (where.length === 0) return [];
-
-	return await Users.find({
-		where,
-	}) as IRemoteUser[];
-}
-
-async function deliverToConcerned(user: { id: ILocalUser['id']; host: null; }, note: Note, content: any) {
-	deliverToFollowers(user, content);
-	deliverToRelays(user, content);
-	const remoteUsers = await getMentionedRemoteUsers(note);
-	for (const remoteUser of remoteUsers) {
-		deliverToUser(user, content, remoteUser);
-	}
-}
diff --git a/packages/backend/src/services/note/polls/update.ts b/packages/backend/src/services/note/polls/update.ts
deleted file mode 100644
index 68cbb9835a..0000000000
--- a/packages/backend/src/services/note/polls/update.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import renderUpdate from '@/remote/activitypub/renderer/update.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import renderNote from '@/remote/activitypub/renderer/note.js';
-import { Users, Notes } from '@/models/index.js';
-import { Note } from '@/models/entities/note.js';
-import { deliverToFollowers } from '@/remote/activitypub/deliver-manager.js';
-import { deliverToRelays } from '../../relay.js';
-
-export async function deliverQuestionUpdate(noteId: Note['id']) {
-	const note = await Notes.findOneBy({ id: noteId });
-	if (note == null) throw new Error('note not found');
-
-	const user = await Users.findOneBy({ id: note.userId });
-	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/backend/src/services/note/polls/vote.ts b/packages/backend/src/services/note/polls/vote.ts
deleted file mode 100644
index 84d98769d9..0000000000
--- a/packages/backend/src/services/note/polls/vote.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { publishNoteStream } from '@/services/stream.js';
-import { CacheableUser, User } from '@/models/entities/user.js';
-import { Note } from '@/models/entities/note.js';
-import { PollVotes, NoteWatchings, Polls, Blockings } from '@/models/index.js';
-import { Not } from 'typeorm';
-import { genId } from '@/misc/gen-id.js';
-import { createNotification } from '../../create-notification.js';
-
-export default async function(user: CacheableUser, note: Note, choice: number) {
-	const poll = await Polls.findOneBy({ noteId: note.id });
-
-	if (poll == null) throw new Error('poll not found');
-
-	// Check whether is valid choice
-	if (poll.choices[choice] == null) throw new Error('invalid choice param');
-
-	// Check blocking
-	if (note.userId !== user.id) {
-		const block = await Blockings.findOneBy({
-			blockerId: note.userId,
-			blockeeId: user.id,
-		});
-		if (block) {
-			throw new Error('blocked');
-		}
-	}
-
-	// if already voted
-	const exist = await PollVotes.findBy({
-		noteId: note.id,
-		userId: user.id,
-	});
-
-	if (poll.multiple) {
-		if (exist.some(x => x.choice === choice)) {
-			throw new Error('already voted');
-		}
-	} else if (exist.length !== 0) {
-		throw new Error('already voted');
-	}
-
-	// Create vote
-	await PollVotes.insert({
-		id: genId(),
-		createdAt: new Date(),
-		noteId: note.id,
-		userId: user.id,
-		choice: choice,
-	});
-
-	// Increment votes count
-	const index = choice + 1; // In SQL, array index is 1 based
-	await Polls.query(`UPDATE poll SET votes[${index}] = votes[${index}] + 1 WHERE "noteId" = '${poll.noteId}'`);
-
-	publishNoteStream(note.id, 'pollVoted', {
-		choice: choice,
-		userId: user.id,
-	});
-
-	// Notify
-	createNotification(note.userId, 'pollVote', {
-		notifierId: user.id,
-		noteId: note.id,
-		choice: choice,
-	});
-
-	// Fetch watchers
-	NoteWatchings.findBy({
-		noteId: note.id,
-		userId: Not(user.id),
-	})
-	.then(watchers => {
-		for (const watcher of watchers) {
-			createNotification(watcher.userId, 'pollVote', {
-				notifierId: user.id,
-				noteId: note.id,
-				choice: choice,
-			});
-		}
-	});
-}
diff --git a/packages/backend/src/services/note/reaction/create.ts b/packages/backend/src/services/note/reaction/create.ts
deleted file mode 100644
index 83d302826a..0000000000
--- a/packages/backend/src/services/note/reaction/create.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { publishNoteStream } from '@/services/stream.js';
-import { renderLike } from '@/remote/activitypub/renderer/like.js';
-import DeliverManager from '@/remote/activitypub/deliver-manager.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import { toDbReaction, decodeReaction } from '@/misc/reaction-lib.js';
-import { User, IRemoteUser } from '@/models/entities/user.js';
-import { Note } from '@/models/entities/note.js';
-import { NoteReactions, Users, NoteWatchings, Notes, Emojis, Blockings } from '@/models/index.js';
-import { IsNull, Not } from 'typeorm';
-import { perUserReactionsChart } from '@/services/chart/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { createNotification } from '../../create-notification.js';
-import deleteReaction from './delete.js';
-import { isDuplicateKeyValueError } from '@/misc/is-duplicate-key-value-error.js';
-import { NoteReaction } from '@/models/entities/note-reaction.js';
-import { IdentifiableError } from '@/misc/identifiable-error.js';
-
-export default async (user: { id: User['id']; host: User['host']; }, note: Note, reaction?: string) => {
-	// Check blocking
-	if (note.userId !== user.id) {
-		const block = await Blockings.findOneBy({
-			blockerId: note.userId,
-			blockeeId: user.id,
-		});
-		if (block) {
-			throw new IdentifiableError('e70412a4-7197-4726-8e74-f3e0deb92aa7');
-		}
-	}
-
-	// check visibility
-	if (!await Notes.isVisibleForMe(note, user.id)) {
-		throw new IdentifiableError('68e9d2d1-48bf-42c2-b90a-b20e09fd3d48', 'Note not accessible for you.');
-	}
-
-	// TODO: cache
-	reaction = await toDbReaction(reaction, user.host);
-
-	const record: NoteReaction = {
-		id: genId(),
-		createdAt: new Date(),
-		noteId: note.id,
-		userId: user.id,
-		reaction,
-	};
-
-	// Create reaction
-	try {
-		await NoteReactions.insert(record);
-	} catch (e) {
-		if (isDuplicateKeyValueError(e)) {
-			const exists = await NoteReactions.findOneByOrFail({
-				noteId: note.id,
-				userId: user.id,
-			});
-
-			if (exists.reaction !== reaction) {
-				// 別のリアクションがすでにされていたら置き換える
-				await deleteReaction(user, note);
-				await NoteReactions.insert(record);
-			} else {
-				// 同じリアクションがすでにされていたらエラー
-				throw new IdentifiableError('51c42bb4-931a-456b-bff7-e5a8a70dd298');
-			}
-		} else {
-			throw e;
-		}
-	}
-
-	// Increment reactions count
-	const sql = `jsonb_set("reactions", '{${reaction}}', (COALESCE("reactions"->>'${reaction}', '0')::int + 1)::text::jsonb)`;
-	await Notes.createQueryBuilder().update()
-		.set({
-			reactions: () => sql,
-			score: () => '"score" + 1',
-		})
-		.where('id = :id', { id: note.id })
-		.execute();
-
-	perUserReactionsChart.update(user, note);
-
-	// カスタム絵文字リアクションだったら絵文字情報も送る
-	const decodedReaction = decodeReaction(reaction);
-
-	const emoji = await Emojis.findOne({
-		where: {
-			name: decodedReaction.name,
-			host: decodedReaction.host ?? IsNull(),
-		},
-		select: ['name', 'host', 'originalUrl', 'publicUrl'],
-	});
-
-	publishNoteStream(note.id, 'reacted', {
-		reaction: decodedReaction.reaction,
-		emoji: emoji != null ? {
-			name: emoji.host ? `${emoji.name}@${emoji.host}` : `${emoji.name}@.`,
-			url: emoji.publicUrl || emoji.originalUrl, // || emoji.originalUrl してるのは後方互換性のため
-		} : null,
-		userId: user.id,
-	});
-
-	// リアクションされたユーザーがローカルユーザーなら通知を作成
-	if (note.userHost === null) {
-		createNotification(note.userId, 'reaction', {
-			notifierId: user.id,
-			noteId: note.id,
-			reaction: reaction,
-		});
-	}
-
-	// Fetch watchers
-	NoteWatchings.findBy({
-		noteId: note.id,
-		userId: Not(user.id),
-	}).then(watchers => {
-		for (const watcher of watchers) {
-			createNotification(watcher.userId, 'reaction', {
-				notifierId: user.id,
-				noteId: note.id,
-				reaction: reaction,
-			});
-		}
-	});
-
-	//#region 配信
-	if (Users.isLocalUser(user) && !note.localOnly) {
-		const content = renderActivity(await renderLike(record, note));
-		const dm = new DeliverManager(user, content);
-		if (note.userHost !== null) {
-			const reactee = await Users.findOneBy({ id: note.userId });
-			dm.addDirectRecipe(reactee as IRemoteUser);
-		}
-
-		if (['public', 'home', 'followers'].includes(note.visibility)) {
-			dm.addFollowersRecipe();
-		} else if (note.visibility === 'specified') {
-			const visibleUsers = await Promise.all(note.visibleUserIds.map(id => Users.findOneBy({ id })));
-			for (const u of visibleUsers.filter(u => u && Users.isRemoteUser(u))) {
-				dm.addDirectRecipe(u as IRemoteUser);
-			}
-		}
-
-		dm.execute();
-	}
-	//#endregion
-};
diff --git a/packages/backend/src/services/note/reaction/delete.ts b/packages/backend/src/services/note/reaction/delete.ts
deleted file mode 100644
index a7cbcb1c17..0000000000
--- a/packages/backend/src/services/note/reaction/delete.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { publishNoteStream } from '@/services/stream.js';
-import { renderLike } from '@/remote/activitypub/renderer/like.js';
-import renderUndo from '@/remote/activitypub/renderer/undo.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import DeliverManager from '@/remote/activitypub/deliver-manager.js';
-import { IdentifiableError } from '@/misc/identifiable-error.js';
-import { User, IRemoteUser } from '@/models/entities/user.js';
-import { Note } from '@/models/entities/note.js';
-import { NoteReactions, Users, Notes } from '@/models/index.js';
-import { decodeReaction } from '@/misc/reaction-lib.js';
-
-export default async (user: { id: User['id']; host: User['host']; }, note: Note) => {
-	// if already unreacted
-	const exist = await NoteReactions.findOneBy({
-		noteId: note.id,
-		userId: user.id,
-	});
-
-	if (exist == null) {
-		throw new IdentifiableError('60527ec9-b4cb-4a88-a6bd-32d3ad26817d', 'not reacted');
-	}
-
-	// Delete reaction
-	const result = await NoteReactions.delete(exist.id);
-
-	if (result.affected !== 1) {
-		throw new IdentifiableError('60527ec9-b4cb-4a88-a6bd-32d3ad26817d', 'not reacted');
-	}
-
-	// Decrement reactions count
-	const sql = `jsonb_set("reactions", '{${exist.reaction}}', (COALESCE("reactions"->>'${exist.reaction}', '0')::int - 1)::text::jsonb)`;
-	await Notes.createQueryBuilder().update()
-		.set({
-			reactions: () => sql,
-		})
-		.where('id = :id', { id: note.id })
-		.execute();
-
-	Notes.decrement({ id: note.id }, 'score', 1);
-
-	publishNoteStream(note.id, 'unreacted', {
-		reaction: decodeReaction(exist.reaction).reaction,
-		userId: user.id,
-	});
-
-	//#region 配信
-	if (Users.isLocalUser(user) && !note.localOnly) {
-		const content = renderActivity(renderUndo(await renderLike(exist, note), user));
-		const dm = new DeliverManager(user, content);
-		if (note.userHost !== null) {
-			const reactee = await Users.findOneBy({ id: note.userId });
-			dm.addDirectRecipe(reactee as IRemoteUser);
-		}
-		dm.addFollowersRecipe();
-		dm.execute();
-	}
-	//#endregion
-};
diff --git a/packages/backend/src/services/note/read.ts b/packages/backend/src/services/note/read.ts
deleted file mode 100644
index 915a9e9eef..0000000000
--- a/packages/backend/src/services/note/read.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import { publishMainStream } from '@/services/stream.js';
-import { Note } from '@/models/entities/note.js';
-import { User } from '@/models/entities/user.js';
-import { NoteUnreads, AntennaNotes, Users, Followings, ChannelFollowings } from '@/models/index.js';
-import { Not, IsNull, In } from 'typeorm';
-import { Channel } from '@/models/entities/channel.js';
-import { checkHitAntenna } from '@/misc/check-hit-antenna.js';
-import { getAntennas } from '@/misc/antenna-cache.js';
-import { readNotificationByQuery } from '@/server/api/common/read-notification.js';
-import { Packed } from '@/misc/schema.js';
-
-/**
- * Mark notes as read
- */
-export default async function(
-	userId: User['id'],
-	notes: (Note | Packed<'Note'>)[],
-	info?: {
-		following: Set<User['id']>;
-		followingChannels: Set<Channel['id']>;
-	}
-) {
-	const following = info?.following ? info.following : new Set<string>((await Followings.find({
-		where: {
-			followerId: userId,
-		},
-		select: ['followeeId'],
-	})).map(x => x.followeeId));
-	const followingChannels = info?.followingChannels ? info.followingChannels : new Set<string>((await ChannelFollowings.find({
-		where: {
-			followerId: userId,
-		},
-		select: ['followeeId'],
-	})).map(x => x.followeeId));
-
-	const myAntennas = (await getAntennas()).filter(a => a.userId === userId);
-	const readMentions: (Note | Packed<'Note'>)[] = [];
-	const readSpecifiedNotes: (Note | Packed<'Note'>)[] = [];
-	const readChannelNotes: (Note | Packed<'Note'>)[] = [];
-	const readAntennaNotes: (Note | Packed<'Note'>)[] = [];
-
-	for (const note of notes) {
-		if (note.mentions && note.mentions.includes(userId)) {
-			readMentions.push(note);
-		} else if (note.visibleUserIds && note.visibleUserIds.includes(userId)) {
-			readSpecifiedNotes.push(note);
-		}
-
-		if (note.channelId && followingChannels.has(note.channelId)) {
-			readChannelNotes.push(note);
-		}
-
-		if (note.user != null) { // たぶんnullになることは無いはずだけど一応
-			for (const antenna of myAntennas) {
-				if (await checkHitAntenna(antenna, note, note.user, undefined, Array.from(following))) {
-					readAntennaNotes.push(note);
-				}
-			}
-		}
-	}
-
-	if ((readMentions.length > 0) || (readSpecifiedNotes.length > 0) || (readChannelNotes.length > 0)) {
-		// Remove the record
-		await NoteUnreads.delete({
-			userId: userId,
-			noteId: In([...readMentions.map(n => n.id), ...readSpecifiedNotes.map(n => n.id), ...readChannelNotes.map(n => n.id)]),
-		});
-
-		// TODO: ↓まとめてクエリしたい
-
-		NoteUnreads.countBy({
-			userId: userId,
-			isMentioned: true,
-		}).then(mentionsCount => {
-			if (mentionsCount === 0) {
-				// 全て既読になったイベントを発行
-				publishMainStream(userId, 'readAllUnreadMentions');
-			}
-		});
-
-		NoteUnreads.countBy({
-			userId: userId,
-			isSpecified: true,
-		}).then(specifiedCount => {
-			if (specifiedCount === 0) {
-				// 全て既読になったイベントを発行
-				publishMainStream(userId, 'readAllUnreadSpecifiedNotes');
-			}
-		});
-
-		NoteUnreads.countBy({
-			userId: userId,
-			noteChannelId: Not(IsNull()),
-		}).then(channelNoteCount => {
-			if (channelNoteCount === 0) {
-				// 全て既読になったイベントを発行
-				publishMainStream(userId, 'readAllChannels');
-			}
-		});
-
-		readNotificationByQuery(userId, {
-			noteId: In([...readMentions.map(n => n.id), ...readSpecifiedNotes.map(n => n.id)]),
-		});
-	}
-
-	if (readAntennaNotes.length > 0) {
-		await AntennaNotes.update({
-			antennaId: In(myAntennas.map(a => a.id)),
-			noteId: In(readAntennaNotes.map(n => n.id)),
-		}, {
-			read: true,
-		});
-
-		// TODO: まとめてクエリしたい
-		for (const antenna of myAntennas) {
-			const count = await AntennaNotes.countBy({
-				antennaId: antenna.id,
-				read: false,
-			});
-
-			if (count === 0) {
-				publishMainStream(userId, 'readAntenna', antenna);
-			}
-		}
-
-		Users.getHasUnreadAntenna(userId).then(unread => {
-			if (!unread) {
-				publishMainStream(userId, 'readAllAntennas');
-			}
-		});
-	}
-}
diff --git a/packages/backend/src/services/note/unread.ts b/packages/backend/src/services/note/unread.ts
deleted file mode 100644
index d9ed711e03..0000000000
--- a/packages/backend/src/services/note/unread.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Note } from '@/models/entities/note.js';
-import { publishMainStream } from '@/services/stream.js';
-import { User } from '@/models/entities/user.js';
-import { Mutings, NoteThreadMutings, NoteUnreads } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-
-export async function insertNoteUnread(userId: User['id'], note: Note, params: {
-	// NOTE: isSpecifiedがtrueならisMentionedは必ずfalse
-	isSpecified: boolean;
-	isMentioned: boolean;
-}) {
-	//#region ミュートしているなら無視
-	// TODO: 現在の仕様ではChannelにミュートは適用されないのでよしなにケアする
-	const mute = await Mutings.findBy({
-		muterId: userId,
-	});
-	if (mute.map(m => m.muteeId).includes(note.userId)) return;
-	//#endregion
-
-	// スレッドミュート
-	const threadMute = await NoteThreadMutings.findOneBy({
-		userId: userId,
-		threadId: note.threadId || note.id,
-	});
-	if (threadMute) return;
-
-	const unread = {
-		id: genId(),
-		noteId: note.id,
-		userId: userId,
-		isSpecified: params.isSpecified,
-		isMentioned: params.isMentioned,
-		noteChannelId: note.channelId,
-		noteUserId: note.userId,
-	};
-
-	await NoteUnreads.insert(unread);
-
-	// 2秒経っても既読にならなかったら「未読の投稿がありますよ」イベントを発行する
-	setTimeout(async () => {
-		const exist = await NoteUnreads.findOneBy({ id: unread.id });
-
-		if (exist == null) return;
-
-		if (params.isMentioned) {
-			publishMainStream(userId, 'unreadMention', note.id);
-		}
-		if (params.isSpecified) {
-			publishMainStream(userId, 'unreadSpecifiedNote', note.id);
-		}
-		if (note.channelId) {
-			publishMainStream(userId, 'unreadChannel', note.id);
-		}
-	}, 2000);
-}
diff --git a/packages/backend/src/services/note/unwatch.ts b/packages/backend/src/services/note/unwatch.ts
deleted file mode 100644
index 3964b2ba5f..0000000000
--- a/packages/backend/src/services/note/unwatch.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { User } from '@/models/entities/user.js';
-import { NoteWatchings } from '@/models/index.js';
-import { Note } from '@/models/entities/note.js';
-
-export default async (me: User['id'], note: Note) => {
-	await NoteWatchings.delete({
-		noteId: note.id,
-		userId: me,
-	});
-};
diff --git a/packages/backend/src/services/note/watch.ts b/packages/backend/src/services/note/watch.ts
deleted file mode 100644
index 2210c44a75..0000000000
--- a/packages/backend/src/services/note/watch.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { User } from '@/models/entities/user.js';
-import { Note } from '@/models/entities/note.js';
-import { NoteWatchings } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { NoteWatching } from '@/models/entities/note-watching.js';
-
-export default async (me: User['id'], note: Note) => {
-	// 自分の投稿はwatchできない
-	if (me === note.userId) {
-		return;
-	}
-
-	await NoteWatchings.insert({
-		id: genId(),
-		createdAt: new Date(),
-		noteId: note.id,
-		userId: me,
-		noteUserId: note.userId,
-	} as NoteWatching);
-};
diff --git a/packages/backend/src/services/push-notification.ts b/packages/backend/src/services/push-notification.ts
deleted file mode 100644
index 393a23d050..0000000000
--- a/packages/backend/src/services/push-notification.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import push from 'web-push';
-import config from '@/config/index.js';
-import { SwSubscriptions } from '@/models/index.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import { Packed } from '@/misc/schema.js';
-import { getNoteSummary } from '@/misc/get-note-summary.js';
-
-// Defined also packages/sw/types.ts#L14-L21
-type pushNotificationsTypes = {
-	'notification': Packed<'Notification'>;
-	'unreadMessagingMessage': Packed<'MessagingMessage'>;
-	'readNotifications': { notificationIds: string[] };
-	'readAllNotifications': undefined;
-	'readAllMessagingMessages': undefined;
-	'readAllMessagingMessagesOfARoom': { userId: string } | { groupId: string };
-};
-
-// プッシュメッセージサーバーには文字数制限があるため、内容を削減します
-function truncateNotification(notification: Packed<'Notification'>): any {
-	if (notification.note) {
-		return {
-			...notification,
-			note: {
-				...notification.note,
-				// textをgetNoteSummaryしたものに置き換える
-				text: getNoteSummary(notification.type === 'renote' ? notification.note.renote as Packed<'Note'> : notification.note),
-
-				cw: undefined,
-				reply: undefined,
-				renote: undefined,
-				user: undefined as any, // 通知を受け取ったユーザーである場合が多いのでこれも捨てる
-			}
-		};
-	}
-
-	return notification;
-}
-
-export async function pushNotification<T extends keyof pushNotificationsTypes>(userId: string, type: T, body: pushNotificationsTypes[T]) {
-	const meta = await fetchMeta();
-
-	if (!meta.enableServiceWorker || meta.swPublicKey == null || meta.swPrivateKey == null) return;
-
-	// アプリケーションの連絡先と、サーバーサイドの鍵ペアの情報を登録
-	push.setVapidDetails(config.url,
-		meta.swPublicKey,
-		meta.swPrivateKey);
-
-	// Fetch
-	const subscriptions = await SwSubscriptions.findBy({
-		userId: userId,
-	});
-
-	for (const subscription of subscriptions) {
-		const pushSubscription = {
-			endpoint: subscription.endpoint,
-			keys: {
-				auth: subscription.auth,
-				p256dh: subscription.publickey,
-			},
-		};
-
-		push.sendNotification(pushSubscription, JSON.stringify({
-			type,
-			body: type === 'notification' ? truncateNotification(body as Packed<'Notification'>) : body,
-			userId,
-			dateTime: (new Date()).getTime(),
-		}), {
-			proxy: config.proxy,
-		}).catch((err: any) => {
-			//swLogger.info(err.statusCode);
-			//swLogger.info(err.headers);
-			//swLogger.info(err.body);
-
-			if (err.statusCode === 410) {
-				SwSubscriptions.delete({
-					userId: userId,
-					endpoint: subscription.endpoint,
-					auth: subscription.auth,
-					publickey: subscription.publickey,
-				});
-			}
-		});
-	}
-}
diff --git a/packages/backend/src/services/register-or-fetch-instance-doc.ts b/packages/backend/src/services/register-or-fetch-instance-doc.ts
deleted file mode 100644
index df7d125d0b..0000000000
--- a/packages/backend/src/services/register-or-fetch-instance-doc.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Instance } from '@/models/entities/instance.js';
-import { Instances } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { toPuny } from '@/misc/convert-host.js';
-import { Cache } from '@/misc/cache.js';
-
-const cache = new Cache<Instance>(1000 * 60 * 60);
-
-export async function registerOrFetchInstanceDoc(host: string): Promise<Instance> {
-	host = toPuny(host);
-
-	const cached = cache.get(host);
-	if (cached) return cached;
-
-	const index = await Instances.findOneBy({ host });
-
-	if (index == null) {
-		const i = await Instances.insert({
-			id: genId(),
-			host,
-			caughtAt: new Date(),
-			lastCommunicatedAt: new Date(),
-		}).then(x => Instances.findOneByOrFail(x.identifiers[0]));
-
-		cache.set(host, i);
-		return i;
-	} else {
-		cache.set(host, index);
-		return index;
-	}
-}
diff --git a/packages/backend/src/services/relay.ts b/packages/backend/src/services/relay.ts
deleted file mode 100644
index 6bc4304436..0000000000
--- a/packages/backend/src/services/relay.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { IsNull } from 'typeorm';
-import { renderFollowRelay } from '@/remote/activitypub/renderer/follow-relay.js';
-import { renderActivity, attachLdSignature } from '@/remote/activitypub/renderer/index.js';
-import renderUndo from '@/remote/activitypub/renderer/undo.js';
-import { deliver } from '@/queue/index.js';
-import { ILocalUser, User } from '@/models/entities/user.js';
-import { Users, Relays } from '@/models/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { Cache } from '@/misc/cache.js';
-import { Relay } from '@/models/entities/relay.js';
-import { createSystemUser } from './create-system-user.js';
-
-const ACTOR_USERNAME = 'relay.actor' as const;
-
-const relaysCache = new Cache<Relay[]>(1000 * 60 * 10);
-
-export async function getRelayActor(): Promise<ILocalUser> {
-	const user = await Users.findOneBy({
-		host: IsNull(),
-		username: ACTOR_USERNAME,
-	});
-
-	if (user) return user as ILocalUser;
-
-	const created = await createSystemUser(ACTOR_USERNAME);
-	return created as ILocalUser;
-}
-
-export async function addRelay(inbox: string) {
-	const relay = await Relays.insert({
-		id: genId(),
-		inbox,
-		status: 'requesting',
-	}).then(x => Relays.findOneByOrFail(x.identifiers[0]));
-
-	const relayActor = await getRelayActor();
-	const follow = await renderFollowRelay(relay, relayActor);
-	const activity = renderActivity(follow);
-	deliver(relayActor, activity, relay.inbox);
-
-	return relay;
-}
-
-export async function removeRelay(inbox: string) {
-	const relay = await Relays.findOneBy({
-		inbox,
-	});
-
-	if (relay == null) {
-		throw 'relay not found';
-	}
-
-	const relayActor = await getRelayActor();
-	const follow = renderFollowRelay(relay, relayActor);
-	const undo = renderUndo(follow, relayActor);
-	const activity = renderActivity(undo);
-	deliver(relayActor, activity, relay.inbox);
-
-	await Relays.delete(relay.id);
-}
-
-export async function listRelay() {
-	const relays = await Relays.find();
-	return relays;
-}
-
-export async function relayAccepted(id: string) {
-	const result = await Relays.update(id, {
-		status: 'accepted',
-	});
-
-	return JSON.stringify(result);
-}
-
-export async function relayRejected(id: string) {
-	const result = await Relays.update(id, {
-		status: 'rejected',
-	});
-
-	return JSON.stringify(result);
-}
-
-export async function deliverToRelays(user: { id: User['id']; host: null; }, activity: any) {
-	if (activity == null) return;
-
-	const relays = await relaysCache.fetch(null, () => Relays.findBy({
-		status: 'accepted',
-	}));
-	if (relays.length === 0) return;
-
-	// TODO
-	//const copy = structuredClone(activity);
-	const copy = JSON.parse(JSON.stringify(activity));
-	if (!copy.to) copy.to = ['https://www.w3.org/ns/activitystreams#Public'];
-
-	const signed = await attachLdSignature(copy, user);
-
-	for (const relay of relays) {
-		deliver(user, signed, relay.inbox);
-	}
-}
diff --git a/packages/backend/src/services/send-email-notification.ts b/packages/backend/src/services/send-email-notification.ts
deleted file mode 100644
index 4a2f94b425..0000000000
--- a/packages/backend/src/services/send-email-notification.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { UserProfiles } from '@/models/index.js';
-import { User } from '@/models/entities/user.js';
-import { sendEmail } from './send-email.js';
-import { I18n } from '@/misc/i18n.js';
-import * as Acct from '@/misc/acct.js';
-// TODO
-//const locales = await import('../../../../locales/index.js');
-
-// TODO: locale ファイルをクライアント用とサーバー用で分けたい
-
-async function follow(userId: User['id'], follower: User) {
-	/*
-	const userProfile = await UserProfiles.findOneByOrFail({ userId: userId });
-	if (!userProfile.email || !userProfile.emailNotificationTypes.includes('follow')) return;
-	const locale = locales[userProfile.lang || 'ja-JP'];
-	const i18n = new I18n(locale);
-	// TODO: render user information html
-	sendEmail(userProfile.email, i18n.t('_email._follow.title'), `${follower.name} (@${Acct.toString(follower)})`, `${follower.name} (@${Acct.toString(follower)})`);
-	*/
-}
-
-async function receiveFollowRequest(userId: User['id'], follower: User) {
-	/*
-	const userProfile = await UserProfiles.findOneByOrFail({ userId: userId });
-	if (!userProfile.email || !userProfile.emailNotificationTypes.includes('receiveFollowRequest')) return;
-	const locale = locales[userProfile.lang || 'ja-JP'];
-	const i18n = new I18n(locale);
-	// TODO: render user information html
-	sendEmail(userProfile.email, i18n.t('_email._receiveFollowRequest.title'), `${follower.name} (@${Acct.toString(follower)})`, `${follower.name} (@${Acct.toString(follower)})`);
-	*/
-}
-
-export const sendEmailNotification = {
-	follow,
-	receiveFollowRequest,
-};
diff --git a/packages/backend/src/services/send-email.ts b/packages/backend/src/services/send-email.ts
deleted file mode 100644
index b35d22548c..0000000000
--- a/packages/backend/src/services/send-email.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import * as nodemailer from 'nodemailer';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import Logger from './logger.js';
-import config from '@/config/index.js';
-
-export const logger = new Logger('email');
-
-export async function sendEmail(to: string, subject: string, html: string, text: string) {
-	const meta = await fetchMeta(true);
-
-	const iconUrl = `${config.url}/static-assets/mi-white.png`;
-	const emailSettingUrl = `${config.url}/settings/email`;
-
-	const enableAuth = meta.smtpUser != null && meta.smtpUser !== '';
-
-	const transporter = nodemailer.createTransport({
-		host: meta.smtpHost,
-		port: meta.smtpPort,
-		secure: meta.smtpSecure,
-		ignoreTLS: !enableAuth,
-		proxy: config.proxySmtp,
-		auth: enableAuth ? {
-			user: meta.smtpUser,
-			pass: meta.smtpPass,
-		} : undefined,
-	} as any);
-
-	try {
-		// TODO: htmlサニタイズ
-		const info = await transporter.sendMail({
-			from: meta.email!,
-			to: to,
-			subject: subject,
-			text: text,
-			html: `<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8">
-		<title>${ subject }</title>
-		<style>
-			html {
-				background: #eee;
-			}
-
-			body {
-				padding: 16px;
-				margin: 0;
-				font-family: sans-serif;
-				font-size: 14px;
-			}
-
-			a {
-				text-decoration: none;
-				color: #86b300;
-			}
-			a:hover {
-				text-decoration: underline;
-			}
-
-			main {
-				max-width: 500px;
-				margin: 0 auto;
-				background: #fff;
-				color: #555;
-			}
-				main > header {
-					padding: 32px;
-					background: #86b300;
-				}
-					main > header > img {
-						max-width: 128px;
-						max-height: 28px;
-						vertical-align: bottom;
-					}
-				main > article {
-					padding: 32px;
-				}
-					main > article > h1 {
-						margin: 0 0 1em 0;
-					}
-				main > footer {
-					padding: 32px;
-					border-top: solid 1px #eee;
-				}
-
-			nav {
-				box-sizing: border-box;
-				max-width: 500px;
-				margin: 16px auto 0 auto;
-				padding: 0 32px;
-			}
-				nav > a {
-					color: #888;
-				}
-		</style>
-	</head>
-	<body>
-		<main>
-			<header>
-				<img src="${ meta.logoImageUrl || meta.iconUrl || iconUrl }"/>
-			</header>
-			<article>
-				<h1>${ subject }</h1>
-				<div>${ html }</div>
-			</article>
-			<footer>
-				<a href="${ emailSettingUrl }">${ 'Email setting' }</a>
-			</footer>
-		</main>
-		<nav>
-			<a href="${ config.url }">${ config.host }</a>
-		</nav>
-	</body>
-</html>`,
-		});
-
-		logger.info(`Message sent: ${info.messageId}`);
-	} catch (err) {
-		logger.error(err as Error);
-		throw err;
-	}
-}
diff --git a/packages/backend/src/services/stream.ts b/packages/backend/src/services/stream.ts
deleted file mode 100644
index 9fa2b97135..0000000000
--- a/packages/backend/src/services/stream.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { redisClient } from '../db/redis.js';
-import { User } from '@/models/entities/user.js';
-import { Note } from '@/models/entities/note.js';
-import { UserList } from '@/models/entities/user-list.js';
-import { UserGroup } from '@/models/entities/user-group.js';
-import config from '@/config/index.js';
-import { Antenna } from '@/models/entities/antenna.js';
-import { Channel } from '@/models/entities/channel.js';
-import {
-	StreamChannels,
-	AdminStreamTypes,
-	AntennaStreamTypes,
-	BroadcastTypes,
-	ChannelStreamTypes,
-	DriveStreamTypes,
-	GroupMessagingStreamTypes,
-	InternalStreamTypes,
-	MainStreamTypes,
-	MessagingIndexStreamTypes,
-	MessagingStreamTypes,
-	NoteStreamTypes,
-	UserListStreamTypes,
-	UserStreamTypes,
-} from '@/server/api/stream/types.js';
-import { Packed } from '@/misc/schema.js';
-
-class Publisher {
-	private publish = (channel: StreamChannels, type: string | null, value?: any): void => {
-		const message = type == null ? value : value == null ?
-			{ type: type, body: null } :
-			{ type: type, body: value };
-
-		redisClient.publish(config.host, JSON.stringify({
-			channel: channel,
-			message: message,
-		}));
-	};
-
-	public publishInternalEvent = <K extends keyof InternalStreamTypes>(type: K, value?: InternalStreamTypes[K]): void => {
-		this.publish('internal', type, typeof value === 'undefined' ? null : value);
-	};
-
-	public publishUserEvent = <K extends keyof UserStreamTypes>(userId: User['id'], type: K, value?: UserStreamTypes[K]): void => {
-		this.publish(`user:${userId}`, type, typeof value === 'undefined' ? null : value);
-	};
-
-	public publishBroadcastStream = <K extends keyof BroadcastTypes>(type: K, value?: BroadcastTypes[K]): void => {
-		this.publish('broadcast', type, typeof value === 'undefined' ? null : value);
-	};
-
-	public publishMainStream = <K extends keyof MainStreamTypes>(userId: User['id'], type: K, value?: MainStreamTypes[K]): void => {
-		this.publish(`mainStream:${userId}`, type, typeof value === 'undefined' ? null : value);
-	};
-
-	public publishDriveStream = <K extends keyof DriveStreamTypes>(userId: User['id'], type: K, value?: DriveStreamTypes[K]): void => {
-		this.publish(`driveStream:${userId}`, type, typeof value === 'undefined' ? null : value);
-	};
-
-	public publishNoteStream = <K extends keyof NoteStreamTypes>(noteId: Note['id'], type: K, value?: NoteStreamTypes[K]): void => {
-		this.publish(`noteStream:${noteId}`, type, {
-			id: noteId,
-			body: value,
-		});
-	};
-
-	public publishChannelStream = <K extends keyof ChannelStreamTypes>(channelId: Channel['id'], type: K, value?: ChannelStreamTypes[K]): void => {
-		this.publish(`channelStream:${channelId}`, type, typeof value === 'undefined' ? null : value);
-	};
-
-	public publishUserListStream = <K extends keyof UserListStreamTypes>(listId: UserList['id'], type: K, value?: UserListStreamTypes[K]): void => {
-		this.publish(`userListStream:${listId}`, type, typeof value === 'undefined' ? null : value);
-	};
-
-	public publishAntennaStream = <K extends keyof AntennaStreamTypes>(antennaId: Antenna['id'], type: K, value?: AntennaStreamTypes[K]): void => {
-		this.publish(`antennaStream:${antennaId}`, type, typeof value === 'undefined' ? null : value);
-	};
-
-	public publishMessagingStream = <K extends keyof MessagingStreamTypes>(userId: User['id'], otherpartyId: User['id'], type: K, value?: MessagingStreamTypes[K]): void => {
-		this.publish(`messagingStream:${userId}-${otherpartyId}`, type, typeof value === 'undefined' ? null : value);
-	};
-
-	public publishGroupMessagingStream = <K extends keyof GroupMessagingStreamTypes>(groupId: UserGroup['id'], type: K, value?: GroupMessagingStreamTypes[K]): void => {
-		this.publish(`messagingStream:${groupId}`, type, typeof value === 'undefined' ? null : value);
-	};
-
-	public publishMessagingIndexStream = <K extends keyof MessagingIndexStreamTypes>(userId: User['id'], type: K, value?: MessagingIndexStreamTypes[K]): void => {
-		this.publish(`messagingIndexStream:${userId}`, type, typeof value === 'undefined' ? null : value);
-	};
-
-	public publishNotesStream = (note: Packed<'Note'>): void => {
-		this.publish('notesStream', null, note);
-	};
-
-	public publishAdminStream = <K extends keyof AdminStreamTypes>(userId: User['id'], type: K, value?: AdminStreamTypes[K]): void => {
-		this.publish(`adminStream:${userId}`, type, typeof value === 'undefined' ? null : value);
-	};
-}
-
-const publisher = new Publisher();
-
-export default publisher;
-
-export const publishInternalEvent = publisher.publishInternalEvent;
-export const publishUserEvent = publisher.publishUserEvent;
-export const publishBroadcastStream = publisher.publishBroadcastStream;
-export const publishMainStream = publisher.publishMainStream;
-export const publishDriveStream = publisher.publishDriveStream;
-export const publishNoteStream = publisher.publishNoteStream;
-export const publishNotesStream = publisher.publishNotesStream;
-export const publishChannelStream = publisher.publishChannelStream;
-export const publishUserListStream = publisher.publishUserListStream;
-export const publishAntennaStream = publisher.publishAntennaStream;
-export const publishMessagingStream = publisher.publishMessagingStream;
-export const publishGroupMessagingStream = publisher.publishGroupMessagingStream;
-export const publishMessagingIndexStream = publisher.publishMessagingIndexStream;
-export const publishAdminStream = publisher.publishAdminStream;
diff --git a/packages/backend/src/services/suspend-user.ts b/packages/backend/src/services/suspend-user.ts
deleted file mode 100644
index e96b06a351..0000000000
--- a/packages/backend/src/services/suspend-user.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import renderDelete from '@/remote/activitypub/renderer/delete.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import { deliver } from '@/queue/index.js';
-import config from '@/config/index.js';
-import { User } from '@/models/entities/user.js';
-import { Users, Followings } from '@/models/index.js';
-import { Not, IsNull } from 'typeorm';
-import { publishInternalEvent } from '@/services/stream.js';
-
-export async function doPostSuspend(user: { id: User['id']; host: User['host'] }) {
-	publishInternalEvent('userChangeSuspendedState', { id: user.id, isSuspended: true });
-
-	if (Users.isLocalUser(user)) {
-		// 知り得る全SharedInboxにDelete配信
-		const content = renderActivity(renderDelete(`${config.url}/users/${user.id}`, user));
-
-		const queue: string[] = [];
-
-		const followings = await Followings.find({
-			where: [
-				{ followerSharedInbox: Not(IsNull()) },
-				{ followeeSharedInbox: Not(IsNull()) },
-			],
-			select: ['followerSharedInbox', 'followeeSharedInbox'],
-		});
-
-		const inboxes = followings.map(x => x.followerSharedInbox || x.followeeSharedInbox);
-
-		for (const inbox of inboxes) {
-			if (inbox != null && !queue.includes(inbox)) queue.push(inbox);
-		}
-
-		for (const inbox of queue) {
-			deliver(user, content, inbox);
-		}
-	}
-}
diff --git a/packages/backend/src/services/unsuspend-user.ts b/packages/backend/src/services/unsuspend-user.ts
deleted file mode 100644
index 44a0d01ca2..0000000000
--- a/packages/backend/src/services/unsuspend-user.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import renderDelete from '@/remote/activitypub/renderer/delete.js';
-import renderUndo from '@/remote/activitypub/renderer/undo.js';
-import { renderActivity } from '@/remote/activitypub/renderer/index.js';
-import { deliver } from '@/queue/index.js';
-import config from '@/config/index.js';
-import { User } from '@/models/entities/user.js';
-import { Users, Followings } from '@/models/index.js';
-import { Not, IsNull } from 'typeorm';
-import { publishInternalEvent } from '@/services/stream.js';
-
-export async function doPostUnsuspend(user: User) {
-	publishInternalEvent('userChangeSuspendedState', { id: user.id, isSuspended: false });
-
-	if (Users.isLocalUser(user)) {
-		// 知り得る全SharedInboxにUndo Delete配信
-		const content = renderActivity(renderUndo(renderDelete(`${config.url}/users/${user.id}`, user), user));
-
-		const queue: string[] = [];
-
-		const followings = await Followings.find({
-			where: [
-				{ followerSharedInbox: Not(IsNull()) },
-				{ followeeSharedInbox: Not(IsNull()) },
-			],
-			select: ['followerSharedInbox', 'followeeSharedInbox'],
-		});
-
-		const inboxes = followings.map(x => x.followerSharedInbox || x.followeeSharedInbox);
-
-		for (const inbox of inboxes) {
-			if (inbox != null && !queue.includes(inbox)) queue.push(inbox);
-		}
-
-		for (const inbox of queue) {
-			deliver(user as any, content, inbox);
-		}
-	}
-}
diff --git a/packages/backend/src/services/update-hashtag.ts b/packages/backend/src/services/update-hashtag.ts
deleted file mode 100644
index 23b210b7a9..0000000000
--- a/packages/backend/src/services/update-hashtag.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { User } from '@/models/entities/user.js';
-import { Hashtags, Users } from '@/models/index.js';
-import { hashtagChart } from '@/services/chart/index.js';
-import { genId } from '@/misc/gen-id.js';
-import { Hashtag } from '@/models/entities/hashtag.js';
-import { normalizeForSearch } from '@/misc/normalize-for-search.js';
-
-export async function updateHashtags(user: { id: User['id']; host: User['host']; }, tags: string[]) {
-	for (const tag of tags) {
-		await updateHashtag(user, tag);
-	}
-}
-
-export async function updateUsertags(user: User, tags: string[]) {
-	for (const tag of tags) {
-		await updateHashtag(user, tag, true, true);
-	}
-
-	for (const tag of (user.tags || []).filter(x => !tags.includes(x))) {
-		await updateHashtag(user, tag, true, false);
-	}
-}
-
-export async function updateHashtag(user: { id: User['id']; host: User['host']; }, tag: string, isUserAttached = false, inc = true) {
-	tag = normalizeForSearch(tag);
-
-	const index = await Hashtags.findOneBy({ name: tag });
-
-	if (index == null && !inc) return;
-
-	if (index != null) {
-		const q = Hashtags.createQueryBuilder('tag').update()
-			.where('name = :name', { name: tag });
-
-		const set = {} as any;
-
-		if (isUserAttached) {
-			if (inc) {
-				// 自分が初めてこのタグを使ったなら
-				if (!index.attachedUserIds.some(id => id === user.id)) {
-					set.attachedUserIds = () => `array_append("attachedUserIds", '${user.id}')`;
-					set.attachedUsersCount = () => `"attachedUsersCount" + 1`;
-				}
-				// 自分が(ローカル内で)初めてこのタグを使ったなら
-				if (Users.isLocalUser(user) && !index.attachedLocalUserIds.some(id => id === user.id)) {
-					set.attachedLocalUserIds = () => `array_append("attachedLocalUserIds", '${user.id}')`;
-					set.attachedLocalUsersCount = () => `"attachedLocalUsersCount" + 1`;
-				}
-				// 自分が(リモートで)初めてこのタグを使ったなら
-				if (Users.isRemoteUser(user) && !index.attachedRemoteUserIds.some(id => id === user.id)) {
-					set.attachedRemoteUserIds = () => `array_append("attachedRemoteUserIds", '${user.id}')`;
-					set.attachedRemoteUsersCount = () => `"attachedRemoteUsersCount" + 1`;
-				}
-			} else {
-				set.attachedUserIds = () => `array_remove("attachedUserIds", '${user.id}')`;
-				set.attachedUsersCount = () => `"attachedUsersCount" - 1`;
-				if (Users.isLocalUser(user)) {
-					set.attachedLocalUserIds = () => `array_remove("attachedLocalUserIds", '${user.id}')`;
-					set.attachedLocalUsersCount = () => `"attachedLocalUsersCount" - 1`;
-				} else {
-					set.attachedRemoteUserIds = () => `array_remove("attachedRemoteUserIds", '${user.id}')`;
-					set.attachedRemoteUsersCount = () => `"attachedRemoteUsersCount" - 1`;
-				}
-			}
-		} else {
-			// 自分が初めてこのタグを使ったなら
-			if (!index.mentionedUserIds.some(id => id === user.id)) {
-				set.mentionedUserIds = () => `array_append("mentionedUserIds", '${user.id}')`;
-				set.mentionedUsersCount = () => `"mentionedUsersCount" + 1`;
-			}
-			// 自分が(ローカル内で)初めてこのタグを使ったなら
-			if (Users.isLocalUser(user) && !index.mentionedLocalUserIds.some(id => id === user.id)) {
-				set.mentionedLocalUserIds = () => `array_append("mentionedLocalUserIds", '${user.id}')`;
-				set.mentionedLocalUsersCount = () => `"mentionedLocalUsersCount" + 1`;
-			}
-			// 自分が(リモートで)初めてこのタグを使ったなら
-			if (Users.isRemoteUser(user) && !index.mentionedRemoteUserIds.some(id => id === user.id)) {
-				set.mentionedRemoteUserIds = () => `array_append("mentionedRemoteUserIds", '${user.id}')`;
-				set.mentionedRemoteUsersCount = () => `"mentionedRemoteUsersCount" + 1`;
-			}
-		}
-
-		if (Object.keys(set).length > 0) {
-			q.set(set);
-			q.execute();
-		}
-	} else {
-		if (isUserAttached) {
-			Hashtags.insert({
-				id: genId(),
-				name: tag,
-				mentionedUserIds: [],
-				mentionedUsersCount: 0,
-				mentionedLocalUserIds: [],
-				mentionedLocalUsersCount: 0,
-				mentionedRemoteUserIds: [],
-				mentionedRemoteUsersCount: 0,
-				attachedUserIds: [user.id],
-				attachedUsersCount: 1,
-				attachedLocalUserIds: Users.isLocalUser(user) ? [user.id] : [],
-				attachedLocalUsersCount: Users.isLocalUser(user) ? 1 : 0,
-				attachedRemoteUserIds: Users.isRemoteUser(user) ? [user.id] : [],
-				attachedRemoteUsersCount: Users.isRemoteUser(user) ? 1 : 0,
-			} as Hashtag);
-		} else {
-			Hashtags.insert({
-				id: genId(),
-				name: tag,
-				mentionedUserIds: [user.id],
-				mentionedUsersCount: 1,
-				mentionedLocalUserIds: Users.isLocalUser(user) ? [user.id] : [],
-				mentionedLocalUsersCount: Users.isLocalUser(user) ? 1 : 0,
-				mentionedRemoteUserIds: Users.isRemoteUser(user) ? [user.id] : [],
-				mentionedRemoteUsersCount: Users.isRemoteUser(user) ? 1 : 0,
-				attachedUserIds: [],
-				attachedUsersCount: 0,
-				attachedLocalUserIds: [],
-				attachedLocalUsersCount: 0,
-				attachedRemoteUserIds: [],
-				attachedRemoteUsersCount: 0,
-			} as Hashtag);
-		}
-	}
-
-	if (!isUserAttached) {
-		hashtagChart.update(tag, user);
-	}
-}
diff --git a/packages/backend/src/services/user-cache.ts b/packages/backend/src/services/user-cache.ts
deleted file mode 100644
index 407301f2fd..0000000000
--- a/packages/backend/src/services/user-cache.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { CacheableLocalUser, CacheableUser, ILocalUser, User } from '@/models/entities/user.js';
-import { Users } from '@/models/index.js';
-import { Cache } from '@/misc/cache.js';
-import { subsdcriber } from '@/db/redis.js';
-
-export const userByIdCache = new Cache<CacheableUser>(Infinity);
-export const localUserByNativeTokenCache = new Cache<CacheableLocalUser | null>(Infinity);
-export const localUserByIdCache = new Cache<CacheableLocalUser>(Infinity);
-export const uriPersonCache = new Cache<CacheableUser | null>(Infinity);
-
-subsdcriber.on('message', async (_, data) => {
-	const obj = JSON.parse(data);
-
-	if (obj.channel === 'internal') {
-		const { type, body } = obj.message;
-		switch (type) {
-			case 'userChangeSuspendedState':
-			case 'userChangeSilencedState':
-			case 'userChangeModeratorState':
-			case 'remoteUserUpdated': {
-				const user = await Users.findOneByOrFail({ id: body.id });
-				userByIdCache.set(user.id, user);
-				for (const [k, v] of uriPersonCache.cache.entries()) {
-					if (v.value?.id === user.id) {
-						uriPersonCache.set(k, user);
-					}
-				}
-				if (Users.isLocalUser(user)) {
-					localUserByNativeTokenCache.set(user.token, user);
-					localUserByIdCache.set(user.id, user);
-				}
-				break;
-			}
-			case 'userTokenRegenerated': {
-				const user = await Users.findOneByOrFail({ id: body.id }) as ILocalUser;
-				localUserByNativeTokenCache.delete(body.oldToken);
-				localUserByNativeTokenCache.set(body.newToken, user);
-				break;
-			}
-			default:
-				break;
-		}
-	}
-});
diff --git a/packages/backend/src/services/user-list/push.ts b/packages/backend/src/services/user-list/push.ts
deleted file mode 100644
index d073afcd3a..0000000000
--- a/packages/backend/src/services/user-list/push.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { publishUserListStream } from '@/services/stream.js';
-import { User } from '@/models/entities/user.js';
-import { UserList } from '@/models/entities/user-list.js';
-import { UserListJoinings, Users } from '@/models/index.js';
-import { UserListJoining } from '@/models/entities/user-list-joining.js';
-import { genId } from '@/misc/gen-id.js';
-import { fetchProxyAccount } from '@/misc/fetch-proxy-account.js';
-import createFollowing from '../following/create.js';
-
-export async function pushUserToUserList(target: User, list: UserList) {
-	await UserListJoinings.insert({
-		id: genId(),
-		createdAt: new Date(),
-		userId: target.id,
-		userListId: list.id,
-	} as UserListJoining);
-
-	publishUserListStream(list.id, 'userAdded', await Users.pack(target));
-
-	// このインスタンス内にこのリモートユーザーをフォローしているユーザーがいなくても投稿を受け取るためにダミーのユーザーがフォローしたということにする
-	if (Users.isRemoteUser(target)) {
-		const proxy = await fetchProxyAccount();
-		if (proxy) {
-			createFollowing(proxy, target);
-		}
-	}
-}
diff --git a/packages/backend/src/services/validate-email-for-account.ts b/packages/backend/src/services/validate-email-for-account.ts
deleted file mode 100644
index b5fa99b935..0000000000
--- a/packages/backend/src/services/validate-email-for-account.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { validate as validateEmail } from 'deep-email-validator';
-import { UserProfiles } from '@/models/index.js';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-
-export async function validateEmailForAccount(emailAddress: string): Promise<{
-	available: boolean;
-	reason: null | 'used' | 'format' | 'disposable' | 'mx' | 'smtp';
-}> {
-	const meta = await fetchMeta();
-
-	const exist = await UserProfiles.countBy({
-		emailVerified: true,
-		email: emailAddress,
-	});
-
-	const validated = meta.enableActiveEmailValidation ? await validateEmail({
-		email: emailAddress,
-		validateRegex: true,
-		validateMx: true,
-		validateTypo: false, // TLDを見ているみたいだけどclubとか弾かれるので
-		validateDisposable: true, // 捨てアドかどうかチェック
-		validateSMTP: false, // 日本だと25ポートが殆どのプロバイダーで塞がれていてタイムアウトになるので
-	}) : { valid: true };
-
-	const available = exist === 0 && validated.valid;
-
-	return {
-		available,
-		reason: available ? null :
-		exist !== 0 ? 'used' :
-		validated.reason === 'regex' ? 'format' :
-		validated.reason === 'disposable' ? 'disposable' :
-		validated.reason === 'mx' ? 'mx' :
-		validated.reason === 'smtp' ? 'smtp' :
-		null,
-	};
-}
diff --git a/packages/backend/test/.eslintrc.cjs b/packages/backend/test/.eslintrc.cjs
index d83dc37d2f..41ecea0c3f 100644
--- a/packages/backend/test/.eslintrc.cjs
+++ b/packages/backend/test/.eslintrc.cjs
@@ -6,6 +6,6 @@ module.exports = {
 	extends: ['../.eslintrc.cjs'],
 	env: {
 		node: true,
-		mocha: true,
+		jest: true,
 	},
 };
diff --git a/packages/backend/test/_e2e/api-visibility.ts b/packages/backend/test/_e2e/api-visibility.ts
new file mode 100644
index 0000000000..9c21840844
--- /dev/null
+++ b/packages/backend/test/_e2e/api-visibility.ts
@@ -0,0 +1,477 @@
+process.env.NODE_ENV = 'test';
+
+import * as assert from 'assert';
+import * as childProcess from 'child_process';
+import { signup, request, post, startServer, shutdownServer } from '../utils.js';
+
+describe('API visibility', () => {
+	let p: childProcess.ChildProcess;
+
+	beforeAll(async () => {
+		p = await startServer();
+	}, 1000 * 30);
+
+	afterAll(async () => {
+		await shutdownServer(p);
+	});
+
+	describe('Note visibility', () => {
+		//#region vars
+		/** ヒロイン */
+		let alice: any;
+		/** フォロワー */
+		let follower: any;
+		/** 非フォロワー */
+		let other: any;
+		/** 非フォロワーでもリプライやメンションをされた人 */
+		let target: any;
+		/** specified mentionでmentionを飛ばされる人 */
+		let target2: any;
+
+		/** public-post */
+		let pub: any;
+		/** home-post */
+		let home: any;
+		/** followers-post */
+		let fol: any;
+		/** specified-post */
+		let spe: any;
+
+		/** public-reply to target's post */
+		let pubR: any;
+		/** home-reply to target's post */
+		let homeR: any;
+		/** followers-reply to target's post */
+		let folR: any;
+		/** specified-reply to target's post */
+		let speR: any;
+
+		/** public-mention to target */
+		let pubM: any;
+		/** home-mention to target */
+		let homeM: any;
+		/** followers-mention to target */
+		let folM: any;
+		/** specified-mention to target */
+		let speM: any;
+
+		/** reply target post */
+		let tgt: any;
+		//#endregion
+
+		const show = async (noteId: any, by: any) => {
+			return await request('/notes/show', {
+				noteId,
+			}, by);
+		};
+
+		beforeAll(async () => {
+			//#region prepare
+			// signup
+			alice = await signup({ username: 'alice' });
+			follower = await signup({ username: 'follower' });
+			other = await signup({ username: 'other' });
+			target = await signup({ username: 'target' });
+			target2 = await signup({ username: 'target2' });
+
+			// follow alice <= follower
+			await request('/following/create', { userId: alice.id }, follower);
+
+			// normal posts
+			pub = await post(alice, { text: 'x', visibility: 'public' });
+			home = await post(alice, { text: 'x', visibility: 'home' });
+			fol = await post(alice, { text: 'x', visibility: 'followers' });
+			spe = await post(alice, { text: 'x', visibility: 'specified', visibleUserIds: [target.id] });
+
+			// replies
+			tgt = await post(target, { text: 'y', visibility: 'public' });
+			pubR = await post(alice, { text: 'x', replyId: tgt.id, visibility: 'public' });
+			homeR = await post(alice, { text: 'x', replyId: tgt.id, visibility: 'home' });
+			folR = await post(alice, { text: 'x', replyId: tgt.id, visibility: 'followers' });
+			speR = await post(alice, { text: 'x', replyId: tgt.id, visibility: 'specified' });
+
+			// mentions
+			pubM = await post(alice, { text: '@target x', replyId: tgt.id, visibility: 'public' });
+			homeM = await post(alice, { text: '@target x', replyId: tgt.id, visibility: 'home' });
+			folM = await post(alice, { text: '@target x', replyId: tgt.id, visibility: 'followers' });
+			speM = await post(alice, { text: '@target2 x', replyId: tgt.id, visibility: 'specified' });
+			//#endregion
+		});
+
+		//#region show post
+		// public
+		it('[show] public-postを自分が見れる', async () => {
+			const res = await show(pub.id, alice);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] public-postをフォロワーが見れる', async () => {
+			const res = await show(pub.id, follower);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] public-postを非フォロワーが見れる', async () => {
+			const res = await show(pub.id, other);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] public-postを未認証が見れる', async () => {
+			const res = await show(pub.id, null);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		// home
+		it('[show] home-postを自分が見れる', async () => {
+			const res = await show(home.id, alice);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] home-postをフォロワーが見れる', async () => {
+			const res = await show(home.id, follower);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] home-postを非フォロワーが見れる', async () => {
+			const res = await show(home.id, other);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] home-postを未認証が見れる', async () => {
+			const res = await show(home.id, null);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		// followers
+		it('[show] followers-postを自分が見れる', async () => {
+			const res = await show(fol.id, alice);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] followers-postをフォロワーが見れる', async () => {
+			const res = await show(fol.id, follower);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] followers-postを非フォロワーが見れない', async () => {
+			const res = await show(fol.id, other);
+			assert.strictEqual(res.body.isHidden, true);
+		});
+
+		it('[show] followers-postを未認証が見れない', async () => {
+			const res = await show(fol.id, null);
+			assert.strictEqual(res.body.isHidden, true);
+		});
+
+		// specified
+		it('[show] specified-postを自分が見れる', async () => {
+			const res = await show(spe.id, alice);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] specified-postを指定ユーザーが見れる', async () => {
+			const res = await show(spe.id, target);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] specified-postをフォロワーが見れない', async () => {
+			const res = await show(spe.id, follower);
+			assert.strictEqual(res.body.isHidden, true);
+		});
+
+		it('[show] specified-postを非フォロワーが見れない', async () => {
+			const res = await show(spe.id, other);
+			assert.strictEqual(res.body.isHidden, true);
+		});
+
+		it('[show] specified-postを未認証が見れない', async () => {
+			const res = await show(spe.id, null);
+			assert.strictEqual(res.body.isHidden, true);
+		});
+		//#endregion
+
+		//#region show reply
+		// public
+		it('[show] public-replyを自分が見れる', async () => {
+			const res = await show(pubR.id, alice);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] public-replyをされた人が見れる', async () => {
+			const res = await show(pubR.id, target);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] public-replyをフォロワーが見れる', async () => {
+			const res = await show(pubR.id, follower);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] public-replyを非フォロワーが見れる', async () => {
+			const res = await show(pubR.id, other);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] public-replyを未認証が見れる', async () => {
+			const res = await show(pubR.id, null);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		// home
+		it('[show] home-replyを自分が見れる', async () => {
+			const res = await show(homeR.id, alice);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] home-replyをされた人が見れる', async () => {
+			const res = await show(homeR.id, target);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] home-replyをフォロワーが見れる', async () => {
+			const res = await show(homeR.id, follower);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] home-replyを非フォロワーが見れる', async () => {
+			const res = await show(homeR.id, other);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] home-replyを未認証が見れる', async () => {
+			const res = await show(homeR.id, null);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		// followers
+		it('[show] followers-replyを自分が見れる', async () => {
+			const res = await show(folR.id, alice);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] followers-replyを非フォロワーでもリプライされていれば見れる', async () => {
+			const res = await show(folR.id, target);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] followers-replyをフォロワーが見れる', async () => {
+			const res = await show(folR.id, follower);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] followers-replyを非フォロワーが見れない', async () => {
+			const res = await show(folR.id, other);
+			assert.strictEqual(res.body.isHidden, true);
+		});
+
+		it('[show] followers-replyを未認証が見れない', async () => {
+			const res = await show(folR.id, null);
+			assert.strictEqual(res.body.isHidden, true);
+		});
+
+		// specified
+		it('[show] specified-replyを自分が見れる', async () => {
+			const res = await show(speR.id, alice);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] specified-replyを指定ユーザーが見れる', async () => {
+			const res = await show(speR.id, target);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] specified-replyをされた人が指定されてなくても見れる', async () => {
+			const res = await show(speR.id, target);
+			assert.strictEqual(res.body.text, 'x');
+		});
+
+		it('[show] specified-replyをフォロワーが見れない', async () => {
+			const res = await show(speR.id, follower);
+			assert.strictEqual(res.body.isHidden, true);
+		});
+
+		it('[show] specified-replyを非フォロワーが見れない', async () => {
+			const res = await show(speR.id, other);
+			assert.strictEqual(res.body.isHidden, true);
+		});
+
+		it('[show] specified-replyを未認証が見れない', async () => {
+			const res = await show(speR.id, null);
+			assert.strictEqual(res.body.isHidden, true);
+		});
+		//#endregion
+
+		//#region show mention
+		// public
+		it('[show] public-mentionを自分が見れる', async () => {
+			const res = await show(pubM.id, alice);
+			assert.strictEqual(res.body.text, '@target x');
+		});
+
+		it('[show] public-mentionをされた人が見れる', async () => {
+			const res = await show(pubM.id, target);
+			assert.strictEqual(res.body.text, '@target x');
+		});
+
+		it('[show] public-mentionをフォロワーが見れる', async () => {
+			const res = await show(pubM.id, follower);
+			assert.strictEqual(res.body.text, '@target x');
+		});
+
+		it('[show] public-mentionを非フォロワーが見れる', async () => {
+			const res = await show(pubM.id, other);
+			assert.strictEqual(res.body.text, '@target x');
+		});
+
+		it('[show] public-mentionを未認証が見れる', async () => {
+			const res = await show(pubM.id, null);
+			assert.strictEqual(res.body.text, '@target x');
+		});
+
+		// home
+		it('[show] home-mentionを自分が見れる', async () => {
+			const res = await show(homeM.id, alice);
+			assert.strictEqual(res.body.text, '@target x');
+		});
+
+		it('[show] home-mentionをされた人が見れる', async () => {
+			const res = await show(homeM.id, target);
+			assert.strictEqual(res.body.text, '@target x');
+		});
+
+		it('[show] home-mentionをフォロワーが見れる', async () => {
+			const res = await show(homeM.id, follower);
+			assert.strictEqual(res.body.text, '@target x');
+		});
+
+		it('[show] home-mentionを非フォロワーが見れる', async () => {
+			const res = await show(homeM.id, other);
+			assert.strictEqual(res.body.text, '@target x');
+		});
+
+		it('[show] home-mentionを未認証が見れる', async () => {
+			const res = await show(homeM.id, null);
+			assert.strictEqual(res.body.text, '@target x');
+		});
+
+		// followers
+		it('[show] followers-mentionを自分が見れる', async () => {
+			const res = await show(folM.id, alice);
+			assert.strictEqual(res.body.text, '@target x');
+		});
+
+		it('[show] followers-mentionをメンションされていれば非フォロワーでも見れる', async () => {
+			const res = await show(folM.id, target);
+			assert.strictEqual(res.body.text, '@target x');
+		});
+
+		it('[show] followers-mentionをフォロワーが見れる', async () => {
+			const res = await show(folM.id, follower);
+			assert.strictEqual(res.body.text, '@target x');
+		});
+
+		it('[show] followers-mentionを非フォロワーが見れない', async () => {
+			const res = await show(folM.id, other);
+			assert.strictEqual(res.body.isHidden, true);
+		});
+
+		it('[show] followers-mentionを未認証が見れない', async () => {
+			const res = await show(folM.id, null);
+			assert.strictEqual(res.body.isHidden, true);
+		});
+
+		// specified
+		it('[show] specified-mentionを自分が見れる', async () => {
+			const res = await show(speM.id, alice);
+			assert.strictEqual(res.body.text, '@target2 x');
+		});
+
+		it('[show] specified-mentionを指定ユーザーが見れる', async () => {
+			const res = await show(speM.id, target);
+			assert.strictEqual(res.body.text, '@target2 x');
+		});
+
+		it('[show] specified-mentionをされた人が指定されてなかったら見れない', async () => {
+			const res = await show(speM.id, target2);
+			assert.strictEqual(res.body.isHidden, true);
+		});
+
+		it('[show] specified-mentionをフォロワーが見れない', async () => {
+			const res = await show(speM.id, follower);
+			assert.strictEqual(res.body.isHidden, true);
+		});
+
+		it('[show] specified-mentionを非フォロワーが見れない', async () => {
+			const res = await show(speM.id, other);
+			assert.strictEqual(res.body.isHidden, true);
+		});
+
+		it('[show] specified-mentionを未認証が見れない', async () => {
+			const res = await show(speM.id, null);
+			assert.strictEqual(res.body.isHidden, true);
+		});
+		//#endregion
+
+		//#region HTL
+		it('[HTL] public-post が 自分が見れる', async () => {
+			const res = await request('/notes/timeline', { limit: 100 }, alice);
+			assert.strictEqual(res.status, 200);
+			const notes = res.body.filter((n: any) => n.id === pub.id);
+			assert.strictEqual(notes[0].text, 'x');
+		});
+
+		it('[HTL] public-post が 非フォロワーから見れない', async () => {
+			const res = await request('/notes/timeline', { limit: 100 }, other);
+			assert.strictEqual(res.status, 200);
+			const notes = res.body.filter((n: any) => n.id === pub.id);
+			assert.strictEqual(notes.length, 0);
+		});
+
+		it('[HTL] followers-post が フォロワーから見れる', async () => {
+			const res = await request('/notes/timeline', { limit: 100 }, follower);
+			assert.strictEqual(res.status, 200);
+			const notes = res.body.filter((n: any) => n.id === fol.id);
+			assert.strictEqual(notes[0].text, 'x');
+		});
+		//#endregion
+
+		//#region RTL
+		it('[replies] followers-reply が フォロワーから見れる', async () => {
+			const res = await request('/notes/replies', { noteId: tgt.id, limit: 100 }, follower);
+			assert.strictEqual(res.status, 200);
+			const notes = res.body.filter((n: any) => n.id === folR.id);
+			assert.strictEqual(notes[0].text, 'x');
+		});
+
+		it('[replies] followers-reply が 非フォロワー (リプライ先ではない) から見れない', async () => {
+			const res = await request('/notes/replies', { noteId: tgt.id, limit: 100 }, other);
+			assert.strictEqual(res.status, 200);
+			const notes = res.body.filter((n: any) => n.id === folR.id);
+			assert.strictEqual(notes.length, 0);
+		});
+
+		it('[replies] followers-reply が 非フォロワー (リプライ先である) から見れる', async () => {
+			const res = await request('/notes/replies', { noteId: tgt.id, limit: 100 }, target);
+			assert.strictEqual(res.status, 200);
+			const notes = res.body.filter((n: any) => n.id === folR.id);
+			assert.strictEqual(notes[0].text, 'x');
+		});
+		//#endregion
+
+		//#region MTL
+		it('[mentions] followers-reply が 非フォロワー (リプライ先である) から見れる', async () => {
+			const res = await request('/notes/mentions', { limit: 100 }, target);
+			assert.strictEqual(res.status, 200);
+			const notes = res.body.filter((n: any) => n.id === folR.id);
+			assert.strictEqual(notes[0].text, 'x');
+		});
+
+		it('[mentions] followers-mention が 非フォロワー (メンション先である) から見れる', async () => {
+			const res = await request('/notes/mentions', { limit: 100 }, target);
+			assert.strictEqual(res.status, 200);
+			const notes = res.body.filter((n: any) => n.id === folM.id);
+			assert.strictEqual(notes[0].text, '@target x');
+		});
+		//#endregion
+	});
+});
+*/
diff --git a/packages/backend/test/_e2e/api.ts b/packages/backend/test/_e2e/api.ts
new file mode 100644
index 0000000000..3c08022031
--- /dev/null
+++ b/packages/backend/test/_e2e/api.ts
@@ -0,0 +1,83 @@
+process.env.NODE_ENV = 'test';
+
+import * as assert from 'assert';
+import * as childProcess from 'child_process';
+import { async, signup, request, post, react, uploadFile, startServer, shutdownServer } from '../utils.js';
+
+describe('API', () => {
+	let p: childProcess.ChildProcess;
+	let alice: any;
+	let bob: any;
+	let carol: any;
+
+	beforeAll(async () => {
+		p = await startServer();
+		alice = await signup({ username: 'alice' });
+		bob = await signup({ username: 'bob' });
+		carol = await signup({ username: 'carol' });
+	}, 1000 * 30);
+
+	afterAll(async () => {
+		await shutdownServer(p);
+	});
+
+	describe('General validation', () => {
+		it('wrong type', async(async () => {
+			const res = await request('/test', {
+				required: true,
+				string: 42,
+			});
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('missing require param', async(async () => {
+			const res = await request('/test', {
+				string: 'a',
+			});
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('invalid misskey:id (empty string)', async(async () => {
+			const res = await request('/test', {
+				required: true,
+				id: '',
+			});
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('valid misskey:id', async(async () => {
+			const res = await request('/test', {
+				required: true,
+				id: '8wvhjghbxu',
+			});
+			assert.strictEqual(res.status, 200);
+		}));
+
+		it('default value', async(async () => {
+			const res = await request('/test', {
+				required: true,
+				string: 'a',
+			});
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.body.default, 'hello');
+		}));
+
+		it('can set null even if it has default value', async(async () => {
+			const res = await request('/test', {
+				required: true,
+				nullableDefault: null,
+			});
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.body.nullableDefault, null);
+		}));
+
+		it('cannot set undefined if it has default value', async(async () => {
+			const res = await request('/test', {
+				required: true,
+				nullableDefault: undefined,
+			});
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.body.nullableDefault, 'hello');
+		}));
+	});
+});
diff --git a/packages/backend/test/_e2e/block.ts b/packages/backend/test/_e2e/block.ts
new file mode 100644
index 0000000000..bb31983a32
--- /dev/null
+++ b/packages/backend/test/_e2e/block.ts
@@ -0,0 +1,85 @@
+process.env.NODE_ENV = 'test';
+
+import * as assert from 'assert';
+import * as childProcess from 'child_process';
+import { signup, request, post, startServer, shutdownServer } from '../utils.js';
+
+describe('Block', () => {
+	let p: childProcess.ChildProcess;
+
+	// alice blocks bob
+	let alice: any;
+	let bob: any;
+	let carol: any;
+
+	beforeAll(async () => {
+		p = await startServer();
+		alice = await signup({ username: 'alice' });
+		bob = await signup({ username: 'bob' });
+		carol = await signup({ username: 'carol' });
+	}, 1000 * 30);
+
+	afterAll(async () => {
+		await shutdownServer(p);
+	});
+
+	it('Block作成', async () => {
+		const res = await request('/blocking/create', {
+			userId: bob.id,
+		}, alice);
+
+		assert.strictEqual(res.status, 200);
+	});
+
+	it('ブロックされているユーザーをフォローできない', async () => {
+		const res = await request('/following/create', { userId: alice.id }, bob);
+
+		assert.strictEqual(res.status, 400);
+		assert.strictEqual(res.body.error.id, 'c4ab57cc-4e41-45e9-bfd9-584f61e35ce0');
+	});
+
+	it('ブロックされているユーザーにリアクションできない', async () => {
+		const note = await post(alice, { text: 'hello' });
+
+		const res = await request('/notes/reactions/create', { noteId: note.id, reaction: '👍' }, bob);
+
+		assert.strictEqual(res.status, 400);
+		assert.strictEqual(res.body.error.id, '20ef5475-9f38-4e4c-bd33-de6d979498ec');
+	});
+
+	it('ブロックされているユーザーに返信できない', async () => {
+		const note = await post(alice, { text: 'hello' });
+
+		const res = await request('/notes/create', { replyId: note.id, text: 'yo' }, bob);
+
+		assert.strictEqual(res.status, 400);
+		assert.strictEqual(res.body.error.id, 'b390d7e1-8a5e-46ed-b625-06271cafd3d3');
+	});
+
+	it('ブロックされているユーザーのノートをRenoteできない', async () => {
+		const note = await post(alice, { text: 'hello' });
+
+		const res = await request('/notes/create', { renoteId: note.id, text: 'yo' }, bob);
+
+		assert.strictEqual(res.status, 400);
+		assert.strictEqual(res.body.error.id, 'b390d7e1-8a5e-46ed-b625-06271cafd3d3');
+	});
+
+	// TODO: ユーザーリストに入れられないテスト
+
+	// TODO: ユーザーリストから除外されるテスト
+
+	it('タイムライン(LTL)にブロックされているユーザーの投稿が含まれない', async () => {
+		const aliceNote = await post(alice);
+		const bobNote = await post(bob);
+		const carolNote = await post(carol);
+
+		const res = await request('/notes/local-timeline', {}, bob);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(Array.isArray(res.body), true);
+		assert.strictEqual(res.body.some((note: any) => note.id === aliceNote.id), false);
+		assert.strictEqual(res.body.some((note: any) => note.id === bobNote.id), true);
+		assert.strictEqual(res.body.some((note: any) => note.id === carolNote.id), true);
+	});
+});
diff --git a/packages/backend/test/_e2e/endpoints.ts b/packages/backend/test/_e2e/endpoints.ts
new file mode 100644
index 0000000000..05b74a65d4
--- /dev/null
+++ b/packages/backend/test/_e2e/endpoints.ts
@@ -0,0 +1,881 @@
+process.env.NODE_ENV = 'test';
+
+import * as assert from 'assert';
+import * as childProcess from 'child_process';
+import * as openapi from '@redocly/openapi-core';
+import { startServer, signup, post, request, simpleGet, port, shutdownServer, api } from '../utils.js';
+
+describe('Endpoints', () => {
+	let p: childProcess.ChildProcess;
+
+	let alice: any;
+	let bob: any;
+
+	beforeAll(async () => {
+		p = await startServer();
+		alice = await signup({ username: 'alice' });
+		bob = await signup({ username: 'bob' });
+	}, 1000 * 30);
+
+	afterAll(async () => {
+		await shutdownServer(p);
+	});
+
+	describe('signup', () => {
+		it('不正なユーザー名でアカウントが作成できない', async () => {
+			const res = await request('api/signup', {
+				username: 'test.',
+				password: 'test',
+			});
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('空のパスワードでアカウントが作成できない', async () => {
+			const res = await request('api/signup', {
+				username: 'test',
+				password: '',
+			});
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('正しくアカウントが作成できる', async () => {
+			const me = {
+				username: 'test1',
+				password: 'test1',
+			};
+
+			const res = await request('api/signup', me);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			assert.strictEqual(res.body.username, me.username);
+		});
+
+		it('同じユーザー名のアカウントは作成できない', async () => {
+			const res = await request('api/signup', {
+				username: 'test1',
+				password: 'test1',
+			});
+
+			assert.strictEqual(res.status, 400);
+		});
+	});
+
+	describe('signin', () => {
+		it('間違ったパスワードでサインインできない', async () => {
+			const res = await request('api/signin', {
+				username: 'test1',
+				password: 'bar',
+			});
+
+			assert.strictEqual(res.status, 403);
+		});
+
+		it('クエリをインジェクションできない', async () => {
+			const res = await request('api/signin', {
+				username: 'test1',
+				password: {
+					$gt: '',
+				},
+			});
+
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('正しい情報でサインインできる', async () => {
+			const res = await request('api/signin', {
+				username: 'test1',
+				password: 'test1',
+			});
+
+			assert.strictEqual(res.status, 200);
+		});
+	});
+
+	describe('i/update', () => {
+		it('アカウント設定を更新できる', async () => {
+			const myName = '大室櫻子';
+			const myLocation = '七森中';
+			const myBirthday = '2000-09-07';
+
+			const res = await api('/i/update', {
+				name: myName,
+				location: myLocation,
+				birthday: myBirthday,
+			}, alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			assert.strictEqual(res.body.name, myName);
+			assert.strictEqual(res.body.location, myLocation);
+			assert.strictEqual(res.body.birthday, myBirthday);
+		});
+
+		it('名前を空白にできない', async () => {
+			const res = await api('/i/update', {
+				name: ' ',
+			}, alice);
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('誕生日の設定を削除できる', async () => {
+			await api('/i/update', {
+				birthday: '2000-09-07',
+			}, alice);
+
+			const res = await api('/i/update', {
+				birthday: null,
+			}, alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			assert.strictEqual(res.body.birthday, null);
+		});
+
+		it('不正な誕生日の形式で怒られる', async () => {
+			const res = await api('/i/update', {
+				birthday: '2000/09/07',
+			}, alice);
+			assert.strictEqual(res.status, 400);
+		});
+	});
+
+	describe('users/show', () => {
+		it('ユーザーが取得できる', async () => {
+			const res = await api('/users/show', {
+				userId: alice.id,
+			}, alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			assert.strictEqual(res.body.id, alice.id);
+		});
+
+		it('ユーザーが存在しなかったら怒る', async () => {
+			const res = await api('/users/show', {
+				userId: '000000000000000000000000',
+			});
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('間違ったIDで怒られる', async () => {
+			const res = await api('/users/show', {
+				userId: 'kyoppie',
+			});
+			assert.strictEqual(res.status, 400);
+		});
+	});
+
+	describe('notes/show', () => {
+		it('投稿が取得できる', async () => {
+			const myPost = await post(alice, {
+				text: 'test',
+			});
+
+			const res = await api('/notes/show', {
+				noteId: myPost.id,
+			}, alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			assert.strictEqual(res.body.id, myPost.id);
+			assert.strictEqual(res.body.text, myPost.text);
+		});
+
+		it('投稿が存在しなかったら怒る', async () => {
+			const res = await api('/notes/show', {
+				noteId: '000000000000000000000000',
+			});
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('間違ったIDで怒られる', async () => {
+			const res = await api('/notes/show', {
+				noteId: 'kyoppie',
+			});
+			assert.strictEqual(res.status, 400);
+		});
+	});
+
+	describe('notes/reactions/create', () => {
+		it('リアクションできる', async () => {
+			const bobPost = await post(bob);
+
+			const alice = await signup({ username: 'alice' });
+			const res = await api('/notes/reactions/create', {
+				noteId: bobPost.id,
+				reaction: '🚀',
+			}, alice);
+
+			assert.strictEqual(res.status, 204);
+
+			const resNote = await api('/notes/show', {
+				noteId: bobPost.id,
+			}, alice);
+
+			assert.strictEqual(resNote.status, 200);
+			assert.strictEqual(resNote.body.reactions['🚀'], [alice.id]);
+		});
+
+		it('自分の投稿にもリアクションできる', async () => {
+			const myPost = await post(alice);
+
+			const res = await api('/notes/reactions/create', {
+				noteId: myPost.id,
+				reaction: '🚀',
+			}, alice);
+
+			assert.strictEqual(res.status, 204);
+		});
+
+		it('二重にリアクションできない', async () => {
+			const bobPost = await post(bob);
+
+			await api('/notes/reactions/create', {
+				noteId: bobPost.id,
+				reaction: '🥰',
+			}, alice);
+
+			const res = await api('/notes/reactions/create', {
+				noteId: bobPost.id,
+				reaction: '🚀',
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('存在しない投稿にはリアクションできない', async () => {
+			const res = await api('/notes/reactions/create', {
+				noteId: '000000000000000000000000',
+				reaction: '🚀',
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('空のパラメータで怒られる', async () => {
+			const res = await api('/notes/reactions/create', {}, alice);
+
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('間違ったIDで怒られる', async () => {
+			const res = await api('/notes/reactions/create', {
+				noteId: 'kyoppie',
+				reaction: '🚀',
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		});
+	});
+
+	describe('following/create', () => {
+		it('フォローできる', async () => {
+			const res = await api('/following/create', {
+				userId: alice.id,
+			}, bob);
+
+			assert.strictEqual(res.status, 200);
+		});
+
+		it('既にフォローしている場合は怒る', async () => {
+			const res = await api('/following/create', {
+				userId: alice.id,
+			}, bob);
+
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('存在しないユーザーはフォローできない', async () => {
+			const res = await api('/following/create', {
+				userId: '000000000000000000000000',
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('自分自身はフォローできない', async () => {
+			const res = await api('/following/create', {
+				userId: alice.id,
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('空のパラメータで怒られる', async () => {
+			const res = await api('/following/create', {}, alice);
+
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('間違ったIDで怒られる', async () => {
+			const res = await api('/following/create', {
+				userId: 'foo',
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		});
+	});
+
+	describe('following/delete', () => {
+		it('フォロー解除できる', async () => {
+			await api('/following/create', {
+				userId: alice.id,
+			}, bob);
+
+			const res = await api('/following/delete', {
+				userId: alice.id,
+			}, bob);
+
+			assert.strictEqual(res.status, 200);
+		});
+
+		it('フォローしていない場合は怒る', async () => {
+			const res = await api('/following/delete', {
+				userId: alice.id,
+			}, bob);
+
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('存在しないユーザーはフォロー解除できない', async () => {
+			const res = await api('/following/delete', {
+				userId: '000000000000000000000000',
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('自分自身はフォロー解除できない', async () => {
+			const res = await api('/following/delete', {
+				userId: alice.id,
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('空のパラメータで怒られる', async () => {
+			const res = await api('/following/delete', {}, alice);
+
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('間違ったIDで怒られる', async () => {
+			const res = await api('/following/delete', {
+				userId: 'kyoppie',
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		});
+	});
+
+	/*
+	describe('/i', () => {
+		it('', async () => {
+		});
+	});
+	*/
+});
+
+/*
+process.env.NODE_ENV = 'test';
+
+import * as assert from 'assert';
+import * as childProcess from 'child_process';
+import { async, signup, request, post, react, uploadFile, startServer, shutdownServer } from './utils.js';
+
+describe('API: Endpoints', () => {
+	let p: childProcess.ChildProcess;
+	let alice: any;
+	let bob: any;
+	let carol: any;
+
+	before(async () => {
+		p = await startServer();
+		alice = await signup({ username: 'alice' });
+		bob = await signup({ username: 'bob' });
+		carol = await signup({ username: 'carol' });
+	});
+
+	after(async () => {
+		await shutdownServer(p);
+	});
+
+	describe('drive', () => {
+		it('ドライブ情報を取得できる', async () => {
+			await uploadFile({
+				userId: alice.id,
+				size: 256
+			});
+			await uploadFile({
+				userId: alice.id,
+				size: 512
+			});
+			await uploadFile({
+				userId: alice.id,
+				size: 1024
+			});
+			const res = await api('/drive', {}, alice);
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			expect(res.body).have.property('usage').eql(1792);
+		}));
+	});
+
+	describe('drive/files/create', () => {
+		it('ファイルを作成できる', async () => {
+			const res = await uploadFile(alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			assert.strictEqual(res.body.name, 'Lenna.png');
+		}));
+
+		it('ファイルに名前を付けられる', async () => {
+			const res = await assert.request(server)
+				.post('/drive/files/create')
+				.field('i', alice.token)
+				.field('name', 'Belmond.png')
+				.attach('file', fs.readFileSync(__dirname + '/resources/Lenna.png'), 'Lenna.png');
+
+			expect(res).have.status(200);
+			expect(res.body).be.a('object');
+			expect(res.body).have.property('name').eql('Belmond.png');
+		}));
+
+		it('ファイル無しで怒られる', async () => {
+			const res = await api('/drive/files/create', {}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('SVGファイルを作成できる', async () => {
+			const res = await uploadFile(alice, __dirname + '/resources/image.svg');
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			assert.strictEqual(res.body.name, 'image.svg');
+			assert.strictEqual(res.body.type, 'image/svg+xml');
+		}));
+	});
+
+	describe('drive/files/update', () => {
+		it('名前を更新できる', async () => {
+			const file = await uploadFile(alice);
+			const newName = 'いちごパスタ.png';
+
+			const res = await api('/drive/files/update', {
+				fileId: file.id,
+				name: newName
+			}, alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			assert.strictEqual(res.body.name, newName);
+		}));
+
+		it('他人のファイルは更新できない', async () => {
+			const file = await uploadFile(bob);
+
+			const res = await api('/drive/files/update', {
+				fileId: file.id,
+				name: 'いちごパスタ.png'
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('親フォルダを更新できる', async () => {
+			const file = await uploadFile(alice);
+			const folder = (await api('/drive/folders/create', {
+				name: 'test'
+			}, alice)).body;
+
+			const res = await api('/drive/files/update', {
+				fileId: file.id,
+				folderId: folder.id
+			}, alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			assert.strictEqual(res.body.folderId, folder.id);
+		}));
+
+		it('親フォルダを無しにできる', async () => {
+			const file = await uploadFile(alice);
+
+			const folder = (await api('/drive/folders/create', {
+				name: 'test'
+			}, alice)).body;
+
+			await api('/drive/files/update', {
+				fileId: file.id,
+				folderId: folder.id
+			}, alice);
+
+			const res = await api('/drive/files/update', {
+				fileId: file.id,
+				folderId: null
+			}, alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			assert.strictEqual(res.body.folderId, null);
+		}));
+
+		it('他人のフォルダには入れられない', async () => {
+			const file = await uploadFile(alice);
+			const folder = (await api('/drive/folders/create', {
+				name: 'test'
+			}, bob)).body;
+
+			const res = await api('/drive/files/update', {
+				fileId: file.id,
+				folderId: folder.id
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('存在しないフォルダで怒られる', async () => {
+			const file = await uploadFile(alice);
+
+			const res = await api('/drive/files/update', {
+				fileId: file.id,
+				folderId: '000000000000000000000000'
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('不正なフォルダIDで怒られる', async () => {
+			const file = await uploadFile(alice);
+
+			const res = await api('/drive/files/update', {
+				fileId: file.id,
+				folderId: 'foo'
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('ファイルが存在しなかったら怒る', async () => {
+			const res = await api('/drive/files/update', {
+				fileId: '000000000000000000000000',
+				name: 'いちごパスタ.png'
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('間違ったIDで怒られる', async () => {
+			const res = await api('/drive/files/update', {
+				fileId: 'kyoppie',
+				name: 'いちごパスタ.png'
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+	});
+
+	describe('drive/folders/create', () => {
+		it('フォルダを作成できる', async () => {
+			const res = await api('/drive/folders/create', {
+				name: 'test'
+			}, alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			assert.strictEqual(res.body.name, 'test');
+		}));
+	});
+
+	describe('drive/folders/update', () => {
+		it('名前を更新できる', async () => {
+			const folder = (await api('/drive/folders/create', {
+				name: 'test'
+			}, alice)).body;
+
+			const res = await api('/drive/folders/update', {
+				folderId: folder.id,
+				name: 'new name'
+			}, alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			assert.strictEqual(res.body.name, 'new name');
+		}));
+
+		it('他人のフォルダを更新できない', async () => {
+			const folder = (await api('/drive/folders/create', {
+				name: 'test'
+			}, bob)).body;
+
+			const res = await api('/drive/folders/update', {
+				folderId: folder.id,
+				name: 'new name'
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('親フォルダを更新できる', async () => {
+			const folder = (await api('/drive/folders/create', {
+				name: 'test'
+			}, alice)).body;
+			const parentFolder = (await api('/drive/folders/create', {
+				name: 'parent'
+			}, alice)).body;
+
+			const res = await api('/drive/folders/update', {
+				folderId: folder.id,
+				parentId: parentFolder.id
+			}, alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			assert.strictEqual(res.body.parentId, parentFolder.id);
+		}));
+
+		it('親フォルダを無しに更新できる', async () => {
+			const folder = (await api('/drive/folders/create', {
+				name: 'test'
+			}, alice)).body;
+			const parentFolder = (await api('/drive/folders/create', {
+				name: 'parent'
+			}, alice)).body;
+			await api('/drive/folders/update', {
+				folderId: folder.id,
+				parentId: parentFolder.id
+			}, alice);
+
+			const res = await api('/drive/folders/update', {
+				folderId: folder.id,
+				parentId: null
+			}, alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			assert.strictEqual(res.body.parentId, null);
+		}));
+
+		it('他人のフォルダを親フォルダに設定できない', async () => {
+			const folder = (await api('/drive/folders/create', {
+				name: 'test'
+			}, alice)).body;
+			const parentFolder = (await api('/drive/folders/create', {
+				name: 'parent'
+			}, bob)).body;
+
+			const res = await api('/drive/folders/update', {
+				folderId: folder.id,
+				parentId: parentFolder.id
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('フォルダが循環するような構造にできない', async () => {
+			const folder = (await api('/drive/folders/create', {
+				name: 'test'
+			}, alice)).body;
+			const parentFolder = (await api('/drive/folders/create', {
+				name: 'parent'
+			}, alice)).body;
+			await api('/drive/folders/update', {
+				folderId: parentFolder.id,
+				parentId: folder.id
+			}, alice);
+
+			const res = await api('/drive/folders/update', {
+				folderId: folder.id,
+				parentId: parentFolder.id
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('フォルダが循環するような構造にできない(再帰的)', async () => {
+			const folderA = (await api('/drive/folders/create', {
+				name: 'test'
+			}, alice)).body;
+			const folderB = (await api('/drive/folders/create', {
+				name: 'test'
+			}, alice)).body;
+			const folderC = (await api('/drive/folders/create', {
+				name: 'test'
+			}, alice)).body;
+			await api('/drive/folders/update', {
+				folderId: folderB.id,
+				parentId: folderA.id
+			}, alice);
+			await api('/drive/folders/update', {
+				folderId: folderC.id,
+				parentId: folderB.id
+			}, alice);
+
+			const res = await api('/drive/folders/update', {
+				folderId: folderA.id,
+				parentId: folderC.id
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('フォルダが循環するような構造にできない(自身)', async () => {
+			const folderA = (await api('/drive/folders/create', {
+				name: 'test'
+			}, alice)).body;
+
+			const res = await api('/drive/folders/update', {
+				folderId: folderA.id,
+				parentId: folderA.id
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('存在しない親フォルダを設定できない', async () => {
+			const folder = (await api('/drive/folders/create', {
+				name: 'test'
+			}, alice)).body;
+
+			const res = await api('/drive/folders/update', {
+				folderId: folder.id,
+				parentId: '000000000000000000000000'
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('不正な親フォルダIDで怒られる', async () => {
+			const folder = (await api('/drive/folders/create', {
+				name: 'test'
+			}, alice)).body;
+
+			const res = await api('/drive/folders/update', {
+				folderId: folder.id,
+				parentId: 'foo'
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('存在しないフォルダを更新できない', async () => {
+			const res = await api('/drive/folders/update', {
+				folderId: '000000000000000000000000'
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('不正なフォルダIDで怒られる', async () => {
+			const res = await api('/drive/folders/update', {
+				folderId: 'foo'
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+	});
+
+	describe('messaging/messages/create', () => {
+		it('メッセージを送信できる', async () => {
+			const res = await api('/messaging/messages/create', {
+				userId: bob.id,
+				text: 'test'
+			}, alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			assert.strictEqual(res.body.text, 'test');
+		}));
+
+		it('自分自身にはメッセージを送信できない', async () => {
+			const res = await api('/messaging/messages/create', {
+				userId: alice.id,
+				text: 'Yo'
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('存在しないユーザーにはメッセージを送信できない', async () => {
+			const res = await api('/messaging/messages/create', {
+				userId: '000000000000000000000000',
+				text: 'test'
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('不正なユーザーIDで怒られる', async () => {
+			const res = await api('/messaging/messages/create', {
+				userId: 'foo',
+				text: 'test'
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('テキストが無くて怒られる', async () => {
+			const res = await api('/messaging/messages/create', {
+				userId: bob.id
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+
+		it('文字数オーバーで怒られる', async () => {
+			const res = await api('/messaging/messages/create', {
+				userId: bob.id,
+				text: '!'.repeat(1001)
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		}));
+	});
+
+	describe('notes/replies', () => {
+		it('自分に閲覧権限のない投稿は含まれない', async () => {
+			const alicePost = await post(alice, {
+				text: 'foo'
+			});
+
+			await post(bob, {
+				replyId: alicePost.id,
+				text: 'bar',
+				visibility: 'specified',
+				visibleUserIds: [alice.id]
+			});
+
+			const res = await api('/notes/replies', {
+				noteId: alicePost.id
+			}, carol);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(Array.isArray(res.body), true);
+			assert.strictEqual(res.body.length, 0);
+		}));
+	});
+
+	describe('notes/timeline', () => {
+		it('フォロワー限定投稿が含まれる', async () => {
+			await api('/following/create', {
+				userId: alice.id
+			}, bob);
+
+			const alicePost = await post(alice, {
+				text: 'foo',
+				visibility: 'followers'
+			});
+
+			const res = await api('/notes/timeline', {}, bob);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(Array.isArray(res.body), true);
+			assert.strictEqual(res.body.length, 1);
+			assert.strictEqual(res.body[0].id, alicePost.id);
+		}));
+	});
+});
+*/
diff --git a/packages/backend/test/_e2e/fetch-resource.ts b/packages/backend/test/_e2e/fetch-resource.ts
new file mode 100644
index 0000000000..344022dec7
--- /dev/null
+++ b/packages/backend/test/_e2e/fetch-resource.ts
@@ -0,0 +1,205 @@
+process.env.NODE_ENV = 'test';
+
+import * as assert from 'assert';
+import * as childProcess from 'child_process';
+import * as openapi from '@redocly/openapi-core';
+import { startServer, signup, post, request, simpleGet, port, shutdownServer } from '../utils.js';
+
+// Request Accept
+const ONLY_AP = 'application/activity+json';
+const PREFER_AP = 'application/activity+json, */*';
+const PREFER_HTML = 'text/html, */*';
+const UNSPECIFIED = '*/*';
+
+// Response Contet-Type
+const AP = 'application/activity+json; charset=utf-8';
+const JSON = 'application/json; charset=utf-8';
+const HTML = 'text/html; charset=utf-8';
+
+describe('Fetch resource', () => {
+	let p: childProcess.ChildProcess;
+
+	let alice: any;
+	let alicesPost: any;
+
+	beforeAll(async () => {
+		p = await startServer();
+		alice = await signup({ username: 'alice' });
+		alicesPost = await post(alice, {
+			text: 'test',
+		});
+	}, 1000 * 30);
+
+	afterAll(async () => {
+		await shutdownServer(p);
+	});
+
+	describe('Common', () => {
+		it('meta', async () => {
+			const res = await request('/meta', {
+			});
+
+			assert.strictEqual(res.status, 200);
+		});
+
+		it('GET root', async () => {
+			const res = await simpleGet('/');
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, HTML);
+		});
+
+		it('GET docs', async () => {
+			const res = await simpleGet('/docs/ja-JP/about');
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, HTML);
+		});
+
+		it('GET api-doc', async () => {
+			const res = await simpleGet('/api-doc');
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, HTML);
+		});
+
+		it('GET api.json', async () => {
+			const res = await simpleGet('/api.json');
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, JSON);
+		});
+
+		it('Validate api.json', async () => {
+			const config = await openapi.loadConfig();
+			const result = await openapi.bundle({
+				config,
+				ref: `http://localhost:${port}/api.json`,
+			});
+
+			for (const problem of result.problems) {
+				console.log(`${problem.message} - ${problem.location[0]?.pointer}`);
+			}
+
+			assert.strictEqual(result.problems.length, 0);
+		});
+
+		it('GET favicon.ico', async () => {
+			const res = await simpleGet('/favicon.ico');
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, 'image/x-icon');
+		});
+
+		it('GET apple-touch-icon.png', async () => {
+			const res = await simpleGet('/apple-touch-icon.png');
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, 'image/png');
+		});
+
+		it('GET twemoji svg', async () => {
+			const res = await simpleGet('/twemoji/2764.svg');
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, 'image/svg+xml');
+		});
+
+		it('GET twemoji svg with hyphen', async () => {
+			const res = await simpleGet('/twemoji/2764-fe0f-200d-1f525.svg');
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, 'image/svg+xml');
+		});
+	});
+
+	describe('/@:username', () => {
+		it('Only AP => AP', async () => {
+			const res = await simpleGet(`/@${alice.username}`, ONLY_AP);
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, AP);
+		});
+
+		it('Prefer AP => AP', async () => {
+			const res = await simpleGet(`/@${alice.username}`, PREFER_AP);
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, AP);
+		});
+
+		it('Prefer HTML => HTML', async () => {
+			const res = await simpleGet(`/@${alice.username}`, PREFER_HTML);
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, HTML);
+		});
+
+		it('Unspecified => HTML', async () => {
+			const res = await simpleGet(`/@${alice.username}`, UNSPECIFIED);
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, HTML);
+		});
+	});
+
+	describe('/users/:id', () => {
+		it('Only AP => AP', async () => {
+			const res = await simpleGet(`/users/${alice.id}`, ONLY_AP);
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, AP);
+		});
+
+		it('Prefer AP => AP', async () => {
+			const res = await simpleGet(`/users/${alice.id}`, PREFER_AP);
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, AP);
+		});
+
+		it('Prefer HTML => Redirect to /@:username', async () => {
+			const res = await simpleGet(`/users/${alice.id}`, PREFER_HTML);
+			assert.strictEqual(res.status, 302);
+			assert.strictEqual(res.location, `/@${alice.username}`);
+		});
+
+		it('Undecided => HTML', async () => {
+			const res = await simpleGet(`/users/${alice.id}`, UNSPECIFIED);
+			assert.strictEqual(res.status, 302);
+			assert.strictEqual(res.location, `/@${alice.username}`);
+		});
+	});
+
+	describe('/notes/:id', () => {
+		it('Only AP => AP', async () => {
+			const res = await simpleGet(`/notes/${alicesPost.id}`, ONLY_AP);
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, AP);
+		});
+
+		it('Prefer AP => AP', async () => {
+			const res = await simpleGet(`/notes/${alicesPost.id}`, PREFER_AP);
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, AP);
+		});
+
+		it('Prefer HTML => HTML', async () => {
+			const res = await simpleGet(`/notes/${alicesPost.id}`, PREFER_HTML);
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, HTML);
+		});
+
+		it('Unspecified => HTML', async () => {
+			const res = await simpleGet(`/notes/${alicesPost.id}`, UNSPECIFIED);
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, HTML);
+		});
+	});
+
+	describe('Feeds', () => {
+		it('RSS', async () => {
+			const res = await simpleGet(`/@${alice.username}.rss`, UNSPECIFIED);
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, 'application/rss+xml; charset=utf-8');
+		});
+
+		it('ATOM', async () => {
+			const res = await simpleGet(`/@${alice.username}.atom`, UNSPECIFIED);
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, 'application/atom+xml; charset=utf-8');
+		});
+
+		it('JSON', async () => {
+			const res = await simpleGet(`/@${alice.username}.json`, UNSPECIFIED);
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(res.type, 'application/json; charset=utf-8');
+		});
+	});
+});
diff --git a/packages/backend/test/_e2e/ff-visibility.ts b/packages/backend/test/_e2e/ff-visibility.ts
new file mode 100644
index 0000000000..38be0eba24
--- /dev/null
+++ b/packages/backend/test/_e2e/ff-visibility.ts
@@ -0,0 +1,167 @@
+process.env.NODE_ENV = 'test';
+
+import * as assert from 'assert';
+import * as childProcess from 'child_process';
+import { signup, request, post, react, connectStream, startServer, shutdownServer, simpleGet } from '../utils.js';
+
+describe('FF visibility', () => {
+	let p: childProcess.ChildProcess;
+
+	let alice: any;
+	let bob: any;
+	let carol: any;
+
+	beforeAll(async () => {
+		p = await startServer();
+		alice = await signup({ username: 'alice' });
+		bob = await signup({ username: 'bob' });
+		carol = await signup({ username: 'carol' });
+	}, 1000 * 30);
+
+	afterAll(async () => {
+		await shutdownServer(p);
+	});
+
+	it('ffVisibility が public なユーザーのフォロー/フォロワーを誰でも見れる', async () => {
+		await request('/i/update', {
+			ffVisibility: 'public',
+		}, alice);
+
+		const followingRes = await request('/users/following', {
+			userId: alice.id,
+		}, bob);
+		const followersRes = await request('/users/followers', {
+			userId: alice.id,
+		}, bob);
+
+		assert.strictEqual(followingRes.status, 200);
+		assert.strictEqual(Array.isArray(followingRes.body), true);
+		assert.strictEqual(followersRes.status, 200);
+		assert.strictEqual(Array.isArray(followersRes.body), true);
+	});
+
+	it('ffVisibility が followers なユーザーのフォロー/フォロワーを自分で見れる', async () => {
+		await request('/i/update', {
+			ffVisibility: 'followers',
+		}, alice);
+
+		const followingRes = await request('/users/following', {
+			userId: alice.id,
+		}, alice);
+		const followersRes = await request('/users/followers', {
+			userId: alice.id,
+		}, alice);
+
+		assert.strictEqual(followingRes.status, 200);
+		assert.strictEqual(Array.isArray(followingRes.body), true);
+		assert.strictEqual(followersRes.status, 200);
+		assert.strictEqual(Array.isArray(followersRes.body), true);
+	});
+
+	it('ffVisibility が followers なユーザーのフォロー/フォロワーを非フォロワーが見れない', async () => {
+		await request('/i/update', {
+			ffVisibility: 'followers',
+		}, alice);
+
+		const followingRes = await request('/users/following', {
+			userId: alice.id,
+		}, bob);
+		const followersRes = await request('/users/followers', {
+			userId: alice.id,
+		}, bob);
+
+		assert.strictEqual(followingRes.status, 400);
+		assert.strictEqual(followersRes.status, 400);
+	});
+
+	it('ffVisibility が followers なユーザーのフォロー/フォロワーをフォロワーが見れる', async () => {
+		await request('/i/update', {
+			ffVisibility: 'followers',
+		}, alice);
+
+		await request('/following/create', {
+			userId: alice.id,
+		}, bob);
+
+		const followingRes = await request('/users/following', {
+			userId: alice.id,
+		}, bob);
+		const followersRes = await request('/users/followers', {
+			userId: alice.id,
+		}, bob);
+
+		assert.strictEqual(followingRes.status, 200);
+		assert.strictEqual(Array.isArray(followingRes.body), true);
+		assert.strictEqual(followersRes.status, 200);
+		assert.strictEqual(Array.isArray(followersRes.body), true);
+	});
+
+	it('ffVisibility が private なユーザーのフォロー/フォロワーを自分で見れる', async () => {
+		await request('/i/update', {
+			ffVisibility: 'private',
+		}, alice);
+
+		const followingRes = await request('/users/following', {
+			userId: alice.id,
+		}, alice);
+		const followersRes = await request('/users/followers', {
+			userId: alice.id,
+		}, alice);
+
+		assert.strictEqual(followingRes.status, 200);
+		assert.strictEqual(Array.isArray(followingRes.body), true);
+		assert.strictEqual(followersRes.status, 200);
+		assert.strictEqual(Array.isArray(followersRes.body), true);
+	});
+
+	it('ffVisibility が private なユーザーのフォロー/フォロワーを他人が見れない', async () => {
+		await request('/i/update', {
+			ffVisibility: 'private',
+		}, alice);
+
+		const followingRes = await request('/users/following', {
+			userId: alice.id,
+		}, bob);
+		const followersRes = await request('/users/followers', {
+			userId: alice.id,
+		}, bob);
+
+		assert.strictEqual(followingRes.status, 400);
+		assert.strictEqual(followersRes.status, 400);
+	});
+
+	describe('AP', () => {
+		it('ffVisibility が public 以外ならばAPからは取得できない', async () => {
+			{
+				await request('/i/update', {
+					ffVisibility: 'public',
+				}, alice);
+
+				const followingRes = await simpleGet(`/users/${alice.id}/following`, 'application/activity+json');
+				const followersRes = await simpleGet(`/users/${alice.id}/followers`, 'application/activity+json');
+				assert.strictEqual(followingRes.status, 200);
+				assert.strictEqual(followersRes.status, 200);
+			}
+			{
+				await request('/i/update', {
+					ffVisibility: 'followers',
+				}, alice);
+
+				const followingRes = await simpleGet(`/users/${alice.id}/following`, 'application/activity+json').catch(res => ({ status: res.statusCode }));
+				const followersRes = await simpleGet(`/users/${alice.id}/followers`, 'application/activity+json').catch(res => ({ status: res.statusCode }));
+				assert.strictEqual(followingRes.status, 403);
+				assert.strictEqual(followersRes.status, 403);
+			}
+			{
+				await request('/i/update', {
+					ffVisibility: 'private',
+				}, alice);
+
+				const followingRes = await simpleGet(`/users/${alice.id}/following`, 'application/activity+json').catch(res => ({ status: res.statusCode }));
+				const followersRes = await simpleGet(`/users/${alice.id}/followers`, 'application/activity+json').catch(res => ({ status: res.statusCode }));
+				assert.strictEqual(followingRes.status, 403);
+				assert.strictEqual(followersRes.status, 403);
+			}
+		});
+	});
+});
diff --git a/packages/backend/test/_e2e/mute.ts b/packages/backend/test/_e2e/mute.ts
new file mode 100644
index 0000000000..2313773678
--- /dev/null
+++ b/packages/backend/test/_e2e/mute.ts
@@ -0,0 +1,123 @@
+process.env.NODE_ENV = 'test';
+
+import * as assert from 'assert';
+import * as childProcess from 'child_process';
+import { signup, request, post, react, startServer, shutdownServer, waitFire } from '../utils.js';
+
+describe('Mute', () => {
+	let p: childProcess.ChildProcess;
+
+	// alice mutes carol
+	let alice: any;
+	let bob: any;
+	let carol: any;
+
+	beforeAll(async () => {
+		p = await startServer();
+		alice = await signup({ username: 'alice' });
+		bob = await signup({ username: 'bob' });
+		carol = await signup({ username: 'carol' });
+	}, 1000 * 30);
+
+	afterAll(async () => {
+		await shutdownServer(p);
+	});
+
+	it('ミュート作成', async () => {
+		const res = await request('/mute/create', {
+			userId: carol.id,
+		}, alice);
+
+		assert.strictEqual(res.status, 204);
+	});
+
+	it('「自分宛ての投稿」にミュートしているユーザーの投稿が含まれない', async () => {
+		const bobNote = await post(bob, { text: '@alice hi' });
+		const carolNote = await post(carol, { text: '@alice hi' });
+
+		const res = await request('/notes/mentions', {}, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(Array.isArray(res.body), true);
+		assert.strictEqual(res.body.some((note: any) => note.id === bobNote.id), true);
+		assert.strictEqual(res.body.some((note: any) => note.id === carolNote.id), false);
+	});
+
+	it('ミュートしているユーザーからメンションされても、hasUnreadMentions が true にならない', async () => {
+		// 状態リセット
+		await request('/i/read-all-unread-notes', {}, alice);
+
+		await post(carol, { text: '@alice hi' });
+
+		const res = await request('/i', {}, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(res.body.hasUnreadMentions, false);
+	});
+
+	it('ミュートしているユーザーからメンションされても、ストリームに unreadMention イベントが流れてこない', async () => {
+		// 状態リセット
+		await request('/i/read-all-unread-notes', {}, alice);
+
+		const fired = await waitFire(alice, 'main', () => post(carol, { text: '@alice hi' }), msg => msg.type === 'unreadMention');
+
+		assert.strictEqual(fired, false);
+	});
+
+	it('ミュートしているユーザーからメンションされても、ストリームに unreadNotification イベントが流れてこない', async () => {
+		// 状態リセット
+		await request('/i/read-all-unread-notes', {}, alice);
+		await request('/notifications/mark-all-as-read', {}, alice);
+
+		const fired = await waitFire(alice, 'main', () => post(carol, { text: '@alice hi' }), msg => msg.type === 'unreadNotification');
+
+		assert.strictEqual(fired, false);
+	});
+
+	describe('Timeline', () => {
+		it('タイムラインにミュートしているユーザーの投稿が含まれない', async () => {
+			const aliceNote = await post(alice);
+			const bobNote = await post(bob);
+			const carolNote = await post(carol);
+
+			const res = await request('/notes/local-timeline', {}, alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(Array.isArray(res.body), true);
+			assert.strictEqual(res.body.some((note: any) => note.id === aliceNote.id), true);
+			assert.strictEqual(res.body.some((note: any) => note.id === bobNote.id), true);
+			assert.strictEqual(res.body.some((note: any) => note.id === carolNote.id), false);
+		});
+
+		it('タイムラインにミュートしているユーザーの投稿のRenoteが含まれない', async () => {
+			const aliceNote = await post(alice);
+			const carolNote = await post(carol);
+			const bobNote = await post(bob, {
+				renoteId: carolNote.id,
+			});
+
+			const res = await request('/notes/local-timeline', {}, alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(Array.isArray(res.body), true);
+			assert.strictEqual(res.body.some((note: any) => note.id === aliceNote.id), true);
+			assert.strictEqual(res.body.some((note: any) => note.id === bobNote.id), false);
+			assert.strictEqual(res.body.some((note: any) => note.id === carolNote.id), false);
+		});
+	});
+
+	describe('Notification', () => {
+		it('通知にミュートしているユーザーの通知が含まれない(リアクション)', async () => {
+			const aliceNote = await post(alice);
+			await react(bob, aliceNote, 'like');
+			await react(carol, aliceNote, 'like');
+
+			const res = await request('/i/notifications', {}, alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(Array.isArray(res.body), true);
+			assert.strictEqual(res.body.some((notification: any) => notification.userId === bob.id), true);
+			assert.strictEqual(res.body.some((notification: any) => notification.userId === carol.id), false);
+		});
+	});
+});
diff --git a/packages/backend/test/_e2e/note.ts b/packages/backend/test/_e2e/note.ts
new file mode 100644
index 0000000000..d75a5c8285
--- /dev/null
+++ b/packages/backend/test/_e2e/note.ts
@@ -0,0 +1,370 @@
+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, uploadUrl, startServer, shutdownServer, initTestDb, api } from '../utils.js';
+
+describe('Note', () => {
+	let p: childProcess.ChildProcess;
+	let Notes: any;
+
+	let alice: any;
+	let bob: any;
+
+	beforeAll(async () => {
+		p = await startServer();
+		const connection = await initTestDb(true);
+		Notes = connection.getRepository(Note);
+		alice = await signup({ username: 'alice' });
+		bob = await signup({ username: 'bob' });
+	}, 1000 * 30);
+
+	afterAll(async () => {
+		await shutdownServer(p);
+	});
+
+	it('投稿できる', async () => {
+		const post = {
+			text: 'test',
+		};
+
+		const res = await request('/notes/create', post, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+		assert.strictEqual(res.body.createdNote.text, post.text);
+	});
+
+	it('ファイルを添付できる', async () => {
+		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],
+		}, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+		assert.deepStrictEqual(res.body.createdNote.fileIds, [file.id]);
+	}, 1000 * 10);
+
+	it('他人のファイルは無視', async () => {
+		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',
+			fileIds: [file.id],
+		}, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+		assert.deepStrictEqual(res.body.createdNote.fileIds, []);
+	}, 1000 * 10);
+
+	it('存在しないファイルは無視', async () => {
+		const res = await request('/notes/create', {
+			text: 'test',
+			fileIds: ['000000000000000000000000'],
+		}, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+		assert.deepStrictEqual(res.body.createdNote.fileIds, []);
+	});
+
+	it('不正なファイルIDは無視', async () => {
+		const res = await request('/notes/create', {
+			fileIds: ['kyoppie'],
+		}, alice);
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+		assert.deepStrictEqual(res.body.createdNote.fileIds, []);
+	});
+
+	it('返信できる', async () => {
+		const bobPost = await post(bob, {
+			text: 'foo',
+		});
+
+		const alicePost = {
+			text: 'bar',
+			replyId: bobPost.id,
+		};
+
+		const res = await request('/notes/create', alicePost, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+		assert.strictEqual(res.body.createdNote.text, alicePost.text);
+		assert.strictEqual(res.body.createdNote.replyId, alicePost.replyId);
+		assert.strictEqual(res.body.createdNote.reply.text, bobPost.text);
+	});
+
+	it('renoteできる', async () => {
+		const bobPost = await post(bob, {
+			text: 'test',
+		});
+
+		const alicePost = {
+			renoteId: bobPost.id,
+		};
+
+		const res = await request('/notes/create', alicePost, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+		assert.strictEqual(res.body.createdNote.renoteId, alicePost.renoteId);
+		assert.strictEqual(res.body.createdNote.renote.text, bobPost.text);
+	});
+
+	it('引用renoteできる', async () => {
+		const bobPost = await post(bob, {
+			text: 'test',
+		});
+
+		const alicePost = {
+			text: 'test',
+			renoteId: bobPost.id,
+		};
+
+		const res = await request('/notes/create', alicePost, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+		assert.strictEqual(res.body.createdNote.text, alicePost.text);
+		assert.strictEqual(res.body.createdNote.renoteId, alicePost.renoteId);
+		assert.strictEqual(res.body.createdNote.renote.text, bobPost.text);
+	});
+
+	it('文字数ぎりぎりで怒られない', async () => {
+		const post = {
+			text: '!'.repeat(3000),
+		};
+		const res = await request('/notes/create', post, alice);
+		assert.strictEqual(res.status, 200);
+	});
+
+	it('文字数オーバーで怒られる', async () => {
+		const post = {
+			text: '!'.repeat(3001),
+		};
+		const res = await request('/notes/create', post, alice);
+		assert.strictEqual(res.status, 400);
+	});
+
+	it('存在しないリプライ先で怒られる', async () => {
+		const post = {
+			text: 'test',
+			replyId: '000000000000000000000000',
+		};
+		const res = await request('/notes/create', post, alice);
+		assert.strictEqual(res.status, 400);
+	});
+
+	it('存在しないrenote対象で怒られる', async () => {
+		const post = {
+			renoteId: '000000000000000000000000',
+		};
+		const res = await request('/notes/create', post, alice);
+		assert.strictEqual(res.status, 400);
+	});
+
+	it('不正なリプライ先IDで怒られる', async () => {
+		const post = {
+			text: 'test',
+			replyId: 'foo',
+		};
+		const res = await request('/notes/create', post, alice);
+		assert.strictEqual(res.status, 400);
+	});
+
+	it('不正なrenote対象IDで怒られる', async () => {
+		const post = {
+			renoteId: 'foo',
+		};
+		const res = await request('/notes/create', post, alice);
+		assert.strictEqual(res.status, 400);
+	});
+
+	it('存在しないユーザーにメンションできる', async () => {
+		const post = {
+			text: '@ghost yo',
+		};
+
+		const res = await request('/notes/create', post, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+		assert.strictEqual(res.body.createdNote.text, post.text);
+	});
+
+	it('同じユーザーに複数メンションしても内部的にまとめられる', async () => {
+		const post = {
+			text: '@bob @bob @bob yo',
+		};
+
+		const res = await request('/notes/create', post, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+		assert.strictEqual(res.body.createdNote.text, post.text);
+
+		const noteDoc = await Notes.findOneBy({ id: res.body.createdNote.id });
+		assert.deepStrictEqual(noteDoc.mentions, [bob.id]);
+	});
+
+	describe('notes/create', () => {
+		it('投票を添付できる', async () => {
+			const res = await request('/notes/create', {
+				text: 'test',
+				poll: {
+					choices: ['foo', 'bar'],
+				},
+			}, alice);
+
+			assert.strictEqual(res.status, 200);
+			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
+			assert.strictEqual(res.body.createdNote.poll != null, true);
+		});
+
+		it('投票の選択肢が無くて怒られる', async () => {
+			const res = await request('/notes/create', {
+				poll: {},
+			}, alice);
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('投票の選択肢が無くて怒られる (空の配列)', async () => {
+			const res = await request('/notes/create', {
+				poll: {
+					choices: [],
+				},
+			}, alice);
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('投票の選択肢が1つで怒られる', async () => {
+			const res = await request('/notes/create', {
+				poll: {
+					choices: ['Strawberry Pasta'],
+				},
+			}, alice);
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('投票できる', async () => {
+			const { body } = await request('/notes/create', {
+				text: 'test',
+				poll: {
+					choices: ['sakura', 'izumi', 'ako'],
+				},
+			}, alice);
+
+			const res = await request('/notes/polls/vote', {
+				noteId: body.createdNote.id,
+				choice: 1,
+			}, alice);
+
+			assert.strictEqual(res.status, 204);
+		});
+
+		it('複数投票できない', async () => {
+			const { body } = await request('/notes/create', {
+				text: 'test',
+				poll: {
+					choices: ['sakura', 'izumi', 'ako'],
+				},
+			}, alice);
+
+			await request('/notes/polls/vote', {
+				noteId: body.createdNote.id,
+				choice: 0,
+			}, alice);
+
+			const res = await request('/notes/polls/vote', {
+				noteId: body.createdNote.id,
+				choice: 2,
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		});
+
+		it('許可されている場合は複数投票できる', async () => {
+			const { body } = await request('/notes/create', {
+				text: 'test',
+				poll: {
+					choices: ['sakura', 'izumi', 'ako'],
+					multiple: true,
+				},
+			}, alice);
+
+			await request('/notes/polls/vote', {
+				noteId: body.createdNote.id,
+				choice: 0,
+			}, alice);
+
+			await request('/notes/polls/vote', {
+				noteId: body.createdNote.id,
+				choice: 1,
+			}, alice);
+
+			const res = await request('/notes/polls/vote', {
+				noteId: body.createdNote.id,
+				choice: 2,
+			}, alice);
+
+			assert.strictEqual(res.status, 204);
+		});
+
+		it('締め切られている場合は投票できない', async () => {
+			const { body } = await request('/notes/create', {
+				text: 'test',
+				poll: {
+					choices: ['sakura', 'izumi', 'ako'],
+					expiredAfter: 1,
+				},
+			}, alice);
+
+			await new Promise(x => setTimeout(x, 2));
+
+			const res = await request('/notes/polls/vote', {
+				noteId: body.createdNote.id,
+				choice: 1,
+			}, alice);
+
+			assert.strictEqual(res.status, 400);
+		});
+	});
+
+	describe('notes/delete', () => {
+		it('delete a reply', async () => {
+			const mainNoteRes = await api('notes/create', {
+				text: 'main post',
+			}, alice);
+			const replyOneRes = await api('notes/create', {
+				text: 'reply one',
+				replyId: mainNoteRes.body.createdNote.id,
+			}, alice);
+			const replyTwoRes = await api('notes/create', {
+				text: 'reply two',
+				replyId: mainNoteRes.body.createdNote.id,
+			}, alice);
+
+			const deleteOneRes = await api('notes/delete', {
+				noteId: replyOneRes.body.createdNote.id,
+			}, alice);
+
+			assert.strictEqual(deleteOneRes.status, 204);
+			let mainNote = await Notes.findOneBy({ id: mainNoteRes.body.createdNote.id });
+			assert.strictEqual(mainNote.repliesCount, 1);
+
+			const deleteTwoRes = await api('notes/delete', {
+				noteId: replyTwoRes.body.createdNote.id,
+			}, alice);
+
+			assert.strictEqual(deleteTwoRes.status, 204);
+			mainNote = await Notes.findOneBy({ id: mainNoteRes.body.createdNote.id });
+			assert.strictEqual(mainNote.repliesCount, 0);
+		});
+	});
+});
diff --git a/packages/backend/test/_e2e/streaming.ts b/packages/backend/test/_e2e/streaming.ts
new file mode 100644
index 0000000000..4dad322e99
--- /dev/null
+++ b/packages/backend/test/_e2e/streaming.ts
@@ -0,0 +1,545 @@
+process.env.NODE_ENV = 'test';
+
+import * as assert from 'assert';
+import * as childProcess from 'child_process';
+import { Following } from '../../src/models/entities/following.js';
+import { connectStream, signup, api, post, startServer, shutdownServer, initTestDb, waitFire } from '../utils.js';
+
+describe('Streaming', () => {
+	let p: childProcess.ChildProcess;
+	let Followings: any;
+
+	const follow = async (follower: any, followee: any) => {
+		await Followings.save({
+			id: 'a',
+			createdAt: new Date(),
+			followerId: follower.id,
+			followeeId: followee.id,
+			followerHost: follower.host,
+			followerInbox: null,
+			followerSharedInbox: null,
+			followeeHost: followee.host,
+			followeeInbox: null,
+			followeeSharedInbox: null,
+		});
+	};
+
+	describe('Streaming', () => {
+		// Local users
+		let ayano: any;
+		let kyoko: any;
+		let chitose: any;
+
+		// Remote users
+		let akari: any;
+		let chinatsu: any;
+
+		let kyokoNote: any;
+		let list: any;
+
+		beforeAll(async () => {
+			p = await startServer();
+			const connection = await initTestDb(true);
+			Followings = connection.getRepository(Following);
+
+			ayano = await signup({ username: 'ayano' });
+			kyoko = await signup({ username: 'kyoko' });
+			chitose = await signup({ username: 'chitose' });
+
+			akari = await signup({ username: 'akari', host: 'example.com' });
+			chinatsu = await signup({ username: 'chinatsu', host: 'example.com' });
+
+			kyokoNote = await post(kyoko, { text: 'foo' });
+
+			// Follow: ayano => kyoko
+			await api('following/create', { userId: kyoko.id }, ayano);
+
+			// Follow: ayano => akari
+			await follow(ayano, akari);
+
+			// List: chitose => ayano, kyoko
+			list = await api('users/lists/create', {
+				name: 'my list',
+			}, chitose).then(x => x.body);
+
+			await api('users/lists/push', {
+				listId: list.id,
+				userId: ayano.id,
+			}, chitose);
+
+			await api('users/lists/push', {
+				listId: list.id,
+				userId: kyoko.id,
+			}, chitose);
+		}, 1000 * 30);
+
+		afterAll(async () => {
+			await shutdownServer(p);
+		});
+
+		describe('Events', () => {
+			it('mention event', async () => {
+				const fired = await waitFire(
+					kyoko, 'main',	// kyoko:main
+					() => post(ayano, { text: 'foo @kyoko bar' }),	// ayano mention => kyoko
+					msg => msg.type === 'mention' && msg.body.userId === ayano.id,	// wait ayano
+				);
+
+				assert.strictEqual(fired, true);
+			});
+
+			it('renote event', async () => {
+				const fired = await waitFire(
+					kyoko, 'main',	// kyoko:main
+					() => post(ayano, { renoteId: kyokoNote.id }),	// ayano renote
+					msg => msg.type === 'renote' && msg.body.renoteId === kyokoNote.id,	// wait renote
+				);
+
+				assert.strictEqual(fired, true);
+			});
+		});
+
+		describe('Home Timeline', () => {
+			it('自分の投稿が流れる', async () => {
+				const fired = await waitFire(
+					ayano, 'homeTimeline',	// ayano:Home
+					() => api('notes/create', { text: 'foo' }, ayano),	// ayano posts
+					msg => msg.type === 'note' && msg.body.text === 'foo',
+				);
+
+				assert.strictEqual(fired, true);
+			});
+
+			it('フォローしているユーザーの投稿が流れる', async () => {
+				const fired = await waitFire(
+					ayano, 'homeTimeline',		// ayano:home
+					() => api('notes/create', { text: 'foo' }, kyoko),	// kyoko posts
+					msg => msg.type === 'note' && msg.body.userId === kyoko.id,	// wait kyoko
+				);
+
+				assert.strictEqual(fired, true);
+			});
+
+			it('フォローしていないユーザーの投稿は流れない', async () => {
+				const fired = await waitFire(
+					kyoko, 'homeTimeline',	// kyoko:home
+					() => api('notes/create', { text: 'foo' }, ayano),	// ayano posts
+					msg => msg.type === 'note' && msg.body.userId === ayano.id,	// wait ayano
+				);
+
+				assert.strictEqual(fired, false);
+			});
+
+			it('フォローしているユーザーのダイレクト投稿が流れる', async () => {
+				const fired = await waitFire(
+					ayano, 'homeTimeline',	// ayano:home
+					() => api('notes/create', { text: 'foo', visibility: 'specified', visibleUserIds: [ayano.id] }, kyoko),	// kyoko dm => ayano
+					msg => msg.type === 'note' && msg.body.userId === kyoko.id,	// wait kyoko
+				);
+
+				assert.strictEqual(fired, true);
+			});
+
+			it('フォローしているユーザーでも自分が指定されていないダイレクト投稿は流れない', async () => {
+				const fired = await waitFire(
+					ayano, 'homeTimeline',	// ayano:home
+					() => api('notes/create', { text: 'foo', visibility: 'specified', visibleUserIds: [chitose.id] }, kyoko),	// kyoko dm => chitose
+					msg => msg.type === 'note' && msg.body.userId === kyoko.id,	// wait kyoko
+				);
+
+				assert.strictEqual(fired, false);
+			});
+		});	// Home
+
+		describe('Local Timeline', () => {
+			it('自分の投稿が流れる', async () => {
+				const fired = await waitFire(
+					ayano, 'localTimeline',	// ayano:Local
+					() => api('notes/create', { text: 'foo' }, ayano),	// ayano posts
+					msg => msg.type === 'note' && msg.body.text === 'foo',
+				);
+
+				assert.strictEqual(fired, true);
+			});
+
+			it('フォローしていないローカルユーザーの投稿が流れる', async () => {
+				const fired = await waitFire(
+					ayano, 'localTimeline',	// ayano:Local
+					() => api('notes/create', { text: 'foo' }, chitose),	// chitose posts
+					msg => msg.type === 'note' && msg.body.userId === chitose.id,	// wait chitose
+				);
+
+				assert.strictEqual(fired, true);
+			});
+
+			it('リモートユーザーの投稿は流れない', async () => {
+				const fired = await waitFire(
+					ayano, 'localTimeline',	// ayano:Local
+					() => api('notes/create', { text: 'foo' }, chinatsu),	// chinatsu posts
+					msg => msg.type === 'note' && msg.body.userId === chinatsu.id,	// wait chinatsu
+				);
+
+				assert.strictEqual(fired, false);
+			});
+
+			it('フォローしてたとしてもリモートユーザーの投稿は流れない', async () => {
+				const fired = await waitFire(
+					ayano, 'localTimeline',	// ayano:Local
+					() => api('notes/create', { text: 'foo' }, akari),	// akari posts
+					msg => msg.type === 'note' && msg.body.userId === akari.id,	// wait akari
+				);
+
+				assert.strictEqual(fired, false);
+			});
+
+			it('ホーム指定の投稿は流れない', async () => {
+				const fired = await waitFire(
+					ayano, 'localTimeline',	// ayano:Local
+					() => api('notes/create', { text: 'foo', visibility: 'home' }, kyoko),	// kyoko home posts
+					msg => msg.type === 'note' && msg.body.userId === kyoko.id,	// wait kyoko
+				);
+
+				assert.strictEqual(fired, false);
+			});
+
+			it('フォローしているローカルユーザーのダイレクト投稿は流れない', async () => {
+				const fired = await waitFire(
+					ayano, 'localTimeline',	// ayano:Local
+					() => api('notes/create', { text: 'foo', visibility: 'specified', visibleUserIds: [ayano.id] }, kyoko),	// kyoko DM => ayano
+					msg => msg.type === 'note' && msg.body.userId === kyoko.id,	// wait kyoko
+				);
+
+				assert.strictEqual(fired, false);
+			});
+
+			it('フォローしていないローカルユーザーのフォロワー宛て投稿は流れない', async () => {
+				const fired = await waitFire(
+					ayano, 'localTimeline',	// ayano:Local
+					() => api('notes/create', { text: 'foo', visibility: 'followers' }, chitose),
+					msg => msg.type === 'note' && msg.body.userId === chitose.id,	// wait chitose
+				);
+
+				assert.strictEqual(fired, false);
+			});
+		});
+
+		describe('Hybrid Timeline', () => {
+			it('自分の投稿が流れる', async () => {
+				const fired = await waitFire(
+					ayano, 'hybridTimeline',	// ayano:Hybrid
+					() => api('notes/create', { text: 'foo' }, ayano),	// ayano posts
+					msg => msg.type === 'note' && msg.body.text === 'foo',
+				);
+
+				assert.strictEqual(fired, true);
+			});
+
+			it('フォローしていないローカルユーザーの投稿が流れる', async () => {
+				const fired = await waitFire(
+					ayano, 'hybridTimeline',	// ayano:Hybrid
+					() => api('notes/create', { text: 'foo' }, chitose),	// chitose posts
+					msg => msg.type === 'note' && msg.body.userId === chitose.id,	// wait chitose
+				);
+
+				assert.strictEqual(fired, true);
+			});
+
+			it('フォローしているリモートユーザーの投稿が流れる', async () => {
+				const fired = await waitFire(
+					ayano, 'hybridTimeline',	// ayano:Hybrid
+					() => api('notes/create', { text: 'foo' }, akari),	// akari posts
+					msg => msg.type === 'note' && msg.body.userId === akari.id,	// wait akari
+				);
+
+				assert.strictEqual(fired, true);
+			});
+
+			it('フォローしていないリモートユーザーの投稿は流れない', async () => {
+				const fired = await waitFire(
+					ayano, 'hybridTimeline',	// ayano:Hybrid
+					() => api('notes/create', { text: 'foo' }, chinatsu),	// chinatsu posts
+					msg => msg.type === 'note' && msg.body.userId === chinatsu.id,	// wait chinatsu
+				);
+
+				assert.strictEqual(fired, false);
+			});
+
+			it('フォローしているユーザーのダイレクト投稿が流れる', async () => {
+				const fired = await waitFire(
+					ayano, 'hybridTimeline',	// ayano:Hybrid
+					() => api('notes/create', { text: 'foo', visibility: 'specified', visibleUserIds: [ayano.id] }, kyoko),
+					msg => msg.type === 'note' && msg.body.userId === kyoko.id,	// wait kyoko
+				);
+
+				assert.strictEqual(fired, true);
+			});
+
+			it('フォローしているユーザーのホーム投稿が流れる', async () => {
+				const fired = await waitFire(
+					ayano, 'hybridTimeline',	// ayano:Hybrid
+					() => api('notes/create', { text: 'foo', visibility: 'home' }, kyoko),
+					msg => msg.type === 'note' && msg.body.userId === kyoko.id,	// wait kyoko
+				);
+
+				assert.strictEqual(fired, true);
+			});
+
+			it('フォローしていないローカルユーザーのホーム投稿は流れない', async () => {
+				const fired = await waitFire(
+					ayano, 'hybridTimeline',	// ayano:Hybrid
+					() => api('notes/create', { text: 'foo', visibility: 'home' }, chitose),
+					msg => msg.type === 'note' && msg.body.userId === chitose.id,
+				);
+
+				assert.strictEqual(fired, false);
+			});
+
+			it('フォローしていないローカルユーザーのフォロワー宛て投稿は流れない', async () => {
+				const fired = await waitFire(
+					ayano, 'hybridTimeline',	// ayano:Hybrid
+					() => api('notes/create', { text: 'foo', visibility: 'followers' }, chitose),
+					msg => msg.type === 'note' && msg.body.userId === chitose.id,
+				);
+
+				assert.strictEqual(fired, false);
+			});
+		});
+
+		describe('Global Timeline', () => {
+			it('フォローしていないローカルユーザーの投稿が流れる', async () => {
+				const fired = await waitFire(
+					ayano, 'globalTimeline',	// ayano:Global
+					() => api('notes/create', { text: 'foo' }, chitose),	// chitose posts
+					msg => msg.type === 'note' && msg.body.userId === chitose.id,	// wait chitose
+				);
+
+				assert.strictEqual(fired, true);
+			});
+
+			it('フォローしていないリモートユーザーの投稿が流れる', async () => {
+				const fired = await waitFire(
+					ayano, 'globalTimeline',	// ayano:Global
+					() => api('notes/create', { text: 'foo' }, chinatsu),	// chinatsu posts
+					msg => msg.type === 'note' && msg.body.userId === chinatsu.id,	// wait chinatsu
+				);
+
+				assert.strictEqual(fired, true);
+			});
+
+			it('ホーム投稿は流れない', async () => {
+				const fired = await waitFire(
+					ayano, 'globalTimeline',	// ayano:Global
+					() => api('notes/create', { text: 'foo', visibility: 'home' }, kyoko),	// kyoko posts
+					msg => msg.type === 'note' && msg.body.userId === kyoko.id,	// wait kyoko
+				);
+
+				assert.strictEqual(fired, false);
+			});
+		});
+
+		describe('UserList Timeline', () => {
+			it('リストに入れているユーザーの投稿が流れる', async () => {
+				const fired = await waitFire(
+					chitose, 'userList',
+					() => api('notes/create', { text: 'foo' }, ayano),
+					msg => msg.type === 'note' && msg.body.userId === ayano.id,
+					{ listId: list.id },
+				);
+
+				assert.strictEqual(fired, true);
+			});
+
+			it('リストに入れていないユーザーの投稿は流れない', async () => {
+				const fired = await waitFire(
+					chitose, 'userList',
+					() => api('notes/create', { text: 'foo' }, chinatsu),
+					msg => msg.type === 'note' && msg.body.userId === chinatsu.id,
+					{ listId: list.id },
+				);
+
+				assert.strictEqual(fired, false);
+			});
+
+			// #4471
+			it('リストに入れているユーザーのダイレクト投稿が流れる', async () => {
+				const fired = await waitFire(
+					chitose, 'userList',
+					() => api('notes/create', { text: 'foo', visibility: 'specified', visibleUserIds: [chitose.id] }, ayano),
+					msg => msg.type === 'note' && msg.body.userId === ayano.id,
+					{ listId: list.id },
+				);
+
+				assert.strictEqual(fired, true);
+			});
+
+			// #4335
+			it('リストに入れているがフォローはしてないユーザーのフォロワー宛て投稿は流れない', async () => {
+				const fired = await waitFire(
+					chitose, 'userList',
+					() => api('notes/create', { text: 'foo', visibility: 'followers' }, kyoko),
+					msg => msg.type === 'note' && msg.body.userId === kyoko.id,
+					{ listId: list.id },
+				);
+
+				assert.strictEqual(fired, false);
+			});
+		});
+
+		describe('Hashtag Timeline', () => {
+			it('指定したハッシュタグの投稿が流れる', () => new Promise<void>(async done => {
+				const ws = await connectStream(chitose, 'hashtag', ({ type, body }) => {
+					if (type === 'note') {
+						assert.deepStrictEqual(body.text, '#foo');
+						ws.close();
+						done();
+					}
+				}, {
+					q: [
+						['foo'],
+					],
+				});
+
+				post(chitose, {
+					text: '#foo',
+				});
+			}));
+
+			it('指定したハッシュタグの投稿が流れる (AND)', () => new Promise<void>(async done => {
+				let fooCount = 0;
+				let barCount = 0;
+				let fooBarCount = 0;
+	
+				const ws = await connectStream(chitose, 'hashtag', ({ type, body }) => {
+					if (type === 'note') {
+						if (body.text === '#foo') fooCount++;
+						if (body.text === '#bar') barCount++;
+						if (body.text === '#foo #bar') fooBarCount++;
+					}
+				}, {
+					q: [
+						['foo', 'bar'],
+					],
+				});
+	
+				post(chitose, {
+					text: '#foo',
+				});
+	
+				post(chitose, {
+					text: '#bar',
+				});
+	
+				post(chitose, {
+					text: '#foo #bar',
+				});
+	
+				setTimeout(() => {
+					assert.strictEqual(fooCount, 0);
+					assert.strictEqual(barCount, 0);
+					assert.strictEqual(fooBarCount, 1);
+					ws.close();
+					done();
+				}, 3000);
+			}));
+
+			it('指定したハッシュタグの投稿が流れる (OR)', () => new Promise<void>(async done => {
+				let fooCount = 0;
+				let barCount = 0;
+				let fooBarCount = 0;
+				let piyoCount = 0;
+
+				const ws = await connectStream(chitose, 'hashtag', ({ type, body }) => {
+					if (type === 'note') {
+						if (body.text === '#foo') fooCount++;
+						if (body.text === '#bar') barCount++;
+						if (body.text === '#foo #bar') fooBarCount++;
+						if (body.text === '#piyo') piyoCount++;
+					}
+				}, {
+					q: [
+						['foo'],
+						['bar'],
+					],
+				});
+
+				post(chitose, {
+					text: '#foo',
+				});
+
+				post(chitose, {
+					text: '#bar',
+				});
+
+				post(chitose, {
+					text: '#foo #bar',
+				});
+
+				post(chitose, {
+					text: '#piyo',
+				});
+
+				setTimeout(() => {
+					assert.strictEqual(fooCount, 1);
+					assert.strictEqual(barCount, 1);
+					assert.strictEqual(fooBarCount, 1);
+					assert.strictEqual(piyoCount, 0);
+					ws.close();
+					done();
+				}, 3000);
+			}));
+
+			it('指定したハッシュタグの投稿が流れる (AND + OR)', () => new Promise<void>(async done => {
+				let fooCount = 0;
+				let barCount = 0;
+				let fooBarCount = 0;
+				let piyoCount = 0;
+				let waaaCount = 0;
+
+				const ws = await connectStream(chitose, 'hashtag', ({ type, body }) => {
+					if (type === 'note') {
+						if (body.text === '#foo') fooCount++;
+						if (body.text === '#bar') barCount++;
+						if (body.text === '#foo #bar') fooBarCount++;
+						if (body.text === '#piyo') piyoCount++;
+						if (body.text === '#waaa') waaaCount++;
+					}
+				}, {
+					q: [
+						['foo', 'bar'],
+						['piyo'],
+					],
+				});
+
+				post(chitose, {
+					text: '#foo',
+				});
+
+				post(chitose, {
+					text: '#bar',
+				});
+
+				post(chitose, {
+					text: '#foo #bar',
+				});
+
+				post(chitose, {
+					text: '#piyo',
+				});
+
+				post(chitose, {
+					text: '#waaa',
+				});
+
+				setTimeout(() => {
+					assert.strictEqual(fooCount, 0);
+					assert.strictEqual(barCount, 0);
+					assert.strictEqual(fooBarCount, 1);
+					assert.strictEqual(piyoCount, 1);
+					assert.strictEqual(waaaCount, 0);
+					ws.close();
+					done();
+				}, 3000);
+			}));
+		});
+	});
+});
diff --git a/packages/backend/test/_e2e/thread-mute.ts b/packages/backend/test/_e2e/thread-mute.ts
new file mode 100644
index 0000000000..0ed9aa0666
--- /dev/null
+++ b/packages/backend/test/_e2e/thread-mute.ts
@@ -0,0 +1,103 @@
+process.env.NODE_ENV = 'test';
+
+import * as assert from 'assert';
+import * as childProcess from 'child_process';
+import { signup, request, post, react, connectStream, startServer, shutdownServer } from '../utils.js';
+
+describe('Note thread mute', () => {
+	let p: childProcess.ChildProcess;
+
+	let alice: any;
+	let bob: any;
+	let carol: any;
+
+	beforeAll(async () => {
+		p = await startServer();
+		alice = await signup({ username: 'alice' });
+		bob = await signup({ username: 'bob' });
+		carol = await signup({ username: 'carol' });
+	}, 1000 * 30);
+
+	afterAll(async () => {
+		await shutdownServer(p);
+	});
+
+	it('notes/mentions にミュートしているスレッドの投稿が含まれない', async () => {
+		const bobNote = await post(bob, { text: '@alice @carol root note' });
+		const aliceReply = await post(alice, { replyId: bobNote.id, text: '@bob @carol child note' });
+
+		await request('/notes/thread-muting/create', { noteId: bobNote.id }, alice);
+
+		const carolReply = await post(carol, { replyId: bobNote.id, text: '@bob @alice child note' });
+		const carolReplyWithoutMention = await post(carol, { replyId: aliceReply.id, text: 'child note' });
+
+		const res = await request('/notes/mentions', {}, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(Array.isArray(res.body), true);
+		assert.strictEqual(res.body.some((note: any) => note.id === bobNote.id), false);
+		assert.strictEqual(res.body.some((note: any) => note.id === carolReply.id), false);
+		assert.strictEqual(res.body.some((note: any) => note.id === carolReplyWithoutMention.id), false);
+	});
+
+	it('ミュートしているスレッドからメンションされても、hasUnreadMentions が true にならない', async () => {
+		// 状態リセット
+		await request('/i/read-all-unread-notes', {}, alice);
+
+		const bobNote = await post(bob, { text: '@alice @carol root note' });
+
+		await request('/notes/thread-muting/create', { noteId: bobNote.id }, alice);
+
+		const carolReply = await post(carol, { replyId: bobNote.id, text: '@bob @alice child note' });
+
+		const res = await request('/i', {}, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(res.body.hasUnreadMentions, false);
+	});
+
+	it('ミュートしているスレッドからメンションされても、ストリームに unreadMention イベントが流れてこない', () => new Promise(async done => {
+		// 状態リセット
+		await request('/i/read-all-unread-notes', {}, alice);
+
+		const bobNote = await post(bob, { text: '@alice @carol root note' });
+
+		await request('/notes/thread-muting/create', { noteId: bobNote.id }, alice);
+
+		let fired = false;
+
+		const ws = await connectStream(alice, 'main', async ({ type, body }) => {
+			if (type === 'unreadMention') {
+				if (body === bobNote.id) return;
+				fired = true;
+			}
+		});
+
+		const carolReply = await post(carol, { replyId: bobNote.id, text: '@bob @alice child note' });
+
+		setTimeout(() => {
+			assert.strictEqual(fired, false);
+			ws.close();
+			done();
+		}, 5000);
+	}));
+
+	it('i/notifications にミュートしているスレッドの通知が含まれない', async () => {
+		const bobNote = await post(bob, { text: '@alice @carol root note' });
+		const aliceReply = await post(alice, { replyId: bobNote.id, text: '@bob @carol child note' });
+
+		await request('/notes/thread-muting/create', { noteId: bobNote.id }, alice);
+
+		const carolReply = await post(carol, { replyId: bobNote.id, text: '@bob @alice child note' });
+		const carolReplyWithoutMention = await post(carol, { replyId: aliceReply.id, text: 'child note' });
+
+		const res = await request('/i/notifications', {}, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(Array.isArray(res.body), true);
+		assert.strictEqual(res.body.some((notification: any) => notification.note.id === carolReply.id), false);
+		assert.strictEqual(res.body.some((notification: any) => notification.note.id === carolReplyWithoutMention.id), false);
+
+		// NOTE: bobの投稿はスレッドミュート前に行われたため通知に含まれていてもよい
+	});
+});
diff --git a/packages/backend/test/_e2e/user-notes.ts b/packages/backend/test/_e2e/user-notes.ts
new file mode 100644
index 0000000000..353875634c
--- /dev/null
+++ b/packages/backend/test/_e2e/user-notes.ts
@@ -0,0 +1,61 @@
+process.env.NODE_ENV = 'test';
+
+import * as assert from 'assert';
+import * as childProcess from 'child_process';
+import { signup, request, post, uploadUrl, startServer, shutdownServer } from '../utils.js';
+
+describe('users/notes', () => {
+	let p: childProcess.ChildProcess;
+
+	let alice: any;
+	let jpgNote: any;
+	let pngNote: any;
+	let jpgPngNote: any;
+
+	beforeAll(async () => {
+		p = await startServer();
+		alice = await signup({ username: 'alice' });
+		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],
+		});
+		pngNote = await post(alice, {
+			fileIds: [png.id],
+		});
+		jpgPngNote = await post(alice, {
+			fileIds: [jpg.id, png.id],
+		});
+	}, 1000 * 30);
+
+	afterAll(async() => {
+		await shutdownServer(p);
+	});
+
+	it('ファイルタイプ指定 (jpg)', async () => {
+		const res = await request('/users/notes', {
+			userId: alice.id,
+			fileType: ['image/jpeg'],
+		}, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(Array.isArray(res.body), true);
+		assert.strictEqual(res.body.length, 2);
+		assert.strictEqual(res.body.some((note: any) => note.id === jpgNote.id), true);
+		assert.strictEqual(res.body.some((note: any) => note.id === jpgPngNote.id), true);
+	});
+
+	it('ファイルタイプ指定 (jpg or png)', async () => {
+		const res = await request('/users/notes', {
+			userId: alice.id,
+			fileType: ['image/jpeg', 'image/png'],
+		}, alice);
+
+		assert.strictEqual(res.status, 200);
+		assert.strictEqual(Array.isArray(res.body), true);
+		assert.strictEqual(res.body.length, 3);
+		assert.strictEqual(res.body.some((note: any) => note.id === jpgNote.id), true);
+		assert.strictEqual(res.body.some((note: any) => note.id === pngNote.id), true);
+		assert.strictEqual(res.body.some((note: any) => note.id === jpgPngNote.id), true);
+	});
+});
diff --git a/packages/backend/test/activitypub.ts b/packages/backend/test/activitypub.ts
deleted file mode 100644
index f4ae27e5ec..0000000000
--- a/packages/backend/test/activitypub.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-process.env.NODE_ENV = 'test';
-
-import * as assert from 'assert';
-import rndstr from 'rndstr';
-import { initDb } from '../src/db/postgre.js';
-import { initTestDb } from './utils.js';
-
-describe('ActivityPub', () => {
-	before(async () => {
-		//await initTestDb();
-		await initDb();
-	});
-
-	describe('Parse minimum object', () => {
-		const host = 'https://host1.test';
-		const preferredUsername = `${rndstr('A-Z', 4)}${rndstr('a-z', 4)}`;
-		const actorId = `${host}/users/${preferredUsername.toLowerCase()}`;
-
-		const actor = {
-			'@context': 'https://www.w3.org/ns/activitystreams',
-			id: actorId,
-			type: 'Person',
-			preferredUsername,
-			inbox: `${actorId}/inbox`,
-			outbox: `${actorId}/outbox`,
-		};
-
-		const post = {
-			'@context': 'https://www.w3.org/ns/activitystreams',
-			id: `${host}/users/${rndstr('0-9a-z', 8)}`,
-			type: 'Note',
-			attributedTo: actor.id,
-			to: 'https://www.w3.org/ns/activitystreams#Public',
-			content: 'あ',
-		};
-
-		it('Minimum Actor', async () => {
-			const { MockResolver } = await import('./misc/mock-resolver.js');
-			const { createPerson } = await import('../src/remote/activitypub/models/person.js');
-
-			const resolver = new MockResolver();
-			resolver._register(actor.id, actor);
-
-			const user = await createPerson(actor.id, resolver);
-
-			assert.deepStrictEqual(user.uri, actor.id);
-			assert.deepStrictEqual(user.username, actor.preferredUsername);
-			assert.deepStrictEqual(user.inbox, actor.inbox);
-		});
-
-		it('Minimum Note', async () => {
-			const { MockResolver } = await import('./misc/mock-resolver.js');
-			const { createNote } = await import('../src/remote/activitypub/models/note.js');
-
-			const resolver = new MockResolver();
-			resolver._register(actor.id, actor);
-			resolver._register(post.id, post);
-
-			const note = await createNote(post.id, resolver, true);
-
-			assert.deepStrictEqual(note?.uri, post.id);
-			assert.deepStrictEqual(note.visibility, 'public');
-			assert.deepStrictEqual(note.text, post.content);
-		});
-	});
-
-	describe('Truncate long name', () => {
-		const host = 'https://host1.test';
-		const preferredUsername = `${rndstr('A-Z', 4)}${rndstr('a-z', 4)}`;
-		const actorId = `${host}/users/${preferredUsername.toLowerCase()}`;
-
-		const name = rndstr('0-9a-z', 129);
-
-		const actor = {
-			'@context': 'https://www.w3.org/ns/activitystreams',
-			id: actorId,
-			type: 'Person',
-			preferredUsername,
-			name,
-			inbox: `${actorId}/inbox`,
-			outbox: `${actorId}/outbox`,
-		};
-
-		it('Actor', async () => {
-			const { MockResolver } = await import('./misc/mock-resolver.js');
-			const { createPerson } = await import('../src/remote/activitypub/models/person.js');
-
-			const resolver = new MockResolver();
-			resolver._register(actor.id, actor);
-
-			const user = await createPerson(actor.id, resolver);
-
-			assert.deepStrictEqual(user.name, actor.name.substr(0, 128));
-		});
-	});
-});
diff --git a/packages/backend/test/ap-request.ts b/packages/backend/test/ap-request.ts
deleted file mode 100644
index da95c421f3..0000000000
--- a/packages/backend/test/ap-request.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as assert from 'assert';
-import httpSignature from 'http-signature';
-import { genRsaKeyPair } from '../src/misc/gen-key-pair.js';
-import { createSignedPost, createSignedGet } from '../src/remote/activitypub/ap-request.js';
-
-export const buildParsedSignature = (signingString: string, signature: string, algorithm: string) => {
-	return {
-		scheme: 'Signature',
-		params: {
-			keyId: 'KeyID',	// dummy, not used for verify
-			algorithm: algorithm,
-			headers: [ '(request-target)', 'date', 'host', 'digest' ],	// dummy, not used for verify
-			signature: signature,
-		},
-		signingString: signingString,
-		algorithm: algorithm.toUpperCase(),
-		keyId: 'KeyID',	// dummy, not used for verify
-	};
-};
-
-describe('ap-request', () => {
-	it('createSignedPost with verify', async () => {
-		const keypair = await genRsaKeyPair();
-		const key = { keyId: 'x', 'privateKeyPem': keypair.privateKey };
-		const url = 'https://example.com/inbox';
-		const activity = { a: 1 };
-		const body = JSON.stringify(activity);
-		const headers = {
-			'User-Agent': 'UA',
-		};
-
-		const req = createSignedPost({ key, url, body, additionalHeaders: headers });
-
-		const parsed = buildParsedSignature(req.signingString, req.signature, 'rsa-sha256');
-
-		const result = httpSignature.verifySignature(parsed, keypair.publicKey);
-		assert.deepStrictEqual(result, true);
-	});
-
-	it('createSignedGet with verify', async () => {
-		const keypair = await genRsaKeyPair();
-		const key = { keyId: 'x', 'privateKeyPem': keypair.privateKey };
-		const url = 'https://example.com/outbox';
-		const headers = {
-			'User-Agent': 'UA',
-		};
-
-		const req = createSignedGet({ key, url, additionalHeaders: headers });
-
-		const parsed = buildParsedSignature(req.signingString, req.signature, 'rsa-sha256');
-
-		const result = httpSignature.verifySignature(parsed, keypair.publicKey);
-		assert.deepStrictEqual(result, true);
-	});
-});
diff --git a/packages/backend/test/api-visibility.ts b/packages/backend/test/api-visibility.ts
deleted file mode 100644
index b155549f98..0000000000
--- a/packages/backend/test/api-visibility.ts
+++ /dev/null
@@ -1,476 +0,0 @@
-process.env.NODE_ENV = 'test';
-
-import * as assert from 'assert';
-import * as childProcess from 'child_process';
-import { async, signup, request, post, startServer, shutdownServer } from './utils.js';
-
-describe('API visibility', () => {
-	let p: childProcess.ChildProcess;
-
-	before(async () => {
-		p = await startServer();
-	});
-
-	after(async () => {
-		await shutdownServer(p);
-	});
-
-	describe('Note visibility', async () => {
-		//#region vars
-		/** ヒロイン */
-		let alice: any;
-		/** フォロワー */
-		let follower: any;
-		/** 非フォロワー */
-		let other: any;
-		/** 非フォロワーでもリプライやメンションをされた人 */
-		let target: any;
-		/** specified mentionでmentionを飛ばされる人 */
-		let target2: any;
-
-		/** public-post */
-		let pub: any;
-		/** home-post */
-		let home: any;
-		/** followers-post */
-		let fol: any;
-		/** specified-post */
-		let spe: any;
-
-		/** public-reply to target's post */
-		let pubR: any;
-		/** home-reply to target's post */
-		let homeR: any;
-		/** followers-reply to target's post */
-		let folR: any;
-		/** specified-reply to target's post */
-		let speR: any;
-
-		/** public-mention to target */
-		let pubM: any;
-		/** home-mention to target */
-		let homeM: any;
-		/** followers-mention to target */
-		let folM: any;
-		/** specified-mention to target */
-		let speM: any;
-
-		/** reply target post */
-		let tgt: any;
-		//#endregion
-
-		const show = async (noteId: any, by: any) => {
-			return await request('/notes/show', {
-				noteId,
-			}, by);
-		};
-
-		before(async () => {
-			//#region prepare
-			// signup
-			alice = await signup({ username: 'alice' });
-			follower = await signup({ username: 'follower' });
-			other = await signup({ username: 'other' });
-			target = await signup({ username: 'target' });
-			target2 = await signup({ username: 'target2' });
-
-			// follow alice <= follower
-			await request('/following/create', { userId: alice.id }, follower);
-
-			// normal posts
-			pub = await post(alice, { text: 'x', visibility: 'public' });
-			home = await post(alice, { text: 'x', visibility: 'home' });
-			fol = await post(alice, { text: 'x', visibility: 'followers' });
-			spe = await post(alice, { text: 'x', visibility: 'specified', visibleUserIds: [target.id] });
-
-			// replies
-			tgt = await post(target, { text: 'y', visibility: 'public' });
-			pubR = await post(alice, { text: 'x', replyId: tgt.id, visibility: 'public' });
-			homeR = await post(alice, { text: 'x', replyId: tgt.id, visibility: 'home' });
-			folR = await post(alice, { text: 'x', replyId: tgt.id, visibility: 'followers' });
-			speR = await post(alice, { text: 'x', replyId: tgt.id, visibility: 'specified' });
-
-			// mentions
-			pubM = await post(alice, { text: '@target x', replyId: tgt.id, visibility: 'public' });
-			homeM = await post(alice, { text: '@target x', replyId: tgt.id, visibility: 'home' });
-			folM = await post(alice, { text: '@target x', replyId: tgt.id, visibility: 'followers' });
-			speM = await post(alice, { text: '@target2 x', replyId: tgt.id, visibility: 'specified' });
-			//#endregion
-		});
-
-		//#region show post
-		// public
-		it('[show] public-postを自分が見れる', async(async () => {
-			const res = await show(pub.id, alice);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] public-postをフォロワーが見れる', async(async () => {
-			const res = await show(pub.id, follower);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] public-postを非フォロワーが見れる', async(async () => {
-			const res = await show(pub.id, other);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] public-postを未認証が見れる', async(async () => {
-			const res = await show(pub.id, null);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		// home
-		it('[show] home-postを自分が見れる', async(async () => {
-			const res = await show(home.id, alice);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] home-postをフォロワーが見れる', async(async () => {
-			const res = await show(home.id, follower);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] home-postを非フォロワーが見れる', async(async () => {
-			const res = await show(home.id, other);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] home-postを未認証が見れる', async(async () => {
-			const res = await show(home.id, null);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		// followers
-		it('[show] followers-postを自分が見れる', async(async () => {
-			const res = await show(fol.id, alice);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] followers-postをフォロワーが見れる', async(async () => {
-			const res = await show(fol.id, follower);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] followers-postを非フォロワーが見れない', async(async () => {
-			const res = await show(fol.id, other);
-			assert.strictEqual(res.body.isHidden, true);
-		}));
-
-		it('[show] followers-postを未認証が見れない', async(async () => {
-			const res = await show(fol.id, null);
-			assert.strictEqual(res.body.isHidden, true);
-		}));
-
-		// specified
-		it('[show] specified-postを自分が見れる', async(async () => {
-			const res = await show(spe.id, alice);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] specified-postを指定ユーザーが見れる', async(async () => {
-			const res = await show(spe.id, target);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] specified-postをフォロワーが見れない', async(async () => {
-			const res = await show(spe.id, follower);
-			assert.strictEqual(res.body.isHidden, true);
-		}));
-
-		it('[show] specified-postを非フォロワーが見れない', async(async () => {
-			const res = await show(spe.id, other);
-			assert.strictEqual(res.body.isHidden, true);
-		}));
-
-		it('[show] specified-postを未認証が見れない', async(async () => {
-			const res = await show(spe.id, null);
-			assert.strictEqual(res.body.isHidden, true);
-		}));
-		//#endregion
-
-		//#region show reply
-		// public
-		it('[show] public-replyを自分が見れる', async(async () => {
-			const res = await show(pubR.id, alice);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] public-replyをされた人が見れる', async(async () => {
-			const res = await show(pubR.id, target);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] public-replyをフォロワーが見れる', async(async () => {
-			const res = await show(pubR.id, follower);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] public-replyを非フォロワーが見れる', async(async () => {
-			const res = await show(pubR.id, other);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] public-replyを未認証が見れる', async(async () => {
-			const res = await show(pubR.id, null);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		// home
-		it('[show] home-replyを自分が見れる', async(async () => {
-			const res = await show(homeR.id, alice);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] home-replyをされた人が見れる', async(async () => {
-			const res = await show(homeR.id, target);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] home-replyをフォロワーが見れる', async(async () => {
-			const res = await show(homeR.id, follower);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] home-replyを非フォロワーが見れる', async(async () => {
-			const res = await show(homeR.id, other);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] home-replyを未認証が見れる', async(async () => {
-			const res = await show(homeR.id, null);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		// followers
-		it('[show] followers-replyを自分が見れる', async(async () => {
-			const res = await show(folR.id, alice);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] followers-replyを非フォロワーでもリプライされていれば見れる', async(async () => {
-			const res = await show(folR.id, target);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] followers-replyをフォロワーが見れる', async(async () => {
-			const res = await show(folR.id, follower);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] followers-replyを非フォロワーが見れない', async(async () => {
-			const res = await show(folR.id, other);
-			assert.strictEqual(res.body.isHidden, true);
-		}));
-
-		it('[show] followers-replyを未認証が見れない', async(async () => {
-			const res = await show(folR.id, null);
-			assert.strictEqual(res.body.isHidden, true);
-		}));
-
-		// specified
-		it('[show] specified-replyを自分が見れる', async(async () => {
-			const res = await show(speR.id, alice);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] specified-replyを指定ユーザーが見れる', async(async () => {
-			const res = await show(speR.id, target);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] specified-replyをされた人が指定されてなくても見れる', async(async () => {
-			const res = await show(speR.id, target);
-			assert.strictEqual(res.body.text, 'x');
-		}));
-
-		it('[show] specified-replyをフォロワーが見れない', async(async () => {
-			const res = await show(speR.id, follower);
-			assert.strictEqual(res.body.isHidden, true);
-		}));
-
-		it('[show] specified-replyを非フォロワーが見れない', async(async () => {
-			const res = await show(speR.id, other);
-			assert.strictEqual(res.body.isHidden, true);
-		}));
-
-		it('[show] specified-replyを未認証が見れない', async(async () => {
-			const res = await show(speR.id, null);
-			assert.strictEqual(res.body.isHidden, true);
-		}));
-		//#endregion
-
-		//#region show mention
-		// public
-		it('[show] public-mentionを自分が見れる', async(async () => {
-			const res = await show(pubM.id, alice);
-			assert.strictEqual(res.body.text, '@target x');
-		}));
-
-		it('[show] public-mentionをされた人が見れる', async(async () => {
-			const res = await show(pubM.id, target);
-			assert.strictEqual(res.body.text, '@target x');
-		}));
-
-		it('[show] public-mentionをフォロワーが見れる', async(async () => {
-			const res = await show(pubM.id, follower);
-			assert.strictEqual(res.body.text, '@target x');
-		}));
-
-		it('[show] public-mentionを非フォロワーが見れる', async(async () => {
-			const res = await show(pubM.id, other);
-			assert.strictEqual(res.body.text, '@target x');
-		}));
-
-		it('[show] public-mentionを未認証が見れる', async(async () => {
-			const res = await show(pubM.id, null);
-			assert.strictEqual(res.body.text, '@target x');
-		}));
-
-		// home
-		it('[show] home-mentionを自分が見れる', async(async () => {
-			const res = await show(homeM.id, alice);
-			assert.strictEqual(res.body.text, '@target x');
-		}));
-
-		it('[show] home-mentionをされた人が見れる', async(async () => {
-			const res = await show(homeM.id, target);
-			assert.strictEqual(res.body.text, '@target x');
-		}));
-
-		it('[show] home-mentionをフォロワーが見れる', async(async () => {
-			const res = await show(homeM.id, follower);
-			assert.strictEqual(res.body.text, '@target x');
-		}));
-
-		it('[show] home-mentionを非フォロワーが見れる', async(async () => {
-			const res = await show(homeM.id, other);
-			assert.strictEqual(res.body.text, '@target x');
-		}));
-
-		it('[show] home-mentionを未認証が見れる', async(async () => {
-			const res = await show(homeM.id, null);
-			assert.strictEqual(res.body.text, '@target x');
-		}));
-
-		// followers
-		it('[show] followers-mentionを自分が見れる', async(async () => {
-			const res = await show(folM.id, alice);
-			assert.strictEqual(res.body.text, '@target x');
-		}));
-
-		it('[show] followers-mentionをメンションされていれば非フォロワーでも見れる', async(async () => {
-			const res = await show(folM.id, target);
-			assert.strictEqual(res.body.text, '@target x');
-		}));
-
-		it('[show] followers-mentionをフォロワーが見れる', async(async () => {
-			const res = await show(folM.id, follower);
-			assert.strictEqual(res.body.text, '@target x');
-		}));
-
-		it('[show] followers-mentionを非フォロワーが見れない', async(async () => {
-			const res = await show(folM.id, other);
-			assert.strictEqual(res.body.isHidden, true);
-		}));
-
-		it('[show] followers-mentionを未認証が見れない', async(async () => {
-			const res = await show(folM.id, null);
-			assert.strictEqual(res.body.isHidden, true);
-		}));
-
-		// specified
-		it('[show] specified-mentionを自分が見れる', async(async () => {
-			const res = await show(speM.id, alice);
-			assert.strictEqual(res.body.text, '@target2 x');
-		}));
-
-		it('[show] specified-mentionを指定ユーザーが見れる', async(async () => {
-			const res = await show(speM.id, target);
-			assert.strictEqual(res.body.text, '@target2 x');
-		}));
-
-		it('[show] specified-mentionをされた人が指定されてなかったら見れない', async(async () => {
-			const res = await show(speM.id, target2);
-			assert.strictEqual(res.body.isHidden, true);
-		}));
-
-		it('[show] specified-mentionをフォロワーが見れない', async(async () => {
-			const res = await show(speM.id, follower);
-			assert.strictEqual(res.body.isHidden, true);
-		}));
-
-		it('[show] specified-mentionを非フォロワーが見れない', async(async () => {
-			const res = await show(speM.id, other);
-			assert.strictEqual(res.body.isHidden, true);
-		}));
-
-		it('[show] specified-mentionを未認証が見れない', async(async () => {
-			const res = await show(speM.id, null);
-			assert.strictEqual(res.body.isHidden, true);
-		}));
-		//#endregion
-
-		//#region HTL
-		it('[HTL] public-post が 自分が見れる', async(async () => {
-			const res = await request('/notes/timeline', { limit: 100 }, alice);
-			assert.strictEqual(res.status, 200);
-			const notes = res.body.filter((n: any) => n.id == pub.id);
-			assert.strictEqual(notes[0].text, 'x');
-		}));
-
-		it('[HTL] public-post が 非フォロワーから見れない', async(async () => {
-			const res = await request('/notes/timeline', { limit: 100 }, other);
-			assert.strictEqual(res.status, 200);
-			const notes = res.body.filter((n: any) => n.id == pub.id);
-			assert.strictEqual(notes.length, 0);
-		}));
-
-		it('[HTL] followers-post が フォロワーから見れる', async(async () => {
-			const res = await request('/notes/timeline', { limit: 100 }, follower);
-			assert.strictEqual(res.status, 200);
-			const notes = res.body.filter((n: any) => n.id == fol.id);
-			assert.strictEqual(notes[0].text, 'x');
-		}));
-		//#endregion
-
-		//#region RTL
-		it('[replies] followers-reply が フォロワーから見れる', async(async () => {
-			const res = await request('/notes/replies', { noteId: tgt.id, limit: 100 }, follower);
-			assert.strictEqual(res.status, 200);
-			const notes = res.body.filter((n: any) => n.id == folR.id);
-			assert.strictEqual(notes[0].text, 'x');
-		}));
-
-		it('[replies] followers-reply が 非フォロワー (リプライ先ではない) から見れない', async(async () => {
-			const res = await request('/notes/replies', { noteId: tgt.id, limit: 100 }, other);
-			assert.strictEqual(res.status, 200);
-			const notes = res.body.filter((n: any) => n.id == folR.id);
-			assert.strictEqual(notes.length, 0);
-		}));
-
-		it('[replies] followers-reply が 非フォロワー (リプライ先である) から見れる', async(async () => {
-			const res = await request('/notes/replies', { noteId: tgt.id, limit: 100 }, target);
-			assert.strictEqual(res.status, 200);
-			const notes = res.body.filter((n: any) => n.id == folR.id);
-			assert.strictEqual(notes[0].text, 'x');
-		}));
-		//#endregion
-
-		//#region MTL
-		it('[mentions] followers-reply が 非フォロワー (リプライ先である) から見れる', async(async () => {
-			const res = await request('/notes/mentions', { limit: 100 }, target);
-			assert.strictEqual(res.status, 200);
-			const notes = res.body.filter((n: any) => n.id == folR.id);
-			assert.strictEqual(notes[0].text, 'x');
-		}));
-
-		it('[mentions] followers-mention が 非フォロワー (メンション先である) から見れる', async(async () => {
-			const res = await request('/notes/mentions', { limit: 100 }, target);
-			assert.strictEqual(res.status, 200);
-			const notes = res.body.filter((n: any) => n.id == folM.id);
-			assert.strictEqual(notes[0].text, '@target x');
-		}));
-		//#endregion
-	});
-});
diff --git a/packages/backend/test/api.ts b/packages/backend/test/api.ts
deleted file mode 100644
index b1b2ecafc7..0000000000
--- a/packages/backend/test/api.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-process.env.NODE_ENV = 'test';
-
-import * as assert from 'assert';
-import * as childProcess from 'child_process';
-import { async, signup, request, post, react, uploadFile, startServer, shutdownServer } from './utils.js';
-
-describe('API', () => {
-	let p: childProcess.ChildProcess;
-	let alice: any;
-	let bob: any;
-	let carol: any;
-
-	before(async () => {
-		p = await startServer();
-		alice = await signup({ username: 'alice' });
-		bob = await signup({ username: 'bob' });
-		carol = await signup({ username: 'carol' });
-	});
-
-	after(async () => {
-		await shutdownServer(p);
-	});
-
-	describe('General validation', () => {
-		it('wrong type', async(async () => {
-			const res = await request('/test', {
-				required: true,
-				string: 42,
-			});
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('missing require param', async(async () => {
-			const res = await request('/test', {
-				string: 'a',
-			});
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('invalid misskey:id (empty string)', async(async () => {
-			const res = await request('/test', {
-				required: true,
-				id: '',
-			});
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('valid misskey:id', async(async () => {
-			const res = await request('/test', {
-				required: true,
-				id: '8wvhjghbxu',
-			});
-			assert.strictEqual(res.status, 200);
-		}));
-
-		it('default value', async(async () => {
-			const res = await request('/test', {
-				required: true,
-				string: 'a',
-			});
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.body.default, 'hello');
-		}));
-
-		it('can set null even if it has default value', async(async () => {
-			const res = await request('/test', {
-				required: true,
-				nullableDefault: null,
-			});
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.body.nullableDefault, null);
-		}));
-
-		it('cannot set undefined if it has default value', async(async () => {
-			const res = await request('/test', {
-				required: true,
-				nullableDefault: undefined,
-			});
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.body.nullableDefault, 'hello');
-		}));
-	});
-});
diff --git a/packages/backend/test/block.ts b/packages/backend/test/block.ts
deleted file mode 100644
index b3343813cd..0000000000
--- a/packages/backend/test/block.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-process.env.NODE_ENV = 'test';
-
-import * as assert from 'assert';
-import * as childProcess from 'child_process';
-import { async, signup, request, post, startServer, shutdownServer } from './utils.js';
-
-describe('Block', () => {
-	let p: childProcess.ChildProcess;
-
-	// alice blocks bob
-	let alice: any;
-	let bob: any;
-	let carol: any;
-
-	before(async () => {
-		p = await startServer();
-		alice = await signup({ username: 'alice' });
-		bob = await signup({ username: 'bob' });
-		carol = await signup({ username: 'carol' });
-	});
-
-	after(async () => {
-		await shutdownServer(p);
-	});
-
-	it('Block作成', async(async () => {
-		const res = await request('/blocking/create', {
-			userId: bob.id,
-		}, alice);
-
-		assert.strictEqual(res.status, 200);
-	}));
-
-	it('ブロックされているユーザーをフォローできない', async(async () => {
-		const res = await request('/following/create', { userId: alice.id }, bob);
-
-		assert.strictEqual(res.status, 400);
-		assert.strictEqual(res.body.error.id, 'c4ab57cc-4e41-45e9-bfd9-584f61e35ce0');
-	}));
-
-	it('ブロックされているユーザーにリアクションできない', async(async () => {
-		const note = await post(alice, { text: 'hello' });
-
-		const res = await request('/notes/reactions/create', { noteId: note.id, reaction: '👍' }, bob);
-
-		assert.strictEqual(res.status, 400);
-		assert.strictEqual(res.body.error.id, '20ef5475-9f38-4e4c-bd33-de6d979498ec');
-	}));
-
-	it('ブロックされているユーザーに返信できない', async(async () => {
-		const note = await post(alice, { text: 'hello' });
-
-		const res = await request('/notes/create', { replyId: note.id, text: 'yo' }, bob);
-
-		assert.strictEqual(res.status, 400);
-		assert.strictEqual(res.body.error.id, 'b390d7e1-8a5e-46ed-b625-06271cafd3d3');
-	}));
-
-	it('ブロックされているユーザーのノートをRenoteできない', async(async () => {
-		const note = await post(alice, { text: 'hello' });
-
-		const res = await request('/notes/create', { renoteId: note.id, text: 'yo' }, bob);
-
-		assert.strictEqual(res.status, 400);
-		assert.strictEqual(res.body.error.id, 'b390d7e1-8a5e-46ed-b625-06271cafd3d3');
-	}));
-
-	// TODO: ユーザーリストに入れられないテスト
-
-	// TODO: ユーザーリストから除外されるテスト
-
-	it('タイムライン(LTL)にブロックされているユーザーの投稿が含まれない', async(async () => {
-		const aliceNote = await post(alice);
-		const bobNote = await post(bob);
-		const carolNote = await post(carol);
-
-		const res = await request('/notes/local-timeline', {}, bob);
-
-		assert.strictEqual(res.status, 200);
-		assert.strictEqual(Array.isArray(res.body), true);
-		assert.strictEqual(res.body.some((note: any) => note.id === aliceNote.id), false);
-		assert.strictEqual(res.body.some((note: any) => note.id === bobNote.id), true);
-		assert.strictEqual(res.body.some((note: any) => note.id === carolNote.id), true);
-	}));
-});
diff --git a/packages/backend/test/chart.ts b/packages/backend/test/chart.ts
deleted file mode 100644
index ac0844679f..0000000000
--- a/packages/backend/test/chart.ts
+++ /dev/null
@@ -1,531 +0,0 @@
-process.env.NODE_ENV = 'test';
-
-import * as assert from 'assert';
-import * as lolex from '@sinonjs/fake-timers';
-import TestChart from '../src/services/chart/charts/test.js';
-import TestGroupedChart from '../src/services/chart/charts/test-grouped.js';
-import TestUniqueChart from '../src/services/chart/charts/test-unique.js';
-import TestIntersectionChart from '../src/services/chart/charts/test-intersection.js';
-import { initDb } from '../src/db/postgre.js';
-
-describe('Chart', () => {
-	let testChart: TestChart;
-	let testGroupedChart: TestGroupedChart;
-	let testUniqueChart: TestUniqueChart;
-	let testIntersectionChart: TestIntersectionChart;
-	let clock: lolex.InstalledClock;
-
-	beforeEach(async () => {
-		await initDb(true);
-
-		testChart = new TestChart();
-		testGroupedChart = new TestGroupedChart();
-		testUniqueChart = new TestUniqueChart();
-		testIntersectionChart = new TestIntersectionChart();
-
-		clock = lolex.install({
-			now: new Date(Date.UTC(2000, 0, 1, 0, 0, 0)),
-			shouldClearNativeTimers: true,
-		});
-	});
-
-	afterEach(() => {
-		clock.uninstall();
-	});
-
-	it('Can updates', async () => {
-		await testChart.increment();
-		await testChart.save();
-
-		const chartHours = await testChart.getChart('hour', 3, null);
-		const chartDays = await testChart.getChart('day', 3, null);
-
-		assert.deepStrictEqual(chartHours, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [1, 0, 0],
-				total: [1, 0, 0],
-			},
-		});
-
-		assert.deepStrictEqual(chartDays, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [1, 0, 0],
-				total: [1, 0, 0],
-			},
-		});
-	});
-
-	it('Can updates (dec)', async () => {
-		await testChart.decrement();
-		await testChart.save();
-
-		const chartHours = await testChart.getChart('hour', 3, null);
-		const chartDays = await testChart.getChart('day', 3, null);
-
-		assert.deepStrictEqual(chartHours, {
-			foo: {
-				dec: [1, 0, 0],
-				inc: [0, 0, 0],
-				total: [-1, 0, 0],
-			},
-		});
-
-		assert.deepStrictEqual(chartDays, {
-			foo: {
-				dec: [1, 0, 0],
-				inc: [0, 0, 0],
-				total: [-1, 0, 0],
-			},
-		});
-	});
-
-	it('Empty chart', async () => {
-		const chartHours = await testChart.getChart('hour', 3, null);
-		const chartDays = await testChart.getChart('day', 3, null);
-
-		assert.deepStrictEqual(chartHours, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [0, 0, 0],
-				total: [0, 0, 0],
-			},
-		});
-
-		assert.deepStrictEqual(chartDays, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [0, 0, 0],
-				total: [0, 0, 0],
-			},
-		});
-	});
-
-	it('Can updates at multiple times at same time', async () => {
-		await testChart.increment();
-		await testChart.increment();
-		await testChart.increment();
-		await testChart.save();
-
-		const chartHours = await testChart.getChart('hour', 3, null);
-		const chartDays = await testChart.getChart('day', 3, null);
-
-		assert.deepStrictEqual(chartHours, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [3, 0, 0],
-				total: [3, 0, 0],
-			},
-		});
-
-		assert.deepStrictEqual(chartDays, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [3, 0, 0],
-				total: [3, 0, 0],
-			},
-		});
-	});
-
-	it('複数回saveされてもデータの更新は一度だけ', async () => {
-		await testChart.increment();
-		await testChart.save();
-		await testChart.save();
-		await testChart.save();
-
-		const chartHours = await testChart.getChart('hour', 3, null);
-		const chartDays = await testChart.getChart('day', 3, null);
-
-		assert.deepStrictEqual(chartHours, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [1, 0, 0],
-				total: [1, 0, 0],
-			},
-		});
-
-		assert.deepStrictEqual(chartDays, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [1, 0, 0],
-				total: [1, 0, 0],
-			},
-		});
-	});
-
-	it('Can updates at different times', async () => {
-		await testChart.increment();
-		await testChart.save();
-
-		clock.tick('01:00:00');
-
-		await testChart.increment();
-		await testChart.save();
-
-		const chartHours = await testChart.getChart('hour', 3, null);
-		const chartDays = await testChart.getChart('day', 3, null);
-
-		assert.deepStrictEqual(chartHours, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [1, 1, 0],
-				total: [2, 1, 0],
-			},
-		});
-
-		assert.deepStrictEqual(chartDays, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [2, 0, 0],
-				total: [2, 0, 0],
-			},
-		});
-	});
-
-	// 仕様上はこうなってほしいけど、実装は難しそうなのでskip
-	/*
-	it('Can updates at different times without save', async () => {
-		await testChart.increment();
-
-		clock.tick('01:00:00');
-
-		await testChart.increment();
-		await testChart.save();
-
-		const chartHours = await testChart.getChart('hour', 3, null);
-		const chartDays = await testChart.getChart('day', 3, null);
-
-		assert.deepStrictEqual(chartHours, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [1, 1, 0],
-				total: [2, 1, 0]
-			},
-		});
-
-		assert.deepStrictEqual(chartDays, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [2, 0, 0],
-				total: [2, 0, 0]
-			},
-		});
-	});
-	*/
-
-	it('Can padding', async () => {
-		await testChart.increment();
-		await testChart.save();
-
-		clock.tick('02:00:00');
-
-		await testChart.increment();
-		await testChart.save();
-
-		const chartHours = await testChart.getChart('hour', 3, null);
-		const chartDays = await testChart.getChart('day', 3, null);
-
-		assert.deepStrictEqual(chartHours, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [1, 0, 1],
-				total: [2, 1, 1],
-			},
-		});
-
-		assert.deepStrictEqual(chartDays, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [2, 0, 0],
-				total: [2, 0, 0],
-			},
-		});
-	});
-
-	// 要求された範囲にログがひとつもない場合でもパディングできる
-	it('Can padding from past range', async () => {
-		await testChart.increment();
-		await testChart.save();
-
-		clock.tick('05:00:00');
-
-		const chartHours = await testChart.getChart('hour', 3, null);
-		const chartDays = await testChart.getChart('day', 3, null);
-
-		assert.deepStrictEqual(chartHours, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [0, 0, 0],
-				total: [1, 1, 1],
-			},
-		});
-
-		assert.deepStrictEqual(chartDays, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [1, 0, 0],
-				total: [1, 0, 0],
-			},
-		});
-	});
-
-	// 要求された範囲の最も古い箇所に位置するログが存在しない場合でもパディングできる
-	// Issue #3190
-	it('Can padding from past range 2', async () => {
-		await testChart.increment();
-		await testChart.save();
-
-		clock.tick('05:00:00');
-
-		await testChart.increment();
-		await testChart.save();
-
-		const chartHours = await testChart.getChart('hour', 3, null);
-		const chartDays = await testChart.getChart('day', 3, null);
-
-		assert.deepStrictEqual(chartHours, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [1, 0, 0],
-				total: [2, 1, 1],
-			},
-		});
-
-		assert.deepStrictEqual(chartDays, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [2, 0, 0],
-				total: [2, 0, 0],
-			},
-		});
-	});
-
-	it('Can specify offset', async () => {
-		await testChart.increment();
-		await testChart.save();
-
-		clock.tick('01:00:00');
-
-		await testChart.increment();
-		await testChart.save();
-
-		const chartHours = await testChart.getChart('hour', 3, new Date(Date.UTC(2000, 0, 1, 0, 0, 0)));
-		const chartDays = await testChart.getChart('day', 3, new Date(Date.UTC(2000, 0, 1, 0, 0, 0)));
-
-		assert.deepStrictEqual(chartHours, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [1, 0, 0],
-				total: [1, 0, 0],
-			},
-		});
-
-		assert.deepStrictEqual(chartDays, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [2, 0, 0],
-				total: [2, 0, 0],
-			},
-		});
-	});
-
-	it('Can specify offset (floor time)', async () => {
-		clock.tick('00:30:00');
-
-		await testChart.increment();
-		await testChart.save();
-
-		clock.tick('01:30:00');
-
-		await testChart.increment();
-		await testChart.save();
-
-		const chartHours = await testChart.getChart('hour', 3, new Date(Date.UTC(2000, 0, 1, 0, 0, 0)));
-		const chartDays = await testChart.getChart('day', 3, new Date(Date.UTC(2000, 0, 1, 0, 0, 0)));
-
-		assert.deepStrictEqual(chartHours, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [1, 0, 0],
-				total: [1, 0, 0],
-			},
-		});
-
-		assert.deepStrictEqual(chartDays, {
-			foo: {
-				dec: [0, 0, 0],
-				inc: [2, 0, 0],
-				total: [2, 0, 0],
-			},
-		});
-	});
-
-	describe('Grouped', () => {
-		it('Can updates', async () => {
-			await testGroupedChart.increment('alice');
-			await testGroupedChart.save();
-
-			const aliceChartHours = await testGroupedChart.getChart('hour', 3, null, 'alice');
-			const aliceChartDays = await testGroupedChart.getChart('day', 3, null, 'alice');
-			const bobChartHours = await testGroupedChart.getChart('hour', 3, null, 'bob');
-			const bobChartDays = await testGroupedChart.getChart('day', 3, null, 'bob');
-
-			assert.deepStrictEqual(aliceChartHours, {
-				foo: {
-					dec: [0, 0, 0],
-					inc: [1, 0, 0],
-					total: [1, 0, 0],
-				},
-			});
-
-			assert.deepStrictEqual(aliceChartDays, {
-				foo: {
-					dec: [0, 0, 0],
-					inc: [1, 0, 0],
-					total: [1, 0, 0],
-				},
-			});
-
-			assert.deepStrictEqual(bobChartHours, {
-				foo: {
-					dec: [0, 0, 0],
-					inc: [0, 0, 0],
-					total: [0, 0, 0],
-				},
-			});
-
-			assert.deepStrictEqual(bobChartDays, {
-				foo: {
-					dec: [0, 0, 0],
-					inc: [0, 0, 0],
-					total: [0, 0, 0],
-				},
-			});
-		});
-	});
-
-	describe('Unique increment', () => {
-		it('Can updates', async () => {
-			await testUniqueChart.uniqueIncrement('alice');
-			await testUniqueChart.uniqueIncrement('alice');
-			await testUniqueChart.uniqueIncrement('bob');
-			await testUniqueChart.save();
-
-			const chartHours = await testUniqueChart.getChart('hour', 3, null);
-			const chartDays = await testUniqueChart.getChart('day', 3, null);
-
-			assert.deepStrictEqual(chartHours, {
-				foo: [2, 0, 0],
-			});
-
-			assert.deepStrictEqual(chartDays, {
-				foo: [2, 0, 0],
-			});
-		});
-
-		describe('Intersection', () => {
-			it('条件が満たされていない場合はカウントされない', async () => {
-				await testIntersectionChart.addA('alice');
-				await testIntersectionChart.addA('bob');
-				await testIntersectionChart.addB('carol');
-				await testIntersectionChart.save();
-	
-				const chartHours = await testIntersectionChart.getChart('hour', 3, null);
-				const chartDays = await testIntersectionChart.getChart('day', 3, null);
-	
-				assert.deepStrictEqual(chartHours, {
-					a: [2, 0, 0],
-					b: [1, 0, 0],
-					aAndB: [0, 0, 0],
-				});
-	
-				assert.deepStrictEqual(chartDays, {
-					a: [2, 0, 0],
-					b: [1, 0, 0],
-					aAndB: [0, 0, 0],
-				});
-			});
-
-			it('条件が満たされている場合にカウントされる', async () => {
-				await testIntersectionChart.addA('alice');
-				await testIntersectionChart.addA('bob');
-				await testIntersectionChart.addB('carol');
-				await testIntersectionChart.addB('alice');
-				await testIntersectionChart.save();
-	
-				const chartHours = await testIntersectionChart.getChart('hour', 3, null);
-				const chartDays = await testIntersectionChart.getChart('day', 3, null);
-	
-				assert.deepStrictEqual(chartHours, {
-					a: [2, 0, 0],
-					b: [2, 0, 0],
-					aAndB: [1, 0, 0],
-				});
-	
-				assert.deepStrictEqual(chartDays, {
-					a: [2, 0, 0],
-					b: [2, 0, 0],
-					aAndB: [1, 0, 0],
-				});
-			});
-		});
-	});
-
-	describe('Resync', () => {
-		it('Can resync', async () => {
-			testChart.total = 1;
-
-			await testChart.resync();
-
-			const chartHours = await testChart.getChart('hour', 3, null);
-			const chartDays = await testChart.getChart('day', 3, null);
-
-			assert.deepStrictEqual(chartHours, {
-				foo: {
-					dec: [0, 0, 0],
-					inc: [0, 0, 0],
-					total: [1, 0, 0],
-				},
-			});
-
-			assert.deepStrictEqual(chartDays, {
-				foo: {
-					dec: [0, 0, 0],
-					inc: [0, 0, 0],
-					total: [1, 0, 0],
-				},
-			});
-		});
-
-		it('Can resync (2)', async () => {
-			await testChart.increment();
-			await testChart.save();
-
-			clock.tick('01:00:00');
-
-			testChart.total = 100;
-
-			await testChart.resync();
-
-			const chartHours = await testChart.getChart('hour', 3, null);
-			const chartDays = await testChart.getChart('day', 3, null);
-
-			assert.deepStrictEqual(chartHours, {
-				foo: {
-					dec: [0, 0, 0],
-					inc: [0, 1, 0],
-					total: [100, 1, 0],
-				},
-			});
-
-			assert.deepStrictEqual(chartDays, {
-				foo: {
-					dec: [0, 0, 0],
-					inc: [1, 0, 0],
-					total: [100, 0, 0],
-				},
-			});
-		});
-	});
-});
diff --git a/packages/backend/test/endpoints.ts b/packages/backend/test/endpoints.ts
deleted file mode 100644
index 2aedc25f2c..0000000000
--- a/packages/backend/test/endpoints.ts
+++ /dev/null
@@ -1,865 +0,0 @@
-/*
-process.env.NODE_ENV = 'test';
-
-import * as assert from 'assert';
-import * as childProcess from 'child_process';
-import { async, signup, request, post, react, uploadFile, startServer, shutdownServer } from './utils.js';
-
-describe('API: Endpoints', () => {
-	let p: childProcess.ChildProcess;
-	let alice: any;
-	let bob: any;
-	let carol: any;
-
-	before(async () => {
-		p = await startServer();
-		alice = await signup({ username: 'alice' });
-		bob = await signup({ username: 'bob' });
-		carol = await signup({ username: 'carol' });
-	});
-
-	after(async () => {
-		await shutdownServer(p);
-	});
-
-	describe('signup', () => {
-		it('不正なユーザー名でアカウントが作成できない', async(async () => {
-			const res = await request('/signup', {
-				username: 'test.',
-				password: 'test'
-			});
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('空のパスワードでアカウントが作成できない', async(async () => {
-			const res = await request('/signup', {
-				username: 'test',
-				password: ''
-			});
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('正しくアカウントが作成できる', async(async () => {
-			const me = {
-				username: 'test1',
-				password: 'test1'
-			};
-
-			const res = await request('/signup', me);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			assert.strictEqual(res.body.username, me.username);
-		}));
-
-		it('同じユーザー名のアカウントは作成できない', async(async () => {
-			await signup({
-				username: 'test2'
-			});
-
-			const res = await request('/signup', {
-				username: 'test2',
-				password: 'test2'
-			});
-
-			assert.strictEqual(res.status, 400);
-		}));
-	});
-
-	describe('signin', () => {
-		it('間違ったパスワードでサインインできない', async(async () => {
-			await signup({
-				username: 'test3',
-				password: 'foo'
-			});
-
-			const res = await request('/signin', {
-				username: 'test3',
-				password: 'bar'
-			});
-
-			assert.strictEqual(res.status, 403);
-		}));
-
-		it('クエリをインジェクションできない', async(async () => {
-			await signup({
-				username: 'test4'
-			});
-
-			const res = await request('/signin', {
-				username: 'test4',
-				password: {
-					$gt: ''
-				}
-			});
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('正しい情報でサインインできる', async(async () => {
-			await signup({
-				username: 'test5',
-				password: 'foo'
-			});
-
-			const res = await request('/signin', {
-				username: 'test5',
-				password: 'foo'
-			});
-
-			assert.strictEqual(res.status, 200);
-		}));
-	});
-
-	describe('i/update', () => {
-		it('アカウント設定を更新できる', async(async () => {
-			const myName = '大室櫻子';
-			const myLocation = '七森中';
-			const myBirthday = '2000-09-07';
-
-			const res = await request('/i/update', {
-				name: myName,
-				location: myLocation,
-				birthday: myBirthday
-			}, alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			assert.strictEqual(res.body.name, myName);
-			assert.strictEqual(res.body.location, myLocation);
-			assert.strictEqual(res.body.birthday, myBirthday);
-		}));
-
-		it('名前を空白にできない', async(async () => {
-			const res = await request('/i/update', {
-				name: ' '
-			}, alice);
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('誕生日の設定を削除できる', async(async () => {
-			await request('/i/update', {
-				birthday: '2000-09-07'
-			}, alice);
-
-			const res = await request('/i/update', {
-				birthday: null
-			}, alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			assert.strictEqual(res.body.birthday, null);
-		}));
-
-		it('不正な誕生日の形式で怒られる', async(async () => {
-			const res = await request('/i/update', {
-				birthday: '2000/09/07'
-			}, alice);
-			assert.strictEqual(res.status, 400);
-		}));
-	});
-
-	describe('users/show', () => {
-		it('ユーザーが取得できる', async(async () => {
-			const res = await request('/users/show', {
-				userId: alice.id
-			}, alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			assert.strictEqual(res.body.id, alice.id);
-		}));
-
-		it('ユーザーが存在しなかったら怒る', async(async () => {
-			const res = await request('/users/show', {
-				userId: '000000000000000000000000'
-			});
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('間違ったIDで怒られる', async(async () => {
-			const res = await request('/users/show', {
-				userId: 'kyoppie'
-			});
-			assert.strictEqual(res.status, 400);
-		}));
-	});
-
-	describe('notes/show', () => {
-		it('投稿が取得できる', async(async () => {
-			const myPost = await post(alice, {
-				text: 'test'
-			});
-
-			const res = await request('/notes/show', {
-				noteId: myPost.id
-			}, alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			assert.strictEqual(res.body.id, myPost.id);
-			assert.strictEqual(res.body.text, myPost.text);
-		}));
-
-		it('投稿が存在しなかったら怒る', async(async () => {
-			const res = await request('/notes/show', {
-				noteId: '000000000000000000000000'
-			});
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('間違ったIDで怒られる', async(async () => {
-			const res = await request('/notes/show', {
-				noteId: 'kyoppie'
-			});
-			assert.strictEqual(res.status, 400);
-		}));
-	});
-
-	describe('notes/reactions/create', () => {
-		it('リアクションできる', async(async () => {
-			const bobPost = await post(bob);
-
-			const alice = await signup({ username: 'alice' });
-			const res = await request('/notes/reactions/create', {
-				noteId: bobPost.id,
-				reaction: '🚀',
-			}, alice);
-
-			assert.strictEqual(res.status, 204);
-
-			const resNote = await request('/notes/show', {
-				noteId: bobPost.id,
-			}, alice);
-
-			assert.strictEqual(resNote.status, 200);
-			assert.strictEqual(resNote.body.reactions['🚀'], [alice.id]);
-		}));
-
-		it('自分の投稿にもリアクションできる', async(async () => {
-			const myPost = await post(alice);
-
-			const res = await request('/notes/reactions/create', {
-				noteId: myPost.id,
-				reaction: '🚀',
-			}, alice);
-
-			assert.strictEqual(res.status, 204);
-		}));
-
-		it('二重にリアクションできない', async(async () => {
-			const bobPost = await post(bob);
-
-			await react(alice, bobPost, 'like');
-
-			const res = await request('/notes/reactions/create', {
-				noteId: bobPost.id,
-				reaction: '🚀',
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('存在しない投稿にはリアクションできない', async(async () => {
-			const res = await request('/notes/reactions/create', {
-				noteId: '000000000000000000000000',
-				reaction: '🚀',
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('空のパラメータで怒られる', async(async () => {
-			const res = await request('/notes/reactions/create', {}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('間違ったIDで怒られる', async(async () => {
-			const res = await request('/notes/reactions/create', {
-				noteId: 'kyoppie',
-				reaction: '🚀',
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-	});
-
-	describe('following/create', () => {
-		it('フォローできる', async(async () => {
-			const res = await request('/following/create', {
-				userId: alice.id
-			}, bob);
-
-			assert.strictEqual(res.status, 200);
-		}));
-
-		it('既にフォローしている場合は怒る', async(async () => {
-			const res = await request('/following/create', {
-				userId: alice.id
-			}, bob);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('存在しないユーザーはフォローできない', async(async () => {
-			const res = await request('/following/create', {
-				userId: '000000000000000000000000'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('自分自身はフォローできない', async(async () => {
-			const res = await request('/following/create', {
-				userId: alice.id
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('空のパラメータで怒られる', async(async () => {
-			const res = await request('/following/create', {}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('間違ったIDで怒られる', async(async () => {
-			const res = await request('/following/create', {
-				userId: 'foo'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-	});
-
-	describe('following/delete', () => {
-		it('フォロー解除できる', async(async () => {
-			await request('/following/create', {
-				userId: alice.id
-			}, bob);
-
-			const res = await request('/following/delete', {
-				userId: alice.id
-			}, bob);
-
-			assert.strictEqual(res.status, 200);
-		}));
-
-		it('フォローしていない場合は怒る', async(async () => {
-			const res = await request('/following/delete', {
-				userId: alice.id
-			}, bob);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('存在しないユーザーはフォロー解除できない', async(async () => {
-			const res = await request('/following/delete', {
-				userId: '000000000000000000000000'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('自分自身はフォロー解除できない', async(async () => {
-			const res = await request('/following/delete', {
-				userId: alice.id
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('空のパラメータで怒られる', async(async () => {
-			const res = await request('/following/delete', {}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('間違ったIDで怒られる', async(async () => {
-			const res = await request('/following/delete', {
-				userId: 'kyoppie'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-	});
-
-	describe('drive', () => {
-		it('ドライブ情報を取得できる', async(async () => {
-			await uploadFile({
-				userId: alice.id,
-				size: 256
-			});
-			await uploadFile({
-				userId: alice.id,
-				size: 512
-			});
-			await uploadFile({
-				userId: alice.id,
-				size: 1024
-			});
-			const res = await request('/drive', {}, alice);
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			expect(res.body).have.property('usage').eql(1792);
-		}));
-	});
-
-	describe('drive/files/create', () => {
-		it('ファイルを作成できる', async(async () => {
-			const res = await uploadFile(alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			assert.strictEqual(res.body.name, 'Lenna.png');
-		}));
-
-		it('ファイルに名前を付けられる', async(async () => {
-			const res = await assert.request(server)
-				.post('/drive/files/create')
-				.field('i', alice.token)
-				.field('name', 'Belmond.png')
-				.attach('file', fs.readFileSync(__dirname + '/resources/Lenna.png'), 'Lenna.png');
-
-			expect(res).have.status(200);
-			expect(res.body).be.a('object');
-			expect(res.body).have.property('name').eql('Belmond.png');
-		}));
-
-		it('ファイル無しで怒られる', async(async () => {
-			const res = await request('/drive/files/create', {}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('SVGファイルを作成できる', async(async () => {
-			const res = await uploadFile(alice, __dirname + '/resources/image.svg');
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			assert.strictEqual(res.body.name, 'image.svg');
-			assert.strictEqual(res.body.type, 'image/svg+xml');
-		}));
-	});
-
-	describe('drive/files/update', () => {
-		it('名前を更新できる', async(async () => {
-			const file = await uploadFile(alice);
-			const newName = 'いちごパスタ.png';
-
-			const res = await request('/drive/files/update', {
-				fileId: file.id,
-				name: newName
-			}, alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			assert.strictEqual(res.body.name, newName);
-		}));
-
-		it('他人のファイルは更新できない', async(async () => {
-			const file = await uploadFile(bob);
-
-			const res = await request('/drive/files/update', {
-				fileId: file.id,
-				name: 'いちごパスタ.png'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('親フォルダを更新できる', async(async () => {
-			const file = await uploadFile(alice);
-			const folder = (await request('/drive/folders/create', {
-				name: 'test'
-			}, alice)).body;
-
-			const res = await request('/drive/files/update', {
-				fileId: file.id,
-				folderId: folder.id
-			}, alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			assert.strictEqual(res.body.folderId, folder.id);
-		}));
-
-		it('親フォルダを無しにできる', async(async () => {
-			const file = await uploadFile(alice);
-
-			const folder = (await request('/drive/folders/create', {
-				name: 'test'
-			}, alice)).body;
-
-			await request('/drive/files/update', {
-				fileId: file.id,
-				folderId: folder.id
-			}, alice);
-
-			const res = await request('/drive/files/update', {
-				fileId: file.id,
-				folderId: null
-			}, alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			assert.strictEqual(res.body.folderId, null);
-		}));
-
-		it('他人のフォルダには入れられない', async(async () => {
-			const file = await uploadFile(alice);
-			const folder = (await request('/drive/folders/create', {
-				name: 'test'
-			}, bob)).body;
-
-			const res = await request('/drive/files/update', {
-				fileId: file.id,
-				folderId: folder.id
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('存在しないフォルダで怒られる', async(async () => {
-			const file = await uploadFile(alice);
-
-			const res = await request('/drive/files/update', {
-				fileId: file.id,
-				folderId: '000000000000000000000000'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('不正なフォルダIDで怒られる', async(async () => {
-			const file = await uploadFile(alice);
-
-			const res = await request('/drive/files/update', {
-				fileId: file.id,
-				folderId: 'foo'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('ファイルが存在しなかったら怒る', async(async () => {
-			const res = await request('/drive/files/update', {
-				fileId: '000000000000000000000000',
-				name: 'いちごパスタ.png'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('間違ったIDで怒られる', async(async () => {
-			const res = await request('/drive/files/update', {
-				fileId: 'kyoppie',
-				name: 'いちごパスタ.png'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-	});
-
-	describe('drive/folders/create', () => {
-		it('フォルダを作成できる', async(async () => {
-			const res = await request('/drive/folders/create', {
-				name: 'test'
-			}, alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			assert.strictEqual(res.body.name, 'test');
-		}));
-	});
-
-	describe('drive/folders/update', () => {
-		it('名前を更新できる', async(async () => {
-			const folder = (await request('/drive/folders/create', {
-				name: 'test'
-			}, alice)).body;
-
-			const res = await request('/drive/folders/update', {
-				folderId: folder.id,
-				name: 'new name'
-			}, alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			assert.strictEqual(res.body.name, 'new name');
-		}));
-
-		it('他人のフォルダを更新できない', async(async () => {
-			const folder = (await request('/drive/folders/create', {
-				name: 'test'
-			}, bob)).body;
-
-			const res = await request('/drive/folders/update', {
-				folderId: folder.id,
-				name: 'new name'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('親フォルダを更新できる', async(async () => {
-			const folder = (await request('/drive/folders/create', {
-				name: 'test'
-			}, alice)).body;
-			const parentFolder = (await request('/drive/folders/create', {
-				name: 'parent'
-			}, alice)).body;
-
-			const res = await request('/drive/folders/update', {
-				folderId: folder.id,
-				parentId: parentFolder.id
-			}, alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			assert.strictEqual(res.body.parentId, parentFolder.id);
-		}));
-
-		it('親フォルダを無しに更新できる', async(async () => {
-			const folder = (await request('/drive/folders/create', {
-				name: 'test'
-			}, alice)).body;
-			const parentFolder = (await request('/drive/folders/create', {
-				name: 'parent'
-			}, alice)).body;
-			await request('/drive/folders/update', {
-				folderId: folder.id,
-				parentId: parentFolder.id
-			}, alice);
-
-			const res = await request('/drive/folders/update', {
-				folderId: folder.id,
-				parentId: null
-			}, alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			assert.strictEqual(res.body.parentId, null);
-		}));
-
-		it('他人のフォルダを親フォルダに設定できない', async(async () => {
-			const folder = (await request('/drive/folders/create', {
-				name: 'test'
-			}, alice)).body;
-			const parentFolder = (await request('/drive/folders/create', {
-				name: 'parent'
-			}, bob)).body;
-
-			const res = await request('/drive/folders/update', {
-				folderId: folder.id,
-				parentId: parentFolder.id
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('フォルダが循環するような構造にできない', async(async () => {
-			const folder = (await request('/drive/folders/create', {
-				name: 'test'
-			}, alice)).body;
-			const parentFolder = (await request('/drive/folders/create', {
-				name: 'parent'
-			}, alice)).body;
-			await request('/drive/folders/update', {
-				folderId: parentFolder.id,
-				parentId: folder.id
-			}, alice);
-
-			const res = await request('/drive/folders/update', {
-				folderId: folder.id,
-				parentId: parentFolder.id
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('フォルダが循環するような構造にできない(再帰的)', async(async () => {
-			const folderA = (await request('/drive/folders/create', {
-				name: 'test'
-			}, alice)).body;
-			const folderB = (await request('/drive/folders/create', {
-				name: 'test'
-			}, alice)).body;
-			const folderC = (await request('/drive/folders/create', {
-				name: 'test'
-			}, alice)).body;
-			await request('/drive/folders/update', {
-				folderId: folderB.id,
-				parentId: folderA.id
-			}, alice);
-			await request('/drive/folders/update', {
-				folderId: folderC.id,
-				parentId: folderB.id
-			}, alice);
-
-			const res = await request('/drive/folders/update', {
-				folderId: folderA.id,
-				parentId: folderC.id
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('フォルダが循環するような構造にできない(自身)', async(async () => {
-			const folderA = (await request('/drive/folders/create', {
-				name: 'test'
-			}, alice)).body;
-
-			const res = await request('/drive/folders/update', {
-				folderId: folderA.id,
-				parentId: folderA.id
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('存在しない親フォルダを設定できない', async(async () => {
-			const folder = (await request('/drive/folders/create', {
-				name: 'test'
-			}, alice)).body;
-
-			const res = await request('/drive/folders/update', {
-				folderId: folder.id,
-				parentId: '000000000000000000000000'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('不正な親フォルダIDで怒られる', async(async () => {
-			const folder = (await request('/drive/folders/create', {
-				name: 'test'
-			}, alice)).body;
-
-			const res = await request('/drive/folders/update', {
-				folderId: folder.id,
-				parentId: 'foo'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('存在しないフォルダを更新できない', async(async () => {
-			const res = await request('/drive/folders/update', {
-				folderId: '000000000000000000000000'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('不正なフォルダIDで怒られる', async(async () => {
-			const res = await request('/drive/folders/update', {
-				folderId: 'foo'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-	});
-
-	describe('messaging/messages/create', () => {
-		it('メッセージを送信できる', async(async () => {
-			const res = await request('/messaging/messages/create', {
-				userId: bob.id,
-				text: 'test'
-			}, alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			assert.strictEqual(res.body.text, 'test');
-		}));
-
-		it('自分自身にはメッセージを送信できない', async(async () => {
-			const res = await request('/messaging/messages/create', {
-				userId: alice.id,
-				text: 'Yo'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('存在しないユーザーにはメッセージを送信できない', async(async () => {
-			const res = await request('/messaging/messages/create', {
-				userId: '000000000000000000000000',
-				text: 'test'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('不正なユーザーIDで怒られる', async(async () => {
-			const res = await request('/messaging/messages/create', {
-				userId: 'foo',
-				text: 'test'
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('テキストが無くて怒られる', async(async () => {
-			const res = await request('/messaging/messages/create', {
-				userId: bob.id
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('文字数オーバーで怒られる', async(async () => {
-			const res = await request('/messaging/messages/create', {
-				userId: bob.id,
-				text: '!'.repeat(1001)
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-	});
-
-	describe('notes/replies', () => {
-		it('自分に閲覧権限のない投稿は含まれない', async(async () => {
-			const alicePost = await post(alice, {
-				text: 'foo'
-			});
-
-			await post(bob, {
-				replyId: alicePost.id,
-				text: 'bar',
-				visibility: 'specified',
-				visibleUserIds: [alice.id]
-			});
-
-			const res = await request('/notes/replies', {
-				noteId: alicePost.id
-			}, carol);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(Array.isArray(res.body), true);
-			assert.strictEqual(res.body.length, 0);
-		}));
-	});
-
-	describe('notes/timeline', () => {
-		it('フォロワー限定投稿が含まれる', async(async () => {
-			await request('/following/create', {
-				userId: alice.id
-			}, bob);
-
-			const alicePost = await post(alice, {
-				text: 'foo',
-				visibility: 'followers'
-			});
-
-			const res = await request('/notes/timeline', {}, bob);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(Array.isArray(res.body), true);
-			assert.strictEqual(res.body.length, 1);
-			assert.strictEqual(res.body[0].id, alicePost.id);
-		}));
-	});
-});
-*/
diff --git a/packages/backend/test/extract-mentions.ts b/packages/backend/test/extract-mentions.ts
deleted file mode 100644
index 85afb098d8..0000000000
--- a/packages/backend/test/extract-mentions.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import * as assert from 'assert';
-
-import { parse } from 'mfm-js';
-import { extractMentions } from '../src/misc/extract-mentions.js';
-
-describe('Extract mentions', () => {
-	it('simple', () => {
-		const ast = parse('@foo @bar @baz')!;
-		const mentions = extractMentions(ast);
-		assert.deepStrictEqual(mentions, [{
-			username: 'foo',
-			acct: '@foo',
-			host: null,
-		}, {
-			username: 'bar',
-			acct: '@bar',
-			host: null,
-		}, {
-			username: 'baz',
-			acct: '@baz',
-			host: null,
-		}]);
-	});
-
-	it('nested', () => {
-		const ast = parse('@foo **@bar** @baz')!;
-		const mentions = extractMentions(ast);
-		assert.deepStrictEqual(mentions, [{
-			username: 'foo',
-			acct: '@foo',
-			host: null,
-		}, {
-			username: 'bar',
-			acct: '@bar',
-			host: null,
-		}, {
-			username: 'baz',
-			acct: '@baz',
-			host: null,
-		}]);
-	});
-});
diff --git a/packages/backend/test/fetch-resource.ts b/packages/backend/test/fetch-resource.ts
deleted file mode 100644
index ddb0e94b86..0000000000
--- a/packages/backend/test/fetch-resource.ts
+++ /dev/null
@@ -1,205 +0,0 @@
-process.env.NODE_ENV = 'test';
-
-import * as assert from 'assert';
-import * as childProcess from 'child_process';
-import * as openapi from '@redocly/openapi-core';
-import { async, startServer, signup, post, request, simpleGet, port, shutdownServer } from './utils.js';
-
-// Request Accept
-const ONLY_AP = 'application/activity+json';
-const PREFER_AP = 'application/activity+json, */*';
-const PREFER_HTML = 'text/html, */*';
-const UNSPECIFIED = '*/*';
-
-// Response Contet-Type
-const AP = 'application/activity+json; charset=utf-8';
-const JSON = 'application/json; charset=utf-8';
-const HTML = 'text/html; charset=utf-8';
-
-describe('Fetch resource', () => {
-	let p: childProcess.ChildProcess;
-
-	let alice: any;
-	let alicesPost: any;
-
-	before(async () => {
-		p = await startServer();
-		alice = await signup({ username: 'alice' });
-		alicesPost = await post(alice, {
-			text: 'test',
-		});
-	});
-
-	after(async () => {
-		await shutdownServer(p);
-	});
-
-	describe('Common', () => {
-		it('meta', async(async () => {
-			const res = await request('/meta', {
-			});
-
-			assert.strictEqual(res.status, 200);
-		}));
-
-		it('GET root', async(async () => {
-			const res = await simpleGet('/');
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, HTML);
-		}));
-
-		it('GET docs', async(async () => {
-			const res = await simpleGet('/docs/ja-JP/about');
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, HTML);
-		}));
-
-		it('GET api-doc', async(async () => {
-			const res = await simpleGet('/api-doc');
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, HTML);
-		}));
-
-		it('GET api.json', async(async () => {
-			const res = await simpleGet('/api.json');
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, JSON);
-		}));
-
-		it('Validate api.json', async(async () => {
-			const config = await openapi.loadConfig();
-			const result = await openapi.bundle({
-				config,
-				ref: `http://localhost:${port}/api.json`,
-			});
-
-			for (const problem of result.problems) {
-				console.log(`${problem.message} - ${problem.location[0]?.pointer}`);
-			}
-
-			assert.strictEqual(result.problems.length, 0);
-		}));
-
-		it('GET favicon.ico', async(async () => {
-			const res = await simpleGet('/favicon.ico');
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, 'image/x-icon');
-		}));
-
-		it('GET apple-touch-icon.png', async(async () => {
-			const res = await simpleGet('/apple-touch-icon.png');
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, 'image/png');
-		}));
-
-		it('GET twemoji svg', async(async () => {
-			const res = await simpleGet('/twemoji/2764.svg');
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, 'image/svg+xml');
-		}));
-
-		it('GET twemoji svg with hyphen', async(async () => {
-			const res = await simpleGet('/twemoji/2764-fe0f-200d-1f525.svg');
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, 'image/svg+xml');
-		}));
-	});
-
-	describe('/@:username', () => {
-		it('Only AP => AP', async(async () => {
-			const res = await simpleGet(`/@${alice.username}`, ONLY_AP);
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, AP);
-		}));
-
-		it('Prefer AP => AP', async(async () => {
-			const res = await simpleGet(`/@${alice.username}`, PREFER_AP);
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, AP);
-		}));
-
-		it('Prefer HTML => HTML', async(async () => {
-			const res = await simpleGet(`/@${alice.username}`, PREFER_HTML);
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, HTML);
-		}));
-
-		it('Unspecified => HTML', async(async () => {
-			const res = await simpleGet(`/@${alice.username}`, UNSPECIFIED);
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, HTML);
-		}));
-	});
-
-	describe('/users/:id', () => {
-		it('Only AP => AP', async(async () => {
-			const res = await simpleGet(`/users/${alice.id}`, ONLY_AP);
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, AP);
-		}));
-
-		it('Prefer AP => AP', async(async () => {
-			const res = await simpleGet(`/users/${alice.id}`, PREFER_AP);
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, AP);
-		}));
-
-		it('Prefer HTML => Redirect to /@:username', async(async () => {
-			const res = await simpleGet(`/users/${alice.id}`, PREFER_HTML);
-			assert.strictEqual(res.status, 302);
-			assert.strictEqual(res.location, `/@${alice.username}`);
-		}));
-
-		it('Undecided => HTML', async(async () => {
-			const res = await simpleGet(`/users/${alice.id}`, UNSPECIFIED);
-			assert.strictEqual(res.status, 302);
-			assert.strictEqual(res.location, `/@${alice.username}`);
-		}));
-	});
-
-	describe('/notes/:id', () => {
-		it('Only AP => AP', async(async () => {
-			const res = await simpleGet(`/notes/${alicesPost.id}`, ONLY_AP);
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, AP);
-		}));
-
-		it('Prefer AP => AP', async(async () => {
-			const res = await simpleGet(`/notes/${alicesPost.id}`, PREFER_AP);
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, AP);
-		}));
-
-		it('Prefer HTML => HTML', async(async () => {
-			const res = await simpleGet(`/notes/${alicesPost.id}`, PREFER_HTML);
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, HTML);
-		}));
-
-		it('Unspecified => HTML', async(async () => {
-			const res = await simpleGet(`/notes/${alicesPost.id}`, UNSPECIFIED);
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, HTML);
-		}));
-	});
-
-	describe('Feeds', () => {
-		it('RSS', async(async () => {
-			const res = await simpleGet(`/@${alice.username}.rss`, UNSPECIFIED);
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, 'application/rss+xml; charset=utf-8');
-		}));
-
-		it('ATOM', async(async () => {
-			const res = await simpleGet(`/@${alice.username}.atom`, UNSPECIFIED);
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, 'application/atom+xml; charset=utf-8');
-		}));
-
-		it('JSON', async(async () => {
-			const res = await simpleGet(`/@${alice.username}.json`, UNSPECIFIED);
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(res.type, 'application/json; charset=utf-8');
-		}));
-	});
-});
diff --git a/packages/backend/test/ff-visibility.ts b/packages/backend/test/ff-visibility.ts
deleted file mode 100644
index 4f6847be6d..0000000000
--- a/packages/backend/test/ff-visibility.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-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, simpleGet } from './utils.js';
-
-describe('FF visibility', () => {
-	let p: childProcess.ChildProcess;
-
-	let alice: any;
-	let bob: any;
-	let carol: any;
-
-	before(async () => {
-		p = await startServer();
-		alice = await signup({ username: 'alice' });
-		bob = await signup({ username: 'bob' });
-		carol = await signup({ username: 'carol' });
-	});
-
-	after(async () => {
-		await shutdownServer(p);
-	});
-
-	it('ffVisibility が public なユーザーのフォロー/フォロワーを誰でも見れる', async(async () => {
-		await request('/i/update', {
-			ffVisibility: 'public',
-		}, alice);
-
-		const followingRes = await request('/users/following', {
-			userId: alice.id,
-		}, bob);
-		const followersRes = await request('/users/followers', {
-			userId: alice.id,
-		}, bob);
-
-		assert.strictEqual(followingRes.status, 200);
-		assert.strictEqual(Array.isArray(followingRes.body), true);
-		assert.strictEqual(followersRes.status, 200);
-		assert.strictEqual(Array.isArray(followersRes.body), true);
-	}));
-
-	it('ffVisibility が followers なユーザーのフォロー/フォロワーを自分で見れる', async(async () => {
-		await request('/i/update', {
-			ffVisibility: 'followers',
-		}, alice);
-
-		const followingRes = await request('/users/following', {
-			userId: alice.id,
-		}, alice);
-		const followersRes = await request('/users/followers', {
-			userId: alice.id,
-		}, alice);
-
-		assert.strictEqual(followingRes.status, 200);
-		assert.strictEqual(Array.isArray(followingRes.body), true);
-		assert.strictEqual(followersRes.status, 200);
-		assert.strictEqual(Array.isArray(followersRes.body), true);
-	}));
-
-	it('ffVisibility が followers なユーザーのフォロー/フォロワーを非フォロワーが見れない', async(async () => {
-		await request('/i/update', {
-			ffVisibility: 'followers',
-		}, alice);
-
-		const followingRes = await request('/users/following', {
-			userId: alice.id,
-		}, bob);
-		const followersRes = await request('/users/followers', {
-			userId: alice.id,
-		}, bob);
-
-		assert.strictEqual(followingRes.status, 400);
-		assert.strictEqual(followersRes.status, 400);
-	}));
-
-	it('ffVisibility が followers なユーザーのフォロー/フォロワーをフォロワーが見れる', async(async () => {
-		await request('/i/update', {
-			ffVisibility: 'followers',
-		}, alice);
-
-		await request('/following/create', {
-			userId: alice.id,
-		}, bob);
-
-		const followingRes = await request('/users/following', {
-			userId: alice.id,
-		}, bob);
-		const followersRes = await request('/users/followers', {
-			userId: alice.id,
-		}, bob);
-
-		assert.strictEqual(followingRes.status, 200);
-		assert.strictEqual(Array.isArray(followingRes.body), true);
-		assert.strictEqual(followersRes.status, 200);
-		assert.strictEqual(Array.isArray(followersRes.body), true);
-	}));
-
-	it('ffVisibility が private なユーザーのフォロー/フォロワーを自分で見れる', async(async () => {
-		await request('/i/update', {
-			ffVisibility: 'private',
-		}, alice);
-
-		const followingRes = await request('/users/following', {
-			userId: alice.id,
-		}, alice);
-		const followersRes = await request('/users/followers', {
-			userId: alice.id,
-		}, alice);
-
-		assert.strictEqual(followingRes.status, 200);
-		assert.strictEqual(Array.isArray(followingRes.body), true);
-		assert.strictEqual(followersRes.status, 200);
-		assert.strictEqual(Array.isArray(followersRes.body), true);
-	}));
-
-	it('ffVisibility が private なユーザーのフォロー/フォロワーを他人が見れない', async(async () => {
-		await request('/i/update', {
-			ffVisibility: 'private',
-		}, alice);
-
-		const followingRes = await request('/users/following', {
-			userId: alice.id,
-		}, bob);
-		const followersRes = await request('/users/followers', {
-			userId: alice.id,
-		}, bob);
-
-		assert.strictEqual(followingRes.status, 400);
-		assert.strictEqual(followersRes.status, 400);
-	}));
-
-	describe('AP', () => {
-		it('ffVisibility が public 以外ならばAPからは取得できない', async(async () => {
-			{
-				await request('/i/update', {
-					ffVisibility: 'public',
-				}, alice);
-
-				const followingRes = await simpleGet(`/users/${alice.id}/following`, 'application/activity+json');
-				const followersRes = await simpleGet(`/users/${alice.id}/followers`, 'application/activity+json');
-				assert.strictEqual(followingRes.status, 200);
-				assert.strictEqual(followersRes.status, 200);
-			}
-			{
-				await request('/i/update', {
-					ffVisibility: 'followers',
-				}, alice);
-
-				const followingRes = await simpleGet(`/users/${alice.id}/following`, 'application/activity+json').catch(res => ({ status: res.statusCode }));
-				const followersRes = await simpleGet(`/users/${alice.id}/followers`, 'application/activity+json').catch(res => ({ status: res.statusCode }));
-				assert.strictEqual(followingRes.status, 403);
-				assert.strictEqual(followersRes.status, 403);
-			}
-			{
-				await request('/i/update', {
-					ffVisibility: 'private',
-				}, alice);
-
-				const followingRes = await simpleGet(`/users/${alice.id}/following`, 'application/activity+json').catch(res => ({ status: res.statusCode }));
-				const followersRes = await simpleGet(`/users/${alice.id}/followers`, 'application/activity+json').catch(res => ({ status: res.statusCode }));
-				assert.strictEqual(followingRes.status, 403);
-				assert.strictEqual(followersRes.status, 403);
-			}
-		}));
-	});
-});
diff --git a/packages/backend/test/get-file-info.ts b/packages/backend/test/get-file-info.ts
deleted file mode 100644
index 09378fec88..0000000000
--- a/packages/backend/test/get-file-info.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-import * as assert from 'assert';
-import { fileURLToPath } from 'node:url';
-import { dirname } from 'node:path';
-import { getFileInfo } from '../src/misc/get-file-info.js';
-import { async } from './utils.js';
-
-const _filename = fileURLToPath(import.meta.url);
-const _dirname = dirname(_filename);
-
-describe('Get file info', () => {
-	it('Empty file', async (async () => {
-		const path = `${_dirname}/resources/emptyfile`;
-		const info = await getFileInfo(path, { skipSensitiveDetection: true }) as any;
-		delete info.warnings;
-		delete info.blurhash;
-		delete info.sensitive;
-		delete info.porn;
-		assert.deepStrictEqual(info, {
-			size: 0,
-			md5: 'd41d8cd98f00b204e9800998ecf8427e',
-			type: {
-				mime: 'application/octet-stream',
-				ext: null,
-			},
-			width: undefined,
-			height: undefined,
-			orientation: undefined,
-		});
-	}));
-
-	it('Generic JPEG', async (async () => {
-		const path = `${_dirname}/resources/Lenna.jpg`;
-		const info = await getFileInfo(path, { skipSensitiveDetection: true }) as any;
-		delete info.warnings;
-		delete info.blurhash;
-		delete info.sensitive;
-		delete info.porn;
-		assert.deepStrictEqual(info, {
-			size: 25360,
-			md5: '091b3f259662aa31e2ffef4519951168',
-			type: {
-				mime: 'image/jpeg',
-				ext: 'jpg',
-			},
-			width: 512,
-			height: 512,
-			orientation: undefined,
-		});
-	}));
-
-	it('Generic APNG', async (async () => {
-		const path = `${_dirname}/resources/anime.png`;
-		const info = await getFileInfo(path, { skipSensitiveDetection: true }) as any;
-		delete info.warnings;
-		delete info.blurhash;
-		delete info.sensitive;
-		delete info.porn;
-		assert.deepStrictEqual(info, {
-			size: 1868,
-			md5: '08189c607bea3b952704676bb3c979e0',
-			type: {
-				mime: 'image/apng',
-				ext: 'apng',
-			},
-			width: 256,
-			height: 256,
-			orientation: undefined,
-		});
-	}));
-
-	it('Generic AGIF', async (async () => {
-		const path = `${_dirname}/resources/anime.gif`;
-		const info = await getFileInfo(path, { skipSensitiveDetection: true }) as any;
-		delete info.warnings;
-		delete info.blurhash;
-		delete info.sensitive;
-		delete info.porn;
-		assert.deepStrictEqual(info, {
-			size: 2248,
-			md5: '32c47a11555675d9267aee1a86571e7e',
-			type: {
-				mime: 'image/gif',
-				ext: 'gif',
-			},
-			width: 256,
-			height: 256,
-			orientation: undefined,
-		});
-	}));
-
-	it('PNG with alpha', async (async () => {
-		const path = `${_dirname}/resources/with-alpha.png`;
-		const info = await getFileInfo(path, { skipSensitiveDetection: true }) as any;
-		delete info.warnings;
-		delete info.blurhash;
-		delete info.sensitive;
-		delete info.porn;
-		assert.deepStrictEqual(info, {
-			size: 3772,
-			md5: 'f73535c3e1e27508885b69b10cf6e991',
-			type: {
-				mime: 'image/png',
-				ext: 'png',
-			},
-			width: 256,
-			height: 256,
-			orientation: undefined,
-		});
-	}));
-
-	it('Generic SVG', async (async () => {
-		const path = `${_dirname}/resources/image.svg`;
-		const info = await getFileInfo(path, { skipSensitiveDetection: true }) as any;
-		delete info.warnings;
-		delete info.blurhash;
-		delete info.sensitive;
-		delete info.porn;
-		assert.deepStrictEqual(info, {
-			size: 505,
-			md5: 'b6f52b4b021e7b92cdd04509c7267965',
-			type: {
-				mime: 'image/svg+xml',
-				ext: 'svg',
-			},
-			width: 256,
-			height: 256,
-			orientation: undefined,
-		});
-	}));
-
-	it('SVG with XML definition', async (async () => {
-		// https://github.com/misskey-dev/misskey/issues/4413
-		const path = `${_dirname}/resources/with-xml-def.svg`;
-		const info = await getFileInfo(path, { skipSensitiveDetection: true }) as any;
-		delete info.warnings;
-		delete info.blurhash;
-		delete info.sensitive;
-		delete info.porn;
-		assert.deepStrictEqual(info, {
-			size: 544,
-			md5: '4b7a346cde9ccbeb267e812567e33397',
-			type: {
-				mime: 'image/svg+xml',
-				ext: 'svg',
-			},
-			width: 256,
-			height: 256,
-			orientation: undefined,
-		});
-	}));
-
-	it('Dimension limit', async (async () => {
-		const path = `${_dirname}/resources/25000x25000.png`;
-		const info = await getFileInfo(path, { skipSensitiveDetection: true }) as any;
-		delete info.warnings;
-		delete info.blurhash;
-		delete info.sensitive;
-		delete info.porn;
-		assert.deepStrictEqual(info, {
-			size: 75933,
-			md5: '268c5dde99e17cf8fe09f1ab3f97df56',
-			type: {
-				mime: 'application/octet-stream',	// do not treat as image
-				ext: null,
-			},
-			width: 25000,
-			height: 25000,
-			orientation: undefined,
-		});
-	}));
-
-	it('Rotate JPEG', async (async () => {
-		const path = `${_dirname}/resources/rotate.jpg`;
-		const info = await getFileInfo(path, { skipSensitiveDetection: true }) as any;
-		delete info.warnings;
-		delete info.blurhash;
-		delete info.sensitive;
-		delete info.porn;
-		assert.deepStrictEqual(info, {
-			size: 12624,
-			md5: '68d5b2d8d1d1acbbce99203e3ec3857e',
-			type: {
-				mime: 'image/jpeg',
-				ext: 'jpg',
-			},
-			width: 512,
-			height: 256,
-			orientation: 8,
-		});
-	}));
-});
diff --git a/packages/backend/test/mfm.ts b/packages/backend/test/mfm.ts
deleted file mode 100644
index 5218942a5a..0000000000
--- a/packages/backend/test/mfm.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import * as assert from 'assert';
-import * as mfm from 'mfm-js';
-
-import { toHtml } from '../src/mfm/to-html.js';
-import { fromHtml } from '../src/mfm/from-html.js';
-
-describe('toHtml', () => {
-	it('br', () => {
-		const input = 'foo\nbar\nbaz';
-		const output = '<p><span>foo<br>bar<br>baz</span></p>';
-		assert.equal(toHtml(mfm.parse(input)), output);
-	});
-
-	it('br alt', () => {
-		const input = 'foo\r\nbar\rbaz';
-		const output = '<p><span>foo<br>bar<br>baz</span></p>';
-		assert.equal(toHtml(mfm.parse(input)), output);
-	});
-});
-
-describe('fromHtml', () => {
-	it('p', () => {
-		assert.deepStrictEqual(fromHtml('<p>a</p><p>b</p>'), 'a\n\nb');
-	});
-
-	it('block element', () => {
-		assert.deepStrictEqual(fromHtml('<div>a</div><div>b</div>'), 'a\nb');
-	});
-
-	it('inline element', () => {
-		assert.deepStrictEqual(fromHtml('<ul><li>a</li><li>b</li></ul>'), 'a\nb');
-	});
-
-	it('block code', () => {
-		assert.deepStrictEqual(fromHtml('<pre><code>a\nb</code></pre>'), '```\na\nb\n```');
-	});
-
-	it('inline code', () => {
-		assert.deepStrictEqual(fromHtml('<code>a</code>'), '`a`');
-	});
-
-	it('quote', () => {
-		assert.deepStrictEqual(fromHtml('<blockquote>a\nb</blockquote>'), '> a\n> b');
-	});
-
-	it('br', () => {
-		assert.deepStrictEqual(fromHtml('<p>abc<br><br/>d</p>'), 'abc\n\nd');
-	});
-
-	it('link with different text', () => {
-		assert.deepStrictEqual(fromHtml('<p>a <a href="https://example.com/b">c</a> d</p>'), 'a [c](https://example.com/b) d');
-	});
-
-	it('link with different text, but not encoded', () => {
-		assert.deepStrictEqual(fromHtml('<p>a <a href="https://example.com/ä">c</a> d</p>'), 'a [c](<https://example.com/ä>) d');
-	});
-
-	it('link with same text', () => {
-		assert.deepStrictEqual(fromHtml('<p>a <a href="https://example.com/b">https://example.com/b</a> d</p>'), 'a https://example.com/b d');
-	});
-
-	it('link with same text, but not encoded', () => {
-		assert.deepStrictEqual(fromHtml('<p>a <a href="https://example.com/ä">https://example.com/ä</a> d</p>'), 'a <https://example.com/ä> d');
-	});
-
-	it('link with no url', () => {
-		assert.deepStrictEqual(fromHtml('<p>a <a href="b">c</a> d</p>'), 'a [c](b) d');
-	});
-
-	it('link without href', () => {
-		assert.deepStrictEqual(fromHtml('<p>a <a>c</a> d</p>'), 'a c d');
-	});
-
-	it('link without text', () => {
-		assert.deepStrictEqual(fromHtml('<p>a <a href="https://example.com/b"></a> d</p>'), 'a https://example.com/b d');
-	});
-
-	it('link without both', () => {
-		assert.deepStrictEqual(fromHtml('<p>a <a></a> d</p>'), 'a  d');
-	});
-
-	it('mention', () => {
-		assert.deepStrictEqual(fromHtml('<p>a <a href="https://example.com/@user" class="u-url mention">@user</a> d</p>'), 'a @user@example.com d');
-	});
-
-	it('hashtag', () => {
-		assert.deepStrictEqual(fromHtml('<p>a <a href="https://example.com/tags/a">#a</a> d</p>', ['#a']), 'a #a d');
-	});
-});
diff --git a/packages/backend/test/mute.ts b/packages/backend/test/mute.ts
deleted file mode 100644
index 465633973c..0000000000
--- a/packages/backend/test/mute.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-process.env.NODE_ENV = 'test';
-
-import * as assert from 'assert';
-import * as childProcess from 'child_process';
-import { async, signup, request, post, react, startServer, shutdownServer, waitFire } from './utils.js';
-
-describe('Mute', () => {
-	let p: childProcess.ChildProcess;
-
-	// alice mutes carol
-	let alice: any;
-	let bob: any;
-	let carol: any;
-
-	before(async () => {
-		p = await startServer();
-		alice = await signup({ username: 'alice' });
-		bob = await signup({ username: 'bob' });
-		carol = await signup({ username: 'carol' });
-	});
-
-	after(async () => {
-		await shutdownServer(p);
-	});
-
-	it('ミュート作成', async(async () => {
-		const res = await request('/mute/create', {
-			userId: carol.id,
-		}, alice);
-
-		assert.strictEqual(res.status, 204);
-	}));
-
-	it('「自分宛ての投稿」にミュートしているユーザーの投稿が含まれない', async(async () => {
-		const bobNote = await post(bob, { text: '@alice hi' });
-		const carolNote = await post(carol, { text: '@alice hi' });
-
-		const res = await request('/notes/mentions', {}, alice);
-
-		assert.strictEqual(res.status, 200);
-		assert.strictEqual(Array.isArray(res.body), true);
-		assert.strictEqual(res.body.some((note: any) => note.id === bobNote.id), true);
-		assert.strictEqual(res.body.some((note: any) => note.id === carolNote.id), false);
-	}));
-
-	it('ミュートしているユーザーからメンションされても、hasUnreadMentions が true にならない', async(async () => {
-		// 状態リセット
-		await request('/i/read-all-unread-notes', {}, alice);
-
-		await post(carol, { text: '@alice hi' });
-
-		const res = await request('/i', {}, alice);
-
-		assert.strictEqual(res.status, 200);
-		assert.strictEqual(res.body.hasUnreadMentions, false);
-	}));
-
-	it('ミュートしているユーザーからメンションされても、ストリームに unreadMention イベントが流れてこない', async () => {
-		// 状態リセット
-		await request('/i/read-all-unread-notes', {}, alice);
-
-		const fired = await waitFire(alice, 'main', () => post(carol, { text: '@alice hi' }), msg => msg.type === 'unreadMention');
-
-		assert.strictEqual(fired, false);
-	});
-
-	it('ミュートしているユーザーからメンションされても、ストリームに unreadNotification イベントが流れてこない', async () => {
-		// 状態リセット
-		await request('/i/read-all-unread-notes', {}, alice);
-		await request('/notifications/mark-all-as-read', {}, alice);
-
-		const fired = await waitFire(alice, 'main', () => post(carol, { text: '@alice hi' }), msg => msg.type === 'unreadNotification');
-
-		assert.strictEqual(fired, false);
-	});
-
-	describe('Timeline', () => {
-		it('タイムラインにミュートしているユーザーの投稿が含まれない', async(async () => {
-			const aliceNote = await post(alice);
-			const bobNote = await post(bob);
-			const carolNote = await post(carol);
-
-			const res = await request('/notes/local-timeline', {}, alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(Array.isArray(res.body), true);
-			assert.strictEqual(res.body.some((note: any) => note.id === aliceNote.id), true);
-			assert.strictEqual(res.body.some((note: any) => note.id === bobNote.id), true);
-			assert.strictEqual(res.body.some((note: any) => note.id === carolNote.id), false);
-		}));
-
-		it('タイムラインにミュートしているユーザーの投稿のRenoteが含まれない', async(async () => {
-			const aliceNote = await post(alice);
-			const carolNote = await post(carol);
-			const bobNote = await post(bob, {
-				renoteId: carolNote.id,
-			});
-
-			const res = await request('/notes/local-timeline', {}, alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(Array.isArray(res.body), true);
-			assert.strictEqual(res.body.some((note: any) => note.id === aliceNote.id), true);
-			assert.strictEqual(res.body.some((note: any) => note.id === bobNote.id), false);
-			assert.strictEqual(res.body.some((note: any) => note.id === carolNote.id), false);
-		}));
-	});
-
-	describe('Notification', () => {
-		it('通知にミュートしているユーザーの通知が含まれない(リアクション)', async(async () => {
-			const aliceNote = await post(alice);
-			await react(bob, aliceNote, 'like');
-			await react(carol, aliceNote, 'like');
-
-			const res = await request('/i/notifications', {}, alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(Array.isArray(res.body), true);
-			assert.strictEqual(res.body.some((notification: any) => notification.userId === bob.id), true);
-			assert.strictEqual(res.body.some((notification: any) => notification.userId === carol.id), false);
-		}));
-	});
-});
diff --git a/packages/backend/test/note.ts b/packages/backend/test/note.ts
deleted file mode 100644
index b495d8b7bb..0000000000
--- a/packages/backend/test/note.ts
+++ /dev/null
@@ -1,370 +0,0 @@
-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, uploadUrl, startServer, shutdownServer, initTestDb, api } from './utils.js';
-
-describe('Note', () => {
-	let p: childProcess.ChildProcess;
-	let Notes: any;
-
-	let alice: any;
-	let bob: any;
-
-	before(async () => {
-		p = await startServer();
-		const connection = await initTestDb(true);
-		Notes = connection.getRepository(Note);
-		alice = await signup({ username: 'alice' });
-		bob = await signup({ username: 'bob' });
-	});
-
-	after(async () => {
-		await shutdownServer(p);
-	});
-
-	it('投稿できる', async(async () => {
-		const post = {
-			text: 'test',
-		};
-
-		const res = await request('/notes/create', post, alice);
-
-		assert.strictEqual(res.status, 200);
-		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-		assert.strictEqual(res.body.createdNote.text, post.text);
-	}));
-
-	it('ファイルを添付できる', async(async () => {
-		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],
-		}, alice);
-
-		assert.strictEqual(res.status, 200);
-		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-		assert.deepStrictEqual(res.body.createdNote.fileIds, [file.id]);
-	}));
-
-	it('他人のファイルは無視', async(async () => {
-		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',
-			fileIds: [file.id],
-		}, alice);
-
-		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 () => {
-		const res = await request('/notes/create', {
-			text: 'test',
-			fileIds: ['000000000000000000000000'],
-		}, alice);
-
-		assert.strictEqual(res.status, 200);
-		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-		assert.deepStrictEqual(res.body.createdNote.fileIds, []);
-	}));
-
-	it('不正なファイルIDは無視', async(async () => {
-		const res = await request('/notes/create', {
-			fileIds: ['kyoppie'],
-		}, alice);
-		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 () => {
-		const bobPost = await post(bob, {
-			text: 'foo',
-		});
-
-		const alicePost = {
-			text: 'bar',
-			replyId: bobPost.id,
-		};
-
-		const res = await request('/notes/create', alicePost, alice);
-
-		assert.strictEqual(res.status, 200);
-		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-		assert.strictEqual(res.body.createdNote.text, alicePost.text);
-		assert.strictEqual(res.body.createdNote.replyId, alicePost.replyId);
-		assert.strictEqual(res.body.createdNote.reply.text, bobPost.text);
-	}));
-
-	it('renoteできる', async(async () => {
-		const bobPost = await post(bob, {
-			text: 'test',
-		});
-
-		const alicePost = {
-			renoteId: bobPost.id,
-		};
-
-		const res = await request('/notes/create', alicePost, alice);
-
-		assert.strictEqual(res.status, 200);
-		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-		assert.strictEqual(res.body.createdNote.renoteId, alicePost.renoteId);
-		assert.strictEqual(res.body.createdNote.renote.text, bobPost.text);
-	}));
-
-	it('引用renoteできる', async(async () => {
-		const bobPost = await post(bob, {
-			text: 'test',
-		});
-
-		const alicePost = {
-			text: 'test',
-			renoteId: bobPost.id,
-		};
-
-		const res = await request('/notes/create', alicePost, alice);
-
-		assert.strictEqual(res.status, 200);
-		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-		assert.strictEqual(res.body.createdNote.text, alicePost.text);
-		assert.strictEqual(res.body.createdNote.renoteId, alicePost.renoteId);
-		assert.strictEqual(res.body.createdNote.renote.text, bobPost.text);
-	}));
-
-	it('文字数ぎりぎりで怒られない', async(async () => {
-		const post = {
-			text: '!'.repeat(3000),
-		};
-		const res = await request('/notes/create', post, alice);
-		assert.strictEqual(res.status, 200);
-	}));
-
-	it('文字数オーバーで怒られる', async(async () => {
-		const post = {
-			text: '!'.repeat(3001),
-		};
-		const res = await request('/notes/create', post, alice);
-		assert.strictEqual(res.status, 400);
-	}));
-
-	it('存在しないリプライ先で怒られる', async(async () => {
-		const post = {
-			text: 'test',
-			replyId: '000000000000000000000000',
-		};
-		const res = await request('/notes/create', post, alice);
-		assert.strictEqual(res.status, 400);
-	}));
-
-	it('存在しないrenote対象で怒られる', async(async () => {
-		const post = {
-			renoteId: '000000000000000000000000',
-		};
-		const res = await request('/notes/create', post, alice);
-		assert.strictEqual(res.status, 400);
-	}));
-
-	it('不正なリプライ先IDで怒られる', async(async () => {
-		const post = {
-			text: 'test',
-			replyId: 'foo',
-		};
-		const res = await request('/notes/create', post, alice);
-		assert.strictEqual(res.status, 400);
-	}));
-
-	it('不正なrenote対象IDで怒られる', async(async () => {
-		const post = {
-			renoteId: 'foo',
-		};
-		const res = await request('/notes/create', post, alice);
-		assert.strictEqual(res.status, 400);
-	}));
-
-	it('存在しないユーザーにメンションできる', async(async () => {
-		const post = {
-			text: '@ghost yo',
-		};
-
-		const res = await request('/notes/create', post, alice);
-
-		assert.strictEqual(res.status, 200);
-		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-		assert.strictEqual(res.body.createdNote.text, post.text);
-	}));
-
-	it('同じユーザーに複数メンションしても内部的にまとめられる', async(async () => {
-		const post = {
-			text: '@bob @bob @bob yo',
-		};
-
-		const res = await request('/notes/create', post, alice);
-
-		assert.strictEqual(res.status, 200);
-		assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-		assert.strictEqual(res.body.createdNote.text, post.text);
-
-		const noteDoc = await Notes.findOneBy({ id: res.body.createdNote.id });
-		assert.deepStrictEqual(noteDoc.mentions, [bob.id]);
-	}));
-
-	describe('notes/create', () => {
-		it('投票を添付できる', async(async () => {
-			const res = await request('/notes/create', {
-				text: 'test',
-				poll: {
-					choices: ['foo', 'bar'],
-				},
-			}, alice);
-
-			assert.strictEqual(res.status, 200);
-			assert.strictEqual(typeof res.body === 'object' && !Array.isArray(res.body), true);
-			assert.strictEqual(res.body.createdNote.poll != null, true);
-		}));
-
-		it('投票の選択肢が無くて怒られる', async(async () => {
-			const res = await request('/notes/create', {
-				poll: {},
-			}, alice);
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('投票の選択肢が無くて怒られる (空の配列)', async(async () => {
-			const res = await request('/notes/create', {
-				poll: {
-					choices: [],
-				},
-			}, alice);
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('投票の選択肢が1つで怒られる', async(async () => {
-			const res = await request('/notes/create', {
-				poll: {
-					choices: ['Strawberry Pasta'],
-				},
-			}, alice);
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('投票できる', async(async () => {
-			const { body } = await request('/notes/create', {
-				text: 'test',
-				poll: {
-					choices: ['sakura', 'izumi', 'ako'],
-				},
-			}, alice);
-
-			const res = await request('/notes/polls/vote', {
-				noteId: body.createdNote.id,
-				choice: 1,
-			}, alice);
-
-			assert.strictEqual(res.status, 204);
-		}));
-
-		it('複数投票できない', async(async () => {
-			const { body } = await request('/notes/create', {
-				text: 'test',
-				poll: {
-					choices: ['sakura', 'izumi', 'ako'],
-				},
-			}, alice);
-
-			await request('/notes/polls/vote', {
-				noteId: body.createdNote.id,
-				choice: 0,
-			}, alice);
-
-			const res = await request('/notes/polls/vote', {
-				noteId: body.createdNote.id,
-				choice: 2,
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-
-		it('許可されている場合は複数投票できる', async(async () => {
-			const { body } = await request('/notes/create', {
-				text: 'test',
-				poll: {
-					choices: ['sakura', 'izumi', 'ako'],
-					multiple: true,
-				},
-			}, alice);
-
-			await request('/notes/polls/vote', {
-				noteId: body.createdNote.id,
-				choice: 0,
-			}, alice);
-
-			await request('/notes/polls/vote', {
-				noteId: body.createdNote.id,
-				choice: 1,
-			}, alice);
-
-			const res = await request('/notes/polls/vote', {
-				noteId: body.createdNote.id,
-				choice: 2,
-			}, alice);
-
-			assert.strictEqual(res.status, 204);
-		}));
-
-		it('締め切られている場合は投票できない', async(async () => {
-			const { body } = await request('/notes/create', {
-				text: 'test',
-				poll: {
-					choices: ['sakura', 'izumi', 'ako'],
-					expiredAfter: 1,
-				},
-			}, alice);
-
-			await new Promise(x => setTimeout(x, 2));
-
-			const res = await request('/notes/polls/vote', {
-				noteId: body.createdNote.id,
-				choice: 1,
-			}, alice);
-
-			assert.strictEqual(res.status, 400);
-		}));
-	});
-
-	describe('notes/delete', () => {
-		it('delete a reply', async(async () => {
-			const mainNoteRes = await api('notes/create', {
-				text: 'main post',
-			}, alice);
-			const replyOneRes = await api('notes/create', {
-				text: 'reply one',
-				replyId: mainNoteRes.body.createdNote.id,
-			}, alice);
-			const replyTwoRes = await api('notes/create', {
-				text: 'reply two',
-				replyId: mainNoteRes.body.createdNote.id,
-			}, alice);
-
-			const deleteOneRes = await api('notes/delete', {
-				noteId: replyOneRes.body.createdNote.id,
-			}, alice);
-
-			assert.strictEqual(deleteOneRes.status, 204);
-			let mainNote = await Notes.findOneBy({ id: mainNoteRes.body.createdNote.id });
-			assert.strictEqual(mainNote.repliesCount, 1);
-
-			const deleteTwoRes = await api('notes/delete', {
-				noteId: replyTwoRes.body.createdNote.id,
-			}, alice);
-
-			assert.strictEqual(deleteTwoRes.status, 204);
-			mainNote = await Notes.findOneBy({ id: mainNoteRes.body.createdNote.id });
-			assert.strictEqual(mainNote.repliesCount, 0);
-		}));
-	});
-});
diff --git a/packages/backend/test/prelude/maybe.ts b/packages/backend/test/prelude/maybe.ts
index 0f4b00065f..c1ff63eada 100644
--- a/packages/backend/test/prelude/maybe.ts
+++ b/packages/backend/test/prelude/maybe.ts
@@ -1,5 +1,5 @@
 import * as assert from 'assert';
-import { just, nothing } from '../../src/prelude/maybe.js';
+import { just, nothing } from '../../src/misc/prelude/maybe.js';
 
 describe('just', () => {
 	it('has a value', () => {
diff --git a/packages/backend/test/prelude/url.ts b/packages/backend/test/prelude/url.ts
index df102c8dfe..574f2fffdb 100644
--- a/packages/backend/test/prelude/url.ts
+++ b/packages/backend/test/prelude/url.ts
@@ -1,5 +1,5 @@
 import * as assert from 'assert';
-import { query } from '../../src/prelude/url.js';
+import { query } from '../../src/misc/prelude/url.js';
 
 describe('url', () => {
 	it('query', () => {
diff --git a/packages/backend/test/reaction-lib.ts b/packages/backend/test/reaction-lib.ts
deleted file mode 100644
index 7c61dc76c2..0000000000
--- a/packages/backend/test/reaction-lib.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
-import * as assert from 'assert';
-
-import { toDbReaction } from '../src/misc/reaction-lib.js';
-
-describe('toDbReaction', async () => {
-	it('既存の文字列リアクションはそのまま', async () => {
-		assert.strictEqual(await toDbReaction('like'), 'like');
-	});
-
-	it('Unicodeプリンは寿司化不能とするため文字列化しない', async () => {
-		assert.strictEqual(await toDbReaction('🍮'), '🍮');
-	});
-
-	it('プリン以外の既存のリアクションは文字列化する like', async () => {
-		assert.strictEqual(await toDbReaction('👍'), 'like');
-	});
-
-	it('プリン以外の既存のリアクションは文字列化する love', async () => {
-		assert.strictEqual(await toDbReaction('❤️'), 'love');
-	});
-
-	it('プリン以外の既存のリアクションは文字列化する love 異体字セレクタなし', async () => {
-		assert.strictEqual(await toDbReaction('❤'), 'love');
-	});
-
-	it('プリン以外の既存のリアクションは文字列化する laugh', async () => {
-		assert.strictEqual(await toDbReaction('😆'), 'laugh');
-	});
-
-	it('プリン以外の既存のリアクションは文字列化する hmm', async () => {
-		assert.strictEqual(await toDbReaction('🤔'), 'hmm');
-	});
-
-	it('プリン以外の既存のリアクションは文字列化する surprise', async () => {
-		assert.strictEqual(await toDbReaction('😮'), 'surprise');
-	});
-
-	it('プリン以外の既存のリアクションは文字列化する congrats', async () => {
-		assert.strictEqual(await toDbReaction('🎉'), 'congrats');
-	});
-
-	it('プリン以外の既存のリアクションは文字列化する angry', async () => {
-		assert.strictEqual(await toDbReaction('💢'), 'angry');
-	});
-
-	it('プリン以外の既存のリアクションは文字列化する confused', async () => {
-		assert.strictEqual(await toDbReaction('😥'), 'confused');
-	});
-
-	it('プリン以外の既存のリアクションは文字列化する rip', async () => {
-		assert.strictEqual(await toDbReaction('😇'), 'rip');
-	});
-
-	it('それ以外はUnicodeのまま', async () => {
-		assert.strictEqual(await toDbReaction('🍅'), '🍅');
-	});
-
-	it('異体字セレクタ除去', async () => {
-		assert.strictEqual(await toDbReaction('㊗️'), '㊗');
-	});
-
-	it('異体字セレクタ除去 必要なし', async () => {
-		assert.strictEqual(await toDbReaction('㊗'), '㊗');
-	});
-
-	it('fallback - undefined', async () => {
-		assert.strictEqual(await toDbReaction(undefined), 'like');
-	});
-
-	it('fallback - null', async () => {
-		assert.strictEqual(await toDbReaction(null), 'like');
-	});
-
-	it('fallback - empty', async () => {
-		assert.strictEqual(await toDbReaction(''), 'like');
-	});
-
-	it('fallback - unknown', async () => {
-		assert.strictEqual(await toDbReaction('unknown'), 'like');
-	});
-});
-*/
diff --git a/packages/backend/test/streaming.ts b/packages/backend/test/streaming.ts
deleted file mode 100644
index 621d07f9c2..0000000000
--- a/packages/backend/test/streaming.ts
+++ /dev/null
@@ -1,545 +0,0 @@
-process.env.NODE_ENV = 'test';
-
-import * as assert from 'assert';
-import * as childProcess from 'child_process';
-import { Following } from '../src/models/entities/following.js';
-import { connectStream, signup, api, post, startServer, shutdownServer, initTestDb, waitFire } from './utils.js';
-
-describe('Streaming', () => {
-	let p: childProcess.ChildProcess;
-	let Followings: any;
-
-	const follow = async (follower: any, followee: any) => {
-		await Followings.save({
-			id: 'a',
-			createdAt: new Date(),
-			followerId: follower.id,
-			followeeId: followee.id,
-			followerHost: follower.host,
-			followerInbox: null,
-			followerSharedInbox: null,
-			followeeHost: followee.host,
-			followeeInbox: null,
-			followeeSharedInbox: null,
-		});
-	};
-
-	describe('Streaming', () => {
-		// Local users
-		let ayano: any;
-		let kyoko: any;
-		let chitose: any;
-
-		// Remote users
-		let akari: any;
-		let chinatsu: any;
-
-		let kyokoNote: any;
-		let list: any;
-
-		before(async () => {
-			p = await startServer();
-			const connection = await initTestDb(true);
-			Followings = connection.getRepository(Following);
-
-			ayano = await signup({ username: 'ayano' });
-			kyoko = await signup({ username: 'kyoko' });
-			chitose = await signup({ username: 'chitose' });
-
-			akari = await signup({ username: 'akari', host: 'example.com' });
-			chinatsu = await signup({ username: 'chinatsu', host: 'example.com' });
-
-			kyokoNote = await post(kyoko, { text: 'foo' });
-
-			// Follow: ayano => kyoko
-			await api('following/create', { userId: kyoko.id }, ayano);
-
-			// Follow: ayano => akari
-			await follow(ayano, akari);
-
-			// List: chitose => ayano, kyoko
-			list = await api('users/lists/create', {
-				name: 'my list',
-			}, chitose).then(x => x.body);
-
-			await api('users/lists/push', {
-				listId: list.id,
-				userId: ayano.id,
-			}, chitose);
-
-			await api('users/lists/push', {
-				listId: list.id,
-				userId: kyoko.id,
-			}, chitose);
-		});
-
-		after(async () => {
-			await shutdownServer(p);
-		});
-
-		describe('Events', () => {
-			it('mention event', async () => {
-				const fired = await waitFire(
-					kyoko, 'main',	// kyoko:main
-					() => post(ayano, { text: 'foo @kyoko bar' }),	// ayano mention => kyoko
-					msg => msg.type === 'mention' && msg.body.userId === ayano.id	// wait ayano
-				);
-
-				assert.strictEqual(fired, true);
-			});
-
-			it('renote event', async () => {
-				const fired = await waitFire(
-					kyoko, 'main',	// kyoko:main
-					() => post(ayano, { renoteId: kyokoNote.id }),	// ayano renote
-					msg => msg.type === 'renote' && msg.body.renoteId === kyokoNote.id	// wait renote
-				);
-
-				assert.strictEqual(fired, true);
-			});
-		});
-
-		describe('Home Timeline', () => {
-			it('自分の投稿が流れる', async () => {
-				const fired = await waitFire(
-					ayano, 'homeTimeline',	// ayano:Home
-					() => api('notes/create', { text: 'foo' }, ayano),	// ayano posts
-					msg => msg.type === 'note' && msg.body.text === 'foo'
-				);
-
-				assert.strictEqual(fired, true);
-			});
-
-			it('フォローしているユーザーの投稿が流れる', async () => {
-				const fired = await waitFire(
-					ayano, 'homeTimeline',		// ayano:home
-					() => api('notes/create', { text: 'foo' }, kyoko),	// kyoko posts
-					msg => msg.type === 'note' && msg.body.userId === kyoko.id	// wait kyoko
-				);
-
-				assert.strictEqual(fired, true);
-			});
-
-			it('フォローしていないユーザーの投稿は流れない', async () => {
-				const fired = await waitFire(
-					kyoko, 'homeTimeline',	// kyoko:home
-					() => api('notes/create', { text: 'foo' }, ayano),	// ayano posts
-					msg => msg.type === 'note' && msg.body.userId === ayano.id	// wait ayano
-				);
-
-				assert.strictEqual(fired, false);
-			});
-
-			it('フォローしているユーザーのダイレクト投稿が流れる', async () => {
-				const fired = await waitFire(
-					ayano, 'homeTimeline',	// ayano:home
-					() => api('notes/create', { text: 'foo', visibility: 'specified', visibleUserIds: [ayano.id], }, kyoko),	// kyoko dm => ayano
-					msg => msg.type === 'note' && msg.body.userId === kyoko.id	// wait kyoko
-				);
-
-				assert.strictEqual(fired, true);
-			});
-
-			it('フォローしているユーザーでも自分が指定されていないダイレクト投稿は流れない', async () => {
-				const fired = await waitFire(
-					ayano, 'homeTimeline',	// ayano:home
-					() => api('notes/create', { text: 'foo', visibility: 'specified', visibleUserIds: [chitose.id], }, kyoko),	// kyoko dm => chitose
-					msg => msg.type === 'note' && msg.body.userId === kyoko.id	// wait kyoko
-				);
-
-				assert.strictEqual(fired, false);
-			});
-		});	// Home
-
-		describe('Local Timeline', () => {
-			it('自分の投稿が流れる', async () => {
-				const fired = await waitFire(
-					ayano, 'localTimeline',	// ayano:Local
-					() => api('notes/create', { text: 'foo' }, ayano),	// ayano posts
-					msg => msg.type === 'note' && msg.body.text === 'foo'
-				);
-
-				assert.strictEqual(fired, true);
-			});
-
-			it('フォローしていないローカルユーザーの投稿が流れる', async () => {
-				const fired = await waitFire(
-					ayano, 'localTimeline',	// ayano:Local
-					() => api('notes/create', { text: 'foo' }, chitose),	// chitose posts
-					msg => msg.type === 'note' && msg.body.userId === chitose.id	// wait chitose
-				);
-
-				assert.strictEqual(fired, true);
-			});
-
-			it('リモートユーザーの投稿は流れない', async () => {
-				const fired = await waitFire(
-					ayano, 'localTimeline',	// ayano:Local
-					() => api('notes/create', { text: 'foo' }, chinatsu),	// chinatsu posts
-					msg => msg.type === 'note' && msg.body.userId === chinatsu.id	// wait chinatsu
-				);
-
-				assert.strictEqual(fired, false);
-			});
-
-			it('フォローしてたとしてもリモートユーザーの投稿は流れない', async () => {
-				const fired = await waitFire(
-					ayano, 'localTimeline',	// ayano:Local
-					() => api('notes/create', { text: 'foo' }, akari),	// akari posts
-					msg => msg.type === 'note' && msg.body.userId === akari.id	// wait akari
-				);
-
-				assert.strictEqual(fired, false);
-			});
-
-			it('ホーム指定の投稿は流れない', async () => {
-				const fired = await waitFire(
-					ayano, 'localTimeline',	// ayano:Local
-					() => api('notes/create', { text: 'foo', visibility: 'home' }, kyoko),	// kyoko home posts
-					msg => msg.type === 'note' && msg.body.userId === kyoko.id	// wait kyoko
-				);
-
-				assert.strictEqual(fired, false);
-			});
-
-			it('フォローしているローカルユーザーのダイレクト投稿は流れない', async () => {
-				const fired = await waitFire(
-					ayano, 'localTimeline',	// ayano:Local
-					() => api('notes/create', { text: 'foo', visibility: 'specified', visibleUserIds: [ayano.id] }, kyoko),	// kyoko DM => ayano
-					msg => msg.type === 'note' && msg.body.userId === kyoko.id	// wait kyoko
-				);
-
-				assert.strictEqual(fired, false);
-			});
-
-			it('フォローしていないローカルユーザーのフォロワー宛て投稿は流れない', async () => {
-				const fired = await waitFire(
-					ayano, 'localTimeline',	// ayano:Local
-					() => api('notes/create', { text: 'foo', visibility: 'followers' }, chitose),
-					msg => msg.type === 'note' && msg.body.userId === chitose.id	// wait chitose
-				);
-
-				assert.strictEqual(fired, false);
-			});
-		});
-
-		describe('Hybrid Timeline', () => {
-			it('自分の投稿が流れる', async () => {
-				const fired = await waitFire(
-					ayano, 'hybridTimeline',	// ayano:Hybrid
-					() => api('notes/create', { text: 'foo' }, ayano),	// ayano posts
-					msg => msg.type === 'note' && msg.body.text === 'foo'
-				);
-
-				assert.strictEqual(fired, true);
-			});
-
-			it('フォローしていないローカルユーザーの投稿が流れる', async () => {
-				const fired = await waitFire(
-					ayano, 'hybridTimeline',	// ayano:Hybrid
-					() => api('notes/create', { text: 'foo' }, chitose),	// chitose posts
-					msg => msg.type === 'note' && msg.body.userId === chitose.id	// wait chitose
-				);
-
-				assert.strictEqual(fired, true);
-			});
-
-			it('フォローしているリモートユーザーの投稿が流れる', async () => {
-				const fired = await waitFire(
-					ayano, 'hybridTimeline',	// ayano:Hybrid
-					() => api('notes/create', { text: 'foo' }, akari),	// akari posts
-					msg => msg.type === 'note' && msg.body.userId === akari.id	// wait akari
-				);
-
-				assert.strictEqual(fired, true);
-			});
-
-			it('フォローしていないリモートユーザーの投稿は流れない', async () => {
-				const fired = await waitFire(
-					ayano, 'hybridTimeline',	// ayano:Hybrid
-					() => api('notes/create', { text: 'foo' }, chinatsu),	// chinatsu posts
-					msg => msg.type === 'note' && msg.body.userId === chinatsu.id	// wait chinatsu
-				);
-
-				assert.strictEqual(fired, false);
-			});
-
-			it('フォローしているユーザーのダイレクト投稿が流れる', async () => {
-				const fired = await waitFire(
-					ayano, 'hybridTimeline',	// ayano:Hybrid
-					() => api('notes/create', { text: 'foo', visibility: 'specified', visibleUserIds: [ayano.id] }, kyoko),
-					msg => msg.type === 'note' && msg.body.userId === kyoko.id	// wait kyoko
-				);
-
-				assert.strictEqual(fired, true);
-			});
-
-			it('フォローしているユーザーのホーム投稿が流れる', async () => {
-				const fired = await waitFire(
-					ayano, 'hybridTimeline',	// ayano:Hybrid
-					() => api('notes/create', { text: 'foo', visibility: 'home' }, kyoko),
-					msg => msg.type === 'note' && msg.body.userId === kyoko.id	// wait kyoko
-				);
-
-				assert.strictEqual(fired, true);
-			});
-
-			it('フォローしていないローカルユーザーのホーム投稿は流れない', async () => {
-				const fired = await waitFire(
-					ayano, 'hybridTimeline',	// ayano:Hybrid
-					() => api('notes/create', { text: 'foo', visibility: 'home' }, chitose),
-					msg => msg.type === 'note' && msg.body.userId === chitose.id
-				);
-
-				assert.strictEqual(fired, false);
-			});
-
-			it('フォローしていないローカルユーザーのフォロワー宛て投稿は流れない', () => async () => {
-				const fired = await waitFire(
-					ayano, 'hybridTimeline',	// ayano:Hybrid
-					() => api('notes/create', { text: 'foo', visibility: 'followers' }, chitose),
-					msg => msg.type === 'note' && msg.body.userId === chitose.id
-				);
-
-				assert.strictEqual(fired, false);
-			});
-		});
-
-		describe('Global Timeline', () => {
-			it('フォローしていないローカルユーザーの投稿が流れる', () => async () => {
-				const fired = await waitFire(
-					ayano, 'globalTimeline',	// ayano:Global
-					() => api('notes/create', { text: 'foo' }, chitose),	// chitose posts
-					msg => msg.type === 'note' && msg.body.userId === chitose.id	// wait chitose
-				);
-
-				assert.strictEqual(fired, true);
-			});
-
-			it('フォローしていないリモートユーザーの投稿が流れる', () => async () => {
-				const fired = await waitFire(
-					ayano, 'globalTimeline',	// ayano:Global
-					() => api('notes/create', { text: 'foo' }, chinatsu),	// chinatsu posts
-					msg => msg.type === 'note' && msg.body.userId === chinatsu.id	// wait chinatsu
-				);
-
-				assert.strictEqual(fired, true);
-			});
-
-			it('ホーム投稿は流れない', () => async () => {
-				const fired = await waitFire(
-					ayano, 'globalTimeline',	// ayano:Global
-					() => api('notes/create', { text: 'foo', visibility: 'home' }, kyoko),	// kyoko posts
-					msg => msg.type === 'note' && msg.body.userId === kyoko.id	// wait kyoko
-				);
-
-				assert.strictEqual(fired, false);
-			});
-		});
-
-		describe('UserList Timeline', () => {
-			it('リストに入れているユーザーの投稿が流れる', () => async () => {
-				const fired = await waitFire(
-					chitose, 'userList',
-					() => api('notes/create', { text: 'foo' }, ayano),
-					msg => msg.type === 'note' && msg.body.userId === ayano.id,
-					{ listId: list.id, }
-				);
-
-				assert.strictEqual(fired, true);
-			});
-
-			it('リストに入れていないユーザーの投稿は流れない', () => async () => {
-				const fired = await waitFire(
-					chitose, 'userList',
-					() => api('notes/create', { text: 'foo' }, chinatsu),
-					msg => msg.type === 'note' && msg.body.userId === chinatsu.id,
-					{ listId: list.id, }
-				);
-
-				assert.strictEqual(fired, false);
-			});
-
-			// #4471
-			it('リストに入れているユーザーのダイレクト投稿が流れる', () => async () => {
-				const fired = await waitFire(
-					chitose, 'userList',
-					() => api('notes/create', { text: 'foo', visibility: 'specified', visibleUserIds: [chitose.id] }, ayano),
-					msg => msg.type === 'note' && msg.body.userId === ayano.id,
-					{ listId: list.id, }
-				);
-
-				assert.strictEqual(fired, true);
-			});
-
-			// #4335
-			it('リストに入れているがフォローはしてないユーザーのフォロワー宛て投稿は流れない', () => async () => {
-				const fired = await waitFire(
-					chitose, 'userList',
-					() => api('notes/create', { text: 'foo', visibility: 'followers' }, kyoko),
-					msg => msg.type === 'note' && msg.body.userId === kyoko.id,
-					{ listId: list.id, }
-				);
-
-				assert.strictEqual(fired, false);
-			});
-		});
-
-		describe('Hashtag Timeline', () => {
-			it('指定したハッシュタグの投稿が流れる', () => new Promise<void>(async done => {
-				const ws = await connectStream(chitose, 'hashtag', ({ type, body }) => {
-					if (type == 'note') {
-						assert.deepStrictEqual(body.text, '#foo');
-						ws.close();
-						done();
-					}
-				}, {
-					q: [
-						['foo'],
-					],
-				});
-
-				post(chitose, {
-					text: '#foo',
-				});
-			}));
-
-			it('指定したハッシュタグの投稿が流れる (AND)', () => new Promise<void>(async done => {
-				let fooCount = 0;
-				let barCount = 0;
-				let fooBarCount = 0;
-	
-				const ws = await connectStream(chitose, 'hashtag', ({ type, body }) => {
-					if (type == 'note') {
-						if (body.text === '#foo') fooCount++;
-						if (body.text === '#bar') barCount++;
-						if (body.text === '#foo #bar') fooBarCount++;
-					}
-				}, {
-					q: [
-						['foo', 'bar'],
-					],
-				});
-	
-				post(chitose, {
-					text: '#foo',
-				});
-	
-				post(chitose, {
-					text: '#bar',
-				});
-	
-				post(chitose, {
-					text: '#foo #bar',
-				});
-	
-				setTimeout(() => {
-					assert.strictEqual(fooCount, 0);
-					assert.strictEqual(barCount, 0);
-					assert.strictEqual(fooBarCount, 1);
-					ws.close();
-					done();
-				}, 3000);
-			}));
-
-			it('指定したハッシュタグの投稿が流れる (OR)', () => new Promise<void>(async done => {
-				let fooCount = 0;
-				let barCount = 0;
-				let fooBarCount = 0;
-				let piyoCount = 0;
-
-				const ws = await connectStream(chitose, 'hashtag', ({ type, body }) => {
-					if (type == 'note') {
-						if (body.text === '#foo') fooCount++;
-						if (body.text === '#bar') barCount++;
-						if (body.text === '#foo #bar') fooBarCount++;
-						if (body.text === '#piyo') piyoCount++;
-					}
-				}, {
-					q: [
-						['foo'],
-						['bar'],
-					],
-				});
-
-				post(chitose, {
-					text: '#foo',
-				});
-
-				post(chitose, {
-					text: '#bar',
-				});
-
-				post(chitose, {
-					text: '#foo #bar',
-				});
-
-				post(chitose, {
-					text: '#piyo',
-				});
-
-				setTimeout(() => {
-					assert.strictEqual(fooCount, 1);
-					assert.strictEqual(barCount, 1);
-					assert.strictEqual(fooBarCount, 1);
-					assert.strictEqual(piyoCount, 0);
-					ws.close();
-					done();
-				}, 3000);
-			}));
-
-			it('指定したハッシュタグの投稿が流れる (AND + OR)', () => new Promise<void>(async done => {
-				let fooCount = 0;
-				let barCount = 0;
-				let fooBarCount = 0;
-				let piyoCount = 0;
-				let waaaCount = 0;
-
-				const ws = await connectStream(chitose, 'hashtag', ({ type, body }) => {
-					if (type == 'note') {
-						if (body.text === '#foo') fooCount++;
-						if (body.text === '#bar') barCount++;
-						if (body.text === '#foo #bar') fooBarCount++;
-						if (body.text === '#piyo') piyoCount++;
-						if (body.text === '#waaa') waaaCount++;
-					}
-				}, {
-					q: [
-						['foo', 'bar'],
-						['piyo'],
-					],
-				});
-
-				post(chitose, {
-					text: '#foo',
-				});
-
-				post(chitose, {
-					text: '#bar',
-				});
-
-				post(chitose, {
-					text: '#foo #bar',
-				});
-
-				post(chitose, {
-					text: '#piyo',
-				});
-
-				post(chitose, {
-					text: '#waaa',
-				});
-
-				setTimeout(() => {
-					assert.strictEqual(fooCount, 0);
-					assert.strictEqual(barCount, 0);
-					assert.strictEqual(fooBarCount, 1);
-					assert.strictEqual(piyoCount, 1);
-					assert.strictEqual(waaaCount, 0);
-					ws.close();
-					done();
-				}, 3000);
-			}));
-		});
-	});
-});
diff --git a/packages/backend/test/tests/activitypub.ts b/packages/backend/test/tests/activitypub.ts
new file mode 100644
index 0000000000..6f549ca9c2
--- /dev/null
+++ b/packages/backend/test/tests/activitypub.ts
@@ -0,0 +1,89 @@
+process.env.NODE_ENV = 'test';
+
+import * as assert from 'assert';
+import rndstr from 'rndstr';
+
+describe('ActivityPub', () => {
+	describe('Parse minimum object', () => {
+		const host = 'https://host1.test';
+		const preferredUsername = `${rndstr('A-Z', 4)}${rndstr('a-z', 4)}`;
+		const actorId = `${host}/users/${preferredUsername.toLowerCase()}`;
+
+		const actor = {
+			'@context': 'https://www.w3.org/ns/activitystreams',
+			id: actorId,
+			type: 'Person',
+			preferredUsername,
+			inbox: `${actorId}/inbox`,
+			outbox: `${actorId}/outbox`,
+		};
+
+		const post = {
+			'@context': 'https://www.w3.org/ns/activitystreams',
+			id: `${host}/users/${rndstr('0-9a-z', 8)}`,
+			type: 'Note',
+			attributedTo: actor.id,
+			to: 'https://www.w3.org/ns/activitystreams#Public',
+			content: 'あ',
+		};
+
+		it('Minimum Actor', async () => {
+			const { MockResolver } = await import('../misc/mock-resolver.js');
+			const { createPerson } = await import('../../src/remote/activitypub/models/person.js');
+
+			const resolver = new MockResolver();
+			resolver._register(actor.id, actor);
+
+			const user = await createPerson(actor.id, resolver);
+
+			assert.deepStrictEqual(user.uri, actor.id);
+			assert.deepStrictEqual(user.username, actor.preferredUsername);
+			assert.deepStrictEqual(user.inbox, actor.inbox);
+		});
+
+		it('Minimum Note', async () => {
+			const { MockResolver } = await import('../misc/mock-resolver.js');
+			const { createNote } = await import('../../src/remote/activitypub/models/note.js');
+
+			const resolver = new MockResolver();
+			resolver._register(actor.id, actor);
+			resolver._register(post.id, post);
+
+			const note = await createNote(post.id, resolver, true);
+
+			assert.deepStrictEqual(note?.uri, post.id);
+			assert.deepStrictEqual(note.visibility, 'public');
+			assert.deepStrictEqual(note.text, post.content);
+		});
+	});
+
+	describe('Truncate long name', () => {
+		const host = 'https://host1.test';
+		const preferredUsername = `${rndstr('A-Z', 4)}${rndstr('a-z', 4)}`;
+		const actorId = `${host}/users/${preferredUsername.toLowerCase()}`;
+
+		const name = rndstr('0-9a-z', 129);
+
+		const actor = {
+			'@context': 'https://www.w3.org/ns/activitystreams',
+			id: actorId,
+			type: 'Person',
+			preferredUsername,
+			name,
+			inbox: `${actorId}/inbox`,
+			outbox: `${actorId}/outbox`,
+		};
+
+		it('Actor', async () => {
+			const { MockResolver } = await import('../misc/mock-resolver.js');
+			const { createPerson } = await import('../../src/remote/activitypub/models/person.js');
+
+			const resolver = new MockResolver();
+			resolver._register(actor.id, actor);
+
+			const user = await createPerson(actor.id, resolver);
+
+			assert.deepStrictEqual(user.name, actor.name.substr(0, 128));
+		});
+	});
+});
diff --git a/packages/backend/test/tests/ap-request.ts b/packages/backend/test/tests/ap-request.ts
new file mode 100644
index 0000000000..2499b86e83
--- /dev/null
+++ b/packages/backend/test/tests/ap-request.ts
@@ -0,0 +1,55 @@
+import * as assert from 'assert';
+import httpSignature from 'http-signature';
+import { genRsaKeyPair } from '../../src/misc/gen-key-pair.js';
+import { createSignedPost, createSignedGet } from '../../src/remote/activitypub/ap-request.js';
+
+export const buildParsedSignature = (signingString: string, signature: string, algorithm: string) => {
+	return {
+		scheme: 'Signature',
+		params: {
+			keyId: 'KeyID',	// dummy, not used for verify
+			algorithm: algorithm,
+			headers: [ '(request-target)', 'date', 'host', 'digest' ],	// dummy, not used for verify
+			signature: signature,
+		},
+		signingString: signingString,
+		algorithm: algorithm.toUpperCase(),
+		keyId: 'KeyID',	// dummy, not used for verify
+	};
+};
+
+describe('ap-request', () => {
+	it('createSignedPost with verify', async () => {
+		const keypair = await genRsaKeyPair();
+		const key = { keyId: 'x', 'privateKeyPem': keypair.privateKey };
+		const url = 'https://example.com/inbox';
+		const activity = { a: 1 };
+		const body = JSON.stringify(activity);
+		const headers = {
+			'User-Agent': 'UA',
+		};
+
+		const req = createSignedPost({ key, url, body, additionalHeaders: headers });
+
+		const parsed = buildParsedSignature(req.signingString, req.signature, 'rsa-sha256');
+
+		const result = httpSignature.verifySignature(parsed, keypair.publicKey);
+		assert.deepStrictEqual(result, true);
+	});
+
+	it('createSignedGet with verify', async () => {
+		const keypair = await genRsaKeyPair();
+		const key = { keyId: 'x', 'privateKeyPem': keypair.privateKey };
+		const url = 'https://example.com/outbox';
+		const headers = {
+			'User-Agent': 'UA',
+		};
+
+		const req = createSignedGet({ key, url, additionalHeaders: headers });
+
+		const parsed = buildParsedSignature(req.signingString, req.signature, 'rsa-sha256');
+
+		const result = httpSignature.verifySignature(parsed, keypair.publicKey);
+		assert.deepStrictEqual(result, true);
+	});
+});
diff --git a/packages/backend/test/tests/extract-mentions.ts b/packages/backend/test/tests/extract-mentions.ts
new file mode 100644
index 0000000000..4f9cb68763
--- /dev/null
+++ b/packages/backend/test/tests/extract-mentions.ts
@@ -0,0 +1,42 @@
+import * as assert from 'assert';
+
+import { parse } from 'mfm-js';
+import { extractMentions } from '../../src/misc/extract-mentions.js';
+
+describe('Extract mentions', () => {
+	it('simple', () => {
+		const ast = parse('@foo @bar @baz')!;
+		const mentions = extractMentions(ast);
+		assert.deepStrictEqual(mentions, [{
+			username: 'foo',
+			acct: '@foo',
+			host: null,
+		}, {
+			username: 'bar',
+			acct: '@bar',
+			host: null,
+		}, {
+			username: 'baz',
+			acct: '@baz',
+			host: null,
+		}]);
+	});
+
+	it('nested', () => {
+		const ast = parse('@foo **@bar** @baz')!;
+		const mentions = extractMentions(ast);
+		assert.deepStrictEqual(mentions, [{
+			username: 'foo',
+			acct: '@foo',
+			host: null,
+		}, {
+			username: 'bar',
+			acct: '@bar',
+			host: null,
+		}, {
+			username: 'baz',
+			acct: '@baz',
+			host: null,
+		}]);
+	});
+});
diff --git a/packages/backend/test/tests/mfm.ts b/packages/backend/test/tests/mfm.ts
new file mode 100644
index 0000000000..5087e84a1a
--- /dev/null
+++ b/packages/backend/test/tests/mfm.ts
@@ -0,0 +1,89 @@
+import * as assert from 'assert';
+import * as mfm from 'mfm-js';
+
+import { toHtml } from '../../src/mfm/to-html.js';
+import { fromHtml } from '../../src/mfm/from-html.js';
+
+describe('toHtml', () => {
+	it('br', () => {
+		const input = 'foo\nbar\nbaz';
+		const output = '<p><span>foo<br>bar<br>baz</span></p>';
+		assert.equal(toHtml(mfm.parse(input)), output);
+	});
+
+	it('br alt', () => {
+		const input = 'foo\r\nbar\rbaz';
+		const output = '<p><span>foo<br>bar<br>baz</span></p>';
+		assert.equal(toHtml(mfm.parse(input)), output);
+	});
+});
+
+describe('fromHtml', () => {
+	it('p', () => {
+		assert.deepStrictEqual(fromHtml('<p>a</p><p>b</p>'), 'a\n\nb');
+	});
+
+	it('block element', () => {
+		assert.deepStrictEqual(fromHtml('<div>a</div><div>b</div>'), 'a\nb');
+	});
+
+	it('inline element', () => {
+		assert.deepStrictEqual(fromHtml('<ul><li>a</li><li>b</li></ul>'), 'a\nb');
+	});
+
+	it('block code', () => {
+		assert.deepStrictEqual(fromHtml('<pre><code>a\nb</code></pre>'), '```\na\nb\n```');
+	});
+
+	it('inline code', () => {
+		assert.deepStrictEqual(fromHtml('<code>a</code>'), '`a`');
+	});
+
+	it('quote', () => {
+		assert.deepStrictEqual(fromHtml('<blockquote>a\nb</blockquote>'), '> a\n> b');
+	});
+
+	it('br', () => {
+		assert.deepStrictEqual(fromHtml('<p>abc<br><br/>d</p>'), 'abc\n\nd');
+	});
+
+	it('link with different text', () => {
+		assert.deepStrictEqual(fromHtml('<p>a <a href="https://example.com/b">c</a> d</p>'), 'a [c](https://example.com/b) d');
+	});
+
+	it('link with different text, but not encoded', () => {
+		assert.deepStrictEqual(fromHtml('<p>a <a href="https://example.com/ä">c</a> d</p>'), 'a [c](<https://example.com/ä>) d');
+	});
+
+	it('link with same text', () => {
+		assert.deepStrictEqual(fromHtml('<p>a <a href="https://example.com/b">https://example.com/b</a> d</p>'), 'a https://example.com/b d');
+	});
+
+	it('link with same text, but not encoded', () => {
+		assert.deepStrictEqual(fromHtml('<p>a <a href="https://example.com/ä">https://example.com/ä</a> d</p>'), 'a <https://example.com/ä> d');
+	});
+
+	it('link with no url', () => {
+		assert.deepStrictEqual(fromHtml('<p>a <a href="b">c</a> d</p>'), 'a [c](b) d');
+	});
+
+	it('link without href', () => {
+		assert.deepStrictEqual(fromHtml('<p>a <a>c</a> d</p>'), 'a c d');
+	});
+
+	it('link without text', () => {
+		assert.deepStrictEqual(fromHtml('<p>a <a href="https://example.com/b"></a> d</p>'), 'a https://example.com/b d');
+	});
+
+	it('link without both', () => {
+		assert.deepStrictEqual(fromHtml('<p>a <a></a> d</p>'), 'a  d');
+	});
+
+	it('mention', () => {
+		assert.deepStrictEqual(fromHtml('<p>a <a href="https://example.com/@user" class="u-url mention">@user</a> d</p>'), 'a @user@example.com d');
+	});
+
+	it('hashtag', () => {
+		assert.deepStrictEqual(fromHtml('<p>a <a href="https://example.com/tags/a">#a</a> d</p>', ['#a']), 'a #a d');
+	});
+});
diff --git a/packages/backend/test/tests/reaction-lib.ts b/packages/backend/test/tests/reaction-lib.ts
new file mode 100644
index 0000000000..7c61dc76c2
--- /dev/null
+++ b/packages/backend/test/tests/reaction-lib.ts
@@ -0,0 +1,83 @@
+/*
+import * as assert from 'assert';
+
+import { toDbReaction } from '../src/misc/reaction-lib.js';
+
+describe('toDbReaction', async () => {
+	it('既存の文字列リアクションはそのまま', async () => {
+		assert.strictEqual(await toDbReaction('like'), 'like');
+	});
+
+	it('Unicodeプリンは寿司化不能とするため文字列化しない', async () => {
+		assert.strictEqual(await toDbReaction('🍮'), '🍮');
+	});
+
+	it('プリン以外の既存のリアクションは文字列化する like', async () => {
+		assert.strictEqual(await toDbReaction('👍'), 'like');
+	});
+
+	it('プリン以外の既存のリアクションは文字列化する love', async () => {
+		assert.strictEqual(await toDbReaction('❤️'), 'love');
+	});
+
+	it('プリン以外の既存のリアクションは文字列化する love 異体字セレクタなし', async () => {
+		assert.strictEqual(await toDbReaction('❤'), 'love');
+	});
+
+	it('プリン以外の既存のリアクションは文字列化する laugh', async () => {
+		assert.strictEqual(await toDbReaction('😆'), 'laugh');
+	});
+
+	it('プリン以外の既存のリアクションは文字列化する hmm', async () => {
+		assert.strictEqual(await toDbReaction('🤔'), 'hmm');
+	});
+
+	it('プリン以外の既存のリアクションは文字列化する surprise', async () => {
+		assert.strictEqual(await toDbReaction('😮'), 'surprise');
+	});
+
+	it('プリン以外の既存のリアクションは文字列化する congrats', async () => {
+		assert.strictEqual(await toDbReaction('🎉'), 'congrats');
+	});
+
+	it('プリン以外の既存のリアクションは文字列化する angry', async () => {
+		assert.strictEqual(await toDbReaction('💢'), 'angry');
+	});
+
+	it('プリン以外の既存のリアクションは文字列化する confused', async () => {
+		assert.strictEqual(await toDbReaction('😥'), 'confused');
+	});
+
+	it('プリン以外の既存のリアクションは文字列化する rip', async () => {
+		assert.strictEqual(await toDbReaction('😇'), 'rip');
+	});
+
+	it('それ以外はUnicodeのまま', async () => {
+		assert.strictEqual(await toDbReaction('🍅'), '🍅');
+	});
+
+	it('異体字セレクタ除去', async () => {
+		assert.strictEqual(await toDbReaction('㊗️'), '㊗');
+	});
+
+	it('異体字セレクタ除去 必要なし', async () => {
+		assert.strictEqual(await toDbReaction('㊗'), '㊗');
+	});
+
+	it('fallback - undefined', async () => {
+		assert.strictEqual(await toDbReaction(undefined), 'like');
+	});
+
+	it('fallback - null', async () => {
+		assert.strictEqual(await toDbReaction(null), 'like');
+	});
+
+	it('fallback - empty', async () => {
+		assert.strictEqual(await toDbReaction(''), 'like');
+	});
+
+	it('fallback - unknown', async () => {
+		assert.strictEqual(await toDbReaction('unknown'), 'like');
+	});
+});
+*/
diff --git a/packages/backend/test/thread-mute.ts b/packages/backend/test/thread-mute.ts
deleted file mode 100644
index cd3e519394..0000000000
--- a/packages/backend/test/thread-mute.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-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';
-
-describe('Note thread mute', () => {
-	let p: childProcess.ChildProcess;
-
-	let alice: any;
-	let bob: any;
-	let carol: any;
-
-	before(async () => {
-		p = await startServer();
-		alice = await signup({ username: 'alice' });
-		bob = await signup({ username: 'bob' });
-		carol = await signup({ username: 'carol' });
-	});
-
-	after(async () => {
-		await shutdownServer(p);
-	});
-
-	it('notes/mentions にミュートしているスレッドの投稿が含まれない', async(async () => {
-		const bobNote = await post(bob, { text: '@alice @carol root note' });
-		const aliceReply = await post(alice, { replyId: bobNote.id, text: '@bob @carol child note' });
-
-		await request('/notes/thread-muting/create', { noteId: bobNote.id }, alice);
-
-		const carolReply = await post(carol, { replyId: bobNote.id, text: '@bob @alice child note' });
-		const carolReplyWithoutMention = await post(carol, { replyId: aliceReply.id, text: 'child note' });
-
-		const res = await request('/notes/mentions', {}, alice);
-
-		assert.strictEqual(res.status, 200);
-		assert.strictEqual(Array.isArray(res.body), true);
-		assert.strictEqual(res.body.some((note: any) => note.id === bobNote.id), false);
-		assert.strictEqual(res.body.some((note: any) => note.id === carolReply.id), false);
-		assert.strictEqual(res.body.some((note: any) => note.id === carolReplyWithoutMention.id), false);
-	}));
-
-	it('ミュートしているスレッドからメンションされても、hasUnreadMentions が true にならない', async(async () => {
-		// 状態リセット
-		await request('/i/read-all-unread-notes', {}, alice);
-
-		const bobNote = await post(bob, { text: '@alice @carol root note' });
-
-		await request('/notes/thread-muting/create', { noteId: bobNote.id }, alice);
-
-		const carolReply = await post(carol, { replyId: bobNote.id, text: '@bob @alice child note' });
-
-		const res = await request('/i', {}, alice);
-
-		assert.strictEqual(res.status, 200);
-		assert.strictEqual(res.body.hasUnreadMentions, false);
-	}));
-
-	it('ミュートしているスレッドからメンションされても、ストリームに unreadMention イベントが流れてこない', () => new Promise(async done => {
-		// 状態リセット
-		await request('/i/read-all-unread-notes', {}, alice);
-
-		const bobNote = await post(bob, { text: '@alice @carol root note' });
-
-		await request('/notes/thread-muting/create', { noteId: bobNote.id }, alice);
-
-		let fired = false;
-
-		const ws = await connectStream(alice, 'main', async ({ type, body }) => {
-			if (type === 'unreadMention') {
-				if (body === bobNote.id) return;
-				fired = true;
-			}
-		});
-
-		const carolReply = await post(carol, { replyId: bobNote.id, text: '@bob @alice child note' });
-
-		setTimeout(() => {
-			assert.strictEqual(fired, false);
-			ws.close();
-			done();
-		}, 5000);
-	}));
-
-	it('i/notifications にミュートしているスレッドの通知が含まれない', async(async () => {
-		const bobNote = await post(bob, { text: '@alice @carol root note' });
-		const aliceReply = await post(alice, { replyId: bobNote.id, text: '@bob @carol child note' });
-
-		await request('/notes/thread-muting/create', { noteId: bobNote.id }, alice);
-
-		const carolReply = await post(carol, { replyId: bobNote.id, text: '@bob @alice child note' });
-		const carolReplyWithoutMention = await post(carol, { replyId: aliceReply.id, text: 'child note' });
-
-		const res = await request('/i/notifications', {}, alice);
-
-		assert.strictEqual(res.status, 200);
-		assert.strictEqual(Array.isArray(res.body), true);
-		assert.strictEqual(res.body.some((notification: any) => notification.note.id === carolReply.id), false);
-		assert.strictEqual(res.body.some((notification: any) => notification.note.id === carolReplyWithoutMention.id), false);
-
-		// NOTE: bobの投稿はスレッドミュート前に行われたため通知に含まれていてもよい
-	}));
-});
diff --git a/packages/backend/test/tsconfig.json b/packages/backend/test/tsconfig.json
index bc7a9968b5..5d91d0923a 100644
--- a/packages/backend/test/tsconfig.json
+++ b/packages/backend/test/tsconfig.json
@@ -32,7 +32,8 @@
 		],
 		"lib": [
 			"esnext"
-		]
+		],
+		"types": ["jest"]
 	},
 	"compileOnSave": false,
 	"include": [
diff --git a/packages/backend/test/unit/FileInfoService.ts b/packages/backend/test/unit/FileInfoService.ts
new file mode 100644
index 0000000000..b876deb545
--- /dev/null
+++ b/packages/backend/test/unit/FileInfoService.ts
@@ -0,0 +1,237 @@
+process.env.NODE_ENV = 'test';
+
+import * as assert from 'assert';
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import { ModuleMocker } from 'jest-mock';
+import { Test } from '@nestjs/testing';
+import { GlobalModule } from '@/GlobalModule.js';
+import { FileInfoService } from '@/core/FileInfoService.js';
+import { DI } from '@/di-symbols.js';
+import { AiService } from '@/core/AiService.js';
+import type { TestingModule } from '@nestjs/testing';
+import type { jest } from '@jest/globals';
+import type { MockFunctionMetadata } from 'jest-mock';
+
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = dirname(_filename);
+const resources = `${_dirname}/../resources`;
+
+const moduleMocker = new ModuleMocker(global);
+
+describe('FileInfoService', () => {
+	let app: TestingModule;
+	let fileInfoService: FileInfoService;
+
+	beforeAll(async () => {
+		app = await Test.createTestingModule({
+			imports: [
+				GlobalModule,
+			],
+			providers: [
+				AiService,
+				FileInfoService,
+			],
+		})
+			.useMocker((token) => {
+				//if (token === AiService) {
+				//	return {  };
+				//}
+				if (typeof token === 'function') {
+					const mockMetadata = moduleMocker.getMetadata(token) as MockFunctionMetadata<any, any>;
+					const Mock = moduleMocker.generateFromMetadata(mockMetadata);
+					return new Mock();
+				}
+			})
+			.compile();
+
+		app.enableShutdownHooks();
+
+		fileInfoService = app.get<FileInfoService>(FileInfoService);
+	});
+
+	afterAll(async () => {
+		await app.close();
+	});
+
+	it('Empty file', async () => {
+		const path = `${resources}/emptyfile`;
+		const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
+		delete info.warnings;
+		delete info.blurhash;
+		delete info.sensitive;
+		delete info.porn;
+		assert.deepStrictEqual(info, {
+			size: 0,
+			md5: 'd41d8cd98f00b204e9800998ecf8427e',
+			type: {
+				mime: 'application/octet-stream',
+				ext: null,
+			},
+			width: undefined,
+			height: undefined,
+			orientation: undefined,
+		});
+	});
+
+	it('Generic JPEG', async () => {
+		const path = `${resources}/Lenna.jpg`;
+		const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
+		delete info.warnings;
+		delete info.blurhash;
+		delete info.sensitive;
+		delete info.porn;
+		assert.deepStrictEqual(info, {
+			size: 25360,
+			md5: '091b3f259662aa31e2ffef4519951168',
+			type: {
+				mime: 'image/jpeg',
+				ext: 'jpg',
+			},
+			width: 512,
+			height: 512,
+			orientation: undefined,
+		});
+	});
+
+	it('Generic APNG', async () => {
+		const path = `${resources}/anime.png`;
+		const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
+		delete info.warnings;
+		delete info.blurhash;
+		delete info.sensitive;
+		delete info.porn;
+		assert.deepStrictEqual(info, {
+			size: 1868,
+			md5: '08189c607bea3b952704676bb3c979e0',
+			type: {
+				mime: 'image/apng',
+				ext: 'apng',
+			},
+			width: 256,
+			height: 256,
+			orientation: undefined,
+		});
+	});
+
+	it('Generic AGIF', async () => {
+		const path = `${resources}/anime.gif`;
+		const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
+		delete info.warnings;
+		delete info.blurhash;
+		delete info.sensitive;
+		delete info.porn;
+		assert.deepStrictEqual(info, {
+			size: 2248,
+			md5: '32c47a11555675d9267aee1a86571e7e',
+			type: {
+				mime: 'image/gif',
+				ext: 'gif',
+			},
+			width: 256,
+			height: 256,
+			orientation: undefined,
+		});
+	});
+
+	it('PNG with alpha', async () => {
+		const path = `${resources}/with-alpha.png`;
+		const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
+		delete info.warnings;
+		delete info.blurhash;
+		delete info.sensitive;
+		delete info.porn;
+		assert.deepStrictEqual(info, {
+			size: 3772,
+			md5: 'f73535c3e1e27508885b69b10cf6e991',
+			type: {
+				mime: 'image/png',
+				ext: 'png',
+			},
+			width: 256,
+			height: 256,
+			orientation: undefined,
+		});
+	});
+
+	it('Generic SVG', async () => {
+		const path = `${resources}/image.svg`;
+		const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
+		delete info.warnings;
+		delete info.blurhash;
+		delete info.sensitive;
+		delete info.porn;
+		assert.deepStrictEqual(info, {
+			size: 505,
+			md5: 'b6f52b4b021e7b92cdd04509c7267965',
+			type: {
+				mime: 'image/svg+xml',
+				ext: 'svg',
+			},
+			width: 256,
+			height: 256,
+			orientation: undefined,
+		});
+	});
+
+	it('SVG with XML definition', async () => {
+		// https://github.com/misskey-dev/misskey/issues/4413
+		const path = `${resources}/with-xml-def.svg`;
+		const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
+		delete info.warnings;
+		delete info.blurhash;
+		delete info.sensitive;
+		delete info.porn;
+		assert.deepStrictEqual(info, {
+			size: 544,
+			md5: '4b7a346cde9ccbeb267e812567e33397',
+			type: {
+				mime: 'image/svg+xml',
+				ext: 'svg',
+			},
+			width: 256,
+			height: 256,
+			orientation: undefined,
+		});
+	});
+
+	it('Dimension limit', async () => {
+		const path = `${resources}/25000x25000.png`;
+		const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
+		delete info.warnings;
+		delete info.blurhash;
+		delete info.sensitive;
+		delete info.porn;
+		assert.deepStrictEqual(info, {
+			size: 75933,
+			md5: '268c5dde99e17cf8fe09f1ab3f97df56',
+			type: {
+				mime: 'application/octet-stream',	// do not treat as image
+				ext: null,
+			},
+			width: 25000,
+			height: 25000,
+			orientation: undefined,
+		});
+	});
+
+	it('Rotate JPEG', async () => {
+		const path = `${resources}/rotate.jpg`;
+		const info = await fileInfoService.getFileInfo(path, { skipSensitiveDetection: true }) as any;
+		delete info.warnings;
+		delete info.blurhash;
+		delete info.sensitive;
+		delete info.porn;
+		assert.deepStrictEqual(info, {
+			size: 12624,
+			md5: '68d5b2d8d1d1acbbce99203e3ec3857e',
+			type: {
+				mime: 'image/jpeg',
+				ext: 'jpg',
+			},
+			width: 512,
+			height: 256,
+			orientation: 8,
+		});
+	});
+});
diff --git a/packages/backend/test/unit/RelayService.ts b/packages/backend/test/unit/RelayService.ts
new file mode 100644
index 0000000000..bb555648e9
--- /dev/null
+++ b/packages/backend/test/unit/RelayService.ts
@@ -0,0 +1,96 @@
+process.env.NODE_ENV = 'test';
+
+import { jest } from '@jest/globals';
+import { ModuleMocker } from 'jest-mock';
+import { Test } from '@nestjs/testing';
+import { GlobalModule } from '@/GlobalModule.js';
+import { RelayService } from '@/core/RelayService.js';
+import { ApRendererService } from '@/core/remote/activitypub/ApRendererService.js';
+import { CreateSystemUserService } from '@/core/CreateSystemUserService.js';
+import { QueueService } from '@/core/QueueService.js';
+import { IdService } from '@/core/IdService.js';
+import type { RelaysRepository } from '@/models/index.js';
+import { DI } from '@/di-symbols.js';
+import type { TestingModule } from '@nestjs/testing';
+import type { MockFunctionMetadata } from 'jest-mock';
+
+const moduleMocker = new ModuleMocker(global);
+
+describe('RelayService', () => {
+	let app: TestingModule;
+	let relayService: RelayService;
+	let queueService: jest.Mocked<QueueService>;
+	let relaysRepository: RelaysRepository;
+
+	beforeAll(async () => {
+		app = await Test.createTestingModule({
+			imports: [
+				GlobalModule,
+			],
+			providers: [
+				IdService,
+				CreateSystemUserService,
+				ApRendererService,
+				RelayService,
+			],
+		})
+			.useMocker((token) => {
+				if (token === QueueService) {
+					return { deliver: jest.fn() };
+				}
+				if (typeof token === 'function') {
+					const mockMetadata = moduleMocker.getMetadata(token) as MockFunctionMetadata<any, any>;
+					const Mock = moduleMocker.generateFromMetadata(mockMetadata);
+					return new Mock();
+				}
+			})
+			.compile();
+
+		app.enableShutdownHooks();
+
+		relayService = app.get<RelayService>(RelayService);
+		queueService = app.get<QueueService>(QueueService) as jest.Mocked<QueueService>;
+		relaysRepository = app.get<RelaysRepository>(DI.relaysRepository);
+	});
+
+	afterAll(async () => {
+		await app.close();
+	});
+
+	it('addRelay', async () => {	
+		const result = await relayService.addRelay('https://example.com');
+
+		expect(result.inbox).toBe('https://example.com');
+		expect(result.status).toBe('requesting');
+		expect(queueService.deliver).toHaveBeenCalled();
+		expect(queueService.deliver.mock.lastCall![1].type).toBe('Follow');
+		expect(queueService.deliver.mock.lastCall![2]).toBe('https://example.com');
+		//expect(queueService.deliver.mock.lastCall![0].username).toBe('relay.actor');
+	});
+
+	it('listRelay', async () => {	
+		const result = await relayService.listRelay();
+
+		expect(result.length).toBe(1);
+		expect(result[0].inbox).toBe('https://example.com');
+		expect(result[0].status).toBe('requesting');
+	});
+
+	it('removeRelay: succ', async () => {	
+		await relayService.removeRelay('https://example.com');
+
+		expect(queueService.deliver).toHaveBeenCalled();
+		expect(queueService.deliver.mock.lastCall![1].type).toBe('Undo');
+		expect(queueService.deliver.mock.lastCall![1].object.type).toBe('Follow');
+		expect(queueService.deliver.mock.lastCall![2]).toBe('https://example.com');
+		//expect(queueService.deliver.mock.lastCall![0].username).toBe('relay.actor');
+
+		const list = await relayService.listRelay();
+		expect(list.length).toBe(0);
+	});
+
+	it('removeRelay: fail', async () => {	
+		await expect(relayService.removeRelay('https://x.example.com'))
+			.rejects.toThrow('relay not found');
+	});
+});
diff --git a/packages/backend/test/unit/chart.ts b/packages/backend/test/unit/chart.ts
new file mode 100644
index 0000000000..f1159976fd
--- /dev/null
+++ b/packages/backend/test/unit/chart.ts
@@ -0,0 +1,574 @@
+process.env.NODE_ENV = 'test';
+
+import * as assert from 'assert';
+import { jest } from '@jest/globals';
+import * as lolex from '@sinonjs/fake-timers';
+import { DataSource } from 'typeorm';
+import TestChart from '@/core/chart/charts/test.js';
+import TestGroupedChart from '@/core/chart/charts/test-grouped.js';
+import TestUniqueChart from '@/core/chart/charts/test-unique.js';
+import TestIntersectionChart from '@/core/chart/charts/test-intersection.js';
+import { entity as TestChartEntity } from '@/core/chart/charts/entities/test.js';
+import { entity as TestGroupedChartEntity } from '@/core/chart/charts/entities/test-grouped.js';
+import { entity as TestUniqueChartEntity } from '@/core/chart/charts/entities/test-unique.js';
+import { entity as TestIntersectionChartEntity } from '@/core/chart/charts/entities/test-intersection.js';
+import { loadConfig } from '@/config.js';
+import type { AppLockService } from '@/core/AppLockService';
+
+describe('Chart', () => {
+	const config = loadConfig();
+	const appLockService = {
+		getChartInsertLock: jest.fn().mockImplementation(() => Promise.resolve(() => {})),
+	} as unknown as jest.Mocked<AppLockService>;
+
+	let db: DataSource | undefined;
+
+	let testChart: TestChart;
+	let testGroupedChart: TestGroupedChart;
+	let testUniqueChart: TestUniqueChart;
+	let testIntersectionChart: TestIntersectionChart;
+	let clock: lolex.InstalledClock;
+
+	beforeEach(async () => {
+		if (db) db.destroy();
+
+		db = new DataSource({
+			type: 'postgres',
+			host: config.db.host,
+			port: config.db.port,
+			username: config.db.user,
+			password: config.db.pass,
+			database: config.db.db,
+			extra: {
+				statement_timeout: 1000 * 10,
+				...config.db.extra,
+			},
+			synchronize: true,
+			dropSchema: true,
+			maxQueryExecutionTime: 300,
+			entities: [
+				TestChartEntity.hour, TestChartEntity.day,
+				TestGroupedChartEntity.hour, TestGroupedChartEntity.day,
+				TestUniqueChartEntity.hour, TestUniqueChartEntity.day,
+				TestIntersectionChartEntity.hour, TestIntersectionChartEntity.day,
+			],
+			migrations: ['../../migration/*.js'],
+		});
+
+		await db.initialize();
+
+		testChart = new TestChart(db, appLockService);
+		testGroupedChart = new TestGroupedChart(db, appLockService);
+		testUniqueChart = new TestUniqueChart(db, appLockService);
+		testIntersectionChart = new TestIntersectionChart(db, appLockService);
+
+		clock = lolex.install({
+			now: new Date(Date.UTC(2000, 0, 1, 0, 0, 0)),
+			shouldClearNativeTimers: true,
+		});
+	});
+
+	afterEach(() => {
+		clock.uninstall();
+	});
+
+	afterAll(async () => {
+		if (db) await db.destroy();
+	});
+
+	it('Can updates', async () => {
+		await testChart.increment();
+		await testChart.save();
+
+		const chartHours = await testChart.getChart('hour', 3, null);
+		const chartDays = await testChart.getChart('day', 3, null);
+
+		assert.deepStrictEqual(chartHours, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [1, 0, 0],
+				total: [1, 0, 0],
+			},
+		});
+
+		assert.deepStrictEqual(chartDays, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [1, 0, 0],
+				total: [1, 0, 0],
+			},
+		});
+	});
+
+	it('Can updates (dec)', async () => {
+		await testChart.decrement();
+		await testChart.save();
+
+		const chartHours = await testChart.getChart('hour', 3, null);
+		const chartDays = await testChart.getChart('day', 3, null);
+
+		assert.deepStrictEqual(chartHours, {
+			foo: {
+				dec: [1, 0, 0],
+				inc: [0, 0, 0],
+				total: [-1, 0, 0],
+			},
+		});
+
+		assert.deepStrictEqual(chartDays, {
+			foo: {
+				dec: [1, 0, 0],
+				inc: [0, 0, 0],
+				total: [-1, 0, 0],
+			},
+		});
+	});
+
+	it('Empty chart', async () => {
+		const chartHours = await testChart.getChart('hour', 3, null);
+		const chartDays = await testChart.getChart('day', 3, null);
+
+		assert.deepStrictEqual(chartHours, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [0, 0, 0],
+				total: [0, 0, 0],
+			},
+		});
+
+		assert.deepStrictEqual(chartDays, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [0, 0, 0],
+				total: [0, 0, 0],
+			},
+		});
+	});
+
+	it('Can updates at multiple times at same time', async () => {
+		await testChart.increment();
+		await testChart.increment();
+		await testChart.increment();
+		await testChart.save();
+
+		const chartHours = await testChart.getChart('hour', 3, null);
+		const chartDays = await testChart.getChart('day', 3, null);
+
+		assert.deepStrictEqual(chartHours, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [3, 0, 0],
+				total: [3, 0, 0],
+			},
+		});
+
+		assert.deepStrictEqual(chartDays, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [3, 0, 0],
+				total: [3, 0, 0],
+			},
+		});
+	});
+
+	it('複数回saveされてもデータの更新は一度だけ', async () => {
+		await testChart.increment();
+		await testChart.save();
+		await testChart.save();
+		await testChart.save();
+
+		const chartHours = await testChart.getChart('hour', 3, null);
+		const chartDays = await testChart.getChart('day', 3, null);
+
+		assert.deepStrictEqual(chartHours, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [1, 0, 0],
+				total: [1, 0, 0],
+			},
+		});
+
+		assert.deepStrictEqual(chartDays, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [1, 0, 0],
+				total: [1, 0, 0],
+			},
+		});
+	});
+
+	it('Can updates at different times', async () => {
+		await testChart.increment();
+		await testChart.save();
+
+		clock.tick('01:00:00');
+
+		await testChart.increment();
+		await testChart.save();
+
+		const chartHours = await testChart.getChart('hour', 3, null);
+		const chartDays = await testChart.getChart('day', 3, null);
+
+		assert.deepStrictEqual(chartHours, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [1, 1, 0],
+				total: [2, 1, 0],
+			},
+		});
+
+		assert.deepStrictEqual(chartDays, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [2, 0, 0],
+				total: [2, 0, 0],
+			},
+		});
+	});
+
+	// 仕様上はこうなってほしいけど、実装は難しそうなのでskip
+	/*
+	it('Can updates at different times without save', async () => {
+		await testChart.increment();
+
+		clock.tick('01:00:00');
+
+		await testChart.increment();
+		await testChart.save();
+
+		const chartHours = await testChart.getChart('hour', 3, null);
+		const chartDays = await testChart.getChart('day', 3, null);
+
+		assert.deepStrictEqual(chartHours, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [1, 1, 0],
+				total: [2, 1, 0]
+			},
+		});
+
+		assert.deepStrictEqual(chartDays, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [2, 0, 0],
+				total: [2, 0, 0]
+			},
+		});
+	});
+	*/
+
+	it('Can padding', async () => {
+		await testChart.increment();
+		await testChart.save();
+
+		clock.tick('02:00:00');
+
+		await testChart.increment();
+		await testChart.save();
+
+		const chartHours = await testChart.getChart('hour', 3, null);
+		const chartDays = await testChart.getChart('day', 3, null);
+
+		assert.deepStrictEqual(chartHours, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [1, 0, 1],
+				total: [2, 1, 1],
+			},
+		});
+
+		assert.deepStrictEqual(chartDays, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [2, 0, 0],
+				total: [2, 0, 0],
+			},
+		});
+	});
+
+	// 要求された範囲にログがひとつもない場合でもパディングできる
+	it('Can padding from past range', async () => {
+		await testChart.increment();
+		await testChart.save();
+
+		clock.tick('05:00:00');
+
+		const chartHours = await testChart.getChart('hour', 3, null);
+		const chartDays = await testChart.getChart('day', 3, null);
+
+		assert.deepStrictEqual(chartHours, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [0, 0, 0],
+				total: [1, 1, 1],
+			},
+		});
+
+		assert.deepStrictEqual(chartDays, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [1, 0, 0],
+				total: [1, 0, 0],
+			},
+		});
+	});
+
+	// 要求された範囲の最も古い箇所に位置するログが存在しない場合でもパディングできる
+	// Issue #3190
+	it('Can padding from past range 2', async () => {
+		await testChart.increment();
+		await testChart.save();
+
+		clock.tick('05:00:00');
+
+		await testChart.increment();
+		await testChart.save();
+
+		const chartHours = await testChart.getChart('hour', 3, null);
+		const chartDays = await testChart.getChart('day', 3, null);
+
+		assert.deepStrictEqual(chartHours, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [1, 0, 0],
+				total: [2, 1, 1],
+			},
+		});
+
+		assert.deepStrictEqual(chartDays, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [2, 0, 0],
+				total: [2, 0, 0],
+			},
+		});
+	});
+
+	it('Can specify offset', async () => {
+		await testChart.increment();
+		await testChart.save();
+
+		clock.tick('01:00:00');
+
+		await testChart.increment();
+		await testChart.save();
+
+		const chartHours = await testChart.getChart('hour', 3, new Date(Date.UTC(2000, 0, 1, 0, 0, 0)));
+		const chartDays = await testChart.getChart('day', 3, new Date(Date.UTC(2000, 0, 1, 0, 0, 0)));
+
+		assert.deepStrictEqual(chartHours, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [1, 0, 0],
+				total: [1, 0, 0],
+			},
+		});
+
+		assert.deepStrictEqual(chartDays, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [2, 0, 0],
+				total: [2, 0, 0],
+			},
+		});
+	});
+
+	it('Can specify offset (floor time)', async () => {
+		clock.tick('00:30:00');
+
+		await testChart.increment();
+		await testChart.save();
+
+		clock.tick('01:30:00');
+
+		await testChart.increment();
+		await testChart.save();
+
+		const chartHours = await testChart.getChart('hour', 3, new Date(Date.UTC(2000, 0, 1, 0, 0, 0)));
+		const chartDays = await testChart.getChart('day', 3, new Date(Date.UTC(2000, 0, 1, 0, 0, 0)));
+
+		assert.deepStrictEqual(chartHours, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [1, 0, 0],
+				total: [1, 0, 0],
+			},
+		});
+
+		assert.deepStrictEqual(chartDays, {
+			foo: {
+				dec: [0, 0, 0],
+				inc: [2, 0, 0],
+				total: [2, 0, 0],
+			},
+		});
+	});
+
+	describe('Grouped', () => {
+		it('Can updates', async () => {
+			await testGroupedChart.increment('alice');
+			await testGroupedChart.save();
+
+			const aliceChartHours = await testGroupedChart.getChart('hour', 3, null, 'alice');
+			const aliceChartDays = await testGroupedChart.getChart('day', 3, null, 'alice');
+			const bobChartHours = await testGroupedChart.getChart('hour', 3, null, 'bob');
+			const bobChartDays = await testGroupedChart.getChart('day', 3, null, 'bob');
+
+			assert.deepStrictEqual(aliceChartHours, {
+				foo: {
+					dec: [0, 0, 0],
+					inc: [1, 0, 0],
+					total: [1, 0, 0],
+				},
+			});
+
+			assert.deepStrictEqual(aliceChartDays, {
+				foo: {
+					dec: [0, 0, 0],
+					inc: [1, 0, 0],
+					total: [1, 0, 0],
+				},
+			});
+
+			assert.deepStrictEqual(bobChartHours, {
+				foo: {
+					dec: [0, 0, 0],
+					inc: [0, 0, 0],
+					total: [0, 0, 0],
+				},
+			});
+
+			assert.deepStrictEqual(bobChartDays, {
+				foo: {
+					dec: [0, 0, 0],
+					inc: [0, 0, 0],
+					total: [0, 0, 0],
+				},
+			});
+		});
+	});
+
+	describe('Unique increment', () => {
+		it('Can updates', async () => {
+			await testUniqueChart.uniqueIncrement('alice');
+			await testUniqueChart.uniqueIncrement('alice');
+			await testUniqueChart.uniqueIncrement('bob');
+			await testUniqueChart.save();
+
+			const chartHours = await testUniqueChart.getChart('hour', 3, null);
+			const chartDays = await testUniqueChart.getChart('day', 3, null);
+
+			assert.deepStrictEqual(chartHours, {
+				foo: [2, 0, 0],
+			});
+
+			assert.deepStrictEqual(chartDays, {
+				foo: [2, 0, 0],
+			});
+		});
+
+		describe('Intersection', () => {
+			it('条件が満たされていない場合はカウントされない', async () => {
+				await testIntersectionChart.addA('alice');
+				await testIntersectionChart.addA('bob');
+				await testIntersectionChart.addB('carol');
+				await testIntersectionChart.save();
+	
+				const chartHours = await testIntersectionChart.getChart('hour', 3, null);
+				const chartDays = await testIntersectionChart.getChart('day', 3, null);
+	
+				assert.deepStrictEqual(chartHours, {
+					a: [2, 0, 0],
+					b: [1, 0, 0],
+					aAndB: [0, 0, 0],
+				});
+	
+				assert.deepStrictEqual(chartDays, {
+					a: [2, 0, 0],
+					b: [1, 0, 0],
+					aAndB: [0, 0, 0],
+				});
+			});
+
+			it('条件が満たされている場合にカウントされる', async () => {
+				await testIntersectionChart.addA('alice');
+				await testIntersectionChart.addA('bob');
+				await testIntersectionChart.addB('carol');
+				await testIntersectionChart.addB('alice');
+				await testIntersectionChart.save();
+	
+				const chartHours = await testIntersectionChart.getChart('hour', 3, null);
+				const chartDays = await testIntersectionChart.getChart('day', 3, null);
+	
+				assert.deepStrictEqual(chartHours, {
+					a: [2, 0, 0],
+					b: [2, 0, 0],
+					aAndB: [1, 0, 0],
+				});
+	
+				assert.deepStrictEqual(chartDays, {
+					a: [2, 0, 0],
+					b: [2, 0, 0],
+					aAndB: [1, 0, 0],
+				});
+			});
+		});
+	});
+
+	describe('Resync', () => {
+		it('Can resync', async () => {
+			testChart.total = 1;
+
+			await testChart.resync();
+
+			const chartHours = await testChart.getChart('hour', 3, null);
+			const chartDays = await testChart.getChart('day', 3, null);
+
+			assert.deepStrictEqual(chartHours, {
+				foo: {
+					dec: [0, 0, 0],
+					inc: [0, 0, 0],
+					total: [1, 0, 0],
+				},
+			});
+
+			assert.deepStrictEqual(chartDays, {
+				foo: {
+					dec: [0, 0, 0],
+					inc: [0, 0, 0],
+					total: [1, 0, 0],
+				},
+			});
+		});
+
+		it('Can resync (2)', async () => {
+			await testChart.increment();
+			await testChart.save();
+
+			clock.tick('01:00:00');
+
+			testChart.total = 100;
+
+			await testChart.resync();
+
+			const chartHours = await testChart.getChart('hour', 3, null);
+			const chartDays = await testChart.getChart('day', 3, null);
+
+			assert.deepStrictEqual(chartHours, {
+				foo: {
+					dec: [0, 0, 0],
+					inc: [0, 1, 0],
+					total: [100, 1, 0],
+				},
+			});
+
+			assert.deepStrictEqual(chartDays, {
+				foo: {
+					dec: [0, 0, 0],
+					inc: [1, 0, 0],
+					total: [100, 0, 0],
+				},
+			});
+		});
+	});
+});
diff --git a/packages/backend/test/user-notes.ts b/packages/backend/test/user-notes.ts
deleted file mode 100644
index 4447754d66..0000000000
--- a/packages/backend/test/user-notes.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-process.env.NODE_ENV = 'test';
-
-import * as assert from 'assert';
-import * as childProcess from 'child_process';
-import { async, signup, request, post, uploadUrl, startServer, shutdownServer } from './utils.js';
-
-describe('users/notes', () => {
-	let p: childProcess.ChildProcess;
-
-	let alice: any;
-	let jpgNote: any;
-	let pngNote: any;
-	let jpgPngNote: any;
-
-	before(async () => {
-		p = await startServer();
-		alice = await signup({ username: 'alice' });
-		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],
-		});
-		pngNote = await post(alice, {
-			fileIds: [png.id],
-		});
-		jpgPngNote = await post(alice, {
-			fileIds: [jpg.id, png.id],
-		});
-	});
-
-	after(async() => {
-		await shutdownServer(p);
-	});
-
-	it('ファイルタイプ指定 (jpg)', async(async () => {
-		const res = await request('/users/notes', {
-			userId: alice.id,
-			fileType: ['image/jpeg'],
-		}, alice);
-
-		assert.strictEqual(res.status, 200);
-		assert.strictEqual(Array.isArray(res.body), true);
-		assert.strictEqual(res.body.length, 2);
-		assert.strictEqual(res.body.some((note: any) => note.id === jpgNote.id), true);
-		assert.strictEqual(res.body.some((note: any) => note.id === jpgPngNote.id), true);
-	}));
-
-	it('ファイルタイプ指定 (jpg or png)', async(async () => {
-		const res = await request('/users/notes', {
-			userId: alice.id,
-			fileType: ['image/jpeg', 'image/png'],
-		}, alice);
-
-		assert.strictEqual(res.status, 200);
-		assert.strictEqual(Array.isArray(res.body), true);
-		assert.strictEqual(res.body.length, 3);
-		assert.strictEqual(res.body.some((note: any) => note.id === jpgNote.id), true);
-		assert.strictEqual(res.body.some((note: any) => note.id === pngNote.id), true);
-		assert.strictEqual(res.body.some((note: any) => note.id === jpgPngNote.id), true);
-	}));
-});
diff --git a/packages/backend/test/utils.ts b/packages/backend/test/utils.ts
index 245cf858d8..c8fd41e1d3 100644
--- a/packages/backend/test/utils.ts
+++ b/packages/backend/test/utils.ts
@@ -6,13 +6,13 @@ import * as childProcess from 'child_process';
 import * as http from 'node:http';
 import { SIGKILL } from 'constants';
 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 got, { RequestError } from 'got';
 import loadConfig from '../src/config/load.js';
-import { entities } from '../src/db/postgre.js';
-import got from 'got';
+import { entities } from '../src/postgre.js';
+import type * as misskey from 'misskey-js';
 
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = dirname(_filename);
@@ -20,56 +20,53 @@ const _dirname = dirname(_filename);
 const config = loadConfig();
 export const port = config.port;
 
-export const async = (fn: Function) => (done: Function) => {
-	fn().then(() => {
-		done();
-	}, (err: Error) => {
-		done(err);
-	});
-};
-
 export const api = async (endpoint: string, params: any, me?: any) => {
 	endpoint = endpoint.replace(/^\//, '');
 
 	const auth = me ? {
-		i: me.token
+		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;
+	try {
+		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,
+			},
+		});
 
-	return {
-		status,
-		body
-	};
+		const status = res.statusCode;
+		const body = res.statusCode !== 204 ? await JSON.parse(res.body) : null;
+
+		return {
+			status,
+			body,
+		};
+	} catch (err: unknown) {
+		if (err instanceof RequestError && err.response) {
+			const status = err.response.statusCode;
+			const body = await JSON.parse(err.response.body as string);
+
+			return {
+				status,
+				body,
+			};
+		} else {
+			throw err;
+		}
+	}
 };
 
-export const request = async (endpoint: string, params: any, me?: any): Promise<{ body: any, status: number }> => {
+export const request = async (path: string, params: any, me?: any): Promise<{ body: any, status: number }> => {
 	const auth = me ? {
 		i: me.token,
 	} : {};
 
-	const res = await fetch(`http://localhost:${port}/api${endpoint}`, {
+	const res = await fetch(`http://localhost:${port}/${path}`, {
 		method: 'POST',
 		headers: {
 			'Content-Type': 'application/json',
@@ -78,7 +75,7 @@ export const request = async (endpoint: string, params: any, me?: any): Promise<
 	});
 
 	const status = res.status;
-	const body = res.status !== 204 ? await res.json().catch() : null;
+	const body = res.status === 200 ? await res.json().catch() : null;
 
 	return {
 		body, status,
@@ -141,19 +138,21 @@ export const uploadFile = async (user: any, _path?: string): Promise<any> => {
 
 export const uploadUrl = async (user: any, url: string) => {
 	let file: any;
+	const marker = Math.random().toString();
 
 	const ws = await connectStream(user, 'main', (msg) => {
-		if (msg.type === 'driveFileCreated') {
-			file = msg.body;
+		if (msg.type === 'urlUploadFinished' && msg.body.marker === marker) {
+			file = msg.body.file;
 		}
 	});
 
 	await api('drive/files/upload-from-url', {
 		url,
+		marker,
 		force: true,
 	}, user);
 
-	await sleep(5000);
+	await sleep(7000);
 	ws.close();
 
 	return file;
@@ -217,7 +216,7 @@ export const waitFire = async (user: any, channel: string, trgr: () => any, cond
 			if (timer) clearTimeout(timer);
 			rej(e);
 		}
-	})
+	});
 };
 
 export const simpleGet = async (path: string, accept = '*/*'): Promise<{ status?: number, type?: string, location?: string }> => {
@@ -268,7 +267,7 @@ export async function initTestDb(justBorrow = false, initEntities?: any[]) {
 		database: config.db.db,
 		synchronize: true && !justBorrow,
 		dropSchema: true && !justBorrow,
-		entities: initEntities || entities,
+		entities: initEntities ?? entities,
 	});
 
 	await db.initialize();
@@ -299,7 +298,8 @@ export function startServer(timeout = 60 * 1000): Promise<childProcess.ChildProc
 	});
 }
 
-export function shutdownServer(p: childProcess.ChildProcess, timeout = 20 * 1000) {
+export function shutdownServer(p: childProcess.ChildProcess | undefined, timeout = 20 * 1000) {
+	if (p == null) return Promise.resolve('nop');
 	return new Promise((res, rej) => {
 		const t = setTimeout(() => {
 			p.kill(SIGKILL);
diff --git a/packages/backend/yarn.lock b/packages/backend/yarn.lock
index 3be2f0d520..9feb24f24f 100644
--- a/packages/backend/yarn.lock
+++ b/packages/backend/yarn.lock
@@ -2,16 +2,306 @@
 # yarn lockfile v1
 
 
+"@ampproject/remapping@^2.1.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
+  integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.1.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
+  integrity sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==
+  dependencies:
+    "@babel/highlight" "^7.18.6"
+
+"@babel/compat-data@^7.18.8":
+  version "7.18.13"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.13.tgz#6aff7b350a1e8c3e40b029e46cbe78e24a913483"
+  integrity sha512-5yUzC5LqyTFp2HLmDoxGQelcdYgSpP9xsnMWBphAscOdFrHSAVbLNzWiy32sVNDqJRDiJK6klfDnAgu6PAGSHw==
+
+"@babel/core@^7.11.6", "@babel/core@^7.12.3":
+  version "7.18.13"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.18.13.tgz#9be8c44512751b05094a4d3ab05fc53a47ce00ac"
+  integrity sha512-ZisbOvRRusFktksHSG6pjj1CSvkPkcZq/KHD45LAkVP/oiHJkNBZWfpvlLmX8OtHDG8IuzsFlVRWo08w7Qxn0A==
+  dependencies:
+    "@ampproject/remapping" "^2.1.0"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.18.13"
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-module-transforms" "^7.18.9"
+    "@babel/helpers" "^7.18.9"
+    "@babel/parser" "^7.18.13"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.18.13"
+    "@babel/types" "^7.18.13"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.1"
+    semver "^6.3.0"
+
+"@babel/generator@^7.18.13", "@babel/generator@^7.7.2":
+  version "7.18.13"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.13.tgz#59550cbb9ae79b8def15587bdfbaa388c4abf212"
+  integrity sha512-CkPg8ySSPuHTYPJYo7IRALdqyjM9HCbt/3uOBEFbzyGVP6Mn8bwFPB0jX6982JVNBlYzM1nnPkfjuXSOPtQeEQ==
+  dependencies:
+    "@babel/types" "^7.18.13"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    jsesc "^2.5.1"
+
+"@babel/helper-compilation-targets@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.18.9.tgz#69e64f57b524cde3e5ff6cc5a9f4a387ee5563bf"
+  integrity sha512-tzLCyVmqUiFlcFoAPLA/gL9TeYrF61VLNtb+hvkuVaB5SUjW7jcfrglBIX1vUIoT7CLP3bBlIMeyEsIl2eFQNg==
+  dependencies:
+    "@babel/compat-data" "^7.18.8"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.20.2"
+    semver "^6.3.0"
+
+"@babel/helper-environment-visitor@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
+  integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
+
+"@babel/helper-function-name@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.18.9.tgz#940e6084a55dee867d33b4e487da2676365e86b0"
+  integrity sha512-fJgWlZt7nxGksJS9a0XdSaI4XvpExnNIgRP+rVefWh5U7BL8pPuir6SJUmFKRfjWQ51OtWSzwOxhaH/EBWWc0A==
+  dependencies:
+    "@babel/template" "^7.18.6"
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-hoist-variables@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
+  integrity sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-module-imports@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
+  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-module-transforms@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.9.tgz#5a1079c005135ed627442df31a42887e80fcb712"
+  integrity sha512-KYNqY0ICwfv19b31XzvmI/mfcylOzbLtowkw+mfvGPAQ3kfCnMLYbED3YecL5tPd8nAYFQFAd6JHp2LxZk/J1g==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-module-imports" "^7.18.6"
+    "@babel/helper-simple-access" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    "@babel/template" "^7.18.6"
+    "@babel/traverse" "^7.18.9"
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.8.0":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz#4b8aea3b069d8cb8a72cdfe28ddf5ceca695ef2f"
+  integrity sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==
+
+"@babel/helper-simple-access@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.18.6.tgz#d6d8f51f4ac2978068df934b569f08f29788c7ea"
+  integrity sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-split-export-declaration@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
+  integrity sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
+"@babel/helper-string-parser@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56"
+  integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
+
 "@babel/helper-validator-identifier@^7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
   integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
 
+"@babel/helper-validator-identifier@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
+  integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
+
+"@babel/helper-validator-option@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
+  integrity sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==
+
+"@babel/helpers@^7.18.9":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.18.9.tgz#4bef3b893f253a1eced04516824ede94dcfe7ff9"
+  integrity sha512-Jf5a+rbrLoR4eNdUmnFu8cN5eNJT6qdTdOg5IHIzq87WwyRw9PwguLFOWYgktN/60IP4fgDUawJvs7PjQIzELQ==
+  dependencies:
+    "@babel/template" "^7.18.6"
+    "@babel/traverse" "^7.18.9"
+    "@babel/types" "^7.18.9"
+
+"@babel/highlight@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
+  integrity sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.18.6"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.18.10", "@babel/parser@^7.18.13":
+  version "7.18.13"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.13.tgz#5b2dd21cae4a2c5145f1fbd8ca103f9313d3b7e4"
+  integrity sha512-dgXcIfMuQ0kgzLB2b9tRZs7TTFFaGM2AbtA4fJgUUYukzGH4jwsS7hzQHEGs67jdehpm22vkgKwvbU+aEflgwg==
+
 "@babel/parser@^7.6.0", "@babel/parser@^7.9.6":
   version "7.13.9"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.9.tgz#ca34cb95e1c2dd126863a84465ae8ef66114be99"
   integrity sha512-nEUfRiARCcaVo3ny3ZQjURjHQZUo/JkEw7rLlSZy/psWGnvwXFtPcr6jb7Yb41DVW5LTe6KRq9LGleRNsg1Frw==
 
+"@babel/plugin-syntax-async-generators@^7.8.4":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-bigint@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
+  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.8.3":
+  version "7.12.13"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
+  integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.12.13"
+
+"@babel/plugin-syntax-import-meta@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
+  integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-json-strings@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-jsx@^7.7.2":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
+  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-numeric-separator@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-object-rest-spread@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-catch-binding@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-optional-chaining@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-top-level-await@^7.8.3":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
+  integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-typescript@^7.7.2":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.18.6.tgz#1c09cd25795c7c2b8a4ba9ae49394576d4133285"
+  integrity sha512-mAWAuq4rvOepWCBid55JuRNvpTNf2UGVgoz4JV0fXEKolsVZDzsa4NqCef758WZJj/GDu0gVGItjKFiClTAmZA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@babel/template@^7.18.10", "@babel/template@^7.18.6", "@babel/template@^7.3.3":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
+  integrity sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/parser" "^7.18.10"
+    "@babel/types" "^7.18.10"
+
+"@babel/traverse@^7.18.13", "@babel/traverse@^7.18.9", "@babel/traverse@^7.7.2":
+  version "7.18.13"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.13.tgz#5ab59ef51a997b3f10c4587d648b9696b6cb1a68"
+  integrity sha512-N6kt9X1jRMLPxxxPYWi7tgvJRH/rtoU+dbKAPDM44RFHiMH8igdsaSBgFeskhSl/kLWLDUvIh1RXCrTmg0/zvA==
+  dependencies:
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.18.13"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.18.13"
+    "@babel/types" "^7.18.13"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.0.0", "@babel/types@^7.18.10", "@babel/types@^7.18.13", "@babel/types@^7.18.6", "@babel/types@^7.18.9", "@babel/types@^7.3.0", "@babel/types@^7.3.3":
+  version "7.18.13"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.13.tgz#30aeb9e514f4100f7c1cb6e5ba472b30e48f519a"
+  integrity sha512-ePqfTihzW0W6XAU+aMw2ykilisStJfDnsejDCXRchCcMJ4O0+8DhPXf2YUbZ6wjBlsEmZwLK/sPweWtu8hcJYQ==
+  dependencies:
+    "@babel/helper-string-parser" "^7.18.10"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.6.1", "@babel/types@^7.9.6":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.0.tgz#74424d2816f0171b4100f0ab34e9a374efdf7f80"
@@ -21,6 +311,11 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@bcoe/v8-coverage@^0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
+  integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
+
 "@bull-board/api@4.2.2":
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/@bull-board/api/-/api-4.2.2.tgz#42838f4fda71a3bdca560ea7c6eb80b3d846f446"
@@ -135,11 +430,261 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
   integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
+  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
+  dependencies:
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    get-package-type "^0.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
+
+"@istanbuljs/schema@^0.1.2":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
+  integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
+
+"@jest/console@^29.0.1":
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-29.0.1.tgz#e0e429cfc89900e3a46ce27f493bf488395ade39"
+  integrity sha512-SxLvSKf9gk4Rvt3p2KRQWVQ3sVj7S37rjlCHwp2+xNcRO/X+Uw0idbkfOtciUpjghHIxyggqcrrKhThQ+vClLQ==
+  dependencies:
+    "@jest/types" "^29.0.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^29.0.1"
+    jest-util "^29.0.1"
+    slash "^3.0.0"
+
+"@jest/core@^29.0.1":
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-29.0.1.tgz#a49517795f692a510b6fae55a9c09e659826c472"
+  integrity sha512-EcFrXkYh8I1GYHRH9V4TU7jr4P6ckaPqGo/z4AIJjHDZxicjYgWB6fx1xFb5bhEM87eUjCF4FAY5t+RamLWQmA==
+  dependencies:
+    "@jest/console" "^29.0.1"
+    "@jest/reporters" "^29.0.1"
+    "@jest/test-result" "^29.0.1"
+    "@jest/transform" "^29.0.1"
+    "@jest/types" "^29.0.1"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    jest-changed-files "^29.0.0"
+    jest-config "^29.0.1"
+    jest-haste-map "^29.0.1"
+    jest-message-util "^29.0.1"
+    jest-regex-util "^29.0.0"
+    jest-resolve "^29.0.1"
+    jest-resolve-dependencies "^29.0.1"
+    jest-runner "^29.0.1"
+    jest-runtime "^29.0.1"
+    jest-snapshot "^29.0.1"
+    jest-util "^29.0.1"
+    jest-validate "^29.0.1"
+    jest-watcher "^29.0.1"
+    micromatch "^4.0.4"
+    pretty-format "^29.0.1"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/environment@^29.0.1":
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-29.0.1.tgz#d236ce9e906744ac58bfc59ae6f7c9882ace7927"
+  integrity sha512-iLcFfoq2K6DAB+Mc+2VNLzZVmHdwQFeSqvoM/X8SMON6s/+yEi1iuRX3snx/JfwSnvmiMXjSr0lktxNxOcqXYA==
+  dependencies:
+    "@jest/fake-timers" "^29.0.1"
+    "@jest/types" "^29.0.1"
+    "@types/node" "*"
+    jest-mock "^29.0.1"
+
+"@jest/expect-utils@^29.0.1":
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/expect-utils/-/expect-utils-29.0.1.tgz#c1a84ee66caaef537f351dd82f7c63d559cf78d5"
+  integrity sha512-Tw5kUUOKmXGQDmQ9TSgTraFFS7HMC1HG/B7y0AN2G2UzjdAXz9BzK2rmNpCSDl7g7y0Gf/VLBm//blonvhtOTQ==
+  dependencies:
+    jest-get-type "^29.0.0"
+
+"@jest/expect@^29.0.1":
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/expect/-/expect-29.0.1.tgz#0ffde7f5b4c87f1dd6f8664726bd53f6cd1f7014"
+  integrity sha512-qKB3q52XDV8VUEiqKKLgLrJx7puQ8sYVqIDlul6n7SIXWS97DOK3KqbR2rDDaMtmenRHqEUl2fI+aFzx0oSemA==
+  dependencies:
+    expect "^29.0.1"
+    jest-snapshot "^29.0.1"
+
+"@jest/fake-timers@^29.0.1":
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-29.0.1.tgz#51ba7a82431db479d4b828576c139c4c0dc5e409"
+  integrity sha512-XZ+kAhLChVQ+KJNa5034p7O1Mz3vtWrelxDcMoxhZkgqmWDaEQAW9qJeutaeCfPvwaEwKYVyKDYfWpcyT8RiMw==
+  dependencies:
+    "@jest/types" "^29.0.1"
+    "@sinonjs/fake-timers" "^9.1.2"
+    "@types/node" "*"
+    jest-message-util "^29.0.1"
+    jest-mock "^29.0.1"
+    jest-util "^29.0.1"
+
+"@jest/globals@^29.0.1":
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-29.0.1.tgz#764135ad31408fb632b3126793ab3aaed933095f"
+  integrity sha512-BtZWrVrKRKNUt7T1H2S8Mz31PN7ItROCmH+V5pn10hJDUfjOCTIUwb0WtLZzm0f1tJ3Uvx+5lVZrF/VTKqNaFg==
+  dependencies:
+    "@jest/environment" "^29.0.1"
+    "@jest/expect" "^29.0.1"
+    "@jest/types" "^29.0.1"
+    jest-mock "^29.0.1"
+
+"@jest/reporters@^29.0.1":
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-29.0.1.tgz#82a491657031c1cc278bf659905e5094973309ad"
+  integrity sha512-dM3L8JmYYOsdeXUUVZClQy67Tz/v1sMo9h4AQv2U+716VLHV0zdA6Hh4FQNAHMhYw/95dbZbPX8Q+TRR7Rw+wA==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^29.0.1"
+    "@jest/test-result" "^29.0.1"
+    "@jest/transform" "^29.0.1"
+    "@jest/types" "^29.0.1"
+    "@jridgewell/trace-mapping" "^0.3.15"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^5.1.0"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.1.3"
+    jest-message-util "^29.0.1"
+    jest-util "^29.0.1"
+    jest-worker "^29.0.1"
+    slash "^3.0.0"
+    string-length "^4.0.1"
+    strip-ansi "^6.0.0"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^9.0.1"
+
+"@jest/schemas@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-28.1.3.tgz#ad8b86a66f11f33619e3d7e1dcddd7f2d40ff905"
+  integrity sha512-/l/VWsdt/aBXgjshLWOFyFt3IVdYypu5y2Wn2rOO1un6nkqIn8SLXzgIMYXFyYsRWDyF5EthmKJMIdJvk08grg==
+  dependencies:
+    "@sinclair/typebox" "^0.24.1"
+
+"@jest/schemas@^29.0.0":
+  version "29.0.0"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.0.0.tgz#5f47f5994dd4ef067fb7b4188ceac45f77fe952a"
+  integrity sha512-3Ab5HgYIIAnS0HjqJHQYZS+zXc4tUmTmBH3z83ajI6afXp8X3ZtdLX+nXx+I7LNkJD7uN9LAVhgnjDgZa2z0kA==
+  dependencies:
+    "@sinclair/typebox" "^0.24.1"
+
+"@jest/source-map@^29.0.0":
+  version "29.0.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-29.0.0.tgz#f8d1518298089f8ae624e442bbb6eb870ee7783c"
+  integrity sha512-nOr+0EM8GiHf34mq2GcJyz/gYFyLQ2INDhAylrZJ9mMWoW21mLBfZa0BUVPPMxVYrLjeiRe2Z7kWXOGnS0TFhQ==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.15"
+    callsites "^3.0.0"
+    graceful-fs "^4.2.9"
+
+"@jest/test-result@^29.0.1":
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-29.0.1.tgz#97ac334e4c6f7d016c341cdd500aa423a38e4cdd"
+  integrity sha512-XCA4whh/igxjBaR/Hg8qwFd/uTsauoD7QAdAYUjV2CSGx0+iunhjoCRRWTwqjQrETRqOJABx6kNfw0+C0vMSgQ==
+  dependencies:
+    "@jest/console" "^29.0.1"
+    "@jest/types" "^29.0.1"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^29.0.1":
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-29.0.1.tgz#7074b5f89ce30941b5b0fb493a19308d441a30b8"
+  integrity sha512-3GhSBMCRcWXGluP2Dw7CLP6mNke/t+EcftF5YjzhX1BJmqcatMbtZVwjuCfZy0TCME1GevXy3qTyV5PLpwIFKQ==
+  dependencies:
+    "@jest/test-result" "^29.0.1"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.0.1"
+    slash "^3.0.0"
+
+"@jest/transform@^29.0.1":
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-29.0.1.tgz#fdaa5d9e135c9bd7addbe65bedd1f15ad028cc7e"
+  integrity sha512-6UxXtqrPScFdDhoip8ys60dQAIYppQinyR87n9nlasR/ZnFfJohKToqzM29KK4gb9gHRv5oDFChdqZKE0SIhsg==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/types" "^29.0.1"
+    "@jridgewell/trace-mapping" "^0.3.15"
+    babel-plugin-istanbul "^6.1.1"
+    chalk "^4.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.1.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.0.1"
+    jest-regex-util "^29.0.0"
+    jest-util "^29.0.1"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
+    slash "^3.0.0"
+    write-file-atomic "^4.0.1"
+
+"@jest/types@^28.1.3":
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-28.1.3.tgz#b05de80996ff12512bc5ceb1d208285a7d11748b"
+  integrity sha512-RyjiyMUZrKz/c+zlMFO1pm70DcIlST8AeWTkoUdZevew44wcNZQHsEVOiCVtgVnlFFD82FPaXycys58cf2muVQ==
+  dependencies:
+    "@jest/schemas" "^28.1.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
+"@jest/types@^29.0.1":
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.0.1.tgz#1985650acf137bdb81710ff39a4689ec071dd86a"
+  integrity sha512-ft01rxzVsbh9qZPJ6EFgAIj3PT9FCRfBF9Xljo2/33VDOUjLZr0ZJ2oKANqh9S/K0/GERCsHDAQlBwj7RxA+9g==
+  dependencies:
+    "@jest/schemas" "^29.0.0"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
+"@jridgewell/gen-mapping@^0.1.0":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz#e5d2e450306a9491e3bd77e323e38d7aff315996"
+  integrity sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.0"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
+"@jridgewell/gen-mapping@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
+  integrity sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==
+  dependencies:
+    "@jridgewell/set-array" "^1.0.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
 "@jridgewell/resolve-uri@^3.0.3":
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.7.tgz#30cd49820a962aff48c8fffc5cd760151fca61fe"
   integrity sha512-8cXDaBBHOr2pQ7j77Y6Vp5VDT2sIqWyWQ56TjEq4ih/a4iST3dItRe8Q9fp0rrIl9DoKhWQtUQz/YpOxLkXbNA==
 
+"@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
+  integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
+
 "@jridgewell/sourcemap-codec@^1.4.10":
   version "1.4.13"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz#b6461fb0c2964356c469e115f504c95ad97ab88c"
@@ -153,6 +698,14 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.15", "@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.15.tgz#aba35c48a38d3fd84b37e66c9c0423f9744f9774"
+  integrity sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
 "@koa/cors@3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@koa/cors/-/cors-3.1.0.tgz#618bb073438cfdbd3ebd0e648a76e33b84f3a3b2"
@@ -191,6 +744,35 @@
     semver "^7.3.5"
     tar "^6.1.11"
 
+"@nestjs/common@9.0.11":
+  version "9.0.11"
+  resolved "https://registry.yarnpkg.com/@nestjs/common/-/common-9.0.11.tgz#5747cfbb5d94d909bc2894bf2a5bec83fca809c5"
+  integrity sha512-oYLIcOal3QOwcqt6goXovRNg8ZkalyOMjH0oYYzfJLrait6P7c6nAeWHu4qFDThY7GoZHEanLgji1qlqVEW09g==
+  dependencies:
+    iterare "1.2.1"
+    tslib "2.4.0"
+    uuid "8.3.2"
+
+"@nestjs/core@9.0.11":
+  version "9.0.11"
+  resolved "https://registry.yarnpkg.com/@nestjs/core/-/core-9.0.11.tgz#1bed969d81685f17d4a01f854c43a222dd3e13ce"
+  integrity sha512-DYyoiWSGebDAG8WSfG/ue88HBU39kAJTi2YXftWdVSl1LFveV+pwKY83P2qX0ND38TS8WktFYpaMkXslf97BBQ==
+  dependencies:
+    "@nuxtjs/opencollective" "0.3.2"
+    fast-safe-stringify "2.1.1"
+    iterare "1.2.1"
+    object-hash "3.0.0"
+    path-to-regexp "3.2.0"
+    tslib "2.4.0"
+    uuid "8.3.2"
+
+"@nestjs/testing@9.0.11":
+  version "9.0.11"
+  resolved "https://registry.yarnpkg.com/@nestjs/testing/-/testing-9.0.11.tgz#8e60107a7aaf9fc7b2bf29d473c2bdb1887de017"
+  integrity sha512-tT+yj3av7ZJb9Cy09C4+FoUULvzUntf81g5eK5shRVeQ35RWqr7E5Uq77B7ePUF2Er/TictVZk43d7rKq1ClNA==
+  dependencies:
+    tslib "2.4.0"
+
 "@node-redis/bloom@^1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@node-redis/bloom/-/bloom-1.0.1.tgz#144474a0b7dc4a4b91badea2cfa9538ce0a1854e"
@@ -278,6 +860,15 @@
     pngjs-nozlib "1.0.0"
     through "2.3.4"
 
+"@nuxtjs/opencollective@0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/opencollective/-/opencollective-0.3.2.tgz#620ce1044f7ac77185e825e1936115bb38e2681c"
+  integrity sha512-um0xL3fO7Mf4fDxcqx9KryrB7zgRM5JSlvGN5AGkP6JLM5XEKyjeAiPbNxdXVXQ16isuAhYpvP88NgL2BGd6aA==
+  dependencies:
+    chalk "^4.1.0"
+    consola "^2.15.0"
+    node-fetch "^2.6.1"
+
 "@peertube/http-signature@1.7.0":
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/@peertube/http-signature/-/http-signature-1.7.0.tgz#12a84f3fc62e786aa3a2eb09426417bad65736dc"
@@ -313,6 +904,11 @@
     pluralize "^8.0.0"
     yaml-ast-parser "0.0.43"
 
+"@sinclair/typebox@^0.24.1":
+  version "0.24.31"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.31.tgz#3f3752bc830a9daa4a0185573f0bf870089c3222"
+  integrity sha512-uWZaAsh9WFhcY1rWLLcMU/omiIIAQ/PmgqplaF6UWY6ULPH0ZO8hupJRAydzlTQZJIK3Voz8o8dYlEx+Cm6BAA==
+
 "@sindresorhus/is@^4.0.0":
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-4.6.0.tgz#3c7c9c46e678feefe7a2e5bb609d3dbd665ffb3f"
@@ -330,7 +926,7 @@
   dependencies:
     type-detect "4.0.8"
 
-"@sinonjs/fake-timers@9.1.2":
+"@sinonjs/fake-timers@9.1.2", "@sinonjs/fake-timers@^9.1.2":
   version "9.1.2"
   resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-9.1.2.tgz#4eaab737fab77332ab132d396a3c0d364bd0ea8c"
   integrity sha512-BPS4ynJW/o92PUR4wgriz2Ud5gpST5vz6GQfMixEDK0Z8ZCUv2M7SkBLykH56T++Xs+8ln9zTGbOvNGIe02/jw==
@@ -488,6 +1084,39 @@
   dependencies:
     "@types/node" "*"
 
+"@types/babel__core@^7.1.14":
+  version "7.1.19"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.19.tgz#7b497495b7d1b4812bdb9d02804d0576f43ee460"
+  integrity sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.6.4"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.4.tgz#1f20ce4c5b1990b37900b63f050182d28c2439b7"
+  integrity sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.1.tgz#3d1a48fd9d6c0edfd56f2ff578daed48f36c8969"
+  integrity sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.6":
+  version "7.18.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.18.1.tgz#ce5e2c8c272b99b7a9fd69fa39f0b4cd85028bd9"
+  integrity sha512-FSdLaZh2UxaMuLp9lixWaHq/golWTRWOnRsAXzDTDSDOQLuZb1nsdCt6pJSPWSEQt2eFZ2YVk3oYhn+1kLMeMA==
+  dependencies:
+    "@babel/types" "^7.3.0"
+
 "@types/bcryptjs@2.4.2":
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/@types/bcryptjs/-/bcryptjs-2.4.2.tgz#e3530eac9dd136bfdfb0e43df2c4c5ce1f77dfae"
@@ -598,6 +1227,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/graceful-fs@^4.1.3":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
+  integrity sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/http-assert@*":
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/@types/http-assert/-/http-assert-1.5.1.tgz#d775e93630c2469c2f980fc27e3143240335db3b"
@@ -620,6 +1256,33 @@
   dependencies:
     "@types/node" "*"
 
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
+  integrity sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==
+
+"@types/istanbul-lib-report@*":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
+  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "*"
+
+"@types/istanbul-reports@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz#9153fe98bba2bd565a63add9436d6f0d7f8468ff"
+  integrity sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
+"@types/jest@29.0.0":
+  version "29.0.0"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.0.0.tgz#bc66835bf6b09d6a47e22c21d7f5b82692e60e72"
+  integrity sha512-X6Zjz3WO4cT39Gkl0lZ2baFRaEMqJl5NC1OjElkwtNzAlbkr2K/WJXkBkH5VP0zx4Hgsd2TZYdOEfvp2Dxia+Q==
+  dependencies:
+    expect "^29.0.0"
+    pretty-format "^29.0.0"
+
 "@types/js-yaml@4.0.5":
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.5.tgz#738dd390a6ecc5442f35e7f03fa1431353f7e138"
@@ -786,11 +1449,6 @@
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.1.tgz#dc488842312a7f075149312905b5e3c0b054c79d"
   integrity sha512-FwI9gX75FgVBJ7ywgnq/P7tw+/o1GUbtP0KzbtusLigAOgIgNISRK0ZPl4qertvXSIE8YbsVJueQ90cDt9YYyw==
 
-"@types/mocha@9.1.1":
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-9.1.1.tgz#e7c4f1001eefa4b8afbd1eee27a237fee3bf29c4"
-  integrity sha512-Z61JK7DKDtdKTWwLeElSEBcWGRLY8g95ic5FoQqI9CMx0ns/Ghep3B4DfcEimiKMvtamNVULVNKEsiwV3aQmXw==
-
 "@types/node-fetch@3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-3.0.3.tgz#9d969c9a748e841554a40ee435d26e53fa3ee899"
@@ -840,6 +1498,20 @@
   resolved "https://registry.yarnpkg.com/@types/offscreencanvas/-/offscreencanvas-2019.3.0.tgz#3336428ec7e9180cf4566dfea5da04eb586a6553"
   integrity sha512-esIJx9bQg+QYF0ra8GnvfianIY8qWB0GBx54PK5Eps6m+xTj86KLavHv6qDhzKcu5UUOgNfJ2pWaIIV7TRUd9Q==
 
+"@types/pg@8.6.5":
+  version "8.6.5"
+  resolved "https://registry.yarnpkg.com/@types/pg/-/pg-8.6.5.tgz#2dce9cb468a6a5e0f1296a59aea3ac75dd27b702"
+  integrity sha512-tOkGtAqRVkHa/PVZicq67zuujI4Oorfglsr2IbKofDwBSysnaqSx7W1mDqFqdkGE6Fbgh+PZAl0r/BWON/mozw==
+  dependencies:
+    "@types/node" "*"
+    pg-protocol "*"
+    pg-types "^2.2.0"
+
+"@types/prettier@^2.1.5":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.0.tgz#ea03e9f0376a4446f44797ca19d9c46c36e352dc"
+  integrity sha512-RI1L7N4JnW5gQw2spvL7Sllfuf1SaHdrZpCHiBlCXjIlufi1SMNnbu2teze3/QE67Fg2tBlH7W+mi4hVNk4p0A==
+
 "@types/pug@2.0.6":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.6.tgz#f830323c88172e66826d0bde413498b61054b5a6"
@@ -949,6 +1621,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/stack-utils@^2.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
+  integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
+
 "@types/tinycolor2@1.4.3":
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.3.tgz#ed4a0901f954b126e6a914b4839c77462d56e706"
@@ -1000,6 +1677,18 @@
   dependencies:
     "@types/node" "*"
 
+"@types/yargs-parser@*":
+  version "21.0.0"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
+  integrity sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA==
+
+"@types/yargs@^17.0.8":
+  version "17.0.12"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.12.tgz#0745ff3e4872b4ace98616d4b7e37ccbd75f9526"
+  integrity sha512-Nz4MPhecOFArtm81gFQvQqdV7XYCrWKx5uUt6GNHredFHn1i2mtWqXTON7EPXMtNi1qjtjEM/VCHDhcHsAMLXQ==
+  dependencies:
+    "@types/yargs-parser" "*"
+
 "@typescript-eslint/eslint-plugin@5.36.2":
   version "5.36.2"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.36.2.tgz#6df092a20e0f9ec748b27f293a12cb39d0c1fe4d"
@@ -1081,11 +1770,6 @@
     "@typescript-eslint/types" "5.36.2"
     eslint-visitor-keys "^3.3.0"
 
-"@ungap/promise-all-settled@1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44"
-  integrity sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==
-
 "@webgpu/types@0.1.16":
   version "0.1.16"
   resolved "https://registry.yarnpkg.com/@webgpu/types/-/types-0.1.16.tgz#1f05497b95b7c013facf7035c8e21784645f5cc4"
@@ -1230,10 +1914,12 @@ ajv@^6.12.3:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ansi-colors@4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
-  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
+ansi-escapes@^4.2.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
+  dependencies:
+    type-fest "^0.21.3"
 
 ansi-regex@^2.0.0:
   version "2.1.1"
@@ -1277,23 +1963,28 @@ ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+ansi-styles@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
+  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
+
 any-promise@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
   integrity sha1-q8av7tzqUugJzcA3au0845Y10X8=
 
-anymatch@~3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
-  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+anymatch@^3.0.3, anymatch@~3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
+  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
   dependencies:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-anymatch@~3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
-  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
+anymatch@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
   dependencies:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
@@ -1368,7 +2059,7 @@ arg@^4.1.0:
   resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
   integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
 
-argparse@^1.0.10:
+argparse@^1.0.10, argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
   integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
@@ -1497,6 +2188,66 @@ axios@^0.24.0:
   dependencies:
     follow-redirects "^1.14.4"
 
+babel-jest@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-29.0.1.tgz#db50de501fc8727e768f5aa417496cb871ee1ba0"
+  integrity sha512-wyI9r8tqwsZEMWiIaYjdUJ6ztZIO4DMWpGq7laW34wR71WtRS+D/iBEtXOP5W2aSYCVUQMsypRl/xiJYZznnTg==
+  dependencies:
+    "@jest/transform" "^29.0.1"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^29.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    slash "^3.0.0"
+
+babel-plugin-istanbul@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
+  integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^5.0.4"
+    test-exclude "^6.0.0"
+
+babel-plugin-jest-hoist@^29.0.0:
+  version "29.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.0.0.tgz#ae4873399a199ede93697a15919d3d0f614a2eb1"
+  integrity sha512-B9oaXrlxXHFWeWqhDPg03iqQd2UN/mg/VdZOsLaqAVBkztru3ctTryAI4zisxLEEgmcUnLTKewqx0gGifoXD3A==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.1.14"
+    "@types/babel__traverse" "^7.0.6"
+
+babel-preset-current-node-syntax@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
+  integrity sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==
+  dependencies:
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-bigint" "^7.8.3"
+    "@babel/plugin-syntax-class-properties" "^7.8.3"
+    "@babel/plugin-syntax-import-meta" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.8.3"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-top-level-await" "^7.8.3"
+
+babel-preset-jest@^29.0.0:
+  version "29.0.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-29.0.0.tgz#52d7f1afe3a15d14a3c5ab4349cbd388d98d330b"
+  integrity sha512-B5Ke47Xcs8rDF3p1korT3LoilpADCwbG93ALqtvqu6Xpf4d8alKkrCBTExbNzdHJcIuEPpfYvEaFFRGee2kUgQ==
+  dependencies:
+    babel-plugin-jest-hoist "^29.0.0"
+    babel-preset-current-node-syntax "^1.0.0"
+
 babel-walk@3.0.0-canary-5:
   version "3.0.0-canary-5"
   resolved "https://registry.yarnpkg.com/babel-walk/-/babel-walk-3.0.0-canary-5.tgz#f66ecd7298357aee44955f235a6ef54219104b11"
@@ -1620,10 +2371,29 @@ browser-process-hrtime@^1.0.0:
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
   integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
-browser-stdout@1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
-  integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==
+browserslist@^4.20.2:
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.3.tgz#5df277694eb3c48bc5c4b05af3e8b7e09c5a6d1a"
+  integrity sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==
+  dependencies:
+    caniuse-lite "^1.0.30001370"
+    electron-to-chromium "^1.4.202"
+    node-releases "^2.0.6"
+    update-browserslist-db "^1.0.5"
+
+bs-logger@0.x:
+  version "0.2.6"
+  resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
+  integrity sha512-pd8DCoxmbgc7hyPKOvxtqNcjYoOsABPQdcCUjGp3d42VR2CX1ORhk2A87oqqu5R1kk+76nsxZupkmyd+MVtCog==
+  dependencies:
+    fast-json-stable-stringify "2.x"
+
+bser@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
+  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
+  dependencies:
+    node-int64 "^0.4.0"
 
 buffer-crc32@^0.2.1, buffer-crc32@^0.2.13:
   version "0.2.13"
@@ -1788,15 +2558,20 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camelcase@^5.0.0:
+camelcase@^5.0.0, camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-camelcase@^6.0.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
-  integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
+camelcase@^6.2.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
+  integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+
+caniuse-lite@^1.0.30001370:
+  version "1.0.30001385"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001385.tgz#51d5feeb60b831a5b4c7177f419732060418535c"
+  integrity sha512-MpiCqJGhBkHgpyimE9GWmZTnyHyEEM35u115bD3QBrXpjvL/JgcP8cUhKJshfmg4OtEHFenifcK5sZayEw5tvQ==
 
 canonicalize@^1.0.1:
   version "1.0.1"
@@ -1850,7 +2625,7 @@ chalk@5.0.1:
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.0.1.tgz#ca57d71e82bb534a296df63bbacc4a1c22b2a4b6"
   integrity sha512-Fo07WOYGqMfCWHOzSXOt2CxDbC6skS/jO9ynEcmpANMoPrD+W1r1K6Vx7iNm+AQmETU1Xr2t+n8nzkV9t6xh3w==
 
-chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -1909,7 +2684,22 @@ cheerio@0.22.0:
     lodash.reject "^4.4.0"
     lodash.some "^4.4.0"
 
-chokidar@3.5.3, chokidar@^3.3.1, chokidar@^3.5.3:
+chokidar@3.5.3:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+chokidar@^3.3.1, chokidar@^3.5.3:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.3.1.tgz#c84e5b3d18d9a4d77558fef466b1bf16bbeb3450"
   integrity sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==
@@ -1934,6 +2724,16 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
+ci-info@^3.2.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.3.2.tgz#6d2967ffa407466481c6c90b6e16b3098f080128"
+  integrity sha512-xmDt/QIAdeZ9+nfdPsaBCpMvHNLFiLdjj59qjqn+6iPe6YmHGQ35sBnQ8uslRBXFmXkiZQOJRjvQeoGppoTjjg==
+
+cjs-module-lexer@^1.0.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
+  integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -2011,6 +2811,11 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
+collect-v8-coverage@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
+  integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
+
 color-convert@2.0.1, color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
@@ -2120,6 +2925,11 @@ config-chain@^1.1.12:
     ini "^1.3.4"
     proto-list "~1.2.1"
 
+consola@^2.15.0:
+  version "2.15.3"
+  resolved "https://registry.yarnpkg.com/consola/-/consola-2.15.3.tgz#2e11f98d6a4be71ff72e0bdf07bd23e12cb61550"
+  integrity sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==
+
 console-control-strings@^1.0.0, console-control-strings@^1.1.0, console-control-strings@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
@@ -2159,6 +2969,13 @@ content-type@^1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
+convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
+  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
 cookies@~0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/cookies/-/cookies-0.8.0.tgz#1293ce4b391740a8406e3c9870e828c4b54f3f90"
@@ -2330,13 +3147,6 @@ debug@4.3.3:
   dependencies:
     ms "2.1.2"
 
-debug@4.3.4, debug@^4.3.3, debug@^4.3.4:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
-  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
-  dependencies:
-    ms "2.1.2"
-
 debug@^3.1.0, debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -2358,6 +3168,13 @@ debug@^4.3.2:
   dependencies:
     ms "2.1.2"
 
+debug@^4.3.3, debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
 debuglog@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
@@ -2368,11 +3185,6 @@ decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
-decamelize@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-4.0.0.tgz#aa472d7bf660eb15f3494efd531cab7f2a709837"
-  integrity sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==
-
 decimal.js@^10.3.1:
   version "10.3.1"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.3.1.tgz#d8c3a444a9c6774ba60ca6ad7261c3a94fd5e783"
@@ -2385,6 +3197,11 @@ decompress-response@^6.0.0:
   dependencies:
     mimic-response "^3.1.0"
 
+dedent@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
+  integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
+
 deep-email-validator@0.1.21:
   version "0.1.21"
   resolved "https://registry.yarnpkg.com/deep-email-validator/-/deep-email-validator-0.1.21.tgz#5d0120fe1aeae83ab7cb39378a40a381b681219f"
@@ -2480,6 +3297,11 @@ detect-libc@^2.0.0:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.0.tgz#c528bc09bc6d1aa30149228240917c225448f204"
   integrity sha512-S55LzUl8HUav8l9E2PBTlC5PAJrHK7tkM+XXFGD+fbsbkTzhCpG6K05LxJcUOEWzMa4v6ptcMZ9s3fOdJDu0Zw==
 
+detect-newline@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
+  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
+
 dicer@0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/dicer/-/dicer-0.2.5.tgz#5996c086bb33218c812c090bddc09cd12facb70f"
@@ -2488,10 +3310,10 @@ dicer@0.2.5:
     readable-stream "1.1.x"
     streamsearch "0.1.2"
 
-diff@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
-  integrity sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==
+diff-sequences@^29.0.0:
+  version "29.0.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.0.0.tgz#bae49972ef3933556bcb0800b72e8579d19d9e4f"
+  integrity sha512-7Qe/zd1wxSDL4D/X/FPjOMB+ZMDt71W94KYaq05I2l0oQqgXgs7s4ftYYmV38gBSrPz2vcygxfs1xn0FT+rKNA==
 
 diff@^4.0.1:
   version "4.0.2"
@@ -2676,6 +3498,16 @@ ejs@^3.1.7:
   dependencies:
     jake "^10.8.5"
 
+electron-to-chromium@^1.4.202:
+  version "1.4.235"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.235.tgz#48ac33c4e869a1795013788099470061463d1890"
+  integrity sha512-eNU2SmVZYTzYVA5aAWmhAJbdVil5/8H5nMq6kGD0Yxd4k2uKIuT8YmS46I0QXY7iOoPPcb6jjem9/2xyuH5+XQ==
+
+emittery@^0.10.2:
+  version "0.10.2"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.10.2.tgz#902eec8aedb8c41938c46e9385e9db7e03182933"
+  integrity sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -2753,6 +3585,13 @@ err-code@^2.0.2:
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
   integrity sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==
 
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
 es-abstract@^1.19.0, es-abstract@^1.19.1:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.19.1.tgz#d4885796876916959de78edaa0df456627115ec3"
@@ -2870,16 +3709,21 @@ escape-regexp@0.0.1:
   resolved "https://registry.yarnpkg.com/escape-regexp/-/escape-regexp-0.0.1.tgz#f44bda12d45bbdf9cb7f862ee7e4827b3dd32254"
   integrity sha1-9EvaEtRbvfnLf4Yu5+SCez3TIlQ=
 
-escape-string-regexp@4.0.0, escape-string-regexp@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
-  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
-
 escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
 escodegen@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd"
@@ -3014,7 +3858,7 @@ espree@^9.4.0:
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^3.3.0"
 
-esprima@^4.0.1:
+esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
@@ -3083,16 +3927,47 @@ execa@6.1.0:
     signal-exit "^3.0.7"
     strip-final-newline "^3.0.0"
 
+execa@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
+  dependencies:
+    cross-spawn "^7.0.3"
+    get-stream "^6.0.0"
+    human-signals "^2.1.0"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.1"
+    onetime "^5.1.2"
+    signal-exit "^3.0.3"
+    strip-final-newline "^2.0.0"
+
 exit-on-epipe@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz#0bdd92e87d5285d267daa8171d0eb06159689692"
   integrity sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw==
 
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+  integrity sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==
+
 expand-template@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c"
   integrity sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==
 
+expect@^29.0.0, expect@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-29.0.1.tgz#a2fa64a59cffe4b4007877e730bc82be3d1742bb"
+  integrity sha512-yQgemsjLU+1S8t2A7pXT3Sn/v5/37LY8J+tocWtKEA0iEYYc6gfKbbJJX2fxHZmd7K9WpdbQqXUpmYkq1aewYg==
+  dependencies:
+    "@jest/expect-utils" "^29.0.1"
+    jest-get-type "^29.0.0"
+    jest-matcher-utils "^29.0.1"
+    jest-message-util "^29.0.1"
+    jest-util "^29.0.1"
+
 ext@^1.1.2:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/ext/-/ext-1.4.0.tgz#89ae7a07158f79d35517882904324077e4379244"
@@ -3155,7 +4030,7 @@ fast-glob@^3.2.9:
     merge2 "^1.3.0"
     micromatch "^4.0.4"
 
-fast-json-stable-stringify@^2.0.0:
+fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0, fast-json-stable-stringify@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
@@ -3165,6 +4040,11 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fast-safe-stringify@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz#c406a83b6e70d9e35ce3b30a81141df30aeba884"
+  integrity sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==
+
 fast-xml-parser@^3.19.0:
   version "3.19.0"
   resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-3.19.0.tgz#cb637ec3f3999f51406dd8ff0e6fc4d83e520d01"
@@ -3177,6 +4057,13 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fb-watchman@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.1.tgz#fc84fb39d2709cf3ff6d743706157bb5708a8a85"
+  integrity sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==
+  dependencies:
+    bser "2.1.1"
+
 feed@4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/feed/-/feed-4.2.2.tgz#865783ef6ed12579e2c44bbef3c9113bc4956a7e"
@@ -3222,14 +4109,6 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-find-up@5.0.0, find-up@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
-  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
-  dependencies:
-    locate-path "^6.0.0"
-    path-exists "^4.0.0"
-
 find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@@ -3237,7 +4116,7 @@ find-up@^2.1.0:
   dependencies:
     locate-path "^2.0.0"
 
-find-up@^4.1.0:
+find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
   integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
@@ -3245,6 +4124,14 @@ find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
@@ -3253,11 +4140,6 @@ flat-cache@^3.0.4:
     flatted "^3.1.0"
     rimraf "^3.0.2"
 
-flat@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
-  integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
-
 flatted@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.0.tgz#a5d06b4a8b01e3a63771daa5cb7a1903e2e57067"
@@ -3365,16 +4247,16 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
+fsevents@^2.3.2, fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 fsevents@~2.1.2:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
   integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
 
-fsevents@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
-  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
-
 fstream@^1.0.12:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.12.tgz#4e8ba8ee2d48be4f7d0de505455548eae5932045"
@@ -3459,6 +4341,11 @@ generic-pool@3.8.2:
   resolved "https://registry.yarnpkg.com/generic-pool/-/generic-pool-3.8.2.tgz#aab4f280adb522fdfbdc5e5b64d718d3683f04e9"
   integrity sha512-nGToKy6p3PAbYQ7p1UlWl6vSPwfwU6TMSWK7TTu+WUY4ZjyZQGniGGt2oNVvyNSpyZYSB43zMXVLcBm08MTMkg==
 
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
 get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
@@ -3473,6 +4360,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-package-type@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
+  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
+
 get-paths@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/get-paths/-/get-paths-0.0.7.tgz#15331086752077cf130166ccd233a1cdbeefcf38"
@@ -3509,7 +4401,7 @@ get-stream@^5.1.0:
   dependencies:
     pump "^3.0.0"
 
-get-stream@^6.0.1:
+get-stream@^6.0.0, get-stream@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
@@ -3555,10 +4447,10 @@ glob-parent@^6.0.1:
   dependencies:
     is-glob "^4.0.3"
 
-glob@7.2.0, glob@^7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
-  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+glob@^7.1.3, glob@^7.1.4:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
@@ -3567,10 +4459,10 @@ glob@7.2.0, glob@^7.2.0:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.3, glob@^7.1.4:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+glob@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
+  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
@@ -3590,6 +4482,11 @@ glob@^8.0.1:
     minimatch "^5.0.1"
     once "^1.3.0"
 
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
 globals@^13.15.0:
   version "13.15.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.15.0.tgz#38113218c907d2f7e98658af246cef8b77e90bac"
@@ -3677,6 +4574,11 @@ graceful-fs@^4.2.6:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
+graceful-fs@^4.2.9:
+  version "4.2.10"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
+  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
+
 grapheme-splitter@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
@@ -3756,11 +4658,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-he@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
-  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
-
 highlight.js@^10.7.1:
   version "10.7.2"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.2.tgz#89319b861edc66c48854ed1e6da21ea89f847360"
@@ -3788,6 +4685,11 @@ html-entities@2.3.2:
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.2.tgz#760b404685cb1d794e4f4b744332e3b00dcfe488"
   integrity sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==
 
+html-escaper@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
+  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
+
 htmlparser2@^3.9.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
@@ -3909,6 +4811,11 @@ https-proxy-agent@^5.0.1:
     agent-base "6"
     debug "4"
 
+human-signals@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
+
 human-signals@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-3.0.1.tgz#c740920859dafa50e5a3222da9d3bf4bb0e5eef5"
@@ -3975,6 +4882,14 @@ import-fresh@^3.0.0, import-fresh@^3.2.1:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
+import-local@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.1.0.tgz#b4479df8a5fd44f6cdce24070675676063c95cb4"
+  integrity sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -4093,6 +5008,11 @@ is-arguments@^1.0.4:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
 is-arrayish@^0.3.1:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
@@ -4189,6 +5109,11 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-generator-fn@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
+  integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
+
 is-generator-function@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.7.tgz#d2132e529bb0000a7f80794d4bdf5cd5e5813522"
@@ -4235,11 +5160,6 @@ is-number@^7.0.0:
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
-is-plain-obj@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
-  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
-
 is-plain-object@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
@@ -4282,6 +5202,11 @@ is-shared-array-buffer@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
 is-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-3.0.0.tgz#e6bfd7aa6bef69f4f472ce9bb681e3e57b4319ac"
@@ -4331,59 +5256,472 @@ is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==
 
-is-unicode-supported@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz#3f26c76a809593b52bfa2ecb5710ed2779b522a7"
-  integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
+is-weakref@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.1.tgz#842dba4ec17fa9ac9850df2d6efbc1737274f2a2"
+  integrity sha512-b2jKc2pQZjaeFYWEf7ScFj+Be1I+PXmlu572Q8coTXZ+LD/QQZ7ShPMst8h16riVgyXTQwUsFEl74mDvc/3MHQ==
+  dependencies:
+    call-bind "^1.0.0"
+
+is-weakref@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-whitespace@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f"
+  integrity sha1-Fjnssb4DauxppUy7QBz77XEUq38=
+
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
+isarray@^1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+  integrity sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==
+
+istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
+  integrity sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==
+
+istanbul-lib-instrument@^5.0.4, istanbul-lib-instrument@^5.1.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.0.tgz#31d18bdd127f825dd02ea7bfdfd906f8ab840e9f"
+  integrity sha512-6Lthe1hqXHBNsqvgDzGO6l03XNeu3CrG4RqQ1KM9+l5+jNGpEJfIELx1NS3SEHmJQA8np/u+E4EPRKRiu6m19A==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^6.3.0"
+
+istanbul-lib-report@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#7518fe52ea44de372f460a76b5ecda9ffb73d8a6"
+  integrity sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==
+  dependencies:
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^3.0.0"
+    supports-color "^7.1.0"
+
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz#895f3a709fcfba34c6de5a42939022f3e4358551"
+  integrity sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^3.0.0"
+    source-map "^0.6.1"
+
+istanbul-reports@^3.1.3:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.5.tgz#cc9a6ab25cb25659810e4785ed9d9fb742578bae"
+  integrity sha512-nUsEMa9pBt/NOHqbcbeJEgqIlY/K7rVWUX6Lql2orY5e9roQOthbR3vtY4zzf2orPELg80fnxxk9zUyPlgwD1w==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
+iterare@1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/iterare/-/iterare-1.2.1.tgz#139c400ff7363690e33abffa33cbba8920f00042"
+  integrity sha512-RKYVTCjAnRthyJes037NX/IiqeidgN1xc3j1RjFfECFp28A1GVwK9nA+i0rJPaHqSZwygLzRnFlzUuHFoWWy+Q==
+
+jake@^10.8.5:
+  version "10.8.5"
+  resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.5.tgz#f2183d2c59382cb274226034543b9c03b8164c46"
+  integrity sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==
+  dependencies:
+    async "^3.2.3"
+    chalk "^4.0.2"
+    filelist "^1.0.1"
+    minimatch "^3.0.4"
+
+jest-changed-files@^29.0.0:
+  version "29.0.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-29.0.0.tgz#aa238eae42d9372a413dd9a8dadc91ca1806dce0"
+  integrity sha512-28/iDMDrUpGoCitTURuDqUzWQoWmOmOKOFST1mi2lwh62X4BFf6khgH3uSuo1e49X/UDjuApAj3w0wLOex4VPQ==
+  dependencies:
+    execa "^5.0.0"
+    p-limit "^3.1.0"
+
+jest-circus@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-29.0.1.tgz#7ecb4913e134fb4addc03655fb36c9398014fa07"
+  integrity sha512-I5J4LyK3qPo8EnqPmxsMAVR+2SFx7JOaZsbqW9xQmk4UDmTCD92EQgS162Ey3Jq6CfpKJKFDhzhG3QqiE0fRbw==
+  dependencies:
+    "@jest/environment" "^29.0.1"
+    "@jest/expect" "^29.0.1"
+    "@jest/test-result" "^29.0.1"
+    "@jest/types" "^29.0.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^29.0.1"
+    jest-matcher-utils "^29.0.1"
+    jest-message-util "^29.0.1"
+    jest-runtime "^29.0.1"
+    jest-snapshot "^29.0.1"
+    jest-util "^29.0.1"
+    p-limit "^3.1.0"
+    pretty-format "^29.0.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-cli@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-29.0.1.tgz#6633c2ab97337ac5207910bd6b0aba2ef0900110"
+  integrity sha512-XozBHtoJCS6mnjCxNESyGm47Y4xSWzNlBJj4tix9nGrG6m068B83lrTWKtjYAenYSfOqyYVpQCkyqUp35IT+qA==
+  dependencies:
+    "@jest/core" "^29.0.1"
+    "@jest/test-result" "^29.0.1"
+    "@jest/types" "^29.0.1"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.9"
+    import-local "^3.0.2"
+    jest-config "^29.0.1"
+    jest-util "^29.0.1"
+    jest-validate "^29.0.1"
+    prompts "^2.0.1"
+    yargs "^17.3.1"
+
+jest-config@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-29.0.1.tgz#bccc2aedc3bafb6cb08bad23e5f0fcc3b1959268"
+  integrity sha512-3duIx5ucEPIsUOESDTuasMfqHonD0oZRjqHycIMHSC4JwbvHDjAWNKN/NiM0ZxHXjAYrMTLt2QxSQ+IqlbYE5A==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@jest/test-sequencer" "^29.0.1"
+    "@jest/types" "^29.0.1"
+    babel-jest "^29.0.1"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-circus "^29.0.1"
+    jest-environment-node "^29.0.1"
+    jest-get-type "^29.0.0"
+    jest-regex-util "^29.0.0"
+    jest-resolve "^29.0.1"
+    jest-runner "^29.0.1"
+    jest-util "^29.0.1"
+    jest-validate "^29.0.1"
+    micromatch "^4.0.4"
+    parse-json "^5.2.0"
+    pretty-format "^29.0.1"
+    slash "^3.0.0"
+    strip-json-comments "^3.1.1"
+
+jest-diff@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.0.1.tgz#d14e900a38ee4798d42feaaf0c61cb5b98e4c028"
+  integrity sha512-l8PYeq2VhcdxG9tl5cU78ClAlg/N7RtVSp0v3MlXURR0Y99i6eFnegmasOandyTmO6uEdo20+FByAjBFEO9nuw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^29.0.0"
+    jest-get-type "^29.0.0"
+    pretty-format "^29.0.1"
+
+jest-docblock@^29.0.0:
+  version "29.0.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-29.0.0.tgz#3151bcc45ed7f5a8af4884dcc049aee699b4ceae"
+  integrity sha512-s5Kpra/kLzbqu9dEjov30kj1n4tfu3e7Pl8v+f8jOkeWNqM6Ds8jRaJfZow3ducoQUrf2Z4rs2N5S3zXnb83gw==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-each@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-29.0.1.tgz#c17da68a7073440122dbd47dca3941351ee0cbe5"
+  integrity sha512-UmCZYU9LPvRfSDoCrKJqrCNmgTYGGb3Ga6IVsnnVjedBTRRR9GJMca7UmDKRrJ1s+U632xrVtiRD27BxaG1aaQ==
+  dependencies:
+    "@jest/types" "^29.0.1"
+    chalk "^4.0.0"
+    jest-get-type "^29.0.0"
+    jest-util "^29.0.1"
+    pretty-format "^29.0.1"
+
+jest-environment-node@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-29.0.1.tgz#b09db2a1b8439aace11a6805719d92498a64987e"
+  integrity sha512-PcIRBrEBFAPBqkbL53ZpEvTptcAnOW6/lDfqBfACMm3vkVT0N7DcfkH/hqNSbDmSxzGr0FtJI6Ej3TPhveWCMA==
+  dependencies:
+    "@jest/environment" "^29.0.1"
+    "@jest/fake-timers" "^29.0.1"
+    "@jest/types" "^29.0.1"
+    "@types/node" "*"
+    jest-mock "^29.0.1"
+    jest-util "^29.0.1"
+
+jest-get-type@^29.0.0:
+  version "29.0.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.0.0.tgz#843f6c50a1b778f7325df1129a0fd7aa713aef80"
+  integrity sha512-83X19z/HuLKYXYHskZlBAShO7UfLFXu/vWajw9ZNJASN32li8yHMaVGAQqxFW1RCFOkB7cubaL6FaJVQqqJLSw==
+
+jest-haste-map@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-29.0.1.tgz#472212f93ef44309bf97d191f93ddd2e41169615"
+  integrity sha512-gcKOAydafpGoSBvcj/mGCfhOKO8fRLkAeee1KXGdcJ1Pb9O2nnOl4I8bQSIID2MaZeMHtLLgNboukh/pUGkBtg==
+  dependencies:
+    "@jest/types" "^29.0.1"
+    "@types/graceful-fs" "^4.1.3"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.9"
+    jest-regex-util "^29.0.0"
+    jest-util "^29.0.1"
+    jest-worker "^29.0.1"
+    micromatch "^4.0.4"
+    walker "^1.0.8"
+  optionalDependencies:
+    fsevents "^2.3.2"
+
+jest-leak-detector@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-29.0.1.tgz#1a7cf8475d85e7b2bd53efa5adc5195828a12c33"
+  integrity sha512-5tISHJphB+sCmKXtVHJGQGltj7ksrLLb9vkuNWwFR86Of1tfzjskvrrrZU1gSzEfWC+qXIn4tuh8noKHYGMIPA==
+  dependencies:
+    jest-get-type "^29.0.0"
+    pretty-format "^29.0.1"
+
+jest-matcher-utils@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.0.1.tgz#eaa92dd5405c2df9d31d45ec4486361d219de3e9"
+  integrity sha512-/e6UbCDmprRQFnl7+uBKqn4G22c/OmwriE5KCMVqxhElKCQUDcFnq5XM9iJeKtzy4DUjxT27y9VHmKPD8BQPaw==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^29.0.1"
+    jest-get-type "^29.0.0"
+    pretty-format "^29.0.1"
+
+jest-message-util@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-29.0.1.tgz#85c4b5b90296c228da158e168eaa5b079f2ab879"
+  integrity sha512-wRMAQt3HrLpxSubdnzOo68QoTfQ+NLXFzU0Heb18ZUzO2S9GgaXNEdQ4rpd0fI9dq2NXkpCk1IUWSqzYKji64A==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^29.0.1"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^29.0.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-mock@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-29.0.1.tgz#12e1b137035365b022ccdb8fd67d476cd4d4bfad"
+  integrity sha512-i1yTceg2GKJwUNZFjIzrH7Y74fN1SKJWxQX/Vu3LT4TiJerFARH5l+4URNyapZ+DNpchHYrGOP2deVbn3ma8JA==
+  dependencies:
+    "@jest/types" "^29.0.1"
+    "@types/node" "*"
+
+jest-pnp-resolver@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
+  integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
+
+jest-regex-util@^29.0.0:
+  version "29.0.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-29.0.0.tgz#b442987f688289df8eb6c16fa8df488b4cd007de"
+  integrity sha512-BV7VW7Sy0fInHWN93MMPtlClweYv2qrSCwfeFWmpribGZtQPWNvRSq9XOVgOEjU1iBGRKXUZil0o2AH7Iy9Lug==
+
+jest-resolve-dependencies@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-29.0.1.tgz#c41b88380c8ea178ce72a750029b5f3d5f65cb94"
+  integrity sha512-fUGcYlSc1NzNz+tsHDjjG0rclw6blJcFZsLEsezxm/n54bAm9HFvJxgBuCV1CJQoPtIx6AfR+tXkR9lpWJs2LQ==
+  dependencies:
+    jest-regex-util "^29.0.0"
+    jest-snapshot "^29.0.1"
+
+jest-resolve@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-29.0.1.tgz#4f1338eee2ccc7319ffce850e13eb118a9e93ce5"
+  integrity sha512-dwb5Z0lLZbptlBtPExqsHfdDamXeiRLv4vdkfPrN84vBwLSWHWcXjlM2JXD/KLSQfljBcXbzI/PDvUJuTQ84Nw==
+  dependencies:
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.0.1"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^29.0.1"
+    jest-validate "^29.0.1"
+    resolve "^1.20.0"
+    resolve.exports "^1.1.0"
+    slash "^3.0.0"
+
+jest-runner@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-29.0.1.tgz#15bacd13170f3d786168ef8548fdeb96933ea643"
+  integrity sha512-XeFfPmHtO7HyZyD1uJeO4Oqa8PyTbDHzS1YdGrvsFXk/A5eXinbqA5a42VUEqvsKQgNnKTl5NJD0UtDWg7cQ2A==
+  dependencies:
+    "@jest/console" "^29.0.1"
+    "@jest/environment" "^29.0.1"
+    "@jest/test-result" "^29.0.1"
+    "@jest/transform" "^29.0.1"
+    "@jest/types" "^29.0.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.10.2"
+    graceful-fs "^4.2.9"
+    jest-docblock "^29.0.0"
+    jest-environment-node "^29.0.1"
+    jest-haste-map "^29.0.1"
+    jest-leak-detector "^29.0.1"
+    jest-message-util "^29.0.1"
+    jest-resolve "^29.0.1"
+    jest-runtime "^29.0.1"
+    jest-util "^29.0.1"
+    jest-watcher "^29.0.1"
+    jest-worker "^29.0.1"
+    p-limit "^3.1.0"
+    source-map-support "0.5.13"
+
+jest-runtime@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-29.0.1.tgz#cafdc10834c45c50105eecb0ded8677ce741e2af"
+  integrity sha512-yDgz5OE0Rm44PUAfTqwA6cDFnTYnVcYbRpPECsokSASQ0I5RXpnKPVr2g0CYZWKzbsXqqtmM7TIk7CAutZJ7gQ==
+  dependencies:
+    "@jest/environment" "^29.0.1"
+    "@jest/fake-timers" "^29.0.1"
+    "@jest/globals" "^29.0.1"
+    "@jest/source-map" "^29.0.0"
+    "@jest/test-result" "^29.0.1"
+    "@jest/transform" "^29.0.1"
+    "@jest/types" "^29.0.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    cjs-module-lexer "^1.0.0"
+    collect-v8-coverage "^1.0.0"
+    glob "^7.1.3"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^29.0.1"
+    jest-message-util "^29.0.1"
+    jest-mock "^29.0.1"
+    jest-regex-util "^29.0.0"
+    jest-resolve "^29.0.1"
+    jest-snapshot "^29.0.1"
+    jest-util "^29.0.1"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+
+jest-snapshot@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-29.0.1.tgz#ed455cb7e56fb43e2d451edd902d622349d6afed"
+  integrity sha512-OuYGp+lsh7RhB3DDX36z/pzrGm2F740e5ERG9PQpJyDknCRtWdhaehBQyMqDnsQdKkvC2zOcetcxskiHjO7e8Q==
+  dependencies:
+    "@babel/core" "^7.11.6"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-jsx" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.3.3"
+    "@jest/expect-utils" "^29.0.1"
+    "@jest/transform" "^29.0.1"
+    "@jest/types" "^29.0.1"
+    "@types/babel__traverse" "^7.0.6"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
+    chalk "^4.0.0"
+    expect "^29.0.1"
+    graceful-fs "^4.2.9"
+    jest-diff "^29.0.1"
+    jest-get-type "^29.0.0"
+    jest-haste-map "^29.0.1"
+    jest-matcher-utils "^29.0.1"
+    jest-message-util "^29.0.1"
+    jest-util "^29.0.1"
+    natural-compare "^1.4.0"
+    pretty-format "^29.0.1"
+    semver "^7.3.5"
 
-is-weakref@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.1.tgz#842dba4ec17fa9ac9850df2d6efbc1737274f2a2"
-  integrity sha512-b2jKc2pQZjaeFYWEf7ScFj+Be1I+PXmlu572Q8coTXZ+LD/QQZ7ShPMst8h16riVgyXTQwUsFEl74mDvc/3MHQ==
+jest-util@^28.0.0:
+  version "28.1.3"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-28.1.3.tgz#f4f932aa0074f0679943220ff9cbba7e497028b0"
+  integrity sha512-XdqfpHwpcSRko/C35uLYFM2emRAltIIKZiJ9eAmhjsj0CqZMa0p1ib0R5fWIqGhn1a103DebTbpqIaP1qCQ6tQ==
   dependencies:
-    call-bind "^1.0.0"
+    "@jest/types" "^28.1.3"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
 
-is-weakref@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
-  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+jest-util@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.0.1.tgz#f854a4a8877c7817316c4afbc2a851ceb2e71598"
+  integrity sha512-GIWkgNfkeA9d84rORDHPGGTFBrRD13A38QVSKE0bVrGSnoR1KDn8Kqz+0yI5kezMgbT/7zrWaruWP1Kbghlb2A==
   dependencies:
-    call-bind "^1.0.2"
-
-is-whitespace@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f"
-  integrity sha1-Fjnssb4DauxppUy7QBz77XEUq38=
-
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
-  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+    "@jest/types" "^29.0.1"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
 
-isarray@^1.0.0, isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+jest-validate@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-29.0.1.tgz#8de8ff9d65507c0477964fd39c5b0a1778e3103d"
+  integrity sha512-mS4q7F738YXZFWBPqE+NjHU/gEOs7IBIFQ8i9zq5EO691cLrUbLhFq4larf8/lNcmauRO71tn/+DTW2y+MrLow==
+  dependencies:
+    "@jest/types" "^29.0.1"
+    camelcase "^6.2.0"
+    chalk "^4.0.0"
+    jest-get-type "^29.0.0"
+    leven "^3.1.0"
+    pretty-format "^29.0.1"
 
-isexe@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
-  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+jest-watcher@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-29.0.1.tgz#63adeb8887a0562ed8f990f413b830ef48a8db94"
+  integrity sha512-0LBWDL3sZ+vyHRYxjqm2irhfwhUXHonjLSbd0oDeGq44U1e1uUh3icWNXYF8HO/UEnOoa6+OJDncLUXP2Hdg9A==
+  dependencies:
+    "@jest/test-result" "^29.0.1"
+    "@jest/types" "^29.0.1"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.10.2"
+    jest-util "^29.0.1"
+    string-length "^4.0.1"
 
-isstream@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
-  integrity sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==
+jest-worker@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-29.0.1.tgz#fb42ff7e05e0573f330ec0cf781fc545dcd11a31"
+  integrity sha512-+B/2/8WW7goit7qVezG9vnI1QP3dlmuzi2W0zxazAQQ8dcDIA63dDn6j4pjOGBARha/ZevcwYQtNIzCySbS7fQ==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
 
-jake@^10.8.5:
-  version "10.8.5"
-  resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.5.tgz#f2183d2c59382cb274226034543b9c03b8164c46"
-  integrity sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==
+jest@29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-29.0.1.tgz#4a1c48d79fada0a47c686a111ed9411fd41cd584"
+  integrity sha512-liHkwzaW6iwQyhRBFj0A4ZYKcsQ7ers1s62CCT95fPeNzoxT/vQRWwjTT4e7jpSCwrvPP2t1VESuy7GrXcr2ug==
   dependencies:
-    async "^3.2.3"
-    chalk "^4.0.2"
-    filelist "^1.0.1"
-    minimatch "^3.0.4"
+    "@jest/core" "^29.0.1"
+    "@jest/types" "^29.0.1"
+    import-local "^3.0.2"
+    jest-cli "^29.0.1"
 
 jmespath@0.16.0:
   version "0.16.0"
@@ -4421,6 +5759,11 @@ js-stringify@^1.0.2:
   resolved "https://registry.yarnpkg.com/js-stringify/-/js-stringify-1.0.2.tgz#1736fddfd9724f28a3682adc6230ae7e4e9679db"
   integrity sha1-Fzb939lyTyijaCrcYjCufk6Weds=
 
+js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
 js-yaml@4.1.0, js-yaml@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
@@ -4428,6 +5771,14 @@ js-yaml@4.1.0, js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
+js-yaml@^3.13.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 jsbn@1.1.0, jsbn@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-1.1.0.tgz#b01307cb29b618a1ed26ec79e911f803c4da0040"
@@ -4476,11 +5827,21 @@ jsdom@20.0.0:
     ws "^8.8.0"
     xml-name-validator "^4.0.0"
 
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
 json-buffer@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -4621,6 +5982,11 @@ kind-of@^3.0.2:
   dependencies:
     is-buffer "^1.1.5"
 
+kleur@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
+  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
+
 koa-bodyparser@4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/koa-bodyparser/-/koa-bodyparser-4.3.0.tgz#274c778555ff48fa221ee7f36a9fbdbace22759a"
@@ -4786,6 +6152,11 @@ lazystream@^1.0.0:
   dependencies:
     readable-stream "^2.0.5"
 
+leven@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
+  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -4802,6 +6173,11 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
 listenercount@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/listenercount/-/listenercount-1.0.1.tgz#84c8a72ab59c4725321480c975e6508342e70937"
@@ -4898,6 +6274,11 @@ lodash.map@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
   integrity sha1-dx7Hg540c9nEzeKLGTlMNWL09tM=
 
+lodash.memoize@4.x:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
+
 lodash.merge@^4.4.0, lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@@ -4933,14 +6314,6 @@ lodash@^4.17.11, lodash@^4.17.19, lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-log-symbols@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
-  integrity sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==
-  dependencies:
-    chalk "^4.1.0"
-    is-unicode-supported "^0.1.0"
-
 long@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/long/-/long-4.0.0.tgz#9a7b71cfb7d361a194ea555241c92f7468d5bf28"
@@ -4986,14 +6359,14 @@ mailcheck@^1.1.1:
   resolved "https://registry.yarnpkg.com/mailcheck/-/mailcheck-1.1.1.tgz#d87cf6ba0b64ba512199dbf93f1489f479591e34"
   integrity sha1-2Hz2ugtkulEhmdv5PxSJ9HlZHjQ=
 
-make-dir@^3.1.0:
+make-dir@^3.0.0, make-dir@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
   dependencies:
     semver "^6.0.0"
 
-make-error@^1.1.1:
+make-error@1.x, make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
@@ -5020,6 +6393,13 @@ make-fetch-happen@^10.0.3:
     socks-proxy-agent "^7.0.0"
     ssri "^9.0.0"
 
+makeerror@1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
+  integrity sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==
+  dependencies:
+    tmpl "1.0.5"
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -5087,6 +6467,11 @@ mime-types@^2.1.12, mime-types@^2.1.18, mime-types@~2.1.24:
   dependencies:
     mime-db "1.44.0"
 
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+
 mimic-fn@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
@@ -5107,13 +6492,6 @@ minimalistic-assert@^1.0.0:
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
   integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
-minimatch@5.0.1, minimatch@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.0.1.tgz#fb9022f7528125187c92bd9e9b6366be1cf3415b"
-  integrity sha512-nLDxIFRyhDblz3qMuq+SoRZED4+miJ/G+tdDrjkkkRnjAsBexeGpgjLEQ0blJy7rHhR2b93rhQY4SvyWu9v03g==
-  dependencies:
-    brace-expansion "^2.0.1"
-
 minimatch@^3.0.4, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -5121,6 +6499,13 @@ minimatch@^3.0.4, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.0.1.tgz#fb9022f7528125187c92bd9e9b6366be1cf3415b"
+  integrity sha512-nLDxIFRyhDblz3qMuq+SoRZED4+miJ/G+tdDrjkkkRnjAsBexeGpgjLEQ0blJy7rHhR2b93rhQY4SvyWu9v03g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5, minimist@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
@@ -5240,34 +6625,6 @@ mkdirp@^1.0.3, mkdirp@^1.0.4, mkdirp@~1.0.3:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-mocha@10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/mocha/-/mocha-10.0.0.tgz#205447d8993ec755335c4b13deba3d3a13c4def9"
-  integrity sha512-0Wl+elVUD43Y0BqPZBzZt8Tnkw9CMUdNYnUsTfOM1vuhJVZL+kiesFYsqwBkEEuEixaiPe5ZQdqDgX2jddhmoA==
-  dependencies:
-    "@ungap/promise-all-settled" "1.1.2"
-    ansi-colors "4.1.1"
-    browser-stdout "1.3.1"
-    chokidar "3.5.3"
-    debug "4.3.4"
-    diff "5.0.0"
-    escape-string-regexp "4.0.0"
-    find-up "5.0.0"
-    glob "7.2.0"
-    he "1.2.0"
-    js-yaml "4.1.0"
-    log-symbols "4.1.0"
-    minimatch "5.0.1"
-    ms "2.1.3"
-    nanoid "3.3.3"
-    serialize-javascript "6.0.0"
-    strip-json-comments "3.1.1"
-    supports-color "8.1.1"
-    workerpool "6.2.1"
-    yargs "16.2.0"
-    yargs-parser "20.2.4"
-    yargs-unparser "2.0.0"
-
 moment@^2.22.2:
   version "2.29.4"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
@@ -5283,16 +6640,16 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@2.1.3, ms@^2.0.0, ms@^2.1.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
-  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
-
 ms@3.0.0-canary.1:
   version "3.0.0-canary.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-3.0.0-canary.1.tgz#c7b34fbce381492fd0b345d1cf56e14d67b77b80"
   integrity sha512-kh8ARjh8rMN7Du2igDRO9QJnqCb2xYTJxyQYK7vJJS4TvLLmsbyhiKpSW+t+y26gyOyMd0riphX0GeWKU3ky5g==
 
+ms@^2.0.0, ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
 msgpackr-extract@^1.0.14:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/msgpackr-extract/-/msgpackr-extract-1.0.16.tgz#701c4f6e6f25c100ae84557092274e8fffeefe45"
@@ -5351,11 +6708,6 @@ nan@^2.16.0:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.16.0.tgz#664f43e45460fb98faf00edca0bb0d7b8dce7916"
   integrity sha512-UdAqHyFngu7TfQKsCBgAA6pWDkT8MAO7d0jyOecVhN5354xbLqdn8mV9Tat9gepAupm0bt2DbeaSC8vS52MuFA==
 
-nanoid@3.3.3:
-  version "3.3.3"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.3.tgz#fd8e8b7aa761fe807dba2d1b98fb7241bb724a25"
-  integrity sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==
-
 nanoid@^3.1.30:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
@@ -5518,6 +6870,16 @@ node-gyp@^9.0.0:
     tar "^6.1.2"
     which "^2.0.2"
 
+node-int64@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+  integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
+
+node-releases@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
+  integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
+
 nodemailer@6.7.8:
   version "6.7.8"
   resolved "https://registry.yarnpkg.com/nodemailer/-/nodemailer-6.7.8.tgz#9f1af9911314960c0b889079e1754e8d9e3f740a"
@@ -5560,6 +6922,13 @@ normalize-url@^6.0.1:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
+npm-run-path@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.0"
+
 npm-run-path@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-5.1.0.tgz#bc62f7f3f6952d9894bd08944ba011a6ee7b7e00"
@@ -5636,6 +7005,11 @@ object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
+object-hash@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
+
 object-inspect@^1.11.0, object-inspect@^1.9.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.0.tgz#9dceb146cedd4148a0d9e51ab88d34cf509922b1"
@@ -5689,6 +7063,13 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0:
   dependencies:
     wrappy "1"
 
+onetime@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
 onetime@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-6.0.0.tgz#7c24c18ed1fd2e9bca4bd26806a33613c77d34b4"
@@ -5789,6 +7170,13 @@ p-limit@^3.0.2:
   dependencies:
     p-try "^2.0.0"
 
+p-limit@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
 p-locate@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
@@ -5858,6 +7246,16 @@ parse-data-uri@^0.2.0:
   dependencies:
     data-uri-to-buffer "0.0.3"
 
+parse-json@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
 parse-srcset@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
@@ -5919,7 +7317,7 @@ path-is-absolute@1.0.1, path-is-absolute@^1.0.0:
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
-path-key@^3.1.0:
+path-key@^3.0.0, path-key@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
@@ -5934,6 +7332,11 @@ path-parse@^1.0.6, path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
+path-to-regexp@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-3.2.0.tgz#fa7877ecbc495c601907562222453c43cc204a5f"
+  integrity sha512-jczvQbCUS7XmS7o+y1aEO9OBVFeZBQ1MDSEqmO7xSoPgOPoowY/SxLpZ6Vh97/8qHZOteiCKb7gkG9gA2ZUxJA==
+
 path-to-regexp@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.1.0.tgz#0b18f88b7a0ce0bfae6a25990c909ab86f512427"
@@ -5969,12 +7372,12 @@ pg-pool@^3.5.2:
   resolved "https://registry.yarnpkg.com/pg-pool/-/pg-pool-3.5.2.tgz#ed1bed1fb8d79f1c6fd5fb1c99e990fbf9ddf178"
   integrity sha512-His3Fh17Z4eg7oANLob6ZvH8xIVen3phEZh2QuyrIl4dQSDVEabNducv6ysROKpDNPSD+12tONZVWfSgMvDD9w==
 
-pg-protocol@^1.5.0:
+pg-protocol@*, pg-protocol@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/pg-protocol/-/pg-protocol-1.5.0.tgz#b5dd452257314565e2d54ab3c132adc46565a6a0"
   integrity sha512-muRttij7H8TqRNu/DxrAJQITO4Ac7RmX3Klyr/9mJEOBeIpgnF8f9jAfRz5d3XwQZl5qBjF9gLsUtMPJE0vezQ==
 
-pg-types@^2.1.0:
+pg-types@^2.1.0, pg-types@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/pg-types/-/pg-types-2.2.0.tgz#2d0250d636454f7cfa3b6ae0382fdfa8063254a3"
   integrity sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==
@@ -6015,7 +7418,7 @@ picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.0.7, picomatch@^2.2.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
-picomatch@^2.3.1:
+picomatch@^2.2.3, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@@ -6025,6 +7428,18 @@ pify@^4.0.1:
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
+pirates@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
+  integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
+
+pkg-dir@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+  dependencies:
+    find-up "^4.0.0"
+
 plimit-lit@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/plimit-lit/-/plimit-lit-1.2.6.tgz#8c1336f26a042b6e9f1acc665be5eee4c2a55fb3"
@@ -6112,6 +7527,15 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
+pretty-format@^29.0.0, pretty-format@^29.0.1:
+  version "29.0.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.0.1.tgz#2f8077114cdac92a59b464292972a106410c7ad0"
+  integrity sha512-iTHy3QZMzuL484mSTYbQIM1AHhEQsH8mXWS2/vd2yFBYnG3EBqGiMONo28PlPgrW7P/8s/1ISv+y7WH306l8cw==
+  dependencies:
+    "@jest/schemas" "^29.0.0"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
 pretty@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/pretty/-/pretty-2.0.0.tgz#adbc7960b7bbfe289a557dc5f737619a220d06a5"
@@ -6190,6 +7614,14 @@ promise@^7.0.1:
   dependencies:
     asap "~2.0.3"
 
+prompts@^2.0.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
+  integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.5"
+
 proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
@@ -6382,13 +7814,6 @@ random-seed@0.3.0:
   dependencies:
     json-stringify-safe "^5.0.1"
 
-randombytes@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
-  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
-  dependencies:
-    safe-buffer "^5.1.0"
-
 rangestr@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/rangestr/-/rangestr-0.0.1.tgz#f72ff9246f10f2a7d7c16e14616f617be2c2635a"
@@ -6435,6 +7860,11 @@ re2@1.17.7:
     nan "^2.16.0"
     node-gyp "^9.0.0"
 
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
 readable-stream@1.1.x, readable-stream@~1.1.9:
   version "1.1.14"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
@@ -6627,11 +8057,23 @@ resolve-alpn@^1.2.0:
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
   integrity sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==
 
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
 resolve-path@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/resolve-path/-/resolve-path-1.4.0.tgz#c4bda9f5efb2fce65247873ab36bb4d834fe16f7"
@@ -6640,6 +8082,11 @@ resolve-path@^1.4.0:
     http-errors "~1.6.2"
     path-is-absolute "1.0.1"
 
+resolve.exports@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9"
+  integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
+
 resolve@^1.15.1, resolve@^1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
@@ -6709,6 +8156,13 @@ run-parallel@^1.1.9:
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679"
   integrity sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==
 
+rxjs@7.5.6:
+  version "7.5.6"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.6.tgz#0446577557862afd6903517ce7cae79ecb9662bc"
+  integrity sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==
+  dependencies:
+    tslib "^2.1.0"
+
 s-age@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/s-age/-/s-age-1.1.2.tgz#c0cf15233ccc93f41de92ea42c36d957977d1ea2"
@@ -6724,7 +8178,7 @@ safe-buffer@5.2.1, safe-buffer@^5.1.2, safe-buffer@^5.2.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
+safe-buffer@^5.0.1, safe-buffer@~5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
   integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
@@ -6787,7 +8241,7 @@ seedrandom@3.0.5, seedrandom@^3.0.5:
   resolved "https://registry.yarnpkg.com/seedrandom/-/seedrandom-3.0.5.tgz#54edc85c95222525b0c7a6f6b3543d8e0b3aa0a7"
   integrity sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==
 
-semver@7.3.7, semver@^7.3.7:
+semver@7.3.7, semver@7.x, semver@^7.3.7:
   version "7.3.7"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
   integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
@@ -6799,7 +8253,7 @@ semver@^5.6.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-semver@^6.0.0:
+semver@^6.0.0, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
@@ -6818,13 +8272,6 @@ semver@^7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
-serialize-javascript@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.0.tgz#efae5d88f45d7924141da8b5c3a7a7e663fefeb8"
-  integrity sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==
-  dependencies:
-    randombytes "^2.1.0"
-
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
@@ -6898,7 +8345,7 @@ signal-exit@^3.0.0:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
-signal-exit@^3.0.7:
+signal-exit@^3.0.3, signal-exit@^3.0.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
@@ -6924,6 +8371,11 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
+sisteransi@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
+  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@@ -6956,7 +8408,15 @@ source-map-js@^0.6.2:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
   integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
 
-source-map@~0.6.1:
+source-map-support@0.5.13:
+  version "0.5.13"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
+  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@@ -7022,6 +8482,13 @@ ssri@^9.0.0:
   dependencies:
     minipass "^3.1.1"
 
+stack-utils@^2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.5.tgz#d25265fca995154659dbbfba3b49254778d2fdd5"
+  integrity sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
 standard-as-callback@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/standard-as-callback/-/standard-as-callback-2.1.0.tgz#8953fc05359868a77b5b9739a665c5977bb7df45"
@@ -7049,6 +8516,14 @@ strict-event-emitter-types@2.0.0:
   resolved "https://registry.yarnpkg.com/strict-event-emitter-types/-/strict-event-emitter-types-2.0.0.tgz#05e15549cb4da1694478a53543e4e2f4abcf277f"
   integrity sha512-Nk/brWYpD85WlOgzw5h173aci0Teyv8YdIAEtV+N88nDB0dLlazZyJMIsN6eo1/AR61l+p6CJTG1JIyFaoNEEA==
 
+string-length@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
+  integrity sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==
+  dependencies:
+    char-regex "^1.0.2"
+    strip-ansi "^6.0.0"
+
 string-width@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -7177,12 +8652,22 @@ strip-bom@^3.0.0:
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
   integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
 
+strip-bom@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
+  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
+
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
 strip-final-newline@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-3.0.0.tgz#52894c313fbff318835280aed60ff71ebf12b8fd"
   integrity sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
 
-strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -7217,13 +8702,6 @@ summaly@2.7.0:
     require-all "3.0.0"
     trace-redirect "1.0.6"
 
-supports-color@8.1.1:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
-  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
-  dependencies:
-    has-flag "^4.0.0"
-
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -7231,13 +8709,28 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^7.1.0:
+supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
   dependencies:
     has-flag "^4.0.0"
 
+supports-color@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-hyperlinks@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.2.0.tgz#4f77b42488765891774b70c79babd87f9bd594bb"
+  integrity sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
@@ -7332,6 +8825,23 @@ tar@^6.1.11, tar@^6.1.2:
     mkdirp "^1.0.3"
     yallist "^4.0.0"
 
+terminal-link@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
+  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    supports-hyperlinks "^2.0.0"
+
+test-exclude@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-6.0.0.tgz#04a8698661d805ea6fa293b6cb9e63ac044ef15e"
+  integrity sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==
+  dependencies:
+    "@istanbuljs/schema" "^0.1.2"
+    glob "^7.1.4"
+    minimatch "^3.0.4"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -7373,6 +8883,11 @@ tmp@0.2.1:
   dependencies:
     rimraf "^3.0.0"
 
+tmpl@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
+  integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -7442,6 +8957,20 @@ trace-redirect@1.0.6:
   resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.3.9.tgz#717b8f220cc0bb7b44e40514c22b2e8bbc70d8b9"
   integrity sha1-cXuPIgzAu3tE5AUUwisui7xw2Lk=
 
+ts-jest@28.0.8:
+  version "28.0.8"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-28.0.8.tgz#cd204b8e7a2f78da32cf6c95c9a6165c5b99cc73"
+  integrity sha512-5FaG0lXmRPzApix8oFG8RKjAz4ehtm8yMKOTy5HX3fY6W8kmvOrmcY0hKDElW52FJov+clhUbrKAqofnj4mXTg==
+  dependencies:
+    bs-logger "0.x"
+    fast-json-stable-stringify "2.x"
+    jest-util "^28.0.0"
+    json5 "^2.2.1"
+    lodash.memoize "4.x"
+    make-error "1.x"
+    semver "7.x"
+    yargs-parser "^21.0.1"
+
 ts-loader@9.3.1:
   version "9.3.1"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.3.1.tgz#fe25cca56e3e71c1087fe48dc67f4df8c59b22d4"
@@ -7502,6 +9031,11 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.4.0, tslib@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tslib@^1.8.1:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
@@ -7565,6 +9099,11 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
 type-is@^1.6.14, type-is@^1.6.16, type-is@^1.6.4:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
@@ -7698,6 +9237,14 @@ unzipper@0.10.11:
     readable-stream "~2.3.6"
     setimmediate "~1.0.4"
 
+update-browserslist-db@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz#be06a5eedd62f107b7c19eb5bcefb194411abf38"
+  integrity sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 uri-js@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
@@ -7752,6 +9299,11 @@ uuid@8.0.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.0.0.tgz#bc6ccf91b5ff0ac07bbcdbf1c7c4e150db4dbb6c"
   integrity sha512-jOXGuXZAWdsTH7eZLtyXMqUb9EcWMGZNbL9YcGBJl4MH4nrxHmZJhEHvyLFrkxo+28uLb/NYRcStH48fnD0Vzw==
 
+uuid@8.3.2, uuid@^8.3.0, uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
 uuid@9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
@@ -7762,16 +9314,20 @@ uuid@^3.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^8.3.0, uuid@^8.3.2:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
-  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
-
 v8-compile-cache-lib@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
   integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
 
+v8-to-istanbul@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.0.1.tgz#b6f994b0b5d4ef255e17a0d17dc444a9f5132fa4"
+  integrity sha512-74Y4LqY74kLE6IFyIjPtkSTWzUZmj8tdHT9Ii/26dvQ6K9Dl2NbEfj0XgU2sHCtKgt5VupqhlO/5aWuqS+IY1w==
+  dependencies:
+    "@jridgewell/trace-mapping" "^0.3.12"
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+
 vary@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -7805,6 +9361,13 @@ w3c-xmlserializer@^3.0.0:
   dependencies:
     xml-name-validator "^4.0.0"
 
+walker@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.8.tgz#bd498db477afe573dc04185f011d3ab8a8d7653f"
+  integrity sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==
+  dependencies:
+    makeerror "1.0.12"
+
 web-push@3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/web-push/-/web-push-3.5.0.tgz#4576533746052eda3bd50414b54a1b0a21eeaeae"
@@ -7943,11 +9506,6 @@ word-wrap@^1.2.3, word-wrap@~1.2.3:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
-workerpool@6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
-  integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==
-
 wrap-ansi@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
@@ -7971,6 +9529,14 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
+write-file-atomic@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.2.tgz#a9df01ae5b77858a027fd2e80768ee433555fcfd"
+  integrity sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==
+  dependencies:
+    imurmurhash "^0.1.4"
+    signal-exit "^3.0.7"
+
 ws@8.8.1:
   version "8.8.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.1.tgz#5dbad0feb7ade8ecc99b830c1d77c913d4955ff0"
@@ -8069,11 +9635,6 @@ yaml-ast-parser@0.0.43:
   resolved "https://registry.yarnpkg.com/yaml-ast-parser/-/yaml-ast-parser-0.0.43.tgz#e8a23e6fb4c38076ab92995c5dca33f3d3d7c9bb"
   integrity sha512-2PTINUwsRqSd+s8XxKaJWQlUuEMHJQyEuh2edBbW8KNJz0SJPwUSD2zRWqezFEdN7IzAgeuYHFUCF7o8zRdZ0A==
 
-yargs-parser@20.2.4, yargs-parser@^20.2.2:
-  version "20.2.4"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
-  integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==
-
 yargs-parser@^18.1.2:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
@@ -8082,33 +9643,20 @@ yargs-parser@^18.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^20.2.2:
+  version "20.2.4"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
+  integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==
+
 yargs-parser@^21.0.0:
   version "21.0.1"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.0.1.tgz#0267f286c877a4f0f728fceb6f8a3e4cb95c6e35"
   integrity sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==
 
-yargs-unparser@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/yargs-unparser/-/yargs-unparser-2.0.0.tgz#f131f9226911ae5d9ad38c432fe809366c2325eb"
-  integrity sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==
-  dependencies:
-    camelcase "^6.0.0"
-    decamelize "^4.0.0"
-    flat "^5.0.2"
-    is-plain-obj "^2.1.0"
-
-yargs@16.2.0, yargs@^16.0.0, yargs@^16.0.3:
-  version "16.2.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
-  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
-  dependencies:
-    cliui "^7.0.2"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.0"
-    y18n "^5.0.5"
-    yargs-parser "^20.2.2"
+yargs-parser@^21.0.1:
+  version "21.1.1"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
 
 yargs@^15.3.1:
   version "15.4.1"
@@ -8127,6 +9675,19 @@ yargs@^15.3.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
+yargs@^16.0.0, yargs@^16.0.3:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
 yargs@^17.3.1:
   version "17.4.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.4.0.tgz#9fc9efc96bd3aa2c1240446af28499f0e7593d00"
@@ -8150,6 +9711,11 @@ yn@3.1.1:
   resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
   integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
 
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
 zip-stream@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-4.1.0.tgz#51dd326571544e36aa3f756430b313576dc8fc79"
diff --git a/packages/client/.eslintrc.js b/packages/client/.eslintrc.js
index a5a4fd0f43..01dedd1c69 100644
--- a/packages/client/.eslintrc.js
+++ b/packages/client/.eslintrc.js
@@ -21,6 +21,9 @@ module.exports = {
 				'allowSingleExtends': true,
 			},
 		],
+		'@typescript-eslint/prefer-nullish-coalescing': [
+			'error',
+		],
 		// window の禁止理由: グローバルスコープと衝突し、予期せぬ結果を招くため
 		// e の禁止理由: error や event など、複数のキーワードの頭文字であり分かりにくいため
 		'id-denylist': ['error', 'window', 'e'],
diff --git a/packages/client/src/scripts/aiscript/api.ts b/packages/client/src/scripts/aiscript/api.ts
index 01b8fd05fe..6debcb8a13 100644
--- a/packages/client/src/scripts/aiscript/api.ts
+++ b/packages/client/src/scripts/aiscript/api.ts
@@ -27,7 +27,7 @@ export function createAiScriptEnv(opts) {
 			if (token) utils.assertString(token);
 			apiRequests++;
 			if (apiRequests > 16) return values.NULL;
-			const res = await os.api(ep.value, utils.valToJs(param), token ? token.value : (opts.token || null));
+			const res = await os.api(ep.value, utils.valToJs(param), token ? token.value : (opts.token ?? null));
 			return utils.jsToVal(res);
 		}),
 		'Mk:save': values.FN_NATIVE(([key, value]) => {
diff --git a/packages/client/src/scripts/hpml/type-checker.ts b/packages/client/src/scripts/hpml/type-checker.ts
index 9633b3cd01..24c9ed8bcb 100644
--- a/packages/client/src/scripts/hpml/type-checker.ts
+++ b/packages/client/src/scripts/hpml/type-checker.ts
@@ -1,7 +1,9 @@
 import autobind from 'autobind-decorator';
-import { Type, envVarsDef, PageVar } from '.';
-import { Expr, isLiteralValue, Variable } from './expr';
+import { isLiteralValue } from './expr';
 import { funcDefs } from './lib';
+import { envVarsDef } from '.';
+import type { Type, PageVar } from '.';
+import type { Expr, Variable } from './expr';
 
 type TypeError = {
 	arg: number;
@@ -44,14 +46,14 @@ export class HpmlTypeChecker {
 					return {
 						arg: i,
 						expect: generic[arg],
-						actual: type
+						actual: type,
 					};
 				}
 			} else if (type !== arg) {
 				return {
 					arg: i,
 					expect: arg,
-					actual: type
+					actual: type,
 				};
 			}
 		}
@@ -81,7 +83,7 @@ export class HpmlTypeChecker {
 		}
 
 		if (typeof def.in[slot] === 'number') {
-			return generic[def.in[slot]] || null;
+			return generic[def.in[slot]] ?? null;
 		} else {
 			return def.in[slot];
 		}
diff --git a/packages/shared/.eslintrc.js b/packages/shared/.eslintrc.js
index 5a6a9c5af9..2952b8ba16 100644
--- a/packages/shared/.eslintrc.js
+++ b/packages/shared/.eslintrc.js
@@ -24,6 +24,8 @@ module.exports = {
 		'semi-spacing': ['error', { 'before': false, 'after': true }],
 		'quotes': ['warn', 'single'],
 		'comma-dangle': ['warn', 'always-multiline'],
+		'comma-spacing': ['error', { 'before': false, 'after': true }],
+		'array-bracket-spacing': ['error', 'never'],
 		'keyword-spacing': ['error', {
 			'before': true,
 			'after': true,
@@ -72,6 +74,9 @@ module.exports = {
 			'checksVoidReturn': false,
 		}],
 		'@typescript-eslint/consistent-type-imports': 'error',
+		'@typescript-eslint/prefer-nullish-coalescing': [
+			'error',
+		],
 		'import/no-unresolved': ['off'],
 		'import/no-default-export': ['warn'],
 		'import/order': ['warn', {
diff --git a/packages/sw/src/types.ts b/packages/sw/src/types.ts
index 0404e21e57..8350fb80b8 100644
--- a/packages/sw/src/types.ts
+++ b/packages/sw/src/types.ts
@@ -10,7 +10,7 @@ export type SwMessage = {
 	[x: string]: any;
 };
 
-// Defined also @/services/push-notification.ts#L7-L14
+// Defined also @/core/push-notification.ts#L7-L14
 type pushNotificationDataSourceMap = {
 	notification: Misskey.entities.Notification;
 	unreadMessagingMessage: Misskey.entities.MessagingMessage;
-- 
cgit v1.2.3-freya


From c1667dc43cfa495fd9499c00ee4b49d97d64a345 Mon Sep 17 00:00:00 2001
From: nenohi <kimutipartylove@gmail.com>
Date: Sun, 18 Sep 2022 04:07:59 +0900
Subject: フォロー、フォロワーのページでフォローされていることを表示 (#9093)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* followed-view

* Update MkUserInfo.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 packages/client/src/components/MkUserInfo.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue
index 4670def564..036cbea304 100644
--- a/packages/client/src/components/MkUserInfo.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -6,6 +6,7 @@
 		<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
 		<p class="username"><MkAcct :user="user"/></p>
 	</div>
+	<span v-if="$i && $i.id !== user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
 	<div class="description">
 		<div v-if="user.description" class="mfm">
 			<Mfm :text="user.description" :author="user" :i="$i" :custom-emojis="user.emojis"/>
@@ -81,7 +82,18 @@ defineProps<{
 			opacity: 0.7;
 		}
 	}
-
+	
+	> .followed {
+		position: absolute;
+		top: 12px;
+		left: 12px;
+		padding: 4px 8px;
+		color: #fff;
+		background: rgba(0, 0, 0, 0.7);
+		font-size: 0.7em;
+		border-radius: 6px;
+	}
+	
 	> .description {
 		padding: 16px;
 		font-size: 0.8em;
-- 
cgit v1.2.3-freya


From 27b40053c7a075c06a86e4d00e928e6d7d384d22 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Sep 2022 07:14:47 +0900
Subject: :art:

---
 locales/ja-JP.yml                   |  1 +
 packages/client/src/pages/about.vue | 10 ++++++----
 packages/client/src/style.scss      |  2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

(limited to 'packages/client/src')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index b10cce9231..cedfe7b1b2 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2,6 +2,7 @@ _lang_: "日本語"
 
 headlineMisskey: "ノートでつながるネットワーク"
 introMisskey: "ようこそ！Misskeyは、オープンソースの分散型マイクロブログサービスです。\n「ノート」を作成して、いま起こっていることを共有したり、あなたについて皆に発信しよう📡\n「リアクション」機能で、皆のノートに素早く反応を追加することもできます👍\n新しい世界を探検しよう🚀"
+poweredByMisskeyDescription: "{name}は、オープンソースのプラットフォーム<b>Misskey</b>を使ったサービス(Misskeyインスタンスと呼ばれます)のひとつです。"
 monthAndDay: "{month}月 {day}日"
 search: "検索"
 notifications: "通知"
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index 33c55fecef..d124db55a7 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -5,16 +5,16 @@
 		<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"/>
+					<img :src="$instance.iconUrl ?? $instance.faviconUrl ?? '/favicon.ico'" alt="" class="icon"/>
 					<div class="name">
-						<b>{{ $instance.name || host }}</b>
+						<b>{{ $instance.name ?? host }}</b>
 					</div>
 				</div>
 			</div>
 
 			<MkKeyValue class="_formBlock">
 				<template #key>{{ i18n.ts.description }}</template>
-				<template #value>{{ $instance.description }}</template>
+				<template #value><div v-html="$instance.description"></div></template>
 			</MkKeyValue>
 
 			<FormSection>
@@ -22,6 +22,8 @@
 					<template #key>Misskey</template>
 					<template #value>{{ version }}</template>
 				</MkKeyValue>
+				<div class="_formBlock" v-html="i18n.t('poweredByMisskeyDescription', { name: $instance.name ?? host })">
+				</div>
 				<FormLink to="/about-misskey">{{ i18n.ts.aboutMisskey }}</FormLink>
 			</FormSection>
 
@@ -83,7 +85,7 @@
 import { ref, computed } from 'vue';
 import XEmojis from './about.emojis.vue';
 import XFederation from './about.federation.vue';
-import { version, instanceName , host } 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';
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 27e33702ad..69be6d33be 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -74,7 +74,7 @@ html {
 	}
 
 	&.useSystemFont {
-		font-family: sans-serif;
+		font-family: 'Hiragino Maru Gothic Pro', sans-serif;
 	}
 }
 
-- 
cgit v1.2.3-freya


From 192a1bd69e56fcae761339f77ab8503bccf76ce4 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 21 Sep 2022 02:10:59 +0900
Subject: :art:

---
 packages/client/src/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 69be6d33be..9b562d3228 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -29,7 +29,7 @@ html {
 	accent-color: var(--accent);
 	overflow: auto;
 	overflow-wrap: break-word;
-	font-family: "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+	font-family: 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
 	font-size: 14px;
 	line-height: 1.35;
 	text-size-adjust: 100%;
-- 
cgit v1.2.3-freya


From bcbda6940a55d7d258c7ed9c5f3ae8d32f59ea47 Mon Sep 17 00:00:00 2001
From: こけっち <50144466+sim1222@users.noreply.github.com>
Date: Thu, 22 Sep 2022 08:20:31 +0900
Subject: feat: Youtube window player (#9095)

* wip: feat: Youtube Player Window

* fix: player fill window

* fix: improve design

* fix: disable at mobile and creanup code

* fix: tailing comma

* fix: delete debug output

* fix: eslint

* fix: switch to component

* fix(backend): add missing dependency

Fix #9101

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 .../src/server/api/endpoints/admin/show-users.ts   |  3 +
 packages/client/src/components/MkUrlPreview.vue    | 15 ++++-
 packages/client/src/components/MkYoutubePlayer.vue | 72 ++++++++++++++++++++++
 3 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 packages/client/src/components/MkYoutubePlayer.vue

(limited to 'packages/client/src')

diff --git a/packages/backend/src/server/api/endpoints/admin/show-users.ts b/packages/backend/src/server/api/endpoints/admin/show-users.ts
index d28f9c71b7..5471ef9b4c 100644
--- a/packages/backend/src/server/api/endpoints/admin/show-users.ts
+++ b/packages/backend/src/server/api/endpoints/admin/show-users.ts
@@ -2,6 +2,7 @@ import { Inject, Injectable } from '@nestjs/common';
 import type { UsersRepository } from '@/models/index.js';
 import { Endpoint } from '@/server/api/endpoint-base.js';
 import { DI } from '@/di-symbols.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
 
 export const meta = {
 	tags: ['admin'],
@@ -45,6 +46,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 	constructor(
 		@Inject(DI.usersRepository)
 		private usersRepository: UsersRepository,
+
+		private userEntityService: UserEntityService,
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			const query = this.usersRepository.createQueryBuilder('user');
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 9b2a785351..af27f644ed 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -10,7 +10,7 @@
 	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
 		<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
 			<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
-				<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="playerEnabled = true"><i class="fas fa-play-circle"></i></button>
+				<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="isMobile? playerEnabled = true : openPlayer()"><i class="fas fa-play-circle"></i></button>
 			</div>
 			<article>
 				<header>
@@ -33,9 +33,11 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
+import { defineAsyncComponent, onMounted, onUnmounted } from 'vue';
 import { url as local, lang } from '@/config';
 import { i18n } from '@/i18n';
+import * as os from '@/os';
+import { deviceKind } from '@/scripts/device-kind';
 
 const props = withDefaults(defineProps<{
 	url: string;
@@ -46,6 +48,9 @@ const props = withDefaults(defineProps<{
 	compact: false,
 });
 
+const MOBILE_THRESHOLD = 500;
+const isMobile = $ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
+
 const self = props.url.startsWith(local);
 const attr = self ? 'to' : 'href';
 const target = self ? null : '_blank';
@@ -103,6 +108,12 @@ function adjustTweetHeight(message: any) {
 	if (height) tweetHeight = height;
 }
 
+const openPlayer = (): void => {
+	os.popup(defineAsyncComponent(() => import('@/components/MkYoutubePlayer.vue')), {
+		url: requestUrl.href,
+	});
+};
+
 (window as any).addEventListener('message', adjustTweetHeight);
 
 onUnmounted(() => {
diff --git a/packages/client/src/components/MkYoutubePlayer.vue b/packages/client/src/components/MkYoutubePlayer.vue
new file mode 100644
index 0000000000..0d8eb75b87
--- /dev/null
+++ b/packages/client/src/components/MkYoutubePlayer.vue
@@ -0,0 +1,72 @@
+<template>
+<XWindow :initial-width="640" :initial-height="402" :can-resize="true" :close-button="true">
+	<template #header>
+		<i class="icon fa-brands fa-youtube" style="margin-right: 0.5em;"></i>
+		<span>{{ title ?? 'Youtube Player' }}</span>
+	</template>
+
+	<div class="poamfof">
+		<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+			<div v-if="player.url" class="player">
+				<iframe v-if="!fetching" :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
+			</div>
+		</transition>
+		<MkLoading v-if="fetching"/>
+		<MkError v-else-if="!player.url" @retry="ytFetch()"/>
+	</div>
+</XWindow>
+</template>
+
+<script lang="ts" setup>
+import XWindow from '@/components/MkWindow.vue';
+import { lang } from '@/config';
+
+const props = defineProps<{
+	url: string;
+}>();
+
+const requestUrl = new URL(props.url);
+
+let fetching = $ref(true);
+let title = $ref<string | null>(null);
+let player = $ref({
+	url: null,
+	width: null,
+	height: null,
+});
+
+const requestLang = (lang ?? 'ja-JP').replace('ja-KS', 'ja-JP');
+
+const ytFetch = (): void => {
+	fetching = true;
+	fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
+		res.json().then(info => {
+			if (info.url == null) return;
+			title = info.title;
+			fetching = false;
+			player = info.player;
+		});
+	});
+};
+
+ytFetch();
+
+</script>
+
+<style lang="scss">
+.poamfof {
+	position: relative;
+	overflow: hidden;
+	height: 100%;
+
+	.player {
+		position: absolute;
+		inset: 0;
+
+		iframe {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+</style>
-- 
cgit v1.2.3-freya


From 0f7cbb59228d3dfc86c153d25d8fcbf8e2a244e3 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 24 Sep 2022 10:39:17 +0900
Subject: fix type

---
 .../backend/src/server/api/endpoints/notes/state.ts   |  4 ----
 packages/client/src/scripts/get-note-menu.ts          | 19 ++-----------------
 2 files changed, 2 insertions(+), 21 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/backend/src/server/api/endpoints/notes/state.ts b/packages/backend/src/server/api/endpoints/notes/state.ts
index a02b8d2559..d0036f0fb7 100644
--- a/packages/backend/src/server/api/endpoints/notes/state.ts
+++ b/packages/backend/src/server/api/endpoints/notes/state.ts
@@ -16,10 +16,6 @@ export const meta = {
 				type: 'boolean',
 				optional: false, nullable: false,
 			},
-			isWatching: {
-				type: 'boolean',
-				optional: false, nullable: false,
-			},
 			isMutedThread: {
 				type: 'boolean',
 				optional: false, nullable: false,
diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
index a5cf982066..692986cd55 100644
--- a/packages/client/src/scripts/get-note-menu.ts
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -60,12 +60,6 @@ export function getNoteMenu(props: {
 		});
 	}
 
-	function toggleWatch(watch: boolean): void {
-		os.apiWithDialog(watch ? 'notes/watching/create' : 'notes/watching/delete', {
-			noteId: appearNote.id,
-		});
-	}
-
 	function toggleThreadMute(mute: boolean): void {
 		os.apiWithDialog(mute ? 'notes/thread-muting/create' : 'notes/thread-muting/delete', {
 			noteId: appearNote.id,
@@ -245,15 +239,6 @@ export function getNoteMenu(props: {
 				text: i18n.ts.clip,
 				action: () => clip(),
 			},
-			(appearNote.userId !== $i.id) ? statePromise.then(state => state.isWatching ? {
-				icon: 'fas fa-eye-slash',
-				text: i18n.ts.unwatch,
-				action: () => toggleWatch(false),
-			} : {
-				icon: 'fas fa-eye',
-				text: i18n.ts.watch,
-				action: () => toggleWatch(true),
-			}) : undefined,
 			statePromise.then(state => state.isMutedThread ? {
 				icon: 'fas fa-comment-slash',
 				text: i18n.ts.unmuteThread,
@@ -312,7 +297,7 @@ export function getNoteMenu(props: {
 				}]
 			: []
 			)]
-		.filter(x => x !== undefined);
+			.filter(x => x !== undefined);
 	} else {
 		menu = [{
 			icon: 'fas fa-copy',
@@ -329,7 +314,7 @@ export function getNoteMenu(props: {
 				window.open(appearNote.url || appearNote.uri, '_blank');
 			},
 		} : undefined]
-		.filter(x => x !== undefined);
+			.filter(x => x !== undefined);
 	}
 
 	if (noteActions.length > 0) {
-- 
cgit v1.2.3-freya


From 56a719f0d4725bce710337b07784cb186c763951 Mon Sep 17 00:00:00 2001
From: "Acid Chicken (硫酸鶏)" <root@acid-chicken.com>
Date: Sun, 2 Oct 2022 20:57:17 +0900
Subject: fix: typo

---
 packages/client/src/components/MkYoutubePlayer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkYoutubePlayer.vue b/packages/client/src/components/MkYoutubePlayer.vue
index 0d8eb75b87..a6840ce647 100644
--- a/packages/client/src/components/MkYoutubePlayer.vue
+++ b/packages/client/src/components/MkYoutubePlayer.vue
@@ -2,7 +2,7 @@
 <XWindow :initial-width="640" :initial-height="402" :can-resize="true" :close-button="true">
 	<template #header>
 		<i class="icon fa-brands fa-youtube" style="margin-right: 0.5em;"></i>
-		<span>{{ title ?? 'Youtube Player' }}</span>
+		<span>{{ title ?? 'YouTube Player' }}</span>
 	</template>
 
 	<div class="poamfof">
-- 
cgit v1.2.3-freya


From dae82514dc7fd6600650bbf29945691da1c256a5 Mon Sep 17 00:00:00 2001
From: hayabusa <10593623+m-hayabusa@users.noreply.github.com>
Date: Thu, 13 Oct 2022 08:34:23 +0900
Subject: fix:
 一部の状態のファイルをドロップしてアップロードできない場合がある問題を修正
 (投稿フォーム以外についても) (#9114)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* dropEffectとeffectAllowedの関連付けを投稿フォームと同様に修正

* 文字列をDropできるようにしてしまったのを修正
---
 packages/client/src/components/MkDrive.folder.vue       | 17 ++++++++++++++++-
 packages/client/src/components/MkDrive.navFolder.vue    | 17 ++++++++++++++++-
 packages/client/src/components/MkDrive.vue              | 17 ++++++++++++++++-
 .../client/src/pages/messaging/messaging-room.form.vue  | 17 ++++++++++++++++-
 packages/client/src/pages/messaging/messaging-room.vue  | 17 ++++++++++++++++-
 5 files changed, 80 insertions(+), 5 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkDrive.folder.vue b/packages/client/src/components/MkDrive.folder.vue
index e55fa4f0f2..6c522c0862 100644
--- a/packages/client/src/components/MkDrive.folder.vue
+++ b/packages/client/src/components/MkDrive.folder.vue
@@ -90,7 +90,22 @@ function onDragover(ev: DragEvent) {
 	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
 
 	if (isFile || isDriveFile || isDriveFolder) {
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		switch (ev.dataTransfer.effectAllowed) {
+			case 'all':
+			case 'uninitialized':
+			case 'copy': 
+			case 'copyLink': 
+			case 'copyMove': 
+				ev.dataTransfer.dropEffect = 'copy';
+				break;
+			case 'linkMove':
+			case 'move':
+				ev.dataTransfer.dropEffect = 'move';
+				break;
+			default:
+				ev.dataTransfer.dropEffect = 'none';
+				break;
+		}
 	} else {
 		ev.dataTransfer.dropEffect = 'none';
 	}
diff --git a/packages/client/src/components/MkDrive.navFolder.vue b/packages/client/src/components/MkDrive.navFolder.vue
index 5482703317..455c14f95e 100644
--- a/packages/client/src/components/MkDrive.navFolder.vue
+++ b/packages/client/src/components/MkDrive.navFolder.vue
@@ -58,7 +58,22 @@ function onDragover(ev: DragEvent) {
 	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
 
 	if (isFile || isDriveFile || isDriveFolder) {
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		switch (ev.dataTransfer.effectAllowed) {
+			case 'all':
+			case 'uninitialized':
+			case 'copy': 
+			case 'copyLink': 
+			case 'copyMove': 
+				ev.dataTransfer.dropEffect = 'copy';
+				break;
+			case 'linkMove':
+			case 'move':
+				ev.dataTransfer.dropEffect = 'move';
+				break;
+			default:
+				ev.dataTransfer.dropEffect = 'none';
+				break;
+		}
 	} else {
 		ev.dataTransfer.dropEffect = 'none';
 	}
diff --git a/packages/client/src/components/MkDrive.vue b/packages/client/src/components/MkDrive.vue
index 002ca58d04..c79ab97000 100644
--- a/packages/client/src/components/MkDrive.vue
+++ b/packages/client/src/components/MkDrive.vue
@@ -196,7 +196,22 @@ function onDragover(ev: DragEvent): any {
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
 	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
 	if (isFile || isDriveFile || isDriveFolder) {
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		switch (ev.dataTransfer.effectAllowed) {
+			case 'all':
+			case 'uninitialized':
+			case 'copy': 
+			case 'copyLink': 
+			case 'copyMove': 
+				ev.dataTransfer.dropEffect = 'copy';
+				break;
+			case 'linkMove':
+			case 'move':
+				ev.dataTransfer.dropEffect = 'move';
+				break;
+			default:
+				ev.dataTransfer.dropEffect = 'none';
+				break;
+		}
 	} else {
 		ev.dataTransfer.dropEffect = 'none';
 	}
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 38bab90502..4589069df0 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -93,7 +93,22 @@ function onDragover(ev: DragEvent) {
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
 	if (isFile || isDriveFile) {
 		ev.preventDefault();
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		switch (ev.dataTransfer.effectAllowed) {
+			case 'all':
+			case 'uninitialized':
+			case 'copy': 
+			case 'copyLink': 
+			case 'copyMove': 
+				ev.dataTransfer.dropEffect = 'copy';
+				break;
+			case 'linkMove':
+			case 'move':
+				ev.dataTransfer.dropEffect = 'move';
+				break;
+			default:
+				ev.dataTransfer.dropEffect = 'none';
+				break;
+		}
 	}
 }
 
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index a9da89ed95..37d4145ee8 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -154,7 +154,22 @@ function onDragover(ev: DragEvent) {
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
 
 	if (isFile || isDriveFile) {
-		ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
+		switch (ev.dataTransfer.effectAllowed) {
+			case 'all':
+			case 'uninitialized':
+			case 'copy': 
+			case 'copyLink': 
+			case 'copyMove': 
+				ev.dataTransfer.dropEffect = 'copy';
+				break;
+			case 'linkMove':
+			case 'move':
+				ev.dataTransfer.dropEffect = 'move';
+				break;
+			default:
+				ev.dataTransfer.dropEffect = 'none';
+				break;
+		}
 	} else {
 		ev.dataTransfer.dropEffect = 'none';
 	}
-- 
cgit v1.2.3-freya


From 166067f746647242860ced48e05abb7b1fe971eb Mon Sep 17 00:00:00 2001
From: hayabusa <10593623+m-hayabusa@users.noreply.github.com>
Date: Thu, 13 Oct 2022 08:34:57 +0900
Subject: add webhookId to api request (#9113)

---
 packages/client/src/pages/settings/webhook.edit.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/settings/webhook.edit.vue b/packages/client/src/pages/settings/webhook.edit.vue
index 35f3cb1dab..5d41f3d087 100644
--- a/packages/client/src/pages/settings/webhook.edit.vue
+++ b/packages/client/src/pages/settings/webhook.edit.vue
@@ -78,6 +78,7 @@ async function save(): Promise<void> {
 		name,
 		url,
 		secret,
+		webhookId: props.webhookId,
 		on: events,
 		active,
 	});
-- 
cgit v1.2.3-freya


From 1309367884197f4f4d94686fddfbd99fa20262bc Mon Sep 17 00:00:00 2001
From: CyberRex <hspwinx86@gmail.com>
Date: Thu, 13 Oct 2022 09:19:57 +0900
Subject: Add Cloudflare Turnstile CAPTCHA support (#9111)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add Cloudflare Turnstile CAPTCHA support

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

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

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
---
 locales/ja-JP.yml                                  |  4 ++++
 .../backend/migration/1664694635394-turnstile.js   | 15 ++++++++++++++
 packages/backend/src/core/CaptchaService.ts        | 11 ++++++++++
 packages/backend/src/models/entities/Meta.ts       | 17 +++++++++++++++
 .../backend/src/server/api/SignupApiService.ts     |  6 ++++++
 .../backend/src/server/api/endpoints/admin/meta.ts | 15 ++++++++++++++
 .../src/server/api/endpoints/admin/update-meta.ts  | 15 ++++++++++++++
 packages/backend/src/server/api/endpoints/meta.ts  | 11 ++++++++++
 packages/client/src/components/MkCaptcha.vue       |  4 +++-
 packages/client/src/components/MkSignup.vue        |  6 ++++++
 packages/client/src/pages/admin/bot-protection.vue | 24 +++++++++++++++++++++-
 packages/client/src/pages/admin/index.vue          |  2 +-
 packages/client/src/pages/admin/security.vue       |  3 +++
 13 files changed, 130 insertions(+), 3 deletions(-)
 create mode 100644 packages/backend/migration/1664694635394-turnstile.js

(limited to 'packages/client/src')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index cedfe7b1b2..2fd44588c0 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -349,6 +349,10 @@ recaptcha: "reCAPTCHA"
 enableRecaptcha: "reCAPTCHAを有効にする"
 recaptchaSiteKey: "サイトキー"
 recaptchaSecretKey: "シークレットキー"
+turnstile: "Turnstile"
+enableTurnstile: "Turnstileを有効にする"
+turnstileSiteKey: "サイトキー"
+turnstileSecretKey: "シークレットキー"
 avoidMultiCaptchaConfirm: "複数のCaptchaを使用すると干渉を起こす可能性があります。他のCaptchaを無効にしますか？キャンセルして複数のCaptchaを有効化したままにすることも可能です。"
 antennas: "アンテナ"
 manageAntennas: "アンテナの管理"
diff --git a/packages/backend/migration/1664694635394-turnstile.js b/packages/backend/migration/1664694635394-turnstile.js
new file mode 100644
index 0000000000..4a33443950
--- /dev/null
+++ b/packages/backend/migration/1664694635394-turnstile.js
@@ -0,0 +1,15 @@
+export class turnstile1664694635394 {
+    name = 'turnstile1664694635394'
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "meta" ADD "enableTurnstile" boolean NOT NULL DEFAULT false`);
+        await queryRunner.query(`ALTER TABLE "meta" ADD "turnstileSiteKey" character varying(64)`);
+        await queryRunner.query(`ALTER TABLE "meta" ADD "turnstileSecretKey" character varying(64)`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "turnstileSecretKey"`);
+        await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "turnstileSiteKey"`);
+        await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "enableTurnstile"`);
+    }
+}
diff --git a/packages/backend/src/core/CaptchaService.ts b/packages/backend/src/core/CaptchaService.ts
index 67b4b90061..acfa7d5910 100644
--- a/packages/backend/src/core/CaptchaService.ts
+++ b/packages/backend/src/core/CaptchaService.ts
@@ -66,5 +66,16 @@ export class CaptchaService {
 			throw `hcaptcha-failed: ${errorCodes}`;
 		}
 	}
+
+	public async verifyTurnstile(secret: string, response: string): Promise<void> {
+		const result = await this.getCaptchaResponse('https://challenges.cloudflare.com/turnstile/v0/siteverify', secret, response).catch(e => {
+			throw `turnstile-request-failed: ${e}`;
+		});
+
+		if (result.success !== true) {
+			const errorCodes = result['error-codes'] ? result['error-codes'].join(', ') : '';
+			throw `turnstile-failed: ${errorCodes}`;
+		}
+	}
 }
 
diff --git a/packages/backend/src/models/entities/Meta.ts b/packages/backend/src/models/entities/Meta.ts
index f528b7ac08..fb25e370d2 100644
--- a/packages/backend/src/models/entities/Meta.ts
+++ b/packages/backend/src/models/entities/Meta.ts
@@ -188,6 +188,23 @@ export class Meta {
 	})
 	public recaptchaSecretKey: string | null;
 
+	@Column('boolean', {
+		default: false,
+	})
+	public enableTurnstile: boolean;
+
+	@Column('varchar', {
+		length: 64,
+		nullable: true,
+	})
+	public turnstileSiteKey: string | null;
+
+	@Column('varchar', {
+		length: 64,
+		nullable: true,
+	})
+	public turnstileSecretKey: string | null;
+
 	@Column('enum', {
 		enum: ['none', 'all', 'local', 'remote'],
 		default: 'none',
diff --git a/packages/backend/src/server/api/SignupApiService.ts b/packages/backend/src/server/api/SignupApiService.ts
index 6552dac4bf..edb8e4e8e6 100644
--- a/packages/backend/src/server/api/SignupApiService.ts
+++ b/packages/backend/src/server/api/SignupApiService.ts
@@ -61,6 +61,12 @@ export class SignupApiService {
 					ctx.throw(400, e);
 				});
 			}
+
+			if (instance.enableTurnstile && instance.turnstileSecretKey) {
+				await this.captchaService.verifyTurnstile(instance.turnstileSecretKey, body['turnstile-response']).catch(e => {
+					ctx.throw(400, e);
+				});
+			}
 		}
 	
 		const username = body['username'];
diff --git a/packages/backend/src/server/api/endpoints/admin/meta.ts b/packages/backend/src/server/api/endpoints/admin/meta.ts
index 5b43c180d8..e5b8b6f8fe 100644
--- a/packages/backend/src/server/api/endpoints/admin/meta.ts
+++ b/packages/backend/src/server/api/endpoints/admin/meta.ts
@@ -47,6 +47,14 @@ export const meta = {
 				type: 'string',
 				optional: false, nullable: true,
 			},
+			enableTurnstile: {
+				type: 'boolean',
+				optional: false, nullable: false,
+			},
+			turnstileSiteKey: {
+				type: 'string',
+				optional: false, nullable: true,
+			},
 			swPublickey: {
 				type: 'string',
 				optional: false, nullable: true,
@@ -197,6 +205,10 @@ export const meta = {
 				type: 'string',
 				optional: true, nullable: true,
 			},
+			turnstileSecretKey: {
+				type: 'string',
+				optional: true, nullable: true,
+			}
 			sensitiveMediaDetection: {
 				type: 'string',
 				optional: true, nullable: false,
@@ -374,6 +386,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				hcaptchaSiteKey: instance.hcaptchaSiteKey,
 				enableRecaptcha: instance.enableRecaptcha,
 				recaptchaSiteKey: instance.recaptchaSiteKey,
+				enableTurnstile: instance.enableTurnstile,
+				turnstileSiteKey: instance.turnstileSiteKey,
 				swPublickey: instance.swPublicKey,
 				themeColor: instance.themeColor,
 				mascotImageUrl: instance.mascotImageUrl,
@@ -400,6 +414,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				blockedHosts: instance.blockedHosts,
 				hcaptchaSecretKey: instance.hcaptchaSecretKey,
 				recaptchaSecretKey: instance.recaptchaSecretKey,
+				turnstileSecretKey: instance.turnstileSecretKey,
 				sensitiveMediaDetection: instance.sensitiveMediaDetection,
 				sensitiveMediaDetectionSensitivity: instance.sensitiveMediaDetectionSensitivity,
 				setSensitiveFlagAutomatically: instance.setSensitiveFlagAutomatically,
diff --git a/packages/backend/src/server/api/endpoints/admin/update-meta.ts b/packages/backend/src/server/api/endpoints/admin/update-meta.ts
index 48fae9b947..2a19b1df5f 100644
--- a/packages/backend/src/server/api/endpoints/admin/update-meta.ts
+++ b/packages/backend/src/server/api/endpoints/admin/update-meta.ts
@@ -52,6 +52,9 @@ export const paramDef = {
 		enableRecaptcha: { type: 'boolean' },
 		recaptchaSiteKey: { type: 'string', nullable: true },
 		recaptchaSecretKey: { type: 'string', nullable: true },
+		enableTurnstile: { type: 'boolean' },
+		turnstileSiteKey: { type: 'string', nullable: true },
+		turnstileSecretKey: { type: 'string', nullable: true },
 		sensitiveMediaDetection: { type: 'string', enum: ['none', 'all', 'local', 'remote'] },
 		sensitiveMediaDetectionSensitivity: { type: 'string', enum: ['medium', 'low', 'high', 'veryLow', 'veryHigh'] },
 		setSensitiveFlagAutomatically: { type: 'boolean' },
@@ -231,6 +234,18 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				set.recaptchaSecretKey = ps.recaptchaSecretKey;
 			}
 
+			if (ps.enableTurnstile !== undefined) {
+				set.enableTurnstile = ps.enableTurnstile;
+			}
+
+			if (ps.turnstileSiteKey !== undefined) {
+				set.turnstileSiteKey = ps.turnstileSiteKey;
+			}
+
+			if (ps.turnstileSecretKey !== undefined) {
+				set.turnstileSecretKey = ps.turnstileSecretKey;
+			}
+
 			if (ps.sensitiveMediaDetection !== undefined) {
 				set.sensitiveMediaDetection = ps.sensitiveMediaDetection;
 			}
diff --git a/packages/backend/src/server/api/endpoints/meta.ts b/packages/backend/src/server/api/endpoints/meta.ts
index 5c09c33941..f2e6e6aea8 100644
--- a/packages/backend/src/server/api/endpoints/meta.ts
+++ b/packages/backend/src/server/api/endpoints/meta.ts
@@ -119,6 +119,14 @@ export const meta = {
 				type: 'string',
 				optional: false, nullable: true,
 			},
+			enableTurnstile: {
+				type: 'boolean',
+				optional: false, nullable: false,
+			},
+			turnstileSiteKey: {
+				type: 'string',
+				optional: false, nullable: true,
+			},
 			swPublickey: {
 				type: 'string',
 				optional: false, nullable: true,
@@ -372,6 +380,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				hcaptchaSiteKey: instance.hcaptchaSiteKey,
 				enableRecaptcha: instance.enableRecaptcha,
 				recaptchaSiteKey: instance.recaptchaSiteKey,
+				enableTurnstile: instance.enableTurnstile,
+				turnstileSiteKey: instance.turnstileSiteKey,
 				swPublickey: instance.swPublicKey,
 				themeColor: instance.themeColor,
 				mascotImageUrl: instance.mascotImageUrl,
@@ -423,6 +433,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 					elasticsearch: this.config.elasticsearch ? true : false,
 					hcaptcha: instance.enableHcaptcha,
 					recaptcha: instance.enableRecaptcha,
+					turnstile: instance.enableTurnstile,
 					objectStorage: instance.useObjectStorage,
 					twitter: instance.enableTwitterIntegration,
 					github: instance.enableGithubIntegration,
diff --git a/packages/client/src/components/MkCaptcha.vue b/packages/client/src/components/MkCaptcha.vue
index 7360734914..b399bb8921 100644
--- a/packages/client/src/components/MkCaptcha.vue
+++ b/packages/client/src/components/MkCaptcha.vue
@@ -20,7 +20,7 @@ type Captcha = {
 	getResponse(id: string): string;
 };
 
-type CaptchaProvider = 'hcaptcha' | 'recaptcha';
+type CaptchaProvider = 'hcaptcha' | 'recaptcha' | 'turnstile';
 
 type CaptchaContainer = {
 	readonly [_ in CaptchaProvider]?: Captcha;
@@ -48,6 +48,7 @@ const variable = computed(() => {
 	switch (props.provider) {
 		case 'hcaptcha': return 'hcaptcha';
 		case 'recaptcha': return 'grecaptcha';
+		case 'turnstile': return 'turnstile';
 	}
 });
 
@@ -57,6 +58,7 @@ const src = computed(() => {
 	switch (props.provider) {
 		case 'hcaptcha': return 'https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off';
 		case 'recaptcha': return 'https://www.recaptcha.net/recaptcha/api.js?render=explicit';
+		case 'turnstile': return 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
 	}
 });
 
diff --git a/packages/client/src/components/MkSignup.vue b/packages/client/src/components/MkSignup.vue
index a324bb6f5a..c1f91b18c2 100644
--- a/packages/client/src/components/MkSignup.vue
+++ b/packages/client/src/components/MkSignup.vue
@@ -59,6 +59,7 @@
 	</MkSwitch>
 	<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
 	<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
+	<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" class="_formBlock captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
 	<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ i18n.ts.start }}</MkButton>
 </form>
 </template>
@@ -92,6 +93,7 @@ const host = toUnicode(config.host);
 
 let hcaptcha = $ref();
 let recaptcha = $ref();
+let turnstile = $ref();
 
 let username: string = $ref('');
 let password: string = $ref('');
@@ -106,12 +108,14 @@ let submitting: boolean = $ref(false);
 let ToSAgreement: boolean = $ref(false);
 let hCaptchaResponse = $ref(null);
 let reCaptchaResponse = $ref(null);
+let turnstileResponse = $ref(null);
 
 const shouldDisableSubmitting = $computed((): boolean => {
 	return submitting ||
 		instance.tosUrl && !ToSAgreement ||
 		instance.enableHcaptcha && !hCaptchaResponse ||
 		instance.enableRecaptcha && !reCaptchaResponse ||
+		instance.enableTurnstile && !turnstileResponse ||
 		passwordRetypeState === 'not-match';
 });
 
@@ -198,6 +202,7 @@ function onSubmit(): void {
 		invitationCode,
 		'hcaptcha-response': hCaptchaResponse,
 		'g-recaptcha-response': reCaptchaResponse,
+		'turnstile-response': turnstileResponse,
 	}).then(() => {
 		if (instance.emailRequiredForSignup) {
 			os.alert({
@@ -222,6 +227,7 @@ function onSubmit(): void {
 		submitting = false;
 		hcaptcha.reset?.();
 		recaptcha.reset?.();
+		turnstile.reset?.();
 
 		os.alert({
 			type: 'error',
diff --git a/packages/client/src/pages/admin/bot-protection.vue b/packages/client/src/pages/admin/bot-protection.vue
index 72d5e379de..484a9d1a1a 100644
--- a/packages/client/src/pages/admin/bot-protection.vue
+++ b/packages/client/src/pages/admin/bot-protection.vue
@@ -6,6 +6,7 @@
 				<option :value="null">{{ i18n.ts.none }} ({{ i18n.ts.notRecommended }})</option>
 				<option value="hcaptcha">hCaptcha</option>
 				<option value="recaptcha">reCAPTCHA</option>
+				<option value="turnstile">Turnstile</option>
 			</FormRadios>
 
 			<template v-if="provider === 'hcaptcha'">
@@ -36,6 +37,20 @@
 					<MkCaptcha provider="recaptcha" :sitekey="recaptchaSiteKey"/>
 				</FormSlot>
 			</template>
+			<template v-else-if="provider === 'turnstile'">
+				<FormInput v-model="turnstileSiteKey" class="_formBlock">
+					<template #prefix><i class="fas fa-key"></i></template>
+					<template #label>{{ i18n.ts.turnstileSiteKey }}</template>
+				</FormInput>
+				<FormInput v-model="turnstileSecretKey" class="_formBlock">
+					<template #prefix><i class="fas fa-key"></i></template>
+					<template #label>{{ i18n.ts.turnstileSecretKey }}</template>
+				</FormInput>
+				<FormSlot class="_formBlock">
+					<template #label>{{ i18n.ts.preview }}</template>
+					<MkCaptcha provider="turnstile" :sitekey="turnstileSiteKey || '1x00000000000000000000AA'"/>
+				</FormSlot>
+			</template>
 
 			<FormButton primary @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
 		</div>
@@ -61,6 +76,8 @@ let hcaptchaSiteKey: string | null = $ref(null);
 let hcaptchaSecretKey: string | null = $ref(null);
 let recaptchaSiteKey: string | null = $ref(null);
 let recaptchaSecretKey: string | null = $ref(null);
+let turnstileSiteKey: string | null = $ref(null);
+let turnstileSecretKey: string | null = $ref(null);
 
 async function init() {
 	const meta = await os.api('admin/meta');
@@ -68,8 +85,10 @@ async function init() {
 	hcaptchaSecretKey = meta.hcaptchaSecretKey;
 	recaptchaSiteKey = meta.recaptchaSiteKey;
 	recaptchaSecretKey = meta.recaptchaSecretKey;
+	turnstileSiteKey = meta.turnstileSiteKey;
+	turnstileSecretKey = meta.turnstileSecretKey;
 
-	provider = meta.enableHcaptcha ? 'hcaptcha' : meta.enableRecaptcha ? 'recaptcha' : null;
+	provider = meta.enableHcaptcha ? 'hcaptcha' : meta.enableRecaptcha ? 'recaptcha' : meta.enableTurnstile ? 'turnstile' : null;
 }
 
 function save() {
@@ -80,6 +99,9 @@ function save() {
 		enableRecaptcha: provider === 'recaptcha',
 		recaptchaSiteKey,
 		recaptchaSecretKey,
+		enableTurnstile: provider === 'turnstile',
+		turnstileSiteKey,
+		turnstileSecretKey,
 	}).then(() => {
 		fetchInstance();
 	});
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 9200b5d547..20f82bba28 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -53,7 +53,7 @@ let view = $ref(null);
 let el = $ref(null);
 let pageProps = $ref({});
 let noMaintainerInformation = isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
-let noBotProtection = !instance.disableRegistration && !instance.enableHcaptcha && !instance.enableRecaptcha;
+let noBotProtection = !instance.disableRegistration && !instance.enableHcaptcha && !instance.enableRecaptcha && !instance.enableTurnstile;
 let noEmailServer = !instance.enableEmail;
 let thereIsUnresolvedAbuseReport = $ref(false);
 let currentPage = $computed(() => router.currentRef.value.child);
diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue
index c36cedb312..65d079c2cf 100644
--- a/packages/client/src/pages/admin/security.vue
+++ b/packages/client/src/pages/admin/security.vue
@@ -9,6 +9,7 @@
 					<template #label>{{ i18n.ts.botProtection }}</template>
 					<template v-if="enableHcaptcha" #suffix>hCaptcha</template>
 					<template v-else-if="enableRecaptcha" #suffix>reCAPTCHA</template>
+					<template v-else-if="enableTurnstile" #suffix>Turnstile</template>
 					<template v-else #suffix>{{ i18n.ts.none }} ({{ i18n.ts.notRecommended }})</template>
 
 					<XBotProtection/>
@@ -120,6 +121,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 let summalyProxy: string = $ref('');
 let enableHcaptcha: boolean = $ref(false);
 let enableRecaptcha: boolean = $ref(false);
+let enableTurnstile: boolean = $ref(false);
 let sensitiveMediaDetection: string = $ref('none');
 let sensitiveMediaDetectionSensitivity: number = $ref(0);
 let setSensitiveFlagAutomatically: boolean = $ref(false);
@@ -132,6 +134,7 @@ async function init() {
 	summalyProxy = meta.summalyProxy;
 	enableHcaptcha = meta.enableHcaptcha;
 	enableRecaptcha = meta.enableRecaptcha;
+	enableTurnstile = meta.enableTurnstile;
 	sensitiveMediaDetection = meta.sensitiveMediaDetection;
 	sensitiveMediaDetectionSensitivity =
 		meta.sensitiveMediaDetectionSensitivity === 'veryLow' ? 0 :
-- 
cgit v1.2.3-freya


From 24d18a7b19d6ee803578fc0e044fd377fcf587ef Mon Sep 17 00:00:00 2001
From: futchitwo <74236683+futchitwo@users.noreply.github.com>
Date: Fri, 4 Nov 2022 22:02:35 +0900
Subject: fix(client): clarify to use props.url (#9143)

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/global/MkUrl.vue b/packages/client/src/components/global/MkUrl.vue
index 37c0212eaa..740ce29080 100644
--- a/packages/client/src/components/global/MkUrl.vue
+++ b/packages/client/src/components/global/MkUrl.vue
@@ -1,6 +1,6 @@
 <template>
 <component
-	:is="self ? 'MkA' : 'a'" ref="el" class="ieqqeuvs _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
+	:is="self ? 'MkA' : 'a'" ref="el" class="ieqqeuvs _link" :[attr]="self ? props.url.substring(local.length) : props.url" :rel="rel" :target="target"
 	@contextmenu.stop="() => {}"
 >
 	<template v-if="!self">
@@ -11,7 +11,7 @@
 	<template v-if="pathname === '/' && self">
 		<span class="self">{{ hostname }}</span>
 	</template>
-	<span v-if="pathname != ''" class="pathname">{{ self ? pathname.substr(1) : pathname }}</span>
+	<span v-if="pathname != ''" class="pathname">{{ self ? pathname.substring(1) : pathname }}</span>
 	<span class="query">{{ query }}</span>
 	<span class="hash">{{ hash }}</span>
 	<i v-if="target === '_blank'" class="fas fa-external-link-square-alt icon"></i>
-- 
cgit v1.2.3-freya


From 1f3b1e7074c78a87ee3e7e089f8c1d2eeb2f2a49 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 12 Nov 2022 09:39:11 +0900
Subject: fix(client):
 インスタンスティッカーのfaviconを読み込む際に偽サイト警告が出ることがあるのを修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                        |  1 +
 packages/client/src/components/MkCropperDialog.vue  | 16 +++++++---------
 packages/client/src/components/MkInstanceTicker.vue |  7 ++++---
 packages/client/src/scripts/media-proxy.ts          | 13 +++++++++++++
 4 files changed, 25 insertions(+), 12 deletions(-)
 create mode 100644 packages/client/src/scripts/media-proxy.ts

(limited to 'packages/client/src')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d7513acdb7..92e47077de 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ You should also include the user name that made the change.
 
 ### Bugfixes
 - Server: Bug fix for Pinned Users lookup on instance @squidicuzz
+- Client: インスタンスティッカーのfaviconを読み込む際に偽サイト警告が出ることがあるのを修正 @syuilo
 
 ## 12.119.0 (2022/09/10)
 
diff --git a/packages/client/src/components/MkCropperDialog.vue b/packages/client/src/components/MkCropperDialog.vue
index 9a09834bf7..4b05a51252 100644
--- a/packages/client/src/components/MkCropperDialog.vue
+++ b/packages/client/src/components/MkCropperDialog.vue
@@ -34,9 +34,9 @@ import XModalWindow from '@/components/MkModalWindow.vue';
 import * as os from '@/os';
 import { $i } from '@/account';
 import { defaultStore } from '@/store';
-import { apiUrl, url } from '@/config';
-import { query } from '@/scripts/url';
+import { apiUrl } from '@/config';
 import { i18n } from '@/i18n';
+import { getProxiedImageUrl } from '@/scripts/media-proxy';
 
 const emit = defineEmits<{
 	(ev: 'ok', cropped: misskey.entities.DriveFile): void;
@@ -49,9 +49,7 @@ const props = defineProps<{
 	aspectRatio: number;
 }>();
 
-const imgUrl = `${url}/proxy/image.webp?${query({
-	url: props.file.url,
-})}`;
+const imgUrl = getProxiedImageUrl(props.file.url);
 let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
 let imgEl = $ref<HTMLImageElement>();
 let cropper: Cropper | null = null;
@@ -72,10 +70,10 @@ const ok = async () => {
 				method: 'POST',
 				body: formData,
 			})
-			.then(response => response.json())
-			.then(f => {
-				res(f);
-			});
+				.then(response => response.json())
+				.then(f => {
+					res(f);
+				});
 		});
 	});
 
diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
index d9f196f887..a5ff656f6d 100644
--- a/packages/client/src/components/MkInstanceTicker.vue
+++ b/packages/client/src/components/MkInstanceTicker.vue
@@ -9,6 +9,7 @@
 import { } from 'vue';
 import { instanceName } from '@/config';
 import { instance as Instance } from '@/instance';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
 
 const props = defineProps<{
 	instance?: {
@@ -20,15 +21,15 @@ const props = defineProps<{
 
 // if no instance data is given, this is for the local instance
 const instance = props.instance ?? {
-	faviconUrl: Instance.iconUrl || Instance.faviconUrl || '/favicon.ico',
+	faviconUrl: getProxiedImageUrlNullable(Instance.iconUrl) ?? getProxiedImageUrlNullable(Instance.faviconUrl) ?? '/favicon.ico',
 	name: instanceName,
-	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement)?.content
+	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content,
 };
 
 const themeColor = instance.themeColor ?? '#777777';
 
 const bg = {
-	background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`
+	background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`,
 };
 </script>
 
diff --git a/packages/client/src/scripts/media-proxy.ts b/packages/client/src/scripts/media-proxy.ts
new file mode 100644
index 0000000000..76e20786f4
--- /dev/null
+++ b/packages/client/src/scripts/media-proxy.ts
@@ -0,0 +1,13 @@
+import { query } from '@/scripts/url';
+import { url } from '@/config';
+
+export function getProxiedImageUrl(imageUrl: string): string {
+	return `${url}/proxy/image.webp?${query({
+		url: imageUrl,
+	})}`;
+}
+
+export function getProxiedImageUrlNullable(imageUrl: string | null | undefined): string | null {
+	if (imageUrl == null) return null;
+	return getProxiedImageUrl(imageUrl);
+}
-- 
cgit v1.2.3-freya


From 7462a1e816d341ac84eb60073dd6874a132b0151 Mon Sep 17 00:00:00 2001
From: nenohi <kimutipartylove@gmail.com>
Date: Sun, 13 Nov 2022 07:54:05 +0900
Subject: ノートの詳細ボタンを...に追加 (#9166)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* noteの詳細を追加

* add detail option to note menu

* add detailed , fix typo

* delete button

Co-authored-by: Gray Olson <gray@grayolson.com>
---
 packages/client/src/scripts/get-note-menu.ts | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
index 692986cd55..4826cd70fd 100644
--- a/packages/client/src/scripts/get-note-menu.ts
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -8,6 +8,7 @@ import * as os from '@/os';
 import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { url } from '@/config';
 import { noteActions } from '@/store';
+import { notePage } from '@/filters/note';
 
 export function getNoteMenu(props: {
 	note: misskey.entities.Note;
@@ -172,7 +173,9 @@ export function getNoteMenu(props: {
 			url: `${url}/notes/${appearNote.id}`,
 		});
 	}
-
+	function notedetails(): void {
+		os.pageWindow(`/notes/${appearNote.id}`);
+	}
 	async function translate(): Promise<void> {
 		if (props.translation.value != null) return;
 		props.translating.value = true;
@@ -198,8 +201,11 @@ export function getNoteMenu(props: {
 					danger: true,
 					action: unclip,
 				}, null] : []
-			),
-			{
+			), {
+				icon: 'fas fa-external-link-alt',
+				text: i18n.ts.details,
+				action: notedetails,
+			}, {
 				icon: 'fas fa-copy',
 				text: i18n.ts.copyContent,
 				action: copyContent,
@@ -300,6 +306,10 @@ export function getNoteMenu(props: {
 			.filter(x => x !== undefined);
 	} else {
 		menu = [{
+			icon: 'fas fa-external-link-alt',
+			text: i18n.ts.detailed,
+			action: openDetail,
+		}, {
 			icon: 'fas fa-copy',
 			text: i18n.ts.copyContent,
 			action: copyContent,
-- 
cgit v1.2.3-freya


From 831be69cec5a39e21ad05cb01270c6bfe90712ca Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 13 Nov 2022 11:43:23 +0900
Subject: refactor(client): use dvh

---
 packages/client/src/init.ts                | 10 ----------
 packages/client/src/ui/_common_/navbar.vue |  3 +--
 packages/client/src/ui/classic.vue         |  6 ++----
 packages/client/src/ui/deck.vue            |  6 ++----
 packages/client/src/ui/universal.vue       |  9 +++------
 packages/client/src/ui/zen.vue             |  3 +--
 6 files changed, 9 insertions(+), 28 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 737c044e61..f9e08d79b1 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -82,16 +82,6 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
 		else location.reload();
 	});
 
-	//#region SEE: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	// TODO: いつの日にか消したい
-	const vh = window.innerHeight * 0.01;
-	document.documentElement.style.setProperty('--vh', `${vh}px`);
-	window.addEventListener('resize', () => {
-		const vh = window.innerHeight * 0.01;
-		document.documentElement.style.setProperty('--vh', `${vh}px`);
-	});
-	//#endregion
-
 	// If mobile, insert the viewport meta tag
 	if (['smartphone', 'tablet'].includes(deviceKind)) {
 		const viewport = document.getElementsByName('viewport').item(0);
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 0c46e89412..20622b083a 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -168,8 +168,7 @@ function more(ev: MouseEvent) {
 		left: 0;
 		z-index: 1001;
 		width: $nav-icon-only-width;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
+		height: 100dvh;
 		box-sizing: border-box;
 		overflow: auto;
 		overflow-x: clip;
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
index c42407f5b0..cf82142fe0 100644
--- a/packages/client/src/ui/classic.vue
+++ b/packages/client/src/ui/classic.vue
@@ -198,8 +198,7 @@ onMounted(() => {
 	$ui-font-size: 1em;
 	$widgets-hide-threshold: 1200px;
 
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	min-height: calc(var(--vh, 1vh) * 100);
+	min-height: 100dvh;
 	box-sizing: border-box;
 
 	&.wallpaper {
@@ -301,8 +300,7 @@ onMounted(() => {
 		top: 0;
 		right: 0;
 		z-index: 1001;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
+		height: 100dvh;
 		padding: var(--margin);
 		box-sizing: border-box;
 		overflow: auto;
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 3c0c2a44b6..224ad7ee1a 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -255,8 +255,7 @@ async function deleteProfile() {
 	--deckDividerThickness: 5px;
 
 	display: flex;
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	height: calc(var(--vh, 1vh) * 100);
+	height: 100dvh;
 	box-sizing: border-box;
 	flex: 1;
 
@@ -424,8 +423,7 @@ async function deleteProfile() {
 		top: 0;
 		left: 0;
 		z-index: 1001;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
+		height: 100dvh;
 		width: 240px;
 		box-sizing: border-box;
 		contain: strict;
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 140c23a35c..7029f798f1 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -220,8 +220,7 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 	$ui-font-size: 1em; // TODO: どこかに集約したい
 	$widgets-hide-threshold: 1090px;
 
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	min-height: calc(var(--vh, 1vh) * 100);
+	min-height: 100dvh;
 	box-sizing: border-box;
 	display: flex;
 
@@ -273,8 +272,7 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 		top: 0;
 		right: 0;
 		z-index: 1001;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
+		height: 100dvh;
 		padding: var(--margin);
 		box-sizing: border-box;
 		overflow: auto;
@@ -362,8 +360,7 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 		top: 0;
 		left: 0;
 		z-index: 1001;
-		// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-		height: calc(var(--vh, 1vh) * 100);
+		height: 100dvh;
 		width: 240px;
 		box-sizing: border-box;
 		contain: strict;
diff --git a/packages/client/src/ui/zen.vue b/packages/client/src/ui/zen.vue
index c915f82428..84c96a1dae 100644
--- a/packages/client/src/ui/zen.vue
+++ b/packages/client/src/ui/zen.vue
@@ -28,8 +28,7 @@ document.documentElement.style.overflowY = 'scroll';
 
 <style lang="scss" scoped>
 .mk-app {
-	// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
-	min-height: calc(var(--vh, 1vh) * 100);
+	min-height: 100dvh;
 	box-sizing: border-box;
 }
 </style>
-- 
cgit v1.2.3-freya


From d5aee2ea58a16e0cf65213fab9e46192882feba9 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 17 Nov 2022 09:31:07 +0900
Subject: improve performance

---
 packages/backend/src/core/RelayService.ts          |  3 +-
 .../src/core/entities/DriveFileEntityService.ts    |  3 +-
 packages/backend/src/misc/clone.ts                 | 18 +++++++++
 .../backend/src/server/web/ClientServerService.ts  |  3 +-
 packages/client/src/components/MkNote.vue          |  5 ++-
 packages/client/src/components/MkNoteDetailed.vue  |  5 ++-
 packages/client/src/components/MkPostForm.vue      |  3 +-
 packages/client/src/pages/settings/reaction.vue    |  5 ++-
 .../src/pages/settings/statusbar.statusbar.vue     |  7 ++--
 packages/client/src/scripts/clone.ts               | 18 +++++++++
 packages/client/src/scripts/theme.ts               |  3 +-
 packages/client/src/ui/deck/deck-store.ts          | 45 ++++++++++------------
 packages/client/src/widgets/job-queue.vue          |  7 ++--
 packages/client/src/widgets/widget.ts              |  7 ++--
 14 files changed, 88 insertions(+), 44 deletions(-)
 create mode 100644 packages/backend/src/misc/clone.ts
 create mode 100644 packages/client/src/scripts/clone.ts

(limited to 'packages/client/src')

diff --git a/packages/backend/src/core/RelayService.ts b/packages/backend/src/core/RelayService.ts
index 563eeac0f0..3c67e0573f 100644
--- a/packages/backend/src/core/RelayService.ts
+++ b/packages/backend/src/core/RelayService.ts
@@ -9,6 +9,7 @@ import { QueueService } from '@/core/QueueService.js';
 import { CreateSystemUserService } from '@/core/CreateSystemUserService.js';
 import { ApRendererService } from '@/core/remote/activitypub/ApRendererService.js';
 import { DI } from '@/di-symbols.js';
+import { deepClone } from '@/misc/clone.js';
 
 const ACTOR_USERNAME = 'relay.actor' as const;
 
@@ -105,7 +106,7 @@ export class RelayService {
 		}));
 		if (relays.length === 0) return;
 	
-		const copy = structuredClone(activity);
+		const copy = deepClone(activity);
 		if (!copy.to) copy.to = ['https://www.w3.org/ns/activitystreams#Public'];
 	
 		const signed = await this.apRendererService.attachLdSignature(copy, user);
diff --git a/packages/backend/src/core/entities/DriveFileEntityService.ts b/packages/backend/src/core/entities/DriveFileEntityService.ts
index d9430e1497..e0aeb70dfc 100644
--- a/packages/backend/src/core/entities/DriveFileEntityService.ts
+++ b/packages/backend/src/core/entities/DriveFileEntityService.ts
@@ -9,6 +9,7 @@ import { awaitAll } from '@/misc/prelude/await-all.js';
 import type { User } from '@/models/entities/User.js';
 import type { DriveFile } from '@/models/entities/DriveFile.js';
 import { appendQuery, query } from '@/misc/prelude/url.js';
+import { deepClone } from '@/misc/clone.js';
 import { UtilityService } from '../UtilityService.js';
 import { UserEntityService } from './UserEntityService.js';
 import { DriveFolderEntityService } from './DriveFolderEntityService.js';
@@ -55,7 +56,7 @@ export class DriveFileEntityService {
 
 	public getPublicProperties(file: DriveFile): DriveFile['properties'] {
 		if (file.properties.orientation != null) {
-			const properties = structuredClone(file.properties);
+			const properties = deepClone(file.properties);
 			if (file.properties.orientation >= 5) {
 				[properties.width, properties.height] = [properties.height, properties.width];
 			}
diff --git a/packages/backend/src/misc/clone.ts b/packages/backend/src/misc/clone.ts
new file mode 100644
index 0000000000..16fad24129
--- /dev/null
+++ b/packages/backend/src/misc/clone.ts
@@ -0,0 +1,18 @@
+// structredCloneが遅いため
+// SEE: http://var.blog.jp/archives/86038606.html
+
+type Cloneable = string | number | boolean | null | { [key: string]: Cloneable } | Cloneable[];
+
+export function deepClone<T extends Cloneable>(x: T): T {
+	if (typeof x === 'object') {
+		if (x === null) return x;
+		if (Array.isArray(x)) return x.map(deepClone) as T;
+		const obj = {} as Record<string, Cloneable>;
+		for (const [k, v] of Object.entries(x)) {
+			obj[k] = deepClone(v);
+		}
+		return obj as T;
+	} else {
+		return x;
+	}
+}
diff --git a/packages/backend/src/server/web/ClientServerService.ts b/packages/backend/src/server/web/ClientServerService.ts
index 44450245a6..8957a91309 100644
--- a/packages/backend/src/server/web/ClientServerService.ts
+++ b/packages/backend/src/server/web/ClientServerService.ts
@@ -26,6 +26,7 @@ import { GalleryPostEntityService } from '@/core/entities/GalleryPostEntityServi
 import { ClipEntityService } from '@/core/entities/ClipEntityService.js';
 import { ChannelEntityService } from '@/core/entities/ChannelEntityService.js';
 import type { ChannelsRepository, ClipsRepository, GalleryPostsRepository, NotesRepository, PagesRepository, UserProfilesRepository, UsersRepository } from '@/models/index.js';
+import { deepClone } from '@/misc/clone.js';
 import manifest from './manifest.json' assert { type: 'json' };
 import { FeedService } from './FeedService.js';
 import { UrlPreviewService } from './UrlPreviewService.js';
@@ -86,7 +87,7 @@ export class ClientServerService {
 	}
 
 	private async manifestHandler(ctx: Koa.Context) {
-		const res = structuredClone(manifest);
+		const res = deepClone(manifest);
 
 		const instance = await this.metaService.fetch(true);
 
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index efe786ba4b..97eadb1945 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -129,6 +129,7 @@ import { $i } from '@/account';
 import { i18n } from '@/i18n';
 import { getNoteMenu } from '@/scripts/get-note-menu';
 import { useNoteCapture } from '@/scripts/use-note-capture';
+import { deepClone } from '@/scripts/clone';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -137,12 +138,12 @@ const props = defineProps<{
 
 const inChannel = inject('inChannel', null);
 
-let note = $ref(JSON.parse(JSON.stringify(props.note)));
+let note = $ref(deepClone(props.note));
 
 // plugin
 if (noteViewInterruptors.length > 0) {
 	onMounted(async () => {
-		let result = JSON.parse(JSON.stringify(note));
+		let result = deepClone(note);
 		for (const interruptor of noteViewInterruptors) {
 			result = await interruptor.handler(result);
 		}
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 0bf8f330ba..82468027fd 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -139,6 +139,7 @@ import { $i } from '@/account';
 import { i18n } from '@/i18n';
 import { getNoteMenu } from '@/scripts/get-note-menu';
 import { useNoteCapture } from '@/scripts/use-note-capture';
+import { deepClone } from '@/scripts/clone';
 
 const props = defineProps<{
 	note: misskey.entities.Note;
@@ -147,12 +148,12 @@ const props = defineProps<{
 
 const inChannel = inject('inChannel', null);
 
-let note = $ref(JSON.parse(JSON.stringify(props.note)));
+let note = $ref(deepClone(props.note));
 
 // plugin
 if (noteViewInterruptors.length > 0) {
 	onMounted(async () => {
-		let result = JSON.parse(JSON.stringify(note));
+		let result = deepClone(note);
 		for (const interruptor of noteViewInterruptors) {
 			result = await interruptor.handler(result);
 		}
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 0c57a5a57a..24f2bfb9e6 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -89,6 +89,7 @@ import { i18n } from '@/i18n';
 import { instance } from '@/instance';
 import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account';
 import { uploadFile } from '@/scripts/upload';
+import { deepClone } from '@/scripts/clone';
 
 const modal = inject('modal');
 
@@ -575,7 +576,7 @@ async function post() {
 	// plugin
 	if (notePostInterruptors.length > 0) {
 		for (const interruptor of notePostInterruptors) {
-			postData = await interruptor.handler(JSON.parse(JSON.stringify(postData)));
+			postData = await interruptor.handler(deepClone(postData));
 		}
 	}
 
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index c23c1c2375..f8d57cbcd5 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -66,8 +66,9 @@ import * as os from '@/os';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { deepClone } from '@/scripts/clone';
 
-let reactions = $ref(JSON.parse(JSON.stringify(defaultStore.state.reactions)));
+let reactions = $ref(deepClone(defaultStore.state.reactions));
 
 const reactionPickerSize = $computed(defaultStore.makeGetterSetter('reactionPickerSize'));
 const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPickerWidth'));
@@ -101,7 +102,7 @@ async function setDefault() {
 	});
 	if (canceled) return;
 
-	reactions = JSON.parse(JSON.stringify(defaultStore.def.reactions.default));
+	reactions = deepClone(defaultStore.def.reactions.default);
 }
 
 function chooseEmoji(ev: MouseEvent) {
diff --git a/packages/client/src/pages/settings/statusbar.statusbar.vue b/packages/client/src/pages/settings/statusbar.statusbar.vue
index 98a1825b95..608222386e 100644
--- a/packages/client/src/pages/settings/statusbar.statusbar.vue
+++ b/packages/client/src/pages/settings/statusbar.statusbar.vue
@@ -91,13 +91,14 @@ import FormRange from '@/components/form/range.vue';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
+import { deepClone } from '@/scripts/clone';
 
 const props = defineProps<{
 	_id: string;
 	userLists: any[] | null;
 }>();
 
-const statusbar = reactive(JSON.parse(JSON.stringify(defaultStore.state.statusbars.find(x => x.id === props._id))));
+const statusbar = reactive(deepClone(defaultStore.state.statusbars.find(x => x.id === props._id)));
 
 watch(() => statusbar.type, () => {
 	if (statusbar.type === 'rss') {
@@ -128,8 +129,8 @@ watch(statusbar, save);
 
 async function save() {
 	const i = defaultStore.state.statusbars.findIndex(x => x.id === props._id);
-	const statusbars = JSON.parse(JSON.stringify(defaultStore.state.statusbars));
-	statusbars[i] = JSON.parse(JSON.stringify(statusbar));
+	const statusbars = deepClone(defaultStore.state.statusbars);
+	statusbars[i] = deepClone(statusbar);
 	defaultStore.set('statusbars', statusbars);
 }
 
diff --git a/packages/client/src/scripts/clone.ts b/packages/client/src/scripts/clone.ts
new file mode 100644
index 0000000000..16fad24129
--- /dev/null
+++ b/packages/client/src/scripts/clone.ts
@@ -0,0 +1,18 @@
+// structredCloneが遅いため
+// SEE: http://var.blog.jp/archives/86038606.html
+
+type Cloneable = string | number | boolean | null | { [key: string]: Cloneable } | Cloneable[];
+
+export function deepClone<T extends Cloneable>(x: T): T {
+	if (typeof x === 'object') {
+		if (x === null) return x;
+		if (Array.isArray(x)) return x.map(deepClone) as T;
+		const obj = {} as Record<string, Cloneable>;
+		for (const [k, v] of Object.entries(x)) {
+			obj[k] = deepClone(v);
+		}
+		return obj as T;
+	} else {
+		return x;
+	}
+}
diff --git a/packages/client/src/scripts/theme.ts b/packages/client/src/scripts/theme.ts
index 3f55d9ae86..62a2b9459a 100644
--- a/packages/client/src/scripts/theme.ts
+++ b/packages/client/src/scripts/theme.ts
@@ -13,6 +13,7 @@ export type Theme = {
 
 import lightTheme from '@/themes/_light.json5';
 import darkTheme from '@/themes/_dark.json5';
+import { deepClone } from './clone';
 
 export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
 
@@ -60,7 +61,7 @@ export function applyTheme(theme: Theme, persist = true) {
 	const colorSchema = theme.base === 'dark' ? 'dark' : 'light';
 
 	// Deep copy
-	const _theme = JSON.parse(JSON.stringify(theme));
+	const _theme = deepClone(theme);
 
 	if (_theme.base) {
 		const base = [lightTheme, darkTheme].find(x => x.id === _theme.base);
diff --git a/packages/client/src/ui/deck/deck-store.ts b/packages/client/src/ui/deck/deck-store.ts
index 67fcff4807..56db7398e5 100644
--- a/packages/client/src/ui/deck/deck-store.ts
+++ b/packages/client/src/ui/deck/deck-store.ts
@@ -4,6 +4,7 @@ import { notificationTypes } from 'misskey-js';
 import { Storage } from '../../pizzax';
 import { i18n } from '@/i18n';
 import { api } from '@/os';
+import { deepClone } from '@/scripts/clone';
 
 type ColumnWidget = {
 	name: string;
@@ -25,10 +26,6 @@ export type Column = {
 	tl?: 'home' | 'local' | 'social' | 'global';
 };
 
-function copy<T>(x: T): T {
-	return JSON.parse(JSON.stringify(x));
-}
-
 export const deckStore = markRaw(new Storage('deck', {
 	profile: {
 		where: 'deviceAccount',
@@ -128,7 +125,7 @@ export function swapColumn(a: Column['id'], b: Column['id']) {
 	const aY = deckStore.state.layout[aX].findIndex(id => id === a);
 	const bX = deckStore.state.layout.findIndex(ids => ids.indexOf(b) !== -1);
 	const bY = deckStore.state.layout[bX].findIndex(id => id === b);
-	const layout = copy(deckStore.state.layout);
+	const layout = deepClone(deckStore.state.layout);
 	layout[aX][aY] = b;
 	layout[bX][bY] = a;
 	deckStore.set('layout', layout);
@@ -136,7 +133,7 @@ export function swapColumn(a: Column['id'], b: Column['id']) {
 }
 
 export function swapLeftColumn(id: Column['id']) {
-	const layout = copy(deckStore.state.layout);
+	const layout = deepClone(deckStore.state.layout);
 	deckStore.state.layout.some((ids, i) => {
 		if (ids.includes(id)) {
 			const left = deckStore.state.layout[i - 1];
@@ -152,7 +149,7 @@ export function swapLeftColumn(id: Column['id']) {
 }
 
 export function swapRightColumn(id: Column['id']) {
-	const layout = copy(deckStore.state.layout);
+	const layout = deepClone(deckStore.state.layout);
 	deckStore.state.layout.some((ids, i) => {
 		if (ids.includes(id)) {
 			const right = deckStore.state.layout[i + 1];
@@ -168,9 +165,9 @@ export function swapRightColumn(id: Column['id']) {
 }
 
 export function swapUpColumn(id: Column['id']) {
-	const layout = copy(deckStore.state.layout);
+	const layout = deepClone(deckStore.state.layout);
 	const idsIndex = deckStore.state.layout.findIndex(ids => ids.includes(id));
-	const ids = copy(deckStore.state.layout[idsIndex]);
+	const ids = deepClone(deckStore.state.layout[idsIndex]);
 	ids.some((x, i) => {
 		if (x === id) {
 			const up = ids[i - 1];
@@ -188,9 +185,9 @@ export function swapUpColumn(id: Column['id']) {
 }
 
 export function swapDownColumn(id: Column['id']) {
-	const layout = copy(deckStore.state.layout);
+	const layout = deepClone(deckStore.state.layout);
 	const idsIndex = deckStore.state.layout.findIndex(ids => ids.includes(id));
-	const ids = copy(deckStore.state.layout[idsIndex]);
+	const ids = deepClone(deckStore.state.layout[idsIndex]);
 	ids.some((x, i) => {
 		if (x === id) {
 			const down = ids[i + 1];
@@ -208,7 +205,7 @@ export function swapDownColumn(id: Column['id']) {
 }
 
 export function stackLeftColumn(id: Column['id']) {
-	let layout = copy(deckStore.state.layout);
+	let layout = deepClone(deckStore.state.layout);
 	const i = deckStore.state.layout.findIndex(ids => ids.includes(id));
 	layout = layout.map(ids => ids.filter(_id => _id !== id));
 	layout[i - 1].push(id);
@@ -218,7 +215,7 @@ export function stackLeftColumn(id: Column['id']) {
 }
 
 export function popRightColumn(id: Column['id']) {
-	let layout = copy(deckStore.state.layout);
+	let layout = deepClone(deckStore.state.layout);
 	const i = deckStore.state.layout.findIndex(ids => ids.includes(id));
 	const affected = layout[i];
 	layout = layout.map(ids => ids.filter(_id => _id !== id));
@@ -226,7 +223,7 @@ export function popRightColumn(id: Column['id']) {
 	layout = layout.filter(ids => ids.length > 0);
 	deckStore.set('layout', layout);
 
-	const columns = copy(deckStore.state.columns);
+	const columns = deepClone(deckStore.state.columns);
 	for (const column of columns) {
 		if (affected.includes(column.id)) {
 			column.active = true;
@@ -238,9 +235,9 @@ export function popRightColumn(id: Column['id']) {
 }
 
 export function addColumnWidget(id: Column['id'], widget: ColumnWidget) {
-	const columns = copy(deckStore.state.columns);
+	const columns = deepClone(deckStore.state.columns);
 	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
-	const column = copy(deckStore.state.columns[columnIndex]);
+	const column = deepClone(deckStore.state.columns[columnIndex]);
 	if (column == null) return;
 	if (column.widgets == null) column.widgets = [];
 	column.widgets.unshift(widget);
@@ -250,9 +247,9 @@ export function addColumnWidget(id: Column['id'], widget: ColumnWidget) {
 }
 
 export function removeColumnWidget(id: Column['id'], widget: ColumnWidget) {
-	const columns = copy(deckStore.state.columns);
+	const columns = deepClone(deckStore.state.columns);
 	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
-	const column = copy(deckStore.state.columns[columnIndex]);
+	const column = deepClone(deckStore.state.columns[columnIndex]);
 	if (column == null) return;
 	column.widgets = column.widgets.filter(w => w.id !== widget.id);
 	columns[columnIndex] = column;
@@ -261,9 +258,9 @@ export function removeColumnWidget(id: Column['id'], widget: ColumnWidget) {
 }
 
 export function setColumnWidgets(id: Column['id'], widgets: ColumnWidget[]) {
-	const columns = copy(deckStore.state.columns);
+	const columns = deepClone(deckStore.state.columns);
 	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
-	const column = copy(deckStore.state.columns[columnIndex]);
+	const column = deepClone(deckStore.state.columns[columnIndex]);
 	if (column == null) return;
 	column.widgets = widgets;
 	columns[columnIndex] = column;
@@ -272,9 +269,9 @@ export function setColumnWidgets(id: Column['id'], widgets: ColumnWidget[]) {
 }
 
 export function updateColumnWidget(id: Column['id'], widgetId: string, widgetData: any) {
-	const columns = copy(deckStore.state.columns);
+	const columns = deepClone(deckStore.state.columns);
 	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
-	const column = copy(deckStore.state.columns[columnIndex]);
+	const column = deepClone(deckStore.state.columns[columnIndex]);
 	if (column == null) return;
 	column.widgets = column.widgets.map(w => w.id === widgetId ? {
 		...w,
@@ -286,9 +283,9 @@ export function updateColumnWidget(id: Column['id'], widgetId: string, widgetDat
 }
 
 export function updateColumn(id: Column['id'], column: Partial<Column>) {
-	const columns = copy(deckStore.state.columns);
+	const columns = deepClone(deckStore.state.columns);
 	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
-	const currentColumn = copy(deckStore.state.columns[columnIndex]);
+	const currentColumn = deepClone(deckStore.state.columns[columnIndex]);
 	if (currentColumn == null) return;
 	for (const [k, v] of Object.entries(column)) {
 		currentColumn[k] = v;
diff --git a/packages/client/src/widgets/job-queue.vue b/packages/client/src/widgets/job-queue.vue
index 8897f240bd..363d1b3ea0 100644
--- a/packages/client/src/widgets/job-queue.vue
+++ b/packages/client/src/widgets/job-queue.vue
@@ -47,12 +47,13 @@
 
 <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';
 import { stream } from '@/stream';
 import number from '@/filters/number';
 import * as sound from '@/scripts/sound';
 import * as os from '@/os';
+import { deepClone } from '@/scripts/clone';
 
 const name = 'jobQueue';
 
@@ -100,12 +101,12 @@ const prev = reactive({} as typeof current);
 const jammedSound = sound.setVolume(sound.getAudio('syuilo/queue-jammed'), 1);
 
 for (const domain of ['inbox', 'deliver']) {
-	prev[domain] = JSON.parse(JSON.stringify(current[domain]));
+	prev[domain] = deepClone(current[domain]);
 }
 
 const onStats = (stats) => {
 	for (const domain of ['inbox', 'deliver']) {
-		prev[domain] = JSON.parse(JSON.stringify(current[domain]));
+		prev[domain] = deepClone(current[domain]);
 		current[domain].activeSincePrevTick = stats[domain].activeSincePrevTick;
 		current[domain].active = stats[domain].active;
 		current[domain].waiting = stats[domain].waiting;
diff --git a/packages/client/src/widgets/widget.ts b/packages/client/src/widgets/widget.ts
index 9fdfe7f3e1..8bd56a5966 100644
--- a/packages/client/src/widgets/widget.ts
+++ b/packages/client/src/widgets/widget.ts
@@ -2,6 +2,7 @@ import { reactive, watch } from 'vue';
 import { throttle } from 'throttle-debounce';
 import { Form, GetFormResultType } from '@/scripts/form';
 import * as os from '@/os';
+import { deepClone } from '@/scripts/clone';
 
 export type Widget<P extends Record<string, unknown>> = {
 	id: string;
@@ -32,7 +33,7 @@ export const useWidgetPropsManager = <F extends Form & Record<string, { default:
 	save: () => void;
 	configure: () => void;
 } => {
-	const widgetProps = reactive(props.widget ? JSON.parse(JSON.stringify(props.widget.data)) : {});
+	const widgetProps = reactive(props.widget ? deepClone(props.widget.data) : {});
 
 	const mergeProps = () => {
 		for (const prop of Object.keys(propsDef)) {
@@ -43,14 +44,14 @@ export const useWidgetPropsManager = <F extends Form & Record<string, { default:
 	};
 	watch(widgetProps, () => {
 		mergeProps();
-	}, { deep: true, immediate: true, });
+	}, { deep: true, immediate: true });
 
 	const save = throttle(3000, () => {
 		emit('updateProps', widgetProps);
 	});
 
 	const configure = async () => {
-		const form = JSON.parse(JSON.stringify(propsDef));
+		const form = deepClone(propsDef);
 		for (const item of Object.keys(form)) {
 			form[item].default = widgetProps[item];
 		}
-- 
cgit v1.2.3-freya


From 1f4a955787554e195fc2fe8c49eaf2be7aa4271e Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 22 Nov 2022 14:43:06 +0900
Subject: remove preferences-registry

---
 .../src/pages/settings/preferences-registry.vue    | 380 ---------------------
 1 file changed, 380 deletions(-)
 delete mode 100644 packages/client/src/pages/settings/preferences-registry.vue

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/settings/preferences-registry.vue b/packages/client/src/pages/settings/preferences-registry.vue
deleted file mode 100644
index c01e4ee83d..0000000000
--- a/packages/client/src/pages/settings/preferences-registry.vue
+++ /dev/null
@@ -1,380 +0,0 @@
-<template>
-<div class="_formRoot">
-	<div :class="$style.buttons">
-		<MkButton inline class="primary" @click="saveNew">{{ ts._preferencesRegistry.saveNew }}</MkButton>
-		<MkButton inline class="" @click="loadFile">{{ ts._preferencesRegistry.loadFile }}</MkButton>
-	</div>
-
-	<FormSection>
-		<template #label>{{ ts._preferencesRegistry.list }}</template>
-		<div
-			v-if="registries && Object.keys(registries).length > 0"
-			v-for="(registry, id) in registries"
-			:key="id"
-			class="_formBlock _panel"
-			:class="$style.registry"
-			@click="$event => menu($event, id)"
-			@contextmenu.prevent.stop="$event => menu($event, id)"
-		>
-			<div :class="$style.registryName">{{ registry.name }}</div>
-			<div :class="$style.registryTime">{{ t('_preferencesRegistry.createdAt', { date: (new Date(registry.createdAt)).toLocaleDateString(), time: (new Date(registry.createdAt)).toLocaleTimeString() }) }}</div>
-			<div :class="$style.registryTime" v-if="registry.updatedAt">{{ t('_preferencesRegistry.updatedAt', { date: (new Date(registry.updatedAt)).toLocaleDateString(), time: (new Date(registry.updatedAt)).toLocaleTimeString() }) }}</div>
-		</div>
-		<div v-else-if="registries">
-			<MkInfo>{{ ts._preferencesRegistry.noRegistries }}</MkInfo>
-		</div>
-		<MkLoading v-else />
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, useCssModule } from 'vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/ui/button.vue';
-import MkInfo from '@/components/ui/info.vue';
-import * as os from '@/os';
-import { v4 as uuid } from 'uuid';
-import { ColdDeviceStorage, defaultStore } from '@/store';
-import * as symbols from '@/symbols';
-import { unisonReload } from '@/scripts/unison-reload';
-import { stream } from '@/stream';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { version } from '@/config';
-const { t, ts } = i18n;
-
-useCssModule();
-
-const scope = ['clientPreferencesProfiles'];
-
-const connection = $i && stream.useChannel('main');
-
-const registryProps = ['name', 'createdAt', 'updatedAt', 'version', 'defaultStore', 'coldDeviceStorage', 'fontSize', 'useSystemFont', 'wallpaper'];
-type Registry = {
-	name: string;
-	createdAt: string;
-	updatedAt: string | null;
-	version: string;
-	defaultStore: Partial<typeof defaultStore.state>;
-	coldDeviceStorage: Partial<typeof ColdDeviceStorage.default>;
-	fontSize: string | null;
-	useSystemFont: 't' | null;
-	wallpaper: string | null;
-};
-
-type Registries = {
-	[key: string]: Registry;
-};
-
-let registries = $ref<Registries | null>(null);
-
-os.api('i/registry/get-all', { scope })
-	.then(res => {
-		registries = res || {};
-	});
-
-function getDefaultStoreValues() {
-	return (Object.keys(defaultStore.state) as (keyof typeof defaultStore.state)[]).reduce((acc, key) => {
-		if (defaultStore.def[key].where !== 'account') acc[key] = defaultStore.state[key];
-		return acc;
-	}, {} as any);
-}
-
-function isObject(value: any) {
-	return value && typeof value === 'object' && !Array.isArray(value);
-}
-
-function validate(registry: any): void {
-	if (!registries) return;
-
-	// Check if unnecessary properties exist
-	if (Object.keys(registry).some(key => !registryProps.includes(key))) throw Error('Unnecessary properties exist');
-
-	if (!registry.name) throw Error('Name is falsy');
-	if (!registry.version) throw Error('Version is falsy');
-	
-	// Check if createdAt and updatedAt is Date
-	// https://zenn.dev/lollipop_onl/articles/eoz-judge-js-invalid-date
-	if (!registry.createdAt || Number.isNaN(new Date(registry.createdAt).getTime())) throw Error('createdAt is falsy or not Date');
-	if (registry.updatedAt) {
-		if (Number.isNaN(new Date(registry.updatedAt).getTime())) {
-			throw Error('updatedAt is not Date');
-		}
-	} else if (registry.updatedAt !== null) {
-		throw Error('updatedAt is not null');
-	}
-
-	if (!registry.defaultStore || !isObject(registry.defaultStore)) throw Error('defaultStore is falsy or not an object');
-	if (!registry.coldDeviceStorage || !isObject(registry.coldDeviceStorage)) throw Error('coldDeviceStorage is falsy or not an object');
-}
-
-async function saveNew() {
-	if (!registries) return;
-
-	const { canceled, result: name } = await os.inputText({
-		title: ts._preferencesRegistry.inputName,
-		text: ts._preferencesRegistry.saveNewDescription,
-	});
-
-	if (canceled) return;
-	if (Object.entries(registries).some(e => e[1].name === name)) {
-		return os.alert({
-			title: ts._preferencesRegistry.cannotSave,
-			text: t('_preferencesRegistry.nameAlreadyExists', { name }),
-		});
-	}
-
-	const id = uuid();
-	const registry: Registry = {
-		name,
-		createdAt: (new Date()).toISOString(),
-		updatedAt: null,
-		version,
-		defaultStore: getDefaultStoreValues(),
-		coldDeviceStorage: ColdDeviceStorage.getAll(),
-		fontSize: localStorage.getItem('fontSize'),
-		useSystemFont: localStorage.getItem('useSystemFont') as 't' | null,
-		wallpaper: localStorage.getItem('wallpaper'),
-	};
-	await os.api('i/registry/set', { scope, key: id, value: registry });
-}
-
-function loadFile() {
-	const input = document.createElement('input');
-	input.type = 'file';
-	input.multiple = false;
-	input.onchange = async () => {
-		if (!registries) return;
-		if (!input.files || input.files.length === 0) return;
-
-		const file = input.files[0];
-
-		if (file.type !== 'application/json') {
-			return os.alert({
-				type: 'error',
-				title: ts._preferencesRegistry.cannotLoad,
-				text: ts._preferencesRegistry.invalidFile,
-			});
-		}
-
-		let registry: Registry;
-		try {
-			registry = JSON.parse(await file.text()) as unknown as Registry;
-			validate(registry);
-		} catch (e) {
-			return os.alert({
-				type: 'error',
-				title: ts._preferencesRegistry.cannotLoad,
-				text: e?.message,
-			});
-		}
-
-		const id = uuid();
-		await os.api('i/registry/set', { scope, key: id, value: registry });
-
-		// 一応廃棄
-		(window as any).__misskey_input_ref__ = null;
-	};
-
-	// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
-	// iOS Safari で正常に動かす為のおまじない
-	(window as any).__misskey_input_ref__ = input;
-
-	input.click();
-}
-
-async function applyRegistry(id: string) {
-	if (!registries) return;
-
-	const registry = registries[id];
-
-	const { canceled: cancel1 } = await os.confirm({
-		type: 'warning',
-		title: ts._preferencesRegistry.apply,
-		text: t('_preferencesRegistry.applyConfirm', { name: registry.name }),
-	});
-	if (cancel1) return;
-
-	// defaultStore
-	for (const [key, value] of Object.entries(registry.defaultStore)) {
-		if (key in defaultStore.def && defaultStore.def[key].where !== 'account') {
-			defaultStore.set(key as keyof Registry['defaultStore'], value);
-		}
-	}
-
-	// coldDeviceStorage
-	for (const [key, value] of Object.entries(registry.coldDeviceStorage)) {
-		ColdDeviceStorage.set(key as keyof Registry['coldDeviceStorage'], value);
-	}
-
-	// fontSize
-	if (registry.fontSize) {
-		localStorage.setItem('fontSize', registry.fontSize);
-	} else {
-		localStorage.removeItem('fontSize');
-	}
-
-	// useSystemFont
-	if (registry.useSystemFont) {
-		localStorage.setItem('useSystemFont', registry.useSystemFont);
-	} else {
-		localStorage.removeItem('useSystemFont');
-	}
-
-	// wallpaper
-	if (registry.wallpaper != null) {
-		localStorage.setItem('wallpaper', registry.wallpaper);
-	} else {
-		localStorage.removeItem('wallpaper');
-	}
-
-	const { canceled: cancel2 } = await os.confirm({
-		type: 'info',
-		text: ts.reloadToApplySetting,
-	});
-	if (cancel2) return;
-
-	unisonReload();
-}
-
-async function deleteRegistry(id: string) {
-	if (!registries) return;
-
-	const { canceled } = await os.confirm({
-		type: 'info',
-		title: ts._preferencesRegistry.delete,
-		text: t('_preferencesRegistry.deleteConfirm', { name: registries[id].name }),
-	});
-	if (canceled) return;
-
-	await os.api('i/registry/remove', { scope, key: id });
-	delete registries[id];
-}
-
-async function save(id: string) {
-	if (!registries) return;
-
-	const { name, createdAt } = registries[id];
-
-	const { canceled } = await os.confirm({
-		type: 'info',
-		title: ts._preferencesRegistry.save,
-		text: t('_preferencesRegistry.saveConfirm', { name }),
-	});
-	if (canceled) return;
-
-	const registry: Registry = {
-		name,
-		createdAt,
-		updatedAt: (new Date()).toISOString(),
-		version,
-		defaultStore: getDefaultStoreValues(),
-		coldDeviceStorage: ColdDeviceStorage.getAll(),
-		fontSize: localStorage.getItem('fontSize'),
-		useSystemFont: localStorage.getItem('useSystemFont') as 't' | null,
-		wallpaper: localStorage.getItem('wallpaper'),
-	};
-	await os.api('i/registry/set', { scope, key: id, value: registry });
-}
-
-async function rename(id: string) {
-	if (!registries) return;
-
-	const { canceled: cancel1, result: name } = await os.inputText({
-		title: ts._preferencesRegistry.inputName,
-	});
-	if (cancel1 || registries[id].name === name) return;
-
-	if (Object.entries(registries).some(e => e[1].name === name)) {
-		return os.alert({
-			title: ts._preferencesRegistry.cannotSave,
-			text: t('_preferencesRegistry.nameAlreadyExists', { name }),
-		});
-	}
-
-	const registry = Object.assign({}, { ...registries[id] });
-
-	const { canceled: cancel2 } = await os.confirm({
-		type: 'info',
-		title: ts._preferencesRegistry.rename,
-		text: t('_preferencesRegistry.renameConfirm', { old: registry.name, new: name }),
-	});
-	if (cancel2) return;
-
-	registry.name = name;
-	await os.api('i/registry/set', { scope, key: id, value: registry });
-}
-
-function menu(ev: MouseEvent, registryId: string) {
-	if (!registries) return;
-
-	return os.popupMenu([{
-		text: ts._preferencesRegistry.apply,
-		icon: 'fas fa-circle-down',
-		action: () => applyRegistry(registryId),
-	}, {
-		type: 'a',
-		text: ts._preferencesRegistry.download,
-		icon: 'fas fa-download',
-		href: URL.createObjectURL(new Blob([JSON.stringify(registries[registryId], null, 2)], { type: 'application/json' })),
-		download: `${registries[registryId].name}.json`,
-	}, {
-		text: ts._preferencesRegistry.rename,
-		icon: 'fas fa-i-cursor',
-		action: () => rename(registryId),
-	}, {
-		text: ts._preferencesRegistry.save,
-		icon: 'fas fa-floppy-disk',
-		action: () => save(registryId),
-	}, {
-		text: ts._preferencesRegistry.delete,
-		icon: 'fas fa-trash-can',
-		action: () => deleteRegistry(registryId),
-	}], ev.currentTarget ?? ev.target)
-}
-
-onMounted(() => {
-	// streamingのuser storage updateイベントを監視して更新
-	connection?.on('registryUpdated', ({ scope: recievedScope, key, value }) => {
-		if (!recievedScope || recievedScope.length !== scope.length || recievedScope[0] !== scope[0]) return;
-		if (!registries) return;
-
-		registries[key] = value;
-	});
-});
-
-onUnmounted(() => {
-	connection?.off('registryUpdated');
-});
-
-defineExpose({
-	[symbols.PAGE_INFO]: {
-		title: ts.preferencesRegistry,
-		icon: 'fas fa-floppy-disk',
-		bg: 'var(--bg)',
-	}
-})
-</script>
-
-<style lang="scss" module>
-.buttons {
-	display: flex;
-	gap: var(--margin);
-	flex-wrap: wrap;
-}
-
-.registry {
-	padding: 20px;
-	cursor: pointer;
-
-	&Name {
-		font-weight: 700;
-	}
-
-	&Time {
-		font-size: .85em;
-		opacity: .7;
-	}
-}
-</style>
-- 
cgit v1.2.3-freya


From cc637015bc7e0f4fc56f77fc74edaff8d41207fb Mon Sep 17 00:00:00 2001
From: Ikko Ashimine <eltociear@gmail.com>
Date: Thu, 24 Nov 2022 17:45:20 +0900
Subject: Fix typo in keycode.ts (#9224)

Programatically -> Programmatically
---
 packages/client/src/scripts/keycode.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/scripts/keycode.ts b/packages/client/src/scripts/keycode.ts
index c127d54bb2..69f6a82803 100644
--- a/packages/client/src/scripts/keycode.ts
+++ b/packages/client/src/scripts/keycode.ts
@@ -18,7 +18,7 @@ export const aliases = {
 };
 
 /*!
-* Programatically add the following
+* Programmatically add the following
 */
 
 // lower case chars
-- 
cgit v1.2.3-freya


From 8b9dc962ae7b04354c65f6e80ad0e9a6bafd57ea Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 24 Nov 2022 18:27:05 +0900
Subject: Revert #8098

---
 packages/client/package.json                 |   1 -
 packages/client/src/init.ts                  |   5 -
 packages/client/src/pizzax.ts                | 263 ++++++++-------------------
 packages/client/src/scripts/unison-reload.ts |   1 +
 packages/client/src/store.ts                 |  10 -
 packages/client/tsconfig.json                |   3 +-
 yarn.lock                                    |  12 +-
 7 files changed, 83 insertions(+), 212 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/package.json b/packages/client/package.json
index a8ca3a2f05..8860662cde 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -27,7 +27,6 @@
 		"compare-versions": "5.0.1",
 		"cropperjs": "2.0.0-beta",
 		"date-fns": "2.29.3",
-		"deepcopy": "2.1.0",
 		"escape-regexp": "0.0.1",
 		"eventemitter3": "4.0.7",
 		"idb-keyval": "6.2.0",
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 5af1136061..f9e08d79b1 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -38,7 +38,6 @@ import { reloadChannel } from '@/scripts/unison-reload';
 import { reactionPicker } from '@/scripts/reaction-picker';
 import { getUrlWithoutLoginId } from '@/scripts/login-id';
 import { getAccountFromId } from '@/scripts/get-account-from-id';
-import { deckStore } from './ui/deck/deck-store';
 
 (async () => {
 	console.info(`Misskey v${version}`);
@@ -74,8 +73,6 @@ import { deckStore } from './ui/deck/deck-store';
 		});
 	}
 
-	await defaultStore.ready;
-
 	// タッチデバイスでCSSの:hoverを機能させる
 	document.addEventListener('touchend', () => {}, { passive: true });
 
@@ -191,8 +188,6 @@ import { deckStore } from './ui/deck/deck-store';
 		splash.remove();
 	});
 
-	await deckStore.ready;
-
 	// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
 	// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
 	const rootEl = (() => {
diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
index c98de098af..642e1f4f7f 100644
--- a/packages/client/src/pizzax.ts
+++ b/packages/client/src/pizzax.ts
@@ -1,12 +1,8 @@
 // PIZZAX --- A lightweight store
 
 import { onUnmounted, Ref, ref, watch } from 'vue';
-import { BroadcastChannel } from 'broadcast-channel';
-import deepcopy from 'deepcopy';
 import { $i } from './account';
 import { api } from './os';
-import { get, set } from './scripts/idb-proxy';
-import { defaultStore } from './store';
 import { stream } from './stream';
 
 type StateDef = Record<string, {
@@ -14,196 +10,119 @@ type StateDef = Record<string, {
 	default: any;
 }>;
 
-type State<T extends StateDef> = { [K in keyof T]: T[K]['default']; };
-type ReactiveState<T extends StateDef> = { [K in keyof T]: Ref<T[K]['default']>; };
-
 type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
 
-type PizzaxChannelMessage<T extends StateDef> = {
-	where: 'device' | 'deviceAccount';
-	key: keyof T;
-	value: T[keyof T]['default'];
-	userId?: string;
-};
-
 const connection = $i && stream.useChannel('main');
 
 export class Storage<T extends StateDef> {
-	public readonly ready: Promise<void>;
-	public readonly loaded: Promise<void>;
-
 	public readonly key: string;
-	public readonly deviceStateKeyName: `pizzax::${this['key']}`;
-	public readonly deviceAccountStateKeyName: `pizzax::${this['key']}::${string}` | '';
-	public readonly registryCacheKeyName: `pizzax::${this['key']}::cache::${string}` | '';
+	public readonly keyForLocalStorage: string;
 
 	public readonly def: T;
 
 	// TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487
-	public readonly state: State<T>;
-	public readonly reactiveState: ReactiveState<T>;
-
-	private pizzaxChannel: BroadcastChannel<PizzaxChannelMessage<T>>;
-
-	// 簡易的にキューイングして占有ロックとする
-	private currentIdbJob: Promise<any> = Promise.resolve();
-	private addIdbSetJob<T>(job: () => Promise<T>) {
-		const promise = this.currentIdbJob.then(job, e => {
-			console.error('Pizzax failed to save data to idb!', e);
-			return job();
-		});
-		this.currentIdbJob = promise;
-		return promise;
-	}
+	public readonly state: { [K in keyof T]: T[K]['default'] };
+	public readonly reactiveState: { [K in keyof T]: Ref<T[K]['default']> };
 
 	constructor(key: string, def: T) {
 		this.key = key;
-		this.deviceStateKeyName = `pizzax::${key}`;
-		this.deviceAccountStateKeyName = $i ? `pizzax::${key}::${$i.id}` : '';
-		this.registryCacheKeyName = $i ? `pizzax::${key}::cache::${$i.id}` : '';
+		this.keyForLocalStorage = 'pizzax::' + key;
 		this.def = def;
 
-		this.pizzaxChannel = new BroadcastChannel(`pizzax::${key}`);
+		// TODO: indexedDBにする
+		const deviceState = JSON.parse(localStorage.getItem(this.keyForLocalStorage) || '{}');
+		const deviceAccountState = $i ? JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::' + $i.id) || '{}') : {};
+		const registryCache = $i ? JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}') : {};
 
-		this.state = {} as State<T>;
-		this.reactiveState = {} as ReactiveState<T>;
-
-		for (const [k, v] of Object.entries(def) as [keyof T, T[keyof T]['default']][]) {
-			this.state[k] = v.default;
-			this.reactiveState[k] = ref(v.default);
-		}
-	
-		this.ready = this.init();
-		this.loaded = this.ready.then(() => this.load());
-	}
-
-	private async init(): Promise<void> {
-		await this.migrate();
-
-		const deviceState: State<T> = await get(this.deviceStateKeyName) || {};
-		const deviceAccountState = $i ? await get(this.deviceAccountStateKeyName) || {} : {};
-		const registryCache = $i ? await get(this.registryCacheKeyName) || {} : {};
-	
-		for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]['default']][]) {
+		const state = {};
+		const reactiveState = {};
+		for (const [k, v] of Object.entries(def)) {
 			if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
-				this.reactiveState[k].value = this.state[k] = deviceState[k];
+				state[k] = deviceState[k];
 			} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) {
-				this.reactiveState[k].value = this.state[k] = registryCache[k];
+				state[k] = registryCache[k];
 			} else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
-				this.reactiveState[k].value = this.state[k] = deviceAccountState[k];
+				state[k] = deviceAccountState[k];
 			} else {
-				this.reactiveState[k].value = this.state[k] = v.default;
+				state[k] = v.default;
 				if (_DEV_) console.log('Use default value', k, v.default);
 			}
 		}
-
-		this.pizzaxChannel.addEventListener('message', ({ where, key, value, userId }) => {
-			// アカウント変更すればunisonReloadが効くため、このreturnが発火することは
-			// まずないと思うけど一応弾いておく
-			if (where === 'deviceAccount' && !($i && userId !== $i.id)) return;
-			this.reactiveState[key].value = this.state[key] = value;
-		});
-
-		if ($i) {
-			// streamingのuser storage updateイベントを監視して更新
-			connection?.on('registryUpdated', ({ scope, key, value }: { scope?: string[], key: keyof T, value: T[typeof key]['default'] }) => {
-				if (!scope || scope.length !== 2 || scope[0] !== 'client' || scope[1] !== this.key || this.state[key] === value) return;
-
-				this.reactiveState[key].value = this.state[key] = value;
+		for (const [k, v] of Object.entries(state)) {
+			reactiveState[k] = ref(v);
+		}
+		this.state = state as any;
+		this.reactiveState = reactiveState as any;
 	
-				this.addIdbSetJob(async () => {
-					const cache = await get(this.registryCacheKeyName);
-					if (cache[key] !== value) {
-						cache[key] = value;
-						await set(this.registryCacheKeyName, cache);
+		if ($i) {
+			// なぜかsetTimeoutしないとapi関数内でエラーになる(おそらく循環参照してることに原因がありそう)
+			window.setTimeout(() => {
+				api('i/registry/get-all', { scope: ['client', this.key] }).then(kvs => {
+					const cache = {};
+					for (const [k, v] of Object.entries(def)) {
+						if (v.where === 'account') {
+							if (Object.prototype.hasOwnProperty.call(kvs, k)) {
+								state[k] = kvs[k];
+								reactiveState[k].value = kvs[k];
+								cache[k] = kvs[k];
+							} else {
+								state[k] = v.default;
+								reactiveState[k].value = v.default;
+							}
+						}
 					}
+					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
 				});
-			});
-		}
-	}
+			}, 1);
+			// streamingのuser storage updateイベントを監視して更新
+			connection?.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
+				if (scope.length !== 2 || scope[0] !== 'client' || scope[1] !== this.key || this.state[key] === value) return;
 
-	private load(): Promise<void> {
-		return new Promise((resolve, reject) => {
-			if ($i) {
-				// api関数と循環参照なので一応setTimeoutしておく
-				window.setTimeout(async () => {
-					await defaultStore.ready;
+				this.state[key] = value;
+				this.reactiveState[key].value = value;
 
-					api('i/registry/get-all', { scope: ['client', this.key] })
-					.then(kvs => {
-						const cache: Partial<T> = {};
-						for (const [k, v] of Object.entries(this.def) as [keyof T, T[keyof T]['default']][]) {
-							if (v.where === 'account') {
-								if (Object.prototype.hasOwnProperty.call(kvs, k)) {
-									this.reactiveState[k].value = this.state[k] = (kvs as Partial<T>)[k];
-									cache[k] = (kvs as Partial<T>)[k];
-								} else {
-									this.reactiveState[k].value = this.state[k] = v.default;
-								}
-							}
-						}
-	
-						return set(this.registryCacheKeyName, cache);
-					})
-					.then(() => resolve());
-				}, 1);
-			}
-
-			resolve();
-		});
+				const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
+				if (cache[key] !== value) {
+					cache[key] = value;
+					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
+				}
+			});
+		}
 	}
 
-	public set<K extends keyof T>(key: K, value: T[K]['default']): Promise<void> {
-		// IndexedDBやBroadcastChannelで扱うために単純なオブジェクトにする
-		// (JSON.parse(JSON.stringify(value))の代わり)
-		const rawValue = deepcopy(value);
+	public set<K extends keyof T>(key: K, value: T[K]['default']): void {
+		if (_DEV_) console.log('set', key, value);
 
-		if (_DEV_) console.log('set', key, rawValue, value);
+		this.state[key] = value;
+		this.reactiveState[key].value = value;
 
-		this.reactiveState[key].value = this.state[key] = rawValue;
-
-		return this.addIdbSetJob(async () => {
-			if (_DEV_) console.log(`set ${key} start`);
-			switch (this.def[key].where) {
-				case 'device': {
-					this.pizzaxChannel.postMessage({
-						where: 'device',
-						key,
-						value: rawValue,
-					});
-					const deviceState = await get(this.deviceStateKeyName) || {};
-					deviceState[key] = rawValue;
-					await set(this.deviceStateKeyName, deviceState);
-					break;
-				}
-				case 'deviceAccount': {
-					if ($i == null) break;
-					this.pizzaxChannel.postMessage({
-						where: 'deviceAccount',
-						key,
-						value: rawValue,
-						userId: $i.id,
-					});
-					const deviceAccountState = await get(this.deviceAccountStateKeyName) || {};
-					deviceAccountState[key] = rawValue;
-					await set(this.deviceAccountStateKeyName, deviceAccountState);
-					break;
-				}
-				case 'account': {
-					if ($i == null) break;
-					const cache = await get(this.registryCacheKeyName) || {};
-					cache[key] = rawValue;
-					await set(this.registryCacheKeyName, cache);
-					await api('i/registry/set', {
-						scope: ['client', this.key],
-						key: key.toString(),
-						value: rawValue,
-					});
-					break;
-				}
+		switch (this.def[key].where) {
+			case 'device': {
+				const deviceState = JSON.parse(localStorage.getItem(this.keyForLocalStorage) || '{}');
+				deviceState[key] = value;
+				localStorage.setItem(this.keyForLocalStorage, JSON.stringify(deviceState));
+				break;
 			}
-			if (_DEV_) console.log(`set ${key} complete`);
-		});
+			case 'deviceAccount': {
+				if ($i == null) break;
+				const deviceAccountState = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::' + $i.id) || '{}');
+				deviceAccountState[key] = value;
+				localStorage.setItem(this.keyForLocalStorage + '::' + $i.id, JSON.stringify(deviceAccountState));
+				break;
+			}
+			case 'account': {
+				if ($i == null) break;
+				const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
+				cache[key] = value;
+				localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
+				api('i/registry/set', {
+					scope: ['client', this.key],
+					key: key,
+					value: value,
+				});
+				break;
+			}
+		}
 	}
 
 	public push<K extends keyof T>(key: K, value: ArrayElement<T[K]['default']>): void {
@@ -213,7 +132,6 @@ export class Storage<T extends StateDef> {
 
 	public reset(key: keyof T) {
 		this.set(key, this.def[key].default);
-		return this.def[key].default;
 	}
 
 	/**
@@ -248,25 +166,4 @@ export class Storage<T extends StateDef> {
 			},
 		};
 	}
-
-	// localStorage => indexedDBのマイグレーション
-	private async migrate() {
-		const deviceState = localStorage.getItem(this.deviceStateKeyName);
-		if (deviceState) { 
-			await set(this.deviceStateKeyName, JSON.parse(deviceState));
-			localStorage.removeItem(this.deviceStateKeyName);
-		}
-
-		const deviceAccountState = $i && localStorage.getItem(this.deviceAccountStateKeyName);
-		if ($i && deviceAccountState) {
-			await set(this.deviceAccountStateKeyName, JSON.parse(deviceAccountState));
-			localStorage.removeItem(this.deviceAccountStateKeyName);
-		}
-
-		const registryCache = $i && localStorage.getItem(this.registryCacheKeyName);
-		if ($i && registryCache) {
-			await set(this.registryCacheKeyName, JSON.parse(registryCache));
-			localStorage.removeItem(this.registryCacheKeyName);
-		}
-	}
 }
diff --git a/packages/client/src/scripts/unison-reload.ts b/packages/client/src/scripts/unison-reload.ts
index b5afe9b07d..59af584c1b 100644
--- a/packages/client/src/scripts/unison-reload.ts
+++ b/packages/client/src/scripts/unison-reload.ts
@@ -1,3 +1,4 @@
+// SafariがBroadcastChannel未実装なのでライブラリを使う
 import { BroadcastChannel } from 'broadcast-channel';
 
 export const reloadChannel = new BroadcastChannel<string | null>('reload');
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index b83904b6a9..3971214af0 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -303,16 +303,6 @@ export class ColdDeviceStorage {
 		}
 	}
 
-	public static getAll(): Partial<typeof this.default> {
-		return (Object.keys(this.default) as (keyof typeof this.default)[]).reduce((acc, key) => {
-			const value = localStorage.getItem(PREFIX + key);
-			if (value != null) {
-				acc[key] = JSON.parse(value);
-			}
-			return acc;
-		}, {} as any);
-	}
-
 	public static set<T extends keyof typeof ColdDeviceStorage.default>(key: T, value: typeof ColdDeviceStorage.default[T]): void {
 		// 呼び出し側のバグ等で undefined が来ることがある
 		// undefined を文字列として localStorage に入れると参照する際の JSON.parse でコケて不具合の元になるため無視
diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json
index 2e968ca7f7..ae86db54e2 100644
--- a/packages/client/tsconfig.json
+++ b/packages/client/tsconfig.json
@@ -11,8 +11,7 @@
 		"sourceMap": false,
 		"target": "es2017",
 		"module": "esnext",
-		"moduleResolution": "node",
-		"allowSyntheticDefaultImports": true,
+		"moduleResolution": "node"
 		"removeComments": false,
 		"noLib": false,
 		"strict": true,
diff --git a/yarn.lock b/yarn.lock
index 9ce17130fa..8ac348436a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5067,7 +5067,6 @@ __metadata:
     cross-env: 7.0.3
     cypress: 11.1.0
     date-fns: 2.29.3
-    deepcopy: 2.1.0
     escape-regexp: 0.0.1
     eslint: 8.28.0
     eslint-plugin-import: 2.26.0
@@ -6067,15 +6066,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deepcopy@npm:2.1.0":
-  version: 2.1.0
-  resolution: "deepcopy@npm:2.1.0"
-  dependencies:
-    type-detect: ^4.0.8
-  checksum: 7890ccaa8ad672bdc33d02626d13666bfbb33a68f7c6e8921a348b962b77edc4daf7f1301a789ec74a97e7f0acd611099c5cdd1e8b32ce93287819722f57b92e
-  languageName: node
-  linkType: hard
-
 "deepmerge@npm:^4.2.2":
   version: 4.2.2
   resolution: "deepmerge@npm:4.2.2"
@@ -16564,7 +16554,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-detect@npm:4.0.8, type-detect@npm:^4.0.8":
+"type-detect@npm:4.0.8":
   version: 4.0.8
   resolution: "type-detect@npm:4.0.8"
   checksum: 62b5628bff67c0eb0b66afa371bd73e230399a8d2ad30d852716efcc4656a7516904570cd8631a49a3ce57c10225adf5d0cbdcb47f6b0255fe6557c453925a15
-- 
cgit v1.2.3-freya


From 707398b1d9084480868f05f7d9d8b3f0cdd25a14 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 27 Nov 2022 08:57:11 +0900
Subject: enhance: Modify MkInstanceTicker (#9236)

* fix and enhance MkNoteDetailed

* change instanceticker

* :art:

* fix

* :art:

* fix

* :art:

* revert MkNoteDetailed
---
 .../client/src/components/MkInstanceTicker.vue     | 38 ++++++++++++----------
 packages/client/src/scripts/media-proxy.ts         |  7 ++--
 2 files changed, 24 insertions(+), 21 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
index a5ff656f6d..d8228b2c0f 100644
--- a/packages/client/src/components/MkInstanceTicker.vue
+++ b/packages/client/src/components/MkInstanceTicker.vue
@@ -1,7 +1,7 @@
 <template>
-<div class="hpaizdrt" :style="bg">
-	<img v-if="instance.faviconUrl" class="icon" :src="instance.faviconUrl"/>
-	<span class="name">{{ instance.name }}</span>
+<div :class="$style.root" :style="bg">
+	<img v-if="faviconUrl" :class="$style.icon" :src="faviconUrl"/>
+	<div :class="$style.name">{{ instance.name }}</div>
 </div>
 </template>
 
@@ -21,11 +21,12 @@ const props = defineProps<{
 
 // if no instance data is given, this is for the local instance
 const instance = props.instance ?? {
-	faviconUrl: getProxiedImageUrlNullable(Instance.iconUrl) ?? getProxiedImageUrlNullable(Instance.faviconUrl) ?? '/favicon.ico',
 	name: instanceName,
 	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content,
 };
 
+const faviconUrl = $computed(() => props.instance ? getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') : getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(Instance.faviconUrl, 'preview') ?? '/favicon.ico');
+
 const themeColor = instance.themeColor ?? '#777777';
 
 const bg = {
@@ -33,13 +34,15 @@ const bg = {
 };
 </script>
 
-<style lang="scss" scoped>
-.hpaizdrt {
-	$height: 1.1rem;
+<style lang="scss" module>
+$height: 2ex;
 
+.root {
+	display: flex;
+	align-items: center;
 	height: $height;
 	border-radius: 4px 0 0 4px;
-	overflow: hidden;
+	overflow: clip;
 	color: #fff;
 	text-shadow: /* .866 ≈ sin(60deg) */
 		1px 0 1px #000,
@@ -54,17 +57,16 @@ const bg = {
 		0 -1px 1px #000,
 		.5px -.866px 1px #000,
 		.866px -.5px 1px #000;
+}
 
-	> .icon {
-		height: 100%;
-	}
+.icon {
+	height: $height;
+}
 
-	> .name {
-		margin-left: 4px;
-		line-height: $height;
-		font-size: 0.9em;
-		vertical-align: top;
-		font-weight: bold;
-	}
+.name {
+	margin-left: 4px;
+	line-height: 1;
+	font-size: 0.9em;
+	font-weight: bold;
 }
 </style>
diff --git a/packages/client/src/scripts/media-proxy.ts b/packages/client/src/scripts/media-proxy.ts
index 76e20786f4..506cb78291 100644
--- a/packages/client/src/scripts/media-proxy.ts
+++ b/packages/client/src/scripts/media-proxy.ts
@@ -1,13 +1,14 @@
 import { query } from '@/scripts/url';
 import { url } from '@/config';
 
-export function getProxiedImageUrl(imageUrl: string): string {
+export function getProxiedImageUrl(imageUrl: string, type?: 'preview'): string {
 	return `${url}/proxy/image.webp?${query({
 		url: imageUrl,
+		...(type ? { [type]: "1" } : {}),
 	})}`;
 }
 
-export function getProxiedImageUrlNullable(imageUrl: string | null | undefined): string | null {
+export function getProxiedImageUrlNullable(imageUrl: string | null | undefined, type?: 'preview'): string | null {
 	if (imageUrl == null) return null;
-	return getProxiedImageUrl(imageUrl);
+	return getProxiedImageUrl(imageUrl, type);
 }
-- 
cgit v1.2.3-freya


From dba80a7e8e0df58cf8359f23e18f642b58ec2440 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 27 Nov 2022 09:04:09 +0900
Subject: Fix #9234 (#9235)

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 82468027fd..0ba93bbd76 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -35,7 +35,7 @@
 			<div class="body">
 				<div class="top">
 					<MkA v-user-preview="appearNote.user.id" class="name" :to="userPage(appearNote.user)">
-						<MkUserName :user="appearNote.user"/>
+						<MkUserName :nowrap="false" :user="appearNote.user"/>
 					</MkA>
 					<span v-if="appearNote.user.isBot" class="is-bot">bot</span>
 					<div class="info">
@@ -397,6 +397,7 @@ if (appearNote.replyId) {
 			display: flex;
 			position: relative;
 			margin-bottom: 16px;
+			align-items: center;
 
 			> .avatar {
 				display: block;
@@ -416,14 +417,15 @@ if (appearNote.replyId) {
 				> .top {
 					> .name {
 						font-weight: bold;
+						line-height: 1.3;
 					}
 
 					> .is-bot {
-						flex-shrink: 0;
-						align-self: center;
+						display: inline-block;
 						margin: 0 0.5em;
 						padding: 4px 6px;
 						font-size: 80%;
+						line-height: 1;
 						border: solid 0.5px var(--divider);
 						border-radius: 4px;
 					}
@@ -432,6 +434,12 @@ if (appearNote.replyId) {
 						float: right;
 					}
 				}
+
+				> .username {
+					margin-bottom: 2px;
+					line-height: 1.3;
+					word-wrap: anywhere;
+				}
 			}
 		}
 
-- 
cgit v1.2.3-freya


From 19c50f5d0ca50c329028e62c3c2534ac5fd13545 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 30 Nov 2022 04:53:24 +0000
Subject: :art: MkInstanceTicker

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
index d8228b2c0f..646172fe8d 100644
--- a/packages/client/src/components/MkInstanceTicker.vue
+++ b/packages/client/src/components/MkInstanceTicker.vue
@@ -57,10 +57,16 @@ $height: 2ex;
 		0 -1px 1px #000,
 		.5px -.866px 1px #000,
 		.866px -.5px 1px #000;
+	mask-image: linear-gradient(90deg,
+		rgb(0,0,0),
+		rgb(0,0,0) calc(100% - 16px),
+		rgba(0,0,0,0) 100%
+	);
 }
 
 .icon {
 	height: $height;
+	flex-shrink: 0;
 }
 
 .name {
@@ -68,5 +74,7 @@ $height: 2ex;
 	line-height: 1;
 	font-size: 0.9em;
 	font-weight: bold;
+	white-space: nowrap;
+	overflow: visible;
 }
 </style>
-- 
cgit v1.2.3-freya


From 2037c83541f28f22c072d61fce7096c13e97d845 Mon Sep 17 00:00:00 2001
From: Laura Hausmann <laura@hausmann.dev>
Date: Fri, 2 Dec 2022 22:14:37 +0100
Subject: fix(client): make note visibility inheritance behave correctly when
 default is set to followers-only (#9238)

* Fix post visibility

* Also in the case of specified

* fix

Co-authored-by: tamaina <tamaina@hotmail.co.jp>
---
 packages/client/src/components/MkPostForm.vue | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 24f2bfb9e6..4b7730d5d5 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -262,13 +262,22 @@ if (props.channel) {
 
 // 公開以外へのリプライ時は元の公開範囲を引き継ぐ
 if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visibility)) {
-	visibility = props.reply.visibility;
-	if (props.reply.visibility === 'specified') {
-		os.api('users/show', {
-			userIds: props.reply.visibleUserIds.filter(uid => uid !== $i.id && uid !== props.reply.userId),
-		}).then(users => {
-			users.forEach(pushVisibleUser);
-		});
+	if (props.reply.visibility === 'home' && visibility === 'followers') {
+		visibility = 'followers';
+	} else if (['home', 'followers'].includes(props.reply.visibility) && visibility === 'specified') {
+		visibility = 'specified';
+	} else {
+		visibility = props.reply.visibility;
+	}
+
+	if (visibility === 'specified') {
+		if (props.reply.visibleUserIds) {
+			os.api('users/show', {
+				userIds: props.reply.visibleUserIds.filter(uid => uid !== $i.id && uid !== props.reply.userId),
+			}).then(users => {
+				users.forEach(pushVisibleUser);
+			});
+		}
 
 		if (props.reply.userId !== $i.id) {
 			os.api('users/show', { userId: props.reply.userId }).then(user => {
-- 
cgit v1.2.3-freya


From 3a7182bfb5734599321fc03ea77c48b4dbc326d5 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 3 Dec 2022 19:42:05 +0900
Subject: Fastify (#9106)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* fix

* Update SignupApiService.ts

* wip

* wip

* Update ClientServerService.ts

* wip

* wip

* wip

* Update WellKnownServerService.ts

* wip

* wip

* update des

* wip

* Update ApiServerService.ts

* wip

* update deps

* Update WellKnownServerService.ts

* wip

* update deps

* Update ApiCallService.ts

* Update ApiCallService.ts

* Update ApiServerService.ts
---
 packages/backend/package.json                      |   38 +-
 packages/backend/src/@types/koa-json-body.d.ts     |   15 -
 packages/backend/src/@types/koa-slow.d.ts          |   14 -
 packages/backend/src/boot/index.ts                 |    1 +
 packages/backend/src/core/CaptchaService.ts        |   30 +-
 .../core/remote/activitypub/ApRendererService.ts   |    2 +-
 packages/backend/src/env.ts                        |    1 -
 packages/backend/src/misc/create-temp.ts           |    2 +-
 packages/backend/src/misc/fastify-reply-error.ts   |   11 +
 .../backend/src/server/ActivityPubServerService.ts |  300 ++--
 packages/backend/src/server/FileServerService.ts   |   99 +-
 .../backend/src/server/MediaProxyServerService.ts  |   51 +-
 .../backend/src/server/NodeinfoServerService.ts    |   21 +-
 packages/backend/src/server/ServerService.ts       |   95 +-
 .../backend/src/server/WellKnownServerService.ts   |   81 +-
 packages/backend/src/server/api/ApiCallService.ts  |  229 +--
 .../backend/src/server/api/ApiServerService.ts     |  161 ++-
 .../backend/src/server/api/AuthenticateService.ts  |    2 +-
 .../backend/src/server/api/SigninApiService.ts     |   99 +-
 packages/backend/src/server/api/SigninService.ts   |   45 +-
 .../backend/src/server/api/SignupApiService.ts     |   72 +-
 packages/backend/src/server/api/endpoint-base.ts   |   13 +-
 .../src/server/api/endpoints/drive/files/create.ts |    8 +-
 .../server/api/integration/DiscordServerService.ts |   99 +-
 .../server/api/integration/GithubServerService.ts  |   99 +-
 .../server/api/integration/TwitterServerService.ts |   83 +-
 .../backend/src/server/web/ClientServerService.ts  |  345 ++---
 .../backend/src/server/web/UrlPreviewService.ts    |   25 +-
 packages/backend/src/server/web/bios.js            |    2 +-
 packages/backend/src/server/web/boot.js            |   10 +-
 packages/client/src/account.ts                     |   46 +-
 packages/client/src/components/MkCropperDialog.vue |    2 +-
 packages/client/src/components/MkUrlPreview.vue    |    4 +-
 packages/client/src/components/MkYoutubePlayer.vue |    2 +-
 packages/client/src/components/page/page.post.vue  |   24 +-
 packages/client/src/os.ts                          |    7 +-
 packages/client/src/ui/_common_/statusbar-rss.vue  |    2 +-
 packages/client/src/widgets/rss-ticker.vue         |    2 +-
 packages/client/src/widgets/rss.vue                |    2 +-
 yarn.lock                                          | 1520 ++++++++------------
 40 files changed, 1669 insertions(+), 1995 deletions(-)
 delete mode 100644 packages/backend/src/@types/koa-json-body.d.ts
 delete mode 100644 packages/backend/src/@types/koa-slow.d.ts
 create mode 100644 packages/backend/src/misc/fastify-reply-error.ts

(limited to 'packages/client/src')

diff --git a/packages/backend/package.json b/packages/backend/package.json
index 9e50d4d9fa..81e7888b84 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -21,20 +21,19 @@
 		"@tensorflow/tfjs-node": "4.1.0"
 	},
 	"dependencies": {
-		"@bull-board/api": "4.3.1",
-		"@bull-board/koa": "4.3.1",
-		"@bull-board/ui": "4.3.1",
 		"@discordapp/twemoji": "14.0.2",
-		"@elastic/elasticsearch": "7.17.0",
-		"@koa/cors": "3.3.0",
-		"@koa/multer": "3.0.0",
-		"@koa/router": "9.0.1",
+		"@fastify/accepts": "4.0.1",
+		"@fastify/cors": "8.2.0",
+		"@fastify/multipart": "7.3.0",
+		"@fastify/static": "6.5.0",
+		"@fastify/view": "7.1.2",
 		"@nestjs/common": "9.2.0",
 		"@nestjs/core": "9.2.0",
 		"@nestjs/testing": "9.2.0",
 		"@peertube/http-signature": "1.7.0",
 		"@sinonjs/fake-timers": "10.0.0",
 		"@syuilo/aiscript": "0.11.1",
+		"accepts": "^1.3.8",
 		"ajv": "8.11.2",
 		"archiver": "5.3.1",
 		"autobind-decorator": "2.4.0",
@@ -54,6 +53,7 @@
 		"date-fns": "2.29.3",
 		"deep-email-validator": "0.1.21",
 		"escape-regexp": "0.0.1",
+		"fastify": "4.10.0",
 		"feed": "4.2.2",
 		"file-type": "18.0.0",
 		"fluent-ffmpeg": "2.1.2",
@@ -69,20 +69,10 @@
 		"json5-loader": "4.0.1",
 		"jsonld": "8.1.0",
 		"jsrsasign": "10.6.1",
-		"koa": "2.13.4",
-		"koa-bodyparser": "4.3.0",
-		"koa-favicon": "2.1.0",
-		"koa-json-body": "5.3.0",
-		"koa-logger": "3.2.1",
-		"koa-mount": "4.0.0",
-		"koa-send": "5.0.1",
-		"koa-slow": "2.1.0",
-		"koa-views": "7.0.2",
 		"mfm-js": "0.23.0",
 		"mime-types": "2.1.35",
 		"misskey-js": "0.0.14",
 		"ms": "3.0.0-canary.1",
-		"multer": "1.4.4",
 		"nested-property": "4.0.0",
 		"node-fetch": "3.3.0",
 		"nodemailer": "6.8.0",
@@ -129,6 +119,7 @@
 		"ulid": "2.3.0",
 		"unzipper": "0.10.11",
 		"uuid": "9.0.0",
+		"vary": "1.1.2",
 		"web-push": "3.5.0",
 		"websocket": "1.0.34",
 		"ws": "8.11.0",
@@ -138,6 +129,7 @@
 		"@redocly/openapi-core": "1.0.0-beta.114",
 		"@swc/core": "1.3.20",
 		"@swc/jest": "0.2.23",
+		"@types/accepts": "1.3.5",
 		"@types/archiver": "5.3.1",
 		"@types/bcryptjs": "2.4.2",
 		"@types/bull": "4.10.0",
@@ -149,17 +141,6 @@
 		"@types/jsdom": "20.0.1",
 		"@types/jsonld": "1.5.8",
 		"@types/jsrsasign": "10.5.4",
-		"@types/koa": "2.13.5",
-		"@types/koa-bodyparser": "4.3.8",
-		"@types/koa-cors": "0.0.2",
-		"@types/koa-favicon": "2.0.21",
-		"@types/koa-logger": "3.1.2",
-		"@types/koa-mount": "4.0.1",
-		"@types/koa-send": "4.1.3",
-		"@types/koa-views": "7.0.0",
-		"@types/koa__cors": "3.3.0",
-		"@types/koa__multer": "2.0.4",
-		"@types/koa__router": "8.0.11",
 		"@types/mime-types": "2.1.1",
 		"@types/node": "18.11.9",
 		"@types/node-fetch": "3.0.3",
@@ -182,6 +163,7 @@
 		"@types/tmp": "0.2.3",
 		"@types/unzipper": "0.10.5",
 		"@types/uuid": "8.3.4",
+		"@types/vary": "1.1.0",
 		"@types/web-push": "3.3.2",
 		"@types/websocket": "1.0.5",
 		"@types/ws": "8.5.3",
diff --git a/packages/backend/src/@types/koa-json-body.d.ts b/packages/backend/src/@types/koa-json-body.d.ts
deleted file mode 100644
index 2971807d15..0000000000
--- a/packages/backend/src/@types/koa-json-body.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-declare module 'koa-json-body' {
-	import type { Middleware } from 'koa';
-
-	interface IKoaJsonBodyOptions {
-		strict: boolean;
-		limit: string;
-		fallback: boolean;
-	}
-
-	function koaJsonBody(opt?: IKoaJsonBodyOptions): Middleware;
-
-	namespace koaJsonBody {} // Hack
-
-	export = koaJsonBody;
-}
diff --git a/packages/backend/src/@types/koa-slow.d.ts b/packages/backend/src/@types/koa-slow.d.ts
deleted file mode 100644
index d048822efe..0000000000
--- a/packages/backend/src/@types/koa-slow.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-declare module 'koa-slow' {
-	import type { Middleware } from 'koa';
-
-	interface ISlowOptions {
-		url?: RegExp;
-		delay?: number;
-	}
-
-	function slow(options?: ISlowOptions): Middleware;
-
-	namespace slow {} // Hack
-
-	export = slow;
-}
diff --git a/packages/backend/src/boot/index.ts b/packages/backend/src/boot/index.ts
index fbf9e73e09..f4daf30690 100644
--- a/packages/backend/src/boot/index.ts
+++ b/packages/backend/src/boot/index.ts
@@ -52,6 +52,7 @@ if (!envOption.quiet) {
 process.on('uncaughtException', err => {
 	try {
 		logger.error(err);
+		console.trace(err);
 	} catch { }
 });
 
diff --git a/packages/backend/src/core/CaptchaService.ts b/packages/backend/src/core/CaptchaService.ts
index acfa7d5910..b2bc24ac2c 100644
--- a/packages/backend/src/core/CaptchaService.ts
+++ b/packages/backend/src/core/CaptchaService.ts
@@ -45,9 +45,13 @@ export class CaptchaService {
 		return await res.json() as CaptchaResponse;
 	}	
 	
-	public async verifyRecaptcha(secret: string, response: string): Promise<void> {
-		const result = await this.getCaptchaResponse('https://www.recaptcha.net/recaptcha/api/siteverify', secret, response).catch(e => {
-			throw `recaptcha-request-failed: ${e}`;
+	public async verifyRecaptcha(secret: string, response: string | null | undefined): Promise<void> {
+		if (response == null) {
+			throw 'recaptcha-failed: no response provided';
+		}
+
+		const result = await this.getCaptchaResponse('https://www.recaptcha.net/recaptcha/api/siteverify', secret, response).catch(err => {
+			throw `recaptcha-request-failed: ${err}`;
 		});
 
 		if (result.success !== true) {
@@ -56,9 +60,13 @@ export class CaptchaService {
 		}
 	}
 
-	public async verifyHcaptcha(secret: string, response: string): Promise<void> {
-		const result = await this.getCaptchaResponse('https://hcaptcha.com/siteverify', secret, response).catch(e => {
-			throw `hcaptcha-request-failed: ${e}`;
+	public async verifyHcaptcha(secret: string, response: string | null | undefined): Promise<void> {
+		if (response == null) {
+			throw 'hcaptcha-failed: no response provided';
+		}
+
+		const result = await this.getCaptchaResponse('https://hcaptcha.com/siteverify', secret, response).catch(err => {
+			throw `hcaptcha-request-failed: ${err}`;
 		});
 
 		if (result.success !== true) {
@@ -67,9 +75,13 @@ export class CaptchaService {
 		}
 	}
 
-	public async verifyTurnstile(secret: string, response: string): Promise<void> {
-		const result = await this.getCaptchaResponse('https://challenges.cloudflare.com/turnstile/v0/siteverify', secret, response).catch(e => {
-			throw `turnstile-request-failed: ${e}`;
+	public async verifyTurnstile(secret: string, response: string | null | undefined): Promise<void> {
+		if (response == null) {
+			throw 'turnstile-failed: no response provided';
+		}
+	
+		const result = await this.getCaptchaResponse('https://challenges.cloudflare.com/turnstile/v0/siteverify', secret, response).catch(err => {
+			throw `turnstile-request-failed: ${err}`;
 		});
 
 		if (result.success !== true) {
diff --git a/packages/backend/src/core/remote/activitypub/ApRendererService.ts b/packages/backend/src/core/remote/activitypub/ApRendererService.ts
index 38850fd127..38a92567c3 100644
--- a/packages/backend/src/core/remote/activitypub/ApRendererService.ts
+++ b/packages/backend/src/core/remote/activitypub/ApRendererService.ts
@@ -674,7 +674,7 @@ export class ApRendererService {
 	 * @param last URL of last page (optional)
 	 * @param orderedItems attached objects (optional)
 	 */
-	public renderOrderedCollection(id: string | null, totalItems: any, first?: string, last?: string, orderedItems?: Record<string, unknown>[]) {
+	public renderOrderedCollection(id: string | null, totalItems: any, first?: string, last?: string, orderedItems?: IObject[]) {
 		const page: any = {
 			id,
 			type: 'OrderedCollection',
diff --git a/packages/backend/src/env.ts b/packages/backend/src/env.ts
index 1b678edc44..d7c8304b47 100644
--- a/packages/backend/src/env.ts
+++ b/packages/backend/src/env.ts
@@ -6,7 +6,6 @@ const envOption = {
 	verbose: false,
 	withLogTime: false,
 	quiet: false,
-	slow: false,
 };
 
 for (const key of Object.keys(envOption) as (keyof typeof envOption)[]) {
diff --git a/packages/backend/src/misc/create-temp.ts b/packages/backend/src/misc/create-temp.ts
index fa88769de0..429977669e 100644
--- a/packages/backend/src/misc/create-temp.ts
+++ b/packages/backend/src/misc/create-temp.ts
@@ -18,7 +18,7 @@ export function createTempDir(): Promise<[string, () => void]> {
 			(e, path, cleanup) => {
 				if (e) return rej(e);
 				res([path, cleanup]);
-			}
+			},
 		);
 	});
 }
diff --git a/packages/backend/src/misc/fastify-reply-error.ts b/packages/backend/src/misc/fastify-reply-error.ts
new file mode 100644
index 0000000000..4e987175e2
--- /dev/null
+++ b/packages/backend/src/misc/fastify-reply-error.ts
@@ -0,0 +1,11 @@
+// https://www.fastify.io/docs/latest/Reference/Reply/#async-await-and-promises
+export class FastifyReplyError extends Error {
+	public message: string;
+	public statusCode: number;
+
+	constructor(statusCode: number, message: string) {
+		super(message);
+		this.message = message;
+		this.statusCode = statusCode;
+	}
+}
diff --git a/packages/backend/src/server/ActivityPubServerService.ts b/packages/backend/src/server/ActivityPubServerService.ts
index 2e7bd4dcb2..9689a623fd 100644
--- a/packages/backend/src/server/ActivityPubServerService.ts
+++ b/packages/backend/src/server/ActivityPubServerService.ts
@@ -1,8 +1,9 @@
 import { Inject, Injectable } from '@nestjs/common';
-import Router from '@koa/router';
-import json from 'koa-json-body';
+import { FastifyInstance, FastifyRequest, FastifyReply, FastifyPluginOptions } from 'fastify';
+import fastifyAccepts from '@fastify/accepts';
 import httpSignature from '@peertube/http-signature';
 import { Brackets, In, IsNull, LessThan, Not } from 'typeorm';
+import accepts from 'accepts';
 import { DI } from '@/di-symbols.js';
 import type { FollowingsRepository, NotesRepository, EmojisRepository, NoteReactionsRepository, UserProfilesRepository, UserNotePiningsRepository, UsersRepository } from '@/models/index.js';
 import * as url from '@/misc/prelude/url.js';
@@ -56,14 +57,15 @@ export class ActivityPubServerService {
 		private userKeypairStoreService: UserKeypairStoreService,
 		private queryService: QueryService,
 	) {
+		this.createServer = this.createServer.bind(this);
 	}
 
-	private setResponseType(ctx: Router.RouterContext) {
-		const accept = ctx.accepts(ACTIVITY_JSON, LD_JSON);
+	private setResponseType(request: FastifyRequest, reply: FastifyReply): void {
+		const accept = request.accepts().type([ACTIVITY_JSON, LD_JSON]);
 		if (accept === LD_JSON) {
-			ctx.response.type = LD_JSON;
+			reply.type(LD_JSON);
 		} else {
-			ctx.response.type = ACTIVITY_JSON;
+			reply.type(ACTIVITY_JSON);
 		}
 	}
 
@@ -80,31 +82,34 @@ export class ActivityPubServerService {
 		return this.apRendererService.renderCreate(await this.apRendererService.renderNote(note, false), note);
 	}
 
-	private inbox(ctx: Router.RouterContext) {
+	private inbox(request: FastifyRequest, reply: FastifyReply) {
 		let signature;
 
 		try {
-			signature = httpSignature.parseRequest(ctx.req, { 'headers': [] });
+			signature = httpSignature.parseRequest(request.raw, { 'headers': [] });
 		} catch (e) {
-			ctx.status = 401;
+			reply.code(401);
 			return;
 		}
 
-		this.queueService.inbox(ctx.request.body, signature);
+		this.queueService.inbox(request.body, signature);
 
-		ctx.status = 202;
+		reply.code(202);
 	}
 
-	private async followers(ctx: Router.RouterContext) {
-		const userId = ctx.params.user;
+	private async followers(
+		request: FastifyRequest<{ Params: { user: string; }; Querystring: { cursor?: string; page?: string; }; }>,
+		reply: FastifyReply,
+	) {
+		const userId = request.params.user;
 
-		const cursor = ctx.request.query.cursor;
+		const cursor = request.query.cursor;
 		if (cursor != null && typeof cursor !== 'string') {
-			ctx.status = 400;
+			reply.code(400);
 			return;
 		}
 
-		const page = ctx.request.query.page === 'true';
+		const page = request.query.page === 'true';
 
 		const user = await this.usersRepository.findOneBy({
 			id: userId,
@@ -112,7 +117,7 @@ export class ActivityPubServerService {
 		});
 
 		if (user == null) {
-			ctx.status = 404;
+			reply.code(404);
 			return;
 		}
 
@@ -120,12 +125,12 @@ export class ActivityPubServerService {
 		const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
 
 		if (profile.ffVisibility === 'private') {
-			ctx.status = 403;
-			ctx.set('Cache-Control', 'public, max-age=30');
+			reply.code(403);
+			reply.header('Cache-Control', 'public, max-age=30');
 			return;
 		} else if (profile.ffVisibility === 'followers') {
-			ctx.status = 403;
-			ctx.set('Cache-Control', 'public, max-age=30');
+			reply.code(403);
+			reply.header('Cache-Control', 'public, max-age=30');
 			return;
 		}
 		//#endregion
@@ -168,27 +173,30 @@ export class ActivityPubServerService {
 				})}` : undefined,
 			);
 
-			ctx.body = this.apRendererService.renderActivity(rendered);
-			this.setResponseType(ctx);
+			this.setResponseType(request, reply);
+			return (this.apRendererService.renderActivity(rendered));
 		} else {
 			// index page
 			const rendered = this.apRendererService.renderOrderedCollection(partOf, user.followersCount, `${partOf}?page=true`);
-			ctx.body = this.apRendererService.renderActivity(rendered);
-			ctx.set('Cache-Control', 'public, max-age=180');
-			this.setResponseType(ctx);
+			reply.header('Cache-Control', 'public, max-age=180');
+			this.setResponseType(request, reply);
+			return (this.apRendererService.renderActivity(rendered));
 		}
 	}
 
-	private async following(ctx: Router.RouterContext) {
-		const userId = ctx.params.user;
+	private async following(
+		request: FastifyRequest<{ Params: { user: string; }; Querystring: { cursor?: string; page?: string; }; }>,
+		reply: FastifyReply,
+	) {
+		const userId = request.params.user;
 
-		const cursor = ctx.request.query.cursor;
+		const cursor = request.query.cursor;
 		if (cursor != null && typeof cursor !== 'string') {
-			ctx.status = 400;
+			reply.code(400);
 			return;
 		}
 	
-		const page = ctx.request.query.page === 'true';
+		const page = request.query.page === 'true';
 	
 		const user = await this.usersRepository.findOneBy({
 			id: userId,
@@ -196,7 +204,7 @@ export class ActivityPubServerService {
 		});
 	
 		if (user == null) {
-			ctx.status = 404;
+			reply.code(404);
 			return;
 		}
 	
@@ -204,12 +212,12 @@ export class ActivityPubServerService {
 		const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
 	
 		if (profile.ffVisibility === 'private') {
-			ctx.status = 403;
-			ctx.set('Cache-Control', 'public, max-age=30');
+			reply.code(403);
+			reply.header('Cache-Control', 'public, max-age=30');
 			return;
 		} else if (profile.ffVisibility === 'followers') {
-			ctx.status = 403;
-			ctx.set('Cache-Control', 'public, max-age=30');
+			reply.code(403);
+			reply.header('Cache-Control', 'public, max-age=30');
 			return;
 		}
 		//#endregion
@@ -252,19 +260,19 @@ export class ActivityPubServerService {
 				})}` : undefined,
 			);
 	
-			ctx.body = this.apRendererService.renderActivity(rendered);
-			this.setResponseType(ctx);
+			this.setResponseType(request, reply);
+			return (this.apRendererService.renderActivity(rendered));
 		} else {
 			// index page
 			const rendered = this.apRendererService.renderOrderedCollection(partOf, user.followingCount, `${partOf}?page=true`);
-			ctx.body = this.apRendererService.renderActivity(rendered);
-			ctx.set('Cache-Control', 'public, max-age=180');
-			this.setResponseType(ctx);
+			reply.header('Cache-Control', 'public, max-age=180');
+			this.setResponseType(request, reply);
+			return (this.apRendererService.renderActivity(rendered));
 		}
 	}
 
-	private async featured(ctx: Router.RouterContext) {
-		const userId = ctx.params.user;
+	private async featured(request: FastifyRequest<{ Params: { user: string; }; }>, reply: FastifyReply) {
+		const userId = request.params.user;
 
 		const user = await this.usersRepository.findOneBy({
 			id: userId,
@@ -272,7 +280,7 @@ export class ActivityPubServerService {
 		});
 
 		if (user == null) {
-			ctx.status = 404;
+			reply.code(404);
 			return;
 		}
 
@@ -291,30 +299,36 @@ export class ActivityPubServerService {
 			renderedNotes.length, undefined, undefined, renderedNotes,
 		);
 
-		ctx.body = this.apRendererService.renderActivity(rendered);
-		ctx.set('Cache-Control', 'public, max-age=180');
-		this.setResponseType(ctx);
+		reply.header('Cache-Control', 'public, max-age=180');
+		this.setResponseType(request, reply);
+		return (this.apRendererService.renderActivity(rendered));
 	}
 
-	private async outbox(ctx: Router.RouterContext) {
-		const userId = ctx.params.user;
+	private async outbox(
+		request: FastifyRequest<{
+			Params: { user: string; };
+			Querystring: { since_id?: string; until_id?: string; page?: string; };
+		}>,
+		reply: FastifyReply,
+	) {
+		const userId = request.params.user;
 
-		const sinceId = ctx.request.query.since_id;
+		const sinceId = request.query.since_id;
 		if (sinceId != null && typeof sinceId !== 'string') {
-			ctx.status = 400;
+			reply.code(400);
 			return;
 		}
 	
-		const untilId = ctx.request.query.until_id;
+		const untilId = request.query.until_id;
 		if (untilId != null && typeof untilId !== 'string') {
-			ctx.status = 400;
+			reply.code(400);
 			return;
 		}
 	
-		const page = ctx.request.query.page === 'true';
+		const page = request.query.page === 'true';
 	
 		if (countIf(x => x != null, [sinceId, untilId]) > 1) {
-			ctx.status = 400;
+			reply.code(400);
 			return;
 		}
 	
@@ -324,7 +338,7 @@ export class ActivityPubServerService {
 		});
 	
 		if (user == null) {
-			ctx.status = 404;
+			reply.code(404);
 			return;
 		}
 	
@@ -362,110 +376,130 @@ export class ActivityPubServerService {
 				})}` : undefined,
 			);
 	
-			ctx.body = this.apRendererService.renderActivity(rendered);
-			this.setResponseType(ctx);
+			this.setResponseType(request, reply);
+			return (this.apRendererService.renderActivity(rendered));
 		} else {
 			// index page
 			const rendered = this.apRendererService.renderOrderedCollection(partOf, user.notesCount,
 				`${partOf}?page=true`,
 				`${partOf}?page=true&since_id=000000000000000000000000`,
 			);
-			ctx.body = this.apRendererService.renderActivity(rendered);
-			ctx.set('Cache-Control', 'public, max-age=180');
-			this.setResponseType(ctx);
+			reply.header('Cache-Control', 'public, max-age=180');
+			this.setResponseType(request, reply);
+			return (this.apRendererService.renderActivity(rendered));
 		}
 	}
 
-	private async userInfo(ctx: Router.RouterContext, user: User | null) {
+	private async userInfo(request: FastifyRequest, reply: FastifyReply, user: User | null) {
 		if (user == null) {
-			ctx.status = 404;
+			reply.code(404);
 			return;
 		}
 
-		ctx.body = this.apRendererService.renderActivity(await this.apRendererService.renderPerson(user as ILocalUser));
-		ctx.set('Cache-Control', 'public, max-age=180');
-		this.setResponseType(ctx);
+		reply.header('Cache-Control', 'public, max-age=180');
+		this.setResponseType(request, reply);
+		return (this.apRendererService.renderActivity(await this.apRendererService.renderPerson(user as ILocalUser)));
 	}
 
-	public createRouter() {
-		// Init router
-		const router = new Router();
+	public createServer(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
+		fastify.addConstraintStrategy({
+			name: 'apOrHtml',
+			storage() {
+				const store = {};
+				return {
+					get(key) {
+						return store[key] ?? null;
+					},
+					set(key, value) {
+						store[key] = value;
+					},
+				};
+			},
+			deriveConstraint(request, ctx) {
+				const accepted = accepts(request).type(['html', ACTIVITY_JSON, LD_JSON]);
+				const isAp = typeof accepted === 'string' && !accepted.match(/html/);
+				return isAp ? 'ap' : 'html';
+			},
+		});
 
-		//#region Routing
-		function isActivityPubReq(ctx: Router.RouterContext) {
-			ctx.response.vary('Accept');
-			const accepted = ctx.accepts('html', ACTIVITY_JSON, LD_JSON);
-			return typeof accepted === 'string' && !accepted.match(/html/);
-		}
+		fastify.register(fastifyAccepts);
 
+		//#region Routing
 		// inbox
-		router.post('/inbox', json(), ctx => this.inbox(ctx));
-		router.post('/users/:user/inbox', json(), ctx => this.inbox(ctx));
+		fastify.post('/inbox', async (request, reply) => await this.inbox(request, reply));
+		fastify.post('/users/:user/inbox', async (request, reply) => await this.inbox(request, reply));
 
 		// note
-		router.get('/notes/:note', async (ctx, next) => {
-			if (!isActivityPubReq(ctx)) return await next();
-
+		fastify.get<{ Params: { note: string; } }>('/notes/:note', { constraints: { apOrHtml: 'ap' } }, async (request, reply) => {
 			const note = await this.notesRepository.findOneBy({
-				id: ctx.params.note,
+				id: request.params.note,
 				visibility: In(['public' as const, 'home' as const]),
 				localOnly: false,
 			});
 
 			if (note == null) {
-				ctx.status = 404;
+				reply.code(404);
 				return;
 			}
 
 			// リモートだったらリダイレクト
 			if (note.userHost != null) {
 				if (note.uri == null || this.utilityService.isSelfHost(note.userHost)) {
-					ctx.status = 500;
+					reply.code(500);
 					return;
 				}
-				ctx.redirect(note.uri);
+				reply.redirect(note.uri);
 				return;
 			}
 
-			ctx.body = this.apRendererService.renderActivity(await this.apRendererService.renderNote(note, false));
-			ctx.set('Cache-Control', 'public, max-age=180');
-			this.setResponseType(ctx);
+			reply.header('Cache-Control', 'public, max-age=180');
+			this.setResponseType(request, reply);
+			return (this.apRendererService.renderActivity(await this.apRendererService.renderNote(note, false)));
 		});
 
 		// note activity
-		router.get('/notes/:note/activity', async ctx => {
+		fastify.get<{ Params: { note: string; } }>('/notes/:note/activity', async (request, reply) => {
 			const note = await this.notesRepository.findOneBy({
-				id: ctx.params.note,
+				id: request.params.note,
 				userHost: IsNull(),
 				visibility: In(['public' as const, 'home' as const]),
 				localOnly: false,
 			});
 
 			if (note == null) {
-				ctx.status = 404;
+				reply.code(404);
 				return;
 			}
 
-			ctx.body = this.apRendererService.renderActivity(await this.packActivity(note));
-			ctx.set('Cache-Control', 'public, max-age=180');
-			this.setResponseType(ctx);
+			reply.header('Cache-Control', 'public, max-age=180');
+			this.setResponseType(request, reply);
+			return (this.apRendererService.renderActivity(await this.packActivity(note)));
 		});
 
 		// outbox
-		router.get('/users/:user/outbox', (ctx) => this.outbox(ctx));
+		fastify.get<{
+			Params: { user: string; };
+			Querystring: { since_id?: string; until_id?: string; page?: string; };
+		}>('/users/:user/outbox', async (request, reply) => await this.outbox(request, reply));
 
 		// followers
-		router.get('/users/:user/followers', (ctx) => this.followers(ctx));
+		fastify.get<{
+			Params: { user: string; };
+			Querystring: { cursor?: string; page?: string; };
+		}>('/users/:user/followers', async (request, reply) => await this.followers(request, reply));
 
 		// following
-		router.get('/users/:user/following', (ctx) => this.following(ctx));
+		fastify.get<{
+			Params: { user: string; };
+			Querystring: { cursor?: string; page?: string; };
+		}>('/users/:user/following', async (request, reply) => await this.following(request, reply));
 
 		// featured
-		router.get('/users/:user/collections/featured', (ctx) => this.featured(ctx));
+		fastify.get<{ Params: { user: string; }; }>('/users/:user/collections/featured', async (request, reply) => await this.featured(request, reply));
 
 		// publickey
-		router.get('/users/:user/publickey', async ctx => {
-			const userId = ctx.params.user;
+		fastify.get<{ Params: { user: string; } }>('/users/:user/publickey', async (request, reply) => {
+			const userId = request.params.user;
 
 			const user = await this.usersRepository.findOneBy({
 				id: userId,
@@ -473,25 +507,23 @@ export class ActivityPubServerService {
 			});
 
 			if (user == null) {
-				ctx.status = 404;
+				reply.code(404);
 				return;
 			}
 
 			const keypair = await this.userKeypairStoreService.getUserKeypair(user.id);
 
 			if (this.userEntityService.isLocalUser(user)) {
-				ctx.body = this.apRendererService.renderActivity(this.apRendererService.renderKey(user, keypair));
-				ctx.set('Cache-Control', 'public, max-age=180');
-				this.setResponseType(ctx);
+				reply.header('Cache-Control', 'public, max-age=180');
+				this.setResponseType(request, reply);
+				return (this.apRendererService.renderActivity(this.apRendererService.renderKey(user, keypair)));
 			} else {
-				ctx.status = 400;
+				reply.code(400);
 			}
 		});
 
-		router.get('/users/:user', async (ctx, next) => {
-			if (!isActivityPubReq(ctx)) return await next();
-
-			const userId = ctx.params.user;
+		fastify.get<{ Params: { user: string; } }>('/users/:user', { constraints: { apOrHtml: 'ap' } }, async (request, reply) => {
+			const userId = request.params.user;
 
 			const user = await this.usersRepository.findOneBy({
 				id: userId,
@@ -499,86 +531,84 @@ export class ActivityPubServerService {
 				isSuspended: false,
 			});
 
-			await this.userInfo(ctx, user);
+			return await this.userInfo(request, reply, user);
 		});
 
-		router.get('/@:user', async (ctx, next) => {
-			if (!isActivityPubReq(ctx)) return await next();
-
+		fastify.get<{ Params: { user: string; } }>('/@:user', { constraints: { apOrHtml: 'ap' } }, async (request, reply) => {
 			const user = await this.usersRepository.findOneBy({
-				usernameLower: ctx.params.user.toLowerCase(),
+				usernameLower: request.params.user.toLowerCase(),
 				host: IsNull(),
 				isSuspended: false,
 			});
 
-			await this.userInfo(ctx, user);
+			return await this.userInfo(request, reply, user);
 		});
 		//#endregion
 
 		// emoji
-		router.get('/emojis/:emoji', async ctx => {
+		fastify.get<{ Params: { emoji: string; } }>('/emojis/:emoji', async (request, reply) => {
 			const emoji = await this.emojisRepository.findOneBy({
 				host: IsNull(),
-				name: ctx.params.emoji,
+				name: request.params.emoji,
 			});
 
 			if (emoji == null) {
-				ctx.status = 404;
+				reply.code(404);
 				return;
 			}
 
-			ctx.body = this.apRendererService.renderActivity(await this.apRendererService.renderEmoji(emoji));
-			ctx.set('Cache-Control', 'public, max-age=180');
-			this.setResponseType(ctx);
+			reply.header('Cache-Control', 'public, max-age=180');
+			this.setResponseType(request, reply);
+			return (this.apRendererService.renderActivity(await this.apRendererService.renderEmoji(emoji)));
 		});
 
 		// like
-		router.get('/likes/:like', async ctx => {
-			const reaction = await this.noteReactionsRepository.findOneBy({ id: ctx.params.like });
+		fastify.get<{ Params: { like: string; } }>('/likes/:like', async (request, reply) => {
+			const reaction = await this.noteReactionsRepository.findOneBy({ id: request.params.like });
 
 			if (reaction == null) {
-				ctx.status = 404;
+				reply.code(404);
 				return;
 			}
 
 			const note = await this.notesRepository.findOneBy({ id: reaction.noteId });
 
 			if (note == null) {
-				ctx.status = 404;
+				reply.code(404);
 				return;
 			}
 
-			ctx.body = this.apRendererService.renderActivity(await this.apRendererService.renderLike(reaction, note));
-			ctx.set('Cache-Control', 'public, max-age=180');
-			this.setResponseType(ctx);
+			reply.header('Cache-Control', 'public, max-age=180');
+			this.setResponseType(request, reply);
+			return (this.apRendererService.renderActivity(await this.apRendererService.renderLike(reaction, note)));
 		});
 
 		// follow
-		router.get('/follows/:follower/:followee', async ctx => {
+		fastify.get<{ Params: { follower: string; followee: string; } }>('/follows/:follower/:followee', async (request, reply) => {
 			// This may be used before the follow is completed, so we do not
 			// check if the following exists.
 
 			const [follower, followee] = await Promise.all([
 				this.usersRepository.findOneBy({
-					id: ctx.params.follower,
+					id: request.params.follower,
 					host: IsNull(),
 				}),
 				this.usersRepository.findOneBy({
-					id: ctx.params.followee,
+					id: request.params.followee,
 					host: Not(IsNull()),
 				}),
 			]);
 
 			if (follower == null || followee == null) {
-				ctx.status = 404;
+				reply.code(404);
 				return;
 			}
 
-			ctx.body = this.apRendererService.renderActivity(this.apRendererService.renderFollow(follower, followee));
-			ctx.set('Cache-Control', 'public, max-age=180');
-			this.setResponseType(ctx);
+			reply.header('Cache-Control', 'public, max-age=180');
+			this.setResponseType(request, reply);
+			return (this.apRendererService.renderActivity(this.apRendererService.renderFollow(follower, followee)));
 		});
 
-		return router;
+		done();
 	}
 }
diff --git a/packages/backend/src/server/FileServerService.ts b/packages/backend/src/server/FileServerService.ts
index dc073e34ac..088e780d69 100644
--- a/packages/backend/src/server/FileServerService.ts
+++ b/packages/backend/src/server/FileServerService.ts
@@ -2,10 +2,8 @@ import * as fs from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { dirname } from 'node:path';
 import { Inject, Injectable } from '@nestjs/common';
-import Koa from 'koa';
-import cors from '@koa/cors';
-import Router from '@koa/router';
-import send from 'koa-send';
+import { FastifyInstance, FastifyRequest, FastifyReply, FastifyPluginOptions } from 'fastify';
+import fastifyStatic from '@fastify/static';
 import rename from 'rename';
 import type { Config } from '@/config.js';
 import type { DriveFilesRepository } from '@/models/index.js';
@@ -46,45 +44,44 @@ export class FileServerService {
 		private loggerService: LoggerService,
 	) {
 		this.logger = this.loggerService.getLogger('server', 'gray', false);
+
+		this.createServer = this.createServer.bind(this);
 	}
 
-	public commonReadableHandlerGenerator(ctx: Koa.Context) {
-		return (e: Error): void => {
-			this.logger.error(e);
-			ctx.status = 500;
-			ctx.set('Cache-Control', 'max-age=300');
+	public commonReadableHandlerGenerator(reply: FastifyReply) {
+		return (err: Error): void => {
+			this.logger.error(err);
+			reply.code(500);
+			reply.header('Cache-Control', 'max-age=300');
 		};
 	}
 	
-	public createServer() {
-		const app = new Koa();
-		app.use(cors());
-		app.use(async (ctx, next) => {
-			ctx.set('Content-Security-Policy', 'default-src \'none\'; img-src \'self\'; media-src \'self\'; style-src \'unsafe-inline\'');
-			await next();
+	public createServer(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
+		fastify.addHook('onRequest', (request, reply, done) => {
+			reply.header('Content-Security-Policy', 'default-src \'none\'; img-src \'self\'; media-src \'self\'; style-src \'unsafe-inline\'');
+			done();
 		});
 
-		// Init router
-		const router = new Router();
+		fastify.register(fastifyStatic, {
+			root: _dirname,
+			serve: false,
+		});
 
-		router.get('/app-default.jpg', ctx => {
+		fastify.get('/app-default.jpg', (request, reply) => {
 			const file = fs.createReadStream(`${_dirname}/assets/dummy.png`);
-			ctx.body = file;
-			ctx.set('Content-Type', 'image/jpeg');
-			ctx.set('Cache-Control', 'max-age=31536000, immutable');
+			reply.header('Content-Type', 'image/jpeg');
+			reply.header('Cache-Control', 'max-age=31536000, immutable');
+			return reply.send(file);
 		});
 
-		router.get('/:key', ctx => this.sendDriveFile(ctx));
-		router.get('/:key/(.*)', ctx => this.sendDriveFile(ctx));
-
-		// Register router
-		app.use(router.routes());
+		fastify.get<{ Params: { key: string; } }>('/:key', async (request, reply) => await this.sendDriveFile(request, reply));
+		fastify.get<{ Params: { key: string; } }>('/:key/*', async (request, reply) => await this.sendDriveFile(request, reply));
 
-		return app;
+		done();
 	}
 
-	private async sendDriveFile(ctx: Koa.Context) {
-		const key = ctx.params.key;
+	private async sendDriveFile(request: FastifyRequest<{ Params: { key: string; } }>, reply: FastifyReply) {
+		const key = request.params.key;
 
 		// Fetch drive file
 		const file = await this.driveFilesRepository.createQueryBuilder('file')
@@ -94,10 +91,9 @@ export class FileServerService {
 			.getOne();
 
 		if (file == null) {
-			ctx.status = 404;
-			ctx.set('Cache-Control', 'max-age=86400');
-			await send(ctx as any, '/dummy.png', { root: assets });
-			return;
+			reply.code(404);
+			reply.header('Cache-Control', 'max-age=86400');
+			return reply.sendFile('/dummy.png', assets);
 		}
 
 		const isThumbnail = file.thumbnailAccessKey === key;
@@ -135,18 +131,18 @@ export class FileServerService {
 					};
 
 					const image = await convertFile();
-					ctx.body = image.data;
-					ctx.set('Content-Type', FILE_TYPE_BROWSERSAFE.includes(image.type) ? image.type : 'application/octet-stream');
-					ctx.set('Cache-Control', 'max-age=31536000, immutable');
+					reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(image.type) ? image.type : 'application/octet-stream');
+					reply.header('Cache-Control', 'max-age=31536000, immutable');
+					return image.data;
 				} catch (err) {
 					this.logger.error(`${err}`);
 
 					if (err instanceof StatusError && err.isClientError) {
-						ctx.status = err.statusCode;
-						ctx.set('Cache-Control', 'max-age=86400');
+						reply.code(err.statusCode);
+						reply.header('Cache-Control', 'max-age=86400');
 					} else {
-						ctx.status = 500;
-						ctx.set('Cache-Control', 'max-age=300');
+						reply.code(500);
+						reply.header('Cache-Control', 'max-age=300');
 					}
 				} finally {
 					cleanup();
@@ -154,8 +150,8 @@ export class FileServerService {
 				return;
 			}
 
-			ctx.status = 204;
-			ctx.set('Cache-Control', 'max-age=86400');
+			reply.code(204);
+			reply.header('Cache-Control', 'max-age=86400');
 			return;
 		}
 
@@ -166,18 +162,17 @@ export class FileServerService {
 				extname: ext ? `.${ext}` : undefined,
 			}).toString();
 
-			ctx.body = this.internalStorageService.read(key);
-			ctx.set('Content-Type', FILE_TYPE_BROWSERSAFE.includes(mime) ? mime : 'application/octet-stream');
-			ctx.set('Cache-Control', 'max-age=31536000, immutable');
-			ctx.set('Content-Disposition', contentDisposition('inline', filename));
+			reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(mime) ? mime : 'application/octet-stream');
+			reply.header('Cache-Control', 'max-age=31536000, immutable');
+			reply.header('Content-Disposition', contentDisposition('inline', filename));
+			return this.internalStorageService.read(key);
 		} else {
 			const readable = this.internalStorageService.read(file.accessKey!);
-			readable.on('error', this.commonReadableHandlerGenerator(ctx));
-			ctx.body = readable;
-			ctx.set('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.type) ? file.type : 'application/octet-stream');
-			ctx.set('Cache-Control', 'max-age=31536000, immutable');
-			ctx.set('Content-Disposition', contentDisposition('inline', file.name));
+			readable.on('error', this.commonReadableHandlerGenerator(reply));
+			reply.header('Content-Type', FILE_TYPE_BROWSERSAFE.includes(file.type) ? file.type : 'application/octet-stream');
+			reply.header('Cache-Control', 'max-age=31536000, immutable');
+			reply.header('Content-Disposition', contentDisposition('inline', file.name));
+			return readable;
 		}
 	}
 }
-
diff --git a/packages/backend/src/server/MediaProxyServerService.ts b/packages/backend/src/server/MediaProxyServerService.ts
index 31841d39df..4d7bbdf599 100644
--- a/packages/backend/src/server/MediaProxyServerService.ts
+++ b/packages/backend/src/server/MediaProxyServerService.ts
@@ -1,8 +1,6 @@
 import * as fs from 'node:fs';
 import { Inject, Injectable } from '@nestjs/common';
-import Koa from 'koa';
-import cors from '@koa/cors';
-import Router from '@koa/router';
+import { FastifyInstance, FastifyPluginOptions, FastifyReply, FastifyRequest } from 'fastify';
 import sharp from 'sharp';
 import { DI } from '@/di-symbols.js';
 import type { Config } from '@/config.js';
@@ -31,32 +29,29 @@ export class MediaProxyServerService {
 		private loggerService: LoggerService,
 	) {
 		this.logger = this.loggerService.getLogger('server', 'gray', false);
+
+		this.createServer = this.createServer.bind(this);
 	}
 
-	public createServer() {
-		const app = new Koa();
-		app.use(cors());
-		app.use(async (ctx, next) => {
-			ctx.set('Content-Security-Policy', 'default-src \'none\'; img-src \'self\'; media-src \'self\'; style-src \'unsafe-inline\'');
-			await next();
+	public createServer(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
+		fastify.addHook('onRequest', (request, reply, done) => {
+			reply.header('Content-Security-Policy', 'default-src \'none\'; img-src \'self\'; media-src \'self\'; style-src \'unsafe-inline\'');
+			done();
 		});
 
-		// Init router
-		const router = new Router();
-
-		router.get('/:url*', ctx => this.handler(ctx));
-
-		// Register router
-		app.use(router.routes());
+		fastify.get<{
+			Params: { url: string; };
+			Querystring: { url?: string; };
+		}>('/:url*', async (request, reply) => await this.handler(request, reply));
 
-		return app;
+		done();
 	}
 
-	private async handler(ctx: Koa.Context) {
-		const url = 'url' in ctx.query ? ctx.query.url : 'https://' + ctx.params.url;
+	private async handler(request: FastifyRequest<{ Params: { url: string; }; Querystring: { url?: string; }; }>, reply: FastifyReply) {
+		const url = 'url' in request.query ? request.query.url : 'https://' + request.params.url;
 	
 		if (typeof url !== 'string') {
-			ctx.status = 400;
+			reply.code(400);
 			return;
 		}
 	
@@ -71,11 +66,11 @@ export class MediaProxyServerService {
 	
 			let image: IImage;
 	
-			if ('static' in ctx.query && isConvertibleImage) {
+			if ('static' in request.query && isConvertibleImage) {
 				image = await this.imageProcessingService.convertToWebp(path, 498, 280);
-			} else if ('preview' in ctx.query && isConvertibleImage) {
+			} else if ('preview' in request.query && isConvertibleImage) {
 				image = await this.imageProcessingService.convertToWebp(path, 200, 200);
-			} else if ('badge' in ctx.query) {
+			} else if ('badge' in request.query) {
 				if (!isConvertibleImage) {
 					// 画像でないなら404でお茶を濁す
 					throw new StatusError('Unexpected mime', 404);
@@ -122,16 +117,16 @@ export class MediaProxyServerService {
 				};
 			}
 	
-			ctx.set('Content-Type', image.type);
-			ctx.set('Cache-Control', 'max-age=31536000, immutable');
-			ctx.body = image.data;
+			reply.header('Content-Type', image.type);
+			reply.header('Cache-Control', 'max-age=31536000, immutable');
+			return image.data;
 		} catch (err) {
 			this.logger.error(`${err}`);
 	
 			if (err instanceof StatusError && (err.statusCode === 302 || err.isClientError)) {
-				ctx.status = err.statusCode;
+				reply.code(err.statusCode);
 			} else {
-				ctx.status = 500;
+				reply.code(500);
 			}
 		} finally {
 			cleanup();
diff --git a/packages/backend/src/server/NodeinfoServerService.ts b/packages/backend/src/server/NodeinfoServerService.ts
index ef4ec74a35..b85925f53e 100644
--- a/packages/backend/src/server/NodeinfoServerService.ts
+++ b/packages/backend/src/server/NodeinfoServerService.ts
@@ -1,5 +1,5 @@
 import { Inject, Injectable } from '@nestjs/common';
-import Router from '@koa/router';
+import { FastifyInstance, FastifyPluginOptions, FastifyReply, FastifyRequest } from 'fastify';
 import { IsNull, MoreThan } from 'typeorm';
 import { DI } from '@/di-symbols.js';
 import type { NotesRepository, UsersRepository } from '@/models/index.js';
@@ -27,6 +27,7 @@ export class NodeinfoServerService {
 		private userEntityService: UserEntityService,
 		private metaService: MetaService,
 	) {
+		this.createServer = this.createServer.bind(this);
 	}
 
 	public getLinks() {
@@ -39,9 +40,7 @@ export class NodeinfoServerService {
 			}];
 	}
 
-	public createRouter() {
-		const router = new Router();
-
+	public createServer(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
 		const nodeinfo2 = async () => {
 			const now = Date.now();
 			const [
@@ -108,22 +107,22 @@ export class NodeinfoServerService {
 
 		const cache = new Cache<Awaited<ReturnType<typeof nodeinfo2>>>(1000 * 60 * 10);
 
-		router.get(nodeinfo2_1path, async ctx => {
+		fastify.get(nodeinfo2_1path, async (request, reply) => {
 			const base = await cache.fetch(null, () => nodeinfo2());
 
-			ctx.body = { version: '2.1', ...base };
-			ctx.set('Cache-Control', 'public, max-age=600');
+			reply.header('Cache-Control', 'public, max-age=600');
+			return { version: '2.1', ...base };
 		});
 
-		router.get(nodeinfo2_0path, async ctx => {
+		fastify.get(nodeinfo2_0path, async (request, reply) => {
 			const base = await cache.fetch(null, () => nodeinfo2());
 
 			delete (base as any).software.repository;
 
-			ctx.body = { version: '2.0', ...base };
-			ctx.set('Cache-Control', 'public, max-age=600');
+			reply.header('Cache-Control', 'public, max-age=600');
+			return { version: '2.0', ...base };
 		});
 
-		return router;
+		done();
 	}
 }
diff --git a/packages/backend/src/server/ServerService.ts b/packages/backend/src/server/ServerService.ts
index d42972614f..96159cfc53 100644
--- a/packages/backend/src/server/ServerService.ts
+++ b/packages/backend/src/server/ServerService.ts
@@ -2,11 +2,7 @@ import cluster from 'node:cluster';
 import * as fs from 'node:fs';
 import * as http from 'node:http';
 import { Inject, Injectable } from '@nestjs/common';
-import Koa from 'koa';
-import Router from '@koa/router';
-import mount from 'koa-mount';
-import koaLogger from 'koa-logger';
-import * as slow from 'koa-slow';
+import Fastify from 'fastify';
 import { IsNull } from 'typeorm';
 import { GlobalEventService } from '@/core/GlobalEventService.js';
 import type { Config } from '@/config.js';
@@ -58,47 +54,29 @@ export class ServerService {
 	}
 
 	public launch() {
-		// Init app
-		const koa = new Koa();
-		koa.proxy = true;
-
-		if (!['production', 'test'].includes(process.env.NODE_ENV ?? '')) {
-		// Logger
-			koa.use(koaLogger(str => {
-				this.logger.info(str);
-			}));
-
-			// Delay
-			if (envOption.slow) {
-				koa.use(slow({
-					delay: 3000,
-				}));
-			}
-		}
+		const fastify = Fastify({
+			trustProxy: true,
+			logger: !['production', 'test'].includes(process.env.NODE_ENV ?? ''),
+		});
 
 		// HSTS
 		// 6months (15552000sec)
 		if (this.config.url.startsWith('https') && !this.config.disableHsts) {
-			koa.use(async (ctx, next) => {
-				ctx.set('strict-transport-security', 'max-age=15552000; preload');
-				await next();
+			fastify.addHook('onRequest', (request, reply, done) => {
+				reply.header('strict-transport-security', 'max-age=15552000; preload');
+				done();
 			});
 		}
 
-		koa.use(mount('/api', this.apiServerService.createApiServer(koa)));
-		koa.use(mount('/files', this.fileServerService.createServer()));
-		koa.use(mount('/proxy', this.mediaProxyServerService.createServer()));
-
-		// Init router
-		const router = new Router();
+		fastify.register(this.apiServerService.createServer, { prefix: '/api' });
+		fastify.register(this.fileServerService.createServer, { prefix: '/files' });
+		fastify.register(this.mediaProxyServerService.createServer, { prefix: '/proxy' });
+		fastify.register(this.activityPubServerService.createServer);
+		fastify.register(this.nodeinfoServerService.createServer);
+		fastify.register(this.wellKnownServerService.createServer);
 
-		// Routing
-		router.use(this.activityPubServerService.createRouter().routes());
-		router.use(this.nodeinfoServerService.createRouter().routes());
-		router.use(this.wellKnownServerService.createRouter().routes());
-
-		router.get('/avatar/@:acct', async ctx => {
-			const { username, host } = Acct.parse(ctx.params.acct);
+		fastify.get<{ Params: { acct: string } }>('/avatar/@:acct', async (request, reply) => {
+			const { username, host } = Acct.parse(request.params.acct);
 			const user = await this.usersRepository.findOne({
 				where: {
 					usernameLower: username.toLowerCase(),
@@ -109,28 +87,25 @@ export class ServerService {
 			});
 
 			if (user) {
-				ctx.redirect(this.userEntityService.getAvatarUrlSync(user));
+				reply.redirect(this.userEntityService.getAvatarUrlSync(user));
 			} else {
-				ctx.redirect('/static-assets/user-unknown.png');
+				reply.redirect('/static-assets/user-unknown.png');
 			}
 		});
 
-		router.get('/identicon/:x', async ctx => {
+		fastify.get<{ Params: { x: string } }>('/identicon/:x', async (request, reply) => {
 			const [temp, cleanup] = await createTemp();
-			await genIdenticon(ctx.params.x, fs.createWriteStream(temp));
-			ctx.set('Content-Type', 'image/png');
-			ctx.body = fs.createReadStream(temp).on('close', () => cleanup());
+			await genIdenticon(request.params.x, fs.createWriteStream(temp));
+			reply.header('Content-Type', 'image/png');
+			return fs.createReadStream(temp).on('close', () => cleanup());
 		});
 
-		router.get('/verify-email/:code', async ctx => {
+		fastify.get<{ Params: { code: string } }>('/verify-email/:code', async (request, reply) => {
 			const profile = await this.userProfilesRepository.findOneBy({
-				emailVerifyCode: ctx.params.code,
+				emailVerifyCode: request.params.code,
 			});
 
 			if (profile != null) {
-				ctx.body = 'Verify succeeded!';
-				ctx.status = 200;
-
 				await this.userProfilesRepository.update({ userId: profile.userId }, {
 					emailVerified: true,
 					emailVerifyCode: null,
@@ -140,21 +115,19 @@ export class ServerService {
 					detail: true,
 					includeSecrets: true,
 				}));
+
+				reply.code(200);
+				return 'Verify succeeded!';
 			} else {
-				ctx.status = 404;
+				reply.code(404);
 			}
 		});
 
-		// Register router
-		koa.use(router.routes());
-
-		koa.use(mount(this.clientServerService.createApp()));
-
-		const server = http.createServer(koa.callback());
+		fastify.register(this.clientServerService.createServer);
 
-		this.streamingApiServerService.attachStreamingApi(server);
+		this.streamingApiServerService.attachStreamingApi(fastify.server);
 
-		server.on('error', err => {
+		fastify.server.on('error', err => {
 			switch ((err as any).code) {
 				case 'EACCES':
 					this.logger.error(`You do not have permission to listen on port ${this.config.port}.`);
@@ -168,13 +141,13 @@ export class ServerService {
 			}
 
 			if (cluster.isWorker) {
-			process.send!('listenFailed');
+				process.send!('listenFailed');
 			} else {
-			// disableClustering
+				// disableClustering
 				process.exit(1);
 			}
 		});
 
-		server.listen(this.config.port);
+		fastify.listen({ port: this.config.port });
 	}
 }
diff --git a/packages/backend/src/server/WellKnownServerService.ts b/packages/backend/src/server/WellKnownServerService.ts
index f2eee88e09..412c608313 100644
--- a/packages/backend/src/server/WellKnownServerService.ts
+++ b/packages/backend/src/server/WellKnownServerService.ts
@@ -1,6 +1,7 @@
 import { Inject, Injectable } from '@nestjs/common';
-import Router from '@koa/router';
+import { FastifyInstance, FastifyPluginOptions, FastifyReply, FastifyRequest } from 'fastify';
 import { IsNull, MoreThan } from 'typeorm';
+import vary from 'vary';
 import { DI } from '@/di-symbols.js';
 import type { UsersRepository } from '@/models/index.js';
 import type { Config } from '@/config.js';
@@ -21,11 +22,10 @@ export class WellKnownServerService {
 
 		private nodeinfoServerService: NodeinfoServerService,
 	) {
+		this.createServer = this.createServer.bind(this);
 	}
 
-	public createRouter() {
-		const router = new Router();
-
+	public createServer(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
 		const XRD = (...x: { element: string, value?: string, attributes?: Record<string, string> }[]) =>
 			`<?xml version="1.0" encoding="UTF-8"?><XRD xmlns="http://docs.oasis-open.org/ns/xri/xrd-1.0">${x.map(({ element, value, attributes }) =>
 				`<${
@@ -34,37 +34,35 @@ export class WellKnownServerService {
 					typeof value === 'string' ? `>${escapeValue(value)}</${element}` : '/'
 				}>`).reduce((a, c) => a + c, '')}</XRD>`;
 
-		const allPath = '/.well-known/(.*)';
+		const allPath = '/.well-known/*';
 		const webFingerPath = '/.well-known/webfinger';
 		const jrd = 'application/jrd+json';
 		const xrd = 'application/xrd+xml';
 
-		router.use(allPath, async (ctx, next) => {
-			ctx.set({
-				'Access-Control-Allow-Headers': 'Accept',
-				'Access-Control-Allow-Methods': 'GET, OPTIONS',
-				'Access-Control-Allow-Origin': '*',
-				'Access-Control-Expose-Headers': 'Vary',
-			});
-			await next();
+		fastify.addHook('onRequest', (request, reply, done) => {
+			reply.header('Access-Control-Allow-Headers', 'Accept');
+			reply.header('Access-Control-Allow-Methods', 'GET, OPTIONS');
+			reply.header('Access-Control-Allow-Origin', '*');
+			reply.header('Access-Control-Expose-Headers', 'Vary');
+			done();
 		});
 
-		router.options(allPath, async ctx => {
-			ctx.status = 204;
+		fastify.options(allPath, async (request, reply) => {
+			reply.code(204);
 		});
 
-		router.get('/.well-known/host-meta', async ctx => {
-			ctx.set('Content-Type', xrd);
-			ctx.body = XRD({ element: 'Link', attributes: {
+		fastify.get('/.well-known/host-meta', async (request, reply) => {
+			reply.header('Content-Type', xrd);
+			return XRD({ element: 'Link', attributes: {
 				rel: 'lrdd',
 				type: xrd,
 				template: `${this.config.url}${webFingerPath}?resource={uri}`,
 			} });
 		});
 
-		router.get('/.well-known/host-meta.json', async ctx => {
-			ctx.set('Content-Type', jrd);
-			ctx.body = {
+		fastify.get('/.well-known/host-meta.json', async (request, reply) => {
+			reply.header('Content-Type', jrd);
+			return {
 				links: [{
 					rel: 'lrdd',
 					type: jrd,
@@ -73,16 +71,16 @@ export class WellKnownServerService {
 			};
 		});
 
-		router.get('/.well-known/nodeinfo', async ctx => {
-			ctx.body = { links: this.nodeinfoServerService.getLinks() };
+		fastify.get('/.well-known/nodeinfo', async (request, reply) => {
+			return { links: this.nodeinfoServerService.getLinks() };
 		});
 
 		/* TODO
-router.get('/.well-known/change-password', async ctx => {
+fastify.get('/.well-known/change-password', async (request, reply) => {
 });
 */
 
-		router.get(webFingerPath, async ctx => {
+		fastify.get<{ Querystring: { resource: string } }>(webFingerPath, async (request, reply) => {
 			const fromId = (id: User['id']): FindOptionsWhere<User> => ({
 				id,
 				host: IsNull(),
@@ -104,22 +102,22 @@ router.get('/.well-known/change-password', async ctx => {
 					isSuspended: false,
 				} : 422;
 
-			if (typeof ctx.query.resource !== 'string') {
-				ctx.status = 400;
+			if (typeof request.query.resource !== 'string') {
+				reply.code(400);
 				return;
 			}
 
-			const query = generateQuery(ctx.query.resource.toLowerCase());
+			const query = generateQuery(request.query.resource.toLowerCase());
 
 			if (typeof query === 'number') {
-				ctx.status = query;
+				reply.code(query);
 				return;
 			}
 
 			const user = await this.usersRepository.findOneBy(query);
 
 			if (user == null) {
-				ctx.status = 404;
+				reply.code(404);
 				return;
 			}
 
@@ -139,30 +137,25 @@ router.get('/.well-known/change-password', async ctx => {
 				template: `${this.config.url}/authorize-follow?acct={uri}`,
 			};
 
-			if (ctx.accepts(jrd, xrd) === xrd) {
-				ctx.body = XRD(
+			vary(reply.raw, 'Accept');
+			reply.header('Cache-Control', 'public, max-age=180');
+
+			if (request.accepts().type([jrd, xrd]) === xrd) {
+				reply.type(xrd);
+				return XRD(
 					{ element: 'Subject', value: subject },
 					{ element: 'Link', attributes: self },
 					{ element: 'Link', attributes: profilePage },
 					{ element: 'Link', attributes: subscribe });
-				ctx.type = xrd;
 			} else {
-				ctx.body = {
+				reply.type(jrd);
+				return {
 					subject,
 					links: [self, profilePage, subscribe],
 				};
-				ctx.type = jrd;
 			}
-
-			ctx.vary('Accept');
-			ctx.set('Cache-Control', 'public, max-age=180');
-		});
-
-		// Return 404 for other .well-known
-		router.all(allPath, async ctx => {
-			ctx.status = 404;
 		});
 
-		return router;
+		done();
 	}
 }
diff --git a/packages/backend/src/server/api/ApiCallService.ts b/packages/backend/src/server/api/ApiCallService.ts
index c3ce12e0c3..2e72cdf9f8 100644
--- a/packages/backend/src/server/api/ApiCallService.ts
+++ b/packages/backend/src/server/api/ApiCallService.ts
@@ -1,19 +1,25 @@
 import { performance } from 'perf_hooks';
+import { pipeline } from 'node:stream';
+import * as fs from 'node:fs';
+import { promisify } from 'node:util';
 import { Inject, Injectable } from '@nestjs/common';
+import { FastifyRequest, FastifyReply } from 'fastify';
 import { DI } from '@/di-symbols.js';
 import { getIpHash } from '@/misc/get-ip-hash.js';
-import type { CacheableLocalUser, User } from '@/models/entities/User.js';
+import type { CacheableLocalUser, ILocalUser, User } from '@/models/entities/User.js';
 import type { AccessToken } from '@/models/entities/AccessToken.js';
 import type Logger from '@/logger.js';
 import type { UserIpsRepository } from '@/models/index.js';
 import { MetaService } from '@/core/MetaService.js';
+import { createTemp } from '@/misc/create-temp.js';
 import { ApiError } from './error.js';
 import { RateLimiterService } from './RateLimiterService.js';
 import { ApiLoggerService } from './ApiLoggerService.js';
 import { AuthenticateService, AuthenticationError } from './AuthenticateService.js';
 import type { OnApplicationShutdown } from '@nestjs/common';
 import type { IEndpointMeta, IEndpoint } from './endpoints.js';
-import type Koa from 'koa';
+
+const pump = promisify(pipeline);
 
 const accessDenied = {
 	message: 'Access denied.',
@@ -44,92 +50,149 @@ export class ApiCallService implements OnApplicationShutdown {
 		}, 1000 * 60 * 60);
 	}
 
-	public handleRequest(endpoint: IEndpoint, exec: any, ctx: Koa.Context) {
-		return new Promise<void>((res) => {
-			const body = ctx.is('multipart/form-data')
-				? (ctx.request as any).body
-				: ctx.method === 'GET'
-					? ctx.query
-					: ctx.request.body;
-		
-			const reply = (x?: any, y?: ApiError) => {
-				if (x == null) {
-					ctx.status = 204;
-				} else if (typeof x === 'number' && y) {
-					ctx.status = x;
-					ctx.body = {
-						error: {
-							message: y!.message,
-							code: y!.code,
-							id: y!.id,
-							kind: y!.kind,
-							...(y!.info ? { info: y!.info } : {}),
-						},
-					};
-				} else {
-					// 文字列を返す場合は、JSON.stringify通さないとJSONと認識されない
-					ctx.body = typeof x === 'string' ? JSON.stringify(x) : x;
-				}
-				res();
-			};
-		
-			// Authentication
-			this.authenticateService.authenticate(body['i']).then(([user, app]) => {
-				// API invoking
-				this.call(endpoint, exec, 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);
-				});
-		
-				// Log IP
-				if (user) {
-					this.metaService.fetch().then(meta => {
-						if (!meta.enableIpLogging) return;
-						const ip = ctx.ip;
-						const ips = this.userIpHistories.get(user.id);
-						if (ips == null || !ips.has(ip)) {
-							if (ips == null) {
-								this.userIpHistories.set(user.id, new Set([ip]));
-							} else {
-								ips.add(ip);
-							}
-		
-							try {
-								this.userIpsRepository.createQueryBuilder().insert().values({
-									createdAt: new Date(),
-									userId: user.id,
-									ip: ip,
-								}).orIgnore(true).execute();
-							} catch {
-							}
-						}
-					});
-				}
-			}).catch(e => {
-				if (e instanceof AuthenticationError) {
-					reply(403, new ApiError({
-						message: 'Authentication failed. Please ensure your token is correct.',
-						code: 'AUTHENTICATION_FAILED',
-						id: 'b0a7f5f8-dc2f-4171-b91f-de88ad238e14',
-					}));
-				} else {
-					reply(500, new ApiError());
+	public handleRequest(
+		endpoint: IEndpoint & { exec: any },
+		request: FastifyRequest<{ Body: Record<string, unknown>, Querystring: Record<string, unknown> }>,
+		reply: FastifyReply,
+	) {
+		const body = request.method === 'GET'
+			? request.query
+			: request.body;
+
+		const token = body['i'];
+		if (token != null && typeof token !== 'string') {
+			reply.code(400);
+			return;
+		}
+		this.authenticateService.authenticate(token).then(([user, app]) => {
+			this.call(endpoint, user, app, body, null, request).then((res) => {
+				if (request.method === 'GET' && endpoint.meta.cacheSec && !body['i'] && !user) {
+					reply.header('Cache-Control', `public, max-age=${endpoint.meta.cacheSec}`);
 				}
+				this.send(reply, res);
+			}).catch((err: ApiError) => {
+				this.send(reply, err.httpStatusCode ? err.httpStatusCode : err.kind === 'client' ? 400 : 500, err);
 			});
+
+			if (user) {
+				this.logIp(request, user);
+			}
+		}).catch(err => {
+			if (err instanceof AuthenticationError) {
+				this.send(reply, 403, new ApiError({
+					message: 'Authentication failed. Please ensure your token is correct.',
+					code: 'AUTHENTICATION_FAILED',
+					id: 'b0a7f5f8-dc2f-4171-b91f-de88ad238e14',
+				}));
+			} else {
+				this.send(reply, 500, new ApiError());
+			}
 		});
 	}
 
+	public async handleMultipartRequest(
+		endpoint: IEndpoint & { exec: any },
+		request: FastifyRequest<{ Body: Record<string, unknown>, Querystring: Record<string, unknown> }>,
+		reply: FastifyReply,
+	) {
+		const multipartData = await request.file();
+		if (multipartData == null) {
+			reply.code(400);
+			return;
+		}
+
+		const [path] = await createTemp();
+		await pump(multipartData.file, fs.createWriteStream(path));
+
+		const fields = {} as Record<string, string | undefined>;
+		for (const [k, v] of Object.entries(multipartData.fields)) {
+			fields[k] = v.value;
+		}
+	
+		const token = fields['i'];
+		if (token != null && typeof token !== 'string') {
+			reply.code(400);
+			return;
+		}
+		this.authenticateService.authenticate(token).then(([user, app]) => {
+			this.call(endpoint, user, app, fields, {
+				name: multipartData.filename,
+				path: path,
+			}, request).then((res) => {
+				this.send(reply, res);
+			}).catch((err: ApiError) => {
+				this.send(reply, err.httpStatusCode ? err.httpStatusCode : err.kind === 'client' ? 400 : 500, err);
+			});
+
+			if (user) {
+				this.logIp(request, user);
+			}
+		}).catch(err => {
+			if (err instanceof AuthenticationError) {
+				this.send(reply, 403, new ApiError({
+					message: 'Authentication failed. Please ensure your token is correct.',
+					code: 'AUTHENTICATION_FAILED',
+					id: 'b0a7f5f8-dc2f-4171-b91f-de88ad238e14',
+				}));
+			} else {
+				this.send(reply, 500, new ApiError());
+			}
+		});
+	}
+
+	private send(reply: FastifyReply, x?: any, y?: ApiError) {
+		if (x == null) {
+			reply.code(204);
+		} else if (typeof x === 'number' && y) {
+			reply.code(x);
+			reply.send({
+				error: {
+					message: y!.message,
+					code: y!.code,
+					id: y!.id,
+					kind: y!.kind,
+					...(y!.info ? { info: y!.info } : {}),
+				},
+			});
+		} else {
+			// 文字列を返す場合は、JSON.stringify通さないとJSONと認識されない
+			reply.send(typeof x === 'string' ? JSON.stringify(x) : x);
+		}
+	}
+
+	private async logIp(request: FastifyRequest, user: ILocalUser) {
+		const meta = await this.metaService.fetch();
+		if (!meta.enableIpLogging) return;
+		const ip = request.ip;
+		const ips = this.userIpHistories.get(user.id);
+		if (ips == null || !ips.has(ip)) {
+			if (ips == null) {
+				this.userIpHistories.set(user.id, new Set([ip]));
+			} else {
+				ips.add(ip);
+			}
+
+			try {
+				this.userIpsRepository.createQueryBuilder().insert().values({
+					createdAt: new Date(),
+					userId: user.id,
+					ip: ip,
+				}).orIgnore(true).execute();
+			} catch {
+			}
+		}
+	}
+
 	private async call(
-		ep: IEndpoint,
-		exec: any,
+		ep: IEndpoint & { exec: any },
 		user: CacheableLocalUser | null | undefined,
 		token: AccessToken | null | undefined,
 		data: any,
-		ctx?: Koa.Context,
+		file: {
+			name: string;
+			path: string;
+		} | null,
+		request: FastifyRequest<{ Body: Record<string, unknown>, Querystring: Record<string, unknown> }>,
 	) {
 		const isSecure = user != null && token == null;
 		const isModerator = user != null && (user.isModerator || user.isAdmin);
@@ -144,7 +207,7 @@ export class ApiCallService implements OnApplicationShutdown {
 			if (user) {
 				limitActor = user.id;
 			} else {
-				limitActor = getIpHash(ctx!.ip);
+				limitActor = getIpHash(request.ip);
 			}
 
 			const limit = Object.assign({}, ep.meta.limit);
@@ -154,7 +217,7 @@ export class ApiCallService implements OnApplicationShutdown {
 			}
 
 			// Rate limit
-			await this.rateLimiterService.limit(limit as IEndpointMeta['limit'] & { key: NonNullable<string> }, limitActor).catch(e => {
+			await this.rateLimiterService.limit(limit as IEndpointMeta['limit'] & { key: NonNullable<string> }, limitActor).catch(err => {
 				throw new ApiError({
 					message: 'Rate limit exceeded. Please try again later.',
 					code: 'RATE_LIMIT_EXCEEDED',
@@ -199,7 +262,7 @@ export class ApiCallService implements OnApplicationShutdown {
 		}
 
 		// Cast non JSON input
-		if ((ep.meta.requireFile || ctx?.method === 'GET') && ep.params.properties) {
+		if ((ep.meta.requireFile || request.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') {
@@ -221,7 +284,7 @@ export class ApiCallService implements OnApplicationShutdown {
 
 		// API invoking
 		const before = performance.now();
-		return await exec(data, user, token, ctx?.file, ctx?.ip, ctx?.headers).catch((err: Error) => {
+		return await ep.exec(data, user, token, file, request.ip, request.headers).catch((err: Error) => {
 			if (err instanceof ApiError) {
 				throw err;
 			} else {
diff --git a/packages/backend/src/server/api/ApiServerService.ts b/packages/backend/src/server/api/ApiServerService.ts
index 52654dbaee..cf3f2deebf 100644
--- a/packages/backend/src/server/api/ApiServerService.ts
+++ b/packages/backend/src/server/api/ApiServerService.ts
@@ -1,15 +1,13 @@
 import { Inject, Injectable } from '@nestjs/common';
-import Koa from 'koa';
-import Router from '@koa/router';
-import multer from '@koa/multer';
-import bodyParser from 'koa-bodyparser';
-import cors from '@koa/cors';
-import { ModuleRef } from '@nestjs/core';
+import { FastifyInstance, FastifyPluginOptions } from 'fastify';
+import cors from '@fastify/cors';
+import multipart from '@fastify/multipart';
+import { ModuleRef, repl } from '@nestjs/core';
 import type { Config } from '@/config.js';
 import type { UsersRepository, InstancesRepository, AccessTokensRepository } from '@/models/index.js';
 import { DI } from '@/di-symbols.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
-import endpoints from './endpoints.js';
+import endpoints, { IEndpoint } from './endpoints.js';
 import { ApiCallService } from './ApiCallService.js';
 import { SignupApiService } from './SignupApiService.js';
 import { SigninApiService } from './SigninApiService.js';
@@ -42,92 +40,107 @@ export class ApiServerService {
 		private discordServerService: DiscordServerService,
 		private twitterServerService: TwitterServerService,
 	) {
+		this.createServer = this.createServer.bind(this);
 	}
 
-	public createApiServer() {
-		const handlers: Record<string, any> = {};
-
-		for (const endpoint of endpoints) {
-			handlers[endpoint.name] = this.moduleRef.get('ep:' + endpoint.name, { strict: false }).exec;
-		}
-
-		// Init app
-		const apiServer = new Koa();
-
-		apiServer.use(cors({
+	public createServer(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
+		fastify.register(cors, {
 			origin: '*',
-		}));
-
-		// No caching
-		apiServer.use(async (ctx, next) => {
-			ctx.set('Cache-Control', 'private, max-age=0, must-revalidate');
-			await next();
 		});
 
-		apiServer.use(bodyParser({
-			// リクエストが multipart/form-data でない限りはJSONだと見なす
-			detectJSON: ctx => !ctx.is('multipart/form-data'),
-		}));
-
-		// Init multer instance
-		const upload = multer({
-			storage: multer.diskStorage({}),
+		fastify.register(multipart, {
 			limits: {
 				fileSize: this.config.maxFileSize ?? 262144000,
 				files: 1,
 			},
 		});
 
-		// Init router
-		const router = new Router();
+		// Prevent cache
+		fastify.addHook('onRequest', (request, reply, done) => {
+			reply.header('Cache-Control', 'private, max-age=0, must-revalidate');
+			done();
+		});
 
-		/**
-		 * Register endpoint handlers
-		 */
 		for (const endpoint of endpoints) {
+			const ep = {
+				name: endpoint.name,
+				meta: endpoint.meta,
+				params: endpoint.params,
+				exec: this.moduleRef.get('ep:' + endpoint.name, { strict: false }).exec,
+			};
+
 			if (endpoint.meta.requireFile) {
-				router.post(`/${endpoint.name}`, upload.single('file'), this.apiCallService.handleRequest.bind(this.apiCallService, endpoint, handlers[endpoint.name]));
+				fastify.all<{
+					Params: { endpoint: string; },
+					Body: Record<string, unknown>,
+					Querystring: Record<string, unknown>,
+				}>('/' + endpoint.name, (request, reply) => {
+					if (request.method === 'GET' && !endpoint.meta.allowGet) {
+						reply.code(405);
+						return;
+					}
+		
+					this.apiCallService.handleMultipartRequest(ep, request, reply);
+				});
 			} else {
-				// 後方互換性のため
-				if (endpoint.name.includes('-')) {
-					router.post(`/${endpoint.name.replace(/-/g, '_')}`, this.apiCallService.handleRequest.bind(this.apiCallService, endpoint, handlers[endpoint.name]));
-
-					if (endpoint.meta.allowGet) {
-						router.get(`/${endpoint.name.replace(/-/g, '_')}`, this.apiCallService.handleRequest.bind(this.apiCallService, endpoint, handlers[endpoint.name]));
-					} else {
-						router.get(`/${endpoint.name.replace(/-/g, '_')}`, async ctx => { ctx.status = 405; });
+				fastify.all<{
+					Params: { endpoint: string; },
+					Body: Record<string, unknown>,
+					Querystring: Record<string, unknown>,
+				}>('/' + endpoint.name, (request, reply) => {
+					if (request.method === 'GET' && !endpoint.meta.allowGet) {
+						reply.code(405);
+						return;
 					}
-				}
-
-				router.post(`/${endpoint.name}`, this.apiCallService.handleRequest.bind(this.apiCallService, endpoint, handlers[endpoint.name]));
-
-				if (endpoint.meta.allowGet) {
-					router.get(`/${endpoint.name}`, this.apiCallService.handleRequest.bind(this.apiCallService, endpoint, handlers[endpoint.name]));
-				} else {
-					router.get(`/${endpoint.name}`, async ctx => { ctx.status = 405; });
-				}
+		
+					this.apiCallService.handleRequest(ep, request, reply);
+				});
 			}
 		}
 
-		router.post('/signup', ctx => this.signupApiServiceService.signup(ctx));
-		router.post('/signin', ctx => this.signinApiServiceService.signin(ctx));
-		router.post('/signup-pending', ctx => this.signupApiServiceService.signupPending(ctx));
-
-		router.use(this.discordServerService.create().routes());
-		router.use(this.githubServerService.create().routes());
-		router.use(this.twitterServerService.create().routes());
-
-		router.get('/v1/instance/peers', async ctx => {
+		fastify.post<{
+			Body: {
+				username: string;
+				password: string;
+				host?: string;
+				invitationCode?: string;
+				emailAddress?: string;
+				'hcaptcha-response'?: string;
+				'g-recaptcha-response'?: string;
+				'turnstile-response'?: string;
+			}
+		}>('/signup', (request, reply) => this.signupApiServiceService.signup(request, reply));
+
+		fastify.post<{
+			Body: {
+				username: string;
+				password: string;
+				token?: string;
+				signature?: string;
+				authenticatorData?: string;
+				clientDataJSON?: string;
+				credentialId?: string;
+				challengeId?: string;
+			};
+		}>('/signin', (request, reply) => this.signinApiServiceService.signin(request, reply));
+
+		fastify.post<{ Body: { code: string; } }>('/signup-pending', (request, reply) => this.signupApiServiceService.signupPending(request, reply));
+
+		fastify.register(this.discordServerService.create);
+		fastify.register(this.githubServerService.create);
+		fastify.register(this.twitterServerService.create);
+
+		fastify.get('/v1/instance/peers', async (request, reply) => {
 			const instances = await this.instancesRepository.find({
 				select: ['host'],
 			});
 
-			ctx.body = instances.map(instance => instance.host);
+			return instances.map(instance => instance.host);
 		});
 
-		router.post('/miauth/:session/check', async ctx => {
+		fastify.post<{ Params: { session: string; } }>('/miauth/:session/check', async (request, reply) => {
 			const token = await this.accessTokensRepository.findOneBy({
-				session: ctx.params.session,
+				session: request.params.session,
 			});
 
 			if (token && token.session != null && !token.fetched) {
@@ -135,26 +148,18 @@ export class ApiServerService {
 					fetched: true,
 				});
 
-				ctx.body = {
+				return {
 					ok: true,
 					token: token.token,
 					user: await this.userEntityService.pack(token.userId, null, { detail: true }),
 				};
 			} else {
-				ctx.body = {
+				return {
 					ok: false,
 				};
 			}
 		});
 
-		// Return 404 for unknown API
-		router.all('(.*)', async ctx => {
-			ctx.status = 404;
-		});
-
-		// Register router
-		apiServer.use(router.routes());
-
-		return apiServer;
+		done();
 	}
 }
diff --git a/packages/backend/src/server/api/AuthenticateService.ts b/packages/backend/src/server/api/AuthenticateService.ts
index 4ce9b91f42..ad387c4732 100644
--- a/packages/backend/src/server/api/AuthenticateService.ts
+++ b/packages/backend/src/server/api/AuthenticateService.ts
@@ -34,7 +34,7 @@ export class AuthenticateService {
 		this.appCache = new Cache<App>(Infinity);
 	}
 
-	public async authenticate(token: string | null): Promise<[CacheableLocalUser | null | undefined, AccessToken | null | undefined]> {
+	public async authenticate(token: string | null | undefined): Promise<[CacheableLocalUser | null | undefined, AccessToken | null | undefined]> {
 		if (token == null) {
 			return [null, null];
 		}
diff --git a/packages/backend/src/server/api/SigninApiService.ts b/packages/backend/src/server/api/SigninApiService.ts
index a5e2b09012..8b3d86e5a6 100644
--- a/packages/backend/src/server/api/SigninApiService.ts
+++ b/packages/backend/src/server/api/SigninApiService.ts
@@ -3,6 +3,7 @@ import { Inject, Injectable } from '@nestjs/common';
 import bcrypt from 'bcryptjs';
 import * as speakeasy from 'speakeasy';
 import { IsNull } from 'typeorm';
+import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
 import { DI } from '@/di-symbols.js';
 import type { UserSecurityKeysRepository, SigninsRepository, UserProfilesRepository, AttestationChallengesRepository, UsersRepository } from '@/models/index.js';
 import type { Config } from '@/config.js';
@@ -12,7 +13,6 @@ import { IdService } from '@/core/IdService.js';
 import { TwoFactorAuthenticationService } from '@/core/TwoFactorAuthenticationService.js';
 import { RateLimiterService } from './RateLimiterService.js';
 import { SigninService } from './SigninService.js';
-import type Koa from 'koa';
 
 @Injectable()
 export class SigninApiService {
@@ -42,47 +42,60 @@ export class SigninApiService {
 	) {
 	}
 
-	public async signin(ctx: Koa.Context) {
-		ctx.set('Access-Control-Allow-Origin', this.config.url);
-		ctx.set('Access-Control-Allow-Credentials', 'true');
+	public async signin(
+		request: FastifyRequest<{
+			Body: {
+				username: string;
+				password: string;
+				token?: string;
+				signature?: string;
+				authenticatorData?: string;
+				clientDataJSON?: string;
+				credentialId?: string;
+				challengeId?: string;
+			};
+		}>,
+		reply: FastifyReply,
+	) {
+		reply.header('Access-Control-Allow-Origin', this.config.url);
+		reply.header('Access-Control-Allow-Credentials', 'true');
 
-		const body = ctx.request.body as any;
+		const body = request.body;
 		const username = body['username'];
 		const password = body['password'];
 		const token = body['token'];
 
 		function error(status: number, error: { id: string }) {
-			ctx.status = status;
-			ctx.body = { error };
+			reply.code(status);
+			return { error };
 		}
 
 		try {
 		// not more than 1 attempt per second and not more than 10 attempts per hour
-			await this.rateLimiterService.limit({ key: 'signin', duration: 60 * 60 * 1000, max: 10, minInterval: 1000 }, getIpHash(ctx.ip));
+			await this.rateLimiterService.limit({ key: 'signin', duration: 60 * 60 * 1000, max: 10, minInterval: 1000 }, getIpHash(request.ip));
 		} catch (err) {
-			ctx.status = 429;
-			ctx.body = {
+			reply.code(429);
+			return {
 				error: {
 					message: 'Too many failed attempts to sign in. Try again later.',
 					code: 'TOO_MANY_AUTHENTICATION_FAILURES',
 					id: '22d05606-fbcf-421a-a2db-b32610dcfd1b',
 				},
 			};
-			return;
 		}
 
 		if (typeof username !== 'string') {
-			ctx.status = 400;
+			reply.code(400);
 			return;
 		}
 
 		if (typeof password !== 'string') {
-			ctx.status = 400;
+			reply.code(400);
 			return;
 		}
 
 		if (token != null && typeof token !== 'string') {
-			ctx.status = 400;
+			reply.code(400);
 			return;
 		}
 
@@ -93,17 +106,15 @@ export class SigninApiService {
 		}) as ILocalUser;
 
 		if (user == null) {
-			error(404, {
+			return error(404, {
 				id: '6cc579cc-885d-43d8-95c2-b8c7fc963280',
 			});
-			return;
 		}
 
 		if (user.isSuspended) {
-			error(403, {
+			return error(403, {
 				id: 'e03a5f46-d309-4865-9b69-56282d94e1eb',
 			});
-			return;
 		}
 
 		const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
@@ -117,32 +128,29 @@ export class SigninApiService {
 				id: this.idService.genId(),
 				createdAt: new Date(),
 				userId: user.id,
-				ip: ctx.ip,
-				headers: ctx.headers,
+				ip: request.ip,
+				headers: request.headers,
 				success: false,
 			});
 
-			error(status ?? 500, failure ?? { id: '4e30e80c-e338-45a0-8c8f-44455efa3b76' });
+			return error(status ?? 500, failure ?? { id: '4e30e80c-e338-45a0-8c8f-44455efa3b76' });
 		};
 
 		if (!profile.twoFactorEnabled) {
 			if (same) {
-				this.signinService.signin(ctx, user);
-				return;
+				return this.signinService.signin(request, reply, user);
 			} else {
-				await fail(403, {
+				return await fail(403, {
 					id: '932c904e-9460-45b7-9ce6-7ed33be7eb2c',
 				});
-				return;
 			}
 		}
 
 		if (token) {
 			if (!same) {
-				await fail(403, {
+				return await fail(403, {
 					id: '932c904e-9460-45b7-9ce6-7ed33be7eb2c',
 				});
-				return;
 			}
 
 			const verified = (speakeasy as any).totp.verify({
@@ -153,20 +161,17 @@ export class SigninApiService {
 			});
 
 			if (verified) {
-				this.signinService.signin(ctx, user);
-				return;
+				return this.signinService.signin(request, reply, user);
 			} else {
-				await fail(403, {
+				return await fail(403, {
 					id: 'cdf1235b-ac71-46d4-a3a6-84ccce48df6f',
 				});
-				return;
 			}
-		} else if (body.credentialId) {
+		} else if (body.credentialId && body.clientDataJSON && body.authenticatorData && body.signature) {
 			if (!same && !profile.usePasswordLessLogin) {
-				await fail(403, {
+				return await fail(403, {
 					id: '932c904e-9460-45b7-9ce6-7ed33be7eb2c',
 				});
-				return;
 			}
 
 			const clientDataJSON = Buffer.from(body.clientDataJSON, 'hex');
@@ -179,10 +184,9 @@ export class SigninApiService {
 			});
 
 			if (!challenge) {
-				await fail(403, {
+				return await fail(403, {
 					id: '2715a88a-2125-4013-932f-aa6fe72792da',
 				});
-				return;
 			}
 
 			await this.attestationChallengesRepository.delete({
@@ -191,10 +195,9 @@ export class SigninApiService {
 			});
 
 			if (new Date().getTime() - challenge.createdAt.getTime() >= 5 * 60 * 1000) {
-				await fail(403, {
+				return await fail(403, {
 					id: '2715a88a-2125-4013-932f-aa6fe72792da',
 				});
-				return;
 			}
 
 			const securityKey = await this.userSecurityKeysRepository.findOneBy({
@@ -207,10 +210,9 @@ export class SigninApiService {
 			});
 
 			if (!securityKey) {
-				await fail(403, {
+				return await fail(403, {
 					id: '66269679-aeaf-4474-862b-eb761197e046',
 				});
-				return;
 			}
 
 			const isValid = this.twoFactorAuthenticationService.verifySignin({
@@ -223,20 +225,17 @@ export class SigninApiService {
 			});
 
 			if (isValid) {
-				this.signinService.signin(ctx, user);
-				return;
+				return this.signinService.signin(request, reply, user);
 			} else {
-				await fail(403, {
+				return await fail(403, {
 					id: '93b86c4b-72f9-40eb-9815-798928603d1e',
 				});
-				return;
 			}
 		} else {
 			if (!same && !profile.usePasswordLessLogin) {
-				await fail(403, {
+				return await fail(403, {
 					id: '932c904e-9460-45b7-9ce6-7ed33be7eb2c',
 				});
-				return;
 			}
 
 			const keys = await this.userSecurityKeysRepository.findBy({
@@ -244,10 +243,9 @@ export class SigninApiService {
 			});
 
 			if (keys.length === 0) {
-				await fail(403, {
+				return await fail(403, {
 					id: 'f27fd449-9af4-4841-9249-1f989b9fa4a4',
 				});
-				return;
 			}
 
 			// 32 byte challenge
@@ -266,15 +264,14 @@ export class SigninApiService {
 				registrationChallenge: false,
 			});
 
-			ctx.body = {
+			reply.code(200);
+			return {
 				challenge,
 				challengeId,
 				securityKeys: keys.map(key => ({
 					id: key.id,
 				})),
 			};
-			ctx.status = 200;
-			return;
 		}
 	// never get here
 	}
diff --git a/packages/backend/src/server/api/SigninService.ts b/packages/backend/src/server/api/SigninService.ts
index 3b96dfee6f..18a1d6c088 100644
--- a/packages/backend/src/server/api/SigninService.ts
+++ b/packages/backend/src/server/api/SigninService.ts
@@ -1,13 +1,12 @@
 import { Inject, Injectable } from '@nestjs/common';
+import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
 import { DI } from '@/di-symbols.js';
-import type { SigninsRepository } from '@/models/index.js';
-import type { UsersRepository } from '@/models/index.js';
+import type { SigninsRepository, UsersRepository } from '@/models/index.js';
 import type { Config } from '@/config.js';
 import { IdService } from '@/core/IdService.js';
 import type { ILocalUser } from '@/models/entities/User.js';
 import { GlobalEventService } from '@/core/GlobalEventService.js';
 import { SigninEntityService } from '@/core/entities/SigninEntityService.js';
-import type Koa from 'koa';
 
 @Injectable()
 export class SigninService {
@@ -24,10 +23,25 @@ export class SigninService {
 	) {
 	}
 
-	public signin(ctx: Koa.Context, user: ILocalUser, redirect = false) {
+	public signin(request: FastifyRequest, reply: FastifyReply, user: ILocalUser, redirect = false) {
+		setImmediate(async () => {
+			// Append signin history
+			const record = await this.signinsRepository.insert({
+				id: this.idService.genId(),
+				createdAt: new Date(),
+				userId: user.id,
+				ip: request.ip,
+				headers: request.headers,
+				success: true,
+			}).then(x => this.signinsRepository.findOneByOrFail(x.identifiers[0]));
+	
+			// Publish signin event
+			this.globalEventService.publishMainStream(user.id, 'signin', await this.signinEntityService.pack(record));
+		});
+
 		if (redirect) {
 			//#region Cookie
-			ctx.cookies.set('igi', user.token!, {
+			reply.cookies.set('igi', user.token!, {
 				path: '/',
 				// SEE: https://github.com/koajs/koa/issues/974
 				// When using a SSL proxy it should be configured to add the "X-Forwarded-Proto: https" header
@@ -36,29 +50,14 @@ export class SigninService {
 			});
 			//#endregion
 	
-			ctx.redirect(this.config.url);
+			reply.redirect(this.config.url);
 		} else {
-			ctx.body = {
+			reply.code(200);
+			return {
 				id: user.id,
 				i: user.token,
 			};
-			ctx.status = 200;
 		}
-	
-		(async () => {
-			// Append signin history
-			const record = await this.signinsRepository.insert({
-				id: this.idService.genId(),
-				createdAt: new Date(),
-				userId: user.id,
-				ip: ctx.ip,
-				headers: ctx.headers,
-				success: true,
-			}).then(x => this.signinsRepository.findOneByOrFail(x.identifiers[0]));
-	
-			// Publish signin event
-			this.globalEventService.publishMainStream(user.id, 'signin', await this.signinEntityService.pack(record));
-		})();
 	}
 }
 
diff --git a/packages/backend/src/server/api/SignupApiService.ts b/packages/backend/src/server/api/SignupApiService.ts
index edb8e4e8e6..771858d091 100644
--- a/packages/backend/src/server/api/SignupApiService.ts
+++ b/packages/backend/src/server/api/SignupApiService.ts
@@ -1,6 +1,7 @@
 import { Inject, Injectable } from '@nestjs/common';
 import rndstr from 'rndstr';
 import bcrypt from 'bcryptjs';
+import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
 import { DI } from '@/di-symbols.js';
 import type { RegistrationTicketsRepository, UserPendingsRepository, UserProfilesRepository, UsersRepository } from '@/models/index.js';
 import type { Config } from '@/config.js';
@@ -11,8 +12,8 @@ import { SignupService } from '@/core/SignupService.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
 import { EmailService } from '@/core/EmailService.js';
 import { ILocalUser } from '@/models/entities/User.js';
+import { FastifyReplyError } from '@/misc/fastify-reply-error.js';
 import { SigninService } from './SigninService.js';
-import type Koa from 'koa';
 
 @Injectable()
 export class SignupApiService {
@@ -42,8 +43,22 @@ export class SignupApiService {
 	) {
 	}
 
-	public async signup(ctx: Koa.Context) {
-		const body = ctx.request.body;
+	public async signup(
+		request: FastifyRequest<{
+			Body: {
+				username: string;
+				password: string;
+				host?: string;
+				invitationCode?: string;
+				emailAddress?: string;
+				'hcaptcha-response'?: string;
+				'g-recaptcha-response'?: string;
+				'turnstile-response'?: string;
+			}
+		}>,
+		reply: FastifyReply,
+	) {
+		const body = request.body;
 
 		const instance = await this.metaService.fetch(true);
 	
@@ -51,20 +66,20 @@ export class SignupApiService {
 		// ただしテスト時はこの機構は障害となるため無効にする
 		if (process.env.NODE_ENV !== 'test') {
 			if (instance.enableHcaptcha && instance.hcaptchaSecretKey) {
-				await this.captchaService.verifyHcaptcha(instance.hcaptchaSecretKey, body['hcaptcha-response']).catch(e => {
-					ctx.throw(400, e);
+				await this.captchaService.verifyHcaptcha(instance.hcaptchaSecretKey, body['hcaptcha-response']).catch(err => {
+					throw new FastifyReplyError(400, err);
 				});
 			}
 	
 			if (instance.enableRecaptcha && instance.recaptchaSecretKey) {
-				await this.captchaService.verifyRecaptcha(instance.recaptchaSecretKey, body['g-recaptcha-response']).catch(e => {
-					ctx.throw(400, e);
+				await this.captchaService.verifyRecaptcha(instance.recaptchaSecretKey, body['g-recaptcha-response']).catch(err => {
+					throw new FastifyReplyError(400, err);
 				});
 			}
 
 			if (instance.enableTurnstile && instance.turnstileSecretKey) {
-				await this.captchaService.verifyTurnstile(instance.turnstileSecretKey, body['turnstile-response']).catch(e => {
-					ctx.throw(400, e);
+				await this.captchaService.verifyTurnstile(instance.turnstileSecretKey, body['turnstile-response']).catch(err => {
+					throw new FastifyReplyError(400, err);
 				});
 			}
 		}
@@ -77,20 +92,20 @@ export class SignupApiService {
 	
 		if (instance.emailRequiredForSignup) {
 			if (emailAddress == null || typeof emailAddress !== 'string') {
-				ctx.status = 400;
+				reply.code(400);
 				return;
 			}
 	
-			const available = await this.emailService.validateEmailForAccount(emailAddress);
-			if (!available) {
-				ctx.status = 400;
+			const res = await this.emailService.validateEmailForAccount(emailAddress);
+			if (!res.available) {
+				reply.code(400);
 				return;
 			}
 		}
 	
 		if (instance.disableRegistration) {
 			if (invitationCode == null || typeof invitationCode !== 'string') {
-				ctx.status = 400;
+				reply.code(400);
 				return;
 			}
 	
@@ -99,7 +114,7 @@ export class SignupApiService {
 			});
 	
 			if (ticket == null) {
-				ctx.status = 400;
+				reply.code(400);
 				return;
 			}
 	
@@ -117,18 +132,18 @@ export class SignupApiService {
 				id: this.idService.genId(),
 				createdAt: new Date(),
 				code,
-				email: emailAddress,
+				email: emailAddress!,
 				username: username,
 				password: hash,
 			});
 	
 			const link = `${this.config.url}/signup-complete/${code}`;
 	
-			this.emailService.sendEmail(emailAddress, 'Signup',
+			this.emailService.sendEmail(emailAddress!, 'Signup',
 				`To complete signup, please click this link:<br><a href="${link}">${link}</a>`,
 				`To complete signup, please click this link: ${link}`);
 	
-			ctx.status = 204;
+			reply.code(204);
 		} else {
 			try {
 				const { account, secret } = await this.signupService.signup({
@@ -140,17 +155,18 @@ export class SignupApiService {
 					includeSecrets: true,
 				});
 	
-				(res as any).token = secret;
-	
-				ctx.body = res;
-			} catch (e) {
-				ctx.throw(400, e);
+				return {
+					...res,
+					token: secret,
+				};
+			} catch (err) {
+				throw new FastifyReplyError(400, err);
 			}
 		}
 	}
 
-	public async signupPending(ctx: Koa.Context) {
-		const body = ctx.request.body;
+	public async signupPending(request: FastifyRequest<{ Body: { code: string; } }>, reply: FastifyReply) {
+		const body = request.body;
 
 		const code = body['code'];
 
@@ -174,9 +190,9 @@ export class SignupApiService {
 				emailVerifyCode: null,
 			});
 
-			this.signinService.signin(ctx, account as ILocalUser);
-		} catch (e) {
-			ctx.throw(400, e);
+			this.signinService.signin(request, reply, account as ILocalUser);
+		} catch (err) {
+			throw new FastifyReplyError(400, err);
 		}
 	}
 }
diff --git a/packages/backend/src/server/api/endpoint-base.ts b/packages/backend/src/server/api/endpoint-base.ts
index 0a7f9b3008..b27329b9a9 100644
--- a/packages/backend/src/server/api/endpoint-base.ts
+++ b/packages/backend/src/server/api/endpoint-base.ts
@@ -14,23 +14,28 @@ ajv.addFormat('misskey:id', /^[a-zA-Z0-9]+$/);
 
 export type Response = Record<string, any> | void;
 
+type File = {
+	name: string | null;
+	path: string;
+};
+
 // TODO: paramsの型をT['params']のスキーマ定義から推論する
 type executor<T extends IEndpointMeta, Ps extends Schema> =
-	(params: SchemaType<Ps>, user: T['requireCredential'] extends true ? CacheableLocalUser : CacheableLocalUser | null, token: AccessToken | null, file?: any, cleanup?: () => any, ip?: string | null, headers?: Record<string, string> | null) =>
+	(params: SchemaType<Ps>, user: T['requireCredential'] extends true ? CacheableLocalUser : CacheableLocalUser | null, token: AccessToken | null, file?: File, cleanup?: () => any, ip?: string | null, headers?: Record<string, string> | null) =>
 		Promise<T['res'] extends undefined ? Response : SchemaType<NonNullable<T['res']>>>;
 
 export abstract class Endpoint<T extends IEndpointMeta, Ps extends Schema> {
-	public exec: (params: any, user: T['requireCredential'] extends true ? CacheableLocalUser : CacheableLocalUser | null, token: AccessToken | null, file?: any, ip?: string | null, headers?: Record<string, string> | null) => Promise<any>;
+	public exec: (params: any, user: T['requireCredential'] extends true ? CacheableLocalUser : CacheableLocalUser | null, token: AccessToken | null, file?: File, ip?: string | null, headers?: Record<string, string> | null) => Promise<any>;
 
 	constructor(meta: T, paramDef: Ps, cb: executor<T, Ps>) {
 		const validate = ajv.compile(paramDef);
 
-		this.exec = (params: any, user: T['requireCredential'] extends true ? CacheableLocalUser : CacheableLocalUser | null, token: AccessToken | null, file?: any, ip?: string | null, headers?: Record<string, string> | null) => {
+		this.exec = (params: any, user: T['requireCredential'] extends true ? CacheableLocalUser : CacheableLocalUser | null, token: AccessToken | null, file?: File, ip?: string | null, headers?: Record<string, string> | null) => {
 			let cleanup: undefined | (() => void) = undefined;
 	
 			if (meta.requireFile) {
 				cleanup = () => {
-					fs.unlink(file.path, () => {});
+					if (file) fs.unlink(file.path, () => {});
 				};
 	
 				if (file == null) return Promise.reject(new ApiError({
diff --git a/packages/backend/src/server/api/endpoints/drive/files/create.ts b/packages/backend/src/server/api/endpoints/drive/files/create.ts
index d394f5c3da..3f4485fc8b 100644
--- a/packages/backend/src/server/api/endpoints/drive/files/create.ts
+++ b/packages/backend/src/server/api/endpoints/drive/files/create.ts
@@ -78,8 +78,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 	) {
 		super(meta, paramDef, async (ps, me, _, file, cleanup, ip, headers) => {
 			// Get 'name' parameter
-			let name = ps.name ?? file.originalname;
-			if (name !== undefined && name !== null) {
+			let name = ps.name ?? file!.name ?? null;
+			if (name != null) {
 				name = name.trim();
 				if (name.length === 0) {
 					name = null;
@@ -88,8 +88,6 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				} else if (!this.driveFileEntityService.validateFileName(name)) {
 					throw new ApiError(meta.errors.invalidFileName);
 				}
-			} else {
-				name = null;
 			}
 
 			const meta = await this.metaService.fetch();
@@ -98,7 +96,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				// Create file
 				const driveFile = await this.driveService.addFile({
 					user: me,
-					path: file.path,
+					path: file!.path,
 					name,
 					comment: ps.comment,
 					folderId: ps.folderId,
diff --git a/packages/backend/src/server/api/integration/DiscordServerService.ts b/packages/backend/src/server/api/integration/DiscordServerService.ts
index 1fd103797c..93c22a6c0b 100644
--- a/packages/backend/src/server/api/integration/DiscordServerService.ts
+++ b/packages/backend/src/server/api/integration/DiscordServerService.ts
@@ -1,9 +1,9 @@
 import { Inject, Injectable } from '@nestjs/common';
 import Redis from 'ioredis';
-import Router from '@koa/router';
 import { OAuth2 } from 'oauth';
 import { v4 as uuid } from 'uuid';
 import { IsNull } from 'typeorm';
+import { FastifyInstance, FastifyRequest, FastifyReply, FastifyPluginOptions } from 'fastify';
 import type { Config } from '@/config.js';
 import type { UserProfilesRepository, UsersRepository } from '@/models/index.js';
 import { DI } from '@/di-symbols.js';
@@ -12,8 +12,8 @@ import type { ILocalUser } from '@/models/entities/User.js';
 import { GlobalEventService } from '@/core/GlobalEventService.js';
 import { MetaService } from '@/core/MetaService.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { FastifyReplyError } from '@/misc/fastify-reply-error.js';
 import { SigninService } from '../SigninService.js';
-import type Koa from 'koa';
 
 @Injectable()
 export class DiscordServerService {
@@ -36,21 +36,18 @@ export class DiscordServerService {
 		private metaService: MetaService,
 		private signinService: SigninService,
 	) {
+		this.create = this.create.bind(this);
 	}
 
-	public create() {
-		const router = new Router();
-
-		router.get('/disconnect/discord', async ctx => {
-			if (!this.compareOrigin(ctx)) {
-				ctx.throw(400, 'invalid origin');
-				return;
+	public create(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
+		fastify.get('/disconnect/discord', async (request, reply) => {
+			if (!this.compareOrigin(request)) {
+				throw new FastifyReplyError(400, 'invalid origin');
 			}
 
-			const userToken = this.getUserToken(ctx);
+			const userToken = this.getUserToken(request);
 			if (!userToken) {
-				ctx.throw(400, 'signin required');
-				return;
+				throw new FastifyReplyError(400, 'signin required');
 			}
 
 			const user = await this.usersRepository.findOneByOrFail({
@@ -66,13 +63,13 @@ export class DiscordServerService {
 				integrations: profile.integrations,
 			});
 
-			ctx.body = 'Discordの連携を解除しました :v:';
-
 			// Publish i updated event
 			this.globalEventService.publishMainStream(user.id, 'meUpdated', await this.userEntityService.pack(user, user, {
 				detail: true,
 				includeSecrets: true,
 			}));
+
+			return 'Discordの連携を解除しました :v:';
 		});
 
 		const getOAuth2 = async () => {
@@ -90,16 +87,14 @@ export class DiscordServerService {
 			}
 		};
 
-		router.get('/connect/discord', async ctx => {
-			if (!this.compareOrigin(ctx)) {
-				ctx.throw(400, 'invalid origin');
-				return;
+		fastify.get('/connect/discord', async (request, reply) => {
+			if (!this.compareOrigin(request)) {
+				throw new FastifyReplyError(400, 'invalid origin');
 			}
 
-			const userToken = this.getUserToken(ctx);
+			const userToken = this.getUserToken(request);
 			if (!userToken) {
-				ctx.throw(400, 'signin required');
-				return;
+				throw new FastifyReplyError(400, 'signin required');
 			}
 
 			const params = {
@@ -112,10 +107,10 @@ export class DiscordServerService {
 			this.redisClient.set(userToken, JSON.stringify(params));
 
 			const oauth2 = await getOAuth2();
-			ctx.redirect(oauth2!.getAuthorizeUrl(params));
+			reply.redirect(oauth2!.getAuthorizeUrl(params));
 		});
 
-		router.get('/signin/discord', async ctx => {
+		fastify.get('/signin/discord', async (request, reply) => {
 			const sessid = uuid();
 
 			const params = {
@@ -125,7 +120,7 @@ export class DiscordServerService {
 				response_type: 'code',
 			};
 
-			ctx.cookies.set('signin_with_discord_sid', sessid, {
+			reply.cookies.set('signin_with_discord_sid', sessid, {
 				path: '/',
 				secure: this.config.url.startsWith('https'),
 				httpOnly: true,
@@ -134,27 +129,25 @@ export class DiscordServerService {
 			this.redisClient.set(sessid, JSON.stringify(params));
 
 			const oauth2 = await getOAuth2();
-			ctx.redirect(oauth2!.getAuthorizeUrl(params));
+			reply.redirect(oauth2!.getAuthorizeUrl(params));
 		});
 
-		router.get('/dc/cb', async ctx => {
-			const userToken = this.getUserToken(ctx);
+		fastify.get('/dc/cb', async (request, reply) => {
+			const userToken = this.getUserToken(request);
 
 			const oauth2 = await getOAuth2();
 
 			if (!userToken) {
-				const sessid = ctx.cookies.get('signin_with_discord_sid');
+				const sessid = request.cookies.get('signin_with_discord_sid');
 
 				if (!sessid) {
-					ctx.throw(400, 'invalid session');
-					return;
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
-				const code = ctx.query.code;
+				const code = request.query.code;
 
 				if (!code || typeof code !== 'string') {
-					ctx.throw(400, 'invalid session');
-					return;
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
 				const { redirect_uri, state } = await new Promise<any>((res, rej) => {
@@ -164,9 +157,8 @@ export class DiscordServerService {
 					});
 				});
 
-				if (ctx.query.state !== state) {
-					ctx.throw(400, 'invalid session');
-					return;
+				if (request.query.state !== state) {
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
 				const { accessToken, refreshToken, expiresDate } = await new Promise<any>((res, rej) =>
@@ -192,8 +184,7 @@ export class DiscordServerService {
 				})) as Record<string, unknown>;
 
 				if (typeof id !== 'string' || typeof username !== 'string' || typeof discriminator !== 'string') {
-					ctx.throw(400, 'invalid session');
-					return;
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
 				const profile = await this.userProfilesRepository.createQueryBuilder()
@@ -202,8 +193,7 @@ export class DiscordServerService {
 					.getOne();
 
 				if (profile == null) {
-					ctx.throw(404, `@${username}#${discriminator}と連携しているMisskeyアカウントはありませんでした...`);
-					return;
+					throw new FastifyReplyError(404, `@${username}#${discriminator}と連携しているMisskeyアカウントはありませんでした...`);
 				}
 
 				await this.userProfilesRepository.update(profile.userId, {
@@ -220,13 +210,12 @@ export class DiscordServerService {
 					},
 				});
 
-				this.signinService.signin(ctx, await this.usersRepository.findOneBy({ id: profile.userId }) as ILocalUser, true);
+				return this.signinService.signin(request, reply, await this.usersRepository.findOneBy({ id: profile.userId }) as ILocalUser, true);
 			} else {
-				const code = ctx.query.code;
+				const code = request.query.code;
 
 				if (!code || typeof code !== 'string') {
-					ctx.throw(400, 'invalid session');
-					return;
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
 				const { redirect_uri, state } = await new Promise<any>((res, rej) => {
@@ -236,9 +225,8 @@ export class DiscordServerService {
 					});
 				});
 
-				if (ctx.query.state !== state) {
-					ctx.throw(400, 'invalid session');
-					return;
+				if (request.query.state !== state) {
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
 				const { accessToken, refreshToken, expiresDate } = await new Promise<any>((res, rej) =>
@@ -263,8 +251,7 @@ export class DiscordServerService {
 					'Authorization': `Bearer ${accessToken}`,
 				})) as Record<string, unknown>;
 				if (typeof id !== 'string' || typeof username !== 'string' || typeof discriminator !== 'string') {
-					ctx.throw(400, 'invalid session');
-					return;
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
 				const user = await this.usersRepository.findOneByOrFail({
@@ -288,29 +275,29 @@ export class DiscordServerService {
 					},
 				});
 
-				ctx.body = `Discord: @${username}#${discriminator} を、Misskey: @${user.username} に接続しました！`;
-
 				// Publish i updated event
 				this.globalEventService.publishMainStream(user.id, 'meUpdated', await this.userEntityService.pack(user, user, {
 					detail: true,
 					includeSecrets: true,
 				}));
+
+				return `Discord: @${username}#${discriminator} を、Misskey: @${user.username} に接続しました！`;
 			}
 		});
 
-		return router;
+		done();
 	}
 
-	private getUserToken(ctx: Koa.BaseContext): string | null {
-		return ((ctx.headers['cookie'] ?? '').match(/igi=(\w+)/) ?? [null, null])[1];
+	private getUserToken(request: FastifyRequest): string | null {
+		return ((request.headers['cookie'] ?? '').match(/igi=(\w+)/) ?? [null, null])[1];
 	}
 	
-	private compareOrigin(ctx: Koa.BaseContext): boolean {
+	private compareOrigin(request: FastifyRequest): boolean {
 		function normalizeUrl(url?: string): string {
 			return url ? url.endsWith('/') ? url.substr(0, url.length - 1) : url : '';
 		}
 	
-		const referer = ctx.headers['referer'];
+		const referer = request.headers['referer'];
 	
 		return (normalizeUrl(referer) === normalizeUrl(this.config.url));
 	}
diff --git a/packages/backend/src/server/api/integration/GithubServerService.ts b/packages/backend/src/server/api/integration/GithubServerService.ts
index 98d6230749..2fd20bf831 100644
--- a/packages/backend/src/server/api/integration/GithubServerService.ts
+++ b/packages/backend/src/server/api/integration/GithubServerService.ts
@@ -1,9 +1,9 @@
 import { Inject, Injectable } from '@nestjs/common';
 import Redis from 'ioredis';
-import Router from '@koa/router';
 import { OAuth2 } from 'oauth';
 import { v4 as uuid } from 'uuid';
 import { IsNull } from 'typeorm';
+import { FastifyInstance, FastifyRequest, FastifyReply, FastifyPluginOptions } from 'fastify';
 import type { Config } from '@/config.js';
 import type { UserProfilesRepository, UsersRepository } from '@/models/index.js';
 import { DI } from '@/di-symbols.js';
@@ -12,8 +12,8 @@ import type { ILocalUser } from '@/models/entities/User.js';
 import { GlobalEventService } from '@/core/GlobalEventService.js';
 import { MetaService } from '@/core/MetaService.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { FastifyReplyError } from '@/misc/fastify-reply-error.js';
 import { SigninService } from '../SigninService.js';
-import type Koa from 'koa';
 
 @Injectable()
 export class GithubServerService {
@@ -36,21 +36,18 @@ export class GithubServerService {
 		private metaService: MetaService,
 		private signinService: SigninService,
 	) {
+		this.create = this.create.bind(this);
 	}
 
-	public create() {
-		const router = new Router();
-
-		router.get('/disconnect/github', async ctx => {
-			if (!this.compareOrigin(ctx)) {
-				ctx.throw(400, 'invalid origin');
-				return;
+	public create(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
+		fastify.get('/disconnect/github', async (request, reply) => {
+			if (!this.compareOrigin(request)) {
+				throw new FastifyReplyError(400, 'invalid origin');
 			}
 
-			const userToken = this.getUserToken(ctx);
+			const userToken = this.getUserToken(request);
 			if (!userToken) {
-				ctx.throw(400, 'signin required');
-				return;
+				throw new FastifyReplyError(400, 'signin required');
 			}
 
 			const user = await this.usersRepository.findOneByOrFail({
@@ -66,13 +63,13 @@ export class GithubServerService {
 				integrations: profile.integrations,
 			});
 
-			ctx.body = 'GitHubの連携を解除しました :v:';
-
 			// Publish i updated event
 			this.globalEventService.publishMainStream(user.id, 'meUpdated', await this.userEntityService.pack(user, user, {
 				detail: true,
 				includeSecrets: true,
 			}));
+
+			return 'GitHubの連携を解除しました :v:';
 		});
 
 		const getOath2 = async () => {
@@ -90,16 +87,14 @@ export class GithubServerService {
 			}
 		};
 
-		router.get('/connect/github', async ctx => {
-			if (!this.compareOrigin(ctx)) {
-				ctx.throw(400, 'invalid origin');
-				return;
+		fastify.get('/connect/github', async (request, reply) => {
+			if (!this.compareOrigin(request)) {
+				throw new FastifyReplyError(400, 'invalid origin');
 			}
 
-			const userToken = this.getUserToken(ctx);
+			const userToken = this.getUserToken(request);
 			if (!userToken) {
-				ctx.throw(400, 'signin required');
-				return;
+				throw new FastifyReplyError(400, 'signin required');
 			}
 
 			const params = {
@@ -111,10 +106,10 @@ export class GithubServerService {
 			this.redisClient.set(userToken, JSON.stringify(params));
 
 			const oauth2 = await getOath2();
-			ctx.redirect(oauth2!.getAuthorizeUrl(params));
+			reply.redirect(oauth2!.getAuthorizeUrl(params));
 		});
 
-		router.get('/signin/github', async ctx => {
+		fastify.get('/signin/github', async (request, reply) => {
 			const sessid = uuid();
 
 			const params = {
@@ -123,7 +118,7 @@ export class GithubServerService {
 				state: uuid(),
 			};
 
-			ctx.cookies.set('signin_with_github_sid', sessid, {
+			reply.cookies.set('signin_with_github_sid', sessid, {
 				path: '/',
 				secure: this.config.url.startsWith('https'),
 				httpOnly: true,
@@ -132,27 +127,25 @@ export class GithubServerService {
 			this.redisClient.set(sessid, JSON.stringify(params));
 
 			const oauth2 = await getOath2();
-			ctx.redirect(oauth2!.getAuthorizeUrl(params));
+			reply.redirect(oauth2!.getAuthorizeUrl(params));
 		});
 
-		router.get('/gh/cb', async ctx => {
-			const userToken = this.getUserToken(ctx);
+		fastify.get('/gh/cb', async (request, reply) => {
+			const userToken = this.getUserToken(request);
 
 			const oauth2 = await getOath2();
 
 			if (!userToken) {
-				const sessid = ctx.cookies.get('signin_with_github_sid');
+				const sessid = request.cookies.get('signin_with_github_sid');
 
 				if (!sessid) {
-					ctx.throw(400, 'invalid session');
-					return;
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
-				const code = ctx.query.code;
+				const code = request.query.code;
 
 				if (!code || typeof code !== 'string') {
-					ctx.throw(400, 'invalid session');
-					return;
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
 				const { redirect_uri, state } = await new Promise<any>((res, rej) => {
@@ -162,9 +155,8 @@ export class GithubServerService {
 					});
 				});
 
-				if (ctx.query.state !== state) {
-					ctx.throw(400, 'invalid session');
-					return;
+				if (request.query.state !== state) {
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
 				const { accessToken } = await new Promise<{ accessToken: string }>((res, rej) =>
@@ -184,8 +176,7 @@ export class GithubServerService {
 					'Authorization': `bearer ${accessToken}`,
 				})) as Record<string, unknown>;
 				if (typeof login !== 'string' || typeof id !== 'string') {
-					ctx.throw(400, 'invalid session');
-					return;
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
 				const link = await this.userProfilesRepository.createQueryBuilder()
@@ -194,17 +185,15 @@ export class GithubServerService {
 					.getOne();
 
 				if (link == null) {
-					ctx.throw(404, `@${login}と連携しているMisskeyアカウントはありませんでした...`);
-					return;
+					throw new FastifyReplyError(404, `@${login}と連携しているMisskeyアカウントはありませんでした...`);
 				}
 
-				this.signinService.signin(ctx, await this.usersRepository.findOneBy({ id: link.userId }) as ILocalUser, true);
+				return this.signinService.signin(request, reply, await this.usersRepository.findOneBy({ id: link.userId }) as ILocalUser, true);
 			} else {
-				const code = ctx.query.code;
+				const code = request.query.code;
 
 				if (!code || typeof code !== 'string') {
-					ctx.throw(400, 'invalid session');
-					return;
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
 				const { redirect_uri, state } = await new Promise<any>((res, rej) => {
@@ -214,9 +203,8 @@ export class GithubServerService {
 					});
 				});
 
-				if (ctx.query.state !== state) {
-					ctx.throw(400, 'invalid session');
-					return;
+				if (request.query.state !== state) {
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
 				const { accessToken } = await new Promise<{ accessToken: string }>((res, rej) =>
@@ -238,8 +226,7 @@ export class GithubServerService {
 				})) as Record<string, unknown>;
 
 				if (typeof login !== 'string' || typeof id !== 'string') {
-					ctx.throw(400, 'invalid session');
-					return;
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
 				const user = await this.usersRepository.findOneByOrFail({
@@ -260,29 +247,29 @@ export class GithubServerService {
 					},
 				});
 
-				ctx.body = `GitHub: @${login} を、Misskey: @${user.username} に接続しました！`;
-
 				// Publish i updated event
 				this.globalEventService.publishMainStream(user.id, 'meUpdated', await this.userEntityService.pack(user, user, {
 					detail: true,
 					includeSecrets: true,
 				}));
+
+				return `GitHub: @${login} を、Misskey: @${user.username} に接続しました！`;
 			}
 		});
 
-		return router;
+		done();
 	}
 
-	private getUserToken(ctx: Koa.BaseContext): string | null {
-		return ((ctx.headers['cookie'] ?? '').match(/igi=(\w+)/) ?? [null, null])[1];
+	private getUserToken(request: FastifyRequest): string | null {
+		return ((request.headers['cookie'] ?? '').match(/igi=(\w+)/) ?? [null, null])[1];
 	}
 	
-	private compareOrigin(ctx: Koa.BaseContext): boolean {
+	private compareOrigin(request: FastifyRequest): boolean {
 		function normalizeUrl(url?: string): string {
 			return url ? url.endsWith('/') ? url.substr(0, url.length - 1) : url : '';
 		}
 	
-		const referer = ctx.headers['referer'];
+		const referer = request.headers['referer'];
 	
 		return (normalizeUrl(referer) === normalizeUrl(this.config.url));
 	}
diff --git a/packages/backend/src/server/api/integration/TwitterServerService.ts b/packages/backend/src/server/api/integration/TwitterServerService.ts
index 57c977bc54..a8447f9d49 100644
--- a/packages/backend/src/server/api/integration/TwitterServerService.ts
+++ b/packages/backend/src/server/api/integration/TwitterServerService.ts
@@ -1,6 +1,6 @@
 import { Inject, Injectable } from '@nestjs/common';
 import Redis from 'ioredis';
-import Router from '@koa/router';
+import { FastifyInstance, FastifyRequest, FastifyReply, FastifyPluginOptions } from 'fastify';
 import { v4 as uuid } from 'uuid';
 import { IsNull } from 'typeorm';
 import autwh from 'autwh';
@@ -12,8 +12,8 @@ import type { ILocalUser } from '@/models/entities/User.js';
 import { GlobalEventService } from '@/core/GlobalEventService.js';
 import { MetaService } from '@/core/MetaService.js';
 import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { FastifyReplyError } from '@/misc/fastify-reply-error.js';
 import { SigninService } from '../SigninService.js';
-import type Koa from 'koa';
 
 @Injectable()
 export class TwitterServerService {
@@ -36,21 +36,18 @@ export class TwitterServerService {
 		private metaService: MetaService,
 		private signinService: SigninService,
 	) {
+		this.create = this.create.bind(this);
 	}
 
-	public create() {
-		const router = new Router();
-
-		router.get('/disconnect/twitter', async ctx => {
-			if (!this.compareOrigin(ctx)) {
-				ctx.throw(400, 'invalid origin');
-				return;
+	public create(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
+		fastify.get('/disconnect/twitter', async (request, reply) => {
+			if (!this.compareOrigin(request)) {
+				throw new FastifyReplyError(400, 'invalid origin');
 			}
 
-			const userToken = this.getUserToken(ctx);
+			const userToken = this.getUserToken(request);
 			if (userToken == null) {
-				ctx.throw(400, 'signin required');
-				return;
+				throw new FastifyReplyError(400, 'signin required');
 			}
 
 			const user = await this.usersRepository.findOneByOrFail({
@@ -66,13 +63,13 @@ export class TwitterServerService {
 				integrations: profile.integrations,
 			});
 
-			ctx.body = 'Twitterの連携を解除しました :v:';
-
 			// Publish i updated event
 			this.globalEventService.publishMainStream(user.id, 'meUpdated', await this.userEntityService.pack(user, user, {
 				detail: true,
 				includeSecrets: true,
 			}));
+
+			return 'Twitterの連携を解除しました :v:';
 		});
 
 		const getTwAuth = async () => {
@@ -89,25 +86,23 @@ export class TwitterServerService {
 			}
 		};
 
-		router.get('/connect/twitter', async ctx => {
-			if (!this.compareOrigin(ctx)) {
-				ctx.throw(400, 'invalid origin');
-				return;
+		fastify.get('/connect/twitter', async (request, reply) => {
+			if (!this.compareOrigin(request)) {
+				throw new FastifyReplyError(400, 'invalid origin');
 			}
 
-			const userToken = this.getUserToken(ctx);
+			const userToken = this.getUserToken(request);
 			if (userToken == null) {
-				ctx.throw(400, 'signin required');
-				return;
+				throw new FastifyReplyError(400, 'signin required');
 			}
 
 			const twAuth = await getTwAuth();
 			const twCtx = await twAuth!.begin();
 			this.redisClient.set(userToken, JSON.stringify(twCtx));
-			ctx.redirect(twCtx.url);
+			reply.redirect(twCtx.url);
 		});
 
-		router.get('/signin/twitter', async ctx => {
+		fastify.get('/signin/twitter', async (request, reply) => {
 			const twAuth = await getTwAuth();
 			const twCtx = await twAuth!.begin();
 
@@ -115,26 +110,25 @@ export class TwitterServerService {
 
 			this.redisClient.set(sessid, JSON.stringify(twCtx));
 
-			ctx.cookies.set('signin_with_twitter_sid', sessid, {
+			reply.cookies.set('signin_with_twitter_sid', sessid, {
 				path: '/',
 				secure: this.config.url.startsWith('https'),
 				httpOnly: true,
 			});
 
-			ctx.redirect(twCtx.url);
+			reply.redirect(twCtx.url);
 		});
 
-		router.get('/tw/cb', async ctx => {
-			const userToken = this.getUserToken(ctx);
+		fastify.get('/tw/cb', async (request, reply) => {
+			const userToken = this.getUserToken(request);
 
 			const twAuth = await getTwAuth();
 
 			if (userToken == null) {
-				const sessid = ctx.cookies.get('signin_with_twitter_sid');
+				const sessid = request.cookies.get('signin_with_twitter_sid');
 
 				if (sessid == null) {
-					ctx.throw(400, 'invalid session');
-					return;
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
 				const get = new Promise<any>((res, rej) => {
@@ -145,10 +139,9 @@ export class TwitterServerService {
 
 				const twCtx = await get;
 
-				const verifier = ctx.query.oauth_verifier;
+				const verifier = request.query.oauth_verifier;
 				if (!verifier || typeof verifier !== 'string') {
-					ctx.throw(400, 'invalid session');
-					return;
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
 				const result = await twAuth!.done(JSON.parse(twCtx), verifier);
@@ -159,17 +152,15 @@ export class TwitterServerService {
 					.getOne();
 
 				if (link == null) {
-					ctx.throw(404, `@${result.screenName}と連携しているMisskeyアカウントはありませんでした...`);
-					return;
+					throw new FastifyReplyError(404, `@${result.screenName}と連携しているMisskeyアカウントはありませんでした...`);
 				}
 
-				this.signinService.signin(ctx, await this.usersRepository.findOneBy({ id: link.userId }) as ILocalUser, true);
+				return this.signinService.signin(request, reply, await this.usersRepository.findOneBy({ id: link.userId }) as ILocalUser, true);
 			} else {
-				const verifier = ctx.query.oauth_verifier;
+				const verifier = request.query.oauth_verifier;
 
 				if (!verifier || typeof verifier !== 'string') {
-					ctx.throw(400, 'invalid session');
-					return;
+					throw new FastifyReplyError(400, 'invalid session');
 				}
 
 				const get = new Promise<any>((res, rej) => {
@@ -201,29 +192,29 @@ export class TwitterServerService {
 					},
 				});
 
-				ctx.body = `Twitter: @${result.screenName} を、Misskey: @${user.username} に接続しました！`;
-
 				// Publish i updated event
 				this.globalEventService.publishMainStream(user.id, 'meUpdated', await this.userEntityService.pack(user, user, {
 					detail: true,
 					includeSecrets: true,
 				}));
+
+				return `Twitter: @${result.screenName} を、Misskey: @${user.username} に接続しました！`;
 			}
 		});
 
-		return router;
+		done();
 	}
 
-	private getUserToken(ctx: Koa.BaseContext): string | null {
-		return ((ctx.headers['cookie'] ?? '').match(/igi=(\w+)/) ?? [null, null])[1];
+	private getUserToken(request: FastifyRequest): string | null {
+		return ((request.headers['cookie'] ?? '').match(/igi=(\w+)/) ?? [null, null])[1];
 	}
 	
-	private compareOrigin(ctx: Koa.BaseContext): boolean {
+	private compareOrigin(request: FastifyRequest): boolean {
 		function normalizeUrl(url?: string): string {
 			return url ? url.endsWith('/') ? url.substr(0, url.length - 1) : url : '';
 		}
 	
-		const referer = ctx.headers['referer'];
+		const referer = request.headers['referer'];
 	
 		return (normalizeUrl(referer) === normalizeUrl(this.config.url));
 	}
diff --git a/packages/backend/src/server/web/ClientServerService.ts b/packages/backend/src/server/web/ClientServerService.ts
index 8957a91309..4c3f2bfd36 100644
--- a/packages/backend/src/server/web/ClientServerService.ts
+++ b/packages/backend/src/server/web/ClientServerService.ts
@@ -3,16 +3,12 @@ import { fileURLToPath } from 'node:url';
 import { PathOrFileDescriptor, readFileSync } from 'node:fs';
 import { Inject, Injectable } from '@nestjs/common';
 import ms from 'ms';
-import Koa from 'koa';
-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';
+import pug from 'pug';
 import { In, IsNull } from 'typeorm';
+import { FastifyInstance, FastifyPluginOptions, FastifyReply } from 'fastify';
+import fastifyStatic from '@fastify/static';
+import fastifyView from '@fastify/view';
 import type { Config } from '@/config.js';
 import { getNoteSummary } from '@/misc/get-note-summary.js';
 import { DI } from '@/di-symbols.js';
@@ -84,9 +80,10 @@ export class ClientServerService {
 		@Inject('queue:objectStorage') public objectStorageQueue: ObjectStorageQueue,
 		@Inject('queue:webhookDeliver') public webhookDeliverQueue: WebhookDeliverQueue,
 	) {
+		this.createServer = this.createServer.bind(this);
 	}
 
-	private async manifestHandler(ctx: Koa.Context) {
+	private async manifestHandler(reply: FastifyReply) {
 		const res = deepClone(manifest);
 
 		const instance = await this.metaService.fetch(true);
@@ -95,27 +92,26 @@ export class ClientServerService {
 		res.name = instance.name ?? 'Misskey';
 		if (instance.themeColor) res.theme_color = instance.themeColor;
 
-		ctx.set('Cache-Control', 'max-age=300');
-		ctx.body = res;
+		reply.header('Cache-Control', 'max-age=300');
+		return (res);
 	}
 
-	public createApp() {
-		const app = new Koa();
-
+	public createServer(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
+		/* TODO
 		//#region Bull Dashboard
 		const bullBoardPath = '/queue';
 
 		// Authenticate
-		app.use(async (ctx, next) => {
+		app.use(async (request, reply) => {
 			if (ctx.path === bullBoardPath || ctx.path.startsWith(bullBoardPath + '/')) {
 				const token = ctx.cookies.get('token');
 				if (token == null) {
-					ctx.status = 401;
+					reply.code(401);
 					return;
 				}
 				const user = await this.usersRepository.findOneBy({ token });
 				if (user == null || !(user.isAdmin || user.isModerator)) {
-					ctx.status = 403;
+					reply.code(403);
 					return;
 				}
 			}
@@ -140,83 +136,84 @@ export class ClientServerService {
 		serverAdapter.setBasePath(bullBoardPath);
 		app.use(serverAdapter.registerPlugin());
 		//#endregion
+		*/
 
-		// Init renderer
-		app.use(views(_dirname + '/views', {
-			extension: 'pug',
-			options: {
+		fastify.register(fastifyView, {
+			root: _dirname + '/views',
+			engine: {
+				pug: pug,
+			},
+			defaultContext: {
 				version: this.config.version,
 				getClientEntry: () => process.env.NODE_ENV === 'production' ?
 					this.config.clientEntry :
 					JSON.parse(readFileSync(`${_dirname}/../../../../../built/_client_dist_/manifest.json`, 'utf-8'))['src/init.ts'],
 				config: this.config,
 			},
-		}));
-
-		// Serve favicon
-		app.use(favicon(`${_dirname}/../../../assets/favicon.ico`));
-
-		// Common request handler
-		app.use(async (ctx, next) => {
-			// IFrameの中に入れられないようにする
-			ctx.set('X-Frame-Options', 'DENY');
-			await next();
 		});
 
-		// Init router
-		const router = new Router();
+		fastify.addHook('onRequest', (request, reply, done) => {
+			// クリックジャッキング防止のためiFrameの中に入れられないようにする
+			reply.header('X-Frame-Options', 'DENY');
+			done();
+		});
 
 		//#region static assets
 
-		router.get('/static-assets/(.*)', async ctx => {
-			await send(ctx as any, ctx.path.replace('/static-assets/', ''), {
-				root: staticAssets,
-				maxage: ms('7 days'),
-			});
+		fastify.register(fastifyStatic, {
+			root: _dirname,
+			serve: false,
 		});
 
-		router.get('/client-assets/(.*)', async ctx => {
-			await send(ctx as any, ctx.path.replace('/client-assets/', ''), {
-				root: clientAssets,
-				maxage: ms('7 days'),
-			});
+		fastify.register(fastifyStatic, {
+			root: staticAssets,
+			prefix: '/static-assets/',
+			maxAge: ms('7 days'),
+			decorateReply: false,
 		});
 
-		router.get('/assets/(.*)', async ctx => {
-			await send(ctx as any, ctx.path.replace('/assets/', ''), {
-				root: assets,
-				maxage: ms('7 days'),
-			});
+		fastify.register(fastifyStatic, {
+			root: clientAssets,
+			prefix: '/client-assets/',
+			maxAge: ms('7 days'),
+			decorateReply: false,
 		});
 
-		// Apple touch icon
-		router.get('/apple-touch-icon.png', async ctx => {
-			await send(ctx as any, '/apple-touch-icon.png', {
-				root: staticAssets,
-			});
+		fastify.register(fastifyStatic, {
+			root: assets,
+			prefix: '/assets/',
+			maxAge: ms('7 days'),
+			decorateReply: false,
+		});
+
+		fastify.get('/favicon.ico', async (request, reply) => {
+			return reply.sendFile('/favicon.ico', staticAssets);
+		});
+
+		fastify.get('/apple-touch-icon.png', async (request, reply) => {
+			return reply.sendFile('/apple-touch-icon.png', staticAssets);
 		});
 
-		router.get('/twemoji/(.*)', async ctx => {
-			const path = ctx.path.replace('/twemoji/', '');
+		fastify.get<{ Params: { path: string } }>('/twemoji/:path(.*)', async (request, reply) => {
+			const path = request.params.path;
 
 			if (!path.match(/^[0-9a-f-]+\.svg$/)) {
-				ctx.status = 404;
+				reply.code(404);
 				return;
 			}
 
-			ctx.set('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
+			reply.header('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
 
-			await send(ctx as any, path, {
-				root: `${_dirname}/../../../node_modules/@discordapp/twemoji/dist/svg/`,
-				maxage: ms('30 days'),
+			return await reply.sendFile(path, `${_dirname}/../../../node_modules/@discordapp/twemoji/dist/svg/`, {
+				maxAge: ms('30 days'),
 			});
 		});
 
-		router.get('/twemoji-badge/(.*)', async ctx => {
-			const path = ctx.path.replace('/twemoji-badge/', '');
+		fastify.get<{ Params: { path: string } }>('/twemoji-badge/:path(.*)', async (request, reply) => {
+			const path = request.params.path;
 
 			if (!path.match(/^[0-9a-f-]+\.png$/)) {
-				ctx.status = 404;
+				reply.code(404);
 				return;
 			}
 
@@ -249,44 +246,43 @@ export class ClientServerService {
 				.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;
+			reply.header('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
+			reply.header('Cache-Control', 'max-age=2592000');
+			reply.header('Content-Type', 'image/png');
+			return buffer;
 		});
 
 		// ServiceWorker
-		router.get('/sw.js', async ctx => {
-			await send(ctx as any, '/sw.js', {
-				root: swAssets,
-				maxage: ms('10 minutes'),
+		fastify.get('/sw.js', async (request, reply) => {
+			return await reply.sendFile('/sw.js', swAssets, {
+				maxAge: ms('10 minutes'),
 			});
 		});
 
 		// Manifest
-		router.get('/manifest.json', ctx => this.manifestHandler(ctx));
+		fastify.get('/manifest.json', async (request, reply) => await this.manifestHandler(reply));
 
-		router.get('/robots.txt', async ctx => {
-			await send(ctx as any, '/robots.txt', {
-				root: staticAssets,
-			});
+		fastify.get('/robots.txt', async (request, reply) => {
+			return await reply.sendFile('/robots.txt', staticAssets);
 		});
 
 		//#endregion
 
-		// Docs
-		router.get('/api-doc', async ctx => {
-			await send(ctx as any, '/redoc.html', {
-				root: staticAssets,
+		const renderBase = async (reply: FastifyReply) => {
+			const meta = await this.metaService.fetch();
+			reply.header('Cache-Control', 'public, max-age=15');
+			return await reply.view('base', {
+				img: meta.bannerUrl,
+				title: meta.name ?? 'Misskey',
+				instanceName: meta.name ?? 'Misskey',
+				desc: meta.description,
+				icon: meta.iconUrl,
+				themeColor: meta.themeColor,
 			});
-		});
+		};
 
 		// URL preview endpoint
-		router.get('/url', ctx => this.urlPreviewService.handle(ctx));
-
-		router.get('/api.json', async ctx => {
-			ctx.body = genOpenapiSpec();
-		});
+		fastify.get<{ Querystring: { url: string; lang: string; } }>('/url', (request, reply) => this.urlPreviewService.handle(request, reply));
 
 		const getFeed = async (acct: string) => {
 			const { username, host } = Acct.parse(acct);
@@ -300,45 +296,45 @@ export class ClientServerService {
 		};
 
 		// Atom
-		router.get('/@:user.atom', async ctx => {
-			const feed = await getFeed(ctx.params.user);
+		fastify.get<{ Params: { user: string; } }>('/@:user.atom', async (request, reply) => {
+			const feed = await getFeed(request.params.user);
 
 			if (feed) {
-				ctx.set('Content-Type', 'application/atom+xml; charset=utf-8');
-				ctx.body = feed.atom1();
+				reply.header('Content-Type', 'application/atom+xml; charset=utf-8');
+				return feed.atom1();
 			} else {
-				ctx.status = 404;
+				reply.code(404);
 			}
 		});
 
 		// RSS
-		router.get('/@:user.rss', async ctx => {
-			const feed = await getFeed(ctx.params.user);
+		fastify.get<{ Params: { user: string; } }>('/@:user.rss', async (request, reply) => {
+			const feed = await getFeed(request.params.user);
 
 			if (feed) {
-				ctx.set('Content-Type', 'application/rss+xml; charset=utf-8');
-				ctx.body = feed.rss2();
+				reply.header('Content-Type', 'application/rss+xml; charset=utf-8');
+				return feed.rss2();
 			} else {
-				ctx.status = 404;
+				reply.code(404);
 			}
 		});
 
 		// JSON
-		router.get('/@:user.json', async ctx => {
-			const feed = await getFeed(ctx.params.user);
+		fastify.get<{ Params: { user: string; } }>('/@:user.json', async (request, reply) => {
+			const feed = await getFeed(request.params.user);
 
 			if (feed) {
-				ctx.set('Content-Type', 'application/json; charset=utf-8');
-				ctx.body = feed.json1();
+				reply.header('Content-Type', 'application/json; charset=utf-8');
+				return feed.json1();
 			} else {
-				ctx.status = 404;
+				reply.code(404);
 			}
 		});
 
 		//#region SSR (for crawlers)
 		// User
-		router.get(['/@:user', '/@:user/:sub'], async (ctx, next) => {
-			const { username, host } = Acct.parse(ctx.params.user);
+		fastify.get<{ Params: { user: string; sub?: string; } }>('/@:user/:sub?', async (request, reply) => {
+			const { username, host } = Acct.parse(request.params.user);
 			const user = await this.usersRepository.findOneBy({
 				usernameLower: username.toLowerCase(),
 				host: host ?? IsNull(),
@@ -354,41 +350,41 @@ export class ClientServerService {
 						.map(field => field.value)
 					: [];
 
-				await ctx.render('user', {
+				reply.header('Cache-Control', 'public, max-age=15');
+				return await reply.view('user', {
 					user, profile, me,
 					avatarUrl: await this.userEntityService.getAvatarUrl(user),
-					sub: ctx.params.sub,
+					sub: request.params.sub,
 					instanceName: meta.name ?? 'Misskey',
 					icon: meta.iconUrl,
 					themeColor: meta.themeColor,
 				});
-				ctx.set('Cache-Control', 'public, max-age=15');
 			} else {
 				// リモートユーザーなので
 				// モデレータがAPI経由で参照可能にするために404にはしない
-				await next();
+				return await renderBase(reply);
 			}
 		});
 
-		router.get('/users/:user', async ctx => {
+		fastify.get<{ Params: { user: string; } }>('/users/:user', async (request, reply) => {
 			const user = await this.usersRepository.findOneBy({
-				id: ctx.params.user,
+				id: request.params.user,
 				host: IsNull(),
 				isSuspended: false,
 			});
 
 			if (user == null) {
-				ctx.status = 404;
+				reply.code(404);
 				return;
 			}
 
-			ctx.redirect(`/@${user.username}${ user.host == null ? '' : '@' + user.host}`);
+			reply.redirect(`/@${user.username}${ user.host == null ? '' : '@' + user.host}`);
 		});
 
 		// Note
-		router.get('/notes/:note', async (ctx, next) => {
+		fastify.get<{ Params: { note: string; } }>('/notes/:note', async (request, reply) => {
 			const note = await this.notesRepository.findOneBy({
-				id: ctx.params.note,
+				id: request.params.note,
 				visibility: In(['public', 'home']),
 			});
 
@@ -396,7 +392,8 @@ export class ClientServerService {
 				const _note = await this.noteEntityService.pack(note);
 				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: note.userId });
 				const meta = await this.metaService.fetch();
-				await ctx.render('note', {
+				reply.header('Cache-Control', 'public, max-age=15');
+				return await reply.view('note', {
 					note: _note,
 					profile,
 					avatarUrl: await this.userEntityService.getAvatarUrl(await this.usersRepository.findOneByOrFail({ id: note.userId })),
@@ -406,18 +403,14 @@ export class ClientServerService {
 					icon: meta.iconUrl,
 					themeColor: meta.themeColor,
 				});
-
-				ctx.set('Cache-Control', 'public, max-age=15');
-
-				return;
+			} else {
+				return await renderBase(reply);
 			}
-
-			await next();
 		});
 
 		// Page
-		router.get('/@:user/pages/:page', async (ctx, next) => {
-			const { username, host } = Acct.parse(ctx.params.user);
+		fastify.get<{ Params: { user: string; page: string; } }>('/@:user/pages/:page', async (request, reply) => {
+			const { username, host } = Acct.parse(request.params.user);
 			const user = await this.usersRepository.findOneBy({
 				usernameLower: username.toLowerCase(),
 				host: host ?? IsNull(),
@@ -426,7 +419,7 @@ export class ClientServerService {
 			if (user == null) return;
 
 			const page = await this.pagesRepository.findOneBy({
-				name: ctx.params.page,
+				name: request.params.page,
 				userId: user.id,
 			});
 
@@ -434,7 +427,12 @@ export class ClientServerService {
 				const _page = await this.pageEntityService.pack(page);
 				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: page.userId });
 				const meta = await this.metaService.fetch();
-				await ctx.render('page', {
+				if (['public'].includes(page.visibility)) {
+					reply.header('Cache-Control', 'public, max-age=15');
+				} else {
+					reply.header('Cache-Control', 'private, max-age=0, must-revalidate');
+				}
+				return await reply.view('page', {
 					page: _page,
 					profile,
 					avatarUrl: await this.userEntityService.getAvatarUrl(await this.usersRepository.findOneByOrFail({ id: page.userId })),
@@ -442,31 +440,24 @@ export class ClientServerService {
 					icon: meta.iconUrl,
 					themeColor: meta.themeColor,
 				});
-
-				if (['public'].includes(page.visibility)) {
-					ctx.set('Cache-Control', 'public, max-age=15');
-				} else {
-					ctx.set('Cache-Control', 'private, max-age=0, must-revalidate');
-				}
-
-				return;
+			} else {
+				return await renderBase(reply);
 			}
-
-			await next();
 		});
 
 		// Clip
 		// TODO: 非publicなclipのハンドリング
-		router.get('/clips/:clip', async (ctx, next) => {
+		fastify.get<{ Params: { clip: string; } }>('/clips/:clip', async (request, reply) => {
 			const clip = await this.clipsRepository.findOneBy({
-				id: ctx.params.clip,
+				id: request.params.clip,
 			});
 
 			if (clip) {
 				const _clip = await this.clipEntityService.pack(clip);
 				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: clip.userId });
 				const meta = await this.metaService.fetch();
-				await ctx.render('clip', {
+				reply.header('Cache-Control', 'public, max-age=15');
+				return await reply.view('clip', {
 					clip: _clip,
 					profile,
 					avatarUrl: await this.userEntityService.getAvatarUrl(await this.usersRepository.findOneByOrFail({ id: clip.userId })),
@@ -474,24 +465,21 @@ export class ClientServerService {
 					icon: meta.iconUrl,
 					themeColor: meta.themeColor,
 				});
-
-				ctx.set('Cache-Control', 'public, max-age=15');
-
-				return;
+			} else {
+				return await renderBase(reply);
 			}
-
-			await next();
 		});
 
 		// Gallery post
-		router.get('/gallery/:post', async (ctx, next) => {
-			const post = await this.galleryPostsRepository.findOneBy({ id: ctx.params.post });
+		fastify.get<{ Params: { post: string; } }>('/gallery/:post', async (request, reply) => {
+			const post = await this.galleryPostsRepository.findOneBy({ id: request.params.post });
 
 			if (post) {
 				const _post = await this.galleryPostEntityService.pack(post);
 				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: post.userId });
 				const meta = await this.metaService.fetch();
-				await ctx.render('gallery-post', {
+				reply.header('Cache-Control', 'public, max-age=15');
+				return await reply.view('gallery-post', {
 					post: _post,
 					profile,
 					avatarUrl: await this.userEntityService.getAvatarUrl(await this.usersRepository.findOneByOrFail({ id: post.userId })),
@@ -499,46 +487,39 @@ export class ClientServerService {
 					icon: meta.iconUrl,
 					themeColor: meta.themeColor,
 				});
-
-				ctx.set('Cache-Control', 'public, max-age=15');
-
-				return;
+			} else {
+				return await renderBase(reply);
 			}
-
-			await next();
 		});
 
 		// Channel
-		router.get('/channels/:channel', async (ctx, next) => {
+		fastify.get<{ Params: { channel: string; } }>('/channels/:channel', async (request, reply) => {
 			const channel = await this.channelsRepository.findOneBy({
-				id: ctx.params.channel,
+				id: request.params.channel,
 			});
 
 			if (channel) {
 				const _channel = await this.channelEntityService.pack(channel);
 				const meta = await this.metaService.fetch();
-				await ctx.render('channel', {
+				reply.header('Cache-Control', 'public, max-age=15');
+				return await reply.view('channel', {
 					channel: _channel,
 					instanceName: meta.name ?? 'Misskey',
 					icon: meta.iconUrl,
 					themeColor: meta.themeColor,
 				});
-
-				ctx.set('Cache-Control', 'public, max-age=15');
-
-				return;
+			} else {
+				return await renderBase(reply);
 			}
-
-			await next();
 		});
 		//#endregion
 
-		router.get('/_info_card_', async ctx => {
+		fastify.get('/_info_card_', async (request, reply) => {
 			const meta = await this.metaService.fetch(true);
 
-			ctx.remove('X-Frame-Options');
+			reply.removeHeader('X-Frame-Options');
 
-			await ctx.render('info-card', {
+			return await reply.view('info-card', {
 				version: this.config.version,
 				host: this.config.host,
 				meta: meta,
@@ -547,14 +528,14 @@ export class ClientServerService {
 			});
 		});
 
-		router.get('/bios', async ctx => {
-			await ctx.render('bios', {
+		fastify.get('/bios', async (request, reply) => {
+			return await reply.view('bios', {
 				version: this.config.version,
 			});
 		});
 
-		router.get('/cli', async ctx => {
-			await ctx.render('cli', {
+		fastify.get('/cli', async (request, reply) => {
+			return await reply.view('cli', {
 				version: this.config.version,
 			});
 		});
@@ -562,33 +543,21 @@ export class ClientServerService {
 		const override = (source: string, target: string, depth = 0) =>
 			[, ...target.split('/').filter(x => x), ...source.split('/').filter(x => x).splice(depth)].join('/');
 
-		router.get('/flush', async ctx => {
-			await ctx.render('flush');
+		fastify.get('/flush', async (request, reply) => {
+			return await reply.view('flush');
 		});
 
 		// streamingに非WebSocketリクエストが来た場合にbase htmlをキャシュ付きで返すと、Proxy等でそのパスがキャッシュされておかしくなる
-		router.get('/streaming', async ctx => {
-			ctx.status = 503;
-			ctx.set('Cache-Control', 'private, max-age=0');
+		fastify.get('/streaming', async (request, reply) => {
+			reply.code(503);
+			reply.header('Cache-Control', 'private, max-age=0');
 		});
 
 		// Render base html for all requests
-		router.get('(.*)', async ctx => {
-			const meta = await this.metaService.fetch();
-			await ctx.render('base', {
-				img: meta.bannerUrl,
-				title: meta.name ?? 'Misskey',
-				instanceName: meta.name ?? 'Misskey',
-				desc: meta.description,
-				icon: meta.iconUrl,
-				themeColor: meta.themeColor,
-			});
-			ctx.set('Cache-Control', 'public, max-age=15');
+		fastify.get('*', async (request, reply) => {
+			return await renderBase(reply);
 		});
 
-		// Register router
-		app.use(router.routes());
-
-		return app;
+		done();
 	}
 }
diff --git a/packages/backend/src/server/web/UrlPreviewService.ts b/packages/backend/src/server/web/UrlPreviewService.ts
index f5dddd2db7..69f52cc2f2 100644
--- a/packages/backend/src/server/web/UrlPreviewService.ts
+++ b/packages/backend/src/server/web/UrlPreviewService.ts
@@ -1,5 +1,6 @@
 import { Inject, Injectable } from '@nestjs/common';
 import summaly from 'summaly';
+import { FastifyRequest, FastifyReply } from 'fastify';
 import { DI } from '@/di-symbols.js';
 import type { UsersRepository } from '@/models/index.js';
 import type { Config } from '@/config.js';
@@ -8,7 +9,6 @@ import { HttpRequestService } from '@/core/HttpRequestService.js';
 import type Logger from '@/logger.js';
 import { query } from '@/misc/prelude/url.js';
 import { LoggerService } from '@/core/LoggerService.js';
-import type Koa from 'koa';
 
 @Injectable()
 export class UrlPreviewService {
@@ -39,16 +39,19 @@ export class UrlPreviewService {
 			: null;
 	}
 
-	public async handle(ctx: Koa.Context) {
-		const url = ctx.query.url;
+	public async handle(
+		request: FastifyRequest<{ Querystring: { url: string; lang: string; } }>,
+		reply: FastifyReply,
+	) {
+		const url = request.query.url;
 		if (typeof url !== 'string') {
-			ctx.status = 400;
+			reply.code(400);
 			return;
 		}
 	
-		const lang = ctx.query.lang;
+		const lang = request.query.lang;
 		if (Array.isArray(lang)) {
-			ctx.status = 400;
+			reply.code(400);
 			return;
 		}
 	
@@ -73,14 +76,14 @@ export class UrlPreviewService {
 			summary.thumbnail = this.wrap(summary.thumbnail);
 	
 			// Cache 7days
-			ctx.set('Cache-Control', 'max-age=604800, immutable');
+			reply.header('Cache-Control', 'max-age=604800, immutable');
 	
-			ctx.body = summary;
+			return summary;
 		} catch (err) {
 			this.logger.warn(`Failed to get preview of ${url}: ${err}`);
-			ctx.status = 200;
-			ctx.set('Cache-Control', 'max-age=86400, immutable');
-			ctx.body = '{}';
+			reply.code(200);
+			reply.header('Cache-Control', 'max-age=86400, immutable');
+			return {};
 		}
 	}
 }
diff --git a/packages/backend/src/server/web/bios.js b/packages/backend/src/server/web/bios.js
index d06dee801a..c2ce5c3814 100644
--- a/packages/backend/src/server/web/bios.js
+++ b/packages/backend/src/server/web/bios.js
@@ -10,7 +10,7 @@ window.onload = async () => {
 			if (i) data.i = i;
 	
 			// Send request
-			fetch(endpoint.indexOf('://') > -1 ? endpoint : `/api/${endpoint}`, {
+			window.fetch(endpoint.indexOf('://') > -1 ? endpoint : `/api/${endpoint}`, {
 				method: 'POST',
 				body: JSON.stringify(data),
 				credentials: 'omit',
diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index 2aef689d3f..ffd8b8941c 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -42,7 +42,7 @@
 			}
 		}
 
-		const res = await fetch(`/assets/locales/${lang}.${v}.json`);
+		const res = await window.fetch(`/assets/locales/${lang}.${v}.json`);
 		if (res.status === 200) {
 			localStorage.setItem('lang', lang);
 			localStorage.setItem('locale', await res.text());
@@ -290,9 +290,13 @@
 	// eslint-disable-next-line no-inner-declarations
 	async function checkUpdate() {
 		try {
-			const res = await fetch('/api/meta', {
+			const res = await window.fetch('/api/meta', {
 				method: 'POST',
-				cache: 'no-cache'
+				cache: 'no-cache',
+				body: '{}',
+				headers: {
+					'Content-Type': 'application/json',
+				},
 			});
 
 			const meta = await res.json();
diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts
index 10257b841f..e9c29d6b0d 100644
--- a/packages/client/src/account.ts
+++ b/packages/client/src/account.ts
@@ -33,12 +33,15 @@ export async function signout() {
 			const registration = await navigator.serviceWorker.ready;
 			const push = await registration.pushManager.getSubscription();
 			if (push) {
-				await fetch(`${apiUrl}/sw/unregister`, {
+				await window.fetch(`${apiUrl}/sw/unregister`, {
 					method: 'POST',
 					body: JSON.stringify({
 						i: $i.token,
 						endpoint: push.endpoint,
 					}),
+					headers: {
+						'Content-Type': 'application/json',
+					},
 				});
 			}
 		}
@@ -80,32 +83,35 @@ export async function removeAccount(id: Account['id']) {
 function fetchAccount(token: string): Promise<Account> {
 	return new Promise((done, fail) => {
 		// Fetch user
-		fetch(`${apiUrl}/i`, {
+		window.fetch(`${apiUrl}/i`, {
 			method: 'POST',
 			body: JSON.stringify({
 				i: token,
 			}),
+			headers: {
+				'Content-Type': 'application/json',
+			},
 		})
-		.then(res => res.json())
-		.then(res => {
-			if (res.error) {
-				if (res.error.id === 'a8c724b3-6e9c-4b46-b1a8-bc3ed6258370') {
-					showSuspendedDialog().then(() => {
-						signout();
-					});
+			.then(res => res.json())
+			.then(res => {
+				if (res.error) {
+					if (res.error.id === 'a8c724b3-6e9c-4b46-b1a8-bc3ed6258370') {
+						showSuspendedDialog().then(() => {
+							signout();
+						});
+					} else {
+						alert({
+							type: 'error',
+							title: i18n.ts.failedToFetchAccountInformation,
+							text: JSON.stringify(res.error),
+						});
+					}
 				} else {
-					alert({
-						type: 'error',
-						title: i18n.ts.failedToFetchAccountInformation,
-						text: JSON.stringify(res.error),
-					});
+					res.token = token;
+					done(res);
 				}
-			} else {
-				res.token = token;
-				done(res);
-			}
-		})
-		.catch(fail);
+			})
+			.catch(fail);
 	});
 }
 
diff --git a/packages/client/src/components/MkCropperDialog.vue b/packages/client/src/components/MkCropperDialog.vue
index 4b05a51252..ae18160dea 100644
--- a/packages/client/src/components/MkCropperDialog.vue
+++ b/packages/client/src/components/MkCropperDialog.vue
@@ -66,7 +66,7 @@ const ok = async () => {
 				formData.append('folderId', defaultStore.state.uploadFolder);
 			}
 
-			fetch(apiUrl + '/drive/files/create', {
+			window.fetch(apiUrl + '/drive/files/create', {
 				method: 'POST',
 				body: formData,
 			})
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index af27f644ed..8fd1ce133d 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -68,7 +68,7 @@ let player = $ref({
 let playerEnabled = $ref(false);
 let tweetId = $ref<string | null>(null);
 let tweetExpanded = $ref(props.detail);
-const embedId = `embed${Math.random().toString().replace(/\D/,'')}`;
+const embedId = `embed${Math.random().toString().replace(/\D/, '')}`;
 let tweetHeight = $ref(150);
 
 const requestUrl = new URL(props.url);
@@ -86,7 +86,7 @@ const requestLang = (lang || 'ja-JP').replace('ja-KS', 'ja-JP');
 
 requestUrl.hash = '';
 
-fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
+window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
 	res.json().then(info => {
 		if (info.url == null) return;
 		title = info.title;
diff --git a/packages/client/src/components/MkYoutubePlayer.vue b/packages/client/src/components/MkYoutubePlayer.vue
index a6840ce647..815dc82a27 100644
--- a/packages/client/src/components/MkYoutubePlayer.vue
+++ b/packages/client/src/components/MkYoutubePlayer.vue
@@ -39,7 +39,7 @@ const requestLang = (lang ?? 'ja-JP').replace('ja-KS', 'ja-JP');
 
 const ytFetch = (): void => {
 	fetching = true;
-	fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
+	window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
 		res.json().then(info => {
 			if (info.url == null) return;
 			title = info.title;
diff --git a/packages/client/src/components/page/page.post.vue b/packages/client/src/components/page/page.post.vue
index f655196359..954c7675bd 100644
--- a/packages/client/src/components/page/page.post.vue
+++ b/packages/client/src/components/page/page.post.vue
@@ -25,12 +25,12 @@ export default defineComponent({
 	props: {
 		block: {
 			type: Object as PropType<PostBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	data() {
 		return {
@@ -44,8 +44,8 @@ export default defineComponent({
 			handler() {
 				this.text = this.hpml.interpolate(this.block.text);
 			},
-			deep: true
-		}
+			deep: true,
+		},
 	},
 	methods: {
 		upload() {
@@ -59,14 +59,14 @@ export default defineComponent({
 						formData.append('folderId', this.$store.state.uploadFolder);
 					}
 
-					fetch(apiUrl + '/drive/files/create', {
+					window.fetch(apiUrl + '/drive/files/create', {
 						method: 'POST',
 						body: formData,
 					})
-					.then(response => response.json())
-					.then(f => {
-						ok(f);
-					});
+						.then(response => response.json())
+						.then(f => {
+							ok(f);
+						});
 				});
 			});
 			os.promiseDialog(promise);
@@ -81,8 +81,8 @@ export default defineComponent({
 			}).then(() => {
 				this.posted = true;
 			});
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index 515fc47819..7e57dcb4af 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -29,11 +29,14 @@ export const api = ((endpoint: string, data: Record<string, any> = {}, token?: s
 		if (token !== undefined) (data as any).i = token;
 
 		// Send request
-		fetch(endpoint.indexOf('://') > -1 ? endpoint : `${apiUrl}/${endpoint}`, {
+		window.fetch(endpoint.indexOf('://') > -1 ? endpoint : `${apiUrl}/${endpoint}`, {
 			method: 'POST',
 			body: JSON.stringify(data),
 			credentials: 'omit',
 			cache: 'no-cache',
+			headers: {
+				'Content-Type': 'application/json',
+			},
 		}).then(async (res) => {
 			const body = res.status === 204 ? null : await res.json();
 
@@ -63,7 +66,7 @@ export const apiGet = ((endpoint: string, data: Record<string, any> = {}) => {
 
 	const promise = new Promise((resolve, reject) => {
 		// Send request
-		fetch(`${apiUrl}/${endpoint}?${query}`, {
+		window.fetch(`${apiUrl}/${endpoint}?${query}`, {
 			method: 'GET',
 			credentials: 'omit',
 			cache: 'default',
diff --git a/packages/client/src/ui/_common_/statusbar-rss.vue b/packages/client/src/ui/_common_/statusbar-rss.vue
index e75e13bb48..e7f88e4984 100644
--- a/packages/client/src/ui/_common_/statusbar-rss.vue
+++ b/packages/client/src/ui/_common_/statusbar-rss.vue
@@ -37,7 +37,7 @@ const fetching = ref(true);
 let key = $ref(0);
 
 const tick = () => {
-	fetch(`/api/fetch-rss?url=${props.url}`, {}).then(res => {
+	window.fetch(`/api/fetch-rss?url=${props.url}`, {}).then(res => {
 		res.json().then(feed => {
 			if (props.shuffle) {
 				shuffle(feed.items);
diff --git a/packages/client/src/widgets/rss-ticker.vue b/packages/client/src/widgets/rss-ticker.vue
index 58c16983c8..82a2f59ae9 100644
--- a/packages/client/src/widgets/rss-ticker.vue
+++ b/packages/client/src/widgets/rss-ticker.vue
@@ -83,7 +83,7 @@ const fetching = ref(true);
 let key = $ref(0);
 
 const tick = () => {
-	fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then(res => {
+	window.fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then(res => {
 		res.json().then(feed => {
 			if (widgetProps.shuffle) {
 				shuffle(feed.items);
diff --git a/packages/client/src/widgets/rss.vue b/packages/client/src/widgets/rss.vue
index 3258b6c028..f392a8249a 100644
--- a/packages/client/src/widgets/rss.vue
+++ b/packages/client/src/widgets/rss.vue
@@ -51,7 +51,7 @@ const items = ref([]);
 const fetching = ref(true);
 
 const tick = () => {
-	fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then(res => {
+	window.fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then(res => {
 		res.json().then(feed => {
 			items.value = feed.items;
 			fetching.value = false;
diff --git a/yarn.lock b/yarn.lock
index 61d81c0017..06bf9d8fd1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -417,40 +417,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@bull-board/api@npm:4.3.1":
-  version: 4.3.1
-  resolution: "@bull-board/api@npm:4.3.1"
-  dependencies:
-    redis-info: ^3.0.8
-  checksum: 05113b1e888e79f8efecdffdc1043455fa6f8714c55a1e973d8a0a7f60cf574b00487b5b86324523ff91641784a55ff14c469edc8dd985295dcfc27cf55b4c4a
-  languageName: node
-  linkType: hard
-
-"@bull-board/koa@npm:4.3.1":
-  version: 4.3.1
-  resolution: "@bull-board/koa@npm:4.3.1"
-  dependencies:
-    "@bull-board/api": 4.3.1
-    "@bull-board/ui": 4.3.1
-    ejs: ^3.1.7
-    koa: ^2.13.1
-    koa-mount: ^4.0.0
-    koa-router: ^10.0.0
-    koa-static: ^5.0.0
-    koa-views: ^7.0.1
-  checksum: 08f198cdaaa28fe8e254288a0d4c13e9cd481a97e40e5e9152fb9094cbac54459e86901da5d90c46fe2dccf310f78a50ef8763bf5980b98d33180299c64fbc3f
-  languageName: node
-  linkType: hard
-
-"@bull-board/ui@npm:4.3.1":
-  version: 4.3.1
-  resolution: "@bull-board/ui@npm:4.3.1"
-  dependencies:
-    "@bull-board/api": 4.3.1
-  checksum: 7bc4787ba8f9e3dda5cb580b4374872bc7b0870a08a504cfc2f380a39dda164ae71518e7b1921e53ff8abc4224c0861504b26b63510b6c9c9d23d647bdab54b2
-  languageName: node
-  linkType: hard
-
 "@chainsafe/is-ip@npm:^2.0.1":
   version: 2.0.1
   resolution: "@chainsafe/is-ip@npm:2.0.1"
@@ -654,18 +620,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@elastic/elasticsearch@npm:7.17.0":
-  version: 7.17.0
-  resolution: "@elastic/elasticsearch@npm:7.17.0"
-  dependencies:
-    debug: ^4.3.1
-    hpagent: ^0.1.1
-    ms: ^2.1.3
-    secure-json-parse: ^2.4.0
-  checksum: 08113bcb14203c5700e6575cb720aa32f5573a1776e13b78bf101ffeae46308c3664b94f16f7e2c5ec26e14c459d8d1491e234940e635cddfe3ee61a52fb51f9
-  languageName: node
-  linkType: hard
-
 "@esbuild/android-arm@npm:0.15.16":
   version: 0.15.16
   resolution: "@esbuild/android-arm@npm:0.15.16"
@@ -704,6 +658,117 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fastify/accept-negotiator@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@fastify/accept-negotiator@npm:1.0.0"
+  checksum: 9b6be6bfd0f1475e4d06ffbd6359d7cf70841cc8e37abe6fe32f2e0e8185da6077da0d5c6610ade356ed3d4af4d3a642094b4861b123607987491bef2a384957
+  languageName: node
+  linkType: hard
+
+"@fastify/accepts@npm:4.0.1":
+  version: 4.0.1
+  resolution: "@fastify/accepts@npm:4.0.1"
+  dependencies:
+    accepts: ^1.3.5
+    fastify-plugin: ^4.0.0
+  checksum: bd14a998dececc66cbfc331aac6e9063c19baa8915e44288a621ef13737df5ca11e83f4be5767951ed6b8ddded2b2a40c19ec630c68a3ac9c299afe50d5e4153
+  languageName: node
+  linkType: hard
+
+"@fastify/ajv-compiler@npm:^3.3.1":
+  version: 3.4.0
+  resolution: "@fastify/ajv-compiler@npm:3.4.0"
+  dependencies:
+    ajv: ^8.11.0
+    ajv-formats: ^2.1.1
+    fast-uri: ^2.0.0
+  checksum: 3e03f9673f0f13ce343bfb4a84f4e908d12bd775a2b82ff4bdf09ac062d09c6b89b62df7f96fab970dd61f77a9e43be2908eb28cd59e27654b25931444bde825
+  languageName: node
+  linkType: hard
+
+"@fastify/busboy@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "@fastify/busboy@npm:1.1.0"
+  dependencies:
+    text-decoding: ^1.0.0
+  checksum: 8ef01870c5e2ddae787fb8775c844b26e54c366732565287d5f7fb7d8c3c746bd4f0ad8f8695f4006e4b63af2fdd9a206ca74b2bc6c5d3c96d88abc07daa16f5
+  languageName: node
+  linkType: hard
+
+"@fastify/cors@npm:8.2.0":
+  version: 8.2.0
+  resolution: "@fastify/cors@npm:8.2.0"
+  dependencies:
+    fastify-plugin: ^4.0.0
+    mnemonist: 0.39.5
+  checksum: b2e30602d3aad7b2170a153b60e2b0dba8ad7df67ac3b7918374d202097f60b8a252baeafbf37f4323190fa87170960a3162aa6120540f825ae7750414c3feea
+  languageName: node
+  linkType: hard
+
+"@fastify/deepmerge@npm:^1.0.0":
+  version: 1.2.0
+  resolution: "@fastify/deepmerge@npm:1.2.0"
+  checksum: 40f39aa859dbf90cf5cd09b0a06e86783e68f8046baad51f79e42c77db4c6ffe436e130103ade6731d81df3916818d1437ad88d1a6c53c56e809aa1a910f4c9a
+  languageName: node
+  linkType: hard
+
+"@fastify/error@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@fastify/error@npm:3.0.0"
+  checksum: d9ea16db2d17e4d54f34ad2daf7bbd223fd3fd5682e55406f61dae66616a2fd79fa7585736e6e3b46e9dc60da6e96018f92ebb2f87fd100b4e8ad27308aa9c74
+  languageName: node
+  linkType: hard
+
+"@fastify/fast-json-stringify-compiler@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "@fastify/fast-json-stringify-compiler@npm:4.1.0"
+  dependencies:
+    fast-json-stringify: ^5.0.0
+  checksum: 5f848f606e23b04904189bf98c44ccae70c4ceaa793d619d3804ba4a9969d4b9846ceef4ac8a53d536a1cf8f1d3c30a4602850a44fc62bdc1893e341442b6e4f
+  languageName: node
+  linkType: hard
+
+"@fastify/multipart@npm:7.3.0":
+  version: 7.3.0
+  resolution: "@fastify/multipart@npm:7.3.0"
+  dependencies:
+    "@fastify/busboy": ^1.0.0
+    "@fastify/deepmerge": ^1.0.0
+    "@fastify/error": ^3.0.0
+    end-of-stream: ^1.4.4
+    fastify-plugin: ^4.0.0
+    hexoid: ^1.0.0
+    secure-json-parse: ^2.4.0
+    stream-wormhole: ^1.1.0
+  checksum: 192fc4f0892c34d342a3673c6522e13c0987747c4972b52ea48ca7978ea54b5a892d4594778b643dc35f37f429496b13a4e244d8c7eef60a852fadb52144fcbe
+  languageName: node
+  linkType: hard
+
+"@fastify/static@npm:6.5.0":
+  version: 6.5.0
+  resolution: "@fastify/static@npm:6.5.0"
+  dependencies:
+    "@fastify/accept-negotiator": ^1.0.0
+    content-disposition: ^0.5.3
+    fastify-plugin: ^4.0.0
+    glob: ^8.0.1
+    p-limit: ^3.1.0
+    readable-stream: ^4.0.0
+    send: ^0.18.0
+  checksum: 31ef10916847c51fb4c360860f56acee1cbd7a896b66a05440d4eff70473c5b4cdf908b4719a5a22a876617fdc4a4e0fe3673bd5b40c9d61260a90e08abc1d3d
+  languageName: node
+  linkType: hard
+
+"@fastify/view@npm:7.1.2":
+  version: 7.1.2
+  resolution: "@fastify/view@npm:7.1.2"
+  dependencies:
+    fastify-plugin: ^4.0.0
+    hashlru: ^2.3.0
+  checksum: 0d5c960dc4241ca09faf4b990aabf6ccdac27348da2e75682a738d5665973a133fbf6907309bbf002f5cb36d55240b698283eac372f521cf2a482a9c80ff788d
+  languageName: node
+  linkType: hard
+
 "@fortawesome/fontawesome-free@npm:6.1.2":
   version: 6.1.2
   resolution: "@fortawesome/fontawesome-free@npm:6.1.2"
@@ -1110,37 +1175,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@koa/cors@npm:3.3.0":
-  version: 3.3.0
-  resolution: "@koa/cors@npm:3.3.0"
-  dependencies:
-    vary: ^1.1.2
-  checksum: bb49c680e0d151aec1b19c24c14d61b65f430eb379e63d83789602cc7d8e52706ebcd74867cdb60b1d50ddb6f3d59be04e1c46328fae5721aeaf50e0d4fc2d28
-  languageName: node
-  linkType: hard
-
-"@koa/multer@npm:3.0.0":
-  version: 3.0.0
-  resolution: "@koa/multer@npm:3.0.0"
-  peerDependencies:
-    multer: "*"
-  checksum: 7671ffed2ab23224b30b4378b44b2db1749d36f82216b0b67ae349fd6fe86b40c4a72c98412499e059f69916b454fba152451f140adf288866462ba765eb6c32
-  languageName: node
-  linkType: hard
-
-"@koa/router@npm:9.0.1":
-  version: 9.0.1
-  resolution: "@koa/router@npm:9.0.1"
-  dependencies:
-    debug: ^4.1.1
-    http-errors: ^1.7.3
-    koa-compose: ^4.1.0
-    methods: ^1.1.2
-    path-to-regexp: ^6.1.0
-  checksum: 0013bfd26c1acd44c772a08adae5edac8168c662fd2a06c7e174e2a899806908e73e077234c26888fad3ddc54478b27e5b8c7f5db41cd2e27f3b837c54b2f9b8
-  languageName: node
-  linkType: hard
-
 "@mapbox/node-pre-gyp@npm:1.0.9":
   version: 1.0.9
   resolution: "@mapbox/node-pre-gyp@npm:1.0.9"
@@ -1894,7 +1928,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/accepts@npm:*":
+"@types/accepts@npm:1.3.5":
   version: 1.3.5
   resolution: "@types/accepts@npm:1.3.5"
   dependencies:
@@ -1960,16 +1994,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/body-parser@npm:*":
-  version: 1.19.2
-  resolution: "@types/body-parser@npm:1.19.2"
-  dependencies:
-    "@types/connect": "*"
-    "@types/node": "*"
-  checksum: e17840c7d747a549f00aebe72c89313d09fbc4b632b949b2470c5cb3b1cb73863901ae84d9335b567a79ec5efcfb8a28ff8e3f36bc8748a9686756b6d5681f40
-  languageName: node
-  linkType: hard
-
 "@types/bull@npm:4.10.0":
   version: 4.10.0
   resolution: "@types/bull@npm:4.10.0"
@@ -2000,34 +2024,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/connect@npm:*":
-  version: 3.4.35
-  resolution: "@types/connect@npm:3.4.35"
-  dependencies:
-    "@types/node": "*"
-  checksum: fe81351470f2d3165e8b12ce33542eef89ea893e36dd62e8f7d72566dfb7e448376ae962f9f3ea888547ce8b55a40020ca0e01d637fab5d99567673084542641
-  languageName: node
-  linkType: hard
-
-"@types/content-disposition@npm:*":
-  version: 0.5.5
-  resolution: "@types/content-disposition@npm:0.5.5"
-  checksum: fdf7379db1d509990bcf9a21d85f05aad878596f28b1418f9179f6436cb22513262c670ce88c6055054a7f5804a9303eeacb70aa59a5e11ffdc1434559db9692
-  languageName: node
-  linkType: hard
-
-"@types/cookies@npm:*":
-  version: 0.7.7
-  resolution: "@types/cookies@npm:0.7.7"
-  dependencies:
-    "@types/connect": "*"
-    "@types/express": "*"
-    "@types/keygrip": "*"
-    "@types/node": "*"
-  checksum: d3759efc1182cb0651808570ae13638677b67b0ea724eef7b174e58ffe6ea044b62c7c2715e532f76f88fce4dd8101ed32ac6fbb73226db654017924e8a2a1e6
-  languageName: node
-  linkType: hard
-
 "@types/disposable-email-domains@npm:^1.0.1":
   version: 1.0.2
   resolution: "@types/disposable-email-domains@npm:1.0.2"
@@ -2056,29 +2052,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/express-serve-static-core@npm:^4.17.18":
-  version: 4.17.31
-  resolution: "@types/express-serve-static-core@npm:4.17.31"
-  dependencies:
-    "@types/node": "*"
-    "@types/qs": "*"
-    "@types/range-parser": "*"
-  checksum: 009bfbe1070837454a1056aa710d0390ee5fb8c05dfe5a1691cc3e2ca88dc256f80e1ca27cb51a978681631d2f6431bfc9ec352ea46dd0c6eb183d0170bde5df
-  languageName: node
-  linkType: hard
-
-"@types/express@npm:*":
-  version: 4.17.14
-  resolution: "@types/express@npm:4.17.14"
-  dependencies:
-    "@types/body-parser": "*"
-    "@types/express-serve-static-core": ^4.17.18
-    "@types/qs": "*"
-    "@types/serve-static": "*"
-  checksum: 15c1af46d02de834e4a225eccaa9d85c0370fdbb3ed4e1bc2d323d24872309961542b993ae236335aeb3e278630224a6ea002078d39e651d78a3b0356b1eaa79
-  languageName: node
-  linkType: hard
-
 "@types/fluent-ffmpeg@npm:2.1.20":
   version: 2.1.20
   resolution: "@types/fluent-ffmpeg@npm:2.1.20"
@@ -2138,13 +2111,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/http-assert@npm:*":
-  version: 1.5.3
-  resolution: "@types/http-assert@npm:1.5.3"
-  checksum: 9553e5a0b8bcfdac4b51d3fa3b89a91b5450171861a667a5b4c47204e0f4a1ca865d97396e6ceaf220e87b64d06b7a8bad7bfba15ef97acb41a87507c9940dbc
-  languageName: node
-  linkType: hard
-
 "@types/http-cache-semantics@npm:*, @types/http-cache-semantics@npm:^4.0.1":
   version: 4.0.1
   resolution: "@types/http-cache-semantics@npm:4.0.1"
@@ -2152,13 +2118,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/http-errors@npm:*":
-  version: 2.0.1
-  resolution: "@types/http-errors@npm:2.0.1"
-  checksum: 3bb0c50b0a652e679a84c30cd0340d696c32ef6558518268c238840346c077f899315daaf1c26c09c57ddd5dc80510f2a7f46acd52bf949e339e35ed3ee9654f
-  languageName: node
-  linkType: hard
-
 "@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1":
   version: 2.0.4
   resolution: "@types/istanbul-lib-coverage@npm:2.0.4"
@@ -2247,13 +2206,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/keygrip@npm:*":
-  version: 1.0.2
-  resolution: "@types/keygrip@npm:1.0.2"
-  checksum: 60bc2738a4f107070ee3d96f44709cb38f3a96c7ccabab09f56c1b2b4d85f869fd8fb9f1f2937e863d0e9e781f005c2223b823bf32b859185b4f52370c352669
-  languageName: node
-  linkType: hard
-
 "@types/keyv@npm:^3.1.4":
   version: 3.1.4
   resolution: "@types/keyv@npm:3.1.4"
@@ -2263,121 +2215,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/koa-bodyparser@npm:4.3.8":
-  version: 4.3.8
-  resolution: "@types/koa-bodyparser@npm:4.3.8"
-  dependencies:
-    "@types/koa": "*"
-  checksum: df4501f4c29e24e6ffe4149accaaa4ac3aee9e0cac8fe0239f53f36bff4acfde4ffb4294212453efaa8a4231c66d139a9577f0d25cc491832c1b2904a5943f89
-  languageName: node
-  linkType: hard
-
-"@types/koa-compose@npm:*":
-  version: 3.2.5
-  resolution: "@types/koa-compose@npm:3.2.5"
-  dependencies:
-    "@types/koa": "*"
-  checksum: 5d1147c4b057eb158195f442f0384f06503f3e69dba99fb517b30a05261a9f92928945c12bb1cfc17a5b7d60db003f38b455a3a9b125f12e4fc81fffa396b3cf
-  languageName: node
-  linkType: hard
-
-"@types/koa-cors@npm:0.0.2":
-  version: 0.0.2
-  resolution: "@types/koa-cors@npm:0.0.2"
-  dependencies:
-    "@types/koa": "*"
-  checksum: 7218bd8f4600fede227626e01fabe2022c691ee8721945792eb3dba3b348b10ddc438c3a679734de783172be512eb6b780d0600ed7052c3f881ed234a601656e
-  languageName: node
-  linkType: hard
-
-"@types/koa-favicon@npm:2.0.21":
-  version: 2.0.21
-  resolution: "@types/koa-favicon@npm:2.0.21"
-  dependencies:
-    "@types/koa": "*"
-  checksum: 7e3da0dd430a96a007845be4d0d918281d5177ee36511c182f23048179168aac9b8b1fcd2a3de0b6e0f89b70fcb2a23c7b278de735e6daf71ef5cdea50761593
-  languageName: node
-  linkType: hard
-
-"@types/koa-logger@npm:3.1.2":
-  version: 3.1.2
-  resolution: "@types/koa-logger@npm:3.1.2"
-  dependencies:
-    "@types/koa": "*"
-  checksum: 8e4cfcdb2491052bbff35c8f0a1f0bf839e966c3903afcf39656bf21bd3089b1a50945ce6a92bea430a83c9341d714c968360953d3a52a5cc10cdb3fb0af4218
-  languageName: node
-  linkType: hard
-
-"@types/koa-mount@npm:4.0.1":
-  version: 4.0.1
-  resolution: "@types/koa-mount@npm:4.0.1"
-  dependencies:
-    "@types/koa": "*"
-  checksum: c010bfe6b2d81e6b1ca163b7699a5a0c90414079fcbc1d44c4005c896486db0d22b8220bd5f68a1cca7be481dba6a3b4f1c05b6affd80954c724d81170532f33
-  languageName: node
-  linkType: hard
-
-"@types/koa-send@npm:4.1.3":
-  version: 4.1.3
-  resolution: "@types/koa-send@npm:4.1.3"
-  dependencies:
-    "@types/koa": "*"
-  checksum: f20f6a0dcccd0d090348c7cce3635220cc82420b9579fa521dc6deae23c242aa8adb760a5a3fc84d7590a7f393b41b71b18312f9519c1c4a0b16ee24aae2e104
-  languageName: node
-  linkType: hard
-
-"@types/koa-views@npm:7.0.0":
-  version: 7.0.0
-  resolution: "@types/koa-views@npm:7.0.0"
-  dependencies:
-    koa-views: "*"
-  checksum: 03253380413e82806ef14c8f3ecadd659e0b00e4e8483fa9d8fe52f369edbfff02a779a5e09fca11eeaabf555dcc139378c8b123d1e4fc49125cb14ed27b3cab
-  languageName: node
-  linkType: hard
-
-"@types/koa@npm:*, @types/koa@npm:2.13.5":
-  version: 2.13.5
-  resolution: "@types/koa@npm:2.13.5"
-  dependencies:
-    "@types/accepts": "*"
-    "@types/content-disposition": "*"
-    "@types/cookies": "*"
-    "@types/http-assert": "*"
-    "@types/http-errors": "*"
-    "@types/keygrip": "*"
-    "@types/koa-compose": "*"
-    "@types/node": "*"
-  checksum: e3b634d934b79ce8f394bf4130511596081f9c073dbfb4309aa32e4c421c47049a002b65111f8d9687eabec55d5a27b1b9ae0699afa83894cb7032c3536bfa17
-  languageName: node
-  linkType: hard
-
-"@types/koa__cors@npm:3.3.0":
-  version: 3.3.0
-  resolution: "@types/koa__cors@npm:3.3.0"
-  dependencies:
-    "@types/koa": "*"
-  checksum: c1aeb10b070e72b6c01a2f6abb4b0a936017794ef4eab3469697a4e24ef2054bc371519afa90c8e6c5ea9dbeda58395a64400bd499c3fda207cb593b751b44ca
-  languageName: node
-  linkType: hard
-
-"@types/koa__multer@npm:2.0.4":
-  version: 2.0.4
-  resolution: "@types/koa__multer@npm:2.0.4"
-  dependencies:
-    "@types/koa": "*"
-  checksum: 4a945061a6a44ef981081132e85ce9d0c171c4a895439b511313d628f0567d2624635166ac3e2455bdc216b15da83819ab52537f9609bfa1540ffc0d1b09519b
-  languageName: node
-  linkType: hard
-
-"@types/koa__router@npm:8.0.11":
-  version: 8.0.11
-  resolution: "@types/koa__router@npm:8.0.11"
-  dependencies:
-    "@types/koa": "*"
-  checksum: 81f55ed77273871728c81a20fa546ee906bebfe72fd72e3723d983a19504eb7d9578908a0fb8ef230764c5495031412df4245eee93479161bd7bd5135ca1ea04
-  languageName: node
-  linkType: hard
-
 "@types/long@npm:^4.0.1":
   version: 4.0.2
   resolution: "@types/long@npm:4.0.2"
@@ -2399,13 +2236,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/mime@npm:*":
-  version: 3.0.1
-  resolution: "@types/mime@npm:3.0.1"
-  checksum: 4040fac73fd0cea2460e29b348c1a6173da747f3a87da0dbce80dd7a9355a3d0e51d6d9a401654f3e5550620e3718b5a899b2ec1debf18424e298a2c605346e7
-  languageName: node
-  linkType: hard
-
 "@types/minimatch@npm:*":
   version: 5.1.2
   resolution: "@types/minimatch@npm:5.1.2"
@@ -2526,13 +2356,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/qs@npm:*":
-  version: 6.9.7
-  resolution: "@types/qs@npm:6.9.7"
-  checksum: 7fd6f9c25053e9b5bb6bc9f9f76c1d89e6c04f7707a7ba0e44cc01f17ef5284adb82f230f542c2d5557d69407c9a40f0f3515e8319afd14e1e16b5543ac6cdba
-  languageName: node
-  linkType: hard
-
 "@types/random-seed@npm:0.3.3":
   version: 0.3.3
   resolution: "@types/random-seed@npm:0.3.3"
@@ -2540,13 +2363,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/range-parser@npm:*":
-  version: 1.2.4
-  resolution: "@types/range-parser@npm:1.2.4"
-  checksum: b7c0dfd5080a989d6c8bb0b6750fc0933d9acabeb476da6fe71d8bdf1ab65e37c136169d84148034802f48378ab94e3c37bb4ef7656b2bec2cb9c0f8d4146a95
-  languageName: node
-  linkType: hard
-
 "@types/ratelimiter@npm:3.4.4":
   version: 3.4.4
   resolution: "@types/ratelimiter@npm:3.4.4"
@@ -2609,16 +2425,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/serve-static@npm:*":
-  version: 1.15.0
-  resolution: "@types/serve-static@npm:1.15.0"
-  dependencies:
-    "@types/mime": "*"
-    "@types/node": "*"
-  checksum: b6ac93d471fb0f53ddcac1f9b67572a09cd62806f7db5855244b28f6f421139626f24799392566e97d1ffc61b12f9de7f30380c39fcae3c8a161fe161d44edf2
-  languageName: node
-  linkType: hard
-
 "@types/sharp@npm:0.31.0":
   version: 0.31.0
   resolution: "@types/sharp@npm:0.31.0"
@@ -2727,6 +2533,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/vary@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@types/vary@npm:1.1.0"
+  dependencies:
+    "@types/node": "*"
+  checksum: 6f434a96966ebd4b091592a085cf326f9bfe417aca8714092cc8d3a6d9da775d03c9c799b191f9bbb91ee558831f8b47b2a62f7d7ee0097e8aeee2466d01d515
+  languageName: node
+  linkType: hard
+
 "@types/vinyl-fs@npm:*":
   version: 2.4.12
   resolution: "@types/vinyl-fs@npm:2.4.12"
@@ -3088,7 +2903,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"accepts@npm:^1.3.5":
+"abstract-logging@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "abstract-logging@npm:2.0.1"
+  checksum: 6967d15e5abbafd17f56eaf30ba8278c99333586fa4f7935fd80e93cfdc006c37fcc819c5d63ee373a12e6cb2d0417f7c3c6b9e42b957a25af9937d26749415e
+  languageName: node
+  linkType: hard
+
+"accepts@npm:^1.3.5, accepts@npm:^1.3.8":
   version: 1.3.8
   resolution: "accepts@npm:1.3.8"
   dependencies:
@@ -3188,6 +3010,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ajv-formats@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "ajv-formats@npm:2.1.1"
+  dependencies:
+    ajv: ^8.0.0
+  peerDependencies:
+    ajv: ^8.0.0
+  peerDependenciesMeta:
+    ajv:
+      optional: true
+  checksum: 4a287d937f1ebaad4683249a4c40c0fa3beed30d9ddc0adba04859026a622da0d317851316ea64b3680dc60f5c3c708105ddd5d5db8fe595d9d0207fd19f90b7
+  languageName: node
+  linkType: hard
+
 "ajv-keywords@npm:^3.5.2":
   version: 3.5.2
   resolution: "ajv-keywords@npm:3.5.2"
@@ -3197,7 +3033,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:8.11.2":
+"ajv@npm:8.11.2, ajv@npm:^8.0.0, ajv@npm:^8.10.0, ajv@npm:^8.11.0":
   version: 8.11.2
   resolution: "ajv@npm:8.11.2"
   dependencies:
@@ -3358,13 +3194,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"append-field@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "append-field@npm:1.0.0"
-  checksum: 482ba08acc0ecef00fe7da6bf2f8e48359a9905ee1af525f3120c9260c02e91eedf0579b59d898e8d8455b6c199e340bc0a2fd4b9e02adaa29a8a86c722b37f9
-  languageName: node
-  linkType: hard
-
 "aproba@npm:^1.0.3 || ^2.0.0":
   version: 2.0.0
   resolution: "aproba@npm:2.0.0"
@@ -3691,6 +3520,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"atomic-sleep@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "atomic-sleep@npm:1.0.0"
+  checksum: b95275afb2f80732f22f43a60178430c468906a415a7ff18bcd0feeebc8eec3930b51250aeda91a476062a90e07132b43a1794e8d8ffcf9b650e8139be75fa36
+  languageName: node
+  linkType: hard
+
 "autobind-decorator@npm:2.4.0, autobind-decorator@npm:^2.4.0":
   version: 2.4.0
   resolution: "autobind-decorator@npm:2.4.0"
@@ -3735,6 +3571,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"avvio@npm:^8.2.0":
+  version: 8.2.0
+  resolution: "avvio@npm:8.2.0"
+  dependencies:
+    archy: ^1.0.0
+    debug: ^4.0.0
+    fastq: ^1.6.1
+  checksum: bbd06eeb1f9ef428dbc32a32e06c350a7b320f60348698fd234145a4100f3688ce5d0999b966eb6ca70f9511d0c35fed5ef4651d276715e7e3e94a2d465cb56d
+  languageName: node
+  linkType: hard
+
 "aws-sdk@npm:2.1262.0":
   version: 2.1262.0
   resolution: "aws-sdk@npm:2.1262.0"
@@ -3891,14 +3738,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "backend@workspace:packages/backend"
   dependencies:
-    "@bull-board/api": 4.3.1
-    "@bull-board/koa": 4.3.1
-    "@bull-board/ui": 4.3.1
     "@discordapp/twemoji": 14.0.2
-    "@elastic/elasticsearch": 7.17.0
-    "@koa/cors": 3.3.0
-    "@koa/multer": 3.0.0
-    "@koa/router": 9.0.1
+    "@fastify/accepts": 4.0.1
+    "@fastify/cors": 8.2.0
+    "@fastify/multipart": 7.3.0
+    "@fastify/static": 6.5.0
+    "@fastify/view": 7.1.2
     "@nestjs/common": 9.2.0
     "@nestjs/core": 9.2.0
     "@nestjs/testing": 9.2.0
@@ -3910,6 +3755,7 @@ __metadata:
     "@syuilo/aiscript": 0.11.1
     "@tensorflow/tfjs": ^4.1.0
     "@tensorflow/tfjs-node": 4.1.0
+    "@types/accepts": 1.3.5
     "@types/archiver": 5.3.1
     "@types/bcryptjs": 2.4.2
     "@types/bull": 4.10.0
@@ -3921,17 +3767,6 @@ __metadata:
     "@types/jsdom": 20.0.1
     "@types/jsonld": 1.5.8
     "@types/jsrsasign": 10.5.4
-    "@types/koa": 2.13.5
-    "@types/koa-bodyparser": 4.3.8
-    "@types/koa-cors": 0.0.2
-    "@types/koa-favicon": 2.0.21
-    "@types/koa-logger": 3.1.2
-    "@types/koa-mount": 4.0.1
-    "@types/koa-send": 4.1.3
-    "@types/koa-views": 7.0.0
-    "@types/koa__cors": 3.3.0
-    "@types/koa__multer": 2.0.4
-    "@types/koa__router": 8.0.11
     "@types/mime-types": 2.1.1
     "@types/node": 18.11.9
     "@types/node-fetch": 3.0.3
@@ -3954,11 +3789,13 @@ __metadata:
     "@types/tmp": 0.2.3
     "@types/unzipper": 0.10.5
     "@types/uuid": 8.3.4
+    "@types/vary": 1.1.0
     "@types/web-push": 3.3.2
     "@types/websocket": 1.0.5
     "@types/ws": 8.5.3
     "@typescript-eslint/eslint-plugin": 5.45.0
     "@typescript-eslint/parser": 5.45.0
+    accepts: ^1.3.8
     ajv: 8.11.2
     archiver: 5.3.1
     autobind-decorator: 2.4.0
@@ -3982,6 +3819,7 @@ __metadata:
     eslint: 8.28.0
     eslint-plugin-import: 2.26.0
     execa: 6.1.0
+    fastify: 4.10.0
     feed: 4.2.2
     file-type: 18.0.0
     fluent-ffmpeg: 2.1.2
@@ -3999,20 +3837,10 @@ __metadata:
     json5-loader: 4.0.1
     jsonld: 8.1.0
     jsrsasign: 10.6.1
-    koa: 2.13.4
-    koa-bodyparser: 4.3.0
-    koa-favicon: 2.1.0
-    koa-json-body: 5.3.0
-    koa-logger: 3.2.1
-    koa-mount: 4.0.0
-    koa-send: 5.0.1
-    koa-slow: 2.1.0
-    koa-views: 7.0.2
     mfm-js: 0.23.0
     mime-types: 2.1.35
     misskey-js: 0.0.14
     ms: 3.0.0-canary.1
-    multer: 1.4.4
     nested-property: 4.0.0
     node-fetch: 3.3.0
     nodemailer: 6.8.0
@@ -4060,6 +3888,7 @@ __metadata:
     ulid: 2.3.0
     unzipper: 0.10.11
     uuid: 9.0.0
+    vary: 1.1.2
     web-push: 3.5.0
     websocket: 1.0.34
     ws: 8.11.0
@@ -4430,16 +4259,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"busboy@npm:^0.2.11":
-  version: 0.2.14
-  resolution: "busboy@npm:0.2.14"
-  dependencies:
-    dicer: 0.2.5
-    readable-stream: 1.1.x
-  checksum: 9df9fca6d96dab9edd03f568bde31f215794e6fabd73c75d2b39a4be2e8b73a45121d987dea5db881f3fb499737c261b372106fe72d08b8db92afaed8d751165
-  languageName: node
-  linkType: hard
-
 "busboy@npm:^1.6.0":
   version: 1.6.0
   resolution: "busboy@npm:1.6.0"
@@ -4449,13 +4268,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bytes@npm:3.1.2, bytes@npm:^3.1.0":
-  version: 3.1.2
-  resolution: "bytes@npm:3.1.2"
-  checksum: e4bcd3948d289c5127591fbedf10c0b639ccbf00243504e4e127374a15c3bc8eed0d28d4aaab08ff6f1cf2abc0cce6ba3085ed32f4f90e82a5683ce0014e1b6e
-  languageName: node
-  linkType: hard
-
 "cacache@npm:^16.1.0":
   version: 16.1.3
   resolution: "cacache@npm:16.1.3"
@@ -4702,7 +4514,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^2.0.0, chalk@npm:^2.4.2":
+"chalk@npm:^2.0.0":
   version: 2.4.2
   resolution: "chalk@npm:2.4.2"
   dependencies:
@@ -4713,7 +4525,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.2":
+"chalk@npm:^4.0.0, chalk@npm:^4.1.0, chalk@npm:^4.1.2":
   version: 4.1.2
   resolution: "chalk@npm:4.1.2"
   dependencies:
@@ -5118,30 +4930,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"co-body@npm:^5.0.0":
-  version: 5.2.0
-  resolution: "co-body@npm:5.2.0"
-  dependencies:
-    inflation: ^2.0.0
-    qs: ^6.4.0
-    raw-body: ^2.2.0
-    type-is: ^1.6.14
-  checksum: 48e1ffe00b8717b68154a939fa19f36d75aa66bba627f2977f28d11b732da56bdda445acda7053f7a85dfbac8a09a8aa257bceedaff7b6467cb25ab08ada9c8d
-  languageName: node
-  linkType: hard
-
-"co-body@npm:^6.0.0":
-  version: 6.1.0
-  resolution: "co-body@npm:6.1.0"
-  dependencies:
-    inflation: ^2.0.0
-    qs: ^6.5.2
-    raw-body: ^2.3.3
-    type-is: ^1.6.16
-  checksum: d0a78831a6651f2085fce16b0ecdc49f45fb5baf4f94148c2f499e7ec89d188205362548b9c500eae15a819360cfda208079e68a72c204cf66ca3ffa2fc0f57e
-  languageName: node
-  linkType: hard
-
 "co@npm:^4.6.0":
   version: 4.6.0
   resolution: "co@npm:4.6.0"
@@ -5315,7 +5103,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^2.19.0, commander@npm:^2.20.0":
+"commander@npm:^2.20.0":
   version: 2.20.3
   resolution: "commander@npm:2.20.3"
   checksum: ab8c07884e42c3a8dbc5dd9592c606176c7eb5c1ca5ff274bcf907039b2c41de3626f684ea75ccf4d361ba004bbaff1f577d5384c155f3871e456bdf27becf9e
@@ -5383,7 +5171,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"concat-stream@npm:^1.5.2, concat-stream@npm:^1.6.0":
+"concat-stream@npm:^1.6.0":
   version: 1.6.2
   resolution: "concat-stream@npm:1.6.2"
   dependencies:
@@ -5395,27 +5183,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"condense-newlines@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "condense-newlines@npm:0.2.1"
-  dependencies:
-    extend-shallow: ^2.0.1
-    is-whitespace: ^0.3.0
-    kind-of: ^3.0.2
-  checksum: 3c20ff6ee88b5d2e81c122f33b5ba5d6976cdf86d83527fadea308b3020ed70af7ed98c2e2d94d36f27fcd723a7a477941c19575e0d2c8db6afc4aac6926a54e
-  languageName: node
-  linkType: hard
-
-"config-chain@npm:^1.1.13":
-  version: 1.1.13
-  resolution: "config-chain@npm:1.1.13"
-  dependencies:
-    ini: ^1.3.4
-    proto-list: ~1.2.1
-  checksum: 828137a28e7c2fc4b7fb229bd0cd6c1397bcf83434de54347e608154008f411749041ee392cbe42fab6307e02de4c12480260bf769b7d44b778fdea3839eafab
-  languageName: node
-  linkType: hard
-
 "consola@npm:^2.15.0":
   version: 2.15.3
   resolution: "consola@npm:2.15.3"
@@ -5430,15 +5197,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"consolidate@npm:^0.16.0":
-  version: 0.16.0
-  resolution: "consolidate@npm:0.16.0"
-  dependencies:
-    bluebird: ^3.7.2
-  checksum: f17164ffb2c4f79b4cbf685f1c76a49f59d329a40954b436425498861dc137b46fe821b2aadafa2dcfeb7eebd46846f35bd2c36b4a704d38521b4210a22a7515
-  languageName: node
-  linkType: hard
-
 "constantinople@npm:^4.0.1":
   version: 4.0.1
   resolution: "constantinople@npm:4.0.1"
@@ -5449,7 +5207,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"content-disposition@npm:0.5.4, content-disposition@npm:~0.5.2":
+"content-disposition@npm:0.5.4, content-disposition@npm:^0.5.3, content-disposition@npm:~0.5.2":
   version: 0.5.4
   resolution: "content-disposition@npm:0.5.4"
   dependencies:
@@ -5479,6 +5237,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:^0.5.0":
+  version: 0.5.0
+  resolution: "cookie@npm:0.5.0"
+  checksum: 1f4bd2ca5765f8c9689a7e8954183f5332139eb72b6ff783d8947032ec1fdf43109852c178e21a953a30c0dd42257828185be01b49d1eb1a67fd054ca588a180
+  languageName: node
+  linkType: hard
+
 "cookies@npm:~0.8.0":
   version: 0.8.0
   resolution: "cookies@npm:0.8.0"
@@ -5506,13 +5271,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"copy-to@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "copy-to@npm:2.0.1"
-  checksum: 05ea12875bdc96ae053a3b30148e9d992026035ff2bfcc0b615e8d49d1cf8fc3d1f40843f9a4b7b1b6d9118eeebcba31e621076d7de525828aa9c07d22a81dab
-  languageName: node
-  linkType: hard
-
 "core-js@npm:3":
   version: 3.26.1
   resolution: "core-js@npm:3.26.1"
@@ -5838,7 +5596,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:2, debug@npm:^2.2.0, debug@npm:^2.3.3, debug@npm:^2.5.2, debug@npm:^2.6.9":
+"debug@npm:2, debug@npm:2.6.9, debug@npm:^2.2.0, debug@npm:^2.3.3, debug@npm:^2.5.2, debug@npm:^2.6.9":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
   dependencies:
@@ -5847,7 +5605,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.0.1, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4":
+"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4":
   version: 4.3.4
   resolution: "debug@npm:4.3.4"
   dependencies:
@@ -6086,7 +5844,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"destroy@npm:^1.0.4":
+"destroy@npm:1.2.0, destroy@npm:^1.0.4":
   version: 1.2.0
   resolution: "destroy@npm:1.2.0"
   checksum: 0acb300b7478a08b92d810ab229d5afe0d2f4399272045ab22affa0d99dbaf12637659411530a6fcd597a9bdac718fc94373a61a95b4651bbc7b83684a565e38
@@ -6130,16 +5888,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dicer@npm:0.2.5":
-  version: 0.2.5
-  resolution: "dicer@npm:0.2.5"
-  dependencies:
-    readable-stream: 1.1.x
-    streamsearch: 0.1.2
-  checksum: a6f0ce9ac5099c7ffeaec7398d711eea1dd803eb99036d0f05342e9ed46a4235a5ed0ea01ad5d6c785fdb0aae6d61d2722e6e64f9fabdfe39885f7f52eb635ee
-  languageName: node
-  linkType: hard
-
 "diff-sequences@npm:^29.3.1":
   version: 29.3.1
   resolution: "diff-sequences@npm:29.3.1"
@@ -6369,20 +6117,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"editorconfig@npm:^0.15.3":
-  version: 0.15.3
-  resolution: "editorconfig@npm:0.15.3"
-  dependencies:
-    commander: ^2.19.0
-    lru-cache: ^4.1.5
-    semver: ^5.6.0
-    sigmund: ^1.0.1
-  bin:
-    editorconfig: bin/editorconfig
-  checksum: a94afeda19f12a4bcc4a573f0858df13dd3a2d1a3268cc0f17a6326ebe7ddd6cb0c026f8e4e73c17d34f3892bf6f8b561512d9841e70063f61da71b4c57dc5f0
-  languageName: node
-  linkType: hard
-
 "ee-first@npm:1.1.1":
   version: 1.1.1
   resolution: "ee-first@npm:1.1.1"
@@ -6390,17 +6124,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ejs@npm:*, ejs@npm:^3.1.7":
-  version: 3.1.8
-  resolution: "ejs@npm:3.1.8"
-  dependencies:
-    jake: ^10.8.5
-  bin:
-    ejs: bin/cli.js
-  checksum: 1d40d198ad52e315ccf37e577bdec06e24eefdc4e3c27aafa47751a03a0c7f0ec4310254c9277a5f14763c3cd4bbacce27497332b2d87c74232b9b1defef8efc
-  languageName: node
-  linkType: hard
-
 "electron-to-chromium@npm:^1.2.7, electron-to-chromium@npm:^1.4.251":
   version: 1.4.284
   resolution: "electron-to-chromium@npm:1.4.284"
@@ -6436,7 +6159,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"encodeurl@npm:^1.0.2":
+"encodeurl@npm:^1.0.2, encodeurl@npm:~1.0.2":
   version: 1.0.2
   resolution: "encodeurl@npm:1.0.2"
   checksum: e50e3d508cdd9c4565ba72d2012e65038e5d71bdc9198cb125beb6237b5b1ade6c0d343998da9e170fb2eae52c1bed37d4d6d98a46ea423a0cddbed5ac3f780c
@@ -6452,7 +6175,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"end-of-stream@npm:^1.0.0, end-of-stream@npm:^1.1.0, end-of-stream@npm:^1.4.1":
+"end-of-stream@npm:^1.0.0, end-of-stream@npm:^1.1.0, end-of-stream@npm:^1.4.1, end-of-stream@npm:^1.4.4":
   version: 1.4.4
   resolution: "end-of-stream@npm:1.4.4"
   dependencies:
@@ -7074,7 +6797,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escape-html@npm:^1.0.3":
+"escape-html@npm:^1.0.3, escape-html@npm:~1.0.3":
   version: 1.0.3
   resolution: "escape-html@npm:1.0.3"
   checksum: 6213ca9ae00d0ab8bccb6d8d4e0a98e76237b2410302cf7df70aaa6591d509a2a37ce8998008cbecae8fc8ffaadf3fb0229535e6a145f3ce0b211d060decbb24
@@ -7361,6 +7084,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"etag@npm:~1.8.1":
+  version: 1.8.1
+  resolution: "etag@npm:1.8.1"
+  checksum: 571aeb3dbe0f2bbd4e4fadbdb44f325fc75335cd5f6f6b6a091e6a06a9f25ed5392f0863c5442acb0646787446e816f13cbfc6edce5b07658541dff573cab1ff
+  languageName: node
+  linkType: hard
+
 "event-stream@npm:=3.3.4":
   version: 3.3.4
   resolution: "event-stream@npm:3.3.4"
@@ -7411,6 +7141,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"events@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "events@npm:3.3.0"
+  checksum: f6f487ad2198aa41d878fa31452f1a3c00958f46e9019286ff4787c84aac329332ab45c9cdc8c445928fc6d7ded294b9e005a7fce9426488518017831b272780
+  languageName: node
+  linkType: hard
+
 "execa@npm:4.1.0":
   version: 4.1.0
   resolution: "execa@npm:4.1.0"
@@ -7616,6 +7353,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-decode-uri-component@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "fast-decode-uri-component@npm:1.0.1"
+  checksum: 427a48fe0907e76f0e9a2c228e253b4d8a8ab21d130ee9e4bb8339c5ba4086235cf9576831f7b20955a752eae4b525a177ff9d5825dd8d416e7726939194fbee
+  languageName: node
+  linkType: hard
+
 "fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
   version: 3.1.3
   resolution: "fast-deep-equal@npm:3.1.3"
@@ -7643,6 +7387,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-json-stringify@npm:^5.0.0":
+  version: 5.4.1
+  resolution: "fast-json-stringify@npm:5.4.1"
+  dependencies:
+    "@fastify/deepmerge": ^1.0.0
+    ajv: ^8.10.0
+    ajv-formats: ^2.1.1
+    fast-deep-equal: ^3.1.3
+    fast-uri: ^2.1.0
+    rfdc: ^1.2.0
+  checksum: 62efefaf135ff03d810fb362adca1d3471787e4e17ef10e34c8e1d61d361c09736091b1948df2cb408e6b05f18c10985e89bcdd9c08f8f5ba21e148e52a9c5fc
+  languageName: node
+  linkType: hard
+
 "fast-levenshtein@npm:^1.0.0":
   version: 1.1.4
   resolution: "fast-levenshtein@npm:1.1.4"
@@ -7657,6 +7415,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-querystring@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "fast-querystring@npm:1.0.0"
+  dependencies:
+    fast-decode-uri-component: ^1.0.1
+  checksum: 5f70df27d02fcf86ea2baa16ea59e0da8bbd891e3a97aa1e95b1c0c64d5445aeab3bde5ce3e603b21d48c87db70a458febf05150a9dbe7c099aced5f123b3ffd
+  languageName: node
+  linkType: hard
+
+"fast-redact@npm:^3.1.1":
+  version: 3.1.2
+  resolution: "fast-redact@npm:3.1.2"
+  checksum: a30eb6b6830333ab213e0def55f46453ca777544dbd3a883016cb590a0eeb95e6fdf546553c1a13d509896bfba889b789991160a6d0996ceb19fce0a02e8b753
+  languageName: node
+  linkType: hard
+
 "fast-safe-stringify@npm:2.1.1":
   version: 2.1.1
   resolution: "fast-safe-stringify@npm:2.1.1"
@@ -7664,6 +7438,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-uri@npm:^2.0.0, fast-uri@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "fast-uri@npm:2.1.0"
+  checksum: 60ecece5ab05515729ec04d1732ee68bd4429cab8c06ebf8db512a094a0077ddc5af6a27c75922875bc9e13b58e947832242cdcb2cb23c51dc753412222dca83
+  languageName: node
+  linkType: hard
+
 "fast-xml-parser@npm:^3.19.0":
   version: 3.21.1
   resolution: "fast-xml-parser@npm:3.21.1"
@@ -7675,7 +7456,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fastq@npm:^1.6.0":
+"fastify-plugin@npm:^4.0.0":
+  version: 4.3.0
+  resolution: "fastify-plugin@npm:4.3.0"
+  checksum: f4831ca6de3db276f6e5c9ae172c175631be07b24b91e1de17d0cd11c1bd29fe7f671deec591a4dfd26169d3de4f9d9ca385d0e7bddccf38c6d21b5764f8b77d
+  languageName: node
+  linkType: hard
+
+"fastify@npm:4.10.0":
+  version: 4.10.0
+  resolution: "fastify@npm:4.10.0"
+  dependencies:
+    "@fastify/ajv-compiler": ^3.3.1
+    "@fastify/error": ^3.0.0
+    "@fastify/fast-json-stringify-compiler": ^4.1.0
+    abstract-logging: ^2.0.1
+    avvio: ^8.2.0
+    find-my-way: ^7.3.0
+    light-my-request: ^5.6.1
+    pino: ^8.5.0
+    process-warning: ^2.0.0
+    proxy-addr: ^2.0.7
+    rfdc: ^1.3.0
+    secure-json-parse: ^2.5.0
+    semver: ^7.3.7
+    tiny-lru: ^10.0.0
+  checksum: 68c905a930d1e6d31d70a1e048c39c2d5d3749e00b9653fa7f20156da791d68f7edfa2856e8b3ea898b6e38b0a70b09782555e3f503a77cda49e8fd983a1a0ba
+  languageName: node
+  linkType: hard
+
+"fastq@npm:^1.6.0, fastq@npm:^1.6.1":
   version: 1.13.0
   resolution: "fastq@npm:1.13.0"
   dependencies:
@@ -7750,15 +7560,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"filelist@npm:^1.0.1":
-  version: 1.0.4
-  resolution: "filelist@npm:1.0.4"
-  dependencies:
-    minimatch: ^5.0.1
-  checksum: a303573b0821e17f2d5e9783688ab6fbfce5d52aaac842790ae85e704a6f5e4e3538660a63183d6453834dedf1e0f19a9dadcebfa3e926c72397694ea11f5160
-  languageName: node
-  linkType: hard
-
 "fill-range@npm:^4.0.0":
   version: 4.0.0
   resolution: "fill-range@npm:4.0.0"
@@ -7780,6 +7581,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-my-way@npm:^7.3.0":
+  version: 7.3.1
+  resolution: "find-my-way@npm:7.3.1"
+  dependencies:
+    fast-deep-equal: ^3.1.3
+    fast-querystring: ^1.0.0
+    safe-regex2: ^2.0.0
+  checksum: eec65665c34fbfeb323a52989de51b106485ec0d6182996fc70d42570a73f88b9637572bb8ae89332532da9ca856615e195768116aeede75d73b929b9534bf7a
+  languageName: node
+  linkType: hard
+
 "find-up@npm:^1.0.0":
   version: 1.1.2
   resolution: "find-up@npm:1.1.2"
@@ -7989,6 +7801,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"forwarded@npm:0.2.0":
+  version: 0.2.0
+  resolution: "forwarded@npm:0.2.0"
+  checksum: fd27e2394d8887ebd16a66ffc889dc983fbbd797d5d3f01087c020283c0f019a7d05ee85669383d8e0d216b116d720fc0cef2f6e9b7eb9f4c90c6e0bc7fd28e6
+  languageName: node
+  linkType: hard
+
 "fragment-cache@npm:^0.2.1":
   version: 0.2.1
   resolution: "fragment-cache@npm:0.2.1"
@@ -7998,7 +7817,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fresh@npm:~0.5.2":
+"fresh@npm:0.5.2, fresh@npm:~0.5.2":
   version: 0.5.2
   resolution: "fresh@npm:0.5.2"
   checksum: 13ea8b08f91e669a64e3ba3a20eb79d7ca5379a81f1ff7f4310d54e2320645503cc0c78daedc93dfb6191287295f6479544a649c64d8e41a1c0fb0c221552346
@@ -8213,15 +8032,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-paths@npm:0.0.7":
-  version: 0.0.7
-  resolution: "get-paths@npm:0.0.7"
-  dependencies:
-    pify: ^4.0.1
-  checksum: a17edf61fb9934b8e58a7d8ce0d9702040b7020dda86e67ce088db865c21cb230f490f25f38064cebeb2c367abc2bf39a75db6acdfddf01da63a699a47f8aba4
-  languageName: node
-  linkType: hard
-
 "get-pixels-frame-info-update@npm:3.3.2":
   version: 3.3.2
   resolution: "get-pixels-frame-info-update@npm:3.3.2"
@@ -8390,7 +8200,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^8.0.1, glob@npm:^8.0.3":
+"glob@npm:^8.0.1":
   version: 8.0.3
   resolution: "glob@npm:8.0.3"
   dependencies:
@@ -8780,6 +8590,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hashlru@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "hashlru@npm:2.3.0"
+  checksum: 38b3559e6fb9d19fa731edc52d8d7e72cd378f708dcb01cecd4a6ba0c52f06d7d06d6277249f5c43d9915d8dda9be31adad768a379eef188db213c3f2b09278d
+  languageName: node
+  linkType: hard
+
+"hexoid@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "hexoid@npm:1.0.0"
+  checksum: 27a148ca76a2358287f40445870116baaff4a0ed0acc99900bf167f0f708ffd82e044ff55e9949c71963852b580fc024146d3ac6d5d76b508b78d927fa48ae2d
+  languageName: node
+  linkType: hard
+
 "highlight.js@npm:^10.7.1":
   version: 10.7.3
   resolution: "highlight.js@npm:10.7.3"
@@ -8810,13 +8634,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hpagent@npm:^0.1.1":
-  version: 0.1.2
-  resolution: "hpagent@npm:0.1.2"
-  checksum: 1918518ab937d9fa615a47b94489e23662547bc1edf27069ee9bf40bfefb94da65eb142b6f42336b4b0752fce87f66c284d92b97340fd2a90b24aa3616b5450d
-  languageName: node
-  linkType: hard
-
 "html-comment-regex@npm:^1.1.0":
   version: 1.1.2
   resolution: "html-comment-regex@npm:1.1.2"
@@ -8903,7 +8720,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-errors@npm:^1.6.3, http-errors@npm:^1.7.3, http-errors@npm:~1.8.0":
+"http-errors@npm:^1.6.3, http-errors@npm:~1.8.0":
   version: 1.8.1
   resolution: "http-errors@npm:1.8.1"
   dependencies:
@@ -8916,18 +8733,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-errors@npm:~1.6.2":
-  version: 1.6.3
-  resolution: "http-errors@npm:1.6.3"
-  dependencies:
-    depd: ~1.1.2
-    inherits: 2.0.3
-    setprototypeof: 1.1.0
-    statuses: ">= 1.4.0 < 2"
-  checksum: a9654ee027e3d5de305a56db1d1461f25709ac23267c6dc28cdab8323e3f96caa58a9a6a5e93ac15d7285cee0c2f019378c3ada9026e7fe19c872d695f27de7c
-  languageName: node
-  linkType: hard
-
 "http-proxy-agent@npm:^5.0.0":
   version: 5.0.0
   resolution: "http-proxy-agent@npm:5.0.0"
@@ -9040,14 +8845,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"humanize-number@npm:0.0.2":
-  version: 0.0.2
-  resolution: "humanize-number@npm:0.0.2"
-  checksum: 9c98c9d06b0f3d801960be3957199232a5df52377e2502acae92e4f71de633fa62c315a83f24bf96bef76f47b2e3e0e1e4f4157c891e27074fd3272cad6724bb
+"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2":
+  version: 0.6.3
+  resolution: "iconv-lite@npm:0.6.3"
+  dependencies:
+    safer-buffer: ">= 2.1.2 < 3.0.0"
+  checksum: 3f60d47a5c8fc3313317edfd29a00a692cc87a19cac0159e2ce711d0ebc9019064108323b5e493625e25594f11c6236647d8e256fbe7a58f4a3b33b89e6d30bf
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:0.4.24, iconv-lite@npm:^0.4.4":
+"iconv-lite@npm:^0.4.4":
   version: 0.4.24
   resolution: "iconv-lite@npm:0.4.24"
   dependencies:
@@ -9056,15 +8863,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2":
-  version: 0.6.3
-  resolution: "iconv-lite@npm:0.6.3"
-  dependencies:
-    safer-buffer: ">= 2.1.2 < 3.0.0"
-  checksum: 3f60d47a5c8fc3313317edfd29a00a692cc87a19cac0159e2ce711d0ebc9019064108323b5e493625e25594f11c6236647d8e256fbe7a58f4a3b33b89e6d30bf
-  languageName: node
-  linkType: hard
-
 "idb-keyval@npm:6.2.0, idb-keyval@npm:^6.1.0":
   version: 6.2.0
   resolution: "idb-keyval@npm:6.2.0"
@@ -9152,13 +8950,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inflation@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "inflation@npm:2.0.0"
-  checksum: a0494871b12275afdef9e2710ee1af1e0fc642b04613a9be69c05ef8b5e9627f3bd7d358a937fa47aa20235ee7313a4f30255048533add0ad4918beb918a586e
-  languageName: node
-  linkType: hard
-
 "inflight@npm:^1.0.4":
   version: 1.0.6
   resolution: "inflight@npm:1.0.6"
@@ -9176,13 +8967,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"inherits@npm:2.0.3":
-  version: 2.0.3
-  resolution: "inherits@npm:2.0.3"
-  checksum: 78cb8d7d850d20a5e9a7f3620db31483aa00ad5f722ce03a55b110e5a723539b3716a3b463e2b96ce3fe286f33afc7c131fa2f91407528ba80cea98a7545d4c0
-  languageName: node
-  linkType: hard
-
 "ini@npm:2.0.0":
   version: 2.0.0
   resolution: "ini@npm:2.0.0"
@@ -9323,6 +9107,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ipaddr.js@npm:1.9.1":
+  version: 1.9.1
+  resolution: "ipaddr.js@npm:1.9.1"
+  checksum: f88d3825981486f5a1942414c8d77dd6674dd71c065adcfa46f578d677edcb99fda25af42675cb59db492fdf427b34a5abfcde3982da11a8fd83a500b41cfe77
+  languageName: node
+  linkType: hard
+
 "ipaddr.js@npm:^2.0.1":
   version: 2.0.1
   resolution: "ipaddr.js@npm:2.0.1"
@@ -9836,13 +9627,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-whitespace@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "is-whitespace@npm:0.3.0"
-  checksum: dac8fc9a9b797afeef703f625269601715552883790d1385d6bb27dd04ffdafd5fddca8f2d85ee96913850211595da2ba483dac1f166829c4078fb58ce815140
-  languageName: node
-  linkType: hard
-
 "is-windows@npm:^1.0.1, is-windows@npm:^1.0.2":
   version: 1.0.2
   resolution: "is-windows@npm:1.0.2"
@@ -9963,20 +9747,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jake@npm:^10.8.5":
-  version: 10.8.5
-  resolution: "jake@npm:10.8.5"
-  dependencies:
-    async: ^3.2.3
-    chalk: ^4.0.2
-    filelist: ^1.0.1
-    minimatch: ^3.0.4
-  bin:
-    jake: ./bin/cli.js
-  checksum: 56c913ecf5a8d74325d0af9bc17a233bad50977438d44864d925bb6c45c946e0fee8c4c1f5fe2225471ef40df5222e943047982717ebff0d624770564d3c46ba
-  languageName: node
-  linkType: hard
-
 "jest-changed-files@npm:^29.2.0":
   version: 29.2.0
   resolution: "jest-changed-files@npm:29.2.0"
@@ -10460,22 +10230,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-beautify@npm:^1.6.12":
-  version: 1.14.7
-  resolution: "js-beautify@npm:1.14.7"
-  dependencies:
-    config-chain: ^1.1.13
-    editorconfig: ^0.15.3
-    glob: ^8.0.3
-    nopt: ^6.0.0
-  bin:
-    css-beautify: js/bin/css-beautify.js
-    html-beautify: js/bin/html-beautify.js
-    js-beautify: js/bin/js-beautify.js
-  checksum: 1950d0d3f05f8ad06b73eb77b9aac602d00b24eab7d8a6d8ea0b1841ab9c730acecd5a6f3926e360dce7a2583481bc77caf6d024490a58fa9897cbbbdfc35984
-  languageName: node
-  linkType: hard
-
 "js-levenshtein@npm:^1.1.6":
   version: 1.1.6
   resolution: "js-levenshtein@npm:1.1.6"
@@ -10869,173 +10623,39 @@ __metadata:
   checksum: f2a0102ae0cf19c4a953397e552571bad2b588b53282874f25fca7236396e650e2db50d41f9f516bd402536e4df968dbb51b8e69e4d5d4a7173def78448f7bab
   languageName: node
   linkType: hard
-
-"kind-of@npm:^6.0.0, kind-of@npm:^6.0.2":
-  version: 6.0.3
-  resolution: "kind-of@npm:6.0.3"
-  checksum: 3ab01e7b1d440b22fe4c31f23d8d38b4d9b91d9f291df683476576493d5dfd2e03848a8b05813dd0c3f0e835bc63f433007ddeceb71f05cb25c45ae1b19c6d3b
-  languageName: node
-  linkType: hard
-
-"kleur@npm:^3.0.3":
-  version: 3.0.3
-  resolution: "kleur@npm:3.0.3"
-  checksum: df82cd1e172f957bae9c536286265a5cdbd5eeca487cb0a3b2a7b41ef959fc61f8e7c0e9aeea9c114ccf2c166b6a8dd45a46fd619c1c569d210ecd2765ad5169
-  languageName: node
-  linkType: hard
-
-"koa-bodyparser@npm:4.3.0":
-  version: 4.3.0
-  resolution: "koa-bodyparser@npm:4.3.0"
-  dependencies:
-    co-body: ^6.0.0
-    copy-to: ^2.0.1
-  checksum: c227fe0fb5a55b98fc91d865e80229b60178d216d53b732b07833eb38f48a7ed6aa768a083bc06e359db33298547e9a65842fbe9d3f0fdaf5149fe0becafc88f
-  languageName: node
-  linkType: hard
-
-"koa-compose@npm:^4.1.0":
-  version: 4.1.0
-  resolution: "koa-compose@npm:4.1.0"
-  checksum: 46cb16792d96425e977c2ae4e5cb04930280740e907242ec9c25e3fb8b4a1d7b54451d7432bc24f40ec62255edea71894d2ceeb8238501842b4e48014f2e83db
-  languageName: node
-  linkType: hard
-
-"koa-convert@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "koa-convert@npm:2.0.0"
-  dependencies:
-    co: ^4.6.0
-    koa-compose: ^4.1.0
-  checksum: 7385b3391995f59c1312142e110d5dff677f9850dbfbcf387cd36a7b0af03b5d26e82b811eb9bb008b4f3e661cdab1f8817596e46b1929da2cf6e97a2f7456ed
-  languageName: node
-  linkType: hard
-
-"koa-favicon@npm:2.1.0":
-  version: 2.1.0
-  resolution: "koa-favicon@npm:2.1.0"
-  dependencies:
-    mz: ^2.7.0
-  checksum: 024051a0be3560a77e65651ad87690d432a28bed3c4dd24cbcbe3249a38d6cc0c80613d37b45107c8b709cb01fecf8723e77d50cbb2ce67c8451fa29891d228f
-  languageName: node
-  linkType: hard
-
-"koa-json-body@npm:5.3.0":
-  version: 5.3.0
-  resolution: "koa-json-body@npm:5.3.0"
-  dependencies:
-    co-body: ^5.0.0
-  checksum: b3ae5f304cbb6f8f6a4a2ba36047d1ea6fe32005e7665d795802eb4c3dd1f341a0b8e61087fffc6bd2da6f554d71b06b047cbb3669b1eea814285f75d9bdd736
-  languageName: node
-  linkType: hard
-
-"koa-logger@npm:3.2.1":
-  version: 3.2.1
-  resolution: "koa-logger@npm:3.2.1"
-  dependencies:
-    bytes: ^3.1.0
-    chalk: ^2.4.2
-    humanize-number: 0.0.2
-    passthrough-counter: ^1.0.0
-  checksum: b29ba25eb433452bfda48e51acd5d206128411966acc09bb13ce3a0cec9192f78bb27e23efd615d0e7f46eeb2588ee8d2541d72665a4aa18d27a177e78dca909
-  languageName: node
-  linkType: hard
-
-"koa-mount@npm:4.0.0, koa-mount@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "koa-mount@npm:4.0.0"
-  dependencies:
-    debug: ^4.0.1
-    koa-compose: ^4.1.0
-  checksum: c7e8c5cca4d2ccc4742e63c81b86b44f0290075148897b5d633acdd137e90f554c60c232fbc62e843eaedb913b67c5a49367c1142e290b8cfd9c28eb4a0480ec
-  languageName: node
-  linkType: hard
-
-"koa-router@npm:^10.0.0":
-  version: 10.1.1
-  resolution: "koa-router@npm:10.1.1"
-  dependencies:
-    debug: ^4.1.1
-    http-errors: ^1.7.3
-    koa-compose: ^4.1.0
-    methods: ^1.1.2
-    path-to-regexp: ^6.1.0
-  checksum: 65e6cd4a7f8a4d98c665b00ee4c2c05340cb38ca035590ce71c23a25c0a01f6d2434d9a68366d7c218af9c94e5d8e20c7fe9e7f7dfbb98d69b11b5ae3246aaf8
-  languageName: node
-  linkType: hard
-
-"koa-send@npm:5.0.1, koa-send@npm:^5.0.0":
-  version: 5.0.1
-  resolution: "koa-send@npm:5.0.1"
-  dependencies:
-    debug: ^4.1.1
-    http-errors: ^1.7.3
-    resolve-path: ^1.4.0
-  checksum: a9fbaadbe0f50efd157a733df4a1cc2b3b79b0cdf12e67c718641e6038d1792c0bebe40913e6d4ceb707d970301155be3859b98d1ef08b0fd1766f7326b82853
-  languageName: node
-  linkType: hard
-
-"koa-slow@npm:2.1.0":
-  version: 2.1.0
-  resolution: "koa-slow@npm:2.1.0"
-  dependencies:
-    lodash.isregexp: 3.0.5
-    q: 1.4.1
-  checksum: 1b2fa6c709cd4016f5c5c4f45a8bd569910fdfef482c85120f2bbddd5cf274d714b0d231659ac3335d15b03f0debdb71b14f3cc54624921be7d808df7f8ac513
+
+"kind-of@npm:^6.0.0, kind-of@npm:^6.0.2":
+  version: 6.0.3
+  resolution: "kind-of@npm:6.0.3"
+  checksum: 3ab01e7b1d440b22fe4c31f23d8d38b4d9b91d9f291df683476576493d5dfd2e03848a8b05813dd0c3f0e835bc63f433007ddeceb71f05cb25c45ae1b19c6d3b
   languageName: node
   linkType: hard
 
-"koa-static@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "koa-static@npm:5.0.0"
-  dependencies:
-    debug: ^3.1.0
-    koa-send: ^5.0.0
-  checksum: 8d9b9c4d2b3b13e8818e804245d784099c4b353b55ddd7dbeeb90f27a2e9f5b6f86bd16a4909e337cb89db4d332d9002e6c0f5056caf75749cab62f93c1f0cc5
+"kleur@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "kleur@npm:3.0.3"
+  checksum: df82cd1e172f957bae9c536286265a5cdbd5eeca487cb0a3b2a7b41ef959fc61f8e7c0e9aeea9c114ccf2c166b6a8dd45a46fd619c1c569d210ecd2765ad5169
   languageName: node
   linkType: hard
 
-"koa-views@npm:*":
-  version: 8.0.0
-  resolution: "koa-views@npm:8.0.0"
-  dependencies:
-    consolidate: ^0.16.0
-    debug: ^4.1.0
-    get-paths: 0.0.7
-    koa-send: ^5.0.0
-    mz: ^2.4.0
-    pretty: ^2.0.0
-    resolve-path: ^1.4.0
-  peerDependencies:
-    "@types/koa": ^2.13.1
-  peerDependenciesMeta:
-    "@types/koa":
-      optional: true
-  checksum: 6e7e4df04fcab8e5c50a82b38518b7e87491fef1a80f8105e34aaf82a93c0abf051a011d02a8bed8542255724bdb2b83cda7b63e094983c01a5c3927ea08be2c
+"koa-compose@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "koa-compose@npm:4.1.0"
+  checksum: 46cb16792d96425e977c2ae4e5cb04930280740e907242ec9c25e3fb8b4a1d7b54451d7432bc24f40ec62255edea71894d2ceeb8238501842b4e48014f2e83db
   languageName: node
   linkType: hard
 
-"koa-views@npm:7.0.2, koa-views@npm:^7.0.1":
-  version: 7.0.2
-  resolution: "koa-views@npm:7.0.2"
+"koa-convert@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "koa-convert@npm:2.0.0"
   dependencies:
-    consolidate: ^0.16.0
-    debug: ^4.1.0
-    get-paths: 0.0.7
-    koa-send: ^5.0.0
-    mz: ^2.4.0
-    pretty: ^2.0.0
-    resolve-path: ^1.4.0
-  peerDependencies:
-    "@types/koa": ^2.13.1
-  peerDependenciesMeta:
-    "@types/koa":
-      optional: true
-  checksum: e591a131de09cf2676ae0492dabf420015404cd1198092a2aa217118c5e7df5da848f49c658f46af172028a508cecbdb0a81e45c5acf5cf40c2baf7c9d08675e
+    co: ^4.6.0
+    koa-compose: ^4.1.0
+  checksum: 7385b3391995f59c1312142e110d5dff677f9850dbfbcf387cd36a7b0af03b5d26e82b811eb9bb008b4f3e661cdab1f8817596e46b1929da2cf6e97a2f7456ed
   languageName: node
   linkType: hard
 
-"koa@npm:2.13.4, koa@npm:^2.13.1":
+"koa@npm:2.13.4":
   version: 2.13.4
   resolution: "koa@npm:2.13.4"
   dependencies:
@@ -11176,6 +10796,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"light-my-request@npm:^5.6.1":
+  version: 5.7.0
+  resolution: "light-my-request@npm:5.7.0"
+  dependencies:
+    cookie: ^0.5.0
+    process-warning: ^2.0.0
+    set-cookie-parser: ^2.4.1
+  checksum: 3da727736c03b89d1eac4b3cebc9de3d8b725a1485fb86f63b450715fa1cb7f049d7df391b831eb9ec352287fd58f1948835c1e1e78444f193eb0a9c90216aed
+  languageName: node
+  linkType: hard
+
 "lines-and-columns@npm:^1.1.6":
   version: 1.2.4
   resolution: "lines-and-columns@npm:1.2.4"
@@ -11323,13 +10954,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.isregexp@npm:3.0.5":
-  version: 3.0.5
-  resolution: "lodash.isregexp@npm:3.0.5"
-  checksum: 973f4887f003af746bf838267d9d1ea39d912f579cf402cca67049b1e4487daf2a25b10c70e4fc1c7ad97ee3be6d43d38c9839bc9c55c40e94b62dfc60f601c7
-  languageName: node
-  linkType: hard
-
 "lodash.map@npm:^4.4.0":
   version: 4.6.0
   resolution: "lodash.map@npm:4.6.0"
@@ -11457,16 +11081,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^4.1.5":
-  version: 4.1.5
-  resolution: "lru-cache@npm:4.1.5"
-  dependencies:
-    pseudomap: ^1.0.2
-    yallist: ^2.1.2
-  checksum: 4bb4b58a36cd7dc4dcec74cbe6a8f766a38b7426f1ff59d4cf7d82a2aa9b9565cd1cb98f6ff60ce5cd174524868d7bc9b7b1c294371851356066ca9ac4cf135a
-  languageName: node
-  linkType: hard
-
 "lru-cache@npm:^6.0.0":
   version: 6.0.0
   resolution: "lru-cache@npm:6.0.0"
@@ -11634,13 +11248,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"methods@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "methods@npm:1.1.2"
-  checksum: 0917ff4041fa8e2f2fda5425a955fe16ca411591fbd123c0d722fcf02b73971ed6f764d85f0a6f547ce49ee0221ce2c19a5fa692157931cecb422984f1dcd13a
-  languageName: node
-  linkType: hard
-
 "mfm-js@npm:0.23.0":
   version: 0.23.0
   resolution: "mfm-js@npm:0.23.0"
@@ -11697,6 +11304,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mime@npm:1.6.0":
+  version: 1.6.0
+  resolution: "mime@npm:1.6.0"
+  bin:
+    mime: cli.js
+  checksum: fef25e39263e6d207580bdc629f8872a3f9772c923c7f8c7e793175cee22777bbe8bba95e5d509a40aaa292d8974514ce634ae35769faa45f22d17edda5e8557
+  languageName: node
+  linkType: hard
+
 "mimic-fn@npm:^2.1.0":
   version: 2.1.0
   resolution: "mimic-fn@npm:2.1.0"
@@ -11904,7 +11520,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mkdirp@npm:>=0.5 0, mkdirp@npm:^0.5.4, mkdirp@npm:^0.5.5, mkdirp@npm:~0.5.1":
+"mkdirp@npm:>=0.5 0, mkdirp@npm:^0.5.5, mkdirp@npm:~0.5.1":
   version: 0.5.6
   resolution: "mkdirp@npm:0.5.6"
   dependencies:
@@ -11924,6 +11540,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mnemonist@npm:0.39.5":
+  version: 0.39.5
+  resolution: "mnemonist@npm:0.39.5"
+  dependencies:
+    obliterator: ^2.0.1
+  checksum: 6669d687a434226924b2c84ee6eb7ce7d0f83dfc5caad8bcc164c73c0c11fb6d43cbe32636e710f068046f4b40a56c3032532554e93e02640aafc6ca3dd222e6
+  languageName: node
+  linkType: hard
+
 "moment@npm:^2.22.2":
   version: 2.29.4
   resolution: "moment@npm:2.29.4"
@@ -11945,6 +11570,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ms@npm:2.1.3, ms@npm:^2.0.0, ms@npm:^2.1.1":
+  version: 2.1.3
+  resolution: "ms@npm:2.1.3"
+  checksum: aa92de608021b242401676e35cfa5aa42dd70cbdc082b916da7fb925c542173e36bce97ea3e804923fe92c0ad991434e4a38327e15a1b5b5f945d66df615ae6d
+  languageName: node
+  linkType: hard
+
 "ms@npm:3.0.0-canary.1":
   version: 3.0.0-canary.1
   resolution: "ms@npm:3.0.0-canary.1"
@@ -11952,13 +11584,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ms@npm:^2.0.0, ms@npm:^2.1.1, ms@npm:^2.1.3":
-  version: 2.1.3
-  resolution: "ms@npm:2.1.3"
-  checksum: aa92de608021b242401676e35cfa5aa42dd70cbdc082b916da7fb925c542173e36bce97ea3e804923fe92c0ad991434e4a38327e15a1b5b5f945d66df615ae6d
-  languageName: node
-  linkType: hard
-
 "msgpackr-extract@npm:^2.2.0":
   version: 2.2.0
   resolution: "msgpackr-extract@npm:2.2.0"
@@ -12002,22 +11627,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"multer@npm:1.4.4":
-  version: 1.4.4
-  resolution: "multer@npm:1.4.4"
-  dependencies:
-    append-field: ^1.0.0
-    busboy: ^0.2.11
-    concat-stream: ^1.5.2
-    mkdirp: ^0.5.4
-    object-assign: ^4.1.1
-    on-finished: ^2.3.0
-    type-is: ^1.6.4
-    xtend: ^4.0.0
-  checksum: b5550d250aeee9c4d630eaecd133af0899239f6b10cec4b448ddd0a808025b383520b8227198a8612f60c2cd2094bcb60de93d973084f889d4e40efe6dbd641e
-  languageName: node
-  linkType: hard
-
 "multi-integer-range@npm:3.0.0":
   version: 3.0.0
   resolution: "multi-integer-range@npm:3.0.0"
@@ -12039,7 +11648,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mz@npm:^2.4.0, mz@npm:^2.7.0":
+"mz@npm:^2.4.0":
   version: 2.7.0
   resolution: "mz@npm:2.7.0"
   dependencies:
@@ -12632,6 +12241,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"obliterator@npm:^2.0.1":
+  version: 2.0.4
+  resolution: "obliterator@npm:2.0.4"
+  checksum: f28ad35b6d812089315f375dc3e6e5f9bebf958ebe4b10ccd471c7115cbcf595e74bdac4783ae758e5b1f47e3096427fdb37cfa7bed566b132df92ff317b9a7c
+  languageName: node
+  linkType: hard
+
 "oblivious-set@npm:1.1.1":
   version: 1.1.1
   resolution: "oblivious-set@npm:1.1.1"
@@ -12646,7 +12262,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"on-finished@npm:^2.3.0":
+"on-exit-leak-free@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "on-exit-leak-free@npm:2.1.0"
+  checksum: 7334d98b87b0c89c9b69c747760b21196ff35afdedc4eaf1a0a3a02964463d7f6802481b120e4c8298967c74773ca7b914ab2eb3d9b279010eb7f67ac4960eed
+  languageName: node
+  linkType: hard
+
+"on-finished@npm:2.4.1, on-finished@npm:^2.3.0":
   version: 2.4.1
   resolution: "on-finished@npm:2.4.1"
   dependencies:
@@ -12981,13 +12604,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"passthrough-counter@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "passthrough-counter@npm:1.0.0"
-  checksum: 942a0addeb677e24ddb154b04cc29ce1c5720032efc268689446420f9350d47e94f2f1f76d469686bc87c1543c2f2165f2d004d265fe1b81465c76e02d272c63
-  languageName: node
-  linkType: hard
-
 "path-dirname@npm:^1.0.0":
   version: 1.0.2
   resolution: "path-dirname@npm:1.0.2"
@@ -13011,7 +12627,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-is-absolute@npm:1.0.1, path-is-absolute@npm:^1.0.0":
+"path-is-absolute@npm:^1.0.0":
   version: 1.0.1
   resolution: "path-is-absolute@npm:1.0.1"
   checksum: 060840f92cf8effa293bcc1bea81281bd7d363731d214cbe5c227df207c34cd727430f70c6037b5159c8a870b9157cba65e775446b0ab06fd5ecc7e54615a3b8
@@ -13062,13 +12678,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-to-regexp@npm:^6.1.0":
-  version: 6.2.1
-  resolution: "path-to-regexp@npm:6.2.1"
-  checksum: f0227af8284ea13300f4293ba111e3635142f976d4197f14d5ad1f124aebd9118783dd2e5f1fe16f7273743cc3dbeddfb7493f237bb27c10fdae07020cc9b698
-  languageName: node
-  linkType: hard
-
 "path-type@npm:^1.0.0":
   version: 1.1.0
   resolution: "path-type@npm:1.1.0"
@@ -13217,13 +12826,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pify@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "pify@npm:4.0.1"
-  checksum: 9c4e34278cb09987685fa5ef81499c82546c033713518f6441778fbec623fc708777fe8ac633097c72d88470d5963094076c7305cafc7ad340aae27cfacd856b
-  languageName: node
-  linkType: hard
-
 "pinkie-promise@npm:^2.0.0":
   version: 2.0.1
   resolution: "pinkie-promise@npm:2.0.1"
@@ -13240,6 +12842,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pino-abstract-transport@npm:v1.0.0":
+  version: 1.0.0
+  resolution: "pino-abstract-transport@npm:1.0.0"
+  dependencies:
+    readable-stream: ^4.0.0
+    split2: ^4.0.0
+  checksum: 05dd0eda52dd99fd204b39fe7b62656744b63e863bc052cdd5105d25f226a236966d0a46e39a1ace4838f6e988c608837ff946d2d0bc92835ca7baa0a3bff8d8
+  languageName: node
+  linkType: hard
+
+"pino-std-serializers@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "pino-std-serializers@npm:6.0.0"
+  checksum: d9dc1779b3870cdbe00dc2dff15e3931eb126bb144bc9f746d83a2c1174a28e366ed0abe63379dee2fee474e6018a088bfbb2c4b57c1e206601918f5a61e276f
+  languageName: node
+  linkType: hard
+
+"pino@npm:^8.5.0":
+  version: 8.7.0
+  resolution: "pino@npm:8.7.0"
+  dependencies:
+    atomic-sleep: ^1.0.0
+    fast-redact: ^3.1.1
+    on-exit-leak-free: ^2.1.0
+    pino-abstract-transport: v1.0.0
+    pino-std-serializers: ^6.0.0
+    process-warning: ^2.0.0
+    quick-format-unescaped: ^4.0.3
+    real-require: ^0.2.0
+    safe-stable-stringify: ^2.3.1
+    sonic-boom: ^3.1.0
+    thread-stream: ^2.0.0
+  bin:
+    pino: bin.js
+  checksum: 4aa2e320aa88f4a90fd25884ee4e3b9ef7963b3c59c514f3693b5a5c987b112cf3ab4e39a8c51efe32c861f5c058d7cfa7fcda59d964ed878f842fdbc6ab2876
+  languageName: node
+  linkType: hard
+
 "pirates@npm:^4.0.4":
   version: 4.0.5
   resolution: "pirates@npm:4.0.5"
@@ -13728,17 +13368,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "pretty@npm:2.0.0"
-  dependencies:
-    condense-newlines: ^0.2.1
-    extend-shallow: ^2.0.1
-    js-beautify: ^1.6.12
-  checksum: 9c41ae0559195af2fb2496d84c6f442843e045d269d4008a6dd336f8372d7481395ed5ab23e5711b6172682c27cb0542e1ab3ca11b38da48f1109c0b701d0ef9
-  languageName: node
-  linkType: hard
-
 "prismjs@npm:1.29.0":
   version: 1.29.0
   resolution: "prismjs@npm:1.29.0"
@@ -13788,6 +13417,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"process-warning@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "process-warning@npm:2.0.0"
+  checksum: a2bb299835bced58e63cbe06a8fd6e048a648d3649e81b62c442b63112a3f0a86912e7b1a9c557daca30652232d3b0a7f1972fb87c36334e2a5a6f3d5c4a76c9
+  languageName: node
+  linkType: hard
+
+"process@npm:^0.11.10":
+  version: 0.11.10
+  resolution: "process@npm:0.11.10"
+  checksum: bfcce49814f7d172a6e6a14d5fa3ac92cc3d0c3b9feb1279774708a719e19acd673995226351a082a9ae99978254e320ccda4240ddc474ba31a76c79491ca7c3
+  languageName: node
+  linkType: hard
+
 "progress@npm:^2.0.0":
   version: 2.0.3
   resolution: "progress@npm:2.0.3"
@@ -13838,10 +13481,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"proto-list@npm:~1.2.1":
-  version: 1.2.4
-  resolution: "proto-list@npm:1.2.4"
-  checksum: 4d4826e1713cbfa0f15124ab0ae494c91b597a3c458670c9714c36e8baddf5a6aad22842776f2f5b137f259c8533e741771445eb8df82e861eea37a6eaba03f7
+"proxy-addr@npm:^2.0.7":
+  version: 2.0.7
+  resolution: "proxy-addr@npm:2.0.7"
+  dependencies:
+    forwarded: 0.2.0
+    ipaddr.js: 1.9.1
+  checksum: 29c6990ce9364648255454842f06f8c46fcd124d3e6d7c5066df44662de63cdc0bad032e9bf5a3d653ff72141cc7b6019873d685708ac8210c30458ad99f2b74
   languageName: node
   linkType: hard
 
@@ -13863,13 +13509,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pseudomap@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "pseudomap@npm:1.0.2"
-  checksum: 856c0aae0ff2ad60881168334448e898ad7a0e45fe7386d114b150084254c01e200c957cf378378025df4e052c7890c5bd933939b0e0d2ecfcc1dc2f0b2991f5
-  languageName: node
-  linkType: hard
-
 "psl@npm:^1.1.28, psl@npm:^1.1.33":
   version: 1.9.0
   resolution: "psl@npm:1.9.0"
@@ -13988,7 +13627,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pug@npm:*, pug@npm:3.0.2":
+"pug@npm:3.0.2":
   version: 3.0.2
   resolution: "pug@npm:3.0.2"
   dependencies:
@@ -14060,13 +13699,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"q@npm:1.4.1":
-  version: 1.4.1
-  resolution: "q@npm:1.4.1"
-  checksum: 22c8e1f24f416d0977e6da63f24712189c5dd789489999fc040467480e4e0ef4bd0e3126cce1b8ef72c709bbe1fcce10eba0f4991a03fc64ecb5a17e05ed8d35
-  languageName: node
-  linkType: hard
-
 "q@npm:^1.1.2":
   version: 1.5.1
   resolution: "q@npm:1.5.1"
@@ -14088,15 +13720,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:^6.4.0, qs@npm:^6.5.2":
-  version: 6.11.0
-  resolution: "qs@npm:6.11.0"
-  dependencies:
-    side-channel: ^1.0.4
-  checksum: 6e1f29dd5385f7488ec74ac7b6c92f4d09a90408882d0c208414a34dd33badc1a621019d4c799a3df15ab9b1d0292f97c1dd71dc7c045e69f81a8064e5af7297
-  languageName: node
-  linkType: hard
-
 "qs@npm:~6.5.2":
   version: 6.5.3
   resolution: "qs@npm:6.5.3"
@@ -14149,6 +13772,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"quick-format-unescaped@npm:^4.0.3":
+  version: 4.0.4
+  resolution: "quick-format-unescaped@npm:4.0.4"
+  checksum: 7bc32b99354a1aa46c089d2a82b63489961002bb1d654cee3e6d2d8778197b68c2d854fd23d8422436ee1fdfd0abaddc4d4da120afe700ade68bd357815b26fd
+  languageName: node
+  linkType: hard
+
 "quick-lru@npm:^5.1.1":
   version: 5.1.1
   resolution: "quick-lru@npm:5.1.1"
@@ -14165,6 +13795,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"range-parser@npm:~1.2.1":
+  version: 1.2.1
+  resolution: "range-parser@npm:1.2.1"
+  checksum: 0a268d4fea508661cf5743dfe3d5f47ce214fd6b7dec1de0da4d669dd4ef3d2144468ebe4179049eff253d9d27e719c88dae55be64f954e80135a0cada804ec9
+  languageName: node
+  linkType: hard
+
 "rangestr@npm:0.0.1":
   version: 0.0.1
   resolution: "rangestr@npm:0.0.1"
@@ -14179,18 +13816,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"raw-body@npm:^2.2.0, raw-body@npm:^2.3.3":
-  version: 2.5.1
-  resolution: "raw-body@npm:2.5.1"
-  dependencies:
-    bytes: 3.1.2
-    http-errors: 2.0.0
-    iconv-lite: 0.4.24
-    unpipe: 1.0.0
-  checksum: 5362adff1575d691bb3f75998803a0ffed8c64eabeaa06e54b4ada25a0cd1b2ae7f4f5ec46565d1bec337e08b5ac90c76eaa0758de6f72a633f025d754dec29e
-  languageName: node
-  linkType: hard
-
 "rc@npm:^1.2.7":
   version: 1.2.8
   resolution: "rc@npm:1.2.8"
@@ -14253,18 +13878,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:1.1.x, readable-stream@npm:~1.1.9":
-  version: 1.1.14
-  resolution: "readable-stream@npm:1.1.14"
-  dependencies:
-    core-util-is: ~1.0.0
-    inherits: ~2.0.1
-    isarray: 0.0.1
-    string_decoder: ~0.10.x
-  checksum: 17dfeae3e909945a4a1abc5613ea92d03269ef54c49288599507fc98ff4615988a1c39a999dcf9aacba70233d9b7040bc11a5f2bfc947e262dedcc0a8b32b5a0
-  languageName: node
-  linkType: hard
-
 "readable-stream@npm:3, readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0, readable-stream@npm:^3.6.0":
   version: 3.6.0
   resolution: "readable-stream@npm:3.6.0"
@@ -14291,6 +13904,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"readable-stream@npm:^4.0.0":
+  version: 4.2.0
+  resolution: "readable-stream@npm:4.2.0"
+  dependencies:
+    abort-controller: ^3.0.0
+    buffer: ^6.0.3
+    events: ^3.3.0
+    process: ^0.11.10
+  checksum: aa8447f781e6df90af78f6b0b9b9a77da2816dcf6c8220e7021c4de36e04f8129fed7ead81eac0baad2f42098209f9e7d7cd43169e1c156efcd2613828a37439
+  languageName: node
+  linkType: hard
+
+"readable-stream@npm:~1.1.9":
+  version: 1.1.14
+  resolution: "readable-stream@npm:1.1.14"
+  dependencies:
+    core-util-is: ~1.0.0
+    inherits: ~2.0.1
+    isarray: 0.0.1
+    string_decoder: ~0.10.x
+  checksum: 17dfeae3e909945a4a1abc5613ea92d03269ef54c49288599507fc98ff4615988a1c39a999dcf9aacba70233d9b7040bc11a5f2bfc947e262dedcc0a8b32b5a0
+  languageName: node
+  linkType: hard
+
 "readable-web-to-node-stream@npm:^3.0.2":
   version: 3.0.2
   resolution: "readable-web-to-node-stream@npm:3.0.2"
@@ -14318,6 +13955,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"real-require@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "real-require@npm:0.2.0"
+  checksum: fa060f19f2f447adf678d1376928c76379dce5f72bd334da301685ca6cdcb7b11356813332cc243c88470796bc2e2b1e2917fc10df9143dd93c2ea608694971d
+  languageName: node
+  linkType: hard
+
 "rechoir@npm:^0.6.2":
   version: 0.6.2
   resolution: "rechoir@npm:0.6.2"
@@ -14348,15 +13992,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"redis-info@npm:^3.0.8":
-  version: 3.1.0
-  resolution: "redis-info@npm:3.1.0"
-  dependencies:
-    lodash: ^4.17.11
-  checksum: d72ff0584ebb4a2149cfcfcf9142d9a7f9d0b96ae53fbf431f2738f33f1f42add6505ff73b2d640cab345923a34b217d7c728fa706cc81ad8bd8ad4c48987445
-  languageName: node
-  linkType: hard
-
 "redis-lock@npm:0.1.4":
   version: 0.1.4
   resolution: "redis-lock@npm:0.1.4"
@@ -14657,16 +14292,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve-path@npm:^1.4.0":
-  version: 1.4.0
-  resolution: "resolve-path@npm:1.4.0"
-  dependencies:
-    http-errors: ~1.6.2
-    path-is-absolute: 1.0.1
-  checksum: 1a39f569ee54dd5f8ee8576ef8671c9724bea65d9f9982fbb5352af9fb4e500e1e459c1bfb1ae3ebfd8d43a709c3a01dfa4f46cf5b831e45e2caed4f1a208300
-  languageName: node
-  linkType: hard
-
 "resolve-url@npm:^0.2.1":
   version: 0.2.1
   resolution: "resolve-url@npm:0.2.1"
@@ -14742,6 +14367,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ret@npm:~0.2.0":
+  version: 0.2.2
+  resolution: "ret@npm:0.2.2"
+  checksum: 774964bb413a3525e687bca92d81c1cd75555ec33147c32ecca22f3d06409e35df87952cfe3d57afff7650a0f7e42139cf60cb44e94c29dde390243bc1941f16
+  languageName: node
+  linkType: hard
+
 "retry@npm:^0.12.0":
   version: 0.12.0
   resolution: "retry@npm:0.12.0"
@@ -14756,7 +14388,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rfdc@npm:^1.3.0":
+"rfdc@npm:^1.2.0, rfdc@npm:^1.3.0":
   version: 1.3.0
   resolution: "rfdc@npm:1.3.0"
   checksum: fb2ba8512e43519983b4c61bd3fa77c0f410eff6bae68b08614437bc3f35f91362215f7b4a73cbda6f67330b5746ce07db5dd9850ad3edc91271ad6deea0df32
@@ -14890,6 +14522,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"safe-regex2@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "safe-regex2@npm:2.0.0"
+  dependencies:
+    ret: ~0.2.0
+  checksum: f5e182fca040dedd50ae052ea0eb035d9903b2db71243d5d8b43299735857288ef2ab52546a368d9c6fd1333b2a0d039297925e78ffc14845354f3f6158af7c2
+  languageName: node
+  linkType: hard
+
 "safe-regex@npm:^1.1.0":
   version: 1.1.0
   resolution: "safe-regex@npm:1.1.0"
@@ -14899,6 +14540,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"safe-stable-stringify@npm:^2.3.1":
+  version: 2.4.1
+  resolution: "safe-stable-stringify@npm:2.4.1"
+  checksum: d8e505c462031301040605a4836ca25b52a1744eff01b0939b4d43136638fb8e88e0cec3d3ab6ab8e26f501086e6ba6bf34b228f57bf2ac56cb8d4061355d723
+  languageName: node
+  linkType: hard
+
 "safer-buffer@npm:>= 2.1.2 < 3, safer-buffer@npm:>= 2.1.2 < 3.0.0, safer-buffer@npm:^2.0.2, safer-buffer@npm:^2.1.0, safer-buffer@npm:~2.1.0":
   version: 2.1.2
   resolution: "safer-buffer@npm:2.1.2"
@@ -14967,7 +14615,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"secure-json-parse@npm:^2.4.0":
+"secure-json-parse@npm:^2.4.0, secure-json-parse@npm:^2.5.0":
   version: 2.5.0
   resolution: "secure-json-parse@npm:2.5.0"
   checksum: 84147a32615ce0d93d2fbba60cde85ae362f45cc948ea134e4d6d1e678bb4b7f3a5ce9b9692ed052baefeb2e1c8ba183b34920390e6a089925b97b0d8f7ab064
@@ -14997,7 +14645,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:2 || 3 || 4 || 5, semver@npm:^5.6.0":
+"semver@npm:2 || 3 || 4 || 5":
   version: 5.7.1
   resolution: "semver@npm:5.7.1"
   bin:
@@ -15026,6 +14674,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"send@npm:^0.18.0":
+  version: 0.18.0
+  resolution: "send@npm:0.18.0"
+  dependencies:
+    debug: 2.6.9
+    depd: 2.0.0
+    destroy: 1.2.0
+    encodeurl: ~1.0.2
+    escape-html: ~1.0.3
+    etag: ~1.8.1
+    fresh: 0.5.2
+    http-errors: 2.0.0
+    mime: 1.6.0
+    ms: 2.1.3
+    on-finished: 2.4.1
+    range-parser: ~1.2.1
+    statuses: 2.0.1
+  checksum: 74fc07ebb58566b87b078ec63e5a3e41ecd987e4272ba67b7467e86c6ad51bc6b0b0154133b6d8b08a2ddda360464f71382f7ef864700f34844a76c8027817a8
+  languageName: node
+  linkType: hard
+
 "set-blocking@npm:^2.0.0":
   version: 2.0.0
   resolution: "set-blocking@npm:2.0.0"
@@ -15033,6 +14702,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"set-cookie-parser@npm:^2.4.1":
+  version: 2.5.1
+  resolution: "set-cookie-parser@npm:2.5.1"
+  checksum: b99c37f976e68ae6eb7c758bf2bbce1e60bb54e3eccedaa25f2da45b77b9cab58d90674cf9edd7aead6fbeac6308f2eb48713320a47ca120d0e838d0194513b6
+  languageName: node
+  linkType: hard
+
 "set-value@npm:^2.0.0, set-value@npm:^2.0.1":
   version: 2.0.1
   resolution: "set-value@npm:2.0.1"
@@ -15052,13 +14728,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"setprototypeof@npm:1.1.0":
-  version: 1.1.0
-  resolution: "setprototypeof@npm:1.1.0"
-  checksum: 27cb44304d6c9e1a23bc6c706af4acaae1a7aa1054d4ec13c05f01a99fd4887109a83a8042b67ad90dbfcd100d43efc171ee036eb080667172079213242ca36e
-  languageName: node
-  linkType: hard
-
 "setprototypeof@npm:1.2.0":
   version: 1.2.0
   resolution: "setprototypeof@npm:1.2.0"
@@ -15122,13 +14791,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sigmund@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "sigmund@npm:1.0.1"
-  checksum: 793f81f8083ad75ff3903ffd93cf35be8d797e872822cf880aea27ce6db522b508d93ea52ae292bccf357ce34dd5c7faa544cc51c2216e70bbf5fcf09b62707c
-  languageName: node
-  linkType: hard
-
 "signal-exit@npm:^3.0.0, signal-exit@npm:^3.0.2, signal-exit@npm:^3.0.3, signal-exit@npm:^3.0.7":
   version: 3.0.7
   resolution: "signal-exit@npm:3.0.7"
@@ -15270,6 +14932,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sonic-boom@npm:^3.1.0":
+  version: 3.2.0
+  resolution: "sonic-boom@npm:3.2.0"
+  dependencies:
+    atomic-sleep: ^1.0.0
+  checksum: 526669b78e0ac3bcbe2a53e5ac8960d3b25e61d8e6a46eaed5a0c46d7212c5f638bb136236870babedfcb626063711ba8f81e538f88b79e6a90a5b2ff71943b4
+  languageName: node
+  linkType: hard
+
 "sort-keys@npm:^1.0.0":
   version: 1.1.2
   resolution: "sort-keys@npm:1.1.2"
@@ -15413,7 +15084,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"split2@npm:^4.1.0":
+"split2@npm:^4.0.0, split2@npm:^4.1.0":
   version: 4.1.0
   resolution: "split2@npm:4.1.0"
   checksum: ec581597cb74c13cdfb5e2047543dd40cb1e8e9803c7b1e0c29ede05f2b4f049b2d6e7f2788a225d544549375719658b8f38e9366364dec35dc7a12edfda5ee5
@@ -15532,7 +15203,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"statuses@npm:>= 1.4.0 < 2, statuses@npm:>= 1.5.0 < 2, statuses@npm:^1.5.0":
+"statuses@npm:>= 1.5.0 < 2, statuses@npm:^1.5.0":
   version: 1.5.0
   resolution: "statuses@npm:1.5.0"
   checksum: c469b9519de16a4bb19600205cffb39ee471a5f17b82589757ca7bd40a8d92ebb6ed9f98b5a540c5d302ccbc78f15dc03cc0280dd6e00df1335568a5d5758a5c
@@ -15571,10 +15242,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"streamsearch@npm:0.1.2":
-  version: 0.1.2
-  resolution: "streamsearch@npm:0.1.2"
-  checksum: d2db57cbfbf7947ab9c75a7b4c80a8ef8d24850cf0a1a24258bb6956c97317ce1eab7dbcbf9c5aba3e6198611af1053b02411057bbedb99bf9c64b8275248997
+"stream-wormhole@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "stream-wormhole@npm:1.1.0"
+  checksum: cc19e0235c5d031bd530fa83913c807d9525fa4ba33d51691dd822c0726b8b7ef138b34f289d063a3018cddba67d3ba7fd0ecedaa97242a0f1ed2eed3c6a2ab1
   languageName: node
   linkType: hard
 
@@ -15999,6 +15670,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"text-decoding@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "text-decoding@npm:1.0.0"
+  checksum: 4b2359d8efdabea72ac470304e991913e9b82a55b1c33ab5204f115d11305ac5900add80aee5f7d22b2bcf0faebaf35b193d28a10b74adf175d9ac9d63604445
+  languageName: node
+  linkType: hard
+
 "text-table@npm:^0.2.0":
   version: 0.2.0
   resolution: "text-table@npm:0.2.0"
@@ -16038,6 +15716,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"thread-stream@npm:^2.0.0":
+  version: 2.2.0
+  resolution: "thread-stream@npm:2.2.0"
+  dependencies:
+    real-require: ^0.2.0
+  checksum: b7f0ee166ed17ac54700a0b6fc291967c97785b458ff54efe5431a7281bb52d1163e6ec550a614f2a47f0f02de5b35a342bd5acd215af23030938c64859152b2
+  languageName: node
+  linkType: hard
+
 "three@npm:0.146.0":
   version: 0.146.0
   resolution: "three@npm:0.146.0"
@@ -16109,6 +15796,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tiny-lru@npm:^10.0.0":
+  version: 10.0.1
+  resolution: "tiny-lru@npm:10.0.1"
+  checksum: 58b5f17a357625335aa3b90ee8c9b3e9abede5c1f46066c73deb129574a205efb112807d6d473909e73f1d874ea99bf14eb5c88223d540eb32ebb5e1ff146689
+  languageName: node
+  linkType: hard
+
 "tinycolor2@npm:1.4.2":
   version: 1.4.2
   resolution: "tinycolor2@npm:1.4.2"
@@ -16460,7 +16154,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-is@npm:^1.6.14, type-is@npm:^1.6.16, type-is@npm:^1.6.4":
+"type-is@npm:^1.6.16":
   version: 1.6.18
   resolution: "type-is@npm:1.6.18"
   dependencies:
@@ -16749,13 +16443,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"unpipe@npm:1.0.0":
-  version: 1.0.0
-  resolution: "unpipe@npm:1.0.0"
-  checksum: 4fa18d8d8d977c55cb09715385c203197105e10a6d220087ec819f50cb68870f02942244f1017565484237f1f8c5d3cd413631b1ae104d3096f24fdfde1b4aa2
-  languageName: node
-  linkType: hard
-
 "unset-value@npm:^1.0.0":
   version: 1.0.0
   resolution: "unset-value@npm:1.0.0"
@@ -16981,7 +16668,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vary@npm:^1.1.2":
+"vary@npm:1.1.2, vary@npm:^1.1.2":
   version: 1.1.2
   resolution: "vary@npm:1.1.2"
   checksum: ae0123222c6df65b437669d63dfa8c36cee20a504101b2fcd97b8bf76f91259c17f9f2b4d70a1e3c6bbcee7f51b28392833adb6b2770b23b01abec84e369660b
@@ -17554,13 +17241,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yallist@npm:^2.1.2":
-  version: 2.1.2
-  resolution: "yallist@npm:2.1.2"
-  checksum: 9ba99409209f485b6fcb970330908a6d41fa1c933f75e08250316cce19383179a6b70a7e0721b89672ebb6199cc377bf3e432f55100da6a7d6e11902b0a642cb
-  languageName: node
-  linkType: hard
-
 "yallist@npm:^3.0.0, yallist@npm:^3.1.1":
   version: 3.1.1
   resolution: "yallist@npm:3.1.1"
-- 
cgit v1.2.3-freya


From e73581f7156e446e969b8c802fbe017a5bb291fb Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 4 Dec 2022 14:26:21 +0900
Subject: :art:

---
 packages/client/src/components/MkDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index 155473cd75..513e2d22ba 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -186,7 +186,7 @@ onBeforeUnmount(() => {
 	> header {
 		margin: 0 0 8px 0;
 		font-weight: bold;
-		font-size: 20px;
+		font-size: 1.2em;
 
 		& + .body {
 			margin-top: 8px;
-- 
cgit v1.2.3-freya


From 8b961ba035ba8109c65252ad63a248784ea5eeb1 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 5 Dec 2022 12:23:10 +0000
Subject: chore: fix spelling error "Enviroment" Fix #9269

---
 packages/client/src/pages/admin/overview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index e532a908f1..b0d1b543d0 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -51,7 +51,7 @@
 			</div>
 
 			<div class="container env">
-				<div class="title">Enviroment</div>
+				<div class="title">Environment</div>
 				<div class="body">
 					<div class="number _panel">
 						<div class="label">Misskey</div>
-- 
cgit v1.2.3-freya


From 4ea1a173a87cc2ae0ee17c0fe03701846e226a3c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 6 Dec 2022 12:06:17 +0900
Subject: refactor: use ??

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 4b7730d5d5..308dd63dd3 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -556,7 +556,7 @@ function saveDraft() {
 }
 
 function deleteDraft() {
-	const draftData = JSON.parse(localStorage.getItem('drafts') || '{}');
+	const draftData = JSON.parse(localStorage.getItem('drafts') ?? '{}');
 
 	delete draftData[draftKey];
 
@@ -571,7 +571,7 @@ async function post() {
 		renoteId: props.renote ? props.renote.id : quoteId ? quoteId : undefined,
 		channelId: props.channel ? props.channel.id : undefined,
 		poll: poll,
-		cw: useCw ? cw || '' : undefined,
+		cw: useCw ? cw ?? '' : undefined,
 		localOnly: localOnly,
 		visibility: visibility,
 		visibleUserIds: visibility === 'specified' ? visibleUsers.map(u => u.id) : undefined,
-- 
cgit v1.2.3-freya


From f3e869ddae18cde560f76214de5f21a454e3bf13 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 6 Dec 2022 12:34:39 +0900
Subject: feat(client): add new gabber kick sounds

---
 CHANGELOG.md                                            |   1 +
 packages/client/assets/sounds/noizenecio/kick_gaba.mp3  | Bin 18866 -> 0 bytes
 packages/client/assets/sounds/noizenecio/kick_gaba1.mp3 | Bin 0 -> 18866 bytes
 packages/client/assets/sounds/noizenecio/kick_gaba3.mp3 | Bin 0 -> 19853 bytes
 packages/client/assets/sounds/noizenecio/kick_gaba4.mp3 | Bin 0 -> 19853 bytes
 packages/client/assets/sounds/noizenecio/kick_gaba5.mp3 | Bin 0 -> 19853 bytes
 packages/client/assets/sounds/noizenecio/kick_gaba6.mp3 | Bin 0 -> 19853 bytes
 packages/client/assets/sounds/noizenecio/kick_gaba7.mp3 | Bin 0 -> 19853 bytes
 packages/client/src/pages/settings/sounds.vue           |   7 ++++++-
 9 files changed, 7 insertions(+), 1 deletion(-)
 delete mode 100644 packages/client/assets/sounds/noizenecio/kick_gaba.mp3
 create mode 100644 packages/client/assets/sounds/noizenecio/kick_gaba1.mp3
 create mode 100644 packages/client/assets/sounds/noizenecio/kick_gaba3.mp3
 create mode 100644 packages/client/assets/sounds/noizenecio/kick_gaba4.mp3
 create mode 100644 packages/client/assets/sounds/noizenecio/kick_gaba5.mp3
 create mode 100644 packages/client/assets/sounds/noizenecio/kick_gaba6.mp3
 create mode 100644 packages/client/assets/sounds/noizenecio/kick_gaba7.mp3

(limited to 'packages/client/src')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d39fb5b6ee..c374d94c79 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ You should also include the user name that made the change.
 
 ### Improvements
 - Server: improve syslog performance @syuilo
+- Client: Add new gabber kick sounds (thanks for noizenecio)
 
 ### Bugfixes
 - Server: 引用内の文章がnyaizeされてしまう問題を修正 @kabo2468
diff --git a/packages/client/assets/sounds/noizenecio/kick_gaba.mp3 b/packages/client/assets/sounds/noizenecio/kick_gaba.mp3
deleted file mode 100644
index 616b506c4f..0000000000
Binary files a/packages/client/assets/sounds/noizenecio/kick_gaba.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/noizenecio/kick_gaba1.mp3 b/packages/client/assets/sounds/noizenecio/kick_gaba1.mp3
new file mode 100644
index 0000000000..616b506c4f
Binary files /dev/null and b/packages/client/assets/sounds/noizenecio/kick_gaba1.mp3 differ
diff --git a/packages/client/assets/sounds/noizenecio/kick_gaba3.mp3 b/packages/client/assets/sounds/noizenecio/kick_gaba3.mp3
new file mode 100644
index 0000000000..1791f26573
Binary files /dev/null and b/packages/client/assets/sounds/noizenecio/kick_gaba3.mp3 differ
diff --git a/packages/client/assets/sounds/noizenecio/kick_gaba4.mp3 b/packages/client/assets/sounds/noizenecio/kick_gaba4.mp3
new file mode 100644
index 0000000000..5f8bf468e5
Binary files /dev/null and b/packages/client/assets/sounds/noizenecio/kick_gaba4.mp3 differ
diff --git a/packages/client/assets/sounds/noizenecio/kick_gaba5.mp3 b/packages/client/assets/sounds/noizenecio/kick_gaba5.mp3
new file mode 100644
index 0000000000..dabe754b5b
Binary files /dev/null and b/packages/client/assets/sounds/noizenecio/kick_gaba5.mp3 differ
diff --git a/packages/client/assets/sounds/noizenecio/kick_gaba6.mp3 b/packages/client/assets/sounds/noizenecio/kick_gaba6.mp3
new file mode 100644
index 0000000000..57ecb01bda
Binary files /dev/null and b/packages/client/assets/sounds/noizenecio/kick_gaba6.mp3 differ
diff --git a/packages/client/assets/sounds/noizenecio/kick_gaba7.mp3 b/packages/client/assets/sounds/noizenecio/kick_gaba7.mp3
new file mode 100644
index 0000000000..6ba317deb1
Binary files /dev/null and b/packages/client/assets/sounds/noizenecio/kick_gaba7.mp3 differ
diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue
index 2729609522..579b5fe829 100644
--- a/packages/client/src/pages/settings/sounds.vue
+++ b/packages/client/src/pages/settings/sounds.vue
@@ -73,8 +73,13 @@ const soundsTypes = [
 	'aisha/1',
 	'aisha/2',
 	'aisha/3',
-	'noizenecio/kick_gaba',
+	'noizenecio/kick_gaba1',
 	'noizenecio/kick_gaba2',
+	'noizenecio/kick_gaba3',
+	'noizenecio/kick_gaba4',
+	'noizenecio/kick_gaba5',
+	'noizenecio/kick_gaba6',
+	'noizenecio/kick_gaba7',
 ];
 
 async function edit(type) {
-- 
cgit v1.2.3-freya


From 53fb516179bcd456cc5579cf84dbc2e43e111dff Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 8 Dec 2022 13:44:38 +0900
Subject: add todo

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index 578e736c83..87755916a7 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -175,6 +175,9 @@ onMounted(() => {
 		});
 	}
 
+	// TODO: アクティブな要素までスクロール
+	//itemsEl.scrollTo();
+
 	document.addEventListener('mousedown', onGlobalMousedown, { passive: true });
 });
 
-- 
cgit v1.2.3-freya


From e81c2962a0b04e38a4c974e50d2cd6bc495cbdf2 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 8 Dec 2022 14:49:49 +0900
Subject: enhance: AVIF support (#9281)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: Make image/avif browsersafe

* server side

* change FileInfoService

* :v:

* avifはMastodonでは絶望的 see https://github.com/misskey-dev/misskey/issues/9283

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 packages/backend/src/const.ts                      |  1 +
 packages/backend/src/core/DriveService.ts          |  9 ++++---
 packages/backend/src/core/FileInfoService.ts       | 29 +++++++++++++++++++---
 .../src/core/entities/DriveFileEntityService.ts    |  2 +-
 packages/backend/src/misc/is-mime-image.ts         |  2 +-
 packages/backend/src/server/FileServerService.ts   |  2 +-
 packages/client/src/const.ts                       |  1 +
 packages/client/src/pages/user/index.photos.vue    |  2 ++
 8 files changed, 38 insertions(+), 10 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/backend/src/const.ts b/packages/backend/src/const.ts
index 6d3b9559e8..e2203b6b45 100644
--- a/packages/backend/src/const.ts
+++ b/packages/backend/src/const.ts
@@ -12,6 +12,7 @@ export const FILE_TYPE_BROWSERSAFE = [
 	'image/gif',
 	'image/jpeg',
 	'image/webp',
+	'image/avif',
 	'image/apng',
 	'image/bmp',
 	'image/tiff',
diff --git a/packages/backend/src/core/DriveService.ts b/packages/backend/src/core/DriveService.ts
index 895073c32c..bbdb5fae83 100644
--- a/packages/backend/src/core/DriveService.ts
+++ b/packages/backend/src/core/DriveService.ts
@@ -138,6 +138,7 @@ export class DriveService {
 				if (type === 'image/jpeg') ext = '.jpg';
 				if (type === 'image/png') ext = '.png';
 				if (type === 'image/webp') ext = '.webp';
+				if (type === 'image/avif') ext = '.avif';
 				if (type === 'image/apng') ext = '.apng';
 				if (type === 'image/vnd.mozilla.apng') ext = '.apng';
 			}
@@ -262,7 +263,7 @@ export class DriveService {
 			}
 		}
 
-		if (!['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml'].includes(type)) {
+		if (!['image/jpeg', 'image/png', 'image/webp', 'image/avif', 'image/svg+xml'].includes(type)) {
 			this.registerLogger.debug('web image and thumbnail not created (not an required file)');
 			return {
 				webpublic: null,
@@ -287,7 +288,7 @@ export class DriveService {
 			}
 
 			satisfyWebpublic = !!(
-				type !== 'image/svg+xml' && type !== 'image/webp' &&
+				type !== 'image/svg+xml' && type !== 'image/webp' && type !== 'image/avif' &&
 			!(metadata.exif ?? metadata.iptc ?? metadata.xmp ?? metadata.tifftagPhotoshop) &&
 			metadata.width && metadata.width <= 2048 &&
 			metadata.height && metadata.height <= 2048
@@ -307,7 +308,7 @@ export class DriveService {
 			this.registerLogger.info('creating web image');
 
 			try {
-				if (['image/jpeg', 'image/webp'].includes(type)) {
+				if (['image/jpeg', 'image/webp', 'image/avif'].includes(type)) {
 					webpublic = await this.imageProcessingService.convertSharpToJpeg(img, 2048, 2048);
 				} else if (['image/png'].includes(type)) {
 					webpublic = await this.imageProcessingService.convertSharpToPng(img, 2048, 2048);
@@ -329,7 +330,7 @@ export class DriveService {
 		let thumbnail: IImage | null = null;
 
 		try {
-			if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml'].includes(type)) {
+			if (['image/jpeg', 'image/webp', 'image/avif', 'image/png', 'image/svg+xml'].includes(type)) {
 				thumbnail = await this.imageProcessingService.convertSharpToWebp(img, 498, 280);
 			} else {
 				this.registerLogger.debug('thumbnail not created (not an required file)');
diff --git a/packages/backend/src/core/FileInfoService.ts b/packages/backend/src/core/FileInfoService.ts
index bea1b3402e..8043993047 100644
--- a/packages/backend/src/core/FileInfoService.ts
+++ b/packages/backend/src/core/FileInfoService.ts
@@ -73,7 +73,18 @@ export class FileInfoService {
 		let height: number | undefined;
 		let orientation: number | undefined;
 
-		if (['image/jpeg', 'image/gif', 'image/png', 'image/apng', 'image/webp', 'image/bmp', 'image/tiff', 'image/svg+xml', 'image/vnd.adobe.photoshop'].includes(type.mime)) {
+		if ([
+			'image/png',
+			'image/gif',
+			'image/jpeg',
+			'image/webp',
+			'image/avif',
+			'image/apng',
+			'image/bmp',
+			'image/tiff',
+			'image/svg+xml',
+			'image/vnd.adobe.photoshop',
+		].includes(type.mime)) {
 			const imageSize = await this.detectImageSize(path).catch(e => {
 				warnings.push(`detectImageSize failed: ${e}`);
 				return undefined;
@@ -100,7 +111,15 @@ export class FileInfoService {
 
 		let blurhash: string | undefined;
 
-		if (['image/jpeg', 'image/gif', 'image/png', 'image/apng', 'image/webp', 'image/svg+xml'].includes(type.mime)) {
+		if ([
+			'image/jpeg',
+			'image/gif',
+			'image/png',
+			'image/apng',
+			'image/webp',
+			'image/avif',
+			'image/svg+xml',
+		].includes(type.mime)) {
 			blurhash = await this.getBlurhash(path).catch(e => {
 				warnings.push(`getBlurhash failed: ${e}`);
 				return undefined;
@@ -156,7 +175,11 @@ export class FileInfoService {
 			return [sensitive, porn];
 		}
 	
-		if (['image/jpeg', 'image/png', 'image/webp'].includes(mime)) {
+		if ([
+			'image/jpeg',
+			'image/png',
+			'image/webp',
+		].includes(mime)) {
 			const result = await this.aiService.detectSensitive(source);
 			if (result) {
 				[sensitive, porn] = judgePrediction(result);
diff --git a/packages/backend/src/core/entities/DriveFileEntityService.ts b/packages/backend/src/core/entities/DriveFileEntityService.ts
index 706c8c1186..7f54cfdeac 100644
--- a/packages/backend/src/core/entities/DriveFileEntityService.ts
+++ b/packages/backend/src/core/entities/DriveFileEntityService.ts
@@ -89,7 +89,7 @@ export class DriveFileEntityService {
 			}
 		}
 
-		const isImage = file.type && ['image/png', 'image/apng', 'image/gif', 'image/jpeg', 'image/webp', 'image/svg+xml'].includes(file.type);
+		const isImage = file.type && ['image/png', 'image/apng', 'image/gif', 'image/jpeg', 'image/webp', 'image/avif', 'image/svg+xml'].includes(file.type);
 
 		return thumbnail ? (file.thumbnailUrl ?? (isImage ? (file.webpublicUrl ?? file.url) : null)) : (file.webpublicUrl ?? file.url);
 	}
diff --git a/packages/backend/src/misc/is-mime-image.ts b/packages/backend/src/misc/is-mime-image.ts
index 8993ede33a..168a9a7af6 100644
--- a/packages/backend/src/misc/is-mime-image.ts
+++ b/packages/backend/src/misc/is-mime-image.ts
@@ -2,7 +2,7 @@ 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'],
+	'sharp-convertible-image': ['image/jpeg', 'image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/webp', 'image/avif', 'image/svg+xml'],
 };
 
 export const isMimeImage = (mime: string, type: keyof typeof dictionary): boolean => dictionary[type].includes(mime);
diff --git a/packages/backend/src/server/FileServerService.ts b/packages/backend/src/server/FileServerService.ts
index b7ab549611..8b1a130657 100644
--- a/packages/backend/src/server/FileServerService.ts
+++ b/packages/backend/src/server/FileServerService.ts
@@ -114,7 +114,7 @@ export class FileServerService {
 
 					const convertFile = async () => {
 						if (isThumbnail) {
-							if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml'].includes(mime)) {
+							if (['image/jpeg', 'image/webp', 'image/avif', 'image/png', 'image/svg+xml'].includes(mime)) {
 								return await this.imageProcessingService.convertToWebp(path, 498, 280);
 							} else if (mime.startsWith('video/')) {
 								return await this.videoProcessingService.generateVideoThumbnail(path);
diff --git a/packages/client/src/const.ts b/packages/client/src/const.ts
index 505cf2748e..77366cf07b 100644
--- a/packages/client/src/const.ts
+++ b/packages/client/src/const.ts
@@ -7,6 +7,7 @@ export const FILE_TYPE_BROWSERSAFE = [
 	'image/gif',
 	'image/jpeg',
 	'image/webp',
+	'image/avif',
 	'image/apng',
 	'image/bmp',
 	'image/tiff',
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index 5c9a73dcb7..fae2c005d8 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -47,6 +47,8 @@ function thumbnail(image: misskey.entities.DriveFile): string {
 onMounted(() => {
 	const image = [
 		'image/jpeg',
+		'image/webp',
+		'image/avif',
 		'image/png',
 		'image/gif',
 		'image/apng',
-- 
cgit v1.2.3-freya


From f89a16330564e54a7ecd8aa18fa727b713bfa6da Mon Sep 17 00:00:00 2001
From: Sam Smucny <smucny.sam@gmail.com>
Date: Thu, 8 Dec 2022 00:57:23 -0500
Subject: Add tooltips to visibility icons (#9287)

---
 packages/client/src/components/MkVisibility.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkVisibility.vue b/packages/client/src/components/MkVisibility.vue
index 739720bf91..ca1f9a6cd8 100644
--- a/packages/client/src/components/MkVisibility.vue
+++ b/packages/client/src/components/MkVisibility.vue
@@ -1,10 +1,10 @@
 <template>
-<span v-if="note.visibility !== 'public'" :class="$style.visibility">
+<span v-if="note.visibility !== 'public'" :class="$style.visibility" :title="i18n.ts._visibility[note.visibility]">
 	<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
 	<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
 	<i v-else-if="note.visibility === 'specified'" ref="specified" class="fas fa-envelope"></i>
 </span>
-<span v-if="note.localOnly" :class="$style.localOnly"><i class="fas fa-biohazard"></i></span>
+<span v-if="note.localOnly" :class="$style.localOnly" :title="i18n.ts._visibility['localOnly']"><i class="fas fa-biohazard"></i></span>
 </template>
 
 <script lang="ts" setup>
@@ -12,6 +12,7 @@ import { ref } from 'vue';
 import XDetails from '@/components/MkUsersTooltip.vue';
 import * as os from '@/os';
 import { useTooltip } from '@/scripts/use-tooltip';
+import { i18n } from '@/i18n';
 
 const props = defineProps<{
 	note: {
-- 
cgit v1.2.3-freya


From 2a86942f077723a60ea2f713cea46982afc164d3 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 8 Dec 2022 16:57:57 +0900
Subject: fix(client): use proxied image for instance icon

---
 packages/client/src/pages/instance-info.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index 6e8560ef42..6e13da0d68 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -4,7 +4,7 @@
 	<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"/>
+				<img :src="faviconUrl" alt="" class="icon"/>
 				<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
 			</div>
 			<MkKeyValue :copy="host" oneline style="margin: 1em 0;">
@@ -134,6 +134,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkPagination from '@/components/MkPagination.vue';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
 
 const props = defineProps<{
 	host: string;
@@ -145,6 +146,7 @@ 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 faviconUrl = $ref(null);
 
 const usersPagination = {
 	endpoint: iAmModerator ? 'admin/show-users' : 'users' as const,
@@ -163,6 +165,7 @@ async function fetch() {
 	});
 	suspended = instance.isSuspended;
 	isBlocked = instance.isBlocked;
+	faviconUrl = getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.iconUrl, 'preview');
 }
 
 async function toggleBlock(ev) {
-- 
cgit v1.2.3-freya


From 6d46e5cf7759e29abcfc63dea81e325c2870acea Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 8 Dec 2022 17:16:50 +0900
Subject: enhance: fallback option for media proxy

---
 packages/backend/src/server/MediaProxyServerService.ts | 17 +++++++++++++++++
 packages/client/src/scripts/media-proxy.ts             |  3 ++-
 2 files changed, 19 insertions(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/backend/src/server/MediaProxyServerService.ts b/packages/backend/src/server/MediaProxyServerService.ts
index 733a7feeb5..8ffcbe6bad 100644
--- a/packages/backend/src/server/MediaProxyServerService.ts
+++ b/packages/backend/src/server/MediaProxyServerService.ts
@@ -1,7 +1,10 @@
 import * as fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
 import { Inject, Injectable } from '@nestjs/common';
 import { FastifyInstance, FastifyPluginOptions, FastifyReply, FastifyRequest } from 'fastify';
 import sharp from 'sharp';
+import fastifyStatic from '@fastify/static';
 import { DI } from '@/di-symbols.js';
 import type { Config } from '@/config.js';
 import { isMimeImage } from '@/misc/is-mime-image.js';
@@ -16,6 +19,11 @@ import { FileInfoService } from '@/core/FileInfoService.js';
 import { LoggerService } from '@/core/LoggerService.js';
 import { bindThis } from '@/decorators.js';
 
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = dirname(_filename);
+
+const assets = `${_dirname}/../../server/file/assets/`;
+
 @Injectable()
 export class MediaProxyServerService {
 	private logger: Logger;
@@ -41,6 +49,11 @@ export class MediaProxyServerService {
 			done();
 		});
 
+		fastify.register(fastifyStatic, {
+			root: _dirname,
+			serve: false,
+		});
+
 		fastify.get<{
 			Params: { url: string; };
 			Querystring: { url?: string; };
@@ -125,6 +138,10 @@ export class MediaProxyServerService {
 			return image.data;
 		} catch (err) {
 			this.logger.error(`${err}`);
+
+			if ('fallback' in request.query) {
+				return reply.sendFile('/dummy.png', assets);
+			}
 	
 			if (err instanceof StatusError && (err.statusCode === 302 || err.isClientError)) {
 				reply.code(err.statusCode);
diff --git a/packages/client/src/scripts/media-proxy.ts b/packages/client/src/scripts/media-proxy.ts
index 506cb78291..aaf7f9e610 100644
--- a/packages/client/src/scripts/media-proxy.ts
+++ b/packages/client/src/scripts/media-proxy.ts
@@ -4,7 +4,8 @@ import { url } from '@/config';
 export function getProxiedImageUrl(imageUrl: string, type?: 'preview'): string {
 	return `${url}/proxy/image.webp?${query({
 		url: imageUrl,
-		...(type ? { [type]: "1" } : {}),
+		fallback: '1',
+		...(type ? { [type]: '1' } : {}),
 	})}`;
 }
 
-- 
cgit v1.2.3-freya


From e4c2bba89a61280137c1dda2a4e72f8139346b92 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 8 Dec 2022 17:33:04 +0900
Subject: fix(client): use proxied image for instance icon

---
 packages/client/assets/dummy.png                         | Bin 0 -> 6285 bytes
 packages/client/src/ui/_common_/statusbar-federation.vue |   7 ++++++-
 packages/client/src/widgets/federation.vue               |   7 ++++++-
 packages/client/src/widgets/instance-cloud.vue           |   7 ++++++-
 4 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 packages/client/assets/dummy.png

(limited to 'packages/client/src')

diff --git a/packages/client/assets/dummy.png b/packages/client/assets/dummy.png
new file mode 100644
index 0000000000..39332b0c1b
Binary files /dev/null and b/packages/client/assets/dummy.png differ
diff --git a/packages/client/src/ui/_common_/statusbar-federation.vue b/packages/client/src/ui/_common_/statusbar-federation.vue
index 7d4f0d6166..24fc4f6f6d 100644
--- a/packages/client/src/ui/_common_/statusbar-federation.vue
+++ b/packages/client/src/ui/_common_/statusbar-federation.vue
@@ -4,7 +4,7 @@
 		<transition name="change" mode="default">
 			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
 				<span v-for="instance in instances" :key="instance.id" class="item" :class="{ colored }" :style="{ background: colored ? instance.themeColor : null }">
-					<img v-if="instance.iconUrl" class="icon" :src="instance.iconUrl" alt=""/>
+					<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
 					<MkA :to="`/instance-info/${instance.host}`" class="host _monospace">
 						{{ instance.host }}
 					</MkA>
@@ -27,6 +27,7 @@ import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
 import { getNoteSummary } from '@/scripts/get-note-summary';
 import { notePage } from '@/filters/note';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
 
 const props = defineProps<{
 	display?: 'marquee' | 'oneByOne';
@@ -56,6 +57,10 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
 	immediate: true,
 	afterMounted: true,
 });
+
+function getInstanceIcon(instance): string {
+	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index e07cab5bfa..d0f81c1356 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -6,7 +6,7 @@
 		<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=""/>
+				<img :src="getInstanceIcon(instance)" alt=""/>
 				<div class="body">
 					<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">{{ instance.host }}</a>
 					<p>{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</p>
@@ -27,6 +27,7 @@ import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
 import { i18n } from '@/i18n';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
 
 const name = 'federation';
 
@@ -71,6 +72,10 @@ useInterval(fetch, 1000 * 60, {
 	afterMounted: true,
 });
 
+function getInstanceIcon(instance): string {
+	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+}
+
 defineExpose<WidgetComponentExpose>({
 	name,
 	configure,
diff --git a/packages/client/src/widgets/instance-cloud.vue b/packages/client/src/widgets/instance-cloud.vue
index f8e463ee33..4965616995 100644
--- a/packages/client/src/widgets/instance-cloud.vue
+++ b/packages/client/src/widgets/instance-cloud.vue
@@ -4,7 +4,7 @@
 		<MkTagCloud v-if="activeInstances">
 			<li v-for="instance in activeInstances" :key="instance.id">
 				<a @click.prevent="onInstanceClick(instance)">
-					<img style="width: 32px;" :src="instance.iconUrl">
+					<img style="width: 32px;" :src="getInstanceIcon(instance)">
 				</a>
 			</li>
 		</MkTagCloud>
@@ -20,6 +20,7 @@ import MkContainer from '@/components/MkContainer.vue';
 import MkTagCloud from '@/components/MkTagCloud.vue';
 import * as os from '@/os';
 import { useInterval } from '@/scripts/use-interval';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
 
 const name = 'instanceCloud';
 
@@ -64,6 +65,10 @@ useInterval(() => {
 	afterMounted: true,
 });
 
+function getInstanceIcon(instance): string {
+	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+}
+
 defineExpose<WidgetComponentExpose>({
 	name,
 	configure,
-- 
cgit v1.2.3-freya


From 2f9de0c7651d52adadcda8c17d3e523f4be7634d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 10 Dec 2022 16:39:04 +0900
Subject: re-enable chartjs-plugin-gradient

---
 packages/client/src/components/MkChart.vue | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkChart.vue b/packages/client/src/components/MkChart.vue
index 31e95404fa..29dac3c9cb 100644
--- a/packages/client/src/components/MkChart.vue
+++ b/packages/client/src/components/MkChart.vue
@@ -34,9 +34,7 @@ import {
 import 'chartjs-adapter-date-fns';
 import { enUS } from 'date-fns/locale';
 import zoomPlugin from 'chartjs-plugin-zoom';
-// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114242002
-// We can't use gradient because Vite throws a error.
-//import gradient from 'chartjs-plugin-gradient';
+import gradient from 'chartjs-plugin-gradient';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip';
@@ -97,7 +95,7 @@ Chart.register(
 	SubTitle,
 	Filler,
 	zoomPlugin,
-	//gradient,
+	gradient,
 );
 
 const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
@@ -191,7 +189,7 @@ const render = () => {
 				borderJoinStyle: 'round',
 				borderRadius: props.bar ? 3 : undefined,
 				backgroundColor: props.bar ? (x.color ? x.color : getColor(i)) : alpha(x.color ? x.color : getColor(i), 0.1),
-				/*gradient: props.bar ? undefined : {
+				gradient: props.bar ? undefined : {
 					backgroundColor: {
 						axis: 'y',
 						colors: {
@@ -199,7 +197,7 @@ const render = () => {
 							[maxes[i]]: alpha(x.color ? x.color : getColor(i), 0.2),
 						},
 					},
-				},*/
+				},
 				barPercentage: 0.9,
 				categoryPercentage: 0.9,
 				fill: x.type === 'area',
@@ -310,7 +308,7 @@ const render = () => {
 						},
 					},
 				} : undefined,
-				//gradient,
+				gradient,
 			},
 		},
 		plugins: [{
-- 
cgit v1.2.3-freya


From b3ec605ec31b101cd93cb9e1d77dee125ea3cdfc Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 10 Dec 2022 16:48:45 +0900
Subject: :art:

---
 packages/client/src/widgets/server-metric/cpu-mem.vue | 2 +-
 packages/client/src/widgets/server-metric/net.vue     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/widgets/server-metric/cpu-mem.vue b/packages/client/src/widgets/server-metric/cpu-mem.vue
index 00c3a10c9b..429ccdf3ae 100644
--- a/packages/client/src/widgets/server-metric/cpu-mem.vue
+++ b/packages/client/src/widgets/server-metric/cpu-mem.vue
@@ -155,7 +155,7 @@ function onStatsLog(statsLog) {
 		}
 
 		> text {
-			font-size: 5px;
+			font-size: 4.5px;
 			fill: currentColor;
 
 			> tspan {
diff --git a/packages/client/src/widgets/server-metric/net.vue b/packages/client/src/widgets/server-metric/net.vue
index b698953f97..82801964f3 100644
--- a/packages/client/src/widgets/server-metric/net.vue
+++ b/packages/client/src/widgets/server-metric/net.vue
@@ -128,7 +128,7 @@ function onStatsLog(statsLog) {
 		}
 
 		> text {
-			font-size: 5px;
+			font-size: 4.5px;
 			fill: currentColor;
 
 			> tspan {
-- 
cgit v1.2.3-freya


From fc44d4c9f9f291930f2e20541dd7da14d8471aaa Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 10 Dec 2022 16:52:05 +0900
Subject: fix(client): use proxied image for instance icon

---
 packages/client/src/components/MkInstanceCardMini.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkInstanceCardMini.vue b/packages/client/src/components/MkInstanceCardMini.vue
index f6e2f4eaa7..4625de40af 100644
--- a/packages/client/src/components/MkInstanceCardMini.vue
+++ b/packages/client/src/components/MkInstanceCardMini.vue
@@ -1,6 +1,6 @@
 <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=""/>
+	<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
 	<div class="body">
 		<span class="host">{{ instance.name ?? instance.host }}</span>
 		<span class="sub _monospace"><b>{{ instance.host }}</b> / {{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</span>
@@ -13,6 +13,7 @@
 import * as misskey from 'misskey-js';
 import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
 
 const props = defineProps<{
 	instance: misskey.entities.Instance;
@@ -25,6 +26,10 @@ os.apiGet('charts/instance', { host: props.instance.host, limit: 16 + 1, span: '
 	res.requests.received.splice(0, 1);
 	chartValues = res.requests.received;
 });
+
+function getInstanceIcon(instance): string {
+	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+}
 </script>
 
 <style lang="scss" module>
-- 
cgit v1.2.3-freya


From 8211893210812fe02d3a798df05f0434a54dd973 Mon Sep 17 00:00:00 2001
From: Kagami Sascha Rosylight <saschanaz@outlook.com>
Date: Mon, 12 Dec 2022 19:27:47 +0900
Subject: Fix lint errors (except
 `@typescript-eslint/prefer-nullish-coalescing`) (#9311)

* `yarn workspace client run lint --fix`

* `eslint-disable-next-line no-var` for service worker self

* A few more manual sw fixes

* word change
---
 packages/client/src/components/MkCwButton.vue        |  2 +-
 packages/client/src/nirax.ts                         |  2 +-
 packages/client/src/pages/settings/index.vue         |  2 +-
 packages/client/src/pages/settings/theme.manage.vue  |  2 +-
 packages/client/src/pages/settings/theme.vue         |  4 ++--
 packages/client/src/pages/user/index.activity.vue    |  2 +-
 packages/client/src/scripts/theme-editor.ts          |  6 +++---
 packages/client/src/ui/deck/column.vue               |  2 +-
 packages/client/src/ui/deck/notifications-column.vue |  2 +-
 packages/sw/src/scripts/create-notification.ts       | 10 +++++++---
 packages/sw/src/scripts/lang.ts                      |  2 --
 packages/sw/src/scripts/notification-read.ts         |  2 --
 packages/sw/src/scripts/operations.ts                |  3 +++
 packages/sw/src/scripts/url.ts                       |  2 +-
 packages/sw/src/sw.ts                                |  3 ++-
 15 files changed, 25 insertions(+), 21 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue
index dd906f9bf3..a473d682a9 100644
--- a/packages/client/src/components/MkCwButton.vue
+++ b/packages/client/src/components/MkCwButton.vue
@@ -24,7 +24,7 @@ const emit = defineEmits<{
 const label = computed(() => {
 	return concat([
 		props.note.text ? [i18n.t('_cw.chars', { count: length(props.note.text) })] : [],
-		props.note.files && props.note.files.length !== 0 ? [i18n.t('_cw.files', { count: props.note.files.length }) ] : [],
+		props.note.files && props.note.files.length !== 0 ? [i18n.t('_cw.files', { count: props.note.files.length })] : [],
 		props.note.poll != null ? [i18n.ts.poll] : []
 	] as string[][]).join(' / ');
 });
diff --git a/packages/client/src/nirax.ts b/packages/client/src/nirax.ts
index 0ee39bf473..53e73a8d48 100644
--- a/packages/client/src/nirax.ts
+++ b/packages/client/src/nirax.ts
@@ -105,7 +105,7 @@ export class Router extends EventEmitter<{
 		function check(routes: RouteDef[], _parts: string[]): Resolved | null {
 			forEachRouteLoop:
 			for (const route of routes) {
-				let parts = [ ..._parts ];
+				let parts = [..._parts];
 				const props = new Map<string, string>();
 
 				pathMatchLoop:
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 73407ff5fb..c38e1394f0 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -27,7 +27,7 @@ import { i18n } from '@/i18n';
 import MkInfo from '@/components/MkInfo.vue';
 import MkSuperMenu from '@/components/MkSuperMenu.vue';
 import { scroll } from '@/scripts/scroll';
-import { signout , $i } from '@/account';
+import { signout, $i } from '@/account';
 import { unisonReload } from '@/scripts/unison-reload';
 import { instance } from '@/instance';
 import { useRouter } from '@/router';
diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue
index 792bb15e5d..25f92e6ed1 100644
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ b/packages/client/src/pages/settings/theme.manage.vue
@@ -43,7 +43,7 @@ const installedThemes = ref(getThemes());
 const builtinThemes = getBuiltinThemesRef();
 const selectedThemeId = ref(null);
 
-const themes = computed(() => [ ...installedThemes.value, ...builtinThemes.value ]);
+const themes = computed(() => [...installedThemes.value, ...builtinThemes.value]);
 
 const selectedTheme = computed(() => {
 	if (selectedThemeId.value == null) return null;
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 6571a881a9..42a91bcb59 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -76,7 +76,7 @@ import FormButton from '@/components/MkButton.vue';
 import { getBuiltinThemesRef } from '@/scripts/theme';
 import { selectFile } from '@/scripts/select-file';
 import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
-import { ColdDeviceStorage , defaultStore } from '@/store';
+import { ColdDeviceStorage, defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';
 import { uniqueBy } from '@/scripts/array';
@@ -92,7 +92,7 @@ const builtinDarkThemes = computed(() => builtinThemes.value.filter(t => t.base
 const instanceLightTheme = computed(() => instance.defaultLightTheme ? JSON5.parse(instance.defaultLightTheme) : null);
 const installedLightThemes = computed(() => installedThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
 const builtinLightThemes = computed(() => builtinThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
-const themes = computed(() => uniqueBy([ instanceDarkTheme.value, instanceLightTheme.value, ...builtinThemes.value, ...installedThemes.value ].filter(x => x != null), theme => theme.id));
+const themes = computed(() => uniqueBy([instanceDarkTheme.value, instanceLightTheme.value, ...builtinThemes.value, ...installedThemes.value].filter(x => x != null), theme => theme.id));
 
 const darkTheme = ColdDeviceStorage.ref('darkTheme');
 const darkThemeId = computed({
diff --git a/packages/client/src/pages/user/index.activity.vue b/packages/client/src/pages/user/index.activity.vue
index 43c2ed8b04..630a2cea7d 100644
--- a/packages/client/src/pages/user/index.activity.vue
+++ b/packages/client/src/pages/user/index.activity.vue
@@ -37,7 +37,7 @@ function showMenu(ev: MouseEvent) {
 		action: () => {
 			chartSrc = 'per-user-notes';
 		},
-	},/*, {
+	}, /*, {
 		text: i18n.ts.following,
 		action: () => {
 			chartSrc = 'per-user-following';
diff --git a/packages/client/src/scripts/theme-editor.ts b/packages/client/src/scripts/theme-editor.ts
index 2c917e280d..6d88d6856c 100644
--- a/packages/client/src/scripts/theme-editor.ts
+++ b/packages/client/src/scripts/theme-editor.ts
@@ -54,7 +54,7 @@ export const toThemeString = (value: Color | Func | RefProp | RefConst | Css) =>
 
 export const convertToMisskeyTheme = (vm: ThemeViewModel, name: string, desc: string, author: string, base: 'dark' | 'light'): Theme => {
 	const props = { } as { [key: string]: string };
-	for (const [ key, value ] of vm) {
+	for (const [key, value] of vm) {
 		if (value === null) continue;
 		props[key] = toThemeString(value);
 	}
@@ -68,13 +68,13 @@ export const convertToMisskeyTheme = (vm: ThemeViewModel, name: string, desc: st
 export const convertToViewModel = (theme: Theme): ThemeViewModel => {
 	const vm: ThemeViewModel = [];
 	// プロパティの登録
-	vm.push(...themeProps.map(key => [ key, fromThemeString(theme.props[key])] as [ string, ThemeValue ]));
+	vm.push(...themeProps.map(key => [key, fromThemeString(theme.props[key])] as [ string, ThemeValue ]));
 
 	// 定数の登録
 	const consts = Object
 		.keys(theme.props)
 		.filter(k => k.startsWith('$'))
-		.map(k => [ k, fromThemeString(theme.props[k]) ] as [ string, ThemeValue ]);
+		.map(k => [k, fromThemeString(theme.props[k])] as [ string, ThemeValue ]);
 
 		vm.push(...consts);
 	return vm;
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index 7b30ffad45..d16c23d100 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -33,7 +33,7 @@
 
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted, provide, Ref, watch } from 'vue';
-import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn, Column , deckStore } from './deck-store';
+import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn, Column, deckStore } from './deck-store';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { MenuItem } from '@/types/menu';
diff --git a/packages/client/src/ui/deck/notifications-column.vue b/packages/client/src/ui/deck/notifications-column.vue
index b02118ee56..e77b849ef4 100644
--- a/packages/client/src/ui/deck/notifications-column.vue
+++ b/packages/client/src/ui/deck/notifications-column.vue
@@ -9,7 +9,7 @@
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue';
 import XColumn from './column.vue';
-import { updateColumn , Column } from './deck-store';
+import { updateColumn, Column } from './deck-store';
 import XNotifications from '@/components/MkNotifications.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
diff --git a/packages/sw/src/scripts/create-notification.ts b/packages/sw/src/scripts/create-notification.ts
index 7c95e8e41f..cbc86d1d7e 100644
--- a/packages/sw/src/scripts/create-notification.ts
+++ b/packages/sw/src/scripts/create-notification.ts
@@ -1,6 +1,9 @@
 /*
  * Notification manager for SW
  */
+
+// TODO: remove this declaration when https://github.com/microsoft/TypeScript/issues/11781 closes
+// eslint-disable-next-line no-var
 declare var self: ServiceWorkerGlobalScope;
 
 import { swLang } from '@/scripts/lang';
@@ -40,7 +43,7 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 		*/
 		case 'notification':
 			switch (data.body.type) {
-				case 'follow':
+				case 'follow': {
 					// users/showの型定義をswos.apiへ当てはめるのが困難なのでapiFetch.requestを直接使用
 					const account = await getAccountFromId(data.userId);
 					if (!account) return null;
@@ -57,6 +60,7 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 							}
 						],
 					}];
+				}
 
 				case 'mention':
 					return [t('_notification.youGotMention', { name: getUserName(data.body.user) }), {
@@ -120,7 +124,7 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 						],
 					}];
 
-				case 'reaction':
+				case 'reaction': {
 					let reaction = data.body.reaction;
 					let badge: string | undefined;
 
@@ -150,7 +154,6 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 						badge = `/twemoji-badge/${char2fileName(reaction)}.png`;
 					}
 
-
 					if (badge ? await fetch(badge).then(res => res.status !== 200).catch(() => true) : true) {
 						badge = iconUrl('plus');
 					}
@@ -167,6 +170,7 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 							}
 						],
 					}];
+				}
 
 				case 'pollVote':
 					return [t('_notification.youGotPoll', { name: getUserName(data.body.user) }), {
diff --git a/packages/sw/src/scripts/lang.ts b/packages/sw/src/scripts/lang.ts
index 2d05404ef9..39bd333aba 100644
--- a/packages/sw/src/scripts/lang.ts
+++ b/packages/sw/src/scripts/lang.ts
@@ -1,8 +1,6 @@
 /*
  * Language manager for SW
  */
-declare var self: ServiceWorkerGlobalScope;
-
 import { get, set } from 'idb-keyval';
 import { I18n } from '@/scripts/i18n';
 
diff --git a/packages/sw/src/scripts/notification-read.ts b/packages/sw/src/scripts/notification-read.ts
index 5c1de89088..5ad748b849 100644
--- a/packages/sw/src/scripts/notification-read.ts
+++ b/packages/sw/src/scripts/notification-read.ts
@@ -1,5 +1,3 @@
-declare var self: ServiceWorkerGlobalScope;
-
 import { get } from 'idb-keyval';
 import { pushNotificationDataMap } from '@/types';
 import { api } from '@/scripts/operations';
diff --git a/packages/sw/src/scripts/operations.ts b/packages/sw/src/scripts/operations.ts
index 02cf0d96cf..dc24315aea 100644
--- a/packages/sw/src/scripts/operations.ts
+++ b/packages/sw/src/scripts/operations.ts
@@ -2,6 +2,9 @@
  * Operations
  * 各種操作
  */
+
+// TODO: remove this declaration when https://github.com/microsoft/TypeScript/issues/11781 closes
+// eslint-disable-next-line no-var
 declare var self: ServiceWorkerGlobalScope;
 
 import * as Misskey from 'misskey-js';
diff --git a/packages/sw/src/scripts/url.ts b/packages/sw/src/scripts/url.ts
index c7f2b7c1e7..1266bfedfd 100644
--- a/packages/sw/src/scripts/url.ts
+++ b/packages/sw/src/scripts/url.ts
@@ -1,4 +1,4 @@
-export function query(obj: {}): string {
+export function query(obj: object): 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>);
diff --git a/packages/sw/src/sw.ts b/packages/sw/src/sw.ts
index 92391f1fb8..3d2413ab2e 100644
--- a/packages/sw/src/sw.ts
+++ b/packages/sw/src/sw.ts
@@ -1,3 +1,5 @@
+// TODO: remove this declaration when https://github.com/microsoft/TypeScript/issues/11781 closes
+// eslint-disable-next-line no-var
 declare var self: ServiceWorkerGlobalScope;
 
 import { createEmptyNotification, createNotification } from '@/scripts/create-notification';
@@ -176,7 +178,6 @@ self.addEventListener('notificationclick', <K extends keyof pushNotificationData
 		}
 	
 		notification.close();
-	
 	})());
 });
 
-- 
cgit v1.2.3-freya


From 0294555e2b7899ddd5440de485ba629b4b3fffb5 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 12 Dec 2022 21:01:43 +0900
Subject: refactor(client): Create root.vue and select the ui in it (#9312)

---
 packages/client/src/init.ts  |  9 ++-------
 packages/client/src/root.vue | 19 +++++++++++++++++++
 2 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 packages/client/src/root.vue

(limited to 'packages/client/src')

diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index f9e08d79b1..f7a043bcf4 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -38,6 +38,7 @@ import { reloadChannel } from '@/scripts/unison-reload';
 import { reactionPicker } from '@/scripts/reaction-picker';
 import { getUrlWithoutLoginId } from '@/scripts/login-id';
 import { getAccountFromId } from '@/scripts/get-account-from-id';
+import rootComponent from '@/root.vue';
 
 (async () => {
 	console.info(`Misskey v${version}`);
@@ -158,13 +159,7 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
 		initializeSw();
 	});
 
-	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 === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
-		defineAsyncComponent(() => import('@/ui/universal.vue')),
-	);
+	const app = createApp(rootComponent);
 
 	if (_DEV_) {
 		app.config.performance = true;
diff --git a/packages/client/src/root.vue b/packages/client/src/root.vue
new file mode 100644
index 0000000000..d0bc5ffe90
--- /dev/null
+++ b/packages/client/src/root.vue
@@ -0,0 +1,19 @@
+<template>
+<ZenUi v-if="searchString === '?zen'" />
+<VisitorUi v-else-if="!$i" />
+<DeckUi v-else-if="ui === 'deck'" />
+<ClassicUi v-else-if="ui === 'classic'" />
+<UniversalUi v-else />
+</template>
+
+<script lang="ts" setup>
+import ZenUi from '@/ui/zen.vue';
+import VisitorUi from '@/ui/visitor.vue';
+import DeckUi from '@/ui/deck.vue';
+import ClassicUi from '@/ui/classic.vue';
+import UniversalUi from '@/ui/universal.vue';
+import { $i } from '@/account';
+import { ui } from '@/config';
+
+const searchString = window.location.search;
+</script>
-- 
cgit v1.2.3-freya


From f4f293d5f3eb6101a7e21bce8631863f1b4d1783 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Wed, 14 Dec 2022 13:35:18 +0900
Subject: fix(client): Downgrade to Vite v3 (#9313)

* Revert "refactor(client): Create root.vue and select the ui in it (#9312)"

This reverts commit 0294555e2b7899ddd5440de485ba629b4b3fffb5.

* use vite v3

* Revert "Revert "refactor(client): Create root.vue and select the ui in it (#9312)""

This reverts commit 56910e27fbad352f3cb8324a167aaf1446cea7c2.

* Revert "refactor(client): Create root.vue and select the ui in it (#9312)"

This reverts commit 0294555e2b7899ddd5440de485ba629b4b3fffb5.

* use vite@3.2.4

* update to v3.2.5
---
 packages/client/package.json |   4 +-
 packages/client/src/init.ts  |   9 +-
 packages/client/src/root.vue |  19 --
 yarn.lock                    | 445 +++++++++++++++++++++++--------------------
 4 files changed, 244 insertions(+), 233 deletions(-)
 delete mode 100644 packages/client/src/root.vue

(limited to 'packages/client/src')

diff --git a/packages/client/package.json b/packages/client/package.json
index 42e5c9ed01..25689f9446 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -13,7 +13,7 @@
 		"@rollup/plugin-json": "5.0.2",
 		"@rollup/pluginutils": "5.0.2",
 		"@syuilo/aiscript": "0.11.1",
-		"@vitejs/plugin-vue": "4.0.0",
+		"@vitejs/plugin-vue": "3",
 		"@vue/compiler-sfc": "3.2.45",
 		"autobind-decorator": "2.4.0",
 		"autosize": "5.0.2",
@@ -57,7 +57,6 @@
 		"typescript": "4.9.4",
 		"uuid": "9.0.0",
 		"vanilla-tilt": "1.7.3",
-		"vite": "4.0.0",
 		"vue": "3.2.45",
 		"vue-prism-editor": "2.0.0-alpha.2",
 		"vuedraggable": "4.0.1"
@@ -85,6 +84,7 @@
 		"eslint-plugin-vue": "9.8.0",
 		"rollup": "3.7.2",
 		"start-server-and-test": "1.15.2",
+		"vite": "3.2.5",
 		"vue-eslint-parser": "^9.1.0"
 	}
 }
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index f7a043bcf4..f9e08d79b1 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -38,7 +38,6 @@ import { reloadChannel } from '@/scripts/unison-reload';
 import { reactionPicker } from '@/scripts/reaction-picker';
 import { getUrlWithoutLoginId } from '@/scripts/login-id';
 import { getAccountFromId } from '@/scripts/get-account-from-id';
-import rootComponent from '@/root.vue';
 
 (async () => {
 	console.info(`Misskey v${version}`);
@@ -159,7 +158,13 @@ import rootComponent from '@/root.vue';
 		initializeSw();
 	});
 
-	const app = createApp(rootComponent);
+	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 === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
+		defineAsyncComponent(() => import('@/ui/universal.vue')),
+	);
 
 	if (_DEV_) {
 		app.config.performance = true;
diff --git a/packages/client/src/root.vue b/packages/client/src/root.vue
deleted file mode 100644
index d0bc5ffe90..0000000000
--- a/packages/client/src/root.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-<ZenUi v-if="searchString === '?zen'" />
-<VisitorUi v-else-if="!$i" />
-<DeckUi v-else-if="ui === 'deck'" />
-<ClassicUi v-else-if="ui === 'classic'" />
-<UniversalUi v-else />
-</template>
-
-<script lang="ts" setup>
-import ZenUi from '@/ui/zen.vue';
-import VisitorUi from '@/ui/visitor.vue';
-import DeckUi from '@/ui/deck.vue';
-import ClassicUi from '@/ui/classic.vue';
-import UniversalUi from '@/ui/universal.vue';
-import { $i } from '@/account';
-import { ui } from '@/config';
-
-const searchString = window.location.search;
-</script>
diff --git a/yarn.lock b/yarn.lock
index 2b72b2180b..7344acae43 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -651,76 +651,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm64@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/android-arm64@npm:0.16.4"
-  conditions: os=android & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@esbuild/android-arm@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/android-arm@npm:0.16.4"
+"@esbuild/android-arm@npm:0.15.18":
+  version: 0.15.18
+  resolution: "@esbuild/android-arm@npm:0.15.18"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@esbuild/android-x64@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/android-x64@npm:0.16.4"
-  conditions: os=android & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@esbuild/darwin-arm64@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/darwin-arm64@npm:0.16.4"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@esbuild/darwin-x64@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/darwin-x64@npm:0.16.4"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@esbuild/freebsd-arm64@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/freebsd-arm64@npm:0.16.4"
-  conditions: os=freebsd & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@esbuild/freebsd-x64@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/freebsd-x64@npm:0.16.4"
-  conditions: os=freebsd & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@esbuild/linux-arm64@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/linux-arm64@npm:0.16.4"
-  conditions: os=linux & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@esbuild/linux-arm@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/linux-arm@npm:0.16.4"
-  conditions: os=linux & cpu=arm
-  languageName: node
-  linkType: hard
-
-"@esbuild/linux-ia32@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/linux-ia32@npm:0.16.4"
-  conditions: os=linux & cpu=ia32
-  languageName: node
-  linkType: hard
-
 "@esbuild/linux-loong64@npm:0.14.54":
   version: 0.14.54
   resolution: "@esbuild/linux-loong64@npm:0.14.54"
@@ -728,90 +665,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-loong64@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/linux-loong64@npm:0.16.4"
+"@esbuild/linux-loong64@npm:0.15.18":
+  version: 0.15.18
+  resolution: "@esbuild/linux-loong64@npm:0.15.18"
   conditions: os=linux & cpu=loong64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-mips64el@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/linux-mips64el@npm:0.16.4"
-  conditions: os=linux & cpu=mips64el
-  languageName: node
-  linkType: hard
-
-"@esbuild/linux-ppc64@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/linux-ppc64@npm:0.16.4"
-  conditions: os=linux & cpu=ppc64
-  languageName: node
-  linkType: hard
-
-"@esbuild/linux-riscv64@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/linux-riscv64@npm:0.16.4"
-  conditions: os=linux & cpu=riscv64
-  languageName: node
-  linkType: hard
-
-"@esbuild/linux-s390x@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/linux-s390x@npm:0.16.4"
-  conditions: os=linux & cpu=s390x
-  languageName: node
-  linkType: hard
-
-"@esbuild/linux-x64@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/linux-x64@npm:0.16.4"
-  conditions: os=linux & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@esbuild/netbsd-x64@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/netbsd-x64@npm:0.16.4"
-  conditions: os=netbsd & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@esbuild/openbsd-x64@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/openbsd-x64@npm:0.16.4"
-  conditions: os=openbsd & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@esbuild/sunos-x64@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/sunos-x64@npm:0.16.4"
-  conditions: os=sunos & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@esbuild/win32-arm64@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/win32-arm64@npm:0.16.4"
-  conditions: os=win32 & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@esbuild/win32-ia32@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/win32-ia32@npm:0.16.4"
-  conditions: os=win32 & cpu=ia32
-  languageName: node
-  linkType: hard
-
-"@esbuild/win32-x64@npm:0.16.4":
-  version: 0.16.4
-  resolution: "@esbuild/win32-x64@npm:0.16.4"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@eslint/eslintrc@npm:^1.3.3":
   version: 1.3.3
   resolution: "@eslint/eslintrc@npm:1.3.3"
@@ -3055,13 +2915,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitejs/plugin-vue@npm:4.0.0":
-  version: 4.0.0
-  resolution: "@vitejs/plugin-vue@npm:4.0.0"
+"@vitejs/plugin-vue@npm:3":
+  version: 3.2.0
+  resolution: "@vitejs/plugin-vue@npm:3.2.0"
   peerDependencies:
-    vite: ^4.0.0
+    vite: ^3.0.0
     vue: ^3.2.25
-  checksum: 5a53414912db644ca7a663d87c8d4838841dbf794772105c9b3bc3fb10214fc86c2f1f1a47350f264370e9a5fd2475f3b6882778b2440b5085d3fe7550ced542
+  checksum: 64774f770e0e21ce7eb36743d614e3f197a35f5b67b2d3800c61766e649f43dc497bb037738ffafd607eb488064ab132c23766190e7ab557a0b88c0051f7a794
   languageName: node
   linkType: hard
 
@@ -5093,7 +4953,7 @@ __metadata:
     "@types/ws": 8.5.3
     "@typescript-eslint/eslint-plugin": 5.46.0
     "@typescript-eslint/parser": 5.46.0
-    "@vitejs/plugin-vue": 4.0.0
+    "@vitejs/plugin-vue": 3
     "@vue/compiler-sfc": 3.2.45
     autobind-decorator: 2.4.0
     autosize: 5.0.2
@@ -5144,7 +5004,7 @@ __metadata:
     typescript: 4.9.4
     uuid: 9.0.0
     vanilla-tilt: 1.7.3
-    vite: 4.0.0
+    vite: 3.2.5
     vue: 3.2.45
     vue-eslint-parser: ^9.1.0
     vue-prism-editor: 2.0.0-alpha.2
@@ -6705,6 +6565,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-android-64@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-android-64@npm:0.15.18"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
 "esbuild-android-arm64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-android-arm64@npm:0.14.54"
@@ -6712,6 +6579,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-android-arm64@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-android-arm64@npm:0.15.18"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "esbuild-darwin-64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-darwin-64@npm:0.14.54"
@@ -6719,6 +6593,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-darwin-64@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-darwin-64@npm:0.15.18"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
 "esbuild-darwin-arm64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-darwin-arm64@npm:0.14.54"
@@ -6726,6 +6607,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-darwin-arm64@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-darwin-arm64@npm:0.15.18"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "esbuild-freebsd-64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-freebsd-64@npm:0.14.54"
@@ -6733,6 +6621,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-freebsd-64@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-freebsd-64@npm:0.15.18"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "esbuild-freebsd-arm64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-freebsd-arm64@npm:0.14.54"
@@ -6740,6 +6635,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-freebsd-arm64@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-freebsd-arm64@npm:0.15.18"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "esbuild-linux-32@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-linux-32@npm:0.14.54"
@@ -6747,6 +6649,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-linux-32@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-linux-32@npm:0.15.18"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "esbuild-linux-64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-linux-64@npm:0.14.54"
@@ -6754,6 +6663,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-linux-64@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-linux-64@npm:0.15.18"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
 "esbuild-linux-arm64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-linux-arm64@npm:0.14.54"
@@ -6761,6 +6677,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-linux-arm64@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-linux-arm64@npm:0.15.18"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "esbuild-linux-arm@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-linux-arm@npm:0.14.54"
@@ -6768,6 +6691,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-linux-arm@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-linux-arm@npm:0.15.18"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
 "esbuild-linux-mips64le@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-linux-mips64le@npm:0.14.54"
@@ -6775,6 +6705,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-linux-mips64le@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-linux-mips64le@npm:0.15.18"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
 "esbuild-linux-ppc64le@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-linux-ppc64le@npm:0.14.54"
@@ -6782,6 +6719,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-linux-ppc64le@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-linux-ppc64le@npm:0.15.18"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
 "esbuild-linux-riscv64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-linux-riscv64@npm:0.14.54"
@@ -6789,6 +6733,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-linux-riscv64@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-linux-riscv64@npm:0.15.18"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
 "esbuild-linux-s390x@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-linux-s390x@npm:0.14.54"
@@ -6796,6 +6747,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-linux-s390x@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-linux-s390x@npm:0.15.18"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
 "esbuild-netbsd-64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-netbsd-64@npm:0.14.54"
@@ -6803,6 +6761,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-netbsd-64@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-netbsd-64@npm:0.15.18"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "esbuild-openbsd-64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-openbsd-64@npm:0.14.54"
@@ -6810,6 +6775,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-openbsd-64@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-openbsd-64@npm:0.15.18"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
 "esbuild-sunos-64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-sunos-64@npm:0.14.54"
@@ -6817,6 +6789,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-sunos-64@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-sunos-64@npm:0.15.18"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
 "esbuild-windows-32@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-windows-32@npm:0.14.54"
@@ -6824,6 +6803,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-windows-32@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-windows-32@npm:0.15.18"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "esbuild-windows-64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-windows-64@npm:0.14.54"
@@ -6831,6 +6817,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-windows-64@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-windows-64@npm:0.15.18"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "esbuild-windows-arm64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-windows-arm64@npm:0.14.54"
@@ -6838,6 +6831,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"esbuild-windows-arm64@npm:0.15.18":
+  version: 0.15.18
+  resolution: "esbuild-windows-arm64@npm:0.15.18"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
 "esbuild@npm:^0.14.42":
   version: 0.14.54
   resolution: "esbuild@npm:0.14.54"
@@ -6912,80 +6912,80 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:^0.16.3":
-  version: 0.16.4
-  resolution: "esbuild@npm:0.16.4"
-  dependencies:
-    "@esbuild/android-arm": 0.16.4
-    "@esbuild/android-arm64": 0.16.4
-    "@esbuild/android-x64": 0.16.4
-    "@esbuild/darwin-arm64": 0.16.4
-    "@esbuild/darwin-x64": 0.16.4
-    "@esbuild/freebsd-arm64": 0.16.4
-    "@esbuild/freebsd-x64": 0.16.4
-    "@esbuild/linux-arm": 0.16.4
-    "@esbuild/linux-arm64": 0.16.4
-    "@esbuild/linux-ia32": 0.16.4
-    "@esbuild/linux-loong64": 0.16.4
-    "@esbuild/linux-mips64el": 0.16.4
-    "@esbuild/linux-ppc64": 0.16.4
-    "@esbuild/linux-riscv64": 0.16.4
-    "@esbuild/linux-s390x": 0.16.4
-    "@esbuild/linux-x64": 0.16.4
-    "@esbuild/netbsd-x64": 0.16.4
-    "@esbuild/openbsd-x64": 0.16.4
-    "@esbuild/sunos-x64": 0.16.4
-    "@esbuild/win32-arm64": 0.16.4
-    "@esbuild/win32-ia32": 0.16.4
-    "@esbuild/win32-x64": 0.16.4
+"esbuild@npm:^0.15.9":
+  version: 0.15.18
+  resolution: "esbuild@npm:0.15.18"
+  dependencies:
+    "@esbuild/android-arm": 0.15.18
+    "@esbuild/linux-loong64": 0.15.18
+    esbuild-android-64: 0.15.18
+    esbuild-android-arm64: 0.15.18
+    esbuild-darwin-64: 0.15.18
+    esbuild-darwin-arm64: 0.15.18
+    esbuild-freebsd-64: 0.15.18
+    esbuild-freebsd-arm64: 0.15.18
+    esbuild-linux-32: 0.15.18
+    esbuild-linux-64: 0.15.18
+    esbuild-linux-arm: 0.15.18
+    esbuild-linux-arm64: 0.15.18
+    esbuild-linux-mips64le: 0.15.18
+    esbuild-linux-ppc64le: 0.15.18
+    esbuild-linux-riscv64: 0.15.18
+    esbuild-linux-s390x: 0.15.18
+    esbuild-netbsd-64: 0.15.18
+    esbuild-openbsd-64: 0.15.18
+    esbuild-sunos-64: 0.15.18
+    esbuild-windows-32: 0.15.18
+    esbuild-windows-64: 0.15.18
+    esbuild-windows-arm64: 0.15.18
   dependenciesMeta:
     "@esbuild/android-arm":
       optional: true
-    "@esbuild/android-arm64":
+    "@esbuild/linux-loong64":
       optional: true
-    "@esbuild/android-x64":
+    esbuild-android-64:
       optional: true
-    "@esbuild/darwin-arm64":
+    esbuild-android-arm64:
       optional: true
-    "@esbuild/darwin-x64":
+    esbuild-darwin-64:
       optional: true
-    "@esbuild/freebsd-arm64":
+    esbuild-darwin-arm64:
       optional: true
-    "@esbuild/freebsd-x64":
+    esbuild-freebsd-64:
       optional: true
-    "@esbuild/linux-arm":
+    esbuild-freebsd-arm64:
       optional: true
-    "@esbuild/linux-arm64":
+    esbuild-linux-32:
       optional: true
-    "@esbuild/linux-ia32":
+    esbuild-linux-64:
       optional: true
-    "@esbuild/linux-loong64":
+    esbuild-linux-arm:
       optional: true
-    "@esbuild/linux-mips64el":
+    esbuild-linux-arm64:
       optional: true
-    "@esbuild/linux-ppc64":
+    esbuild-linux-mips64le:
       optional: true
-    "@esbuild/linux-riscv64":
+    esbuild-linux-ppc64le:
       optional: true
-    "@esbuild/linux-s390x":
+    esbuild-linux-riscv64:
       optional: true
-    "@esbuild/linux-x64":
+    esbuild-linux-s390x:
       optional: true
-    "@esbuild/netbsd-x64":
+    esbuild-netbsd-64:
       optional: true
-    "@esbuild/openbsd-x64":
+    esbuild-openbsd-64:
       optional: true
-    "@esbuild/sunos-x64":
+    esbuild-sunos-64:
       optional: true
-    "@esbuild/win32-arm64":
+    esbuild-windows-32:
       optional: true
-    "@esbuild/win32-ia32":
+    esbuild-windows-64:
       optional: true
-    "@esbuild/win32-x64":
+    esbuild-windows-arm64:
       optional: true
   bin:
     esbuild: bin/esbuild
-  checksum: c06e9b2e84f5c7cdb608fa15e5a241d155321097fe1362beab176bc8283f54ae2a9a7fcca741da2663ffb5fea98c6c47226edd22189d3effb14b457e46592d1b
+  checksum: ec12682b2cb2d4f0669d0e555028b87a9284ca7f6a1b26e35e69a8697165b35cc682ad598abc70f0bbcfdc12ca84ef888caf5ceee389237862e8f8c17da85f89
   languageName: node
   linkType: hard
 
@@ -13531,7 +13531,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.1.10, postcss@npm:^8.3.11, postcss@npm:^8.4.19":
+"postcss@npm:^8.1.10, postcss@npm:^8.3.11":
   version: 8.4.19
   resolution: "postcss@npm:8.4.19"
   dependencies:
@@ -13542,6 +13542,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.18":
+  version: 8.4.20
+  resolution: "postcss@npm:8.4.20"
+  dependencies:
+    nanoid: ^3.3.4
+    picocolors: ^1.0.0
+    source-map-js: ^1.0.2
+  checksum: 1a5609ea1c1b204f9c2974a0019ae9eef2d99bf645c2c9aac675166c4cb1005be7b5e2ba196160bc771f5d9ac896ed883f236f888c891e835e59d28fff6651aa
+  languageName: node
+  linkType: hard
+
 "postgres-array@npm:~2.0.0":
   version: 2.0.0
   resolution: "postgres-array@npm:2.0.0"
@@ -14708,7 +14719,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:3.7.2, rollup@npm:^3.7.0":
+"rollup@npm:3.7.2":
   version: 3.7.2
   resolution: "rollup@npm:3.7.2"
   dependencies:
@@ -14722,6 +14733,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rollup@npm:^2.79.1":
+  version: 2.79.1
+  resolution: "rollup@npm:2.79.1"
+  dependencies:
+    fsevents: ~2.3.2
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  bin:
+    rollup: dist/bin/rollup
+  checksum: 6a2bf167b3587d4df709b37d149ad0300692cc5deb510f89ac7bdc77c8738c9546ae3de9322b0968e1ed2b0e984571f5f55aae28fa7de4cfcb1bc5402a4e2be6
+  languageName: node
+  linkType: hard
+
 "rss-parser@npm:3.12.0":
   version: 3.12.0
   resolution: "rss-parser@npm:3.12.0"
@@ -17056,15 +17081,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:4.0.0":
-  version: 4.0.0
-  resolution: "vite@npm:4.0.0"
+"vite@npm:3.2.5":
+  version: 3.2.5
+  resolution: "vite@npm:3.2.5"
   dependencies:
-    esbuild: ^0.16.3
+    esbuild: ^0.15.9
     fsevents: ~2.3.2
-    postcss: ^8.4.19
+    postcss: ^8.4.18
     resolve: ^1.22.1
-    rollup: ^3.7.0
+    rollup: ^2.79.1
   peerDependencies:
     "@types/node": ">= 14"
     less: "*"
@@ -17090,7 +17115,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 83099d5033fa5580714641df3cda16579ec104b9f3d447c2cf3208105ef2e6f8573267fbe3bdc93c0e51a70830d4d30bc166767c9f8805b1075a405625471930
+  checksum: ad35b7008c2b62a167d1d1a82f0a0c60fa457733f1969e9eedf0b0077f67a7ac74b4c9477e75a397895150f09b6551f0c17841c5b05c34d9fe302bb0b5dc28a8
   languageName: node
   linkType: hard
 
-- 
cgit v1.2.3-freya


From 4ecc42744c3c8b68e38f58bfe03919bf437f137a Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 18 Dec 2022 01:59:59 +0900
Subject: enhance: Implement the  toggle to (or not to) close push
 notifications when notifications or messages are read (#9219)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* create file

* wip

* fix

* wip

* tabun dekita

* :v:

* implement subscribe push notification button to tutorial

* check-exists→show-registration

* add column sendReadMessage

* fix migration file

* sw api

* change PushNotificationService

* wip

* :v:

* fix tutorial footer flex
---
 locales/ja-JP.yml                                  |  11 ++
 ...138716634-whetherPushNotifyToSendReadMessage.js |  11 ++
 .../backend/src/core/PushNotificationService.ts    |   8 +
 .../backend/src/models/entities/SwSubscription.ts  |   5 +
 packages/backend/src/server/api/EndpointsModule.ts |   6 +
 packages/backend/src/server/api/endpoints.ts       |   4 +
 .../src/server/api/endpoints/sw/register.ts        |  20 +++
 .../server/api/endpoints/sw/show-registration.ts   |  66 ++++++++
 .../src/server/api/endpoints/sw/unregister.ts      |   4 +-
 .../server/api/endpoints/sw/update-registration.ts |  82 ++++++++++
 .../components/MkPushNotificationAllowButton.vue   | 167 +++++++++++++++++++++
 .../client/src/pages/settings/notifications.vue    |  30 ++++
 packages/client/src/pages/timeline.tutorial.vue    | 116 ++++++++------
 packages/client/src/scripts/initialize-sw.ts       |  55 -------
 14 files changed, 481 insertions(+), 104 deletions(-)
 create mode 100644 packages/backend/migration/1669138716634-whetherPushNotifyToSendReadMessage.js
 create mode 100644 packages/backend/src/server/api/endpoints/sw/show-registration.ts
 create mode 100644 packages/backend/src/server/api/endpoints/sw/update-registration.ts
 create mode 100644 packages/client/src/components/MkPushNotificationAllowButton.vue

(limited to 'packages/client/src')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 3fba36a754..3a53f470e3 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -13,6 +13,7 @@ fetchingAsApObject: "連合に照会中"
 ok: "OK"
 gotIt: "わかった"
 cancel: "キャンセル"
+noThankYou: "やめておく"
 enterUsername: "ユーザー名を入力"
 renotedBy: "{user}がRenote"
 noNotes: "ノートはありません"
@@ -898,6 +899,13 @@ navbar: "ナビゲーションバー"
 shuffle: "シャッフル"
 account: "アカウント"
 move: "移動"
+pushNotification: "プッシュ通知"
+subscribePushNotification: "プッシュ通知を有効化"
+unsubscribePushNotification: "プッシュ通知を停止する"
+pushNotificationAlreadySubscribed: "プッシュ通知は有効です"
+pushNotificationNotSupported: "ブラウザかインスタンスがプッシュ通知に非対応"
+sendPushNotificationReadMessage: "通知やメッセージが既読になったらプッシュ通知を削除する"
+sendPushNotificationReadMessageCaption: "「{emptyPushNotificationMessage}」という通知が一瞬表示されるようになります。端末の電池消費量が増加する可能性があります。"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"
@@ -1235,6 +1243,9 @@ _tutorial:
   step7_1: "これで、Misskeyの基本的な使い方の説明は終わりました。お疲れ様でした。"
   step7_2: "もっとMisskeyについて知りたいときは、{help}を見てみてください。"
   step7_3: "では、Misskeyをお楽しみください🚀"
+  step8_1: "最後に、プッシュ通知を有効化してみませんか？"
+  step8_2: "プッシュ通知を受け取ることで、Misskeyを開いていない時にもリアクションやフォロー、メンションなどに気づけます。"
+  step8_3: "通知の設定は後から変更できます。"
 
 _2fa:
   alreadyRegistered: "既に設定は完了しています。"
diff --git a/packages/backend/migration/1669138716634-whetherPushNotifyToSendReadMessage.js b/packages/backend/migration/1669138716634-whetherPushNotifyToSendReadMessage.js
new file mode 100644
index 0000000000..2265b00617
--- /dev/null
+++ b/packages/backend/migration/1669138716634-whetherPushNotifyToSendReadMessage.js
@@ -0,0 +1,11 @@
+export class whetherPushNotifyToSendReadMessage1669138716634 {
+    name = 'whetherPushNotifyToSendReadMessage1669138716634'
+
+    async up(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "sw_subscription" ADD "sendReadMessage" boolean NOT NULL DEFAULT false`);
+    }
+
+    async down(queryRunner) {
+        await queryRunner.query(`ALTER TABLE "sw_subscription" DROP COLUMN "sendReadMessage"`);
+    }
+}
diff --git a/packages/backend/src/core/PushNotificationService.ts b/packages/backend/src/core/PushNotificationService.ts
index df5284de4b..842cd1a9f8 100644
--- a/packages/backend/src/core/PushNotificationService.ts
+++ b/packages/backend/src/core/PushNotificationService.ts
@@ -69,6 +69,14 @@ export class PushNotificationService {
 		});
 	
 		for (const subscription of subscriptions) {
+			// Continue if sendReadMessage is false
+			if ([
+				'readNotifications',
+				'readAllNotifications',
+				'readAllMessagingMessages',
+				'readAllMessagingMessagesOfARoom',
+			].includes(type) && !subscription.sendReadMessage) continue;
+
 			const pushSubscription = {
 				endpoint: subscription.endpoint,
 				keys: {
diff --git a/packages/backend/src/models/entities/SwSubscription.ts b/packages/backend/src/models/entities/SwSubscription.ts
index 51b9786e96..0658294983 100644
--- a/packages/backend/src/models/entities/SwSubscription.ts
+++ b/packages/backend/src/models/entities/SwSubscription.ts
@@ -34,4 +34,9 @@ export class SwSubscription {
 		length: 128,
 	})
 	public publickey: string;
+
+	@Column('boolean', {
+		default: false,
+	})
+	public sendReadMessage: boolean;
 }
diff --git a/packages/backend/src/server/api/EndpointsModule.ts b/packages/backend/src/server/api/EndpointsModule.ts
index e41ed388b4..647f60317a 100644
--- a/packages/backend/src/server/api/EndpointsModule.ts
+++ b/packages/backend/src/server/api/EndpointsModule.ts
@@ -272,6 +272,8 @@ import * as ep___resetDb from './endpoints/reset-db.js';
 import * as ep___resetPassword from './endpoints/reset-password.js';
 import * as ep___serverInfo from './endpoints/server-info.js';
 import * as ep___stats from './endpoints/stats.js';
+import * as ep___sw_show_registration from './endpoints/sw/show-registration.js';
+import * as ep___sw_update_registration from './endpoints/sw/update-registration.js';
 import * as ep___sw_register from './endpoints/sw/register.js';
 import * as ep___sw_unregister from './endpoints/sw/unregister.js';
 import * as ep___test from './endpoints/test.js';
@@ -588,6 +590,8 @@ const $resetDb: Provider = { provide: 'ep:reset-db', useClass: ep___resetDb.defa
 const $resetPassword: Provider = { provide: 'ep:reset-password', useClass: ep___resetPassword.default };
 const $serverInfo: Provider = { provide: 'ep:server-info', useClass: ep___serverInfo.default };
 const $stats: Provider = { provide: 'ep:stats', useClass: ep___stats.default };
+const $sw_show_registration: Provider = { provide: 'ep:sw/show-registration', useClass: ep___sw_show_registration.default };
+const $sw_update_registration: Provider = { provide: 'ep:sw/update-registration', useClass: ep___sw_update_registration.default };
 const $sw_register: Provider = { provide: 'ep:sw/register', useClass: ep___sw_register.default };
 const $sw_unregister: Provider = { provide: 'ep:sw/unregister', useClass: ep___sw_unregister.default };
 const $test: Provider = { provide: 'ep:test', useClass: ep___test.default };
@@ -908,6 +912,8 @@ const $fetchRss: Provider = { provide: 'ep:fetch-rss', useClass: ep___fetchRss.d
 		$resetPassword,
 		$serverInfo,
 		$stats,
+		$sw_show_registration,
+		$sw_update_registration,
 		$sw_register,
 		$sw_unregister,
 		$test,
diff --git a/packages/backend/src/server/api/endpoints.ts b/packages/backend/src/server/api/endpoints.ts
index b2ab36e070..6d10cb8f35 100644
--- a/packages/backend/src/server/api/endpoints.ts
+++ b/packages/backend/src/server/api/endpoints.ts
@@ -271,6 +271,8 @@ import * as ep___resetDb from './endpoints/reset-db.js';
 import * as ep___resetPassword from './endpoints/reset-password.js';
 import * as ep___serverInfo from './endpoints/server-info.js';
 import * as ep___stats from './endpoints/stats.js';
+import * as ep___sw_show_registration from './endpoints/sw/show-registration.js';
+import * as ep___sw_update_registration from './endpoints/sw/update-registration.js';
 import * as ep___sw_register from './endpoints/sw/register.js';
 import * as ep___sw_unregister from './endpoints/sw/unregister.js';
 import * as ep___test from './endpoints/test.js';
@@ -585,6 +587,8 @@ const eps = [
 	['reset-password', ep___resetPassword],
 	['server-info', ep___serverInfo],
 	['stats', ep___stats],
+	['sw/show-registration', ep___sw_show_registration],
+	['sw/update-registration', ep___sw_update_registration],
 	['sw/register', ep___sw_register],
 	['sw/unregister', ep___sw_unregister],
 	['test', ep___test],
diff --git a/packages/backend/src/server/api/endpoints/sw/register.ts b/packages/backend/src/server/api/endpoints/sw/register.ts
index ddec877dd4..bfd5de7b00 100644
--- a/packages/backend/src/server/api/endpoints/sw/register.ts
+++ b/packages/backend/src/server/api/endpoints/sw/register.ts
@@ -25,6 +25,18 @@ export const meta = {
 				type: 'string',
 				optional: false, nullable: true,
 			},
+			userId: {
+				type: 'string',
+				optional: false, nullable: false,
+			},
+			endpoint: {
+				type: 'string',
+				optional: false, nullable: false,
+			},
+			sendReadMessage: {
+				type: 'boolean',
+				optional: false, nullable: false,
+			},
 		},
 	},
 } as const;
@@ -35,6 +47,7 @@ export const paramDef = {
 		endpoint: { type: 'string' },
 		auth: { type: 'string' },
 		publickey: { type: 'string' },
+		sendReadMessage: { type: 'boolean', default: false },
 	},
 	required: ['endpoint', 'auth', 'publickey'],
 } as const;
@@ -64,6 +77,9 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				return {
 					state: 'already-subscribed' as const,
 					key: instance.swPublicKey,
+					userId: me.id,
+					endpoint: exist.endpoint,
+					sendReadMessage: exist.sendReadMessage,
 				};
 			}
 
@@ -74,11 +90,15 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				endpoint: ps.endpoint,
 				auth: ps.auth,
 				publickey: ps.publickey,
+				sendReadMessage: ps.sendReadMessage,
 			});
 
 			return {
 				state: 'subscribed' as const,
 				key: instance.swPublicKey,
+				userId: me.id,
+				endpoint: ps.endpoint,
+				sendReadMessage: ps.sendReadMessage,
 			};
 		});
 	}
diff --git a/packages/backend/src/server/api/endpoints/sw/show-registration.ts b/packages/backend/src/server/api/endpoints/sw/show-registration.ts
new file mode 100644
index 0000000000..bede10be5c
--- /dev/null
+++ b/packages/backend/src/server/api/endpoints/sw/show-registration.ts
@@ -0,0 +1,66 @@
+import { Inject, Injectable } from '@nestjs/common';
+import type { SwSubscriptionsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
+
+export const meta = {
+	tags: ['account'],
+
+	requireCredential: true,
+
+	description: 'Check push notification registration exists.',
+
+	res: {
+		type: 'object',
+		optional: false, nullable: true,
+		properties: {
+			userId: {
+				type: 'string',
+				optional: false, nullable: false,
+			},
+			endpoint: {
+				type: 'string',
+				optional: false, nullable: false,
+			},
+			sendReadMessage: {
+				type: 'boolean',
+				optional: false, nullable: false,
+			},
+		},
+	},
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {
+		endpoint: { type: 'string' },
+	},
+	required: ['endpoint'],
+} as const;
+
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.swSubscriptionsRepository)
+		private swSubscriptionsRepository: SwSubscriptionsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			// if already subscribed
+			const exist = await this.swSubscriptionsRepository.findOneBy({
+				userId: me.id,
+				endpoint: ps.endpoint,
+			});
+
+			if (exist != null) {
+				return {
+					userId: exist.userId,
+					endpoint: exist.endpoint,
+					sendReadMessage: exist.sendReadMessage,
+				};
+			}
+
+			return null;
+		});
+	}
+}
diff --git a/packages/backend/src/server/api/endpoints/sw/unregister.ts b/packages/backend/src/server/api/endpoints/sw/unregister.ts
index 5772eeee26..f12b98617d 100644
--- a/packages/backend/src/server/api/endpoints/sw/unregister.ts
+++ b/packages/backend/src/server/api/endpoints/sw/unregister.ts
@@ -6,7 +6,7 @@ import { DI } from '@/di-symbols.js';
 export const meta = {
 	tags: ['account'],
 
-	requireCredential: true,
+	requireCredential: false,
 
 	description: 'Unregister from receiving push notifications.',
 } as const;
@@ -28,7 +28,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 	) {
 		super(meta, paramDef, async (ps, me) => {
 			await this.swSubscriptionsRepository.delete({
-				userId: me.id,
+				...(me ? { userId: me.id } : {}),
 				endpoint: ps.endpoint,
 			});
 		});
diff --git a/packages/backend/src/server/api/endpoints/sw/update-registration.ts b/packages/backend/src/server/api/endpoints/sw/update-registration.ts
new file mode 100644
index 0000000000..9f08c8148d
--- /dev/null
+++ b/packages/backend/src/server/api/endpoints/sw/update-registration.ts
@@ -0,0 +1,82 @@
+import { Inject, Injectable } from '@nestjs/common';
+import type { SwSubscriptionsRepository } from '@/models/index.js';
+import { Endpoint } from '@/server/api/endpoint-base.js';
+import { DI } from '@/di-symbols.js';
+import { ApiError } from '../../error.js';
+
+export const meta = {
+	tags: ['account'],
+
+	requireCredential: true,
+
+	description: 'Update push notification registration.',
+
+	res: {
+		type: 'object',
+		optional: false, nullable: false,
+		properties: {
+			userId: {
+				type: 'string',
+				optional: false, nullable: false,
+			},
+			endpoint: {
+				type: 'string',
+				optional: false, nullable: false,
+			},
+			sendReadMessage: {
+				type: 'boolean',
+				optional: false, nullable: false,
+			},
+		},
+	},
+	errors: {
+		noSuchRegistration: {
+			message: 'No such registration.',
+			code: 'NO_SUCH_REGISTRATION',
+			id: ' b09d8066-8064-5613-efb6-0e963b21d012',
+		},
+	}
+} as const;
+
+export const paramDef = {
+	type: 'object',
+	properties: {
+		endpoint: { type: 'string' },
+		sendReadMessage: { type: 'boolean' },
+	},
+	required: ['endpoint'],
+} as const;
+
+// eslint-disable-next-line import/no-default-export
+@Injectable()
+export default class extends Endpoint<typeof meta, typeof paramDef> {
+	constructor(
+		@Inject(DI.swSubscriptionsRepository)
+		private swSubscriptionsRepository: SwSubscriptionsRepository,
+	) {
+		super(meta, paramDef, async (ps, me) => {
+			const swSubscription = await this.swSubscriptionsRepository.findOneBy({
+				userId: me.id,
+				endpoint: ps.endpoint,
+			});
+
+			if (swSubscription === null) {
+				throw new ApiError(meta.errors.noSuchRegistration);
+			}
+
+			if (ps.sendReadMessage !== undefined) {
+				swSubscription.sendReadMessage = ps.sendReadMessage;
+			}
+
+			await this.swSubscriptionsRepository.update(swSubscription.id, {
+				sendReadMessage: swSubscription.sendReadMessage,
+			});
+
+			return {
+				userId: swSubscription.userId,
+				endpoint: swSubscription.endpoint,
+				sendReadMessage: swSubscription.sendReadMessage,
+			};
+		});
+	}
+}
diff --git a/packages/client/src/components/MkPushNotificationAllowButton.vue b/packages/client/src/components/MkPushNotificationAllowButton.vue
new file mode 100644
index 0000000000..a762914e64
--- /dev/null
+++ b/packages/client/src/components/MkPushNotificationAllowButton.vue
@@ -0,0 +1,167 @@
+<template>
+<MkButton
+	v-if="supported && !pushRegistrationInServer"
+	type="button"
+	primary
+	:gradate="gradate"
+	:rounded="rounded"
+	:inline="inline"
+	:autofocus="autofocus"
+	:wait="wait"
+	:full="full"
+	@click="subscribe"
+>
+	{{ i18n.ts.subscribePushNotification }}
+</MkButton>
+<MkButton
+	v-else-if="!showOnlyToRegister && ($i ? pushRegistrationInServer : pushSubscription)"
+	type="button"
+	:primary="false"
+	:gradate="gradate"
+	:rounded="rounded"
+	:inline="inline"
+	:autofocus="autofocus"
+	:wait="wait"
+	:full="full"
+	@click="unsubscribe"
+>
+	{{ i18n.ts.unsubscribePushNotification }}
+</MkButton>
+<MkButton v-else-if="$i && pushRegistrationInServer" disabled :rounded="rounded" :inline="inline" :wait="wait" :full="full">
+	{{ i18n.ts.pushNotificationAlreadySubscribed }}
+</MkButton>
+<MkButton v-else-if="!supported" disabled :rounded="rounded" :inline="inline" :wait="wait" :full="full">
+	{{ i18n.ts.pushNotificationNotSupported }}
+</MkButton>
+</template>
+
+<script setup lang="ts">
+import { $i, getAccounts } from '@/account';
+import MkButton from '@/components/MkButton.vue';
+import { instance } from '@/instance';
+import { api, apiWithDialog, promiseDialog } from '@/os';
+import { i18n } from '@/i18n';
+
+defineProps<{
+	primary?: boolean;
+	gradate?: boolean;
+	rounded?: boolean;
+	inline?: boolean;
+	link?: boolean;
+	to?: string;
+	autofocus?: boolean;
+	wait?: boolean;
+	danger?: boolean;
+	full?: boolean;
+	showOnlyToRegister?: boolean;
+}>();
+
+// ServiceWorker registration
+let registration = $ref<ServiceWorkerRegistration | undefined>();
+// If this browser supports push notification
+let supported = $ref(false);
+// If this browser has already subscribed to push notification
+let pushSubscription = $ref<PushSubscription | null>(null);
+let pushRegistrationInServer = $ref<{ state?: string; key?: string; userId: string; endpoint: string; sendReadMessage: boolean; } | undefined>();
+
+function subscribe() {
+	if (!registration || !supported || !instance.swPublickey) return;
+
+	// SEE: https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe#Parameters
+	return promiseDialog(registration.pushManager.subscribe({
+		userVisibleOnly: true,
+		applicationServerKey: urlBase64ToUint8Array(instance.swPublickey)
+	})
+	.then(async subscription => {
+		pushSubscription = subscription;
+
+		// Register
+		pushRegistrationInServer = await api('sw/register', {
+			endpoint: subscription.endpoint,
+			auth: encode(subscription.getKey('auth')),
+			publickey: encode(subscription.getKey('p256dh'))
+		});
+	}, async err => { // When subscribe failed
+		// 通知が許可されていなかったとき
+		if (err?.name === 'NotAllowedError') {
+			console.info('User denied the notification permission request.');
+			return;
+		}
+
+		// 違うapplicationServerKey (または gcm_sender_id)のサブスクリプションが
+		// 既に存在していることが原因でエラーになった可能性があるので、
+		// そのサブスクリプションを解除しておく
+		// （これは実行されなさそうだけど、おまじない的に古い実装から残してある）
+		await unsubscribe();
+	}), null, null);
+}
+
+async function unsubscribe() {
+	if (!pushSubscription) return;
+
+	const endpoint = pushSubscription.endpoint;
+	const accounts = await getAccounts();
+
+	pushRegistrationInServer = undefined;
+
+	if ($i && accounts.length >= 2) {
+		apiWithDialog('sw/unregister', {
+			i: $i.token,
+			endpoint,
+		});
+	} else {
+		pushSubscription.unsubscribe();
+		apiWithDialog('sw/unregister', {
+			endpoint,
+		});
+		pushSubscription = null;
+	}
+}
+
+function encode(buffer: ArrayBuffer | null) {
+	return btoa(String.fromCharCode.apply(null, new Uint8Array(buffer)));
+}
+
+/**
+ * Convert the URL safe base64 string to a Uint8Array
+ * @param base64String base64 string
+ */
+ function urlBase64ToUint8Array(base64String: string): Uint8Array {
+	const padding = '='.repeat((4 - base64String.length % 4) % 4);
+	const base64 = (base64String + padding)
+		.replace(/-/g, '+')
+		.replace(/_/g, '/');
+
+	const rawData = window.atob(base64);
+	const outputArray = new Uint8Array(rawData.length);
+
+	for (let i = 0; i < rawData.length; ++i) {
+		outputArray[i] = rawData.charCodeAt(i);
+	}
+	return outputArray;
+}
+
+navigator.serviceWorker.ready.then(async swr => {
+	registration = swr;
+
+	pushSubscription = await registration.pushManager.getSubscription();
+
+	if (instance.swPublickey && ('PushManager' in window) && $i && $i.token) {
+		supported = true;
+
+		if (pushSubscription) {
+			const res = await api('sw/show-registration', {
+				endpoint: pushSubscription.endpoint,
+			});
+
+			if (res) {
+				pushRegistrationInServer = res;
+			}
+		}
+	}
+});
+
+defineExpose({
+	pushRegistrationInServer: $$(pushRegistrationInServer),
+});
+</script>
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
index 5703e0c6b6..77ec567da4 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -6,6 +6,18 @@
 		<FormLink class="_formBlock" @click="readAllUnreadNotes">{{ i18n.ts.markAsReadAllUnreadNotes }}</FormLink>
 		<FormLink class="_formBlock" @click="readAllMessagingMessages">{{ i18n.ts.markAsReadAllTalkMessages }}</FormLink>
 	</FormSection>
+	<FormSection>
+		<template #label>{{ i18n.ts.pushNotification }}</template>
+		<MkPushNotificationAllowButton ref="allowButton" />
+		<FormSwitch class="_formBlock" :disabled="!pushRegistrationInServer" :model-value="sendReadMessage" @update:modelValue="onChangeSendReadMessage">
+			<template #label>{{ i18n.ts.sendPushNotificationReadMessage }}</template>
+			<template #caption>
+				<I18n :src="i18n.ts.sendPushNotificationReadMessageCaption">
+					<template #emptyPushNotificationMessage>{{ i18n.ts._notification.emptyPushNotificationMessage }}</template>
+				</I18n>
+			</template>
+		</FormSwitch>
+	</FormSection>
 </div>
 </template>
 
@@ -15,10 +27,16 @@ import { notificationTypes } from 'misskey-js';
 import FormButton from '@/components/MkButton.vue';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
+import FormSwitch from '@/components/form/switch.vue';
 import * as os from '@/os';
 import { $i } from '@/account';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
+
+let allowButton = $ref<InstanceType<typeof MkPushNotificationAllowButton>>();
+let pushRegistrationInServer = $computed(() => allowButton?.pushRegistrationInServer);
+let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage || false);
 
 async function readAllUnreadNotes() {
 	await os.api('i/read-all-unread-notes');
@@ -49,6 +67,18 @@ function configure() {
 	}, 'closed');
 }
 
+function onChangeSendReadMessage(v: boolean) {
+	if (!pushRegistrationInServer) return;
+
+	os.apiWithDialog('sw/update-registration', {
+		endpoint: pushRegistrationInServer.endpoint,
+		sendReadMessage: v,
+	}).then(res => {
+		if (!allowButton)	return;
+		allowButton.pushRegistrationInServer = res;
+	});
+}
+
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
diff --git a/packages/client/src/pages/timeline.tutorial.vue b/packages/client/src/pages/timeline.tutorial.vue
index 7f08ccc2a1..9683cc22a5 100644
--- a/packages/client/src/pages/timeline.tutorial.vue
+++ b/packages/client/src/pages/timeline.tutorial.vue
@@ -1,6 +1,17 @@
 <template>
-<div class="_card tbkwesmv">
-	<div class="_title"><i class="fas fa-info-circle"></i> {{ i18n.ts._tutorial.title }}</div>
+<div class="_card">
+	<div :class="$style.title" class="_title">
+		<div :class="$style.titleText"><i class="fas fa-info-circle"></i> {{ i18n.ts._tutorial.title }}</div>
+		<div :class="$style.step">
+			<button class="_button" :class="$style.stepArrow" :disabled="tutorial === 0" @click="tutorial--">
+				<i class="fas fa-chevron-left"></i>
+			</button>
+			<span :class="$style.stepNumber">{{ tutorial + 1 }} / {{ tutorialsNumber }}</span>
+			<button class="_button" :class="$style.stepArrow" :disabled="tutorial === tutorialsNumber - 1" @click="tutorial++">
+				<i class="fas fa-chevron-right"></i>
+			</button>
+		</div>
+	</div>
 	<div v-if="tutorial === 0" class="_content">
 		<div>{{ i18n.ts._tutorial.step1_1 }}</div>
 		<div>{{ i18n.ts._tutorial.step1_2 }}</div>
@@ -15,7 +26,7 @@
 		<div>{{ i18n.ts._tutorial.step3_1 }}</div>
 		<div>{{ i18n.ts._tutorial.step3_2 }}</div>
 		<div>{{ i18n.ts._tutorial.step3_3 }}</div>
-		<small>{{ i18n.ts._tutorial.step3_4 }}</small>
+		<small :class="$style.small">{{ i18n.ts._tutorial.step3_4 }}</small>
 	</div>
 	<div v-else-if="tutorial === 3" class="_content">
 		<div>{{ i18n.ts._tutorial.step4_1 }}</div>
@@ -32,7 +43,7 @@
 			</template>
 		</I18n>
 		<div>{{ i18n.ts._tutorial.step5_3 }}</div>
-		<small>{{ i18n.ts._tutorial.step5_4 }}</small>
+		<small :class="$style.small">{{ i18n.ts._tutorial.step5_4 }}</small>
 	</div>
 	<div v-else-if="tutorial === 5" class="_content">
 		<div>{{ i18n.ts._tutorial.step6_1 }}</div>
@@ -48,19 +59,20 @@
 		</I18n>
 		<div>{{ i18n.ts._tutorial.step7_3 }}</div>
 	</div>
+	<div v-else-if="tutorial === 7" class="_content">
+		<div>{{ i18n.ts._tutorial.step8_1 }}</div>
+		<div>{{ i18n.ts._tutorial.step8_2 }}</div>
+		<small :class="$style.small">{{ i18n.ts._tutorial.step8_3 }}</small>
+	</div>
 
-	<div class="_footer navigation">
-		<div class="step">
-			<button class="arrow _button" :disabled="tutorial === 0" @click="tutorial--">
-				<i class="fas fa-chevron-left"></i>
-			</button>
-			<span>{{ tutorial + 1 }} / 7</span>
-			<button class="arrow _button" :disabled="tutorial === 6" @click="tutorial++">
-				<i class="fas fa-chevron-right"></i>
-			</button>
-		</div>
-		<MkButton v-if="tutorial === 6" class="ok" primary @click="tutorial = -1"><i class="fas fa-check"></i> {{ i18n.ts.gotIt }}</MkButton>
-		<MkButton v-else class="ok" primary @click="tutorial++"><i class="fas fa-check"></i> {{ i18n.ts.next }}</MkButton>
+	<div class="_footer" :class="$style.footer">
+		<template v-if="tutorial === tutorialsNumber - 1">
+			<MkPushNotificationAllowButton :class="$style.footerItem" primary show-only-to-register @click="tutorial = -1" />
+			<MkButton :class="$style.footerItem" :primary="false" @click="tutorial = -1">{{ i18n.ts.noThankYou }}</MkButton>
+		</template>
+		<template v-else>
+			<MkButton :class="$style.footerItem" primary @click="tutorial++"><i class="fas fa-check"></i> {{ i18n.ts.next }}</MkButton>
+		</template>
 	</div>
 </div>
 </template>
@@ -68,53 +80,63 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import MkButton from '@/components/MkButton.vue';
+import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 
+const tutorialsNumber = 8;
+
 const tutorial = computed({
 	get() { return defaultStore.reactiveState.tutorial.value || 0; },
 	set(value) { defaultStore.set('tutorial', value); },
 });
 </script>
 
-<style lang="scss" scoped>
-.tbkwesmv {
-	> ._content {
-		> small {
-			opacity: 0.7;
-		}
-	}
+<style lang="scss" module>
+.small {
+	opacity: 0.7;
+}
 
-	> .navigation {
-		display: flex;
-		flex-direction: row;
-		align-items: baseline;
+.title {
+	display: flex;
+	flex-wrap: wrap;
 
-		> .step {
-			> .arrow {
-				padding: 4px;
+	&Text {
+		margin: 4px 0;
+		padding-right: 4px;
+	}
+}
 
-				&:disabled {
-					opacity: 0.5;
-				}
+.step {
+	margin-left: auto;
 
-				&:first-child {
-					padding-right: 8px;
-				}
+	&Arrow {
+		padding: 4px;
+		&:disabled {
+			opacity: 0.5;
+		}
+		&:first-child {
+			padding-right: 8px;
+		}
+		&:last-child {
+			padding-left: 8px;
+		}
+	}
 
-				&:last-child {
-					padding-left: 8px;
-				}
-			}
+	&Number {
+		font-weight: normal;
+		margin: 4px;
+	}
+}
 
-			> span {
-				margin: 0 4px;
-			}
-		}
+.footer {
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+	justify-content: right;
 
-		> .ok {
-			margin-left: auto;
-		}
+	&Item {
+		margin: 4px;
 	}
 }
 </style>
diff --git a/packages/client/src/scripts/initialize-sw.ts b/packages/client/src/scripts/initialize-sw.ts
index 7bacfbdf00..de52f30523 100644
--- a/packages/client/src/scripts/initialize-sw.ts
+++ b/packages/client/src/scripts/initialize-sw.ts
@@ -1,6 +1,3 @@
-import { instance } from '@/instance';
-import { $i } from '@/account';
-import { api } from '@/os';
 import { lang } from '@/config';
 
 export async function initializeSw() {
@@ -12,57 +9,5 @@ export async function initializeSw() {
 			msg: 'initialize',
 			lang,
 		});
-
-		if (instance.swPublickey && ('PushManager' in window) && $i && $i.token) {
-			// SEE: https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe#Parameters
-			registration.pushManager.subscribe({
-				userVisibleOnly: true,
-				applicationServerKey: urlBase64ToUint8Array(instance.swPublickey)
-			})
-			.then(subscription => {
-				function encode(buffer: ArrayBuffer | null) {
-					return btoa(String.fromCharCode.apply(null, new Uint8Array(buffer)));
-				}
-		
-				// Register
-				api('sw/register', {
-					endpoint: subscription.endpoint,
-					auth: encode(subscription.getKey('auth')),
-					publickey: encode(subscription.getKey('p256dh'))
-				});
-			})
-			// When subscribe failed
-			.catch(async (err: Error) => {
-				// 通知が許可されていなかったとき
-				if (err.name === 'NotAllowedError') {
-					return;
-				}
-		
-				// 違うapplicationServerKey (または gcm_sender_id)のサブスクリプションが
-				// 既に存在していることが原因でエラーになった可能性があるので、
-				// そのサブスクリプションを解除しておく
-				const subscription = await registration.pushManager.getSubscription();
-				if (subscription) subscription.unsubscribe();
-			});
-		}
 	});
 }
-
-/**
- * Convert the URL safe base64 string to a Uint8Array
- * @param base64String base64 string
- */
-function urlBase64ToUint8Array(base64String: string): Uint8Array {
-	const padding = '='.repeat((4 - base64String.length % 4) % 4);
-	const base64 = (base64String + padding)
-		.replace(/-/g, '+')
-		.replace(/_/g, '/');
-
-	const rawData = window.atob(base64);
-	const outputArray = new Uint8Array(rawData.length);
-
-	for (let i = 0; i < rawData.length; ++i) {
-		outputArray[i] = rawData.charCodeAt(i);
-	}
-	return outputArray;
-}
-- 
cgit v1.2.3-freya


From bb3d274db64fe662ad01780ca5eadbc263f6f759 Mon Sep 17 00:00:00 2001
From: Kagami Sascha Rosylight <saschanaz@outlook.com>
Date: Sun, 18 Dec 2022 13:13:05 +0900
Subject: refactor(client): add proper types to `never[]` (#9340)

---
 packages/client/src/components/mfm.ts            |  9 +++---
 packages/client/src/scripts/array.ts             |  2 +-
 packages/client/src/scripts/collect-page-vars.ts | 38 ++++++++++++++++------
 packages/client/src/scripts/physics.ts           | 16 ++++-----
 packages/client/src/store.ts                     | 41 ++++++++++++++++++++----
 5 files changed, 78 insertions(+), 28 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index 688857a499..5b5b1caae3 100644
--- a/packages/client/src/components/mfm.ts
+++ b/packages/client/src/components/mfm.ts
@@ -54,13 +54,13 @@ export default defineComponent({
 			return t.match(/^[0-9.]+s$/) ? t : null;
 		};
 
-		const genEl = (ast: mfm.MfmNode[]) => concat(ast.map((token): VNode[] => {
+		const genEl = (ast: mfm.MfmNode[]) => ast.map((token): VNode | string | (VNode | string)[] => {
 			switch (token.type) {
 				case 'text': {
 					const text = token.props.text.replace(/(\r\n|\n|\r)/g, '\n');
 
 					if (!this.plain) {
-						const res = [];
+						const res: (VNode | string)[] = [];
 						for (const t of text.split('\n')) {
 							res.push(h('br'));
 							res.push(t);
@@ -317,12 +317,13 @@ export default defineComponent({
 				}
 
 				default: {
-					console.error('unrecognized ast type:', token.type);
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					console.error('unrecognized ast type:', (token as any).type);
 
 					return [];
 				}
 			}
-		}));
+		}).flat(Infinity) as (VNode | string)[];
 
 		// Parse ast to DOM
 		return h('span', genEl(ast));
diff --git a/packages/client/src/scripts/array.ts b/packages/client/src/scripts/array.ts
index 26c6195d66..4620c8b735 100644
--- a/packages/client/src/scripts/array.ts
+++ b/packages/client/src/scripts/array.ts
@@ -123,7 +123,7 @@ export function lessThan(xs: number[], ys: number[]): boolean {
  * Returns the longest prefix of elements that satisfy the predicate
  */
 export function takeWhile<T>(f: Predicate<T>, xs: T[]): T[] {
-	const ys = [];
+	const ys: T[] = [];
 	for (const x of xs) {
 		if (f(x)) {
 			ys.push(x);
diff --git a/packages/client/src/scripts/collect-page-vars.ts b/packages/client/src/scripts/collect-page-vars.ts
index a4096fb2c2..76b68beaf6 100644
--- a/packages/client/src/scripts/collect-page-vars.ts
+++ b/packages/client/src/scripts/collect-page-vars.ts
@@ -1,42 +1,62 @@
-export function collectPageVars(content) {
-	const pageVars = [];
-	const collect = (xs: any[]) => {
+interface StringPageVar {
+	name: string,
+	type: 'string',
+	value: string
+}
+
+interface NumberPageVar {
+	name: string,
+	type: 'number',
+	value: number
+}
+
+interface BooleanPageVar {
+	name: string,
+	type: 'boolean',
+	value: boolean
+}
+
+type PageVar = StringPageVar | NumberPageVar | BooleanPageVar;
+
+export function collectPageVars(content): PageVar[] {
+	const pageVars: PageVar[] = [];
+	const collect = (xs: any[]): void => {
 		for (const x of xs) {
 			if (x.type === 'textInput') {
 				pageVars.push({
 					name: x.name,
 					type: 'string',
-					value: x.default || ''
+					value: x.default || '',
 				});
 			} else if (x.type === 'textareaInput') {
 				pageVars.push({
 					name: x.name,
 					type: 'string',
-					value: x.default || ''
+					value: x.default || '',
 				});
 			} else if (x.type === 'numberInput') {
 				pageVars.push({
 					name: x.name,
 					type: 'number',
-					value: x.default || 0
+					value: x.default || 0,
 				});
 			} else if (x.type === 'switch') {
 				pageVars.push({
 					name: x.name,
 					type: 'boolean',
-					value: x.default || false
+					value: x.default || false,
 				});
 			} else if (x.type === 'counter') {
 				pageVars.push({
 					name: x.name,
 					type: 'number',
-					value: 0
+					value: 0,
 				});
 			} else if (x.type === 'radioButton') {
 				pageVars.push({
 					name: x.name,
 					type: 'string',
-					value: x.default || ''
+					value: x.default || '',
 				});
 			} else if (x.children) {
 				collect(x.children);
diff --git a/packages/client/src/scripts/physics.ts b/packages/client/src/scripts/physics.ts
index 9e657906c2..f0a5b0fdd6 100644
--- a/packages/client/src/scripts/physics.ts
+++ b/packages/client/src/scripts/physics.ts
@@ -55,13 +55,13 @@ export function physics(container: HTMLElement) {
 		//wallLeft,
 	]);
 
-	const objEls = Array.from(container.children);
-	const objs = [];
+	const objEls = Array.from(container.children) as HTMLElement[];
+	const objs: Matter.Body[] = [];
 	for (const objEl of objEls) {
 		const left = objEl.dataset.physicsX ? parseInt(objEl.dataset.physicsX) : objEl.offsetLeft;
 		const top = objEl.dataset.physicsY ? parseInt(objEl.dataset.physicsY) : objEl.offsetTop;
 
-		let obj;
+		let obj: Matter.Body;
 		if (objEl.classList.contains('_physics_circle_')) {
 			obj = Matter.Bodies.circle(
 				left + (objEl.offsetWidth / 2),
@@ -84,7 +84,7 @@ export function physics(container: HTMLElement) {
 				}
 			);
 		}
-		objEl.id = obj.id;
+		objEl.id = obj.id.toString();
 		objs.push(obj);
 	}
 
@@ -109,10 +109,10 @@ export function physics(container: HTMLElement) {
 	render.mouse = mouse;
 
 	for (const objEl of objEls) {
-		objEl.style.position = `absolute`;
-		objEl.style.top = 0;
-		objEl.style.left = 0;
-		objEl.style.margin = 0;
+		objEl.style.position = 'absolute';
+		objEl.style.top = '0';
+		objEl.style.left = '0';
+		objEl.style.margin = '0';
 	}
 
 	window.requestAnimationFrame(update);
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index 3971214af0..061e1913d6 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -2,11 +2,34 @@ import { markRaw, ref } from 'vue';
 import { Storage } from './pizzax';
 import { Theme } from './scripts/theme';
 
-export const postFormActions = [];
-export const userActions = [];
-export const noteActions = [];
-export const noteViewInterruptors = [];
-export const notePostInterruptors = [];
+interface PostFormAction {
+	title: string,
+	handler: <T>(form: T, update: (key: unknown, value: unknown) => void) => void;
+}
+
+interface UserAction {
+	title: string,
+	handler: (user: UserDetailed) => void;
+}
+
+interface NoteAction {
+	title: string,
+	handler: (note: Note) => void;
+}
+
+interface NoteViewInterruptor {
+	handler: (note: Note) => unknown;
+}
+
+interface NotePostInterruptor {
+	handler: (note: FIXME) => unknown;
+}
+
+export const postFormActions: PostFormAction[] = [];
+export const userActions: UserAction[] = [];
+export const noteActions: NoteAction[] = [];
+export const noteViewInterruptors: NoteViewInterruptor[] = [];
+export const notePostInterruptors: NotePostInterruptor[] = [];
 
 // TODO: それぞれいちいちwhereとかdefaultというキーを付けなきゃいけないの冗長なのでなんとかする(ただ型定義が面倒になりそう)
 //       あと、現行の定義の仕方なら「whereが何であるかに関わらずキー名の重複不可」という制約を付けられるメリットもあるからそのメリットを引き継ぐ方法も考えないといけない
@@ -266,11 +289,17 @@ type Plugin = {
 	ast: any[];
 };
 
+interface Watcher {
+	key: string;
+	callback: (value: unknown) => void;
+}
+
 /**
  * 常にメモリにロードしておく必要がないような設定情報を保管するストレージ(非リアクティブ)
  */
 import lightTheme from '@/themes/l-light.json5';
 import darkTheme from '@/themes/d-green-lime.json5';
+import { Note, UserDetailed } from 'misskey-js/built/entities';
 
 export class ColdDeviceStorage {
 	public static default = {
@@ -289,7 +318,7 @@ export class ColdDeviceStorage {
 		sound_channel: { type: 'syuilo/square-pico', volume: 1 },
 	};
 
-	public static watchers = [];
+	public static watchers: Watcher[] = [];
 
 	public static get<T extends keyof typeof ColdDeviceStorage.default>(key: T): typeof ColdDeviceStorage.default[T] {
 		// TODO: indexedDBにする
-- 
cgit v1.2.3-freya


From a47d172d60b1ae712738e0ba5dfbb6b81be3f809 Mon Sep 17 00:00:00 2001
From: Kagami Sascha Rosylight <saschanaz@outlook.com>
Date: Sun, 18 Dec 2022 15:40:38 +0900
Subject: enhance(client): Compress non-animated PNG files (#9334)

* style: fix TS lint errors about `ev.target`

* enhance: compress non-animated PNG

* PNG to PNG?

* defer jest things (add it later)

* Delete jest.config.cjs

* check the compressed file size

* log compression stats

* use ??

* handle if ($i == null)

Co-authored-by: tamaina <tamaina@hotmail.co.jp>
---
 packages/client/package.json                       |  1 +
 packages/client/src/scripts/upload.ts              | 47 +++++++++++-----------
 .../client/src/scripts/upload/compress-config.ts   | 23 +++++++++++
 yarn.lock                                          |  8 ++++
 4 files changed, 55 insertions(+), 24 deletions(-)
 create mode 100644 packages/client/src/scripts/upload/compress-config.ts

(limited to 'packages/client/src')

diff --git a/packages/client/package.json b/packages/client/package.json
index 9f86a471b0..2c9b3cbb21 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -31,6 +31,7 @@
 		"eventemitter3": "5.0.0",
 		"idb-keyval": "6.2.0",
 		"insert-text-at-cursor": "0.3.0",
+		"is-file-animated": "1.0.1",
 		"json5": "2.2.1",
 		"katex": "0.15.6",
 		"matter-js": "0.18.0",
diff --git a/packages/client/src/scripts/upload.ts b/packages/client/src/scripts/upload.ts
index 51f1c1b86f..9a39652ef5 100644
--- a/packages/client/src/scripts/upload.ts
+++ b/packages/client/src/scripts/upload.ts
@@ -1,6 +1,7 @@
 import { reactive, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { readAndCompressImage } from 'browser-image-resizer';
+import { getCompressionConfig } from './upload/compress-config';
 import { defaultStore } from '@/store';
 import { apiUrl } from '@/config';
 import { $i } from '@/account';
@@ -16,12 +17,6 @@ type Uploading = {
 };
 export const uploads = ref<Uploading[]>([]);
 
-const compressTypeMap = {
-	'image/jpeg': { quality: 0.85, mimeType: 'image/jpeg' },
-	'image/webp': { quality: 0.85, mimeType: 'image/jpeg' },
-	'image/svg+xml': { quality: 1, mimeType: 'image/png' },
-} as const;
-
 const mimeTypeMap = {
 	'image/webp': 'webp',
 	'image/jpeg': 'jpg',
@@ -34,16 +29,18 @@ export function uploadFile(
 	name?: string,
 	keepOriginal: boolean = defaultStore.state.keepOriginalUploading,
 ): Promise<Misskey.entities.DriveFile> {
+	if ($i == null) throw new Error('Not logged in');
+
 	if (folder && typeof folder === 'object') folder = folder.id;
 
 	return new Promise((resolve, reject) => {
 		const id = Math.random().toString();
 
 		const reader = new FileReader();
-		reader.onload = async (ev) => {
+		reader.onload = async (): Promise<void> => {
 			const ctx = reactive<Uploading>({
 				id: id,
-				name: name || file.name || 'untitled',
+				name: name ?? file.name ?? 'untitled',
 				progressMax: undefined,
 				progressValue: undefined,
 				img: window.URL.createObjectURL(file),
@@ -51,20 +48,22 @@ export function uploadFile(
 
 			uploads.value.push(ctx);
 
-			let resizedImage: any;
-			if (!keepOriginal && file.type in compressTypeMap) {
-				const imgConfig = compressTypeMap[file.type];
-
-				const config = {
-					maxWidth: 2048,
-					maxHeight: 2048,
-					debug: true,
-					...imgConfig,
-				};
-
+			const config = !keepOriginal ? await getCompressionConfig(file) : undefined;
+			let resizedImage: Blob | undefined;
+			if (config) {
 				try {
-					resizedImage = await readAndCompressImage(file, config);
-					ctx.name = file.type !== imgConfig.mimeType ? `${ctx.name}.${mimeTypeMap[compressTypeMap[file.type].mimeType]}` : ctx.name;
+					const resized = await readAndCompressImage(file, config);
+					if (resized.size < file.size || file.type === 'image/webp') {
+						// The compression may not always reduce the file size
+						// (and WebP is not browser safe yet)
+						resizedImage = resized;
+					}
+					if (_DEV_) {
+						const saved = ((1 - resized.size / file.size) * 100).toFixed(2);
+						console.log(`Image compression: before ${file.size} bytes, after ${resized.size} bytes, saved ${saved}%`);
+					}
+
+					ctx.name = file.type !== config.mimeType ? `${ctx.name}.${mimeTypeMap[config.mimeType]}` : ctx.name;
 				} catch (err) {
 					console.error('Failed to resize image', err);
 				}
@@ -73,13 +72,13 @@ export function uploadFile(
 			const formData = new FormData();
 			formData.append('i', $i.token);
 			formData.append('force', 'true');
-			formData.append('file', resizedImage || file);
+			formData.append('file', resizedImage ?? file);
 			formData.append('name', ctx.name);
 			if (folder) formData.append('folderId', folder);
 
 			const xhr = new XMLHttpRequest();
 			xhr.open('POST', apiUrl + '/drive/files/create', true);
-			xhr.onload = (ev) => {
+			xhr.onload = ((ev: ProgressEvent<XMLHttpRequest>) => {
 				if (xhr.status !== 200 || ev.target == null || ev.target.response == null) {
 					// TODO: 消すのではなくて(ネットワーク的なエラーなら)再送できるようにしたい
 					uploads.value = uploads.value.filter(x => x.id !== id);
@@ -122,7 +121,7 @@ export function uploadFile(
 				resolve(driveFile);
 
 				uploads.value = uploads.value.filter(x => x.id !== id);
-			};
+			}) as (ev: ProgressEvent<EventTarget>) => any;
 
 			xhr.upload.onprogress = ev => {
 				if (ev.lengthComputable) {
diff --git a/packages/client/src/scripts/upload/compress-config.ts b/packages/client/src/scripts/upload/compress-config.ts
new file mode 100644
index 0000000000..793c78ad20
--- /dev/null
+++ b/packages/client/src/scripts/upload/compress-config.ts
@@ -0,0 +1,23 @@
+import isAnimated from 'is-file-animated';
+import type { BrowserImageResizerConfig } from 'browser-image-resizer';
+
+const compressTypeMap = {
+	'image/jpeg': { quality: 0.85, mimeType: 'image/jpeg' },
+	'image/png': { quality: 1, mimeType: 'image/png' },
+	'image/webp': { quality: 0.85, mimeType: 'image/jpeg' },
+	'image/svg+xml': { quality: 1, mimeType: 'image/png' },
+} as const;
+
+export async function getCompressionConfig(file: File): Promise<BrowserImageResizerConfig | undefined> {
+	const imgConfig = compressTypeMap[file.type];
+	if (!imgConfig || await isAnimated(file)) {
+		return;
+	}
+
+	return {
+		maxWidth: 2048,
+		maxHeight: 2048,
+		debug: true,
+		...imgConfig,
+	};
+}
diff --git a/yarn.lock b/yarn.lock
index dc9ac7ccd8..96db703b28 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4975,6 +4975,7 @@ __metadata:
     eventemitter3: 5.0.0
     idb-keyval: 6.2.0
     insert-text-at-cursor: 0.3.0
+    is-file-animated: 1.0.1
     json5: 2.2.1
     katex: 0.15.6
     matter-js: 0.18.0
@@ -9574,6 +9575,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-file-animated@npm:1.0.1":
+  version: 1.0.1
+  resolution: "is-file-animated@npm:1.0.1"
+  checksum: bcc281e0694e1ba74adfdef75f83f1637ab6470eceecef867d21b4a98e112c32188514b3172348dd137b82cbe8771b6d683de1439d8e1e86011fed77da896c4e
+  languageName: node
+  linkType: hard
+
 "is-fullwidth-code-point@npm:^1.0.0":
   version: 1.0.0
   resolution: "is-fullwidth-code-point@npm:1.0.0"
-- 
cgit v1.2.3-freya


From c5179e8f1cab361231a8723a5da827d283ebd3db Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 18 Dec 2022 16:43:09 +0900
Subject: chore(client): :art: about button (#9339)

---
 packages/client/src/components/MkSuperMenu.vue | 5 ++---
 packages/client/src/components/form/link.vue   | 6 +++---
 packages/client/src/style.scss                 | 1 +
 3 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue
index 8ce2dc5dc2..fa8921bdde 100644
--- a/packages/client/src/components/MkSuperMenu.vue
+++ b/packages/client/src/components/MkSuperMenu.vue
@@ -89,10 +89,9 @@ export default defineComponent({
 				}
 
 				> .text {
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					overflow: hidden;
+					white-space: normal;
 					padding-right: 12px;
+					flex-shrink: 1;
 				}
 
 			}
diff --git a/packages/client/src/components/form/link.vue b/packages/client/src/components/form/link.vue
index 34b641ffb6..899394cb62 100644
--- a/packages/client/src/components/form/link.vue
+++ b/packages/client/src/components/form/link.vue
@@ -75,10 +75,10 @@ const props = defineProps<{
 		}
 
 		> .text {
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
+			flex-shrink: 1;
+			white-space: normal;
 			padding-right: 12px;
+			text-align: center;
 		}
 
 		> .right {
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 9b562d3228..0b61d46f10 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -162,6 +162,7 @@ hr {
 	font-size: 1em;
 	font-family: inherit;
 	line-height: inherit;
+	max-width: 100%;
 
 	&, * {
 		@extend ._noSelect;
-- 
cgit v1.2.3-freya


From 88859cf67d5389ace9fe6db3ae153961979b50fc Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 18 Dec 2022 19:52:50 +0900
Subject: fix(client): Handle null of rootEl in MkWindow.vue (#9326)

* fix(client): Handle null of rootEl in MkWindow.vue

* comment

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 packages/client/src/components/MkWindow.vue | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
index 758d4d47b6..0ab4382632 100644
--- a/packages/client/src/components/MkWindow.vue
+++ b/packages/client/src/components/MkWindow.vue
@@ -221,6 +221,8 @@ function onHeaderMousedown(evt: MouseEvent) {
 // 上ハンドル掴み時
 function onTopHandleMousedown(evt) {
 	const main = rootEl;
+	// どういうわけかnullになることがある
+	if (main == null) return;
 
 	const base = evt.clientY;
 	const height = parseInt(getComputedStyle(main, '').height, 10);
@@ -247,6 +249,7 @@ function onTopHandleMousedown(evt) {
 // 右ハンドル掴み時
 function onRightHandleMousedown(evt) {
 	const main = rootEl;
+	if (main == null) return;
 
 	const base = evt.clientX;
 	const width = parseInt(getComputedStyle(main, '').width, 10);
@@ -271,6 +274,7 @@ function onRightHandleMousedown(evt) {
 // 下ハンドル掴み時
 function onBottomHandleMousedown(evt) {
 	const main = rootEl;
+	if (main == null) return;
 
 	const base = evt.clientY;
 	const height = parseInt(getComputedStyle(main, '').height, 10);
@@ -295,6 +299,7 @@ function onBottomHandleMousedown(evt) {
 // 左ハンドル掴み時
 function onLeftHandleMousedown(evt) {
 	const main = rootEl;
+	if (main == null) return;
 
 	const base = evt.clientX;
 	const width = parseInt(getComputedStyle(main, '').width, 10);
@@ -366,6 +371,8 @@ function applyTransformLeft(left) {
 
 function onBrowserResize() {
 	const main = rootEl;
+	if (main == null) return;
+
 	const position = main.getBoundingClientRect();
 	const browserWidth = window.innerWidth;
 	const browserHeight = window.innerHeight;
-- 
cgit v1.2.3-freya


From ac0a59835e7567dfece97ae0240197c9e924d882 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 19 Dec 2022 08:59:17 +0900
Subject: wip (#9349)

---
 packages/backend/src/server/web/views/base.pug |   2 +-
 packages/client/package.json                   |   6 +-
 packages/client/src/init.ts                    |   2 +
 yarn.lock                                      | 426 ++++++++++++-------------
 4 files changed, 219 insertions(+), 217 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug
index 4238e15f04..7d802d37ce 100644
--- a/packages/backend/src/server/web/views/base.pug
+++ b/packages/backend/src/server/web/views/base.pug
@@ -39,7 +39,7 @@ html
 
 		if Array.isArray(clientEntry.css)
 			each href in clientEntry.css
-				link(rel='preload' href=`/assets/${href}` as='style')
+				link(rel='stylesheet' href=`/assets/${href}`)
 
 		title
 			block title
diff --git a/packages/client/package.json b/packages/client/package.json
index 2c9b3cbb21..1962f0c6ee 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -13,7 +13,7 @@
 		"@rollup/plugin-json": "5.0.2",
 		"@rollup/pluginutils": "5.0.2",
 		"@syuilo/aiscript": "0.11.1",
-		"@vitejs/plugin-vue": "3",
+		"@vitejs/plugin-vue": "4.0.0",
 		"@vue/compiler-sfc": "3.2.45",
 		"autobind-decorator": "2.4.0",
 		"autosize": "5.0.2",
@@ -42,6 +42,7 @@
 		"punycode": "2.1.1",
 		"querystring": "0.2.1",
 		"rndstr": "1.0.0",
+		"rollup": "3.7.2",
 		"s-age": "1.1.2",
 		"sass": "1.56.2",
 		"seedrandom": "3.0.5",
@@ -58,6 +59,7 @@
 		"typescript": "4.9.4",
 		"uuid": "9.0.0",
 		"vanilla-tilt": "1.7.3",
+		"vite": "4.0.2",
 		"vue": "3.2.45",
 		"vue-prism-editor": "2.0.0-alpha.2",
 		"vuedraggable": "4.0.1"
@@ -83,9 +85,7 @@
 		"eslint": "8.29.0",
 		"eslint-plugin-import": "2.26.0",
 		"eslint-plugin-vue": "9.8.0",
-		"rollup": "3.7.2",
 		"start-server-and-test": "1.15.2",
-		"vite": "3.2.5",
 		"vue-eslint-parser": "^9.1.0",
 		"vue-tsc": "^1.0.13"
 	}
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index f9e08d79b1..89692d5fbb 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -1,6 +1,8 @@
 /**
  * Client entry point
  */
+// https://vitejs.dev/config/build-options.html#build-modulepreload
+import 'vite/modulepreload-polyfill';
 
 import '@/style.scss';
 
diff --git a/yarn.lock b/yarn.lock
index 96db703b28..121818b16c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -642,13 +642,76 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm@npm:0.15.18":
-  version: 0.15.18
-  resolution: "@esbuild/android-arm@npm:0.15.18"
+"@esbuild/android-arm64@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/android-arm64@npm:0.16.9"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/android-arm@npm:0.16.9"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
+"@esbuild/android-x64@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/android-x64@npm:0.16.9"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-arm64@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/darwin-arm64@npm:0.16.9"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-x64@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/darwin-x64@npm:0.16.9"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-arm64@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/freebsd-arm64@npm:0.16.9"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-x64@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/freebsd-x64@npm:0.16.9"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm64@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/linux-arm64@npm:0.16.9"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/linux-arm@npm:0.16.9"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ia32@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/linux-ia32@npm:0.16.9"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
 "@esbuild/linux-loong64@npm:0.14.54":
   version: 0.14.54
   resolution: "@esbuild/linux-loong64@npm:0.14.54"
@@ -656,13 +719,90 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-loong64@npm:0.15.18":
-  version: 0.15.18
-  resolution: "@esbuild/linux-loong64@npm:0.15.18"
+"@esbuild/linux-loong64@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/linux-loong64@npm:0.16.9"
   conditions: os=linux & cpu=loong64
   languageName: node
   linkType: hard
 
+"@esbuild/linux-mips64el@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/linux-mips64el@npm:0.16.9"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ppc64@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/linux-ppc64@npm:0.16.9"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-riscv64@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/linux-riscv64@npm:0.16.9"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-s390x@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/linux-s390x@npm:0.16.9"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-x64@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/linux-x64@npm:0.16.9"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-x64@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/netbsd-x64@npm:0.16.9"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-x64@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/openbsd-x64@npm:0.16.9"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/sunos-x64@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/sunos-x64@npm:0.16.9"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-arm64@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/win32-arm64@npm:0.16.9"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-ia32@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/win32-ia32@npm:0.16.9"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-x64@npm:0.16.9":
+  version: 0.16.9
+  resolution: "@esbuild/win32-x64@npm:0.16.9"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
 "@eslint/eslintrc@npm:^1.3.3":
   version: 1.3.3
   resolution: "@eslint/eslintrc@npm:1.3.3"
@@ -2868,13 +3008,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitejs/plugin-vue@npm:3":
-  version: 3.2.0
-  resolution: "@vitejs/plugin-vue@npm:3.2.0"
+"@vitejs/plugin-vue@npm:4.0.0":
+  version: 4.0.0
+  resolution: "@vitejs/plugin-vue@npm:4.0.0"
   peerDependencies:
-    vite: ^3.0.0
+    vite: ^4.0.0
     vue: ^3.2.25
-  checksum: 64774f770e0e21ce7eb36743d614e3f197a35f5b67b2d3800c61766e649f43dc497bb037738ffafd607eb488064ab132c23766190e7ab557a0b88c0051f7a794
+  checksum: 5a53414912db644ca7a663d87c8d4838841dbf794772105c9b3bc3fb10214fc86c2f1f1a47350f264370e9a5fd2475f3b6882778b2440b5085d3fe7550ced542
   languageName: node
   linkType: hard
 
@@ -4952,7 +5092,7 @@ __metadata:
     "@types/ws": 8.5.3
     "@typescript-eslint/eslint-plugin": 5.46.0
     "@typescript-eslint/parser": 5.46.0
-    "@vitejs/plugin-vue": 3
+    "@vitejs/plugin-vue": 4.0.0
     "@vue/compiler-sfc": 3.2.45
     autobind-decorator: 2.4.0
     autosize: 5.0.2
@@ -5004,7 +5144,7 @@ __metadata:
     typescript: 4.9.4
     uuid: 9.0.0
     vanilla-tilt: 1.7.3
-    vite: 3.2.5
+    vite: 4.0.2
     vue: 3.2.45
     vue-eslint-parser: ^9.1.0
     vue-prism-editor: 2.0.0-alpha.2
@@ -6549,13 +6689,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-android-64@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-android-64@npm:0.15.18"
-  conditions: os=android & cpu=x64
-  languageName: node
-  linkType: hard
-
 "esbuild-android-arm64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-android-arm64@npm:0.14.54"
@@ -6563,13 +6696,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-android-arm64@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-android-arm64@npm:0.15.18"
-  conditions: os=android & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "esbuild-darwin-64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-darwin-64@npm:0.14.54"
@@ -6577,13 +6703,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-darwin-64@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-darwin-64@npm:0.15.18"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
 "esbuild-darwin-arm64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-darwin-arm64@npm:0.14.54"
@@ -6591,13 +6710,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-darwin-arm64@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-darwin-arm64@npm:0.15.18"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "esbuild-freebsd-64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-freebsd-64@npm:0.14.54"
@@ -6605,13 +6717,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-freebsd-64@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-freebsd-64@npm:0.15.18"
-  conditions: os=freebsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "esbuild-freebsd-arm64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-freebsd-arm64@npm:0.14.54"
@@ -6619,13 +6724,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-freebsd-arm64@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-freebsd-arm64@npm:0.15.18"
-  conditions: os=freebsd & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "esbuild-linux-32@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-linux-32@npm:0.14.54"
@@ -6633,13 +6731,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-linux-32@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-linux-32@npm:0.15.18"
-  conditions: os=linux & cpu=ia32
-  languageName: node
-  linkType: hard
-
 "esbuild-linux-64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-linux-64@npm:0.14.54"
@@ -6647,13 +6738,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-linux-64@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-linux-64@npm:0.15.18"
-  conditions: os=linux & cpu=x64
-  languageName: node
-  linkType: hard
-
 "esbuild-linux-arm64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-linux-arm64@npm:0.14.54"
@@ -6661,13 +6745,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-linux-arm64@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-linux-arm64@npm:0.15.18"
-  conditions: os=linux & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "esbuild-linux-arm@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-linux-arm@npm:0.14.54"
@@ -6675,13 +6752,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-linux-arm@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-linux-arm@npm:0.15.18"
-  conditions: os=linux & cpu=arm
-  languageName: node
-  linkType: hard
-
 "esbuild-linux-mips64le@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-linux-mips64le@npm:0.14.54"
@@ -6689,13 +6759,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-linux-mips64le@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-linux-mips64le@npm:0.15.18"
-  conditions: os=linux & cpu=mips64el
-  languageName: node
-  linkType: hard
-
 "esbuild-linux-ppc64le@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-linux-ppc64le@npm:0.14.54"
@@ -6703,13 +6766,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-linux-ppc64le@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-linux-ppc64le@npm:0.15.18"
-  conditions: os=linux & cpu=ppc64
-  languageName: node
-  linkType: hard
-
 "esbuild-linux-riscv64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-linux-riscv64@npm:0.14.54"
@@ -6717,13 +6773,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-linux-riscv64@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-linux-riscv64@npm:0.15.18"
-  conditions: os=linux & cpu=riscv64
-  languageName: node
-  linkType: hard
-
 "esbuild-linux-s390x@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-linux-s390x@npm:0.14.54"
@@ -6731,13 +6780,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-linux-s390x@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-linux-s390x@npm:0.15.18"
-  conditions: os=linux & cpu=s390x
-  languageName: node
-  linkType: hard
-
 "esbuild-netbsd-64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-netbsd-64@npm:0.14.54"
@@ -6745,13 +6787,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-netbsd-64@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-netbsd-64@npm:0.15.18"
-  conditions: os=netbsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "esbuild-openbsd-64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-openbsd-64@npm:0.14.54"
@@ -6759,13 +6794,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-openbsd-64@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-openbsd-64@npm:0.15.18"
-  conditions: os=openbsd & cpu=x64
-  languageName: node
-  linkType: hard
-
 "esbuild-sunos-64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-sunos-64@npm:0.14.54"
@@ -6773,13 +6801,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-sunos-64@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-sunos-64@npm:0.15.18"
-  conditions: os=sunos & cpu=x64
-  languageName: node
-  linkType: hard
-
 "esbuild-windows-32@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-windows-32@npm:0.14.54"
@@ -6787,13 +6808,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-windows-32@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-windows-32@npm:0.15.18"
-  conditions: os=win32 & cpu=ia32
-  languageName: node
-  linkType: hard
-
 "esbuild-windows-64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-windows-64@npm:0.14.54"
@@ -6801,13 +6815,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-windows-64@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-windows-64@npm:0.15.18"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "esbuild-windows-arm64@npm:0.14.54":
   version: 0.14.54
   resolution: "esbuild-windows-arm64@npm:0.14.54"
@@ -6815,13 +6822,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-windows-arm64@npm:0.15.18":
-  version: 0.15.18
-  resolution: "esbuild-windows-arm64@npm:0.15.18"
-  conditions: os=win32 & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "esbuild@npm:^0.14.42":
   version: 0.14.54
   resolution: "esbuild@npm:0.14.54"
@@ -6896,80 +6896,80 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:^0.15.9":
-  version: 0.15.18
-  resolution: "esbuild@npm:0.15.18"
-  dependencies:
-    "@esbuild/android-arm": 0.15.18
-    "@esbuild/linux-loong64": 0.15.18
-    esbuild-android-64: 0.15.18
-    esbuild-android-arm64: 0.15.18
-    esbuild-darwin-64: 0.15.18
-    esbuild-darwin-arm64: 0.15.18
-    esbuild-freebsd-64: 0.15.18
-    esbuild-freebsd-arm64: 0.15.18
-    esbuild-linux-32: 0.15.18
-    esbuild-linux-64: 0.15.18
-    esbuild-linux-arm: 0.15.18
-    esbuild-linux-arm64: 0.15.18
-    esbuild-linux-mips64le: 0.15.18
-    esbuild-linux-ppc64le: 0.15.18
-    esbuild-linux-riscv64: 0.15.18
-    esbuild-linux-s390x: 0.15.18
-    esbuild-netbsd-64: 0.15.18
-    esbuild-openbsd-64: 0.15.18
-    esbuild-sunos-64: 0.15.18
-    esbuild-windows-32: 0.15.18
-    esbuild-windows-64: 0.15.18
-    esbuild-windows-arm64: 0.15.18
+"esbuild@npm:^0.16.3":
+  version: 0.16.9
+  resolution: "esbuild@npm:0.16.9"
+  dependencies:
+    "@esbuild/android-arm": 0.16.9
+    "@esbuild/android-arm64": 0.16.9
+    "@esbuild/android-x64": 0.16.9
+    "@esbuild/darwin-arm64": 0.16.9
+    "@esbuild/darwin-x64": 0.16.9
+    "@esbuild/freebsd-arm64": 0.16.9
+    "@esbuild/freebsd-x64": 0.16.9
+    "@esbuild/linux-arm": 0.16.9
+    "@esbuild/linux-arm64": 0.16.9
+    "@esbuild/linux-ia32": 0.16.9
+    "@esbuild/linux-loong64": 0.16.9
+    "@esbuild/linux-mips64el": 0.16.9
+    "@esbuild/linux-ppc64": 0.16.9
+    "@esbuild/linux-riscv64": 0.16.9
+    "@esbuild/linux-s390x": 0.16.9
+    "@esbuild/linux-x64": 0.16.9
+    "@esbuild/netbsd-x64": 0.16.9
+    "@esbuild/openbsd-x64": 0.16.9
+    "@esbuild/sunos-x64": 0.16.9
+    "@esbuild/win32-arm64": 0.16.9
+    "@esbuild/win32-ia32": 0.16.9
+    "@esbuild/win32-x64": 0.16.9
   dependenciesMeta:
     "@esbuild/android-arm":
       optional: true
-    "@esbuild/linux-loong64":
+    "@esbuild/android-arm64":
       optional: true
-    esbuild-android-64:
+    "@esbuild/android-x64":
       optional: true
-    esbuild-android-arm64:
+    "@esbuild/darwin-arm64":
       optional: true
-    esbuild-darwin-64:
+    "@esbuild/darwin-x64":
       optional: true
-    esbuild-darwin-arm64:
+    "@esbuild/freebsd-arm64":
       optional: true
-    esbuild-freebsd-64:
+    "@esbuild/freebsd-x64":
       optional: true
-    esbuild-freebsd-arm64:
+    "@esbuild/linux-arm":
       optional: true
-    esbuild-linux-32:
+    "@esbuild/linux-arm64":
       optional: true
-    esbuild-linux-64:
+    "@esbuild/linux-ia32":
       optional: true
-    esbuild-linux-arm:
+    "@esbuild/linux-loong64":
       optional: true
-    esbuild-linux-arm64:
+    "@esbuild/linux-mips64el":
       optional: true
-    esbuild-linux-mips64le:
+    "@esbuild/linux-ppc64":
       optional: true
-    esbuild-linux-ppc64le:
+    "@esbuild/linux-riscv64":
       optional: true
-    esbuild-linux-riscv64:
+    "@esbuild/linux-s390x":
       optional: true
-    esbuild-linux-s390x:
+    "@esbuild/linux-x64":
       optional: true
-    esbuild-netbsd-64:
+    "@esbuild/netbsd-x64":
       optional: true
-    esbuild-openbsd-64:
+    "@esbuild/openbsd-x64":
       optional: true
-    esbuild-sunos-64:
+    "@esbuild/sunos-x64":
       optional: true
-    esbuild-windows-32:
+    "@esbuild/win32-arm64":
       optional: true
-    esbuild-windows-64:
+    "@esbuild/win32-ia32":
       optional: true
-    esbuild-windows-arm64:
+    "@esbuild/win32-x64":
       optional: true
   bin:
     esbuild: bin/esbuild
-  checksum: ec12682b2cb2d4f0669d0e555028b87a9284ca7f6a1b26e35e69a8697165b35cc682ad598abc70f0bbcfdc12ca84ef888caf5ceee389237862e8f8c17da85f89
+  checksum: e7053a94178e548ae166a3bdff1e2d2c6b4ac6fe5d17434eda8222d742b44b2ff5653434a03b2075676827ad8ca37ff24f3383f7b8da5ebb35d8fac4ae7b89f3
   languageName: node
   linkType: hard
 
@@ -13542,7 +13542,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.18":
+"postcss@npm:^8.4.20":
   version: 8.4.20
   resolution: "postcss@npm:8.4.20"
   dependencies:
@@ -14733,9 +14733,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:^2.79.1":
-  version: 2.79.1
-  resolution: "rollup@npm:2.79.1"
+"rollup@npm:^3.7.0":
+  version: 3.7.5
+  resolution: "rollup@npm:3.7.5"
   dependencies:
     fsevents: ~2.3.2
   dependenciesMeta:
@@ -14743,7 +14743,7 @@ __metadata:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: 6a2bf167b3587d4df709b37d149ad0300692cc5deb510f89ac7bdc77c8738c9546ae3de9322b0968e1ed2b0e984571f5f55aae28fa7de4cfcb1bc5402a4e2be6
+  checksum: 772f85e9f12c83091cbe8ef31dc563198566cfe536dc8099dd6d4e372daa370f9d455cc42c7993d22b02521e25d53733df7e98d2a993e5a22bf11b2591de4e2d
   languageName: node
   linkType: hard
 
@@ -17014,15 +17014,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:3.2.5":
-  version: 3.2.5
-  resolution: "vite@npm:3.2.5"
+"vite@npm:4.0.2":
+  version: 4.0.2
+  resolution: "vite@npm:4.0.2"
   dependencies:
-    esbuild: ^0.15.9
+    esbuild: ^0.16.3
     fsevents: ~2.3.2
-    postcss: ^8.4.18
+    postcss: ^8.4.20
     resolve: ^1.22.1
-    rollup: ^2.79.1
+    rollup: ^3.7.0
   peerDependencies:
     "@types/node": ">= 14"
     less: "*"
@@ -17048,7 +17048,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: ad35b7008c2b62a167d1d1a82f0a0c60fa457733f1969e9eedf0b0077f67a7ac74b4c9477e75a397895150f09b6551f0c17841c5b05c34d9fe302bb0b5dc28a8
+  checksum: b259782d83f293289f1cd7802cc525c75691fd45a1ded74e58365b5bff8f93f255daad4480269cda1660bf831f628b7a7224c9f591f039b5c0ccf351a8ee04ee
   languageName: node
   linkType: hard
 
-- 
cgit v1.2.3-freya


From 2c9a3f643c5b206892b3856fdfd1f54c7ca58e95 Mon Sep 17 00:00:00 2001
From: Kagami Sascha Rosylight <saschanaz@outlook.com>
Date: Mon, 19 Dec 2022 09:00:45 +0900
Subject: enhance(client): case insensitive emoji search (#9346)

---
 packages/client/src/components/MkEmojiPicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index 3de0afbf50..3dc90ce545 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -135,7 +135,7 @@ watch(q, () => {
 		return;
 	}
 
-	const newQ = q.value.replace(/:/g, '');
+	const newQ = q.value.replace(/:/g, '').toLowerCase();
 
 	const searchCustom = () => {
 		const max = 8;
-- 
cgit v1.2.3-freya


From 411b08841829fa07e8d87c01947ca6ebdbc70b4a Mon Sep 17 00:00:00 2001
From: Kagami Sascha Rosylight <saschanaz@outlook.com>
Date: Mon, 19 Dec 2022 10:40:57 +0900
Subject: refactor: fix broken Vue component custom properties (#9351)

---
 packages/client/@types/vue.d.ts | 17 +++++++++++++----
 packages/client/src/i18n.ts     |  8 --------
 packages/client/src/instance.ts |  7 -------
 packages/client/src/store.ts    |  7 -------
 4 files changed, 13 insertions(+), 26 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/@types/vue.d.ts b/packages/client/@types/vue.d.ts
index f6b66228f6..9c9c34ccc5 100644
--- a/packages/client/@types/vue.d.ts
+++ b/packages/client/@types/vue.d.ts
@@ -1,7 +1,16 @@
 /// <reference types="vue/macros-global" />
 
-declare module '*.vue' {
-	import type { DefineComponent } from 'vue';
-	const component: DefineComponent<{}, {}, any>;
-	export default component;
+import type { $i } from '@/account';
+import type { defaultStore } from '@/store';
+import type { instance } from '@/instance';
+import type { i18n } from '@/i18n';
+
+declare module 'vue' {
+	interface ComponentCustomProperties {
+		$i: typeof $i;
+		$store: typeof defaultStore;
+		$instance: typeof instance;
+		$t: typeof i18n['t'];
+		$ts: typeof i18n['ts'];
+	}
 }
diff --git a/packages/client/src/i18n.ts b/packages/client/src/i18n.ts
index fbc10a0bad..31e066960d 100644
--- a/packages/client/src/i18n.ts
+++ b/packages/client/src/i18n.ts
@@ -3,11 +3,3 @@ import { locale } from '@/config';
 import { I18n } from '@/scripts/i18n';
 
 export const i18n = markRaw(new I18n(locale));
-
-// このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
-declare module '@vue/runtime-core' {
-	interface ComponentCustomProperties {
-		$t: typeof i18n['t'];
-		$ts: typeof i18n['locale'];
-	}
-}
diff --git a/packages/client/src/instance.ts b/packages/client/src/instance.ts
index d24eb2419a..4f591f4fc1 100644
--- a/packages/client/src/instance.ts
+++ b/packages/client/src/instance.ts
@@ -43,10 +43,3 @@ export const emojiTags = computed(() => {
 	}
 	return Array.from(tags);
 });
-
-// このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
-declare module '@vue/runtime-core' {
-	interface ComponentCustomProperties {
-		$instance: typeof instance;
-	}
-}
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index 061e1913d6..d1b6e08bc8 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -381,10 +381,3 @@ export class ColdDeviceStorage {
 		};
 	}
 }
-
-// このファイルに書きたくないけどここに書かないと何故かVeturが認識しない
-declare module '@vue/runtime-core' {
-	interface ComponentCustomProperties {
-		$store: typeof defaultStore;
-	}
-}
-- 
cgit v1.2.3-freya


From f83bd31fd5fee0bb2209ad0e5359ffa473ffb30e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 19 Dec 2022 13:53:41 +0900
Subject: wip

---
 packages/backend/src/server/web/views/base.pug     |  2 +-
 packages/client/src/account.ts                     |  2 +-
 .../client/src/components/MkAbuseReportWindow.vue  |  2 +-
 .../src/components/MkChannelFollowButton.vue       |  4 ++--
 packages/client/src/components/MkDialog.vue        |  2 +-
 packages/client/src/components/MkDrive.file.vue    |  4 ++--
 packages/client/src/components/MkDrive.folder.vue  |  2 +-
 .../client/src/components/MkDrive.navFolder.vue    |  2 +-
 packages/client/src/components/MkDrive.vue         |  6 ++---
 packages/client/src/components/MkEmojiPicker.vue   |  2 +-
 packages/client/src/components/MkFollowButton.vue  |  6 ++---
 packages/client/src/components/MkGoogle.vue        |  2 +-
 .../client/src/components/MkModalPageWindow.vue    |  6 ++---
 packages/client/src/components/MkModalWindow.vue   |  2 +-
 packages/client/src/components/MkNote.vue          | 18 +++++++-------
 packages/client/src/components/MkNoteDetailed.vue  | 18 +++++++-------
 packages/client/src/components/MkNotification.vue  |  8 +++----
 packages/client/src/components/MkPageWindow.vue    |  6 ++---
 packages/client/src/components/MkPoll.vue          |  2 +-
 packages/client/src/components/MkPostForm.vue      | 10 ++++----
 packages/client/src/components/MkRenoteButton.vue  |  4 ++--
 packages/client/src/components/MkSignup.vue        | 10 ++++----
 .../client/src/components/MkSubNoteContent.vue     |  2 +-
 packages/client/src/components/MkVisibility.vue    |  2 +-
 .../client/src/components/MkVisibilityPicker.vue   |  4 ++--
 packages/client/src/components/MkWaitingDialog.vue |  2 +-
 packages/client/src/components/MkWidgets.vue       |  6 ++---
 packages/client/src/components/form/checkbox.vue   |  2 +-
 packages/client/src/components/form/input.vue      |  2 +-
 packages/client/src/components/form/link.vue       |  2 +-
 packages/client/src/components/global/MkA.vue      |  4 ++--
 packages/client/src/components/page/page.post.vue  |  4 ++--
 packages/client/src/navbar.ts                      | 14 +++++------
 packages/client/src/pages/about-misskey.vue        |  2 +-
 packages/client/src/pages/about.emojis.vue         |  2 +-
 packages/client/src/pages/about.federation.vue     |  2 +-
 packages/client/src/pages/about.vue                |  2 +-
 packages/client/src/pages/admin-file.vue           |  4 ++--
 packages/client/src/pages/admin/abuses.vue         |  2 +-
 packages/client/src/pages/admin/ads.vue            |  4 ++--
 packages/client/src/pages/admin/announcements.vue  |  4 ++--
 packages/client/src/pages/admin/email-settings.vue |  2 +-
 .../client/src/pages/admin/emoji-edit-dialog.vue   |  2 +-
 packages/client/src/pages/admin/emojis.vue         | 10 ++++----
 packages/client/src/pages/admin/files.vue          |  6 ++---
 packages/client/src/pages/admin/index.vue          | 24 +++++++++----------
 packages/client/src/pages/admin/integrations.vue   |  2 +-
 packages/client/src/pages/admin/object-storage.vue |  4 ++--
 packages/client/src/pages/admin/other-settings.vue |  4 ++--
 packages/client/src/pages/admin/relays.vue         |  8 +++----
 packages/client/src/pages/admin/security.vue       |  2 +-
 packages/client/src/pages/admin/settings.vue       | 12 +++++-----
 packages/client/src/pages/admin/users.vue          |  6 ++---
 packages/client/src/pages/announcements.vue        |  2 +-
 packages/client/src/pages/antenna-timeline.vue     |  2 +-
 packages/client/src/pages/api-console.vue          |  2 +-
 packages/client/src/pages/channel-editor.vue       |  4 ++--
 packages/client/src/pages/channel.vue              |  2 +-
 packages/client/src/pages/channels.vue             |  4 ++--
 packages/client/src/pages/clip.vue                 |  4 ++--
 packages/client/src/pages/drive.vue                |  2 +-
 packages/client/src/pages/emojis.emoji.vue         |  2 +-
 packages/client/src/pages/explore.users.vue        |  6 ++---
 packages/client/src/pages/explore.vue              |  4 ++--
 packages/client/src/pages/favorites.vue            |  2 +-
 packages/client/src/pages/follow-requests.vue      |  2 +-
 packages/client/src/pages/gallery/edit.vue         |  4 ++--
 packages/client/src/pages/gallery/index.vue        |  4 ++--
 packages/client/src/pages/gallery/post.vue         |  4 ++--
 packages/client/src/pages/instance-info.vue        |  2 +-
 packages/client/src/pages/messaging/index.vue      |  4 ++--
 .../src/pages/messaging/messaging-room.form.vue    |  2 +-
 packages/client/src/pages/my-antennas/index.vue    |  2 +-
 packages/client/src/pages/my-clips/index.vue       |  6 ++---
 packages/client/src/pages/my-lists/index.vue       |  4 ++--
 packages/client/src/pages/notifications.vue        |  4 ++--
 .../pages/page-editor/els/page-editor.el.if.vue    |  2 +-
 .../pages/page-editor/els/page-editor.el.post.vue  |  2 +-
 .../page-editor/els/page-editor.el.section.vue     |  2 +-
 .../pages/page-editor/page-editor.container.vue    |  2 +-
 .../client/src/pages/page-editor/page-editor.vue   | 14 +++++------
 packages/client/src/pages/page.vue                 |  4 ++--
 packages/client/src/pages/pages.vue                |  4 ++--
 packages/client/src/pages/registry.keys.vue        |  2 +-
 packages/client/src/pages/registry.value.vue       |  2 +-
 packages/client/src/pages/registry.vue             |  2 +-
 packages/client/src/pages/search.vue               |  2 +-
 packages/client/src/pages/settings/accounts.vue    |  4 ++--
 packages/client/src/pages/settings/apps.vue        |  2 +-
 packages/client/src/pages/settings/drive.vue       |  2 +-
 packages/client/src/pages/settings/email.vue       |  2 +-
 packages/client/src/pages/settings/general.vue     |  2 +-
 packages/client/src/pages/settings/index.vue       | 12 +++++-----
 packages/client/src/pages/settings/integration.vue |  2 +-
 .../client/src/pages/settings/notifications.vue    |  4 ++--
 packages/client/src/pages/settings/other.vue       |  4 ++--
 .../client/src/pages/settings/plugin.install.vue   |  2 +-
 packages/client/src/pages/settings/plugin.vue      |  4 ++--
 packages/client/src/pages/settings/profile.vue     |  4 ++--
 packages/client/src/pages/settings/reaction.vue    |  2 +-
 packages/client/src/pages/settings/security.vue    |  2 +-
 .../client/src/pages/settings/theme.install.vue    |  2 +-
 .../client/src/pages/settings/theme.manage.vue     |  2 +-
 packages/client/src/pages/settings/theme.vue       |  2 +-
 .../client/src/pages/settings/webhook.edit.vue     |  2 +-
 packages/client/src/pages/settings/webhook.new.vue |  2 +-
 packages/client/src/pages/settings/webhook.vue     |  2 +-
 packages/client/src/pages/share.vue                |  2 +-
 packages/client/src/pages/tag.vue                  |  2 +-
 packages/client/src/pages/theme-editor.vue         |  2 +-
 packages/client/src/pages/timeline.tutorial.vue    |  2 +-
 packages/client/src/pages/timeline.vue             | 10 ++++----
 packages/client/src/pages/user-list-timeline.vue   |  2 +-
 packages/client/src/pages/user/home.vue            |  2 +-
 packages/client/src/pages/user/index.activity.vue  |  2 +-
 packages/client/src/pages/user/index.vue           |  4 ++--
 packages/client/src/pages/welcome.entrance.a.vue   |  2 +-
 packages/client/src/pages/welcome.entrance.c.vue   |  2 +-
 packages/client/src/pages/welcome.timeline.vue     |  2 +-
 packages/client/src/scripts/get-note-menu.ts       | 28 +++++++++++-----------
 packages/client/src/scripts/get-user-menu.ts       |  4 ++--
 packages/client/src/scripts/hpml/lib.ts            |  6 ++---
 packages/client/src/scripts/select-file.ts         |  4 ++--
 packages/client/src/style.scss                     |  5 ++++
 .../client/src/ui/_common_/navbar-for-mobile.vue   |  6 ++---
 packages/client/src/ui/_common_/navbar.vue         |  6 ++---
 packages/client/src/ui/classic.header.vue          |  6 ++---
 packages/client/src/ui/classic.sidebar.vue         |  6 ++---
 packages/client/src/ui/classic.widgets.vue         |  2 +-
 packages/client/src/ui/deck.vue                    | 10 ++++----
 packages/client/src/ui/deck/column.vue             |  4 ++--
 .../client/src/ui/deck/notifications-column.vue    |  2 +-
 packages/client/src/ui/deck/tl-column.vue          | 10 ++++----
 packages/client/src/ui/universal.vue               |  4 ++--
 packages/client/src/ui/universal.widgets.vue       |  2 +-
 packages/client/src/ui/visitor/b.vue               |  4 ++--
 packages/client/src/ui/visitor/header.vue          |  6 ++---
 packages/client/src/widgets/federation.vue         |  2 +-
 packages/client/src/widgets/notifications.vue      |  4 ++--
 packages/client/src/widgets/rss-ticker.vue         |  2 +-
 packages/client/src/widgets/rss.vue                |  2 +-
 packages/client/src/widgets/timeline.vue           | 16 ++++++-------
 packages/client/src/widgets/trends.vue             |  2 +-
 143 files changed, 311 insertions(+), 306 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug
index 7d802d37ce..472defa102 100644
--- a/packages/backend/src/server/web/views/base.pug
+++ b/packages/backend/src/server/web/views/base.pug
@@ -34,7 +34,7 @@ html
 		link(rel='prefetch' href='https://xn--931a.moe/assets/info.jpg')
 		link(rel='prefetch' href='https://xn--931a.moe/assets/not-found.jpg')
 		link(rel='prefetch' href='https://xn--931a.moe/assets/error.jpg')
-		link(rel='stylesheet' href='/assets/fontawesome/css/all.css')
+		link(rel='stylesheet' href='https://unpkg.com/@tabler/icons@1.117.0/iconfont/tabler-icons.min.css')
 		link(rel='modulepreload' href=`/assets/${clientEntry.file}`)
 
 		if Array.isArray(clientEntry.css)
diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts
index e9c29d6b0d..e981536dd8 100644
--- a/packages/client/src/account.ts
+++ b/packages/client/src/account.ts
@@ -213,7 +213,7 @@ export async function openAccountMenu(opts: {
 			avatar: $i,
 		}, null, ...(opts.includeCurrentAccount ? [createItem($i)] : []), ...accountItemPromises, {
 			type: 'parent',
-			icon: 'fas fa-plus',
+			icon: 'ti ti-plus',
 			text: i18n.ts.addAccount,
 			children: [{
 				text: i18n.ts.existingAccount,
diff --git a/packages/client/src/components/MkAbuseReportWindow.vue b/packages/client/src/components/MkAbuseReportWindow.vue
index 1862d0a0e4..03890b4e97 100644
--- a/packages/client/src/components/MkAbuseReportWindow.vue
+++ b/packages/client/src/components/MkAbuseReportWindow.vue
@@ -1,7 +1,7 @@
 <template>
 <XWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
 	<template #header>
-		<i class="fas fa-exclamation-circle" style="margin-right: 0.5em;"></i>
+		<i class="ti ti-exclamation-circle" style="margin-right: 0.5em;"></i>
 		<I18n :src="i18n.ts.reportAbuseOf" tag="span">
 			<template #name>
 				<b><MkAcct :user="user"/></b>
diff --git a/packages/client/src/components/MkChannelFollowButton.vue b/packages/client/src/components/MkChannelFollowButton.vue
index dff02beec0..0d250268cf 100644
--- a/packages/client/src/components/MkChannelFollowButton.vue
+++ b/packages/client/src/components/MkChannelFollowButton.vue
@@ -6,10 +6,10 @@
 >
 	<template v-if="!wait">
 		<template v-if="isFollowing">
-			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="fas fa-minus"></i>
+			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
 		</template>
 		<template v-else>
-			<span v-if="full">{{ i18n.ts.follow }}</span><i class="fas fa-plus"></i>
+			<span v-if="full">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
 		</template>
 	</template>
 	<template v-else>
diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index 513e2d22ba..c9e2a2b212 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -5,7 +5,7 @@
 			<i :class="icon"></i>
 		</div>
 		<div v-else-if="!input && !select" class="icon" :class="type">
-			<i v-if="type === 'success'" class="fas fa-check"></i>
+			<i v-if="type === 'success'" class="ti ti-check"></i>
 			<i v-else-if="type === 'error'" class="fas fa-times-circle"></i>
 			<i v-else-if="type === 'warning'" class="fas fa-exclamation-triangle"></i>
 			<i v-else-if="type === 'info'" class="fas fa-info-circle"></i>
diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue
index 22916d5680..c7f4a25f0c 100644
--- a/packages/client/src/components/MkDrive.file.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -75,7 +75,7 @@ function getMenu() {
 		action: describe,
 	}, null, {
 		text: i18n.ts.copyUrl,
-		icon: 'fas fa-link',
+		icon: 'ti ti-link',
 		action: copyUrl,
 	}, {
 		type: 'a',
@@ -86,7 +86,7 @@ function getMenu() {
 		download: props.file.name,
 	}, null, {
 		text: i18n.ts.delete,
-		icon: 'fas fa-trash-alt',
+		icon: 'ti ti-trash',
 		danger: true,
 		action: deleteFile,
 	}];
diff --git a/packages/client/src/components/MkDrive.folder.vue b/packages/client/src/components/MkDrive.folder.vue
index 6c522c0862..e973b8d037 100644
--- a/packages/client/src/components/MkDrive.folder.vue
+++ b/packages/client/src/components/MkDrive.folder.vue
@@ -257,7 +257,7 @@ function onContextmenu(ev: MouseEvent) {
 		action: rename,
 	}, null, {
 		text: i18n.ts.delete,
-		icon: 'fas fa-trash-alt',
+		icon: 'ti ti-trash',
 		danger: true,
 		action: deleteFolder,
 	}], ev);
diff --git a/packages/client/src/components/MkDrive.navFolder.vue b/packages/client/src/components/MkDrive.navFolder.vue
index 455c14f95e..3614113501 100644
--- a/packages/client/src/components/MkDrive.navFolder.vue
+++ b/packages/client/src/components/MkDrive.navFolder.vue
@@ -7,7 +7,7 @@
 	@dragleave="onDragleave"
 	@drop.stop="onDrop"
 >
-	<i v-if="folder == null" class="fas fa-cloud"></i>
+	<i v-if="folder == null" class="ti ti-cloud"></i>
 	<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
 </div>
 </template>
diff --git a/packages/client/src/components/MkDrive.vue b/packages/client/src/components/MkDrive.vue
index c79ab97000..92e8ff62c1 100644
--- a/packages/client/src/components/MkDrive.vue
+++ b/packages/client/src/components/MkDrive.vue
@@ -24,7 +24,7 @@
 			<span v-if="folder != null" class="separator"><i class="fas fa-angle-right"></i></span>
 			<span v-if="folder != null" class="folder current">{{ folder.name }}</span>
 		</div>
-		<button class="menu _button" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
+		<button class="menu _button" @click="showMenu"><i class="ti ti-dots"></i></button>
 	</nav>
 	<div
 		ref="main" class="main"
@@ -592,7 +592,7 @@ function getMenu() {
 		action: () => { selectLocalFile(); },
 	}, {
 		text: i18n.ts.fromUrl,
-		icon: 'fas fa-link',
+		icon: 'ti ti-link',
 		action: () => { urlUpload(); },
 	}, null, {
 		text: folder.value ? folder.value.name : i18n.ts.drive,
@@ -603,7 +603,7 @@ function getMenu() {
 		action: () => { renameFolder(folder.value); },
 	} : undefined, folder.value ? {
 		text: i18n.ts.deleteFolder,
-		icon: 'fas fa-trash-alt',
+		icon: 'ti ti-trash',
 		action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
 	} : undefined, {
 		text: i18n.ts.createFolder,
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index 3dc90ce545..3f185487fb 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -72,7 +72,7 @@
 		<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="fas fa-asterisk fa-fw"></i></button>
 		<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="fas fa-laugh fa-fw"></i></button>
 		<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="fas fa-leaf fa-fw"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="fas fa-hashtag fa-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="ti ti-hash fa-fw"></i></button>
 	</div>
 </div>
 </template>
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index efee795e43..5ec50cd28b 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -12,13 +12,13 @@
 			<span v-if="full">{{ i18n.ts.processing }}</span><i class="fas fa-spinner fa-pulse"></i>
 		</template>
 		<template v-else-if="isFollowing">
-			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="fas fa-minus"></i>
+			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
 		</template>
 		<template v-else-if="!isFollowing && user.isLocked">
-			<span v-if="full">{{ i18n.ts.followRequest }}</span><i class="fas fa-plus"></i>
+			<span v-if="full">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i>
 		</template>
 		<template v-else-if="!isFollowing && !user.isLocked">
-			<span v-if="full">{{ i18n.ts.follow }}</span><i class="fas fa-plus"></i>
+			<span v-if="full">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
 		</template>
 	</template>
 	<template v-else>
diff --git a/packages/client/src/components/MkGoogle.vue b/packages/client/src/components/MkGoogle.vue
index bb4b439ee8..d104cd4cd4 100644
--- a/packages/client/src/components/MkGoogle.vue
+++ b/packages/client/src/components/MkGoogle.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-google">
 	<input v-model="query" type="search" :placeholder="q">
-	<button @click="search"><i class="fas fa-search"></i> {{ $ts.searchByGoogle }}</button>
+	<button @click="search"><i class="ti ti-search"></i> {{ $ts.searchByGoogle }}</button>
 </div>
 </template>
 
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index cc3f4c96cc..d68682be08 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -72,18 +72,18 @@ const contextmenu = $computed(() => {
 		text: i18n.ts.showInPage,
 		action: expand,
 	}, {
-		icon: 'fas fa-external-link-alt',
+		icon: 'ti ti-external-link',
 		text: i18n.ts.popout,
 		action: popout,
 	}, null, {
-		icon: 'fas fa-external-link-alt',
+		icon: 'ti ti-external-link',
 		text: i18n.ts.openInNewTab,
 		action: () => {
 			window.open(pageUrl, '_blank');
 			modal.close();
 		},
 	}, {
-		icon: 'fas fa-link',
+		icon: 'ti ti-link',
 		text: i18n.ts.copyLink,
 		action: () => {
 			copyToClipboard(pageUrl);
diff --git a/packages/client/src/components/MkModalWindow.vue b/packages/client/src/components/MkModalWindow.vue
index 5acd8c921f..139c6b5e50 100644
--- a/packages/client/src/components/MkModalWindow.vue
+++ b/packages/client/src/components/MkModalWindow.vue
@@ -7,7 +7,7 @@
 				<slot name="header"></slot>
 			</span>
 			<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>
+			<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ti ti-check"></i></button>
 		</div>
 		<div class="body">
 			<slot :width="bodyWidth" :height="bodyHeight"></slot>
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 97eadb1945..28896a936b 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -15,7 +15,7 @@
 	<div v-if="appearNote._featuredId_" class="info"><i class="fas fa-bolt"></i> {{ i18n.ts.featured }}</div>
 	<div v-if="isRenote" class="renote">
 		<MkAvatar class="avatar" :user="note.user"/>
-		<i class="fas fa-retweet"></i>
+		<i class="ti ti-repeat"></i>
 		<I18n :src="i18n.ts.renotedBy" tag="span">
 			<template #user>
 				<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
@@ -25,7 +25,7 @@
 		</I18n>
 		<div class="info">
 			<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
-				<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
+				<i v-if="isMyRenote" class="ti ti-dots dropdownIcon"></i>
 				<MkTime :time="note.createdAt"/>
 			</button>
 			<MkVisibility :note="note"/>
@@ -44,7 +44,7 @@
 				<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
-						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
+						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<a v-if="appearNote.renote != null" class="rp">RN:</a>
 						<div v-if="translating || translation" class="translation">
@@ -73,19 +73,19 @@
 			<footer class="footer">
 				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 				<button class="button _button" @click="reply()">
-					<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
-					<template v-else><i class="fas fa-reply"></i></template>
+					<template v-if="appearNote.reply"><i class="ti ti-arrow-back-up-all"></i></template>
+					<template v-else><i class="ti ti-arrow-back-up"></i></template>
 					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
 				</button>
 				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
 				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
-					<i class="fas fa-plus"></i>
+					<i class="ti ti-plus"></i>
 				</button>
 				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-					<i class="fas fa-minus"></i>
+					<i class="ti ti-minus"></i>
 				</button>
 				<button ref="menuButton" class="button _button" @click="menu()">
-					<i class="fas fa-ellipsis-h"></i>
+					<i class="ti ti-dots"></i>
 				</button>
 			</footer>
 		</div>
@@ -256,7 +256,7 @@ function showRenoteMenu(viaKeyboard = false): void {
 	if (!isMyRenote) return;
 	os.popupMenu([{
 		text: i18n.ts.unrenote,
-		icon: 'fas fa-trash-alt',
+		icon: 'ti ti-trash',
 		danger: true,
 		action: () => {
 			os.api('notes/delete', {
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 0ba93bbd76..8bef4aad43 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -13,7 +13,7 @@
 	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
 	<div v-if="isRenote" class="renote">
 		<MkAvatar class="avatar" :user="note.user"/>
-		<i class="fas fa-retweet"></i>
+		<i class="ti ti-repeat"></i>
 		<I18n :src="i18n.ts.renotedBy" tag="span">
 			<template #user>
 				<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
@@ -23,7 +23,7 @@
 		</I18n>
 		<div class="info">
 			<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
-				<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
+				<i v-if="isMyRenote" class="ti ti-dots dropdownIcon"></i>
 				<MkTime :time="note.createdAt"/>
 			</button>
 			<MkVisibility :note="note"/>
@@ -55,7 +55,7 @@
 				<div v-show="appearNote.cw == null || showContent" class="content">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
-						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
+						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<a v-if="appearNote.renote != null" class="rp">RN:</a>
 						<div v-if="translating || translation" class="translation">
@@ -83,19 +83,19 @@
 				</div>
 				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 				<button class="button _button" @click="reply()">
-					<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
-					<template v-else><i class="fas fa-reply"></i></template>
+					<template v-if="appearNote.reply"><i class="ti ti-arrow-back-up-all"></i></template>
+					<template v-else><i class="ti ti-arrow-back-up"></i></template>
 					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
 				</button>
 				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
 				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
-					<i class="fas fa-plus"></i>
+					<i class="ti ti-plus"></i>
 				</button>
 				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-					<i class="fas fa-minus"></i>
+					<i class="ti ti-minus"></i>
 				</button>
 				<button ref="menuButton" class="button _button" @click="menu()">
-					<i class="fas fa-ellipsis-h"></i>
+					<i class="ti ti-dots"></i>
 				</button>
 			</footer>
 		</div>
@@ -259,7 +259,7 @@ function showRenoteMenu(viaKeyboard = false): void {
 	if (!isMyRenote) return;
 	os.popupMenu([{
 		text: i18n.ts.unrenote,
-		icon: 'fas fa-trash-alt',
+		icon: 'ti ti-trash',
 		danger: true,
 		action: () => {
 			os.api('notes/delete', {
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index c00e9fbf42..a072630984 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -5,12 +5,12 @@
 		<MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/>
 		<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
 		<div class="sub-icon" :class="notification.type">
-			<i v-if="notification.type === 'follow'" class="fas fa-plus"></i>
+			<i v-if="notification.type === 'follow'" class="ti ti-plus"></i>
 			<i v-else-if="notification.type === 'receiveFollowRequest'" class="fas fa-clock"></i>
-			<i v-else-if="notification.type === 'followRequestAccepted'" class="fas fa-check"></i>
+			<i v-else-if="notification.type === 'followRequestAccepted'" class="ti ti-check"></i>
 			<i v-else-if="notification.type === 'groupInvited'" class="fas fa-id-card-alt"></i>
-			<i v-else-if="notification.type === 'renote'" class="fas fa-retweet"></i>
-			<i v-else-if="notification.type === 'reply'" class="fas fa-reply"></i>
+			<i v-else-if="notification.type === 'renote'" class="ti ti-repeat"></i>
+			<i v-else-if="notification.type === 'reply'" class="ti ti-arrow-back-up"></i>
 			<i v-else-if="notification.type === 'mention'" class="fas fa-at"></i>
 			<i v-else-if="notification.type === 'quote'" class="fas fa-quote-left"></i>
 			<i v-else-if="notification.type === 'pollVote'" class="fas fa-poll-h"></i>
diff --git a/packages/client/src/components/MkPageWindow.vue b/packages/client/src/components/MkPageWindow.vue
index d58b914036..fc698f06b0 100644
--- a/packages/client/src/components/MkPageWindow.vue
+++ b/packages/client/src/components/MkPageWindow.vue
@@ -90,18 +90,18 @@ const contextmenu = $computed(() => ([{
 	text: i18n.ts.showInPage,
 	action: expand,
 }, {
-	icon: 'fas fa-external-link-alt',
+	icon: 'ti ti-external-link',
 	text: i18n.ts.popout,
 	action: popout,
 }, {
-	icon: 'fas fa-external-link-alt',
+	icon: 'ti ti-external-link',
 	text: i18n.ts.openInNewTab,
 	action: () => {
 		window.open(url + router.getCurrentPath(), '_blank');
 		windowEl.close();
 	},
 }, {
-	icon: 'fas fa-link',
+	icon: 'ti ti-link',
 	text: i18n.ts.copyLink,
 	action: () => {
 		copyToClipboard(url + router.getCurrentPath());
diff --git a/packages/client/src/components/MkPoll.vue b/packages/client/src/components/MkPoll.vue
index d90af1cfee..a1b927e42a 100644
--- a/packages/client/src/components/MkPoll.vue
+++ b/packages/client/src/components/MkPoll.vue
@@ -4,7 +4,7 @@
 		<li v-for="(choice, i) in note.poll.choices" :key="i" :class="{ voted: choice.voted }" @click="vote(i)">
 			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
 			<span>
-				<template v-if="choice.isVoted"><i class="fas fa-check"></i></template>
+				<template v-if="choice.isVoted"><i class="ti ti-check"></i></template>
 				<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
 				<span v-if="showResult" class="votes">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
 			</span>
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 308dd63dd3..8650afe83f 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -16,13 +16,13 @@
 			<span class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
 			<span v-if="localOnly" class="local-only"><i class="fas fa-biohazard"></i></span>
 			<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
-				<span v-if="visibility === 'public'"><i class="fas fa-globe"></i></span>
-				<span v-if="visibility === 'home'"><i class="fas fa-home"></i></span>
+				<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
+				<span v-if="visibility === 'home'"><i class="ti ti-home-2"></i></span>
 				<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
 				<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
 			</button>
 			<button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="fas fa-file-code"></i></button>
-			<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
+			<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'ti ti-arrow-back-up' : renote ? 'fas fa-quote-right' : 'ti ti-send'"></i></button>
 		</div>
 	</header>
 	<div class="form" :class="{ fixed }">
@@ -36,7 +36,7 @@
 					<MkAcct :user="u"/>
 					<button class="_button" @click="removeVisibleUser(u)"><i class="fas fa-times"></i></button>
 				</span>
-				<button class="_buttonPrimary" @click="addVisibleUser"><i class="fas fa-plus fa-fw"></i></button>
+				<button class="_buttonPrimary" @click="addVisibleUser"><i class="ti ti-plus fa-fw"></i></button>
 			</div>
 		</div>
 		<MkInfo v-if="hasNotSpecifiedMentions" warn class="hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
@@ -51,7 +51,7 @@
 			<button v-tooltip="i18n.ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="fas fa-poll-h"></i></button>
 			<button v-tooltip="i18n.ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="fas fa-eye-slash"></i></button>
 			<button v-tooltip="i18n.ts.mention" class="_button" @click="insertMention"><i class="fas fa-at"></i></button>
-			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="fas fa-hashtag"></i></button>
+			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
 			<button v-tooltip="i18n.ts.emoji" class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button>
 			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="fas fa-plug"></i></button>
 		</footer>
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index 413f3406a4..811b9b08f4 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -5,7 +5,7 @@
 	class="eddddedb _button canRenote"
 	@click="renote()"
 >
-	<i class="fas fa-retweet"></i>
+	<i class="ti ti-repeat"></i>
 	<p v-if="count > 0" class="count">{{ count }}</p>
 </button>
 <button v-else class="eddddedb _button">
@@ -54,7 +54,7 @@ const renote = (viaKeyboard = false) => {
 	pleaseLogin();
 	os.popupMenu([{
 		text: i18n.ts.renote,
-		icon: 'fas fa-retweet',
+		icon: 'ti ti-repeat',
 		action: () => {
 			os.api('notes/create', {
 				renoteId: props.note.id,
diff --git a/packages/client/src/components/MkSignup.vue b/packages/client/src/components/MkSignup.vue
index c1f91b18c2..c115501b65 100644
--- a/packages/client/src/components/MkSignup.vue
+++ b/packages/client/src/components/MkSignup.vue
@@ -10,7 +10,7 @@
 		<template #suffix>@{{ host }}</template>
 		<template #caption>
 			<span v-if="usernameState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ i18n.ts.checking }}</span>
-			<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.available }}</span>
+			<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="ti ti-check fa-fw"></i> {{ i18n.ts.available }}</span>
 			<span v-else-if="usernameState === 'unavailable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.unavailable }}</span>
 			<span v-else-if="usernameState === 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.error }}</span>
 			<span v-else-if="usernameState === 'invalid-format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.usernameInvalidFormat }}</span>
@@ -23,7 +23,7 @@
 		<template #prefix><i class="fas fa-envelope"></i></template>
 		<template #caption>
 			<span v-if="emailState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ i18n.ts.checking }}</span>
-			<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.available }}</span>
+			<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="ti ti-check fa-fw"></i> {{ i18n.ts.available }}</span>
 			<span v-else-if="emailState === 'unavailable:used'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts._emailUnavailable.used }}</span>
 			<span v-else-if="emailState === 'unavailable:format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts._emailUnavailable.format }}</span>
 			<span v-else-if="emailState === 'unavailable:disposable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts._emailUnavailable.disposable }}</span>
@@ -38,15 +38,15 @@
 		<template #prefix><i class="fas fa-lock"></i></template>
 		<template #caption>
 			<span v-if="passwordStrength == 'low'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.weakPassword }}</span>
-			<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.normalPassword }}</span>
-			<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.strongPassword }}</span>
+			<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="ti ti-check fa-fw"></i> {{ i18n.ts.normalPassword }}</span>
+			<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="ti ti-check fa-fw"></i> {{ i18n.ts.strongPassword }}</span>
 		</template>
 	</MkInput>
 	<MkInput v-model="retypedPassword" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
 		<template #label>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template>
 		<template #prefix><i class="fas fa-lock"></i></template>
 		<template #caption>
-			<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.passwordMatched }}</span>
+			<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="ti ti-check fa-fw"></i> {{ i18n.ts.passwordMatched }}</span>
 			<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.passwordNotMatched }}</span>
 		</template>
 	</MkInput>
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index 237f4cf228..210923be46 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -3,7 +3,7 @@
 	<div class="body">
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
-		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
+		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
 		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 	</div>
diff --git a/packages/client/src/components/MkVisibility.vue b/packages/client/src/components/MkVisibility.vue
index ca1f9a6cd8..6def2022a0 100644
--- a/packages/client/src/components/MkVisibility.vue
+++ b/packages/client/src/components/MkVisibility.vue
@@ -1,6 +1,6 @@
 <template>
 <span v-if="note.visibility !== 'public'" :class="$style.visibility" :title="i18n.ts._visibility[note.visibility]">
-	<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
+	<i v-if="note.visibility === 'home'" class="ti ti-home-2"></i>
 	<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
 	<i v-else-if="note.visibility === 'specified'" ref="specified" class="fas fa-envelope"></i>
 </span>
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index ecc022eca0..9e0e338c06 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -2,14 +2,14 @@
 <MkModal ref="modal" :z-priority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
 	<div class="gqyayizv _popup">
 		<button key="public" class="_button" :class="{ active: v === 'public' }" data-index="1" @click="choose('public')">
-			<div><i class="fas fa-globe"></i></div>
+			<div><i class="ti ti-world"></i></div>
 			<div>
 				<span>{{ i18n.ts._visibility.public }}</span>
 				<span>{{ i18n.ts._visibility.publicDescription }}</span>
 			</div>
 		</button>
 		<button key="home" class="_button" :class="{ active: v === 'home' }" data-index="2" @click="choose('home')">
-			<div><i class="fas fa-home"></i></div>
+			<div><i class="ti ti-home-2"></i></div>
 			<div>
 				<span>{{ i18n.ts._visibility.home }}</span>
 				<span>{{ i18n.ts._visibility.homeDescription }}</span>
diff --git a/packages/client/src/components/MkWaitingDialog.vue b/packages/client/src/components/MkWaitingDialog.vue
index 77b664d3b1..ee86aec967 100644
--- a/packages/client/src/components/MkWaitingDialog.vue
+++ b/packages/client/src/components/MkWaitingDialog.vue
@@ -1,7 +1,7 @@
 <template>
 <MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="emit('closed')">
 	<div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
-		<i v-if="success" class="fas fa-check icon success"></i>
+		<i v-if="success" class="ti ti-check icon success"></i>
 		<i v-else class="fas fa-spinner fa-pulse icon waiting"></i>
 		<div v-if="text && !success" class="text">{{ text }}<MkEllipsis/></div>
 	</div>
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index fcb0d11af4..31b787b5bb 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -6,7 +6,7 @@
 				<template #label>{{ i18n.ts.selectWidget }}</template>
 				<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
 			</MkSelect>
-			<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton>
+			<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 			<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
 		</header>
 		<XDraggable
@@ -17,7 +17,7 @@
 		>
 			<template #item="{element}">
 				<div class="customize-container">
-					<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="fas fa-cog"></i></button>
+					<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button>
 					<button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="fas fa-times"></i></button>
 					<div class="handle">
 						<component :is="`mkw-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
@@ -104,7 +104,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 		type: 'label',
 		text: i18n.t(`_widgets.${widget.name}`),
 	}, {
-		icon: 'fas fa-cog',
+		icon: 'ti ti-settings',
 		text: i18n.ts.settings,
 		action: () => {
 			configWidget(widget.id);
diff --git a/packages/client/src/components/form/checkbox.vue b/packages/client/src/components/form/checkbox.vue
index bd56c9c7ea..ba3b2dc146 100644
--- a/packages/client/src/components/form/checkbox.vue
+++ b/packages/client/src/components/form/checkbox.vue
@@ -10,7 +10,7 @@
 		@keydown.enter="toggle"
 	>
 	<span ref="button" v-adaptive-border v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
-		<i class="check fas fa-check"></i>
+		<i class="check ti ti-check"></i>
 	</span>
 	<span class="label">
 		<!-- TODO: 無名slotの方は廃止 -->
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index 382b2ed528..939e9691a6 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -29,7 +29,7 @@
 	</div>
 	<div class="caption"><slot name="caption"></slot></div>
 
-	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="fas fa-check"></i> {{ i18n.ts.save }}</MkButton>
+	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
 </div>
 </template>
 
diff --git a/packages/client/src/components/form/link.vue b/packages/client/src/components/form/link.vue
index 899394cb62..8048329f5a 100644
--- a/packages/client/src/components/form/link.vue
+++ b/packages/client/src/components/form/link.vue
@@ -5,7 +5,7 @@
 		<span class="text"><slot></slot></span>
 		<span class="right">
 			<span class="text"><slot name="suffix"></slot></span>
-			<i class="fas fa-external-link-alt icon"></i>
+			<i class="ti ti-external-link icon"></i>
 		</span>
 	</a>
 	<MkA v-else class="main _button" :class="{ active }" :to="to" :behavior="behavior">
diff --git a/packages/client/src/components/global/MkA.vue b/packages/client/src/components/global/MkA.vue
index 67bf54def8..287983520e 100644
--- a/packages/client/src/components/global/MkA.vue
+++ b/packages/client/src/components/global/MkA.vue
@@ -53,13 +53,13 @@ function onContextmenu(ev) {
 			router.push(props.to, 'forcePage');
 		},
 	}, null, {
-		icon: 'fas fa-external-link-alt',
+		icon: 'ti ti-external-link',
 		text: i18n.ts.openInNewTab,
 		action: () => {
 			window.open(props.to, '_blank');
 		},
 	}, {
-		icon: 'fas fa-link',
+		icon: 'ti ti-link',
 		text: i18n.ts.copyLink,
 		action: () => {
 			copyToClipboard(`${url}${props.to}`);
diff --git a/packages/client/src/components/page/page.post.vue b/packages/client/src/components/page/page.post.vue
index 954c7675bd..0ef50d65cd 100644
--- a/packages/client/src/components/page/page.post.vue
+++ b/packages/client/src/components/page/page.post.vue
@@ -2,8 +2,8 @@
 <div class="ngbfujlo">
 	<MkTextarea :model-value="text" readonly style="margin: 0;"></MkTextarea>
 	<MkButton class="button" primary :disabled="posting || posted" @click="post()">
-		<i v-if="posted" class="fas fa-check"></i>
-		<i v-else class="fas fa-paper-plane"></i>
+		<i v-if="posted" class="ti ti-check"></i>
+		<i v-else class="ti ti-send"></i>
 	</MkButton>
 </div>
 </template>
diff --git a/packages/client/src/navbar.ts b/packages/client/src/navbar.ts
index 03e00b1c17..f090012d1a 100644
--- a/packages/client/src/navbar.ts
+++ b/packages/client/src/navbar.ts
@@ -9,21 +9,21 @@ import { unisonReload } from '@/scripts/unison-reload';
 export const navbarItemDef = reactive({
 	notifications: {
 		title: 'notifications',
-		icon: 'fas fa-bell',
+		icon: 'ti ti-bell',
 		show: computed(() => $i != null),
 		indicated: computed(() => $i != null && $i.hasUnreadNotification),
 		to: '/my/notifications',
 	},
 	messaging: {
 		title: 'messaging',
-		icon: 'fas fa-comments',
+		icon: 'ti ti-messages',
 		show: computed(() => $i != null),
 		indicated: computed(() => $i != null && $i.hasUnreadMessagingMessage),
 		to: '/my/messaging',
 	},
 	drive: {
 		title: 'drive',
-		icon: 'fas fa-cloud',
+		icon: 'ti ti-cloud',
 		show: computed(() => $i != null),
 		to: '/my/drive',
 	},
@@ -36,7 +36,7 @@ export const navbarItemDef = reactive({
 	},
 	explore: {
 		title: 'explore',
-		icon: 'fas fa-hashtag',
+		icon: 'ti ti-hash',
 		to: '/explore',
 	},
 	announcements: {
@@ -47,7 +47,7 @@ export const navbarItemDef = reactive({
 	},
 	search: {
 		title: 'search',
-		icon: 'fas fa-search',
+		icon: 'ti ti-search',
 		action: () => search(),
 	},
 	lists: {
@@ -72,7 +72,7 @@ export const navbarItemDef = reactive({
 	},
 	favorites: {
 		title: 'favorites',
-		icon: 'fas fa-star',
+		icon: 'ti ti-star',
 		show: computed(() => $i != null),
 		to: '/my/favorites',
 	},
@@ -88,7 +88,7 @@ export const navbarItemDef = reactive({
 	},
 	clips: {
 		title: 'clip',
-		icon: 'fas fa-paperclip',
+		icon: 'ti ti-paperclip',
 		show: computed(() => $i != null),
 		to: '/my/clips',
 	},
diff --git a/packages/client/src/pages/about-misskey.vue b/packages/client/src/pages/about-misskey.vue
index 7bcccea98f..0b73580345 100644
--- a/packages/client/src/pages/about-misskey.vue
+++ b/packages/client/src/pages/about-misskey.vue
@@ -25,7 +25,7 @@
 							<template #suffix>GitHub</template>
 						</FormLink>
 						<FormLink to="https://crowdin.com/project/misskey" external>
-							<template #icon><i class="fas fa-language"></i></template>
+							<template #icon><i class="ti ti-language-hiragana"></i></template>
 							{{ i18n.ts._aboutMisskey.translation }}
 							<template #suffix>Crowdin</template>
 						</FormLink>
diff --git a/packages/client/src/pages/about.emojis.vue b/packages/client/src/pages/about.emojis.vue
index df64378c01..53ce1e4b75 100644
--- a/packages/client/src/pages/about.emojis.vue
+++ b/packages/client/src/pages/about.emojis.vue
@@ -2,7 +2,7 @@
 <div class="driuhtrh">
 	<div class="query">
 		<MkInput v-model="q" class="" :placeholder="$ts.search">
-			<template #prefix><i class="fas fa-search"></i></template>
+			<template #prefix><i class="ti ti-search"></i></template>
 		</MkInput>
 
 		<!-- たくさんあると邪魔
diff --git a/packages/client/src/pages/about.federation.vue b/packages/client/src/pages/about.federation.vue
index c501a77582..6c92ab1264 100644
--- a/packages/client/src/pages/about.federation.vue
+++ b/packages/client/src/pages/about.federation.vue
@@ -2,7 +2,7 @@
 <div class="taeiyria">
 	<div class="query">
 		<MkInput v-model="host" :debounce="true" class="">
-			<template #prefix><i class="fas fa-search"></i></template>
+			<template #prefix><i class="ti ti-search"></i></template>
 			<template #label>{{ i18n.ts.host }}</template>
 		</MkInput>
 		<FormSplit style="margin-top: var(--margin);">
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index d124db55a7..d8c3559ee9 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -123,7 +123,7 @@ const headerTabs = $computed(() => [{
 }, {
 	key: 'federation',
 	title: i18n.ts.federation,
-	icon: 'fas fa-globe',
+	icon: 'ti ti-world',
 }, {
 	key: 'charts',
 	title: i18n.ts.charts,
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index a62e0f630f..b53a09143a 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -36,7 +36,7 @@
 			</div>
 
 			<div class="_formBlock">
-				<MkButton danger @click="del"><i class="fas fa-trash-alt"></i> {{ i18n.ts.delete }}</MkButton>
+				<MkButton danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 			</div>
 		</div>
 		<div v-else-if="tab === 'ip' && info" class="_formRoot">
@@ -114,7 +114,7 @@ async function toggleIsSensitive(v) {
 
 const headerActions = $computed(() => [{
 	text: i18n.ts.openInNewTab,
-	icon: 'fas fa-external-link-alt',
+	icon: 'ti ti-external-link',
 	handler: () => {
 		window.open(file.url, '_blank');
 	},
diff --git a/packages/client/src/pages/admin/abuses.vue b/packages/client/src/pages/admin/abuses.vue
index 9907d4d235..973ec871ab 100644
--- a/packages/client/src/pages/admin/abuses.vue
+++ b/packages/client/src/pages/admin/abuses.vue
@@ -86,7 +86,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.abuseReports,
-	icon: 'fas fa-exclamation-circle',
+	icon: 'ti ti-exclamation-circle',
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/ads.vue b/packages/client/src/pages/admin/ads.vue
index 9a28d2ad61..48ab3abb9f 100644
--- a/packages/client/src/pages/admin/ads.vue
+++ b/packages/client/src/pages/admin/ads.vue
@@ -38,7 +38,7 @@
 				</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>
+					<MkButton class="button" inline danger @click="remove(ad)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
 				</div>
 			</div>
 		</div>
@@ -106,7 +106,7 @@ function save(ad) {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'fas fa-plus',
+	icon: 'ti ti-plus',
 	text: i18n.ts.add,
 	handler: add,
 }]);
diff --git a/packages/client/src/pages/admin/announcements.vue b/packages/client/src/pages/admin/announcements.vue
index f10693314a..764cbaeaa5 100644
--- a/packages/client/src/pages/admin/announcements.vue
+++ b/packages/client/src/pages/admin/announcements.vue
@@ -17,7 +17,7 @@
 					<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>
+						<MkButton class="button" inline @click="remove(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
 					</div>
 				</div>
 			</section>
@@ -92,7 +92,7 @@ function save(announcement) {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'fas fa-plus',
+	icon: 'ti ti-plus',
 	text: i18n.ts.add,
 	handler: add,
 }]);
diff --git a/packages/client/src/pages/admin/email-settings.vue b/packages/client/src/pages/admin/email-settings.vue
index 64137f0c3e..605112242f 100644
--- a/packages/client/src/pages/admin/email-settings.vue
+++ b/packages/client/src/pages/admin/email-settings.vue
@@ -112,7 +112,7 @@ const headerActions = $computed(() => [{
 	handler: testEmail,
 }, {
 	asFullButton: true,
-	icon: 'fas fa-check',
+	icon: 'ti ti-check',
 	text: i18n.ts.save,
 	handler: save,
 }]);
diff --git a/packages/client/src/pages/admin/emoji-edit-dialog.vue b/packages/client/src/pages/admin/emoji-edit-dialog.vue
index 090dd9afc1..bd601cb1de 100644
--- a/packages/client/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/client/src/pages/admin/emoji-edit-dialog.vue
@@ -22,7 +22,7 @@
 				<template #label>{{ i18n.ts.tags }}</template>
 				<template #caption>{{ i18n.ts.setMultipleBySeparatingWithSpace }}</template>
 			</MkInput>
-			<MkButton danger @click="del()"><i class="fas fa-trash-alt"></i> {{ i18n.ts.delete }}</MkButton>
+			<MkButton danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 		</div>
 	</div>
 </XModalWindow>
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index 94f152d7db..790f14af91 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -6,7 +6,7 @@
 			<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 #prefix><i class="ti ti-search"></i></template>
 						<template #label>{{ i18n.ts.search }}</template>
 					</MkInput>
 					<MkSwitch v-model="selectMode" style="margin: 8px 0;">
@@ -39,7 +39,7 @@
 				<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 #prefix><i class="ti ti-search"></i></template>
 							<template #label>{{ i18n.ts.search }}</template>
 						</MkInput>
 						<MkInput v-model="host" :debounce="true">
@@ -164,7 +164,7 @@ const remoteMenu = (emoji, ev: MouseEvent) => {
 		text: ':' + emoji.name + ':',
 	}, {
 		text: i18n.ts.import,
-		icon: 'fas fa-plus',
+		icon: 'ti ti-plus',
 		action: () => { im(emoji); },
 	}], ev.currentTarget ?? ev.target);
 };
@@ -273,11 +273,11 @@ const delBulk = async () => {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'fas fa-plus',
+	icon: 'ti ti-plus',
 	text: i18n.ts.addEmoji,
 	handler: add,
 }, {
-	icon: 'fas fa-ellipsis-h',
+	icon: 'ti ti-dots',
 	handler: menu,
 }]);
 
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
index 2e3a807ba6..8ad6bd4fc0 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -97,11 +97,11 @@ async function find() {
 
 const headerActions = $computed(() => [{
 	text: i18n.ts.lookup,
-	icon: 'fas fa-search',
+	icon: 'ti ti-search',
 	handler: find,
 }, {
 	text: i18n.ts.clearCachedFiles,
-	icon: 'fas fa-trash-alt',
+	icon: 'ti ti-trash',
 	handler: clear,
 }]);
 
@@ -109,7 +109,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.files,
-	icon: 'fas fa-cloud',
+	icon: 'ti ti-cloud',
 })));
 </script>
 
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 20f82bba28..9fd2b6bb0a 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -40,7 +40,7 @@ const router = useRouter();
 
 const indexInfo = {
 	title: i18n.ts.controlPanel,
-	icon: 'fas fa-cog',
+	icon: 'ti ti-settings',
 	hideHeader: true,
 };
 
@@ -75,7 +75,7 @@ const menuDef = $computed(() => [{
 	title: i18n.ts.quickAction,
 	items: [{
 		type: 'button',
-		icon: 'fas fa-search',
+		icon: 'ti ti-search',
 		text: i18n.ts.lookup,
 		action: lookup,
 	}, ...(instance.disableRegistration ? [{
@@ -102,7 +102,7 @@ const menuDef = $computed(() => [{
 		to: '/admin/emojis',
 		active: currentPage?.route.name === 'emojis',
 	}, {
-		icon: 'fas fa-globe',
+		icon: 'ti ti-world',
 		text: i18n.ts.federation,
 		to: '/about#federation',
 		active: currentPage?.route.name === 'federation',
@@ -112,7 +112,7 @@ const menuDef = $computed(() => [{
 		to: '/admin/queue',
 		active: currentPage?.route.name === 'queue',
 	}, {
-		icon: 'fas fa-cloud',
+		icon: 'ti ti-cloud',
 		text: i18n.ts.files,
 		to: '/admin/files',
 		active: currentPage?.route.name === 'files',
@@ -127,7 +127,7 @@ const menuDef = $computed(() => [{
 		to: '/admin/ads',
 		active: currentPage?.route.name === 'ads',
 	}, {
-		icon: 'fas fa-exclamation-circle',
+		icon: 'ti ti-exclamation-circle',
 		text: i18n.ts.abuseReports,
 		to: '/admin/abuses',
 		active: currentPage?.route.name === 'abuses',
@@ -135,7 +135,7 @@ const menuDef = $computed(() => [{
 }, {
 	title: i18n.ts.settings,
 	items: [{
-		icon: 'fas fa-cog',
+		icon: 'ti ti-settings',
 		text: i18n.ts.general,
 		to: '/admin/settings',
 		active: currentPage?.route.name === 'settings',
@@ -145,7 +145,7 @@ const menuDef = $computed(() => [{
 		to: '/admin/email-settings',
 		active: currentPage?.route.name === 'email-settings',
 	}, {
-		icon: 'fas fa-cloud',
+		icon: 'ti ti-cloud',
 		text: i18n.ts.objectStorage,
 		to: '/admin/object-storage',
 		active: currentPage?.route.name === 'object-storage',
@@ -155,12 +155,12 @@ const menuDef = $computed(() => [{
 		to: '/admin/security',
 		active: currentPage?.route.name === 'security',
 	}, {
-		icon: 'fas fa-globe',
+		icon: 'ti ti-world',
 		text: i18n.ts.relays,
 		to: '/admin/relays',
 		active: currentPage?.route.name === 'relays',
 	}, {
-		icon: 'fas fa-share-alt',
+		icon: 'ti ti-share',
 		text: i18n.ts.integration,
 		to: '/admin/integrations',
 		active: currentPage?.route.name === 'integrations',
@@ -175,7 +175,7 @@ const menuDef = $computed(() => [{
 		to: '/admin/proxy-account',
 		active: currentPage?.route.name === 'proxy-account',
 	}, {
-		icon: 'fas fa-cogs',
+		icon: 'ti ti-adjustments',
 		text: i18n.ts.other,
 		to: '/admin/other-settings',
 		active: currentPage?.route.name === 'other-settings',
@@ -246,13 +246,13 @@ const lookup = (ev) => {
 		},
 	}, {
 		text: i18n.ts.file,
-		icon: 'fas fa-cloud',
+		icon: 'ti ti-cloud',
 		action: () => {
 			alert('TODO');
 		},
 	}, {
 		text: i18n.ts.instance,
-		icon: 'fas fa-globe',
+		icon: 'ti ti-world',
 		action: () => {
 			alert('TODO');
 		},
diff --git a/packages/client/src/pages/admin/integrations.vue b/packages/client/src/pages/admin/integrations.vue
index 9964426a68..d02fc48076 100644
--- a/packages/client/src/pages/admin/integrations.vue
+++ b/packages/client/src/pages/admin/integrations.vue
@@ -52,6 +52,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.integration,
-	icon: 'fas fa-share-alt',
+	icon: 'ti ti-share',
 });
 </script>
diff --git a/packages/client/src/pages/admin/object-storage.vue b/packages/client/src/pages/admin/object-storage.vue
index 5cc3018532..dded7aaf71 100644
--- a/packages/client/src/pages/admin/object-storage.vue
+++ b/packages/client/src/pages/admin/object-storage.vue
@@ -134,7 +134,7 @@ function save() {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'fas fa-check',
+	icon: 'ti ti-check',
 	text: i18n.ts.save,
 	handler: save,
 }]);
@@ -143,6 +143,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.objectStorage,
-	icon: 'fas fa-cloud',
+	icon: 'ti ti-cloud',
 });
 </script>
diff --git a/packages/client/src/pages/admin/other-settings.vue b/packages/client/src/pages/admin/other-settings.vue
index ee4e8edba0..62dff6ce7f 100644
--- a/packages/client/src/pages/admin/other-settings.vue
+++ b/packages/client/src/pages/admin/other-settings.vue
@@ -30,7 +30,7 @@ function save() {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'fas fa-check',
+	icon: 'ti ti-check',
 	text: i18n.ts.save,
 	handler: save,
 }]);
@@ -39,6 +39,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.other,
-	icon: 'fas fa-cogs',
+	icon: 'ti ti-adjustments',
 });
 </script>
diff --git a/packages/client/src/pages/admin/relays.vue b/packages/client/src/pages/admin/relays.vue
index e6f7f4ead1..7f9e0c108e 100644
--- a/packages/client/src/pages/admin/relays.vue
+++ b/packages/client/src/pages/admin/relays.vue
@@ -5,12 +5,12 @@
 		<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-if="relay.status === 'accepted'" class="ti ti-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>
+			<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
@@ -68,7 +68,7 @@ refresh();
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'fas fa-plus',
+	icon: 'ti ti-plus',
 	text: i18n.ts.addRelay,
 	handler: addRelay,
 }]);
@@ -77,7 +77,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.relays,
-	icon: 'fas fa-globe',
+	icon: 'ti ti-world',
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue
index 65d079c2cf..5594c479ff 100644
--- a/packages/client/src/pages/admin/security.vue
+++ b/packages/client/src/pages/admin/security.vue
@@ -88,7 +88,7 @@
 
 					<div class="_formRoot">
 						<FormInput v-model="summalyProxy" class="_formBlock">
-							<template #prefix><i class="fas fa-link"></i></template>
+							<template #prefix><i class="ti ti-link"></i></template>
 							<template #label>Summaly Proxy URL</template>
 						</FormInput>
 
diff --git a/packages/client/src/pages/admin/settings.vue b/packages/client/src/pages/admin/settings.vue
index cf6b1f17e9..fe3994b030 100644
--- a/packages/client/src/pages/admin/settings.vue
+++ b/packages/client/src/pages/admin/settings.vue
@@ -14,7 +14,7 @@
 					</FormTextarea>
 
 					<FormInput v-model="tosUrl" class="_formBlock">
-						<template #prefix><i class="fas fa-link"></i></template>
+						<template #prefix><i class="ti ti-link"></i></template>
 						<template #label>{{ i18n.ts.tosUrl }}</template>
 					</FormInput>
 
@@ -54,17 +54,17 @@
 						<template #label>{{ i18n.ts.theme }}</template>
 
 						<FormInput v-model="iconUrl" class="_formBlock">
-							<template #prefix><i class="fas fa-link"></i></template>
+							<template #prefix><i class="ti ti-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 #prefix><i class="ti ti-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 #prefix><i class="ti ti-link"></i></template>
 							<template #label>{{ i18n.ts.backgroundImageUrl }}</template>
 						</FormInput>
 
@@ -248,7 +248,7 @@ function save() {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'fas fa-check',
+	icon: 'ti ti-check',
 	text: i18n.ts.save,
 	handler: save,
 }]);
@@ -257,6 +257,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.general,
-	icon: 'fas fa-cog',
+	icon: 'ti ti-settings',
 });
 </script>
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index eeb335a430..e2ba8ac494 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -115,17 +115,17 @@ function show(user) {
 }
 
 const headerActions = $computed(() => [{
-	icon: 'fas fa-search',
+	icon: 'ti ti-search',
 	text: i18n.ts.search,
 	handler: searchUser,
 }, {
 	asFullButton: true,
-	icon: 'fas fa-plus',
+	icon: 'ti ti-plus',
 	text: i18n.ts.addUser,
 	handler: addUser,
 }, {
 	asFullButton: true,
-	icon: 'fas fa-search',
+	icon: 'ti ti-search',
 	text: i18n.ts.lookup,
 	handler: lookupUser,
 }]);
diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
index 5f66596997..f2b07c1d12 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -10,7 +10,7 @@
 					<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>
+					<MkButton primary @click="read(items, announcement, i)"><i class="ti ti-check"></i> {{ $ts.gotIt }}</MkButton>
 				</div>
 			</section>
 		</MkPagination>
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index 500cb3a7c5..7624c56aea 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -76,7 +76,7 @@ const headerActions = $computed(() => antenna ? [{
 	text: i18n.ts.jumpToSpecifiedDate,
 	handler: timetravel,
 }, {
-	icon: 'fas fa-cog',
+	icon: 'ti ti-settings',
 	text: i18n.ts.settings,
 	handler: settings,
 }] : []);
diff --git a/packages/client/src/pages/api-console.vue b/packages/client/src/pages/api-console.vue
index 0064e4c3f1..da694e103f 100644
--- a/packages/client/src/pages/api-console.vue
+++ b/packages/client/src/pages/api-console.vue
@@ -15,7 +15,7 @@
 				</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>
+					<template v-else><i class="ti ti-send"></i> Send</template>
 				</MkButton>
 			</div>
 			<div v-if="res" class="_formBlock">
diff --git a/packages/client/src/pages/channel-editor.vue b/packages/client/src/pages/channel-editor.vue
index 3e94b5f041..5d5aa2f9e9 100644
--- a/packages/client/src/pages/channel-editor.vue
+++ b/packages/client/src/pages/channel-editor.vue
@@ -12,10 +12,10 @@
 			</MkTextarea>
 
 			<div class="banner">
-				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ i18n.ts._channel.setBanner }}</MkButton>
+				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="ti ti-plus"></i> {{ i18n.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> {{ i18n.ts._channel.removeBanner }}</MkButton>
+					<MkButton @click="removeBannerImage()"><i class="ti ti-trash"></i> {{ i18n.ts._channel.removeBanner }}</MkButton>
 				</div>
 			</div>
 			<div class="_formBlock">
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index 380c3efc8e..4629547554 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -70,7 +70,7 @@ function edit() {
 }
 
 const headerActions = $computed(() => channel && channel.userId ? [{
-	icon: 'fas fa-cog',
+	icon: 'ti ti-settings',
 	text: i18n.ts.edit,
 	handler: edit,
 }] : null);
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index 56ea98d15e..8f67e454f0 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -13,7 +13,7 @@
 			</MkPagination>
 		</div>
 		<div v-else-if="tab === 'owned'" class="_content grwlizim owned">
-			<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
+			<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
 			<MkPagination v-slot="{items}" :pagination="ownedPagination">
 				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
 			</MkPagination>
@@ -53,7 +53,7 @@ function create() {
 }
 
 const headerActions = $computed(() => [{
-	icon: 'fas fa-plus',
+	icon: 'ti ti-plus',
 	text: i18n.ts.create,
 	handler: create,
 }]);
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index 5b56651bdd..b39a766f93 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -83,7 +83,7 @@ const headerActions = $computed(() => clip && isOwned ? [{
 		});
 	},
 }, {
-	icon: 'fas fa-trash-alt',
+	icon: 'ti ti-trash',
 	text: i18n.ts.delete,
 	danger: true,
 	handler: async (): Promise<void> => {
@@ -101,7 +101,7 @@ const headerActions = $computed(() => clip && isOwned ? [{
 
 definePageMetadata(computed(() => clip ? {
 	title: clip.name,
-	icon: 'fas fa-paperclip',
+	icon: 'ti ti-paperclip',
 } : null));
 </script>
 
diff --git a/packages/client/src/pages/drive.vue b/packages/client/src/pages/drive.vue
index 088f0eacdc..04ade5c207 100644
--- a/packages/client/src/pages/drive.vue
+++ b/packages/client/src/pages/drive.vue
@@ -19,7 +19,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
 	title: folder ? folder.name : i18n.ts.drive,
-	icon: 'fas fa-cloud',
+	icon: 'ti ti-cloud',
 	hideHeader: true,
 })));
 </script>
diff --git a/packages/client/src/pages/emojis.emoji.vue b/packages/client/src/pages/emojis.emoji.vue
index b2801694db..04bf4ef167 100644
--- a/packages/client/src/pages/emojis.emoji.vue
+++ b/packages/client/src/pages/emojis.emoji.vue
@@ -24,7 +24,7 @@ function menu(ev) {
 		text: ':' + props.emoji.name + ':',
 	}, {
 		text: i18n.ts.copy,
-		icon: 'fas fa-copy',
+		icon: 'ti ti-copy',
 		action: () => {
 			copyToClipboard(`:${props.emoji.name}:`);
 			os.success();
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index e16e40b8ed..4f4f8eb12c 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -19,14 +19,14 @@
 				<XUserList :pagination="recentlyUpdatedUsers"/>
 			</MkFolder>
 			<MkFolder class="_gap" persist-key="explore-recently-registered-users">
-				<template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
+				<template #header><i class="ti ti-plus fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
 				<XUserList :pagination="recentlyRegisteredUsers"/>
 			</MkFolder>
 		</template>
 	</div>
 	<div v-else>
 		<MkFolder ref="tagsEl" :foldable="true" :expanded="false" class="_gap">
-			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularTags }}</template>
+			<template #header><i class="ti ti-hash fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularTags }}</template>
 
 			<div class="vxjfqztj">
 				<MkA v-for="tag in tagsLocal" :key="'local:' + tag.tag" :to="`/explore/tags/${tag.tag}`" class="local">{{ tag.tag }}</MkA>
@@ -35,7 +35,7 @@
 		</MkFolder>
 
 		<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
-			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
+			<template #header><i class="ti ti-hash fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
 			<XUserList :pagination="tagUsers"/>
 		</MkFolder>
 
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index 279960d139..7e4f80dcbe 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -12,7 +12,7 @@
 			<MkSpacer :content-max="1200">
 				<div>
 					<MkInput v-model="searchQuery" :debounce="true" type="search" class="_formBlock">
-						<template #prefix><i class="fas fa-search"></i></template>
+						<template #prefix><i class="ti ti-search"></i></template>
 						<template #label>{{ i18n.ts.searchUser }}</template>
 					</MkInput>
 					<MkRadios v-model="searchOrigin" class="_formBlock">
@@ -82,6 +82,6 @@ const headerTabs = $computed(() => [{
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.explore,
-	icon: 'fas fa-hashtag',
+	icon: 'ti ti-hash',
 })));
 </script>
diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue
index 32a1dbf592..ab47efec71 100644
--- a/packages/client/src/pages/favorites.vue
+++ b/packages/client/src/pages/favorites.vue
@@ -37,7 +37,7 @@ const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
 definePageMetadata({
 	title: i18n.ts.favorites,
-	icon: 'fas fa-star',
+	icon: 'ti ti-star',
 });
 </script>
 
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index 82d7164260..c14131c4c8 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -22,7 +22,7 @@
 								<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
 							</div>
 							<div class="actions">
-								<button class="_button" @click="accept(req.follower)"><i class="fas fa-check"></i></button>
+								<button class="_button" @click="accept(req.follower)"><i class="ti ti-check"></i></button>
 								<button class="_button" @click="reject(req.follower)"><i class="fas fa-times"></i></button>
 							</div>
 						</div>
diff --git a/packages/client/src/pages/gallery/edit.vue b/packages/client/src/pages/gallery/edit.vue
index 8f716d9eb3..7e98f751f2 100644
--- a/packages/client/src/pages/gallery/edit.vue
+++ b/packages/client/src/pages/gallery/edit.vue
@@ -16,7 +16,7 @@
 					<div class="name">{{ file.name }}</div>
 					<button v-tooltip="i18n.ts.remove" class="remove _button" @click="remove(file)"><i class="fas fa-times"></i></button>
 				</div>
-				<FormButton primary @click="selectFile"><i class="fas fa-plus"></i> {{ i18n.ts.attachFile }}</FormButton>
+				<FormButton primary @click="selectFile"><i class="ti ti-plus"></i> {{ i18n.ts.attachFile }}</FormButton>
 			</div>
 
 			<FormSwitch v-model="isSensitive">{{ i18n.ts.markAsSensitive }}</FormSwitch>
@@ -24,7 +24,7 @@
 			<FormButton v-if="postId" primary @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
 			<FormButton v-else primary @click="save"><i class="fas fa-save"></i> {{ i18n.ts.publish }}</FormButton>
 
-			<FormButton v-if="postId" danger @click="del"><i class="fas fa-trash-alt"></i> {{ i18n.ts.delete }}</FormButton>
+			<FormButton v-if="postId" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</FormButton>
 		</FormSuspense>
 	</MkSpacer>
 </MkStickyContainer>
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index 598383217e..5bf13cd474 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -29,7 +29,7 @@
 				</MkPagination>
 			</div>
 			<div v-else-if="tab === 'my'">
-				<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
+				<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="ti ti-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
 				<MkPagination v-slot="{items}" :pagination="myPostsPagination">
 					<div class="vfpdbgtk">
 						<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
@@ -98,7 +98,7 @@ watch(() => props.tag, () => {
 });
 
 const headerActions = $computed(() => [{
-	icon: 'fas fa-plus',
+	icon: 'ti ti-plus',
 	text: i18n.ts.create,
 	handler: () => {
 		router.push('/gallery/new');
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 3804bcdcf5..0867ea04e7 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -23,8 +23,8 @@
 							</div>
 							<div class="other">
 								<button v-if="$i && $i.id === post.user.id" v-tooltip="i18n.ts.edit" v-click-anime class="_button" @click="edit"><i class="fas fa-pencil-alt fa-fw"></i></button>
-								<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
-								<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+								<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ti ti-repeat fa-fw"></i></button>
+								<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="ti ti-share fa-fw"></i></button>
 							</div>
 						</div>
 						<div class="user">
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index 6e13da0d68..01a89b9731 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -195,7 +195,7 @@ fetch();
 
 const headerActions = $computed(() => [{
 	text: `https://${props.host}`,
-	icon: 'fas fa-external-link-alt',
+	icon: 'ti ti-external-link',
 	handler: () => {
 		window.open(`https://${props.host}`, '_blank');
 	},
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index 56d852fe3d..e05fa1785f 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -3,7 +3,7 @@
 	<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>
+			<MkButton primary class="start" @click="start"><i class="ti ti-plus"></i> {{ $ts.startMessaging }}</MkButton>
 
 			<div v-if="messages.length > 0" class="history">
 				<MkA
@@ -158,7 +158,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.messaging,
-	icon: 'fas fa-comments',
+	icon: 'ti ti-messages',
 });
 </script>
 
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 4589069df0..ba377b85d1 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -18,7 +18,7 @@
 			<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>
+				<template v-if="!sending"><i class="ti ti-send"></i></template><template v-if="sending"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>
 			</button>
 		</div>
 	</footer>
diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue
index dc73ba674e..71de574a15 100644
--- a/packages/client/src/pages/my-antennas/index.vue
+++ b/packages/client/src/pages/my-antennas/index.vue
@@ -2,7 +2,7 @@
 	<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>
+		<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 
 		<div class="">
 			<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
diff --git a/packages/client/src/pages/my-clips/index.vue b/packages/client/src/pages/my-clips/index.vue
index 68330d6db4..dd6b5b3a37 100644
--- a/packages/client/src/pages/my-clips/index.vue
+++ b/packages/client/src/pages/my-clips/index.vue
@@ -3,7 +3,7 @@
 	<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> {{ i18n.ts.add }}</MkButton>
+			<MkButton primary class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="list">
 				<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
@@ -70,9 +70,9 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.clip,
-	icon: 'fas fa-paperclip',
+	icon: 'ti ti-paperclip',
 	action: {
-		icon: 'fas fa-plus',
+		icon: 'ti ti-plus',
 		handler: create,
 	},
 });
diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue
index 9af7c0d105..0ecd594e68 100644
--- a/packages/client/src/pages/my-lists/index.vue
+++ b/packages/client/src/pages/my-lists/index.vue
@@ -3,7 +3,7 @@
 	<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> {{ i18n.ts.createList }}</MkButton>
+			<MkButton primary class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton>
 
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists _content">
 				<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
@@ -49,7 +49,7 @@ definePageMetadata({
 	title: i18n.ts.manageLists,
 	icon: 'fas fa-list-ul',
 	action: {
-		icon: 'fas fa-plus',
+		icon: 'ti ti-plus',
 		handler: create,
 	},
 });
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index dd57060fda..01257f63d6 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -66,7 +66,7 @@ const headerActions = $computed(() => [tab === 'all' ? {
 	handler: setFilter,
 } : undefined, tab === 'all' ? {
 	text: i18n.ts.markAllAsRead,
-	icon: 'fas fa-check',
+	icon: 'ti ti-check',
 	handler: () => {
 		os.apiWithDialog('notifications/mark-all-as-read');
 	},
@@ -90,6 +90,6 @@ const headerTabs = $computed(() => [{
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.notifications,
-	icon: 'fas fa-bell',
+	icon: 'ti ti-bell',
 })));
 </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 d763070b15..c93caeb9bd 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
@@ -4,7 +4,7 @@
 	<template #header><i class="fas fa-question"></i> {{ $ts._pages.blocks.if }}</template>
 	<template #func>
 		<button class="_button" @click="add()">
-			<i class="fas fa-plus"></i>
+			<i class="ti ti-plus"></i>
 		</button>
 	</template>
 
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 f8c42c296b..39be01ab32 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-paper-plane"></i> {{ $ts._pages.blocks.post }}</template>
+	<template #header><i class="ti ti-send"></i> {{ $ts._pages.blocks.post }}</template>
 
 	<section style="padding: 16px;">
 		<MkTextarea v-model="value.text"><template #label>{{ $ts._pages.blocks._post.text }}</template></MkTextarea>
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 7276cc1e1b..e46bd77ccd 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
@@ -7,7 +7,7 @@
 			<i class="fas fa-pencil-alt"></i>
 		</button>
 		<button class="_button" @click="add()">
-			<i class="fas fa-plus"></i>
+			<i class="ti ti-plus"></i>
 		</button>
 	</template>
 
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index 6927e55868..49ba2c7c00 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -5,7 +5,7 @@
 		<div class="buttons">
 			<slot name="func"></slot>
 			<button v-if="removable" class="_button" @click="remove()">
-				<i class="fas fa-trash-alt"></i>
+				<i class="ti ti-trash"></i>
 			</button>
 			<button v-if="draggable" class="drag-handle _button">
 				<i class="fas fa-bars"></i>
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 591d13053a..de186f6d6f 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -5,8 +5,8 @@
 		<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>
+			<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="ti ti-copy"></i> {{ $ts.duplicate }}</MkButton>
+			<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="ti ti-trash"></i> {{ $ts.delete }}</MkButton>
 		</div>
 
 		<div v-if="tab === 'settings'">
@@ -35,10 +35,10 @@
 				<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>
+					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ti ti-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>
+						<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="ti ti-trash"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
 					</div>
 				</div>
 			</div>
@@ -48,7 +48,7 @@
 			<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="ti ti-plus"></i></MkButton>
 			</div>
 		</div>
 
@@ -68,7 +68,7 @@
 					</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="ti ti-plus"></i></MkButton>
 			</div>
 		</div>
 
@@ -412,7 +412,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => [{
 	key: 'settings',
 	title: i18n.ts._pages.pageSetting,
-	icon: 'fas fa-cog',
+	icon: 'ti ti-settings',
 }, {
 	key: 'contents',
 	title: i18n.ts._pages.contents,
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index fb0e6a4914..9584be3782 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -22,8 +22,8 @@
 							<MkButton v-else v-tooltip="i18n.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="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
-							<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+							<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ti ti-repeat fa-fw"></i></button>
+							<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="ti ti-share fa-fw"></i></button>
 						</div>
 					</div>
 					<div class="user">
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 02b05c57ba..9c226f6627 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -9,7 +9,7 @@
 		</div>
 
 		<div v-else-if="tab === 'my'" class="rknalgpo my">
-			<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
+			<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
 			<MkPagination v-slot="{items}" :pagination="myPagesPagination">
 				<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
 			</MkPagination>
@@ -55,7 +55,7 @@ function create() {
 }
 
 const headerActions = $computed(() => [{
-	icon: 'fas fa-plus',
+	icon: 'ti ti-plus',
 	text: i18n.ts.create,
 	handler: create,
 }]);
diff --git a/packages/client/src/pages/registry.keys.vue b/packages/client/src/pages/registry.keys.vue
index ac586b4e72..f179fbe957 100644
--- a/packages/client/src/pages/registry.keys.vue
+++ b/packages/client/src/pages/registry.keys.vue
@@ -88,7 +88,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: 'fas fa-cogs',
+	icon: 'ti ti-adjustments',
 });
 </script>
 
diff --git a/packages/client/src/pages/registry.value.vue b/packages/client/src/pages/registry.value.vue
index b6f3d73bb6..5f23e79e1b 100644
--- a/packages/client/src/pages/registry.value.vue
+++ b/packages/client/src/pages/registry.value.vue
@@ -115,7 +115,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: 'fas fa-cogs',
+	icon: 'ti ti-adjustments',
 });
 </script>
 
diff --git a/packages/client/src/pages/registry.vue b/packages/client/src/pages/registry.vue
index 80a44d5589..a2c65294fc 100644
--- a/packages/client/src/pages/registry.vue
+++ b/packages/client/src/pages/registry.vue
@@ -66,7 +66,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: 'fas fa-cogs',
+	icon: 'ti ti-adjustments',
 });
 </script>
 
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index fdcbb57e44..c080b763bb 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -33,6 +33,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
 	title: i18n.t('searchWith', { q: props.query }),
-	icon: 'fas fa-search',
+	icon: 'ti ti-search',
 })));
 </script>
diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
index e16931a9ca..2b10ab0acf 100644
--- a/packages/client/src/pages/settings/accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="_formRoot">
 	<FormSuspense :p="init">
-		<FormButton primary @click="addAccount"><i class="fas fa-plus"></i> {{ i18n.ts.addAccount }}</FormButton>
+		<FormButton primary @click="addAccount"><i class="ti ti-plus"></i> {{ i18n.ts.addAccount }}</FormButton>
 
 		<div v-for="account in accounts" :key="account.id" class="_panel _button lcjjdxlm" @click="menu(account, $event)">
 			<div class="avatar">
@@ -54,7 +54,7 @@ function menu(account, ev) {
 		action: () => switchAccount(account),
 	}, {
 		text: i18n.ts.remove,
-		icon: 'fas fa-trash-alt',
+		icon: 'ti ti-trash',
 		danger: true,
 		action: () => removeAccount(account),
 	}], ev.currentTarget ?? ev.target);
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index 8b345c8e9f..77b98a09a5 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -22,7 +22,7 @@
 						<div><MkTime :time="token.lastUsedAt"/></div>
 					</div>
 					<div class="actions">
-						<button class="_button" @click="revoke(token)"><i class="fas fa-trash-alt"></i></button>
+						<button class="_button" @click="revoke(token)"><i class="ti ti-trash"></i></button>
 					</div>
 					<details>
 						<summary>{{ i18n.ts.details }}</summary>
diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
index a10e2d9f7d..ed44509774 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -120,7 +120,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.drive,
-	icon: 'fas fa-cloud',
+	icon: 'ti ti-cloud',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/email.vue b/packages/client/src/pages/settings/email.vue
index 1dae233a07..3acaa9a43a 100644
--- a/packages/client/src/pages/settings/email.vue
+++ b/packages/client/src/pages/settings/email.vue
@@ -5,7 +5,7 @@
 		<FormInput v-model="emailAddress" type="email" manual-save>
 			<template #prefix><i class="fas fa-envelope"></i></template>
 			<template v-if="$i.email && !$i.emailVerified" #caption>{{ i18n.ts.verificationEmailSent }}</template>
-			<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="fas fa-check" style="color: var(--success);"></i> {{ i18n.ts.emailVerified }}</template>
+			<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="ti ti-check" style="color: var(--success);"></i> {{ i18n.ts.emailVerified }}</template>
 		</FormInput>
 	</FormSection>
 
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index 9072bcefc9..d673a531b6 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -185,6 +185,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.general,
-	icon: 'fas fa-cogs',
+	icon: 'ti ti-adjustments',
 });
 </script>
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index c38e1394f0..2c7b711cd5 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -36,7 +36,7 @@ import * as os from '@/os';
 
 const indexInfo = {
 	title: i18n.ts.settings,
-	icon: 'fas fa-cog',
+	icon: 'ti ti-settings',
 	hideHeader: true,
 };
 const INFO = ref(indexInfo);
@@ -73,12 +73,12 @@ const menuDef = computed(() => [{
 		to: '/settings/reaction',
 		active: currentPage?.route.name === 'reaction',
 	}, {
-		icon: 'fas fa-cloud',
+		icon: 'ti ti-cloud',
 		text: i18n.ts.drive,
 		to: '/settings/drive',
 		active: currentPage?.route.name === 'drive',
 	}, {
-		icon: 'fas fa-bell',
+		icon: 'ti ti-bell',
 		text: i18n.ts.notifications,
 		to: '/settings/notifications',
 		active: currentPage?.route.name === 'notifications',
@@ -88,7 +88,7 @@ const menuDef = computed(() => [{
 		to: '/settings/email',
 		active: currentPage?.route.name === 'email',
 	}, {
-		icon: 'fas fa-share-alt',
+		icon: 'ti ti-share',
 		text: i18n.ts.integration,
 		to: '/settings/integration',
 		active: currentPage?.route.name === 'integration',
@@ -101,7 +101,7 @@ const menuDef = computed(() => [{
 }, {
 	title: i18n.ts.clientSettings,
 	items: [{
-		icon: 'fas fa-cogs',
+		icon: 'ti ti-adjustments',
 		text: i18n.ts.general,
 		to: '/settings/general',
 		active: currentPage?.route.name === 'general',
@@ -164,7 +164,7 @@ const menuDef = computed(() => [{
 		to: '/settings/webhook',
 		active: currentPage?.route.name === 'webhook',
 	}, {
-		icon: 'fas fa-ellipsis-h',
+		icon: 'ti ti-dots',
 		text: i18n.ts.other,
 		to: '/settings/other',
 		active: currentPage?.route.name === 'other',
diff --git a/packages/client/src/pages/settings/integration.vue b/packages/client/src/pages/settings/integration.vue
index c8219519f8..f3595e897b 100644
--- a/packages/client/src/pages/settings/integration.vue
+++ b/packages/client/src/pages/settings/integration.vue
@@ -94,6 +94,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.integration,
-	icon: 'fas fa-share-alt',
+	icon: 'ti ti-share',
 });
 </script>
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
index 77ec567da4..e24be99cb6 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_formRoot">
-	<FormLink class="_formBlock" @click="configure"><template #icon><i class="fas fa-cog"></i></template>{{ i18n.ts.notificationSetting }}</FormLink>
+	<FormLink class="_formBlock" @click="configure"><template #icon><i class="ti ti-settings"></i></template>{{ i18n.ts.notificationSetting }}</FormLink>
 	<FormSection>
 		<FormLink class="_formBlock" @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</FormLink>
 		<FormLink class="_formBlock" @click="readAllUnreadNotes">{{ i18n.ts.markAsReadAllUnreadNotes }}</FormLink>
@@ -85,6 +85,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.notifications,
-	icon: 'fas fa-bell',
+	icon: 'ti ti-bell',
 });
 </script>
diff --git a/packages/client/src/pages/settings/other.vue b/packages/client/src/pages/settings/other.vue
index 51dab04cfa..5f64b872e1 100644
--- a/packages/client/src/pages/settings/other.vue
+++ b/packages/client/src/pages/settings/other.vue
@@ -10,7 +10,7 @@
 
 	<FormLink to="/settings/account-info" class="_formBlock">{{ i18n.ts.accountInfo }}</FormLink>
 
-	<FormLink to="/registry" class="_formBlock"><template #icon><i class="fas fa-cogs"></i></template>{{ i18n.ts.registry }}</FormLink>
+	<FormLink to="/registry" class="_formBlock"><template #icon><i class="ti ti-adjustments"></i></template>{{ i18n.ts.registry }}</FormLink>
 
 	<FormLink to="/settings/delete-account" class="_formBlock"><template #icon><i class="fas fa-exclamation-triangle"></i></template>{{ i18n.ts.closeAccount }}</FormLink>
 </div>
@@ -42,6 +42,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.other,
-	icon: 'fas fa-ellipsis-h',
+	icon: 'ti ti-dots',
 });
 </script>
diff --git a/packages/client/src/pages/settings/plugin.install.vue b/packages/client/src/pages/settings/plugin.install.vue
index e259bbeb3a..66549aed55 100644
--- a/packages/client/src/pages/settings/plugin.install.vue
+++ b/packages/client/src/pages/settings/plugin.install.vue
@@ -7,7 +7,7 @@
 	</FormTextarea>
 
 	<div class="_formBlock">
-		<FormButton :disabled="code == null" primary inline @click="install"><i class="fas fa-check"></i> {{ i18n.ts.install }}</FormButton>
+		<FormButton :disabled="code == null" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</FormButton>
 	</div>
 </div>
 </template>
diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue
index 8ce6fe4445..f458f0404d 100644
--- a/packages/client/src/pages/settings/plugin.vue
+++ b/packages/client/src/pages/settings/plugin.vue
@@ -23,8 +23,8 @@
 			</MkKeyValue>
 
 			<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-				<MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="fas fa-cog"></i> {{ i18n.ts.settings }}</MkButton>
-				<MkButton inline danger @click="uninstall(plugin)"><i class="fas fa-trash-alt"></i> {{ i18n.ts.uninstall }}</MkButton>
+				<MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="ti ti-settings"></i> {{ i18n.ts.settings }}</MkButton>
+				<MkButton inline danger @click="uninstall(plugin)"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</MkButton>
 			</div>
 		</div>
 	</FormSection>
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index aaf60c8d55..e3b740f46c 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -46,8 +46,8 @@
 						<template #label>{{ i18n.ts._profile.metadataContent }} #{{ i + 1 }}</template>
 					</FormInput>
 				</FormSplit>
-				<MkButton :disabled="fields.length >= 16" inline style="margin-right: 8px;" @click="addField"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton>
-				<MkButton inline primary @click="saveFields"><i class="fas fa-check"></i> {{ i18n.ts.save }}</MkButton>
+				<MkButton :disabled="fields.length >= 16" inline style="margin-right: 8px;" @click="addField"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+				<MkButton inline primary @click="saveFields"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
 			</div>
 		</FormFolder>
 		<template #caption>{{ i18n.ts._profile.metadataDescription }}</template>
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index f8d57cbcd5..3d941f5a53 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -10,7 +10,7 @@
 					</button>
 				</template>
 				<template #footer>
-					<button class="_button add" @click="chooseEmoji"><i class="fas fa-plus"></i></button>
+					<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
 				</template>
 			</XDraggable>
 		</div>
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index d109a4ba7c..32b91a6628 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -17,7 +17,7 @@
 				<div>
 					<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
 						<header>
-							<i v-if="item.success" class="fas fa-check icon succ"></i>
+							<i v-if="item.success" class="ti ti-check icon succ"></i>
 							<i v-else class="fas fa-times-circle icon fail"></i>
 							<code class="ip _monospace">{{ item.ip }}</code>
 							<MkTime :time="item.createdAt" class="time"/>
diff --git a/packages/client/src/pages/settings/theme.install.vue b/packages/client/src/pages/settings/theme.install.vue
index 34f8384d87..2ed144dca3 100644
--- a/packages/client/src/pages/settings/theme.install.vue
+++ b/packages/client/src/pages/settings/theme.install.vue
@@ -6,7 +6,7 @@
 
 	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
 		<FormButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="fas fa-eye"></i> {{ i18n.ts.preview }}</FormButton>
-		<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="fas fa-check"></i> {{ i18n.ts.install }}</FormButton>
+		<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="ti ti-check"></i> {{ i18n.ts.install }}</FormButton>
 	</div>
 </div>
 </template>
diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue
index 25f92e6ed1..5b33b50319 100644
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ b/packages/client/src/pages/settings/theme.manage.vue
@@ -20,7 +20,7 @@
 			<template #label>{{ i18n.ts._theme.code }}</template>
 			<template #caption><button class="_textButton" @click="copyThemeCode()">{{ i18n.ts.copy }}</button></template>
 		</FormTextarea>
-		<FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" class="_formBlock" danger @click="uninstall()"><i class="fas fa-trash-alt"></i> {{ i18n.ts.uninstall }}</FormButton>
+		<FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" class="_formBlock" danger @click="uninstall()"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</FormButton>
 	</template>
 </div>
 </template>
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 42a91bcb59..6d6cc1c345 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -54,7 +54,7 @@
 	<FormSection>
 		<div class="_formLinksGrid">
 			<FormLink to="/settings/theme/manage"><template #icon><i class="fas fa-folder-open"></i></template>{{ i18n.ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink>
-			<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="fas fa-globe"></i></template>{{ i18n.ts._theme.explore }}</FormLink>
+			<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="ti ti-world"></i></template>{{ i18n.ts._theme.explore }}</FormLink>
 			<FormLink to="/settings/theme/install"><template #icon><i class="fas fa-download"></i></template>{{ i18n.ts._theme.install }}</FormLink>
 			<FormLink to="/theme-editor"><template #icon><i class="fas fa-paint-roller"></i></template>{{ i18n.ts._theme.make }}</FormLink>
 		</div>
diff --git a/packages/client/src/pages/settings/webhook.edit.vue b/packages/client/src/pages/settings/webhook.edit.vue
index 5d41f3d087..fe91faa3cf 100644
--- a/packages/client/src/pages/settings/webhook.edit.vue
+++ b/packages/client/src/pages/settings/webhook.edit.vue
@@ -28,7 +28,7 @@
 	<FormSwitch v-model="active" class="_formBlock">Active</FormSwitch>
 
 	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton primary inline @click="save"><i class="fas fa-check"></i> {{ i18n.ts.save }}</FormButton>
+		<FormButton primary inline @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</FormButton>
 	</div>
 </div>
 </template>
diff --git a/packages/client/src/pages/settings/webhook.new.vue b/packages/client/src/pages/settings/webhook.new.vue
index fcf1329ff6..b42f283945 100644
--- a/packages/client/src/pages/settings/webhook.new.vue
+++ b/packages/client/src/pages/settings/webhook.new.vue
@@ -26,7 +26,7 @@
 	</FormSection>
 
 	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton primary inline @click="create"><i class="fas fa-check"></i> {{ i18n.ts.create }}</FormButton>
+		<FormButton primary inline @click="create"><i class="ti ti-check"></i> {{ i18n.ts.create }}</FormButton>
 	</div>
 </div>
 </template>
diff --git a/packages/client/src/pages/settings/webhook.vue b/packages/client/src/pages/settings/webhook.vue
index 1a7e73940c..d3ad475cd8 100644
--- a/packages/client/src/pages/settings/webhook.vue
+++ b/packages/client/src/pages/settings/webhook.vue
@@ -13,7 +13,7 @@
 					<template #icon>
 						<i v-if="webhook.active === false" class="fas fa-circle-pause"></i>
 						<i v-else-if="webhook.latestStatus === null" class="far fa-circle"></i>
-						<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="fas fa-check" :style="{ color: 'var(--success)' }"></i>
+						<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="ti ti-check" :style="{ color: 'var(--success)' }"></i>
 						<i v-else class="fas fa-triangle-exclamation" :style="{ color: 'var(--error)' }"></i>
 					</template>
 					{{ webhook.name || webhook.url }}
diff --git a/packages/client/src/pages/share.vue b/packages/client/src/pages/share.vue
index 69d22ed632..a7e797eeab 100644
--- a/packages/client/src/pages/share.vue
+++ b/packages/client/src/pages/share.vue
@@ -158,7 +158,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.share,
-	icon: 'fas fa-share-alt',
+	icon: 'ti ti-share',
 });
 </script>
 
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index 5498c2999d..72775ed5c9 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -30,6 +30,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
 	title: props.tag,
-	icon: 'fas fa-hashtag',
+	icon: 'ti ti-hash',
 })));
 </script>
diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index 7dfeee16ed..f0435427eb 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -215,7 +215,7 @@ const headerActions = $computed(() => [{
 	handler: showPreview,
 }, {
 	asFullButton: true,
-	icon: 'fas fa-check',
+	icon: 'ti ti-check',
 	text: i18n.ts.saveAs,
 	handler: saveAs,
 }]);
diff --git a/packages/client/src/pages/timeline.tutorial.vue b/packages/client/src/pages/timeline.tutorial.vue
index 9683cc22a5..b1a1af1383 100644
--- a/packages/client/src/pages/timeline.tutorial.vue
+++ b/packages/client/src/pages/timeline.tutorial.vue
@@ -71,7 +71,7 @@
 			<MkButton :class="$style.footerItem" :primary="false" @click="tutorial = -1">{{ i18n.ts.noThankYou }}</MkButton>
 		</template>
 		<template v-else>
-			<MkButton :class="$style.footerItem" primary @click="tutorial++"><i class="fas fa-check"></i> {{ i18n.ts.next }}</MkButton>
+			<MkButton :class="$style.footerItem" primary @click="tutorial++"><i class="ti ti-check"></i> {{ i18n.ts.next }}</MkButton>
 		</template>
 	</div>
 </div>
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 9d42997025..8c2dc92ccd 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -114,22 +114,22 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => [{
 	key: 'home',
 	title: i18n.ts._timelines.home,
-	icon: 'fas fa-home',
+	icon: 'ti ti-home-2',
 	iconOnly: true,
 }, ...(isLocalTimelineAvailable ? [{
 	key: 'local',
 	title: i18n.ts._timelines.local,
-	icon: 'fas fa-comments',
+	icon: 'ti ti-messages',
 	iconOnly: true,
 }, {
 	key: 'social',
 	title: i18n.ts._timelines.social,
-	icon: 'fas fa-share-alt',
+	icon: 'ti ti-share',
 	iconOnly: true,
 }] : []), ...(isGlobalTimelineAvailable ? [{
 	key: 'global',
 	title: i18n.ts._timelines.global,
-	icon: 'fas fa-globe',
+	icon: 'ti ti-world',
 	iconOnly: true,
 }] : []), {
 	icon: 'fas fa-list-ul',
@@ -150,7 +150,7 @@ const headerTabs = $computed(() => [{
 
 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',
+	icon: src === 'local' ? 'ti ti-messages' : src === 'social' ? 'ti ti-share' : src === 'global' ? 'ti ti-world' : 'ti ti-home-2',
 })));
 </script>
 
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index 4a534e47ba..773b20d80c 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -69,7 +69,7 @@ const headerActions = $computed(() => list ? [{
 	text: i18n.ts.jumpToSpecifiedDate,
 	handler: timetravel,
 }, {
-	icon: 'fas fa-cog',
+	icon: 'ti ti-settings',
 	text: i18n.ts.settings,
 	handler: settings,
 }] : []);
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index 352db4616e..98c7e9d116 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -25,7 +25,7 @@
 						</div>
 						<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
 						<div v-if="$i" class="actions">
-							<button class="menu _button" @click="menu"><i class="fas fa-ellipsis-h"></i></button>
+							<button class="menu _button" @click="menu"><i class="ti ti-dots"></i></button>
 							<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
 						</div>
 					</div>
diff --git a/packages/client/src/pages/user/index.activity.vue b/packages/client/src/pages/user/index.activity.vue
index 630a2cea7d..7f25176e82 100644
--- a/packages/client/src/pages/user/index.activity.vue
+++ b/packages/client/src/pages/user/index.activity.vue
@@ -3,7 +3,7 @@
 	<template #header><i class="fas fa-chart-simple" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
 	<template #func>
 		<button class="_button" @click="showMenu">
-			<i class="fas fa-ellipsis-h"></i>
+			<i class="ti ti-dots"></i>
 		</button>
 	</template>
 
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 7e635f8b2e..21f1d25dfd 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -69,7 +69,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => user ? [{
 	key: 'home',
 	title: i18n.ts.overview,
-	icon: 'fas fa-home',
+	icon: 'ti ti-home-2',
 }, ...($i && ($i.id === user.id)) || user.publicReactions ? [{
 	key: 'reactions',
 	title: i18n.ts.reaction,
@@ -77,7 +77,7 @@ const headerTabs = $computed(() => user ? [{
 }] : [], {
 	key: 'clips',
 	title: i18n.ts.clips,
-	icon: 'fas fa-paperclip',
+	icon: 'ti ti-paperclip',
 }, {
 	key: 'pages',
 	title: i18n.ts.pages,
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index 827162a0c0..119ba96ec9 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -15,7 +15,7 @@
 		</div>
 		<div class="main">
 			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
-			<button class="_button _acrylic menu" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
+			<button class="_button _acrylic menu" @click="showMenu"><i class="ti ti-dots"></i></button>
 			<div class="fg">
 				<h1>
 					<!-- 背景色によってはロゴが見えなくなるのでとりあえず無効に -->
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index a590834a4c..535580e723 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -41,7 +41,7 @@
 							<template #n><b>{{ onlineUsersCount }}</b></template>
 						</I18n>
 					</div>
-					<button class="_button _acrylic menu" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
+					<button class="_button _acrylic menu" @click="showMenu"><i class="ti ti-dots"></i></button>
 				</div>
 			</div>
 			<nav class="nav">
diff --git a/packages/client/src/pages/welcome.timeline.vue b/packages/client/src/pages/welcome.timeline.vue
index e19ebac3ed..f45a15448d 100644
--- a/packages/client/src/pages/welcome.timeline.vue
+++ b/packages/client/src/pages/welcome.timeline.vue
@@ -4,7 +4,7 @@
 		<div v-for="note in notes" class="note">
 			<div class="content _panel">
 				<div class="body">
-					<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
+					<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
 					<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 					<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 				</div>
diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
index 4826cd70fd..18926981bc 100644
--- a/packages/client/src/scripts/get-note-menu.ts
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -93,7 +93,7 @@ export function getNoteMenu(props: {
 	async function clip(): Promise<void> {
 		const clips = await os.api('clips/list');
 		os.popupMenu([{
-			icon: 'fas fa-plus',
+			icon: 'ti ti-plus',
 			text: i18n.ts.createNew,
 			action: async () => {
 				const { canceled, result } = await os.form(i18n.ts.createNewClip, {
@@ -202,15 +202,15 @@ export function getNoteMenu(props: {
 					action: unclip,
 				}, null] : []
 			), {
-				icon: 'fas fa-external-link-alt',
+				icon: 'ti ti-external-link',
 				text: i18n.ts.details,
 				action: notedetails,
 			}, {
-				icon: 'fas fa-copy',
+				icon: 'ti ti-copy',
 				text: i18n.ts.copyContent,
 				action: copyContent,
 			}, {
-				icon: 'fas fa-link',
+				icon: 'ti ti-link',
 				text: i18n.ts.copyLink,
 				action: copyLink,
 			}, (appearNote.url || appearNote.uri) ? {
@@ -221,27 +221,27 @@ export function getNoteMenu(props: {
 				},
 			} : undefined,
 			{
-				icon: 'fas fa-share-alt',
+				icon: 'ti ti-share',
 				text: i18n.ts.share,
 				action: share,
 			},
 			instance.translatorAvailable ? {
-				icon: 'fas fa-language',
+				icon: 'ti ti-language-hiragana',
 				text: i18n.ts.translate,
 				action: translate,
 			} : undefined,
 			null,
 			statePromise.then(state => state.isFavorited ? {
-				icon: 'fas fa-star',
+				icon: 'ti ti-star',
 				text: i18n.ts.unfavorite,
 				action: () => toggleFavorite(false),
 			} : {
-				icon: 'fas fa-star',
+				icon: 'ti ti-star',
 				text: i18n.ts.favorite,
 				action: () => toggleFavorite(true),
 			}),
 			{
-				icon: 'fas fa-paperclip',
+				icon: 'ti ti-paperclip',
 				text: i18n.ts.clip,
 				action: () => clip(),
 			},
@@ -276,7 +276,7 @@ export function getNoteMenu(props: {
 			...(appearNote.userId !== $i.id ? [
 				null,
 				{
-					icon: 'fas fa-exclamation-circle',
+					icon: 'ti ti-exclamation-circle',
 					text: i18n.ts.reportAbuse,
 					action: () => {
 						const u = appearNote.url || appearNote.uri || `${url}/notes/${appearNote.id}`;
@@ -296,7 +296,7 @@ export function getNoteMenu(props: {
 					action: delEdit,
 				} : undefined,
 				{
-					icon: 'fas fa-trash-alt',
+					icon: 'ti ti-trash',
 					text: i18n.ts.delete,
 					danger: true,
 					action: del,
@@ -306,15 +306,15 @@ export function getNoteMenu(props: {
 			.filter(x => x !== undefined);
 	} else {
 		menu = [{
-			icon: 'fas fa-external-link-alt',
+			icon: 'ti ti-external-link',
 			text: i18n.ts.detailed,
 			action: openDetail,
 		}, {
-			icon: 'fas fa-copy',
+			icon: 'ti ti-copy',
 			text: i18n.ts.copyContent,
 			action: copyContent,
 		}, {
-			icon: 'fas fa-link',
+			icon: 'ti ti-link',
 			text: i18n.ts.copyLink,
 			action: copyLink,
 		}, (appearNote.url || appearNote.uri) ? {
diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts
index 4a5a2d42f0..ae71b9718f 100644
--- a/packages/client/src/scripts/get-user-menu.ts
+++ b/packages/client/src/scripts/get-user-menu.ts
@@ -172,7 +172,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 		},
 	}, meId !== user.id ? {
 		type: 'link',
-		icon: 'fas fa-comments',
+		icon: 'ti ti-messages',
 		text: i18n.ts.startMessaging,
 		to: '/my/messaging/' + Acct.toString(user),
 	} : undefined, null, {
@@ -205,7 +205,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 		}
 
 		menu = menu.concat([null, {
-			icon: 'fas fa-exclamation-circle',
+			icon: 'ti ti-exclamation-circle',
 			text: i18n.ts.reportAbuse,
 			action: reportAbuse,
 		}]);
diff --git a/packages/client/src/scripts/hpml/lib.ts b/packages/client/src/scripts/hpml/lib.ts
index cab467a920..e9923904f6 100644
--- a/packages/client/src/scripts/hpml/lib.ts
+++ b/packages/client/src/scripts/hpml/lib.ts
@@ -130,13 +130,13 @@ export function initAiLib(hpml: Hpml) {
 }
 
 export const funcDefs: Record<string, { in: any[]; out: any; category: string; icon: any; }> = {
-	if: { in: ['boolean', 0, 0], out: 0, category: 'flow', icon: 'fas fa-share-alt' },
+	if: { in: ['boolean', 0, 0], out: 0, category: 'flow', icon: 'ti ti-share' },
 	for: { in: ['number', 'function'], out: null, category: 'flow', icon: 'fas fa-recycle' },
 	not: { in: ['boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
 	or: { in: ['boolean', 'boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
 	and: { in: ['boolean', 'boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
-	add: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-plus' },
-	subtract: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-minus' },
+	add: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'ti ti-plus' },
+	subtract: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'ti ti-minus' },
 	multiply: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-times' },
 	divide: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-divide' },
 	mod: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-divide' },
diff --git a/packages/client/src/scripts/select-file.ts b/packages/client/src/scripts/select-file.ts
index 17e31d96f1..b5c5d688a7 100644
--- a/packages/client/src/scripts/select-file.ts
+++ b/packages/client/src/scripts/select-file.ts
@@ -84,11 +84,11 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
 			action: chooseFileFromPc,
 		}, {
 			text: i18n.ts.fromDrive,
-			icon: 'fas fa-cloud',
+			icon: 'ti ti-cloud',
 			action: chooseFileFromDrive,
 		}, {
 			text: i18n.ts.fromUrl,
-			icon: 'fas fa-link',
+			icon: 'ti ti-link',
 			action: chooseFileFromUrl,
 		}], src);
 	});
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 0b61d46f10..a7f40d81d8 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -119,6 +119,11 @@ hr {
 	background: var(--divider);
 }
 
+.ti {
+	font-size: 125%;
+	vertical-align: text-bottom;
+}
+
 ._noSelect {
 	user-select: none;
 	-webkit-user-select: none;
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
index de000447ad..7747f9ca38 100644
--- a/packages/client/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue
@@ -9,7 +9,7 @@
 		</div>
 		<div class="middle">
 			<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-				<i class="icon fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
+				<i class="icon ti ti-home-2 fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
 			</MkA>
 			<template v-for="item in menu">
 				<div v-if="item === '-'" class="divider"></div>
@@ -27,7 +27,7 @@
 				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
 			</button>
 			<MkA v-click-anime class="item" active-class="active" to="/settings">
-				<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
+				<i class="icon ti ti-settings fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 			</MkA>
 		</div>
 		<div class="bottom">
@@ -85,7 +85,7 @@ function openInstanceMenu(ev: MouseEvent) {
 	}, {
 		type: 'link',
 		text: i18n.ts.federation,
-		icon: 'fas fa-globe',
+		icon: 'ti ti-world',
 		to: '/about#federation',
 	}, null, {
 		type: 'parent',
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 20622b083a..2a96e200fc 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -9,7 +9,7 @@
 		</div>
 		<div class="middle">
 			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
-				<i class="icon fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
+				<i class="icon ti ti-home-2 fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
 			</MkA>
 			<template v-for="item in menu">
 				<div v-if="item === '-'" class="divider"></div>
@@ -37,7 +37,7 @@
 				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
 			</button>
 			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item" active-class="active" to="/settings">
-				<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
+				<i class="icon ti ti-settings fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 			</MkA>
 		</div>
 		<div class="bottom">
@@ -108,7 +108,7 @@ function openInstanceMenu(ev: MouseEvent) {
 	}, {
 		type: 'link',
 		text: i18n.ts.federation,
-		icon: 'fas fa-globe',
+		icon: 'ti ti-world',
 		to: '/about#federation',
 	}, null, {
 		type: 'parent',
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
index 306d32c597..5e30e10658 100644
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -3,7 +3,7 @@
 	<div class="body">
 		<div class="left">
 			<MkA v-click-anime v-tooltip="$ts.timeline" class="item index" active-class="active" to="/" exact>
-				<i class="fas fa-home fa-fw"></i>
+				<i class="ti ti-home-2 fa-fw"></i>
 			</MkA>
 			<template v-for="item in menu">
 				<div v-if="item === '-'" class="divider"></div>
@@ -17,13 +17,13 @@
 				<i class="fas fa-door-open fa-fw"></i>
 			</MkA>
 			<button v-click-anime class="item _button" @click="more">
-				<i class="fas fa-ellipsis-h fa-fw"></i>
+				<i class="ti ti-dots fa-fw"></i>
 				<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
 			</button>
 		</div>
 		<div class="right">
 			<MkA v-click-anime v-tooltip="$ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
-				<i class="fas fa-cog fa-fw"></i>
+				<i class="ti ti-settings fa-fw"></i>
 			</MkA>
 			<button v-click-anime class="item _button account" @click="openAccountMenu">
 				<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
index 7479c1c9c6..104124c5d8 100644
--- a/packages/client/src/ui/classic.sidebar.vue
+++ b/packages/client/src/ui/classic.sidebar.vue
@@ -10,7 +10,7 @@
 	</div>
 	<div class="divider"></div>
 	<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-		<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+		<i class="ti ti-home-2 fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
 	</MkA>
 	<template v-for="item in menu">
 		<div v-if="item === '-'" class="divider"></div>
@@ -24,11 +24,11 @@
 		<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
 	</MkA>
 	<button v-click-anime class="item _button" @click="more">
-		<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
+		<i class="ti ti-dots fa-fw"></i><span class="text">{{ $ts.more }}</span>
 		<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
 	</button>
 	<MkA v-click-anime class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+		<i class="ti ti-settings fa-fw"></i><span class="text">{{ $ts.settings }}</span>
 	</MkA>
 	<div class="divider"></div>
 	<div class="about">
diff --git a/packages/client/src/ui/classic.widgets.vue b/packages/client/src/ui/classic.widgets.vue
index ca8e3f4dbc..95864b4595 100644
--- a/packages/client/src/ui/classic.widgets.vue
+++ b/packages/client/src/ui/classic.widgets.vue
@@ -3,7 +3,7 @@
 	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
 	<MkAd class="a" :prefer="['square']"/>
 
-	<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
+	<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ $ts.editWidgetsExit }}</button>
 	<button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
 </div>
 </template>
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 224ad7ee1a..43ab54944b 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -38,10 +38,10 @@
 					<button v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" class="_button button" @click="deleteProfile"><i class="fas fa-trash-can"></i></button>
 				</div>
 				<div class="middle">
-					<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" class="_button button" @click="addColumn"><i class="fas fa-plus"></i></button>
+					<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" class="_button button" @click="addColumn"><i class="ti ti-plus"></i></button>
 				</div>
 				<div class="bottom">
-					<button v-tooltip.noDelay.left="i18n.ts.settings" class="_button button settings" @click="showSettings"><i class="fas fa-cog"></i></button>
+					<button v-tooltip.noDelay.left="i18n.ts.settings" class="_button button settings" @click="showSettings"><i class="ti ti-settings"></i></button>
 				</div>
 			</div>
 		</div>
@@ -49,8 +49,8 @@
 
 	<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="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 home _button" @click="mainRouter.push('/')"><i class="ti ti-home-2"></i></button>
+		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ti ti-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>
 
@@ -194,7 +194,7 @@ function changeProfile(ev: MouseEvent) {
 			},
 		}))), null, {
 			text: i18n.ts._deck.newProfile,
-			icon: 'fas fa-plus',
+			icon: 'ti ti-plus',
 			action: async () => {
 				const { canceled, result: name } = await os.inputText({
 					title: i18n.ts._deck.profile,
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index d16c23d100..b841c1a629 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -105,7 +105,7 @@ function toggleActive() {
 
 function getMenu() {
 	let items = [{
-		icon: 'fas fa-cog',
+		icon: 'ti ti-settings',
 		text: i18n.ts._deck.configureColumn,
 		action: async () => {
 			const { canceled, result } = await os.form(props.column.name, {
@@ -170,7 +170,7 @@ function getMenu() {
 			popRightColumn(props.column.id);
 		},
 	} : undefined, null, {
-		icon: 'fas fa-trash-alt',
+		icon: 'ti ti-trash',
 		text: i18n.ts.remove,
 		danger: true,
 		action: () => {
diff --git a/packages/client/src/ui/deck/notifications-column.vue b/packages/client/src/ui/deck/notifications-column.vue
index e77b849ef4..ef7eaff40d 100644
--- a/packages/client/src/ui/deck/notifications-column.vue
+++ b/packages/client/src/ui/deck/notifications-column.vue
@@ -1,6 +1,6 @@
 <template>
 <XColumn :column="column" :is-stacked="isStacked" :menu="menu" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="fas fa-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
+	<template #header><i class="ti ti-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
 	<XNotifications :include-types="column.includingTypes"/>
 </XColumn>
diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/tl-column.vue
index e64ed852b2..2603a50e13 100644
--- a/packages/client/src/ui/deck/tl-column.vue
+++ b/packages/client/src/ui/deck/tl-column.vue
@@ -1,16 +1,16 @@
 <template>
 <XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header>
-		<i v-if="column.tl === 'home'" class="fas fa-home"></i>
-		<i v-else-if="column.tl === 'local'" class="fas fa-comments"></i>
-		<i v-else-if="column.tl === 'social'" class="fas fa-share-alt"></i>
-		<i v-else-if="column.tl === 'global'" class="fas fa-globe"></i>
+		<i v-if="column.tl === 'home'" class="ti ti-home-2"></i>
+		<i v-else-if="column.tl === 'local'" class="ti ti-messages"></i>
+		<i v-else-if="column.tl === 'social'" class="ti ti-share"></i>
+		<i v-else-if="column.tl === 'global'" class="ti ti-world"></i>
 		<span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
 	<div v-if="disabled" class="iwaalbte">
 		<p>
-			<i class="fas fa-minus-circle"></i>
+			<i class="ti ti-minus-circle"></i>
 			{{ $t('disabled-timeline.title') }}
 		</p>
 		<p class="desc">{{ $t('disabled-timeline.description') }}</p>
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 7029f798f1..4d95db6e41 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -20,8 +20,8 @@
 
 	<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="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 home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i class="ti ti-home-2"></i></button>
+		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ti ti-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>
diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/universal.widgets.vue
index 179f8a6baa..60b2d4f86a 100644
--- a/packages/client/src/ui/universal.widgets.vue
+++ b/packages/client/src/ui/universal.widgets.vue
@@ -2,7 +2,7 @@
 <div class="efzpzdvf">
 	<XWidgets :edit="editMode" :widgets="defaultStore.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
 
-	<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="fas fa-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
+	<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
 	<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="fas fa-pencil-alt"></i> {{ i18n.ts.editWidgets }}</button>
 </div>
 </template>
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index 3c308cfe5b..ccfbc433c3 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -32,8 +32,8 @@
 
 	<transition :name="$store.state.animation ? 'tray' : ''">
 		<div v-if="showMenu" class="menu">
-			<MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ $ts.home }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="fas fa-hashtag icon"></i>{{ $ts.explore }}</MkA>
+			<MkA to="/" class="link" active-class="active"><i class="ti ti-home-2 icon"></i>{{ $ts.home }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ $ts.explore }}</MkA>
 			<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ $ts.featured }}</MkA>
 			<MkA to="/channels" class="link" active-class="active"><i class="fas fa-satellite-dish icon"></i>{{ $ts.channel }}</MkA>
 			<div class="action">
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index e2b9034851..10002069b0 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -2,8 +2,8 @@
 <div class="sqxihjet">
 	<div v-if="narrow === false" class="wide">
 		<div class="content">
-			<MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ $ts.home }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="fas fa-hashtag icon"></i>{{ $ts.explore }}</MkA>
+			<MkA to="/" class="link" active-class="active"><i class="ti ti-home-2 icon"></i>{{ $ts.home }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ $ts.explore }}</MkA>
 			<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ $ts.featured }}</MkA>
 			<MkA to="/channels" class="link" active-class="active"><i class="fas fa-satellite-dish icon"></i>{{ $ts.channel }}</MkA>
 			<div v-if="info" class="page active link">
@@ -16,7 +16,7 @@
 				<button v-if="info.action" class="_button action" @click.stop="info.action.handler"><!-- TODO --></button>
 			</div>
 			<div class="right">
-				<button class="_button search" @click="search()"><i class="fas fa-search icon"></i><span>{{ $ts.search }}</span></button>
+				<button class="_button search" @click="search()"><i class="ti ti-search icon"></i><span>{{ $ts.search }}</span></button>
 				<button class="_buttonPrimary signup" @click="signup()">{{ $ts.signup }}</button>
 				<button class="_button login" @click="signin()">{{ $ts.login }}</button>
 			</div>
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index d0f81c1356..60b4924c40 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" :foldable="foldable" :scrollable="scrollable" class="mkw-federation">
-	<template #header><i class="fas fa-globe"></i>{{ i18n.ts._widgets.federation }}</template>
+	<template #header><i class="ti ti-world"></i>{{ i18n.ts._widgets.federation }}</template>
 
 	<div class="wbrkwalb">
 		<MkLoading v-if="fetching"/>
diff --git a/packages/client/src/widgets/notifications.vue b/packages/client/src/widgets/notifications.vue
index 2729c310a0..e697209444 100644
--- a/packages/client/src/widgets/notifications.vue
+++ b/packages/client/src/widgets/notifications.vue
@@ -1,7 +1,7 @@
 <template>
 <MkContainer :style="`height: ${widgetProps.height}px;`" :show-header="widgetProps.showHeader" :scrollable="true" class="mkw-notifications">
-	<template #header><i class="fas fa-bell"></i>{{ i18n.ts.notifications }}</template>
-	<template #func><button class="_button" @click="configureNotification()"><i class="fas fa-cog"></i></button></template>
+	<template #header><i class="ti ti-bell"></i>{{ i18n.ts.notifications }}</template>
+	<template #func><button class="_button" @click="configureNotification()"><i class="ti ti-settings"></i></button></template>
 
 	<div>
 		<XNotifications :include-types="widgetProps.includingTypes"/>
diff --git a/packages/client/src/widgets/rss-ticker.vue b/packages/client/src/widgets/rss-ticker.vue
index 82a2f59ae9..cc3c688f7b 100644
--- a/packages/client/src/widgets/rss-ticker.vue
+++ b/packages/client/src/widgets/rss-ticker.vue
@@ -1,7 +1,7 @@
 <template>
 <MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-rss-ticker">
 	<template #header><i class="fas fa-rss-square"></i>RSS</template>
-	<template #func><button class="_button" @click="configure"><i class="fas fa-cog"></i></button></template>
+	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
 
 	<div class="ekmkgxbk">
 		<MkLoading v-if="fetching"/>
diff --git a/packages/client/src/widgets/rss.vue b/packages/client/src/widgets/rss.vue
index f392a8249a..7d008b5155 100644
--- a/packages/client/src/widgets/rss.vue
+++ b/packages/client/src/widgets/rss.vue
@@ -1,7 +1,7 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-rss">
 	<template #header><i class="fas fa-rss-square"></i>RSS</template>
-	<template #func><button class="_button" @click="configure"><i class="fas fa-cog"></i></button></template>
+	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
 
 	<div class="ekmkgxbj">
 		<MkLoading v-if="fetching"/>
diff --git a/packages/client/src/widgets/timeline.vue b/packages/client/src/widgets/timeline.vue
index 718162667d..5e1081f0d8 100644
--- a/packages/client/src/widgets/timeline.vue
+++ b/packages/client/src/widgets/timeline.vue
@@ -2,10 +2,10 @@
 <MkContainer :show-header="widgetProps.showHeader" :style="`height: ${widgetProps.height}px;`" :scrollable="true" class="mkw-timeline">
 	<template #header>
 		<button class="_button" @click="choose">
-			<i v-if="widgetProps.src === 'home'" class="fas fa-home"></i>
-			<i v-else-if="widgetProps.src === 'local'" class="fas fa-comments"></i>
-			<i v-else-if="widgetProps.src === 'social'" class="fas fa-share-alt"></i>
-			<i v-else-if="widgetProps.src === 'global'" class="fas fa-globe"></i>
+			<i v-if="widgetProps.src === 'home'" class="ti ti-home-2"></i>
+			<i v-else-if="widgetProps.src === 'local'" class="ti ti-messages"></i>
+			<i v-else-if="widgetProps.src === 'social'" class="ti ti-share"></i>
+			<i v-else-if="widgetProps.src === 'global'" class="ti ti-world"></i>
 			<i v-else-if="widgetProps.src === 'list'" class="fas fa-list-ul"></i>
 			<i v-else-if="widgetProps.src === 'antenna'" class="fas fa-satellite"></i>
 			<span style="margin-left: 8px;">{{ widgetProps.src === 'list' ? widgetProps.list.name : widgetProps.src === 'antenna' ? widgetProps.antenna.name : $t('_timelines.' + widgetProps.src) }}</span>
@@ -102,19 +102,19 @@ const choose = async (ev) => {
 	}));
 	os.popupMenu([{
 		text: i18n.ts._timelines.home,
-		icon: 'fas fa-home',
+		icon: 'ti ti-home-2',
 		action: () => { setSrc('home'); }
 	}, {
 		text: i18n.ts._timelines.local,
-		icon: 'fas fa-comments',
+		icon: 'ti ti-messages',
 		action: () => { setSrc('local'); }
 	}, {
 		text: i18n.ts._timelines.social,
-		icon: 'fas fa-share-alt',
+		icon: 'ti ti-share',
 		action: () => { setSrc('social'); }
 	}, {
 		text: i18n.ts._timelines.global,
-		icon: 'fas fa-globe',
+		icon: 'ti ti-world',
 		action: () => { setSrc('global'); }
 	}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], ev.currentTarget ?? ev.target).then(() => {
 		menuOpened.value = false;
diff --git a/packages/client/src/widgets/trends.vue b/packages/client/src/widgets/trends.vue
index a783c04215..02eec0431e 100644
--- a/packages/client/src/widgets/trends.vue
+++ b/packages/client/src/widgets/trends.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
-	<template #header><i class="fas fa-hashtag"></i>{{ i18n.ts._widgets.trends }}</template>
+	<template #header><i class="ti ti-hash"></i>{{ i18n.ts._widgets.trends }}</template>
 
 	<div class="wbrkwala">
 		<MkLoading v-if="fetching"/>
-- 
cgit v1.2.3-freya


From 52cbe07a780c0542912798e1e9bc1b78a63d6806 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 19 Dec 2022 13:54:35 +0900
Subject: Revert "wip"

This reverts commit f83bd31fd5fee0bb2209ad0e5359ffa473ffb30e.
---
 packages/backend/src/server/web/views/base.pug     |  2 +-
 packages/client/src/account.ts                     |  2 +-
 .../client/src/components/MkAbuseReportWindow.vue  |  2 +-
 .../src/components/MkChannelFollowButton.vue       |  4 ++--
 packages/client/src/components/MkDialog.vue        |  2 +-
 packages/client/src/components/MkDrive.file.vue    |  4 ++--
 packages/client/src/components/MkDrive.folder.vue  |  2 +-
 .../client/src/components/MkDrive.navFolder.vue    |  2 +-
 packages/client/src/components/MkDrive.vue         |  6 ++---
 packages/client/src/components/MkEmojiPicker.vue   |  2 +-
 packages/client/src/components/MkFollowButton.vue  |  6 ++---
 packages/client/src/components/MkGoogle.vue        |  2 +-
 .../client/src/components/MkModalPageWindow.vue    |  6 ++---
 packages/client/src/components/MkModalWindow.vue   |  2 +-
 packages/client/src/components/MkNote.vue          | 18 +++++++-------
 packages/client/src/components/MkNoteDetailed.vue  | 18 +++++++-------
 packages/client/src/components/MkNotification.vue  |  8 +++----
 packages/client/src/components/MkPageWindow.vue    |  6 ++---
 packages/client/src/components/MkPoll.vue          |  2 +-
 packages/client/src/components/MkPostForm.vue      | 10 ++++----
 packages/client/src/components/MkRenoteButton.vue  |  4 ++--
 packages/client/src/components/MkSignup.vue        | 10 ++++----
 .../client/src/components/MkSubNoteContent.vue     |  2 +-
 packages/client/src/components/MkVisibility.vue    |  2 +-
 .../client/src/components/MkVisibilityPicker.vue   |  4 ++--
 packages/client/src/components/MkWaitingDialog.vue |  2 +-
 packages/client/src/components/MkWidgets.vue       |  6 ++---
 packages/client/src/components/form/checkbox.vue   |  2 +-
 packages/client/src/components/form/input.vue      |  2 +-
 packages/client/src/components/form/link.vue       |  2 +-
 packages/client/src/components/global/MkA.vue      |  4 ++--
 packages/client/src/components/page/page.post.vue  |  4 ++--
 packages/client/src/navbar.ts                      | 14 +++++------
 packages/client/src/pages/about-misskey.vue        |  2 +-
 packages/client/src/pages/about.emojis.vue         |  2 +-
 packages/client/src/pages/about.federation.vue     |  2 +-
 packages/client/src/pages/about.vue                |  2 +-
 packages/client/src/pages/admin-file.vue           |  4 ++--
 packages/client/src/pages/admin/abuses.vue         |  2 +-
 packages/client/src/pages/admin/ads.vue            |  4 ++--
 packages/client/src/pages/admin/announcements.vue  |  4 ++--
 packages/client/src/pages/admin/email-settings.vue |  2 +-
 .../client/src/pages/admin/emoji-edit-dialog.vue   |  2 +-
 packages/client/src/pages/admin/emojis.vue         | 10 ++++----
 packages/client/src/pages/admin/files.vue          |  6 ++---
 packages/client/src/pages/admin/index.vue          | 24 +++++++++----------
 packages/client/src/pages/admin/integrations.vue   |  2 +-
 packages/client/src/pages/admin/object-storage.vue |  4 ++--
 packages/client/src/pages/admin/other-settings.vue |  4 ++--
 packages/client/src/pages/admin/relays.vue         |  8 +++----
 packages/client/src/pages/admin/security.vue       |  2 +-
 packages/client/src/pages/admin/settings.vue       | 12 +++++-----
 packages/client/src/pages/admin/users.vue          |  6 ++---
 packages/client/src/pages/announcements.vue        |  2 +-
 packages/client/src/pages/antenna-timeline.vue     |  2 +-
 packages/client/src/pages/api-console.vue          |  2 +-
 packages/client/src/pages/channel-editor.vue       |  4 ++--
 packages/client/src/pages/channel.vue              |  2 +-
 packages/client/src/pages/channels.vue             |  4 ++--
 packages/client/src/pages/clip.vue                 |  4 ++--
 packages/client/src/pages/drive.vue                |  2 +-
 packages/client/src/pages/emojis.emoji.vue         |  2 +-
 packages/client/src/pages/explore.users.vue        |  6 ++---
 packages/client/src/pages/explore.vue              |  4 ++--
 packages/client/src/pages/favorites.vue            |  2 +-
 packages/client/src/pages/follow-requests.vue      |  2 +-
 packages/client/src/pages/gallery/edit.vue         |  4 ++--
 packages/client/src/pages/gallery/index.vue        |  4 ++--
 packages/client/src/pages/gallery/post.vue         |  4 ++--
 packages/client/src/pages/instance-info.vue        |  2 +-
 packages/client/src/pages/messaging/index.vue      |  4 ++--
 .../src/pages/messaging/messaging-room.form.vue    |  2 +-
 packages/client/src/pages/my-antennas/index.vue    |  2 +-
 packages/client/src/pages/my-clips/index.vue       |  6 ++---
 packages/client/src/pages/my-lists/index.vue       |  4 ++--
 packages/client/src/pages/notifications.vue        |  4 ++--
 .../pages/page-editor/els/page-editor.el.if.vue    |  2 +-
 .../pages/page-editor/els/page-editor.el.post.vue  |  2 +-
 .../page-editor/els/page-editor.el.section.vue     |  2 +-
 .../pages/page-editor/page-editor.container.vue    |  2 +-
 .../client/src/pages/page-editor/page-editor.vue   | 14 +++++------
 packages/client/src/pages/page.vue                 |  4 ++--
 packages/client/src/pages/pages.vue                |  4 ++--
 packages/client/src/pages/registry.keys.vue        |  2 +-
 packages/client/src/pages/registry.value.vue       |  2 +-
 packages/client/src/pages/registry.vue             |  2 +-
 packages/client/src/pages/search.vue               |  2 +-
 packages/client/src/pages/settings/accounts.vue    |  4 ++--
 packages/client/src/pages/settings/apps.vue        |  2 +-
 packages/client/src/pages/settings/drive.vue       |  2 +-
 packages/client/src/pages/settings/email.vue       |  2 +-
 packages/client/src/pages/settings/general.vue     |  2 +-
 packages/client/src/pages/settings/index.vue       | 12 +++++-----
 packages/client/src/pages/settings/integration.vue |  2 +-
 .../client/src/pages/settings/notifications.vue    |  4 ++--
 packages/client/src/pages/settings/other.vue       |  4 ++--
 .../client/src/pages/settings/plugin.install.vue   |  2 +-
 packages/client/src/pages/settings/plugin.vue      |  4 ++--
 packages/client/src/pages/settings/profile.vue     |  4 ++--
 packages/client/src/pages/settings/reaction.vue    |  2 +-
 packages/client/src/pages/settings/security.vue    |  2 +-
 .../client/src/pages/settings/theme.install.vue    |  2 +-
 .../client/src/pages/settings/theme.manage.vue     |  2 +-
 packages/client/src/pages/settings/theme.vue       |  2 +-
 .../client/src/pages/settings/webhook.edit.vue     |  2 +-
 packages/client/src/pages/settings/webhook.new.vue |  2 +-
 packages/client/src/pages/settings/webhook.vue     |  2 +-
 packages/client/src/pages/share.vue                |  2 +-
 packages/client/src/pages/tag.vue                  |  2 +-
 packages/client/src/pages/theme-editor.vue         |  2 +-
 packages/client/src/pages/timeline.tutorial.vue    |  2 +-
 packages/client/src/pages/timeline.vue             | 10 ++++----
 packages/client/src/pages/user-list-timeline.vue   |  2 +-
 packages/client/src/pages/user/home.vue            |  2 +-
 packages/client/src/pages/user/index.activity.vue  |  2 +-
 packages/client/src/pages/user/index.vue           |  4 ++--
 packages/client/src/pages/welcome.entrance.a.vue   |  2 +-
 packages/client/src/pages/welcome.entrance.c.vue   |  2 +-
 packages/client/src/pages/welcome.timeline.vue     |  2 +-
 packages/client/src/scripts/get-note-menu.ts       | 28 +++++++++++-----------
 packages/client/src/scripts/get-user-menu.ts       |  4 ++--
 packages/client/src/scripts/hpml/lib.ts            |  6 ++---
 packages/client/src/scripts/select-file.ts         |  4 ++--
 packages/client/src/style.scss                     |  5 ----
 .../client/src/ui/_common_/navbar-for-mobile.vue   |  6 ++---
 packages/client/src/ui/_common_/navbar.vue         |  6 ++---
 packages/client/src/ui/classic.header.vue          |  6 ++---
 packages/client/src/ui/classic.sidebar.vue         |  6 ++---
 packages/client/src/ui/classic.widgets.vue         |  2 +-
 packages/client/src/ui/deck.vue                    | 10 ++++----
 packages/client/src/ui/deck/column.vue             |  4 ++--
 .../client/src/ui/deck/notifications-column.vue    |  2 +-
 packages/client/src/ui/deck/tl-column.vue          | 10 ++++----
 packages/client/src/ui/universal.vue               |  4 ++--
 packages/client/src/ui/universal.widgets.vue       |  2 +-
 packages/client/src/ui/visitor/b.vue               |  4 ++--
 packages/client/src/ui/visitor/header.vue          |  6 ++---
 packages/client/src/widgets/federation.vue         |  2 +-
 packages/client/src/widgets/notifications.vue      |  4 ++--
 packages/client/src/widgets/rss-ticker.vue         |  2 +-
 packages/client/src/widgets/rss.vue                |  2 +-
 packages/client/src/widgets/timeline.vue           | 16 ++++++-------
 packages/client/src/widgets/trends.vue             |  2 +-
 143 files changed, 306 insertions(+), 311 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug
index 472defa102..7d802d37ce 100644
--- a/packages/backend/src/server/web/views/base.pug
+++ b/packages/backend/src/server/web/views/base.pug
@@ -34,7 +34,7 @@ html
 		link(rel='prefetch' href='https://xn--931a.moe/assets/info.jpg')
 		link(rel='prefetch' href='https://xn--931a.moe/assets/not-found.jpg')
 		link(rel='prefetch' href='https://xn--931a.moe/assets/error.jpg')
-		link(rel='stylesheet' href='https://unpkg.com/@tabler/icons@1.117.0/iconfont/tabler-icons.min.css')
+		link(rel='stylesheet' href='/assets/fontawesome/css/all.css')
 		link(rel='modulepreload' href=`/assets/${clientEntry.file}`)
 
 		if Array.isArray(clientEntry.css)
diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts
index e981536dd8..e9c29d6b0d 100644
--- a/packages/client/src/account.ts
+++ b/packages/client/src/account.ts
@@ -213,7 +213,7 @@ export async function openAccountMenu(opts: {
 			avatar: $i,
 		}, null, ...(opts.includeCurrentAccount ? [createItem($i)] : []), ...accountItemPromises, {
 			type: 'parent',
-			icon: 'ti ti-plus',
+			icon: 'fas fa-plus',
 			text: i18n.ts.addAccount,
 			children: [{
 				text: i18n.ts.existingAccount,
diff --git a/packages/client/src/components/MkAbuseReportWindow.vue b/packages/client/src/components/MkAbuseReportWindow.vue
index 03890b4e97..1862d0a0e4 100644
--- a/packages/client/src/components/MkAbuseReportWindow.vue
+++ b/packages/client/src/components/MkAbuseReportWindow.vue
@@ -1,7 +1,7 @@
 <template>
 <XWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
 	<template #header>
-		<i class="ti ti-exclamation-circle" style="margin-right: 0.5em;"></i>
+		<i class="fas fa-exclamation-circle" style="margin-right: 0.5em;"></i>
 		<I18n :src="i18n.ts.reportAbuseOf" tag="span">
 			<template #name>
 				<b><MkAcct :user="user"/></b>
diff --git a/packages/client/src/components/MkChannelFollowButton.vue b/packages/client/src/components/MkChannelFollowButton.vue
index 0d250268cf..dff02beec0 100644
--- a/packages/client/src/components/MkChannelFollowButton.vue
+++ b/packages/client/src/components/MkChannelFollowButton.vue
@@ -6,10 +6,10 @@
 >
 	<template v-if="!wait">
 		<template v-if="isFollowing">
-			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
+			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="fas fa-minus"></i>
 		</template>
 		<template v-else>
-			<span v-if="full">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
+			<span v-if="full">{{ i18n.ts.follow }}</span><i class="fas fa-plus"></i>
 		</template>
 	</template>
 	<template v-else>
diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index c9e2a2b212..513e2d22ba 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -5,7 +5,7 @@
 			<i :class="icon"></i>
 		</div>
 		<div v-else-if="!input && !select" class="icon" :class="type">
-			<i v-if="type === 'success'" class="ti ti-check"></i>
+			<i v-if="type === 'success'" class="fas fa-check"></i>
 			<i v-else-if="type === 'error'" class="fas fa-times-circle"></i>
 			<i v-else-if="type === 'warning'" class="fas fa-exclamation-triangle"></i>
 			<i v-else-if="type === 'info'" class="fas fa-info-circle"></i>
diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue
index c7f4a25f0c..22916d5680 100644
--- a/packages/client/src/components/MkDrive.file.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -75,7 +75,7 @@ function getMenu() {
 		action: describe,
 	}, null, {
 		text: i18n.ts.copyUrl,
-		icon: 'ti ti-link',
+		icon: 'fas fa-link',
 		action: copyUrl,
 	}, {
 		type: 'a',
@@ -86,7 +86,7 @@ function getMenu() {
 		download: props.file.name,
 	}, null, {
 		text: i18n.ts.delete,
-		icon: 'ti ti-trash',
+		icon: 'fas fa-trash-alt',
 		danger: true,
 		action: deleteFile,
 	}];
diff --git a/packages/client/src/components/MkDrive.folder.vue b/packages/client/src/components/MkDrive.folder.vue
index e973b8d037..6c522c0862 100644
--- a/packages/client/src/components/MkDrive.folder.vue
+++ b/packages/client/src/components/MkDrive.folder.vue
@@ -257,7 +257,7 @@ function onContextmenu(ev: MouseEvent) {
 		action: rename,
 	}, null, {
 		text: i18n.ts.delete,
-		icon: 'ti ti-trash',
+		icon: 'fas fa-trash-alt',
 		danger: true,
 		action: deleteFolder,
 	}], ev);
diff --git a/packages/client/src/components/MkDrive.navFolder.vue b/packages/client/src/components/MkDrive.navFolder.vue
index 3614113501..455c14f95e 100644
--- a/packages/client/src/components/MkDrive.navFolder.vue
+++ b/packages/client/src/components/MkDrive.navFolder.vue
@@ -7,7 +7,7 @@
 	@dragleave="onDragleave"
 	@drop.stop="onDrop"
 >
-	<i v-if="folder == null" class="ti ti-cloud"></i>
+	<i v-if="folder == null" class="fas fa-cloud"></i>
 	<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
 </div>
 </template>
diff --git a/packages/client/src/components/MkDrive.vue b/packages/client/src/components/MkDrive.vue
index 92e8ff62c1..c79ab97000 100644
--- a/packages/client/src/components/MkDrive.vue
+++ b/packages/client/src/components/MkDrive.vue
@@ -24,7 +24,7 @@
 			<span v-if="folder != null" class="separator"><i class="fas fa-angle-right"></i></span>
 			<span v-if="folder != null" class="folder current">{{ folder.name }}</span>
 		</div>
-		<button class="menu _button" @click="showMenu"><i class="ti ti-dots"></i></button>
+		<button class="menu _button" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
 	</nav>
 	<div
 		ref="main" class="main"
@@ -592,7 +592,7 @@ function getMenu() {
 		action: () => { selectLocalFile(); },
 	}, {
 		text: i18n.ts.fromUrl,
-		icon: 'ti ti-link',
+		icon: 'fas fa-link',
 		action: () => { urlUpload(); },
 	}, null, {
 		text: folder.value ? folder.value.name : i18n.ts.drive,
@@ -603,7 +603,7 @@ function getMenu() {
 		action: () => { renameFolder(folder.value); },
 	} : undefined, folder.value ? {
 		text: i18n.ts.deleteFolder,
-		icon: 'ti ti-trash',
+		icon: 'fas fa-trash-alt',
 		action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
 	} : undefined, {
 		text: i18n.ts.createFolder,
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index 3f185487fb..3dc90ce545 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -72,7 +72,7 @@
 		<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="fas fa-asterisk fa-fw"></i></button>
 		<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="fas fa-laugh fa-fw"></i></button>
 		<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="fas fa-leaf fa-fw"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="ti ti-hash fa-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="fas fa-hashtag fa-fw"></i></button>
 	</div>
 </div>
 </template>
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index 5ec50cd28b..efee795e43 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -12,13 +12,13 @@
 			<span v-if="full">{{ i18n.ts.processing }}</span><i class="fas fa-spinner fa-pulse"></i>
 		</template>
 		<template v-else-if="isFollowing">
-			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
+			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="fas fa-minus"></i>
 		</template>
 		<template v-else-if="!isFollowing && user.isLocked">
-			<span v-if="full">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i>
+			<span v-if="full">{{ i18n.ts.followRequest }}</span><i class="fas fa-plus"></i>
 		</template>
 		<template v-else-if="!isFollowing && !user.isLocked">
-			<span v-if="full">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
+			<span v-if="full">{{ i18n.ts.follow }}</span><i class="fas fa-plus"></i>
 		</template>
 	</template>
 	<template v-else>
diff --git a/packages/client/src/components/MkGoogle.vue b/packages/client/src/components/MkGoogle.vue
index d104cd4cd4..bb4b439ee8 100644
--- a/packages/client/src/components/MkGoogle.vue
+++ b/packages/client/src/components/MkGoogle.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-google">
 	<input v-model="query" type="search" :placeholder="q">
-	<button @click="search"><i class="ti ti-search"></i> {{ $ts.searchByGoogle }}</button>
+	<button @click="search"><i class="fas fa-search"></i> {{ $ts.searchByGoogle }}</button>
 </div>
 </template>
 
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index d68682be08..cc3f4c96cc 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -72,18 +72,18 @@ const contextmenu = $computed(() => {
 		text: i18n.ts.showInPage,
 		action: expand,
 	}, {
-		icon: 'ti ti-external-link',
+		icon: 'fas fa-external-link-alt',
 		text: i18n.ts.popout,
 		action: popout,
 	}, null, {
-		icon: 'ti ti-external-link',
+		icon: 'fas fa-external-link-alt',
 		text: i18n.ts.openInNewTab,
 		action: () => {
 			window.open(pageUrl, '_blank');
 			modal.close();
 		},
 	}, {
-		icon: 'ti ti-link',
+		icon: 'fas fa-link',
 		text: i18n.ts.copyLink,
 		action: () => {
 			copyToClipboard(pageUrl);
diff --git a/packages/client/src/components/MkModalWindow.vue b/packages/client/src/components/MkModalWindow.vue
index 139c6b5e50..5acd8c921f 100644
--- a/packages/client/src/components/MkModalWindow.vue
+++ b/packages/client/src/components/MkModalWindow.vue
@@ -7,7 +7,7 @@
 				<slot name="header"></slot>
 			</span>
 			<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="ti ti-check"></i></button>
+			<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="fas fa-check"></i></button>
 		</div>
 		<div class="body">
 			<slot :width="bodyWidth" :height="bodyHeight"></slot>
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 28896a936b..97eadb1945 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -15,7 +15,7 @@
 	<div v-if="appearNote._featuredId_" class="info"><i class="fas fa-bolt"></i> {{ i18n.ts.featured }}</div>
 	<div v-if="isRenote" class="renote">
 		<MkAvatar class="avatar" :user="note.user"/>
-		<i class="ti ti-repeat"></i>
+		<i class="fas fa-retweet"></i>
 		<I18n :src="i18n.ts.renotedBy" tag="span">
 			<template #user>
 				<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
@@ -25,7 +25,7 @@
 		</I18n>
 		<div class="info">
 			<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
-				<i v-if="isMyRenote" class="ti ti-dots dropdownIcon"></i>
+				<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
 				<MkTime :time="note.createdAt"/>
 			</button>
 			<MkVisibility :note="note"/>
@@ -44,7 +44,7 @@
 				<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
-						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
+						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<a v-if="appearNote.renote != null" class="rp">RN:</a>
 						<div v-if="translating || translation" class="translation">
@@ -73,19 +73,19 @@
 			<footer class="footer">
 				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 				<button class="button _button" @click="reply()">
-					<template v-if="appearNote.reply"><i class="ti ti-arrow-back-up-all"></i></template>
-					<template v-else><i class="ti ti-arrow-back-up"></i></template>
+					<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
+					<template v-else><i class="fas fa-reply"></i></template>
 					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
 				</button>
 				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
 				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
-					<i class="ti ti-plus"></i>
+					<i class="fas fa-plus"></i>
 				</button>
 				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-					<i class="ti ti-minus"></i>
+					<i class="fas fa-minus"></i>
 				</button>
 				<button ref="menuButton" class="button _button" @click="menu()">
-					<i class="ti ti-dots"></i>
+					<i class="fas fa-ellipsis-h"></i>
 				</button>
 			</footer>
 		</div>
@@ -256,7 +256,7 @@ function showRenoteMenu(viaKeyboard = false): void {
 	if (!isMyRenote) return;
 	os.popupMenu([{
 		text: i18n.ts.unrenote,
-		icon: 'ti ti-trash',
+		icon: 'fas fa-trash-alt',
 		danger: true,
 		action: () => {
 			os.api('notes/delete', {
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 8bef4aad43..0ba93bbd76 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -13,7 +13,7 @@
 	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
 	<div v-if="isRenote" class="renote">
 		<MkAvatar class="avatar" :user="note.user"/>
-		<i class="ti ti-repeat"></i>
+		<i class="fas fa-retweet"></i>
 		<I18n :src="i18n.ts.renotedBy" tag="span">
 			<template #user>
 				<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
@@ -23,7 +23,7 @@
 		</I18n>
 		<div class="info">
 			<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
-				<i v-if="isMyRenote" class="ti ti-dots dropdownIcon"></i>
+				<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
 				<MkTime :time="note.createdAt"/>
 			</button>
 			<MkVisibility :note="note"/>
@@ -55,7 +55,7 @@
 				<div v-show="appearNote.cw == null || showContent" class="content">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
-						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
+						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<a v-if="appearNote.renote != null" class="rp">RN:</a>
 						<div v-if="translating || translation" class="translation">
@@ -83,19 +83,19 @@
 				</div>
 				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 				<button class="button _button" @click="reply()">
-					<template v-if="appearNote.reply"><i class="ti ti-arrow-back-up-all"></i></template>
-					<template v-else><i class="ti ti-arrow-back-up"></i></template>
+					<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
+					<template v-else><i class="fas fa-reply"></i></template>
 					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
 				</button>
 				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
 				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
-					<i class="ti ti-plus"></i>
+					<i class="fas fa-plus"></i>
 				</button>
 				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-					<i class="ti ti-minus"></i>
+					<i class="fas fa-minus"></i>
 				</button>
 				<button ref="menuButton" class="button _button" @click="menu()">
-					<i class="ti ti-dots"></i>
+					<i class="fas fa-ellipsis-h"></i>
 				</button>
 			</footer>
 		</div>
@@ -259,7 +259,7 @@ function showRenoteMenu(viaKeyboard = false): void {
 	if (!isMyRenote) return;
 	os.popupMenu([{
 		text: i18n.ts.unrenote,
-		icon: 'ti ti-trash',
+		icon: 'fas fa-trash-alt',
 		danger: true,
 		action: () => {
 			os.api('notes/delete', {
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index a072630984..c00e9fbf42 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -5,12 +5,12 @@
 		<MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/>
 		<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
 		<div class="sub-icon" :class="notification.type">
-			<i v-if="notification.type === 'follow'" class="ti ti-plus"></i>
+			<i v-if="notification.type === 'follow'" class="fas fa-plus"></i>
 			<i v-else-if="notification.type === 'receiveFollowRequest'" class="fas fa-clock"></i>
-			<i v-else-if="notification.type === 'followRequestAccepted'" class="ti ti-check"></i>
+			<i v-else-if="notification.type === 'followRequestAccepted'" class="fas fa-check"></i>
 			<i v-else-if="notification.type === 'groupInvited'" class="fas fa-id-card-alt"></i>
-			<i v-else-if="notification.type === 'renote'" class="ti ti-repeat"></i>
-			<i v-else-if="notification.type === 'reply'" class="ti ti-arrow-back-up"></i>
+			<i v-else-if="notification.type === 'renote'" class="fas fa-retweet"></i>
+			<i v-else-if="notification.type === 'reply'" class="fas fa-reply"></i>
 			<i v-else-if="notification.type === 'mention'" class="fas fa-at"></i>
 			<i v-else-if="notification.type === 'quote'" class="fas fa-quote-left"></i>
 			<i v-else-if="notification.type === 'pollVote'" class="fas fa-poll-h"></i>
diff --git a/packages/client/src/components/MkPageWindow.vue b/packages/client/src/components/MkPageWindow.vue
index fc698f06b0..d58b914036 100644
--- a/packages/client/src/components/MkPageWindow.vue
+++ b/packages/client/src/components/MkPageWindow.vue
@@ -90,18 +90,18 @@ const contextmenu = $computed(() => ([{
 	text: i18n.ts.showInPage,
 	action: expand,
 }, {
-	icon: 'ti ti-external-link',
+	icon: 'fas fa-external-link-alt',
 	text: i18n.ts.popout,
 	action: popout,
 }, {
-	icon: 'ti ti-external-link',
+	icon: 'fas fa-external-link-alt',
 	text: i18n.ts.openInNewTab,
 	action: () => {
 		window.open(url + router.getCurrentPath(), '_blank');
 		windowEl.close();
 	},
 }, {
-	icon: 'ti ti-link',
+	icon: 'fas fa-link',
 	text: i18n.ts.copyLink,
 	action: () => {
 		copyToClipboard(url + router.getCurrentPath());
diff --git a/packages/client/src/components/MkPoll.vue b/packages/client/src/components/MkPoll.vue
index a1b927e42a..d90af1cfee 100644
--- a/packages/client/src/components/MkPoll.vue
+++ b/packages/client/src/components/MkPoll.vue
@@ -4,7 +4,7 @@
 		<li v-for="(choice, i) in note.poll.choices" :key="i" :class="{ voted: choice.voted }" @click="vote(i)">
 			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
 			<span>
-				<template v-if="choice.isVoted"><i class="ti ti-check"></i></template>
+				<template v-if="choice.isVoted"><i class="fas fa-check"></i></template>
 				<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
 				<span v-if="showResult" class="votes">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
 			</span>
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 8650afe83f..308dd63dd3 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -16,13 +16,13 @@
 			<span class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
 			<span v-if="localOnly" class="local-only"><i class="fas fa-biohazard"></i></span>
 			<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
-				<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
-				<span v-if="visibility === 'home'"><i class="ti ti-home-2"></i></span>
+				<span v-if="visibility === 'public'"><i class="fas fa-globe"></i></span>
+				<span v-if="visibility === 'home'"><i class="fas fa-home"></i></span>
 				<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
 				<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
 			</button>
 			<button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="fas fa-file-code"></i></button>
-			<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'ti ti-arrow-back-up' : renote ? 'fas fa-quote-right' : 'ti ti-send'"></i></button>
+			<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
 		</div>
 	</header>
 	<div class="form" :class="{ fixed }">
@@ -36,7 +36,7 @@
 					<MkAcct :user="u"/>
 					<button class="_button" @click="removeVisibleUser(u)"><i class="fas fa-times"></i></button>
 				</span>
-				<button class="_buttonPrimary" @click="addVisibleUser"><i class="ti ti-plus fa-fw"></i></button>
+				<button class="_buttonPrimary" @click="addVisibleUser"><i class="fas fa-plus fa-fw"></i></button>
 			</div>
 		</div>
 		<MkInfo v-if="hasNotSpecifiedMentions" warn class="hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
@@ -51,7 +51,7 @@
 			<button v-tooltip="i18n.ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="fas fa-poll-h"></i></button>
 			<button v-tooltip="i18n.ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="fas fa-eye-slash"></i></button>
 			<button v-tooltip="i18n.ts.mention" class="_button" @click="insertMention"><i class="fas fa-at"></i></button>
-			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
+			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="fas fa-hashtag"></i></button>
 			<button v-tooltip="i18n.ts.emoji" class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button>
 			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="fas fa-plug"></i></button>
 		</footer>
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index 811b9b08f4..413f3406a4 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -5,7 +5,7 @@
 	class="eddddedb _button canRenote"
 	@click="renote()"
 >
-	<i class="ti ti-repeat"></i>
+	<i class="fas fa-retweet"></i>
 	<p v-if="count > 0" class="count">{{ count }}</p>
 </button>
 <button v-else class="eddddedb _button">
@@ -54,7 +54,7 @@ const renote = (viaKeyboard = false) => {
 	pleaseLogin();
 	os.popupMenu([{
 		text: i18n.ts.renote,
-		icon: 'ti ti-repeat',
+		icon: 'fas fa-retweet',
 		action: () => {
 			os.api('notes/create', {
 				renoteId: props.note.id,
diff --git a/packages/client/src/components/MkSignup.vue b/packages/client/src/components/MkSignup.vue
index c115501b65..c1f91b18c2 100644
--- a/packages/client/src/components/MkSignup.vue
+++ b/packages/client/src/components/MkSignup.vue
@@ -10,7 +10,7 @@
 		<template #suffix>@{{ host }}</template>
 		<template #caption>
 			<span v-if="usernameState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ i18n.ts.checking }}</span>
-			<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="ti ti-check fa-fw"></i> {{ i18n.ts.available }}</span>
+			<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.available }}</span>
 			<span v-else-if="usernameState === 'unavailable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.unavailable }}</span>
 			<span v-else-if="usernameState === 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.error }}</span>
 			<span v-else-if="usernameState === 'invalid-format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.usernameInvalidFormat }}</span>
@@ -23,7 +23,7 @@
 		<template #prefix><i class="fas fa-envelope"></i></template>
 		<template #caption>
 			<span v-if="emailState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ i18n.ts.checking }}</span>
-			<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="ti ti-check fa-fw"></i> {{ i18n.ts.available }}</span>
+			<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.available }}</span>
 			<span v-else-if="emailState === 'unavailable:used'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts._emailUnavailable.used }}</span>
 			<span v-else-if="emailState === 'unavailable:format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts._emailUnavailable.format }}</span>
 			<span v-else-if="emailState === 'unavailable:disposable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts._emailUnavailable.disposable }}</span>
@@ -38,15 +38,15 @@
 		<template #prefix><i class="fas fa-lock"></i></template>
 		<template #caption>
 			<span v-if="passwordStrength == 'low'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.weakPassword }}</span>
-			<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="ti ti-check fa-fw"></i> {{ i18n.ts.normalPassword }}</span>
-			<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="ti ti-check fa-fw"></i> {{ i18n.ts.strongPassword }}</span>
+			<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.normalPassword }}</span>
+			<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.strongPassword }}</span>
 		</template>
 	</MkInput>
 	<MkInput v-model="retypedPassword" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
 		<template #label>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template>
 		<template #prefix><i class="fas fa-lock"></i></template>
 		<template #caption>
-			<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="ti ti-check fa-fw"></i> {{ i18n.ts.passwordMatched }}</span>
+			<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.passwordMatched }}</span>
 			<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.passwordNotMatched }}</span>
 		</template>
 	</MkInput>
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index 210923be46..237f4cf228 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -3,7 +3,7 @@
 	<div class="body">
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
-		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
+		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
 		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 	</div>
diff --git a/packages/client/src/components/MkVisibility.vue b/packages/client/src/components/MkVisibility.vue
index 6def2022a0..ca1f9a6cd8 100644
--- a/packages/client/src/components/MkVisibility.vue
+++ b/packages/client/src/components/MkVisibility.vue
@@ -1,6 +1,6 @@
 <template>
 <span v-if="note.visibility !== 'public'" :class="$style.visibility" :title="i18n.ts._visibility[note.visibility]">
-	<i v-if="note.visibility === 'home'" class="ti ti-home-2"></i>
+	<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
 	<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
 	<i v-else-if="note.visibility === 'specified'" ref="specified" class="fas fa-envelope"></i>
 </span>
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index 9e0e338c06..ecc022eca0 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -2,14 +2,14 @@
 <MkModal ref="modal" :z-priority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
 	<div class="gqyayizv _popup">
 		<button key="public" class="_button" :class="{ active: v === 'public' }" data-index="1" @click="choose('public')">
-			<div><i class="ti ti-world"></i></div>
+			<div><i class="fas fa-globe"></i></div>
 			<div>
 				<span>{{ i18n.ts._visibility.public }}</span>
 				<span>{{ i18n.ts._visibility.publicDescription }}</span>
 			</div>
 		</button>
 		<button key="home" class="_button" :class="{ active: v === 'home' }" data-index="2" @click="choose('home')">
-			<div><i class="ti ti-home-2"></i></div>
+			<div><i class="fas fa-home"></i></div>
 			<div>
 				<span>{{ i18n.ts._visibility.home }}</span>
 				<span>{{ i18n.ts._visibility.homeDescription }}</span>
diff --git a/packages/client/src/components/MkWaitingDialog.vue b/packages/client/src/components/MkWaitingDialog.vue
index ee86aec967..77b664d3b1 100644
--- a/packages/client/src/components/MkWaitingDialog.vue
+++ b/packages/client/src/components/MkWaitingDialog.vue
@@ -1,7 +1,7 @@
 <template>
 <MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="emit('closed')">
 	<div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
-		<i v-if="success" class="ti ti-check icon success"></i>
+		<i v-if="success" class="fas fa-check icon success"></i>
 		<i v-else class="fas fa-spinner fa-pulse icon waiting"></i>
 		<div v-if="text && !success" class="text">{{ text }}<MkEllipsis/></div>
 	</div>
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index 31b787b5bb..fcb0d11af4 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -6,7 +6,7 @@
 				<template #label>{{ i18n.ts.selectWidget }}</template>
 				<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
 			</MkSelect>
-			<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+			<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton>
 			<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
 		</header>
 		<XDraggable
@@ -17,7 +17,7 @@
 		>
 			<template #item="{element}">
 				<div class="customize-container">
-					<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button>
+					<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="fas fa-cog"></i></button>
 					<button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="fas fa-times"></i></button>
 					<div class="handle">
 						<component :is="`mkw-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
@@ -104,7 +104,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 		type: 'label',
 		text: i18n.t(`_widgets.${widget.name}`),
 	}, {
-		icon: 'ti ti-settings',
+		icon: 'fas fa-cog',
 		text: i18n.ts.settings,
 		action: () => {
 			configWidget(widget.id);
diff --git a/packages/client/src/components/form/checkbox.vue b/packages/client/src/components/form/checkbox.vue
index ba3b2dc146..bd56c9c7ea 100644
--- a/packages/client/src/components/form/checkbox.vue
+++ b/packages/client/src/components/form/checkbox.vue
@@ -10,7 +10,7 @@
 		@keydown.enter="toggle"
 	>
 	<span ref="button" v-adaptive-border v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
-		<i class="check ti ti-check"></i>
+		<i class="check fas fa-check"></i>
 	</span>
 	<span class="label">
 		<!-- TODO: 無名slotの方は廃止 -->
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index 939e9691a6..382b2ed528 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -29,7 +29,7 @@
 	</div>
 	<div class="caption"><slot name="caption"></slot></div>
 
-	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
+	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="fas fa-check"></i> {{ i18n.ts.save }}</MkButton>
 </div>
 </template>
 
diff --git a/packages/client/src/components/form/link.vue b/packages/client/src/components/form/link.vue
index 8048329f5a..899394cb62 100644
--- a/packages/client/src/components/form/link.vue
+++ b/packages/client/src/components/form/link.vue
@@ -5,7 +5,7 @@
 		<span class="text"><slot></slot></span>
 		<span class="right">
 			<span class="text"><slot name="suffix"></slot></span>
-			<i class="ti ti-external-link icon"></i>
+			<i class="fas fa-external-link-alt icon"></i>
 		</span>
 	</a>
 	<MkA v-else class="main _button" :class="{ active }" :to="to" :behavior="behavior">
diff --git a/packages/client/src/components/global/MkA.vue b/packages/client/src/components/global/MkA.vue
index 287983520e..67bf54def8 100644
--- a/packages/client/src/components/global/MkA.vue
+++ b/packages/client/src/components/global/MkA.vue
@@ -53,13 +53,13 @@ function onContextmenu(ev) {
 			router.push(props.to, 'forcePage');
 		},
 	}, null, {
-		icon: 'ti ti-external-link',
+		icon: 'fas fa-external-link-alt',
 		text: i18n.ts.openInNewTab,
 		action: () => {
 			window.open(props.to, '_blank');
 		},
 	}, {
-		icon: 'ti ti-link',
+		icon: 'fas fa-link',
 		text: i18n.ts.copyLink,
 		action: () => {
 			copyToClipboard(`${url}${props.to}`);
diff --git a/packages/client/src/components/page/page.post.vue b/packages/client/src/components/page/page.post.vue
index 0ef50d65cd..954c7675bd 100644
--- a/packages/client/src/components/page/page.post.vue
+++ b/packages/client/src/components/page/page.post.vue
@@ -2,8 +2,8 @@
 <div class="ngbfujlo">
 	<MkTextarea :model-value="text" readonly style="margin: 0;"></MkTextarea>
 	<MkButton class="button" primary :disabled="posting || posted" @click="post()">
-		<i v-if="posted" class="ti ti-check"></i>
-		<i v-else class="ti ti-send"></i>
+		<i v-if="posted" class="fas fa-check"></i>
+		<i v-else class="fas fa-paper-plane"></i>
 	</MkButton>
 </div>
 </template>
diff --git a/packages/client/src/navbar.ts b/packages/client/src/navbar.ts
index f090012d1a..03e00b1c17 100644
--- a/packages/client/src/navbar.ts
+++ b/packages/client/src/navbar.ts
@@ -9,21 +9,21 @@ import { unisonReload } from '@/scripts/unison-reload';
 export const navbarItemDef = reactive({
 	notifications: {
 		title: 'notifications',
-		icon: 'ti ti-bell',
+		icon: 'fas fa-bell',
 		show: computed(() => $i != null),
 		indicated: computed(() => $i != null && $i.hasUnreadNotification),
 		to: '/my/notifications',
 	},
 	messaging: {
 		title: 'messaging',
-		icon: 'ti ti-messages',
+		icon: 'fas fa-comments',
 		show: computed(() => $i != null),
 		indicated: computed(() => $i != null && $i.hasUnreadMessagingMessage),
 		to: '/my/messaging',
 	},
 	drive: {
 		title: 'drive',
-		icon: 'ti ti-cloud',
+		icon: 'fas fa-cloud',
 		show: computed(() => $i != null),
 		to: '/my/drive',
 	},
@@ -36,7 +36,7 @@ export const navbarItemDef = reactive({
 	},
 	explore: {
 		title: 'explore',
-		icon: 'ti ti-hash',
+		icon: 'fas fa-hashtag',
 		to: '/explore',
 	},
 	announcements: {
@@ -47,7 +47,7 @@ export const navbarItemDef = reactive({
 	},
 	search: {
 		title: 'search',
-		icon: 'ti ti-search',
+		icon: 'fas fa-search',
 		action: () => search(),
 	},
 	lists: {
@@ -72,7 +72,7 @@ export const navbarItemDef = reactive({
 	},
 	favorites: {
 		title: 'favorites',
-		icon: 'ti ti-star',
+		icon: 'fas fa-star',
 		show: computed(() => $i != null),
 		to: '/my/favorites',
 	},
@@ -88,7 +88,7 @@ export const navbarItemDef = reactive({
 	},
 	clips: {
 		title: 'clip',
-		icon: 'ti ti-paperclip',
+		icon: 'fas fa-paperclip',
 		show: computed(() => $i != null),
 		to: '/my/clips',
 	},
diff --git a/packages/client/src/pages/about-misskey.vue b/packages/client/src/pages/about-misskey.vue
index 0b73580345..7bcccea98f 100644
--- a/packages/client/src/pages/about-misskey.vue
+++ b/packages/client/src/pages/about-misskey.vue
@@ -25,7 +25,7 @@
 							<template #suffix>GitHub</template>
 						</FormLink>
 						<FormLink to="https://crowdin.com/project/misskey" external>
-							<template #icon><i class="ti ti-language-hiragana"></i></template>
+							<template #icon><i class="fas fa-language"></i></template>
 							{{ i18n.ts._aboutMisskey.translation }}
 							<template #suffix>Crowdin</template>
 						</FormLink>
diff --git a/packages/client/src/pages/about.emojis.vue b/packages/client/src/pages/about.emojis.vue
index 53ce1e4b75..df64378c01 100644
--- a/packages/client/src/pages/about.emojis.vue
+++ b/packages/client/src/pages/about.emojis.vue
@@ -2,7 +2,7 @@
 <div class="driuhtrh">
 	<div class="query">
 		<MkInput v-model="q" class="" :placeholder="$ts.search">
-			<template #prefix><i class="ti ti-search"></i></template>
+			<template #prefix><i class="fas fa-search"></i></template>
 		</MkInput>
 
 		<!-- たくさんあると邪魔
diff --git a/packages/client/src/pages/about.federation.vue b/packages/client/src/pages/about.federation.vue
index 6c92ab1264..c501a77582 100644
--- a/packages/client/src/pages/about.federation.vue
+++ b/packages/client/src/pages/about.federation.vue
@@ -2,7 +2,7 @@
 <div class="taeiyria">
 	<div class="query">
 		<MkInput v-model="host" :debounce="true" class="">
-			<template #prefix><i class="ti ti-search"></i></template>
+			<template #prefix><i class="fas fa-search"></i></template>
 			<template #label>{{ i18n.ts.host }}</template>
 		</MkInput>
 		<FormSplit style="margin-top: var(--margin);">
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index d8c3559ee9..d124db55a7 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -123,7 +123,7 @@ const headerTabs = $computed(() => [{
 }, {
 	key: 'federation',
 	title: i18n.ts.federation,
-	icon: 'ti ti-world',
+	icon: 'fas fa-globe',
 }, {
 	key: 'charts',
 	title: i18n.ts.charts,
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index b53a09143a..a62e0f630f 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -36,7 +36,7 @@
 			</div>
 
 			<div class="_formBlock">
-				<MkButton danger @click="del"><i class="ti ti-trash"></i> {{ i18n.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 === 'ip' && info" class="_formRoot">
@@ -114,7 +114,7 @@ async function toggleIsSensitive(v) {
 
 const headerActions = $computed(() => [{
 	text: i18n.ts.openInNewTab,
-	icon: 'ti ti-external-link',
+	icon: 'fas fa-external-link-alt',
 	handler: () => {
 		window.open(file.url, '_blank');
 	},
diff --git a/packages/client/src/pages/admin/abuses.vue b/packages/client/src/pages/admin/abuses.vue
index 973ec871ab..9907d4d235 100644
--- a/packages/client/src/pages/admin/abuses.vue
+++ b/packages/client/src/pages/admin/abuses.vue
@@ -86,7 +86,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.abuseReports,
-	icon: 'ti ti-exclamation-circle',
+	icon: 'fas fa-exclamation-circle',
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/ads.vue b/packages/client/src/pages/admin/ads.vue
index 48ab3abb9f..9a28d2ad61 100644
--- a/packages/client/src/pages/admin/ads.vue
+++ b/packages/client/src/pages/admin/ads.vue
@@ -38,7 +38,7 @@
 				</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="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
+					<MkButton class="button" inline danger @click="remove(ad)"><i class="fas fa-trash-alt"></i> {{ i18n.ts.remove }}</MkButton>
 				</div>
 			</div>
 		</div>
@@ -106,7 +106,7 @@ function save(ad) {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'ti ti-plus',
+	icon: 'fas fa-plus',
 	text: i18n.ts.add,
 	handler: add,
 }]);
diff --git a/packages/client/src/pages/admin/announcements.vue b/packages/client/src/pages/admin/announcements.vue
index 764cbaeaa5..f10693314a 100644
--- a/packages/client/src/pages/admin/announcements.vue
+++ b/packages/client/src/pages/admin/announcements.vue
@@ -17,7 +17,7 @@
 					<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="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
+						<MkButton class="button" inline @click="remove(announcement)"><i class="fas fa-trash-alt"></i> {{ i18n.ts.remove }}</MkButton>
 					</div>
 				</div>
 			</section>
@@ -92,7 +92,7 @@ function save(announcement) {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'ti ti-plus',
+	icon: 'fas fa-plus',
 	text: i18n.ts.add,
 	handler: add,
 }]);
diff --git a/packages/client/src/pages/admin/email-settings.vue b/packages/client/src/pages/admin/email-settings.vue
index 605112242f..64137f0c3e 100644
--- a/packages/client/src/pages/admin/email-settings.vue
+++ b/packages/client/src/pages/admin/email-settings.vue
@@ -112,7 +112,7 @@ const headerActions = $computed(() => [{
 	handler: testEmail,
 }, {
 	asFullButton: true,
-	icon: 'ti ti-check',
+	icon: 'fas fa-check',
 	text: i18n.ts.save,
 	handler: save,
 }]);
diff --git a/packages/client/src/pages/admin/emoji-edit-dialog.vue b/packages/client/src/pages/admin/emoji-edit-dialog.vue
index bd601cb1de..090dd9afc1 100644
--- a/packages/client/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/client/src/pages/admin/emoji-edit-dialog.vue
@@ -22,7 +22,7 @@
 				<template #label>{{ i18n.ts.tags }}</template>
 				<template #caption>{{ i18n.ts.setMultipleBySeparatingWithSpace }}</template>
 			</MkInput>
-			<MkButton danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
+			<MkButton danger @click="del()"><i class="fas fa-trash-alt"></i> {{ i18n.ts.delete }}</MkButton>
 		</div>
 	</div>
 </XModalWindow>
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index 790f14af91..94f152d7db 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -6,7 +6,7 @@
 			<div class="ogwlenmc">
 				<div v-if="tab === 'local'" class="local">
 					<MkInput v-model="query" :debounce="true" type="search">
-						<template #prefix><i class="ti ti-search"></i></template>
+						<template #prefix><i class="fas fa-search"></i></template>
 						<template #label>{{ i18n.ts.search }}</template>
 					</MkInput>
 					<MkSwitch v-model="selectMode" style="margin: 8px 0;">
@@ -39,7 +39,7 @@
 				<div v-else-if="tab === 'remote'" class="remote">
 					<FormSplit>
 						<MkInput v-model="queryRemote" :debounce="true" type="search">
-							<template #prefix><i class="ti ti-search"></i></template>
+							<template #prefix><i class="fas fa-search"></i></template>
 							<template #label>{{ i18n.ts.search }}</template>
 						</MkInput>
 						<MkInput v-model="host" :debounce="true">
@@ -164,7 +164,7 @@ const remoteMenu = (emoji, ev: MouseEvent) => {
 		text: ':' + emoji.name + ':',
 	}, {
 		text: i18n.ts.import,
-		icon: 'ti ti-plus',
+		icon: 'fas fa-plus',
 		action: () => { im(emoji); },
 	}], ev.currentTarget ?? ev.target);
 };
@@ -273,11 +273,11 @@ const delBulk = async () => {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'ti ti-plus',
+	icon: 'fas fa-plus',
 	text: i18n.ts.addEmoji,
 	handler: add,
 }, {
-	icon: 'ti ti-dots',
+	icon: 'fas fa-ellipsis-h',
 	handler: menu,
 }]);
 
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
index 8ad6bd4fc0..2e3a807ba6 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -97,11 +97,11 @@ async function find() {
 
 const headerActions = $computed(() => [{
 	text: i18n.ts.lookup,
-	icon: 'ti ti-search',
+	icon: 'fas fa-search',
 	handler: find,
 }, {
 	text: i18n.ts.clearCachedFiles,
-	icon: 'ti ti-trash',
+	icon: 'fas fa-trash-alt',
 	handler: clear,
 }]);
 
@@ -109,7 +109,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.files,
-	icon: 'ti ti-cloud',
+	icon: 'fas fa-cloud',
 })));
 </script>
 
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 9fd2b6bb0a..20f82bba28 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -40,7 +40,7 @@ const router = useRouter();
 
 const indexInfo = {
 	title: i18n.ts.controlPanel,
-	icon: 'ti ti-settings',
+	icon: 'fas fa-cog',
 	hideHeader: true,
 };
 
@@ -75,7 +75,7 @@ const menuDef = $computed(() => [{
 	title: i18n.ts.quickAction,
 	items: [{
 		type: 'button',
-		icon: 'ti ti-search',
+		icon: 'fas fa-search',
 		text: i18n.ts.lookup,
 		action: lookup,
 	}, ...(instance.disableRegistration ? [{
@@ -102,7 +102,7 @@ const menuDef = $computed(() => [{
 		to: '/admin/emojis',
 		active: currentPage?.route.name === 'emojis',
 	}, {
-		icon: 'ti ti-world',
+		icon: 'fas fa-globe',
 		text: i18n.ts.federation,
 		to: '/about#federation',
 		active: currentPage?.route.name === 'federation',
@@ -112,7 +112,7 @@ const menuDef = $computed(() => [{
 		to: '/admin/queue',
 		active: currentPage?.route.name === 'queue',
 	}, {
-		icon: 'ti ti-cloud',
+		icon: 'fas fa-cloud',
 		text: i18n.ts.files,
 		to: '/admin/files',
 		active: currentPage?.route.name === 'files',
@@ -127,7 +127,7 @@ const menuDef = $computed(() => [{
 		to: '/admin/ads',
 		active: currentPage?.route.name === 'ads',
 	}, {
-		icon: 'ti ti-exclamation-circle',
+		icon: 'fas fa-exclamation-circle',
 		text: i18n.ts.abuseReports,
 		to: '/admin/abuses',
 		active: currentPage?.route.name === 'abuses',
@@ -135,7 +135,7 @@ const menuDef = $computed(() => [{
 }, {
 	title: i18n.ts.settings,
 	items: [{
-		icon: 'ti ti-settings',
+		icon: 'fas fa-cog',
 		text: i18n.ts.general,
 		to: '/admin/settings',
 		active: currentPage?.route.name === 'settings',
@@ -145,7 +145,7 @@ const menuDef = $computed(() => [{
 		to: '/admin/email-settings',
 		active: currentPage?.route.name === 'email-settings',
 	}, {
-		icon: 'ti ti-cloud',
+		icon: 'fas fa-cloud',
 		text: i18n.ts.objectStorage,
 		to: '/admin/object-storage',
 		active: currentPage?.route.name === 'object-storage',
@@ -155,12 +155,12 @@ const menuDef = $computed(() => [{
 		to: '/admin/security',
 		active: currentPage?.route.name === 'security',
 	}, {
-		icon: 'ti ti-world',
+		icon: 'fas fa-globe',
 		text: i18n.ts.relays,
 		to: '/admin/relays',
 		active: currentPage?.route.name === 'relays',
 	}, {
-		icon: 'ti ti-share',
+		icon: 'fas fa-share-alt',
 		text: i18n.ts.integration,
 		to: '/admin/integrations',
 		active: currentPage?.route.name === 'integrations',
@@ -175,7 +175,7 @@ const menuDef = $computed(() => [{
 		to: '/admin/proxy-account',
 		active: currentPage?.route.name === 'proxy-account',
 	}, {
-		icon: 'ti ti-adjustments',
+		icon: 'fas fa-cogs',
 		text: i18n.ts.other,
 		to: '/admin/other-settings',
 		active: currentPage?.route.name === 'other-settings',
@@ -246,13 +246,13 @@ const lookup = (ev) => {
 		},
 	}, {
 		text: i18n.ts.file,
-		icon: 'ti ti-cloud',
+		icon: 'fas fa-cloud',
 		action: () => {
 			alert('TODO');
 		},
 	}, {
 		text: i18n.ts.instance,
-		icon: 'ti ti-world',
+		icon: 'fas fa-globe',
 		action: () => {
 			alert('TODO');
 		},
diff --git a/packages/client/src/pages/admin/integrations.vue b/packages/client/src/pages/admin/integrations.vue
index d02fc48076..9964426a68 100644
--- a/packages/client/src/pages/admin/integrations.vue
+++ b/packages/client/src/pages/admin/integrations.vue
@@ -52,6 +52,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.integration,
-	icon: 'ti ti-share',
+	icon: 'fas fa-share-alt',
 });
 </script>
diff --git a/packages/client/src/pages/admin/object-storage.vue b/packages/client/src/pages/admin/object-storage.vue
index dded7aaf71..5cc3018532 100644
--- a/packages/client/src/pages/admin/object-storage.vue
+++ b/packages/client/src/pages/admin/object-storage.vue
@@ -134,7 +134,7 @@ function save() {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'ti ti-check',
+	icon: 'fas fa-check',
 	text: i18n.ts.save,
 	handler: save,
 }]);
@@ -143,6 +143,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.objectStorage,
-	icon: 'ti ti-cloud',
+	icon: 'fas fa-cloud',
 });
 </script>
diff --git a/packages/client/src/pages/admin/other-settings.vue b/packages/client/src/pages/admin/other-settings.vue
index 62dff6ce7f..ee4e8edba0 100644
--- a/packages/client/src/pages/admin/other-settings.vue
+++ b/packages/client/src/pages/admin/other-settings.vue
@@ -30,7 +30,7 @@ function save() {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'ti ti-check',
+	icon: 'fas fa-check',
 	text: i18n.ts.save,
 	handler: save,
 }]);
@@ -39,6 +39,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.other,
-	icon: 'ti ti-adjustments',
+	icon: 'fas fa-cogs',
 });
 </script>
diff --git a/packages/client/src/pages/admin/relays.vue b/packages/client/src/pages/admin/relays.vue
index 7f9e0c108e..e6f7f4ead1 100644
--- a/packages/client/src/pages/admin/relays.vue
+++ b/packages/client/src/pages/admin/relays.vue
@@ -5,12 +5,12 @@
 		<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="ti ti-check icon accepted"></i>
+				<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="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
+			<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="fas fa-trash-alt"></i> {{ i18n.ts.remove }}</MkButton>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
@@ -68,7 +68,7 @@ refresh();
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'ti ti-plus',
+	icon: 'fas fa-plus',
 	text: i18n.ts.addRelay,
 	handler: addRelay,
 }]);
@@ -77,7 +77,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.relays,
-	icon: 'ti ti-world',
+	icon: 'fas fa-globe',
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue
index 5594c479ff..65d079c2cf 100644
--- a/packages/client/src/pages/admin/security.vue
+++ b/packages/client/src/pages/admin/security.vue
@@ -88,7 +88,7 @@
 
 					<div class="_formRoot">
 						<FormInput v-model="summalyProxy" class="_formBlock">
-							<template #prefix><i class="ti ti-link"></i></template>
+							<template #prefix><i class="fas fa-link"></i></template>
 							<template #label>Summaly Proxy URL</template>
 						</FormInput>
 
diff --git a/packages/client/src/pages/admin/settings.vue b/packages/client/src/pages/admin/settings.vue
index fe3994b030..cf6b1f17e9 100644
--- a/packages/client/src/pages/admin/settings.vue
+++ b/packages/client/src/pages/admin/settings.vue
@@ -14,7 +14,7 @@
 					</FormTextarea>
 
 					<FormInput v-model="tosUrl" class="_formBlock">
-						<template #prefix><i class="ti ti-link"></i></template>
+						<template #prefix><i class="fas fa-link"></i></template>
 						<template #label>{{ i18n.ts.tosUrl }}</template>
 					</FormInput>
 
@@ -54,17 +54,17 @@
 						<template #label>{{ i18n.ts.theme }}</template>
 
 						<FormInput v-model="iconUrl" class="_formBlock">
-							<template #prefix><i class="ti ti-link"></i></template>
+							<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="ti ti-link"></i></template>
+							<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="ti ti-link"></i></template>
+							<template #prefix><i class="fas fa-link"></i></template>
 							<template #label>{{ i18n.ts.backgroundImageUrl }}</template>
 						</FormInput>
 
@@ -248,7 +248,7 @@ function save() {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'ti ti-check',
+	icon: 'fas fa-check',
 	text: i18n.ts.save,
 	handler: save,
 }]);
@@ -257,6 +257,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.general,
-	icon: 'ti ti-settings',
+	icon: 'fas fa-cog',
 });
 </script>
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index e2ba8ac494..eeb335a430 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -115,17 +115,17 @@ function show(user) {
 }
 
 const headerActions = $computed(() => [{
-	icon: 'ti ti-search',
+	icon: 'fas fa-search',
 	text: i18n.ts.search,
 	handler: searchUser,
 }, {
 	asFullButton: true,
-	icon: 'ti ti-plus',
+	icon: 'fas fa-plus',
 	text: i18n.ts.addUser,
 	handler: addUser,
 }, {
 	asFullButton: true,
-	icon: 'ti ti-search',
+	icon: 'fas fa-search',
 	text: i18n.ts.lookup,
 	handler: lookupUser,
 }]);
diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
index f2b07c1d12..5f66596997 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -10,7 +10,7 @@
 					<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="ti ti-check"></i> {{ $ts.gotIt }}</MkButton>
+					<MkButton primary @click="read(items, announcement, i)"><i class="fas fa-check"></i> {{ $ts.gotIt }}</MkButton>
 				</div>
 			</section>
 		</MkPagination>
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index 7624c56aea..500cb3a7c5 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -76,7 +76,7 @@ const headerActions = $computed(() => antenna ? [{
 	text: i18n.ts.jumpToSpecifiedDate,
 	handler: timetravel,
 }, {
-	icon: 'ti ti-settings',
+	icon: 'fas fa-cog',
 	text: i18n.ts.settings,
 	handler: settings,
 }] : []);
diff --git a/packages/client/src/pages/api-console.vue b/packages/client/src/pages/api-console.vue
index da694e103f..0064e4c3f1 100644
--- a/packages/client/src/pages/api-console.vue
+++ b/packages/client/src/pages/api-console.vue
@@ -15,7 +15,7 @@
 				</MkSwitch>
 				<MkButton class="_formBlock" primary :disabled="sending" @click="send">
 					<template v-if="sending"><MkEllipsis/></template>
-					<template v-else><i class="ti ti-send"></i> Send</template>
+					<template v-else><i class="fas fa-paper-plane"></i> Send</template>
 				</MkButton>
 			</div>
 			<div v-if="res" class="_formBlock">
diff --git a/packages/client/src/pages/channel-editor.vue b/packages/client/src/pages/channel-editor.vue
index 5d5aa2f9e9..3e94b5f041 100644
--- a/packages/client/src/pages/channel-editor.vue
+++ b/packages/client/src/pages/channel-editor.vue
@@ -12,10 +12,10 @@
 			</MkTextarea>
 
 			<div class="banner">
-				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="ti ti-plus"></i> {{ i18n.ts._channel.setBanner }}</MkButton>
+				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ i18n.ts._channel.setBanner }}</MkButton>
 				<div v-else-if="bannerUrl">
 					<img :src="bannerUrl" style="width: 100%;"/>
-					<MkButton @click="removeBannerImage()"><i class="ti ti-trash"></i> {{ i18n.ts._channel.removeBanner }}</MkButton>
+					<MkButton @click="removeBannerImage()"><i class="fas fa-trash-alt"></i> {{ i18n.ts._channel.removeBanner }}</MkButton>
 				</div>
 			</div>
 			<div class="_formBlock">
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index 4629547554..380c3efc8e 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -70,7 +70,7 @@ function edit() {
 }
 
 const headerActions = $computed(() => channel && channel.userId ? [{
-	icon: 'ti ti-settings',
+	icon: 'fas fa-cog',
 	text: i18n.ts.edit,
 	handler: edit,
 }] : null);
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index 8f67e454f0..56ea98d15e 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -13,7 +13,7 @@
 			</MkPagination>
 		</div>
 		<div v-else-if="tab === 'owned'" class="_content grwlizim owned">
-			<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
+			<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>
@@ -53,7 +53,7 @@ function create() {
 }
 
 const headerActions = $computed(() => [{
-	icon: 'ti ti-plus',
+	icon: 'fas fa-plus',
 	text: i18n.ts.create,
 	handler: create,
 }]);
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index b39a766f93..5b56651bdd 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -83,7 +83,7 @@ const headerActions = $computed(() => clip && isOwned ? [{
 		});
 	},
 }, {
-	icon: 'ti ti-trash',
+	icon: 'fas fa-trash-alt',
 	text: i18n.ts.delete,
 	danger: true,
 	handler: async (): Promise<void> => {
@@ -101,7 +101,7 @@ const headerActions = $computed(() => clip && isOwned ? [{
 
 definePageMetadata(computed(() => clip ? {
 	title: clip.name,
-	icon: 'ti ti-paperclip',
+	icon: 'fas fa-paperclip',
 } : null));
 </script>
 
diff --git a/packages/client/src/pages/drive.vue b/packages/client/src/pages/drive.vue
index 04ade5c207..088f0eacdc 100644
--- a/packages/client/src/pages/drive.vue
+++ b/packages/client/src/pages/drive.vue
@@ -19,7 +19,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
 	title: folder ? folder.name : i18n.ts.drive,
-	icon: 'ti ti-cloud',
+	icon: 'fas fa-cloud',
 	hideHeader: true,
 })));
 </script>
diff --git a/packages/client/src/pages/emojis.emoji.vue b/packages/client/src/pages/emojis.emoji.vue
index 04bf4ef167..b2801694db 100644
--- a/packages/client/src/pages/emojis.emoji.vue
+++ b/packages/client/src/pages/emojis.emoji.vue
@@ -24,7 +24,7 @@ function menu(ev) {
 		text: ':' + props.emoji.name + ':',
 	}, {
 		text: i18n.ts.copy,
-		icon: 'ti ti-copy',
+		icon: 'fas fa-copy',
 		action: () => {
 			copyToClipboard(`:${props.emoji.name}:`);
 			os.success();
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index 4f4f8eb12c..e16e40b8ed 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -19,14 +19,14 @@
 				<XUserList :pagination="recentlyUpdatedUsers"/>
 			</MkFolder>
 			<MkFolder class="_gap" persist-key="explore-recently-registered-users">
-				<template #header><i class="ti ti-plus fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
+				<template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
 				<XUserList :pagination="recentlyRegisteredUsers"/>
 			</MkFolder>
 		</template>
 	</div>
 	<div v-else>
 		<MkFolder ref="tagsEl" :foldable="true" :expanded="false" class="_gap">
-			<template #header><i class="ti ti-hash fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularTags }}</template>
+			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularTags }}</template>
 
 			<div class="vxjfqztj">
 				<MkA v-for="tag in tagsLocal" :key="'local:' + tag.tag" :to="`/explore/tags/${tag.tag}`" class="local">{{ tag.tag }}</MkA>
@@ -35,7 +35,7 @@
 		</MkFolder>
 
 		<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
-			<template #header><i class="ti ti-hash fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
+			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
 			<XUserList :pagination="tagUsers"/>
 		</MkFolder>
 
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index 7e4f80dcbe..279960d139 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -12,7 +12,7 @@
 			<MkSpacer :content-max="1200">
 				<div>
 					<MkInput v-model="searchQuery" :debounce="true" type="search" class="_formBlock">
-						<template #prefix><i class="ti ti-search"></i></template>
+						<template #prefix><i class="fas fa-search"></i></template>
 						<template #label>{{ i18n.ts.searchUser }}</template>
 					</MkInput>
 					<MkRadios v-model="searchOrigin" class="_formBlock">
@@ -82,6 +82,6 @@ const headerTabs = $computed(() => [{
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.explore,
-	icon: 'ti ti-hash',
+	icon: 'fas fa-hashtag',
 })));
 </script>
diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue
index ab47efec71..32a1dbf592 100644
--- a/packages/client/src/pages/favorites.vue
+++ b/packages/client/src/pages/favorites.vue
@@ -37,7 +37,7 @@ const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
 definePageMetadata({
 	title: i18n.ts.favorites,
-	icon: 'ti ti-star',
+	icon: 'fas fa-star',
 });
 </script>
 
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index c14131c4c8..82d7164260 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -22,7 +22,7 @@
 								<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
 							</div>
 							<div class="actions">
-								<button class="_button" @click="accept(req.follower)"><i class="ti ti-check"></i></button>
+								<button class="_button" @click="accept(req.follower)"><i class="fas fa-check"></i></button>
 								<button class="_button" @click="reject(req.follower)"><i class="fas fa-times"></i></button>
 							</div>
 						</div>
diff --git a/packages/client/src/pages/gallery/edit.vue b/packages/client/src/pages/gallery/edit.vue
index 7e98f751f2..8f716d9eb3 100644
--- a/packages/client/src/pages/gallery/edit.vue
+++ b/packages/client/src/pages/gallery/edit.vue
@@ -16,7 +16,7 @@
 					<div class="name">{{ file.name }}</div>
 					<button v-tooltip="i18n.ts.remove" class="remove _button" @click="remove(file)"><i class="fas fa-times"></i></button>
 				</div>
-				<FormButton primary @click="selectFile"><i class="ti ti-plus"></i> {{ i18n.ts.attachFile }}</FormButton>
+				<FormButton primary @click="selectFile"><i class="fas fa-plus"></i> {{ i18n.ts.attachFile }}</FormButton>
 			</div>
 
 			<FormSwitch v-model="isSensitive">{{ i18n.ts.markAsSensitive }}</FormSwitch>
@@ -24,7 +24,7 @@
 			<FormButton v-if="postId" primary @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
 			<FormButton v-else primary @click="save"><i class="fas fa-save"></i> {{ i18n.ts.publish }}</FormButton>
 
-			<FormButton v-if="postId" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</FormButton>
+			<FormButton v-if="postId" danger @click="del"><i class="fas fa-trash-alt"></i> {{ i18n.ts.delete }}</FormButton>
 		</FormSuspense>
 	</MkSpacer>
 </MkStickyContainer>
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index 5bf13cd474..598383217e 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -29,7 +29,7 @@
 				</MkPagination>
 			</div>
 			<div v-else-if="tab === 'my'">
-				<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="ti ti-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
+				<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
 				<MkPagination v-slot="{items}" :pagination="myPostsPagination">
 					<div class="vfpdbgtk">
 						<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
@@ -98,7 +98,7 @@ watch(() => props.tag, () => {
 });
 
 const headerActions = $computed(() => [{
-	icon: 'ti ti-plus',
+	icon: 'fas fa-plus',
 	text: i18n.ts.create,
 	handler: () => {
 		router.push('/gallery/new');
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 0867ea04e7..3804bcdcf5 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -23,8 +23,8 @@
 							</div>
 							<div class="other">
 								<button v-if="$i && $i.id === post.user.id" v-tooltip="i18n.ts.edit" v-click-anime class="_button" @click="edit"><i class="fas fa-pencil-alt fa-fw"></i></button>
-								<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ti ti-repeat fa-fw"></i></button>
-								<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="ti ti-share fa-fw"></i></button>
+								<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
+								<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
 							</div>
 						</div>
 						<div class="user">
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index 01a89b9731..6e13da0d68 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -195,7 +195,7 @@ fetch();
 
 const headerActions = $computed(() => [{
 	text: `https://${props.host}`,
-	icon: 'ti ti-external-link',
+	icon: 'fas fa-external-link-alt',
 	handler: () => {
 		window.open(`https://${props.host}`, '_blank');
 	},
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index e05fa1785f..56d852fe3d 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -3,7 +3,7 @@
 	<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="ti ti-plus"></i> {{ $ts.startMessaging }}</MkButton>
+			<MkButton primary class="start" @click="start"><i class="fas fa-plus"></i> {{ $ts.startMessaging }}</MkButton>
 
 			<div v-if="messages.length > 0" class="history">
 				<MkA
@@ -158,7 +158,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.messaging,
-	icon: 'ti ti-messages',
+	icon: 'fas fa-comments',
 });
 </script>
 
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index ba377b85d1..4589069df0 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -18,7 +18,7 @@
 			<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="ti ti-send"></i></template><template v-if="sending"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>
+				<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>
diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue
index 71de574a15..dc73ba674e 100644
--- a/packages/client/src/pages/my-antennas/index.vue
+++ b/packages/client/src/pages/my-antennas/index.vue
@@ -2,7 +2,7 @@
 	<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="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+		<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton>
 
 		<div class="">
 			<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
diff --git a/packages/client/src/pages/my-clips/index.vue b/packages/client/src/pages/my-clips/index.vue
index dd6b5b3a37..68330d6db4 100644
--- a/packages/client/src/pages/my-clips/index.vue
+++ b/packages/client/src/pages/my-clips/index.vue
@@ -3,7 +3,7 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
 		<div class="qtcaoidl">
-			<MkButton primary class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+			<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton>
 
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="list">
 				<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
@@ -70,9 +70,9 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.clip,
-	icon: 'ti ti-paperclip',
+	icon: 'fas fa-paperclip',
 	action: {
-		icon: 'ti ti-plus',
+		icon: 'fas fa-plus',
 		handler: create,
 	},
 });
diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue
index 0ecd594e68..9af7c0d105 100644
--- a/packages/client/src/pages/my-lists/index.vue
+++ b/packages/client/src/pages/my-lists/index.vue
@@ -3,7 +3,7 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
 		<div class="qkcjvfiv">
-			<MkButton primary class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton>
+			<MkButton primary class="add" @click="create"><i class="fas fa-plus"></i> {{ i18n.ts.createList }}</MkButton>
 
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists _content">
 				<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
@@ -49,7 +49,7 @@ definePageMetadata({
 	title: i18n.ts.manageLists,
 	icon: 'fas fa-list-ul',
 	action: {
-		icon: 'ti ti-plus',
+		icon: 'fas fa-plus',
 		handler: create,
 	},
 });
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index 01257f63d6..dd57060fda 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -66,7 +66,7 @@ const headerActions = $computed(() => [tab === 'all' ? {
 	handler: setFilter,
 } : undefined, tab === 'all' ? {
 	text: i18n.ts.markAllAsRead,
-	icon: 'ti ti-check',
+	icon: 'fas fa-check',
 	handler: () => {
 		os.apiWithDialog('notifications/mark-all-as-read');
 	},
@@ -90,6 +90,6 @@ const headerTabs = $computed(() => [{
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.notifications,
-	icon: 'ti ti-bell',
+	icon: 'fas fa-bell',
 })));
 </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 c93caeb9bd..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
@@ -4,7 +4,7 @@
 	<template #header><i class="fas fa-question"></i> {{ $ts._pages.blocks.if }}</template>
 	<template #func>
 		<button class="_button" @click="add()">
-			<i class="ti ti-plus"></i>
+			<i class="fas fa-plus"></i>
 		</button>
 	</template>
 
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 39be01ab32..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
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-send"></i> {{ $ts._pages.blocks.post }}</template>
+	<template #header><i class="fas fa-paper-plane"></i> {{ $ts._pages.blocks.post }}</template>
 
 	<section style="padding: 16px;">
 		<MkTextarea v-model="value.text"><template #label>{{ $ts._pages.blocks._post.text }}</template></MkTextarea>
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 e46bd77ccd..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
@@ -7,7 +7,7 @@
 			<i class="fas fa-pencil-alt"></i>
 		</button>
 		<button class="_button" @click="add()">
-			<i class="ti ti-plus"></i>
+			<i class="fas fa-plus"></i>
 		</button>
 	</template>
 
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index 49ba2c7c00..6927e55868 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -5,7 +5,7 @@
 		<div class="buttons">
 			<slot name="func"></slot>
 			<button v-if="removable" class="_button" @click="remove()">
-				<i class="ti ti-trash"></i>
+				<i class="fas fa-trash-alt"></i>
 			</button>
 			<button v-if="draggable" class="drag-handle _button">
 				<i class="fas fa-bars"></i>
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index de186f6d6f..591d13053a 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -5,8 +5,8 @@
 		<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="ti ti-copy"></i> {{ $ts.duplicate }}</MkButton>
-			<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="ti ti-trash"></i> {{ $ts.delete }}</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'">
@@ -35,10 +35,10 @@
 				<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
 
 				<div class="eyeCatch">
-					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ti ti-plus"></i> {{ $ts._pages.eyeCatchingImageSet }}</MkButton>
+					<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="ti ti-trash"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
+						<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="fas fa-trash-alt"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
 					</div>
 				</div>
 			</div>
@@ -48,7 +48,7 @@
 			<div>
 				<XBlocks v-model="content" class="content" :hpml="hpml"/>
 
-				<MkButton v-if="!readonly" @click="add()"><i class="ti ti-plus"></i></MkButton>
+				<MkButton v-if="!readonly" @click="add()"><i class="fas fa-plus"></i></MkButton>
 			</div>
 		</div>
 
@@ -68,7 +68,7 @@
 					</template>
 				</XDraggable>
 
-				<MkButton v-if="!readonly" class="add" @click="addVariable()"><i class="ti ti-plus"></i></MkButton>
+				<MkButton v-if="!readonly" class="add" @click="addVariable()"><i class="fas fa-plus"></i></MkButton>
 			</div>
 		</div>
 
@@ -412,7 +412,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => [{
 	key: 'settings',
 	title: i18n.ts._pages.pageSetting,
-	icon: 'ti ti-settings',
+	icon: 'fas fa-cog',
 }, {
 	key: 'contents',
 	title: i18n.ts._pages.contents,
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 9584be3782..fb0e6a4914 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -22,8 +22,8 @@
 							<MkButton v-else v-tooltip="i18n.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="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ti ti-repeat fa-fw"></i></button>
-							<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="ti ti-share fa-fw"></i></button>
+							<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
+							<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
 						</div>
 					</div>
 					<div class="user">
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 9c226f6627..02b05c57ba 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -9,7 +9,7 @@
 		</div>
 
 		<div v-else-if="tab === 'my'" class="rknalgpo my">
-			<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
+			<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>
@@ -55,7 +55,7 @@ function create() {
 }
 
 const headerActions = $computed(() => [{
-	icon: 'ti ti-plus',
+	icon: 'fas fa-plus',
 	text: i18n.ts.create,
 	handler: create,
 }]);
diff --git a/packages/client/src/pages/registry.keys.vue b/packages/client/src/pages/registry.keys.vue
index f179fbe957..ac586b4e72 100644
--- a/packages/client/src/pages/registry.keys.vue
+++ b/packages/client/src/pages/registry.keys.vue
@@ -88,7 +88,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: 'ti ti-adjustments',
+	icon: 'fas fa-cogs',
 });
 </script>
 
diff --git a/packages/client/src/pages/registry.value.vue b/packages/client/src/pages/registry.value.vue
index 5f23e79e1b..b6f3d73bb6 100644
--- a/packages/client/src/pages/registry.value.vue
+++ b/packages/client/src/pages/registry.value.vue
@@ -115,7 +115,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: 'ti ti-adjustments',
+	icon: 'fas fa-cogs',
 });
 </script>
 
diff --git a/packages/client/src/pages/registry.vue b/packages/client/src/pages/registry.vue
index a2c65294fc..80a44d5589 100644
--- a/packages/client/src/pages/registry.vue
+++ b/packages/client/src/pages/registry.vue
@@ -66,7 +66,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: 'ti ti-adjustments',
+	icon: 'fas fa-cogs',
 });
 </script>
 
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index c080b763bb..fdcbb57e44 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -33,6 +33,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
 	title: i18n.t('searchWith', { q: props.query }),
-	icon: 'ti ti-search',
+	icon: 'fas fa-search',
 })));
 </script>
diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
index 2b10ab0acf..e16931a9ca 100644
--- a/packages/client/src/pages/settings/accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="_formRoot">
 	<FormSuspense :p="init">
-		<FormButton primary @click="addAccount"><i class="ti ti-plus"></i> {{ i18n.ts.addAccount }}</FormButton>
+		<FormButton primary @click="addAccount"><i class="fas fa-plus"></i> {{ i18n.ts.addAccount }}</FormButton>
 
 		<div v-for="account in accounts" :key="account.id" class="_panel _button lcjjdxlm" @click="menu(account, $event)">
 			<div class="avatar">
@@ -54,7 +54,7 @@ function menu(account, ev) {
 		action: () => switchAccount(account),
 	}, {
 		text: i18n.ts.remove,
-		icon: 'ti ti-trash',
+		icon: 'fas fa-trash-alt',
 		danger: true,
 		action: () => removeAccount(account),
 	}], ev.currentTarget ?? ev.target);
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index 77b98a09a5..8b345c8e9f 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -22,7 +22,7 @@
 						<div><MkTime :time="token.lastUsedAt"/></div>
 					</div>
 					<div class="actions">
-						<button class="_button" @click="revoke(token)"><i class="ti ti-trash"></i></button>
+						<button class="_button" @click="revoke(token)"><i class="fas fa-trash-alt"></i></button>
 					</div>
 					<details>
 						<summary>{{ i18n.ts.details }}</summary>
diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
index ed44509774..a10e2d9f7d 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -120,7 +120,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.drive,
-	icon: 'ti ti-cloud',
+	icon: 'fas fa-cloud',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/email.vue b/packages/client/src/pages/settings/email.vue
index 3acaa9a43a..1dae233a07 100644
--- a/packages/client/src/pages/settings/email.vue
+++ b/packages/client/src/pages/settings/email.vue
@@ -5,7 +5,7 @@
 		<FormInput v-model="emailAddress" type="email" manual-save>
 			<template #prefix><i class="fas fa-envelope"></i></template>
 			<template v-if="$i.email && !$i.emailVerified" #caption>{{ i18n.ts.verificationEmailSent }}</template>
-			<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="ti ti-check" style="color: var(--success);"></i> {{ i18n.ts.emailVerified }}</template>
+			<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="fas fa-check" style="color: var(--success);"></i> {{ i18n.ts.emailVerified }}</template>
 		</FormInput>
 	</FormSection>
 
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index d673a531b6..9072bcefc9 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -185,6 +185,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.general,
-	icon: 'ti ti-adjustments',
+	icon: 'fas fa-cogs',
 });
 </script>
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 2c7b711cd5..c38e1394f0 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -36,7 +36,7 @@ import * as os from '@/os';
 
 const indexInfo = {
 	title: i18n.ts.settings,
-	icon: 'ti ti-settings',
+	icon: 'fas fa-cog',
 	hideHeader: true,
 };
 const INFO = ref(indexInfo);
@@ -73,12 +73,12 @@ const menuDef = computed(() => [{
 		to: '/settings/reaction',
 		active: currentPage?.route.name === 'reaction',
 	}, {
-		icon: 'ti ti-cloud',
+		icon: 'fas fa-cloud',
 		text: i18n.ts.drive,
 		to: '/settings/drive',
 		active: currentPage?.route.name === 'drive',
 	}, {
-		icon: 'ti ti-bell',
+		icon: 'fas fa-bell',
 		text: i18n.ts.notifications,
 		to: '/settings/notifications',
 		active: currentPage?.route.name === 'notifications',
@@ -88,7 +88,7 @@ const menuDef = computed(() => [{
 		to: '/settings/email',
 		active: currentPage?.route.name === 'email',
 	}, {
-		icon: 'ti ti-share',
+		icon: 'fas fa-share-alt',
 		text: i18n.ts.integration,
 		to: '/settings/integration',
 		active: currentPage?.route.name === 'integration',
@@ -101,7 +101,7 @@ const menuDef = computed(() => [{
 }, {
 	title: i18n.ts.clientSettings,
 	items: [{
-		icon: 'ti ti-adjustments',
+		icon: 'fas fa-cogs',
 		text: i18n.ts.general,
 		to: '/settings/general',
 		active: currentPage?.route.name === 'general',
@@ -164,7 +164,7 @@ const menuDef = computed(() => [{
 		to: '/settings/webhook',
 		active: currentPage?.route.name === 'webhook',
 	}, {
-		icon: 'ti ti-dots',
+		icon: 'fas fa-ellipsis-h',
 		text: i18n.ts.other,
 		to: '/settings/other',
 		active: currentPage?.route.name === 'other',
diff --git a/packages/client/src/pages/settings/integration.vue b/packages/client/src/pages/settings/integration.vue
index f3595e897b..c8219519f8 100644
--- a/packages/client/src/pages/settings/integration.vue
+++ b/packages/client/src/pages/settings/integration.vue
@@ -94,6 +94,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.integration,
-	icon: 'ti ti-share',
+	icon: 'fas fa-share-alt',
 });
 </script>
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
index e24be99cb6..77ec567da4 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_formRoot">
-	<FormLink class="_formBlock" @click="configure"><template #icon><i class="ti ti-settings"></i></template>{{ i18n.ts.notificationSetting }}</FormLink>
+	<FormLink class="_formBlock" @click="configure"><template #icon><i class="fas fa-cog"></i></template>{{ i18n.ts.notificationSetting }}</FormLink>
 	<FormSection>
 		<FormLink class="_formBlock" @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</FormLink>
 		<FormLink class="_formBlock" @click="readAllUnreadNotes">{{ i18n.ts.markAsReadAllUnreadNotes }}</FormLink>
@@ -85,6 +85,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.notifications,
-	icon: 'ti ti-bell',
+	icon: 'fas fa-bell',
 });
 </script>
diff --git a/packages/client/src/pages/settings/other.vue b/packages/client/src/pages/settings/other.vue
index 5f64b872e1..51dab04cfa 100644
--- a/packages/client/src/pages/settings/other.vue
+++ b/packages/client/src/pages/settings/other.vue
@@ -10,7 +10,7 @@
 
 	<FormLink to="/settings/account-info" class="_formBlock">{{ i18n.ts.accountInfo }}</FormLink>
 
-	<FormLink to="/registry" class="_formBlock"><template #icon><i class="ti ti-adjustments"></i></template>{{ i18n.ts.registry }}</FormLink>
+	<FormLink to="/registry" class="_formBlock"><template #icon><i class="fas fa-cogs"></i></template>{{ i18n.ts.registry }}</FormLink>
 
 	<FormLink to="/settings/delete-account" class="_formBlock"><template #icon><i class="fas fa-exclamation-triangle"></i></template>{{ i18n.ts.closeAccount }}</FormLink>
 </div>
@@ -42,6 +42,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.other,
-	icon: 'ti ti-dots',
+	icon: 'fas fa-ellipsis-h',
 });
 </script>
diff --git a/packages/client/src/pages/settings/plugin.install.vue b/packages/client/src/pages/settings/plugin.install.vue
index 66549aed55..e259bbeb3a 100644
--- a/packages/client/src/pages/settings/plugin.install.vue
+++ b/packages/client/src/pages/settings/plugin.install.vue
@@ -7,7 +7,7 @@
 	</FormTextarea>
 
 	<div class="_formBlock">
-		<FormButton :disabled="code == null" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</FormButton>
+		<FormButton :disabled="code == null" primary inline @click="install"><i class="fas fa-check"></i> {{ i18n.ts.install }}</FormButton>
 	</div>
 </div>
 </template>
diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue
index f458f0404d..8ce6fe4445 100644
--- a/packages/client/src/pages/settings/plugin.vue
+++ b/packages/client/src/pages/settings/plugin.vue
@@ -23,8 +23,8 @@
 			</MkKeyValue>
 
 			<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-				<MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="ti ti-settings"></i> {{ i18n.ts.settings }}</MkButton>
-				<MkButton inline danger @click="uninstall(plugin)"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</MkButton>
+				<MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="fas fa-cog"></i> {{ i18n.ts.settings }}</MkButton>
+				<MkButton inline danger @click="uninstall(plugin)"><i class="fas fa-trash-alt"></i> {{ i18n.ts.uninstall }}</MkButton>
 			</div>
 		</div>
 	</FormSection>
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index e3b740f46c..aaf60c8d55 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -46,8 +46,8 @@
 						<template #label>{{ i18n.ts._profile.metadataContent }} #{{ i + 1 }}</template>
 					</FormInput>
 				</FormSplit>
-				<MkButton :disabled="fields.length >= 16" inline style="margin-right: 8px;" @click="addField"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
-				<MkButton inline primary @click="saveFields"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
+				<MkButton :disabled="fields.length >= 16" inline style="margin-right: 8px;" @click="addField"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton>
+				<MkButton inline primary @click="saveFields"><i class="fas fa-check"></i> {{ i18n.ts.save }}</MkButton>
 			</div>
 		</FormFolder>
 		<template #caption>{{ i18n.ts._profile.metadataDescription }}</template>
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index 3d941f5a53..f8d57cbcd5 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -10,7 +10,7 @@
 					</button>
 				</template>
 				<template #footer>
-					<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
+					<button class="_button add" @click="chooseEmoji"><i class="fas fa-plus"></i></button>
 				</template>
 			</XDraggable>
 		</div>
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 32b91a6628..d109a4ba7c 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -17,7 +17,7 @@
 				<div>
 					<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
 						<header>
-							<i v-if="item.success" class="ti ti-check icon succ"></i>
+							<i v-if="item.success" class="fas fa-check icon succ"></i>
 							<i v-else class="fas fa-times-circle icon fail"></i>
 							<code class="ip _monospace">{{ item.ip }}</code>
 							<MkTime :time="item.createdAt" class="time"/>
diff --git a/packages/client/src/pages/settings/theme.install.vue b/packages/client/src/pages/settings/theme.install.vue
index 2ed144dca3..34f8384d87 100644
--- a/packages/client/src/pages/settings/theme.install.vue
+++ b/packages/client/src/pages/settings/theme.install.vue
@@ -6,7 +6,7 @@
 
 	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
 		<FormButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="fas fa-eye"></i> {{ i18n.ts.preview }}</FormButton>
-		<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="ti ti-check"></i> {{ i18n.ts.install }}</FormButton>
+		<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="fas fa-check"></i> {{ i18n.ts.install }}</FormButton>
 	</div>
 </div>
 </template>
diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue
index 5b33b50319..25f92e6ed1 100644
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ b/packages/client/src/pages/settings/theme.manage.vue
@@ -20,7 +20,7 @@
 			<template #label>{{ i18n.ts._theme.code }}</template>
 			<template #caption><button class="_textButton" @click="copyThemeCode()">{{ i18n.ts.copy }}</button></template>
 		</FormTextarea>
-		<FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" class="_formBlock" danger @click="uninstall()"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</FormButton>
+		<FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" class="_formBlock" danger @click="uninstall()"><i class="fas fa-trash-alt"></i> {{ i18n.ts.uninstall }}</FormButton>
 	</template>
 </div>
 </template>
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 6d6cc1c345..42a91bcb59 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -54,7 +54,7 @@
 	<FormSection>
 		<div class="_formLinksGrid">
 			<FormLink to="/settings/theme/manage"><template #icon><i class="fas fa-folder-open"></i></template>{{ i18n.ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink>
-			<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="ti ti-world"></i></template>{{ i18n.ts._theme.explore }}</FormLink>
+			<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="fas fa-globe"></i></template>{{ i18n.ts._theme.explore }}</FormLink>
 			<FormLink to="/settings/theme/install"><template #icon><i class="fas fa-download"></i></template>{{ i18n.ts._theme.install }}</FormLink>
 			<FormLink to="/theme-editor"><template #icon><i class="fas fa-paint-roller"></i></template>{{ i18n.ts._theme.make }}</FormLink>
 		</div>
diff --git a/packages/client/src/pages/settings/webhook.edit.vue b/packages/client/src/pages/settings/webhook.edit.vue
index fe91faa3cf..5d41f3d087 100644
--- a/packages/client/src/pages/settings/webhook.edit.vue
+++ b/packages/client/src/pages/settings/webhook.edit.vue
@@ -28,7 +28,7 @@
 	<FormSwitch v-model="active" class="_formBlock">Active</FormSwitch>
 
 	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton primary inline @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</FormButton>
+		<FormButton primary inline @click="save"><i class="fas fa-check"></i> {{ i18n.ts.save }}</FormButton>
 	</div>
 </div>
 </template>
diff --git a/packages/client/src/pages/settings/webhook.new.vue b/packages/client/src/pages/settings/webhook.new.vue
index b42f283945..fcf1329ff6 100644
--- a/packages/client/src/pages/settings/webhook.new.vue
+++ b/packages/client/src/pages/settings/webhook.new.vue
@@ -26,7 +26,7 @@
 	</FormSection>
 
 	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton primary inline @click="create"><i class="ti ti-check"></i> {{ i18n.ts.create }}</FormButton>
+		<FormButton primary inline @click="create"><i class="fas fa-check"></i> {{ i18n.ts.create }}</FormButton>
 	</div>
 </div>
 </template>
diff --git a/packages/client/src/pages/settings/webhook.vue b/packages/client/src/pages/settings/webhook.vue
index d3ad475cd8..1a7e73940c 100644
--- a/packages/client/src/pages/settings/webhook.vue
+++ b/packages/client/src/pages/settings/webhook.vue
@@ -13,7 +13,7 @@
 					<template #icon>
 						<i v-if="webhook.active === false" class="fas fa-circle-pause"></i>
 						<i v-else-if="webhook.latestStatus === null" class="far fa-circle"></i>
-						<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="ti ti-check" :style="{ color: 'var(--success)' }"></i>
+						<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="fas fa-check" :style="{ color: 'var(--success)' }"></i>
 						<i v-else class="fas fa-triangle-exclamation" :style="{ color: 'var(--error)' }"></i>
 					</template>
 					{{ webhook.name || webhook.url }}
diff --git a/packages/client/src/pages/share.vue b/packages/client/src/pages/share.vue
index a7e797eeab..69d22ed632 100644
--- a/packages/client/src/pages/share.vue
+++ b/packages/client/src/pages/share.vue
@@ -158,7 +158,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.share,
-	icon: 'ti ti-share',
+	icon: 'fas fa-share-alt',
 });
 </script>
 
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index 72775ed5c9..5498c2999d 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -30,6 +30,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
 	title: props.tag,
-	icon: 'ti ti-hash',
+	icon: 'fas fa-hashtag',
 })));
 </script>
diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index f0435427eb..7dfeee16ed 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -215,7 +215,7 @@ const headerActions = $computed(() => [{
 	handler: showPreview,
 }, {
 	asFullButton: true,
-	icon: 'ti ti-check',
+	icon: 'fas fa-check',
 	text: i18n.ts.saveAs,
 	handler: saveAs,
 }]);
diff --git a/packages/client/src/pages/timeline.tutorial.vue b/packages/client/src/pages/timeline.tutorial.vue
index b1a1af1383..9683cc22a5 100644
--- a/packages/client/src/pages/timeline.tutorial.vue
+++ b/packages/client/src/pages/timeline.tutorial.vue
@@ -71,7 +71,7 @@
 			<MkButton :class="$style.footerItem" :primary="false" @click="tutorial = -1">{{ i18n.ts.noThankYou }}</MkButton>
 		</template>
 		<template v-else>
-			<MkButton :class="$style.footerItem" primary @click="tutorial++"><i class="ti ti-check"></i> {{ i18n.ts.next }}</MkButton>
+			<MkButton :class="$style.footerItem" primary @click="tutorial++"><i class="fas fa-check"></i> {{ i18n.ts.next }}</MkButton>
 		</template>
 	</div>
 </div>
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 8c2dc92ccd..9d42997025 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -114,22 +114,22 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => [{
 	key: 'home',
 	title: i18n.ts._timelines.home,
-	icon: 'ti ti-home-2',
+	icon: 'fas fa-home',
 	iconOnly: true,
 }, ...(isLocalTimelineAvailable ? [{
 	key: 'local',
 	title: i18n.ts._timelines.local,
-	icon: 'ti ti-messages',
+	icon: 'fas fa-comments',
 	iconOnly: true,
 }, {
 	key: 'social',
 	title: i18n.ts._timelines.social,
-	icon: 'ti ti-share',
+	icon: 'fas fa-share-alt',
 	iconOnly: true,
 }] : []), ...(isGlobalTimelineAvailable ? [{
 	key: 'global',
 	title: i18n.ts._timelines.global,
-	icon: 'ti ti-world',
+	icon: 'fas fa-globe',
 	iconOnly: true,
 }] : []), {
 	icon: 'fas fa-list-ul',
@@ -150,7 +150,7 @@ const headerTabs = $computed(() => [{
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.timeline,
-	icon: src === 'local' ? 'ti ti-messages' : src === 'social' ? 'ti ti-share' : src === 'global' ? 'ti ti-world' : 'ti ti-home-2',
+	icon: src === 'local' ? 'fas fa-comments' : src === 'social' ? 'fas fa-share-alt' : src === 'global' ? 'fas fa-globe' : 'fas fa-home',
 })));
 </script>
 
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index 773b20d80c..4a534e47ba 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -69,7 +69,7 @@ const headerActions = $computed(() => list ? [{
 	text: i18n.ts.jumpToSpecifiedDate,
 	handler: timetravel,
 }, {
-	icon: 'ti ti-settings',
+	icon: 'fas fa-cog',
 	text: i18n.ts.settings,
 	handler: settings,
 }] : []);
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index 98c7e9d116..352db4616e 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -25,7 +25,7 @@
 						</div>
 						<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
 						<div v-if="$i" class="actions">
-							<button class="menu _button" @click="menu"><i class="ti ti-dots"></i></button>
+							<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>
diff --git a/packages/client/src/pages/user/index.activity.vue b/packages/client/src/pages/user/index.activity.vue
index 7f25176e82..630a2cea7d 100644
--- a/packages/client/src/pages/user/index.activity.vue
+++ b/packages/client/src/pages/user/index.activity.vue
@@ -3,7 +3,7 @@
 	<template #header><i class="fas fa-chart-simple" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
 	<template #func>
 		<button class="_button" @click="showMenu">
-			<i class="ti ti-dots"></i>
+			<i class="fas fa-ellipsis-h"></i>
 		</button>
 	</template>
 
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 21f1d25dfd..7e635f8b2e 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -69,7 +69,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => user ? [{
 	key: 'home',
 	title: i18n.ts.overview,
-	icon: 'ti ti-home-2',
+	icon: 'fas fa-home',
 }, ...($i && ($i.id === user.id)) || user.publicReactions ? [{
 	key: 'reactions',
 	title: i18n.ts.reaction,
@@ -77,7 +77,7 @@ const headerTabs = $computed(() => user ? [{
 }] : [], {
 	key: 'clips',
 	title: i18n.ts.clips,
-	icon: 'ti ti-paperclip',
+	icon: 'fas fa-paperclip',
 }, {
 	key: 'pages',
 	title: i18n.ts.pages,
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index 119ba96ec9..827162a0c0 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -15,7 +15,7 @@
 		</div>
 		<div class="main">
 			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
-			<button class="_button _acrylic menu" @click="showMenu"><i class="ti ti-dots"></i></button>
+			<button class="_button _acrylic menu" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
 			<div class="fg">
 				<h1>
 					<!-- 背景色によってはロゴが見えなくなるのでとりあえず無効に -->
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index 535580e723..a590834a4c 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -41,7 +41,7 @@
 							<template #n><b>{{ onlineUsersCount }}</b></template>
 						</I18n>
 					</div>
-					<button class="_button _acrylic menu" @click="showMenu"><i class="ti ti-dots"></i></button>
+					<button class="_button _acrylic menu" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
 				</div>
 			</div>
 			<nav class="nav">
diff --git a/packages/client/src/pages/welcome.timeline.vue b/packages/client/src/pages/welcome.timeline.vue
index f45a15448d..e19ebac3ed 100644
--- a/packages/client/src/pages/welcome.timeline.vue
+++ b/packages/client/src/pages/welcome.timeline.vue
@@ -4,7 +4,7 @@
 		<div v-for="note in notes" class="note">
 			<div class="content _panel">
 				<div class="body">
-					<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
+					<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
 					<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 					<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 				</div>
diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
index 18926981bc..4826cd70fd 100644
--- a/packages/client/src/scripts/get-note-menu.ts
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -93,7 +93,7 @@ export function getNoteMenu(props: {
 	async function clip(): Promise<void> {
 		const clips = await os.api('clips/list');
 		os.popupMenu([{
-			icon: 'ti ti-plus',
+			icon: 'fas fa-plus',
 			text: i18n.ts.createNew,
 			action: async () => {
 				const { canceled, result } = await os.form(i18n.ts.createNewClip, {
@@ -202,15 +202,15 @@ export function getNoteMenu(props: {
 					action: unclip,
 				}, null] : []
 			), {
-				icon: 'ti ti-external-link',
+				icon: 'fas fa-external-link-alt',
 				text: i18n.ts.details,
 				action: notedetails,
 			}, {
-				icon: 'ti ti-copy',
+				icon: 'fas fa-copy',
 				text: i18n.ts.copyContent,
 				action: copyContent,
 			}, {
-				icon: 'ti ti-link',
+				icon: 'fas fa-link',
 				text: i18n.ts.copyLink,
 				action: copyLink,
 			}, (appearNote.url || appearNote.uri) ? {
@@ -221,27 +221,27 @@ export function getNoteMenu(props: {
 				},
 			} : undefined,
 			{
-				icon: 'ti ti-share',
+				icon: 'fas fa-share-alt',
 				text: i18n.ts.share,
 				action: share,
 			},
 			instance.translatorAvailable ? {
-				icon: 'ti ti-language-hiragana',
+				icon: 'fas fa-language',
 				text: i18n.ts.translate,
 				action: translate,
 			} : undefined,
 			null,
 			statePromise.then(state => state.isFavorited ? {
-				icon: 'ti ti-star',
+				icon: 'fas fa-star',
 				text: i18n.ts.unfavorite,
 				action: () => toggleFavorite(false),
 			} : {
-				icon: 'ti ti-star',
+				icon: 'fas fa-star',
 				text: i18n.ts.favorite,
 				action: () => toggleFavorite(true),
 			}),
 			{
-				icon: 'ti ti-paperclip',
+				icon: 'fas fa-paperclip',
 				text: i18n.ts.clip,
 				action: () => clip(),
 			},
@@ -276,7 +276,7 @@ export function getNoteMenu(props: {
 			...(appearNote.userId !== $i.id ? [
 				null,
 				{
-					icon: 'ti ti-exclamation-circle',
+					icon: 'fas fa-exclamation-circle',
 					text: i18n.ts.reportAbuse,
 					action: () => {
 						const u = appearNote.url || appearNote.uri || `${url}/notes/${appearNote.id}`;
@@ -296,7 +296,7 @@ export function getNoteMenu(props: {
 					action: delEdit,
 				} : undefined,
 				{
-					icon: 'ti ti-trash',
+					icon: 'fas fa-trash-alt',
 					text: i18n.ts.delete,
 					danger: true,
 					action: del,
@@ -306,15 +306,15 @@ export function getNoteMenu(props: {
 			.filter(x => x !== undefined);
 	} else {
 		menu = [{
-			icon: 'ti ti-external-link',
+			icon: 'fas fa-external-link-alt',
 			text: i18n.ts.detailed,
 			action: openDetail,
 		}, {
-			icon: 'ti ti-copy',
+			icon: 'fas fa-copy',
 			text: i18n.ts.copyContent,
 			action: copyContent,
 		}, {
-			icon: 'ti ti-link',
+			icon: 'fas fa-link',
 			text: i18n.ts.copyLink,
 			action: copyLink,
 		}, (appearNote.url || appearNote.uri) ? {
diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts
index ae71b9718f..4a5a2d42f0 100644
--- a/packages/client/src/scripts/get-user-menu.ts
+++ b/packages/client/src/scripts/get-user-menu.ts
@@ -172,7 +172,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 		},
 	}, meId !== user.id ? {
 		type: 'link',
-		icon: 'ti ti-messages',
+		icon: 'fas fa-comments',
 		text: i18n.ts.startMessaging,
 		to: '/my/messaging/' + Acct.toString(user),
 	} : undefined, null, {
@@ -205,7 +205,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 		}
 
 		menu = menu.concat([null, {
-			icon: 'ti ti-exclamation-circle',
+			icon: 'fas fa-exclamation-circle',
 			text: i18n.ts.reportAbuse,
 			action: reportAbuse,
 		}]);
diff --git a/packages/client/src/scripts/hpml/lib.ts b/packages/client/src/scripts/hpml/lib.ts
index e9923904f6..cab467a920 100644
--- a/packages/client/src/scripts/hpml/lib.ts
+++ b/packages/client/src/scripts/hpml/lib.ts
@@ -130,13 +130,13 @@ export function initAiLib(hpml: Hpml) {
 }
 
 export const funcDefs: Record<string, { in: any[]; out: any; category: string; icon: any; }> = {
-	if: { in: ['boolean', 0, 0], out: 0, category: 'flow', icon: 'ti ti-share' },
+	if: { in: ['boolean', 0, 0], out: 0, category: 'flow', icon: 'fas fa-share-alt' },
 	for: { in: ['number', 'function'], out: null, category: 'flow', icon: 'fas fa-recycle' },
 	not: { in: ['boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
 	or: { in: ['boolean', 'boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
 	and: { in: ['boolean', 'boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
-	add: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'ti ti-plus' },
-	subtract: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'ti ti-minus' },
+	add: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-plus' },
+	subtract: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-minus' },
 	multiply: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-times' },
 	divide: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-divide' },
 	mod: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-divide' },
diff --git a/packages/client/src/scripts/select-file.ts b/packages/client/src/scripts/select-file.ts
index b5c5d688a7..17e31d96f1 100644
--- a/packages/client/src/scripts/select-file.ts
+++ b/packages/client/src/scripts/select-file.ts
@@ -84,11 +84,11 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
 			action: chooseFileFromPc,
 		}, {
 			text: i18n.ts.fromDrive,
-			icon: 'ti ti-cloud',
+			icon: 'fas fa-cloud',
 			action: chooseFileFromDrive,
 		}, {
 			text: i18n.ts.fromUrl,
-			icon: 'ti ti-link',
+			icon: 'fas fa-link',
 			action: chooseFileFromUrl,
 		}], src);
 	});
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index a7f40d81d8..0b61d46f10 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -119,11 +119,6 @@ hr {
 	background: var(--divider);
 }
 
-.ti {
-	font-size: 125%;
-	vertical-align: text-bottom;
-}
-
 ._noSelect {
 	user-select: none;
 	-webkit-user-select: none;
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
index 7747f9ca38..de000447ad 100644
--- a/packages/client/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue
@@ -9,7 +9,7 @@
 		</div>
 		<div class="middle">
 			<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-				<i class="icon ti ti-home-2 fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
+				<i class="icon fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
 			</MkA>
 			<template v-for="item in menu">
 				<div v-if="item === '-'" class="divider"></div>
@@ -27,7 +27,7 @@
 				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
 			</button>
 			<MkA v-click-anime class="item" active-class="active" to="/settings">
-				<i class="icon ti ti-settings fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
+				<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 			</MkA>
 		</div>
 		<div class="bottom">
@@ -85,7 +85,7 @@ function openInstanceMenu(ev: MouseEvent) {
 	}, {
 		type: 'link',
 		text: i18n.ts.federation,
-		icon: 'ti ti-world',
+		icon: 'fas fa-globe',
 		to: '/about#federation',
 	}, null, {
 		type: 'parent',
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 2a96e200fc..20622b083a 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -9,7 +9,7 @@
 		</div>
 		<div class="middle">
 			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
-				<i class="icon ti ti-home-2 fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
+				<i class="icon fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
 			</MkA>
 			<template v-for="item in menu">
 				<div v-if="item === '-'" class="divider"></div>
@@ -37,7 +37,7 @@
 				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
 			</button>
 			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item" active-class="active" to="/settings">
-				<i class="icon ti ti-settings fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
+				<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 			</MkA>
 		</div>
 		<div class="bottom">
@@ -108,7 +108,7 @@ function openInstanceMenu(ev: MouseEvent) {
 	}, {
 		type: 'link',
 		text: i18n.ts.federation,
-		icon: 'ti ti-world',
+		icon: 'fas fa-globe',
 		to: '/about#federation',
 	}, null, {
 		type: 'parent',
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
index 5e30e10658..306d32c597 100644
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -3,7 +3,7 @@
 	<div class="body">
 		<div class="left">
 			<MkA v-click-anime v-tooltip="$ts.timeline" class="item index" active-class="active" to="/" exact>
-				<i class="ti ti-home-2 fa-fw"></i>
+				<i class="fas fa-home fa-fw"></i>
 			</MkA>
 			<template v-for="item in menu">
 				<div v-if="item === '-'" class="divider"></div>
@@ -17,13 +17,13 @@
 				<i class="fas fa-door-open fa-fw"></i>
 			</MkA>
 			<button v-click-anime class="item _button" @click="more">
-				<i class="ti ti-dots fa-fw"></i>
+				<i class="fas fa-ellipsis-h fa-fw"></i>
 				<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
 			</button>
 		</div>
 		<div class="right">
 			<MkA v-click-anime v-tooltip="$ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
-				<i class="ti ti-settings fa-fw"></i>
+				<i class="fas fa-cog fa-fw"></i>
 			</MkA>
 			<button v-click-anime class="item _button account" @click="openAccountMenu">
 				<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
index 104124c5d8..7479c1c9c6 100644
--- a/packages/client/src/ui/classic.sidebar.vue
+++ b/packages/client/src/ui/classic.sidebar.vue
@@ -10,7 +10,7 @@
 	</div>
 	<div class="divider"></div>
 	<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-		<i class="ti ti-home-2 fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+		<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
 	</MkA>
 	<template v-for="item in menu">
 		<div v-if="item === '-'" class="divider"></div>
@@ -24,11 +24,11 @@
 		<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
 	</MkA>
 	<button v-click-anime class="item _button" @click="more">
-		<i class="ti ti-dots fa-fw"></i><span class="text">{{ $ts.more }}</span>
+		<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
 		<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
 	</button>
 	<MkA v-click-anime class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<i class="ti ti-settings fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+		<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
 	</MkA>
 	<div class="divider"></div>
 	<div class="about">
diff --git a/packages/client/src/ui/classic.widgets.vue b/packages/client/src/ui/classic.widgets.vue
index 95864b4595..ca8e3f4dbc 100644
--- a/packages/client/src/ui/classic.widgets.vue
+++ b/packages/client/src/ui/classic.widgets.vue
@@ -3,7 +3,7 @@
 	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
 	<MkAd class="a" :prefer="['square']"/>
 
-	<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ $ts.editWidgetsExit }}</button>
+	<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
 	<button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
 </div>
 </template>
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 43ab54944b..224ad7ee1a 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -38,10 +38,10 @@
 					<button v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" class="_button button" @click="deleteProfile"><i class="fas fa-trash-can"></i></button>
 				</div>
 				<div class="middle">
-					<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" class="_button button" @click="addColumn"><i class="ti ti-plus"></i></button>
+					<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" class="_button button" @click="addColumn"><i class="fas fa-plus"></i></button>
 				</div>
 				<div class="bottom">
-					<button v-tooltip.noDelay.left="i18n.ts.settings" class="_button button settings" @click="showSettings"><i class="ti ti-settings"></i></button>
+					<button v-tooltip.noDelay.left="i18n.ts.settings" class="_button button settings" @click="showSettings"><i class="fas fa-cog"></i></button>
 				</div>
 			</div>
 		</div>
@@ -49,8 +49,8 @@
 
 	<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="mainRouter.push('/')"><i class="ti ti-home-2"></i></button>
-		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ti ti-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>
 
@@ -194,7 +194,7 @@ function changeProfile(ev: MouseEvent) {
 			},
 		}))), null, {
 			text: i18n.ts._deck.newProfile,
-			icon: 'ti ti-plus',
+			icon: 'fas fa-plus',
 			action: async () => {
 				const { canceled, result: name } = await os.inputText({
 					title: i18n.ts._deck.profile,
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index b841c1a629..d16c23d100 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -105,7 +105,7 @@ function toggleActive() {
 
 function getMenu() {
 	let items = [{
-		icon: 'ti ti-settings',
+		icon: 'fas fa-cog',
 		text: i18n.ts._deck.configureColumn,
 		action: async () => {
 			const { canceled, result } = await os.form(props.column.name, {
@@ -170,7 +170,7 @@ function getMenu() {
 			popRightColumn(props.column.id);
 		},
 	} : undefined, null, {
-		icon: 'ti ti-trash',
+		icon: 'fas fa-trash-alt',
 		text: i18n.ts.remove,
 		danger: true,
 		action: () => {
diff --git a/packages/client/src/ui/deck/notifications-column.vue b/packages/client/src/ui/deck/notifications-column.vue
index ef7eaff40d..e77b849ef4 100644
--- a/packages/client/src/ui/deck/notifications-column.vue
+++ b/packages/client/src/ui/deck/notifications-column.vue
@@ -1,6 +1,6 @@
 <template>
 <XColumn :column="column" :is-stacked="isStacked" :menu="menu" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="ti ti-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
+	<template #header><i class="fas fa-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
 	<XNotifications :include-types="column.includingTypes"/>
 </XColumn>
diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/tl-column.vue
index 2603a50e13..e64ed852b2 100644
--- a/packages/client/src/ui/deck/tl-column.vue
+++ b/packages/client/src/ui/deck/tl-column.vue
@@ -1,16 +1,16 @@
 <template>
 <XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header>
-		<i v-if="column.tl === 'home'" class="ti ti-home-2"></i>
-		<i v-else-if="column.tl === 'local'" class="ti ti-messages"></i>
-		<i v-else-if="column.tl === 'social'" class="ti ti-share"></i>
-		<i v-else-if="column.tl === 'global'" class="ti ti-world"></i>
+		<i v-if="column.tl === 'home'" class="fas fa-home"></i>
+		<i v-else-if="column.tl === 'local'" class="fas fa-comments"></i>
+		<i v-else-if="column.tl === 'social'" class="fas fa-share-alt"></i>
+		<i v-else-if="column.tl === 'global'" class="fas fa-globe"></i>
 		<span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
 	<div v-if="disabled" class="iwaalbte">
 		<p>
-			<i class="ti ti-minus-circle"></i>
+			<i class="fas fa-minus-circle"></i>
 			{{ $t('disabled-timeline.title') }}
 		</p>
 		<p class="desc">{{ $t('disabled-timeline.description') }}</p>
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 4d95db6e41..7029f798f1 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -20,8 +20,8 @@
 
 	<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="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i class="ti ti-home-2"></i></button>
-		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ti ti-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>
diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/universal.widgets.vue
index 60b2d4f86a..179f8a6baa 100644
--- a/packages/client/src/ui/universal.widgets.vue
+++ b/packages/client/src/ui/universal.widgets.vue
@@ -2,7 +2,7 @@
 <div class="efzpzdvf">
 	<XWidgets :edit="editMode" :widgets="defaultStore.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
 
-	<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
+	<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="fas fa-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
 	<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="fas fa-pencil-alt"></i> {{ i18n.ts.editWidgets }}</button>
 </div>
 </template>
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index ccfbc433c3..3c308cfe5b 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -32,8 +32,8 @@
 
 	<transition :name="$store.state.animation ? 'tray' : ''">
 		<div v-if="showMenu" class="menu">
-			<MkA to="/" class="link" active-class="active"><i class="ti ti-home-2 icon"></i>{{ $ts.home }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ $ts.explore }}</MkA>
+			<MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ $ts.home }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><i class="fas fa-hashtag icon"></i>{{ $ts.explore }}</MkA>
 			<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ $ts.featured }}</MkA>
 			<MkA to="/channels" class="link" active-class="active"><i class="fas fa-satellite-dish icon"></i>{{ $ts.channel }}</MkA>
 			<div class="action">
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index 10002069b0..e2b9034851 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -2,8 +2,8 @@
 <div class="sqxihjet">
 	<div v-if="narrow === false" class="wide">
 		<div class="content">
-			<MkA to="/" class="link" active-class="active"><i class="ti ti-home-2 icon"></i>{{ $ts.home }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ $ts.explore }}</MkA>
+			<MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ $ts.home }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><i class="fas fa-hashtag icon"></i>{{ $ts.explore }}</MkA>
 			<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ $ts.featured }}</MkA>
 			<MkA to="/channels" class="link" active-class="active"><i class="fas fa-satellite-dish icon"></i>{{ $ts.channel }}</MkA>
 			<div v-if="info" class="page active link">
@@ -16,7 +16,7 @@
 				<button v-if="info.action" class="_button action" @click.stop="info.action.handler"><!-- TODO --></button>
 			</div>
 			<div class="right">
-				<button class="_button search" @click="search()"><i class="ti ti-search icon"></i><span>{{ $ts.search }}</span></button>
+				<button class="_button search" @click="search()"><i class="fas fa-search icon"></i><span>{{ $ts.search }}</span></button>
 				<button class="_buttonPrimary signup" @click="signup()">{{ $ts.signup }}</button>
 				<button class="_button login" @click="signin()">{{ $ts.login }}</button>
 			</div>
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index 60b4924c40..d0f81c1356 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" :foldable="foldable" :scrollable="scrollable" class="mkw-federation">
-	<template #header><i class="ti ti-world"></i>{{ i18n.ts._widgets.federation }}</template>
+	<template #header><i class="fas fa-globe"></i>{{ i18n.ts._widgets.federation }}</template>
 
 	<div class="wbrkwalb">
 		<MkLoading v-if="fetching"/>
diff --git a/packages/client/src/widgets/notifications.vue b/packages/client/src/widgets/notifications.vue
index e697209444..2729c310a0 100644
--- a/packages/client/src/widgets/notifications.vue
+++ b/packages/client/src/widgets/notifications.vue
@@ -1,7 +1,7 @@
 <template>
 <MkContainer :style="`height: ${widgetProps.height}px;`" :show-header="widgetProps.showHeader" :scrollable="true" class="mkw-notifications">
-	<template #header><i class="ti ti-bell"></i>{{ i18n.ts.notifications }}</template>
-	<template #func><button class="_button" @click="configureNotification()"><i class="ti ti-settings"></i></button></template>
+	<template #header><i class="fas fa-bell"></i>{{ i18n.ts.notifications }}</template>
+	<template #func><button class="_button" @click="configureNotification()"><i class="fas fa-cog"></i></button></template>
 
 	<div>
 		<XNotifications :include-types="widgetProps.includingTypes"/>
diff --git a/packages/client/src/widgets/rss-ticker.vue b/packages/client/src/widgets/rss-ticker.vue
index cc3c688f7b..82a2f59ae9 100644
--- a/packages/client/src/widgets/rss-ticker.vue
+++ b/packages/client/src/widgets/rss-ticker.vue
@@ -1,7 +1,7 @@
 <template>
 <MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-rss-ticker">
 	<template #header><i class="fas fa-rss-square"></i>RSS</template>
-	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
+	<template #func><button class="_button" @click="configure"><i class="fas fa-cog"></i></button></template>
 
 	<div class="ekmkgxbk">
 		<MkLoading v-if="fetching"/>
diff --git a/packages/client/src/widgets/rss.vue b/packages/client/src/widgets/rss.vue
index 7d008b5155..f392a8249a 100644
--- a/packages/client/src/widgets/rss.vue
+++ b/packages/client/src/widgets/rss.vue
@@ -1,7 +1,7 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-rss">
 	<template #header><i class="fas fa-rss-square"></i>RSS</template>
-	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
+	<template #func><button class="_button" @click="configure"><i class="fas fa-cog"></i></button></template>
 
 	<div class="ekmkgxbj">
 		<MkLoading v-if="fetching"/>
diff --git a/packages/client/src/widgets/timeline.vue b/packages/client/src/widgets/timeline.vue
index 5e1081f0d8..718162667d 100644
--- a/packages/client/src/widgets/timeline.vue
+++ b/packages/client/src/widgets/timeline.vue
@@ -2,10 +2,10 @@
 <MkContainer :show-header="widgetProps.showHeader" :style="`height: ${widgetProps.height}px;`" :scrollable="true" class="mkw-timeline">
 	<template #header>
 		<button class="_button" @click="choose">
-			<i v-if="widgetProps.src === 'home'" class="ti ti-home-2"></i>
-			<i v-else-if="widgetProps.src === 'local'" class="ti ti-messages"></i>
-			<i v-else-if="widgetProps.src === 'social'" class="ti ti-share"></i>
-			<i v-else-if="widgetProps.src === 'global'" class="ti ti-world"></i>
+			<i v-if="widgetProps.src === 'home'" class="fas fa-home"></i>
+			<i v-else-if="widgetProps.src === 'local'" class="fas fa-comments"></i>
+			<i v-else-if="widgetProps.src === 'social'" class="fas fa-share-alt"></i>
+			<i v-else-if="widgetProps.src === 'global'" class="fas fa-globe"></i>
 			<i v-else-if="widgetProps.src === 'list'" class="fas fa-list-ul"></i>
 			<i v-else-if="widgetProps.src === 'antenna'" class="fas fa-satellite"></i>
 			<span style="margin-left: 8px;">{{ widgetProps.src === 'list' ? widgetProps.list.name : widgetProps.src === 'antenna' ? widgetProps.antenna.name : $t('_timelines.' + widgetProps.src) }}</span>
@@ -102,19 +102,19 @@ const choose = async (ev) => {
 	}));
 	os.popupMenu([{
 		text: i18n.ts._timelines.home,
-		icon: 'ti ti-home-2',
+		icon: 'fas fa-home',
 		action: () => { setSrc('home'); }
 	}, {
 		text: i18n.ts._timelines.local,
-		icon: 'ti ti-messages',
+		icon: 'fas fa-comments',
 		action: () => { setSrc('local'); }
 	}, {
 		text: i18n.ts._timelines.social,
-		icon: 'ti ti-share',
+		icon: 'fas fa-share-alt',
 		action: () => { setSrc('social'); }
 	}, {
 		text: i18n.ts._timelines.global,
-		icon: 'ti ti-world',
+		icon: 'fas fa-globe',
 		action: () => { setSrc('global'); }
 	}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], ev.currentTarget ?? ev.target).then(() => {
 		menuOpened.value = false;
diff --git a/packages/client/src/widgets/trends.vue b/packages/client/src/widgets/trends.vue
index 02eec0431e..a783c04215 100644
--- a/packages/client/src/widgets/trends.vue
+++ b/packages/client/src/widgets/trends.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
-	<template #header><i class="ti ti-hash"></i>{{ i18n.ts._widgets.trends }}</template>
+	<template #header><i class="fas fa-hashtag"></i>{{ i18n.ts._widgets.trends }}</template>
 
 	<div class="wbrkwala">
 		<MkLoading v-if="fetching"/>
-- 
cgit v1.2.3-freya


From e3b84828918511b5670f351391229f836a04d73b Mon Sep 17 00:00:00 2001
From: Kagami Sascha Rosylight <saschanaz@outlook.com>
Date: Mon, 19 Dec 2022 16:47:56 +0900
Subject: fix(client): add missing ref for MkButton (#9357)

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index a052f8f7a9..64698aa00c 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -1,5 +1,6 @@
 <template>
 <button
+	ref="el"
 	v-if="!link" class="bghgjjyj _button"
 	:class="{ inline, primary, gradate, danger, rounded, full }"
 	:type="type"
-- 
cgit v1.2.3-freya


From 917ef465a5520137b478ffcf16af5a9e717d7a40 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 19 Dec 2022 19:01:30 +0900
Subject: Use tabler icons (#9354)

* wip

* wip

* wip

* Update style.scss

* wip

* wip

* wip

* wip
---
 gulpfile.js                                        |  6 +--
 packages/backend/src/server/web/views/base.pug     |  2 +-
 packages/client/package.json                       |  2 +-
 packages/client/src/account.ts                     |  4 +-
 .../client/src/components/MkAbuseReportWindow.vue  |  2 +-
 packages/client/src/components/MkButton.vue        |  2 +-
 .../src/components/MkChannelFollowButton.vue       |  6 +--
 .../client/src/components/MkChannelPreview.vue     |  6 +--
 packages/client/src/components/MkContainer.vue     |  4 +-
 .../client/src/components/MkDateSeparatedList.vue  |  4 +-
 packages/client/src/components/MkDialog.vue        | 14 +++---
 packages/client/src/components/MkDrive.file.vue    | 12 ++---
 packages/client/src/components/MkDrive.folder.vue  |  8 ++--
 .../client/src/components/MkDrive.navFolder.vue    |  2 +-
 packages/client/src/components/MkDrive.vue         | 14 +++---
 .../client/src/components/MkDriveFileThumbnail.vue | 18 +++----
 .../src/components/MkEmojiPicker.section.vue       |  2 +-
 packages/client/src/components/MkEmojiPicker.vue   | 10 ++--
 packages/client/src/components/MkFolder.vue        |  4 +-
 packages/client/src/components/MkFollowButton.vue  |  8 ++--
 packages/client/src/components/MkGoogle.vue        |  2 +-
 packages/client/src/components/MkInfo.vue          |  4 +-
 packages/client/src/components/MkLaunchPad.vue     |  4 +-
 packages/client/src/components/MkLink.vue          |  5 +-
 packages/client/src/components/MkMediaBanner.vue   | 13 +++--
 packages/client/src/components/MkMediaImage.vue    |  4 +-
 packages/client/src/components/MkMediaVideo.vue    |  4 +-
 packages/client/src/components/MkMenu.vue          | 18 +++----
 .../client/src/components/MkModalPageWindow.vue    | 12 ++---
 packages/client/src/components/MkModalWindow.vue   |  6 +--
 packages/client/src/components/MkNote.vue          | 26 +++++-----
 packages/client/src/components/MkNoteDetailed.vue  | 20 ++++----
 packages/client/src/components/MkNoteSub.vue       |  2 +-
 packages/client/src/components/MkNotification.vue  | 34 ++++++-------
 packages/client/src/components/MkPageWindow.vue    | 12 ++---
 packages/client/src/components/MkPoll.vue          |  2 +-
 packages/client/src/components/MkPollEditor.vue    |  4 +-
 packages/client/src/components/MkPostForm.vue      | 42 ++++++++--------
 .../client/src/components/MkPostFormAttaches.vue   | 10 ++--
 packages/client/src/components/MkRemoteCaution.vue |  2 +-
 packages/client/src/components/MkRenoteButton.vue  |  8 ++--
 packages/client/src/components/MkSignin.vue        |  4 +-
 packages/client/src/components/MkSignup.vue        | 50 +++++++++----------
 .../client/src/components/MkSubNoteContent.vue     |  2 +-
 packages/client/src/components/MkSuperMenu.vue     |  6 +--
 packages/client/src/components/MkUrlPreview.vue    |  2 +-
 packages/client/src/components/MkVisibility.vue    |  8 ++--
 .../client/src/components/MkVisibilityPicker.vue   | 12 ++---
 packages/client/src/components/MkWaitingDialog.vue |  2 +-
 packages/client/src/components/MkWidgets.vue       |  8 ++--
 packages/client/src/components/MkWindow.vue        |  2 +-
 packages/client/src/components/form/checkbox.vue   |  2 +-
 packages/client/src/components/form/folder.vue     |  8 ++--
 packages/client/src/components/form/input.vue      |  2 +-
 packages/client/src/components/form/link.vue       |  4 +-
 packages/client/src/components/form/radio.vue      |  3 +-
 packages/client/src/components/form/select.vue     |  4 +-
 packages/client/src/components/form/suspense.vue   |  2 +-
 packages/client/src/components/form/textarea.vue   |  2 +-
 packages/client/src/components/global/MkA.vue      |  8 ++--
 packages/client/src/components/global/MkAd.vue     |  2 +-
 packages/client/src/components/global/MkError.vue  |  2 +-
 .../client/src/components/global/MkPageHeader.vue  |  2 +-
 packages/client/src/components/global/MkUrl.vue    |  2 +-
 packages/client/src/components/page/page.post.vue  |  4 +-
 packages/client/src/navbar.ts                      | 32 ++++++-------
 packages/client/src/pages/_error_.vue              |  4 +-
 packages/client/src/pages/about-misskey.vue        |  6 +--
 packages/client/src/pages/about.emojis.vue         |  2 +-
 packages/client/src/pages/about.federation.vue     |  2 +-
 packages/client/src/pages/about.vue                |  8 ++--
 packages/client/src/pages/admin-file.vue           | 10 ++--
 packages/client/src/pages/admin/abuses.vue         |  2 +-
 packages/client/src/pages/admin/ads.vue            |  8 ++--
 packages/client/src/pages/admin/announcements.vue  |  8 ++--
 packages/client/src/pages/admin/bot-protection.vue | 14 +++---
 packages/client/src/pages/admin/database.vue       | 22 +++++----
 packages/client/src/pages/admin/email-settings.vue |  4 +-
 .../client/src/pages/admin/emoji-edit-dialog.vue   |  2 +-
 packages/client/src/pages/admin/emojis.vue         | 56 +++++++++++-----------
 packages/client/src/pages/admin/files.vue          |  6 +--
 packages/client/src/pages/admin/index.vue          | 48 +++++++++----------
 packages/client/src/pages/admin/instance-block.vue |  4 +-
 .../src/pages/admin/integrations.discord.vue       |  6 +--
 .../client/src/pages/admin/integrations.github.vue |  6 +--
 .../src/pages/admin/integrations.twitter.vue       |  6 +--
 packages/client/src/pages/admin/integrations.vue   |  2 +-
 packages/client/src/pages/admin/object-storage.vue |  8 ++--
 packages/client/src/pages/admin/other-settings.vue |  4 +-
 packages/client/src/pages/admin/overview.vue       |  2 +-
 packages/client/src/pages/admin/relays.vue         | 12 ++---
 packages/client/src/pages/admin/security.vue       | 12 ++---
 packages/client/src/pages/admin/settings.vue       | 22 ++++-----
 packages/client/src/pages/admin/users.vue          |  8 ++--
 packages/client/src/pages/announcements.vue        |  4 +-
 packages/client/src/pages/antenna-timeline.vue     |  4 +-
 packages/client/src/pages/api-console.vue          |  4 +-
 packages/client/src/pages/channel-editor.vue       | 10 ++--
 packages/client/src/pages/channel.vue              | 12 ++---
 packages/client/src/pages/channels.vue             | 10 ++--
 packages/client/src/pages/clip.vue                 |  6 +--
 packages/client/src/pages/drive.vue                |  2 +-
 packages/client/src/pages/emojis.emoji.vue         |  2 +-
 packages/client/src/pages/explore.users.vue        | 18 +++----
 packages/client/src/pages/explore.vue              |  8 ++--
 packages/client/src/pages/favorites.vue            |  2 +-
 packages/client/src/pages/follow-requests.vue      |  6 +--
 packages/client/src/pages/gallery/edit.vue         | 14 +++---
 packages/client/src/pages/gallery/index.vue        | 14 +++---
 packages/client/src/pages/gallery/post.vue         | 14 +++---
 packages/client/src/pages/instance-info.vue        | 14 +++---
 packages/client/src/pages/messaging/index.vue      |  8 ++--
 .../src/pages/messaging/messaging-room.form.vue    |  6 +--
 .../src/pages/messaging/messaging-room.message.vue |  2 +-
 .../client/src/pages/messaging/messaging-room.vue  |  4 +-
 packages/client/src/pages/mfm-cheat-sheet.vue      |  2 +-
 packages/client/src/pages/my-antennas/create.vue   |  2 +-
 packages/client/src/pages/my-antennas/edit.vue     |  2 +-
 packages/client/src/pages/my-antennas/editor.vue   |  4 +-
 packages/client/src/pages/my-antennas/index.vue    |  4 +-
 packages/client/src/pages/my-clips/index.vue       |  6 +--
 packages/client/src/pages/my-lists/index.vue       |  6 +--
 packages/client/src/pages/my-lists/list.vue        |  4 +-
 packages/client/src/pages/not-found.vue            |  2 +-
 packages/client/src/pages/note.vue                 |  4 +-
 packages/client/src/pages/notifications.vue        | 12 ++---
 .../page-editor/els/page-editor.el.button.vue      |  2 +-
 .../page-editor/els/page-editor.el.counter.vue     |  2 +-
 .../pages/page-editor/els/page-editor.el.if.vue    |  2 +-
 .../els/page-editor.el.number-input.vue            |  2 +-
 .../pages/page-editor/els/page-editor.el.post.vue  |  2 +-
 .../els/page-editor.el.radio-button.vue            |  2 +-
 .../page-editor/els/page-editor.el.section.vue     |  4 +-
 .../page-editor/els/page-editor.el.switch.vue      |  2 +-
 .../page-editor/els/page-editor.el.text-input.vue  |  2 +-
 .../els/page-editor.el.textarea-input.vue          |  2 +-
 .../pages/page-editor/page-editor.container.vue    |  8 ++--
 .../pages/page-editor/page-editor.script-block.vue |  4 +-
 .../client/src/pages/page-editor/page-editor.vue   | 22 ++++-----
 packages/client/src/pages/page.vue                 |  8 ++--
 packages/client/src/pages/pages.vue                |  8 ++--
 packages/client/src/pages/preview.vue              |  2 +-
 packages/client/src/pages/registry.keys.vue        |  2 +-
 packages/client/src/pages/registry.value.vue       |  6 +--
 packages/client/src/pages/registry.vue             |  2 +-
 packages/client/src/pages/reset-password.vue       |  4 +-
 packages/client/src/pages/scratchpad.vue           |  4 +-
 packages/client/src/pages/search.vue               |  2 +-
 packages/client/src/pages/settings/2fa.vue         |  4 +-
 .../client/src/pages/settings/account-info.vue     |  2 +-
 packages/client/src/pages/settings/accounts.vue    |  6 +--
 packages/client/src/pages/settings/api.vue         |  2 +-
 packages/client/src/pages/settings/apps.vue        |  4 +-
 packages/client/src/pages/settings/custom-css.vue  |  2 +-
 packages/client/src/pages/settings/deck.vue        |  2 +-
 .../client/src/pages/settings/delete-account.vue   |  2 +-
 packages/client/src/pages/settings/drive.vue       |  2 +-
 packages/client/src/pages/settings/email.vue       |  6 +--
 packages/client/src/pages/settings/general.vue     | 10 ++--
 .../client/src/pages/settings/import-export.vue    | 38 +++++++--------
 packages/client/src/pages/settings/index.vue       | 50 +++++++++----------
 .../client/src/pages/settings/instance-mute.vue    |  4 +-
 packages/client/src/pages/settings/integration.vue |  2 +-
 packages/client/src/pages/settings/mute-block.vue  |  2 +-
 packages/client/src/pages/settings/navbar.vue      |  2 +-
 .../client/src/pages/settings/notifications.vue    |  4 +-
 packages/client/src/pages/settings/other.vue       |  6 +--
 .../client/src/pages/settings/plugin.install.vue   |  4 +-
 packages/client/src/pages/settings/plugin.vue      |  8 ++--
 .../src/pages/settings/preferences-backups.vue     | 12 ++---
 packages/client/src/pages/settings/privacy.vue     |  2 +-
 packages/client/src/pages/settings/profile.vue     |  6 +--
 packages/client/src/pages/settings/reaction.vue    |  8 ++--
 packages/client/src/pages/settings/security.vue    |  6 +--
 packages/client/src/pages/settings/sounds.vue      |  4 +-
 packages/client/src/pages/settings/statusbar.vue   |  2 +-
 .../client/src/pages/settings/theme.install.vue    |  6 +--
 .../client/src/pages/settings/theme.manage.vue     |  2 +-
 packages/client/src/pages/settings/theme.vue       | 14 +++---
 .../client/src/pages/settings/webhook.edit.vue     |  6 +--
 packages/client/src/pages/settings/webhook.new.vue |  6 +--
 packages/client/src/pages/settings/webhook.vue     |  8 ++--
 packages/client/src/pages/settings/word-mute.vue   |  4 +-
 packages/client/src/pages/share.vue                |  2 +-
 packages/client/src/pages/signup-complete.vue      |  2 +-
 packages/client/src/pages/tag.vue                  |  2 +-
 packages/client/src/pages/theme-editor.vue         |  8 ++--
 packages/client/src/pages/timeline.tutorial.vue    |  8 ++--
 packages/client/src/pages/timeline.vue             | 16 +++----
 packages/client/src/pages/user-info.vue            | 16 +++----
 packages/client/src/pages/user-list-timeline.vue   |  4 +-
 packages/client/src/pages/user/followers.vue       |  2 +-
 packages/client/src/pages/user/following.vue       |  2 +-
 packages/client/src/pages/user/home.vue            | 16 +++----
 packages/client/src/pages/user/index.activity.vue  |  4 +-
 packages/client/src/pages/user/index.vue           | 10 ++--
 packages/client/src/pages/welcome.entrance.a.vue   |  8 ++--
 packages/client/src/pages/welcome.entrance.b.vue   |  6 +--
 packages/client/src/pages/welcome.entrance.c.vue   |  8 ++--
 packages/client/src/pages/welcome.setup.vue        |  2 +-
 packages/client/src/pages/welcome.timeline.vue     |  2 +-
 packages/client/src/scripts/get-note-menu.ts       | 46 +++++++++---------
 packages/client/src/scripts/get-user-menu.ts       | 28 +++++------
 packages/client/src/scripts/hpml/index.ts          |  2 +-
 packages/client/src/scripts/hpml/lib.ts            | 18 +++----
 packages/client/src/scripts/select-file.ts         |  6 +--
 packages/client/src/style.scss                     | 19 ++++++++
 .../client/src/ui/_common_/navbar-for-mobile.vue   | 32 ++++++-------
 packages/client/src/ui/_common_/navbar.vue         | 32 ++++++-------
 packages/client/src/ui/classic.header.vue          | 16 +++----
 packages/client/src/ui/classic.sidebar.vue         | 16 +++----
 packages/client/src/ui/classic.vue                 |  2 +-
 packages/client/src/ui/classic.widgets.vue         |  4 +-
 packages/client/src/ui/deck.vue                    | 18 +++----
 packages/client/src/ui/deck/antenna-column.vue     |  4 +-
 packages/client/src/ui/deck/column.vue             | 24 +++++-----
 packages/client/src/ui/deck/direct-column.vue      |  2 +-
 packages/client/src/ui/deck/list-column.vue        |  4 +-
 packages/client/src/ui/deck/main-column.vue        |  2 +-
 packages/client/src/ui/deck/mentions-column.vue    |  2 +-
 .../client/src/ui/deck/notifications-column.vue    |  4 +-
 packages/client/src/ui/deck/tl-column.vue          | 12 ++---
 packages/client/src/ui/deck/widgets-column.vue     |  2 +-
 packages/client/src/ui/universal.vue               | 14 +++---
 packages/client/src/ui/universal.widgets.vue       |  4 +-
 packages/client/src/ui/visitor/b.vue               |  6 +--
 packages/client/src/ui/visitor/header.vue          | 20 ++++----
 packages/client/src/widgets/activity.vue           |  4 +-
 packages/client/src/widgets/aiscript.vue           |  2 +-
 packages/client/src/widgets/federation.vue         |  2 +-
 packages/client/src/widgets/job-queue.vue          |  4 +-
 packages/client/src/widgets/notifications.vue      |  4 +-
 packages/client/src/widgets/rss-ticker.vue         |  4 +-
 packages/client/src/widgets/rss.vue                |  4 +-
 packages/client/src/widgets/server-metric/cpu.vue  |  2 +-
 packages/client/src/widgets/server-metric/disk.vue |  2 +-
 .../client/src/widgets/server-metric/index.vue     |  4 +-
 packages/client/src/widgets/timeline.vue           | 26 +++++-----
 packages/client/src/widgets/trends.vue             |  2 +-
 yarn.lock                                          | 24 ++++++----
 240 files changed, 981 insertions(+), 947 deletions(-)

(limited to 'packages/client/src')

diff --git a/gulpfile.js b/gulpfile.js
index 90f8ebaabe..07a8a99d69 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -19,8 +19,8 @@ gulp.task('copy:client:fonts', () =>
 	gulp.src('./packages/client/node_modules/three/examples/fonts/**/*').pipe(gulp.dest('./built/_client_dist_/fonts/'))
 );
 
-gulp.task('copy:client:fontawesome', () =>
-	gulp.src('./packages/client/node_modules/@fortawesome/fontawesome-free/**/*').pipe(gulp.dest('./built/_client_dist_/fontawesome/'))
+gulp.task('copy:client:tabler-icons', () =>
+	gulp.src('./packages/client/node_modules/@tabler/icons/iconfont/**/*').pipe(gulp.dest('./built/_client_dist_/tabler-icons/'))
 );
 
 gulp.task('copy:client:locales', cb => {
@@ -53,7 +53,7 @@ gulp.task('build:backend:style', () => {
 });
 
 gulp.task('build', gulp.parallel(
-	'copy:client:locales', 'copy:backend:views', 'build:backend:script', 'build:backend:style', 'copy:client:fonts', 'copy:client:fontawesome'
+	'copy:client:locales', 'copy:backend:views', 'build:backend:script', 'build:backend:style', 'copy:client:fonts', 'copy:client:tabler-icons'
 ));
 
 gulp.task('default', gulp.task('build'));
diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug
index 7d802d37ce..1b3ac82d2e 100644
--- a/packages/backend/src/server/web/views/base.pug
+++ b/packages/backend/src/server/web/views/base.pug
@@ -34,7 +34,7 @@ html
 		link(rel='prefetch' href='https://xn--931a.moe/assets/info.jpg')
 		link(rel='prefetch' href='https://xn--931a.moe/assets/not-found.jpg')
 		link(rel='prefetch' href='https://xn--931a.moe/assets/error.jpg')
-		link(rel='stylesheet' href='/assets/fontawesome/css/all.css')
+		link(rel='stylesheet' href='/assets/tabler-icons/tabler-icons.css')
 		link(rel='modulepreload' href=`/assets/${clientEntry.file}`)
 
 		if Array.isArray(clientEntry.css)
diff --git a/packages/client/package.json b/packages/client/package.json
index 34556d5fda..6ed9c5d1fe 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -8,11 +8,11 @@
 	},
 	"dependencies": {
 		"@discordapp/twemoji": "14.0.2",
-		"@fortawesome/fontawesome-free": "6.1.2",
 		"@rollup/plugin-alias": "4.0.2",
 		"@rollup/plugin-json": "6.0.0",
 		"@rollup/pluginutils": "5.0.2",
 		"@syuilo/aiscript": "0.11.1",
+		"@tabler/icons": "^1.117.0",
 		"@vitejs/plugin-vue": "4.0.0",
 		"@vue/compiler-sfc": "3.2.45",
 		"autobind-decorator": "2.4.0",
diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts
index e9c29d6b0d..0e991cdfb5 100644
--- a/packages/client/src/account.ts
+++ b/packages/client/src/account.ts
@@ -213,7 +213,7 @@ export async function openAccountMenu(opts: {
 			avatar: $i,
 		}, null, ...(opts.includeCurrentAccount ? [createItem($i)] : []), ...accountItemPromises, {
 			type: 'parent',
-			icon: 'fas fa-plus',
+			icon: 'ti ti-plus',
 			text: i18n.ts.addAccount,
 			children: [{
 				text: i18n.ts.existingAccount,
@@ -224,7 +224,7 @@ export async function openAccountMenu(opts: {
 			}],
 		}, {
 			type: 'link',
-			icon: 'fas fa-users',
+			icon: 'ti ti-users',
 			text: i18n.ts.manageAccounts,
 			to: '/settings/accounts',
 		}]], ev.currentTarget ?? ev.target, {
diff --git a/packages/client/src/components/MkAbuseReportWindow.vue b/packages/client/src/components/MkAbuseReportWindow.vue
index 1862d0a0e4..03890b4e97 100644
--- a/packages/client/src/components/MkAbuseReportWindow.vue
+++ b/packages/client/src/components/MkAbuseReportWindow.vue
@@ -1,7 +1,7 @@
 <template>
 <XWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
 	<template #header>
-		<i class="fas fa-exclamation-circle" style="margin-right: 0.5em;"></i>
+		<i class="ti ti-exclamation-circle" style="margin-right: 0.5em;"></i>
 		<I18n :src="i18n.ts.reportAbuseOf" tag="span">
 			<template #name>
 				<b><MkAcct :user="user"/></b>
diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index 64698aa00c..1cee1725aa 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -108,7 +108,7 @@ function onMousedown(evt: MouseEvent): void {
 	padding: 8px 16px;
 	text-align: center;
 	font-weight: normal;
-	font-size: 1em;
+	font-size: 90%;
 	box-shadow: none;
 	text-decoration: none;
 	background: var(--buttonBg);
diff --git a/packages/client/src/components/MkChannelFollowButton.vue b/packages/client/src/components/MkChannelFollowButton.vue
index dff02beec0..46d57b4fc6 100644
--- a/packages/client/src/components/MkChannelFollowButton.vue
+++ b/packages/client/src/components/MkChannelFollowButton.vue
@@ -6,14 +6,14 @@
 >
 	<template v-if="!wait">
 		<template v-if="isFollowing">
-			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="fas fa-minus"></i>
+			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
 		</template>
 		<template v-else>
-			<span v-if="full">{{ i18n.ts.follow }}</span><i class="fas fa-plus"></i>
+			<span v-if="full">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
 		</template>
 	</template>
 	<template v-else>
-		<span v-if="full">{{ i18n.ts.processing }}</span><i class="fas fa-spinner fa-pulse fa-fw"></i>
+		<span v-if="full">{{ i18n.ts.processing }}</span><i class="fas fa-spinner fa-pulse ti-fw"></i>
 	</template>
 </button>
 </template>
diff --git a/packages/client/src/components/MkChannelPreview.vue b/packages/client/src/components/MkChannelPreview.vue
index dd3794a657..6ef50bddcf 100644
--- a/packages/client/src/components/MkChannelPreview.vue
+++ b/packages/client/src/components/MkChannelPreview.vue
@@ -2,10 +2,10 @@
 <MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
 	<div class="banner" :style="bannerStyle">
 		<div class="fade"></div>
-		<div class="name"><i class="fas fa-satellite-dish"></i> {{ channel.name }}</div>
+		<div class="name"><i class="ti ti-device-tv"></i> {{ channel.name }}</div>
 		<div class="status">
 			<div>
-				<i class="fas fa-users fa-fw"></i>
+				<i class="ti ti-users ti-fw"></i>
 				<I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;">
 					<template #n>
 						<b>{{ channel.usersCount }}</b>
@@ -13,7 +13,7 @@
 				</I18n>
 			</div>
 			<div>
-				<i class="fas fa-pencil-alt fa-fw"></i>
+				<i class="ti ti-pencil ti-fw"></i>
 				<I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;">
 					<template #n>
 						<b>{{ channel.notesCount }}</b>
diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index 4be59adc2a..c097946c19 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -5,8 +5,8 @@
 		<div class="sub">
 			<slot name="func"></slot>
 			<button v-if="foldable" class="_button" @click="() => showBody = !showBody">
-				<template v-if="showBody"><i class="fas fa-angle-up"></i></template>
-				<template v-else><i class="fas fa-angle-down"></i></template>
+				<template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
+				<template v-else><i class="ti ti-chevron-down"></i></template>
 			</button>
 		</div>
 	</header>
diff --git a/packages/client/src/components/MkDateSeparatedList.vue b/packages/client/src/components/MkDateSeparatedList.vue
index f63d9782b6..68903f3526 100644
--- a/packages/client/src/components/MkDateSeparatedList.vue
+++ b/packages/client/src/components/MkDateSeparatedList.vue
@@ -64,14 +64,14 @@ export default defineComponent({
 				}, [
 					h('span', [
 						h('i', {
-							class: 'fas fa-angle-up icon',
+							class: 'ti ti-chevron-up icon',
 						}),
 						getDateText(item.createdAt),
 					]),
 					h('span', [
 						getDateText(props.items[i + 1].createdAt),
 						h('i', {
-							class: 'fas fa-angle-down icon',
+							class: 'ti ti-chevron-down icon',
 						}),
 					]),
 				]));
diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index 513e2d22ba..8a46e9cdde 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -5,17 +5,17 @@
 			<i :class="icon"></i>
 		</div>
 		<div v-else-if="!input && !select" class="icon" :class="type">
-			<i v-if="type === 'success'" class="fas fa-check"></i>
-			<i v-else-if="type === 'error'" class="fas fa-times-circle"></i>
-			<i v-else-if="type === 'warning'" class="fas fa-exclamation-triangle"></i>
-			<i v-else-if="type === 'info'" class="fas fa-info-circle"></i>
-			<i v-else-if="type === 'question'" class="fas fa-question-circle"></i>
+			<i v-if="type === 'success'" class="ti ti-check"></i>
+			<i v-else-if="type === 'error'" class="ti ti-circle-x"></i>
+			<i v-else-if="type === 'warning'" class="ti ti-alert-triangle"></i>
+			<i v-else-if="type === 'info'" class="ti ti-info-circle"></i>
+			<i v-else-if="type === 'question'" class="ti ti-question-circle"></i>
 			<i v-else-if="type === 'waiting'" class="fas fa-spinner fa-pulse"></i>
 		</div>
 		<header v-if="title"><Mfm :text="title"/></header>
 		<div v-if="text" class="body"><Mfm :text="text"/></div>
 		<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" @keydown="onInputKeydown">
-			<template v-if="input.type === 'password'" #prefix><i class="fas fa-lock"></i></template>
+			<template v-if="input.type === 'password'" #prefix><i class="ti ti-lock"></i></template>
 		</MkInput>
 		<MkSelect v-if="select" v-model="selectedValue" autofocus>
 			<template v-if="select.items">
@@ -155,7 +155,7 @@ onBeforeUnmount(() => {
 	border-radius: var(--radius);
 
 	> .icon {
-		font-size: 32px;
+		font-size: 24px;
 
 		&.info {
 			color: #55c4dd;
diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue
index 22916d5680..4ac63d5b95 100644
--- a/packages/client/src/components/MkDrive.file.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -63,30 +63,30 @@ const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(pro
 function getMenu() {
 	return [{
 		text: i18n.ts.rename,
-		icon: 'fas fa-i-cursor',
+		icon: 'ti ti-cursor-text',
 		action: rename,
 	}, {
 		text: props.file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
-		icon: props.file.isSensitive ? 'fas fa-eye' : 'fas fa-eye-slash',
+		icon: props.file.isSensitive ? 'ti ti-eye' : 'ti ti-eye-off',
 		action: toggleSensitive,
 	}, {
 		text: i18n.ts.describeFile,
-		icon: 'fas fa-i-cursor',
+		icon: 'ti ti-cursor-text',
 		action: describe,
 	}, null, {
 		text: i18n.ts.copyUrl,
-		icon: 'fas fa-link',
+		icon: 'ti ti-link',
 		action: copyUrl,
 	}, {
 		type: 'a',
 		href: props.file.url,
 		target: '_blank',
 		text: i18n.ts.download,
-		icon: 'fas fa-download',
+		icon: 'ti ti-download',
 		download: props.file.name,
 	}, null, {
 		text: i18n.ts.delete,
-		icon: 'fas fa-trash-alt',
+		icon: 'ti ti-trash',
 		danger: true,
 		action: deleteFile,
 	}];
diff --git a/packages/client/src/components/MkDrive.folder.vue b/packages/client/src/components/MkDrive.folder.vue
index 6c522c0862..78d1816522 100644
--- a/packages/client/src/components/MkDrive.folder.vue
+++ b/packages/client/src/components/MkDrive.folder.vue
@@ -16,8 +16,8 @@
 	@dragend="onDragend"
 >
 	<p class="name">
-		<template v-if="hover"><i class="fas fa-folder-open fa-fw"></i></template>
-		<template v-if="!hover"><i class="fas fa-folder fa-fw"></i></template>
+		<template v-if="hover"><i class="fas fa-folder-open ti-fw"></i></template>
+		<template v-if="!hover"><i class="fas fa-folder ti-fw"></i></template>
 		{{ folder.name }}
 	</p>
 	<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
@@ -253,11 +253,11 @@ function onContextmenu(ev: MouseEvent) {
 		},
 	}, null, {
 		text: i18n.ts.rename,
-		icon: 'fas fa-i-cursor',
+		icon: 'ti ti-cursor-text',
 		action: rename,
 	}, null, {
 		text: i18n.ts.delete,
-		icon: 'fas fa-trash-alt',
+		icon: 'ti ti-trash',
 		danger: true,
 		action: deleteFolder,
 	}], ev);
diff --git a/packages/client/src/components/MkDrive.navFolder.vue b/packages/client/src/components/MkDrive.navFolder.vue
index 455c14f95e..3614113501 100644
--- a/packages/client/src/components/MkDrive.navFolder.vue
+++ b/packages/client/src/components/MkDrive.navFolder.vue
@@ -7,7 +7,7 @@
 	@dragleave="onDragleave"
 	@drop.stop="onDrop"
 >
-	<i v-if="folder == null" class="fas fa-cloud"></i>
+	<i v-if="folder == null" class="ti ti-cloud"></i>
 	<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
 </div>
 </template>
diff --git a/packages/client/src/components/MkDrive.vue b/packages/client/src/components/MkDrive.vue
index c79ab97000..83b16cfc60 100644
--- a/packages/client/src/components/MkDrive.vue
+++ b/packages/client/src/components/MkDrive.vue
@@ -11,7 +11,7 @@
 				@removeFolder="removeFolder"
 			/>
 			<template v-for="f in hierarchyFolders">
-				<span class="separator"><i class="fas fa-angle-right"></i></span>
+				<span class="separator"><i class="ti ti-chevron-right"></i></span>
 				<XNavFolder
 					:folder="f"
 					:parent-folder="folder"
@@ -21,10 +21,10 @@
 					@removeFolder="removeFolder"
 				/>
 			</template>
-			<span v-if="folder != null" class="separator"><i class="fas fa-angle-right"></i></span>
+			<span v-if="folder != null" class="separator"><i class="ti ti-chevron-right"></i></span>
 			<span v-if="folder != null" class="folder current">{{ folder.name }}</span>
 		</div>
-		<button class="menu _button" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
+		<button class="menu _button" @click="showMenu"><i class="ti ti-dots"></i></button>
 	</nav>
 	<div
 		ref="main" class="main"
@@ -588,22 +588,22 @@ function getMenu() {
 		type: 'label',
 	}, {
 		text: i18n.ts.upload,
-		icon: 'fas fa-upload',
+		icon: 'ti ti-upload',
 		action: () => { selectLocalFile(); },
 	}, {
 		text: i18n.ts.fromUrl,
-		icon: 'fas fa-link',
+		icon: 'ti ti-link',
 		action: () => { urlUpload(); },
 	}, null, {
 		text: folder.value ? folder.value.name : i18n.ts.drive,
 		type: 'label',
 	}, folder.value ? {
 		text: i18n.ts.renameFolder,
-		icon: 'fas fa-i-cursor',
+		icon: 'ti ti-cursor-text',
 		action: () => { renameFolder(folder.value); },
 	} : undefined, folder.value ? {
 		text: i18n.ts.deleteFolder,
-		icon: 'fas fa-trash-alt',
+		icon: 'ti ti-trash',
 		action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
 	} : undefined, {
 		text: i18n.ts.createFolder,
diff --git a/packages/client/src/components/MkDriveFileThumbnail.vue b/packages/client/src/components/MkDriveFileThumbnail.vue
index de65d2f25b..33379ed5ca 100644
--- a/packages/client/src/components/MkDriveFileThumbnail.vue
+++ b/packages/client/src/components/MkDriveFileThumbnail.vue
@@ -1,16 +1,16 @@
 <template>
 <div ref="thumbnail" class="zdjebgpv">
 	<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
-	<i v-else-if="is === 'image'" class="fas fa-file-image icon"></i>
-	<i v-else-if="is === 'video'" class="fas fa-file-video icon"></i>
-	<i v-else-if="is === 'audio' || is === 'midi'" class="fas fa-music icon"></i>
-	<i v-else-if="is === 'csv'" class="fas fa-file-csv icon"></i>
-	<i v-else-if="is === 'pdf'" class="fas fa-file-pdf icon"></i>
-	<i v-else-if="is === 'textfile'" class="fas fa-file-alt icon"></i>
-	<i v-else-if="is === 'archive'" class="fas fa-file-archive icon"></i>
-	<i v-else class="fas fa-file icon"></i>
+	<i v-else-if="is === 'image'" class="ti ti-photo icon"></i>
+	<i v-else-if="is === 'video'" class="ti ti-video icon"></i>
+	<i v-else-if="is === 'audio' || is === 'midi'" class="ti ti-file-music icon"></i>
+	<i v-else-if="is === 'csv'" class="ti ti-file-text icon"></i>
+	<i v-else-if="is === 'pdf'" class="ti ti-file-text icon"></i>
+	<i v-else-if="is === 'textfile'" class="ti ti-file-text icon"></i>
+	<i v-else-if="is === 'archive'" class="ti ti-file-zip icon"></i>
+	<i v-else class="ti ti-file icon"></i>
 
-	<i v-if="isThumbnailAvailable && is === 'video'" class="fas fa-film icon-sub"></i>
+	<i v-if="isThumbnailAvailable && is === 'video'" class="ti ti-video icon-sub"></i>
 </div>
 </template>
 
diff --git a/packages/client/src/components/MkEmojiPicker.section.vue b/packages/client/src/components/MkEmojiPicker.section.vue
index e2a80d5466..f6ba7abfc4 100644
--- a/packages/client/src/components/MkEmojiPicker.section.vue
+++ b/packages/client/src/components/MkEmojiPicker.section.vue
@@ -2,7 +2,7 @@
 <!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
 <section>
 	<header class="_acrylic" @click="shown = !shown">
-		<i class="toggle fa-fw" :class="shown ? 'fas fa-chevron-down' : 'fas fa-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
+		<i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
 	</header>
 	<div v-if="shown" class="body">
 		<button
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index 3dc90ce545..a85ba2b9be 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -46,7 +46,7 @@
 			</section>
 
 			<section>
-				<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ i18n.ts.recentUsed }}</header>
+				<header class="_acrylic"><i class="far fa-clock ti-fw"></i> {{ i18n.ts.recentUsed }}</header>
 				<div class="body">
 					<button
 						v-for="emoji in recentlyUsedEmojis"
@@ -69,10 +69,10 @@
 		</div>
 	</div>
 	<div class="tabs">
-		<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="fas fa-asterisk fa-fw"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="fas fa-laugh fa-fw"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="fas fa-leaf fa-fw"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="fas fa-hashtag fa-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="fas fa-asterisk ti-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="ti ti-mood-happy ti-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="fas fa-leaf ti-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="ti ti-hash ti-fw"></i></button>
 	</div>
 </div>
 </template>
diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue
index 7daa82cbd3..bc9bff99b6 100644
--- a/packages/client/src/components/MkFolder.vue
+++ b/packages/client/src/components/MkFolder.vue
@@ -4,8 +4,8 @@
 		<div class="title"><slot name="header"></slot></div>
 		<div class="divider"></div>
 		<button class="_button">
-			<template v-if="showBody"><i class="fas fa-angle-up"></i></template>
-			<template v-else><i class="fas fa-angle-down"></i></template>
+			<template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
+			<template v-else><i class="ti ti-chevron-down"></i></template>
 		</button>
 	</header>
 	<transition :name="$store.state.animation ? 'folder-toggle' : ''"
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index efee795e43..1099893b0d 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -12,17 +12,17 @@
 			<span v-if="full">{{ i18n.ts.processing }}</span><i class="fas fa-spinner fa-pulse"></i>
 		</template>
 		<template v-else-if="isFollowing">
-			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="fas fa-minus"></i>
+			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
 		</template>
 		<template v-else-if="!isFollowing && user.isLocked">
-			<span v-if="full">{{ i18n.ts.followRequest }}</span><i class="fas fa-plus"></i>
+			<span v-if="full">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i>
 		</template>
 		<template v-else-if="!isFollowing && !user.isLocked">
-			<span v-if="full">{{ i18n.ts.follow }}</span><i class="fas fa-plus"></i>
+			<span v-if="full">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
 		</template>
 	</template>
 	<template v-else>
-		<span v-if="full">{{ i18n.ts.processing }}</span><i class="fas fa-spinner fa-pulse fa-fw"></i>
+		<span v-if="full">{{ i18n.ts.processing }}</span><i class="fas fa-spinner fa-pulse ti-fw"></i>
 	</template>
 </button>
 </template>
diff --git a/packages/client/src/components/MkGoogle.vue b/packages/client/src/components/MkGoogle.vue
index bb4b439ee8..d104cd4cd4 100644
--- a/packages/client/src/components/MkGoogle.vue
+++ b/packages/client/src/components/MkGoogle.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mk-google">
 	<input v-model="query" type="search" :placeholder="q">
-	<button @click="search"><i class="fas fa-search"></i> {{ $ts.searchByGoogle }}</button>
+	<button @click="search"><i class="ti ti-search"></i> {{ $ts.searchByGoogle }}</button>
 </div>
 </template>
 
diff --git a/packages/client/src/components/MkInfo.vue b/packages/client/src/components/MkInfo.vue
index 4fdfc5c5e6..2eb6bdbe47 100644
--- a/packages/client/src/components/MkInfo.vue
+++ b/packages/client/src/components/MkInfo.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="fpezltsf" :class="{ warn }">
-	<i v-if="warn" class="fas fa-exclamation-triangle"></i>
-	<i v-else class="fas fa-info-circle"></i>
+	<i v-if="warn" class="ti ti-alert-triangle"></i>
+	<i v-else class="ti ti-info-circle"></i>
 	<slot></slot>
 </div>
 </template>
diff --git a/packages/client/src/components/MkLaunchPad.vue b/packages/client/src/components/MkLaunchPad.vue
index 19283178c9..1ccc648c72 100644
--- a/packages/client/src/components/MkLaunchPad.vue
+++ b/packages/client/src/components/MkLaunchPad.vue
@@ -6,12 +6,12 @@
 				<button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
 					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
-					<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
+					<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
 				</button>
 				<MkA v-else v-click-anime :to="item.to" @click.passive="close()">
 					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
-					<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
+					<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
 				</MkA>
 			</template>
 		</div>
diff --git a/packages/client/src/components/MkLink.vue b/packages/client/src/components/MkLink.vue
index 649523abc2..6148ec6195 100644
--- a/packages/client/src/components/MkLink.vue
+++ b/packages/client/src/components/MkLink.vue
@@ -1,9 +1,10 @@
 <template>
-<component :is="self ? 'MkA' : 'a'" ref="el" class="xlcxczvw _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
+<component
+	:is="self ? 'MkA' : 'a'" ref="el" class="xlcxczvw _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
 	:title="url"
 >
 	<slot></slot>
-	<i v-if="target === '_blank'" class="fas fa-external-link-square-alt icon"></i>
+	<i v-if="target === '_blank'" class="ti ti-external-link icon"></i>
 </component>
 </template>
 
diff --git a/packages/client/src/components/MkMediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
index 5093f11e97..aa06c00fc6 100644
--- a/packages/client/src/components/MkMediaBanner.vue
+++ b/packages/client/src/components/MkMediaBanner.vue
@@ -1,25 +1,28 @@
 <template>
 <div class="mk-media-banner">
 	<div v-if="media.isSensitive && hide" class="sensitive" @click="hide = false">
-		<span class="icon"><i class="fas fa-exclamation-triangle"></i></span>
+		<span class="icon"><i class="ti ti-alert-triangle"></i></span>
 		<b>{{ $ts.sensitive }}</b>
 		<span>{{ $ts.clickToShow }}</span>
 	</div>
 	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
-		<audio ref="audioEl"
+		<audio
+			ref="audioEl"
 			class="audio"
 			:src="media.url"
 			:title="media.name"
 			controls
 			preload="metadata"
-			@volumechange="volumechange" />
+			@volumechange="volumechange"
+		/>
 	</div>
-	<a v-else class="download"
+	<a
+		v-else class="download"
 		:href="media.url"
 		:title="media.name"
 		:download="media.name"
 	>
-		<span class="icon"><i class="fas fa-download"></i></span>
+		<span class="icon"><i class="ti ti-download"></i></span>
 		<b>{{ media.name }}</b>
 	</a>
 </div>
diff --git a/packages/client/src/components/MkMediaImage.vue b/packages/client/src/components/MkMediaImage.vue
index 92f1bd2dbd..56570eaa05 100644
--- a/packages/client/src/components/MkMediaImage.vue
+++ b/packages/client/src/components/MkMediaImage.vue
@@ -3,7 +3,7 @@
 	<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
 	<div class="text">
 		<div class="wrapper">
-			<b style="display: block;"><i class="fas fa-exclamation-triangle"></i> {{ $ts.sensitive }}</b>
+			<b style="display: block;"><i class="ti ti-alert-triangle"></i> {{ $ts.sensitive }}</b>
 			<span style="display: block;">{{ $ts.clickToShow }}</span>
 		</div>
 	</div>
@@ -16,7 +16,7 @@
 		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :title="image.comment" :cover="false"/>
 		<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
 	</a>
-	<button v-tooltip="$ts.hide" class="_button hide" @click="hide = true"><i class="fas fa-eye-slash"></i></button>
+	<button v-tooltip="$ts.hide" class="_button hide" @click="hide = true"><i class="ti ti-eye-off"></i></button>
 </div>
 </template>
 
diff --git a/packages/client/src/components/MkMediaVideo.vue b/packages/client/src/components/MkMediaVideo.vue
index 5c38691e69..df0bf84116 100644
--- a/packages/client/src/components/MkMediaVideo.vue
+++ b/packages/client/src/components/MkMediaVideo.vue
@@ -1,7 +1,7 @@
 <template>
 <div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
 	<div>
-		<b><i class="fas fa-exclamation-triangle"></i> {{ $ts.sensitive }}</b>
+		<b><i class="ti ti-alert-triangle"></i> {{ $ts.sensitive }}</b>
 		<span>{{ $ts.clickToShow }}</span>
 	</div>
 </div>
@@ -19,7 +19,7 @@
 			:type="video.type"
 		>
 	</video>
-	<i class="fas fa-eye-slash" @click="hide = true"></i>
+	<i class="ti ti-eye-off" @click="hide = true"></i>
 </div>
 </template>
 
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index 87755916a7..64d18b6b7c 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -16,33 +16,33 @@
 				<span><MkEllipsis/></span>
 			</span>
 			<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
+				<i v-if="item.icon" class="ti-fw" :class="item.icon"></i>
 				<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 				<span>{{ item.text }}</span>
-				<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
+				<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
 			</MkA>
 			<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
+				<i v-if="item.icon" class="ti-fw" :class="item.icon"></i>
 				<span>{{ item.text }}</span>
-				<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
+				<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
 			</a>
 			<button v-else-if="item.type === 'user'" :tabindex="i" class="_button item" :class="{ active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
 				<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
-				<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
+				<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
 			</button>
 			<span v-else-if="item.type === 'switch'" :tabindex="i" class="item" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
 				<FormSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch">{{ item.text }}</FormSwitch>
 			</span>
 			<button v-else-if="item.type === 'parent'" :tabindex="i" class="_button item parent" :class="{ childShowing: childShowingItem === item }" @mouseenter="showChildren(item, $event)">
-				<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
+				<i v-if="item.icon" class="ti-fw" :class="item.icon"></i>
 				<span>{{ item.text }}</span>
-				<span class="caret"><i class="fas fa-caret-right fa-fw"></i></span>
+				<span class="caret"><i class="ti ti-caret-right ti-fw"></i></span>
 			</button>
 			<button v-else :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
+				<i v-if="item.icon" class="ti-fw" :class="item.icon"></i>
 				<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
 				<span>{{ item.text }}</span>
-				<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
+				<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
 			</button>
 		</template>
 		<span v-if="items2.length === 0" class="none item">
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index cc3f4c96cc..82b04b6670 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -2,13 +2,13 @@
 <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
 	<div ref="rootEl" class="hrmcaedk _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
 		<div class="header" @contextmenu="onContextmenu">
-			<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
+			<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="ti ti-arrow-left"></i></button>
 			<span v-else style="display: inline-block; width: 20px"></span>
 			<span v-if="pageMetadata?.value" class="title">
 				<i v-if="pageMetadata?.value.icon" class="icon" :class="pageMetadata?.value.icon"></i>
 				<span>{{ pageMetadata?.value.title }}</span>
 			</span>
-			<button class="_button" @click="$refs.modal.close()"><i class="fas fa-times"></i></button>
+			<button class="_button" @click="$refs.modal.close()"><i class="ti ti-x"></i></button>
 		</div>
 		<div class="body">
 			<MkStickyContainer>
@@ -68,22 +68,22 @@ const contextmenu = $computed(() => {
 		type: 'label',
 		text: path,
 	}, {
-		icon: 'fas fa-expand-alt',
+		icon: 'ti ti-arrows-maximize',
 		text: i18n.ts.showInPage,
 		action: expand,
 	}, {
-		icon: 'fas fa-external-link-alt',
+		icon: 'ti ti-external-link',
 		text: i18n.ts.popout,
 		action: popout,
 	}, null, {
-		icon: 'fas fa-external-link-alt',
+		icon: 'ti ti-external-link',
 		text: i18n.ts.openInNewTab,
 		action: () => {
 			window.open(pageUrl, '_blank');
 			modal.close();
 		},
 	}, {
-		icon: 'fas fa-link',
+		icon: 'ti ti-link',
 		text: i18n.ts.copyLink,
 		action: () => {
 			copyToClipboard(pageUrl);
diff --git a/packages/client/src/components/MkModalWindow.vue b/packages/client/src/components/MkModalWindow.vue
index 5acd8c921f..d977ca6e9c 100644
--- a/packages/client/src/components/MkModalWindow.vue
+++ b/packages/client/src/components/MkModalWindow.vue
@@ -2,12 +2,12 @@
 <MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')">
 	<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>
+			<button v-if="withOkButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
 			<span class="title">
 				<slot name="header"></slot>
 			</span>
-			<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>
+			<button v-if="!withOkButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
+			<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ti ti-check"></i></button>
 		</div>
 		<div class="body">
 			<slot :width="bodyWidth" :height="bodyHeight"></slot>
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 97eadb1945..da51d14f03 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -10,12 +10,12 @@
 	:class="{ renote: isRenote }"
 >
 	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
-	<div v-if="pinned" class="info"><i class="fas fa-thumbtack"></i> {{ i18n.ts.pinnedNote }}</div>
-	<div v-if="appearNote._prId_" class="info"><i class="fas fa-bullhorn"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="fas fa-times"></i></button></div>
-	<div v-if="appearNote._featuredId_" class="info"><i class="fas fa-bolt"></i> {{ i18n.ts.featured }}</div>
+	<div v-if="pinned" class="info"><i class="ti ti-pin"></i> {{ i18n.ts.pinnedNote }}</div>
+	<div v-if="appearNote._prId_" class="info"><i class="fas fa-bullhorn"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ti ti-x"></i></button></div>
+	<div v-if="appearNote._featuredId_" class="info"><i class="ti ti-bolt"></i> {{ i18n.ts.featured }}</div>
 	<div v-if="isRenote" class="renote">
 		<MkAvatar class="avatar" :user="note.user"/>
-		<i class="fas fa-retweet"></i>
+		<i class="ti ti-repeat"></i>
 		<I18n :src="i18n.ts.renotedBy" tag="span">
 			<template #user>
 				<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
@@ -25,7 +25,7 @@
 		</I18n>
 		<div class="info">
 			<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
-				<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
+				<i v-if="isMyRenote" class="ti ti-dots dropdownIcon"></i>
 				<MkTime :time="note.createdAt"/>
 			</button>
 			<MkVisibility :note="note"/>
@@ -44,7 +44,7 @@
 				<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
-						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
+						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<a v-if="appearNote.renote != null" class="rp">RN:</a>
 						<div v-if="translating || translation" class="translation">
@@ -68,24 +68,24 @@
 						<span>{{ i18n.ts.showLess }}</span>
 					</button>
 				</div>
-				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
+				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
 			<footer class="footer">
 				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 				<button class="button _button" @click="reply()">
-					<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
-					<template v-else><i class="fas fa-reply"></i></template>
+					<template v-if="appearNote.reply"><i class="ti ti-arrow-back-up-all"></i></template>
+					<template v-else><i class="ti ti-arrow-back-up"></i></template>
 					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
 				</button>
 				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
 				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
-					<i class="fas fa-plus"></i>
+					<i class="ti ti-plus"></i>
 				</button>
 				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-					<i class="fas fa-minus"></i>
+					<i class="ti ti-minus"></i>
 				</button>
 				<button ref="menuButton" class="button _button" @click="menu()">
-					<i class="fas fa-ellipsis-h"></i>
+					<i class="ti ti-dots"></i>
 				</button>
 			</footer>
 		</div>
@@ -256,7 +256,7 @@ function showRenoteMenu(viaKeyboard = false): void {
 	if (!isMyRenote) return;
 	os.popupMenu([{
 		text: i18n.ts.unrenote,
-		icon: 'fas fa-trash-alt',
+		icon: 'ti ti-trash',
 		danger: true,
 		action: () => {
 			os.api('notes/delete', {
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 0ba93bbd76..19e895e11d 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -13,7 +13,7 @@
 	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
 	<div v-if="isRenote" class="renote">
 		<MkAvatar class="avatar" :user="note.user"/>
-		<i class="fas fa-retweet"></i>
+		<i class="ti ti-repeat"></i>
 		<I18n :src="i18n.ts.renotedBy" tag="span">
 			<template #user>
 				<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
@@ -23,7 +23,7 @@
 		</I18n>
 		<div class="info">
 			<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
-				<i v-if="isMyRenote" class="fas fa-ellipsis-h dropdownIcon"></i>
+				<i v-if="isMyRenote" class="ti ti-dots dropdownIcon"></i>
 				<MkTime :time="note.createdAt"/>
 			</button>
 			<MkVisibility :note="note"/>
@@ -55,7 +55,7 @@
 				<div v-show="appearNote.cw == null || showContent" class="content">
 					<div class="text">
 						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
-						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA>
+						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
 						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
 						<a v-if="appearNote.renote != null" class="rp">RN:</a>
 						<div v-if="translating || translation" class="translation">
@@ -73,7 +73,7 @@
 					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" class="url-preview"/>
 					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
 				</div>
-				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="fas fa-satellite-dish"></i> {{ appearNote.channel.name }}</MkA>
+				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
 			</div>
 			<footer class="footer">
 				<div class="info">
@@ -83,19 +83,19 @@
 				</div>
 				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 				<button class="button _button" @click="reply()">
-					<template v-if="appearNote.reply"><i class="fas fa-reply-all"></i></template>
-					<template v-else><i class="fas fa-reply"></i></template>
+					<template v-if="appearNote.reply"><i class="ti ti-arrow-back-up-all"></i></template>
+					<template v-else><i class="ti ti-arrow-back-up"></i></template>
 					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
 				</button>
 				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
 				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
-					<i class="fas fa-plus"></i>
+					<i class="ti ti-plus"></i>
 				</button>
 				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-					<i class="fas fa-minus"></i>
+					<i class="ti ti-minus"></i>
 				</button>
 				<button ref="menuButton" class="button _button" @click="menu()">
-					<i class="fas fa-ellipsis-h"></i>
+					<i class="ti ti-dots"></i>
 				</button>
 			</footer>
 		</div>
@@ -259,7 +259,7 @@ function showRenoteMenu(viaKeyboard = false): void {
 	if (!isMyRenote) return;
 	os.popupMenu([{
 		text: i18n.ts.unrenote,
-		icon: 'fas fa-trash-alt',
+		icon: 'ti ti-trash',
 		danger: true,
 		action: () => {
 			os.api('notes/delete', {
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index a69336f8a1..95b6b71be9 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -19,7 +19,7 @@
 		<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :detail="true" :depth="depth + 1"/>
 	</template>
 	<div v-else class="more">
-		<MkA class="text _link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="fas fa-angle-double-right"></i></MkA>
+		<MkA class="text _link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ti ti-chevron-double-right"></i></MkA>
 	</div>
 </div>
 </template>
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index c00e9fbf42..dd846e3e66 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -5,16 +5,16 @@
 		<MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/>
 		<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
 		<div class="sub-icon" :class="notification.type">
-			<i v-if="notification.type === 'follow'" class="fas fa-plus"></i>
-			<i v-else-if="notification.type === 'receiveFollowRequest'" class="fas fa-clock"></i>
-			<i v-else-if="notification.type === 'followRequestAccepted'" class="fas fa-check"></i>
+			<i v-if="notification.type === 'follow'" class="ti ti-plus"></i>
+			<i v-else-if="notification.type === 'receiveFollowRequest'" class="ti ti-clock"></i>
+			<i v-else-if="notification.type === 'followRequestAccepted'" class="ti ti-check"></i>
 			<i v-else-if="notification.type === 'groupInvited'" class="fas fa-id-card-alt"></i>
-			<i v-else-if="notification.type === 'renote'" class="fas fa-retweet"></i>
-			<i v-else-if="notification.type === 'reply'" class="fas fa-reply"></i>
-			<i v-else-if="notification.type === 'mention'" class="fas fa-at"></i>
-			<i v-else-if="notification.type === 'quote'" class="fas fa-quote-left"></i>
-			<i v-else-if="notification.type === 'pollVote'" class="fas fa-poll-h"></i>
-			<i v-else-if="notification.type === 'pollEnded'" class="fas fa-poll-h"></i>
+			<i v-else-if="notification.type === 'renote'" class="ti ti-repeat"></i>
+			<i v-else-if="notification.type === 'reply'" class="ti ti-arrow-back-up"></i>
+			<i v-else-if="notification.type === 'mention'" class="ti ti-at"></i>
+			<i v-else-if="notification.type === 'quote'" class="ti ti-quote"></i>
+			<i v-else-if="notification.type === 'pollVote'" class="ti ti-chart-arrows"></i>
+			<i v-else-if="notification.type === 'pollEnded'" class="ti ti-chart-arrows"></i>
 			<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
 			<XReactionIcon
 				v-else-if="notification.type === 'reaction'"
@@ -33,14 +33,14 @@
 			<MkTime v-if="withTime" :time="notification.createdAt" class="time"/>
 		</header>
 		<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<i class="fas fa-quote-left"></i>
+			<i class="ti ti-quote"></i>
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<i class="fas fa-quote-right"></i>
+			<i class="ti ti-quote"></i>
 		</MkA>
 		<MkA v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
-			<i class="fas fa-quote-left"></i>
+			<i class="ti ti-quote"></i>
 			<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
-			<i class="fas fa-quote-right"></i>
+			<i class="ti ti-quote"></i>
 		</MkA>
 		<MkA v-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
@@ -52,14 +52,14 @@
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
 		</MkA>
 		<MkA v-if="notification.type === 'pollVote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<i class="fas fa-quote-left"></i>
+			<i class="ti ti-quote"></i>
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<i class="fas fa-quote-right"></i>
+			<i class="ti ti-quote"></i>
 		</MkA>
 		<MkA v-if="notification.type === 'pollEnded'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<i class="fas fa-quote-left"></i>
+			<i class="ti ti-quote"></i>
 			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<i class="fas fa-quote-right"></i>
+			<i class="ti ti-quote"></i>
 		</MkA>
 		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span>
 		<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span>
diff --git a/packages/client/src/components/MkPageWindow.vue b/packages/client/src/components/MkPageWindow.vue
index d58b914036..d5fff4be0a 100644
--- a/packages/client/src/components/MkPageWindow.vue
+++ b/packages/client/src/components/MkPageWindow.vue
@@ -57,7 +57,7 @@ const buttonsLeft = $computed(() => {
 
 	if (history.length > 1) {
 		buttons.push({
-			icon: 'fas fa-arrow-left',
+			icon: 'ti ti-arrow-left',
 			onClick: back,
 		});
 	}
@@ -66,7 +66,7 @@ const buttonsLeft = $computed(() => {
 });
 const buttonsRight = $computed(() => {
 	const buttons = [{
-		icon: 'fas fa-expand-alt',
+		icon: 'ti ti-arrows-maximize',
 		title: i18n.ts.showInPage,
 		onClick: expand,
 	}];
@@ -86,22 +86,22 @@ provide('shouldOmitHeaderTitle', true);
 provide('shouldHeaderThin', true);
 
 const contextmenu = $computed(() => ([{
-	icon: 'fas fa-expand-alt',
+	icon: 'ti ti-arrows-maximize',
 	text: i18n.ts.showInPage,
 	action: expand,
 }, {
-	icon: 'fas fa-external-link-alt',
+	icon: 'ti ti-external-link',
 	text: i18n.ts.popout,
 	action: popout,
 }, {
-	icon: 'fas fa-external-link-alt',
+	icon: 'ti ti-external-link',
 	text: i18n.ts.openInNewTab,
 	action: () => {
 		window.open(url + router.getCurrentPath(), '_blank');
 		windowEl.close();
 	},
 }, {
-	icon: 'fas fa-link',
+	icon: 'ti ti-link',
 	text: i18n.ts.copyLink,
 	action: () => {
 		copyToClipboard(url + router.getCurrentPath());
diff --git a/packages/client/src/components/MkPoll.vue b/packages/client/src/components/MkPoll.vue
index d90af1cfee..a1b927e42a 100644
--- a/packages/client/src/components/MkPoll.vue
+++ b/packages/client/src/components/MkPoll.vue
@@ -4,7 +4,7 @@
 		<li v-for="(choice, i) in note.poll.choices" :key="i" :class="{ voted: choice.voted }" @click="vote(i)">
 			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
 			<span>
-				<template v-if="choice.isVoted"><i class="fas fa-check"></i></template>
+				<template v-if="choice.isVoted"><i class="ti ti-check"></i></template>
 				<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
 				<span v-if="showResult" class="votes">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
 			</span>
diff --git a/packages/client/src/components/MkPollEditor.vue b/packages/client/src/components/MkPollEditor.vue
index 3b08a63535..4b3bc58ed9 100644
--- a/packages/client/src/components/MkPollEditor.vue
+++ b/packages/client/src/components/MkPollEditor.vue
@@ -1,14 +1,14 @@
 <template>
 <div class="zmdxowus">
 	<p v-if="choices.length < 2" class="caution">
-		<i class="fas fa-exclamation-triangle"></i>{{ i18n.ts._poll.noOnlyOneChoice }}
+		<i class="ti ti-alert-triangle"></i>{{ i18n.ts._poll.noOnlyOneChoice }}
 	</p>
 	<ul>
 		<li v-for="(choice, i) in choices" :key="i">
 			<MkInput class="input" small :model-value="choice" :placeholder="$t('_poll.choiceN', { n: i + 1 })" @update:modelValue="onInput(i, $event)">
 			</MkInput>
 			<button class="_button" @click="remove(i)">
-				<i class="fas fa-times"></i>
+				<i class="ti ti-x"></i>
 			</button>
 		</li>
 	</ul>
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 308dd63dd3..26ce4464bc 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -8,35 +8,35 @@
 	@drop.stop="onDrop"
 >
 	<header>
-		<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="fas fa-times"></i></button>
+		<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="ti ti-x"></i></button>
 		<button v-click-anime v-tooltip="i18n.ts.switchAccount" class="account _button" @click="openAccountMenu">
 			<MkAvatar :user="postAccount ?? $i" class="avatar"/>
 		</button>
 		<div class="right">
 			<span class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
-			<span v-if="localOnly" class="local-only"><i class="fas fa-biohazard"></i></span>
+			<span v-if="localOnly" class="local-only"><i class="ti ti-world-off"></i></span>
 			<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
-				<span v-if="visibility === 'public'"><i class="fas fa-globe"></i></span>
-				<span v-if="visibility === 'home'"><i class="fas fa-home"></i></span>
-				<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
-				<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
+				<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
+				<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
+				<span v-if="visibility === 'followers'"><i class="ti ti-lock-open"></i></span>
+				<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
 			</button>
 			<button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="fas fa-file-code"></i></button>
-			<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
+			<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i></button>
 		</div>
 	</header>
 	<div class="form" :class="{ fixed }">
 		<XNoteSimple v-if="reply" class="preview" :note="reply"/>
 		<XNoteSimple v-if="renote" class="preview" :note="renote"/>
-		<div v-if="quoteId" class="with-quote"><i class="fas fa-quote-left"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="fas fa-times"></i></button></div>
+		<div v-if="quoteId" class="with-quote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
 		<div v-if="visibility === 'specified'" class="to-specified">
 			<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
 			<div class="visibleUsers">
 				<span v-for="u in visibleUsers" :key="u.id">
 					<MkAcct :user="u"/>
-					<button class="_button" @click="removeVisibleUser(u)"><i class="fas fa-times"></i></button>
+					<button class="_button" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
 				</span>
-				<button class="_buttonPrimary" @click="addVisibleUser"><i class="fas fa-plus fa-fw"></i></button>
+				<button class="_buttonPrimary" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
 			</div>
 		</div>
 		<MkInfo v-if="hasNotSpecifiedMentions" warn class="hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
@@ -47,13 +47,13 @@
 		<XPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
 		<XNotePreview v-if="showPreview" class="preview" :text="text"/>
 		<footer>
-			<button v-tooltip="i18n.ts.attachFile" class="_button" @click="chooseFileFrom"><i class="fas fa-photo-video"></i></button>
-			<button v-tooltip="i18n.ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="fas fa-poll-h"></i></button>
-			<button v-tooltip="i18n.ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="fas fa-eye-slash"></i></button>
-			<button v-tooltip="i18n.ts.mention" class="_button" @click="insertMention"><i class="fas fa-at"></i></button>
-			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="fas fa-hashtag"></i></button>
-			<button v-tooltip="i18n.ts.emoji" class="_button" @click="insertEmoji"><i class="fas fa-laugh-squint"></i></button>
-			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="fas fa-plug"></i></button>
+			<button v-tooltip="i18n.ts.attachFile" class="_button" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
+			<button v-tooltip="i18n.ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
+			<button v-tooltip="i18n.ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
+			<button v-tooltip="i18n.ts.mention" class="_button" @click="insertMention"><i class="ti ti-at"></i></button>
+			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
+			<button v-tooltip="i18n.ts.emoji" class="_button" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
+			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="ti ti-plug"></i></button>
 		</footer>
 		<datalist id="hashtags">
 			<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
@@ -734,7 +734,7 @@ onMounted(() => {
 
 		> .cancel {
 			padding: 0;
-			font-size: 20px;
+			font-size: 1em;
 			width: 64px;
 			line-height: 66px;
 		}
@@ -925,9 +925,9 @@ onMounted(() => {
 				display: inline-block;
 				padding: 0;
 				margin: 0;
-				font-size: 16px;
-				width: 48px;
-				height: 48px;
+				font-size: 1em;
+				width: 46px;
+				height: 46px;
 				border-radius: 6px;
 
 				&:hover {
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index a8ec8c33ba..b533786d36 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -5,7 +5,7 @@
 			<div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
 				<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
 				<div v-if="element.isSensitive" class="sensitive">
-					<i class="fas fa-exclamation-triangle icon"></i>
+					<i class="ti ti-alert-triangle icon"></i>
 				</div>
 			</div>
 		</template>
@@ -113,19 +113,19 @@ export default defineComponent({
 			if (this.menu) return;
 			this.menu = os.popupMenu([{
 				text: this.$ts.renameFile,
-				icon: 'fas fa-i-cursor',
+				icon: 'ti ti-cursor-text',
 				action: () => { this.rename(file); },
 			}, {
 				text: file.isSensitive ? this.$ts.unmarkAsSensitive : this.$ts.markAsSensitive,
-				icon: file.isSensitive ? 'fas fa-eye-slash' : 'fas fa-eye',
+				icon: file.isSensitive ? 'ti ti-eye-off' : 'ti ti-eye',
 				action: () => { this.toggleSensitive(file); },
 			}, {
 				text: this.$ts.describeFile,
-				icon: 'fas fa-i-cursor',
+				icon: 'ti ti-cursor-text',
 				action: () => { this.describe(file); },
 			}, {
 				text: this.$ts.attachCancel,
-				icon: 'fas fa-times-circle',
+				icon: 'ti ti-circle-x',
 				action: () => { this.detachMedia(file.id); },
 			}], ev.currentTarget ?? ev.target).then(() => this.menu = null);
 		},
diff --git a/packages/client/src/components/MkRemoteCaution.vue b/packages/client/src/components/MkRemoteCaution.vue
index e9461197ca..d5dc01c1f8 100644
--- a/packages/client/src/components/MkRemoteCaution.vue
+++ b/packages/client/src/components/MkRemoteCaution.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="jmgmzlwq _block"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>{{ i18n.ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div>
+<div class="jmgmzlwq _block"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i>{{ i18n.ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index 413f3406a4..e0b1eaafc9 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -5,11 +5,11 @@
 	class="eddddedb _button canRenote"
 	@click="renote()"
 >
-	<i class="fas fa-retweet"></i>
+	<i class="ti ti-repeat"></i>
 	<p v-if="count > 0" class="count">{{ count }}</p>
 </button>
 <button v-else class="eddddedb _button">
-	<i class="fas fa-ban"></i>
+	<i class="ti ti-ban"></i>
 </button>
 </template>
 
@@ -54,7 +54,7 @@ const renote = (viaKeyboard = false) => {
 	pleaseLogin();
 	os.popupMenu([{
 		text: i18n.ts.renote,
-		icon: 'fas fa-retweet',
+		icon: 'ti ti-repeat',
 		action: () => {
 			os.api('notes/create', {
 				renoteId: props.note.id,
@@ -62,7 +62,7 @@ const renote = (viaKeyboard = false) => {
 		},
 	}, {
 		text: i18n.ts.quote,
-		icon: 'fas fa-quote-right',
+		icon: 'ti ti-quote',
 		action: () => {
 			os.post({
 				renote: props.note,
diff --git a/packages/client/src/components/MkSignin.vue b/packages/client/src/components/MkSignin.vue
index 5613e5cf02..b51bcb2dc3 100644
--- a/packages/client/src/components/MkSignin.vue
+++ b/packages/client/src/components/MkSignin.vue
@@ -11,7 +11,7 @@
 				<template #suffix>@{{ host }}</template>
 			</MkInput>
 			<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" class="_formBlock" :placeholder="i18n.ts.password" type="password" :with-password-toggle="true" required data-cy-signin-password>
-				<template #prefix><i class="fas fa-lock"></i></template>
+				<template #prefix><i class="ti ti-lock"></i></template>
 				<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
 			</MkInput>
 			<MkButton class="_formBlock" type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
@@ -30,7 +30,7 @@
 				<p style="margin-bottom:0;">{{ i18n.ts.twoStepAuthentication }}</p>
 				<MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" :with-password-toggle="true" required>
 					<template #label>{{ i18n.ts.password }}</template>
-					<template #prefix><i class="fas fa-lock"></i></template>
+					<template #prefix><i class="ti ti-lock"></i></template>
 				</MkInput>
 				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false" required>
 					<template #label>{{ i18n.ts.token }}</template>
diff --git a/packages/client/src/components/MkSignup.vue b/packages/client/src/components/MkSignup.vue
index c1f91b18c2..e6281b1f84 100644
--- a/packages/client/src/components/MkSignup.vue
+++ b/packages/client/src/components/MkSignup.vue
@@ -2,52 +2,52 @@
 <form class="qlvuhzng _formRoot" autocomplete="new-password" @submit.prevent="onSubmit">
 	<MkInput v-if="instance.disableRegistration" v-model="invitationCode" class="_formBlock" type="text" :spellcheck="false" required>
 		<template #label>{{ i18n.ts.invitationCode }}</template>
-		<template #prefix><i class="fas fa-key"></i></template>
+		<template #prefix><i class="ti ti-key"></i></template>
 	</MkInput>
 	<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:modelValue="onChangeUsername">
 		<template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
 		<template #prefix>@</template>
 		<template #suffix>@{{ host }}</template>
 		<template #caption>
-			<span v-if="usernameState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ i18n.ts.checking }}</span>
-			<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.available }}</span>
-			<span v-else-if="usernameState === 'unavailable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.unavailable }}</span>
-			<span v-else-if="usernameState === 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.error }}</span>
-			<span v-else-if="usernameState === 'invalid-format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.usernameInvalidFormat }}</span>
-			<span v-else-if="usernameState === 'min-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.tooShort }}</span>
-			<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.tooLong }}</span>
+			<span v-if="usernameState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse ti-fw"></i> {{ i18n.ts.checking }}</span>
+			<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.available }}</span>
+			<span v-else-if="usernameState === 'unavailable'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.unavailable }}</span>
+			<span v-else-if="usernameState === 'error'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.error }}</span>
+			<span v-else-if="usernameState === 'invalid-format'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.usernameInvalidFormat }}</span>
+			<span v-else-if="usernameState === 'min-range'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.tooShort }}</span>
+			<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.tooLong }}</span>
 		</template>
 	</MkInput>
 	<MkInput v-if="instance.emailRequiredForSignup" v-model="email" class="_formBlock" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:modelValue="onChangeEmail">
 		<template #label>{{ i18n.ts.emailAddress }} <div v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
-		<template #prefix><i class="fas fa-envelope"></i></template>
+		<template #prefix><i class="ti ti-mail"></i></template>
 		<template #caption>
-			<span v-if="emailState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse fa-fw"></i> {{ i18n.ts.checking }}</span>
-			<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.available }}</span>
-			<span v-else-if="emailState === 'unavailable:used'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts._emailUnavailable.used }}</span>
-			<span v-else-if="emailState === 'unavailable:format'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts._emailUnavailable.format }}</span>
-			<span v-else-if="emailState === 'unavailable:disposable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts._emailUnavailable.disposable }}</span>
-			<span v-else-if="emailState === 'unavailable:mx'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts._emailUnavailable.mx }}</span>
-			<span v-else-if="emailState === 'unavailable:smtp'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts._emailUnavailable.smtp }}</span>
-			<span v-else-if="emailState === 'unavailable'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.unavailable }}</span>
-			<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.error }}</span>
+			<span v-if="emailState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse ti-fw"></i> {{ i18n.ts.checking }}</span>
+			<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.available }}</span>
+			<span v-else-if="emailState === 'unavailable:used'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.used }}</span>
+			<span v-else-if="emailState === 'unavailable:format'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.format }}</span>
+			<span v-else-if="emailState === 'unavailable:disposable'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.disposable }}</span>
+			<span v-else-if="emailState === 'unavailable:mx'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.mx }}</span>
+			<span v-else-if="emailState === 'unavailable:smtp'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.smtp }}</span>
+			<span v-else-if="emailState === 'unavailable'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.unavailable }}</span>
+			<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.error }}</span>
 		</template>
 	</MkInput>
 	<MkInput v-model="password" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password @update:modelValue="onChangePassword">
 		<template #label>{{ i18n.ts.password }}</template>
-		<template #prefix><i class="fas fa-lock"></i></template>
+		<template #prefix><i class="ti ti-lock"></i></template>
 		<template #caption>
-			<span v-if="passwordStrength == 'low'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.weakPassword }}</span>
-			<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.normalPassword }}</span>
-			<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.strongPassword }}</span>
+			<span v-if="passwordStrength == 'low'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.weakPassword }}</span>
+			<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.normalPassword }}</span>
+			<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.strongPassword }}</span>
 		</template>
 	</MkInput>
 	<MkInput v-model="retypedPassword" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
 		<template #label>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template>
-		<template #prefix><i class="fas fa-lock"></i></template>
+		<template #prefix><i class="ti ti-lock"></i></template>
 		<template #caption>
-			<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="fas fa-check fa-fw"></i> {{ i18n.ts.passwordMatched }}</span>
-			<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="fas fa-exclamation-triangle fa-fw"></i> {{ i18n.ts.passwordNotMatched }}</span>
+			<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.passwordMatched }}</span>
+			<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.passwordNotMatched }}</span>
 		</template>
 	</MkInput>
 	<MkSwitch v-if="instance.tosUrl" v-model="ToSAgreement" class="_formBlock tou">
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index 237f4cf228..210923be46 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -3,7 +3,7 @@
 	<div class="body">
 		<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
 		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
-		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
+		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
 		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 	</div>
diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue
index fa8921bdde..3179188518 100644
--- a/packages/client/src/components/MkSuperMenu.vue
+++ b/packages/client/src/components/MkSuperMenu.vue
@@ -6,15 +6,15 @@
 		<div class="items">
 			<template v-for="(item, i) in group.items">
 				<a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
-					<i v-if="item.icon" class="icon fa-fw" :class="item.icon"></i>
+					<i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i>
 					<span class="text">{{ item.text }}</span>
 				</a>
 				<button v-else-if="item.type === 'button'" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)">
-					<i v-if="item.icon" class="icon fa-fw" :class="item.icon"></i>
+					<i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i>
 					<span class="text">{{ item.text }}</span>
 				</button>
 				<MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
-					<i v-if="item.icon" class="icon fa-fw" :class="item.icon"></i>
+					<i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i>
 					<span class="text">{{ item.text }}</span>
 				</MkA>
 			</template>
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 8fd1ce133d..5814faef19 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
-	<button class="disablePlayer" :title="i18n.ts.disablePlayer" @click="playerEnabled = false"><i class="fas fa-times"></i></button>
+	<button class="disablePlayer" :title="i18n.ts.disablePlayer" @click="playerEnabled = false"><i class="ti ti-x"></i></button>
 	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
 </div>
 <div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter">
diff --git a/packages/client/src/components/MkVisibility.vue b/packages/client/src/components/MkVisibility.vue
index ca1f9a6cd8..229907fbb8 100644
--- a/packages/client/src/components/MkVisibility.vue
+++ b/packages/client/src/components/MkVisibility.vue
@@ -1,10 +1,10 @@
 <template>
 <span v-if="note.visibility !== 'public'" :class="$style.visibility" :title="i18n.ts._visibility[note.visibility]">
-	<i v-if="note.visibility === 'home'" class="fas fa-home"></i>
-	<i v-else-if="note.visibility === 'followers'" class="fas fa-unlock"></i>
-	<i v-else-if="note.visibility === 'specified'" ref="specified" class="fas fa-envelope"></i>
+	<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
+	<i v-else-if="note.visibility === 'followers'" class="ti ti-lock-open"></i>
+	<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
 </span>
-<span v-if="note.localOnly" :class="$style.localOnly" :title="i18n.ts._visibility['localOnly']"><i class="fas fa-biohazard"></i></span>
+<span v-if="note.localOnly" :class="$style.localOnly" :title="i18n.ts._visibility['localOnly']"><i class="ti ti-world-off"></i></span>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index ecc022eca0..8f0bcdeae8 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -2,28 +2,28 @@
 <MkModal ref="modal" :z-priority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
 	<div class="gqyayizv _popup">
 		<button key="public" class="_button" :class="{ active: v === 'public' }" data-index="1" @click="choose('public')">
-			<div><i class="fas fa-globe"></i></div>
+			<div><i class="ti ti-world"></i></div>
 			<div>
 				<span>{{ i18n.ts._visibility.public }}</span>
 				<span>{{ i18n.ts._visibility.publicDescription }}</span>
 			</div>
 		</button>
 		<button key="home" class="_button" :class="{ active: v === 'home' }" data-index="2" @click="choose('home')">
-			<div><i class="fas fa-home"></i></div>
+			<div><i class="ti ti-home"></i></div>
 			<div>
 				<span>{{ i18n.ts._visibility.home }}</span>
 				<span>{{ i18n.ts._visibility.homeDescription }}</span>
 			</div>
 		</button>
 		<button key="followers" class="_button" :class="{ active: v === 'followers' }" data-index="3" @click="choose('followers')">
-			<div><i class="fas fa-unlock"></i></div>
+			<div><i class="ti ti-lock-open"></i></div>
 			<div>
 				<span>{{ i18n.ts._visibility.followers }}</span>
 				<span>{{ i18n.ts._visibility.followersDescription }}</span>
 			</div>
 		</button>
 		<button key="specified" :disabled="localOnly" class="_button" :class="{ active: v === 'specified' }" data-index="4" @click="choose('specified')">
-			<div><i class="fas fa-envelope"></i></div>
+			<div><i class="ti ti-mail"></i></div>
 			<div>
 				<span>{{ i18n.ts._visibility.specified }}</span>
 				<span>{{ i18n.ts._visibility.specifiedDescription }}</span>
@@ -31,12 +31,12 @@
 		</button>
 		<div class="divider"></div>
 		<button key="localOnly" class="_button localOnly" :class="{ active: localOnly }" data-index="5" @click="localOnly = !localOnly">
-			<div><i class="fas fa-biohazard"></i></div>
+			<div><i class="ti ti-world-off"></i></div>
 			<div>
 				<span>{{ i18n.ts._visibility.localOnly }}</span>
 				<span>{{ i18n.ts._visibility.localOnlyDescription }}</span>
 			</div>
-			<div><i :class="localOnly ? 'fas fa-toggle-on' : 'fas fa-toggle-off'"></i></div>
+			<div><i :class="localOnly ? 'ti ti-toggle-right' : 'ti ti-toggle-left'"></i></div>
 		</button>
 	</div>
 </MkModal>
diff --git a/packages/client/src/components/MkWaitingDialog.vue b/packages/client/src/components/MkWaitingDialog.vue
index 77b664d3b1..ee86aec967 100644
--- a/packages/client/src/components/MkWaitingDialog.vue
+++ b/packages/client/src/components/MkWaitingDialog.vue
@@ -1,7 +1,7 @@
 <template>
 <MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="emit('closed')">
 	<div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
-		<i v-if="success" class="fas fa-check icon success"></i>
+		<i v-if="success" class="ti ti-check icon success"></i>
 		<i v-else class="fas fa-spinner fa-pulse icon waiting"></i>
 		<div v-if="text && !success" class="text">{{ text }}<MkEllipsis/></div>
 	</div>
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index fcb0d11af4..dd2a2aa89a 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -6,7 +6,7 @@
 				<template #label>{{ i18n.ts.selectWidget }}</template>
 				<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
 			</MkSelect>
-			<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton>
+			<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 			<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
 		</header>
 		<XDraggable
@@ -17,8 +17,8 @@
 		>
 			<template #item="{element}">
 				<div class="customize-container">
-					<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="fas fa-cog"></i></button>
-					<button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="fas fa-times"></i></button>
+					<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button>
+					<button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="ti ti-x"></i></button>
 					<div class="handle">
 						<component :is="`mkw-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
 					</div>
@@ -104,7 +104,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 		type: 'label',
 		text: i18n.t(`_widgets.${widget.name}`),
 	}, {
-		icon: 'fas fa-cog',
+		icon: 'ti ti-settings',
 		text: i18n.ts.settings,
 		action: () => {
 			configWidget(widget.id);
diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
index 0ab4382632..fb786ecf65 100644
--- a/packages/client/src/components/MkWindow.vue
+++ b/packages/client/src/components/MkWindow.vue
@@ -13,7 +13,7 @@
 					<button v-for="button in buttonsRight" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
 					<button v-if="canResize && maximized" class="button _button" @click="unMaximize()"><i class="fas fa-window-restore"></i></button>
 					<button v-else-if="canResize && !maximized" class="button _button" @click="maximize()"><i class="fas fa-window-maximize"></i></button>
-					<button v-if="closeButton" class="button _button" @click="close()"><i class="fas fa-times"></i></button>
+					<button v-if="closeButton" class="button _button" @click="close()"><i class="ti ti-x"></i></button>
 				</span>
 			</div>
 			<div class="body">
diff --git a/packages/client/src/components/form/checkbox.vue b/packages/client/src/components/form/checkbox.vue
index bd56c9c7ea..ba3b2dc146 100644
--- a/packages/client/src/components/form/checkbox.vue
+++ b/packages/client/src/components/form/checkbox.vue
@@ -10,7 +10,7 @@
 		@keydown.enter="toggle"
 	>
 	<span ref="button" v-adaptive-border v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
-		<i class="check fas fa-check"></i>
+		<i class="check ti ti-check"></i>
 	</span>
 	<span class="label">
 		<!-- TODO: 無名slotの方は廃止 -->
diff --git a/packages/client/src/components/form/folder.vue b/packages/client/src/components/form/folder.vue
index a9d8bd97b8..1256dfcbb4 100644
--- a/packages/client/src/components/form/folder.vue
+++ b/packages/client/src/components/form/folder.vue
@@ -5,8 +5,8 @@
 		<span class="text"><slot name="label"></slot></span>
 		<span class="right">
 			<span class="text"><slot name="suffix"></slot></span>
-			<i v-if="opened" class="fas fa-angle-up icon"></i>
-			<i v-else class="fas fa-angle-down icon"></i>
+			<i v-if="opened" class="ti ti-chevron-up icon"></i>
+			<i v-else class="ti ti-chevron-down icon"></i>
 		</span>
 	</div>
 	<KeepAlive>
@@ -23,7 +23,7 @@
 const props = withDefaults(defineProps<{
 	defaultOpen: boolean;
 }>(), {
-  defaultOpen: false,
+	defaultOpen: false,
 });
 
 let opened = $ref(props.defaultOpen);
@@ -46,7 +46,7 @@ const toggle = () => {
 		align-items: center;
 		width: 100%;
 		box-sizing: border-box;
-		padding: 12px 14px 12px 14px;
+		padding: 10px 14px 10px 14px;
 		background: var(--buttonBg);
 		border-radius: 6px;
 
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
index 382b2ed528..939e9691a6 100644
--- a/packages/client/src/components/form/input.vue
+++ b/packages/client/src/components/form/input.vue
@@ -29,7 +29,7 @@
 	</div>
 	<div class="caption"><slot name="caption"></slot></div>
 
-	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="fas fa-check"></i> {{ i18n.ts.save }}</MkButton>
+	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
 </div>
 </template>
 
diff --git a/packages/client/src/components/form/link.vue b/packages/client/src/components/form/link.vue
index 899394cb62..a1775c0bdb 100644
--- a/packages/client/src/components/form/link.vue
+++ b/packages/client/src/components/form/link.vue
@@ -5,7 +5,7 @@
 		<span class="text"><slot></slot></span>
 		<span class="right">
 			<span class="text"><slot name="suffix"></slot></span>
-			<i class="fas fa-external-link-alt icon"></i>
+			<i class="ti ti-external-link icon"></i>
 		</span>
 	</a>
 	<MkA v-else class="main _button" :class="{ active }" :to="to" :behavior="behavior">
@@ -13,7 +13,7 @@
 		<span class="text"><slot></slot></span>
 		<span class="right">
 			<span class="text"><slot name="suffix"></slot></span>
-			<i class="fas fa-chevron-right icon"></i>
+			<i class="ti ti-chevron-right icon"></i>
 		</span>
 	</MkA>
 </div>
diff --git a/packages/client/src/components/form/radio.vue b/packages/client/src/components/form/radio.vue
index b36f7e9fdc..fcf454c77a 100644
--- a/packages/client/src/components/form/radio.vue
+++ b/packages/client/src/components/form/radio.vue
@@ -45,12 +45,13 @@ function toggle(): void {
 	display: inline-block;
 	text-align: left;
 	cursor: pointer;
-	padding: 8px 10px;
+	padding: 7px 10px;
 	min-width: 60px;
 	background-color: var(--panel);
 	background-clip: padding-box !important;
 	border: solid 1px var(--panel);
 	border-radius: 6px;
+	font-size: 90%;
 	transition: all 0.2s;
 
 	> * {
diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue
index 313ba41cd3..eaf4b131cd 100644
--- a/packages/client/src/components/form/select.vue
+++ b/packages/client/src/components/form/select.vue
@@ -18,11 +18,11 @@
 		>
 			<slot></slot>
 		</select>
-		<div ref="suffixEl" class="suffix"><i class="fas fa-chevron-down"></i></div>
+		<div ref="suffixEl" class="suffix"><i class="ti ti-chevron-down"></i></div>
 	</div>
 	<div class="caption"><slot name="caption"></slot></div>
 
-	<MkButton v-if="manualSave && changed" primary @click="updated"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
+	<MkButton v-if="manualSave && changed" primary @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 </div>
 </template>
 
diff --git a/packages/client/src/components/form/suspense.vue b/packages/client/src/components/form/suspense.vue
index 132eafd138..58d80264c1 100644
--- a/packages/client/src/components/form/suspense.vue
+++ b/packages/client/src/components/form/suspense.vue
@@ -8,7 +8,7 @@
 	</div>
 	<div v-else>
 		<div class="wszdbhzo">
-			<div><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</div>
+			<div><i class="ti ti-alert-triangle"></i> {{ $ts.somethingHappened }}</div>
 			<MkButton inline class="retry" @click="retry"><i class="fas fa-redo-alt"></i> {{ $ts.retry }}</MkButton>
 		</div>
 	</div>
diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index ca57aa62a5..d34d7b1775 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -22,7 +22,7 @@
 	</div>
 	<div class="caption"><slot name="caption"></slot></div>
 
-	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
+	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 </div>
 </template>
 
diff --git a/packages/client/src/components/global/MkA.vue b/packages/client/src/components/global/MkA.vue
index 67bf54def8..dbdf89a0ba 100644
--- a/packages/client/src/components/global/MkA.vue
+++ b/packages/client/src/components/global/MkA.vue
@@ -41,25 +41,25 @@ function onContextmenu(ev) {
 		type: 'label',
 		text: props.to,
 	}, {
-		icon: 'fas fa-window-maximize',
+		icon: 'ti ti-window-maximize',
 		text: i18n.ts.openInWindow,
 		action: () => {
 			os.pageWindow(props.to);
 		},
 	}, {
-		icon: 'fas fa-expand-alt',
+		icon: 'ti ti-arrows-maximize',
 		text: i18n.ts.showInPage,
 		action: () => {
 			router.push(props.to, 'forcePage');
 		},
 	}, null, {
-		icon: 'fas fa-external-link-alt',
+		icon: 'ti ti-external-link',
 		text: i18n.ts.openInNewTab,
 		action: () => {
 			window.open(props.to, '_blank');
 		},
 	}, {
-		icon: 'fas fa-link',
+		icon: 'ti ti-link',
 		text: i18n.ts.copyLink,
 		action: () => {
 			copyToClipboard(`${url}${props.to}`);
diff --git a/packages/client/src/components/global/MkAd.vue b/packages/client/src/components/global/MkAd.vue
index 8161ef3792..a80efb142c 100644
--- a/packages/client/src/components/global/MkAd.vue
+++ b/packages/client/src/components/global/MkAd.vue
@@ -3,7 +3,7 @@
 	<div v-if="!showMenu" class="main" :class="chosen.place">
 		<a :href="chosen.url" target="_blank">
 			<img :src="chosen.imageUrl">
-			<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="fas fa-info-circle info-circle"></span></button>
+			<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="ti ti-info-circle info-circle"></span></button>
 		</a>
 	</div>
 	<div v-else class="menu">
diff --git a/packages/client/src/components/global/MkError.vue b/packages/client/src/components/global/MkError.vue
index 6e75a69ec3..e135d4184b 100644
--- a/packages/client/src/components/global/MkError.vue
+++ b/packages/client/src/components/global/MkError.vue
@@ -2,7 +2,7 @@
 <transition :name="$store.state.animation ? 'zoom' : ''" appear>
 	<div class="mjndxjcg">
 		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
-		<p><i class="fas fa-exclamation-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
+		<p><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
 		<MkButton class="button" @click="() => $emit('retry')">{{ i18n.ts.retry }}</MkButton>
 	</div>
 </transition>
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index ba75b2446b..cce3f727fc 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -16,7 +16,7 @@
 				</div>
 				<div v-if="narrow && hasTabs" class="subtitle activeTab">
 					{{ tabs.find(tab => tab.key === props.tab)?.title }}
-					<i class="chevron fas fa-chevron-down"></i>
+					<i class="chevron ti ti-chevron-down"></i>
 				</div>
 			</div>
 		</div>
diff --git a/packages/client/src/components/global/MkUrl.vue b/packages/client/src/components/global/MkUrl.vue
index 740ce29080..9f5be96224 100644
--- a/packages/client/src/components/global/MkUrl.vue
+++ b/packages/client/src/components/global/MkUrl.vue
@@ -14,7 +14,7 @@
 	<span v-if="pathname != ''" class="pathname">{{ self ? pathname.substring(1) : pathname }}</span>
 	<span class="query">{{ query }}</span>
 	<span class="hash">{{ hash }}</span>
-	<i v-if="target === '_blank'" class="fas fa-external-link-square-alt icon"></i>
+	<i v-if="target === '_blank'" class="ti ti-external-link icon"></i>
 </component>
 </template>
 
diff --git a/packages/client/src/components/page/page.post.vue b/packages/client/src/components/page/page.post.vue
index 954c7675bd..0ef50d65cd 100644
--- a/packages/client/src/components/page/page.post.vue
+++ b/packages/client/src/components/page/page.post.vue
@@ -2,8 +2,8 @@
 <div class="ngbfujlo">
 	<MkTextarea :model-value="text" readonly style="margin: 0;"></MkTextarea>
 	<MkButton class="button" primary :disabled="posting || posted" @click="post()">
-		<i v-if="posted" class="fas fa-check"></i>
-		<i v-else class="fas fa-paper-plane"></i>
+		<i v-if="posted" class="ti ti-check"></i>
+		<i v-else class="ti ti-send"></i>
 	</MkButton>
 </div>
 </template>
diff --git a/packages/client/src/navbar.ts b/packages/client/src/navbar.ts
index 03e00b1c17..18b1cddc79 100644
--- a/packages/client/src/navbar.ts
+++ b/packages/client/src/navbar.ts
@@ -9,70 +9,70 @@ import { unisonReload } from '@/scripts/unison-reload';
 export const navbarItemDef = reactive({
 	notifications: {
 		title: 'notifications',
-		icon: 'fas fa-bell',
+		icon: 'ti ti-bell',
 		show: computed(() => $i != null),
 		indicated: computed(() => $i != null && $i.hasUnreadNotification),
 		to: '/my/notifications',
 	},
 	messaging: {
 		title: 'messaging',
-		icon: 'fas fa-comments',
+		icon: 'ti ti-messages',
 		show: computed(() => $i != null),
 		indicated: computed(() => $i != null && $i.hasUnreadMessagingMessage),
 		to: '/my/messaging',
 	},
 	drive: {
 		title: 'drive',
-		icon: 'fas fa-cloud',
+		icon: 'ti ti-cloud',
 		show: computed(() => $i != null),
 		to: '/my/drive',
 	},
 	followRequests: {
 		title: 'followRequests',
-		icon: 'fas fa-user-clock',
+		icon: 'ti ti-user-clock',
 		show: computed(() => $i != null && $i.isLocked),
 		indicated: computed(() => $i != null && $i.hasPendingReceivedFollowRequest),
 		to: '/my/follow-requests',
 	},
 	explore: {
 		title: 'explore',
-		icon: 'fas fa-hashtag',
+		icon: 'ti ti-hash',
 		to: '/explore',
 	},
 	announcements: {
 		title: 'announcements',
-		icon: 'fas fa-broadcast-tower',
+		icon: 'ti ti-speakerphone',
 		indicated: computed(() => $i != null && $i.hasUnreadAnnouncement),
 		to: '/announcements',
 	},
 	search: {
 		title: 'search',
-		icon: 'fas fa-search',
+		icon: 'ti ti-search',
 		action: () => search(),
 	},
 	lists: {
 		title: 'lists',
-		icon: 'fas fa-list-ul',
+		icon: 'ti ti-list',
 		show: computed(() => $i != null),
 		to: '/my/lists',
 	},
 	/*
 	groups: {
 		title: 'groups',
-		icon: 'fas fa-users',
+		icon: 'ti ti-users',
 		show: computed(() => $i != null),
 		to: '/my/groups',
 	},
 	*/
 	antennas: {
 		title: 'antennas',
-		icon: 'fas fa-satellite',
+		icon: 'ti ti-antenna',
 		show: computed(() => $i != null),
 		to: '/my/antennas',
 	},
 	favorites: {
 		title: 'favorites',
-		icon: 'fas fa-star',
+		icon: 'ti ti-star',
 		show: computed(() => $i != null),
 		to: '/my/favorites',
 	},
@@ -83,23 +83,23 @@ export const navbarItemDef = reactive({
 	},
 	gallery: {
 		title: 'gallery',
-		icon: 'fas fa-icons',
+		icon: 'ti ti-icons',
 		to: '/gallery',
 	},
 	clips: {
 		title: 'clip',
-		icon: 'fas fa-paperclip',
+		icon: 'ti ti-paperclip',
 		show: computed(() => $i != null),
 		to: '/my/clips',
 	},
 	channels: {
 		title: 'channel',
-		icon: 'fas fa-satellite-dish',
+		icon: 'ti ti-device-tv',
 		to: '/channels',
 	},
 	ui: {
 		title: 'switchUi',
-		icon: 'fas fa-columns',
+		icon: 'ti ti-columns',
 		action: (ev) => {
 			os.popupMenu([{
 				text: i18n.ts.default,
@@ -127,7 +127,7 @@ export const navbarItemDef = reactive({
 	},
 	reload: {
 		title: 'reload',
-		icon: 'fas fa-refresh',
+		icon: 'ti ti-refresh',
 		action: (ev) => {
 			location.reload();
 		},
diff --git a/packages/client/src/pages/_error_.vue b/packages/client/src/pages/_error_.vue
index a90a023cb6..232d525347 100644
--- a/packages/client/src/pages/_error_.vue
+++ b/packages/client/src/pages/_error_.vue
@@ -3,7 +3,7 @@
 <transition :name="$store.state.animation ? 'zoom' : ''" appear>
 	<div v-show="loaded" class="mjndxjch">
 		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
-		<p><b><i class="fas fa-exclamation-triangle"></i> {{ i18n.ts.pageLoadError }}</b></p>
+		<p><b><i class="ti ti-alert-triangle"></i> {{ i18n.ts.pageLoadError }}</b></p>
 		<p v-if="meta && (version === meta.version)">{{ i18n.ts.pageLoadErrorDescription }}</p>
 		<p v-else-if="serverIsDead">{{ i18n.ts.serverIsDead }}</p>
 		<template v-else>
@@ -58,7 +58,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.error,
-	icon: 'fas fa-exclamation-triangle',
+	icon: 'ti ti-alert-triangle',
 });
 </script>
 
diff --git a/packages/client/src/pages/about-misskey.vue b/packages/client/src/pages/about-misskey.vue
index 7bcccea98f..3ec972bcda 100644
--- a/packages/client/src/pages/about-misskey.vue
+++ b/packages/client/src/pages/about-misskey.vue
@@ -20,17 +20,17 @@
 				<FormSection>
 					<div class="_formLinks">
 						<FormLink to="https://github.com/misskey-dev/misskey" external>
-							<template #icon><i class="fas fa-code"></i></template>
+							<template #icon><i class="ti ti-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>
+							<template #icon><i class="ti ti-language-hiragana"></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>
+							<template #icon><i class="ti ti-pig-money"></i></template>
 							{{ i18n.ts._aboutMisskey.donate }}
 							<template #suffix>Patreon</template>
 						</FormLink>
diff --git a/packages/client/src/pages/about.emojis.vue b/packages/client/src/pages/about.emojis.vue
index df64378c01..53ce1e4b75 100644
--- a/packages/client/src/pages/about.emojis.vue
+++ b/packages/client/src/pages/about.emojis.vue
@@ -2,7 +2,7 @@
 <div class="driuhtrh">
 	<div class="query">
 		<MkInput v-model="q" class="" :placeholder="$ts.search">
-			<template #prefix><i class="fas fa-search"></i></template>
+			<template #prefix><i class="ti ti-search"></i></template>
 		</MkInput>
 
 		<!-- たくさんあると邪魔
diff --git a/packages/client/src/pages/about.federation.vue b/packages/client/src/pages/about.federation.vue
index c501a77582..6c92ab1264 100644
--- a/packages/client/src/pages/about.federation.vue
+++ b/packages/client/src/pages/about.federation.vue
@@ -2,7 +2,7 @@
 <div class="taeiyria">
 	<div class="query">
 		<MkInput v-model="host" :debounce="true" class="">
-			<template #prefix><i class="fas fa-search"></i></template>
+			<template #prefix><i class="ti ti-search"></i></template>
 			<template #label>{{ i18n.ts.host }}</template>
 		</MkInput>
 		<FormSplit style="margin-top: var(--margin);">
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index d124db55a7..0ed692c5c5 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -119,20 +119,20 @@ const headerTabs = $computed(() => [{
 }, {
 	key: 'emojis',
 	title: i18n.ts.customEmojis,
-	icon: 'fas fa-laugh',
+	icon: 'ti ti-mood-happy',
 }, {
 	key: 'federation',
 	title: i18n.ts.federation,
-	icon: 'fas fa-globe',
+	icon: 'ti ti-whirl',
 }, {
 	key: 'charts',
 	title: i18n.ts.charts,
-	icon: 'fas fa-chart-simple',
+	icon: 'ti ti-chart-line',
 }]);
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.instanceInfo,
-	icon: 'fas fa-info-circle',
+	icon: 'ti ti-info-circle',
 })));
 </script>
 
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index a62e0f630f..1b16a66ac4 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -36,7 +36,7 @@
 			</div>
 
 			<div class="_formBlock">
-				<MkButton danger @click="del"><i class="fas fa-trash-alt"></i> {{ i18n.ts.delete }}</MkButton>
+				<MkButton danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 			</div>
 		</div>
 		<div v-else-if="tab === 'ip' && info" class="_formRoot">
@@ -114,7 +114,7 @@ async function toggleIsSensitive(v) {
 
 const headerActions = $computed(() => [{
 	text: i18n.ts.openInNewTab,
-	icon: 'fas fa-external-link-alt',
+	icon: 'ti ti-external-link',
 	handler: () => {
 		window.open(file.url, '_blank');
 	},
@@ -123,15 +123,15 @@ const headerActions = $computed(() => [{
 const headerTabs = $computed(() => [{
 	key: 'overview',
 	title: i18n.ts.overview,
-	icon: 'fas fa-info-circle',
+	icon: 'ti ti-info-circle',
 }, iAmModerator ? {
 	key: 'ip',
 	title: 'IP',
-	icon: 'fas fa-bars-staggered',
+	icon: 'ti ti-password',
 } : null, {
 	key: 'raw',
 	title: 'Raw data',
-	icon: 'fas fa-code',
+	icon: 'ti ti-code',
 }]);
 
 definePageMetadata(computed(() => ({
diff --git a/packages/client/src/pages/admin/abuses.vue b/packages/client/src/pages/admin/abuses.vue
index 9907d4d235..973ec871ab 100644
--- a/packages/client/src/pages/admin/abuses.vue
+++ b/packages/client/src/pages/admin/abuses.vue
@@ -86,7 +86,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.abuseReports,
-	icon: 'fas fa-exclamation-circle',
+	icon: 'ti ti-exclamation-circle',
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/ads.vue b/packages/client/src/pages/admin/ads.vue
index 9a28d2ad61..2ec926c65c 100644
--- a/packages/client/src/pages/admin/ads.vue
+++ b/packages/client/src/pages/admin/ads.vue
@@ -37,8 +37,8 @@
 					<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>
+					<MkButton class="button" inline primary style="margin-right: 12px;" @click="save(ad)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+					<MkButton class="button" inline danger @click="remove(ad)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
 				</div>
 			</div>
 		</div>
@@ -106,7 +106,7 @@ function save(ad) {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'fas fa-plus',
+	icon: 'ti ti-plus',
 	text: i18n.ts.add,
 	handler: add,
 }]);
@@ -115,7 +115,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.ads,
-	icon: 'fas fa-audio-description',
+	icon: 'ti ti-ad',
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/announcements.vue b/packages/client/src/pages/admin/announcements.vue
index f10693314a..607ad8aa02 100644
--- a/packages/client/src/pages/admin/announcements.vue
+++ b/packages/client/src/pages/admin/announcements.vue
@@ -16,8 +16,8 @@
 					</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>
+						<MkButton class="button" inline primary @click="save(announcement)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+						<MkButton class="button" inline @click="remove(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
 					</div>
 				</div>
 			</section>
@@ -92,7 +92,7 @@ function save(announcement) {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'fas fa-plus',
+	icon: 'ti ti-plus',
 	text: i18n.ts.add,
 	handler: add,
 }]);
@@ -101,7 +101,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.announcements,
-	icon: 'fas fa-broadcast-tower',
+	icon: 'ti ti-speakerphone',
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/bot-protection.vue b/packages/client/src/pages/admin/bot-protection.vue
index 484a9d1a1a..d03961cf95 100644
--- a/packages/client/src/pages/admin/bot-protection.vue
+++ b/packages/client/src/pages/admin/bot-protection.vue
@@ -11,11 +11,11 @@
 
 			<template v-if="provider === 'hcaptcha'">
 				<FormInput v-model="hcaptchaSiteKey" class="_formBlock">
-					<template #prefix><i class="fas fa-key"></i></template>
+					<template #prefix><i class="ti ti-key"></i></template>
 					<template #label>{{ i18n.ts.hcaptchaSiteKey }}</template>
 				</FormInput>
 				<FormInput v-model="hcaptchaSecretKey" class="_formBlock">
-					<template #prefix><i class="fas fa-key"></i></template>
+					<template #prefix><i class="ti ti-key"></i></template>
 					<template #label>{{ i18n.ts.hcaptchaSecretKey }}</template>
 				</FormInput>
 				<FormSlot class="_formBlock">
@@ -25,11 +25,11 @@
 			</template>
 			<template v-else-if="provider === 'recaptcha'">
 				<FormInput v-model="recaptchaSiteKey" class="_formBlock">
-					<template #prefix><i class="fas fa-key"></i></template>
+					<template #prefix><i class="ti ti-key"></i></template>
 					<template #label>{{ i18n.ts.recaptchaSiteKey }}</template>
 				</FormInput>
 				<FormInput v-model="recaptchaSecretKey" class="_formBlock">
-					<template #prefix><i class="fas fa-key"></i></template>
+					<template #prefix><i class="ti ti-key"></i></template>
 					<template #label>{{ i18n.ts.recaptchaSecretKey }}</template>
 				</FormInput>
 				<FormSlot v-if="recaptchaSiteKey" class="_formBlock">
@@ -39,11 +39,11 @@
 			</template>
 			<template v-else-if="provider === 'turnstile'">
 				<FormInput v-model="turnstileSiteKey" class="_formBlock">
-					<template #prefix><i class="fas fa-key"></i></template>
+					<template #prefix><i class="ti ti-key"></i></template>
 					<template #label>{{ i18n.ts.turnstileSiteKey }}</template>
 				</FormInput>
 				<FormInput v-model="turnstileSecretKey" class="_formBlock">
-					<template #prefix><i class="fas fa-key"></i></template>
+					<template #prefix><i class="ti ti-key"></i></template>
 					<template #label>{{ i18n.ts.turnstileSecretKey }}</template>
 				</FormInput>
 				<FormSlot class="_formBlock">
@@ -52,7 +52,7 @@
 				</FormSlot>
 			</template>
 
-			<FormButton primary @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
+			<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
 		</div>
 	</FormSuspense>
 </div>
diff --git a/packages/client/src/pages/admin/database.vue b/packages/client/src/pages/admin/database.vue
index 1c2656b8f5..5a0d3d5e51 100644
--- a/packages/client/src/pages/admin/database.vue
+++ b/packages/client/src/pages/admin/database.vue
@@ -1,13 +1,15 @@
-<template><MkStickyContainer>
+<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></MkStickyContainer>
+	<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>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -28,6 +30,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.database,
-	icon: 'fas fa-database',
+	icon: 'ti ti-database',
 });
 </script>
diff --git a/packages/client/src/pages/admin/email-settings.vue b/packages/client/src/pages/admin/email-settings.vue
index 64137f0c3e..6c9dee1704 100644
--- a/packages/client/src/pages/admin/email-settings.vue
+++ b/packages/client/src/pages/admin/email-settings.vue
@@ -112,7 +112,7 @@ const headerActions = $computed(() => [{
 	handler: testEmail,
 }, {
 	asFullButton: true,
-	icon: 'fas fa-check',
+	icon: 'ti ti-check',
 	text: i18n.ts.save,
 	handler: save,
 }]);
@@ -121,6 +121,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.emailServer,
-	icon: 'fas fa-envelope',
+	icon: 'ti ti-mail',
 });
 </script>
diff --git a/packages/client/src/pages/admin/emoji-edit-dialog.vue b/packages/client/src/pages/admin/emoji-edit-dialog.vue
index 090dd9afc1..bd601cb1de 100644
--- a/packages/client/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/client/src/pages/admin/emoji-edit-dialog.vue
@@ -22,7 +22,7 @@
 				<template #label>{{ i18n.ts.tags }}</template>
 				<template #caption>{{ i18n.ts.setMultipleBySeparatingWithSpace }}</template>
 			</MkInput>
-			<MkButton danger @click="del()"><i class="fas fa-trash-alt"></i> {{ i18n.ts.delete }}</MkButton>
+			<MkButton danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 		</div>
 	</div>
 </XModalWindow>
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index 94f152d7db..14c8466d73 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -6,7 +6,7 @@
 			<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 #prefix><i class="ti ti-search"></i></template>
 						<template #label>{{ i18n.ts.search }}</template>
 					</MkInput>
 					<MkSwitch v-model="selectMode" style="margin: 8px 0;">
@@ -39,7 +39,7 @@
 				<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 #prefix><i class="ti ti-search"></i></template>
 							<template #label>{{ i18n.ts.search }}</template>
 						</MkInput>
 						<MkInput v-model="host" :debounce="true">
@@ -164,49 +164,49 @@ const remoteMenu = (emoji, ev: MouseEvent) => {
 		text: ':' + emoji.name + ':',
 	}, {
 		text: i18n.ts.import,
-		icon: 'fas fa-plus',
+		icon: 'ti ti-plus',
 		action: () => { im(emoji); },
 	}], ev.currentTarget ?? ev.target);
 };
 
 const menu = (ev: MouseEvent) => {
 	os.popupMenu([{
-		icon: 'fas fa-download',
+		icon: 'ti ti-download',
 		text: i18n.ts.export,
 		action: async () => {
 			os.api('export-custom-emojis', {
 			})
-			.then(() => {
-				os.alert({
-					type: 'info',
-					text: i18n.ts.exportRequested,
+				.then(() => {
+					os.alert({
+						type: 'info',
+						text: i18n.ts.exportRequested,
+					});
+				}).catch((err) => {
+					os.alert({
+						type: 'error',
+						text: err.message,
+					});
 				});
-			}).catch((err) => {
-				os.alert({
-					type: 'error',
-					text: err.message,
-				});
-			});
 		},
 	}, {
-		icon: 'fas fa-upload',
+		icon: 'ti ti-upload',
 		text: i18n.ts.import,
 		action: async () => {
 			const file = await selectFile(ev.currentTarget ?? ev.target);
 			os.api('admin/emoji/import-zip', {
 				fileId: file.id,
 			})
-			.then(() => {
-				os.alert({
-					type: 'info',
-					text: i18n.ts.importRequested,
-				});
-			}).catch((err) => {
-				os.alert({
-					type: 'error',
-					text: err.message,
+				.then(() => {
+					os.alert({
+						type: 'info',
+						text: i18n.ts.importRequested,
+					});
+				}).catch((err) => {
+					os.alert({
+						type: 'error',
+						text: err.message,
+					});
 				});
-			});
 		},
 	}], ev.currentTarget ?? ev.target);
 };
@@ -273,11 +273,11 @@ const delBulk = async () => {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'fas fa-plus',
+	icon: 'ti ti-plus',
 	text: i18n.ts.addEmoji,
 	handler: add,
 }, {
-	icon: 'fas fa-ellipsis-h',
+	icon: 'ti ti-dots',
 	handler: menu,
 }]);
 
@@ -291,7 +291,7 @@ const headerTabs = $computed(() => [{
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.customEmojis,
-	icon: 'fas fa-laugh',
+	icon: 'ti ti-mood-happy',
 })));
 </script>
 
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
index 2e3a807ba6..8ad6bd4fc0 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -97,11 +97,11 @@ async function find() {
 
 const headerActions = $computed(() => [{
 	text: i18n.ts.lookup,
-	icon: 'fas fa-search',
+	icon: 'ti ti-search',
 	handler: find,
 }, {
 	text: i18n.ts.clearCachedFiles,
-	icon: 'fas fa-trash-alt',
+	icon: 'ti ti-trash',
 	handler: clear,
 }]);
 
@@ -109,7 +109,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.files,
-	icon: 'fas fa-cloud',
+	icon: 'ti ti-cloud',
 })));
 </script>
 
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 20f82bba28..75d3fcae70 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -40,7 +40,7 @@ const router = useRouter();
 
 const indexInfo = {
 	title: i18n.ts.controlPanel,
-	icon: 'fas fa-cog',
+	icon: 'ti ti-settings',
 	hideHeader: true,
 };
 
@@ -75,34 +75,34 @@ const menuDef = $computed(() => [{
 	title: i18n.ts.quickAction,
 	items: [{
 		type: 'button',
-		icon: 'fas fa-search',
+		icon: 'ti ti-search',
 		text: i18n.ts.lookup,
 		action: lookup,
 	}, ...(instance.disableRegistration ? [{
 		type: 'button',
-		icon: 'fas fa-user',
+		icon: 'ti ti-user',
 		text: i18n.ts.invite,
 		action: invite,
 	}] : [])],
 }, {
 	title: i18n.ts.administration,
 	items: [{
-		icon: 'fas fa-tachometer-alt',
+		icon: 'ti ti-dashboard',
 		text: i18n.ts.dashboard,
 		to: '/admin/overview',
 		active: currentPage?.route.name === 'overview',
 	}, {
-		icon: 'fas fa-users',
+		icon: 'ti ti-users',
 		text: i18n.ts.users,
 		to: '/admin/users',
 		active: currentPage?.route.name === 'users',
 	}, {
-		icon: 'fas fa-laugh',
+		icon: 'ti ti-mood-happy',
 		text: i18n.ts.customEmojis,
 		to: '/admin/emojis',
 		active: currentPage?.route.name === 'emojis',
 	}, {
-		icon: 'fas fa-globe',
+		icon: 'ti ti-whirl',
 		text: i18n.ts.federation,
 		to: '/about#federation',
 		active: currentPage?.route.name === 'federation',
@@ -112,22 +112,22 @@ const menuDef = $computed(() => [{
 		to: '/admin/queue',
 		active: currentPage?.route.name === 'queue',
 	}, {
-		icon: 'fas fa-cloud',
+		icon: 'ti ti-cloud',
 		text: i18n.ts.files,
 		to: '/admin/files',
 		active: currentPage?.route.name === 'files',
 	}, {
-		icon: 'fas fa-broadcast-tower',
+		icon: 'ti ti-speakerphone',
 		text: i18n.ts.announcements,
 		to: '/admin/announcements',
 		active: currentPage?.route.name === 'announcements',
 	}, {
-		icon: 'fas fa-audio-description',
+		icon: 'ti ti-ad',
 		text: i18n.ts.ads,
 		to: '/admin/ads',
 		active: currentPage?.route.name === 'ads',
 	}, {
-		icon: 'fas fa-exclamation-circle',
+		icon: 'ti ti-exclamation-circle',
 		text: i18n.ts.abuseReports,
 		to: '/admin/abuses',
 		active: currentPage?.route.name === 'abuses',
@@ -135,37 +135,37 @@ const menuDef = $computed(() => [{
 }, {
 	title: i18n.ts.settings,
 	items: [{
-		icon: 'fas fa-cog',
+		icon: 'ti ti-settings',
 		text: i18n.ts.general,
 		to: '/admin/settings',
 		active: currentPage?.route.name === 'settings',
 	}, {
-		icon: 'fas fa-envelope',
+		icon: 'ti ti-mail',
 		text: i18n.ts.emailServer,
 		to: '/admin/email-settings',
 		active: currentPage?.route.name === 'email-settings',
 	}, {
-		icon: 'fas fa-cloud',
+		icon: 'ti ti-cloud',
 		text: i18n.ts.objectStorage,
 		to: '/admin/object-storage',
 		active: currentPage?.route.name === 'object-storage',
 	}, {
-		icon: 'fas fa-lock',
+		icon: 'ti ti-lock',
 		text: i18n.ts.security,
 		to: '/admin/security',
 		active: currentPage?.route.name === 'security',
 	}, {
-		icon: 'fas fa-globe',
+		icon: 'ti ti-planet',
 		text: i18n.ts.relays,
 		to: '/admin/relays',
 		active: currentPage?.route.name === 'relays',
 	}, {
-		icon: 'fas fa-share-alt',
+		icon: 'ti ti-share',
 		text: i18n.ts.integration,
 		to: '/admin/integrations',
 		active: currentPage?.route.name === 'integrations',
 	}, {
-		icon: 'fas fa-ban',
+		icon: 'ti ti-ban',
 		text: i18n.ts.instanceBlocking,
 		to: '/admin/instance-block',
 		active: currentPage?.route.name === 'instance-block',
@@ -175,7 +175,7 @@ const menuDef = $computed(() => [{
 		to: '/admin/proxy-account',
 		active: currentPage?.route.name === 'proxy-account',
 	}, {
-		icon: 'fas fa-cogs',
+		icon: 'ti ti-adjustments',
 		text: i18n.ts.other,
 		to: '/admin/other-settings',
 		active: currentPage?.route.name === 'other-settings',
@@ -183,7 +183,7 @@ const menuDef = $computed(() => [{
 }, {
 	title: i18n.ts.info,
 	items: [{
-		icon: 'fas fa-database',
+		icon: 'ti ti-database',
 		text: i18n.ts.database,
 		to: '/admin/database',
 		active: currentPage?.route.name === 'database',
@@ -234,25 +234,25 @@ const invite = () => {
 const lookup = (ev) => {
 	os.popupMenu([{
 		text: i18n.ts.user,
-		icon: 'fas fa-user',
+		icon: 'ti ti-user',
 		action: () => {
 			lookupUser();
 		},
 	}, {
 		text: i18n.ts.note,
-		icon: 'fas fa-pencil-alt',
+		icon: 'ti ti-pencil',
 		action: () => {
 			alert('TODO');
 		},
 	}, {
 		text: i18n.ts.file,
-		icon: 'fas fa-cloud',
+		icon: 'ti ti-cloud',
 		action: () => {
 			alert('TODO');
 		},
 	}, {
 		text: i18n.ts.instance,
-		icon: 'fas fa-globe',
+		icon: 'ti ti-planet',
 		action: () => {
 			alert('TODO');
 		},
diff --git a/packages/client/src/pages/admin/instance-block.vue b/packages/client/src/pages/admin/instance-block.vue
index 94b740a4d5..1bdd174de4 100644
--- a/packages/client/src/pages/admin/instance-block.vue
+++ b/packages/client/src/pages/admin/instance-block.vue
@@ -8,7 +8,7 @@
 				<template #caption>{{ i18n.ts.blockedInstancesDescription }}</template>
 			</FormTextarea>
 
-			<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
+			<FormButton primary class="_formBlock" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
 		</FormSuspense>
 	</MkSpacer>
 </MkStickyContainer>
@@ -46,6 +46,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.instanceBlocking,
-	icon: 'fas fa-ban',
+	icon: 'ti ti-ban',
 });
 </script>
diff --git a/packages/client/src/pages/admin/integrations.discord.vue b/packages/client/src/pages/admin/integrations.discord.vue
index 0ab6ecbb4f..0a69c44c93 100644
--- a/packages/client/src/pages/admin/integrations.discord.vue
+++ b/packages/client/src/pages/admin/integrations.discord.vue
@@ -9,17 +9,17 @@
 			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/dc/cb` }}</FormInfo>
 		
 			<FormInput v-model="discordClientId" class="_formBlock">
-				<template #prefix><i class="fas fa-key"></i></template>
+				<template #prefix><i class="ti ti-key"></i></template>
 				<template #label>Client ID</template>
 			</FormInput>
 
 			<FormInput v-model="discordClientSecret" class="_formBlock">
-				<template #prefix><i class="fas fa-key"></i></template>
+				<template #prefix><i class="ti ti-key"></i></template>
 				<template #label>Client Secret</template>
 			</FormInput>
 		</template>
 
-		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
+		<FormButton primary class="_formBlock" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
 	</div>
 </FormSuspense>
 </template>
diff --git a/packages/client/src/pages/admin/integrations.github.vue b/packages/client/src/pages/admin/integrations.github.vue
index 34761e9a7b..66419d5891 100644
--- a/packages/client/src/pages/admin/integrations.github.vue
+++ b/packages/client/src/pages/admin/integrations.github.vue
@@ -9,17 +9,17 @@
 			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/gh/cb` }}</FormInfo>
 		
 			<FormInput v-model="githubClientId" class="_formBlock">
-				<template #prefix><i class="fas fa-key"></i></template>
+				<template #prefix><i class="ti ti-key"></i></template>
 				<template #label>Client ID</template>
 			</FormInput>
 
 			<FormInput v-model="githubClientSecret" class="_formBlock">
-				<template #prefix><i class="fas fa-key"></i></template>
+				<template #prefix><i class="ti ti-key"></i></template>
 				<template #label>Client Secret</template>
 			</FormInput>
 		</template>
 
-		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
+		<FormButton primary class="_formBlock" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
 	</div>
 </FormSuspense>
 </template>
diff --git a/packages/client/src/pages/admin/integrations.twitter.vue b/packages/client/src/pages/admin/integrations.twitter.vue
index a870d76a4d..1e8d882b9c 100644
--- a/packages/client/src/pages/admin/integrations.twitter.vue
+++ b/packages/client/src/pages/admin/integrations.twitter.vue
@@ -9,17 +9,17 @@
 			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/tw/cb` }}</FormInfo>
 		
 			<FormInput v-model="twitterConsumerKey" class="_formBlock">
-				<template #prefix><i class="fas fa-key"></i></template>
+				<template #prefix><i class="ti ti-key"></i></template>
 				<template #label>Consumer Key</template>
 			</FormInput>
 
 			<FormInput v-model="twitterConsumerSecret" class="_formBlock">
-				<template #prefix><i class="fas fa-key"></i></template>
+				<template #prefix><i class="ti ti-key"></i></template>
 				<template #label>Consumer Secret</template>
 			</FormInput>
 		</template>
 
-		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
+		<FormButton primary class="_formBlock" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
 	</div>
 </FormSuspense>
 </template>
diff --git a/packages/client/src/pages/admin/integrations.vue b/packages/client/src/pages/admin/integrations.vue
index 9964426a68..d02fc48076 100644
--- a/packages/client/src/pages/admin/integrations.vue
+++ b/packages/client/src/pages/admin/integrations.vue
@@ -52,6 +52,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.integration,
-	icon: 'fas fa-share-alt',
+	icon: 'ti ti-share',
 });
 </script>
diff --git a/packages/client/src/pages/admin/object-storage.vue b/packages/client/src/pages/admin/object-storage.vue
index 5cc3018532..f2ab30eaa5 100644
--- a/packages/client/src/pages/admin/object-storage.vue
+++ b/packages/client/src/pages/admin/object-storage.vue
@@ -34,12 +34,12 @@
 
 					<FormSplit :min-width="280">
 						<FormInput v-model="objectStorageAccessKey" class="_formBlock">
-							<template #prefix><i class="fas fa-key"></i></template>
+							<template #prefix><i class="ti ti-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 #prefix><i class="ti ti-key"></i></template>
 							<template #label>Secret key</template>
 						</FormInput>
 					</FormSplit>
@@ -134,7 +134,7 @@ function save() {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'fas fa-check',
+	icon: 'ti ti-check',
 	text: i18n.ts.save,
 	handler: save,
 }]);
@@ -143,6 +143,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.objectStorage,
-	icon: 'fas fa-cloud',
+	icon: 'ti ti-cloud',
 });
 </script>
diff --git a/packages/client/src/pages/admin/other-settings.vue b/packages/client/src/pages/admin/other-settings.vue
index ee4e8edba0..62dff6ce7f 100644
--- a/packages/client/src/pages/admin/other-settings.vue
+++ b/packages/client/src/pages/admin/other-settings.vue
@@ -30,7 +30,7 @@ function save() {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'fas fa-check',
+	icon: 'ti ti-check',
 	text: i18n.ts.save,
 	handler: save,
 }]);
@@ -39,6 +39,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.other,
-	icon: 'fas fa-cogs',
+	icon: 'ti ti-adjustments',
 });
 </script>
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index b0d1b543d0..07b808d55b 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -467,7 +467,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.dashboard,
-	icon: 'fas fa-tachometer-alt',
+	icon: 'ti ti-dashboard',
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/relays.vue b/packages/client/src/pages/admin/relays.vue
index e6f7f4ead1..4768ae67b1 100644
--- a/packages/client/src/pages/admin/relays.vue
+++ b/packages/client/src/pages/admin/relays.vue
@@ -5,12 +5,12 @@
 		<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>
+				<i v-if="relay.status === 'accepted'" class="ti ti-check icon accepted"></i>
+				<i v-else-if="relay.status === 'rejected'" class="ti ti-ban icon rejected"></i>
+				<i v-else class="ti ti-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>
+			<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
@@ -68,7 +68,7 @@ refresh();
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'fas fa-plus',
+	icon: 'ti ti-plus',
 	text: i18n.ts.addRelay,
 	handler: addRelay,
 }]);
@@ -77,7 +77,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.relays,
-	icon: 'fas fa-globe',
+	icon: 'ti ti-planet',
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue
index 65d079c2cf..11c06257cc 100644
--- a/packages/client/src/pages/admin/security.vue
+++ b/packages/client/src/pages/admin/security.vue
@@ -5,7 +5,7 @@
 		<FormSuspense :p="init">
 			<div class="_formRoot">
 				<FormFolder class="_formBlock">
-					<template #icon><i class="fas fa-shield-alt"></i></template>
+					<template #icon><i class="ti ti-shield"></i></template>
 					<template #label>{{ i18n.ts.botProtection }}</template>
 					<template v-if="enableHcaptcha" #suffix>hCaptcha</template>
 					<template v-else-if="enableRecaptcha" #suffix>reCAPTCHA</template>
@@ -16,7 +16,7 @@
 				</FormFolder>
 
 				<FormFolder class="_formBlock">
-					<template #icon><i class="fas fa-eye-slash"></i></template>
+					<template #icon><i class="ti ti-eye-off"></i></template>
 					<template #label>{{ i18n.ts.sensitiveMediaDetection }}</template>
 					<template v-if="sensitiveMediaDetection === 'all'" #suffix>{{ i18n.ts.all }}</template>
 					<template v-else-if="sensitiveMediaDetection === 'local'" #suffix>{{ i18n.ts.localOnly }}</template>
@@ -54,7 +54,7 @@
 						</FormSwitch>
 						-->
 
-						<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
+						<FormButton primary class="_formBlock" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
 					</div>
 				</FormFolder>
 
@@ -88,11 +88,11 @@
 
 					<div class="_formRoot">
 						<FormInput v-model="summalyProxy" class="_formBlock">
-							<template #prefix><i class="fas fa-link"></i></template>
+							<template #prefix><i class="ti ti-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>
+						<FormButton primary class="_formBlock" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
 					</div>
 				</FormFolder>
 			</div>
@@ -174,6 +174,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.security,
-	icon: 'fas fa-lock',
+	icon: 'ti ti-lock',
 });
 </script>
diff --git a/packages/client/src/pages/admin/settings.vue b/packages/client/src/pages/admin/settings.vue
index cf6b1f17e9..460eb92694 100644
--- a/packages/client/src/pages/admin/settings.vue
+++ b/packages/client/src/pages/admin/settings.vue
@@ -14,7 +14,7 @@
 					</FormTextarea>
 
 					<FormInput v-model="tosUrl" class="_formBlock">
-						<template #prefix><i class="fas fa-link"></i></template>
+						<template #prefix><i class="ti ti-link"></i></template>
 						<template #label>{{ i18n.ts.tosUrl }}</template>
 					</FormInput>
 
@@ -24,7 +24,7 @@
 						</FormInput>
 
 						<FormInput v-model="maintainerEmail" type="email" class="_formBlock">
-							<template #prefix><i class="fas fa-envelope"></i></template>
+							<template #prefix><i class="ti ti-mail"></i></template>
 							<template #label>{{ i18n.ts.maintainerEmail }}</template>
 						</FormInput>
 					</FormSplit>
@@ -54,22 +54,22 @@
 						<template #label>{{ i18n.ts.theme }}</template>
 
 						<FormInput v-model="iconUrl" class="_formBlock">
-							<template #prefix><i class="fas fa-link"></i></template>
+							<template #prefix><i class="ti ti-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 #prefix><i class="ti ti-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 #prefix><i class="ti ti-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 #prefix><i class="ti ti-palette"></i></template>
 							<template #label>{{ i18n.ts.themeColor }}</template>
 							<template #caption>#RRGGBB</template>
 						</FormInput>
@@ -118,12 +118,12 @@
 
 						<template v-if="enableServiceWorker">
 							<FormInput v-model="swPublicKey" class="_formBlock">
-								<template #prefix><i class="fas fa-key"></i></template>
+								<template #prefix><i class="ti ti-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 #prefix><i class="ti ti-key"></i></template>
 								<template #label>Private key</template>
 							</FormInput>
 						</template>
@@ -133,7 +133,7 @@
 						<template #label>DeepL Translation</template>
 
 						<FormInput v-model="deeplAuthKey" class="_formBlock">
-							<template #prefix><i class="fas fa-key"></i></template>
+							<template #prefix><i class="ti ti-key"></i></template>
 							<template #label>DeepL Auth Key</template>
 						</FormInput>
 						<FormSwitch v-model="deeplIsPro" class="_formBlock">
@@ -248,7 +248,7 @@ function save() {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'fas fa-check',
+	icon: 'ti ti-check',
 	text: i18n.ts.save,
 	handler: save,
 }]);
@@ -257,6 +257,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.general,
-	icon: 'fas fa-cog',
+	icon: 'ti ti-settings',
 });
 </script>
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index eeb335a430..bf630d28d2 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -115,17 +115,17 @@ function show(user) {
 }
 
 const headerActions = $computed(() => [{
-	icon: 'fas fa-search',
+	icon: 'ti ti-search',
 	text: i18n.ts.search,
 	handler: searchUser,
 }, {
 	asFullButton: true,
-	icon: 'fas fa-plus',
+	icon: 'ti ti-plus',
 	text: i18n.ts.addUser,
 	handler: addUser,
 }, {
 	asFullButton: true,
-	icon: 'fas fa-search',
+	icon: 'ti ti-search',
 	text: i18n.ts.lookup,
 	handler: lookupUser,
 }]);
@@ -134,7 +134,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.users,
-	icon: 'fas fa-users',
+	icon: 'ti ti-users',
 })));
 </script>
 
diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
index 5f66596997..6a93b3b9fa 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -10,7 +10,7 @@
 					<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>
+					<MkButton primary @click="read(items, announcement, i)"><i class="ti ti-check"></i> {{ $ts.gotIt }}</MkButton>
 				</div>
 			</section>
 		</MkPagination>
@@ -46,7 +46,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.announcements,
-	icon: 'fas fa-broadcast-tower',
+	icon: 'ti ti-speakerphone',
 });
 </script>
 
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index 500cb3a7c5..592131b2a8 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -76,7 +76,7 @@ const headerActions = $computed(() => antenna ? [{
 	text: i18n.ts.jumpToSpecifiedDate,
 	handler: timetravel,
 }, {
-	icon: 'fas fa-cog',
+	icon: 'ti ti-settings',
 	text: i18n.ts.settings,
 	handler: settings,
 }] : []);
@@ -85,7 +85,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => antenna ? {
 	title: antenna.name,
-	icon: 'fas fa-satellite',
+	icon: 'ti ti-antenna',
 } : null));
 </script>
 
diff --git a/packages/client/src/pages/api-console.vue b/packages/client/src/pages/api-console.vue
index 0064e4c3f1..a46b85462e 100644
--- a/packages/client/src/pages/api-console.vue
+++ b/packages/client/src/pages/api-console.vue
@@ -15,7 +15,7 @@
 				</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>
+					<template v-else><i class="ti ti-send"></i> Send</template>
 				</MkButton>
 			</div>
 			<div v-if="res" class="_formBlock">
@@ -84,6 +84,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: 'API console',
-	icon: 'fas fa-terminal',
+	icon: 'ti ti-terminal-2',
 });
 </script>
diff --git a/packages/client/src/pages/channel-editor.vue b/packages/client/src/pages/channel-editor.vue
index 3e94b5f041..5ae7e63f99 100644
--- a/packages/client/src/pages/channel-editor.vue
+++ b/packages/client/src/pages/channel-editor.vue
@@ -12,14 +12,14 @@
 			</MkTextarea>
 
 			<div class="banner">
-				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="fas fa-plus"></i> {{ i18n.ts._channel.setBanner }}</MkButton>
+				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="ti ti-plus"></i> {{ i18n.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> {{ i18n.ts._channel.removeBanner }}</MkButton>
+					<MkButton @click="removeBannerImage()"><i class="ti ti-trash"></i> {{ i18n.ts._channel.removeBanner }}</MkButton>
 				</div>
 			</div>
 			<div class="_formBlock">
-				<MkButton primary @click="save()"><i class="fas fa-save"></i> {{ channelId ? i18n.ts.save : i18n.ts.create }}</MkButton>
+				<MkButton primary @click="save()"><i class="ti ti-device-floppy"></i> {{ channelId ? i18n.ts.save : i18n.ts.create }}</MkButton>
 			</div>
 		</div>
 	</MkSpacer>
@@ -110,10 +110,10 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => props.channelId ? {
 	title: i18n.ts._channel.edit,
-	icon: 'fas fa-satellite-dish',
+	icon: 'ti ti-device-tv',
 } : {
 	title: i18n.ts._channel.create,
-	icon: 'fas fa-satellite-dish',
+	icon: 'ti ti-device-tv',
 }));
 </script>
 
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index 380c3efc8e..f271bb270f 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -6,15 +6,15 @@
 			<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>
+					<template v-if="showBanner"><i class="ti ti-chevron-up"></i></template>
+					<template v-else><i class="ti ti-chevron-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="i18n.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="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
+						<div><i class="ti ti-users ti-fw"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
+						<div><i class="ti ti-pencil ti-fw"></i><I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
 					</div>
 					<div class="fade"></div>
 				</div>
@@ -70,7 +70,7 @@ function edit() {
 }
 
 const headerActions = $computed(() => channel && channel.userId ? [{
-	icon: 'fas fa-cog',
+	icon: 'ti ti-settings',
 	text: i18n.ts.edit,
 	handler: edit,
 }] : null);
@@ -79,7 +79,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => channel ? {
 	title: channel.name,
-	icon: 'fas fa-satellite-dish',
+	icon: 'ti ti-device-tv',
 } : null));
 </script>
 
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index 56ea98d15e..7c84629a0a 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -13,7 +13,7 @@
 			</MkPagination>
 		</div>
 		<div v-else-if="tab === 'owned'" class="_content grwlizim owned">
-			<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
+			<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
 			<MkPagination v-slot="{items}" :pagination="ownedPagination">
 				<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
 			</MkPagination>
@@ -53,7 +53,7 @@ function create() {
 }
 
 const headerActions = $computed(() => [{
-	icon: 'fas fa-plus',
+	icon: 'ti ti-plus',
 	text: i18n.ts.create,
 	handler: create,
 }]);
@@ -65,15 +65,15 @@ const headerTabs = $computed(() => [{
 }, {
 	key: 'following',
 	title: i18n.ts._channel.following,
-	icon: 'fas fa-heart',
+	icon: 'ti ti-heart',
 }, {
 	key: 'owned',
 	title: i18n.ts._channel.owned,
-	icon: 'fas fa-edit',
+	icon: 'ti ti-edit',
 }]);
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.channel,
-	icon: 'fas fa-satellite-dish',
+	icon: 'ti ti-device-tv',
 })));
 </script>
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index 5b56651bdd..e0fbcb6bed 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -53,7 +53,7 @@ watch(() => props.clipId, async () => {
 provide('currentClipPage', $$(clip));
 
 const headerActions = $computed(() => clip && isOwned ? [{
-	icon: 'fas fa-pencil-alt',
+	icon: 'ti ti-pencil',
 	text: i18n.ts.edit,
 	handler: async (): Promise<void> => {
 		const { canceled, result } = await os.form(clip.name, {
@@ -83,7 +83,7 @@ const headerActions = $computed(() => clip && isOwned ? [{
 		});
 	},
 }, {
-	icon: 'fas fa-trash-alt',
+	icon: 'ti ti-trash',
 	text: i18n.ts.delete,
 	danger: true,
 	handler: async (): Promise<void> => {
@@ -101,7 +101,7 @@ const headerActions = $computed(() => clip && isOwned ? [{
 
 definePageMetadata(computed(() => clip ? {
 	title: clip.name,
-	icon: 'fas fa-paperclip',
+	icon: 'ti ti-paperclip',
 } : null));
 </script>
 
diff --git a/packages/client/src/pages/drive.vue b/packages/client/src/pages/drive.vue
index 088f0eacdc..04ade5c207 100644
--- a/packages/client/src/pages/drive.vue
+++ b/packages/client/src/pages/drive.vue
@@ -19,7 +19,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
 	title: folder ? folder.name : i18n.ts.drive,
-	icon: 'fas fa-cloud',
+	icon: 'ti ti-cloud',
 	hideHeader: true,
 })));
 </script>
diff --git a/packages/client/src/pages/emojis.emoji.vue b/packages/client/src/pages/emojis.emoji.vue
index b2801694db..04bf4ef167 100644
--- a/packages/client/src/pages/emojis.emoji.vue
+++ b/packages/client/src/pages/emojis.emoji.vue
@@ -24,7 +24,7 @@ function menu(ev) {
 		text: ':' + props.emoji.name + ':',
 	}, {
 		text: i18n.ts.copy,
-		icon: 'fas fa-copy',
+		icon: 'ti ti-copy',
 		action: () => {
 			copyToClipboard(`:${props.emoji.name}:`);
 			os.success();
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index e16e40b8ed..bfee0a6c07 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -7,26 +7,26 @@
 	<div v-if="origin === 'local'">
 		<template v-if="tag == null">
 			<MkFolder class="_gap" persist-key="explore-pinned-users">
-				<template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
+				<template #header><i class="fas fa-bookmark ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
 				<XUserList :pagination="pinnedUsers"/>
 			</MkFolder>
 			<MkFolder class="_gap" persist-key="explore-popular-users">
-				<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
+				<template #header><i class="fas fa-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
 				<XUserList :pagination="popularUsers"/>
 			</MkFolder>
 			<MkFolder class="_gap" persist-key="explore-recently-updated-users">
-				<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
+				<template #header><i class="fas fa-comment-alt ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
 				<XUserList :pagination="recentlyUpdatedUsers"/>
 			</MkFolder>
 			<MkFolder class="_gap" persist-key="explore-recently-registered-users">
-				<template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
+				<template #header><i class="ti ti-plus ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
 				<XUserList :pagination="recentlyRegisteredUsers"/>
 			</MkFolder>
 		</template>
 	</div>
 	<div v-else>
 		<MkFolder ref="tagsEl" :foldable="true" :expanded="false" class="_gap">
-			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularTags }}</template>
+			<template #header><i class="ti ti-hash ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularTags }}</template>
 
 			<div class="vxjfqztj">
 				<MkA v-for="tag in tagsLocal" :key="'local:' + tag.tag" :to="`/explore/tags/${tag.tag}`" class="local">{{ tag.tag }}</MkA>
@@ -35,21 +35,21 @@
 		</MkFolder>
 
 		<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
-			<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
+			<template #header><i class="ti ti-hash ti-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
 			<XUserList :pagination="tagUsers"/>
 		</MkFolder>
 
 		<template v-if="tag == null">
 			<MkFolder class="_gap">
-				<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
+				<template #header><i class="fas fa-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
 				<XUserList :pagination="popularUsersF"/>
 			</MkFolder>
 			<MkFolder class="_gap">
-				<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
+				<template #header><i class="fas fa-comment-alt ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
 				<XUserList :pagination="recentlyUpdatedUsersF"/>
 			</MkFolder>
 			<MkFolder class="_gap">
-				<template #header><i class="fas fa-rocket fa-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyDiscoveredUsers }}</template>
+				<template #header><i class="fas fa-rocket ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyDiscoveredUsers }}</template>
 				<XUserList :pagination="recentlyRegisteredUsersF"/>
 			</MkFolder>
 		</template>
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index 279960d139..6b0bcdaf62 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -12,7 +12,7 @@
 			<MkSpacer :content-max="1200">
 				<div>
 					<MkInput v-model="searchQuery" :debounce="true" type="search" class="_formBlock">
-						<template #prefix><i class="fas fa-search"></i></template>
+						<template #prefix><i class="ti ti-search"></i></template>
 						<template #label>{{ i18n.ts.searchUser }}</template>
 					</MkInput>
 					<MkRadios v-model="searchOrigin" class="_formBlock">
@@ -69,11 +69,11 @@ const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => [{
 	key: 'featured',
-	icon: 'fas fa-bolt',
+	icon: 'ti ti-bolt',
 	title: i18n.ts.featured,
 }, {
 	key: 'users',
-	icon: 'fas fa-users',
+	icon: 'ti ti-users',
 	title: i18n.ts.users,
 }, {
 	key: 'search',
@@ -82,6 +82,6 @@ const headerTabs = $computed(() => [{
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.explore,
-	icon: 'fas fa-hashtag',
+	icon: 'ti ti-hash',
 })));
 </script>
diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue
index 32a1dbf592..ab47efec71 100644
--- a/packages/client/src/pages/favorites.vue
+++ b/packages/client/src/pages/favorites.vue
@@ -37,7 +37,7 @@ const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
 definePageMetadata({
 	title: i18n.ts.favorites,
-	icon: 'fas fa-star',
+	icon: 'ti ti-star',
 });
 </script>
 
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index 82d7164260..2bef35746e 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -22,8 +22,8 @@
 								<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
 							</div>
 							<div class="actions">
-								<button class="_button" @click="accept(req.follower)"><i class="fas fa-check"></i></button>
-								<button class="_button" @click="reject(req.follower)"><i class="fas fa-times"></i></button>
+								<button class="_button" @click="accept(req.follower)"><i class="ti ti-check"></i></button>
+								<button class="_button" @click="reject(req.follower)"><i class="ti ti-x"></i></button>
 							</div>
 						</div>
 					</div>
@@ -67,7 +67,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.followRequests,
-	icon: 'fas fa-user-clock',
+	icon: 'ti ti-user-clock',
 })));
 </script>
 
diff --git a/packages/client/src/pages/gallery/edit.vue b/packages/client/src/pages/gallery/edit.vue
index 8f716d9eb3..c8111d7890 100644
--- a/packages/client/src/pages/gallery/edit.vue
+++ b/packages/client/src/pages/gallery/edit.vue
@@ -14,17 +14,17 @@
 			<div class="">
 				<div v-for="file in files" :key="file.id" class="wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : null }">
 					<div class="name">{{ file.name }}</div>
-					<button v-tooltip="i18n.ts.remove" class="remove _button" @click="remove(file)"><i class="fas fa-times"></i></button>
+					<button v-tooltip="i18n.ts.remove" class="remove _button" @click="remove(file)"><i class="ti ti-x"></i></button>
 				</div>
-				<FormButton primary @click="selectFile"><i class="fas fa-plus"></i> {{ i18n.ts.attachFile }}</FormButton>
+				<FormButton primary @click="selectFile"><i class="ti ti-plus"></i> {{ i18n.ts.attachFile }}</FormButton>
 			</div>
 
 			<FormSwitch v-model="isSensitive">{{ i18n.ts.markAsSensitive }}</FormSwitch>
 
-			<FormButton v-if="postId" primary @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</FormButton>
-			<FormButton v-else primary @click="save"><i class="fas fa-save"></i> {{ i18n.ts.publish }}</FormButton>
+			<FormButton v-if="postId" primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
+			<FormButton v-else primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.publish }}</FormButton>
 
-			<FormButton v-if="postId" danger @click="del"><i class="fas fa-trash-alt"></i> {{ i18n.ts.delete }}</FormButton>
+			<FormButton v-if="postId" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</FormButton>
 		</FormSuspense>
 	</MkSpacer>
 </MkStickyContainer>
@@ -115,10 +115,10 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => props.postId ? {
 	title: i18n.ts.edit,
-	icon: 'fas fa-pencil-alt',
+	icon: 'ti ti-pencil',
 } : {
 	title: i18n.ts.postToGallery,
-	icon: 'fas fa-pencil-alt',
+	icon: 'ti ti-pencil',
 }));
 </script>
 
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index 598383217e..b04c1fad94 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -5,7 +5,7 @@
 		<div class="_root">
 			<div v-if="tab === 'explore'">
 				<MkFolder class="_gap">
-					<template #header><i class="fas fa-clock"></i>{{ i18n.ts.recentPosts }}</template>
+					<template #header><i class="ti ti-clock"></i>{{ i18n.ts.recentPosts }}</template>
 					<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
 						<div class="vfpdbgtk">
 							<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
@@ -29,7 +29,7 @@
 				</MkPagination>
 			</div>
 			<div v-else-if="tab === 'my'">
-				<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="fas fa-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
+				<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="ti ti-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
 				<MkPagination v-slot="{items}" :pagination="myPostsPagination">
 					<div class="vfpdbgtk">
 						<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
@@ -98,7 +98,7 @@ watch(() => props.tag, () => {
 });
 
 const headerActions = $computed(() => [{
-	icon: 'fas fa-plus',
+	icon: 'ti ti-plus',
 	text: i18n.ts.create,
 	handler: () => {
 		router.push('/gallery/new');
@@ -108,20 +108,20 @@ const headerActions = $computed(() => [{
 const headerTabs = $computed(() => [{
 	key: 'explore',
 	title: i18n.ts.gallery,
-	icon: 'fas fa-icons',
+	icon: 'ti ti-icons',
 }, {
 	key: 'liked',
 	title: i18n.ts._gallery.liked,
-	icon: 'fas fa-heart',
+	icon: 'ti ti-heart',
 }, {
 	key: 'my',
 	title: i18n.ts._gallery.my,
-	icon: 'fas fa-edit',
+	icon: 'ti ti-edit',
 }]);
 
 definePageMetadata({
 	title: i18n.ts.gallery,
-	icon: 'fas fa-icons',
+	icon: 'ti ti-icons',
 });
 </script>
 
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 3804bcdcf5..7a125cfaab 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -14,17 +14,17 @@
 						<div class="title">{{ post.title }}</div>
 						<div class="description"><Mfm :text="post.description"/></div>
 						<div class="info">
-							<i class="fas fa-clock"></i> <MkTime :time="post.createdAt" mode="detail"/>
+							<i class="ti ti-clock"></i> <MkTime :time="post.createdAt" mode="detail"/>
 						</div>
 						<div class="actions">
 							<div class="like">
-								<MkButton v-if="post.isLiked" v-tooltip="i18n.ts._gallery.unlike" class="button" primary @click="unlike()"><i class="fas fa-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
+								<MkButton v-if="post.isLiked" v-tooltip="i18n.ts._gallery.unlike" class="button" primary @click="unlike()"><i class="ti ti-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
 								<MkButton v-else v-tooltip="i18n.ts._gallery.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
 							</div>
 							<div class="other">
-								<button v-if="$i && $i.id === post.user.id" v-tooltip="i18n.ts.edit" v-click-anime class="_button" @click="edit"><i class="fas fa-pencil-alt fa-fw"></i></button>
-								<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
-								<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+								<button v-if="$i && $i.id === post.user.id" v-tooltip="i18n.ts.edit" v-click-anime class="_button" @click="edit"><i class="ti ti-pencil ti-fw"></i></button>
+								<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ti ti-repeat ti-fw"></i></button>
+								<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="ti ti-share ti-fw"></i></button>
 							</div>
 						</div>
 						<div class="user">
@@ -38,7 +38,7 @@
 					</div>
 					<MkAd :prefer="['horizontal', 'horizontal-big']"/>
 					<MkContainer :max-height="300" :foldable="true" class="other">
-						<template #header><i class="fas fa-clock"></i> {{ i18n.ts.recentPosts }}</template>
+						<template #header><i class="ti ti-clock"></i> {{ i18n.ts.recentPosts }}</template>
 						<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
 							<div class="sdrarzaf">
 								<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
@@ -139,7 +139,7 @@ function edit() {
 watch(() => props.postId, fetchPost, { immediate: true });
 
 const headerActions = $computed(() => [{
-	icon: 'fas fa-pencil-alt',
+	icon: 'ti ti-pencil',
 	text: i18n.ts.edit,
 	handler: edit,
 }]);
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index 6e13da0d68..92288f573d 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -28,7 +28,7 @@
 				<template #label>Moderation</template>
 				<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</FormSwitch>
 				<FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</FormSwitch>
-				<MkButton @click="refreshMetadata"><i class="fas fa-refresh"></i> Refresh metadata</MkButton>
+				<MkButton @click="refreshMetadata"><i class="ti ti-refresh"></i> Refresh metadata</MkButton>
 			</FormSection>
 
 			<FormSection>
@@ -195,7 +195,7 @@ fetch();
 
 const headerActions = $computed(() => [{
 	text: `https://${props.host}`,
-	icon: 'fas fa-external-link-alt',
+	icon: 'ti ti-external-link',
 	handler: () => {
 		window.open(`https://${props.host}`, '_blank');
 	},
@@ -204,24 +204,24 @@ const headerActions = $computed(() => [{
 const headerTabs = $computed(() => [{
 	key: 'overview',
 	title: i18n.ts.overview,
-	icon: 'fas fa-info-circle',
+	icon: 'ti ti-info-circle',
 }, {
 	key: 'chart',
 	title: i18n.ts.charts,
-	icon: 'fas fa-chart-simple',
+	icon: 'ti ti-chart-line',
 }, {
 	key: 'users',
 	title: i18n.ts.users,
-	icon: 'fas fa-users',
+	icon: 'ti ti-users',
 }, {
 	key: 'raw',
 	title: 'Raw',
-	icon: 'fas fa-code',
+	icon: 'ti ti-code',
 }]);
 
 definePageMetadata({
 	title: props.host,
-	icon: 'fas fa-server',
+	icon: 'ti ti-server',
 });
 </script>
 
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index 56d852fe3d..b4cec5f5e9 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -3,7 +3,7 @@
 	<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>
+			<MkButton primary class="start" @click="start"><i class="ti ti-plus"></i> {{ $ts.startMessaging }}</MkButton>
 
 			<div v-if="messages.length > 0" class="history">
 				<MkA
@@ -96,11 +96,11 @@ function onRead(ids) {
 function start(ev) {
 	os.popupMenu([{
 		text: i18n.ts.messagingWithUser,
-		icon: 'fas fa-user',
+		icon: 'ti ti-user',
 		action: () => { startUser(); },
 	}, {
 		text: i18n.ts.messagingWithGroup,
-		icon: 'fas fa-users',
+		icon: 'ti ti-users',
 		action: () => { startGroup(); },
 	}], ev.currentTarget ?? ev.target);
 }
@@ -158,7 +158,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.messaging,
-	icon: 'fas fa-comments',
+	icon: 'ti ti-messages',
 });
 </script>
 
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 4589069df0..ca0ebf554e 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -15,10 +15,10 @@
 	<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="_button" @click="chooseFile"><i class="ti ti-photo-plus"></i></button>
+			<button class="_button" @click="insertEmoji"><i class="ti ti-mood-happy"></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>
+				<template v-if="!sending"><i class="ti ti-send"></i></template><template v-if="sending"><i class="fas fa-spinner fa-pulse ti-fw"></i></template>
 			</button>
 		</div>
 	</footer>
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index 2b5a9569a1..e7cf54a066 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -29,7 +29,7 @@
 				<span v-if="isMe && message.isRead" class="read">{{ $ts.messageRead }}</span>
 			</template>
 			<MkTime :time="message.createdAt"/>
-			<template v-if="message.is_edited"><i class="fas fa-pencil-alt"></i></template>
+			<template v-if="message.is_edited"><i class="ti ti-pencil"></i></template>
 		</footer>
 	</div>
 </div>
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 37d4145ee8..b6eeb9260e 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -40,7 +40,7 @@
 			</div>
 			<transition :name="animation ? 'fade' : ''">
 				<div v-show="showIndicator" class="new-message">
-					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-fw fa-arrow-circle-down"></i>{{ i18n.ts.newMessageExists }}</button>
+					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas ti-fw fa-arrow-circle-down"></i>{{ i18n.ts.newMessageExists }}</button>
 				</div>
 			</transition>
 			<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" class="form"/>
@@ -300,7 +300,7 @@ definePageMetadata(computed(() => !fetching ? user ? {
 	avatar: user,
 } : {
 	title: group?.name,
-	icon: 'fas fa-users',
+	icon: 'ti ti-users',
 } : null));
 </script>
 
diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue
index bd8ae4e0b6..7c85dfb7ad 100644
--- a/packages/client/src/pages/mfm-cheat-sheet.vue
+++ b/packages/client/src/pages/mfm-cheat-sheet.vue
@@ -351,7 +351,7 @@ let preview_plain = $ref('<plain>**bold** @mention #hashtag `code` $[x2 🍮]</p
 
 definePageMetadata({
 	title: i18n.ts._mfm.cheatSheet,
-	icon: 'fas fa-question-circle',
+	icon: 'ti ti-question-circle',
 });
 </script>
 
diff --git a/packages/client/src/pages/my-antennas/create.vue b/packages/client/src/pages/my-antennas/create.vue
index dc10bece81..005b036696 100644
--- a/packages/client/src/pages/my-antennas/create.vue
+++ b/packages/client/src/pages/my-antennas/create.vue
@@ -37,7 +37,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.manageAntennas,
-	icon: 'fas fa-satellite',
+	icon: 'ti ti-antenna',
 });
 </script>
 
diff --git a/packages/client/src/pages/my-antennas/edit.vue b/packages/client/src/pages/my-antennas/edit.vue
index 53f9b07db0..cb583faaeb 100644
--- a/packages/client/src/pages/my-antennas/edit.vue
+++ b/packages/client/src/pages/my-antennas/edit.vue
@@ -34,7 +34,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.manageAntennas,
-	icon: 'fas fa-satellite',
+	icon: 'ti ti-antenna',
 });
 </script>
 
diff --git a/packages/client/src/pages/my-antennas/editor.vue b/packages/client/src/pages/my-antennas/editor.vue
index 054053fbfb..a409a734b5 100644
--- a/packages/client/src/pages/my-antennas/editor.vue
+++ b/packages/client/src/pages/my-antennas/editor.vue
@@ -38,8 +38,8 @@
 		<MkSwitch v-model="notify" class="_formBlock">{{ i18n.ts.notifyAntenna }}</MkSwitch>
 	</div>
 	<div class="actions">
-		<MkButton inline primary @click="saveAntenna()"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
-		<MkButton v-if="antenna.id != null" inline danger @click="deleteAntenna()"><i class="fas fa-trash"></i> {{ i18n.ts.delete }}</MkButton>
+		<MkButton inline primary @click="saveAntenna()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+		<MkButton v-if="antenna.id != null" inline danger @click="deleteAntenna()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 	</div>
 </div>
 </template>
diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue
index dc73ba674e..9daf23f9b5 100644
--- a/packages/client/src/pages/my-antennas/index.vue
+++ b/packages/client/src/pages/my-antennas/index.vue
@@ -2,7 +2,7 @@
 	<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>
+		<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 
 		<div class="">
 			<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
@@ -33,7 +33,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.manageAntennas,
-	icon: 'fas fa-satellite',
+	icon: 'ti ti-antenna',
 });
 </script>
 
diff --git a/packages/client/src/pages/my-clips/index.vue b/packages/client/src/pages/my-clips/index.vue
index 68330d6db4..dd6b5b3a37 100644
--- a/packages/client/src/pages/my-clips/index.vue
+++ b/packages/client/src/pages/my-clips/index.vue
@@ -3,7 +3,7 @@
 	<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> {{ i18n.ts.add }}</MkButton>
+			<MkButton primary class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="list">
 				<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
@@ -70,9 +70,9 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.clip,
-	icon: 'fas fa-paperclip',
+	icon: 'ti ti-paperclip',
 	action: {
-		icon: 'fas fa-plus',
+		icon: 'ti ti-plus',
 		handler: create,
 	},
 });
diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue
index 9af7c0d105..3476436b27 100644
--- a/packages/client/src/pages/my-lists/index.vue
+++ b/packages/client/src/pages/my-lists/index.vue
@@ -3,7 +3,7 @@
 	<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> {{ i18n.ts.createList }}</MkButton>
+			<MkButton primary class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton>
 
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists _content">
 				<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
@@ -47,9 +47,9 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.manageLists,
-	icon: 'fas fa-list-ul',
+	icon: 'ti ti-list',
 	action: {
-		icon: 'fas fa-plus',
+		icon: 'ti ti-plus',
 		handler: create,
 	},
 });
diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue
index d90453526e..f6234ffe44 100644
--- a/packages/client/src/pages/my-lists/list.vue
+++ b/packages/client/src/pages/my-lists/list.vue
@@ -25,7 +25,7 @@
 									<MkAcct :user="user" class="acct"/>
 								</div>
 								<div class="action">
-									<button class="_button" @click="removeUser(user)"><i class="fas fa-times"></i></button>
+									<button class="_button" @click="removeUser(user)"><i class="ti ti-x"></i></button>
 								</div>
 							</div>
 						</div>
@@ -122,7 +122,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => list ? {
 	title: list.name,
-	icon: 'fas fa-list-ul',
+	icon: 'ti ti-list',
 } : null));
 </script>
 
diff --git a/packages/client/src/pages/not-found.vue b/packages/client/src/pages/not-found.vue
index 253ecdb235..e58e44ef79 100644
--- a/packages/client/src/pages/not-found.vue
+++ b/packages/client/src/pages/not-found.vue
@@ -17,6 +17,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.notFound,
-	icon: 'fas fa-exclamation-triangle',
+	icon: 'ti ti-alert-triangle',
 });
 </script>
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index 6509cb306e..ba2bb91239 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -10,7 +10,7 @@
 					</div>
 
 					<div class="main _gap">
-						<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="fas fa-chevron-up"></i></MkButton>
+						<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="ti ti-chevron-up"></i></MkButton>
 						<div class="note _gap">
 							<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
 							<XNoteDetailed :key="note.id" v-model:note="note" class="note"/>
@@ -25,7 +25,7 @@
 								</div>
 							</MkA>
 						</div>
-						<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><i class="fas fa-chevron-down"></i></MkButton>
+						<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><i class="ti ti-chevron-down"></i></MkButton>
 					</div>
 
 					<div v-if="showPrev" class="_gap">
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index dd57060fda..7106951de2 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -50,7 +50,7 @@ function setFilter(ev) {
 		},
 	}));
 	const items = includeTypes != null ? [{
-		icon: 'fas fa-times',
+		icon: 'ti ti-x',
 		text: i18n.ts.clear,
 		action: () => {
 			includeTypes = null;
@@ -61,12 +61,12 @@ function setFilter(ev) {
 
 const headerActions = $computed(() => [tab === 'all' ? {
 	text: i18n.ts.filter,
-	icon: 'fas fa-filter',
+	icon: 'ti ti-filter',
 	highlighted: includeTypes != null,
 	handler: setFilter,
 } : undefined, tab === 'all' ? {
 	text: i18n.ts.markAllAsRead,
-	icon: 'fas fa-check',
+	icon: 'ti ti-check',
 	handler: () => {
 		os.apiWithDialog('notifications/mark-all-as-read');
 	},
@@ -81,15 +81,15 @@ const headerTabs = $computed(() => [{
 }, {
 	key: 'mentions',
 	title: i18n.ts.mentions,
-	icon: 'fas fa-at',
+	icon: 'ti ti-at',
 }, {
 	key: 'directNotes',
 	title: i18n.ts.directNotes,
-	icon: 'fas fa-envelope',
+	icon: 'ti ti-mail',
 }]);
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.notifications,
-	icon: 'fas fa-bell',
+	icon: 'ti ti-bell',
 })));
 </script>
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 4c2e0e4eb4..0438969afa 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.button }}</template>
+	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.button }}</template>
 
 	<section class="xfhsjczc">
 		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._button.text }}</template></MkInput>
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 1a2078448d..8625c26e78 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.counter }}</template>
+	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.counter }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
 		<MkInput v-model="value.name">
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 d763070b15..c93caeb9bd 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
@@ -4,7 +4,7 @@
 	<template #header><i class="fas fa-question"></i> {{ $ts._pages.blocks.if }}</template>
 	<template #func>
 		<button class="_button" @click="add()">
-			<i class="fas fa-plus"></i>
+			<i class="ti ti-plus"></i>
 		</button>
 	</template>
 
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 479a859e76..a8fb702329 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.numberInput }}</template>
+	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.numberInput }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
 		<MkInput v-model="value.name">
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 f8c42c296b..39be01ab32 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-paper-plane"></i> {{ $ts._pages.blocks.post }}</template>
+	<template #header><i class="ti ti-send"></i> {{ $ts._pages.blocks.post }}</template>
 
 	<section style="padding: 16px;">
 		<MkTextarea v-model="value.text"><template #label>{{ $ts._pages.blocks._post.text }}</template></MkTextarea>
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 4b28f120a9..754af477b6 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.radioButton }}</template>
+	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.radioButton }}</template>
 
 	<section style="padding: 0 16px 16px 16px;">
 		<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._radioButton.name }}</template></MkInput>
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 7276cc1e1b..c7b87c660b 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
@@ -4,10 +4,10 @@
 	<template #header><i class="fas fa-sticky-note"></i> {{ value.title }}</template>
 	<template #func>
 		<button class="_button" @click="rename()">
-			<i class="fas fa-pencil-alt"></i>
+			<i class="ti ti-pencil"></i>
 		</button>
 		<button class="_button" @click="add()">
-			<i class="fas fa-plus"></i>
+			<i class="ti ti-plus"></i>
 		</button>
 	</template>
 
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 ded57cf304..c74b17cc2c 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.switch }}</template>
+	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.switch }}</template>
 
 	<section class="kjuadyyj">
 		<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._switch.name }}</template></MkInput>
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 1e269ae58c..99631c4dae 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.textInput }}</template>
+	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.textInput }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
 		<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._textInput.name }}</template></MkInput>
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 1bb4aaa543..4b417e39a7 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.textareaInput }}</template>
+	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.textareaInput }}</template>
 
 	<section style="padding: 0 16px 16px 16px;">
 		<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._textareaInput.name }}</template></MkInput>
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index 6927e55868..efc9aac2a7 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -5,14 +5,14 @@
 		<div class="buttons">
 			<slot name="func"></slot>
 			<button v-if="removable" class="_button" @click="remove()">
-				<i class="fas fa-trash-alt"></i>
+				<i class="ti ti-trash"></i>
 			</button>
 			<button v-if="draggable" class="drag-handle _button">
-				<i class="fas fa-bars"></i>
+				<i class="ti ti-menu-2"></i>
 			</button>
 			<button class="_button" @click="toggleContent(!showBody)">
-				<template v-if="showBody"><i class="fas fa-angle-up"></i></template>
-				<template v-else><i class="fas fa-angle-down"></i></template>
+				<template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
+				<template v-else><i class="ti ti-chevron-down"></i></template>
 			</button>
 		</div>
 	</header>
diff --git a/packages/client/src/pages/page-editor/page-editor.script-block.vue b/packages/client/src/pages/page-editor/page-editor.script-block.vue
index ded9368b89..bb07adaae2 100644
--- a/packages/client/src/pages/page-editor/page-editor.script-block.vue
+++ b/packages/client/src/pages/page-editor/page-editor.script-block.vue
@@ -4,7 +4,7 @@
 	<template #header><i v-if="icon" :class="icon"></i> <template v-if="title">{{ title }} <span v-if="typeText" class="turmquns">({{ typeText }})</span></template><template v-else-if="typeText">{{ typeText }}</template></template>
 	<template #func>
 		<button class="_button" @click="changeType()">
-			<i class="fas fa-pencil-alt"></i>
+			<i class="ti ti-pencil"></i>
 		</button>
 	</template>
 
@@ -116,7 +116,7 @@ export default defineComponent({
 	computed: {
 		icon(): any {
 			if (this.modelValue.type === null) return null;
-			if (this.modelValue.type.startsWith('fn:')) return 'fas fa-plug';
+			if (this.modelValue.type.startsWith('fn:')) return 'ti ti-plug';
 			return blockDefs.find(x => x.type === this.modelValue.type).icon;
 		},
 		typeText(): any {
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 591d13053a..1230119c63 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -3,10 +3,10 @@
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
 		<div class="jqqmcavi">
-			<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="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>
+			<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="ti ti-external-link"></i> {{ $ts._pages.viewPage }}</MkButton>
+			<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="ti ti-device-floppy"></i> {{ $ts.save }}</MkButton>
+			<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="ti ti-copy"></i> {{ $ts.duplicate }}</MkButton>
+			<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="ti ti-trash"></i> {{ $ts.delete }}</MkButton>
 		</div>
 
 		<div v-if="tab === 'settings'">
@@ -35,10 +35,10 @@
 				<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>
+					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ti ti-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>
+						<MkButton v-if="!readonly" @click="removeEyeCatchingImage()"><i class="ti ti-trash"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
 					</div>
 				</div>
 			</div>
@@ -48,7 +48,7 @@
 			<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="ti ti-plus"></i></MkButton>
 			</div>
 		</div>
 
@@ -68,7 +68,7 @@
 					</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="ti ti-plus"></i></MkButton>
 			</div>
 		</div>
 
@@ -412,7 +412,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => [{
 	key: 'settings',
 	title: i18n.ts._pages.pageSetting,
-	icon: 'fas fa-cog',
+	icon: 'ti ti-settings',
 }, {
 	key: 'contents',
 	title: i18n.ts._pages.contents,
@@ -424,7 +424,7 @@ const headerTabs = $computed(() => [{
 }, {
 	key: 'script',
 	title: i18n.ts.script,
-	icon: 'fas fa-code',
+	icon: 'ti ti-code',
 }]);
 
 definePageMetadata(computed(() => {
@@ -437,7 +437,7 @@ definePageMetadata(computed(() => {
 	}
 	return {
 		title: title,
-		icon: 'fas fa-pencil-alt',
+		icon: 'ti ti-pencil',
 		};
 }));
 </script>
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index fb0e6a4914..5a37df64d3 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -18,12 +18,12 @@
 					</div>
 					<div class="actions">
 						<div class="like">
-							<MkButton v-if="page.isLiked" v-tooltip="i18n.ts._pages.unlike" class="button" primary @click="unlike()"><i class="fas fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+							<MkButton v-if="page.isLiked" v-tooltip="i18n.ts._pages.unlike" class="button" primary @click="unlike()"><i class="ti ti-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
 							<MkButton v-else v-tooltip="i18n.ts._pages.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
 						</div>
 						<div class="other">
-							<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="fas fa-retweet fa-fw"></i></button>
-							<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="fas fa-share-alt fa-fw"></i></button>
+							<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ti ti-repeat ti-fw"></i></button>
+							<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="ti ti-share ti-fw"></i></button>
 						</div>
 					</div>
 					<div class="user">
@@ -49,7 +49,7 @@
 				</div>
 				<MkAd :prefer="['horizontal', 'horizontal-big']"/>
 				<MkContainer :max-height="300" :foldable="true" class="other">
-					<template #header><i class="fas fa-clock"></i> {{ i18n.ts.recentPosts }}</template>
+					<template #header><i class="ti ti-clock"></i> {{ i18n.ts.recentPosts }}</template>
 					<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
 						<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
 					</MkPagination>
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 02b05c57ba..53e65c82a4 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -9,7 +9,7 @@
 		</div>
 
 		<div v-else-if="tab === 'my'" class="rknalgpo my">
-			<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
+			<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
 			<MkPagination v-slot="{items}" :pagination="myPagesPagination">
 				<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
 			</MkPagination>
@@ -55,7 +55,7 @@ function create() {
 }
 
 const headerActions = $computed(() => [{
-	icon: 'fas fa-plus',
+	icon: 'ti ti-plus',
 	text: i18n.ts.create,
 	handler: create,
 }]);
@@ -67,11 +67,11 @@ const headerTabs = $computed(() => [{
 }, {
 	key: 'my',
 	title: i18n.ts._pages.my,
-	icon: 'fas fa-edit',
+	icon: 'ti ti-edit',
 }, {
 	key: 'liked',
 	title: i18n.ts._pages.liked,
-	icon: 'fas fa-heart',
+	icon: 'ti ti-heart',
 }]);
 
 definePageMetadata(computed(() => ({
diff --git a/packages/client/src/pages/preview.vue b/packages/client/src/pages/preview.vue
index efbe53a523..354f686e46 100644
--- a/packages/client/src/pages/preview.vue
+++ b/packages/client/src/pages/preview.vue
@@ -16,7 +16,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.preview,
-	icon: 'fas fa-eye',
+	icon: 'ti ti-eye',
 })));
 </script>
 
diff --git a/packages/client/src/pages/registry.keys.vue b/packages/client/src/pages/registry.keys.vue
index ac586b4e72..f179fbe957 100644
--- a/packages/client/src/pages/registry.keys.vue
+++ b/packages/client/src/pages/registry.keys.vue
@@ -88,7 +88,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: 'fas fa-cogs',
+	icon: 'ti ti-adjustments',
 });
 </script>
 
diff --git a/packages/client/src/pages/registry.value.vue b/packages/client/src/pages/registry.value.vue
index b6f3d73bb6..378420b1ba 100644
--- a/packages/client/src/pages/registry.value.vue
+++ b/packages/client/src/pages/registry.value.vue
@@ -24,14 +24,14 @@
 				<template #label>{{ i18n.ts.value }} (JSON)</template>
 			</FormTextarea>
 
-			<MkButton class="_formBlock" primary @click="save"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
+			<MkButton class="_formBlock" primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 
 			<MkKeyValue class="_formBlock">
 				<template #key>{{ i18n.ts.updatedAt }}</template>
 				<template #value><MkTime :time="value.updatedAt" mode="detail"/></template>
 			</MkKeyValue>
 
-			<MkButton danger @click="del"><i class="fas fa-trash"></i> {{ i18n.ts.delete }}</MkButton>
+			<MkButton danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
 		</template>
 	</MkSpacer>
 </MkStickyContainer>
@@ -115,7 +115,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: 'fas fa-cogs',
+	icon: 'ti ti-adjustments',
 });
 </script>
 
diff --git a/packages/client/src/pages/registry.vue b/packages/client/src/pages/registry.vue
index 80a44d5589..a2c65294fc 100644
--- a/packages/client/src/pages/registry.vue
+++ b/packages/client/src/pages/registry.vue
@@ -66,7 +66,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
-	icon: 'fas fa-cogs',
+	icon: 'ti ti-adjustments',
 });
 </script>
 
diff --git a/packages/client/src/pages/reset-password.vue b/packages/client/src/pages/reset-password.vue
index 38f2cf289d..8ec15f6425 100644
--- a/packages/client/src/pages/reset-password.vue
+++ b/packages/client/src/pages/reset-password.vue
@@ -4,7 +4,7 @@
 	<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 #prefix><i class="ti ti-lock"></i></template>
 				<template #label>{{ i18n.ts.newPassword }}</template>
 			</FormInput>
 		
@@ -50,7 +50,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.resetPassword,
-	icon: 'fas fa-lock',
+	icon: 'ti ti-lock',
 });
 </script>
 
diff --git a/packages/client/src/pages/scratchpad.vue b/packages/client/src/pages/scratchpad.vue
index 12b5d78b27..edb2d8e18c 100644
--- a/packages/client/src/pages/scratchpad.vue
+++ b/packages/client/src/pages/scratchpad.vue
@@ -2,7 +2,7 @@
 <div class="iltifgqe">
 	<div class="editor _panel _gap">
 		<PrismEditor v-model="code" class="_code code" :highlight="highlighter" :line-numbers="false"/>
-		<MkButton style="position: absolute; top: 8px; right: 8px;" primary @click="run()"><i class="fas fa-play"></i></MkButton>
+		<MkButton style="position: absolute; top: 8px; right: 8px;" primary @click="run()"><i class="ti ti-player-play"></i></MkButton>
 	</div>
 
 	<MkContainer :foldable="true" class="_gap">
@@ -112,7 +112,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.scratchpad,
-	icon: 'fas fa-terminal',
+	icon: 'ti ti-terminal-2',
 });
 </script>
 
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index fdcbb57e44..c080b763bb 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -33,6 +33,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
 	title: i18n.t('searchWith', { q: props.query }),
-	icon: 'fas fa-search',
+	icon: 'ti ti-search',
 })));
 </script>
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
index 89d8178dc6..422b55e227 100644
--- a/packages/client/src/pages/settings/2fa.vue
+++ b/packages/client/src/pages/settings/2fa.vue
@@ -26,7 +26,7 @@
 			<ol v-if="registration && !registration.error">
 				<li v-if="registration.stage >= 0">
 					{{ i18n.ts.tapSecurityKey }}
-					<i v-if="registration.saving && registration.stage == 0" class="fas fa-spinner fa-pulse fa-fw"></i>
+					<i v-if="registration.saving && registration.stage == 0" class="fas fa-spinner fa-pulse ti-fw"></i>
 				</li>
 				<li v-if="registration.stage >= 1">
 					<MkForm :disabled="registration.stage != 1 || registration.saving">
@@ -34,7 +34,7 @@
 							<template #label>{{ i18n.ts.securityKeyName }}</template>
 						</MkInput>
 						<MkButton :disabled="keyName.length == 0" @click="registerKey">{{ i18n.ts.registerSecurityKey }}</MkButton>
-						<i v-if="registration.saving && registration.stage == 1" class="fas fa-spinner fa-pulse fa-fw"></i>
+						<i v-if="registration.saving && registration.stage == 1" class="fas fa-spinner fa-pulse ti-fw"></i>
 					</MkForm>
 				</li>
 			</ol>
diff --git a/packages/client/src/pages/settings/account-info.vue b/packages/client/src/pages/settings/account-info.vue
index 93e65d55b1..ccd99c162a 100644
--- a/packages/client/src/pages/settings/account-info.vue
+++ b/packages/client/src/pages/settings/account-info.vue
@@ -153,6 +153,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.accountInfo,
-	icon: 'fas fa-info-circle',
+	icon: 'ti ti-info-circle',
 });
 </script>
diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
index e16931a9ca..a2b7de81af 100644
--- a/packages/client/src/pages/settings/accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="_formRoot">
 	<FormSuspense :p="init">
-		<FormButton primary @click="addAccount"><i class="fas fa-plus"></i> {{ i18n.ts.addAccount }}</FormButton>
+		<FormButton primary @click="addAccount"><i class="ti ti-plus"></i> {{ i18n.ts.addAccount }}</FormButton>
 
 		<div v-for="account in accounts" :key="account.id" class="_panel _button lcjjdxlm" @click="menu(account, $event)">
 			<div class="avatar">
@@ -54,7 +54,7 @@ function menu(account, ev) {
 		action: () => switchAccount(account),
 	}, {
 		text: i18n.ts.remove,
-		icon: 'fas fa-trash-alt',
+		icon: 'ti ti-trash',
 		danger: true,
 		action: () => removeAccount(account),
 	}], ev.currentTarget ?? ev.target);
@@ -108,7 +108,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.accounts,
-	icon: 'fas fa-users',
+	icon: 'ti ti-users',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/api.vue b/packages/client/src/pages/settings/api.vue
index 7165089e39..8d7291cd10 100644
--- a/packages/client/src/pages/settings/api.vue
+++ b/packages/client/src/pages/settings/api.vue
@@ -41,6 +41,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: 'API',
-	icon: 'fas fa-key',
+	icon: 'ti ti-api',
 });
 </script>
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index 8b345c8e9f..05abadff23 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -22,7 +22,7 @@
 						<div><MkTime :time="token.lastUsedAt"/></div>
 					</div>
 					<div class="actions">
-						<button class="_button" @click="revoke(token)"><i class="fas fa-trash-alt"></i></button>
+						<button class="_button" @click="revoke(token)"><i class="ti ti-trash"></i></button>
 					</div>
 					<details>
 						<summary>{{ i18n.ts.details }}</summary>
@@ -66,7 +66,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.installedApps,
-	icon: 'fas fa-plug',
+	icon: 'ti ti-plug',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/custom-css.vue b/packages/client/src/pages/settings/custom-css.vue
index 2992906e6d..2caad22b7b 100644
--- a/packages/client/src/pages/settings/custom-css.vue
+++ b/packages/client/src/pages/settings/custom-css.vue
@@ -41,6 +41,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.customCss,
-	icon: 'fas fa-code',
+	icon: 'ti ti-code',
 });
 </script>
diff --git a/packages/client/src/pages/settings/deck.vue b/packages/client/src/pages/settings/deck.vue
index 1285a6641c..82cefe05d5 100644
--- a/packages/client/src/pages/settings/deck.vue
+++ b/packages/client/src/pages/settings/deck.vue
@@ -34,6 +34,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.deck,
-	icon: 'fas fa-columns',
+	icon: 'ti ti-columns',
 });
 </script>
diff --git a/packages/client/src/pages/settings/delete-account.vue b/packages/client/src/pages/settings/delete-account.vue
index 851a857fed..8a25ff39f0 100644
--- a/packages/client/src/pages/settings/delete-account.vue
+++ b/packages/client/src/pages/settings/delete-account.vue
@@ -47,6 +47,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._accountDelete.accountDelete,
-	icon: 'fas fa-exclamation-triangle',
+	icon: 'ti ti-alert-triangle',
 });
 </script>
diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
index a10e2d9f7d..ed44509774 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -120,7 +120,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.drive,
-	icon: 'fas fa-cloud',
+	icon: 'ti ti-cloud',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/email.vue b/packages/client/src/pages/settings/email.vue
index 1dae233a07..d4a6dc48e5 100644
--- a/packages/client/src/pages/settings/email.vue
+++ b/packages/client/src/pages/settings/email.vue
@@ -3,9 +3,9 @@
 	<FormSection>
 		<template #label>{{ i18n.ts.emailAddress }}</template>
 		<FormInput v-model="emailAddress" type="email" manual-save>
-			<template #prefix><i class="fas fa-envelope"></i></template>
+			<template #prefix><i class="ti ti-mail"></i></template>
 			<template v-if="$i.email && !$i.emailVerified" #caption>{{ i18n.ts.verificationEmailSent }}</template>
-			<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="fas fa-check" style="color: var(--success);"></i> {{ i18n.ts.emailVerified }}</template>
+			<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="ti ti-check" style="color: var(--success);"></i> {{ i18n.ts.emailVerified }}</template>
 		</FormInput>
 	</FormSection>
 
@@ -106,6 +106,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.email,
-	icon: 'fas fa-envelope',
+	icon: 'ti ti-mail',
 });
 </script>
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index 9072bcefc9..e4dbde0220 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -15,9 +15,9 @@
 	<FormRadios v-model="overridedDeviceKind" class="_formBlock">
 		<template #label>{{ i18n.ts.overridedDeviceKind }}</template>
 		<option :value="null">{{ i18n.ts.auto }}</option>
-		<option value="smartphone"><i class="fas fa-mobile-alt"/> {{ i18n.ts.smartphone }}</option>
-		<option value="tablet"><i class="fas fa-tablet-alt"/> {{ i18n.ts.tablet }}</option>
-		<option value="desktop"><i class="fas fa-desktop"/> {{ i18n.ts.desktop }}</option>
+		<option value="smartphone"><i class="ti ti-device-mobile"/> {{ i18n.ts.smartphone }}</option>
+		<option value="tablet"><i class="ti ti-device-tablet"/> {{ i18n.ts.tablet }}</option>
+		<option value="desktop"><i class="ti ti-device-desktop"/> {{ i18n.ts.desktop }}</option>
 	</FormRadios>
 
 	<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{ i18n.ts.showFixedPostForm }}</FormSwitch>
@@ -88,7 +88,7 @@
 
 	<FormLink to="/settings/deck" class="_formBlock">{{ i18n.ts.deck }}</FormLink>
 
-	<FormLink to="/settings/custom-css" class="_formBlock"><template #icon><i class="fas fa-code"></i></template>{{ i18n.ts.customCss }}</FormLink>
+	<FormLink to="/settings/custom-css" class="_formBlock"><template #icon><i class="ti ti-code"></i></template>{{ i18n.ts.customCss }}</FormLink>
 </div>
 </template>
 
@@ -185,6 +185,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.general,
-	icon: 'fas fa-cogs',
+	icon: 'ti ti-adjustments',
 });
 </script>
diff --git a/packages/client/src/pages/settings/import-export.vue b/packages/client/src/pages/settings/import-export.vue
index d3d155894e..68460cf7ad 100644
--- a/packages/client/src/pages/settings/import-export.vue
+++ b/packages/client/src/pages/settings/import-export.vue
@@ -4,66 +4,66 @@
 		<template #label>{{ i18n.ts._exportOrImport.allNotes }}</template>
 		<FormFolder>
 			<template #label>{{ i18n.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> {{ i18n.ts.export }}</MkButton>
+			<template #icon><i class="ti ti-download"></i></template>
+			<MkButton primary :class="$style.button" inline @click="exportNotes()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
 		</FormFolder>
 	</FormSection>
 	<FormSection>
 		<template #label>{{ i18n.ts._exportOrImport.followingList }}</template>
 		<FormFolder class="_formBlock">
 			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="fas fa-download"></i></template>
+			<template #icon><i class="ti ti-download"></i></template>
 			<FormSwitch v-model="excludeMutingUsers" class="_formBlock">
 				{{ i18n.ts._exportOrImport.excludeMutingUsers }}
 			</FormSwitch>
 			<FormSwitch v-model="excludeInactiveUsers" class="_formBlock">
 				{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
 			</FormSwitch>
-			<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="fas fa-download"></i> {{ i18n.ts.export }}</MkButton>
+			<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
 		</FormFolder>
 		<FormFolder class="_formBlock">
 			<template #label>{{ i18n.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> {{ i18n.ts.import }}</MkButton>
+			<template #icon><i class="ti ti-upload"></i></template>
+			<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
 		</FormFolder>
 	</FormSection>
 	<FormSection>
 		<template #label>{{ i18n.ts._exportOrImport.userLists }}</template>
 		<FormFolder class="_formBlock">
 			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="fas fa-download"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="fas fa-download"></i> {{ i18n.ts.export }}</MkButton>
+			<template #icon><i class="ti ti-download"></i></template>
+			<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
 		</FormFolder>
 		<FormFolder class="_formBlock">
 			<template #label>{{ i18n.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> {{ i18n.ts.import }}</MkButton>
+			<template #icon><i class="ti ti-upload"></i></template>
+			<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
 		</FormFolder>
 	</FormSection>
 	<FormSection>
 		<template #label>{{ i18n.ts._exportOrImport.muteList }}</template>
 		<FormFolder class="_formBlock">
 			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="fas fa-download"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="fas fa-download"></i> {{ i18n.ts.export }}</MkButton>
+			<template #icon><i class="ti ti-download"></i></template>
+			<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
 		</FormFolder>
 		<FormFolder class="_formBlock">
 			<template #label>{{ i18n.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> {{ i18n.ts.import }}</MkButton>
+			<template #icon><i class="ti ti-upload"></i></template>
+			<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
 		</FormFolder>
 	</FormSection>
 	<FormSection>
 		<template #label>{{ i18n.ts._exportOrImport.blockingList }}</template>
 		<FormFolder class="_formBlock">
 			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="fas fa-download"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="fas fa-download"></i> {{ i18n.ts.export }}</MkButton>
+			<template #icon><i class="ti ti-download"></i></template>
+			<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
 		</FormFolder>
 		<FormFolder class="_formBlock">
 			<template #label>{{ i18n.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> {{ i18n.ts.import }}</MkButton>
+			<template #icon><i class="ti ti-upload"></i></template>
+			<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
 		</FormFolder>
 	</FormSection>
 </div>
@@ -113,7 +113,7 @@ const exportFollowing = () => {
 		excludeMuting: excludeMutingUsers.value,
 		excludeInactive: excludeInactiveUsers.value,
 	})
-	.then(onExportSuccess).catch(onError);
+		.then(onExportSuccess).catch(onError);
 };
 
 const exportBlocking = () => {
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index c38e1394f0..5c9d8a8efd 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -36,7 +36,7 @@ import * as os from '@/os';
 
 const indexInfo = {
 	title: i18n.ts.settings,
-	icon: 'fas fa-cog',
+	icon: 'ti ti-settings',
 	hideHeader: true,
 };
 const INFO = ref(indexInfo);
@@ -58,42 +58,42 @@ const ro = new ResizeObserver((entries, observer) => {
 const menuDef = computed(() => [{
 	title: i18n.ts.basicSettings,
 	items: [{
-		icon: 'fas fa-user',
+		icon: 'ti ti-user',
 		text: i18n.ts.profile,
 		to: '/settings/profile',
 		active: currentPage?.route.name === 'profile',
 	}, {
-		icon: 'fas fa-lock-open',
+		icon: 'ti ti-lock-open',
 		text: i18n.ts.privacy,
 		to: '/settings/privacy',
 		active: currentPage?.route.name === 'privacy',
 	}, {
-		icon: 'fas fa-laugh',
+		icon: 'ti ti-mood-happy',
 		text: i18n.ts.reaction,
 		to: '/settings/reaction',
 		active: currentPage?.route.name === 'reaction',
 	}, {
-		icon: 'fas fa-cloud',
+		icon: 'ti ti-cloud',
 		text: i18n.ts.drive,
 		to: '/settings/drive',
 		active: currentPage?.route.name === 'drive',
 	}, {
-		icon: 'fas fa-bell',
+		icon: 'ti ti-bell',
 		text: i18n.ts.notifications,
 		to: '/settings/notifications',
 		active: currentPage?.route.name === 'notifications',
 	}, {
-		icon: 'fas fa-envelope',
+		icon: 'ti ti-mail',
 		text: i18n.ts.email,
 		to: '/settings/email',
 		active: currentPage?.route.name === 'email',
 	}, {
-		icon: 'fas fa-share-alt',
+		icon: 'ti ti-share',
 		text: i18n.ts.integration,
 		to: '/settings/integration',
 		active: currentPage?.route.name === 'integration',
 	}, {
-		icon: 'fas fa-lock',
+		icon: 'ti ti-lock',
 		text: i18n.ts.security,
 		to: '/settings/security',
 		active: currentPage?.route.name === 'security',
@@ -101,32 +101,32 @@ const menuDef = computed(() => [{
 }, {
 	title: i18n.ts.clientSettings,
 	items: [{
-		icon: 'fas fa-cogs',
+		icon: 'ti ti-adjustments',
 		text: i18n.ts.general,
 		to: '/settings/general',
 		active: currentPage?.route.name === 'general',
 	}, {
-		icon: 'fas fa-palette',
+		icon: 'ti ti-palette',
 		text: i18n.ts.theme,
 		to: '/settings/theme',
 		active: currentPage?.route.name === 'theme',
 	}, {
-		icon: 'fas fa-bars',
+		icon: 'ti ti-menu-2',
 		text: i18n.ts.navbar,
 		to: '/settings/navbar',
 		active: currentPage?.route.name === 'navbar',
 	}, {
-		icon: 'fas fa-bars-progress',
+		icon: 'ti ti-equal-double',
 		text: i18n.ts.statusbar,
 		to: '/settings/statusbar',
 		active: currentPage?.route.name === 'statusbar',
 	}, {
-		icon: 'fas fa-music',
+		icon: 'ti ti-music',
 		text: i18n.ts.sounds,
 		to: '/settings/sounds',
 		active: currentPage?.route.name === 'sounds',
 	}, {
-		icon: 'fas fa-plug',
+		icon: 'ti ti-plug',
 		text: i18n.ts.plugins,
 		to: '/settings/plugin',
 		active: currentPage?.route.name === 'plugin',
@@ -134,50 +134,50 @@ const menuDef = computed(() => [{
 }, {
 	title: i18n.ts.otherSettings,
 	items: [{
-		icon: 'fas fa-boxes',
+		icon: 'ti ti-package',
 		text: i18n.ts.importAndExport,
 		to: '/settings/import-export',
 		active: currentPage?.route.name === 'import-export',
 	}, {
-		icon: 'fas fa-volume-mute',
+		icon: 'ti ti-planet-off',
 		text: i18n.ts.instanceMute,
 		to: '/settings/instance-mute',
 		active: currentPage?.route.name === 'instance-mute',
 	}, {
-		icon: 'fas fa-ban',
+		icon: 'ti ti-ban',
 		text: i18n.ts.muteAndBlock,
 		to: '/settings/mute-block',
 		active: currentPage?.route.name === 'mute-block',
 	}, {
-		icon: 'fas fa-comment-slash',
+		icon: 'ti ti-message-off',
 		text: i18n.ts.wordMute,
 		to: '/settings/word-mute',
 		active: currentPage?.route.name === 'word-mute',
 	}, {
-		icon: 'fas fa-key',
+		icon: 'ti ti-api',
 		text: 'API',
 		to: '/settings/api',
 		active: currentPage?.route.name === 'api',
 	}, {
-		icon: 'fas fa-bolt',
+		icon: 'ti ti-webhook',
 		text: 'Webhook',
 		to: '/settings/webhook',
 		active: currentPage?.route.name === 'webhook',
 	}, {
-		icon: 'fas fa-ellipsis-h',
+		icon: 'ti ti-dots',
 		text: i18n.ts.other,
 		to: '/settings/other',
 		active: currentPage?.route.name === 'other',
 	}],
 }, {
 	items: [{
-		icon: 'fas fa-floppy-disk',
+		icon: 'ti ti-device-floppy',
 		text: i18n.ts.preferencesBackups,
 		to: '/settings/preferences-backups',
 		active: currentPage?.route.name === 'preferences-backups',
 	}, {
 		type: 'button',
-		icon: 'fas fa-trash',
+		icon: 'ti ti-trash',
 		text: i18n.ts.clearCache,
 		action: () => {
 			localStorage.removeItem('locale');
@@ -186,7 +186,7 @@ const menuDef = computed(() => [{
 		},
 	}, {
 		type: 'button',
-		icon: 'fas fa-sign-in-alt fa-flip-horizontal',
+		icon: 'ti ti-logout',
 		text: i18n.ts.logout,
 		action: async () => {
 			const { canceled } = await os.confirm({
diff --git a/packages/client/src/pages/settings/instance-mute.vue b/packages/client/src/pages/settings/instance-mute.vue
index 5a0d48b82e..54504de188 100644
--- a/packages/client/src/pages/settings/instance-mute.vue
+++ b/packages/client/src/pages/settings/instance-mute.vue
@@ -5,7 +5,7 @@
 		<template #label>{{ i18n.ts._instanceMute.heading }}</template>
 		<template #caption>{{ i18n.ts._instanceMute.instanceMuteDescription }}<br>{{ i18n.ts._instanceMute.instanceMuteDescription2 }}</template>
 	</FormTextarea>
-	<MkButton primary :disabled="!changed" class="_formBlock" @click="save()"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
+	<MkButton primary :disabled="!changed" class="_formBlock" @click="save()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 </div>
 </template>
 
@@ -48,6 +48,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.instanceMute,
-	icon: 'fas fa-volume-mute',
+	icon: 'ti ti-planet-off',
 });
 </script>
diff --git a/packages/client/src/pages/settings/integration.vue b/packages/client/src/pages/settings/integration.vue
index c8219519f8..f3595e897b 100644
--- a/packages/client/src/pages/settings/integration.vue
+++ b/packages/client/src/pages/settings/integration.vue
@@ -94,6 +94,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.integration,
-	icon: 'fas fa-share-alt',
+	icon: 'ti ti-share',
 });
 </script>
diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/mute-block.vue
index 3832933cf9..1cf33d34db 100644
--- a/packages/client/src/pages/settings/mute-block.vue
+++ b/packages/client/src/pages/settings/mute-block.vue
@@ -56,6 +56,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.muteAndBlock,
-	icon: 'fas fa-ban',
+	icon: 'ti ti-ban',
 });
 </script>
diff --git a/packages/client/src/pages/settings/navbar.vue b/packages/client/src/pages/settings/navbar.vue
index 6c501e9f2f..8825134dc9 100644
--- a/packages/client/src/pages/settings/navbar.vue
+++ b/packages/client/src/pages/settings/navbar.vue
@@ -82,6 +82,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.navbar,
-	icon: 'fas fa-list-ul',
+	icon: 'ti ti-list',
 });
 </script>
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
index 77ec567da4..e24be99cb6 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_formRoot">
-	<FormLink class="_formBlock" @click="configure"><template #icon><i class="fas fa-cog"></i></template>{{ i18n.ts.notificationSetting }}</FormLink>
+	<FormLink class="_formBlock" @click="configure"><template #icon><i class="ti ti-settings"></i></template>{{ i18n.ts.notificationSetting }}</FormLink>
 	<FormSection>
 		<FormLink class="_formBlock" @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</FormLink>
 		<FormLink class="_formBlock" @click="readAllUnreadNotes">{{ i18n.ts.markAsReadAllUnreadNotes }}</FormLink>
@@ -85,6 +85,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.notifications,
-	icon: 'fas fa-bell',
+	icon: 'ti ti-bell',
 });
 </script>
diff --git a/packages/client/src/pages/settings/other.vue b/packages/client/src/pages/settings/other.vue
index 51dab04cfa..f8eb594740 100644
--- a/packages/client/src/pages/settings/other.vue
+++ b/packages/client/src/pages/settings/other.vue
@@ -10,9 +10,9 @@
 
 	<FormLink to="/settings/account-info" class="_formBlock">{{ i18n.ts.accountInfo }}</FormLink>
 
-	<FormLink to="/registry" class="_formBlock"><template #icon><i class="fas fa-cogs"></i></template>{{ i18n.ts.registry }}</FormLink>
+	<FormLink to="/registry" class="_formBlock"><template #icon><i class="ti ti-adjustments"></i></template>{{ i18n.ts.registry }}</FormLink>
 
-	<FormLink to="/settings/delete-account" class="_formBlock"><template #icon><i class="fas fa-exclamation-triangle"></i></template>{{ i18n.ts.closeAccount }}</FormLink>
+	<FormLink to="/settings/delete-account" class="_formBlock"><template #icon><i class="ti ti-alert-triangle"></i></template>{{ i18n.ts.closeAccount }}</FormLink>
 </div>
 </template>
 
@@ -42,6 +42,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.other,
-	icon: 'fas fa-ellipsis-h',
+	icon: 'ti ti-dots',
 });
 </script>
diff --git a/packages/client/src/pages/settings/plugin.install.vue b/packages/client/src/pages/settings/plugin.install.vue
index e259bbeb3a..550bba242e 100644
--- a/packages/client/src/pages/settings/plugin.install.vue
+++ b/packages/client/src/pages/settings/plugin.install.vue
@@ -7,7 +7,7 @@
 	</FormTextarea>
 
 	<div class="_formBlock">
-		<FormButton :disabled="code == null" primary inline @click="install"><i class="fas fa-check"></i> {{ i18n.ts.install }}</FormButton>
+		<FormButton :disabled="code == null" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</FormButton>
 	</div>
 </div>
 </template>
@@ -119,6 +119,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._plugin.install,
-	icon: 'fas fa-download',
+	icon: 'ti ti-download',
 });
 </script>
diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue
index 8ce6fe4445..2e4d54ec5c 100644
--- a/packages/client/src/pages/settings/plugin.vue
+++ b/packages/client/src/pages/settings/plugin.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_formRoot">
-	<FormLink to="/settings/plugin/install"><template #icon><i class="fas fa-download"></i></template>{{ i18n.ts._plugin.install }}</FormLink>
+	<FormLink to="/settings/plugin/install"><template #icon><i class="ti ti-download"></i></template>{{ i18n.ts._plugin.install }}</FormLink>
 
 	<FormSection>
 		<template #label>{{ i18n.ts.manage }}</template>
@@ -23,8 +23,8 @@
 			</MkKeyValue>
 
 			<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-				<MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="fas fa-cog"></i> {{ i18n.ts.settings }}</MkButton>
-				<MkButton inline danger @click="uninstall(plugin)"><i class="fas fa-trash-alt"></i> {{ i18n.ts.uninstall }}</MkButton>
+				<MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="ti ti-settings"></i> {{ i18n.ts.settings }}</MkButton>
+				<MkButton inline danger @click="uninstall(plugin)"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</MkButton>
 			</div>
 		</div>
 	</FormSection>
@@ -89,7 +89,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.plugins,
-	icon: 'fas fa-plug',
+	icon: 'ti ti-plug',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/preferences-backups.vue b/packages/client/src/pages/settings/preferences-backups.vue
index fac67185bc..379f65beff 100644
--- a/packages/client/src/pages/settings/preferences-backups.vue
+++ b/packages/client/src/pages/settings/preferences-backups.vue
@@ -376,25 +376,25 @@ function menu(ev: MouseEvent, profileId: string) {
 
 	return os.popupMenu([{
 		text: ts._preferencesBackups.apply,
-		icon: 'fas fa-circle-down',
+		icon: 'ti ti-check',
 		action: () => applyProfile(profileId),
 	}, {
 		type: 'a',
 		text: ts.download,
-		icon: 'fas fa-download',
+		icon: 'ti ti-download',
 		href: URL.createObjectURL(new Blob([JSON.stringify(profiles[profileId], null, 2)], { type: 'application/json' })),
 		download: `${profiles[profileId].name}.json`,
 	}, null, {
 		text: ts.rename,
-		icon: 'fas fa-i-cursor',
+		icon: 'ti ti-cursor-text',
 		action: () => rename(profileId),
 	}, {
 		text: ts._preferencesBackups.save,
-		icon: 'fas fa-floppy-disk',
+		icon: 'ti ti-device-floppy',
 		action: () => save(profileId),
 	}, null, {
 		text: ts._preferencesBackups.delete,
-		icon: 'fas fa-trash-can',
+		icon: 'ti ti-trash',
 		action: () => deleteProfile(profileId),
 		danger: true,
 	}], ev.currentTarget ?? ev.target);
@@ -416,7 +416,7 @@ onUnmounted(() => {
 
 definePageMetadata(computed(() => ({
 	title: ts.preferencesBackups,
-	icon: 'fas fa-floppy-disk',
+	icon: 'ti ti-device-floppy',
 	bg: 'var(--bg)',
 })));
 </script>
diff --git a/packages/client/src/pages/settings/privacy.vue b/packages/client/src/pages/settings/privacy.vue
index 45a0358a92..44ffae5446 100644
--- a/packages/client/src/pages/settings/privacy.vue
+++ b/packages/client/src/pages/settings/privacy.vue
@@ -95,6 +95,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.privacy,
-	icon: 'fas fa-lock-open',
+	icon: 'ti ti-lock-open',
 });
 </script>
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index aaf60c8d55..49e15456cf 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -46,8 +46,8 @@
 						<template #label>{{ i18n.ts._profile.metadataContent }} #{{ i + 1 }}</template>
 					</FormInput>
 				</FormSplit>
-				<MkButton :disabled="fields.length >= 16" inline style="margin-right: 8px;" @click="addField"><i class="fas fa-plus"></i> {{ i18n.ts.add }}</MkButton>
-				<MkButton inline primary @click="saveFields"><i class="fas fa-check"></i> {{ i18n.ts.save }}</MkButton>
+				<MkButton :disabled="fields.length >= 16" inline style="margin-right: 8px;" @click="addField"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+				<MkButton inline primary @click="saveFields"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
 			</div>
 		</FormFolder>
 		<template #caption>{{ i18n.ts._profile.metadataDescription }}</template>
@@ -178,7 +178,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.profile,
-	icon: 'fas fa-user',
+	icon: 'ti ti-user',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index f8d57cbcd5..36e0718fbc 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -10,7 +10,7 @@
 					</button>
 				</template>
 				<template #footer>
-					<button class="_button add" @click="chooseEmoji"><i class="fas fa-plus"></i></button>
+					<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
 				</template>
 			</XDraggable>
 		</div>
@@ -46,7 +46,7 @@
 
 	<FormSection>
 		<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-			<FormButton inline @click="preview"><i class="fas fa-eye"></i> {{ i18n.ts.preview }}</FormButton>
+			<FormButton inline @click="preview"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</FormButton>
 			<FormButton inline danger @click="setDefault"><i class="fas fa-undo"></i> {{ i18n.ts.default }}</FormButton>
 		</div>
 	</FormSection>
@@ -127,9 +127,9 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.reaction,
-	icon: 'fas fa-laugh',
+	icon: 'ti ti-mood-happy',
 	action: {
-		icon: 'fas fa-eye',
+		icon: 'ti ti-eye',
 		handler: preview,
 	},
 });
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index d109a4ba7c..b6fdd2356f 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -17,8 +17,8 @@
 				<div>
 					<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
 						<header>
-							<i v-if="item.success" class="fas fa-check icon succ"></i>
-							<i v-else class="fas fa-times-circle icon fail"></i>
+							<i v-if="item.success" class="ti ti-check icon succ"></i>
+							<i v-else class="ti ti-circle-x icon fail"></i>
 							<code class="ip _monospace">{{ item.ip }}</code>
 							<MkTime :time="item.createdAt" class="time"/>
 						</header>
@@ -103,7 +103,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.security,
-	icon: 'fas fa-lock',
+	icon: 'ti ti-lock',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue
index 579b5fe829..1106f0c6bb 100644
--- a/packages/client/src/pages/settings/sounds.vue
+++ b/packages/client/src/pages/settings/sounds.vue
@@ -9,7 +9,7 @@
 		<FormLink v-for="type in Object.keys(sounds)" :key="type" style="margin-bottom: 8px;" @click="edit(type)">
 			{{ $t('_sfx.' + type) }}
 			<template #suffix>{{ sounds[type].type || i18n.ts.none }}</template>
-			<template #suffixIcon><i class="fas fa-chevron-down"></i></template>
+			<template #suffixIcon><i class="ti ti-chevron-down"></i></template>
 		</FormLink>
 	</FormSection>
 
@@ -135,6 +135,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.sounds,
-	icon: 'fas fa-music',
+	icon: 'ti ti-music',
 });
 </script>
diff --git a/packages/client/src/pages/settings/statusbar.vue b/packages/client/src/pages/settings/statusbar.vue
index 9dbf182142..86c69fa2c3 100644
--- a/packages/client/src/pages/settings/statusbar.vue
+++ b/packages/client/src/pages/settings/statusbar.vue
@@ -48,7 +48,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.statusbar,
-	icon: 'fas fa-list-ul',
+	icon: 'ti ti-list',
 	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 34f8384d87..52a436e18d 100644
--- a/packages/client/src/pages/settings/theme.install.vue
+++ b/packages/client/src/pages/settings/theme.install.vue
@@ -5,8 +5,8 @@
 	</FormTextarea>
 
 	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="fas fa-eye"></i> {{ i18n.ts.preview }}</FormButton>
-		<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="fas fa-check"></i> {{ i18n.ts.install }}</FormButton>
+		<FormButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</FormButton>
+		<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="ti ti-check"></i> {{ i18n.ts.install }}</FormButton>
 	</div>
 </div>
 </template>
@@ -75,6 +75,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._theme.install,
-	icon: 'fas fa-download',
+	icon: 'ti ti-download',
 });
 </script>
diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue
index 25f92e6ed1..5b33b50319 100644
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ b/packages/client/src/pages/settings/theme.manage.vue
@@ -20,7 +20,7 @@
 			<template #label>{{ i18n.ts._theme.code }}</template>
 			<template #caption><button class="_textButton" @click="copyThemeCode()">{{ i18n.ts.copy }}</button></template>
 		</FormTextarea>
-		<FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" class="_formBlock" danger @click="uninstall()"><i class="fas fa-trash-alt"></i> {{ i18n.ts.uninstall }}</FormButton>
+		<FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" class="_formBlock" danger @click="uninstall()"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</FormButton>
 	</template>
 </div>
 </template>
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 42a91bcb59..f37c213b06 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -29,7 +29,7 @@
 	<div class="selects _formBlock">
 		<FormSelect v-model="lightThemeId" large class="select">
 			<template #label>{{ i18n.ts.themeForLightMode }}</template>
-			<template #prefix><i class="fas fa-sun"></i></template>
+			<template #prefix><i class="ti ti-sun"></i></template>
 			<option v-if="instanceLightTheme" :key="'instance:' + instanceLightTheme.id" :value="instanceLightTheme.id">{{ instanceLightTheme.name }}</option>
 			<optgroup v-if="installedLightThemes.length > 0" :label="i18n.ts._theme.installedThemes">
 				<option v-for="x in installedLightThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
@@ -40,7 +40,7 @@
 		</FormSelect>
 		<FormSelect v-model="darkThemeId" large class="select">
 			<template #label>{{ i18n.ts.themeForDarkMode }}</template>
-			<template #prefix><i class="fas fa-moon"></i></template>
+			<template #prefix><i class="ti ti-moon"></i></template>
 			<option v-if="instanceDarkTheme" :key="'instance:' + instanceDarkTheme.id" :value="instanceDarkTheme.id">{{ instanceDarkTheme.name }}</option>
 			<optgroup v-if="installedDarkThemes.length > 0" :label="i18n.ts._theme.installedThemes">
 				<option v-for="x in installedDarkThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
@@ -53,10 +53,10 @@
 
 	<FormSection>
 		<div class="_formLinksGrid">
-			<FormLink to="/settings/theme/manage"><template #icon><i class="fas fa-folder-open"></i></template>{{ i18n.ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink>
-			<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="fas fa-globe"></i></template>{{ i18n.ts._theme.explore }}</FormLink>
-			<FormLink to="/settings/theme/install"><template #icon><i class="fas fa-download"></i></template>{{ i18n.ts._theme.install }}</FormLink>
-			<FormLink to="/theme-editor"><template #icon><i class="fas fa-paint-roller"></i></template>{{ i18n.ts._theme.make }}</FormLink>
+			<FormLink to="/settings/theme/manage"><template #icon><i class="ti ti-tool"></i></template>{{ i18n.ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink>
+			<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="ti ti-world"></i></template>{{ i18n.ts._theme.explore }}</FormLink>
+			<FormLink to="/settings/theme/install"><template #icon><i class="ti ti-download"></i></template>{{ i18n.ts._theme.install }}</FormLink>
+			<FormLink to="/theme-editor"><template #icon><i class="ti ti-paint"></i></template>{{ i18n.ts._theme.make }}</FormLink>
 		</div>
 	</FormSection>
 
@@ -160,7 +160,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.theme,
-	icon: 'fas fa-palette',
+	icon: 'ti ti-palette',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/webhook.edit.vue b/packages/client/src/pages/settings/webhook.edit.vue
index 5d41f3d087..c8ec1ea586 100644
--- a/packages/client/src/pages/settings/webhook.edit.vue
+++ b/packages/client/src/pages/settings/webhook.edit.vue
@@ -9,7 +9,7 @@
 	</FormInput>
 
 	<FormInput v-model="secret" class="_formBlock">
-		<template #prefix><i class="fas fa-lock"></i></template>
+		<template #prefix><i class="ti ti-lock"></i></template>
 		<template #label>Secret</template>
 	</FormInput>
 
@@ -28,7 +28,7 @@
 	<FormSwitch v-model="active" class="_formBlock">Active</FormSwitch>
 
 	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton primary inline @click="save"><i class="fas fa-check"></i> {{ i18n.ts.save }}</FormButton>
+		<FormButton primary inline @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</FormButton>
 	</div>
 </div>
 </template>
@@ -90,6 +90,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: 'Edit webhook',
-	icon: 'fas fa-bolt',
+	icon: 'ti ti-webhook',
 });
 </script>
diff --git a/packages/client/src/pages/settings/webhook.new.vue b/packages/client/src/pages/settings/webhook.new.vue
index fcf1329ff6..00a547da69 100644
--- a/packages/client/src/pages/settings/webhook.new.vue
+++ b/packages/client/src/pages/settings/webhook.new.vue
@@ -9,7 +9,7 @@
 	</FormInput>
 
 	<FormInput v-model="secret" class="_formBlock">
-		<template #prefix><i class="fas fa-lock"></i></template>
+		<template #prefix><i class="ti ti-lock"></i></template>
 		<template #label>Secret</template>
 	</FormInput>
 
@@ -26,7 +26,7 @@
 	</FormSection>
 
 	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton primary inline @click="create"><i class="fas fa-check"></i> {{ i18n.ts.create }}</FormButton>
+		<FormButton primary inline @click="create"><i class="ti ti-check"></i> {{ i18n.ts.create }}</FormButton>
 	</div>
 </div>
 </template>
@@ -77,6 +77,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: 'Create new webhook',
-	icon: 'fas fa-bolt',
+	icon: 'ti ti-webhook',
 });
 </script>
diff --git a/packages/client/src/pages/settings/webhook.vue b/packages/client/src/pages/settings/webhook.vue
index 1a7e73940c..0e35be0f58 100644
--- a/packages/client/src/pages/settings/webhook.vue
+++ b/packages/client/src/pages/settings/webhook.vue
@@ -11,10 +11,10 @@
 			<template #default="{items}">
 				<FormLink v-for="webhook in items" :key="webhook.id" :to="`/settings/webhook/edit/${webhook.id}`" class="_formBlock">
 					<template #icon>
-						<i v-if="webhook.active === false" class="fas fa-circle-pause"></i>
+						<i v-if="webhook.active === false" class="ti ti-player-pause"></i>
 						<i v-else-if="webhook.latestStatus === null" class="far fa-circle"></i>
-						<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="fas fa-check" :style="{ color: 'var(--success)' }"></i>
-						<i v-else class="fas fa-triangle-exclamation" :style="{ color: 'var(--error)' }"></i>
+						<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="ti ti-check" :style="{ color: 'var(--success)' }"></i>
+						<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--error)' }"></i>
 					</template>
 					{{ webhook.name || webhook.url }}
 					<template #suffix>
@@ -48,6 +48,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: 'Webhook',
-	icon: 'fas fa-bolt',
+	icon: 'ti ti-webhook',
 });
 </script>
diff --git a/packages/client/src/pages/settings/word-mute.vue b/packages/client/src/pages/settings/word-mute.vue
index e297379568..6961d8151d 100644
--- a/packages/client/src/pages/settings/word-mute.vue
+++ b/packages/client/src/pages/settings/word-mute.vue
@@ -24,7 +24,7 @@
 			</MkKeyValue>
 		</div>
 	</div>
-	<MkButton primary inline :disabled="!changed" @click="save()"><i class="fas fa-save"></i> {{ i18n.ts.save }}</MkButton>
+	<MkButton primary inline :disabled="!changed" @click="save()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 </div>
 </template>
 
@@ -123,6 +123,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.wordMute,
-	icon: 'fas fa-comment-slash',
+	icon: 'ti ti-message-off',
 });
 </script>
diff --git a/packages/client/src/pages/share.vue b/packages/client/src/pages/share.vue
index 69d22ed632..a7e797eeab 100644
--- a/packages/client/src/pages/share.vue
+++ b/packages/client/src/pages/share.vue
@@ -158,7 +158,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.share,
-	icon: 'fas fa-share-alt',
+	icon: 'ti ti-share',
 });
 </script>
 
diff --git a/packages/client/src/pages/signup-complete.vue b/packages/client/src/pages/signup-complete.vue
index a97990c129..5459532310 100644
--- a/packages/client/src/pages/signup-complete.vue
+++ b/packages/client/src/pages/signup-complete.vue
@@ -32,7 +32,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.signup,
-	icon: 'fas fa-user',
+	icon: 'ti ti-user',
 });
 </script>
 
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index 5498c2999d..72775ed5c9 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -30,6 +30,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
 	title: props.tag,
-	icon: 'fas fa-hashtag',
+	icon: 'ti ti-hash',
 })));
 </script>
diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index 7dfeee16ed..d8ff170ca2 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -42,7 +42,7 @@
 			</FormFolder>
 
 			<FormFolder :default-open="false" class="_formBlock">
-				<template #icon><i class="fas fa-code"></i></template>
+				<template #icon><i class="ti ti-code"></i></template>
 				<template #label>{{ i18n.ts.editCode }}</template>
 
 				<div class="_formRoot">
@@ -210,12 +210,12 @@ watch($$(theme), apply, { deep: true });
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'fas fa-eye',
+	icon: 'ti ti-eye',
 	text: i18n.ts.preview,
 	handler: showPreview,
 }, {
 	asFullButton: true,
-	icon: 'fas fa-check',
+	icon: 'ti ti-check',
 	text: i18n.ts.saveAs,
 	handler: saveAs,
 }]);
@@ -224,7 +224,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.themeEditor,
-	icon: 'fas fa-palette',
+	icon: 'ti ti-palette',
 });
 </script>
 
diff --git a/packages/client/src/pages/timeline.tutorial.vue b/packages/client/src/pages/timeline.tutorial.vue
index 9683cc22a5..ae7b098b90 100644
--- a/packages/client/src/pages/timeline.tutorial.vue
+++ b/packages/client/src/pages/timeline.tutorial.vue
@@ -1,14 +1,14 @@
 <template>
 <div class="_card">
 	<div :class="$style.title" class="_title">
-		<div :class="$style.titleText"><i class="fas fa-info-circle"></i> {{ i18n.ts._tutorial.title }}</div>
+		<div :class="$style.titleText"><i class="ti ti-info-circle"></i> {{ i18n.ts._tutorial.title }}</div>
 		<div :class="$style.step">
 			<button class="_button" :class="$style.stepArrow" :disabled="tutorial === 0" @click="tutorial--">
-				<i class="fas fa-chevron-left"></i>
+				<i class="ti ti-chevron-left"></i>
 			</button>
 			<span :class="$style.stepNumber">{{ tutorial + 1 }} / {{ tutorialsNumber }}</span>
 			<button class="_button" :class="$style.stepArrow" :disabled="tutorial === tutorialsNumber - 1" @click="tutorial++">
-				<i class="fas fa-chevron-right"></i>
+				<i class="ti ti-chevron-right"></i>
 			</button>
 		</div>
 	</div>
@@ -71,7 +71,7 @@
 			<MkButton :class="$style.footerItem" :primary="false" @click="tutorial = -1">{{ i18n.ts.noThankYou }}</MkButton>
 		</template>
 		<template v-else>
-			<MkButton :class="$style.footerItem" primary @click="tutorial++"><i class="fas fa-check"></i> {{ i18n.ts.next }}</MkButton>
+			<MkButton :class="$style.footerItem" primary @click="tutorial++"><i class="ti ti-check"></i> {{ i18n.ts.next }}</MkButton>
 		</template>
 	</div>
 </div>
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 9d42997025..1c9e389367 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -114,35 +114,35 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => [{
 	key: 'home',
 	title: i18n.ts._timelines.home,
-	icon: 'fas fa-home',
+	icon: 'ti ti-home',
 	iconOnly: true,
 }, ...(isLocalTimelineAvailable ? [{
 	key: 'local',
 	title: i18n.ts._timelines.local,
-	icon: 'fas fa-comments',
+	icon: 'ti ti-messages',
 	iconOnly: true,
 }, {
 	key: 'social',
 	title: i18n.ts._timelines.social,
-	icon: 'fas fa-share-alt',
+	icon: 'ti ti-share',
 	iconOnly: true,
 }] : []), ...(isGlobalTimelineAvailable ? [{
 	key: 'global',
 	title: i18n.ts._timelines.global,
-	icon: 'fas fa-globe',
+	icon: 'ti ti-world',
 	iconOnly: true,
 }] : []), {
-	icon: 'fas fa-list-ul',
+	icon: 'ti ti-list',
 	title: i18n.ts.lists,
 	iconOnly: true,
 	onClick: chooseList,
 }, {
-	icon: 'fas fa-satellite',
+	icon: 'ti ti-antenna',
 	title: i18n.ts.antennas,
 	iconOnly: true,
 	onClick: chooseAntenna,
 }, {
-	icon: 'fas fa-satellite-dish',
+	icon: 'ti ti-device-tv',
 	title: i18n.ts.channel,
 	iconOnly: true,
 	onClick: chooseChannel,
@@ -150,7 +150,7 @@ const headerTabs = $computed(() => [{
 
 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',
+	icon: src === 'local' ? 'ti ti-messages' : src === 'social' ? 'ti ti-share' : src === 'global' ? 'ti ti-world' : 'ti ti-home',
 })));
 </script>
 
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index d376f11c58..adb8350516 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -58,7 +58,7 @@
 					<div class="_formBlock">
 						<MkKeyValue v-if="user.host" oneline style="margin: 1em 0;">
 							<template #key>{{ i18n.ts.instanceInfo }}</template>
-							<template #value><MkA :to="`/instance-info/${user.host}`" class="_link">{{ user.host }} <i class="fas fa-angle-right"></i></MkA></template>
+							<template #value><MkA :to="`/instance-info/${user.host}`" class="_link">{{ user.host }} <i class="ti ti-chevron-right"></i></MkA></template>
 						</MkKeyValue>
 						<MkKeyValue v-else oneline style="margin: 1em 0;">
 							<template #key>{{ i18n.ts.instanceInfo }}</template>
@@ -74,7 +74,7 @@
 						</MkKeyValue>
 					</div>
 
-					<FormButton v-if="user.host != null" class="_formBlock" @click="updateRemoteUser"><i class="fas fa-sync"></i> {{ i18n.ts.updateRemoteUser }}</FormButton>
+					<FormButton v-if="user.host != null" class="_formBlock" @click="updateRemoteUser"><i class="ti ti-refresh"></i> {{ i18n.ts.updateRemoteUser }}</FormButton>
 
 					<FormFolder class="_formBlock">
 						<template #label>Raw</template>
@@ -90,7 +90,7 @@
 				<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ i18n.ts.suspend }}</FormSwitch>
 				{{ i18n.ts.reflectMayTakeTime }}
 				<div class="_formBlock">
-					<FormButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="fas fa-key"></i> {{ i18n.ts.resetPassword }}</FormButton>
+					<FormButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</FormButton>
 					<FormButton v-if="$i.isAdmin" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</FormButton>
 				</div>
 				<FormTextarea v-model="moderationNote" manual-save class="_formBlock">
@@ -364,24 +364,24 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => [{
 	key: 'overview',
 	title: i18n.ts.overview,
-	icon: 'fas fa-info-circle',
+	icon: 'ti ti-info-circle',
 }, iAmModerator ? {
 	key: 'moderation',
 	title: i18n.ts.moderation,
-	icon: 'fas fa-shield-halved',
+	icon: 'ti ti-user-exclamation',
 } : null, {
 	key: 'chart',
 	title: i18n.ts.charts,
-	icon: 'fas fa-chart-simple',
+	icon: 'ti ti-chart-line',
 }, {
 	key: 'raw',
 	title: 'Raw',
-	icon: 'fas fa-code',
+	icon: 'ti ti-code',
 }].filter(x => x != null));
 
 definePageMetadata(computed(() => ({
 	title: user ? acct(user) : i18n.ts.userInfo,
-	icon: 'fas fa-info-circle',
+	icon: 'ti ti-info-circle',
 })));
 </script>
 
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index 4a534e47ba..aa5c078ab4 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -69,7 +69,7 @@ const headerActions = $computed(() => list ? [{
 	text: i18n.ts.jumpToSpecifiedDate,
 	handler: timetravel,
 }, {
-	icon: 'fas fa-cog',
+	icon: 'ti ti-settings',
 	text: i18n.ts.settings,
 	handler: settings,
 }] : []);
@@ -78,7 +78,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => list ? {
 	title: list.name,
-	icon: 'fas fa-list-ul',
+	icon: 'ti ti-list',
 } : null));
 </script>
 
diff --git a/packages/client/src/pages/user/followers.vue b/packages/client/src/pages/user/followers.vue
index b61b48329a..17c2843381 100644
--- a/packages/client/src/pages/user/followers.vue
+++ b/packages/client/src/pages/user/followers.vue
@@ -49,7 +49,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => user ? {
-	icon: 'fas fa-user',
+	icon: 'ti ti-user',
 	title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
 	subtitle: i18n.ts.followers,
 	userName: user,
diff --git a/packages/client/src/pages/user/following.vue b/packages/client/src/pages/user/following.vue
index a23977b425..03892ec03d 100644
--- a/packages/client/src/pages/user/following.vue
+++ b/packages/client/src/pages/user/following.vue
@@ -49,7 +49,7 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => user ? {
-	icon: 'fas fa-user',
+	icon: 'ti ti-user',
 	title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
 	subtitle: i18n.ts.following,
 	userName: user,
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index 352db4616e..d3859a2612 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -3,8 +3,8 @@
 	<div ref="rootEl" v-size="{ max: [500] }" class="ftskorzw" :class="{ wide: !narrow }">
 		<div class="main">
 			<!-- TODO -->
-			<!-- <div class="punished" v-if="user.isSuspended"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> -->
-			<!-- <div class="punished" v-if="user.isSilenced"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
+			<!-- <div class="punished" v-if="user.isSuspended"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> -->
+			<!-- <div class="punished" v-if="user.isSilenced"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
 
 			<div class="profile">
 				<MkRemoteCaution v-if="user.host != null" :href="user.url" class="warn"/>
@@ -19,13 +19,13 @@
 								<span class="username"><MkAcct :user="user" :detail="true"/></span>
 								<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
 								<span v-if="!user.isAdmin && user.isModerator" :title="i18n.ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
-								<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="fas fa-lock"></i></span>
+								<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
 								<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="fas fa-robot"></i></span>
 							</div>
 						</div>
 						<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
 						<div v-if="$i" class="actions">
-							<button class="menu _button" @click="menu"><i class="fas fa-ellipsis-h"></i></button>
+							<button class="menu _button" @click="menu"><i class="ti ti-dots"></i></button>
 							<MkFollowButton v-if="$i.id != user.id" :user="user" :inline="true" :transparent="false" :full="true" class="koudoku"/>
 						</div>
 					</div>
@@ -36,7 +36,7 @@
 							<span class="username"><MkAcct :user="user" :detail="true"/></span>
 							<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
 							<span v-if="!user.isAdmin && user.isModerator" :title="i18n.ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
-							<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="fas fa-lock"></i></span>
+							<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
 							<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="fas fa-robot"></i></span>
 						</div>
 					</div>
@@ -46,15 +46,15 @@
 					</div>
 					<div class="fields system">
 						<dl v-if="user.location" class="field">
-							<dt class="name"><i class="fas fa-map-marker fa-fw"></i> {{ i18n.ts.location }}</dt>
+							<dt class="name"><i class="fas fa-map-marker ti-fw"></i> {{ i18n.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> {{ i18n.ts.birthday }}</dt>
+							<dt class="name"><i class="fas fa-birthday-cake ti-fw"></i> {{ i18n.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> {{ i18n.ts.registeredDate }}</dt>
+							<dt class="name"><i class="fas fa-calendar-alt ti-fw"></i> {{ i18n.ts.registeredDate }}</dt>
 							<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
 						</dl>
 					</div>
diff --git a/packages/client/src/pages/user/index.activity.vue b/packages/client/src/pages/user/index.activity.vue
index 630a2cea7d..523072d2e6 100644
--- a/packages/client/src/pages/user/index.activity.vue
+++ b/packages/client/src/pages/user/index.activity.vue
@@ -1,9 +1,9 @@
 <template>
 <MkContainer>
-	<template #header><i class="fas fa-chart-simple" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
+	<template #header><i class="ti ti-chart-line" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
 	<template #func>
 		<button class="_button" @click="showMenu">
-			<i class="fas fa-ellipsis-h"></i>
+			<i class="ti ti-dots"></i>
 		</button>
 	</template>
 
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 7e635f8b2e..48f2955283 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -69,15 +69,15 @@ const headerActions = $computed(() => []);
 const headerTabs = $computed(() => user ? [{
 	key: 'home',
 	title: i18n.ts.overview,
-	icon: 'fas fa-home',
+	icon: 'ti ti-home',
 }, ...($i && ($i.id === user.id)) || user.publicReactions ? [{
 	key: 'reactions',
 	title: i18n.ts.reaction,
-	icon: 'fas fa-laugh',
+	icon: 'ti ti-mood-happy',
 }] : [], {
 	key: 'clips',
 	title: i18n.ts.clips,
-	icon: 'fas fa-paperclip',
+	icon: 'ti ti-paperclip',
 }, {
 	key: 'pages',
 	title: i18n.ts.pages,
@@ -85,11 +85,11 @@ const headerTabs = $computed(() => user ? [{
 }, {
 	key: 'gallery',
 	title: i18n.ts.gallery,
-	icon: 'fas fa-icons',
+	icon: 'ti ti-icons',
 }] : null);
 
 definePageMetadata(computed(() => user ? {
-	icon: 'fas fa-user',
+	icon: 'ti ti-user',
 	title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
 	subtitle: `@${getAcct(user)}`,
 	userName: user,
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index 827162a0c0..bfa54d39f2 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -15,7 +15,7 @@
 		</div>
 		<div class="main">
 			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
-			<button class="_button _acrylic menu" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
+			<button class="_button _acrylic menu" @click="showMenu"><i class="ti ti-dots"></i></button>
 			<div class="fg">
 				<h1>
 					<!-- 背景色によってはロゴが見えなくなるのでとりあえず無効に -->
@@ -107,19 +107,19 @@ function signup() {
 function showMenu(ev) {
 	os.popupMenu([{
 		text: i18n.ts.instanceInfo,
-		icon: 'fas fa-info-circle',
+		icon: 'ti ti-info-circle',
 		action: () => {
 			os.pageWindow('/about');
 		},
 	}, {
 		text: i18n.ts.aboutMisskey,
-		icon: 'fas fa-info-circle',
+		icon: 'ti ti-info-circle',
 		action: () => {
 			os.pageWindow('/about-misskey');
 		},
 	}, null, {
 		text: i18n.ts.help,
-		icon: 'fas fa-question-circle',
+		icon: 'ti ti-question-circle',
 		action: () => {
 			window.open('https://misskey-hub.net/help.md', '_blank');
 		},
diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue
index 4bf117590a..53a6dd3469 100644
--- a/packages/client/src/pages/welcome.entrance.b.vue
+++ b/packages/client/src/pages/welcome.entrance.b.vue
@@ -104,19 +104,19 @@ export default defineComponent({
 		showMenu(ev) {
 			os.popupMenu([{
 				text: this.$t('aboutX', { x: instanceName }),
-				icon: 'fas fa-info-circle',
+				icon: 'ti ti-info-circle',
 				action: () => {
 					os.pageWindow('/about');
 				}
 			}, {
 				text: this.$ts.aboutMisskey,
-				icon: 'fas fa-info-circle',
+				icon: 'ti ti-info-circle',
 				action: () => {
 					os.pageWindow('/about-misskey');
 				}
 			}, null, {
 				text: this.$ts.help,
-				icon: 'fas fa-question-circle',
+				icon: 'ti ti-question-circle',
 				action: () => {
 					window.open(`https://misskey-hub.net/help.md`, '_blank');
 				}
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index a590834a4c..bae3f2ed9d 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -41,7 +41,7 @@
 							<template #n><b>{{ onlineUsersCount }}</b></template>
 						</I18n>
 					</div>
-					<button class="_button _acrylic menu" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
+					<button class="_button _acrylic menu" @click="showMenu"><i class="ti ti-dots"></i></button>
 				</div>
 			</div>
 			<nav class="nav">
@@ -124,19 +124,19 @@ export default defineComponent({
 		showMenu(ev) {
 			os.popupMenu([{
 				text: this.$t('aboutX', { x: instanceName }),
-				icon: 'fas fa-info-circle',
+				icon: 'ti ti-info-circle',
 				action: () => {
 					os.pageWindow('/about');
 				}
 			}, {
 				text: this.$ts.aboutMisskey,
-				icon: 'fas fa-info-circle',
+				icon: 'ti ti-info-circle',
 				action: () => {
 					os.pageWindow('/about-misskey');
 				}
 			}, null, {
 				text: this.$ts.help,
-				icon: 'fas fa-question-circle',
+				icon: 'ti ti-question-circle',
 				action: () => {
 					window.open(`https://misskey-hub.net/help.md`, '_blank');
 				}
diff --git a/packages/client/src/pages/welcome.setup.vue b/packages/client/src/pages/welcome.setup.vue
index d25651e2a3..2729d30d4b 100644
--- a/packages/client/src/pages/welcome.setup.vue
+++ b/packages/client/src/pages/welcome.setup.vue
@@ -10,7 +10,7 @@
 		</MkInput>
 		<MkInput v-model="password" type="password" data-cy-admin-password class="_formBlock">
 			<template #label>{{ $ts.password }}</template>
-			<template #prefix><i class="fas fa-lock"></i></template>
+			<template #prefix><i class="ti ti-lock"></i></template>
 		</MkInput>
 		<div class="bottom _formBlock">
 			<MkButton gradate type="submit" :disabled="submitting" data-cy-admin-ok>
diff --git a/packages/client/src/pages/welcome.timeline.vue b/packages/client/src/pages/welcome.timeline.vue
index e19ebac3ed..f45a15448d 100644
--- a/packages/client/src/pages/welcome.timeline.vue
+++ b/packages/client/src/pages/welcome.timeline.vue
@@ -4,7 +4,7 @@
 		<div v-for="note in notes" class="note">
 			<div class="content _panel">
 				<div class="body">
-					<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="fas fa-reply"></i></MkA>
+					<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
 					<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 					<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
 				</div>
diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
index 4826cd70fd..c9663d32e5 100644
--- a/packages/client/src/scripts/get-note-menu.ts
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -93,7 +93,7 @@ export function getNoteMenu(props: {
 	async function clip(): Promise<void> {
 		const clips = await os.api('clips/list');
 		os.popupMenu([{
-			icon: 'fas fa-plus',
+			icon: 'ti ti-plus',
 			text: i18n.ts.createNew,
 			action: async () => {
 				const { canceled, result } = await os.form(i18n.ts.createNewClip, {
@@ -196,70 +196,70 @@ export function getNoteMenu(props: {
 		menu = [
 			...(
 				props.currentClipPage?.value.userId === $i.id ? [{
-					icon: 'fas fa-circle-minus',
+					icon: 'ti ti-backspace',
 					text: i18n.ts.unclip,
 					danger: true,
 					action: unclip,
 				}, null] : []
 			), {
-				icon: 'fas fa-external-link-alt',
+				icon: 'ti ti-external-link',
 				text: i18n.ts.details,
 				action: notedetails,
 			}, {
-				icon: 'fas fa-copy',
+				icon: 'ti ti-copy',
 				text: i18n.ts.copyContent,
 				action: copyContent,
 			}, {
-				icon: 'fas fa-link',
+				icon: 'ti ti-link',
 				text: i18n.ts.copyLink,
 				action: copyLink,
 			}, (appearNote.url || appearNote.uri) ? {
-				icon: 'fas fa-external-link-square-alt',
+				icon: 'ti ti-external-link',
 				text: i18n.ts.showOnRemote,
 				action: () => {
 					window.open(appearNote.url || appearNote.uri, '_blank');
 				},
 			} : undefined,
 			{
-				icon: 'fas fa-share-alt',
+				icon: 'ti ti-share',
 				text: i18n.ts.share,
 				action: share,
 			},
 			instance.translatorAvailable ? {
-				icon: 'fas fa-language',
+				icon: 'ti ti-language-hiragana',
 				text: i18n.ts.translate,
 				action: translate,
 			} : undefined,
 			null,
 			statePromise.then(state => state.isFavorited ? {
-				icon: 'fas fa-star',
+				icon: 'ti ti-star',
 				text: i18n.ts.unfavorite,
 				action: () => toggleFavorite(false),
 			} : {
-				icon: 'fas fa-star',
+				icon: 'ti ti-star',
 				text: i18n.ts.favorite,
 				action: () => toggleFavorite(true),
 			}),
 			{
-				icon: 'fas fa-paperclip',
+				icon: 'ti ti-paperclip',
 				text: i18n.ts.clip,
 				action: () => clip(),
 			},
 			statePromise.then(state => state.isMutedThread ? {
-				icon: 'fas fa-comment-slash',
+				icon: 'ti ti-message-off',
 				text: i18n.ts.unmuteThread,
 				action: () => toggleThreadMute(false),
 			} : {
-				icon: 'fas fa-comment-slash',
+				icon: 'ti ti-message-off',
 				text: i18n.ts.muteThread,
 				action: () => toggleThreadMute(true),
 			}),
 			appearNote.userId === $i.id ? ($i.pinnedNoteIds || []).includes(appearNote.id) ? {
-				icon: 'fas fa-thumbtack',
+				icon: 'ti ti-pin',
 				text: i18n.ts.unpin,
 				action: () => togglePin(false),
 			} : {
-				icon: 'fas fa-thumbtack',
+				icon: 'ti ti-pin',
 				text: i18n.ts.pin,
 				action: () => togglePin(true),
 			} : undefined,
@@ -276,7 +276,7 @@ export function getNoteMenu(props: {
 			...(appearNote.userId !== $i.id ? [
 				null,
 				{
-					icon: 'fas fa-exclamation-circle',
+					icon: 'ti ti-exclamation-circle',
 					text: i18n.ts.reportAbuse,
 					action: () => {
 						const u = appearNote.url || appearNote.uri || `${url}/notes/${appearNote.id}`;
@@ -291,12 +291,12 @@ export function getNoteMenu(props: {
 			...(appearNote.userId === $i.id || $i.isModerator || $i.isAdmin ? [
 				null,
 				appearNote.userId === $i.id ? {
-					icon: 'fas fa-edit',
+					icon: 'ti ti-edit',
 					text: i18n.ts.deleteAndEdit,
 					action: delEdit,
 				} : undefined,
 				{
-					icon: 'fas fa-trash-alt',
+					icon: 'ti ti-trash',
 					text: i18n.ts.delete,
 					danger: true,
 					action: del,
@@ -306,19 +306,19 @@ export function getNoteMenu(props: {
 			.filter(x => x !== undefined);
 	} else {
 		menu = [{
-			icon: 'fas fa-external-link-alt',
+			icon: 'ti ti-external-link',
 			text: i18n.ts.detailed,
 			action: openDetail,
 		}, {
-			icon: 'fas fa-copy',
+			icon: 'ti ti-copy',
 			text: i18n.ts.copyContent,
 			action: copyContent,
 		}, {
-			icon: 'fas fa-link',
+			icon: 'ti ti-link',
 			text: i18n.ts.copyLink,
 			action: copyLink,
 		}, (appearNote.url || appearNote.uri) ? {
-			icon: 'fas fa-external-link-square-alt',
+			icon: 'ti ti-external-link',
 			text: i18n.ts.showOnRemote,
 			action: () => {
 				window.open(appearNote.url || appearNote.uri, '_blank');
@@ -329,7 +329,7 @@ export function getNoteMenu(props: {
 
 	if (noteActions.length > 0) {
 		menu = menu.concat([null, ...noteActions.map(action => ({
-			icon: 'fas fa-plug',
+			icon: 'ti ti-plug',
 			text: action.title,
 			action: () => {
 				action.handler(appearNote);
diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts
index 4a5a2d42f0..23f0e11f5b 100644
--- a/packages/client/src/scripts/get-user-menu.ts
+++ b/packages/client/src/scripts/get-user-menu.ts
@@ -153,70 +153,70 @@ export function getUserMenu(user, router: Router = mainRouter) {
 	}
 
 	let menu = [{
-		icon: 'fas fa-at',
+		icon: 'ti ti-at',
 		text: i18n.ts.copyUsername,
 		action: () => {
 			copyToClipboard(`@${user.username}@${user.host || host}`);
 		},
 	}, {
-		icon: 'fas fa-info-circle',
+		icon: 'ti ti-info-circle',
 		text: i18n.ts.info,
 		action: () => {
 			router.push(`/user-info/${user.id}`);
 		},
 	}, {
-		icon: 'fas fa-envelope',
+		icon: 'ti ti-mail',
 		text: i18n.ts.sendMessage,
 		action: () => {
 			os.post({ specified: user });
 		},
 	}, meId !== user.id ? {
 		type: 'link',
-		icon: 'fas fa-comments',
+		icon: 'ti ti-messages',
 		text: i18n.ts.startMessaging,
 		to: '/my/messaging/' + Acct.toString(user),
 	} : undefined, null, {
-		icon: 'fas fa-list-ul',
+		icon: 'ti ti-list',
 		text: i18n.ts.addToList,
 		action: pushList,
 	}, meId !== user.id ? {
-		icon: 'fas fa-users',
+		icon: 'ti ti-users',
 		text: i18n.ts.inviteToGroup,
 		action: inviteGroup,
 	} : undefined] as any;
 
 	if ($i && meId !== user.id) {
 		menu = menu.concat([null, {
-			icon: user.isMuted ? 'fas fa-eye' : 'fas fa-eye-slash',
+			icon: user.isMuted ? 'ti ti-eye' : 'ti ti-eye-off',
 			text: user.isMuted ? i18n.ts.unmute : i18n.ts.mute,
 			action: toggleMute,
 		}, {
-			icon: 'fas fa-ban',
+			icon: 'ti ti-ban',
 			text: user.isBlocking ? i18n.ts.unblock : i18n.ts.block,
 			action: toggleBlock,
 		}]);
 
 		if (user.isFollowed) {
 			menu = menu.concat([{
-				icon: 'fas fa-unlink',
+				icon: 'ti ti-link-off',
 				text: i18n.ts.breakFollow,
 				action: invalidateFollow,
 			}]);
 		}
 
 		menu = menu.concat([null, {
-			icon: 'fas fa-exclamation-circle',
+			icon: 'ti ti-exclamation-circle',
 			text: i18n.ts.reportAbuse,
 			action: reportAbuse,
 		}]);
 
 		if (iAmModerator) {
 			menu = menu.concat([null, {
-				icon: 'fas fa-microphone-slash',
+				icon: 'ti ti-microphone-2-off',
 				text: user.isSilenced ? i18n.ts.unsilence : i18n.ts.silence,
 				action: toggleSilence,
 			}, {
-				icon: 'fas fa-snowflake',
+				icon: 'ti ti-snowflake',
 				text: user.isSuspended ? i18n.ts.unsuspend : i18n.ts.suspend,
 				action: toggleSuspend,
 			}]);
@@ -225,7 +225,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 
 	if ($i && meId === user.id) {
 		menu = menu.concat([null, {
-			icon: 'fas fa-pencil-alt',
+			icon: 'ti ti-pencil',
 			text: i18n.ts.editProfile,
 			action: () => {
 				router.push('/settings/profile');
@@ -235,7 +235,7 @@ export function getUserMenu(user, router: Router = mainRouter) {
 
 	if (userActions.length > 0) {
 		menu = menu.concat([null, ...userActions.map(action => ({
-			icon: 'fas fa-plug',
+			icon: 'ti ti-plug',
 			text: action.title,
 			action: () => {
 				action.handler(user);
diff --git a/packages/client/src/scripts/hpml/index.ts b/packages/client/src/scripts/hpml/index.ts
index 7cf88d5961..4e5aadfbd3 100644
--- a/packages/client/src/scripts/hpml/index.ts
+++ b/packages/client/src/scripts/hpml/index.ts
@@ -14,7 +14,7 @@ export type Fn = {
 export type Type = 'string' | 'number' | 'boolean' | 'stringArray' | null;
 
 export const literalDefs: Record<string, { out: any; category: string; icon: any; }> = {
-	text: { out: 'string', category: 'value', icon: 'fas fa-quote-right', },
+	text: { out: 'string', category: 'value', icon: 'ti ti-quote', },
 	multiLineText: { out: 'string', category: 'value', icon: 'fas fa-align-left', },
 	textList: { out: 'stringArray', category: 'value', icon: 'fas fa-list', },
 	number: { out: 'number', category: 'value', icon: 'fas fa-sort-numeric-up', },
diff --git a/packages/client/src/scripts/hpml/lib.ts b/packages/client/src/scripts/hpml/lib.ts
index cab467a920..b684876a7f 100644
--- a/packages/client/src/scripts/hpml/lib.ts
+++ b/packages/client/src/scripts/hpml/lib.ts
@@ -130,14 +130,14 @@ export function initAiLib(hpml: Hpml) {
 }
 
 export const funcDefs: Record<string, { in: any[]; out: any; category: string; icon: any; }> = {
-	if: { in: ['boolean', 0, 0], out: 0, category: 'flow', icon: 'fas fa-share-alt' },
+	if: { in: ['boolean', 0, 0], out: 0, category: 'flow', icon: 'ti ti-share' },
 	for: { in: ['number', 'function'], out: null, category: 'flow', icon: 'fas fa-recycle' },
 	not: { in: ['boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
 	or: { in: ['boolean', 'boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
 	and: { in: ['boolean', 'boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
-	add: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-plus' },
-	subtract: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-minus' },
-	multiply: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-times' },
+	add: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'ti ti-plus' },
+	subtract: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'ti ti-minus' },
+	multiply: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'ti ti-x' },
 	divide: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-divide' },
 	mod: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-divide' },
 	round: { in: ['number'], out: 'number', category: 'operation', icon: 'fas fa-calculator' },
@@ -147,11 +147,11 @@ export const funcDefs: Record<string, { in: any[]; out: any; category: string; i
 	lt: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-less-than' },
 	gtEq: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-greater-than-equal' },
 	ltEq: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-less-than-equal' },
-	strLen: { in: ['string'], out: 'number', category: 'text', icon: 'fas fa-quote-right' },
-	strPick: { in: ['string', 'number'], out: 'string', category: 'text', icon: 'fas fa-quote-right' },
-	strReplace: { in: ['string', 'string', 'string'], out: 'string', category: 'text', icon: 'fas fa-quote-right' },
-	strReverse: { in: ['string'], out: 'string', category: 'text', icon: 'fas fa-quote-right' },
-	join: { in: ['stringArray', 'string'], out: 'string', category: 'text', icon: 'fas fa-quote-right' },
+	strLen: { in: ['string'], out: 'number', category: 'text', icon: 'ti ti-quote' },
+	strPick: { in: ['string', 'number'], out: 'string', category: 'text', icon: 'ti ti-quote' },
+	strReplace: { in: ['string', 'string', 'string'], out: 'string', category: 'text', icon: 'ti ti-quote' },
+	strReverse: { in: ['string'], out: 'string', category: 'text', icon: 'ti ti-quote' },
+	join: { in: ['stringArray', 'string'], out: 'string', category: 'text', icon: 'ti ti-quote' },
 	stringToNumber: { in: ['string'], out: 'number', category: 'convert', icon: 'fas fa-exchange-alt' },
 	numberToString: { in: ['number'], out: 'string', category: 'convert', icon: 'fas fa-exchange-alt' },
 	splitStrByLine: { in: ['string'], out: 'stringArray', category: 'convert', icon: 'fas fa-exchange-alt' },
diff --git a/packages/client/src/scripts/select-file.ts b/packages/client/src/scripts/select-file.ts
index 17e31d96f1..ec5f8f65e9 100644
--- a/packages/client/src/scripts/select-file.ts
+++ b/packages/client/src/scripts/select-file.ts
@@ -80,15 +80,15 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv
 			ref: keepOriginal,
 		}, {
 			text: i18n.ts.upload,
-			icon: 'fas fa-upload',
+			icon: 'ti ti-upload',
 			action: chooseFileFromPc,
 		}, {
 			text: i18n.ts.fromDrive,
-			icon: 'fas fa-cloud',
+			icon: 'ti ti-cloud',
 			action: chooseFileFromDrive,
 		}, {
 			text: i18n.ts.fromUrl,
-			icon: 'fas fa-link',
+			icon: 'ti ti-link',
 			action: chooseFileFromUrl,
 		}], src);
 	});
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 0b61d46f10..50b7e5c3e5 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -119,6 +119,25 @@ hr {
 	background: var(--divider);
 }
 
+.ti {
+	font-size: 130%;
+	vertical-align: text-bottom;
+}
+
+.ti-fw {
+	display: inline-block;
+	width: 1em;
+	text-align: center;
+}
+
+._indicatorCircle {
+	display: inline-block;
+	width: 1em;
+	height: 1em;
+	border-radius: 100%;
+	background: currentColor;
+}
+
 ._noSelect {
 	user-select: none;
 	-webkit-user-select: none;
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
index de000447ad..50b28de063 100644
--- a/packages/client/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/client/src/ui/_common_/navbar-for-mobile.vue
@@ -9,30 +9,30 @@
 		</div>
 		<div class="middle">
 			<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-				<i class="icon fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
+				<i class="icon ti ti-home ti-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
 			</MkA>
 			<template v-for="item in menu">
 				<div v-if="item === '-'" class="divider"></div>
 				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-					<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
-					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
+					<i class="icon ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
+					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
 				</component>
 			</template>
 			<div class="divider"></div>
 			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
-				<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
+				<i class="icon ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
 			</MkA>
 			<button v-click-anime class="item _button" @click="more">
-				<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
-				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
+				<i class="icon ti ti-grid-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
+				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
 			</button>
 			<MkA v-click-anime class="item" active-class="active" to="/settings">
-				<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
+				<i class="icon ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 			</MkA>
 		</div>
 		<div class="bottom">
 			<button class="item _button post" data-cy-open-post-form @click="os.post">
-				<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span>
+				<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span>
 			</button>
 			<button v-click-anime class="item _button account" @click="openAccountMenu">
 				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
@@ -75,40 +75,40 @@ function openInstanceMenu(ev: MouseEvent) {
 	}, {
 		type: 'link',
 		text: i18n.ts.instanceInfo,
-		icon: 'fas fa-info-circle',
+		icon: 'ti ti-info-circle',
 		to: '/about',
 	}, {
 		type: 'link',
 		text: i18n.ts.customEmojis,
-		icon: 'fas fa-laugh',
+		icon: 'ti ti-mood-happy',
 		to: '/about#emojis',
 	}, {
 		type: 'link',
 		text: i18n.ts.federation,
-		icon: 'fas fa-globe',
+		icon: 'ti ti-whirl',
 		to: '/about#federation',
 	}, null, {
 		type: 'parent',
 		text: i18n.ts.help,
-		icon: 'fas fa-question-circle',
+		icon: 'ti ti-question-circle',
 		children: [{
 			type: 'link',
 			to: '/mfm-cheat-sheet',
 			text: i18n.ts._mfm.cheatSheet,
-			icon: 'fas fa-code',
+			icon: 'ti ti-code',
 		}, {
 			type: 'link',
 			to: '/scratchpad',
 			text: i18n.ts.scratchpad,
-			icon: 'fas fa-terminal',
+			icon: 'ti ti-terminal-2',
 		}, {
 			type: 'link',
 			to: '/api-console',
 			text: 'API Console',
-			icon: 'fas fa-terminal',
+			icon: 'ti ti-terminal-2',
 		}, null, {
 			text: i18n.ts.document,
-			icon: 'fas fa-question-circle',
+			icon: 'ti ti-question-circle',
 			action: () => {
 				window.open('https://misskey-hub.net/help.html', '_blank');
 			},
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 20622b083a..b82da15f13 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -9,7 +9,7 @@
 		</div>
 		<div class="middle">
 			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
-				<i class="icon fas fa-home fa-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
+				<i class="icon ti ti-home ti-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
 			</MkA>
 			<template v-for="item in menu">
 				<div v-if="item === '-'" class="divider"></div>
@@ -24,25 +24,25 @@
 					:to="navbarItemDef[item].to"
 					v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
 				>
-					<i class="icon fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
-					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
+					<i class="icon ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
+					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
 				</component>
 			</template>
 			<div class="divider"></div>
 			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip.noDelay.right="i18n.ts.controlPanel" class="item" active-class="active" to="/admin">
-				<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
+				<i class="icon ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
 			</MkA>
 			<button v-click-anime class="item _button" @click="more">
-				<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ i18n.ts.more }}</span>
-				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
+				<i class="icon ti ti-grid-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
+				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
 			</button>
 			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item" active-class="active" to="/settings">
-				<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
+				<i class="icon ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
 			</MkA>
 		</div>
 		<div class="bottom">
 			<button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post">
-				<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span>
+				<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span>
 			</button>
 			<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
 				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
@@ -98,40 +98,40 @@ function openInstanceMenu(ev: MouseEvent) {
 	}, {
 		type: 'link',
 		text: i18n.ts.instanceInfo,
-		icon: 'fas fa-info-circle',
+		icon: 'ti ti-info-circle',
 		to: '/about',
 	}, {
 		type: 'link',
 		text: i18n.ts.customEmojis,
-		icon: 'fas fa-laugh',
+		icon: 'ti ti-mood-happy',
 		to: '/about#emojis',
 	}, {
 		type: 'link',
 		text: i18n.ts.federation,
-		icon: 'fas fa-globe',
+		icon: 'ti ti-whirl',
 		to: '/about#federation',
 	}, null, {
 		type: 'parent',
 		text: i18n.ts.help,
-		icon: 'fas fa-question-circle',
+		icon: 'ti ti-question-circle',
 		children: [{
 			type: 'link',
 			to: '/mfm-cheat-sheet',
 			text: i18n.ts._mfm.cheatSheet,
-			icon: 'fas fa-code',
+			icon: 'ti ti-code',
 		}, {
 			type: 'link',
 			to: '/scratchpad',
 			text: i18n.ts.scratchpad,
-			icon: 'fas fa-terminal',
+			icon: 'ti ti-terminal-2',
 		}, {
 			type: 'link',
 			to: '/api-console',
 			text: 'API Console',
-			icon: 'fas fa-terminal',
+			icon: 'ti ti-terminal-2',
 		}, null, {
 			text: i18n.ts.document,
-			icon: 'fas fa-question-circle',
+			icon: 'ti ti-question-circle',
 			action: () => {
 				window.open('https://misskey-hub.net/help.html', '_blank');
 			},
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
index 306d32c597..46d79e6355 100644
--- a/packages/client/src/ui/classic.header.vue
+++ b/packages/client/src/ui/classic.header.vue
@@ -3,34 +3,34 @@
 	<div class="body">
 		<div class="left">
 			<MkA v-click-anime v-tooltip="$ts.timeline" class="item index" active-class="active" to="/" exact>
-				<i class="fas fa-home fa-fw"></i>
+				<i class="ti ti-home ti-fw"></i>
 			</MkA>
 			<template v-for="item in menu">
 				<div v-if="item === '-'" class="divider"></div>
 				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime v-tooltip="$ts[navbarItemDef[item].title]" class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-					<i class="fa-fw" :class="navbarItemDef[item].icon"></i>
-					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+					<i class="ti-fw" :class="navbarItemDef[item].icon"></i>
+					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="_indicatorCircle"></i></span>
 				</component>
 			</template>
 			<div class="divider"></div>
 			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip="$ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
-				<i class="fas fa-door-open fa-fw"></i>
+				<i class="ti ti-dashboard ti-fw"></i>
 			</MkA>
 			<button v-click-anime class="item _button" @click="more">
-				<i class="fas fa-ellipsis-h fa-fw"></i>
-				<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+				<i class="ti ti-dots ti-fw"></i>
+				<span v-if="otherNavItemIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
 			</button>
 		</div>
 		<div class="right">
 			<MkA v-click-anime v-tooltip="$ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
-				<i class="fas fa-cog fa-fw"></i>
+				<i class="ti ti-settings ti-fw"></i>
 			</MkA>
 			<button v-click-anime class="item _button account" @click="openAccountMenu">
 				<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
 			</button>
 			<div class="post" @click="post">
 				<MkButton class="button" gradate full rounded>
-					<i class="fas fa-pencil-alt fa-fw"></i>
+					<i class="ti ti-pencil ti-fw"></i>
 				</MkButton>
 			</div>
 		</div>
diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
index 7479c1c9c6..dac09ea703 100644
--- a/packages/client/src/ui/classic.sidebar.vue
+++ b/packages/client/src/ui/classic.sidebar.vue
@@ -5,30 +5,30 @@
 	</button>
 	<div class="post" data-cy-open-post-form @click="post">
 		<MkButton class="button" gradate full rounded>
-			<i class="fas fa-pencil-alt fa-fw"></i><span v-if="!iconOnly" class="text">{{ $ts.note }}</span>
+			<i class="ti ti-pencil ti-fw"></i><span v-if="!iconOnly" class="text">{{ $ts.note }}</span>
 		</MkButton>
 	</div>
 	<div class="divider"></div>
 	<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-		<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
+		<i class="ti ti-home ti-fw"></i><span class="text">{{ $ts.timeline }}</span>
 	</MkA>
 	<template v-for="item in menu">
 		<div v-if="item === '-'" class="divider"></div>
 		<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-			<i class="fa-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
-			<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
+			<i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
+			<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="_indicatorCircle"></i></span>
 		</component>
 	</template>
 	<div class="divider"></div>
 	<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
+		<i class="ti ti-dashboard ti-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
 	</MkA>
 	<button v-click-anime class="item _button" @click="more">
-		<i class="fas fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
-		<span v-if="otherNavItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
+		<i class="ti ti-dots ti-fw"></i><span class="text">{{ $ts.more }}</span>
+		<span v-if="otherNavItemIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
 	</button>
 	<MkA v-click-anime class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
+		<i class="ti ti-settings ti-fw"></i><span class="text">{{ $ts.settings }}</span>
 	</MkA>
 	<div class="divider"></div>
 	<div class="about">
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
index cf82142fe0..0e726c11ed 100644
--- a/packages/client/src/ui/classic.vue
+++ b/packages/client/src/ui/classic.vue
@@ -110,7 +110,7 @@ function onContextmenu(ev: MouseEvent) {
 			fullView = !fullView;
 		},
 	}, {
-		icon: 'fas fa-window-maximize',
+		icon: 'ti ti-window-maximize',
 		text: i18n.ts.openInWindow,
 		action: () => {
 			os.pageWindow(path);
diff --git a/packages/client/src/ui/classic.widgets.vue b/packages/client/src/ui/classic.widgets.vue
index ca8e3f4dbc..ca919b168a 100644
--- a/packages/client/src/ui/classic.widgets.vue
+++ b/packages/client/src/ui/classic.widgets.vue
@@ -3,8 +3,8 @@
 	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
 	<MkAd class="a" :prefer="['square']"/>
 
-	<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
-	<button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
+	<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ $ts.editWidgetsExit }}</button>
+	<button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ $ts.editWidgets }}</button>
 </div>
 </template>
 
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 224ad7ee1a..f3415cfd09 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -34,24 +34,24 @@
 			</div>
 			<div class="sideMenu">
 				<div class="top">
-					<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${deckStore.state.profile}`" class="_button button" @click="changeProfile"><i class="fas fa-caret-down"></i></button>
-					<button v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" class="_button button" @click="deleteProfile"><i class="fas fa-trash-can"></i></button>
+					<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${deckStore.state.profile}`" class="_button button" @click="changeProfile"><i class="ti ti-caret-down"></i></button>
+					<button v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" class="_button button" @click="deleteProfile"><i class="ti ti-trash"></i></button>
 				</div>
 				<div class="middle">
-					<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" class="_button button" @click="addColumn"><i class="fas fa-plus"></i></button>
+					<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" class="_button button" @click="addColumn"><i class="ti ti-plus"></i></button>
 				</div>
 				<div class="bottom">
-					<button v-tooltip.noDelay.left="i18n.ts.settings" class="_button button settings" @click="showSettings"><i class="fas fa-cog"></i></button>
+					<button v-tooltip.noDelay.left="i18n.ts.settings" class="_button button settings" @click="showSettings"><i class="ti ti-settings"></i></button>
 				</div>
 			</div>
 		</div>
 	</div>
 
 	<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="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>
+		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="ti ti-menu-2"></i><span v-if="menuIndicated" class="indicator"><i class="_indicatorCircle"></i></span></button>
+		<button class="button home _button" @click="mainRouter.push('/')"><i class="ti ti-home"></i></button>
+		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="_indicatorCircle"></i></span></button>
+		<button class="button post _button" @click="os.post()"><i class="ti ti-pencil"></i></button>
 	</div>
 
 	<transition :name="$store.state.animation ? 'menu-back' : ''">
@@ -194,7 +194,7 @@ function changeProfile(ev: MouseEvent) {
 			},
 		}))), null, {
 			text: i18n.ts._deck.newProfile,
-			icon: 'fas fa-plus',
+			icon: 'ti ti-plus',
 			action: async () => {
 				const { canceled, result: name } = await os.inputText({
 					title: i18n.ts._deck.profile,
diff --git a/packages/client/src/ui/deck/antenna-column.vue b/packages/client/src/ui/deck/antenna-column.vue
index df9539617c..ba14530662 100644
--- a/packages/client/src/ui/deck/antenna-column.vue
+++ b/packages/client/src/ui/deck/antenna-column.vue
@@ -1,7 +1,7 @@
 <template>
 <XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header>
-		<i class="fas fa-satellite"></i><span style="margin-left: 8px;">{{ column.name }}</span>
+		<i class="ti ti-antenna"></i><span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
 	<XTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => emit('loaded')"/>
@@ -50,7 +50,7 @@ async function setAntenna() {
 }
 
 const menu = [{
-	icon: 'fas fa-pencil-alt',
+	icon: 'ti ti-pencil',
 	text: i18n.ts.selectAntenna,
 	action: setAntenna,
 }];
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index d16c23d100..b50879dbc8 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -16,14 +16,14 @@
 		@contextmenu.prevent.stop="onContextmenu"
 	>
 		<button v-if="isStacked && !isMainColumn" class="toggleActive _button" @click="toggleActive">
-			<template v-if="active"><i class="fas fa-angle-up"></i></template>
-			<template v-else><i class="fas fa-angle-down"></i></template>
+			<template v-if="active"><i class="ti ti-chevron-up"></i></template>
+			<template v-else><i class="ti ti-chevron-down"></i></template>
 		</button>
 		<div class="action">
 			<slot name="action"></slot>
 		</div>
 		<span class="header"><slot name="header"></slot></span>
-		<button v-tooltip="i18n.ts.settings" class="menu _button" @click.stop="showSettingsMenu"><i class="fas fa-ellipsis"></i></button>
+		<button v-tooltip="i18n.ts.settings" class="menu _button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
 	</header>
 	<div v-show="active" ref="body">
 		<slot></slot>
@@ -105,7 +105,7 @@ function toggleActive() {
 
 function getMenu() {
 	let items = [{
-		icon: 'fas fa-cog',
+		icon: 'ti ti-settings',
 		text: i18n.ts._deck.configureColumn,
 		action: async () => {
 			const { canceled, result } = await os.form(props.column.name, {
@@ -131,46 +131,46 @@ function getMenu() {
 	}, {
 		type: 'parent',
 		text: i18n.ts.move + '...',
-		icon: 'fas fa-arrows-up-down-left-right',
+		icon: 'ti ti-arrows-move',
 		children: [{
-			icon: 'fas fa-arrow-left',
+			icon: 'ti ti-arrow-left',
 			text: i18n.ts._deck.swapLeft,
 			action: () => {
 				swapLeftColumn(props.column.id);
 			},
 		}, {
-			icon: 'fas fa-arrow-right',
+			icon: 'ti ti-arrow-right',
 			text: i18n.ts._deck.swapRight,
 			action: () => {
 				swapRightColumn(props.column.id);
 			},
 		}, props.isStacked ? {
-			icon: 'fas fa-arrow-up',
+			icon: 'ti ti-arrow-up',
 			text: i18n.ts._deck.swapUp,
 			action: () => {
 				swapUpColumn(props.column.id);
 			},
 		} : undefined, props.isStacked ? {
-			icon: 'fas fa-arrow-down',
+			icon: 'ti ti-arrow-down',
 			text: i18n.ts._deck.swapDown,
 			action: () => {
 				swapDownColumn(props.column.id);
 			},
 		} : undefined],
 	}, {
-		icon: 'fas fa-window-restore',
+		icon: 'ti ti-stack-2',
 		text: i18n.ts._deck.stackLeft,
 		action: () => {
 			stackLeftColumn(props.column.id);
 		},
 	}, props.isStacked ? {
-		icon: 'fas fa-window-maximize',
+		icon: 'ti ti-window-maximize',
 		text: i18n.ts._deck.popRight,
 		action: () => {
 			popRightColumn(props.column.id);
 		},
 	} : undefined, null, {
-		icon: 'fas fa-trash-alt',
+		icon: 'ti ti-trash',
 		text: i18n.ts.remove,
 		danger: true,
 		action: () => {
diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue
index 104f781b35..c60c5707f1 100644
--- a/packages/client/src/ui/deck/direct-column.vue
+++ b/packages/client/src/ui/deck/direct-column.vue
@@ -1,6 +1,6 @@
 <template>
 <XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="fas fa-envelope" style="margin-right: 8px;"></i>{{ column.name }}</template>
+	<template #header><i class="ti ti-mail" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
 	<XNotes :pagination="pagination"/>
 </XColumn>
diff --git a/packages/client/src/ui/deck/list-column.vue b/packages/client/src/ui/deck/list-column.vue
index 8fdf19cabb..d9f3f7b4e7 100644
--- a/packages/client/src/ui/deck/list-column.vue
+++ b/packages/client/src/ui/deck/list-column.vue
@@ -1,7 +1,7 @@
 <template>
 <XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header>
-		<i class="fas fa-list-ul"></i><span style="margin-left: 8px;">{{ column.name }}</span>
+		<i class="ti ti-list"></i><span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
 	<XTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => emit('loaded')"/>
@@ -48,7 +48,7 @@ async function setList() {
 }
 
 const menu = [{
-	icon: 'fas fa-pencil-alt',
+	icon: 'ti ti-pencil',
 	text: i18n.ts.selectList,
 	action: setList,
 }];
diff --git a/packages/client/src/ui/deck/main-column.vue b/packages/client/src/ui/deck/main-column.vue
index 9a5fd43af7..0c66172397 100644
--- a/packages/client/src/ui/deck/main-column.vue
+++ b/packages/client/src/ui/deck/main-column.vue
@@ -58,7 +58,7 @@ function onContextmenu(ev: MouseEvent) {
 		type: 'label',
 		text: path,
 	}, {
-		icon: 'fas fa-window-maximize',
+		icon: 'ti ti-window-maximize',
 		text: i18n.ts.openInWindow,
 		action: () => {
 			os.pageWindow(path);
diff --git a/packages/client/src/ui/deck/mentions-column.vue b/packages/client/src/ui/deck/mentions-column.vue
index 18055215d2..16962956a0 100644
--- a/packages/client/src/ui/deck/mentions-column.vue
+++ b/packages/client/src/ui/deck/mentions-column.vue
@@ -1,6 +1,6 @@
 <template>
 <XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="fas fa-at" style="margin-right: 8px;"></i>{{ column.name }}</template>
+	<template #header><i class="ti ti-at" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
 	<XNotes :pagination="pagination"/>
 </XColumn>
diff --git a/packages/client/src/ui/deck/notifications-column.vue b/packages/client/src/ui/deck/notifications-column.vue
index e77b849ef4..9d133035fe 100644
--- a/packages/client/src/ui/deck/notifications-column.vue
+++ b/packages/client/src/ui/deck/notifications-column.vue
@@ -1,6 +1,6 @@
 <template>
 <XColumn :column="column" :is-stacked="isStacked" :menu="menu" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="fas fa-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
+	<template #header><i class="ti ti-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
 	<XNotifications :include-types="column.includingTypes"/>
 </XColumn>
@@ -37,7 +37,7 @@ function func() {
 }
 
 const menu = [{
-	icon: 'fas fa-pencil-alt',
+	icon: 'ti ti-pencil',
 	text: i18n.ts.notificationSetting,
 	action: func,
 }];
diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/tl-column.vue
index e64ed852b2..49b29145ff 100644
--- a/packages/client/src/ui/deck/tl-column.vue
+++ b/packages/client/src/ui/deck/tl-column.vue
@@ -1,16 +1,16 @@
 <template>
 <XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header>
-		<i v-if="column.tl === 'home'" class="fas fa-home"></i>
-		<i v-else-if="column.tl === 'local'" class="fas fa-comments"></i>
-		<i v-else-if="column.tl === 'social'" class="fas fa-share-alt"></i>
-		<i v-else-if="column.tl === 'global'" class="fas fa-globe"></i>
+		<i v-if="column.tl === 'home'" class="ti ti-home"></i>
+		<i v-else-if="column.tl === 'local'" class="ti ti-messages"></i>
+		<i v-else-if="column.tl === 'social'" class="ti ti-share"></i>
+		<i v-else-if="column.tl === 'global'" class="ti ti-world"></i>
 		<span style="margin-left: 8px;">{{ column.name }}</span>
 	</template>
 
 	<div v-if="disabled" class="iwaalbte">
 		<p>
-			<i class="fas fa-minus-circle"></i>
+			<i class="ti ti-minus-circle"></i>
 			{{ $t('disabled-timeline.title') }}
 		</p>
 		<p class="desc">{{ $t('disabled-timeline.description') }}</p>
@@ -98,7 +98,7 @@ function onChangeActiveState(state) {
 }
 
 const menu = [{
-	icon: 'fas fa-pencil-alt',
+	icon: 'ti ti-pencil',
 	text: i18n.ts.timeline,
 	action: setType,
 }];
diff --git a/packages/client/src/ui/deck/widgets-column.vue b/packages/client/src/ui/deck/widgets-column.vue
index 2c97009b3b..b5f49761fd 100644
--- a/packages/client/src/ui/deck/widgets-column.vue
+++ b/packages/client/src/ui/deck/widgets-column.vue
@@ -48,7 +48,7 @@ function func() {
 }
 
 const menu = [{
-	icon: 'fas fa-pencil-alt',
+	icon: 'ti ti-pencil',
 	text: i18n.ts.editWidgets,
 	action: func,
 }];
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 7029f798f1..778ad53568 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -16,14 +16,14 @@
 		<XWidgets @mounted="attachSticky"/>
 	</div>
 
-	<button v-if="!isDesktop && !isMobile" class="widgetButton _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
+	<button v-if="!isDesktop && !isMobile" class="widgetButton _button" @click="widgetsShowing = true"><i class="ti ti-layout-list"></i></button>
 
 	<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="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>
+		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="ti ti-menu-2"></i><span v-if="menuIndicated" class="indicator"><i class="_indicatorCircle"></i></span></button>
+		<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i class="ti ti-home"></i></button>
+		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="_indicatorCircle"></i></span></button>
+		<button class="button widget _button" @click="widgetsShowing = true"><i class="ti ti-layout-list"></i></button>
+		<button class="button post _button" @click="os.post()"><i class="ti ti-pencil"></i></button>
 	</div>
 
 	<transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
@@ -149,7 +149,7 @@ const onContextmenu = (ev) => {
 		type: 'label',
 		text: path,
 	}, {
-		icon: 'fas fa-window-maximize',
+		icon: 'ti ti-window-maximize',
 		text: i18n.ts.openInWindow,
 		action: () => {
 			os.pageWindow(path);
diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/universal.widgets.vue
index 179f8a6baa..33fb492836 100644
--- a/packages/client/src/ui/universal.widgets.vue
+++ b/packages/client/src/ui/universal.widgets.vue
@@ -2,8 +2,8 @@
 <div class="efzpzdvf">
 	<XWidgets :edit="editMode" :widgets="defaultStore.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
 
-	<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="fas fa-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
-	<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="fas fa-pencil-alt"></i> {{ i18n.ts.editWidgets }}</button>
+	<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
+	<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ i18n.ts.editWidgets }}</button>
 </div>
 </template>
 
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index 3c308cfe5b..275008a8f8 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -32,10 +32,10 @@
 
 	<transition :name="$store.state.animation ? 'tray' : ''">
 		<div v-if="showMenu" class="menu">
-			<MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ $ts.home }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="fas fa-hashtag icon"></i>{{ $ts.explore }}</MkA>
+			<MkA to="/" class="link" active-class="active"><i class="ti ti-home icon"></i>{{ $ts.home }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ $ts.explore }}</MkA>
 			<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ $ts.featured }}</MkA>
-			<MkA to="/channels" class="link" active-class="active"><i class="fas fa-satellite-dish icon"></i>{{ $ts.channel }}</MkA>
+			<MkA to="/channels" class="link" active-class="active"><i class="ti ti-device-tv icon"></i>{{ $ts.channel }}</MkA>
 			<div class="action">
 				<button class="_buttonPrimary" @click="signup()">{{ $ts.signup }}</button>
 				<button class="_button" @click="signin()">{{ $ts.login }}</button>
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
index e2b9034851..7300b12a75 100644
--- a/packages/client/src/ui/visitor/header.vue
+++ b/packages/client/src/ui/visitor/header.vue
@@ -2,10 +2,10 @@
 <div class="sqxihjet">
 	<div v-if="narrow === false" class="wide">
 		<div class="content">
-			<MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ $ts.home }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="fas fa-hashtag icon"></i>{{ $ts.explore }}</MkA>
+			<MkA to="/" class="link" active-class="active"><i class="ti ti-home icon"></i>{{ $ts.home }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ $ts.explore }}</MkA>
 			<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ $ts.featured }}</MkA>
-			<MkA to="/channels" class="link" active-class="active"><i class="fas fa-satellite-dish icon"></i>{{ $ts.channel }}</MkA>
+			<MkA to="/channels" class="link" active-class="active"><i class="ti ti-device-tv icon"></i>{{ $ts.channel }}</MkA>
 			<div v-if="info" class="page active link">
 				<div class="title">
 					<i v-if="info.icon" class="icon" :class="info.icon"></i>
@@ -16,7 +16,7 @@
 				<button v-if="info.action" class="_button action" @click.stop="info.action.handler"><!-- TODO --></button>
 			</div>
 			<div class="right">
-				<button class="_button search" @click="search()"><i class="fas fa-search icon"></i><span>{{ $ts.search }}</span></button>
+				<button class="_button search" @click="search()"><i class="ti ti-search icon"></i><span>{{ $ts.search }}</span></button>
 				<button class="_buttonPrimary signup" @click="signup()">{{ $ts.signup }}</button>
 				<button class="_button login" @click="signin()">{{ $ts.login }}</button>
 			</div>
@@ -24,7 +24,7 @@
 	</div>
 	<div v-else-if="narrow === true" class="narrow">
 		<button class="menu _button" @click="$parent.showMenu = true">
-			<i class="fas fa-bars icon"></i>
+			<i class="ti ti-menu-2 icon"></i>
 		</button>
 		<div v-if="info" class="title">
 			<i v-if="info.icon" class="icon" :class="info.icon"></i>
@@ -49,7 +49,7 @@ import { search } from '@/scripts/search';
 export default defineComponent({
 	props: {
 		info: {
-			required: true
+			required: true,
 		},
 	},
 
@@ -67,18 +67,18 @@ export default defineComponent({
 	methods: {
 		signin() {
 			os.popup(XSigninDialog, {
-				autoSet: true
+				autoSet: true,
 			}, {}, 'closed');
 		},
 
 		signup() {
 			os.popup(XSignupDialog, {
-				autoSet: true
+				autoSet: true,
 			}, {}, 'closed');
 		},
 
-		search
-	}
+		search,
+	},
 });
 </script>
 
diff --git a/packages/client/src/widgets/activity.vue b/packages/client/src/widgets/activity.vue
index acca21bff6..238a05ca09 100644
--- a/packages/client/src/widgets/activity.vue
+++ b/packages/client/src/widgets/activity.vue
@@ -1,7 +1,7 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" class="mkw-activity">
-	<template #header><i class="fas fa-chart-simple"></i>{{ i18n.ts._widgets.activity }}</template>
-	<template #func><button class="_button" @click="toggleView()"><i class="fas fa-sort"></i></button></template>
+	<template #header><i class="ti ti-chart-line"></i>{{ i18n.ts._widgets.activity }}</template>
+	<template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
 
 	<div>
 		<MkLoading v-if="fetching"/>
diff --git a/packages/client/src/widgets/aiscript.vue b/packages/client/src/widgets/aiscript.vue
index cb6d29cd99..4009edb8b8 100644
--- a/packages/client/src/widgets/aiscript.vue
+++ b/packages/client/src/widgets/aiscript.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript">
-	<template #header><i class="fas fa-terminal"></i>{{ i18n.ts._widgets.aiscript }}</template>
+	<template #header><i class="ti ti-terminal-2"></i>{{ i18n.ts._widgets.aiscript }}</template>
 
 	<div class="uylguesu _monospace">
 		<textarea v-model="widgetProps.script" placeholder="(1 + 1)"></textarea>
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
index d0f81c1356..3374783b0c 100644
--- a/packages/client/src/widgets/federation.vue
+++ b/packages/client/src/widgets/federation.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" :foldable="foldable" :scrollable="scrollable" class="mkw-federation">
-	<template #header><i class="fas fa-globe"></i>{{ i18n.ts._widgets.federation }}</template>
+	<template #header><i class="ti ti-whirl"></i>{{ i18n.ts._widgets.federation }}</template>
 
 	<div class="wbrkwalb">
 		<MkLoading v-if="fetching"/>
diff --git a/packages/client/src/widgets/job-queue.vue b/packages/client/src/widgets/job-queue.vue
index 363d1b3ea0..9f19c51825 100644
--- a/packages/client/src/widgets/job-queue.vue
+++ b/packages/client/src/widgets/job-queue.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="mkw-jobQueue _monospace" :class="{ _panel: !widgetProps.transparent }">
 	<div class="inbox">
-		<div class="label">Inbox queue<i v-if="current.inbox.waiting > 0" class="fas fa-exclamation-triangle icon"></i></div>
+		<div class="label">Inbox queue<i v-if="current.inbox.waiting > 0" class="ti ti-alert-triangle icon"></i></div>
 		<div class="values">
 			<div>
 				<div>Process</div>
@@ -22,7 +22,7 @@
 		</div>
 	</div>
 	<div class="deliver">
-		<div class="label">Deliver queue<i v-if="current.deliver.waiting > 0" class="fas fa-exclamation-triangle icon"></i></div>
+		<div class="label">Deliver queue<i v-if="current.deliver.waiting > 0" class="ti ti-alert-triangle icon"></i></div>
 		<div class="values">
 			<div>
 				<div>Process</div>
diff --git a/packages/client/src/widgets/notifications.vue b/packages/client/src/widgets/notifications.vue
index 2729c310a0..e697209444 100644
--- a/packages/client/src/widgets/notifications.vue
+++ b/packages/client/src/widgets/notifications.vue
@@ -1,7 +1,7 @@
 <template>
 <MkContainer :style="`height: ${widgetProps.height}px;`" :show-header="widgetProps.showHeader" :scrollable="true" class="mkw-notifications">
-	<template #header><i class="fas fa-bell"></i>{{ i18n.ts.notifications }}</template>
-	<template #func><button class="_button" @click="configureNotification()"><i class="fas fa-cog"></i></button></template>
+	<template #header><i class="ti ti-bell"></i>{{ i18n.ts.notifications }}</template>
+	<template #func><button class="_button" @click="configureNotification()"><i class="ti ti-settings"></i></button></template>
 
 	<div>
 		<XNotifications :include-types="widgetProps.includingTypes"/>
diff --git a/packages/client/src/widgets/rss-ticker.vue b/packages/client/src/widgets/rss-ticker.vue
index 82a2f59ae9..44c21d1836 100644
--- a/packages/client/src/widgets/rss-ticker.vue
+++ b/packages/client/src/widgets/rss-ticker.vue
@@ -1,7 +1,7 @@
 <template>
 <MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-rss-ticker">
-	<template #header><i class="fas fa-rss-square"></i>RSS</template>
-	<template #func><button class="_button" @click="configure"><i class="fas fa-cog"></i></button></template>
+	<template #header><i class="ti ti-rss"></i>RSS</template>
+	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
 
 	<div class="ekmkgxbk">
 		<MkLoading v-if="fetching"/>
diff --git a/packages/client/src/widgets/rss.vue b/packages/client/src/widgets/rss.vue
index f392a8249a..c0338c8e47 100644
--- a/packages/client/src/widgets/rss.vue
+++ b/packages/client/src/widgets/rss.vue
@@ -1,7 +1,7 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-rss">
-	<template #header><i class="fas fa-rss-square"></i>RSS</template>
-	<template #func><button class="_button" @click="configure"><i class="fas fa-cog"></i></button></template>
+	<template #header><i class="ti ti-rss"></i>RSS</template>
+	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
 
 	<div class="ekmkgxbj">
 		<MkLoading v-if="fetching"/>
diff --git a/packages/client/src/widgets/server-metric/cpu.vue b/packages/client/src/widgets/server-metric/cpu.vue
index baf802cb8f..e7b2226d1f 100644
--- a/packages/client/src/widgets/server-metric/cpu.vue
+++ b/packages/client/src/widgets/server-metric/cpu.vue
@@ -2,7 +2,7 @@
 <div class="vrvdvrys">
 	<XPie class="pie" :value="usage"/>
 	<div>
-		<p><i class="fas fa-microchip"></i>CPU</p>
+		<p><i class="ti ti-cpu"></i>CPU</p>
 		<p>{{ meta.cpu.cores }} Logical cores</p>
 		<p>{{ meta.cpu.model }}</p>
 	</div>
diff --git a/packages/client/src/widgets/server-metric/disk.vue b/packages/client/src/widgets/server-metric/disk.vue
index 052991b554..3d22d05383 100644
--- a/packages/client/src/widgets/server-metric/disk.vue
+++ b/packages/client/src/widgets/server-metric/disk.vue
@@ -2,7 +2,7 @@
 <div class="zbwaqsat">
 	<XPie class="pie" :value="usage"/>
 	<div>
-		<p><i class="fas fa-hdd"></i>Disk</p>
+		<p><i class="ti ti-database"></i>Disk</p>
 		<p>Total: {{ bytes(total, 1) }}</p>
 		<p>Free: {{ bytes(available, 1) }}</p>
 		<p>Used: {{ bytes(used, 1) }}</p>
diff --git a/packages/client/src/widgets/server-metric/index.vue b/packages/client/src/widgets/server-metric/index.vue
index cf4accfa2c..bc3fca6fc1 100644
--- a/packages/client/src/widgets/server-metric/index.vue
+++ b/packages/client/src/widgets/server-metric/index.vue
@@ -1,7 +1,7 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent">
-	<template #header><i class="fas fa-server"></i>{{ i18n.ts._widgets.serverMetric }}</template>
-	<template #func><button class="_button" @click="toggleView()"><i class="fas fa-sort"></i></button></template>
+	<template #header><i class="ti ti-server"></i>{{ i18n.ts._widgets.serverMetric }}</template>
+	<template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
 
 	<div v-if="meta" class="mkw-serverMetric">
 		<XCpuMemory v-if="widgetProps.view === 0" :connection="connection" :meta="meta"/>
diff --git a/packages/client/src/widgets/timeline.vue b/packages/client/src/widgets/timeline.vue
index 718162667d..b22d3e445b 100644
--- a/packages/client/src/widgets/timeline.vue
+++ b/packages/client/src/widgets/timeline.vue
@@ -2,14 +2,14 @@
 <MkContainer :show-header="widgetProps.showHeader" :style="`height: ${widgetProps.height}px;`" :scrollable="true" class="mkw-timeline">
 	<template #header>
 		<button class="_button" @click="choose">
-			<i v-if="widgetProps.src === 'home'" class="fas fa-home"></i>
-			<i v-else-if="widgetProps.src === 'local'" class="fas fa-comments"></i>
-			<i v-else-if="widgetProps.src === 'social'" class="fas fa-share-alt"></i>
-			<i v-else-if="widgetProps.src === 'global'" class="fas fa-globe"></i>
-			<i v-else-if="widgetProps.src === 'list'" class="fas fa-list-ul"></i>
-			<i v-else-if="widgetProps.src === 'antenna'" class="fas fa-satellite"></i>
+			<i v-if="widgetProps.src === 'home'" class="ti ti-home"></i>
+			<i v-else-if="widgetProps.src === 'local'" class="ti ti-messages"></i>
+			<i v-else-if="widgetProps.src === 'social'" class="ti ti-share"></i>
+			<i v-else-if="widgetProps.src === 'global'" class="ti ti-world"></i>
+			<i v-else-if="widgetProps.src === 'list'" class="ti ti-list"></i>
+			<i v-else-if="widgetProps.src === 'antenna'" class="ti ti-antenna"></i>
 			<span style="margin-left: 8px;">{{ widgetProps.src === 'list' ? widgetProps.list.name : widgetProps.src === 'antenna' ? widgetProps.antenna.name : $t('_timelines.' + widgetProps.src) }}</span>
-			<i :class="menuOpened ? 'fas fa-angle-up' : 'fas fa-angle-down'" style="margin-left: 8px;"></i>
+			<i :class="menuOpened ? 'ti ti-chevron-up' : 'ti ti-chevron-down'" style="margin-left: 8px;"></i>
 		</button>
 	</template>
 
@@ -86,7 +86,7 @@ const choose = async (ev) => {
 	]);
 	const antennaItems = antennas.map(antenna => ({
 		text: antenna.name,
-		icon: 'fas fa-satellite',
+		icon: 'ti ti-antenna',
 		action: () => {
 			widgetProps.antenna = antenna;
 			setSrc('antenna');
@@ -94,7 +94,7 @@ const choose = async (ev) => {
 	}));
 	const listItems = lists.map(list => ({
 		text: list.name,
-		icon: 'fas fa-list-ul',
+		icon: 'ti ti-list',
 		action: () => {
 			widgetProps.list = list;
 			setSrc('list');
@@ -102,19 +102,19 @@ const choose = async (ev) => {
 	}));
 	os.popupMenu([{
 		text: i18n.ts._timelines.home,
-		icon: 'fas fa-home',
+		icon: 'ti ti-home',
 		action: () => { setSrc('home'); }
 	}, {
 		text: i18n.ts._timelines.local,
-		icon: 'fas fa-comments',
+		icon: 'ti ti-messages',
 		action: () => { setSrc('local'); }
 	}, {
 		text: i18n.ts._timelines.social,
-		icon: 'fas fa-share-alt',
+		icon: 'ti ti-share',
 		action: () => { setSrc('social'); }
 	}, {
 		text: i18n.ts._timelines.global,
-		icon: 'fas fa-globe',
+		icon: 'ti ti-world',
 		action: () => { setSrc('global'); }
 	}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], ev.currentTarget ?? ev.target).then(() => {
 		menuOpened.value = false;
diff --git a/packages/client/src/widgets/trends.vue b/packages/client/src/widgets/trends.vue
index a783c04215..02eec0431e 100644
--- a/packages/client/src/widgets/trends.vue
+++ b/packages/client/src/widgets/trends.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
-	<template #header><i class="fas fa-hashtag"></i>{{ i18n.ts._widgets.trends }}</template>
+	<template #header><i class="ti ti-hash"></i>{{ i18n.ts._widgets.trends }}</template>
 
 	<div class="wbrkwala">
 		<MkLoading v-if="fetching"/>
diff --git a/yarn.lock b/yarn.lock
index ac5b67c9f2..e2d2dea8f8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -973,13 +973,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@fortawesome/fontawesome-free@npm:6.1.2":
-  version: 6.1.2
-  resolution: "@fortawesome/fontawesome-free@npm:6.1.2"
-  checksum: 0d3c9d60ffbb9c1fa4041051eff6542adc1fc29653501399d0235c077a2195a35f286d979da42fe021f73649032f9eeae2c9a0511eaacda2896559155d40a0fc
-  languageName: node
-  linkType: hard
-
 "@gar/promisify@npm:^1.1.3":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -1986,6 +1979,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tabler/icons@npm:^1.117.0":
+  version: 1.117.0
+  resolution: "@tabler/icons@npm:1.117.0"
+  peerDependencies:
+    react: ^16.x || 17.x || 18.x
+    react-dom: ^16.x || 17.x || 18.x
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  checksum: bdb18d36bd554bef86b50d59bd659f951a7cd7bab7a7b8155d573d2a584e5fba04e44fa7e2e4c998a0869619de6fc0a922424d4486ddc9273bee3c8ae65ccf12
+  languageName: node
+  linkType: hard
+
 "@tensorflow/tfjs-backend-cpu@npm:4.1.0":
   version: 4.1.0
   resolution: "@tensorflow/tfjs-backend-cpu@npm:4.1.0"
@@ -5101,11 +5109,11 @@ __metadata:
   resolution: "client@workspace:packages/client"
   dependencies:
     "@discordapp/twemoji": 14.0.2
-    "@fortawesome/fontawesome-free": 6.1.2
     "@rollup/plugin-alias": 4.0.2
     "@rollup/plugin-json": 6.0.0
     "@rollup/pluginutils": 5.0.2
     "@syuilo/aiscript": 0.11.1
+    "@tabler/icons": ^1.117.0
     "@types/escape-regexp": 0.0.1
     "@types/glob": 8.0.0
     "@types/gulp": 4.0.10
-- 
cgit v1.2.3-freya


From dd93a07c0f89d6be1b297d23a3d22ac9c6588498 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 19 Dec 2022 16:31:21 +0000
Subject: fix(client): fix script id of Captcha

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkCaptcha.vue b/packages/client/src/components/MkCaptcha.vue
index b399bb8921..6d218389fc 100644
--- a/packages/client/src/components/MkCaptcha.vue
+++ b/packages/client/src/components/MkCaptcha.vue
@@ -62,14 +62,16 @@ const src = computed(() => {
 	}
 });
 
+const scriptId = computed(() => `script-${props.provider}`)
+
 const captcha = computed<Captcha>(() => window[variable.value] || {} as unknown as Captcha);
 
 if (loaded) {
 	available.value = true;
 } else {
-	(document.getElementById(props.provider) || document.head.appendChild(Object.assign(document.createElement('script'), {
+	(document.getElementById(scriptId.value) || document.head.appendChild(Object.assign(document.createElement('script'), {
 		async: true,
-		id: props.provider,
+		id: scriptId.value,
 		src: src.value,
 	})))
 		.addEventListener('load', () => available.value = true);
-- 
cgit v1.2.3-freya


From 7037f2d566bbeba883032cdb003275b1325f1dc2 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 08:35:49 +0900
Subject: tabler icons

---
 packages/client/src/components/MkEmojiPicker.vue     |  4 ++--
 packages/client/src/components/MkFileTypeIcon.vue    | 15 ---------------
 packages/client/src/components/MkNote.vue            |  3 +--
 packages/client/src/components/MkNoteDetailed.vue    |  3 +--
 packages/client/src/components/MkPostForm.vue        |  2 +-
 packages/client/src/components/MkUrlPreview.vue      |  2 +-
 packages/client/src/components/MkWindow.vue          |  4 ++--
 packages/client/src/components/form/suspense.vue     | 10 +++++-----
 packages/client/src/navbar.ts                        |  2 +-
 packages/client/src/pages/admin-file.vue             |  2 +-
 packages/client/src/pages/admin/index.vue            |  2 +-
 packages/client/src/pages/admin/proxy-account.vue    |  2 +-
 packages/client/src/pages/channels.vue               |  2 +-
 packages/client/src/pages/gallery/index.vue          |  2 +-
 packages/client/src/pages/settings/accounts.vue      |  2 +-
 packages/client/src/pages/settings/import-export.vue |  2 +-
 packages/client/src/pages/settings/reaction.vue      |  2 +-
 packages/client/src/pages/settings/security.vue      |  2 +-
 packages/client/src/pages/settings/sounds.vue        |  2 +-
 packages/client/src/pages/user/index.vue             |  2 +-
 packages/client/src/ui/deck/widgets-column.vue       |  2 +-
 packages/client/src/widgets/photos.vue               |  2 +-
 22 files changed, 27 insertions(+), 44 deletions(-)
 delete mode 100644 packages/client/src/components/MkFileTypeIcon.vue

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index a85ba2b9be..3c0e7da7c9 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -69,9 +69,9 @@
 		</div>
 	</div>
 	<div class="tabs">
-		<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="fas fa-asterisk ti-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="ti ti-asterisk ti-fw"></i></button>
 		<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="ti ti-mood-happy ti-fw"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="fas fa-leaf ti-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="ti ti-leaf ti-fw"></i></button>
 		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="ti ti-hash ti-fw"></i></button>
 	</div>
 </div>
diff --git a/packages/client/src/components/MkFileTypeIcon.vue b/packages/client/src/components/MkFileTypeIcon.vue
deleted file mode 100644
index 11d28188cc..0000000000
--- a/packages/client/src/components/MkFileTypeIcon.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-<span class="mk-file-type-icon">
-	<template v-if="kind == 'image'"><i class="fas fa-file-image"></i></template>
-</span>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-
-const props = defineProps<{
-	type: string;
-}>();
-
-const kind = computed(() => props.type.split('/')[0]);
-</script>
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index da51d14f03..1feb161ada 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -73,8 +73,7 @@
 			<footer class="footer">
 				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 				<button class="button _button" @click="reply()">
-					<template v-if="appearNote.reply"><i class="ti ti-arrow-back-up-all"></i></template>
-					<template v-else><i class="ti ti-arrow-back-up"></i></template>
+					<i class="ti ti-arrow-back-up"></i>
 					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
 				</button>
 				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 19e895e11d..8269906bb0 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -83,8 +83,7 @@
 				</div>
 				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
 				<button class="button _button" @click="reply()">
-					<template v-if="appearNote.reply"><i class="ti ti-arrow-back-up-all"></i></template>
-					<template v-else><i class="ti ti-arrow-back-up"></i></template>
+					<i class="ti ti-arrow-back-up"></i>
 					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
 				</button>
 				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 26ce4464bc..a6215038f7 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -21,7 +21,7 @@
 				<span v-if="visibility === 'followers'"><i class="ti ti-lock-open"></i></span>
 				<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
 			</button>
-			<button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="fas fa-file-code"></i></button>
+			<button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
 			<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i></button>
 		</div>
 	</header>
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 5814faef19..4f75d31db4 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -10,7 +10,7 @@
 	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
 		<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
 			<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
-				<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="isMobile? playerEnabled = true : openPlayer()"><i class="fas fa-play-circle"></i></button>
+				<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="isMobile? playerEnabled = true : openPlayer()"><i class="ti ti-player-play"></i></button>
 			</div>
 			<article>
 				<header>
diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
index fb786ecf65..13c4e90f3e 100644
--- a/packages/client/src/components/MkWindow.vue
+++ b/packages/client/src/components/MkWindow.vue
@@ -11,8 +11,8 @@
 				</span>
 				<span class="right">
 					<button v-for="button in buttonsRight" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
-					<button v-if="canResize && maximized" class="button _button" @click="unMaximize()"><i class="fas fa-window-restore"></i></button>
-					<button v-else-if="canResize && !maximized" class="button _button" @click="maximize()"><i class="fas fa-window-maximize"></i></button>
+					<button v-if="canResize && maximized" class="button _button" @click="unMaximize()"><i class="ti ti-app-window"></i></button>
+					<button v-else-if="canResize && !maximized" class="button _button" @click="maximize()"><i class="ti ti-arrows-maximize"></i></button>
 					<button v-if="closeButton" class="button _button" @click="close()"><i class="ti ti-x"></i></button>
 				</span>
 			</div>
diff --git a/packages/client/src/components/form/suspense.vue b/packages/client/src/components/form/suspense.vue
index 58d80264c1..7efa501f27 100644
--- a/packages/client/src/components/form/suspense.vue
+++ b/packages/client/src/components/form/suspense.vue
@@ -9,7 +9,7 @@
 	<div v-else>
 		<div class="wszdbhzo">
 			<div><i class="ti ti-alert-triangle"></i> {{ $ts.somethingHappened }}</div>
-			<MkButton inline class="retry" @click="retry"><i class="fas fa-redo-alt"></i> {{ $ts.retry }}</MkButton>
+			<MkButton inline class="retry" @click="retry"><i class="ti ti-reload"></i> {{ $ts.retry }}</MkButton>
 		</div>
 	</div>
 </transition>
@@ -21,14 +21,14 @@ import MkButton from '@/components/MkButton.vue';
 
 export default defineComponent({
 	components: {
-		MkButton
+		MkButton,
 	},
 
 	props: {
 		p: {
 			type: Function as PropType<() => Promise<any>>,
 			required: true,
-		}
+		},
 	},
 
 	setup(props, context) {
@@ -59,7 +59,7 @@ export default defineComponent({
 		watch(() => props.p, () => {
 			process();
 		}, {
-			immediate: true
+			immediate: true,
 		});
 
 		const retry = () => {
@@ -73,7 +73,7 @@ export default defineComponent({
 			result,
 			retry,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/navbar.ts b/packages/client/src/navbar.ts
index 18b1cddc79..e1f64ac05f 100644
--- a/packages/client/src/navbar.ts
+++ b/packages/client/src/navbar.ts
@@ -78,7 +78,7 @@ export const navbarItemDef = reactive({
 	},
 	pages: {
 		title: 'pages',
-		icon: 'fas fa-file-alt',
+		icon: 'ti ti-news',
 		to: '/pages',
 	},
 	gallery: {
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index 1b16a66ac4..e923ca5df2 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -136,7 +136,7 @@ const headerTabs = $computed(() => [{
 
 definePageMetadata(computed(() => ({
 	title: file ? i18n.ts.file + ': ' + file.name : i18n.ts.file,
-	icon: 'fas fa-file',
+	icon: 'ti ti-file',
 })));
 </script>
 
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 75d3fcae70..b5b5145c65 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -170,7 +170,7 @@ const menuDef = $computed(() => [{
 		to: '/admin/instance-block',
 		active: currentPage?.route.name === 'instance-block',
 	}, {
-		icon: 'fas fa-ghost',
+		icon: 'ti ti-ghost',
 		text: i18n.ts.proxyAccount,
 		to: '/admin/proxy-account',
 		active: currentPage?.route.name === 'proxy-account',
diff --git a/packages/client/src/pages/admin/proxy-account.vue b/packages/client/src/pages/admin/proxy-account.vue
index fe61909e80..5d0d67980e 100644
--- a/packages/client/src/pages/admin/proxy-account.vue
+++ b/packages/client/src/pages/admin/proxy-account.vue
@@ -57,6 +57,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.proxyAccount,
-	icon: 'fas fa-ghost',
+	icon: 'ti ti-ghost',
 });
 </script>
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index 7c84629a0a..34e9dac196 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -61,7 +61,7 @@ const headerActions = $computed(() => [{
 const headerTabs = $computed(() => [{
 	key: 'featured',
 	title: i18n.ts._channel.featured,
-	icon: 'fas fa-fire-alt',
+	icon: 'ti ti-comet',
 }, {
 	key: 'following',
 	title: i18n.ts._channel.following,
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index b04c1fad94..24a634bab5 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -13,7 +13,7 @@
 					</MkPagination>
 				</MkFolder>
 				<MkFolder class="_gap">
-					<template #header><i class="fas fa-fire-alt"></i>{{ i18n.ts.popularPosts }}</template>
+					<template #header><i class="ti ti-comet"></i>{{ i18n.ts.popularPosts }}</template>
 					<MkPagination v-slot="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
 						<div class="vfpdbgtk">
 							<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
index a2b7de81af..493d3b2618 100644
--- a/packages/client/src/pages/settings/accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -50,7 +50,7 @@ const init = async () => {
 function menu(account, ev) {
 	os.popupMenu([{
 		text: i18n.ts.switch,
-		icon: 'fas fa-exchange-alt',
+		icon: 'ti ti-switch-horizontal',
 		action: () => switchAccount(account),
 	}, {
 		text: i18n.ts.remove,
diff --git a/packages/client/src/pages/settings/import-export.vue b/packages/client/src/pages/settings/import-export.vue
index 68460cf7ad..7db267c142 100644
--- a/packages/client/src/pages/settings/import-export.vue
+++ b/packages/client/src/pages/settings/import-export.vue
@@ -154,7 +154,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.importAndExport,
-	icon: 'fas fa-boxes',
+	icon: 'ti ti-package',
 });
 </script>
 
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index 36e0718fbc..0dbe185504 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -47,7 +47,7 @@
 	<FormSection>
 		<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
 			<FormButton inline @click="preview"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</FormButton>
-			<FormButton inline danger @click="setDefault"><i class="fas fa-undo"></i> {{ i18n.ts.default }}</FormButton>
+			<FormButton inline danger @click="setDefault"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
 		</div>
 	</FormSection>
 </div>
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index b6fdd2356f..33f49eb3ef 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -30,7 +30,7 @@
 
 	<FormSection>
 		<FormSlot>
-			<FormButton danger @click="regenerateToken"><i class="fas fa-sync-alt"></i> {{ i18n.ts.regenerateLoginToken }}</FormButton>
+			<FormButton danger @click="regenerateToken"><i class="ti ti-refresh"></i> {{ i18n.ts.regenerateLoginToken }}</FormButton>
 			<template #caption>{{ i18n.ts.regenerateLoginTokenDescription }}</template>
 		</FormSlot>
 	</FormSection>
diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue
index 1106f0c6bb..2bea491e67 100644
--- a/packages/client/src/pages/settings/sounds.vue
+++ b/packages/client/src/pages/settings/sounds.vue
@@ -13,7 +13,7 @@
 		</FormLink>
 	</FormSection>
 
-	<FormButton danger class="_formBlock" @click="reset()"><i class="fas fa-redo"></i> {{ i18n.ts.default }}</FormButton>
+	<FormButton danger class="_formBlock" @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
 </div>
 </template>
 
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index 48f2955283..6e895cd8d7 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -81,7 +81,7 @@ const headerTabs = $computed(() => user ? [{
 }, {
 	key: 'pages',
 	title: i18n.ts.pages,
-	icon: 'fas fa-file-alt',
+	icon: 'ti ti-news',
 }, {
 	key: 'gallery',
 	title: i18n.ts.gallery,
diff --git a/packages/client/src/ui/deck/widgets-column.vue b/packages/client/src/ui/deck/widgets-column.vue
index b5f49761fd..0bcdc4f768 100644
--- a/packages/client/src/ui/deck/widgets-column.vue
+++ b/packages/client/src/ui/deck/widgets-column.vue
@@ -1,6 +1,6 @@
 <template>
 <XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="fas fa-window-maximize" style="margin-right: 8px;"></i>{{ column.name }}</template>
+	<template #header><i class="ti ti-layout-list" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
 	<div class="wtdtxvec">
 		<div v-if="!(column.widgets && column.widgets.length > 0) && !edit" class="intro">{{ i18n.ts._deck.widgetsIntroduction }}</div>
diff --git a/packages/client/src/widgets/photos.vue b/packages/client/src/widgets/photos.vue
index e891bd6a7d..4ad5324053 100644
--- a/packages/client/src/widgets/photos.vue
+++ b/packages/client/src/widgets/photos.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" :class="$style.root" :data-transparent="widgetProps.transparent ? true : null" class="mkw-photos">
-	<template #header><i class="fas fa-camera"></i>{{ i18n.ts._widgets.photos }}</template>
+	<template #header><i class="ti ti-camera"></i>{{ i18n.ts._widgets.photos }}</template>
 
 	<div class="">
 		<MkLoading v-if="fetching"/>
-- 
cgit v1.2.3-freya


From d70b71a6e43d33c338645c9e3b6d80a1257a8527 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 08:50:48 +0900
Subject: :art:

---
 packages/client/src/components/MkButton.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index 1cee1725aa..891645bb2a 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -1,7 +1,7 @@
 <template>
 <button
-	ref="el"
-	v-if="!link" class="bghgjjyj _button"
+	v-if="!link"
+	ref="el" class="bghgjjyj _button"
 	:class="{ inline, primary, gradate, danger, rounded, full }"
 	:type="type"
 	@click="emit('click', $event)"
@@ -105,10 +105,10 @@ function onMousedown(evt: MouseEvent): void {
 	display: block;
 	min-width: 100px;
 	width: max-content;
-	padding: 8px 16px;
+	padding: 7px 14px;
 	text-align: center;
 	font-weight: normal;
-	font-size: 90%;
+	font-size: 95%;
 	box-shadow: none;
 	text-decoration: none;
 	background: var(--buttonBg);
-- 
cgit v1.2.3-freya


From 6be8a00faf47c49c4a2916b0ae64ca01d8f16c86 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 08:53:24 +0900
Subject: :art:

---
 packages/client/src/components/MkChart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkChart.vue b/packages/client/src/components/MkChart.vue
index 29dac3c9cb..7f660853fe 100644
--- a/packages/client/src/components/MkChart.vue
+++ b/packages/client/src/components/MkChart.vue
@@ -194,7 +194,7 @@ const render = () => {
 						axis: 'y',
 						colors: {
 							0: alpha(x.color ? x.color : getColor(i), 0),
-							[maxes[i]]: alpha(x.color ? x.color : getColor(i), 0.2),
+							[maxes[i]]: alpha(x.color ? x.color : getColor(i), 0.3),
 						},
 					},
 				},
-- 
cgit v1.2.3-freya


From 119ee826a057d987b018204cb01158792af1a9b4 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 08:59:31 +0900
Subject: :art:

---
 packages/client/src/style.scss | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages/client/src')

diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 50b7e5c3e5..4945a0011a 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -122,6 +122,7 @@ hr {
 .ti {
 	font-size: 130%;
 	vertical-align: text-bottom;
+	line-height: 0.9em;
 }
 
 .ti-fw {
-- 
cgit v1.2.3-freya


From 569d380769e6e4b667f1b4e6e26e36b1bd4442f3 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 10:37:01 +0900
Subject: Update style.scss

---
 packages/client/src/style.scss | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 4945a0011a..8b7a846863 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -120,14 +120,16 @@ hr {
 }
 
 .ti {
-	font-size: 130%;
-	vertical-align: text-bottom;
+	vertical-align: -10%;
 	line-height: 0.9em;
+
+	&:before {
+		font-size: 130%;
+	}
 }
 
 .ti-fw {
 	display: inline-block;
-	width: 1em;
 	text-align: center;
 }
 
-- 
cgit v1.2.3-freya


From 8663ce3b969c9671a4ac50f564992666edf7d50c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 10:40:56 +0900
Subject: :art:

---
 packages/client/src/scripts/get-note-menu.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
index c9663d32e5..7656770894 100644
--- a/packages/client/src/scripts/get-note-menu.ts
+++ b/packages/client/src/scripts/get-note-menu.ts
@@ -232,7 +232,7 @@ export function getNoteMenu(props: {
 			} : undefined,
 			null,
 			statePromise.then(state => state.isFavorited ? {
-				icon: 'ti ti-star',
+				icon: 'ti ti-star-off',
 				text: i18n.ts.unfavorite,
 				action: () => toggleFavorite(false),
 			} : {
@@ -255,7 +255,7 @@ export function getNoteMenu(props: {
 				action: () => toggleThreadMute(true),
 			}),
 			appearNote.userId === $i.id ? ($i.pinnedNoteIds || []).includes(appearNote.id) ? {
-				icon: 'ti ti-pin',
+				icon: 'ti ti-pinned-off',
 				text: i18n.ts.unpin,
 				action: () => togglePin(false),
 			} : {
-- 
cgit v1.2.3-freya


From f90617ab07b78a8490c4dfdc1a184ef6a815fa45 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 10:52:39 +0900
Subject: :art:

---
 packages/client/src/components/MkModalPageWindow.vue | 4 ++--
 packages/client/src/components/MkPageWindow.vue      | 6 +++---
 packages/client/src/components/global/MkA.vue        | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index 82b04b6670..fb59e67211 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -68,11 +68,11 @@ const contextmenu = $computed(() => {
 		type: 'label',
 		text: path,
 	}, {
-		icon: 'ti ti-arrows-maximize',
+		icon: 'ti ti-corner-right-down-double',
 		text: i18n.ts.showInPage,
 		action: expand,
 	}, {
-		icon: 'ti ti-external-link',
+		icon: 'ti ti-window-maximize',
 		text: i18n.ts.popout,
 		action: popout,
 	}, null, {
diff --git a/packages/client/src/components/MkPageWindow.vue b/packages/client/src/components/MkPageWindow.vue
index d5fff4be0a..a0615893f7 100644
--- a/packages/client/src/components/MkPageWindow.vue
+++ b/packages/client/src/components/MkPageWindow.vue
@@ -66,7 +66,7 @@ const buttonsLeft = $computed(() => {
 });
 const buttonsRight = $computed(() => {
 	const buttons = [{
-		icon: 'ti ti-arrows-maximize',
+		icon: 'ti ti-corner-right-down-double',
 		title: i18n.ts.showInPage,
 		onClick: expand,
 	}];
@@ -86,11 +86,11 @@ provide('shouldOmitHeaderTitle', true);
 provide('shouldHeaderThin', true);
 
 const contextmenu = $computed(() => ([{
-	icon: 'ti ti-arrows-maximize',
+	icon: 'ti ti-corner-right-down-double',
 	text: i18n.ts.showInPage,
 	action: expand,
 }, {
-	icon: 'ti ti-external-link',
+	icon: 'ti ti-window-maximize',
 	text: i18n.ts.popout,
 	action: popout,
 }, {
diff --git a/packages/client/src/components/global/MkA.vue b/packages/client/src/components/global/MkA.vue
index dbdf89a0ba..a686d1bdbe 100644
--- a/packages/client/src/components/global/MkA.vue
+++ b/packages/client/src/components/global/MkA.vue
@@ -41,13 +41,13 @@ function onContextmenu(ev) {
 		type: 'label',
 		text: props.to,
 	}, {
-		icon: 'ti ti-window-maximize',
+		icon: 'ti ti-app-window',
 		text: i18n.ts.openInWindow,
 		action: () => {
 			os.pageWindow(props.to);
 		},
 	}, {
-		icon: 'ti ti-arrows-maximize',
+		icon: 'ti ti-corner-right-down-double',
 		text: i18n.ts.showInPage,
 		action: () => {
 			router.push(props.to, 'forcePage');
-- 
cgit v1.2.3-freya


From 83c84efb34ece02a69cf9b0702626ac70ea796b5 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 11:00:05 +0900
Subject: :art:

---
 .../src/components/MkChannelFollowButton.vue       |  9 +++---
 packages/client/src/components/MkDialog.vue        |  2 +-
 packages/client/src/components/MkFollowButton.vue  | 20 +++++++------
 packages/client/src/components/MkSignup.vue        |  4 +--
 packages/client/src/components/MkWaitingDialog.vue |  2 +-
 .../client/src/components/global/MkLoading.vue     | 10 ++++++-
 .../src/pages/messaging/messaging-room.form.vue    |  2 +-
 packages/client/src/pages/settings/2fa.vue         | 34 +++++++++++-----------
 packages/client/src/ui/_common_/upload.vue         |  2 +-
 9 files changed, 48 insertions(+), 37 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkChannelFollowButton.vue b/packages/client/src/components/MkChannelFollowButton.vue
index 46d57b4fc6..9e275d6172 100644
--- a/packages/client/src/components/MkChannelFollowButton.vue
+++ b/packages/client/src/components/MkChannelFollowButton.vue
@@ -1,5 +1,6 @@
 <template>
-<button class="hdcaacmi _button"
+<button
+	class="hdcaacmi _button"
 	:class="{ wait, active: isFollowing, full }"
 	:disabled="wait"
 	@click="onClick"
@@ -13,7 +14,7 @@
 		</template>
 	</template>
 	<template v-else>
-		<span v-if="full">{{ i18n.ts.processing }}</span><i class="fas fa-spinner fa-pulse ti-fw"></i>
+		<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true"/>
 	</template>
 </button>
 </template>
@@ -39,12 +40,12 @@ async function onClick() {
 	try {
 		if (isFollowing.value) {
 			await os.api('channels/unfollow', {
-				channelId: props.channel.id
+				channelId: props.channel.id,
 			});
 			isFollowing.value = false;
 		} else {
 			await os.api('channels/follow', {
-				channelId: props.channel.id
+				channelId: props.channel.id,
 			});
 			isFollowing.value = true;
 		}
diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index 8a46e9cdde..e40b5d6553 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -10,7 +10,7 @@
 			<i v-else-if="type === 'warning'" class="ti ti-alert-triangle"></i>
 			<i v-else-if="type === 'info'" class="ti ti-info-circle"></i>
 			<i v-else-if="type === 'question'" class="ti ti-question-circle"></i>
-			<i v-else-if="type === 'waiting'" class="fas fa-spinner fa-pulse"></i>
+			<MkLoading v-else-if="type === 'waiting'" :em="true"/>
 		</div>
 		<header v-if="title"><Mfm :text="title"/></header>
 		<div v-if="text" class="body"><Mfm :text="text"/></div>
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index 1099893b0d..433386f443 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -1,5 +1,6 @@
 <template>
-<button class="kpoogebi _button"
+<button
+	class="kpoogebi _button"
 	:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full, large }"
 	:disabled="wait"
 	@click="onClick"
@@ -8,8 +9,9 @@
 		<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
 			<span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="fas fa-hourglass-half"></i>
 		</template>
-		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <!-- つまりリモートフォローの場合。 -->
-			<span v-if="full">{{ i18n.ts.processing }}</span><i class="fas fa-spinner fa-pulse"></i>
+		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
+			<!-- つまりリモートフォローの場合。 -->
+			<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true"/>
 		</template>
 		<template v-else-if="isFollowing">
 			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
@@ -22,7 +24,7 @@
 		</template>
 	</template>
 	<template v-else>
-		<span v-if="full">{{ i18n.ts.processing }}</span><i class="fas fa-spinner fa-pulse ti-fw"></i>
+		<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true"/>
 	</template>
 </button>
 </template>
@@ -50,9 +52,9 @@ const connection = stream.useChannel('main');
 
 if (props.user.isFollowing == null) {
 	os.api('users/show', {
-		userId: props.user.id
+		userId: props.user.id,
 	})
-	.then(onFollowChange);
+		.then(onFollowChange);
 }
 
 function onFollowChange(user: Misskey.entities.UserDetailed) {
@@ -75,17 +77,17 @@ async function onClick() {
 			if (canceled) return;
 
 			await os.api('following/delete', {
-				userId: props.user.id
+				userId: props.user.id,
 			});
 		} else {
 			if (hasPendingFollowRequestFromYou) {
 				await os.api('following/requests/cancel', {
-					userId: props.user.id
+					userId: props.user.id,
 				});
 				hasPendingFollowRequestFromYou = false;
 			} else {
 				await os.api('following/create', {
-					userId: props.user.id
+					userId: props.user.id,
 				});
 				hasPendingFollowRequestFromYou = true;
 			}
diff --git a/packages/client/src/components/MkSignup.vue b/packages/client/src/components/MkSignup.vue
index e6281b1f84..67d3bb5c70 100644
--- a/packages/client/src/components/MkSignup.vue
+++ b/packages/client/src/components/MkSignup.vue
@@ -9,7 +9,7 @@
 		<template #prefix>@</template>
 		<template #suffix>@{{ host }}</template>
 		<template #caption>
-			<span v-if="usernameState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse ti-fw"></i> {{ i18n.ts.checking }}</span>
+			<span v-if="usernameState === 'wait'" style="color:#999"><MkLoading :em="true"/> {{ i18n.ts.checking }}</span>
 			<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.available }}</span>
 			<span v-else-if="usernameState === 'unavailable'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.unavailable }}</span>
 			<span v-else-if="usernameState === 'error'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.error }}</span>
@@ -22,7 +22,7 @@
 		<template #label>{{ i18n.ts.emailAddress }} <div v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
 		<template #prefix><i class="ti ti-mail"></i></template>
 		<template #caption>
-			<span v-if="emailState === 'wait'" style="color:#999"><i class="fas fa-spinner fa-pulse ti-fw"></i> {{ i18n.ts.checking }}</span>
+			<span v-if="emailState === 'wait'" style="color:#999"><MkLoading :em="true"/> {{ i18n.ts.checking }}</span>
 			<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.available }}</span>
 			<span v-else-if="emailState === 'unavailable:used'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.used }}</span>
 			<span v-else-if="emailState === 'unavailable:format'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.format }}</span>
diff --git a/packages/client/src/components/MkWaitingDialog.vue b/packages/client/src/components/MkWaitingDialog.vue
index ee86aec967..f4a9f4f22c 100644
--- a/packages/client/src/components/MkWaitingDialog.vue
+++ b/packages/client/src/components/MkWaitingDialog.vue
@@ -2,7 +2,7 @@
 <MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="emit('closed')">
 	<div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
 		<i v-if="success" class="ti ti-check icon success"></i>
-		<i v-else class="fas fa-spinner fa-pulse icon waiting"></i>
+		<MkLoading v-else class="icon waiting" :em="true"/>
 		<div v-if="text && !success" class="text">{{ text }}<MkEllipsis/></div>
 	</div>
 </MkModal>
diff --git a/packages/client/src/components/global/MkLoading.vue b/packages/client/src/components/global/MkLoading.vue
index bcf5925234..c7d787820a 100644
--- a/packages/client/src/components/global/MkLoading.vue
+++ b/packages/client/src/components/global/MkLoading.vue
@@ -1,5 +1,5 @@
 <template>
-<div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini }]">
+<div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini, [$style.em]: em }]">
 	<div :class="$style.container">
 		<svg :class="[$style.spinner, $style.bg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
 			<g transform="matrix(1.125,0,0,1.125,12,12)">
@@ -22,10 +22,12 @@ const props = withDefaults(defineProps<{
 	inline?: boolean;
 	colored?: boolean;
 	mini?: boolean;
+	em?: boolean;
 }>(), {
 	inline: false,
 	colored: true,
 	mini: false,
+	em: false,
 });
 </script>
 
@@ -60,6 +62,12 @@ const props = withDefaults(defineProps<{
 		padding: 16px;
 		--size: 32px;
 	}
+
+	&.em {
+		display: inline;
+		padding: 0;
+		--size: 1em;
+	}
 }
 
 .container {
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index ca0ebf554e..84572815c0 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -18,7 +18,7 @@
 			<button class="_button" @click="chooseFile"><i class="ti ti-photo-plus"></i></button>
 			<button class="_button" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
 			<button class="send _button" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send">
-				<template v-if="!sending"><i class="ti ti-send"></i></template><template v-if="sending"><i class="fas fa-spinner fa-pulse ti-fw"></i></template>
+				<template v-if="!sending"><i class="ti ti-send"></i></template><template v-if="sending"><MkLoading :em="true"/></template>
 			</button>
 		</div>
 	</footer>
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
index 422b55e227..f0cb6bf79a 100644
--- a/packages/client/src/pages/settings/2fa.vue
+++ b/packages/client/src/pages/settings/2fa.vue
@@ -26,7 +26,7 @@
 			<ol v-if="registration && !registration.error">
 				<li v-if="registration.stage >= 0">
 					{{ i18n.ts.tapSecurityKey }}
-					<i v-if="registration.saving && registration.stage == 0" class="fas fa-spinner fa-pulse ti-fw"></i>
+					<MkLoading v-if="registration.saving && registration.stage == 0" :em="true"/>
 				</li>
 				<li v-if="registration.stage >= 1">
 					<MkForm :disabled="registration.stage != 1 || registration.saving">
@@ -34,7 +34,7 @@
 							<template #label>{{ i18n.ts.securityKeyName }}</template>
 						</MkInput>
 						<MkButton :disabled="keyName.length == 0" @click="registerKey">{{ i18n.ts.registerSecurityKey }}</MkButton>
-						<i v-if="registration.saving && registration.stage == 1" class="fas fa-spinner fa-pulse ti-fw"></i>
+						<MkLoading v-if="registration.saving && registration.stage == 1" :em="true"/>
 					</MkForm>
 				</li>
 			</ol>
@@ -86,11 +86,11 @@ const token = ref(null);
 function register() {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password'
+		type: 'password',
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
 		os.api('i/2fa/register', {
-			password: password
+			password: password,
 		}).then(data => {
 			twoFactorData.value = data;
 		});
@@ -100,11 +100,11 @@ function register() {
 function unregister() {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password'
+		type: 'password',
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
 		os.api('i/2fa/unregister', {
-			password: password
+			password: password,
 		}).then(() => {
 			usePasswordLessLogin.value = false;
 			updatePasswordLessLogin();
@@ -117,7 +117,7 @@ function unregister() {
 
 function submit() {
 	os.api('i/2fa/done', {
-		token: token.value
+		token: token.value,
 	}).then(() => {
 		os.success();
 		$i!.twoFactorEnabled = true;
@@ -137,7 +137,7 @@ function registerKey() {
 		challengeId: registration.value.challengeId,
 		// we convert each 16 bits to a string to serialise
 		clientDataJSON: stringify(registration.value.credential.response.clientDataJSON),
-		attestationObject: hexify(registration.value.credential.response.attestationObject)
+		attestationObject: hexify(registration.value.credential.response.attestationObject),
 	}).then(key => {
 		registration.value = null;
 		key.lastUsed = new Date();
@@ -148,12 +148,12 @@ function registerKey() {
 function unregisterKey(key) {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password'
+		type: 'password',
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
 		return os.api('i/2fa/remove-key', {
 			password,
-			credentialId: key.id
+			credentialId: key.id,
 		}).then(() => {
 			usePasswordLessLogin.value = false;
 			updatePasswordLessLogin();
@@ -166,11 +166,11 @@ function unregisterKey(key) {
 function addSecurityKey() {
 	os.inputText({
 		title: i18n.ts.password,
-		type: 'password'
+		type: 'password',
 	}).then(({ canceled, result: password }) => {
 		if (canceled) return;
 		os.api('i/2fa/register-key', {
-			password
+			password,
 		}).then(reg => {
 			registration.value = {
 				password,
@@ -180,7 +180,7 @@ function addSecurityKey() {
 					challenge: byteify(reg!.challenge, 'base64'),
 					rp: {
 						id: hostname,
-						name: 'Misskey'
+						name: 'Misskey',
 					},
 					user: {
 						id: byteify($i!.id, 'ascii'),
@@ -189,12 +189,12 @@ function addSecurityKey() {
 					},
 					pubKeyCredParams: [{ alg: -7, type: 'public-key' }],
 					timeout: 60000,
-					attestation: 'direct'
+					attestation: 'direct',
 				},
-				saving: true
+				saving: true,
 			};
 			return navigator.credentials.create({
-				publicKey: registration.value.publicKeyOptions
+				publicKey: registration.value.publicKeyOptions,
 			});
 		}).then(credential => {
 			registration.value.credential = credential;
@@ -210,7 +210,7 @@ function addSecurityKey() {
 
 async function updatePasswordLessLogin() {
 	await os.api('i/2fa/password-less', {
-		value: !!usePasswordLessLogin.value
+		value: !!usePasswordLessLogin.value,
 	});
 }
 </script>
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index 8324e9e75e..70882bd251 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -4,7 +4,7 @@
 		<li v-for="ctx in uploads" :key="ctx.id">
 			<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
 			<div class="top">
-				<p class="name"><i class="fas fa-spinner fa-pulse"></i>{{ ctx.name }}</p>
+				<p class="name"><MkLoading :em="true"/>{{ ctx.name }}</p>
 				<p class="status">
 					<span v-if="ctx.progressValue === undefined" class="initing">{{ i18n.ts.waiting }}<MkEllipsis/></span>
 					<span v-if="ctx.progressValue !== undefined" class="kb">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
-- 
cgit v1.2.3-freya


From b4b9d5d5526b70d3d60d463497420df07f236bd6 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 11:06:39 +0900
Subject: :art:

---
 packages/client/src/components/MkFollowButton.vue   | 4 ++--
 packages/client/src/components/global/MkLoading.vue | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index 433386f443..f76b84bc1d 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -11,7 +11,7 @@
 		</template>
 		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
 			<!-- つまりリモートフォローの場合。 -->
-			<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true"/>
+			<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
 		</template>
 		<template v-else-if="isFollowing">
 			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
@@ -24,7 +24,7 @@
 		</template>
 	</template>
 	<template v-else>
-		<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true"/>
+		<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
 	</template>
 </button>
 </template>
diff --git a/packages/client/src/components/global/MkLoading.vue b/packages/client/src/components/global/MkLoading.vue
index c7d787820a..64e12e3b44 100644
--- a/packages/client/src/components/global/MkLoading.vue
+++ b/packages/client/src/components/global/MkLoading.vue
@@ -64,7 +64,8 @@ const props = withDefaults(defineProps<{
 	}
 
 	&.em {
-		display: inline;
+		display: inline-block;
+		vertical-align: middle;
 		padding: 0;
 		--size: 1em;
 	}
-- 
cgit v1.2.3-freya


From 2fe86fd86937b47969447d91bb987b7e0233afd5 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 20 Dec 2022 13:05:36 +0900
Subject: enhance: Vite HMR while yarn dev, and more build tuning (#9361)

* enhance: Vite HMR while yarn dev, and more build tuning

* use localhost

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 CONTRIBUTING.md                                    | 14 ++++++--
 package.json                                       |  3 +-
 packages/backend/package.json                      |  1 +
 packages/backend/src/config.ts                     |  7 +++-
 .../backend/src/server/web/ClientServerService.ts  | 22 +++++++++++--
 packages/backend/src/server/web/boot.js            |  2 +-
 packages/backend/src/server/web/views/base.pug     |  9 ++++--
 packages/client/package.json                       |  2 +-
 .../client/src/components/MkFileListForAdmin.vue   |  1 -
 packages/client/src/pages/admin/overview.vue       |  2 --
 packages/client/vite.config.ts                     |  9 ++----
 scripts/build-pre.js                               |  5 +++
 scripts/clean-all.js                               |  1 +
 scripts/dev.js                                     | 10 ++++++
 yarn.lock                                          | 37 +++++++++++++++++++++-
 15 files changed, 102 insertions(+), 23 deletions(-)
 create mode 100644 scripts/build-pre.js

(limited to 'packages/client/src')

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 36a4feb7e0..4689543d50 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -99,9 +99,17 @@ If your language is not listed in Crowdin, please open an issue.
 ![Crowdin](https://d322cqt584bo4o.cloudfront.net/misskey/localized.svg)
 
 ## Development
-During development, it is useful to use the `yarn dev` command.
-This command monitors the server-side and client-side source files and automatically builds them if they are modified.
-In addition, it will also automatically start the Misskey server process.
+During development, it is useful to use the 
+
+```
+yarn dev
+```
+
+command.
+
+- Server-side source files and automatically builds them if they are modified. Automatically start the server process(es).
+- Vite HMR (just the `vite` command) is available. The behavior may be different from production.
+- Service Worker is watched by esbuild.
 
 ## Testing
 - Test codes are located in [`/test`](/test).
diff --git a/package.json b/package.json
index 01aabc099b..1090c8eb1c 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
 	],
 	"private": true,
 	"scripts": {
-		"build": "yarn workspaces foreach run build && yarn run gulp",
+		"build-pre": "node ./scripts/build-pre.js",
+		"build": "yarn build-pre && yarn workspaces foreach run build && yarn run gulp",
 		"start": "cd packages/backend && node ./built/boot/index.js",
 		"start:test": "cd packages/backend && cross-env NODE_ENV=test node ./built/boot/index.js",
 		"init": "yarn migrate",
diff --git a/packages/backend/package.json b/packages/backend/package.json
index ae39fd591c..b4cf30d359 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -28,6 +28,7 @@
 		"@fastify/accepts": "4.1.0",
 		"@fastify/cookie": "^8.3.0",
 		"@fastify/cors": "8.2.0",
+		"@fastify/http-proxy": "^8.4.0",
 		"@fastify/multipart": "7.3.0",
 		"@fastify/static": "6.6.0",
 		"@fastify/view": "7.3.0",
diff --git a/packages/backend/src/config.ts b/packages/backend/src/config.ts
index 11d8db5c04..025d7acdeb 100644
--- a/packages/backend/src/config.ts
+++ b/packages/backend/src/config.ts
@@ -91,6 +91,7 @@ export type Mixin = {
 	driveUrl: string;
 	userAgent: string;
 	clientEntry: string;
+	clientManifestExists: boolean;
 };
 
 export type Config = Source & Mixin;
@@ -112,7 +113,10 @@ const path = process.env.NODE_ENV === 'test'
 
 export function loadConfig() {
 	const meta = JSON.parse(fs.readFileSync(`${_dirname}/../../../built/meta.json`, 'utf-8'));
-	const clientManifest = JSON.parse(fs.readFileSync(`${_dirname}/../../../built/_client_dist_/manifest.json`, 'utf-8'));
+	const clientManifestExists = fs.existsSync(_dirname + '/../../../built/_vite_/manifest.json')
+	const clientManifest = clientManifestExists ?
+		JSON.parse(fs.readFileSync(`${_dirname}/../../../built/_vite_/manifest.json`, 'utf-8'))
+		: { 'src/init.ts': { file: 'src/init.ts' } };
 	const config = yaml.load(fs.readFileSync(path, 'utf-8')) as Source;
 
 	const mixin = {} as Mixin;
@@ -134,6 +138,7 @@ export function loadConfig() {
 	mixin.driveUrl = `${mixin.scheme}://${mixin.host}/files`;
 	mixin.userAgent = `Misskey/${meta.version} (${config.url})`;
 	mixin.clientEntry = clientManifest['src/init.ts'];
+	mixin.clientManifestExists = clientManifestExists;
 
 	if (!config.redis.prefix) config.redis.prefix = mixin.host;
 
diff --git a/packages/backend/src/server/web/ClientServerService.ts b/packages/backend/src/server/web/ClientServerService.ts
index 58452ae826..c537d9a369 100644
--- a/packages/backend/src/server/web/ClientServerService.ts
+++ b/packages/backend/src/server/web/ClientServerService.ts
@@ -12,6 +12,7 @@ import { In, IsNull } from 'typeorm';
 import fastifyStatic from '@fastify/static';
 import fastifyView from '@fastify/view';
 import fastifyCookie from '@fastify/cookie';
+import fastifyProxy from '@fastify/http-proxy';
 import type { Config } from '@/config.js';
 import { getNoteSummary } from '@/misc/get-note-summary.js';
 import { DI } from '@/di-symbols.js';
@@ -39,6 +40,7 @@ const staticAssets = `${_dirname}/../../../assets/`;
 const clientAssets = `${_dirname}/../../../../client/assets/`;
 const assets = `${_dirname}/../../../../../built/_client_dist_/`;
 const swAssets = `${_dirname}/../../../../../built/_sw_dist_/`;
+const viteOut = `${_dirname}/../../../../../built/_vite_/`;
 
 @Injectable()
 export class ClientServerService {
@@ -151,9 +153,6 @@ export class ClientServerService {
 			},
 			defaultContext: {
 				version: this.config.version,
-				getClientEntry: () => process.env.NODE_ENV === 'production' ?
-					this.config.clientEntry :
-					JSON.parse(readFileSync(`${_dirname}/../../../../../built/_client_dist_/manifest.json`, 'utf-8'))['src/init.ts'],
 				config: this.config,
 			},
 		});
@@ -164,6 +163,23 @@ export class ClientServerService {
 			done();
 		});
 
+		//#region vite assets
+		if (this.config.clientManifestExists) {
+			fastify.register(fastifyStatic, {
+				root: viteOut,
+				prefix: '/vite/',
+				maxAge: ms('30 days'),
+				decorateReply: false,
+			});
+		} else {
+			fastify.register(fastifyProxy, {
+				upstream: 'http://localhost:5173', // TODO: port configuration
+				prefix: '/vite',
+				rewritePrefix: '/vite',
+			});
+		}
+		//#endregion
+
 		//#region static assets
 
 		fastify.register(fastifyStatic, {
diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index ffd8b8941c..86df3308ec 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -57,7 +57,7 @@
 
 	//#region Script
 	function importAppScript() {
-		import(`/assets/${CLIENT_ENTRY}`)
+		import(`/vite/${CLIENT_ENTRY}`)
 			.catch(async e => {
 				await checkUpdate();
 				console.error(e);
diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug
index 1b3ac82d2e..0c3c5c9b7e 100644
--- a/packages/backend/src/server/web/views/base.pug
+++ b/packages/backend/src/server/web/views/base.pug
@@ -1,7 +1,7 @@
 block vars
 
 block loadClientEntry
-	- const clientEntry = getClientEntry();
+	- const clientEntry = config.clientEntry;
 
 doctype html
 
@@ -35,11 +35,14 @@ html
 		link(rel='prefetch' href='https://xn--931a.moe/assets/not-found.jpg')
 		link(rel='prefetch' href='https://xn--931a.moe/assets/error.jpg')
 		link(rel='stylesheet' href='/assets/tabler-icons/tabler-icons.css')
-		link(rel='modulepreload' href=`/assets/${clientEntry.file}`)
+		link(rel='modulepreload' href=`/vite/${clientEntry.file}`)
+
+		if !config.clientManifestExists
+				script(type="module" src="/vite/@vite/client")
 
 		if Array.isArray(clientEntry.css)
 			each href in clientEntry.css
-				link(rel='stylesheet' href=`/assets/${href}`)
+				link(rel='stylesheet' href=`/vite/${href}`)
 
 		title
 			block title
diff --git a/packages/client/package.json b/packages/client/package.json
index 6ed9c5d1fe..87ef6e3638 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -2,7 +2,7 @@
 	"name": "client",
 	"private": true,
 	"scripts": {
-		"watch": "vite build --watch --mode development",
+		"watch": "vite",
 		"build": "vite build",
 		"lint": "vue-tsc --noEmit && eslint --quiet \"src/**/*.{ts,vue}\""
 	},
diff --git a/packages/client/src/components/MkFileListForAdmin.vue b/packages/client/src/components/MkFileListForAdmin.vue
index b6429eaf8d..4910506a95 100644
--- a/packages/client/src/components/MkFileListForAdmin.vue
+++ b/packages/client/src/components/MkFileListForAdmin.vue
@@ -34,7 +34,6 @@
 <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/MkPagination.vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import bytes from '@/filters/bytes';
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index 07b808d55b..6c1f54186c 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -159,8 +159,6 @@ import {
 } 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 XUser from './overview.user.vue';
diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
index f23c621131..1acf5301b7 100644
--- a/packages/client/vite.config.ts
+++ b/packages/client/vite.config.ts
@@ -1,4 +1,3 @@
-import * as fs from 'fs';
 import pluginVue from '@vitejs/plugin-vue';
 import { defineConfig } from 'vite';
 
@@ -9,11 +8,9 @@ import pluginJson5 from './vite.json5';
 const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json', '.json5', '.svg', '.sass', '.scss', '.css', '.vue'];
 
 export default defineConfig(({ command, mode }) => {
-	fs.mkdirSync(__dirname + '/../../built', { recursive: true });
-	fs.writeFileSync(__dirname + '/../../built/meta.json', JSON.stringify({ version: meta.version }), 'utf-8');
 
 	return {
-		base: '/assets/',
+		base: '/vite/',
 
 		plugins: [
 			pluginVue({
@@ -63,10 +60,10 @@ export default defineConfig(({ command, mode }) => {
 				},
 			},
 			cssCodeSplit: true,
-			outDir: __dirname + '/../../built/_client_dist_',
+			outDir: __dirname + '/../../built/_vite_',
 			assetsDir: '.',
 			emptyOutDir: false,
-			sourcemap: process.env.NODE_ENV !== 'production',
+			sourcemap: process.env.NODE_ENV === 'development',
 			reportCompressedSize: false,
 		},
 	};
diff --git a/scripts/build-pre.js b/scripts/build-pre.js
new file mode 100644
index 0000000000..e34a97738e
--- /dev/null
+++ b/scripts/build-pre.js
@@ -0,0 +1,5 @@
+const fs = require('fs');
+const meta = require('../package.json');
+
+fs.mkdirSync(__dirname + '/../built', { recursive: true });
+fs.writeFileSync(__dirname + '/../built/meta.json', JSON.stringify({ version: meta.version }), 'utf-8');
diff --git a/scripts/clean-all.js b/scripts/clean-all.js
index 456b88032b..49b9957657 100644
--- a/scripts/clean-all.js
+++ b/scripts/clean-all.js
@@ -12,4 +12,5 @@ const fs = require('fs');
 
 	fs.rmSync(__dirname + '/../built', { recursive: true, force: true });
 	fs.rmSync(__dirname + '/../node_modules', { recursive: true, force: true });
+	fs.rmSync(__dirname + '/../.yarn/cache', { recursive: true, force: true });
 })();
diff --git a/scripts/dev.js b/scripts/dev.js
index b0fe12ee30..24e8914ee9 100644
--- a/scripts/dev.js
+++ b/scripts/dev.js
@@ -1,4 +1,5 @@
 const execa = require('execa');
+const fs = require('fs');
 
 (async () => {
 	await execa('yarn', ['clean'], {
@@ -7,6 +8,12 @@ const execa = require('execa');
 		stderr: process.stderr,
 	});
 
+	await execa('yarn', ['build-pre'], {
+		cwd: __dirname + '/../',
+		stdout: process.stdout,
+		stderr: process.stderr,
+	});
+
 	execa('yarn', ['dlx', 'gulp', 'watch'], {
 		cwd: __dirname + '/../',
 		stdout: process.stdout,
@@ -33,6 +40,9 @@ const execa = require('execa');
 
 	const start = async () => {
 		try {
+			const exist = fs.existsSync(__dirname + '/../packages/backend/built/boot/index.js')
+			if (!exist) throw new Error('not exist yet');
+
 			await execa('yarn', ['start'], {
 				cwd: __dirname + '/../',
 				stdout: process.stdout,
diff --git a/yarn.lock b/yarn.lock
index e2d2dea8f8..eb021a707c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -917,6 +917,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fastify/http-proxy@npm:^8.4.0":
+  version: 8.4.0
+  resolution: "@fastify/http-proxy@npm:8.4.0"
+  dependencies:
+    "@fastify/reply-from": ^8.0.0
+    ws: ^8.4.2
+  checksum: 4bc4f0acac667c0c2f152e78342d8c7aeb4880d461227971ce31c85fe8d532fba616d2ef5224d6542f598a8a388d61954ed002003e2ce0695c15141e94a1a06b
+  languageName: node
+  linkType: hard
+
 "@fastify/multipart@npm:7.3.0":
   version: 7.3.0
   resolution: "@fastify/multipart@npm:7.3.0"
@@ -933,6 +943,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fastify/reply-from@npm:^8.0.0":
+  version: 8.3.1
+  resolution: "@fastify/reply-from@npm:8.3.1"
+  dependencies:
+    "@fastify/error": ^3.0.0
+    end-of-stream: ^1.4.4
+    fast-querystring: ^1.0.0
+    fastify-plugin: ^4.0.0
+    pump: ^3.0.0
+    tiny-lru: ^10.0.0
+    undici: ^5.5.1
+  checksum: debfc85b69946ecbad21dc2b01b2740b5a562258b5e3f00c452a88691525db650499cdf3bf09d85ae3f20455372925d6d7203265d0f00fa873f380be6e16e4d7
+  languageName: node
+  linkType: hard
+
 "@fastify/static@npm:6.6.0":
   version: 6.6.0
   resolution: "@fastify/static@npm:6.6.0"
@@ -4100,6 +4125,7 @@ __metadata:
     "@fastify/accepts": 4.1.0
     "@fastify/cookie": ^8.3.0
     "@fastify/cors": 8.2.0
+    "@fastify/http-proxy": ^8.4.0
     "@fastify/multipart": 7.3.0
     "@fastify/static": 6.6.0
     "@fastify/view": 7.3.0
@@ -16642,6 +16668,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"undici@npm:^5.5.1":
+  version: 5.14.0
+  resolution: "undici@npm:5.14.0"
+  dependencies:
+    busboy: ^1.6.0
+  checksum: 7a076e44d84b25844b4eb657034437b8b9bb91f17d347de474fdea1d4263ce7ae9406db79cd30de5642519277b4893f43073258bcc8fed420b295da3fdd11b26
+  languageName: node
+  linkType: hard
+
 "union-value@npm:^1.0.0":
   version: 1.0.1
   resolution: "union-value@npm:1.0.1"
@@ -17419,7 +17454,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:8.11.0, ws@npm:^8.11.0":
+"ws@npm:8.11.0, ws@npm:^8.11.0, ws@npm:^8.4.2":
   version: 8.11.0
   resolution: "ws@npm:8.11.0"
   peerDependencies:
-- 
cgit v1.2.3-freya


From 39bfb456cc845b8f5a7c0e737feb256a2b6bd006 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 13:11:44 +0900
Subject: :art:

---
 packages/client/src/components/MkInfo.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkInfo.vue b/packages/client/src/components/MkInfo.vue
index 2eb6bdbe47..6e7e096fdd 100644
--- a/packages/client/src/components/MkInfo.vue
+++ b/packages/client/src/components/MkInfo.vue
@@ -16,7 +16,7 @@ const props = defineProps<{
 
 <style lang="scss" scoped>
 .fpezltsf {
-	padding: 16px;
+	padding: 12px;
 	font-size: 90%;
 	background: var(--infoBg);
 	color: var(--infoFg);
-- 
cgit v1.2.3-freya


From 6966049453628384ce893aa741ded2fb22aaf960 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 13:12:32 +0900
Subject: :art:

---
 packages/client/src/components/MkInfo.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkInfo.vue b/packages/client/src/components/MkInfo.vue
index 6e7e096fdd..7aaf2c5bcb 100644
--- a/packages/client/src/components/MkInfo.vue
+++ b/packages/client/src/components/MkInfo.vue
@@ -16,7 +16,7 @@ const props = defineProps<{
 
 <style lang="scss" scoped>
 .fpezltsf {
-	padding: 12px;
+	padding: 12px 14px;
 	font-size: 90%;
 	background: var(--infoBg);
 	color: var(--infoFg);
-- 
cgit v1.2.3-freya


From b1faaebc93617158ef9a96ec95d46f034e69e7d8 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 13:20:19 +0900
Subject: :art:

---
 packages/client/src/components/MkSuperMenu.vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue
index 3179188518..35bb0e1893 100644
--- a/packages/client/src/components/MkSuperMenu.vue
+++ b/packages/client/src/components/MkSuperMenu.vue
@@ -116,22 +116,25 @@ export default defineComponent({
 
 			> .items {
 				display: grid;
-				grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
-				grid-gap: 8px;
+				grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+				grid-gap: 16px;
 				padding: 0 16px;
 
 				> .item {
 					flex-direction: column;
-					padding: 18px 16px 16px 16px;
-					background: var(--panel);
-					border-radius: 8px;
 					text-align: center;
+					padding: 0;
 
 					> .icon {
-						display: block;
+						display: grid;
+						place-content: center;
 						margin-right: 0;
-						margin-bottom: 12px;
+						margin-bottom: 6px;
 						font-size: 1.5em;
+						padding: 16px;
+						aspect-ratio: 1;
+						background: var(--panel);
+						border-radius: 100%;
 					}
 
 					> .text {
-- 
cgit v1.2.3-freya


From bc0e600e51ad6ed24919d862dc97c5d6faf71314 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 13:21:40 +0900
Subject: :art:

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue
index 35bb0e1893..30e364c03d 100644
--- a/packages/client/src/components/MkSuperMenu.vue
+++ b/packages/client/src/components/MkSuperMenu.vue
@@ -125,6 +125,16 @@ export default defineComponent({
 					text-align: center;
 					padding: 0;
 
+					&:hover {
+						text-decoration: none;
+						background: none;
+						color: var(--accent);
+
+						> .icon {
+							background: var(--accentedBg);
+						}
+					}
+
 					> .icon {
 						display: grid;
 						place-content: center;
-- 
cgit v1.2.3-freya


From 9d7812f436cbfa8e399f87bcd9988b0a0f8f7473 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 15:11:20 +0900
Subject: :art:

---
 locales/ja-JP.yml                                  |  2 ++
 packages/client/src/components/MkUrlPreview.vue    |  2 +-
 packages/client/src/components/MkWindow.vue        | 11 ++++++-----
 packages/client/src/components/MkYoutubePlayer.vue |  4 ++--
 4 files changed, 11 insertions(+), 8 deletions(-)

(limited to 'packages/client/src')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index bd6cee0272..1d05755629 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -906,6 +906,8 @@ pushNotificationAlreadySubscribed: "プッシュ通知は有効です"
 pushNotificationNotSupported: "ブラウザかインスタンスがプッシュ通知に非対応"
 sendPushNotificationReadMessage: "通知やメッセージが既読になったらプッシュ通知を削除する"
 sendPushNotificationReadMessageCaption: "「{emptyPushNotificationMessage}」という通知が一瞬表示されるようになります。端末の電池消費量が増加する可能性があります。"
+windowMaximize: "最大化"
+windowRestore: "元に戻す"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 4f75d31db4..9ef6efa1e5 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -82,7 +82,7 @@ if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/
 	requestUrl.hostname = 'www.youtube.com';
 }
 
-const requestLang = (lang || 'ja-JP').replace('ja-KS', 'ja-JP');
+const requestLang = (lang ?? 'ja-JP').replace('ja-KS', 'ja-JP');
 
 requestUrl.hash = '';
 
diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
index 13c4e90f3e..d9c0035a86 100644
--- a/packages/client/src/components/MkWindow.vue
+++ b/packages/client/src/components/MkWindow.vue
@@ -11,9 +11,9 @@
 				</span>
 				<span class="right">
 					<button v-for="button in buttonsRight" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
-					<button v-if="canResize && maximized" class="button _button" @click="unMaximize()"><i class="ti ti-app-window"></i></button>
-					<button v-else-if="canResize && !maximized" class="button _button" @click="maximize()"><i class="ti ti-arrows-maximize"></i></button>
-					<button v-if="closeButton" class="button _button" @click="close()"><i class="ti ti-x"></i></button>
+					<button v-if="canResize && maximized" v-tooltip="i18n.ts.windowRestore" class="button _button" @click="unMaximize()"><i class="ti ti-app-window"></i></button>
+					<button v-else-if="canResize && !maximized" v-tooltip="i18n.ts.windowMaximize" class="button _button" @click="maximize()"><i class="ti ti-arrows-maximize"></i></button>
+					<button v-if="closeButton" v-tooltip="i18n.ts.close" class="button _button" @click="close()"><i class="ti ti-x"></i></button>
 				</span>
 			</div>
 			<div class="body">
@@ -39,6 +39,7 @@ import { onBeforeUnmount, onMounted, provide } from 'vue';
 import contains from '@/scripts/contains';
 import * as os from '@/os';
 import { MenuItem } from '@/types/menu';
+import { i18n } from '@/i18n';
 
 const minHeight = 50;
 const minWidth = 250;
@@ -431,10 +432,10 @@ defineExpose({
 		border-radius: var(--radius);
 
 		> .header {
-			--height: 42px;
+			--height: 39px;
 
 			&.mini {
-				--height: 38px;
+				--height: 32px;
 			}
 
 			display: flex;
diff --git a/packages/client/src/components/MkYoutubePlayer.vue b/packages/client/src/components/MkYoutubePlayer.vue
index 815dc82a27..8cd481a39c 100644
--- a/packages/client/src/components/MkYoutubePlayer.vue
+++ b/packages/client/src/components/MkYoutubePlayer.vue
@@ -1,8 +1,8 @@
 <template>
 <XWindow :initial-width="640" :initial-height="402" :can-resize="true" :close-button="true">
 	<template #header>
-		<i class="icon fa-brands fa-youtube" style="margin-right: 0.5em;"></i>
-		<span>{{ title ?? 'YouTube Player' }}</span>
+		<i class="icon ti ti-brand-youtube" style="margin-right: 0.5em;"></i>
+		<span>{{ title ?? 'YouTube' }}</span>
 	</template>
 
 	<div class="poamfof">
-- 
cgit v1.2.3-freya


From 001b660cbee68aef49c441e0eb559a8831a2afb7 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 15:15:34 +0900
Subject: :art:

---
 packages/client/src/components/MkSignin.vue        | 38 +++++++++++-----------
 packages/client/src/components/MkUrlPreview.vue    |  2 +-
 packages/client/src/pages/admin/index.vue          |  2 +-
 packages/client/src/pages/admin/integrations.vue   |  6 ++--
 packages/client/src/pages/admin/queue.vue          |  2 +-
 packages/client/src/pages/settings/integration.vue |  6 ++--
 6 files changed, 28 insertions(+), 28 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkSignin.vue b/packages/client/src/components/MkSignin.vue
index b51bcb2dc3..a842ab6a5e 100644
--- a/packages/client/src/components/MkSignin.vue
+++ b/packages/client/src/components/MkSignin.vue
@@ -41,9 +41,9 @@
 		</div>
 	</div>
 	<div class="social _section">
-		<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/twitter`"><i class="fab fa-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
-		<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/github`"><i class="fab fa-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
-		<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/discord`"><i class="fab fa-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>
+		<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/twitter`"><i class="ti ti-brand-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
+		<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/github`"><i class="ti ti-brand-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
+		<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/discord`"><i class="ti ti-brand-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>
 	</div>
 </form>
 </template>
@@ -51,6 +51,7 @@
 <script lang="ts" setup>
 import { defineAsyncComponent } from 'vue';
 import { toUnicode } from 'punycode/';
+import { showSuspendedDialog } from '../scripts/show-suspended-dialog';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/form/input.vue';
 import MkInfo from '@/components/MkInfo.vue';
@@ -58,7 +59,6 @@ import { apiUrl, host as configHost } from '@/config';
 import { byteify, hexify } from '@/scripts/2fa';
 import * as os from '@/os';
 import { login } from '@/account';
-import { showSuspendedDialog } from '../scripts/show-suspended-dialog';
 import { instance } from '@/instance';
 import { i18n } from '@/i18n';
 
@@ -85,7 +85,7 @@ const props = defineProps({
 	withAvatar: {
 		type: Boolean,
 		required: false,
-		default: true
+		default: true,
 	},
 	autoSet: {
 		type: Boolean,
@@ -95,13 +95,13 @@ const props = defineProps({
 	message: {
 		type: String,
 		required: false,
-		default: ''
-	}
+		default: '',
+	},
 });
 
 function onUsernameChange() {
 	os.api('users/show', {
-		username: username
+		username: username,
 	}).then(userResponse => {
 		user = userResponse;
 	}, () => {
@@ -123,10 +123,10 @@ function queryKey() {
 			allowCredentials: challengeData.securityKeys.map(key => ({
 				id: byteify(key.id, 'hex'),
 				type: 'public-key',
-				transports: ['usb', 'nfc', 'ble', 'internal']
+				transports: ['usb', 'nfc', 'ble', 'internal'],
 			})),
-			timeout: 60 * 1000
-		}
+			timeout: 60 * 1000,
+		},
 	}).catch(() => {
 		queryingKey = false;
 		return Promise.reject(null);
@@ -141,7 +141,7 @@ function queryKey() {
 			clientDataJSON: hexify(credential.response.clientDataJSON),
 			credentialId: credential.id,
 			challengeId: challengeData.challengeId,
-      'hcaptcha-response': hCaptchaResponse,
+			'hcaptcha-response': hCaptchaResponse,
 			'g-recaptcha-response': reCaptchaResponse,
 		});
 	}).then(res => {
@@ -151,7 +151,7 @@ function queryKey() {
 		if (err === null) return;
 		os.alert({
 			type: 'error',
-			text: i18n.ts.signinFailed
+			text: i18n.ts.signinFailed,
 		});
 		signing = false;
 	});
@@ -165,8 +165,8 @@ function onSubmit() {
 			os.api('signin', {
 				username,
 				password,
-        'hcaptcha-response': hCaptchaResponse,
-        'g-recaptcha-response': reCaptchaResponse,
+				'hcaptcha-response': hCaptchaResponse,
+				'g-recaptcha-response': reCaptchaResponse,
 			}).then(res => {
 				totpLogin = true;
 				signing = false;
@@ -181,9 +181,9 @@ function onSubmit() {
 		os.api('signin', {
 			username,
 			password,
-      'hcaptcha-response': hCaptchaResponse,
+			'hcaptcha-response': hCaptchaResponse,
 			'g-recaptcha-response': reCaptchaResponse,
-			token: user && user.twoFactorEnabled ? token : undefined
+			token: user && user.twoFactorEnabled ? token : undefined,
 		}).then(res => {
 			emit('login', res);
 			onLogin(res);
@@ -197,7 +197,7 @@ function loginFailed(err) {
 			os.alert({
 				type: 'error',
 				title: i18n.ts.loginFailed,
-				text: i18n.ts.noSuchUser
+				text: i18n.ts.noSuchUser,
 			});
 			break;
 		}
@@ -226,7 +226,7 @@ function loginFailed(err) {
 			os.alert({
 				type: 'error',
 				title: i18n.ts.loginFailed,
-				text: JSON.stringify(err)
+				text: JSON.stringify(err),
 			});
 		}
 	}
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 9ef6efa1e5..ac03559bea 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -26,7 +26,7 @@
 	</transition>
 	<div v-if="tweetId" class="expandTweet">
 		<a @click="tweetExpanded = true">
-			<i class="fab fa-twitter"></i> {{ i18n.ts.expandTweet }}
+			<i class="ti ti-brand-twitter"></i> {{ i18n.ts.expandTweet }}
 		</a>
 	</div>
 </div>
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index b5b5145c65..6c07a87eeb 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -107,7 +107,7 @@ const menuDef = $computed(() => [{
 		to: '/about#federation',
 		active: currentPage?.route.name === 'federation',
 	}, {
-		icon: 'fas fa-clipboard-list',
+		icon: 'ti ti-clock-play',
 		text: i18n.ts.jobQueue,
 		to: '/admin/queue',
 		active: currentPage?.route.name === 'queue',
diff --git a/packages/client/src/pages/admin/integrations.vue b/packages/client/src/pages/admin/integrations.vue
index d02fc48076..9cc35baefd 100644
--- a/packages/client/src/pages/admin/integrations.vue
+++ b/packages/client/src/pages/admin/integrations.vue
@@ -3,19 +3,19 @@
 		<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>
+			<template #icon><i class="ti ti-brand-twitter"></i></template>
 			<template #label>Twitter</template>
 			<template #suffix>{{ enableTwitterIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
 			<XTwitter/>
 		</FormFolder>
 		<FormFolder class="_formBlock">
-			<template #icon><i class="fab fa-github"></i></template>
+			<template #icon><i class="ti ti-brand-github"></i></template>
 			<template #label>GitHub</template>
 			<template #suffix>{{ enableGithubIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
 			<XGithub/>
 		</FormFolder>
 		<FormFolder class="_formBlock">
-			<template #icon><i class="fab fa-discord"></i></template>
+			<template #icon><i class="ti ti-brand-discord"></i></template>
 			<template #label>Discord</template>
 			<template #suffix>{{ enableDiscordIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
 			<XDiscord/>
diff --git a/packages/client/src/pages/admin/queue.vue b/packages/client/src/pages/admin/queue.vue
index a6fc75aea8..7ffb8bb7ae 100644
--- a/packages/client/src/pages/admin/queue.vue
+++ b/packages/client/src/pages/admin/queue.vue
@@ -51,6 +51,6 @@ const headerTabs = $computed(() => [{
 
 definePageMetadata({
 	title: i18n.ts.jobQueue,
-	icon: 'fas fa-clipboard-list',
+	icon: 'ti ti-clock-play',
 });
 </script>
diff --git a/packages/client/src/pages/settings/integration.vue b/packages/client/src/pages/settings/integration.vue
index f3595e897b..557fe778e6 100644
--- a/packages/client/src/pages/settings/integration.vue
+++ b/packages/client/src/pages/settings/integration.vue
@@ -1,21 +1,21 @@
 <template>
 <div class="_formRoot">
 	<FormSection v-if="instance.enableTwitterIntegration">
-		<template #label><i class="fab fa-twitter"></i> Twitter</template>
+		<template #label><i class="ti ti-brand-twitter"></i> Twitter</template>
 		<p v-if="integrations.twitter">{{ i18n.ts.connectedTo }}: <a :href="`https://twitter.com/${integrations.twitter.screenName}`" rel="nofollow noopener" target="_blank">@{{ integrations.twitter.screenName }}</a></p>
 		<MkButton v-if="integrations.twitter" danger @click="disconnectTwitter">{{ i18n.ts.disconnectService }}</MkButton>
 		<MkButton v-else primary @click="connectTwitter">{{ i18n.ts.connectService }}</MkButton>
 	</FormSection>
 
 	<FormSection v-if="instance.enableDiscordIntegration">
-		<template #label><i class="fab fa-discord"></i> Discord</template>
+		<template #label><i class="ti ti-brand-discord"></i> Discord</template>
 		<p v-if="integrations.discord">{{ i18n.ts.connectedTo }}: <a :href="`https://discord.com/users/${integrations.discord.id}`" rel="nofollow noopener" target="_blank">@{{ integrations.discord.username }}#{{ integrations.discord.discriminator }}</a></p>
 		<MkButton v-if="integrations.discord" danger @click="disconnectDiscord">{{ i18n.ts.disconnectService }}</MkButton>
 		<MkButton v-else primary @click="connectDiscord">{{ i18n.ts.connectService }}</MkButton>
 	</FormSection>
 
 	<FormSection v-if="instance.enableGithubIntegration">
-		<template #label><i class="fab fa-github"></i> GitHub</template>
+		<template #label><i class="ti ti-brand-github"></i> GitHub</template>
 		<p v-if="integrations.github">{{ i18n.ts.connectedTo }}: <a :href="`https://github.com/${integrations.github.login}`" rel="nofollow noopener" target="_blank">@{{ integrations.github.login }}</a></p>
 		<MkButton v-if="integrations.github" danger @click="disconnectGithub">{{ i18n.ts.disconnectService }}</MkButton>
 		<MkButton v-else primary @click="connectGithub">{{ i18n.ts.connectService }}</MkButton>
-- 
cgit v1.2.3-freya


From 6b7a3435a56fc840f5f650e96c3e84cabb8a497c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 15:24:31 +0900
Subject: :art:

---
 packages/client/src/components/MkDrive.folder.vue   |  2 +-
 packages/client/src/components/MkDrive.vue          |  2 +-
 packages/client/src/components/MkEmojiPicker.vue    |  2 +-
 packages/client/src/components/MkFollowButton.vue   |  2 +-
 packages/client/src/components/MkKeyValue.vue       |  2 +-
 packages/client/src/components/MkSignup.vue         |  4 ++--
 packages/client/src/pages/admin/queue.vue           |  2 +-
 packages/client/src/pages/gallery/post.vue          |  4 ++--
 packages/client/src/pages/page.vue                  |  8 ++++----
 packages/client/src/pages/settings/navbar.vue       |  2 +-
 packages/client/src/pages/settings/profile.vue      |  6 +++---
 packages/client/src/pages/settings/theme.manage.vue |  2 +-
 packages/client/src/pages/settings/webhook.vue      |  2 +-
 packages/client/src/pages/user/home.vue             | 18 +++++++++---------
 packages/client/src/pages/user/index.photos.vue     |  2 +-
 15 files changed, 30 insertions(+), 30 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkDrive.folder.vue b/packages/client/src/components/MkDrive.folder.vue
index 78d1816522..8ba24e23f1 100644
--- a/packages/client/src/components/MkDrive.folder.vue
+++ b/packages/client/src/components/MkDrive.folder.vue
@@ -244,7 +244,7 @@ function setAsUploadFolder() {
 function onContextmenu(ev: MouseEvent) {
 	os.contextMenu([{
 		text: i18n.ts.openInWindow,
-		icon: 'fas fa-window-restore',
+		icon: 'ti ti-app-window',
 		action: () => {
 			os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), {
 				initialFolder: props.folder,
diff --git a/packages/client/src/components/MkDrive.vue b/packages/client/src/components/MkDrive.vue
index 83b16cfc60..bf83685991 100644
--- a/packages/client/src/components/MkDrive.vue
+++ b/packages/client/src/components/MkDrive.vue
@@ -607,7 +607,7 @@ function getMenu() {
 		action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
 	} : undefined, {
 		text: i18n.ts.createFolder,
-		icon: 'fas fa-folder-plus',
+		icon: 'ti ti-folder-plus',
 		action: () => { createFolder(); },
 	}];
 }
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index 3c0e7da7c9..3b446704b5 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -46,7 +46,7 @@
 			</section>
 
 			<section>
-				<header class="_acrylic"><i class="far fa-clock ti-fw"></i> {{ i18n.ts.recentUsed }}</header>
+				<header class="_acrylic"><i class="ti ti-clock ti-fw"></i> {{ i18n.ts.recentUsed }}</header>
 				<div class="body">
 					<button
 						v-for="emoji in recentlyUsedEmojis"
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index f76b84bc1d..ee256d9263 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -7,7 +7,7 @@
 >
 	<template v-if="!wait">
 		<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
-			<span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="fas fa-hourglass-half"></i>
+			<span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="ti ti-hourglass-empty"></i>
 		</template>
 		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
 			<!-- つまりリモートフォローの場合。 -->
diff --git a/packages/client/src/components/MkKeyValue.vue b/packages/client/src/components/MkKeyValue.vue
index 586f7a3f9d..ff69c79641 100644
--- a/packages/client/src/components/MkKeyValue.vue
+++ b/packages/client/src/components/MkKeyValue.vue
@@ -5,7 +5,7 @@
 	</div>
 	<div class="value">
 		<slot name="value"></slot>
-		<button v-if="copy" v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="far fa-copy"></i></button>
+		<button v-if="copy" v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="ti ti-copy"></i></button>
 	</div>
 </div>
 </template>
diff --git a/packages/client/src/components/MkSignup.vue b/packages/client/src/components/MkSignup.vue
index 67d3bb5c70..acb85438f0 100644
--- a/packages/client/src/components/MkSignup.vue
+++ b/packages/client/src/components/MkSignup.vue
@@ -5,7 +5,7 @@
 		<template #prefix><i class="ti ti-key"></i></template>
 	</MkInput>
 	<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:modelValue="onChangeUsername">
-		<template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
+		<template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="ti ti-question-circle"></i></div></template>
 		<template #prefix>@</template>
 		<template #suffix>@{{ host }}</template>
 		<template #caption>
@@ -19,7 +19,7 @@
 		</template>
 	</MkInput>
 	<MkInput v-if="instance.emailRequiredForSignup" v-model="email" class="_formBlock" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:modelValue="onChangeEmail">
-		<template #label>{{ i18n.ts.emailAddress }} <div v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" class="_button _help"><i class="far fa-question-circle"></i></div></template>
+		<template #label>{{ i18n.ts.emailAddress }} <div v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" class="_button _help"><i class="ti ti-question-circle"></i></div></template>
 		<template #prefix><i class="ti ti-mail"></i></template>
 		<template #caption>
 			<span v-if="emailState === 'wait'" style="color:#999"><MkLoading :em="true"/> {{ i18n.ts.checking }}</span>
diff --git a/packages/client/src/pages/admin/queue.vue b/packages/client/src/pages/admin/queue.vue
index 7ffb8bb7ae..8d19b49fc5 100644
--- a/packages/client/src/pages/admin/queue.vue
+++ b/packages/client/src/pages/admin/queue.vue
@@ -34,7 +34,7 @@ function clear() {
 
 const headerActions = $computed(() => [{
 	asFullButton: true,
-	icon: 'fas fa-up-right-from-square',
+	icon: 'ti ti-external-link',
 	text: i18n.ts.dashboard,
 	handler: () => {
 		window.open(config.url + '/queue', '_blank');
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 7a125cfaab..85ab1048be 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -18,8 +18,8 @@
 						</div>
 						<div class="actions">
 							<div class="like">
-								<MkButton v-if="post.isLiked" v-tooltip="i18n.ts._gallery.unlike" class="button" primary @click="unlike()"><i class="ti ti-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
-								<MkButton v-else v-tooltip="i18n.ts._gallery.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
+								<MkButton v-if="post.isLiked" v-tooltip="i18n.ts._gallery.unlike" class="button" primary @click="unlike()"><i class="ti ti-heart-off"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
+								<MkButton v-else v-tooltip="i18n.ts._gallery.like" class="button" @click="like()"><i class="ti ti-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
 							</div>
 							<div class="other">
 								<button v-if="$i && $i.id === post.user.id" v-tooltip="i18n.ts.edit" v-click-anime class="_button" @click="edit"><i class="ti ti-pencil ti-fw"></i></button>
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 5a37df64d3..09d92d72ab 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -18,8 +18,8 @@
 					</div>
 					<div class="actions">
 						<div class="like">
-							<MkButton v-if="page.isLiked" v-tooltip="i18n.ts._pages.unlike" class="button" primary @click="unlike()"><i class="ti ti-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
-							<MkButton v-else v-tooltip="i18n.ts._pages.like" class="button" @click="like()"><i class="far fa-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+							<MkButton v-if="page.isLiked" v-tooltip="i18n.ts._pages.unlike" class="button" primary @click="unlike()"><i class="ti ti-heart-off"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+							<MkButton v-else v-tooltip="i18n.ts._pages.like" class="button" @click="like()"><i class="ti ti-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
 						</div>
 						<div class="other">
 							<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ti ti-repeat ti-fw"></i></button>
@@ -44,8 +44,8 @@
 					</div>
 				</div>
 				<div class="footer">
-					<div><i class="far fa-clock"></i> {{ i18n.ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
-					<div v-if="page.createdAt != page.updatedAt"><i class="far fa-clock"></i> {{ i18n.ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
+					<div><i class="ti ti-clock"></i> {{ i18n.ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
+					<div v-if="page.createdAt != page.updatedAt"><i class="ti ti-clock"></i> {{ i18n.ts.updatedAt }}: <MkTime :time="page.updatedAt" mode="detail"/></div>
 				</div>
 				<MkAd :prefer="['horizontal', 'horizontal-big']"/>
 				<MkContainer :max-height="300" :foldable="true" class="other">
diff --git a/packages/client/src/pages/settings/navbar.vue b/packages/client/src/pages/settings/navbar.vue
index 8825134dc9..0b2776ec90 100644
--- a/packages/client/src/pages/settings/navbar.vue
+++ b/packages/client/src/pages/settings/navbar.vue
@@ -13,7 +13,7 @@
 		<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
 	</FormRadios>
 
-	<FormButton danger class="_formBlock" @click="reset()"><i class="fas fa-redo"></i> {{ i18n.ts.default }}</FormButton>
+	<FormButton danger class="_formBlock" @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
 </div>
 </template>
 
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index 49e15456cf..868068e010 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -19,12 +19,12 @@
 
 	<FormInput v-model="profile.location" manual-save class="_formBlock">
 		<template #label>{{ i18n.ts.location }}</template>
-		<template #prefix><i class="fas fa-map-marker-alt"></i></template>
+		<template #prefix><i class="ti ti-map-pin"></i></template>
 	</FormInput>
 
 	<FormInput v-model="profile.birthday" type="date" manual-save class="_formBlock">
 		<template #label>{{ i18n.ts.birthday }}</template>
-		<template #prefix><i class="fas fa-birthday-cake"></i></template>
+		<template #prefix><i class="ti ti-cake"></i></template>
 	</FormInput>
 
 	<FormSelect v-model="profile.lang" class="_formBlock">
@@ -34,7 +34,7 @@
 
 	<FormSlot class="_formBlock">
 		<FormFolder>
-			<template #icon><i class="fas fa-table-list"></i></template>
+			<template #icon><i class="ti ti-list"></i></template>
 			<template #label>{{ i18n.ts._profile.metadataEdit }}</template>
 
 			<div class="_formRoot">
diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue
index 5b33b50319..409f0af650 100644
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ b/packages/client/src/pages/settings/theme.manage.vue
@@ -73,6 +73,6 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._theme.manage,
-	icon: 'fas fa-folder-open',
+	icon: 'ti ti-tool',
 });
 </script>
diff --git a/packages/client/src/pages/settings/webhook.vue b/packages/client/src/pages/settings/webhook.vue
index 0e35be0f58..9be23ee4f0 100644
--- a/packages/client/src/pages/settings/webhook.vue
+++ b/packages/client/src/pages/settings/webhook.vue
@@ -12,7 +12,7 @@
 				<FormLink v-for="webhook in items" :key="webhook.id" :to="`/settings/webhook/edit/${webhook.id}`" class="_formBlock">
 					<template #icon>
 						<i v-if="webhook.active === false" class="ti ti-player-pause"></i>
-						<i v-else-if="webhook.latestStatus === null" class="far fa-circle"></i>
+						<i v-else-if="webhook.latestStatus === null" class="ti ti-circle"></i>
 						<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="ti ti-check" :style="{ color: 'var(--success)' }"></i>
 						<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--error)' }"></i>
 					</template>
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index d3859a2612..55d0aa89a6 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -17,10 +17,10 @@
 							<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="i18n.ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
-								<span v-if="!user.isAdmin && user.isModerator" :title="i18n.ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
+								<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
+								<span v-if="!user.isAdmin && user.isModerator" :title="i18n.ts.isModerator" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
 								<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
-								<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="fas fa-robot"></i></span>
+								<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
 							</div>
 						</div>
 						<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
@@ -34,10 +34,10 @@
 						<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="i18n.ts.isAdmin" style="color: var(--badge);"><i class="fas fa-bookmark"></i></span>
-							<span v-if="!user.isAdmin && user.isModerator" :title="i18n.ts.isModerator" style="color: var(--badge);"><i class="far fa-bookmark"></i></span>
+							<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
+							<span v-if="!user.isAdmin && user.isModerator" :title="i18n.ts.isModerator" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
 							<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
-							<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="fas fa-robot"></i></span>
+							<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
 						</div>
 					</div>
 					<div class="description">
@@ -46,15 +46,15 @@
 					</div>
 					<div class="fields system">
 						<dl v-if="user.location" class="field">
-							<dt class="name"><i class="fas fa-map-marker ti-fw"></i> {{ i18n.ts.location }}</dt>
+							<dt class="name"><i class="ti ti-map-pin ti-fw"></i> {{ i18n.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 ti-fw"></i> {{ i18n.ts.birthday }}</dt>
+							<dt class="name"><i class="ti ti-cake ti-fw"></i> {{ i18n.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 ti-fw"></i> {{ i18n.ts.registeredDate }}</dt>
+							<dt class="name"><i class="ti ti-calendar ti-fw"></i> {{ i18n.ts.registeredDate }}</dt>
 							<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
 						</dl>
 					</div>
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index fae2c005d8..b33979a79d 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :max-height="300" :foldable="true">
-	<template #header><i class="fas fa-image" style="margin-right: 0.5em;"></i>{{ $ts.images }}</template>
+	<template #header><i class="ti ti-photo" style="margin-right: 0.5em;"></i>{{ $ts.images }}</template>
 	<div class="ujigsodd">
 		<MkLoading v-if="fetching"/>
 		<div v-if="!fetching && images.length > 0" class="stream">
-- 
cgit v1.2.3-freya


From be1a2f142b057b2fd61e296034955ac31c331f78 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 16:05:48 +0900
Subject: :art:

---
 packages/client/src/ui/deck/column.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index b50879dbc8..bc5072564e 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -248,7 +248,7 @@ function onDrop(ev) {
 <style lang="scss" scoped>
 .dnpfarvg {
 	--root-margin: 10px;
-	--deckColumnHeaderHeight: 42px;
+	--deckColumnHeaderHeight: 40px;
 
 	height: 100%;
 	overflow: hidden;
-- 
cgit v1.2.3-freya


From cae4acfbd3f02209af952cdfb4b641c3f68b9eab Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 20 Dec 2022 20:41:12 +0900
Subject: 多分 #9374
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue
index 30e364c03d..a5e7856e27 100644
--- a/packages/client/src/components/MkSuperMenu.vue
+++ b/packages/client/src/components/MkSuperMenu.vue
@@ -141,7 +141,8 @@ export default defineComponent({
 						margin-right: 0;
 						margin-bottom: 6px;
 						font-size: 1.5em;
-						padding: 16px;
+						width: 32px;
+						height: 32px;
 						aspect-ratio: 1;
 						background: var(--panel);
 						border-radius: 100%;
-- 
cgit v1.2.3-freya


From c4603c7a96b49091c7184c13fecd614b84b95c02 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 21 Dec 2022 08:39:28 +0900
Subject: :art:

Fix #9374
---
 packages/client/src/components/MkDrive.file.vue            | 4 ++--
 packages/client/src/components/MkDrive.folder.vue          | 2 +-
 packages/client/src/components/MkDrive.vue                 | 2 +-
 packages/client/src/components/MkModalPageWindow.vue       | 2 +-
 packages/client/src/components/MkPageWindow.vue            | 8 ++------
 packages/client/src/components/MkPostFormAttaches.vue      | 4 ++--
 packages/client/src/components/MkSuperMenu.vue             | 6 +++---
 packages/client/src/components/MkWindow.vue                | 4 ++--
 packages/client/src/components/global/MkA.vue              | 2 +-
 packages/client/src/navbar.ts                              | 2 +-
 packages/client/src/pages/settings/index.vue               | 2 +-
 packages/client/src/pages/settings/preferences-backups.vue | 2 +-
 packages/client/src/ui/deck/widgets-column.vue             | 2 +-
 packages/client/src/ui/universal.vue                       | 4 ++--
 14 files changed, 21 insertions(+), 25 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue
index 4ac63d5b95..11bd9e9e3b 100644
--- a/packages/client/src/components/MkDrive.file.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -63,7 +63,7 @@ const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(pro
 function getMenu() {
 	return [{
 		text: i18n.ts.rename,
-		icon: 'ti ti-cursor-text',
+		icon: 'ti ti-forms',
 		action: rename,
 	}, {
 		text: props.file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
@@ -71,7 +71,7 @@ function getMenu() {
 		action: toggleSensitive,
 	}, {
 		text: i18n.ts.describeFile,
-		icon: 'ti ti-cursor-text',
+		icon: 'ti ti-forms',
 		action: describe,
 	}, null, {
 		text: i18n.ts.copyUrl,
diff --git a/packages/client/src/components/MkDrive.folder.vue b/packages/client/src/components/MkDrive.folder.vue
index 8ba24e23f1..04f1c940bc 100644
--- a/packages/client/src/components/MkDrive.folder.vue
+++ b/packages/client/src/components/MkDrive.folder.vue
@@ -253,7 +253,7 @@ function onContextmenu(ev: MouseEvent) {
 		},
 	}, null, {
 		text: i18n.ts.rename,
-		icon: 'ti ti-cursor-text',
+		icon: 'ti ti-forms',
 		action: rename,
 	}, null, {
 		text: i18n.ts.delete,
diff --git a/packages/client/src/components/MkDrive.vue b/packages/client/src/components/MkDrive.vue
index bf83685991..c91fc95ab1 100644
--- a/packages/client/src/components/MkDrive.vue
+++ b/packages/client/src/components/MkDrive.vue
@@ -599,7 +599,7 @@ function getMenu() {
 		type: 'label',
 	}, folder.value ? {
 		text: i18n.ts.renameFolder,
-		icon: 'ti ti-cursor-text',
+		icon: 'ti ti-forms',
 		action: () => { renameFolder(folder.value); },
 	} : undefined, folder.value ? {
 		text: i18n.ts.deleteFolder,
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index fb59e67211..ced8a7a714 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -68,7 +68,7 @@ const contextmenu = $computed(() => {
 		type: 'label',
 		text: path,
 	}, {
-		icon: 'ti ti-corner-right-down-double',
+		icon: 'ti ti-player-eject',
 		text: i18n.ts.showInPage,
 		action: expand,
 	}, {
diff --git a/packages/client/src/components/MkPageWindow.vue b/packages/client/src/components/MkPageWindow.vue
index a0615893f7..29d45558a7 100644
--- a/packages/client/src/components/MkPageWindow.vue
+++ b/packages/client/src/components/MkPageWindow.vue
@@ -66,7 +66,7 @@ const buttonsLeft = $computed(() => {
 });
 const buttonsRight = $computed(() => {
 	const buttons = [{
-		icon: 'ti ti-corner-right-down-double',
+		icon: 'ti ti-player-eject',
 		title: i18n.ts.showInPage,
 		onClick: expand,
 	}];
@@ -86,7 +86,7 @@ provide('shouldOmitHeaderTitle', true);
 provide('shouldHeaderThin', true);
 
 const contextmenu = $computed(() => ([{
-	icon: 'ti ti-corner-right-down-double',
+	icon: 'ti ti-player-eject',
 	text: i18n.ts.showInPage,
 	action: expand,
 }, {
@@ -108,10 +108,6 @@ const contextmenu = $computed(() => ([{
 	},
 }]));
 
-function menu(ev) {
-	os.popupMenu(contextmenu, ev.currentTarget ?? ev.target);
-}
-
 function back() {
 	history.pop();
 	router.replace(history[history.length - 1].path, history[history.length - 1].key);
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index b533786d36..9eeffa55dd 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -113,7 +113,7 @@ export default defineComponent({
 			if (this.menu) return;
 			this.menu = os.popupMenu([{
 				text: this.$ts.renameFile,
-				icon: 'ti ti-cursor-text',
+				icon: 'ti ti-forms',
 				action: () => { this.rename(file); },
 			}, {
 				text: file.isSensitive ? this.$ts.unmarkAsSensitive : this.$ts.markAsSensitive,
@@ -121,7 +121,7 @@ export default defineComponent({
 				action: () => { this.toggleSensitive(file); },
 			}, {
 				text: this.$ts.describeFile,
-				icon: 'ti ti-cursor-text',
+				icon: 'ti ti-forms',
 				action: () => { this.describe(file); },
 			}, {
 				text: this.$ts.attachCancel,
diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue
index a5e7856e27..e79794aea4 100644
--- a/packages/client/src/components/MkSuperMenu.vue
+++ b/packages/client/src/components/MkSuperMenu.vue
@@ -116,7 +116,7 @@ export default defineComponent({
 
 			> .items {
 				display: grid;
-				grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+				grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
 				grid-gap: 16px;
 				padding: 0 16px;
 
@@ -141,8 +141,8 @@ export default defineComponent({
 						margin-right: 0;
 						margin-bottom: 6px;
 						font-size: 1.5em;
-						width: 32px;
-						height: 32px;
+						width: 54px;
+						height: 54px;
 						aspect-ratio: 1;
 						background: var(--panel);
 						border-radius: 100%;
diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
index d9c0035a86..629c105810 100644
--- a/packages/client/src/components/MkWindow.vue
+++ b/packages/client/src/components/MkWindow.vue
@@ -11,8 +11,8 @@
 				</span>
 				<span class="right">
 					<button v-for="button in buttonsRight" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
-					<button v-if="canResize && maximized" v-tooltip="i18n.ts.windowRestore" class="button _button" @click="unMaximize()"><i class="ti ti-app-window"></i></button>
-					<button v-else-if="canResize && !maximized" v-tooltip="i18n.ts.windowMaximize" class="button _button" @click="maximize()"><i class="ti ti-arrows-maximize"></i></button>
+					<button v-if="canResize && maximized" v-tooltip="i18n.ts.windowRestore" class="button _button" @click="unMaximize()"><i class="ti ti-picture-in-picture"></i></button>
+					<button v-else-if="canResize && !maximized" v-tooltip="i18n.ts.windowMaximize" class="button _button" @click="maximize()"><i class="ti ti-rectangle"></i></button>
 					<button v-if="closeButton" v-tooltip="i18n.ts.close" class="button _button" @click="close()"><i class="ti ti-x"></i></button>
 				</span>
 			</div>
diff --git a/packages/client/src/components/global/MkA.vue b/packages/client/src/components/global/MkA.vue
index a686d1bdbe..5a0ba0d8d3 100644
--- a/packages/client/src/components/global/MkA.vue
+++ b/packages/client/src/components/global/MkA.vue
@@ -47,7 +47,7 @@ function onContextmenu(ev) {
 			os.pageWindow(props.to);
 		},
 	}, {
-		icon: 'ti ti-corner-right-down-double',
+		icon: 'ti ti-player-eject',
 		text: i18n.ts.showInPage,
 		action: () => {
 			router.push(props.to, 'forcePage');
diff --git a/packages/client/src/navbar.ts b/packages/client/src/navbar.ts
index e1f64ac05f..6b27b42cf7 100644
--- a/packages/client/src/navbar.ts
+++ b/packages/client/src/navbar.ts
@@ -99,7 +99,7 @@ export const navbarItemDef = reactive({
 	},
 	ui: {
 		title: 'switchUi',
-		icon: 'ti ti-columns',
+		icon: 'ti ti-devices',
 		action: (ev) => {
 			os.popupMenu([{
 				text: i18n.ts.default,
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 5c9d8a8efd..01436cd554 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -186,7 +186,7 @@ const menuDef = computed(() => [{
 		},
 	}, {
 		type: 'button',
-		icon: 'ti ti-logout',
+		icon: 'ti ti-power',
 		text: i18n.ts.logout,
 		action: async () => {
 			const { canceled } = await os.confirm({
diff --git a/packages/client/src/pages/settings/preferences-backups.vue b/packages/client/src/pages/settings/preferences-backups.vue
index 379f65beff..d2a2dc01ca 100644
--- a/packages/client/src/pages/settings/preferences-backups.vue
+++ b/packages/client/src/pages/settings/preferences-backups.vue
@@ -386,7 +386,7 @@ function menu(ev: MouseEvent, profileId: string) {
 		download: `${profiles[profileId].name}.json`,
 	}, null, {
 		text: ts.rename,
-		icon: 'ti ti-cursor-text',
+		icon: 'ti ti-forms',
 		action: () => rename(profileId),
 	}, {
 		text: ts._preferencesBackups.save,
diff --git a/packages/client/src/ui/deck/widgets-column.vue b/packages/client/src/ui/deck/widgets-column.vue
index 0bcdc4f768..fc61d18ff6 100644
--- a/packages/client/src/ui/deck/widgets-column.vue
+++ b/packages/client/src/ui/deck/widgets-column.vue
@@ -1,6 +1,6 @@
 <template>
 <XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="ti ti-layout-list" style="margin-right: 8px;"></i>{{ column.name }}</template>
+	<template #header><i class="ti ti-apps" style="margin-right: 8px;"></i>{{ column.name }}</template>
 
 	<div class="wtdtxvec">
 		<div v-if="!(column.widgets && column.widgets.length > 0) && !edit" class="intro">{{ i18n.ts._deck.widgetsIntroduction }}</div>
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 778ad53568..b91bf476e8 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -16,13 +16,13 @@
 		<XWidgets @mounted="attachSticky"/>
 	</div>
 
-	<button v-if="!isDesktop && !isMobile" class="widgetButton _button" @click="widgetsShowing = true"><i class="ti ti-layout-list"></i></button>
+	<button v-if="!isDesktop && !isMobile" class="widgetButton _button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
 
 	<div v-if="isMobile" class="buttons">
 		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="ti ti-menu-2"></i><span v-if="menuIndicated" class="indicator"><i class="_indicatorCircle"></i></span></button>
 		<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i class="ti ti-home"></i></button>
 		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="_indicatorCircle"></i></span></button>
-		<button class="button widget _button" @click="widgetsShowing = true"><i class="ti ti-layout-list"></i></button>
+		<button class="button widget _button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
 		<button class="button post _button" @click="os.post()"><i class="ti ti-pencil"></i></button>
 	</div>
 
-- 
cgit v1.2.3-freya


From 60b3d73cc998b1ed8606ef19a7c992f729a731d8 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 21 Dec 2022 11:04:49 +0900
Subject: use sortablejs-vue3 instead of vuedraggable for more stability

---
 packages/client/package.json                       |   5 +-
 packages/client/src/components/MkPostForm.vue      |   6 +-
 .../client/src/components/MkPostFormAttaches.vue   | 208 ++++++++++-----------
 packages/client/src/components/MkWidgets.vue       |  26 +--
 .../src/pages/page-editor/page-editor.blocks.vue   |  20 +-
 .../client/src/pages/page-editor/page-editor.vue   |  40 ++--
 packages/client/src/pages/settings/reaction.vue    |  13 +-
 yarn.lock                                          |  37 ++--
 8 files changed, 176 insertions(+), 179 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/package.json b/packages/client/package.json
index 87ef6e3638..c5fbf80317 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -46,6 +46,8 @@
 		"s-age": "1.1.2",
 		"sass": "1.57.0",
 		"seedrandom": "3.0.5",
+		"sortablejs": "^1.15.0",
+		"sortablejs-vue3": "^1.2.3",
 		"strict-event-emitter-types": "2.0.0",
 		"stringz": "2.1.0",
 		"syuilo-password-strength": "0.0.1",
@@ -61,8 +63,7 @@
 		"vanilla-tilt": "1.8.0",
 		"vite": "4.0.2",
 		"vue": "3.2.45",
-		"vue-prism-editor": "2.0.0-alpha.2",
-		"vuedraggable": "4.0.1"
+		"vue-prism-editor": "2.0.0-alpha.2"
 	},
 	"devDependencies": {
 		"@types/escape-regexp": "0.0.1",
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index a6215038f7..6911899799 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -43,7 +43,7 @@
 		<input v-show="useCw" ref="cwInputEl" v-model="cw" class="cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
 		<textarea ref="textareaEl" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
 		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" class="hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
-		<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
+		<XPostFormAttaches v-model="files" class="attaches" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
 		<XPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
 		<XNotePreview v-if="showPreview" class="preview" :text="text"/>
 		<footer>
@@ -370,10 +370,6 @@ function detachFile(id) {
 	files = files.filter(x => x.id !== id);
 }
 
-function updateFiles(_files) {
-	files = _files;
-}
-
 function updateFileSensitive(file, sensitive) {
 	files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
 }
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index 9eeffa55dd..44833db460 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -1,6 +1,6 @@
 <template>
-<div v-show="files.length != 0" class="skeikyzd">
-	<XDraggable v-model="_files" class="files" item-key="id" animation="150" delay="100" delay-on-touch-only="true">
+<div v-show="props.modelValue.length != 0" class="skeikyzd">
+	<Sortable :list="props.modelValue" class="files" item-key="id" :options="{ animation: 150, delay: 100, delayOnTouchOnly: true }" @end="onSorted">
 		<template #item="{element}">
 			<div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
 				<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
@@ -9,128 +9,116 @@
 				</div>
 			</div>
 		</template>
-	</XDraggable>
-	<p class="remain">{{ 16 - files.length }}/16</p>
+	</Sortable>
+	<p class="remain">{{ 16 - props.modelValue.length }}/16</p>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os';
+import { deepClone } from '@/scripts/clone';
+import { i18n } from '@/i18n';
+
+const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable));
+
+const props = defineProps<{
+	modelValue: any[];
+	detachMediaFn: () => void;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', value: any[]): void;
+	(ev: 'detach'): void;
+	(ev: 'changeSensitive'): void;
+	(ev: 'changeName'): void;
+}>();
+
+let menuShowing = false;
+
+function onSorted(event) {
+	const items = deepClone(props.modelValue);
+	const item = items.splice(event.oldIndex, 1)[0];
+	items.splice(event.newIndex, 0, item);
+	emit('update:modelValue', items);
+}
 
-export default defineComponent({
-	components: {
-		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
-		MkDriveFileThumbnail,
-	},
+function detachMedia(id) {
+	if (props.detachMediaFn) {
+		props.detachMediaFn(id);
+	} else {
+		emit('detach', id);
+	}
+}
 
-	props: {
-		files: {
-			type: Array,
-			required: true,
-		},
-		detachMediaFn: {
-			type: Function,
-			required: false,
-		},
-	},
-
-	emits: ['updated', 'detach', 'changeSensitive', 'changeName'],
-
-	data() {
-		return {
-			menu: null as Promise<null> | null,
-		};
-	},
-
-	computed: {
-		_files: {
-			get() {
-				return this.files;
-			},
-			set(value) {
-				this.$emit('updated', value);
-			},
-		},
-	},
-
-	methods: {
-		detachMedia(id) {
-			if (this.detachMediaFn) {
-				this.detachMediaFn(id);
-			} else {
-				this.$emit('detach', id);
-			}
-		},
-		toggleSensitive(file) {
-			os.api('drive/files/update', {
-				fileId: file.id,
-				isSensitive: !file.isSensitive,
-			}).then(() => {
-				this.$emit('changeSensitive', file, !file.isSensitive);
-			});
+function toggleSensitive(file) {
+	os.api('drive/files/update', {
+		fileId: file.id,
+		isSensitive: !file.isSensitive,
+	}).then(() => {
+		emit('changeSensitive', file, !file.isSensitive);
+	});
+}
+async function rename(file) {
+	const { canceled, result } = await os.inputText({
+		title: i18n.ts.enterFileName,
+		default: file.name,
+		allowEmpty: false,
+	});
+	if (canceled) return;
+	os.api('drive/files/update', {
+		fileId: file.id,
+		name: result,
+	}).then(() => {
+		emit('changeName', file, result);
+		file.name = result;
+	});
+}
+
+async function describe(file) {
+	os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
+		title: i18n.ts.describeFile,
+		input: {
+			placeholder: i18n.ts.inputNewDescription,
+			default: file.comment !== null ? file.comment : '',
 		},
-		async rename(file) {
-			const { canceled, result } = await os.inputText({
-				title: this.$ts.enterFileName,
-				default: file.name,
-				allowEmpty: false,
-			});
-			if (canceled) return;
+		image: file,
+	}, {
+		done: result => {
+			if (!result || result.canceled) return;
+			let comment = result.result.length === 0 ? null : result.result;
 			os.api('drive/files/update', {
 				fileId: file.id,
-				name: result,
+				comment: comment,
 			}).then(() => {
-				this.$emit('changeName', file, result);
-				file.name = result;
+				file.comment = comment;
 			});
 		},
+	}, 'closed');
+}
 
-		async describe(file) {
-			os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
-				title: this.$ts.describeFile,
-				input: {
-					placeholder: this.$ts.inputNewDescription,
-					default: file.comment !== null ? file.comment : '',
-				},
-				image: file,
-			}, {
-				done: result => {
-					if (!result || result.canceled) return;
-					let comment = result.result.length === 0 ? null : result.result;
-					os.api('drive/files/update', {
-						fileId: file.id,
-						comment: comment,
-					}).then(() => {
-						file.comment = comment;
-					});
-				},
-			}, 'closed');
-		},
-
-		showFileMenu(file, ev: MouseEvent) {
-			if (this.menu) return;
-			this.menu = os.popupMenu([{
-				text: this.$ts.renameFile,
-				icon: 'ti ti-forms',
-				action: () => { this.rename(file); },
-			}, {
-				text: file.isSensitive ? this.$ts.unmarkAsSensitive : this.$ts.markAsSensitive,
-				icon: file.isSensitive ? 'ti ti-eye-off' : 'ti ti-eye',
-				action: () => { this.toggleSensitive(file); },
-			}, {
-				text: this.$ts.describeFile,
-				icon: 'ti ti-forms',
-				action: () => { this.describe(file); },
-			}, {
-				text: this.$ts.attachCancel,
-				icon: 'ti ti-circle-x',
-				action: () => { this.detachMedia(file.id); },
-			}], ev.currentTarget ?? ev.target).then(() => this.menu = null);
-		},
-	},
-});
+function showFileMenu(file, ev: MouseEvent) {
+	if (menuShowing) return;
+	os.popupMenu([{
+		text: i18n.ts.renameFile,
+		icon: 'ti ti-forms',
+		action: () => { rename(file); },
+	}, {
+		text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
+		icon: file.isSensitive ? 'ti ti-eye-off' : 'ti ti-eye',
+		action: () => { toggleSensitive(file); },
+	}, {
+		text: i18n.ts.describeFile,
+		icon: 'ti ti-forms',
+		action: () => { describe(file); },
+	}, {
+		text: i18n.ts.attachCancel,
+		icon: 'ti ti-circle-x',
+		action: () => { detachMedia(file.id); },
+	}], ev.currentTarget ?? ev.target).then(() => menuShowing = false);
+	menuShowing = true;
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index dd2a2aa89a..17ffc8eb10 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -9,11 +9,11 @@
 			<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
 			<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
 		</header>
-		<XDraggable
-			v-model="widgets_"
+		<Sortable
+			:list="props.widgets"
 			item-key="id"
-			handle=".handle"
-			animation="150"
+			:options="{ handle: '.handle', animation: 150 }"
+			@end="onSorted"
 		>
 			<template #item="{element}">
 				<div class="customize-container">
@@ -24,7 +24,7 @@
 					</div>
 				</div>
 			</template>
-		</XDraggable>
+		</Sortable>
 	</template>
 	<component :is="`mkw-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" class="widget" :widget="widget" @updateProps="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/>
 </div>
@@ -38,8 +38,9 @@ import MkButton from '@/components/MkButton.vue';
 import { widgets as widgetDefs } from '@/widgets';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
+import { deepClone } from '@/scripts/clone';
 
-const XDraggable = defineAsyncComponent(() => import('vuedraggable'));
+const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable));
 
 type Widget = {
 	name: string;
@@ -82,12 +83,13 @@ const removeWidget = (widget) => {
 const updateWidget = (id, data) => {
 	emit('updateWidget', { id, data });
 };
-const widgets_ = computed({
-	get: () => props.widgets,
-	set: (value) => {
-		emit('updateWidgets', value);
-	},
-});
+
+function onSorted(event) {
+	const items = deepClone(props.widgets);
+	const item = items.splice(event.oldIndex, 1)[0];
+	items.splice(event.newIndex, 0, item);
+	emit('updateWidgets', items);
+}
 
 function onContextmenu(widget: Widget, ev: MouseEvent) {
 	const isLink = (el: HTMLElement) => {
diff --git a/packages/client/src/pages/page-editor/page-editor.blocks.vue b/packages/client/src/pages/page-editor/page-editor.blocks.vue
index dc363fe251..980e9d0e3c 100644
--- a/packages/client/src/pages/page-editor/page-editor.blocks.vue
+++ b/packages/client/src/pages/page-editor/page-editor.blocks.vue
@@ -1,9 +1,9 @@
 <template>
-<XDraggable v-model="blocks" tag="div" item-key="id" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
+<Sortable :list="blocks" tag="div" item-key="id" :options="{ handle: '.drag-handle', group: { name: 'blocks' }, animation: 150, swapThreshold: 0.5 }">
 	<template #item="{element}">
 		<component :is="'x-' + element.type" :value="element" :hpml="hpml" @update:value="updateItem" @remove="() => removeItem(element)"/>
 	</template>
-</XDraggable>
+</Sortable>
 </template>
 
 <script lang="ts">
@@ -27,14 +27,14 @@ import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		XDraggable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
-		XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote
+		Sortable: defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable)),
+		XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote,
 	},
 
 	props: {
 		modelValue: {
 			type: Array,
-			required: true
+			required: true,
 		},
 		hpml: {
 			required: true,
@@ -50,8 +50,8 @@ export default defineComponent({
 			},
 			set(value) {
 				this.$emit('update:modelValue', value);
-			}
-		}
+			},
+		},
 	},
 
 	methods: {
@@ -60,7 +60,7 @@ export default defineComponent({
 			const newValue = [
 				...this.blocks.slice(0, i),
 				v,
-				...this.blocks.slice(i + 1)
+				...this.blocks.slice(i + 1),
 			];
 			this.$emit('update:modelValue', newValue);
 		},
@@ -69,10 +69,10 @@ export default defineComponent({
 			const i = this.blocks.findIndex(x => x.id === el.id);
 			const newValue = [
 				...this.blocks.slice(0, i),
-				...this.blocks.slice(i + 1)
+				...this.blocks.slice(i + 1),
 			];
 			this.$emit('update:modelValue', newValue);
 		},
-	}
+	},
 });
 </script>
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 1230119c63..f8f5d9f6b0 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -54,7 +54,7 @@
 
 		<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">
+				<Sortable 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"
@@ -66,7 +66,7 @@
 							@remove="() => removeVariable(element)"
 						/>
 					</template>
-				</XDraggable>
+				</Sortable>
 
 				<MkButton v-if="!readonly" class="add" @click="addVariable()"><i class="ti ti-plus"></i></MkButton>
 			</div>
@@ -107,7 +107,7 @@ import { mainRouter } from '@/router';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { $i } from '@/account';
-const XDraggable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
+const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.default));
 
 const props = defineProps<{
 	initPageId?: string;
@@ -186,24 +186,24 @@ function save() {
 	if (pageId) {
 		options.pageId = pageId;
 		os.api('pages/update', options)
-		.then(page => {
-			currentName = name.trim();
-			os.alert({
-				type: 'success',
-				text: i18n.ts._pages.updated,
-			});
-		}).catch(onError);
+			.then(page => {
+				currentName = name.trim();
+				os.alert({
+					type: 'success',
+					text: i18n.ts._pages.updated,
+				});
+			}).catch(onError);
 	} else {
 		os.api('pages/create', options)
-		.then(created => {
-			pageId = created.id;
-			currentName = name.trim();
-			os.alert({
-				type: 'success',
-				text: i18n.ts._pages.created,
-			});
-			mainRouter.push(`/pages/edit/${pageId}`);
-		}).catch(onError);
+			.then(created => {
+				pageId = created.id;
+				currentName = name.trim();
+				os.alert({
+					type: 'success',
+					text: i18n.ts._pages.created,
+				});
+				mainRouter.push(`/pages/edit/${pageId}`);
+			}).catch(onError);
 	}
 }
 
@@ -438,7 +438,7 @@ definePageMetadata(computed(() => {
 	return {
 		title: title,
 		icon: 'ti ti-pencil',
-		};
+	};
 }));
 </script>
 
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index 0dbe185504..2807684adb 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -3,7 +3,7 @@
 	<FromSlot class="_formBlock">
 		<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
 		<div v-panel style="border-radius: 6px;">
-			<XDraggable v-model="reactions" class="zoaiodol" :item-key="item => item" animation="150" delay="100" delay-on-touch-only="true">
+			<Sortable :list="reactions" class="zoaiodol" :item-key="item => item" :options="{ animation: 150, delay: 100, delayOnTouchOnly: true }" @end="onSorted">
 				<template #item="{element}">
 					<button class="_button item" @click="remove(element, $event)">
 						<MkEmoji :emoji="element" :normal="true"/>
@@ -12,7 +12,9 @@
 				<template #footer>
 					<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
 				</template>
-			</XDraggable>
+			</Sortable>
+			<!-- TODO: https://github.com/MaxLeiter/sortablejs-vue3/issues/52 が実装されたら消す -->
+			<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
 		</div>
 		<template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template>
 	</FromSlot>
@@ -55,7 +57,7 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, watch } from 'vue';
-import XDraggable from 'vuedraggable';
+import { Sortable } from 'sortablejs-vue3';
 import FormInput from '@/components/form/input.vue';
 import FormRadios from '@/components/form/radios.vue';
 import FromSlot from '@/components/form/slot.vue';
@@ -75,6 +77,11 @@ const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPic
 const reactionPickerHeight = $computed(defaultStore.makeGetterSetter('reactionPickerHeight'));
 const reactionPickerUseDrawerForMobile = $computed(defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'));
 
+function onSorted(event) {
+	const item = reactions.splice(event.oldIndex, 1)[0];
+	reactions.splice(event.newIndex, 0, item);
+}
+
 function save() {
 	defaultStore.set('reactions', reactions);
 }
diff --git a/yarn.lock b/yarn.lock
index eb021a707c..ba1514ad04 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5193,6 +5193,8 @@ __metadata:
     s-age: 1.1.2
     sass: 1.57.0
     seedrandom: 3.0.5
+    sortablejs: ^1.15.0
+    sortablejs-vue3: ^1.2.3
     start-server-and-test: 1.15.2
     strict-event-emitter-types: 2.0.0
     stringz: 2.1.0
@@ -5212,7 +5214,6 @@ __metadata:
     vue-eslint-parser: ^9.1.0
     vue-prism-editor: 2.0.0-alpha.2
     vue-tsc: ^1.0.14
-    vuedraggable: 4.0.1
   languageName: unknown
   linkType: soft
 
@@ -15315,10 +15316,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sortablejs@npm:1.10.2":
-  version: 1.10.2
-  resolution: "sortablejs@npm:1.10.2"
-  checksum: 37f8d47a9702b93c38077c5e0af90174dcf8e95cf96fe61a722033003eb293bdf3832e4a943f281eaedc433e24cd7d5a48a408706a71a21e75bc11ced0b358da
+"sortablejs-vue3@npm:^1.2.3":
+  version: 1.2.3
+  resolution: "sortablejs-vue3@npm:1.2.3"
+  dependencies:
+    sortablejs: ^1.15.0
+    vue: ^3.2.37
+  peerDependencies:
+    sortablejs: ^1.15.0
+    vue: ^3.2.25
+  checksum: 1cf069db4e950a9b447d98d6f4d233082f84b43ac88735e3aab07f2dcebee99026425ee5fc69b04893fe2bb9040fa8cda088a57205f7c46453043d32764b5b36
+  languageName: node
+  linkType: hard
+
+"sortablejs@npm:^1.15.0":
+  version: 1.15.0
+  resolution: "sortablejs@npm:1.15.0"
+  checksum: bb82223a663484640d317cad510ac987f26b7a443631040407224de1be069afcc6c39048b6d8527f10f269e33595e8128d7de2fac23517c8260470f77f932d55
   languageName: node
   linkType: hard
 
@@ -17163,7 +17177,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue@npm:3.2.45":
+"vue@npm:3.2.45, vue@npm:^3.2.37":
   version: 3.2.45
   resolution: "vue@npm:3.2.45"
   dependencies:
@@ -17176,17 +17190,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vuedraggable@npm:4.0.1":
-  version: 4.0.1
-  resolution: "vuedraggable@npm:4.0.1"
-  dependencies:
-    sortablejs: 1.10.2
-  peerDependencies:
-    vue: ^3.0.1
-  checksum: 039e5d38560144299be3689270728639d041737b487cbb7dfec09b6c372b48804031785f9b40e6e14da0d213315b98ddc005713cc60a749cf98028e0c16fd866
-  languageName: node
-  linkType: hard
-
 "w3c-xmlserializer@npm:^4.0.0":
   version: 4.0.0
   resolution: "w3c-xmlserializer@npm:4.0.0"
-- 
cgit v1.2.3-freya


From 5cac199710e5bd9bb65a6c96b94d5c8bd6bff43a Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 21 Dec 2022 15:10:21 +0900
Subject: revert: use sortablejs-vue3 instead of vuedraggable for more
 stability

---
 packages/client/package.json                       |  5 ++-
 .../client/src/components/MkPostFormAttaches.vue   | 13 ++------
 packages/client/src/components/MkWidgets.vue       | 16 +++-------
 .../src/pages/page-editor/page-editor.blocks.vue   |  2 +-
 .../client/src/pages/page-editor/page-editor.vue   |  2 +-
 packages/client/src/pages/settings/reaction.vue    | 11 ++-----
 yarn.lock                                          | 37 ++++++++++------------
 7 files changed, 31 insertions(+), 55 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/package.json b/packages/client/package.json
index c5fbf80317..5b596f73d0 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -46,8 +46,6 @@
 		"s-age": "1.1.2",
 		"sass": "1.57.0",
 		"seedrandom": "3.0.5",
-		"sortablejs": "^1.15.0",
-		"sortablejs-vue3": "^1.2.3",
 		"strict-event-emitter-types": "2.0.0",
 		"stringz": "2.1.0",
 		"syuilo-password-strength": "0.0.1",
@@ -63,7 +61,8 @@
 		"vanilla-tilt": "1.8.0",
 		"vite": "4.0.2",
 		"vue": "3.2.45",
-		"vue-prism-editor": "2.0.0-alpha.2"
+		"vue-prism-editor": "2.0.0-alpha.2",
+		"vuedraggable": "next"
 	},
 	"devDependencies": {
 		"@types/escape-regexp": "0.0.1",
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index 44833db460..955d835f25 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-show="props.modelValue.length != 0" class="skeikyzd">
-	<Sortable :list="props.modelValue" class="files" item-key="id" :options="{ animation: 150, delay: 100, delayOnTouchOnly: true }" @end="onSorted">
+	<Sortable :model-value="props.modelValue" class="files" item-key="id" :animation="150" :delay="100" :delay-on-touch-only="true" @update:modelValue="v => emit('update:modelValue', v)">
 		<template #item="{element}">
 			<div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
 				<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
@@ -15,13 +15,13 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
+import { defineAsyncComponent, watch } from 'vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os';
 import { deepClone } from '@/scripts/clone';
 import { i18n } from '@/i18n';
 
-const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable));
+const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
 const props = defineProps<{
 	modelValue: any[];
@@ -37,13 +37,6 @@ const emit = defineEmits<{
 
 let menuShowing = false;
 
-function onSorted(event) {
-	const items = deepClone(props.modelValue);
-	const item = items.splice(event.oldIndex, 1)[0];
-	items.splice(event.newIndex, 0, item);
-	emit('update:modelValue', items);
-}
-
 function detachMedia(id) {
 	if (props.detachMediaFn) {
 		props.detachMediaFn(id);
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index 17ffc8eb10..5299b581b5 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -10,10 +10,11 @@
 			<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
 		</header>
 		<Sortable
-			:list="props.widgets"
+			:model-value="props.widgets"
 			item-key="id"
-			:options="{ handle: '.handle', animation: 150 }"
-			@end="onSorted"
+			handle=".handle"
+			:animation="150"
+			@update:modelValue="v => emit('updateWidgets', v)"
 		>
 			<template #item="{element}">
 				<div class="customize-container">
@@ -40,7 +41,7 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { deepClone } from '@/scripts/clone';
 
-const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable));
+const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
 type Widget = {
 	name: string;
@@ -84,13 +85,6 @@ const updateWidget = (id, data) => {
 	emit('updateWidget', { id, data });
 };
 
-function onSorted(event) {
-	const items = deepClone(props.widgets);
-	const item = items.splice(event.oldIndex, 1)[0];
-	items.splice(event.newIndex, 0, item);
-	emit('updateWidgets', items);
-}
-
 function onContextmenu(widget: Widget, ev: MouseEvent) {
 	const isLink = (el: HTMLElement) => {
 		if (el.tagName === 'A') return true;
diff --git a/packages/client/src/pages/page-editor/page-editor.blocks.vue b/packages/client/src/pages/page-editor/page-editor.blocks.vue
index 980e9d0e3c..bc983cd2c8 100644
--- a/packages/client/src/pages/page-editor/page-editor.blocks.vue
+++ b/packages/client/src/pages/page-editor/page-editor.blocks.vue
@@ -27,7 +27,7 @@ import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		Sortable: defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.Sortable)),
+		Sortable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
 		XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote,
 	},
 
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index f8f5d9f6b0..f094de0cbc 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -107,7 +107,7 @@ import { mainRouter } from '@/router';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { $i } from '@/account';
-const Sortable = defineAsyncComponent(() => import('sortablejs-vue3').then(x => x.default));
+const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
 const props = defineProps<{
 	initPageId?: string;
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index 2807684adb..2748cd7d4e 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -3,7 +3,7 @@
 	<FromSlot class="_formBlock">
 		<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
 		<div v-panel style="border-radius: 6px;">
-			<Sortable :list="reactions" class="zoaiodol" :item-key="item => item" :options="{ animation: 150, delay: 100, delayOnTouchOnly: true }" @end="onSorted">
+			<Sortable v-model="reactions" class="zoaiodol" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
 				<template #item="{element}">
 					<button class="_button item" @click="remove(element, $event)">
 						<MkEmoji :emoji="element" :normal="true"/>
@@ -13,8 +13,6 @@
 					<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
 				</template>
 			</Sortable>
-			<!-- TODO: https://github.com/MaxLeiter/sortablejs-vue3/issues/52 が実装されたら消す -->
-			<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
 		</div>
 		<template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template>
 	</FromSlot>
@@ -57,7 +55,7 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, watch } from 'vue';
-import { Sortable } from 'sortablejs-vue3';
+import Sortable from 'vuedraggable';
 import FormInput from '@/components/form/input.vue';
 import FormRadios from '@/components/form/radios.vue';
 import FromSlot from '@/components/form/slot.vue';
@@ -77,11 +75,6 @@ const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPic
 const reactionPickerHeight = $computed(defaultStore.makeGetterSetter('reactionPickerHeight'));
 const reactionPickerUseDrawerForMobile = $computed(defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'));
 
-function onSorted(event) {
-	const item = reactions.splice(event.oldIndex, 1)[0];
-	reactions.splice(event.newIndex, 0, item);
-}
-
 function save() {
 	defaultStore.set('reactions', reactions);
 }
diff --git a/yarn.lock b/yarn.lock
index ba1514ad04..d0c9f81c51 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5193,8 +5193,6 @@ __metadata:
     s-age: 1.1.2
     sass: 1.57.0
     seedrandom: 3.0.5
-    sortablejs: ^1.15.0
-    sortablejs-vue3: ^1.2.3
     start-server-and-test: 1.15.2
     strict-event-emitter-types: 2.0.0
     stringz: 2.1.0
@@ -5214,6 +5212,7 @@ __metadata:
     vue-eslint-parser: ^9.1.0
     vue-prism-editor: 2.0.0-alpha.2
     vue-tsc: ^1.0.14
+    vuedraggable: next
   languageName: unknown
   linkType: soft
 
@@ -15316,23 +15315,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sortablejs-vue3@npm:^1.2.3":
-  version: 1.2.3
-  resolution: "sortablejs-vue3@npm:1.2.3"
-  dependencies:
-    sortablejs: ^1.15.0
-    vue: ^3.2.37
-  peerDependencies:
-    sortablejs: ^1.15.0
-    vue: ^3.2.25
-  checksum: 1cf069db4e950a9b447d98d6f4d233082f84b43ac88735e3aab07f2dcebee99026425ee5fc69b04893fe2bb9040fa8cda088a57205f7c46453043d32764b5b36
-  languageName: node
-  linkType: hard
-
-"sortablejs@npm:^1.15.0":
-  version: 1.15.0
-  resolution: "sortablejs@npm:1.15.0"
-  checksum: bb82223a663484640d317cad510ac987f26b7a443631040407224de1be069afcc6c39048b6d8527f10f269e33595e8128d7de2fac23517c8260470f77f932d55
+"sortablejs@npm:1.14.0":
+  version: 1.14.0
+  resolution: "sortablejs@npm:1.14.0"
+  checksum: 7b9d2cbb0331f3f259b8703a17174ff46a941b6d59c77c75ca05a5bd484bf2b409a9c1d21344f9c933939880450803b254825c7c7d7f88034e8c7e675420b389
   languageName: node
   linkType: hard
 
@@ -17177,7 +17163,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue@npm:3.2.45, vue@npm:^3.2.37":
+"vue@npm:3.2.45":
   version: 3.2.45
   resolution: "vue@npm:3.2.45"
   dependencies:
@@ -17190,6 +17176,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vuedraggable@npm:next":
+  version: 4.1.0
+  resolution: "vuedraggable@npm:4.1.0"
+  dependencies:
+    sortablejs: 1.14.0
+  peerDependencies:
+    vue: ^3.0.1
+  checksum: 8b4c5a6b384361df97f7a3595d7772dfbb086bf97c6702a1117b532a9e49db2908cb5d21b7959cb10179714c4c2225e4be0b77b29f778923169ea8a8197a429f
+  languageName: node
+  linkType: hard
+
 "w3c-xmlserializer@npm:^4.0.0":
   version: 4.0.0
   resolution: "w3c-xmlserializer@npm:4.0.0"
-- 
cgit v1.2.3-freya


From f52bd8a8a30b314ea2b0f237b6f5eb4ffef7423f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 21 Dec 2022 15:18:05 +0900
Subject: MFMのアニメーションをデフォルトで無効に
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/client/src/store.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index d1b6e08bc8..d33a351725 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -156,7 +156,7 @@ export const defaultStore = markRaw(new Storage('base', {
 	},
 	animatedMfm: {
 		where: 'device',
-		default: true,
+		default: false,
 	},
 	loadRawImages: {
 		where: 'device',
-- 
cgit v1.2.3-freya


From f8f8f5bec5d986b10a934d85468d2eda0d7ff31c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 21 Dec 2022 15:27:30 +0900
Subject: :art:

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index cce3f727fc..8e9a325358 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -177,7 +177,7 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .fdidabkb {
-	--height: 55px;
+	--height: 52px;
 	display: flex;
 	width: 100%;
 	-webkit-backdrop-filter: var(--blur, blur(15px));
@@ -187,7 +187,7 @@ onUnmounted(() => {
 	height: var(--height);
 
 	&.thin {
-		--height: 45px;
+		--height: 42px;
 
 		> .buttons {
 			> .button {
-- 
cgit v1.2.3-freya


From d5be8ab9993d68f1d57aa3448bf67d755e79a5a5 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 21 Dec 2022 15:32:59 +0900
Subject: :art:

---
 packages/client/src/components/MkChart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkChart.vue b/packages/client/src/components/MkChart.vue
index 7f660853fe..d97b114f17 100644
--- a/packages/client/src/components/MkChart.vue
+++ b/packages/client/src/components/MkChart.vue
@@ -194,7 +194,7 @@ const render = () => {
 						axis: 'y',
 						colors: {
 							0: alpha(x.color ? x.color : getColor(i), 0),
-							[maxes[i]]: alpha(x.color ? x.color : getColor(i), 0.3),
+							[maxes[i]]: alpha(x.color ? x.color : getColor(i), 0.35),
 						},
 					},
 				},
-- 
cgit v1.2.3-freya


From 20fd9db77f362468202eda8af2404392102c3053 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 21 Dec 2022 15:36:18 +0900
Subject: :art:

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index e40b5d6553..374ecd8abf 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -179,14 +179,14 @@ onBeforeUnmount(() => {
 		}
 
 		& + header {
-			margin-top: 16px;
+			margin-top: 8px;
 		}
 	}
 
 	> header {
 		margin: 0 0 8px 0;
 		font-weight: bold;
-		font-size: 1.2em;
+		font-size: 1.1em;
 
 		& + .body {
 			margin-top: 8px;
-- 
cgit v1.2.3-freya


From 689411c19a267630855251f7d54999250faabbf7 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 21 Dec 2022 16:00:00 +0900
Subject: refactor(client): refacotr MkMediaCaption

---
 locales/ja-JP.yml                                  |   1 +
 packages/client/src/components/MkDrive.file.vue    |  18 +-
 .../src/components/MkFileCaptionEditWindow.vue     | 175 ++++++++++++++
 packages/client/src/components/MkMediaCaption.vue  | 263 ---------------------
 .../client/src/components/MkPostFormAttaches.vue   |  17 +-
 5 files changed, 188 insertions(+), 286 deletions(-)
 create mode 100644 packages/client/src/components/MkFileCaptionEditWindow.vue
 delete mode 100644 packages/client/src/components/MkMediaCaption.vue

(limited to 'packages/client/src')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 0e8e22752f..7737e6044e 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -908,6 +908,7 @@ sendPushNotificationReadMessage: "通知やメッセージが既読になった
 sendPushNotificationReadMessageCaption: "「{emptyPushNotificationMessage}」という通知が一瞬表示されるようになります。端末の電池消費量が増加する可能性があります。"
 windowMaximize: "最大化"
 windowRestore: "元に戻す"
+caption: "キャプション"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"
diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue
index 11bd9e9e3b..8c17c0530a 100644
--- a/packages/client/src/components/MkDrive.file.vue
+++ b/packages/client/src/components/MkDrive.file.vue
@@ -71,7 +71,7 @@ function getMenu() {
 		action: toggleSensitive,
 	}, {
 		text: i18n.ts.describeFile,
-		icon: 'ti ti-forms',
+		icon: 'ti ti-text-caption',
 		action: describe,
 	}, null, {
 		text: i18n.ts.copyUrl,
@@ -134,20 +134,14 @@ function rename() {
 }
 
 function describe() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
-		title: i18n.ts.describeFile,
-		input: {
-			placeholder: i18n.ts.inputNewDescription,
-			default: props.file.comment != null ? props.file.comment : '',
-		},
-		image: props.file,
+	os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
+		default: props.file.comment != null ? props.file.comment : '',
+		file: props.file,
 	}, {
-		done: result => {
-			if (!result || result.canceled) return;
-			let comment = result.result;
+		done: caption => {
 			os.api('drive/files/update', {
 				fileId: props.file.id,
-				comment: comment.length === 0 ? null : comment,
+				comment: caption.length === 0 ? null : caption,
 			});
 		},
 	}, 'closed');
diff --git a/packages/client/src/components/MkFileCaptionEditWindow.vue b/packages/client/src/components/MkFileCaptionEditWindow.vue
new file mode 100644
index 0000000000..73875251f0
--- /dev/null
+++ b/packages/client/src/components/MkFileCaptionEditWindow.vue
@@ -0,0 +1,175 @@
+<template>
+<XModalWindow
+	ref="dialog"
+	:width="400"
+	:height="450"
+	:with-ok-button="true"
+	:ok-button-disabled="false"
+	@ok="ok()"
+	@close="dialog.close()"
+	@closed="emit('closed')"
+>
+	<template #header>{{ i18n.ts.describeFile }}</template>
+	<div>
+		<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain" style="height: 100px;"/>
+		<MkTextarea v-model="caption" autofocus :placeholder="i18n.ts.inputNewDescription">
+			<template #label>{{ i18n.ts.caption }}</template>
+		</MkTextarea>
+	</div>
+</XModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as Misskey from 'misskey-js';
+import XModalWindow from '@/components/MkModalWindow.vue';
+import MkTextarea from '@/components/form/textarea.vue';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	file: Misskey.entities.DriveFile;
+	default: string;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'done', v: string): void;
+	(ev: 'closed'): void;
+}>();
+
+const dialog = $ref<InstanceType<typeof XModalWindow>>();
+
+let caption = $ref(props.default);
+
+async function ok() {
+	emit('done', caption);
+	dialog.close();
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	flex-direction: row;
+	overflow: scroll;
+	position: fixed;
+	left: 0;
+	top: 0;
+}
+@media (max-width: 850px) {
+	.container {
+		flex-direction: column;
+	}
+	.top-caption {
+		padding-bottom: 8px;
+	}
+}
+.fullwidth {
+	width: 100%;
+	margin: auto;
+}
+.mk-dialog {
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+	margin: auto;
+
+	> header {
+		margin: 0 0 8px 0;
+		position: relative;
+
+		> .title {
+			font-weight: bold;
+			font-size: 20px;
+		}
+
+		> .text-count {
+			opacity: 0.7;
+			position: absolute;
+			right: 0;
+		}
+	}
+
+	> .buttons {
+		margin-top: 16px;
+
+		> * {
+			margin: 0 8px;
+		}
+	}
+
+	> textarea {
+		display: block;
+		box-sizing: border-box;
+		padding: 0 24px;
+		margin: 0;
+		width: 100%;
+		font-size: 16px;
+		border: none;
+		border-radius: 0;
+		background: transparent;
+		color: var(--fg);
+		font-family: inherit;
+		max-width: 100%;
+		min-width: 100%;
+		min-height: 90px;
+
+		&:focus-visible {
+			outline: none;
+		}
+
+		&:disabled {
+			opacity: 0.5;
+		}
+	}
+}
+.hdrwpsaf {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	> header,
+	> footer {
+		align-self: center;
+		display: inline-block;
+		padding: 6px 9px;
+		font-size: 90%;
+		background: rgba(0, 0, 0, 0.5);
+		border-radius: 6px;
+		color: #fff;
+	}
+
+	> header {
+		margin-bottom: 8px;
+		opacity: 0.9;
+	}
+
+	> img {
+		display: block;
+		flex: 1;
+		min-height: 0;
+		object-fit: contain;
+		width: 100%;
+		cursor: zoom-out;
+		image-orientation: from-image;
+	}
+
+	> footer {
+		margin-top: 8px;
+		opacity: 0.8;
+
+		> span + span {
+			margin-left: 0.5em;
+			padding-left: 0.5em;
+			border-left: solid 1px rgba(255, 255, 255, 0.5);
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/components/MkMediaCaption.vue b/packages/client/src/components/MkMediaCaption.vue
deleted file mode 100644
index c25755d762..0000000000
--- a/packages/client/src/components/MkMediaCaption.vue
+++ /dev/null
@@ -1,263 +0,0 @@
-<template>
-	<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
-		<div class="container">
-			<div class="fullwidth top-caption">
-				<div class="mk-dialog">
-					<header>
-						<Mfm v-if="title" class="title" :text="title"/>
-						<span class="text-count" :class="{ over: remainingLength < 0 }">{{ remainingLength }}</span>
-					</header>
-					<textarea v-model="inputValue" autofocus :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
-					<div v-if="(showOkButton || showCancelButton)" class="buttons">
-						<MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ $ts.ok }}</MkButton>
-						<MkButton inline @click="cancel" >{{ $ts.cancel }}</MkButton>
-					</div>
-				</div>
-			</div>
-			<div class="hdrwpsaf fullwidth">
-				<header>{{ image.name }}</header>
-				<img :src="image.url" :alt="image.comment" :title="image.comment" @click="$refs.modal.close()"/>
-				<footer>
-					<span>{{ image.type }}</span>
-					<span>{{ bytes(image.size) }}</span>
-					<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
-				</footer>
-			</div>
-		</div>
-	</MkModal>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { length } from 'stringz';
-import MkModal from '@/components/MkModal.vue';
-import MkButton from '@/components/MkButton.vue';
-import bytes from '@/filters/bytes';
-import number from '@/filters/number';
-
-export default defineComponent({
-	components: {
-		MkModal,
-		MkButton,
-	},
-
-	props: {
-		image: {
-			type: Object,
-			required: true,
-		},
-		title: {
-			type: String,
-			required: false
-		},
-		input: {
-			required: true
-		},
-		showOkButton: {
-			type: Boolean,
-			default: true
-		},
-		showCancelButton: {
-			type: Boolean,
-			default: true
-		},
-		cancelableByBgClick: {
-			type: Boolean,
-			default: true
-		},
-	},
-
-	emits: ['done', 'closed'],
-
-	data() {
-		return {
-			inputValue: this.input.default ? this.input.default : null
-		};
-	},
-
-	computed: {
-		remainingLength(): number {
-			if (typeof this.inputValue !== "string") return 512;
-			return 512 - length(this.inputValue);
-		}
-	},
-
-	mounted() {
-		document.addEventListener('keydown', this.onKeydown);
-	},
-
-	beforeUnmount() {
-		document.removeEventListener('keydown', this.onKeydown);
-	},
-
-	methods: {
-		bytes,
-		number,
-
-		done(canceled, result?) {
-			this.$emit('done', { canceled, result });
-			this.$refs.modal.close();
-		},
-
-		async ok() {
-			if (!this.showOkButton) return;
-
-			const result = this.inputValue;
-			this.done(false, result);
-		},
-
-		cancel() {
-			this.done(true);
-		},
-
-		onBgClick() {
-			if (this.cancelableByBgClick) {
-				this.cancel();
-			}
-		},
-
-		onKeydown(evt) {
-			if (evt.which === 27) { // ESC
-				this.cancel();
-			}
-		},
-
-		onInputKeydown(evt) {
-			if (evt.which === 13) { // Enter
-				if (evt.ctrlKey) {
-					evt.preventDefault();
-					evt.stopPropagation();
-					this.ok();
-				}
-			}
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.container {
-	display: flex;
-	width: 100%;
-	height: 100%;
-	flex-direction: row;
-	overflow: scroll;
-	position: fixed;
-	left: 0;
-	top: 0;
-}
-@media (max-width: 850px) {
-	.container {
-		flex-direction: column;
-	}
-	.top-caption {
-		padding-bottom: 8px;
-	}
-}
-.fullwidth {
-	width: 100%;
-	margin: auto;
-}
-.mk-dialog {
-	position: relative;
-	padding: 32px;
-	min-width: 320px;
-	max-width: 480px;
-	box-sizing: border-box;
-	text-align: center;
-	background: var(--panel);
-	border-radius: var(--radius);
-	margin: auto;
-
-	> header {
-		margin: 0 0 8px 0;
-		position: relative;
-
-		> .title {
-			font-weight: bold;
-			font-size: 20px;
-		}
-
-		> .text-count {
-			opacity: 0.7;
-			position: absolute;
-			right: 0;
-		}
-	}
-
-	> .buttons {
-		margin-top: 16px;
-
-		> * {
-			margin: 0 8px;
-		}
-	}
-
-	> textarea {
-		display: block;
-		box-sizing: border-box;
-		padding: 0 24px;
-		margin: 0;
-		width: 100%;
-		font-size: 16px;
-		border: none;
-		border-radius: 0;
-		background: transparent;
-		color: var(--fg);
-		font-family: inherit;
-		max-width: 100%;
-		min-width: 100%;
-		min-height: 90px;
-
-		&:focus-visible {
-			outline: none;
-		}
-
-		&:disabled {
-			opacity: 0.5;
-		}
-	}
-}
-.hdrwpsaf {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-
-	> header,
-	> footer {
-		align-self: center;
-		display: inline-block;
-		padding: 6px 9px;
-		font-size: 90%;
-		background: rgba(0, 0, 0, 0.5);
-		border-radius: 6px;
-		color: #fff;
-	}
-
-	> header {
-		margin-bottom: 8px;
-		opacity: 0.9;
-	}
-
-	> img {
-		display: block;
-		flex: 1;
-		min-height: 0;
-		object-fit: contain;
-		width: 100%;
-		cursor: zoom-out;
-		image-orientation: from-image;
-	}
-
-	> footer {
-		margin-top: 8px;
-		opacity: 0.8;
-
-		> span + span {
-			margin-left: 0.5em;
-			padding-left: 0.5em;
-			border-left: solid 1px rgba(255, 255, 255, 0.5);
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index 955d835f25..2e16cc52a7 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -70,17 +70,12 @@ async function rename(file) {
 }
 
 async function describe(file) {
-	os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
-		title: i18n.ts.describeFile,
-		input: {
-			placeholder: i18n.ts.inputNewDescription,
-			default: file.comment !== null ? file.comment : '',
-		},
-		image: file,
+	os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
+		default: file.comment !== null ? file.comment : '',
+		file: file,
 	}, {
-		done: result => {
-			if (!result || result.canceled) return;
-			let comment = result.result.length === 0 ? null : result.result;
+		done: caption => {
+			let comment = caption.length === 0 ? null : caption;
 			os.api('drive/files/update', {
 				fileId: file.id,
 				comment: comment,
@@ -103,7 +98,7 @@ function showFileMenu(file, ev: MouseEvent) {
 		action: () => { toggleSensitive(file); },
 	}, {
 		text: i18n.ts.describeFile,
-		icon: 'ti ti-forms',
+		icon: 'ti ti-text-caption',
 		action: () => { describe(file); },
 	}, {
 		text: i18n.ts.attachCancel,
-- 
cgit v1.2.3-freya


From d970534d920eafab0289743bcc95523ec25f00d9 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 22 Dec 2022 09:01:58 +0900
Subject: enhance(client): improve ux of sound settings

---
 locales/ja-JP.yml                                  |  1 +
 .../client/src/pages/settings/sounds.sound.vue     | 45 ++++++++++++
 packages/client/src/pages/settings/sounds.vue      | 80 +++-------------------
 packages/client/src/scripts/sound.ts               | 32 +++++++++
 4 files changed, 89 insertions(+), 69 deletions(-)
 create mode 100644 packages/client/src/pages/settings/sounds.sound.vue

(limited to 'packages/client/src')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 7737e6044e..001749468a 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -509,6 +509,7 @@ deleteAll: "全て削除"
 showFixedPostForm: "タイムライン上部に投稿フォームを表示する"
 newNoteRecived: "新しいノートがあります"
 sounds: "サウンド"
+sound: "サウンド"
 listen: "聴く"
 none: "なし"
 showInPage: "ページで表示"
diff --git a/packages/client/src/pages/settings/sounds.sound.vue b/packages/client/src/pages/settings/sounds.sound.vue
new file mode 100644
index 0000000000..62627c6333
--- /dev/null
+++ b/packages/client/src/pages/settings/sounds.sound.vue
@@ -0,0 +1,45 @@
+<template>
+<div class="_formRoot">
+	<FormSelect v-model="type">
+		<template #label>{{ i18n.ts.sound }}</template>
+		<option v-for="x in soundsTypes" :key="x" :value="x">{{ x == null ? i18n.ts.none : x }}</option>
+	</FormSelect>
+	<FormRange v-model="volume" :min="0" :max="1" :step="0.05" :text-converter="(v) => `${Math.floor(v * 100)}%`" class="_formBlock">
+		<template #label>{{ i18n.ts.volume }}</template>
+	</FormRange>
+
+	<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+		<FormButton inline @click="listen"><i class="ti ti-player-play"></i> {{ i18n.ts.listen }}</FormButton>
+		<FormButton inline primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</FormButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import FormSelect from '@/components/form/select.vue';
+import FormButton from '@/components/MkButton.vue';
+import FormRange from '@/components/form/range.vue';
+import { i18n } from '@/i18n';
+import { playFile, soundsTypes } from '@/scripts/sound';
+
+const props = defineProps<{
+	type: string;
+	volume: number;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update', result: { type: string; volume: number; }): void;
+}>();
+
+let type = $ref(props.type);
+let volume = $ref(props.volume);
+
+function listen() {
+	playFile(type, volume);
+}
+
+function save() {
+	emit('update', { type, volume });
+}
+</script>
diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue
index 2bea491e67..ef60b2c3c9 100644
--- a/packages/client/src/pages/settings/sounds.vue
+++ b/packages/client/src/pages/settings/sounds.vue
@@ -6,11 +6,12 @@
 
 	<FormSection>
 		<template #label>{{ i18n.ts.sounds }}</template>
-		<FormLink v-for="type in Object.keys(sounds)" :key="type" style="margin-bottom: 8px;" @click="edit(type)">
-			{{ $t('_sfx.' + type) }}
-			<template #suffix>{{ sounds[type].type || i18n.ts.none }}</template>
-			<template #suffixIcon><i class="ti ti-chevron-down"></i></template>
-		</FormLink>
+		<FormFolder v-for="type in Object.keys(sounds)" :key="type" style="margin-bottom: 8px;">
+			<template #label>{{ $t('_sfx.' + type) }}</template>
+			<template #suffix>{{ sounds[type].type ?? i18n.ts.none }}</template>
+
+			<XSound :type="sounds[type].type" :volume="sounds[type].volume" @update="(res) => updated(type, res)"/>
+		</FormFolder>
 	</FormSection>
 
 	<FormButton danger class="_formBlock" @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
@@ -19,10 +20,12 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
+import XSound from './sounds.sound.vue';
 import FormRange from '@/components/form/range.vue';
 import FormButton from '@/components/MkButton.vue';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
+import FormFolder from '@/components/form/folder.vue';
 import * as os from '@/os';
 import { ColdDeviceStorage } from '@/store';
 import { playFile } from '@/scripts/sound';
@@ -50,71 +53,10 @@ const sounds = ref({
 	channel: ColdDeviceStorage.get('sound_channel'),
 });
 
-const soundsTypes = [
-	null,
-	'syuilo/up',
-	'syuilo/down',
-	'syuilo/pope1',
-	'syuilo/pope2',
-	'syuilo/waon',
-	'syuilo/popo',
-	'syuilo/triple',
-	'syuilo/poi1',
-	'syuilo/poi2',
-	'syuilo/pirori',
-	'syuilo/pirori-wet',
-	'syuilo/pirori-square-wet',
-	'syuilo/square-pico',
-	'syuilo/reverved',
-	'syuilo/ryukyu',
-	'syuilo/kick',
-	'syuilo/snare',
-	'syuilo/queue-jammed',
-	'aisha/1',
-	'aisha/2',
-	'aisha/3',
-	'noizenecio/kick_gaba1',
-	'noizenecio/kick_gaba2',
-	'noizenecio/kick_gaba3',
-	'noizenecio/kick_gaba4',
-	'noizenecio/kick_gaba5',
-	'noizenecio/kick_gaba6',
-	'noizenecio/kick_gaba7',
-];
-
-async function edit(type) {
-	const { canceled, result } = await os.form(i18n.t('_sfx.' + type), {
-		type: {
-			type: 'enum',
-			enum: soundsTypes.map(x => ({
-				value: x,
-				label: x == null ? i18n.ts.none : x,
-			})),
-			label: i18n.ts.sound,
-			default: sounds.value[type].type,
-		},
-		volume: {
-			type: 'range',
-			min: 0,
-			max: 1,
-			step: 0.05,
-			textConverter: (v) => `${Math.floor(v * 100)}%`,
-			label: i18n.ts.volume,
-			default: sounds.value[type].volume,
-		},
-		listen: {
-			type: 'button',
-			content: i18n.ts.listen,
-			action: (_, values) => {
-				playFile(values.type, values.volume);
-			},
-		},
-	});
-	if (canceled) return;
-
+async function updated(type, sound) {
 	const v = {
-		type: result.type,
-		volume: result.volume,
+		type: sound.type,
+		volume: sound.volume,
 	};
 
 	ColdDeviceStorage.set('sound_' + type, v);
diff --git a/packages/client/src/scripts/sound.ts b/packages/client/src/scripts/sound.ts
index 2b8279b3df..9d1f603235 100644
--- a/packages/client/src/scripts/sound.ts
+++ b/packages/client/src/scripts/sound.ts
@@ -2,6 +2,38 @@ import { ColdDeviceStorage } from '@/store';
 
 const cache = new Map<string, HTMLAudioElement>();
 
+export const soundsTypes = [
+	null,
+	'syuilo/up',
+	'syuilo/down',
+	'syuilo/pope1',
+	'syuilo/pope2',
+	'syuilo/waon',
+	'syuilo/popo',
+	'syuilo/triple',
+	'syuilo/poi1',
+	'syuilo/poi2',
+	'syuilo/pirori',
+	'syuilo/pirori-wet',
+	'syuilo/pirori-square-wet',
+	'syuilo/square-pico',
+	'syuilo/reverved',
+	'syuilo/ryukyu',
+	'syuilo/kick',
+	'syuilo/snare',
+	'syuilo/queue-jammed',
+	'aisha/1',
+	'aisha/2',
+	'aisha/3',
+	'noizenecio/kick_gaba1',
+	'noizenecio/kick_gaba2',
+	'noizenecio/kick_gaba3',
+	'noizenecio/kick_gaba4',
+	'noizenecio/kick_gaba5',
+	'noizenecio/kick_gaba6',
+	'noizenecio/kick_gaba7',
+] as const;
+
 export function getAudio(file: string, useCache = true): HTMLAudioElement {
 	let audio: HTMLAudioElement;
 	if (useCache && cache.has(file)) {
-- 
cgit v1.2.3-freya


From 69087f224208cc11385fe9685b7de12c33aad623 Mon Sep 17 00:00:00 2001
From: Kagami Sascha Rosylight <saschanaz@outlook.com>
Date: Thu, 22 Dec 2022 14:28:13 +0900
Subject: enhance(client): update emoji picker immediately on all input (#9385)

* enhance: update emoji picker immediately on all input

* refactor: remove reference to window.clipboardData

* refactor: done() receives a string

* refactor: typescript-favored `.char` access
---
 packages/client/src/components/MkEmojiPicker.vue | 23 +++++++++++++++--------
 packages/client/src/scripts/autocomplete.ts      |  6 +++++-
 2 files changed, 20 insertions(+), 9 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
index 3b446704b5..814f71168a 100644
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ b/packages/client/src/components/MkEmojiPicker.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
-	<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @paste.stop="paste" @keyup.enter="done()">
+	<input ref="search" :value="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @input="input()" @paste.stop="paste" @keyup.enter="done()">
 	<div ref="emojis" class="emojis">
 		<section class="result">
 			<div v-if="searchResultCustom.length > 0" class="body">
@@ -121,7 +121,7 @@ const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value
 const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2);
 const customEmojiCategories = emojiCategories;
 const customEmojis = instance.emojis;
-const q = ref<string | null>(null);
+const q = ref<string>('');
 const searchResultCustom = ref<Misskey.entities.CustomEmoji[]>([]);
 const searchResultUnicode = ref<UnicodeEmojiDef[]>([]);
 const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
@@ -129,7 +129,7 @@ const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
 watch(q, () => {
 	if (emojis.value) emojis.value.scrollTop = 0;
 
-	if (q.value == null || q.value === '') {
+	if (q.value === '') {
 		searchResultCustom.value = [];
 		searchResultUnicode.value = [];
 		return;
@@ -281,7 +281,7 @@ function reset() {
 }
 
 function getKey(emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef): string {
-	return typeof emoji === 'string' ? emoji : (emoji.char || `:${emoji.name}:`);
+	return typeof emoji === 'string' ? emoji : 'char' in emoji ? emoji.char : `:${emoji.name}:`;
 }
 
 function chosen(emoji: any, ev?: MouseEvent) {
@@ -305,14 +305,21 @@ function chosen(emoji: any, ev?: MouseEvent) {
 	}
 }
 
-function paste(event: ClipboardEvent) {
-	const paste = (event.clipboardData || window.clipboardData).getData('text');
-	if (done(paste)) {
+function input(): void {
+	// Using custom input event instead of v-model to respond immediately on
+	// Android, where composition happens on all languages
+	// (v-model does not update during composition)
+	q.value = search.value?.value.trim() ?? '';
+}
+
+function paste(event: ClipboardEvent): void {
+	const pasted = event.clipboardData?.getData('text') ?? '';
+	if (done(pasted)) {
 		event.preventDefault();
 	}
 }
 
-function done(query?: any): boolean | void {
+function done(query?: string): boolean | void {
 	if (query == null) query = q.value;
 	if (query == null || typeof query !== 'string') return;
 
diff --git a/packages/client/src/scripts/autocomplete.ts b/packages/client/src/scripts/autocomplete.ts
index 206724de9e..62de37ed27 100644
--- a/packages/client/src/scripts/autocomplete.ts
+++ b/packages/client/src/scripts/autocomplete.ts
@@ -16,10 +16,14 @@ export class Autocomplete {
 	private opening: boolean;
 
 	private get text(): string {
-		return this.textRef.value;
+		// Use raw .value to get the latest value
+		// (Because v-model does not update while composition)
+		return this.textarea.value;
 	}
 
 	private set text(text: string) {
+		// Use ref value to notify other watchers
+		// (Because .value setter never fires input/change events)
 		this.textRef.value = text;
 	}
 
-- 
cgit v1.2.3-freya


From f1fd1d2585bd5230caea4c7b8814c2cf007e57cc Mon Sep 17 00:00:00 2001
From: Kagami Sascha Rosylight <saschanaz@outlook.com>
Date: Thu, 22 Dec 2022 16:01:59 +0900
Subject: style: add missing trailing commas (#9387)

---
 .../client/src/components/MkAbuseReportWindow.vue  |  2 +-
 packages/client/src/components/MkAutocomplete.vue  |  8 +--
 packages/client/src/components/MkAvatars.vue       |  2 +-
 packages/client/src/components/MkCwButton.vue      |  2 +-
 .../client/src/components/MkDrive.navFolder.vue    |  4 +-
 packages/client/src/components/MkFolder.vue        |  8 +--
 packages/client/src/components/MkFormulaCore.vue   | 12 ++--
 .../components/MkPushNotificationAllowButton.vue   |  4 +-
 packages/client/src/components/MkSample.vue        | 12 ++--
 packages/client/src/components/page/page.block.vue | 10 +--
 .../client/src/components/page/page.button.vue     | 20 +++---
 .../client/src/components/page/page.canvas.vue     | 10 +--
 .../client/src/components/page/page.counter.vue    | 12 ++--
 packages/client/src/components/page/page.if.vue    | 10 +--
 packages/client/src/components/page/page.note.vue  |  8 +--
 .../src/components/page/page.number-input.vue      | 12 ++--
 .../src/components/page/page.radio-button.vue      | 12 ++--
 .../client/src/components/page/page.section.vue    | 10 +--
 .../client/src/components/page/page.switch.vue     | 12 ++--
 .../client/src/components/page/page.text-input.vue | 12 ++--
 packages/client/src/components/page/page.text.vue  | 12 ++--
 .../src/components/page/page.textarea-input.vue    | 12 ++--
 .../client/src/components/page/page.textarea.vue   | 14 ++--
 packages/client/src/components/page/page.vue       |  6 +-
 packages/client/src/directives/appear.ts           |  2 +-
 packages/client/src/directives/click-anime.ts      |  2 +-
 packages/client/src/directives/follow-append.ts    |  2 +-
 packages/client/src/directives/get-size.ts         |  4 +-
 packages/client/src/directives/hotkey.ts           |  2 +-
 packages/client/src/directives/ripple.ts           |  2 +-
 packages/client/src/directives/size.ts             |  4 +-
 packages/client/src/directives/user-preview.ts     |  6 +-
 packages/client/src/instance.ts                    |  2 +-
 packages/client/src/pages/admin/metrics.vue        | 84 +++++++++++-----------
 packages/client/src/pages/auth.form.vue            | 12 ++--
 packages/client/src/pages/emojis.emoji.vue         |  2 +-
 .../page-editor/els/page-editor.el.button.vue      |  4 +-
 .../page-editor/els/page-editor.el.canvas.vue      |  4 +-
 .../page-editor/els/page-editor.el.counter.vue     |  4 +-
 .../pages/page-editor/els/page-editor.el.if.vue    |  6 +-
 .../pages/page-editor/els/page-editor.el.image.vue |  6 +-
 .../pages/page-editor/els/page-editor.el.note.vue  |  6 +-
 .../els/page-editor.el.number-input.vue            |  4 +-
 .../pages/page-editor/els/page-editor.el.post.vue  |  4 +-
 .../els/page-editor.el.radio-button.vue            |  6 +-
 .../page-editor/els/page-editor.el.section.vue     |  8 +--
 .../page-editor/els/page-editor.el.switch.vue      |  4 +-
 .../page-editor/els/page-editor.el.text-input.vue  |  4 +-
 .../pages/page-editor/els/page-editor.el.text.vue  |  4 +-
 .../els/page-editor.el.textarea-input.vue          |  4 +-
 .../page-editor/els/page-editor.el.textarea.vue    |  4 +-
 .../pages/page-editor/page-editor.container.vue    | 16 ++---
 .../pages/page-editor/page-editor.script-block.vue | 32 ++++-----
 packages/client/src/pages/welcome.entrance.b.vue   | 16 ++---
 packages/client/src/pages/welcome.entrance.c.vue   | 16 ++---
 packages/client/src/pages/welcome.timeline.vue     |  4 +-
 packages/client/src/plugin.ts                      | 12 ++--
 packages/client/src/scripts/2fa.ts                 |  8 +--
 packages/client/src/scripts/autocomplete.ts        |  2 +-
 packages/client/src/scripts/focus.ts               |  4 +-
 packages/client/src/scripts/format-time-string.ts  |  2 +-
 packages/client/src/scripts/gen-search-query.ts    |  2 +-
 .../client/src/scripts/get-static-image-url.ts     |  2 +-
 packages/client/src/scripts/hotkey.ts              |  6 +-
 packages/client/src/scripts/hpml/evaluator.ts      |  6 +-
 packages/client/src/scripts/hpml/index.ts          | 22 +++---
 packages/client/src/scripts/lookup-user.ts         |  2 +-
 packages/client/src/scripts/physics.ts             | 20 +++---
 packages/client/src/scripts/please-login.ts        |  2 +-
 packages/client/src/scripts/reaction-picker.ts     |  4 +-
 .../client/src/scripts/show-suspended-dialog.ts    |  2 +-
 packages/client/src/scripts/theme-editor.ts        |  2 +-
 packages/client/src/scripts/use-note-capture.ts    |  4 +-
 packages/client/src/ui/classic.widgets.vue         | 10 +--
 packages/client/src/ui/deck/direct-column.vue      |  2 +-
 packages/client/src/widgets/activity.calendar.vue  |  2 +-
 .../client/src/widgets/server-metric/cpu-mem.vue   |  2 +-
 packages/client/src/widgets/server-metric/net.vue  |  2 +-
 packages/client/src/widgets/timeline.vue           | 14 ++--
 79 files changed, 320 insertions(+), 320 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkAbuseReportWindow.vue b/packages/client/src/components/MkAbuseReportWindow.vue
index 03890b4e97..039f77c859 100644
--- a/packages/client/src/components/MkAbuseReportWindow.vue
+++ b/packages/client/src/components/MkAbuseReportWindow.vue
@@ -50,7 +50,7 @@ function send() {
 	}, undefined).then(res => {
 		os.alert({
 			type: 'success',
-			text: i18n.ts.abuseReported
+			text: i18n.ts.abuseReported,
 		});
 		uiWindow.value?.close();
 		emit('closed');
diff --git a/packages/client/src/components/MkAutocomplete.vue b/packages/client/src/components/MkAutocomplete.vue
index 144281e3c3..e1fd5693b6 100644
--- a/packages/client/src/components/MkAutocomplete.vue
+++ b/packages/client/src/components/MkAutocomplete.vue
@@ -86,7 +86,7 @@ for (const x of customEmojis) {
 		name: x.name,
 		emoji: `:${x.name}:`,
 		url: x.url,
-		isCustomEmoji: true
+		isCustomEmoji: true,
 	});
 
 	if (x.aliases) {
@@ -96,7 +96,7 @@ for (const x of customEmojis) {
 				aliasOf: x.name,
 				emoji: `:${x.name}:`,
 				url: x.url,
-				isCustomEmoji: true
+				isCustomEmoji: true,
 			});
 		}
 	}
@@ -193,7 +193,7 @@ function exec() {
 			os.api('users/search-by-username-and-host', {
 				username: props.q,
 				limit: 10,
-				detail: false
+				detail: false,
 			}).then(searchedUsers => {
 				users.value = searchedUsers as any[];
 				fetching.value = false;
@@ -215,7 +215,7 @@ function exec() {
 			} else {
 				os.api('hashtags/search', {
 					query: props.q,
-					limit: 30
+					limit: 30,
 				}).then(searchedHashtags => {
 					hashtags.value = searchedHashtags as any[];
 					fetching.value = false;
diff --git a/packages/client/src/components/MkAvatars.vue b/packages/client/src/components/MkAvatars.vue
index 958e5db0a1..162338b639 100644
--- a/packages/client/src/components/MkAvatars.vue
+++ b/packages/client/src/components/MkAvatars.vue
@@ -18,7 +18,7 @@ const users = ref([]);
 
 onMounted(async () => {
 	users.value = await os.api('users/show', {
-		userIds: props.userIds
+		userIds: props.userIds,
 	});
 });
 </script>
diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue
index a473d682a9..ee611921ef 100644
--- a/packages/client/src/components/MkCwButton.vue
+++ b/packages/client/src/components/MkCwButton.vue
@@ -25,7 +25,7 @@ const label = computed(() => {
 	return concat([
 		props.note.text ? [i18n.t('_cw.chars', { count: length(props.note.text) })] : [],
 		props.note.files && props.note.files.length !== 0 ? [i18n.t('_cw.files', { count: props.note.files.length })] : [],
-		props.note.poll != null ? [i18n.ts.poll] : []
+		props.note.poll != null ? [i18n.ts.poll] : [],
 	] as string[][]).join(' / ');
 });
 
diff --git a/packages/client/src/components/MkDrive.navFolder.vue b/packages/client/src/components/MkDrive.navFolder.vue
index 3614113501..dbbfef5f05 100644
--- a/packages/client/src/components/MkDrive.navFolder.vue
+++ b/packages/client/src/components/MkDrive.navFolder.vue
@@ -109,7 +109,7 @@ function onDrop(ev: DragEvent) {
 		emit('removeFile', file.id);
 		os.api('drive/files/update', {
 			fileId: file.id,
-			folderId: props.folder ? props.folder.id : null
+			folderId: props.folder ? props.folder.id : null,
 		});
 	}
 	//#endregion
@@ -123,7 +123,7 @@ function onDrop(ev: DragEvent) {
 		emit('removeFolder', folder.id);
 		os.api('drive/folders/update', {
 			folderId: folder.id,
-			parentId: props.folder ? props.folder.id : null
+			parentId: props.folder ? props.folder.id : null,
 		});
 	}
 	//#endregion
diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue
index bc9bff99b6..ee3df83287 100644
--- a/packages/client/src/components/MkFolder.vue
+++ b/packages/client/src/components/MkFolder.vue
@@ -32,12 +32,12 @@ export default defineComponent({
 		expanded: {
 			type: Boolean,
 			required: false,
-			default: true
+			default: true,
 		},
 		persistKey: {
 			type: String,
 			required: false,
-			default: null
+			default: null,
 		},
 	},
 	data() {
@@ -51,7 +51,7 @@ export default defineComponent({
 			if (this.persistKey) {
 				localStorage.setItem(localStoragePrefix + this.persistKey, this.showBody ? 't' : 'f');
 			}
-		}
+		},
 	},
 	mounted() {
 		function getParentBg(el: Element | null): string {
@@ -91,7 +91,7 @@ export default defineComponent({
 		afterLeave(el) {
 			el.style.height = null;
 		},
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/MkFormulaCore.vue b/packages/client/src/components/MkFormulaCore.vue
index 8db8932fcd..6028db9e64 100644
--- a/packages/client/src/components/MkFormulaCore.vue
+++ b/packages/client/src/components/MkFormulaCore.vue
@@ -12,20 +12,20 @@ export default defineComponent({
 	props: {
 		formula: {
 			type: String,
-			required: true
+			required: true,
 		},
 		block: {
 			type: Boolean,
-			required: true
-		}
+			required: true,
+		},
 	},
 	computed: {
 		compiledFormula(): any {
 			return katex.renderToString(this.formula, {
-				throwOnError: false
+				throwOnError: false,
 			} as any);
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/MkPushNotificationAllowButton.vue b/packages/client/src/components/MkPushNotificationAllowButton.vue
index a762914e64..b356fd3b89 100644
--- a/packages/client/src/components/MkPushNotificationAllowButton.vue
+++ b/packages/client/src/components/MkPushNotificationAllowButton.vue
@@ -70,7 +70,7 @@ function subscribe() {
 	// SEE: https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe#Parameters
 	return promiseDialog(registration.pushManager.subscribe({
 		userVisibleOnly: true,
-		applicationServerKey: urlBase64ToUint8Array(instance.swPublickey)
+		applicationServerKey: urlBase64ToUint8Array(instance.swPublickey),
 	})
 	.then(async subscription => {
 		pushSubscription = subscription;
@@ -79,7 +79,7 @@ function subscribe() {
 		pushRegistrationInServer = await api('sw/register', {
 			endpoint: subscription.endpoint,
 			auth: encode(subscription.getKey('auth')),
-			publickey: encode(subscription.getKey('p256dh'))
+			publickey: encode(subscription.getKey('p256dh')),
 		});
 	}, async err => { // When subscribe failed
 		// 通知が許可されていなかったとき
diff --git a/packages/client/src/components/MkSample.vue b/packages/client/src/components/MkSample.vue
index 1169654d09..1d25ab54b5 100644
--- a/packages/client/src/components/MkSample.vue
+++ b/packages/client/src/components/MkSample.vue
@@ -51,7 +51,7 @@ export default defineComponent({
 			text: '',
 			flag: true,
 			radio: 'misskey',
-			mfm: `Hello world! This is an @example mention. BTW you are @${this.$i ? this.$i.username : 'guest'}.\nAlso, here is ${config.url} and [example link](${config.url}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`
+			mfm: `Hello world! This is an @example mention. BTW you are @${this.$i ? this.$i.username : 'guest'}.\nAlso, here is ${config.url} and [example link](${config.url}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`,
 		};
 	},
 
@@ -69,17 +69,17 @@ export default defineComponent({
 				foo: {
 					type: 'boolean',
 					default: true,
-					label: 'This is a boolean property'
+					label: 'This is a boolean property',
 				},
 				bar: {
 					type: 'number',
 					default: 300,
-					label: 'This is a number property'
+					label: 'This is a number property',
 				},
 				baz: {
 					type: 'string',
 					default: 'Misskey makes you happy.',
-					label: 'This is a string property'
+					label: 'This is a string property',
 				},
 			});
 		},
@@ -95,7 +95,7 @@ export default defineComponent({
 		async openMenu(ev) {
 			os.popupMenu([{
 				type: 'label',
-				text: 'Fruits'
+				text: 'Fruits',
 			}, {
 				text: 'Create some apples',
 				action: () => {},
@@ -111,6 +111,6 @@ export default defineComponent({
 				action: () => {},
 			}], ev.currentTarget ?? ev.target);
 		},
-	}
+	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.block.vue b/packages/client/src/components/page/page.block.vue
index d7984afac2..f3e7764604 100644
--- a/packages/client/src/components/page/page.block.vue
+++ b/packages/client/src/components/page/page.block.vue
@@ -24,21 +24,21 @@ import { Block } from '@/scripts/hpml/block';
 
 export default defineComponent({
 	components: {
-		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton, XCanvas, XNote
+		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton, XCanvas, XNote,
 	},
 	props: {
 		block: {
 			type: Object as PropType<Block>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
+			required: true,
 		},
 		h: {
 			type: Number,
-			required: true
-		}
+			required: true,
+		},
 	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.button.vue b/packages/client/src/components/page/page.button.vue
index e8878df8de..83931021d8 100644
--- a/packages/client/src/components/page/page.button.vue
+++ b/packages/client/src/components/page/page.button.vue
@@ -13,24 +13,24 @@ import { Hpml } from '@/scripts/hpml/evaluator';
 
 export default defineComponent({
 	components: {
-		MkButton
+		MkButton,
 	},
 	props: {
 		block: {
 			type: Object as PropType<ButtonBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	methods: {
 		click() {
 			if (this.block.action === 'dialog') {
 				this.hpml.eval();
 				os.alert({
-					text: this.hpml.interpolate(this.block.content)
+					text: this.hpml.interpolate(this.block.content),
 				});
 			} else if (this.block.action === 'resetRandom') {
 				this.hpml.updateRandomSeed(Math.random());
@@ -40,19 +40,19 @@ export default defineComponent({
 					pageId: this.hpml.page.id,
 					event: this.block.event,
 					...(this.block.var ? {
-						var: unref(this.hpml.vars)[this.block.var]
-					} : {})
+						var: unref(this.hpml.vars)[this.block.var],
+					} : {}),
 				});
 
 				os.alert({
 					type: 'success',
-					text: this.hpml.interpolate(this.block.message)
+					text: this.hpml.interpolate(this.block.message),
 				});
 			} else if (this.block.action === 'callAiScript') {
 				this.hpml.callAiScript(this.block.fn);
 			}
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.canvas.vue b/packages/client/src/components/page/page.canvas.vue
index 8f49b88e5e..80f6c8339c 100644
--- a/packages/client/src/components/page/page.canvas.vue
+++ b/packages/client/src/components/page/page.canvas.vue
@@ -14,12 +14,12 @@ export default defineComponent({
 	props: {
 		block: {
 			type: Object as PropType<CanvasBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const canvas: Ref<any> = ref(null);
@@ -29,9 +29,9 @@ export default defineComponent({
 		});
 
 		return {
-			canvas
+			canvas,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.counter.vue b/packages/client/src/components/page/page.counter.vue
index 6eeef71431..a9e1f41a54 100644
--- a/packages/client/src/components/page/page.counter.vue
+++ b/packages/client/src/components/page/page.counter.vue
@@ -13,17 +13,17 @@ import { Hpml } from '@/scripts/hpml/evaluator';
 
 export default defineComponent({
 	components: {
-		MkButton
+		MkButton,
 	},
 	props: {
 		block: {
 			type: Object as PropType<CounterVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -36,9 +36,9 @@ export default defineComponent({
 		}
 
 		return {
-			click
+			click,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.if.vue b/packages/client/src/components/page/page.if.vue
index 6dc7a429a6..372a15f0c6 100644
--- a/packages/client/src/components/page/page.if.vue
+++ b/packages/client/src/components/page/page.if.vue
@@ -11,21 +11,21 @@ import { defineComponent, defineAsyncComponent, PropType } from 'vue';
 
 export default defineComponent({
 	components: {
-		XBlock: defineAsyncComponent(() => import('./page.block.vue'))
+		XBlock: defineAsyncComponent(() => import('./page.block.vue')),
 	},
 	props: {
 		block: {
 			type: Object as PropType<IfBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
+			required: true,
 		},
 		h: {
 			type: Number,
-			required: true
-		}
+			required: true,
+		},
 	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.note.vue b/packages/client/src/components/page/page.note.vue
index 431f0b08df..7d5c484a1b 100644
--- a/packages/client/src/components/page/page.note.vue
+++ b/packages/client/src/components/page/page.note.vue
@@ -20,8 +20,8 @@ export default defineComponent({
 	props: {
 		block: {
 			type: Object as PropType<NoteBlock>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const note: Ref<Record<string, any> | null> = ref(null);
@@ -34,9 +34,9 @@ export default defineComponent({
 		});
 
 		return {
-			note
+			note,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.number-input.vue b/packages/client/src/components/page/page.number-input.vue
index 47ff2a0177..0348ba7434 100644
--- a/packages/client/src/components/page/page.number-input.vue
+++ b/packages/client/src/components/page/page.number-input.vue
@@ -15,17 +15,17 @@ import { NumberInputVarBlock } from '@/scripts/hpml/block';
 
 export default defineComponent({
 	components: {
-		MkInput
+		MkInput,
 	},
 	props: {
 		block: {
 			type: Object as PropType<NumberInputVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -39,9 +39,9 @@ export default defineComponent({
 
 		return {
 			value,
-			updateValue
+			updateValue,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.radio-button.vue b/packages/client/src/components/page/page.radio-button.vue
index 5a726da229..b0940a8781 100644
--- a/packages/client/src/components/page/page.radio-button.vue
+++ b/packages/client/src/components/page/page.radio-button.vue
@@ -14,17 +14,17 @@ import { RadioButtonVarBlock } from '@/scripts/hpml/block';
 
 export default defineComponent({
 	components: {
-		MkRadio
+		MkRadio,
 	},
 	props: {
 		block: {
 			type: Object as PropType<RadioButtonVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -38,8 +38,8 @@ export default defineComponent({
 
 		return {
 			value,
-			updateValue
+			updateValue,
 		};
-	}
+	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.section.vue b/packages/client/src/components/page/page.section.vue
index a2cd662833..630c1f5179 100644
--- a/packages/client/src/components/page/page.section.vue
+++ b/packages/client/src/components/page/page.section.vue
@@ -16,20 +16,20 @@ import { Hpml } from '@/scripts/hpml/evaluator';
 
 export default defineComponent({
 	components: {
-		XBlock: defineAsyncComponent(() => import('./page.block.vue'))
+		XBlock: defineAsyncComponent(() => import('./page.block.vue')),
 	},
 	props: {
 		block: {
 			type: Object as PropType<SectionBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
+			required: true,
 		},
 		h: {
-			required: true
-		}
+			required: true,
+		},
 	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.switch.vue b/packages/client/src/components/page/page.switch.vue
index 1ece88157f..ac8d5e05c8 100644
--- a/packages/client/src/components/page/page.switch.vue
+++ b/packages/client/src/components/page/page.switch.vue
@@ -13,17 +13,17 @@ import { SwitchVarBlock } from '@/scripts/hpml/block';
 
 export default defineComponent({
 	components: {
-		MkSwitch
+		MkSwitch,
 	},
 	props: {
 		block: {
 			type: Object as PropType<SwitchVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -37,9 +37,9 @@ export default defineComponent({
 
 		return {
 			value,
-			updateValue
+			updateValue,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.text-input.vue b/packages/client/src/components/page/page.text-input.vue
index 30a0379df9..5d7eef8bb9 100644
--- a/packages/client/src/components/page/page.text-input.vue
+++ b/packages/client/src/components/page/page.text-input.vue
@@ -15,17 +15,17 @@ import { TextInputVarBlock } from '@/scripts/hpml/block';
 
 export default defineComponent({
 	components: {
-		MkInput
+		MkInput,
 	},
 	props: {
 		block: {
 			type: Object as PropType<TextInputVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -39,9 +39,9 @@ export default defineComponent({
 
 		return {
 			value,
-			updateValue
+			updateValue,
 		};
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/components/page/page.text.vue b/packages/client/src/components/page/page.text.vue
index b4abe82840..689c484521 100644
--- a/packages/client/src/components/page/page.text.vue
+++ b/packages/client/src/components/page/page.text.vue
@@ -19,12 +19,12 @@ export default defineComponent({
 	props: {
 		block: {
 			type: Object as PropType<TextBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	data() {
 		return {
@@ -38,15 +38,15 @@ export default defineComponent({
 			} else {
 				return [];
 			}
-		}
+		},
 	},
 	watch: {
 		'hpml.vars': {
 			handler() {
 				this.text = this.hpml.interpolate(this.block.text);
 			},
-			deep: true
-		}
+			deep: true,
+		},
 	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.textarea-input.vue b/packages/client/src/components/page/page.textarea-input.vue
index 6e082b2bef..6be0092851 100644
--- a/packages/client/src/components/page/page.textarea-input.vue
+++ b/packages/client/src/components/page/page.textarea-input.vue
@@ -16,17 +16,17 @@ import { TextInputVarBlock } from '@/scripts/hpml/block';
 
 export default defineComponent({
 	components: {
-		MkTextarea
+		MkTextarea,
 	},
 	props: {
 		block: {
 			type: Object as PropType<TextInputVarBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	setup(props, ctx) {
 		const value = computed(() => {
@@ -40,8 +40,8 @@ export default defineComponent({
 
 		return {
 			value,
-			updateValue
+			updateValue,
 		};
-	}
+	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.textarea.vue b/packages/client/src/components/page/page.textarea.vue
index 5b4ee2b452..f809925081 100644
--- a/packages/client/src/components/page/page.textarea.vue
+++ b/packages/client/src/components/page/page.textarea.vue
@@ -10,17 +10,17 @@ import MkTextarea from '../form/textarea.vue';
 
 export default defineComponent({
 	components: {
-		MkTextarea
+		MkTextarea,
 	},
 	props: {
 		block: {
 			type: Object as PropType<TextBlock>,
-			required: true
+			required: true,
 		},
 		hpml: {
 			type: Object as PropType<Hpml>,
-			required: true
-		}
+			required: true,
+		},
 	},
 	data() {
 		return {
@@ -32,8 +32,8 @@ export default defineComponent({
 			handler() {
 				this.text = this.hpml.interpolate(this.block.text);
 			},
-			deep: true
-		}
-	}
+			deep: true,
+		},
+	},
 });
 </script>
diff --git a/packages/client/src/components/page/page.vue b/packages/client/src/components/page/page.vue
index 58c43b22bc..b5cb73c009 100644
--- a/packages/client/src/components/page/page.vue
+++ b/packages/client/src/components/page/page.vue
@@ -15,12 +15,12 @@ import { defaultStore } from '@/store';
 
 export default defineComponent({
 	components: {
-		XBlock
+		XBlock,
 	},
 	props: {
 		page: {
 			type: Object as PropType<Record<string, any>>,
-			required: true
+			required: true,
 		},
 	},
 	setup(props, ctx) {
@@ -28,7 +28,7 @@ export default defineComponent({
 			randomSeed: Math.random(),
 			visitor: $i,
 			url: url,
-			enableAiScript: !defaultStore.state.disablePagesScript
+			enableAiScript: !defaultStore.state.disablePagesScript,
 		});
 
 		onMounted(() => {
diff --git a/packages/client/src/directives/appear.ts b/packages/client/src/directives/appear.ts
index a504d11ef9..7fa43fc34a 100644
--- a/packages/client/src/directives/appear.ts
+++ b/packages/client/src/directives/appear.ts
@@ -18,5 +18,5 @@ export default {
 
 	unmounted(src, binding, vn) {
 		if (src._observer_) src._observer_.disconnect();
-	}
+	},
 } as Directive;
diff --git a/packages/client/src/directives/click-anime.ts b/packages/client/src/directives/click-anime.ts
index 099aac28f7..e2f514b7ca 100644
--- a/packages/client/src/directives/click-anime.ts
+++ b/packages/client/src/directives/click-anime.ts
@@ -27,5 +27,5 @@ export default {
 			el.classList.add('_anime_bounce_standBy');
 		});
 		*/
-	}
+	},
 } as Directive;
diff --git a/packages/client/src/directives/follow-append.ts b/packages/client/src/directives/follow-append.ts
index b0e99628b0..62e0ac3b94 100644
--- a/packages/client/src/directives/follow-append.ts
+++ b/packages/client/src/directives/follow-append.ts
@@ -31,5 +31,5 @@ export default {
 
 	unmounted(src, binding, vn) {
 		if (src._ro_) src._ro_.unobserve(src);
-	}
+	},
 } as Directive;
diff --git a/packages/client/src/directives/get-size.ts b/packages/client/src/directives/get-size.ts
index 76b54ea4b0..ff3bdd78ac 100644
--- a/packages/client/src/directives/get-size.ts
+++ b/packages/client/src/directives/get-size.ts
@@ -39,7 +39,7 @@ export default {
 		});
 		resize.observe(src);
 
-		mountings.set(src, { resize, fn: binding.value, });
+		mountings.set(src, { resize, fn: binding.value });
 		calc(src);
 	},
 
@@ -50,5 +50,5 @@ export default {
 		info.resize.disconnect();
 		if (info.intersection) info.intersection.disconnect();
 		mountings.delete(src);
-	}
+	},
 } as Directive<Element, (w: number, h: number) => void>;
diff --git a/packages/client/src/directives/hotkey.ts b/packages/client/src/directives/hotkey.ts
index d813a95074..dfc5f646a4 100644
--- a/packages/client/src/directives/hotkey.ts
+++ b/packages/client/src/directives/hotkey.ts
@@ -20,5 +20,5 @@ export default {
 		} else {
 			el.removeEventListener('keydown', el._keyHandler);
 		}
-	}
+	},
 } as Directive;
diff --git a/packages/client/src/directives/ripple.ts b/packages/client/src/directives/ripple.ts
index 5329d021fb..d32f7ab441 100644
--- a/packages/client/src/directives/ripple.ts
+++ b/packages/client/src/directives/ripple.ts
@@ -14,5 +14,5 @@ export default {
 
 			popup(Ripple, { x, y }, {}, 'end');
 		});
-	}
+	},
 };
diff --git a/packages/client/src/directives/size.ts b/packages/client/src/directives/size.ts
index c472a528ac..c8f446e3a8 100644
--- a/packages/client/src/directives/size.ts
+++ b/packages/client/src/directives/size.ts
@@ -29,7 +29,7 @@ function getClassOrder(width: number, queue: Value): ClassOrder {
 		remove: [
 			...(queue.max ? queue.max.filter(v => width > v).map(getMaxClass) : []),
 			...(queue.min ? queue.min.filter(v => width < v).map(getMinClass) : []),
-		]
+		],
 	};
 }
 
@@ -103,5 +103,5 @@ export default {
 		info.resize.disconnect();
 		if (info.intersection) info.intersection.disconnect();
 		mountings.delete(src);
-	}
+	},
 } as Directive<Element, Value>;
diff --git a/packages/client/src/directives/user-preview.ts b/packages/client/src/directives/user-preview.ts
index c461676624..ed5f00ca65 100644
--- a/packages/client/src/directives/user-preview.ts
+++ b/packages/client/src/directives/user-preview.ts
@@ -27,7 +27,7 @@ export class UserPreview {
 		popup(defineAsyncComponent(() => import('@/components/MkUserPreview.vue')), {
 			showing,
 			q: this.user,
-			source: this.el
+			source: this.el,
 		}, {
 			mouseover: () => {
 				window.clearTimeout(this.hideTimer);
@@ -41,7 +41,7 @@ export class UserPreview {
 		this.promise = {
 			cancel: () => {
 				showing.value = false;
-			}
+			},
 		};
 
 		this.checkTimer = window.setInterval(() => {
@@ -114,5 +114,5 @@ export default {
 
 		const self = el._userPreviewDirective_;
 		self.preview.detach();
-	}
+	},
 } as Directive;
diff --git a/packages/client/src/instance.ts b/packages/client/src/instance.ts
index 4f591f4fc1..51464f32fb 100644
--- a/packages/client/src/instance.ts
+++ b/packages/client/src/instance.ts
@@ -14,7 +14,7 @@ export const instance: Misskey.entities.InstanceMetadata = reactive(instanceData
 
 export async function fetchInstance() {
 	const meta = await api('meta', {
-		detail: false
+		detail: false,
 	});
 
 	for (const [k, v] of Object.entries(meta)) {
diff --git a/packages/client/src/pages/admin/metrics.vue b/packages/client/src/pages/admin/metrics.vue
index e0e47e667f..db8e448639 100644
--- a/packages/client/src/pages/admin/metrics.vue
+++ b/packages/client/src/pages/admin/metrics.vue
@@ -65,7 +65,7 @@ import {
   Legend,
   Title,
   Tooltip,
-  SubTitle
+  SubTitle,
 } from 'chart.js';
 import MkButton from '@/components/MkButton.vue';
 import MkSelect from '@/components/form/select.vue';
@@ -89,7 +89,7 @@ Chart.register(
   Legend,
   Title,
   Tooltip,
-  SubTitle
+  SubTitle,
 );
 
 const alpha = (hex, a) => {
@@ -155,13 +155,13 @@ export default defineComponent({
 			this.connection.on('statsLog', this.onStatsLog);
 			this.connection.send('requestLog', {
 				id: Math.random().toString().substr(2, 8),
-				length: 150
+				length: 150,
 			});
 
 			this.$nextTick(() => {
 				this.queueConnection.send('requestLog', {
 					id: Math.random().toString().substr(2, 8),
-					length: 200
+					length: 200,
 				});
 			});
 		});
@@ -190,7 +190,7 @@ export default defineComponent({
 						borderWidth: 2,
 						borderColor: '#86b300',
 						backgroundColor: alpha('#86b300', 0.1),
-						data: []
+						data: [],
 					}, {
 						label: 'MEM (active)',
 						pointRadius: 0,
@@ -198,7 +198,7 @@ export default defineComponent({
 						borderWidth: 2,
 						borderColor: '#935dbf',
 						backgroundColor: alpha('#935dbf', 0.02),
-						data: []
+						data: [],
 					}, {
 						label: 'MEM (used)',
 						pointRadius: 0,
@@ -207,8 +207,8 @@ export default defineComponent({
 						borderColor: '#935dbf',
 						borderDash: [5, 5],
 						fill: false,
-						data: []
-					}]
+						data: [],
+					}],
 				},
 				options: {
 					aspectRatio: 3,
@@ -217,14 +217,14 @@ export default defineComponent({
 							left: 16,
 							right: 16,
 							top: 16,
-							bottom: 0
-						}
+							bottom: 0,
+						},
 					},
 					legend: {
 						position: 'bottom',
 						labels: {
 							boxWidth: 16,
-						}
+						},
 					},
 					scales: {
 						x: {
@@ -235,7 +235,7 @@ export default defineComponent({
 							},
 							ticks: {
 								display: false,
-							}
+							},
 						},
 						y: {
 							position: 'right',
@@ -246,15 +246,15 @@ export default defineComponent({
 							},
 							ticks: {
 								display: false,
-								max: 100
-							}
-						}
+								max: 100,
+							},
+						},
 					},
 					tooltips: {
 						intersect: false,
 						mode: 'index',
-					}
-				}
+					},
+				},
 			}));
 		},
 
@@ -271,7 +271,7 @@ export default defineComponent({
 						borderWidth: 2,
 						borderColor: '#94a029',
 						backgroundColor: alpha('#94a029', 0.1),
-						data: []
+						data: [],
 					}, {
 						label: 'Out',
 						pointRadius: 0,
@@ -279,8 +279,8 @@ export default defineComponent({
 						borderWidth: 2,
 						borderColor: '#ff9156',
 						backgroundColor: alpha('#ff9156', 0.1),
-						data: []
-					}]
+						data: [],
+					}],
 				},
 				options: {
 					aspectRatio: 3,
@@ -289,14 +289,14 @@ export default defineComponent({
 							left: 16,
 							right: 16,
 							top: 16,
-							bottom: 0
-						}
+							bottom: 0,
+						},
 					},
 					legend: {
 						position: 'bottom',
 						labels: {
 							boxWidth: 16,
-						}
+						},
 					},
 					scales: {
 						x: {
@@ -306,8 +306,8 @@ export default defineComponent({
 								zeroLineColor: this.gridColor,
 							},
 							ticks: {
-								display: false
-							}
+								display: false,
+							},
 						},
 						y: {
 							position: 'right',
@@ -318,14 +318,14 @@ export default defineComponent({
 							},
 							ticks: {
 								display: false,
-							}
-						}
+							},
+						},
 					},
 					tooltips: {
 						intersect: false,
 						mode: 'index',
-					}
-				}
+					},
+				},
 			}));
 		},
 
@@ -342,7 +342,7 @@ export default defineComponent({
 						borderWidth: 2,
 						borderColor: '#94a029',
 						backgroundColor: alpha('#94a029', 0.1),
-						data: []
+						data: [],
 					}, {
 						label: 'Write',
 						pointRadius: 0,
@@ -350,8 +350,8 @@ export default defineComponent({
 						borderWidth: 2,
 						borderColor: '#ff9156',
 						backgroundColor: alpha('#ff9156', 0.1),
-						data: []
-					}]
+						data: [],
+					}],
 				},
 				options: {
 					aspectRatio: 3,
@@ -360,14 +360,14 @@ export default defineComponent({
 							left: 16,
 							right: 16,
 							top: 16,
-							bottom: 0
-						}
+							bottom: 0,
+						},
 					},
 					legend: {
 						position: 'bottom',
 						labels: {
 							boxWidth: 16,
-						}
+						},
 					},
 					scales: {
 						x: {
@@ -377,8 +377,8 @@ export default defineComponent({
 								zeroLineColor: this.gridColor,
 							},
 							ticks: {
-								display: false
-							}
+								display: false,
+							},
 						},
 						y: {
 							position: 'right',
@@ -389,14 +389,14 @@ export default defineComponent({
 							},
 							ticks: {
 								display: false,
-							}
-						}
+							},
+						},
 					},
 					tooltips: {
 						intersect: false,
 						mode: 'index',
-					}
-				}
+					},
+				},
 			}));
 		},
 
@@ -458,7 +458,7 @@ export default defineComponent({
 		resume() {
 			this.paused = false;
 		},
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/auth.form.vue b/packages/client/src/pages/auth.form.vue
index 024a7a2c5b..1546735266 100644
--- a/packages/client/src/pages/auth.form.vue
+++ b/packages/client/src/pages/auth.form.vue
@@ -26,7 +26,7 @@ import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		MkButton
+		MkButton,
 	},
 	props: ['session'],
 	computed: {
@@ -37,12 +37,12 @@ export default defineComponent({
 		},
 		app(): any {
 			return this.session.app;
-		}
+		},
 	},
 	methods: {
 		cancel() {
 			os.api('auth/deny', {
-				token: this.session.token
+				token: this.session.token,
 			}).then(() => {
 				this.$emit('denied');
 			});
@@ -50,11 +50,11 @@ export default defineComponent({
 
 		accept() {
 			os.api('auth/accept', {
-				token: this.session.token
+				token: this.session.token,
 			}).then(() => {
 				this.$emit('accepted');
 			});
-		}
-	}
+		},
+	},
 });
 </script>
diff --git a/packages/client/src/pages/emojis.emoji.vue b/packages/client/src/pages/emojis.emoji.vue
index 04bf4ef167..40fe496520 100644
--- a/packages/client/src/pages/emojis.emoji.vue
+++ b/packages/client/src/pages/emojis.emoji.vue
@@ -28,7 +28,7 @@ function menu(ev) {
 		action: () => {
 			copyToClipboard(`:${props.emoji.name}:`);
 			os.success();
-		}
+		},
 	}], ev.currentTarget ?? ev.target);
 }
 </script>
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 0438969afa..08f993c426 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
@@ -58,8 +58,8 @@ withDefaults(defineProps<{
 		message: null,
 		primary: false,
 		var: null,
-		fn: 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 191321ae14..7ebf8c1478 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
@@ -32,7 +32,7 @@ withDefaults(defineProps<{
 	value: {
 		name: '',
 		width: 300,
-		height: 200
-	}
+		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 8625c26e78..994d0b5b00 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
@@ -28,7 +28,7 @@ withDefaults(defineProps<{
 	value: any
 }>(), {
 	value: {
-		name: ''
-	}
+		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 c93caeb9bd..f56c8aec8a 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
@@ -42,8 +42,8 @@ const props = withDefaults(defineProps<{
 }>(), {
 	value: {
 		children: [],
-		var: null
-	}
+		var: null,
+	},
 });
 
 const getPageBlockList = inject<(any) => any>('getPageBlockList');
@@ -51,7 +51,7 @@ const getPageBlockList = inject<(any) => any>('getPageBlockList');
 async function add() {
 	const { canceled, result: type } = await os.select({
 		title: i18n.ts._pages.chooseBlock,
-		groupedItems: getPageBlockList()
+		groupedItems: getPageBlockList(),
 	});
 	if (canceled) return;
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
index 4d471e7b94..4b3c6cbf10 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
@@ -25,8 +25,8 @@ const props = withDefaults(defineProps<{
 	value: any
 }>(), {
 	value: {
-		fileId: null
-	}
+		fileId: null,
+	},
 });
 
 let file: any = $ref(null);
@@ -43,7 +43,7 @@ onMounted(async () => {
 		await choose();
 	} else {
 		os.api('drive/files/show', {
-			fileId: props.value.fileId
+			fileId: props.value.fileId,
 		}).then(fileResponse => {
 			file = fileResponse;
 		});
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
index 5e494ee23b..c3b3e3b37e 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
@@ -31,8 +31,8 @@ const props = withDefaults(defineProps<{
 }>(), {
 	value: {
 		note: null,
-		detailed: false
-	}
+		detailed: false,
+	},
 });
 
 let id: any = $ref(props.value.note);
@@ -47,6 +47,6 @@ watch(id, async () => {
 
 	note = await os.api('notes/show', { noteId: props.value.note });
 }, {
-	immediate: true
+	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 a8fb702329..dc89d0287b 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
@@ -28,7 +28,7 @@ withDefaults(defineProps<{
 	value: any
 }>(), {
 	value: {
-		name: ''
-	}
+		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 39be01ab32..9592d36829 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
@@ -25,7 +25,7 @@ withDefaults(defineProps<{
 	value: {
 		text: '',
 		attachCanvasImage: false,
-		canvasId: ''
-	}
+		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 754af477b6..1aa2f5ca4b 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
@@ -25,8 +25,8 @@ const props = withDefaults(defineProps<{
 	value: {
 		name: '',
 		title: '',
-		values: []
-	}
+		values: [],
+	},
 });
 
 let values: string = $ref(props.value.values.join('\n'));
@@ -34,6 +34,6 @@ let values: string = $ref(props.value.values.join('\n'));
 watch(values, () => {
 	props.value.values = values.split('\n');
 }, {
-	deep: true
+	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 c7b87c660b..f18188ce61 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
@@ -33,8 +33,8 @@ const props = withDefaults(defineProps<{
 }>(), {
 	value: {
 		title: null,
-		children: []
-	}
+		children: [],
+	},
 });
 
 const getPageBlockList = inject<(any) => any>('getPageBlockList');
@@ -42,7 +42,7 @@ const getPageBlockList = inject<(any) => any>('getPageBlockList');
 async function rename() {
 	const { canceled, result: title } = await os.inputText({
 		title: 'Enter title',
-		default: props.value.title
+		default: props.value.title,
 	});
 	if (canceled) return;
 	props.value.title = title;
@@ -51,7 +51,7 @@ async function rename() {
 async function add() {
 	const { canceled, result: type } = await os.select({
 		title: i18n.ts._pages.chooseBlock,
-		groupedItems: getPageBlockList()
+		groupedItems: getPageBlockList(),
 	});
 	if (canceled) return;
 
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue b/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
index c74b17cc2c..96d35c3966 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
@@ -22,8 +22,8 @@ withDefaults(defineProps<{
 	value: any
 }>(), {
 	value: {
-		name: ''
-	}
+		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 99631c4dae..8cbae1caf5 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
@@ -21,7 +21,7 @@ withDefaults(defineProps<{
 	value: any
 }>(), {
 	value: {
-		name: ''
-	}
+		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 e0ebe68dda..27274253b4 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
@@ -18,8 +18,8 @@ withDefaults(defineProps<{
 	value: any
 }>(), {
 	value: {
-		text: ''
-	}
+		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 4b417e39a7..973f32242b 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
@@ -22,7 +22,7 @@ withDefaults(defineProps<{
 	value: any
 }>(), {
 	value: {
-		name: ''
-	}
+		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 dca7de8df9..e0c05df911 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
@@ -18,8 +18,8 @@ withDefaults(defineProps<{
 	value: any
 }>(), {
 	value: {
-		text: ''
-	}
+		text: '',
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index efc9aac2a7..03228b8e01 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -31,24 +31,24 @@ export default defineComponent({
 	props: {
 		expanded: {
 			type: Boolean,
-			default: true
+			default: true,
 		},
 		removable: {
 			type: Boolean,
-			default: true
+			default: true,
 		},
 		draggable: {
 			type: Boolean,
-			default: false
+			default: false,
 		},
 		error: {
 			required: false,
-			default: null
+			default: null,
 		},
 		warn: {
 			required: false,
-			default: null
-		}
+			default: null,
+		},
 	},
 	emits: ['toggle', 'remove'],
 	data() {
@@ -63,8 +63,8 @@ export default defineComponent({
 		},
 		remove() {
 			this.$emit('remove');
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/page-editor/page-editor.script-block.vue b/packages/client/src/pages/page-editor/page-editor.script-block.vue
index bb07adaae2..1f621e185f 100644
--- a/packages/client/src/pages/page-editor/page-editor.script-block.vue
+++ b/packages/client/src/pages/page-editor/page-editor.script-block.vue
@@ -78,17 +78,17 @@ export default defineComponent({
 	props: {
 		getExpectedType: {
 			required: false,
-			default: null
+			default: null,
 		},
 		modelValue: {
-			required: true
+			required: true,
 		},
 		title: {
-			required: false
+			required: false,
 		},
 		removable: {
 			required: false,
-			default: false
+			default: false,
 		},
 		hpml: {
 			required: true,
@@ -101,8 +101,8 @@ export default defineComponent({
 		},
 		draggable: {
 			required: false,
-			default: false
-		}
+			default: false,
+		},
 	},
 
 	data() {
@@ -131,11 +131,11 @@ export default defineComponent({
 			handler() {
 				this.modelValue.value.slots = this.slots.split('\n').map(x => ({
 					name: x,
-					type: null
+					type: null,
 				}));
 			},
-			deep: true
-		}
+			deep: true,
+		},
 	},
 
 	created() {
@@ -150,7 +150,7 @@ export default defineComponent({
 				const id = uuid();
 				this.modelValue.value = {
 					slots: [],
-					expression: { id, type: null }
+					expression: { id, type: null },
 				};
 				return;
 			}
@@ -194,13 +194,13 @@ export default defineComponent({
 			const emptySlotIndex = args.findIndex(x => x.type === null);
 			if (emptySlotIndex !== -1 && emptySlotIndex < args.length) {
 				this.warn = {
-					slot: emptySlotIndex
+					slot: emptySlotIndex,
 				};
 			} else {
 				this.warn = null;
 			}
 		}, {
-			deep: true
+			deep: true,
 		});
 
 		this.$watch(() => this.hpml.variables, () => {
@@ -208,7 +208,7 @@ export default defineComponent({
 				this.error = this.hpml.typeCheck(this.modelValue);
 			}
 		}, {
-			deep: true
+			deep: true,
 		});
 	},
 
@@ -216,7 +216,7 @@ export default defineComponent({
 		async changeType() {
 			const { canceled, result: type } = await os.select({
 				title: this.$ts._pages.selectType,
-				groupedItems: this.getScriptBlockList(this.getExpectedType ? this.getExpectedType() : null)
+				groupedItems: this.getScriptBlockList(this.getExpectedType ? this.getExpectedType() : null),
 			});
 			if (canceled) return;
 			this.modelValue.type = type;
@@ -224,8 +224,8 @@ export default defineComponent({
 
 		_getExpectedType(slot: number) {
 			return this.hpml.getExpectedType(this.modelValue, slot);
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue
index 53a6dd3469..8230adaf1f 100644
--- a/packages/client/src/pages/welcome.entrance.b.vue
+++ b/packages/client/src/pages/welcome.entrance.b.vue
@@ -82,7 +82,7 @@ export default defineComponent({
 
 		os.api('hashtags/list', {
 			sort: '+mentionedLocalUsers',
-			limit: 8
+			limit: 8,
 		}).then(tags => {
 			this.tags = tags;
 		});
@@ -91,13 +91,13 @@ export default defineComponent({
 	methods: {
 		signin() {
 			os.popup(XSigninDialog, {
-				autoSet: true
+				autoSet: true,
 			}, {}, 'closed');
 		},
 
 		signup() {
 			os.popup(XSignupDialog, {
-				autoSet: true
+				autoSet: true,
 			}, {}, 'closed');
 		},
 
@@ -107,24 +107,24 @@ export default defineComponent({
 				icon: 'ti ti-info-circle',
 				action: () => {
 					os.pageWindow('/about');
-				}
+				},
 			}, {
 				text: this.$ts.aboutMisskey,
 				icon: 'ti ti-info-circle',
 				action: () => {
 					os.pageWindow('/about-misskey');
-				}
+				},
 			}, null, {
 				text: this.$ts.help,
 				icon: 'ti ti-question-circle',
 				action: () => {
 					window.open(`https://misskey-hub.net/help.md`, '_blank');
-				}
+				},
 			}], ev.currentTarget ?? ev.target);
 		},
 
-		number
-	}
+		number,
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
index bae3f2ed9d..d2d07bb1f0 100644
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ b/packages/client/src/pages/welcome.entrance.c.vue
@@ -102,7 +102,7 @@ export default defineComponent({
 
 		os.api('hashtags/list', {
 			sort: '+mentionedLocalUsers',
-			limit: 8
+			limit: 8,
 		}).then(tags => {
 			this.tags = tags;
 		});
@@ -111,13 +111,13 @@ export default defineComponent({
 	methods: {
 		signin() {
 			os.popup(XSigninDialog, {
-				autoSet: true
+				autoSet: true,
 			}, {}, 'closed');
 		},
 
 		signup() {
 			os.popup(XSignupDialog, {
-				autoSet: true
+				autoSet: true,
 			}, {}, 'closed');
 		},
 
@@ -127,24 +127,24 @@ export default defineComponent({
 				icon: 'ti ti-info-circle',
 				action: () => {
 					os.pageWindow('/about');
-				}
+				},
 			}, {
 				text: this.$ts.aboutMisskey,
 				icon: 'ti ti-info-circle',
 				action: () => {
 					os.pageWindow('/about-misskey');
-				}
+				},
 			}, null, {
 				text: this.$ts.help,
 				icon: 'ti ti-question-circle',
 				action: () => {
 					window.open(`https://misskey-hub.net/help.md`, '_blank');
-				}
+				},
 			}], ev.currentTarget ?? ev.target);
 		},
 
-		number
-	}
+		number,
+	},
 });
 </script>
 
diff --git a/packages/client/src/pages/welcome.timeline.vue b/packages/client/src/pages/welcome.timeline.vue
index f45a15448d..d6a88540d1 100644
--- a/packages/client/src/pages/welcome.timeline.vue
+++ b/packages/client/src/pages/welcome.timeline.vue
@@ -32,7 +32,7 @@ export default defineComponent({
 	components: {
 		XReactionsViewer,
 		XMediaList,
-		XPoll
+		XPoll,
 	},
 
 	data() {
@@ -52,7 +52,7 @@ export default defineComponent({
 		if (this.$refs.scroll.clientHeight > window.innerHeight) {
 			this.isScrolling = true;
 		}
-	}
+	},
 });
 </script>
 
diff --git a/packages/client/src/plugin.ts b/packages/client/src/plugin.ts
index de1c955675..3a00cd0455 100644
--- a/packages/client/src/plugin.ts
+++ b/packages/client/src/plugin.ts
@@ -12,7 +12,7 @@ export function install(plugin) {
 
 	const aiscript = new AiScript(createPluginEnv({
 		plugin: plugin,
-		storageKey: 'plugins:' + plugin.id
+		storageKey: 'plugins:' + plugin.id,
 	}), {
 		in: (q) => {
 			return new Promise(ok => {
@@ -86,7 +86,7 @@ function registerPostFormAction({ pluginId, title, handler }) {
 			pluginContexts.get(pluginId).execFn(handler, [utils.jsToVal(form), values.FN_NATIVE(([key, value]) => {
 				update(key.value, value.value);
 			})]);
-		}
+		},
 	});
 }
 
@@ -94,7 +94,7 @@ function registerUserAction({ pluginId, title, handler }) {
 	userActions.push({
 		title, handler: (user) => {
 			pluginContexts.get(pluginId).execFn(handler, [utils.jsToVal(user)]);
-		}
+		},
 	});
 }
 
@@ -102,7 +102,7 @@ function registerNoteAction({ pluginId, title, handler }) {
 	noteActions.push({
 		title, handler: (note) => {
 			pluginContexts.get(pluginId).execFn(handler, [utils.jsToVal(note)]);
-		}
+		},
 	});
 }
 
@@ -110,7 +110,7 @@ function registerNoteViewInterruptor({ pluginId, handler }) {
 	noteViewInterruptors.push({
 		handler: async (note) => {
 			return utils.valToJs(await pluginContexts.get(pluginId).execFn(handler, [utils.jsToVal(note)]));
-		}
+		},
 	});
 }
 
@@ -118,6 +118,6 @@ function registerNotePostInterruptor({ pluginId, handler }) {
 	notePostInterruptors.push({
 		handler: async (note) => {
 			return utils.valToJs(await pluginContexts.get(pluginId).execFn(handler, [utils.jsToVal(note)]));
-		}
+		},
 	});
 }
diff --git a/packages/client/src/scripts/2fa.ts b/packages/client/src/scripts/2fa.ts
index d1b9581e72..62a38ff02a 100644
--- a/packages/client/src/scripts/2fa.ts
+++ b/packages/client/src/scripts/2fa.ts
@@ -7,15 +7,15 @@ export function byteify(string: string, encoding: 'ascii' | 'base64' | 'hex') {
 				atob(
 					string
 						.replace(/-/g, '+')
-						.replace(/_/g, '/')
+						.replace(/_/g, '/'),
 				),
-				c => c.charCodeAt(0)
+				c => c.charCodeAt(0),
 			);
 		case 'hex':
 			return new Uint8Array(
 				string
 					.match(/.{1,2}/g)
-					.map(byte => parseInt(byte, 16))
+					.map(byte => parseInt(byte, 16)),
 			);
 	}
 }
@@ -24,7 +24,7 @@ export function hexify(buffer: ArrayBuffer) {
 	return Array.from(new Uint8Array(buffer))
 		.reduce(
 			(str, byte) => str + byte.toString(16).padStart(2, '0'),
-			''
+			'',
 		);
 }
 
diff --git a/packages/client/src/scripts/autocomplete.ts b/packages/client/src/scripts/autocomplete.ts
index 62de37ed27..1bae3790f5 100644
--- a/packages/client/src/scripts/autocomplete.ts
+++ b/packages/client/src/scripts/autocomplete.ts
@@ -171,7 +171,7 @@ export class Autocomplete {
 			}, {
 				done: (res) => {
 					this.complete(res);
-				}
+				},
 			});
 
 			this.suggestion = {
diff --git a/packages/client/src/scripts/focus.ts b/packages/client/src/scripts/focus.ts
index 0894877820..d6802fa322 100644
--- a/packages/client/src/scripts/focus.ts
+++ b/packages/client/src/scripts/focus.ts
@@ -4,7 +4,7 @@ export function focusPrev(el: Element | null, self = false, scroll = true) {
 	if (el) {
 		if (el.hasAttribute('tabindex')) {
 			(el as HTMLElement).focus({
-				preventScroll: !scroll
+				preventScroll: !scroll,
 			});
 		} else {
 			focusPrev(el.previousElementSibling, true);
@@ -18,7 +18,7 @@ export function focusNext(el: Element | null, self = false, scroll = true) {
 	if (el) {
 		if (el.hasAttribute('tabindex')) {
 			(el as HTMLElement).focus({
-				preventScroll: !scroll
+				preventScroll: !scroll,
 			});
 		} else {
 			focusPrev(el.nextElementSibling, true);
diff --git a/packages/client/src/scripts/format-time-string.ts b/packages/client/src/scripts/format-time-string.ts
index fb4718c007..c20db5e827 100644
--- a/packages/client/src/scripts/format-time-string.ts
+++ b/packages/client/src/scripts/format-time-string.ts
@@ -7,7 +7,7 @@ const defaultLocaleStringFormats: {[index: string]: string} = {
 	'hour': 'numeric',
 	'minute': 'numeric',
 	'second': 'numeric',
-	'timeZoneName': 'short'
+	'timeZoneName': 'short',
 };
 
 function formatLocaleString(date: Date, format: string): string {
diff --git a/packages/client/src/scripts/gen-search-query.ts b/packages/client/src/scripts/gen-search-query.ts
index b413cbbab1..da7d622632 100644
--- a/packages/client/src/scripts/gen-search-query.ts
+++ b/packages/client/src/scripts/gen-search-query.ts
@@ -25,6 +25,6 @@ export async function genSearchQuery(v: any, q: string) {
 	return {
 		query: q.split(' ').filter(x => !x.startsWith('/') && !x.startsWith('@')).join(' '),
 		host: host,
-		userId: userId
+		userId: userId,
 	};
 }
diff --git a/packages/client/src/scripts/get-static-image-url.ts b/packages/client/src/scripts/get-static-image-url.ts
index e9a3e87cc8..79dbcf9325 100644
--- a/packages/client/src/scripts/get-static-image-url.ts
+++ b/packages/client/src/scripts/get-static-image-url.ts
@@ -11,6 +11,6 @@ export function getStaticImageUrl(baseUrl: string): string {
 	const dummy = `${u.host}${u.pathname}`;	// 拡張子がないとキャッシュしてくれないCDNがあるので
 	return `${instanceUrl}/proxy/${dummy}?${url.query({
 		url: u.href,
-		static: '1'
+		static: '1',
 	})}`;
 }
diff --git a/packages/client/src/scripts/hotkey.ts b/packages/client/src/scripts/hotkey.ts
index bd8c3b6cab..4a0ded637d 100644
--- a/packages/client/src/scripts/hotkey.ts
+++ b/packages/client/src/scripts/hotkey.ts
@@ -21,7 +21,7 @@ const parseKeymap = (keymap: Keymap) => Object.entries(keymap).map(([patterns, c
 	const result = {
 		patterns: [],
 		callback,
-		allowRepeat: true
+		allowRepeat: true,
 	} as Action;
 
 	if (patterns.match(/^\(.*\)$/) !== null) {
@@ -34,7 +34,7 @@ const parseKeymap = (keymap: Keymap) => Object.entries(keymap).map(([patterns, c
 			which: [],
 			ctrl: false,
 			alt: false,
-			shift: false
+			shift: false,
 		} as Pattern;
 
 		const keys = part.trim().split('+').map(x => x.trim().toLowerCase());
@@ -61,7 +61,7 @@ function match(ev: KeyboardEvent, patterns: Action['patterns']): boolean {
 		pattern.ctrl === ev.ctrlKey &&
 		pattern.shift === ev.shiftKey &&
 		pattern.alt === ev.altKey &&
-		!ev.metaKey
+		!ev.metaKey,
 	);
 }
 
diff --git a/packages/client/src/scripts/hpml/evaluator.ts b/packages/client/src/scripts/hpml/evaluator.ts
index 10023edffb..196b3142a1 100644
--- a/packages/client/src/scripts/hpml/evaluator.ts
+++ b/packages/client/src/scripts/hpml/evaluator.ts
@@ -35,7 +35,7 @@ export class Hpml {
 
 		if (this.opts.enableAiScript) {
 			this.aiscript = markRaw(new AiScript({ ...createAiScriptEnv({
-				storageKey: 'pages:' + this.page.id
+				storageKey: 'pages:' + this.page.id,
 			}), ...initAiLib(this) }, {
 				in: (q) => {
 					return new Promise(ok => {
@@ -75,7 +75,7 @@ export class Hpml {
 			SEED: opts.randomSeed ? opts.randomSeed : '',
 			YMD: `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`,
 			AISCRIPT_DISABLED: !this.opts.enableAiScript,
-			NULL: null
+			NULL: null,
 		};
 
 		this.eval();
@@ -198,7 +198,7 @@ export class Hpml {
 					slots: expr.value.slots.map(x => x.name),
 					exec: (slotArg: Record<string, any>) => {
 						return this.evaluate(expr.value.expression, scope.createChildScope(slotArg, expr.id));
-					}
+					},
 				} as Fn;
 			}
 			return;
diff --git a/packages/client/src/scripts/hpml/index.ts b/packages/client/src/scripts/hpml/index.ts
index 4e5aadfbd3..9a55a5c286 100644
--- a/packages/client/src/scripts/hpml/index.ts
+++ b/packages/client/src/scripts/hpml/index.ts
@@ -14,22 +14,22 @@ export type Fn = {
 export type Type = 'string' | 'number' | 'boolean' | 'stringArray' | null;
 
 export const literalDefs: Record<string, { out: any; category: string; icon: any; }> = {
-	text: { out: 'string', category: 'value', icon: 'ti ti-quote', },
-	multiLineText: { out: 'string', category: 'value', icon: 'fas fa-align-left', },
-	textList: { out: 'stringArray', category: 'value', icon: 'fas fa-list', },
-	number: { out: 'number', category: 'value', icon: 'fas fa-sort-numeric-up', },
-	ref: { out: null, category: 'value', icon: 'fas fa-magic', },
-	aiScriptVar: { out: null, category: 'value', icon: 'fas fa-magic', },
-	fn: { out: 'function', category: 'value', icon: 'fas fa-square-root-alt', },
+	text: { out: 'string', category: 'value', icon: 'ti ti-quote' },
+	multiLineText: { out: 'string', category: 'value', icon: 'fas fa-align-left' },
+	textList: { out: 'stringArray', category: 'value', icon: 'fas fa-list' },
+	number: { out: 'number', category: 'value', icon: 'fas fa-sort-numeric-up' },
+	ref: { out: null, category: 'value', icon: 'fas fa-magic' },
+	aiScriptVar: { out: null, category: 'value', icon: 'fas fa-magic' },
+	fn: { out: 'function', category: 'value', icon: 'fas fa-square-root-alt' },
 };
 
 export const blockDefs = [
 	...Object.entries(literalDefs).map(([k, v]) => ({
-		type: k, out: v.out, category: v.category, icon: v.icon
+		type: k, out: v.out, category: v.category, icon: v.icon,
 	})),
 	...Object.entries(funcDefs).map(([k, v]) => ({
-		type: k, out: v.out, category: v.category, icon: v.icon
-	}))
+		type: k, out: v.out, category: v.category, icon: v.icon,
+	})),
 ];
 
 export type PageVar = { name: string; value: any; type: Type; };
@@ -82,7 +82,7 @@ export class HpmlScope {
 
 		throw new HpmlError(
 			`No such variable '${name}' in scope '${this.name}'`, {
-				scope: this.layerdStates
+				scope: this.layerdStates,
 			});
 	}
 }
diff --git a/packages/client/src/scripts/lookup-user.ts b/packages/client/src/scripts/lookup-user.ts
index 2d00e51621..3ab9d55300 100644
--- a/packages/client/src/scripts/lookup-user.ts
+++ b/packages/client/src/scripts/lookup-user.ts
@@ -19,7 +19,7 @@ export async function lookupUser() {
 		if (_notFound) {
 			os.alert({
 				type: 'error',
-				text: i18n.ts.noSuchUser
+				text: i18n.ts.noSuchUser,
 			});
 		} else {
 			_notFound = true;
diff --git a/packages/client/src/scripts/physics.ts b/packages/client/src/scripts/physics.ts
index f0a5b0fdd6..efda80f074 100644
--- a/packages/client/src/scripts/physics.ts
+++ b/packages/client/src/scripts/physics.ts
@@ -29,7 +29,7 @@ export function physics(container: HTMLElement) {
 			height: containerHeight,
 			background: 'transparent', // transparent to hide
 			wireframeBackground: 'transparent', // transparent to hide
-		}
+		},
 	});
 
 	// Disable to hide debug
@@ -43,7 +43,7 @@ export function physics(container: HTMLElement) {
 	const ground = Matter.Bodies.rectangle(containerCenterX, containerHeight + (groundThickness / 2), containerWidth, groundThickness, {
 		isStatic: true,
 		restitution: 0.1,
-		friction: 2
+		friction: 2,
 	});
 
 	//const wallRight = Matter.Bodies.rectangle(window.innerWidth+50, window.innerHeight/2, 100, window.innerHeight, wallopts);
@@ -68,8 +68,8 @@ export function physics(container: HTMLElement) {
 				top + (objEl.offsetHeight / 2),
 				Math.max(objEl.offsetWidth, objEl.offsetHeight) / 2,
 				{
-					restitution: 0.5
-				}
+					restitution: 0.5,
+				},
 			);
 		} else {
 			const style = window.getComputedStyle(objEl);
@@ -80,8 +80,8 @@ export function physics(container: HTMLElement) {
 				objEl.offsetHeight,
 				{
 					chamfer: { radius: parseInt(style.borderRadius || '0', 10) },
-					restitution: 0.5
-				}
+					restitution: 0.5,
+				},
 			);
 		}
 		objEl.id = obj.id.toString();
@@ -98,9 +98,9 @@ export function physics(container: HTMLElement) {
 		constraint: {
 			stiffness: 0.1,
 			render: {
-				visible: false
-			}
-		}
+				visible: false,
+			},
+		},
 	});
 
 	Matter.World.add(engine.world, mouseConstraint);
@@ -147,6 +147,6 @@ export function physics(container: HTMLElement) {
 			stop = true;
 			Matter.Runner.stop(runner);
 			window.clearInterval(intervalId);
-		}
+		},
 	};
 }
diff --git a/packages/client/src/scripts/please-login.ts b/packages/client/src/scripts/please-login.ts
index 3323968f71..b8fb853cc1 100644
--- a/packages/client/src/scripts/please-login.ts
+++ b/packages/client/src/scripts/please-login.ts
@@ -8,7 +8,7 @@ export function pleaseLogin(path?: string) {
 
 	popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {
 		autoSet: true,
-		message: i18n.ts.signinRequired
+		message: i18n.ts.signinRequired,
 	}, {
 		cancelled: () => {
 			if (path) {
diff --git a/packages/client/src/scripts/reaction-picker.ts b/packages/client/src/scripts/reaction-picker.ts
index a6d0940a40..fe32e719da 100644
--- a/packages/client/src/scripts/reaction-picker.ts
+++ b/packages/client/src/scripts/reaction-picker.ts
@@ -15,7 +15,7 @@ class ReactionPicker {
 		await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
 			src: this.src,
 			asReactionPicker: true,
-			manualShowing: this.manualShowing
+			manualShowing: this.manualShowing,
 		}, {
 			done: reaction => {
 				this.onChosen!(reaction);
@@ -26,7 +26,7 @@ class ReactionPicker {
 			closed: () => {
 				this.src.value = null;
 				this.onClosed!();
-			}
+			},
 		});
 	}
 
diff --git a/packages/client/src/scripts/show-suspended-dialog.ts b/packages/client/src/scripts/show-suspended-dialog.ts
index acfbc60e92..e11569ecd4 100644
--- a/packages/client/src/scripts/show-suspended-dialog.ts
+++ b/packages/client/src/scripts/show-suspended-dialog.ts
@@ -5,6 +5,6 @@ export function showSuspendedDialog() {
 	return os.alert({
 		type: 'error',
 		title: i18n.ts.yourAccountSuspendedTitle,
-		text: i18n.ts.yourAccountSuspendedDescription
+		text: i18n.ts.yourAccountSuspendedDescription,
 	});
 }
diff --git a/packages/client/src/scripts/theme-editor.ts b/packages/client/src/scripts/theme-editor.ts
index 6d88d6856c..944875ff15 100644
--- a/packages/client/src/scripts/theme-editor.ts
+++ b/packages/client/src/scripts/theme-editor.ts
@@ -61,7 +61,7 @@ export const convertToMisskeyTheme = (vm: ThemeViewModel, name: string, desc: st
 
 	return {
 		id: uuid(),
-		name, desc, author, props, base
+		name, desc, author, props, base,
 	};
 };
 
diff --git a/packages/client/src/scripts/use-note-capture.ts b/packages/client/src/scripts/use-note-capture.ts
index f1f976693e..e6bdb345c4 100644
--- a/packages/client/src/scripts/use-note-capture.ts
+++ b/packages/client/src/scripts/use-note-capture.ts
@@ -60,8 +60,8 @@ export function useNoteCapture(props: {
 					...choices[choice],
 					votes: choices[choice].votes + 1,
 					...($i && (body.userId === $i.id) ? {
-						isVoted: true
-					} : {})
+						isVoted: true,
+					} : {}),
 				};
 
 				note.value.poll.choices = choices;
diff --git a/packages/client/src/ui/classic.widgets.vue b/packages/client/src/ui/classic.widgets.vue
index ca919b168a..163ec982ce 100644
--- a/packages/client/src/ui/classic.widgets.vue
+++ b/packages/client/src/ui/classic.widgets.vue
@@ -14,13 +14,13 @@ import XWidgets from '@/components/MkWidgets.vue';
 
 export default defineComponent({
 	components: {
-		XWidgets
+		XWidgets,
 	},
 
 	props: {
 		place: {
 			type: String,
-		}
+		},
 	},
 
 	emits: ['mounted'],
@@ -57,10 +57,10 @@ export default defineComponent({
 		updateWidgets(widgets) {
 			this.$store.set('widgets', [
 				...this.$store.state.widgets.filter(w => w.place !== this.place),
-				...widgets
+				...widgets,
 			]);
-		}
-	}
+		},
+	},
 });
 </script>
 
diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue
index c60c5707f1..75b018cacd 100644
--- a/packages/client/src/ui/deck/direct-column.vue
+++ b/packages/client/src/ui/deck/direct-column.vue
@@ -25,7 +25,7 @@ const pagination = {
 	endpoint: 'notes/mentions' as const,
 	limit: 10,
 	params: {
-		visibility: 'specified'
+		visibility: 'specified',
 	},
 };
 </script>
diff --git a/packages/client/src/widgets/activity.calendar.vue b/packages/client/src/widgets/activity.calendar.vue
index 33b95b00db..84f6af1c13 100644
--- a/packages/client/src/widgets/activity.calendar.vue
+++ b/packages/client/src/widgets/activity.calendar.vue
@@ -47,7 +47,7 @@ props.activity.slice().forEach((d, i) => {
 		year: date.getFullYear(),
 		month: date.getMonth(),
 		day: date.getDate(),
-		weekday: date.getDay()
+		weekday: date.getDay(),
 	};
 
 	d.v = peak === 0 ? 0 : d.total / (peak / 2);
diff --git a/packages/client/src/widgets/server-metric/cpu-mem.vue b/packages/client/src/widgets/server-metric/cpu-mem.vue
index 429ccdf3ae..80a8e427e1 100644
--- a/packages/client/src/widgets/server-metric/cpu-mem.vue
+++ b/packages/client/src/widgets/server-metric/cpu-mem.vue
@@ -100,7 +100,7 @@ onMounted(() => {
 	props.connection.on('stats', onStats);
 	props.connection.on('statsLog', onStatsLog);
 	props.connection.send('requestLog', {
-		id: Math.random().toString().substr(2, 8)
+		id: Math.random().toString().substr(2, 8),
 	});
 });
 
diff --git a/packages/client/src/widgets/server-metric/net.vue b/packages/client/src/widgets/server-metric/net.vue
index 82801964f3..ab8b0fe471 100644
--- a/packages/client/src/widgets/server-metric/net.vue
+++ b/packages/client/src/widgets/server-metric/net.vue
@@ -70,7 +70,7 @@ onMounted(() => {
 	props.connection.on('stats', onStats);
 	props.connection.on('statsLog', onStatsLog);
 	props.connection.send('requestLog', {
-		id: Math.random().toString().substr(2, 8)
+		id: Math.random().toString().substr(2, 8),
 	});
 });
 
diff --git a/packages/client/src/widgets/timeline.vue b/packages/client/src/widgets/timeline.vue
index b22d3e445b..e48444d33f 100644
--- a/packages/client/src/widgets/timeline.vue
+++ b/packages/client/src/widgets/timeline.vue
@@ -82,7 +82,7 @@ const choose = async (ev) => {
 	menuOpened.value = true;
 	const [antennas, lists] = await Promise.all([
 		os.api('antennas/list'),
-		os.api('users/lists/list')
+		os.api('users/lists/list'),
 	]);
 	const antennaItems = antennas.map(antenna => ({
 		text: antenna.name,
@@ -90,7 +90,7 @@ const choose = async (ev) => {
 		action: () => {
 			widgetProps.antenna = antenna;
 			setSrc('antenna');
-		}
+		},
 	}));
 	const listItems = lists.map(list => ({
 		text: list.name,
@@ -98,24 +98,24 @@ const choose = async (ev) => {
 		action: () => {
 			widgetProps.list = list;
 			setSrc('list');
-		}
+		},
 	}));
 	os.popupMenu([{
 		text: i18n.ts._timelines.home,
 		icon: 'ti ti-home',
-		action: () => { setSrc('home'); }
+		action: () => { setSrc('home'); },
 	}, {
 		text: i18n.ts._timelines.local,
 		icon: 'ti ti-messages',
-		action: () => { setSrc('local'); }
+		action: () => { setSrc('local'); },
 	}, {
 		text: i18n.ts._timelines.social,
 		icon: 'ti ti-share',
-		action: () => { setSrc('social'); }
+		action: () => { setSrc('social'); },
 	}, {
 		text: i18n.ts._timelines.global,
 		icon: 'ti ti-world',
-		action: () => { setSrc('global'); }
+		action: () => { setSrc('global'); },
 	}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], ev.currentTarget ?? ev.target).then(() => {
 		menuOpened.value = false;
 	});
-- 
cgit v1.2.3-freya


From 049373de3ba6a48153c3bd3b6c02253f2a4aa338 Mon Sep 17 00:00:00 2001
From: Kagami Sascha Rosylight <saschanaz@outlook.com>
Date: Thu, 22 Dec 2022 16:51:48 +0900
Subject: style(client): fix `vue/v-on-event-hyphenation` (#9389)

---
 packages/client/.eslintrc.js                           |  2 ++
 packages/client/src/components/MkDrive.vue             | 12 ++++++------
 packages/client/src/components/MkDriveSelectDialog.vue |  2 +-
 packages/client/src/components/MkPollEditor.vue        |  2 +-
 packages/client/src/components/MkPostForm.vue          |  2 +-
 packages/client/src/components/MkPostFormAttaches.vue  |  2 +-
 packages/client/src/components/MkSignin.vue            |  2 +-
 packages/client/src/components/MkSignup.vue            |  8 ++++----
 packages/client/src/components/MkSignupDialog.vue      |  2 +-
 packages/client/src/components/MkUserSelectDialog.vue  |  4 ++--
 packages/client/src/components/MkWidgets.vue           |  6 +++---
 .../client/src/components/page/page.number-input.vue   |  2 +-
 .../client/src/components/page/page.radio-button.vue   |  2 +-
 packages/client/src/components/page/page.switch.vue    |  2 +-
 .../client/src/components/page/page.text-input.vue     |  2 +-
 .../client/src/components/page/page.textarea-input.vue |  2 +-
 packages/client/src/pages/admin-file.vue               |  2 +-
 packages/client/src/pages/admin/security.vue           |  4 ++--
 packages/client/src/pages/admin/users.vue              |  4 ++--
 packages/client/src/pages/api-console.vue              |  2 +-
 packages/client/src/pages/instance-info.vue            |  4 ++--
 packages/client/src/pages/settings/2fa.vue             |  2 +-
 packages/client/src/pages/settings/drive.vue           |  4 ++--
 packages/client/src/pages/settings/email.vue           |  2 +-
 packages/client/src/pages/settings/notifications.vue   |  2 +-
 packages/client/src/pages/settings/other.vue           |  2 +-
 packages/client/src/pages/settings/plugin.vue          |  2 +-
 packages/client/src/pages/settings/privacy.vue         | 18 +++++++++---------
 packages/client/src/pages/user-info.vue                |  6 +++---
 29 files changed, 55 insertions(+), 53 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/.eslintrc.js b/packages/client/.eslintrc.js
index c3a78bd5fd..6c3bfb5a6e 100644
--- a/packages/client/.eslintrc.js
+++ b/packages/client/.eslintrc.js
@@ -61,6 +61,8 @@ module.exports = {
 		'vue/max-attributes-per-line': 'off',
 		'vue/html-self-closing': 'off',
 		'vue/singleline-html-element-content-newline': 'off',
+		// (vue/vue3-recommended disabled the autofix for Vue 2 compatibility)
+		'vue/v-on-event-hyphenation': ['warn', 'always', { autofix: true }],
 	},
 	globals: {
 		// Node.js
diff --git a/packages/client/src/components/MkDrive.vue b/packages/client/src/components/MkDrive.vue
index c91fc95ab1..4053870950 100644
--- a/packages/client/src/components/MkDrive.vue
+++ b/packages/client/src/components/MkDrive.vue
@@ -7,8 +7,8 @@
 				:parent-folder="folder"
 				@move="move"
 				@upload="upload"
-				@removeFile="removeFile"
-				@removeFolder="removeFolder"
+				@remove-file="removeFile"
+				@remove-folder="removeFolder"
 			/>
 			<template v-for="f in hierarchyFolders">
 				<span class="separator"><i class="ti ti-chevron-right"></i></span>
@@ -17,8 +17,8 @@
 					:parent-folder="folder"
 					@move="move"
 					@upload="upload"
-					@removeFile="removeFile"
-					@removeFolder="removeFolder"
+					@remove-file="removeFile"
+					@remove-folder="removeFolder"
 				/>
 			</template>
 			<span v-if="folder != null" class="separator"><i class="ti ti-chevron-right"></i></span>
@@ -48,8 +48,8 @@
 					@chosen="chooseFolder"
 					@move="move"
 					@upload="upload"
-					@removeFile="removeFile"
-					@removeFolder="removeFolder"
+					@remove-file="removeFile"
+					@remove-folder="removeFolder"
 					@dragstart="isDragSource = true"
 					@dragend="isDragSource = false"
 				/>
diff --git a/packages/client/src/components/MkDriveSelectDialog.vue b/packages/client/src/components/MkDriveSelectDialog.vue
index baab7f1324..3ee821b539 100644
--- a/packages/client/src/components/MkDriveSelectDialog.vue
+++ b/packages/client/src/components/MkDriveSelectDialog.vue
@@ -14,7 +14,7 @@
 		{{ multiple ? ((type === 'file') ? i18n.ts.selectFiles : i18n.ts.selectFolders) : ((type === 'file') ? i18n.ts.selectFile : i18n.ts.selectFolder) }}
 		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
 	</template>
-	<XDrive :multiple="multiple" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/>
+	<XDrive :multiple="multiple" :select="type" @change-selection="onChangeSelection" @selected="ok()"/>
 </XModalWindow>
 </template>
 
diff --git a/packages/client/src/components/MkPollEditor.vue b/packages/client/src/components/MkPollEditor.vue
index 4b3bc58ed9..556abc5fd0 100644
--- a/packages/client/src/components/MkPollEditor.vue
+++ b/packages/client/src/components/MkPollEditor.vue
@@ -5,7 +5,7 @@
 	</p>
 	<ul>
 		<li v-for="(choice, i) in choices" :key="i">
-			<MkInput class="input" small :model-value="choice" :placeholder="$t('_poll.choiceN', { n: i + 1 })" @update:modelValue="onInput(i, $event)">
+			<MkInput class="input" small :model-value="choice" :placeholder="$t('_poll.choiceN', { n: i + 1 })" @update:model-value="onInput(i, $event)">
 			</MkInput>
 			<button class="_button" @click="remove(i)">
 				<i class="ti ti-x"></i>
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 6911899799..eb302ccc96 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -43,7 +43,7 @@
 		<input v-show="useCw" ref="cwInputEl" v-model="cw" class="cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
 		<textarea ref="textareaEl" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
 		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" class="hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
-		<XPostFormAttaches v-model="files" class="attaches" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
+		<XPostFormAttaches v-model="files" class="attaches" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
 		<XPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
 		<XNotePreview v-if="showPreview" class="preview" :text="text"/>
 		<footer>
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
index 2e16cc52a7..766cc9a06c 100644
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ b/packages/client/src/components/MkPostFormAttaches.vue
@@ -1,6 +1,6 @@
 <template>
 <div v-show="props.modelValue.length != 0" class="skeikyzd">
-	<Sortable :model-value="props.modelValue" class="files" item-key="id" :animation="150" :delay="100" :delay-on-touch-only="true" @update:modelValue="v => emit('update:modelValue', v)">
+	<Sortable :model-value="props.modelValue" class="files" item-key="id" :animation="150" :delay="100" :delay-on-touch-only="true" @update:model-value="v => emit('update:modelValue', v)">
 		<template #item="{element}">
 			<div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
 				<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
diff --git a/packages/client/src/components/MkSignin.vue b/packages/client/src/components/MkSignin.vue
index a842ab6a5e..3fbd3dc4e7 100644
--- a/packages/client/src/components/MkSignin.vue
+++ b/packages/client/src/components/MkSignin.vue
@@ -6,7 +6,7 @@
 			{{ message }}
 		</MkInfo>
 		<div v-if="!totpLogin" class="normal-signin">
-			<MkInput v-model="username" class="_formBlock" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required data-cy-signin-username @update:modelValue="onUsernameChange">
+			<MkInput v-model="username" class="_formBlock" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required data-cy-signin-username @update:model-value="onUsernameChange">
 				<template #prefix>@</template>
 				<template #suffix>@{{ host }}</template>
 			</MkInput>
diff --git a/packages/client/src/components/MkSignup.vue b/packages/client/src/components/MkSignup.vue
index acb85438f0..d987425ca3 100644
--- a/packages/client/src/components/MkSignup.vue
+++ b/packages/client/src/components/MkSignup.vue
@@ -4,7 +4,7 @@
 		<template #label>{{ i18n.ts.invitationCode }}</template>
 		<template #prefix><i class="ti ti-key"></i></template>
 	</MkInput>
-	<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:modelValue="onChangeUsername">
+	<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:model-value="onChangeUsername">
 		<template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="ti ti-question-circle"></i></div></template>
 		<template #prefix>@</template>
 		<template #suffix>@{{ host }}</template>
@@ -18,7 +18,7 @@
 			<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.tooLong }}</span>
 		</template>
 	</MkInput>
-	<MkInput v-if="instance.emailRequiredForSignup" v-model="email" class="_formBlock" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:modelValue="onChangeEmail">
+	<MkInput v-if="instance.emailRequiredForSignup" v-model="email" class="_formBlock" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:model-value="onChangeEmail">
 		<template #label>{{ i18n.ts.emailAddress }} <div v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" class="_button _help"><i class="ti ti-question-circle"></i></div></template>
 		<template #prefix><i class="ti ti-mail"></i></template>
 		<template #caption>
@@ -33,7 +33,7 @@
 			<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.error }}</span>
 		</template>
 	</MkInput>
-	<MkInput v-model="password" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password @update:modelValue="onChangePassword">
+	<MkInput v-model="password" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password @update:model-value="onChangePassword">
 		<template #label>{{ i18n.ts.password }}</template>
 		<template #prefix><i class="ti ti-lock"></i></template>
 		<template #caption>
@@ -42,7 +42,7 @@
 			<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.strongPassword }}</span>
 		</template>
 	</MkInput>
-	<MkInput v-model="retypedPassword" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:modelValue="onChangePasswordRetype">
+	<MkInput v-model="retypedPassword" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:model-value="onChangePasswordRetype">
 		<template #label>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template>
 		<template #prefix><i class="ti ti-lock"></i></template>
 		<template #caption>
diff --git a/packages/client/src/components/MkSignupDialog.vue b/packages/client/src/components/MkSignupDialog.vue
index d6d4553bc6..77497021c3 100644
--- a/packages/client/src/components/MkSignupDialog.vue
+++ b/packages/client/src/components/MkSignupDialog.vue
@@ -10,7 +10,7 @@
 
 	<div class="_monolithic_">
 		<div class="_section">
-			<XSignup :auto-set="autoSet" @signup="onSignup" @signupEmailPending="onSignupEmailPending"/>
+			<XSignup :auto-set="autoSet" @signup="onSignup" @signup-email-pending="onSignupEmailPending"/>
 		</div>
 	</div>
 </XModalWindow>
diff --git a/packages/client/src/components/MkUserSelectDialog.vue b/packages/client/src/components/MkUserSelectDialog.vue
index 07caedfe3a..1d31769c30 100644
--- a/packages/client/src/components/MkUserSelectDialog.vue
+++ b/packages/client/src/components/MkUserSelectDialog.vue
@@ -12,11 +12,11 @@
 	<div class="tbhwbxda">
 		<div class="form">
 			<FormSplit :min-width="170">
-				<MkInput v-model="username" :autofocus="true" @update:modelValue="search">
+				<MkInput v-model="username" :autofocus="true" @update:model-value="search">
 					<template #label>{{ i18n.ts.username }}</template>
 					<template #prefix>@</template>
 				</MkInput>
-				<MkInput v-model="host" @update:modelValue="search">
+				<MkInput v-model="host" @update:model-value="search">
 					<template #label>{{ i18n.ts.host }}</template>
 					<template #prefix>@</template>
 				</MkInput>
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index 5299b581b5..a0c77f91a9 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -14,20 +14,20 @@
 			item-key="id"
 			handle=".handle"
 			:animation="150"
-			@update:modelValue="v => emit('updateWidgets', v)"
+			@update:model-value="v => emit('updateWidgets', v)"
 		>
 			<template #item="{element}">
 				<div class="customize-container">
 					<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button>
 					<button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="ti ti-x"></i></button>
 					<div class="handle">
-						<component :is="`mkw-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
+						<component :is="`mkw-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :widget="element" @update-props="updateWidget(element.id, $event)"/>
 					</div>
 				</div>
 			</template>
 		</Sortable>
 	</template>
-	<component :is="`mkw-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" class="widget" :widget="widget" @updateProps="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/>
+	<component :is="`mkw-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" class="widget" :widget="widget" @update-props="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/>
 </div>
 </template>
 
diff --git a/packages/client/src/components/page/page.number-input.vue b/packages/client/src/components/page/page.number-input.vue
index 0348ba7434..50cf6d0770 100644
--- a/packages/client/src/components/page/page.number-input.vue
+++ b/packages/client/src/components/page/page.number-input.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<MkInput class="kudkigyw" :model-value="value" type="number" @update:modelValue="updateValue($event)">
+	<MkInput class="kudkigyw" :model-value="value" type="number" @update:model-value="updateValue($event)">
 		<template #label>{{ hpml.interpolate(block.text) }}</template>
 	</MkInput>
 </div>
diff --git a/packages/client/src/components/page/page.radio-button.vue b/packages/client/src/components/page/page.radio-button.vue
index b0940a8781..b4d9e01a54 100644
--- a/packages/client/src/components/page/page.radio-button.vue
+++ b/packages/client/src/components/page/page.radio-button.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<div>{{ hpml.interpolate(block.title) }}</div>
-	<MkRadio v-for="item in block.values" :key="item" :modelValue="value" :value="item" @update:modelValue="updateValue($event)">{{ item }}</MkRadio>
+	<MkRadio v-for="item in block.values" :key="item" :modelValue="value" :value="item" @update:model-value="updateValue($event)">{{ item }}</MkRadio>
 </div>
 </template>
 
diff --git a/packages/client/src/components/page/page.switch.vue b/packages/client/src/components/page/page.switch.vue
index ac8d5e05c8..64dc4ff8aa 100644
--- a/packages/client/src/components/page/page.switch.vue
+++ b/packages/client/src/components/page/page.switch.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="hkcxmtwj">
-	<MkSwitch :model-value="value" @update:modelValue="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkSwitch>
+	<MkSwitch :model-value="value" @update:model-value="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkSwitch>
 </div>
 </template>
 
diff --git a/packages/client/src/components/page/page.text-input.vue b/packages/client/src/components/page/page.text-input.vue
index 5d7eef8bb9..840649ece6 100644
--- a/packages/client/src/components/page/page.text-input.vue
+++ b/packages/client/src/components/page/page.text-input.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<MkInput class="kudkigyw" :model-value="value" type="text" @update:modelValue="updateValue($event)">
+	<MkInput class="kudkigyw" :model-value="value" type="text" @update:model-value="updateValue($event)">
 		<template #label>{{ hpml.interpolate(block.text) }}</template>
 	</MkInput>
 </div>
diff --git a/packages/client/src/components/page/page.textarea-input.vue b/packages/client/src/components/page/page.textarea-input.vue
index 6be0092851..507e1bd97b 100644
--- a/packages/client/src/components/page/page.textarea-input.vue
+++ b/packages/client/src/components/page/page.textarea-input.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<MkTextarea :model-value="value" @update:modelValue="updateValue($event)">
+	<MkTextarea :model-value="value" @update:model-value="updateValue($event)">
 		<template #label>{{ hpml.interpolate(block.text) }}</template>
 	</MkTextarea>
 </div>
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index e923ca5df2..a11249e75d 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -32,7 +32,7 @@
 				<MkUserCardMini :user="file.user"/>
 			</MkA>
 			<div class="_formBlock">
-				<MkSwitch v-model="isSensitive" @update:modelValue="toggleIsSensitive">NSFW</MkSwitch>
+				<MkSwitch v-model="isSensitive" @update:model-value="toggleIsSensitive">NSFW</MkSwitch>
 			</div>
 
 			<div class="_formBlock">
diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue
index 11c06257cc..2682bda337 100644
--- a/packages/client/src/pages/admin/security.vue
+++ b/packages/client/src/pages/admin/security.vue
@@ -65,7 +65,7 @@
 
 					<div class="_formRoot">
 						<span class="_formBlock">{{ i18n.ts.activeEmailValidationDescription }}</span>
-						<FormSwitch v-model="enableActiveEmailValidation" class="_formBlock" @update:modelValue="save">
+						<FormSwitch v-model="enableActiveEmailValidation" class="_formBlock" @update:model-value="save">
 							<template #label>Enable</template>
 						</FormSwitch>
 					</div>
@@ -77,7 +77,7 @@
 					<template v-else #suffix>Disabled</template>
 
 					<div class="_formRoot">
-						<FormSwitch v-model="enableIpLogging" class="_formBlock" @update:modelValue="save">
+						<FormSwitch v-model="enableIpLogging" class="_formBlock" @update:model-value="save">
 							<template #label>Enable</template>
 						</FormSwitch>
 					</div>
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index bf630d28d2..d466e21907 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -30,11 +30,11 @@
 						</MkSelect>
 					</div>
 					<div class="inputs">
-						<MkInput v-model="searchUsername" style="flex: 1;" type="text" :spellcheck="false" @update:modelValue="$refs.users.reload()">
+						<MkInput v-model="searchUsername" style="flex: 1;" type="text" :spellcheck="false" @update:model-value="$refs.users.reload()">
 							<template #prefix>@</template>
 							<template #label>{{ i18n.ts.username }}</template>
 						</MkInput>
-						<MkInput v-model="searchHost" style="flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params.origin === 'local'" @update:modelValue="$refs.users.reload()">
+						<MkInput v-model="searchHost" style="flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params.origin === 'local'" @update:model-value="$refs.users.reload()">
 							<template #prefix>@</template>
 							<template #label>{{ i18n.ts.host }}</template>
 						</MkInput>
diff --git a/packages/client/src/pages/api-console.vue b/packages/client/src/pages/api-console.vue
index a46b85462e..1d5339b44c 100644
--- a/packages/client/src/pages/api-console.vue
+++ b/packages/client/src/pages/api-console.vue
@@ -4,7 +4,7 @@
 	<MkSpacer :content-max="700">
 		<div class="_formRoot">
 			<div class="_formBlock">
-				<MkInput v-model="endpoint" :datalist="endpoints" class="_formBlock" @update:modelValue="onEndpointChange()">
+				<MkInput v-model="endpoint" :datalist="endpoints" class="_formBlock" @update:model-value="onEndpointChange()">
 					<template #label>Endpoint</template>
 				</MkInput>
 				<MkTextarea v-model="body" class="_formBlock" code>
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index 92288f573d..a2a1254360 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -26,8 +26,8 @@
 
 			<FormSection v-if="iAmModerator">
 				<template #label>Moderation</template>
-				<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</FormSwitch>
-				<FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</FormSwitch>
+				<FormSwitch v-model="suspended" class="_formBlock" @update:model-value="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</FormSwitch>
+				<FormSwitch v-model="isBlocked" class="_formBlock" @update:model-value="toggleBlock">{{ i18n.ts.blockThisInstance }}</FormSwitch>
 				<MkButton @click="refreshMetadata"><i class="ti ti-refresh"></i> Refresh metadata</MkButton>
 			</FormSection>
 
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
index f0cb6bf79a..1803129aaa 100644
--- a/packages/client/src/pages/settings/2fa.vue
+++ b/packages/client/src/pages/settings/2fa.vue
@@ -18,7 +18,7 @@
 				</div>
 			</div>
 
-			<MkSwitch v-if="$i.securityKeysList.length > 0" v-model="usePasswordLessLogin" @update:modelValue="updatePasswordLessLogin">{{ i18n.ts.passwordLessLogin }}</MkSwitch>
+			<MkSwitch v-if="$i.securityKeysList.length > 0" v-model="usePasswordLessLogin" @update:model-value="updatePasswordLessLogin">{{ i18n.ts.passwordLessLogin }}</MkSwitch>
 
 			<MkInfo v-if="registration && registration.error" warn>{{ i18n.ts.error }} {{ registration.error }}</MkInfo>
 			<MkButton v-if="!registration || registration.error" @click="addSecurityKey">{{ i18n.ts._2fa.registerKey }}</MkButton>
diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
index ed44509774..2d45b1add8 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -32,10 +32,10 @@
 			<template #label>{{ i18n.ts.keepOriginalUploading }}</template>
 			<template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template>
 		</FormSwitch>
-		<FormSwitch v-model="alwaysMarkNsfw" class="_formBlock" @update:modelValue="saveProfile()">
+		<FormSwitch v-model="alwaysMarkNsfw" class="_formBlock" @update:model-value="saveProfile()">
 			<template #label>{{ i18n.ts.alwaysMarkSensitive }}</template>
 		</FormSwitch>
-		<FormSwitch v-model="autoSensitive" class="_formBlock" @update:modelValue="saveProfile()">
+		<FormSwitch v-model="autoSensitive" class="_formBlock" @update:model-value="saveProfile()">
 			<template #label>{{ i18n.ts.enableAutoSensitive }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
 			<template #caption>{{ i18n.ts.enableAutoSensitiveDescription }}</template>
 		</FormSwitch>
diff --git a/packages/client/src/pages/settings/email.vue b/packages/client/src/pages/settings/email.vue
index d4a6dc48e5..3fff8c6b1d 100644
--- a/packages/client/src/pages/settings/email.vue
+++ b/packages/client/src/pages/settings/email.vue
@@ -10,7 +10,7 @@
 	</FormSection>
 
 	<FormSection>
-		<FormSwitch :model-value="$i.receiveAnnouncementEmail" @update:modelValue="onChangeReceiveAnnouncementEmail">
+		<FormSwitch :model-value="$i.receiveAnnouncementEmail" @update:model-value="onChangeReceiveAnnouncementEmail">
 			{{ i18n.ts.receiveAnnouncementFromInstance }}
 		</FormSwitch>
 	</FormSection>
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
index e24be99cb6..e85fede157 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -9,7 +9,7 @@
 	<FormSection>
 		<template #label>{{ i18n.ts.pushNotification }}</template>
 		<MkPushNotificationAllowButton ref="allowButton" />
-		<FormSwitch class="_formBlock" :disabled="!pushRegistrationInServer" :model-value="sendReadMessage" @update:modelValue="onChangeSendReadMessage">
+		<FormSwitch class="_formBlock" :disabled="!pushRegistrationInServer" :model-value="sendReadMessage" @update:model-value="onChangeSendReadMessage">
 			<template #label>{{ i18n.ts.sendPushNotificationReadMessage }}</template>
 			<template #caption>
 				<I18n :src="i18n.ts.sendPushNotificationReadMessageCaption">
diff --git a/packages/client/src/pages/settings/other.vue b/packages/client/src/pages/settings/other.vue
index f8eb594740..40bb202789 100644
--- a/packages/client/src/pages/settings/other.vue
+++ b/packages/client/src/pages/settings/other.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="_formRoot">
-	<FormSwitch v-model="$i.injectFeaturedNote" class="_formBlock" @update:modelValue="onChangeInjectFeaturedNote">
+	<FormSwitch v-model="$i.injectFeaturedNote" class="_formBlock" @update:model-value="onChangeInjectFeaturedNote">
 		{{ i18n.ts.showFeaturedNotesInTimeline }}
 	</FormSwitch>
 
diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue
index 2e4d54ec5c..905efd833d 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" :model-value="plugin.active" @update:modelValue="changeActive(plugin, $event)">{{ i18n.ts.makeActive }}</FormSwitch>
+			<FormSwitch class="_formBlock" :model-value="plugin.active" @update:model-value="changeActive(plugin, $event)">{{ i18n.ts.makeActive }}</FormSwitch>
 
 			<MkKeyValue class="_formBlock">
 				<template #key>{{ i18n.ts.author }}</template>
diff --git a/packages/client/src/pages/settings/privacy.vue b/packages/client/src/pages/settings/privacy.vue
index 44ffae5446..915ca05767 100644
--- a/packages/client/src/pages/settings/privacy.vue
+++ b/packages/client/src/pages/settings/privacy.vue
@@ -1,14 +1,14 @@
 <template>
 <div class="_formRoot">
-	<FormSwitch v-model="isLocked" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></FormSwitch>
-	<FormSwitch v-if="isLocked" v-model="autoAcceptFollowed" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.autoAcceptFollowed }}</FormSwitch>
+	<FormSwitch v-model="isLocked" class="_formBlock" @update:model-value="save()">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></FormSwitch>
+	<FormSwitch v-if="isLocked" v-model="autoAcceptFollowed" class="_formBlock" @update:model-value="save()">{{ i18n.ts.autoAcceptFollowed }}</FormSwitch>
 
-	<FormSwitch v-model="publicReactions" class="_formBlock" @update:modelValue="save()">
+	<FormSwitch v-model="publicReactions" class="_formBlock" @update:model-value="save()">
 		{{ i18n.ts.makeReactionsPublic }}
 		<template #caption>{{ i18n.ts.makeReactionsPublicDescription }}</template>
 	</FormSwitch>
 		
-	<FormSelect v-model="ffVisibility" class="_formBlock" @update:modelValue="save()">
+	<FormSelect v-model="ffVisibility" class="_formBlock" @update:model-value="save()">
 		<template #label>{{ i18n.ts.ffVisibility }}</template>
 		<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
 		<option value="followers">{{ i18n.ts._ffVisibility.followers }}</option>
@@ -16,21 +16,21 @@
 		<template #caption>{{ i18n.ts.ffVisibilityDescription }}</template>
 	</FormSelect>
 		
-	<FormSwitch v-model="hideOnlineStatus" class="_formBlock" @update:modelValue="save()">
+	<FormSwitch v-model="hideOnlineStatus" class="_formBlock" @update:model-value="save()">
 		{{ i18n.ts.hideOnlineStatus }}
 		<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template>
 	</FormSwitch>
-	<FormSwitch v-model="noCrawle" class="_formBlock" @update:modelValue="save()">
+	<FormSwitch v-model="noCrawle" class="_formBlock" @update:model-value="save()">
 		{{ i18n.ts.noCrawle }}
 		<template #caption>{{ i18n.ts.noCrawleDescription }}</template>
 	</FormSwitch>
-	<FormSwitch v-model="isExplorable" class="_formBlock" @update:modelValue="save()">
+	<FormSwitch v-model="isExplorable" class="_formBlock" @update:model-value="save()">
 		{{ i18n.ts.makeExplorable }}
 		<template #caption>{{ i18n.ts.makeExplorableDescription }}</template>
 	</FormSwitch>
 
 	<FormSection>
-		<FormSwitch v-model="rememberNoteVisibility" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.rememberNoteVisibility }}</FormSwitch>
+		<FormSwitch v-model="rememberNoteVisibility" class="_formBlock" @update:model-value="save()">{{ i18n.ts.rememberNoteVisibility }}</FormSwitch>
 		<FormFolder v-if="!rememberNoteVisibility" class="_formBlock">
 			<template #label>{{ i18n.ts.defaultNoteVisibility }}</template>
 			<template v-if="defaultNoteVisibility === 'public'" #suffix>{{ i18n.ts._visibility.public }}</template>
@@ -48,7 +48,7 @@
 		</FormFolder>
 	</FormSection>
 
-	<FormSwitch v-model="keepCw" class="_formBlock" @update:modelValue="save()">{{ i18n.ts.keepCw }}</FormSwitch>
+	<FormSwitch v-model="keepCw" class="_formBlock" @update:model-value="save()">{{ i18n.ts.keepCw }}</FormSwitch>
 </div>
 </template>
 
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index adb8350516..addc8db9e6 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -85,9 +85,9 @@
 				</FormSection>
 			</div>
 			<div v-else-if="tab === 'moderation'" class="_formRoot">
-				<FormSwitch v-if="user.host == null && $i.isAdmin && (moderator || !user.isAdmin)" v-model="moderator" class="_formBlock" @update:modelValue="toggleModerator">{{ i18n.ts.moderator }}</FormSwitch>
-				<FormSwitch v-model="silenced" class="_formBlock" @update:modelValue="toggleSilence">{{ i18n.ts.silence }}</FormSwitch>
-				<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ i18n.ts.suspend }}</FormSwitch>
+				<FormSwitch v-if="user.host == null && $i.isAdmin && (moderator || !user.isAdmin)" v-model="moderator" class="_formBlock" @update:model-value="toggleModerator">{{ i18n.ts.moderator }}</FormSwitch>
+				<FormSwitch v-model="silenced" class="_formBlock" @update:model-value="toggleSilence">{{ i18n.ts.silence }}</FormSwitch>
+				<FormSwitch v-model="suspended" class="_formBlock" @update:model-value="toggleSuspend">{{ i18n.ts.suspend }}</FormSwitch>
 				{{ i18n.ts.reflectMayTakeTime }}
 				<div class="_formBlock">
 					<FormButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</FormButton>
-- 
cgit v1.2.3-freya


From 1b6473ac2756634faeb9cf564a8edb10c12a7829 Mon Sep 17 00:00:00 2001
From: Kagami Sascha Rosylight <saschanaz@outlook.com>
Date: Thu, 22 Dec 2022 16:59:11 +0900
Subject: refactor(client): explicit `showing` property for tooltips (#9368)

---
 packages/client/src/components/MkChartTooltip.vue            | 2 +-
 packages/client/src/components/MkReactionTooltip.vue         | 5 +++--
 packages/client/src/components/MkReactionsViewer.details.vue | 5 +++--
 packages/client/src/components/MkUsersTooltip.vue            | 5 +++--
 4 files changed, 10 insertions(+), 7 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkChartTooltip.vue b/packages/client/src/components/MkChartTooltip.vue
index a92dd36b61..d36f45463c 100644
--- a/packages/client/src/components/MkChartTooltip.vue
+++ b/packages/client/src/components/MkChartTooltip.vue
@@ -16,7 +16,7 @@
 import { } from 'vue';
 import MkTooltip from './MkTooltip.vue';
 
-const props = defineProps<{
+defineProps<{
 	showing: boolean;
 	x: number;
 	y: number;
diff --git a/packages/client/src/components/MkReactionTooltip.vue b/packages/client/src/components/MkReactionTooltip.vue
index 2da97cf4f3..7777f493af 100644
--- a/packages/client/src/components/MkReactionTooltip.vue
+++ b/packages/client/src/components/MkReactionTooltip.vue
@@ -1,5 +1,5 @@
 <template>
-<MkTooltip ref="tooltip" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
+<MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
 	<div class="beeadbfb">
 		<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
 		<div class="name">{{ reaction.replace('@.', '') }}</div>
@@ -12,7 +12,8 @@ import { } from 'vue';
 import MkTooltip from './MkTooltip.vue';
 import XReactionIcon from '@/components/MkReactionIcon.vue';
 
-const props = defineProps<{
+defineProps<{
+	showing: boolean;
 	reaction: string;
 	emojis: any[]; // TODO
 	targetElement: HTMLElement;
diff --git a/packages/client/src/components/MkReactionsViewer.details.vue b/packages/client/src/components/MkReactionsViewer.details.vue
index 8c423807ba..10e82cb9f9 100644
--- a/packages/client/src/components/MkReactionsViewer.details.vue
+++ b/packages/client/src/components/MkReactionsViewer.details.vue
@@ -1,5 +1,5 @@
 <template>
-<MkTooltip ref="tooltip" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
+<MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
 	<div class="bqxuuuey">
 		<div class="reaction">
 			<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
@@ -21,7 +21,8 @@ import { } from 'vue';
 import MkTooltip from './MkTooltip.vue';
 import XReactionIcon from '@/components/MkReactionIcon.vue';
 
-const props = defineProps<{
+defineProps<{
+	showing: boolean;
 	reaction: string;
 	users: any[]; // TODO
 	count: number;
diff --git a/packages/client/src/components/MkUsersTooltip.vue b/packages/client/src/components/MkUsersTooltip.vue
index 4ccc44b47e..f0384e2d65 100644
--- a/packages/client/src/components/MkUsersTooltip.vue
+++ b/packages/client/src/components/MkUsersTooltip.vue
@@ -1,5 +1,5 @@
 <template>
-<MkTooltip ref="tooltip" :target-element="targetElement" :max-width="250" @closed="emit('closed')">
+<MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="250" @closed="emit('closed')">
 	<div class="beaffaef">
 		<div v-for="u in users" :key="u.id" class="user">
 			<MkAvatar class="avatar" :user="u"/>
@@ -14,7 +14,8 @@
 import { } from 'vue';
 import MkTooltip from './MkTooltip.vue';
 
-const props = defineProps<{
+defineProps<{
+	showing: boolean;
 	users: any[]; // TODO
 	count: number;
 	targetElement: HTMLElement;
-- 
cgit v1.2.3-freya


From 052e667f0357a059dd17f46ccce68d2598146724 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 23 Dec 2022 15:21:55 +0900
Subject: enhance(client): enhance dashboard of control panel

---
 CHANGELOG.md                                       |   1 +
 packages/client/src/components/MkChart.vue         |  23 +-
 .../src/pages/admin/overview.active-users.vue      | 223 +++++++++
 .../src/pages/admin/overview.ap-requests.vue       | 263 ++++++++++
 .../client/src/pages/admin/overview.federation.vue | 225 ++++++---
 .../client/src/pages/admin/overview.instances.vue  |  52 ++
 .../src/pages/admin/overview.queue-chart.vue       | 211 --------
 .../src/pages/admin/overview.queue.chart.vue       | 185 +++++++
 packages/client/src/pages/admin/overview.queue.vue | 127 +++++
 packages/client/src/pages/admin/overview.stats.vue | 153 ++++++
 packages/client/src/pages/admin/overview.user.vue  |  76 ---
 packages/client/src/pages/admin/overview.users.vue |  55 ++
 packages/client/src/pages/admin/overview.vue       | 556 ++-------------------
 .../client/src/pages/admin/queue.chart.chart.vue   |   4 +
 packages/client/src/scripts/chart-vline.ts         |  21 +
 15 files changed, 1284 insertions(+), 891 deletions(-)
 create mode 100644 packages/client/src/pages/admin/overview.active-users.vue
 create mode 100644 packages/client/src/pages/admin/overview.ap-requests.vue
 create mode 100644 packages/client/src/pages/admin/overview.instances.vue
 delete mode 100644 packages/client/src/pages/admin/overview.queue-chart.vue
 create mode 100644 packages/client/src/pages/admin/overview.queue.chart.vue
 create mode 100644 packages/client/src/pages/admin/overview.queue.vue
 create mode 100644 packages/client/src/pages/admin/overview.stats.vue
 delete mode 100644 packages/client/src/pages/admin/overview.user.vue
 create mode 100644 packages/client/src/pages/admin/overview.users.vue
 create mode 100644 packages/client/src/scripts/chart-vline.ts

(limited to 'packages/client/src')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 61a38ad364..ad5fa430c8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,7 @@ You should also include the user name that made the change.
 - Client: Add new gabber kick sounds (thanks for noizenecio)
 - Client: Compress non-animated PNG files @saschanaz
 - Client: Youtube window player @sim1222
+- Client: enhance dashboard of control panel @syuilo
 
 ### Bugfixes
 - Server: 引用内の文章がnyaizeされてしまう問題を修正 @kabo2468
diff --git a/packages/client/src/components/MkChart.vue b/packages/client/src/components/MkChart.vue
index d97b114f17..fbbc231b88 100644
--- a/packages/client/src/components/MkChart.vue
+++ b/packages/client/src/components/MkChart.vue
@@ -38,6 +38,7 @@ import gradient from 'chartjs-plugin-gradient';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+import { chartVLine } from '@/scripts/chart-vline';
 
 const props = defineProps({
 	src: {
@@ -311,27 +312,7 @@ const render = () => {
 				gradient,
 			},
 		},
-		plugins: [{
-			id: 'vLine',
-			beforeDraw(chart, args, options) {
-				if (chart.tooltip?._active?.length) {
-					const activePoint = chart.tooltip._active[0];
-					const ctx = chart.ctx;
-					const x = activePoint.element.x;
-					const topY = chart.scales.y.top;
-					const bottomY = chart.scales.y.bottom;
-
-					ctx.save();
-					ctx.beginPath();
-					ctx.moveTo(x, bottomY);
-					ctx.lineTo(x, topY);
-					ctx.lineWidth = 1;
-					ctx.strokeStyle = vLineColor;
-					ctx.stroke();
-					ctx.restore();
-				}
-			},
-		}],
+		plugins: [chartVLine(vLineColor)],
 	});
 };
 
diff --git a/packages/client/src/pages/admin/overview.active-users.vue b/packages/client/src/pages/admin/overview.active-users.vue
new file mode 100644
index 0000000000..eb4cefb345
--- /dev/null
+++ b/packages/client/src/pages/admin/overview.active-users.vue
@@ -0,0 +1,223 @@
+<template>
+<div>
+	<MkLoading v-if="fetching"/>
+	<div v-show="!fetching" :class="$style.root" class="_panel">
+		<canvas ref="chartEl"></canvas>
+	</div>
+</div>
+</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 * as os from '@/os';
+import 'chartjs-adapter-date-fns';
+import { defaultStore } from '@/store';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+import gradient from 'chartjs-plugin-gradient';
+import { chartVLine } from '@/scripts/chart-vline';
+
+Chart.register(
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+	gradient,
+);
+
+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 now = new Date();
+let chartInstance: Chart = null;
+const chartLimit = 50;
+let fetching = $ref(true);
+
+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')).toHexString();
+
+	const max = Math.max(...raw.read);
+
+	chartInstance = new Chart(chartEl, {
+		type: 'line',
+		data: {
+			//labels: new Array(props.limit).fill(0).map((_, i) => getDate(i).toLocaleString()).slice().reverse(),
+			datasets: [{
+				parsing: false,
+				label: 'active',
+				data: format(raw.read).slice().reverse(),
+				tension: 0.3,
+				pointRadius: 0,
+				borderWidth: 2,
+				borderColor: color,
+				borderJoinStyle: 'round',
+				//backgroundColor: alpha(color, 0.1),
+				gradient: {
+					backgroundColor: {
+						axis: 'y',
+						colors: {
+							0: alpha(color, 0),
+							[max]: alpha(color, 0.35),
+						},
+					},
+				},
+				barPercentage: 0.9,
+				categoryPercentage: 0.9,
+				fill: true,
+				clip: 8,
+			}],
+		},
+		options: {
+			aspectRatio: 2.5,
+			layout: {
+				padding: {
+					left: 0,
+					right: 8,
+					top: 0,
+					bottom: 0,
+				},
+			},
+			scales: {
+				x: {
+					type: 'time',
+					offset: false,
+					time: {
+						stepSize: 1,
+						unit: 'day',
+					},
+					grid: {
+						display: false,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: true,
+						maxRotation: 0,
+						autoSkipPadding: 16,
+					},
+					adapters: {
+						date: {
+							locale: enUS,
+						},
+					},
+					min: getDate(chartLimit).getTime(),
+				},
+				y: {
+					position: 'left',
+					suggestedMax: 10,
+					grid: {
+						display: false,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: true,
+						//mirror: true,
+					},
+				},
+			},
+			interaction: {
+				intersect: false,
+				mode: 'index',
+			},
+			elements: {
+				point: {
+					hoverRadius: 5,
+					hoverBorderWidth: 2,
+				},
+			},
+			animation: true,
+			plugins: {
+				legend: {
+					display: false,
+				},
+				tooltip: {
+					enabled: false,
+					mode: 'index',
+					animation: {
+						duration: 0,
+					},
+					external: externalTooltipHandler,
+				},
+				gradient,
+			},
+		},
+		plugins: [chartVLine(vLineColor)],
+	});
+
+	fetching = false;
+}
+
+onMounted(async () => {
+	renderChart();
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 20px;
+}
+</style>
diff --git a/packages/client/src/pages/admin/overview.ap-requests.vue b/packages/client/src/pages/admin/overview.ap-requests.vue
new file mode 100644
index 0000000000..65ba0075eb
--- /dev/null
+++ b/packages/client/src/pages/admin/overview.ap-requests.vue
@@ -0,0 +1,263 @@
+<template>
+<div>
+	<MkLoading v-if="fetching"/>
+	<div v-show="!fetching" :class="$style.root">
+		<div class="chart _panel">
+			<canvas ref="chartEl"></canvas>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import {
+	Chart,
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+} from 'chart.js';
+import gradient from 'chartjs-plugin-gradient';
+import { enUS } from 'date-fns/locale';
+import tinycolor from 'tinycolor2';
+import MkMiniChart from '@/components/MkMiniChart.vue';
+import * as os from '@/os';
+import number from '@/filters/number';
+import MkNumberDiff from '@/components/MkNumberDiff.vue';
+import { i18n } from '@/i18n';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+import { chartVLine } from '@/scripts/chart-vline';
+import { defaultStore } from '@/store';
+
+Chart.register(
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+	gradient,
+);
+
+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 chartLimit = 50;
+const chartEl = $ref<HTMLCanvasElement>();
+let fetching = $ref(true);
+
+const { handler: externalTooltipHandler } = useChartTooltip();
+	
+onMounted(async () => {
+	const now = new Date();
+
+	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 formatMinus = (arr) => {
+		return arr.map((v, i) => ({
+			x: getDate(i).getTime(),
+			y: -v,
+		}));
+	};
+
+	const raw = await os.api('charts/ap-request', { 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)';
+	const succColor = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--success')).toHexString();
+	const failColor = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--error')).toHexString();
+
+	const succMax = Math.max(...raw.deliverSucceeded);
+	const failMax = Math.max(...raw.deliverFailed);
+
+	// フォントカラー
+	Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+
+	new Chart(chartEl, {
+		type: 'bar',
+		data: {
+			//labels: new Array(props.limit).fill(0).map((_, i) => getDate(i).toLocaleString()).slice().reverse(),
+			datasets: [{
+				stack: 'a',
+				parsing: false,
+				label: 'Succ',
+				data: format(raw.deliverSucceeded).slice().reverse(),
+				tension: 0.3,
+				pointRadius: 0,
+				borderWidth: 0,
+				borderJoinStyle: 'round',
+				borderRadius: 4,
+				//backgroundColor: alpha(color, 0.1),
+				gradient: {
+					backgroundColor: {
+						axis: 'y',
+						colors: {
+							0: alpha(succColor, 0.3),
+							[succMax]: alpha(succColor, 1),
+						},
+					},
+				},
+				barPercentage: 0.9,
+				categoryPercentage: 0.9,
+				fill: true,
+				clip: 8,
+			}, {
+				stack: 'a',
+				parsing: false,
+				label: 'Fail',
+				data: formatMinus(raw.deliverFailed).slice().reverse(),
+				tension: 0.3,
+				pointRadius: 0,
+				borderWidth: 0,
+				borderJoinStyle: 'round',
+				borderRadius: 4,
+				//backgroundColor: alpha(color, 0.1),
+				gradient: {
+					backgroundColor: {
+						axis: 'y',
+						colors: {
+							0: alpha(failColor, 0.3),
+							[-failMax]: alpha(failColor, 1),
+						},
+					},
+				},
+				barPercentage: 0.9,
+				categoryPercentage: 0.9,
+				fill: true,
+				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: 'day',
+					},
+					grid: {
+						display: false,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: true,
+						maxRotation: 0,
+						autoSkipPadding: 16,
+					},
+					adapters: {
+						date: {
+							locale: enUS,
+						},
+					},
+					min: getDate(chartLimit).getTime(),
+				},
+				y: {
+					stacked: true,
+					position: 'left',
+					suggestedMax: 10,
+					grid: {
+						display: false,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: true,
+						//mirror: true,
+						callback: (value, index, values) => value < 0 ? -value : value,
+					},
+				},
+			},
+			interaction: {
+				intersect: false,
+				mode: 'index',
+			},
+			elements: {
+				point: {
+					hoverRadius: 5,
+					hoverBorderWidth: 2,
+				},
+			},
+			animation: true,
+			plugins: {
+				legend: {
+					display: false,
+				},
+				tooltip: {
+					enabled: false,
+					mode: 'index',
+					animation: {
+						duration: 0,
+					},
+					external: externalTooltipHandler,
+				},
+				gradient,
+			},
+		},
+		plugins: [chartVLine(vLineColor)],
+	});
+	
+	fetching = false;
+});
+</script>
+
+<style lang="scss" module>
+.root {
+
+	&:global {
+		> .chart {
+			padding: 16px;
+			margin-bottom: 16px;
+		}
+	}
+}
+</style>
+
diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
index e8cb5867a7..eb44fa23b7 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -1,100 +1,185 @@
 <template>
-<div class="wbrkwale">
+<div>
 	<MkLoading v-if="fetching"/>
-	<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances">
-		<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">
-				<div class="name">{{ instance.name ?? instance.host }}</div>
-				<div class="host">{{ instance.host }}</div>
+	<div v-show="!fetching" :class="$style.root">
+		<div v-if="topSubInstancesForPie && topPubInstancesForPie" class="pies">
+			<div class="pie deliver _panel">
+				<div class="title">Sub</div>
+				<XPie :data="topSubInstancesForPie" class="chart"/>
+				<div class="subTitle">Top 10</div>
 			</div>
-			<MkMiniChart class="chart" :src="charts[i].requests.received"/>
-		</MkA>
-	</transition-group>
+			<div class="pie inbox _panel">
+				<div class="title">Pub</div>
+				<XPie :data="topPubInstancesForPie" class="chart"/>
+				<div class="subTitle">Top 10</div>
+			</div>
+		</div>
+		<div v-if="!fetching" class="items">
+			<div class="item _panel sub">
+				<div class="icon"><i class="ti ti-world-download"></i></div>
+				<div class="body">
+					<div class="value">
+						{{ number(federationSubActive) }}
+						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="federationSubActiveDiff"></MkNumberDiff>
+					</div>
+					<div class="label">Sub</div>
+				</div>
+			</div>
+			<div class="item _panel pub">
+				<div class="icon"><i class="ti ti-world-upload"></i></div>
+				<div class="body">
+					<div class="value">
+						{{ number(federationPubActive) }}
+						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="federationPubActiveDiff"></MkNumberDiff>
+					</div>
+					<div class="label">Pub</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue';
+import XPie from './overview.pie.vue';
 import MkMiniChart from '@/components/MkMiniChart.vue';
 import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
+import number from '@/filters/number';
+import MkNumberDiff from '@/components/MkNumberDiff.vue';
+import { i18n } from '@/i18n';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip';
 
-const instances = ref([]);
-const charts = ref([]);
-const fetching = ref(true);
+let topSubInstancesForPie: any = $ref(null);
+let topPubInstancesForPie: 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 fetching = $ref(true);
 
-const fetch = async () => {
-	const fetchedInstances = await os.api('federation/instances', {
-		sort: '+lastCommunicatedAt',
-		limit: 5,
+const { handler: externalTooltipHandler } = useChartTooltip();
+	
+onMounted(async () => {
+	const chart = await os.apiGet('charts/federation', { limit: 2, span: 'day' });
+	federationPubActive = chart.pubActive[0];
+	federationPubActiveDiff = chart.pubActive[0] - chart.pubActive[1];
+	federationSubActive = chart.subActive[0];
+	federationSubActiveDiff = chart.subActive[0] - chart.subActive[1];
+
+	os.apiGet('federation/stats', { limit: 10 }).then(res => {
+		topSubInstancesForPie = res.topSubInstances.map(x => ({
+			name: x.host,
+			color: x.themeColor,
+			value: x.followersCount,
+			onClick: () => {
+				os.pageWindow(`/instance-info/${x.host}`);
+			},
+		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowersCount }]);
+		topPubInstancesForPie = res.topPubInstances.map(x => ({
+			name: x.host,
+			color: x.themeColor,
+			value: x.followingCount,
+			onClick: () => {
+				os.pageWindow(`/instance-info/${x.host}`);
+			},
+		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowingCount }]);
 	});
-	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;
-};
-
-useInterval(fetch, 1000 * 60, {
-	immediate: true,
-	afterMounted: true,
+
+	fetching = false;
 });
 </script>
 
-<style lang="scss" scoped>
-.wbrkwale {
-	> .instances {
-		.chart-move {
-			transition: transform 1s ease;
-		}
+<style lang="scss" module>
+.root {
 
-		> .instance {
-			display: flex;
-			align-items: center;
-			padding: 16px 20px;
+	&:global {
+		> .pies {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+			grid-gap: 16px;
+			margin-bottom: 16px;
 
-			&:not(:last-child) {
-				border-bottom: solid 0.5px var(--divider);
-			}
+			> .pie {
+				position: relative;
+				padding: 12px;
 
-			> img {
-				display: block;
-				width: 34px;
-				height: 34px;
-				object-fit: cover;
-				border-radius: 4px;
-				margin-right: 12px;
-			}
+				> .title {
+					position: absolute;
+					top: 20px;
+					left: 20px;
+					font-size: 90%;
+				}
 
-			> .body {
-				flex: 1;
-				overflow: hidden;
-				font-size: 0.9em;
-				color: var(--fg);
-				padding-right: 8px;
-
-				> .name {
-					display: block;
-					width: 100%;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
+				> .chart {
+					max-height: 150px;
 				}
 
-				> .host {
-					margin: 0;
-					font-size: 75%;
-					opacity: 0.7;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
+				> .subTitle {
+					position: absolute;
+					bottom: 20px;
+					right: 20px;
+					font-size: 85%;
 				}
 			}
+		}
+
+		> .items {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+			grid-gap: 16px;
+
+			> .item {
+				display: flex;
+				box-sizing: border-box;
+				padding: 12px;
 
-			> .chart {
-				height: 30px;
+				> .icon {
+					display: grid;
+					place-items: center;
+					height: 100%;
+					aspect-ratio: 1;
+					margin-right: 12px;
+					background: var(--accentedBg);
+					color: var(--accent);
+					border-radius: 10px;
+				}
+
+				&.sub {
+					> .icon {
+						background: #d5ba0026;
+						color: #dfc300;
+					}
+				}
+
+				&.pub {
+					> .icon {
+						background: #00cf2326;
+						color: #00cd5b;
+					}
+				}
+
+				> .body {
+					padding: 4px 0;
+
+					> .value {
+						font-size: 1.3em;
+						font-weight: bold;
+
+						> .diff {
+							font-size: 0.65em;
+							font-weight: normal;
+						}
+					}
+
+					> .label {
+						font-size: 0.8em;
+						opacity: 0.5;
+					}
+				}
 			}
 		}
 	}
 }
 </style>
+
diff --git a/packages/client/src/pages/admin/overview.instances.vue b/packages/client/src/pages/admin/overview.instances.vue
new file mode 100644
index 0000000000..c13e2328fd
--- /dev/null
+++ b/packages/client/src/pages/admin/overview.instances.vue
@@ -0,0 +1,52 @@
+<template>
+<div class="wbrkwale">
+	<MkLoading v-if="fetching"/>
+	<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances">
+		<MkA v-for="(instance, i) in instances" :key="instance.id" :to="`/instance-info/${instance.host}`" class="instance">
+			<MkInstanceCardMini :instance="instance"/>
+		</MkA>
+	</transition-group>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue';
+
+const instances = ref([]);
+const fetching = ref(true);
+
+const fetch = async () => {
+	const fetchedInstances = await os.api('federation/instances', {
+		sort: '+lastCommunicatedAt',
+		limit: 6,
+	});
+	instances.value = fetchedInstances;
+	fetching.value = false;
+};
+
+useInterval(fetch, 1000 * 60, {
+	immediate: true,
+	afterMounted: true,
+});
+</script>
+
+<style lang="scss" scoped>
+.wbrkwale {
+	> .instances {
+		.chart-move {
+			transition: transform 1s ease;
+		}
+
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+		grid-gap: 12px;
+
+		> .instance:hover {
+			text-decoration: none;
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/pages/admin/overview.queue-chart.vue b/packages/client/src/pages/admin/overview.queue-chart.vue
deleted file mode 100644
index a2b748ad38..0000000000
--- a/packages/client/src/pages/admin/overview.queue-chart.vue
+++ /dev/null
@@ -1,211 +0,0 @@
-<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 > 100) {
-		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 > 100) {
-			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: 0,
-					top: 0,
-					bottom: 0,
-				},
-			},
-			scales: {
-				x: {
-					display: false,
-					grid: {
-						display: false,
-					},
-					ticks: {
-						display: false,
-						maxTicksLimit: 10,
-					},
-				},
-				y: {
-					display: false,
-					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);
-});
-
-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.queue.chart.vue b/packages/client/src/pages/admin/overview.queue.chart.vue
new file mode 100644
index 0000000000..609ad5ebef
--- /dev/null
+++ b/packages/client/src/pages/admin/overview.queue.chart.vue
@@ -0,0 +1,185 @@
+<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';
+import { chartVLine } from '@/scripts/chart-vline';
+
+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 > 100) {
+			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 > 100) {
+		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(() => {
+	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
+
+	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: 0,
+					top: 0,
+					bottom: 0,
+				},
+			},
+			scales: {
+				x: {
+					grid: {
+						display: false,
+						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,
+				},
+			},
+		},
+		plugins: [chartVLine(vLineColor)],
+	});
+});
+
+defineExpose({
+	setData,
+	pushData,
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/client/src/pages/admin/overview.queue.vue b/packages/client/src/pages/admin/overview.queue.vue
new file mode 100644
index 0000000000..9fd799e158
--- /dev/null
+++ b/packages/client/src/pages/admin/overview.queue.vue
@@ -0,0 +1,127 @@
+<template>
+<div :class="$style.root">
+	<div class="_table status">
+		<div class="_row">
+			<div class="_cell" style="text-align: center;"><div class="_label">Process</div>{{ number(activeSincePrevTick) }}</div>
+			<div class="_cell" style="text-align: center;"><div class="_label">Active</div>{{ number(active) }}</div>
+			<div class="_cell" style="text-align: center;"><div class="_label">Waiting</div>{{ number(waiting) }}</div>
+			<div class="_cell" style="text-align: center;"><div class="_label">Delayed</div>{{ number(delayed) }}</div>
+		</div>
+	</div>
+	<div class="charts">
+		<div class="chart">
+			<div class="title">Process</div>
+			<XChart ref="chartProcess" type="process"/>
+		</div>
+		<div class="chart">
+			<div class="title">Active</div>
+			<XChart ref="chartActive" type="active"/>
+		</div>
+		<div class="chart">
+			<div class="title">Delayed</div>
+			<XChart ref="chartDelayed" type="delayed"/>
+		</div>
+		<div class="chart">
+			<div class="title">Waiting</div>
+			<XChart ref="chartWaiting" type="waiting"/>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { markRaw, onMounted, onUnmounted, ref } from 'vue';
+import XChart from './overview.queue.chart.vue';
+import number from '@/filters/number';
+import * as os from '@/os';
+import { stream } from '@/stream';
+import { i18n } from '@/i18n';
+
+const connection = markRaw(stream.useChannel('queueStats'));
+
+const activeSincePrevTick = ref(0);
+const active = ref(0);
+const delayed = ref(0);
+const waiting = ref(0);
+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;
+}>();
+
+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(() => {
+	connection.on('stats', onStats);
+	connection.on('statsLog', onStatsLog);
+	connection.send('requestLog', {
+		id: Math.random().toString().substr(2, 8),
+		length: 100,
+	});
+});
+
+onUnmounted(() => {
+	connection.off('stats', onStats);
+	connection.off('statsLog', onStatsLog);
+	connection.dispose();
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	&:global {
+		> .status {
+			padding: 0 0 16px 0;
+		}
+
+		> .charts {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			gap: 16px;
+
+			> .chart {
+				min-width: 0;
+				padding: 16px;
+				background: var(--panel);
+				border-radius: var(--radius);
+
+				> .title {
+					font-size: 0.85em;
+				}
+			}
+		}
+	}
+}
+</style>	
diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/overview.stats.vue
new file mode 100644
index 0000000000..dc9146cffd
--- /dev/null
+++ b/packages/client/src/pages/admin/overview.stats.vue
@@ -0,0 +1,153 @@
+<template>
+<div>
+	<MkLoading v-if="fetching"/>
+	<div v-else :class="$style.root">
+		<div class="item _panel users">
+			<div class="icon"><i class="ti ti-users"></i></div>
+			<div class="body">
+				<div class="value">
+					{{ number(stats.originalUsersCount) }}
+					<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"></MkNumberDiff>
+				</div>
+				<div class="label">Users</div>
+			</div>
+		</div>
+		<div class="item _panel notes">
+			<div class="icon"><i class="ti ti-pencil"></i></div>
+			<div class="body">
+				<div class="value">
+					{{ number(stats.originalNotesCount) }}
+					<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff>
+				</div>
+				<div class="label">Notes</div>
+			</div>
+		</div>
+		<div class="item _panel instances">
+			<div class="icon"><i class="ti ti-planet"></i></div>
+			<div class="body">
+				<div class="value">
+					{{ number(stats.instances) }}
+				</div>
+				<div class="label">Instances</div>
+			</div>
+		</div>
+		<div class="item _panel online">
+			<div class="icon"><i class="ti ti-access-point"></i></div>
+			<div class="body">
+				<div class="value">
+					{{ number(onlineUsersCount) }}
+				</div>
+				<div class="label">Online</div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import MkMiniChart from '@/components/MkMiniChart.vue';
+import * as os from '@/os';
+import number from '@/filters/number';
+import MkNumberDiff from '@/components/MkNumberDiff.vue';
+import { i18n } from '@/i18n';
+
+let stats: any = $ref(null);
+let usersComparedToThePrevDay = $ref<number>();
+let notesComparedToThePrevDay = $ref<number>();
+let onlineUsersCount = $ref(0);
+let fetching = $ref(true);
+
+onMounted(async () => {
+	const [_stats, _onlineUsersCount] = await Promise.all([
+		os.api('stats', {}),
+		os.api('get-online-users-count').then(res => res.count),
+	]);
+	stats = _stats;
+	onlineUsersCount = _onlineUsersCount;
+
+	os.apiGet('charts/users', { limit: 2, span: 'day' }).then(chart => {
+		usersComparedToThePrevDay = stats.originalUsersCount - chart.local.total[1];
+	});
+
+	os.apiGet('charts/notes', { limit: 2, span: 'day' }).then(chart => {
+		notesComparedToThePrevDay = stats.originalNotesCount - chart.local.total[1];
+	});
+
+	fetching = false;
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+	grid-gap: 16px;
+
+	&:global {
+		> .item {
+			display: flex;
+			box-sizing: border-box;
+			padding: 12px;
+
+			> .icon {
+				display: grid;
+				place-items: center;
+				height: 100%;
+				aspect-ratio: 1;
+				margin-right: 12px;
+				background: var(--accentedBg);
+				color: var(--accent);
+				border-radius: 10px;
+			}
+
+			&.users {
+				> .icon {
+					background: #0088d726;
+					color: #3d96c1;
+				}
+			}
+
+			&.notes {
+				> .icon {
+					background: #86b30026;
+					color: #86b300;
+				}
+			}
+
+			&.instances {
+				> .icon {
+					background: #e96b0026;
+					color: #d76d00;
+				}
+			}
+
+			&.online {
+				> .icon {
+					background: #8a00d126;
+					color: #c01ac3;
+				}
+			}
+
+			> .body {
+				padding: 4px 0;
+
+				> .value {
+					font-size: 1.3em;
+					font-weight: bold;
+
+					> .diff {
+						font-size: 0.65em;
+						font-weight: normal;
+					}
+				}
+
+				> .label {
+					font-size: 0.8em;
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/pages/admin/overview.user.vue b/packages/client/src/pages/admin/overview.user.vue
deleted file mode 100644
index 0dd4a749ba..0000000000
--- a/packages/client/src/pages/admin/overview.user.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<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/MkMiniChart.vue';
-import * as os from '@/os';
-import { acct } from '@/filters/user';
-
-const props = defineProps<{
-	user: misskey.entities.User;
-}>();
-
-let 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.users.vue b/packages/client/src/pages/admin/overview.users.vue
new file mode 100644
index 0000000000..05d7221c10
--- /dev/null
+++ b/packages/client/src/pages/admin/overview.users.vue
@@ -0,0 +1,55 @@
+<template>
+<div :class="$style.root">
+	<MkLoading v-if="fetching"/>
+	<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="users">
+		<MkA v-for="(user, i) in newUsers" :key="user.id" :to="`/user-info/${user.id}`" class="user">
+			<MkUserCardMini :user="user"/>
+		</MkA>
+	</transition-group>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import MkUserCardMini from '@/components/MkUserCardMini.vue';
+
+let newUsers = $ref(null);
+let fetching = $ref(true);
+
+const fetch = async () => {
+	const _newUsers = await os.api('admin/show-users', {
+		limit: 5,
+		sort: '+createdAt',
+		origin: 'local',
+	});
+	newUsers = _newUsers;
+	fetching = false;
+};
+
+useInterval(fetch, 1000 * 60, {
+	immediate: true,
+	afterMounted: true,
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	&:global {
+		> .users {
+			.chart-move {
+				transition: transform 1s ease;
+			}
+
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+			grid-gap: 12px;
+
+			> .user:hover {
+				text-decoration: none;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index 6c1f54186c..786a908720 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -1,207 +1,66 @@
 <template>
-<MkSpacer :content-max="900">
+<MkSpacer :content-max="1000">
 	<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">
-					<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>
-
-			<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>
-
-			<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">Environment</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="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 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 tagCloud">
-				<div class="body">
-					<MkTagCloud v-if="activeInstances">
-						<li v-for="instance in activeInstances">
-							<a @click.prevent="onInstanceClick(instance)">
-								<img style="width: 32px;" :src="instance.iconUrl">
-							</a>
-						</li>
-					</MkTagCloud>
-				</div>
-			</div>
-			<div v-if="topSubInstancesForPie && topPubInstancesForPie" class="container federationPies">
-				<div class="body">
-					<div class="chart deliver">
-						<div class="title">Sub</div>
-						<XPie :data="topSubInstancesForPie"/>
-						<div class="subTitle">Top 10</div>
-					</div>
-					<div class="chart inbox">
-						<div class="title">Pub</div>
-						<XPie :data="topPubInstancesForPie"/>
-						<div class="subTitle">Top 10</div>
-					</div>
-				</div>
-			</div>
-		</div>
+		<MkFolder class="item">
+			<template #header>Stats</template>
+			<XStats/>
+		</MkFolder>
+		<MkFolder class="item">
+			<template #header>Active users</template>
+			<XActiveUsers/>
+		</MkFolder>
+		<MkFolder class="item">
+			<template #header>Federation</template>
+			<XFederation/>
+		</MkFolder>
+		<MkFolder class="item">
+			<template #header>Instances</template>
+			<XInstances/>
+		</MkFolder>
+		<MkFolder class="item">
+			<template #header>Ap requests</template>
+			<XApRequests/>
+		</MkFolder>
+		<MkFolder class="item">
+			<template #header>New users</template>
+			<XUsers/>
+		</MkFolder>
+		<MkFolder class="item">
+			<template #header>Deliver queue</template>
+			<XQueue domain="deliver"/>
+		</MkFolder>
+		<MkFolder class="item">
+			<template #header>Inbox queue</template>
+			<XQueue domain="inbox"/>
+		</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 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 MkNumberDiff from '@/components/MkNumberDiff.vue';
+import XInstances from './overview.instances.vue';
+import XQueue from './overview.queue.vue';
+import XApRequests from './overview.ap-requests.vue';
+import XUsers from './overview.users.vue';
+import XActiveUsers from './overview.active-users.vue';
+import XStats from './overview.stats.vue';
 import MkTagCloud from '@/components/MkTagCloud.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';
 import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
-
-Chart.register(
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-	//gradient,
-);
+import MkFolder from '@/components/MkFolder.vue';
 
 const rootEl = $ref<HTMLElement>();
-const chartEl = $ref<HTMLCanvasElement>(null);
-let stats: any = $ref(null);
 let serverInfo: any = $ref(null);
 let topSubInstancesForPie: any = $ref(null);
 let topPubInstancesForPie: 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);
@@ -210,170 +69,12 @@ let newUsers = $ref(null);
 let activeInstances = $shallowRef(null);
 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();
-
-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: 0,
-					top: 0,
-					bottom: 0,
-				},
-			},
-			scales: {
-				x: {
-					type: 'time',
-					display: false,
-					stacked: true,
-					offset: false,
-					time: {
-						stepSize: 1,
-						unit: 'month',
-					},
-					grid: {
-						display: false,
-					},
-					ticks: {
-						display: false,
-					},
-					adapters: {
-						date: {
-							locale: enUS,
-						},
-					},
-					min: getDate(chartLimit).getTime(),
-				},
-				y: {
-					display: false,
-					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?.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();
-				}
-			},
-		}],
-	});
-}
-
 function onInstanceClick(i) {
 	os.pageWindow(`/instance-info/${i.host}`);
 }
@@ -389,20 +90,6 @@ onMounted(async () => {
 	magicGrid.listen();
 	*/
 
-	renderChart();
-
-	os.api('stats', {}).then(statsResponse => {
-		stats = statsResponse;
-
-		os.apiGet('charts/users', { limit: 2, span: 'day' }).then(chart => {
-			usersComparedToThePrevDay = stats.originalUsersCount - chart.local.total[1];
-		});
-
-		os.apiGet('charts/notes', { limit: 2, span: 'day' }).then(chart => {
-			notesComparedToThePrevDay = stats.originalNotesCount - chart.local.total[1];
-		});
-	});
-
 	os.apiGet('charts/federation', { limit: 2, span: 'day' }).then(chart => {
 		federationPubActive = chart.pubActive[0];
 		federationPubActiveDiff = chart.pubActive[0] - chart.pubActive[1];
@@ -471,165 +158,8 @@ definePageMetadata({
 
 <style lang="scss" scoped>
 .edbbcaef {
-	display: flex;
-
-	> .left, > .right {
-		box-sizing: border-box;
-		width: 50%;
-
-		> .container {
-			margin: 32px 0;
-
-			> .title {
-				font-weight: bold;
-				margin-bottom: 16px;
-			}
-
-			&.stats, &.federationStats {
-				> .body {
-					display: grid;
-					grid-gap: 16px;
-					grid-template-columns: repeat(auto-fill, minmax(180px, 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.7em;
-							}
-						}
-					}
-				}
-			}
-
-			&.env {
-				> .body {
-					display: grid;
-					grid-gap: 16px;
-					grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-
-					> .number {
-						padding: 14px 20px;
-
-						> .label {
-							opacity: 0.7;
-							font-size: 0.8em;
-						}
-
-						> .value {
-							font-size: 1.1em;
-						}
-					}
-				}
-			}
-
-			&.charts {
-				> .body {
-					padding: 32px;
-					background: var(--panel);
-					border-radius: var(--radius);
-				}
-			}
-
-			&.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);
-					border-radius: var(--radius);
-					overflow: clip;
-				}
-			}
-
-			&.queue {
-				> .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%;
-						}
-					}
-				}
-			}
-
-			&.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%;
-						}
-					}
-				}
-			}
-
-			&.tagCloud {
-				> .body {
-					background: var(--panel);
-					border-radius: var(--radius);
-					overflow: clip;
-				}
-			}
-		}
-	}
-
-	> .left {
-		padding-right: 16px;
-	}
-
-	> .right {
-		padding-left: 16px;
-	}
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+	grid-gap: 16px;
 }
 </style>
diff --git a/packages/client/src/pages/admin/queue.chart.chart.vue b/packages/client/src/pages/admin/queue.chart.chart.vue
index 96156f8e67..8cb9d28b46 100644
--- a/packages/client/src/pages/admin/queue.chart.chart.vue
+++ b/packages/client/src/pages/admin/queue.chart.chart.vue
@@ -25,6 +25,7 @@ import number from '@/filters/number';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+import { chartVLine } from '@/scripts/chart-vline';
 
 Chart.register(
 	ArcElement,
@@ -105,6 +106,8 @@ const color =
 	'?' as never;
 
 onMounted(() => {
+	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
+
 	chartInstance = new Chart(chartEl.value, {
 		type: 'line',
 		data: {
@@ -167,6 +170,7 @@ onMounted(() => {
 				},
 			},
 		},
+		plugins: [chartVLine(vLineColor)],
 	});
 });
 
diff --git a/packages/client/src/scripts/chart-vline.ts b/packages/client/src/scripts/chart-vline.ts
new file mode 100644
index 0000000000..8e3c4436b2
--- /dev/null
+++ b/packages/client/src/scripts/chart-vline.ts
@@ -0,0 +1,21 @@
+export const chartVLine = (vLineColor: string) => ({
+	id: 'vLine',
+	beforeDraw(chart, args, options) {
+		if (chart.tooltip?._active?.length) {
+			const activePoint = chart.tooltip._active[0];
+			const ctx = chart.ctx;
+			const x = activePoint.element.x;
+			const topY = chart.scales.y.top;
+			const bottomY = chart.scales.y.bottom;
+
+			ctx.save();
+			ctx.beginPath();
+			ctx.moveTo(x, bottomY);
+			ctx.lineTo(x, topY);
+			ctx.lineWidth = 1;
+			ctx.strokeStyle = vLineColor;
+			ctx.stroke();
+			ctx.restore();
+		}
+	},
+});
-- 
cgit v1.2.3-freya


From 52361579ad6d8feb725499cc780c02d631d44922 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 23 Dec 2022 16:46:08 +0900
Subject: :art:

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/admin/overview.instances.vue b/packages/client/src/pages/admin/overview.instances.vue
index c13e2328fd..b496eb86ac 100644
--- a/packages/client/src/pages/admin/overview.instances.vue
+++ b/packages/client/src/pages/admin/overview.instances.vue
@@ -1,11 +1,11 @@
 <template>
 <div class="wbrkwale">
 	<MkLoading v-if="fetching"/>
-	<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances">
+	<div v-else class="instances">
 		<MkA v-for="(instance, i) in instances" :key="instance.id" :to="`/instance-info/${instance.host}`" class="instance">
 			<MkInstanceCardMini :instance="instance"/>
 		</MkA>
-	</transition-group>
+	</div>
 </div>
 </template>
 
@@ -36,10 +36,6 @@ useInterval(fetch, 1000 * 60, {
 <style lang="scss" scoped>
 .wbrkwale {
 	> .instances {
-		.chart-move {
-			transition: transform 1s ease;
-		}
-
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
 		grid-gap: 12px;
-- 
cgit v1.2.3-freya


From 6f8767c08a3b7b8a249ac74fe2c86c2673ab9e8d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 23 Dec 2022 16:46:38 +0900
Subject: :art:

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/admin/overview.users.vue b/packages/client/src/pages/admin/overview.users.vue
index 05d7221c10..ba03eefef2 100644
--- a/packages/client/src/pages/admin/overview.users.vue
+++ b/packages/client/src/pages/admin/overview.users.vue
@@ -1,11 +1,11 @@
 <template>
 <div :class="$style.root">
 	<MkLoading v-if="fetching"/>
-	<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="users">
+	<div v-else class="users">
 		<MkA v-for="(user, i) in newUsers" :key="user.id" :to="`/user-info/${user.id}`" class="user">
 			<MkUserCardMini :user="user"/>
 		</MkA>
-	</transition-group>
+	</div>
 </div>
 </template>
 
-- 
cgit v1.2.3-freya


From 2efd06f4ade569dd7c8d58c42f46a5b99878b8f1 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 23 Dec 2022 17:13:43 +0900
Subject: enhance(client): show warning on screen when logged in as bot

Related #9386
---
 locales/ja-JP.yml                          |  1 +
 packages/client/src/ui/_common_/common.vue | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+)

(limited to 'packages/client/src')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 001749468a..6abb44dc58 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -910,6 +910,7 @@ sendPushNotificationReadMessageCaption: "「{emptyPushNotificationMessage}」と
 windowMaximize: "最大化"
 windowRestore: "元に戻す"
 caption: "キャプション"
+loggedInAsBot: "Botアカウントでログイン中"
 
 _sensitiveMediaDetection:
   description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"
diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue
index 1ea59dd260..7f3fc0e4af 100644
--- a/packages/client/src/ui/_common_/common.vue
+++ b/packages/client/src/ui/_common_/common.vue
@@ -14,6 +14,8 @@
 <div v-if="pendingApiRequestsCount > 0" id="wait"></div>
 
 <div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
+
+<div v-if="$i && $i.isBot" id="botWarn"><span>{{ i18n.ts.loggedInAsBot }}</span></div>
 </template>
 
 <script lang="ts" setup>
@@ -24,6 +26,7 @@ import { uploads } from '@/scripts/upload';
 import * as sound from '@/scripts/sound';
 import { $i } from '@/account';
 import { stream } from '@/stream';
+import { i18n } from '@/i18n';
 
 const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
 const XUpload = defineAsyncComponent(() => import('./upload.vue'));
@@ -94,6 +97,29 @@ if ($i) {
 	}
 }
 
+#botWarn {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	margin: auto;
+	width: 100%;
+	height: max-content;
+	text-align: center;
+	z-index: 2147483647;
+	color: #ff0;
+	background: rgba(0, 0, 0, 0.5);
+	padding: 4px 7px;
+	font-size: 14px;
+	pointer-events: none;
+	user-select: none;
+
+	> span {
+		animation: dev-ticker-blink 2s infinite;
+	}
+}
+
 #devTicker {
 	position: fixed;
 	top: 0;
-- 
cgit v1.2.3-freya


From 8539c7b20f915fdb235ff557499a6bf85c3ec526 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 24 Dec 2022 08:46:30 +0900
Subject: :art:

---
 packages/client/src/components/MkFolder.vue        |   5 +-
 .../src/pages/admin/overview.ap-requests.vue       | 157 +++++++++++++++------
 .../client/src/pages/admin/overview.federation.vue |   4 +-
 packages/client/src/pages/admin/overview.stats.vue |   2 +-
 packages/client/src/pages/admin/overview.users.vue |   2 +-
 packages/client/src/scripts/use-chart-tooltip.ts   |   2 +-
 6 files changed, 126 insertions(+), 46 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue
index ee3df83287..9e83b07cd7 100644
--- a/packages/client/src/components/MkFolder.vue
+++ b/packages/client/src/components/MkFolder.vue
@@ -8,7 +8,8 @@
 			<template v-else><i class="ti ti-chevron-down"></i></template>
 		</button>
 	</header>
-	<transition :name="$store.state.animation ? 'folder-toggle' : ''"
+	<transition
+		:name="$store.state.animation ? 'folder-toggle' : ''"
 		@enter="enter"
 		@after-enter="afterEnter"
 		@leave="leave"
@@ -121,6 +122,8 @@ export default defineComponent({
 		backdrop-filter: var(--blur, blur(20px));
 
 		> .title {
+			display: grid;
+			place-content: center;
 			margin: 0;
 			padding: 12px 16px 12px 0;
 
diff --git a/packages/client/src/pages/admin/overview.ap-requests.vue b/packages/client/src/pages/admin/overview.ap-requests.vue
index 65ba0075eb..e1179181c6 100644
--- a/packages/client/src/pages/admin/overview.ap-requests.vue
+++ b/packages/client/src/pages/admin/overview.ap-requests.vue
@@ -2,8 +2,13 @@
 <div>
 	<MkLoading v-if="fetching"/>
 	<div v-show="!fetching" :class="$style.root">
-		<div class="chart _panel">
-			<canvas ref="chartEl"></canvas>
+		<div class="charts _panel">
+			<div class="chart">
+				<canvas ref="chartEl2"></canvas>
+			</div>
+			<div class="chart">
+				<canvas ref="chartEl"></canvas>
+			</div>
 		</div>
 	</div>
 </div>
@@ -58,20 +63,14 @@ Chart.register(
 	gradient,
 );
 
-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 chartLimit = 50;
 const chartEl = $ref<HTMLCanvasElement>();
+const chartEl2 = $ref<HTMLCanvasElement>();
 let fetching = $ref(true);
 
 const { handler: externalTooltipHandler } = useChartTooltip();
-	
+const { handler: externalTooltipHandler2 } = useChartTooltip();
+
 onMounted(async () => {
 	const now = new Date();
 
@@ -101,8 +100,8 @@ onMounted(async () => {
 
 	const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
 	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
-	const succColor = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--success')).toHexString();
-	const failColor = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--error')).toHexString();
+	const succColor = '#4fd60c';
+	const failColor = '#e8681e';
 
 	const succMax = Math.max(...raw.deliverSucceeded);
 	const failMax = Math.max(...raw.deliverFailed);
@@ -113,27 +112,17 @@ onMounted(async () => {
 	new Chart(chartEl, {
 		type: 'bar',
 		data: {
-			//labels: new Array(props.limit).fill(0).map((_, i) => getDate(i).toLocaleString()).slice().reverse(),
 			datasets: [{
 				stack: 'a',
 				parsing: false,
-				label: 'Succ',
+				label: 'Out: Succ',
 				data: format(raw.deliverSucceeded).slice().reverse(),
 				tension: 0.3,
 				pointRadius: 0,
 				borderWidth: 0,
 				borderJoinStyle: 'round',
 				borderRadius: 4,
-				//backgroundColor: alpha(color, 0.1),
-				gradient: {
-					backgroundColor: {
-						axis: 'y',
-						colors: {
-							0: alpha(succColor, 0.3),
-							[succMax]: alpha(succColor, 1),
-						},
-					},
-				},
+				backgroundColor: succColor,
 				barPercentage: 0.9,
 				categoryPercentage: 0.9,
 				fill: true,
@@ -141,23 +130,14 @@ onMounted(async () => {
 			}, {
 				stack: 'a',
 				parsing: false,
-				label: 'Fail',
+				label: 'Out: Fail',
 				data: formatMinus(raw.deliverFailed).slice().reverse(),
 				tension: 0.3,
 				pointRadius: 0,
 				borderWidth: 0,
 				borderJoinStyle: 'round',
 				borderRadius: 4,
-				//backgroundColor: alpha(color, 0.1),
-				gradient: {
-					backgroundColor: {
-						axis: 'y',
-						colors: {
-							0: alpha(failColor, 0.3),
-							[-failMax]: alpha(failColor, 1),
-						},
-					},
-				},
+				backgroundColor: failColor,
 				barPercentage: 0.9,
 				categoryPercentage: 0.9,
 				fill: true,
@@ -244,6 +224,99 @@ onMounted(async () => {
 		},
 		plugins: [chartVLine(vLineColor)],
 	});
+
+	new Chart(chartEl2, {
+		type: 'bar',
+		data: {
+			datasets: [{
+				parsing: false,
+				label: 'In',
+				data: format(raw.inboxReceived).slice().reverse(),
+				tension: 0.3,
+				pointRadius: 0,
+				borderWidth: 0,
+				borderJoinStyle: 'round',
+				borderRadius: 4,
+				backgroundColor: '#0cc2d6',
+				barPercentage: 0.9,
+				categoryPercentage: 0.9,
+				fill: true,
+				clip: 8,
+			}],
+		},
+		options: {
+			aspectRatio: 5,
+			layout: {
+				padding: {
+					left: 0,
+					right: 8,
+					top: 0,
+					bottom: 0,
+				},
+			},
+			scales: {
+				x: {
+					type: 'time',
+					offset: false,
+					time: {
+						stepSize: 1,
+						unit: 'day',
+					},
+					grid: {
+						display: false,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: false,
+						maxRotation: 0,
+						autoSkipPadding: 16,
+					},
+					adapters: {
+						date: {
+							locale: enUS,
+						},
+					},
+					min: getDate(chartLimit).getTime(),
+				},
+				y: {
+					position: 'left',
+					suggestedMax: 10,
+					grid: {
+						display: false,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+				},
+			},
+			interaction: {
+				intersect: false,
+				mode: 'index',
+			},
+			elements: {
+				point: {
+					hoverRadius: 5,
+					hoverBorderWidth: 2,
+				},
+			},
+			animation: true,
+			plugins: {
+				legend: {
+					display: false,
+				},
+				tooltip: {
+					enabled: false,
+					mode: 'index',
+					animation: {
+						duration: 0,
+					},
+					external: externalTooltipHandler2,
+				},
+				gradient,
+			},
+		},
+		plugins: [chartVLine(vLineColor)],
+	});
 	
 	fetching = false;
 });
@@ -251,11 +324,15 @@ onMounted(async () => {
 
 <style lang="scss" module>
 .root {
-
 	&:global {
-		> .chart {
-			padding: 16px;
-			margin-bottom: 16px;
+		> .charts {
+			> .chart {
+				padding: 16px;
+
+				&:first-child {
+					border-bottom: solid 0.5px var(--divider);
+				}
+			}
 		}
 	}
 }
diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
index eb44fa23b7..2c688d5c9f 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -96,7 +96,7 @@ onMounted(async () => {
 	&:global {
 		> .pies {
 			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 			grid-gap: 16px;
 			margin-bottom: 16px;
 
@@ -126,7 +126,7 @@ onMounted(async () => {
 
 		> .items {
 			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 			grid-gap: 16px;
 
 			> .item {
diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/overview.stats.vue
index dc9146cffd..f023051017 100644
--- a/packages/client/src/pages/admin/overview.stats.vue
+++ b/packages/client/src/pages/admin/overview.stats.vue
@@ -81,7 +81,7 @@ onMounted(async () => {
 <style lang="scss" module>
 .root {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 	grid-gap: 16px;
 
 	&:global {
diff --git a/packages/client/src/pages/admin/overview.users.vue b/packages/client/src/pages/admin/overview.users.vue
index ba03eefef2..9747bfc3b6 100644
--- a/packages/client/src/pages/admin/overview.users.vue
+++ b/packages/client/src/pages/admin/overview.users.vue
@@ -43,7 +43,7 @@ useInterval(fetch, 1000 * 60, {
 			}
 
 			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 			grid-gap: 12px;
 
 			> .user:hover {
diff --git a/packages/client/src/scripts/use-chart-tooltip.ts b/packages/client/src/scripts/use-chart-tooltip.ts
index 91c27585f3..afdd547245 100644
--- a/packages/client/src/scripts/use-chart-tooltip.ts
+++ b/packages/client/src/scripts/use-chart-tooltip.ts
@@ -41,7 +41,7 @@ export function useChartTooltip() {
 
 		tooltipShowing.value = true;
 		tooltipX.value = rect.left + window.pageXOffset + context.tooltip.caretX;
-		tooltipY.value = rect.top + window.pageYOffset + context.tooltip.caretY;
+		tooltipY.value = rect.top + window.pageYOffset;
 	}
 
 	return {
-- 
cgit v1.2.3-freya


From fabd1f179196351034c601bf0705fcf8704f930f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 24 Dec 2022 11:04:07 +0900
Subject: :art:

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/admin/overview.queue.chart.vue b/packages/client/src/pages/admin/overview.queue.chart.vue
index 609ad5ebef..1e095bddaa 100644
--- a/packages/client/src/pages/admin/overview.queue.chart.vue
+++ b/packages/client/src/pages/admin/overview.queue.chart.vue
@@ -119,7 +119,8 @@ onMounted(() => {
 				borderWidth: 2,
 				borderJoinStyle: 'round',
 				borderColor: color,
-				backgroundColor: alpha(color, 0.1),
+				backgroundColor: alpha(color, 0.2),
+				fill: true,
 				data: [],
 			}],
 		},
diff --git a/packages/client/src/pages/admin/queue.chart.chart.vue b/packages/client/src/pages/admin/queue.chart.chart.vue
index 8cb9d28b46..5777674ae3 100644
--- a/packages/client/src/pages/admin/queue.chart.chart.vue
+++ b/packages/client/src/pages/admin/queue.chart.chart.vue
@@ -119,7 +119,8 @@ onMounted(() => {
 				borderWidth: 2,
 				borderJoinStyle: 'round',
 				borderColor: color,
-				backgroundColor: alpha(color, 0.1),
+				backgroundColor: alpha(color, 0.2),
+				fill: true,
 				data: [],
 			}],
 		},
-- 
cgit v1.2.3-freya


From b3decf965fa15fbc35bf4641bfdeafa1c645b902 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 24 Dec 2022 11:57:06 +0900
Subject: pages関連
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja-JP.yml                                  | 251 ------------------
 .../page-editor/els/page-editor.el.button.vue      |  70 ------
 .../page-editor/els/page-editor.el.canvas.vue      |  38 ---
 .../page-editor/els/page-editor.el.counter.vue     |  34 ---
 .../pages/page-editor/els/page-editor.el.if.vue    |  67 -----
 .../pages/page-editor/els/page-editor.el.image.vue |  23 +-
 .../pages/page-editor/els/page-editor.el.note.vue  |  35 +--
 .../els/page-editor.el.number-input.vue            |  34 ---
 .../pages/page-editor/els/page-editor.el.post.vue  |  31 ---
 .../els/page-editor.el.radio-button.vue            |  39 ---
 .../page-editor/els/page-editor.el.section.vue     |  58 +++--
 .../page-editor/els/page-editor.el.switch.vue      |  34 ---
 .../page-editor/els/page-editor.el.text-input.vue  |  27 --
 .../pages/page-editor/els/page-editor.el.text.vue  |  25 +-
 .../els/page-editor.el.textarea-input.vue          |  28 ---
 .../page-editor/els/page-editor.el.textarea.vue    |  45 ----
 .../src/pages/page-editor/page-editor.blocks.vue   |  55 ++--
 .../pages/page-editor/page-editor.container.vue    |   6 +-
 .../pages/page-editor/page-editor.script-block.vue | 279 ---------------------
 .../client/src/pages/page-editor/page-editor.vue   | 185 ++------------
 packages/client/src/pages/page.vue                 |   1 +
 21 files changed, 137 insertions(+), 1228 deletions(-)
 delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.button.vue
 delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
 delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
 delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.if.vue
 delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
 delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.post.vue
 delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
 delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
 delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
 delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
 delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
 delete mode 100644 packages/client/src/pages/page-editor/page-editor.script-block.vue

(limited to 'packages/client/src')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 6abb44dc58..98e435a6b5 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1489,8 +1489,6 @@ _pages:
   eyeCatchingImageRemove: "アイキャッチ画像を削除"
   chooseBlock: "ブロックを追加"
   selectType: "種類を選択"
-  enterVariableName: "変数名を決めてください"
-  variableNameIsAlreadyUsed: "その変数名は既に使われています"
   contentBlocks: "コンテンツ"
   inputBlocks: "入力"
   specialBlocks: "特殊"
@@ -1501,261 +1499,12 @@ _pages:
     image: "画像"
     button: "ボタン"
 
-    if: "もし"
-    _if:
-      variable: "変数"
-
-    post: "投稿フォーム"
-    _post:
-      text: "内容"
-      attachCanvasImage: "キャンバスの画像を添付する"
-      canvasId: "キャンバスID"
-
-    textInput: "テキスト入力"
-    _textInput:
-      name: "変数名"
-      text: "タイトル"
-      default: "デフォルト値"
-
-    textareaInput: "複数行テキスト入力"
-    _textareaInput:
-      name: "変数名"
-      text: "タイトル"
-      default: "デフォルト値"
-
-    numberInput: "数値入力"
-    _numberInput:
-      name: "変数名"
-      text: "タイトル"
-      default: "デフォルト値"
-
-    canvas: "キャンバス"
-    _canvas:
-      id: "キャンバスID"
-      width: "幅"
-      height: "高さ"
-
     note: "ノート埋め込み"
     _note:
       id: "ノートID"
       idDescription: "ノートURLをペーストして設定することもできます。"
       detailed: "詳細な表示"
 
-    switch: "スイッチ"
-    _switch:
-      name: "変数名"
-      text: "タイトル"
-      default: "デフォルト値"
-
-    counter: "カウンター"
-    _counter:
-      name: "変数名"
-      text: "タイトル"
-      inc: "増加値"
-
-    _button:
-      text: "タイトル"
-      colored: "色付き"
-      action: "ボタンを押したときの動作"
-      _action:
-        dialog: "ダイアログを表示する"
-        _dialog:
-          content: "内容"
-        resetRandom: "乱数をリセット"
-        pushEvent: "イベントを送信させる"
-        _pushEvent:
-          event: "イベント名"
-          message: "押したときに表示するメッセージ"
-          variable: "送信する変数"
-          no-variable: "なし"
-        callAiScript: "AiScript呼び出し"
-        _callAiScript:
-          functionName: "関数名"
-
-    radioButton: "選択肢"
-    _radioButton:
-      name: "変数名"
-      title: "タイトル"
-      values: "改行で区切った選択肢"
-      default: "デフォルト値"
-
-  script:
-    categories:
-      flow: "制御"
-      logical: "論理演算"
-      operation: "計算"
-      comparison: "比較"
-      random: "ランダム"
-      value: "値"
-      fn: "関数"
-      text: "テキスト操作"
-      convert: "変換"
-      list: "リスト"
-    blocks:
-      text: "テキスト"
-      multiLineText: "テキスト(複数行)"
-      textList: "テキストのリスト"
-      _textList:
-        info: "ひとつひとつを改行で区切ってください"
-      strLen: "テキストの長さ"
-      _strLen:
-        arg1: "テキスト"
-      strPick: "文字取り出し"
-      _strPick:
-        arg1: "テキスト"
-        arg2: "文字の位置"
-      strReplace: "テキスト置き換え"
-      _strReplace:
-        arg1: "テキスト"
-        arg2: "置き換え前"
-        arg3: "置き換え後"
-      strReverse: "テキストを反転"
-      _strReverse:
-        arg1: "テキスト"
-      join: "テキストを連結"
-      _join:
-        arg1: "リスト"
-        arg2: "区切り"
-      add: "足す"
-      _add:
-        arg1: "A"
-        arg2: "B"
-      subtract: "引く"
-      _subtract:
-        arg1: "A"
-        arg2: "B"
-      multiply: "掛ける"
-      _multiply:
-        arg1: "A"
-        arg2: "B"
-      divide: "割る"
-      _divide:
-        arg1: "A"
-        arg2: "B"
-      mod: "割った余り"
-      _mod:
-        arg1: "A"
-        arg2: "B"
-      round: "小数を丸める"
-      _round:
-        arg1: "数値"
-      eq: "AとBが同じ"
-      _eq:
-        arg1: "A"
-        arg2: "B"
-      notEq: "AとBが異なる"
-      _notEq:
-        arg1: "A"
-        arg2: "B"
-      and: "AかつB"
-      _and:
-        arg1: "A"
-        arg2: "B"
-      or: "AまたはB"
-      _or:
-        arg1: "A"
-        arg2: "B"
-      lt: "< AがBより小さい"
-      _lt:
-        arg1: "A"
-        arg2: "B"
-      gt: "> AがBより大きい"
-      _gt:
-        arg1: "A"
-        arg2: "B"
-      ltEq: "<= AがBと同じか小さい"
-      _ltEq:
-        arg1: "A"
-        arg2: "B"
-      gtEq: ">= AがBと同じか大きい"
-      _gtEq:
-        arg1: "A"
-        arg2: "B"
-      if: "分岐"
-      _if:
-        arg1: "もし"
-        arg2: "なら"
-        arg3: "そうでなければ"
-      not: "否定"
-      _not:
-        arg1: "否定"
-      random: "ランダム"
-      _random:
-        arg1: "確率"
-      rannum: "乱数"
-      _rannum:
-        arg1: "最小"
-        arg2: "最大"
-      randomPick: "リストからランダムに選択"
-      _randomPick:
-        arg1: "リスト"
-      dailyRandom: "ランダム (ユーザーごとに日替わり)"
-      _dailyRandom:
-        arg1: "確率"
-      dailyRannum: "乱数 (ユーザーごとに日替わり)"
-      _dailyRannum:
-        arg1: "最小"
-        arg2: "最大"
-      dailyRandomPick: "リストからランダムに選択 (ユーザーごとに日替わり)"
-      _dailyRandomPick:
-        arg1: "リスト"
-      seedRandom: "ランダム (シード)"
-      _seedRandom:
-        arg1: "シード"
-        arg2: "確率"
-      seedRannum: "乱数 (シード)"
-      _seedRannum:
-        arg1: "シード"
-        arg2: "最小"
-        arg3: "最大"
-      seedRandomPick: "リストからランダムに選択 (シード)"
-      _seedRandomPick:
-        arg1: "シード"
-        arg2: "リスト"
-      DRPWPM: "確率付きリストからランダムに選択 (ユーザーごとに日替わり)"
-      _DRPWPM:
-        arg1: "テキストのリスト"
-      pick: "リストから選択"
-      _pick:
-        arg1: "リスト"
-        arg2: "位置"
-      listLen: "リストの長さを取得"
-      _listLen:
-        arg1: "リスト"
-      number: "数値"
-      stringToNumber: "テキストを数値に"
-      _stringToNumber:
-        arg1: "テキスト"
-      numberToString: "数値をテキストに"
-      _numberToString:
-        arg1: "数値"
-      splitStrByLine: "テキストを行で分割"
-      _splitStrByLine:
-        arg1: "テキスト"
-      ref: "変数"
-      aiScriptVar: "AiScript変数"
-      fn: "関数"
-      _fn:
-        slots: "スロット"
-        slots-info: "スロットひとつひとつを改行で区切ってください"
-        arg1: "出力"
-      for: "繰り返し"
-      _for:
-        arg1: "回数"
-        arg2: "処理"
-    typeError: "スロット{slot}は\"{expect}\"を受け付けますが、\"{actual}\"が入れられています！"
-    thereIsEmptySlot: "スロット{slot}が空です！"
-    types:
-      string: "テキスト"
-      number: "数値"
-      boolean: "フラグ"
-      array: "リスト"
-      stringArray: "テキストのリスト"
-    emptySlot: "空のスロット"
-    enviromentVariables: "環境変数"
-    pageVariables: "ページ要素"
-    argVariables: "入力スロット"
-
 _relayStatus:
   requesting: "承認待ち"
   accepted: "承認済み"
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
deleted file mode 100644
index 08f993c426..0000000000
--- a/packages/client/src/pages/page-editor/els/page-editor.el.button.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.button }}</template>
-
-	<section class="xfhsjczc">
-		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._button.text }}</template></MkInput>
-		<MkSwitch v-model="value.primary"><span>{{ $ts._pages.blocks._button.colored }}</span></MkSwitch>
-		<MkSelect v-model="value.action">
-			<template #label>{{ $ts._pages.blocks._button.action }}</template>
-			<option value="dialog">{{ $ts._pages.blocks._button._action.dialog }}</option>
-			<option value="resetRandom">{{ $ts._pages.blocks._button._action.resetRandom }}</option>
-			<option value="pushEvent">{{ $ts._pages.blocks._button._action.pushEvent }}</option>
-			<option value="callAiScript">{{ $ts._pages.blocks._button._action.callAiScript }}</option>
-		</MkSelect>
-		<template v-if="value.action === 'dialog'">
-			<MkInput v-model="value.content"><template #label>{{ $ts._pages.blocks._button._action._dialog.content }}</template></MkInput>
-		</template>
-		<template v-else-if="value.action === 'pushEvent'">
-			<MkInput v-model="value.event"><template #label>{{ $ts._pages.blocks._button._action._pushEvent.event }}</template></MkInput>
-			<MkInput v-model="value.message"><template #label>{{ $ts._pages.blocks._button._action._pushEvent.message }}</template></MkInput>
-			<MkSelect v-model="value.var">
-				<template #label>{{ $ts._pages.blocks._button._action._pushEvent.variable }}</template>
-				<option :value="null">{{ $t('_pages.blocks._button._action._pushEvent.no-variable') }}</option>
-				<option v-for="v in hpml.getVarsByType()" :value="v.name">{{ v.name }}</option>
-				<optgroup :label="$ts._pages.script.pageVariables">
-					<option v-for="v in hpml.getPageVarsByType()" :value="v">{{ v }}</option>
-				</optgroup>
-				<optgroup :label="$ts._pages.script.enviromentVariables">
-					<option v-for="v in hpml.getEnvVarsByType()" :value="v">{{ v }}</option>
-				</optgroup>
-			</MkSelect>
-		</template>
-		<template v-else-if="value.action === 'callAiScript'">
-			<MkInput v-model="value.fn"><template #label>{{ $ts._pages.blocks._button._action._callAiScript.functionName }}</template></MkInput>
-		</template>
-	</section>
-</XContainer>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
-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';
-
-withDefaults(defineProps<{
-	value: any,
-	hpml: any
-}>(), {
-	value: {
-		text: '',
-		action: 'dialog',
-		content: null,
-		event: null,
-		message: null,
-		primary: false,
-		var: null,
-		fn: null,
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.xfhsjczc {
-	padding: 0 16px 0 16px;
-}
-</style>
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
deleted file mode 100644
index 7ebf8c1478..0000000000
--- a/packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-paint-brush"></i> {{ $ts._pages.blocks.canvas }}</template>
-
-	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="value.name">
-			<template #prefix><i class="fas fa-magic"></i></template>
-			<template #label>{{ $ts._pages.blocks._canvas.id }}</template>
-		</MkInput>
-		<MkInput v-model="value.width" type="number">
-			<template #label>{{ $ts._pages.blocks._canvas.width }}</template>
-			<template #suffix>px</template>
-		</MkInput>
-		<MkInput v-model="value.height" type="number">
-			<template #label>{{ $ts._pages.blocks._canvas.height }}</template>
-			<template #suffix>px</template>
-		</MkInput>
-	</section>
-</XContainer>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkInput from '@/components/form/input.vue';
-
-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
deleted file mode 100644
index 994d0b5b00..0000000000
--- a/packages/client/src/pages/page-editor/els/page-editor.el.counter.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.counter }}</template>
-
-	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="value.name">
-			<template #prefix><i class="fas fa-magic"></i></template>
-			<template #label>{{ $ts._pages.blocks._counter.name }}</template>
-		</MkInput>
-		<MkInput v-model="value.text">
-			<template #label>{{ $ts._pages.blocks._counter.text }}</template>
-		</MkInput>
-		<MkInput v-model="value.inc" type="number">
-			<template #label>{{ $ts._pages.blocks._counter.inc }}</template>
-		</MkInput>
-	</section>
-</XContainer>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkInput from '@/components/form/input.vue';
-
-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
deleted file mode 100644
index f56c8aec8a..0000000000
--- a/packages/client/src/pages/page-editor/els/page-editor.el.if.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-question"></i> {{ $ts._pages.blocks.if }}</template>
-	<template #func>
-		<button class="_button" @click="add()">
-			<i class="ti ti-plus"></i>
-		</button>
-	</template>
-
-	<section class="romcojzs">
-		<MkSelect v-model="value.var">
-			<template #label>{{ $ts._pages.blocks._if.variable }}</template>
-			<option v-for="v in hpml.getVarsByType('boolean')" :value="v.name">{{ v.name }}</option>
-			<optgroup :label="$ts._pages.script.pageVariables">
-				<option v-for="v in hpml.getPageVarsByType('boolean')" :value="v">{{ v }}</option>
-			</optgroup>
-			<optgroup :label="$ts._pages.script.enviromentVariables">
-				<option v-for="v in hpml.getEnvVarsByType('boolean')" :value="v">{{ v }}</option>
-			</optgroup>
-		</MkSelect>
-
-		<XBlocks v-model="value.children" class="children" :hpml="hpml"/>
-	</section>
-</XContainer>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
-import { defineAsyncComponent, inject } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XContainer from '../page-editor.container.vue';
-import MkSelect from '@/components/form/select.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
-
-const 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>
-.romcojzs {
-	padding: 0 16px 16px 16px;
-}
-</style>
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 4b3c6cbf10..a84cb1e80e 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
@@ -21,29 +21,32 @@ import XContainer from '../page-editor.container.vue';
 import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import * as os from '@/os';
 
-const props = withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		fileId: null,
-	},
-});
+const props = defineProps<{
+	modelValue: any
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', value: any): void;
+}>();
 
 let file: any = $ref(null);
 
 async function choose() {
 	os.selectDriveFile(false).then((fileResponse: any) => {
 		file = fileResponse;
-		props.value.fileId = fileResponse.id;
+		emit('update:modelValue', {
+			...props.modelValue,
+			fileId: fileResponse.id,
+		});
 	});
 }
 
 onMounted(async () => {
-	if (props.value.fileId == null) {
+	if (props.modelValue.fileId == null) {
 		await choose();
 	} else {
 		os.api('drive/files/show', {
-			fileId: props.value.fileId,
+			fileId: props.modelValue.fileId,
 		}).then(fileResponse => {
 			file = fileResponse;
 		});
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
index c3b3e3b37e..dcc1a32636 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
@@ -8,10 +8,10 @@
 			<template #label>{{ $ts._pages.blocks._note.id }}</template>
 			<template #caption>{{ $ts._pages.blocks._note.idDescription }}</template>
 		</MkInput>
-		<MkSwitch v-model="value.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
+		<MkSwitch v-model="props.modelValue.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
 
-		<XNote v-if="note && !value.detailed" :key="note.id + ':normal'" v-model:note="note" style="margin-bottom: 16px;"/>
-		<XNoteDetailed v-if="note && value.detailed" :key="note.id + ':detail'" v-model:note="note" style="margin-bottom: 16px;"/>
+		<XNote v-if="note && !props.modelValue.detailed" :key="note.id + ':normal'" v-model:note="note" style="margin-bottom: 16px;"/>
+		<XNoteDetailed v-if="note && props.modelValue.detailed" :key="note.id + ':detail'" v-model:note="note" style="margin-bottom: 16px;"/>
 	</section>
 </XContainer>
 </template>
@@ -26,26 +26,31 @@ import XNote from '@/components/MkNote.vue';
 import XNoteDetailed from '@/components/MkNoteDetailed.vue';
 import * as os from '@/os';
 
-const props = withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		note: null,
-		detailed: false,
-	},
-});
+const props = defineProps<{
+	modelValue: any
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', value: any): void;
+}>();
 
-let id: any = $ref(props.value.note);
+let id: any = $ref(props.modelValue.note);
 let note: any = $ref(null);
 
 watch(id, async () => {
 	if (id && (id.startsWith('http://') || id.startsWith('https://'))) {
-		props.value.note = (id.endsWith('/') ? id.slice(0, -1) : id).split('/').pop();
+		emit('update:modelValue', {
+			...props.modelValue,
+			note: (id.endsWith('/') ? id.slice(0, -1) : id).split('/').pop(),
+		});
 	} else {
-		props.value.note = id;
+		emit('update:modelValue', {
+			...props.modelValue,
+			note: id,
+		});
 	}
 
-	note = await os.api('notes/show', { noteId: props.value.note });
+	note = await os.api('notes/show', { noteId: props.modelValue.note });
 }, {
 	immediate: true,
 });
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
deleted file mode 100644
index dc89d0287b..0000000000
--- a/packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.numberInput }}</template>
-
-	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="value.name">
-			<template #prefix><i class="fas fa-magic"></i></template>
-			<template #label>{{ $ts._pages.blocks._numberInput.name }}</template>
-		</MkInput>
-		<MkInput v-model="value.text">
-			<template #label>{{ $ts._pages.blocks._numberInput.text }}</template>
-		</MkInput>
-		<MkInput v-model="value.default" type="number">
-			<template #label>{{ $ts._pages.blocks._numberInput.default }}</template>
-		</MkInput>
-	</section>
-</XContainer>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkInput from '@/components/form/input.vue';
-
-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
deleted file mode 100644
index 9592d36829..0000000000
--- a/packages/client/src/pages/page-editor/els/page-editor.el.post.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-send"></i> {{ $ts._pages.blocks.post }}</template>
-
-	<section style="padding: 16px;">
-		<MkTextarea v-model="value.text"><template #label>{{ $ts._pages.blocks._post.text }}</template></MkTextarea>
-		<MkSwitch v-model="value.attachCanvasImage"><span>{{ $ts._pages.blocks._post.attachCanvasImage }}</span></MkSwitch>
-		<MkInput v-if="value.attachCanvasImage" v-model="value.canvasId"><template #label>{{ $ts._pages.blocks._post.canvasId }}</template></MkInput>
-	</section>
-</XContainer>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
-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';
-
-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
deleted file mode 100644
index 1aa2f5ca4b..0000000000
--- a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.radioButton }}</template>
-
-	<section style="padding: 0 16px 16px 16px;">
-		<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._radioButton.name }}</template></MkInput>
-		<MkInput v-model="value.title"><template #label>{{ $ts._pages.blocks._radioButton.title }}</template></MkInput>
-		<MkTextarea v-model="values"><template #label>{{ $ts._pages.blocks._radioButton.values }}</template></MkTextarea>
-		<MkInput v-model="value.default"><template #label>{{ $ts._pages.blocks._radioButton.default }}</template></MkInput>
-	</section>
-</XContainer>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
-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';
-
-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 f18188ce61..fd1d3fa69c 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
@@ -1,40 +1,51 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-sticky-note"></i> {{ value.title }}</template>
+	<template #header><i class="fas fa-sticky-note"></i> {{ props.modelValue.title }}</template>
 	<template #func>
 		<button class="_button" @click="rename()">
 			<i class="ti ti-pencil"></i>
 		</button>
-		<button class="_button" @click="add()">
-			<i class="ti ti-plus"></i>
-		</button>
 	</template>
 
 	<section class="ilrvjyvi">
-		<XBlocks v-model="value.children" class="children" :hpml="hpml"/>
+		<XBlocks v-model="children" class="children"/>
+		<MkButton rounded class="add" @click="add()"><i class="ti ti-plus"></i></MkButton>
 	</section>
 </XContainer>
 </template>
 
 <script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { defineAsyncComponent, inject, onMounted } from 'vue';
+import { defineAsyncComponent, inject, onMounted, watch } from 'vue';
 import { v4 as uuid } from 'uuid';
 import XContainer from '../page-editor.container.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
+import { deepClone } from '@/scripts/clone';
+import MkButton from '@/components/MkButton.vue';
 
 const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
 
 const props = withDefaults(defineProps<{
-	value: any,
-	hpml: any
+	modelValue: any,
 }>(), {
-	value: {
-		title: null,
-		children: [],
-	},
+	modelValue: {},
+});
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', value: any): void;
+}>();
+
+const children = $ref(deepClone(props.modelValue.children ?? []));
+
+watch($$(children), () => {
+	emit('update:modelValue', {
+		...props.modelValue,
+		children,
+	});
+}, {
+	deep: true,
 });
 
 const getPageBlockList = inject<(any) => any>('getPageBlockList');
@@ -42,25 +53,28 @@ const getPageBlockList = inject<(any) => any>('getPageBlockList');
 async function rename() {
 	const { canceled, result: title } = await os.inputText({
 		title: 'Enter title',
-		default: props.value.title,
+		default: props.modelValue.title,
 	});
 	if (canceled) return;
-	props.value.title = title;
+	emit('update:modelValue', {
+		...props.modelValue,
+		title,
+	});
 }
 
 async function add() {
 	const { canceled, result: type } = await os.select({
 		title: i18n.ts._pages.chooseBlock,
-		groupedItems: getPageBlockList(),
+		items: getPageBlockList(),
 	});
 	if (canceled) return;
 
 	const id = uuid();
-	props.value.children.push({ id, type });
+	children.push({ id, type });
 }
 
 onMounted(() => {
-	if (props.value.title == null) {
+	if (props.modelValue.title == null) {
 		rename();
 	}
 });
@@ -69,7 +83,15 @@ onMounted(() => {
 <style lang="scss" scoped>
 .ilrvjyvi {
 	> .children {
-		padding: 16px;
+		margin: 16px;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .add {
+		margin: 16px auto;
 	}
 }
 </style>
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
deleted file mode 100644
index 96d35c3966..0000000000
--- a/packages/client/src/pages/page-editor/els/page-editor.el.switch.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.switch }}</template>
-
-	<section class="kjuadyyj">
-		<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._switch.name }}</template></MkInput>
-		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._switch.text }}</template></MkInput>
-		<MkSwitch v-model="value.default"><span>{{ $ts._pages.blocks._switch.default }}</span></MkSwitch>
-	</section>
-</XContainer>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkInput from '@/components/form/input.vue';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		name: '',
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.kjuadyyj {
-	padding: 0 16px 16px 16px;
-}
-</style>
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
deleted file mode 100644
index 8cbae1caf5..0000000000
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.textInput }}</template>
-
-	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._textInput.name }}</template></MkInput>
-		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._textInput.text }}</template></MkInput>
-		<MkInput v-model="value.default" type="text"><template #label>{{ $ts._pages.blocks._textInput.default }}</template></MkInput>
-	</section>
-</XContainer>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkInput from '@/components/form/input.vue';
-
-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 27274253b4..6f11e2a08b 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
@@ -4,22 +4,31 @@
 	<template #header><i class="fas fa-align-left"></i> {{ $ts._pages.blocks.text }}</template>
 
 	<section class="vckmsadr">
-		<textarea v-model="value.text"></textarea>
+		<textarea v-model="text"></textarea>
 	</section>
 </XContainer>
 </template>
 
 <script lang="ts" setup>
 /* eslint-disable vue/no-mutating-props */
-import { } from 'vue';
+import { watch } from 'vue';
 import XContainer from '../page-editor.container.vue';
 
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		text: '',
-	},
+const props = defineProps<{
+	modelValue: any
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', value: any): void;
+}>();
+
+const text = $ref(props.modelValue.text ?? '');
+
+watch($$(text), () => {
+	emit('update:modelValue', {
+		...props.modelValue,
+		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
deleted file mode 100644
index 973f32242b..0000000000
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-bolt"></i> {{ $ts._pages.blocks.textareaInput }}</template>
-
-	<section style="padding: 0 16px 16px 16px;">
-		<MkInput v-model="value.name"><template #prefix><i class="fas fa-magic"></i></template><template #label>{{ $ts._pages.blocks._textareaInput.name }}</template></MkInput>
-		<MkInput v-model="value.text"><template #label>{{ $ts._pages.blocks._textareaInput.text }}</template></MkInput>
-		<MkTextarea v-model="value.default"><template #label>{{ $ts._pages.blocks._textareaInput.default }}</template></MkTextarea>
-	</section>
-</XContainer>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkInput from '@/components/form/input.vue';
-
-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
deleted file mode 100644
index e0c05df911..0000000000
--- a/packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-align-left"></i> {{ $ts._pages.blocks.textarea }}</template>
-
-	<section class="ihymsbbe">
-		<textarea v-model="value.text"></textarea>
-	</section>
-</XContainer>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
-import { } from 'vue';
-import XContainer from '../page-editor.container.vue';
-
-withDefaults(defineProps<{
-	value: any
-}>(), {
-	value: {
-		text: '',
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.ihymsbbe {
-	> textarea {
-		display: block;
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		appearance: none;
-		width: 100%;
-		min-width: 100%;
-		min-height: 150px;
-		border: none;
-		box-shadow: none;
-		padding: 16px;
-		background: transparent;
-		color: var(--fg);
-		font-size: 14px;
-		box-sizing: border-box;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/page-editor/page-editor.blocks.vue b/packages/client/src/pages/page-editor/page-editor.blocks.vue
index bc983cd2c8..f99fcb202f 100644
--- a/packages/client/src/pages/page-editor/page-editor.blocks.vue
+++ b/packages/client/src/pages/page-editor/page-editor.blocks.vue
@@ -1,7 +1,10 @@
 <template>
-<Sortable :list="blocks" tag="div" item-key="id" :options="{ handle: '.drag-handle', group: { name: 'blocks' }, animation: 150, swapThreshold: 0.5 }">
+<Sortable :model-value="modelValue" tag="div" item-key="id" handle=".drag-handle" :group="{ name: 'blocks' }" :animation="150" :swap-threshold="0.5" @update:model-value="v => $emit('update:modelValue', v)">
 	<template #item="{element}">
-		<component :is="'x-' + element.type" :value="element" :hpml="hpml" @update:value="updateItem" @remove="() => removeItem(element)"/>
+		<div :class="$style.item">
+			<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 -->
+			<component :is="'x-' + element.type" :model-value="element" @update:model-value="updateItem" @remove="() => removeItem(element)"/>
+		</div>
 	</template>
 </Sortable>
 </template>
@@ -10,25 +13,15 @@
 import { defineComponent, defineAsyncComponent } from 'vue';
 import XSection from './els/page-editor.el.section.vue';
 import XText from './els/page-editor.el.text.vue';
-import XTextarea from './els/page-editor.el.textarea.vue';
 import XImage from './els/page-editor.el.image.vue';
-import XButton from './els/page-editor.el.button.vue';
-import XTextInput from './els/page-editor.el.text-input.vue';
-import XTextareaInput from './els/page-editor.el.textarea-input.vue';
-import XNumberInput from './els/page-editor.el.number-input.vue';
-import XSwitch from './els/page-editor.el.switch.vue';
-import XIf from './els/page-editor.el.if.vue';
-import XPost from './els/page-editor.el.post.vue';
-import XCounter from './els/page-editor.el.counter.vue';
-import XRadioButton from './els/page-editor.el.radio-button.vue';
-import XCanvas from './els/page-editor.el.canvas.vue';
 import XNote from './els/page-editor.el.note.vue';
 import * as os from '@/os';
+import { deepClone } from '@/scripts/clone';
 
 export default defineComponent({
 	components: {
 		Sortable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
-		XSection, XText, XImage, XButton, XTextarea, XTextInput, XTextareaInput, XNumberInput, XSwitch, XIf, XPost, XCounter, XRadioButton, XCanvas, XNote,
+		XSection, XText, XImage, XNote,
 	},
 
 	props: {
@@ -36,43 +29,37 @@ export default defineComponent({
 			type: Array,
 			required: true,
 		},
-		hpml: {
-			required: true,
-		},
 	},
 
 	emits: ['update:modelValue'],
 
-	computed: {
-		blocks: {
-			get() {
-				return this.modelValue;
-			},
-			set(value) {
-				this.$emit('update:modelValue', value);
-			},
-		},
-	},
-
 	methods: {
 		updateItem(v) {
-			const i = this.blocks.findIndex(x => x.id === v.id);
+			const i = this.modelValue.findIndex(x => x.id === v.id);
 			const newValue = [
-				...this.blocks.slice(0, i),
+				...this.modelValue.slice(0, i),
 				v,
-				...this.blocks.slice(i + 1),
+				...this.modelValue.slice(i + 1),
 			];
 			this.$emit('update:modelValue', newValue);
 		},
 
 		removeItem(el) {
-			const i = this.blocks.findIndex(x => x.id === el.id);
+			const i = this.modelValue.findIndex(x => x.id === el.id);
 			const newValue = [
-				...this.blocks.slice(0, i),
-				...this.blocks.slice(i + 1),
+				...this.modelValue.slice(0, i),
+				...this.modelValue.slice(i + 1),
 			];
 			this.$emit('update:modelValue', newValue);
 		},
 	},
 });
 </script>
+
+<style lang="scss" module>
+.item {
+	& + .item {
+		margin-top: 16px;
+	}
+}
+</style>
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
index 03228b8e01..15cdda5efb 100644
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ b/packages/client/src/pages/page-editor/page-editor.container.vue
@@ -74,7 +74,7 @@ export default defineComponent({
 	overflow: hidden;
 	background: var(--panel);
 	border: solid 2px var(--X12);
-	border-radius: 6px;
+	border-radius: 8px;
 
 	&:hover {
 		border: solid 2px var(--X13);
@@ -88,10 +88,6 @@ export default defineComponent({
 		border: solid 2px #f00;
 	}
 
-	& + .cpjygsrt {
-		margin-top: 16px;
-	}
-
 	> header {
 		> .title {
 			z-index: 1;
diff --git a/packages/client/src/pages/page-editor/page-editor.script-block.vue b/packages/client/src/pages/page-editor/page-editor.script-block.vue
deleted file mode 100644
index 1f621e185f..0000000000
--- a/packages/client/src/pages/page-editor/page-editor.script-block.vue
+++ /dev/null
@@ -1,279 +0,0 @@
-<template>
-<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :removable="removable" :error="error" :warn="warn" :draggable="draggable" @remove="() => $emit('remove')">
-	<template #header><i v-if="icon" :class="icon"></i> <template v-if="title">{{ title }} <span v-if="typeText" class="turmquns">({{ typeText }})</span></template><template v-else-if="typeText">{{ typeText }}</template></template>
-	<template #func>
-		<button class="_button" @click="changeType()">
-			<i class="ti ti-pencil"></i>
-		</button>
-	</template>
-
-	<section v-if="modelValue.type === null" class="pbglfege" @click="changeType()">
-		{{ $ts._pages.script.emptySlot }}
-	</section>
-	<section v-else-if="modelValue.type === 'text'" class="tbwccoaw">
-		<input v-model="modelValue.value"/>
-	</section>
-	<section v-else-if="modelValue.type === 'multiLineText'" class="tbwccoaw">
-		<textarea v-model="modelValue.value"></textarea>
-	</section>
-	<section v-else-if="modelValue.type === 'textList'" class="tbwccoaw">
-		<textarea v-model="modelValue.value" :placeholder="$ts._pages.script.blocks._textList.info"></textarea>
-	</section>
-	<section v-else-if="modelValue.type === 'number'" class="tbwccoaw">
-		<input v-model="modelValue.value" type="number"/>
-	</section>
-	<section v-else-if="modelValue.type === 'ref'" class="hpdwcrvs">
-		<select v-model="modelValue.value">
-			<option v-for="v in hpml.getVarsByType(getExpectedType ? getExpectedType() : null).filter(x => x.name !== name)" :value="v.name">{{ v.name }}</option>
-			<optgroup :label="$ts._pages.script.argVariables">
-				<option v-for="v in fnSlots" :value="v.name">{{ v.name }}</option>
-			</optgroup>
-			<optgroup :label="$ts._pages.script.pageVariables">
-				<option v-for="v in hpml.getPageVarsByType(getExpectedType ? getExpectedType() : null)" :value="v">{{ v }}</option>
-			</optgroup>
-			<optgroup :label="$ts._pages.script.enviromentVariables">
-				<option v-for="v in hpml.getEnvVarsByType(getExpectedType ? getExpectedType() : null)" :value="v">{{ v }}</option>
-			</optgroup>
-		</select>
-	</section>
-	<section v-else-if="modelValue.type === 'aiScriptVar'" class="tbwccoaw">
-		<input v-model="modelValue.value"/>
-	</section>
-	<section v-else-if="modelValue.type === 'fn'" class="" style="padding:0 16px 16px 16px;">
-		<MkTextarea v-model="slots">
-			<template #label>{{ $ts._pages.script.blocks._fn.slots }}</template>
-			<template #caption>{{ $t('_pages.script.blocks._fn.slots-info') }}</template>
-		</MkTextarea>
-		<XV v-if="modelValue.value.expression" v-model="modelValue.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="modelValue.value.slots" :name="name"/>
-	</section>
-	<section v-else-if="modelValue.type.startsWith('fn:')" class="" style="padding:16px;">
-		<XV v-for="(x, i) in modelValue.args" :key="i" v-model="modelValue.args[i]" :title="hpml.getVarByName(modelValue.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :hpml="hpml" :name="name"/>
-	</section>
-	<section v-else class="" style="padding:16px;">
-		<XV v-for="(x, i) in modelValue.args" :key="i" v-model="modelValue.args[i]" :title="$t(`_pages.script.blocks._${modelValue.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :hpml="hpml" :name="name" :fn-slots="fnSlots"/>
-	</section>
-</XContainer>
-</template>
-
-<script lang="ts">
-/* eslint-disable vue/no-mutating-props */
-import { defineAsyncComponent, defineComponent } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XContainer from './page-editor.container.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import { blockDefs } from '@/scripts/hpml/index';
-import * as os from '@/os';
-import { isLiteralValue } from '@/scripts/hpml/expr';
-import { funcDefs } from '@/scripts/hpml/lib';
-
-export default defineComponent({
-	components: {
-		XContainer, MkTextarea,
-		XV: defineAsyncComponent(() => import('./page-editor.script-block.vue')),
-	},
-
-	inject: ['getScriptBlockList'],
-
-	props: {
-		getExpectedType: {
-			required: false,
-			default: null,
-		},
-		modelValue: {
-			required: true,
-		},
-		title: {
-			required: false,
-		},
-		removable: {
-			required: false,
-			default: false,
-		},
-		hpml: {
-			required: true,
-		},
-		name: {
-			required: true,
-		},
-		fnSlots: {
-			required: false,
-		},
-		draggable: {
-			required: false,
-			default: false,
-		},
-	},
-
-	data() {
-		return {
-			error: null,
-			warn: null,
-			slots: '',
-		};
-	},
-
-	computed: {
-		icon(): any {
-			if (this.modelValue.type === null) return null;
-			if (this.modelValue.type.startsWith('fn:')) return 'ti ti-plug';
-			return blockDefs.find(x => x.type === this.modelValue.type).icon;
-		},
-		typeText(): any {
-			if (this.modelValue.type === null) return null;
-			if (this.modelValue.type.startsWith('fn:')) return this.modelValue.type.split(':')[1];
-			return this.$t(`_pages.script.blocks.${this.modelValue.type}`);
-		},
-	},
-
-	watch: {
-		slots: {
-			handler() {
-				this.modelValue.value.slots = this.slots.split('\n').map(x => ({
-					name: x,
-					type: null,
-				}));
-			},
-			deep: true,
-		},
-	},
-
-	created() {
-		if (this.modelValue.value == null) this.modelValue.value = null;
-
-		if (this.modelValue.value && this.modelValue.value.slots) this.slots = this.modelValue.value.slots.map(x => x.name).join('\n');
-
-		this.$watch(() => this.modelValue.type, (t) => {
-			this.warn = null;
-
-			if (this.modelValue.type === 'fn') {
-				const id = uuid();
-				this.modelValue.value = {
-					slots: [],
-					expression: { id, type: null },
-				};
-				return;
-			}
-
-			if (this.modelValue.type && this.modelValue.type.startsWith('fn:')) {
-				const fnName = this.modelValue.type.split(':')[1];
-				const fn = this.hpml.getVarByName(fnName);
-
-				const empties = [];
-				for (let i = 0; i < fn.value.slots.length; i++) {
-					const id = uuid();
-					empties.push({ id, type: null });
-				}
-				this.modelValue.args = empties;
-				return;
-			}
-
-			if (isLiteralValue(this.modelValue)) return;
-
-			const empties = [];
-			for (let i = 0; i < funcDefs[this.modelValue.type].in.length; i++) {
-				const id = uuid();
-				empties.push({ id, type: null });
-			}
-			this.modelValue.args = empties;
-
-			for (let i = 0; i < funcDefs[this.modelValue.type].in.length; i++) {
-				const inType = funcDefs[this.modelValue.type].in[i];
-				if (typeof inType !== 'number') {
-					if (inType === 'number') this.modelValue.args[i].type = 'number';
-					if (inType === 'string') this.modelValue.args[i].type = 'text';
-				}
-			}
-		});
-
-		this.$watch(() => this.modelValue.args, (args) => {
-			if (args == null) {
-				this.warn = null;
-				return;
-			}
-			const emptySlotIndex = args.findIndex(x => x.type === null);
-			if (emptySlotIndex !== -1 && emptySlotIndex < args.length) {
-				this.warn = {
-					slot: emptySlotIndex,
-				};
-			} else {
-				this.warn = null;
-			}
-		}, {
-			deep: true,
-		});
-
-		this.$watch(() => this.hpml.variables, () => {
-			if (this.type != null && this.modelValue) {
-				this.error = this.hpml.typeCheck(this.modelValue);
-			}
-		}, {
-			deep: true,
-		});
-	},
-
-	methods: {
-		async changeType() {
-			const { canceled, result: type } = await os.select({
-				title: this.$ts._pages.selectType,
-				groupedItems: this.getScriptBlockList(this.getExpectedType ? this.getExpectedType() : null),
-			});
-			if (canceled) return;
-			this.modelValue.type = type;
-		},
-
-		_getExpectedType(slot: number) {
-			return this.hpml.getExpectedType(this.modelValue, slot);
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.turmquns {
-	opacity: 0.7;
-}
-
-.pbglfege {
-	opacity: 0.5;
-	padding: 16px;
-	text-align: center;
-	cursor: pointer;
-	color: var(--fg);
-}
-
-.tbwccoaw {
-	> input,
-	> textarea {
-		display: block;
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		appearance: none;
-		width: 100%;
-		max-width: 100%;
-		min-width: 100%;
-		border: none;
-		box-shadow: none;
-		padding: 16px;
-		font-size: 16px;
-		background: transparent;
-		color: var(--fg);
-		box-sizing: border-box;
-	}
-
-	> textarea {
-		min-height: 100px;
-	}
-}
-
-.hpdwcrvs {
-	padding: 16px;
-
-	> select {
-		display: block;
-		padding: 4px;
-		font-size: 16px;
-		width: 100%;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index f094de0cbc..f7740545d1 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -45,36 +45,10 @@
 		</div>
 
 		<div v-else-if="tab === 'contents'">
-			<div>
-				<XBlocks v-model="content" class="content" :hpml="hpml"/>
+			<div :class="$style.contents">
+				<XBlocks v-model="content" class="content"/>
 
-				<MkButton v-if="!readonly" @click="add()"><i class="ti ti-plus"></i></MkButton>
-			</div>
-		</div>
-
-		<div v-else-if="tab === 'variables'">
-			<div class="qmuvgica">
-				<Sortable 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>
-				</Sortable>
-
-				<MkButton v-if="!readonly" class="add" @click="addVariable()"><i class="ti ti-plus"></i></MkButton>
-			</div>
-		</div>
-
-		<div v-else-if="tab === 'script'">
-			<div>
-				<MkTextarea v-model="script" class="_code"/>
+				<MkButton v-if="!readonly" rounded class="add" @click="add()"><i class="ti ti-plus"></i></MkButton>
 			</div>
 		</div>
 	</MkSpacer>
@@ -83,31 +57,20 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, computed, provide, watch } from 'vue';
-import 'prismjs';
-import { highlight, languages } from 'prismjs/components/prism-core';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/themes/prism-okaidia.css';
-import 'vue-prism-editor/dist/prismeditor.min.css';
 import { v4 as uuid } from 'uuid';
-import XVariable from './page-editor.script-block.vue';
 import XBlocks from './page-editor.blocks.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkSelect from '@/components/form/select.vue';
 import MkSwitch from '@/components/form/switch.vue';
 import MkInput from '@/components/form/input.vue';
-import { blockDefs } from '@/scripts/hpml/index';
-import { HpmlTypeChecker } from '@/scripts/hpml/type-checker';
 import { url } from '@/config';
-import { collectPageVars } from '@/scripts/collect-page-vars';
 import * as os from '@/os';
 import { selectFile } from '@/scripts/select-file';
 import { mainRouter } from '@/router';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { $i } from '@/account';
-const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
 
 const props = defineProps<{
 	initPageId?: string;
@@ -130,12 +93,8 @@ 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('');
 
 provide('readonly', readonly);
-provide('getScriptBlockList', getScriptBlockList);
 provide('getPageBlockList', getPageBlockList);
 
 watch($$(eyeCatchingImageId), async () => {
@@ -154,11 +113,11 @@ function getSaveOptions() {
 		name: name.trim(),
 		summary: summary,
 		font: font,
-		script: script,
+		script: '',
 		hideTitleWhenPinned: hideTitleWhenPinned,
 		alignCenter: alignCenter,
 		content: content,
-		variables: variables,
+		variables: [],
 		eyeCatchingImageId: eyeCatchingImageId,
 	};
 }
@@ -243,7 +202,7 @@ async function add() {
 	const { canceled, result: type } = await os.select({
 		type: null,
 		title: i18n.ts._pages.chooseBlock,
-		groupedItems: getPageBlockList(),
+		items: getPageBlockList(),
 	});
 	if (canceled) return;
 
@@ -251,97 +210,13 @@ async function add() {
 	content.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 (hpml.isUsedName(name)) {
-		os.alert({
-			type: 'error',
-			text: i18n.ts._pages.variableNameIsAlreadyUsed,
-		});
-		return;
-	}
-
-	const id = uuid();
-	variables.push({ id, name, type: null });
-}
-
-function removeVariable(v) {
-	variables = variables.filter(x => x.name !== v.name);
-}
-
 function getPageBlockList() {
-	return [{
-		label: i18n.ts._pages.contentBlocks,
-		items: [
-			{ value: 'section', text: i18n.ts._pages.blocks.section },
-			{ value: 'text', text: i18n.ts._pages.blocks.text },
-			{ value: 'image', text: i18n.ts._pages.blocks.image },
-			{ value: 'textarea', text: i18n.ts._pages.blocks.textarea },
-			{ value: 'note', text: i18n.ts._pages.blocks.note },
-			{ value: 'canvas', text: i18n.ts._pages.blocks.canvas },
-		],
-	}, {
-		label: i18n.ts._pages.inputBlocks,
-		items: [
-			{ value: 'button', text: i18n.ts._pages.blocks.button },
-			{ value: 'radioButton', text: i18n.ts._pages.blocks.radioButton },
-			{ value: 'textInput', text: i18n.ts._pages.blocks.textInput },
-			{ value: 'textareaInput', text: i18n.ts._pages.blocks.textareaInput },
-			{ value: 'numberInput', text: i18n.ts._pages.blocks.numberInput },
-			{ value: 'switch', text: i18n.ts._pages.blocks.switch },
-			{ value: 'counter', text: i18n.ts._pages.blocks.counter },
-		],
-	}, {
-		label: i18n.ts._pages.specialBlocks,
-		items: [
-			{ value: 'if', text: i18n.ts._pages.blocks.if },
-			{ value: 'post', text: i18n.ts._pages.blocks.post },
-		],
-	}];
-}
-
-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;
+	return [
+		{ 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: 'note', text: i18n.ts._pages.blocks.note },
+	];
 }
 
 function setEyeCatchingImage(img) {
@@ -354,21 +229,7 @@ function removeEyeCatchingImage() {
 	eyeCatchingImageId = 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,
@@ -389,11 +250,9 @@ async function init() {
 		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();
@@ -417,14 +276,6 @@ const headerTabs = $computed(() => [{
 	key: 'contents',
 	title: i18n.ts._pages.contents,
 	icon: 'fas fa-sticky-note',
-}, {
-	key: 'variables',
-	title: i18n.ts._pages.variables,
-	icon: 'fas fa-magic',
-}, {
-	key: 'script',
-	title: i18n.ts.script,
-	icon: 'ti ti-code',
 }]);
 
 definePageMetadata(computed(() => {
@@ -442,8 +293,20 @@ definePageMetadata(computed(() => {
 }));
 </script>
 
+<style lang="scss" module>
+.contents {
+	&:global {
+		> .add {
+			margin: 16px auto 0 auto;
+		}
+	}
+}
+</style>
+
 <style lang="scss" scoped>
 .jqqmcavi {
+	margin-bottom: 16px;
+
 	> .button {
 		& + .button {
 			margin-left: 8px;
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 09d92d72ab..7072b8ef03 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -175,6 +175,7 @@ definePageMetadata(computed(() => page ? {
 
 .xcukqgmh {
 	> .main {
+		padding: 32px;
 
 		> .header {
 			padding: 16px;
-- 
cgit v1.2.3-freya


From deaea7ce9f354d8f32015775ec4063b58efa9a95 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 24 Dec 2022 14:45:27 +0900
Subject: :art:

---
 packages/client/src/components/MkDrive.folder.vue                    | 4 ++--
 packages/client/src/components/MkNotification.vue                    | 2 +-
 packages/client/src/components/MkSignin.vue                          | 2 +-
 packages/client/src/pages/page-editor/els/page-editor.el.note.vue    | 2 +-
 packages/client/src/pages/page-editor/els/page-editor.el.section.vue | 2 +-
 packages/client/src/pages/page-editor/page-editor.vue                | 2 +-
 packages/client/src/pages/pages.vue                                  | 2 +-
 packages/client/src/widgets/memo.vue                                 | 2 +-
 8 files changed, 9 insertions(+), 9 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkDrive.folder.vue b/packages/client/src/components/MkDrive.folder.vue
index 04f1c940bc..82653ca0b4 100644
--- a/packages/client/src/components/MkDrive.folder.vue
+++ b/packages/client/src/components/MkDrive.folder.vue
@@ -16,8 +16,8 @@
 	@dragend="onDragend"
 >
 	<p class="name">
-		<template v-if="hover"><i class="fas fa-folder-open ti-fw"></i></template>
-		<template v-if="!hover"><i class="fas fa-folder ti-fw"></i></template>
+		<template v-if="hover"><i class="ti ti-folder ti-fw"></i></template>
+		<template v-if="!hover"><i class="ti ti-folder ti-fw"></i></template>
 		{{ folder.name }}
 	</p>
 	<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index dd846e3e66..82965212f3 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -8,7 +8,7 @@
 			<i v-if="notification.type === 'follow'" class="ti ti-plus"></i>
 			<i v-else-if="notification.type === 'receiveFollowRequest'" class="ti ti-clock"></i>
 			<i v-else-if="notification.type === 'followRequestAccepted'" class="ti ti-check"></i>
-			<i v-else-if="notification.type === 'groupInvited'" class="fas fa-id-card-alt"></i>
+			<i v-else-if="notification.type === 'groupInvited'" class="ti ti-certificate-2"></i>
 			<i v-else-if="notification.type === 'renote'" class="ti ti-repeat"></i>
 			<i v-else-if="notification.type === 'reply'" class="ti ti-arrow-back-up"></i>
 			<i v-else-if="notification.type === 'mention'" class="ti ti-at"></i>
diff --git a/packages/client/src/components/MkSignin.vue b/packages/client/src/components/MkSignin.vue
index 3fbd3dc4e7..96f18f8d61 100644
--- a/packages/client/src/components/MkSignin.vue
+++ b/packages/client/src/components/MkSignin.vue
@@ -34,7 +34,7 @@
 				</MkInput>
 				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false" required>
 					<template #label>{{ i18n.ts.token }}</template>
-					<template #prefix><i class="fas fa-gavel"></i></template>
+					<template #prefix><i class="ti ti-123"></i></template>
 				</MkInput>
 				<MkButton type="submit" :disabled="signing" primary style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
 			</div>
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 dcc1a32636..dc2a620c09 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-sticky-note"></i> {{ $ts._pages.blocks.note }}</template>
+	<template #header><i class="ti ti-note"></i> {{ $ts._pages.blocks.note }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
 		<MkInput v-model="id">
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 fd1d3fa69c..27324bdaef 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
@@ -1,7 +1,7 @@
 <template>
 <!-- eslint-disable vue/no-mutating-props -->
 <XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-sticky-note"></i> {{ props.modelValue.title }}</template>
+	<template #header><i class="ti ti-note"></i> {{ props.modelValue.title }}</template>
 	<template #func>
 		<button class="_button" @click="rename()">
 			<i class="ti ti-pencil"></i>
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index f7740545d1..968aa12de2 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -275,7 +275,7 @@ const headerTabs = $computed(() => [{
 }, {
 	key: 'contents',
 	title: i18n.ts._pages.contents,
-	icon: 'fas fa-sticky-note',
+	icon: 'ti ti-note',
 }]);
 
 definePageMetadata(computed(() => {
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 53e65c82a4..b077180df8 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -76,7 +76,7 @@ const headerTabs = $computed(() => [{
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.pages,
-	icon: 'fas fa-sticky-note',
+	icon: 'ti ti-note',
 })));
 </script>
 
diff --git a/packages/client/src/widgets/memo.vue b/packages/client/src/widgets/memo.vue
index 92c4168fff..1cc0e10bba 100644
--- a/packages/client/src/widgets/memo.vue
+++ b/packages/client/src/widgets/memo.vue
@@ -1,6 +1,6 @@
 <template>
 <MkContainer :show-header="widgetProps.showHeader" class="mkw-memo">
-	<template #header><i class="fas fa-sticky-note"></i>{{ i18n.ts._widgets.memo }}</template>
+	<template #header><i class="ti ti-note"></i>{{ i18n.ts._widgets.memo }}</template>
 
 	<div class="otgbylcu">
 		<textarea v-model="text" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea>
-- 
cgit v1.2.3-freya


From c7f4fd12157826dd830ef9c2c9cbf97d95d1dfe4 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 24 Dec 2022 14:52:30 +0900
Subject: lint

---
 packages/client/src/init.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 89692d5fbb..508d3262b3 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -128,7 +128,7 @@ import { getAccountFromId } from '@/scripts/get-account-from-id';
 		}
 
 		// 連携ログインの場合用にCookieを参照する
-		const i = (document.cookie.match(/igi=(\w+)/) || [null, null])[1];
+		const i = (document.cookie.match(/igi=(\w+)/) ?? [null, null])[1];
 
 		if (i != null && i !== 'null') {
 			if (_DEV_) {
-- 
cgit v1.2.3-freya


From 47853484a528f4ea3127b93a804604d81fd70dc0 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 25 Dec 2022 15:36:03 +0900
Subject: :art:

---
 packages/client/src/pages/admin/overview.federation.vue | 8 ++++----
 packages/client/src/pages/admin/overview.stats.vue      | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
index 2c688d5c9f..6909a238b7 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -96,7 +96,7 @@ onMounted(async () => {
 	&:global {
 		> .pies {
 			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
 			grid-gap: 16px;
 			margin-bottom: 16px;
 
@@ -126,7 +126,7 @@ onMounted(async () => {
 
 		> .items {
 			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
 			grid-gap: 16px;
 
 			> .item {
@@ -160,10 +160,10 @@ onMounted(async () => {
 				}
 
 				> .body {
-					padding: 4px 0;
+					padding: 2px 0;
 
 					> .value {
-						font-size: 1.3em;
+						font-size: 1.25em;
 						font-weight: bold;
 
 						> .diff {
diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/overview.stats.vue
index f023051017..ad0edf94e8 100644
--- a/packages/client/src/pages/admin/overview.stats.vue
+++ b/packages/client/src/pages/admin/overview.stats.vue
@@ -81,7 +81,7 @@ onMounted(async () => {
 <style lang="scss" module>
 .root {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
 	grid-gap: 16px;
 
 	&:global {
@@ -130,10 +130,10 @@ onMounted(async () => {
 			}
 
 			> .body {
-				padding: 4px 0;
+				padding: 2px 0;
 
 				> .value {
-					font-size: 1.3em;
+					font-size: 1.25em;
 					font-weight: bold;
 
 					> .diff {
-- 
cgit v1.2.3-freya


From 477437282d328d2176d7c22f88981a8d50fe90ff Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 25 Dec 2022 15:43:46 +0900
Subject: :art:

---
 packages/client/src/pages/admin/overview.federation.vue | 6 +++---
 packages/client/src/pages/admin/overview.queue.vue      | 2 +-
 packages/client/src/pages/admin/overview.stats.vue      | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
index 6909a238b7..71f5a054b4 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -97,8 +97,8 @@ onMounted(async () => {
 		> .pies {
 			display: grid;
 			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
-			grid-gap: 16px;
-			margin-bottom: 16px;
+			grid-gap: 12px;
+			margin-bottom: 12px;
 
 			> .pie {
 				position: relative;
@@ -127,7 +127,7 @@ onMounted(async () => {
 		> .items {
 			display: grid;
 			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
-			grid-gap: 16px;
+			grid-gap: 12px;
 
 			> .item {
 				display: flex;
diff --git a/packages/client/src/pages/admin/overview.queue.vue b/packages/client/src/pages/admin/overview.queue.vue
index 9fd799e158..72ebddc72f 100644
--- a/packages/client/src/pages/admin/overview.queue.vue
+++ b/packages/client/src/pages/admin/overview.queue.vue
@@ -109,7 +109,7 @@ onUnmounted(() => {
 		> .charts {
 			display: grid;
 			grid-template-columns: 1fr 1fr;
-			gap: 16px;
+			gap: 12px;
 
 			> .chart {
 				min-width: 0;
diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/overview.stats.vue
index ad0edf94e8..28c5401abb 100644
--- a/packages/client/src/pages/admin/overview.stats.vue
+++ b/packages/client/src/pages/admin/overview.stats.vue
@@ -82,7 +82,7 @@ onMounted(async () => {
 .root {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
-	grid-gap: 16px;
+	grid-gap: 12px;
 
 	&:global {
 		> .item {
-- 
cgit v1.2.3-freya


From ef1224118c06c91627e6d4d9d6ce0fa70828ffd0 Mon Sep 17 00:00:00 2001
From: Kagami Sascha Rosylight <saschanaz@outlook.com>
Date: Sun, 25 Dec 2022 15:48:51 +0900
Subject: refactor(client): fix TypeScript errors from MkPageHeader (#9400)

---
 .../client/src/components/global/MkPageHeader.vue  | 37 ++++++++++++----------
 1 file changed, 20 insertions(+), 17 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 8e9a325358..ba61a494e4 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -21,7 +21,7 @@
 			</div>
 		</div>
 		<div v-if="!narrow || hideTitle" class="tabs">
-			<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
+			<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = (el as HTMLElement)" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
 				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
 				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
 			</button>
@@ -37,34 +37,36 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, inject, watch, shallowReactive, nextTick, reactive } from 'vue';
+import { onMounted, onUnmounted, ref, inject, watch, nextTick } 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 } from '@/scripts/page-metadata';
 import { $i } from '@/account';
 
 type Tab = {
-	key?: string | null;
+	key: string;
 	title: string;
 	icon?: string;
 	iconOnly?: boolean;
 	onClick?: (ev: MouseEvent) => void;
 };
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	tabs?: Tab[];
 	tab?: string;
 	actions?: {
 		text: string;
 		icon: string;
+		highlighted?: boolean;
 		handler: (ev: MouseEvent) => void;
 	}[];
 	thin?: boolean;
 	displayMyAvatar?: boolean;
-}>();
+}>(), {
+	tabs: () => ([] as Tab[])
+});
 
 const emit = defineEmits<{
 	(ev: 'update:tab', key: string);
@@ -75,13 +77,12 @@ const metadata = injectPageMetadata();
 const hideTitle = inject('shouldOmitHeaderTitle', false);
 const thin_ = props.thin || inject('shouldHeaderThin', false);
 
-const el = $ref<HTMLElement | null>(null);
-const tabRefs = {};
+const el = $ref<HTMLElement | undefined>(undefined);
+const tabRefs: Record<string, HTMLElement | null> = {};
 const tabHighlightEl = $ref<HTMLElement | null>(null);
-const bg = ref(null);
+const bg = ref<string | undefined>(undefined);
 let narrow = $ref(false);
-const height = ref(0);
-const hasTabs = $computed(() => props.tabs && props.tabs.length > 0);
+const hasTabs = $computed(() => props.tabs.length > 0);
 const hasActions = $computed(() => props.actions && props.actions.length > 0);
 const show = $computed(() => {
 	return !hideTitle || hasTabs || hasActions;
@@ -100,7 +101,7 @@ const showTabsPopup = (ev: MouseEvent) => {
 			onTabClick(tab, ev);
 		},
 	}));
-	popupMenu(menu, ev.currentTarget ?? ev.target);
+	popupMenu(menu, ev.currentTarget! as HTMLElement);
 };
 
 const preventDrag = (ev: TouchEvent) => {
@@ -108,7 +109,9 @@ const preventDrag = (ev: TouchEvent) => {
 };
 
 const onClick = () => {
-	scrollToTop(el, { behavior: 'smooth' });
+	if (el) {
+		scrollToTop(el as HTMLElement, { behavior: 'smooth' });
+	}
 };
 
 function onTabMousedown(tab: Tab, ev: MouseEvent): void {
@@ -144,8 +147,8 @@ onMounted(() => {
 
 	watch(() => [props.tab, props.tabs], () => {
 		nextTick(() => {
-			const tabEl = tabRefs[props.tab];
-			if (tabEl && tabHighlightEl) {
+			const tabEl = props.tab ? tabRefs[props.tab] : undefined;
+			if (tabEl && tabHighlightEl && tabEl.parentElement) {
 				// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
 				// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
 				const parentRect = tabEl.parentElement.getBoundingClientRect();
@@ -161,11 +164,11 @@ onMounted(() => {
 	if (el && el.parentElement) {
 		narrow = el.parentElement.offsetWidth < 500;
 		ro = new ResizeObserver((entries, observer) => {
-			if (el.parentElement && document.body.contains(el)) {
+			if (el.parentElement && document.body.contains(el as HTMLElement)) {
 				narrow = el.parentElement.offsetWidth < 500;
 			}
 		});
-		ro.observe(el.parentElement);
+		ro.observe(el.parentElement as HTMLElement);
 	}
 });
 
-- 
cgit v1.2.3-freya


From decde50c865afb287d8c0d67e2dba0af65b1d69e Mon Sep 17 00:00:00 2001
From: Kagami Sascha Rosylight <saschanaz@outlook.com>
Date: Sun, 25 Dec 2022 15:52:52 +0900
Subject: enhance(client): show Unicode emoji tooltip with its name (#9399)

* enhance(client): show Unicode emoji tooltip with its name

* Update CHANGELOG.md

* Update CHANGELOG.md

Co-authored-by: tamaina <tamaina@hotmail.co.jp>
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 .../src/components/MkReactionsViewer.details.vue   | 11 ++++++++++-
 packages/client/src/components/global/MkEmoji.vue  | 23 +++++++++++++++-------
 packages/client/src/scripts/emojilist.ts           |  4 ++++
 3 files changed, 30 insertions(+), 8 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkReactionsViewer.details.vue b/packages/client/src/components/MkReactionsViewer.details.vue
index 10e82cb9f9..fb8d74ad4b 100644
--- a/packages/client/src/components/MkReactionsViewer.details.vue
+++ b/packages/client/src/components/MkReactionsViewer.details.vue
@@ -3,7 +3,7 @@
 	<div class="bqxuuuey">
 		<div class="reaction">
 			<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
-			<div class="name">{{ reaction.replace('@.', '') }}</div>
+			<div class="name">{{ getReactionName(reaction) }}</div>
 		</div>
 		<div class="users">
 			<div v-for="u in users" :key="u.id" class="user">
@@ -20,6 +20,7 @@
 import { } from 'vue';
 import MkTooltip from './MkTooltip.vue';
 import XReactionIcon from '@/components/MkReactionIcon.vue';
+import { getEmojiName } from '@/scripts/emojilist';
 
 defineProps<{
 	showing: boolean;
@@ -33,6 +34,14 @@ defineProps<{
 const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
+
+function getReactionName(reaction: string): string {
+	const trimLocal = reaction.replace('@.', '');
+	if (trimLocal.startsWith(':')) {
+		return trimLocal;
+	}
+	return getEmojiName(reaction) ?? reaction;
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/global/MkEmoji.vue b/packages/client/src/components/global/MkEmoji.vue
index 106778aee2..440ef6220d 100644
--- a/packages/client/src/components/global/MkEmoji.vue
+++ b/packages/client/src/components/global/MkEmoji.vue
@@ -1,17 +1,18 @@
 <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>
+<img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" :src="url" decoding="async" @pointerenter="computeTitle"/>
+<span v-else-if="char && useOsNativeEmojis" :alt="alt" @pointerenter="computeTitle">{{ char }}</span>
 <span v-else>{{ emoji }}</span>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
+import { computed } from 'vue';
 import { CustomEmoji } from 'misskey-js/built/entities';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { char2filePath } from '@/scripts/twemoji-base';
 import { defaultStore } from '@/store';
 import { instance } from '@/instance';
+import { getEmojiName } from '@/scripts/emojilist';
 
 const props = defineProps<{
 	emoji: string;
@@ -22,20 +23,28 @@ const props = defineProps<{
 }>();
 
 const isCustom = computed(() => props.emoji.startsWith(':'));
-const char = computed(() => isCustom.value ? null : props.emoji);
+const char = computed(() => isCustom.value ? undefined : props.emoji);
 const useOsNativeEmojis = computed(() => defaultStore.state.useOsNativeEmojis && !props.isReaction);
 const ce = computed(() => props.customEmojis ?? instance.emojis ?? []);
-const customEmoji = computed(() => isCustom.value ? ce.value.find(x => x.name === props.emoji.substr(1, props.emoji.length - 2)) : null);
+const customEmoji = computed(() => isCustom.value ? ce.value.find(x => x.name === props.emoji.substr(1, props.emoji.length - 2)) : undefined);
 const url = computed(() => {
 	if (char.value) {
 		return char2filePath(char.value);
 	} else {
+		const rawUrl = (customEmoji.value as CustomEmoji).url;
 		return defaultStore.state.disableShowingAnimatedImages
-			? getStaticImageUrl(customEmoji.value.url)
-			: customEmoji.value.url;
+			? getStaticImageUrl(rawUrl)
+			: rawUrl;
 	}
 });
 const alt = computed(() => customEmoji.value ? `:${customEmoji.value.name}:` : char.value);
+
+function computeTitle(event: PointerEvent): void {
+	const title = customEmoji.value
+		? `:${customEmoji.value.name}:`
+		: (getEmojiName(char.value as string) ?? char.value as string);
+	(event.target as HTMLElement).title = title;
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/scripts/emojilist.ts b/packages/client/src/scripts/emojilist.ts
index 4ce63dc7e7..bc52fa7a43 100644
--- a/packages/client/src/scripts/emojilist.ts
+++ b/packages/client/src/scripts/emojilist.ts
@@ -11,3 +11,7 @@ export type UnicodeEmojiDef = {
 import _emojilist from '../emojilist.json';
 
 export const emojilist = _emojilist as UnicodeEmojiDef[];
+
+export function getEmojiName(char: string): string | undefined {
+	return emojilist.find(emo => emo.char === char)?.name;
+}
-- 
cgit v1.2.3-freya


From e6d43c9282b1ccc0fb934f5a7e5d90e19892e3bc Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 25 Dec 2022 16:03:21 +0900
Subject: fix

https://github.com/misskey-dev/misskey/pull/9399#issuecomment-1364635903
---
 packages/client/src/components/global/MkEmoji.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/global/MkEmoji.vue b/packages/client/src/components/global/MkEmoji.vue
index 440ef6220d..419850d007 100644
--- a/packages/client/src/components/global/MkEmoji.vue
+++ b/packages/client/src/components/global/MkEmoji.vue
@@ -1,6 +1,6 @@
 <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" decoding="async" @pointerenter="computeTitle"/>
+<img v-else-if="char && !useOsNativeEmojis" class="mk-emoji" :src="url" :alt="alt" decoding="async" @pointerenter="computeTitle"/>
 <span v-else-if="char && useOsNativeEmojis" :alt="alt" @pointerenter="computeTitle">{{ char }}</span>
 <span v-else>{{ emoji }}</span>
 </template>
@@ -39,6 +39,7 @@ const url = computed(() => {
 });
 const alt = computed(() => customEmoji.value ? `:${customEmoji.value.name}:` : char.value);
 
+// Searching from an array with 2000 items for every emoji felt like too energy-consuming, so I decided to do it lazily on pointerenter
 function computeTitle(event: PointerEvent): void {
 	const title = customEmoji.value
 		? `:${customEmoji.value.name}:`
-- 
cgit v1.2.3-freya


From cc9149f6b2172349a0c2f251d675663ef715a751 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 25 Dec 2022 07:12:44 +0000
Subject: fix
 https://github.com/misskey-dev/misskey/pull/9400#discussion_r1056909900

---
 packages/client/src/components/global/MkPageHeader.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index ba61a494e4..a228dfe883 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -101,7 +101,7 @@ const showTabsPopup = (ev: MouseEvent) => {
 			onTabClick(tab, ev);
 		},
 	}));
-	popupMenu(menu, ev.currentTarget! as HTMLElement);
+	popupMenu(menu, (ev.currentTarget ?? ev.target) as HTMLElement);
 };
 
 const preventDrag = (ev: TouchEvent) => {
-- 
cgit v1.2.3-freya


From af649b04809e7feb6c50d37718a513756f888ae1 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 25 Dec 2022 18:05:53 +0900
Subject: encodeURIComponent for static image proxy filename (#9410)

---
 packages/client/src/scripts/get-static-image-url.ts | 5 ++++-
 packages/sw/src/scripts/create-notification.ts      | 3 ++-
 2 files changed, 6 insertions(+), 2 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/scripts/get-static-image-url.ts b/packages/client/src/scripts/get-static-image-url.ts
index 79dbcf9325..cbd1761983 100644
--- a/packages/client/src/scripts/get-static-image-url.ts
+++ b/packages/client/src/scripts/get-static-image-url.ts
@@ -8,7 +8,10 @@ export function getStaticImageUrl(baseUrl: string): string {
 		u.searchParams.set('static', '1');
 		return u.href;
 	}
-	const dummy = `${u.host}${u.pathname}`;	// 拡張子がないとキャッシュしてくれないCDNがあるので
+
+	// 拡張子がないとキャッシュしてくれないCDNがあるのでダミーの名前を指定する
+	const dummy = `${encodeURIComponent(`${u.host}${u.pathname}`)}.webp`;
+
 	return `${instanceUrl}/proxy/${dummy}?${url.query({
 		url: u.href,
 		static: '1',
diff --git a/packages/sw/src/scripts/create-notification.ts b/packages/sw/src/scripts/create-notification.ts
index fd5b0fa312..a324851fe2 100644
--- a/packages/sw/src/scripts/create-notification.ts
+++ b/packages/sw/src/scripts/create-notification.ts
@@ -137,7 +137,8 @@ async function composeNotification<K extends keyof pushNotificationDataMap>(data
 								u.searchParams.set('badge', '1');
 								badge = u.href;
 							} else {
-								const dummy = `${u.host}${u.pathname}`;	// 拡張子がないとキャッシュしてくれないCDNがあるので
+								// 拡張子がないとキャッシュしてくれないCDNがあるので
+								const dummy = `${encodeURIComponent(`${u.host}${u.pathname}`)}.png`;
 								badge = `${origin}/proxy/${dummy}?${url.query({
 									url: u.href,
 									badge: '1'
-- 
cgit v1.2.3-freya


From 03ee60f81b92221d4d8c8614098d42ccd80bbb0e Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 25 Dec 2022 18:23:01 +0000
Subject: :art: fix #9414

---
 packages/client/src/ui/deck/column.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages/client/src')

diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index bc5072564e..2a99b621e6 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -392,6 +392,7 @@ function onDrop(ev) {
 		overflow-x: clip;
 		-webkit-overflow-scrolling: touch;
 		box-sizing: border-box;
+		background-color: var(--bg);
 	}
 }
 </style>
-- 
cgit v1.2.3-freya


From c95da270191293b8171f4f1197ef609905a9b911 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 26 Dec 2022 08:40:13 +0900
Subject: enhance(client): use container queries if available to improve perf

---
 CHANGELOG.md                                       |  1 +
 packages/client/src/components/MkContainer.vue     | 11 ++++
 .../client/src/components/MkDateSeparatedList.vue  |  2 +
 packages/client/src/components/MkNote.vue          | 18 ++++--
 packages/client/src/components/MkNoteDetailed.vue  | 68 ++++++++++++++++++++++
 packages/client/src/components/MkNotePreview.vue   | 20 +++++++
 packages/client/src/components/MkNoteSimple.vue    | 20 +++++++
 packages/client/src/components/MkNoteSub.vue       | 10 ++++
 packages/client/src/components/MkNotification.vue  | 14 +++++
 packages/client/src/components/MkPostForm.vue      | 57 ++++++++++++++++++
 packages/client/src/components/MkUrlPreview.vue    | 67 +++++++++++++++++++++
 packages/client/src/components/MkWidgets.vue       |  2 +
 packages/client/src/components/global/MkSpacer.vue |  1 +
 packages/client/src/directives/size.ts             |  8 +++
 packages/client/src/pages/antenna-timeline.vue     |  7 +++
 packages/client/src/pages/messaging/index.vue      | 24 ++++++++
 .../src/pages/messaging/messaging-room.message.vue | 35 ++++++++++-
 packages/client/src/pages/page.vue                 |  2 +-
 packages/client/src/pages/user-list-timeline.vue   |  7 +++
 packages/client/src/pages/user/home.vue            | 52 +++++++++++++++++
 20 files changed, 420 insertions(+), 6 deletions(-)

(limited to 'packages/client/src')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1e38d7e63c..13c2876a82 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -42,6 +42,7 @@ You should also include the user name that made the change.
 - Client: Implement the button to subscribe push notification @tamaina
 - Client: Implement the toggle to or not to close push notifications when notifications or messages are read @tamaina
 - Client: show Unicode emoji tooltip with its name in MkReactionsViewer.reaction @saschanaz
+- Client: improve overall performance of client @syuilo
 
 ### Bugfixes
 - Server: 引用内の文章がnyaizeされてしまう問題を修正 @kabo2468
diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
index c097946c19..6d4d5be2bc 100644
--- a/packages/client/src/components/MkContainer.vue
+++ b/packages/client/src/components/MkContainer.vue
@@ -246,6 +246,17 @@ export default defineComponent({
 	}
 }
 
+@container (max-width: 380px) {
+	.ukygtjoj {
+		> header {
+			> .title {
+				padding: 8px 10px;
+				font-size: 0.9em;
+			}
+		}
+	}
+}
+
 ._forceContainerFull_ .ukygtjoj {
 	> header {
 		> .title {
diff --git a/packages/client/src/components/MkDateSeparatedList.vue b/packages/client/src/components/MkDateSeparatedList.vue
index 68903f3526..1f88bdf137 100644
--- a/packages/client/src/components/MkDateSeparatedList.vue
+++ b/packages/client/src/components/MkDateSeparatedList.vue
@@ -108,6 +108,8 @@ export default defineComponent({
 
 <style lang="scss">
 .sqadhkmv {
+	container-type: inline-size;
+
 	> *:empty {
 		display: none;
 	}
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 1feb161ada..a4100e1f2c 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -433,6 +433,8 @@ function readPromo() {
 			min-width: 0;
 
 			> .body {
+				container-type: inline-size;
+
 				> .cw {
 					cursor: default;
 					display: block;
@@ -573,8 +575,10 @@ function readPromo() {
 	> .reply {
 		border-top: solid 0.5px var(--divider);
 	}
+}
 
-	&.max-width_500px {
+@container (max-width: 500px) {
+	.tkcbzcuz {
 		font-size: 0.9em;
 
 		> .article {
@@ -584,8 +588,10 @@ function readPromo() {
 			}
 		}
 	}
+}
 
-	&.max-width_450px {
+@container (max-width: 450px) {
+	.tkcbzcuz {
 		> .renote {
 			padding: 8px 16px 0 16px;
 		}
@@ -605,8 +611,10 @@ function readPromo() {
 			}
 		}
 	}
+}
 
-	&.max-width_350px {
+@container (max-width: 350px) {
+	.tkcbzcuz {
 		> .article {
 			> .main {
 				> .footer {
@@ -619,8 +627,10 @@ function readPromo() {
 			}
 		}
 	}
+}
 
-	&.max-width_300px {
+@container (max-width: 300px) {
+	.tkcbzcuz {
 		> .article {
 			> .avatar {
 				width: 44px;
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 8269906bb0..7ce8e039d9 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -444,6 +444,8 @@ if (appearNote.replyId) {
 
 		> .main {
 			> .body {
+				container-type: inline-size;
+
 				> .cw {
 					cursor: default;
 					display: block;
@@ -601,6 +603,72 @@ if (appearNote.replyId) {
 	}
 }
 
+@container (max-width: 500px) {
+	.lxwezrsl {
+		font-size: 0.9em;
+	}
+}
+
+@container (max-width: 450px) {
+	.lxwezrsl {
+		> .renote {
+			padding: 8px 16px 0 16px;
+		}
+
+		> .article {
+			padding: 16px;
+
+			> .header {
+				> .avatar {
+					width: 50px;
+					height: 50px;
+				}
+			}
+		}
+	}
+}
+
+@container (max-width: 350px) {
+	.lxwezrsl {
+		> .article {
+			> .main {
+				> .footer {
+					> .button {
+						&:not(:last-child) {
+							margin-right: 18px;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+@container (max-width: 300px) {
+	.lxwezrsl {
+		font-size: 0.825em;
+
+		> .article {
+			> .header {
+				> .avatar {
+					width: 50px;
+					height: 50px;
+				}
+			}
+
+			> .main {
+				> .footer {
+					> .button {
+						&:not(:last-child) {
+							margin-right: 12px;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
 .muted {
 	padding: 8px;
 	text-align: center;
diff --git a/packages/client/src/components/MkNotePreview.vue b/packages/client/src/components/MkNotePreview.vue
index a78b499654..0c81059091 100644
--- a/packages/client/src/components/MkNotePreview.vue
+++ b/packages/client/src/components/MkNotePreview.vue
@@ -89,4 +89,24 @@ const props = defineProps<{
 		}
 	}
 }
+
+@container (min-width: 350px) {
+	.fefdfafb {
+		> .avatar {
+			margin: 0 10px 0 0;
+			width: 44px;
+			height: 44px;
+		}
+	}
+}
+
+@container (min-width: 500px) {
+	.fefdfafb {
+		> .avatar {
+			margin: 0 12px 0 0;
+			width: 48px;
+			height: 48px;
+		}
+	}
+}
 </style>
diff --git a/packages/client/src/components/MkNoteSimple.vue b/packages/client/src/components/MkNoteSimple.vue
index 1bbbe0e1a6..96d29831d2 100644
--- a/packages/client/src/components/MkNoteSimple.vue
+++ b/packages/client/src/components/MkNoteSimple.vue
@@ -96,4 +96,24 @@ const showContent = $ref(false);
 		}
 	}
 }
+
+@container (min-width: 350px) {
+	.yohlumlk {
+		> .avatar {
+			margin: 0 10px 0 0;
+			width: 44px;
+			height: 44px;
+		}
+	}
+}
+
+@container (min-width: 500px) {
+	.yohlumlk {
+		> .avatar {
+			margin: 0 12px 0 0;
+			width: 48px;
+			height: 48px;
+		}
+	}
+}
 </style>
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 95b6b71be9..d03ce7c434 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -127,4 +127,14 @@ if (props.detail) {
 		padding: 10px 0 0 16px;
 	}
 }
+
+@container (max-width: 450px) {
+	.wrpstxzv {
+		padding: 14px 16px;
+
+		&.children {
+			padding: 10px 0 0 8px;
+		}
+	}
+}
 </style>
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
index 82965212f3..8b8d3f452d 100644
--- a/packages/client/src/components/MkNotification.vue
+++ b/packages/client/src/components/MkNotification.vue
@@ -306,4 +306,18 @@ useTooltip(reactionRef, (showing) => {
 		}
 	}
 }
+
+@container (max-width: 600px) {
+	.qglefbjs {
+		padding: 16px;
+		font-size: 0.9em;
+	}
+}
+
+@container (max-width: 500px) {
+	.qglefbjs {
+		padding: 12px;
+		font-size: 0.85em;
+	}
+}
 </style>
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index eb302ccc96..f79e5a32cd 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -990,4 +990,61 @@ onMounted(() => {
 		}
 	}
 }
+
+@container (max-width: 500px) {
+	.gafaadew {
+		> header {
+			height: 50px;
+
+			> .cancel {
+				width: 50px;
+				line-height: 50px;
+			}
+
+			> .right {
+				> .text-count {
+					line-height: 50px;
+				}
+
+				> .submit {
+					margin: 8px;
+				}
+			}
+		}
+
+		> .form {
+			> .to-specified {
+				padding: 6px 16px;
+			}
+
+			> .cw,
+			> .hashtags,
+			> .text {
+				padding: 0 16px;
+			}
+
+			> .text {
+				min-height: 80px;
+			}
+
+			> footer {
+				padding: 0 8px 8px 8px;
+			}
+		}
+	}
+}
+
+@container (max-width: 310px) {
+	.gafaadew {
+		> .form {
+			> footer {
+				> button {
+					font-size: 14px;
+					width: 44px;
+					height: 44px;
+				}
+			}
+		}
+	}
+}
 </style>
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index ac03559bea..b2d16ddb01 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -313,4 +313,71 @@ onUnmounted(() => {
 		}
 	}
 }
+
+@container (max-width: 400px) {
+	.mk-url-preview {
+		> .link {
+			font-size: 12px;
+
+			> .thumbnail {
+				height: 80px;
+			}
+
+			> article {
+				padding: 12px;
+			}
+		}
+	}
+}
+
+@container (max-width: 350px) {
+	.mk-url-preview {
+		> .link {
+			font-size: 10px;
+
+			> .thumbnail {
+				height: 70px;
+			}
+
+			> article {
+				padding: 8px;
+
+				> header {
+					margin-bottom: 4px;
+				}
+
+				> footer {
+					margin-top: 4px;
+
+					> img {
+						width: 12px;
+						height: 12px;
+					}
+				}
+			}
+
+			&.compact {
+				> .thumbnail {
+					position: absolute;
+					width: 56px;
+					height: 100%;
+				}
+
+				> article {
+					left: 56px;
+					width: calc(100% - 56px);
+					padding: 4px;
+
+					> header {
+						margin-bottom: 2px;
+					}
+
+					> footer {
+						margin-top: 2px;
+					}
+				}
+			}
+		}
+	}
+}
 </style>
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
index a0c77f91a9..fff89117ce 100644
--- a/packages/client/src/components/MkWidgets.vue
+++ b/packages/client/src/components/MkWidgets.vue
@@ -111,6 +111,8 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 
 <style lang="scss" scoped>
 .vjoppmmu {
+	container-type: inline-size;
+
 	> header {
 		margin: 16px 0;
 
diff --git a/packages/client/src/components/global/MkSpacer.vue b/packages/client/src/components/global/MkSpacer.vue
index 53adf07771..c7d53f2ee7 100644
--- a/packages/client/src/components/global/MkSpacer.vue
+++ b/packages/client/src/components/global/MkSpacer.vue
@@ -72,5 +72,6 @@ onUnmounted(() => {
 
 .content {
 	margin: 0 auto;
+	container-type: inline-size;
 }
 </style>
diff --git a/packages/client/src/directives/size.ts b/packages/client/src/directives/size.ts
index c8f446e3a8..b514f4e38b 100644
--- a/packages/client/src/directives/size.ts
+++ b/packages/client/src/directives/size.ts
@@ -15,6 +15,8 @@ type ClassOrder = {
 	remove: string[];
 };
 
+const isContainerQueriesSupported = ('container' in document.documentElement.style);
+
 const cache = new Map<string, ClassOrder>();
 
 function getClassOrder(width: number, queue: Value): ClassOrder {
@@ -78,6 +80,8 @@ function calc(el: Element) {
 
 export default {
 	mounted(src, binding, vn) {
+		if (isContainerQueriesSupported) return;
+
 		const resize = new ResizeObserver((entries, observer) => {
 			calc(src);
 		});
@@ -93,11 +97,15 @@ export default {
 	},
 
 	updated(src, binding, vn) {
+		if (isContainerQueriesSupported) return;
+
 		mountings.set(src, Object.assign({}, mountings.get(src), { value: binding.value }));
 		calc(src);
 	},
 
 	unmounted(src, binding, vn) {
+		if (isContainerQueriesSupported) return;
+
 		const info = mountings.get(src);
 		if (!info) return;
 		info.resize.disconnect();
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index 592131b2a8..0b2c284c99 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -118,4 +118,11 @@ definePageMetadata(computed(() => antenna ? {
 		margin: 0 auto;
 	}
 }
+
+@container (min-width: 800px) {
+	.tqmomfks {
+		max-width: 800px;
+		margin: 0 auto;
+	}
+}
 </style>
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index b4cec5f5e9..0d30998330 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -300,4 +300,28 @@ definePageMetadata({
 		}
 	}
 }
+
+@container (max-width: 400px) {
+	.yweeujhr {
+		> .history {
+			> .message {
+				&:not(.isMe):not(.isRead) {
+					> div {
+						background-image: none;
+						border-left: solid 4px #3aa2dc;
+					}
+				}
+
+				> div {
+					padding: 16px;
+					font-size: 0.9em;
+
+					> .avatar {
+						margin: 0 12px 0 0;
+					}
+				}
+			}
+		}
+	}
+}
 </style>
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index e7cf54a066..dbf0e37b73 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -2,7 +2,7 @@
 <div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
 	<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
 	<div class="content">
-		<div class="balloon" :class="{ noText: message.text == null }" >
+		<div class="balloon" :class="{ noText: message.text == null }">
 			<button v-if="isMe" class="delete-button" :title="$ts.delete" @click="del">
 				<img src="/client-assets/remove.png" alt="Delete"/>
 			</button>
@@ -331,4 +331,37 @@ function del(): void {
 		}
 	}
 }
+
+@container (max-width: 400px) {
+	.thvuemwp {
+		> .avatar {
+			width: 48px;
+			height: 48px;
+		}
+
+		> .content {
+			> .balloon {
+				> .content {
+					> .text {
+						font-size: 0.9em;
+					}
+				}
+			}
+		}
+	}
+}
+
+@container (max-width: 500px) {
+	.thvuemwp {
+		> .content {
+			> .balloon {
+				> .content {
+					> .text {
+						padding: 8px 16px;
+					}
+				}
+			}
+		}
+	}
+}
 </style>
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 7072b8ef03..a95bfe485c 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -3,7 +3,7 @@
 	<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 v-if="page" :key="page.id" class="xcukqgmh">
 				<div class="_block main">
 					<!--
 				<div class="header">
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index aa5c078ab4..fdb3167375 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -111,4 +111,11 @@ definePageMetadata(computed(() => list ? {
 		margin: 0 auto;
 	}
 }
+
+@container (min-width: 800px) {
+	.eqqrhokj {
+		max-width: 800px;
+		margin: 0 auto;
+	}
+}
 </style>
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index 55d0aa89a6..43c1b37e1d 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -475,4 +475,56 @@ onUnmounted(() => {
 		}
 	}
 }
+
+@container (max-width: 500px) {
+	.ftskorzw {
+		> .main {
+			> .profile > .main {
+				> .banner-container {
+					height: 140px;
+
+					> .fade {
+						display: none;
+					}
+
+					> .title {
+						display: none;
+					}
+				}
+
+				> .title {
+					display: block;
+				}
+
+				> .avatar {
+					top: 90px;
+					left: 0;
+					right: 0;
+					width: 92px;
+					height: 92px;
+					margin: auto;
+				}
+
+				> .description {
+					padding: 16px;
+					text-align: center;
+				}
+
+				> .fields {
+					padding: 16px;
+				}
+
+				> .status {
+					padding: 16px;
+				}
+			}
+
+			> .contents {
+				> .nav {
+					font-size: 80%;
+				}
+			}
+		}
+	}
+}
 </style>
-- 
cgit v1.2.3-freya


From dd4c411d228626126625019c9c7f9f60ea15e562 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 26 Dec 2022 09:22:10 +0900
Subject: ダッシュボードにモデレーター一覧を表示
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/server/api/endpoints/admin/show-users.ts   |  4 +-
 .../client/src/pages/admin/overview.moderators.vue | 52 ++++++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/src/pages/admin/overview.moderators.vue

(limited to 'packages/client/src')

diff --git a/packages/backend/src/server/api/endpoints/admin/show-users.ts b/packages/backend/src/server/api/endpoints/admin/show-users.ts
index 5471ef9b4c..33e1be8041 100644
--- a/packages/backend/src/server/api/endpoints/admin/show-users.ts
+++ b/packages/backend/src/server/api/endpoints/admin/show-users.ts
@@ -26,7 +26,7 @@ export const paramDef = {
 	properties: {
 		limit: { type: 'integer', minimum: 1, maximum: 100, default: 10 },
 		offset: { type: 'integer', default: 0 },
-		sort: { type: 'string', enum: ['+follower', '-follower', '+createdAt', '-createdAt', '+updatedAt', '-updatedAt'] },
+		sort: { type: 'string', enum: ['+follower', '-follower', '+createdAt', '-createdAt', '+updatedAt', '-updatedAt', '+lastActiveDate', '-lastActiveDate'] },
 		state: { type: 'string', enum: ['all', 'alive', 'available', 'admin', 'moderator', 'adminOrModerator', 'silenced', 'suspended'], default: 'all' },
 		origin: { type: 'string', enum: ['combined', 'local', 'remote'], default: 'combined' },
 		username: { type: 'string', nullable: true, default: null },
@@ -82,6 +82,8 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 				case '-createdAt': query.orderBy('user.createdAt', 'ASC'); break;
 				case '+updatedAt': query.orderBy('user.updatedAt', 'DESC', 'NULLS LAST'); break;
 				case '-updatedAt': query.orderBy('user.updatedAt', 'ASC', 'NULLS FIRST'); break;
+				case '+lastActiveDate': query.orderBy('user.lastActiveDate', 'DESC', 'NULLS LAST'); break;
+				case '-lastActiveDate': query.orderBy('user.lastActiveDate', 'ASC', 'NULLS FIRST'); break;
 				default: query.orderBy('user.id', 'ASC'); break;
 			}
 
diff --git a/packages/client/src/pages/admin/overview.moderators.vue b/packages/client/src/pages/admin/overview.moderators.vue
new file mode 100644
index 0000000000..b27477e9f9
--- /dev/null
+++ b/packages/client/src/pages/admin/overview.moderators.vue
@@ -0,0 +1,52 @@
+<template>
+<div>
+	<MkLoading v-if="fetching"/>
+	<div v-else :class="$style.root">
+		<MkA v-for="user in moderators" :key="user.id" v-user-preview="user.id" class="user" :to="`/user-info/${user.id}`">
+			<MkAvatar :user="user" class="avatar" :show-indicator="true" :disable-link="true"/>
+		</MkA>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import * as os from '@/os';
+import number from '@/filters/number';
+import { i18n } from '@/i18n';
+
+let moderators: any = $ref(null);
+let fetching = $ref(true);
+
+onMounted(async () => {
+	moderators = await os.api('admin/show-users', {
+		sort: '+lastActiveDate',
+		state: 'adminOrModerator',
+		limit: 30,
+	});
+
+	fetching = false;
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(30px, 40px));
+	grid-gap: 12px;
+	place-content: center;
+
+	&:global {
+		> .user {
+			width: 100%;
+			height: 100%;
+			aspect-ratio: 1;
+
+			> .avatar {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+</style>
-- 
cgit v1.2.3-freya


From 251c5b71bfd6df53fd97782999f906395011545b Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 26 Dec 2022 09:22:39 +0900
Subject: oops

---
 packages/client/src/pages/admin/overview.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index 786a908720..67f612e6b5 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -1,6 +1,6 @@
 <template>
 <MkSpacer :content-max="1000">
-	<div ref="rootEl" v-size="{ max: [740] }" class="edbbcaef">
+	<div ref="rootEl" class="edbbcaef">
 		<MkFolder class="item">
 			<template #header>Stats</template>
 			<XStats/>
@@ -9,6 +9,10 @@
 			<template #header>Active users</template>
 			<XActiveUsers/>
 		</MkFolder>
+		<MkFolder class="item">
+			<template #header>Moderators</template>
+			<XModerators/>
+		</MkFolder>
 		<MkFolder class="item">
 			<template #header>Federation</template>
 			<XFederation/>
@@ -46,6 +50,7 @@ import XApRequests from './overview.ap-requests.vue';
 import XUsers from './overview.users.vue';
 import XActiveUsers from './overview.active-users.vue';
 import XStats from './overview.stats.vue';
+import XModerators from './overview.moderators.vue';
 import MkTagCloud from '@/components/MkTagCloud.vue';
 import { version, url } from '@/config';
 import * as os from '@/os';
-- 
cgit v1.2.3-freya


From 6acc10b4ba0cb1c21a377ca2a93fc3809c1d1cfc Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 26 Dec 2022 10:29:47 +0900
Subject: feat(client): add user list widget

---
 CHANGELOG.md                              |   1 +
 locales/ja-JP.yml                         |   3 +
 packages/client/src/widgets/index.ts      |   2 +
 packages/client/src/widgets/user-list.vue | 136 ++++++++++++++++++++++++++++++
 4 files changed, 142 insertions(+)
 create mode 100644 packages/client/src/widgets/user-list.vue

(limited to 'packages/client/src')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index af3fc75c06..2f633d43c4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -42,6 +42,7 @@ You should also include the user name that made the change.
 - Client: Implement the button to subscribe push notification @tamaina
 - Client: Implement the toggle to or not to close push notifications when notifications or messages are read @tamaina
 - Client: show Unicode emoji tooltip with its name in MkReactionsViewer.reaction @saschanaz
+- Client: add user list widget @syuilo
 - Client: improve overall performance of client @syuilo
 
 ### Bugfixes
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 98e435a6b5..6ebeaf65be 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1344,6 +1344,9 @@ _widgets:
   serverMetric: "サーバーメトリクス"
   aiscript: "AiScriptコンソール"
   aichan: "藍"
+  userList: "ユーザーリスト"
+  _userList:
+    chooseList: "リストを選択"
 
 _cw:
   hide: "隠す"
diff --git a/packages/client/src/widgets/index.ts b/packages/client/src/widgets/index.ts
index 66bec7c83f..39826f13c8 100644
--- a/packages/client/src/widgets/index.ts
+++ b/packages/client/src/widgets/index.ts
@@ -23,6 +23,7 @@ export default function(app: App) {
 	app.component('MkwButton', defineAsyncComponent(() => import('./button.vue')));
 	app.component('MkwAiscript', defineAsyncComponent(() => import('./aiscript.vue')));
 	app.component('MkwAichan', defineAsyncComponent(() => import('./aichan.vue')));
+	app.component('MkwUserList', defineAsyncComponent(() => import('./user-list.vue')));
 }
 
 export const widgets = [
@@ -48,4 +49,5 @@ export const widgets = [
 	'button',
 	'aiscript',
 	'aichan',
+	'userList',
 ];
diff --git a/packages/client/src/widgets/user-list.vue b/packages/client/src/widgets/user-list.vue
new file mode 100644
index 0000000000..9ffbf0d8e3
--- /dev/null
+++ b/packages/client/src/widgets/user-list.vue
@@ -0,0 +1,136 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList">
+	<template #header><i class="ti ti-users"></i>{{ list ? list.name : i18n.ts._widgets.userList }}</template>
+	<template #func><button class="_button" @click="configure()"><i class="ti ti-settings"></i></button></template>
+
+	<div :class="$style.root">
+		<div v-if="widgetProps.listId == null" class="init">
+			<MkButton primary @click="chooseList">{{ i18n.ts._widgets._userList.chooseList }}</MkButton>
+		</div>
+		<MkLoading v-else-if="fetching"/>
+		<div v-else class="users">
+			<MkA v-for="user in users" :key="user.id" class="user">
+				<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
+			</MkA>
+		</div>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import MkContainer from '@/components/MkContainer.vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
+import MkButton from '@/components/MkButton.vue';
+
+const name = 'userList';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	listId: {
+		type: 'string' as const,
+		default: null,
+		hidden: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure, save } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+let list = $ref();
+let users = $ref([]);
+let fetching = $ref(true);
+
+async function chooseList() {
+	const lists = await os.api('users/lists/list');
+	const { canceled, result: list } = await os.select({
+		title: i18n.ts.selectList,
+		items: lists.map(x => ({
+			value: x, text: x.name,
+		})),
+		default: widgetProps.listId,
+	});
+	if (canceled) return;
+
+	widgetProps.listId = list.id;
+	save();
+	fetch();
+}
+
+const fetch = () => {
+	if (widgetProps.listId == null) {
+		fetching = false;
+		return;
+	}
+
+	os.api('users/lists/show', {
+		listId: widgetProps.listId,
+	}).then(_list => {
+		list = _list;
+		os.api('users/show', {
+			userIds: list.userIds,
+		}).then(_users => {
+			users = _users;
+			fetching = false;
+		});
+	});
+};
+
+useInterval(fetch, 1000 * 60, {
+	immediate: true,
+	afterMounted: true,
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	&:global {
+		> .init {
+			padding: 16px;
+		}
+
+		> .users {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(30px, 40px));
+			grid-gap: 12px;
+			place-content: center;
+			padding: 16px;
+
+			> .user {
+				width: 100%;
+				height: 100%;
+				aspect-ratio: 1;
+
+				> .avatar {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+}
+</style>
-- 
cgit v1.2.3-freya


From f0fe930aae2aa936d85abfca58cbab3cd3cbb968 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Mon, 26 Dec 2022 12:55:10 +0900
Subject: fix(client): prevent infinite resize loop (#9232)

* clientWidth?

* spacer?

* size directive?

* size directive

* use const
---
 packages/client/src/components/global/MkSpacer.vue | 23 ++++++++++++++++++++--
 packages/client/src/directives/size.ts             | 10 +++++++++-
 2 files changed, 30 insertions(+), 3 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/global/MkSpacer.vue b/packages/client/src/components/global/MkSpacer.vue
index c7d53f2ee7..b3a42d77e7 100644
--- a/packages/client/src/components/global/MkSpacer.vue
+++ b/packages/client/src/components/global/MkSpacer.vue
@@ -24,6 +24,8 @@ let ro: ResizeObserver;
 let root = $ref<HTMLElement>();
 let content = $ref<HTMLElement>();
 let margin = $ref(0);
+const widthHistory = [null, null] as [number | null, number | null];
+const heightHistory = [null, null] as [number | null, number | null];
 const shouldSpacerMin = inject('shouldSpacerMin', false);
 
 const adjust = (rect: { width: number; height: number; }) => {
@@ -47,9 +49,26 @@ onMounted(() => {
 			height: entries[0].borderBoxSize[0].blockSize,
 		});
 		*/
+
+		const width = root!.offsetWidth;
+		const height = root!.offsetHeight;
+
+		//#region Prevent infinite resizing
+		// https://github.com/misskey-dev/misskey/issues/9076
+		const pastWidth = widthHistory.pop();
+		widthHistory.unshift(width);
+		const pastHeight = heightHistory.pop();
+		heightHistory.unshift(height);
+
+
+		if (pastWidth === width && pastHeight === height) {
+			return;
+		}
+		//#endregion
+
 		adjust({
-			width: root!.offsetWidth,
-			height: root!.offsetHeight,
+			width,
+			height,
 		});
 	});
 	ro.observe(root!);
diff --git a/packages/client/src/directives/size.ts b/packages/client/src/directives/size.ts
index b514f4e38b..da8bd78ea1 100644
--- a/packages/client/src/directives/size.ts
+++ b/packages/client/src/directives/size.ts
@@ -8,6 +8,7 @@ const mountings = new Map<Element, {
 	resize: ResizeObserver;
 	intersection?: IntersectionObserver;
 	previousWidth: number;
+	twoPreviousWidth: number;
 }>();
 
 type ClassOrder = {
@@ -66,7 +67,13 @@ function calc(el: Element) {
 		delete info.intersection;
 	}
 
-	mountings.set(el, Object.assign(info, { previousWidth: width }));
+	mountings.set(el, { ...info, ...{ previousWidth: width, twoPreviousWidth: info.previousWidth }});
+
+	// Prevent infinite resizing
+	// https://github.com/misskey-dev/misskey/issues/9076
+	if (info.twoPreviousWidth === width) {
+		return;
+	}
 
 	const cached = cache.get(getOrderName(width, info.value));
 	if (cached) {
@@ -90,6 +97,7 @@ export default {
 			value: binding.value,
 			resize,
 			previousWidth: 0,
+			twoPreviousWidth: 0,
 		});
 
 		calc(src);
-- 
cgit v1.2.3-freya


From cc23ee76e4d733d0109a65d7dd092dc8d2ca5351 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 26 Dec 2022 13:06:25 +0900
Subject: fix style

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkNotificationToast.vue b/packages/client/src/components/MkNotificationToast.vue
index 398f64d544..07640792c0 100644
--- a/packages/client/src/components/MkNotificationToast.vue
+++ b/packages/client/src/components/MkNotificationToast.vue
@@ -45,6 +45,7 @@ onMounted(() => {
 	top: 32px;
 	padding: 0 32px;
 	pointer-events: none;
+	container-type: inline-size;
 
 	@media (max-width: 700px) {
 		top: initial;
-- 
cgit v1.2.3-freya


From 6083356a3e0fc1e70cc15f84ef0d041f34cce444 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 26 Dec 2022 13:26:21 +0900
Subject: :art:

---
 packages/client/src/components/MkInstanceStats.vue | 8 ++++++--
 packages/client/src/pages/admin/overview.pie.vue   | 4 +++-
 packages/client/src/scripts/use-chart-tooltip.ts   | 8 ++++++--
 3 files changed, 15 insertions(+), 5 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkInstanceStats.vue b/packages/client/src/components/MkInstanceStats.vue
index 0437e05fad..5f5f64b0c2 100644
--- a/packages/client/src/components/MkInstanceStats.vue
+++ b/packages/client/src/components/MkInstanceStats.vue
@@ -103,8 +103,12 @@ const chartSrc = $ref('active-users');
 let subDoughnutEl = $ref<HTMLCanvasElement>();
 let pubDoughnutEl = $ref<HTMLCanvasElement>();
 
-const { handler: externalTooltipHandler1 } = useChartTooltip();
-const { handler: externalTooltipHandler2 } = useChartTooltip();
+const { handler: externalTooltipHandler1 } = useChartTooltip({
+	position: 'middle',
+});
+const { handler: externalTooltipHandler2 } = useChartTooltip({
+	position: 'middle',
+});
 
 function createDoughnut(chartEl, tooltip, data) {
 	const chartInstance = new Chart(chartEl, {
diff --git a/packages/client/src/pages/admin/overview.pie.vue b/packages/client/src/pages/admin/overview.pie.vue
index d3b2032876..94509cf006 100644
--- a/packages/client/src/pages/admin/overview.pie.vue
+++ b/packages/client/src/pages/admin/overview.pie.vue
@@ -53,7 +53,9 @@ const chartEl = ref<HTMLCanvasElement>(null);
 // フォントカラー
 Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
 
-const { handler: externalTooltipHandler } = useChartTooltip();
+const { handler: externalTooltipHandler } = useChartTooltip({
+	position: 'middle',
+});
 
 let chartInstance: Chart;
 
diff --git a/packages/client/src/scripts/use-chart-tooltip.ts b/packages/client/src/scripts/use-chart-tooltip.ts
index afdd547245..881e5e9ad5 100644
--- a/packages/client/src/scripts/use-chart-tooltip.ts
+++ b/packages/client/src/scripts/use-chart-tooltip.ts
@@ -2,7 +2,7 @@ import { onUnmounted, ref } from 'vue';
 import * as os from '@/os';
 import MkChartTooltip from '@/components/MkChartTooltip.vue';
 
-export function useChartTooltip() {
+export function useChartTooltip(opts: { position: 'top' | 'middle' } = { position: 'top' }) {
 	const tooltipShowing = ref(false);
 	const tooltipX = ref(0);
 	const tooltipY = ref(0);
@@ -41,7 +41,11 @@ export function useChartTooltip() {
 
 		tooltipShowing.value = true;
 		tooltipX.value = rect.left + window.pageXOffset + context.tooltip.caretX;
-		tooltipY.value = rect.top + window.pageYOffset;
+		if (opts.position === 'top') {
+			tooltipY.value = rect.top + window.pageYOffset;
+		} else if (opts.position === 'middle') {
+			tooltipY.value = rect.top + window.pageYOffset + context.tooltip.caretY;
+		}
 	}
 
 	return {
-- 
cgit v1.2.3-freya


From 0ed42e0ea9bc7ec624b13416620c540b49352123 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 26 Dec 2022 13:33:43 +0900
Subject: :art:

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/admin/overview.moderators.vue b/packages/client/src/pages/admin/overview.moderators.vue
index b27477e9f9..971fb993d0 100644
--- a/packages/client/src/pages/admin/overview.moderators.vue
+++ b/packages/client/src/pages/admin/overview.moderators.vue
@@ -1,8 +1,8 @@
 <template>
 <div>
 	<MkLoading v-if="fetching"/>
-	<div v-else :class="$style.root">
-		<MkA v-for="user in moderators" :key="user.id" v-user-preview="user.id" class="user" :to="`/user-info/${user.id}`">
+	<div v-else :class="$style.root" class="_panel">
+		<MkA v-for="user in moderators" :key="user.id" class="user" :to="`/user-info/${user.id}`">
 			<MkAvatar :user="user" class="avatar" :show-indicator="true" :disable-link="true"/>
 		</MkA>
 	</div>
@@ -35,6 +35,7 @@ onMounted(async () => {
 	grid-template-columns: repeat(auto-fill, minmax(30px, 40px));
 	grid-gap: 12px;
 	place-content: center;
+	padding: 12px;
 
 	&:global {
 		> .user {
-- 
cgit v1.2.3-freya


From e0d207a173c30d3320112ddbc3e67429a6e4110d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 26 Dec 2022 13:40:20 +0900
Subject: :art:

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/admin/overview.instances.vue b/packages/client/src/pages/admin/overview.instances.vue
index b496eb86ac..81ce2d2802 100644
--- a/packages/client/src/pages/admin/overview.instances.vue
+++ b/packages/client/src/pages/admin/overview.instances.vue
@@ -2,7 +2,7 @@
 <div class="wbrkwale">
 	<MkLoading v-if="fetching"/>
 	<div v-else class="instances">
-		<MkA v-for="(instance, i) in instances" :key="instance.id" :to="`/instance-info/${instance.host}`" class="instance">
+		<MkA v-for="(instance, i) in instances" :key="instance.id" v-tooltip.mfm.noDelay="`${instance.name}\n${instance.host}\n${instance.softwareName} ${instance.softwareVersion}`" :to="`/instance-info/${instance.host}`" class="instance">
 			<MkInstanceCardMini :instance="instance"/>
 		</MkA>
 	</div>
@@ -37,7 +37,7 @@ useInterval(fetch, 1000 * 60, {
 .wbrkwale {
 	> .instances {
 		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
 		grid-gap: 12px;
 
 		> .instance:hover {
-- 
cgit v1.2.3-freya


From be0d3961069c628bbd59d76c314cff9fedaca829 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 26 Dec 2022 14:34:46 +0900
Subject: :art:

---
 .../src/pages/admin/overview.active-users.vue      | 58 +++++++++----------
 .../src/pages/admin/overview.ap-requests.vue       | 40 +++++++------
 .../client/src/pages/admin/overview.instances.vue  | 14 +++--
 .../client/src/pages/admin/overview.moderators.vue | 14 +++--
 packages/client/src/pages/admin/overview.stats.vue | 66 +++++++++++-----------
 packages/client/src/pages/admin/overview.users.vue | 14 +++--
 6 files changed, 107 insertions(+), 99 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/admin/overview.active-users.vue b/packages/client/src/pages/admin/overview.active-users.vue
index eb4cefb345..c3ce5ac901 100644
--- a/packages/client/src/pages/admin/overview.active-users.vue
+++ b/packages/client/src/pages/admin/overview.active-users.vue
@@ -64,7 +64,7 @@ const alpha = (hex, a) => {
 const chartEl = $ref<HTMLCanvasElement>(null);
 const now = new Date();
 let chartInstance: Chart = null;
-const chartLimit = 50;
+const chartLimit = 7;
 let fetching = $ref(true);
 
 const { handler: externalTooltipHandler } = useChartTooltip();
@@ -97,37 +97,38 @@ async function renderChart() {
 	// フォントカラー
 	Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
 
-	const color = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent')).toHexString();
+	const colorRead = '#3498db';
+	const colorWrite = '#2ecc71';
 
 	const max = Math.max(...raw.read);
 
 	chartInstance = new Chart(chartEl, {
-		type: 'line',
+		type: 'bar',
 		data: {
-			//labels: new Array(props.limit).fill(0).map((_, i) => getDate(i).toLocaleString()).slice().reverse(),
 			datasets: [{
 				parsing: false,
-				label: 'active',
+				label: 'Read',
 				data: format(raw.read).slice().reverse(),
-				tension: 0.3,
 				pointRadius: 0,
-				borderWidth: 2,
-				borderColor: color,
+				borderWidth: 0,
 				borderJoinStyle: 'round',
-				//backgroundColor: alpha(color, 0.1),
-				gradient: {
-					backgroundColor: {
-						axis: 'y',
-						colors: {
-							0: alpha(color, 0),
-							[max]: alpha(color, 0.35),
-						},
-					},
-				},
-				barPercentage: 0.9,
-				categoryPercentage: 0.9,
+				borderRadius: 4,
+				backgroundColor: colorRead,
+				barPercentage: 0.7,
+				categoryPercentage: 0.5,
+				fill: true,
+			}, {
+				parsing: false,
+				label: 'Write',
+				data: format(raw.write).slice().reverse(),
+				pointRadius: 0,
+				borderWidth: 0,
+				borderJoinStyle: 'round',
+				borderRadius: 4,
+				backgroundColor: colorWrite,
+				barPercentage: 0.7,
+				categoryPercentage: 0.5,
 				fill: true,
-				clip: 8,
 			}],
 		},
 		options: {
@@ -143,7 +144,7 @@ async function renderChart() {
 			scales: {
 				x: {
 					type: 'time',
-					offset: false,
+					offset: true,
 					time: {
 						stepSize: 1,
 						unit: 'day',
@@ -156,20 +157,19 @@ async function renderChart() {
 					ticks: {
 						display: true,
 						maxRotation: 0,
-						autoSkipPadding: 16,
+						autoSkipPadding: 8,
 					},
 					adapters: {
 						date: {
 							locale: enUS,
 						},
 					},
-					min: getDate(chartLimit).getTime(),
 				},
 				y: {
 					position: 'left',
 					suggestedMax: 10,
 					grid: {
-						display: false,
+						display: true,
 						color: gridColor,
 						borderColor: 'rgb(0, 0, 0, 0)',
 					},
@@ -183,13 +183,7 @@ async function renderChart() {
 				intersect: false,
 				mode: 'index',
 			},
-			elements: {
-				point: {
-					hoverRadius: 5,
-					hoverBorderWidth: 2,
-				},
-			},
-			animation: true,
+			animation: false,
 			plugins: {
 				legend: {
 					display: false,
diff --git a/packages/client/src/pages/admin/overview.ap-requests.vue b/packages/client/src/pages/admin/overview.ap-requests.vue
index e1179181c6..024ffdc245 100644
--- a/packages/client/src/pages/admin/overview.ap-requests.vue
+++ b/packages/client/src/pages/admin/overview.ap-requests.vue
@@ -63,6 +63,14 @@ Chart.register(
 	gradient,
 );
 
+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 chartLimit = 50;
 const chartEl = $ref<HTMLCanvasElement>();
 const chartEl2 = $ref<HTMLCanvasElement>();
@@ -100,8 +108,8 @@ onMounted(async () => {
 
 	const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
 	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
-	const succColor = '#4fd60c';
-	const failColor = '#e8681e';
+	const succColor = '#87e000';
+	const failColor = '#ff4400';
 
 	const succMax = Math.max(...raw.deliverSucceeded);
 	const failMax = Math.max(...raw.deliverFailed);
@@ -110,7 +118,7 @@ onMounted(async () => {
 	Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
 
 	new Chart(chartEl, {
-		type: 'bar',
+		type: 'line',
 		data: {
 			datasets: [{
 				stack: 'a',
@@ -119,12 +127,11 @@ onMounted(async () => {
 				data: format(raw.deliverSucceeded).slice().reverse(),
 				tension: 0.3,
 				pointRadius: 0,
-				borderWidth: 0,
+				borderWidth: 2,
+				borderColor: succColor,
 				borderJoinStyle: 'round',
 				borderRadius: 4,
-				backgroundColor: succColor,
-				barPercentage: 0.9,
-				categoryPercentage: 0.9,
+				backgroundColor: alpha(succColor, 0.35),
 				fill: true,
 				clip: 8,
 			}, {
@@ -134,12 +141,11 @@ onMounted(async () => {
 				data: formatMinus(raw.deliverFailed).slice().reverse(),
 				tension: 0.3,
 				pointRadius: 0,
-				borderWidth: 0,
+				borderWidth: 2,
+				borderColor: failColor,
 				borderJoinStyle: 'round',
 				borderRadius: 4,
-				backgroundColor: failColor,
-				barPercentage: 0.9,
-				categoryPercentage: 0.9,
+				backgroundColor: alpha(failColor, 0.35),
 				fill: true,
 				clip: 8,
 			}],
@@ -164,7 +170,7 @@ onMounted(async () => {
 						unit: 'day',
 					},
 					grid: {
-						display: false,
+						display: true,
 						color: gridColor,
 						borderColor: 'rgb(0, 0, 0, 0)',
 					},
@@ -185,7 +191,7 @@ onMounted(async () => {
 					position: 'left',
 					suggestedMax: 10,
 					grid: {
-						display: false,
+						display: true,
 						color: gridColor,
 						borderColor: 'rgb(0, 0, 0, 0)',
 					},
@@ -206,7 +212,7 @@ onMounted(async () => {
 					hoverBorderWidth: 2,
 				},
 			},
-			animation: true,
+			animation: false,
 			plugins: {
 				legend: {
 					display: false,
@@ -238,7 +244,7 @@ onMounted(async () => {
 				borderJoinStyle: 'round',
 				borderRadius: 4,
 				backgroundColor: '#0cc2d6',
-				barPercentage: 0.9,
+				barPercentage: 0.8,
 				categoryPercentage: 0.9,
 				fill: true,
 				clip: 8,
@@ -283,7 +289,7 @@ onMounted(async () => {
 					position: 'left',
 					suggestedMax: 10,
 					grid: {
-						display: false,
+						display: true,
 						color: gridColor,
 						borderColor: 'rgb(0, 0, 0, 0)',
 					},
@@ -299,7 +305,7 @@ onMounted(async () => {
 					hoverBorderWidth: 2,
 				},
 			},
-			animation: true,
+			animation: false,
 			plugins: {
 				legend: {
 					display: false,
diff --git a/packages/client/src/pages/admin/overview.instances.vue b/packages/client/src/pages/admin/overview.instances.vue
index 81ce2d2802..29848bf03b 100644
--- a/packages/client/src/pages/admin/overview.instances.vue
+++ b/packages/client/src/pages/admin/overview.instances.vue
@@ -1,11 +1,13 @@
 <template>
 <div class="wbrkwale">
-	<MkLoading v-if="fetching"/>
-	<div v-else class="instances">
-		<MkA v-for="(instance, i) in instances" :key="instance.id" v-tooltip.mfm.noDelay="`${instance.name}\n${instance.host}\n${instance.softwareName} ${instance.softwareVersion}`" :to="`/instance-info/${instance.host}`" class="instance">
-			<MkInstanceCardMini :instance="instance"/>
-		</MkA>
-	</div>
+	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+		<MkLoading v-if="fetching"/>
+		<div v-else class="instances">
+			<MkA v-for="(instance, i) in instances" :key="instance.id" v-tooltip.mfm.noDelay="`${instance.name}\n${instance.host}\n${instance.softwareName} ${instance.softwareVersion}`" :to="`/instance-info/${instance.host}`" class="instance">
+				<MkInstanceCardMini :instance="instance"/>
+			</MkA>
+		</div>
+	</transition>
 </div>
 </template>
 
diff --git a/packages/client/src/pages/admin/overview.moderators.vue b/packages/client/src/pages/admin/overview.moderators.vue
index 971fb993d0..a1f63c8711 100644
--- a/packages/client/src/pages/admin/overview.moderators.vue
+++ b/packages/client/src/pages/admin/overview.moderators.vue
@@ -1,11 +1,13 @@
 <template>
 <div>
-	<MkLoading v-if="fetching"/>
-	<div v-else :class="$style.root" class="_panel">
-		<MkA v-for="user in moderators" :key="user.id" class="user" :to="`/user-info/${user.id}`">
-			<MkAvatar :user="user" class="avatar" :show-indicator="true" :disable-link="true"/>
-		</MkA>
-	</div>
+	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+		<MkLoading v-if="fetching"/>
+		<div v-else :class="$style.root" class="_panel">
+			<MkA v-for="user in moderators" :key="user.id" class="user" :to="`/user-info/${user.id}`">
+				<MkAvatar :user="user" class="avatar" :show-indicator="true" :disable-link="true"/>
+			</MkA>
+		</div>
+	</transition>
 </div>
 </template>
 
diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/overview.stats.vue
index 28c5401abb..4dcf7e751a 100644
--- a/packages/client/src/pages/admin/overview.stats.vue
+++ b/packages/client/src/pages/admin/overview.stats.vue
@@ -1,46 +1,48 @@
 <template>
 <div>
-	<MkLoading v-if="fetching"/>
-	<div v-else :class="$style.root">
-		<div class="item _panel users">
-			<div class="icon"><i class="ti ti-users"></i></div>
-			<div class="body">
-				<div class="value">
-					{{ number(stats.originalUsersCount) }}
-					<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"></MkNumberDiff>
+	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+		<MkLoading v-if="fetching"/>
+		<div v-else :class="$style.root">
+			<div class="item _panel users">
+				<div class="icon"><i class="ti ti-users"></i></div>
+				<div class="body">
+					<div class="value">
+						{{ number(stats.originalUsersCount) }}
+						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"></MkNumberDiff>
+					</div>
+					<div class="label">Users</div>
 				</div>
-				<div class="label">Users</div>
 			</div>
-		</div>
-		<div class="item _panel notes">
-			<div class="icon"><i class="ti ti-pencil"></i></div>
-			<div class="body">
-				<div class="value">
-					{{ number(stats.originalNotesCount) }}
-					<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff>
+			<div class="item _panel notes">
+				<div class="icon"><i class="ti ti-pencil"></i></div>
+				<div class="body">
+					<div class="value">
+						{{ number(stats.originalNotesCount) }}
+						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff>
+					</div>
+					<div class="label">Notes</div>
 				</div>
-				<div class="label">Notes</div>
 			</div>
-		</div>
-		<div class="item _panel instances">
-			<div class="icon"><i class="ti ti-planet"></i></div>
-			<div class="body">
-				<div class="value">
-					{{ number(stats.instances) }}
+			<div class="item _panel instances">
+				<div class="icon"><i class="ti ti-planet"></i></div>
+				<div class="body">
+					<div class="value">
+						{{ number(stats.instances) }}
+					</div>
+					<div class="label">Instances</div>
 				</div>
-				<div class="label">Instances</div>
 			</div>
-		</div>
-		<div class="item _panel online">
-			<div class="icon"><i class="ti ti-access-point"></i></div>
-			<div class="body">
-				<div class="value">
-					{{ number(onlineUsersCount) }}
+			<div class="item _panel online">
+				<div class="icon"><i class="ti ti-access-point"></i></div>
+				<div class="body">
+					<div class="value">
+						{{ number(onlineUsersCount) }}
+					</div>
+					<div class="label">Online</div>
 				</div>
-				<div class="label">Online</div>
 			</div>
 		</div>
-	</div>
+	</transition>
 </div>
 </template>
 
diff --git a/packages/client/src/pages/admin/overview.users.vue b/packages/client/src/pages/admin/overview.users.vue
index 9747bfc3b6..5d4be11742 100644
--- a/packages/client/src/pages/admin/overview.users.vue
+++ b/packages/client/src/pages/admin/overview.users.vue
@@ -1,11 +1,13 @@
 <template>
 <div :class="$style.root">
-	<MkLoading v-if="fetching"/>
-	<div v-else class="users">
-		<MkA v-for="(user, i) in newUsers" :key="user.id" :to="`/user-info/${user.id}`" class="user">
-			<MkUserCardMini :user="user"/>
-		</MkA>
-	</div>
+	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+		<MkLoading v-if="fetching"/>
+		<div v-else class="users">
+			<MkA v-for="(user, i) in newUsers" :key="user.id" :to="`/user-info/${user.id}`" class="user">
+				<MkUserCardMini :user="user"/>
+			</MkA>
+		</div>
+	</transition>
 </div>
 </template>
 
-- 
cgit v1.2.3-freya


From d106fb39abf8fe17c00e562c1237fcacfe158345 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 26 Dec 2022 16:04:56 +0900
Subject: feat: introduce fluent emoji

---
 .dockerignore                                        |  1 +
 .gitmodules                                          |  3 +++
 CHANGELOG.md                                         |  1 +
 fluent-emojis                                        |  1 +
 locales/ja-JP.yml                                    |  3 ++-
 misskey-assets                                       |  2 +-
 .../backend/src/server/web/ClientServerService.ts    | 15 +++++++++++++++
 packages/client/src/components/MkAutocomplete.vue    | 10 ++++++----
 .../src/components/MkReactionsViewer.details.vue     |  1 +
 packages/client/src/components/global/MkEmoji.vue    |  8 +++++---
 packages/client/src/pages/settings/general.vue       | 16 +++++++++++-----
 .../src/pages/settings/preferences-backups.vue       |  2 +-
 packages/client/src/scripts/emoji-base.ts            | 20 ++++++++++++++++++++
 packages/client/src/scripts/twemoji-base.ts          | 12 ------------
 packages/client/src/store.ts                         |  4 ++--
 15 files changed, 70 insertions(+), 29 deletions(-)
 create mode 160000 fluent-emojis
 create mode 100644 packages/client/src/scripts/emoji-base.ts
 delete mode 100644 packages/client/src/scripts/twemoji-base.ts

(limited to 'packages/client/src')

diff --git a/.dockerignore b/.dockerignore
index 84fd34f8e7..854e643d39 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -14,6 +14,7 @@ packages/*/node_modules
 redis/
 files/
 misskey-assets/
+fluent-emojis/
 .pnp.*
 .yarn/*
 !.yarn/patches
diff --git a/.gitmodules b/.gitmodules
index 9246e09b8b..225a69a652 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +1,6 @@
 [submodule "misskey-assets"]
 	path = misskey-assets
 	url = https://github.com/misskey-dev/assets.git
+[submodule "fluent-emojis"]
+	path = fluent-emojis
+	url = https://github.com/misskey-dev/emojis.git
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2f633d43c4..f7b939d621 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,7 @@ You should also include the user name that made the change.
 - Client: Implement the toggle to or not to close push notifications when notifications or messages are read @tamaina
 - Client: show Unicode emoji tooltip with its name in MkReactionsViewer.reaction @saschanaz
 - Client: add user list widget @syuilo
+- Client: introduce fluent emoji @syuilo
 - Client: improve overall performance of client @syuilo
 
 ### Bugfixes
diff --git a/fluent-emojis b/fluent-emojis
new file mode 160000
index 0000000000..cae981eb4c
--- /dev/null
+++ b/fluent-emojis
@@ -0,0 +1 @@
+Subproject commit cae981eb4c5189ea9ea3230e83b876a5068df7d1
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 6ebeaf65be..8add6348df 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -456,7 +456,8 @@ language: "言語"
 uiLanguage: "UIの表示言語"
 groupInvited: "グループに招待されました"
 aboutX: "{x}について"
-useOsNativeEmojis: "OSネイティブの絵文字を使用"
+emojiStyle: "絵文字のスタイル"
+native: "ネイティブ"
 disableDrawer: "メニューをドロワーで表示しない"
 youHaveNoGroups: "グループがありません"
 joinOrCreateGroup: "既存のグループに招待してもらうか、新しくグループを作成してください。"
diff --git a/misskey-assets b/misskey-assets
index 0179793ec8..cf3ce27b2e 160000
--- a/misskey-assets
+++ b/misskey-assets
@@ -1 +1 @@
-Subproject commit 0179793ec891856d6f37a3be16ba4c22f67a81b5
+Subproject commit cf3ce27b2eb8417233072e3d6d2fb7c5356c2364
diff --git a/packages/backend/src/server/web/ClientServerService.ts b/packages/backend/src/server/web/ClientServerService.ts
index 1932f88428..97acfcb919 100644
--- a/packages/backend/src/server/web/ClientServerService.ts
+++ b/packages/backend/src/server/web/ClientServerService.ts
@@ -217,6 +217,21 @@ export class ClientServerService {
 			return reply.sendFile('/apple-touch-icon.png', staticAssets);
 		});
 
+		fastify.get<{ Params: { path: string } }>('/fluent-emoji/:path(.*)', async (request, reply) => {
+			const path = request.params.path;
+
+			if (!path.match(/^[0-9a-f-]+\.png$/)) {
+				reply.code(404);
+				return;
+			}
+
+			reply.header('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
+
+			return await reply.sendFile(path, `${_dirname}/../../../../../fluent-emojis/dist/`, {
+				maxAge: ms('30 days'),
+			});
+		});
+
 		fastify.get<{ Params: { path: string } }>('/twemoji/:path(.*)', async (request, reply) => {
 			const path = request.params.path;
 
diff --git a/packages/client/src/components/MkAutocomplete.vue b/packages/client/src/components/MkAutocomplete.vue
index e1fd5693b6..72783921d5 100644
--- a/packages/client/src/components/MkAutocomplete.vue
+++ b/packages/client/src/components/MkAutocomplete.vue
@@ -18,7 +18,7 @@
 	<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
 		<li v-for="emoji in emojis" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
 			<span v-if="emoji.isCustomEmoji" class="emoji"><img :src="defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
-			<span v-else-if="!defaultStore.state.useOsNativeEmojis" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
+			<span v-else-if="defaultStore.state.emojiStyle != 'native'" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
 			<span v-else class="emoji">{{ emoji.emoji }}</span>
 			<!-- eslint-disable-next-line vue/no-v-html -->
 			<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
@@ -36,7 +36,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 { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
 import { acct } from '@/filters/user';
 import * as os from '@/os';
@@ -59,9 +59,11 @@ const lib = emojilist.filter(x => x.category !== 'flags');
 const emjdb: EmojiDef[] = lib.map(x => ({
 	emoji: x.char,
 	name: x.name,
-	url: char2filePath(x.char),
+	url: char2path(x.char),
 }));
 
+const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
+
 for (const x of lib) {
 	if (x.keywords) {
 		for (const k of x.keywords) {
@@ -69,7 +71,7 @@ for (const x of lib) {
 				emoji: x.char,
 				name: k,
 				aliasOf: x.name,
-				url: char2filePath(x.char),
+				url: char2path(x.char),
 			});
 		}
 	}
diff --git a/packages/client/src/components/MkReactionsViewer.details.vue b/packages/client/src/components/MkReactionsViewer.details.vue
index fb8d74ad4b..29902a5075 100644
--- a/packages/client/src/components/MkReactionsViewer.details.vue
+++ b/packages/client/src/components/MkReactionsViewer.details.vue
@@ -56,6 +56,7 @@ function getReactionName(reaction: string): string {
 			display: block;
 			width: 60px;
 			font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
+			object-fit: contain;
 			margin: 0 auto;
 		}
 
diff --git a/packages/client/src/components/global/MkEmoji.vue b/packages/client/src/components/global/MkEmoji.vue
index 419850d007..ce1299a39f 100644
--- a/packages/client/src/components/global/MkEmoji.vue
+++ b/packages/client/src/components/global/MkEmoji.vue
@@ -9,7 +9,7 @@
 import { computed } from 'vue';
 import { CustomEmoji } from 'misskey-js/built/entities';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { char2filePath } from '@/scripts/twemoji-base';
+import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
 import { defaultStore } from '@/store';
 import { instance } from '@/instance';
 import { getEmojiName } from '@/scripts/emojilist';
@@ -22,14 +22,16 @@ const props = defineProps<{
 	isReaction?: boolean;
 }>();
 
+const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
+
 const isCustom = computed(() => props.emoji.startsWith(':'));
 const char = computed(() => isCustom.value ? undefined : props.emoji);
-const useOsNativeEmojis = computed(() => defaultStore.state.useOsNativeEmojis && !props.isReaction);
+const useOsNativeEmojis = computed(() => defaultStore.state.emojiStyle === 'native' && !props.isReaction);
 const ce = computed(() => props.customEmojis ?? instance.emojis ?? []);
 const customEmoji = computed(() => isCustom.value ? ce.value.find(x => x.name === props.emoji.substr(1, props.emoji.length - 2)) : undefined);
 const url = computed(() => {
 	if (char.value) {
-		return char2filePath(char.value);
+		return char2path(char.value);
 	} else {
 		const rawUrl = (customEmoji.value as CustomEmoji).url;
 		return defaultStore.state.disableShowingAnimatedImages
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index e4dbde0220..84d99d2fd7 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -48,10 +48,16 @@
 		<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 }}
-			<div><Mfm :key="useOsNativeEmojis" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
-		</FormSwitch>
+		<div class="_formBlock">
+			<FormRadios v-model="emojiStyle">
+				<template #label>{{ i18n.ts.emojiStyle }}</template>
+				<option value="native">{{ i18n.ts.native }}</option>
+				<option value="fluentEmoji">Fluent Emoji</option>
+				<option value="twemoji">Twemoji</option>
+			</FormRadios>
+			<div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
+		</div>
+
 		<FormSwitch v-model="disableDrawer" class="_formBlock">{{ i18n.ts.disableDrawer }}</FormSwitch>
 
 		<FormRadios v-model="fontSize" class="_formBlock">
@@ -129,7 +135,7 @@ const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEff
 const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
 const showGapBetweenNotesInTimeline = computed(defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'));
 const disableAnimatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm', v => !v, v => !v));
-const useOsNativeEmojis = computed(defaultStore.makeGetterSetter('useOsNativeEmojis'));
+const emojiStyle = computed(defaultStore.makeGetterSetter('emojiStyle'));
 const disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer'));
 const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
 const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
diff --git a/packages/client/src/pages/settings/preferences-backups.vue b/packages/client/src/pages/settings/preferences-backups.vue
index d2a2dc01ca..f427a170c4 100644
--- a/packages/client/src/pages/settings/preferences-backups.vue
+++ b/packages/client/src/pages/settings/preferences-backups.vue
@@ -63,7 +63,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'imageNewTab',
 	'disableShowingAnimatedImages',
 	'disablePagesScript',
-	'useOsNativeEmojis',
+	'emojiStyle',
 	'disableDrawer',
 	'useBlurEffectForModal',
 	'useBlurEffect',
diff --git a/packages/client/src/scripts/emoji-base.ts b/packages/client/src/scripts/emoji-base.ts
new file mode 100644
index 0000000000..3f05642d57
--- /dev/null
+++ b/packages/client/src/scripts/emoji-base.ts
@@ -0,0 +1,20 @@
+const twemojiSvgBase = '/twemoji';
+const fluentEmojiPngBase = '/fluent-emoji';
+
+export function char2twemojiFilePath(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);
+	const fileName = codes.join('-');
+	return `${twemojiSvgBase}/${fileName}.svg`;
+}
+
+export function char2fluentEmojiFilePath(char: string): string {
+	let codes = Array.from(char).map(x => x.codePointAt(0)?.toString(16));
+	// Fluent Emojiは国旗非対応 https://github.com/microsoft/fluentui-emoji/issues/25
+	if (codes[0]?.startsWith('1f1')) return char2twemojiFilePath(char);
+	if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');
+	codes = codes.filter(x => x && x.length);
+	const fileName = codes.map(x => x!.padStart(4, '0')).join('-');
+	return `${fluentEmojiPngBase}/${fileName}.png`;
+}
diff --git a/packages/client/src/scripts/twemoji-base.ts b/packages/client/src/scripts/twemoji-base.ts
deleted file mode 100644
index 638aae3284..0000000000
--- a/packages/client/src/scripts/twemoji-base.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-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/client/src/store.ts b/packages/client/src/store.ts
index d33a351725..1bedab5fad 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -174,9 +174,9 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
-	useOsNativeEmojis: {
+	emojiStyle: {
 		where: 'device',
-		default: false,
+		default: 'twemoji', // twemoji / fluentEmoji / native
 	},
 	disableDrawer: {
 		where: 'device',
-- 
cgit v1.2.3-freya


From b4e3d21d628602c90428ee0506de18fe7f7bf445 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 26 Dec 2022 08:15:30 +0000
Subject: fix icon

---
 packages/client/src/navbar.ts                 | 2 +-
 packages/client/src/pages/follow-requests.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/navbar.ts b/packages/client/src/navbar.ts
index 6b27b42cf7..31e6cd64a4 100644
--- a/packages/client/src/navbar.ts
+++ b/packages/client/src/navbar.ts
@@ -29,7 +29,7 @@ export const navbarItemDef = reactive({
 	},
 	followRequests: {
 		title: 'followRequests',
-		icon: 'ti ti-user-clock',
+		icon: 'ti ti-user-plus',
 		show: computed(() => $i != null && $i.isLocked),
 		indicated: computed(() => $i != null && $i.hasPendingReceivedFollowRequest),
 		to: '/my/follow-requests',
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index 2bef35746e..b20679ccc1 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -67,7 +67,7 @@ const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => ({
 	title: i18n.ts.followRequests,
-	icon: 'ti ti-user-clock',
+	icon: 'ti ti-user-plus',
 })));
 </script>
 
-- 
cgit v1.2.3-freya


From 1aed1c587e369bd9d505b336e4d45638433181ba Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 27 Dec 2022 09:47:54 +0900
Subject: enhance(client): heatmap for dashboard

---
 packages/client/package.json                       |   1 +
 .../client/src/pages/admin/overview.heatmap.vue    | 233 +++++++++++++++++++++
 packages/client/src/pages/admin/overview.vue       |  14 ++
 yarn.lock                                          |  10 +
 4 files changed, 258 insertions(+)
 create mode 100644 packages/client/src/pages/admin/overview.heatmap.vue

(limited to 'packages/client/src')

diff --git a/packages/client/package.json b/packages/client/package.json
index bebad2bf9c..0af8ffac0b 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -22,6 +22,7 @@
 		"browser-image-resizer": "git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey.3",
 		"chart.js": "4.1.1",
 		"chartjs-adapter-date-fns": "3.0.0",
+		"chartjs-chart-matrix": "^1.3.0",
 		"chartjs-plugin-gradient": "0.6.1",
 		"chartjs-plugin-zoom": "2.0.0",
 		"compare-versions": "5.0.1",
diff --git a/packages/client/src/pages/admin/overview.heatmap.vue b/packages/client/src/pages/admin/overview.heatmap.vue
new file mode 100644
index 0000000000..ce5b684ae8
--- /dev/null
+++ b/packages/client/src/pages/admin/overview.heatmap.vue
@@ -0,0 +1,233 @@
+<template>
+<div>
+	<MkLoading v-if="fetching"/>
+	<div v-show="!fetching" :class="$style.root" class="_panel">
+		<canvas ref="chartEl"></canvas>
+	</div>
+</div>
+</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 * as os from '@/os';
+import 'chartjs-adapter-date-fns';
+import { defaultStore } from '@/store';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
+import { chartVLine } from '@/scripts/chart-vline';
+
+Chart.register(
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+	MatrixController, MatrixElement,
+);
+
+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 now = new Date();
+let chartInstance: Chart = null;
+const chartLimit = 7 * 20;
+let fetching = $ref(true);
+
+const { handler: externalTooltipHandler } = useChartTooltip({
+	position: 'middle',
+});
+
+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) => {
+			const dt = getDate(i);
+			const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1).toString().padStart(2, '0')}-${dt.getDate().toString().padStart(2, '0')}`;
+			return {
+				x: iso,
+				y: dt.getDay(),
+				d: iso,
+				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)';
+
+	// フォントカラー
+	Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+
+	const color = '#3498db';
+
+	const max = Math.max(...raw.readWrite);
+
+	const marginEachCell = 4;
+
+	chartInstance = new Chart(chartEl, {
+		type: 'matrix',
+		data: {
+			datasets: [{
+				label: 'Read & Write',
+				data: format(raw.readWrite),
+				pointRadius: 0,
+				borderWidth: 0,
+				borderJoinStyle: 'round',
+				borderRadius: 4,
+				backgroundColor(c) {
+					const value = c.dataset.data[c.dataIndex].v;
+					const a = value / max;
+					return alpha(color, a);
+				},
+				fill: true,
+				width(c) {
+					const a = c.chart.chartArea ?? {};
+					// 20週間
+					return (a.right - a.left) / 20 - marginEachCell;
+				},
+				height(c) {
+					const a = c.chart.chartArea ?? {};
+					// 7日
+					return (a.bottom - a.top) / 7 - marginEachCell;
+				},
+			}],
+		},
+		options: {
+			aspectRatio: 2.8,
+			layout: {
+				padding: {
+					left: 8,
+					right: 0,
+					top: 0,
+					bottom: 0,
+				},
+			},
+			scales: {
+				x: {
+					type: 'time',
+					offset: true,
+					position: 'bottom',
+					time: {
+						unit: 'week',
+						round: 'week',
+						isoWeekday: 0,
+						displayFormats: {
+							week: 'MMM dd',
+						},
+					},
+					grid: {
+						display: false,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: true,
+						maxRotation: 0,
+						autoSkipPadding: 8,
+					},
+				},
+				y: {
+					offset: true,
+					reverse: true,
+					position: 'right',
+					grid: {
+						display: false,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						maxRotation: 0,
+						autoSkip: true,
+						padding: 1,
+						font: {
+							size: 9,
+						},
+						callback: (value, index, values) => ['', 'Mon', '', 'Wed', '', 'Fri', ''][value],
+					},
+				},
+			},
+			animation: false,
+			plugins: {
+				legend: {
+					display: false,
+				},
+				tooltip: {
+					enabled: false,
+					callbacks: {
+						title() {
+							return '';
+						},
+						label(context) {
+							const v = context.dataset.data[context.dataIndex];
+							return ['d: ' + v.d, 'v: ' + v.v.toFixed(2)];
+						},
+					},
+					//mode: 'index',
+					animation: {
+						duration: 0,
+					},
+					external: externalTooltipHandler,
+				},
+			},
+		},
+	});
+
+	fetching = false;
+}
+
+onMounted(async () => {
+	renderChart();
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 20px;
+}
+</style>
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index 67f612e6b5..cc5b9b7b68 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -5,34 +5,47 @@
 			<template #header>Stats</template>
 			<XStats/>
 		</MkFolder>
+
 		<MkFolder class="item">
 			<template #header>Active users</template>
 			<XActiveUsers/>
 		</MkFolder>
+
+		<MkFolder class="item">
+			<template #header>Heatmap</template>
+			<XHeatmap/>
+		</MkFolder>
+
 		<MkFolder class="item">
 			<template #header>Moderators</template>
 			<XModerators/>
 		</MkFolder>
+
 		<MkFolder class="item">
 			<template #header>Federation</template>
 			<XFederation/>
 		</MkFolder>
+		
 		<MkFolder class="item">
 			<template #header>Instances</template>
 			<XInstances/>
 		</MkFolder>
+
 		<MkFolder class="item">
 			<template #header>Ap requests</template>
 			<XApRequests/>
 		</MkFolder>
+
 		<MkFolder class="item">
 			<template #header>New users</template>
 			<XUsers/>
 		</MkFolder>
+
 		<MkFolder class="item">
 			<template #header>Deliver queue</template>
 			<XQueue domain="deliver"/>
 		</MkFolder>
+
 		<MkFolder class="item">
 			<template #header>Inbox queue</template>
 			<XQueue domain="inbox"/>
@@ -51,6 +64,7 @@ import XUsers from './overview.users.vue';
 import XActiveUsers from './overview.active-users.vue';
 import XStats from './overview.stats.vue';
 import XModerators from './overview.moderators.vue';
+import XHeatmap from './overview.heatmap.vue';
 import MkTagCloud from '@/components/MkTagCloud.vue';
 import { version, url } from '@/config';
 import * as os from '@/os';
diff --git a/yarn.lock b/yarn.lock
index 25cd2980e7..3fdc9145fe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4956,6 +4956,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chartjs-chart-matrix@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "chartjs-chart-matrix@npm:1.3.0"
+  peerDependencies:
+    chart.js: ">=3.0.0"
+  checksum: d29a08f3ffd888a1b6c45be2cbeb8987c145a74b07a713c84001860669b200931517746c475537dd0893c57a739115fa96a68d3a113013aff28f3bee4494d5cc
+  languageName: node
+  linkType: hard
+
 "chartjs-plugin-gradient@npm:0.6.1":
   version: 0.6.1
   resolution: "chartjs-plugin-gradient@npm:0.6.1"
@@ -5165,6 +5174,7 @@ __metadata:
     browser-image-resizer: "git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey.3"
     chart.js: 4.1.1
     chartjs-adapter-date-fns: 3.0.0
+    chartjs-chart-matrix: ^1.3.0
     chartjs-plugin-gradient: 0.6.1
     chartjs-plugin-zoom: 2.0.0
     compare-versions: 5.0.1
-- 
cgit v1.2.3-freya


From 40a16a47dedfa49b959bb718b43474b79ffa10e1 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 27 Dec 2022 09:51:40 +0900
Subject: :art:

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/admin/overview.heatmap.vue b/packages/client/src/pages/admin/overview.heatmap.vue
index ce5b684ae8..db70796c52 100644
--- a/packages/client/src/pages/admin/overview.heatmap.vue
+++ b/packages/client/src/pages/admin/overview.heatmap.vue
@@ -64,7 +64,8 @@ const alpha = (hex, a) => {
 const chartEl = $ref<HTMLCanvasElement>(null);
 const now = new Date();
 let chartInstance: Chart = null;
-const chartLimit = 7 * 20;
+const weeks = 25;
+const chartLimit = 7 * weeks;
 let fetching = $ref(true);
 
 const { handler: externalTooltipHandler } = useChartTooltip({
@@ -119,7 +120,7 @@ async function renderChart() {
 				pointRadius: 0,
 				borderWidth: 0,
 				borderJoinStyle: 'round',
-				borderRadius: 4,
+				borderRadius: 3,
 				backgroundColor(c) {
 					const value = c.dataset.data[c.dataIndex].v;
 					const a = value / max;
@@ -129,7 +130,7 @@ async function renderChart() {
 				width(c) {
 					const a = c.chart.chartArea ?? {};
 					// 20週間
-					return (a.right - a.left) / 20 - marginEachCell;
+					return (a.right - a.left) / weeks - marginEachCell;
 				},
 				height(c) {
 					const a = c.chart.chartArea ?? {};
@@ -139,7 +140,7 @@ async function renderChart() {
 			}],
 		},
 		options: {
-			aspectRatio: 2.8,
+			aspectRatio: 3.2,
 			layout: {
 				padding: {
 					left: 8,
-- 
cgit v1.2.3-freya


From 3d9f58b18890235783e44ac1c93f24812ef2e768 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 27 Dec 2022 11:23:20 +0900
Subject: :art:

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/admin/overview.heatmap.vue b/packages/client/src/pages/admin/overview.heatmap.vue
index db70796c52..0bf1fa0a42 100644
--- a/packages/client/src/pages/admin/overview.heatmap.vue
+++ b/packages/client/src/pages/admin/overview.heatmap.vue
@@ -201,12 +201,13 @@ async function renderChart() {
 				tooltip: {
 					enabled: false,
 					callbacks: {
-						title() {
-							return '';
+						title(context) {
+							const v = context[0].dataset.data[context[0].dataIndex];
+							return v.d;
 						},
 						label(context) {
 							const v = context.dataset.data[context.dataIndex];
-							return ['d: ' + v.d, 'v: ' + v.v.toFixed(2)];
+							return ['Active: ' + v.v];
 						},
 					},
 					//mode: 'index',
-- 
cgit v1.2.3-freya


From 5ebcdb4f317a3705db606d74035b613a7f41a2b8 Mon Sep 17 00:00:00 2001
From: Sam Smucny <smucny.sam@gmail.com>
Date: Mon, 26 Dec 2022 22:14:42 -0500
Subject: enhance(client): Add link to copy RSS feed in user profile menu
 (#9419)

* add link to RSS feed

* update changelog and locale file

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 CHANGELOG.md                                 | 1 +
 locales/ja-JP.yml                            | 1 +
 packages/client/src/scripts/get-user-menu.ts | 6 ++++++
 3 files changed, 8 insertions(+)

(limited to 'packages/client/src')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f7b939d621..438d389a4b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,6 +34,7 @@ You should also include the user name that made the change.
 - Server: delete outdated notes of antenna regularly to improve db performance @syuilo
 - Client: use tabler-icons instead of fontawesome to better design @syuilo
 - Client: Add new gabber kick sounds (thanks for noizenecio)
+- Client: Add link to user RSS feed in profile menu @ssmucny
 - Client: Compress non-animated PNG files @saschanaz
 - Client: Youtube window player @sim1222
 - Client: enhance dashboard of control panel @syuilo
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 8add6348df..2c048fbe72 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -49,6 +49,7 @@ deleteAndEdit: "削除して編集"
 deleteAndEditConfirm: "このノートを削除してもう一度編集しますか？このノートへのリアクション、Renote、返信も全て削除されます。"
 addToList: "リストに追加"
 sendMessage: "メッセージを送信"
+copyRSS: "RSSをコピー"
 copyUsername: "ユーザー名をコピー"
 searchUser: "ユーザーを検索"
 reply: "返信"
diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts
index 23f0e11f5b..2faacffdfc 100644
--- a/packages/client/src/scripts/get-user-menu.ts
+++ b/packages/client/src/scripts/get-user-menu.ts
@@ -158,6 +158,12 @@ export function getUserMenu(user, router: Router = mainRouter) {
 		action: () => {
 			copyToClipboard(`@${user.username}@${user.host || host}`);
 		},
+	}, {
+		icon: 'ti ti-rss',
+		text: i18n.ts.copyRSS,
+		action: () => {
+			copyToClipboard(`${user.host || host}/@${user.username}.atom`);
+		}
 	}, {
 		icon: 'ti ti-info-circle',
 		text: i18n.ts.info,
-- 
cgit v1.2.3-freya


From 2353b5f55334aa83e2051c334606ac518c579c05 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 27 Dec 2022 12:30:34 +0900
Subject: enhance(client): make heatmap available on about page

---
 .../client/src/components/MkActiveUsersHeatmap.vue | 236 +++++++++++++++++++++
 packages/client/src/components/MkInstanceStats.vue |   9 +
 .../client/src/pages/admin/overview.heatmap.vue    | 226 +-------------------
 3 files changed, 248 insertions(+), 223 deletions(-)
 create mode 100644 packages/client/src/components/MkActiveUsersHeatmap.vue

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkActiveUsersHeatmap.vue b/packages/client/src/components/MkActiveUsersHeatmap.vue
new file mode 100644
index 0000000000..02b2eeeb36
--- /dev/null
+++ b/packages/client/src/components/MkActiveUsersHeatmap.vue
@@ -0,0 +1,236 @@
+<template>
+<div ref="rootEl">
+	<MkLoading v-if="fetching"/>
+	<div v-else>
+		<canvas ref="chartEl"></canvas>
+	</div>
+</div>
+</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 * as os from '@/os';
+import 'chartjs-adapter-date-fns';
+import { defaultStore } from '@/store';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
+import { chartVLine } from '@/scripts/chart-vline';
+
+Chart.register(
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+	MatrixController, MatrixElement,
+);
+
+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 rootEl = $ref<HTMLDivElement>(null);
+const chartEl = $ref<HTMLCanvasElement>(null);
+const now = new Date();
+let chartInstance: Chart = null;
+let fetching = $ref(true);
+
+const { handler: externalTooltipHandler } = useChartTooltip({
+	position: 'middle',
+});
+
+async function renderChart() {
+	if (chartInstance) {
+		chartInstance.destroy();
+	}
+
+	const wide = rootEl.offsetWidth > 700;
+	const narrow = rootEl.offsetWidth < 400;
+
+	const weeks = wide ? 50 : narrow ? 10 : 25;
+	const chartLimit = 7 * weeks;
+
+	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) => {
+			const dt = getDate(i);
+			const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1).toString().padStart(2, '0')}-${dt.getDate().toString().padStart(2, '0')}`;
+			return {
+				x: iso,
+				y: dt.getDay(),
+				d: iso,
+				v,
+			};
+		});
+	};
+
+	const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' });
+
+	fetching = false;
+
+	await nextTick();
+
+	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 color = '#3498db';
+
+	const max = Math.max(...raw.readWrite);
+
+	const marginEachCell = 4;
+
+	chartInstance = new Chart(chartEl, {
+		type: 'matrix',
+		data: {
+			datasets: [{
+				label: 'Read & Write',
+				data: format(raw.readWrite),
+				pointRadius: 0,
+				borderWidth: 0,
+				borderJoinStyle: 'round',
+				borderRadius: 3,
+				backgroundColor(c) {
+					const value = c.dataset.data[c.dataIndex].v;
+					const a = value / max;
+					return alpha(color, a);
+				},
+				fill: true,
+				width(c) {
+					const a = c.chart.chartArea ?? {};
+					// 20週間
+					return (a.right - a.left) / weeks - marginEachCell;
+				},
+				height(c) {
+					const a = c.chart.chartArea ?? {};
+					// 7日
+					return (a.bottom - a.top) / 7 - marginEachCell;
+				},
+			}],
+		},
+		options: {
+			aspectRatio: wide ? 6 : narrow ? 1.8 : 3.2,
+			layout: {
+				padding: {
+					left: 8,
+					right: 0,
+					top: 0,
+					bottom: 0,
+				},
+			},
+			scales: {
+				x: {
+					type: 'time',
+					offset: true,
+					position: 'bottom',
+					time: {
+						unit: 'week',
+						round: 'week',
+						isoWeekday: 0,
+						displayFormats: {
+							week: 'MMM dd',
+						},
+					},
+					grid: {
+						display: false,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: true,
+						maxRotation: 0,
+						autoSkipPadding: 8,
+					},
+				},
+				y: {
+					offset: true,
+					reverse: true,
+					position: 'right',
+					grid: {
+						display: false,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						maxRotation: 0,
+						autoSkip: true,
+						padding: 1,
+						font: {
+							size: 9,
+						},
+						callback: (value, index, values) => ['', 'Mon', '', 'Wed', '', 'Fri', ''][value],
+					},
+				},
+			},
+			animation: false,
+			plugins: {
+				legend: {
+					display: false,
+				},
+				tooltip: {
+					enabled: false,
+					callbacks: {
+						title(context) {
+							const v = context[0].dataset.data[context[0].dataIndex];
+							return v.d;
+						},
+						label(context) {
+							const v = context.dataset.data[context.dataIndex];
+							return ['Active: ' + v.v];
+						},
+					},
+					//mode: 'index',
+					animation: {
+						duration: 0,
+					},
+					external: externalTooltipHandler,
+				},
+			},
+		},
+	});
+}
+
+onMounted(async () => {
+	renderChart();
+});
+</script>
diff --git a/packages/client/src/components/MkInstanceStats.vue b/packages/client/src/components/MkInstanceStats.vue
index 5f5f64b0c2..7199c33c35 100644
--- a/packages/client/src/components/MkInstanceStats.vue
+++ b/packages/client/src/components/MkInstanceStats.vue
@@ -34,6 +34,9 @@
 			</div>
 		</div>
 	</div>
+	<div class="heatmap _panel">
+		<MkActiveUsersHeatmap/>
+	</div>
 	<div class="subpub">
 		<div class="sub">
 			<div class="title">Sub</div>
@@ -72,6 +75,7 @@ import MkChart from '@/components/MkChart.vue';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
+import MkActiveUsersHeatmap from '@/components/MkActiveUsersHeatmap.vue';
 
 Chart.register(
 	ArcElement,
@@ -196,6 +200,11 @@ onMounted(() => {
 		}
 	}
 
+	> .heatmap {
+		padding: 16px;
+		margin-bottom: 16px;
+	}
+
 	> .subpub {
 		display: flex;
 		gap: 16px;
diff --git a/packages/client/src/pages/admin/overview.heatmap.vue b/packages/client/src/pages/admin/overview.heatmap.vue
index 0bf1fa0a42..16d1c83b9f 100644
--- a/packages/client/src/pages/admin/overview.heatmap.vue
+++ b/packages/client/src/pages/admin/overview.heatmap.vue
@@ -1,231 +1,11 @@
 <template>
-<div>
-	<MkLoading v-if="fetching"/>
-	<div v-show="!fetching" :class="$style.root" class="_panel">
-		<canvas ref="chartEl"></canvas>
-	</div>
+<div class="_panel" :class="$style.root">
+	<MkActiveUsersHeatmap/>
 </div>
 </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 * as os from '@/os';
-import 'chartjs-adapter-date-fns';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
-import { chartVLine } from '@/scripts/chart-vline';
-
-Chart.register(
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-	MatrixController, MatrixElement,
-);
-
-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 now = new Date();
-let chartInstance: Chart = null;
-const weeks = 25;
-const chartLimit = 7 * weeks;
-let fetching = $ref(true);
-
-const { handler: externalTooltipHandler } = useChartTooltip({
-	position: 'middle',
-});
-
-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) => {
-			const dt = getDate(i);
-			const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1).toString().padStart(2, '0')}-${dt.getDate().toString().padStart(2, '0')}`;
-			return {
-				x: iso,
-				y: dt.getDay(),
-				d: iso,
-				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)';
-
-	// フォントカラー
-	Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
-
-	const color = '#3498db';
-
-	const max = Math.max(...raw.readWrite);
-
-	const marginEachCell = 4;
-
-	chartInstance = new Chart(chartEl, {
-		type: 'matrix',
-		data: {
-			datasets: [{
-				label: 'Read & Write',
-				data: format(raw.readWrite),
-				pointRadius: 0,
-				borderWidth: 0,
-				borderJoinStyle: 'round',
-				borderRadius: 3,
-				backgroundColor(c) {
-					const value = c.dataset.data[c.dataIndex].v;
-					const a = value / max;
-					return alpha(color, a);
-				},
-				fill: true,
-				width(c) {
-					const a = c.chart.chartArea ?? {};
-					// 20週間
-					return (a.right - a.left) / weeks - marginEachCell;
-				},
-				height(c) {
-					const a = c.chart.chartArea ?? {};
-					// 7日
-					return (a.bottom - a.top) / 7 - marginEachCell;
-				},
-			}],
-		},
-		options: {
-			aspectRatio: 3.2,
-			layout: {
-				padding: {
-					left: 8,
-					right: 0,
-					top: 0,
-					bottom: 0,
-				},
-			},
-			scales: {
-				x: {
-					type: 'time',
-					offset: true,
-					position: 'bottom',
-					time: {
-						unit: 'week',
-						round: 'week',
-						isoWeekday: 0,
-						displayFormats: {
-							week: 'MMM dd',
-						},
-					},
-					grid: {
-						display: false,
-						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
-					},
-					ticks: {
-						display: true,
-						maxRotation: 0,
-						autoSkipPadding: 8,
-					},
-				},
-				y: {
-					offset: true,
-					reverse: true,
-					position: 'right',
-					grid: {
-						display: false,
-						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
-					},
-					ticks: {
-						maxRotation: 0,
-						autoSkip: true,
-						padding: 1,
-						font: {
-							size: 9,
-						},
-						callback: (value, index, values) => ['', 'Mon', '', 'Wed', '', 'Fri', ''][value],
-					},
-				},
-			},
-			animation: false,
-			plugins: {
-				legend: {
-					display: false,
-				},
-				tooltip: {
-					enabled: false,
-					callbacks: {
-						title(context) {
-							const v = context[0].dataset.data[context[0].dataIndex];
-							return v.d;
-						},
-						label(context) {
-							const v = context.dataset.data[context.dataIndex];
-							return ['Active: ' + v.v];
-						},
-					},
-					//mode: 'index',
-					animation: {
-						duration: 0,
-					},
-					external: externalTooltipHandler,
-				},
-			},
-		},
-	});
-
-	fetching = false;
-}
-
-onMounted(async () => {
-	renderChart();
-});
+import MkActiveUsersHeatmap from '@/components/MkActiveUsersHeatmap.vue';
 </script>
 
 <style lang="scss" module>
-- 
cgit v1.2.3-freya


From c213e28ad76ca7ff847ec7fd918e799fb5e18998 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 27 Dec 2022 12:43:21 +0900
Subject: :art:

---
 packages/client/src/components/MkInstanceStats.vue | 126 ++++++++++++---------
 1 file changed, 74 insertions(+), 52 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkInstanceStats.vue b/packages/client/src/components/MkInstanceStats.vue
index 7199c33c35..41f6f9ffd5 100644
--- a/packages/client/src/components/MkInstanceStats.vue
+++ b/packages/client/src/components/MkInstanceStats.vue
@@ -1,8 +1,9 @@
 <template>
-<div class="zbcjwnqg">
-	<div class="main">
-		<div class="body">
-			<div class="selects" style="display: flex;">
+<div :class="$style.root">
+	<MkFolder class="item">
+		<template #header>Chart</template>
+		<div :class="$style.chart">
+			<div class="selects">
 				<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
 					<optgroup :label="i18n.ts.federation">
 						<option value="federation">{{ i18n.ts._charts.federation }}</option>
@@ -29,24 +30,34 @@
 					<option value="day">{{ i18n.ts.perDay }}</option>
 				</MkSelect>
 			</div>
-			<div class="chart">
+			<div class="chart _panel">
 				<MkChart :src="chartSrc" :span="chartSpan" :limit="chartLimit" :detailed="detailed"></MkChart>
 			</div>
 		</div>
-	</div>
-	<div class="heatmap _panel">
-		<MkActiveUsersHeatmap/>
-	</div>
-	<div class="subpub">
-		<div class="sub">
-			<div class="title">Sub</div>
-			<canvas ref="subDoughnutEl"></canvas>
+	</MkFolder>
+
+	<MkFolder class="item">
+		<template #header>Active users heatmap</template>
+		<div class="_panel" :class="$style.heatmap">
+			<MkActiveUsersHeatmap/>
 		</div>
-		<div class="pub">
-			<div class="title">Pub</div>
-			<canvas ref="pubDoughnutEl"></canvas>
+	</MkFolder>
+
+	<MkFolder class="item">
+		<template #header>Federation</template>
+		<div :class="$style.federation">
+			<div class="pies">
+				<div class="sub">
+					<div class="title">Sub</div>
+					<canvas ref="subDoughnutEl"></canvas>
+				</div>
+				<div class="pub">
+					<div class="title">Pub</div>
+					<canvas ref="pubDoughnutEl"></canvas>
+				</div>
+			</div>
 		</div>
-	</div>
+	</MkFolder>
 </div>
 </template>
 
@@ -76,6 +87,7 @@ import { useChartTooltip } from '@/scripts/use-chart-tooltip';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import MkActiveUsersHeatmap from '@/components/MkActiveUsersHeatmap.vue';
+import MkFolder from '@/components/MkFolder.vue';
 
 Chart.register(
 	ArcElement,
@@ -185,48 +197,58 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.zbcjwnqg {
-	> .main {
-		background: var(--panel);
-		border-radius: var(--radius);
-		padding: 24px;
-		margin-bottom: 16px;
-
-		> .body {
-			> .chart {
-				padding: 8px 0 0 0;
-			}
+<style lang="scss" module>
+.root {
+	&:global {
+		> .item {
+			margin-bottom: 16px;
 		}
 	}
+}
 
-	> .heatmap {
-		padding: 16px;
-		margin-bottom: 16px;
+.chart {
+	&:global {
+		> .selects {
+			display: flex;
+			margin-bottom: 12px;
+		}
+
+		> .chart {
+			padding: 16px;
+		}
 	}
+}
+
+.heatmap {
+	padding: 16px;
+	margin-bottom: 16px;
+}
 
-	> .subpub {
-		display: flex;
-		gap: 16px;
-
-		> .sub, > .pub {
-			flex: 1;
-			min-width: 0;
-			position: relative;
-			background: var(--panel);
-			border-radius: var(--radius);
-			padding: 24px;
-			max-height: 300px;
-
-			> .title {
-				position: absolute;
-				top: 24px;
-				left: 24px;
+.federation {
+	&:global {
+		> .pies {
+			display: flex;
+			gap: 16px;
+
+			> .sub, > .pub {
+				flex: 1;
+				min-width: 0;
+				position: relative;
+				background: var(--panel);
+				border-radius: var(--radius);
+				padding: 24px;
+				max-height: 300px;
+
+				> .title {
+					position: absolute;
+					top: 24px;
+					left: 24px;
+				}
 			}
-		}
 
-		@media (max-width: 600px) {
-			flex-direction: column;
+			@media (max-width: 600px) {
+				flex-direction: column;
+			}
 		}
 	}
 }
-- 
cgit v1.2.3-freya


From 6c674034fa7d04c5d4cfb0df7f4b2b74d730f88e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 27 Dec 2022 14:16:45 +0900
Subject: :art:

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

(limited to 'packages/client/src')

diff --git a/packages/client/src/components/MkReactionTooltip.vue b/packages/client/src/components/MkReactionTooltip.vue
index 7777f493af..310d5954fc 100644
--- a/packages/client/src/components/MkReactionTooltip.vue
+++ b/packages/client/src/components/MkReactionTooltip.vue
@@ -33,6 +33,7 @@ const emit = defineEmits<{
 		width: 60px;
 		font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
 		margin: 0 auto;
+		object-fit: contain;
 	}
 
 	> .name {
-- 
cgit v1.2.3-freya


From 574c57eda7882a0be9d51ddbd9def0c934d71622 Mon Sep 17 00:00:00 2001
From: Nya Candy <dev@candinya.com>
Date: Tue, 27 Dec 2022 13:19:43 +0800
Subject: fix(client): userpage ui (#9179)

* fix(unverified): clip pages ui

* fix(unverified): user page width

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 packages/client/src/pages/user/clips.vue     | 31 +++++++++++++++++++++-------
 packages/client/src/pages/user/gallery.vue   |  4 ++--
 packages/client/src/pages/user/pages.vue     |  4 ++--
 packages/client/src/pages/user/reactions.vue |  4 ++--
 4 files changed, 29 insertions(+), 14 deletions(-)

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/user/clips.vue b/packages/client/src/pages/user/clips.vue
index 50a5d4b818..8c71aacb0c 100644
--- a/packages/client/src/pages/user/clips.vue
+++ b/packages/client/src/pages/user/clips.vue
@@ -1,12 +1,14 @@
 <template>
-<div>
-	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-		<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
-			<b>{{ item.name }}</b>
-			<div v-if="item.description" class="description">{{ item.description }}</div>
-		</MkA>
-	</MkPagination>
-</div>
+<MkSpacer :content-max="700">
+	<div class="pages-user-clips">
+		<MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="list">
+			<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
+				<b>{{ item.name }}</b>
+				<div v-if="item.description" class="description">{{ item.description }}</div>
+			</MkA>
+		</MkPagination>
+	</div>
+</MkSpacer>
 </template>
 
 <script lang="ts" setup>
@@ -28,5 +30,18 @@ const pagination = {
 </script>
 
 <style lang="scss" scoped>
+.pages-user-clips {
+	> .list {
+		> .item {
+			display: block;
+			padding: 16px;
 
+			> .description {
+				margin-top: 8px;
+				padding-top: 8px;
+				border-top: solid 0.5px var(--divider);
+			}
+		}
+	}
+}
 </style>
diff --git a/packages/client/src/pages/user/gallery.vue b/packages/client/src/pages/user/gallery.vue
index 3b6768e64a..b80e83fb11 100644
--- a/packages/client/src/pages/user/gallery.vue
+++ b/packages/client/src/pages/user/gallery.vue
@@ -1,11 +1,11 @@
 <template>
-<div>
+<MkSpacer :content-max="700">
 	<MkPagination v-slot="{items}" :pagination="pagination">
 		<div class="jrnovfpt">
 			<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
 		</div>
 	</MkPagination>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/pages/user/pages.vue b/packages/client/src/pages/user/pages.vue
index bd16c46681..7833d6c42c 100644
--- a/packages/client/src/pages/user/pages.vue
+++ b/packages/client/src/pages/user/pages.vue
@@ -1,9 +1,9 @@
 <template>
-<div>
+<MkSpacer :content-max="700">
 	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
 		<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
 	</MkPagination>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
index 7e84e100a4..ab3df34301 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -1,5 +1,5 @@
 <template>
-<div>
+<MkSpacer :content-max="700">
 	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
 		<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb">
 			<div class="header">
@@ -10,7 +10,7 @@
 			<MkNote :key="item.id" :note="item.note"/>
 		</div>
 	</MkPagination>
-</div>
+</MkSpacer>
 </template>
 
 <script lang="ts" setup>
-- 
cgit v1.2.3-freya


From 88dca1400e17432d80d2703eb751a0d806f43bc9 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 27 Dec 2022 14:25:20 +0900
Subject: :art:

---
 locales/ja-JP.yml                              |  1 +
 packages/client/src/pages/settings/profile.vue | 11 +++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

(limited to 'packages/client/src')

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 2c048fbe72..fe30130631 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -717,6 +717,7 @@ accentColor: "アクセント"
 textColor: "文字"
 saveAs: "名前を付けて保存"
 advanced: "高度"
+advancedSettings: "高度な設定"
 value: "値"
 createdAt: "作成日時"
 updatedAt: "更新日時"
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index 868068e010..14eeeaaa11 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -53,9 +53,16 @@
 		<template #caption>{{ i18n.ts._profile.metadataDescription }}</template>
 	</FormSlot>
 
-	<FormSwitch v-model="profile.isCat" class="_formBlock">{{ i18n.ts.flagAsCat }}<template #caption>{{ i18n.ts.flagAsCatDescription }}</template></FormSwitch>
+	<FormFolder>
+		<template #label>{{ i18n.ts.advancedSettings }}</template>
+
+		<div class="_formRoot">
+			<FormSwitch v-model="profile.isCat" class="_formBlock">{{ i18n.ts.flagAsCat }}<template #caption>{{ i18n.ts.flagAsCatDescription }}</template></FormSwitch>
+			<FormSwitch v-model="profile.isBot" class="_formBlock">{{ i18n.ts.flagAsBot }}<template #caption>{{ i18n.ts.flagAsBotDescription }}</template></FormSwitch>
+		</div>
+	</FormFolder>
+
 	<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock">{{ i18n.ts.flagShowTimelineReplies }}<template #caption>{{ i18n.ts.flagShowTimelineRepliesDescription }} {{ i18n.ts.reflectMayTakeTime }}</template></FormSwitch>
-	<FormSwitch v-model="profile.isBot" class="_formBlock">{{ i18n.ts.flagAsBot }}<template #caption>{{ i18n.ts.flagAsBotDescription }}</template></FormSwitch>
 </div>
 </template>
 
-- 
cgit v1.2.3-freya


From db6fff6f2659e7f8dd82d3e56010ff3e08eea184 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 27 Dec 2022 14:31:24 +0900
Subject: wip: retention for dashboard

---
 .../client/src/pages/admin/overview.retention.vue  | 49 ++++++++++++++++++++++
 packages/client/src/pages/admin/overview.vue       |  6 +++
 2 files changed, 55 insertions(+)
 create mode 100644 packages/client/src/pages/admin/overview.retention.vue

(limited to 'packages/client/src')

diff --git a/packages/client/src/pages/admin/overview.retention.vue b/packages/client/src/pages/admin/overview.retention.vue
new file mode 100644
index 0000000000..feac6f8118
--- /dev/null
+++ b/packages/client/src/pages/admin/overview.retention.vue
@@ -0,0 +1,49 @@
+<template>
+<div>
+	<MkLoading v-if="fetching"/>
+	<div v-else :class="$style.root">
+		<div v-for="row in retention" class="row">
+			<div v-for="value in getValues(row)" v-tooltip="value.percentage" class="cell">
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import * as os from '@/os';
+import number from '@/filters/number';
+import { i18n } from '@/i18n';
+
+let retention: any = $ref(null);
+let fetching = $ref(true);
+
+function getValues(row) {
+	const data = [];
+	for (const key in row.data) {
+		data.push({
+			date: new Date(key),
+			value: number(row.data[key]),
+			percentage: `${Math.ceil(row.data[key] / row.users) * 100}%`,
+		});
+	}
+	data.sort((a, b) => a.date > b.date);
+	return data;
+}
+
+onMounted(async () => {
+	retention = await os.apiGet('retention', {});
+
+	fetching = false;
+});
+</script>
+
+<style lang="scss" module>
+.root {
+
+	&:global {
+
+	}
+}
+</style>
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index cc5b9b7b68..d656e55200 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -16,6 +16,11 @@
 			<XHeatmap/>
 		</MkFolder>
 
+		<MkFolder class="item">
+			<template #header>Retention rate</template>
+			<XRetention/>
+		</MkFolder>
+
 		<MkFolder class="item">
 			<template #header>Moderators</template>
 			<XModerators/>
@@ -63,6 +68,7 @@ import XApRequests from './overview.ap-requests.vue';
 import XUsers from './overview.users.vue';
 import XActiveUsers from './overview.active-users.vue';
 import XStats from './overview.stats.vue';
+import XRetention from './overview.retention.vue';
 import XModerators from './overview.moderators.vue';
 import XHeatmap from './overview.heatmap.vue';
 import MkTagCloud from '@/components/MkTagCloud.vue';
-- 
cgit v1.2.3-freya


From 9384f5399da39e53855beb8e7f8ded1aa56bf72e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 27 Dec 2022 14:36:33 +0900
Subject: rename: client -> frontend

---
 .github/dependabot.yml                             |    2 +-
 .github/labeler.yml                                |    2 +-
 .github/workflows/lint.yml                         |    2 +-
 .gitignore                                         |    2 +-
 Dockerfile                                         |    4 +-
 gulpfile.js                                        |   16 +-
 package.json                                       |    2 +-
 .../backend/src/server/web/ClientServerService.ts  |    4 +-
 packages/client/.eslintrc.js                       |   89 -
 packages/client/.vscode/settings.json              |   11 -
 packages/client/@types/global.d.ts                 |   10 -
 packages/client/@types/theme.d.ts                  |    7 -
 packages/client/@types/vue.d.ts                    |   16 -
 packages/client/assets/about-icon.png              |  Bin 20528 -> 0 bytes
 packages/client/assets/dummy.png                   |  Bin 6285 -> 0 bytes
 packages/client/assets/fedi.jpg                    |  Bin 77752 -> 0 bytes
 packages/client/assets/label-red.svg               |    6 -
 packages/client/assets/label.svg                   |    6 -
 packages/client/assets/misskey.svg                 |    7 -
 packages/client/assets/remove.png                  |  Bin 424 -> 0 bytes
 packages/client/assets/sounds/aisha/1.mp3          |  Bin 34480 -> 0 bytes
 packages/client/assets/sounds/aisha/2.mp3          |  Bin 24031 -> 0 bytes
 packages/client/assets/sounds/aisha/3.mp3          |  Bin 29256 -> 0 bytes
 .../client/assets/sounds/noizenecio/kick_gaba1.mp3 |  Bin 18866 -> 0 bytes
 .../client/assets/sounds/noizenecio/kick_gaba2.mp3 |  Bin 27144 -> 0 bytes
 .../client/assets/sounds/noizenecio/kick_gaba3.mp3 |  Bin 19853 -> 0 bytes
 .../client/assets/sounds/noizenecio/kick_gaba4.mp3 |  Bin 19853 -> 0 bytes
 .../client/assets/sounds/noizenecio/kick_gaba5.mp3 |  Bin 19853 -> 0 bytes
 .../client/assets/sounds/noizenecio/kick_gaba6.mp3 |  Bin 19853 -> 0 bytes
 .../client/assets/sounds/noizenecio/kick_gaba7.mp3 |  Bin 19853 -> 0 bytes
 packages/client/assets/sounds/syuilo/down.mp3      |  Bin 18240 -> 0 bytes
 packages/client/assets/sounds/syuilo/kick.mp3      |  Bin 15672 -> 0 bytes
 .../assets/sounds/syuilo/pirori-square-wet.mp3     |  Bin 139200 -> 0 bytes
 .../client/assets/sounds/syuilo/pirori-wet.mp3     |  Bin 139200 -> 0 bytes
 packages/client/assets/sounds/syuilo/pirori.mp3    |  Bin 19200 -> 0 bytes
 packages/client/assets/sounds/syuilo/poi1.mp3      |  Bin 18240 -> 0 bytes
 packages/client/assets/sounds/syuilo/poi2.mp3      |  Bin 18240 -> 0 bytes
 packages/client/assets/sounds/syuilo/pope1.mp3     |  Bin 18240 -> 0 bytes
 packages/client/assets/sounds/syuilo/pope2.mp3     |  Bin 18240 -> 0 bytes
 packages/client/assets/sounds/syuilo/popo.mp3      |  Bin 18240 -> 0 bytes
 .../client/assets/sounds/syuilo/queue-jammed.mp3   |  Bin 351466 -> 0 bytes
 packages/client/assets/sounds/syuilo/reverved.mp3  |  Bin 276480 -> 0 bytes
 packages/client/assets/sounds/syuilo/ryukyu.mp3    |  Bin 139200 -> 0 bytes
 packages/client/assets/sounds/syuilo/snare.mp3     |  Bin 26121 -> 0 bytes
 .../client/assets/sounds/syuilo/square-pico.mp3    |  Bin 19200 -> 0 bytes
 packages/client/assets/sounds/syuilo/triple.mp3    |  Bin 18240 -> 0 bytes
 packages/client/assets/sounds/syuilo/up.mp3        |  Bin 18240 -> 0 bytes
 packages/client/assets/sounds/syuilo/waon.mp3      |  Bin 18240 -> 0 bytes
 packages/client/assets/tagcanvas.min.js            |   21 -
 packages/client/assets/unread.svg                  |    7 -
 packages/client/package.json                       |   94 --
 packages/client/src/account.ts                     |  238 ---
 packages/client/src/components/MkAbuseReport.vue   |  109 --
 .../client/src/components/MkAbuseReportWindow.vue  |   65 -
 .../client/src/components/MkActiveUsersHeatmap.vue |  236 ---
 packages/client/src/components/MkAnalogClock.vue   |  225 ---
 packages/client/src/components/MkAutocomplete.vue  |  476 ------
 packages/client/src/components/MkAvatars.vue       |   24 -
 packages/client/src/components/MkButton.vue        |  227 ---
 packages/client/src/components/MkCaptcha.vue       |  118 --
 .../src/components/MkChannelFollowButton.vue       |  129 --
 .../client/src/components/MkChannelPreview.vue     |  154 --
 packages/client/src/components/MkChart.vue         |  859 ----------
 packages/client/src/components/MkChartTooltip.vue  |   53 -
 packages/client/src/components/MkCode.core.vue     |   20 -
 packages/client/src/components/MkCode.vue          |   15 -
 packages/client/src/components/MkContainer.vue     |  275 ---
 packages/client/src/components/MkContextMenu.vue   |   85 -
 packages/client/src/components/MkCropperDialog.vue |  174 --
 packages/client/src/components/MkCwButton.vue      |   62 -
 .../client/src/components/MkDateSeparatedList.vue  |  189 ---
 packages/client/src/components/MkDialog.vue        |  208 ---
 packages/client/src/components/MkDigitalClock.vue  |   77 -
 packages/client/src/components/MkDrive.file.vue    |  334 ----
 packages/client/src/components/MkDrive.folder.vue  |  330 ----
 .../client/src/components/MkDrive.navFolder.vue    |  147 --
 packages/client/src/components/MkDrive.vue         |  801 ---------
 .../client/src/components/MkDriveFileThumbnail.vue |   80 -
 .../client/src/components/MkDriveSelectDialog.vue  |   58 -
 packages/client/src/components/MkDriveWindow.vue   |   30 -
 .../src/components/MkEmojiPicker.section.vue       |   36 -
 packages/client/src/components/MkEmojiPicker.vue   |  569 -------
 .../client/src/components/MkEmojiPickerDialog.vue  |   73 -
 .../client/src/components/MkEmojiPickerWindow.vue  |  180 --
 .../client/src/components/MkFeaturedPhotos.vue     |   22 -
 .../src/components/MkFileCaptionEditWindow.vue     |  175 --
 .../client/src/components/MkFileListForAdmin.vue   |  117 --
 packages/client/src/components/MkFolder.vue        |  159 --
 packages/client/src/components/MkFollowButton.vue  |  187 --
 .../client/src/components/MkForgotPassword.vue     |   80 -
 packages/client/src/components/MkFormDialog.vue    |  127 --
 packages/client/src/components/MkFormula.vue       |   24 -
 packages/client/src/components/MkFormulaCore.vue   |   34 -
 .../client/src/components/MkGalleryPostPreview.vue |  115 --
 packages/client/src/components/MkGoogle.vue        |   51 -
 packages/client/src/components/MkImageViewer.vue   |   77 -
 .../client/src/components/MkImgWithBlurhash.vue    |   76 -
 packages/client/src/components/MkInfo.vue          |   34 -
 .../client/src/components/MkInstanceCardMini.vue   |  105 --
 packages/client/src/components/MkInstanceStats.vue |  255 ---
 .../client/src/components/MkInstanceTicker.vue     |   80 -
 packages/client/src/components/MkKeyValue.vue      |   58 -
 packages/client/src/components/MkLaunchPad.vue     |  138 --
 packages/client/src/components/MkLink.vue          |   47 -
 packages/client/src/components/MkMarquee.vue       |  106 --
 packages/client/src/components/MkMediaBanner.vue   |  102 --
 packages/client/src/components/MkMediaImage.vue    |  130 --
 packages/client/src/components/MkMediaList.vue     |  189 ---
 packages/client/src/components/MkMediaVideo.vue    |   88 -
 packages/client/src/components/MkMention.vue       |   66 -
 packages/client/src/components/MkMenu.child.vue    |   65 -
 packages/client/src/components/MkMenu.vue          |  367 ----
 packages/client/src/components/MkMiniChart.vue     |   73 -
 packages/client/src/components/MkModal.vue         |  406 -----
 .../client/src/components/MkModalPageWindow.vue    |  181 --
 packages/client/src/components/MkModalWindow.vue   |  146 --
 packages/client/src/components/MkNote.vue          |  658 --------
 packages/client/src/components/MkNoteDetailed.vue  |  677 --------
 packages/client/src/components/MkNoteHeader.vue    |   75 -
 packages/client/src/components/MkNotePreview.vue   |  112 --
 packages/client/src/components/MkNoteSimple.vue    |  119 --
 packages/client/src/components/MkNoteSub.vue       |  140 --
 packages/client/src/components/MkNotes.vue         |   58 -
 packages/client/src/components/MkNotification.vue  |  323 ----
 .../src/components/MkNotificationSettingWindow.vue |   87 -
 .../client/src/components/MkNotificationToast.vue  |   68 -
 packages/client/src/components/MkNotifications.vue |  104 --
 packages/client/src/components/MkNumberDiff.vue    |   47 -
 .../client/src/components/MkObjectView.value.vue   |  160 --
 packages/client/src/components/MkObjectView.vue    |   20 -
 packages/client/src/components/MkPagePreview.vue   |  162 --
 packages/client/src/components/MkPageWindow.vue    |  140 --
 packages/client/src/components/MkPagination.vue    |  317 ----
 packages/client/src/components/MkPoll.vue          |  152 --
 packages/client/src/components/MkPollEditor.vue    |  219 ---
 packages/client/src/components/MkPopupMenu.vue     |   36 -
 packages/client/src/components/MkPostForm.vue      | 1050 ------------
 .../client/src/components/MkPostFormAttaches.vue   |  168 --
 .../client/src/components/MkPostFormDialog.vue     |   19 -
 .../components/MkPushNotificationAllowButton.vue   |  167 --
 packages/client/src/components/MkReactionIcon.vue  |   13 -
 .../client/src/components/MkReactionTooltip.vue    |   43 -
 .../src/components/MkReactionsViewer.details.vue   |   96 --
 .../src/components/MkReactionsViewer.reaction.vue  |  135 --
 .../client/src/components/MkReactionsViewer.vue    |   36 -
 packages/client/src/components/MkRemoteCaution.vue |   25 -
 packages/client/src/components/MkRenoteButton.vue  |   99 --
 packages/client/src/components/MkRipple.vue        |  116 --
 packages/client/src/components/MkSample.vue        |  116 --
 packages/client/src/components/MkSignin.vue        |  259 ---
 packages/client/src/components/MkSigninDialog.vue  |   46 -
 packages/client/src/components/MkSignup.vue        |  246 ---
 packages/client/src/components/MkSignupDialog.vue  |   46 -
 packages/client/src/components/MkSparkle.vue       |  130 --
 .../client/src/components/MkSubNoteContent.vue     |   90 -
 packages/client/src/components/MkSuperMenu.vue     |  161 --
 packages/client/src/components/MkTab.vue           |   73 -
 packages/client/src/components/MkTagCloud.vue      |   90 -
 packages/client/src/components/MkTimeline.vue      |  143 --
 packages/client/src/components/MkToast.vue         |   66 -
 .../src/components/MkTokenGenerateWindow.vue       |   90 -
 packages/client/src/components/MkTooltip.vue       |  101 --
 packages/client/src/components/MkUpdated.vue       |   51 -
 packages/client/src/components/MkUrlPreview.vue    |  383 -----
 .../client/src/components/MkUrlPreviewPopup.vue    |   45 -
 packages/client/src/components/MkUserCardMini.vue  |   99 --
 packages/client/src/components/MkUserInfo.vue      |  137 --
 packages/client/src/components/MkUserList.vue      |   39 -
 .../src/components/MkUserOnlineIndicator.vue       |   45 -
 packages/client/src/components/MkUserPreview.vue   |  184 --
 .../client/src/components/MkUserSelectDialog.vue   |  190 ---
 packages/client/src/components/MkUsersTooltip.vue  |   51 -
 packages/client/src/components/MkVisibility.vue    |   48 -
 .../client/src/components/MkVisibilityPicker.vue   |  159 --
 packages/client/src/components/MkWaitingDialog.vue |   73 -
 packages/client/src/components/MkWidgets.vue       |  165 --
 packages/client/src/components/MkWindow.vue        |  571 -------
 packages/client/src/components/MkYoutubePlayer.vue |   72 -
 packages/client/src/components/form/checkbox.vue   |  144 --
 packages/client/src/components/form/folder.vue     |  107 --
 packages/client/src/components/form/input.vue      |  263 ---
 packages/client/src/components/form/link.vue       |   95 --
 packages/client/src/components/form/radio.vue      |  132 --
 packages/client/src/components/form/radios.vue     |   83 -
 packages/client/src/components/form/range.vue      |  259 ---
 packages/client/src/components/form/section.vue    |   43 -
 packages/client/src/components/form/select.vue     |  279 ---
 packages/client/src/components/form/slot.vue       |   41 -
 packages/client/src/components/form/split.vue      |   27 -
 packages/client/src/components/form/suspense.vue   |   98 --
 packages/client/src/components/form/switch.vue     |  144 --
 packages/client/src/components/form/textarea.vue   |  260 ---
 packages/client/src/components/global/MkA.vue      |  102 --
 packages/client/src/components/global/MkAcct.vue   |   27 -
 packages/client/src/components/global/MkAd.vue     |  186 --
 packages/client/src/components/global/MkAvatar.vue |  143 --
 .../client/src/components/global/MkEllipsis.vue    |   34 -
 packages/client/src/components/global/MkEmoji.vue  |   81 -
 packages/client/src/components/global/MkError.vue  |   36 -
 .../client/src/components/global/MkLoading.vue     |  101 --
 .../global/MkMisskeyFlavoredMarkdown.vue           |  191 ---
 .../client/src/components/global/MkPageHeader.vue  |  368 ----
 packages/client/src/components/global/MkSpacer.vue |   96 --
 .../src/components/global/MkStickyContainer.vue    |   66 -
 packages/client/src/components/global/MkTime.vue   |   56 -
 packages/client/src/components/global/MkUrl.vue    |   89 -
 .../client/src/components/global/MkUserName.vue    |   15 -
 .../client/src/components/global/RouterView.vue    |   61 -
 packages/client/src/components/global/i18n.ts      |   42 -
 packages/client/src/components/index.ts            |   61 -
 packages/client/src/components/mfm.ts              |  331 ----
 packages/client/src/components/page/page.block.vue |   44 -
 .../client/src/components/page/page.button.vue     |   66 -
 .../client/src/components/page/page.canvas.vue     |   49 -
 .../client/src/components/page/page.counter.vue    |   52 -
 packages/client/src/components/page/page.if.vue    |   31 -
 packages/client/src/components/page/page.image.vue |   28 -
 packages/client/src/components/page/page.note.vue  |   47 -
 .../src/components/page/page.number-input.vue      |   55 -
 packages/client/src/components/page/page.post.vue  |  109 --
 .../src/components/page/page.radio-button.vue      |   45 -
 .../client/src/components/page/page.section.vue    |   60 -
 .../client/src/components/page/page.switch.vue     |   55 -
 .../client/src/components/page/page.text-input.vue |   55 -
 packages/client/src/components/page/page.text.vue  |   68 -
 .../src/components/page/page.textarea-input.vue    |   47 -
 .../client/src/components/page/page.textarea.vue   |   39 -
 packages/client/src/components/page/page.vue       |   85 -
 packages/client/src/config.ts                      |   15 -
 packages/client/src/const.ts                       |   45 -
 packages/client/src/directives/adaptive-border.ts  |   24 -
 packages/client/src/directives/anim.ts             |   18 -
 packages/client/src/directives/appear.ts           |   22 -
 packages/client/src/directives/click-anime.ts      |   31 -
 packages/client/src/directives/follow-append.ts    |   35 -
 packages/client/src/directives/get-size.ts         |   54 -
 packages/client/src/directives/hotkey.ts           |   24 -
 packages/client/src/directives/index.ts            |   28 -
 packages/client/src/directives/panel.ts            |   24 -
 packages/client/src/directives/ripple.ts           |   18 -
 packages/client/src/directives/size.ts             |  123 --
 packages/client/src/directives/tooltip.ts          |   93 -
 packages/client/src/directives/user-preview.ts     |  118 --
 packages/client/src/emojilist.json                 | 1785 --------------------
 packages/client/src/events.ts                      |    4 -
 packages/client/src/filters/bytes.ts               |    9 -
 packages/client/src/filters/note.ts                |    3 -
 packages/client/src/filters/number.ts              |    1 -
 packages/client/src/filters/user.ts                |   15 -
 packages/client/src/i18n.ts                        |    5 -
 packages/client/src/init.ts                        |  433 -----
 packages/client/src/instance.ts                    |   45 -
 packages/client/src/navbar.ts                      |  135 --
 packages/client/src/nirax.ts                       |  275 ---
 packages/client/src/os.ts                          |  588 -------
 packages/client/src/pages/_empty_.vue              |    7 -
 packages/client/src/pages/_error_.vue              |   89 -
 packages/client/src/pages/_loading_.vue            |    6 -
 packages/client/src/pages/about-misskey.vue        |  264 ---
 packages/client/src/pages/about.emojis.vue         |  134 --
 packages/client/src/pages/about.federation.vue     |  106 --
 packages/client/src/pages/about.vue                |  166 --
 packages/client/src/pages/admin-file.vue           |  160 --
 packages/client/src/pages/admin/_header_.vue       |  292 ----
 packages/client/src/pages/admin/abuses.vue         |   97 --
 packages/client/src/pages/admin/ads.vue            |  132 --
 packages/client/src/pages/admin/announcements.vue  |  112 --
 packages/client/src/pages/admin/bot-protection.vue |  109 --
 packages/client/src/pages/admin/database.vue       |   35 -
 packages/client/src/pages/admin/email-settings.vue |  126 --
 .../client/src/pages/admin/emoji-edit-dialog.vue   |  106 --
 packages/client/src/pages/admin/emojis.vue         |  398 -----
 packages/client/src/pages/admin/files.vue          |  120 --
 packages/client/src/pages/admin/index.vue          |  316 ----
 packages/client/src/pages/admin/instance-block.vue |   51 -
 .../src/pages/admin/integrations.discord.vue       |   60 -
 .../client/src/pages/admin/integrations.github.vue |   60 -
 .../src/pages/admin/integrations.twitter.vue       |   60 -
 packages/client/src/pages/admin/integrations.vue   |   57 -
 packages/client/src/pages/admin/metrics.vue        |  472 ------
 packages/client/src/pages/admin/object-storage.vue |  148 --
 packages/client/src/pages/admin/other-settings.vue |   44 -
 .../src/pages/admin/overview.active-users.vue      |  217 ---
 .../src/pages/admin/overview.ap-requests.vue       |  346 ----
 .../client/src/pages/admin/overview.federation.vue |  185 --
 .../client/src/pages/admin/overview.heatmap.vue    |   15 -
 .../client/src/pages/admin/overview.instances.vue  |   50 -
 .../client/src/pages/admin/overview.moderators.vue |   55 -
 packages/client/src/pages/admin/overview.pie.vue   |  110 --
 .../src/pages/admin/overview.queue.chart.vue       |  186 --
 packages/client/src/pages/admin/overview.queue.vue |  127 --
 .../client/src/pages/admin/overview.retention.vue  |   49 -
 packages/client/src/pages/admin/overview.stats.vue |  155 --
 packages/client/src/pages/admin/overview.users.vue |   57 -
 packages/client/src/pages/admin/overview.vue       |  190 ---
 packages/client/src/pages/admin/proxy-account.vue  |   62 -
 .../client/src/pages/admin/queue.chart.chart.vue   |  186 --
 packages/client/src/pages/admin/queue.chart.vue    |  149 --
 packages/client/src/pages/admin/queue.vue          |   56 -
 packages/client/src/pages/admin/relays.vue         |  103 --
 packages/client/src/pages/admin/security.vue       |  179 --
 packages/client/src/pages/admin/settings.vue       |  262 ---
 packages/client/src/pages/admin/users.vue          |  170 --
 packages/client/src/pages/announcements.vue        |   69 -
 packages/client/src/pages/antenna-timeline.vue     |  128 --
 packages/client/src/pages/api-console.vue          |   89 -
 packages/client/src/pages/auth.form.vue            |   60 -
 packages/client/src/pages/auth.vue                 |   91 -
 packages/client/src/pages/channel-editor.vue       |  122 --
 packages/client/src/pages/channel.vue              |  184 --
 packages/client/src/pages/channels.vue             |   79 -
 packages/client/src/pages/clip.vue                 |  129 --
 packages/client/src/pages/drive.vue                |   25 -
 packages/client/src/pages/emojis.emoji.vue         |   72 -
 packages/client/src/pages/explore.featured.vue     |   30 -
 packages/client/src/pages/explore.users.vue        |  148 --
 packages/client/src/pages/explore.vue              |   87 -
 packages/client/src/pages/favorites.vue            |   49 -
 packages/client/src/pages/follow-requests.vue      |  153 --
 packages/client/src/pages/follow.vue               |   62 -
 packages/client/src/pages/gallery/edit.vue         |  149 --
 packages/client/src/pages/gallery/index.vue        |  139 --
 packages/client/src/pages/gallery/post.vue         |  265 ---
 packages/client/src/pages/instance-info.vue        |  258 ---
 packages/client/src/pages/messaging/index.vue      |  327 ----
 .../src/pages/messaging/messaging-room.form.vue    |  364 ----
 .../src/pages/messaging/messaging-room.message.vue |  367 ----
 .../client/src/pages/messaging/messaging-room.vue  |  411 -----
 packages/client/src/pages/mfm-cheat-sheet.vue      |  387 -----
 packages/client/src/pages/miauth.vue               |   90 -
 packages/client/src/pages/my-antennas/create.vue   |   46 -
 packages/client/src/pages/my-antennas/edit.vue     |   43 -
 packages/client/src/pages/my-antennas/editor.vue   |  155 --
 packages/client/src/pages/my-antennas/index.vue    |   64 -
 packages/client/src/pages/my-clips/index.vue       |  100 --
 packages/client/src/pages/my-lists/index.vue       |   82 -
 packages/client/src/pages/my-lists/list.vue        |  162 --
 packages/client/src/pages/not-found.vue            |   22 -
 packages/client/src/pages/note.vue                 |  206 ---
 packages/client/src/pages/notifications.vue        |   95 --
 .../pages/page-editor/els/page-editor.el.image.vue |   63 -
 .../pages/page-editor/els/page-editor.el.note.vue  |   57 -
 .../page-editor/els/page-editor.el.section.vue     |   97 --
 .../pages/page-editor/els/page-editor.el.text.vue  |   54 -
 .../src/pages/page-editor/page-editor.blocks.vue   |   65 -
 .../pages/page-editor/page-editor.container.vue    |  155 --
 .../client/src/pages/page-editor/page-editor.vue   |  394 -----
 packages/client/src/pages/page.vue                 |  277 ---
 packages/client/src/pages/pages.vue                |   99 --
 packages/client/src/pages/preview.vue              |   27 -
 packages/client/src/pages/registry.keys.vue        |   96 --
 packages/client/src/pages/registry.value.vue       |  123 --
 packages/client/src/pages/registry.vue             |   74 -
 packages/client/src/pages/reset-password.vue       |   59 -
 packages/client/src/pages/scratchpad.vue           |  137 --
 packages/client/src/pages/search.vue               |   38 -
 packages/client/src/pages/settings/2fa.vue         |  216 ---
 .../client/src/pages/settings/account-info.vue     |  158 --
 packages/client/src/pages/settings/accounts.vue    |  143 --
 packages/client/src/pages/settings/api.vue         |   46 -
 packages/client/src/pages/settings/apps.vue        |   96 --
 packages/client/src/pages/settings/custom-css.vue  |   46 -
 packages/client/src/pages/settings/deck.vue        |   39 -
 .../client/src/pages/settings/delete-account.vue   |   52 -
 packages/client/src/pages/settings/drive.vue       |  145 --
 packages/client/src/pages/settings/email.vue       |  111 --
 packages/client/src/pages/settings/general.vue     |  196 ---
 .../client/src/pages/settings/import-export.vue    |  165 --
 packages/client/src/pages/settings/index.vue       |  291 ----
 .../client/src/pages/settings/instance-mute.vue    |   53 -
 packages/client/src/pages/settings/integration.vue |   99 --
 packages/client/src/pages/settings/mute-block.vue  |   61 -
 packages/client/src/pages/settings/navbar.vue      |   87 -
 .../client/src/pages/settings/notifications.vue    |   90 -
 packages/client/src/pages/settings/other.vue       |   47 -
 .../client/src/pages/settings/plugin.install.vue   |  124 --
 packages/client/src/pages/settings/plugin.vue      |   98 --
 .../src/pages/settings/preferences-backups.vue     |  444 -----
 packages/client/src/pages/settings/privacy.vue     |  100 --
 packages/client/src/pages/settings/profile.vue     |  220 ---
 packages/client/src/pages/settings/reaction.vue    |  154 --
 packages/client/src/pages/settings/security.vue    |  160 --
 .../client/src/pages/settings/sounds.sound.vue     |   45 -
 packages/client/src/pages/settings/sounds.vue      |   82 -
 .../src/pages/settings/statusbar.statusbar.vue     |  140 --
 packages/client/src/pages/settings/statusbar.vue   |   54 -
 .../client/src/pages/settings/theme.install.vue    |   80 -
 .../client/src/pages/settings/theme.manage.vue     |   78 -
 packages/client/src/pages/settings/theme.vue       |  409 -----
 .../client/src/pages/settings/webhook.edit.vue     |   95 --
 packages/client/src/pages/settings/webhook.new.vue |   82 -
 packages/client/src/pages/settings/webhook.vue     |   53 -
 packages/client/src/pages/settings/word-mute.vue   |  128 --
 packages/client/src/pages/share.vue                |  169 --
 packages/client/src/pages/signup-complete.vue      |   41 -
 packages/client/src/pages/tag.vue                  |   35 -
 packages/client/src/pages/theme-editor.vue         |  283 ----
 packages/client/src/pages/timeline.tutorial.vue    |  142 --
 packages/client/src/pages/timeline.vue             |  183 --
 packages/client/src/pages/user-info.vue            |  485 ------
 packages/client/src/pages/user-list-timeline.vue   |  121 --
 packages/client/src/pages/user/clips.vue           |   47 -
 packages/client/src/pages/user/follow-list.vue     |   47 -
 packages/client/src/pages/user/followers.vue       |   61 -
 packages/client/src/pages/user/following.vue       |   61 -
 packages/client/src/pages/user/gallery.vue         |   38 -
 packages/client/src/pages/user/home.vue            |  530 ------
 packages/client/src/pages/user/index.activity.vue  |   52 -
 packages/client/src/pages/user/index.photos.vue    |  102 --
 packages/client/src/pages/user/index.timeline.vue  |   45 -
 packages/client/src/pages/user/index.vue           |  113 --
 packages/client/src/pages/user/pages.vue           |   30 -
 packages/client/src/pages/user/reactions.vue       |   61 -
 packages/client/src/pages/welcome.entrance.a.vue   |  309 ----
 packages/client/src/pages/welcome.entrance.b.vue   |  237 ---
 packages/client/src/pages/welcome.entrance.c.vue   |  306 ----
 packages/client/src/pages/welcome.setup.vue        |   89 -
 packages/client/src/pages/welcome.timeline.vue     |   99 --
 packages/client/src/pages/welcome.vue              |   30 -
 packages/client/src/pizzax.ts                      |  169 --
 packages/client/src/plugin.ts                      |  123 --
 packages/client/src/router.ts                      |  501 ------
 packages/client/src/scripts/2fa.ts                 |   33 -
 packages/client/src/scripts/aiscript/api.ts        |   43 -
 packages/client/src/scripts/array.ts               |  149 --
 packages/client/src/scripts/autocomplete.ts        |  276 ---
 packages/client/src/scripts/chart-vline.ts         |   21 -
 packages/client/src/scripts/check-word-mute.ts     |   37 -
 packages/client/src/scripts/clone.ts               |   18 -
 packages/client/src/scripts/collect-page-vars.ts   |   68 -
 packages/client/src/scripts/contains.ts            |    9 -
 packages/client/src/scripts/copy-to-clipboard.ts   |   33 -
 packages/client/src/scripts/device-kind.ts         |   10 -
 packages/client/src/scripts/emoji-base.ts          |   20 -
 packages/client/src/scripts/emojilist.ts           |   17 -
 .../src/scripts/extract-avg-color-from-blurhash.ts |    9 -
 packages/client/src/scripts/extract-mentions.ts    |   11 -
 .../client/src/scripts/extract-url-from-mfm.ts     |   19 -
 packages/client/src/scripts/focus.ts               |   27 -
 packages/client/src/scripts/form.ts                |   59 -
 packages/client/src/scripts/format-time-string.ts  |   50 -
 packages/client/src/scripts/gen-search-query.ts    |   30 -
 packages/client/src/scripts/get-account-from-id.ts |    7 -
 packages/client/src/scripts/get-note-menu.ts       |  341 ----
 packages/client/src/scripts/get-note-summary.ts    |   55 -
 .../client/src/scripts/get-static-image-url.ts     |   19 -
 packages/client/src/scripts/get-user-menu.ts       |  253 ---
 packages/client/src/scripts/get-user-name.ts       |    3 -
 packages/client/src/scripts/hotkey.ts              |   90 -
 packages/client/src/scripts/hpml/block.ts          |  109 --
 packages/client/src/scripts/hpml/evaluator.ts      |  232 ---
 packages/client/src/scripts/hpml/expr.ts           |   79 -
 packages/client/src/scripts/hpml/index.ts          |  103 --
 packages/client/src/scripts/hpml/lib.ts            |  247 ---
 packages/client/src/scripts/hpml/type-checker.ts   |  191 ---
 packages/client/src/scripts/i18n.ts                |   29 -
 packages/client/src/scripts/idb-proxy.ts           |   36 -
 packages/client/src/scripts/initialize-sw.ts       |   13 -
 packages/client/src/scripts/is-device-darkmode.ts  |    3 -
 packages/client/src/scripts/keycode.ts             |   33 -
 packages/client/src/scripts/langmap.ts             |  666 --------
 packages/client/src/scripts/login-id.ts            |   11 -
 packages/client/src/scripts/lookup-user.ts         |   36 -
 packages/client/src/scripts/media-proxy.ts         |   15 -
 packages/client/src/scripts/mfm-tags.ts            |    1 -
 packages/client/src/scripts/page-metadata.ts       |   41 -
 packages/client/src/scripts/physics.ts             |  152 --
 packages/client/src/scripts/please-login.ts        |   21 -
 packages/client/src/scripts/popout.ts              |   23 -
 packages/client/src/scripts/popup-position.ts      |  158 --
 packages/client/src/scripts/reaction-picker.ts     |   41 -
 packages/client/src/scripts/safe-uri-decode.ts     |    7 -
 packages/client/src/scripts/scroll.ts              |   85 -
 packages/client/src/scripts/search.ts              |   63 -
 packages/client/src/scripts/select-file.ts         |  103 --
 .../client/src/scripts/show-suspended-dialog.ts    |   10 -
 packages/client/src/scripts/shuffle.ts             |   19 -
 packages/client/src/scripts/sound.ts               |   66 -
 packages/client/src/scripts/sticky-sidebar.ts      |   50 -
 packages/client/src/scripts/theme-editor.ts        |   81 -
 packages/client/src/scripts/theme.ts               |  148 --
 packages/client/src/scripts/time.ts                |   39 -
 packages/client/src/scripts/timezones.ts           |   49 -
 packages/client/src/scripts/touch.ts               |   23 -
 packages/client/src/scripts/unison-reload.ts       |   15 -
 packages/client/src/scripts/upload.ts              |  137 --
 .../client/src/scripts/upload/compress-config.ts   |   23 -
 packages/client/src/scripts/url.ts                 |   13 -
 packages/client/src/scripts/use-chart-tooltip.ts   |   54 -
 packages/client/src/scripts/use-interval.ts        |   24 -
 packages/client/src/scripts/use-leave-guard.ts     |   47 -
 packages/client/src/scripts/use-note-capture.ts    |  110 --
 packages/client/src/scripts/use-tooltip.ts         |   86 -
 packages/client/src/store.ts                       |  383 -----
 packages/client/src/stream.ts                      |    8 -
 packages/client/src/style.scss                     |  584 -------
 packages/client/src/theme-store.ts                 |   34 -
 packages/client/src/themes/_dark.json5             |   99 --
 packages/client/src/themes/_light.json5            |   99 --
 packages/client/src/themes/d-astro.json5           |   78 -
 packages/client/src/themes/d-botanical.json5       |   26 -
 packages/client/src/themes/d-cherry.json5          |   20 -
 packages/client/src/themes/d-dark.json5            |   26 -
 packages/client/src/themes/d-future.json5          |   27 -
 packages/client/src/themes/d-green-lime.json5      |   24 -
 packages/client/src/themes/d-green-orange.json5    |   24 -
 packages/client/src/themes/d-ice.json5             |   13 -
 packages/client/src/themes/d-persimmon.json5       |   25 -
 packages/client/src/themes/d-u0.json5              |   88 -
 packages/client/src/themes/l-apricot.json5         |   22 -
 packages/client/src/themes/l-cherry.json5          |   21 -
 packages/client/src/themes/l-coffee.json5          |   21 -
 packages/client/src/themes/l-light.json5           |   20 -
 packages/client/src/themes/l-rainy.json5           |   21 -
 packages/client/src/themes/l-sushi.json5           |   18 -
 packages/client/src/themes/l-u0.json5              |   87 -
 packages/client/src/themes/l-vivid.json5           |   82 -
 packages/client/src/types/menu.ts                  |   21 -
 packages/client/src/ui/_common_/common.vue         |  139 --
 .../client/src/ui/_common_/navbar-for-mobile.vue   |  314 ----
 packages/client/src/ui/_common_/navbar.vue         |  521 ------
 .../src/ui/_common_/statusbar-federation.vue       |  108 --
 packages/client/src/ui/_common_/statusbar-rss.vue  |   93 -
 .../client/src/ui/_common_/statusbar-user-list.vue |  113 --
 packages/client/src/ui/_common_/statusbars.vue     |   92 -
 .../client/src/ui/_common_/stream-indicator.vue    |   61 -
 packages/client/src/ui/_common_/sw-inject.ts       |   35 -
 packages/client/src/ui/_common_/upload.vue         |  129 --
 packages/client/src/ui/classic.header.vue          |  217 ---
 packages/client/src/ui/classic.sidebar.vue         |  268 ---
 packages/client/src/ui/classic.vue                 |  320 ----
 packages/client/src/ui/classic.widgets.vue         |   84 -
 packages/client/src/ui/deck.vue                    |  435 -----
 packages/client/src/ui/deck/antenna-column.vue     |   70 -
 packages/client/src/ui/deck/column-core.vue        |   34 -
 packages/client/src/ui/deck/column.vue             |  398 -----
 packages/client/src/ui/deck/deck-store.ts          |  296 ----
 packages/client/src/ui/deck/direct-column.vue      |   31 -
 packages/client/src/ui/deck/list-column.vue        |   58 -
 packages/client/src/ui/deck/main-column.vue        |   68 -
 packages/client/src/ui/deck/mentions-column.vue    |   28 -
 .../client/src/ui/deck/notifications-column.vue    |   44 -
 packages/client/src/ui/deck/tl-column.vue          |  119 --
 packages/client/src/ui/deck/widgets-column.vue     |   69 -
 packages/client/src/ui/universal.vue               |  390 -----
 packages/client/src/ui/universal.widgets.vue       |   71 -
 packages/client/src/ui/visitor.vue                 |   19 -
 packages/client/src/ui/visitor/a.vue               |  259 ---
 packages/client/src/ui/visitor/b.vue               |  248 ---
 packages/client/src/ui/visitor/header.vue          |  228 ---
 packages/client/src/ui/visitor/kanban.vue          |  257 ---
 packages/client/src/ui/zen.vue                     |   34 -
 packages/client/src/widgets/activity.calendar.vue  |   81 -
 packages/client/src/widgets/activity.chart.vue     |   92 -
 packages/client/src/widgets/activity.vue           |   90 -
 packages/client/src/widgets/aichan.vue             |   74 -
 packages/client/src/widgets/aiscript.vue           |  175 --
 packages/client/src/widgets/button.vue             |  103 --
 packages/client/src/widgets/calendar.vue           |  213 ---
 packages/client/src/widgets/clock.vue              |  203 ---
 packages/client/src/widgets/digital-clock.vue      |   92 -
 packages/client/src/widgets/federation.vue         |  147 --
 packages/client/src/widgets/index.ts               |   53 -
 packages/client/src/widgets/instance-cloud.vue     |   81 -
 packages/client/src/widgets/job-queue.vue          |  197 ---
 packages/client/src/widgets/memo.vue               |  111 --
 packages/client/src/widgets/notifications.vue      |   70 -
 packages/client/src/widgets/online-users.vue       |   78 -
 packages/client/src/widgets/photos.vue             |  123 --
 packages/client/src/widgets/post-form.vue          |   35 -
 packages/client/src/widgets/rss-ticker.vue         |  152 --
 packages/client/src/widgets/rss.vue                |   96 --
 .../client/src/widgets/server-metric/cpu-mem.vue   |  167 --
 packages/client/src/widgets/server-metric/cpu.vue  |   65 -
 packages/client/src/widgets/server-metric/disk.vue |   57 -
 .../client/src/widgets/server-metric/index.vue     |   87 -
 packages/client/src/widgets/server-metric/mem.vue  |   73 -
 packages/client/src/widgets/server-metric/net.vue  |  140 --
 packages/client/src/widgets/server-metric/pie.vue  |   52 -
 packages/client/src/widgets/slideshow.vue          |  159 --
 packages/client/src/widgets/timeline.vue           |  129 --
 packages/client/src/widgets/trends.vue             |  120 --
 packages/client/src/widgets/unix-clock.vue         |  116 --
 packages/client/src/widgets/user-list.vue          |  136 --
 packages/client/src/widgets/widget.ts              |   73 -
 packages/client/tsconfig.json                      |   47 -
 packages/client/vite.config.ts                     |   70 -
 packages/client/vite.json5.ts                      |   38 -
 packages/frontend/.eslintrc.js                     |   89 +
 packages/frontend/.vscode/settings.json            |   11 +
 packages/frontend/@types/global.d.ts               |   10 +
 packages/frontend/@types/theme.d.ts                |    7 +
 packages/frontend/@types/vue.d.ts                  |   16 +
 packages/frontend/assets/about-icon.png            |  Bin 0 -> 20528 bytes
 packages/frontend/assets/dummy.png                 |  Bin 0 -> 6285 bytes
 packages/frontend/assets/fedi.jpg                  |  Bin 0 -> 77752 bytes
 packages/frontend/assets/label-red.svg             |    6 +
 packages/frontend/assets/label.svg                 |    6 +
 packages/frontend/assets/misskey.svg               |    7 +
 packages/frontend/assets/remove.png                |  Bin 0 -> 424 bytes
 packages/frontend/assets/sounds/aisha/1.mp3        |  Bin 0 -> 34480 bytes
 packages/frontend/assets/sounds/aisha/2.mp3        |  Bin 0 -> 24031 bytes
 packages/frontend/assets/sounds/aisha/3.mp3        |  Bin 0 -> 29256 bytes
 .../assets/sounds/noizenecio/kick_gaba1.mp3        |  Bin 0 -> 18866 bytes
 .../assets/sounds/noizenecio/kick_gaba2.mp3        |  Bin 0 -> 27144 bytes
 .../assets/sounds/noizenecio/kick_gaba3.mp3        |  Bin 0 -> 19853 bytes
 .../assets/sounds/noizenecio/kick_gaba4.mp3        |  Bin 0 -> 19853 bytes
 .../assets/sounds/noizenecio/kick_gaba5.mp3        |  Bin 0 -> 19853 bytes
 .../assets/sounds/noizenecio/kick_gaba6.mp3        |  Bin 0 -> 19853 bytes
 .../assets/sounds/noizenecio/kick_gaba7.mp3        |  Bin 0 -> 19853 bytes
 packages/frontend/assets/sounds/syuilo/down.mp3    |  Bin 0 -> 18240 bytes
 packages/frontend/assets/sounds/syuilo/kick.mp3    |  Bin 0 -> 15672 bytes
 .../assets/sounds/syuilo/pirori-square-wet.mp3     |  Bin 0 -> 139200 bytes
 .../frontend/assets/sounds/syuilo/pirori-wet.mp3   |  Bin 0 -> 139200 bytes
 packages/frontend/assets/sounds/syuilo/pirori.mp3  |  Bin 0 -> 19200 bytes
 packages/frontend/assets/sounds/syuilo/poi1.mp3    |  Bin 0 -> 18240 bytes
 packages/frontend/assets/sounds/syuilo/poi2.mp3    |  Bin 0 -> 18240 bytes
 packages/frontend/assets/sounds/syuilo/pope1.mp3   |  Bin 0 -> 18240 bytes
 packages/frontend/assets/sounds/syuilo/pope2.mp3   |  Bin 0 -> 18240 bytes
 packages/frontend/assets/sounds/syuilo/popo.mp3    |  Bin 0 -> 18240 bytes
 .../frontend/assets/sounds/syuilo/queue-jammed.mp3 |  Bin 0 -> 351466 bytes
 .../frontend/assets/sounds/syuilo/reverved.mp3     |  Bin 0 -> 276480 bytes
 packages/frontend/assets/sounds/syuilo/ryukyu.mp3  |  Bin 0 -> 139200 bytes
 packages/frontend/assets/sounds/syuilo/snare.mp3   |  Bin 0 -> 26121 bytes
 .../frontend/assets/sounds/syuilo/square-pico.mp3  |  Bin 0 -> 19200 bytes
 packages/frontend/assets/sounds/syuilo/triple.mp3  |  Bin 0 -> 18240 bytes
 packages/frontend/assets/sounds/syuilo/up.mp3      |  Bin 0 -> 18240 bytes
 packages/frontend/assets/sounds/syuilo/waon.mp3    |  Bin 0 -> 18240 bytes
 packages/frontend/assets/tagcanvas.min.js          |   21 +
 packages/frontend/assets/unread.svg                |    7 +
 packages/frontend/package.json                     |   94 ++
 packages/frontend/src/account.ts                   |  238 +++
 packages/frontend/src/components/MkAbuseReport.vue |  109 ++
 .../src/components/MkAbuseReportWindow.vue         |   65 +
 .../src/components/MkActiveUsersHeatmap.vue        |  236 +++
 packages/frontend/src/components/MkAnalogClock.vue |  225 +++
 .../frontend/src/components/MkAutocomplete.vue     |  476 ++++++
 packages/frontend/src/components/MkAvatars.vue     |   24 +
 packages/frontend/src/components/MkButton.vue      |  227 +++
 packages/frontend/src/components/MkCaptcha.vue     |  118 ++
 .../src/components/MkChannelFollowButton.vue       |  129 ++
 .../frontend/src/components/MkChannelPreview.vue   |  154 ++
 packages/frontend/src/components/MkChart.vue       |  859 ++++++++++
 .../frontend/src/components/MkChartTooltip.vue     |   53 +
 packages/frontend/src/components/MkCode.core.vue   |   20 +
 packages/frontend/src/components/MkCode.vue        |   15 +
 packages/frontend/src/components/MkContainer.vue   |  275 +++
 packages/frontend/src/components/MkContextMenu.vue |   85 +
 .../frontend/src/components/MkCropperDialog.vue    |  174 ++
 packages/frontend/src/components/MkCwButton.vue    |   62 +
 .../src/components/MkDateSeparatedList.vue         |  189 +++
 packages/frontend/src/components/MkDialog.vue      |  208 +++
 .../frontend/src/components/MkDigitalClock.vue     |   77 +
 packages/frontend/src/components/MkDrive.file.vue  |  334 ++++
 .../frontend/src/components/MkDrive.folder.vue     |  330 ++++
 .../frontend/src/components/MkDrive.navFolder.vue  |  147 ++
 packages/frontend/src/components/MkDrive.vue       |  801 +++++++++
 .../src/components/MkDriveFileThumbnail.vue        |   80 +
 .../src/components/MkDriveSelectDialog.vue         |   58 +
 packages/frontend/src/components/MkDriveWindow.vue |   30 +
 .../src/components/MkEmojiPicker.section.vue       |   36 +
 packages/frontend/src/components/MkEmojiPicker.vue |  569 +++++++
 .../src/components/MkEmojiPickerDialog.vue         |   73 +
 .../src/components/MkEmojiPickerWindow.vue         |  180 ++
 .../frontend/src/components/MkFeaturedPhotos.vue   |   22 +
 .../src/components/MkFileCaptionEditWindow.vue     |  175 ++
 .../frontend/src/components/MkFileListForAdmin.vue |  117 ++
 packages/frontend/src/components/MkFolder.vue      |  159 ++
 .../frontend/src/components/MkFollowButton.vue     |  187 ++
 .../frontend/src/components/MkForgotPassword.vue   |   80 +
 packages/frontend/src/components/MkFormDialog.vue  |  127 ++
 packages/frontend/src/components/MkFormula.vue     |   24 +
 packages/frontend/src/components/MkFormulaCore.vue |   34 +
 .../src/components/MkGalleryPostPreview.vue        |  115 ++
 packages/frontend/src/components/MkGoogle.vue      |   51 +
 packages/frontend/src/components/MkImageViewer.vue |   77 +
 .../frontend/src/components/MkImgWithBlurhash.vue  |   76 +
 packages/frontend/src/components/MkInfo.vue        |   34 +
 .../frontend/src/components/MkInstanceCardMini.vue |  105 ++
 .../frontend/src/components/MkInstanceStats.vue    |  255 +++
 .../frontend/src/components/MkInstanceTicker.vue   |   80 +
 packages/frontend/src/components/MkKeyValue.vue    |   58 +
 packages/frontend/src/components/MkLaunchPad.vue   |  138 ++
 packages/frontend/src/components/MkLink.vue        |   47 +
 packages/frontend/src/components/MkMarquee.vue     |  106 ++
 packages/frontend/src/components/MkMediaBanner.vue |  102 ++
 packages/frontend/src/components/MkMediaImage.vue  |  130 ++
 packages/frontend/src/components/MkMediaList.vue   |  189 +++
 packages/frontend/src/components/MkMediaVideo.vue  |   88 +
 packages/frontend/src/components/MkMention.vue     |   66 +
 packages/frontend/src/components/MkMenu.child.vue  |   65 +
 packages/frontend/src/components/MkMenu.vue        |  367 ++++
 packages/frontend/src/components/MkMiniChart.vue   |   73 +
 packages/frontend/src/components/MkModal.vue       |  406 +++++
 .../frontend/src/components/MkModalPageWindow.vue  |  181 ++
 packages/frontend/src/components/MkModalWindow.vue |  146 ++
 packages/frontend/src/components/MkNote.vue        |  658 ++++++++
 .../frontend/src/components/MkNoteDetailed.vue     |  677 ++++++++
 packages/frontend/src/components/MkNoteHeader.vue  |   75 +
 packages/frontend/src/components/MkNotePreview.vue |  112 ++
 packages/frontend/src/components/MkNoteSimple.vue  |  119 ++
 packages/frontend/src/components/MkNoteSub.vue     |  140 ++
 packages/frontend/src/components/MkNotes.vue       |   58 +
 .../frontend/src/components/MkNotification.vue     |  323 ++++
 .../src/components/MkNotificationSettingWindow.vue |   87 +
 .../src/components/MkNotificationToast.vue         |   68 +
 .../frontend/src/components/MkNotifications.vue    |  104 ++
 packages/frontend/src/components/MkNumberDiff.vue  |   47 +
 .../frontend/src/components/MkObjectView.value.vue |  160 ++
 packages/frontend/src/components/MkObjectView.vue  |   20 +
 packages/frontend/src/components/MkPagePreview.vue |  162 ++
 packages/frontend/src/components/MkPageWindow.vue  |  140 ++
 packages/frontend/src/components/MkPagination.vue  |  317 ++++
 packages/frontend/src/components/MkPoll.vue        |  152 ++
 packages/frontend/src/components/MkPollEditor.vue  |  219 +++
 packages/frontend/src/components/MkPopupMenu.vue   |   36 +
 packages/frontend/src/components/MkPostForm.vue    | 1050 ++++++++++++
 .../frontend/src/components/MkPostFormAttaches.vue |  168 ++
 .../frontend/src/components/MkPostFormDialog.vue   |   19 +
 .../components/MkPushNotificationAllowButton.vue   |  167 ++
 .../frontend/src/components/MkReactionIcon.vue     |   13 +
 .../frontend/src/components/MkReactionTooltip.vue  |   43 +
 .../src/components/MkReactionsViewer.details.vue   |   96 ++
 .../src/components/MkReactionsViewer.reaction.vue  |  135 ++
 .../frontend/src/components/MkReactionsViewer.vue  |   36 +
 .../frontend/src/components/MkRemoteCaution.vue    |   25 +
 .../frontend/src/components/MkRenoteButton.vue     |   99 ++
 packages/frontend/src/components/MkRipple.vue      |  116 ++
 packages/frontend/src/components/MkSample.vue      |  116 ++
 packages/frontend/src/components/MkSignin.vue      |  259 +++
 .../frontend/src/components/MkSigninDialog.vue     |   46 +
 packages/frontend/src/components/MkSignup.vue      |  246 +++
 .../frontend/src/components/MkSignupDialog.vue     |   46 +
 packages/frontend/src/components/MkSparkle.vue     |  130 ++
 .../frontend/src/components/MkSubNoteContent.vue   |   90 +
 packages/frontend/src/components/MkSuperMenu.vue   |  161 ++
 packages/frontend/src/components/MkTab.vue         |   73 +
 packages/frontend/src/components/MkTagCloud.vue    |   90 +
 packages/frontend/src/components/MkTimeline.vue    |  143 ++
 packages/frontend/src/components/MkToast.vue       |   66 +
 .../src/components/MkTokenGenerateWindow.vue       |   90 +
 packages/frontend/src/components/MkTooltip.vue     |  101 ++
 packages/frontend/src/components/MkUpdated.vue     |   51 +
 packages/frontend/src/components/MkUrlPreview.vue  |  383 +++++
 .../frontend/src/components/MkUrlPreviewPopup.vue  |   45 +
 .../frontend/src/components/MkUserCardMini.vue     |   99 ++
 packages/frontend/src/components/MkUserInfo.vue    |  137 ++
 packages/frontend/src/components/MkUserList.vue    |   39 +
 .../src/components/MkUserOnlineIndicator.vue       |   45 +
 packages/frontend/src/components/MkUserPreview.vue |  184 ++
 .../frontend/src/components/MkUserSelectDialog.vue |  190 +++
 .../frontend/src/components/MkUsersTooltip.vue     |   51 +
 packages/frontend/src/components/MkVisibility.vue  |   48 +
 .../frontend/src/components/MkVisibilityPicker.vue |  159 ++
 .../frontend/src/components/MkWaitingDialog.vue    |   73 +
 packages/frontend/src/components/MkWidgets.vue     |  165 ++
 packages/frontend/src/components/MkWindow.vue      |  571 +++++++
 .../frontend/src/components/MkYoutubePlayer.vue    |   72 +
 packages/frontend/src/components/form/checkbox.vue |  144 ++
 packages/frontend/src/components/form/folder.vue   |  107 ++
 packages/frontend/src/components/form/input.vue    |  263 +++
 packages/frontend/src/components/form/link.vue     |   95 ++
 packages/frontend/src/components/form/radio.vue    |  132 ++
 packages/frontend/src/components/form/radios.vue   |   83 +
 packages/frontend/src/components/form/range.vue    |  259 +++
 packages/frontend/src/components/form/section.vue  |   43 +
 packages/frontend/src/components/form/select.vue   |  279 +++
 packages/frontend/src/components/form/slot.vue     |   41 +
 packages/frontend/src/components/form/split.vue    |   27 +
 packages/frontend/src/components/form/suspense.vue |   98 ++
 packages/frontend/src/components/form/switch.vue   |  144 ++
 packages/frontend/src/components/form/textarea.vue |  260 +++
 packages/frontend/src/components/global/MkA.vue    |  102 ++
 packages/frontend/src/components/global/MkAcct.vue |   27 +
 packages/frontend/src/components/global/MkAd.vue   |  186 ++
 .../frontend/src/components/global/MkAvatar.vue    |  143 ++
 .../frontend/src/components/global/MkEllipsis.vue  |   34 +
 .../frontend/src/components/global/MkEmoji.vue     |   81 +
 .../frontend/src/components/global/MkError.vue     |   36 +
 .../frontend/src/components/global/MkLoading.vue   |  101 ++
 .../global/MkMisskeyFlavoredMarkdown.vue           |  191 +++
 .../src/components/global/MkPageHeader.vue         |  368 ++++
 .../frontend/src/components/global/MkSpacer.vue    |   96 ++
 .../src/components/global/MkStickyContainer.vue    |   66 +
 packages/frontend/src/components/global/MkTime.vue |   56 +
 packages/frontend/src/components/global/MkUrl.vue  |   89 +
 .../frontend/src/components/global/MkUserName.vue  |   15 +
 .../frontend/src/components/global/RouterView.vue  |   61 +
 packages/frontend/src/components/global/i18n.ts    |   42 +
 packages/frontend/src/components/index.ts          |   61 +
 packages/frontend/src/components/mfm.ts            |  331 ++++
 .../frontend/src/components/page/page.block.vue    |   44 +
 .../frontend/src/components/page/page.button.vue   |   66 +
 .../frontend/src/components/page/page.canvas.vue   |   49 +
 .../frontend/src/components/page/page.counter.vue  |   52 +
 packages/frontend/src/components/page/page.if.vue  |   31 +
 .../frontend/src/components/page/page.image.vue    |   28 +
 .../frontend/src/components/page/page.note.vue     |   47 +
 .../src/components/page/page.number-input.vue      |   55 +
 .../frontend/src/components/page/page.post.vue     |  109 ++
 .../src/components/page/page.radio-button.vue      |   45 +
 .../frontend/src/components/page/page.section.vue  |   60 +
 .../frontend/src/components/page/page.switch.vue   |   55 +
 .../src/components/page/page.text-input.vue        |   55 +
 .../frontend/src/components/page/page.text.vue     |   68 +
 .../src/components/page/page.textarea-input.vue    |   47 +
 .../frontend/src/components/page/page.textarea.vue |   39 +
 packages/frontend/src/components/page/page.vue     |   85 +
 packages/frontend/src/config.ts                    |   15 +
 packages/frontend/src/const.ts                     |   45 +
 .../frontend/src/directives/adaptive-border.ts     |   24 +
 packages/frontend/src/directives/anim.ts           |   18 +
 packages/frontend/src/directives/appear.ts         |   22 +
 packages/frontend/src/directives/click-anime.ts    |   31 +
 packages/frontend/src/directives/follow-append.ts  |   35 +
 packages/frontend/src/directives/get-size.ts       |   54 +
 packages/frontend/src/directives/hotkey.ts         |   24 +
 packages/frontend/src/directives/index.ts          |   28 +
 packages/frontend/src/directives/panel.ts          |   24 +
 packages/frontend/src/directives/ripple.ts         |   18 +
 packages/frontend/src/directives/size.ts           |  123 ++
 packages/frontend/src/directives/tooltip.ts        |   93 +
 packages/frontend/src/directives/user-preview.ts   |  118 ++
 packages/frontend/src/emojilist.json               | 1785 ++++++++++++++++++++
 packages/frontend/src/events.ts                    |    4 +
 packages/frontend/src/filters/bytes.ts             |    9 +
 packages/frontend/src/filters/note.ts              |    3 +
 packages/frontend/src/filters/number.ts            |    1 +
 packages/frontend/src/filters/user.ts              |   15 +
 packages/frontend/src/i18n.ts                      |    5 +
 packages/frontend/src/init.ts                      |  433 +++++
 packages/frontend/src/instance.ts                  |   45 +
 packages/frontend/src/navbar.ts                    |  135 ++
 packages/frontend/src/nirax.ts                     |  275 +++
 packages/frontend/src/os.ts                        |  588 +++++++
 packages/frontend/src/pages/_empty_.vue            |    7 +
 packages/frontend/src/pages/_error_.vue            |   89 +
 packages/frontend/src/pages/_loading_.vue          |    6 +
 packages/frontend/src/pages/about-misskey.vue      |  264 +++
 packages/frontend/src/pages/about.emojis.vue       |  134 ++
 packages/frontend/src/pages/about.federation.vue   |  106 ++
 packages/frontend/src/pages/about.vue              |  166 ++
 packages/frontend/src/pages/admin-file.vue         |  160 ++
 packages/frontend/src/pages/admin/_header_.vue     |  292 ++++
 packages/frontend/src/pages/admin/abuses.vue       |   97 ++
 packages/frontend/src/pages/admin/ads.vue          |  132 ++
 .../frontend/src/pages/admin/announcements.vue     |  112 ++
 .../frontend/src/pages/admin/bot-protection.vue    |  109 ++
 packages/frontend/src/pages/admin/database.vue     |   35 +
 .../frontend/src/pages/admin/email-settings.vue    |  126 ++
 .../frontend/src/pages/admin/emoji-edit-dialog.vue |  106 ++
 packages/frontend/src/pages/admin/emojis.vue       |  398 +++++
 packages/frontend/src/pages/admin/files.vue        |  120 ++
 packages/frontend/src/pages/admin/index.vue        |  316 ++++
 .../frontend/src/pages/admin/instance-block.vue    |   51 +
 .../src/pages/admin/integrations.discord.vue       |   60 +
 .../src/pages/admin/integrations.github.vue        |   60 +
 .../src/pages/admin/integrations.twitter.vue       |   60 +
 packages/frontend/src/pages/admin/integrations.vue |   57 +
 packages/frontend/src/pages/admin/metrics.vue      |  472 ++++++
 .../frontend/src/pages/admin/object-storage.vue    |  148 ++
 .../frontend/src/pages/admin/other-settings.vue    |   44 +
 .../src/pages/admin/overview.active-users.vue      |  217 +++
 .../src/pages/admin/overview.ap-requests.vue       |  346 ++++
 .../src/pages/admin/overview.federation.vue        |  185 ++
 .../frontend/src/pages/admin/overview.heatmap.vue  |   15 +
 .../src/pages/admin/overview.instances.vue         |   50 +
 .../src/pages/admin/overview.moderators.vue        |   55 +
 packages/frontend/src/pages/admin/overview.pie.vue |  110 ++
 .../src/pages/admin/overview.queue.chart.vue       |  186 ++
 .../frontend/src/pages/admin/overview.queue.vue    |  127 ++
 .../src/pages/admin/overview.retention.vue         |   49 +
 .../frontend/src/pages/admin/overview.stats.vue    |  155 ++
 .../frontend/src/pages/admin/overview.users.vue    |   57 +
 packages/frontend/src/pages/admin/overview.vue     |  190 +++
 .../frontend/src/pages/admin/proxy-account.vue     |   62 +
 .../frontend/src/pages/admin/queue.chart.chart.vue |  186 ++
 packages/frontend/src/pages/admin/queue.chart.vue  |  149 ++
 packages/frontend/src/pages/admin/queue.vue        |   56 +
 packages/frontend/src/pages/admin/relays.vue       |  103 ++
 packages/frontend/src/pages/admin/security.vue     |  179 ++
 packages/frontend/src/pages/admin/settings.vue     |  262 +++
 packages/frontend/src/pages/admin/users.vue        |  170 ++
 packages/frontend/src/pages/announcements.vue      |   69 +
 packages/frontend/src/pages/antenna-timeline.vue   |  128 ++
 packages/frontend/src/pages/api-console.vue        |   89 +
 packages/frontend/src/pages/auth.form.vue          |   60 +
 packages/frontend/src/pages/auth.vue               |   91 +
 packages/frontend/src/pages/channel-editor.vue     |  122 ++
 packages/frontend/src/pages/channel.vue            |  184 ++
 packages/frontend/src/pages/channels.vue           |   79 +
 packages/frontend/src/pages/clip.vue               |  129 ++
 packages/frontend/src/pages/drive.vue              |   25 +
 packages/frontend/src/pages/emojis.emoji.vue       |   72 +
 packages/frontend/src/pages/explore.featured.vue   |   30 +
 packages/frontend/src/pages/explore.users.vue      |  148 ++
 packages/frontend/src/pages/explore.vue            |   87 +
 packages/frontend/src/pages/favorites.vue          |   49 +
 packages/frontend/src/pages/follow-requests.vue    |  153 ++
 packages/frontend/src/pages/follow.vue             |   62 +
 packages/frontend/src/pages/gallery/edit.vue       |  149 ++
 packages/frontend/src/pages/gallery/index.vue      |  139 ++
 packages/frontend/src/pages/gallery/post.vue       |  265 +++
 packages/frontend/src/pages/instance-info.vue      |  258 +++
 packages/frontend/src/pages/messaging/index.vue    |  327 ++++
 .../src/pages/messaging/messaging-room.form.vue    |  364 ++++
 .../src/pages/messaging/messaging-room.message.vue |  367 ++++
 .../src/pages/messaging/messaging-room.vue         |  411 +++++
 packages/frontend/src/pages/mfm-cheat-sheet.vue    |  387 +++++
 packages/frontend/src/pages/miauth.vue             |   90 +
 packages/frontend/src/pages/my-antennas/create.vue |   46 +
 packages/frontend/src/pages/my-antennas/edit.vue   |   43 +
 packages/frontend/src/pages/my-antennas/editor.vue |  155 ++
 packages/frontend/src/pages/my-antennas/index.vue  |   64 +
 packages/frontend/src/pages/my-clips/index.vue     |  100 ++
 packages/frontend/src/pages/my-lists/index.vue     |   82 +
 packages/frontend/src/pages/my-lists/list.vue      |  162 ++
 packages/frontend/src/pages/not-found.vue          |   22 +
 packages/frontend/src/pages/note.vue               |  206 +++
 packages/frontend/src/pages/notifications.vue      |   95 ++
 .../pages/page-editor/els/page-editor.el.image.vue |   63 +
 .../pages/page-editor/els/page-editor.el.note.vue  |   57 +
 .../page-editor/els/page-editor.el.section.vue     |   97 ++
 .../pages/page-editor/els/page-editor.el.text.vue  |   54 +
 .../src/pages/page-editor/page-editor.blocks.vue   |   65 +
 .../pages/page-editor/page-editor.container.vue    |  155 ++
 .../frontend/src/pages/page-editor/page-editor.vue |  394 +++++
 packages/frontend/src/pages/page.vue               |  277 +++
 packages/frontend/src/pages/pages.vue              |   99 ++
 packages/frontend/src/pages/preview.vue            |   27 +
 packages/frontend/src/pages/registry.keys.vue      |   96 ++
 packages/frontend/src/pages/registry.value.vue     |  123 ++
 packages/frontend/src/pages/registry.vue           |   74 +
 packages/frontend/src/pages/reset-password.vue     |   59 +
 packages/frontend/src/pages/scratchpad.vue         |  137 ++
 packages/frontend/src/pages/search.vue             |   38 +
 packages/frontend/src/pages/settings/2fa.vue       |  216 +++
 .../frontend/src/pages/settings/account-info.vue   |  158 ++
 packages/frontend/src/pages/settings/accounts.vue  |  143 ++
 packages/frontend/src/pages/settings/api.vue       |   46 +
 packages/frontend/src/pages/settings/apps.vue      |   96 ++
 .../frontend/src/pages/settings/custom-css.vue     |   46 +
 packages/frontend/src/pages/settings/deck.vue      |   39 +
 .../frontend/src/pages/settings/delete-account.vue |   52 +
 packages/frontend/src/pages/settings/drive.vue     |  145 ++
 packages/frontend/src/pages/settings/email.vue     |  111 ++
 packages/frontend/src/pages/settings/general.vue   |  196 +++
 .../frontend/src/pages/settings/import-export.vue  |  165 ++
 packages/frontend/src/pages/settings/index.vue     |  291 ++++
 .../frontend/src/pages/settings/instance-mute.vue  |   53 +
 .../frontend/src/pages/settings/integration.vue    |   99 ++
 .../frontend/src/pages/settings/mute-block.vue     |   61 +
 packages/frontend/src/pages/settings/navbar.vue    |   87 +
 .../frontend/src/pages/settings/notifications.vue  |   90 +
 packages/frontend/src/pages/settings/other.vue     |   47 +
 .../frontend/src/pages/settings/plugin.install.vue |  124 ++
 packages/frontend/src/pages/settings/plugin.vue    |   98 ++
 .../src/pages/settings/preferences-backups.vue     |  444 +++++
 packages/frontend/src/pages/settings/privacy.vue   |  100 ++
 packages/frontend/src/pages/settings/profile.vue   |  220 +++
 packages/frontend/src/pages/settings/reaction.vue  |  154 ++
 packages/frontend/src/pages/settings/security.vue  |  160 ++
 .../frontend/src/pages/settings/sounds.sound.vue   |   45 +
 packages/frontend/src/pages/settings/sounds.vue    |   82 +
 .../src/pages/settings/statusbar.statusbar.vue     |  140 ++
 packages/frontend/src/pages/settings/statusbar.vue |   54 +
 .../frontend/src/pages/settings/theme.install.vue  |   80 +
 .../frontend/src/pages/settings/theme.manage.vue   |   78 +
 packages/frontend/src/pages/settings/theme.vue     |  409 +++++
 .../frontend/src/pages/settings/webhook.edit.vue   |   95 ++
 .../frontend/src/pages/settings/webhook.new.vue    |   82 +
 packages/frontend/src/pages/settings/webhook.vue   |   53 +
 packages/frontend/src/pages/settings/word-mute.vue |  128 ++
 packages/frontend/src/pages/share.vue              |  169 ++
 packages/frontend/src/pages/signup-complete.vue    |   41 +
 packages/frontend/src/pages/tag.vue                |   35 +
 packages/frontend/src/pages/theme-editor.vue       |  283 ++++
 packages/frontend/src/pages/timeline.tutorial.vue  |  142 ++
 packages/frontend/src/pages/timeline.vue           |  183 ++
 packages/frontend/src/pages/user-info.vue          |  485 ++++++
 packages/frontend/src/pages/user-list-timeline.vue |  121 ++
 packages/frontend/src/pages/user/clips.vue         |   47 +
 packages/frontend/src/pages/user/follow-list.vue   |   47 +
 packages/frontend/src/pages/user/followers.vue     |   61 +
 packages/frontend/src/pages/user/following.vue     |   61 +
 packages/frontend/src/pages/user/gallery.vue       |   38 +
 packages/frontend/src/pages/user/home.vue          |  530 ++++++
 .../frontend/src/pages/user/index.activity.vue     |   52 +
 packages/frontend/src/pages/user/index.photos.vue  |  102 ++
 .../frontend/src/pages/user/index.timeline.vue     |   45 +
 packages/frontend/src/pages/user/index.vue         |  113 ++
 packages/frontend/src/pages/user/pages.vue         |   30 +
 packages/frontend/src/pages/user/reactions.vue     |   61 +
 packages/frontend/src/pages/welcome.entrance.a.vue |  309 ++++
 packages/frontend/src/pages/welcome.entrance.b.vue |  237 +++
 packages/frontend/src/pages/welcome.entrance.c.vue |  306 ++++
 packages/frontend/src/pages/welcome.setup.vue      |   89 +
 packages/frontend/src/pages/welcome.timeline.vue   |   99 ++
 packages/frontend/src/pages/welcome.vue            |   30 +
 packages/frontend/src/pizzax.ts                    |  169 ++
 packages/frontend/src/plugin.ts                    |  123 ++
 packages/frontend/src/router.ts                    |  501 ++++++
 packages/frontend/src/scripts/2fa.ts               |   33 +
 packages/frontend/src/scripts/aiscript/api.ts      |   43 +
 packages/frontend/src/scripts/array.ts             |  149 ++
 packages/frontend/src/scripts/autocomplete.ts      |  276 +++
 packages/frontend/src/scripts/chart-vline.ts       |   21 +
 packages/frontend/src/scripts/check-word-mute.ts   |   37 +
 packages/frontend/src/scripts/clone.ts             |   18 +
 packages/frontend/src/scripts/collect-page-vars.ts |   68 +
 packages/frontend/src/scripts/contains.ts          |    9 +
 packages/frontend/src/scripts/copy-to-clipboard.ts |   33 +
 packages/frontend/src/scripts/device-kind.ts       |   10 +
 packages/frontend/src/scripts/emoji-base.ts        |   20 +
 packages/frontend/src/scripts/emojilist.ts         |   17 +
 .../src/scripts/extract-avg-color-from-blurhash.ts |    9 +
 packages/frontend/src/scripts/extract-mentions.ts  |   11 +
 .../frontend/src/scripts/extract-url-from-mfm.ts   |   19 +
 packages/frontend/src/scripts/focus.ts             |   27 +
 packages/frontend/src/scripts/form.ts              |   59 +
 .../frontend/src/scripts/format-time-string.ts     |   50 +
 packages/frontend/src/scripts/gen-search-query.ts  |   30 +
 .../frontend/src/scripts/get-account-from-id.ts    |    7 +
 packages/frontend/src/scripts/get-note-menu.ts     |  341 ++++
 packages/frontend/src/scripts/get-note-summary.ts  |   55 +
 .../frontend/src/scripts/get-static-image-url.ts   |   19 +
 packages/frontend/src/scripts/get-user-menu.ts     |  253 +++
 packages/frontend/src/scripts/get-user-name.ts     |    3 +
 packages/frontend/src/scripts/hotkey.ts            |   90 +
 packages/frontend/src/scripts/hpml/block.ts        |  109 ++
 packages/frontend/src/scripts/hpml/evaluator.ts    |  232 +++
 packages/frontend/src/scripts/hpml/expr.ts         |   79 +
 packages/frontend/src/scripts/hpml/index.ts        |  103 ++
 packages/frontend/src/scripts/hpml/lib.ts          |  247 +++
 packages/frontend/src/scripts/hpml/type-checker.ts |  191 +++
 packages/frontend/src/scripts/i18n.ts              |   29 +
 packages/frontend/src/scripts/idb-proxy.ts         |   36 +
 packages/frontend/src/scripts/initialize-sw.ts     |   13 +
 .../frontend/src/scripts/is-device-darkmode.ts     |    3 +
 packages/frontend/src/scripts/keycode.ts           |   33 +
 packages/frontend/src/scripts/langmap.ts           |  666 ++++++++
 packages/frontend/src/scripts/login-id.ts          |   11 +
 packages/frontend/src/scripts/lookup-user.ts       |   36 +
 packages/frontend/src/scripts/media-proxy.ts       |   15 +
 packages/frontend/src/scripts/mfm-tags.ts          |    1 +
 packages/frontend/src/scripts/page-metadata.ts     |   41 +
 packages/frontend/src/scripts/physics.ts           |  152 ++
 packages/frontend/src/scripts/please-login.ts      |   21 +
 packages/frontend/src/scripts/popout.ts            |   23 +
 packages/frontend/src/scripts/popup-position.ts    |  158 ++
 packages/frontend/src/scripts/reaction-picker.ts   |   41 +
 packages/frontend/src/scripts/safe-uri-decode.ts   |    7 +
 packages/frontend/src/scripts/scroll.ts            |   85 +
 packages/frontend/src/scripts/search.ts            |   63 +
 packages/frontend/src/scripts/select-file.ts       |  103 ++
 .../frontend/src/scripts/show-suspended-dialog.ts  |   10 +
 packages/frontend/src/scripts/shuffle.ts           |   19 +
 packages/frontend/src/scripts/sound.ts             |   66 +
 packages/frontend/src/scripts/sticky-sidebar.ts    |   50 +
 packages/frontend/src/scripts/theme-editor.ts      |   81 +
 packages/frontend/src/scripts/theme.ts             |  148 ++
 packages/frontend/src/scripts/time.ts              |   39 +
 packages/frontend/src/scripts/timezones.ts         |   49 +
 packages/frontend/src/scripts/touch.ts             |   23 +
 packages/frontend/src/scripts/unison-reload.ts     |   15 +
 packages/frontend/src/scripts/upload.ts            |  137 ++
 .../frontend/src/scripts/upload/compress-config.ts |   23 +
 packages/frontend/src/scripts/url.ts               |   13 +
 packages/frontend/src/scripts/use-chart-tooltip.ts |   54 +
 packages/frontend/src/scripts/use-interval.ts      |   24 +
 packages/frontend/src/scripts/use-leave-guard.ts   |   47 +
 packages/frontend/src/scripts/use-note-capture.ts  |  110 ++
 packages/frontend/src/scripts/use-tooltip.ts       |   86 +
 packages/frontend/src/store.ts                     |  383 +++++
 packages/frontend/src/stream.ts                    |    8 +
 packages/frontend/src/style.scss                   |  584 +++++++
 packages/frontend/src/theme-store.ts               |   34 +
 packages/frontend/src/themes/_dark.json5           |   99 ++
 packages/frontend/src/themes/_light.json5          |   99 ++
 packages/frontend/src/themes/d-astro.json5         |   78 +
 packages/frontend/src/themes/d-botanical.json5     |   26 +
 packages/frontend/src/themes/d-cherry.json5        |   20 +
 packages/frontend/src/themes/d-dark.json5          |   26 +
 packages/frontend/src/themes/d-future.json5        |   27 +
 packages/frontend/src/themes/d-green-lime.json5    |   24 +
 packages/frontend/src/themes/d-green-orange.json5  |   24 +
 packages/frontend/src/themes/d-ice.json5           |   13 +
 packages/frontend/src/themes/d-persimmon.json5     |   25 +
 packages/frontend/src/themes/d-u0.json5            |   88 +
 packages/frontend/src/themes/l-apricot.json5       |   22 +
 packages/frontend/src/themes/l-cherry.json5        |   21 +
 packages/frontend/src/themes/l-coffee.json5        |   21 +
 packages/frontend/src/themes/l-light.json5         |   20 +
 packages/frontend/src/themes/l-rainy.json5         |   21 +
 packages/frontend/src/themes/l-sushi.json5         |   18 +
 packages/frontend/src/themes/l-u0.json5            |   87 +
 packages/frontend/src/themes/l-vivid.json5         |   82 +
 packages/frontend/src/types/menu.ts                |   21 +
 packages/frontend/src/ui/_common_/common.vue       |  139 ++
 .../frontend/src/ui/_common_/navbar-for-mobile.vue |  314 ++++
 packages/frontend/src/ui/_common_/navbar.vue       |  521 ++++++
 .../src/ui/_common_/statusbar-federation.vue       |  108 ++
 .../frontend/src/ui/_common_/statusbar-rss.vue     |   93 +
 .../src/ui/_common_/statusbar-user-list.vue        |  113 ++
 packages/frontend/src/ui/_common_/statusbars.vue   |   92 +
 .../frontend/src/ui/_common_/stream-indicator.vue  |   61 +
 packages/frontend/src/ui/_common_/sw-inject.ts     |   35 +
 packages/frontend/src/ui/_common_/upload.vue       |  129 ++
 packages/frontend/src/ui/classic.header.vue        |  217 +++
 packages/frontend/src/ui/classic.sidebar.vue       |  268 +++
 packages/frontend/src/ui/classic.vue               |  320 ++++
 packages/frontend/src/ui/classic.widgets.vue       |   84 +
 packages/frontend/src/ui/deck.vue                  |  435 +++++
 packages/frontend/src/ui/deck/antenna-column.vue   |   70 +
 packages/frontend/src/ui/deck/column-core.vue      |   34 +
 packages/frontend/src/ui/deck/column.vue           |  398 +++++
 packages/frontend/src/ui/deck/deck-store.ts        |  296 ++++
 packages/frontend/src/ui/deck/direct-column.vue    |   31 +
 packages/frontend/src/ui/deck/list-column.vue      |   58 +
 packages/frontend/src/ui/deck/main-column.vue      |   68 +
 packages/frontend/src/ui/deck/mentions-column.vue  |   28 +
 .../frontend/src/ui/deck/notifications-column.vue  |   44 +
 packages/frontend/src/ui/deck/tl-column.vue        |  119 ++
 packages/frontend/src/ui/deck/widgets-column.vue   |   69 +
 packages/frontend/src/ui/universal.vue             |  390 +++++
 packages/frontend/src/ui/universal.widgets.vue     |   71 +
 packages/frontend/src/ui/visitor.vue               |   19 +
 packages/frontend/src/ui/visitor/a.vue             |  259 +++
 packages/frontend/src/ui/visitor/b.vue             |  248 +++
 packages/frontend/src/ui/visitor/header.vue        |  228 +++
 packages/frontend/src/ui/visitor/kanban.vue        |  257 +++
 packages/frontend/src/ui/zen.vue                   |   34 +
 .../frontend/src/widgets/activity.calendar.vue     |   81 +
 packages/frontend/src/widgets/activity.chart.vue   |   92 +
 packages/frontend/src/widgets/activity.vue         |   90 +
 packages/frontend/src/widgets/aichan.vue           |   74 +
 packages/frontend/src/widgets/aiscript.vue         |  175 ++
 packages/frontend/src/widgets/button.vue           |  103 ++
 packages/frontend/src/widgets/calendar.vue         |  213 +++
 packages/frontend/src/widgets/clock.vue            |  203 +++
 packages/frontend/src/widgets/digital-clock.vue    |   92 +
 packages/frontend/src/widgets/federation.vue       |  147 ++
 packages/frontend/src/widgets/index.ts             |   53 +
 packages/frontend/src/widgets/instance-cloud.vue   |   81 +
 packages/frontend/src/widgets/job-queue.vue        |  197 +++
 packages/frontend/src/widgets/memo.vue             |  111 ++
 packages/frontend/src/widgets/notifications.vue    |   70 +
 packages/frontend/src/widgets/online-users.vue     |   78 +
 packages/frontend/src/widgets/photos.vue           |  123 ++
 packages/frontend/src/widgets/post-form.vue        |   35 +
 packages/frontend/src/widgets/rss-ticker.vue       |  152 ++
 packages/frontend/src/widgets/rss.vue              |   96 ++
 .../frontend/src/widgets/server-metric/cpu-mem.vue |  167 ++
 .../frontend/src/widgets/server-metric/cpu.vue     |   65 +
 .../frontend/src/widgets/server-metric/disk.vue    |   57 +
 .../frontend/src/widgets/server-metric/index.vue   |   87 +
 .../frontend/src/widgets/server-metric/mem.vue     |   73 +
 .../frontend/src/widgets/server-metric/net.vue     |  140 ++
 .../frontend/src/widgets/server-metric/pie.vue     |   52 +
 packages/frontend/src/widgets/slideshow.vue        |  159 ++
 packages/frontend/src/widgets/timeline.vue         |  129 ++
 packages/frontend/src/widgets/trends.vue           |  120 ++
 packages/frontend/src/widgets/unix-clock.vue       |  116 ++
 packages/frontend/src/widgets/user-list.vue        |  136 ++
 packages/frontend/src/widgets/widget.ts            |   73 +
 packages/frontend/tsconfig.json                    |   47 +
 packages/frontend/vite.config.ts                   |   70 +
 packages/frontend/vite.json5.ts                    |   38 +
 scripts/clean-all.js                               |    4 +-
 scripts/clean.js                                   |    2 +-
 scripts/dev.js                                     |    2 +-
 yarn.lock                                          |  176 +-
 1172 files changed, 68966 insertions(+), 68966 deletions(-)
 delete mode 100644 packages/client/.eslintrc.js
 delete mode 100644 packages/client/.vscode/settings.json
 delete mode 100644 packages/client/@types/global.d.ts
 delete mode 100644 packages/client/@types/theme.d.ts
 delete mode 100644 packages/client/@types/vue.d.ts
 delete mode 100644 packages/client/assets/about-icon.png
 delete mode 100644 packages/client/assets/dummy.png
 delete mode 100644 packages/client/assets/fedi.jpg
 delete mode 100644 packages/client/assets/label-red.svg
 delete mode 100644 packages/client/assets/label.svg
 delete mode 100644 packages/client/assets/misskey.svg
 delete mode 100644 packages/client/assets/remove.png
 delete mode 100644 packages/client/assets/sounds/aisha/1.mp3
 delete mode 100644 packages/client/assets/sounds/aisha/2.mp3
 delete mode 100644 packages/client/assets/sounds/aisha/3.mp3
 delete mode 100644 packages/client/assets/sounds/noizenecio/kick_gaba1.mp3
 delete mode 100644 packages/client/assets/sounds/noizenecio/kick_gaba2.mp3
 delete mode 100644 packages/client/assets/sounds/noizenecio/kick_gaba3.mp3
 delete mode 100644 packages/client/assets/sounds/noizenecio/kick_gaba4.mp3
 delete mode 100644 packages/client/assets/sounds/noizenecio/kick_gaba5.mp3
 delete mode 100644 packages/client/assets/sounds/noizenecio/kick_gaba6.mp3
 delete mode 100644 packages/client/assets/sounds/noizenecio/kick_gaba7.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/down.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/kick.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/pirori-square-wet.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/pirori-wet.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/pirori.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/poi1.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/poi2.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/pope1.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/pope2.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/popo.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/queue-jammed.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/reverved.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/ryukyu.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/snare.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/square-pico.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/triple.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/up.mp3
 delete mode 100644 packages/client/assets/sounds/syuilo/waon.mp3
 delete mode 100644 packages/client/assets/tagcanvas.min.js
 delete mode 100644 packages/client/assets/unread.svg
 delete mode 100644 packages/client/package.json
 delete mode 100644 packages/client/src/account.ts
 delete mode 100644 packages/client/src/components/MkAbuseReport.vue
 delete mode 100644 packages/client/src/components/MkAbuseReportWindow.vue
 delete mode 100644 packages/client/src/components/MkActiveUsersHeatmap.vue
 delete mode 100644 packages/client/src/components/MkAnalogClock.vue
 delete mode 100644 packages/client/src/components/MkAutocomplete.vue
 delete mode 100644 packages/client/src/components/MkAvatars.vue
 delete mode 100644 packages/client/src/components/MkButton.vue
 delete mode 100644 packages/client/src/components/MkCaptcha.vue
 delete mode 100644 packages/client/src/components/MkChannelFollowButton.vue
 delete mode 100644 packages/client/src/components/MkChannelPreview.vue
 delete mode 100644 packages/client/src/components/MkChart.vue
 delete mode 100644 packages/client/src/components/MkChartTooltip.vue
 delete mode 100644 packages/client/src/components/MkCode.core.vue
 delete mode 100644 packages/client/src/components/MkCode.vue
 delete mode 100644 packages/client/src/components/MkContainer.vue
 delete mode 100644 packages/client/src/components/MkContextMenu.vue
 delete mode 100644 packages/client/src/components/MkCropperDialog.vue
 delete mode 100644 packages/client/src/components/MkCwButton.vue
 delete mode 100644 packages/client/src/components/MkDateSeparatedList.vue
 delete mode 100644 packages/client/src/components/MkDialog.vue
 delete mode 100644 packages/client/src/components/MkDigitalClock.vue
 delete mode 100644 packages/client/src/components/MkDrive.file.vue
 delete mode 100644 packages/client/src/components/MkDrive.folder.vue
 delete mode 100644 packages/client/src/components/MkDrive.navFolder.vue
 delete mode 100644 packages/client/src/components/MkDrive.vue
 delete mode 100644 packages/client/src/components/MkDriveFileThumbnail.vue
 delete mode 100644 packages/client/src/components/MkDriveSelectDialog.vue
 delete mode 100644 packages/client/src/components/MkDriveWindow.vue
 delete mode 100644 packages/client/src/components/MkEmojiPicker.section.vue
 delete mode 100644 packages/client/src/components/MkEmojiPicker.vue
 delete mode 100644 packages/client/src/components/MkEmojiPickerDialog.vue
 delete mode 100644 packages/client/src/components/MkEmojiPickerWindow.vue
 delete mode 100644 packages/client/src/components/MkFeaturedPhotos.vue
 delete mode 100644 packages/client/src/components/MkFileCaptionEditWindow.vue
 delete mode 100644 packages/client/src/components/MkFileListForAdmin.vue
 delete mode 100644 packages/client/src/components/MkFolder.vue
 delete mode 100644 packages/client/src/components/MkFollowButton.vue
 delete mode 100644 packages/client/src/components/MkForgotPassword.vue
 delete mode 100644 packages/client/src/components/MkFormDialog.vue
 delete mode 100644 packages/client/src/components/MkFormula.vue
 delete mode 100644 packages/client/src/components/MkFormulaCore.vue
 delete mode 100644 packages/client/src/components/MkGalleryPostPreview.vue
 delete mode 100644 packages/client/src/components/MkGoogle.vue
 delete mode 100644 packages/client/src/components/MkImageViewer.vue
 delete mode 100644 packages/client/src/components/MkImgWithBlurhash.vue
 delete mode 100644 packages/client/src/components/MkInfo.vue
 delete mode 100644 packages/client/src/components/MkInstanceCardMini.vue
 delete mode 100644 packages/client/src/components/MkInstanceStats.vue
 delete mode 100644 packages/client/src/components/MkInstanceTicker.vue
 delete mode 100644 packages/client/src/components/MkKeyValue.vue
 delete mode 100644 packages/client/src/components/MkLaunchPad.vue
 delete mode 100644 packages/client/src/components/MkLink.vue
 delete mode 100644 packages/client/src/components/MkMarquee.vue
 delete mode 100644 packages/client/src/components/MkMediaBanner.vue
 delete mode 100644 packages/client/src/components/MkMediaImage.vue
 delete mode 100644 packages/client/src/components/MkMediaList.vue
 delete mode 100644 packages/client/src/components/MkMediaVideo.vue
 delete mode 100644 packages/client/src/components/MkMention.vue
 delete mode 100644 packages/client/src/components/MkMenu.child.vue
 delete mode 100644 packages/client/src/components/MkMenu.vue
 delete mode 100644 packages/client/src/components/MkMiniChart.vue
 delete mode 100644 packages/client/src/components/MkModal.vue
 delete mode 100644 packages/client/src/components/MkModalPageWindow.vue
 delete mode 100644 packages/client/src/components/MkModalWindow.vue
 delete mode 100644 packages/client/src/components/MkNote.vue
 delete mode 100644 packages/client/src/components/MkNoteDetailed.vue
 delete mode 100644 packages/client/src/components/MkNoteHeader.vue
 delete mode 100644 packages/client/src/components/MkNotePreview.vue
 delete mode 100644 packages/client/src/components/MkNoteSimple.vue
 delete mode 100644 packages/client/src/components/MkNoteSub.vue
 delete mode 100644 packages/client/src/components/MkNotes.vue
 delete mode 100644 packages/client/src/components/MkNotification.vue
 delete mode 100644 packages/client/src/components/MkNotificationSettingWindow.vue
 delete mode 100644 packages/client/src/components/MkNotificationToast.vue
 delete mode 100644 packages/client/src/components/MkNotifications.vue
 delete mode 100644 packages/client/src/components/MkNumberDiff.vue
 delete mode 100644 packages/client/src/components/MkObjectView.value.vue
 delete mode 100644 packages/client/src/components/MkObjectView.vue
 delete mode 100644 packages/client/src/components/MkPagePreview.vue
 delete mode 100644 packages/client/src/components/MkPageWindow.vue
 delete mode 100644 packages/client/src/components/MkPagination.vue
 delete mode 100644 packages/client/src/components/MkPoll.vue
 delete mode 100644 packages/client/src/components/MkPollEditor.vue
 delete mode 100644 packages/client/src/components/MkPopupMenu.vue
 delete mode 100644 packages/client/src/components/MkPostForm.vue
 delete mode 100644 packages/client/src/components/MkPostFormAttaches.vue
 delete mode 100644 packages/client/src/components/MkPostFormDialog.vue
 delete mode 100644 packages/client/src/components/MkPushNotificationAllowButton.vue
 delete mode 100644 packages/client/src/components/MkReactionIcon.vue
 delete mode 100644 packages/client/src/components/MkReactionTooltip.vue
 delete mode 100644 packages/client/src/components/MkReactionsViewer.details.vue
 delete mode 100644 packages/client/src/components/MkReactionsViewer.reaction.vue
 delete mode 100644 packages/client/src/components/MkReactionsViewer.vue
 delete mode 100644 packages/client/src/components/MkRemoteCaution.vue
 delete mode 100644 packages/client/src/components/MkRenoteButton.vue
 delete mode 100644 packages/client/src/components/MkRipple.vue
 delete mode 100644 packages/client/src/components/MkSample.vue
 delete mode 100644 packages/client/src/components/MkSignin.vue
 delete mode 100644 packages/client/src/components/MkSigninDialog.vue
 delete mode 100644 packages/client/src/components/MkSignup.vue
 delete mode 100644 packages/client/src/components/MkSignupDialog.vue
 delete mode 100644 packages/client/src/components/MkSparkle.vue
 delete mode 100644 packages/client/src/components/MkSubNoteContent.vue
 delete mode 100644 packages/client/src/components/MkSuperMenu.vue
 delete mode 100644 packages/client/src/components/MkTab.vue
 delete mode 100644 packages/client/src/components/MkTagCloud.vue
 delete mode 100644 packages/client/src/components/MkTimeline.vue
 delete mode 100644 packages/client/src/components/MkToast.vue
 delete mode 100644 packages/client/src/components/MkTokenGenerateWindow.vue
 delete mode 100644 packages/client/src/components/MkTooltip.vue
 delete mode 100644 packages/client/src/components/MkUpdated.vue
 delete mode 100644 packages/client/src/components/MkUrlPreview.vue
 delete mode 100644 packages/client/src/components/MkUrlPreviewPopup.vue
 delete mode 100644 packages/client/src/components/MkUserCardMini.vue
 delete mode 100644 packages/client/src/components/MkUserInfo.vue
 delete mode 100644 packages/client/src/components/MkUserList.vue
 delete mode 100644 packages/client/src/components/MkUserOnlineIndicator.vue
 delete mode 100644 packages/client/src/components/MkUserPreview.vue
 delete mode 100644 packages/client/src/components/MkUserSelectDialog.vue
 delete mode 100644 packages/client/src/components/MkUsersTooltip.vue
 delete mode 100644 packages/client/src/components/MkVisibility.vue
 delete mode 100644 packages/client/src/components/MkVisibilityPicker.vue
 delete mode 100644 packages/client/src/components/MkWaitingDialog.vue
 delete mode 100644 packages/client/src/components/MkWidgets.vue
 delete mode 100644 packages/client/src/components/MkWindow.vue
 delete mode 100644 packages/client/src/components/MkYoutubePlayer.vue
 delete mode 100644 packages/client/src/components/form/checkbox.vue
 delete mode 100644 packages/client/src/components/form/folder.vue
 delete mode 100644 packages/client/src/components/form/input.vue
 delete mode 100644 packages/client/src/components/form/link.vue
 delete mode 100644 packages/client/src/components/form/radio.vue
 delete mode 100644 packages/client/src/components/form/radios.vue
 delete mode 100644 packages/client/src/components/form/range.vue
 delete mode 100644 packages/client/src/components/form/section.vue
 delete mode 100644 packages/client/src/components/form/select.vue
 delete mode 100644 packages/client/src/components/form/slot.vue
 delete mode 100644 packages/client/src/components/form/split.vue
 delete mode 100644 packages/client/src/components/form/suspense.vue
 delete mode 100644 packages/client/src/components/form/switch.vue
 delete mode 100644 packages/client/src/components/form/textarea.vue
 delete mode 100644 packages/client/src/components/global/MkA.vue
 delete mode 100644 packages/client/src/components/global/MkAcct.vue
 delete mode 100644 packages/client/src/components/global/MkAd.vue
 delete mode 100644 packages/client/src/components/global/MkAvatar.vue
 delete mode 100644 packages/client/src/components/global/MkEllipsis.vue
 delete mode 100644 packages/client/src/components/global/MkEmoji.vue
 delete mode 100644 packages/client/src/components/global/MkError.vue
 delete mode 100644 packages/client/src/components/global/MkLoading.vue
 delete mode 100644 packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
 delete mode 100644 packages/client/src/components/global/MkPageHeader.vue
 delete mode 100644 packages/client/src/components/global/MkSpacer.vue
 delete mode 100644 packages/client/src/components/global/MkStickyContainer.vue
 delete mode 100644 packages/client/src/components/global/MkTime.vue
 delete mode 100644 packages/client/src/components/global/MkUrl.vue
 delete mode 100644 packages/client/src/components/global/MkUserName.vue
 delete mode 100644 packages/client/src/components/global/RouterView.vue
 delete mode 100644 packages/client/src/components/global/i18n.ts
 delete mode 100644 packages/client/src/components/index.ts
 delete mode 100644 packages/client/src/components/mfm.ts
 delete mode 100644 packages/client/src/components/page/page.block.vue
 delete mode 100644 packages/client/src/components/page/page.button.vue
 delete mode 100644 packages/client/src/components/page/page.canvas.vue
 delete mode 100644 packages/client/src/components/page/page.counter.vue
 delete mode 100644 packages/client/src/components/page/page.if.vue
 delete mode 100644 packages/client/src/components/page/page.image.vue
 delete mode 100644 packages/client/src/components/page/page.note.vue
 delete mode 100644 packages/client/src/components/page/page.number-input.vue
 delete mode 100644 packages/client/src/components/page/page.post.vue
 delete mode 100644 packages/client/src/components/page/page.radio-button.vue
 delete mode 100644 packages/client/src/components/page/page.section.vue
 delete mode 100644 packages/client/src/components/page/page.switch.vue
 delete mode 100644 packages/client/src/components/page/page.text-input.vue
 delete mode 100644 packages/client/src/components/page/page.text.vue
 delete mode 100644 packages/client/src/components/page/page.textarea-input.vue
 delete mode 100644 packages/client/src/components/page/page.textarea.vue
 delete mode 100644 packages/client/src/components/page/page.vue
 delete mode 100644 packages/client/src/config.ts
 delete mode 100644 packages/client/src/const.ts
 delete mode 100644 packages/client/src/directives/adaptive-border.ts
 delete mode 100644 packages/client/src/directives/anim.ts
 delete mode 100644 packages/client/src/directives/appear.ts
 delete mode 100644 packages/client/src/directives/click-anime.ts
 delete mode 100644 packages/client/src/directives/follow-append.ts
 delete mode 100644 packages/client/src/directives/get-size.ts
 delete mode 100644 packages/client/src/directives/hotkey.ts
 delete mode 100644 packages/client/src/directives/index.ts
 delete mode 100644 packages/client/src/directives/panel.ts
 delete mode 100644 packages/client/src/directives/ripple.ts
 delete mode 100644 packages/client/src/directives/size.ts
 delete mode 100644 packages/client/src/directives/tooltip.ts
 delete mode 100644 packages/client/src/directives/user-preview.ts
 delete mode 100644 packages/client/src/emojilist.json
 delete mode 100644 packages/client/src/events.ts
 delete mode 100644 packages/client/src/filters/bytes.ts
 delete mode 100644 packages/client/src/filters/note.ts
 delete mode 100644 packages/client/src/filters/number.ts
 delete mode 100644 packages/client/src/filters/user.ts
 delete mode 100644 packages/client/src/i18n.ts
 delete mode 100644 packages/client/src/init.ts
 delete mode 100644 packages/client/src/instance.ts
 delete mode 100644 packages/client/src/navbar.ts
 delete mode 100644 packages/client/src/nirax.ts
 delete mode 100644 packages/client/src/os.ts
 delete mode 100644 packages/client/src/pages/_empty_.vue
 delete mode 100644 packages/client/src/pages/_error_.vue
 delete mode 100644 packages/client/src/pages/_loading_.vue
 delete mode 100644 packages/client/src/pages/about-misskey.vue
 delete mode 100644 packages/client/src/pages/about.emojis.vue
 delete mode 100644 packages/client/src/pages/about.federation.vue
 delete mode 100644 packages/client/src/pages/about.vue
 delete mode 100644 packages/client/src/pages/admin-file.vue
 delete mode 100644 packages/client/src/pages/admin/_header_.vue
 delete mode 100644 packages/client/src/pages/admin/abuses.vue
 delete mode 100644 packages/client/src/pages/admin/ads.vue
 delete mode 100644 packages/client/src/pages/admin/announcements.vue
 delete mode 100644 packages/client/src/pages/admin/bot-protection.vue
 delete mode 100644 packages/client/src/pages/admin/database.vue
 delete mode 100644 packages/client/src/pages/admin/email-settings.vue
 delete mode 100644 packages/client/src/pages/admin/emoji-edit-dialog.vue
 delete mode 100644 packages/client/src/pages/admin/emojis.vue
 delete mode 100644 packages/client/src/pages/admin/files.vue
 delete mode 100644 packages/client/src/pages/admin/index.vue
 delete mode 100644 packages/client/src/pages/admin/instance-block.vue
 delete mode 100644 packages/client/src/pages/admin/integrations.discord.vue
 delete mode 100644 packages/client/src/pages/admin/integrations.github.vue
 delete mode 100644 packages/client/src/pages/admin/integrations.twitter.vue
 delete mode 100644 packages/client/src/pages/admin/integrations.vue
 delete mode 100644 packages/client/src/pages/admin/metrics.vue
 delete mode 100644 packages/client/src/pages/admin/object-storage.vue
 delete mode 100644 packages/client/src/pages/admin/other-settings.vue
 delete mode 100644 packages/client/src/pages/admin/overview.active-users.vue
 delete mode 100644 packages/client/src/pages/admin/overview.ap-requests.vue
 delete mode 100644 packages/client/src/pages/admin/overview.federation.vue
 delete mode 100644 packages/client/src/pages/admin/overview.heatmap.vue
 delete mode 100644 packages/client/src/pages/admin/overview.instances.vue
 delete mode 100644 packages/client/src/pages/admin/overview.moderators.vue
 delete mode 100644 packages/client/src/pages/admin/overview.pie.vue
 delete mode 100644 packages/client/src/pages/admin/overview.queue.chart.vue
 delete mode 100644 packages/client/src/pages/admin/overview.queue.vue
 delete mode 100644 packages/client/src/pages/admin/overview.retention.vue
 delete mode 100644 packages/client/src/pages/admin/overview.stats.vue
 delete mode 100644 packages/client/src/pages/admin/overview.users.vue
 delete mode 100644 packages/client/src/pages/admin/overview.vue
 delete mode 100644 packages/client/src/pages/admin/proxy-account.vue
 delete mode 100644 packages/client/src/pages/admin/queue.chart.chart.vue
 delete mode 100644 packages/client/src/pages/admin/queue.chart.vue
 delete mode 100644 packages/client/src/pages/admin/queue.vue
 delete mode 100644 packages/client/src/pages/admin/relays.vue
 delete mode 100644 packages/client/src/pages/admin/security.vue
 delete mode 100644 packages/client/src/pages/admin/settings.vue
 delete mode 100644 packages/client/src/pages/admin/users.vue
 delete mode 100644 packages/client/src/pages/announcements.vue
 delete mode 100644 packages/client/src/pages/antenna-timeline.vue
 delete mode 100644 packages/client/src/pages/api-console.vue
 delete mode 100644 packages/client/src/pages/auth.form.vue
 delete mode 100644 packages/client/src/pages/auth.vue
 delete mode 100644 packages/client/src/pages/channel-editor.vue
 delete mode 100644 packages/client/src/pages/channel.vue
 delete mode 100644 packages/client/src/pages/channels.vue
 delete mode 100644 packages/client/src/pages/clip.vue
 delete mode 100644 packages/client/src/pages/drive.vue
 delete mode 100644 packages/client/src/pages/emojis.emoji.vue
 delete mode 100644 packages/client/src/pages/explore.featured.vue
 delete mode 100644 packages/client/src/pages/explore.users.vue
 delete mode 100644 packages/client/src/pages/explore.vue
 delete mode 100644 packages/client/src/pages/favorites.vue
 delete mode 100644 packages/client/src/pages/follow-requests.vue
 delete mode 100644 packages/client/src/pages/follow.vue
 delete mode 100644 packages/client/src/pages/gallery/edit.vue
 delete mode 100644 packages/client/src/pages/gallery/index.vue
 delete mode 100644 packages/client/src/pages/gallery/post.vue
 delete mode 100644 packages/client/src/pages/instance-info.vue
 delete mode 100644 packages/client/src/pages/messaging/index.vue
 delete mode 100644 packages/client/src/pages/messaging/messaging-room.form.vue
 delete mode 100644 packages/client/src/pages/messaging/messaging-room.message.vue
 delete mode 100644 packages/client/src/pages/messaging/messaging-room.vue
 delete mode 100644 packages/client/src/pages/mfm-cheat-sheet.vue
 delete mode 100644 packages/client/src/pages/miauth.vue
 delete mode 100644 packages/client/src/pages/my-antennas/create.vue
 delete mode 100644 packages/client/src/pages/my-antennas/edit.vue
 delete mode 100644 packages/client/src/pages/my-antennas/editor.vue
 delete mode 100644 packages/client/src/pages/my-antennas/index.vue
 delete mode 100644 packages/client/src/pages/my-clips/index.vue
 delete mode 100644 packages/client/src/pages/my-lists/index.vue
 delete mode 100644 packages/client/src/pages/my-lists/list.vue
 delete mode 100644 packages/client/src/pages/not-found.vue
 delete mode 100644 packages/client/src/pages/note.vue
 delete mode 100644 packages/client/src/pages/notifications.vue
 delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.image.vue
 delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.note.vue
 delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.section.vue
 delete mode 100644 packages/client/src/pages/page-editor/els/page-editor.el.text.vue
 delete mode 100644 packages/client/src/pages/page-editor/page-editor.blocks.vue
 delete mode 100644 packages/client/src/pages/page-editor/page-editor.container.vue
 delete mode 100644 packages/client/src/pages/page-editor/page-editor.vue
 delete mode 100644 packages/client/src/pages/page.vue
 delete mode 100644 packages/client/src/pages/pages.vue
 delete mode 100644 packages/client/src/pages/preview.vue
 delete mode 100644 packages/client/src/pages/registry.keys.vue
 delete mode 100644 packages/client/src/pages/registry.value.vue
 delete mode 100644 packages/client/src/pages/registry.vue
 delete mode 100644 packages/client/src/pages/reset-password.vue
 delete mode 100644 packages/client/src/pages/scratchpad.vue
 delete mode 100644 packages/client/src/pages/search.vue
 delete mode 100644 packages/client/src/pages/settings/2fa.vue
 delete mode 100644 packages/client/src/pages/settings/account-info.vue
 delete mode 100644 packages/client/src/pages/settings/accounts.vue
 delete mode 100644 packages/client/src/pages/settings/api.vue
 delete mode 100644 packages/client/src/pages/settings/apps.vue
 delete mode 100644 packages/client/src/pages/settings/custom-css.vue
 delete mode 100644 packages/client/src/pages/settings/deck.vue
 delete mode 100644 packages/client/src/pages/settings/delete-account.vue
 delete mode 100644 packages/client/src/pages/settings/drive.vue
 delete mode 100644 packages/client/src/pages/settings/email.vue
 delete mode 100644 packages/client/src/pages/settings/general.vue
 delete mode 100644 packages/client/src/pages/settings/import-export.vue
 delete mode 100644 packages/client/src/pages/settings/index.vue
 delete mode 100644 packages/client/src/pages/settings/instance-mute.vue
 delete mode 100644 packages/client/src/pages/settings/integration.vue
 delete mode 100644 packages/client/src/pages/settings/mute-block.vue
 delete mode 100644 packages/client/src/pages/settings/navbar.vue
 delete mode 100644 packages/client/src/pages/settings/notifications.vue
 delete mode 100644 packages/client/src/pages/settings/other.vue
 delete mode 100644 packages/client/src/pages/settings/plugin.install.vue
 delete mode 100644 packages/client/src/pages/settings/plugin.vue
 delete mode 100644 packages/client/src/pages/settings/preferences-backups.vue
 delete mode 100644 packages/client/src/pages/settings/privacy.vue
 delete mode 100644 packages/client/src/pages/settings/profile.vue
 delete mode 100644 packages/client/src/pages/settings/reaction.vue
 delete mode 100644 packages/client/src/pages/settings/security.vue
 delete mode 100644 packages/client/src/pages/settings/sounds.sound.vue
 delete mode 100644 packages/client/src/pages/settings/sounds.vue
 delete mode 100644 packages/client/src/pages/settings/statusbar.statusbar.vue
 delete mode 100644 packages/client/src/pages/settings/statusbar.vue
 delete mode 100644 packages/client/src/pages/settings/theme.install.vue
 delete mode 100644 packages/client/src/pages/settings/theme.manage.vue
 delete mode 100644 packages/client/src/pages/settings/theme.vue
 delete mode 100644 packages/client/src/pages/settings/webhook.edit.vue
 delete mode 100644 packages/client/src/pages/settings/webhook.new.vue
 delete mode 100644 packages/client/src/pages/settings/webhook.vue
 delete mode 100644 packages/client/src/pages/settings/word-mute.vue
 delete mode 100644 packages/client/src/pages/share.vue
 delete mode 100644 packages/client/src/pages/signup-complete.vue
 delete mode 100644 packages/client/src/pages/tag.vue
 delete mode 100644 packages/client/src/pages/theme-editor.vue
 delete mode 100644 packages/client/src/pages/timeline.tutorial.vue
 delete mode 100644 packages/client/src/pages/timeline.vue
 delete mode 100644 packages/client/src/pages/user-info.vue
 delete mode 100644 packages/client/src/pages/user-list-timeline.vue
 delete mode 100644 packages/client/src/pages/user/clips.vue
 delete mode 100644 packages/client/src/pages/user/follow-list.vue
 delete mode 100644 packages/client/src/pages/user/followers.vue
 delete mode 100644 packages/client/src/pages/user/following.vue
 delete mode 100644 packages/client/src/pages/user/gallery.vue
 delete mode 100644 packages/client/src/pages/user/home.vue
 delete mode 100644 packages/client/src/pages/user/index.activity.vue
 delete mode 100644 packages/client/src/pages/user/index.photos.vue
 delete mode 100644 packages/client/src/pages/user/index.timeline.vue
 delete mode 100644 packages/client/src/pages/user/index.vue
 delete mode 100644 packages/client/src/pages/user/pages.vue
 delete mode 100644 packages/client/src/pages/user/reactions.vue
 delete mode 100644 packages/client/src/pages/welcome.entrance.a.vue
 delete mode 100644 packages/client/src/pages/welcome.entrance.b.vue
 delete mode 100644 packages/client/src/pages/welcome.entrance.c.vue
 delete mode 100644 packages/client/src/pages/welcome.setup.vue
 delete mode 100644 packages/client/src/pages/welcome.timeline.vue
 delete mode 100644 packages/client/src/pages/welcome.vue
 delete mode 100644 packages/client/src/pizzax.ts
 delete mode 100644 packages/client/src/plugin.ts
 delete mode 100644 packages/client/src/router.ts
 delete mode 100644 packages/client/src/scripts/2fa.ts
 delete mode 100644 packages/client/src/scripts/aiscript/api.ts
 delete mode 100644 packages/client/src/scripts/array.ts
 delete mode 100644 packages/client/src/scripts/autocomplete.ts
 delete mode 100644 packages/client/src/scripts/chart-vline.ts
 delete mode 100644 packages/client/src/scripts/check-word-mute.ts
 delete mode 100644 packages/client/src/scripts/clone.ts
 delete mode 100644 packages/client/src/scripts/collect-page-vars.ts
 delete mode 100644 packages/client/src/scripts/contains.ts
 delete mode 100644 packages/client/src/scripts/copy-to-clipboard.ts
 delete mode 100644 packages/client/src/scripts/device-kind.ts
 delete mode 100644 packages/client/src/scripts/emoji-base.ts
 delete mode 100644 packages/client/src/scripts/emojilist.ts
 delete mode 100644 packages/client/src/scripts/extract-avg-color-from-blurhash.ts
 delete mode 100644 packages/client/src/scripts/extract-mentions.ts
 delete mode 100644 packages/client/src/scripts/extract-url-from-mfm.ts
 delete mode 100644 packages/client/src/scripts/focus.ts
 delete mode 100644 packages/client/src/scripts/form.ts
 delete mode 100644 packages/client/src/scripts/format-time-string.ts
 delete mode 100644 packages/client/src/scripts/gen-search-query.ts
 delete mode 100644 packages/client/src/scripts/get-account-from-id.ts
 delete mode 100644 packages/client/src/scripts/get-note-menu.ts
 delete mode 100644 packages/client/src/scripts/get-note-summary.ts
 delete mode 100644 packages/client/src/scripts/get-static-image-url.ts
 delete mode 100644 packages/client/src/scripts/get-user-menu.ts
 delete mode 100644 packages/client/src/scripts/get-user-name.ts
 delete mode 100644 packages/client/src/scripts/hotkey.ts
 delete mode 100644 packages/client/src/scripts/hpml/block.ts
 delete mode 100644 packages/client/src/scripts/hpml/evaluator.ts
 delete mode 100644 packages/client/src/scripts/hpml/expr.ts
 delete mode 100644 packages/client/src/scripts/hpml/index.ts
 delete mode 100644 packages/client/src/scripts/hpml/lib.ts
 delete mode 100644 packages/client/src/scripts/hpml/type-checker.ts
 delete mode 100644 packages/client/src/scripts/i18n.ts
 delete mode 100644 packages/client/src/scripts/idb-proxy.ts
 delete mode 100644 packages/client/src/scripts/initialize-sw.ts
 delete mode 100644 packages/client/src/scripts/is-device-darkmode.ts
 delete mode 100644 packages/client/src/scripts/keycode.ts
 delete mode 100644 packages/client/src/scripts/langmap.ts
 delete mode 100644 packages/client/src/scripts/login-id.ts
 delete mode 100644 packages/client/src/scripts/lookup-user.ts
 delete mode 100644 packages/client/src/scripts/media-proxy.ts
 delete mode 100644 packages/client/src/scripts/mfm-tags.ts
 delete mode 100644 packages/client/src/scripts/page-metadata.ts
 delete mode 100644 packages/client/src/scripts/physics.ts
 delete mode 100644 packages/client/src/scripts/please-login.ts
 delete mode 100644 packages/client/src/scripts/popout.ts
 delete mode 100644 packages/client/src/scripts/popup-position.ts
 delete mode 100644 packages/client/src/scripts/reaction-picker.ts
 delete mode 100644 packages/client/src/scripts/safe-uri-decode.ts
 delete mode 100644 packages/client/src/scripts/scroll.ts
 delete mode 100644 packages/client/src/scripts/search.ts
 delete mode 100644 packages/client/src/scripts/select-file.ts
 delete mode 100644 packages/client/src/scripts/show-suspended-dialog.ts
 delete mode 100644 packages/client/src/scripts/shuffle.ts
 delete mode 100644 packages/client/src/scripts/sound.ts
 delete mode 100644 packages/client/src/scripts/sticky-sidebar.ts
 delete mode 100644 packages/client/src/scripts/theme-editor.ts
 delete mode 100644 packages/client/src/scripts/theme.ts
 delete mode 100644 packages/client/src/scripts/time.ts
 delete mode 100644 packages/client/src/scripts/timezones.ts
 delete mode 100644 packages/client/src/scripts/touch.ts
 delete mode 100644 packages/client/src/scripts/unison-reload.ts
 delete mode 100644 packages/client/src/scripts/upload.ts
 delete mode 100644 packages/client/src/scripts/upload/compress-config.ts
 delete mode 100644 packages/client/src/scripts/url.ts
 delete mode 100644 packages/client/src/scripts/use-chart-tooltip.ts
 delete mode 100644 packages/client/src/scripts/use-interval.ts
 delete mode 100644 packages/client/src/scripts/use-leave-guard.ts
 delete mode 100644 packages/client/src/scripts/use-note-capture.ts
 delete mode 100644 packages/client/src/scripts/use-tooltip.ts
 delete mode 100644 packages/client/src/store.ts
 delete mode 100644 packages/client/src/stream.ts
 delete mode 100644 packages/client/src/style.scss
 delete mode 100644 packages/client/src/theme-store.ts
 delete mode 100644 packages/client/src/themes/_dark.json5
 delete mode 100644 packages/client/src/themes/_light.json5
 delete mode 100644 packages/client/src/themes/d-astro.json5
 delete mode 100644 packages/client/src/themes/d-botanical.json5
 delete mode 100644 packages/client/src/themes/d-cherry.json5
 delete mode 100644 packages/client/src/themes/d-dark.json5
 delete mode 100644 packages/client/src/themes/d-future.json5
 delete mode 100644 packages/client/src/themes/d-green-lime.json5
 delete mode 100644 packages/client/src/themes/d-green-orange.json5
 delete mode 100644 packages/client/src/themes/d-ice.json5
 delete mode 100644 packages/client/src/themes/d-persimmon.json5
 delete mode 100644 packages/client/src/themes/d-u0.json5
 delete mode 100644 packages/client/src/themes/l-apricot.json5
 delete mode 100644 packages/client/src/themes/l-cherry.json5
 delete mode 100644 packages/client/src/themes/l-coffee.json5
 delete mode 100644 packages/client/src/themes/l-light.json5
 delete mode 100644 packages/client/src/themes/l-rainy.json5
 delete mode 100644 packages/client/src/themes/l-sushi.json5
 delete mode 100644 packages/client/src/themes/l-u0.json5
 delete mode 100644 packages/client/src/themes/l-vivid.json5
 delete mode 100644 packages/client/src/types/menu.ts
 delete mode 100644 packages/client/src/ui/_common_/common.vue
 delete mode 100644 packages/client/src/ui/_common_/navbar-for-mobile.vue
 delete mode 100644 packages/client/src/ui/_common_/navbar.vue
 delete mode 100644 packages/client/src/ui/_common_/statusbar-federation.vue
 delete mode 100644 packages/client/src/ui/_common_/statusbar-rss.vue
 delete mode 100644 packages/client/src/ui/_common_/statusbar-user-list.vue
 delete mode 100644 packages/client/src/ui/_common_/statusbars.vue
 delete mode 100644 packages/client/src/ui/_common_/stream-indicator.vue
 delete mode 100644 packages/client/src/ui/_common_/sw-inject.ts
 delete mode 100644 packages/client/src/ui/_common_/upload.vue
 delete mode 100644 packages/client/src/ui/classic.header.vue
 delete mode 100644 packages/client/src/ui/classic.sidebar.vue
 delete mode 100644 packages/client/src/ui/classic.vue
 delete mode 100644 packages/client/src/ui/classic.widgets.vue
 delete mode 100644 packages/client/src/ui/deck.vue
 delete mode 100644 packages/client/src/ui/deck/antenna-column.vue
 delete mode 100644 packages/client/src/ui/deck/column-core.vue
 delete mode 100644 packages/client/src/ui/deck/column.vue
 delete mode 100644 packages/client/src/ui/deck/deck-store.ts
 delete mode 100644 packages/client/src/ui/deck/direct-column.vue
 delete mode 100644 packages/client/src/ui/deck/list-column.vue
 delete mode 100644 packages/client/src/ui/deck/main-column.vue
 delete mode 100644 packages/client/src/ui/deck/mentions-column.vue
 delete mode 100644 packages/client/src/ui/deck/notifications-column.vue
 delete mode 100644 packages/client/src/ui/deck/tl-column.vue
 delete mode 100644 packages/client/src/ui/deck/widgets-column.vue
 delete mode 100644 packages/client/src/ui/universal.vue
 delete mode 100644 packages/client/src/ui/universal.widgets.vue
 delete mode 100644 packages/client/src/ui/visitor.vue
 delete mode 100644 packages/client/src/ui/visitor/a.vue
 delete mode 100644 packages/client/src/ui/visitor/b.vue
 delete mode 100644 packages/client/src/ui/visitor/header.vue
 delete mode 100644 packages/client/src/ui/visitor/kanban.vue
 delete mode 100644 packages/client/src/ui/zen.vue
 delete mode 100644 packages/client/src/widgets/activity.calendar.vue
 delete mode 100644 packages/client/src/widgets/activity.chart.vue
 delete mode 100644 packages/client/src/widgets/activity.vue
 delete mode 100644 packages/client/src/widgets/aichan.vue
 delete mode 100644 packages/client/src/widgets/aiscript.vue
 delete mode 100644 packages/client/src/widgets/button.vue
 delete mode 100644 packages/client/src/widgets/calendar.vue
 delete mode 100644 packages/client/src/widgets/clock.vue
 delete mode 100644 packages/client/src/widgets/digital-clock.vue
 delete mode 100644 packages/client/src/widgets/federation.vue
 delete mode 100644 packages/client/src/widgets/index.ts
 delete mode 100644 packages/client/src/widgets/instance-cloud.vue
 delete mode 100644 packages/client/src/widgets/job-queue.vue
 delete mode 100644 packages/client/src/widgets/memo.vue
 delete mode 100644 packages/client/src/widgets/notifications.vue
 delete mode 100644 packages/client/src/widgets/online-users.vue
 delete mode 100644 packages/client/src/widgets/photos.vue
 delete mode 100644 packages/client/src/widgets/post-form.vue
 delete mode 100644 packages/client/src/widgets/rss-ticker.vue
 delete mode 100644 packages/client/src/widgets/rss.vue
 delete mode 100644 packages/client/src/widgets/server-metric/cpu-mem.vue
 delete mode 100644 packages/client/src/widgets/server-metric/cpu.vue
 delete mode 100644 packages/client/src/widgets/server-metric/disk.vue
 delete mode 100644 packages/client/src/widgets/server-metric/index.vue
 delete mode 100644 packages/client/src/widgets/server-metric/mem.vue
 delete mode 100644 packages/client/src/widgets/server-metric/net.vue
 delete mode 100644 packages/client/src/widgets/server-metric/pie.vue
 delete mode 100644 packages/client/src/widgets/slideshow.vue
 delete mode 100644 packages/client/src/widgets/timeline.vue
 delete mode 100644 packages/client/src/widgets/trends.vue
 delete mode 100644 packages/client/src/widgets/unix-clock.vue
 delete mode 100644 packages/client/src/widgets/user-list.vue
 delete mode 100644 packages/client/src/widgets/widget.ts
 delete mode 100644 packages/client/tsconfig.json
 delete mode 100644 packages/client/vite.config.ts
 delete mode 100644 packages/client/vite.json5.ts
 create mode 100644 packages/frontend/.eslintrc.js
 create mode 100644 packages/frontend/.vscode/settings.json
 create mode 100644 packages/frontend/@types/global.d.ts
 create mode 100644 packages/frontend/@types/theme.d.ts
 create mode 100644 packages/frontend/@types/vue.d.ts
 create mode 100644 packages/frontend/assets/about-icon.png
 create mode 100644 packages/frontend/assets/dummy.png
 create mode 100644 packages/frontend/assets/fedi.jpg
 create mode 100644 packages/frontend/assets/label-red.svg
 create mode 100644 packages/frontend/assets/label.svg
 create mode 100644 packages/frontend/assets/misskey.svg
 create mode 100644 packages/frontend/assets/remove.png
 create mode 100644 packages/frontend/assets/sounds/aisha/1.mp3
 create mode 100644 packages/frontend/assets/sounds/aisha/2.mp3
 create mode 100644 packages/frontend/assets/sounds/aisha/3.mp3
 create mode 100644 packages/frontend/assets/sounds/noizenecio/kick_gaba1.mp3
 create mode 100644 packages/frontend/assets/sounds/noizenecio/kick_gaba2.mp3
 create mode 100644 packages/frontend/assets/sounds/noizenecio/kick_gaba3.mp3
 create mode 100644 packages/frontend/assets/sounds/noizenecio/kick_gaba4.mp3
 create mode 100644 packages/frontend/assets/sounds/noizenecio/kick_gaba5.mp3
 create mode 100644 packages/frontend/assets/sounds/noizenecio/kick_gaba6.mp3
 create mode 100644 packages/frontend/assets/sounds/noizenecio/kick_gaba7.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/down.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/kick.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/pirori-square-wet.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/pirori-wet.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/pirori.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/poi1.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/poi2.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/pope1.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/pope2.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/popo.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/queue-jammed.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/reverved.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/ryukyu.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/snare.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/square-pico.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/triple.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/up.mp3
 create mode 100644 packages/frontend/assets/sounds/syuilo/waon.mp3
 create mode 100644 packages/frontend/assets/tagcanvas.min.js
 create mode 100644 packages/frontend/assets/unread.svg
 create mode 100644 packages/frontend/package.json
 create mode 100644 packages/frontend/src/account.ts
 create mode 100644 packages/frontend/src/components/MkAbuseReport.vue
 create mode 100644 packages/frontend/src/components/MkAbuseReportWindow.vue
 create mode 100644 packages/frontend/src/components/MkActiveUsersHeatmap.vue
 create mode 100644 packages/frontend/src/components/MkAnalogClock.vue
 create mode 100644 packages/frontend/src/components/MkAutocomplete.vue
 create mode 100644 packages/frontend/src/components/MkAvatars.vue
 create mode 100644 packages/frontend/src/components/MkButton.vue
 create mode 100644 packages/frontend/src/components/MkCaptcha.vue
 create mode 100644 packages/frontend/src/components/MkChannelFollowButton.vue
 create mode 100644 packages/frontend/src/components/MkChannelPreview.vue
 create mode 100644 packages/frontend/src/components/MkChart.vue
 create mode 100644 packages/frontend/src/components/MkChartTooltip.vue
 create mode 100644 packages/frontend/src/components/MkCode.core.vue
 create mode 100644 packages/frontend/src/components/MkCode.vue
 create mode 100644 packages/frontend/src/components/MkContainer.vue
 create mode 100644 packages/frontend/src/components/MkContextMenu.vue
 create mode 100644 packages/frontend/src/components/MkCropperDialog.vue
 create mode 100644 packages/frontend/src/components/MkCwButton.vue
 create mode 100644 packages/frontend/src/components/MkDateSeparatedList.vue
 create mode 100644 packages/frontend/src/components/MkDialog.vue
 create mode 100644 packages/frontend/src/components/MkDigitalClock.vue
 create mode 100644 packages/frontend/src/components/MkDrive.file.vue
 create mode 100644 packages/frontend/src/components/MkDrive.folder.vue
 create mode 100644 packages/frontend/src/components/MkDrive.navFolder.vue
 create mode 100644 packages/frontend/src/components/MkDrive.vue
 create mode 100644 packages/frontend/src/components/MkDriveFileThumbnail.vue
 create mode 100644 packages/frontend/src/components/MkDriveSelectDialog.vue
 create mode 100644 packages/frontend/src/components/MkDriveWindow.vue
 create mode 100644 packages/frontend/src/components/MkEmojiPicker.section.vue
 create mode 100644 packages/frontend/src/components/MkEmojiPicker.vue
 create mode 100644 packages/frontend/src/components/MkEmojiPickerDialog.vue
 create mode 100644 packages/frontend/src/components/MkEmojiPickerWindow.vue
 create mode 100644 packages/frontend/src/components/MkFeaturedPhotos.vue
 create mode 100644 packages/frontend/src/components/MkFileCaptionEditWindow.vue
 create mode 100644 packages/frontend/src/components/MkFileListForAdmin.vue
 create mode 100644 packages/frontend/src/components/MkFolder.vue
 create mode 100644 packages/frontend/src/components/MkFollowButton.vue
 create mode 100644 packages/frontend/src/components/MkForgotPassword.vue
 create mode 100644 packages/frontend/src/components/MkFormDialog.vue
 create mode 100644 packages/frontend/src/components/MkFormula.vue
 create mode 100644 packages/frontend/src/components/MkFormulaCore.vue
 create mode 100644 packages/frontend/src/components/MkGalleryPostPreview.vue
 create mode 100644 packages/frontend/src/components/MkGoogle.vue
 create mode 100644 packages/frontend/src/components/MkImageViewer.vue
 create mode 100644 packages/frontend/src/components/MkImgWithBlurhash.vue
 create mode 100644 packages/frontend/src/components/MkInfo.vue
 create mode 100644 packages/frontend/src/components/MkInstanceCardMini.vue
 create mode 100644 packages/frontend/src/components/MkInstanceStats.vue
 create mode 100644 packages/frontend/src/components/MkInstanceTicker.vue
 create mode 100644 packages/frontend/src/components/MkKeyValue.vue
 create mode 100644 packages/frontend/src/components/MkLaunchPad.vue
 create mode 100644 packages/frontend/src/components/MkLink.vue
 create mode 100644 packages/frontend/src/components/MkMarquee.vue
 create mode 100644 packages/frontend/src/components/MkMediaBanner.vue
 create mode 100644 packages/frontend/src/components/MkMediaImage.vue
 create mode 100644 packages/frontend/src/components/MkMediaList.vue
 create mode 100644 packages/frontend/src/components/MkMediaVideo.vue
 create mode 100644 packages/frontend/src/components/MkMention.vue
 create mode 100644 packages/frontend/src/components/MkMenu.child.vue
 create mode 100644 packages/frontend/src/components/MkMenu.vue
 create mode 100644 packages/frontend/src/components/MkMiniChart.vue
 create mode 100644 packages/frontend/src/components/MkModal.vue
 create mode 100644 packages/frontend/src/components/MkModalPageWindow.vue
 create mode 100644 packages/frontend/src/components/MkModalWindow.vue
 create mode 100644 packages/frontend/src/components/MkNote.vue
 create mode 100644 packages/frontend/src/components/MkNoteDetailed.vue
 create mode 100644 packages/frontend/src/components/MkNoteHeader.vue
 create mode 100644 packages/frontend/src/components/MkNotePreview.vue
 create mode 100644 packages/frontend/src/components/MkNoteSimple.vue
 create mode 100644 packages/frontend/src/components/MkNoteSub.vue
 create mode 100644 packages/frontend/src/components/MkNotes.vue
 create mode 100644 packages/frontend/src/components/MkNotification.vue
 create mode 100644 packages/frontend/src/components/MkNotificationSettingWindow.vue
 create mode 100644 packages/frontend/src/components/MkNotificationToast.vue
 create mode 100644 packages/frontend/src/components/MkNotifications.vue
 create mode 100644 packages/frontend/src/components/MkNumberDiff.vue
 create mode 100644 packages/frontend/src/components/MkObjectView.value.vue
 create mode 100644 packages/frontend/src/components/MkObjectView.vue
 create mode 100644 packages/frontend/src/components/MkPagePreview.vue
 create mode 100644 packages/frontend/src/components/MkPageWindow.vue
 create mode 100644 packages/frontend/src/components/MkPagination.vue
 create mode 100644 packages/frontend/src/components/MkPoll.vue
 create mode 100644 packages/frontend/src/components/MkPollEditor.vue
 create mode 100644 packages/frontend/src/components/MkPopupMenu.vue
 create mode 100644 packages/frontend/src/components/MkPostForm.vue
 create mode 100644 packages/frontend/src/components/MkPostFormAttaches.vue
 create mode 100644 packages/frontend/src/components/MkPostFormDialog.vue
 create mode 100644 packages/frontend/src/components/MkPushNotificationAllowButton.vue
 create mode 100644 packages/frontend/src/components/MkReactionIcon.vue
 create mode 100644 packages/frontend/src/components/MkReactionTooltip.vue
 create mode 100644 packages/frontend/src/components/MkReactionsViewer.details.vue
 create mode 100644 packages/frontend/src/components/MkReactionsViewer.reaction.vue
 create mode 100644 packages/frontend/src/components/MkReactionsViewer.vue
 create mode 100644 packages/frontend/src/components/MkRemoteCaution.vue
 create mode 100644 packages/frontend/src/components/MkRenoteButton.vue
 create mode 100644 packages/frontend/src/components/MkRipple.vue
 create mode 100644 packages/frontend/src/components/MkSample.vue
 create mode 100644 packages/frontend/src/components/MkSignin.vue
 create mode 100644 packages/frontend/src/components/MkSigninDialog.vue
 create mode 100644 packages/frontend/src/components/MkSignup.vue
 create mode 100644 packages/frontend/src/components/MkSignupDialog.vue
 create mode 100644 packages/frontend/src/components/MkSparkle.vue
 create mode 100644 packages/frontend/src/components/MkSubNoteContent.vue
 create mode 100644 packages/frontend/src/components/MkSuperMenu.vue
 create mode 100644 packages/frontend/src/components/MkTab.vue
 create mode 100644 packages/frontend/src/components/MkTagCloud.vue
 create mode 100644 packages/frontend/src/components/MkTimeline.vue
 create mode 100644 packages/frontend/src/components/MkToast.vue
 create mode 100644 packages/frontend/src/components/MkTokenGenerateWindow.vue
 create mode 100644 packages/frontend/src/components/MkTooltip.vue
 create mode 100644 packages/frontend/src/components/MkUpdated.vue
 create mode 100644 packages/frontend/src/components/MkUrlPreview.vue
 create mode 100644 packages/frontend/src/components/MkUrlPreviewPopup.vue
 create mode 100644 packages/frontend/src/components/MkUserCardMini.vue
 create mode 100644 packages/frontend/src/components/MkUserInfo.vue
 create mode 100644 packages/frontend/src/components/MkUserList.vue
 create mode 100644 packages/frontend/src/components/MkUserOnlineIndicator.vue
 create mode 100644 packages/frontend/src/components/MkUserPreview.vue
 create mode 100644 packages/frontend/src/components/MkUserSelectDialog.vue
 create mode 100644 packages/frontend/src/components/MkUsersTooltip.vue
 create mode 100644 packages/frontend/src/components/MkVisibility.vue
 create mode 100644 packages/frontend/src/components/MkVisibilityPicker.vue
 create mode 100644 packages/frontend/src/components/MkWaitingDialog.vue
 create mode 100644 packages/frontend/src/components/MkWidgets.vue
 create mode 100644 packages/frontend/src/components/MkWindow.vue
 create mode 100644 packages/frontend/src/components/MkYoutubePlayer.vue
 create mode 100644 packages/frontend/src/components/form/checkbox.vue
 create mode 100644 packages/frontend/src/components/form/folder.vue
 create mode 100644 packages/frontend/src/components/form/input.vue
 create mode 100644 packages/frontend/src/components/form/link.vue
 create mode 100644 packages/frontend/src/components/form/radio.vue
 create mode 100644 packages/frontend/src/components/form/radios.vue
 create mode 100644 packages/frontend/src/components/form/range.vue
 create mode 100644 packages/frontend/src/components/form/section.vue
 create mode 100644 packages/frontend/src/components/form/select.vue
 create mode 100644 packages/frontend/src/components/form/slot.vue
 create mode 100644 packages/frontend/src/components/form/split.vue
 create mode 100644 packages/frontend/src/components/form/suspense.vue
 create mode 100644 packages/frontend/src/components/form/switch.vue
 create mode 100644 packages/frontend/src/components/form/textarea.vue
 create mode 100644 packages/frontend/src/components/global/MkA.vue
 create mode 100644 packages/frontend/src/components/global/MkAcct.vue
 create mode 100644 packages/frontend/src/components/global/MkAd.vue
 create mode 100644 packages/frontend/src/components/global/MkAvatar.vue
 create mode 100644 packages/frontend/src/components/global/MkEllipsis.vue
 create mode 100644 packages/frontend/src/components/global/MkEmoji.vue
 create mode 100644 packages/frontend/src/components/global/MkError.vue
 create mode 100644 packages/frontend/src/components/global/MkLoading.vue
 create mode 100644 packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue
 create mode 100644 packages/frontend/src/components/global/MkPageHeader.vue
 create mode 100644 packages/frontend/src/components/global/MkSpacer.vue
 create mode 100644 packages/frontend/src/components/global/MkStickyContainer.vue
 create mode 100644 packages/frontend/src/components/global/MkTime.vue
 create mode 100644 packages/frontend/src/components/global/MkUrl.vue
 create mode 100644 packages/frontend/src/components/global/MkUserName.vue
 create mode 100644 packages/frontend/src/components/global/RouterView.vue
 create mode 100644 packages/frontend/src/components/global/i18n.ts
 create mode 100644 packages/frontend/src/components/index.ts
 create mode 100644 packages/frontend/src/components/mfm.ts
 create mode 100644 packages/frontend/src/components/page/page.block.vue
 create mode 100644 packages/frontend/src/components/page/page.button.vue
 create mode 100644 packages/frontend/src/components/page/page.canvas.vue
 create mode 100644 packages/frontend/src/components/page/page.counter.vue
 create mode 100644 packages/frontend/src/components/page/page.if.vue
 create mode 100644 packages/frontend/src/components/page/page.image.vue
 create mode 100644 packages/frontend/src/components/page/page.note.vue
 create mode 100644 packages/frontend/src/components/page/page.number-input.vue
 create mode 100644 packages/frontend/src/components/page/page.post.vue
 create mode 100644 packages/frontend/src/components/page/page.radio-button.vue
 create mode 100644 packages/frontend/src/components/page/page.section.vue
 create mode 100644 packages/frontend/src/components/page/page.switch.vue
 create mode 100644 packages/frontend/src/components/page/page.text-input.vue
 create mode 100644 packages/frontend/src/components/page/page.text.vue
 create mode 100644 packages/frontend/src/components/page/page.textarea-input.vue
 create mode 100644 packages/frontend/src/components/page/page.textarea.vue
 create mode 100644 packages/frontend/src/components/page/page.vue
 create mode 100644 packages/frontend/src/config.ts
 create mode 100644 packages/frontend/src/const.ts
 create mode 100644 packages/frontend/src/directives/adaptive-border.ts
 create mode 100644 packages/frontend/src/directives/anim.ts
 create mode 100644 packages/frontend/src/directives/appear.ts
 create mode 100644 packages/frontend/src/directives/click-anime.ts
 create mode 100644 packages/frontend/src/directives/follow-append.ts
 create mode 100644 packages/frontend/src/directives/get-size.ts
 create mode 100644 packages/frontend/src/directives/hotkey.ts
 create mode 100644 packages/frontend/src/directives/index.ts
 create mode 100644 packages/frontend/src/directives/panel.ts
 create mode 100644 packages/frontend/src/directives/ripple.ts
 create mode 100644 packages/frontend/src/directives/size.ts
 create mode 100644 packages/frontend/src/directives/tooltip.ts
 create mode 100644 packages/frontend/src/directives/user-preview.ts
 create mode 100644 packages/frontend/src/emojilist.json
 create mode 100644 packages/frontend/src/events.ts
 create mode 100644 packages/frontend/src/filters/bytes.ts
 create mode 100644 packages/frontend/src/filters/note.ts
 create mode 100644 packages/frontend/src/filters/number.ts
 create mode 100644 packages/frontend/src/filters/user.ts
 create mode 100644 packages/frontend/src/i18n.ts
 create mode 100644 packages/frontend/src/init.ts
 create mode 100644 packages/frontend/src/instance.ts
 create mode 100644 packages/frontend/src/navbar.ts
 create mode 100644 packages/frontend/src/nirax.ts
 create mode 100644 packages/frontend/src/os.ts
 create mode 100644 packages/frontend/src/pages/_empty_.vue
 create mode 100644 packages/frontend/src/pages/_error_.vue
 create mode 100644 packages/frontend/src/pages/_loading_.vue
 create mode 100644 packages/frontend/src/pages/about-misskey.vue
 create mode 100644 packages/frontend/src/pages/about.emojis.vue
 create mode 100644 packages/frontend/src/pages/about.federation.vue
 create mode 100644 packages/frontend/src/pages/about.vue
 create mode 100644 packages/frontend/src/pages/admin-file.vue
 create mode 100644 packages/frontend/src/pages/admin/_header_.vue
 create mode 100644 packages/frontend/src/pages/admin/abuses.vue
 create mode 100644 packages/frontend/src/pages/admin/ads.vue
 create mode 100644 packages/frontend/src/pages/admin/announcements.vue
 create mode 100644 packages/frontend/src/pages/admin/bot-protection.vue
 create mode 100644 packages/frontend/src/pages/admin/database.vue
 create mode 100644 packages/frontend/src/pages/admin/email-settings.vue
 create mode 100644 packages/frontend/src/pages/admin/emoji-edit-dialog.vue
 create mode 100644 packages/frontend/src/pages/admin/emojis.vue
 create mode 100644 packages/frontend/src/pages/admin/files.vue
 create mode 100644 packages/frontend/src/pages/admin/index.vue
 create mode 100644 packages/frontend/src/pages/admin/instance-block.vue
 create mode 100644 packages/frontend/src/pages/admin/integrations.discord.vue
 create mode 100644 packages/frontend/src/pages/admin/integrations.github.vue
 create mode 100644 packages/frontend/src/pages/admin/integrations.twitter.vue
 create mode 100644 packages/frontend/src/pages/admin/integrations.vue
 create mode 100644 packages/frontend/src/pages/admin/metrics.vue
 create mode 100644 packages/frontend/src/pages/admin/object-storage.vue
 create mode 100644 packages/frontend/src/pages/admin/other-settings.vue
 create mode 100644 packages/frontend/src/pages/admin/overview.active-users.vue
 create mode 100644 packages/frontend/src/pages/admin/overview.ap-requests.vue
 create mode 100644 packages/frontend/src/pages/admin/overview.federation.vue
 create mode 100644 packages/frontend/src/pages/admin/overview.heatmap.vue
 create mode 100644 packages/frontend/src/pages/admin/overview.instances.vue
 create mode 100644 packages/frontend/src/pages/admin/overview.moderators.vue
 create mode 100644 packages/frontend/src/pages/admin/overview.pie.vue
 create mode 100644 packages/frontend/src/pages/admin/overview.queue.chart.vue
 create mode 100644 packages/frontend/src/pages/admin/overview.queue.vue
 create mode 100644 packages/frontend/src/pages/admin/overview.retention.vue
 create mode 100644 packages/frontend/src/pages/admin/overview.stats.vue
 create mode 100644 packages/frontend/src/pages/admin/overview.users.vue
 create mode 100644 packages/frontend/src/pages/admin/overview.vue
 create mode 100644 packages/frontend/src/pages/admin/proxy-account.vue
 create mode 100644 packages/frontend/src/pages/admin/queue.chart.chart.vue
 create mode 100644 packages/frontend/src/pages/admin/queue.chart.vue
 create mode 100644 packages/frontend/src/pages/admin/queue.vue
 create mode 100644 packages/frontend/src/pages/admin/relays.vue
 create mode 100644 packages/frontend/src/pages/admin/security.vue
 create mode 100644 packages/frontend/src/pages/admin/settings.vue
 create mode 100644 packages/frontend/src/pages/admin/users.vue
 create mode 100644 packages/frontend/src/pages/announcements.vue
 create mode 100644 packages/frontend/src/pages/antenna-timeline.vue
 create mode 100644 packages/frontend/src/pages/api-console.vue
 create mode 100644 packages/frontend/src/pages/auth.form.vue
 create mode 100644 packages/frontend/src/pages/auth.vue
 create mode 100644 packages/frontend/src/pages/channel-editor.vue
 create mode 100644 packages/frontend/src/pages/channel.vue
 create mode 100644 packages/frontend/src/pages/channels.vue
 create mode 100644 packages/frontend/src/pages/clip.vue
 create mode 100644 packages/frontend/src/pages/drive.vue
 create mode 100644 packages/frontend/src/pages/emojis.emoji.vue
 create mode 100644 packages/frontend/src/pages/explore.featured.vue
 create mode 100644 packages/frontend/src/pages/explore.users.vue
 create mode 100644 packages/frontend/src/pages/explore.vue
 create mode 100644 packages/frontend/src/pages/favorites.vue
 create mode 100644 packages/frontend/src/pages/follow-requests.vue
 create mode 100644 packages/frontend/src/pages/follow.vue
 create mode 100644 packages/frontend/src/pages/gallery/edit.vue
 create mode 100644 packages/frontend/src/pages/gallery/index.vue
 create mode 100644 packages/frontend/src/pages/gallery/post.vue
 create mode 100644 packages/frontend/src/pages/instance-info.vue
 create mode 100644 packages/frontend/src/pages/messaging/index.vue
 create mode 100644 packages/frontend/src/pages/messaging/messaging-room.form.vue
 create mode 100644 packages/frontend/src/pages/messaging/messaging-room.message.vue
 create mode 100644 packages/frontend/src/pages/messaging/messaging-room.vue
 create mode 100644 packages/frontend/src/pages/mfm-cheat-sheet.vue
 create mode 100644 packages/frontend/src/pages/miauth.vue
 create mode 100644 packages/frontend/src/pages/my-antennas/create.vue
 create mode 100644 packages/frontend/src/pages/my-antennas/edit.vue
 create mode 100644 packages/frontend/src/pages/my-antennas/editor.vue
 create mode 100644 packages/frontend/src/pages/my-antennas/index.vue
 create mode 100644 packages/frontend/src/pages/my-clips/index.vue
 create mode 100644 packages/frontend/src/pages/my-lists/index.vue
 create mode 100644 packages/frontend/src/pages/my-lists/list.vue
 create mode 100644 packages/frontend/src/pages/not-found.vue
 create mode 100644 packages/frontend/src/pages/note.vue
 create mode 100644 packages/frontend/src/pages/notifications.vue
 create mode 100644 packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
 create mode 100644 packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
 create mode 100644 packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue
 create mode 100644 packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
 create mode 100644 packages/frontend/src/pages/page-editor/page-editor.blocks.vue
 create mode 100644 packages/frontend/src/pages/page-editor/page-editor.container.vue
 create mode 100644 packages/frontend/src/pages/page-editor/page-editor.vue
 create mode 100644 packages/frontend/src/pages/page.vue
 create mode 100644 packages/frontend/src/pages/pages.vue
 create mode 100644 packages/frontend/src/pages/preview.vue
 create mode 100644 packages/frontend/src/pages/registry.keys.vue
 create mode 100644 packages/frontend/src/pages/registry.value.vue
 create mode 100644 packages/frontend/src/pages/registry.vue
 create mode 100644 packages/frontend/src/pages/reset-password.vue
 create mode 100644 packages/frontend/src/pages/scratchpad.vue
 create mode 100644 packages/frontend/src/pages/search.vue
 create mode 100644 packages/frontend/src/pages/settings/2fa.vue
 create mode 100644 packages/frontend/src/pages/settings/account-info.vue
 create mode 100644 packages/frontend/src/pages/settings/accounts.vue
 create mode 100644 packages/frontend/src/pages/settings/api.vue
 create mode 100644 packages/frontend/src/pages/settings/apps.vue
 create mode 100644 packages/frontend/src/pages/settings/custom-css.vue
 create mode 100644 packages/frontend/src/pages/settings/deck.vue
 create mode 100644 packages/frontend/src/pages/settings/delete-account.vue
 create mode 100644 packages/frontend/src/pages/settings/drive.vue
 create mode 100644 packages/frontend/src/pages/settings/email.vue
 create mode 100644 packages/frontend/src/pages/settings/general.vue
 create mode 100644 packages/frontend/src/pages/settings/import-export.vue
 create mode 100644 packages/frontend/src/pages/settings/index.vue
 create mode 100644 packages/frontend/src/pages/settings/instance-mute.vue
 create mode 100644 packages/frontend/src/pages/settings/integration.vue
 create mode 100644 packages/frontend/src/pages/settings/mute-block.vue
 create mode 100644 packages/frontend/src/pages/settings/navbar.vue
 create mode 100644 packages/frontend/src/pages/settings/notifications.vue
 create mode 100644 packages/frontend/src/pages/settings/other.vue
 create mode 100644 packages/frontend/src/pages/settings/plugin.install.vue
 create mode 100644 packages/frontend/src/pages/settings/plugin.vue
 create mode 100644 packages/frontend/src/pages/settings/preferences-backups.vue
 create mode 100644 packages/frontend/src/pages/settings/privacy.vue
 create mode 100644 packages/frontend/src/pages/settings/profile.vue
 create mode 100644 packages/frontend/src/pages/settings/reaction.vue
 create mode 100644 packages/frontend/src/pages/settings/security.vue
 create mode 100644 packages/frontend/src/pages/settings/sounds.sound.vue
 create mode 100644 packages/frontend/src/pages/settings/sounds.vue
 create mode 100644 packages/frontend/src/pages/settings/statusbar.statusbar.vue
 create mode 100644 packages/frontend/src/pages/settings/statusbar.vue
 create mode 100644 packages/frontend/src/pages/settings/theme.install.vue
 create mode 100644 packages/frontend/src/pages/settings/theme.manage.vue
 create mode 100644 packages/frontend/src/pages/settings/theme.vue
 create mode 100644 packages/frontend/src/pages/settings/webhook.edit.vue
 create mode 100644 packages/frontend/src/pages/settings/webhook.new.vue
 create mode 100644 packages/frontend/src/pages/settings/webhook.vue
 create mode 100644 packages/frontend/src/pages/settings/word-mute.vue
 create mode 100644 packages/frontend/src/pages/share.vue
 create mode 100644 packages/frontend/src/pages/signup-complete.vue
 create mode 100644 packages/frontend/src/pages/tag.vue
 create mode 100644 packages/frontend/src/pages/theme-editor.vue
 create mode 100644 packages/frontend/src/pages/timeline.tutorial.vue
 create mode 100644 packages/frontend/src/pages/timeline.vue
 create mode 100644 packages/frontend/src/pages/user-info.vue
 create mode 100644 packages/frontend/src/pages/user-list-timeline.vue
 create mode 100644 packages/frontend/src/pages/user/clips.vue
 create mode 100644 packages/frontend/src/pages/user/follow-list.vue
 create mode 100644 packages/frontend/src/pages/user/followers.vue
 create mode 100644 packages/frontend/src/pages/user/following.vue
 create mode 100644 packages/frontend/src/pages/user/gallery.vue
 create mode 100644 packages/frontend/src/pages/user/home.vue
 create mode 100644 packages/frontend/src/pages/user/index.activity.vue
 create mode 100644 packages/frontend/src/pages/user/index.photos.vue
 create mode 100644 packages/frontend/src/pages/user/index.timeline.vue
 create mode 100644 packages/frontend/src/pages/user/index.vue
 create mode 100644 packages/frontend/src/pages/user/pages.vue
 create mode 100644 packages/frontend/src/pages/user/reactions.vue
 create mode 100644 packages/frontend/src/pages/welcome.entrance.a.vue
 create mode 100644 packages/frontend/src/pages/welcome.entrance.b.vue
 create mode 100644 packages/frontend/src/pages/welcome.entrance.c.vue
 create mode 100644 packages/frontend/src/pages/welcome.setup.vue
 create mode 100644 packages/frontend/src/pages/welcome.timeline.vue
 create mode 100644 packages/frontend/src/pages/welcome.vue
 create mode 100644 packages/frontend/src/pizzax.ts
 create mode 100644 packages/frontend/src/plugin.ts
 create mode 100644 packages/frontend/src/router.ts
 create mode 100644 packages/frontend/src/scripts/2fa.ts
 create mode 100644 packages/frontend/src/scripts/aiscript/api.ts
 create mode 100644 packages/frontend/src/scripts/array.ts
 create mode 100644 packages/frontend/src/scripts/autocomplete.ts
 create mode 100644 packages/frontend/src/scripts/chart-vline.ts
 create mode 100644 packages/frontend/src/scripts/check-word-mute.ts
 create mode 100644 packages/frontend/src/scripts/clone.ts
 create mode 100644 packages/frontend/src/scripts/collect-page-vars.ts
 create mode 100644 packages/frontend/src/scripts/contains.ts
 create mode 100644 packages/frontend/src/scripts/copy-to-clipboard.ts
 create mode 100644 packages/frontend/src/scripts/device-kind.ts
 create mode 100644 packages/frontend/src/scripts/emoji-base.ts
 create mode 100644 packages/frontend/src/scripts/emojilist.ts
 create mode 100644 packages/frontend/src/scripts/extract-avg-color-from-blurhash.ts
 create mode 100644 packages/frontend/src/scripts/extract-mentions.ts
 create mode 100644 packages/frontend/src/scripts/extract-url-from-mfm.ts
 create mode 100644 packages/frontend/src/scripts/focus.ts
 create mode 100644 packages/frontend/src/scripts/form.ts
 create mode 100644 packages/frontend/src/scripts/format-time-string.ts
 create mode 100644 packages/frontend/src/scripts/gen-search-query.ts
 create mode 100644 packages/frontend/src/scripts/get-account-from-id.ts
 create mode 100644 packages/frontend/src/scripts/get-note-menu.ts
 create mode 100644 packages/frontend/src/scripts/get-note-summary.ts
 create mode 100644 packages/frontend/src/scripts/get-static-image-url.ts
 create mode 100644 packages/frontend/src/scripts/get-user-menu.ts
 create mode 100644 packages/frontend/src/scripts/get-user-name.ts
 create mode 100644 packages/frontend/src/scripts/hotkey.ts
 create mode 100644 packages/frontend/src/scripts/hpml/block.ts
 create mode 100644 packages/frontend/src/scripts/hpml/evaluator.ts
 create mode 100644 packages/frontend/src/scripts/hpml/expr.ts
 create mode 100644 packages/frontend/src/scripts/hpml/index.ts
 create mode 100644 packages/frontend/src/scripts/hpml/lib.ts
 create mode 100644 packages/frontend/src/scripts/hpml/type-checker.ts
 create mode 100644 packages/frontend/src/scripts/i18n.ts
 create mode 100644 packages/frontend/src/scripts/idb-proxy.ts
 create mode 100644 packages/frontend/src/scripts/initialize-sw.ts
 create mode 100644 packages/frontend/src/scripts/is-device-darkmode.ts
 create mode 100644 packages/frontend/src/scripts/keycode.ts
 create mode 100644 packages/frontend/src/scripts/langmap.ts
 create mode 100644 packages/frontend/src/scripts/login-id.ts
 create mode 100644 packages/frontend/src/scripts/lookup-user.ts
 create mode 100644 packages/frontend/src/scripts/media-proxy.ts
 create mode 100644 packages/frontend/src/scripts/mfm-tags.ts
 create mode 100644 packages/frontend/src/scripts/page-metadata.ts
 create mode 100644 packages/frontend/src/scripts/physics.ts
 create mode 100644 packages/frontend/src/scripts/please-login.ts
 create mode 100644 packages/frontend/src/scripts/popout.ts
 create mode 100644 packages/frontend/src/scripts/popup-position.ts
 create mode 100644 packages/frontend/src/scripts/reaction-picker.ts
 create mode 100644 packages/frontend/src/scripts/safe-uri-decode.ts
 create mode 100644 packages/frontend/src/scripts/scroll.ts
 create mode 100644 packages/frontend/src/scripts/search.ts
 create mode 100644 packages/frontend/src/scripts/select-file.ts
 create mode 100644 packages/frontend/src/scripts/show-suspended-dialog.ts
 create mode 100644 packages/frontend/src/scripts/shuffle.ts
 create mode 100644 packages/frontend/src/scripts/sound.ts
 create mode 100644 packages/frontend/src/scripts/sticky-sidebar.ts
 create mode 100644 packages/frontend/src/scripts/theme-editor.ts
 create mode 100644 packages/frontend/src/scripts/theme.ts
 create mode 100644 packages/frontend/src/scripts/time.ts
 create mode 100644 packages/frontend/src/scripts/timezones.ts
 create mode 100644 packages/frontend/src/scripts/touch.ts
 create mode 100644 packages/frontend/src/scripts/unison-reload.ts
 create mode 100644 packages/frontend/src/scripts/upload.ts
 create mode 100644 packages/frontend/src/scripts/upload/compress-config.ts
 create mode 100644 packages/frontend/src/scripts/url.ts
 create mode 100644 packages/frontend/src/scripts/use-chart-tooltip.ts
 create mode 100644 packages/frontend/src/scripts/use-interval.ts
 create mode 100644 packages/frontend/src/scripts/use-leave-guard.ts
 create mode 100644 packages/frontend/src/scripts/use-note-capture.ts
 create mode 100644 packages/frontend/src/scripts/use-tooltip.ts
 create mode 100644 packages/frontend/src/store.ts
 create mode 100644 packages/frontend/src/stream.ts
 create mode 100644 packages/frontend/src/style.scss
 create mode 100644 packages/frontend/src/theme-store.ts
 create mode 100644 packages/frontend/src/themes/_dark.json5
 create mode 100644 packages/frontend/src/themes/_light.json5
 create mode 100644 packages/frontend/src/themes/d-astro.json5
 create mode 100644 packages/frontend/src/themes/d-botanical.json5
 create mode 100644 packages/frontend/src/themes/d-cherry.json5
 create mode 100644 packages/frontend/src/themes/d-dark.json5
 create mode 100644 packages/frontend/src/themes/d-future.json5
 create mode 100644 packages/frontend/src/themes/d-green-lime.json5
 create mode 100644 packages/frontend/src/themes/d-green-orange.json5
 create mode 100644 packages/frontend/src/themes/d-ice.json5
 create mode 100644 packages/frontend/src/themes/d-persimmon.json5
 create mode 100644 packages/frontend/src/themes/d-u0.json5
 create mode 100644 packages/frontend/src/themes/l-apricot.json5
 create mode 100644 packages/frontend/src/themes/l-cherry.json5
 create mode 100644 packages/frontend/src/themes/l-coffee.json5
 create mode 100644 packages/frontend/src/themes/l-light.json5
 create mode 100644 packages/frontend/src/themes/l-rainy.json5
 create mode 100644 packages/frontend/src/themes/l-sushi.json5
 create mode 100644 packages/frontend/src/themes/l-u0.json5
 create mode 100644 packages/frontend/src/themes/l-vivid.json5
 create mode 100644 packages/frontend/src/types/menu.ts
 create mode 100644 packages/frontend/src/ui/_common_/common.vue
 create mode 100644 packages/frontend/src/ui/_common_/navbar-for-mobile.vue
 create mode 100644 packages/frontend/src/ui/_common_/navbar.vue
 create mode 100644 packages/frontend/src/ui/_common_/statusbar-federation.vue
 create mode 100644 packages/frontend/src/ui/_common_/statusbar-rss.vue
 create mode 100644 packages/frontend/src/ui/_common_/statusbar-user-list.vue
 create mode 100644 packages/frontend/src/ui/_common_/statusbars.vue
 create mode 100644 packages/frontend/src/ui/_common_/stream-indicator.vue
 create mode 100644 packages/frontend/src/ui/_common_/sw-inject.ts
 create mode 100644 packages/frontend/src/ui/_common_/upload.vue
 create mode 100644 packages/frontend/src/ui/classic.header.vue
 create mode 100644 packages/frontend/src/ui/classic.sidebar.vue
 create mode 100644 packages/frontend/src/ui/classic.vue
 create mode 100644 packages/frontend/src/ui/classic.widgets.vue
 create mode 100644 packages/frontend/src/ui/deck.vue
 create mode 100644 packages/frontend/src/ui/deck/antenna-column.vue
 create mode 100644 packages/frontend/src/ui/deck/column-core.vue
 create mode 100644 packages/frontend/src/ui/deck/column.vue
 create mode 100644 packages/frontend/src/ui/deck/deck-store.ts
 create mode 100644 packages/frontend/src/ui/deck/direct-column.vue
 create mode 100644 packages/frontend/src/ui/deck/list-column.vue
 create mode 100644 packages/frontend/src/ui/deck/main-column.vue
 create mode 100644 packages/frontend/src/ui/deck/mentions-column.vue
 create mode 100644 packages/frontend/src/ui/deck/notifications-column.vue
 create mode 100644 packages/frontend/src/ui/deck/tl-column.vue
 create mode 100644 packages/frontend/src/ui/deck/widgets-column.vue
 create mode 100644 packages/frontend/src/ui/universal.vue
 create mode 100644 packages/frontend/src/ui/universal.widgets.vue
 create mode 100644 packages/frontend/src/ui/visitor.vue
 create mode 100644 packages/frontend/src/ui/visitor/a.vue
 create mode 100644 packages/frontend/src/ui/visitor/b.vue
 create mode 100644 packages/frontend/src/ui/visitor/header.vue
 create mode 100644 packages/frontend/src/ui/visitor/kanban.vue
 create mode 100644 packages/frontend/src/ui/zen.vue
 create mode 100644 packages/frontend/src/widgets/activity.calendar.vue
 create mode 100644 packages/frontend/src/widgets/activity.chart.vue
 create mode 100644 packages/frontend/src/widgets/activity.vue
 create mode 100644 packages/frontend/src/widgets/aichan.vue
 create mode 100644 packages/frontend/src/widgets/aiscript.vue
 create mode 100644 packages/frontend/src/widgets/button.vue
 create mode 100644 packages/frontend/src/widgets/calendar.vue
 create mode 100644 packages/frontend/src/widgets/clock.vue
 create mode 100644 packages/frontend/src/widgets/digital-clock.vue
 create mode 100644 packages/frontend/src/widgets/federation.vue
 create mode 100644 packages/frontend/src/widgets/index.ts
 create mode 100644 packages/frontend/src/widgets/instance-cloud.vue
 create mode 100644 packages/frontend/src/widgets/job-queue.vue
 create mode 100644 packages/frontend/src/widgets/memo.vue
 create mode 100644 packages/frontend/src/widgets/notifications.vue
 create mode 100644 packages/frontend/src/widgets/online-users.vue
 create mode 100644 packages/frontend/src/widgets/photos.vue
 create mode 100644 packages/frontend/src/widgets/post-form.vue
 create mode 100644 packages/frontend/src/widgets/rss-ticker.vue
 create mode 100644 packages/frontend/src/widgets/rss.vue
 create mode 100644 packages/frontend/src/widgets/server-metric/cpu-mem.vue
 create mode 100644 packages/frontend/src/widgets/server-metric/cpu.vue
 create mode 100644 packages/frontend/src/widgets/server-metric/disk.vue
 create mode 100644 packages/frontend/src/widgets/server-metric/index.vue
 create mode 100644 packages/frontend/src/widgets/server-metric/mem.vue
 create mode 100644 packages/frontend/src/widgets/server-metric/net.vue
 create mode 100644 packages/frontend/src/widgets/server-metric/pie.vue
 create mode 100644 packages/frontend/src/widgets/slideshow.vue
 create mode 100644 packages/frontend/src/widgets/timeline.vue
 create mode 100644 packages/frontend/src/widgets/trends.vue
 create mode 100644 packages/frontend/src/widgets/unix-clock.vue
 create mode 100644 packages/frontend/src/widgets/user-list.vue
 create mode 100644 packages/frontend/src/widgets/widget.ts
 create mode 100644 packages/frontend/tsconfig.json
 create mode 100644 packages/frontend/vite.config.ts
 create mode 100644 packages/frontend/vite.json5.ts

(limited to 'packages/client/src')

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 2625cf75d3..0d287327a7 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -16,7 +16,7 @@ updates:
     interval: daily
   open-pull-requests-limit: 0
 - package-ecosystem: npm
-  directory: "/packages/client"
+  directory: "/packages/frontend"
   schedule:
     interval: daily
   open-pull-requests-limit: 0
diff --git a/.github/labeler.yml b/.github/labeler.yml
index 98f1d2e383..b4fd0dd5df 100644
--- a/.github/labeler.yml
+++ b/.github/labeler.yml
@@ -2,7 +2,7 @@
 - packages/backend/**/*
 
 '🖥️Client':
-- packages/client/**/*
+- packages/frontend/**/*
 
 '🧪Test':
 - cypress/**/*
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index b5c801c642..a0e84a0985 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -30,7 +30,7 @@ jobs:
       matrix:
         workspace:
         - backend
-        - client
+        - frontend
         - sw
     steps:
     - uses: actions/checkout@v2
diff --git a/.gitignore b/.gitignore
index db3681551e..bfccdd46cb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,7 +16,7 @@ report.*.json
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
-packages/client/.yarn/cache
+packages/frontend/.yarn/cache
 packages/backend/.yarn/cache
 packages/sw/.yarn/cache
 
diff --git a/Dockerfile b/Dockerfile
index de9ec3e1c7..25cec42a9b 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -12,7 +12,7 @@ COPY [".yarnrc.yml", "package.json", "yarn.lock", "./"]
 COPY [".yarn", "./.yarn"]
 COPY ["scripts", "./scripts"]
 COPY ["packages/backend/package.json", "./packages/backend/"]
-COPY ["packages/client/package.json", "./packages/client/"]
+COPY ["packages/frontend/package.json", "./packages/frontend/"]
 COPY ["packages/sw/package.json", "./packages/sw/"]
 
 RUN yarn install --immutable
@@ -37,7 +37,7 @@ COPY --from=builder /misskey/node_modules ./node_modules
 COPY --from=builder /misskey/built ./built
 COPY --from=builder /misskey/packages/backend/node_modules ./packages/backend/node_modules
 COPY --from=builder /misskey/packages/backend/built ./packages/backend/built
-COPY --from=builder /misskey/packages/client/node_modules ./packages/client/node_modules
+COPY --from=builder /misskey/packages/frontend/node_modules ./packages/frontend/node_modules
 COPY . ./
 
 ENV NODE_ENV=production
diff --git a/gulpfile.js b/gulpfile.js
index 07a8a99d69..d567e8bf6c 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -15,21 +15,21 @@ gulp.task('copy:backend:views', () =>
 	gulp.src('./packages/backend/src/server/web/views/**/*').pipe(gulp.dest('./packages/backend/built/server/web/views'))
 );
 
-gulp.task('copy:client:fonts', () =>
-	gulp.src('./packages/client/node_modules/three/examples/fonts/**/*').pipe(gulp.dest('./built/_client_dist_/fonts/'))
+gulp.task('copy:frontend:fonts', () =>
+	gulp.src('./packages/frontend/node_modules/three/examples/fonts/**/*').pipe(gulp.dest('./built/_frontend_dist_/fonts/'))
 );
 
-gulp.task('copy:client:tabler-icons', () =>
-	gulp.src('./packages/client/node_modules/@tabler/icons/iconfont/**/*').pipe(gulp.dest('./built/_client_dist_/tabler-icons/'))
+gulp.task('copy:frontend:tabler-icons', () =>
+	gulp.src('./packages/frontend/node_modules/@tabler/icons/iconfont/**/*').pipe(gulp.dest('./built/_frontend_dist_/tabler-icons/'))
 );
 
-gulp.task('copy:client:locales', cb => {
-	fs.mkdirSync('./built/_client_dist_/locales', { recursive: true });
+gulp.task('copy:frontend:locales', cb => {
+	fs.mkdirSync('./built/_frontend_dist_/locales', { recursive: true });
 
 	const v = { '_version_': meta.version };
 
 	for (const [lang, locale] of Object.entries(locales)) {
-		fs.writeFileSync(`./built/_client_dist_/locales/${lang}.${meta.version}.json`, JSON.stringify({ ...locale, ...v }), 'utf-8');
+		fs.writeFileSync(`./built/_frontend_dist_/locales/${lang}.${meta.version}.json`, JSON.stringify({ ...locale, ...v }), 'utf-8');
 	}
 
 	cb();
@@ -53,7 +53,7 @@ gulp.task('build:backend:style', () => {
 });
 
 gulp.task('build', gulp.parallel(
-	'copy:client:locales', 'copy:backend:views', 'build:backend:script', 'build:backend:style', 'copy:client:fonts', 'copy:client:tabler-icons'
+	'copy:frontend:locales', 'copy:backend:views', 'build:backend:script', 'build:backend:style', 'copy:frontend:fonts', 'copy:frontend:tabler-icons'
 ));
 
 gulp.task('default', gulp.task('build'));
diff --git a/package.json b/package.json
index 8013f6cb1f..25e0d15297 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
 	},
 	"packageManager": "yarn@3.3.0",
 	"workspaces": [
-		"packages/client",
+		"packages/frontend",
 		"packages/backend",
 		"packages/sw"
 	],
diff --git a/packages/backend/src/server/web/ClientServerService.ts b/packages/backend/src/server/web/ClientServerService.ts
index 97acfcb919..727bbc9d7b 100644
--- a/packages/backend/src/server/web/ClientServerService.ts
+++ b/packages/backend/src/server/web/ClientServerService.ts
@@ -38,8 +38,8 @@ const _filename = fileURLToPath(import.meta.url);
 const _dirname = dirname(_filename);
 
 const staticAssets = `${_dirname}/../../../assets/`;
-const clientAssets = `${_dirname}/../../../../client/assets/`;
-const assets = `${_dirname}/../../../../../built/_client_dist_/`;
+const clientAssets = `${_dirname}/../../../../frontend/assets/`;
+const assets = `${_dirname}/../../../../../built/_frontend_dist_/`;
 const swAssets = `${_dirname}/../../../../../built/_sw_dist_/`;
 const viteOut = `${_dirname}/../../../../../built/_vite_/`;
 
diff --git a/packages/client/.eslintrc.js b/packages/client/.eslintrc.js
deleted file mode 100644
index 6c3bfb5a6e..0000000000
--- a/packages/client/.eslintrc.js
+++ /dev/null
@@ -1,89 +0,0 @@
-module.exports = {
-	root: true,
-	env: {
-		'node': false,
-	},
-	parser: 'vue-eslint-parser',
-	parserOptions: {
-		'parser': '@typescript-eslint/parser',
-		tsconfigRootDir: __dirname,
-		project: ['./tsconfig.json'],
-		extraFileExtensions: ['.vue'],
-	},
-	extends: [
-		'../shared/.eslintrc.js',
-		'plugin:vue/vue3-recommended',
-	],
-	rules: {
-		'@typescript-eslint/no-empty-interface': [
-			'error',
-			{
-				'allowSingleExtends': true,
-			},
-		],
-		'@typescript-eslint/prefer-nullish-coalescing': [
-			'error',
-		],
-		// window の禁止理由: グローバルスコープと衝突し、予期せぬ結果を招くため
-		// e の禁止理由: error や event など、複数のキーワードの頭文字であり分かりにくいため
-		'id-denylist': ['error', 'window', 'e'],
-		'no-shadow': ['warn'],
-		'vue/attributes-order': ['error', {
-			'alphabetical': false,
-		}],
-		'vue/no-use-v-if-with-v-for': ['error', {
-			'allowUsingIterationVar': false,
-		}],
-		'vue/no-ref-as-operand': 'error',
-		'vue/no-multi-spaces': ['error', {
-			'ignoreProperties': false,
-		}],
-		'vue/no-v-html': 'warn',
-		'vue/order-in-components': 'error',
-		'vue/html-indent': ['warn', 'tab', {
-			'attribute': 1,
-			'baseIndent': 0,
-			'closeBracket': 0,
-			'alignAttributesVertically': true,
-			'ignores': [],
-		}],
-		'vue/html-closing-bracket-spacing': ['warn', {
-			'startTag': 'never',
-			'endTag': 'never',
-			'selfClosingTag': 'never',
-		}],
-		'vue/multi-word-component-names': 'warn',
-		'vue/require-v-for-key': 'warn',
-		'vue/no-unused-components': 'warn',
-		'vue/valid-v-for': 'warn',
-		'vue/return-in-computed-property': 'warn',
-		'vue/no-setup-props-destructure': 'warn',
-		'vue/max-attributes-per-line': 'off',
-		'vue/html-self-closing': 'off',
-		'vue/singleline-html-element-content-newline': 'off',
-		// (vue/vue3-recommended disabled the autofix for Vue 2 compatibility)
-		'vue/v-on-event-hyphenation': ['warn', 'always', { autofix: true }],
-	},
-	globals: {
-		// Node.js
-		'module': false,
-		'require': false,
-		'__dirname': false,
-
-		// Vue
-		'$$': false,
-		'$ref': false,
-		'$shallowRef': false,
-		'$computed': false,
-
-		// Misskey
-		'_DEV_': false,
-		'_LANGS_': false,
-		'_VERSION_': false,
-		'_ENV_': false,
-		'_PERF_PREFIX_': false,
-		'_DATA_TRANSFER_DRIVE_FILE_': false,
-		'_DATA_TRANSFER_DRIVE_FOLDER_': false,
-		'_DATA_TRANSFER_DECK_COLUMN_': false,
-	},
-};
diff --git a/packages/client/.vscode/settings.json b/packages/client/.vscode/settings.json
deleted file mode 100644
index 4b0903b763..0000000000
--- a/packages/client/.vscode/settings.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-	"typescript.tsdk": "node_modules\\typescript\\lib",
-	"path-intellisense.mappings": {
-		"@": "${workspaceRoot}/packages/client/src/"
-	},
-	"eslint.validate": [
-		"javascript",
-		"javascriptreact",
-		"vue"
-	]
-}
diff --git a/packages/client/@types/global.d.ts b/packages/client/@types/global.d.ts
deleted file mode 100644
index c757482900..0000000000
--- a/packages/client/@types/global.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-type FIXME = any;
-
-declare const _LANGS_: string[][];
-declare const _VERSION_: string;
-declare const _ENV_: string;
-declare const _DEV_: boolean;
-declare const _PERF_PREFIX_: string;
-declare const _DATA_TRANSFER_DRIVE_FILE_: string;
-declare const _DATA_TRANSFER_DRIVE_FOLDER_: string;
-declare const _DATA_TRANSFER_DECK_COLUMN_: string;
diff --git a/packages/client/@types/theme.d.ts b/packages/client/@types/theme.d.ts
deleted file mode 100644
index 67f724a9aa..0000000000
--- a/packages/client/@types/theme.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-declare module '@/themes/*.json5' {
-	import { Theme } from "@/scripts/theme";
-
-	const theme: Theme;
-
-	export default theme;
-}
diff --git a/packages/client/@types/vue.d.ts b/packages/client/@types/vue.d.ts
deleted file mode 100644
index 9c9c34ccc5..0000000000
--- a/packages/client/@types/vue.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/// <reference types="vue/macros-global" />
-
-import type { $i } from '@/account';
-import type { defaultStore } from '@/store';
-import type { instance } from '@/instance';
-import type { i18n } from '@/i18n';
-
-declare module 'vue' {
-	interface ComponentCustomProperties {
-		$i: typeof $i;
-		$store: typeof defaultStore;
-		$instance: typeof instance;
-		$t: typeof i18n['t'];
-		$ts: typeof i18n['ts'];
-	}
-}
diff --git a/packages/client/assets/about-icon.png b/packages/client/assets/about-icon.png
deleted file mode 100644
index afc1f0c728..0000000000
Binary files a/packages/client/assets/about-icon.png and /dev/null differ
diff --git a/packages/client/assets/dummy.png b/packages/client/assets/dummy.png
deleted file mode 100644
index 39332b0c1b..0000000000
Binary files a/packages/client/assets/dummy.png and /dev/null differ
diff --git a/packages/client/assets/fedi.jpg b/packages/client/assets/fedi.jpg
deleted file mode 100644
index cbf3748eb8..0000000000
Binary files a/packages/client/assets/fedi.jpg and /dev/null differ
diff --git a/packages/client/assets/label-red.svg b/packages/client/assets/label-red.svg
deleted file mode 100644
index 45996aa9ce..0000000000
--- a/packages/client/assets/label-red.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-	 y="0px" width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
-<polygon fill="#ea2412" points="0,45.255 45.254,0 84.854,0 0,84.854 "/>
-</svg>
diff --git a/packages/client/assets/label.svg b/packages/client/assets/label.svg
deleted file mode 100644
index b1f85f3c07..0000000000
--- a/packages/client/assets/label.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-	 y="0px" width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
-<polygon fill="#0B8AEA" points="0,45.255 45.254,0 84.854,0 0,84.854 "/>
-</svg>
diff --git a/packages/client/assets/misskey.svg b/packages/client/assets/misskey.svg
deleted file mode 100644
index 3fcb2d3ecb..0000000000
--- a/packages/client/assets/misskey.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="515px" height="136px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g id="path2" transform="matrix(0.264585,0,0,0.264585,-50.0005,-50.0001)">
-        <path d="M256.418,188.976C248.558,188.944 240.758,190.308 233.379,193.013C220.308,197.613 209.533,205.888 201.091,217.802C193.02,229.329 188.977,242.195 188.977,256.409L188.977,508.89C188.977,527.332 195.52,543.29 208.576,556.732C222.032,569.803 237.99,576.331 256.418,576.331C275.259,576.331 291.204,569.803 304.274,556.747C317.73,543.291 324.441,527.332 324.441,508.89L324.441,462.983C324.584,453.04 334.824,455.655 340.01,462.983C349.695,479.767 370.251,494.19 394.193,494.105L394.193,494.119C418.119,494.019 438.005,482.196 448.375,462.983C452.304,458.354 463.377,450.455 464.52,462.983L464.52,508.89C464.52,527.332 471.047,543.29 484.104,556.732C497.574,569.803 513.511,576.331 531.953,576.331C550.78,576.331 566.739,569.803 579.809,556.747C593.265,543.291 599.977,527.332 599.977,508.89L599.977,256.409C599.977,242.195 595.752,229.329 587.309,217.802C579.224,205.874 568.653,197.613 555.597,193.013C547.912,190.314 540.228,188.976 532.543,188.976C511.788,188.976 494.301,197.046 480.073,213.188L411.636,293.281C410.107,294.438 405.006,303.247 394.178,303.247C383.379,303.247 378.868,294.439 377.325,293.296L308.297,213.188C294.47,197.046 277.173,188.976 256.418,188.976ZM682.904,188.983C666.763,188.983 652.926,194.748 641.404,206.271C630.261,217.413 624.691,231.054 624.691,247.196C624.691,263.338 630.261,277.174 641.404,288.697C652.926,299.839 666.763,305.41 682.904,305.41C699.046,305.41 712.88,299.839 724.412,288.697C735.935,277.174 741.693,263.338 741.693,247.196C741.693,231.054 735.935,217.413 724.412,206.271C712.88,194.748 699.046,188.983 682.904,188.983ZM1327.58,193.013C1311.45,193.013 1297.62,198.779 1286.1,210.302C1274.96,221.444 1269.38,235.08 1269.38,251.212L1269.38,519.72C1269.38,535.861 1274.96,549.697 1286.1,561.22C1297.62,572.362 1311.45,577.933 1327.58,577.933C1343.73,577.933 1357.55,572.362 1369.08,561.22C1380.6,549.697 1386.37,535.867 1386.37,519.734C1386.37,508.211 1387.9,502.453 1390.96,502.453C1392.51,502.453 1394.05,503.023 1395.58,504.166L1453.2,560.061C1464.72,571.203 1478.36,576.774 1494.11,576.774C1510.62,576.774 1524.45,571.009 1535.6,559.486C1546.74,547.572 1552.31,533.936 1552.31,518.575C1552.31,502.053 1546.36,488.029 1534.45,476.506C1508.32,450.765 1494.69,437.517 1493.54,436.755C1488.54,431.755 1488.73,427.53 1494.11,424.073L1495.27,423.497L1495.27,422.929L1531.57,399.875C1548.85,388.352 1557.5,372.026 1557.5,350.904C1557.5,339.381 1554.42,328.622 1548.28,318.623C1536.76,301.339 1520.43,292.691 1499.3,292.691C1487.78,292.691 1477.02,295.768 1467.04,301.911C1422.48,331.499 1399.42,346.678 1397.88,347.449C1395.2,349.363 1392.7,349.738 1390.4,348.586C1387.7,347.434 1386.35,344.939 1386.35,341.101L1386.35,251.212C1386.35,235.08 1380.59,221.444 1369.07,210.302C1357.55,198.779 1343.72,193.013 1327.58,193.013ZM1716.37,291.738C1676.42,291.738 1642.24,305.949 1613.81,334.376C1585.76,362.422 1571.74,396.227 1571.74,435.795C1571.74,475.745 1585.76,509.932 1613.81,538.359C1642.24,566.404 1676.42,580.428 1716.37,580.428C1755.94,580.428 1789.94,566.404 1818.37,538.359C1827.2,529.521 1831.62,518.773 1831.62,506.107C1831.62,493.423 1827.2,482.664 1818.37,473.827C1809.53,464.999 1798.77,460.584 1786.11,460.584C1773.42,460.584 1762.66,464.999 1753.83,473.827C1743.46,484.588 1730.97,489.963 1716.37,489.963C1701.4,489.963 1688.53,484.78 1677.77,474.41C1667.39,463.649 1662.2,450.775 1662.2,435.795C1662.2,421.206 1667.59,408.72 1678.35,398.34C1683.73,392.578 1690.26,388.74 1697.93,386.817C1699.87,386.436 1701.4,386.623 1702.55,387.385C1703.32,388.547 1702.93,389.702 1701.39,390.854L1689.87,402.953C1681.03,411.791 1676.61,422.359 1676.61,434.644C1676.61,447.319 1680.45,457.497 1688.13,465.182C1695.81,472.868 1706.57,476.705 1720.41,476.705C1730.01,476.705 1739.61,471.91 1749.21,462.311L1816.06,396.044C1824.9,387.197 1829.32,376.436 1829.32,363.77C1829.32,351.086 1824.9,340.332 1816.06,331.504C1789.17,304.992 1755.94,291.738 1716.37,291.738ZM877.977,292.668C841.947,292.194 813.839,301.679 793.662,321.133C775.996,338.036 767.168,359.358 767.168,385.089C767.549,417.363 780.035,441.565 804.624,457.697C811.918,462.687 820.941,466.72 831.693,469.796C837.083,471.72 846.111,474.02 858.777,476.705C869.919,479.391 882.023,481.886 895.088,484.191C897.774,484.962 898.924,486.312 898.543,488.236C898.543,490.541 897.58,491.691 895.657,491.691C890.667,492.072 886.059,492.266 881.831,492.266C850.328,488.81 829.001,485.927 817.859,483.622C814.793,482.851 811.535,482.463 808.078,482.463C796.165,482.463 785.787,486.884 776.949,495.721C768.502,504.178 764.282,514.551 764.282,526.836C764.282,536.825 767.352,545.854 773.494,553.92C780.027,561.986 788.486,567.169 798.866,569.473C831.13,576.778 860.317,580.428 886.429,580.428C922.16,580.428 950.013,570.825 969.992,551.617C987.277,535.094 995.925,513.775 995.925,487.653C995.925,455.388 983.626,431.187 959.037,415.045C945.972,406.598 927.915,400.45 904.869,396.612C891.042,393.927 879.518,391.427 870.3,389.112L870.3,389.127C867.605,388.356 866.067,386.818 865.686,384.513C865.686,382.59 867.224,381.44 870.3,381.059C873.757,380.678 877.415,380.678 881.262,381.059C913.146,384.135 934.652,386.823 945.794,389.127C948.861,389.889 951.931,390.271 955.007,390.271C967.301,390.271 977.674,386.051 986.121,377.604C994.959,368.767 999.379,358.393 999.379,346.49C999.379,336.109 996.109,326.894 989.576,318.837C983.043,310.761 974.79,305.566 964.81,303.261C938.298,297.5 911.788,294.042 885.285,292.89C882.813,292.77 880.379,292.7 877.977,292.668ZM1128.73,292.668C1092.7,292.194 1064.59,301.679 1044.42,321.133C1026.75,338.036 1017.92,359.358 1017.92,385.089C1018.3,417.363 1030.79,441.565 1055.38,457.697C1062.67,462.687 1071.7,466.72 1082.46,469.796C1087.84,471.72 1096.86,474.02 1109.54,476.705C1120.68,479.391 1132.79,481.886 1145.84,484.191C1148.53,484.962 1149.68,486.312 1149.3,488.236C1149.3,490.541 1148.34,491.691 1146.41,491.691C1141.42,492.072 1136.81,492.266 1132.59,492.266C1101.09,488.81 1079.77,485.927 1068.63,483.622C1065.55,482.851 1062.29,482.463 1058.83,482.463C1046.92,482.463 1036.55,486.884 1027.72,495.721C1019.26,504.178 1015.04,514.551 1015.04,526.836C1015.04,536.825 1018.11,545.854 1024.26,553.92C1030.79,561.986 1039.24,567.169 1049.62,569.473C1081.88,576.778 1111.08,580.428 1137.2,580.428C1172.92,580.428 1200.77,570.825 1220.75,551.617C1238.03,535.094 1246.68,513.775 1246.68,487.653C1246.68,455.388 1234.39,431.187 1209.81,415.045C1196.74,406.598 1178.68,400.45 1155.64,396.612C1141.81,393.927 1130.29,391.427 1121.07,389.112L1121.05,389.127C1118.37,388.356 1116.84,386.818 1116.45,384.513C1116.45,382.59 1117.99,381.44 1121.05,381.059C1124.52,380.678 1128.17,380.678 1132.01,381.059C1163.89,384.135 1185.41,386.823 1196.55,389.127C1199.62,389.889 1202.69,390.271 1205.76,390.271C1218.06,390.271 1228.43,386.051 1236.89,377.604C1245.72,368.767 1250.13,358.393 1250.13,346.49C1250.13,336.109 1246.87,326.894 1240.35,318.837C1233.81,310.761 1225.55,305.566 1215.56,303.261C1189.06,297.5 1162.55,294.042 1136.04,292.89C1133.57,292.77 1131.13,292.7 1128.73,292.668ZM1910.17,296.736C1894.04,296.736 1880.21,302.501 1868.69,314.024C1857.55,325.157 1851.98,338.793 1851.98,354.934L1851.98,435.028C1851.98,473.825 1865.8,507.05 1893.45,534.705C1921.12,562.36 1954.36,576.191 1993.15,576.191C2000.84,576.191 2007.95,575.614 2014.48,574.471C2018.32,573.699 2021,574.469 2022.53,576.774C2023.69,578.307 2023.3,580.42 2021.39,583.115C2016.39,590.029 2005.82,593.486 1989.69,593.486C1983.55,593.486 1975.68,591.949 1966.07,588.873C1956.47,585.797 1948.98,584.259 1943.6,584.259C1920.93,584.259 1904.99,594.638 1895.77,615.388C1892.32,622.302 1890.58,629.598 1890.58,637.283C1890.58,659.948 1900.77,675.892 1921.13,685.11C1941.49,694.709 1964.34,699.505 1989.69,699.505C2033.49,699.505 2068.25,686.639 2093.98,660.898C2120.11,635.166 2133.18,600.784 2133.18,557.758L2133.18,452.308C2133.94,446.157 2134.32,440.399 2134.32,435.028L2134.32,354.934C2134.32,338.802 2128.57,325.166 2117.04,314.024C2105.9,302.501 2092.27,296.736 2076.13,296.736C2059.99,296.736 2046.16,302.501 2034.63,314.024C2023.11,325.157 2017.35,338.793 2017.35,354.934L2017.35,435.028C2017.35,441.551 2015.04,447.309 2010.43,452.308C2005.83,456.918 2000.07,459.225 1993.15,459.225C1986.62,459.225 1980.86,456.918 1975.87,452.308C1971.26,447.309 1968.95,441.551 1968.95,435.028L1968.95,354.934C1968.95,338.802 1963.19,325.166 1951.67,314.024C1940.14,302.501 1926.3,296.736 1910.17,296.736ZM683.473,316.947C667.331,316.947 653.495,322.713 641.972,334.236C630.449,345.768 624.691,359.602 624.691,375.744L624.691,518.118C624.691,534.259 630.449,548.095 641.972,559.618C653.504,570.761 667.341,576.331 683.473,576.331C699.624,576.331 713.27,570.761 724.412,559.618C735.935,548.095 741.693,534.259 741.693,518.118L741.693,375.744C741.693,359.593 735.935,345.759 724.412,334.236C713.261,322.713 699.614,316.947 683.473,316.947Z" style="fill:white;fill-rule:nonzero;"/>
-    </g>
-</svg>
diff --git a/packages/client/assets/remove.png b/packages/client/assets/remove.png
deleted file mode 100644
index c2e222a0fc..0000000000
Binary files a/packages/client/assets/remove.png and /dev/null differ
diff --git a/packages/client/assets/sounds/aisha/1.mp3 b/packages/client/assets/sounds/aisha/1.mp3
deleted file mode 100644
index d8e9a2f265..0000000000
Binary files a/packages/client/assets/sounds/aisha/1.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/aisha/2.mp3 b/packages/client/assets/sounds/aisha/2.mp3
deleted file mode 100644
index 477c2eba43..0000000000
Binary files a/packages/client/assets/sounds/aisha/2.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/aisha/3.mp3 b/packages/client/assets/sounds/aisha/3.mp3
deleted file mode 100644
index fe0d8063df..0000000000
Binary files a/packages/client/assets/sounds/aisha/3.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/noizenecio/kick_gaba1.mp3 b/packages/client/assets/sounds/noizenecio/kick_gaba1.mp3
deleted file mode 100644
index 616b506c4f..0000000000
Binary files a/packages/client/assets/sounds/noizenecio/kick_gaba1.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/noizenecio/kick_gaba2.mp3 b/packages/client/assets/sounds/noizenecio/kick_gaba2.mp3
deleted file mode 100644
index 33c2837620..0000000000
Binary files a/packages/client/assets/sounds/noizenecio/kick_gaba2.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/noizenecio/kick_gaba3.mp3 b/packages/client/assets/sounds/noizenecio/kick_gaba3.mp3
deleted file mode 100644
index 1791f26573..0000000000
Binary files a/packages/client/assets/sounds/noizenecio/kick_gaba3.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/noizenecio/kick_gaba4.mp3 b/packages/client/assets/sounds/noizenecio/kick_gaba4.mp3
deleted file mode 100644
index 5f8bf468e5..0000000000
Binary files a/packages/client/assets/sounds/noizenecio/kick_gaba4.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/noizenecio/kick_gaba5.mp3 b/packages/client/assets/sounds/noizenecio/kick_gaba5.mp3
deleted file mode 100644
index dabe754b5b..0000000000
Binary files a/packages/client/assets/sounds/noizenecio/kick_gaba5.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/noizenecio/kick_gaba6.mp3 b/packages/client/assets/sounds/noizenecio/kick_gaba6.mp3
deleted file mode 100644
index 57ecb01bda..0000000000
Binary files a/packages/client/assets/sounds/noizenecio/kick_gaba6.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/noizenecio/kick_gaba7.mp3 b/packages/client/assets/sounds/noizenecio/kick_gaba7.mp3
deleted file mode 100644
index 6ba317deb1..0000000000
Binary files a/packages/client/assets/sounds/noizenecio/kick_gaba7.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/down.mp3 b/packages/client/assets/sounds/syuilo/down.mp3
deleted file mode 100644
index 4cd421139d..0000000000
Binary files a/packages/client/assets/sounds/syuilo/down.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/kick.mp3 b/packages/client/assets/sounds/syuilo/kick.mp3
deleted file mode 100644
index 4e0e72091c..0000000000
Binary files a/packages/client/assets/sounds/syuilo/kick.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/pirori-square-wet.mp3 b/packages/client/assets/sounds/syuilo/pirori-square-wet.mp3
deleted file mode 100644
index babf1fce60..0000000000
Binary files a/packages/client/assets/sounds/syuilo/pirori-square-wet.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/pirori-wet.mp3 b/packages/client/assets/sounds/syuilo/pirori-wet.mp3
deleted file mode 100644
index 25e2c46a64..0000000000
Binary files a/packages/client/assets/sounds/syuilo/pirori-wet.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/pirori.mp3 b/packages/client/assets/sounds/syuilo/pirori.mp3
deleted file mode 100644
index a745415ac0..0000000000
Binary files a/packages/client/assets/sounds/syuilo/pirori.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/poi1.mp3 b/packages/client/assets/sounds/syuilo/poi1.mp3
deleted file mode 100644
index 59dae90965..0000000000
Binary files a/packages/client/assets/sounds/syuilo/poi1.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/poi2.mp3 b/packages/client/assets/sounds/syuilo/poi2.mp3
deleted file mode 100644
index a65c653891..0000000000
Binary files a/packages/client/assets/sounds/syuilo/poi2.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/pope1.mp3 b/packages/client/assets/sounds/syuilo/pope1.mp3
deleted file mode 100644
index d6f53cfacc..0000000000
Binary files a/packages/client/assets/sounds/syuilo/pope1.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/pope2.mp3 b/packages/client/assets/sounds/syuilo/pope2.mp3
deleted file mode 100644
index fe5d95e292..0000000000
Binary files a/packages/client/assets/sounds/syuilo/pope2.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/popo.mp3 b/packages/client/assets/sounds/syuilo/popo.mp3
deleted file mode 100644
index a2a1605bbb..0000000000
Binary files a/packages/client/assets/sounds/syuilo/popo.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/queue-jammed.mp3 b/packages/client/assets/sounds/syuilo/queue-jammed.mp3
deleted file mode 100644
index 99e0c437fe..0000000000
Binary files a/packages/client/assets/sounds/syuilo/queue-jammed.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/reverved.mp3 b/packages/client/assets/sounds/syuilo/reverved.mp3
deleted file mode 100644
index 47588ef270..0000000000
Binary files a/packages/client/assets/sounds/syuilo/reverved.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/ryukyu.mp3 b/packages/client/assets/sounds/syuilo/ryukyu.mp3
deleted file mode 100644
index 9e935e3f37..0000000000
Binary files a/packages/client/assets/sounds/syuilo/ryukyu.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/snare.mp3 b/packages/client/assets/sounds/syuilo/snare.mp3
deleted file mode 100644
index 9244189c2d..0000000000
Binary files a/packages/client/assets/sounds/syuilo/snare.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/square-pico.mp3 b/packages/client/assets/sounds/syuilo/square-pico.mp3
deleted file mode 100644
index c4d8305ae7..0000000000
Binary files a/packages/client/assets/sounds/syuilo/square-pico.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/triple.mp3 b/packages/client/assets/sounds/syuilo/triple.mp3
deleted file mode 100644
index 54ab974d46..0000000000
Binary files a/packages/client/assets/sounds/syuilo/triple.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/up.mp3 b/packages/client/assets/sounds/syuilo/up.mp3
deleted file mode 100644
index 3f30867764..0000000000
Binary files a/packages/client/assets/sounds/syuilo/up.mp3 and /dev/null differ
diff --git a/packages/client/assets/sounds/syuilo/waon.mp3 b/packages/client/assets/sounds/syuilo/waon.mp3
deleted file mode 100644
index a4af473861..0000000000
Binary files a/packages/client/assets/sounds/syuilo/waon.mp3 and /dev/null differ
diff --git a/packages/client/assets/tagcanvas.min.js b/packages/client/assets/tagcanvas.min.js
deleted file mode 100644
index bcee46e682..0000000000
--- a/packages/client/assets/tagcanvas.min.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright (C) 2010-2021 Graham Breach
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Lesser General Public License for more details.
- * 
- * You should have received a copy of the GNU Lesser General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-/**
- * TagCanvas 2.11
- * For more information, please contact <graham@goat1000.com>
- */
- (function(){"use strict";var r,C,p=Math.abs,o=Math.sin,l=Math.cos,g=Math.max,h=Math.min,af=Math.ceil,E=Math.sqrt,w=Math.pow,I={},D={},R={0:"0,",1:"17,",2:"34,",3:"51,",4:"68,",5:"85,",6:"102,",7:"119,",8:"136,",9:"153,",a:"170,",A:"170,",b:"187,",B:"187,",c:"204,",C:"204,",d:"221,",D:"221,",e:"238,",E:"238,",f:"255,",F:"255,"},f,d,b,T,z,F,M,c=document,v,e,P,j={};for(r=0;r<256;++r)C=r.toString(16),r<16&&(C='0'+C),D[C]=D[C.toUpperCase()]=r.toString()+',';function n(a){return typeof a!='undefined'}function B(a){return typeof a=='object'&&a!=null}function G(a,c,b){return isNaN(a)?b:h(b,g(c,a))}function x(){return!1}function q(){return(new Date).valueOf()}function ak(c,d){var b=[],e=c.length,a;for(a=0;a<e;++a)b.push(c[a]);return b.sort(d),b}function ai(a){for(var b=a.length-1,d,c;b;)c=~~(Math.random()*b),d=a[b],a[b]=a[c],a[c]=d,--b}function ag(){var a=window.AudioContext||window.webkitAudioContext;if(e=new a,!e){e='off';return}return e}function $(u,a,t,s,r,q,p){var j=s,h=r,i=t*.01,n=80*i,m=100*i,o=40*i,l=30*i,c=l/2,b=j+n,f=b-o,k=h+m,d=k-l,g=h+l,e=h+m/2;if(a.setTransform(1,0,0,1,0,0),a.setLineDash([]),a.globalAlpha=1,a.strokeStyle=p,a.lineWidth=q,a.lineJoin='round',a.beginPath(),a.moveTo(f,g),a.lineTo(f,d),a.moveTo(b,k),a.lineTo(f,d),a.lineTo(j,d),a.lineTo(j,g),a.lineTo(f,g),a.lineTo(b,h),u){a.lineTo(b,g),a.moveTo(b,d),a.lineTo(b,k),a.moveTo(b-c,e-c),a.lineTo(b+c,e+c),a.moveTo(b+c,e-c),a.lineTo(b-c,e+c),a.stroke();return}a.closePath(),a.stroke()}function s(a,b,c){this.x=a,this.y=b,this.z=c}z=s.prototype,z.length=function(){return E(this.x*this.x+this.y*this.y+this.z*this.z)},z.dot=function(a){return this.x*a.x+this.y*a.y+this.z*a.z},z.cross=function(a){var b=this.y*a.z-this.z*a.y,c=this.z*a.x-this.x*a.z,d=this.x*a.y-this.y*a.x;return new s(b,c,d)},z.angle=function(b){var c=this.dot(b),a;return c==0?Math.PI/2:(a=c/(this.length()*b.length()),a>=1)?0:a<=-1?Math.PI:Math.acos(a)},z.unit=function(){var a=this.length();return new s(this.x/a,this.y/a,this.z/a)};function ay(b,a){a=a*Math.PI/180,b=b*Math.PI/180;var c=o(b)*l(a),d=-o(a),e=-l(b)*l(a);return new s(c,d,e)}function m(a){this[1]={1:a[0],2:a[1],3:a[2]},this[2]={1:a[3],2:a[4],3:a[5]},this[3]={1:a[6],2:a[7],3:a[8]}}T=m.prototype,m.Identity=function(){return new m([1,0,0,0,1,0,0,0,1])},m.Rotation=function(e,a){var c=o(e),d=l(e),b=1-d;return new m([d+w(a.x,2)*b,a.x*a.y*b-a.z*c,a.x*a.z*b+a.y*c,a.y*a.x*b+a.z*c,d+w(a.y,2)*b,a.y*a.z*b-a.x*c,a.z*a.x*b-a.y*c,a.z*a.y*b+a.x*c,d+w(a.z,2)*b])},T.mul=function(c){var d=[],a,b,e=c.xform?1:0;for(a=1;a<=3;++a)for(b=1;b<=3;++b)e?d.push(this[a][1]*c[1][b]+this[a][2]*c[2][b]+this[a][3]*c[3][b]):d.push(this[a][b]*c);return new m(d)},T.xform=function(b){var a={},c=b.x,d=b.y,e=b.z;return a.x=c*this[1][1]+d*this[2][1]+e*this[3][1],a.y=c*this[1][2]+d*this[2][2]+e*this[3][2],a.z=c*this[1][3]+d*this[2][3]+e*this[3][3],a};function aB(g,j,k,m,f){var a,b,c,d,e=[],h=2/g,i;i=Math.PI*(3-E(5)+(parseFloat(f)?parseFloat(f):0));for(a=0;a<g;++a)b=a*h-1+h/2,c=E(1-b*b),d=a*i,e.push([l(d)*c*j,b*k,o(d)*c*m]);return e}function U(n,p,m,k,h,g){var b,f=[],i=2/n,j,a,d,c,e;j=Math.PI*(3-E(5)+(parseFloat(g)?parseFloat(g):0));for(a=0;a<n;++a)d=a*i-1+i/2,b=a*j,c=l(b),e=o(b),f.push(p?[d*m,c*k,e*h]:[c*m,d*k,e*h]);return f}function aa(k,e,f,h,i,j){var b,g=[],m=Math.PI*2/e,a,c,d;for(a=0;a<e;++a)b=a*m,c=l(b),d=o(b),g.push(k?[j*f,c*h,d*i]:[c*f,j*h,d*i]);return g}function ax(a,b,c,d,e){return U(a,0,b,c,d,e)}function aH(a,b,c,d,e){return U(a,1,b,c,d,e)}function aG(b,c,d,e,a){return a=isNaN(a)?0:a*1,aa(0,b,c,d,e,a)}function aF(b,c,d,e,a){return a=isNaN(a)?0:a*1,aa(1,b,c,d,e,a)}function av(b){var a=new Image;a.onload=function(){var c=a.width/2,d=a.height/2;b.centreFunc=function(b,g,h,e,f){b.setTransform(1,0,0,1,0,0),b.globalAlpha=1,b.drawImage(a,e-c,f-d)}},a.src=b.centreImage}function aE(a,c){var b=a,d,e,f=(c*1).toPrecision(3)+')';return a[0]==='#'?(I[a]||(a.length===4?I[a]='rgba('+R[a[1]]+R[a[2]]+R[a[3]]:I[a]='rgba('+D[a.substr(1,2)]+D[a.substr(3,2)]+D[a.substr(5,2)]),b=I[a]+f):a.substr(0,4)==='rgb('||a.substr(0,4)==='hsl('?b=a.replace('(','a(').replace(')',','+f):(a.substr(0,5)==='rgba('||a.substr(0,5)==='hsla(')&&(d=a.lastIndexOf(',')+1,e=a.indexOf(')'),c*=parseFloat(a.substring(d,e)),b=a.substr(0,d)+c.toPrecision(3)+')'),b}function k(b,d){if(window.G_vmlCanvasManager)return null;var a=c.createElement('canvas');return a.width=b,a.height=d,a}function aD(){var b=k(3,3),a,c;return!!b&&(a=b.getContext('2d'),a.strokeStyle='#000',a.shadowColor='#fff',a.shadowBlur=3,a.globalAlpha=0,a.strokeRect(2,2,2,2),a.globalAlpha=1,c=a.getImageData(2,2,1,1),b=null,c.data[0]>0)}function aC(a,c,f,d){var e=a.createLinearGradient(0,0,c,0),b;for(b in d)e.addColorStop(1-b,d[b]);a.fillStyle=e,a.fillRect(0,f,c,1)}function L(a,m,j){var l=1024,d=1,e=a.weightGradient,i,f,b,c;if(a.gCanvas)f=a.gCanvas.getContext('2d'),d=a.gCanvas.height;else{if(B(e[0])?d=e.length:e=[e],a.gCanvas=i=k(l,d),!i)return null;f=i.getContext('2d');for(b=0;b<d;++b)aC(f,l,b,e[b])}return j=g(h(j||0,d-1),0),c=f.getImageData(~~((l-1)*m),j,1,1).data,'rgba('+c[0]+','+c[1]+','+c[2]+','+c[3]/255+')'}function Y(b,i,q,k,o,n,h,d,a,g,f,l){var m=o+(d||0)+(a.length&&a[0]<0?p(a[0]):0),j=n+(d||0)+(a.length&&a[1]<0?p(a[1]):0),c,e;b.font=i,b.textBaseline='top',b.fillStyle=q,h&&(b.shadowColor=h),d&&(b.shadowBlur=d),a.length&&(b.shadowOffsetX=a[0],b.shadowOffsetY=a[1]);for(c=0;c<k.length;++c)e=0,f&&('right'==l?e=g-f[c]:'centre'==l&&(e=(g-f[c])/2)),b.fillText(k[c],m+e,j),j+=parseInt(i)}function y(d,a,b,f,e,c,g){c?(d.beginPath(),d.moveTo(a,b+e-c),d.arcTo(a,b,a+c,b,c),d.arcTo(a+f,b,a+f,b+c,c),d.arcTo(a+f,b+e,a+f-c,b+e,c),d.arcTo(a,b+e,a,b+e-c,c),d.closePath(),d[g?'stroke':'fill']()):d[g?'strokeRect':'fillRect'](a,b,f,e)}function O(a,b,c,d,e,f,g,h,i){this.strings=a,this.font=b,this.width=c,this.height=d,this.maxWidth=e,this.stringWidths=f,this.align=g,this.valign=h,this.scale=i}M=O.prototype,M.SetImage=function(a,b,c,d,e,f,g,h){this.image=a,this.iwidth=b*this.scale,this.iheight=c*this.scale,this.ipos=d,this.ipad=e*this.scale,this.iscale=h,this.ialign=f,this.ivalign=g},M.Align=function(c,d,a){var b=0;return a=='right'||a=='bottom'?b=d-c:a!='left'&&a!='top'&&(b=(d-c)/2),b},M.Create=function(G,D,F,b,A,m,q,j,E){var o,e,f,a,l,s,i,u,v,r,w,n,c,d,x,B=p(q[0]),C=p(q[1]),t,z;return j=g(j,B+m,C+m),l=2*(j+b),i=2*(j+b),e=this.width+l,f=this.height+i,v=r=j+b,this.image&&(w=n=j+b,c=this.iwidth,d=this.iheight,this.ipos=='top'||this.ipos=='bottom'?(c<this.width?w+=this.Align(c,this.width,this.ialign):v+=this.Align(this.width,c,this.align),this.ipos=='top'?r+=d+this.ipad:n+=this.height+this.ipad,e=g(e,c+l),f+=d+this.ipad):(d<this.height?n+=this.Align(d,this.height,this.ivalign):r+=this.Align(this.height,d,this.valign),this.ipos=='right'?w+=this.width+this.ipad:v+=c+this.ipad,e+=c+this.ipad,f=g(f,d+i))),o=k(e,f),!o?null:(l=i=b/2,s=e-b,u=f-b,x=h(E,s/2,u/2),a=o.getContext('2d'),D&&(a.fillStyle=D,y(a,l,i,s,u,x)),b&&(a.strokeStyle=F,a.lineWidth=b,y(a,l,i,s,u,x,!0)),(m||B||C)&&(t=k(e,f),t&&(z=a,a=t.getContext('2d'))),Y(a,this.font,G,this.strings,v,r,0,0,[],this.maxWidth,this.stringWidths,this.align),this.image&&a.drawImage(this.image,w,n,c,d),z&&(a=z,A&&(a.shadowColor=A),m&&(a.shadowBlur=m),a.shadowOffsetX=q[0],a.shadowOffsetY=q[1],a.drawImage(t,0,0)),o)};function H(a,c,d){var b=k(c,d),e;return b?(e=b.getContext('2d'),e.drawImage(a,(c-a.width)/2,(d-a.height)/2),b):null}function S(e,b,c){var a=k(b,c),d;return a?(d=a.getContext('2d'),d.drawImage(e,0,0,b,c),a):null}function W(n,u,t,e,s,c,v,d,r,w){var g=u+(2*d+c)*e,f=t+(2*d+c)*e,l=k(g,f),b,i,q,m,j,o,a,p;return l?(c*=e,r*=e,i=q=c/2,m=g-c,j=f-c,d=d*e+i,b=l.getContext('2d'),p=h(r,m/2,j/2),s&&(b.fillStyle=s,y(b,i,q,m,j,p)),c&&(b.strokeStyle=v,b.lineWidth=c,y(b,i,q,m,j,p,!0)),w?(o=k(g,f),a=o.getContext('2d'),a.drawImage(n,d,d,u,t),a.globalCompositeOperation='source-in',a.fillStyle=v,a.fillRect(0,0,g,f),a.globalCompositeOperation='destination-over',a.drawImage(l,0,0),a.globalCompositeOperation='source-over',b.drawImage(o,0,0)):b.drawImage(n,d,d,n.width,n.height),{image:l,width:g/e,height:f/e}):null}function at(l,f,c,d,j){var e,a,b=parseFloat(f),i=g(c,d);return e=k(c,d),!e?null:(f.indexOf('%')>0?b=i*b/100:b=b*j,a=e.getContext('2d'),a.globalCompositeOperation='source-over',a.fillStyle='#fff',b>=i/2?(b=h(c,d)/2,a.beginPath(),a.moveTo(c/2,d/2),a.arc(c/2,d/2,b,0,2*Math.PI,!1),a.fill(),a.closePath()):(b=h(c/2,d/2,b),y(a,0,0,c,d,b,!0),a.fill()),a.globalCompositeOperation='source-in',a.drawImage(l,0,0,c,d),e)}function ao(q,m,i,b,h,a,c){var g=p(c[0]),f=p(c[1]),j=m+(g>a?g+a:a*2)*b,l=i+(f>a?f+a:a*2)*b,n=b*((a||0)+(c[0]<0?g:0)),o=b*((a||0)+(c[1]<0?f:0)),e,d;return e=k(j,l),!e?null:(d=e.getContext('2d'),h&&(d.shadowColor=h),a&&(d.shadowBlur=a*b),c&&(d.shadowOffsetX=c[0]*b,d.shadowOffsetY=c[1]*b),d.drawImage(q,n,o,m,i),{image:e,width:j/b,height:l/b})}function ae(m,o,l){var c=parseInt(m.toString().length*l),h=parseInt(l*2*m.length),j=k(c,h),g,i,e,f,b,d,n,a;if(!j)return null;g=j.getContext('2d'),g.fillStyle='#000',g.fillRect(0,0,c,h),Y(g,l+'px '+o,'#fff',m,0,0,0,0,[],'centre'),i=g.getImageData(0,0,c,h),e=i.width,f=i.height,a={min:{x:e,y:f},max:{x:-1,y:-1}};for(d=0;d<f;++d)for(b=0;b<e;++b)n=(d*e+b)*4,i.data[n+1]>0&&(b<a.min.x&&(a.min.x=b),b>a.max.x&&(a.max.x=b),d<a.min.y&&(a.min.y=d),d>a.max.y&&(a.max.y=d));return e!=c&&(a.min.x*=c/e,a.max.x*=c/e),f!=h&&(a.min.y*=c/f,a.max.y*=c/f),j=null,a}function Q(a){return"'"+a.replace(/(\'|\")/g,'').replace(/\s*,\s*/g,"', '")+"'"}function t(b,d,a){a=a||c,a.addEventListener?a.addEventListener(b,d,!1):a.attachEvent('on'+b,d)}function am(b,d,a){a=a||c,a.removeEventListener?a.removeEventListener(b,d):a.detachEvent('on'+b,d)}function A(g,e,j,a,b){var l=b.imageScale,h,c,k,m,f,d;if(!e.complete)return t('load',function(){A(g,e,j,a,b)},e);if(!g.complete)return t('load',function(){A(g,e,j,a,b)},g);if(j&&!j.complete)return t('load',function(){A(g,e,j,a,b)},j);e.width=e.width,e.height=e.height,l&&(g.width=e.width*l,g.height=e.height*l),a.iw=g.width,a.ih=g.height,b.txtOpt&&(c=g,h=b.zoomMax*b.txtScale,f=a.iw*h,d=a.ih*h,f<e.naturalWidth||d<e.naturalHeight?(c=S(g,f,d),c&&(a.fimage=c)):(f=a.iw,d=a.ih,h=1),parseFloat(b.imageRadius)&&(a.image=a.fimage=g=at(a.image,b.imageRadius,f,d,h)),a.HasText()||(b.shadow&&(c=ao(a.image,f,d,h,b.shadow,b.shadowBlur,b.shadowOffset),c&&(a.fimage=c.image,a.w=c.width,a.h=c.height)),(b.bgColour||b.bgOutlineThickness)&&(k=b.bgColour=='tag'?i(a.a,'background-color'):b.bgColour,m=b.bgOutline=='tag'?i(a.a,'color'):b.bgOutline||b.textColour,f=a.fimage.width,d=a.fimage.height,b.outlineMethod=='colour'&&(c=W(a.fimage,f,d,h,k,b.bgOutlineThickness,a.outline.colour,b.padding,b.bgRadius,1),c&&(a.oimage=c.image)),c=W(a.fimage,f,d,h,k,b.bgOutlineThickness,m,b.padding,b.bgRadius),c&&(a.fimage=c.image,a.w=c.width,a.h=c.height)),b.outlineMethod=='size'&&(b.outlineIncrease>0?(a.iw+=2*b.outlineIncrease,a.ih+=2*b.outlineIncrease,f=h*a.iw,d=h*a.ih,c=S(a.fimage,f,d),a.oimage=c,a.fimage=H(a.fimage,a.oimage.width,a.oimage.height)):(f=h*(a.iw+2*b.outlineIncrease),d=h*(a.ih+2*b.outlineIncrease),c=S(a.fimage,f,d),a.oimage=H(c,a.fimage.width,a.fimage.height))))),a.alt=j,a.Init()}function i(a,d){var b=c.defaultView,e=d.replace(/\-([a-z])/g,function(a){return a.charAt(1).toUpperCase()});return b&&b.getComputedStyle&&b.getComputedStyle(a,null).getPropertyValue(d)||a.currentStyle&&a.currentStyle[e]}function aj(c,d,e){var b=1,a;return d?b=1*(c.getAttribute(d)||e):(a=i(c,'font-size'))&&(b=a.indexOf('px')>-1&&a.replace('px','')*1||a.indexOf('pt')>-1&&a.replace('pt','')*1.25||a*3.3),b}function u(a){return a.target&&n(a.target.id)?a.target.id:a.srcElement.parentNode.id}function K(a,c){var b,d,e=parseInt(i(c,'width'))/c.width,f=parseInt(i(c,'height'))/c.height;return n(a.offsetX)?b={x:a.offsetX,y:a.offsetY}:(d=X(c.id),n(a.changedTouches)&&(a=a.changedTouches[0]),a.pageX&&(b={x:a.pageX-d.x,y:a.pageY-d.y})),b&&e&&f&&(b.x/=e,b.y/=f),b}function an(c){var d=c.target||c.fromElement.parentNode,b=a.tc[d.id];b&&(b.mx=b.my=-1,b.UnFreeze(),b.EndDrag())}function ad(e){var g,c=a,b,d,f=u(e);for(g in c.tc)b=c.tc[g],b.tttimer&&(clearTimeout(b.tttimer),b.tttimer=null);f&&c.tc[f]&&(b=c.tc[f],(d=K(e,b.canvas))&&(b.mx=d.x,b.my=d.y,b.Drag(e,d)),b.drawn=0)}function ap(b){var e=a,f=c.addEventListener?0:1,d=u(b);d&&b.button==f&&e.tc[d]&&e.tc[d].BeginDrag(b)}function aq(b){var f=a,g=c.addEventListener?0:1,e=u(b),d;e&&b.button==g&&f.tc[e]&&(d=f.tc[e],ad(b),!d.EndDrag()&&!d.touchState&&d.Clicked(b))}function ar(c){var e=u(c),b=e&&a.tc[e],d;b&&c.changedTouches&&(c.touches.length==1&&b.touchState==0?(b.touchState=1,b.BeginDrag(c),(d=K(c,b.canvas))&&(b.mx=d.x,b.my=d.y,b.drawn=0)):c.targetTouches.length==2&&b.pinchZoom?(b.touchState=3,b.EndDrag(),b.BeginPinch(c)):(b.EndDrag(),b.EndPinch(),b.touchState=0))}function ac(c){var d=u(c),b=d&&a.tc[d];if(b&&c.changedTouches){switch(b.touchState){case 1:b.Draw(),b.Clicked();break;break;case 2:b.EndDrag();break;case 3:b.EndPinch()}b.touchState=0}}function au(c){var f,e=a,b,d,g=u(c);for(f in e.tc)b=e.tc[f],b.tttimer&&(clearTimeout(b.tttimer),b.tttimer=null);if(b=g&&e.tc[g],b&&c.changedTouches&&b.touchState){switch(b.touchState){case 1:case 2:(d=K(c,b.canvas))&&(b.mx=d.x,b.my=d.y,b.Drag(c,d)&&(b.touchState=2));break;case 3:b.Pinch(c)}b.drawn=0}}function ab(b){var d=a,c=u(b);c&&d.tc[c]&&(b.cancelBubble=!0,b.returnValue=!1,b.preventDefault&&b.preventDefault(),d.tc[c].Wheel((b.wheelDelta||b.detail)>0))}function aw(d){var c,b=a;clearTimeout(b.scrollTimer);for(c in b.tc)b.tc[c].Pause();b.scrollTimer=setTimeout(function(){var b,c=a;for(b in c.tc)c.tc[b].Resume()},b.scrollPause)}function al(){Z(q())}function Z(b){var c=a.tc,d;a.NextFrame(a.interval),b=b||q();for(d in c)c[d].Draw(b)}function az(){requestAnimationFrame(Z)}function aA(a){setTimeout(al,a)}function X(f){var g=c.getElementById(f),b=g.getBoundingClientRect(),a=c.documentElement,d=c.body,e=window,h=e.pageXOffset||a.scrollLeft,i=e.pageYOffset||a.scrollTop,j=a.clientLeft||d.clientLeft,k=a.clientTop||d.clientTop;return{x:b.left+h-j,y:b.top+i-k}}function aI(a,b,d,e){var c=a.radius*a.z1/(a.z1+a.z2+b.z);return{x:b.x*c*d,y:b.y*c*e,z:b.z,w:(a.z1-b.z)/a.z2}}function V(a){this.e=a,this.br=0,this.line=[],this.text=[],this.original=a.innerText||a.textContent}F=V.prototype,F.Empty=function(){for(var a=0;a<this.text.length;++a)if(this.text[a].length)return!1;return!0},F.Lines=function(c){var e=c?1:0,b,d,a;c=c||this.e,b=c.childNodes,d=b.length;for(a=0;a<d;++a)b[a].nodeName=='BR'?(this.text.push(this.line.join(' ')),this.br=1):b[a].nodeType==3?this.br?(this.line=[b[a].nodeValue],this.br=0):this.line.push(b[a].nodeValue):this.Lines(b[a]);return e||this.br||this.text.push(this.line.join(' ')),this.text},F.SplitWidth=function(h,e,f,g){var c,b,a,d=[];e.font=g+'px '+f;for(c=0;c<this.text.length;++c){a=this.text[c].split(/\s+/),this.line=[a[0]];for(b=1;b<a.length;++b)e.measureText(this.line.join(' ')+' '+a[b]).width>h?(d.push(this.line.join(' ')),this.line=[a[b]]):this.line.push(a[b]);d.push(this.line.join(' '))}return this.text=d};function _(a,b){this.ts=null,this.tc=a,this.tag=b,this.x=this.y=this.w=this.h=this.sc=1,this.z=0,this.pulse=1,this.pulsate=a.pulsateTo<1,this.colour=a.outlineColour,this.adash=~~a.outlineDash,this.agap=~~a.outlineDashSpace||this.adash,this.aspeed=a.outlineDashSpeed*1,this.colour=='tag'?this.colour=i(b.a,'color'):this.colour=='tagbg'&&(this.colour=i(b.a,'background-color')),this.Draw=this.pulsate?this.DrawPulsate:this.DrawSimple,this.radius=a.outlineRadius|0,this.SetMethod(a.outlineMethod,a.altImage)}f=_.prototype,f.SetMethod=function(a,d){var b={block:['PreDraw','DrawBlock'],colour:['PreDraw','DrawColour'],outline:['PostDraw','DrawOutline'],classic:['LastDraw','DrawOutline'],size:['PreDraw','DrawSize'],none:['LastDraw']},c=b[a]||b.outline;a=='none'?this.Draw=function(){return 1}:this.drawFunc=this[c[1]],this[c[0]]=this.Draw,d&&(this.RealPreDraw=this.PreDraw,this.PreDraw=this.DrawAlt)},f.Update=function(d,e,i,j,a,f,g,h){var b=this.tc.outlineOffset,c=2*b;this.x=a*d+g-b,this.y=a*e+h-b,this.w=a*i+c,this.h=a*j+c,this.sc=a,this.z=f},f.Ants=function(k){if(!this.adash)return;var b=this.adash,c=this.agap,a=this.aspeed,j=b+c,h=0,g=b,f=c,i=0,d=0,e;a&&(d=p(a)*(q()-this.ts)/50,a<0&&(d=864e4-d),a=~~d%j),a?(b>=a?(h=b-a,g=a):(f=j-a,i=c-f),e=[h,f,g,i]):e=[b,c],k.setLineDash(e)},f.DrawOutline=function(a,d,e,b,c,f){var g=h(this.radius,c/2,b/2);a.strokeStyle=f,this.Ants(a),y(a,d,e,b,c,g,!0)},f.DrawSize=function(i,n,m,l,k,j,a,h,g){var f=a.w,e=a.h,c,b,d;return this.pulsate?(a.image?d=(a.image.height+this.tc.outlineIncrease)/a.image.height:d=a.oscale,b=a.fimage||a.image,c=1+(d-1)*(1-this.pulse),a.h*=c,a.w*=c):b=a.oimage,a.alpha=1,a.Draw(i,h,g,b),a.h=e,a.w=f,1},f.DrawColour=function(d,h,i,e,f,g,a,b,c){return a.oimage?(this.pulse<1?(a.alpha=1-w(this.pulse,2),a.Draw(d,b,c,a.fimage),a.alpha=this.pulse):a.alpha=1,a.Draw(d,b,c,a.oimage),1):this[a.image?'DrawColourImage':'DrawColourText'](d,h,i,e,f,g,a,b,c)},f.DrawColourText=function(f,h,i,j,g,e,a,b,c){var d=a.colour;return a.colour=e,a.alpha=1,a.Draw(f,b,c),a.colour=d,1},f.DrawColourImage=function(a,q,p,o,n,m,i,r,l){var f=a.canvas,e=~~g(q,0),d=~~g(p,0),c=h(f.width-e,o)+.5|0,b=h(f.height-d,n)+.5|0,j;return v?(v.width=c,v.height=b):v=k(c,b),!v?this.SetMethod('outline'):(j=v.getContext('2d'),j.drawImage(f,e,d,c,b,0,0,c,b),a.clearRect(e,d,c,b),this.pulsate?i.alpha=1-w(this.pulse,2):i.alpha=1,i.Draw(a,r,l),a.setTransform(1,0,0,1,0,0),a.save(),a.beginPath(),a.rect(e,d,c,b),a.clip(),a.globalCompositeOperation='source-in',a.fillStyle=m,a.fillRect(e,d,c,b),a.restore(),a.globalAlpha=1,a.globalCompositeOperation='destination-over',a.drawImage(v,0,0,c,b,e,d,c,b),a.globalCompositeOperation='source-over',1)},f.DrawAlt=function(b,a,c,d,f,g){var e=this.RealPreDraw(b,a,c,d,f,g);return a.alt&&(a.DrawImage(b,c,d,a.alt),e=1),e},f.DrawBlock=function(a,d,e,b,c,f){var g=h(this.radius,c/2,b/2);a.fillStyle=f,y(a,d,e,b,c,g)},f.DrawSimple=function(a,b,c,d,e,f){var g=this.tc;return a.setTransform(1,0,0,1,0,0),a.strokeStyle=this.colour,a.lineWidth=g.outlineThickness,a.shadowBlur=a.shadowOffsetX=a.shadowOffsetY=0,a.globalAlpha=f?e:1,this.drawFunc(a,this.x,this.y,this.w,this.h,this.colour,b,c,d)},f.DrawPulsate=function(h,d,e,f){var g=q()-this.ts,c=this.tc,b=c.pulsateTo+(1-c.pulsateTo)*(.5+l(2*Math.PI*g/(1e3*c.pulsateTime))/2);return this.pulse=b=a.Smooth(1,b),this.DrawSimple(h,d,e,f,b,1)},f.Active=function(d,a,b){var c=a>=this.x&&b>=this.y&&a<=this.x+this.w&&b<=this.y+this.h;return c?this.ts=this.ts||q():this.ts=null,c},f.PreDraw=f.PostDraw=f.LastDraw=x;function J(a,h,c,b,e,f,g,d,i,j,k,l,m,n){this.tc=a,this.image=null,this.text=h,this.text_original=n,this.line_widths=[],this.title=c.title||null,this.a=c,this.position=new s(b[0],b[1],b[2]),this.x=this.y=this.z=0,this.w=e,this.h=f,this.colour=g||a.textColour,this.bgColour=d||a.bgColour,this.bgRadius=i|0,this.bgOutline=j||this.colour,this.bgOutlineThickness=k|0,this.textFont=l||a.textFont,this.padding=m|0,this.sc=this.alpha=1,this.weighted=!a.weight,this.outline=new _(a,this),this.audio=null}d=J.prototype,d.Init=function(b){var a=this.tc;this.textHeight=a.textHeight,this.HasText()?this.Measure(a.ctxt,a):(this.w=this.iw,this.h=this.ih),this.SetShadowColour=a.shadowAlpha?this.SetShadowColourAlpha:this.SetShadowColourFixed,this.SetDraw(a)},d.Draw=x,d.HasText=function(){return this.text&&this.text[0].length>0},d.EqualTo=function(a){var b=a.getElementsByTagName('img');return this.a.href!=a.href?0:b.length?this.image.src==b[0].src:(a.innerText||a.textContent)==this.text_original},d.SetImage=function(a){this.image=this.fimage=a},d.SetAudio=function(a){this.audio=a,this.audio.load()},d.SetDraw=function(a){this.Draw=this.fimage?a.ie>7?this.DrawImageIE:this.DrawImage:this.DrawText,a.noSelect&&(this.CheckActive=x)},d.MeasureText=function(d){var a,e=this.text.length,b=0,c;for(a=0;a<e;++a)this.line_widths[a]=c=d.measureText(this.text[a]).width,b=g(b,c);return b},d.Measure=function(e,a){var f=ae(this.text,this.textFont,this.textHeight),b,k,h,i,g,l,j,c,d;j=f?f.max.y+f.min.y:this.textHeight,e.font=this.font=this.textHeight+'px '+this.textFont,l=this.MeasureText(e),a.txtOpt&&(b=a.txtScale,k=b*this.textHeight,h=k+'px '+this.textFont,i=[b*a.shadowOffset[0],b*a.shadowOffset[1]],e.font=h,g=this.MeasureText(e),d=new O(this.text,h,g+b,b*j+b,g,this.line_widths,a.textAlign,a.textVAlign,b),this.image&&d.SetImage(this.image,this.iw,this.ih,a.imagePosition,a.imagePadding,a.imageAlign,a.imageVAlign,a.imageScale),c=d.Create(this.colour,this.bgColour,this.bgOutline,b*this.bgOutlineThickness,a.shadow,b*a.shadowBlur,i,b*this.padding,b*this.bgRadius),a.outlineMethod=='colour'?this.oimage=d.Create(this.outline.colour,this.bgColour,this.outline.colour,b*this.bgOutlineThickness,a.shadow,b*a.shadowBlur,i,b*this.padding,b*this.bgRadius):a.outlineMethod=='size'&&(f=ae(this.text,this.textFont,this.textHeight+a.outlineIncrease),k=f.max.y+f.min.y,h=b*(this.textHeight+a.outlineIncrease)+'px '+this.textFont,e.font=h,g=this.MeasureText(e),d=new O(this.text,h,g+b,b*k+b,g,this.line_widths,a.textAlign,a.textVAlign,b),this.image&&d.SetImage(this.image,this.iw+a.outlineIncrease,this.ih+a.outlineIncrease,a.imagePosition,a.imagePadding,a.imageAlign,a.imageVAlign,a.imageScale),this.oimage=d.Create(this.colour,this.bgColour,this.bgOutline,b*this.bgOutlineThickness,a.shadow,b*a.shadowBlur,i,b*this.padding,b*this.bgRadius),this.oscale=this.oimage.width/c.width,a.outlineIncrease>0?c=H(c,this.oimage.width,this.oimage.height):this.oimage=H(this.oimage,c.width,c.height)),c&&(this.fimage=c,l=this.fimage.width/b,j=this.fimage.height/b),this.SetDraw(a),a.txtOpt=!!this.fimage),this.h=j,this.w=l},d.SetFont=function(a,b,c,d){this.textFont=a,this.colour=b,this.bgColour=c,this.bgOutline=d,this.Measure(this.tc.ctxt,this.tc)},d.SetWeight=function(c){var b=this.tc,e=b.weightMode.split(/[, ]/),d,a,f=c.length;if(!this.HasText())return;this.weighted=!0;for(a=0;a<f;++a)d=e[a]||'size','both'==d?(this.Weight(c[a],b.ctxt,b,'size',b.min_weight[a],b.max_weight[a],a),this.Weight(c[a],b.ctxt,b,'colour',b.min_weight[a],b.max_weight[a],a)):this.Weight(c[a],b.ctxt,b,d,b.min_weight[a],b.max_weight[a],a);this.Measure(b.ctxt,b)},d.Weight=function(b,i,a,d,f,h,e){b=isNaN(b)?1:b;var c=(b-f)/(h-f);'colour'==d?this.colour=L(a,c,e):'bgcolour'==d?this.bgColour=L(a,c,e):'bgoutline'==d?this.bgOutline=L(a,c,e):'outline'==d?this.outline.colour=L(a,c,e):'size'==d&&(a.weightSizeMin>0&&a.weightSizeMax>a.weightSizeMin?this.textHeight=a.weightSize*(a.weightSizeMin+(a.weightSizeMax-a.weightSizeMin)*c):this.textHeight=g(1,b*a.weightSize))},d.SetShadowColourFixed=function(a,b,c){a.shadowColor=b},d.SetShadowColourAlpha=function(a,b,c){a.shadowColor=aE(b,c)},d.DrawText=function(a,h,i){var e=this.tc,g=this.x,f=this.y,c=this.sc,b,d;a.globalAlpha=this.alpha,a.fillStyle=this.colour,e.shadow&&this.SetShadowColour(a,e.shadow,this.alpha),a.font=this.font,g+=h/c,f+=i/c-this.h/2;for(b=0;b<this.text.length;++b)d=g,'right'==e.textAlign?d+=this.w/2-this.line_widths[b]:'centre'==e.textAlign?d-=this.line_widths[b]/2:d-=this.w/2,a.setTransform(c,0,0,c,c*d,c*f),a.fillText(this.text[b],0,0),f+=this.textHeight},d.DrawImage=function(b,i,k,l){var e=this.x,f=this.y,a=this.sc,j=l||this.fimage,c=this.w,d=this.h,g=this.alpha,h=this.shadow;b.globalAlpha=g,h&&this.SetShadowColour(b,h,g),e+=i/a-c/2,f+=k/a-d/2,b.setTransform(a,0,0,a,a*e,a*f),b.drawImage(j,0,0,c,d)},d.DrawImageIE=function(b,d,e){var c=this.fimage,a=this.sc,f=c.width=this.w*a,g=c.height=this.h*a,h=this.x*a+d-f/2,i=this.y*a+e-g/2;b.setTransform(1,0,0,1,0,0),b.globalAlpha=this.alpha,b.drawImage(c,h,i)},d.Calc=function(g,e){var a,b=this.tc,d=b.minBrightness,f=b.maxBrightness,c=b.max_radius;return a=g.xform(this.position),this.xformed=a,a=aI(b,a,b.stretchX,b.stretchY),this.x=a.x,this.y=a.y,this.z=a.z,this.sc=a.w,this.alpha=e*G(d+(f-d)*(c-this.z)/(2*c),0,1),this.xformed},d.UpdateActive=function(h,e,f){var a=this.outline,b=this.w,c=this.h,d=this.x-b/2,g=this.y-c/2;return a.Update(d,g,b,c,this.sc,this.z,e,f),a},d.CheckActive=function(a,d,e){var b=this.tc,c=this.UpdateActive(a,d,e);return c.Active(a,b.mx,b.my)?c:null},d.Clicked=function(f){var b=this.a,a=b.target,d=b.href,e;if(a!=''&&a!='_self'){if(self.frames[a])self.frames[a].document.location=d;else{try{if(top.frames[a]){top.frames[a].document.location=d;return}}catch(a){}window.open(d,a)}return}if(c.createEvent){if(e=c.createEvent('MouseEvents'),e.initMouseEvent('click',1,1,window,0,0,0,0,0,0,0,0,0,0,null),!b.dispatchEvent(e))return}else if(b.fireEvent)if(!b.fireEvent('onclick'))return;c.location=d},d.StopAudio=function(){this.audio&&this.playing&&this.audio.pause(),this.stopped=1,this.playing=0},d.PlayAudio=function(){if(e==='off'||this.tc.audioOff)return;if(!e&&!ag())return;var a=this.tc.audio,c=this.tc.gain,d='suspended',b;if(this.audio)if(this.track||(this.track=e.createMediaElementSource(this.audio),this.gain=e.createGain(),this.track.connect(this.gain),this.gain.connect(e.destination)),a=this.audio,c=this.gain,!a.paused)return 1;if(a){if(e.state==d&&e.resume(),e.state==d)return;return c.gain.value=h(2,g(0,this.tc.audioVolume*1)),a.currentTime=0,this.stopped=0,b=a.play(),b!==void 0&&b.then(a=>{this.stopped?this.audio.pause():this.playing=1}),1}};function a(f,o,k){var d,i,b=c.getElementById(f),l=['id','class','innerHTML'];if(!b)throw 0;if(n(window.G_vmlCanvasManager)&&(b=window.G_vmlCanvasManager.initElement(b),this.ie=parseFloat(navigator.appVersion.split('MSIE')[1])),b&&(!b.getContext||!b.getContext('2d').fillText)){i=c.createElement('DIV');for(d=0;d<l.length;++d)i[l[d]]=b[l[d]];throw b.parentNode.insertBefore(i,b),b.parentNode.removeChild(b),0}for(d in a.options)this[d]=k&&n(k[d])?k[d]:n(a[d])?a[d]:a.options[d];if(this.canvas=b,this.ctxt=b.getContext('2d'),this.z1=250/g(this.depth,.001),this.z2=this.z1/this.zoom,this.radius=h(b.height,b.width)*.0075,this.max_radius=100,this.max_weight=[],this.min_weight=[],this.textFont=this.textFont&&Q(this.textFont),this.textHeight*=1,this.imageRadius=this.imageRadius.toString(),this.pulsateTo=G(this.pulsateTo,0,1),this.minBrightness=G(this.minBrightness,0,1),this.maxBrightness=G(this.maxBrightness,this.minBrightness,1),this.ctxt.textBaseline='top',this.lx=(this.lock+'').indexOf('x')+1,this.ly=(this.lock+'').indexOf('y')+1,this.frozen=this.dx=this.dy=this.fixedAnim=this.touchState=0,this.fixedAlpha=1,this.source=o||f,this.repeatTags=h(64,~~this.repeatTags),this.minTags=h(200,~~this.minTags),~~this.scrollPause>0?a.scrollPause=~~this.scrollPause:this.scrollPause=0,this.minTags>0&&this.repeatTags<1&&(d=this.GetTags().length)&&(this.repeatTags=af(this.minTags/d)-1),this.transform=m.Identity(),this.startTime=this.time=q(),this.mx=this.my=-1,this.centreImage&&av(this),this.Animate=this.dragControl?this.AnimateDrag:this.AnimatePosition,this.animTiming=typeof a[this.animTiming]=='function'?a[this.animTiming]:a.Smooth,this.shadowBlur||this.shadowOffset[0]||this.shadowOffset[1]?(this.ctxt.shadowColor=this.shadow,this.shadow=this.ctxt.shadowColor,this.shadowAlpha=aD()):delete this.shadow,this.activeAudio===!1?e='off':this.activeAudio&&this.LoadAudio(),this.Load(),o&&this.hideTags&&function(b){a.loaded?b.HideTags():t('load',function(){b.HideTags()},window)}(this),this.yaw=this.initial?this.initial[0]*this.maxSpeed:0,this.pitch=this.initial?this.initial[1]*this.maxSpeed:0,this.tooltip?(this.ctitle=b.title,b.title='',this.tooltip=='native'?this.Tooltip=this.TooltipNative:(this.Tooltip=this.TooltipDiv,this.ttdiv||(this.ttdiv=c.createElement('div'),this.ttdiv.className=this.tooltipClass,this.ttdiv.style.position='absolute',this.ttdiv.style.zIndex=b.style.zIndex+1,t('mouseover',function(a){a.target.style.display='none'},this.ttdiv),c.body.appendChild(this.ttdiv)))):this.Tooltip=this.TooltipNone,!this.noMouse&&!j[f]){j[f]=[['mousemove',ad],['mouseout',an],['mouseup',aq],['touchstart',ar],['touchend',ac],['touchcancel',ac],['touchmove',au]],this.dragControl&&(j[f].push(['mousedown',ap]),j[f].push(['selectstart',x])),this.wheelZoom&&(j[f].push(['mousewheel',ab]),j[f].push(['DOMMouseScroll',ab])),this.scrollPause&&j[f].push(['scroll',aw,window]);for(d=0;d<j[f].length;++d)i=j[f][d],t(i[0],i[1],i[2]?i[2]:b)}a.started||(a.NextFrame=window.requestAnimationFrame?az:aA,a.interval=this.interval,a.NextFrame(this.interval),a.started=1)}b=a.prototype,b.SourceElements=function(){return c.querySelectorAll?c.querySelectorAll('#'+this.source):[c.getElementById(this.source)]},b.HideTags=function(){var b=this.SourceElements(),a;for(a=0;a<b.length;++a)b[a].style.display='none'},b.GetTags=function(){var e=this.SourceElements(),c,f=[],a,b,d;for(d=0;d<=this.repeatTags;++d)for(a=0;a<e.length;++a){c=e[a].getElementsByTagName('a');for(b=0;b<c.length;++b)f.push(c[b])}return f},b.Message=function(j){var g=[],a,f,b=j.split(''),d,e,h,i;for(a=0;a<b.length;++a)b[a]!=' '&&(f=a-b.length/2,d=c.createElement('A'),d.href='#',d.innerText=b[a],h=100*o(f/9),i=-100*l(f/9),e=new J(this,b[a],d,[h,0,i],2,18,'#000','#fff',0,0,0,'monospace',2,b[a]),e.Init(),g.push(e));return g},b.AddAudio=function(b,c){if(e==='off')return;var a=b.getElementsByTagName('audio');a.length&&(c.SetAudio(a[0]),this.hasAudio=1)},b.CreateTag=function(b){var e,c,a,f,d,g,h,j,k=[0,0,0],l;if('text'!=this.imageMode)if(e=b.getElementsByTagName('img'),e.length)if(c=new Image,c.src=e[0].src,!this.imageMode)return a=new J(this,"",b,k,0,0),a.SetImage(c),A(c,e[0],e[1],a,this),this.AddAudio(b,a),a;if('image'!=this.imageMode&&(d=new V(b),f=d.Lines(),d.Empty()?d=null:(g=this.textFont||Q(i(b,'font-family')),this.splitWidth&&(f=d.SplitWidth(this.splitWidth,this.ctxt,g,this.textHeight)),h=this.bgColour=='tag'?i(b,'background-color'):this.bgColour,j=this.bgOutline=='tag'?i(b,'color'):this.bgOutline)),d||c)return a=new J(this,f,b,k,2,this.textHeight+2,this.textColour||i(b,'color'),h,this.bgRadius,j,this.bgOutlineThickness,g,this.padding,d&&d.original),c?(a.SetImage(c),A(c,e[0],e[1],a,this)):a.Init(),this.AddAudio(b,a),a},b.UpdateTag=function(a,b){var c=this.textColour||i(b,'color'),d=this.textFont||Q(i(b,'font-family')),e=this.bgColour=='tag'?i(b,'background-color'):this.bgColour,f=this.bgOutline=='tag'?i(b,'color'):this.bgOutline;a.a=b,a.title=b.title,(a.colour!=c||a.textFont!=d||a.bgColour!=e||a.bgOutline!=f)&&a.SetFont(d,c,e,f)},b.Weight=function(d){var f=d.length,c,b,a,e=[],g,h=this.weightFrom?this.weightFrom.split(/[, ]/):[null],i=h.length;for(b=0;b<f;++b){e[b]=[];for(a=0;a<i;++a)c=aj(d[b].a,h[a],this.textHeight),(!this.max_weight[a]||c>this.max_weight[a])&&(this.max_weight[a]=c),(!this.min_weight[a]||c<this.min_weight[a])&&(this.min_weight[a]=c),e[b][a]=c}for(a=0;a<i;++a)this.max_weight[a]>this.min_weight[a]&&(g=1);if(g)for(b=0;b<f;++b)d[b].SetWeight(e[b])},b.Load=function(){var c=this.GetTags(),b=[],d,k,l,h,i,j,f,a,e=[],m={sphere:aB,vcylinder:ax,hcylinder:aH,vring:aG,hring:aF};if(c.length){e.length=c.length;for(a=0;a<c.length;++a)e[a]=a;this.shuffleTags&&ai(e),h=100*this.radiusX,i=100*this.radiusY,j=100*this.radiusZ,this.max_radius=g(h,g(i,j));for(a=0;a<c.length;++a)k=this.CreateTag(c[e[a]]),k&&b.push(k);this.weight&&this.Weight(b,!0),this.shapeArgs?this.shapeArgs[0]=b.length:(l=this.shape.toString().split(/[(),]/),d=l.shift(),typeof window[d]=='function'?this.shape=window[d]:this.shape=m[d]||m.sphere,this.shapeArgs=[b.length,h,i,j].concat(l)),f=this.shape.apply(this,this.shapeArgs),this.listLength=b.length;for(a=0;a<b.length;++a)b[a].position=new s(f[a][0],f[a][1],f[a][2])}this.noTagsMessage&&!b.length&&(a=this.imageMode&&this.imageMode!='both'?this.imageMode+' ':'',b=this.Message('No '+a+'tags')),this.taglist=b},b.Update=function(){var e=this.GetTags(),d=[],j=this.taglist,k,f=[],c=[],h,i,g,a,b;if(!this.shapeArgs)return this.Load();if(e.length){g=this.listLength=e.length,i=j.length;for(a=0;a<i;++a)d.push(j[a]),c.push(a);for(a=0;a<g;++a){for(b=0,k=0;b<i;++b)j[b].EqualTo(e[a])&&(this.UpdateTag(d[b],e[a]),k=c[b]=-1);k||f.push(a)}for(a=0,b=0;a<i;++a)c[b]==-1?c.splice(b,1):++b;if(c.length){for(ai(c);c.length&&f.length;)a=c.shift(),b=f.shift(),d[a]=this.CreateTag(e[b]);for(c.sort(function(a,b){return a-b});c.length;)d.splice(c.pop(),1)}for(b=d.length/(f.length+1),a=0;f.length;)d.splice(af(++a*b),0,this.CreateTag(e[f.shift()]));this.shapeArgs[0]=g=d.length,h=this.shape.apply(this,this.shapeArgs);for(a=0;a<g;++a)d[a].position=new s(h[a][0],h[a][1],h[a][2]);this.weight&&this.Weight(d)}this.taglist=d},b.SetShadow=function(a){a.shadowBlur=this.shadowBlur,a.shadowOffsetX=this.shadowOffset[0],a.shadowOffsetY=this.shadowOffset[1]},b.LoadAudio=function(){if(!e&&!ag())return;this.audio=c.createElement('audio'),this.audio.src=this.activeAudio,this.track=e.createMediaElementSource(this.audio),this.gain=e.createGain(),this.track.connect(this.gain),this.gain.connect(e.destination),this.hasAudio=1,P=function(a){e.resume(),c.removeEventListener('click',P)},c.addEventListener('click',P)},b.ShowAudioIcon=function(){var a=this.audioIconSize,c=this.canvas,d=this.ctxt,k=c.width-a-3,f=c.height-a-3,g=this.audioIconThickness,h='#000',i='#fff',j=this.audioIconDark,b=this.audioOff,l='suspended';if(!e)return;b||(b=e.state===l),this.audioIcon&&this.hasAudio&&($(b,d,a,k,f,g+1,j?i:h),$(b,d,a,k,f,g,j?h:i))},b.CheckAudioIcon=function(){var a=this.audioIconSize,b=this.canvas,c=this.audioIconThickness/2,d=b.width-a-3-c,e=b.height-a-3-c;if(this.audioIcon&&this.mx>=d&&this.my>=e)return!0},b.ToggleAudio=function(){var a=this.audioOff||e&&e.state==='suspended';a||this.currentAudio&&this.currentAudio.StopAudio(),this.audioOff=!a},b.Draw=function(s){if(this.paused)return;var l=this.canvas,i=l.width,j=l.height,q=0,p=(s-this.time)*a.interval/1e3,h=i/2+this.offsetX,g=j/2+this.offsetY,d=this.ctxt,b,f,c,o=-1,e=this.taglist,k=e.length,t=this.active&&this.active.tag,m='',u=this.frontSelect,r=this.centreFunc==x,n;if(this.time=s,this.frozen&&this.drawn)return this.Animate(i,j,p);n=this.AnimateFixed(),d.setTransform(1,0,0,1,0,0);for(c=0;c<k;++c)e[c].Calc(this.transform,this.fixedAlpha);if(e=ak(e,function(a,b){return b.z-a.z}),n&&this.fixedAnim.active)b=this.fixedAnim.tag.UpdateActive(d,h,g);else if(this.active=null,this.CheckAudioIcon())m='pointer';else{for(c=0;c<k;++c)f=this.mx>=0&&this.my>=0&&this.taglist[c].CheckActive(d,h,g),f&&f.sc>q&&(!u||f.z<=0)&&(b=f,o=c,b.tag=this.taglist[c],q=f.sc);this.active=b}this.txtOpt||this.shadow&&this.SetShadow(d),d.clearRect(0,0,i,j);for(c=0;c<k;++c){if(!r&&e[c].z<=0){try{this.centreFunc(d,i,j,h,g)}catch(a){alert(a),this.centreFunc=x}r=!0}b&&b.tag==e[c]&&b.PreDraw(d,e[c],h,g)||e[c].Draw(d,h,g),b&&b.tag==e[c]&&b.PostDraw(d)}this.freezeActive&&b?this.Freeze():(this.UnFreeze(),this.drawn=k==this.listLength),this.fixedCallback&&(this.fixedCallback(this,this.fixedCallbackTag),this.fixedCallback=null),n||this.Animate(i,j,p),b&&(b.LastDraw(d),b.tag!=t&&(this.currentAudio&&this.currentAudio!=b.tag&&this.currentAudio.StopAudio(),b.tag.PlayAudio()&&(this.currentAudio=b.tag)),m=this.activeCursor),l.style.cursor=m,this.Tooltip(b,this.taglist[o]),this.audioIcon&&this.ShowAudioIcon()},b.TooltipNone=function(){},b.TooltipNative=function(b,a){b?this.canvas.title=a&&a.title?a.title:'':this.canvas.title=this.ctitle},b.SetTTDiv=function(c,d){var a=this,b=a.ttdiv.style;c!=a.ttdiv.innerHTML&&(b.display='none'),a.ttdiv.innerHTML=c,d&&(d.title=a.ttdiv.innerHTML),b.display=='none'&&!a.tttimer&&(a.tttimer=setTimeout(function(){var c=X(a.canvas.id);b.display='block',b.left=c.x+a.mx+'px',b.top=c.y+a.my+24+'px',a.tttimer=null},a.tooltipDelay))},b.TooltipDiv=function(b,a){b&&a&&a.title?this.SetTTDiv(a.title,a):!b&&this.mx!=-1&&this.my!=-1&&this.ctitle.length?this.SetTTDiv(this.ctitle):this.ttdiv.style.display='none'},b.Transform=function(c,a,b){if(a||b){var d=o(a),e=l(a),f=o(b),g=l(b),h=new m([g,0,f,0,1,0,-f,0,g]),i=new m([1,0,0,0,e,-d,0,d,e]);c.transform=c.transform.mul(h.mul(i))}},b.AnimateFixed=function(){var a,b,c,d,e;return!!(this.fadeIn&&(b=q()-this.startTime,b>=this.fadeIn?(this.fadeIn=0,this.fixedAlpha=1):this.fixedAlpha=b/this.fadeIn),this.fixedAnim)&&(this.fixedAnim.transform||(this.fixedAnim.transform=this.transform),a=this.fixedAnim,b=q()-a.t0,c=a.angle,d,e=this.animTiming(a.t,b),this.transform=a.transform,b>=a.t?(this.fixedCallbackTag=a.tag,this.fixedCallback=a.cb,this.fixedAnim=this.yaw=this.pitch=0):c*=e,d=m.Rotation(c,a.axis),this.transform=this.transform.mul(d),this.fixedAnim!=0)},b.AnimatePosition=function(g,h,f){var a=this,d=a.mx,e=a.my,b,c;!a.frozen&&d>=0&&e>=0&&d<g&&e<h?(b=a.maxSpeed,c=a.reverse?-1:1,a.lx||(a.yaw=(d*2*b/g-b)*c*f),a.ly||(a.pitch=(e*2*b/h-b)*-c*f),a.initial=null):a.initial||(a.frozen&&!a.freezeDecel?a.yaw=a.pitch=0:a.Decel(a)),this.Transform(a,a.pitch,a.yaw)},b.AnimateDrag=function(d,e,c){var a=this,b=100*c*a.maxSpeed/a.max_radius/a.zoom;a.dx||a.dy?(a.lx||(a.yaw=a.dx*b/a.stretchX),a.ly||(a.pitch=a.dy*-b/a.stretchY),a.dx=a.dy=0,a.initial=null):a.initial||a.Decel(a),this.Transform(a,a.pitch,a.yaw)},b.Freeze=function(){this.frozen||(this.preFreeze=[this.yaw,this.pitch],this.frozen=1,this.drawn=0)},b.UnFreeze=function(){this.frozen&&(this.yaw=this.preFreeze[0],this.pitch=this.preFreeze[1],this.frozen=0)},b.Decel=function(a){var b=a.minSpeed,c=p(a.yaw),d=p(a.pitch);!a.lx&&c>b&&(a.yaw=c>a.z0?a.yaw*a.decel:0),!a.ly&&d>b&&(a.pitch=d>a.z0?a.pitch*a.decel:0)},b.Zoom=function(a){this.z2=this.z1*(1/a),this.drawn=0},b.Clicked=function(b){if(this.CheckAudioIcon()){this.ToggleAudio();return}var a=this.active;try{a&&a.tag&&(this.clickToFront===!1||this.clickToFront===null?a.tag.Clicked(b):this.TagToFront(a.tag,this.clickToFront,function(){a.tag.Clicked(b)},!0))}catch(a){}},b.Wheel=function(a){var b=this.zoom+this.zoomStep*(a?1:-1);this.zoom=h(this.zoomMax,g(this.zoomMin,b)),this.Zoom(this.zoom)},b.BeginDrag=function(a){this.down=K(a,this.canvas),a.cancelBubble=!0,a.returnValue=!1,a.preventDefault&&a.preventDefault()},b.Drag=function(e,a){if(this.dragControl&&this.down){var d=this.dragThreshold*this.dragThreshold,b=a.x-this.down.x,c=a.y-this.down.y;(this.dragging||b*b+c*c>d)&&(this.dx=b,this.dy=c,this.dragging=1,this.down=a)}return this.dragging},b.EndDrag=function(){var a=this.dragging;return this.dragging=this.down=null,a};function ah(a){var b=a.targetTouches[0],c=a.targetTouches[1];return E(w(c.pageX-b.pageX,2)+w(c.pageY-b.pageY,2))}b.BeginPinch=function(a){this.pinched=[ah(a),this.zoom],a.preventDefault&&a.preventDefault()},b.Pinch=function(d){var b,c,a=this.pinched;if(!a)return;c=ah(d),b=a[1]*c/a[0],this.zoom=h(this.zoomMax,g(this.zoomMin,b)),this.Zoom(this.zoom)},b.EndPinch=function(a){this.pinched=null},b.Pause=function(){this.paused=!0},b.Resume=function(){this.paused=!1},b.SetSpeed=function(a){this.initial=a,this.yaw=a[0]*this.maxSpeed,this.pitch=a[1]*this.maxSpeed},b.FindTag=function(a){if(!n(a))return null;if(n(a.index)&&(a=a.index),!B(a))return this.taglist[a];var c,d,b;n(a.id)?(c='id',d=a.id):n(a.text)&&(c='innerText',d=a.text);for(b=0;b<this.taglist.length;++b)if(this.taglist[b].a[c]==d)return this.taglist[b]},b.RotateTag=function(a,h,i,j,f,g){var b=a.Calc(this.transform,1),c=new s(b.x,b.y,b.z),d=ay(i,h),e=c.angle(d),k=c.cross(d).unit();e==0?(this.fixedCallbackTag=a,this.fixedCallback=f):this.fixedAnim={angle:-e,axis:k,t:j,t0:q(),cb:f,tag:a,active:g}},b.TagToFront=function(a,b,c,d){this.RotateTag(a,0,0,b,c,d)},b.Volume=function(a){this.audioVolume=a*1},a.Start=function(b,c,d){a.Delete(b),a.tc[b]=new a(b,c,d)};function N(c,b){a.tc[b]&&a.tc[b][c]()}a.Linear=function(a,b){return b/a},a.Smooth=function(a,b){return.5-l(b*Math.PI/a)/2},a.Pause=function(a){N('Pause',a)},a.Resume=function(a){N('Resume',a)},a.Reload=function(a){N('Load',a)},a.Update=function(a){N('Update',a)},a.SetSpeed=function(c,b){return!!(B(b)&&a.tc[c]&&!isNaN(b[0])&&!isNaN(b[1]))&&(a.tc[c].SetSpeed(b),!0)},a.TagToFront=function(c,b){return!!B(b)&&(b.lat=b.lng=0,a.RotateTag(c,b))},a.RotateTag=function(c,b){if(B(b)&&a.tc[c]){isNaN(b.time)&&(b.time=500);var d=a.tc[c].FindTag(b);if(d)return a.tc[c].RotateTag(d,b.lat,b.lng,b.time,b.callback,b.active),!0}return!1},a.Delete=function(b){var d,e;if(j[b])if(e=c.getElementById(b),e)for(d=0;d<j[b].length;++d)am(j[b][d][0],j[b][d][1],e);delete j[b],delete a.tc[b]},a.tc={},a.options={z1:2e4,z2:2e4,z0:2e-4,freezeActive:!1,freezeDecel:!1,activeCursor:'pointer',pulsateTo:1,pulsateTime:3,reverse:!1,depth:.5,maxSpeed:.05,minSpeed:0,decel:.95,interval:20,minBrightness:.1,maxBrightness:1,outlineColour:'#ffff99',outlineThickness:2,outlineOffset:5,outlineMethod:'outline',outlineRadius:0,textColour:'#ff99ff',textHeight:15,textFont:'Helvetica, Arial, sans-serif',shadow:'#000',shadowBlur:0,shadowOffset:[0,0],initial:null,hideTags:!0,zoom:1,weight:!1,weightMode:'size',weightFrom:null,weightSize:1,weightSizeMin:null,weightSizeMax:null,weightGradient:{0:'#f00',0.33:'#ff0',0.66:'#0f0',1:'#00f'},txtOpt:!0,txtScale:2,frontSelect:!1,wheelZoom:!0,zoomMin:.3,zoomMax:3,zoomStep:.05,shape:'sphere',lock:null,tooltip:null,tooltipDelay:300,tooltipClass:'tctooltip',radiusX:1,radiusY:1,radiusZ:1,stretchX:1,stretchY:1,offsetX:0,offsetY:0,shuffleTags:!1,noSelect:!1,noMouse:!1,imageScale:1,paused:!1,dragControl:!1,dragThreshold:4,centreFunc:x,splitWidth:0,animTiming:'Smooth',clickToFront:!1,fadeIn:0,padding:0,bgColour:null,bgRadius:0,bgOutline:null,bgOutlineThickness:0,outlineIncrease:4,textAlign:'centre',textVAlign:'middle',imageMode:null,imagePosition:null,imagePadding:2,imageAlign:'centre',imageVAlign:'middle',noTagsMessage:!0,centreImage:null,pinchZoom:!1,repeatTags:0,minTags:0,imageRadius:0,scrollPause:!1,outlineDash:0,outlineDashSpace:0,outlineDashSpeed:1,activeAudio:'',audioVolume:1,audioIcon:1,audioIconSize:20,audioIconThickness:2,audioIconDark:0,altImage:0};for(r in a.options)a[r]=a.options[r];window.TagCanvas=a,t('load',function(){a.loaded=1},window)})()
diff --git a/packages/client/assets/unread.svg b/packages/client/assets/unread.svg
deleted file mode 100644
index 8c3cc9f475..0000000000
--- a/packages/client/assets/unread.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-	 y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
-<circle fill="#3AA2DC" cx="16.5" cy="16.5" r="6"/>
-</svg>
diff --git a/packages/client/package.json b/packages/client/package.json
deleted file mode 100644
index 0af8ffac0b..0000000000
--- a/packages/client/package.json
+++ /dev/null
@@ -1,94 +0,0 @@
-{
-	"name": "client",
-	"private": true,
-	"scripts": {
-		"watch": "vite",
-		"build": "vite build",
-		"lint": "vue-tsc --noEmit && eslint --quiet \"src/**/*.{ts,vue}\""
-	},
-	"dependencies": {
-		"@discordapp/twemoji": "14.0.2",
-		"@rollup/plugin-alias": "4.0.2",
-		"@rollup/plugin-json": "6.0.0",
-		"@rollup/pluginutils": "5.0.2",
-		"@syuilo/aiscript": "0.11.1",
-		"@tabler/icons": "^1.118.0",
-		"@vitejs/plugin-vue": "4.0.0",
-		"@vue/compiler-sfc": "3.2.45",
-		"autobind-decorator": "2.4.0",
-		"autosize": "5.0.2",
-		"blurhash": "2.0.4",
-		"broadcast-channel": "4.18.1",
-		"browser-image-resizer": "git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey.3",
-		"chart.js": "4.1.1",
-		"chartjs-adapter-date-fns": "3.0.0",
-		"chartjs-chart-matrix": "^1.3.0",
-		"chartjs-plugin-gradient": "0.6.1",
-		"chartjs-plugin-zoom": "2.0.0",
-		"compare-versions": "5.0.1",
-		"cropperjs": "2.0.0-beta",
-		"date-fns": "2.29.3",
-		"escape-regexp": "0.0.1",
-		"eventemitter3": "5.0.0",
-		"idb-keyval": "6.2.0",
-		"insert-text-at-cursor": "0.3.0",
-		"is-file-animated": "1.0.2",
-		"json5": "2.2.2",
-		"katex": "0.15.6",
-		"matter-js": "0.18.0",
-		"mfm-js": "0.23.0",
-		"misskey-js": "0.0.14",
-		"photoswipe": "5.3.4",
-		"prismjs": "1.29.0",
-		"punycode": "2.1.1",
-		"querystring": "0.2.1",
-		"rndstr": "1.0.0",
-		"rollup": "3.8.0",
-		"s-age": "1.1.2",
-		"sass": "1.57.1",
-		"seedrandom": "3.0.5",
-		"strict-event-emitter-types": "2.0.0",
-		"stringz": "2.1.0",
-		"syuilo-password-strength": "0.0.1",
-		"textarea-caret": "3.1.0",
-		"three": "0.148.0",
-		"throttle-debounce": "5.0.0",
-		"tinycolor2": "1.4.2",
-		"tsc-alias": "1.8.2",
-		"tsconfig-paths": "4.1.1",
-		"twemoji-parser": "14.0.0",
-		"typescript": "4.9.4",
-		"uuid": "9.0.0",
-		"vanilla-tilt": "1.8.0",
-		"vite": "4.0.3",
-		"vue": "3.2.45",
-		"vue-prism-editor": "2.0.0-alpha.2",
-		"vuedraggable": "next"
-	},
-	"devDependencies": {
-		"@types/escape-regexp": "0.0.1",
-		"@types/glob": "8.0.0",
-		"@types/gulp": "4.0.10",
-		"@types/gulp-rename": "2.0.1",
-		"@types/katex": "0.14.0",
-		"@types/matter-js": "0.18.2",
-		"@types/punycode": "2.1.0",
-		"@types/seedrandom": "3.0.3",
-		"@types/throttle-debounce": "5.0.0",
-		"@types/tinycolor2": "1.4.3",
-		"@types/uuid": "9.0.0",
-		"@types/websocket": "1.0.5",
-		"@types/ws": "8.5.3",
-		"@typescript-eslint/eslint-plugin": "5.47.0",
-		"@typescript-eslint/parser": "5.47.0",
-		"@vue/runtime-core": "3.2.45",
-		"cross-env": "7.0.3",
-		"cypress": "12.2.0",
-		"eslint": "8.30.0",
-		"eslint-plugin-import": "2.26.0",
-		"eslint-plugin-vue": "9.8.0",
-		"start-server-and-test": "1.15.2",
-		"vue-eslint-parser": "^9.1.0",
-		"vue-tsc": "^1.0.16"
-	}
-}
diff --git a/packages/client/src/account.ts b/packages/client/src/account.ts
deleted file mode 100644
index 0e991cdfb5..0000000000
--- a/packages/client/src/account.ts
+++ /dev/null
@@ -1,238 +0,0 @@
-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';
-
-// TODO: 他のタブと永続化されたstateを同期
-
-type Account = misskey.entities.MeDetailed;
-
-const accountData = localStorage.getItem('account');
-
-// TODO: 外部からはreadonlyに
-export const $i = accountData ? reactive(JSON.parse(accountData) as Account) : null;
-
-export const iAmModerator = $i != null && ($i.isAdmin || $i.isModerator);
-export const iAmAdmin = $i != null && $i.isAdmin;
-
-export async function signout() {
-	waiting();
-	localStorage.removeItem('account');
-
-	await removeAccount($i.id);
-
-	const accounts = await getAccounts();
-
-	//#region Remove service worker registration
-	try {
-		if (navigator.serviceWorker.controller) {
-			const registration = await navigator.serviceWorker.ready;
-			const push = await registration.pushManager.getSubscription();
-			if (push) {
-				await window.fetch(`${apiUrl}/sw/unregister`, {
-					method: 'POST',
-					body: JSON.stringify({
-						i: $i.token,
-						endpoint: push.endpoint,
-					}),
-					headers: {
-						'Content-Type': 'application/json',
-					},
-				});
-			}
-		}
-
-		if (accounts.length === 0) {
-			await navigator.serviceWorker.getRegistrations()
-				.then(registrations => {
-					return Promise.all(registrations.map(registration => registration.unregister()));
-				});
-		}
-	} catch (err) {}
-	//#endregion
-
-	document.cookie = 'igi=; path=/';
-
-	if (accounts.length > 0) login(accounts[0].token);
-	else unisonReload('/');
-}
-
-export async function getAccounts(): Promise<{ id: Account['id'], token: Account['token'] }[]> {
-	return (await get('accounts')) || [];
-}
-
-export async function addAccount(id: Account['id'], token: Account['token']) {
-	const accounts = await getAccounts();
-	if (!accounts.some(x => x.id === id)) {
-		await set('accounts', accounts.concat([{ id, 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
-		window.fetch(`${apiUrl}/i`, {
-			method: 'POST',
-			body: JSON.stringify({
-				i: token,
-			}),
-			headers: {
-				'Content-Type': 'application/json',
-			},
-		})
-			.then(res => res.json())
-			.then(res => {
-				if (res.error) {
-					if (res.error.id === 'a8c724b3-6e9c-4b46-b1a8-bc3ed6258370') {
-						showSuspendedDialog().then(() => {
-							signout();
-						});
-					} else {
-						alert({
-							type: 'error',
-							title: i18n.ts.failedToFetchAccountInformation,
-							text: JSON.stringify(res.error),
-						});
-					}
-				} else {
-					res.token = token;
-					done(res);
-				}
-			})
-			.catch(fail);
-	});
-}
-
-export function updateAccount(accountData) {
-	for (const [key, value] of Object.entries(accountData)) {
-		$i[key] = value;
-	}
-	localStorage.setItem('account', JSON.stringify($i));
-}
-
-export function refreshAccount() {
-	return fetchAccount($i.token).then(updateAccount);
-}
-
-export async function login(token: Account['token'], redirect?: string) {
-	waiting();
-	if (_DEV_) console.log('logging as token ', token);
-	const me = await fetchAccount(token);
-	localStorage.setItem('account', JSON.stringify(me));
-	document.cookie = `token=${token}; path=/; max-age=31536000`; // bull dashboardの認証とかで使う
-	await addAccount(me.id, token);
-
-	if (redirect) {
-		// 他のタブは再読み込みするだけ
-		reloadChannel.postMessage(null);
-		// このページはredirectで指定された先に移動
-		location.href = redirect;
-		return;
-	}
-
-	unisonReload();
-}
-
-export async function openAccountMenu(opts: {
-	includeCurrentAccount?: boolean;
-	withExtraOperation: boolean;
-	active?: misskey.entities.UserDetailed['id'];
-	onChoose?: (account: misskey.entities.UserDetailed) => void;
-}, ev: MouseEvent) {
-	function showSigninDialog() {
-		popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
-			done: res => {
-				addAccount(res.id, res.i);
-				success();
-			},
-		}, 'closed');
-	}
-
-	function createAccount() {
-		popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, {
-			done: res => {
-				addAccount(res.id, res.i);
-				switchAccountWithToken(res.i);
-			},
-		}, 'closed');
-	}
-
-	async function switchAccount(account: misskey.entities.UserDetailed) {
-		const storedAccounts = await getAccounts();
-		const token = storedAccounts.find(x => x.id === account.id).token;
-		switchAccountWithToken(token);
-	}
-
-	function switchAccountWithToken(token: string) {
-		login(token);
-	}
-
-	const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== $i.id));
-	const accountsPromise = api('users/show', { userIds: storedAccounts.map(x => x.id) });
-
-	function createItem(account: misskey.entities.UserDetailed) {
-		return {
-			type: 'user',
-			user: account,
-			active: opts.active != null ? opts.active === account.id : false,
-			action: () => {
-				if (opts.onChoose) {
-					opts.onChoose(account);
-				} else {
-					switchAccount(account);
-				}
-			},
-		};
-	}
-
-	const accountItemPromises = storedAccounts.map(a => new Promise(res => {
-		accountsPromise.then(accounts => {
-			const account = accounts.find(x => x.id === a.id);
-			if (account == null) return res(null);
-			res(createItem(account));
-		});
-	}));
-
-	if (opts.withExtraOperation) {
-		popupMenu([...[{
-			type: 'link',
-			text: i18n.ts.profile,
-			to: `/@${ $i.username }`,
-			avatar: $i,
-		}, null, ...(opts.includeCurrentAccount ? [createItem($i)] : []), ...accountItemPromises, {
-			type: 'parent',
-			icon: 'ti ti-plus',
-			text: i18n.ts.addAccount,
-			children: [{
-				text: i18n.ts.existingAccount,
-				action: () => { showSigninDialog(); },
-			}, {
-				text: i18n.ts.createAccount,
-				action: () => { createAccount(); },
-			}],
-		}, {
-			type: 'link',
-			icon: 'ti ti-users',
-			text: i18n.ts.manageAccounts,
-			to: '/settings/accounts',
-		}]], ev.currentTarget ?? ev.target, {
-			align: 'left',
-		});
-	} else {
-		popupMenu([...(opts.includeCurrentAccount ? [createItem($i)] : []), ...accountItemPromises], ev.currentTarget ?? ev.target, {
-			align: 'left',
-		});
-	}
-}
diff --git a/packages/client/src/components/MkAbuseReport.vue b/packages/client/src/components/MkAbuseReport.vue
deleted file mode 100644
index 9a3464b640..0000000000
--- a/packages/client/src/components/MkAbuseReport.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-<div class="bcekxzvu _gap _panel">
-	<div class="target">
-		<MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`">
-			<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true" :disable-link="true"/>
-			<div class="names">
-				<MkUserName class="name" :user="report.targetUser"/>
-				<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
-			</div>
-		</MkA>
-		<MkKeyValue class="_formBlock">
-			<template #key>{{ i18n.ts.registeredDate }}</template>
-			<template #value>{{ new Date(report.targetUser.createdAt).toLocaleString() }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
-		</MkKeyValue>
-	</div>
-	<div class="detail">
-		<div>
-			<Mfm :text="report.comment"/>
-		</div>
-		<hr/>
-		<div>{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter"/></div>
-		<div v-if="report.assignee">
-			{{ i18n.ts.moderator }}:
-			<MkAcct :user="report.assignee"/>
-		</div>
-		<div><MkTime :time="report.createdAt"/></div>
-		<div class="action">
-			<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
-				{{ i18n.ts.forwardReport }}
-				<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
-			</MkSwitch>
-			<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import MkButton from '@/components/MkButton.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import { acct, userPage } from '@/filters/user';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	report: any;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'resolved', reportId: string): void;
-}>();
-
-let forward = $ref(props.report.forwarded);
-
-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 {
-		width: 35%;
-		box-sizing: border-box;
-		text-align: left;
-		padding: 24px;
-		border-right: solid 1px var(--divider);
-
-		> .info {
-			display: flex;
-			box-sizing: border-box;
-			align-items: center;
-			padding: 14px;
-			border-radius: 8px;
-			--c: rgb(255 196 0 / 15%);
-			background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
-			background-size: 16px 16px;
-
-			> .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/components/MkAbuseReportWindow.vue b/packages/client/src/components/MkAbuseReportWindow.vue
deleted file mode 100644
index 039f77c859..0000000000
--- a/packages/client/src/components/MkAbuseReportWindow.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-<XWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
-	<template #header>
-		<i class="ti ti-exclamation-circle" style="margin-right: 0.5em;"></i>
-		<I18n :src="i18n.ts.reportAbuseOf" tag="span">
-			<template #name>
-				<b><MkAcct :user="user"/></b>
-			</template>
-		</I18n>
-	</template>
-	<div class="dpvffvvy _monolithic_">
-		<div class="_section">
-			<MkTextarea v-model="comment">
-				<template #label>{{ i18n.ts.details }}</template>
-				<template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template>
-			</MkTextarea>
-		</div>
-		<div class="_section">
-			<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
-		</div>
-	</div>
-</XWindow>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import * as Misskey from 'misskey-js';
-import XWindow from '@/components/MkWindow.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	user: Misskey.entities.User;
-	initialComment?: string;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-
-const uiWindow = ref<InstanceType<typeof XWindow>>();
-const comment = ref(props.initialComment || '');
-
-function send() {
-	os.apiWithDialog('users/report-abuse', {
-		userId: props.user.id,
-		comment: comment.value,
-	}, undefined).then(res => {
-		os.alert({
-			type: 'success',
-			text: i18n.ts.abuseReported,
-		});
-		uiWindow.value?.close();
-		emit('closed');
-	});
-}
-</script>
-
-<style lang="scss" scoped>
-.dpvffvvy {
-	--root-margin: 16px;
-}
-</style>
diff --git a/packages/client/src/components/MkActiveUsersHeatmap.vue b/packages/client/src/components/MkActiveUsersHeatmap.vue
deleted file mode 100644
index 02b2eeeb36..0000000000
--- a/packages/client/src/components/MkActiveUsersHeatmap.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<template>
-<div ref="rootEl">
-	<MkLoading v-if="fetching"/>
-	<div v-else>
-		<canvas ref="chartEl"></canvas>
-	</div>
-</div>
-</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 * as os from '@/os';
-import 'chartjs-adapter-date-fns';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
-import { chartVLine } from '@/scripts/chart-vline';
-
-Chart.register(
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-	MatrixController, MatrixElement,
-);
-
-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 rootEl = $ref<HTMLDivElement>(null);
-const chartEl = $ref<HTMLCanvasElement>(null);
-const now = new Date();
-let chartInstance: Chart = null;
-let fetching = $ref(true);
-
-const { handler: externalTooltipHandler } = useChartTooltip({
-	position: 'middle',
-});
-
-async function renderChart() {
-	if (chartInstance) {
-		chartInstance.destroy();
-	}
-
-	const wide = rootEl.offsetWidth > 700;
-	const narrow = rootEl.offsetWidth < 400;
-
-	const weeks = wide ? 50 : narrow ? 10 : 25;
-	const chartLimit = 7 * weeks;
-
-	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) => {
-			const dt = getDate(i);
-			const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1).toString().padStart(2, '0')}-${dt.getDate().toString().padStart(2, '0')}`;
-			return {
-				x: iso,
-				y: dt.getDay(),
-				d: iso,
-				v,
-			};
-		});
-	};
-
-	const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' });
-
-	fetching = false;
-
-	await nextTick();
-
-	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 color = '#3498db';
-
-	const max = Math.max(...raw.readWrite);
-
-	const marginEachCell = 4;
-
-	chartInstance = new Chart(chartEl, {
-		type: 'matrix',
-		data: {
-			datasets: [{
-				label: 'Read & Write',
-				data: format(raw.readWrite),
-				pointRadius: 0,
-				borderWidth: 0,
-				borderJoinStyle: 'round',
-				borderRadius: 3,
-				backgroundColor(c) {
-					const value = c.dataset.data[c.dataIndex].v;
-					const a = value / max;
-					return alpha(color, a);
-				},
-				fill: true,
-				width(c) {
-					const a = c.chart.chartArea ?? {};
-					// 20週間
-					return (a.right - a.left) / weeks - marginEachCell;
-				},
-				height(c) {
-					const a = c.chart.chartArea ?? {};
-					// 7日
-					return (a.bottom - a.top) / 7 - marginEachCell;
-				},
-			}],
-		},
-		options: {
-			aspectRatio: wide ? 6 : narrow ? 1.8 : 3.2,
-			layout: {
-				padding: {
-					left: 8,
-					right: 0,
-					top: 0,
-					bottom: 0,
-				},
-			},
-			scales: {
-				x: {
-					type: 'time',
-					offset: true,
-					position: 'bottom',
-					time: {
-						unit: 'week',
-						round: 'week',
-						isoWeekday: 0,
-						displayFormats: {
-							week: 'MMM dd',
-						},
-					},
-					grid: {
-						display: false,
-						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
-					},
-					ticks: {
-						display: true,
-						maxRotation: 0,
-						autoSkipPadding: 8,
-					},
-				},
-				y: {
-					offset: true,
-					reverse: true,
-					position: 'right',
-					grid: {
-						display: false,
-						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
-					},
-					ticks: {
-						maxRotation: 0,
-						autoSkip: true,
-						padding: 1,
-						font: {
-							size: 9,
-						},
-						callback: (value, index, values) => ['', 'Mon', '', 'Wed', '', 'Fri', ''][value],
-					},
-				},
-			},
-			animation: false,
-			plugins: {
-				legend: {
-					display: false,
-				},
-				tooltip: {
-					enabled: false,
-					callbacks: {
-						title(context) {
-							const v = context[0].dataset.data[context[0].dataIndex];
-							return v.d;
-						},
-						label(context) {
-							const v = context.dataset.data[context.dataIndex];
-							return ['Active: ' + v.v];
-						},
-					},
-					//mode: 'index',
-					animation: {
-						duration: 0,
-					},
-					external: externalTooltipHandler,
-				},
-			},
-		},
-	});
-}
-
-onMounted(async () => {
-	renderChart();
-});
-</script>
diff --git a/packages/client/src/components/MkAnalogClock.vue b/packages/client/src/components/MkAnalogClock.vue
deleted file mode 100644
index 40ef626aed..0000000000
--- a/packages/client/src/components/MkAnalogClock.vue
+++ /dev/null
@@ -1,225 +0,0 @@
-<template>
-<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
-	<template v-if="props.graduations === 'dots'">
-		<circle
-			v-for="(angle, i) in graduationsMajor"
-			:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
-			:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
-			:r="0.125"
-			:fill="(props.twentyfour ? h : h % 12) === i ? nowColor : majorGraduationColor"
-			:opacity="!props.fadeGraduations || (props.twentyfour ? h : h % 12) === i ? 1 : Math.max(0, 1 - (angleDiff(hAngle, angle) / Math.PI) - numbersOpacityFactor)"
-		/>
-	</template>
-	<template v-else-if="props.graduations === 'numbers'">
-		<text
-			v-for="(angle, i) in texts"
-			:x="5 + (Math.sin(angle) * (5 - textsPadding))"
-			:y="5 - (Math.cos(angle) * (5 - textsPadding))"
-			text-anchor="middle"
-			dominant-baseline="middle"
-			:font-size="(props.twentyfour ? h : h % 12) === i ? 1 : 0.7"
-			:font-weight="(props.twentyfour ? h : h % 12) === i ? 'bold' : 'normal'"
-			:fill="(props.twentyfour ? h : h % 12) === i ? nowColor : 'currentColor'"
-			:opacity="!props.fadeGraduations || (props.twentyfour ? h : h % 12) === i ? 1 : Math.max(0, 1 - (angleDiff(hAngle, angle) / Math.PI) - numbersOpacityFactor)"
-		>
-			{{ i === 0 ? (props.twentyfour ? '24' : '12') : i }}
-		</text>
-	</template>
-
-	<!--
-	<line
-		:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
-		:y1="5 + (Math.cos(sAngle) * (sHandLengthRatio * handsTailLength))"
-		:x2="5 + (Math.sin(sAngle) * ((sHandLengthRatio * 5) - handsPadding))"
-		:y2="5 - (Math.cos(sAngle) * ((sHandLengthRatio * 5) - handsPadding))"
-		:stroke="sHandColor"
-		:stroke-width="thickness / 2"
-		stroke-linecap="round"
-	/>
-	-->
-
-	<line
-		class="s"
-		:class="{ animate: !disableSAnimate && sAnimation !== 'none', elastic: sAnimation === 'elastic', easeOut: sAnimation === 'easeOut' }"
-		:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
-		:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
-		:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
-		:y2="5 - (1 * ((sHandLengthRatio * 5) - handsPadding))"
-		:stroke="sHandColor"
-		:stroke-width="thickness / 2"
-		:style="`transform: rotateZ(${sAngle}rad)`"
-		stroke-linecap="round"
-	/>
-
-	<line
-		:x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))"
-		:y1="5 + (Math.cos(mAngle) * (mHandLengthRatio * handsTailLength))"
-		:x2="5 + (Math.sin(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
-		:y2="5 - (Math.cos(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
-		:stroke="mHandColor"
-		:stroke-width="thickness"
-		stroke-linecap="round"
-	/>
-
-	<line
-		:x1="5 - (Math.sin(hAngle) * (hHandLengthRatio * handsTailLength))"
-		:y1="5 + (Math.cos(hAngle) * (hHandLengthRatio * handsTailLength))"
-		:x2="5 + (Math.sin(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
-		:y2="5 - (Math.cos(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
-		:stroke="hHandColor"
-		:stroke-width="thickness"
-		stroke-linecap="round"
-	/>
-</svg>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount, shallowRef, nextTick } from 'vue';
-import tinycolor from 'tinycolor2';
-import { globalEvents } from '@/events.js';
-
-// https://stackoverflow.com/questions/1878907/how-can-i-find-the-difference-between-two-angles
-const angleDiff = (a: number, b: number) => {
-	const x = Math.abs(a - b);
-	return Math.abs((x + Math.PI) % (Math.PI * 2) - Math.PI);
-};
-
-const graduationsPadding = 0.5;
-const textsPadding = 0.6;
-const handsPadding = 1;
-const handsTailLength = 0.7;
-const hHandLengthRatio = 0.75;
-const mHandLengthRatio = 1;
-const sHandLengthRatio = 1;
-const numbersOpacityFactor = 0.35;
-
-const props = withDefaults(defineProps<{
-	thickness?: number;
-	offset?: number;
-	twentyfour?: boolean;
-	graduations?: 'none' | 'dots' | 'numbers';
-	fadeGraduations?: boolean;
-	sAnimation?: 'none' | 'elastic' | 'easeOut';
-}>(), {
-	numbers: false,
-	thickness: 0.1,
-	offset: 0 - new Date().getTimezoneOffset(),
-	twentyfour: false,
-	graduations: 'dots',
-	fadeGraduations: true,
-	sAnimation: 'elastic',
-});
-
-const graduationsMajor = computed(() => {
-	const angles: number[] = [];
-	const times = props.twentyfour ? 24 : 12;
-	for (let i = 0; i < times; i++) {
-		const angle = Math.PI * i / (times / 2);
-		angles.push(angle);
-	}
-	return angles;
-});
-const texts = computed(() => {
-	const angles: number[] = [];
-	const times = props.twentyfour ? 24 : 12;
-	for (let i = 0; i < times; i++) {
-		const angle = Math.PI * i / (times / 2);
-		angles.push(angle);
-	}
-	return angles;
-});
-
-let enabled = true;
-let majorGraduationColor = $ref<string>();
-//let minorGraduationColor = $ref<string>();
-let sHandColor = $ref<string>();
-let mHandColor = $ref<string>();
-let hHandColor = $ref<string>();
-let nowColor = $ref<string>();
-let h = $ref<number>(0);
-let m = $ref<number>(0);
-let s = $ref<number>(0);
-let hAngle = $ref<number>(0);
-let mAngle = $ref<number>(0);
-let sAngle = $ref<number>(0);
-let disableSAnimate = $ref(false);
-let sOneRound = false;
-
-function tick() {
-	const now = new Date();
-	now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
-	s = now.getSeconds();
-	m = now.getMinutes();
-	h = now.getHours();
-	hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6);
-	mAngle = Math.PI * (m + s / 60) / 30;
-	if (sOneRound) { // 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
-		sAngle = Math.PI * 60 / 30;
-		window.setTimeout(() => {
-			disableSAnimate = true;
-			window.setTimeout(() => {
-				sAngle = 0;
-				window.setTimeout(() => {
-					disableSAnimate = false;
-				}, 100);
-			}, 100);
-		}, 700);
-	} else {
-		sAngle = Math.PI * s / 30;
-	}
-	sOneRound = s === 59;
-}
-
-tick();
-
-function calcColors() {
-	const computedStyle = getComputedStyle(document.documentElement);
-	const dark = tinycolor(computedStyle.getPropertyValue('--bg')).isDark();
-	const accent = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
-	majorGraduationColor = dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
-	//minorGraduationColor = dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
-	sHandColor = dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)';
-	mHandColor = tinycolor(computedStyle.getPropertyValue('--fg')).toHexString();
-	hHandColor = accent;
-	nowColor = accent;
-}
-
-calcColors();
-
-onMounted(() => {
-	const update = () => {
-		if (enabled) {
-			tick();
-			window.setTimeout(update, 1000);
-		}
-	};
-	update();
-
-	globalEvents.on('themeChanged', calcColors);
-});
-
-onBeforeUnmount(() => {
-	enabled = false;
-
-	globalEvents.off('themeChanged', calcColors);
-});
-</script>
-
-<style lang="scss" scoped>
-.mbcofsoe {
-	display: block;
-
-	> .s {
-		will-change: transform;
-		transform-origin: 50% 50%;
-
-		&.animate.elastic {
-			transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
-		}
-
-		&.animate.easeOut {
-			transition: transform .7s cubic-bezier(0,.7,.3,1);
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkAutocomplete.vue b/packages/client/src/components/MkAutocomplete.vue
deleted file mode 100644
index 72783921d5..0000000000
--- a/packages/client/src/components/MkAutocomplete.vue
+++ /dev/null
@@ -1,476 +0,0 @@
-<template>
-<div ref="rootEl" class="swhvrteh _popup _shadow" :style="{ zIndex }" @contextmenu.prevent="() => {}">
-	<ol v-if="type === 'user'" ref="suggests" class="users">
-		<li v-for="user in users" tabindex="-1" class="user" @click="complete(type, user)" @keydown="onKeydown">
-			<img class="avatar" :src="user.avatarUrl"/>
-			<span class="name">
-				<MkUserName :key="user.id" :user="user"/>
-			</span>
-			<span class="username">@{{ acct(user) }}</span>
-		</li>
-		<li tabindex="-1" class="choose" @click="chooseUser()" @keydown="onKeydown">{{ i18n.ts.selectUser }}</li>
-	</ol>
-	<ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags">
-		<li v-for="hashtag in hashtags" tabindex="-1" @click="complete(type, hashtag)" @keydown="onKeydown">
-			<span class="name">{{ hashtag }}</span>
-		</li>
-	</ol>
-	<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
-		<li v-for="emoji in emojis" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
-			<span v-if="emoji.isCustomEmoji" class="emoji"><img :src="defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
-			<span v-else-if="defaultStore.state.emojiStyle != 'native'" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
-			<span v-else class="emoji">{{ emoji.emoji }}</span>
-			<!-- eslint-disable-next-line vue/no-v-html -->
-			<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
-			<span v-if="emoji.aliasOf" class="alias">({{ emoji.aliasOf }})</span>
-		</li>
-	</ol>
-	<ol v-else-if="mfmTags.length > 0" ref="suggests" class="mfmTags">
-		<li v-for="tag in mfmTags" tabindex="-1" @click="complete(type, tag)" @keydown="onKeydown">
-			<span class="tag">{{ tag }}</span>
-		</li>
-	</ol>
-</div>
-</template>
-
-<script lang="ts">
-import { markRaw, ref, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
-import contains from '@/scripts/contains';
-import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { acct } from '@/filters/user';
-import * as os from '@/os';
-import { MFM_TAGS } from '@/scripts/mfm-tags';
-import { defaultStore } from '@/store';
-import { emojilist } from '@/scripts/emojilist';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
-
-type EmojiDef = {
-	emoji: string;
-	name: string;
-	aliasOf?: string;
-	url?: string;
-	isCustomEmoji?: boolean;
-};
-
-const lib = emojilist.filter(x => x.category !== 'flags');
-
-const emjdb: EmojiDef[] = lib.map(x => ({
-	emoji: x.char,
-	name: x.name,
-	url: char2path(x.char),
-}));
-
-const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
-
-for (const x of lib) {
-	if (x.keywords) {
-		for (const k of x.keywords) {
-			emjdb.push({
-				emoji: x.char,
-				name: k,
-				aliasOf: x.name,
-				url: char2path(x.char),
-			});
-		}
-	}
-}
-
-emjdb.sort((a, b) => a.name.length - b.name.length);
-
-//#region Construct Emoji DB
-const customEmojis = instance.emojis;
-const emojiDefinitions: EmojiDef[] = [];
-
-for (const x of customEmojis) {
-	emojiDefinitions.push({
-		name: x.name,
-		emoji: `:${x.name}:`,
-		url: x.url,
-		isCustomEmoji: true,
-	});
-
-	if (x.aliases) {
-		for (const alias of x.aliases) {
-			emojiDefinitions.push({
-				name: alias,
-				aliasOf: x.name,
-				emoji: `:${x.name}:`,
-				url: x.url,
-				isCustomEmoji: true,
-			});
-		}
-	}
-}
-
-emojiDefinitions.sort((a, b) => a.name.length - b.name.length);
-
-const emojiDb = markRaw(emojiDefinitions.concat(emjdb));
-//#endregion
-
-export default {
-	emojiDb,
-	emojiDefinitions,
-	emojilist,
-	customEmojis,
-};
-</script>
-
-<script lang="ts" setup>
-const props = defineProps<{
-	type: string;
-	q: string | null;
-	textarea: HTMLTextAreaElement;
-	close: () => void;
-	x: number;
-	y: number;
-}>();
-
-const emit = defineEmits<{
-	(event: 'done', value: { type: string; value: any }): void;
-	(event: 'closed'): void;
-}>();
-
-const suggests = ref<Element>();
-const rootEl = ref<HTMLDivElement>();
-
-const fetching = ref(true);
-const users = ref<any[]>([]);
-const hashtags = ref<any[]>([]);
-const emojis = ref<(EmojiDef)[]>([]);
-const items = ref<Element[] | HTMLCollection>([]);
-const mfmTags = ref<string[]>([]);
-const select = ref(-1);
-const zIndex = os.claimZIndex('high');
-
-function complete(type: string, value: any) {
-	emit('done', { type, value });
-	emit('closed');
-	if (type === 'emoji') {
-		let recents = defaultStore.state.recentlyUsedEmojis;
-		recents = recents.filter((emoji: any) => emoji !== value);
-		recents.unshift(value);
-		defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
-	}
-}
-
-function setPosition() {
-	if (!rootEl.value) return;
-	if (props.x + rootEl.value.offsetWidth > window.innerWidth) {
-		rootEl.value.style.left = (window.innerWidth - rootEl.value.offsetWidth) + 'px';
-	} else {
-		rootEl.value.style.left = `${props.x}px`;
-	}
-	if (props.y + rootEl.value.offsetHeight > window.innerHeight) {
-		rootEl.value.style.top = (props.y - rootEl.value.offsetHeight) + 'px';
-		rootEl.value.style.marginTop = '0';
-	} else {
-		rootEl.value.style.top = props.y + 'px';
-		rootEl.value.style.marginTop = 'calc(1em + 8px)';
-	}
-}
-
-function exec() {
-	select.value = -1;
-	if (suggests.value) {
-		for (const el of Array.from(items.value)) {
-			el.removeAttribute('data-selected');
-		}
-	}
-	if (props.type === 'user') {
-		if (!props.q) {
-			users.value = [];
-			fetching.value = false;
-			return;
-		}
-
-		const cacheKey = `autocomplete:user:${props.q}`;
-		const cache = sessionStorage.getItem(cacheKey);
-
-		if (cache) {
-			users.value = JSON.parse(cache);
-			fetching.value = false;
-		} else {
-			os.api('users/search-by-username-and-host', {
-				username: props.q,
-				limit: 10,
-				detail: false,
-			}).then(searchedUsers => {
-				users.value = searchedUsers as any[];
-				fetching.value = false;
-				// キャッシュ
-				sessionStorage.setItem(cacheKey, JSON.stringify(searchedUsers));
-			});
-		}
-	} else if (props.type === 'hashtag') {
-		if (!props.q || props.q === '') {
-			hashtags.value = JSON.parse(localStorage.getItem('hashtags') || '[]');
-			fetching.value = false;
-		} else {
-			const cacheKey = `autocomplete:hashtag:${props.q}`;
-			const cache = sessionStorage.getItem(cacheKey);
-			if (cache) {
-				const hashtags = JSON.parse(cache);
-				hashtags.value = hashtags;
-				fetching.value = false;
-			} else {
-				os.api('hashtags/search', {
-					query: props.q,
-					limit: 30,
-				}).then(searchedHashtags => {
-					hashtags.value = searchedHashtags as any[];
-					fetching.value = false;
-					// キャッシュ
-					sessionStorage.setItem(cacheKey, JSON.stringify(searchedHashtags));
-				});
-			}
-		}
-	} else if (props.type === 'emoji') {
-		if (!props.q || props.q === '') {
-			// 最近使った絵文字をサジェスト
-			emojis.value = defaultStore.state.recentlyUsedEmojis.map(emoji => emojiDb.find(dbEmoji => dbEmoji.emoji === emoji)).filter(x => x) as EmojiDef[];
-			return;
-		}
-
-		const matched: EmojiDef[] = [];
-		const max = 30;
-
-		emojiDb.some(x => {
-			if (x.name.startsWith(props.q ?? '') && !x.aliasOf && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
-			return matched.length === max;
-		});
-
-		if (matched.length < max) {
-			emojiDb.some(x => {
-				if (x.name.startsWith(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
-				return matched.length === max;
-			});
-		}
-
-		if (matched.length < max) {
-			emojiDb.some(x => {
-				if (x.name.includes(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
-				return matched.length === max;
-			});
-		}
-
-		emojis.value = matched;
-	} else if (props.type === 'mfmTag') {
-		if (!props.q || props.q === '') {
-			mfmTags.value = MFM_TAGS;
-			return;
-		}
-
-		mfmTags.value = MFM_TAGS.filter(tag => tag.startsWith(props.q ?? ''));
-	}
-}
-
-function onMousedown(event: Event) {
-	if (!contains(rootEl.value, event.target) && (rootEl.value !== event.target)) props.close();
-}
-
-function onKeydown(event: KeyboardEvent) {
-	const cancel = () => {
-		event.preventDefault();
-		event.stopPropagation();
-	};
-
-	switch (event.key) {
-		case 'Enter':
-			if (select.value !== -1) {
-				cancel();
-				(items.value[select.value] as any).click();
-			} else {
-				props.close();
-			}
-			break;
-
-		case 'Escape':
-			cancel();
-			props.close();
-			break;
-
-		case 'ArrowUp':
-			if (select.value !== -1) {
-				cancel();
-				selectPrev();
-			} else {
-				props.close();
-			}
-			break;
-
-		case 'Tab':
-		case 'ArrowDown':
-			cancel();
-			selectNext();
-			break;
-
-		default:
-			event.stopPropagation();
-			props.textarea.focus();
-	}
-}
-
-function selectNext() {
-	if (++select.value >= items.value.length) select.value = 0;
-	if (items.value.length === 0) select.value = -1;
-	applySelect();
-}
-
-function selectPrev() {
-	if (--select.value < 0) select.value = items.value.length - 1;
-	applySelect();
-}
-
-function applySelect() {
-	for (const el of Array.from(items.value)) {
-		el.removeAttribute('data-selected');
-	}
-
-	if (select.value !== -1) {
-		items.value[select.value].setAttribute('data-selected', 'true');
-		(items.value[select.value] as any).focus();
-	}
-}
-
-function chooseUser() {
-	props.close();
-	os.selectUser().then(user => {
-		complete('user', user);
-		props.textarea.focus();
-	});
-}
-
-onUpdated(() => {
-	setPosition();
-	items.value = suggests.value?.children ?? [];
-});
-
-onMounted(() => {
-	setPosition();
-
-	props.textarea.addEventListener('keydown', onKeydown);
-
-	for (const el of Array.from(document.querySelectorAll('body *'))) {
-		el.addEventListener('mousedown', onMousedown);
-	}
-
-	nextTick(() => {
-		exec();
-
-		watch(() => props.q, () => {
-			nextTick(() => {
-				exec();
-			});
-		});
-	});
-});
-
-onBeforeUnmount(() => {
-	props.textarea.removeEventListener('keydown', onKeydown);
-
-	for (const el of Array.from(document.querySelectorAll('body *'))) {
-		el.removeEventListener('mousedown', onMousedown);
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.swhvrteh {
-	position: fixed;
-	max-width: 100%;
-	margin-top: calc(1em + 8px);
-	overflow: hidden;
-	transition: top 0.1s ease, left 0.1s ease;
-
-	> ol {
-		display: block;
-		margin: 0;
-		padding: 4px 0;
-		max-height: 190px;
-		max-width: 500px;
-		overflow: auto;
-		list-style: none;
-
-		> li {
-			display: flex;
-			align-items: center;
-			padding: 4px 12px;
-			white-space: nowrap;
-			overflow: hidden;
-			font-size: 0.9em;
-			cursor: default;
-
-			&, * {
-				user-select: none;
-			}
-
-			* {
-				overflow: hidden;
-				text-overflow: ellipsis;
-			}
-
-			&:hover {
-				background: var(--X3);
-			}
-
-			&[data-selected='true'] {
-				background: var(--accent);
-
-				&, * {
-					color: #fff !important;
-				}
-			}
-
-			&:active {
-				background: var(--accentDarken);
-
-				&, * {
-					color: #fff !important;
-				}
-			}
-		}
-	}
-
-	> .users > li {
-
-		.avatar {
-			min-width: 28px;
-			min-height: 28px;
-			max-width: 28px;
-			max-height: 28px;
-			margin: 0 8px 0 0;
-			border-radius: 100%;
-		}
-
-		.name {
-			margin: 0 8px 0 0;
-		}
-	}
-
-	> .emojis > li {
-
-		.emoji {
-			display: inline-block;
-			margin: 0 4px 0 0;
-			width: 24px;
-
-			> img {
-				width: 24px;
-				vertical-align: bottom;
-			}
-		}
-
-		.alias {
-			margin: 0 0 0 8px;
-		}
-	}
-
-	> .mfmTags > li {
-
-		.name {
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkAvatars.vue b/packages/client/src/components/MkAvatars.vue
deleted file mode 100644
index 162338b639..0000000000
--- a/packages/client/src/components/MkAvatars.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-<div>
-	<div v-for="user in users" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
-		<MkAvatar :user="user" style="width:32px;height:32px;" :show-indicator="true"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import * as os from '@/os';
-
-const props = defineProps<{
-	userIds: string[];
-}>();
-
-const users = ref([]);
-
-onMounted(async () => {
-	users.value = await os.api('users/show', {
-		userIds: props.userIds,
-	});
-});
-</script>
diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
deleted file mode 100644
index 891645bb2a..0000000000
--- a/packages/client/src/components/MkButton.vue
+++ /dev/null
@@ -1,227 +0,0 @@
-<template>
-<button
-	v-if="!link"
-	ref="el" class="bghgjjyj _button"
-	:class="{ inline, primary, gradate, danger, rounded, full }"
-	:type="type"
-	@click="emit('click', $event)"
-	@mousedown="onMousedown"
->
-	<div ref="ripples" class="ripples"></div>
-	<div class="content">
-		<slot></slot>
-	</div>
-</button>
-<MkA
-	v-else class="bghgjjyj _button"
-	:class="{ inline, primary, gradate, danger, rounded, full }"
-	:to="to"
-	@mousedown="onMousedown"
->
-	<div ref="ripples" class="ripples"></div>
-	<div class="content">
-		<slot></slot>
-	</div>
-</MkA>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
-
-const props = defineProps<{
-	type?: 'button' | 'submit' | 'reset';
-	primary?: boolean;
-	gradate?: boolean;
-	rounded?: boolean;
-	inline?: boolean;
-	link?: boolean;
-	to?: string;
-	autofocus?: boolean;
-	wait?: boolean;
-	danger?: boolean;
-	full?: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'click', payload: MouseEvent): void;
-}>();
-
-let el = $ref<HTMLElement | null>(null);
-let ripples = $ref<HTMLElement | null>(null);
-
-onMounted(() => {
-	if (props.autofocus) {
-		nextTick(() => {
-			el!.focus();
-		});
-	}
-});
-
-function distance(p, q): number {
-	return Math.hypot(p.x - q.x, p.y - q.y);
-}
-
-function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY): number {
-	const origin = { x: circleCenterX, y: circleCenterY };
-	const dist1 = distance({ x: 0, y: 0 }, origin);
-	const dist2 = distance({ x: boxW, y: 0 }, origin);
-	const dist3 = distance({ x: 0, y: boxH }, origin);
-	const dist4 = distance({ x: boxW, y: boxH }, origin);
-	return Math.max(dist1, dist2, dist3, dist4) * 2;
-}
-
-function onMousedown(evt: MouseEvent): void {
-	const target = evt.target! as HTMLElement;
-	const rect = target.getBoundingClientRect();
-
-	const ripple = document.createElement('div');
-	ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
-	ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
-
-	ripples!.appendChild(ripple);
-
-	const circleCenterX = evt.clientX - rect.left;
-	const circleCenterY = evt.clientY - rect.top;
-
-	const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY);
-
-	window.setTimeout(() => {
-		ripple.style.transform = 'scale(' + (scale / 2) + ')';
-	}, 1);
-	window.setTimeout(() => {
-		ripple.style.transition = 'all 1s ease';
-		ripple.style.opacity = '0';
-	}, 1000);
-	window.setTimeout(() => {
-		if (ripples) ripples.removeChild(ripple);
-	}, 2000);
-}
-</script>
-
-<style lang="scss" scoped>
-.bghgjjyj {
-	position: relative;
-	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
-	display: block;
-	min-width: 100px;
-	width: max-content;
-	padding: 7px 14px;
-	text-align: center;
-	font-weight: normal;
-	font-size: 95%;
-	box-shadow: none;
-	text-decoration: none;
-	background: var(--buttonBg);
-	border-radius: 5px;
-	overflow: clip;
-	box-sizing: border-box;
-	transition: background 0.1s ease;
-
-	&:not(:disabled):hover {
-		background: var(--buttonHoverBg);
-	}
-
-	&:not(:disabled):active {
-		background: var(--buttonHoverBg);
-	}
-
-	&.full {
-		width: 100%;
-	}
-
-	&.rounded {
-		border-radius: 999px;
-	}
-
-	&.primary {
-		font-weight: bold;
-		color: var(--fgOnAccent) !important;
-		background: var(--accent);
-
-		&:not(:disabled):hover {
-			background: var(--X8);
-		}
-
-		&:not(:disabled):active {
-			background: var(--X8);
-		}
-	}
-
-	&.gradate {
-		font-weight: bold;
-		color: var(--fgOnAccent) !important;
-		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-
-		&:not(:disabled):hover {
-			background: linear-gradient(90deg, var(--X8), var(--X8));
-		}
-
-		&:not(:disabled):active {
-			background: linear-gradient(90deg, var(--X8), var(--X8));
-		}
-	}
-
-	&.danger {
-		color: #ff2a2a;
-
-		&.primary {
-			color: #fff;
-			background: #ff2a2a;
-
-			&:not(:disabled):hover {
-				background: #ff4242;
-			}
-
-			&:not(:disabled):active {
-				background: #d42e2e;
-			}
-		}
-	}
-
-	&:disabled {
-		opacity: 0.7;
-	}
-
-	&:focus-visible {
-		outline: solid 2px var(--focus);
-		outline-offset: 2px;
-	}
-
-	&.inline {
-		display: inline-block;
-		width: auto;
-		min-width: 100px;
-	}
-
-	> .ripples {
-		position: absolute;
-		z-index: 0;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		border-radius: 6px;
-		overflow: hidden;
-
-		::v-deep(div) {
-			position: absolute;
-			width: 2px;
-			height: 2px;
-			border-radius: 100%;
-			background: rgba(0, 0, 0, 0.1);
-			opacity: 1;
-			transform: scale(1);
-			transition: all 0.5s cubic-bezier(0,.5,0,1);
-		}
-	}
-
-	&.primary > .ripples ::v-deep(div) {
-		background: rgba(0, 0, 0, 0.15);
-	}
-
-	> .content {
-		position: relative;
-		z-index: 1;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkCaptcha.vue b/packages/client/src/components/MkCaptcha.vue
deleted file mode 100644
index 6d218389fc..0000000000
--- a/packages/client/src/components/MkCaptcha.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<template>
-<div>
-	<span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis/></span>
-	<div ref="captchaEl"></div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-
-type Captcha = {
-	render(container: string | Node, options: {
-		readonly [_ in 'sitekey' | 'theme' | 'type' | 'size' | 'tabindex' | 'callback' | 'expired' | 'expired-callback' | 'error-callback' | 'endpoint']?: unknown;
-	}): string;
-	remove(id: string): void;
-	execute(id: string): void;
-	reset(id?: string): void;
-	getResponse(id: string): string;
-};
-
-type CaptchaProvider = 'hcaptcha' | 'recaptcha' | 'turnstile';
-
-type CaptchaContainer = {
-	readonly [_ in CaptchaProvider]?: Captcha;
-};
-
-declare global {
-	interface Window extends CaptchaContainer { }
-}
-
-const props = defineProps<{
-	provider: CaptchaProvider;
-	sitekey: string;
-	modelValue?: string | null;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'update:modelValue', v: string | null): void;
-}>();
-
-const available = ref(false);
-
-const captchaEl = ref<HTMLDivElement | undefined>();
-
-const variable = computed(() => {
-	switch (props.provider) {
-		case 'hcaptcha': return 'hcaptcha';
-		case 'recaptcha': return 'grecaptcha';
-		case 'turnstile': return 'turnstile';
-	}
-});
-
-const loaded = !!window[variable.value];
-
-const src = computed(() => {
-	switch (props.provider) {
-		case 'hcaptcha': return 'https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off';
-		case 'recaptcha': return 'https://www.recaptcha.net/recaptcha/api.js?render=explicit';
-		case 'turnstile': return 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
-	}
-});
-
-const scriptId = computed(() => `script-${props.provider}`)
-
-const captcha = computed<Captcha>(() => window[variable.value] || {} as unknown as Captcha);
-
-if (loaded) {
-	available.value = true;
-} else {
-	(document.getElementById(scriptId.value) || document.head.appendChild(Object.assign(document.createElement('script'), {
-		async: true,
-		id: scriptId.value,
-		src: src.value,
-	})))
-		.addEventListener('load', () => available.value = true);
-}
-
-function reset() {
-	if (captcha.value.reset) captcha.value.reset();
-}
-
-function requestRender() {
-	if (captcha.value.render && captchaEl.value instanceof Element) {
-		captcha.value.render(captchaEl.value, {
-			sitekey: props.sitekey,
-			theme: defaultStore.state.darkMode ? 'dark' : 'light',
-			callback: callback,
-			'expired-callback': callback,
-			'error-callback': callback,
-		});
-	} else {
-		window.setTimeout(requestRender, 1);
-	}
-}
-
-function callback(response?: string) {
-	emit('update:modelValue', typeof response === 'string' ? response : null);
-}
-
-onMounted(() => {
-	if (available.value) {
-		requestRender();
-	} else {
-		watch(available, requestRender);
-	}
-});
-
-onBeforeUnmount(() => {
-	reset();
-});
-
-defineExpose({
-	reset,
-});
-
-</script>
diff --git a/packages/client/src/components/MkChannelFollowButton.vue b/packages/client/src/components/MkChannelFollowButton.vue
deleted file mode 100644
index 9e275d6172..0000000000
--- a/packages/client/src/components/MkChannelFollowButton.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-<button
-	class="hdcaacmi _button"
-	:class="{ wait, active: isFollowing, full }"
-	:disabled="wait"
-	@click="onClick"
->
-	<template v-if="!wait">
-		<template v-if="isFollowing">
-			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
-		</template>
-		<template v-else>
-			<span v-if="full">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
-		</template>
-	</template>
-	<template v-else>
-		<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true"/>
-	</template>
-</button>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{
-	channel: Record<string, any>;
-	full?: boolean;
-}>(), {
-	full: false,
-});
-
-const isFollowing = ref<boolean>(props.channel.isFollowing);
-const wait = ref(false);
-
-async function onClick() {
-	wait.value = true;
-
-	try {
-		if (isFollowing.value) {
-			await os.api('channels/unfollow', {
-				channelId: props.channel.id,
-			});
-			isFollowing.value = false;
-		} else {
-			await os.api('channels/follow', {
-				channelId: props.channel.id,
-			});
-			isFollowing.value = true;
-		}
-	} catch (err) {
-		console.error(err);
-	} finally {
-		wait.value = false;
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.hdcaacmi {
-	position: relative;
-	display: inline-block;
-	font-weight: bold;
-	color: var(--accent);
-	background: transparent;
-	border: solid 1px var(--accent);
-	padding: 0;
-	height: 31px;
-	font-size: 16px;
-	border-radius: 32px;
-	background: #fff;
-
-	&.full {
-		padding: 0 8px 0 12px;
-		font-size: 14px;
-	}
-
-	&:not(.full) {
-		width: 31px;
-	}
-
-	&:focus-visible {
-		&:after {
-			content: "";
-			pointer-events: none;
-			position: absolute;
-			top: -5px;
-			right: -5px;
-			bottom: -5px;
-			left: -5px;
-			border: 2px solid var(--focus);
-			border-radius: 32px;
-		}
-	}
-
-	&:hover {
-		//background: mix($primary, #fff, 20);
-	}
-
-	&:active {
-		//background: mix($primary, #fff, 40);
-	}
-
-	&.active {
-		color: #fff;
-		background: var(--accent);
-
-		&:hover {
-			background: var(--accentLighten);
-			border-color: var(--accentLighten);
-		}
-
-		&:active {
-			background: var(--accentDarken);
-			border-color: var(--accentDarken);
-		}
-	}
-
-	&.wait {
-		cursor: wait !important;
-		opacity: 0.7;
-	}
-
-	> span {
-		margin-right: 6px;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkChannelPreview.vue b/packages/client/src/components/MkChannelPreview.vue
deleted file mode 100644
index 6ef50bddcf..0000000000
--- a/packages/client/src/components/MkChannelPreview.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<template>
-<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
-	<div class="banner" :style="bannerStyle">
-		<div class="fade"></div>
-		<div class="name"><i class="ti ti-device-tv"></i> {{ channel.name }}</div>
-		<div class="status">
-			<div>
-				<i class="ti ti-users ti-fw"></i>
-				<I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;">
-					<template #n>
-						<b>{{ channel.usersCount }}</b>
-					</template>
-				</I18n>
-			</div>
-			<div>
-				<i class="ti ti-pencil ti-fw"></i>
-				<I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;">
-					<template #n>
-						<b>{{ channel.notesCount }}</b>
-					</template>
-				</I18n>
-			</div>
-		</div>
-	</div>
-	<article v-if="channel.description">
-		<p :title="channel.description">{{ channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description }}</p>
-	</article>
-	<footer>
-		<span v-if="channel.lastNotedAt">
-			{{ i18n.ts.updatedAt }}: <MkTime :time="channel.lastNotedAt"/>
-		</span>
-	</footer>
-</MkA>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	channel: Record<string, any>;
-}>();
-
-const bannerStyle = computed(() => {
-	if (props.channel.bannerUrl) {
-		return { backgroundImage: `url(${props.channel.bannerUrl})` };
-	} else {
-		return { backgroundColor: '#4c5e6d' };
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.eftoefju {
-	display: block;
-	overflow: hidden;
-	width: 100%;
-
-	&:hover {
-		text-decoration: none;
-	}
-
-	> .banner {
-		position: relative;
-		width: 100%;
-		height: 200px;
-		background-position: center;
-		background-size: cover;
-
-		> .fade {
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			height: 64px;
-			background: linear-gradient(0deg, var(--panel), var(--X15));
-		}
-
-		> .name {
-			position: absolute;
-			top: 16px;
-			left: 16px;
-			padding: 12px 16px;
-			background: rgba(0, 0, 0, 0.7);
-			color: #fff;
-			font-size: 1.2em;
-		}
-
-		> .status {
-			position: absolute;
-			z-index: 1;
-			bottom: 16px;
-			right: 16px;
-			padding: 8px 12px;
-			font-size: 80%;
-			background: rgba(0, 0, 0, 0.7);
-			border-radius: 6px;
-			color: #fff;
-		}
-	}
-
-	> article {
-		padding: 16px;
-
-		> p {
-			margin: 0;
-			font-size: 1em;
-		}
-	}
-
-	> footer {
-		padding: 12px 16px;
-		border-top: solid 0.5px var(--divider);
-
-		> span {
-			opacity: 0.7;
-			font-size: 0.9em;
-		}
-	}
-
-	@media (max-width: 550px) {
-		font-size: 0.9em;
-
-		> .banner {
-			height: 80px;
-
-			> .status {
-				display: none;
-			}
-		}
-
-		> article {
-			padding: 12px;
-		}
-
-		> footer {
-			display: none;
-		}
-	}
-
-	@media (max-width: 500px) {
-		font-size: 0.8em;
-
-		> .banner {
-			height: 70px;
-		}
-
-		> article {
-			padding: 8px;
-		}
-	}
-}
-
-</style>
diff --git a/packages/client/src/components/MkChart.vue b/packages/client/src/components/MkChart.vue
deleted file mode 100644
index fbbc231b88..0000000000
--- a/packages/client/src/components/MkChart.vue
+++ /dev/null
@@ -1,859 +0,0 @@
-<template>
-<div class="cbbedffa">
-	<canvas ref="chartEl"></canvas>
-	<div v-if="fetching" class="fetching">
-		<MkLoading/>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable id-denylist --
-  Chart.js has a `data` attribute in most chart definitions, which triggers the
-  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 { onMounted, ref, watch, PropType, onUnmounted } from 'vue';
-import {
-	Chart,
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-} from 'chart.js';
-import 'chartjs-adapter-date-fns';
-import { enUS } from 'date-fns/locale';
-import zoomPlugin from 'chartjs-plugin-zoom';
-import gradient from 'chartjs-plugin-gradient';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { chartVLine } from '@/scripts/chart-vline';
-
-const props = defineProps({
-	src: {
-		type: String,
-		required: true,
-	},
-	args: {
-		type: Object,
-		required: false,
-	},
-	limit: {
-		type: Number,
-		required: false,
-		default: 90,
-	},
-	span: {
-		type: String as PropType<'hour' | 'day'>,
-		required: true,
-	},
-	detailed: {
-		type: Boolean,
-		required: false,
-		default: false,
-	},
-	stacked: {
-		type: Boolean,
-		required: false,
-		default: false,
-	},
-	bar: {
-		type: Boolean,
-		required: false,
-		default: false,
-	},
-	aspectRatio: {
-		type: Number,
-		required: false,
-		default: null,
-	},
-});
-
-Chart.register(
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-	zoomPlugin,
-	gradient,
-);
-
-const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
-const negate = arr => arr.map(x => -x);
-const alpha = (hex, a) => {
-	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
-	const r = parseInt(result[1], 16);
-	const g = parseInt(result[2], 16);
-	const b = parseInt(result[3], 16);
-	return `rgba(${r}, ${g}, ${b}, ${a})`;
-};
-
-const colors = {
-	blue: '#008FFB',
-	green: '#00E396',
-	yellow: '#FEB019',
-	red: '#FF4560',
-	purple: '#e300db',
-	orange: '#fe6919',
-	lime: '#bde800',
-	cyan: '#00e0e0',
-};
-const colorSets = [colors.blue, colors.green, colors.yellow, colors.red, colors.purple];
-const getColor = (i) => {
-	return colorSets[i % colorSets.length];
-};
-
-const now = new Date();
-let chartInstance: Chart = null;
-let chartData: {
-	series: {
-		name: string;
-		type: 'line' | 'area';
-		color?: string;
-		dashed?: boolean;
-		hidden?: boolean;
-		data: {
-			x: number;
-			y: number;
-		}[];
-	}[];
-} = null;
-
-const chartEl = ref<HTMLCanvasElement>(null);
-const fetching = ref(true);
-
-const getDate = (ago: number) => {
-	const y = now.getFullYear();
-	const m = now.getMonth();
-	const d = now.getDate();
-	const h = now.getHours();
-
-	return props.span === 'day' ? new Date(y, m, d - ago) : new Date(y, m, d, h - ago);
-};
-
-const format = (arr) => {
-	return arr.map((v, i) => ({
-		x: getDate(i).getTime(),
-		y: v,
-	}));
-};
-
-const { handler: externalTooltipHandler } = useChartTooltip();
-
-const render = () => {
-	if (chartInstance) {
-		chartInstance.destroy();
-	}
-
-	const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
-	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
-
-	// フォントカラー
-	Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
-
-	const maxes = chartData.series.map((x, i) => Math.max(...x.data.map(d => d.y)));
-
-	chartInstance = new Chart(chartEl.value, {
-		type: props.bar ? 'bar' : 'line',
-		data: {
-			labels: new Array(props.limit).fill(0).map((_, i) => getDate(i).toLocaleString()).slice().reverse(),
-			datasets: chartData.series.map((x, i) => ({
-				parsing: false,
-				label: x.name,
-				data: x.data.slice().reverse(),
-				tension: 0.3,
-				pointRadius: 0,
-				borderWidth: props.bar ? 0 : 2,
-				borderColor: x.color ? x.color : getColor(i),
-				borderDash: x.dashed ? [5, 5] : [],
-				borderJoinStyle: 'round',
-				borderRadius: props.bar ? 3 : undefined,
-				backgroundColor: props.bar ? (x.color ? x.color : getColor(i)) : alpha(x.color ? x.color : getColor(i), 0.1),
-				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.35),
-						},
-					},
-				},
-				barPercentage: 0.9,
-				categoryPercentage: 0.9,
-				fill: x.type === 'area',
-				clip: 8,
-				hidden: !!x.hidden,
-			})),
-		},
-		options: {
-			aspectRatio: props.aspectRatio || 2.5,
-			layout: {
-				padding: {
-					left: 0,
-					right: 8,
-					top: 0,
-					bottom: 0,
-				},
-			},
-			scales: {
-				x: {
-					type: 'time',
-					stacked: props.stacked,
-					offset: false,
-					time: {
-						stepSize: 1,
-						unit: props.span === 'day' ? 'month' : 'day',
-					},
-					grid: {
-						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
-					},
-					ticks: {
-						display: props.detailed,
-						maxRotation: 0,
-						autoSkipPadding: 16,
-					},
-					adapters: {
-						date: {
-							locale: enUS,
-						},
-					},
-					min: getDate(props.limit).getTime(),
-				},
-				y: {
-					position: 'left',
-					stacked: props.stacked,
-					suggestedMax: 50,
-					grid: {
-						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
-					},
-					ticks: {
-						display: props.detailed,
-						//mirror: true,
-					},
-				},
-			},
-			interaction: {
-				intersect: false,
-				mode: 'index',
-			},
-			elements: {
-				point: {
-					hoverRadius: 5,
-					hoverBorderWidth: 2,
-				},
-			},
-			animation: false,
-			plugins: {
-				legend: {
-					display: props.detailed,
-					position: 'bottom',
-					labels: {
-						boxWidth: 16,
-					},
-				},
-				tooltip: {
-					enabled: false,
-					mode: 'index',
-					animation: {
-						duration: 0,
-					},
-					external: externalTooltipHandler,
-				},
-				zoom: props.detailed ? {
-					pan: {
-						enabled: true,
-					},
-					zoom: {
-						wheel: {
-							enabled: true,
-						},
-						pinch: {
-							enabled: true,
-						},
-						drag: {
-							enabled: false,
-						},
-						mode: 'x',
-					},
-					limits: {
-						x: {
-							min: 'original',
-							max: 'original',
-						},
-						y: {
-							min: 'original',
-							max: 'original',
-						},
-					},
-				} : undefined,
-				gradient,
-			},
-		},
-		plugins: [chartVLine(vLineColor)],
-	});
-};
-
-const exportData = () => {
-	// TODO
-};
-
-const fetchFederationChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/federation', { limit: props.limit, span: props.span });
-	return {
-		series: [{
-			name: 'Received',
-			type: 'area',
-			data: format(raw.inboxInstances),
-			color: colors.blue,
-		}, {
-			name: 'Delivered',
-			type: 'area',
-			data: format(raw.deliveredInstances),
-			color: colors.green,
-		}, {
-			name: 'Stalled',
-			type: 'area',
-			data: format(raw.stalled),
-			color: colors.red,
-		}, {
-			name: 'Pub Active',
-			type: 'line',
-			data: format(raw.pubActive),
-			color: colors.purple,
-		}, {
-			name: 'Sub Active',
-			type: 'line',
-			data: format(raw.subActive),
-			color: colors.orange,
-		}, {
-			name: 'Pub & Sub',
-			type: 'line',
-			data: format(raw.pubsub),
-			dashed: true,
-			color: colors.cyan,
-		}, {
-			name: 'Pub',
-			type: 'line',
-			data: format(raw.pub),
-			dashed: true,
-			color: colors.purple,
-		}, {
-			name: 'Sub',
-			type: 'line',
-			data: format(raw.sub),
-			dashed: true,
-			color: colors.orange,
-		}],
-	};
-};
-
-const fetchApRequestChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/ap-request', { limit: props.limit, span: props.span });
-	return {
-		series: [{
-			name: 'In',
-			type: 'area',
-			color: '#008FFB',
-			data: format(raw.inboxReceived),
-		}, {
-			name: 'Out (succ)',
-			type: 'area',
-			color: '#00E396',
-			data: format(raw.deliverSucceeded),
-		}, {
-			name: 'Out (fail)',
-			type: 'area',
-			color: '#FEB019',
-			data: format(raw.deliverFailed),
-		}],
-	};
-};
-
-const fetchNotesChart = async (type: string): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/notes', { limit: props.limit, span: props.span });
-	return {
-		series: [{
-			name: 'All',
-			type: 'line',
-			data: format(type === 'combined'
-				? sum(raw.local.inc, negate(raw.local.dec), raw.remote.inc, negate(raw.remote.dec))
-				: sum(raw[type].inc, negate(raw[type].dec)),
-			),
-			color: '#888888',
-		}, {
-			name: 'Renotes',
-			type: 'area',
-			data: format(type === 'combined'
-				? sum(raw.local.diffs.renote, raw.remote.diffs.renote)
-				: raw[type].diffs.renote,
-			),
-			color: colors.green,
-		}, {
-			name: 'Replies',
-			type: 'area',
-			data: format(type === 'combined'
-				? sum(raw.local.diffs.reply, raw.remote.diffs.reply)
-				: raw[type].diffs.reply,
-			),
-			color: colors.yellow,
-		}, {
-			name: 'Normal',
-			type: 'area',
-			data: format(type === 'combined'
-				? sum(raw.local.diffs.normal, raw.remote.diffs.normal)
-				: raw[type].diffs.normal,
-			),
-			color: colors.blue,
-		}, {
-			name: 'With file',
-			type: 'area',
-			data: format(type === 'combined'
-				? sum(raw.local.diffs.withFile, raw.remote.diffs.withFile)
-				: raw[type].diffs.withFile,
-			),
-			color: colors.purple,
-		}],
-	};
-};
-
-const fetchNotesTotalChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/notes', { limit: props.limit, span: props.span });
-	return {
-		series: [{
-			name: 'Combined',
-			type: 'line',
-			data: format(sum(raw.local.total, raw.remote.total)),
-		}, {
-			name: 'Local',
-			type: 'area',
-			data: format(raw.local.total),
-		}, {
-			name: 'Remote',
-			type: 'area',
-			data: format(raw.remote.total),
-		}],
-	};
-};
-
-const fetchUsersChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/users', { limit: props.limit, span: props.span });
-	return {
-		series: [{
-			name: 'Combined',
-			type: 'line',
-			data: format(total
-				? sum(raw.local.total, raw.remote.total)
-				: sum(raw.local.inc, negate(raw.local.dec), raw.remote.inc, negate(raw.remote.dec)),
-			),
-		}, {
-			name: 'Local',
-			type: 'area',
-			data: format(total
-				? raw.local.total
-				: sum(raw.local.inc, negate(raw.local.dec)),
-			),
-		}, {
-			name: 'Remote',
-			type: 'area',
-			data: format(total
-				? raw.remote.total
-				: sum(raw.remote.inc, negate(raw.remote.dec)),
-			),
-		}],
-	};
-};
-
-const fetchActiveUsersChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/active-users', { limit: props.limit, span: props.span });
-	return {
-		series: [{
-			name: 'Read & Write',
-			type: 'area',
-			data: format(raw.readWrite),
-			color: colors.orange,
-		}, {
-			name: 'Write',
-			type: 'area',
-			data: format(raw.write),
-			color: colors.lime,
-		}, {
-			name: 'Read',
-			type: 'area',
-			data: format(raw.read),
-			color: colors.blue,
-		}, {
-			name: '< Week',
-			type: 'area',
-			data: format(raw.registeredWithinWeek),
-			color: colors.green,
-		}, {
-			name: '< Month',
-			type: 'area',
-			data: format(raw.registeredWithinMonth),
-			color: colors.yellow,
-		}, {
-			name: '< Year',
-			type: 'area',
-			data: format(raw.registeredWithinYear),
-			color: colors.red,
-		}, {
-			name: '> Week',
-			type: 'area',
-			data: format(raw.registeredOutsideWeek),
-			color: colors.yellow,
-		}, {
-			name: '> Month',
-			type: 'area',
-			data: format(raw.registeredOutsideMonth),
-			color: colors.red,
-		}, {
-			name: '> Year',
-			type: 'area',
-			data: format(raw.registeredOutsideYear),
-			color: colors.purple,
-		}],
-	};
-};
-
-const fetchDriveChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/drive', { limit: props.limit, span: props.span });
-	return {
-		bytes: true,
-		series: [{
-			name: 'All',
-			type: 'line',
-			dashed: true,
-			data: format(
-				sum(
-					raw.local.incSize,
-					negate(raw.local.decSize),
-					raw.remote.incSize,
-					negate(raw.remote.decSize),
-				),
-			),
-		}, {
-			name: 'Local +',
-			type: 'area',
-			data: format(raw.local.incSize),
-		}, {
-			name: 'Local -',
-			type: 'area',
-			data: format(negate(raw.local.decSize)),
-		}, {
-			name: 'Remote +',
-			type: 'area',
-			data: format(raw.remote.incSize),
-		}, {
-			name: 'Remote -',
-			type: 'area',
-			data: format(negate(raw.remote.decSize)),
-		}],
-	};
-};
-
-const fetchDriveFilesChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/drive', { limit: props.limit, span: props.span });
-	return {
-		series: [{
-			name: 'All',
-			type: 'line',
-			dashed: true,
-			data: format(
-				sum(
-					raw.local.incCount,
-					negate(raw.local.decCount),
-					raw.remote.incCount,
-					negate(raw.remote.decCount),
-				),
-			),
-		}, {
-			name: 'Local +',
-			type: 'area',
-			data: format(raw.local.incCount),
-		}, {
-			name: 'Local -',
-			type: 'area',
-			data: format(negate(raw.local.decCount)),
-		}, {
-			name: 'Remote +',
-			type: 'area',
-			data: format(raw.remote.incCount),
-		}, {
-			name: 'Remote -',
-			type: 'area',
-			data: format(negate(raw.remote.decCount)),
-		}],
-	};
-};
-
-const fetchInstanceRequestsChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
-	return {
-		series: [{
-			name: 'In',
-			type: 'area',
-			color: '#008FFB',
-			data: format(raw.requests.received),
-		}, {
-			name: 'Out (succ)',
-			type: 'area',
-			color: '#00E396',
-			data: format(raw.requests.succeeded),
-		}, {
-			name: 'Out (fail)',
-			type: 'area',
-			color: '#FEB019',
-			data: format(raw.requests.failed),
-		}],
-	};
-};
-
-const fetchInstanceUsersChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
-	return {
-		series: [{
-			name: 'Users',
-			type: 'area',
-			color: '#008FFB',
-			data: format(total
-				? raw.users.total
-				: sum(raw.users.inc, negate(raw.users.dec)),
-			),
-		}],
-	};
-};
-
-const fetchInstanceNotesChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
-	return {
-		series: [{
-			name: 'Notes',
-			type: 'area',
-			color: '#008FFB',
-			data: format(total
-				? raw.notes.total
-				: sum(raw.notes.inc, negate(raw.notes.dec)),
-			),
-		}],
-	};
-};
-
-const fetchInstanceFfChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
-	return {
-		series: [{
-			name: 'Following',
-			type: 'area',
-			color: '#008FFB',
-			data: format(total
-				? raw.following.total
-				: 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)),
-			),
-		}],
-	};
-};
-
-const fetchInstanceDriveUsageChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
-	return {
-		bytes: true,
-		series: [{
-			name: 'Drive usage',
-			type: 'area',
-			color: '#008FFB',
-			data: format(total
-				? raw.drive.totalUsage
-				: sum(raw.drive.incUsage, negate(raw.drive.decUsage)),
-			),
-		}],
-	};
-};
-
-const fetchInstanceDriveFilesChart = async (total: boolean): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
-	return {
-		series: [{
-			name: 'Drive files',
-			type: 'area',
-			color: '#008FFB',
-			data: format(total
-				? raw.drive.totalFiles
-				: sum(raw.drive.incFiles, negate(raw.drive.decFiles)),
-			),
-		}],
-	};
-};
-
-const fetchPerUserNotesChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/notes', { userId: props.args.user.id, limit: props.limit, span: props.span });
-	return {
-		series: [...(props.args.withoutAll ? [] : [{
-			name: 'All',
-			type: 'line',
-			data: format(sum(raw.inc, negate(raw.dec))),
-			color: '#888888',
-		}]), {
-			name: 'With file',
-			type: 'area',
-			data: format(raw.diffs.withFile),
-			color: colors.purple,
-		}, {
-			name: 'Renotes',
-			type: 'area',
-			data: format(raw.diffs.renote),
-			color: colors.green,
-		}, {
-			name: 'Replies',
-			type: 'area',
-			data: format(raw.diffs.reply),
-			color: colors.yellow,
-		}, {
-			name: 'Normal',
-			type: 'area',
-			data: format(raw.diffs.normal),
-			color: colors.blue,
-		}],
-	};
-};
-
-const fetchPerUserFollowingChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span });
-	return {
-		series: [{
-			name: 'Local',
-			type: 'area',
-			data: format(raw.local.followings.total),
-		}, {
-			name: 'Remote',
-			type: 'area',
-			data: format(raw.remote.followings.total),
-		}],
-	};
-};
-
-const fetchPerUserFollowersChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span });
-	return {
-		series: [{
-			name: 'Local',
-			type: 'area',
-			data: format(raw.local.followers.total),
-		}, {
-			name: 'Remote',
-			type: 'area',
-			data: format(raw.remote.followers.total),
-		}],
-	};
-};
-
-const fetchPerUserDriveChart = async (): Promise<typeof chartData> => {
-	const raw = await os.apiGet('charts/user/drive', { userId: props.args.user.id, limit: props.limit, span: props.span });
-	return {
-		series: [{
-			name: 'Inc',
-			type: 'area',
-			data: format(raw.incSize),
-		}, {
-			name: 'Dec',
-			type: 'area',
-			data: format(raw.decSize),
-		}],
-	};
-};
-
-const fetchAndRender = async () => {
-	const fetchData = () => {
-		switch (props.src) {
-			case 'federation': return fetchFederationChart();
-			case 'ap-request': return fetchApRequestChart();
-			case 'users': return fetchUsersChart(false);
-			case 'users-total': return fetchUsersChart(true);
-			case 'active-users': return fetchActiveUsersChart();
-			case 'notes': return fetchNotesChart('combined');
-			case 'local-notes': return fetchNotesChart('local');
-			case 'remote-notes': return fetchNotesChart('remote');
-			case 'notes-total': return fetchNotesTotalChart();
-			case 'drive': return fetchDriveChart();
-			case 'drive-files': return fetchDriveFilesChart();
-			case 'instance-requests': return fetchInstanceRequestsChart();
-			case 'instance-users': return fetchInstanceUsersChart(false);
-			case 'instance-users-total': return fetchInstanceUsersChart(true);
-			case 'instance-notes': return fetchInstanceNotesChart(false);
-			case 'instance-notes-total': return fetchInstanceNotesChart(true);
-			case 'instance-ff': return fetchInstanceFfChart(false);
-			case 'instance-ff-total': return fetchInstanceFfChart(true);
-			case 'instance-drive-usage': return fetchInstanceDriveUsageChart(false);
-			case 'instance-drive-usage-total': return fetchInstanceDriveUsageChart(true);
-			case 'instance-drive-files': return fetchInstanceDriveFilesChart(false);
-			case 'instance-drive-files-total': return fetchInstanceDriveFilesChart(true);
-
-			case 'per-user-notes': return fetchPerUserNotesChart();
-			case 'per-user-following': return fetchPerUserFollowingChart();
-			case 'per-user-followers': return fetchPerUserFollowersChart();
-			case 'per-user-drive': return fetchPerUserDriveChart();
-		}
-	};
-	fetching.value = true;
-	chartData = await fetchData();
-	fetching.value = false;
-	render();
-};
-
-watch(() => [props.src, props.span], fetchAndRender);
-
-onMounted(() => {
-	fetchAndRender();
-});
-/* eslint-enable id-denylist */
-</script>
-
-<style lang="scss" scoped>
-.cbbedffa {
-	position: relative;
-
-	> .fetching {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		-webkit-backdrop-filter: var(--blur, blur(12px));
-		backdrop-filter: var(--blur, blur(12px));
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		cursor: wait;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkChartTooltip.vue b/packages/client/src/components/MkChartTooltip.vue
deleted file mode 100644
index d36f45463c..0000000000
--- a/packages/client/src/components/MkChartTooltip.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-<MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :max-width="340" :direction="'top'" :inner-margin="16" @closed="emit('closed')">
-	<div v-if="title || series" class="qpcyisrl">
-		<div v-if="title" class="title">{{ title }}</div>
-		<template v-if="series">
-			<div v-for="x in series" class="series">
-				<span class="color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
-				<span>{{ x.text }}</span>
-			</div>
-		</template>
-	</div>
-</MkTooltip>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkTooltip from './MkTooltip.vue';
-
-defineProps<{
-	showing: boolean;
-	x: number;
-	y: number;
-	title?: string;
-	series?: {
-		backgroundColor: string;
-		borderColor: string;
-		text: string;
-	}[];
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-</script>
-
-<style lang="scss" scoped>
-.qpcyisrl {
-	> .title {
-		margin-bottom: 4px;
-	}
-
-	> .series {
-		> .color {
-			display: inline-block;
-			width: 8px;
-			height: 8px;
-			border-width: 1px;
-			border-style: solid;
-			margin-right: 8px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkCode.core.vue b/packages/client/src/components/MkCode.core.vue
deleted file mode 100644
index b074028821..0000000000
--- a/packages/client/src/components/MkCode.core.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<!-- eslint-disable vue/no-v-html -->
-<template>
-<code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code>
-<pre v-else :class="`language-${prismLang}`"><code :class="`language-${prismLang}`" v-html="html"></code></pre>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import Prism from 'prismjs';
-import 'prismjs/themes/prism-okaidia.css';
-
-const props = defineProps<{
-	code: string;
-	lang?: string;
-	inline?: boolean;
-}>();
-
-const prismLang = computed(() => Prism.languages[props.lang] ? props.lang : 'js');
-const html = computed(() => Prism.highlight(props.code, Prism.languages[prismLang.value], prismLang.value));
-</script>
diff --git a/packages/client/src/components/MkCode.vue b/packages/client/src/components/MkCode.vue
deleted file mode 100644
index 1640258d5b..0000000000
--- a/packages/client/src/components/MkCode.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-<XCode :code="code" :lang="lang" :inline="inline"/>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-
-defineProps<{
-	code: string;
-	lang?: string;
-	inline?: boolean;
-}>();
-
-const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue'));
-</script>
diff --git a/packages/client/src/components/MkContainer.vue b/packages/client/src/components/MkContainer.vue
deleted file mode 100644
index 6d4d5be2bc..0000000000
--- a/packages/client/src/components/MkContainer.vue
+++ /dev/null
@@ -1,275 +0,0 @@
-<template>
-<div v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
-	<header v-if="showHeader" ref="header">
-		<div class="title"><slot name="header"></slot></div>
-		<div class="sub">
-			<slot name="func"></slot>
-			<button v-if="foldable" class="_button" @click="() => showBody = !showBody">
-				<template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
-				<template v-else><i class="ti ti-chevron-down"></i></template>
-			</button>
-		</div>
-	</header>
-	<transition
-		:name="$store.state.animation ? 'container-toggle' : ''"
-		@enter="enter"
-		@after-enter="afterEnter"
-		@leave="leave"
-		@after-leave="afterLeave"
-	>
-		<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
-			<slot></slot>
-			<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
-				<span>{{ $ts.showMore }}</span>
-			</button>
-		</div>
-	</transition>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-	props: {
-		showHeader: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-		thin: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		naked: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		foldable: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		expanded: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-		scrollable: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		maxHeight: {
-			type: Number,
-			required: false,
-			default: null,
-		},
-	},
-	data() {
-		return {
-			showBody: this.expanded,
-			omitted: null,
-			ignoreOmit: false,
-		};
-	},
-	mounted() {
-		this.$watch('showBody', showBody => {
-			const headerHeight = this.showHeader ? this.$refs.header.offsetHeight : 0;
-			this.$el.style.minHeight = `${headerHeight}px`;
-			if (showBody) {
-				this.$el.style.flexBasis = 'auto';
-			} else {
-				this.$el.style.flexBasis = `${headerHeight}px`;
-			}
-		}, {
-			immediate: true,
-		});
-
-		this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
-
-		const calcOmit = () => {
-			if (this.omitted || this.ignoreOmit || this.maxHeight == null) return;
-			const height = this.$refs.content.offsetHeight;
-			this.omitted = height > this.maxHeight;
-		};
-
-		calcOmit();
-		new ResizeObserver((entries, observer) => {
-			calcOmit();
-		}).observe(this.$refs.content);
-	},
-	methods: {
-		toggleContent(show: boolean) {
-			if (!this.foldable) return;
-			this.showBody = show;
-		},
-
-		enter(el) {
-			const elementHeight = el.getBoundingClientRect().height;
-			el.style.height = 0;
-			el.offsetHeight; // reflow
-			el.style.height = elementHeight + 'px';
-		},
-		afterEnter(el) {
-			el.style.height = null;
-		},
-		leave(el) {
-			const elementHeight = el.getBoundingClientRect().height;
-			el.style.height = elementHeight + 'px';
-			el.offsetHeight; // reflow
-			el.style.height = 0;
-		},
-		afterLeave(el) {
-			el.style.height = null;
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.container-toggle-enter-active, .container-toggle-leave-active {
-	overflow-y: hidden;
-	transition: opacity 0.5s, height 0.5s !important;
-}
-.container-toggle-enter-from {
-	opacity: 0;
-}
-.container-toggle-leave-to {
-	opacity: 0;
-}
-
-.ukygtjoj {
-	position: relative;
-	overflow: clip;
-	contain: content;
-
-	&.naked {
-		background: transparent !important;
-		box-shadow: none !important;
-	}
-
-	&.scrollable {
-		display: flex;
-		flex-direction: column;
-
-		> .content {
-			overflow: auto;
-		}
-	}
-
-	> header {
-		position: sticky;
-		top: var(--stickyTop, 0px);
-		left: 0;
-		color: var(--panelHeaderFg);
-		background: var(--panelHeaderBg);
-		border-bottom: solid 0.5px var(--panelHeaderDivider);
-		z-index: 2;
-		line-height: 1.4em;
-
-		> .title {
-			margin: 0;
-			padding: 12px 16px;
-
-			> ::v-deep(i) {
-				margin-right: 6px;
-			}
-
-			&:empty {
-				display: none;
-			}
-		}
-
-		> .sub {
-			position: absolute;
-			z-index: 2;
-			top: 0;
-			right: 0;
-			height: 100%;
-
-			> ::v-deep(button) {
-				width: 42px;
-				height: 100%;
-			}
-		}
-	}
-
-	> .content {
-		--stickyTop: 0px;
-
-		&.omitted {
-			position: relative;
-			max-height: var(--maxHeight);
-			overflow: hidden;
-
-			> .fade {
-				display: block;
-				position: absolute;
-				z-index: 10;
-				bottom: 0;
-				left: 0;
-				width: 100%;
-				height: 64px;
-				background: linear-gradient(0deg, var(--panel), var(--X15));
-
-				> span {
-					display: inline-block;
-					background: var(--panel);
-					padding: 6px 10px;
-					font-size: 0.8em;
-					border-radius: 999px;
-					box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-				}
-
-				&:hover {
-					> span {
-						background: var(--panelHighlight);
-					}
-				}
-			}
-		}
-	}
-
-	&.max-width_380px, &.thin {
-		> header {
-			> .title {
-				padding: 8px 10px;
-				font-size: 0.9em;
-			}
-		}
-
-		> .content {
-		}
-	}
-}
-
-@container (max-width: 380px) {
-	.ukygtjoj {
-		> header {
-			> .title {
-				padding: 8px 10px;
-				font-size: 0.9em;
-			}
-		}
-	}
-}
-
-._forceContainerFull_ .ukygtjoj {
-	> header {
-		> .title {
-			padding: 12px 16px !important;
-		}
-	}
-}
-
-._forceContainerFull_.ukygtjoj {
-	> header {
-		> .title {
-			padding: 12px 16px !important;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkContextMenu.vue b/packages/client/src/components/MkContextMenu.vue
deleted file mode 100644
index cfc9502b41..0000000000
--- a/packages/client/src/components/MkContextMenu.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-<transition :name="$store.state.animation ? 'fade' : ''" appear>
-	<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
-		<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
-	</div>
-</transition>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import MkMenu from './MkMenu.vue';
-import { MenuItem } from './types/menu.vue';
-import contains from '@/scripts/contains';
-import * as os from '@/os';
-
-const props = defineProps<{
-	items: MenuItem[];
-	ev: MouseEvent;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-
-let rootEl = $ref<HTMLDivElement>();
-
-let zIndex = $ref<number>(os.claimZIndex('high'));
-
-onMounted(() => {
-	let left = props.ev.pageX + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
-	let top = props.ev.pageY + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
-
-	const width = rootEl.offsetWidth;
-	const height = rootEl.offsetHeight;
-
-	if (left + width - window.pageXOffset > window.innerWidth) {
-		left = window.innerWidth - width + window.pageXOffset;
-	}
-
-	if (top + height - window.pageYOffset > window.innerHeight) {
-		top = window.innerHeight - height + window.pageYOffset;
-	}
-
-	if (top < 0) {
-		top = 0;
-	}
-
-	if (left < 0) {
-		left = 0;
-	}
-
-	rootEl.style.top = `${top}px`;
-	rootEl.style.left = `${left}px`;
-
-	for (const el of Array.from(document.querySelectorAll('body *'))) {
-		el.addEventListener('mousedown', onMousedown);
-	}
-});
-
-onBeforeUnmount(() => {
-	for (const el of Array.from(document.querySelectorAll('body *'))) {
-		el.removeEventListener('mousedown', onMousedown);
-	}
-});
-
-function onMousedown(evt: Event) {
-	if (!contains(rootEl, evt.target) && (rootEl !== evt.target)) emit('closed');
-}
-</script>
-
-<style lang="scss" scoped>
-.nvlagfpb {
-	position: absolute;
-}
-
-.fade-enter-active, .fade-leave-active {
-	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
-	transform-origin: left top;
-}
-
-.fade-enter-from, .fade-leave-to {
-	opacity: 0;
-	transform: scale(0.9);
-}
-</style>
diff --git a/packages/client/src/components/MkCropperDialog.vue b/packages/client/src/components/MkCropperDialog.vue
deleted file mode 100644
index ae18160dea..0000000000
--- a/packages/client/src/components/MkCropperDialog.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<template>
-<XModalWindow
-	ref="dialogEl"
-	:width="800"
-	:height="500"
-	:scroll="false"
-	:with-ok-button="true"
-	@close="cancel()"
-	@ok="ok()"
-	@closed="$emit('closed')"
->
-	<template #header>{{ i18n.ts.cropImage }}</template>
-	<template #default="{ width, height }">
-		<div class="mk-cropper-dialog" :style="`--vw: ${width}px; --vh: ${height}px;`">
-			<Transition name="fade">
-				<div v-if="loading" class="loading">
-					<MkLoading/>
-				</div>
-			</Transition>
-			<div class="container">
-				<img ref="imgEl" :src="imgUrl" style="display: none;" @load="onImageLoad">
-			</div>
-		</div>
-	</template>
-</XModalWindow>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
-import * as misskey from 'misskey-js';
-import Cropper from 'cropperjs';
-import tinycolor from 'tinycolor2';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { defaultStore } from '@/store';
-import { apiUrl } from '@/config';
-import { i18n } from '@/i18n';
-import { getProxiedImageUrl } from '@/scripts/media-proxy';
-
-const emit = defineEmits<{
-	(ev: 'ok', cropped: misskey.entities.DriveFile): void;
-	(ev: 'cancel'): void;
-	(ev: 'closed'): void;
-}>();
-
-const props = defineProps<{
-	file: misskey.entities.DriveFile;
-	aspectRatio: number;
-}>();
-
-const imgUrl = getProxiedImageUrl(props.file.url);
-let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
-let imgEl = $ref<HTMLImageElement>();
-let cropper: Cropper | null = null;
-let loading = $ref(true);
-
-const ok = async () => {
-	const promise = new Promise<misskey.entities.DriveFile>(async (res) => {
-		const croppedCanvas = await cropper?.getCropperSelection()?.$toCanvas();
-		croppedCanvas.toBlob(blob => {
-			const formData = new FormData();
-			formData.append('file', blob);
-			formData.append('i', $i.token);
-			if (defaultStore.state.uploadFolder) {
-				formData.append('folderId', defaultStore.state.uploadFolder);
-			}
-
-			window.fetch(apiUrl + '/drive/files/create', {
-				method: 'POST',
-				body: formData,
-			})
-				.then(response => response.json())
-				.then(f => {
-					res(f);
-				});
-		});
-	});
-
-	os.promiseDialog(promise);
-
-	const f = await promise;
-
-	emit('ok', f);
-	dialogEl.close();
-};
-
-const cancel = () => {
-	emit('cancel');
-	dialogEl.close();
-};
-
-const onImageLoad = () => {
-	loading = false;
-
-	if (cropper) {
-		cropper.getCropperImage()!.$center('contain');
-		cropper.getCropperSelection()!.$center();
-	}
-};
-
-onMounted(() => {
-	cropper = new Cropper(imgEl, {
-	});
-
-	const computedStyle = getComputedStyle(document.documentElement);
-
-	const selection = cropper.getCropperSelection()!;
-	selection.themeColor = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
-	selection.aspectRatio = props.aspectRatio;
-	selection.initialAspectRatio = props.aspectRatio;
-	selection.outlined = true;
-
-	window.setTimeout(() => {
-		cropper.getCropperImage()!.$center('contain');
-		selection.$center();
-	}, 100);
-
-	// モーダルオープンアニメーションが終わったあとで再度調整
-	window.setTimeout(() => {
-		cropper.getCropperImage()!.$center('contain');
-		selection.$center();
-	}, 500);
-});
-</script>
-
-<style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
-	transition: opacity 0.5s ease 0.5s;
-}
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-
-.mk-cropper-dialog {
-	display: flex;
-	flex-direction: column;
-	width: var(--vw);
-	height: var(--vh);
-	position: relative;
-
-	> .loading {
-		position: absolute;
-		z-index: 10;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		-webkit-backdrop-filter: var(--blur, blur(10px));
-		backdrop-filter: var(--blur, blur(10px));
-		background: rgba(0, 0, 0, 0.5);
-	}
-
-	> .container {
-		flex: 1;
-		width: 100%;
-		height: 100%;
-
-		> ::v-deep(cropper-canvas) {
-			width: 100%;
-			height: 100%;
-
-			> cropper-selection > cropper-handle[action="move"] {
-				background: transparent;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkCwButton.vue b/packages/client/src/components/MkCwButton.vue
deleted file mode 100644
index ee611921ef..0000000000
--- a/packages/client/src/components/MkCwButton.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-<button class="nrvgflfu _button" @click="toggle">
-	<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
-	<span v-if="!modelValue">{{ label }}</span>
-</button>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { length } from 'stringz';
-import * as misskey from 'misskey-js';
-import { concat } from '@/scripts/array';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	modelValue: boolean;
-	note: misskey.entities.Note;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'update:modelValue', v: boolean): void;
-}>();
-
-const label = computed(() => {
-	return concat([
-		props.note.text ? [i18n.t('_cw.chars', { count: length(props.note.text) })] : [],
-		props.note.files && props.note.files.length !== 0 ? [i18n.t('_cw.files', { count: props.note.files.length })] : [],
-		props.note.poll != null ? [i18n.ts.poll] : [],
-	] as string[][]).join(' / ');
-});
-
-const toggle = () => {
-	emit('update:modelValue', !props.modelValue);
-};
-</script>
-
-<style lang="scss" scoped>
-.nrvgflfu {
-	display: inline-block;
-	padding: 4px 8px;
-	font-size: 0.7em;
-	color: var(--cwFg);
-	background: var(--cwBg);
-	border-radius: 2px;
-
-	&:hover {
-		background: var(--cwHoverBg);
-	}
-
-	> span {
-		margin-left: 4px;
-
-		&:before {
-			content: '(';
-		}
-
-		&:after {
-			content: ')';
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkDateSeparatedList.vue b/packages/client/src/components/MkDateSeparatedList.vue
deleted file mode 100644
index 1f88bdf137..0000000000
--- a/packages/client/src/components/MkDateSeparatedList.vue
+++ /dev/null
@@ -1,189 +0,0 @@
-<script lang="ts">
-import { defineComponent, h, PropType, TransitionGroup } from 'vue';
-import MkAd from '@/components/global/MkAd.vue';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
-
-export default defineComponent({
-	props: {
-		items: {
-			type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>,
-			required: true,
-		},
-		direction: {
-			type: String,
-			required: false,
-			default: 'down',
-		},
-		reversed: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		noGap: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		ad: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-
-	setup(props, { slots, expose }) {
-		function getDateText(time: string) {
-			const date = new Date(time).getDate();
-			const month = new Date(time).getMonth() + 1;
-			return i18n.t('monthAndDay', {
-				month: month.toString(),
-				day: date.toString(),
-			});
-		}
-
-		if (props.items.length === 0) return;
-
-		const renderChildren = () => props.items.map((item, i) => {
-			if (!slots || !slots.default) return;
-
-			const el = slots.default({
-				item: item,
-			})[0];
-			if (el.key == null && item.id) el.key = item.id;
-
-			if (
-				i !== props.items.length - 1 &&
-				new Date(item.createdAt).getDate() !== new Date(props.items[i + 1].createdAt).getDate()
-			) {
-				const separator = h('div', {
-					class: 'separator',
-					key: item.id + ':separator',
-				}, h('p', {
-					class: 'date',
-				}, [
-					h('span', [
-						h('i', {
-							class: 'ti ti-chevron-up icon',
-						}),
-						getDateText(item.createdAt),
-					]),
-					h('span', [
-						getDateText(props.items[i + 1].createdAt),
-						h('i', {
-							class: 'ti ti-chevron-down icon',
-						}),
-					]),
-				]));
-
-				return [el, separator];
-			} else {
-				if (props.ad && item._shouldInsertAd_) {
-					return [h(MkAd, {
-						class: 'a', // advertiseの意(ブロッカー対策)
-						key: item.id + ':ad',
-						prefer: ['horizontal', 'horizontal-big'],
-					}), el];
-				} else {
-					return el;
-				}
-			}
-		});
-
-		return () => h(
-			defaultStore.state.animation ? TransitionGroup : 'div',
-			defaultStore.state.animation ? {
-				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
-				name: 'list',
-				tag: 'div',
-				'data-direction': props.direction,
-				'data-reversed': props.reversed ? 'true' : 'false',
-			} : {
-				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
-			},
-			{ default: renderChildren });
-	},
-});
-</script>
-
-<style lang="scss">
-.sqadhkmv {
-	container-type: inline-size;
-
-	> *:empty {
-		display: none;
-	}
-
-	> *:not(:last-child) {
-		margin-bottom: var(--margin);
-	}
-
-	> .list-move {
-		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
-	}
-
-	> .list-enter-active {
-		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
-	}
-
-	&[data-direction="up"] {
-		> .list-enter-from {
-			opacity: 0;
-			transform: translateY(64px);
-		}
-	}
-
-	&[data-direction="down"] {
-		> .list-enter-from {
-			opacity: 0;
-			transform: translateY(-64px);
-		}
-	}
-
-	> .separator {
-		text-align: center;
-
-		> .date {
-			display: inline-block;
-			position: relative;
-			margin: 0;
-			padding: 0 16px;
-			line-height: 32px;
-			text-align: center;
-			font-size: 12px;
-			color: var(--dateLabelFg);
-
-			> span {
-				&:first-child {
-					margin-right: 8px;
-
-					> .icon {
-						margin-right: 8px;
-					}
-				}
-
-				&:last-child {
-					margin-left: 8px;
-
-					> .icon {
-						margin-left: 8px;
-					}
-				}
-			}
-		}
-	}
-
-	&.noGap {
-		> * {
-			margin: 0 !important;
-			border: none;
-			border-radius: 0;
-			box-shadow: none;
-
-			&:not(:last-child) {
-				border-bottom: solid 0.5px var(--divider);
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
deleted file mode 100644
index 374ecd8abf..0000000000
--- a/packages/client/src/components/MkDialog.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<template>
-<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="emit('closed')">
-	<div class="mk-dialog">
-		<div v-if="icon" class="icon">
-			<i :class="icon"></i>
-		</div>
-		<div v-else-if="!input && !select" class="icon" :class="type">
-			<i v-if="type === 'success'" class="ti ti-check"></i>
-			<i v-else-if="type === 'error'" class="ti ti-circle-x"></i>
-			<i v-else-if="type === 'warning'" class="ti ti-alert-triangle"></i>
-			<i v-else-if="type === 'info'" class="ti ti-info-circle"></i>
-			<i v-else-if="type === 'question'" class="ti ti-question-circle"></i>
-			<MkLoading v-else-if="type === 'waiting'" :em="true"/>
-		</div>
-		<header v-if="title"><Mfm :text="title"/></header>
-		<div v-if="text" class="body"><Mfm :text="text"/></div>
-		<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" @keydown="onInputKeydown">
-			<template v-if="input.type === 'password'" #prefix><i class="ti ti-lock"></i></template>
-		</MkInput>
-		<MkSelect v-if="select" v-model="selectedValue" autofocus>
-			<template v-if="select.items">
-				<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
-			</template>
-			<template v-else>
-				<optgroup v-for="groupedItem in select.groupedItems" :label="groupedItem.label">
-					<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
-				</optgroup>
-			</template>
-		</MkSelect>
-		<div v-if="(showOkButton || showCancelButton) && !actions" class="buttons">
-			<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt }}</MkButton>
-			<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
-		</div>
-		<div v-if="actions" class="buttons">
-			<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); close(); }">{{ action.text }}</MkButton>
-		</div>
-	</div>
-</MkModal>
-</template>
-
-<script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
-import { i18n } from '@/i18n';
-
-type Input = {
-	type: HTMLInputElement['type'];
-	placeholder?: string | null;
-	default: any | null;
-};
-
-type Select = {
-	items: {
-		value: string;
-		text: string;
-	}[];
-	groupedItems: {
-		label: string;
-		items: {
-			value: string;
-			text: string;
-		}[];
-	}[];
-	default: string | null;
-};
-
-const props = withDefaults(defineProps<{
-	type?: 'success' | 'error' | 'warning' | 'info' | 'question' | 'waiting';
-	title: string;
-	text?: string;
-	input?: Input;
-	select?: Select;
-	icon?: string;
-	actions?: {
-		text: string;
-		primary?: boolean,
-		callback: (...args: any[]) => void;
-	}[];
-	showOkButton?: boolean;
-	showCancelButton?: boolean;
-	cancelableByBgClick?: boolean;
-}>(), {
-	type: 'info',
-	showOkButton: true,
-	showCancelButton: false,
-	cancelableByBgClick: true,
-});
-
-const emit = defineEmits<{
-	(ev: 'done', v: { canceled: boolean; result: any }): void;
-	(ev: 'closed'): void;
-}>();
-
-const modal = ref<InstanceType<typeof MkModal>>();
-
-const inputValue = ref(props.input?.default || null);
-const selectedValue = ref(props.select?.default || null);
-
-function done(canceled: boolean, result?) {
-	emit('done', { canceled, result });
-	modal.value?.close();
-}
-
-async function ok() {
-	if (!props.showOkButton) return;
-
-	const result =
-		props.input ? inputValue.value :
-		props.select ? selectedValue.value :
-		true;
-	done(false, result);
-}
-
-function cancel() {
-	done(true);
-}
-/*
-function onBgClick() {
-	if (props.cancelableByBgClick) cancel();
-}
-*/
-function onKeydown(evt: KeyboardEvent) {
-	if (evt.key === 'Escape') cancel();
-}
-
-function onInputKeydown(evt: KeyboardEvent) {
-	if (evt.key === 'Enter') {
-		evt.preventDefault();
-		evt.stopPropagation();
-		ok();
-	}
-}
-
-onMounted(() => {
-	document.addEventListener('keydown', onKeydown);
-});
-
-onBeforeUnmount(() => {
-	document.removeEventListener('keydown', onKeydown);
-});
-</script>
-
-<style lang="scss" scoped>
-.mk-dialog {
-	position: relative;
-	padding: 32px;
-	min-width: 320px;
-	max-width: 480px;
-	box-sizing: border-box;
-	text-align: center;
-	background: var(--panel);
-	border-radius: var(--radius);
-
-	> .icon {
-		font-size: 24px;
-
-		&.info {
-			color: #55c4dd;
-		}
-
-		&.success {
-			color: var(--success);
-		}
-
-		&.error {
-			color: var(--error);
-		}
-
-		&.warning {
-			color: var(--warn);
-		}
-
-		> * {
-			display: block;
-			margin: 0 auto;
-		}
-
-		& + header {
-			margin-top: 8px;
-		}
-	}
-
-	> header {
-		margin: 0 0 8px 0;
-		font-weight: bold;
-		font-size: 1.1em;
-
-		& + .body {
-			margin-top: 8px;
-		}
-	}
-
-	> .body {
-		margin: 16px 0 0 0;
-	}
-
-	> .buttons {
-		margin-top: 16px;
-
-		> * {
-			margin: 0 8px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkDigitalClock.vue b/packages/client/src/components/MkDigitalClock.vue
deleted file mode 100644
index 9ed8d63d19..0000000000
--- a/packages/client/src/components/MkDigitalClock.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-<span class="zjobosdg">
-	<span v-text="hh"></span>
-	<span class="colon" :class="{ showColon }">:</span>
-	<span v-text="mm"></span>
-	<span v-if="showS" class="colon" :class="{ showColon }">:</span>
-	<span v-if="showS" v-text="ss"></span>
-	<span v-if="showMs" class="colon" :class="{ showColon }">:</span>
-	<span v-if="showMs" v-text="ms"></span>
-</span>
-</template>
-
-<script lang="ts" setup>
-import { onUnmounted, ref, watch } from 'vue';
-
-const props = withDefaults(defineProps<{
-	showS?: boolean;
-	showMs?: boolean;
-	offset?: number;
-}>(), {
-	showS: true,
-	showMs: false,
-	offset: 0 - new Date().getTimezoneOffset(),
-});
-
-let intervalId;
-const hh = ref('');
-const mm = ref('');
-const ss = ref('');
-const ms = ref('');
-const showColon = ref(false);
-let prevSec: number | null = null;
-
-watch(showColon, (v) => {
-	if (v) {
-		window.setTimeout(() => {
-			showColon.value = false;
-		}, 30);
-	}
-});
-
-const tick = () => {
-	const now = new Date();
-	now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
-	hh.value = now.getHours().toString().padStart(2, '0');
-	mm.value = now.getMinutes().toString().padStart(2, '0');
-	ss.value = now.getSeconds().toString().padStart(2, '0');
-	ms.value = Math.floor(now.getMilliseconds() / 10).toString().padStart(2, '0');
-	if (now.getSeconds() !== prevSec) showColon.value = true;
-	prevSec = now.getSeconds();
-};
-
-tick();
-
-watch(() => props.showMs, () => {
-	if (intervalId) window.clearInterval(intervalId);
-	intervalId = window.setInterval(tick, props.showMs ? 10 : 1000);
-}, { immediate: true });
-
-onUnmounted(() => {
-	window.clearInterval(intervalId);
-});
-</script>
-
-<style lang="scss" scoped>
-.zjobosdg {
-	> .colon {
-		opacity: 0;
-		transition: opacity 1s ease;
-
-		&.showColon {
-			opacity: 1;
-			transition: opacity 0s;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkDrive.file.vue b/packages/client/src/components/MkDrive.file.vue
deleted file mode 100644
index 8c17c0530a..0000000000
--- a/packages/client/src/components/MkDrive.file.vue
+++ /dev/null
@@ -1,334 +0,0 @@
-<template>
-<div
-	class="ncvczrfv"
-	:class="{ isSelected }"
-	draggable="true"
-	:title="title"
-	@click="onClick"
-	@contextmenu.stop="onContextmenu"
-	@dragstart="onDragstart"
-	@dragend="onDragend"
->
-	<div v-if="$i?.avatarId == file.id" class="label">
-		<img src="/client-assets/label.svg"/>
-		<p>{{ i18n.ts.avatar }}</p>
-	</div>
-	<div v-if="$i?.bannerId == file.id" class="label">
-		<img src="/client-assets/label.svg"/>
-		<p>{{ i18n.ts.banner }}</p>
-	</div>
-	<div v-if="file.isSensitive" class="label red">
-		<img src="/client-assets/label-red.svg"/>
-		<p>{{ i18n.ts.nsfw }}</p>
-	</div>
-
-	<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
-
-	<p class="name">
-		<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
-		<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
-	</p>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineAsyncComponent, ref } from 'vue';
-import * as Misskey from 'misskey-js';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import bytes from '@/filters/bytes';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-
-const props = withDefaults(defineProps<{
-	file: Misskey.entities.DriveFile;
-	isSelected?: boolean;
-	selectMode?: boolean;
-}>(), {
-	isSelected: false,
-	selectMode: false,
-});
-
-const emit = defineEmits<{
-	(ev: 'chosen', r: Misskey.entities.DriveFile): void;
-	(ev: 'dragstart'): void;
-	(ev: 'dragend'): void;
-}>();
-
-const isDragging = ref(false);
-
-const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
-
-function getMenu() {
-	return [{
-		text: i18n.ts.rename,
-		icon: 'ti ti-forms',
-		action: rename,
-	}, {
-		text: props.file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
-		icon: props.file.isSensitive ? 'ti ti-eye' : 'ti ti-eye-off',
-		action: toggleSensitive,
-	}, {
-		text: i18n.ts.describeFile,
-		icon: 'ti ti-text-caption',
-		action: describe,
-	}, null, {
-		text: i18n.ts.copyUrl,
-		icon: 'ti ti-link',
-		action: copyUrl,
-	}, {
-		type: 'a',
-		href: props.file.url,
-		target: '_blank',
-		text: i18n.ts.download,
-		icon: 'ti ti-download',
-		download: props.file.name,
-	}, null, {
-		text: i18n.ts.delete,
-		icon: 'ti ti-trash',
-		danger: true,
-		action: deleteFile,
-	}];
-}
-
-function onClick(ev: MouseEvent) {
-	if (props.selectMode) {
-		emit('chosen', props.file);
-	} else {
-		os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
-	}
-}
-
-function onContextmenu(ev: MouseEvent) {
-	os.contextMenu(getMenu(), ev);
-}
-
-function onDragstart(ev: DragEvent) {
-	if (ev.dataTransfer) {
-		ev.dataTransfer.effectAllowed = 'move';
-		ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
-	}
-	isDragging.value = true;
-
-	emit('dragstart');
-}
-
-function onDragend() {
-	isDragging.value = false;
-	emit('dragend');
-}
-
-function rename() {
-	os.inputText({
-		title: i18n.ts.renameFile,
-		placeholder: i18n.ts.inputNewFileName,
-		default: props.file.name,
-	}).then(({ canceled, result: name }) => {
-		if (canceled) return;
-		os.api('drive/files/update', {
-			fileId: props.file.id,
-			name: name,
-		});
-	});
-}
-
-function describe() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
-		default: props.file.comment != null ? props.file.comment : '',
-		file: props.file,
-	}, {
-		done: caption => {
-			os.api('drive/files/update', {
-				fileId: props.file.id,
-				comment: caption.length === 0 ? null : caption,
-			});
-		},
-	}, 'closed');
-}
-
-function toggleSensitive() {
-	os.api('drive/files/update', {
-		fileId: props.file.id,
-		isSensitive: !props.file.isSensitive,
-	});
-}
-
-function copyUrl() {
-	copyToClipboard(props.file.url);
-	os.success();
-}
-/*
-function addApp() {
-	alert('not implemented yet');
-}
-*/
-async function deleteFile() {
-	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('driveFileDeleteConfirm', { name: props.file.name }),
-	});
-
-	if (canceled) return;
-	os.api('drive/files/delete', {
-		fileId: props.file.id,
-	});
-}
-</script>
-
-<style lang="scss" scoped>
-.ncvczrfv {
-	position: relative;
-	padding: 8px 0 0 0;
-	min-height: 180px;
-	border-radius: 8px;
-
-	&, * {
-		cursor: pointer;
-	}
-
-	> * {
-		pointer-events: none;
-	}
-
-	&:hover {
-		background: rgba(#000, 0.05);
-
-		> .label {
-			&:before,
-			&:after {
-				background: #0b65a5;
-			}
-
-			&.red {
-				&:before,
-				&:after {
-					background: #c12113;
-				}
-			}
-		}
-	}
-
-	&:active {
-		background: rgba(#000, 0.1);
-
-		> .label {
-			&:before,
-			&:after {
-				background: #0b588c;
-			}
-
-			&.red {
-				&:before,
-				&:after {
-					background: #ce2212;
-				}
-			}
-		}
-	}
-
-	&.isSelected {
-		background: var(--accent);
-
-		&:hover {
-			background: var(--accentLighten);
-		}
-
-		&:active {
-			background: var(--accentDarken);
-		}
-
-		> .label {
-			&:before,
-			&:after {
-				display: none;
-			}
-		}
-
-		> .name {
-			color: #fff;
-		}
-
-		> .thumbnail {
-			color: #fff;
-		}
-	}
-
-	> .label {
-		position: absolute;
-		top: 0;
-		left: 0;
-		pointer-events: none;
-
-		&:before,
-		&:after {
-			content: "";
-			display: block;
-			position: absolute;
-			z-index: 1;
-			background: #0c7ac9;
-		}
-
-		&:before {
-			top: 0;
-			left: 57px;
-			width: 28px;
-			height: 8px;
-		}
-
-		&:after {
-			top: 57px;
-			left: 0;
-			width: 8px;
-			height: 28px;
-		}
-
-		&.red {
-			&:before,
-			&:after {
-				background: #c12113;
-			}
-		}
-
-		> img {
-			position: absolute;
-			z-index: 2;
-			top: 0;
-			left: 0;
-		}
-
-		> p {
-			position: absolute;
-			z-index: 3;
-			top: 19px;
-			left: -28px;
-			width: 120px;
-			margin: 0;
-			text-align: center;
-			line-height: 28px;
-			color: #fff;
-			transform: rotate(-45deg);
-		}
-	}
-
-	> .thumbnail {
-		width: 110px;
-		height: 110px;
-		margin: auto;
-	}
-
-	> .name {
-		display: block;
-		margin: 4px 0 0 0;
-		font-size: 0.8em;
-		text-align: center;
-		word-break: break-all;
-		color: var(--fg);
-		overflow: hidden;
-
-		> .ext {
-			opacity: 0.5;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkDrive.folder.vue b/packages/client/src/components/MkDrive.folder.vue
deleted file mode 100644
index 82653ca0b4..0000000000
--- a/packages/client/src/components/MkDrive.folder.vue
+++ /dev/null
@@ -1,330 +0,0 @@
-<template>
-<div
-	class="rghtznwe"
-	:class="{ draghover }"
-	draggable="true"
-	:title="title"
-	@click="onClick"
-	@contextmenu.stop="onContextmenu"
-	@mouseover="onMouseover"
-	@mouseout="onMouseout"
-	@dragover.prevent.stop="onDragover"
-	@dragenter.prevent="onDragenter"
-	@dragleave="onDragleave"
-	@drop.prevent.stop="onDrop"
-	@dragstart="onDragstart"
-	@dragend="onDragend"
->
-	<p class="name">
-		<template v-if="hover"><i class="ti ti-folder ti-fw"></i></template>
-		<template v-if="!hover"><i class="ti ti-folder ti-fw"></i></template>
-		{{ folder.name }}
-	</p>
-	<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
-		{{ i18n.ts.uploadFolder }}
-	</p>
-	<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineAsyncComponent, ref } from 'vue';
-import * as Misskey from 'misskey-js';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
-
-const props = withDefaults(defineProps<{
-	folder: Misskey.entities.DriveFolder;
-	isSelected?: boolean;
-	selectMode?: boolean;
-}>(), {
-	isSelected: false,
-	selectMode: false,
-});
-
-const emit = defineEmits<{
-	(ev: 'chosen', v: Misskey.entities.DriveFolder): void;
-	(ev: 'move', v: Misskey.entities.DriveFolder): void;
-	(ev: 'upload', file: File, folder: Misskey.entities.DriveFolder);
-	(ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
-	(ev: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
-	(ev: 'dragstart'): void;
-	(ev: 'dragend'): void;
-}>();
-
-const hover = ref(false);
-const draghover = ref(false);
-const isDragging = ref(false);
-
-const title = computed(() => props.folder.name);
-
-function checkboxClicked() {
-	emit('chosen', props.folder);
-}
-
-function onClick() {
-	emit('move', props.folder);
-}
-
-function onMouseover() {
-	hover.value = true;
-}
-
-function onMouseout() {
-	hover.value = false;
-}
-
-function onDragover(ev: DragEvent) {
-	if (!ev.dataTransfer) return;
-
-	// 自分自身がドラッグされている場合
-	if (isDragging.value) {
-		// 自分自身にはドロップさせない
-		ev.dataTransfer.dropEffect = 'none';
-		return;
-	}
-
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
-
-	if (isFile || isDriveFile || isDriveFolder) {
-		switch (ev.dataTransfer.effectAllowed) {
-			case 'all':
-			case 'uninitialized':
-			case 'copy': 
-			case 'copyLink': 
-			case 'copyMove': 
-				ev.dataTransfer.dropEffect = 'copy';
-				break;
-			case 'linkMove':
-			case 'move':
-				ev.dataTransfer.dropEffect = 'move';
-				break;
-			default:
-				ev.dataTransfer.dropEffect = 'none';
-				break;
-		}
-	} else {
-		ev.dataTransfer.dropEffect = 'none';
-	}
-}
-
-function onDragenter() {
-	if (!isDragging.value) draghover.value = true;
-}
-
-function onDragleave() {
-	draghover.value = false;
-}
-
-function onDrop(ev: DragEvent) {
-	draghover.value = false;
-
-	if (!ev.dataTransfer) return;
-
-	// ファイルだったら
-	if (ev.dataTransfer.files.length > 0) {
-		for (const file of Array.from(ev.dataTransfer.files)) {
-			emit('upload', file, props.folder);
-		}
-		return;
-	}
-
-	//#region ドライブのファイル
-	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
-		const file = JSON.parse(driveFile);
-		emit('removeFile', file.id);
-		os.api('drive/files/update', {
-			fileId: file.id,
-			folderId: props.folder.id,
-		});
-	}
-	//#endregion
-
-	//#region ドライブのフォルダ
-	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
-	if (driveFolder != null && driveFolder !== '') {
-		const folder = JSON.parse(driveFolder);
-
-		// 移動先が自分自身ならreject
-		if (folder.id === props.folder.id) return;
-
-		emit('removeFolder', folder.id);
-		os.api('drive/folders/update', {
-			folderId: folder.id,
-			parentId: props.folder.id,
-		}).then(() => {
-			// noop
-		}).catch(err => {
-			switch (err) {
-				case 'detected-circular-definition':
-					os.alert({
-						title: i18n.ts.unableToProcess,
-						text: i18n.ts.circularReferenceFolder,
-					});
-					break;
-				default:
-					os.alert({
-						type: 'error',
-						text: i18n.ts.somethingHappened,
-					});
-			}
-		});
-	}
-	//#endregion
-}
-
-function onDragstart(ev: DragEvent) {
-	if (!ev.dataTransfer) return;
-
-	ev.dataTransfer.effectAllowed = 'move';
-	ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FOLDER_, JSON.stringify(props.folder));
-	isDragging.value = true;
-
-	// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
-	// (=あなたの子供が、ドラッグを開始しましたよ)
-	emit('dragstart');
-}
-
-function onDragend() {
-	isDragging.value = false;
-	emit('dragend');
-}
-
-function go() {
-	emit('move', props.folder.id);
-}
-
-function rename() {
-	os.inputText({
-		title: i18n.ts.renameFolder,
-		placeholder: i18n.ts.inputNewFolderName,
-		default: props.folder.name,
-	}).then(({ canceled, result: name }) => {
-		if (canceled) return;
-		os.api('drive/folders/update', {
-			folderId: props.folder.id,
-			name: name,
-		});
-	});
-}
-
-function deleteFolder() {
-	os.api('drive/folders/delete', {
-		folderId: props.folder.id,
-	}).then(() => {
-		if (defaultStore.state.uploadFolder === props.folder.id) {
-			defaultStore.set('uploadFolder', null);
-		}
-	}).catch(err => {
-		switch (err.id) {
-			case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-				os.alert({
-					type: 'error',
-					title: i18n.ts.unableToDelete,
-					text: i18n.ts.hasChildFilesOrFolders,
-				});
-				break;
-			default:
-				os.alert({
-					type: 'error',
-					text: i18n.ts.unableToDelete,
-				});
-		}
-	});
-}
-
-function setAsUploadFolder() {
-	defaultStore.set('uploadFolder', props.folder.id);
-}
-
-function onContextmenu(ev: MouseEvent) {
-	os.contextMenu([{
-		text: i18n.ts.openInWindow,
-		icon: 'ti ti-app-window',
-		action: () => {
-			os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), {
-				initialFolder: props.folder,
-			}, {
-			}, 'closed');
-		},
-	}, null, {
-		text: i18n.ts.rename,
-		icon: 'ti ti-forms',
-		action: rename,
-	}, null, {
-		text: i18n.ts.delete,
-		icon: 'ti ti-trash',
-		danger: true,
-		action: deleteFolder,
-	}], ev);
-}
-</script>
-
-<style lang="scss" scoped>
-.rghtznwe {
-	position: relative;
-	padding: 8px;
-	height: 64px;
-	background: var(--driveFolderBg);
-	border-radius: 4px;
-
-	&, * {
-		cursor: pointer;
-	}
-
-	*:not(.checkbox) {
-		pointer-events: none;
-	}
-
-	> .checkbox {
-		position: absolute;
-		bottom: 8px;
-		right: 8px;
-		width: 16px;
-		height: 16px;
-		background: #fff;
-		border: solid 1px #000;
-
-		&.checked {
-			background: var(--accent);
-		}
-	}
-
-	&.draghover {
-		&:after {
-			content: "";
-			pointer-events: none;
-			position: absolute;
-			top: -4px;
-			right: -4px;
-			bottom: -4px;
-			left: -4px;
-			border: 2px dashed var(--focus);
-			border-radius: 4px;
-		}
-	}
-
-	> .name {
-		margin: 0;
-		font-size: 0.9em;
-		color: var(--desktopDriveFolderFg);
-
-		> i {
-			margin-right: 4px;
-			margin-left: 2px;
-			text-align: left;
-		}
-	}
-
-	> .upload {
-		margin: 4px 4px;
-		font-size: 0.8em;
-		text-align: right;
-		color: var(--desktopDriveFolderFg);
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkDrive.navFolder.vue b/packages/client/src/components/MkDrive.navFolder.vue
deleted file mode 100644
index dbbfef5f05..0000000000
--- a/packages/client/src/components/MkDrive.navFolder.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-<div class="drylbebk"
-	:class="{ draghover }"
-	@click="onClick"
-	@dragover.prevent.stop="onDragover"
-	@dragenter="onDragenter"
-	@dragleave="onDragleave"
-	@drop.stop="onDrop"
->
-	<i v-if="folder == null" class="ti ti-cloud"></i>
-	<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import * as Misskey from 'misskey-js';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	folder?: Misskey.entities.DriveFolder;
-	parentFolder: Misskey.entities.DriveFolder | null;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'move', v?: Misskey.entities.DriveFolder): void;
-	(ev: 'upload', file: File, folder?: Misskey.entities.DriveFolder | null): void;
-	(ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
-	(ev: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
-}>();
-
-const hover = ref(false);
-const draghover = ref(false);
-
-function onClick() {
-	emit('move', props.folder);
-}
-
-function onMouseover() {
-	hover.value = true;
-}
-
-function onMouseout() {
-	hover.value = false;
-}
-
-function onDragover(ev: DragEvent) {
-	if (!ev.dataTransfer) return;
-
-	// このフォルダがルートかつカレントディレクトリならドロップ禁止
-	if (props.folder == null && props.parentFolder == null) {
-		ev.dataTransfer.dropEffect = 'none';
-	}
-
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
-
-	if (isFile || isDriveFile || isDriveFolder) {
-		switch (ev.dataTransfer.effectAllowed) {
-			case 'all':
-			case 'uninitialized':
-			case 'copy': 
-			case 'copyLink': 
-			case 'copyMove': 
-				ev.dataTransfer.dropEffect = 'copy';
-				break;
-			case 'linkMove':
-			case 'move':
-				ev.dataTransfer.dropEffect = 'move';
-				break;
-			default:
-				ev.dataTransfer.dropEffect = 'none';
-				break;
-		}
-	} else {
-		ev.dataTransfer.dropEffect = 'none';
-	}
-
-	return false;
-}
-
-function onDragenter() {
-	if (props.folder || props.parentFolder) draghover.value = true;
-}
-
-function onDragleave() {
-	if (props.folder || props.parentFolder) draghover.value = false;
-}
-
-function onDrop(ev: DragEvent) {
-	draghover.value = false;
-
-	if (!ev.dataTransfer) return;
-
-	// ファイルだったら
-	if (ev.dataTransfer.files.length > 0) {
-		for (const file of Array.from(ev.dataTransfer.files)) {
-			emit('upload', file, props.folder);
-		}
-		return;
-	}
-
-	//#region ドライブのファイル
-	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
-		const file = JSON.parse(driveFile);
-		emit('removeFile', file.id);
-		os.api('drive/files/update', {
-			fileId: file.id,
-			folderId: props.folder ? props.folder.id : null,
-		});
-	}
-	//#endregion
-
-	//#region ドライブのフォルダ
-	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
-	if (driveFolder != null && driveFolder !== '') {
-		const folder = JSON.parse(driveFolder);
-		// 移動先が自分自身ならreject
-		if (props.folder && folder.id === props.folder.id) return;
-		emit('removeFolder', folder.id);
-		os.api('drive/folders/update', {
-			folderId: folder.id,
-			parentId: props.folder ? props.folder.id : null,
-		});
-	}
-	//#endregion
-}
-</script>
-
-<style lang="scss" scoped>
-.drylbebk {
-	> * {
-		pointer-events: none;
-	}
-
-	&.draghover {
-		background: #eee;
-	}
-
-	> i {
-		margin-right: 4px;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkDrive.vue b/packages/client/src/components/MkDrive.vue
deleted file mode 100644
index 4053870950..0000000000
--- a/packages/client/src/components/MkDrive.vue
+++ /dev/null
@@ -1,801 +0,0 @@
-<template>
-<div class="yfudmmck">
-	<nav>
-		<div class="path" @contextmenu.prevent.stop="() => {}">
-			<XNavFolder
-				:class="{ current: folder == null }"
-				:parent-folder="folder"
-				@move="move"
-				@upload="upload"
-				@remove-file="removeFile"
-				@remove-folder="removeFolder"
-			/>
-			<template v-for="f in hierarchyFolders">
-				<span class="separator"><i class="ti ti-chevron-right"></i></span>
-				<XNavFolder
-					:folder="f"
-					:parent-folder="folder"
-					@move="move"
-					@upload="upload"
-					@remove-file="removeFile"
-					@remove-folder="removeFolder"
-				/>
-			</template>
-			<span v-if="folder != null" class="separator"><i class="ti ti-chevron-right"></i></span>
-			<span v-if="folder != null" class="folder current">{{ folder.name }}</span>
-		</div>
-		<button class="menu _button" @click="showMenu"><i class="ti ti-dots"></i></button>
-	</nav>
-	<div
-		ref="main" class="main"
-		:class="{ uploading: uploadings.length > 0, fetching }"
-		@dragover.prevent.stop="onDragover"
-		@dragenter="onDragenter"
-		@dragleave="onDragleave"
-		@drop.prevent.stop="onDrop"
-		@contextmenu.stop="onContextmenu"
-	>
-		<div ref="contents" class="contents">
-			<div v-show="folders.length > 0" ref="foldersContainer" class="folders">
-				<XFolder
-					v-for="(f, i) in folders"
-					:key="f.id"
-					v-anim="i"
-					class="folder"
-					:folder="f"
-					:select-mode="select === 'folder'"
-					:is-selected="selectedFolders.some(x => x.id === f.id)"
-					@chosen="chooseFolder"
-					@move="move"
-					@upload="upload"
-					@remove-file="removeFile"
-					@remove-folder="removeFolder"
-					@dragstart="isDragSource = true"
-					@dragend="isDragSource = false"
-				/>
-				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div v-for="(n, i) in 16" :key="i" class="padding"></div>
-				<MkButton v-if="moreFolders" ref="moreFolders">{{ i18n.ts.loadMore }}</MkButton>
-			</div>
-			<div v-show="files.length > 0" ref="filesContainer" class="files">
-				<XFile
-					v-for="(file, i) in files"
-					:key="file.id"
-					v-anim="i"
-					class="file"
-					:file="file"
-					:select-mode="select === 'file'"
-					:is-selected="selectedFiles.some(x => x.id === file.id)"
-					@chosen="chooseFile"
-					@dragstart="isDragSource = true"
-					@dragend="isDragSource = false"
-				/>
-				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
-				<div v-for="(n, i) in 16" :key="i" class="padding"></div>
-				<MkButton v-show="moreFiles" ref="loadMoreFiles" @click="fetchMoreFiles">{{ i18n.ts.loadMore }}</MkButton>
-			</div>
-			<div v-if="files.length == 0 && folders.length == 0 && !fetching" class="empty">
-				<p v-if="draghover">{{ i18n.t('empty-draghover') }}</p>
-				<p v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.t('empty-drive-description') }}</p>
-				<p v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</p>
-			</div>
-		</div>
-		<MkLoading v-if="fetching"/>
-	</div>
-	<div v-if="draghover" class="dropzone"></div>
-	<input ref="fileInput" type="file" accept="*/*" multiple tabindex="-1" @change="onChangeFileInput"/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import * as Misskey from 'misskey-js';
-import MkButton from './MkButton.vue';
-import XNavFolder from '@/components/MkDrive.navFolder.vue';
-import XFolder from '@/components/MkDrive.folder.vue';
-import XFile from '@/components/MkDrive.file.vue';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { uploadFile, uploads } from '@/scripts/upload';
-
-const props = withDefaults(defineProps<{
-	initialFolder?: Misskey.entities.DriveFolder;
-	type?: string;
-	multiple?: boolean;
-	select?: 'file' | 'folder' | null;
-}>(), {
-	multiple: false,
-	select: null,
-});
-
-const emit = defineEmits<{
-	(ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
-	(ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
-	(ev: 'move-root'): void;
-	(ev: 'cd', v: Misskey.entities.DriveFolder | null): void;
-	(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
-}>();
-
-const loadMoreFiles = ref<InstanceType<typeof MkButton>>();
-const fileInput = ref<HTMLInputElement>();
-
-const folder = ref<Misskey.entities.DriveFolder | null>(null);
-const files = ref<Misskey.entities.DriveFile[]>([]);
-const folders = ref<Misskey.entities.DriveFolder[]>([]);
-const moreFiles = ref(false);
-const moreFolders = ref(false);
-const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
-const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
-const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
-const uploadings = uploads;
-const connection = stream.useChannel('drive');
-const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい
-
-// ドロップされようとしているか
-const draghover = ref(false);
-
-// 自身の所有するアイテムがドラッグをスタートさせたか
-// (自分自身の階層にドロップできないようにするためのフラグ)
-const isDragSource = ref(false);
-
-const fetching = ref(true);
-
-const ilFilesObserver = new IntersectionObserver(
-	(entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles(),
-);
-
-watch(folder, () => emit('cd', folder.value));
-
-function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
-	addFile(file, true);
-}
-
-function onStreamDriveFileUpdated(file: Misskey.entities.DriveFile) {
-	const current = folder.value ? folder.value.id : null;
-	if (current !== file.folderId) {
-		removeFile(file);
-	} else {
-		addFile(file, true);
-	}
-}
-
-function onStreamDriveFileDeleted(fileId: string) {
-	removeFile(fileId);
-}
-
-function onStreamDriveFolderCreated(createdFolder: Misskey.entities.DriveFolder) {
-	addFolder(createdFolder, true);
-}
-
-function onStreamDriveFolderUpdated(updatedFolder: Misskey.entities.DriveFolder) {
-	const current = folder.value ? folder.value.id : null;
-	if (current !== updatedFolder.parentId) {
-		removeFolder(updatedFolder);
-	} else {
-		addFolder(updatedFolder, true);
-	}
-}
-
-function onStreamDriveFolderDeleted(folderId: string) {
-	removeFolder(folderId);
-}
-
-function onDragover(ev: DragEvent): any {
-	if (!ev.dataTransfer) return;
-
-	// ドラッグ元が自分自身の所有するアイテムだったら
-	if (isDragSource.value) {
-		// 自分自身にはドロップさせない
-		ev.dataTransfer.dropEffect = 'none';
-		return;
-	}
-
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
-	if (isFile || isDriveFile || isDriveFolder) {
-		switch (ev.dataTransfer.effectAllowed) {
-			case 'all':
-			case 'uninitialized':
-			case 'copy': 
-			case 'copyLink': 
-			case 'copyMove': 
-				ev.dataTransfer.dropEffect = 'copy';
-				break;
-			case 'linkMove':
-			case 'move':
-				ev.dataTransfer.dropEffect = 'move';
-				break;
-			default:
-				ev.dataTransfer.dropEffect = 'none';
-				break;
-		}
-	} else {
-		ev.dataTransfer.dropEffect = 'none';
-	}
-
-	return false;
-}
-
-function onDragenter() {
-	if (!isDragSource.value) draghover.value = true;
-}
-
-function onDragleave() {
-	draghover.value = false;
-}
-
-function onDrop(ev: DragEvent): any {
-	draghover.value = false;
-
-	if (!ev.dataTransfer) return;
-
-	// ドロップされてきたものがファイルだったら
-	if (ev.dataTransfer.files.length > 0) {
-		for (const file of Array.from(ev.dataTransfer.files)) {
-			upload(file, folder.value);
-		}
-		return;
-	}
-
-	//#region ドライブのファイル
-	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
-		const file = JSON.parse(driveFile);
-		if (files.value.some(f => f.id === file.id)) return;
-		removeFile(file.id);
-		os.api('drive/files/update', {
-			fileId: file.id,
-			folderId: folder.value ? folder.value.id : null,
-		});
-	}
-	//#endregion
-
-	//#region ドライブのフォルダ
-	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
-	if (driveFolder != null && driveFolder !== '') {
-		const droppedFolder = JSON.parse(driveFolder);
-
-		// 移動先が自分自身ならreject
-		if (folder.value && droppedFolder.id === folder.value.id) return false;
-		if (folders.value.some(f => f.id === droppedFolder.id)) return false;
-		removeFolder(droppedFolder.id);
-		os.api('drive/folders/update', {
-			folderId: droppedFolder.id,
-			parentId: folder.value ? folder.value.id : null,
-		}).then(() => {
-			// noop
-		}).catch(err => {
-			switch (err) {
-				case 'detected-circular-definition':
-					os.alert({
-						title: i18n.ts.unableToProcess,
-						text: i18n.ts.circularReferenceFolder,
-					});
-					break;
-				default:
-					os.alert({
-						type: 'error',
-						text: i18n.ts.somethingHappened,
-					});
-			}
-		});
-	}
-	//#endregion
-}
-
-function selectLocalFile() {
-	fileInput.value?.click();
-}
-
-function urlUpload() {
-	os.inputText({
-		title: i18n.ts.uploadFromUrl,
-		type: 'url',
-		placeholder: i18n.ts.uploadFromUrlDescription,
-	}).then(({ canceled, result: url }) => {
-		if (canceled || !url) return;
-		os.api('drive/files/upload-from-url', {
-			url: url,
-			folderId: folder.value ? folder.value.id : undefined,
-		});
-
-		os.alert({
-			title: i18n.ts.uploadFromUrlRequested,
-			text: i18n.ts.uploadFromUrlMayTakeTime,
-		});
-	});
-}
-
-function createFolder() {
-	os.inputText({
-		title: i18n.ts.createFolder,
-		placeholder: i18n.ts.folderName,
-	}).then(({ canceled, result: name }) => {
-		if (canceled) return;
-		os.api('drive/folders/create', {
-			name: name,
-			parentId: folder.value ? folder.value.id : undefined,
-		}).then(createdFolder => {
-			addFolder(createdFolder, true);
-		});
-	});
-}
-
-function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
-	os.inputText({
-		title: i18n.ts.renameFolder,
-		placeholder: i18n.ts.inputNewFolderName,
-		default: folderToRename.name,
-	}).then(({ canceled, result: name }) => {
-		if (canceled) return;
-		os.api('drive/folders/update', {
-			folderId: folderToRename.id,
-			name: name,
-		}).then(updatedFolder => {
-			// FIXME: 画面を更新するために自分自身に移動
-			move(updatedFolder);
-		});
-	});
-}
-
-function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
-	os.api('drive/folders/delete', {
-		folderId: folderToDelete.id,
-	}).then(() => {
-		// 削除時に親フォルダに移動
-		move(folderToDelete.parentId);
-	}).catch(err => {
-		switch (err.id) {
-			case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
-				os.alert({
-					type: 'error',
-					title: i18n.ts.unableToDelete,
-					text: i18n.ts.hasChildFilesOrFolders,
-				});
-				break;
-			default:
-				os.alert({
-					type: 'error',
-					text: i18n.ts.unableToDelete,
-				});
-		}
-	});
-}
-
-function onChangeFileInput() {
-	if (!fileInput.value?.files) return;
-	for (const file of Array.from(fileInput.value.files)) {
-		upload(file, folder.value);
-	}
-}
-
-function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null) {
-	uploadFile(file, (folderToUpload && typeof folderToUpload === 'object') ? folderToUpload.id : null, undefined, keepOriginal.value).then(res => {
-		addFile(res, true);
-	});
-}
-
-function chooseFile(file: Misskey.entities.DriveFile) {
-	const isAlreadySelected = selectedFiles.value.some(f => f.id === file.id);
-	if (props.multiple) {
-		if (isAlreadySelected) {
-			selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);
-		} else {
-			selectedFiles.value.push(file);
-		}
-		emit('change-selection', selectedFiles.value);
-	} else {
-		if (isAlreadySelected) {
-			emit('selected', file);
-		} else {
-			selectedFiles.value = [file];
-			emit('change-selection', [file]);
-		}
-	}
-}
-
-function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
-	const isAlreadySelected = selectedFolders.value.some(f => f.id === folderToChoose.id);
-	if (props.multiple) {
-		if (isAlreadySelected) {
-			selectedFolders.value = selectedFolders.value.filter(f => f.id !== folderToChoose.id);
-		} else {
-			selectedFolders.value.push(folderToChoose);
-		}
-		emit('change-selection', selectedFolders.value);
-	} else {
-		if (isAlreadySelected) {
-			emit('selected', folderToChoose);
-		} else {
-			selectedFolders.value = [folderToChoose];
-			emit('change-selection', [folderToChoose]);
-		}
-	}
-}
-
-function move(target?: Misskey.entities.DriveFolder) {
-	if (!target) {
-		goRoot();
-		return;
-	} else if (typeof target === 'object') {
-		target = target.id;
-	}
-
-	fetching.value = true;
-
-	os.api('drive/folders/show', {
-		folderId: target,
-	}).then(folderToMove => {
-		folder.value = folderToMove;
-		hierarchyFolders.value = [];
-
-		const dive = folderToDive => {
-			hierarchyFolders.value.unshift(folderToDive);
-			if (folderToDive.parent) dive(folderToDive.parent);
-		};
-
-		if (folderToMove.parent) dive(folderToMove.parent);
-
-		emit('open-folder', folderToMove);
-		fetch();
-	});
-}
-
-function addFolder(folderToAdd: Misskey.entities.DriveFolder, unshift = false) {
-	const current = folder.value ? folder.value.id : null;
-	if (current !== folderToAdd.parentId) return;
-
-	if (folders.value.some(f => f.id === folderToAdd.id)) {
-		const exist = folders.value.map(f => f.id).indexOf(folderToAdd.id);
-		folders.value[exist] = folderToAdd;
-		return;
-	}
-
-	if (unshift) {
-		folders.value.unshift(folderToAdd);
-	} else {
-		folders.value.push(folderToAdd);
-	}
-}
-
-function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
-	const current = folder.value ? folder.value.id : null;
-	if (current !== fileToAdd.folderId) return;
-
-	if (files.value.some(f => f.id === fileToAdd.id)) {
-		const exist = files.value.map(f => f.id).indexOf(fileToAdd.id);
-		files.value[exist] = fileToAdd;
-		return;
-	}
-
-	if (unshift) {
-		files.value.unshift(fileToAdd);
-	} else {
-		files.value.push(fileToAdd);
-	}
-}
-
-function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
-	const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
-	folders.value = folders.value.filter(f => f.id !== folderIdToRemove);
-}
-
-function removeFile(file: Misskey.entities.DriveFile | string) {
-	const fileId = typeof file === 'object' ? file.id : file;
-	files.value = files.value.filter(f => f.id !== fileId);
-}
-
-function appendFile(file: Misskey.entities.DriveFile) {
-	addFile(file);
-}
-
-function appendFolder(folderToAppend: Misskey.entities.DriveFolder) {
-	addFolder(folderToAppend);
-}
-/*
-function prependFile(file: Misskey.entities.DriveFile) {
-	addFile(file, true);
-}
-
-function prependFolder(folderToPrepend: Misskey.entities.DriveFolder) {
-	addFolder(folderToPrepend, true);
-}
-*/
-function goRoot() {
-	// 既にrootにいるなら何もしない
-	if (folder.value == null) return;
-
-	folder.value = null;
-	hierarchyFolders.value = [];
-	emit('move-root');
-	fetch();
-}
-
-async function fetch() {
-	folders.value = [];
-	files.value = [];
-	moreFolders.value = false;
-	moreFiles.value = false;
-	fetching.value = true;
-
-	const foldersMax = 30;
-	const filesMax = 30;
-
-	const foldersPromise = os.api('drive/folders', {
-		folderId: folder.value ? folder.value.id : null,
-		limit: foldersMax + 1,
-	}).then(fetchedFolders => {
-		if (fetchedFolders.length === foldersMax + 1) {
-			moreFolders.value = true;
-			fetchedFolders.pop();
-		}
-		return fetchedFolders;
-	});
-
-	const filesPromise = os.api('drive/files', {
-		folderId: folder.value ? folder.value.id : null,
-		type: props.type,
-		limit: filesMax + 1,
-	}).then(fetchedFiles => {
-		if (fetchedFiles.length === filesMax + 1) {
-			moreFiles.value = true;
-			fetchedFiles.pop();
-		}
-		return fetchedFiles;
-	});
-
-	const [fetchedFolders, fetchedFiles] = await Promise.all([foldersPromise, filesPromise]);
-
-	for (const x of fetchedFolders) appendFolder(x);
-	for (const x of fetchedFiles) appendFile(x);
-
-	fetching.value = false;
-}
-
-function fetchMoreFiles() {
-	fetching.value = true;
-
-	const max = 30;
-
-	// ファイル一覧取得
-	os.api('drive/files', {
-		folderId: folder.value ? folder.value.id : null,
-		type: props.type,
-		untilId: files.value[files.value.length - 1].id,
-		limit: max + 1,
-	}).then(files => {
-		if (files.length === max + 1) {
-			moreFiles.value = true;
-			files.pop();
-		} else {
-			moreFiles.value = false;
-		}
-		for (const x of files) appendFile(x);
-		fetching.value = false;
-	});
-}
-
-function getMenu() {
-	return [{
-		type: 'switch',
-		text: i18n.ts.keepOriginalUploading,
-		ref: keepOriginal,
-	}, null, {
-		text: i18n.ts.addFile,
-		type: 'label',
-	}, {
-		text: i18n.ts.upload,
-		icon: 'ti ti-upload',
-		action: () => { selectLocalFile(); },
-	}, {
-		text: i18n.ts.fromUrl,
-		icon: 'ti ti-link',
-		action: () => { urlUpload(); },
-	}, null, {
-		text: folder.value ? folder.value.name : i18n.ts.drive,
-		type: 'label',
-	}, folder.value ? {
-		text: i18n.ts.renameFolder,
-		icon: 'ti ti-forms',
-		action: () => { renameFolder(folder.value); },
-	} : undefined, folder.value ? {
-		text: i18n.ts.deleteFolder,
-		icon: 'ti ti-trash',
-		action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
-	} : undefined, {
-		text: i18n.ts.createFolder,
-		icon: 'ti ti-folder-plus',
-		action: () => { createFolder(); },
-	}];
-}
-
-function showMenu(ev: MouseEvent) {
-	os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
-}
-
-function onContextmenu(ev: MouseEvent) {
-	os.contextMenu(getMenu(), ev);
-}
-
-onMounted(() => {
-	if (defaultStore.state.enableInfiniteScroll && loadMoreFiles.value) {
-		nextTick(() => {
-			ilFilesObserver.observe(loadMoreFiles.value?.$el);
-		});
-	}
-
-	connection.on('fileCreated', onStreamDriveFileCreated);
-	connection.on('fileUpdated', onStreamDriveFileUpdated);
-	connection.on('fileDeleted', onStreamDriveFileDeleted);
-	connection.on('folderCreated', onStreamDriveFolderCreated);
-	connection.on('folderUpdated', onStreamDriveFolderUpdated);
-	connection.on('folderDeleted', onStreamDriveFolderDeleted);
-
-	if (props.initialFolder) {
-		move(props.initialFolder);
-	} else {
-		fetch();
-	}
-});
-
-onActivated(() => {
-	if (defaultStore.state.enableInfiniteScroll) {
-		nextTick(() => {
-			ilFilesObserver.observe(loadMoreFiles.value?.$el);
-		});
-	}
-});
-
-onBeforeUnmount(() => {
-	connection.dispose();
-	ilFilesObserver.disconnect();
-});
-</script>
-
-<style lang="scss" scoped>
-.yfudmmck {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-
-	> nav {
-		display: flex;
-		z-index: 2;
-		width: 100%;
-		padding: 0 8px;
-		box-sizing: border-box;
-		overflow: auto;
-		font-size: 0.9em;
-		box-shadow: 0 1px 0 var(--divider);
-
-		&, * {
-			user-select: none;
-		}
-
-		> .path {
-			display: inline-block;
-			vertical-align: bottom;
-			line-height: 42px;
-			white-space: nowrap;
-
-			> * {
-				display: inline-block;
-				margin: 0;
-				padding: 0 8px;
-				line-height: 42px;
-				cursor: pointer;
-
-				* {
-					pointer-events: none;
-				}
-
-				&:hover {
-					text-decoration: underline;
-				}
-
-				&.current {
-					font-weight: bold;
-					cursor: default;
-
-					&:hover {
-						text-decoration: none;
-					}
-				}
-
-				&.separator {
-					margin: 0;
-					padding: 0;
-					opacity: 0.5;
-					cursor: default;
-
-					> i {
-						margin: 0;
-					}
-				}
-			}
-		}
-
-		> .menu {
-			margin-left: auto;
-			padding: 0 12px;
-		}
-	}
-
-	> .main {
-		flex: 1;
-		overflow: auto;
-		padding: var(--margin);
-
-		&, * {
-			user-select: none;
-		}
-
-		&.fetching {
-			cursor: wait !important;
-
-			* {
-				pointer-events: none;
-			}
-
-			> .contents {
-				opacity: 0.5;
-			}
-		}
-
-		&.uploading {
-			height: calc(100% - 38px - 100px);
-		}
-
-		> .contents {
-
-			> .folders,
-			> .files {
-				display: flex;
-				flex-wrap: wrap;
-
-				> .folder,
-				> .file {
-					flex-grow: 1;
-					width: 128px;
-					margin: 4px;
-					box-sizing: border-box;
-				}
-
-				> .padding {
-					flex-grow: 1;
-					pointer-events: none;
-					width: 128px + 8px;
-				}
-			}
-
-			> .empty {
-				padding: 16px;
-				text-align: center;
-				pointer-events: none;
-				opacity: 0.5;
-
-				> p {
-					margin: 0;
-				}
-			}
-		}
-	}
-
-	> .dropzone {
-		position: absolute;
-		left: 0;
-		top: 38px;
-		width: 100%;
-		height: calc(100% - 38px);
-		border: dashed 2px var(--focus);
-		pointer-events: none;
-	}
-
-	> input {
-		display: none;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkDriveFileThumbnail.vue b/packages/client/src/components/MkDriveFileThumbnail.vue
deleted file mode 100644
index 33379ed5ca..0000000000
--- a/packages/client/src/components/MkDriveFileThumbnail.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-<div ref="thumbnail" class="zdjebgpv">
-	<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
-	<i v-else-if="is === 'image'" class="ti ti-photo icon"></i>
-	<i v-else-if="is === 'video'" class="ti ti-video icon"></i>
-	<i v-else-if="is === 'audio' || is === 'midi'" class="ti ti-file-music icon"></i>
-	<i v-else-if="is === 'csv'" class="ti ti-file-text icon"></i>
-	<i v-else-if="is === 'pdf'" class="ti ti-file-text icon"></i>
-	<i v-else-if="is === 'textfile'" class="ti ti-file-text icon"></i>
-	<i v-else-if="is === 'archive'" class="ti ti-file-zip icon"></i>
-	<i v-else class="ti ti-file icon"></i>
-
-	<i v-if="isThumbnailAvailable && is === 'video'" class="ti ti-video icon-sub"></i>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import * as Misskey from 'misskey-js';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-
-const props = defineProps<{
-	file: Misskey.entities.DriveFile;
-	fit: string;
-}>();
-
-const is = computed(() => {
-	if (props.file.type.startsWith('image/')) return 'image';
-	if (props.file.type.startsWith('video/')) return 'video';
-	if (props.file.type === 'audio/midi') return 'midi';
-	if (props.file.type.startsWith('audio/')) return 'audio';
-	if (props.file.type.endsWith('/csv')) return 'csv';
-	if (props.file.type.endsWith('/pdf')) return 'pdf';
-	if (props.file.type.startsWith('text/')) return 'textfile';
-	if ([
-		'application/zip',
-		'application/x-cpio',
-		'application/x-bzip',
-		'application/x-bzip2',
-		'application/java-archive',
-		'application/x-rar-compressed',
-		'application/x-tar',
-		'application/gzip',
-		'application/x-7z-compressed',
-	].some(archiveType => archiveType === props.file.type)) return 'archive';
-	return 'unknown';
-});
-
-const isThumbnailAvailable = computed(() => {
-	return props.file.thumbnailUrl
-		? (is.value === 'image' as const || is.value === 'video')
-		: false;
-});
-</script>
-
-<style lang="scss" scoped>
-.zdjebgpv {
-	position: relative;
-	display: flex;
-	background: var(--panel);
-	border-radius: 8px;
-	overflow: clip;
-
-	> .icon-sub {
-		position: absolute;
-		width: 30%;
-		height: auto;
-		margin: 0;
-		right: 4%;
-		bottom: 4%;
-	}
-
-	> .icon {
-		pointer-events: none;
-		margin: auto;
-		font-size: 32px;
-		color: #777;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkDriveSelectDialog.vue b/packages/client/src/components/MkDriveSelectDialog.vue
deleted file mode 100644
index 3ee821b539..0000000000
--- a/packages/client/src/components/MkDriveSelectDialog.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-<XModalWindow
-	ref="dialog"
-	:width="800"
-	:height="500"
-	:with-ok-button="true"
-	:ok-button-disabled="(type === 'file') && (selected.length === 0)"
-	@click="cancel()"
-	@close="cancel()"
-	@ok="ok()"
-	@closed="emit('closed')"
->
-	<template #header>
-		{{ multiple ? ((type === 'file') ? i18n.ts.selectFiles : i18n.ts.selectFolders) : ((type === 'file') ? i18n.ts.selectFile : i18n.ts.selectFolder) }}
-		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
-	</template>
-	<XDrive :multiple="multiple" :select="type" @change-selection="onChangeSelection" @selected="ok()"/>
-</XModalWindow>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import * as Misskey from 'misskey-js';
-import XDrive from '@/components/MkDrive.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
-
-withDefaults(defineProps<{
-	type?: 'file' | 'folder';
-	multiple: boolean;
-}>(), {
-	type: 'file',
-});
-
-const emit = defineEmits<{
-	(ev: 'done', r?: Misskey.entities.DriveFile[]): void;
-	(ev: 'closed'): void;
-}>();
-
-const dialog = ref<InstanceType<typeof XModalWindow>>();
-
-const selected = ref<Misskey.entities.DriveFile[]>([]);
-
-function ok() {
-	emit('done', selected.value);
-	dialog.value?.close();
-}
-
-function cancel() {
-	emit('done');
-	dialog.value?.close();
-}
-
-function onChangeSelection(files: Misskey.entities.DriveFile[]) {
-	selected.value = files;
-}
-</script>
diff --git a/packages/client/src/components/MkDriveWindow.vue b/packages/client/src/components/MkDriveWindow.vue
deleted file mode 100644
index 617200321b..0000000000
--- a/packages/client/src/components/MkDriveWindow.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-<XWindow
-	ref="window"
-	:initial-width="800"
-	:initial-height="500"
-	:can-resize="true"
-	@closed="emit('closed')"
->
-	<template #header>
-		{{ i18n.ts.drive }}
-	</template>
-	<XDrive :initial-folder="initialFolder"/>
-</XWindow>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as Misskey from 'misskey-js';
-import XDrive from '@/components/MkDrive.vue';
-import XWindow from '@/components/MkWindow.vue';
-import { i18n } from '@/i18n';
-
-defineProps<{
-	initialFolder?: Misskey.entities.DriveFolder;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-</script>
diff --git a/packages/client/src/components/MkEmojiPicker.section.vue b/packages/client/src/components/MkEmojiPicker.section.vue
deleted file mode 100644
index f6ba7abfc4..0000000000
--- a/packages/client/src/components/MkEmojiPicker.section.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
-<section>
-	<header class="_acrylic" @click="shown = !shown">
-		<i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
-	</header>
-	<div v-if="shown" class="body">
-		<button
-			v-for="emoji in emojis"
-			:key="emoji"
-			class="_button item"
-			@click="emit('chosen', emoji, $event)"
-		>
-			<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
-		</button>
-	</div>
-</section>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const props = defineProps<{
-	emojis: string[];
-	initialShown?: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'chosen', v: string, event: MouseEvent): void;
-}>();
-
-const shown = ref(!!props.initialShown);
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/client/src/components/MkEmojiPicker.vue b/packages/client/src/components/MkEmojiPicker.vue
deleted file mode 100644
index 814f71168a..0000000000
--- a/packages/client/src/components/MkEmojiPicker.vue
+++ /dev/null
@@ -1,569 +0,0 @@
-<template>
-<div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
-	<input ref="search" :value="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @input="input()" @paste.stop="paste" @keyup.enter="done()">
-	<div ref="emojis" class="emojis">
-		<section class="result">
-			<div v-if="searchResultCustom.length > 0" class="body">
-				<button
-					v-for="emoji in searchResultCustom"
-					:key="emoji.id"
-					class="_button item"
-					:title="emoji.name"
-					tabindex="0"
-					@click="chosen(emoji, $event)"
-				>
-					<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
-					<img class="emoji" :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
-				</button>
-			</div>
-			<div v-if="searchResultUnicode.length > 0" class="body">
-				<button
-					v-for="emoji in searchResultUnicode"
-					:key="emoji.name"
-					class="_button item"
-					:title="emoji.name"
-					tabindex="0"
-					@click="chosen(emoji, $event)"
-				>
-					<MkEmoji class="emoji" :emoji="emoji.char"/>
-				</button>
-			</div>
-		</section>
-
-		<div v-if="tab === 'index'" class="group index">
-			<section v-if="showPinned">
-				<div class="body">
-					<button
-						v-for="emoji in pinned"
-						:key="emoji"
-						class="_button item"
-						tabindex="0"
-						@click="chosen(emoji, $event)"
-					>
-						<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
-					</button>
-				</div>
-			</section>
-
-			<section>
-				<header class="_acrylic"><i class="ti ti-clock ti-fw"></i> {{ i18n.ts.recentUsed }}</header>
-				<div class="body">
-					<button
-						v-for="emoji in recentlyUsedEmojis"
-						:key="emoji"
-						class="_button item"
-						@click="chosen(emoji, $event)"
-					>
-						<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
-					</button>
-				</div>
-			</section>
-		</div>
-		<div v-once class="group">
-			<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
-			<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
-		</div>
-		<div v-once class="group">
-			<header class="_acrylic">{{ i18n.ts.emoji }}</header>
-			<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
-		</div>
-	</div>
-	<div class="tabs">
-		<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="ti ti-asterisk ti-fw"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="ti ti-mood-happy ti-fw"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="ti ti-leaf ti-fw"></i></button>
-		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="ti ti-hash ti-fw"></i></button>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, watch, onMounted } from 'vue';
-import * as Misskey from 'misskey-js';
-import XSection from '@/components/MkEmojiPicker.section.vue';
-import { emojilist, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import Ripple from '@/components/MkRipple.vue';
-import * as os from '@/os';
-import { isTouchUsing } from '@/scripts/touch';
-import { deviceKind } from '@/scripts/device-kind';
-import { emojiCategories, instance } from '@/instance';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
-
-const props = withDefaults(defineProps<{
-	showPinned?: boolean;
-	asReactionPicker?: boolean;
-	maxHeight?: number;
-	asDrawer?: boolean;
-}>(), {
-	showPinned: true,
-});
-
-const emit = defineEmits<{
-	(ev: 'chosen', v: string): void;
-}>();
-
-const search = ref<HTMLInputElement>();
-const emojis = ref<HTMLDivElement>();
-
-const {
-	reactions: pinned,
-	reactionPickerSize,
-	reactionPickerWidth,
-	reactionPickerHeight,
-	disableShowingAnimatedImages,
-	recentlyUsedEmojis,
-} = defaultStore.reactiveState;
-
-const size = computed(() => props.asReactionPicker ? reactionPickerSize.value : 1);
-const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3);
-const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2);
-const customEmojiCategories = emojiCategories;
-const customEmojis = instance.emojis;
-const q = ref<string>('');
-const searchResultCustom = ref<Misskey.entities.CustomEmoji[]>([]);
-const searchResultUnicode = ref<UnicodeEmojiDef[]>([]);
-const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
-
-watch(q, () => {
-	if (emojis.value) emojis.value.scrollTop = 0;
-
-	if (q.value === '') {
-		searchResultCustom.value = [];
-		searchResultUnicode.value = [];
-		return;
-	}
-
-	const newQ = q.value.replace(/:/g, '').toLowerCase();
-
-	const searchCustom = () => {
-		const max = 8;
-		const emojis = customEmojis;
-		const matches = new Set<Misskey.entities.CustomEmoji>();
-
-		const exactMatch = emojis.find(emoji => emoji.name === newQ);
-		if (exactMatch) matches.add(exactMatch);
-
-		if (newQ.includes(' ')) { // AND検索
-			const keywords = newQ.split(' ');
-
-			// 名前にキーワードが含まれている
-			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword))) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-			if (matches.size >= max) return matches;
-
-			// 名前またはエイリアスにキーワードが含まれている
-			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.aliases.some(alias => alias.includes(keyword)))) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-		} else {
-			for (const emoji of emojis) {
-				if (emoji.name.startsWith(newQ)) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-			if (matches.size >= max) return matches;
-
-			for (const emoji of emojis) {
-				if (emoji.aliases.some(alias => alias.startsWith(newQ))) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-			if (matches.size >= max) return matches;
-
-			for (const emoji of emojis) {
-				if (emoji.name.includes(newQ)) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-			if (matches.size >= max) return matches;
-
-			for (const emoji of emojis) {
-				if (emoji.aliases.some(alias => alias.includes(newQ))) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-		}
-
-		return matches;
-	};
-
-	const searchUnicode = () => {
-		const max = 8;
-		const emojis = emojilist;
-		const matches = new Set<UnicodeEmojiDef>();
-
-		const exactMatch = emojis.find(emoji => emoji.name === newQ);
-		if (exactMatch) matches.add(exactMatch);
-
-		if (newQ.includes(' ')) { // AND検索
-			const keywords = newQ.split(' ');
-
-			// 名前にキーワードが含まれている
-			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword))) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-			if (matches.size >= max) return matches;
-
-			// 名前またはエイリアスにキーワードが含まれている
-			for (const emoji of emojis) {
-				if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.keywords.some(alias => alias.includes(keyword)))) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-		} else {
-			for (const emoji of emojis) {
-				if (emoji.name.startsWith(newQ)) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-			if (matches.size >= max) return matches;
-
-			for (const emoji of emojis) {
-				if (emoji.keywords.some(keyword => keyword.startsWith(newQ))) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-			if (matches.size >= max) return matches;
-
-			for (const emoji of emojis) {
-				if (emoji.name.includes(newQ)) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-			if (matches.size >= max) return matches;
-
-			for (const emoji of emojis) {
-				if (emoji.keywords.some(keyword => keyword.includes(newQ))) {
-					matches.add(emoji);
-					if (matches.size >= max) break;
-				}
-			}
-		}
-
-		return matches;
-	};
-
-	searchResultCustom.value = Array.from(searchCustom());
-	searchResultUnicode.value = Array.from(searchUnicode());
-});
-
-function focus() {
-	if (!['smartphone', 'tablet'].includes(deviceKind) && !isTouchUsing) {
-		search.value?.focus({
-			preventScroll: true,
-		});
-	}
-}
-
-function reset() {
-	if (emojis.value) emojis.value.scrollTop = 0;
-	q.value = '';
-}
-
-function getKey(emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef): string {
-	return typeof emoji === 'string' ? emoji : 'char' in emoji ? emoji.char : `:${emoji.name}:`;
-}
-
-function chosen(emoji: any, ev?: MouseEvent) {
-	const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
-	if (el) {
-		const rect = el.getBoundingClientRect();
-		const x = rect.left + (el.offsetWidth / 2);
-		const y = rect.top + (el.offsetHeight / 2);
-		os.popup(Ripple, { x, y }, {}, 'end');
-	}
-
-	const key = getKey(emoji);
-	emit('chosen', key);
-
-	// 最近使った絵文字更新
-	if (!pinned.value.includes(key)) {
-		let recents = defaultStore.state.recentlyUsedEmojis;
-		recents = recents.filter((emoji: any) => emoji !== key);
-		recents.unshift(key);
-		defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
-	}
-}
-
-function input(): void {
-	// Using custom input event instead of v-model to respond immediately on
-	// Android, where composition happens on all languages
-	// (v-model does not update during composition)
-	q.value = search.value?.value.trim() ?? '';
-}
-
-function paste(event: ClipboardEvent): void {
-	const pasted = event.clipboardData?.getData('text') ?? '';
-	if (done(pasted)) {
-		event.preventDefault();
-	}
-}
-
-function done(query?: string): boolean | void {
-	if (query == null) query = q.value;
-	if (query == null || typeof query !== 'string') return;
-
-	const q2 = query.replace(/:/g, '');
-	const exactMatchCustom = customEmojis.find(emoji => emoji.name === q2);
-	if (exactMatchCustom) {
-		chosen(exactMatchCustom);
-		return true;
-	}
-	const exactMatchUnicode = emojilist.find(emoji => emoji.char === q2 || emoji.name === q2);
-	if (exactMatchUnicode) {
-		chosen(exactMatchUnicode);
-		return true;
-	}
-	if (searchResultCustom.value.length > 0) {
-		chosen(searchResultCustom.value[0]);
-		return true;
-	}
-	if (searchResultUnicode.value.length > 0) {
-		chosen(searchResultUnicode.value[0]);
-		return true;
-	}
-}
-
-onMounted(() => {
-	focus();
-});
-
-defineExpose({
-	focus,
-	reset,
-});
-</script>
-
-<style lang="scss" scoped>
-.omfetrab {
-	$pad: 8px;
-
-	display: flex;
-	flex-direction: column;
-
-	&.s1 {
-		--eachSize: 40px;
-	}
-
-	&.s2 {
-		--eachSize: 45px;
-	}
-
-	&.s3 {
-		--eachSize: 50px;
-	}
-
-	&.w1 {
-		width: calc((var(--eachSize) * 5) + (#{$pad} * 2));
-		--columns: 1fr 1fr 1fr 1fr 1fr;
-	}
-
-	&.w2 {
-		width: calc((var(--eachSize) * 6) + (#{$pad} * 2));
-		--columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-	}
-
-	&.w3 {
-		width: calc((var(--eachSize) * 7) + (#{$pad} * 2));
-		--columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-	}
-
-	&.w4 {
-		width: calc((var(--eachSize) * 8) + (#{$pad} * 2));
-		--columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-	}
-
-	&.w5 {
-		width: calc((var(--eachSize) * 9) + (#{$pad} * 2));
-		--columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-	}
-
-	&.h1 {
-		height: calc((var(--eachSize) * 4) + (#{$pad} * 2));
-	}
-
-	&.h2 {
-		height: calc((var(--eachSize) * 6) + (#{$pad} * 2));
-	}
-
-	&.h3 {
-		height: calc((var(--eachSize) * 8) + (#{$pad} * 2));
-	}
-
-	&.h4 {
-		height: calc((var(--eachSize) * 10) + (#{$pad} * 2));
-	}
-
-	&.asDrawer {
-		width: 100% !important;
-
-		> .emojis {
-			::v-deep(section) {
-				> header {
-					height: 32px;
-					line-height: 32px;
-					padding: 0 12px;
-					font-size: 15px;
-				}
-
-				> .body {
-					display: grid;
-					grid-template-columns: var(--columns);
-					font-size: 30px;
-
-					> .item {
-						aspect-ratio: 1 / 1;
-						width: auto;
-						height: auto;
-						min-width: 0;
-					}
-				}
-			}
-		}
-	}
-
-	> .search {
-		width: 100%;
-		padding: 12px;
-		box-sizing: border-box;
-		font-size: 1em;
-		outline: none;
-		border: none;
-		background: transparent;
-		color: var(--fg);
-
-		&:not(.filled) {
-			order: 1;
-			z-index: 2;
-			box-shadow: 0px -1px 0 0px var(--divider);
-		}
-	}
-
-	> .tabs {
-		display: flex;
-		display: none;
-
-		> .tab {
-			flex: 1;
-			height: 38px;
-			border-top: solid 0.5px var(--divider);
-
-			&.active {
-				border-top: solid 1px var(--accent);
-				color: var(--accent);
-			}
-		}
-	}
-
-	> .emojis {
-		height: 100%;
-		overflow-y: auto;
-		overflow-x: hidden;
-
-		scrollbar-width: none;
-
-		&::-webkit-scrollbar {
-			display: none;
-		}
-
-		> .group {
-			&:not(.index) {
-				padding: 4px 0 8px 0;
-				border-top: solid 0.5px var(--divider);
-			}
-
-			> header {
-				/*position: sticky;
-				top: 0;
-				left: 0;*/
-				height: 32px;
-				line-height: 32px;
-				z-index: 2;
-				padding: 0 8px;
-				font-size: 12px;
-			}
-		}
-
-		::v-deep(section) {
-			> header {
-				position: sticky;
-				top: 0;
-				left: 0;
-				height: 32px;
-				line-height: 32px;
-				z-index: 1;
-				padding: 0 8px;
-				font-size: 12px;
-				cursor: pointer;
-
-				&:hover {
-					color: var(--accent);
-				}
-			}
-
-			> .body {
-				position: relative;
-				padding: $pad;
-
-				> .item {
-					position: relative;
-					padding: 0;
-					width: var(--eachSize);
-					height: var(--eachSize);
-					contain: strict;
-					border-radius: 4px;
-					font-size: 24px;
-
-					&:focus-visible {
-						outline: solid 2px var(--focus);
-						z-index: 1;
-					}
-
-					&:hover {
-						background: rgba(0, 0, 0, 0.05);
-					}
-
-					&:active {
-						background: var(--accent);
-						box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
-					}
-
-					> .emoji {
-						height: 1.25em;
-						vertical-align: -.25em;
-						pointer-events: none;
-					}
-				}
-			}
-
-			&.result {
-				border-bottom: solid 0.5px var(--divider);
-
-				&:empty {
-					display: none;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkEmojiPickerDialog.vue b/packages/client/src/components/MkEmojiPickerDialog.vue
deleted file mode 100644
index 3b41f9d75b..0000000000
--- a/packages/client/src/components/MkEmojiPickerDialog.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-<MkModal
-	ref="modal"
-	v-slot="{ type, maxHeight }"
-	:z-priority="'middle'"
-	:prefer-type="asReactionPicker && defaultStore.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'"
-	:transparent-bg="true"
-	:manual-showing="manualShowing"
-	:src="src"
-	@click="modal?.close()"
-	@opening="opening"
-	@close="emit('close')"
-	@closed="emit('closed')"
->
-	<MkEmojiPicker
-		ref="picker"
-		class="ryghynhb _popup _shadow"
-		:class="{ drawer: type === 'drawer' }"
-		:show-pinned="showPinned"
-		:as-reaction-picker="asReactionPicker"
-		:as-drawer="type === 'drawer'"
-		:max-height="maxHeight"
-		@chosen="chosen"
-	/>
-</MkModal>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
-import { defaultStore } from '@/store';
-
-withDefaults(defineProps<{
-	manualShowing?: boolean | null;
-	src?: HTMLElement;
-	showPinned?: boolean;
-	asReactionPicker?: boolean;
-}>(), {
-	manualShowing: null,
-	showPinned: true,
-	asReactionPicker: false,
-});
-
-const emit = defineEmits<{
-	(ev: 'done', v: any): void;
-	(ev: 'close'): void;
-	(ev: 'closed'): void;
-}>();
-
-const modal = ref<InstanceType<typeof MkModal>>();
-const picker = ref<InstanceType<typeof MkEmojiPicker>>();
-
-function chosen(emoji: any) {
-	emit('done', emoji);
-	modal.value?.close();
-}
-
-function opening() {
-	picker.value?.reset();
-	picker.value?.focus();
-}
-</script>
-
-<style lang="scss" scoped>
-.ryghynhb {
-	&.drawer {
-		border-radius: 24px;
-		border-bottom-right-radius: 0;
-		border-bottom-left-radius: 0;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkEmojiPickerWindow.vue b/packages/client/src/components/MkEmojiPickerWindow.vue
deleted file mode 100644
index 523e4ba695..0000000000
--- a/packages/client/src/components/MkEmojiPickerWindow.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<template>
-<MkWindow ref="window"
-	:initial-width="null"
-	:initial-height="null"
-	:can-resize="false"
-	:mini="true"
-	:front="true"
-	@closed="emit('closed')"
->
-	<MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen"/>
-</MkWindow>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkWindow from '@/components/MkWindow.vue';
-import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
-
-withDefaults(defineProps<{
-	src?: HTMLElement;
-	showPinned?: boolean;
-	asReactionPicker?: boolean;
-}>(), {
-	showPinned: true,
-});
-
-const emit = defineEmits<{
-	(ev: 'chosen', v: any): void;
-	(ev: 'closed'): void;
-}>();
-
-function chosen(emoji: any) {
-	emit('chosen', emoji);
-}
-</script>
-
-<style lang="scss" scoped>
-.omfetrab {
-	$pad: 8px;
-	--eachSize: 40px;
-
-	display: flex;
-	flex-direction: column;
-	contain: content;
-
-	&.big {
-		--eachSize: 44px;
-	}
-
-	&.w1 {
-		width: calc((var(--eachSize) * 5) + (#{$pad} * 2));
-	}
-
-	&.w2 {
-		width: calc((var(--eachSize) * 6) + (#{$pad} * 2));
-	}
-
-	&.w3 {
-		width: calc((var(--eachSize) * 7) + (#{$pad} * 2));
-	}
-
-	&.h1 {
-		--height: calc((var(--eachSize) * 4) + (#{$pad} * 2));
-	}
-
-	&.h2 {
-		--height: calc((var(--eachSize) * 6) + (#{$pad} * 2));
-	}
-
-	&.h3 {
-		--height: calc((var(--eachSize) * 8) + (#{$pad} * 2));
-	}
-
-	> .search {
-		width: 100%;
-		padding: 12px;
-		box-sizing: border-box;
-		font-size: 1em;
-		outline: none;
-		border: none;
-		background: transparent;
-		color: var(--fg);
-
-		&:not(.filled) {
-			order: 1;
-			z-index: 2;
-			box-shadow: 0px -1px 0 0px var(--divider);
-		}
-	}
-
-	> .emojis {
-		height: var(--height);
-		overflow-y: auto;
-		overflow-x: hidden;
-
-		scrollbar-width: none;
-
-		&::-webkit-scrollbar {
-			display: none;
-		}
-
-		> .index {
-			min-height: var(--height);
-			position: relative;
-			border-bottom: solid 0.5px var(--divider);
-				
-			> .arrow {
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				width: 100%;
-				padding: 16px 0;
-				text-align: center;
-				opacity: 0.5;
-				pointer-events: none;
-			}
-		}
-
-		section {
-			> header {
-				position: sticky;
-				top: 0;
-				left: 0;
-				z-index: 1;
-				padding: 8px;
-				font-size: 12px;
-			}
-
-			> div {
-				padding: $pad;
-
-				> button {
-					position: relative;
-					padding: 0;
-					width: var(--eachSize);
-					height: var(--eachSize);
-					border-radius: 4px;
-
-					&:focus-visible {
-						outline: solid 2px var(--focus);
-						z-index: 1;
-					}
-
-					&:hover {
-						background: rgba(0, 0, 0, 0.05);
-					}
-
-					&:active {
-						background: var(--accent);
-						box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
-					}
-
-					> * {
-						font-size: 24px;
-						height: 1.25em;
-						vertical-align: -.25em;
-						pointer-events: none;
-					}
-				}
-			}
-
-			&.result {
-				border-bottom: solid 0.5px var(--divider);
-
-				&:empty {
-					display: none;
-				}
-			}
-
-			&.unicode {
-				min-height: 384px;
-			}
-
-			&.custom {
-				min-height: 64px;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkFeaturedPhotos.vue b/packages/client/src/components/MkFeaturedPhotos.vue
deleted file mode 100644
index e58b5d2849..0000000000
--- a/packages/client/src/components/MkFeaturedPhotos.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-<div v-if="meta" class="xfbouadm" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import * as Misskey from 'misskey-js';
-import * as os from '@/os';
-
-const meta = ref<Misskey.entities.DetailedInstanceMetadata>();
-
-os.api('meta', { detail: true }).then(gotMeta => {
-	meta.value = gotMeta;
-});
-</script>
-
-<style lang="scss" scoped>
-.xfbouadm {
-	background-position: center;
-	background-size: cover;
-}
-</style>
diff --git a/packages/client/src/components/MkFileCaptionEditWindow.vue b/packages/client/src/components/MkFileCaptionEditWindow.vue
deleted file mode 100644
index 73875251f0..0000000000
--- a/packages/client/src/components/MkFileCaptionEditWindow.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-<XModalWindow
-	ref="dialog"
-	:width="400"
-	:height="450"
-	:with-ok-button="true"
-	:ok-button-disabled="false"
-	@ok="ok()"
-	@close="dialog.close()"
-	@closed="emit('closed')"
->
-	<template #header>{{ i18n.ts.describeFile }}</template>
-	<div>
-		<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain" style="height: 100px;"/>
-		<MkTextarea v-model="caption" autofocus :placeholder="i18n.ts.inputNewDescription">
-			<template #label>{{ i18n.ts.caption }}</template>
-		</MkTextarea>
-	</div>
-</XModalWindow>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as Misskey from 'misskey-js';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	file: Misskey.entities.DriveFile;
-	default: string;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'done', v: string): void;
-	(ev: 'closed'): void;
-}>();
-
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
-
-let caption = $ref(props.default);
-
-async function ok() {
-	emit('done', caption);
-	dialog.close();
-}
-</script>
-
-<style lang="scss" scoped>
-.container {
-	display: flex;
-	width: 100%;
-	height: 100%;
-	flex-direction: row;
-	overflow: scroll;
-	position: fixed;
-	left: 0;
-	top: 0;
-}
-@media (max-width: 850px) {
-	.container {
-		flex-direction: column;
-	}
-	.top-caption {
-		padding-bottom: 8px;
-	}
-}
-.fullwidth {
-	width: 100%;
-	margin: auto;
-}
-.mk-dialog {
-	position: relative;
-	padding: 32px;
-	min-width: 320px;
-	max-width: 480px;
-	box-sizing: border-box;
-	text-align: center;
-	background: var(--panel);
-	border-radius: var(--radius);
-	margin: auto;
-
-	> header {
-		margin: 0 0 8px 0;
-		position: relative;
-
-		> .title {
-			font-weight: bold;
-			font-size: 20px;
-		}
-
-		> .text-count {
-			opacity: 0.7;
-			position: absolute;
-			right: 0;
-		}
-	}
-
-	> .buttons {
-		margin-top: 16px;
-
-		> * {
-			margin: 0 8px;
-		}
-	}
-
-	> textarea {
-		display: block;
-		box-sizing: border-box;
-		padding: 0 24px;
-		margin: 0;
-		width: 100%;
-		font-size: 16px;
-		border: none;
-		border-radius: 0;
-		background: transparent;
-		color: var(--fg);
-		font-family: inherit;
-		max-width: 100%;
-		min-width: 100%;
-		min-height: 90px;
-
-		&:focus-visible {
-			outline: none;
-		}
-
-		&:disabled {
-			opacity: 0.5;
-		}
-	}
-}
-.hdrwpsaf {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-
-	> header,
-	> footer {
-		align-self: center;
-		display: inline-block;
-		padding: 6px 9px;
-		font-size: 90%;
-		background: rgba(0, 0, 0, 0.5);
-		border-radius: 6px;
-		color: #fff;
-	}
-
-	> header {
-		margin-bottom: 8px;
-		opacity: 0.9;
-	}
-
-	> img {
-		display: block;
-		flex: 1;
-		min-height: 0;
-		object-fit: contain;
-		width: 100%;
-		cursor: zoom-out;
-		image-orientation: from-image;
-	}
-
-	> footer {
-		margin-top: 8px;
-		opacity: 0.8;
-
-		> span + span {
-			margin-left: 0.5em;
-			padding-left: 0.5em;
-			border-left: solid 1px rgba(255, 255, 255, 0.5);
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkFileListForAdmin.vue b/packages/client/src/components/MkFileListForAdmin.vue
deleted file mode 100644
index 4910506a95..0000000000
--- a/packages/client/src/components/MkFileListForAdmin.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-<div>
-	<MkPagination v-slot="{items}" :pagination="pagination" class="urempief" :class="{ grid: viewMode === 'grid' }">
-		<MkA
-			v-for="file in items"
-			:key="file.id"
-			v-tooltip.mfm="`${file.type}\n${bytes(file.size)}\n${new Date(file.createdAt).toLocaleString()}\nby ${file.user ? '@' + Acct.toString(file.user) : 'system'}`"
-			:to="`/admin/file/${file.id}`"
-			class="file _button"
-		>
-			<div v-if="file.isSensitive" class="sensitive-label">{{ i18n.ts.sensitive }}</div>
-			<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
-			<div v-if="viewMode === 'list'" class="body">
-				<div>
-					<small style="opacity: 0.7;">{{ file.name }}</small>
-				</div>
-				<div>
-					<MkAcct v-if="file.user" :user="file.user"/>
-					<div v-else>{{ i18n.ts.system }}</div>
-				</div>
-				<div>
-					<span style="margin-right: 1em;">{{ file.type }}</span>
-					<span>{{ bytes(file.size) }}</span>
-				</div>
-				<div>
-					<span>{{ i18n.ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
-				</div>
-			</div>
-		</MkA>
-	</MkPagination>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import * as Acct from 'misskey-js/built/acct';
-import MkPagination from '@/components/MkPagination.vue';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import bytes from '@/filters/bytes';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	pagination: any;
-	viewMode: 'grid' | 'list';
-}>();
-</script>
-
-<style lang="scss" scoped>
-@keyframes sensitive-blink {
-	0% { opacity: 1; }
-	50% { opacity: 0; }
-}
-
-.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(130px, 1fr));
-		grid-gap: 12px;
-		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;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue
deleted file mode 100644
index 9e83b07cd7..0000000000
--- a/packages/client/src/components/MkFolder.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<template>
-<div v-size="{ max: [500] }" class="ssazuxis">
-	<header class="_button" :style="{ background: bg }" @click="showBody = !showBody">
-		<div class="title"><slot name="header"></slot></div>
-		<div class="divider"></div>
-		<button class="_button">
-			<template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
-			<template v-else><i class="ti ti-chevron-down"></i></template>
-		</button>
-	</header>
-	<transition
-		:name="$store.state.animation ? 'folder-toggle' : ''"
-		@enter="enter"
-		@after-enter="afterEnter"
-		@leave="leave"
-		@after-leave="afterLeave"
-	>
-		<div v-show="showBody">
-			<slot></slot>
-		</div>
-	</transition>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import tinycolor from 'tinycolor2';
-
-const localStoragePrefix = 'ui:folder:';
-
-export default defineComponent({
-	props: {
-		expanded: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-		persistKey: {
-			type: String,
-			required: false,
-			default: null,
-		},
-	},
-	data() {
-		return {
-			bg: null,
-			showBody: (this.persistKey && localStorage.getItem(localStoragePrefix + this.persistKey)) ? localStorage.getItem(localStoragePrefix + this.persistKey) === 't' : this.expanded,
-		};
-	},
-	watch: {
-		showBody() {
-			if (this.persistKey) {
-				localStorage.setItem(localStoragePrefix + this.persistKey, this.showBody ? 't' : 'f');
-			}
-		},
-	},
-	mounted() {
-		function getParentBg(el: Element | null): string {
-			if (el == null || el.tagName === 'BODY') return 'var(--bg)';
-			const bg = el.style.background || el.style.backgroundColor;
-			if (bg) {
-				return bg;
-			} else {
-				return getParentBg(el.parentElement);
-			}
-		}
-		const rawBg = getParentBg(this.$el);
-		const bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
-		bg.setAlpha(0.85);
-		this.bg = bg.toRgbString();
-	},
-	methods: {
-		toggleContent(show: boolean) {
-			this.showBody = show;
-		},
-
-		enter(el) {
-			const elementHeight = el.getBoundingClientRect().height;
-			el.style.height = 0;
-			el.offsetHeight; // reflow
-			el.style.height = elementHeight + 'px';
-		},
-		afterEnter(el) {
-			el.style.height = null;
-		},
-		leave(el) {
-			const elementHeight = el.getBoundingClientRect().height;
-			el.style.height = elementHeight + 'px';
-			el.offsetHeight; // reflow
-			el.style.height = 0;
-		},
-		afterLeave(el) {
-			el.style.height = null;
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.folder-toggle-enter-active, .folder-toggle-leave-active {
-	overflow-y: hidden;
-	transition: opacity 0.5s, height 0.5s !important;
-}
-.folder-toggle-enter-from {
-	opacity: 0;
-}
-.folder-toggle-leave-to {
-	opacity: 0;
-}
-
-.ssazuxis {
-	position: relative;
-
-	> header {
-		display: flex;
-		position: relative;
-		z-index: 10;
-		position: sticky;
-		top: var(--stickyTop, 0px);
-		padding: var(--x-padding);
-		-webkit-backdrop-filter: var(--blur, blur(8px));
-		backdrop-filter: var(--blur, blur(20px));
-
-		> .title {
-			display: grid;
-			place-content: center;
-			margin: 0;
-			padding: 12px 16px 12px 0;
-
-			> i {
-				margin-right: 6px;
-			}
-
-			&:empty {
-				display: none;
-			}
-		}
-
-		> .divider {
-			flex: 1;
-			margin: auto;
-			height: 1px;
-			background: var(--divider);
-		}
-
-		> button {
-			padding: 12px 0 12px 16px;
-		}
-	}
-
-	&.max-width_500px {
-		> header {
-			> .title {
-				padding: 8px 10px 8px 0;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
deleted file mode 100644
index ee256d9263..0000000000
--- a/packages/client/src/components/MkFollowButton.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
-<button
-	class="kpoogebi _button"
-	:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full, large }"
-	:disabled="wait"
-	@click="onClick"
->
-	<template v-if="!wait">
-		<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
-			<span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="ti ti-hourglass-empty"></i>
-		</template>
-		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
-			<!-- つまりリモートフォローの場合。 -->
-			<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
-		</template>
-		<template v-else-if="isFollowing">
-			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
-		</template>
-		<template v-else-if="!isFollowing && user.isLocked">
-			<span v-if="full">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i>
-		</template>
-		<template v-else-if="!isFollowing && !user.isLocked">
-			<span v-if="full">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
-		</template>
-	</template>
-	<template v-else>
-		<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
-	</template>
-</button>
-</template>
-
-<script lang="ts" setup>
-import { onBeforeUnmount, onMounted } from 'vue';
-import * as Misskey from 'misskey-js';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{
-	user: Misskey.entities.UserDetailed,
-	full?: boolean,
-	large?: boolean,
-}>(), {
-	full: false,
-	large: false,
-});
-
-let isFollowing = $ref(props.user.isFollowing);
-let hasPendingFollowRequestFromYou = $ref(props.user.hasPendingFollowRequestFromYou);
-let wait = $ref(false);
-const connection = stream.useChannel('main');
-
-if (props.user.isFollowing == null) {
-	os.api('users/show', {
-		userId: props.user.id,
-	})
-		.then(onFollowChange);
-}
-
-function onFollowChange(user: Misskey.entities.UserDetailed) {
-	if (user.id === props.user.id) {
-		isFollowing = user.isFollowing;
-		hasPendingFollowRequestFromYou = user.hasPendingFollowRequestFromYou;
-	}
-}
-
-async function onClick() {
-	wait = true;
-
-	try {
-		if (isFollowing) {
-			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }),
-			});
-
-			if (canceled) return;
-
-			await os.api('following/delete', {
-				userId: props.user.id,
-			});
-		} else {
-			if (hasPendingFollowRequestFromYou) {
-				await os.api('following/requests/cancel', {
-					userId: props.user.id,
-				});
-				hasPendingFollowRequestFromYou = false;
-			} else {
-				await os.api('following/create', {
-					userId: props.user.id,
-				});
-				hasPendingFollowRequestFromYou = true;
-			}
-		}
-	} catch (err) {
-		console.error(err);
-	} finally {
-		wait = false;
-	}
-}
-
-onMounted(() => {
-	connection.on('follow', onFollowChange);
-	connection.on('unfollow', onFollowChange);
-});
-
-onBeforeUnmount(() => {
-	connection.dispose();
-});
-</script>
-
-<style lang="scss" scoped>
-.kpoogebi {
-	position: relative;
-	display: inline-block;
-	font-weight: bold;
-	color: var(--accent);
-	background: transparent;
-	border: solid 1px var(--accent);
-	padding: 0;
-	height: 31px;
-	font-size: 16px;
-	border-radius: 32px;
-	background: #fff;
-
-	&.full {
-		padding: 0 8px 0 12px;
-		font-size: 14px;
-	}
-
-	&.large {
-		font-size: 16px;
-		height: 38px;
-		padding: 0 12px 0 16px;
-	}
-
-	&:not(.full) {
-		width: 31px;
-	}
-
-	&:focus-visible {
-		&:after {
-			content: "";
-			pointer-events: none;
-			position: absolute;
-			top: -5px;
-			right: -5px;
-			bottom: -5px;
-			left: -5px;
-			border: 2px solid var(--focus);
-			border-radius: 32px;
-		}
-	}
-
-	&:hover {
-		//background: mix($primary, #fff, 20);
-	}
-
-	&:active {
-		//background: mix($primary, #fff, 40);
-	}
-
-	&.active {
-		color: #fff;
-		background: var(--accent);
-
-		&:hover {
-			background: var(--accentLighten);
-			border-color: var(--accentLighten);
-		}
-
-		&:active {
-			background: var(--accentDarken);
-			border-color: var(--accentDarken);
-		}
-	}
-
-	&.wait {
-		cursor: wait !important;
-		opacity: 0.7;
-	}
-
-	> span {
-		margin-right: 6px;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkForgotPassword.vue b/packages/client/src/components/MkForgotPassword.vue
deleted file mode 100644
index 1b55451c94..0000000000
--- a/packages/client/src/components/MkForgotPassword.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-<XModalWindow ref="dialog"
-	:width="370"
-	:height="400"
-	@close="dialog.close()"
-	@closed="emit('closed')"
->
-	<template #header>{{ i18n.ts.forgotPassword }}</template>
-
-	<form v-if="instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit">
-		<div class="main _formRoot">
-			<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required>
-				<template #label>{{ i18n.ts.username }}</template>
-				<template #prefix>@</template>
-			</MkInput>
-
-			<MkInput v-model="email" class="_formBlock" type="email" :spellcheck="false" required>
-				<template #label>{{ i18n.ts.emailAddress }}</template>
-				<template #caption>{{ i18n.ts._forgotPassword.enterEmail }}</template>
-			</MkInput>
-
-			<MkButton class="_formBlock" type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ i18n.ts.send }}</MkButton>
-		</div>
-		<div class="sub">
-			<MkA to="/about" class="_link">{{ i18n.ts._forgotPassword.ifNoEmail }}</MkA>
-		</div>
-	</form>
-	<div v-else class="bafecedb">
-		{{ i18n.ts._forgotPassword.contactAdmin }}
-	</div>
-</XModalWindow>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import * as os from '@/os';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
-
-const emit = defineEmits<{
-	(ev: 'done'): void;
-	(ev: 'closed'): void;
-}>();
-
-let dialog: InstanceType<typeof XModalWindow> = $ref();
-
-let username = $ref('');
-let email = $ref('');
-let processing = $ref(false);
-
-async function onSubmit() {
-	processing = true;
-	await os.apiWithDialog('request-reset-password', {
-		username,
-		email,
-	});
-	emit('done');
-	dialog.close();
-}
-</script>
-
-<style lang="scss" scoped>
-.bafeceda {
-	> .main {
-		padding: 24px;
-	}
-
-	> .sub {
-		border-top: solid 0.5px var(--divider);
-		padding: 24px;
-	}
-}
-
-.bafecedb {
-	padding: 24px;
-}
-</style>
diff --git a/packages/client/src/components/MkFormDialog.vue b/packages/client/src/components/MkFormDialog.vue
deleted file mode 100644
index b2bf76a8c7..0000000000
--- a/packages/client/src/components/MkFormDialog.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-<XModalWindow
-	ref="dialog"
-	:width="450"
-	:can-close="false"
-	:with-ok-button="true"
-	:ok-button-disabled="false"
-	@click="cancel()"
-	@ok="ok()"
-	@close="cancel()"
-	@closed="$emit('closed')"
->
-	<template #header>
-		{{ title }}
-	</template>
-
-	<MkSpacer :margin-min="20" :margin-max="32">
-		<div class="xkpnjxcv _formRoot">
-			<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
-				<FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormInput>
-				<FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormInput>
-				<FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormTextarea>
-				<FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]" class="_formBlock">
-					<span v-text="form[item].label || item"></span>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormSwitch>
-				<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
-					<option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option>
-				</FormSelect>
-				<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
-					<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
-				</FormRadios>
-				<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].min" :max="form[item].max" :step="form[item].step" :text-converter="form[item].textConverter" class="_formBlock">
-					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
-					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormRange>
-				<MkButton v-else-if="form[item].type === 'button'" class="_formBlock" @click="form[item].action($event, values)">
-					<span v-text="form[item].content || item"></span>
-				</MkButton>
-			</template>
-		</div>
-	</MkSpacer>
-</XModalWindow>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import FormInput from './form/input.vue';
-import FormTextarea from './form/textarea.vue';
-import FormSwitch from './form/switch.vue';
-import FormSelect from './form/select.vue';
-import FormRange from './form/range.vue';
-import MkButton from './MkButton.vue';
-import FormRadios from './form/radios.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-
-export default defineComponent({
-	components: {
-		XModalWindow,
-		FormInput,
-		FormTextarea,
-		FormSwitch,
-		FormSelect,
-		FormRange,
-		MkButton,
-		FormRadios,
-	},
-
-	props: {
-		title: {
-			type: String,
-			required: true,
-		},
-		form: {
-			type: Object,
-			required: true,
-		},
-	},
-
-	emits: ['done'],
-
-	data() {
-		return {
-			values: {},
-		};
-	},
-
-	created() {
-		for (const item in this.form) {
-			this.values[item] = this.form[item].default ?? null;
-		}
-	},
-
-	methods: {
-		ok() {
-			this.$emit('done', {
-				result: this.values,
-			});
-			this.$refs.dialog.close();
-		},
-
-		cancel() {
-			this.$emit('done', {
-				canceled: true,
-			});
-			this.$refs.dialog.close();
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.xkpnjxcv {
-
-}
-</style>
diff --git a/packages/client/src/components/MkFormula.vue b/packages/client/src/components/MkFormula.vue
deleted file mode 100644
index 65a2fee930..0000000000
--- a/packages/client/src/components/MkFormula.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-<XFormula :formula="formula" :block="block"/>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import * as os from '@/os';
-
-export default defineComponent({
-	components: {
-		XFormula: defineAsyncComponent(() => import('@/components/MkFormulaCore.vue')),
-	},
-	props: {
-		formula: {
-			type: String,
-			required: true,
-		},
-		block: {
-			type: Boolean,
-			required: true,
-		},
-	},
-});
-</script>
diff --git a/packages/client/src/components/MkFormulaCore.vue b/packages/client/src/components/MkFormulaCore.vue
deleted file mode 100644
index 6028db9e64..0000000000
--- a/packages/client/src/components/MkFormulaCore.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<!-- eslint-disable vue/no-v-html -->
-<template>
-<div v-if="block" v-html="compiledFormula"></div>
-<span v-else v-html="compiledFormula"></span>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import katex from 'katex';
-
-export default defineComponent({
-	props: {
-		formula: {
-			type: String,
-			required: true,
-		},
-		block: {
-			type: Boolean,
-			required: true,
-		},
-	},
-	computed: {
-		compiledFormula(): any {
-			return katex.renderToString(this.formula, {
-				throwOnError: false,
-			} as any);
-		},
-	},
-});
-</script>
-
-<style>
-@import "../../node_modules/katex/dist/katex.min.css";
-</style>
diff --git a/packages/client/src/components/MkGalleryPostPreview.vue b/packages/client/src/components/MkGalleryPostPreview.vue
deleted file mode 100644
index a133f6431b..0000000000
--- a/packages/client/src/components/MkGalleryPostPreview.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1">
-	<div class="thumbnail">
-		<ImgWithBlurhash class="img" :src="post.files[0].thumbnailUrl" :hash="post.files[0].blurhash"/>
-	</div>
-	<article>
-		<header>
-			<MkAvatar :user="post.user" class="avatar"/>
-		</header>
-		<footer>
-			<span class="title">{{ post.title }}</span>
-		</footer>
-	</article>
-</MkA>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import { userName } from '@/filters/user';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import * as os from '@/os';
-
-const props = defineProps<{
-	post: any;
-}>();
-</script>
-
-<style lang="scss" scoped>
-.ttasepnz {
-	display: block;
-	position: relative;
-	height: 200px;
-
-	&:hover {
-		text-decoration: none;
-		color: var(--accent);
-
-		> .thumbnail {
-			transform: scale(1.1);
-		}
-
-		> article {
-			> footer {
-				&:before {
-					opacity: 1;
-				}
-			}
-		}
-	}
-
-	> .thumbnail {
-		width: 100%;
-		height: 100%;
-		position: absolute;
-		transition: all 0.5s ease;
-
-		> .img {
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
-		}
-	}
-
-	> article {
-		position: absolute;
-		z-index: 1;
-		width: 100%;
-		height: 100%;
-
-		> header {
-			position: absolute;
-			top: 0;
-			width: 100%;
-			padding: 12px;
-			box-sizing: border-box;
-			display: flex;
-
-			> .avatar {
-				margin-left: auto;
-				width: 32px;
-				height: 32px;
-			}
-		}
-
-		> footer {
-			position: absolute;
-			bottom: 0;
-			width: 100%;
-			padding: 16px;
-			box-sizing: border-box;
-			color: #fff;
-			text-shadow: 0 0 8px #000;
-			background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
-
-			&:before {
-				content: "";
-				display: block;
-				position: absolute;
-				z-index: -1;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				background: linear-gradient(rgba(0, 0, 0, 0.4), transparent);
-				opacity: 0;
-				transition: opacity 0.5s ease;
-			}
-
-			> .title {
-				font-weight: bold;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkGoogle.vue b/packages/client/src/components/MkGoogle.vue
deleted file mode 100644
index d104cd4cd4..0000000000
--- a/packages/client/src/components/MkGoogle.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-<div class="mk-google">
-	<input v-model="query" type="search" :placeholder="q">
-	<button @click="search"><i class="ti ti-search"></i> {{ $ts.searchByGoogle }}</button>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const props = defineProps<{
-	q: string;
-}>();
-
-const query = ref(props.q);
-
-const search = () => {
-	window.open(`https://www.google.com/search?q=${query.value}`, '_blank');
-};
-</script>
-
-<style lang="scss" scoped>
-.mk-google {
-	display: flex;
-	margin: 8px 0;
-
-	> input {
-		flex-shrink: 1;
-		padding: 10px;
-		width: 100%;
-		height: 40px;
-		font-size: 16px;
-		border: solid 1px var(--divider);
-		border-radius: 4px 0 0 4px;
-		-webkit-appearance: textfield;
-	}
-
-	> button {
-		flex-shrink: 0;
-		margin: 0;
-		padding: 0 16px;
-		border: solid 1px var(--divider);
-		border-left: none;
-		border-radius: 0 4px 4px 0;
-
-		&:active {
-			box-shadow: 0 2px 4px rgba(#000, 0.15) inset;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkImageViewer.vue b/packages/client/src/components/MkImageViewer.vue
deleted file mode 100644
index f074b1a2f2..0000000000
--- a/packages/client/src/components/MkImageViewer.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-<MkModal ref="modal" :z-priority="'middle'" @click="modal.close()" @closed="emit('closed')">
-	<div class="xubzgfga">
-		<header>{{ image.name }}</header>
-		<img :src="image.url" :alt="image.comment" :title="image.comment" @click="modal.close()"/>
-		<footer>
-			<span>{{ image.type }}</span>
-			<span>{{ bytes(image.size) }}</span>
-			<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
-		</footer>
-	</div>
-</MkModal>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'misskey-js';
-import bytes from '@/filters/bytes';
-import number from '@/filters/number';
-import MkModal from '@/components/MkModal.vue';
-
-const props = withDefaults(defineProps<{
-	image: misskey.entities.DriveFile;
-}>(), {
-});
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-
-const modal = $ref<InstanceType<typeof MkModal>>();
-</script>
-
-<style lang="scss" scoped>
-.xubzgfga {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-
-	> header,
-	> footer {
-		align-self: center;
-		display: inline-block;
-		padding: 6px 9px;
-		font-size: 90%;
-		background: rgba(0, 0, 0, 0.5);
-		border-radius: 6px;
-		color: #fff;
-	}
-
-	> header {
-		margin-bottom: 8px;
-		opacity: 0.9;
-	}
-
-	> img {
-		display: block;
-		flex: 1;
-		min-height: 0;
-		object-fit: contain;
-		width: 100%;
-		cursor: zoom-out;
-		image-orientation: from-image;
-	}
-
-	> footer {
-		margin-top: 8px;
-		opacity: 0.8;
-
-		> span + span {
-			margin-left: 0.5em;
-			padding-left: 0.5em;
-			border-left: solid 1px rgba(255, 255, 255, 0.5);
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkImgWithBlurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue
deleted file mode 100644
index 80d7c201a4..0000000000
--- a/packages/client/src/components/MkImgWithBlurhash.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-<div class="xubzgfgb" :class="{ cover }" :title="title">
-	<canvas v-if="!loaded" ref="canvas" :width="size" :height="size" :title="title"/>
-	<img v-if="src" :src="src" :title="title" :alt="alt" @load="onLoad"/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted } from 'vue';
-import { decode } from 'blurhash';
-
-const props = withDefaults(defineProps<{
-	src?: string | null;
-	hash?: string;
-	alt?: string;
-	title?: string | null;
-	size?: number;
-	cover?: boolean;
-}>(), {
-	src: null,
-	alt: '',
-	title: null,
-	size: 64,
-	cover: true,
-});
-
-const canvas = $ref<HTMLCanvasElement>();
-let loaded = $ref(false);
-
-function draw() {
-	if (props.hash == null) return;
-	const pixels = decode(props.hash, props.size, props.size);
-	const ctx = canvas.getContext('2d');
-	const imageData = ctx!.createImageData(props.size, props.size);
-	imageData.data.set(pixels);
-	ctx!.putImageData(imageData, 0, 0);
-}
-
-function onLoad() {
-	loaded = true;
-}
-
-onMounted(() => {
-	draw();
-});
-</script>
-
-<style lang="scss" scoped>
-.xubzgfgb {
-	position: relative;
-	width: 100%;
-	height: 100%;
-
-	> canvas,
-	> img {
-		display: block;
-		width: 100%;
-		height: 100%;
-	}
-
-	> canvas {
-		position: absolute;
-		object-fit: cover;
-	}
-
-	> img {
-		object-fit: contain;
-	}
-
-	&.cover {
-		> img {
-			object-fit: cover;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkInfo.vue b/packages/client/src/components/MkInfo.vue
deleted file mode 100644
index 7aaf2c5bcb..0000000000
--- a/packages/client/src/components/MkInfo.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-<div class="fpezltsf" :class="{ warn }">
-	<i v-if="warn" class="ti ti-alert-triangle"></i>
-	<i v-else class="ti ti-info-circle"></i>
-	<slot></slot>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-
-const props = defineProps<{
-	warn?: boolean;
-}>();
-</script>
-
-<style lang="scss" scoped>
-.fpezltsf {
-	padding: 12px 14px;
-	font-size: 90%;
-	background: var(--infoBg);
-	color: var(--infoFg);
-	border-radius: var(--radius);
-
-	&.warn {
-		background: var(--infoWarnBg);
-		color: var(--infoWarnFg);
-	}
-
-	> i {
-		margin-right: 4px;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkInstanceCardMini.vue b/packages/client/src/components/MkInstanceCardMini.vue
deleted file mode 100644
index 4625de40af..0000000000
--- a/packages/client/src/components/MkInstanceCardMini.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
-<div :class="[$style.root, { yellow: instance.isNotResponding, red: instance.isBlocked, gray: instance.isSuspended }]">
-	<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
-	<div class="body">
-		<span class="host">{{ instance.name ?? instance.host }}</span>
-		<span class="sub _monospace"><b>{{ instance.host }}</b> / {{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</span>
-	</div>
-	<MkMiniChart v-if="chartValues" class="chart" :src="chartValues"/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import * as misskey from 'misskey-js';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
-
-const props = defineProps<{
-	instance: misskey.entities.Instance;
-}>();
-
-let chartValues = $ref<number[] | null>(null);
-
-os.apiGet('charts/instance', { host: props.instance.host, limit: 16 + 1, span: 'day' }).then(res => {
-	// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
-	res.requests.received.splice(0, 1);
-	chartValues = res.requests.received;
-});
-
-function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
-}
-</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: 10px;
-	}
-
-	> :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) {
-			display: block;
-			width: 100%;
-			font-size: 80%;
-			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/components/MkInstanceStats.vue b/packages/client/src/components/MkInstanceStats.vue
deleted file mode 100644
index 41f6f9ffd5..0000000000
--- a/packages/client/src/components/MkInstanceStats.vue
+++ /dev/null
@@ -1,255 +0,0 @@
-<template>
-<div :class="$style.root">
-	<MkFolder class="item">
-		<template #header>Chart</template>
-		<div :class="$style.chart">
-			<div class="selects">
-				<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
-					<optgroup :label="i18n.ts.federation">
-						<option value="federation">{{ i18n.ts._charts.federation }}</option>
-						<option value="ap-request">{{ i18n.ts._charts.apRequest }}</option>
-					</optgroup>
-					<optgroup :label="i18n.ts.users">
-						<option value="users">{{ i18n.ts._charts.usersIncDec }}</option>
-						<option value="users-total">{{ i18n.ts._charts.usersTotal }}</option>
-						<option value="active-users">{{ i18n.ts._charts.activeUsers }}</option>
-					</optgroup>
-					<optgroup :label="i18n.ts.notes">
-						<option value="notes">{{ i18n.ts._charts.notesIncDec }}</option>
-						<option value="local-notes">{{ i18n.ts._charts.localNotesIncDec }}</option>
-						<option value="remote-notes">{{ i18n.ts._charts.remoteNotesIncDec }}</option>
-						<option value="notes-total">{{ i18n.ts._charts.notesTotal }}</option>
-					</optgroup>
-					<optgroup :label="i18n.ts.drive">
-						<option value="drive-files">{{ i18n.ts._charts.filesIncDec }}</option>
-						<option value="drive">{{ i18n.ts._charts.storageUsageIncDec }}</option>
-					</optgroup>
-				</MkSelect>
-				<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px;">
-					<option value="hour">{{ i18n.ts.perHour }}</option>
-					<option value="day">{{ i18n.ts.perDay }}</option>
-				</MkSelect>
-			</div>
-			<div class="chart _panel">
-				<MkChart :src="chartSrc" :span="chartSpan" :limit="chartLimit" :detailed="detailed"></MkChart>
-			</div>
-		</div>
-	</MkFolder>
-
-	<MkFolder class="item">
-		<template #header>Active users heatmap</template>
-		<div class="_panel" :class="$style.heatmap">
-			<MkActiveUsersHeatmap/>
-		</div>
-	</MkFolder>
-
-	<MkFolder class="item">
-		<template #header>Federation</template>
-		<div :class="$style.federation">
-			<div class="pies">
-				<div class="sub">
-					<div class="title">Sub</div>
-					<canvas ref="subDoughnutEl"></canvas>
-				</div>
-				<div class="pub">
-					<div class="title">Pub</div>
-					<canvas ref="pubDoughnutEl"></canvas>
-				</div>
-			</div>
-		</div>
-	</MkFolder>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted } from 'vue';
-import {
-	Chart,
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-	DoughnutController,
-} from 'chart.js';
-import MkSelect from '@/components/form/select.vue';
-import MkChart from '@/components/MkChart.vue';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import MkActiveUsersHeatmap from '@/components/MkActiveUsersHeatmap.vue';
-import MkFolder from '@/components/MkFolder.vue';
-
-Chart.register(
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	DoughnutController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-);
-
-const props = withDefaults(defineProps<{
-	chartLimit?: number;
-	detailed?: boolean;
-}>(), {
-	chartLimit: 90,
-});
-
-const chartSpan = $ref<'hour' | 'day'>('hour');
-const chartSrc = $ref('active-users');
-let subDoughnutEl = $ref<HTMLCanvasElement>();
-let pubDoughnutEl = $ref<HTMLCanvasElement>();
-
-const { handler: externalTooltipHandler1 } = useChartTooltip({
-	position: 'middle',
-});
-const { handler: externalTooltipHandler2 } = useChartTooltip({
-	position: 'middle',
-});
-
-function createDoughnut(chartEl, tooltip, data) {
-	const chartInstance = new Chart(chartEl, {
-		type: 'doughnut',
-		data: {
-			labels: data.map(x => x.name),
-			datasets: [{
-				backgroundColor: data.map(x => x.color),
-				borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
-				borderWidth: 2,
-				hoverOffset: 0,
-				data: data.map(x => x.value),
-			}],
-		},
-		options: {
-			maintainAspectRatio: false,
-			layout: {
-				padding: {
-					left: 16,
-					right: 16,
-					top: 16,
-					bottom: 16,
-				},
-			},
-			onClick: (ev) => {
-				const hit = chartInstance.getElementsAtEventForMode(ev, 'nearest', { intersect: true }, false)[0];
-				if (hit && data[hit.index].onClick) {
-					data[hit.index].onClick();
-				}
-			},
-			plugins: {
-				legend: {
-					display: false,
-				},
-				tooltip: {
-					enabled: false,
-					mode: 'index',
-					animation: {
-						duration: 0,
-					},
-					external: tooltip,
-				},
-			},
-		},
-	});
-
-	return chartInstance;
-}
-
-onMounted(() => {
-	os.apiGet('federation/stats', { limit: 30 }).then(fedStats => {
-		createDoughnut(subDoughnutEl, externalTooltipHandler1, fedStats.topSubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followersCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowersCount }]));
-
-		createDoughnut(pubDoughnutEl, externalTooltipHandler2, fedStats.topPubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followingCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowingCount }]));
-	});
-});
-</script>
-
-<style lang="scss" module>
-.root {
-	&:global {
-		> .item {
-			margin-bottom: 16px;
-		}
-	}
-}
-
-.chart {
-	&:global {
-		> .selects {
-			display: flex;
-			margin-bottom: 12px;
-		}
-
-		> .chart {
-			padding: 16px;
-		}
-	}
-}
-
-.heatmap {
-	padding: 16px;
-	margin-bottom: 16px;
-}
-
-.federation {
-	&:global {
-		> .pies {
-			display: flex;
-			gap: 16px;
-
-			> .sub, > .pub {
-				flex: 1;
-				min-width: 0;
-				position: relative;
-				background: var(--panel);
-				border-radius: var(--radius);
-				padding: 24px;
-				max-height: 300px;
-
-				> .title {
-					position: absolute;
-					top: 24px;
-					left: 24px;
-				}
-			}
-
-			@media (max-width: 600px) {
-				flex-direction: column;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
deleted file mode 100644
index 646172fe8d..0000000000
--- a/packages/client/src/components/MkInstanceTicker.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-<div :class="$style.root" :style="bg">
-	<img v-if="faviconUrl" :class="$style.icon" :src="faviconUrl"/>
-	<div :class="$style.name">{{ instance.name }}</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import { instanceName } from '@/config';
-import { instance as Instance } from '@/instance';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
-
-const props = defineProps<{
-	instance?: {
-		faviconUrl?: string
-		name: string
-		themeColor?: string
-	}
-}>();
-
-// if no instance data is given, this is for the local instance
-const instance = props.instance ?? {
-	name: instanceName,
-	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content,
-};
-
-const faviconUrl = $computed(() => props.instance ? getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') : getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(Instance.faviconUrl, 'preview') ?? '/favicon.ico');
-
-const themeColor = instance.themeColor ?? '#777777';
-
-const bg = {
-	background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`,
-};
-</script>
-
-<style lang="scss" module>
-$height: 2ex;
-
-.root {
-	display: flex;
-	align-items: center;
-	height: $height;
-	border-radius: 4px 0 0 4px;
-	overflow: clip;
-	color: #fff;
-	text-shadow: /* .866 ≈ sin(60deg) */
-		1px 0 1px #000,
-		.866px .5px 1px #000,
-		.5px .866px 1px #000,
-		0 1px 1px #000,
-		-.5px .866px 1px #000,
-		-.866px .5px 1px #000,
-		-1px 0 1px #000,
-		-.866px -.5px 1px #000,
-		-.5px -.866px 1px #000,
-		0 -1px 1px #000,
-		.5px -.866px 1px #000,
-		.866px -.5px 1px #000;
-	mask-image: linear-gradient(90deg,
-		rgb(0,0,0),
-		rgb(0,0,0) calc(100% - 16px),
-		rgba(0,0,0,0) 100%
-	);
-}
-
-.icon {
-	height: $height;
-	flex-shrink: 0;
-}
-
-.name {
-	margin-left: 4px;
-	line-height: 1;
-	font-size: 0.9em;
-	font-weight: bold;
-	white-space: nowrap;
-	overflow: visible;
-}
-</style>
diff --git a/packages/client/src/components/MkKeyValue.vue b/packages/client/src/components/MkKeyValue.vue
deleted file mode 100644
index ff69c79641..0000000000
--- a/packages/client/src/components/MkKeyValue.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-<div class="alqyeyti" :class="{ oneline }">
-	<div class="key">
-		<slot name="key"></slot>
-	</div>
-	<div class="value">
-		<slot name="value"></slot>
-		<button v-if="copy" v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="ti ti-copy"></i></button>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-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 {
-		font-size: 0.85em;
-		padding: 0 0 0.25em 0;
-		opacity: 0.75;
-	}
-
-	&.oneline {
-		display: flex;
-
-		> .key {
-			width: 30%;
-			font-size: 1em;
-			padding: 0 8px 0 0;
-		}
-
-		> .value {
-			width: 70%;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkLaunchPad.vue b/packages/client/src/components/MkLaunchPad.vue
deleted file mode 100644
index 1ccc648c72..0000000000
--- a/packages/client/src/components/MkLaunchPad.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="preferedModalType" :anchor="anchor" :transparent-bg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
-	<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
-		<div class="main">
-			<template v-for="item in items">
-				<button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
-					<i class="icon" :class="item.icon"></i>
-					<div class="text">{{ item.text }}</div>
-					<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
-				</button>
-				<MkA v-else v-click-anime :to="item.to" @click.passive="close()">
-					<i class="icon" :class="item.icon"></i>
-					<div class="text">{{ item.text }}</div>
-					<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
-				</MkA>
-			</template>
-		</div>
-	</div>
-</MkModal>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import { navbarItemDef } from '@/navbar';
-import { instanceName } from '@/config';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { deviceKind } from '@/scripts/device-kind';
-import * as os from '@/os';
-
-const props = withDefaults(defineProps<{
-	src?: HTMLElement;
-	anchor?: { x: string; y: string; };
-}>(), {
-	anchor: () => ({ x: 'right', y: 'center' }),
-});
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-
-const preferedModalType = (deviceKind === 'desktop' && props.src != null) ? 'popup' :
-	deviceKind === 'smartphone' ? 'drawer' :
-	'dialog';
-
-const modal = $ref<InstanceType<typeof MkModal>>();
-
-const menu = defaultStore.state.menu;
-
-const items = Object.keys(navbarItemDef).filter(k => !menu.includes(k)).map(k => navbarItemDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
-	type: def.to ? 'link' : 'button',
-	text: i18n.ts[def.title],
-	icon: def.icon,
-	to: def.to,
-	action: def.action,
-	indicate: def.indicated,
-}));
-
-function close() {
-	modal.close();
-}
-</script>
-
-<style lang="scss" scoped>
-.szkkfdyq {
-	max-height: 100%;
-	width: min(460px, 100vw);
-	padding: 24px;
-	box-sizing: border-box;
-	overflow: auto;
-	overscroll-behavior: contain;
-	text-align: left;
-	border-radius: 16px;
-
-	&.asDrawer {
-		width: 100%;
-		padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
-		border-radius: 24px;
-		border-bottom-right-radius: 0;
-		border-bottom-left-radius: 0;
-		text-align: center;
-	}
-
-	> .main, > .sub {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-
-		> * {
-			position: relative;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			vertical-align: bottom;
-			height: 100px;
-			border-radius: 10px;
-
-			&:hover {
-				color: var(--accent);
-				background: var(--accentedBg);
-				text-decoration: none;
-			}
-
-			> .icon {
-				font-size: 24px;
-				height: 24px;
-			}
-
-			> .text {
-				margin-top: 12px;
-				font-size: 0.8em;
-				line-height: 1.5em;
-			}
-
-			> .indicator {
-				position: absolute;
-				top: 32px;
-				left: 32px;
-				color: var(--indicator);
-				font-size: 8px;
-				animation: blink 1s infinite;
-
-				@media (max-width: 500px) {
-					top: 16px;
-					left: 16px;
-				}
-			}
-		}
-	}
-
-	> .sub {
-		margin-top: 8px;
-		padding-top: 8px;
-		border-top: solid 0.5px var(--divider);
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkLink.vue b/packages/client/src/components/MkLink.vue
deleted file mode 100644
index 6148ec6195..0000000000
--- a/packages/client/src/components/MkLink.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-<component
-	:is="self ? 'MkA' : 'a'" ref="el" class="xlcxczvw _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
-	:title="url"
->
-	<slot></slot>
-	<i v-if="target === '_blank'" class="ti ti-external-link icon"></i>
-</component>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { url as local } from '@/config';
-import { useTooltip } from '@/scripts/use-tooltip';
-import * as os from '@/os';
-
-const props = withDefaults(defineProps<{
-	url: string;
-	rel?: null | string;
-}>(), {
-});
-
-const self = props.url.startsWith(local);
-const attr = self ? 'to' : 'href';
-const target = self ? null : '_blank';
-
-const el = $ref();
-
-useTooltip($$(el), (showing) => {
-	os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
-		showing,
-		url: props.url,
-		source: el,
-	}, {}, 'closed');
-});
-</script>
-
-<style lang="scss" scoped>
-.xlcxczvw {
-	word-break: break-all;
-
-	> .icon {
-		padding-left: 2px;
-		font-size: .9em;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkMarquee.vue b/packages/client/src/components/MkMarquee.vue
deleted file mode 100644
index 5ca04b0b48..0000000000
--- a/packages/client/src/components/MkMarquee.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<script lang="ts">
-import { h, onMounted, onUnmounted, ref, watch } from 'vue';
-
-export default {
-	name: 'MarqueeText',
-	props: {
-		duration: {
-			type: Number,
-			default: 15,
-		},
-		repeat: {
-			type: Number,
-			default: 2,
-		},
-		paused: {
-			type: Boolean,
-			default: false,
-		},
-		reverse: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup(props) {
-		const contentEl = ref();
-
-		function calc() {
-			const eachLength = contentEl.value.offsetWidth / props.repeat;
-			const factor = 3000;
-			const duration = props.duration / ((1 / eachLength) * factor);
-
-			contentEl.value.style.animationDuration = `${duration}s`;
-		}
-
-		watch(() => props.duration, calc);
-
-		onMounted(() => {
-			calc();
-		});
-
-		onUnmounted(() => {
-		});
-
-		return {
-			contentEl,
-		};
-	},
-	render({
-		$slots, $style, $props: {
-			duration, repeat, paused, reverse,
-		},
-	}) {
-		return h('div', { class: [$style.wrap] }, [
-			h('span', {
-				ref: 'contentEl',
-				class: [
-					paused
-						? $style.paused
-						: undefined,
-					$style.content,
-				],
-			}, Array(repeat).fill(
-				h('span', {
-					class: $style.text,
-					style: {
-						animationDirection: reverse
-							? 'reverse'
-							: undefined,
-					},
-				}, $slots.default()),
-			)),
-		]);
-	},
-};
-</script>
-
-<style lang="scss" module>
-.wrap {
-	overflow: clip;
-	animation-play-state: running;
-
-	&:hover {
-		animation-play-state: paused;
-	}
-}
-.content {
-	display: inline-block;
-	white-space: nowrap;
-	animation-play-state: inherit;
-}
-.text {
-	display: inline-block;
-	animation-name: marquee;
-	animation-timing-function: linear;
-	animation-iteration-count: infinite;
-	animation-duration: inherit;
-	animation-play-state: inherit;
-}
-.paused .text {
-	animation-play-state: paused;
-}
-@keyframes marquee {
-	0% { transform:translateX(0); }
-	100% { transform:translateX(-100%); }
-}
-</style>
diff --git a/packages/client/src/components/MkMediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
deleted file mode 100644
index aa06c00fc6..0000000000
--- a/packages/client/src/components/MkMediaBanner.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-<div class="mk-media-banner">
-	<div v-if="media.isSensitive && hide" class="sensitive" @click="hide = false">
-		<span class="icon"><i class="ti ti-alert-triangle"></i></span>
-		<b>{{ $ts.sensitive }}</b>
-		<span>{{ $ts.clickToShow }}</span>
-	</div>
-	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
-		<audio
-			ref="audioEl"
-			class="audio"
-			:src="media.url"
-			:title="media.name"
-			controls
-			preload="metadata"
-			@volumechange="volumechange"
-		/>
-	</div>
-	<a
-		v-else class="download"
-		:href="media.url"
-		:title="media.name"
-		:download="media.name"
-	>
-		<span class="icon"><i class="ti ti-download"></i></span>
-		<b>{{ media.name }}</b>
-	</a>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as misskey from 'misskey-js';
-import { ColdDeviceStorage } from '@/store';
-
-const props = withDefaults(defineProps<{
-	media: misskey.entities.DriveFile;
-}>(), {
-});
-
-const audioEl = $ref<HTMLAudioElement | null>();
-let hide = $ref(true);
-
-function volumechange() {
-	if (audioEl) ColdDeviceStorage.set('mediaVolume', audioEl.volume);
-}
-
-onMounted(() => {
-	if (audioEl) audioEl.volume = ColdDeviceStorage.get('mediaVolume');
-});
-</script>
-
-<style lang="scss" scoped>
-.mk-media-banner {
-	width: 100%;
-	border-radius: 4px;
-	margin-top: 4px;
-	overflow: hidden;
-
-	> .download,
-	> .sensitive {
-		display: flex;
-		align-items: center;
-		font-size: 12px;
-		padding: 8px 12px;
-		white-space: nowrap;
-
-		> * {
-			display: block;
-		}
-
-		> b {
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		> *:not(:last-child) {
-			margin-right: .2em;
-		}
-
-		> .icon {
-			font-size: 1.6em;
-		}
-	}
-
-	> .download {
-		background: var(--noteAttachedFile);
-	}
-
-	> .sensitive {
-		background: #111;
-		color: #fff;
-	}
-
-	> .audio {
-		.audio {
-			display: block;
-			width: 100%;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkMediaImage.vue b/packages/client/src/components/MkMediaImage.vue
deleted file mode 100644
index 56570eaa05..0000000000
--- a/packages/client/src/components/MkMediaImage.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-<div v-if="hide" class="qjewsnkg" @click="hide = false">
-	<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
-	<div class="text">
-		<div class="wrapper">
-			<b style="display: block;"><i class="ti ti-alert-triangle"></i> {{ $ts.sensitive }}</b>
-			<span style="display: block;">{{ $ts.clickToShow }}</span>
-		</div>
-	</div>
-</div>
-<div v-else class="gqnyydlz">
-	<a
-		:href="image.url"
-		:title="image.name"
-	>
-		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :title="image.comment" :cover="false"/>
-		<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
-	</a>
-	<button v-tooltip="$ts.hide" class="_button hide" @click="hide = true"><i class="ti ti-eye-off"></i></button>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { watch } from 'vue';
-import * as misskey from 'misskey-js';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import { defaultStore } from '@/store';
-
-const props = defineProps<{
-	image: misskey.entities.DriveFile;
-	raw?: boolean;
-}>();
-
-let hide = $ref(true);
-
-const url = (props.raw || defaultStore.state.loadRawImages)
-	? props.image.url
-	: defaultStore.state.disableShowingAnimatedImages
-		? getStaticImageUrl(props.image.thumbnailUrl)
-		: props.image.thumbnailUrl;
-
-// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
-watch(() => props.image, () => {
-	hide = (defaultStore.state.nsfw === 'force') ? true : props.image.isSensitive && (defaultStore.state.nsfw !== 'ignore');
-}, {
-	deep: true,
-	immediate: true,
-});
-</script>
-
-<style lang="scss" scoped>
-.qjewsnkg {
-	position: relative;
-
-	> .bg {
-		filter: brightness(0.5);
-	}
-
-	> .text {
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 1;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		> .wrapper {
-			display: table-cell;
-			text-align: center;
-			font-size: 0.8em;
-			color: #fff;
-		}
-	}
-}
-
-.gqnyydlz {
-	position: relative;
-	//box-shadow: 0 0 0 1px var(--divider) inset;
-	background: var(--bg);
-
-	> .hide {
-		display: block;
-		position: absolute;
-		border-radius: 6px;
-		background-color: var(--accentedBg);
-		-webkit-backdrop-filter: var(--blur, blur(15px));
-		backdrop-filter: var(--blur, blur(15px));
-		color: var(--accent);
-		font-size: 0.8em;
-		padding: 6px 8px;
-		text-align: center;
-		top: 12px;
-		right: 12px;
-
-		> i {
-			display: block;
-		}
-	}
-
-	> a {
-		display: block;
-		cursor: zoom-in;
-		overflow: hidden;
-		width: 100%;
-		height: 100%;
-		background-position: center;
-		background-size: contain;
-		background-repeat: no-repeat;
-
-		> .gif {
-			background-color: var(--fg);
-			border-radius: 6px;
-			color: var(--accentLighten);
-			display: inline-block;
-			font-size: 14px;
-			font-weight: bold;
-			left: 12px;
-			opacity: .5;
-			padding: 0 6px;
-			text-align: center;
-			top: 12px;
-			pointer-events: none;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue
deleted file mode 100644
index c6f8612182..0000000000
--- a/packages/client/src/components/MkMediaList.vue
+++ /dev/null
@@ -1,189 +0,0 @@
-<template>
-<div class="hoawjimk">
-	<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
-	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container">
-		<div ref="gallery" :data-count="mediaList.filter(media => previewable(media)).length">
-			<template v-for="media in mediaList.filter(media => previewable(media))">
-				<XVideo v-if="media.type.startsWith('video')" :key="media.id" :video="media"/>
-				<XImage v-else-if="media.type.startsWith('image')" :key="media.id" class="image" :data-id="media.id" :image="media" :raw="raw"/>
-			</template>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import * as misskey from 'misskey-js';
-import PhotoSwipeLightbox from 'photoswipe/lightbox';
-import PhotoSwipe from 'photoswipe';
-import 'photoswipe/style.css';
-import XBanner from '@/components/MkMediaBanner.vue';
-import XImage from '@/components/MkMediaImage.vue';
-import XVideo from '@/components/MkMediaVideo.vue';
-import * as os from '@/os';
-import { FILE_TYPE_BROWSERSAFE } from '@/const';
-import { defaultStore } from '@/store';
-
-const props = defineProps<{
-	mediaList: misskey.entities.DriveFile[];
-	raw?: boolean;
-}>();
-
-const gallery = ref(null);
-const pswpZIndex = os.claimZIndex('middle');
-
-onMounted(() => {
-	const lightbox = new PhotoSwipeLightbox({
-		dataSource: props.mediaList
-			.filter(media => {
-				if (media.type === 'image/svg+xml') return true; // svgのwebpublicはpngなのでtrue
-				return media.type.startsWith('image') && FILE_TYPE_BROWSERSAFE.includes(media.type);
-			})
-			.map(media => {
-				const item = {
-					src: media.url,
-					w: media.properties.width,
-					h: media.properties.height,
-					alt: media.name,
-				};
-				if (media.properties.orientation != null && media.properties.orientation >= 5) {
-					[item.w, item.h] = [item.h, item.w];
-				}
-				return item;
-			}),
-		gallery: gallery.value,
-		children: '.image',
-		thumbSelector: '.image',
-		loop: false,
-		padding: window.innerWidth > 500 ? {
-			top: 32,
-			bottom: 32,
-			left: 32,
-			right: 32,
-		} : {
-			top: 0,
-			bottom: 0,
-			left: 0,
-			right: 0,
-		},
-		imageClickAction: 'close',
-		tapAction: 'toggle-controls',
-		pswpModule: PhotoSwipe,
-	});
-
-	lightbox.on('itemData', (ev) => {
-		const { itemData } = ev;
-
-		// element is children
-		const { element } = itemData;
-
-		const id = element.dataset.id;
-		const file = props.mediaList.find(media => media.id === id);
-
-		itemData.src = file.url;
-		itemData.w = Number(file.properties.width);
-		itemData.h = Number(file.properties.height);
-		if (file.properties.orientation != null && file.properties.orientation >= 5) {
-			[itemData.w, itemData.h] = [itemData.h, itemData.w];
-		}
-		itemData.msrc = file.thumbnailUrl;
-		itemData.thumbCropped = true;
-	});
-
-	lightbox.init();
-});
-
-const previewable = (file: misskey.entities.DriveFile): boolean => {
-	if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
-	// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
-	return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
-};
-</script>
-
-<style lang="scss" scoped>
-.hoawjimk {
-	> .gird-container {
-		position: relative;
-		width: 100%;
-		margin-top: 4px;
-
-		&:before {
-			content: '';
-			display: block;
-			padding-top: 56.25% // 16:9;
-		}
-
-		> div {
-			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			display: grid;
-			grid-gap: 8px;
-
-			> * {
-				overflow: hidden;
-				border-radius: 6px;
-			}
-
-			&[data-count="1"] {
-				grid-template-rows: 1fr;
-			}
-
-			&[data-count="2"] {
-				grid-template-columns: 1fr 1fr;
-				grid-template-rows: 1fr;
-			}
-
-			&[data-count="3"] {
-				grid-template-columns: 1fr 0.5fr;
-				grid-template-rows: 1fr 1fr;
-
-				> *:nth-child(1) {
-					grid-row: 1 / 3;
-				}
-
-				> *:nth-child(3) {
-					grid-column: 2 / 3;
-					grid-row: 2 / 3;
-				}
-			}
-
-			&[data-count="4"] {
-				grid-template-columns: 1fr 1fr;
-				grid-template-rows: 1fr 1fr;
-			}
-
-			> *:nth-child(1) {
-				grid-column: 1 / 2;
-				grid-row: 1 / 2;
-			}
-
-			> *:nth-child(2) {
-				grid-column: 2 / 3;
-				grid-row: 1 / 2;
-			}
-
-			> *:nth-child(3) {
-				grid-column: 1 / 2;
-				grid-row: 2 / 3;
-			}
-
-			> *:nth-child(4) {
-				grid-column: 2 / 3;
-				grid-row: 2 / 3;
-			}
-		}
-	}
-}
-</style>
-
-<style lang="scss">
-.pswp {
-	// なぜか機能しない
-  //z-index: v-bind(pswpZIndex);
-	z-index: 2000000;
-}
-</style>
diff --git a/packages/client/src/components/MkMediaVideo.vue b/packages/client/src/components/MkMediaVideo.vue
deleted file mode 100644
index df0bf84116..0000000000
--- a/packages/client/src/components/MkMediaVideo.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-<div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
-	<div>
-		<b><i class="ti ti-alert-triangle"></i> {{ $ts.sensitive }}</b>
-		<span>{{ $ts.clickToShow }}</span>
-	</div>
-</div>
-<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
-	<video
-		:poster="video.thumbnailUrl"
-		:title="video.comment"
-		:alt="video.comment"
-		preload="none"
-		controls
-		@contextmenu.stop
-	>
-		<source 
-			:src="video.url" 
-			:type="video.type"
-		>
-	</video>
-	<i class="ti ti-eye-off" @click="hide = true"></i>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import * as misskey from 'misskey-js';
-import { defaultStore } from '@/store';
-
-const props = defineProps<{
-	video: misskey.entities.DriveFile;
-}>();
-
-const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
-</script>
-
-<style lang="scss" scoped>
-.kkjnbbplepmiyuadieoenjgutgcmtsvu {
-	position: relative;
-
-	> i {
-		display: block;
-		position: absolute;
-		border-radius: 6px;
-		background-color: var(--fg);
-		color: var(--accentLighten);
-		font-size: 14px;
-		opacity: .5;
-		padding: 3px 6px;
-		text-align: center;
-		cursor: pointer;
-		top: 12px;
-		right: 12px;
-	}
-
-	> video {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		font-size: 3.5em;
-		overflow: hidden;
-		background-position: center;
-		background-size: cover;
-		width: 100%;
-		height: 100%;
-	}
-}
-
-.icozogqfvdetwohsdglrbswgrejoxbdj {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background: #111;
-	color: #fff;
-
-	> div {
-		display: table-cell;
-		text-align: center;
-		font-size: 12px;
-
-		> b {
-			display: block;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkMention.vue b/packages/client/src/components/MkMention.vue
deleted file mode 100644
index 3091b435e4..0000000000
--- a/packages/client/src/components/MkMention.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }">
-	<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
-	<span class="main">
-		<span class="username">@{{ username }}</span>
-		<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
-	</span>
-</MkA>
-<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }">
-	<span class="main">
-		<span class="username">@{{ username }}</span>
-		<span class="host">@{{ toUnicode(host) }}</span>
-	</span>
-</a>
-</template>
-
-<script lang="ts" setup>
-import { toUnicode } from 'punycode';
-import { } from 'vue';
-import tinycolor from 'tinycolor2';
-import { host as localHost } from '@/config';
-import { $i } from '@/account';
-
-const props = defineProps<{
-	username: string;
-	host: string;
-}>();
-
-const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`;
-
-const url = `/${canonical}`;
-
-const isMe = $i && (
-	`@${props.username}@${toUnicode(props.host)}` === `@${$i.username}@${toUnicode(localHost)}`.toLowerCase()
-);
-
-const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue(isMe ? '--mentionMe' : '--mention'));
-bg.setAlpha(0.1);
-const bgCss = bg.toRgbString();
-</script>
-
-<style lang="scss" scoped>
-.akbvjaqn {
-	display: inline-block;
-	padding: 4px 8px 4px 4px;
-	border-radius: 999px;
-	color: var(--mention);
-
-	&.isMe {
-		color: var(--mentionMe);
-	}
-
-	> .icon {
-		width: 1.5em;
-		height: 1.5em;
-		object-fit: cover;
-		margin: 0 0.2em 0 0;
-		vertical-align: bottom;
-		border-radius: 100%;
-	}
-
-	> .main > .host {
-		opacity: 0.5;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkMenu.child.vue b/packages/client/src/components/MkMenu.child.vue
deleted file mode 100644
index 3ada4afbdc..0000000000
--- a/packages/client/src/components/MkMenu.child.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-<div ref="el" class="sfhdhdhr">
-	<MkMenu ref="menu" :items="items" :align="align" :width="width" :as-drawer="false" @close="onChildClosed"/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { on } from 'events';
-import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
-import MkMenu from './MkMenu.vue';
-import { MenuItem } from '@/types/menu';
-import * as os from '@/os';
-
-const props = defineProps<{
-	items: MenuItem[];
-	targetElement: HTMLElement;
-	rootElement: HTMLElement;
-	width?: number;
-	viaKeyboard?: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-	(ev: 'actioned'): void;
-}>();
-
-const el = ref<HTMLElement>();
-const align = 'left';
-
-function setPosition() {
-	const rootRect = props.rootElement.getBoundingClientRect();
-	const rect = props.targetElement.getBoundingClientRect();
-	const left = props.targetElement.offsetWidth;
-	const top = (rect.top - rootRect.top) - 8;
-	el.value.style.left = left + 'px';
-	el.value.style.top = top + 'px';
-}
-
-function onChildClosed(actioned?: boolean) {
-	if (actioned) {
-		emit('actioned');
-	} else {
-		emit('closed');
-	}
-}
-
-onMounted(() => {
-	setPosition();
-	nextTick(() => {
-		setPosition();
-	});
-});
-
-defineExpose({
-	checkHit: (ev: MouseEvent) => {
-		return (ev.target === el.value || el.value.contains(ev.target));
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.sfhdhdhr {
-	position: absolute;
-}
-</style>
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
deleted file mode 100644
index 64d18b6b7c..0000000000
--- a/packages/client/src/components/MkMenu.vue
+++ /dev/null
@@ -1,367 +0,0 @@
-<template>
-<div>
-	<div
-		ref="itemsEl" v-hotkey="keymap"
-		class="rrevdjwt _popup _shadow"
-		:class="{ center: align === 'center', asDrawer }"
-		:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
-		@contextmenu.self="e => e.preventDefault()"
-	>
-		<template v-for="(item, i) in items2">
-			<div v-if="item === null" class="divider"></div>
-			<span v-else-if="item.type === 'label'" class="label item">
-				<span>{{ item.text }}</span>
-			</span>
-			<span v-else-if="item.type === 'pending'" :tabindex="i" class="pending item">
-				<span><MkEllipsis/></span>
-			</span>
-			<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<i v-if="item.icon" class="ti-fw" :class="item.icon"></i>
-				<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
-				<span>{{ item.text }}</span>
-				<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
-			</MkA>
-			<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<i v-if="item.icon" class="ti-fw" :class="item.icon"></i>
-				<span>{{ item.text }}</span>
-				<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
-			</a>
-			<button v-else-if="item.type === 'user'" :tabindex="i" class="_button item" :class="{ active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
-				<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
-			</button>
-			<span v-else-if="item.type === 'switch'" :tabindex="i" class="item" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<FormSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch">{{ item.text }}</FormSwitch>
-			</span>
-			<button v-else-if="item.type === 'parent'" :tabindex="i" class="_button item parent" :class="{ childShowing: childShowingItem === item }" @mouseenter="showChildren(item, $event)">
-				<i v-if="item.icon" class="ti-fw" :class="item.icon"></i>
-				<span>{{ item.text }}</span>
-				<span class="caret"><i class="ti ti-caret-right ti-fw"></i></span>
-			</button>
-			<button v-else :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<i v-if="item.icon" class="ti-fw" :class="item.icon"></i>
-				<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
-				<span>{{ item.text }}</span>
-				<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
-			</button>
-		</template>
-		<span v-if="items2.length === 0" class="none item">
-			<span>{{ i18n.ts.none }}</span>
-		</span>
-	</div>
-	<div v-if="childMenu" class="child">
-		<XChild ref="child" :items="childMenu" :target-element="childTarget" :root-element="itemsEl" showing @actioned="childActioned"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
-import { focusPrev, focusNext } from '@/scripts/focus';
-import FormSwitch from '@/components/form/switch.vue';
-import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue'));
-
-const props = defineProps<{
-	items: MenuItem[];
-	viaKeyboard?: boolean;
-	asDrawer?: boolean;
-	align?: 'center' | string;
-	width?: number;
-	maxHeight?: number;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'close', actioned?: boolean): void;
-}>();
-
-let itemsEl = $ref<HTMLDivElement>();
-
-let items2: InnerMenuItem[] = $ref([]);
-
-let child = $ref<InstanceType<typeof XChild>>();
-
-let keymap = $computed(() => ({
-	'up|k|shift+tab': focusUp,
-	'down|j|tab': focusDown,
-	'esc': close,
-}));
-
-let childShowingItem = $ref<MenuItem | null>();
-
-watch(() => props.items, () => {
-	const items: (MenuItem | MenuPending)[] = [...props.items].filter(item => item !== undefined);
-
-	for (let i = 0; i < items.length; i++) {
-		const item = items[i];
-
-		if (item && 'then' in item) { // if item is Promise
-			items[i] = { type: 'pending' };
-			item.then(actualItem => {
-				items2[i] = actualItem;
-			});
-		}
-	}
-
-	items2 = items as InnerMenuItem[];
-}, {
-	immediate: true,
-});
-
-let childMenu = $ref<MenuItem[] | null>();
-let childTarget = $ref<HTMLElement | null>();
-
-function closeChild() {
-	childMenu = null;
-	childShowingItem = null;
-}
-
-function childActioned() {
-	closeChild();
-	close(true);
-}
-
-function onGlobalMousedown(event: MouseEvent) {
-	if (childTarget && (event.target === childTarget || childTarget.contains(event.target))) return;
-	if (child && child.checkHit(event)) return;
-	closeChild();
-}
-
-let childCloseTimer: null | number = null;
-function onItemMouseEnter(item) {
-	childCloseTimer = window.setTimeout(() => {
-		closeChild();
-	}, 300);
-}
-function onItemMouseLeave(item) {
-	if (childCloseTimer) window.clearTimeout(childCloseTimer);
-}
-
-async function showChildren(item: MenuItem, ev: MouseEvent) {
-	if (props.asDrawer) {
-		os.popupMenu(item.children, ev.currentTarget ?? ev.target);
-		close();
-	} else {
-		childTarget = ev.currentTarget ?? ev.target;
-		childMenu = item.children;
-		childShowingItem = item;
-	}
-}
-
-function clicked(fn: MenuAction, ev: MouseEvent) {
-	fn(ev);
-	close(true);
-}
-
-function close(actioned = false) {
-	emit('close', actioned);
-}
-
-function focusUp() {
-	focusPrev(document.activeElement);
-}
-
-function focusDown() {
-	focusNext(document.activeElement);
-}
-
-onMounted(() => {
-	if (props.viaKeyboard) {
-		nextTick(() => {
-			focusNext(itemsEl.children[0], true, false);
-		});
-	}
-
-	// TODO: アクティブな要素までスクロール
-	//itemsEl.scrollTo();
-
-	document.addEventListener('mousedown', onGlobalMousedown, { passive: true });
-});
-
-onBeforeUnmount(() => {
-	document.removeEventListener('mousedown', onGlobalMousedown);
-});
-</script>
-
-<style lang="scss" scoped>
-.rrevdjwt {
-	padding: 8px 0;
-	box-sizing: border-box;
-	min-width: 200px;
-	overflow: auto;
-	overscroll-behavior: contain;
-
-	&.center {
-		> .item {
-			text-align: center;
-		}
-	}
-
-	> .item {
-		display: block;
-		position: relative;
-		padding: 6px 16px;
-		width: 100%;
-		box-sizing: border-box;
-		white-space: nowrap;
-		font-size: 0.9em;
-		line-height: 20px;
-		text-align: left;
-		overflow: hidden;
-		text-overflow: ellipsis;
-
-		&:before {
-			content: "";
-			display: block;
-			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			margin: auto;
-			width: calc(100% - 16px);
-			height: 100%;
-			border-radius: 6px;
-		}
-
-		> * {
-			position: relative;
-		}
-
-		&:not(:disabled):hover {
-			color: var(--accent);
-			text-decoration: none;
-
-			&:before {
-				background: var(--accentedBg);
-			}
-		}
-
-		&.danger {
-			color: #ff2a2a;
-
-			&:hover {
-				color: #fff;
-
-				&:before {
-					background: #ff4242;
-				}
-			}
-
-			&:active {
-				color: #fff;
-
-				&:before {
-					background: #d42e2e;
-				}
-			}
-		}
-
-		&.active {
-			color: var(--fgOnAccent);
-			opacity: 1;
-
-			&:before {
-				background: var(--accent);
-			}
-		}
-
-		&:not(:active):focus-visible {
-			box-shadow: 0 0 0 2px var(--focus) inset;
-		}
-
-		&.label {
-			pointer-events: none;
-			font-size: 0.7em;
-			padding-bottom: 4px;
-
-			> span {
-				opacity: 0.7;
-			}
-		}
-
-		&.pending {
-			pointer-events: none;
-			opacity: 0.7;
-		}
-
-		&.none {
-			pointer-events: none;
-			opacity: 0.7;
-		}
-
-		&.parent {
-			display: flex;
-			align-items: center;
-			cursor: default;
-
-			> .caret {
-				margin-left: auto;
-			}
-
-			&.childShowing {
-				color: var(--accent);
-				text-decoration: none;
-
-				&:before {
-					background: var(--accentedBg);
-				}
-			}
-		}
-
-		> i {
-			margin-right: 5px;
-			width: 20px;
-		}
-
-		> .avatar {
-			margin-right: 5px;
-			width: 20px;
-			height: 20px;
-		}
-
-		> .indicator {
-			position: absolute;
-			top: 5px;
-			left: 13px;
-			color: var(--indicator);
-			font-size: 12px;
-			animation: blink 1s infinite;
-		}
-	}
-
-	> .divider {
-		margin: 8px 0;
-		border-top: solid 0.5px var(--divider);
-	}
-
-	&.asDrawer {
-		padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0;
-		width: 100%;
-		border-radius: 24px;
-		border-bottom-right-radius: 0;
-		border-bottom-left-radius: 0;
-
-		> .item {
-			font-size: 1em;
-			padding: 12px 24px;
-
-			&:before {
-				width: calc(100% - 24px);
-				border-radius: 12px;
-			}
-
-			> i {
-				margin-right: 14px;
-				width: 24px;
-			}
-		}
-
-		> .divider {
-			margin: 12px 0;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkMiniChart.vue b/packages/client/src/components/MkMiniChart.vue
deleted file mode 100644
index c64ce163f9..0000000000
--- a/packages/client/src/components/MkMiniChart.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" style="overflow:visible">
-	<defs>
-		<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
-			<stop offset="0%" :stop-color="color" stop-opacity="0"></stop>
-			<stop offset="100%" :stop-color="color" stop-opacity="0.65"></stop>
-		</linearGradient>
-	</defs>
-	<polygon
-		:points="polygonPoints"
-		:style="`stroke: none; fill: url(#${ gradientId });`"
-	/>
-	<polyline
-		:points="polylinePoints"
-		fill="none"
-		:stroke="color"
-		stroke-width="2"
-	/>
-	<circle
-		:cx="headX"
-		:cy="headY"
-		r="3"
-		:fill="color"
-	/>
-</svg>
-</template>
-
-<script lang="ts" setup>
-import { onUnmounted, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
-import tinycolor from 'tinycolor2';
-import { useInterval } from '@/scripts/use-interval';
-
-const props = defineProps<{
-	src: number[];
-}>();
-
-const viewBoxX = 50;
-const viewBoxY = 50;
-const gradientId = 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 accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
-const color = accent.toRgbString();
-
-function draw(): void {
-	const stats = props.src.slice().reverse();
-	const peak = Math.max.apply(null, stats) || 1;
-
-	const _polylinePoints = stats.map((n, i) => [
-		i * (viewBoxX / (stats.length - 1)),
-		(1 - (n / peak)) * viewBoxY,
-	]);
-
-	polylinePoints = _polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
-
-	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を発動させない場合があるので
-useInterval(draw, 1000, {
-	immediate: false,
-	afterMounted: true,
-});
-</script>
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
deleted file mode 100644
index 2305a02794..0000000000
--- a/packages/client/src/components/MkModal.vue
+++ /dev/null
@@ -1,406 +0,0 @@
-<template>
-<transition :name="$store.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : ''" :duration="$store.state.animation ? 200 : 0" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened">
-	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" class="qzhlnise" :class="{ drawer: type === 'drawer', dialog: type === 'dialog' || type === 'dialog:top', popup: type === 'popup' }" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
-		<div class="bg _modalBg" :class="{ transparent: transparentBg && (type === 'popup') }" :style="{ zIndex }" @click="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
-		<div ref="content" class="content" :class="{ fixed, top: type === 'dialog:top' }" :style="{ zIndex }" @click.self="onBgClick">
-			<slot :max-height="maxHeight" :type="type"></slot>
-		</div>
-	</div>
-</transition>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, onMounted, watch, provide } from 'vue';
-import * as os from '@/os';
-import { isTouchUsing } from '@/scripts/touch';
-import { defaultStore } from '@/store';
-import { deviceKind } from '@/scripts/device-kind';
-
-function getFixedContainer(el: Element | null): Element | null {
-	if (el == null || el.tagName === 'BODY') return null;
-	const position = window.getComputedStyle(el).getPropertyValue('position');
-	if (position === 'fixed') {
-		return el;
-	} else {
-		return getFixedContainer(el.parentElement);
-	}
-}
-
-type ModalTypes = 'popup' | 'dialog' | 'dialog:top' | 'drawer';
-
-const props = withDefaults(defineProps<{
-	manualShowing?: boolean | null;
-	anchor?: { x: string; y: string; };
-	src?: HTMLElement;
-	preferType?: ModalTypes | 'auto';
-	zPriority?: 'low' | 'middle' | 'high';
-	noOverlap?: boolean;
-	transparentBg?: boolean;
-}>(), {
-	manualShowing: null,
-	src: null,
-	anchor: () => ({ x: 'center', y: 'bottom' }),
-	preferType: 'auto',
-	zPriority: 'low',
-	noOverlap: true,
-	transparentBg: false,
-});
-
-const emit = defineEmits<{
-	(ev: 'opening'): void;
-	(ev: 'opened'): void;
-	(ev: 'click'): void;
-	(ev: 'esc'): void;
-	(ev: 'close'): void;
-	(ev: 'closed'): void;
-}>();
-
-provide('modal', true);
-
-let maxHeight = $ref<number>();
-let fixed = $ref(false);
-let transformOrigin = $ref('center');
-let showing = $ref(true);
-let content = $ref<HTMLElement>();
-const zIndex = os.claimZIndex(props.zPriority);
-const type = $computed(() => {
-	if (props.preferType === 'auto') {
-		if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
-			return 'drawer';
-		} else {
-			return props.src != null ? 'popup' : 'dialog';
-		}
-	} else {
-		return props.preferType!;
-	}
-});
-
-let contentClicking = false;
-
-const close = () => {
-	// eslint-disable-next-line vue/no-mutating-props
-	if (props.src) props.src.style.pointerEvents = 'auto';
-	showing = false;
-	emit('close');
-};
-
-const onBgClick = () => {
-	if (contentClicking) return;
-	emit('click');
-};
-
-if (type === 'drawer') {
-	maxHeight = window.innerHeight / 1.5;
-}
-
-const keymap = {
-	'esc': () => emit('esc'),
-};
-
-const MARGIN = 16;
-
-const align = () => {
-	if (props.src == null) return;
-	if (type === 'drawer') return;
-	if (type === 'dialog') return;
-
-	if (content == null) return;
-
-	const srcRect = props.src.getBoundingClientRect();
-
-	const width = content!.offsetWidth;
-	const height = content!.offsetHeight;
-
-	let left;
-	let top;
-
-	const x = srcRect.left + (fixed ? 0 : window.pageXOffset);
-	const y = srcRect.top + (fixed ? 0 : window.pageYOffset);
-
-	if (props.anchor.x === 'center') {
-		left = x + (props.src.offsetWidth / 2) - (width / 2);
-	} else if (props.anchor.x === 'left') {
-		// TODO
-	} else if (props.anchor.x === 'right') {
-		left = x + props.src.offsetWidth;
-	}
-
-	if (props.anchor.y === 'center') {
-		top = (y - (height / 2));
-	} else if (props.anchor.y === 'top') {
-		// TODO
-	} else if (props.anchor.y === 'bottom') {
-		top = y + props.src.offsetHeight;
-	}
-
-	if (fixed) {
-		// 画面から横にはみ出る場合
-		if (left + width > window.innerWidth) {
-			left = window.innerWidth - width;
-		}
-
-		const underSpace = (window.innerHeight - MARGIN) - top;
-		const upperSpace = (srcRect.top - MARGIN);
-
-		// 画面から縦にはみ出る場合
-		if (top + height > (window.innerHeight - MARGIN)) {
-			if (props.noOverlap && props.anchor.x === 'center') {
-				if (underSpace >= (upperSpace / 3)) {
-					maxHeight = underSpace;
-				} else {
-					maxHeight = upperSpace;
-					top = (upperSpace + MARGIN) - height;
-				}
-			} else {
-				top = (window.innerHeight - MARGIN) - height;
-			}
-		} else {
-			maxHeight = underSpace;
-		}
-	} else {
-		// 画面から横にはみ出る場合
-		if (left + width - window.pageXOffset > window.innerWidth) {
-			left = window.innerWidth - width + window.pageXOffset - 1;
-		}
-
-		const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset);
-		const upperSpace = (srcRect.top - MARGIN);
-
-		// 画面から縦にはみ出る場合
-		if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) {
-			if (props.noOverlap && props.anchor.x === 'center') {
-				if (underSpace >= (upperSpace / 3)) {
-					maxHeight = underSpace;
-				} else {
-					maxHeight = upperSpace;
-					top = window.pageYOffset + ((upperSpace + MARGIN) - height);
-				}
-			} else {
-				top = (window.innerHeight - MARGIN) - height + window.pageYOffset - 1;
-			}
-		} else {
-			maxHeight = underSpace;
-		}
-	}
-
-	if (top < 0) {
-		top = MARGIN;
-	}
-
-	if (left < 0) {
-		left = 0;
-	}
-
-	let transformOriginX = 'center';
-	let transformOriginY = 'center';
-
-	if (top >= srcRect.top + props.src.offsetHeight + (fixed ? 0 : window.pageYOffset)) {
-		transformOriginY = 'top';
-	} else if ((top + height) <= srcRect.top + (fixed ? 0 : window.pageYOffset)) {
-		transformOriginY = 'bottom';
-	}
-
-	if (left >= srcRect.left + props.src.offsetWidth + (fixed ? 0 : window.pageXOffset)) {
-		transformOriginX = 'left';
-	} else if ((left + width) <= srcRect.left + (fixed ? 0 : window.pageXOffset)) {
-		transformOriginX = 'right';
-	}
-
-	transformOrigin = `${transformOriginX} ${transformOriginY}`;
-
-	content.style.left = left + 'px';
-	content.style.top = top + 'px';
-};
-
-const onOpened = () => {
-	emit('opened');
-
-	// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
-	const el = content!.children[0];
-	el.addEventListener('mousedown', ev => {
-		contentClicking = true;
-		window.addEventListener('mouseup', ev => {
-			// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
-			window.setTimeout(() => {
-				contentClicking = false;
-			}, 100);
-		}, { passive: true, once: true });
-	}, { passive: true });
-};
-
-onMounted(() => {
-	watch(() => props.src, async () => {
-		if (props.src) {
-			// eslint-disable-next-line vue/no-mutating-props
-			props.src.style.pointerEvents = 'none';
-		}
-		fixed = (type === 'drawer') || (getFixedContainer(props.src) != null);
-
-		await nextTick();
-		
-		align();
-	}, { immediate: true });
-
-	nextTick(() => {
-		new ResizeObserver((entries, observer) => {
-			align();
-		}).observe(content!);
-	});
-});
-
-defineExpose({
-	close,
-});
-</script>
-
-<style lang="scss" scoped>
-.modal-enter-active, .modal-leave-active {
-	> .bg {
-		transition: opacity 0.2s !important;
-	}
-
-	> .content {
-		transform-origin: var(--transformOrigin);
-		transition: opacity 0.2s, transform 0.2s !important;
-	}
-}
-.modal-enter-from, .modal-leave-to {
-	> .bg {
-		opacity: 0;
-	}
-
-	> .content {
-		pointer-events: none;
-		opacity: 0;
-		transform-origin: var(--transformOrigin);
-		transform: scale(0.9);
-	}
-}
-
-.modal-popup-enter-active, .modal-popup-leave-active {
-	> .bg {
-		transition: opacity 0.2s !important;
-	}
-
-	> .content {
-		transform-origin: var(--transformOrigin);
-		transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
-	}
-}
-.modal-popup-enter-from, .modal-popup-leave-to {
-	> .bg {
-		opacity: 0;
-	}
-
-	> .content {
-		pointer-events: none;
-		opacity: 0;
-		transform-origin: var(--transformOrigin);
-		transform: scale(0.9);
-	}
-}
-
-.modal-drawer-enter-active {
-	> .bg {
-		transition: opacity 0.2s !important;
-	}
-
-	> .content {
-		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
-	}
-}
-.modal-drawer-leave-active {
-	> .bg {
-		transition: opacity 0.2s !important;
-	}
-
-	> .content {
-		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
-	}
-}
-.modal-drawer-enter-from, .modal-drawer-leave-to {
-	> .bg {
-		opacity: 0;
-	}
-
-	> .content {
-		pointer-events: none;
-		transform: translateY(100%);
-	}
-}
-
-.qzhlnise {
-	> .bg {
-		&.transparent {
-			background: transparent;
-			-webkit-backdrop-filter: none;
-			backdrop-filter: none;
-		}
-	}
-
-	&.dialog {
-		> .content {
-			position: fixed;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			margin: auto;
-			padding: 32px;
-			// TODO: mask-imageはiOSだとやたら重い。なんとかしたい
-			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
-			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
-			overflow: auto;
-			display: flex;
-
-			@media (max-width: 500px) {
-				padding: 16px;
-				-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
-				mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
-			}
-
-			> ::v-deep(*) {
-				margin: auto;
-			}
-
-			&.top {
-				> ::v-deep(*) {
-					margin-top: 0;
-				}
-			}
-		}
-	}
-
-	&.popup {
-		> .content {
-			position: absolute;
-
-			&.fixed {
-				position: fixed;
-			}
-		}
-	}
-
-	&.drawer {
-		position: fixed;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		overflow: clip;
-
-		> .content {
-			position: fixed;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			margin: auto;
-
-			> ::v-deep(*) {
-				margin: auto;
-			}
-		}
-	}
-
-}
-</style>
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
deleted file mode 100644
index ced8a7a714..0000000000
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<template>
-<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
-	<div ref="rootEl" class="hrmcaedk _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
-		<div class="header" @contextmenu="onContextmenu">
-			<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="ti ti-arrow-left"></i></button>
-			<span v-else style="display: inline-block; width: 20px"></span>
-			<span v-if="pageMetadata?.value" class="title">
-				<i v-if="pageMetadata?.value.icon" class="icon" :class="pageMetadata?.value.icon"></i>
-				<span>{{ pageMetadata?.value.title }}</span>
-			</span>
-			<button class="_button" @click="$refs.modal.close()"><i class="ti ti-x"></i></button>
-		</div>
-		<div class="body">
-			<MkStickyContainer>
-				<template #header><MkPageHeader v-if="pageMetadata?.value && !pageMetadata?.value.hideHeader" :info="pageMetadata?.value"/></template>
-				<RouterView :router="router"/>
-			</MkStickyContainer>
-		</div>
-	</div>
-</MkModal>
-</template>
-
-<script lang="ts" setup>
-import { ComputedRef, provide } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import { popout as _popout } from '@/scripts/popout';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { url } from '@/config';
-import * as os from '@/os';
-import { mainRouter, routes } from '@/router';
-import { i18n } from '@/i18n';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-import { Router } from '@/nirax';
-
-const props = defineProps<{
-	initialPath: string;
-}>();
-
-defineEmits<{
-	(ev: 'closed'): void;
-	(ev: 'click'): void;
-}>();
-
-const router = new Router(routes, props.initialPath);
-
-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: 'ti ti-player-eject',
-		text: i18n.ts.showInPage,
-		action: expand,
-	}, {
-		icon: 'ti ti-window-maximize',
-		text: i18n.ts.popout,
-		action: popout,
-	}, null, {
-		icon: 'ti ti-external-link',
-		text: i18n.ts.openInNewTab,
-		action: () => {
-			window.open(pageUrl, '_blank');
-			modal.close();
-		},
-	}, {
-		icon: 'ti ti-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>
-.hrmcaedk {
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-	contain: content;
-	border-radius: var(--radius);
-
-	--root-margin: 24px;
-
-	@media (max-width: 500px) {
-		--root-margin: 16px;
-	}
-
-	> .header {
-		$height: 52px;
-		$height-narrow: 42px;
-		display: flex;
-		flex-shrink: 0;
-		height: $height;
-		line-height: $height;
-		font-weight: bold;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		background: var(--windowHeader);
-		-webkit-backdrop-filter: var(--blur, blur(15px));
-		backdrop-filter: var(--blur, blur(15px));
-
-		> button {
-			height: $height;
-			width: $height;
-
-			&:hover {
-				color: var(--fgHighlighted);
-			}
-		}
-
-		@media (max-width: 500px) {
-			height: $height-narrow;
-			line-height: $height-narrow;
-			padding-left: 16px;
-
-			> button {
-				height: $height-narrow;
-				width: $height-narrow;
-			}
-		}
-
-		> .title {
-			flex: 1;
-
-			> .icon {
-				margin-right: 0.5em;
-			}
-		}
-	}
-
-	> .body {
-		overflow: auto;
-		background: var(--bg);
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkModalWindow.vue b/packages/client/src/components/MkModalWindow.vue
deleted file mode 100644
index d977ca6e9c..0000000000
--- a/packages/client/src/components/MkModalWindow.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<template>
-<MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')">
-	<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="ti ti-x"></i></button>
-			<span class="title">
-				<slot name="header"></slot>
-			</span>
-			<button v-if="!withOkButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
-			<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ti ti-check"></i></button>
-		</div>
-		<div class="body">
-			<slot :width="bodyWidth" :height="bodyHeight"></slot>
-		</div>
-	</div>
-</MkModal>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
-import MkModal from './MkModal.vue';
-
-const props = withDefaults(defineProps<{
-	withOkButton: boolean;
-	okButtonDisabled: boolean;
-	width: number;
-	height: number | null;
-	scroll: boolean;
-}>(), {
-	withOkButton: false,
-	okButtonDisabled: false,
-	width: 400,
-	height: null,
-	scroll: true,
-});
-
-const emit = defineEmits<{
-	(event: 'click'): void;
-	(event: 'close'): void;
-	(event: 'closed'): void;
-	(event: 'ok'): void;
-}>();
-
-let modal = $ref<InstanceType<typeof MkModal>>();
-let rootEl = $ref<HTMLElement>();
-let headerEl = $ref<HTMLElement>();
-let bodyWidth = $ref(0);
-let bodyHeight = $ref(0);
-
-const close = () => {
-	modal.close();
-};
-
-const onBgClick = () => {
-	emit('click');
-};
-
-const onKeydown = (evt) => {
-	if (evt.which === 27) { // Esc
-		evt.preventDefault();
-		evt.stopPropagation();
-		close();
-	}
-};
-
-const ro = new ResizeObserver((entries, observer) => {
-	bodyWidth = rootEl.offsetWidth;
-	bodyHeight = rootEl.offsetHeight - headerEl.offsetHeight;
-});
-
-onMounted(() => {
-	bodyWidth = rootEl.offsetWidth;
-	bodyHeight = rootEl.offsetHeight - headerEl.offsetHeight;
-	ro.observe(rootEl);
-});
-
-onUnmounted(() => {
-	ro.disconnect();
-});
-
-defineExpose({
-	close,
-});
-</script>
-
-<style lang="scss" scoped>
-.ebkgoccj {
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-	contain: content;
-	border-radius: var(--radius);
-
-	--root-margin: 24px;
-
-	@media (max-width: 500px) {
-		--root-margin: 16px;
-	}
-
-	> .header {
-		$height: 46px;
-		$height-narrow: 42px;
-		display: flex;
-		flex-shrink: 0;
-		background: var(--windowHeader);
-		-webkit-backdrop-filter: var(--blur, blur(15px));
-		backdrop-filter: var(--blur, blur(15px));
-
-		> button {
-			height: $height;
-			width: $height;
-
-			@media (max-width: 500px) {
-				height: $height-narrow;
-				width: $height-narrow;
-			}
-		}
-
-		> .title {
-			flex: 1;
-			line-height: $height;
-			padding-left: 32px;
-			font-weight: bold;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			pointer-events: none;
-
-			@media (max-width: 500px) {
-				line-height: $height-narrow;
-				padding-left: 16px;
-			}
-		}
-
-		> button + .title {
-			padding-left: 0;
-		}
-	}
-
-	> .body {
-		flex: 1;
-		overflow: auto;
-		background: var(--panel);
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
deleted file mode 100644
index a4100e1f2c..0000000000
--- a/packages/client/src/components/MkNote.vue
+++ /dev/null
@@ -1,658 +0,0 @@
-<template>
-<div
-	v-if="!muted"
-	v-show="!isDeleted"
-	ref="el"
-	v-hotkey="keymap"
-	v-size="{ max: [500, 450, 350, 300] }"
-	class="tkcbzcuz"
-	:tabindex="!isDeleted ? '-1' : null"
-	:class="{ renote: isRenote }"
->
-	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
-	<div v-if="pinned" class="info"><i class="ti ti-pin"></i> {{ i18n.ts.pinnedNote }}</div>
-	<div v-if="appearNote._prId_" class="info"><i class="fas fa-bullhorn"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ti ti-x"></i></button></div>
-	<div v-if="appearNote._featuredId_" class="info"><i class="ti ti-bolt"></i> {{ i18n.ts.featured }}</div>
-	<div v-if="isRenote" class="renote">
-		<MkAvatar class="avatar" :user="note.user"/>
-		<i class="ti ti-repeat"></i>
-		<I18n :src="i18n.ts.renotedBy" tag="span">
-			<template #user>
-				<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
-					<MkUserName :user="note.user"/>
-				</MkA>
-			</template>
-		</I18n>
-		<div class="info">
-			<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
-				<i v-if="isMyRenote" class="ti ti-dots dropdownIcon"></i>
-				<MkTime :time="note.createdAt"/>
-			</button>
-			<MkVisibility :note="note"/>
-		</div>
-	</div>
-	<article class="article" @contextmenu.stop="onContextmenu">
-		<MkAvatar class="avatar" :user="appearNote.user"/>
-		<div class="main">
-			<XNoteHeader class="header" :note="appearNote" :mini="true"/>
-			<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
-			<div class="body">
-				<p v-if="appearNote.cw != null" class="cw">
-					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-					<XCwButton v-model="showContent" :note="appearNote"/>
-				</p>
-				<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
-					<div class="text">
-						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
-						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-						<a v-if="appearNote.renote != null" class="rp">RN:</a>
-						<div v-if="translating || translation" class="translation">
-							<MkLoading v-if="translating" mini/>
-							<div v-else class="translated">
-								<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
-								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-							</div>
-						</div>
-					</div>
-					<div v-if="appearNote.files.length > 0" class="files">
-						<XMediaList :media-list="appearNote.files"/>
-					</div>
-					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
-					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
-					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
-					<button v-if="isLong && collapsed" class="fade _button" @click="collapsed = false">
-						<span>{{ i18n.ts.showMore }}</span>
-					</button>
-					<button v-else-if="isLong && !collapsed" class="showLess _button" @click="collapsed = true">
-						<span>{{ i18n.ts.showLess }}</span>
-					</button>
-				</div>
-				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
-			</div>
-			<footer class="footer">
-				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
-				<button class="button _button" @click="reply()">
-					<i class="ti ti-arrow-back-up"></i>
-					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
-				</button>
-				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
-				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
-					<i class="ti ti-plus"></i>
-				</button>
-				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-					<i class="ti ti-minus"></i>
-				</button>
-				<button ref="menuButton" class="button _button" @click="menu()">
-					<i class="ti ti-dots"></i>
-				</button>
-			</footer>
-		</div>
-	</article>
-</div>
-<div v-else class="muted" @click="muted = false">
-	<I18n :src="i18n.ts.userSaysSomething" tag="small">
-		<template #name>
-			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
-				<MkUserName :user="appearNote.user"/>
-			</MkA>
-		</template>
-	</I18n>
-</div>
-</template>
-
-<script lang="ts" setup>
-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 '@/components/MkNoteSub.vue';
-import XNoteHeader from '@/components/MkNoteHeader.vue';
-import XNoteSimple from '@/components/MkNoteSimple.vue';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
-import XMediaList from '@/components/MkMediaList.vue';
-import XCwButton from '@/components/MkCwButton.vue';
-import XPoll from '@/components/MkPoll.vue';
-import XRenoteButton from '@/components/MkRenoteButton.vue';
-import MkUrlPreview from '@/components/MkUrlPreview.vue';
-import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
-import MkVisibility from '@/components/MkVisibility.vue';
-import { pleaseLogin } from '@/scripts/please-login';
-import { focusPrev, focusNext } from '@/scripts/focus';
-import { checkWordMute } from '@/scripts/check-word-mute';
-import { userPage } from '@/filters/user';
-import * as os from '@/os';
-import { defaultStore, noteViewInterruptors } from '@/store';
-import { reactionPicker } from '@/scripts/reaction-picker';
-import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { getNoteMenu } from '@/scripts/get-note-menu';
-import { useNoteCapture } from '@/scripts/use-note-capture';
-import { deepClone } from '@/scripts/clone';
-
-const props = defineProps<{
-	note: misskey.entities.Note;
-	pinned?: boolean;
-}>();
-
-const inChannel = inject('inChannel', null);
-
-let note = $ref(deepClone(props.note));
-
-// plugin
-if (noteViewInterruptors.length > 0) {
-	onMounted(async () => {
-		let result = deepClone(note);
-		for (const interruptor of noteViewInterruptors) {
-			result = await interruptor.handler(result);
-		}
-		note = result;
-	});
-}
-
-const isRenote = (
-	note.renote != null &&
-	note.text == null &&
-	note.fileIds.length === 0 &&
-	note.poll == null
-);
-
-const el = ref<HTMLElement>();
-const menuButton = ref<HTMLElement>();
-const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
-const renoteTime = ref<HTMLElement>();
-const reactButton = ref<HTMLElement>();
-let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
-const isMyRenote = $i && ($i.id === note.userId);
-const showContent = ref(false);
-const isLong = (appearNote.cw == null && appearNote.text != null && (
-	(appearNote.text.split('\n').length > 9) ||
-	(appearNote.text.length > 500)
-));
-const collapsed = ref(appearNote.cw == null && isLong);
-const isDeleted = ref(false);
-const muted = ref(checkWordMute(appearNote, $i, defaultStore.state.mutedWords));
-const translation = ref(null);
-const translating = ref(false);
-const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
-const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
-
-const keymap = {
-	'r': () => reply(true),
-	'e|a|plus': () => react(true),
-	'q': () => renoteButton.value.renote(true),
-	'up|k|shift+tab': focusBefore,
-	'down|j|tab': focusAfter,
-	'esc': blur,
-	'm|o': () => menu(true),
-	's': () => showContent.value !== showContent.value,
-};
-
-useNoteCapture({
-	rootEl: el,
-	note: $$(appearNote),
-	isDeletedRef: isDeleted,
-});
-
-function reply(viaKeyboard = false): void {
-	pleaseLogin();
-	os.post({
-		reply: appearNote,
-		animation: !viaKeyboard,
-	}, () => {
-		focus();
-	});
-}
-
-function react(viaKeyboard = false): void {
-	pleaseLogin();
-	blur();
-	reactionPicker.show(reactButton.value, reaction => {
-		os.api('notes/reactions/create', {
-			noteId: appearNote.id,
-			reaction: reaction,
-		});
-	}, () => {
-		focus();
-	});
-}
-
-function undoReact(note): void {
-	const oldReaction = note.myReaction;
-	if (!oldReaction) return;
-	os.api('notes/reactions/delete', {
-		noteId: note.id,
-	});
-}
-
-const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
-
-function onContextmenu(ev: MouseEvent): void {
-	const isLink = (el: HTMLElement) => {
-		if (el.tagName === 'A') return true;
-		if (el.parentElement) {
-			return isLink(el.parentElement);
-		}
-	};
-	if (isLink(ev.target)) return;
-	if (window.getSelection().toString() !== '') return;
-
-	if (defaultStore.state.useReactionPickerForContextMenu) {
-		ev.preventDefault();
-		react();
-	} else {
-		os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), ev).then(focus);
-	}
-}
-
-function menu(viaKeyboard = false): void {
-	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), menuButton.value, {
-		viaKeyboard,
-	}).then(focus);
-}
-
-function showRenoteMenu(viaKeyboard = false): void {
-	if (!isMyRenote) return;
-	os.popupMenu([{
-		text: i18n.ts.unrenote,
-		icon: 'ti ti-trash',
-		danger: true,
-		action: () => {
-			os.api('notes/delete', {
-				noteId: note.id,
-			});
-			isDeleted.value = true;
-		},
-	}], renoteTime.value, {
-		viaKeyboard: viaKeyboard,
-	});
-}
-
-function focus() {
-	el.value.focus();
-}
-
-function blur() {
-	el.value.blur();
-}
-
-function focusBefore() {
-	focusPrev(el.value);
-}
-
-function focusAfter() {
-	focusNext(el.value);
-}
-
-function readPromo() {
-	os.api('promo/read', {
-		noteId: appearNote.id,
-	});
-	isDeleted.value = true;
-}
-</script>
-
-<style lang="scss" scoped>
-.tkcbzcuz {
-	position: relative;
-	transition: box-shadow 0.1s ease;
-	font-size: 1.05em;
-	overflow: clip;
-	contain: content;
-
-	// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
-	// 下の方までスクロールすると上のノートの高さがここで決め打ちされたものに変化し、表示しているノートの位置が変わってしまう
-	// ノートがマウントされたときに自身の高さを取得し contain-intrinsic-size を設定しなおせばほぼ解決できそうだが、
-	// 今度はその処理自体がパフォーマンス低下の原因にならないか懸念される。また、被リアクションでも高さは変化するため、やはり多少のズレは生じる
-	// 一度レンダリングされた要素はブラウザがよしなにサイズを覚えておいてくれるような実装になるまで待った方が良さそう(なるのか？)
-	//content-visibility: auto;
-  //contain-intrinsic-size: 0 128px;
-
-	&:focus-visible {
-		outline: none;
-
-		&:after {
-			content: "";
-			pointer-events: none;
-			display: block;
-			position: absolute;
-			z-index: 10;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			margin: auto;
-			width: calc(100% - 8px);
-			height: calc(100% - 8px);
-			border: dashed 1px var(--focus);
-			border-radius: var(--radius);
-			box-sizing: border-box;
-		}
-	}
-
-	&:hover > .article > .main > .footer > .button {
-		opacity: 1;
-	}
-
-	> .info {
-		display: flex;
-		align-items: center;
-		padding: 16px 32px 8px 32px;
-		line-height: 24px;
-		font-size: 90%;
-		white-space: pre;
-		color: #d28a3f;
-
-		> i {
-			margin-right: 4px;
-		}
-
-		> .hide {
-			margin-left: auto;
-			color: inherit;
-		}
-	}
-
-	> .info + .article {
-		padding-top: 8px;
-	}
-
-	> .reply-to {
-		opacity: 0.7;
-		padding-bottom: 0;
-	}
-
-	> .renote {
-		display: flex;
-		align-items: center;
-		padding: 16px 32px 8px 32px;
-		line-height: 28px;
-		white-space: pre;
-		color: var(--renote);
-
-		> .avatar {
-			flex-shrink: 0;
-			display: inline-block;
-			width: 28px;
-			height: 28px;
-			margin: 0 8px 0 0;
-			border-radius: 6px;
-		}
-
-		> i {
-			margin-right: 4px;
-		}
-
-		> span {
-			overflow: hidden;
-			flex-shrink: 1;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-
-			> .name {
-				font-weight: bold;
-			}
-		}
-
-		> .info {
-			margin-left: auto;
-			font-size: 0.9em;
-
-			> .time {
-				flex-shrink: 0;
-				color: inherit;
-
-				> .dropdownIcon {
-					margin-right: 4px;
-				}
-			}
-		}
-	}
-
-	> .renote + .article {
-		padding-top: 8px;
-	}
-
-	> .article {
-		display: flex;
-		padding: 28px 32px 18px;
-
-		> .avatar {
-			flex-shrink: 0;
-			display: block;
-			margin: 0 14px 8px 0;
-			width: 58px;
-			height: 58px;
-			position: sticky;
-			top: calc(22px + var(--stickyTop, 0px));
-			left: 0;
-		}
-
-		> .main {
-			flex: 1;
-			min-width: 0;
-
-			> .body {
-				container-type: inline-size;
-
-				> .cw {
-					cursor: default;
-					display: block;
-					margin: 0;
-					padding: 0;
-					overflow-wrap: break-word;
-
-					> .text {
-						margin-right: 8px;
-					}
-				}
-
-				> .content {
-					&.isLong {
-						> .showLess {
-							width: 100%;
-							margin-top: 1em;
-							position: sticky;
-							bottom: 1em;
-
-							> span {
-								display: inline-block;
-								background: var(--popup);
-								padding: 6px 10px;
-								font-size: 0.8em;
-								border-radius: 999px;
-								box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-							}
-						}
-					}
-
-					&.collapsed {
-						position: relative;
-						max-height: 9em;
-						overflow: hidden;
-
-						> .fade {
-							display: block;
-							position: absolute;
-							bottom: 0;
-							left: 0;
-							width: 100%;
-							height: 64px;
-							background: linear-gradient(0deg, var(--panel), var(--X15));
-
-							> span {
-								display: inline-block;
-								background: var(--panel);
-								padding: 6px 10px;
-								font-size: 0.8em;
-								border-radius: 999px;
-								box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-							}
-
-							&:hover {
-								> span {
-									background: var(--panelHighlight);
-								}
-							}
-						}
-					}
-
-					> .text {
-						overflow-wrap: break-word;
-
-						> .reply {
-							color: var(--accent);
-							margin-right: 0.5em;
-						}
-
-						> .rp {
-							margin-left: 4px;
-							font-style: oblique;
-							color: var(--renote);
-						}
-
-						> .translation {
-							border: solid 0.5px var(--divider);
-							border-radius: var(--radius);
-							padding: 12px;
-							margin-top: 8px;
-						}
-					}
-
-					> .url-preview {
-						margin-top: 8px;
-					}
-
-					> .poll {
-						font-size: 80%;
-					}
-
-					> .renote {
-						padding: 8px 0;
-
-						> * {
-							padding: 16px;
-							border: dashed 1px var(--renote);
-							border-radius: 8px;
-						}
-					}
-				}
-
-				> .channel {
-					opacity: 0.7;
-					font-size: 80%;
-				}
-			}
-
-			> .footer {
-				> .button {
-					margin: 0;
-					padding: 8px;
-					opacity: 0.7;
-
-					&:not(:last-child) {
-						margin-right: 28px;
-					}
-
-					&:hover {
-						color: var(--fgHighlighted);
-					}
-
-					> .count {
-						display: inline;
-						margin: 0 0 0 8px;
-						opacity: 0.7;
-					}
-
-					&.reacted {
-						color: var(--accent);
-					}
-				}
-			}
-		}
-	}
-
-	> .reply {
-		border-top: solid 0.5px var(--divider);
-	}
-}
-
-@container (max-width: 500px) {
-	.tkcbzcuz {
-		font-size: 0.9em;
-
-		> .article {
-			> .avatar {
-				width: 50px;
-				height: 50px;
-			}
-		}
-	}
-}
-
-@container (max-width: 450px) {
-	.tkcbzcuz {
-		> .renote {
-			padding: 8px 16px 0 16px;
-		}
-
-		> .info {
-			padding: 8px 16px 0 16px;
-		}
-
-		> .article {
-			padding: 14px 16px 9px;
-
-			> .avatar {
-				margin: 0 10px 8px 0;
-				width: 46px;
-				height: 46px;
-				top: calc(14px + var(--stickyTop, 0px));
-			}
-		}
-	}
-}
-
-@container (max-width: 350px) {
-	.tkcbzcuz {
-		> .article {
-			> .main {
-				> .footer {
-					> .button {
-						&:not(:last-child) {
-							margin-right: 18px;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-@container (max-width: 300px) {
-	.tkcbzcuz {
-		> .article {
-			> .avatar {
-				width: 44px;
-				height: 44px;
-			}
-
-			> .main {
-				> .footer {
-					> .button {
-						&:not(:last-child) {
-							margin-right: 12px;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-.muted {
-	padding: 8px;
-	text-align: center;
-	opacity: 0.7;
-}
-</style>
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
deleted file mode 100644
index 7ce8e039d9..0000000000
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ /dev/null
@@ -1,677 +0,0 @@
-<template>
-<div
-	v-if="!muted"
-	v-show="!isDeleted"
-	ref="el"
-	v-hotkey="keymap"
-	v-size="{ max: [500, 450, 350, 300] }"
-	class="lxwezrsl _block"
-	:tabindex="!isDeleted ? '-1' : null"
-	:class="{ renote: isRenote }"
->
-	<MkNoteSub v-for="note in conversation" :key="note.id" class="reply-to-more" :note="note"/>
-	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
-	<div v-if="isRenote" class="renote">
-		<MkAvatar class="avatar" :user="note.user"/>
-		<i class="ti ti-repeat"></i>
-		<I18n :src="i18n.ts.renotedBy" tag="span">
-			<template #user>
-				<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
-					<MkUserName :user="note.user"/>
-				</MkA>
-			</template>
-		</I18n>
-		<div class="info">
-			<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
-				<i v-if="isMyRenote" class="ti ti-dots dropdownIcon"></i>
-				<MkTime :time="note.createdAt"/>
-			</button>
-			<MkVisibility :note="note"/>
-		</div>
-	</div>
-	<article class="article" @contextmenu.stop="onContextmenu">
-		<header class="header">
-			<MkAvatar class="avatar" :user="appearNote.user" :show-indicator="true"/>
-			<div class="body">
-				<div class="top">
-					<MkA v-user-preview="appearNote.user.id" class="name" :to="userPage(appearNote.user)">
-						<MkUserName :nowrap="false" :user="appearNote.user"/>
-					</MkA>
-					<span v-if="appearNote.user.isBot" class="is-bot">bot</span>
-					<div class="info">
-						<MkVisibility :note="appearNote"/>
-					</div>
-				</div>
-				<div class="username"><MkAcct :user="appearNote.user"/></div>
-				<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
-			</div>
-		</header>
-		<div class="main">
-			<div class="body">
-				<p v-if="appearNote.cw != null" class="cw">
-					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-					<XCwButton v-model="showContent" :note="appearNote"/>
-				</p>
-				<div v-show="appearNote.cw == null || showContent" class="content">
-					<div class="text">
-						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
-						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-						<a v-if="appearNote.renote != null" class="rp">RN:</a>
-						<div v-if="translating || translation" class="translation">
-							<MkLoading v-if="translating" mini/>
-							<div v-else class="translated">
-								<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
-								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
-							</div>
-						</div>
-					</div>
-					<div v-if="appearNote.files.length > 0" class="files">
-						<XMediaList :media-list="appearNote.files"/>
-					</div>
-					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
-					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" class="url-preview"/>
-					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
-				</div>
-				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
-			</div>
-			<footer class="footer">
-				<div class="info">
-					<MkA class="created-at" :to="notePage(appearNote)">
-						<MkTime :time="appearNote.createdAt" mode="detail"/>
-					</MkA>
-				</div>
-				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
-				<button class="button _button" @click="reply()">
-					<i class="ti ti-arrow-back-up"></i>
-					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
-				</button>
-				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
-				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
-					<i class="ti ti-plus"></i>
-				</button>
-				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
-					<i class="ti ti-minus"></i>
-				</button>
-				<button ref="menuButton" class="button _button" @click="menu()">
-					<i class="ti ti-dots"></i>
-				</button>
-			</footer>
-		</div>
-	</article>
-	<MkNoteSub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
-</div>
-<div v-else class="_panel muted" @click="muted = false">
-	<I18n :src="i18n.ts.userSaysSomething" tag="small">
-		<template #name>
-			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
-				<MkUserName :user="appearNote.user"/>
-			</MkA>
-		</template>
-	</I18n>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, onMounted, onUnmounted, reactive, ref } from 'vue';
-import * as mfm from 'mfm-js';
-import * as misskey from 'misskey-js';
-import MkNoteSub from '@/components/MkNoteSub.vue';
-import XNoteSimple from '@/components/MkNoteSimple.vue';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
-import XMediaList from '@/components/MkMediaList.vue';
-import XCwButton from '@/components/MkCwButton.vue';
-import XPoll from '@/components/MkPoll.vue';
-import XRenoteButton from '@/components/MkRenoteButton.vue';
-import MkUrlPreview from '@/components/MkUrlPreview.vue';
-import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
-import MkVisibility from '@/components/MkVisibility.vue';
-import { pleaseLogin } from '@/scripts/please-login';
-import { checkWordMute } from '@/scripts/check-word-mute';
-import { userPage } from '@/filters/user';
-import { notePage } from '@/filters/note';
-import * as os from '@/os';
-import { defaultStore, noteViewInterruptors } from '@/store';
-import { reactionPicker } from '@/scripts/reaction-picker';
-import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { getNoteMenu } from '@/scripts/get-note-menu';
-import { useNoteCapture } from '@/scripts/use-note-capture';
-import { deepClone } from '@/scripts/clone';
-
-const props = defineProps<{
-	note: misskey.entities.Note;
-	pinned?: boolean;
-}>();
-
-const inChannel = inject('inChannel', null);
-
-let note = $ref(deepClone(props.note));
-
-// plugin
-if (noteViewInterruptors.length > 0) {
-	onMounted(async () => {
-		let result = deepClone(note);
-		for (const interruptor of noteViewInterruptors) {
-			result = await interruptor.handler(result);
-		}
-		note = result;
-	});
-}
-
-const isRenote = (
-	note.renote != null &&
-	note.text == null &&
-	note.fileIds.length === 0 &&
-	note.poll == null
-);
-
-const el = ref<HTMLElement>();
-const menuButton = ref<HTMLElement>();
-const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
-const renoteTime = ref<HTMLElement>();
-const reactButton = ref<HTMLElement>();
-let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
-const isMyRenote = $i && ($i.id === note.userId);
-const showContent = ref(false);
-const isDeleted = ref(false);
-const muted = ref(checkWordMute(appearNote, $i, defaultStore.state.mutedWords));
-const translation = ref(null);
-const translating = ref(false);
-const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
-const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
-const conversation = ref<misskey.entities.Note[]>([]);
-const replies = ref<misskey.entities.Note[]>([]);
-
-const keymap = {
-	'r': () => reply(true),
-	'e|a|plus': () => react(true),
-	'q': () => renoteButton.value.renote(true),
-	'esc': blur,
-	'm|o': () => menu(true),
-	's': () => showContent.value !== showContent.value,
-};
-
-useNoteCapture({
-	rootEl: el,
-	note: $$(appearNote),
-	isDeletedRef: isDeleted,
-});
-
-function reply(viaKeyboard = false): void {
-	pleaseLogin();
-	os.post({
-		reply: appearNote,
-		animation: !viaKeyboard,
-	}, () => {
-		focus();
-	});
-}
-
-function react(viaKeyboard = false): void {
-	pleaseLogin();
-	blur();
-	reactionPicker.show(reactButton.value, reaction => {
-		os.api('notes/reactions/create', {
-			noteId: appearNote.id,
-			reaction: reaction,
-		});
-	}, () => {
-		focus();
-	});
-}
-
-function undoReact(note): void {
-	const oldReaction = note.myReaction;
-	if (!oldReaction) return;
-	os.api('notes/reactions/delete', {
-		noteId: note.id,
-	});
-}
-
-function onContextmenu(ev: MouseEvent): void {
-	const isLink = (el: HTMLElement) => {
-		if (el.tagName === 'A') return true;
-		if (el.parentElement) {
-			return isLink(el.parentElement);
-		}
-	};
-	if (isLink(ev.target)) return;
-	if (window.getSelection().toString() !== '') return;
-
-	if (defaultStore.state.useReactionPickerForContextMenu) {
-		ev.preventDefault();
-		react();
-	} else {
-		os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), ev).then(focus);
-	}
-}
-
-function menu(viaKeyboard = false): void {
-	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), menuButton.value, {
-		viaKeyboard,
-	}).then(focus);
-}
-
-function showRenoteMenu(viaKeyboard = false): void {
-	if (!isMyRenote) return;
-	os.popupMenu([{
-		text: i18n.ts.unrenote,
-		icon: 'ti ti-trash',
-		danger: true,
-		action: () => {
-			os.api('notes/delete', {
-				noteId: note.id,
-			});
-			isDeleted.value = true;
-		},
-	}], renoteTime.value, {
-		viaKeyboard: viaKeyboard,
-	});
-}
-
-function focus() {
-	el.value.focus();
-}
-
-function blur() {
-	el.value.blur();
-}
-
-os.api('notes/children', {
-	noteId: appearNote.id,
-	limit: 30,
-}).then(res => {
-	replies.value = res;
-});
-
-if (appearNote.replyId) {
-	os.api('notes/conversation', {
-		noteId: appearNote.replyId,
-	}).then(res => {
-		conversation.value = res.reverse();
-	});
-}
-</script>
-
-<style lang="scss" scoped>
-.lxwezrsl {
-	position: relative;
-	transition: box-shadow 0.1s ease;
-	overflow: hidden;
-	contain: content;
-
-	&:focus-visible {
-		outline: none;
-
-		&:after {
-			content: "";
-			pointer-events: none;
-			display: block;
-			position: absolute;
-			z-index: 10;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			margin: auto;
-			width: calc(100% - 8px);
-			height: calc(100% - 8px);
-			border: dashed 1px var(--focus);
-			border-radius: var(--radius);
-			box-sizing: border-box;
-		}
-	}
-
-	&:hover > .article > .main > .footer > .button {
-		opacity: 1;
-	}
-
-	> .reply-to {
-		opacity: 0.7;
-		padding-bottom: 0;
-	}
-
-	> .reply-to-more {
-		opacity: 0.7;
-	}
-
-	> .renote {
-		display: flex;
-		align-items: center;
-		padding: 16px 32px 8px 32px;
-		line-height: 28px;
-		white-space: pre;
-		color: var(--renote);
-
-		> .avatar {
-			flex-shrink: 0;
-			display: inline-block;
-			width: 28px;
-			height: 28px;
-			margin: 0 8px 0 0;
-			border-radius: 6px;
-		}
-
-		> i {
-			margin-right: 4px;
-		}
-
-		> span {
-			overflow: hidden;
-			flex-shrink: 1;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-
-			> .name {
-				font-weight: bold;
-			}
-		}
-
-		> .info {
-			margin-left: auto;
-			font-size: 0.9em;
-
-			> .time {
-				flex-shrink: 0;
-				color: inherit;
-
-				> .dropdownIcon {
-					margin-right: 4px;
-				}
-			}
-		}
-	}
-
-	> .renote + .article {
-		padding-top: 8px;
-	}
-
-	> .article {
-		padding: 32px;
-		font-size: 1.2em;
-
-		> .header {
-			display: flex;
-			position: relative;
-			margin-bottom: 16px;
-			align-items: center;
-
-			> .avatar {
-				display: block;
-				flex-shrink: 0;
-				width: 58px;
-				height: 58px;
-			}
-
-			> .body {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				padding-left: 16px;
-				font-size: 0.95em;
-
-				> .top {
-					> .name {
-						font-weight: bold;
-						line-height: 1.3;
-					}
-
-					> .is-bot {
-						display: inline-block;
-						margin: 0 0.5em;
-						padding: 4px 6px;
-						font-size: 80%;
-						line-height: 1;
-						border: solid 0.5px var(--divider);
-						border-radius: 4px;
-					}
-
-					> .info {
-						float: right;
-					}
-				}
-
-				> .username {
-					margin-bottom: 2px;
-					line-height: 1.3;
-					word-wrap: anywhere;
-				}
-			}
-		}
-
-		> .main {
-			> .body {
-				container-type: inline-size;
-
-				> .cw {
-					cursor: default;
-					display: block;
-					margin: 0;
-					padding: 0;
-					overflow-wrap: break-word;
-
-					> .text {
-						margin-right: 8px;
-					}
-				}
-
-				> .content {
-					> .text {
-						overflow-wrap: break-word;
-
-						> .reply {
-							color: var(--accent);
-							margin-right: 0.5em;
-						}
-
-						> .rp {
-							margin-left: 4px;
-							font-style: oblique;
-							color: var(--renote);
-						}
-
-						> .translation {
-							border: solid 0.5px var(--divider);
-							border-radius: var(--radius);
-							padding: 12px;
-							margin-top: 8px;
-						}
-					}
-
-					> .url-preview {
-						margin-top: 8px;
-					}
-
-					> .poll {
-						font-size: 80%;
-					}
-
-					> .renote {
-						padding: 8px 0;
-
-						> * {
-							padding: 16px;
-							border: dashed 1px var(--renote);
-							border-radius: 8px;
-						}
-					}
-				}
-
-				> .channel {
-					opacity: 0.7;
-					font-size: 80%;
-				}
-			}
-
-			> .footer {
-				> .info {
-					margin: 16px 0;
-					opacity: 0.7;
-					font-size: 0.9em;
-				}
-
-				> .button {
-					margin: 0;
-					padding: 8px;
-					opacity: 0.7;
-
-					&:not(:last-child) {
-						margin-right: 28px;
-					}
-
-					&:hover {
-						color: var(--fgHighlighted);
-					}
-
-					> .count {
-						display: inline;
-						margin: 0 0 0 8px;
-						opacity: 0.7;
-					}
-
-					&.reacted {
-						color: var(--accent);
-					}
-				}
-			}
-		}
-	}
-
-	> .reply {
-		border-top: solid 0.5px var(--divider);
-	}
-
-	&.max-width_500px {
-		font-size: 0.9em;
-	}
-
-	&.max-width_450px {
-		> .renote {
-			padding: 8px 16px 0 16px;
-		}
-
-		> .article {
-			padding: 16px;
-
-			> .header {
-				> .avatar {
-					width: 50px;
-					height: 50px;
-				}
-			}
-		}
-	}
-
-	&.max-width_350px {
-		> .article {
-			> .main {
-				> .footer {
-					> .button {
-						&:not(:last-child) {
-							margin-right: 18px;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	&.max-width_300px {
-		font-size: 0.825em;
-
-		> .article {
-			> .header {
-				> .avatar {
-					width: 50px;
-					height: 50px;
-				}
-			}
-
-			> .main {
-				> .footer {
-					> .button {
-						&:not(:last-child) {
-							margin-right: 12px;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-@container (max-width: 500px) {
-	.lxwezrsl {
-		font-size: 0.9em;
-	}
-}
-
-@container (max-width: 450px) {
-	.lxwezrsl {
-		> .renote {
-			padding: 8px 16px 0 16px;
-		}
-
-		> .article {
-			padding: 16px;
-
-			> .header {
-				> .avatar {
-					width: 50px;
-					height: 50px;
-				}
-			}
-		}
-	}
-}
-
-@container (max-width: 350px) {
-	.lxwezrsl {
-		> .article {
-			> .main {
-				> .footer {
-					> .button {
-						&:not(:last-child) {
-							margin-right: 18px;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-@container (max-width: 300px) {
-	.lxwezrsl {
-		font-size: 0.825em;
-
-		> .article {
-			> .header {
-				> .avatar {
-					width: 50px;
-					height: 50px;
-				}
-			}
-
-			> .main {
-				> .footer {
-					> .button {
-						&:not(:last-child) {
-							margin-right: 12px;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-.muted {
-	padding: 8px;
-	text-align: center;
-	opacity: 0.7;
-}
-</style>
diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
deleted file mode 100644
index 333c3ddbd9..0000000000
--- a/packages/client/src/components/MkNoteHeader.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-<header class="kkwtjztg">
-	<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
-		<MkUserName :user="note.user"/>
-	</MkA>
-	<div v-if="note.user.isBot" class="is-bot">bot</div>
-	<div class="username"><MkAcct :user="note.user"/></div>
-	<div class="info">
-		<MkA class="created-at" :to="notePage(note)">
-			<MkTime :time="note.createdAt"/>
-		</MkA>
-		<MkVisibility :note="note"/>
-	</div>
-</header>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'misskey-js';
-import MkVisibility from '@/components/MkVisibility.vue';
-import { notePage } from '@/filters/note';
-import { userPage } from '@/filters/user';
-
-defineProps<{
-	note: misskey.entities.Note;
-	pinned?: boolean;
-}>();
-</script>
-
-<style lang="scss" scoped>
-.kkwtjztg {
-	display: flex;
-	align-items: baseline;
-	white-space: nowrap;
-
-	> .name {
-		flex-shrink: 1;
-		display: block;
-		margin: 0 .5em 0 0;
-		padding: 0;
-		overflow: hidden;
-		font-size: 1em;
-		font-weight: bold;
-		text-decoration: none;
-		text-overflow: ellipsis;
-
-		&:hover {
-			text-decoration: underline;
-		}
-	}
-
-	> .is-bot {
-		flex-shrink: 0;
-		align-self: center;
-		margin: 0 .5em 0 0;
-		padding: 1px 6px;
-		font-size: 80%;
-		border: solid 0.5px var(--divider);
-		border-radius: 3px;
-	}
-
-	> .username {
-		flex-shrink: 9999999;
-		margin: 0 .5em 0 0;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	> .info {
-		flex-shrink: 0;
-		margin-left: auto;
-		font-size: 0.9em;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkNotePreview.vue b/packages/client/src/components/MkNotePreview.vue
deleted file mode 100644
index 0c81059091..0000000000
--- a/packages/client/src/components/MkNotePreview.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-<div v-size="{ min: [350, 500] }" class="fefdfafb">
-	<MkAvatar class="avatar" :user="$i"/>
-	<div class="main">
-		<div class="header">
-			<MkUserName :user="$i"/>
-		</div>
-		<div class="body">
-			<div class="content">
-				<Mfm :text="text.trim()" :author="$i" :i="$i"/>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-
-const props = defineProps<{
-	text: string;
-}>();
-</script>
-
-<style lang="scss" scoped>
-.fefdfafb {
-	display: flex;
-	margin: 0;
-	padding: 0;
-	overflow: clip;
-	font-size: 0.95em;
-
-	&.min-width_350px {
-		> .avatar {
-			margin: 0 10px 0 0;
-			width: 44px;
-			height: 44px;
-		}
-	}
-
-	&.min-width_500px {
-		> .avatar {
-			margin: 0 12px 0 0;
-			width: 48px;
-			height: 48px;
-		}
-	}
-
-	> .avatar {
-		flex-shrink: 0;
-		display: block;
-		margin: 0 10px 0 0;
-		width: 40px;
-		height: 40px;
-		border-radius: 8px;
-		pointer-events: none;
-	}
-
-	> .main {
-		flex: 1;
-		min-width: 0;
-
-		> .header {
-			margin-bottom: 2px;
-			font-weight: bold;
-		}
-
-		> .body {
-
-			> .cw {
-				cursor: default;
-				display: block;
-				margin: 0;
-				padding: 0;
-				overflow-wrap: break-word;
-
-				> .text {
-					margin-right: 8px;
-				}
-			}
-
-			> .content {
-				> .text {
-					cursor: default;
-					margin: 0;
-					padding: 0;
-				}
-			}
-		}
-	}
-}
-
-@container (min-width: 350px) {
-	.fefdfafb {
-		> .avatar {
-			margin: 0 10px 0 0;
-			width: 44px;
-			height: 44px;
-		}
-	}
-}
-
-@container (min-width: 500px) {
-	.fefdfafb {
-		> .avatar {
-			margin: 0 12px 0 0;
-			width: 48px;
-			height: 48px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkNoteSimple.vue b/packages/client/src/components/MkNoteSimple.vue
deleted file mode 100644
index 96d29831d2..0000000000
--- a/packages/client/src/components/MkNoteSimple.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-<div v-size="{ min: [350, 500] }" class="yohlumlk">
-	<MkAvatar class="avatar" :user="note.user"/>
-	<div class="main">
-		<XNoteHeader class="header" :note="note" :mini="true"/>
-		<div class="body">
-			<p v-if="note.cw != null" class="cw">
-				<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
-				<XCwButton v-model="showContent" :note="note"/>
-			</p>
-			<div v-show="note.cw == null || showContent" class="content">
-				<MkSubNoteContent class="text" :note="note"/>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'misskey-js';
-import XNoteHeader from '@/components/MkNoteHeader.vue';
-import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
-import XCwButton from '@/components/MkCwButton.vue';
-
-const props = defineProps<{
-	note: misskey.entities.Note;
-	pinned?: boolean;
-}>();
-
-const showContent = $ref(false);
-</script>
-
-<style lang="scss" scoped>
-.yohlumlk {
-	display: flex;
-	margin: 0;
-	padding: 0;
-	overflow: clip;
-	font-size: 0.95em;
-
-	&.min-width_350px {
-		> .avatar {
-			margin: 0 10px 0 0;
-			width: 44px;
-			height: 44px;
-		}
-	}
-
-	&.min-width_500px {
-		> .avatar {
-			margin: 0 12px 0 0;
-			width: 48px;
-			height: 48px;
-		}
-	}
-
-	> .avatar {
-		flex-shrink: 0;
-		display: block;
-		margin: 0 10px 0 0;
-		width: 40px;
-		height: 40px;
-		border-radius: 8px;
-	}
-
-	> .main {
-		flex: 1;
-		min-width: 0;
-
-		> .header {
-			margin-bottom: 2px;
-		}
-
-		> .body {
-
-			> .cw {
-				cursor: default;
-				display: block;
-				margin: 0;
-				padding: 0;
-				overflow-wrap: break-word;
-
-				> .text {
-					margin-right: 8px;
-				}
-			}
-
-			> .content {
-				> .text {
-					cursor: default;
-					margin: 0;
-					padding: 0;
-				}
-			}
-		}
-	}
-}
-
-@container (min-width: 350px) {
-	.yohlumlk {
-		> .avatar {
-			margin: 0 10px 0 0;
-			width: 44px;
-			height: 44px;
-		}
-	}
-}
-
-@container (min-width: 500px) {
-	.yohlumlk {
-		> .avatar {
-			margin: 0 12px 0 0;
-			width: 48px;
-			height: 48px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
deleted file mode 100644
index d03ce7c434..0000000000
--- a/packages/client/src/components/MkNoteSub.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1 }">
-	<div class="main">
-		<MkAvatar class="avatar" :user="note.user"/>
-		<div class="body">
-			<XNoteHeader class="header" :note="note" :mini="true"/>
-			<div class="body">
-				<p v-if="note.cw != null" class="cw">
-					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
-					<XCwButton v-model="showContent" :note="note"/>
-				</p>
-				<div v-show="note.cw == null || showContent" class="content">
-					<MkSubNoteContent class="text" :note="note"/>
-				</div>
-			</div>
-		</div>
-	</div>
-	<template v-if="depth < 5">
-		<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :detail="true" :depth="depth + 1"/>
-	</template>
-	<div v-else class="more">
-		<MkA class="text _link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ti ti-chevron-double-right"></i></MkA>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'misskey-js';
-import XNoteHeader from '@/components/MkNoteHeader.vue';
-import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
-import XCwButton from '@/components/MkCwButton.vue';
-import { notePage } from '@/filters/note';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{
-	note: misskey.entities.Note;
-	detail?: boolean;
-
-	// how many notes are in between this one and the note being viewed in detail
-	depth?: number;
-}>(), {
-	depth: 1,
-});
-
-let showContent = $ref(false);
-let replies: misskey.entities.Note[] = $ref([]);
-
-if (props.detail) {
-	os.api('notes/children', {
-		noteId: props.note.id,
-		limit: 5,
-	}).then(res => {
-		replies = res;
-	});
-}
-</script>
-
-<style lang="scss" scoped>
-.wrpstxzv {
-	padding: 16px 32px;
-	font-size: 0.9em;
-
-	&.max-width_450px {
-		padding: 14px 16px;
-	}
-
-	&.children {
-		padding: 10px 0 0 16px;
-		font-size: 1em;
-
-		&.max-width_450px {
-			padding: 10px 0 0 8px;
-		}
-	}
-
-	> .main {
-		display: flex;
-
-		> .avatar {
-			flex-shrink: 0;
-			display: block;
-			margin: 0 8px 0 0;
-			width: 38px;
-			height: 38px;
-			border-radius: 8px;
-		}
-
-		> .body {
-			flex: 1;
-			min-width: 0;
-
-			> .header {
-				margin-bottom: 2px;
-			}
-
-			> .body {
-				> .cw {
-					cursor: default;
-					display: block;
-					margin: 0;
-					padding: 0;
-					overflow-wrap: break-word;
-
-					> .text {
-						margin-right: 8px;
-					}
-				}
-
-				> .content {
-					> .text {
-						margin: 0;
-						padding: 0;
-					}
-				}
-			}
-		}
-	}
-
-	> .reply, > .more {
-		border-left: solid 0.5px var(--divider);
-		margin-top: 10px;
-	}
-
-	> .more {
-		padding: 10px 0 0 16px;
-	}
-}
-
-@container (max-width: 450px) {
-	.wrpstxzv {
-		padding: 14px 16px;
-
-		&.children {
-			padding: 10px 0 0 8px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkNotes.vue b/packages/client/src/components/MkNotes.vue
deleted file mode 100644
index 5abcdc2298..0000000000
--- a/packages/client/src/components/MkNotes.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-<MkPagination ref="pagingComponent" :pagination="pagination">
-	<template #empty>
-		<div class="_fullinfo">
-			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-			<div>{{ i18n.ts.noNotes }}</div>
-		</div>
-	</template>
-
-	<template #default="{ items: notes }">
-		<div class="giivymft" :class="{ noGap }">
-			<XList ref="notes" v-slot="{ item: note }" :items="notes" :direction="pagination.reversed ? 'up' : 'down'" :reversed="pagination.reversed" :no-gap="noGap" :ad="true" class="notes">
-				<XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note"/>
-			</XList>
-		</div>
-	</template>
-</MkPagination>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import XNote from '@/components/MkNote.vue';
-import XList from '@/components/MkDateSeparatedList.vue';
-import MkPagination, { Paging } from '@/components/MkPagination.vue';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	pagination: Paging;
-	noGap?: boolean;
-}>();
-
-const pagingComponent = ref<InstanceType<typeof MkPagination>>();
-
-defineExpose({
-	pagingComponent,
-});
-</script>
-
-<style lang="scss" scoped>
-.giivymft {
-	&.noGap {
-		> .notes {
-			background: var(--panel);
-		}
-	}
-
-	&:not(.noGap) {
-		> .notes {
-			background: var(--bg);
-
-			.qtqtichx {
-				background: var(--panel);
-				border-radius: var(--radius);
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkNotification.vue b/packages/client/src/components/MkNotification.vue
deleted file mode 100644
index 8b8d3f452d..0000000000
--- a/packages/client/src/components/MkNotification.vue
+++ /dev/null
@@ -1,323 +0,0 @@
-<template>
-<div ref="elRef" v-size="{ max: [500, 600] }" class="qglefbjs" :class="notification.type">
-	<div class="head">
-		<MkAvatar v-if="notification.type === 'pollEnded'" class="icon" :user="notification.note.user"/>
-		<MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/>
-		<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
-		<div class="sub-icon" :class="notification.type">
-			<i v-if="notification.type === 'follow'" class="ti ti-plus"></i>
-			<i v-else-if="notification.type === 'receiveFollowRequest'" class="ti ti-clock"></i>
-			<i v-else-if="notification.type === 'followRequestAccepted'" class="ti ti-check"></i>
-			<i v-else-if="notification.type === 'groupInvited'" class="ti ti-certificate-2"></i>
-			<i v-else-if="notification.type === 'renote'" class="ti ti-repeat"></i>
-			<i v-else-if="notification.type === 'reply'" class="ti ti-arrow-back-up"></i>
-			<i v-else-if="notification.type === 'mention'" class="ti ti-at"></i>
-			<i v-else-if="notification.type === 'quote'" class="ti ti-quote"></i>
-			<i v-else-if="notification.type === 'pollVote'" class="ti ti-chart-arrows"></i>
-			<i v-else-if="notification.type === 'pollEnded'" class="ti ti-chart-arrows"></i>
-			<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
-			<XReactionIcon
-				v-else-if="notification.type === 'reaction'"
-				ref="reactionRef"
-				:reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
-				:custom-emojis="notification.note.emojis"
-				:no-style="true"
-			/>
-		</div>
-	</div>
-	<div class="tail">
-		<header>
-			<span v-if="notification.type === 'pollEnded'">{{ i18n.ts._notification.pollEnded }}</span>
-			<MkA v-else-if="notification.user" v-user-preview="notification.user.id" class="name" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
-			<span v-else>{{ notification.header }}</span>
-			<MkTime v-if="withTime" :time="notification.createdAt" class="time"/>
-		</header>
-		<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<i class="ti ti-quote"></i>
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<i class="ti ti-quote"></i>
-		</MkA>
-		<MkA v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
-			<i class="ti ti-quote"></i>
-			<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
-			<i class="ti ti-quote"></i>
-		</MkA>
-		<MkA v-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-		</MkA>
-		<MkA v-if="notification.type === 'mention'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-		</MkA>
-		<MkA v-if="notification.type === 'quote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-		</MkA>
-		<MkA v-if="notification.type === 'pollVote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<i class="ti ti-quote"></i>
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<i class="ti ti-quote"></i>
-		</MkA>
-		<MkA v-if="notification.type === 'pollEnded'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
-			<i class="ti ti-quote"></i>
-			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
-			<i class="ti ti-quote"></i>
-		</MkA>
-		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span>
-		<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span>
-		<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ i18n.ts.receiveFollowRequest }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button></div></span>
-		<span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ i18n.ts.groupInvited }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ i18n.ts.reject }}</button></div></span>
-		<span v-if="notification.type === 'app'" class="text">
-			<Mfm :text="notification.body" :nowrap="!full"/>
-		</span>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, onMounted, onUnmounted, watch } from 'vue';
-import * as misskey from 'misskey-js';
-import XReactionIcon from '@/components/MkReactionIcon.vue';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import XReactionTooltip from '@/components/MkReactionTooltip.vue';
-import { getNoteSummary } from '@/scripts/get-note-summary';
-import { notePage } from '@/filters/note';
-import { userPage } from '@/filters/user';
-import { i18n } from '@/i18n';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { useTooltip } from '@/scripts/use-tooltip';
-
-const props = withDefaults(defineProps<{
-	notification: misskey.entities.Notification;
-	withTime?: boolean;
-	full?: boolean;
-}>(), {
-	withTime: false,
-	full: false,
-});
-
-const elRef = ref<HTMLElement>(null);
-const reactionRef = ref(null);
-
-let readObserver: IntersectionObserver | undefined;
-let connection;
-
-onMounted(() => {
-	if (!props.notification.isRead) {
-		readObserver = new IntersectionObserver((entries, observer) => {
-			if (!entries.some(entry => entry.isIntersecting)) return;
-			stream.send('readNotification', {
-				id: props.notification.id,
-			});
-			observer.disconnect();
-		});
-
-		readObserver.observe(elRef.value);
-
-		connection = stream.useChannel('main');
-		connection.on('readAllNotifications', () => readObserver.disconnect());
-
-		watch(props.notification.isRead, () => {
-			readObserver.disconnect();
-		});
-	}
-});
-
-onUnmounted(() => {
-	if (readObserver) readObserver.disconnect();
-	if (connection) connection.dispose();
-});
-
-const followRequestDone = ref(false);
-const groupInviteDone = ref(false);
-
-const acceptFollowRequest = () => {
-	followRequestDone.value = true;
-	os.api('following/requests/accept', { userId: props.notification.user.id });
-};
-
-const rejectFollowRequest = () => {
-	followRequestDone.value = true;
-	os.api('following/requests/reject', { userId: props.notification.user.id });
-};
-
-const acceptGroupInvitation = () => {
-	groupInviteDone.value = true;
-	os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id });
-};
-
-const rejectGroupInvitation = () => {
-	groupInviteDone.value = true;
-	os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
-};
-
-useTooltip(reactionRef, (showing) => {
-	os.popup(XReactionTooltip, {
-		showing,
-		reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction,
-		emojis: props.notification.note.emojis,
-		targetElement: reactionRef.value.$el,
-	}, {}, 'closed');
-});
-</script>
-
-<style lang="scss" scoped>
-.qglefbjs {
-	position: relative;
-	box-sizing: border-box;
-	padding: 24px 32px;
-	font-size: 0.9em;
-	overflow-wrap: break-word;
-	display: flex;
-	contain: content;
-
-	&.max-width_600px {
-		padding: 16px;
-		font-size: 0.9em;
-	}
-
-	&.max-width_500px {
-		padding: 12px;
-		font-size: 0.85em;
-	}
-
-	> .head {
-		position: sticky;
-		top: 0;
-		flex-shrink: 0;
-		width: 42px;
-		height: 42px;
-		margin-right: 8px;
-
-		> .icon {
-			display: block;
-			width: 100%;
-			height: 100%;
-			border-radius: 6px;
-		}
-
-		> .sub-icon {
-			position: absolute;
-			z-index: 1;
-			bottom: -2px;
-			right: -2px;
-			width: 20px;
-			height: 20px;
-			box-sizing: border-box;
-			border-radius: 100%;
-			background: var(--panel);
-			box-shadow: 0 0 0 3px var(--panel);
-			font-size: 12px;
-			text-align: center;
-
-			&:empty {
-				display: none;
-			}
-
-			> * {
-				color: #fff;
-				width: 100%;
-				height: 100%;
-			}
-
-			&.follow, &.followRequestAccepted, &.receiveFollowRequest, &.groupInvited {
-				padding: 3px;
-				background: #36aed2;
-				pointer-events: none;
-			}
-
-			&.renote {
-				padding: 3px;
-				background: #36d298;
-				pointer-events: none;
-			}
-
-			&.quote {
-				padding: 3px;
-				background: #36d298;
-				pointer-events: none;
-			}
-
-			&.reply {
-				padding: 3px;
-				background: #007aff;
-				pointer-events: none;
-			}
-
-			&.mention {
-				padding: 3px;
-				background: #88a6b7;
-				pointer-events: none;
-			}
-
-			&.pollVote {
-				padding: 3px;
-				background: #88a6b7;
-				pointer-events: none;
-			}
-
-			&.pollEnded {
-				padding: 3px;
-				background: #88a6b7;
-				pointer-events: none;
-			}
-		}
-	}
-
-	> .tail {
-		flex: 1;
-		min-width: 0;
-
-		> header {
-			display: flex;
-			align-items: baseline;
-			white-space: nowrap;
-
-			> .name {
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				min-width: 0;
-				overflow: hidden;
-			}
-
-			> .time {
-				margin-left: auto;
-				font-size: 0.9em;
-			}
-		}
-
-		> .text {
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-
-			> i {
-				vertical-align: super;
-				font-size: 50%;
-				opacity: 0.5;
-			}
-
-			> i:first-child {
-				margin-right: 4px;
-			}
-
-			> i:last-child {
-				margin-left: 4px;
-			}
-		}
-	}
-}
-
-@container (max-width: 600px) {
-	.qglefbjs {
-		padding: 16px;
-		font-size: 0.9em;
-	}
-}
-
-@container (max-width: 500px) {
-	.qglefbjs {
-		padding: 12px;
-		font-size: 0.85em;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkNotificationSettingWindow.vue b/packages/client/src/components/MkNotificationSettingWindow.vue
deleted file mode 100644
index 75bea2976c..0000000000
--- a/packages/client/src/components/MkNotificationSettingWindow.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-<XModalWindow
-	ref="dialog"
-	:width="400"
-	:height="450"
-	:with-ok-button="true"
-	:ok-button-disabled="false"
-	@ok="ok()"
-	@close="dialog.close()"
-	@closed="emit('closed')"
->
-	<template #header>{{ i18n.ts.notificationSetting }}</template>
-	<div class="_monolithic_">
-		<div v-if="showGlobalToggle" class="_section">
-			<MkSwitch v-model="useGlobalSetting">
-				{{ i18n.ts.useGlobalSetting }}
-				<template #caption>{{ i18n.ts.useGlobalSettingDesc }}</template>
-			</MkSwitch>
-		</div>
-		<div v-if="!useGlobalSetting" class="_section">
-			<MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo>
-			<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
-			<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
-			<MkSwitch v-for="ntype in notificationTypes" :key="ntype" v-model="typesMap[ntype]">{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch>
-		</div>
-	</div>
-</XModalWindow>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import { notificationTypes } from 'misskey-js';
-import MkSwitch from './form/switch.vue';
-import MkInfo from './MkInfo.vue';
-import MkButton from './MkButton.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import { i18n } from '@/i18n';
-
-const emit = defineEmits<{
-	(ev: 'done', v: { includingTypes: string[] | null }): void,
-	(ev: 'closed'): void,
-}>();
-
-const props = withDefaults(defineProps<{
-	includingTypes?: typeof notificationTypes[number][] | null;
-	showGlobalToggle?: boolean;
-}>(), {
-	includingTypes: () => [],
-	showGlobalToggle: true,
-});
-
-let includingTypes = $computed(() => props.includingTypes || []);
-
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
-
-let typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({});
-let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);
-
-for (const ntype of notificationTypes) {
-	typesMap[ntype] = includingTypes.includes(ntype);
-}
-
-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>
diff --git a/packages/client/src/components/MkNotificationToast.vue b/packages/client/src/components/MkNotificationToast.vue
deleted file mode 100644
index 07640792c0..0000000000
--- a/packages/client/src/components/MkNotificationToast.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-<div class="mk-notification-toast" :style="{ zIndex }">
-	<transition :name="$store.state.animation ? 'notification-toast' : ''" appear @after-leave="$emit('closed')">
-		<XNotification v-if="showing" :notification="notification" class="notification _acrylic"/>
-	</transition>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted } from 'vue';
-import XNotification from '@/components/MkNotification.vue';
-import * as os from '@/os';
-
-defineProps<{
-	notification: any; // TODO
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-
-const zIndex = os.claimZIndex('high');
-let showing = $ref(true);
-
-onMounted(() => {
-	window.setTimeout(() => {
-		showing = false;
-	}, 6000);
-});
-</script>
-
-<style lang="scss" scoped>
-.notification-toast-enter-active, .notification-toast-leave-active {
-	transition: opacity 0.3s, transform 0.3s !important;
-}
-.notification-toast-enter-from, .notification-toast-leave-to {
-	opacity: 0;
-	transform: translateX(-250px);
-}
-
-.mk-notification-toast {
-	position: fixed;
-	left: 0;
-	width: 250px;
-	top: 32px;
-	padding: 0 32px;
-	pointer-events: none;
-	container-type: inline-size;
-
-	@media (max-width: 700px) {
-		top: initial;
-		bottom: 112px;
-		padding: 0 16px;
-	}
-
-	@media (max-width: 500px) {
-		bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
-		padding: 0 8px;
-	}
-
-	> .notification {
-		height: 100%;
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-		border-radius: 8px;
-		overflow: hidden;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkNotifications.vue b/packages/client/src/components/MkNotifications.vue
deleted file mode 100644
index 0e1cc06743..0000000000
--- a/packages/client/src/components/MkNotifications.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-<MkPagination ref="pagingComponent" :pagination="pagination">
-	<template #empty>
-		<div class="_fullinfo">
-			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-			<div>{{ i18n.ts.noNotifications }}</div>
-		</div>
-	</template>
-
-	<template #default="{ items: notifications }">
-		<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true">
-			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
-			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
-		</XList>
-	</template>
-</MkPagination>
-</template>
-
-<script lang="ts" setup>
-import { defineComponent, markRaw, onUnmounted, onMounted, computed, ref } from 'vue';
-import { notificationTypes } from 'misskey-js';
-import MkPagination, { Paging } from '@/components/MkPagination.vue';
-import XNotification from '@/components/MkNotification.vue';
-import XList from '@/components/MkDateSeparatedList.vue';
-import XNote from '@/components/MkNote.vue';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	includeTypes?: typeof notificationTypes[number][];
-	unreadOnly?: boolean;
-}>();
-
-const pagingComponent = ref<InstanceType<typeof MkPagination>>();
-
-const pagination: Paging = {
-	endpoint: 'i/notifications' as const,
-	limit: 10,
-	params: computed(() => ({
-		includeTypes: props.includeTypes ?? undefined,
-		excludeTypes: props.includeTypes ? undefined : $i.mutingNotificationTypes,
-		unreadOnly: props.unreadOnly,
-	})),
-};
-
-const onNotification = (notification) => {
-	const isMuted = props.includeTypes ? !props.includeTypes.includes(notification.type) : $i.mutingNotificationTypes.includes(notification.type);
-	if (isMuted || document.visibilityState === 'visible') {
-		stream.send('readNotification', {
-			id: notification.id,
-		});
-	}
-
-	if (!isMuted) {
-		pagingComponent.value.prepend({
-			...notification,
-			isRead: document.visibilityState === 'visible',
-		});
-	}
-};
-
-let connection;
-
-onMounted(() => {
-	connection = stream.useChannel('main');
-	connection.on('notification', onNotification);
-	connection.on('readAllNotifications', () => {
-		if (pagingComponent.value) {
-			for (const item of pagingComponent.value.queue) {
-				item.isRead = true;
-			}
-			for (const item of pagingComponent.value.items) {
-				item.isRead = true;
-			}
-		}
-	});
-	connection.on('readNotifications', notificationIds => {
-		if (pagingComponent.value) {
-			for (let i = 0; i < pagingComponent.value.queue.length; i++) {
-				if (notificationIds.includes(pagingComponent.value.queue[i].id)) {
-					pagingComponent.value.queue[i].isRead = true;
-				}
-			}
-			for (let i = 0; i < (pagingComponent.value.items || []).length; i++) {
-				if (notificationIds.includes(pagingComponent.value.items[i].id)) {
-					pagingComponent.value.items[i].isRead = true;
-				}
-			}
-		}
-	});
-});
-
-onUnmounted(() => {
-	if (connection) connection.dispose();
-});
-</script>
-
-<style lang="scss" scoped>
-.elsfgstc {
-	background: var(--panel);
-}
-</style>
diff --git a/packages/client/src/components/MkNumberDiff.vue b/packages/client/src/components/MkNumberDiff.vue
deleted file mode 100644
index e7d4a5472a..0000000000
--- a/packages/client/src/components/MkNumberDiff.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-<span class="ceaaebcd" :class="{ isPlus, isMinus, isZero }">
-	<slot name="before"></slot>{{ isPlus ? '+' : '' }}{{ number(value) }}<slot name="after"></slot>
-</span>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
-import number from '@/filters/number';
-
-export default defineComponent({
-	props: {
-		value: {
-			type: Number,
-			required: true,
-		},
-	},
-
-	setup(props) {
-		const isPlus = computed(() => props.value > 0);
-		const isMinus = computed(() => props.value < 0);
-		const isZero = computed(() => props.value === 0);
-		return {
-			isPlus,
-			isMinus,
-			isZero,
-			number,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.ceaaebcd {
-	&.isPlus {
-		color: var(--success);
-	}
-
-	&.isMinus {
-		color: var(--error);
-	}
-
-	&.isZero {
-		opacity: 0.5;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkObjectView.value.vue b/packages/client/src/components/MkObjectView.value.vue
deleted file mode 100644
index 0c7230d783..0000000000
--- a/packages/client/src/components/MkObjectView.value.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-<div class="igpposuu _monospace">
-	<div v-if="value === null" class="null">null</div>
-	<div v-else-if="typeof value === 'boolean'" class="boolean" :class="{ true: value, false: !value }">{{ value ? 'true' : 'false' }}</div>
-	<div v-else-if="typeof value === 'string'" class="string">"{{ value }}"</div>
-	<div v-else-if="typeof value === 'number'" class="number">{{ number(value) }}</div>
-	<div v-else-if="isArray(value) && isEmpty(value)" class="array empty">[]</div>
-	<div v-else-if="isArray(value)" class="array">
-		<div v-for="i in value.length" class="element">
-			{{ i }}: <XValue :value="value[i - 1]" collapsed/>
-		</div>
-	</div>
-	<div v-else-if="isObject(value) && isEmpty(value)" class="object empty">{}</div>
-	<div v-else-if="isObject(value)" class="object">
-		<div v-for="k in Object.keys(value)" class="kv">
-			<button class="toggle _button" :class="{ visible: collapsable(value[k]) }" @click="collapsed[k] = !collapsed[k]">{{ collapsed[k] ? '+' : '-' }}</button>
-			<div class="k">{{ k }}:</div>
-			<div v-if="collapsed[k]" class="v">
-				<button class="_button" @click="collapsed[k] = !collapsed[k]">
-					<template v-if="typeof value[k] === 'string'">"..."</template>
-					<template v-else-if="isArray(value[k])">[...]</template>
-					<template v-else-if="isObject(value[k])">{...}</template>
-				</button>
-			</div>
-			<div v-else class="v"><XValue :value="value[k]"/></div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, reactive, ref } from 'vue';
-import number from '@/filters/number';
-
-export default defineComponent({
-	name: 'XValue',
-
-	props: {
-		value: {
-			required: true,
-		},
-	},
-
-	setup(props) {
-		const collapsed = reactive({});
-
-		if (isObject(props.value)) {
-			for (const key in props.value) {
-				collapsed[key] = collapsable(props.value[key]);
-			}
-		}
-
-		function isObject(v): boolean {
-			return typeof v === 'object' && !Array.isArray(v) && v !== null;
-		}
-
-		function isArray(v): boolean {
-			return Array.isArray(v);
-		}
-
-		function isEmpty(v): boolean {
-			return (isArray(v) && v.length === 0) || (isObject(v) && Object.keys(v).length === 0);
-		}
-
-		function collapsable(v): boolean {
-			return (isObject(v) || isArray(v)) && !isEmpty(v);
-		}
-
-		return {
-			number,
-			collapsed,
-			isObject,
-			isArray,
-			isEmpty,
-			collapsable,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.igpposuu {
-	display: inline;
-
-	> .null {
-		display: inline;
-		opacity: 0.7;
-	}
-
-	> .boolean {
-		display: inline;
-		color: var(--codeBoolean);
-
-		&.true {
-			font-weight: bold;
-		}
-
-		&.false {
-			opacity: 0.7;
-		}
-	}
-
-	> .string {
-		display: inline;
-		color: var(--codeString);
-	}
-
-	> .number {
-		display: inline;
-		color: var(--codeNumber);
-	}
-
-	> .array.empty {
-		display: inline;
-		opacity: 0.7;
-	}
-
-	> .array:not(.empty) {
-		display: inline;
-
-		> .element {
-			display: block;
-			padding-left: 16px;
-		}
-	}
-
-	> .object.empty {
-		display: inline;
-		opacity: 0.7;
-	}
-
-	> .object:not(.empty) {
-		display: inline;
-
-		> .kv {
-			display: block;
-			padding-left: 16px;
-
-			> .toggle {
-				width: 16px;
-				color: var(--accent);
-				visibility: hidden;
-
-				&.visible {
-					visibility: visible;
-				}
-			}
-
-			> .k {
-				display: inline;
-				margin-right: 8px;
-			}
-
-			> .v {
-				display: inline;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkObjectView.vue b/packages/client/src/components/MkObjectView.vue
deleted file mode 100644
index 55578a37f6..0000000000
--- a/packages/client/src/components/MkObjectView.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-<div class="zhyxdalp">
-	<XValue :value="value" :collapsed="false"/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import XValue from './MkObjectView.value.vue';
-
-const props = defineProps<{
-	value: Record<string, unknown>;
-}>();
-</script>
-
-<style lang="scss" scoped>
-.zhyxdalp {
-
-}
-</style>
diff --git a/packages/client/src/components/MkPagePreview.vue b/packages/client/src/components/MkPagePreview.vue
deleted file mode 100644
index 009582e540..0000000000
--- a/packages/client/src/components/MkPagePreview.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _block" tabindex="-1">
-	<div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
-	<article>
-		<header>
-			<h1 :title="page.title">{{ page.title }}</h1>
-		</header>
-		<p v-if="page.summary" :title="page.summary">{{ page.summary.length > 85 ? page.summary.slice(0, 85) + '…' : page.summary }}</p>
-		<footer>
-			<img class="icon" :src="page.user.avatarUrl"/>
-			<p>{{ userName(page.user) }}</p>
-		</footer>
-	</article>
-</MkA>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { userName } from '@/filters/user';
-import * as os from '@/os';
-
-export default defineComponent({
-	props: {
-		page: {
-			type: Object,
-			required: true,
-		},
-	},
-	methods: {
-		userName,
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.vhpxefrj {
-	display: block;
-
-	&:hover {
-		text-decoration: none;
-		color: var(--accent);
-	}
-
-	> .thumbnail {
-		width: 100%;
-		height: 200px;
-		background-position: center;
-		background-size: cover;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		> button {
-			font-size: 3.5em;
-			opacity: 0.7;
-
-			&:hover {
-				font-size: 4em;
-				opacity: 0.9;
-			}
-		}
-
-		& + article {
-			left: 100px;
-			width: calc(100% - 100px);
-		}
-	}
-
-	> article {
-		padding: 16px;
-
-		> header {
-			margin-bottom: 8px;
-
-			> h1 {
-				margin: 0;
-				font-size: 1em;
-				color: var(--urlPreviewTitle);
-			}
-		}
-
-		> p {
-			margin: 0;
-			color: var(--urlPreviewText);
-			font-size: 0.8em;
-		}
-
-		> footer {
-			margin-top: 8px;
-			height: 16px;
-
-			> img {
-				display: inline-block;
-				width: 16px;
-				height: 16px;
-				margin-right: 4px;
-				vertical-align: top;
-			}
-
-			> p {
-				display: inline-block;
-				margin: 0;
-				color: var(--urlPreviewInfo);
-				font-size: 0.8em;
-				line-height: 16px;
-				vertical-align: top;
-			}
-		}
-	}
-
-	@media (max-width: 700px) {
-		> .thumbnail {
-			position: relative;
-			width: 100%;
-			height: 100px;
-
-			& + article {
-				left: 0;
-				width: 100%;
-			}
-		}
-	}
-
-	@media (max-width: 550px) {
-		font-size: 12px;
-
-		> .thumbnail {
-			height: 80px;
-		}
-
-		> article {
-			padding: 12px;
-		}
-	}
-
-	@media (max-width: 500px) {
-		font-size: 10px;
-
-		> .thumbnail {
-			height: 70px;
-		}
-
-		> article {
-			padding: 8px;
-
-			> header {
-				margin-bottom: 4px;
-			}
-
-			> footer {
-				margin-top: 4px;
-
-				> img {
-					width: 12px;
-					height: 12px;
-				}
-			}
-		}
-	}
-}
-
-</style>
diff --git a/packages/client/src/components/MkPageWindow.vue b/packages/client/src/components/MkPageWindow.vue
deleted file mode 100644
index 29d45558a7..0000000000
--- a/packages/client/src/components/MkPageWindow.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-<XWindow
-	ref="windowEl"
-	:initial-width="500"
-	:initial-height="500"
-	:can-resize="true"
-	:close-button="true"
-	:buttons-left="buttonsLeft"
-	:buttons-right="buttonsRight"
-	:contextmenu="contextmenu"
-	@closed="$emit('closed')"
->
-	<template #header>
-		<template v-if="pageMetadata?.value">
-			<i v-if="pageMetadata.value.icon" class="icon" :class="pageMetadata.value.icon" style="margin-right: 0.5em;"></i>
-			<span>{{ pageMetadata.value.title }}</span>
-		</template>
-	</template>
-
-	<div class="yrolvcoq" :style="{ background: pageMetadata?.value?.bg }">
-		<RouterView :router="router"/>
-	</div>
-</XWindow>
-</template>
-
-<script lang="ts" setup>
-import { ComputedRef, inject, provide } from 'vue';
-import RouterView from '@/components/global/RouterView.vue';
-import XWindow from '@/components/MkWindow.vue';
-import { popout as _popout } from '@/scripts/popout';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { url } from '@/config';
-import * as os from '@/os';
-import { mainRouter, routes } from '@/router';
-import { Router } from '@/nirax';
-import { i18n } from '@/i18n';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-
-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<{ path: string; key: any; }[]>([{
-	path: router.getCurrentPath(),
-	key: router.getCurrentKey(),
-}]);
-const buttonsLeft = $computed(() => {
-	const buttons = [];
-
-	if (history.length > 1) {
-		buttons.push({
-			icon: 'ti ti-arrow-left',
-			onClick: back,
-		});
-	}
-
-	return buttons;
-});
-const buttonsRight = $computed(() => {
-	const buttons = [{
-		icon: 'ti ti-player-eject',
-		title: i18n.ts.showInPage,
-		onClick: expand,
-	}];
-
-	return buttons;
-});
-
-router.addListener('push', ctx => {
-	history.push({ path: ctx.path, key: ctx.key });
-});
-
-provide('router', router);
-provideMetadataReceiver((info) => {
-	pageMetadata = info;
-});
-provide('shouldOmitHeaderTitle', true);
-provide('shouldHeaderThin', true);
-
-const contextmenu = $computed(() => ([{
-	icon: 'ti ti-player-eject',
-	text: i18n.ts.showInPage,
-	action: expand,
-}, {
-	icon: 'ti ti-window-maximize',
-	text: i18n.ts.popout,
-	action: popout,
-}, {
-	icon: 'ti ti-external-link',
-	text: i18n.ts.openInNewTab,
-	action: () => {
-		window.open(url + router.getCurrentPath(), '_blank');
-		windowEl.close();
-	},
-}, {
-	icon: 'ti ti-link',
-	text: i18n.ts.copyLink,
-	action: () => {
-		copyToClipboard(url + router.getCurrentPath());
-	},
-}]));
-
-function back() {
-	history.pop();
-	router.replace(history[history.length - 1].path, history[history.length - 1].key);
-}
-
-function close() {
-	windowEl.close();
-}
-
-function expand() {
-	mainRouter.push(router.getCurrentPath(), 'forcePage');
-	windowEl.close();
-}
-
-function popout() {
-	_popout(router.getCurrentPath(), windowEl.$el);
-	windowEl.close();
-}
-
-defineExpose({
-	close,
-});
-</script>
-
-<style lang="scss" scoped>
-.yrolvcoq {
-	min-height: 100%;
-	background: var(--bg);
-}
-</style>
diff --git a/packages/client/src/components/MkPagination.vue b/packages/client/src/components/MkPagination.vue
deleted file mode 100644
index 291409171a..0000000000
--- a/packages/client/src/components/MkPagination.vue
+++ /dev/null
@@ -1,317 +0,0 @@
-<template>
-<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-	<MkLoading v-if="fetching"/>
-
-	<MkError v-else-if="error" @retry="init()"/>
-
-	<div v-else-if="empty" key="_empty_" class="empty">
-		<slot name="empty">
-			<div class="_fullinfo">
-				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-				<div>{{ i18n.ts.nothing }}</div>
-			</div>
-		</slot>
-	</div>
-
-	<div v-else ref="rootEl">
-		<div v-show="pagination.reversed && more" key="_more_" class="cxiknjgy _gap">
-			<MkButton v-if="!moreFetching" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMoreAhead">
-				{{ i18n.ts.loadMore }}
-			</MkButton>
-			<MkLoading v-else class="loading"/>
-		</div>
-		<slot :items="items"></slot>
-		<div v-show="!pagination.reversed && more" key="_more_" class="cxiknjgy _gap">
-			<MkButton v-if="!moreFetching" v-appear="($store.state.enableInfiniteScroll && !disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
-				{{ i18n.ts.loadMore }}
-			</MkButton>
-			<MkLoading v-else class="loading"/>
-		</div>
-	</div>
-</transition>
-</template>
-
-<script lang="ts" setup>
-import { computed, ComputedRef, isRef, markRaw, onActivated, onDeactivated, Ref, ref, watch } from 'vue';
-import * as misskey from 'misskey-js';
-import * as os from '@/os';
-import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
-
-const SECOND_FETCH_LIMIT = 30;
-
-export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints> = {
-	endpoint: E;
-	limit: number;
-	params?: misskey.Endpoints[E]['req'] | ComputedRef<misskey.Endpoints[E]['req']>;
-
-	/**
-	 * 検索APIのような、ページング不可なエンドポイントを利用する場合
-	 * (そのようなAPIをこの関数で使うのは若干矛盾してるけど)
-	 */
-	noPaging?: boolean;
-
-	/**
-	 * items 配列の中身を逆順にする(新しい方が最後)
-	 */
-	reversed?: boolean;
-
-	offsetMode?: boolean;
-};
-
-const props = withDefaults(defineProps<{
-	pagination: Paging;
-	disableAutoLoad?: boolean;
-	displayLimit?: number;
-}>(), {
-	displayLimit: 30,
-});
-
-const emit = defineEmits<{
-	(ev: 'queue', count: number): void;
-}>();
-
-type Item = { id: string; [another: string]: unknown; };
-
-const rootEl = ref<HTMLElement>();
-const items = ref<Item[]>([]);
-const queue = ref<Item[]>([]);
-const offset = ref(0);
-const fetching = ref(true);
-const moreFetching = ref(false);
-const more = ref(false);
-const backed = ref(false); // 遡り中か否か
-const isBackTop = ref(false);
-const empty = computed(() => items.value.length === 0);
-const error = ref(false);
-
-const init = async (): Promise<void> => {
-	queue.value = [];
-	fetching.value = true;
-	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
-	await os.api(props.pagination.endpoint, {
-		...params,
-		limit: props.pagination.noPaging ? (props.pagination.limit || 10) : (props.pagination.limit || 10) + 1,
-	}).then(res => {
-		for (let i = 0; i < res.length; i++) {
-			const item = res[i];
-			if (props.pagination.reversed) {
-				if (i === res.length - 2) item._shouldInsertAd_ = true;
-			} else {
-				if (i === 3) item._shouldInsertAd_ = true;
-			}
-		}
-		if (!props.pagination.noPaging && (res.length > (props.pagination.limit || 10))) {
-			res.pop();
-			items.value = props.pagination.reversed ? [...res].reverse() : res;
-			more.value = true;
-		} else {
-			items.value = props.pagination.reversed ? [...res].reverse() : res;
-			more.value = false;
-		}
-		offset.value = res.length;
-		error.value = false;
-		fetching.value = false;
-	}, err => {
-		error.value = true;
-		fetching.value = false;
-	});
-};
-
-const reload = (): void => {
-	items.value = [];
-	init();
-};
-
-const fetchMore = async (): Promise<void> => {
-	if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
-	moreFetching.value = true;
-	backed.value = true;
-	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
-	await os.api(props.pagination.endpoint, {
-		...params,
-		limit: SECOND_FETCH_LIMIT + 1,
-		...(props.pagination.offsetMode ? {
-			offset: offset.value,
-		} : props.pagination.reversed ? {
-			sinceId: items.value[0].id,
-		} : {
-			untilId: items.value[items.value.length - 1].id,
-		}),
-	}).then(res => {
-		for (let i = 0; i < res.length; i++) {
-			const item = res[i];
-			if (props.pagination.reversed) {
-				if (i === res.length - 9) item._shouldInsertAd_ = true;
-			} else {
-				if (i === 10) item._shouldInsertAd_ = true;
-			}
-		}
-		if (res.length > SECOND_FETCH_LIMIT) {
-			res.pop();
-			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
-			more.value = true;
-		} else {
-			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
-			more.value = false;
-		}
-		offset.value += res.length;
-		moreFetching.value = false;
-	}, err => {
-		moreFetching.value = false;
-	});
-};
-
-const fetchMoreAhead = async (): Promise<void> => {
-	if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
-	moreFetching.value = true;
-	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
-	await os.api(props.pagination.endpoint, {
-		...params,
-		limit: SECOND_FETCH_LIMIT + 1,
-		...(props.pagination.offsetMode ? {
-			offset: offset.value,
-		} : props.pagination.reversed ? {
-			untilId: items.value[0].id,
-		} : {
-			sinceId: items.value[items.value.length - 1].id,
-		}),
-	}).then(res => {
-		if (res.length > SECOND_FETCH_LIMIT) {
-			res.pop();
-			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
-			more.value = true;
-		} else {
-			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
-			more.value = false;
-		}
-		offset.value += res.length;
-		moreFetching.value = false;
-	}, err => {
-		moreFetching.value = false;
-	});
-};
-
-const prepend = (item: Item): void => {
-	if (props.pagination.reversed) {
-		if (rootEl.value) {
-			const container = getScrollContainer(rootEl.value);
-			if (container == null) {
-				// TODO?
-			} else {
-				const pos = getScrollPosition(rootEl.value);
-				const viewHeight = container.clientHeight;
-				const height = container.scrollHeight;
-				const isBottom = (pos + viewHeight > height - 32);
-				if (isBottom) {
-					// オーバーフローしたら古いアイテムは捨てる
-					if (items.value.length >= props.displayLimit) {
-						// このやり方だとVue 3.2以降アニメーションが動かなくなる
-						//items.value = items.value.slice(-props.displayLimit);
-						while (items.value.length >= props.displayLimit) {
-							items.value.shift();
-						}
-						more.value = true;
-					}
-				}
-			}
-		}
-		items.value.push(item);
-		// TODO
-	} else {
-		// 初回表示時はunshiftだけでOK
-		if (!rootEl.value) {
-			items.value.unshift(item);
-			return;
-		}
-
-		const isTop = isBackTop.value || (document.body.contains(rootEl.value) && isTopVisible(rootEl.value));
-
-		if (isTop) {
-			// Prepend the item
-			items.value.unshift(item);
-
-			// オーバーフローしたら古いアイテムは捨てる
-			if (items.value.length >= props.displayLimit) {
-				// このやり方だとVue 3.2以降アニメーションが動かなくなる
-				//this.items = items.value.slice(0, props.displayLimit);
-				while (items.value.length >= props.displayLimit) {
-					items.value.pop();
-				}
-				more.value = true;
-			}
-		} else {
-			queue.value.push(item);
-			onScrollTop(rootEl.value, () => {
-				for (const item of queue.value) {
-					prepend(item);
-				}
-				queue.value = [];
-			});
-		}
-	}
-};
-
-const append = (item: Item): void => {
-	items.value.push(item);
-};
-
-const removeItem = (finder: (item: Item) => boolean) => {
-	const i = items.value.findIndex(finder);
-	items.value.splice(i, 1);
-};
-
-const updateItem = (id: Item['id'], replacer: (old: Item) => Item): void => {
-	const i = items.value.findIndex(item => item.id === id);
-	items.value[i] = replacer(items.value[i]);
-};
-
-if (props.pagination.params && isRef(props.pagination.params)) {
-	watch(props.pagination.params, init, { deep: true });
-}
-
-watch(queue, (a, b) => {
-	if (a.length === 0 && b.length === 0) return;
-	emit('queue', queue.value.length);
-}, { deep: true });
-
-init();
-
-onActivated(() => {
-	isBackTop.value = false;
-});
-
-onDeactivated(() => {
-	isBackTop.value = window.scrollY === 0;
-});
-
-defineExpose({
-	items,
-	queue,
-	backed,
-	reload,
-	prepend,
-	append,
-	removeItem,
-	updateItem,
-});
-</script>
-
-<style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
-	transition: opacity 0.125s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-
-.cxiknjgy {
-	> .button {
-		margin-left: auto;
-		margin-right: auto;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkPoll.vue b/packages/client/src/components/MkPoll.vue
deleted file mode 100644
index a1b927e42a..0000000000
--- a/packages/client/src/components/MkPoll.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<template>
-<div class="tivcixzd" :class="{ done: closed || isVoted }">
-	<ul>
-		<li v-for="(choice, i) in note.poll.choices" :key="i" :class="{ voted: choice.voted }" @click="vote(i)">
-			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
-			<span>
-				<template v-if="choice.isVoted"><i class="ti ti-check"></i></template>
-				<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
-				<span v-if="showResult" class="votes">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
-			</span>
-		</li>
-	</ul>
-	<p v-if="!readOnly">
-		<span>{{ $t('_poll.totalVotes', { n: total }) }}</span>
-		<span> · </span>
-		<a v-if="!closed && !isVoted" @click="showResult = !showResult">{{ showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult }}</a>
-		<span v-if="isVoted">{{ i18n.ts._poll.voted }}</span>
-		<span v-else-if="closed">{{ i18n.ts._poll.closed }}</span>
-		<span v-if="remaining > 0"> · {{ timer }}</span>
-	</p>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, onUnmounted, ref, toRef } from 'vue';
-import * as misskey from 'misskey-js';
-import { sum } from '@/scripts/array';
-import { pleaseLogin } from '@/scripts/please-login';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { useInterval } from '@/scripts/use-interval';
-
-const props = defineProps<{
-	note: misskey.entities.Note;
-	readOnly?: boolean;
-}>();
-
-const remaining = ref(-1);
-
-const total = computed(() => sum(props.note.poll.choices.map(x => x.votes)));
-const closed = computed(() => remaining.value === 0);
-const isVoted = computed(() => !props.note.poll.multiple && props.note.poll.choices.some(c => c.isVoted));
-const timer = computed(() => i18n.t(
-	remaining.value >= 86400 ? '_poll.remainingDays' :
-	remaining.value >= 3600 ? '_poll.remainingHours' :
-	remaining.value >= 60 ? '_poll.remainingMinutes' : '_poll.remainingSeconds', {
-		s: Math.floor(remaining.value % 60),
-		m: Math.floor(remaining.value / 60) % 60,
-		h: Math.floor(remaining.value / 3600) % 24,
-		d: Math.floor(remaining.value / 86400),
-	}));
-
-const showResult = ref(props.readOnly || isVoted.value);
-
-// 期限付きアンケート
-if (props.note.poll.expiresAt) {
-	const tick = () => {
-		remaining.value = Math.floor(Math.max(new Date(props.note.poll.expiresAt).getTime() - Date.now(), 0) / 1000);
-		if (remaining.value === 0) {
-			showResult.value = true;
-		}
-	};
-
-	useInterval(tick, 3000, {
-		immediate: true,
-		afterMounted: false,
-	});
-}
-
-const vote = async (id) => {
-	pleaseLogin();
-
-	if (props.readOnly || closed.value || isVoted.value) return;
-
-	const { canceled } = await os.confirm({
-		type: 'question',
-		text: i18n.t('voteConfirm', { choice: props.note.poll.choices[id].text }),
-	});
-	if (canceled) return;
-
-	await os.api('notes/polls/vote', {
-		noteId: props.note.id,
-		choice: id,
-	});
-	if (!showResult.value) showResult.value = !props.note.poll.multiple;
-};
-</script>
-
-<style lang="scss" scoped>
-.tivcixzd {
-	> ul {
-		display: block;
-		margin: 0;
-		padding: 0;
-		list-style: none;
-
-		> li {
-			display: block;
-			position: relative;
-			margin: 4px 0;
-			padding: 4px;
-			//border: solid 0.5px var(--divider);
-			background: var(--accentedBg);
-			border-radius: 4px;
-			overflow: hidden;
-			cursor: pointer;
-
-			> .backdrop {
-				position: absolute;
-				top: 0;
-				left: 0;
-				height: 100%;
-				background: var(--accent);
-				background: linear-gradient(90deg,var(--buttonGradateA),var(--buttonGradateB));
-				transition: width 1s ease;
-			}
-
-			> span {
-				position: relative;
-				display: inline-block;
-				padding: 3px 5px;
-				background: var(--panel);
-				border-radius: 3px;
-
-				> i {
-					margin-right: 4px;
-					color: var(--accent);
-				}
-
-				> .votes {
-					margin-left: 4px;
-					opacity: 0.7;
-				}
-			}
-		}
-	}
-
-	> p {
-		color: var(--fg);
-
-		a {
-			color: inherit;
-		}
-	}
-
-	&.done {
-		> ul > li {
-			cursor: default;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkPollEditor.vue b/packages/client/src/components/MkPollEditor.vue
deleted file mode 100644
index 556abc5fd0..0000000000
--- a/packages/client/src/components/MkPollEditor.vue
+++ /dev/null
@@ -1,219 +0,0 @@
-<template>
-<div class="zmdxowus">
-	<p v-if="choices.length < 2" class="caution">
-		<i class="ti ti-alert-triangle"></i>{{ i18n.ts._poll.noOnlyOneChoice }}
-	</p>
-	<ul>
-		<li v-for="(choice, i) in choices" :key="i">
-			<MkInput class="input" small :model-value="choice" :placeholder="$t('_poll.choiceN', { n: i + 1 })" @update:model-value="onInput(i, $event)">
-			</MkInput>
-			<button class="_button" @click="remove(i)">
-				<i class="ti ti-x"></i>
-			</button>
-		</li>
-	</ul>
-	<MkButton v-if="choices.length < 10" class="add" @click="add">{{ i18n.ts.add }}</MkButton>
-	<MkButton v-else class="add" disabled>{{ i18n.ts._poll.noMore }}</MkButton>
-	<MkSwitch v-model="multiple">{{ i18n.ts._poll.canMultipleVote }}</MkSwitch>
-	<section>
-		<div>
-			<MkSelect v-model="expiration" small>
-				<template #label>{{ i18n.ts._poll.expiration }}</template>
-				<option value="infinite">{{ i18n.ts._poll.infinite }}</option>
-				<option value="at">{{ i18n.ts._poll.at }}</option>
-				<option value="after">{{ i18n.ts._poll.after }}</option>
-			</MkSelect>
-			<section v-if="expiration === 'at'">
-				<MkInput v-model="atDate" small type="date" class="input">
-					<template #label>{{ i18n.ts._poll.deadlineDate }}</template>
-				</MkInput>
-				<MkInput v-model="atTime" small type="time" class="input">
-					<template #label>{{ i18n.ts._poll.deadlineTime }}</template>
-				</MkInput>
-			</section>
-			<section v-else-if="expiration === 'after'">
-				<MkInput v-model="after" small type="number" class="input">
-					<template #label>{{ i18n.ts._poll.duration }}</template>
-				</MkInput>
-				<MkSelect v-model="unit" small>
-					<option value="second">{{ i18n.ts._time.second }}</option>
-					<option value="minute">{{ i18n.ts._time.minute }}</option>
-					<option value="hour">{{ i18n.ts._time.hour }}</option>
-					<option value="day">{{ i18n.ts._time.day }}</option>
-				</MkSelect>
-			</section>
-		</div>
-	</section>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import MkInput from './form/input.vue';
-import MkSelect from './form/select.vue';
-import MkSwitch from './form/switch.vue';
-import MkButton from './MkButton.vue';
-import { formatDateTimeString } from '@/scripts/format-time-string';
-import { addTime } from '@/scripts/time';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	modelValue: {
-		expiresAt: string;
-		expiredAfter: number;
-		choices: string[];
-		multiple: boolean;
-	};
-}>();
-const emit = defineEmits<{
-	(ev: 'update:modelValue', v: {
-		expiresAt: string;
-		expiredAfter: number;
-		choices: string[];
-		multiple: boolean;
-	}): void;
-}>();
-
-const choices = ref(props.modelValue.choices);
-const multiple = ref(props.modelValue.multiple);
-const expiration = ref('infinite');
-const atDate = ref(formatDateTimeString(addTime(new Date(), 1, 'day'), 'yyyy-MM-dd'));
-const atTime = ref('00:00');
-const after = ref(0);
-const unit = ref('second');
-
-if (props.modelValue.expiresAt) {
-	expiration.value = 'at';
-	atDate.value = atTime.value = props.modelValue.expiresAt;
-} else if (typeof props.modelValue.expiredAfter === 'number') {
-	expiration.value = 'after';
-	after.value = props.modelValue.expiredAfter / 1000;
-} else {
-	expiration.value = 'infinite';
-}
-
-function onInput(i, value) {
-	choices.value[i] = value;
-}
-
-function add() {
-	choices.value.push('');
-	// TODO
-	// nextTick(() => {
-	//   (this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
-	// });
-}
-
-function remove(i) {
-	choices.value = choices.value.filter((_, _i) => _i !== i);
-}
-
-function get() {
-	const calcAt = () => {
-		return new Date(`${atDate.value} ${atTime.value}`).getTime();
-	};
-
-	const calcAfter = () => {
-		let base = parseInt(after.value);
-		switch (unit.value) {
-			case 'day': base *= 24;
-				// fallthrough
-			case 'hour': base *= 60;
-				// fallthrough
-			case 'minute': base *= 60;
-				// fallthrough
-			case 'second': return base *= 1000;
-			default: return null;
-		}
-	};
-
-	return {
-		choices: choices.value,
-		multiple: multiple.value,
-		...(
-			expiration.value === 'at' ? { expiresAt: calcAt() } :
-			expiration.value === 'after' ? { expiredAfter: calcAfter() } : {}
-		),
-	};
-}
-
-watch([choices, multiple, expiration, atDate, atTime, after, unit], () => emit('update:modelValue', get()), {
-	deep: true,
-});
-</script>
-
-<style lang="scss" scoped>
-.zmdxowus {
-	padding: 8px 16px;
-
-	> .caution {
-		margin: 0 0 8px 0;
-		font-size: 0.8em;
-		color: #f00;
-
-		> i {
-			margin-right: 4px;
-		}
-	}
-
-	> ul {
-		display: block;
-		margin: 0;
-		padding: 0;
-		list-style: none;
-
-		> li {
-			display: flex;
-			margin: 8px 0;
-			padding: 0;
-			width: 100%;
-
-			> .input {
-				flex: 1;
-			}
-
-			> button {
-				width: 32px;
-				padding: 4px 0;
-			}
-		}
-	}
-
-	> .add {
-		margin: 8px 0;
-		z-index: 1;
-	}
-
-	> section {
-		margin: 16px 0 0 0;
-
-		> div {
-			margin: 0 8px;
-			display: flex;
-			flex-direction: row;
-			flex-wrap: wrap;
-			gap: 12px;
-
-			&:last-child {
-				flex: 1 0 auto;
-
-				> div {
-					flex-grow: 1;
-				}
-
-				> section {
-					// MAGIC: Prevent div above from growing unless wrapped to its own line
-					flex-grow: 9999;
-					align-items: end;
-					display: flex;
-					gap: 4px;
-
-					> .input {
-						flex: 1 1 auto;
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkPopupMenu.vue b/packages/client/src/components/MkPopupMenu.vue
deleted file mode 100644
index f04c7f5618..0000000000
--- a/packages/client/src/components/MkPopupMenu.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="modal.close()" @closed="emit('closed')">
-	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq" :class="{ drawer: type === 'drawer' }" @close="modal.close()"/>
-</MkModal>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkModal from './MkModal.vue';
-import MkMenu from './MkMenu.vue';
-import { MenuItem } from '@/types/menu';
-
-defineProps<{
-	items: MenuItem[];
-	align?: 'center' | string;
-	width?: number;
-	viaKeyboard?: boolean;
-	src?: any;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-
-let modal = $ref<InstanceType<typeof MkModal>>();
-</script>
-
-<style lang="scss" scoped>
-.sfhdhdhq {
-	&.drawer {
-		border-radius: 24px;
-		border-bottom-right-radius: 0;
-		border-bottom-left-radius: 0;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
deleted file mode 100644
index f79e5a32cd..0000000000
--- a/packages/client/src/components/MkPostForm.vue
+++ /dev/null
@@ -1,1050 +0,0 @@
-<template>
-<div
-	v-size="{ max: [310, 500] }" class="gafaadew"
-	:class="{ modal, _popup: modal }"
-	@dragover.stop="onDragover"
-	@dragenter="onDragenter"
-	@dragleave="onDragleave"
-	@drop.stop="onDrop"
->
-	<header>
-		<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="ti ti-x"></i></button>
-		<button v-click-anime v-tooltip="i18n.ts.switchAccount" class="account _button" @click="openAccountMenu">
-			<MkAvatar :user="postAccount ?? $i" class="avatar"/>
-		</button>
-		<div class="right">
-			<span class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
-			<span v-if="localOnly" class="local-only"><i class="ti ti-world-off"></i></span>
-			<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
-				<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
-				<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
-				<span v-if="visibility === 'followers'"><i class="ti ti-lock-open"></i></span>
-				<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
-			</button>
-			<button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
-			<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i></button>
-		</div>
-	</header>
-	<div class="form" :class="{ fixed }">
-		<XNoteSimple v-if="reply" class="preview" :note="reply"/>
-		<XNoteSimple v-if="renote" class="preview" :note="renote"/>
-		<div v-if="quoteId" class="with-quote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
-		<div v-if="visibility === 'specified'" class="to-specified">
-			<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
-			<div class="visibleUsers">
-				<span v-for="u in visibleUsers" :key="u.id">
-					<MkAcct :user="u"/>
-					<button class="_button" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
-				</span>
-				<button class="_buttonPrimary" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
-			</div>
-		</div>
-		<MkInfo v-if="hasNotSpecifiedMentions" warn class="hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
-		<input v-show="useCw" ref="cwInputEl" v-model="cw" class="cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
-		<textarea ref="textareaEl" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
-		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" class="hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
-		<XPostFormAttaches v-model="files" class="attaches" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
-		<XPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
-		<XNotePreview v-if="showPreview" class="preview" :text="text"/>
-		<footer>
-			<button v-tooltip="i18n.ts.attachFile" class="_button" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
-			<button v-tooltip="i18n.ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
-			<button v-tooltip="i18n.ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
-			<button v-tooltip="i18n.ts.mention" class="_button" @click="insertMention"><i class="ti ti-at"></i></button>
-			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
-			<button v-tooltip="i18n.ts.emoji" class="_button" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
-			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="ti ti-plug"></i></button>
-		</footer>
-		<datalist id="hashtags">
-			<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
-		</datalist>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { inject, watch, nextTick, onMounted, defineAsyncComponent } from 'vue';
-import * as mfm from 'mfm-js';
-import * as misskey from 'misskey-js';
-import insertTextAtCursor from 'insert-text-at-cursor';
-import { length } from 'stringz';
-import { toASCII } from 'punycode/';
-import * as Acct from 'misskey-js/built/acct';
-import { throttle } from 'throttle-debounce';
-import XNoteSimple from '@/components/MkNoteSimple.vue';
-import XNotePreview from '@/components/MkNotePreview.vue';
-import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
-import XPollEditor from '@/components/MkPollEditor.vue';
-import { host, url } from '@/config';
-import { erase, unique } from '@/scripts/array';
-import { extractMentions } from '@/scripts/extract-mentions';
-import { formatTimeString } from '@/scripts/format-time-string';
-import { Autocomplete } from '@/scripts/autocomplete';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { selectFiles } from '@/scripts/select-file';
-import { defaultStore, notePostInterruptors, postFormActions } from '@/store';
-import MkInfo from '@/components/MkInfo.vue';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account';
-import { uploadFile } from '@/scripts/upload';
-import { deepClone } from '@/scripts/clone';
-
-const modal = inject('modal');
-
-const props = withDefaults(defineProps<{
-	reply?: misskey.entities.Note;
-	renote?: misskey.entities.Note;
-	channel?: any; // TODO
-	mention?: misskey.entities.User;
-	specified?: misskey.entities.User;
-	initialText?: string;
-	initialVisibility?: typeof misskey.noteVisibilities;
-	initialFiles?: misskey.entities.DriveFile[];
-	initialLocalOnly?: boolean;
-	initialVisibleUsers?: misskey.entities.User[];
-	initialNote?: misskey.entities.Note;
-	instant?: boolean;
-	fixed?: boolean;
-	autofocus?: boolean;
-}>(), {
-	initialVisibleUsers: () => [],
-	autofocus: true,
-});
-
-const emit = defineEmits<{
-	(ev: 'posted'): void;
-	(ev: 'cancel'): void;
-	(ev: 'esc'): void;
-}>();
-
-const textareaEl = $ref<HTMLTextAreaElement | null>(null);
-const cwInputEl = $ref<HTMLInputElement | null>(null);
-const hashtagsInputEl = $ref<HTMLInputElement | null>(null);
-const visibilityButton = $ref<HTMLElement | null>(null);
-
-let posting = $ref(false);
-let text = $ref(props.initialText ?? '');
-let files = $ref(props.initialFiles ?? []);
-let poll = $ref<{
-	choices: string[];
-	multiple: boolean;
-	expiresAt: string | null;
-	expiredAfter: string | null;
-} | null>(null);
-let useCw = $ref(false);
-let showPreview = $ref(false);
-let cw = $ref<string | null>(null);
-let localOnly = $ref<boolean>(props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly);
-let visibility = $ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility) as typeof misskey.noteVisibilities[number]);
-let visibleUsers = $ref([]);
-if (props.initialVisibleUsers) {
-	props.initialVisibleUsers.forEach(pushVisibleUser);
-}
-let autocomplete = $ref(null);
-let draghover = $ref(false);
-let quoteId = $ref(null);
-let hasNotSpecifiedMentions = $ref(false);
-let recentHashtags = $ref(JSON.parse(localStorage.getItem('hashtags') || '[]'));
-let imeText = $ref('');
-
-const typing = throttle(3000, () => {
-	if (props.channel) {
-		stream.send('typingOnChannel', { channel: props.channel.id });
-	}
-});
-
-const draftKey = $computed((): string => {
-	let key = props.channel ? `channel:${props.channel.id}` : '';
-
-	if (props.renote) {
-		key += `renote:${props.renote.id}`;
-	} else if (props.reply) {
-		key += `reply:${props.reply.id}`;
-	} else {
-		key += 'note';
-	}
-
-	return key;
-});
-
-const placeholder = $computed((): string => {
-	if (props.renote) {
-		return i18n.ts._postForm.quotePlaceholder;
-	} else if (props.reply) {
-		return i18n.ts._postForm.replyPlaceholder;
-	} else if (props.channel) {
-		return i18n.ts._postForm.channelPlaceholder;
-	} else {
-		const xs = [
-			i18n.ts._postForm._placeholders.a,
-			i18n.ts._postForm._placeholders.b,
-			i18n.ts._postForm._placeholders.c,
-			i18n.ts._postForm._placeholders.d,
-			i18n.ts._postForm._placeholders.e,
-			i18n.ts._postForm._placeholders.f,
-		];
-		return xs[Math.floor(Math.random() * xs.length)];
-	}
-});
-
-const submitText = $computed((): string => {
-	return props.renote
-		? i18n.ts.quote
-		: props.reply
-			? i18n.ts.reply
-			: i18n.ts.note;
-});
-
-const textLength = $computed((): number => {
-	return length((text + imeText).trim());
-});
-
-const maxTextLength = $computed((): number => {
-	return instance ? instance.maxNoteTextLength : 1000;
-});
-
-const canPost = $computed((): boolean => {
-	return !posting &&
-		(1 <= textLength || 1 <= files.length || !!poll || !!props.renote) &&
-		(textLength <= maxTextLength) &&
-		(!poll || poll.choices.length >= 2);
-});
-
-const withHashtags = $computed(defaultStore.makeGetterSetter('postFormWithHashtags'));
-const hashtags = $computed(defaultStore.makeGetterSetter('postFormHashtags'));
-
-watch($$(text), () => {
-	checkMissingMention();
-});
-
-watch($$(visibleUsers), () => {
-	checkMissingMention();
-}, {
-	deep: true,
-});
-
-if (props.mention) {
-	text = props.mention.host ? `@${props.mention.username}@${toASCII(props.mention.host)}` : `@${props.mention.username}`;
-	text += ' ';
-}
-
-if (props.reply && (props.reply.user.username !== $i.username || (props.reply.user.host != null && props.reply.user.host !== host))) {
-	text = `@${props.reply.user.username}${props.reply.user.host != null ? '@' + toASCII(props.reply.user.host) : ''} `;
-}
-
-if (props.reply && props.reply.text != null) {
-	const ast = mfm.parse(props.reply.text);
-	const otherHost = props.reply.user.host;
-
-	for (const x of extractMentions(ast)) {
-		const mention = x.host ?
-			`@${x.username}@${toASCII(x.host)}` :
-			(otherHost == null || otherHost === host) ?
-				`@${x.username}` :
-				`@${x.username}@${toASCII(otherHost)}`;
-
-		// 自分は除外
-		if ($i.username === x.username && (x.host == null || x.host === host)) continue;
-
-		// 重複は除外
-		if (text.includes(`${mention} `)) continue;
-
-		text += `${mention} `;
-	}
-}
-
-if (props.channel) {
-	visibility = 'public';
-	localOnly = true; // TODO: チャンネルが連合するようになった折には消す
-}
-
-// 公開以外へのリプライ時は元の公開範囲を引き継ぐ
-if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visibility)) {
-	if (props.reply.visibility === 'home' && visibility === 'followers') {
-		visibility = 'followers';
-	} else if (['home', 'followers'].includes(props.reply.visibility) && visibility === 'specified') {
-		visibility = 'specified';
-	} else {
-		visibility = props.reply.visibility;
-	}
-
-	if (visibility === 'specified') {
-		if (props.reply.visibleUserIds) {
-			os.api('users/show', {
-				userIds: props.reply.visibleUserIds.filter(uid => uid !== $i.id && uid !== props.reply.userId),
-			}).then(users => {
-				users.forEach(pushVisibleUser);
-			});
-		}
-
-		if (props.reply.userId !== $i.id) {
-			os.api('users/show', { userId: props.reply.userId }).then(user => {
-				pushVisibleUser(user);
-			});
-		}
-	}
-}
-
-if (props.specified) {
-	visibility = 'specified';
-	pushVisibleUser(props.specified);
-}
-
-// keep cw when reply
-if (defaultStore.state.keepCw && props.reply && props.reply.cw) {
-	useCw = true;
-	cw = props.reply.cw;
-}
-
-function watchForDraft() {
-	watch($$(text), () => saveDraft());
-	watch($$(useCw), () => saveDraft());
-	watch($$(cw), () => saveDraft());
-	watch($$(poll), () => saveDraft());
-	watch($$(files), () => saveDraft(), { deep: true });
-	watch($$(visibility), () => saveDraft());
-	watch($$(localOnly), () => saveDraft());
-}
-
-function checkMissingMention() {
-	if (visibility === 'specified') {
-		const ast = mfm.parse(text);
-
-		for (const x of extractMentions(ast)) {
-			if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
-				hasNotSpecifiedMentions = true;
-				return;
-			}
-		}
-		hasNotSpecifiedMentions = false;
-	}
-}
-
-function addMissingMention() {
-	const ast = mfm.parse(text);
-
-	for (const x of extractMentions(ast)) {
-		if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
-			os.api('users/show', { username: x.username, host: x.host }).then(user => {
-				visibleUsers.push(user);
-			});
-		}
-	}
-}
-
-function togglePoll() {
-	if (poll) {
-		poll = null;
-	} else {
-		poll = {
-			choices: ['', ''],
-			multiple: false,
-			expiresAt: null,
-			expiredAfter: null,
-		};
-	}
-}
-
-function addTag(tag: string) {
-	insertTextAtCursor(textareaEl, ` #${tag} `);
-}
-
-function focus() {
-	if (textareaEl) {
-		textareaEl.focus();
-		textareaEl.setSelectionRange(textareaEl.value.length, textareaEl.value.length);
-	}
-}
-
-function chooseFileFrom(ev) {
-	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(files_ => {
-		for (const file of files_) {
-			files.push(file);
-		}
-	});
-}
-
-function detachFile(id) {
-	files = files.filter(x => x.id !== id);
-}
-
-function updateFileSensitive(file, sensitive) {
-	files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
-}
-
-function updateFileName(file, name) {
-	files[files.findIndex(x => x.id === file.id)].name = name;
-}
-
-function upload(file: File, name?: string) {
-	uploadFile(file, defaultStore.state.uploadFolder, name).then(res => {
-		files.push(res);
-	});
-}
-
-function setVisibility() {
-	if (props.channel) {
-		// TODO: information dialog
-		return;
-	}
-
-	os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
-		currentVisibility: visibility,
-		currentLocalOnly: localOnly,
-		src: visibilityButton,
-	}, {
-		changeVisibility: v => {
-			visibility = v;
-			if (defaultStore.state.rememberNoteVisibility) {
-				defaultStore.set('visibility', visibility);
-			}
-		},
-		changeLocalOnly: v => {
-			localOnly = v;
-			if (defaultStore.state.rememberNoteVisibility) {
-				defaultStore.set('localOnly', localOnly);
-			}
-		},
-	}, 'closed');
-}
-
-function pushVisibleUser(user) {
-	if (!visibleUsers.some(u => u.username === user.username && u.host === user.host)) {
-		visibleUsers.push(user);
-	}
-}
-
-function addVisibleUser() {
-	os.selectUser().then(user => {
-		pushVisibleUser(user);
-	});
-}
-
-function removeVisibleUser(user) {
-	visibleUsers = erase(user, visibleUsers);
-}
-
-function clear() {
-	text = '';
-	files = [];
-	poll = null;
-	quoteId = null;
-}
-
-function onKeydown(ev: KeyboardEvent) {
-	if ((ev.which === 10 || ev.which === 13) && (ev.ctrlKey || ev.metaKey) && canPost) post();
-	if (ev.which === 27) emit('esc');
-	typing();
-}
-
-function onCompositionUpdate(ev: CompositionEvent) {
-	imeText = ev.data;
-	typing();
-}
-
-function onCompositionEnd(ev: CompositionEvent) {
-	imeText = '';
-}
-
-async function onPaste(ev: ClipboardEvent) {
-	for (const { item, i } of Array.from(ev.clipboardData.items).map((item, i) => ({ item, i }))) {
-		if (item.kind === 'file') {
-			const file = item.getAsFile();
-			const lio = file.name.lastIndexOf('.');
-			const ext = lio >= 0 ? file.name.slice(lio) : '';
-			const formatted = `${formatTimeString(new Date(file.lastModified), defaultStore.state.pastedFileName).replace(/{{number}}/g, `${i + 1}`)}${ext}`;
-			upload(file, formatted);
-		}
-	}
-
-	const paste = ev.clipboardData.getData('text');
-
-	if (!props.renote && !quoteId && paste.startsWith(url + '/notes/')) {
-		ev.preventDefault();
-
-		os.confirm({
-			type: 'info',
-			text: i18n.ts.quoteQuestion,
-		}).then(({ canceled }) => {
-			if (canceled) {
-				insertTextAtCursor(textareaEl, paste);
-				return;
-			}
-
-			quoteId = paste.substr(url.length).match(/^\/notes\/(.+?)\/?$/)[1];
-		});
-	}
-}
-
-function onDragover(ev) {
-	if (!ev.dataTransfer.items[0]) return;
-	const isFile = ev.dataTransfer.items[0].kind === 'file';
-	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
-	if (isFile || isDriveFile) {
-		ev.preventDefault();
-		draghover = true;
-		switch (ev.dataTransfer.effectAllowed) {
-			case 'all':
-			case 'uninitialized':
-			case 'copy': 
-			case 'copyLink': 
-			case 'copyMove': 
-				ev.dataTransfer.dropEffect = 'copy';
-				break;
-			case 'linkMove':
-			case 'move':
-				ev.dataTransfer.dropEffect = 'move';
-				break;
-			default:
-				ev.dataTransfer.dropEffect = 'none';
-				break;
-		}
-	}
-}
-
-function onDragenter(ev) {
-	draghover = true;
-}
-
-function onDragleave(ev) {
-	draghover = false;
-}
-
-function onDrop(ev): void {
-	draghover = false;
-
-	// ファイルだったら
-	if (ev.dataTransfer.files.length > 0) {
-		ev.preventDefault();
-		for (const x of Array.from(ev.dataTransfer.files)) upload(x);
-		return;
-	}
-
-	//#region ドライブのファイル
-	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
-	if (driveFile != null && driveFile !== '') {
-		const file = JSON.parse(driveFile);
-		files.push(file);
-		ev.preventDefault();
-	}
-	//#endregion
-}
-
-function saveDraft() {
-	const draftData = JSON.parse(localStorage.getItem('drafts') || '{}');
-
-	draftData[draftKey] = {
-		updatedAt: new Date(),
-		data: {
-			text: text,
-			useCw: useCw,
-			cw: cw,
-			visibility: visibility,
-			localOnly: localOnly,
-			files: files,
-			poll: poll,
-		},
-	};
-
-	localStorage.setItem('drafts', JSON.stringify(draftData));
-}
-
-function deleteDraft() {
-	const draftData = JSON.parse(localStorage.getItem('drafts') ?? '{}');
-
-	delete draftData[draftKey];
-
-	localStorage.setItem('drafts', JSON.stringify(draftData));
-}
-
-async function post() {
-	let postData = {
-		text: text === '' ? undefined : text,
-		fileIds: files.length > 0 ? files.map(f => f.id) : undefined,
-		replyId: props.reply ? props.reply.id : undefined,
-		renoteId: props.renote ? props.renote.id : quoteId ? quoteId : undefined,
-		channelId: props.channel ? props.channel.id : undefined,
-		poll: poll,
-		cw: useCw ? cw ?? '' : undefined,
-		localOnly: localOnly,
-		visibility: visibility,
-		visibleUserIds: visibility === 'specified' ? visibleUsers.map(u => u.id) : undefined,
-	};
-
-	if (withHashtags && hashtags && hashtags.trim() !== '') {
-		const hashtags_ = hashtags.trim().split(' ').map(x => x.startsWith('#') ? x : '#' + x).join(' ');
-		postData.text = postData.text ? `${postData.text} ${hashtags_}` : hashtags_;
-	}
-
-	// plugin
-	if (notePostInterruptors.length > 0) {
-		for (const interruptor of notePostInterruptors) {
-			postData = await interruptor.handler(deepClone(postData));
-		}
-	}
-
-	let token = undefined;
-
-	if (postAccount) {
-		const storedAccounts = await getAccounts();
-		token = storedAccounts.find(x => x.id === postAccount.id)?.token;
-	}
-
-	posting = true;
-	os.api('notes/create', postData, token).then(() => {
-		clear();
-		nextTick(() => {
-			deleteDraft();
-			emit('posted');
-			if (postData.text && postData.text !== '') {
-				const hashtags_ = mfm.parse(postData.text).filter(x => x.type === 'hashtag').map(x => x.props.hashtag);
-				const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
-				localStorage.setItem('hashtags', JSON.stringify(unique(hashtags_.concat(history))));
-			}
-			posting = false;
-			postAccount = null;
-		});
-	}).catch(err => {
-		posting = false;
-		os.alert({
-			type: 'error',
-			text: err.message + '\n' + (err as any).id,
-		});
-	});
-}
-
-function cancel() {
-	emit('cancel');
-}
-
-function insertMention() {
-	os.selectUser().then(user => {
-		insertTextAtCursor(textareaEl, '@' + Acct.toString(user) + ' ');
-	});
-}
-
-async function insertEmoji(ev: MouseEvent) {
-	os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, textareaEl);
-}
-
-function showActions(ev) {
-	os.popupMenu(postFormActions.map(action => ({
-		text: action.title,
-		action: () => {
-			action.handler({
-				text: text,
-			}, (key, value) => {
-				if (key === 'text') { text = value; }
-			});
-		},
-	})), ev.currentTarget ?? ev.target);
-}
-
-let postAccount = $ref<misskey.entities.UserDetailed | null>(null);
-
-function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_({
-		withExtraOperation: false,
-		includeCurrentAccount: true,
-		active: postAccount != null ? postAccount.id : $i.id,
-		onChoose: (account) => {
-			if (account.id === $i.id) {
-				postAccount = null;
-			} else {
-				postAccount = account;
-			}
-		},
-	}, ev);
-}
-
-onMounted(() => {
-	if (props.autofocus) {
-		focus();
-
-		nextTick(() => {
-			focus();
-		});
-	}
-
-	// TODO: detach when unmount
-	new Autocomplete(textareaEl, $$(text));
-	new Autocomplete(cwInputEl, $$(cw));
-	new Autocomplete(hashtagsInputEl, $$(hashtags));
-
-	nextTick(() => {
-		// 書きかけの投稿を復元
-		if (!props.instant && !props.mention && !props.specified) {
-			const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[draftKey];
-			if (draft) {
-				text = draft.data.text;
-				useCw = draft.data.useCw;
-				cw = draft.data.cw;
-				visibility = draft.data.visibility;
-				localOnly = draft.data.localOnly;
-				files = (draft.data.files || []).filter(draftFile => draftFile);
-				if (draft.data.poll) {
-					poll = draft.data.poll;
-				}
-			}
-		}
-
-		// 削除して編集
-		if (props.initialNote) {
-			const init = props.initialNote;
-			text = init.text ? init.text : '';
-			files = init.files;
-			cw = init.cw;
-			useCw = init.cw != null;
-			if (init.poll) {
-				poll = {
-					choices: init.poll.choices.map(x => x.text),
-					multiple: init.poll.multiple,
-					expiresAt: init.poll.expiresAt,
-					expiredAfter: init.poll.expiredAfter,
-				};
-			}
-			visibility = init.visibility;
-			localOnly = init.localOnly;
-			quoteId = init.renote ? init.renote.id : null;
-		}
-
-		nextTick(() => watchForDraft());
-	});
-});
-</script>
-
-<style lang="scss" scoped>
-.gafaadew {
-	position: relative;
-
-	&.modal {
-		width: 100%;
-		max-width: 520px;
-	}
-
-	> header {
-		z-index: 1000;
-		height: 66px;
-
-		> .cancel {
-			padding: 0;
-			font-size: 1em;
-			width: 64px;
-			line-height: 66px;
-		}
-
-		> .account {
-			height: 100%;
-			aspect-ratio: 1/1;
-			display: inline-flex;
-			vertical-align: bottom;
-
-			> .avatar {
-				width: 28px;
-				height: 28px;
-				margin: auto;
-			}
-		}
-
-		> .right {
-			position: absolute;
-			top: 0;
-			right: 0;
-
-			> .text-count {
-				opacity: 0.7;
-				line-height: 66px;
-			}
-
-			> .visibility {
-				height: 34px;
-				width: 34px;
-				margin: 0 0 0 8px;
-
-				& + .localOnly {
-					margin-left: 0 !important;
-				}
-			}
-			
-			> .local-only {
-				margin: 0 0 0 12px;
-				opacity: 0.7;
-			}
-
-			> .preview {
-				display: inline-block;
-				padding: 0;
-				margin: 0 8px 0 0;
-				font-size: 16px;
-				width: 34px;
-				height: 34px;
-				border-radius: 6px;
-
-				&:hover {
-					background: var(--X5);
-				}
-
-				&.active {
-					color: var(--accent);
-				}
-			}
-
-			> .submit {
-				margin: 16px 16px 16px 0;
-				padding: 0 12px;
-				line-height: 34px;
-				font-weight: bold;
-				vertical-align: bottom;
-				border-radius: 4px;
-				font-size: 0.9em;
-
-				&:disabled {
-					opacity: 0.7;
-				}
-
-				> i {
-					margin-left: 6px;
-				}
-			}
-		}
-	}
-
-	> .form {
-		> .preview {
-			padding: 16px;
-		}
-
-		> .with-quote {
-			margin: 0 0 8px 0;
-			color: var(--accent);
-
-			> button {
-				padding: 4px 8px;
-				color: var(--accentAlpha04);
-
-				&:hover {
-					color: var(--accentAlpha06);
-				}
-
-				&:active {
-					color: var(--accentDarken30);
-				}
-			}
-		}
-
-		> .to-specified {
-			padding: 6px 24px;
-			margin-bottom: 8px;
-			overflow: auto;
-			white-space: nowrap;
-
-			> .visibleUsers {
-				display: inline;
-				top: -1px;
-				font-size: 14px;
-
-				> button {
-					padding: 4px;
-					border-radius: 8px;
-				}
-
-				> span {
-					margin-right: 14px;
-					padding: 8px 0 8px 8px;
-					border-radius: 8px;
-					background: var(--X4);
-
-					> button {
-						padding: 4px 8px;
-					}
-				}
-			}
-		}
-
-		> .hasNotSpecifiedMentions {
-			margin: 0 20px 16px 20px;
-		}
-
-		> .cw,
-		> .hashtags,
-		> .text {
-			display: block;
-			box-sizing: border-box;
-			padding: 0 24px;
-			margin: 0;
-			width: 100%;
-			font-size: 16px;
-			border: none;
-			border-radius: 0;
-			background: transparent;
-			color: var(--fg);
-			font-family: inherit;
-
-			&:focus {
-				outline: none;
-			}
-
-			&:disabled {
-				opacity: 0.5;
-			}
-		}
-
-		> .cw {
-			z-index: 1;
-			padding-bottom: 8px;
-			border-bottom: solid 0.5px var(--divider);
-		}
-
-		> .hashtags {
-			z-index: 1;
-			padding-top: 8px;
-			padding-bottom: 8px;
-			border-top: solid 0.5px var(--divider);
-		}
-
-		> .text {
-			max-width: 100%;
-			min-width: 100%;
-			min-height: 90px;
-
-			&.withCw {
-				padding-top: 8px;
-			}
-		}
-
-		> footer {
-			padding: 0 16px 16px 16px;
-
-			> button {
-				display: inline-block;
-				padding: 0;
-				margin: 0;
-				font-size: 1em;
-				width: 46px;
-				height: 46px;
-				border-radius: 6px;
-
-				&:hover {
-					background: var(--X5);
-				}
-
-				&.active {
-					color: var(--accent);
-				}
-			}
-		}
-	}
-
-	&.max-width_500px {
-		> header {
-			height: 50px;
-
-			> .cancel {
-				width: 50px;
-				line-height: 50px;
-			}
-
-			> .right {
-				> .text-count {
-					line-height: 50px;
-				}
-
-				> .submit {
-					margin: 8px;
-				}
-			}
-		}
-
-		> .form {
-			> .to-specified {
-				padding: 6px 16px;
-			}
-
-			> .cw,
-			> .hashtags,
-			> .text {
-				padding: 0 16px;
-			}
-
-			> .text {
-				min-height: 80px;
-			}
-
-			> footer {
-				padding: 0 8px 8px 8px;
-			}
-		}
-	}
-
-	&.max-width_310px {
-		> .form {
-			> footer {
-				> button {
-					font-size: 14px;
-					width: 44px;
-				height: 44px;
-				}
-			}
-		}
-	}
-}
-
-@container (max-width: 500px) {
-	.gafaadew {
-		> header {
-			height: 50px;
-
-			> .cancel {
-				width: 50px;
-				line-height: 50px;
-			}
-
-			> .right {
-				> .text-count {
-					line-height: 50px;
-				}
-
-				> .submit {
-					margin: 8px;
-				}
-			}
-		}
-
-		> .form {
-			> .to-specified {
-				padding: 6px 16px;
-			}
-
-			> .cw,
-			> .hashtags,
-			> .text {
-				padding: 0 16px;
-			}
-
-			> .text {
-				min-height: 80px;
-			}
-
-			> footer {
-				padding: 0 8px 8px 8px;
-			}
-		}
-	}
-}
-
-@container (max-width: 310px) {
-	.gafaadew {
-		> .form {
-			> footer {
-				> button {
-					font-size: 14px;
-					width: 44px;
-					height: 44px;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkPostFormAttaches.vue b/packages/client/src/components/MkPostFormAttaches.vue
deleted file mode 100644
index 766cc9a06c..0000000000
--- a/packages/client/src/components/MkPostFormAttaches.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<template>
-<div v-show="props.modelValue.length != 0" class="skeikyzd">
-	<Sortable :model-value="props.modelValue" class="files" item-key="id" :animation="150" :delay="100" :delay-on-touch-only="true" @update:model-value="v => emit('update:modelValue', v)">
-		<template #item="{element}">
-			<div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
-				<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
-				<div v-if="element.isSensitive" class="sensitive">
-					<i class="ti ti-alert-triangle icon"></i>
-				</div>
-			</div>
-		</template>
-	</Sortable>
-	<p class="remain">{{ 16 - props.modelValue.length }}/16</p>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, watch } from 'vue';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import * as os from '@/os';
-import { deepClone } from '@/scripts/clone';
-import { i18n } from '@/i18n';
-
-const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
-
-const props = defineProps<{
-	modelValue: any[];
-	detachMediaFn: () => void;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'update:modelValue', value: any[]): void;
-	(ev: 'detach'): void;
-	(ev: 'changeSensitive'): void;
-	(ev: 'changeName'): void;
-}>();
-
-let menuShowing = false;
-
-function detachMedia(id) {
-	if (props.detachMediaFn) {
-		props.detachMediaFn(id);
-	} else {
-		emit('detach', id);
-	}
-}
-
-function toggleSensitive(file) {
-	os.api('drive/files/update', {
-		fileId: file.id,
-		isSensitive: !file.isSensitive,
-	}).then(() => {
-		emit('changeSensitive', file, !file.isSensitive);
-	});
-}
-async function rename(file) {
-	const { canceled, result } = await os.inputText({
-		title: i18n.ts.enterFileName,
-		default: file.name,
-		allowEmpty: false,
-	});
-	if (canceled) return;
-	os.api('drive/files/update', {
-		fileId: file.id,
-		name: result,
-	}).then(() => {
-		emit('changeName', file, result);
-		file.name = result;
-	});
-}
-
-async function describe(file) {
-	os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
-		default: file.comment !== null ? file.comment : '',
-		file: file,
-	}, {
-		done: caption => {
-			let comment = caption.length === 0 ? null : caption;
-			os.api('drive/files/update', {
-				fileId: file.id,
-				comment: comment,
-			}).then(() => {
-				file.comment = comment;
-			});
-		},
-	}, 'closed');
-}
-
-function showFileMenu(file, ev: MouseEvent) {
-	if (menuShowing) return;
-	os.popupMenu([{
-		text: i18n.ts.renameFile,
-		icon: 'ti ti-forms',
-		action: () => { rename(file); },
-	}, {
-		text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
-		icon: file.isSensitive ? 'ti ti-eye-off' : 'ti ti-eye',
-		action: () => { toggleSensitive(file); },
-	}, {
-		text: i18n.ts.describeFile,
-		icon: 'ti ti-text-caption',
-		action: () => { describe(file); },
-	}, {
-		text: i18n.ts.attachCancel,
-		icon: 'ti ti-circle-x',
-		action: () => { detachMedia(file.id); },
-	}], ev.currentTarget ?? ev.target).then(() => menuShowing = false);
-	menuShowing = true;
-}
-</script>
-
-<style lang="scss" scoped>
-.skeikyzd {
-	padding: 8px 16px;
-	position: relative;
-
-	> .files {
-		display: flex;
-		flex-wrap: wrap;
-
-		> .file {
-			position: relative;
-			width: 64px;
-			height: 64px;
-			margin-right: 4px;
-			border-radius: 4px;
-			overflow: hidden;
-			cursor: move;
-
-			&:hover > .remove {
-				display: block;
-			}
-
-			> .thumbnail {
-				width: 100%;
-				height: 100%;
-				z-index: 1;
-				color: var(--fg);
-			}
-
-			> .sensitive {
-				display: flex;
-				position: absolute;
-				width: 64px;
-				height: 64px;
-				top: 0;
-				left: 0;
-				z-index: 2;
-				background: rgba(17, 17, 17, .7);
-				color: #fff;
-
-				> .icon {
-					margin: auto;
-				}
-			}
-		}
-	}
-
-	> .remain {
-		display: block;
-		position: absolute;
-		top: 8px;
-		right: 8px;
-		margin: 0;
-		padding: 0;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkPostFormDialog.vue b/packages/client/src/components/MkPostFormDialog.vue
deleted file mode 100644
index 6dabb1db14..0000000000
--- a/packages/client/src/components/MkPostFormDialog.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-<MkModal ref="modal" :prefer-type="'dialog:top'" @click="$refs.modal.close()" @closed="$emit('closed')">
-	<MkPostForm v-bind="$attrs" @posted="$refs.modal.close()" @cancel="$refs.modal.close()" @esc="$refs.modal.close()"/>
-</MkModal>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import MkPostForm from '@/components/MkPostForm.vue';
-
-export default defineComponent({
-	components: {
-		MkModal,
-		MkPostForm,
-	},
-	emits: ['closed'],
-});
-</script>
diff --git a/packages/client/src/components/MkPushNotificationAllowButton.vue b/packages/client/src/components/MkPushNotificationAllowButton.vue
deleted file mode 100644
index b356fd3b89..0000000000
--- a/packages/client/src/components/MkPushNotificationAllowButton.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<template>
-<MkButton
-	v-if="supported && !pushRegistrationInServer"
-	type="button"
-	primary
-	:gradate="gradate"
-	:rounded="rounded"
-	:inline="inline"
-	:autofocus="autofocus"
-	:wait="wait"
-	:full="full"
-	@click="subscribe"
->
-	{{ i18n.ts.subscribePushNotification }}
-</MkButton>
-<MkButton
-	v-else-if="!showOnlyToRegister && ($i ? pushRegistrationInServer : pushSubscription)"
-	type="button"
-	:primary="false"
-	:gradate="gradate"
-	:rounded="rounded"
-	:inline="inline"
-	:autofocus="autofocus"
-	:wait="wait"
-	:full="full"
-	@click="unsubscribe"
->
-	{{ i18n.ts.unsubscribePushNotification }}
-</MkButton>
-<MkButton v-else-if="$i && pushRegistrationInServer" disabled :rounded="rounded" :inline="inline" :wait="wait" :full="full">
-	{{ i18n.ts.pushNotificationAlreadySubscribed }}
-</MkButton>
-<MkButton v-else-if="!supported" disabled :rounded="rounded" :inline="inline" :wait="wait" :full="full">
-	{{ i18n.ts.pushNotificationNotSupported }}
-</MkButton>
-</template>
-
-<script setup lang="ts">
-import { $i, getAccounts } from '@/account';
-import MkButton from '@/components/MkButton.vue';
-import { instance } from '@/instance';
-import { api, apiWithDialog, promiseDialog } from '@/os';
-import { i18n } from '@/i18n';
-
-defineProps<{
-	primary?: boolean;
-	gradate?: boolean;
-	rounded?: boolean;
-	inline?: boolean;
-	link?: boolean;
-	to?: string;
-	autofocus?: boolean;
-	wait?: boolean;
-	danger?: boolean;
-	full?: boolean;
-	showOnlyToRegister?: boolean;
-}>();
-
-// ServiceWorker registration
-let registration = $ref<ServiceWorkerRegistration | undefined>();
-// If this browser supports push notification
-let supported = $ref(false);
-// If this browser has already subscribed to push notification
-let pushSubscription = $ref<PushSubscription | null>(null);
-let pushRegistrationInServer = $ref<{ state?: string; key?: string; userId: string; endpoint: string; sendReadMessage: boolean; } | undefined>();
-
-function subscribe() {
-	if (!registration || !supported || !instance.swPublickey) return;
-
-	// SEE: https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe#Parameters
-	return promiseDialog(registration.pushManager.subscribe({
-		userVisibleOnly: true,
-		applicationServerKey: urlBase64ToUint8Array(instance.swPublickey),
-	})
-	.then(async subscription => {
-		pushSubscription = subscription;
-
-		// Register
-		pushRegistrationInServer = await api('sw/register', {
-			endpoint: subscription.endpoint,
-			auth: encode(subscription.getKey('auth')),
-			publickey: encode(subscription.getKey('p256dh')),
-		});
-	}, async err => { // When subscribe failed
-		// 通知が許可されていなかったとき
-		if (err?.name === 'NotAllowedError') {
-			console.info('User denied the notification permission request.');
-			return;
-		}
-
-		// 違うapplicationServerKey (または gcm_sender_id)のサブスクリプションが
-		// 既に存在していることが原因でエラーになった可能性があるので、
-		// そのサブスクリプションを解除しておく
-		// （これは実行されなさそうだけど、おまじない的に古い実装から残してある）
-		await unsubscribe();
-	}), null, null);
-}
-
-async function unsubscribe() {
-	if (!pushSubscription) return;
-
-	const endpoint = pushSubscription.endpoint;
-	const accounts = await getAccounts();
-
-	pushRegistrationInServer = undefined;
-
-	if ($i && accounts.length >= 2) {
-		apiWithDialog('sw/unregister', {
-			i: $i.token,
-			endpoint,
-		});
-	} else {
-		pushSubscription.unsubscribe();
-		apiWithDialog('sw/unregister', {
-			endpoint,
-		});
-		pushSubscription = null;
-	}
-}
-
-function encode(buffer: ArrayBuffer | null) {
-	return btoa(String.fromCharCode.apply(null, new Uint8Array(buffer)));
-}
-
-/**
- * Convert the URL safe base64 string to a Uint8Array
- * @param base64String base64 string
- */
- function urlBase64ToUint8Array(base64String: string): Uint8Array {
-	const padding = '='.repeat((4 - base64String.length % 4) % 4);
-	const base64 = (base64String + padding)
-		.replace(/-/g, '+')
-		.replace(/_/g, '/');
-
-	const rawData = window.atob(base64);
-	const outputArray = new Uint8Array(rawData.length);
-
-	for (let i = 0; i < rawData.length; ++i) {
-		outputArray[i] = rawData.charCodeAt(i);
-	}
-	return outputArray;
-}
-
-navigator.serviceWorker.ready.then(async swr => {
-	registration = swr;
-
-	pushSubscription = await registration.pushManager.getSubscription();
-
-	if (instance.swPublickey && ('PushManager' in window) && $i && $i.token) {
-		supported = true;
-
-		if (pushSubscription) {
-			const res = await api('sw/show-registration', {
-				endpoint: pushSubscription.endpoint,
-			});
-
-			if (res) {
-				pushRegistrationInServer = res;
-			}
-		}
-	}
-});
-
-defineExpose({
-	pushRegistrationInServer: $$(pushRegistrationInServer),
-});
-</script>
diff --git a/packages/client/src/components/MkReactionIcon.vue b/packages/client/src/components/MkReactionIcon.vue
deleted file mode 100644
index 5638c9a816..0000000000
--- a/packages/client/src/components/MkReactionIcon.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-<MkEmoji :emoji="reaction" :custom-emojis="customEmojis || []" :is-reaction="true" :normal="true" :no-style="noStyle"/>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-
-const props = defineProps<{
-	reaction: string;
-	customEmojis?: any[]; // TODO
-	noStyle?: boolean;
-}>();
-</script>
diff --git a/packages/client/src/components/MkReactionTooltip.vue b/packages/client/src/components/MkReactionTooltip.vue
deleted file mode 100644
index 310d5954fc..0000000000
--- a/packages/client/src/components/MkReactionTooltip.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-<MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
-	<div class="beeadbfb">
-		<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
-		<div class="name">{{ reaction.replace('@.', '') }}</div>
-	</div>
-</MkTooltip>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkTooltip from './MkTooltip.vue';
-import XReactionIcon from '@/components/MkReactionIcon.vue';
-
-defineProps<{
-	showing: boolean;
-	reaction: string;
-	emojis: any[]; // TODO
-	targetElement: HTMLElement;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-</script>
-
-<style lang="scss" scoped>
-.beeadbfb {
-	text-align: center;
-
-	> .icon {
-		display: block;
-		width: 60px;
-		font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
-		margin: 0 auto;
-		object-fit: contain;
-	}
-
-	> .name {
-		font-size: 0.9em;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkReactionsViewer.details.vue b/packages/client/src/components/MkReactionsViewer.details.vue
deleted file mode 100644
index 29902a5075..0000000000
--- a/packages/client/src/components/MkReactionsViewer.details.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-<MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
-	<div class="bqxuuuey">
-		<div class="reaction">
-			<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
-			<div class="name">{{ getReactionName(reaction) }}</div>
-		</div>
-		<div class="users">
-			<div v-for="u in users" :key="u.id" class="user">
-				<MkAvatar class="avatar" :user="u"/>
-				<MkUserName class="name" :user="u" :nowrap="true"/>
-			</div>
-			<div v-if="users.length > 10" class="omitted">+{{ count - 10 }}</div>
-		</div>
-	</div>
-</MkTooltip>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkTooltip from './MkTooltip.vue';
-import XReactionIcon from '@/components/MkReactionIcon.vue';
-import { getEmojiName } from '@/scripts/emojilist';
-
-defineProps<{
-	showing: boolean;
-	reaction: string;
-	users: any[]; // TODO
-	count: number;
-	emojis: any[]; // TODO
-	targetElement: HTMLElement;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-
-function getReactionName(reaction: string): string {
-	const trimLocal = reaction.replace('@.', '');
-	if (trimLocal.startsWith(':')) {
-		return trimLocal;
-	}
-	return getEmojiName(reaction) ?? reaction;
-}
-</script>
-
-<style lang="scss" scoped>
-.bqxuuuey {
-	display: flex;
-
-	> .reaction {
-		max-width: 100px;
-		text-align: center;
-
-		> .icon {
-			display: block;
-			width: 60px;
-			font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
-			object-fit: contain;
-			margin: 0 auto;
-		}
-
-		> .name {
-			font-size: 1em;
-		}
-	}
-
-	> .users {
-		flex: 1;
-		min-width: 0;
-		font-size: 0.95em;
-		border-left: solid 0.5px var(--divider);
-		padding-left: 10px;
-		margin-left: 10px;
-		margin-right: 14px;
-		text-align: left;
-
-		> .user {
-			line-height: 24px;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-
-			&:not(:last-child) {
-				margin-bottom: 3px;
-			}
-
-			> .avatar {
-				width: 24px;
-				height: 24px;
-				margin-right: 3px;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
deleted file mode 100644
index 31342b0b48..0000000000
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-<button
-	v-if="count > 0"
-	ref="buttonRef"
-	v-ripple="canToggle"
-	class="hkzvhatu _button"
-	:class="{ reacted: note.myReaction == reaction, canToggle }"
-	@click="toggleReaction()"
->
-	<XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis"/>
-	<span class="count">{{ count }}</span>
-</button>
-</template>
-
-<script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
-import * as misskey from 'misskey-js';
-import XDetails from '@/components/MkReactionsViewer.details.vue';
-import XReactionIcon from '@/components/MkReactionIcon.vue';
-import * as os from '@/os';
-import { useTooltip } from '@/scripts/use-tooltip';
-import { $i } from '@/account';
-
-const props = defineProps<{
-	reaction: string;
-	count: number;
-	isInitial: boolean;
-	note: misskey.entities.Note;
-}>();
-
-const buttonRef = ref<HTMLElement>();
-
-const canToggle = computed(() => !props.reaction.match(/@\w/) && $i);
-
-const toggleReaction = () => {
-	if (!canToggle.value) return;
-
-	const oldReaction = props.note.myReaction;
-	if (oldReaction) {
-		os.api('notes/reactions/delete', {
-			noteId: props.note.id,
-		}).then(() => {
-			if (oldReaction !== props.reaction) {
-				os.api('notes/reactions/create', {
-					noteId: props.note.id,
-					reaction: props.reaction,
-				});
-			}
-		});
-	} else {
-		os.api('notes/reactions/create', {
-			noteId: props.note.id,
-			reaction: props.reaction,
-		});
-	}
-};
-
-const anime = () => {
-	if (document.hidden) return;
-
-	// TODO: 新しくリアクションが付いたことが視覚的に分かりやすいアニメーション
-};
-
-watch(() => props.count, (newCount, oldCount) => {
-	if (oldCount < newCount) anime();
-});
-
-onMounted(() => {
-	if (!props.isInitial) anime();
-});
-
-useTooltip(buttonRef, async (showing) => {
-	const reactions = await os.apiGet('notes/reactions', {
-		noteId: props.note.id,
-		type: props.reaction,
-		limit: 11,
-		_cacheKey_: props.count,
-	});
-
-	const users = reactions.map(x => x.user);
-
-	os.popup(XDetails, {
-		showing,
-		reaction: props.reaction,
-		emojis: props.note.emojis,
-		users,
-		count: props.count,
-		targetElement: buttonRef.value,
-	}, {}, 'closed');
-}, 100);
-</script>
-
-<style lang="scss" scoped>
-.hkzvhatu {
-	display: inline-block;
-	height: 32px;
-	margin: 2px;
-	padding: 0 6px;
-	border-radius: 4px;
-
-	&.canToggle {
-		background: rgba(0, 0, 0, 0.05);
-
-		&:hover {
-			background: rgba(0, 0, 0, 0.1);
-		}
-	}
-
-	&:not(.canToggle) {
-		cursor: default;
-	}
-
-	&.reacted {
-		background: var(--accent);
-
-		&:hover {
-			background: var(--accent);
-		}
-
-		> .count {
-			color: var(--fgOnAccent);
-		}
-
-		> .icon {
-			filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
-		}
-	}
-
-	> .count {
-		font-size: 0.9em;
-		line-height: 32px;
-		margin: 0 0 0 4px;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkReactionsViewer.vue b/packages/client/src/components/MkReactionsViewer.vue
deleted file mode 100644
index a88311efa1..0000000000
--- a/packages/client/src/components/MkReactionsViewer.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-<div class="tdflqwzn" :class="{ isMe }">
-	<XReaction v-for="(count, reaction) in note.reactions" :key="reaction" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note"/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'misskey-js';
-import { $i } from '@/account';
-import XReaction from '@/components/MkReactionsViewer.reaction.vue';
-
-const props = defineProps<{
-	note: misskey.entities.Note;
-}>();
-
-const initialReactions = new Set(Object.keys(props.note.reactions));
-
-const isMe = computed(() => $i && $i.id === props.note.userId);
-</script>
-
-<style lang="scss" scoped>
-.tdflqwzn {
-	margin: 4px -2px 0 -2px;
-
-	&:empty {
-		display: none;
-	}
-
-	&.isMe {
-		> span {
-			cursor: default !important;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkRemoteCaution.vue b/packages/client/src/components/MkRemoteCaution.vue
deleted file mode 100644
index d5dc01c1f8..0000000000
--- a/packages/client/src/components/MkRemoteCaution.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-<div class="jmgmzlwq _block"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i>{{ i18n.ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div>
-</template>
-
-<script lang="ts" setup>
-import { i18n } from '@/i18n';
-
-defineProps<{
-	href: string;
-}>();
-</script>
-
-<style lang="scss" scoped>
-.jmgmzlwq {
-	font-size: 0.8em;
-	padding: 16px;
-	background: var(--infoWarnBg);
-	color: var(--infoWarnFg);
-
-	> .link {
-		margin-left: 4px;
-		color: var(--accent);
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
deleted file mode 100644
index e0b1eaafc9..0000000000
--- a/packages/client/src/components/MkRenoteButton.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-<button
-	v-if="canRenote"
-	ref="buttonRef"
-	class="eddddedb _button canRenote"
-	@click="renote()"
->
-	<i class="ti ti-repeat"></i>
-	<p v-if="count > 0" class="count">{{ count }}</p>
-</button>
-<button v-else class="eddddedb _button">
-	<i class="ti ti-ban"></i>
-</button>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-import * as misskey from 'misskey-js';
-import XDetails from '@/components/MkUsersTooltip.vue';
-import { pleaseLogin } from '@/scripts/please-login';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { useTooltip } from '@/scripts/use-tooltip';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	note: misskey.entities.Note;
-	count: number;
-}>();
-
-const buttonRef = ref<HTMLElement>();
-
-const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i.id);
-
-useTooltip(buttonRef, async (showing) => {
-	const renotes = await os.api('notes/renotes', {
-		noteId: props.note.id,
-		limit: 11,
-	});
-
-	const users = renotes.map(x => x.user);
-
-	if (users.length < 1) return;
-
-	os.popup(XDetails, {
-		showing,
-		users,
-		count: props.count,
-		targetElement: buttonRef.value,
-	}, {}, 'closed');
-});
-
-const renote = (viaKeyboard = false) => {
-	pleaseLogin();
-	os.popupMenu([{
-		text: i18n.ts.renote,
-		icon: 'ti ti-repeat',
-		action: () => {
-			os.api('notes/create', {
-				renoteId: props.note.id,
-			});
-		},
-	}, {
-		text: i18n.ts.quote,
-		icon: 'ti ti-quote',
-		action: () => {
-			os.post({
-				renote: props.note,
-			});
-		},
-	}], buttonRef.value, {
-		viaKeyboard,
-	});
-};
-</script>
-
-<style lang="scss" scoped>
-.eddddedb {
-	display: inline-block;
-	height: 32px;
-	margin: 2px;
-	padding: 0 6px;
-	border-radius: 4px;
-
-	&:not(.canRenote) {
-		cursor: default;
-	}
-
-	&.renoted {
-		background: var(--accent);
-	}
-
-	> .count {
-		display: inline;
-		margin-left: 8px;
-		opacity: 0.7;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkRipple.vue b/packages/client/src/components/MkRipple.vue
deleted file mode 100644
index 9d93211d5f..0000000000
--- a/packages/client/src/components/MkRipple.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
-	<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
-		<circle fill="none" cx="64" cy="64">
-			<animate
-				attributeName="r"
-				begin="0s" dur="0.5s"
-				values="4; 32"
-				calcMode="spline"
-				keyTimes="0; 1"
-				keySplines="0.165, 0.84, 0.44, 1"
-				repeatCount="1"
-			/>
-			<animate
-				attributeName="stroke-width"
-				begin="0s" dur="0.5s"
-				values="16; 0"
-				calcMode="spline"
-				keyTimes="0; 1"
-				keySplines="0.3, 0.61, 0.355, 1"
-				repeatCount="1"
-			/>
-		</circle>
-		<g fill="none" fill-rule="evenodd">
-			<circle v-for="(particle, i) in particles" :key="i" :fill="particle.color">
-				<animate
-					attributeName="r"
-					begin="0s" dur="0.8s"
-					:values="`${particle.size}; 0`"
-					calcMode="spline"
-					keyTimes="0; 1"
-					keySplines="0.165, 0.84, 0.44, 1"
-					repeatCount="1"
-				/>
-				<animate
-					attributeName="cx"
-					begin="0s" dur="0.8s"
-					:values="`${particle.xA}; ${particle.xB}`"
-					calcMode="spline"
-					keyTimes="0; 1"
-					keySplines="0.3, 0.61, 0.355, 1"
-					repeatCount="1"
-				/>
-				<animate
-					attributeName="cy"
-					begin="0s" dur="0.8s"
-					:values="`${particle.yA}; ${particle.yB}`"
-					calcMode="spline"
-					keyTimes="0; 1"
-					keySplines="0.3, 0.61, 0.355, 1"
-					repeatCount="1"
-				/>
-			</circle>
-		</g>
-	</svg>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as os from '@/os';
-
-const props = withDefaults(defineProps<{
-	x: number;
-	y: number;
-	particle?: boolean;
-}>(), {
-	particle: true,
-});
-
-const emit = defineEmits<{
-	(ev: 'end'): void;
-}>();
-
-const particles = [];
-const origin = 64;
-const colors = ['#FF1493', '#00FFFF', '#FFE202'];
-const zIndex = os.claimZIndex('high');
-
-if (props.particle) {
-	for (let i = 0; i < 12; i++) {
-		const angle = Math.random() * (Math.PI * 2);
-		const pos = Math.random() * 16;
-		const velocity = 16 + (Math.random() * 48);
-		particles.push({
-			size: 4 + (Math.random() * 8),
-			xA: origin + (Math.sin(angle) * pos),
-			yA: origin + (Math.cos(angle) * pos),
-			xB: origin + (Math.sin(angle) * (pos + velocity)),
-			yB: origin + (Math.cos(angle) * (pos + velocity)),
-			color: colors[Math.floor(Math.random() * colors.length)],
-		});
-	}
-}
-
-onMounted(() => {
-	window.setTimeout(() => {
-		emit('end');
-	}, 1100);
-});
-</script>
-
-<style lang="scss" scoped>
-.vswabwbm {
-	pointer-events: none;
-	position: fixed;
-	width: 128px;
-	height: 128px;
-
-	> svg {
-		> circle {
-			stroke: var(--accent);
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkSample.vue b/packages/client/src/components/MkSample.vue
deleted file mode 100644
index 1d25ab54b5..0000000000
--- a/packages/client/src/components/MkSample.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-<div class="_card">
-	<div class="_content">
-		<MkInput v-model="text">
-			<template #label>Text</template>
-		</MkInput>
-		<MkSwitch v-model="flag">
-			<span>Switch is now {{ flag ? 'on' : 'off' }}</span>
-		</MkSwitch>
-		<div style="margin: 32px 0;">
-			<MkRadio v-model="radio" value="misskey">Misskey</MkRadio>
-			<MkRadio v-model="radio" value="mastodon">Mastodon</MkRadio>
-			<MkRadio v-model="radio" value="pleroma">Pleroma</MkRadio>
-		</div>
-		<MkButton inline>This is</MkButton>
-		<MkButton inline primary>the button</MkButton>
-	</div>
-	<div class="_content" style="pointer-events: none;">
-		<Mfm :text="mfm"/>
-	</div>
-	<div class="_content">
-		<MkButton inline primary @click="openMenu">Open menu</MkButton>
-		<MkButton inline primary @click="openDialog">Open dialog</MkButton>
-		<MkButton inline primary @click="openForm">Open form</MkButton>
-		<MkButton inline primary @click="openDrive">Open drive</MkButton>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkRadio from '@/components/form/radio.vue';
-import * as os from '@/os';
-import * as config from '@/config';
-
-export default defineComponent({
-	components: {
-		MkButton,
-		MkInput,
-		MkSwitch,
-		MkTextarea,
-		MkRadio,
-	},
-
-	data() {
-		return {
-			text: '',
-			flag: true,
-			radio: 'misskey',
-			mfm: `Hello world! This is an @example mention. BTW you are @${this.$i ? this.$i.username : 'guest'}.\nAlso, here is ${config.url} and [example link](${config.url}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`,
-		};
-	},
-
-	methods: {
-		async openDialog() {
-			os.alert({
-				type: 'warning',
-				title: 'Oh my Aichan',
-				text: 'Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-			});
-		},
-
-		async openForm() {
-			os.form('Example form', {
-				foo: {
-					type: 'boolean',
-					default: true,
-					label: 'This is a boolean property',
-				},
-				bar: {
-					type: 'number',
-					default: 300,
-					label: 'This is a number property',
-				},
-				baz: {
-					type: 'string',
-					default: 'Misskey makes you happy.',
-					label: 'This is a string property',
-				},
-			});
-		},
-
-		async openDrive() {
-			os.selectDriveFile();
-		},
-
-		async selectUser() {
-			os.selectUser();
-		},
-
-		async openMenu(ev) {
-			os.popupMenu([{
-				type: 'label',
-				text: 'Fruits',
-			}, {
-				text: 'Create some apples',
-				action: () => {},
-			}, {
-				text: 'Read some oranges',
-				action: () => {},
-			}, {
-				text: 'Update some melons',
-				action: () => {},
-			}, null, {
-				text: 'Delete some bananas',
-				danger: true,
-				action: () => {},
-			}], ev.currentTarget ?? ev.target);
-		},
-	},
-});
-</script>
diff --git a/packages/client/src/components/MkSignin.vue b/packages/client/src/components/MkSignin.vue
deleted file mode 100644
index 96f18f8d61..0000000000
--- a/packages/client/src/components/MkSignin.vue
+++ /dev/null
@@ -1,259 +0,0 @@
-<template>
-<form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
-	<div class="auth _section _formRoot">
-		<div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div>
-		<MkInfo v-if="message">
-			{{ message }}
-		</MkInfo>
-		<div v-if="!totpLogin" class="normal-signin">
-			<MkInput v-model="username" class="_formBlock" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required data-cy-signin-username @update:model-value="onUsernameChange">
-				<template #prefix>@</template>
-				<template #suffix>@{{ host }}</template>
-			</MkInput>
-			<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" class="_formBlock" :placeholder="i18n.ts.password" type="password" :with-password-toggle="true" required data-cy-signin-password>
-				<template #prefix><i class="ti ti-lock"></i></template>
-				<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
-			</MkInput>
-			<MkButton class="_formBlock" type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
-		</div>
-		<div v-if="totpLogin" class="2fa-signin" :class="{ securityKeys: user && user.securityKeys }">
-			<div v-if="user && user.securityKeys" class="twofa-group tap-group">
-				<p>{{ i18n.ts.tapSecurityKey }}</p>
-				<MkButton v-if="!queryingKey" @click="queryKey">
-					{{ i18n.ts.retry }}
-				</MkButton>
-			</div>
-			<div v-if="user && user.securityKeys" class="or-hr">
-				<p class="or-msg">{{ i18n.ts.or }}</p>
-			</div>
-			<div class="twofa-group totp-group">
-				<p style="margin-bottom:0;">{{ i18n.ts.twoStepAuthentication }}</p>
-				<MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" :with-password-toggle="true" required>
-					<template #label>{{ i18n.ts.password }}</template>
-					<template #prefix><i class="ti ti-lock"></i></template>
-				</MkInput>
-				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false" required>
-					<template #label>{{ i18n.ts.token }}</template>
-					<template #prefix><i class="ti ti-123"></i></template>
-				</MkInput>
-				<MkButton type="submit" :disabled="signing" primary style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
-			</div>
-		</div>
-	</div>
-	<div class="social _section">
-		<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/twitter`"><i class="ti ti-brand-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
-		<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/github`"><i class="ti ti-brand-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
-		<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/discord`"><i class="ti ti-brand-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>
-	</div>
-</form>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { toUnicode } from 'punycode/';
-import { showSuspendedDialog } from '../scripts/show-suspended-dialog';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import { apiUrl, host as configHost } from '@/config';
-import { byteify, hexify } from '@/scripts/2fa';
-import * as os from '@/os';
-import { login } from '@/account';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
-
-let signing = $ref(false);
-let user = $ref(null);
-let username = $ref('');
-let password = $ref('');
-let token = $ref('');
-let host = $ref(toUnicode(configHost));
-let totpLogin = $ref(false);
-let credential = $ref(null);
-let challengeData = $ref(null);
-let queryingKey = $ref(false);
-let hCaptchaResponse = $ref(null);
-let reCaptchaResponse = $ref(null);
-
-const meta = $computed(() => instance);
-
-const emit = defineEmits<{
-	(ev: 'login', v: any): void;
-}>();
-
-const props = defineProps({
-	withAvatar: {
-		type: Boolean,
-		required: false,
-		default: true,
-	},
-	autoSet: {
-		type: Boolean,
-		required: false,
-		default: false,
-	},
-	message: {
-		type: String,
-		required: false,
-		default: '',
-	},
-});
-
-function onUsernameChange() {
-	os.api('users/show', {
-		username: username,
-	}).then(userResponse => {
-		user = userResponse;
-	}, () => {
-		user = null;
-	});
-}
-
-function onLogin(res) {
-	if (props.autoSet) {
-		return login(res.i);
-	}
-}
-
-function queryKey() {
-	queryingKey = true;
-	return navigator.credentials.get({
-		publicKey: {
-			challenge: byteify(challengeData.challenge, 'base64'),
-			allowCredentials: challengeData.securityKeys.map(key => ({
-				id: byteify(key.id, 'hex'),
-				type: 'public-key',
-				transports: ['usb', 'nfc', 'ble', 'internal'],
-			})),
-			timeout: 60 * 1000,
-		},
-	}).catch(() => {
-		queryingKey = false;
-		return Promise.reject(null);
-	}).then(credential => {
-		queryingKey = false;
-		signing = true;
-		return os.api('signin', {
-			username,
-			password,
-			signature: hexify(credential.response.signature),
-			authenticatorData: hexify(credential.response.authenticatorData),
-			clientDataJSON: hexify(credential.response.clientDataJSON),
-			credentialId: credential.id,
-			challengeId: challengeData.challengeId,
-			'hcaptcha-response': hCaptchaResponse,
-			'g-recaptcha-response': reCaptchaResponse,
-		});
-	}).then(res => {
-		emit('login', res);
-		return onLogin(res);
-	}).catch(err => {
-		if (err === null) return;
-		os.alert({
-			type: 'error',
-			text: i18n.ts.signinFailed,
-		});
-		signing = false;
-	});
-}
-
-function onSubmit() {
-	signing = true;
-	console.log('submit');
-	if (!totpLogin && user && user.twoFactorEnabled) {
-		if (window.PublicKeyCredential && user.securityKeys) {
-			os.api('signin', {
-				username,
-				password,
-				'hcaptcha-response': hCaptchaResponse,
-				'g-recaptcha-response': reCaptchaResponse,
-			}).then(res => {
-				totpLogin = true;
-				signing = false;
-				challengeData = res;
-				return queryKey();
-			}).catch(loginFailed);
-		} else {
-			totpLogin = true;
-			signing = false;
-		}
-	} else {
-		os.api('signin', {
-			username,
-			password,
-			'hcaptcha-response': hCaptchaResponse,
-			'g-recaptcha-response': reCaptchaResponse,
-			token: user && user.twoFactorEnabled ? token : undefined,
-		}).then(res => {
-			emit('login', res);
-			onLogin(res);
-		}).catch(loginFailed);
-	}
-}
-
-function loginFailed(err) {
-	switch (err.id) {
-		case '6cc579cc-885d-43d8-95c2-b8c7fc963280': {
-			os.alert({
-				type: 'error',
-				title: i18n.ts.loginFailed,
-				text: i18n.ts.noSuchUser,
-			});
-			break;
-		}
-		case '932c904e-9460-45b7-9ce6-7ed33be7eb2c': {
-			os.alert({
-				type: 'error',
-				title: i18n.ts.loginFailed,
-				text: i18n.ts.incorrectPassword,
-			});
-			break;
-		}
-		case 'e03a5f46-d309-4865-9b69-56282d94e1eb': {
-			showSuspendedDialog();
-			break;
-		}
-		case '22d05606-fbcf-421a-a2db-b32610dcfd1b': {
-			os.alert({
-				type: 'error',
-				title: i18n.ts.loginFailed,
-				text: i18n.ts.rateLimitExceeded,
-			});
-			break;
-		}
-		default: {
-			console.log(err);
-			os.alert({
-				type: 'error',
-				title: i18n.ts.loginFailed,
-				text: JSON.stringify(err),
-			});
-		}
-	}
-
-	challengeData = null;
-	totpLogin = false;
-	signing = false;
-}
-
-function resetPassword() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {
-	}, 'closed');
-}
-</script>
-
-<style lang="scss" scoped>
-.eppvobhk {
-	> .auth {
-		> .avatar {
-			margin: 0 auto 0 auto;
-			width: 64px;
-			height: 64px;
-			background: #ddd;
-			background-position: center;
-			background-size: cover;
-			border-radius: 100%;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkSigninDialog.vue b/packages/client/src/components/MkSigninDialog.vue
deleted file mode 100644
index fd27244516..0000000000
--- a/packages/client/src/components/MkSigninDialog.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-<XModalWindow
-	ref="dialog"
-	:width="370"
-	:height="400"
-	@close="onClose"
-	@closed="emit('closed')"
->
-	<template #header>{{ i18n.ts.login }}</template>
-
-	<MkSignin :auto-set="autoSet" :message="message" @login="onLogin"/>
-</XModalWindow>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkSignin from '@/components/MkSignin.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import { i18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{
-	autoSet?: boolean;
-	message?: string,
-}>(), {
-	autoSet: false,
-	message: '',
-});
-
-const emit = defineEmits<{
-	(ev: 'done'): void;
-	(ev: 'closed'): void;
-	(ev: 'cancelled'): void;
-}>();
-
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
-
-function onClose() {
-	emit('cancelled');
-	dialog.close();
-}
-
-function onLogin(res) {
-	emit('done', res);
-	dialog.close();
-}
-</script>
diff --git a/packages/client/src/components/MkSignup.vue b/packages/client/src/components/MkSignup.vue
deleted file mode 100644
index d987425ca3..0000000000
--- a/packages/client/src/components/MkSignup.vue
+++ /dev/null
@@ -1,246 +0,0 @@
-<template>
-<form class="qlvuhzng _formRoot" autocomplete="new-password" @submit.prevent="onSubmit">
-	<MkInput v-if="instance.disableRegistration" v-model="invitationCode" class="_formBlock" type="text" :spellcheck="false" required>
-		<template #label>{{ i18n.ts.invitationCode }}</template>
-		<template #prefix><i class="ti ti-key"></i></template>
-	</MkInput>
-	<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:model-value="onChangeUsername">
-		<template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="ti ti-question-circle"></i></div></template>
-		<template #prefix>@</template>
-		<template #suffix>@{{ host }}</template>
-		<template #caption>
-			<span v-if="usernameState === 'wait'" style="color:#999"><MkLoading :em="true"/> {{ i18n.ts.checking }}</span>
-			<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.available }}</span>
-			<span v-else-if="usernameState === 'unavailable'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.unavailable }}</span>
-			<span v-else-if="usernameState === 'error'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.error }}</span>
-			<span v-else-if="usernameState === 'invalid-format'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.usernameInvalidFormat }}</span>
-			<span v-else-if="usernameState === 'min-range'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.tooShort }}</span>
-			<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.tooLong }}</span>
-		</template>
-	</MkInput>
-	<MkInput v-if="instance.emailRequiredForSignup" v-model="email" class="_formBlock" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:model-value="onChangeEmail">
-		<template #label>{{ i18n.ts.emailAddress }} <div v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" class="_button _help"><i class="ti ti-question-circle"></i></div></template>
-		<template #prefix><i class="ti ti-mail"></i></template>
-		<template #caption>
-			<span v-if="emailState === 'wait'" style="color:#999"><MkLoading :em="true"/> {{ i18n.ts.checking }}</span>
-			<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.available }}</span>
-			<span v-else-if="emailState === 'unavailable:used'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.used }}</span>
-			<span v-else-if="emailState === 'unavailable:format'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.format }}</span>
-			<span v-else-if="emailState === 'unavailable:disposable'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.disposable }}</span>
-			<span v-else-if="emailState === 'unavailable:mx'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.mx }}</span>
-			<span v-else-if="emailState === 'unavailable:smtp'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.smtp }}</span>
-			<span v-else-if="emailState === 'unavailable'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.unavailable }}</span>
-			<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.error }}</span>
-		</template>
-	</MkInput>
-	<MkInput v-model="password" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password @update:model-value="onChangePassword">
-		<template #label>{{ i18n.ts.password }}</template>
-		<template #prefix><i class="ti ti-lock"></i></template>
-		<template #caption>
-			<span v-if="passwordStrength == 'low'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.weakPassword }}</span>
-			<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.normalPassword }}</span>
-			<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.strongPassword }}</span>
-		</template>
-	</MkInput>
-	<MkInput v-model="retypedPassword" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:model-value="onChangePasswordRetype">
-		<template #label>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template>
-		<template #prefix><i class="ti ti-lock"></i></template>
-		<template #caption>
-			<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.passwordMatched }}</span>
-			<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.passwordNotMatched }}</span>
-		</template>
-	</MkInput>
-	<MkSwitch v-if="instance.tosUrl" v-model="ToSAgreement" class="_formBlock tou">
-		<I18n :src="i18n.ts.agreeTo">
-			<template #0>
-				<a :href="instance.tosUrl" class="_link" target="_blank">{{ i18n.ts.tos }}</a>
-			</template>
-		</I18n>
-	</MkSwitch>
-	<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
-	<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
-	<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" class="_formBlock captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
-	<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ i18n.ts.start }}</MkButton>
-</form>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import getPasswordStrength from 'syuilo-password-strength';
-import { toUnicode } from 'punycode/';
-import MkButton from './MkButton.vue';
-import MkInput from './form/input.vue';
-import MkSwitch from './form/switch.vue';
-import MkCaptcha from '@/components/MkCaptcha.vue';
-import * as config from '@/config';
-import * as os from '@/os';
-import { login } from '@/account';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{
-	autoSet?: boolean;
-}>(), {
-	autoSet: false,
-});
-
-const emit = defineEmits<{
-	(ev: 'signup', user: Record<string, any>): void;
-	(ev: 'signupEmailPending'): void;
-}>();
-
-const host = toUnicode(config.host);
-
-let hcaptcha = $ref();
-let recaptcha = $ref();
-let turnstile = $ref();
-
-let username: string = $ref('');
-let password: string = $ref('');
-let retypedPassword: string = $ref('');
-let invitationCode: string = $ref('');
-let email = $ref('');
-let usernameState: null | 'wait' | 'ok' | 'unavailable' | 'error' | 'invalid-format' | 'min-range' | 'max-range' = $ref(null);
-let emailState: null | 'wait' | 'ok' | 'unavailable:used' | 'unavailable:format' | 'unavailable:disposable' | 'unavailable:mx' | 'unavailable:smtp' | 'unavailable' | 'error' = $ref(null);
-let passwordStrength: '' | 'low' | 'medium' | 'high' = $ref('');
-let passwordRetypeState: null | 'match' | 'not-match' = $ref(null);
-let submitting: boolean = $ref(false);
-let ToSAgreement: boolean = $ref(false);
-let hCaptchaResponse = $ref(null);
-let reCaptchaResponse = $ref(null);
-let turnstileResponse = $ref(null);
-
-const shouldDisableSubmitting = $computed((): boolean => {
-	return submitting ||
-		instance.tosUrl && !ToSAgreement ||
-		instance.enableHcaptcha && !hCaptchaResponse ||
-		instance.enableRecaptcha && !reCaptchaResponse ||
-		instance.enableTurnstile && !turnstileResponse ||
-		passwordRetypeState === 'not-match';
-});
-
-function onChangeUsername(): void {
-	if (username === '') {
-		usernameState = null;
-		return;
-	}
-
-	{
-		const err =
-			!username.match(/^[a-zA-Z0-9_]+$/) ? 'invalid-format' :
-			username.length < 1 ? 'min-range' :
-			username.length > 20 ? 'max-range' :
-			null;
-
-		if (err) {
-			usernameState = err;
-			return;
-		}
-	}
-
-	usernameState = 'wait';
-
-	os.api('username/available', {
-		username,
-	}).then(result => {
-		usernameState = result.available ? 'ok' : 'unavailable';
-	}).catch(() => {
-		usernameState = 'error';
-	});
-}
-
-function onChangeEmail(): void {
-	if (email === '') {
-		emailState = null;
-		return;
-	}
-
-	emailState = 'wait';
-
-	os.api('email-address/available', {
-		emailAddress: email,
-	}).then(result => {
-		emailState = result.available ? 'ok' :
-			result.reason === 'used' ? 'unavailable:used' :
-			result.reason === 'format' ? 'unavailable:format' :
-			result.reason === 'disposable' ? 'unavailable:disposable' :
-			result.reason === 'mx' ? 'unavailable:mx' :
-			result.reason === 'smtp' ? 'unavailable:smtp' :
-			'unavailable';
-	}).catch(() => {
-		emailState = 'error';
-	});
-}
-
-function onChangePassword(): void {
-	if (password === '') {
-		passwordStrength = '';
-		return;
-	}
-
-	const strength = getPasswordStrength(password);
-	passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
-}
-
-function onChangePasswordRetype(): void {
-	if (retypedPassword === '') {
-		passwordRetypeState = null;
-		return;
-	}
-
-	passwordRetypeState = password === retypedPassword ? 'match' : 'not-match';
-}
-
-function onSubmit(): void {
-	if (submitting) return;
-	submitting = true;
-
-	os.api('signup', {
-		username,
-		password,
-		emailAddress: email,
-		invitationCode,
-		'hcaptcha-response': hCaptchaResponse,
-		'g-recaptcha-response': reCaptchaResponse,
-		'turnstile-response': turnstileResponse,
-	}).then(() => {
-		if (instance.emailRequiredForSignup) {
-			os.alert({
-				type: 'success',
-				title: i18n.ts._signup.almostThere,
-				text: i18n.t('_signup.emailSent', { email }),
-			});
-			emit('signupEmailPending');
-		} else {
-			os.api('signin', {
-				username,
-				password,
-			}).then(res => {
-				emit('signup', res);
-
-				if (props.autoSet) {
-					login(res.i);
-				}
-			});
-		}
-	}).catch(() => {
-		submitting = false;
-		hcaptcha.reset?.();
-		recaptcha.reset?.();
-		turnstile.reset?.();
-
-		os.alert({
-			type: 'error',
-			text: i18n.ts.somethingHappened,
-		});
-	});
-}
-</script>
-
-<style lang="scss" scoped>
-.qlvuhzng {
-	.captcha {
-		margin: 16px 0;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkSignupDialog.vue b/packages/client/src/components/MkSignupDialog.vue
deleted file mode 100644
index 77497021c3..0000000000
--- a/packages/client/src/components/MkSignupDialog.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-<XModalWindow
-	ref="dialog"
-	:width="366"
-	:height="500"
-	@close="dialog.close()"
-	@closed="$emit('closed')"
->
-	<template #header>{{ i18n.ts.signup }}</template>
-
-	<div class="_monolithic_">
-		<div class="_section">
-			<XSignup :auto-set="autoSet" @signup="onSignup" @signup-email-pending="onSignupEmailPending"/>
-		</div>
-	</div>
-</XModalWindow>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import XSignup from '@/components/MkSignup.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import { i18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{
-	autoSet?: boolean;
-}>(), {
-	autoSet: false,
-});
-
-const emit = defineEmits<{
-	(ev: 'done'): void;
-	(ev: 'closed'): void;
-}>();
-
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
-
-function onSignup(res) {
-	emit('done', res);
-	dialog.close();
-}
-
-function onSignupEmailPending() {
-	dialog.close();
-}
-</script>
diff --git a/packages/client/src/components/MkSparkle.vue b/packages/client/src/components/MkSparkle.vue
deleted file mode 100644
index cdeaf9c417..0000000000
--- a/packages/client/src/components/MkSparkle.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-<span class="mk-sparkle">
-	<span ref="el">
-		<slot></slot>
-	</span>
-	<!-- なぜか path に対する key が機能しないため
-	<svg :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg">
-		<path v-for="particle in particles" :key="particle.id" style="transform-origin: center; transform-box: fill-box;"
-			:transform="`translate(${particle.x} ${particle.y})`"
-			:fill="particle.color"
-			d="M29.427,2.011C29.721,0.83 30.782,0 32,0C33.218,0 34.279,0.83 34.573,2.011L39.455,21.646C39.629,22.347 39.991,22.987 40.502,23.498C41.013,24.009 41.653,24.371 42.354,24.545L61.989,29.427C63.17,29.721 64,30.782 64,32C64,33.218 63.17,34.279 61.989,34.573L42.354,39.455C41.653,39.629 41.013,39.991 40.502,40.502C39.991,41.013 39.629,41.653 39.455,42.354L34.573,61.989C34.279,63.17 33.218,64 32,64C30.782,64 29.721,63.17 29.427,61.989L24.545,42.354C24.371,41.653 24.009,41.013 23.498,40.502C22.987,39.991 22.347,39.629 21.646,39.455L2.011,34.573C0.83,34.279 0,33.218 0,32C0,30.782 0.83,29.721 2.011,29.427L21.646,24.545C22.347,24.371 22.987,24.009 23.498,23.498C24.009,22.987 24.371,22.347 24.545,21.646L29.427,2.011Z"
-		>
-			<animateTransform
-				attributeName="transform"
-				attributeType="XML"
-				type="rotate"
-				from="0 0 0"
-				to="360 0 0"
-				:dur="`${particle.dur}ms`"
-				repeatCount="indefinite"
-				additive="sum"
-			/>
-			<animateTransform
-				attributeName="transform"
-				attributeType="XML"
-				type="scale"
-				:values="`0; ${particle.size}; 0`"
-				:dur="`${particle.dur}ms`"
-				repeatCount="indefinite"
-				additive="sum"
-			/>
-		</path>
-	</svg>
-	-->
-	<svg v-for="particle in particles" :key="particle.id" :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg">
-		<path
-			style="transform-origin: center; transform-box: fill-box;"
-			:transform="`translate(${particle.x} ${particle.y})`"
-			:fill="particle.color"
-			d="M29.427,2.011C29.721,0.83 30.782,0 32,0C33.218,0 34.279,0.83 34.573,2.011L39.455,21.646C39.629,22.347 39.991,22.987 40.502,23.498C41.013,24.009 41.653,24.371 42.354,24.545L61.989,29.427C63.17,29.721 64,30.782 64,32C64,33.218 63.17,34.279 61.989,34.573L42.354,39.455C41.653,39.629 41.013,39.991 40.502,40.502C39.991,41.013 39.629,41.653 39.455,42.354L34.573,61.989C34.279,63.17 33.218,64 32,64C30.782,64 29.721,63.17 29.427,61.989L24.545,42.354C24.371,41.653 24.009,41.013 23.498,40.502C22.987,39.991 22.347,39.629 21.646,39.455L2.011,34.573C0.83,34.279 0,33.218 0,32C0,30.782 0.83,29.721 2.011,29.427L21.646,24.545C22.347,24.371 22.987,24.009 23.498,23.498C24.009,22.987 24.371,22.347 24.545,21.646L29.427,2.011Z"
-		>
-			<animateTransform
-				attributeName="transform"
-				attributeType="XML"
-				type="rotate"
-				from="0 0 0"
-				to="360 0 0"
-				:dur="`${particle.dur}ms`"
-				repeatCount="1"
-				additive="sum"
-			/>
-			<animateTransform
-				attributeName="transform"
-				attributeType="XML"
-				type="scale"
-				:values="`0; ${particle.size}; 0`"
-				:dur="`${particle.dur}ms`"
-				repeatCount="1"
-				additive="sum"
-			/>
-		</path>
-	</svg>
-</span>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-
-const particles = ref([]);
-const el = ref<HTMLElement>();
-const width = ref(0);
-const height = ref(0);
-const colors = ['#FF1493', '#00FFFF', '#FFE202', '#FFE202', '#FFE202'];
-let stop = false;
-let ro: ResizeObserver | undefined;
-
-onMounted(() => {
-	ro = new ResizeObserver((entries, observer) => {
-		width.value = el.value?.offsetWidth + 64;
-		height.value = el.value?.offsetHeight + 64;
-	});
-	ro.observe(el.value);
-	const add = () => {
-		if (stop) return;
-		const x = (Math.random() * (width.value - 64));
-		const y = (Math.random() * (height.value - 64));
-		const sizeFactor = Math.random();
-		const particle = {
-			id: Math.random().toString(),
-			x,
-			y,
-			size: 0.2 + ((sizeFactor / 10) * 3),
-			dur: 1000 + (sizeFactor * 1000),
-			color: colors[Math.floor(Math.random() * colors.length)],
-		};
-		particles.value.push(particle);
-		window.setTimeout(() => {
-			particles.value = particles.value.filter(x => x.id !== particle.id);
-		}, particle.dur - 100);
-
-		window.setTimeout(() => {
-			add();
-		}, 500 + (Math.random() * 500));
-	};
-	add();
-});
-
-onUnmounted(() => {
-	if (ro) ro.disconnect();
-	stop = true;
-});
-</script>
-
-<style lang="scss" scoped>
-.mk-sparkle {
-	position: relative;
-	display: inline-block;
-
-	> span {
-		display: inline-block;
-	}
-
-	> svg {
-		position: absolute;
-		top: -32px;
-		left: -32px;
-		pointer-events: none;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
deleted file mode 100644
index 210923be46..0000000000
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-<div class="wrmlmaau" :class="{ collapsed }">
-	<div class="body">
-		<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
-		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
-		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
-		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
-	</div>
-	<details v-if="note.files.length > 0">
-		<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>
-		<XMediaList :media-list="note.files"/>
-	</details>
-	<details v-if="note.poll">
-		<summary>{{ i18n.ts.poll }}</summary>
-		<XPoll :note="note"/>
-	</details>
-	<button v-if="collapsed" class="fade _button" @click="collapsed = false">
-		<span>{{ i18n.ts.showMore }}</span>
-	</button>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'misskey-js';
-import XMediaList from '@/components/MkMediaList.vue';
-import XPoll from '@/components/MkPoll.vue';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	note: misskey.entities.Note;
-}>();
-
-const collapsed = $ref(
-	props.note.cw == null && props.note.text != null && (
-		(props.note.text.split('\n').length > 9) ||
-		(props.note.text.length > 500)
-	));
-</script>
-
-<style lang="scss" scoped>
-.wrmlmaau {
-	overflow-wrap: break-word;
-
-	> .body {
-		> .reply {
-			margin-right: 6px;
-			color: var(--accent);
-		}
-
-		> .rp {
-			margin-left: 4px;
-			font-style: oblique;
-			color: var(--renote);
-		}
-	}
-
-	&.collapsed {
-		position: relative;
-		max-height: 9em;
-		overflow: hidden;
-
-		> .fade {
-			display: block;
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			height: 64px;
-			background: linear-gradient(0deg, var(--panel), var(--X15));
-
-			> span {
-				display: inline-block;
-				background: var(--panel);
-				padding: 6px 10px;
-				font-size: 0.8em;
-				border-radius: 999px;
-				box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-			}
-
-			&:hover {
-				> span {
-					background: var(--panelHighlight);
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkSuperMenu.vue b/packages/client/src/components/MkSuperMenu.vue
deleted file mode 100644
index e79794aea4..0000000000
--- a/packages/client/src/components/MkSuperMenu.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<template>
-<div class="rrevdjwu" :class="{ grid }">
-	<div v-for="group in def" class="group">
-		<div v-if="group.title" class="title">{{ group.title }}</div>
-
-		<div class="items">
-			<template v-for="(item, i) in group.items">
-				<a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
-					<i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i>
-					<span class="text">{{ item.text }}</span>
-				</a>
-				<button v-else-if="item.type === 'button'" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)">
-					<i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i>
-					<span class="text">{{ item.text }}</span>
-				</button>
-				<MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
-					<i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i>
-					<span class="text">{{ item.text }}</span>
-				</MkA>
-			</template>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref, unref } from 'vue';
-
-export default defineComponent({
-	props: {
-		def: {
-			type: Array,
-			required: true,
-		},
-		grid: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.rrevdjwu {
-	> .group {
-		& + .group {
-			margin-top: 16px;
-			padding-top: 16px;
-			border-top: solid 0.5px var(--divider);
-		}
-
-		> .title {
-			opacity: 0.7;
-			margin: 0 0 8px 0;
-			font-size: 0.9em;
-		}
-	
-		> .items {
-			> .item {
-				display: flex;
-				align-items: center;
-				width: 100%;
-				box-sizing: border-box;
-				padding: 10px 16px 10px 8px;
-				border-radius: 9px;
-				font-size: 0.9em;
-
-				&:hover {
-					text-decoration: none;
-					background: var(--panelHighlight);
-				}
-
-				&.active {
-					color: var(--accent);
-					background: var(--accentedBg);
-				}
-
-				&.danger {
-					color: var(--error);
-				}
-
-				> .icon {
-					width: 32px;
-					margin-right: 2px;
-					flex-shrink: 0;
-					text-align: center;
-					opacity: 0.8;
-				}
-
-				> .text {
-					white-space: normal;
-					padding-right: 12px;
-					flex-shrink: 1;
-				}
-
-			}
-		}
-	}
-
-	&.grid {
-		> .group {
-			& + .group {
-				padding-top: 0;
-				border-top: none;
-			}
-
-			margin-left: 0;
-			margin-right: 0;
-
-			> .title {
-				font-size: 1em;
-				opacity: 0.7;
-				margin: 0 0 8px 16px;
-			}
-
-			> .items {
-				display: grid;
-				grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
-				grid-gap: 16px;
-				padding: 0 16px;
-
-				> .item {
-					flex-direction: column;
-					text-align: center;
-					padding: 0;
-
-					&:hover {
-						text-decoration: none;
-						background: none;
-						color: var(--accent);
-
-						> .icon {
-							background: var(--accentedBg);
-						}
-					}
-
-					> .icon {
-						display: grid;
-						place-content: center;
-						margin-right: 0;
-						margin-bottom: 6px;
-						font-size: 1.5em;
-						width: 54px;
-						height: 54px;
-						aspect-ratio: 1;
-						background: var(--panel);
-						border-radius: 100%;
-					}
-
-					> .text {
-						padding-right: 0;
-						width: 100%;
-						font-size: 0.8em;
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkTab.vue b/packages/client/src/components/MkTab.vue
deleted file mode 100644
index 669e9e2e11..0000000000
--- a/packages/client/src/components/MkTab.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script lang="ts">
-import { defineComponent, h, resolveDirective, withDirectives } from 'vue';
-
-export default defineComponent({
-	props: {
-		modelValue: {
-			required: true,
-		},
-	},
-	render() {
-		const options = this.$slots.default();
-
-		return withDirectives(h('div', {
-			class: 'pxhvhrfw',
-		}, options.map(option => withDirectives(h('button', {
-			class: ['_button', { active: this.modelValue === option.props.value }],
-			key: option.key,
-			disabled: this.modelValue === option.props.value,
-			onClick: () => {
-				this.$emit('update:modelValue', option.props.value);
-			},
-		}, option.children), [
-			[resolveDirective('click-anime')],
-		]))), [
-			[resolveDirective('size'), { max: [500] }],
-		]);
-	},
-});
-</script>
-
-<style lang="scss">
-.pxhvhrfw {
-	display: flex;
-	font-size: 90%;
-
-	> button {
-		flex: 1;
-		padding: 10px 8px;
-		border-radius: var(--radius);
-
-		&:disabled {
-			opacity: 1 !important;
-			cursor: default;
-		}
-
-		&.active {
-			color: var(--accent);
-			background: var(--accentedBg);
-		}
-
-		&:not(.active):hover {
-			color: var(--fgHighlighted);
-			background: var(--panelHighlight);
-		}
-
-		&:not(:first-child) {
-			margin-left: 8px;
-		}
-
-		> .icon {
-			margin-right: 6px;
-		}
-	}
-
-	&.max-width_500px {
-		font-size: 80%;
-
-		> button {
-			padding: 11px 8px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkTagCloud.vue b/packages/client/src/components/MkTagCloud.vue
deleted file mode 100644
index 2dfd26edb0..0000000000
--- a/packages/client/src/components/MkTagCloud.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-<div ref="rootEl" class="meijqfqm">
-	<canvas :id="idForCanvas" ref="canvasEl" class="canvas" :width="width" height="300" @contextmenu.prevent="() => {}"></canvas>
-	<div :id="idForTags" ref="tagsEl" class="tags">
-		<ul>
-			<slot></slot>
-		</ul>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref, watch, PropType, onBeforeUnmount } from 'vue';
-import tinycolor from 'tinycolor2';
-
-const loaded = !!window.TagCanvas;
-const SAFE_FOR_HTML_ID = 'abcdefghijklmnopqrstuvwxyz';
-const computedStyle = getComputedStyle(document.documentElement);
-const idForCanvas = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
-const idForTags = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
-let available = $ref(false);
-let rootEl = $ref<HTMLElement | null>(null);
-let canvasEl = $ref<HTMLCanvasElement | null>(null);
-let tagsEl = $ref<HTMLElement | null>(null);
-let width = $ref(300);
-
-watch($$(available), () => {
-	try {
-		window.TagCanvas.Start(idForCanvas, idForTags, {
-			textColour: '#ffffff',
-			outlineColour: tinycolor(computedStyle.getPropertyValue('--accent')).toHexString(),
-			outlineRadius: 10,
-			initial: [-0.030, -0.010],
-			frontSelect: true,
-			imageRadius: 8,
-			//dragControl: true,
-			dragThreshold: 3,
-			wheelZoom: false,
-			reverse: true,
-			depth: 0.5,
-			maxSpeed: 0.2,
-			minSpeed: 0.003,
-			stretchX: 0.8,
-			stretchY: 0.8,
-		});
-	} catch (err) {}
-});
-
-onMounted(() => {
-	width = rootEl.offsetWidth;
-
-	if (loaded) {
-		available = true;
-	} else {
-		document.head.appendChild(Object.assign(document.createElement('script'), {
-			async: true,
-			src: '/client-assets/tagcanvas.min.js',
-		})).addEventListener('load', () => available = true);
-	}
-});
-
-onBeforeUnmount(() => {
-	if (window.TagCanvas) window.TagCanvas.Delete(idForCanvas);
-});
-
-defineExpose({
-	update: () => {
-		window.TagCanvas.Update(idForCanvas);
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.meijqfqm {
-	position: relative;
-	overflow: clip;
-	display: grid;
-	place-items: center;
-
-	> .canvas {
-		display: block;
-	}
-
-	> .tags {
-		position: absolute;
-		top: 999px;
-		left: 999px;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/MkTimeline.vue
deleted file mode 100644
index 831a194ce3..0000000000
--- a/packages/client/src/components/MkTimeline.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-<XNotes ref="tlComponent" :no-gap="!$store.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, provide, onUnmounted } from 'vue';
-import XNotes from '@/components/MkNotes.vue';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import * as sound from '@/scripts/sound';
-import { $i } from '@/account';
-
-const props = defineProps<{
-	src: string;
-	list?: string;
-	antenna?: string;
-	channel?: string;
-	sound?: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'note'): void;
-	(ev: 'queue', count: number): void;
-}>();
-
-provide('inChannel', computed(() => props.src === 'channel'));
-
-const tlComponent: InstanceType<typeof XNotes> = $ref();
-
-const prepend = note => {
-	tlComponent.pagingComponent?.prepend(note);
-
-	emit('note');
-
-	if (props.sound) {
-		sound.play($i && (note.userId === $i.id) ? 'noteMy' : 'note');
-	}
-};
-
-const onUserAdded = () => {
-	tlComponent.pagingComponent?.reload();
-};
-
-const onUserRemoved = () => {
-	tlComponent.pagingComponent?.reload();
-};
-
-const onChangeFollowing = () => {
-	if (!tlComponent.pagingComponent?.backed) {
-		tlComponent.pagingComponent?.reload();
-	}
-};
-
-let endpoint;
-let query;
-let connection;
-let connection2;
-
-if (props.src === 'antenna') {
-	endpoint = 'antennas/notes';
-	query = {
-		antennaId: props.antenna,
-	};
-	connection = stream.useChannel('antenna', {
-		antennaId: props.antenna,
-	});
-	connection.on('note', prepend);
-} else if (props.src === 'home') {
-	endpoint = 'notes/timeline';
-	connection = stream.useChannel('homeTimeline');
-	connection.on('note', prepend);
-
-	connection2 = stream.useChannel('main');
-	connection2.on('follow', onChangeFollowing);
-	connection2.on('unfollow', onChangeFollowing);
-} else if (props.src === 'local') {
-	endpoint = 'notes/local-timeline';
-	connection = stream.useChannel('localTimeline');
-	connection.on('note', prepend);
-} else if (props.src === 'social') {
-	endpoint = 'notes/hybrid-timeline';
-	connection = stream.useChannel('hybridTimeline');
-	connection.on('note', prepend);
-} else if (props.src === 'global') {
-	endpoint = 'notes/global-timeline';
-	connection = stream.useChannel('globalTimeline');
-	connection.on('note', prepend);
-} else if (props.src === 'mentions') {
-	endpoint = 'notes/mentions';
-	connection = stream.useChannel('main');
-	connection.on('mention', prepend);
-} else if (props.src === 'directs') {
-	endpoint = 'notes/mentions';
-	query = {
-		visibility: 'specified',
-	};
-	const onNote = note => {
-		if (note.visibility === 'specified') {
-			prepend(note);
-		}
-	};
-	connection = stream.useChannel('main');
-	connection.on('mention', onNote);
-} else if (props.src === 'list') {
-	endpoint = 'notes/user-list-timeline';
-	query = {
-		listId: props.list,
-	};
-	connection = stream.useChannel('userList', {
-		listId: props.list,
-	});
-	connection.on('note', prepend);
-	connection.on('userAdded', onUserAdded);
-	connection.on('userRemoved', onUserRemoved);
-} else if (props.src === 'channel') {
-	endpoint = 'channels/timeline';
-	query = {
-		channelId: props.channel,
-	};
-	connection = stream.useChannel('channel', {
-		channelId: props.channel,
-	});
-	connection.on('note', prepend);
-}
-
-const pagination = {
-	endpoint: endpoint,
-	limit: 10,
-	params: query,
-};
-
-onUnmounted(() => {
-	connection.dispose();
-	if (connection2) connection2.dispose();
-});
-
-/* TODO
-const timetravel = (date?: Date) => {
-	this.date = date;
-	this.$refs.tl.reload();
-};
-*/
-</script>
diff --git a/packages/client/src/components/MkToast.vue b/packages/client/src/components/MkToast.vue
deleted file mode 100644
index c9fad64eb6..0000000000
--- a/packages/client/src/components/MkToast.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-<div class="mk-toast">
-	<transition :name="$store.state.animation ? 'toast' : ''" appear @after-leave="emit('closed')">
-		<div v-if="showing" class="body _acrylic" :style="{ zIndex }">
-			<div class="message">
-				{{ message }}
-			</div>
-		</div>
-	</transition>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import * as os from '@/os';
-
-defineProps<{
-	message: string;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-
-const zIndex = os.claimZIndex('high');
-let showing = $ref(true);
-
-onMounted(() => {
-	window.setTimeout(() => {
-		showing = false;
-	}, 4000);
-});
-</script>
-
-<style lang="scss" scoped>
-.toast-enter-active, .toast-leave-active {
-	transition: opacity 0.3s, transform 0.3s !important;
-}
-.toast-enter-from, .toast-leave-to {
-	opacity: 0;
-	transform: translateY(-100%);
-}
-
-.mk-toast {
-	> .body {
-		position: fixed;
-		left: 0;
-		right: 0;
-		top: 0;
-		margin: 0 auto;
-		margin-top: 16px;
-		min-width: 300px;
-		max-width: calc(100% - 32px);
-		width: min-content;
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-		border-radius: 8px;
-		overflow: clip;
-		text-align: center;
-		pointer-events: none;
-
-		> .message {
-			padding: 16px 24px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkTokenGenerateWindow.vue b/packages/client/src/components/MkTokenGenerateWindow.vue
deleted file mode 100644
index b846034a24..0000000000
--- a/packages/client/src/components/MkTokenGenerateWindow.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-<XModalWindow
-	ref="dialog"
-	:width="400"
-	:height="450"
-	:with-ok-button="true"
-	:ok-button-disabled="false"
-	:can-close="false"
-	@close="dialog.close()"
-	@closed="$emit('closed')"
-	@ok="ok()"
->
-	<template #header>{{ title || $ts.generateAccessToken }}</template>
-	<div v-if="information" class="_section">
-		<MkInfo warn>{{ information }}</MkInfo>
-	</div>
-	<div class="_section">
-		<MkInput v-model="name">
-			<template #label>{{ $ts.name }}</template>
-		</MkInput>
-	</div>
-	<div class="_section">
-		<div style="margin-bottom: 16px;"><b>{{ $ts.permission }}</b></div>
-		<MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton>
-		<MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton>
-		<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch>
-	</div>
-</XModalWindow>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import { permissions as kinds } from 'misskey-js';
-import MkInput from './form/input.vue';
-import MkSwitch from './form/switch.vue';
-import MkButton from './MkButton.vue';
-import MkInfo from './MkInfo.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-
-const props = withDefaults(defineProps<{
-	title?: string | null;
-	information?: string | null;
-	initialName?: string | null;
-	initialPermissions?: string[] | null;
-}>(), {
-	title: null,
-	information: null,
-	initialName: null,
-	initialPermissions: null,
-});
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-	(ev: 'done', result: { name: string | null, permissions: string[] }): void;
-}>();
-
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
-let name = $ref(props.initialName);
-let permissions = $ref({});
-
-if (props.initialPermissions) {
-	for (const kind of props.initialPermissions) {
-		permissions[kind] = true;
-	}
-} else {
-	for (const kind of kinds) {
-		permissions[kind] = false;
-	}
-}
-
-function ok(): void {
-	emit('done', {
-		name: name,
-		permissions: Object.keys(permissions).filter(p => permissions[p]),
-	});
-	dialog.close();
-}
-
-function disableAll(): void {
-	for (const p in permissions) {
-		permissions[p] = false;
-	}
-}
-
-function enableAll(): void {
-	for (const p in permissions) {
-		permissions[p] = true;
-	}
-}
-</script>
diff --git a/packages/client/src/components/MkTooltip.vue b/packages/client/src/components/MkTooltip.vue
deleted file mode 100644
index 4c6258d245..0000000000
--- a/packages/client/src/components/MkTooltip.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-<transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="emit('closed')">
-	<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
-		<slot>
-			<Mfm v-if="asMfm" :text="text"/>
-			<span v-else>{{ text }}</span>
-		</slot>
-	</div>
-</transition>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, ref } from 'vue';
-import * as os from '@/os';
-import { calcPopupPosition } from '@/scripts/popup-position';
-
-const props = withDefaults(defineProps<{
-	showing: boolean;
-	targetElement?: HTMLElement;
-	x?: number;
-	y?: number;
-	text?: string;
-	asMfm?: boolean;
-	maxWidth?: number;
-	direction?: 'top' | 'bottom' | 'right' | 'left';
-	innerMargin?: number;
-}>(), {
-	maxWidth: 250,
-	direction: 'top',
-	innerMargin: 0,
-});
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-
-const el = ref<HTMLElement>();
-const zIndex = os.claimZIndex('high');
-
-function setPosition() {
-	const data = calcPopupPosition(el.value, {
-		anchorElement: props.targetElement,
-		direction: props.direction,
-		align: 'center',
-		innerMargin: props.innerMargin,
-		x: props.x,
-		y: props.y,
-	});
-
-	el.value.style.transformOrigin = data.transformOrigin;
-	el.value.style.left = data.left + 'px';
-	el.value.style.top = data.top + 'px';
-}
-
-let loopHandler;
-
-onMounted(() => {
-	nextTick(() => {
-		setPosition();
-
-		const loop = () => {
-			loopHandler = window.requestAnimationFrame(() => {
-				setPosition();
-				loop();
-			});
-		};
-
-		loop();
-	});
-});
-
-onUnmounted(() => {
-	window.cancelAnimationFrame(loopHandler);
-});
-</script>
-
-<style lang="scss" scoped>
-.tooltip-enter-active,
-.tooltip-leave-active {
-	opacity: 1;
-	transform: scale(1);
-	transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.tooltip-enter-from,
-.tooltip-leave-active {
-	opacity: 0;
-	transform: scale(0.75);
-}
-
-.buebdbiu {
-	position: absolute;
-	font-size: 0.8em;
-	padding: 8px 12px;
-	box-sizing: border-box;
-	text-align: center;
-	border-radius: 4px;
-	border: solid 0.5px var(--divider);
-	pointer-events: none;
-	transform-origin: center center;
-}
-</style>
diff --git a/packages/client/src/components/MkUpdated.vue b/packages/client/src/components/MkUpdated.vue
deleted file mode 100644
index 48aeb30224..0000000000
--- a/packages/client/src/components/MkUpdated.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-<MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')">
-	<div class="ewlycnyt">
-		<div class="title"><MkSparkle>{{ i18n.ts.misskeyUpdated }}</MkSparkle></div>
-		<div class="version">✨{{ version }}🚀</div>
-		<MkButton full @click="whatIsNew">{{ i18n.ts.whatIsNew }}</MkButton>
-		<MkButton class="gotIt" primary full @click="$refs.modal.close()">{{ i18n.ts.gotIt }}</MkButton>
-	</div>
-</MkModal>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkSparkle from '@/components/MkSparkle.vue';
-import { version } from '@/config';
-import { i18n } from '@/i18n';
-
-const modal = ref<InstanceType<typeof MkModal>>();
-
-const whatIsNew = () => {
-	modal.value.close();
-	window.open(`https://misskey-hub.net/docs/releases.html#_${version.replace(/\./g, '-')}`, '_blank');
-};
-</script>
-
-<style lang="scss" scoped>
-.ewlycnyt {
-	position: relative;
-	padding: 32px;
-	min-width: 320px;
-	max-width: 480px;
-	box-sizing: border-box;
-	text-align: center;
-	background: var(--panel);
-	border-radius: var(--radius);
-
-	> .title {
-		font-weight: bold;
-	}
-
-	> .version {
-		margin: 1em 0;
-	}
-
-	> .gotIt {
-		margin: 8px 0 0 0;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
deleted file mode 100644
index b2d16ddb01..0000000000
--- a/packages/client/src/components/MkUrlPreview.vue
+++ /dev/null
@@ -1,383 +0,0 @@
-<template>
-<div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
-	<button class="disablePlayer" :title="i18n.ts.disablePlayer" @click="playerEnabled = false"><i class="ti ti-x"></i></button>
-	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
-</div>
-<div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter">
-	<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
-</div>
-<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview">
-	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-		<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
-			<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
-				<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="isMobile? playerEnabled = true : openPlayer()"><i class="ti ti-player-play"></i></button>
-			</div>
-			<article>
-				<header>
-					<h1 :title="title">{{ title }}</h1>
-				</header>
-				<p v-if="description" :title="description">{{ description.length > 85 ? description.slice(0, 85) + '…' : description }}</p>
-				<footer>
-					<img v-if="icon" class="icon" :src="icon"/>
-					<p :title="sitename">{{ sitename }}</p>
-				</footer>
-			</article>
-		</component>
-	</transition>
-	<div v-if="tweetId" class="expandTweet">
-		<a @click="tweetExpanded = true">
-			<i class="ti ti-brand-twitter"></i> {{ i18n.ts.expandTweet }}
-		</a>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, onMounted, onUnmounted } from 'vue';
-import { url as local, lang } from '@/config';
-import { i18n } from '@/i18n';
-import * as os from '@/os';
-import { deviceKind } from '@/scripts/device-kind';
-
-const props = withDefaults(defineProps<{
-	url: string;
-	detail?: boolean;
-	compact?: boolean;
-}>(), {
-	detail: false,
-	compact: false,
-});
-
-const MOBILE_THRESHOLD = 500;
-const isMobile = $ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
-
-const self = props.url.startsWith(local);
-const attr = self ? 'to' : 'href';
-const target = self ? null : '_blank';
-let fetching = $ref(true);
-let title = $ref<string | null>(null);
-let description = $ref<string | null>(null);
-let thumbnail = $ref<string | null>(null);
-let icon = $ref<string | null>(null);
-let sitename = $ref<string | null>(null);
-let player = $ref({
-	url: null,
-	width: null,
-	height: null,
-});
-let playerEnabled = $ref(false);
-let tweetId = $ref<string | null>(null);
-let tweetExpanded = $ref(props.detail);
-const embedId = `embed${Math.random().toString().replace(/\D/, '')}`;
-let tweetHeight = $ref(150);
-
-const requestUrl = new URL(props.url);
-
-if (requestUrl.hostname === 'twitter.com' || requestUrl.hostname === 'mobile.twitter.com') {
-	const m = requestUrl.pathname.match(/^\/.+\/status(?:es)?\/(\d+)/);
-	if (m) tweetId = m[1];
-}
-
-if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/(?:watch|channel)')) {
-	requestUrl.hostname = 'www.youtube.com';
-}
-
-const requestLang = (lang ?? 'ja-JP').replace('ja-KS', 'ja-JP');
-
-requestUrl.hash = '';
-
-window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
-	res.json().then(info => {
-		if (info.url == null) return;
-		title = info.title;
-		description = info.description;
-		thumbnail = info.thumbnail;
-		icon = info.icon;
-		sitename = info.sitename;
-		fetching = false;
-		player = info.player;
-	});
-});
-
-function adjustTweetHeight(message: any) {
-	if (message.origin !== 'https://platform.twitter.com') return;
-	const embed = message.data?.['twttr.embed'];
-	if (embed?.method !== 'twttr.private.resize') return;
-	if (embed?.id !== embedId) return;
-	const height = embed?.params[0]?.height;
-	if (height) tweetHeight = height;
-}
-
-const openPlayer = (): void => {
-	os.popup(defineAsyncComponent(() => import('@/components/MkYoutubePlayer.vue')), {
-		url: requestUrl.href,
-	});
-};
-
-(window as any).addEventListener('message', adjustTweetHeight);
-
-onUnmounted(() => {
-	(window as any).removeEventListener('message', adjustTweetHeight);
-});
-</script>
-
-<style lang="scss" scoped>
-.player {
-	position: relative;
-	width: 100%;
-
-	> button {
-		position: absolute;
-		top: -1.5em;
-		right: 0;
-		font-size: 1em;
-		width: 1.5em;
-		height: 1.5em;
-		padding: 0;
-		margin: 0;
-		color: var(--fg);
-		background: rgba(128, 128, 128, 0.2);
-		opacity: 0.7;
-
-		&:hover {
-			opacity: 0.9;
-		}
-	}
-
-	> iframe {
-		height: 100%;
-		left: 0;
-		position: absolute;
-		top: 0;
-		width: 100%;
-	}
-}
-
-.mk-url-preview {
-	&.max-width_400px {
-		> .link {
-			font-size: 12px;
-
-			> .thumbnail {
-				height: 80px;
-			}
-
-			> article {
-				padding: 12px;
-			}
-		}
-	}
-
-	&.max-width_350px {
-		> .link {
-			font-size: 10px;
-
-			> .thumbnail {
-				height: 70px;
-			}
-
-			> article {
-				padding: 8px;
-
-				> header {
-					margin-bottom: 4px;
-				}
-
-				> footer {
-					margin-top: 4px;
-
-					> img {
-						width: 12px;
-						height: 12px;
-					}
-				}
-			}
-
-			&.compact {
-				> .thumbnail {
-					position: absolute;
-					width: 56px;
-					height: 100%;
-				}
-
-				> article {
-					left: 56px;
-					width: calc(100% - 56px);
-					padding: 4px;
-
-					> header {
-						margin-bottom: 2px;
-					}
-
-					> footer {
-						margin-top: 2px;
-					}
-				}
-			}
-		}
-	}
-
-	> .link {
-		position: relative;
-		display: block;
-		font-size: 14px;
-		box-shadow: 0 0 0 1px var(--divider);
-		border-radius: 8px;
-		overflow: hidden;
-
-		&:hover {
-			text-decoration: none;
-			border-color: rgba(0, 0, 0, 0.2);
-
-			> article > header > h1 {
-				text-decoration: underline;
-			}
-		}
-
-		> .thumbnail {
-			position: absolute;
-			width: 100px;
-			height: 100%;
-			background-position: center;
-			background-size: cover;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-
-			> button {
-				font-size: 3.5em;
-				opacity: 0.7;
-
-				&:hover {
-					font-size: 4em;
-					opacity: 0.9;
-				}
-			}
-
-			& + article {
-				left: 100px;
-				width: calc(100% - 100px);
-			}
-		}
-
-		> article {
-			position: relative;
-			box-sizing: border-box;
-			padding: 16px;
-
-			> header {
-				margin-bottom: 8px;
-
-				> h1 {
-					margin: 0;
-					font-size: 1em;
-				}
-			}
-
-			> p {
-				margin: 0;
-				font-size: 0.8em;
-			}
-
-			> footer {
-				margin-top: 8px;
-				height: 16px;
-
-				> img {
-					display: inline-block;
-					width: 16px;
-					height: 16px;
-					margin-right: 4px;
-					vertical-align: top;
-				}
-
-				> p {
-					display: inline-block;
-					margin: 0;
-					color: var(--urlPreviewInfo);
-					font-size: 0.8em;
-					line-height: 16px;
-					vertical-align: top;
-				}
-			}
-		}
-
-		&.compact {
-			> article {
-				> header h1, p, footer {
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-				}
-			}
-		}
-	}
-}
-
-@container (max-width: 400px) {
-	.mk-url-preview {
-		> .link {
-			font-size: 12px;
-
-			> .thumbnail {
-				height: 80px;
-			}
-
-			> article {
-				padding: 12px;
-			}
-		}
-	}
-}
-
-@container (max-width: 350px) {
-	.mk-url-preview {
-		> .link {
-			font-size: 10px;
-
-			> .thumbnail {
-				height: 70px;
-			}
-
-			> article {
-				padding: 8px;
-
-				> header {
-					margin-bottom: 4px;
-				}
-
-				> footer {
-					margin-top: 4px;
-
-					> img {
-						width: 12px;
-						height: 12px;
-					}
-				}
-			}
-
-			&.compact {
-				> .thumbnail {
-					position: absolute;
-					width: 56px;
-					height: 100%;
-				}
-
-				> article {
-					left: 56px;
-					width: calc(100% - 56px);
-					padding: 4px;
-
-					> header {
-						margin-bottom: 2px;
-					}
-
-					> footer {
-						margin-top: 2px;
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkUrlPreviewPopup.vue b/packages/client/src/components/MkUrlPreviewPopup.vue
deleted file mode 100644
index f343c6d8a6..0000000000
--- a/packages/client/src/components/MkUrlPreviewPopup.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-<div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
-	<transition :name="$store.state.animation ? 'zoom' : ''" @after-leave="emit('closed')">
-		<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/>
-	</transition>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted } from 'vue';
-import MkUrlPreview from '@/components/MkUrlPreview.vue';
-import * as os from '@/os';
-
-const props = defineProps<{
-	showing: boolean;
-	url: string;
-	source: HTMLElement;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-
-const zIndex = os.claimZIndex('middle');
-let top = $ref(0);
-let left = $ref(0);
-
-onMounted(() => {
-	const rect = props.source.getBoundingClientRect();
-	const x = Math.max((rect.left + (props.source.offsetWidth / 2)) - (300 / 2), 6) + window.pageXOffset;
-	const y = rect.top + props.source.offsetHeight + window.pageYOffset;
-
-	top = y;
-	left = x;
-});
-</script>
-
-<style lang="scss" scoped>
-.fgmtyycl {
-	position: absolute;
-	width: 500px;
-	max-width: calc(90vw - 12px);
-	pointer-events: none;
-}
-</style>
diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
deleted file mode 100644
index 1a4c494987..0000000000
--- a/packages/client/src/components/MkUserCardMini.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<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="chartValues" class="chart" :src="chartValues"/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import * as misskey from 'misskey-js';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { acct } from '@/filters/user';
-
-const props = defineProps<{
-	user: misskey.entities.User;
-}>();
-
-let chartValues = $ref<number[] | null>(null);
-
-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>
-
-<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) {
-			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;
-	}
-
-	&: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/components/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue
deleted file mode 100644
index 036cbea304..0000000000
--- a/packages/client/src/components/MkUserInfo.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-<div class="_panel vjnjpkug">
-	<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
-	<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
-	<div class="title">
-		<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
-		<p class="username"><MkAcct :user="user"/></p>
-	</div>
-	<span v-if="$i && $i.id !== user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
-	<div class="description">
-		<div v-if="user.description" class="mfm">
-			<Mfm :text="user.description" :author="user" :i="$i" :custom-emojis="user.emojis"/>
-		</div>
-		<span v-else style="opacity: 0.7;">{{ i18n.ts.noAccountDescription }}</span>
-	</div>
-	<div class="status">
-		<div>
-			<p>{{ i18n.ts.notes }}</p><span>{{ user.notesCount }}</span>
-		</div>
-		<div>
-			<p>{{ i18n.ts.following }}</p><span>{{ user.followingCount }}</span>
-		</div>
-		<div>
-			<p>{{ i18n.ts.followers }}</p><span>{{ user.followersCount }}</span>
-		</div>
-	</div>
-	<MkFollowButton v-if="$i && user.id != $i.id" class="koudoku-button" :user="user" mini/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import * as misskey from 'misskey-js';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import { userPage } from '@/filters/user';
-import { i18n } from '@/i18n';
-
-defineProps<{
-	user: misskey.entities.UserDetailed;
-}>();
-</script>
-
-<style lang="scss" scoped>
-.vjnjpkug {
-	position: relative;
-
-	> .banner {
-		height: 84px;
-		background-color: rgba(0, 0, 0, 0.1);
-		background-size: cover;
-		background-position: center;
-	}
-
-	> .avatar {
-		display: block;
-		position: absolute;
-		top: 62px;
-		left: 13px;
-		z-index: 2;
-		width: 58px;
-		height: 58px;
-		border: solid 4px var(--panel);
-	}
-
-	> .title {
-		display: block;
-		padding: 10px 0 10px 88px;
-
-		> .name {
-			display: inline-block;
-			margin: 0;
-			font-weight: bold;
-			line-height: 16px;
-			word-break: break-all;
-		}
-
-		> .username {
-			display: block;
-			margin: 0;
-			line-height: 16px;
-			font-size: 0.8em;
-			color: var(--fg);
-			opacity: 0.7;
-		}
-	}
-	
-	> .followed {
-		position: absolute;
-		top: 12px;
-		left: 12px;
-		padding: 4px 8px;
-		color: #fff;
-		background: rgba(0, 0, 0, 0.7);
-		font-size: 0.7em;
-		border-radius: 6px;
-	}
-	
-	> .description {
-		padding: 16px;
-		font-size: 0.8em;
-		border-top: solid 0.5px var(--divider);
-
-		> .mfm {
-			display: -webkit-box;
-			-webkit-line-clamp: 3;
-			-webkit-box-orient: vertical;  
-			overflow: hidden;
-		}
-	}
-
-	> .status {
-		padding: 10px 16px;
-		border-top: solid 0.5px var(--divider);
-
-		> div {
-			display: inline-block;
-			width: 33%;
-
-			> p {
-				margin: 0;
-				font-size: 0.7em;
-				color: var(--fg);
-			}
-
-			> span {
-				font-size: 1em;
-				color: var(--accent);
-			}
-		}
-	}
-
-	> .koudoku-button {
-		position: absolute;
-		top: 8px;
-		right: 8px;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkUserList.vue b/packages/client/src/components/MkUserList.vue
deleted file mode 100644
index e1f47c7673..0000000000
--- a/packages/client/src/components/MkUserList.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-<MkPagination ref="pagingComponent" :pagination="pagination">
-	<template #empty>
-		<div class="_fullinfo">
-			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-			<div>{{ i18n.ts.noUsers }}</div>
-		</div>
-	</template>
-
-	<template #default="{ items: users }">
-		<div class="efvhhmdq">
-			<MkUserInfo v-for="user in users" :key="user.id" class="user" :user="user"/>
-		</div>
-	</template>
-</MkPagination>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import MkUserInfo from '@/components/MkUserInfo.vue';
-import MkPagination, { Paging } from '@/components/MkPagination.vue';
-import { userPage } from '@/filters/user';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	pagination: Paging;
-	noGap?: boolean;
-}>();
-
-const pagingComponent = ref<InstanceType<typeof MkPagination>>();
-</script>
-
-<style lang="scss" scoped>
-.efvhhmdq {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-	grid-gap: var(--margin);
-}
-</style>
diff --git a/packages/client/src/components/MkUserOnlineIndicator.vue b/packages/client/src/components/MkUserOnlineIndicator.vue
deleted file mode 100644
index a4f6f80383..0000000000
--- a/packages/client/src/components/MkUserOnlineIndicator.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-<div v-tooltip="text" class="fzgwjkgc" :class="user.onlineStatus"></div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'misskey-js';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	user: misskey.entities.User;
-}>();
-
-const text = $computed(() => {
-	switch (props.user.onlineStatus) {
-		case 'online': return i18n.ts.online;
-		case 'active': return i18n.ts.active;
-		case 'offline': return i18n.ts.offline;
-		case 'unknown': return i18n.ts.unknown;
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.fzgwjkgc {
-	box-shadow: 0 0 0 3px var(--panel);
-	border-radius: 120%; // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる
-
-	&.online {
-		background: #58d4c9;
-	}
-
-	&.active {
-		background: #e4bc48;
-	}
-
-	&.offline {
-		background: #ea5353;
-	}
-
-	&.unknown {
-		background: #888;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue
deleted file mode 100644
index 4de2e8baa2..0000000000
--- a/packages/client/src/components/MkUserPreview.vue
+++ /dev/null
@@ -1,184 +0,0 @@
-<template>
-<transition :name="$store.state.animation ? 'popup' : ''" appear @after-leave="emit('closed')">
-	<div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }">
-		<div v-if="user != null" class="info">
-			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''">
-				<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
-			</div>
-			<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
-			<div class="title">
-				<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
-				<p class="username"><MkAcct :user="user"/></p>
-			</div>
-			<div class="description">
-				<Mfm v-if="user.description" :text="user.description" :author="user" :i="$i" :custom-emojis="user.emojis"/>
-			</div>
-			<div class="status">
-				<div>
-					<p>{{ $ts.notes }}</p><span>{{ user.notesCount }}</span>
-				</div>
-				<div>
-					<p>{{ $ts.following }}</p><span>{{ user.followingCount }}</span>
-				</div>
-				<div>
-					<p>{{ $ts.followers }}</p><span>{{ user.followersCount }}</span>
-				</div>
-			</div>
-			<MkFollowButton v-if="$i && user.id != $i.id" class="koudoku-button" :user="user" mini/>
-		</div>
-		<div v-else>
-			<MkLoading/>
-		</div>
-	</div>
-</transition>
-</template>
-
-<script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as Acct from 'misskey-js/built/acct';
-import * as misskey from 'misskey-js';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import { userPage } from '@/filters/user';
-import * as os from '@/os';
-
-const props = defineProps<{
-	showing: boolean;
-	q: string;
-	source: HTMLElement;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-	(ev: 'mouseover'): void;
-	(ev: 'mouseleave'): void;
-}>();
-
-const zIndex = os.claimZIndex('middle');
-let user = $ref<misskey.entities.UserDetailed | null>(null);
-let top = $ref(0);
-let left = $ref(0);
-
-onMounted(() => {
-	if (typeof props.q === 'object') {
-		user = props.q;
-	} else {
-		const query = props.q.startsWith('@') ?
-			Acct.parse(props.q.substr(1)) :
-			{ userId: props.q };
-
-		os.api('users/show', query).then(res => {
-			if (!props.showing) return;
-			user = res;
-		});
-	}
-
-	const rect = props.source.getBoundingClientRect();
-	const x = ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.pageXOffset;
-	const y = rect.top + props.source.offsetHeight + window.pageYOffset;
-
-	top = y;
-	left = x;
-});
-</script>
-
-<style lang="scss" scoped>
-.popup-enter-active, .popup-leave-active {
-	transition: opacity 0.3s, transform 0.3s !important;
-}
-.popup-enter-from, .popup-leave-to {
-	opacity: 0;
-	transform: scale(0.9);
-}
-
-.fxxzrfni {
-	position: absolute;
-	width: 300px;
-	overflow: hidden;
-	transform-origin: center top;
-
-	> .info {
-		> .banner {
-			height: 84px;
-			background-color: rgba(0, 0, 0, 0.1);
-			background-size: cover;
-			background-position: center;
-			> .followed {
-					position: absolute;
-					top: 12px;
-					left: 12px;
-					padding: 4px 8px;
-					color: #fff;
-					background: rgba(0, 0, 0, 0.7);
-					font-size: 0.7em;
-					border-radius: 6px;
-			}
-		}
-
-		> .avatar {
-			display: block;
-			position: absolute;
-			top: 62px;
-			left: 13px;
-			z-index: 2;
-			width: 58px;
-			height: 58px;
-			border: solid 3px var(--face);
-			border-radius: 8px;
-		}
-
-		> .title {
-			display: block;
-			padding: 8px 0 8px 82px;
-
-			> .name {
-				display: inline-block;
-				margin: 0;
-				font-weight: bold;
-				line-height: 16px;
-				word-break: break-all;
-			}
-
-			> .username {
-				display: block;
-				margin: 0;
-				line-height: 16px;
-				font-size: 0.8em;
-				color: var(--fg);
-				opacity: 0.7;
-			}
-		}
-
-		> .description {
-			padding: 0 16px;
-			font-size: 0.8em;
-			color: var(--fg);
-		}
-
-		> .status {
-			padding: 8px 16px;
-
-			> div {
-				display: inline-block;
-				width: 33%;
-
-				> p {
-					margin: 0;
-					font-size: 0.7em;
-					color: var(--fg);
-				}
-
-				> span {
-					font-size: 1em;
-					color: var(--accent);
-				}
-			}
-		}
-
-		> .koudoku-button {
-			position: absolute;
-			top: 8px;
-			right: 8px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkUserSelectDialog.vue b/packages/client/src/components/MkUserSelectDialog.vue
deleted file mode 100644
index 1d31769c30..0000000000
--- a/packages/client/src/components/MkUserSelectDialog.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<template>
-<XModalWindow
-	ref="dialogEl"
-	:with-ok-button="true"
-	:ok-button-disabled="selected == null"
-	@click="cancel()"
-	@close="cancel()"
-	@ok="ok()"
-	@closed="$emit('closed')"
->
-	<template #header>{{ i18n.ts.selectUser }}</template>
-	<div class="tbhwbxda">
-		<div class="form">
-			<FormSplit :min-width="170">
-				<MkInput v-model="username" :autofocus="true" @update:model-value="search">
-					<template #label>{{ i18n.ts.username }}</template>
-					<template #prefix>@</template>
-				</MkInput>
-				<MkInput v-model="host" @update:model-value="search">
-					<template #label>{{ i18n.ts.host }}</template>
-					<template #prefix>@</template>
-				</MkInput>
-			</FormSplit>
-		</div>
-		<div v-if="username != '' || host != ''" class="result" :class="{ hit: users.length > 0 }">
-			<div v-if="users.length > 0" class="users">
-				<div v-for="user in users" :key="user.id" class="user" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-					<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-					<div class="body">
-						<MkUserName :user="user" class="name"/>
-						<MkAcct :user="user" class="acct"/>
-					</div>
-				</div>
-			</div>
-			<div v-else class="empty">
-				<span>{{ i18n.ts.noUsers }}</span>
-			</div>
-		</div>
-		<div v-if="username == '' && host == ''" class="recent">
-			<div class="users">
-				<div v-for="user in recentUsers" :key="user.id" class="user" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
-					<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-					<div class="body">
-						<MkUserName :user="user" class="name"/>
-						<MkAcct :user="user" class="acct"/>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</XModalWindow>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
-import * as misskey from 'misskey-js';
-import MkInput from '@/components/form/input.vue';
-import FormSplit from '@/components/form/split.vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-
-const emit = defineEmits<{
-	(ev: 'ok', selected: misskey.entities.UserDetailed): void;
-	(ev: 'cancel'): void;
-	(ev: 'closed'): void;
-}>();
-
-let username = $ref('');
-let host = $ref('');
-let users: misskey.entities.UserDetailed[] = $ref([]);
-let recentUsers: misskey.entities.UserDetailed[] = $ref([]);
-let selected: misskey.entities.UserDetailed | null = $ref(null);
-let dialogEl = $ref();
-
-const search = () => {
-	if (username === '' && host === '') {
-		users = [];
-		return;
-	}
-	os.api('users/search-by-username-and-host', {
-		username: username,
-		host: host,
-		limit: 10,
-		detail: false,
-	}).then(_users => {
-		users = _users;
-	});
-};
-
-const ok = () => {
-	if (selected == null) return;
-	emit('ok', selected);
-	dialogEl.close();
-
-	// 最近使ったユーザー更新
-	let recents = defaultStore.state.recentlyUsedUsers;
-	recents = recents.filter(x => x !== selected.id);
-	recents.unshift(selected.id);
-	defaultStore.set('recentlyUsedUsers', recents.splice(0, 16));
-};
-
-const cancel = () => {
-	emit('cancel');
-	dialogEl.close();
-};
-
-onMounted(() => {
-	os.api('users/show', {
-		userIds: defaultStore.state.recentlyUsedUsers,
-	}).then(users => {
-		recentUsers = users;
-	});
-});
-</script>
-
-<style lang="scss" scoped>
-.tbhwbxda {
-	> .form {
-		padding: 0 var(--root-margin);
-	}
-
-	> .result, > .recent {
-		display: flex;
-		flex-direction: column;
-		overflow: auto;
-		height: 100%;
-
-		&.result.hit {
-			padding: 0;
-		}
-
-		&.recent {
-			padding: 0;
-		}
-
-		> .users {
-			flex: 1;
-			overflow: auto;
-			padding: 8px 0;
-
-			> .user {
-				display: flex;
-				align-items: center;
-				padding: 8px var(--root-margin);
-				font-size: 14px;
-
-				&:hover {
-					background: var(--X7);
-				}
-
-				&.selected {
-					background: var(--accent);
-					color: #fff;
-				}
-
-				> * {
-					pointer-events: none;
-					user-select: none;
-				}
-
-				> .avatar {
-					width: 45px;
-					height: 45px;
-				}
-
-				> .body {
-					padding: 0 8px;
-					min-width: 0;
-
-					> .name {
-						display: block;
-						font-weight: bold;
-					}
-
-					> .acct {
-						opacity: 0.5;
-					}
-				}
-			}
-		}
-
-		> .empty {
-			opacity: 0.7;
-			text-align: center;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkUsersTooltip.vue b/packages/client/src/components/MkUsersTooltip.vue
deleted file mode 100644
index f0384e2d65..0000000000
--- a/packages/client/src/components/MkUsersTooltip.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-<MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="250" @closed="emit('closed')">
-	<div class="beaffaef">
-		<div v-for="u in users" :key="u.id" class="user">
-			<MkAvatar class="avatar" :user="u"/>
-			<MkUserName class="name" :user="u" :nowrap="true"/>
-		</div>
-		<div v-if="users.length < count" class="omitted">+{{ count - users.length }}</div>
-	</div>
-</MkTooltip>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkTooltip from './MkTooltip.vue';
-
-defineProps<{
-	showing: boolean;
-	users: any[]; // TODO
-	count: number;
-	targetElement: HTMLElement;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-</script>
-
-<style lang="scss" scoped>
-.beaffaef {
-	font-size: 0.9em;
-	text-align: left;
-
-	> .user {
-		line-height: 24px;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-
-		&:not(:last-child) {
-			margin-bottom: 3px;
-		}
-
-		> .avatar {
-			width: 24px;
-			height: 24px;
-			margin-right: 3px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkVisibility.vue b/packages/client/src/components/MkVisibility.vue
deleted file mode 100644
index 229907fbb8..0000000000
--- a/packages/client/src/components/MkVisibility.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-<span v-if="note.visibility !== 'public'" :class="$style.visibility" :title="i18n.ts._visibility[note.visibility]">
-	<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
-	<i v-else-if="note.visibility === 'followers'" class="ti ti-lock-open"></i>
-	<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
-</span>
-<span v-if="note.localOnly" :class="$style.localOnly" :title="i18n.ts._visibility['localOnly']"><i class="ti ti-world-off"></i></span>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import XDetails from '@/components/MkUsersTooltip.vue';
-import * as os from '@/os';
-import { useTooltip } from '@/scripts/use-tooltip';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	note: {
-		visibility: string;
-		localOnly?: boolean;
-		visibleUserIds?: string[];
-	},
-}>();
-
-const specified = $ref<HTMLElement>();
-
-if (props.note.visibility === 'specified') {
-	useTooltip($$(specified), async (showing) => {
-		const users = await os.api('users/show', {
-			userIds: props.note.visibleUserIds,
-			limit: 10,
-		});
-
-		os.popup(XDetails, {
-			showing,
-			users,
-			count: props.note.visibleUserIds.length,
-			targetElement: specified,
-		}, {}, 'closed');
-	});
-}
-</script>
-
-<style lang="scss" module>
-.visibility, .localOnly {
-	margin-left: 0.5em;
-}
-</style>
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
deleted file mode 100644
index 8f0bcdeae8..0000000000
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<template>
-<MkModal ref="modal" :z-priority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
-	<div class="gqyayizv _popup">
-		<button key="public" class="_button" :class="{ active: v === 'public' }" data-index="1" @click="choose('public')">
-			<div><i class="ti ti-world"></i></div>
-			<div>
-				<span>{{ i18n.ts._visibility.public }}</span>
-				<span>{{ i18n.ts._visibility.publicDescription }}</span>
-			</div>
-		</button>
-		<button key="home" class="_button" :class="{ active: v === 'home' }" data-index="2" @click="choose('home')">
-			<div><i class="ti ti-home"></i></div>
-			<div>
-				<span>{{ i18n.ts._visibility.home }}</span>
-				<span>{{ i18n.ts._visibility.homeDescription }}</span>
-			</div>
-		</button>
-		<button key="followers" class="_button" :class="{ active: v === 'followers' }" data-index="3" @click="choose('followers')">
-			<div><i class="ti ti-lock-open"></i></div>
-			<div>
-				<span>{{ i18n.ts._visibility.followers }}</span>
-				<span>{{ i18n.ts._visibility.followersDescription }}</span>
-			</div>
-		</button>
-		<button key="specified" :disabled="localOnly" class="_button" :class="{ active: v === 'specified' }" data-index="4" @click="choose('specified')">
-			<div><i class="ti ti-mail"></i></div>
-			<div>
-				<span>{{ i18n.ts._visibility.specified }}</span>
-				<span>{{ i18n.ts._visibility.specifiedDescription }}</span>
-			</div>
-		</button>
-		<div class="divider"></div>
-		<button key="localOnly" class="_button localOnly" :class="{ active: localOnly }" data-index="5" @click="localOnly = !localOnly">
-			<div><i class="ti ti-world-off"></i></div>
-			<div>
-				<span>{{ i18n.ts._visibility.localOnly }}</span>
-				<span>{{ i18n.ts._visibility.localOnlyDescription }}</span>
-			</div>
-			<div><i :class="localOnly ? 'ti ti-toggle-right' : 'ti ti-toggle-left'"></i></div>
-		</button>
-	</div>
-</MkModal>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, watch } from 'vue';
-import * as misskey from 'misskey-js';
-import MkModal from '@/components/MkModal.vue';
-import { i18n } from '@/i18n';
-
-const modal = $ref<InstanceType<typeof MkModal>>();
-
-const props = withDefaults(defineProps<{
-	currentVisibility: typeof misskey.noteVisibilities[number];
-	currentLocalOnly: boolean;
-	src?: HTMLElement;
-}>(), {
-});
-
-const emit = defineEmits<{
-	(ev: 'changeVisibility', v: typeof misskey.noteVisibilities[number]): void;
-	(ev: 'changeLocalOnly', v: boolean): void;
-	(ev: 'closed'): void;
-}>();
-
-let v = $ref(props.currentVisibility);
-let localOnly = $ref(props.currentLocalOnly);
-
-watch($$(localOnly), () => {
-	emit('changeLocalOnly', localOnly);
-});
-
-function choose(visibility: typeof misskey.noteVisibilities[number]): void {
-	v = visibility;
-	emit('changeVisibility', visibility);
-	nextTick(() => {
-		modal.close();
-	});
-}
-</script>
-
-<style lang="scss" scoped>
-.gqyayizv {
-	width: 240px;
-	padding: 8px 0;
-
-	> .divider {
-		margin: 8px 0;
-		border-top: solid 0.5px var(--divider);
-	}
-
-	> button {
-		display: flex;
-		padding: 8px 14px;
-		font-size: 12px;
-		text-align: left;
-		width: 100%;
-		box-sizing: border-box;
-
-		&:hover {
-			background: rgba(0, 0, 0, 0.05);
-		}
-
-		&:active {
-			background: rgba(0, 0, 0, 0.1);
-		}
-
-		&.active {
-			color: var(--fgOnAccent);
-			background: var(--accent);
-		}
-
-		&.localOnly.active {
-			color: var(--accent);
-			background: inherit;
-		}
-
-		> *:nth-child(1) {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			margin-right: 10px;
-			width: 16px;
-			top: 0;
-			bottom: 0;
-			margin-top: auto;
-			margin-bottom: auto;
-		}
-
-		> *:nth-child(2) {
-			flex: 1 1 auto;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-
-			> span:first-child {
-				display: block;
-				font-weight: bold;
-			}
-
-			> span:last-child:not(:first-child) {
-				opacity: 0.6;
-			}
-		}
-
-		> *:nth-child(3) {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			margin-left: 10px;
-			width: 16px;
-			top: 0;
-			bottom: 0;
-			margin-top: auto;
-			margin-bottom: auto;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkWaitingDialog.vue b/packages/client/src/components/MkWaitingDialog.vue
deleted file mode 100644
index f4a9f4f22c..0000000000
--- a/packages/client/src/components/MkWaitingDialog.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="emit('closed')">
-	<div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
-		<i v-if="success" class="ti ti-check icon success"></i>
-		<MkLoading v-else class="icon waiting" :em="true"/>
-		<div v-if="text && !success" class="text">{{ text }}<MkEllipsis/></div>
-	</div>
-</MkModal>
-</template>
-
-<script lang="ts" setup>
-import { watch, ref } from 'vue';
-import MkModal from '@/components/MkModal.vue';
-
-const modal = ref<InstanceType<typeof MkModal>>();
-
-const props = defineProps<{
-	success: boolean;
-	showing: boolean;
-	text?: string;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'done');
-	(ev: 'closed');
-}>();
-
-function done() {
-	emit('done');
-	modal.value.close();
-}
-
-watch(() => props.showing, () => {
-	if (!props.showing) done();
-});
-</script>
-
-<style lang="scss" scoped>
-.iuyakobc {
-	position: relative;
-	padding: 32px;
-	box-sizing: border-box;
-	text-align: center;
-	background: var(--panel);
-	border-radius: var(--radius);
-	width: 250px;
-
-	&.iconOnly {
-		padding: 0;
-		width: 96px;
-		height: 96px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	> .icon {
-		font-size: 32px;
-
-		&.success {
-			color: var(--accent);
-		}
-
-		&.waiting {
-			opacity: 0.7;
-		}
-	}
-
-	> .text {
-		margin-top: 16px;
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkWidgets.vue b/packages/client/src/components/MkWidgets.vue
deleted file mode 100644
index fff89117ce..0000000000
--- a/packages/client/src/components/MkWidgets.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-<div class="vjoppmmu">
-	<template v-if="edit">
-		<header>
-			<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" class="mk-widget-select">
-				<template #label>{{ i18n.ts.selectWidget }}</template>
-				<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
-			</MkSelect>
-			<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
-			<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
-		</header>
-		<Sortable
-			:model-value="props.widgets"
-			item-key="id"
-			handle=".handle"
-			:animation="150"
-			@update:model-value="v => emit('updateWidgets', v)"
-		>
-			<template #item="{element}">
-				<div class="customize-container">
-					<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button>
-					<button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="ti ti-x"></i></button>
-					<div class="handle">
-						<component :is="`mkw-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :widget="element" @update-props="updateWidget(element.id, $event)"/>
-					</div>
-				</div>
-			</template>
-		</Sortable>
-	</template>
-	<component :is="`mkw-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" class="widget" :widget="widget" @update-props="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, reactive, ref, computed } from 'vue';
-import { v4 as uuid } from 'uuid';
-import MkSelect from '@/components/form/select.vue';
-import MkButton from '@/components/MkButton.vue';
-import { widgets as widgetDefs } from '@/widgets';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { deepClone } from '@/scripts/clone';
-
-const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
-
-type Widget = {
-	name: string;
-	id: string;
-	data: Record<string, any>;
-};
-
-const props = defineProps<{
-	widgets: Widget[];
-	edit: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'updateWidgets', widgets: Widget[]): void;
-	(ev: 'addWidget', widget: Widget): void;
-	(ev: 'removeWidget', widget: Widget): void;
-	(ev: 'updateWidget', widget: Partial<Widget>): void;
-	(ev: 'exit'): void;
-}>();
-
-const widgetRefs = {};
-const configWidget = (id: string) => {
-	widgetRefs[id].configure();
-};
-const widgetAdderSelected = ref(null);
-const addWidget = () => {
-	if (widgetAdderSelected.value == null) return;
-
-	emit('addWidget', {
-		name: widgetAdderSelected.value,
-		id: uuid(),
-		data: {},
-	});
-
-	widgetAdderSelected.value = null;
-};
-const removeWidget = (widget) => {
-	emit('removeWidget', widget);
-};
-const updateWidget = (id, data) => {
-	emit('updateWidget', { id, data });
-};
-
-function onContextmenu(widget: Widget, 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;
-
-	os.contextMenu([{
-		type: 'label',
-		text: i18n.t(`_widgets.${widget.name}`),
-	}, {
-		icon: 'ti ti-settings',
-		text: i18n.ts.settings,
-		action: () => {
-			configWidget(widget.id);
-		},
-	}], ev);
-}
-</script>
-
-<style lang="scss" scoped>
-.vjoppmmu {
-	container-type: inline-size;
-
-	> header {
-		margin: 16px 0;
-
-		> * {
-			width: 100%;
-			padding: 4px;
-		}
-	}
-
-	> .widget, .customize-container {
-		contain: content;
-		margin: var(--margin) 0;
-
-		&:first-of-type {
-			margin-top: 0;
-		}
-	}
-
-	.customize-container {
-		position: relative;
-		cursor: move;
-
-		> .config,
-		> .remove {
-			position: absolute;
-			z-index: 10000;
-			top: 8px;
-			width: 32px;
-			height: 32px;
-			color: #fff;
-			background: rgba(#000, 0.7);
-			border-radius: 4px;
-		}
-
-		> .config {
-			right: 8px + 8px + 32px;
-		}
-
-		> .remove {
-			right: 8px;
-		}
-
-		> .handle {
-			> .widget {
-				pointer-events: none;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
deleted file mode 100644
index 629c105810..0000000000
--- a/packages/client/src/components/MkWindow.vue
+++ /dev/null
@@ -1,571 +0,0 @@
-<template>
-<transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
-	<div v-if="showing" ref="rootEl" class="ebkgocck" :class="{ maximized }">
-		<div class="body _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
-			<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
-				<span class="left">
-					<button v-for="button in buttonsLeft" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
-				</span>
-				<span class="title" @mousedown.prevent="onHeaderMousedown" @touchstart.prevent="onHeaderMousedown">
-					<slot name="header"></slot>
-				</span>
-				<span class="right">
-					<button v-for="button in buttonsRight" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
-					<button v-if="canResize && maximized" v-tooltip="i18n.ts.windowRestore" class="button _button" @click="unMaximize()"><i class="ti ti-picture-in-picture"></i></button>
-					<button v-else-if="canResize && !maximized" v-tooltip="i18n.ts.windowMaximize" class="button _button" @click="maximize()"><i class="ti ti-rectangle"></i></button>
-					<button v-if="closeButton" v-tooltip="i18n.ts.close" class="button _button" @click="close()"><i class="ti ti-x"></i></button>
-				</span>
-			</div>
-			<div class="body">
-				<slot></slot>
-			</div>
-		</div>
-		<template v-if="canResize">
-			<div class="handle top" @mousedown.prevent="onTopHandleMousedown"></div>
-			<div class="handle right" @mousedown.prevent="onRightHandleMousedown"></div>
-			<div class="handle bottom" @mousedown.prevent="onBottomHandleMousedown"></div>
-			<div class="handle left" @mousedown.prevent="onLeftHandleMousedown"></div>
-			<div class="handle top-left" @mousedown.prevent="onTopLeftHandleMousedown"></div>
-			<div class="handle top-right" @mousedown.prevent="onTopRightHandleMousedown"></div>
-			<div class="handle bottom-right" @mousedown.prevent="onBottomRightHandleMousedown"></div>
-			<div class="handle bottom-left" @mousedown.prevent="onBottomLeftHandleMousedown"></div>
-		</template>
-	</div>
-</transition>
-</template>
-
-<script lang="ts" setup>
-import { onBeforeUnmount, onMounted, provide } from 'vue';
-import contains from '@/scripts/contains';
-import * as os from '@/os';
-import { MenuItem } from '@/types/menu';
-import { i18n } from '@/i18n';
-
-const minHeight = 50;
-const minWidth = 250;
-
-function dragListen(fn: (ev: MouseEvent) => void) {
-	window.addEventListener('mousemove', fn);
-	window.addEventListener('touchmove', fn);
-	window.addEventListener('mouseleave', dragClear.bind(null, fn));
-	window.addEventListener('mouseup', dragClear.bind(null, fn));
-	window.addEventListener('touchend', dragClear.bind(null, fn));
-}
-
-function dragClear(fn) {
-	window.removeEventListener('mousemove', fn);
-	window.removeEventListener('touchmove', fn);
-	window.removeEventListener('mouseleave', dragClear);
-	window.removeEventListener('mouseup', dragClear);
-	window.removeEventListener('touchend', dragClear);
-}
-
-const props = withDefaults(defineProps<{
-	initialWidth?: number;
-	initialHeight?: number | null;
-	canResize?: boolean;
-	closeButton?: boolean;
-	mini?: boolean;
-	front?: boolean;
-	contextmenu?: MenuItem[] | null;
-	buttonsLeft?: any[];
-	buttonsRight?: any[];
-}>(), {
-	initialWidth: 400,
-	initialHeight: null,
-	canResize: false,
-	closeButton: true,
-	mini: false,
-	front: false,
-	contextmenu: null,
-	buttonsLeft: () => [],
-	buttonsRight: () => [],
-});
-
-const emit = defineEmits<{
-	(ev: 'closed'): void;
-}>();
-
-provide('inWindow', true);
-
-let rootEl = $ref<HTMLElement | null>();
-let showing = $ref(true);
-let beforeClickedAt = 0;
-let maximized = $ref(false);
-let unMaximizedTop = '';
-let unMaximizedLeft = '';
-let unMaximizedWidth = '';
-let unMaximizedHeight = '';
-
-function close() {
-	showing = false;
-}
-
-function onKeydown(evt) {
-	if (evt.which === 27) { // Esc
-		evt.preventDefault();
-		evt.stopPropagation();
-		close();
-	}
-}
-
-function onContextmenu(ev: MouseEvent) {
-	if (props.contextmenu) {
-		os.contextMenu(props.contextmenu, ev);
-	}
-}
-
-// 最前面へ移動
-function top() {
-	if (rootEl) {
-		rootEl.style.zIndex = os.claimZIndex(props.front ? 'middle' : 'low');
-	}
-}
-
-function maximize() {
-	maximized = true;
-	unMaximizedTop = rootEl.style.top;
-	unMaximizedLeft = rootEl.style.left;
-	unMaximizedWidth = rootEl.style.width;
-	unMaximizedHeight = rootEl.style.height;
-	rootEl.style.top = '0';
-	rootEl.style.left = '0';
-	rootEl.style.width = '100%';
-	rootEl.style.height = '100%';
-}
-
-function unMaximize() {
-	maximized = false;
-	rootEl.style.top = unMaximizedTop;
-	rootEl.style.left = unMaximizedLeft;
-	rootEl.style.width = unMaximizedWidth;
-	rootEl.style.height = unMaximizedHeight;
-}
-
-function onBodyMousedown() {
-	top();
-}
-
-function onDblClick() {
-	maximize();
-}
-
-function onHeaderMousedown(evt: MouseEvent) {
-	// 右クリックはコンテキストメニューを開こうとした可能性が高いため無視
-	if (evt.button === 2) return;
-
-	let beforeMaximized = false;
-
-	if (maximized) {
-		beforeMaximized = true;
-		unMaximize();
-	}
-
-	// ダブルクリック判定
-	if (Date.now() - beforeClickedAt < 300) {
-		beforeClickedAt = Date.now();
-		onDblClick();
-		return;
-	}
-
-	beforeClickedAt = Date.now();
-
-	const main = rootEl;
-	if (main == null) return;
-
-	if (!contains(main, document.activeElement)) main.focus();
-
-	const position = main.getBoundingClientRect();
-
-	const clickX = evt.touches && evt.touches.length > 0 ? evt.touches[0].clientX : evt.clientX;
-	const clickY = evt.touches && evt.touches.length > 0 ? evt.touches[0].clientY : evt.clientY;
-	const moveBaseX = beforeMaximized ? parseInt(unMaximizedWidth, 10) / 2 : clickX - position.left; // TODO: parseIntやめる
-	const moveBaseY = beforeMaximized ? 20 : clickY - position.top;
-	const browserWidth = window.innerWidth;
-	const browserHeight = window.innerHeight;
-	const windowWidth = main.offsetWidth;
-	const windowHeight = main.offsetHeight;
-
-	function move(x: number, y: number) {
-		let moveLeft = x - moveBaseX;
-		let moveTop = y - moveBaseY;
-
-		// 下はみ出し
-		if (moveTop + windowHeight > browserHeight) moveTop = browserHeight - windowHeight;
-
-		// 左はみ出し
-		if (moveLeft < 0) moveLeft = 0;
-
-		// 上はみ出し
-		if (moveTop < 0) moveTop = 0;
-
-		// 右はみ出し
-		if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
-
-		rootEl.style.left = moveLeft + 'px';
-		rootEl.style.top = moveTop + 'px';
-	}
-
-	if (beforeMaximized) {
-		move(clickX, clickY);
-	}
-
-	// 動かした時
-	dragListen(me => {
-		const x = me.touches && me.touches.length > 0 ? me.touches[0].clientX : me.clientX;
-		const y = me.touches && me.touches.length > 0 ? me.touches[0].clientY : me.clientY;
-
-		move(x, y);
-	});
-}
-
-// 上ハンドル掴み時
-function onTopHandleMousedown(evt) {
-	const main = rootEl;
-	// どういうわけかnullになることがある
-	if (main == null) return;
-
-	const base = evt.clientY;
-	const height = parseInt(getComputedStyle(main, '').height, 10);
-	const top = parseInt(getComputedStyle(main, '').top, 10);
-
-	// 動かした時
-	dragListen(me => {
-		const move = me.clientY - base;
-		if (top + move > 0) {
-			if (height + -move > minHeight) {
-				applyTransformHeight(height + -move);
-				applyTransformTop(top + move);
-			} else { // 最小の高さより小さくなろうとした時
-				applyTransformHeight(minHeight);
-				applyTransformTop(top + (height - minHeight));
-			}
-		} else { // 上のはみ出し時
-			applyTransformHeight(top + height);
-			applyTransformTop(0);
-		}
-	});
-}
-
-// 右ハンドル掴み時
-function onRightHandleMousedown(evt) {
-	const main = rootEl;
-	if (main == null) return;
-
-	const base = evt.clientX;
-	const width = parseInt(getComputedStyle(main, '').width, 10);
-	const left = parseInt(getComputedStyle(main, '').left, 10);
-	const browserWidth = window.innerWidth;
-
-	// 動かした時
-	dragListen(me => {
-		const move = me.clientX - base;
-		if (left + width + move < browserWidth) {
-			if (width + move > minWidth) {
-				applyTransformWidth(width + move);
-			} else { // 最小の幅より小さくなろうとした時
-				applyTransformWidth(minWidth);
-			}
-		} else { // 右のはみ出し時
-			applyTransformWidth(browserWidth - left);
-		}
-	});
-}
-
-// 下ハンドル掴み時
-function onBottomHandleMousedown(evt) {
-	const main = rootEl;
-	if (main == null) return;
-
-	const base = evt.clientY;
-	const height = parseInt(getComputedStyle(main, '').height, 10);
-	const top = parseInt(getComputedStyle(main, '').top, 10);
-	const browserHeight = window.innerHeight;
-
-	// 動かした時
-	dragListen(me => {
-		const move = me.clientY - base;
-		if (top + height + move < browserHeight) {
-			if (height + move > minHeight) {
-				applyTransformHeight(height + move);
-			} else { // 最小の高さより小さくなろうとした時
-				applyTransformHeight(minHeight);
-			}
-		} else { // 下のはみ出し時
-			applyTransformHeight(browserHeight - top);
-		}
-	});
-}
-
-// 左ハンドル掴み時
-function onLeftHandleMousedown(evt) {
-	const main = rootEl;
-	if (main == null) return;
-
-	const base = evt.clientX;
-	const width = parseInt(getComputedStyle(main, '').width, 10);
-	const left = parseInt(getComputedStyle(main, '').left, 10);
-
-	// 動かした時
-	dragListen(me => {
-		const move = me.clientX - base;
-		if (left + move > 0) {
-			if (width + -move > minWidth) {
-				applyTransformWidth(width + -move);
-				applyTransformLeft(left + move);
-			} else { // 最小の幅より小さくなろうとした時
-				applyTransformWidth(minWidth);
-				applyTransformLeft(left + (width - minWidth));
-			}
-		} else { // 左のはみ出し時
-			applyTransformWidth(left + width);
-			applyTransformLeft(0);
-		}
-	});
-}
-
-// 左上ハンドル掴み時
-function onTopLeftHandleMousedown(evt) {
-	onTopHandleMousedown(evt);
-	onLeftHandleMousedown(evt);
-}
-
-// 右上ハンドル掴み時
-function onTopRightHandleMousedown(evt) {
-	onTopHandleMousedown(evt);
-	onRightHandleMousedown(evt);
-}
-
-// 右下ハンドル掴み時
-function onBottomRightHandleMousedown(evt) {
-	onBottomHandleMousedown(evt);
-	onRightHandleMousedown(evt);
-}
-
-// 左下ハンドル掴み時
-function onBottomLeftHandleMousedown(evt) {
-	onBottomHandleMousedown(evt);
-	onLeftHandleMousedown(evt);
-}
-
-// 高さを適用
-function applyTransformHeight(height) {
-	if (height > window.innerHeight) height = window.innerHeight;
-	rootEl.style.height = height + 'px';
-}
-
-// 幅を適用
-function applyTransformWidth(width) {
-	if (width > window.innerWidth) width = window.innerWidth;
-	rootEl.style.width = width + 'px';
-}
-
-// Y座標を適用
-function applyTransformTop(top) {
-	rootEl.style.top = top + 'px';
-}
-
-// X座標を適用
-function applyTransformLeft(left) {
-	rootEl.style.left = left + 'px';
-}
-
-function onBrowserResize() {
-	const main = rootEl;
-	if (main == null) return;
-
-	const position = main.getBoundingClientRect();
-	const browserWidth = window.innerWidth;
-	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'; // 上はみ出し
-}
-
-onMounted(() => {
-	if (props.initialWidth) applyTransformWidth(props.initialWidth);
-	if (props.initialHeight) applyTransformHeight(props.initialHeight);
-
-	applyTransformTop((window.innerHeight / 2) - (rootEl.offsetHeight / 2));
-	applyTransformLeft((window.innerWidth / 2) - (rootEl.offsetWidth / 2));
-
-	// 他のウィンドウ内のボタンなどを押してこのウィンドウが開かれた場合、親が最前面になろうとするのでそれに隠されないようにする
-	top();
-
-	window.addEventListener('resize', onBrowserResize);
-});
-
-onBeforeUnmount(() => {
-	window.removeEventListener('resize', onBrowserResize);
-});
-
-defineExpose({
-	close,
-});
-</script>
-
-<style lang="scss" scoped>
-.window-enter-active, .window-leave-active {
-	transition: opacity 0.2s, transform 0.2s !important;
-}
-.window-enter-from, .window-leave-to {
-	pointer-events: none;
-	opacity: 0;
-	transform: scale(0.9);
-}
-
-.ebkgocck {
-	position: fixed;
-	top: 0;
-	left: 0;
-
-	> .body {
-		overflow: clip;
-		display: flex;
-		flex-direction: column;
-		contain: content;
-		width: 100%;
-		height: 100%;
-		border-radius: var(--radius);
-
-		> .header {
-			--height: 39px;
-
-			&.mini {
-				--height: 32px;
-			}
-
-			display: flex;
-			position: relative;
-			z-index: 1;
-			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%;
-			font-weight: bold;
-
-			> .left, > .right {
-				> .button {
-					height: var(--height);
-					width: var(--height);
-
-					&:hover {
-						color: var(--fgHighlighted);
-					}
-
-					&.highlighted {
-						color: var(--accent);
-					}
-				}
-			}
-
-			> .left {
-				margin-right: 16px;
-			}
-
-			> .right {
-				min-width: 16px;
-			}
-
-			> .title {
-				flex: 1;
-				position: relative;
-				line-height: var(--height);
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				cursor: move;
-			}
-		}
-
-		> .body {
-			flex: 1;
-			overflow: auto;
-			background: var(--panel);
-		}
-	}
-
-	> .handle {
-		$size: 8px;
-
-		position: absolute;
-
-		&.top {
-			top: -($size);
-			left: 0;
-			width: 100%;
-			height: $size;
-			cursor: ns-resize;
-		}
-
-		&.right {
-			top: 0;
-			right: -($size);
-			width: $size;
-			height: 100%;
-			cursor: ew-resize;
-		}
-
-		&.bottom {
-			bottom: -($size);
-			left: 0;
-			width: 100%;
-			height: $size;
-			cursor: ns-resize;
-		}
-
-		&.left {
-			top: 0;
-			left: -($size);
-			width: $size;
-			height: 100%;
-			cursor: ew-resize;
-		}
-
-		&.top-left {
-			top: -($size);
-			left: -($size);
-			width: $size * 2;
-			height: $size * 2;
-			cursor: nwse-resize;
-		}
-
-		&.top-right {
-			top: -($size);
-			right: -($size);
-			width: $size * 2;
-			height: $size * 2;
-			cursor: nesw-resize;
-		}
-
-		&.bottom-right {
-			bottom: -($size);
-			right: -($size);
-			width: $size * 2;
-			height: $size * 2;
-			cursor: nwse-resize;
-		}
-
-		&.bottom-left {
-			bottom: -($size);
-			left: -($size);
-			width: $size * 2;
-			height: $size * 2;
-			cursor: nesw-resize;
-		}
-	}
-
-	&.maximized {
-		> .body {
-			border-radius: 0;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/MkYoutubePlayer.vue b/packages/client/src/components/MkYoutubePlayer.vue
deleted file mode 100644
index 8cd481a39c..0000000000
--- a/packages/client/src/components/MkYoutubePlayer.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-<XWindow :initial-width="640" :initial-height="402" :can-resize="true" :close-button="true">
-	<template #header>
-		<i class="icon ti ti-brand-youtube" style="margin-right: 0.5em;"></i>
-		<span>{{ title ?? 'YouTube' }}</span>
-	</template>
-
-	<div class="poamfof">
-		<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-			<div v-if="player.url" class="player">
-				<iframe v-if="!fetching" :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
-			</div>
-		</transition>
-		<MkLoading v-if="fetching"/>
-		<MkError v-else-if="!player.url" @retry="ytFetch()"/>
-	</div>
-</XWindow>
-</template>
-
-<script lang="ts" setup>
-import XWindow from '@/components/MkWindow.vue';
-import { lang } from '@/config';
-
-const props = defineProps<{
-	url: string;
-}>();
-
-const requestUrl = new URL(props.url);
-
-let fetching = $ref(true);
-let title = $ref<string | null>(null);
-let player = $ref({
-	url: null,
-	width: null,
-	height: null,
-});
-
-const requestLang = (lang ?? 'ja-JP').replace('ja-KS', 'ja-JP');
-
-const ytFetch = (): void => {
-	fetching = true;
-	window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
-		res.json().then(info => {
-			if (info.url == null) return;
-			title = info.title;
-			fetching = false;
-			player = info.player;
-		});
-	});
-};
-
-ytFetch();
-
-</script>
-
-<style lang="scss">
-.poamfof {
-	position: relative;
-	overflow: hidden;
-	height: 100%;
-
-	.player {
-		position: absolute;
-		inset: 0;
-
-		iframe {
-			width: 100%;
-			height: 100%;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/form/checkbox.vue b/packages/client/src/components/form/checkbox.vue
deleted file mode 100644
index ba3b2dc146..0000000000
--- a/packages/client/src/components/form/checkbox.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-<div
-	class="ziffeoms"
-	:class="{ disabled, checked }"
->
-	<input
-		ref="input"
-		type="checkbox"
-		:disabled="disabled"
-		@keydown.enter="toggle"
-	>
-	<span ref="button" v-adaptive-border v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
-		<i class="check ti ti-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/MkRipple.vue';
-import { i18n } from '@/i18n';
-
-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/folder.vue b/packages/client/src/components/form/folder.vue
deleted file mode 100644
index 1256dfcbb4..0000000000
--- a/packages/client/src/components/form/folder.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-<div class="dwzlatin" :class="{ opened }">
-	<div class="header _button" @click="toggle">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot name="label"></slot></span>
-		<span class="right">
-			<span class="text"><slot name="suffix"></slot></span>
-			<i v-if="opened" class="ti ti-chevron-up icon"></i>
-			<i v-else class="ti ti-chevron-down icon"></i>
-		</span>
-	</div>
-	<KeepAlive>
-		<div v-if="openedAtLeastOnce" v-show="opened" class="body">
-			<MkSpacer :margin-min="14" :margin-max="22">
-				<slot></slot>
-			</MkSpacer>
-		</div>
-	</KeepAlive>
-</div>
-</template>
-
-<script lang="ts" setup>
-const props = withDefaults(defineProps<{
-	defaultOpen: boolean;
-}>(), {
-	defaultOpen: false,
-});
-
-let opened = $ref(props.defaultOpen);
-let openedAtLeastOnce = $ref(props.defaultOpen);
-
-const toggle = () => {
-	opened = !opened;
-	if (opened) {
-		openedAtLeastOnce = true;
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-.dwzlatin {
-	display: block;
-
-	> .header {
-		display: flex;
-		align-items: center;
-		width: 100%;
-		box-sizing: border-box;
-		padding: 10px 14px 10px 14px;
-		background: var(--buttonBg);
-		border-radius: 6px;
-
-		&:hover {
-			text-decoration: none;
-			background: var(--buttonHoverBg);
-		}
-
-		&.active {
-			color: var(--accent);
-			background: var(--buttonHoverBg);
-		}
-
-		> .icon {
-			margin-right: 0.75em;
-			flex-shrink: 0;
-			text-align: center;
-			opacity: 0.8;
-
-			&:empty {
-				display: none;
-
-				& + .text {
-					padding-left: 4px;
-				}
-			}
-		}
-
-		> .text {
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			padding-right: 12px;
-		}
-
-		> .right {
-			margin-left: auto;
-			opacity: 0.7;
-			white-space: nowrap;
-
-			> .text:not(:empty) {
-				margin-right: 0.75em;
-			}
-		}
-	}
-
-	> .body {
-		background: var(--panel);
-		border-radius: 0 0 6px 6px;
-	}
-
-	&.opened {
-		> .header {
-			border-radius: 6px 6px 0 0;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/form/input.vue b/packages/client/src/components/form/input.vue
deleted file mode 100644
index 939e9691a6..0000000000
--- a/packages/client/src/components/form/input.vue
+++ /dev/null
@@ -1,263 +0,0 @@
-<template>
-<div class="matxzzsk">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="input" :class="{ inline, disabled, focused }">
-		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
-		<input
-			ref="inputEl"
-			v-model="v"
-			v-adaptive-border
-			:type="type"
-			:disabled="disabled"
-			:required="required"
-			:readonly="readonly"
-			:placeholder="placeholder"
-			:pattern="pattern"
-			:autocomplete="autocomplete"
-			:spellcheck="spellcheck"
-			:step="step"
-			:list="id"
-			@focus="focused = true"
-			@blur="focused = false"
-			@keydown="onKeydown($event)"
-			@input="onInput"
-		>
-		<datalist v-if="datalist" :id="id">
-			<option v-for="data in datalist" :value="data"/>
-		</datalist>
-		<div ref="suffixEl" class="suffix"><slot name="suffix"></slot></div>
-	</div>
-	<div class="caption"><slot name="caption"></slot></div>
-
-	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import { debounce } from 'throttle-debounce';
-import MkButton from '@/components/MkButton.vue';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	modelValue: string | number;
-	type?: 'text' | 'number' | 'password' | 'email' | 'url' | 'date' | 'time' | 'search';
-	required?: boolean;
-	readonly?: boolean;
-	disabled?: boolean;
-	pattern?: string;
-	placeholder?: string;
-	autofocus?: boolean;
-	autocomplete?: boolean;
-	spellcheck?: boolean;
-	step?: any;
-	datalist?: string[];
-	inline?: boolean;
-	debounce?: boolean;
-	manualSave?: boolean;
-	small?: boolean;
-	large?: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'change', _ev: KeyboardEvent): void;
-	(ev: 'keydown', _ev: KeyboardEvent): void;
-	(ev: 'enter'): void;
-	(ev: 'update:modelValue', value: string | number): void;
-}>();
-
-const { modelValue, type, autofocus } = toRefs(props);
-const v = ref(modelValue.value);
-const id = Math.random().toString(); // TODO: uuid?
-const focused = ref(false);
-const changed = ref(false);
-const invalid = ref(false);
-const filled = computed(() => v.value !== '' && v.value != null);
-const inputEl = ref<HTMLElement>();
-const prefixEl = ref<HTMLElement>();
-const suffixEl = ref<HTMLElement>();
-const height =
-	props.small ? 36 :
-	props.large ? 40 :
-	38;
-
-const focus = () => inputEl.value.focus();
-const onInput = (ev: KeyboardEvent) => {
-	changed.value = true;
-	emit('change', ev);
-};
-const onKeydown = (ev: KeyboardEvent) => {
-	emit('keydown', ev);
-
-	if (ev.code === 'Enter') {
-		emit('enter');
-	}
-};
-
-const updated = () => {
-	changed.value = false;
-	if (type.value === 'number') {
-		emit('update:modelValue', parseFloat(v.value));
-	} else {
-		emit('update:modelValue', v.value);
-	}
-};
-
-const debouncedUpdated = debounce(1000, updated);
-
-watch(modelValue, newValue => {
-	v.value = newValue;
-});
-
-watch(v, newValue => {
-	if (!props.manualSave) {
-		if (props.debounce) {
-			debouncedUpdated();
-		} else {
-			updated();
-		}
-	}
-
-	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();
-		}
-	});
-});
-</script>
-
-<style lang="scss" scoped>
-.matxzzsk {
-	> .label {
-		font-size: 0.85em;
-		padding: 0 0 8px 0;
-		user-select: none;
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	> .caption {
-		font-size: 0.85em;
-		padding: 8px 0 0 0;
-		color: var(--fgTransparentWeak);
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	> .input {
-		position: relative;
-
-		> input {
-			appearance: none;
-			-webkit-appearance: none;
-			display: block;
-			height: v-bind("height + 'px'");
-			width: 100%;
-			margin: 0;
-			padding: 0 12px;
-			font: inherit;
-			font-weight: normal;
-			font-size: 1em;
-			color: var(--fg);
-			background: var(--panel);
-			border: solid 1px var(--panel);
-			border-radius: 6px;
-			outline: none;
-			box-shadow: none;
-			box-sizing: border-box;
-			transition: border-color 0.1s ease-out;
-
-			&:hover {
-				border-color: var(--inputBorderHover) !important;
-			}
-		}
-
-		> .prefix,
-		> .suffix {
-			display: flex;
-			align-items: center;
-			position: absolute;
-			z-index: 1;
-			top: 0;
-			padding: 0 12px;
-			font-size: 1em;
-			height: v-bind("height + 'px'");
-			pointer-events: none;
-
-			&:empty {
-				display: none;
-			}
-
-			> * {
-				display: inline-block;
-				min-width: 16px;
-				max-width: 150px;
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
-		}
-
-		> .prefix {
-			left: 0;
-			padding-right: 6px;
-		}
-
-		> .suffix {
-			right: 0;
-			padding-left: 6px;
-		}
-
-		&.inline {
-			display: inline-block;
-			margin: 0;
-		}
-
-		&.focused {
-			> input {
-				border-color: var(--accent) !important;
-				//box-shadow: 0 0 0 4px var(--focus);
-			}
-		}
-
-		&.disabled {
-			opacity: 0.7;
-
-			&, * {
-				cursor: not-allowed !important;
-			}
-		}
-	}
-
-	> .save {
-		margin: 8px 0 0 0;
-	}
-}
-</style>
diff --git a/packages/client/src/components/form/link.vue b/packages/client/src/components/form/link.vue
deleted file mode 100644
index a1775c0bdb..0000000000
--- a/packages/client/src/components/form/link.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-<div class="ffcbddfc" :class="{ inline }">
-	<a v-if="external" class="main _button" :href="to" target="_blank">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot></slot></span>
-		<span class="right">
-			<span class="text"><slot name="suffix"></slot></span>
-			<i class="ti ti-external-link icon"></i>
-		</span>
-	</a>
-	<MkA v-else class="main _button" :class="{ active }" :to="to" :behavior="behavior">
-		<span class="icon"><slot name="icon"></slot></span>
-		<span class="text"><slot></slot></span>
-		<span class="right">
-			<span class="text"><slot name="suffix"></slot></span>
-			<i class="ti ti-chevron-right icon"></i>
-		</span>
-	</MkA>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-
-const props = defineProps<{
-	to: string;
-	active?: boolean;
-	external?: boolean;
-	behavior?: null | 'window' | 'browser' | 'modalWindow';
-	inline?: boolean;
-}>();
-</script>
-
-<style lang="scss" scoped>
-.ffcbddfc {
-	display: block;
-
-	&.inline {
-		display: inline-block;
-	}
-
-	> .main {
-		display: flex;
-		align-items: center;
-		width: 100%;
-		box-sizing: border-box;
-		padding: 10px 14px;
-		background: var(--buttonBg);
-		border-radius: 6px;
-		font-size: 0.9em;
-
-		&:hover {
-			text-decoration: none;
-			background: var(--buttonHoverBg);
-		}
-
-		&.active {
-			color: var(--accent);
-			background: var(--buttonHoverBg);
-		}
-
-		> .icon {
-			margin-right: 0.75em;
-			flex-shrink: 0;
-			text-align: center;
-			color: var(--fgTransparentWeak);
-
-			&:empty {
-				display: none;
-
-				& + .text {
-					padding-left: 4px;
-				}
-			}
-		}
-
-		> .text {
-			flex-shrink: 1;
-			white-space: normal;
-			padding-right: 12px;
-			text-align: center;
-		}
-
-		> .right {
-			margin-left: auto;
-			opacity: 0.7;
-			white-space: nowrap;
-
-			> .text:not(:empty) {
-				margin-right: 0.75em;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/form/radio.vue b/packages/client/src/components/form/radio.vue
deleted file mode 100644
index fcf454c77a..0000000000
--- a/packages/client/src/components/form/radio.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-<div
-	v-adaptive-border
-	class="novjtctn"
-	:class="{ disabled, checked }"
-	:aria-checked="checked"
-	:aria-disabled="disabled"
-	@click="toggle"
->
-	<input
-		type="radio"
-		:disabled="disabled"
-	>
-	<span class="button">
-		<span></span>
-	</span>
-	<span class="label"><slot></slot></span>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-
-const props = defineProps<{
-	modelValue: any;
-	value: any;
-	disabled: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'update:modelValue', value: any): void;
-}>();
-
-let checked = $computed(() => props.modelValue === props.value);
-
-function toggle(): void {
-	if (props.disabled) return;
-	emit('update:modelValue', props.value);
-}
-</script>
-
-<style lang="scss" scoped>
-.novjtctn {
-	position: relative;
-	display: inline-block;
-	text-align: left;
-	cursor: pointer;
-	padding: 7px 10px;
-	min-width: 60px;
-	background-color: var(--panel);
-	background-clip: padding-box !important;
-	border: solid 1px var(--panel);
-	border-radius: 6px;
-	font-size: 90%;
-	transition: all 0.2s;
-
-	> * {
-		user-select: none;
-	}
-
-	&.disabled {
-		opacity: 0.6;
-
-		&, * {
-			cursor: not-allowed !important;
-		}
-	}
-
-	&:hover {
-		border-color: var(--inputBorderHover) !important;
-	}
-
-	&.checked {
-		background-color: var(--accentedBg) !important;
-		border-color: var(--accentedBg) !important;
-		color: var(--accent);
-
-		&, * {
-			cursor: default !important;
-		}
-
-		> .button {
-			border-color: var(--accent);
-
-			&:after {
-				background-color: var(--accent);
-				transform: scale(1);
-				opacity: 1;
-			}
-		}
-	}
-
-	> input {
-		position: absolute;
-		width: 0;
-		height: 0;
-		opacity: 0;
-		margin: 0;
-	}
-
-	> .button {
-		position: absolute;
-		width: 14px;
-		height: 14px;
-		background: none;
-		border: solid 2px var(--inputBorder);
-		border-radius: 100%;
-		transition: inherit;
-
-		&:after {
-			content: '';
-			display: block;
-			position: absolute;
-			top: 3px;
-			right: 3px;
-			bottom: 3px;
-			left: 3px;
-			border-radius: 100%;
-			opacity: 0;
-			transform: scale(0);
-			transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-		}
-	}
-
-	> .label {
-		margin-left: 28px;
-		display: block;
-		line-height: 20px;
-		cursor: pointer;
-	}
-}
-</style>
diff --git a/packages/client/src/components/form/radios.vue b/packages/client/src/components/form/radios.vue
deleted file mode 100644
index bde4a8fb00..0000000000
--- a/packages/client/src/components/form/radios.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-import { defineComponent, h } from 'vue';
-import MkRadio from './radio.vue';
-
-export default defineComponent({
-	components: {
-		MkRadio,
-	},
-	props: {
-		modelValue: {
-			required: false,
-		},
-	},
-	data() {
-		return {
-			value: this.modelValue,
-		};
-	},
-	watch: {
-		value() {
-			this.$emit('update:modelValue', this.value);
-		},
-	},
-	render() {
-		let options = this.$slots.default();
-		const label = this.$slots.label && this.$slots.label();
-		const caption = this.$slots.caption && this.$slots.caption();
-
-		// なぜかFragmentになることがあるため
-		if (options.length === 1 && options[0].props == null) options = options[0].children;
-
-		return h('div', {
-			class: 'novjtcto',
-		}, [
-			...(label ? [h('div', {
-				class: 'label',
-			}, [label])] : []),
-			h('div', {
-				class: 'body',
-			}, options.map(option => h(MkRadio, {
-				key: option.key,
-				value: option.props.value,
-				modelValue: this.value,
-				'onUpdate:modelValue': value => this.value = value,
-			}, option.children)),
-			),
-			...(caption ? [h('div', {
-				class: 'caption',
-			}, [caption])] : []),
-		]);
-	},
-});
-</script>
-
-<style lang="scss">
-.novjtcto {
-	> .label {
-		font-size: 0.85em;
-		padding: 0 0 8px 0;
-		user-select: none;
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	> .body {
-		display: flex;
-    gap: 12px;
-    flex-wrap: wrap;
-	}
-
-	> .caption {
-		font-size: 0.85em;
-		padding: 8px 0 0 0;
-		color: var(--fgTransparentWeak);
-
-		&:empty {
-			display: none;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue
deleted file mode 100644
index db21c35717..0000000000
--- a/packages/client/src/components/form/range.vue
+++ /dev/null
@@ -1,259 +0,0 @@
-<template>
-<div class="timctyfi" :class="{ disabled, easing }">
-	<div class="label"><slot name="label"></slot></div>
-	<div v-adaptive-border class="body">
-		<div ref="containerEl" class="container">
-			<div class="track">
-				<div class="highlight" :style="{ width: (steppedRawValue * 100) + '%' }"></div>
-			</div>
-			<div v-if="steps && showTicks" class="ticks">
-				<div v-for="i in (steps + 1)" class="tick" :style="{ left: (((i - 1) / steps) * 100) + '%' }"></div>
-			</div>
-			<div ref="thumbEl" v-tooltip="textConverter(finalValue)" class="thumb" :style="{ left: thumbPosition + 'px' }" @mousedown="onMousedown" @touchstart="onMousedown"></div>
-		</div>
-	</div>
-	<div class="caption"><slot name="caption"></slot></div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, watch } from 'vue';
-import * as os from '@/os';
-
-const props = withDefaults(defineProps<{
-	modelValue: number;
-	disabled?: boolean;
-	min: number;
-	max: number;
-	step?: number;
-	textConverter?: (value: number) => string,
-	showTicks?: boolean;
-	easing?: boolean;
-}>(), {
-	step: 1,
-	textConverter: (v) => v.toString(),
-	easing: false,
-});
-
-const emit = defineEmits<{
-	(ev: 'update:modelValue', value: number): void;
-}>();
-
-const containerEl = ref<HTMLElement>();
-const thumbEl = ref<HTMLElement>();
-
-const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
-const steppedRawValue = computed(() => {
-	if (props.step) {
-		const step = props.step / (props.max - props.min);
-		return (step * Math.round(rawValue.value / step));
-	} else {
-		return rawValue.value;
-	}
-});
-const finalValue = computed(() => {
-	if (Number.isInteger(props.step)) {
-		return Math.round((steppedRawValue.value * (props.max - props.min)) + props.min);
-	} else {
-		return (steppedRawValue.value * (props.max - props.min)) + props.min;
-	}
-});
-
-const thumbWidth = computed(() => {
-	if (thumbEl.value == null) return 0;
-	return thumbEl.value!.offsetWidth;
-});
-const thumbPosition = ref(0);
-const calcThumbPosition = () => {
-	if (containerEl.value == null) {
-		thumbPosition.value = 0;
-	} else {
-		thumbPosition.value = (containerEl.value.offsetWidth - thumbWidth.value) * steppedRawValue.value;
-	}
-};
-watch([steppedRawValue, containerEl], calcThumbPosition);
-
-let ro: ResizeObserver | undefined;
-
-onMounted(() => {
-	ro = new ResizeObserver((entries, observer) => {
-		calcThumbPosition();
-	});
-	ro.observe(containerEl.value);
-});
-
-onUnmounted(() => {
-	if (ro) ro.disconnect();
-});
-
-const steps = computed(() => {
-	if (props.step) {
-		return (props.max - props.min) / props.step;
-	} else {
-		return 0;
-	}
-});
-
-const onMousedown = (ev: MouseEvent | TouchEvent) => {
-	ev.preventDefault();
-
-	const tooltipShowing = ref(true);
-	os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
-		showing: tooltipShowing,
-		text: computed(() => {
-			return props.textConverter(finalValue.value);
-		}),
-		targetElement: thumbEl,
-	}, {}, 'closed');
-
-	const style = document.createElement('style');
-	style.appendChild(document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }'));
-	document.head.appendChild(style);
-
-	const onDrag = (ev: MouseEvent | TouchEvent) => {
-		ev.preventDefault();
-		const containerRect = containerEl.value!.getBoundingClientRect();
-		const pointerX = ev.touches && ev.touches.length > 0 ? ev.touches[0].clientX : ev.clientX;
-		const pointerPositionOnContainer = pointerX - (containerRect.left + (thumbWidth.value / 2));
-		rawValue.value = Math.min(1, Math.max(0, pointerPositionOnContainer / (containerEl.value!.offsetWidth - thumbWidth.value)));
-	};
-
-	let beforeValue = finalValue.value;
-
-	const onMouseup = () => {
-		document.head.removeChild(style);
-		tooltipShowing.value = false;
-		window.removeEventListener('mousemove', onDrag);
-		window.removeEventListener('touchmove', onDrag);
-		window.removeEventListener('mouseup', onMouseup);
-		window.removeEventListener('touchend', onMouseup);
-
-		// 値が変わってたら通知
-		if (beforeValue !== finalValue.value) {
-			emit('update:modelValue', finalValue.value);
-		}
-	};
-
-	window.addEventListener('mousemove', onDrag);
-	window.addEventListener('touchmove', onDrag);
-	window.addEventListener('mouseup', onMouseup, { once: true });
-	window.addEventListener('touchend', onMouseup, { once: true });
-};
-</script>
-
-<style lang="scss" scoped>
-@use "sass:math";
-
-.timctyfi {
-	position: relative;
-
-	> .label {
-		font-size: 0.85em;
-		padding: 0 0 8px 0;
-		user-select: none;
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	> .caption {
-		font-size: 0.85em;
-		padding: 8px 0 0 0;
-		color: var(--fgTransparentWeak);
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	$thumbHeight: 20px;
-	$thumbWidth: 20px;
-
-	> .body {
-		padding: 10px 12px;
-		background: var(--panel);
-		border: solid 1px var(--panel);
-		border-radius: 6px;
-
-		> .container {
-			position: relative;
-			height: $thumbHeight;
-
-			> .track {
-				position: absolute;
-				top: 0;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				margin: auto;
-				width: calc(100% - #{$thumbWidth});
-				height: 3px;
-				background: rgba(0, 0, 0, 0.1);
-				border-radius: 999px;
-				overflow: clip;
-
-				> .highlight {
-					position: absolute;
-					top: 0;
-					left: 0;
-					height: 100%;
-					background: var(--accent);
-					opacity: 0.5;
-				}
-			}
-
-			> .ticks {
-				$tickWidth: 3px;
-
-				position: absolute;
-				top: 0;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				margin: auto;
-				width: calc(100% - #{$thumbWidth});
-
-				> .tick {
-					position: absolute;
-					bottom: 0;
-					width: $tickWidth;
-					height: 3px;
-					margin-left: - math.div($tickWidth, 2);
-					background: var(--divider);
-					border-radius: 999px;
-				}
-			}
-
-			> .thumb {
-				position: absolute;
-				width: $thumbWidth;
-				height: $thumbHeight;
-				cursor: grab;
-				background: var(--accent);
-				border-radius: 999px;
-
-				&:hover {
-					background: var(--accentLighten);
-				}
-			}
-		}
-	}
-
-	&.easing {
-		> .body {
-			> .container {
-				> .track {
-					> .highlight {
-						transition: width 0.2s cubic-bezier(0,0,0,1);
-					}
-				}
-
-				> .thumb {
-					transition: left 0.2s cubic-bezier(0,0,0,1);
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/form/section.vue b/packages/client/src/components/form/section.vue
deleted file mode 100644
index c6e34ef1cc..0000000000
--- a/packages/client/src/components/form/section.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-<div class="vrtktovh _formBlock">
-	<div class="label"><slot name="label"></slot></div>
-	<div class="main _formRoot">
-		<slot></slot>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-</script>
-
-<style lang="scss" scoped>
-.vrtktovh {
-	border-top: solid 0.5px var(--divider);
-	border-bottom: solid 0.5px var(--divider);
-
-	& + .vrtktovh {
-		border-top: none;
-	}
-
-	&:first-child {
-		border-top: none;
-	}
-
-	&:last-child {
-		border-bottom: none;
-	}
-
-	> .label {
-		font-weight: bold;
-		margin: 1.5em 0 16px 0;
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	> .main {
-		margin: 1.5em 0;
-	}
-}
-</style>
diff --git a/packages/client/src/components/form/select.vue b/packages/client/src/components/form/select.vue
deleted file mode 100644
index eaf4b131cd..0000000000
--- a/packages/client/src/components/form/select.vue
+++ /dev/null
@@ -1,279 +0,0 @@
-<template>
-<div class="vblkjoeq">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div ref="container" class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick">
-		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
-		<select
-			ref="inputEl"
-			v-model="v"
-			v-adaptive-border
-			class="select"
-			:disabled="disabled"
-			:required="required"
-			:readonly="readonly"
-			:placeholder="placeholder"
-			@focus="focused = true"
-			@blur="focused = false"
-			@input="onInput"
-		>
-			<slot></slot>
-		</select>
-		<div ref="suffixEl" class="suffix"><i class="ti ti-chevron-down"></i></div>
-	</div>
-	<div class="caption"><slot name="caption"></slot></div>
-
-	<MkButton v-if="manualSave && changed" primary @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs, VNode, useSlots } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	modelValue: string;
-	required?: boolean;
-	readonly?: boolean;
-	disabled?: boolean;
-	placeholder?: string;
-	autofocus?: boolean;
-	inline?: boolean;
-	manualSave?: boolean;
-	small?: boolean;
-	large?: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'change', _ev: KeyboardEvent): void;
-	(ev: 'update:modelValue', value: string): void;
-}>();
-
-const slots = useSlots();
-
-const { modelValue, autofocus } = toRefs(props);
-const v = ref(modelValue.value);
-const focused = ref(false);
-const changed = ref(false);
-const invalid = ref(false);
-const filled = computed(() => v.value !== '' && v.value != null);
-const inputEl = ref(null);
-const prefixEl = ref(null);
-const suffixEl = ref(null);
-const container = ref(null);
-const height =
-	props.small ? 36 :
-	props.large ? 40 :
-	38;
-
-const focus = () => inputEl.value.focus();
-const onInput = (ev) => {
-	changed.value = true;
-	emit('change', ev);
-};
-
-const updated = () => {
-	changed.value = false;
-	emit('update:modelValue', v.value);
-};
-
-watch(modelValue, newValue => {
-	v.value = newValue;
-});
-
-watch(v, newValue => {
-	if (!props.manualSave) {
-		updated();
-	}
-
-	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();
-		}
-	});
-});
-
-const onClick = (ev: MouseEvent) => {
-	focused.value = true;
-
-	const menu = [];
-	let options = slots.default!();
-
-	const pushOption = (option: VNode) => {
-		menu.push({
-			text: option.children,
-			active: v.value === option.props.value,
-			action: () => {
-				v.value = option.props.value;
-			},
-		});
-	};
-
-	const scanOptions = (options: VNode[]) => {
-		for (const vnode of options) {
-			if (vnode.type === 'optgroup') {
-				const optgroup = vnode;
-				menu.push({
-					type: 'label',
-					text: optgroup.props.label,
-				});
-				scanOptions(optgroup.children);
-			} else if (Array.isArray(vnode.children)) { // 何故かフラグメントになってくることがある
-				const fragment = vnode;
-				scanOptions(fragment.children);
-			} else if (vnode.props == null) { // v-if で条件が false のときにこうなる
-				// nop?
-			} else {
-				const option = vnode;
-				pushOption(option);
-			}
-		}
-	};
-
-	scanOptions(options);
-
-	os.popupMenu(menu, container.value, {
-		width: container.value.offsetWidth,
-	}).then(() => {
-		focused.value = false;
-	});
-};
-</script>
-
-<style lang="scss" scoped>
-.vblkjoeq {
-	> .label {
-		font-size: 0.85em;
-		padding: 0 0 8px 0;
-		user-select: none;
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	> .caption {
-		font-size: 0.85em;
-		padding: 8px 0 0 0;
-		color: var(--fgTransparentWeak);
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	> .input {
-		position: relative;
-		cursor: pointer;
-
-		&:hover {
-			> .select {
-				border-color: var(--inputBorderHover) !important;
-			}
-		}
-
-		> .select {
-			appearance: none;
-			-webkit-appearance: none;
-			display: block;
-			height: v-bind("height + 'px'");
-			width: 100%;
-			margin: 0;
-			padding: 0 12px;
-			font: inherit;
-			font-weight: normal;
-			font-size: 1em;
-			color: var(--fg);
-			background: var(--panel);
-			border: solid 1px var(--panel);
-			border-radius: 6px;
-			outline: none;
-			box-shadow: none;
-			box-sizing: border-box;
-			cursor: pointer;
-			transition: border-color 0.1s ease-out;
-			pointer-events: none;
-			user-select: none;
-		}
-
-		> .prefix,
-		> .suffix {
-			display: flex;
-			align-items: center;
-			position: absolute;
-			z-index: 1;
-			top: 0;
-			padding: 0 12px;
-			font-size: 1em;
-			height: v-bind("height + 'px'");
-			pointer-events: none;
-
-			&:empty {
-				display: none;
-			}
-
-			> * {
-				display: inline-block;
-				min-width: 16px;
-				max-width: 150px;
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
-		}
-
-		> .prefix {
-			left: 0;
-			padding-right: 6px;
-		}
-
-		> .suffix {
-			right: 0;
-			padding-left: 6px;
-		}
-
-		&.inline {
-			display: inline-block;
-			margin: 0;
-		}
-
-		&.focused {
-			> select {
-				border-color: var(--accent) !important;
-			}
-		}
-
-		&.disabled {
-			opacity: 0.7;
-
-			&, * {
-				cursor: not-allowed !important;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/form/slot.vue b/packages/client/src/components/form/slot.vue
deleted file mode 100644
index 79ce8fe51f..0000000000
--- a/packages/client/src/components/form/slot.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-<div class="adhpbeou">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="content">
-		<slot></slot>
-	</div>
-	<div class="caption"><slot name="caption"></slot></div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-
-function focus() {
-	// TODO
-}
-</script>
-
-<style lang="scss" scoped>
-.adhpbeou {
-	> .label {
-		font-size: 0.85em;
-		padding: 0 0 8px 0;
-		user-select: none;
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	> .caption {
-		font-size: 0.85em;
-		padding: 8px 0 0 0;
-		color: var(--fgTransparentWeak);
-
-		&:empty {
-			display: none;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/form/split.vue b/packages/client/src/components/form/split.vue
deleted file mode 100644
index 301a8a84e5..0000000000
--- a/packages/client/src/components/form/split.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-<div class="terlnhxf _formBlock">
-	<slot></slot>
-</div>
-</template>
-
-<script lang="ts" setup>
-const props = withDefaults(defineProps<{
-	minWidth?: number;
-}>(), {
-	minWidth: 210,
-});
-
-const minWidth = props.minWidth + 'px';
-</script>
-
-<style lang="scss" scoped>
-.terlnhxf {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(v-bind('minWidth'), 1fr));
-	grid-gap: 12px;
-
-	> ::v-deep(*) {
-		margin: 0 !important;
-	}
-}
-</style>
diff --git a/packages/client/src/components/form/suspense.vue b/packages/client/src/components/form/suspense.vue
deleted file mode 100644
index 7efa501f27..0000000000
--- a/packages/client/src/components/form/suspense.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-	<div v-if="pending">
-		<MkLoading/>
-	</div>
-	<div v-else-if="resolved">
-		<slot :result="result"></slot>
-	</div>
-	<div v-else>
-		<div class="wszdbhzo">
-			<div><i class="ti ti-alert-triangle"></i> {{ $ts.somethingHappened }}</div>
-			<MkButton inline class="retry" @click="retry"><i class="ti ti-reload"></i> {{ $ts.retry }}</MkButton>
-		</div>
-	</div>
-</transition>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType, ref, watch } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-
-export default defineComponent({
-	components: {
-		MkButton,
-	},
-
-	props: {
-		p: {
-			type: Function as PropType<() => Promise<any>>,
-			required: true,
-		},
-	},
-
-	setup(props, context) {
-		const pending = ref(true);
-		const resolved = ref(false);
-		const rejected = ref(false);
-		const result = ref(null);
-
-		const process = () => {
-			if (props.p == null) {
-				return;
-			}
-			const promise = props.p();
-			pending.value = true;
-			resolved.value = false;
-			rejected.value = false;
-			promise.then((_result) => {
-				pending.value = false;
-				resolved.value = true;
-				result.value = _result;
-			});
-			promise.catch(() => {
-				pending.value = false;
-				rejected.value = true;
-			});
-		};
-
-		watch(() => props.p, () => {
-			process();
-		}, {
-			immediate: true,
-		});
-
-		const retry = () => {
-			process();
-		};
-
-		return {
-			pending,
-			resolved,
-			rejected,
-			result,
-			retry,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
-	transition: opacity 0.125s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-
-.wszdbhzo {
-	padding: 16px;
-	text-align: center;
-
-	> .retry {
-		margin-top: 16px;
-	}
-}
-</style>
diff --git a/packages/client/src/components/form/switch.vue b/packages/client/src/components/form/switch.vue
deleted file mode 100644
index 1ed00ae655..0000000000
--- a/packages/client/src/components/form/switch.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-<div
-	class="ziffeomt"
-	:class="{ disabled, checked }"
->
-	<input
-		ref="input"
-		type="checkbox"
-		:disabled="disabled"
-		@keydown.enter="toggle"
-	>
-	<span ref="button" v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
-		<div class="knob"></div>
-	</span>
-	<span class="label">
-		<!-- TODO: 無名slotの方は廃止 -->
-		<span @click="toggle"><slot name="label"></slot><slot></slot></span>
-		<p class="caption"><slot name="caption"></slot></p>
-	</span>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { toRefs, Ref } from 'vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-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) {
-
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-.ziffeomt {
-	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: 32px;
-		height: 23px;
-		outline: none;
-		background: var(--swutchOffBg);
-		background-clip: content-box;
-		border: solid 1px var(--swutchOffBg);
-		border-radius: 999px;
-		cursor: pointer;
-		transition: inherit;
-		user-select: none;
-
-		> .knob {
-			position: absolute;
-			top: 3px;
-			left: 3px;
-			width: 15px;
-			height: 15px;
-			background: var(--swutchOffFg);
-			border-radius: 999px;
-			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(--swutchOnBg) !important;
-			border-color: var(--swutchOnBg) !important;
-
-			> .knob {
-				left: 12px;
-				background: var(--swutchOnFg);
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
deleted file mode 100644
index d34d7b1775..0000000000
--- a/packages/client/src/components/form/textarea.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<template>
-<div class="adhpbeos">
-	<div class="label" @click="focus"><slot name="label"></slot></div>
-	<div class="input" :class="{ disabled, focused, tall, pre }">
-		<textarea
-			ref="inputEl"
-			v-model="v"
-			v-adaptive-border
-			:class="{ code, _monospace: code }"
-			:disabled="disabled"
-			:required="required"
-			:readonly="readonly"
-			:placeholder="placeholder"
-			:pattern="pattern"
-			:autocomplete="autocomplete"
-			:spellcheck="spellcheck"
-			@focus="focused = true"
-			@blur="focused = false"
-			@keydown="onKeydown($event)"
-			@input="onInput"
-		></textarea>
-	</div>
-	<div class="caption"><slot name="caption"></slot></div>
-
-	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
-import { debounce } from 'throttle-debounce';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
-
-export default defineComponent({
-	components: {
-		MkButton,
-	},
-
-	props: {
-		modelValue: {
-			required: true,
-		},
-		type: {
-			type: String,
-			required: false,
-		},
-		required: {
-			type: Boolean,
-			required: false,
-		},
-		readonly: {
-			type: Boolean,
-			required: false,
-		},
-		disabled: {
-			type: Boolean,
-			required: false,
-		},
-		pattern: {
-			type: String,
-			required: false,
-		},
-		placeholder: {
-			type: String,
-			required: false,
-		},
-		autofocus: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		autocomplete: {
-			required: false,
-		},
-		spellcheck: {
-			required: false,
-		},
-		code: {
-			type: Boolean,
-			required: false,
-		},
-		tall: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		pre: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		debounce: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		manualSave: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-
-	emits: ['change', 'keydown', 'enter', 'update:modelValue'],
-
-	setup(props, context) {
-		const { modelValue, autofocus } = toRefs(props);
-		const v = ref(modelValue.value);
-		const focused = ref(false);
-		const changed = ref(false);
-		const invalid = ref(false);
-		const filled = computed(() => v.value !== '' && v.value != null);
-		const inputEl = ref(null);
-
-		const focus = () => inputEl.value.focus();
-		const onInput = (ev) => {
-			changed.value = true;
-			context.emit('change', ev);
-		};
-		const onKeydown = (ev: KeyboardEvent) => {
-			context.emit('keydown', ev);
-
-			if (ev.code === 'Enter') {
-				context.emit('enter');
-			}
-		};
-
-		const updated = () => {
-			changed.value = false;
-			context.emit('update:modelValue', v.value);
-		};
-
-		const debouncedUpdated = debounce(1000, updated);
-
-		watch(modelValue, newValue => {
-			v.value = newValue;
-		});
-
-		watch(v, newValue => {
-			if (!props.manualSave) {
-				if (props.debounce) {
-					debouncedUpdated();
-				} else {
-					updated();
-				}
-			}
-
-			invalid.value = inputEl.value.validity.badInput;
-		});
-
-		onMounted(() => {
-			nextTick(() => {
-				if (autofocus.value) {
-					focus();
-				}
-			});
-		});
-
-		return {
-			v,
-			focused,
-			invalid,
-			changed,
-			filled,
-			inputEl,
-			focus,
-			onInput,
-			onKeydown,
-			updated,
-			i18n,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.adhpbeos {
-	> .label {
-		font-size: 0.85em;
-		padding: 0 0 8px 0;
-		user-select: none;
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	> .caption {
-		font-size: 0.85em;
-		padding: 8px 0 0 0;
-		color: var(--fgTransparentWeak);
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	> .input {
-		position: relative;
-
-		> textarea {
-			appearance: none;
-			-webkit-appearance: none;
-			display: block;
-			width: 100%;
-			min-width: 100%;
-			max-width: 100%;
-			min-height: 130px;
-			margin: 0;
-			padding: 12px;
-			font: inherit;
-			font-weight: normal;
-			font-size: 1em;
-			color: var(--fg);
-			background: var(--panel);
-			border: solid 1px var(--panel);
-			border-radius: 6px;
-			outline: none;
-			box-shadow: none;
-			box-sizing: border-box;
-			transition: border-color 0.1s ease-out;
-
-			&:hover {
-				border-color: var(--inputBorderHover) !important;
-			}
-		}
-
-		&.focused {
-			> textarea {
-				border-color: var(--accent) !important;
-			}
-		}
-
-		&.disabled {
-			opacity: 0.7;
-
-			&, * {
-				cursor: not-allowed !important;
-			}
-		}
-
-		&.tall {
-			> textarea {
-				min-height: 200px;
-			}
-		}
-
-		&.pre {
-			> textarea {
-				white-space: pre;
-			}
-		}
-	}
-
-	> .save {
-		margin: 8px 0 0 0;
-	}
-}
-</style>
diff --git a/packages/client/src/components/global/MkA.vue b/packages/client/src/components/global/MkA.vue
deleted file mode 100644
index 5a0ba0d8d3..0000000000
--- a/packages/client/src/components/global/MkA.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-<a :href="to" :class="active ? activeClass : null" @click.prevent="nav" @contextmenu.prevent.stop="onContextmenu">
-	<slot></slot>
-</a>
-</template>
-
-<script lang="ts" setup>
-import { inject } from 'vue';
-import * as os from '@/os';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { url } from '@/config';
-import { popout as popout_ } from '@/scripts/popout';
-import { i18n } from '@/i18n';
-import { useRouter } from '@/router';
-
-const props = withDefaults(defineProps<{
-	to: string;
-	activeClass?: null | string;
-	behavior?: null | 'window' | 'browser' | 'modalWindow';
-}>(), {
-	activeClass: null,
-	behavior: null,
-});
-
-const router = useRouter();
-
-const active = $computed(() => {
-	if (props.activeClass == null) return false;
-	const resolved = router.resolve(props.to);
-	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.route.name === router.currentRoute.value.name;
-});
-
-function onContextmenu(ev) {
-	const selection = window.getSelection();
-	if (selection && selection.toString() !== '') return;
-	os.contextMenu([{
-		type: 'label',
-		text: props.to,
-	}, {
-		icon: 'ti ti-app-window',
-		text: i18n.ts.openInWindow,
-		action: () => {
-			os.pageWindow(props.to);
-		},
-	}, {
-		icon: 'ti ti-player-eject',
-		text: i18n.ts.showInPage,
-		action: () => {
-			router.push(props.to, 'forcePage');
-		},
-	}, null, {
-		icon: 'ti ti-external-link',
-		text: i18n.ts.openInNewTab,
-		action: () => {
-			window.open(props.to, '_blank');
-		},
-	}, {
-		icon: 'ti ti-link',
-		text: i18n.ts.copyLink,
-		action: () => {
-			copyToClipboard(`${url}${props.to}`);
-		},
-	}], ev);
-}
-
-function openWindow() {
-	os.pageWindow(props.to);
-}
-
-function modalWindow() {
-	os.modalPageWindow(props.to);
-}
-
-function popout() {
-	popout_(props.to);
-}
-
-function nav(ev: MouseEvent) {
-	if (props.behavior === 'browser') {
-		location.href = props.to;
-		return;
-	}
-
-	if (props.behavior) {
-		if (props.behavior === 'window') {
-			return openWindow();
-		} else if (props.behavior === 'modalWindow') {
-			return modalWindow();
-		}
-	}
-
-	if (ev.shiftKey) {
-		return openWindow();
-	}
-
-	router.push(props.to, ev.ctrlKey ? 'forcePage' : null);
-}
-</script>
diff --git a/packages/client/src/components/global/MkAcct.vue b/packages/client/src/components/global/MkAcct.vue
deleted file mode 100644
index c3e806b5fb..0000000000
--- a/packages/client/src/components/global/MkAcct.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-<span class="mk-acct">
-	<span class="name">@{{ user.username }}</span>
-	<span v-if="user.host || detail || $store.state.showFullAcct" class="host">@{{ user.host || host }}</span>
-</span>
-</template>
-
-<script lang="ts" setup>
-import * as misskey from 'misskey-js';
-import { toUnicode } from 'punycode/';
-import { host as hostRaw } from '@/config';
-
-defineProps<{
-	user: misskey.entities.UserDetailed;
-	detail?: boolean;
-}>();
-
-const host = toUnicode(hostRaw);
-</script>
-
-<style lang="scss" scoped>
-.mk-acct {
-	> .host {
-		opacity: 0.5;
-	}
-}
-</style>
diff --git a/packages/client/src/components/global/MkAd.vue b/packages/client/src/components/global/MkAd.vue
deleted file mode 100644
index a80efb142c..0000000000
--- a/packages/client/src/components/global/MkAd.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-<div v-if="chosen" class="qiivuoyo">
-	<div v-if="!showMenu" class="main" :class="chosen.place">
-		<a :href="chosen.url" target="_blank">
-			<img :src="chosen.imageUrl">
-			<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="ti ti-info-circle info-circle"></span></button>
-		</a>
-	</div>
-	<div v-else class="menu">
-		<div class="body">
-			<div>Ads by {{ host }}</div>
-			<!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>-->
-			<MkButton v-if="chosen.ratio !== 0" class="button" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton>
-			<button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button>
-		</div>
-	</div>
-</div>
-<div v-else></div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { instance } from '@/instance';
-import { host } from '@/config';
-import MkButton from '@/components/MkButton.vue';
-import { defaultStore } from '@/store';
-import * as os from '@/os';
-
-type Ad = (typeof instance)['ads'][number];
-
-const props = defineProps<{
-	prefer: string[];
-	specify?: Ad;
-}>();
-
-const showMenu = ref(false);
-const toggleMenu = (): void => {
-	showMenu.value = !showMenu.value;
-};
-
-const choseAd = (): Ad | null => {
-	if (props.specify) {
-		return props.specify;
-	}
-
-	const allAds = instance.ads.map(ad => defaultStore.state.mutedAds.includes(ad.id) ? {
-		...ad,
-		ratio: 0,
-	} : ad);
-
-	let ads = allAds.filter(ad => props.prefer.includes(ad.place));
-
-	if (ads.length === 0) {
-		ads = allAds.filter(ad => ad.place === 'square');
-	}
-
-	const lowPriorityAds = ads.filter(ad => ad.ratio === 0);
-	ads = ads.filter(ad => ad.ratio !== 0);
-
-	if (ads.length === 0) {
-		if (lowPriorityAds.length !== 0) {
-			return lowPriorityAds[Math.floor(Math.random() * lowPriorityAds.length)];
-		} else {
-			return null;
-		}
-	}
-
-	const totalFactor = ads.reduce((a, b) => a + b.ratio, 0);
-	const r = Math.random() * totalFactor;
-
-	let stackedFactor = 0;
-	for (const ad of ads) {
-		if (r >= stackedFactor && r <= stackedFactor + ad.ratio) {
-			return ad;
-		} else {
-			stackedFactor += ad.ratio;
-		}
-	}
-
-	return null;
-};
-
-const chosen = ref(choseAd());
-
-function reduceFrequency(): void {
-	if (chosen.value == null) return;
-	if (defaultStore.state.mutedAds.includes(chosen.value.id)) return;
-	defaultStore.push('mutedAds', chosen.value.id);
-	os.success();
-	chosen.value = choseAd();
-	showMenu.value = false;
-}
-</script>
-
-<style lang="scss" scoped>
-.qiivuoyo {
-	background-size: auto auto;
-	background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--ad) 8px, var(--ad) 14px );
-
-	> .main {
-		text-align: center;
-
-		> a {
-			display: inline-block;
-			position: relative;
-			vertical-align: bottom;
-
-			&:hover {
-				> img {
-					filter: contrast(120%);
-				}
-			}
-
-			> img {
-				display: block;
-				object-fit: contain;
-				margin: auto;
-				border-radius: 5px;
-			}
-
-			> .menu {
-				position: absolute;
-				top: 1px;
-				right: 1px;
-
-				> .info-circle {
-					border: 3px solid var(--panel);
-					border-radius: 50%;
-					background: var(--panel);
-				}
-			}
-		}
-
-		&.square {
-			> a ,
-			> a > img {
-				max-width: min(300px, 100%);
-				max-height: 300px;
-			}
-		}
-
-		&.horizontal {
-			padding: 8px;
-
-			> a ,
-			> a > img {
-				max-width: min(600px, 100%);
-				max-height: 80px;
-			}
-		}
-
-		&.horizontal-big {
-			padding: 8px;
-
-			> a ,
-			> a > img {
-				max-width: min(600px, 100%);
-				max-height: 250px;
-			}
-		}
-
-		&.vertical {
-			> a ,
-			> a > img {
-				max-width: min(100px, 100%);
-			}
-		}
-	}
-
-	> .menu {
-		padding: 8px;
-		text-align: center;
-
-		> .body {
-			padding: 8px;
-			margin: 0 auto;
-			max-width: 400px;
-			border: solid 1px var(--divider);
-
-			> .button {
-				margin: 8px auto;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
deleted file mode 100644
index 5f3e3c176d..0000000000
--- a/packages/client/src/components/global/MkAvatar.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :title="acct(user)" @click="onClick">
-	<img class="inner" :src="url" decoding="async"/>
-	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
-</span>
-<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
-	<img class="inner" :src="url" decoding="async"/>
-	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
-</MkA>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, watch } from 'vue';
-import * as misskey from 'misskey-js';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
-import { acct, userPage } from '@/filters/user';
-import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue';
-import { defaultStore } from '@/store';
-
-const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
-	target?: string | null;
-	disableLink?: boolean;
-	disablePreview?: boolean;
-	showIndicator?: boolean;
-}>(), {
-	target: null,
-	disableLink: false,
-	disablePreview: false,
-	showIndicator: false,
-});
-
-const emit = defineEmits<{
-	(ev: 'click', v: MouseEvent): void;
-}>();
-
-const url = $computed(() => defaultStore.state.disableShowingAnimatedImages
-	? getStaticImageUrl(props.user.avatarUrl)
-	: props.user.avatarUrl);
-
-function onClick(ev: MouseEvent) {
-	emit('click', ev);
-}
-
-let color = $ref();
-
-watch(() => props.user.avatarBlurhash, () => {
-	color = extractAvgColorFromBlurhash(props.user.avatarBlurhash);
-}, {
-	immediate: true,
-});
-</script>
-
-<style lang="scss" scoped>
-@keyframes earwiggleleft {
-	from { transform: rotate(37.6deg) skew(30deg); }
-	25% { transform: rotate(10deg) skew(30deg); }
-	50% { transform: rotate(20deg) skew(30deg); }
-	75% { transform: rotate(0deg) skew(30deg); }
-	to { transform: rotate(37.6deg) skew(30deg); }
-}
-
-@keyframes earwiggleright {
-	from { transform: rotate(-37.6deg) skew(-30deg); }
-	30% { transform: rotate(-10deg) skew(-30deg); }
-	55% { transform: rotate(-20deg) skew(-30deg); }
-	75% { transform: rotate(0deg) skew(-30deg); }
-	to { transform: rotate(-37.6deg) skew(-30deg); }
-}
-
-.eiwwqkts {
-	position: relative;
-	display: inline-block;
-	vertical-align: bottom;
-	flex-shrink: 0;
-	border-radius: 100%;
-	line-height: 16px;
-
-	> .inner {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		top: 0;
-		border-radius: 100%;
-		z-index: 1;
-		overflow: hidden;
-		object-fit: cover;
-		width: 100%;
-		height: 100%;
-	}
-
-	> .indicator {
-		position: absolute;
-		z-index: 1;
-		bottom: 0;
-		left: 0;
-		width: 20%;
-		height: 20%;
-	}
-
-	&.square {
-		border-radius: 20%;
-
-		> .inner {
-			border-radius: 20%;
-		}
-	}
-
-	&.cat {
-		&:before, &:after {
-			background: #df548f;
-			border: solid 4px currentColor;
-			box-sizing: border-box;
-			content: '';
-			display: inline-block;
-			height: 50%;
-			width: 50%;
-		}
-
-		&:before {
-			border-radius: 0 75% 75%;
-			transform: rotate(37.5deg) skew(30deg);
-		}
-
-		&:after {
-			border-radius: 75% 0 75% 75%;
-			transform: rotate(-37.5deg) skew(-30deg);
-		}
-
-		&:hover {
-			&:before {
-				animation: earwiggleleft 1s infinite;
-			}
-
-			&:after {
-				animation: earwiggleright 1s infinite;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/global/MkEllipsis.vue b/packages/client/src/components/global/MkEllipsis.vue
deleted file mode 100644
index 0a46f486d6..0000000000
--- a/packages/client/src/components/global/MkEllipsis.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-	<span class="mk-ellipsis">
-		<span>.</span><span>.</span><span>.</span>
-	</span>
-</template>
-
-<style lang="scss" scoped>
-.mk-ellipsis {
-	> span {
-		animation: ellipsis 1.4s infinite ease-in-out both;
-
-		&:nth-child(1) {
-			animation-delay: 0s;
-		}
-
-		&:nth-child(2) {
-			animation-delay: 0.16s;
-		}
-
-		&:nth-child(3) {
-			animation-delay: 0.32s;
-		}
-	}
-}
-
-@keyframes ellipsis {
-	0%, 80%, 100% {
-		opacity: 1;
-	}
-	40% {
-		opacity: 0;
-	}
-}
-</style>
diff --git a/packages/client/src/components/global/MkEmoji.vue b/packages/client/src/components/global/MkEmoji.vue
deleted file mode 100644
index ce1299a39f..0000000000
--- a/packages/client/src/components/global/MkEmoji.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<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" decoding="async" @pointerenter="computeTitle"/>
-<span v-else-if="char && useOsNativeEmojis" :alt="alt" @pointerenter="computeTitle">{{ char }}</span>
-<span v-else>{{ emoji }}</span>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { CustomEmoji } from 'misskey-js/built/entities';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
-import { defaultStore } from '@/store';
-import { instance } from '@/instance';
-import { getEmojiName } from '@/scripts/emojilist';
-
-const props = defineProps<{
-	emoji: string;
-	normal?: boolean;
-	noStyle?: boolean;
-	customEmojis?: CustomEmoji[];
-	isReaction?: boolean;
-}>();
-
-const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
-
-const isCustom = computed(() => props.emoji.startsWith(':'));
-const char = computed(() => isCustom.value ? undefined : props.emoji);
-const useOsNativeEmojis = computed(() => defaultStore.state.emojiStyle === 'native' && !props.isReaction);
-const ce = computed(() => props.customEmojis ?? instance.emojis ?? []);
-const customEmoji = computed(() => isCustom.value ? ce.value.find(x => x.name === props.emoji.substr(1, props.emoji.length - 2)) : undefined);
-const url = computed(() => {
-	if (char.value) {
-		return char2path(char.value);
-	} else {
-		const rawUrl = (customEmoji.value as CustomEmoji).url;
-		return defaultStore.state.disableShowingAnimatedImages
-			? getStaticImageUrl(rawUrl)
-			: rawUrl;
-	}
-});
-const alt = computed(() => customEmoji.value ? `:${customEmoji.value.name}:` : char.value);
-
-// Searching from an array with 2000 items for every emoji felt like too energy-consuming, so I decided to do it lazily on pointerenter
-function computeTitle(event: PointerEvent): void {
-	const title = customEmoji.value
-		? `:${customEmoji.value.name}:`
-		: (getEmojiName(char.value as string) ?? char.value as string);
-	(event.target as HTMLElement).title = title;
-}
-</script>
-
-<style lang="scss" scoped>
-.mk-emoji {
-	height: 1.25em;
-	vertical-align: -0.25em;
-
-	&.custom {
-		height: 2.5em;
-		vertical-align: middle;
-		transition: transform 0.2s ease;
-
-		&:hover {
-			transform: scale(1.2);
-		}
-
-		&.normal {
-			height: 1.25em;
-			vertical-align: -0.25em;
-
-			&:hover {
-				transform: none;
-			}
-		}
-	}
-
-	&.noStyle {
-		height: auto !important;
-	}
-}
-</style>
diff --git a/packages/client/src/components/global/MkError.vue b/packages/client/src/components/global/MkError.vue
deleted file mode 100644
index e135d4184b..0000000000
--- a/packages/client/src/components/global/MkError.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-<transition :name="$store.state.animation ? 'zoom' : ''" appear>
-	<div class="mjndxjcg">
-		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
-		<p><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
-		<MkButton class="button" @click="() => $emit('retry')">{{ i18n.ts.retry }}</MkButton>
-	</div>
-</transition>
-</template>
-
-<script lang="ts" setup>
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
-</script>
-
-<style lang="scss" scoped>
-.mjndxjcg {
-	padding: 32px;
-	text-align: center;
-
-	> p {
-		margin: 0 0 8px 0;
-	}
-
-	> .button {
-		margin: 0 auto;
-	}
-
-	> img {
-		vertical-align: bottom;
-		height: 128px;
-		margin-bottom: 16px;
-		border-radius: 16px;
-	}
-}
-</style>
diff --git a/packages/client/src/components/global/MkLoading.vue b/packages/client/src/components/global/MkLoading.vue
deleted file mode 100644
index 64e12e3b44..0000000000
--- a/packages/client/src/components/global/MkLoading.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-<div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini, [$style.em]: em }]">
-	<div :class="$style.container">
-		<svg :class="[$style.spinner, $style.bg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
-			<g transform="matrix(1.125,0,0,1.125,12,12)">
-				<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
-			</g>
-		</svg>
-		<svg :class="[$style.spinner, $style.fg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
-			<g transform="matrix(1.125,0,0,1.125,12,12)">
-				<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
-			</g>
-		</svg>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-
-const props = withDefaults(defineProps<{
-	inline?: boolean;
-	colored?: boolean;
-	mini?: boolean;
-	em?: boolean;
-}>(), {
-	inline: false,
-	colored: true,
-	mini: false,
-	em: false,
-});
-</script>
-
-<style lang="scss" module>
-@keyframes spinner {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}
-
-.root {
-	padding: 32px;
-	text-align: center;
-	cursor: wait;
-
-	--size: 38px;
-
-	&.colored {
-		color: var(--accent);
-	}
-
-	&.inline {
-		display: inline;
-		padding: 0;
-		--size: 32px;
-	}
-
-	&.mini {
-		padding: 16px;
-		--size: 32px;
-	}
-
-	&.em {
-		display: inline-block;
-		vertical-align: middle;
-		padding: 0;
-		--size: 1em;
-	}
-}
-
-.container {
-	position: relative;
-	width: var(--size);
-	height: var(--size);
-	margin: 0 auto;
-}
-
-.spinner {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: var(--size);
-	height: var(--size);
-	fill-rule: evenodd;
-	clip-rule: evenodd;
-	stroke-linecap: round;
-	stroke-linejoin: round;
-	stroke-miterlimit: 1.5;
-}
-
-.bg {
-	opacity: 0.275;
-}
-
-.fg {
-	animation: spinner 0.5s linear infinite;
-}
-</style>
diff --git a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
deleted file mode 100644
index 70d0108e9f..0000000000
--- a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
+++ /dev/null
@@ -1,191 +0,0 @@
-<template>
-<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :customEmojis="customEmojis" :isNote="isNote" class="havbbuyv" :class="{ nowrap }"/>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MfmCore from '@/components/mfm';
-
-const props = withDefaults(defineProps<{
-	text: string;
-	plain?: boolean;
-	nowrap?: boolean;
-	author?: any;
-	customEmojis?: any;
-	isNote?: boolean;
-}>(), {
-	plain: false,
-	nowrap: false,
-	author: null,
-	isNote: true,
-});
-</script>
-
-<style lang="scss">
-._mfm_blur_ {
-	filter: blur(6px);
-	transition: filter 0.3s;
-
-	&:hover {
-		filter: blur(0px);
-	}
-}
-
-.mfm-x2 {
-	--mfm-zoom-size: 200%;
-}
-
-.mfm-x3 {
-	--mfm-zoom-size: 400%;
-}
-
-.mfm-x4 {
-	--mfm-zoom-size: 600%;
-}
-
-.mfm-x2, .mfm-x3, .mfm-x4 {
-	font-size: var(--mfm-zoom-size);
-
-	.mfm-x2, .mfm-x3, .mfm-x4 {
-		/* only half effective */
-		font-size: calc(var(--mfm-zoom-size) / 2 + 50%);
-
-		.mfm-x2, .mfm-x3, .mfm-x4 {
-			/* disabled */
-			font-size: 100%;
-		}
-	}
-}
-
-@keyframes mfm-spin {
-	0% { transform: rotate(0deg); }
-	100% { transform: rotate(360deg); }
-}
-
-@keyframes mfm-spinX {
-	0% { transform: perspective(128px) rotateX(0deg); }
-	100% { transform: perspective(128px) rotateX(360deg); }
-}
-
-@keyframes mfm-spinY {
-	0% { transform: perspective(128px) rotateY(0deg); }
-	100% { transform: perspective(128px) rotateY(360deg); }
-}
-
-@keyframes mfm-jump {
-	0% { transform: translateY(0); }
-	25% { transform: translateY(-16px); }
-	50% { transform: translateY(0); }
-	75% { transform: translateY(-8px); }
-	100% { transform: translateY(0); }
-}
-
-@keyframes mfm-bounce {
-	0% { transform: translateY(0) scale(1, 1); }
-	25% { transform: translateY(-16px) scale(1, 1); }
-	50% { transform: translateY(0) scale(1, 1); }
-	75% { transform: translateY(0) scale(1.5, 0.75); }
-	100% { transform: translateY(0) scale(1, 1); }
-}
-
-// const val = () => `translate(${Math.floor(Math.random() * 20) - 10}px, ${Math.floor(Math.random() * 20) - 10}px)`;
-// let css = '';
-// for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
-@keyframes mfm-twitch {
-	0% { transform: translate(7px, -2px) }
-	5% { transform: translate(-3px, 1px) }
-	10% { transform: translate(-7px, -1px) }
-	15% { transform: translate(0px, -1px) }
-	20% { transform: translate(-8px, 6px) }
-	25% { transform: translate(-4px, -3px) }
-	30% { transform: translate(-4px, -6px) }
-	35% { transform: translate(-8px, -8px) }
-	40% { transform: translate(4px, 6px) }
-	45% { transform: translate(-3px, 1px) }
-	50% { transform: translate(2px, -10px) }
-	55% { transform: translate(-7px, 0px) }
-	60% { transform: translate(-2px, 4px) }
-	65% { transform: translate(3px, -8px) }
-	70% { transform: translate(6px, 7px) }
-	75% { transform: translate(-7px, -2px) }
-	80% { transform: translate(-7px, -8px) }
-	85% { transform: translate(9px, 3px) }
-	90% { transform: translate(-3px, -2px) }
-	95% { transform: translate(-10px, 2px) }
-	100% { transform: translate(-2px, -6px) }
-}
-
-// const val = () => `translate(${Math.floor(Math.random() * 6) - 3}px, ${Math.floor(Math.random() * 6) - 3}px) rotate(${Math.floor(Math.random() * 24) - 12}deg)`;
-// let css = '';
-// for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
-@keyframes mfm-shake {
-	0% { transform: translate(-3px, -1px) rotate(-8deg) }
-	5% { transform: translate(0px, -1px) rotate(-10deg) }
-	10% { transform: translate(1px, -3px) rotate(0deg) }
-	15% { transform: translate(1px, 1px) rotate(11deg) }
-	20% { transform: translate(-2px, 1px) rotate(1deg) }
-	25% { transform: translate(-1px, -2px) rotate(-2deg) }
-	30% { transform: translate(-1px, 2px) rotate(-3deg) }
-	35% { transform: translate(2px, 1px) rotate(6deg) }
-	40% { transform: translate(-2px, -3px) rotate(-9deg) }
-	45% { transform: translate(0px, -1px) rotate(-12deg) }
-	50% { transform: translate(1px, 2px) rotate(10deg) }
-	55% { transform: translate(0px, -3px) rotate(8deg) }
-	60% { transform: translate(1px, -1px) rotate(8deg) }
-	65% { transform: translate(0px, -1px) rotate(-7deg) }
-	70% { transform: translate(-1px, -3px) rotate(6deg) }
-	75% { transform: translate(0px, -2px) rotate(4deg) }
-	80% { transform: translate(-2px, -1px) rotate(3deg) }
-	85% { transform: translate(1px, -3px) rotate(-10deg) }
-	90% { transform: translate(1px, 0px) rotate(3deg) }
-	95% { transform: translate(-2px, 0px) rotate(-3deg) }
-	100% { transform: translate(2px, 1px) rotate(2deg) }
-}
-
-@keyframes mfm-rubberBand {
-	from { transform: scale3d(1, 1, 1); }
-	30% { transform: scale3d(1.25, 0.75, 1); }
-	40% { transform: scale3d(0.75, 1.25, 1); }
-	50% { transform: scale3d(1.15, 0.85, 1); }
-	65% { transform: scale3d(0.95, 1.05, 1); }
-	75% { transform: scale3d(1.05, 0.95, 1); }
-	to { transform: scale3d(1, 1, 1); }
-}
-
-@keyframes mfm-rainbow {
-	0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
-	100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
-}
-</style>
-
-<style lang="scss" scoped>
-.havbbuyv {
-	white-space: pre-wrap;
-
-	&.nowrap {
-		white-space: pre;
-		word-wrap: normal; // https://codeday.me/jp/qa/20190424/690106.html
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	::v-deep(.quote) {
-		display: block;
-		margin: 8px;
-		padding: 6px 0 6px 12px;
-		color: var(--fg);
-		border-left: solid 3px var(--fg);
-		opacity: 0.7;
-	}
-
-	::v-deep(pre) {
-		font-size: 0.8em;
-	}
-
-	> ::v-deep(code) {
-		font-size: 0.8em;
-		word-break: break-all;
-		padding: 4px 6px;
-	}
-}
-</style>
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
deleted file mode 100644
index a228dfe883..0000000000
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ /dev/null
@@ -1,368 +0,0 @@
-<template>
-<div v-if="show" ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick">
-	<div v-if="narrow" class="buttons left">
-		<MkAvatar v-if="props.displayMyAvatar && $i" class="avatar" :user="$i" :disable-preview="true"/>
-	</div>
-	<template v-if="metadata">
-		<div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup">
-			<MkAvatar v-if="metadata.avatar" class="avatar" :user="metadata.avatar" :disable-preview="true" :show-indicator="true"/>
-			<i v-else-if="metadata.icon" 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.key === props.tab)?.title }}
-					<i class="chevron ti ti-chevron-down"></i>
-				</div>
-			</div>
-		</div>
-		<div v-if="!narrow || hideTitle" class="tabs">
-			<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = (el as HTMLElement)" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
-				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
-				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
-			</button>
-			<div ref="tabHighlightEl" class="highlight"></div>
-		</div>
-	</template>
-	<div class="buttons right">
-		<template v-for="action in actions">
-			<button v-tooltip.noDelay="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
-		</template>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref, inject, watch, nextTick } from 'vue';
-import tinycolor from 'tinycolor2';
-import { popupMenu } from '@/os';
-import { scrollToTop } from '@/scripts/scroll';
-import { globalEvents } from '@/events';
-import { injectPageMetadata } from '@/scripts/page-metadata';
-import { $i } from '@/account';
-
-type Tab = {
-	key: string;
-	title: string;
-	icon?: string;
-	iconOnly?: boolean;
-	onClick?: (ev: MouseEvent) => void;
-};
-
-const props = withDefaults(defineProps<{
-	tabs?: Tab[];
-	tab?: string;
-	actions?: {
-		text: string;
-		icon: string;
-		highlighted?: boolean;
-		handler: (ev: MouseEvent) => void;
-	}[];
-	thin?: boolean;
-	displayMyAvatar?: boolean;
-}>(), {
-	tabs: () => ([] as Tab[])
-});
-
-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 | undefined>(undefined);
-const tabRefs: Record<string, HTMLElement | null> = {};
-const tabHighlightEl = $ref<HTMLElement | null>(null);
-const bg = ref<string | undefined>(undefined);
-let narrow = $ref(false);
-const hasTabs = $computed(() => 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,
-		active: tab.key != null && tab.key === props.tab,
-		action: (ev) => {
-			onTabClick(tab, ev);
-		},
-	}));
-	popupMenu(menu, (ev.currentTarget ?? ev.target) as HTMLElement);
-};
-
-const preventDrag = (ev: TouchEvent) => {
-	ev.stopPropagation();
-};
-
-const onClick = () => {
-	if (el) {
-		scrollToTop(el as HTMLElement, { 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) {
-		ev.preventDefault();
-		ev.stopPropagation();
-		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);
-	tinyBg.setAlpha(0.85);
-	bg.value = tinyBg.toRgbString();
-};
-
-let ro: ResizeObserver | null;
-
-onMounted(() => {
-	calcBg();
-	globalEvents.on('themeChanged', calcBg);
-
-	watch(() => [props.tab, props.tabs], () => {
-		nextTick(() => {
-			const tabEl = props.tab ? tabRefs[props.tab] : undefined;
-			if (tabEl && tabHighlightEl && tabEl.parentElement) {
-				// 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) => {
-			if (el.parentElement && document.body.contains(el as HTMLElement)) {
-				narrow = el.parentElement.offsetWidth < 500;
-			}
-		});
-		ro.observe(el.parentElement as HTMLElement);
-	}
-});
-
-onUnmounted(() => {
-	globalEvents.off('themeChanged', calcBg);
-	if (ro) ro.disconnect();
-});
-</script>
-
-<style lang="scss" scoped>
-.fdidabkb {
-	--height: 52px;
-	display: flex;
-	width: 100%;
-	-webkit-backdrop-filter: var(--blur, blur(15px));
-	backdrop-filter: var(--blur, blur(15px));
-	border-bottom: solid 0.5px var(--divider);
-	contain: strict;
-	height: var(--height);
-
-	&.thin {
-		--height: 42px;
-
-		> .buttons {
-			> .button {
-				font-size: 0.9em;
-			}
-		}
-	}
-
-	&.slim {
-		text-align: center;
-
-		> .titleContainer {
-			flex: 1;
-			margin: 0 auto;
-
-			> *:first-child {
-				margin-left: auto;
-			}
-
-			> *:last-child {
-				margin-right: auto;
-			}
-		}
-	}
-
-	> .buttons {
-		--margin: 8px;
-		display: flex;
-    align-items: center;
-		min-width: var(--height);
-		height: var(--height);
-		margin: 0 var(--margin);
-
-		&.left {
-			margin-right: auto;
-
-			> .avatar {
-				$size: 32px;
-				display: inline-block;
-				width: $size;
-				height: $size;
-				vertical-align: bottom;
-				margin: 0 8px;
-				pointer-events: none;
-			}
-		}
-
-		&.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;
-			width: 16px;
-			text-align: center;
-		}
-
-		> .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 {
-		position: relative;
-		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;
-			}
-
-			> .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/components/global/MkSpacer.vue b/packages/client/src/components/global/MkSpacer.vue
deleted file mode 100644
index b3a42d77e7..0000000000
--- a/packages/client/src/components/global/MkSpacer.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-<div ref="root" :class="$style.root" :style="{ padding: margin + 'px' }">
-	<div ref="content" :class="$style.content">
-		<slot></slot>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { inject, onMounted, onUnmounted, ref } from 'vue';
-import { deviceKind } from '@/scripts/device-kind';
-
-const props = withDefaults(defineProps<{
-	contentMax?: number | null;
-	marginMin?: number;
-	marginMax?: number;
-}>(), {
-	contentMax: null,
-	marginMin: 12,
-	marginMax: 24,
-});
-
-let ro: ResizeObserver;
-let root = $ref<HTMLElement>();
-let content = $ref<HTMLElement>();
-let margin = $ref(0);
-const widthHistory = [null, null] as [number | null, number | null];
-const heightHistory = [null, null] as [number | null, number | null];
-const shouldSpacerMin = inject('shouldSpacerMin', false);
-
-const adjust = (rect: { width: number; height: number; }) => {
-	if (shouldSpacerMin || deviceKind === 'smartphone') {
-		margin = props.marginMin;
-		return;
-	}
-
-	if (rect.width > (props.contentMax ?? 0) || (rect.width > 360 && window.innerWidth > 400)) {
-		margin = props.marginMax;
-	} else {
-		margin = props.marginMin;
-	}
-};
-
-onMounted(() => {
-	ro = new ResizeObserver((entries) => {
-		/* iOSが対応していない
-		adjust({
-			width: entries[0].borderBoxSize[0].inlineSize,
-			height: entries[0].borderBoxSize[0].blockSize,
-		});
-		*/
-
-		const width = root!.offsetWidth;
-		const height = root!.offsetHeight;
-
-		//#region Prevent infinite resizing
-		// https://github.com/misskey-dev/misskey/issues/9076
-		const pastWidth = widthHistory.pop();
-		widthHistory.unshift(width);
-		const pastHeight = heightHistory.pop();
-		heightHistory.unshift(height);
-
-
-		if (pastWidth === width && pastHeight === height) {
-			return;
-		}
-		//#endregion
-
-		adjust({
-			width,
-			height,
-		});
-	});
-	ro.observe(root!);
-
-	if (props.contentMax) {
-		content!.style.maxWidth = `${props.contentMax}px`;
-	}
-});
-
-onUnmounted(() => {
-	ro.disconnect();
-});
-</script>
-
-<style lang="scss" module>
-.root {
-	box-sizing: border-box;
-	width: 100%;
-}
-
-.content {
-	margin: 0 auto;
-	container-type: inline-size;
-}
-</style>
diff --git a/packages/client/src/components/global/MkStickyContainer.vue b/packages/client/src/components/global/MkStickyContainer.vue
deleted file mode 100644
index 44f4f065a6..0000000000
--- a/packages/client/src/components/global/MkStickyContainer.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-<div ref="rootEl">
-	<div ref="headerEl">
-		<slot name="header"></slot>
-	</div>
-	<div ref="bodyEl" :data-sticky-container-header-height="headerHeight">
-		<slot></slot>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-// なんか動かない
-//const CURRENT_STICKY_TOP = Symbol('CURRENT_STICKY_TOP');
-const CURRENT_STICKY_TOP = 'CURRENT_STICKY_TOP';
-</script>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, provide, inject, Ref, ref, watch } from 'vue';
-
-const rootEl = $ref<HTMLElement>();
-const headerEl = $ref<HTMLElement>();
-const bodyEl = $ref<HTMLElement>();
-
-let headerHeight = $ref<string | undefined>();
-let childStickyTop = $ref(0);
-const parentStickyTop = inject<Ref<number>>(CURRENT_STICKY_TOP, ref(0));
-provide(CURRENT_STICKY_TOP, $$(childStickyTop));
-
-const calc = () => {
-	childStickyTop = parentStickyTop.value + headerEl.offsetHeight;
-	headerHeight = headerEl.offsetHeight.toString();
-};
-
-const observer = new ResizeObserver(() => {
-	window.setTimeout(() => {
-		calc();
-	}, 100);
-});
-
-onMounted(() => {
-	calc();
-
-	watch(parentStickyTop, calc);
-
-	watch($$(childStickyTop), () => {
-		bodyEl.style.setProperty('--stickyTop', `${childStickyTop}px`);
-	}, {
-		immediate: true,
-	});
-
-	headerEl.style.position = 'sticky';
-	headerEl.style.top = 'var(--stickyTop, 0)';
-	headerEl.style.zIndex = '1000';
-
-	observer.observe(headerEl);
-});
-
-onUnmounted(() => {
-	observer.disconnect();
-});
-</script>
-
-<style lang="scss" module>
-
-</style>
diff --git a/packages/client/src/components/global/MkTime.vue b/packages/client/src/components/global/MkTime.vue
deleted file mode 100644
index f72b153f56..0000000000
--- a/packages/client/src/components/global/MkTime.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-<time :title="absolute">
-	<template v-if="mode === 'relative'">{{ relative }}</template>
-	<template v-else-if="mode === 'absolute'">{{ absolute }}</template>
-	<template v-else-if="mode === 'detail'">{{ absolute }} ({{ relative }})</template>
-</time>
-</template>
-
-<script lang="ts" setup>
-import { onUnmounted } from 'vue';
-import { i18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{
-	time: Date | string;
-	mode?: 'relative' | 'absolute' | 'detail';
-}>(), {
-	mode: 'relative',
-});
-
-const _time = typeof props.time === 'string' ? new Date(props.time) : props.time;
-const absolute = _time.toLocaleString();
-
-let now = $shallowRef(new Date());
-const relative = $computed(() => {
-	const ago = (now.getTime() - _time.getTime()) / 1000/*ms*/;
-	return (
-		ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: Math.round(ago / 31536000).toString() }) :
-		ago >= 2592000 ? i18n.t('_ago.monthsAgo', { n: Math.round(ago / 2592000).toString() }) :
-		ago >= 604800 ? i18n.t('_ago.weeksAgo', { n: Math.round(ago / 604800).toString() }) :
-		ago >= 86400 ? i18n.t('_ago.daysAgo', { n: Math.round(ago / 86400).toString() }) :
-		ago >= 3600 ? i18n.t('_ago.hoursAgo', { n: Math.round(ago / 3600).toString() }) :
-		ago >= 60 ? i18n.t('_ago.minutesAgo', { n: (~~(ago / 60)).toString() }) :
-		ago >= 10 ? i18n.t('_ago.secondsAgo', { n: (~~(ago % 60)).toString() }) :
-		ago >= -1 ? i18n.ts._ago.justNow :
-		i18n.ts._ago.future);
-});
-
-function tick() {
-	// TODO: パフォーマンス向上のため、このコンポーネントが画面内に表示されている場合のみ更新する
-	now = new Date();
-
-	tickId = window.setTimeout(() => {
-		window.requestAnimationFrame(tick);
-	}, 10000);
-}
-
-let tickId: number;
-
-if (props.mode === 'relative' || props.mode === 'detail') {
-	tickId = window.requestAnimationFrame(tick);
-
-	onUnmounted(() => {
-		window.cancelAnimationFrame(tickId);
-	});
-}
-</script>
diff --git a/packages/client/src/components/global/MkUrl.vue b/packages/client/src/components/global/MkUrl.vue
deleted file mode 100644
index 9f5be96224..0000000000
--- a/packages/client/src/components/global/MkUrl.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-<component
-	:is="self ? 'MkA' : 'a'" ref="el" class="ieqqeuvs _link" :[attr]="self ? props.url.substring(local.length) : props.url" :rel="rel" :target="target"
-	@contextmenu.stop="() => {}"
->
-	<template v-if="!self">
-		<span class="schema">{{ schema }}//</span>
-		<span class="hostname">{{ hostname }}</span>
-		<span v-if="port != ''" class="port">:{{ port }}</span>
-	</template>
-	<template v-if="pathname === '/' && self">
-		<span class="self">{{ hostname }}</span>
-	</template>
-	<span v-if="pathname != ''" class="pathname">{{ self ? pathname.substring(1) : pathname }}</span>
-	<span class="query">{{ query }}</span>
-	<span class="hash">{{ hash }}</span>
-	<i v-if="target === '_blank'" class="ti ti-external-link icon"></i>
-</component>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
-import { toUnicode as decodePunycode } from 'punycode/';
-import { url as local } from '@/config';
-import * as os from '@/os';
-import { useTooltip } from '@/scripts/use-tooltip';
-import { safeURIDecode } from '@/scripts/safe-uri-decode';
-
-const props = defineProps<{
-	url: string;
-	rel?: string;
-}>();
-
-const self = props.url.startsWith(local);
-const url = new URL(props.url);
-const el = ref();
-
-useTooltip(el, (showing) => {
-	os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
-		showing,
-		url: props.url,
-		source: el.value,
-	}, {}, 'closed');
-});
-
-const schema = url.protocol;
-const hostname = decodePunycode(url.hostname);
-const port = url.port;
-const pathname = safeURIDecode(url.pathname);
-const query = safeURIDecode(url.search);
-const hash = safeURIDecode(url.hash);
-const attr = self ? 'to' : 'href';
-const target = self ? null : '_blank';
-</script>
-
-<style lang="scss" scoped>
-.ieqqeuvs {
-	word-break: break-all;
-
-	> .icon {
-		padding-left: 2px;
-		font-size: .9em;
-	}
-
-	> .self {
-		font-weight: bold;
-	}
-
-	> .schema {
-		opacity: 0.5;
-	}
-
-	> .hostname {
-		font-weight: bold;
-	}
-
-	> .pathname {
-		opacity: 0.8;
-	}
-
-	> .query {
-		opacity: 0.5;
-	}
-
-	> .hash {
-		font-style: italic;
-	}
-}
-</style>
diff --git a/packages/client/src/components/global/MkUserName.vue b/packages/client/src/components/global/MkUserName.vue
deleted file mode 100644
index 090de3df30..0000000000
--- a/packages/client/src/components/global/MkUserName.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-<Mfm :text="user.name || user.username" :plain="true" :nowrap="nowrap" :custom-emojis="user.emojis"/>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'misskey-js';
-
-const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
-	nowrap?: boolean;
-}>(), {
-	nowrap: true,
-});
-</script>
diff --git a/packages/client/src/components/global/RouterView.vue b/packages/client/src/components/global/RouterView.vue
deleted file mode 100644
index e21a57471c..0000000000
--- a/packages/client/src/components/global/RouterView.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-<KeepAlive :max="defaultStore.state.numberOfPageCache">
-	<Suspense>
-		<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
-
-		<template #fallback>
-			<MkLoading/>
-		</template>
-	</Suspense>
-</KeepAlive>
-</template>
-
-<script lang="ts" setup>
-import { inject, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, watch } from 'vue';
-import { Resolved, Router } from '@/nirax';
-import { defaultStore } from '@/store';
-
-const props = defineProps<{
-	router?: Router;
-}>();
-
-const router = props.router ?? inject('router');
-
-if (router == null) {
-	throw new Error('no router provided');
-}
-
-const currentDepth = inject('routerCurrentDepth', 0);
-provide('routerCurrentDepth', currentDepth + 1);
-
-function resolveNested(current: Resolved, d = 0): Resolved | null {
-	if (d === currentDepth) {
-		return current;
-	} else {
-		if (current.child) {
-			return resolveNested(current.child, d + 1);
-		} else {
-			return null;
-		}
-	}
-}
-
-const current = resolveNested(router.current)!;
-let currentPageComponent = $shallowRef(current.route.component);
-let currentPageProps = $ref(current.props);
-let key = $ref(current.route.path + JSON.stringify(Object.fromEntries(current.props)));
-
-function onChange({ resolved, key: newKey }) {
-	const current = resolveNested(resolved);
-	if (current == null) return;
-	currentPageComponent = current.route.component;
-	currentPageProps = current.props;
-	key = current.route.path + JSON.stringify(Object.fromEntries(current.props));
-}
-
-router.addListener('change', onChange);
-
-onBeforeUnmount(() => {
-	router.removeListener('change', onChange);
-});
-</script>
diff --git a/packages/client/src/components/global/i18n.ts b/packages/client/src/components/global/i18n.ts
deleted file mode 100644
index 1fd293ba10..0000000000
--- a/packages/client/src/components/global/i18n.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { h, defineComponent } from 'vue';
-
-export default defineComponent({
-	props: {
-		src: {
-			type: String,
-			required: true,
-		},
-		tag: {
-			type: String,
-			required: false,
-			default: 'span',
-		},
-		textTag: {
-			type: String,
-			required: false,
-			default: null,
-		},
-	},
-	render() {
-		let str = this.src;
-		const parsed = [] as (string | { arg: string; })[];
-		while (true) {
-			const nextBracketOpen = str.indexOf('{');
-			const nextBracketClose = str.indexOf('}');
-
-			if (nextBracketOpen === -1) {
-				parsed.push(str);
-				break;
-			} else {
-				if (nextBracketOpen > 0) parsed.push(str.substr(0, nextBracketOpen));
-				parsed.push({
-					arg: str.substring(nextBracketOpen + 1, nextBracketClose),
-				});
-			}
-
-			str = str.substr(nextBracketClose + 1);
-		}
-
-		return h(this.tag, parsed.map(x => typeof x === 'string' ? (this.textTag ? h(this.textTag, x) : x) : this.$slots[x.arg]()));
-	},
-});
diff --git a/packages/client/src/components/index.ts b/packages/client/src/components/index.ts
deleted file mode 100644
index 8639257003..0000000000
--- a/packages/client/src/components/index.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { App } from 'vue';
-
-import Mfm from './global/MkMisskeyFlavoredMarkdown.vue';
-import MkA from './global/MkA.vue';
-import MkAcct from './global/MkAcct.vue';
-import MkAvatar from './global/MkAvatar.vue';
-import MkEmoji from './global/MkEmoji.vue';
-import MkUserName from './global/MkUserName.vue';
-import MkEllipsis from './global/MkEllipsis.vue';
-import MkTime from './global/MkTime.vue';
-import MkUrl from './global/MkUrl.vue';
-import I18n from './global/i18n';
-import RouterView from './global/RouterView.vue';
-import MkLoading from './global/MkLoading.vue';
-import MkError from './global/MkError.vue';
-import MkAd from './global/MkAd.vue';
-import MkPageHeader from './global/MkPageHeader.vue';
-import MkSpacer from './global/MkSpacer.vue';
-import MkStickyContainer from './global/MkStickyContainer.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);
-	app.component('MkAvatar', MkAvatar);
-	app.component('MkEmoji', MkEmoji);
-	app.component('MkUserName', MkUserName);
-	app.component('MkEllipsis', MkEllipsis);
-	app.component('MkTime', MkTime);
-	app.component('MkUrl', MkUrl);
-	app.component('MkLoading', MkLoading);
-	app.component('MkError', MkError);
-	app.component('MkAd', MkAd);
-	app.component('MkPageHeader', MkPageHeader);
-	app.component('MkSpacer', MkSpacer);
-	app.component('MkStickyContainer', MkStickyContainer);
-}
-
-declare module '@vue/runtime-core' {
-	export interface GlobalComponents {
-		I18n: typeof I18n;
-		RouterView: typeof RouterView;
-		Mfm: typeof Mfm;
-		MkA: typeof MkA;
-		MkAcct: typeof MkAcct;
-		MkAvatar: typeof MkAvatar;
-		MkEmoji: typeof MkEmoji;
-		MkUserName: typeof MkUserName;
-		MkEllipsis: typeof MkEllipsis;
-		MkTime: typeof MkTime;
-		MkUrl: typeof MkUrl;
-		MkLoading: typeof MkLoading;
-		MkError: typeof MkError;
-		MkAd: typeof MkAd;
-		MkPageHeader: typeof MkPageHeader;
-		MkSpacer: typeof MkSpacer;
-		MkStickyContainer: typeof MkStickyContainer;
-	}
-}
diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
deleted file mode 100644
index 5b5b1caae3..0000000000
--- a/packages/client/src/components/mfm.ts
+++ /dev/null
@@ -1,331 +0,0 @@
-import { VNode, defineComponent, h } from 'vue';
-import * as mfm from 'mfm-js';
-import MkUrl from '@/components/global/MkUrl.vue';
-import MkLink from '@/components/MkLink.vue';
-import MkMention from '@/components/MkMention.vue';
-import MkEmoji from '@/components/global/MkEmoji.vue';
-import { concat } from '@/scripts/array';
-import MkFormula from '@/components/MkFormula.vue';
-import MkCode from '@/components/MkCode.vue';
-import MkGoogle from '@/components/MkGoogle.vue';
-import MkSparkle from '@/components/MkSparkle.vue';
-import MkA from '@/components/global/MkA.vue';
-import { host } from '@/config';
-import { MFM_TAGS } from '@/scripts/mfm-tags';
-
-export default defineComponent({
-	props: {
-		text: {
-			type: String,
-			required: true,
-		},
-		plain: {
-			type: Boolean,
-			default: false,
-		},
-		nowrap: {
-			type: Boolean,
-			default: false,
-		},
-		author: {
-			type: Object,
-			default: null,
-		},
-		i: {
-			type: Object,
-			default: null,
-		},
-		customEmojis: {
-			required: false,
-		},
-		isNote: {
-			type: Boolean,
-			default: true,
-		},
-	},
-
-	render() {
-		if (this.text == null || this.text === '') return;
-
-		const ast = (this.plain ? mfm.parseSimple : mfm.parse)(this.text, { fnNameList: MFM_TAGS });
-
-		const validTime = (t: string | null | undefined) => {
-			if (t == null) return null;
-			return t.match(/^[0-9.]+s$/) ? t : null;
-		};
-
-		const genEl = (ast: mfm.MfmNode[]) => ast.map((token): VNode | string | (VNode | string)[] => {
-			switch (token.type) {
-				case 'text': {
-					const text = token.props.text.replace(/(\r\n|\n|\r)/g, '\n');
-
-					if (!this.plain) {
-						const res: (VNode | string)[] = [];
-						for (const t of text.split('\n')) {
-							res.push(h('br'));
-							res.push(t);
-						}
-						res.shift();
-						return res;
-					} else {
-						return [text.replace(/\n/g, ' ')];
-					}
-				}
-
-				case 'bold': {
-					return [h('b', genEl(token.children))];
-				}
-
-				case 'strike': {
-					return [h('del', genEl(token.children))];
-				}
-
-				case 'italic': {
-					return h('i', {
-						style: 'font-style: oblique;',
-					}, genEl(token.children));
-				}
-
-				case 'fn': {
-					// TODO: CSSを文字列で組み立てていくと token.props.args.~~~ 経由でCSSインジェクションできるのでよしなにやる
-					let style;
-					switch (token.props.name) {
-						case 'tada': {
-							const speed = validTime(token.props.args.speed) || '1s';
-							style = 'font-size: 150%;' + (this.$store.state.animatedMfm ? `animation: tada ${speed} linear infinite both;` : '');
-							break;
-						}
-						case 'jelly': {
-							const speed = validTime(token.props.args.speed) || '1s';
-							style = (this.$store.state.animatedMfm ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
-							break;
-						}
-						case 'twitch': {
-							const speed = validTime(token.props.args.speed) || '0.5s';
-							style = this.$store.state.animatedMfm ? `animation: mfm-twitch ${speed} ease infinite;` : '';
-							break;
-						}
-						case 'shake': {
-							const speed = validTime(token.props.args.speed) || '0.5s';
-							style = this.$store.state.animatedMfm ? `animation: mfm-shake ${speed} ease infinite;` : '';
-							break;
-						}
-						case 'spin': {
-							const direction =
-								token.props.args.left ? 'reverse' :
-								token.props.args.alternate ? 'alternate' :
-								'normal';
-							const anime =
-								token.props.args.x ? 'mfm-spinX' :
-								token.props.args.y ? 'mfm-spinY' :
-								'mfm-spin';
-							const speed = validTime(token.props.args.speed) || '1.5s';
-							style = this.$store.state.animatedMfm ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
-							break;
-						}
-						case 'jump': {
-							const speed = validTime(token.props.args.speed) || '0.75s';
-							style = this.$store.state.animatedMfm ? `animation: mfm-jump ${speed} linear infinite;` : '';
-							break;
-						}
-						case 'bounce': {
-							const speed = validTime(token.props.args.speed) || '0.75s';
-							style = this.$store.state.animatedMfm ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : '';
-							break;
-						}
-						case 'flip': {
-							const transform =
-								(token.props.args.h && token.props.args.v) ? 'scale(-1, -1)' :
-								token.props.args.v ? 'scaleY(-1)' :
-								'scaleX(-1)';
-							style = `transform: ${transform};`;
-							break;
-						}
-						case 'x2': {
-							return h('span', {
-								class: 'mfm-x2',
-							}, genEl(token.children));
-						}
-						case 'x3': {
-							return h('span', {
-								class: 'mfm-x3',
-							}, genEl(token.children));
-						}
-						case 'x4': {
-							return h('span', {
-								class: 'mfm-x4',
-							}, genEl(token.children));
-						}
-						case 'font': {
-							const family =
-								token.props.args.serif ? 'serif' :
-								token.props.args.monospace ? 'monospace' :
-								token.props.args.cursive ? 'cursive' :
-								token.props.args.fantasy ? 'fantasy' :
-								token.props.args.emoji ? 'emoji' :
-								token.props.args.math ? 'math' :
-								null;
-							if (family) style = `font-family: ${family};`;
-							break;
-						}
-						case 'blur': {
-							return h('span', {
-								class: '_mfm_blur_',
-							}, genEl(token.children));
-						}
-						case 'rainbow': {
-							const speed = validTime(token.props.args.speed) || '1s';
-							style = this.$store.state.animatedMfm ? `animation: mfm-rainbow ${speed} linear infinite;` : '';
-							break;
-						}
-						case 'sparkle': {
-							if (!this.$store.state.animatedMfm) {
-								return genEl(token.children);
-							}
-							return h(MkSparkle, {}, genEl(token.children));
-						}
-						case 'rotate': {
-							const degrees = parseInt(token.props.args.deg) || '90';
-							style = `transform: rotate(${degrees}deg); transform-origin: center center;`;
-							break;
-						}
-					}
-					if (style == null) {
-						return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']']);
-					} else {
-						return h('span', {
-							style: 'display: inline-block;' + style,
-						}, genEl(token.children));
-					}
-				}
-
-				case 'small': {
-					return [h('small', {
-						style: 'opacity: 0.7;',
-					}, genEl(token.children))];
-				}
-
-				case 'center': {
-					return [h('div', {
-						style: 'text-align:center;',
-					}, genEl(token.children))];
-				}
-
-				case 'url': {
-					return [h(MkUrl, {
-						key: Math.random(),
-						url: token.props.url,
-						rel: 'nofollow noopener',
-					})];
-				}
-
-				case 'link': {
-					return [h(MkLink, {
-						key: Math.random(),
-						url: token.props.url,
-						rel: 'nofollow noopener',
-					}, genEl(token.children))];
-				}
-
-				case 'mention': {
-					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,
-					})];
-				}
-
-				case 'hashtag': {
-					return [h(MkA, {
-						key: Math.random(),
-						to: this.isNote ? `/tags/${encodeURIComponent(token.props.hashtag)}` : `/explore/tags/${encodeURIComponent(token.props.hashtag)}`,
-						style: 'color:var(--hashtag);',
-					}, `#${token.props.hashtag}`)];
-				}
-
-				case 'blockCode': {
-					return [h(MkCode, {
-						key: Math.random(),
-						code: token.props.code,
-						lang: token.props.lang,
-					})];
-				}
-
-				case 'inlineCode': {
-					return [h(MkCode, {
-						key: Math.random(),
-						code: token.props.code,
-						inline: true,
-					})];
-				}
-
-				case 'quote': {
-					if (!this.nowrap) {
-						return [h('div', {
-							class: 'quote',
-						}, genEl(token.children))];
-					} else {
-						return [h('span', {
-							class: 'quote',
-						}, genEl(token.children))];
-					}
-				}
-
-				case 'emojiCode': {
-					return [h(MkEmoji, {
-						key: Math.random(),
-						emoji: `:${token.props.name}:`,
-						customEmojis: this.customEmojis,
-						normal: this.plain,
-					})];
-				}
-
-				case 'unicodeEmoji': {
-					return [h(MkEmoji, {
-						key: Math.random(),
-						emoji: token.props.emoji,
-						customEmojis: this.customEmojis,
-						normal: this.plain,
-					})];
-				}
-
-				case 'mathInline': {
-					return [h(MkFormula, {
-						key: Math.random(),
-						formula: token.props.formula,
-						block: false,
-					})];
-				}
-
-				case 'mathBlock': {
-					return [h(MkFormula, {
-						key: Math.random(),
-						formula: token.props.formula,
-						block: true,
-					})];
-				}
-
-				case 'search': {
-					return [h(MkGoogle, {
-						key: Math.random(),
-						q: token.props.query,
-					})];
-				}
-
-				case 'plain': {
-					return [h('span', genEl(token.children))];
-				}
-
-				default: {
-					// eslint-disable-next-line @typescript-eslint/no-explicit-any
-					console.error('unrecognized ast type:', (token as any).type);
-
-					return [];
-				}
-			}
-		}).flat(Infinity) as (VNode | string)[];
-
-		// Parse ast to DOM
-		return h('span', genEl(ast));
-	},
-});
diff --git a/packages/client/src/components/page/page.block.vue b/packages/client/src/components/page/page.block.vue
deleted file mode 100644
index f3e7764604..0000000000
--- a/packages/client/src/components/page/page.block.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-<component :is="'x-' + block.type" :key="block.id" :block="block" :hpml="hpml" :h="h"/>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import XText from './page.text.vue';
-import XSection from './page.section.vue';
-import XImage from './page.image.vue';
-import XButton from './page.button.vue';
-import XNumberInput from './page.number-input.vue';
-import XTextInput from './page.text-input.vue';
-import XTextareaInput from './page.textarea-input.vue';
-import XSwitch from './page.switch.vue';
-import XIf from './page.if.vue';
-import XTextarea from './page.textarea.vue';
-import XPost from './page.post.vue';
-import XCounter from './page.counter.vue';
-import XRadioButton from './page.radio-button.vue';
-import XCanvas from './page.canvas.vue';
-import XNote from './page.note.vue';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { Block } from '@/scripts/hpml/block';
-
-export default defineComponent({
-	components: {
-		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton, XCanvas, XNote,
-	},
-	props: {
-		block: {
-			type: Object as PropType<Block>,
-			required: true,
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true,
-		},
-		h: {
-			type: Number,
-			required: true,
-		},
-	},
-});
-</script>
diff --git a/packages/client/src/components/page/page.button.vue b/packages/client/src/components/page/page.button.vue
deleted file mode 100644
index 83931021d8..0000000000
--- a/packages/client/src/components/page/page.button.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-<div>
-	<MkButton class="kudkigyw" :primary="block.primary" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType, unref } from 'vue';
-import MkButton from '../MkButton.vue';
-import * as os from '@/os';
-import { ButtonBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-
-export default defineComponent({
-	components: {
-		MkButton,
-	},
-	props: {
-		block: {
-			type: Object as PropType<ButtonBlock>,
-			required: true,
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true,
-		},
-	},
-	methods: {
-		click() {
-			if (this.block.action === 'dialog') {
-				this.hpml.eval();
-				os.alert({
-					text: this.hpml.interpolate(this.block.content),
-				});
-			} else if (this.block.action === 'resetRandom') {
-				this.hpml.updateRandomSeed(Math.random());
-				this.hpml.eval();
-			} else if (this.block.action === 'pushEvent') {
-				os.api('page-push', {
-					pageId: this.hpml.page.id,
-					event: this.block.event,
-					...(this.block.var ? {
-						var: unref(this.hpml.vars)[this.block.var],
-					} : {}),
-				});
-
-				os.alert({
-					type: 'success',
-					text: this.hpml.interpolate(this.block.message),
-				});
-			} else if (this.block.action === 'callAiScript') {
-				this.hpml.callAiScript(this.block.fn);
-			}
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.kudkigyw {
-	display: inline-block;
-	min-width: 200px;
-	max-width: 450px;
-	margin: 8px 0;
-}
-</style>
diff --git a/packages/client/src/components/page/page.canvas.vue b/packages/client/src/components/page/page.canvas.vue
deleted file mode 100644
index 80f6c8339c..0000000000
--- a/packages/client/src/components/page/page.canvas.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-<div class="ysrxegms">
-	<canvas ref="canvas" :width="block.width" :height="block.height"/>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
-import * as os from '@/os';
-import { CanvasBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-
-export default defineComponent({
-	props: {
-		block: {
-			type: Object as PropType<CanvasBlock>,
-			required: true,
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true,
-		},
-	},
-	setup(props, ctx) {
-		const canvas: Ref<any> = ref(null);
-
-		onMounted(() => {
-			props.hpml.registerCanvas(props.block.name, canvas.value);
-		});
-
-		return {
-			canvas,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.ysrxegms {
-	display: inline-block;
-	vertical-align: bottom;
-	overflow: auto;
-	max-width: 100%;
-
-	> canvas {
-		display: block;
-	}
-}
-</style>
diff --git a/packages/client/src/components/page/page.counter.vue b/packages/client/src/components/page/page.counter.vue
deleted file mode 100644
index a9e1f41a54..0000000000
--- a/packages/client/src/components/page/page.counter.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-<div>
-	<MkButton class="llumlmnx" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkButton from '../MkButton.vue';
-import * as os from '@/os';
-import { CounterVarBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-
-export default defineComponent({
-	components: {
-		MkButton,
-	},
-	props: {
-		block: {
-			type: Object as PropType<CounterVarBlock>,
-			required: true,
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true,
-		},
-	},
-	setup(props, ctx) {
-		const value = computed(() => {
-			return props.hpml.vars.value[props.block.name];
-		});
-
-		function click() {
-			props.hpml.updatePageVar(props.block.name, value.value + (props.block.inc || 1));
-			props.hpml.eval();
-		}
-
-		return {
-			click,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.llumlmnx {
-	display: inline-block;
-	min-width: 300px;
-	max-width: 450px;
-	margin: 8px 0;
-}
-</style>
diff --git a/packages/client/src/components/page/page.if.vue b/packages/client/src/components/page/page.if.vue
deleted file mode 100644
index 372a15f0c6..0000000000
--- a/packages/client/src/components/page/page.if.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-<div v-show="hpml.vars.value[block.var]">
-	<XBlock v-for="child in block.children" :key="child.id" :block="child" :hpml="hpml" :h="h"/>
-</div>
-</template>
-
-<script lang="ts">
-import { IfBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { defineComponent, defineAsyncComponent, PropType } from 'vue';
-
-export default defineComponent({
-	components: {
-		XBlock: defineAsyncComponent(() => import('./page.block.vue')),
-	},
-	props: {
-		block: {
-			type: Object as PropType<IfBlock>,
-			required: true,
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true,
-		},
-		h: {
-			type: Number,
-			required: true,
-		},
-	},
-});
-</script>
diff --git a/packages/client/src/components/page/page.image.vue b/packages/client/src/components/page/page.image.vue
deleted file mode 100644
index 8ba70c5855..0000000000
--- a/packages/client/src/components/page/page.image.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-<div class="lzyxtsnt">
-	<ImgWithBlurhash v-if="image" :hash="image.blurhash" :src="image.url" :alt="image.comment" :title="image.comment" :cover="false"/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { defineComponent, PropType } from 'vue';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import * as os from '@/os';
-import { ImageBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-
-const props = defineProps<{
-	block: PropType<ImageBlock>,
-	hpml: PropType<Hpml>,
-}>();
-
-const image = props.hpml.page.attachedFiles.find(x => x.id === props.block.fileId);
-</script>
-
-<style lang="scss" scoped>
-.lzyxtsnt {
-	> img {
-		max-width: 100%;
-	}
-}
-</style>
diff --git a/packages/client/src/components/page/page.note.vue b/packages/client/src/components/page/page.note.vue
deleted file mode 100644
index 7d5c484a1b..0000000000
--- a/packages/client/src/components/page/page.note.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-<div class="voxdxuby">
-	<XNote v-if="note && !block.detailed" :key="note.id + ':normal'" v-model:note="note"/>
-	<XNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" v-model:note="note"/>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
-import XNote from '@/components/MkNote.vue';
-import XNoteDetailed from '@/components/MkNoteDetailed.vue';
-import * as os from '@/os';
-import { NoteBlock } from '@/scripts/hpml/block';
-
-export default defineComponent({
-	components: {
-		XNote,
-		XNoteDetailed,
-	},
-	props: {
-		block: {
-			type: Object as PropType<NoteBlock>,
-			required: true,
-		},
-	},
-	setup(props, ctx) {
-		const note: Ref<Record<string, any> | null> = ref(null);
-
-		onMounted(() => {
-			os.api('notes/show', { noteId: props.block.note })
-			.then(result => {
-				note.value = result;
-			});
-		});
-
-		return {
-			note,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.voxdxuby {
-	margin: 1em 0;
-}
-</style>
diff --git a/packages/client/src/components/page/page.number-input.vue b/packages/client/src/components/page/page.number-input.vue
deleted file mode 100644
index 50cf6d0770..0000000000
--- a/packages/client/src/components/page/page.number-input.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-<div>
-	<MkInput class="kudkigyw" :model-value="value" type="number" @update:model-value="updateValue($event)">
-		<template #label>{{ hpml.interpolate(block.text) }}</template>
-	</MkInput>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkInput from '../form/input.vue';
-import * as os from '@/os';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { NumberInputVarBlock } from '@/scripts/hpml/block';
-
-export default defineComponent({
-	components: {
-		MkInput,
-	},
-	props: {
-		block: {
-			type: Object as PropType<NumberInputVarBlock>,
-			required: true,
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true,
-		},
-	},
-	setup(props, ctx) {
-		const value = computed(() => {
-			return props.hpml.vars.value[props.block.name];
-		});
-
-		function updateValue(newValue) {
-			props.hpml.updatePageVar(props.block.name, newValue);
-			props.hpml.eval();
-		}
-
-		return {
-			value,
-			updateValue,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.kudkigyw {
-	display: inline-block;
-	min-width: 300px;
-	max-width: 450px;
-	margin: 8px 0;
-}
-</style>
diff --git a/packages/client/src/components/page/page.post.vue b/packages/client/src/components/page/page.post.vue
deleted file mode 100644
index 0ef50d65cd..0000000000
--- a/packages/client/src/components/page/page.post.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-<div class="ngbfujlo">
-	<MkTextarea :model-value="text" readonly style="margin: 0;"></MkTextarea>
-	<MkButton class="button" primary :disabled="posting || posted" @click="post()">
-		<i v-if="posted" class="ti ti-check"></i>
-		<i v-else class="ti ti-send"></i>
-	</MkButton>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import MkTextarea from '../form/textarea.vue';
-import MkButton from '../MkButton.vue';
-import { apiUrl } from '@/config';
-import * as os from '@/os';
-import { PostBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-
-export default defineComponent({
-	components: {
-		MkTextarea,
-		MkButton,
-	},
-	props: {
-		block: {
-			type: Object as PropType<PostBlock>,
-			required: true,
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true,
-		},
-	},
-	data() {
-		return {
-			text: this.hpml.interpolate(this.block.text),
-			posted: false,
-			posting: false,
-		};
-	},
-	watch: {
-		'hpml.vars': {
-			handler() {
-				this.text = this.hpml.interpolate(this.block.text);
-			},
-			deep: true,
-		},
-	},
-	methods: {
-		upload() {
-			const promise = new Promise((ok) => {
-				const canvas = this.hpml.canvases[this.block.canvasId];
-				canvas.toBlob(blob => {
-					const formData = new FormData();
-					formData.append('file', blob);
-					formData.append('i', this.$i.token);
-					if (this.$store.state.uploadFolder) {
-						formData.append('folderId', this.$store.state.uploadFolder);
-					}
-
-					window.fetch(apiUrl + '/drive/files/create', {
-						method: 'POST',
-						body: formData,
-					})
-						.then(response => response.json())
-						.then(f => {
-							ok(f);
-						});
-				});
-			});
-			os.promiseDialog(promise);
-			return promise;
-		},
-		async post() {
-			this.posting = true;
-			const file = this.block.attachCanvasImage ? await this.upload() : null;
-			os.apiWithDialog('notes/create', {
-				text: this.text === '' ? null : this.text,
-				fileIds: file ? [file.id] : undefined,
-			}).then(() => {
-				this.posted = true;
-			});
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.ngbfujlo {
-	position: relative;
-	padding: 32px;
-	border-radius: 6px;
-	box-shadow: 0 2px 8px var(--shadow);
-	z-index: 1;
-
-	> .button {
-		margin-top: 32px;
-	}
-
-	@media (max-width: 600px) {
-		padding: 16px;
-
-		> .button {
-			margin-top: 16px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/components/page/page.radio-button.vue b/packages/client/src/components/page/page.radio-button.vue
deleted file mode 100644
index b4d9e01a54..0000000000
--- a/packages/client/src/components/page/page.radio-button.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-<div>
-	<div>{{ hpml.interpolate(block.title) }}</div>
-	<MkRadio v-for="item in block.values" :key="item" :modelValue="value" :value="item" @update:model-value="updateValue($event)">{{ item }}</MkRadio>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkRadio from '../form/radio.vue';
-import * as os from '@/os';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { RadioButtonVarBlock } from '@/scripts/hpml/block';
-
-export default defineComponent({
-	components: {
-		MkRadio,
-	},
-	props: {
-		block: {
-			type: Object as PropType<RadioButtonVarBlock>,
-			required: true,
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true,
-		},
-	},
-	setup(props, ctx) {
-		const value = computed(() => {
-			return props.hpml.vars.value[props.block.name];
-		});
-
-		function updateValue(newValue: string) {
-			props.hpml.updatePageVar(props.block.name, newValue);
-			props.hpml.eval();
-		}
-
-		return {
-			value,
-			updateValue,
-		};
-	},
-});
-</script>
diff --git a/packages/client/src/components/page/page.section.vue b/packages/client/src/components/page/page.section.vue
deleted file mode 100644
index 630c1f5179..0000000000
--- a/packages/client/src/components/page/page.section.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-<section class="sdgxphyu">
-	<component :is="'h' + h">{{ block.title }}</component>
-
-	<div class="children">
-		<XBlock v-for="child in block.children" :key="child.id" :block="child" :hpml="hpml" :h="h + 1"/>
-	</div>
-</section>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent, PropType } from 'vue';
-import * as os from '@/os';
-import { SectionBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-
-export default defineComponent({
-	components: {
-		XBlock: defineAsyncComponent(() => import('./page.block.vue')),
-	},
-	props: {
-		block: {
-			type: Object as PropType<SectionBlock>,
-			required: true,
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true,
-		},
-		h: {
-			required: true,
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.sdgxphyu {
-	margin: 1.5em 0;
-
-	> h2 {
-		font-size: 1.35em;
-		margin: 0 0 0.5em 0;
-	}
-
-	> h3 {
-		font-size: 1em;
-		margin: 0 0 0.5em 0;
-	}
-
-	> h4 {
-		font-size: 1em;
-		margin: 0 0 0.5em 0;
-	}
-
-	> .children {
-		//padding 16px
-	}
-}
-</style>
diff --git a/packages/client/src/components/page/page.switch.vue b/packages/client/src/components/page/page.switch.vue
deleted file mode 100644
index 64dc4ff8aa..0000000000
--- a/packages/client/src/components/page/page.switch.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-<div class="hkcxmtwj">
-	<MkSwitch :model-value="value" @update:model-value="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkSwitch>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkSwitch from '../form/switch.vue';
-import * as os from '@/os';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { SwitchVarBlock } from '@/scripts/hpml/block';
-
-export default defineComponent({
-	components: {
-		MkSwitch,
-	},
-	props: {
-		block: {
-			type: Object as PropType<SwitchVarBlock>,
-			required: true,
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true,
-		},
-	},
-	setup(props, ctx) {
-		const value = computed(() => {
-			return props.hpml.vars.value[props.block.name];
-		});
-
-		function updateValue(newValue: boolean) {
-			props.hpml.updatePageVar(props.block.name, newValue);
-			props.hpml.eval();
-		}
-
-		return {
-			value,
-			updateValue,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.hkcxmtwj {
-	display: inline-block;
-	margin: 16px auto;
-
-	& + .hkcxmtwj {
-		margin-left: 16px;
-	}
-}
-</style>
diff --git a/packages/client/src/components/page/page.text-input.vue b/packages/client/src/components/page/page.text-input.vue
deleted file mode 100644
index 840649ece6..0000000000
--- a/packages/client/src/components/page/page.text-input.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-<div>
-	<MkInput class="kudkigyw" :model-value="value" type="text" @update:model-value="updateValue($event)">
-		<template #label>{{ hpml.interpolate(block.text) }}</template>
-	</MkInput>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkInput from '../form/input.vue';
-import * as os from '@/os';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { TextInputVarBlock } from '@/scripts/hpml/block';
-
-export default defineComponent({
-	components: {
-		MkInput,
-	},
-	props: {
-		block: {
-			type: Object as PropType<TextInputVarBlock>,
-			required: true,
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true,
-		},
-	},
-	setup(props, ctx) {
-		const value = computed(() => {
-			return props.hpml.vars.value[props.block.name];
-		});
-
-		function updateValue(newValue) {
-			props.hpml.updatePageVar(props.block.name, newValue);
-			props.hpml.eval();
-		}
-
-		return {
-			value,
-			updateValue,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.kudkigyw {
-	display: inline-block;
-	min-width: 300px;
-	max-width: 450px;
-	margin: 8px 0;
-}
-</style>
diff --git a/packages/client/src/components/page/page.text.vue b/packages/client/src/components/page/page.text.vue
deleted file mode 100644
index 689c484521..0000000000
--- a/packages/client/src/components/page/page.text.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-<div class="mrdgzndn">
-	<Mfm :key="text" :text="text" :is-note="false" :i="$i"/>
-	<MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url"/>
-</div>
-</template>
-
-<script lang="ts">
-import { TextBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { defineAsyncComponent, defineComponent, PropType } from 'vue';
-import * as mfm from 'mfm-js';
-import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
-
-export default defineComponent({
-	components: {
-		MkUrlPreview: defineAsyncComponent(() => import('@/components/MkUrlPreview.vue')),
-	},
-	props: {
-		block: {
-			type: Object as PropType<TextBlock>,
-			required: true,
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true,
-		},
-	},
-	data() {
-		return {
-			text: this.hpml.interpolate(this.block.text),
-		};
-	},
-	computed: {
-		urls(): string[] {
-			if (this.text) {
-				return extractUrlFromMfm(mfm.parse(this.text));
-			} else {
-				return [];
-			}
-		},
-	},
-	watch: {
-		'hpml.vars': {
-			handler() {
-				this.text = this.hpml.interpolate(this.block.text);
-			},
-			deep: true,
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.mrdgzndn {
-	&:not(:first-child) {
-		margin-top: 0.5em;
-	}
-
-	&:not(:last-child) {
-		margin-bottom: 0.5em;
-	}
-
-	> .url {
-		margin: 0.5em 0;
-	}
-}
-</style>
diff --git a/packages/client/src/components/page/page.textarea-input.vue b/packages/client/src/components/page/page.textarea-input.vue
deleted file mode 100644
index 507e1bd97b..0000000000
--- a/packages/client/src/components/page/page.textarea-input.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-<div>
-	<MkTextarea :model-value="value" @update:model-value="updateValue($event)">
-		<template #label>{{ hpml.interpolate(block.text) }}</template>
-	</MkTextarea>
-</div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-import MkTextarea from '../form/textarea.vue';
-import * as os from '@/os';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { HpmlTextInput } from '@/scripts/hpml';
-import { TextInputVarBlock } from '@/scripts/hpml/block';
-
-export default defineComponent({
-	components: {
-		MkTextarea,
-	},
-	props: {
-		block: {
-			type: Object as PropType<TextInputVarBlock>,
-			required: true,
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true,
-		},
-	},
-	setup(props, ctx) {
-		const value = computed(() => {
-			return props.hpml.vars.value[props.block.name];
-		});
-
-		function updateValue(newValue) {
-			props.hpml.updatePageVar(props.block.name, newValue);
-			props.hpml.eval();
-		}
-
-		return {
-			value,
-			updateValue,
-		};
-	},
-});
-</script>
diff --git a/packages/client/src/components/page/page.textarea.vue b/packages/client/src/components/page/page.textarea.vue
deleted file mode 100644
index f809925081..0000000000
--- a/packages/client/src/components/page/page.textarea.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-<MkTextarea :model-value="text" readonly></MkTextarea>
-</template>
-
-<script lang="ts">
-import { TextBlock } from '@/scripts/hpml/block';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { defineComponent, PropType } from 'vue';
-import MkTextarea from '../form/textarea.vue';
-
-export default defineComponent({
-	components: {
-		MkTextarea,
-	},
-	props: {
-		block: {
-			type: Object as PropType<TextBlock>,
-			required: true,
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true,
-		},
-	},
-	data() {
-		return {
-			text: this.hpml.interpolate(this.block.text),
-		};
-	},
-	watch: {
-		'hpml.vars': {
-			handler() {
-				this.text = this.hpml.interpolate(this.block.text);
-			},
-			deep: true,
-		},
-	},
-});
-</script>
diff --git a/packages/client/src/components/page/page.vue b/packages/client/src/components/page/page.vue
deleted file mode 100644
index b5cb73c009..0000000000
--- a/packages/client/src/components/page/page.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-<div v-if="hpml" class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }">
-	<XBlock v-for="child in page.content" :key="child.id" :block="child" :hpml="hpml" :h="2"/>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, onMounted, nextTick, onUnmounted, PropType } from 'vue';
-import { parse } from '@syuilo/aiscript';
-import XBlock from './page.block.vue';
-import { Hpml } from '@/scripts/hpml/evaluator';
-import { url } from '@/config';
-import { $i } from '@/account';
-import { defaultStore } from '@/store';
-
-export default defineComponent({
-	components: {
-		XBlock,
-	},
-	props: {
-		page: {
-			type: Object as PropType<Record<string, any>>,
-			required: true,
-		},
-	},
-	setup(props, ctx) {
-		const hpml = new Hpml(props.page, {
-			randomSeed: Math.random(),
-			visitor: $i,
-			url: url,
-			enableAiScript: !defaultStore.state.disablePagesScript,
-		});
-
-		onMounted(() => {
-			nextTick(() => {
-				if (props.page.script && hpml.aiscript) {
-					let ast;
-					try {
-						ast = parse(props.page.script);
-					} catch (err) {
-						console.error(err);
-						/*os.alert({
-							type: 'error',
-							text: 'Syntax error :('
-						});*/
-						return;
-					}
-					hpml.aiscript.exec(ast).then(() => {
-						hpml.eval();
-					}).catch(err => {
-						console.error(err);
-						/*os.alert({
-							type: 'error',
-							text: err
-						});*/
-					});
-				} else {
-					hpml.eval();
-				}
-			});
-			onUnmounted(() => {
-				if (hpml.aiscript) hpml.aiscript.abort();
-			});
-		});
-
-		return {
-			hpml,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.iroscrza {
-	&.serif {
-		> div {
-			font-family: serif;
-		}
-	}
-
-	&.center {
-		text-align: center;
-	}
-}
-</style>
diff --git a/packages/client/src/config.ts b/packages/client/src/config.ts
deleted file mode 100644
index f2022b0f02..0000000000
--- a/packages/client/src/config.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-const address = new URL(location.href);
-const siteName = (document.querySelector('meta[property="og:site_name"]') as HTMLMetaElement)?.content;
-
-export const host = address.host;
-export const hostname = address.hostname;
-export const url = address.origin;
-export const apiUrl = url + '/api';
-export const wsUrl = url.replace('http://', 'ws://').replace('https://', 'wss://') + '/streaming';
-export const lang = localStorage.getItem('lang');
-export const langs = _LANGS_;
-export const locale = JSON.parse(localStorage.getItem('locale'));
-export const version = _VERSION_;
-export const instanceName = siteName === 'Misskey' ? host : siteName;
-export const ui = localStorage.getItem('ui');
-export const debug = localStorage.getItem('debug') === 'true';
diff --git a/packages/client/src/const.ts b/packages/client/src/const.ts
deleted file mode 100644
index 77366cf07b..0000000000
--- a/packages/client/src/const.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-// ブラウザで直接表示することを許可するファイルの種類のリスト
-// ここに含まれないものは application/octet-stream としてレスポンスされる
-// SVGはXSSを生むので許可しない
-export const FILE_TYPE_BROWSERSAFE = [
-	// Images
-	'image/png',
-	'image/gif',
-	'image/jpeg',
-	'image/webp',
-	'image/avif',
-	'image/apng',
-	'image/bmp',
-	'image/tiff',
-	'image/x-icon',
-
-	// OggS
-	'audio/opus',
-	'video/ogg',
-	'audio/ogg',
-	'application/ogg',
-
-	// ISO/IEC base media file format
-	'video/quicktime',
-	'video/mp4',
-	'audio/mp4',
-	'video/x-m4v',
-	'audio/x-m4a',
-	'video/3gpp',
-	'video/3gpp2',
-
-	'video/mpeg',
-	'audio/mpeg',
-
-	'video/webm',
-	'audio/webm',
-
-	'audio/aac',
-	'audio/x-flac',
-	'audio/vnd.wave',
-];
-/*
-https://github.com/sindresorhus/file-type/blob/main/supported.js
-https://github.com/sindresorhus/file-type/blob/main/core.js
-https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers
-*/
diff --git a/packages/client/src/directives/adaptive-border.ts b/packages/client/src/directives/adaptive-border.ts
deleted file mode 100644
index 619c9f0b6d..0000000000
--- a/packages/client/src/directives/adaptive-border.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Directive } from 'vue';
-
-export default {
-	mounted(src, binding, vn) {
-		const getBgColor = (el: HTMLElement) => {
-			const style = window.getComputedStyle(el);
-			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
-				return style.backgroundColor;
-			} else {
-				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
-			}
-		};
-	
-		const parentBg = getBgColor(src.parentElement);
-
-		const myBg = window.getComputedStyle(src).backgroundColor;
-
-		if (parentBg === myBg) {
-			src.style.borderColor = 'var(--divider)';
-		} else {
-			src.style.borderColor = myBg;
-		}
-	},
-} as Directive;
diff --git a/packages/client/src/directives/anim.ts b/packages/client/src/directives/anim.ts
deleted file mode 100644
index 04e1c6a404..0000000000
--- a/packages/client/src/directives/anim.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Directive } from 'vue';
-
-export default {
-	beforeMount(src, binding, vn) {
-		src.style.opacity = '0';
-		src.style.transform = 'scale(0.9)';
-		// ページネーションと相性が悪いので
-		//if (typeof binding.value === 'number') src.style.transitionDelay = `${binding.value * 30}ms`;
-		src.classList.add('_zoom');
-	},
-
-	mounted(src, binding, vn) {
-		window.setTimeout(() => {
-			src.style.opacity = '1';
-			src.style.transform = 'none';
-		}, 1);
-	},
-} as Directive;
diff --git a/packages/client/src/directives/appear.ts b/packages/client/src/directives/appear.ts
deleted file mode 100644
index 7fa43fc34a..0000000000
--- a/packages/client/src/directives/appear.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Directive } from 'vue';
-
-export default {
-	mounted(src, binding, vn) {
-		const fn = binding.value;
-		if (fn == null) return;
-
-		const observer = new IntersectionObserver(entries => {
-			if (entries.some(entry => entry.isIntersecting)) {
-				fn();
-			}
-		});
-
-		observer.observe(src);
-
-		src._observer_ = observer;
-	},
-
-	unmounted(src, binding, vn) {
-		if (src._observer_) src._observer_.disconnect();
-	},
-} as Directive;
diff --git a/packages/client/src/directives/click-anime.ts b/packages/client/src/directives/click-anime.ts
deleted file mode 100644
index e2f514b7ca..0000000000
--- a/packages/client/src/directives/click-anime.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Directive } from 'vue';
-import { defaultStore } from '@/store';
-
-export default {
-	mounted(el, binding, vn) {
-		/*
-		if (!defaultStore.state.animation) return;
-
-		el.classList.add('_anime_bounce_standBy');
-
-		el.addEventListener('mousedown', () => {
-			el.classList.add('_anime_bounce_standBy');
-			el.classList.add('_anime_bounce_ready');
-
-			el.addEventListener('mouseleave', () => {
-				el.classList.remove('_anime_bounce_ready');
-			});
-		});
-
-		el.addEventListener('click', () => {
-			el.classList.add('_anime_bounce');
-		});
-
-		el.addEventListener('animationend', () => {
-			el.classList.remove('_anime_bounce_ready');
-			el.classList.remove('_anime_bounce');
-			el.classList.add('_anime_bounce_standBy');
-		});
-		*/
-	},
-} as Directive;
diff --git a/packages/client/src/directives/follow-append.ts b/packages/client/src/directives/follow-append.ts
deleted file mode 100644
index 62e0ac3b94..0000000000
--- a/packages/client/src/directives/follow-append.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Directive } from 'vue';
-import { getScrollContainer, getScrollPosition } from '@/scripts/scroll';
-
-export default {
-	mounted(src, binding, vn) {
-		if (binding.value === false) return;
-
-		let isBottom = true;
-
-		const container = getScrollContainer(src)!;
-		container.addEventListener('scroll', () => {
-			const pos = getScrollPosition(container);
-			const viewHeight = container.clientHeight;
-			const height = container.scrollHeight;
-			isBottom = (pos + viewHeight > height - 32);
-		}, { passive: true });
-		container.scrollTop = container.scrollHeight;
-
-		const ro = new ResizeObserver((entries, observer) => {
-			if (isBottom) {
-				const height = container.scrollHeight;
-				container.scrollTop = height;
-			}
-		});
-
-		ro.observe(src);
-
-		// TODO: 新たにプロパティを作るのをやめMapを使う
-		src._ro_ = ro;
-	},
-
-	unmounted(src, binding, vn) {
-		if (src._ro_) src._ro_.unobserve(src);
-	},
-} as Directive;
diff --git a/packages/client/src/directives/get-size.ts b/packages/client/src/directives/get-size.ts
deleted file mode 100644
index ff3bdd78ac..0000000000
--- a/packages/client/src/directives/get-size.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Directive } from 'vue';
-
-const mountings = new Map<Element, {
-	resize: ResizeObserver;
-	intersection?: IntersectionObserver;
-	fn: (w: number, h: number) => void;
-}>();
-
-function calc(src: Element) {
-	const info = mountings.get(src);
-	const height = src.clientHeight;
-	const width = src.clientWidth;
-
-	if (!info) return;
-
-	// アクティベート前などでsrcが描画されていない場合
-	if (!height) {
-		// IntersectionObserverで表示検出する
-		if (!info.intersection) {
-			info.intersection = new IntersectionObserver(entries => {
-				if (entries.some(entry => entry.isIntersecting)) calc(src);
-			});
-		}
-		info.intersection.observe(src);
-		return;
-	}
-	if (info.intersection) {
-		info.intersection.disconnect();
-		delete info.intersection;
-	}
-
-	info.fn(width, height);
-}
-
-export default {
-	mounted(src, binding, vn) {
-		const resize = new ResizeObserver((entries, observer) => {
-			calc(src);
-		});
-		resize.observe(src);
-
-		mountings.set(src, { resize, fn: binding.value });
-		calc(src);
-	},
-
-	unmounted(src, binding, vn) {
-		binding.value(0, 0);
-		const info = mountings.get(src);
-		if (!info) return;
-		info.resize.disconnect();
-		if (info.intersection) info.intersection.disconnect();
-		mountings.delete(src);
-	},
-} as Directive<Element, (w: number, h: number) => void>;
diff --git a/packages/client/src/directives/hotkey.ts b/packages/client/src/directives/hotkey.ts
deleted file mode 100644
index dfc5f646a4..0000000000
--- a/packages/client/src/directives/hotkey.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Directive } from 'vue';
-import { makeHotkey } from '../scripts/hotkey';
-
-export default {
-	mounted(el, binding) {
-		el._hotkey_global = binding.modifiers.global === true;
-
-		el._keyHandler = makeHotkey(binding.value);
-
-		if (el._hotkey_global) {
-			document.addEventListener('keydown', el._keyHandler);
-		} else {
-			el.addEventListener('keydown', el._keyHandler);
-		}
-	},
-
-	unmounted(el) {
-		if (el._hotkey_global) {
-			document.removeEventListener('keydown', el._keyHandler);
-		} else {
-			el.removeEventListener('keydown', el._keyHandler);
-		}
-	},
-} as Directive;
diff --git a/packages/client/src/directives/index.ts b/packages/client/src/directives/index.ts
deleted file mode 100644
index 401a917cba..0000000000
--- a/packages/client/src/directives/index.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { App } from 'vue';
-
-import userPreview from './user-preview';
-import size from './size';
-import getSize from './get-size';
-import ripple from './ripple';
-import tooltip from './tooltip';
-import hotkey from './hotkey';
-import appear from './appear';
-import anim from './anim';
-import clickAnime from './click-anime';
-import panel from './panel';
-import adaptiveBorder from './adaptive-border';
-
-export default function(app: App) {
-	app.directive('userPreview', userPreview);
-	app.directive('user-preview', userPreview);
-	app.directive('size', size);
-	app.directive('get-size', getSize);
-	app.directive('ripple', ripple);
-	app.directive('tooltip', tooltip);
-	app.directive('hotkey', hotkey);
-	app.directive('appear', appear);
-	app.directive('anim', anim);
-	app.directive('click-anime', clickAnime);
-	app.directive('panel', panel);
-	app.directive('adaptive-border', adaptiveBorder);
-}
diff --git a/packages/client/src/directives/panel.ts b/packages/client/src/directives/panel.ts
deleted file mode 100644
index d31dc41ed4..0000000000
--- a/packages/client/src/directives/panel.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Directive } from 'vue';
-
-export default {
-	mounted(src, binding, vn) {
-		const getBgColor = (el: HTMLElement) => {
-			const style = window.getComputedStyle(el);
-			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
-				return style.backgroundColor;
-			} else {
-				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
-			}
-		};
-	
-		const parentBg = getBgColor(src.parentElement);
-
-		const myBg = getComputedStyle(document.documentElement).getPropertyValue('--panel');
-
-		if (parentBg === myBg) {
-			src.style.backgroundColor = 'var(--bg)';
-		} else {
-			src.style.backgroundColor = 'var(--panel)';
-		}
-	},
-} as Directive;
diff --git a/packages/client/src/directives/ripple.ts b/packages/client/src/directives/ripple.ts
deleted file mode 100644
index d32f7ab441..0000000000
--- a/packages/client/src/directives/ripple.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import Ripple from '@/components/MkRipple.vue';
-import { popup } from '@/os';
-
-export default {
-	mounted(el, binding, vn) {
-		// 明示的に false であればバインドしない
-		if (binding.value === false) return;
-
-		el.addEventListener('click', () => {
-			const rect = el.getBoundingClientRect();
-
-			const x = rect.left + (el.offsetWidth / 2);
-			const y = rect.top + (el.offsetHeight / 2);
-
-			popup(Ripple, { x, y }, {}, 'end');
-		});
-	},
-};
diff --git a/packages/client/src/directives/size.ts b/packages/client/src/directives/size.ts
deleted file mode 100644
index da8bd78ea1..0000000000
--- a/packages/client/src/directives/size.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Directive } from 'vue';
-
-type Value = { max?: number[]; min?: number[]; };
-
-//const observers = new Map<Element, ResizeObserver>();
-const mountings = new Map<Element, {
-	value: Value;
-	resize: ResizeObserver;
-	intersection?: IntersectionObserver;
-	previousWidth: number;
-	twoPreviousWidth: number;
-}>();
-
-type ClassOrder = {
-	add: string[];
-	remove: string[];
-};
-
-const isContainerQueriesSupported = ('container' in document.documentElement.style);
-
-const cache = new Map<string, ClassOrder>();
-
-function getClassOrder(width: number, queue: Value): ClassOrder {
-	const getMaxClass = (v: number) => `max-width_${v}px`;
-	const getMinClass = (v: number) => `min-width_${v}px`;
-
-	return {
-		add: [
-			...(queue.max ? queue.max.filter(v => width <= v).map(getMaxClass) : []),
-			...(queue.min ? queue.min.filter(v => width >= v).map(getMinClass) : []),
-		],
-		remove: [
-			...(queue.max ? queue.max.filter(v => width > v).map(getMaxClass) : []),
-			...(queue.min ? queue.min.filter(v => width < v).map(getMinClass) : []),
-		],
-	};
-}
-
-function applyClassOrder(el: Element, order: ClassOrder) {
-	el.classList.add(...order.add);
-	el.classList.remove(...order.remove);
-}
-
-function getOrderName(width: number, queue: Value): string {
-	return `${width}|${queue.max ? queue.max.join(',') : ''}|${queue.min ? queue.min.join(',') : ''}`;
-}
-
-function calc(el: Element) {
-	const info = mountings.get(el);
-	const width = el.clientWidth;
-
-	if (!info || info.previousWidth === width) return;
-
-	// アクティベート前などでsrcが描画されていない場合
-	if (!width) {
-		// IntersectionObserverで表示検出する
-		if (!info.intersection) {
-			info.intersection = new IntersectionObserver(entries => {
-				if (entries.some(entry => entry.isIntersecting)) calc(el);
-			});
-		}
-		info.intersection.observe(el);
-		return;
-	}
-	if (info.intersection) {
-		info.intersection.disconnect();
-		delete info.intersection;
-	}
-
-	mountings.set(el, { ...info, ...{ previousWidth: width, twoPreviousWidth: info.previousWidth }});
-
-	// Prevent infinite resizing
-	// https://github.com/misskey-dev/misskey/issues/9076
-	if (info.twoPreviousWidth === width) {
-		return;
-	}
-
-	const cached = cache.get(getOrderName(width, info.value));
-	if (cached) {
-		applyClassOrder(el, cached);
-	} else {
-		const order = getClassOrder(width, info.value);
-		cache.set(getOrderName(width, info.value), order);
-		applyClassOrder(el, order);
-	}
-}
-
-export default {
-	mounted(src, binding, vn) {
-		if (isContainerQueriesSupported) return;
-
-		const resize = new ResizeObserver((entries, observer) => {
-			calc(src);
-		});
-
-		mountings.set(src, {
-			value: binding.value,
-			resize,
-			previousWidth: 0,
-			twoPreviousWidth: 0,
-		});
-
-		calc(src);
-		resize.observe(src);
-	},
-
-	updated(src, binding, vn) {
-		if (isContainerQueriesSupported) return;
-
-		mountings.set(src, Object.assign({}, mountings.get(src), { value: binding.value }));
-		calc(src);
-	},
-
-	unmounted(src, binding, vn) {
-		if (isContainerQueriesSupported) return;
-
-		const info = mountings.get(src);
-		if (!info) return;
-		info.resize.disconnect();
-		if (info.intersection) info.intersection.disconnect();
-		mountings.delete(src);
-	},
-} as Directive<Element, Value>;
diff --git a/packages/client/src/directives/tooltip.ts b/packages/client/src/directives/tooltip.ts
deleted file mode 100644
index 5d13497b5f..0000000000
--- a/packages/client/src/directives/tooltip.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-// TODO: useTooltip関数使うようにしたい
-// ただディレクティブ内でonUnmountedなどのcomposition api使えるのか不明
-
-import { defineAsyncComponent, Directive, ref } from 'vue';
-import { isTouchUsing } from '@/scripts/touch';
-import { popup, alert } from '@/os';
-
-const start = isTouchUsing ? 'touchstart' : 'mouseover';
-const end = isTouchUsing ? 'touchend' : 'mouseleave';
-
-export default {
-	mounted(el: HTMLElement, binding, vn) {
-		const delay = binding.modifiers.noDelay ? 0 : 100;
-
-		const self = (el as any)._tooltipDirective_ = {} as any;
-
-		self.text = binding.value as string;
-		self._close = null;
-		self.showTimer = null;
-		self.hideTimer = null;
-		self.checkTimer = null;
-
-		self.close = () => {
-			if (self._close) {
-				window.clearInterval(self.checkTimer);
-				self._close();
-				self._close = null;
-			}
-		};
-
-		if (binding.arg === 'dialog') {
-			el.addEventListener('click', (ev) => {
-				ev.preventDefault();
-				ev.stopPropagation();
-				alert({
-					type: 'info',
-					text: binding.value,
-				});
-				return false;
-			});
-		}
-
-		self.show = () => {
-			if (!document.body.contains(el)) return;
-			if (self._close) return;
-			if (self.text == null) return;
-
-			const showing = ref(true);
-			popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
-				showing,
-				text: self.text,
-				asMfm: binding.modifiers.mfm,
-				direction: binding.modifiers.left ? 'left' : binding.modifiers.right ? 'right' : binding.modifiers.top ? 'top' : binding.modifiers.bottom ? 'bottom' : 'top',
-				targetElement: el,
-			}, {}, 'closed');
-
-			self._close = () => {
-				showing.value = false;
-			};
-		};
-
-		el.addEventListener('selectstart', ev => {
-			ev.preventDefault();
-		});
-
-		el.addEventListener(start, () => {
-			window.clearTimeout(self.showTimer);
-			window.clearTimeout(self.hideTimer);
-			self.showTimer = window.setTimeout(self.show, delay);
-		}, { passive: true });
-
-		el.addEventListener(end, () => {
-			window.clearTimeout(self.showTimer);
-			window.clearTimeout(self.hideTimer);
-			self.hideTimer = window.setTimeout(self.close, delay);
-		}, { passive: true });
-
-		el.addEventListener('click', () => {
-			window.clearTimeout(self.showTimer);
-			self.close();
-		});
-	},
-
-	updated(el, binding) {
-		const self = el._tooltipDirective_;
-		self.text = binding.value as string;
-	},
-
-	unmounted(el, binding, vn) {
-		const self = el._tooltipDirective_;
-		window.clearInterval(self.checkTimer);
-	},
-} as Directive;
diff --git a/packages/client/src/directives/user-preview.ts b/packages/client/src/directives/user-preview.ts
deleted file mode 100644
index ed5f00ca65..0000000000
--- a/packages/client/src/directives/user-preview.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { defineAsyncComponent, Directive, ref } from 'vue';
-import autobind from 'autobind-decorator';
-import { popup } from '@/os';
-
-export class UserPreview {
-	private el;
-	private user;
-	private showTimer;
-	private hideTimer;
-	private checkTimer;
-	private promise;
-
-	constructor(el, user) {
-		this.el = el;
-		this.user = user;
-
-		this.attach();
-	}
-
-	@autobind
-	private show() {
-		if (!document.body.contains(this.el)) return;
-		if (this.promise) return;
-
-		const showing = ref(true);
-
-		popup(defineAsyncComponent(() => import('@/components/MkUserPreview.vue')), {
-			showing,
-			q: this.user,
-			source: this.el,
-		}, {
-			mouseover: () => {
-				window.clearTimeout(this.hideTimer);
-			},
-			mouseleave: () => {
-				window.clearTimeout(this.showTimer);
-				this.hideTimer = window.setTimeout(this.close, 500);
-			},
-		}, 'closed');
-
-		this.promise = {
-			cancel: () => {
-				showing.value = false;
-			},
-		};
-
-		this.checkTimer = window.setInterval(() => {
-			if (!document.body.contains(this.el)) {
-				window.clearTimeout(this.showTimer);
-				window.clearTimeout(this.hideTimer);
-				this.close();
-			}
-		}, 1000);
-	}
-
-	@autobind
-	private close() {
-		if (this.promise) {
-			window.clearInterval(this.checkTimer);
-			this.promise.cancel();
-			this.promise = null;
-		}
-	}
-
-	@autobind
-	private onMouseover() {
-		window.clearTimeout(this.showTimer);
-		window.clearTimeout(this.hideTimer);
-		this.showTimer = window.setTimeout(this.show, 500);
-	}
-
-	@autobind
-	private onMouseleave() {
-		window.clearTimeout(this.showTimer);
-		window.clearTimeout(this.hideTimer);
-		this.hideTimer = window.setTimeout(this.close, 500);
-	}
-
-	@autobind
-	private onClick() {
-		window.clearTimeout(this.showTimer);
-		this.close();
-	}
-
-	@autobind
-	public attach() {
-		this.el.addEventListener('mouseover', this.onMouseover);
-		this.el.addEventListener('mouseleave', this.onMouseleave);
-		this.el.addEventListener('click', this.onClick);
-	}
-
-	@autobind
-	public detach() {
-		this.el.removeEventListener('mouseover', this.onMouseover);
-		this.el.removeEventListener('mouseleave', this.onMouseleave);
-		this.el.removeEventListener('click', this.onClick);
-		window.clearInterval(this.checkTimer);
-	}
-}
-
-export default {
-	mounted(el: HTMLElement, binding, vn) {
-		if (binding.value == null) return;
-
-		// TODO: 新たにプロパティを作るのをやめMapを使う
-		// ただメモリ的には↓の方が省メモリかもしれないので検討中
-		const self = (el as any)._userPreviewDirective_ = {} as any;
-
-		self.preview = new UserPreview(el, binding.value);
-	},
-
-	unmounted(el, binding, vn) {
-		if (binding.value == null) return;
-
-		const self = el._userPreviewDirective_;
-		self.preview.detach();
-	},
-} as Directive;
diff --git a/packages/client/src/emojilist.json b/packages/client/src/emojilist.json
deleted file mode 100644
index 402e82e33b..0000000000
--- a/packages/client/src/emojilist.json
+++ /dev/null
@@ -1,1785 +0,0 @@
-[
-	{ "category": "face", "char": "😀", "name": "grinning", "keywords": ["face", "smile", "happy", "joy", ": D", "grin"] },
-	{ "category": "face", "char": "😬", "name": "grimacing", "keywords": ["face", "grimace", "teeth"] },
-	{ "category": "face", "char": "😁", "name": "grin", "keywords": ["face", "happy", "smile", "joy", "kawaii"] },
-	{ "category": "face", "char": "😂", "name": "joy", "keywords": ["face", "cry", "tears", "weep", "happy", "happytears", "haha"] },
-	{ "category": "face", "char": "🤣", "name": "rofl", "keywords": ["face", "rolling", "floor", "laughing", "lol", "haha"] },
-	{ "category": "face", "char": "🥳", "name": "partying", "keywords": ["face", "celebration", "woohoo"] },
-	{ "category": "face", "char": "😃", "name": "smiley", "keywords": ["face", "happy", "joy", "haha", ": D", ": )", "smile", "funny"] },
-	{ "category": "face", "char": "😄", "name": "smile", "keywords": ["face", "happy", "joy", "funny", "haha", "laugh", "like", ": D", ": )"] },
-	{ "category": "face", "char": "😅", "name": "sweat_smile", "keywords": ["face", "hot", "happy", "laugh", "sweat", "smile", "relief"] },
-	{ "category": "face", "char": "🥲", "name": "smiling_face_with_tear", "keywords": ["face"] },
-	{ "category": "face", "char": "😆", "name": "laughing", "keywords": ["happy", "joy", "lol", "satisfied", "haha", "face", "glad", "XD", "laugh"] },
-	{ "category": "face", "char": "😇", "name": "innocent", "keywords": ["face", "angel", "heaven", "halo"] },
-	{ "category": "face", "char": "😉", "name": "wink", "keywords": ["face", "happy", "mischievous", "secret", ";)", "smile", "eye"] },
-	{ "category": "face", "char": "😊", "name": "blush", "keywords": ["face", "smile", "happy", "flushed", "crush", "embarrassed", "shy", "joy"] },
-	{ "category": "face", "char": "🙂", "name": "slightly_smiling_face", "keywords": ["face", "smile"] },
-	{ "category": "face", "char": "🙃", "name": "upside_down_face", "keywords": ["face", "flipped", "silly", "smile"] },
-	{ "category": "face", "char": "☺️", "name": "relaxed", "keywords": ["face", "blush", "massage", "happiness"] },
-	{ "category": "face", "char": "😋", "name": "yum", "keywords": ["happy", "joy", "tongue", "smile", "face", "silly", "yummy", "nom", "delicious", "savouring"] },
-	{ "category": "face", "char": "😌", "name": "relieved", "keywords": ["face", "relaxed", "phew", "massage", "happiness"] },
-	{ "category": "face", "char": "😍", "name": "heart_eyes", "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "crush", "heart"] },
-	{ "category": "face", "char": "🥰", "name": "smiling_face_with_three_hearts", "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "crush", "hearts", "adore"] },
-	{ "category": "face", "char": "😘", "name": "kissing_heart", "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "kiss"] },
-	{ "category": "face", "char": "😗", "name": "kissing", "keywords": ["love", "like", "face", "3", "valentines", "infatuation", "kiss"] },
-	{ "category": "face", "char": "😙", "name": "kissing_smiling_eyes", "keywords": ["face", "affection", "valentines", "infatuation", "kiss"] },
-	{ "category": "face", "char": "😚", "name": "kissing_closed_eyes", "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "kiss"] },
-	{ "category": "face", "char": "😜", "name": "stuck_out_tongue_winking_eye", "keywords": ["face", "prank", "childish", "playful", "mischievous", "smile", "wink", "tongue"] },
-	{ "category": "face", "char": "🤪", "name": "zany", "keywords": ["face", "goofy", "crazy"] },
-	{ "category": "face", "char": "🤨", "name": "raised_eyebrow", "keywords": ["face", "distrust", "scepticism", "disapproval", "disbelief", "surprise"] },
-	{ "category": "face", "char": "🧐", "name": "monocle", "keywords": ["face", "stuffy", "wealthy"] },
-	{ "category": "face", "char": "😝", "name": "stuck_out_tongue_closed_eyes", "keywords": ["face", "prank", "playful", "mischievous", "smile", "tongue"] },
-	{ "category": "face", "char": "😛", "name": "stuck_out_tongue", "keywords": ["face", "prank", "childish", "playful", "mischievous", "smile", "tongue"] },
-	{ "category": "face", "char": "🤑", "name": "money_mouth_face", "keywords": ["face", "rich", "dollar", "money"] },
-	{ "category": "face", "char": "🤓", "name": "nerd_face", "keywords": ["face", "nerdy", "geek", "dork"] },
-	{ "category": "face", "char": "🥸", "name": "disguised_face", "keywords": ["face", "nose", "glasses", "incognito"] },
-	{ "category": "face", "char": "😎", "name": "sunglasses", "keywords": ["face", "cool", "smile", "summer", "beach", "sunglass"] },
-	{ "category": "face", "char": "🤩", "name": "star_struck", "keywords": ["face", "smile", "starry", "eyes", "grinning"] },
-	{ "category": "face", "char": "🤡", "name": "clown_face", "keywords": ["face"] },
-	{ "category": "face", "char": "🤠", "name": "cowboy_hat_face", "keywords": ["face", "cowgirl", "hat"] },
-	{ "category": "face", "char": "🤗", "name": "hugs", "keywords": ["face", "smile", "hug"] },
-	{ "category": "face", "char": "😏", "name": "smirk", "keywords": ["face", "smile", "mean", "prank", "smug", "sarcasm"] },
-	{ "category": "face", "char": "😶", "name": "no_mouth", "keywords": ["face", "hellokitty"] },
-	{ "category": "face", "char": "😐", "name": "neutral_face", "keywords": ["indifference", "meh", ": |", "neutral"] },
-	{ "category": "face", "char": "😑", "name": "expressionless", "keywords": ["face", "indifferent", "-_-", "meh", "deadpan"] },
-	{ "category": "face", "char": "😒", "name": "unamused", "keywords": ["indifference", "bored", "straight face", "serious", "sarcasm", "unimpressed", "skeptical", "dubious", "side_eye"] },
-	{ "category": "face", "char": "🙄", "name": "roll_eyes", "keywords": ["face", "eyeroll", "frustrated"] },
-	{ "category": "face", "char": "🤔", "name": "thinking", "keywords": ["face", "hmmm", "think", "consider"] },
-	{ "category": "face", "char": "🤥", "name": "lying_face", "keywords": ["face", "lie", "pinocchio"] },
-	{ "category": "face", "char": "🤭", "name": "hand_over_mouth", "keywords": ["face", "whoops", "shock", "surprise"] },
-	{ "category": "face", "char": "🤫", "name": "shushing", "keywords": ["face", "quiet", "shhh"] },
-	{ "category": "face", "char": "🤬", "name": "symbols_over_mouth", "keywords": ["face", "swearing", "cursing", "cussing", "profanity", "expletive"] },
-	{ "category": "face", "char": "🤯", "name": "exploding_head", "keywords": ["face", "shocked", "mind", "blown"] },
-	{ "category": "face", "char": "😳", "name": "flushed", "keywords": ["face", "blush", "shy", "flattered"] },
-	{ "category": "face", "char": "😞", "name": "disappointed", "keywords": ["face", "sad", "upset", "depressed", ": ("] },
-	{ "category": "face", "char": "😟", "name": "worried", "keywords": ["face", "concern", "nervous", ": ("] },
-	{ "category": "face", "char": "😠", "name": "angry", "keywords": ["mad", "face", "annoyed", "frustrated"] },
-	{ "category": "face", "char": "😡", "name": "rage", "keywords": ["angry", "mad", "hate", "despise"] },
-	{ "category": "face", "char": "😔", "name": "pensive", "keywords": ["face", "sad", "depressed", "upset"] },
-	{ "category": "face", "char": "😕", "name": "confused", "keywords": ["face", "indifference", "huh", "weird", "hmmm", ": /"] },
-	{ "category": "face", "char": "🙁", "name": "slightly_frowning_face", "keywords": ["face", "frowning", "disappointed", "sad", "upset"] },
-	{ "category": "face", "char": "☹", "name": "frowning_face", "keywords": ["face", "sad", "upset", "frown"] },
-	{ "category": "face", "char": "😣", "name": "persevere", "keywords": ["face", "sick", "no", "upset", "oops"] },
-	{ "category": "face", "char": "😖", "name": "confounded", "keywords": ["face", "confused", "sick", "unwell", "oops", ": S"] },
-	{ "category": "face", "char": "😫", "name": "tired_face", "keywords": ["sick", "whine", "upset", "frustrated"] },
-	{ "category": "face", "char": "😩", "name": "weary", "keywords": ["face", "tired", "sleepy", "sad", "frustrated", "upset"] },
-	{ "category": "face", "char": "🥺", "name": "pleading", "keywords": ["face", "begging", "mercy"] },
-	{ "category": "face", "char": "😤", "name": "triumph", "keywords": ["face", "gas", "phew", "proud", "pride"] },
-	{ "category": "face", "char": "😮", "name": "open_mouth", "keywords": ["face", "surprise", "impressed", "wow", "whoa", ": O"] },
-	{ "category": "face", "char": "😱", "name": "scream", "keywords": ["face", "munch", "scared", "omg"] },
-	{ "category": "face", "char": "😨", "name": "fearful", "keywords": ["face", "scared", "terrified", "nervous", "oops", "huh"] },
-	{ "category": "face", "char": "😰", "name": "cold_sweat", "keywords": ["face", "nervous", "sweat"] },
-	{ "category": "face", "char": "😯", "name": "hushed", "keywords": ["face", "woo", "shh"] },
-	{ "category": "face", "char": "😦", "name": "frowning", "keywords": ["face", "aw", "what"] },
-	{ "category": "face", "char": "😧", "name": "anguished", "keywords": ["face", "stunned", "nervous"] },
-	{ "category": "face", "char": "😢", "name": "cry", "keywords": ["face", "tears", "sad", "depressed", "upset", ": '("] },
-	{ "category": "face", "char": "😥", "name": "disappointed_relieved", "keywords": ["face", "phew", "sweat", "nervous"] },
-	{ "category": "face", "char": "🤤", "name": "drooling_face", "keywords": ["face"] },
-	{ "category": "face", "char": "😪", "name": "sleepy", "keywords": ["face", "tired", "rest", "nap"] },
-	{ "category": "face", "char": "😓", "name": "sweat", "keywords": ["face", "hot", "sad", "tired", "exercise"] },
-	{ "category": "face", "char": "🥵", "name": "hot", "keywords": ["face", "feverish", "heat", "red", "sweating"] },
-	{ "category": "face", "char": "🥶", "name": "cold", "keywords": ["face", "blue", "freezing", "frozen", "frostbite", "icicles"] },
-	{ "category": "face", "char": "😭", "name": "sob", "keywords": ["face", "cry", "tears", "sad", "upset", "depressed"] },
-	{ "category": "face", "char": "😵", "name": "dizzy_face", "keywords": ["spent", "unconscious", "xox", "dizzy"] },
-	{ "category": "face", "char": "😲", "name": "astonished", "keywords": ["face", "xox", "surprised", "poisoned"] },
-	{ "category": "face", "char": "🤐", "name": "zipper_mouth_face", "keywords": ["face", "sealed", "zipper", "secret"] },
-	{ "category": "face", "char": "🤢", "name": "nauseated_face", "keywords": ["face", "vomit", "gross", "green", "sick", "throw up", "ill"] },
-	{ "category": "face", "char": "🤧", "name": "sneezing_face", "keywords": ["face", "gesundheit", "sneeze", "sick", "allergy"] },
-	{ "category": "face", "char": "🤮", "name": "vomiting", "keywords": ["face", "sick"] },
-	{ "category": "face", "char": "😷", "name": "mask", "keywords": ["face", "sick", "ill", "disease"] },
-	{ "category": "face", "char": "🤒", "name": "face_with_thermometer", "keywords": ["sick", "temperature", "thermometer", "cold", "fever"] },
-	{ "category": "face", "char": "🤕", "name": "face_with_head_bandage", "keywords": ["injured", "clumsy", "bandage", "hurt"] },
-	{ "category": "face", "char": "🥴", "name": "woozy", "keywords": ["face", "dizzy", "intoxicated", "tipsy", "wavy"] },
-	{ "category": "face", "char": "🥱", "name": "yawning", "keywords": ["face", "tired", "yawning"] },
-	{ "category": "face", "char": "😴", "name": "sleeping", "keywords": ["face", "tired", "sleepy", "night", "zzz"] },
-	{ "category": "face", "char": "💤", "name": "zzz", "keywords": ["sleepy", "tired", "dream"] },
-	{ "category": "face", "char": "\uD83D\uDE36\u200D\uD83C\uDF2B\uFE0F", "name": "face_in_clouds", "keywords": [] },
-	{ "category": "face", "char": "\uD83D\uDE2E\u200D\uD83D\uDCA8", "name": "face_exhaling", "keywords": [] },
-	{ "category": "face", "char": "\uD83D\uDE35\u200D\uD83D\uDCAB", "name": "face_with_spiral_eyes", "keywords": [] },
-	{ "category": "face", "char": "\uD83E\uDEE0", "name": "melting_face", "keywords": ["disappear", "dissolve", "liquid", "melt", "toketa"] },
-	{ "category": "face", "char": "\uD83E\uDEE2", "name": "face_with_open_eyes_and_hand_over_mouth", "keywords": ["amazement", "awe", "disbelief", "embarrass", "scared", "surprise", "ohoho"] },
-	{ "category": "face", "char": "\uD83E\uDEE3", "name": "face_with_peeking_eye", "keywords": ["captivated", "peep", "stare", "chunibyo"] },
-	{ "category": "face", "char": "\uD83E\uDEE1", "name": "saluting_face", "keywords": ["ok", "salute", "sunny", "troops", "yes", "raja"] },
-	{ "category": "face", "char": "\uD83E\uDEE5", "name": "dotted_line_face", "keywords": ["depressed", "disappear", "hide", "introvert", "invisible", "tensen"] },
-	{ "category": "face", "char": "\uD83E\uDEE4", "name": "face_with_diagonal_mouth", "keywords": ["disappointed", "meh", "skeptical", "unsure"] },
-	{ "category": "face", "char": "\uD83E\uDD79", "name": "face_holding_back_tears", "keywords": ["angry", "cry", "proud", "resist", "sad"] },
-	{ "category": "face", "char": "💩", "name": "poop", "keywords": ["hankey", "shitface", "fail", "turd", "shit"] },
-	{ "category": "face", "char": "😈", "name": "smiling_imp", "keywords": ["devil", "horns"] },
-	{ "category": "face", "char": "👿", "name": "imp", "keywords": ["devil", "angry", "horns"] },
-	{ "category": "face", "char": "👹", "name": "japanese_ogre", "keywords": ["monster", "red", "mask", "halloween", "scary", "creepy", "devil", "demon", "japanese", "ogre"] },
-	{ "category": "face", "char": "👺", "name": "japanese_goblin", "keywords": ["red", "evil", "mask", "monster", "scary", "creepy", "japanese", "goblin"] },
-	{ "category": "face", "char": "💀", "name": "skull", "keywords": ["dead", "skeleton", "creepy", "death"] },
-	{ "category": "face", "char": "👻", "name": "ghost", "keywords": ["halloween", "spooky", "scary"] },
-	{ "category": "face", "char": "👽", "name": "alien", "keywords": ["UFO", "paul", "weird", "outer_space"] },
-	{ "category": "face", "char": "🤖", "name": "robot", "keywords": ["computer", "machine", "bot"] },
-	{ "category": "face", "char": "😺", "name": "smiley_cat", "keywords": ["animal", "cats", "happy", "smile"] },
-	{ "category": "face", "char": "😸", "name": "smile_cat", "keywords": ["animal", "cats", "smile"] },
-	{ "category": "face", "char": "😹", "name": "joy_cat", "keywords": ["animal", "cats", "haha", "happy", "tears"] },
-	{ "category": "face", "char": "😻", "name": "heart_eyes_cat", "keywords": ["animal", "love", "like", "affection", "cats", "valentines", "heart"] },
-	{ "category": "face", "char": "😼", "name": "smirk_cat", "keywords": ["animal", "cats", "smirk"] },
-	{ "category": "face", "char": "😽", "name": "kissing_cat", "keywords": ["animal", "cats", "kiss"] },
-	{ "category": "face", "char": "🙀", "name": "scream_cat", "keywords": ["animal", "cats", "munch", "scared", "scream"] },
-	{ "category": "face", "char": "😿", "name": "crying_cat_face", "keywords": ["animal", "tears", "weep", "sad", "cats", "upset", "cry"] },
-	{ "category": "face", "char": "😾", "name": "pouting_cat", "keywords": ["animal", "cats"] },
-	{ "category": "people", "char": "🤲", "name": "palms_up", "keywords": ["hands", "gesture", "cupped", "prayer"] },
-	{ "category": "people", "char": "🙌", "name": "raised_hands", "keywords": ["gesture", "hooray", "yea", "celebration", "hands"] },
-	{ "category": "people", "char": "👏", "name": "clap", "keywords": ["hands", "praise", "applause", "congrats", "yay"] },
-	{ "category": "people", "char": "👋", "name": "wave", "keywords": ["hands", "gesture", "goodbye", "solong", "farewell", "hello", "hi", "palm"] },
-	{ "category": "people", "char": "🤙", "name": "call_me_hand", "keywords": ["hands", "gesture"] },
-	{ "category": "people", "char": "👍", "name": "+1", "keywords": ["thumbsup", "yes", "awesome", "good", "agree", "accept", "cool", "hand", "like"] },
-	{ "category": "people", "char": "👎", "name": "-1", "keywords": ["thumbsdown", "no", "dislike", "hand"] },
-	{ "category": "people", "char": "👊", "name": "facepunch", "keywords": ["angry", "violence", "fist", "hit", "attack", "hand"] },
-	{ "category": "people", "char": "✊", "name": "fist", "keywords": ["fingers", "hand", "grasp"] },
-	{ "category": "people", "char": "🤛", "name": "fist_left", "keywords": ["hand", "fistbump"] },
-	{ "category": "people", "char": "🤜", "name": "fist_right", "keywords": ["hand", "fistbump"] },
-	{ "category": "people", "char": "✌", "name": "v", "keywords": ["fingers", "ohyeah", "hand", "peace", "victory", "two"] },
-	{ "category": "people", "char": "👌", "name": "ok_hand", "keywords": ["fingers", "limbs", "perfect", "ok", "okay"] },
-	{ "category": "people", "char": "✋", "name": "raised_hand", "keywords": ["fingers", "stop", "highfive", "palm", "ban"] },
-	{ "category": "people", "char": "🤚", "name": "raised_back_of_hand", "keywords": ["fingers", "raised", "backhand"] },
-	{ "category": "people", "char": "👐", "name": "open_hands", "keywords": ["fingers", "butterfly", "hands", "open"] },
-	{ "category": "people", "char": "💪", "name": "muscle", "keywords": ["arm", "flex", "hand", "summer", "strong", "biceps"] },
-	{ "category": "people", "char": "🦾", "name": "mechanical_arm", "keywords": ["flex", "hand", "strong", "biceps"] },
-	{ "category": "people", "char": "🙏", "name": "pray", "keywords": ["please", "hope", "wish", "namaste", "highfive"] },
-	{ "category": "people", "char": "🦶", "name": "foot", "keywords": ["kick", "stomp"] },
-	{ "category": "people", "char": "🦵", "name": "leg", "keywords": ["kick", "limb"] },
-	{ "category": "people", "char": "🦿", "name": "mechanical_leg", "keywords": ["kick", "limb"] },
-	{ "category": "people", "char": "🤝", "name": "handshake", "keywords": ["agreement", "shake"] },
-	{ "category": "people", "char": "☝", "name": "point_up", "keywords": ["hand", "fingers", "direction", "up"] },
-	{ "category": "people", "char": "👆", "name": "point_up_2", "keywords": ["fingers", "hand", "direction", "up"] },
-	{ "category": "people", "char": "👇", "name": "point_down", "keywords": ["fingers", "hand", "direction", "down"] },
-	{ "category": "people", "char": "👈", "name": "point_left", "keywords": ["direction", "fingers", "hand", "left"] },
-	{ "category": "people", "char": "👉", "name": "point_right", "keywords": ["fingers", "hand", "direction", "right"] },
-	{ "category": "people", "char": "🖕", "name": "fu", "keywords": ["hand", "fingers", "rude", "middle", "flipping"] },
-	{ "category": "people", "char": "🖐", "name": "raised_hand_with_fingers_splayed", "keywords": ["hand", "fingers", "palm"] },
-	{ "category": "people", "char": "🤟", "name": "love_you", "keywords": ["hand", "fingers", "gesture"] },
-	{ "category": "people", "char": "🤘", "name": "metal", "keywords": ["hand", "fingers", "evil_eye", "sign_of_horns", "rock_on"] },
-	{ "category": "people", "char": "🤞", "name": "crossed_fingers", "keywords": ["good", "lucky"] },
-	{ "category": "people", "char": "🖖", "name": "vulcan_salute", "keywords": ["hand", "fingers", "spock", "star trek"] },
-	{ "category": "people", "char": "✍", "name": "writing_hand", "keywords": ["lower_left_ballpoint_pen", "stationery", "write", "compose"] },
-	{ "category": "people", "char": "\uD83E\uDEF0", "name": "hand_with_index_finger_and_thumb_crossed", "keywords": [] },
-	{ "category": "people", "char": "\uD83E\uDEF1", "name": "rightwards_hand", "keywords": [] },
-	{ "category": "people", "char": "\uD83E\uDEF2", "name": "leftwards_hand", "keywords": [] },
-	{ "category": "people", "char": "\uD83E\uDEF3", "name": "palm_down_hand", "keywords": [] },
-	{ "category": "people", "char": "\uD83E\uDEF4", "name": "palm_up_hand", "keywords": [] },
-	{ "category": "people", "char": "\uD83E\uDEF5", "name": "index_pointing_at_the_viewer", "keywords": [] },
-	{ "category": "people", "char": "\uD83E\uDEF6", "name": "heart_hands", "keywords": ["moemoekyun"] },
-	{ "category": "people", "char": "🤏", "name": "pinching_hand", "keywords": ["hand", "fingers"] },
-	{ "category": "people", "char": "🤌", "name": "pinched_fingers", "keywords": ["hand", "fingers"] },
-	{ "category": "people", "char": "🤳", "name": "selfie", "keywords": ["camera", "phone"] },
-	{ "category": "people", "char": "💅", "name": "nail_care", "keywords": ["beauty", "manicure", "finger", "fashion", "nail"] },
-	{ "category": "people", "char": "👄", "name": "lips", "keywords": ["mouth", "kiss"] },
-	{ "category": "people", "char": "\uD83E\uDEE6", "name": "biting_lip", "keywords": [] },
-	{ "category": "people", "char": "🦷", "name": "tooth", "keywords": ["teeth", "dentist"] },
-	{ "category": "people", "char": "👅", "name": "tongue", "keywords": ["mouth", "playful"] },
-	{ "category": "people", "char": "👂", "name": "ear", "keywords": ["face", "hear", "sound", "listen"] },
-	{ "category": "people", "char": "🦻", "name": "ear_with_hearing_aid", "keywords": ["face", "hear", "sound", "listen"] },
-	{ "category": "people", "char": "👃", "name": "nose", "keywords": ["smell", "sniff"] },
-	{ "category": "people", "char": "👁", "name": "eye", "keywords": ["face", "look", "see", "watch", "stare"] },
-	{ "category": "people", "char": "👀", "name": "eyes", "keywords": ["look", "watch", "stalk", "peek", "see"] },
-	{ "category": "people", "char": "🧠", "name": "brain", "keywords": ["smart", "intelligent"] },
-	{ "category": "people", "char": "🫀", "name": "anatomical_heart", "keywords": [] },
-	{ "category": "people", "char": "🫁", "name": "lungs", "keywords": [] },
-	{ "category": "people", "char": "👤", "name": "bust_in_silhouette", "keywords": ["user", "person", "human"] },
-	{ "category": "people", "char": "👥", "name": "busts_in_silhouette", "keywords": ["user", "person", "human", "group", "team"] },
-	{ "category": "people", "char": "🗣", "name": "speaking_head", "keywords": ["user", "person", "human", "sing", "say", "talk"] },
-	{ "category": "people", "char": "👶", "name": "baby", "keywords": ["child", "boy", "girl", "toddler"] },
-	{ "category": "people", "char": "🧒", "name": "child", "keywords": ["gender-neutral", "young"] },
-	{ "category": "people", "char": "👦", "name": "boy", "keywords": ["man", "male", "guy", "teenager"] },
-	{ "category": "people", "char": "👧", "name": "girl", "keywords": ["female", "woman", "teenager"] },
-	{ "category": "people", "char": "🧑", "name": "adult", "keywords": ["gender-neutral", "person"] },
-	{ "category": "people", "char": "👨", "name": "man", "keywords": ["mustache", "father", "dad", "guy", "classy", "sir", "moustache"] },
-	{ "category": "people", "char": "👩", "name": "woman", "keywords": ["female", "girls", "lady"] },
-	{ "category": "people", "char": "🧑‍🦱", "name": "curly_hair", "keywords": ["curly", "afro", "braids", "ringlets"] },
-	{ "category": "people", "char": "👩‍🦱", "name": "curly_hair_woman", "keywords": ["woman", "female", "girl", "curly", "afro", "braids", "ringlets"] },
-	{ "category": "people", "char": "👨‍🦱", "name": "curly_hair_man", "keywords": ["man", "male", "boy", "guy", "curly", "afro", "braids", "ringlets"] },
-	{ "category": "people", "char": "🧑‍🦰", "name": "red_hair", "keywords": ["redhead"] },
-	{ "category": "people", "char": "👩‍🦰", "name": "red_hair_woman", "keywords": ["woman", "female", "girl", "ginger", "redhead"] },
-	{ "category": "people", "char": "👨‍🦰", "name": "red_hair_man", "keywords": ["man", "male", "boy", "guy", "ginger", "redhead"] },
-	{ "category": "people", "char": "👱‍♀️", "name": "blonde_woman", "keywords": ["woman", "female", "girl", "blonde", "person"] },
-	{ "category": "people", "char": "👱", "name": "blonde_man", "keywords": ["man", "male", "boy", "blonde", "guy", "person"] },
-	{ "category": "people", "char": "🧑‍🦳", "name": "white_hair", "keywords": ["gray", "old", "white"] },
-	{ "category": "people", "char": "👩‍🦳", "name": "white_hair_woman", "keywords": ["woman", "female", "girl", "gray", "old", "white"] },
-	{ "category": "people", "char": "👨‍🦳", "name": "white_hair_man", "keywords": ["man", "male", "boy", "guy", "gray", "old", "white"] },
-	{ "category": "people", "char": "🧑‍🦲", "name": "bald", "keywords": ["bald", "chemotherapy", "hairless", "shaven"] },
-	{ "category": "people", "char": "👩‍🦲", "name": "bald_woman", "keywords": ["woman", "female", "girl", "bald", "chemotherapy", "hairless", "shaven"] },
-	{ "category": "people", "char": "👨‍🦲", "name": "bald_man", "keywords": ["man", "male", "boy", "guy", "bald", "chemotherapy", "hairless", "shaven"] },
-	{ "category": "people", "char": "🧔", "name": "bearded_person", "keywords": ["person", "bewhiskered"] },
-	{ "category": "people", "char": "🧓", "name": "older_adult", "keywords": ["human", "elder", "senior", "gender-neutral"] },
-	{ "category": "people", "char": "👴", "name": "older_man", "keywords": ["human", "male", "men", "old", "elder", "senior"] },
-	{ "category": "people", "char": "👵", "name": "older_woman", "keywords": ["human", "female", "women", "lady", "old", "elder", "senior"] },
-	{ "category": "people", "char": "👲", "name": "man_with_gua_pi_mao", "keywords": ["male", "boy", "chinese"] },
-	{ "category": "people", "char": "🧕", "name": "woman_with_headscarf", "keywords": ["female", "hijab", "mantilla", "tichel"] },
-	{ "category": "people", "char": "👳‍♀️", "name": "woman_with_turban", "keywords": ["female", "indian", "hinduism", "arabs", "woman"] },
-	{ "category": "people", "char": "👳", "name": "man_with_turban", "keywords": ["male", "indian", "hinduism", "arabs"] },
-	{ "category": "people", "char": "👮‍♀️", "name": "policewoman", "keywords": ["woman", "police", "law", "legal", "enforcement", "arrest", "911", "female"] },
-	{ "category": "people", "char": "👮", "name": "policeman", "keywords": ["man", "police", "law", "legal", "enforcement", "arrest", "911"] },
-	{ "category": "people", "char": "👷‍♀️", "name": "construction_worker_woman", "keywords": ["female", "human", "wip", "build", "construction", "worker", "labor", "woman"] },
-	{ "category": "people", "char": "👷", "name": "construction_worker_man", "keywords": ["male", "human", "wip", "guy", "build", "construction", "worker", "labor"] },
-	{ "category": "people", "char": "💂‍♀️", "name": "guardswoman", "keywords": ["uk", "gb", "british", "female", "royal", "woman"] },
-	{ "category": "people", "char": "💂", "name": "guardsman", "keywords": ["uk", "gb", "british", "male", "guy", "royal"] },
-	{ "category": "people", "char": "🕵️‍♀️", "name": "female_detective", "keywords": ["human", "spy", "detective", "female", "woman"] },
-	{ "category": "people", "char": "🕵", "name": "male_detective", "keywords": ["human", "spy", "detective"] },
-	{ "category": "people", "char": "🧑‍⚕️", "name": "health_worker", "keywords": ["doctor", "nurse", "therapist", "healthcare", "human"] },
-	{ "category": "people", "char": "👩‍⚕️", "name": "woman_health_worker", "keywords": ["doctor", "nurse", "therapist", "healthcare", "woman", "human"] },
-	{ "category": "people", "char": "👨‍⚕️", "name": "man_health_worker", "keywords": ["doctor", "nurse", "therapist", "healthcare", "man", "human"] },
-	{ "category": "people", "char": "🧑‍🌾", "name": "farmer", "keywords": ["rancher", "gardener", "human"] },
-	{ "category": "people", "char": "👩‍🌾", "name": "woman_farmer", "keywords": ["rancher", "gardener", "woman", "human"] },
-	{ "category": "people", "char": "👨‍🌾", "name": "man_farmer", "keywords": ["rancher", "gardener", "man", "human"] },
-	{ "category": "people", "char": "🧑‍🍳", "name": "cook", "keywords": ["chef", "human"] },
-	{ "category": "people", "char": "👩‍🍳", "name": "woman_cook", "keywords": ["chef", "woman", "human"] },
-	{ "category": "people", "char": "👨‍🍳", "name": "man_cook", "keywords": ["chef", "man", "human"] },
-	{ "category": "people", "char": "🧑‍🎓", "name": "student", "keywords": ["graduate", "human"] },
-	{ "category": "people", "char": "👩‍🎓", "name": "woman_student", "keywords": ["graduate", "woman", "human"] },
-	{ "category": "people", "char": "👨‍🎓", "name": "man_student", "keywords": ["graduate", "man", "human"] },
-	{ "category": "people", "char": "🧑‍🎤", "name": "singer", "keywords": ["rockstar", "entertainer", "human"] },
-	{ "category": "people", "char": "👩‍🎤", "name": "woman_singer", "keywords": ["rockstar", "entertainer", "woman", "human"] },
-	{ "category": "people", "char": "👨‍🎤", "name": "man_singer", "keywords": ["rockstar", "entertainer", "man", "human"] },
-	{ "category": "people", "char": "🧑‍🏫", "name": "teacher", "keywords": ["instructor", "professor", "human"] },
-	{ "category": "people", "char": "👩‍🏫", "name": "woman_teacher", "keywords": ["instructor", "professor", "woman", "human"] },
-	{ "category": "people", "char": "👨‍🏫", "name": "man_teacher", "keywords": ["instructor", "professor", "man", "human"] },
-	{ "category": "people", "char": "🧑‍🏭", "name": "factory_worker", "keywords": ["assembly", "industrial", "human"] },
-	{ "category": "people", "char": "👩‍🏭", "name": "woman_factory_worker", "keywords": ["assembly", "industrial", "woman", "human"] },
-	{ "category": "people", "char": "👨‍🏭", "name": "man_factory_worker", "keywords": ["assembly", "industrial", "man", "human"] },
-	{ "category": "people", "char": "🧑‍💻", "name": "technologist", "keywords": ["coder", "developer", "engineer", "programmer", "software", "human", "laptop", "computer"] },
-	{ "category": "people", "char": "👩‍💻", "name": "woman_technologist", "keywords": ["coder", "developer", "engineer", "programmer", "software", "woman", "human", "laptop", "computer"] },
-	{ "category": "people", "char": "👨‍💻", "name": "man_technologist", "keywords": ["coder", "developer", "engineer", "programmer", "software", "man", "human", "laptop", "computer"] },
-	{ "category": "people", "char": "🧑‍💼", "name": "office_worker", "keywords": ["business", "manager", "human"] },
-	{ "category": "people", "char": "👩‍💼", "name": "woman_office_worker", "keywords": ["business", "manager", "woman", "human"] },
-	{ "category": "people", "char": "👨‍💼", "name": "man_office_worker", "keywords": ["business", "manager", "man", "human"] },
-	{ "category": "people", "char": "🧑‍🔧", "name": "mechanic", "keywords": ["plumber", "human", "wrench"] },
-	{ "category": "people", "char": "👩‍🔧", "name": "woman_mechanic", "keywords": ["plumber", "woman", "human", "wrench"] },
-	{ "category": "people", "char": "👨‍🔧", "name": "man_mechanic", "keywords": ["plumber", "man", "human", "wrench"] },
-	{ "category": "people", "char": "🧑‍🔬", "name": "scientist", "keywords": ["biologist", "chemist", "engineer", "physicist", "human"] },
-	{ "category": "people", "char": "👩‍🔬", "name": "woman_scientist", "keywords": ["biologist", "chemist", "engineer", "physicist", "woman", "human"] },
-	{ "category": "people", "char": "👨‍🔬", "name": "man_scientist", "keywords": ["biologist", "chemist", "engineer", "physicist", "man", "human"] },
-	{ "category": "people", "char": "🧑‍🎨", "name": "artist", "keywords": ["painter", "human"] },
-	{ "category": "people", "char": "👩‍🎨", "name": "woman_artist", "keywords": ["painter", "woman", "human"] },
-	{ "category": "people", "char": "👨‍🎨", "name": "man_artist", "keywords": ["painter", "man", "human"] },
-	{ "category": "people", "char": "🧑‍🚒", "name": "firefighter", "keywords": ["fireman", "human"] },
-	{ "category": "people", "char": "👩‍🚒", "name": "woman_firefighter", "keywords": ["fireman", "woman", "human"] },
-	{ "category": "people", "char": "👨‍🚒", "name": "man_firefighter", "keywords": ["fireman", "man", "human"] },
-	{ "category": "people", "char": "🧑‍✈️", "name": "pilot", "keywords": ["aviator", "plane", "human"] },
-	{ "category": "people", "char": "👩‍✈️", "name": "woman_pilot", "keywords": ["aviator", "plane", "woman", "human"] },
-	{ "category": "people", "char": "👨‍✈️", "name": "man_pilot", "keywords": ["aviator", "plane", "man", "human"] },
-	{ "category": "people", "char": "🧑‍🚀", "name": "astronaut", "keywords": ["space", "rocket", "human"] },
-	{ "category": "people", "char": "👩‍🚀", "name": "woman_astronaut", "keywords": ["space", "rocket", "woman", "human"] },
-	{ "category": "people", "char": "👨‍🚀", "name": "man_astronaut", "keywords": ["space", "rocket", "man", "human"] },
-	{ "category": "people", "char": "🧑‍⚖️", "name": "judge", "keywords": ["justice", "court", "human"] },
-	{ "category": "people", "char": "👩‍⚖️", "name": "woman_judge", "keywords": ["justice", "court", "woman", "human"] },
-	{ "category": "people", "char": "👨‍⚖️", "name": "man_judge", "keywords": ["justice", "court", "man", "human"] },
-	{ "category": "people", "char": "🦸‍♀️", "name": "woman_superhero", "keywords": ["woman", "female", "good", "heroine", "superpowers"] },
-	{ "category": "people", "char": "🦸‍♂️", "name": "man_superhero", "keywords": ["man", "male", "good", "hero", "superpowers"] },
-	{ "category": "people", "char": "🦹‍♀️", "name": "woman_supervillain", "keywords": ["woman", "female", "evil", "bad", "criminal", "heroine", "superpowers"] },
-	{ "category": "people", "char": "🦹‍♂️", "name": "man_supervillain", "keywords": ["man", "male", "evil", "bad", "criminal", "hero", "superpowers"] },
-	{ "category": "people", "char": "🤶", "name": "mrs_claus", "keywords": ["woman", "female", "xmas", "mother christmas"] },
-	{ "category": "people", "char": "\uD83E\uDDD1\u200D\uD83C\uDF84", "name": "mx_claus", "keywords": ["xmas", "christmas"] },
-	{ "category": "people", "char": "🎅", "name": "santa", "keywords": ["festival", "man", "male", "xmas", "father christmas"] },
-	{ "category": "people", "char": "🥷", "name": "ninja", "keywords": [] },
-	{ "category": "people", "char": "🧙‍♀️", "name": "sorceress", "keywords": ["woman", "female", "mage", "witch"] },
-	{ "category": "people", "char": "🧙‍♂️", "name": "wizard", "keywords": ["man", "male", "mage", "sorcerer"] },
-	{ "category": "people", "char": "🧝‍♀️", "name": "woman_elf", "keywords": ["woman", "female"] },
-	{ "category": "people", "char": "🧝‍♂️", "name": "man_elf", "keywords": ["man", "male"] },
-	{ "category": "people", "char": "🧛‍♀️", "name": "woman_vampire", "keywords": ["woman", "female"] },
-	{ "category": "people", "char": "🧛‍♂️", "name": "man_vampire", "keywords": ["man", "male", "dracula"] },
-	{ "category": "people", "char": "🧟‍♀️", "name": "woman_zombie", "keywords": ["woman", "female", "undead", "walking dead"] },
-	{ "category": "people", "char": "🧟‍♂️", "name": "man_zombie", "keywords": ["man", "male", "dracula", "undead", "walking dead"] },
-	{ "category": "people", "char": "🧞‍♀️", "name": "woman_genie", "keywords": ["woman", "female"] },
-	{ "category": "people", "char": "🧞‍♂️", "name": "man_genie", "keywords": ["man", "male"] },
-	{ "category": "people", "char": "🧜‍♀️", "name": "mermaid", "keywords": ["woman", "female", "merwoman", "ariel"] },
-	{ "category": "people", "char": "🧜‍♂️", "name": "merman", "keywords": ["man", "male", "triton"] },
-	{ "category": "people", "char": "🧚‍♀️", "name": "woman_fairy", "keywords": ["woman", "female"] },
-	{ "category": "people", "char": "🧚‍♂️", "name": "man_fairy", "keywords": ["man", "male"] },
-	{ "category": "people", "char": "👼", "name": "angel", "keywords": ["heaven", "wings", "halo"] },
-	{ "category": "people", "char": "\uD83E\uDDCC", "name": "troll", "keywords": [] },
-	{ "category": "people", "char": "🤰", "name": "pregnant_woman", "keywords": ["baby"] },
-	{ "category": "people", "char": "\uD83E\uDEC3", "name": "pregnant_man", "keywords": [] },
-	{ "category": "people", "char": "\uD83E\uDEC4", "name": "pregnant_person", "keywords": [] },
-	{ "category": "people", "char": "\uD83E\uDEC5", "name": "person_with_crown", "keywords": [] },
-	{ "category": "people", "char": "🤱", "name": "breastfeeding", "keywords": ["nursing", "baby"] },
-	{ "category": "people", "char": "\uD83D\uDC69\u200D\uD83C\uDF7C", "name": "woman_feeding_baby", "keywords": [] },
-	{ "category": "people", "char": "\uD83D\uDC68\u200D\uD83C\uDF7C", "name": "man_feeding_baby", "keywords": [] },
-	{ "category": "people", "char": "\uD83E\uDDD1\u200D\uD83C\uDF7C", "name": "person_feeding_baby", "keywords": [] },
-	{ "category": "people", "char": "👸", "name": "princess", "keywords": ["girl", "woman", "female", "blond", "crown", "royal", "queen"] },
-	{ "category": "people", "char": "🤴", "name": "prince", "keywords": ["boy", "man", "male", "crown", "royal", "king"] },
-	{ "category": "people", "char": "👰", "name": "person_with_veil", "keywords": ["couple", "marriage", "wedding", "woman", "bride"] },
-	{ "category": "people", "char": "👰", "name": "bride_with_veil", "keywords": ["couple", "marriage", "wedding", "woman", "bride"] },
-	{ "category": "people", "char": "🤵", "name": "person_in_tuxedo", "keywords": ["couple", "marriage", "wedding", "groom"] },
-	{ "category": "people", "char": "🤵", "name": "man_in_tuxedo", "keywords": ["couple", "marriage", "wedding", "groom"] },
-	{ "category": "people", "char": "🏃‍♀️", "name": "running_woman", "keywords": ["woman", "walking", "exercise", "race", "running", "female"] },
-	{ "category": "people", "char": "🏃", "name": "running_man", "keywords": ["man", "walking", "exercise", "race", "running"] },
-	{ "category": "people", "char": "🚶‍♀️", "name": "walking_woman", "keywords": ["human", "feet", "steps", "woman", "female"] },
-	{ "category": "people", "char": "🚶", "name": "walking_man", "keywords": ["human", "feet", "steps"] },
-	{ "category": "people", "char": "💃", "name": "dancer", "keywords": ["female", "girl", "woman", "fun"] },
-	{ "category": "people", "char": "🕺", "name": "man_dancing", "keywords": ["male", "boy", "fun", "dancer"] },
-	{ "category": "people", "char": "👯", "name": "dancing_women", "keywords": ["female", "bunny", "women", "girls"] },
-	{ "category": "people", "char": "👯‍♂️", "name": "dancing_men", "keywords": ["male", "bunny", "men", "boys"] },
-	{ "category": "people", "char": "👫", "name": "couple", "keywords": ["pair", "people", "human", "love", "date", "dating", "like", "affection", "valentines", "marriage"] },
-	{ "category": "people", "char": "\uD83E\uDDD1\u200D\uD83E\uDD1D\u200D\uD83E\uDDD1", "name": "people_holding_hands", "keywords": ["pair", "couple", "love", "like", "bromance", "friendship", "people", "human"] },
-	{ "category": "people", "char": "👬", "name": "two_men_holding_hands", "keywords": ["pair", "couple", "love", "like", "bromance", "friendship", "people", "man", "human"] },
-	{ "category": "people", "char": "👭", "name": "two_women_holding_hands", "keywords": ["pair", "couple", "love", "like", "bromance", "friendship", "people", "female", "human"] },
-	{ "category": "people", "char": "🫂", "name": "people_hugging", "keywords": [] },
-	{ "category": "people", "char": "🙇‍♀️", "name": "bowing_woman", "keywords": ["woman", "female", "girl"] },
-	{ "category": "people", "char": "🙇", "name": "bowing_man", "keywords": ["man", "male", "boy"] },
-	{ "category": "people", "char": "🤦‍♂️", "name": "man_facepalming", "keywords": ["man", "male", "boy", "disbelief"] },
-	{ "category": "people", "char": "🤦‍♀️", "name": "woman_facepalming", "keywords": ["woman", "female", "girl", "disbelief"] },
-	{ "category": "people", "char": "🤷", "name": "woman_shrugging", "keywords": ["woman", "female", "girl", "confused", "indifferent", "doubt"] },
-	{ "category": "people", "char": "🤷‍♂️", "name": "man_shrugging", "keywords": ["man", "male", "boy", "confused", "indifferent", "doubt"] },
-	{ "category": "people", "char": "💁", "name": "tipping_hand_woman", "keywords": ["female", "girl", "woman", "human", "information"] },
-	{ "category": "people", "char": "💁‍♂️", "name": "tipping_hand_man", "keywords": ["male", "boy", "man", "human", "information"] },
-	{ "category": "people", "char": "🙅", "name": "no_good_woman", "keywords": ["female", "girl", "woman", "nope"] },
-	{ "category": "people", "char": "🙅‍♂️", "name": "no_good_man", "keywords": ["male", "boy", "man", "nope"] },
-	{ "category": "people", "char": "🙆", "name": "ok_woman", "keywords": ["women", "girl", "female", "pink", "human", "woman"] },
-	{ "category": "people", "char": "🙆‍♂️", "name": "ok_man", "keywords": ["men", "boy", "male", "blue", "human", "man"] },
-	{ "category": "people", "char": "🙋", "name": "raising_hand_woman", "keywords": ["female", "girl", "woman"] },
-	{ "category": "people", "char": "🙋‍♂️", "name": "raising_hand_man", "keywords": ["male", "boy", "man"] },
-	{ "category": "people", "char": "🙎", "name": "pouting_woman", "keywords": ["female", "girl", "woman"] },
-	{ "category": "people", "char": "🙎‍♂️", "name": "pouting_man", "keywords": ["male", "boy", "man"] },
-	{ "category": "people", "char": "🙍", "name": "frowning_woman", "keywords": ["female", "girl", "woman", "sad", "depressed", "discouraged", "unhappy"] },
-	{ "category": "people", "char": "🙍‍♂️", "name": "frowning_man", "keywords": ["male", "boy", "man", "sad", "depressed", "discouraged", "unhappy"] },
-	{ "category": "people", "char": "💇", "name": "haircut_woman", "keywords": ["female", "girl", "woman"] },
-	{ "category": "people", "char": "💇‍♂️", "name": "haircut_man", "keywords": ["male", "boy", "man"] },
-	{ "category": "people", "char": "💆", "name": "massage_woman", "keywords": ["female", "girl", "woman", "head"] },
-	{ "category": "people", "char": "💆‍♂️", "name": "massage_man", "keywords": ["male", "boy", "man", "head"] },
-	{ "category": "people", "char": "🧖‍♀️", "name": "woman_in_steamy_room", "keywords": ["female", "woman", "spa", "steamroom", "sauna"] },
-	{ "category": "people", "char": "🧖‍♂️", "name": "man_in_steamy_room", "keywords": ["male", "man", "spa", "steamroom", "sauna"] },
-	{ "category": "people", "char": "🧏‍♀️", "name": "woman_deaf", "keywords": ["woman", "female"] },
-	{ "category": "people", "char": "🧏‍♂️", "name": "man_deaf", "keywords": ["man", "male"] },
-	{ "category": "people", "char": "🧍‍♀️", "name": "woman_standing", "keywords": ["woman", "female"] },
-	{ "category": "people", "char": "🧍‍♂️", "name": "man_standing", "keywords": ["man", "male"] },
-	{ "category": "people", "char": "🧎‍♀️", "name": "woman_kneeling", "keywords": ["woman", "female"] },
-	{ "category": "people", "char": "🧎‍♂️", "name": "man_kneeling", "keywords": ["man", "male"] },
-	{ "category": "people", "char": "🧑‍🦯", "name": "person_with_probing_cane", "keywords": ["accessibility", "blind"] },
-	{ "category": "people", "char": "👩‍🦯", "name": "woman_with_probing_cane", "keywords": ["woman", "female", "accessibility", "blind"] },
-	{ "category": "people", "char": "👨‍🦯", "name": "man_with_probing_cane", "keywords": ["man", "male", "accessibility", "blind"] },
-	{ "category": "people", "char": "🧑‍🦼", "name": "person_in_motorized_wheelchair", "keywords": ["accessibility"] },
-	{ "category": "people", "char": "👩‍🦼", "name": "woman_in_motorized_wheelchair", "keywords": ["woman", "female", "accessibility"] },
-	{ "category": "people", "char": "👨‍🦼", "name": "man_in_motorized_wheelchair", "keywords": ["man", "male", "accessibility"] },
-	{ "category": "people", "char": "🧑‍🦽", "name": "person_in_manual_wheelchair", "keywords": ["accessibility"] },
-	{ "category": "people", "char": "👩‍🦽", "name": "woman_in_manual_wheelchair", "keywords": ["woman", "female", "accessibility"] },
-	{ "category": "people", "char": "👨‍🦽", "name": "man_in_manual_wheelchair", "keywords": ["man", "male", "accessibility"] },
-	{ "category": "people", "char": "💑", "name": "couple_with_heart_woman_man", "keywords": ["pair", "love", "like", "affection", "human", "dating", "valentines", "marriage"] },
-	{ "category": "people", "char": "👩‍❤️‍👩", "name": "couple_with_heart_woman_woman", "keywords": ["pair", "love", "like", "affection", "human", "dating", "valentines", "marriage"] },
-	{ "category": "people", "char": "👨‍❤️‍👨", "name": "couple_with_heart_man_man", "keywords": ["pair", "love", "like", "affection", "human", "dating", "valentines", "marriage"] },
-	{ "category": "people", "char": "💏", "name": "couplekiss_man_woman", "keywords": ["pair", "valentines", "love", "like", "dating", "marriage"] },
-	{ "category": "people", "char": "👩‍❤️‍💋‍👩", "name": "couplekiss_woman_woman", "keywords": ["pair", "valentines", "love", "like", "dating", "marriage"] },
-	{ "category": "people", "char": "👨‍❤️‍💋‍👨", "name": "couplekiss_man_man", "keywords": ["pair", "valentines", "love", "like", "dating", "marriage"] },
-	{ "category": "people", "char": "👪", "name": "family_man_woman_boy", "keywords": ["home", "parents", "child", "mom", "dad", "father", "mother", "people", "human"] },
-	{ "category": "people", "char": "👨‍👩‍👧", "name": "family_man_woman_girl", "keywords": ["home", "parents", "people", "human", "child"] },
-	{ "category": "people", "char": "👨‍👩‍👧‍👦", "name": "family_man_woman_girl_boy", "keywords": ["home", "parents", "people", "human", "children"] },
-	{ "category": "people", "char": "👨‍👩‍👦‍👦", "name": "family_man_woman_boy_boy", "keywords": ["home", "parents", "people", "human", "children"] },
-	{ "category": "people", "char": "👨‍👩‍👧‍👧", "name": "family_man_woman_girl_girl", "keywords": ["home", "parents", "people", "human", "children"] },
-	{ "category": "people", "char": "👩‍👩‍👦", "name": "family_woman_woman_boy", "keywords": ["home", "parents", "people", "human", "children"] },
-	{ "category": "people", "char": "👩‍👩‍👧", "name": "family_woman_woman_girl", "keywords": ["home", "parents", "people", "human", "children"] },
-	{ "category": "people", "char": "👩‍👩‍👧‍👦", "name": "family_woman_woman_girl_boy", "keywords": ["home", "parents", "people", "human", "children"] },
-	{ "category": "people", "char": "👩‍👩‍👦‍👦", "name": "family_woman_woman_boy_boy", "keywords": ["home", "parents", "people", "human", "children"] },
-	{ "category": "people", "char": "👩‍👩‍👧‍👧", "name": "family_woman_woman_girl_girl", "keywords": ["home", "parents", "people", "human", "children"] },
-	{ "category": "people", "char": "👨‍👨‍👦", "name": "family_man_man_boy", "keywords": ["home", "parents", "people", "human", "children"] },
-	{ "category": "people", "char": "👨‍👨‍👧", "name": "family_man_man_girl", "keywords": ["home", "parents", "people", "human", "children"] },
-	{ "category": "people", "char": "👨‍👨‍👧‍👦", "name": "family_man_man_girl_boy", "keywords": ["home", "parents", "people", "human", "children"] },
-	{ "category": "people", "char": "👨‍👨‍👦‍👦", "name": "family_man_man_boy_boy", "keywords": ["home", "parents", "people", "human", "children"] },
-	{ "category": "people", "char": "👨‍👨‍👧‍👧", "name": "family_man_man_girl_girl", "keywords": ["home", "parents", "people", "human", "children"] },
-	{ "category": "people", "char": "👩‍👦", "name": "family_woman_boy", "keywords": ["home", "parent", "people", "human", "child"] },
-	{ "category": "people", "char": "👩‍👧", "name": "family_woman_girl", "keywords": ["home", "parent", "people", "human", "child"] },
-	{ "category": "people", "char": "👩‍👧‍👦", "name": "family_woman_girl_boy", "keywords": ["home", "parent", "people", "human", "children"] },
-	{ "category": "people", "char": "👩‍👦‍👦", "name": "family_woman_boy_boy", "keywords": ["home", "parent", "people", "human", "children"] },
-	{ "category": "people", "char": "👩‍👧‍👧", "name": "family_woman_girl_girl", "keywords": ["home", "parent", "people", "human", "children"] },
-	{ "category": "people", "char": "👨‍👦", "name": "family_man_boy", "keywords": ["home", "parent", "people", "human", "child"] },
-	{ "category": "people", "char": "👨‍👧", "name": "family_man_girl", "keywords": ["home", "parent", "people", "human", "child"] },
-	{ "category": "people", "char": "👨‍👧‍👦", "name": "family_man_girl_boy", "keywords": ["home", "parent", "people", "human", "children"] },
-	{ "category": "people", "char": "👨‍👦‍👦", "name": "family_man_boy_boy", "keywords": ["home", "parent", "people", "human", "children"] },
-	{ "category": "people", "char": "👨‍👧‍👧", "name": "family_man_girl_girl", "keywords": ["home", "parent", "people", "human", "children"] },
-	{ "category": "people", "char": "🧶", "name": "yarn", "keywords": ["ball", "crochet", "knit"] },
-	{ "category": "people", "char": "🧵", "name": "thread", "keywords": ["needle", "sewing", "spool", "string"] },
-	{ "category": "people", "char": "🧥", "name": "coat", "keywords": ["jacket"] },
-	{ "category": "people", "char": "🥼", "name": "labcoat", "keywords": ["doctor", "experiment", "scientist", "chemist"] },
-	{ "category": "people", "char": "👚", "name": "womans_clothes", "keywords": ["fashion", "shopping_bags", "female"] },
-	{ "category": "people", "char": "👕", "name": "tshirt", "keywords": ["fashion", "cloth", "casual", "shirt", "tee"] },
-	{ "category": "people", "char": "👖", "name": "jeans", "keywords": ["fashion", "shopping"] },
-	{ "category": "people", "char": "👔", "name": "necktie", "keywords": ["shirt", "suitup", "formal", "fashion", "cloth", "business"] },
-	{ "category": "people", "char": "👗", "name": "dress", "keywords": ["clothes", "fashion", "shopping"] },
-	{ "category": "people", "char": "👙", "name": "bikini", "keywords": ["swimming", "female", "woman", "girl", "fashion", "beach", "summer"] },
-	{ "category": "people", "char": "🩱", "name": "one_piece_swimsuit", "keywords": ["swimming", "female", "woman", "girl", "fashion", "beach", "summer"] },
-	{ "category": "people", "char": "👘", "name": "kimono", "keywords": ["dress", "fashion", "women", "female", "japanese"] },
-	{ "category": "people", "char": "🥻", "name": "sari", "keywords": ["dress", "fashion", "women", "female"] },
-	{ "category": "people", "char": "🩲", "name": "briefs", "keywords": ["dress", "fashion"] },
-	{ "category": "people", "char": "🩳", "name": "shorts", "keywords": ["dress", "fashion"] },
-	{ "category": "people", "char": "💄", "name": "lipstick", "keywords": ["female", "girl", "fashion", "woman"] },
-	{ "category": "people", "char": "💋", "name": "kiss", "keywords": ["face", "lips", "love", "like", "affection", "valentines"] },
-	{ "category": "people", "char": "👣", "name": "footprints", "keywords": ["feet", "tracking", "walking", "beach"] },
-	{ "category": "people", "char": "🥿", "name": "flat_shoe", "keywords": ["ballet", "slip-on", "slipper"] },
-	{ "category": "people", "char": "👠", "name": "high_heel", "keywords": ["fashion", "shoes", "female", "pumps", "stiletto"] },
-	{ "category": "people", "char": "👡", "name": "sandal", "keywords": ["shoes", "fashion", "flip flops"] },
-	{ "category": "people", "char": "👢", "name": "boot", "keywords": ["shoes", "fashion"] },
-	{ "category": "people", "char": "👞", "name": "mans_shoe", "keywords": ["fashion", "male"] },
-	{ "category": "people", "char": "👟", "name": "athletic_shoe", "keywords": ["shoes", "sports", "sneakers"] },
-	{ "category": "people", "char": "🩴", "name": "thong_sandal", "keywords": [] },
-	{ "category": "people", "char": "🩰", "name": "ballet_shoes", "keywords": ["shoes", "sports"] },
-	{ "category": "people", "char": "🧦", "name": "socks", "keywords": ["stockings", "clothes"] },
-	{ "category": "people", "char": "🧤", "name": "gloves", "keywords": ["hands", "winter", "clothes"] },
-	{ "category": "people", "char": "🧣", "name": "scarf", "keywords": ["neck", "winter", "clothes"] },
-	{ "category": "people", "char": "👒", "name": "womans_hat", "keywords": ["fashion", "accessories", "female", "lady", "spring"] },
-	{ "category": "people", "char": "🎩", "name": "tophat", "keywords": ["magic", "gentleman", "classy", "circus"] },
-	{ "category": "people", "char": "🧢", "name": "billed_hat", "keywords": ["cap", "baseball"] },
-	{ "category": "people", "char": "⛑", "name": "rescue_worker_helmet", "keywords": ["construction", "build"] },
-	{ "category": "people", "char": "🪖", "name": "military_helmet", "keywords": [] },
-	{ "category": "people", "char": "🎓", "name": "mortar_board", "keywords": ["school", "college", "degree", "university", "graduation", "cap", "hat", "legal", "learn", "education"] },
-	{ "category": "people", "char": "👑", "name": "crown", "keywords": ["king", "kod", "leader", "royalty", "lord"] },
-	{ "category": "people", "char": "🎒", "name": "school_satchel", "keywords": ["student", "education", "bag", "backpack"] },
-	{ "category": "people", "char": "🧳", "name": "luggage", "keywords": ["packing", "travel"] },
-	{ "category": "people", "char": "👝", "name": "pouch", "keywords": ["bag", "accessories", "shopping"] },
-	{ "category": "people", "char": "👛", "name": "purse", "keywords": ["fashion", "accessories", "money", "sales", "shopping"] },
-	{ "category": "people", "char": "👜", "name": "handbag", "keywords": ["fashion", "accessory", "accessories", "shopping"] },
-	{ "category": "people", "char": "💼", "name": "briefcase", "keywords": ["business", "documents", "work", "law", "legal", "job", "career"] },
-	{ "category": "people", "char": "👓", "name": "eyeglasses", "keywords": ["fashion", "accessories", "eyesight", "nerdy", "dork", "geek"] },
-	{ "category": "people", "char": "🕶", "name": "dark_sunglasses", "keywords": ["face", "cool", "accessories"] },
-	{ "category": "people", "char": "🥽", "name": "goggles", "keywords": ["eyes", "protection", "safety"] },
-	{ "category": "people", "char": "💍", "name": "ring", "keywords": ["wedding", "propose", "marriage", "valentines", "diamond", "fashion", "jewelry", "gem", "engagement"] },
-	{ "category": "people", "char": "🌂", "name": "closed_umbrella", "keywords": ["weather", "rain", "drizzle"] },
-	{ "category": "animals_and_nature", "char": "🐶", "name": "dog", "keywords": ["animal", "friend", "nature", "woof", "puppy", "pet", "faithful"] },
-	{ "category": "animals_and_nature", "char": "🐱", "name": "cat", "keywords": ["animal", "meow", "nature", "pet", "kitten"] },
-	{ "category": "animals_and_nature", "char": "🐈‍⬛", "name": "black_cat", "keywords": ["animal", "meow", "nature", "pet", "kitten"] },
-	{ "category": "animals_and_nature", "char": "🐭", "name": "mouse", "keywords": ["animal", "nature", "cheese_wedge", "rodent"] },
-	{ "category": "animals_and_nature", "char": "🐹", "name": "hamster", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🐰", "name": "rabbit", "keywords": ["animal", "nature", "pet", "spring", "magic", "bunny"] },
-	{ "category": "animals_and_nature", "char": "🦊", "name": "fox_face", "keywords": ["animal", "nature", "face"] },
-	{ "category": "animals_and_nature", "char": "🐻", "name": "bear", "keywords": ["animal", "nature", "wild"] },
-	{ "category": "animals_and_nature", "char": "🐼", "name": "panda_face", "keywords": ["animal", "nature", "panda"] },
-	{ "category": "animals_and_nature", "char": "🐨", "name": "koala", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🐯", "name": "tiger", "keywords": ["animal", "cat", "danger", "wild", "nature", "roar"] },
-	{ "category": "animals_and_nature", "char": "🦁", "name": "lion", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🐮", "name": "cow", "keywords": ["beef", "ox", "animal", "nature", "moo", "milk"] },
-	{ "category": "animals_and_nature", "char": "🐷", "name": "pig", "keywords": ["animal", "oink", "nature"] },
-	{ "category": "animals_and_nature", "char": "🐽", "name": "pig_nose", "keywords": ["animal", "oink"] },
-	{ "category": "animals_and_nature", "char": "🐸", "name": "frog", "keywords": ["animal", "nature", "croak", "toad"] },
-	{ "category": "animals_and_nature", "char": "🦑", "name": "squid", "keywords": ["animal", "nature", "ocean", "sea"] },
-	{ "category": "animals_and_nature", "char": "🐙", "name": "octopus", "keywords": ["animal", "creature", "ocean", "sea", "nature", "beach"] },
-	{ "category": "animals_and_nature", "char": "🦐", "name": "shrimp", "keywords": ["animal", "ocean", "nature", "seafood"] },
-	{ "category": "animals_and_nature", "char": "🐵", "name": "monkey_face", "keywords": ["animal", "nature", "circus"] },
-	{ "category": "animals_and_nature", "char": "🦍", "name": "gorilla", "keywords": ["animal", "nature", "circus"] },
-	{ "category": "animals_and_nature", "char": "🙈", "name": "see_no_evil", "keywords": ["monkey", "animal", "nature", "haha"] },
-	{ "category": "animals_and_nature", "char": "🙉", "name": "hear_no_evil", "keywords": ["animal", "monkey", "nature"] },
-	{ "category": "animals_and_nature", "char": "🙊", "name": "speak_no_evil", "keywords": ["monkey", "animal", "nature", "omg"] },
-	{ "category": "animals_and_nature", "char": "🐒", "name": "monkey", "keywords": ["animal", "nature", "banana", "circus"] },
-	{ "category": "animals_and_nature", "char": "🐔", "name": "chicken", "keywords": ["animal", "cluck", "nature", "bird"] },
-	{ "category": "animals_and_nature", "char": "🐧", "name": "penguin", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🐦", "name": "bird", "keywords": ["animal", "nature", "fly", "tweet", "spring"] },
-	{ "category": "animals_and_nature", "char": "🐤", "name": "baby_chick", "keywords": ["animal", "chicken", "bird"] },
-	{ "category": "animals_and_nature", "char": "🐣", "name": "hatching_chick", "keywords": ["animal", "chicken", "egg", "born", "baby", "bird"] },
-	{ "category": "animals_and_nature", "char": "🐥", "name": "hatched_chick", "keywords": ["animal", "chicken", "baby", "bird"] },
-	{ "category": "animals_and_nature", "char": "🦆", "name": "duck", "keywords": ["animal", "nature", "bird", "mallard"] },
-	{ "category": "animals_and_nature", "char": "🦅", "name": "eagle", "keywords": ["animal", "nature", "bird"] },
-	{ "category": "animals_and_nature", "char": "🦉", "name": "owl", "keywords": ["animal", "nature", "bird", "hoot"] },
-	{ "category": "animals_and_nature", "char": "🦇", "name": "bat", "keywords": ["animal", "nature", "blind", "vampire"] },
-	{ "category": "animals_and_nature", "char": "🐺", "name": "wolf", "keywords": ["animal", "nature", "wild"] },
-	{ "category": "animals_and_nature", "char": "🐗", "name": "boar", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🐴", "name": "horse", "keywords": ["animal", "brown", "nature"] },
-	{ "category": "animals_and_nature", "char": "🦄", "name": "unicorn", "keywords": ["animal", "nature", "mystical"] },
-	{ "category": "animals_and_nature", "char": "🐝", "name": "honeybee", "keywords": ["animal", "insect", "nature", "bug", "spring", "honey"] },
-	{ "category": "animals_and_nature", "char": "🐛", "name": "bug", "keywords": ["animal", "insect", "nature", "worm"] },
-	{ "category": "animals_and_nature", "char": "🦋", "name": "butterfly", "keywords": ["animal", "insect", "nature", "caterpillar"] },
-	{ "category": "animals_and_nature", "char": "🐌", "name": "snail", "keywords": ["slow", "animal", "shell"] },
-	{ "category": "animals_and_nature", "char": "🐞", "name": "lady_beetle", "keywords": ["animal", "insect", "nature", "ladybug"] },
-	{ "category": "animals_and_nature", "char": "🐜", "name": "ant", "keywords": ["animal", "insect", "nature", "bug"] },
-	{ "category": "animals_and_nature", "char": "🦗", "name": "grasshopper", "keywords": ["animal", "cricket", "chirp"] },
-	{ "category": "animals_and_nature", "char": "🕷", "name": "spider", "keywords": ["animal", "arachnid"] },
-	{ "category": "animals_and_nature", "char": "🪲", "name": "beetle", "keywords": ["animal"] },
-	{ "category": "animals_and_nature", "char": "🪳", "name": "cockroach", "keywords": ["animal"] },
-	{ "category": "animals_and_nature", "char": "🪰", "name": "fly", "keywords": ["animal"] },
-	{ "category": "animals_and_nature", "char": "🪱", "name": "worm", "keywords": ["animal"] },
-	{ "category": "animals_and_nature", "char": "🦂", "name": "scorpion", "keywords": ["animal", "arachnid"] },
-	{ "category": "animals_and_nature", "char": "🦀", "name": "crab", "keywords": ["animal", "crustacean"] },
-	{ "category": "animals_and_nature", "char": "🐍", "name": "snake", "keywords": ["animal", "evil", "nature", "hiss", "python"] },
-	{ "category": "animals_and_nature", "char": "🦎", "name": "lizard", "keywords": ["animal", "nature", "reptile"] },
-	{ "category": "animals_and_nature", "char": "🦖", "name": "t-rex", "keywords": ["animal", "nature", "dinosaur", "tyrannosaurus", "extinct"] },
-	{ "category": "animals_and_nature", "char": "🦕", "name": "sauropod", "keywords": ["animal", "nature", "dinosaur", "brachiosaurus", "brontosaurus", "diplodocus", "extinct"] },
-	{ "category": "animals_and_nature", "char": "🐢", "name": "turtle", "keywords": ["animal", "slow", "nature", "tortoise"] },
-	{ "category": "animals_and_nature", "char": "🐠", "name": "tropical_fish", "keywords": ["animal", "swim", "ocean", "beach", "nemo"] },
-	{ "category": "animals_and_nature", "char": "🐟", "name": "fish", "keywords": ["animal", "food", "nature"] },
-	{ "category": "animals_and_nature", "char": "🐡", "name": "blowfish", "keywords": ["animal", "nature", "food", "sea", "ocean"] },
-	{ "category": "animals_and_nature", "char": "🐬", "name": "dolphin", "keywords": ["animal", "nature", "fish", "sea", "ocean", "flipper", "fins", "beach"] },
-	{ "category": "animals_and_nature", "char": "🦈", "name": "shark", "keywords": ["animal", "nature", "fish", "sea", "ocean", "jaws", "fins", "beach"] },
-	{ "category": "animals_and_nature", "char": "🐳", "name": "whale", "keywords": ["animal", "nature", "sea", "ocean"] },
-	{ "category": "animals_and_nature", "char": "🐋", "name": "whale2", "keywords": ["animal", "nature", "sea", "ocean"] },
-	{ "category": "animals_and_nature", "char": "🐊", "name": "crocodile", "keywords": ["animal", "nature", "reptile", "lizard", "alligator"] },
-	{ "category": "animals_and_nature", "char": "🐆", "name": "leopard", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🦓", "name": "zebra", "keywords": ["animal", "nature", "stripes", "safari"] },
-	{ "category": "animals_and_nature", "char": "🐅", "name": "tiger2", "keywords": ["animal", "nature", "roar"] },
-	{ "category": "animals_and_nature", "char": "🐃", "name": "water_buffalo", "keywords": ["animal", "nature", "ox", "cow"] },
-	{ "category": "animals_and_nature", "char": "🐂", "name": "ox", "keywords": ["animal", "cow", "beef"] },
-	{ "category": "animals_and_nature", "char": "🐄", "name": "cow2", "keywords": ["beef", "ox", "animal", "nature", "moo", "milk"] },
-	{ "category": "animals_and_nature", "char": "🦌", "name": "deer", "keywords": ["animal", "nature", "horns", "venison"] },
-	{ "category": "animals_and_nature", "char": "🐪", "name": "dromedary_camel", "keywords": ["animal", "hot", "desert", "hump"] },
-	{ "category": "animals_and_nature", "char": "🐫", "name": "camel", "keywords": ["animal", "nature", "hot", "desert", "hump"] },
-	{ "category": "animals_and_nature", "char": "🦒", "name": "giraffe", "keywords": ["animal", "nature", "spots", "safari"] },
-	{ "category": "animals_and_nature", "char": "🐘", "name": "elephant", "keywords": ["animal", "nature", "nose", "th", "circus"] },
-	{ "category": "animals_and_nature", "char": "🦏", "name": "rhinoceros", "keywords": ["animal", "nature", "horn"] },
-	{ "category": "animals_and_nature", "char": "🐐", "name": "goat", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🐏", "name": "ram", "keywords": ["animal", "sheep", "nature"] },
-	{ "category": "animals_and_nature", "char": "🐑", "name": "sheep", "keywords": ["animal", "nature", "wool", "shipit"] },
-	{ "category": "animals_and_nature", "char": "🐎", "name": "racehorse", "keywords": ["animal", "gamble", "luck"] },
-	{ "category": "animals_and_nature", "char": "🐖", "name": "pig2", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🐀", "name": "rat", "keywords": ["animal", "mouse", "rodent"] },
-	{ "category": "animals_and_nature", "char": "🐁", "name": "mouse2", "keywords": ["animal", "nature", "rodent"] },
-	{ "category": "animals_and_nature", "char": "🐓", "name": "rooster", "keywords": ["animal", "nature", "chicken"] },
-	{ "category": "animals_and_nature", "char": "🦃", "name": "turkey", "keywords": ["animal", "bird"] },
-	{ "category": "animals_and_nature", "char": "🕊", "name": "dove", "keywords": ["animal", "bird"] },
-	{ "category": "animals_and_nature", "char": "🐕", "name": "dog2", "keywords": ["animal", "nature", "friend", "doge", "pet", "faithful"] },
-	{ "category": "animals_and_nature", "char": "🐩", "name": "poodle", "keywords": ["dog", "animal", "101", "nature", "pet"] },
-	{ "category": "animals_and_nature", "char": "🐈", "name": "cat2", "keywords": ["animal", "meow", "pet", "cats"] },
-	{ "category": "animals_and_nature", "char": "🐇", "name": "rabbit2", "keywords": ["animal", "nature", "pet", "magic", "spring"] },
-	{ "category": "animals_and_nature", "char": "🐿", "name": "chipmunk", "keywords": ["animal", "nature", "rodent", "squirrel"] },
-	{ "category": "animals_and_nature", "char": "🦔", "name": "hedgehog", "keywords": ["animal", "nature", "spiny"] },
-	{ "category": "animals_and_nature", "char": "🦝", "name": "raccoon", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🦙", "name": "llama", "keywords": ["animal", "nature", "alpaca"] },
-	{ "category": "animals_and_nature", "char": "🦛", "name": "hippopotamus", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🦘", "name": "kangaroo", "keywords": ["animal", "nature", "australia", "joey", "hop", "marsupial"] },
-	{ "category": "animals_and_nature", "char": "🦡", "name": "badger", "keywords": ["animal", "nature", "honey"] },
-	{ "category": "animals_and_nature", "char": "🦢", "name": "swan", "keywords": ["animal", "nature", "bird"] },
-	{ "category": "animals_and_nature", "char": "🦚", "name": "peacock", "keywords": ["animal", "nature", "peahen", "bird"] },
-	{ "category": "animals_and_nature", "char": "🦜", "name": "parrot", "keywords": ["animal", "nature", "bird", "pirate", "talk"] },
-	{ "category": "animals_and_nature", "char": "🦞", "name": "lobster", "keywords": ["animal", "nature", "bisque", "claws", "seafood"] },
-	{ "category": "animals_and_nature", "char": "🦠", "name": "microbe", "keywords": ["amoeba", "bacteria", "germs"] },
-	{ "category": "animals_and_nature", "char": "🦟", "name": "mosquito", "keywords": ["animal", "nature", "insect", "malaria"] },
-	{ "category": "animals_and_nature", "char": "🦬", "name": "bison", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🦣", "name": "mammoth", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🦫", "name": "beaver", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🐻‍❄️", "name": "polar_bear", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🦤", "name": "dodo", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🪶", "name": "feather", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🦭", "name": "seal", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🐾", "name": "paw_prints", "keywords": ["animal", "tracking", "footprints", "dog", "cat", "pet", "feet"] },
-	{ "category": "animals_and_nature", "char": "🐉", "name": "dragon", "keywords": ["animal", "myth", "nature", "chinese", "green"] },
-	{ "category": "animals_and_nature", "char": "🐲", "name": "dragon_face", "keywords": ["animal", "myth", "nature", "chinese", "green"] },
-	{ "category": "animals_and_nature", "char": "🦧", "name": "orangutan", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🦮", "name": "guide_dog", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🐕‍🦺", "name": "service_dog", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🦥", "name": "sloth", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🦦", "name": "otter", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🦨", "name": "skunk", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🦩", "name": "flamingo", "keywords": ["animal", "nature"] },
-	{ "category": "animals_and_nature", "char": "🌵", "name": "cactus", "keywords": ["vegetable", "plant", "nature"] },
-	{ "category": "animals_and_nature", "char": "🎄", "name": "christmas_tree", "keywords": ["festival", "vacation", "december", "xmas", "celebration"] },
-	{ "category": "animals_and_nature", "char": "🌲", "name": "evergreen_tree", "keywords": ["plant", "nature"] },
-	{ "category": "animals_and_nature", "char": "🌳", "name": "deciduous_tree", "keywords": ["plant", "nature"] },
-	{ "category": "animals_and_nature", "char": "🌴", "name": "palm_tree", "keywords": ["plant", "vegetable", "nature", "summer", "beach", "mojito", "tropical"] },
-	{ "category": "animals_and_nature", "char": "🌱", "name": "seedling", "keywords": ["plant", "nature", "grass", "lawn", "spring"] },
-	{ "category": "animals_and_nature", "char": "🌿", "name": "herb", "keywords": ["vegetable", "plant", "medicine", "weed", "grass", "lawn"] },
-	{ "category": "animals_and_nature", "char": "☘", "name": "shamrock", "keywords": ["vegetable", "plant", "nature", "irish", "clover"] },
-	{ "category": "animals_and_nature", "char": "🍀", "name": "four_leaf_clover", "keywords": ["vegetable", "plant", "nature", "lucky", "irish"] },
-	{ "category": "animals_and_nature", "char": "🎍", "name": "bamboo", "keywords": ["plant", "nature", "vegetable", "panda", "pine_decoration"] },
-	{ "category": "animals_and_nature", "char": "🎋", "name": "tanabata_tree", "keywords": ["plant", "nature", "branch", "summer"] },
-	{ "category": "animals_and_nature", "char": "🍃", "name": "leaves", "keywords": ["nature", "plant", "tree", "vegetable", "grass", "lawn", "spring"] },
-	{ "category": "animals_and_nature", "char": "🍂", "name": "fallen_leaf", "keywords": ["nature", "plant", "vegetable", "leaves"] },
-	{ "category": "animals_and_nature", "char": "🍁", "name": "maple_leaf", "keywords": ["nature", "plant", "vegetable", "ca", "fall"] },
-	{ "category": "animals_and_nature", "char": "🌾", "name": "ear_of_rice", "keywords": ["nature", "plant"] },
-	{ "category": "animals_and_nature", "char": "🌺", "name": "hibiscus", "keywords": ["plant", "vegetable", "flowers", "beach"] },
-	{ "category": "animals_and_nature", "char": "🌻", "name": "sunflower", "keywords": ["nature", "plant", "fall"] },
-	{ "category": "animals_and_nature", "char": "🌹", "name": "rose", "keywords": ["flowers", "valentines", "love", "spring"] },
-	{ "category": "animals_and_nature", "char": "🥀", "name": "wilted_flower", "keywords": ["plant", "nature", "flower"] },
-	{ "category": "animals_and_nature", "char": "🌷", "name": "tulip", "keywords": ["flowers", "plant", "nature", "summer", "spring"] },
-	{ "category": "animals_and_nature", "char": "🌼", "name": "blossom", "keywords": ["nature", "flowers", "yellow"] },
-	{ "category": "animals_and_nature", "char": "🌸", "name": "cherry_blossom", "keywords": ["nature", "plant", "spring", "flower"] },
-	{ "category": "animals_and_nature", "char": "💐", "name": "bouquet", "keywords": ["flowers", "nature", "spring"] },
-	{ "category": "animals_and_nature", "char": "🍄", "name": "mushroom", "keywords": ["plant", "vegetable"] },
-	{ "category": "animals_and_nature", "char": "🪴", "name": "potted_plant", "keywords": ["plant"] },
-	{ "category": "animals_and_nature", "char": "🌰", "name": "chestnut", "keywords": ["food", "squirrel"] },
-	{ "category": "animals_and_nature", "char": "🎃", "name": "jack_o_lantern", "keywords": ["halloween", "light", "pumpkin", "creepy", "fall"] },
-	{ "category": "animals_and_nature", "char": "🐚", "name": "shell", "keywords": ["nature", "sea", "beach"] },
-	{ "category": "animals_and_nature", "char": "🕸", "name": "spider_web", "keywords": ["animal", "insect", "arachnid", "silk"] },
-	{ "category": "animals_and_nature", "char": "🌎", "name": "earth_americas", "keywords": ["globe", "world", "USA", "international"] },
-	{ "category": "animals_and_nature", "char": "🌍", "name": "earth_africa", "keywords": ["globe", "world", "international"] },
-	{ "category": "animals_and_nature", "char": "🌏", "name": "earth_asia", "keywords": ["globe", "world", "east", "international"] },
-	{ "category": "animals_and_nature", "char": "🪐", "name": "ringed_planet", "keywords": ["saturn"] },
-	{ "category": "animals_and_nature", "char": "🌕", "name": "full_moon", "keywords": ["nature", "yellow", "twilight", "planet", "space", "night", "evening", "sleep"] },
-	{ "category": "animals_and_nature", "char": "🌖", "name": "waning_gibbous_moon", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep", "waxing_gibbous_moon"] },
-	{ "category": "animals_and_nature", "char": "🌗", "name": "last_quarter_moon", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
-	{ "category": "animals_and_nature", "char": "🌘", "name": "waning_crescent_moon", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
-	{ "category": "animals_and_nature", "char": "🌑", "name": "new_moon", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
-	{ "category": "animals_and_nature", "char": "🌒", "name": "waxing_crescent_moon", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
-	{ "category": "animals_and_nature", "char": "🌓", "name": "first_quarter_moon", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
-	{ "category": "animals_and_nature", "char": "🌔", "name": "waxing_gibbous_moon", "keywords": ["nature", "night", "sky", "gray", "twilight", "planet", "space", "evening", "sleep"] },
-	{ "category": "animals_and_nature", "char": "🌚", "name": "new_moon_with_face", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
-	{ "category": "animals_and_nature", "char": "🌝", "name": "full_moon_with_face", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
-	{ "category": "animals_and_nature", "char": "🌛", "name": "first_quarter_moon_with_face", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
-	{ "category": "animals_and_nature", "char": "🌜", "name": "last_quarter_moon_with_face", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
-	{ "category": "animals_and_nature", "char": "🌞", "name": "sun_with_face", "keywords": ["nature", "morning", "sky"] },
-	{ "category": "animals_and_nature", "char": "🌙", "name": "crescent_moon", "keywords": ["night", "sleep", "sky", "evening", "magic"] },
-	{ "category": "animals_and_nature", "char": "⭐", "name": "star", "keywords": ["night", "yellow"] },
-	{ "category": "animals_and_nature", "char": "🌟", "name": "star2", "keywords": ["night", "sparkle", "awesome", "good", "magic"] },
-	{ "category": "animals_and_nature", "char": "💫", "name": "dizzy", "keywords": ["star", "sparkle", "shoot", "magic"] },
-	{ "category": "animals_and_nature", "char": "✨", "name": "sparkles", "keywords": ["stars", "shine", "shiny", "cool", "awesome", "good", "magic"] },
-	{ "category": "animals_and_nature", "char": "☄", "name": "comet", "keywords": ["space"] },
-	{ "category": "animals_and_nature", "char": "☀️", "name": "sunny", "keywords": ["weather", "nature", "brightness", "summer", "beach", "spring"] },
-	{ "category": "animals_and_nature", "char": "🌤", "name": "sun_behind_small_cloud", "keywords": ["weather"] },
-	{ "category": "animals_and_nature", "char": "⛅", "name": "partly_sunny", "keywords": ["weather", "nature", "cloudy", "morning", "fall", "spring"] },
-	{ "category": "animals_and_nature", "char": "🌥", "name": "sun_behind_large_cloud", "keywords": ["weather"] },
-	{ "category": "animals_and_nature", "char": "🌦", "name": "sun_behind_rain_cloud", "keywords": ["weather"] },
-	{ "category": "animals_and_nature", "char": "☁️", "name": "cloud", "keywords": ["weather", "sky"] },
-	{ "category": "animals_and_nature", "char": "🌧", "name": "cloud_with_rain", "keywords": ["weather"] },
-	{ "category": "animals_and_nature", "char": "⛈", "name": "cloud_with_lightning_and_rain", "keywords": ["weather", "lightning"] },
-	{ "category": "animals_and_nature", "char": "🌩", "name": "cloud_with_lightning", "keywords": ["weather", "thunder"] },
-	{ "category": "animals_and_nature", "char": "⚡", "name": "zap", "keywords": ["thunder", "weather", "lightning bolt", "fast"] },
-	{ "category": "animals_and_nature", "char": "🔥", "name": "fire", "keywords": ["hot", "cook", "flame"] },
-	{ "category": "animals_and_nature", "char": "💥", "name": "boom", "keywords": ["bomb", "explode", "explosion", "collision", "blown"] },
-	{ "category": "animals_and_nature", "char": "❄️", "name": "snowflake", "keywords": ["winter", "season", "cold", "weather", "christmas", "xmas"] },
-	{ "category": "animals_and_nature", "char": "🌨", "name": "cloud_with_snow", "keywords": ["weather"] },
-	{ "category": "animals_and_nature", "char": "⛄", "name": "snowman", "keywords": ["winter", "season", "cold", "weather", "christmas", "xmas", "frozen", "without_snow"] },
-	{ "category": "animals_and_nature", "char": "☃", "name": "snowman_with_snow", "keywords": ["winter", "season", "cold", "weather", "christmas", "xmas", "frozen"] },
-	{ "category": "animals_and_nature", "char": "🌬", "name": "wind_face", "keywords": ["gust", "air"] },
-	{ "category": "animals_and_nature", "char": "💨", "name": "dash", "keywords": ["wind", "air", "fast", "shoo", "fart", "smoke", "puff"] },
-	{ "category": "animals_and_nature", "char": "🌪", "name": "tornado", "keywords": ["weather", "cyclone", "twister"] },
-	{ "category": "animals_and_nature", "char": "🌫", "name": "fog", "keywords": ["weather"] },
-	{ "category": "animals_and_nature", "char": "☂", "name": "open_umbrella", "keywords": ["weather", "spring"] },
-	{ "category": "animals_and_nature", "char": "☔", "name": "umbrella", "keywords": ["rainy", "weather", "spring"] },
-	{ "category": "animals_and_nature", "char": "💧", "name": "droplet", "keywords": ["water", "drip", "faucet", "spring"] },
-	{ "category": "animals_and_nature", "char": "💦", "name": "sweat_drops", "keywords": ["water", "drip", "oops"] },
-	{ "category": "animals_and_nature", "char": "🌊", "name": "ocean", "keywords": ["sea", "water", "wave", "nature", "tsunami", "disaster"] },
-	{ "category": "animals_and_nature", "char": "\uD83E\uDEB7", "name": "lotus", "keywords": [] },
-	{ "category": "animals_and_nature", "char": "\uD83E\uDEB8", "name": "coral", "keywords": [] },
-	{ "category": "animals_and_nature", "char": "\uD83E\uDEB9", "name": "empty_nest", "keywords": [] },
-	{ "category": "animals_and_nature", "char": "\uD83E\uDEBA", "name": "nest_with_eggs", "keywords": [] },
-	{ "category": "food_and_drink", "char": "🍏", "name": "green_apple", "keywords": ["fruit", "nature"] },
-	{ "category": "food_and_drink", "char": "🍎", "name": "apple", "keywords": ["fruit", "mac", "school"] },
-	{ "category": "food_and_drink", "char": "🍐", "name": "pear", "keywords": ["fruit", "nature", "food"] },
-	{ "category": "food_and_drink", "char": "🍊", "name": "tangerine", "keywords": ["food", "fruit", "nature", "orange"] },
-	{ "category": "food_and_drink", "char": "🍋", "name": "lemon", "keywords": ["fruit", "nature"] },
-	{ "category": "food_and_drink", "char": "🍌", "name": "banana", "keywords": ["fruit", "food", "monkey"] },
-	{ "category": "food_and_drink", "char": "🍉", "name": "watermelon", "keywords": ["fruit", "food", "picnic", "summer"] },
-	{ "category": "food_and_drink", "char": "🍇", "name": "grapes", "keywords": ["fruit", "food", "wine"] },
-	{ "category": "food_and_drink", "char": "🍓", "name": "strawberry", "keywords": ["fruit", "food", "nature"] },
-	{ "category": "food_and_drink", "char": "🍈", "name": "melon", "keywords": ["fruit", "nature", "food"] },
-	{ "category": "food_and_drink", "char": "🍒", "name": "cherries", "keywords": ["food", "fruit"] },
-	{ "category": "food_and_drink", "char": "🍑", "name": "peach", "keywords": ["fruit", "nature", "food"] },
-	{ "category": "food_and_drink", "char": "🍍", "name": "pineapple", "keywords": ["fruit", "nature", "food"] },
-	{ "category": "food_and_drink", "char": "🥥", "name": "coconut", "keywords": ["fruit", "nature", "food", "palm"] },
-	{ "category": "food_and_drink", "char": "🥝", "name": "kiwi_fruit", "keywords": ["fruit", "food"] },
-	{ "category": "food_and_drink", "char": "🥭", "name": "mango", "keywords": ["fruit", "food", "tropical"] },
-	{ "category": "food_and_drink", "char": "🥑", "name": "avocado", "keywords": ["fruit", "food"] },
-	{ "category": "food_and_drink", "char": "🥦", "name": "broccoli", "keywords": ["fruit", "food", "vegetable"] },
-	{ "category": "food_and_drink", "char": "🍅", "name": "tomato", "keywords": ["fruit", "vegetable", "nature", "food"] },
-	{ "category": "food_and_drink", "char": "🍆", "name": "eggplant", "keywords": ["vegetable", "nature", "food", "aubergine"] },
-	{ "category": "food_and_drink", "char": "🥒", "name": "cucumber", "keywords": ["fruit", "food", "pickle"] },
-	{ "category": "food_and_drink", "char": "🫐", "name": "blueberries", "keywords": ["fruit", "food"] },
-	{ "category": "food_and_drink", "char": "🫒", "name": "olive", "keywords": ["fruit", "food"] },
-	{ "category": "food_and_drink", "char": "🫑", "name": "bell_pepper", "keywords": ["fruit", "food"] },
-	{ "category": "food_and_drink", "char": "🥕", "name": "carrot", "keywords": ["vegetable", "food", "orange"] },
-	{ "category": "food_and_drink", "char": "🌶", "name": "hot_pepper", "keywords": ["food", "spicy", "chilli", "chili"] },
-	{ "category": "food_and_drink", "char": "🥔", "name": "potato", "keywords": ["food", "tuber", "vegatable", "starch"] },
-	{ "category": "food_and_drink", "char": "🌽", "name": "corn", "keywords": ["food", "vegetable", "plant"] },
-	{ "category": "food_and_drink", "char": "🥬", "name": "leafy_greens", "keywords": ["food", "vegetable", "plant", "bok choy", "cabbage", "kale", "lettuce"] },
-	{ "category": "food_and_drink", "char": "🍠", "name": "sweet_potato", "keywords": ["food", "nature"] },
-	{ "category": "food_and_drink", "char": "🥜", "name": "peanuts", "keywords": ["food", "nut"] },
-	{ "category": "food_and_drink", "char": "🧄", "name": "garlic", "keywords": ["food"] },
-	{ "category": "food_and_drink", "char": "🧅", "name": "onion", "keywords": ["food"] },
-	{ "category": "food_and_drink", "char": "🍯", "name": "honey_pot", "keywords": ["bees", "sweet", "kitchen"] },
-	{ "category": "food_and_drink", "char": "🥐", "name": "croissant", "keywords": ["food", "bread", "french"] },
-	{ "category": "food_and_drink", "char": "🍞", "name": "bread", "keywords": ["food", "wheat", "breakfast", "toast"] },
-	{ "category": "food_and_drink", "char": "🥖", "name": "baguette_bread", "keywords": ["food", "bread", "french"] },
-	{ "category": "food_and_drink", "char": "🥯", "name": "bagel", "keywords": ["food", "bread", "bakery", "schmear"] },
-	{ "category": "food_and_drink", "char": "🥨", "name": "pretzel", "keywords": ["food", "bread", "twisted"] },
-	{ "category": "food_and_drink", "char": "🧀", "name": "cheese", "keywords": ["food", "chadder"] },
-	{ "category": "food_and_drink", "char": "🥚", "name": "egg", "keywords": ["food", "chicken", "breakfast"] },
-	{ "category": "food_and_drink", "char": "🥓", "name": "bacon", "keywords": ["food", "breakfast", "pork", "pig", "meat"] },
-	{ "category": "food_and_drink", "char": "🥩", "name": "steak", "keywords": ["food", "cow", "meat", "cut", "chop", "lambchop", "porkchop"] },
-	{ "category": "food_and_drink", "char": "🥞", "name": "pancakes", "keywords": ["food", "breakfast", "flapjacks", "hotcakes"] },
-	{ "category": "food_and_drink", "char": "🍗", "name": "poultry_leg", "keywords": ["food", "meat", "drumstick", "bird", "chicken", "turkey"] },
-	{ "category": "food_and_drink", "char": "🍖", "name": "meat_on_bone", "keywords": ["good", "food", "drumstick"] },
-	{ "category": "food_and_drink", "char": "🦴", "name": "bone", "keywords": ["skeleton"] },
-	{ "category": "food_and_drink", "char": "🍤", "name": "fried_shrimp", "keywords": ["food", "animal", "appetizer", "summer"] },
-	{ "category": "food_and_drink", "char": "🍳", "name": "fried_egg", "keywords": ["food", "breakfast", "kitchen", "egg"] },
-	{ "category": "food_and_drink", "char": "🍔", "name": "hamburger", "keywords": ["meat", "fast food", "beef", "cheeseburger", "mcdonalds", "burger king"] },
-	{ "category": "food_and_drink", "char": "🍟", "name": "fries", "keywords": ["chips", "snack", "fast food"] },
-	{ "category": "food_and_drink", "char": "🥙", "name": "stuffed_flatbread", "keywords": ["food", "flatbread", "stuffed", "gyro"] },
-	{ "category": "food_and_drink", "char": "🌭", "name": "hotdog", "keywords": ["food", "frankfurter"] },
-	{ "category": "food_and_drink", "char": "🍕", "name": "pizza", "keywords": ["food", "party"] },
-	{ "category": "food_and_drink", "char": "🥪", "name": "sandwich", "keywords": ["food", "lunch", "bread"] },
-	{ "category": "food_and_drink", "char": "🥫", "name": "canned_food", "keywords": ["food", "soup"] },
-	{ "category": "food_and_drink", "char": "🍝", "name": "spaghetti", "keywords": ["food", "italian", "noodle"] },
-	{ "category": "food_and_drink", "char": "🌮", "name": "taco", "keywords": ["food", "mexican"] },
-	{ "category": "food_and_drink", "char": "🌯", "name": "burrito", "keywords": ["food", "mexican"] },
-	{ "category": "food_and_drink", "char": "🥗", "name": "green_salad", "keywords": ["food", "healthy", "lettuce"] },
-	{ "category": "food_and_drink", "char": "🥘", "name": "shallow_pan_of_food", "keywords": ["food", "cooking", "casserole", "paella"] },
-	{ "category": "food_and_drink", "char": "🍜", "name": "ramen", "keywords": ["food", "japanese", "noodle", "chopsticks"] },
-	{ "category": "food_and_drink", "char": "🍲", "name": "stew", "keywords": ["food", "meat", "soup"] },
-	{ "category": "food_and_drink", "char": "🍥", "name": "fish_cake", "keywords": ["food", "japan", "sea", "beach", "narutomaki", "pink", "swirl", "kamaboko", "surimi", "ramen"] },
-	{ "category": "food_and_drink", "char": "🥠", "name": "fortune_cookie", "keywords": ["food", "prophecy"] },
-	{ "category": "food_and_drink", "char": "🍣", "name": "sushi", "keywords": ["food", "fish", "japanese", "rice"] },
-	{ "category": "food_and_drink", "char": "🍱", "name": "bento", "keywords": ["food", "japanese", "box"] },
-	{ "category": "food_and_drink", "char": "🍛", "name": "curry", "keywords": ["food", "spicy", "hot", "indian"] },
-	{ "category": "food_and_drink", "char": "🍙", "name": "rice_ball", "keywords": ["food", "japanese"] },
-	{ "category": "food_and_drink", "char": "🍚", "name": "rice", "keywords": ["food", "china", "asian"] },
-	{ "category": "food_and_drink", "char": "🍘", "name": "rice_cracker", "keywords": ["food", "japanese"] },
-	{ "category": "food_and_drink", "char": "🍢", "name": "oden", "keywords": ["food", "japanese"] },
-	{ "category": "food_and_drink", "char": "🍡", "name": "dango", "keywords": ["food", "dessert", "sweet", "japanese", "barbecue", "meat"] },
-	{ "category": "food_and_drink", "char": "🍧", "name": "shaved_ice", "keywords": ["hot", "dessert", "summer"] },
-	{ "category": "food_and_drink", "char": "🍨", "name": "ice_cream", "keywords": ["food", "hot", "dessert"] },
-	{ "category": "food_and_drink", "char": "🍦", "name": "icecream", "keywords": ["food", "hot", "dessert", "summer"] },
-	{ "category": "food_and_drink", "char": "🥧", "name": "pie", "keywords": ["food", "dessert", "pastry"] },
-	{ "category": "food_and_drink", "char": "🍰", "name": "cake", "keywords": ["food", "dessert"] },
-	{ "category": "food_and_drink", "char": "🧁", "name": "cupcake", "keywords": ["food", "dessert", "bakery", "sweet"] },
-	{ "category": "food_and_drink", "char": "🥮", "name": "moon_cake", "keywords": ["food", "autumn"] },
-	{ "category": "food_and_drink", "char": "🎂", "name": "birthday", "keywords": ["food", "dessert", "cake"] },
-	{ "category": "food_and_drink", "char": "🍮", "name": "custard", "keywords": ["dessert", "food"] },
-	{ "category": "food_and_drink", "char": "🍬", "name": "candy", "keywords": ["snack", "dessert", "sweet", "lolly"] },
-	{ "category": "food_and_drink", "char": "🍭", "name": "lollipop", "keywords": ["food", "snack", "candy", "sweet"] },
-	{ "category": "food_and_drink", "char": "🍫", "name": "chocolate_bar", "keywords": ["food", "snack", "dessert", "sweet"] },
-	{ "category": "food_and_drink", "char": "🍿", "name": "popcorn", "keywords": ["food", "movie theater", "films", "snack"] },
-	{ "category": "food_and_drink", "char": "🥟", "name": "dumpling", "keywords": ["food", "empanada", "pierogi", "potsticker"] },
-	{ "category": "food_and_drink", "char": "🍩", "name": "doughnut", "keywords": ["food", "dessert", "snack", "sweet", "donut"] },
-	{ "category": "food_and_drink", "char": "🍪", "name": "cookie", "keywords": ["food", "snack", "oreo", "chocolate", "sweet", "dessert"] },
-	{ "category": "food_and_drink", "char": "🧇", "name": "waffle", "keywords": ["food"] },
-	{ "category": "food_and_drink", "char": "🧆", "name": "falafel", "keywords": ["food"] },
-	{ "category": "food_and_drink", "char": "🧈", "name": "butter", "keywords": ["food"] },
-	{ "category": "food_and_drink", "char": "🦪", "name": "oyster", "keywords": ["food"] },
-	{ "category": "food_and_drink", "char": "🫓", "name": "flatbread", "keywords": ["food"] },
-	{ "category": "food_and_drink", "char": "🫔", "name": "tamale", "keywords": ["food"] },
-	{ "category": "food_and_drink", "char": "🫕", "name": "fondue", "keywords": ["food"] },
-	{ "category": "food_and_drink", "char": "🥛", "name": "milk_glass", "keywords": ["beverage", "drink", "cow"] },
-	{ "category": "food_and_drink", "char": "🍺", "name": "beer", "keywords": ["relax", "beverage", "drink", "drunk", "party", "pub", "summer", "alcohol", "booze"] },
-	{ "category": "food_and_drink", "char": "🍻", "name": "beers", "keywords": ["relax", "beverage", "drink", "drunk", "party", "pub", "summer", "alcohol", "booze"] },
-	{ "category": "food_and_drink", "char": "🥂", "name": "clinking_glasses", "keywords": ["beverage", "drink", "party", "alcohol", "celebrate", "cheers", "wine", "champagne", "toast"] },
-	{ "category": "food_and_drink", "char": "🍷", "name": "wine_glass", "keywords": ["drink", "beverage", "drunk", "alcohol", "booze"] },
-	{ "category": "food_and_drink", "char": "🥃", "name": "tumbler_glass", "keywords": ["drink", "beverage", "drunk", "alcohol", "liquor", "booze", "bourbon", "scotch", "whisky", "glass", "shot"] },
-	{ "category": "food_and_drink", "char": "🍸", "name": "cocktail", "keywords": ["drink", "drunk", "alcohol", "beverage", "booze", "mojito"] },
-	{ "category": "food_and_drink", "char": "🍹", "name": "tropical_drink", "keywords": ["beverage", "cocktail", "summer", "beach", "alcohol", "booze", "mojito"] },
-	{ "category": "food_and_drink", "char": "🍾", "name": "champagne", "keywords": ["drink", "wine", "bottle", "celebration"] },
-	{ "category": "food_and_drink", "char": "🍶", "name": "sake", "keywords": ["wine", "drink", "drunk", "beverage", "japanese", "alcohol", "booze"] },
-	{ "category": "food_and_drink", "char": "🍵", "name": "tea", "keywords": ["drink", "bowl", "breakfast", "green", "british"] },
-	{ "category": "food_and_drink", "char": "🥤", "name": "cup_with_straw", "keywords": ["drink", "soda"] },
-	{ "category": "food_and_drink", "char": "☕", "name": "coffee", "keywords": ["beverage", "caffeine", "latte", "espresso"] },
-	{ "category": "food_and_drink", "char": "🫖", "name": "teapot", "keywords": [] },
-	{ "category": "food_and_drink", "char": "🧋", "name": "bubble_tea", "keywords": ["tapioca"] },
-	{ "category": "food_and_drink", "char": "🍼", "name": "baby_bottle", "keywords": ["food", "container", "milk"] },
-	{ "category": "food_and_drink", "char": "🧃", "name": "beverage_box", "keywords": ["food", "drink"] },
-	{ "category": "food_and_drink", "char": "🧉", "name": "mate", "keywords": ["food", "drink"] },
-	{ "category": "food_and_drink", "char": "🧊", "name": "ice_cube", "keywords": ["food"] },
-	{ "category": "food_and_drink", "char": "🧂", "name": "salt", "keywords": ["condiment", "shaker"] },
-	{ "category": "food_and_drink", "char": "🥄", "name": "spoon", "keywords": ["cutlery", "kitchen", "tableware"] },
-	{ "category": "food_and_drink", "char": "🍴", "name": "fork_and_knife", "keywords": ["cutlery", "kitchen"] },
-	{ "category": "food_and_drink", "char": "🍽", "name": "plate_with_cutlery", "keywords": ["food", "eat", "meal", "lunch", "dinner", "restaurant"] },
-	{ "category": "food_and_drink", "char": "🥣", "name": "bowl_with_spoon", "keywords": ["food", "breakfast", "cereal", "oatmeal", "porridge"] },
-	{ "category": "food_and_drink", "char": "🥡", "name": "takeout_box", "keywords": ["food", "leftovers"] },
-	{ "category": "food_and_drink", "char": "🥢", "name": "chopsticks", "keywords": ["food"] },
-	{ "category": "food_and_drink", "char": "\uD83E\uDED7", "name": "pouring_liquid", "keywords": [] },
-	{ "category": "food_and_drink", "char": "\uD83E\uDED8", "name": "beans", "keywords": [] },
-	{ "category": "food_and_drink", "char": "\uD83E\uDED9", "name": "jar", "keywords": [] },
-	{ "category": "activity", "char": "⚽", "name": "soccer", "keywords": ["sports", "football"] },
-	{ "category": "activity", "char": "🏀", "name": "basketball", "keywords": ["sports", "balls", "NBA"] },
-	{ "category": "activity", "char": "🏈", "name": "football", "keywords": ["sports", "balls", "NFL"] },
-	{ "category": "activity", "char": "⚾", "name": "baseball", "keywords": ["sports", "balls"] },
-	{ "category": "activity", "char": "🥎", "name": "softball", "keywords": ["sports", "balls"] },
-	{ "category": "activity", "char": "🎾", "name": "tennis", "keywords": ["sports", "balls", "green"] },
-	{ "category": "activity", "char": "🏐", "name": "volleyball", "keywords": ["sports", "balls"] },
-	{ "category": "activity", "char": "🏉", "name": "rugby_football", "keywords": ["sports", "team"] },
-	{ "category": "activity", "char": "🥏", "name": "flying_disc", "keywords": ["sports", "frisbee", "ultimate"] },
-	{ "category": "activity", "char": "🎱", "name": "8ball", "keywords": ["pool", "hobby", "game", "luck", "magic"] },
-	{ "category": "activity", "char": "⛳", "name": "golf", "keywords": ["sports", "business", "flag", "hole", "summer"] },
-	{ "category": "activity", "char": "🏌️‍♀️", "name": "golfing_woman", "keywords": ["sports", "business", "woman", "female"] },
-	{ "category": "activity", "char": "🏌", "name": "golfing_man", "keywords": ["sports", "business"] },
-	{ "category": "activity", "char": "🏓", "name": "ping_pong", "keywords": ["sports", "pingpong"] },
-	{ "category": "activity", "char": "🏸", "name": "badminton", "keywords": ["sports"] },
-	{ "category": "activity", "char": "🥅", "name": "goal_net", "keywords": ["sports"] },
-	{ "category": "activity", "char": "🏒", "name": "ice_hockey", "keywords": ["sports"] },
-	{ "category": "activity", "char": "🏑", "name": "field_hockey", "keywords": ["sports"] },
-	{ "category": "activity", "char": "🥍", "name": "lacrosse", "keywords": ["sports", "ball", "stick"] },
-	{ "category": "activity", "char": "🏏", "name": "cricket", "keywords": ["sports"] },
-	{ "category": "activity", "char": "🎿", "name": "ski", "keywords": ["sports", "winter", "cold", "snow"] },
-	{ "category": "activity", "char": "⛷", "name": "skier", "keywords": ["sports", "winter", "snow"] },
-	{ "category": "activity", "char": "🏂", "name": "snowboarder", "keywords": ["sports", "winter"] },
-	{ "category": "activity", "char": "🤺", "name": "person_fencing", "keywords": ["sports", "fencing", "sword"] },
-	{ "category": "activity", "char": "🤼‍♀️", "name": "women_wrestling", "keywords": ["sports", "wrestlers"] },
-	{ "category": "activity", "char": "🤼‍♂️", "name": "men_wrestling", "keywords": ["sports", "wrestlers"] },
-	{ "category": "activity", "char": "🤸‍♀️", "name": "woman_cartwheeling", "keywords": ["gymnastics"] },
-	{ "category": "activity", "char": "🤸‍♂️", "name": "man_cartwheeling", "keywords": ["gymnastics"] },
-	{ "category": "activity", "char": "🤾‍♀️", "name": "woman_playing_handball", "keywords": ["sports"] },
-	{ "category": "activity", "char": "🤾‍♂️", "name": "man_playing_handball", "keywords": ["sports"] },
-	{ "category": "activity", "char": "⛸", "name": "ice_skate", "keywords": ["sports"] },
-	{ "category": "activity", "char": "🥌", "name": "curling_stone", "keywords": ["sports"] },
-	{ "category": "activity", "char": "🛹", "name": "skateboard", "keywords": ["board"] },
-	{ "category": "activity", "char": "🛷", "name": "sled", "keywords": ["sleigh", "luge", "toboggan"] },
-	{ "category": "activity", "char": "🏹", "name": "bow_and_arrow", "keywords": ["sports"] },
-	{ "category": "activity", "char": "🎣", "name": "fishing_pole_and_fish", "keywords": ["food", "hobby", "summer"] },
-	{ "category": "activity", "char": "🥊", "name": "boxing_glove", "keywords": ["sports", "fighting"] },
-	{ "category": "activity", "char": "🥋", "name": "martial_arts_uniform", "keywords": ["judo", "karate", "taekwondo"] },
-	{ "category": "activity", "char": "🚣‍♀️", "name": "rowing_woman", "keywords": ["sports", "hobby", "water", "ship", "woman", "female"] },
-	{ "category": "activity", "char": "🚣", "name": "rowing_man", "keywords": ["sports", "hobby", "water", "ship"] },
-	{ "category": "activity", "char": "🧗‍♀️", "name": "climbing_woman", "keywords": ["sports", "hobby", "woman", "female", "rock"] },
-	{ "category": "activity", "char": "🧗‍♂️", "name": "climbing_man", "keywords": ["sports", "hobby", "man", "male", "rock"] },
-	{ "category": "activity", "char": "🏊‍♀️", "name": "swimming_woman", "keywords": ["sports", "exercise", "human", "athlete", "water", "summer", "woman", "female"] },
-	{ "category": "activity", "char": "🏊", "name": "swimming_man", "keywords": ["sports", "exercise", "human", "athlete", "water", "summer"] },
-	{ "category": "activity", "char": "🤽‍♀️", "name": "woman_playing_water_polo", "keywords": ["sports", "pool"] },
-	{ "category": "activity", "char": "🤽‍♂️", "name": "man_playing_water_polo", "keywords": ["sports", "pool"] },
-	{ "category": "activity", "char": "🧘‍♀️", "name": "woman_in_lotus_position", "keywords": ["woman", "female", "meditation", "yoga", "serenity", "zen", "mindfulness"] },
-	{ "category": "activity", "char": "🧘‍♂️", "name": "man_in_lotus_position", "keywords": ["man", "male", "meditation", "yoga", "serenity", "zen", "mindfulness"] },
-	{ "category": "activity", "char": "🏄‍♀️", "name": "surfing_woman", "keywords": ["sports", "ocean", "sea", "summer", "beach", "woman", "female"] },
-	{ "category": "activity", "char": "🏄", "name": "surfing_man", "keywords": ["sports", "ocean", "sea", "summer", "beach"] },
-	{ "category": "activity", "char": "🛀", "name": "bath", "keywords": ["clean", "shower", "bathroom"] },
-	{ "category": "activity", "char": "⛹️‍♀️", "name": "basketball_woman", "keywords": ["sports", "human", "woman", "female"] },
-	{ "category": "activity", "char": "⛹", "name": "basketball_man", "keywords": ["sports", "human"] },
-	{ "category": "activity", "char": "🏋️‍♀️", "name": "weight_lifting_woman", "keywords": ["sports", "training", "exercise", "woman", "female"] },
-	{ "category": "activity", "char": "🏋", "name": "weight_lifting_man", "keywords": ["sports", "training", "exercise"] },
-	{ "category": "activity", "char": "🚴‍♀️", "name": "biking_woman", "keywords": ["sports", "bike", "exercise", "hipster", "woman", "female"] },
-	{ "category": "activity", "char": "🚴", "name": "biking_man", "keywords": ["sports", "bike", "exercise", "hipster"] },
-	{ "category": "activity", "char": "🚵‍♀️", "name": "mountain_biking_woman", "keywords": ["transportation", "sports", "human", "race", "bike", "woman", "female"] },
-	{ "category": "activity", "char": "🚵", "name": "mountain_biking_man", "keywords": ["transportation", "sports", "human", "race", "bike"] },
-	{ "category": "activity", "char": "🏇", "name": "horse_racing", "keywords": ["animal", "betting", "competition", "gambling", "luck"] },
-	{ "category": "activity", "char": "🤿", "name": "diving_mask", "keywords": ["sports"] },
-	{ "category": "activity", "char": "🪀", "name": "yo_yo", "keywords": ["sports"] },
-	{ "category": "activity", "char": "🪁", "name": "kite", "keywords": ["sports"] },
-	{ "category": "activity", "char": "🦺", "name": "safety_vest", "keywords": ["sports"] },
-	{ "category": "activity", "char": "🪡", "name": "sewing_needle", "keywords": [] },
-	{ "category": "activity", "char": "🪢", "name": "knot", "keywords": [] },
-	{ "category": "activity", "char": "🕴", "name": "business_suit_levitating", "keywords": ["suit", "business", "levitate", "hover", "jump"] },
-	{ "category": "activity", "char": "🏆", "name": "trophy", "keywords": ["win", "award", "contest", "place", "ftw", "ceremony"] },
-	{ "category": "activity", "char": "🎽", "name": "running_shirt_with_sash", "keywords": ["play", "pageant"] },
-	{ "category": "activity", "char": "🏅", "name": "medal_sports", "keywords": ["award", "winning"] },
-	{ "category": "activity", "char": "🎖", "name": "medal_military", "keywords": ["award", "winning", "army"] },
-	{ "category": "activity", "char": "🥇", "name": "1st_place_medal", "keywords": ["award", "winning", "first"] },
-	{ "category": "activity", "char": "🥈", "name": "2nd_place_medal", "keywords": ["award", "second"] },
-	{ "category": "activity", "char": "🥉", "name": "3rd_place_medal", "keywords": ["award", "third"] },
-	{ "category": "activity", "char": "🎗", "name": "reminder_ribbon", "keywords": ["sports", "cause", "support", "awareness"] },
-	{ "category": "activity", "char": "🏵", "name": "rosette", "keywords": ["flower", "decoration", "military"] },
-	{ "category": "activity", "char": "🎫", "name": "ticket", "keywords": ["event", "concert", "pass"] },
-	{ "category": "activity", "char": "🎟", "name": "tickets", "keywords": ["sports", "concert", "entrance"] },
-	{ "category": "activity", "char": "🎭", "name": "performing_arts", "keywords": ["acting", "theater", "drama"] },
-	{ "category": "activity", "char": "🎨", "name": "art", "keywords": ["design", "paint", "draw", "colors"] },
-	{ "category": "activity", "char": "🎪", "name": "circus_tent", "keywords": ["festival", "carnival", "party"] },
-	{ "category": "activity", "char": "🤹‍♀️", "name": "woman_juggling", "keywords": ["juggle", "balance", "skill", "multitask"] },
-	{ "category": "activity", "char": "🤹‍♂️", "name": "man_juggling", "keywords": ["juggle", "balance", "skill", "multitask"] },
-	{ "category": "activity", "char": "🎤", "name": "microphone", "keywords": ["sound", "music", "PA", "sing", "talkshow"] },
-	{ "category": "activity", "char": "🎧", "name": "headphones", "keywords": ["music", "score", "gadgets"] },
-	{ "category": "activity", "char": "🎼", "name": "musical_score", "keywords": ["treble", "clef", "compose"] },
-	{ "category": "activity", "char": "🎹", "name": "musical_keyboard", "keywords": ["piano", "instrument", "compose"] },
-	{ "category": "activity", "char": "🥁", "name": "drum", "keywords": ["music", "instrument", "drumsticks", "snare"] },
-	{ "category": "activity", "char": "🎷", "name": "saxophone", "keywords": ["music", "instrument", "jazz", "blues"] },
-	{ "category": "activity", "char": "🎺", "name": "trumpet", "keywords": ["music", "brass"] },
-	{ "category": "activity", "char": "🎸", "name": "guitar", "keywords": ["music", "instrument"] },
-	{ "category": "activity", "char": "🎻", "name": "violin", "keywords": ["music", "instrument", "orchestra", "symphony"] },
-	{ "category": "activity", "char": "🪕", "name": "banjo", "keywords": ["music", "instrument"] },
-	{ "category": "activity", "char": "🪗", "name": "accordion", "keywords": ["music", "instrument"] },
-	{ "category": "activity", "char": "🪘", "name": "long_drum", "keywords": ["music", "instrument"] },
-	{ "category": "activity", "char": "🎬", "name": "clapper", "keywords": ["movie", "film", "record"] },
-	{ "category": "activity", "char": "🎮", "name": "video_game", "keywords": ["play", "console", "PS4", "controller"] },
-	{ "category": "activity", "char": "👾", "name": "space_invader", "keywords": ["game", "arcade", "play"] },
-	{ "category": "activity", "char": "🎯", "name": "dart", "keywords": ["game", "play", "bar", "target", "bullseye"] },
-	{ "category": "activity", "char": "🎲", "name": "game_die", "keywords": ["dice", "random", "tabletop", "play", "luck"] },
-	{ "category": "activity", "char": "♟️", "name": "chess_pawn", "keywords": ["expendable"] },
-	{ "category": "activity", "char": "🎰", "name": "slot_machine", "keywords": ["bet", "gamble", "vegas", "fruit machine", "luck", "casino"] },
-	{ "category": "activity", "char": "🧩", "name": "jigsaw", "keywords": ["interlocking", "puzzle", "piece"] },
-	{ "category": "activity", "char": "🎳", "name": "bowling", "keywords": ["sports", "fun", "play"] },
-	{ "category": "activity", "char": "🪄", "name": "magic_wand", "keywords": [] },
-	{ "category": "activity", "char": "🪅", "name": "pinata", "keywords": [] },
-	{ "category": "activity", "char": "🪆", "name": "nesting_dolls", "keywords": [] },
-	{ "category": "activity", "char": "\uD83E\uDEAC", "name": "hamsa", "keywords": [] },
-	{ "category": "activity", "char": "\uD83E\uDEA9", "name": "mirror_ball", "keywords": [] },
-	{ "category": "travel_and_places", "char": "🚗", "name": "red_car", "keywords": ["red", "transportation", "vehicle"] },
-	{ "category": "travel_and_places", "char": "🚕", "name": "taxi", "keywords": ["uber", "vehicle", "cars", "transportation"] },
-	{ "category": "travel_and_places", "char": "🚙", "name": "blue_car", "keywords": ["transportation", "vehicle"] },
-	{ "category": "travel_and_places", "char": "🚌", "name": "bus", "keywords": ["car", "vehicle", "transportation"] },
-	{ "category": "travel_and_places", "char": "🚎", "name": "trolleybus", "keywords": ["bart", "transportation", "vehicle"] },
-	{ "category": "travel_and_places", "char": "🏎", "name": "racing_car", "keywords": ["sports", "race", "fast", "formula", "f1"] },
-	{ "category": "travel_and_places", "char": "🚓", "name": "police_car", "keywords": ["vehicle", "cars", "transportation", "law", "legal", "enforcement"] },
-	{ "category": "travel_and_places", "char": "🚑", "name": "ambulance", "keywords": ["health", "911", "hospital"] },
-	{ "category": "travel_and_places", "char": "🚒", "name": "fire_engine", "keywords": ["transportation", "cars", "vehicle"] },
-	{ "category": "travel_and_places", "char": "🚐", "name": "minibus", "keywords": ["vehicle", "car", "transportation"] },
-	{ "category": "travel_and_places", "char": "🚚", "name": "truck", "keywords": ["cars", "transportation"] },
-	{ "category": "travel_and_places", "char": "🚛", "name": "articulated_lorry", "keywords": ["vehicle", "cars", "transportation", "express"] },
-	{ "category": "travel_and_places", "char": "🚜", "name": "tractor", "keywords": ["vehicle", "car", "farming", "agriculture"] },
-	{ "category": "travel_and_places", "char": "🛴", "name": "kick_scooter", "keywords": ["vehicle", "kick", "razor"] },
-	{ "category": "travel_and_places", "char": "🏍", "name": "motorcycle", "keywords": ["race", "sports", "fast"] },
-	{ "category": "travel_and_places", "char": "🚲", "name": "bike", "keywords": ["sports", "bicycle", "exercise", "hipster"] },
-	{ "category": "travel_and_places", "char": "🛵", "name": "motor_scooter", "keywords": ["vehicle", "vespa", "sasha"] },
-	{ "category": "travel_and_places", "char": "🦽", "name": "manual_wheelchair", "keywords": ["vehicle"] },
-	{ "category": "travel_and_places", "char": "🦼", "name": "motorized_wheelchair", "keywords": ["vehicle"] },
-	{ "category": "travel_and_places", "char": "🛺", "name": "auto_rickshaw", "keywords": ["vehicle"] },
-	{ "category": "travel_and_places", "char": "🪂", "name": "parachute", "keywords": ["vehicle"] },
-	{ "category": "travel_and_places", "char": "🚨", "name": "rotating_light", "keywords": ["police", "ambulance", "911", "emergency", "alert", "error", "pinged", "law", "legal"] },
-	{ "category": "travel_and_places", "char": "🚔", "name": "oncoming_police_car", "keywords": ["vehicle", "law", "legal", "enforcement", "911"] },
-	{ "category": "travel_and_places", "char": "🚍", "name": "oncoming_bus", "keywords": ["vehicle", "transportation"] },
-	{ "category": "travel_and_places", "char": "🚘", "name": "oncoming_automobile", "keywords": ["car", "vehicle", "transportation"] },
-	{ "category": "travel_and_places", "char": "🚖", "name": "oncoming_taxi", "keywords": ["vehicle", "cars", "uber"] },
-	{ "category": "travel_and_places", "char": "🚡", "name": "aerial_tramway", "keywords": ["transportation", "vehicle", "ski"] },
-	{ "category": "travel_and_places", "char": "🚠", "name": "mountain_cableway", "keywords": ["transportation", "vehicle", "ski"] },
-	{ "category": "travel_and_places", "char": "🚟", "name": "suspension_railway", "keywords": ["vehicle", "transportation"] },
-	{ "category": "travel_and_places", "char": "🚃", "name": "railway_car", "keywords": ["transportation", "vehicle", "train"] },
-	{ "category": "travel_and_places", "char": "🚋", "name": "train", "keywords": ["transportation", "vehicle", "carriage", "public", "travel"] },
-	{ "category": "travel_and_places", "char": "🚝", "name": "monorail", "keywords": ["transportation", "vehicle"] },
-	{ "category": "travel_and_places", "char": "🚄", "name": "bullettrain_side", "keywords": ["transportation", "vehicle"] },
-	{ "category": "travel_and_places", "char": "🚅", "name": "bullettrain_front", "keywords": ["transportation", "vehicle", "speed", "fast", "public", "travel"] },
-	{ "category": "travel_and_places", "char": "🚈", "name": "light_rail", "keywords": ["transportation", "vehicle"] },
-	{ "category": "travel_and_places", "char": "🚞", "name": "mountain_railway", "keywords": ["transportation", "vehicle"] },
-	{ "category": "travel_and_places", "char": "🚂", "name": "steam_locomotive", "keywords": ["transportation", "vehicle", "train"] },
-	{ "category": "travel_and_places", "char": "🚆", "name": "train2", "keywords": ["transportation", "vehicle"] },
-	{ "category": "travel_and_places", "char": "🚇", "name": "metro", "keywords": ["transportation", "blue-square", "mrt", "underground", "tube"] },
-	{ "category": "travel_and_places", "char": "🚊", "name": "tram", "keywords": ["transportation", "vehicle"] },
-	{ "category": "travel_and_places", "char": "🚉", "name": "station", "keywords": ["transportation", "vehicle", "public"] },
-	{ "category": "travel_and_places", "char": "🛸", "name": "flying_saucer", "keywords": ["transportation", "vehicle", "ufo"] },
-	{ "category": "travel_and_places", "char": "🚁", "name": "helicopter", "keywords": ["transportation", "vehicle", "fly"] },
-	{ "category": "travel_and_places", "char": "🛩", "name": "small_airplane", "keywords": ["flight", "transportation", "fly", "vehicle"] },
-	{ "category": "travel_and_places", "char": "✈️", "name": "airplane", "keywords": ["vehicle", "transportation", "flight", "fly"] },
-	{ "category": "travel_and_places", "char": "🛫", "name": "flight_departure", "keywords": ["airport", "flight", "landing"] },
-	{ "category": "travel_and_places", "char": "🛬", "name": "flight_arrival", "keywords": ["airport", "flight", "boarding"] },
-	{ "category": "travel_and_places", "char": "⛵", "name": "sailboat", "keywords": ["ship", "summer", "transportation", "water", "sailing"] },
-	{ "category": "travel_and_places", "char": "🛥", "name": "motor_boat", "keywords": ["ship"] },
-	{ "category": "travel_and_places", "char": "🚤", "name": "speedboat", "keywords": ["ship", "transportation", "vehicle", "summer"] },
-	{ "category": "travel_and_places", "char": "⛴", "name": "ferry", "keywords": ["boat", "ship", "yacht"] },
-	{ "category": "travel_and_places", "char": "🛳", "name": "passenger_ship", "keywords": ["yacht", "cruise", "ferry"] },
-	{ "category": "travel_and_places", "char": "🚀", "name": "rocket", "keywords": ["launch", "ship", "staffmode", "NASA", "outer space", "outer_space", "fly"] },
-	{ "category": "travel_and_places", "char": "🛰", "name": "artificial_satellite", "keywords": ["communication", "gps", "orbit", "spaceflight", "NASA", "ISS"] },
-	{ "category": "travel_and_places", "char": "🛻", "name": "pickup_truck", "keywords": ["car"] },
-	{ "category": "travel_and_places", "char": "🛼", "name": "roller_skate", "keywords": [] },
-	{ "category": "travel_and_places", "char": "💺", "name": "seat", "keywords": ["sit", "airplane", "transport", "bus", "flight", "fly"] },
-	{ "category": "travel_and_places", "char": "🛶", "name": "canoe", "keywords": ["boat", "paddle", "water", "ship"] },
-	{ "category": "travel_and_places", "char": "⚓", "name": "anchor", "keywords": ["ship", "ferry", "sea", "boat"] },
-	{ "category": "travel_and_places", "char": "🚧", "name": "construction", "keywords": ["wip", "progress", "caution", "warning"] },
-	{ "category": "travel_and_places", "char": "⛽", "name": "fuelpump", "keywords": ["gas station", "petroleum"] },
-	{ "category": "travel_and_places", "char": "🚏", "name": "busstop", "keywords": ["transportation", "wait"] },
-	{ "category": "travel_and_places", "char": "🚦", "name": "vertical_traffic_light", "keywords": ["transportation", "driving"] },
-	{ "category": "travel_and_places", "char": "🚥", "name": "traffic_light", "keywords": ["transportation", "signal"] },
-	{ "category": "travel_and_places", "char": "🏁", "name": "checkered_flag", "keywords": ["contest", "finishline", "race", "gokart"] },
-	{ "category": "travel_and_places", "char": "🚢", "name": "ship", "keywords": ["transportation", "titanic", "deploy"] },
-	{ "category": "travel_and_places", "char": "🎡", "name": "ferris_wheel", "keywords": ["photo", "carnival", "londoneye"] },
-	{ "category": "travel_and_places", "char": "🎢", "name": "roller_coaster", "keywords": ["carnival", "playground", "photo", "fun"] },
-	{ "category": "travel_and_places", "char": "🎠", "name": "carousel_horse", "keywords": ["photo", "carnival"] },
-	{ "category": "travel_and_places", "char": "🏗", "name": "building_construction", "keywords": ["wip", "working", "progress"] },
-	{ "category": "travel_and_places", "char": "🌁", "name": "foggy", "keywords": ["photo", "mountain"] },
-	{ "category": "travel_and_places", "char": "🏭", "name": "factory", "keywords": ["building", "industry", "pollution", "smoke"] },
-	{ "category": "travel_and_places", "char": "⛲", "name": "fountain", "keywords": ["photo", "summer", "water", "fresh"] },
-	{ "category": "travel_and_places", "char": "🎑", "name": "rice_scene", "keywords": ["photo", "japan", "asia", "tsukimi"] },
-	{ "category": "travel_and_places", "char": "⛰", "name": "mountain", "keywords": ["photo", "nature", "environment"] },
-	{ "category": "travel_and_places", "char": "🏔", "name": "mountain_snow", "keywords": ["photo", "nature", "environment", "winter", "cold"] },
-	{ "category": "travel_and_places", "char": "🗻", "name": "mount_fuji", "keywords": ["photo", "mountain", "nature", "japanese"] },
-	{ "category": "travel_and_places", "char": "🌋", "name": "volcano", "keywords": ["photo", "nature", "disaster"] },
-	{ "category": "travel_and_places", "char": "🗾", "name": "japan", "keywords": ["nation", "country", "japanese", "asia"] },
-	{ "category": "travel_and_places", "char": "🏕", "name": "camping", "keywords": ["photo", "outdoors", "tent"] },
-	{ "category": "travel_and_places", "char": "⛺", "name": "tent", "keywords": ["photo", "camping", "outdoors"] },
-	{ "category": "travel_and_places", "char": "🏞", "name": "national_park", "keywords": ["photo", "environment", "nature"] },
-	{ "category": "travel_and_places", "char": "🛣", "name": "motorway", "keywords": ["road", "cupertino", "interstate", "highway"] },
-	{ "category": "travel_and_places", "char": "🛤", "name": "railway_track", "keywords": ["train", "transportation"] },
-	{ "category": "travel_and_places", "char": "🌅", "name": "sunrise", "keywords": ["morning", "view", "vacation", "photo"] },
-	{ "category": "travel_and_places", "char": "🌄", "name": "sunrise_over_mountains", "keywords": ["view", "vacation", "photo"] },
-	{ "category": "travel_and_places", "char": "🏜", "name": "desert", "keywords": ["photo", "warm", "saharah"] },
-	{ "category": "travel_and_places", "char": "🏖", "name": "beach_umbrella", "keywords": ["weather", "summer", "sunny", "sand", "mojito"] },
-	{ "category": "travel_and_places", "char": "🏝", "name": "desert_island", "keywords": ["photo", "tropical", "mojito"] },
-	{ "category": "travel_and_places", "char": "🌇", "name": "city_sunrise", "keywords": ["photo", "good morning", "dawn"] },
-	{ "category": "travel_and_places", "char": "🌆", "name": "city_sunset", "keywords": ["photo", "evening", "sky", "buildings"] },
-	{ "category": "travel_and_places", "char": "🏙", "name": "cityscape", "keywords": ["photo", "night life", "urban"] },
-	{ "category": "travel_and_places", "char": "🌃", "name": "night_with_stars", "keywords": ["evening", "city", "downtown"] },
-	{ "category": "travel_and_places", "char": "🌉", "name": "bridge_at_night", "keywords": ["photo", "sanfrancisco"] },
-	{ "category": "travel_and_places", "char": "🌌", "name": "milky_way", "keywords": ["photo", "space", "stars"] },
-	{ "category": "travel_and_places", "char": "🌠", "name": "stars", "keywords": ["night", "photo"] },
-	{ "category": "travel_and_places", "char": "🎇", "name": "sparkler", "keywords": ["stars", "night", "shine"] },
-	{ "category": "travel_and_places", "char": "🎆", "name": "fireworks", "keywords": ["photo", "festival", "carnival", "congratulations"] },
-	{ "category": "travel_and_places", "char": "🌈", "name": "rainbow", "keywords": ["nature", "happy", "unicorn_face", "photo", "sky", "spring"] },
-	{ "category": "travel_and_places", "char": "🏘", "name": "houses", "keywords": ["buildings", "photo"] },
-	{ "category": "travel_and_places", "char": "🏰", "name": "european_castle", "keywords": ["building", "royalty", "history"] },
-	{ "category": "travel_and_places", "char": "🏯", "name": "japanese_castle", "keywords": ["photo", "building"] },
-	{ "category": "travel_and_places", "char": "🗼", "name": "tokyo_tower", "keywords": ["photo", "japanese"] },
-	{ "category": "travel_and_places", "char": "", "name": "shibuya_109", "keywords": ["photo", "japanese"] },
-	{ "category": "travel_and_places", "char": "🏟", "name": "stadium", "keywords": ["photo", "place", "sports", "concert", "venue"] },
-	{ "category": "travel_and_places", "char": "🗽", "name": "statue_of_liberty", "keywords": ["american", "newyork"] },
-	{ "category": "travel_and_places", "char": "🏠", "name": "house", "keywords": ["building", "home"] },
-	{ "category": "travel_and_places", "char": "🏡", "name": "house_with_garden", "keywords": ["home", "plant", "nature"] },
-	{ "category": "travel_and_places", "char": "🏚", "name": "derelict_house", "keywords": ["abandon", "evict", "broken", "building"] },
-	{ "category": "travel_and_places", "char": "🏢", "name": "office", "keywords": ["building", "bureau", "work"] },
-	{ "category": "travel_and_places", "char": "🏬", "name": "department_store", "keywords": ["building", "shopping", "mall"] },
-	{ "category": "travel_and_places", "char": "🏣", "name": "post_office", "keywords": ["building", "envelope", "communication"] },
-	{ "category": "travel_and_places", "char": "🏤", "name": "european_post_office", "keywords": ["building", "email"] },
-	{ "category": "travel_and_places", "char": "🏥", "name": "hospital", "keywords": ["building", "health", "surgery", "doctor"] },
-	{ "category": "travel_and_places", "char": "🏦", "name": "bank", "keywords": ["building", "money", "sales", "cash", "business", "enterprise"] },
-	{ "category": "travel_and_places", "char": "🏨", "name": "hotel", "keywords": ["building", "accomodation", "checkin"] },
-	{ "category": "travel_and_places", "char": "🏪", "name": "convenience_store", "keywords": ["building", "shopping", "groceries"] },
-	{ "category": "travel_and_places", "char": "🏫", "name": "school", "keywords": ["building", "student", "education", "learn", "teach"] },
-	{ "category": "travel_and_places", "char": "🏩", "name": "love_hotel", "keywords": ["like", "affection", "dating"] },
-	{ "category": "travel_and_places", "char": "💒", "name": "wedding", "keywords": ["love", "like", "affection", "couple", "marriage", "bride", "groom"] },
-	{ "category": "travel_and_places", "char": "🏛", "name": "classical_building", "keywords": ["art", "culture", "history"] },
-	{ "category": "travel_and_places", "char": "⛪", "name": "church", "keywords": ["building", "religion", "christ"] },
-	{ "category": "travel_and_places", "char": "🕌", "name": "mosque", "keywords": ["islam", "worship", "minaret"] },
-	{ "category": "travel_and_places", "char": "🕍", "name": "synagogue", "keywords": ["judaism", "worship", "temple", "jewish"] },
-	{ "category": "travel_and_places", "char": "🕋", "name": "kaaba", "keywords": ["mecca", "mosque", "islam"] },
-	{ "category": "travel_and_places", "char": "⛩", "name": "shinto_shrine", "keywords": ["temple", "japan", "kyoto"] },
-	{ "category": "travel_and_places", "char": "🛕", "name": "hindu_temple", "keywords": ["temple"] },
-	{ "category": "travel_and_places", "char": "🪨", "name": "rock", "keywords": [] },
-	{ "category": "travel_and_places", "char": "🪵", "name": "wood", "keywords": [] },
-	{ "category": "travel_and_places", "char": "🛖", "name": "hut", "keywords": [] },
-	{ "category": "travel_and_places", "char": "\uD83D\uDEDD", "name": "playground_slide", "keywords": [] },
-	{ "category": "travel_and_places", "char": "\uD83D\uDEDE", "name": "wheel", "keywords": [] },
-	{ "category": "travel_and_places", "char": "\uD83D\uDEDF", "name": "ring_buoy", "keywords": [] },
-	{ "category": "objects", "char": "⌚", "name": "watch", "keywords": ["time", "accessories"] },
-	{ "category": "objects", "char": "📱", "name": "iphone", "keywords": ["technology", "apple", "gadgets", "dial"] },
-	{ "category": "objects", "char": "📲", "name": "calling", "keywords": ["iphone", "incoming"] },
-	{ "category": "objects", "char": "💻", "name": "computer", "keywords": ["technology", "laptop", "screen", "display", "monitor"] },
-	{ "category": "objects", "char": "⌨", "name": "keyboard", "keywords": ["technology", "computer", "type", "input", "text"] },
-	{ "category": "objects", "char": "🖥", "name": "desktop_computer", "keywords": ["technology", "computing", "screen"] },
-	{ "category": "objects", "char": "🖨", "name": "printer", "keywords": ["paper", "ink"] },
-	{ "category": "objects", "char": "🖱", "name": "computer_mouse", "keywords": ["click"] },
-	{ "category": "objects", "char": "🖲", "name": "trackball", "keywords": ["technology", "trackpad"] },
-	{ "category": "objects", "char": "🕹", "name": "joystick", "keywords": ["game", "play"] },
-	{ "category": "objects", "char": "🗜", "name": "clamp", "keywords": ["tool"] },
-	{ "category": "objects", "char": "💽", "name": "minidisc", "keywords": ["technology", "record", "data", "disk", "90s"] },
-	{ "category": "objects", "char": "💾", "name": "floppy_disk", "keywords": ["oldschool", "technology", "save", "90s", "80s"] },
-	{ "category": "objects", "char": "💿", "name": "cd", "keywords": ["technology", "dvd", "disk", "disc", "90s"] },
-	{ "category": "objects", "char": "📀", "name": "dvd", "keywords": ["cd", "disk", "disc"] },
-	{ "category": "objects", "char": "📼", "name": "vhs", "keywords": ["record", "video", "oldschool", "90s", "80s"] },
-	{ "category": "objects", "char": "📷", "name": "camera", "keywords": ["gadgets", "photography"] },
-	{ "category": "objects", "char": "📸", "name": "camera_flash", "keywords": ["photography", "gadgets"] },
-	{ "category": "objects", "char": "📹", "name": "video_camera", "keywords": ["film", "record"] },
-	{ "category": "objects", "char": "🎥", "name": "movie_camera", "keywords": ["film", "record"] },
-	{ "category": "objects", "char": "📽", "name": "film_projector", "keywords": ["video", "tape", "record", "movie"] },
-	{ "category": "objects", "char": "🎞", "name": "film_strip", "keywords": ["movie"] },
-	{ "category": "objects", "char": "📞", "name": "telephone_receiver", "keywords": ["technology", "communication", "dial"] },
-	{ "category": "objects", "char": "☎️", "name": "phone", "keywords": ["technology", "communication", "dial", "telephone"] },
-	{ "category": "objects", "char": "📟", "name": "pager", "keywords": ["bbcall", "oldschool", "90s"] },
-	{ "category": "objects", "char": "📠", "name": "fax", "keywords": ["communication", "technology"] },
-	{ "category": "objects", "char": "📺", "name": "tv", "keywords": ["technology", "program", "oldschool", "show", "television"] },
-	{ "category": "objects", "char": "📻", "name": "radio", "keywords": ["communication", "music", "podcast", "program"] },
-	{ "category": "objects", "char": "🎙", "name": "studio_microphone", "keywords": ["sing", "recording", "artist", "talkshow"] },
-	{ "category": "objects", "char": "🎚", "name": "level_slider", "keywords": ["scale"] },
-	{ "category": "objects", "char": "🎛", "name": "control_knobs", "keywords": ["dial"] },
-	{ "category": "objects", "char": "🧭", "name": "compass", "keywords": ["magnetic", "navigation", "orienteering"] },
-	{ "category": "objects", "char": "⏱", "name": "stopwatch", "keywords": ["time", "deadline"] },
-	{ "category": "objects", "char": "⏲", "name": "timer_clock", "keywords": ["alarm"] },
-	{ "category": "objects", "char": "⏰", "name": "alarm_clock", "keywords": ["time", "wake"] },
-	{ "category": "objects", "char": "🕰", "name": "mantelpiece_clock", "keywords": ["time"] },
-	{ "category": "objects", "char": "⏳", "name": "hourglass_flowing_sand", "keywords": ["oldschool", "time", "countdown"] },
-	{ "category": "objects", "char": "⌛", "name": "hourglass", "keywords": ["time", "clock", "oldschool", "limit", "exam", "quiz", "test"] },
-	{ "category": "objects", "char": "📡", "name": "satellite", "keywords": ["communication", "future", "radio", "space"] },
-	{ "category": "objects", "char": "🔋", "name": "battery", "keywords": ["power", "energy", "sustain"] },
-	{ "category": "objects", "char": "\uD83E\uDEAB", "name": "battery", "keywords": [] },
-	{ "category": "objects", "char": "🔌", "name": "electric_plug", "keywords": ["charger", "power"] },
-	{ "category": "objects", "char": "💡", "name": "bulb", "keywords": ["light", "electricity", "idea"] },
-	{ "category": "objects", "char": "🔦", "name": "flashlight", "keywords": ["dark", "camping", "sight", "night"] },
-	{ "category": "objects", "char": "🕯", "name": "candle", "keywords": ["fire", "wax"] },
-	{ "category": "objects", "char": "🧯", "name": "fire_extinguisher", "keywords": ["quench"] },
-	{ "category": "objects", "char": "🗑", "name": "wastebasket", "keywords": ["bin", "trash", "rubbish", "garbage", "toss"] },
-	{ "category": "objects", "char": "🛢", "name": "oil_drum", "keywords": ["barrell"] },
-	{ "category": "objects", "char": "💸", "name": "money_with_wings", "keywords": ["dollar", "bills", "payment", "sale"] },
-	{ "category": "objects", "char": "💵", "name": "dollar", "keywords": ["money", "sales", "bill", "currency"] },
-	{ "category": "objects", "char": "💴", "name": "yen", "keywords": ["money", "sales", "japanese", "dollar", "currency"] },
-	{ "category": "objects", "char": "💶", "name": "euro", "keywords": ["money", "sales", "dollar", "currency"] },
-	{ "category": "objects", "char": "💷", "name": "pound", "keywords": ["british", "sterling", "money", "sales", "bills", "uk", "england", "currency"] },
-	{ "category": "objects", "char": "💰", "name": "moneybag", "keywords": ["dollar", "payment", "coins", "sale"] },
-	{ "category": "objects", "char": "🪙", "name": "coin", "keywords": ["dollar", "payment", "coins", "sale"] },
-	{ "category": "objects", "char": "💳", "name": "credit_card", "keywords": ["money", "sales", "dollar", "bill", "payment", "shopping"] },
-	{ "category": "objects", "char": "\uD83E\uDEAB", "name": "identification_card", "keywords": [] },
-	{ "category": "objects", "char": "💎", "name": "gem", "keywords": ["blue", "ruby", "diamond", "jewelry"] },
-	{ "category": "objects", "char": "⚖", "name": "balance_scale", "keywords": ["law", "fairness", "weight"] },
-	{ "category": "objects", "char": "🧰", "name": "toolbox", "keywords": ["tools", "diy", "fix", "maintainer", "mechanic"] },
-	{ "category": "objects", "char": "🔧", "name": "wrench", "keywords": ["tools", "diy", "ikea", "fix", "maintainer"] },
-	{ "category": "objects", "char": "🔨", "name": "hammer", "keywords": ["tools", "build", "create"] },
-	{ "category": "objects", "char": "⚒", "name": "hammer_and_pick", "keywords": ["tools", "build", "create"] },
-	{ "category": "objects", "char": "🛠", "name": "hammer_and_wrench", "keywords": ["tools", "build", "create"] },
-	{ "category": "objects", "char": "⛏", "name": "pick", "keywords": ["tools", "dig"] },
-	{ "category": "objects", "char": "🪓", "name": "axe", "keywords": ["tools"] },
-	{ "category": "objects", "char": "🦯", "name": "probing_cane", "keywords": ["tools"] },
-	{ "category": "objects", "char": "🔩", "name": "nut_and_bolt", "keywords": ["handy", "tools", "fix"] },
-	{ "category": "objects", "char": "⚙", "name": "gear", "keywords": ["cog"] },
-	{ "category": "objects", "char": "🪃", "name": "boomerang", "keywords": ["tool"] },
-	{ "category": "objects", "char": "🪚", "name": "carpentry_saw", "keywords": ["tool"] },
-	{ "category": "objects", "char": "🪛", "name": "screwdriver", "keywords": ["tool"] },
-	{ "category": "objects", "char": "🪝", "name": "hook", "keywords": ["tool"] },
-	{ "category": "objects", "char": "🪜", "name": "ladder", "keywords": ["tool"] },
-	{ "category": "objects", "char": "🧱", "name": "brick", "keywords": ["bricks"] },
-	{ "category": "objects", "char": "⛓", "name": "chains", "keywords": ["lock", "arrest"] },
-	{ "category": "objects", "char": "🧲", "name": "magnet", "keywords": ["attraction", "magnetic"] },
-	{ "category": "objects", "char": "🔫", "name": "gun", "keywords": ["violence", "weapon", "pistol", "revolver"] },
-	{ "category": "objects", "char": "💣", "name": "bomb", "keywords": ["boom", "explode", "explosion", "terrorism"] },
-	{ "category": "objects", "char": "🧨", "name": "firecracker", "keywords": ["dynamite", "boom", "explode", "explosion", "explosive"] },
-	{ "category": "objects", "char": "🔪", "name": "hocho", "keywords": ["knife", "blade", "cutlery", "kitchen", "weapon"] },
-	{ "category": "objects", "char": "🗡", "name": "dagger", "keywords": ["weapon"] },
-	{ "category": "objects", "char": "⚔", "name": "crossed_swords", "keywords": ["weapon"] },
-	{ "category": "objects", "char": "🛡", "name": "shield", "keywords": ["protection", "security"] },
-	{ "category": "objects", "char": "🚬", "name": "smoking", "keywords": ["kills", "tobacco", "cigarette", "joint", "smoke"] },
-	{ "category": "objects", "char": "☠", "name": "skull_and_crossbones", "keywords": ["poison", "danger", "deadly", "scary", "death", "pirate", "evil"] },
-	{ "category": "objects", "char": "⚰", "name": "coffin", "keywords": ["vampire", "dead", "die", "death", "rip", "graveyard", "cemetery", "casket", "funeral", "box"] },
-	{ "category": "objects", "char": "⚱", "name": "funeral_urn", "keywords": ["dead", "die", "death", "rip", "ashes"] },
-	{ "category": "objects", "char": "🏺", "name": "amphora", "keywords": ["vase", "jar"] },
-	{ "category": "objects", "char": "🔮", "name": "crystal_ball", "keywords": ["disco", "party", "magic", "circus", "fortune_teller"] },
-	{ "category": "objects", "char": "📿", "name": "prayer_beads", "keywords": ["dhikr", "religious"] },
-	{ "category": "objects", "char": "🧿", "name": "nazar_amulet", "keywords": ["bead", "charm"] },
-	{ "category": "objects", "char": "💈", "name": "barber", "keywords": ["hair", "salon", "style"] },
-	{ "category": "objects", "char": "⚗", "name": "alembic", "keywords": ["distilling", "science", "experiment", "chemistry"] },
-	{ "category": "objects", "char": "🔭", "name": "telescope", "keywords": ["stars", "space", "zoom", "science", "astronomy"] },
-	{ "category": "objects", "char": "🔬", "name": "microscope", "keywords": ["laboratory", "experiment", "zoomin", "science", "study"] },
-	{ "category": "objects", "char": "🕳", "name": "hole", "keywords": ["embarrassing"] },
-	{ "category": "objects", "char": "💊", "name": "pill", "keywords": ["health", "medicine", "doctor", "pharmacy", "drug"] },
-	{ "category": "objects", "char": "💉", "name": "syringe", "keywords": ["health", "hospital", "drugs", "blood", "medicine", "needle", "doctor", "nurse"] },
-	{ "category": "objects", "char": "🩸", "name": "drop_of_blood", "keywords": ["health", "hospital", "medicine", "needle", "doctor", "nurse"] },
-	{ "category": "objects", "char": "🩹", "name": "adhesive_bandage", "keywords": ["health", "hospital", "medicine", "needle", "doctor", "nurse"] },
-	{ "category": "objects", "char": "🩺", "name": "stethoscope", "keywords": ["health", "hospital", "medicine", "needle", "doctor", "nurse"] },
-	{ "category": "objects", "char": "🪒", "name": "razor", "keywords": ["health"] },
-	{ "category": "objects", "char": "\uD83E\uDE7B", "name": "xray", "keywords": [] },
-	{ "category": "objects", "char": "\uD83E\uDE7C", "name": "crutch", "keywords": [] },
-	{ "category": "objects", "char": "🧬", "name": "dna", "keywords": ["biologist", "genetics", "life"] },
-	{ "category": "objects", "char": "🧫", "name": "petri_dish", "keywords": ["bacteria", "biology", "culture", "lab"] },
-	{ "category": "objects", "char": "🧪", "name": "test_tube", "keywords": ["chemistry", "experiment", "lab", "science"] },
-	{ "category": "objects", "char": "🌡", "name": "thermometer", "keywords": ["weather", "temperature", "hot", "cold"] },
-	{ "category": "objects", "char": "🧹", "name": "broom", "keywords": ["cleaning", "sweeping", "witch"] },
-	{ "category": "objects", "char": "🧺", "name": "basket", "keywords": ["laundry"] },
-	{ "category": "objects", "char": "🧻", "name": "toilet_paper", "keywords": ["roll"] },
-	{ "category": "objects", "char": "🏷", "name": "label", "keywords": ["sale", "tag"] },
-	{ "category": "objects", "char": "🔖", "name": "bookmark", "keywords": ["favorite", "label", "save"] },
-	{ "category": "objects", "char": "🚽", "name": "toilet", "keywords": ["restroom", "wc", "washroom", "bathroom", "potty"] },
-	{ "category": "objects", "char": "🚿", "name": "shower", "keywords": ["clean", "water", "bathroom"] },
-	{ "category": "objects", "char": "🛁", "name": "bathtub", "keywords": ["clean", "shower", "bathroom"] },
-	{ "category": "objects", "char": "🧼", "name": "soap", "keywords": ["bar", "bathing", "cleaning", "lather"] },
-	{ "category": "objects", "char": "🧽", "name": "sponge", "keywords": ["absorbing", "cleaning", "porous"] },
-	{ "category": "objects", "char": "🧴", "name": "lotion_bottle", "keywords": ["moisturizer", "sunscreen"] },
-	{ "category": "objects", "char": "🔑", "name": "key", "keywords": ["lock", "door", "password"] },
-	{ "category": "objects", "char": "🗝", "name": "old_key", "keywords": ["lock", "door", "password"] },
-	{ "category": "objects", "char": "🛋", "name": "couch_and_lamp", "keywords": ["read", "chill"] },
-	{ "category": "objects", "char": "🪔", "name": "diya_Lamp", "keywords": ["light", "oil"] },
-	{ "category": "objects", "char": "🛌", "name": "sleeping_bed", "keywords": ["bed", "rest"] },
-	{ "category": "objects", "char": "🛏", "name": "bed", "keywords": ["sleep", "rest"] },
-	{ "category": "objects", "char": "🚪", "name": "door", "keywords": ["house", "entry", "exit"] },
-	{ "category": "objects", "char": "🪑", "name": "chair", "keywords": ["house", "desk"] },
-	{ "category": "objects", "char": "🛎", "name": "bellhop_bell", "keywords": ["service"] },
-	{ "category": "objects", "char": "🧸", "name": "teddy_bear", "keywords": ["plush", "stuffed"] },
-	{ "category": "objects", "char": "🖼", "name": "framed_picture", "keywords": ["photography"] },
-	{ "category": "objects", "char": "🗺", "name": "world_map", "keywords": ["location", "direction"] },
-	{ "category": "objects", "char": "🛗", "name": "elevator", "keywords": ["household"] },
-	{ "category": "objects", "char": "🪞", "name": "mirror", "keywords": ["household"] },
-	{ "category": "objects", "char": "🪟", "name": "window", "keywords": ["household"] },
-	{ "category": "objects", "char": "🪠", "name": "plunger", "keywords": ["household"] },
-	{ "category": "objects", "char": "🪤", "name": "mouse_trap", "keywords": ["household"] },
-	{ "category": "objects", "char": "🪣", "name": "bucket", "keywords": ["household"] },
-	{ "category": "objects", "char": "🪥", "name": "toothbrush", "keywords": ["household"] },
-	{ "category": "objects", "char": "\uD83E\uDEE7", "name": "bubbles", "keywords": [] },
-	{ "category": "objects", "char": "⛱", "name": "parasol_on_ground", "keywords": ["weather", "summer"] },
-	{ "category": "objects", "char": "🗿", "name": "moyai", "keywords": ["rock", "easter island", "moai"] },
-	{ "category": "objects", "char": "🛍", "name": "shopping", "keywords": ["mall", "buy", "purchase"] },
-	{ "category": "objects", "char": "🛒", "name": "shopping_cart", "keywords": ["trolley"] },
-	{ "category": "objects", "char": "🎈", "name": "balloon", "keywords": ["party", "celebration", "birthday", "circus"] },
-	{ "category": "objects", "char": "🎏", "name": "flags", "keywords": ["fish", "japanese", "koinobori", "carp", "banner"] },
-	{ "category": "objects", "char": "🎀", "name": "ribbon", "keywords": ["decoration", "pink", "girl", "bowtie"] },
-	{ "category": "objects", "char": "🎁", "name": "gift", "keywords": ["present", "birthday", "christmas", "xmas"] },
-	{ "category": "objects", "char": "🎊", "name": "confetti_ball", "keywords": ["festival", "party", "birthday", "circus"] },
-	{ "category": "objects", "char": "🎉", "name": "tada", "keywords": ["party", "congratulations", "birthday", "magic", "circus", "celebration"] },
-	{ "category": "objects", "char": "🎎", "name": "dolls", "keywords": ["japanese", "toy", "kimono"] },
-	{ "category": "objects", "char": "🎐", "name": "wind_chime", "keywords": ["nature", "ding", "spring", "bell"] },
-	{ "category": "objects", "char": "🎌", "name": "crossed_flags", "keywords": ["japanese", "nation", "country", "border"] },
-	{ "category": "objects", "char": "🏮", "name": "izakaya_lantern", "keywords": ["light", "paper", "halloween", "spooky"] },
-	{ "category": "objects", "char": "🧧", "name": "red_envelope", "keywords": ["gift"] },
-	{ "category": "objects", "char": "✉️", "name": "email", "keywords": ["letter", "postal", "inbox", "communication"] },
-	{ "category": "objects", "char": "📩", "name": "envelope_with_arrow", "keywords": ["email", "communication"] },
-	{ "category": "objects", "char": "📨", "name": "incoming_envelope", "keywords": ["email", "inbox"] },
-	{ "category": "objects", "char": "📧", "name": "e-mail", "keywords": ["communication", "inbox"] },
-	{ "category": "objects", "char": "💌", "name": "love_letter", "keywords": ["email", "like", "affection", "envelope", "valentines"] },
-	{ "category": "objects", "char": "📮", "name": "postbox", "keywords": ["email", "letter", "envelope"] },
-	{ "category": "objects", "char": "📪", "name": "mailbox_closed", "keywords": ["email", "communication", "inbox"] },
-	{ "category": "objects", "char": "📫", "name": "mailbox", "keywords": ["email", "inbox", "communication"] },
-	{ "category": "objects", "char": "📬", "name": "mailbox_with_mail", "keywords": ["email", "inbox", "communication"] },
-	{ "category": "objects", "char": "📭", "name": "mailbox_with_no_mail", "keywords": ["email", "inbox"] },
-	{ "category": "objects", "char": "📦", "name": "package", "keywords": ["mail", "gift", "cardboard", "box", "moving"] },
-	{ "category": "objects", "char": "📯", "name": "postal_horn", "keywords": ["instrument", "music"] },
-	{ "category": "objects", "char": "📥", "name": "inbox_tray", "keywords": ["email", "documents"] },
-	{ "category": "objects", "char": "📤", "name": "outbox_tray", "keywords": ["inbox", "email"] },
-	{ "category": "objects", "char": "📜", "name": "scroll", "keywords": ["documents", "ancient", "history", "paper"] },
-	{ "category": "objects", "char": "📃", "name": "page_with_curl", "keywords": ["documents", "office", "paper"] },
-	{ "category": "objects", "char": "📑", "name": "bookmark_tabs", "keywords": ["favorite", "save", "order", "tidy"] },
-	{ "category": "objects", "char": "🧾", "name": "receipt", "keywords": ["accounting", "expenses"] },
-	{ "category": "objects", "char": "📊", "name": "bar_chart", "keywords": ["graph", "presentation", "stats"] },
-	{ "category": "objects", "char": "📈", "name": "chart_with_upwards_trend", "keywords": ["graph", "presentation", "stats", "recovery", "business", "economics", "money", "sales", "good", "success"] },
-	{ "category": "objects", "char": "📉", "name": "chart_with_downwards_trend", "keywords": ["graph", "presentation", "stats", "recession", "business", "economics", "money", "sales", "bad", "failure"] },
-	{ "category": "objects", "char": "📄", "name": "page_facing_up", "keywords": ["documents", "office", "paper", "information"] },
-	{ "category": "objects", "char": "📅", "name": "date", "keywords": ["calendar", "schedule"] },
-	{ "category": "objects", "char": "📆", "name": "calendar", "keywords": ["schedule", "date", "planning"] },
-	{ "category": "objects", "char": "🗓", "name": "spiral_calendar", "keywords": ["date", "schedule", "planning"] },
-	{ "category": "objects", "char": "📇", "name": "card_index", "keywords": ["business", "stationery"] },
-	{ "category": "objects", "char": "🗃", "name": "card_file_box", "keywords": ["business", "stationery"] },
-	{ "category": "objects", "char": "🗳", "name": "ballot_box", "keywords": ["election", "vote"] },
-	{ "category": "objects", "char": "🗄", "name": "file_cabinet", "keywords": ["filing", "organizing"] },
-	{ "category": "objects", "char": "📋", "name": "clipboard", "keywords": ["stationery", "documents"] },
-	{ "category": "objects", "char": "🗒", "name": "spiral_notepad", "keywords": ["memo", "stationery"] },
-	{ "category": "objects", "char": "📁", "name": "file_folder", "keywords": ["documents", "business", "office"] },
-	{ "category": "objects", "char": "📂", "name": "open_file_folder", "keywords": ["documents", "load"] },
-	{ "category": "objects", "char": "🗂", "name": "card_index_dividers", "keywords": ["organizing", "business", "stationery"] },
-	{ "category": "objects", "char": "🗞", "name": "newspaper_roll", "keywords": ["press", "headline"] },
-	{ "category": "objects", "char": "📰", "name": "newspaper", "keywords": ["press", "headline"] },
-	{ "category": "objects", "char": "📓", "name": "notebook", "keywords": ["stationery", "record", "notes", "paper", "study"] },
-	{ "category": "objects", "char": "📕", "name": "closed_book", "keywords": ["read", "library", "knowledge", "textbook", "learn"] },
-	{ "category": "objects", "char": "📗", "name": "green_book", "keywords": ["read", "library", "knowledge", "study"] },
-	{ "category": "objects", "char": "📘", "name": "blue_book", "keywords": ["read", "library", "knowledge", "learn", "study"] },
-	{ "category": "objects", "char": "📙", "name": "orange_book", "keywords": ["read", "library", "knowledge", "textbook", "study"] },
-	{ "category": "objects", "char": "📔", "name": "notebook_with_decorative_cover", "keywords": ["classroom", "notes", "record", "paper", "study"] },
-	{ "category": "objects", "char": "📒", "name": "ledger", "keywords": ["notes", "paper"] },
-	{ "category": "objects", "char": "📚", "name": "books", "keywords": ["literature", "library", "study"] },
-	{ "category": "objects", "char": "📖", "name": "open_book", "keywords": ["book", "read", "library", "knowledge", "literature", "learn", "study"] },
-	{ "category": "objects", "char": "🧷", "name": "safety_pin", "keywords": ["diaper"] },
-	{ "category": "objects", "char": "🔗", "name": "link", "keywords": ["rings", "url"] },
-	{ "category": "objects", "char": "📎", "name": "paperclip", "keywords": ["documents", "stationery"] },
-	{ "category": "objects", "char": "🖇", "name": "paperclips", "keywords": ["documents", "stationery"] },
-	{ "category": "objects", "char": "✂️", "name": "scissors", "keywords": ["stationery", "cut"] },
-	{ "category": "objects", "char": "📐", "name": "triangular_ruler", "keywords": ["stationery", "math", "architect", "sketch"] },
-	{ "category": "objects", "char": "📏", "name": "straight_ruler", "keywords": ["stationery", "calculate", "length", "math", "school", "drawing", "architect", "sketch"] },
-	{ "category": "objects", "char": "🧮", "name": "abacus", "keywords": ["calculation"] },
-	{ "category": "objects", "char": "📌", "name": "pushpin", "keywords": ["stationery", "mark", "here"] },
-	{ "category": "objects", "char": "📍", "name": "round_pushpin", "keywords": ["stationery", "location", "map", "here"] },
-	{ "category": "objects", "char": "🚩", "name": "triangular_flag_on_post", "keywords": ["mark", "milestone", "place"] },
-	{ "category": "objects", "char": "🏳", "name": "white_flag", "keywords": ["losing", "loser", "lost", "surrender", "give up", "fail"] },
-	{ "category": "objects", "char": "🏴", "name": "black_flag", "keywords": ["pirate"] },
-	{ "category": "objects", "char": "🏳️‍🌈", "name": "rainbow_flag", "keywords": ["flag", "rainbow", "pride", "gay", "lgbt", "glbt", "queer", "homosexual", "lesbian", "bisexual", "transgender"] },
-	{ "category": "objects", "char": "🏳️‍⚧️", "name": "transgender_flag", "keywords": ["flag", "transgender"] },
-	{ "category": "objects", "char": "🔐", "name": "closed_lock_with_key", "keywords": ["security", "privacy"] },
-	{ "category": "objects", "char": "🔒", "name": "lock", "keywords": ["security", "password", "padlock"] },
-	{ "category": "objects", "char": "🔓", "name": "unlock", "keywords": ["privacy", "security"] },
-	{ "category": "objects", "char": "🔏", "name": "lock_with_ink_pen", "keywords": ["security", "secret"] },
-	{ "category": "objects", "char": "🖊", "name": "pen", "keywords": ["stationery", "writing", "write"] },
-	{ "category": "objects", "char": "🖋", "name": "fountain_pen", "keywords": ["stationery", "writing", "write"] },
-	{ "category": "objects", "char": "✒️", "name": "black_nib", "keywords": ["pen", "stationery", "writing", "write"] },
-	{ "category": "objects", "char": "📝", "name": "memo", "keywords": ["write", "documents", "stationery", "pencil", "paper", "writing", "legal", "exam", "quiz", "test", "study", "compose"] },
-	{ "category": "objects", "char": "✏️", "name": "pencil2", "keywords": ["stationery", "write", "paper", "writing", "school", "study"] },
-	{ "category": "objects", "char": "🖍", "name": "crayon", "keywords": ["drawing", "creativity"] },
-	{ "category": "objects", "char": "🖌", "name": "paintbrush", "keywords": ["drawing", "creativity", "art"] },
-	{ "category": "objects", "char": "🔍", "name": "mag", "keywords": ["search", "zoom", "find", "detective"] },
-	{ "category": "objects", "char": "🔎", "name": "mag_right", "keywords": ["search", "zoom", "find", "detective"] },
-	{ "category": "objects", "char": "🪦", "name": "headstone", "keywords": [] },
-	{ "category": "objects", "char": "🪧", "name": "placard", "keywords": [] },
-	{ "category": "symbols", "char": "💯", "name": "100", "keywords": ["score", "perfect", "numbers", "century", "exam", "quiz", "test", "pass", "hundred"] },
-	{ "category": "symbols", "char": "🔢", "name": "1234", "keywords": ["numbers", "blue-square"] },
-	{ "category": "symbols", "char": "❤️", "name": "heart", "keywords": ["love", "like", "affection", "valentines"] },
-	{ "category": "symbols", "char": "🧡", "name": "orange_heart", "keywords": ["love", "like", "affection", "valentines"] },
-	{ "category": "symbols", "char": "💛", "name": "yellow_heart", "keywords": ["love", "like", "affection", "valentines"] },
-	{ "category": "symbols", "char": "💚", "name": "green_heart", "keywords": ["love", "like", "affection", "valentines"] },
-	{ "category": "symbols", "char": "💙", "name": "blue_heart", "keywords": ["love", "like", "affection", "valentines"] },
-	{ "category": "symbols", "char": "💜", "name": "purple_heart", "keywords": ["love", "like", "affection", "valentines"] },
-	{ "category": "symbols", "char": "🤎", "name": "brown_heart", "keywords": ["love", "like", "affection", "valentines"] },
-	{ "category": "symbols", "char": "🖤", "name": "black_heart", "keywords": ["love", "like", "affection", "valentines"] },
-	{ "category": "symbols", "char": "🤍", "name": "white_heart", "keywords": ["love", "like", "affection", "valentines"] },
-	{ "category": "symbols", "char": "💔", "name": "broken_heart", "keywords": ["sad", "sorry", "break", "heart", "heartbreak"] },
-	{ "category": "symbols", "char": "❣", "name": "heavy_heart_exclamation", "keywords": ["decoration", "love"] },
-	{ "category": "symbols", "char": "💕", "name": "two_hearts", "keywords": ["love", "like", "affection", "valentines", "heart"] },
-	{ "category": "symbols", "char": "💞", "name": "revolving_hearts", "keywords": ["love", "like", "affection", "valentines"] },
-	{ "category": "symbols", "char": "💓", "name": "heartbeat", "keywords": ["love", "like", "affection", "valentines", "pink", "heart"] },
-	{ "category": "symbols", "char": "💗", "name": "heartpulse", "keywords": ["like", "love", "affection", "valentines", "pink"] },
-	{ "category": "symbols", "char": "💖", "name": "sparkling_heart", "keywords": ["love", "like", "affection", "valentines"] },
-	{ "category": "symbols", "char": "💘", "name": "cupid", "keywords": ["love", "like", "heart", "affection", "valentines"] },
-	{ "category": "symbols", "char": "💝", "name": "gift_heart", "keywords": ["love", "valentines"] },
-	{ "category": "symbols", "char": "💟", "name": "heart_decoration", "keywords": ["purple-square", "love", "like"] },
-	{ "category": "symbols", "char": "\u2764\uFE0F\u200D\uD83D\uDD25", "name": "heart_on_fire", "keywords": [] },
-	{ "category": "symbols", "char": "\u2764\uFE0F\u200D\uD83E\uDE79", "name": "mending_heart", "keywords": [] },
-	{ "category": "symbols", "char": "☮", "name": "peace_symbol", "keywords": ["hippie"] },
-	{ "category": "symbols", "char": "✝", "name": "latin_cross", "keywords": ["christianity"] },
-	{ "category": "symbols", "char": "☪", "name": "star_and_crescent", "keywords": ["islam"] },
-	{ "category": "symbols", "char": "🕉", "name": "om", "keywords": ["hinduism", "buddhism", "sikhism", "jainism"] },
-	{ "category": "symbols", "char": "☸", "name": "wheel_of_dharma", "keywords": ["hinduism", "buddhism", "sikhism", "jainism"] },
-	{ "category": "symbols", "char": "✡", "name": "star_of_david", "keywords": ["judaism"] },
-	{ "category": "symbols", "char": "🔯", "name": "six_pointed_star", "keywords": ["purple-square", "religion", "jewish", "hexagram"] },
-	{ "category": "symbols", "char": "🕎", "name": "menorah", "keywords": ["hanukkah", "candles", "jewish"] },
-	{ "category": "symbols", "char": "☯", "name": "yin_yang", "keywords": ["balance"] },
-	{ "category": "symbols", "char": "☦", "name": "orthodox_cross", "keywords": ["suppedaneum", "religion"] },
-	{ "category": "symbols", "char": "🛐", "name": "place_of_worship", "keywords": ["religion", "church", "temple", "prayer"] },
-	{ "category": "symbols", "char": "⛎", "name": "ophiuchus", "keywords": ["sign", "purple-square", "constellation", "astrology"] },
-	{ "category": "symbols", "char": "♈", "name": "aries", "keywords": ["sign", "purple-square", "zodiac", "astrology"] },
-	{ "category": "symbols", "char": "♉", "name": "taurus", "keywords": ["purple-square", "sign", "zodiac", "astrology"] },
-	{ "category": "symbols", "char": "♊", "name": "gemini", "keywords": ["sign", "zodiac", "purple-square", "astrology"] },
-	{ "category": "symbols", "char": "♋", "name": "cancer", "keywords": ["sign", "zodiac", "purple-square", "astrology"] },
-	{ "category": "symbols", "char": "♌", "name": "leo", "keywords": ["sign", "purple-square", "zodiac", "astrology"] },
-	{ "category": "symbols", "char": "♍", "name": "virgo", "keywords": ["sign", "zodiac", "purple-square", "astrology"] },
-	{ "category": "symbols", "char": "♎", "name": "libra", "keywords": ["sign", "purple-square", "zodiac", "astrology"] },
-	{ "category": "symbols", "char": "♏", "name": "scorpius", "keywords": ["sign", "zodiac", "purple-square", "astrology", "scorpio"] },
-	{ "category": "symbols", "char": "♐", "name": "sagittarius", "keywords": ["sign", "zodiac", "purple-square", "astrology"] },
-	{ "category": "symbols", "char": "♑", "name": "capricorn", "keywords": ["sign", "zodiac", "purple-square", "astrology"] },
-	{ "category": "symbols", "char": "♒", "name": "aquarius", "keywords": ["sign", "purple-square", "zodiac", "astrology"] },
-	{ "category": "symbols", "char": "♓", "name": "pisces", "keywords": ["purple-square", "sign", "zodiac", "astrology"] },
-	{ "category": "symbols", "char": "🆔", "name": "id", "keywords": ["purple-square", "words"] },
-	{ "category": "symbols", "char": "⚛", "name": "atom_symbol", "keywords": ["science", "physics", "chemistry"] },
-	{ "category": "symbols", "char": "⚧️", "name": "transgender_symbol", "keywords": ["purple-square", "woman", "female", "toilet", "loo", "restroom", "gender"] },
-	{ "category": "symbols", "char": "🈳", "name": "u7a7a", "keywords": ["kanji", "japanese", "chinese", "empty", "sky", "blue-square", "aki"] },
-	{ "category": "symbols", "char": "🈹", "name": "u5272", "keywords": ["cut", "divide", "chinese", "kanji", "pink-square", "waribiki"] },
-	{ "category": "symbols", "char": "☢", "name": "radioactive", "keywords": ["nuclear", "danger"] },
-	{ "category": "symbols", "char": "☣", "name": "biohazard", "keywords": ["danger"] },
-	{ "category": "symbols", "char": "📴", "name": "mobile_phone_off", "keywords": ["mute", "orange-square", "silence", "quiet"] },
-	{ "category": "symbols", "char": "📳", "name": "vibration_mode", "keywords": ["orange-square", "phone"] },
-	{ "category": "symbols", "char": "🈶", "name": "u6709", "keywords": ["orange-square", "chinese", "have", "kanji", "ari"] },
-	{ "category": "symbols", "char": "🈚", "name": "u7121", "keywords": ["nothing", "chinese", "kanji", "japanese", "orange-square", "nashi"] },
-	{ "category": "symbols", "char": "🈸", "name": "u7533", "keywords": ["chinese", "japanese", "kanji", "orange-square", "moushikomi"] },
-	{ "category": "symbols", "char": "🈺", "name": "u55b6", "keywords": ["japanese", "opening hours", "orange-square", "eigyo"] },
-	{ "category": "symbols", "char": "🈷️", "name": "u6708", "keywords": ["chinese", "month", "moon", "japanese", "orange-square", "kanji", "tsuki", "tsukigime", "getsugaku"] },
-	{ "category": "symbols", "char": "✴️", "name": "eight_pointed_black_star", "keywords": ["orange-square", "shape", "polygon"] },
-	{ "category": "symbols", "char": "🆚", "name": "vs", "keywords": ["words", "orange-square"] },
-	{ "category": "symbols", "char": "🉑", "name": "accept", "keywords": ["ok", "good", "chinese", "kanji", "agree", "yes", "orange-circle"] },
-	{ "category": "symbols", "char": "💮", "name": "white_flower", "keywords": ["japanese", "spring"] },
-	{ "category": "symbols", "char": "🉐", "name": "ideograph_advantage", "keywords": ["chinese", "kanji", "obtain", "get", "circle"] },
-	{ "category": "symbols", "char": "㊙️", "name": "secret", "keywords": ["privacy", "chinese", "sshh", "kanji", "red-circle"] },
-	{ "category": "symbols", "char": "㊗️", "name": "congratulations", "keywords": ["chinese", "kanji", "japanese", "red-circle"] },
-	{ "category": "symbols", "char": "🈴", "name": "u5408", "keywords": ["japanese", "chinese", "join", "kanji", "red-square", "goukaku", "pass"] },
-	{ "category": "symbols", "char": "🈵", "name": "u6e80", "keywords": ["full", "chinese", "japanese", "red-square", "kanji", "man"] },
-	{ "category": "symbols", "char": "🈲", "name": "u7981", "keywords": ["kanji", "japanese", "chinese", "forbidden", "limit", "restricted", "red-square", "kinshi"] },
-	{ "category": "symbols", "char": "🅰️", "name": "a", "keywords": ["red-square", "alphabet", "letter"] },
-	{ "category": "symbols", "char": "🅱️", "name": "b", "keywords": ["red-square", "alphabet", "letter"] },
-	{ "category": "symbols", "char": "🆎", "name": "ab", "keywords": ["red-square", "alphabet"] },
-	{ "category": "symbols", "char": "🆑", "name": "cl", "keywords": ["alphabet", "words", "red-square"] },
-	{ "category": "symbols", "char": "🅾️", "name": "o2", "keywords": ["alphabet", "red-square", "letter"] },
-	{ "category": "symbols", "char": "🆘", "name": "sos", "keywords": ["help", "red-square", "words", "emergency", "911"] },
-	{ "category": "symbols", "char": "⛔", "name": "no_entry", "keywords": ["limit", "security", "privacy", "bad", "denied", "stop", "circle"] },
-	{ "category": "symbols", "char": "📛", "name": "name_badge", "keywords": ["fire", "forbid"] },
-	{ "category": "symbols", "char": "🚫", "name": "no_entry_sign", "keywords": ["forbid", "stop", "limit", "denied", "disallow", "circle"] },
-	{ "category": "symbols", "char": "❌", "name": "x", "keywords": ["no", "delete", "remove", "cancel", "red"] },
-	{ "category": "symbols", "char": "⭕", "name": "o", "keywords": ["circle", "round"] },
-	{ "category": "symbols", "char": "🛑", "name": "stop_sign", "keywords": ["stop"] },
-	{ "category": "symbols", "char": "💢", "name": "anger", "keywords": ["angry", "mad"] },
-	{ "category": "symbols", "char": "♨️", "name": "hotsprings", "keywords": ["bath", "warm", "relax"] },
-	{ "category": "symbols", "char": "🚷", "name": "no_pedestrians", "keywords": ["rules", "crossing", "walking", "circle"] },
-	{ "category": "symbols", "char": "🚯", "name": "do_not_litter", "keywords": ["trash", "bin", "garbage", "circle"] },
-	{ "category": "symbols", "char": "🚳", "name": "no_bicycles", "keywords": ["cyclist", "prohibited", "circle"] },
-	{ "category": "symbols", "char": "🚱", "name": "non-potable_water", "keywords": ["drink", "faucet", "tap", "circle"] },
-	{ "category": "symbols", "char": "🔞", "name": "underage", "keywords": ["18", "drink", "pub", "night", "minor", "circle"] },
-	{ "category": "symbols", "char": "📵", "name": "no_mobile_phones", "keywords": ["iphone", "mute", "circle"] },
-	{ "category": "symbols", "char": "❗", "name": "exclamation", "keywords": ["heavy_exclamation_mark", "danger", "surprise", "punctuation", "wow", "warning"] },
-	{ "category": "symbols", "char": "❕", "name": "grey_exclamation", "keywords": ["surprise", "punctuation", "gray", "wow", "warning"] },
-	{ "category": "symbols", "char": "❓", "name": "question", "keywords": ["doubt", "confused"] },
-	{ "category": "symbols", "char": "❔", "name": "grey_question", "keywords": ["doubts", "gray", "huh", "confused"] },
-	{ "category": "symbols", "char": "‼️", "name": "bangbang", "keywords": ["exclamation", "surprise"] },
-	{ "category": "symbols", "char": "⁉️", "name": "interrobang", "keywords": ["wat", "punctuation", "surprise"] },
-	{ "category": "symbols", "char": "🔅", "name": "low_brightness", "keywords": ["sun", "afternoon", "warm", "summer"] },
-	{ "category": "symbols", "char": "🔆", "name": "high_brightness", "keywords": ["sun", "light"] },
-	{ "category": "symbols", "char": "🔱", "name": "trident", "keywords": ["weapon", "spear"] },
-	{ "category": "symbols", "char": "⚜", "name": "fleur_de_lis", "keywords": ["decorative", "scout"] },
-	{ "category": "symbols", "char": "〽️", "name": "part_alternation_mark", "keywords": ["graph", "presentation", "stats", "business", "economics", "bad"] },
-	{ "category": "symbols", "char": "⚠️", "name": "warning", "keywords": ["exclamation", "wip", "alert", "error", "problem", "issue"] },
-	{ "category": "symbols", "char": "🚸", "name": "children_crossing", "keywords": ["school", "warning", "danger", "sign", "driving", "yellow-diamond"] },
-	{ "category": "symbols", "char": "🔰", "name": "beginner", "keywords": ["badge", "shield"] },
-	{ "category": "symbols", "char": "♻️", "name": "recycle", "keywords": ["arrow", "environment", "garbage", "trash"] },
-	{ "category": "symbols", "char": "🈯", "name": "u6307", "keywords": ["chinese", "point", "green-square", "kanji", "reserved", "shiteiseki"] },
-	{ "category": "symbols", "char": "💹", "name": "chart", "keywords": ["green-square", "graph", "presentation", "stats"] },
-	{ "category": "symbols", "char": "❇️", "name": "sparkle", "keywords": ["stars", "green-square", "awesome", "good", "fireworks"] },
-	{ "category": "symbols", "char": "✳️", "name": "eight_spoked_asterisk", "keywords": ["star", "sparkle", "green-square"] },
-	{ "category": "symbols", "char": "❎", "name": "negative_squared_cross_mark", "keywords": ["x", "green-square", "no", "deny"] },
-	{ "category": "symbols", "char": "✅", "name": "white_check_mark", "keywords": ["green-square", "ok", "agree", "vote", "election", "answer", "tick"] },
-	{ "category": "symbols", "char": "💠", "name": "diamond_shape_with_a_dot_inside", "keywords": ["jewel", "blue", "gem", "crystal", "fancy"] },
-	{ "category": "symbols", "char": "🌀", "name": "cyclone", "keywords": ["weather", "swirl", "blue", "cloud", "vortex", "spiral", "whirlpool", "spin", "tornado", "hurricane", "typhoon"] },
-	{ "category": "symbols", "char": "➿", "name": "loop", "keywords": ["tape", "cassette"] },
-	{ "category": "symbols", "char": "🌐", "name": "globe_with_meridians", "keywords": ["earth", "international", "world", "internet", "interweb", "i18n"] },
-	{ "category": "symbols", "char": "Ⓜ️", "name": "m", "keywords": ["alphabet", "blue-circle", "letter"] },
-	{ "category": "symbols", "char": "🏧", "name": "atm", "keywords": ["money", "sales", "cash", "blue-square", "payment", "bank"] },
-	{ "category": "symbols", "char": "🈂️", "name": "sa", "keywords": ["japanese", "blue-square", "katakana"] },
-	{ "category": "symbols", "char": "🛂", "name": "passport_control", "keywords": ["custom", "blue-square"] },
-	{ "category": "symbols", "char": "🛃", "name": "customs", "keywords": ["passport", "border", "blue-square"] },
-	{ "category": "symbols", "char": "🛄", "name": "baggage_claim", "keywords": ["blue-square", "airport", "transport"] },
-	{ "category": "symbols", "char": "🛅", "name": "left_luggage", "keywords": ["blue-square", "travel"] },
-	{ "category": "symbols", "char": "♿", "name": "wheelchair", "keywords": ["blue-square", "disabled", "a11y", "accessibility"] },
-	{ "category": "symbols", "char": "🚭", "name": "no_smoking", "keywords": ["cigarette", "blue-square", "smell", "smoke"] },
-	{ "category": "symbols", "char": "🚾", "name": "wc", "keywords": ["toilet", "restroom", "blue-square"] },
-	{ "category": "symbols", "char": "🅿️", "name": "parking", "keywords": ["cars", "blue-square", "alphabet", "letter"] },
-	{ "category": "symbols", "char": "🚰", "name": "potable_water", "keywords": ["blue-square", "liquid", "restroom", "cleaning", "faucet"] },
-	{ "category": "symbols", "char": "🚹", "name": "mens", "keywords": ["toilet", "restroom", "wc", "blue-square", "gender", "male"] },
-	{ "category": "symbols", "char": "🚺", "name": "womens", "keywords": ["purple-square", "woman", "female", "toilet", "loo", "restroom", "gender"] },
-	{ "category": "symbols", "char": "🚼", "name": "baby_symbol", "keywords": ["orange-square", "child"] },
-	{ "category": "symbols", "char": "🚻", "name": "restroom", "keywords": ["blue-square", "toilet", "refresh", "wc", "gender"] },
-	{ "category": "symbols", "char": "🚮", "name": "put_litter_in_its_place", "keywords": ["blue-square", "sign", "human", "info"] },
-	{ "category": "symbols", "char": "🎦", "name": "cinema", "keywords": ["blue-square", "record", "film", "movie", "curtain", "stage", "theater"] },
-	{ "category": "symbols", "char": "📶", "name": "signal_strength", "keywords": ["blue-square", "reception", "phone", "internet", "connection", "wifi", "bluetooth", "bars"] },
-	{ "category": "symbols", "char": "🈁", "name": "koko", "keywords": ["blue-square", "here", "katakana", "japanese", "destination"] },
-	{ "category": "symbols", "char": "🆖", "name": "ng", "keywords": ["blue-square", "words", "shape", "icon"] },
-	{ "category": "symbols", "char": "🆗", "name": "ok", "keywords": ["good", "agree", "yes", "blue-square"] },
-	{ "category": "symbols", "char": "🆙", "name": "up", "keywords": ["blue-square", "above", "high"] },
-	{ "category": "symbols", "char": "🆒", "name": "cool", "keywords": ["words", "blue-square"] },
-	{ "category": "symbols", "char": "🆕", "name": "new", "keywords": ["blue-square", "words", "start"] },
-	{ "category": "symbols", "char": "🆓", "name": "free", "keywords": ["blue-square", "words"] },
-	{ "category": "symbols", "char": "0️⃣", "name": "zero", "keywords": ["0", "numbers", "blue-square", "null"] },
-	{ "category": "symbols", "char": "1️⃣", "name": "one", "keywords": ["blue-square", "numbers", "1"] },
-	{ "category": "symbols", "char": "2️⃣", "name": "two", "keywords": ["numbers", "2", "prime", "blue-square"] },
-	{ "category": "symbols", "char": "3️⃣", "name": "three", "keywords": ["3", "numbers", "prime", "blue-square"] },
-	{ "category": "symbols", "char": "4️⃣", "name": "four", "keywords": ["4", "numbers", "blue-square"] },
-	{ "category": "symbols", "char": "5️⃣", "name": "five", "keywords": ["5", "numbers", "blue-square", "prime"] },
-	{ "category": "symbols", "char": "6️⃣", "name": "six", "keywords": ["6", "numbers", "blue-square"] },
-	{ "category": "symbols", "char": "7️⃣", "name": "seven", "keywords": ["7", "numbers", "blue-square", "prime"] },
-	{ "category": "symbols", "char": "8️⃣", "name": "eight", "keywords": ["8", "blue-square", "numbers"] },
-	{ "category": "symbols", "char": "9️⃣", "name": "nine", "keywords": ["blue-square", "numbers", "9"] },
-	{ "category": "symbols", "char": "🔟", "name": "keycap_ten", "keywords": ["numbers", "10", "blue-square"] },
-	{ "category": "symbols", "char": "*⃣", "name": "asterisk", "keywords": ["star", "keycap"] },
-	{ "category": "symbols", "char": "⏏️", "name": "eject_button", "keywords": ["blue-square"] },
-	{ "category": "symbols", "char": "▶️", "name": "arrow_forward", "keywords": ["blue-square", "right", "direction", "play"] },
-	{ "category": "symbols", "char": "⏸", "name": "pause_button", "keywords": ["pause", "blue-square"] },
-	{ "category": "symbols", "char": "⏭", "name": "next_track_button", "keywords": ["forward", "next", "blue-square"] },
-	{ "category": "symbols", "char": "⏹", "name": "stop_button", "keywords": ["blue-square"] },
-	{ "category": "symbols", "char": "⏺", "name": "record_button", "keywords": ["blue-square"] },
-	{ "category": "symbols", "char": "⏯", "name": "play_or_pause_button", "keywords": ["blue-square", "play", "pause"] },
-	{ "category": "symbols", "char": "⏮", "name": "previous_track_button", "keywords": ["backward"] },
-	{ "category": "symbols", "char": "⏩", "name": "fast_forward", "keywords": ["blue-square", "play", "speed", "continue"] },
-	{ "category": "symbols", "char": "⏪", "name": "rewind", "keywords": ["play", "blue-square"] },
-	{ "category": "symbols", "char": "🔀", "name": "twisted_rightwards_arrows", "keywords": ["blue-square", "shuffle", "music", "random"] },
-	{ "category": "symbols", "char": "🔁", "name": "repeat", "keywords": ["loop", "record"] },
-	{ "category": "symbols", "char": "🔂", "name": "repeat_one", "keywords": ["blue-square", "loop"] },
-	{ "category": "symbols", "char": "◀️", "name": "arrow_backward", "keywords": ["blue-square", "left", "direction"] },
-	{ "category": "symbols", "char": "🔼", "name": "arrow_up_small", "keywords": ["blue-square", "triangle", "direction", "point", "forward", "top"] },
-	{ "category": "symbols", "char": "🔽", "name": "arrow_down_small", "keywords": ["blue-square", "direction", "bottom"] },
-	{ "category": "symbols", "char": "⏫", "name": "arrow_double_up", "keywords": ["blue-square", "direction", "top"] },
-	{ "category": "symbols", "char": "⏬", "name": "arrow_double_down", "keywords": ["blue-square", "direction", "bottom"] },
-	{ "category": "symbols", "char": "➡️", "name": "arrow_right", "keywords": ["blue-square", "next"] },
-	{ "category": "symbols", "char": "⬅️", "name": "arrow_left", "keywords": ["blue-square", "previous", "back"] },
-	{ "category": "symbols", "char": "⬆️", "name": "arrow_up", "keywords": ["blue-square", "continue", "top", "direction"] },
-	{ "category": "symbols", "char": "⬇️", "name": "arrow_down", "keywords": ["blue-square", "direction", "bottom"] },
-	{ "category": "symbols", "char": "↗️", "name": "arrow_upper_right", "keywords": ["blue-square", "point", "direction", "diagonal", "northeast"] },
-	{ "category": "symbols", "char": "↘️", "name": "arrow_lower_right", "keywords": ["blue-square", "direction", "diagonal", "southeast"] },
-	{ "category": "symbols", "char": "↙️", "name": "arrow_lower_left", "keywords": ["blue-square", "direction", "diagonal", "southwest"] },
-	{ "category": "symbols", "char": "↖️", "name": "arrow_upper_left", "keywords": ["blue-square", "point", "direction", "diagonal", "northwest"] },
-	{ "category": "symbols", "char": "↕️", "name": "arrow_up_down", "keywords": ["blue-square", "direction", "way", "vertical"] },
-	{ "category": "symbols", "char": "↔️", "name": "left_right_arrow", "keywords": ["shape", "direction", "horizontal", "sideways"] },
-	{ "category": "symbols", "char": "🔄", "name": "arrows_counterclockwise", "keywords": ["blue-square", "sync", "cycle"] },
-	{ "category": "symbols", "char": "↪️", "name": "arrow_right_hook", "keywords": ["blue-square", "return", "rotate", "direction"] },
-	{ "category": "symbols", "char": "↩️", "name": "leftwards_arrow_with_hook", "keywords": ["back", "return", "blue-square", "undo", "enter"] },
-	{ "category": "symbols", "char": "⤴️", "name": "arrow_heading_up", "keywords": ["blue-square", "direction", "top"] },
-	{ "category": "symbols", "char": "⤵️", "name": "arrow_heading_down", "keywords": ["blue-square", "direction", "bottom"] },
-	{ "category": "symbols", "char": "#️⃣", "name": "hash", "keywords": ["symbol", "blue-square", "twitter"] },
-	{ "category": "symbols", "char": "ℹ️", "name": "information_source", "keywords": ["blue-square", "alphabet", "letter"] },
-	{ "category": "symbols", "char": "🔤", "name": "abc", "keywords": ["blue-square", "alphabet"] },
-	{ "category": "symbols", "char": "🔡", "name": "abcd", "keywords": ["blue-square", "alphabet"] },
-	{ "category": "symbols", "char": "🔠", "name": "capital_abcd", "keywords": ["alphabet", "words", "blue-square"] },
-	{ "category": "symbols", "char": "🔣", "name": "symbols", "keywords": ["blue-square", "music", "note", "ampersand", "percent", "glyphs", "characters"] },
-	{ "category": "symbols", "char": "🎵", "name": "musical_note", "keywords": ["score", "tone", "sound"] },
-	{ "category": "symbols", "char": "🎶", "name": "notes", "keywords": ["music", "score"] },
-	{ "category": "symbols", "char": "〰️", "name": "wavy_dash", "keywords": ["draw", "line", "moustache", "mustache", "squiggle", "scribble"] },
-	{ "category": "symbols", "char": "➰", "name": "curly_loop", "keywords": ["scribble", "draw", "shape", "squiggle"] },
-	{ "category": "symbols", "char": "✔️", "name": "heavy_check_mark", "keywords": ["ok", "nike", "answer", "yes", "tick"] },
-	{ "category": "symbols", "char": "🔃", "name": "arrows_clockwise", "keywords": ["sync", "cycle", "round", "repeat"] },
-	{ "category": "symbols", "char": "➕", "name": "heavy_plus_sign", "keywords": ["math", "calculation", "addition", "more", "increase"] },
-	{ "category": "symbols", "char": "➖", "name": "heavy_minus_sign", "keywords": ["math", "calculation", "subtract", "less"] },
-	{ "category": "symbols", "char": "➗", "name": "heavy_division_sign", "keywords": ["divide", "math", "calculation"] },
-	{ "category": "symbols", "char": "✖️", "name": "heavy_multiplication_x", "keywords": ["math", "calculation"] },
-	{ "category": "symbols", "char": "\uD83D\uDFF0", "name": "heavy_equals_sign", "keywords": [] },
-	{ "category": "symbols", "char": "♾", "name": "infinity", "keywords": ["forever"] },
-	{ "category": "symbols", "char": "💲", "name": "heavy_dollar_sign", "keywords": ["money", "sales", "payment", "currency", "buck"] },
-	{ "category": "symbols", "char": "💱", "name": "currency_exchange", "keywords": ["money", "sales", "dollar", "travel"] },
-	{ "category": "symbols", "char": "©️", "name": "copyright", "keywords": ["ip", "license", "circle", "law", "legal"] },
-	{ "category": "symbols", "char": "®️", "name": "registered", "keywords": ["alphabet", "circle"] },
-	{ "category": "symbols", "char": "™️", "name": "tm", "keywords": ["trademark", "brand", "law", "legal"] },
-	{ "category": "symbols", "char": "🔚", "name": "end", "keywords": ["words", "arrow"] },
-	{ "category": "symbols", "char": "🔙", "name": "back", "keywords": ["arrow", "words", "return"] },
-	{ "category": "symbols", "char": "🔛", "name": "on", "keywords": ["arrow", "words"] },
-	{ "category": "symbols", "char": "🔝", "name": "top", "keywords": ["words", "blue-square"] },
-	{ "category": "symbols", "char": "🔜", "name": "soon", "keywords": ["arrow", "words"] },
-	{ "category": "symbols", "char": "☑️", "name": "ballot_box_with_check", "keywords": ["ok", "agree", "confirm", "black-square", "vote", "election", "yes", "tick"] },
-	{ "category": "symbols", "char": "🔘", "name": "radio_button", "keywords": ["input", "old", "music", "circle"] },
-	{ "category": "symbols", "char": "⚫", "name": "black_circle", "keywords": ["shape", "button", "round"] },
-	{ "category": "symbols", "char": "⚪", "name": "white_circle", "keywords": ["shape", "round"] },
-	{ "category": "symbols", "char": "🔴", "name": "red_circle", "keywords": ["shape", "error", "danger"] },
-	{ "category": "symbols", "char": "🟠", "name": "orange_circle", "keywords": ["shape"] },
-	{ "category": "symbols", "char": "🟡", "name": "yellow_circle", "keywords": ["shape"] },
-	{ "category": "symbols", "char": "🟢", "name": "green_circle", "keywords": ["shape"] },
-	{ "category": "symbols", "char": "🔵", "name": "large_blue_circle", "keywords": ["shape", "icon", "button"] },
-	{ "category": "symbols", "char": "🟣", "name": "purple_circle", "keywords": ["shape"] },
-	{ "category": "symbols", "char": "🟤", "name": "brown_circle", "keywords": ["shape"] },
-	{ "category": "symbols", "char": "🔸", "name": "small_orange_diamond", "keywords": ["shape", "jewel", "gem"] },
-	{ "category": "symbols", "char": "🔹", "name": "small_blue_diamond", "keywords": ["shape", "jewel", "gem"] },
-	{ "category": "symbols", "char": "🔶", "name": "large_orange_diamond", "keywords": ["shape", "jewel", "gem"] },
-	{ "category": "symbols", "char": "🔷", "name": "large_blue_diamond", "keywords": ["shape", "jewel", "gem"] },
-	{ "category": "symbols", "char": "🔺", "name": "small_red_triangle", "keywords": ["shape", "direction", "up", "top"] },
-	{ "category": "symbols", "char": "▪️", "name": "black_small_square", "keywords": ["shape", "icon"] },
-	{ "category": "symbols", "char": "▫️", "name": "white_small_square", "keywords": ["shape", "icon"] },
-	{ "category": "symbols", "char": "⬛", "name": "black_large_square", "keywords": ["shape", "icon", "button"] },
-	{ "category": "symbols", "char": "⬜", "name": "white_large_square", "keywords": ["shape", "icon", "stone", "button"] },
-	{ "category": "symbols", "char": "🟥", "name": "red_square", "keywords": ["shape"] },
-	{ "category": "symbols", "char": "🟧", "name": "orange_square", "keywords": ["shape"] },
-	{ "category": "symbols", "char": "🟨", "name": "yellow_square", "keywords": ["shape"] },
-	{ "category": "symbols", "char": "🟩", "name": "green_square", "keywords": ["shape"] },
-	{ "category": "symbols", "char": "🟦", "name": "blue_square", "keywords": ["shape"] },
-	{ "category": "symbols", "char": "🟪", "name": "purple_square", "keywords": ["shape"] },
-	{ "category": "symbols", "char": "🟫", "name": "brown_square", "keywords": ["shape"] },
-	{ "category": "symbols", "char": "🔻", "name": "small_red_triangle_down", "keywords": ["shape", "direction", "bottom"] },
-	{ "category": "symbols", "char": "◼️", "name": "black_medium_square", "keywords": ["shape", "button", "icon"] },
-	{ "category": "symbols", "char": "◻️", "name": "white_medium_square", "keywords": ["shape", "stone", "icon"] },
-	{ "category": "symbols", "char": "◾", "name": "black_medium_small_square", "keywords": ["icon", "shape", "button"] },
-	{ "category": "symbols", "char": "◽", "name": "white_medium_small_square", "keywords": ["shape", "stone", "icon", "button"] },
-	{ "category": "symbols", "char": "🔲", "name": "black_square_button", "keywords": ["shape", "input", "frame"] },
-	{ "category": "symbols", "char": "🔳", "name": "white_square_button", "keywords": ["shape", "input"] },
-	{ "category": "symbols", "char": "🔈", "name": "speaker", "keywords": ["sound", "volume", "silence", "broadcast"] },
-	{ "category": "symbols", "char": "🔉", "name": "sound", "keywords": ["volume", "speaker", "broadcast"] },
-	{ "category": "symbols", "char": "🔊", "name": "loud_sound", "keywords": ["volume", "noise", "noisy", "speaker", "broadcast"] },
-	{ "category": "symbols", "char": "🔇", "name": "mute", "keywords": ["sound", "volume", "silence", "quiet"] },
-	{ "category": "symbols", "char": "📣", "name": "mega", "keywords": ["sound", "speaker", "volume"] },
-	{ "category": "symbols", "char": "📢", "name": "loudspeaker", "keywords": ["volume", "sound"] },
-	{ "category": "symbols", "char": "🔔", "name": "bell", "keywords": ["sound", "notification", "christmas", "xmas", "chime"] },
-	{ "category": "symbols", "char": "🔕", "name": "no_bell", "keywords": ["sound", "volume", "mute", "quiet", "silent"] },
-	{ "category": "symbols", "char": "🃏", "name": "black_joker", "keywords": ["poker", "cards", "game", "play", "magic"] },
-	{ "category": "symbols", "char": "🀄", "name": "mahjong", "keywords": ["game", "play", "chinese", "kanji"] },
-	{ "category": "symbols", "char": "♠️", "name": "spades", "keywords": ["poker", "cards", "suits", "magic"] },
-	{ "category": "symbols", "char": "♣️", "name": "clubs", "keywords": ["poker", "cards", "magic", "suits"] },
-	{ "category": "symbols", "char": "♥️", "name": "hearts", "keywords": ["poker", "cards", "magic", "suits"] },
-	{ "category": "symbols", "char": "♦️", "name": "diamonds", "keywords": ["poker", "cards", "magic", "suits"] },
-	{ "category": "symbols", "char": "🎴", "name": "flower_playing_cards", "keywords": ["game", "sunset", "red"] },
-	{ "category": "symbols", "char": "💭", "name": "thought_balloon", "keywords": ["bubble", "cloud", "speech", "thinking", "dream"] },
-	{ "category": "symbols", "char": "🗯", "name": "right_anger_bubble", "keywords": ["caption", "speech", "thinking", "mad"] },
-	{ "category": "symbols", "char": "💬", "name": "speech_balloon", "keywords": ["bubble", "words", "message", "talk", "chatting"] },
-	{ "category": "symbols", "char": "🗨", "name": "left_speech_bubble", "keywords": ["words", "message", "talk", "chatting"] },
-	{ "category": "symbols", "char": "🕐", "name": "clock1", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕑", "name": "clock2", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕒", "name": "clock3", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕓", "name": "clock4", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕔", "name": "clock5", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕕", "name": "clock6", "keywords": ["time", "late", "early", "schedule", "dawn", "dusk"] },
-	{ "category": "symbols", "char": "🕖", "name": "clock7", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕗", "name": "clock8", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕘", "name": "clock9", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕙", "name": "clock10", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕚", "name": "clock11", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕛", "name": "clock12", "keywords": ["time", "noon", "midnight", "midday", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕜", "name": "clock130", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕝", "name": "clock230", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕞", "name": "clock330", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕟", "name": "clock430", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕠", "name": "clock530", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕡", "name": "clock630", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕢", "name": "clock730", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕣", "name": "clock830", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕤", "name": "clock930", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕥", "name": "clock1030", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕦", "name": "clock1130", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "symbols", "char": "🕧", "name": "clock1230", "keywords": ["time", "late", "early", "schedule"] },
-	{ "category": "flags", "char": "🇦🇫", "name": "afghanistan", "keywords": ["af", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇦🇽", "name": "aland_islands", "keywords": ["Åland", "islands", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇦🇱", "name": "albania", "keywords": ["al", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇩🇿", "name": "algeria", "keywords": ["dz", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇦🇸", "name": "american_samoa", "keywords": ["american", "ws", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇦🇩", "name": "andorra", "keywords": ["ad", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇦🇴", "name": "angola", "keywords": ["ao", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇦🇮", "name": "anguilla", "keywords": ["ai", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇦🇶", "name": "antarctica", "keywords": ["aq", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇦🇬", "name": "antigua_barbuda", "keywords": ["antigua", "barbuda", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇦🇷", "name": "argentina", "keywords": ["ar", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇦🇲", "name": "armenia", "keywords": ["am", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇦🇼", "name": "aruba", "keywords": ["aw", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇦🇨", "name": "ascension_island", "keywords": ["flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇦🇺", "name": "australia", "keywords": ["au", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇦🇹", "name": "austria", "keywords": ["at", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇦🇿", "name": "azerbaijan", "keywords": ["az", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇸", "name": "bahamas", "keywords": ["bs", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇭", "name": "bahrain", "keywords": ["bh", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇩", "name": "bangladesh", "keywords": ["bd", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇧", "name": "barbados", "keywords": ["bb", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇾", "name": "belarus", "keywords": ["by", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇪", "name": "belgium", "keywords": ["be", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇿", "name": "belize", "keywords": ["bz", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇯", "name": "benin", "keywords": ["bj", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇲", "name": "bermuda", "keywords": ["bm", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇹", "name": "bhutan", "keywords": ["bt", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇴", "name": "bolivia", "keywords": ["bo", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇶", "name": "caribbean_netherlands", "keywords": ["bonaire", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇦", "name": "bosnia_herzegovina", "keywords": ["bosnia", "herzegovina", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇼", "name": "botswana", "keywords": ["bw", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇷", "name": "brazil", "keywords": ["br", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇮🇴", "name": "british_indian_ocean_territory", "keywords": ["british", "indian", "ocean", "territory", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇻🇬", "name": "british_virgin_islands", "keywords": ["british", "virgin", "islands", "bvi", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇳", "name": "brunei", "keywords": ["bn", "darussalam", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇬", "name": "bulgaria", "keywords": ["bg", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇫", "name": "burkina_faso", "keywords": ["burkina", "faso", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇮", "name": "burundi", "keywords": ["bi", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇻", "name": "cape_verde", "keywords": ["cabo", "verde", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇰🇭", "name": "cambodia", "keywords": ["kh", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇲", "name": "cameroon", "keywords": ["cm", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇦", "name": "canada", "keywords": ["ca", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇮🇨", "name": "canary_islands", "keywords": ["canary", "islands", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇰🇾", "name": "cayman_islands", "keywords": ["cayman", "islands", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇫", "name": "central_african_republic", "keywords": ["central", "african", "republic", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇩", "name": "chad", "keywords": ["td", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇱", "name": "chile", "keywords": ["flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇳", "name": "cn", "keywords": ["china", "chinese", "prc", "flag", "country", "nation", "banner"] },
-	{ "category": "flags", "char": "🇨🇽", "name": "christmas_island", "keywords": ["christmas", "island", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇨", "name": "cocos_islands", "keywords": ["cocos", "keeling", "islands", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇴", "name": "colombia", "keywords": ["co", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇰🇲", "name": "comoros", "keywords": ["km", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇬", "name": "congo_brazzaville", "keywords": ["congo", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇩", "name": "congo_kinshasa", "keywords": ["congo", "democratic", "republic", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇰", "name": "cook_islands", "keywords": ["cook", "islands", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇷", "name": "costa_rica", "keywords": ["costa", "rica", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇭🇷", "name": "croatia", "keywords": ["hr", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇺", "name": "cuba", "keywords": ["cu", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇼", "name": "curacao", "keywords": ["curaçao", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇾", "name": "cyprus", "keywords": ["cy", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇿", "name": "czech_republic", "keywords": ["cz", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇩🇰", "name": "denmark", "keywords": ["dk", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇩🇯", "name": "djibouti", "keywords": ["dj", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇩🇲", "name": "dominica", "keywords": ["dm", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇩🇴", "name": "dominican_republic", "keywords": ["dominican", "republic", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇪🇨", "name": "ecuador", "keywords": ["ec", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇪🇬", "name": "egypt", "keywords": ["eg", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇻", "name": "el_salvador", "keywords": ["el", "salvador", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇶", "name": "equatorial_guinea", "keywords": ["equatorial", "gn", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇪🇷", "name": "eritrea", "keywords": ["er", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇪🇪", "name": "estonia", "keywords": ["ee", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇪🇹", "name": "ethiopia", "keywords": ["et", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇪🇺", "name": "eu", "keywords": ["european", "union", "flag", "banner"] },
-	{ "category": "flags", "char": "🇫🇰", "name": "falkland_islands", "keywords": ["falkland", "islands", "malvinas", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇫🇴", "name": "faroe_islands", "keywords": ["faroe", "islands", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇫🇯", "name": "fiji", "keywords": ["fj", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇫🇮", "name": "finland", "keywords": ["fi", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇫🇷", "name": "fr", "keywords": ["banner", "flag", "nation", "france", "french", "country"] },
-	{ "category": "flags", "char": "🇬🇫", "name": "french_guiana", "keywords": ["french", "guiana", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇵🇫", "name": "french_polynesia", "keywords": ["french", "polynesia", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇫", "name": "french_southern_territories", "keywords": ["french", "southern", "territories", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇦", "name": "gabon", "keywords": ["ga", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇲", "name": "gambia", "keywords": ["gm", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇪", "name": "georgia", "keywords": ["ge", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇩🇪", "name": "de", "keywords": ["german", "nation", "flag", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇭", "name": "ghana", "keywords": ["gh", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇮", "name": "gibraltar", "keywords": ["gi", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇷", "name": "greece", "keywords": ["gr", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇱", "name": "greenland", "keywords": ["gl", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇩", "name": "grenada", "keywords": ["gd", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇵", "name": "guadeloupe", "keywords": ["gp", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇺", "name": "guam", "keywords": ["gu", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇹", "name": "guatemala", "keywords": ["gt", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇬", "name": "guernsey", "keywords": ["gg", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇳", "name": "guinea", "keywords": ["gn", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇼", "name": "guinea_bissau", "keywords": ["gw", "bissau", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇾", "name": "guyana", "keywords": ["gy", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇭🇹", "name": "haiti", "keywords": ["ht", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇭🇳", "name": "honduras", "keywords": ["hn", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇭🇰", "name": "hong_kong", "keywords": ["hong", "kong", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇭🇺", "name": "hungary", "keywords": ["hu", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇮🇸", "name": "iceland", "keywords": ["is", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇮🇳", "name": "india", "keywords": ["in", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇮🇩", "name": "indonesia", "keywords": ["flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇮🇷", "name": "iran", "keywords": ["iran, ", "islamic", "republic", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇮🇶", "name": "iraq", "keywords": ["iq", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇮🇪", "name": "ireland", "keywords": ["ie", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇮🇲", "name": "isle_of_man", "keywords": ["isle", "man", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇮🇱", "name": "israel", "keywords": ["il", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇮🇹", "name": "it", "keywords": ["italy", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇮", "name": "cote_divoire", "keywords": ["ivory", "coast", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇯🇲", "name": "jamaica", "keywords": ["jm", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇯🇵", "name": "jp", "keywords": ["japanese", "nation", "flag", "country", "banner"] },
-	{ "category": "flags", "char": "🇯🇪", "name": "jersey", "keywords": ["je", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇯🇴", "name": "jordan", "keywords": ["jo", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇰🇿", "name": "kazakhstan", "keywords": ["kz", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇰🇪", "name": "kenya", "keywords": ["ke", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇰🇮", "name": "kiribati", "keywords": ["ki", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇽🇰", "name": "kosovo", "keywords": ["xk", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇰🇼", "name": "kuwait", "keywords": ["kw", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇰🇬", "name": "kyrgyzstan", "keywords": ["kg", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇱🇦", "name": "laos", "keywords": ["lao", "democratic", "republic", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇱🇻", "name": "latvia", "keywords": ["lv", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇱🇧", "name": "lebanon", "keywords": ["lb", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇱🇸", "name": "lesotho", "keywords": ["ls", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇱🇷", "name": "liberia", "keywords": ["lr", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇱🇾", "name": "libya", "keywords": ["ly", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇱🇮", "name": "liechtenstein", "keywords": ["li", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇱🇹", "name": "lithuania", "keywords": ["lt", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇱🇺", "name": "luxembourg", "keywords": ["lu", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇴", "name": "macau", "keywords": ["macao", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇰", "name": "macedonia", "keywords": ["macedonia, ", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇬", "name": "madagascar", "keywords": ["mg", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇼", "name": "malawi", "keywords": ["mw", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇾", "name": "malaysia", "keywords": ["my", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇻", "name": "maldives", "keywords": ["mv", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇱", "name": "mali", "keywords": ["ml", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇹", "name": "malta", "keywords": ["mt", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇭", "name": "marshall_islands", "keywords": ["marshall", "islands", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇶", "name": "martinique", "keywords": ["mq", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇷", "name": "mauritania", "keywords": ["mr", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇺", "name": "mauritius", "keywords": ["mu", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇾🇹", "name": "mayotte", "keywords": ["yt", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇽", "name": "mexico", "keywords": ["mx", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇫🇲", "name": "micronesia", "keywords": ["micronesia, ", "federated", "states", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇩", "name": "moldova", "keywords": ["moldova, ", "republic", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇨", "name": "monaco", "keywords": ["mc", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇳", "name": "mongolia", "keywords": ["mn", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇪", "name": "montenegro", "keywords": ["me", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇸", "name": "montserrat", "keywords": ["ms", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇦", "name": "morocco", "keywords": ["ma", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇿", "name": "mozambique", "keywords": ["mz", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇲", "name": "myanmar", "keywords": ["mm", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇳🇦", "name": "namibia", "keywords": ["na", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇳🇷", "name": "nauru", "keywords": ["nr", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇳🇵", "name": "nepal", "keywords": ["np", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇳🇱", "name": "netherlands", "keywords": ["nl", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇳🇨", "name": "new_caledonia", "keywords": ["new", "caledonia", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇳🇿", "name": "new_zealand", "keywords": ["new", "zealand", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇳🇮", "name": "nicaragua", "keywords": ["ni", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇳🇪", "name": "niger", "keywords": ["ne", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇳🇬", "name": "nigeria", "keywords": ["flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇳🇺", "name": "niue", "keywords": ["nu", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇳🇫", "name": "norfolk_island", "keywords": ["norfolk", "island", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇲🇵", "name": "northern_mariana_islands", "keywords": ["northern", "mariana", "islands", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇰🇵", "name": "north_korea", "keywords": ["north", "korea", "nation", "flag", "country", "banner"] },
-	{ "category": "flags", "char": "🇳🇴", "name": "norway", "keywords": ["no", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇴🇲", "name": "oman", "keywords": ["om_symbol", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇵🇰", "name": "pakistan", "keywords": ["pk", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇵🇼", "name": "palau", "keywords": ["pw", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇵🇸", "name": "palestinian_territories", "keywords": ["palestine", "palestinian", "territories", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇵🇦", "name": "panama", "keywords": ["pa", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇵🇬", "name": "papua_new_guinea", "keywords": ["papua", "new", "guinea", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇵🇾", "name": "paraguay", "keywords": ["py", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇵🇪", "name": "peru", "keywords": ["pe", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇵🇭", "name": "philippines", "keywords": ["ph", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇵🇳", "name": "pitcairn_islands", "keywords": ["pitcairn", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇵🇱", "name": "poland", "keywords": ["pl", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇵🇹", "name": "portugal", "keywords": ["pt", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇵🇷", "name": "puerto_rico", "keywords": ["puerto", "rico", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇶🇦", "name": "qatar", "keywords": ["qa", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇷🇪", "name": "reunion", "keywords": ["réunion", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇷🇴", "name": "romania", "keywords": ["ro", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇷🇺", "name": "ru", "keywords": ["russian", "federation", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇷🇼", "name": "rwanda", "keywords": ["rw", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇧🇱", "name": "st_barthelemy", "keywords": ["saint", "barthélemy", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇭", "name": "st_helena", "keywords": ["saint", "helena", "ascension", "tristan", "cunha", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇰🇳", "name": "st_kitts_nevis", "keywords": ["saint", "kitts", "nevis", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇱🇨", "name": "st_lucia", "keywords": ["saint", "lucia", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇵🇲", "name": "st_pierre_miquelon", "keywords": ["saint", "pierre", "miquelon", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇻🇨", "name": "st_vincent_grenadines", "keywords": ["saint", "vincent", "grenadines", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇼🇸", "name": "samoa", "keywords": ["ws", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇲", "name": "san_marino", "keywords": ["san", "marino", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇹", "name": "sao_tome_principe", "keywords": ["sao", "tome", "principe", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇦", "name": "saudi_arabia", "keywords": ["flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇳", "name": "senegal", "keywords": ["sn", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇷🇸", "name": "serbia", "keywords": ["rs", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇨", "name": "seychelles", "keywords": ["sc", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇱", "name": "sierra_leone", "keywords": ["sierra", "leone", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇬", "name": "singapore", "keywords": ["sg", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇽", "name": "sint_maarten", "keywords": ["sint", "maarten", "dutch", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇰", "name": "slovakia", "keywords": ["sk", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇮", "name": "slovenia", "keywords": ["si", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇧", "name": "solomon_islands", "keywords": ["solomon", "islands", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇴", "name": "somalia", "keywords": ["so", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇿🇦", "name": "south_africa", "keywords": ["south", "africa", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇸", "name": "south_georgia_south_sandwich_islands", "keywords": ["south", "georgia", "sandwich", "islands", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇰🇷", "name": "kr", "keywords": ["south", "korea", "nation", "flag", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇸", "name": "south_sudan", "keywords": ["south", "sd", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇪🇸", "name": "es", "keywords": ["spain", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇱🇰", "name": "sri_lanka", "keywords": ["sri", "lanka", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇩", "name": "sudan", "keywords": ["sd", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇷", "name": "suriname", "keywords": ["sr", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇿", "name": "swaziland", "keywords": ["sz", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇪", "name": "sweden", "keywords": ["se", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇨🇭", "name": "switzerland", "keywords": ["ch", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇸🇾", "name": "syria", "keywords": ["syrian", "arab", "republic", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇼", "name": "taiwan", "keywords": ["tw", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇯", "name": "tajikistan", "keywords": ["tj", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇿", "name": "tanzania", "keywords": ["tanzania, ", "united", "republic", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇭", "name": "thailand", "keywords": ["th", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇱", "name": "timor_leste", "keywords": ["timor", "leste", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇬", "name": "togo", "keywords": ["tg", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇰", "name": "tokelau", "keywords": ["tk", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇴", "name": "tonga", "keywords": ["to", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇹", "name": "trinidad_tobago", "keywords": ["trinidad", "tobago", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇦", "name": "tristan_da_cunha", "keywords": ["flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇳", "name": "tunisia", "keywords": ["tn", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇷", "name": "tr", "keywords": ["turkey", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇲", "name": "turkmenistan", "keywords": ["flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇨", "name": "turks_caicos_islands", "keywords": ["turks", "caicos", "islands", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇹🇻", "name": "tuvalu", "keywords": ["flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇺🇬", "name": "uganda", "keywords": ["ug", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇺🇦", "name": "ukraine", "keywords": ["ua", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇦🇪", "name": "united_arab_emirates", "keywords": ["united", "arab", "emirates", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇬🇧", "name": "uk", "keywords": ["united", "kingdom", "great", "britain", "northern", "ireland", "flag", "nation", "country", "banner", "british", "UK", "english", "england", "union jack"] },
-	{ "category": "flags", "char": "🏴󠁧󠁢󠁥󠁮󠁧󠁿", "name": "england", "keywords": ["flag", "english"] },
-	{ "category": "flags", "char": "🏴󠁧󠁢󠁳󠁣󠁴󠁿", "name": "scotland", "keywords": ["flag", "scottish"] },
-	{ "category": "flags", "char": "🏴󠁧󠁢󠁷󠁬󠁳󠁿", "name": "wales", "keywords": ["flag", "welsh"] },
-	{ "category": "flags", "char": "🇺🇸", "name": "us", "keywords": ["united", "states", "america", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇻🇮", "name": "us_virgin_islands", "keywords": ["virgin", "islands", "us", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇺🇾", "name": "uruguay", "keywords": ["uy", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇺🇿", "name": "uzbekistan", "keywords": ["uz", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇻🇺", "name": "vanuatu", "keywords": ["vu", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇻🇦", "name": "vatican_city", "keywords": ["vatican", "city", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇻🇪", "name": "venezuela", "keywords": ["ve", "bolivarian", "republic", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇻🇳", "name": "vietnam", "keywords": ["viet", "nam", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇼🇫", "name": "wallis_futuna", "keywords": ["wallis", "futuna", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇪🇭", "name": "western_sahara", "keywords": ["western", "sahara", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇾🇪", "name": "yemen", "keywords": ["ye", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇿🇲", "name": "zambia", "keywords": ["zm", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇿🇼", "name": "zimbabwe", "keywords": ["zw", "flag", "nation", "country", "banner"] },
-	{ "category": "flags", "char": "🇺🇳", "name": "united_nations", "keywords": ["un", "flag", "banner"] },
-	{ "category": "flags", "char": "🏴‍☠️", "name": "pirate_flag", "keywords": ["skull", "crossbones", "flag", "banner"] }
-]
-
diff --git a/packages/client/src/events.ts b/packages/client/src/events.ts
deleted file mode 100644
index dbbd908b8f..0000000000
--- a/packages/client/src/events.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { EventEmitter } from 'eventemitter3';
-
-// TODO: 型付け
-export const globalEvents = new EventEmitter();
diff --git a/packages/client/src/filters/bytes.ts b/packages/client/src/filters/bytes.ts
deleted file mode 100644
index c80f2f0ed2..0000000000
--- a/packages/client/src/filters/bytes.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export default (v, digits = 0) => {
-	if (v == null) return '?';
-	const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-	if (v === 0) return '0';
-	const isMinus = v < 0;
-	if (isMinus) v = -v;
-	const i = Math.floor(Math.log(v) / Math.log(1024));
-	return (isMinus ? '-' : '') + (v / Math.pow(1024, i)).toFixed(digits).replace(/\.0+$/, '') + sizes[i];
-};
diff --git a/packages/client/src/filters/note.ts b/packages/client/src/filters/note.ts
deleted file mode 100644
index cd9b7d98d2..0000000000
--- a/packages/client/src/filters/note.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const notePage = note => {
-	return `/notes/${note.id}`;
-};
diff --git a/packages/client/src/filters/number.ts b/packages/client/src/filters/number.ts
deleted file mode 100644
index 880a848ca4..0000000000
--- a/packages/client/src/filters/number.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default n => n == null ? 'N/A' : n.toLocaleString();
diff --git a/packages/client/src/filters/user.ts b/packages/client/src/filters/user.ts
deleted file mode 100644
index ff2f7e2dae..0000000000
--- a/packages/client/src/filters/user.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as misskey from 'misskey-js';
-import * as Acct from 'misskey-js/built/acct';
-import { url } from '@/config';
-
-export const acct = (user: misskey.Acct) => {
-	return Acct.toString(user);
-};
-
-export const userName = (user: misskey.entities.User) => {
-	return user.name || user.username;
-};
-
-export const userPage = (user: misskey.Acct, path?, absolute = false) => {
-	return `${absolute ? url : ''}/@${acct(user)}${(path ? `/${path}` : '')}`;
-};
diff --git a/packages/client/src/i18n.ts b/packages/client/src/i18n.ts
deleted file mode 100644
index 31e066960d..0000000000
--- a/packages/client/src/i18n.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { markRaw } from 'vue';
-import { locale } from '@/config';
-import { I18n } from '@/scripts/i18n';
-
-export const i18n = markRaw(new I18n(locale));
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
deleted file mode 100644
index 508d3262b3..0000000000
--- a/packages/client/src/init.ts
+++ /dev/null
@@ -1,433 +0,0 @@
-/**
- * Client entry point
- */
-// https://vitejs.dev/config/build-options.html#build-modulepreload
-import 'vite/modulepreload-polyfill';
-
-import '@/style.scss';
-
-//#region account indexedDB migration
-import { set } from '@/scripts/idb-proxy';
-
-if (localStorage.getItem('accounts') != null) {
-	set('accounts', JSON.parse(localStorage.getItem('accounts')));
-	localStorage.removeItem('accounts');
-}
-//#endregion
-
-import { computed, createApp, watch, markRaw, version as vueVersion, defineAsyncComponent } from 'vue';
-import { compareVersions } from 'compare-versions';
-import JSON5 from 'json5';
-
-import widgets from '@/widgets';
-import directives from '@/directives';
-import components from '@/components';
-import { version, ui, lang, host } from '@/config';
-import { applyTheme } from '@/scripts/theme';
-import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
-import { i18n } from '@/i18n';
-import { confirm, alert, post, popup, toast } from '@/os';
-import { stream } from '@/stream';
-import * as sound from '@/scripts/sound';
-import { $i, refreshAccount, login, updateAccount, signout } from '@/account';
-import { defaultStore, ColdDeviceStorage } from '@/store';
-import { fetchInstance, instance } from '@/instance';
-import { makeHotkey } from '@/scripts/hotkey';
-import { search } from '@/scripts/search';
-import { deviceKind } from '@/scripts/device-kind';
-import { initializeSw } from '@/scripts/initialize-sw';
-import { reloadChannel } from '@/scripts/unison-reload';
-import { reactionPicker } from '@/scripts/reaction-picker';
-import { getUrlWithoutLoginId } from '@/scripts/login-id';
-import { getAccountFromId } from '@/scripts/get-account-from-id';
-
-(async () => {
-	console.info(`Misskey v${version}`);
-
-	if (_DEV_) {
-		console.warn('Development mode!!!');
-
-		console.info(`vue ${vueVersion}`);
-
-		(window as any).$i = $i;
-		(window as any).$store = defaultStore;
-
-		window.addEventListener('error', event => {
-			console.error(event);
-			/*
-			alert({
-				type: 'error',
-				title: 'DEV: Unhandled error',
-				text: event.message
-			});
-			*/
-		});
-
-		window.addEventListener('unhandledrejection', event => {
-			console.error(event);
-			/*
-			alert({
-				type: 'error',
-				title: 'DEV: Unhandled promise rejection',
-				text: event.reason
-			});
-			*/
-		});
-	}
-
-	// タッチデバイスでCSSの:hoverを機能させる
-	document.addEventListener('touchend', () => {}, { passive: true });
-
-	// 一斉リロード
-	reloadChannel.addEventListener('message', path => {
-		if (path !== null) location.href = path;
-		else location.reload();
-	});
-
-	// If mobile, insert the viewport meta tag
-	if (['smartphone', 'tablet'].includes(deviceKind)) {
-		const viewport = document.getElementsByName('viewport').item(0);
-		viewport.setAttribute('content',
-			`${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`);
-	}
-
-	//#region Set lang attr
-	const html = document.documentElement;
-	html.setAttribute('lang', lang);
-	//#endregion
-
-	//#region loginId
-	const params = new URLSearchParams(location.search);
-	const loginId = params.get('loginId');
-
-	if (loginId) {
-		const target = getUrlWithoutLoginId(location.href);
-
-		if (!$i || $i.id !== loginId) {
-			const account = await getAccountFromId(loginId);
-			if (account) {
-				await login(account.token, target);
-			}
-		}
-
-		history.replaceState({ misskey: 'loginId' }, '', target);
-	}
-
-	//#endregion
-
-	//#region Fetch user
-	if ($i && $i.token) {
-		if (_DEV_) {
-			console.log('account cache found. refreshing...');
-		}
-
-		refreshAccount();
-	} else {
-		if (_DEV_) {
-			console.log('no account cache found.');
-		}
-
-		// 連携ログインの場合用にCookieを参照する
-		const i = (document.cookie.match(/igi=(\w+)/) ?? [null, null])[1];
-
-		if (i != null && i !== 'null') {
-			if (_DEV_) {
-				console.log('signing...');
-			}
-
-			try {
-				document.body.innerHTML = '<div>Please wait...</div>';
-				await login(i);
-			} catch (err) {
-				// Render the error screen
-				// TODO: ちゃんとしたコンポーネントをレンダリングする(v10とかのトラブルシューティングゲーム付きのやつみたいな)
-				document.body.innerHTML = '<div id="err">Oops!</div>';
-			}
-		} else {
-			if (_DEV_) {
-				console.log('not signed in');
-			}
-		}
-	}
-	//#endregion
-
-	const fetchInstanceMetaPromise = fetchInstance();
-
-	fetchInstanceMetaPromise.then(() => {
-		localStorage.setItem('v', instance.version);
-
-		// Init service worker
-		initializeSw();
-	});
-
-	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 === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
-		defineAsyncComponent(() => import('@/ui/universal.vue')),
-	);
-
-	if (_DEV_) {
-		app.config.performance = true;
-	}
-
-	app.config.globalProperties = {
-		$i,
-		$store: defaultStore,
-		$instance: instance,
-		$t: i18n.t,
-		$ts: i18n.ts,
-	};
-
-	widgets(app);
-	directives(app);
-	components(app);
-
-	const splash = document.getElementById('splash');
-	// 念のためnullチェック(HTMLが古い場合があるため(そのうち消す))
-	if (splash) splash.addEventListener('transitionend', () => {
-		splash.remove();
-	});
-
-	// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
-	// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
-	const rootEl = (() => {
-		const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
-
-		const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID);
-
-		if (currentEl) {
-			console.warn('multiple import detected');
-			return currentEl;
-		}
-
-		const rootEl = document.createElement('div');
-		rootEl.id = MISSKEY_MOUNT_DIV_ID;
-		document.body.appendChild(rootEl);
-		return rootEl;
-	})();
-
-	app.mount(rootEl);
-
-	// boot.jsのやつを解除
-	window.onerror = null;
-	window.onunhandledrejection = null;
-
-	reactionPicker.init();
-
-	if (splash) {
-		splash.style.opacity = '0';
-		splash.style.pointerEvents = 'none';
-	}
-
-	// クライアントが更新されたか？
-	const lastVersion = localStorage.getItem('lastVersion');
-	if (lastVersion !== version) {
-		localStorage.setItem('lastVersion', version);
-
-		// テーマリビルドするため
-		localStorage.removeItem('theme');
-
-		try { // 変なバージョン文字列来るとcompareVersionsでエラーになるため
-			if (lastVersion != null && compareVersions(version, lastVersion) === 1) {
-				// ログインしてる場合だけ
-				if ($i) {
-					popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {}, 'closed');
-				}
-			}
-		} catch (err) {
-		}
-	}
-
-	// NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
-	watch(defaultStore.reactiveState.darkMode, (darkMode) => {
-		applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'));
-	}, { immediate: localStorage.theme == null });
-
-	const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme'));
-	const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme'));
-
-	watch(darkTheme, (theme) => {
-		if (defaultStore.state.darkMode) {
-			applyTheme(theme);
-		}
-	});
-
-	watch(lightTheme, (theme) => {
-		if (!defaultStore.state.darkMode) {
-			applyTheme(theme);
-		}
-	});
-
-	//#region Sync dark mode
-	if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
-		defaultStore.set('darkMode', isDeviceDarkmode());
-	}
-
-	window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
-		if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
-			defaultStore.set('darkMode', mql.matches);
-		}
-	});
-	//#endregion
-
-	fetchInstanceMetaPromise.then(() => {
-		if (defaultStore.state.themeInitial) {
-			if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme));
-			if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON5.parse(instance.defaultDarkTheme));
-			defaultStore.set('themeInitial', false);
-		}
-	});
-
-	watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
-		document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
-	}, { immediate: true });
-
-	watch(defaultStore.reactiveState.useBlurEffect, v => {
-		if (v) {
-			document.documentElement.style.removeProperty('--blur');
-		} else {
-			document.documentElement.style.setProperty('--blur', 'none');
-		}
-	}, { immediate: true });
-
-	let reloadDialogShowing = false;
-	stream.on('_disconnected_', async () => {
-		if (defaultStore.state.serverDisconnectedBehavior === 'reload') {
-			location.reload();
-		} else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') {
-			if (reloadDialogShowing) return;
-			reloadDialogShowing = true;
-			const { canceled } = await confirm({
-				type: 'warning',
-				title: i18n.ts.disconnectedFromServer,
-				text: i18n.ts.reloadConfirm,
-			});
-			reloadDialogShowing = false;
-			if (!canceled) {
-				location.reload();
-			}
-		}
-	});
-
-	stream.on('emojiAdded', emojiData => {
-		// TODO
-		//store.commit('instance/set', );
-	});
-
-	for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) {
-		import('./plugin').then(({ install }) => {
-			install(plugin);
-		});
-	}
-
-	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',
-				text: i18n.ts.accountDeletionInProgress,
-			});
-		}
-
-		const lastUsed = localStorage.getItem('lastUsed');
-		if (lastUsed) {
-			const lastUsedDate = parseInt(lastUsed, 10);
-			// 二時間以上前なら
-			if (Date.now() - lastUsedDate > 1000 * 60 * 60 * 2) {
-				toast(i18n.t('welcomeBackWithName', {
-					name: $i.name || $i.username,
-				}));
-			}
-		}
-		localStorage.setItem('lastUsed', Date.now().toString());
-
-		if ('Notification' in window) {
-			// 許可を得ていなかったらリクエスト
-			if (Notification.permission === 'default') {
-				Notification.requestPermission();
-			}
-		}
-
-		const main = markRaw(stream.useChannel('main', null, 'System'));
-
-		// 自分の情報が更新されたとき
-		main.on('meUpdated', i => {
-			updateAccount(i);
-		});
-
-		main.on('readAllNotifications', () => {
-			updateAccount({ hasUnreadNotification: false });
-		});
-
-		main.on('unreadNotification', () => {
-			updateAccount({ hasUnreadNotification: true });
-		});
-
-		main.on('unreadMention', () => {
-			updateAccount({ hasUnreadMentions: true });
-		});
-
-		main.on('readAllUnreadMentions', () => {
-			updateAccount({ hasUnreadMentions: false });
-		});
-
-		main.on('unreadSpecifiedNote', () => {
-			updateAccount({ hasUnreadSpecifiedNotes: true });
-		});
-
-		main.on('readAllUnreadSpecifiedNotes', () => {
-			updateAccount({ hasUnreadSpecifiedNotes: false });
-		});
-
-		main.on('readAllMessagingMessages', () => {
-			updateAccount({ hasUnreadMessagingMessage: false });
-		});
-
-		main.on('unreadMessagingMessage', () => {
-			updateAccount({ hasUnreadMessagingMessage: true });
-			sound.play('chatBg');
-		});
-
-		main.on('readAllAntennas', () => {
-			updateAccount({ hasUnreadAntenna: false });
-		});
-
-		main.on('unreadAntenna', () => {
-			updateAccount({ hasUnreadAntenna: true });
-			sound.play('antenna');
-		});
-
-		main.on('readAllAnnouncements', () => {
-			updateAccount({ hasUnreadAnnouncement: false });
-		});
-
-		main.on('readAllChannels', () => {
-			updateAccount({ hasUnreadChannel: false });
-		});
-
-		main.on('unreadChannel', () => {
-			updateAccount({ hasUnreadChannel: true });
-			sound.play('channel');
-		});
-
-		// トークンが再生成されたとき
-		// このままではMisskeyが利用できないので強制的にサインアウトさせる
-		main.on('myTokenRegenerated', () => {
-			signout();
-		});
-	}
-
-	// shortcut
-	document.addEventListener('keydown', makeHotkey(hotkeys));
-})();
diff --git a/packages/client/src/instance.ts b/packages/client/src/instance.ts
deleted file mode 100644
index 51464f32fb..0000000000
--- a/packages/client/src/instance.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { computed, reactive } from 'vue';
-import * as Misskey from 'misskey-js';
-import { api } from './os';
-
-// TODO: 他のタブと永続化されたstateを同期
-
-const instanceData = localStorage.getItem('instance');
-
-// TODO: instanceをリアクティブにするかは再考の余地あり
-
-export const instance: Misskey.entities.InstanceMetadata = reactive(instanceData ? JSON.parse(instanceData) : {
-	// TODO: set default values
-});
-
-export async function fetchInstance() {
-	const meta = await api('meta', {
-		detail: false,
-	});
-
-	for (const [k, v] of Object.entries(meta)) {
-		instance[k] = v;
-	}
-
-	localStorage.setItem('instance', JSON.stringify(instance));
-}
-
-export const emojiCategories = computed(() => {
-	if (instance.emojis == null) return [];
-	const categories = new Set();
-	for (const emoji of instance.emojis) {
-		categories.add(emoji.category);
-	}
-	return Array.from(categories);
-});
-
-export const emojiTags = computed(() => {
-	if (instance.emojis == null) return [];
-	const tags = new Set();
-	for (const emoji of instance.emojis) {
-		for (const tag of emoji.aliases) {
-			tags.add(tag);
-		}
-	}
-	return Array.from(tags);
-});
diff --git a/packages/client/src/navbar.ts b/packages/client/src/navbar.ts
deleted file mode 100644
index 31e6cd64a4..0000000000
--- a/packages/client/src/navbar.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import { computed, ref, reactive } from 'vue';
-import { $i } from './account';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { ui } from '@/config';
-import { unisonReload } from '@/scripts/unison-reload';
-
-export const navbarItemDef = reactive({
-	notifications: {
-		title: 'notifications',
-		icon: 'ti ti-bell',
-		show: computed(() => $i != null),
-		indicated: computed(() => $i != null && $i.hasUnreadNotification),
-		to: '/my/notifications',
-	},
-	messaging: {
-		title: 'messaging',
-		icon: 'ti ti-messages',
-		show: computed(() => $i != null),
-		indicated: computed(() => $i != null && $i.hasUnreadMessagingMessage),
-		to: '/my/messaging',
-	},
-	drive: {
-		title: 'drive',
-		icon: 'ti ti-cloud',
-		show: computed(() => $i != null),
-		to: '/my/drive',
-	},
-	followRequests: {
-		title: 'followRequests',
-		icon: 'ti ti-user-plus',
-		show: computed(() => $i != null && $i.isLocked),
-		indicated: computed(() => $i != null && $i.hasPendingReceivedFollowRequest),
-		to: '/my/follow-requests',
-	},
-	explore: {
-		title: 'explore',
-		icon: 'ti ti-hash',
-		to: '/explore',
-	},
-	announcements: {
-		title: 'announcements',
-		icon: 'ti ti-speakerphone',
-		indicated: computed(() => $i != null && $i.hasUnreadAnnouncement),
-		to: '/announcements',
-	},
-	search: {
-		title: 'search',
-		icon: 'ti ti-search',
-		action: () => search(),
-	},
-	lists: {
-		title: 'lists',
-		icon: 'ti ti-list',
-		show: computed(() => $i != null),
-		to: '/my/lists',
-	},
-	/*
-	groups: {
-		title: 'groups',
-		icon: 'ti ti-users',
-		show: computed(() => $i != null),
-		to: '/my/groups',
-	},
-	*/
-	antennas: {
-		title: 'antennas',
-		icon: 'ti ti-antenna',
-		show: computed(() => $i != null),
-		to: '/my/antennas',
-	},
-	favorites: {
-		title: 'favorites',
-		icon: 'ti ti-star',
-		show: computed(() => $i != null),
-		to: '/my/favorites',
-	},
-	pages: {
-		title: 'pages',
-		icon: 'ti ti-news',
-		to: '/pages',
-	},
-	gallery: {
-		title: 'gallery',
-		icon: 'ti ti-icons',
-		to: '/gallery',
-	},
-	clips: {
-		title: 'clip',
-		icon: 'ti ti-paperclip',
-		show: computed(() => $i != null),
-		to: '/my/clips',
-	},
-	channels: {
-		title: 'channel',
-		icon: 'ti ti-device-tv',
-		to: '/channels',
-	},
-	ui: {
-		title: 'switchUi',
-		icon: 'ti ti-devices',
-		action: (ev) => {
-			os.popupMenu([{
-				text: i18n.ts.default,
-				active: ui === 'default' || ui === null,
-				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();
-				},
-			}], ev.currentTarget ?? ev.target);
-		},
-	},
-	reload: {
-		title: 'reload',
-		icon: 'ti ti-refresh',
-		action: (ev) => {
-			location.reload();
-		},
-	},
-});
diff --git a/packages/client/src/nirax.ts b/packages/client/src/nirax.ts
deleted file mode 100644
index 53e73a8d48..0000000000
--- a/packages/client/src/nirax.ts
+++ /dev/null
@@ -1,275 +0,0 @@
-// NIRAX --- A lightweight router
-
-import { EventEmitter } from 'eventemitter3';
-import { Ref, Component, ref, shallowRef, ShallowRef } from 'vue';
-import { pleaseLogin } from '@/scripts/please-login';
-import { safeURIDecode } from '@/scripts/safe-uri-decode';
-
-type RouteDef = {
-	path: string;
-	component: Component;
-	query?: Record<string, string>;
-	loginRequired?: boolean;
-	name?: string;
-	hash?: string;
-	globalCacheKey?: string;
-	children?: RouteDef[];
-};
-
-type ParsedPath = (string | {
-	name: string;
-	startsWith?: string;
-	wildcard?: boolean;
-	optional?: boolean;
-})[];
-
-export type Resolved = { route: RouteDef; props: Map<string, string>; child?: Resolved; };
-
-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 if (part.length !== 0) {
-			res.push(part);
-		}
-	}
-
-	return res;
-}
-
-export class Router extends EventEmitter<{
-	change: (ctx: {
-		beforePath: string;
-		path: string;
-		resolved: Resolved;
-		key: string;
-	}) => void;
-	replace: (ctx: {
-		path: string;
-		key: string;
-	}) => void;
-	push: (ctx: {
-		beforePath: string;
-		path: string;
-		route: RouteDef | null;
-		props: Map<string, string> | null;
-		key: string;
-	}) => void;
-	same: () => void;
-}> {
-	private routes: RouteDef[];
-	public current: Resolved;
-	public currentRef: ShallowRef<Resolved> = shallowRef();
-	public currentRoute: ShallowRef<RouteDef> = shallowRef();
-	private currentPath: string;
-	private currentKey = Date.now().toString();
-
-	public navHook: ((path: string, flag?: any) => boolean) | null = null;
-
-	constructor(routes: Router['routes'], currentPath: Router['currentPath']) {
-		super();
-
-		this.routes = routes;
-		this.currentPath = currentPath;
-		this.navigate(currentPath, null, false);
-	}
-
-	public resolve(path: string): Resolved | null {
-		let queryString: string | null = null;
-		let hash: string | null = null;
-		if (path[0] === '/') path = path.substring(1);
-		if (path.includes('#')) {
-			hash = path.substring(path.indexOf('#') + 1);
-			path = path.substring(0, path.indexOf('#'));
-		}
-		if (path.includes('?')) {
-			queryString = path.substring(path.indexOf('?') + 1);
-			path = path.substring(0, path.indexOf('?'));
-		}
-
-		if (_DEV_) console.log('Routing: ', path, queryString);
-
-		function check(routes: RouteDef[], _parts: string[]): Resolved | null {
-			forEachRouteLoop:
-			for (const route of routes) {
-				let parts = [..._parts];
-				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, safeURIDecode(parts.join('/')));
-								parts = [];
-							}
-							break pathMatchLoop;
-						} else {
-							if (p.startsWith) {
-								if (parts[0] == null || !parts[0].startsWith(p.startsWith)) continue forEachRouteLoop;
-
-								props.set(p.name, safeURIDecode(parts[0].substring(p.startsWith.length)));
-								parts.shift();
-							} else {
-								if (parts[0]) {
-									props.set(p.name, safeURIDecode(parts[0]));
-								}
-								parts.shift();
-							}
-						}
-					}
-				}
-
-				if (parts.length === 0) {
-					if (route.children) {
-						const child = check(route.children, []);
-						if (child) {
-							return {
-								route,
-								props,
-								child,
-							};
-						} else {
-							continue forEachRouteLoop;
-						}
-					}
-
-					if (route.hash != null && hash != null) {
-						props.set(route.hash, safeURIDecode(hash));
-					}
-	
-					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, safeURIDecode(queryObject[q]));
-							}
-						}
-					}
-	
-					return {
-						route,
-						props,
-					};
-				} else {
-					if (route.children) {
-						const child = check(route.children, parts);
-						if (child) {
-							return {
-								route,
-								props,
-								child,
-							};
-						} else {
-							continue forEachRouteLoop;
-						}
-					} else {
-						continue forEachRouteLoop;
-					}
-				}
-			}
-
-			return null;
-		}
-
-		const _parts = path.split('/').filter(part => part.length !== 0);
-
-		return check(this.routes, _parts);
-	}
-
-	private navigate(path: string, key: string | null | undefined, emitChange = true) {
-		const beforePath = this.currentPath;
-		this.currentPath = path;
-
-		const res = this.resolve(this.currentPath);
-
-		if (res == null) {
-			throw new Error('no route found for: ' + path);
-		}
-
-		if (res.route.loginRequired) {
-			pleaseLogin('/');
-		}
-
-		const isSamePath = beforePath === path;
-		if (isSamePath && key == null) key = this.currentKey;
-		this.current = res;
-		this.currentRef.value = res;
-		this.currentRoute.value = res.route;
-		this.currentKey = res.route.globalCacheKey ?? key ?? path;
-
-		if (emitChange) {
-			this.emit('change', {
-				beforePath,
-				path,
-				resolved: res,
-				key: this.currentKey,
-			});
-		}
-
-		return res;
-	}
-
-	public getCurrentPath() {
-		return this.currentPath;
-	}
-
-	public getCurrentKey() {
-		return this.currentKey;
-	}
-
-	public push(path: string, flag?: any) {
-		const beforePath = this.currentPath;
-		if (path === beforePath) {
-			this.emit('same');
-			return;
-		}
-		if (this.navHook) {
-			const cancel = this.navHook(path, flag);
-			if (cancel) return;
-		}
-		const res = this.navigate(path, null);
-		this.emit('push', {
-			beforePath,
-			path,
-			route: res.route,
-			props: res.props,
-			key: this.currentKey,
-		});
-	}
-
-	public replace(path: string, key?: string | null, emitEvent = true) {
-		this.navigate(path, key);
-		if (emitEvent) {
-			this.emit('replace', {
-				path,
-				key: this.currentKey,
-			});
-		}
-	}
-}
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
deleted file mode 100644
index 7e57dcb4af..0000000000
--- a/packages/client/src/os.ts
+++ /dev/null
@@ -1,588 +0,0 @@
-// TODO: なんでもかんでもos.tsに突っ込むのやめたいのでよしなに分割する
-
-import { Component, markRaw, Ref, ref, defineAsyncComponent } from 'vue';
-import { EventEmitter } from 'eventemitter3';
-import insertTextAtCursor from 'insert-text-at-cursor';
-import * as Misskey from 'misskey-js';
-import { apiUrl, url } from '@/config';
-import MkPostFormDialog from '@/components/MkPostFormDialog.vue';
-import MkWaitingDialog from '@/components/MkWaitingDialog.vue';
-import { MenuItem } from '@/types/menu';
-import { $i } from '@/account';
-
-export const pendingApiRequestsCount = ref(0);
-
-const apiClient = new Misskey.api.APIClient({
-	origin: url,
-});
-
-export const api = ((endpoint: string, data: Record<string, any> = {}, token?: string | null | undefined) => {
-	pendingApiRequestsCount.value++;
-
-	const onFinally = () => {
-		pendingApiRequestsCount.value--;
-	};
-
-	const promise = new Promise((resolve, reject) => {
-		// Append a credential
-		if ($i) (data as any).i = $i.token;
-		if (token !== undefined) (data as any).i = token;
-
-		// Send request
-		window.fetch(endpoint.indexOf('://') > -1 ? endpoint : `${apiUrl}/${endpoint}`, {
-			method: 'POST',
-			body: JSON.stringify(data),
-			credentials: 'omit',
-			cache: 'no-cache',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-		}).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 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
-		window.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> = {},
-	token?: string | null | undefined,
-) => {
-	const promise = api(endpoint, data, token);
-	promiseDialog(promise, null, (err) => {
-		alert({
-			type: 'error',
-			text: err.message + '\n' + (err as any).id,
-		});
-	});
-
-	return promise;
-}) as typeof api;
-
-export function promiseDialog<T extends Promise<any>>(
-	promise: T,
-	onSuccess?: ((res: any) => void) | null,
-	onFailure?: ((err: Error) => void) | null,
-	text?: string,
-): T {
-	const showing = ref(true);
-	const success = ref(false);
-
-	promise.then(res => {
-		if (onSuccess) {
-			showing.value = false;
-			onSuccess(res);
-		} else {
-			success.value = true;
-			window.setTimeout(() => {
-				showing.value = false;
-			}, 1000);
-		}
-	}).catch(err => {
-		showing.value = false;
-		if (onFailure) {
-			onFailure(err);
-		} else {
-			alert({
-				type: 'error',
-				text: err,
-			});
-		}
-	});
-
-	// NOTE: dynamic importすると挙動がおかしくなる(showingの変更が伝播しない)
-	popup(MkWaitingDialog, {
-		success: success,
-		showing: showing,
-		text: text,
-	}, {}, 'closed');
-
-	return promise;
-}
-
-let popupIdCount = 0;
-export const popups = ref([]) as Ref<{
-	id: any;
-	component: any;
-	props: Record<string, any>;
-}[]>;
-
-const zIndexes = {
-	low: 1000000,
-	middle: 2000000,
-	high: 3000000,
-};
-export function claimZIndex(priority: 'low' | 'middle' | 'high' = 'low'): number {
-	zIndexes[priority] += 100;
-	return zIndexes[priority];
-}
-
-export async function popup(component: Component, props: Record<string, any>, events = {}, disposeEvent?: string) {
-	markRaw(component);
-
-	const id = ++popupIdCount;
-	const dispose = () => {
-		// このsetTimeoutが無いと挙動がおかしくなる(autocompleteが閉じなくなる)。Vueのバグ？
-		window.setTimeout(() => {
-			popups.value = popups.value.filter(popup => popup.id !== id);
-		}, 0);
-	};
-	const state = {
-		component,
-		props,
-		events: disposeEvent ? {
-			...events,
-			[disposeEvent]: dispose,
-		} : events,
-		id,
-	};
-
-	popups.value.push(state);
-
-	return {
-		dispose,
-	};
-}
-
-export function pageWindow(path: string) {
-	popup(defineAsyncComponent(() => import('@/components/MkPageWindow.vue')), {
-		initialPath: path,
-	}, {}, 'closed');
-}
-
-export function modalPageWindow(path: string) {
-	popup(defineAsyncComponent(() => import('@/components/MkModalPageWindow.vue')), {
-		initialPath: path,
-	}, {}, 'closed');
-}
-
-export function toast(message: string) {
-	popup(defineAsyncComponent(() => import('@/components/MkToast.vue')), {
-		message,
-	}, {}, 'closed');
-}
-
-export function alert(props: {
-	type?: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
-	title?: string | null;
-	text?: string | null;
-}): Promise<void> {
-	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), props, {
-			done: result => {
-				resolve();
-			},
-		}, 'closed');
-	});
-}
-
-export function confirm(props: {
-	type: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
-	title?: string | null;
-	text?: string | null;
-}): Promise<{ canceled: boolean }> {
-	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), {
-			...props,
-			showCancelButton: true,
-		}, {
-			done: result => {
-				resolve(result ? result : { canceled: true });
-			},
-		}, 'closed');
-	});
-}
-
-export function inputText(props: {
-	type?: 'text' | 'email' | 'password' | 'url';
-	title?: string | null;
-	text?: string | null;
-	placeholder?: string | null;
-	default?: string | null;
-}): Promise<{ canceled: true; result: undefined; } | {
-	canceled: false; result: string;
-}> {
-	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), {
-			title: props.title,
-			text: props.text,
-			input: {
-				type: props.type,
-				placeholder: props.placeholder,
-				default: props.default,
-			},
-		}, {
-			done: result => {
-				resolve(result ? result : { canceled: true });
-			},
-		}, 'closed');
-	});
-}
-
-export function inputNumber(props: {
-	title?: string | null;
-	text?: string | null;
-	placeholder?: string | null;
-	default?: number | null;
-}): Promise<{ canceled: true; result: undefined; } | {
-	canceled: false; result: number;
-}> {
-	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), {
-			title: props.title,
-			text: props.text,
-			input: {
-				type: 'number',
-				placeholder: props.placeholder,
-				default: props.default,
-			},
-		}, {
-			done: result => {
-				resolve(result ? result : { canceled: true });
-			},
-		}, 'closed');
-	});
-}
-
-export function inputDate(props: {
-	title?: string | null;
-	text?: string | null;
-	placeholder?: string | null;
-	default?: Date | null;
-}): Promise<{ canceled: true; result: undefined; } | {
-	canceled: false; result: Date;
-}> {
-	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), {
-			title: props.title,
-			text: props.text,
-			input: {
-				type: 'date',
-				placeholder: props.placeholder,
-				default: props.default,
-			},
-		}, {
-			done: result => {
-				resolve(result ? { result: new Date(result.result), canceled: false } : { canceled: true });
-			},
-		}, 'closed');
-	});
-}
-
-export function select<C = any>(props: {
-	title?: string | null;
-	text?: string | null;
-	default?: string | null;
-} & ({
-	items: {
-		value: C;
-		text: string;
-	}[];
-} | {
-	groupedItems: {
-		label: string;
-		items: {
-			value: C;
-			text: string;
-		}[];
-	}[];
-})): Promise<{ canceled: true; result: undefined; } | {
-	canceled: false; result: C;
-}> {
-	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), {
-			title: props.title,
-			text: props.text,
-			select: {
-				items: props.items,
-				groupedItems: props.groupedItems,
-				default: props.default,
-			},
-		}, {
-			done: result => {
-				resolve(result ? result : { canceled: true });
-			},
-		}, 'closed');
-	});
-}
-
-export function success() {
-	return new Promise((resolve, reject) => {
-		const showing = ref(true);
-		window.setTimeout(() => {
-			showing.value = false;
-		}, 1000);
-		popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), {
-			success: true,
-			showing: showing,
-		}, {
-			done: () => resolve(),
-		}, 'closed');
-	});
-}
-
-export function waiting() {
-	return new Promise((resolve, reject) => {
-		const showing = ref(true);
-		popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), {
-			success: false,
-			showing: showing,
-		}, {
-			done: () => resolve(),
-		}, 'closed');
-	});
-}
-
-export function form(title, form) {
-	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/MkFormDialog.vue')), { title, form }, {
-			done: result => {
-				resolve(result);
-			},
-		}, 'closed');
-	});
-}
-
-export async function selectUser() {
-	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/MkUserSelectDialog.vue')), {}, {
-			ok: user => {
-				resolve(user);
-			},
-		}, 'closed');
-	});
-}
-
-export async function selectDriveFile(multiple: boolean) {
-	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
-			type: 'file',
-			multiple,
-		}, {
-			done: files => {
-				if (files) {
-					resolve(multiple ? files : files[0]);
-				}
-			},
-		}, 'closed');
-	});
-}
-
-export async function selectDriveFolder(multiple: boolean) {
-	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
-			type: 'folder',
-			multiple,
-		}, {
-			done: folders => {
-				if (folders) {
-					resolve(multiple ? folders : folders[0]);
-				}
-			},
-		}, 'closed');
-	});
-}
-
-export async function pickEmoji(src: HTMLElement | null, opts) {
-	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
-			src,
-			...opts,
-		}, {
-			done: emoji => {
-				resolve(emoji);
-			},
-		}, 'closed');
-	});
-}
-
-export async function cropImage(image: Misskey.entities.DriveFile, options: {
-	aspectRatio: number;
-}): Promise<Misskey.entities.DriveFile> {
-	return new Promise((resolve, reject) => {
-		popup(defineAsyncComponent(() => import('@/components/MkCropperDialog.vue')), {
-			file: image,
-			aspectRatio: options.aspectRatio,
-		}, {
-			ok: x => {
-				resolve(x);
-			},
-		}, 'closed');
-	});
-}
-
-type AwaitType<T> =
-	T extends Promise<infer U> ? U :
-	T extends (...args: any[]) => Promise<infer V> ? V :
-	T;
-let openingEmojiPicker: AwaitType<ReturnType<typeof popup>> | null = null;
-let activeTextarea: HTMLTextAreaElement | HTMLInputElement | null = null;
-export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea: typeof activeTextarea) {
-	if (openingEmojiPicker) return;
-
-	activeTextarea = initialTextarea;
-
-	const textareas = document.querySelectorAll('textarea, input');
-	for (const textarea of Array.from(textareas)) {
-		textarea.addEventListener('focus', () => {
-			activeTextarea = textarea;
-		});
-	}
-
-	const observer = new MutationObserver(records => {
-		for (const record of records) {
-			for (const node of Array.from(record.addedNodes).filter(node => node instanceof HTMLElement) as HTMLElement[]) {
-				const textareas = node.querySelectorAll('textarea, input') as NodeListOf<NonNullable<typeof activeTextarea>>;
-				for (const textarea of Array.from(textareas).filter(textarea => textarea.dataset.preventEmojiInsert == null)) {
-					if (document.activeElement === textarea) activeTextarea = textarea;
-					textarea.addEventListener('focus', () => {
-						activeTextarea = textarea;
-					});
-				}
-			}
-		}
-	});
-
-	observer.observe(document.body, {
-		childList: true,
-		subtree: true,
-		attributes: false,
-		characterData: false,
-	});
-
-	openingEmojiPicker = await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerWindow.vue')), {
-		src,
-		...opts,
-	}, {
-		chosen: emoji => {
-			insertTextAtCursor(activeTextarea, emoji);
-		},
-		closed: () => {
-			openingEmojiPicker!.dispose();
-			openingEmojiPicker = null;
-			observer.disconnect();
-		},
-	});
-}
-
-export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement, options?: {
-	align?: string;
-	width?: number;
-	viaKeyboard?: boolean;
-}) {
-	return new Promise((resolve, reject) => {
-		let dispose;
-		popup(defineAsyncComponent(() => import('@/components/MkPopupMenu.vue')), {
-			items,
-			src,
-			width: options?.width,
-			align: options?.align,
-			viaKeyboard: options?.viaKeyboard,
-		}, {
-			closed: () => {
-				resolve();
-				dispose();
-			},
-		}).then(res => {
-			dispose = res.dispose;
-		});
-	});
-}
-
-export function contextMenu(items: MenuItem[] | Ref<MenuItem[]>, ev: MouseEvent) {
-	ev.preventDefault();
-	return new Promise((resolve, reject) => {
-		let dispose;
-		popup(defineAsyncComponent(() => import('@/components/MkContextMenu.vue')), {
-			items,
-			ev,
-		}, {
-			closed: () => {
-				resolve();
-				dispose();
-			},
-		}).then(res => {
-			dispose = res.dispose;
-		});
-	});
-}
-
-export function post(props: Record<string, any> = {}) {
-	return new Promise((resolve, reject) => {
-		// NOTE: MkPostFormDialogをdynamic importするとiOSでテキストエリアに自動フォーカスできない
-		// NOTE: ただ、dynamic importしない場合、MkPostFormDialogインスタンスが使いまわされ、
-		//       Vueが渡されたコンポーネントに内部的に__propsというプロパティを生やす影響で、
-		//       複数のpost formを開いたときに場合によってはエラーになる
-		//       もちろん複数のpost formを開けること自体Misskeyサイドのバグなのだが
-		let dispose;
-		popup(MkPostFormDialog, props, {
-			closed: () => {
-				resolve();
-				dispose();
-			},
-		}).then(res => {
-			dispose = res.dispose;
-		});
-	});
-}
-
-export const deckGlobalEvents = new EventEmitter();
-
-/*
-export function checkExistence(fileData: ArrayBuffer): Promise<any> {
-	return new Promise((resolve, reject) => {
-		const data = new FormData();
-		data.append('md5', getMD5(fileData));
-
-		os.api('drive/files/find-by-hash', {
-			md5: getMD5(fileData)
-		}).then(resp => {
-			resolve(resp.length > 0 ? resp[0] : null);
-		});
-	});
-}*/
diff --git a/packages/client/src/pages/_empty_.vue b/packages/client/src/pages/_empty_.vue
deleted file mode 100644
index 000b6decc9..0000000000
--- a/packages/client/src/pages/_empty_.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-<div></div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-</script>
diff --git a/packages/client/src/pages/_error_.vue b/packages/client/src/pages/_error_.vue
deleted file mode 100644
index 232d525347..0000000000
--- a/packages/client/src/pages/_error_.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-<MkLoading v-if="!loaded"/>
-<transition :name="$store.state.animation ? 'zoom' : ''" appear>
-	<div v-show="loaded" class="mjndxjch">
-		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
-		<p><b><i class="ti ti-alert-triangle"></i> {{ i18n.ts.pageLoadError }}</b></p>
-		<p v-if="meta && (version === meta.version)">{{ i18n.ts.pageLoadErrorDescription }}</p>
-		<p v-else-if="serverIsDead">{{ i18n.ts.serverIsDead }}</p>
-		<template v-else>
-			<p>{{ i18n.ts.newVersionOfClientAvailable }}</p>
-			<p>{{ i18n.ts.youShouldUpgradeClient }}</p>
-			<MkButton class="button primary" @click="reload">{{ i18n.ts.reload }}</MkButton>
-		</template>
-		<p><MkA to="/docs/general/troubleshooting" class="_link">{{ i18n.ts.troubleshooting }}</MkA></p>
-		<p v-if="error" class="error">ERROR: {{ error }}</p>
-	</div>
-</transition>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'misskey-js';
-import MkButton from '@/components/MkButton.vue';
-import { version } from '@/config';
-import * as os from '@/os';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const props = withDefaults(defineProps<{
-	error?: Error;
-}>(), {
-});
-
-let loaded = $ref(false);
-let serverIsDead = $ref(false);
-let meta = $ref<misskey.entities.LiteInstanceMetadata | null>(null);
-
-os.api('meta', {
-	detail: false,
-}).then(res => {
-	loaded = true;
-	serverIsDead = false;
-	meta = res;
-	localStorage.setItem('v', res.version);
-}, () => {
-	loaded = true;
-	serverIsDead = true;
-});
-
-function reload() {
-	unisonReload();
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.error,
-	icon: 'ti ti-alert-triangle',
-});
-</script>
-
-<style lang="scss" scoped>
-.mjndxjch {
-	padding: 32px;
-	text-align: center;
-
-	> p {
-		margin: 0 0 12px 0;
-	}
-
-	> .button {
-		margin: 8px auto;
-	}
-
-	> img {
-		vertical-align: bottom;
-		height: 128px;
-		margin-bottom: 24px;
-		border-radius: 16px;
-	}
-
-	> .error {
-		opacity: 0.7;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/_loading_.vue b/packages/client/src/pages/_loading_.vue
deleted file mode 100644
index 1dd2e46e10..0000000000
--- a/packages/client/src/pages/_loading_.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-<MkLoading/>
-</template>
-
-<script lang="ts" setup>
-</script>
diff --git a/packages/client/src/pages/about-misskey.vue b/packages/client/src/pages/about-misskey.vue
deleted file mode 100644
index 3ec972bcda..0000000000
--- a/packages/client/src/pages/about-misskey.vue
+++ /dev/null
@@ -1,264 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<div style="overflow: clip;">
-		<MkSpacer :content-max="600" :margin-min="20">
-			<div class="_formRoot znqjceqz">
-				<div id="debug"></div>
-				<div ref="containerEl" v-panel class="_formBlock about" :class="{ playing: easterEggEngine != null }">
-					<img src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
-					<div class="misskey">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="ti ti-code"></i></template>
-							{{ i18n.ts._aboutMisskey.source }}
-							<template #suffix>GitHub</template>
-						</FormLink>
-						<FormLink to="https://crowdin.com/project/misskey" external>
-							<template #icon><i class="ti ti-language-hiragana"></i></template>
-							{{ i18n.ts._aboutMisskey.translation }}
-							<template #suffix>Crowdin</template>
-						</FormLink>
-						<FormLink to="https://www.patreon.com/syuilo" external>
-							<template #icon><i class="ti ti-pig-money"></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>
-import { nextTick, onBeforeUnmount } from 'vue';
-import { version } from '@/config';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkLink from '@/components/MkLink.vue';
-import { physics } from '@/scripts/physics';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const patrons = [
-	'まっちゃとーにゅ',
-	'mametsuko',
-	'noellabo',
-	'AureoleArk',
-	'Gargron',
-	'Nokotaro Takeda',
-	'Suji Yan',
-	'oi_yekssim',
-	'regtan',
-	'Hekovic',
-	'nenohi',
-	'Gitmo Life Services',
-	'naga_rus',
-	'Efertone',
-	'Melilot',
-	'motcha',
-	'nanami kan',
-	'sevvie Rose',
-	'Hayato Ishikawa',
-	'Puniko',
-	'skehmatics',
-	'Quinton Macejkovic',
-	'YUKIMOCHI',
-	'dansup',
-	'mewl hayabusa',
-	'Emilis',
-	'Fristi',
-	'makokunsan',
-	'chidori ninokura',
-	'Peter G.',
-	'見当かなみ',
-	'natalie',
-	'Maronu',
-	'Steffen K9',
-	'takimura',
-	'sikyosyounin',
-	'Nesakko',
-	'YuzuRyo61',
-	'blackskye',
-	'sheeta.s',
-	'osapon',
-	'public_yusuke',
-	'CG',
-	'吴浥',
-	't_w',
-	'Jerry',
-	'nafuchoco',
-	'Takumi Sugita',
-	'GLaTAN',
-	'mkatze',
-	'kabo2468y',
-	'mydarkstar',
-	'Roujo',
-	'DignifiedSilence',
-	'uroco @99',
-	'totokoro',
-	'うし',
-	'kiritan',
-	'weepjp',
-	'Liaizon Wakest',
-	'Duponin',
-	'Blue',
-	'Naoki Hirayama',
-	'wara',
-	'Wataru Manji (manji0)',
-	'みなしま',
-	'kanoy',
-	'xianon',
-	'Denshi',
-	'Osushimaru',
-	'にょんへら',
-	'おのだい',
-	'Leni',
-	'oss',
-	'Weeble',
-	'蝉暮せせせ',
-	'ThatOneCalculator',
-	'pixeldesu',
-];
-
-let easterEggReady = false;
-let easterEggEmojis = $ref([]);
-let easterEggEngine = $ref(null);
-const containerEl = $ref<HTMLElement>();
-
-function iconLoaded() {
-	const emojis = defaultStore.state.reactions;
-	const containerWidth = containerEl.offsetWidth;
-	for (let i = 0; i < 32; i++) {
-		easterEggEmojis.push({
-			id: i.toString(),
-			top: -(128 + (Math.random() * 256)),
-			left: (Math.random() * containerWidth),
-			emoji: emojis[Math.floor(Math.random() * emojis.length)],
-		});
-	}
-
-	nextTick(() => {
-		easterEggReady = true;
-	});
-}
-
-function gravity() {
-	if (!easterEggReady) return;
-	easterEggReady = false;
-	easterEggEngine = physics(containerEl);
-}
-
-function iLoveMisskey() {
-	os.post({
-		initialText: 'I $[jelly ❤] #Misskey',
-		instant: true,
-	});
-}
-
-onBeforeUnmount(() => {
-	if (easterEggEngine) {
-		easterEggEngine.stop();
-	}
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.aboutMisskey,
-	icon: null,
-});
-</script>
-
-<style lang="scss" scoped>
-.znqjceqz {
-	> .about {
-		position: relative;
-		text-align: center;
-		padding: 16px;
-		border-radius: var(--radius);
-
-		&.playing {
-			&, * {
-				user-select: none;
-			}
-
-			* {
-				will-change: transform;
-			}
-
-			> .emoji {
-				visibility: visible;
-			}
-		}
-
-		> .icon {
-			display: block;
-			width: 100px;
-			margin: 0 auto;
-			border-radius: 16px;
-		}
-
-		> .misskey {
-			margin: 0.75em auto 0 auto;
-			width: max-content;
-		}
-
-		> .version {
-			margin: 0 auto;
-			width: max-content;
-			opacity: 0.5;
-		}
-
-		> .emoji {
-			position: absolute;
-			top: 0;
-			left: 0;
-			visibility: hidden;
-
-			> .emoji {
-				pointer-events: none;
-				font-size: 24px;
-				width: 24px;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/about.emojis.vue b/packages/client/src/pages/about.emojis.vue
deleted file mode 100644
index 53ce1e4b75..0000000000
--- a/packages/client/src/pages/about.emojis.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<template>
-<div class="driuhtrh">
-	<div class="query">
-		<MkInput v-model="q" class="" :placeholder="$ts.search">
-			<template #prefix><i class="ti ti-search"></i></template>
-		</MkInput>
-
-		<!-- たくさんあると邪魔
-		<div class="tags">
-			<span class="tag _button" v-for="tag in tags" :class="{ active: selectedTags.has(tag) }" @click="toggleTag(tag)">{{ tag }}</span>
-		</div>
-		-->
-	</div>
-
-	<MkFolder v-if="searchEmojis" class="emojis">
-		<template #header>{{ $ts.searchResult }}</template>
-		<div class="zuvgdzyt">
-			<XEmoji v-for="emoji in searchEmojis" :key="emoji.name" class="emoji" :emoji="emoji"/>
-		</div>
-	</MkFolder>
-	
-	<MkFolder v-for="category in customEmojiCategories" :key="category" class="emojis">
-		<template #header>{{ category || $ts.other }}</template>
-		<div class="zuvgdzyt">
-			<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" class="emoji" :emoji="emoji"/>
-		</div>
-	</MkFolder>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
-import XEmoji from './emojis.emoji.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkTab from '@/components/MkTab.vue';
-import * as os from '@/os';
-import { emojiCategories, emojiTags } from '@/instance';
-
-export default defineComponent({
-	components: {
-		MkButton,
-		MkInput,
-		MkSelect,
-		MkFolder,
-		MkTab,
-		XEmoji,
-	},
-
-	data() {
-		return {
-			q: '',
-			customEmojiCategories: emojiCategories,
-			customEmojis: this.$instance.emojis,
-			tags: emojiTags,
-			selectedTags: new Set(),
-			searchEmojis: null,
-		};
-	},
-
-	watch: {
-		q() { this.search(); },
-		selectedTags: {
-			handler() {
-				this.search();
-			},
-			deep: true,
-		},
-	},
-
-	methods: {
-		search() {
-			if ((this.q === '' || this.q == null) && this.selectedTags.size === 0) {
-				this.searchEmojis = null;
-				return;
-			}
-
-			if (this.selectedTags.size === 0) {
-				this.searchEmojis = this.customEmojis.filter(emoji => emoji.name.includes(this.q) || emoji.aliases.includes(this.q));
-			} else {
-				this.searchEmojis = this.customEmojis.filter(emoji => (emoji.name.includes(this.q) || emoji.aliases.includes(this.q)) && [...this.selectedTags].every(t => emoji.aliases.includes(t)));
-			}
-		},
-
-		toggleTag(tag) {
-			if (this.selectedTags.has(tag)) {
-				this.selectedTags.delete(tag);
-			} else {
-				this.selectedTags.add(tag);
-			}
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.driuhtrh {
-	background: var(--bg);
-
-	> .query {
-		background: var(--bg);
-		padding: 16px;
-
-		> .tags {
-			> .tag {
-				display: inline-block;
-				margin: 8px 8px 0 0;
-				padding: 4px 8px;
-				font-size: 0.9em;
-				background: var(--accentedBg);
-				border-radius: 5px;
-
-				&.active {
-					background: var(--accent);
-					color: var(--fgOnAccent);
-				}
-			}
-		}
-	}
-
-	> .emojis {
-		--x-padding: 0 16px;
-
-		.zuvgdzyt {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
-			grid-gap: 12px;
-			margin: 0 var(--margin) var(--margin) var(--margin);
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/about.federation.vue b/packages/client/src/pages/about.federation.vue
deleted file mode 100644
index 6c92ab1264..0000000000
--- a/packages/client/src/pages/about.federation.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-<div class="taeiyria">
-	<div class="query">
-		<MkInput v-model="host" :debounce="true" class="">
-			<template #prefix><i class="ti ti-search"></i></template>
-			<template #label>{{ i18n.ts.host }}</template>
-		</MkInput>
-		<FormSplit style="margin-top: var(--margin);">
-			<MkSelect v-model="state">
-				<template #label>{{ i18n.ts.state }}</template>
-				<option value="all">{{ i18n.ts.all }}</option>
-				<option value="federating">{{ i18n.ts.federating }}</option>
-				<option value="subscribing">{{ i18n.ts.subscribing }}</option>
-				<option value="publishing">{{ i18n.ts.publishing }}</option>
-				<option value="suspended">{{ i18n.ts.suspended }}</option>
-				<option value="blocked">{{ i18n.ts.blocked }}</option>
-				<option value="notResponding">{{ i18n.ts.notResponding }}</option>
-			</MkSelect>
-			<MkSelect v-model="sort">
-				<template #label>{{ i18n.ts.sort }}</template>
-				<option value="+pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+notes">{{ i18n.ts.notes }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-notes">{{ i18n.ts.notes }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+users">{{ i18n.ts.users }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-users">{{ i18n.ts.users }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+following">{{ i18n.ts.following }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-following">{{ i18n.ts.following }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+followers">{{ i18n.ts.followers }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-followers">{{ i18n.ts.followers }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.ascendingOrder }})</option>
-				<option value="+lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.descendingOrder }})</option>
-				<option value="-lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.ascendingOrder }})</option>
-			</MkSelect>
-		</FormSplit>
-	</div>
-
-	<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
-		<div class="dqokceoi">
-			<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Last communicated: ${new Date(instance.lastCommunicatedAt).toLocaleString()}\nStatus: ${getStatus(instance)}`" class="instance" :to="`/instance-info/${instance.host}`">
-				<MkInstanceCardMini :instance="instance"/>
-			</MkA>
-		</div>
-	</MkPagination>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue';
-import FormSplit from '@/components/form/split.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-let host = $ref('');
-let state = $ref('federating');
-let sort = $ref('+pubSub');
-const pagination = {
-	endpoint: 'federation/instances' as const,
-	limit: 10,
-	offsetMode: true,
-	params: computed(() => ({
-		sort: sort,
-		host: host !== '' ? host : null,
-		...(
-			state === 'federating' ? { federating: true } :
-			state === 'subscribing' ? { subscribing: true } :
-			state === 'publishing' ? { publishing: true } :
-			state === 'suspended' ? { suspended: true } :
-			state === 'blocked' ? { blocked: true } :
-			state === 'notResponding' ? { notResponding: true } :
-			{}),
-	})),
-};
-
-function getStatus(instance) {
-	if (instance.isSuspended) return 'Suspended';
-	if (instance.isBlocked) return 'Blocked';
-	if (instance.isNotResponding) return 'Error';
-	return 'Alive';
-}
-</script>
-
-<style lang="scss" scoped>
-.taeiyria {
-	> .query {
-		background: var(--bg);
-		margin-bottom: 16px;
-	}
-}
-
-.dqokceoi {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
-	grid-gap: 12px;
-
-	> .instance:hover {
-		text-decoration: none;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
deleted file mode 100644
index 0ed692c5c5..0000000000
--- a/packages/client/src/pages/about.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-<MkStickyContainer>
-	<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 })` }">
-				<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>
-
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.description }}</template>
-				<template #value><div v-html="$instance.description"></div></template>
-			</MkKeyValue>
-
-			<FormSection>
-				<MkKeyValue class="_formBlock" :copy="version">
-					<template #key>Misskey</template>
-					<template #value>{{ version }}</template>
-				</MkKeyValue>
-				<div class="_formBlock" v-html="i18n.t('poweredByMisskeyDescription', { name: $instance.name ?? host })">
-				</div>
-				<FormLink to="/about-misskey">{{ i18n.ts.aboutMisskey }}</FormLink>
-			</FormSection>
-
-			<FormSection>
-				<FormSplit>
-					<MkKeyValue class="_formBlock">
-						<template #key>{{ i18n.ts.administrator }}</template>
-						<template #value>{{ $instance.maintainerName }}</template>
-					</MkKeyValue>
-					<MkKeyValue class="_formBlock">
-						<template #key>{{ i18n.ts.contact }}</template>
-						<template #value>{{ $instance.maintainerEmail }}</template>
-					</MkKeyValue>
-				</FormSplit>
-				<FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" class="_formBlock" external>{{ i18n.ts.tos }}</FormLink>
-			</FormSection>
-
-			<FormSuspense :p="initStats">
-				<FormSection>
-					<template #label>{{ i18n.ts.statistics }}</template>
-					<FormSplit>
-						<MkKeyValue class="_formBlock">
-							<template #key>{{ i18n.ts.users }}</template>
-							<template #value>{{ number(stats.originalUsersCount) }}</template>
-						</MkKeyValue>
-						<MkKeyValue class="_formBlock">
-							<template #key>{{ i18n.ts.notes }}</template>
-							<template #value>{{ number(stats.originalNotesCount) }}</template>
-						</MkKeyValue>
-					</FormSplit>
-				</FormSection>
-			</FormSuspense>
-
-			<FormSection>
-				<template #label>Well-known resources</template>
-				<div class="_formLinks">
-					<FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink>
-					<FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink>
-					<FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink>
-					<FormLink :to="`/robots.txt`" external>robots.txt</FormLink>
-					<FormLink :to="`/manifest.json`" external>manifest.json</FormLink>
-				</div>
-			</FormSection>
-		</div>
-	</MkSpacer>
-	<MkSpacer v-else-if="tab === 'emojis'" :content-max="1000" :margin-min="20">
-		<XEmojis/>
-	</MkSpacer>
-	<MkSpacer v-else-if="tab === 'federation'" :content-max="1000" :margin-min="20">
-		<XFederation/>
-	</MkSpacer>
-	<MkSpacer v-else-if="tab === 'charts'" :content-max="1000" :margin-min="20">
-		<MkInstanceStats :chart-limit="500" :detailed="true"/>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed } from 'vue';
-import XEmojis from './about.emojis.vue';
-import XFederation from './about.federation.vue';
-import { version, instanceName, host } from '@/config';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormSplit from '@/components/form/split.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import MkInstanceStats from '@/components/MkInstanceStats.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const props = withDefaults(defineProps<{
-	initialTab?: string;
-}>(), {
-	initialTab: 'overview',
-});
-
-let stats = $ref(null);
-let tab = $ref(props.initialTab);
-
-const initStats = () => os.api('stats', {
-}).then((res) => {
-	stats = res;
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => [{
-	key: 'overview',
-	title: i18n.ts.overview,
-}, {
-	key: 'emojis',
-	title: i18n.ts.customEmojis,
-	icon: 'ti ti-mood-happy',
-}, {
-	key: 'federation',
-	title: i18n.ts.federation,
-	icon: 'ti ti-whirl',
-}, {
-	key: 'charts',
-	title: i18n.ts.charts,
-	icon: 'ti ti-chart-line',
-}]);
-
-definePageMetadata(computed(() => ({
-	title: i18n.ts.instanceInfo,
-	icon: 'ti ti-info-circle',
-})));
-</script>
-
-<style lang="scss" scoped>
-.fwhjspax {
-	text-align: center;
-	border-radius: 10px;
-	overflow: clip;
-	background-size: cover;
-	background-position: center center;
-
-	> .content {
-		overflow: hidden;
-
-		> .icon {
-			display: block;
-			margin: 16px auto 0 auto;
-			height: 64px;
-			border-radius: 8px;
-		}
-
-		> .name {
-			display: block;
-			padding: 16px;
-			color: #fff;
-			text-shadow: 0 0 8px #000;
-			background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
deleted file mode 100644
index a11249e75d..0000000000
--- a/packages/client/src/pages/admin-file.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer v-if="file" :content-max="600" :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"/>
-			</a>
-			<div class="_formBlock">
-				<MkKeyValue :copy="file.type" oneline style="margin: 1em 0;">
-					<template #key>MIME Type</template>
-					<template #value><span class="_monospace">{{ file.type }}</span></template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>Size</template>
-					<template #value><span class="_monospace">{{ bytes(file.size) }}</span></template>
-				</MkKeyValue>
-				<MkKeyValue :copy="file.id" oneline style="margin: 1em 0;">
-					<template #key>ID</template>
-					<template #value><span class="_monospace">{{ file.id }}</span></template>
-				</MkKeyValue>
-				<MkKeyValue :copy="file.md5" oneline style="margin: 1em 0;">
-					<template #key>MD5</template>
-					<template #value><span class="_monospace">{{ file.md5 }}</span></template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ i18n.ts.createdAt }}</template>
-					<template #value><span class="_monospace"><MkTime :time="file.createdAt" mode="detail" style="display: block;"/></span></template>
-				</MkKeyValue>
-			</div>
-			<MkA v-if="file.user" class="user" :to="`/user-info/${file.user.id}`">
-				<MkUserCardMini :user="file.user"/>
-			</MkA>
-			<div class="_formBlock">
-				<MkSwitch v-model="isSensitive" @update:model-value="toggleIsSensitive">NSFW</MkSwitch>
-			</div>
-
-			<div class="_formBlock">
-				<MkButton danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
-			</div>
-		</div>
-		<div v-else-if="tab === 'ip' && info" class="_formRoot">
-			<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
-			<MkKeyValue v-if="info.requestIp" class="_formBlock _monospace" :copy="info.requestIp" oneline>
-				<template #key>IP</template>
-				<template #value>{{ info.requestIp }}</template>
-			</MkKeyValue>
-			<FormSection v-if="info.requestHeaders">
-				<template #label>Headers</template>
-				<MkKeyValue v-for="(v, k) in info.requestHeaders" :key="k" class="_formBlock _monospace">
-					<template #key>{{ k }}</template>
-					<template #value>{{ v }}</template>
-				</MkKeyValue>
-			</FormSection>
-		</div>
-		<div v-else-if="tab === 'raw'" class="_formRoot">
-			<MkObjectView v-if="info" tall :value="info">
-			</MkObjectView>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkObjectView from '@/components/MkObjectView.vue';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import FormSection from '@/components/form/section.vue';
-import MkUserCardMini from '@/components/MkUserCardMini.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import bytes from '@/filters/bytes';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { acct } from '@/filters/user';
-import { iAmAdmin, iAmModerator } from '@/account';
-
-let tab = $ref('overview');
-let file: any = $ref(null);
-let info: any = $ref(null);
-let isSensitive: boolean = $ref(false);
-
-const props = defineProps<{
-	fileId: string,
-}>();
-
-async function fetch() {
-	file = await os.api('drive/files/show', { fileId: props.fileId });
-	info = await os.api('admin/drive/show-file', { fileId: props.fileId });
-	isSensitive = file.isSensitive;
-}
-
-fetch();
-
-async function del() {
-	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: file.name }),
-	});
-	if (canceled) return;
-
-	os.apiWithDialog('drive/files/delete', {
-		fileId: file.id,
-	});
-}
-
-async function toggleIsSensitive(v) {
-	await os.api('drive/files/update', { fileId: props.fileId, isSensitive: v });
-	isSensitive = v;
-}
-
-const headerActions = $computed(() => [{
-	text: i18n.ts.openInNewTab,
-	icon: 'ti ti-external-link',
-	handler: () => {
-		window.open(file.url, '_blank');
-	},
-}]);
-
-const headerTabs = $computed(() => [{
-	key: 'overview',
-	title: i18n.ts.overview,
-	icon: 'ti ti-info-circle',
-}, iAmModerator ? {
-	key: 'ip',
-	title: 'IP',
-	icon: 'ti ti-password',
-} : null, {
-	key: 'raw',
-	title: 'Raw data',
-	icon: 'ti ti-code',
-}]);
-
-definePageMetadata(computed(() => ({
-	title: file ? i18n.ts.file + ': ' + file.name : i18n.ts.file,
-	icon: 'ti ti-file',
-})));
-</script>
-
-<style lang="scss" scoped>
-.cxqhhsmd {
-	> .thumbnail {
-		display: block;
-
-		> .thumbnail {
-			height: 300px;
-			max-width: 100%;
-		}
-	}
-
-	> .user {
-		&:hover {
-			text-decoration: none;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/admin/_header_.vue b/packages/client/src/pages/admin/_header_.vue
deleted file mode 100644
index bdb41b2d2c..0000000000
--- a/packages/client/src/pages/admin/_header_.vue
+++ /dev/null
@@ -1,292 +0,0 @@
-<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" :ref="(el) => tabRefs[tab.key] = el" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
-				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
-				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
-			</button>
-			<div ref="tabHighlightEl" class="highlight"></div>
-		</div>
-	</template>
-	<div class="buttons right">
-		<template v-if="actions">
-			<template v-for="action in actions">
-				<MkButton v-if="action.asFullButton" class="fullButton" primary @click.stop="action.handler"><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
-				<button v-else v-tooltip.noDelay="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
-			</template>
-		</template>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, inject, watch, nextTick } from 'vue';
-import tinycolor from 'tinycolor2';
-import { popupMenu } from '@/os';
-import { url } from '@/config';
-import { scrollToTop } from '@/scripts/scroll';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
-import { globalEvents } from '@/events';
-import { injectPageMetadata } from '@/scripts/page-metadata';
-
-type Tab = {
-	key?: string | null;
-	title: string;
-	icon?: string;
-	iconOnly?: boolean;
-	onClick?: (ev: MouseEvent) => void;
-};
-
-const props = defineProps<{
-	tabs?: Tab[];
-	tab?: string;
-	actions?: {
-		text: string;
-		icon: string;
-		asFullButton?: boolean;
-		handler: (ev: MouseEvent) => void;
-	}[];
-	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(() => {
-	return props.tabs && props.tabs.length > 0;
-});
-
-const showTabsPopup = (ev: MouseEvent) => {
-	if (!hasTabs.value) return;
-	ev.preventDefault();
-	ev.stopPropagation();
-	const menu = props.tabs.map(tab => ({
-		text: tab.title,
-		icon: tab.icon,
-		active: tab.key != null && tab.key === props.tab,
-		action: (ev) => {
-			onTabClick(tab, ev);
-		},
-	}));
-	popupMenu(menu, ev.currentTarget ?? ev.target);
-};
-
-const preventDrag = (ev: TouchEvent) => {
-	ev.stopPropagation();
-};
-
-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) {
-		ev.preventDefault();
-		ev.stopPropagation();
-		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);
-	tinyBg.setAlpha(0.85);
-	bg.value = tinyBg.toRgbString();
-};
-
-onMounted(() => {
-	calcBg();
-	globalEvents.on('themeChanged', calcBg);
-
-	watch(() => [props.tab, props.tabs], () => {
-		nextTick(() => {
-			const tabEl = tabRefs[props.tab];
-			if (tabEl && tabHighlightEl) {
-				// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
-				// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
-				const parentRect = tabEl.parentElement.getBoundingClientRect();
-				const rect = tabEl.getBoundingClientRect();
-				tabHighlightEl.style.width = rect.width + 'px';
-				tabHighlightEl.style.left = (rect.left - parentRect.left) + 'px';
-			}
-		});
-	}, {
-		immediate: true,
-	});
-});
-
-onUnmounted(() => {
-	globalEvents.off('themeChanged', calcBg);
-});
-</script>
-
-<style lang="scss" scoped>
-.fdidabkc {
-	--height: 60px;
-	display: flex;
-	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;
-			width: 16px;
-			text-align: center;
-		}
-
-		> .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 {
-		position: relative;
-		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;
-			}
-
-			> .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/abuses.vue b/packages/client/src/pages/admin/abuses.vue
deleted file mode 100644
index 973ec871ab..0000000000
--- a/packages/client/src/pages/admin/abuses.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-<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>{{ i18n.ts.state }}</template>
-							<option value="all">{{ i18n.ts.all }}</option>
-							<option value="unresolved">{{ i18n.ts.unresolved }}</option>
-							<option value="resolved">{{ i18n.ts.resolved }}</option>
-						</MkSelect>
-						<MkSelect v-model="targetUserOrigin" style="margin: 0; flex: 1;">
-							<template #label>{{ i18n.ts.reporteeOrigin }}</template>
-							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkSelect>
-						<MkSelect v-model="reporterOrigin" style="margin: 0; flex: 1;">
-							<template #label>{{ i18n.ts.reporterOrigin }}</template>
-							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkSelect>
-					</div>
-					<!-- TODO
-			<div class="inputs" style="display: flex; padding-top: 1.2em;">
-				<MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" :spellcheck="false">
-					<span>{{ i18n.ts.username }}</span>
-				</MkInput>
-				<MkInput v-model="searchHost" style="margin: 0; flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params().origin === 'local'">
-					<span>{{ i18n.ts.host }}</span>
-				</MkInput>
-			</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>
-				</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/MkPagination.vue';
-import XAbuseReport from '@/components/MkAbuseReport.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let reports = $ref<InstanceType<typeof MkPagination>>();
-
-let state = $ref('unresolved');
-let reporterOrigin = $ref('combined');
-let targetUserOrigin = $ref('combined');
-let searchUsername = $ref('');
-let searchHost = $ref('');
-
-const pagination = {
-	endpoint: 'admin/abuse-user-reports' as const,
-	limit: 10,
-	params: computed(() => ({
-		state,
-		reporterOrigin,
-		targetUserOrigin,
-	})),
-};
-
-function resolved(reportId) {
-	reports.removeItem(item => item.id === reportId);
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.abuseReports,
-	icon: 'ti ti-exclamation-circle',
-});
-</script>
-
-<style lang="scss" scoped>
-.lcixvhis {
-	margin: var(--margin);
-}
-</style>
diff --git a/packages/client/src/pages/admin/ads.vue b/packages/client/src/pages/admin/ads.vue
deleted file mode 100644
index 2ec926c65c..0000000000
--- a/packages/client/src/pages/admin/ads.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-<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>
-				<MkRadio v-model="ad.priority" value="middle">{{ i18n.ts.middle }}</MkRadio>
-				<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="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-					<MkButton class="button" inline danger @click="remove(ad)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
-				</div>
-			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import XHeader from './_header_.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormSplit from '@/components/form/split.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let ads: any[] = $ref([]);
-
-os.api('admin/ad/list').then(adsResponse => {
-	ads = adsResponse;
-});
-
-function add() {
-	ads.unshift({
-		id: null,
-		memo: '',
-		place: 'square',
-		priority: 'middle',
-		ratio: 1,
-		url: '',
-		imageUrl: null,
-		expiresAt: null,
-	});
-}
-
-function remove(ad) {
-	os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: ad.url }),
-	}).then(({ canceled }) => {
-		if (canceled) return;
-		ads = ads.filter(x => x !== ad);
-		os.apiWithDialog('admin/ad/delete', {
-			id: ad.id,
-		});
-	});
-}
-
-function save(ad) {
-	if (ad.id == null) {
-		os.apiWithDialog('admin/ad/create', {
-			...ad,
-			expiresAt: new Date(ad.expiresAt).getTime(),
-		});
-	} else {
-		os.apiWithDialog('admin/ad/update', {
-			...ad,
-			expiresAt: new Date(ad.expiresAt).getTime(),
-		});
-	}
-}
-
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ti ti-plus',
-	text: i18n.ts.add,
-	handler: add,
-}]);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.ads,
-	icon: 'ti ti-ad',
-});
-</script>
-
-<style lang="scss" scoped>
-.uqshojas {
-	> .ad {
-		padding: 32px;
-
-		&:not(:last-child) {
-			margin-bottom: var(--margin);
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/admin/announcements.vue b/packages/client/src/pages/admin/announcements.vue
deleted file mode 100644
index 607ad8aa02..0000000000
--- a/packages/client/src/pages/admin/announcements.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-<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="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-						<MkButton class="button" inline @click="remove(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
-					</div>
-				</div>
-			</section>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import XHeader from './_header_.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let announcements: any[] = $ref([]);
-
-os.api('admin/announcements/list').then(announcementResponse => {
-	announcements = announcementResponse;
-});
-
-function add() {
-	announcements.unshift({
-		id: null,
-		title: '',
-		text: '',
-		imageUrl: null,
-	});
-}
-
-function remove(announcement) {
-	os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: announcement.title }),
-	}).then(({ canceled }) => {
-		if (canceled) return;
-		announcements = announcements.filter(x => x !== announcement);
-		os.api('admin/announcements/delete', announcement);
-	});
-}
-
-function save(announcement) {
-	if (announcement.id == null) {
-		os.api('admin/announcements/create', announcement).then(() => {
-			os.alert({
-				type: 'success',
-				text: i18n.ts.saved,
-			});
-		}).catch(err => {
-			os.alert({
-				type: 'error',
-				text: err,
-			});
-		});
-	} else {
-		os.api('admin/announcements/update', announcement).then(() => {
-			os.alert({
-				type: 'success',
-				text: i18n.ts.saved,
-			});
-		}).catch(err => {
-			os.alert({
-				type: 'error',
-				text: err,
-			});
-		});
-	}
-}
-
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ti ti-plus',
-	text: i18n.ts.add,
-	handler: add,
-}]);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.announcements,
-	icon: 'ti ti-speakerphone',
-});
-</script>
-
-<style lang="scss" scoped>
-.ztgjmzrw {
-	margin: var(--margin);
-}
-</style>
diff --git a/packages/client/src/pages/admin/bot-protection.vue b/packages/client/src/pages/admin/bot-protection.vue
deleted file mode 100644
index d03961cf95..0000000000
--- a/packages/client/src/pages/admin/bot-protection.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<template>
-<div>
-	<FormSuspense :p="init">
-		<div class="_formRoot">
-			<FormRadios v-model="provider" class="_formBlock">
-				<option :value="null">{{ i18n.ts.none }} ({{ i18n.ts.notRecommended }})</option>
-				<option value="hcaptcha">hCaptcha</option>
-				<option value="recaptcha">reCAPTCHA</option>
-				<option value="turnstile">Turnstile</option>
-			</FormRadios>
-
-			<template v-if="provider === 'hcaptcha'">
-				<FormInput v-model="hcaptchaSiteKey" class="_formBlock">
-					<template #prefix><i class="ti ti-key"></i></template>
-					<template #label>{{ i18n.ts.hcaptchaSiteKey }}</template>
-				</FormInput>
-				<FormInput v-model="hcaptchaSecretKey" class="_formBlock">
-					<template #prefix><i class="ti ti-key"></i></template>
-					<template #label>{{ i18n.ts.hcaptchaSecretKey }}</template>
-				</FormInput>
-				<FormSlot class="_formBlock">
-					<template #label>{{ i18n.ts.preview }}</template>
-					<MkCaptcha provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
-				</FormSlot>
-			</template>
-			<template v-else-if="provider === 'recaptcha'">
-				<FormInput v-model="recaptchaSiteKey" class="_formBlock">
-					<template #prefix><i class="ti ti-key"></i></template>
-					<template #label>{{ i18n.ts.recaptchaSiteKey }}</template>
-				</FormInput>
-				<FormInput v-model="recaptchaSecretKey" class="_formBlock">
-					<template #prefix><i class="ti ti-key"></i></template>
-					<template #label>{{ i18n.ts.recaptchaSecretKey }}</template>
-				</FormInput>
-				<FormSlot v-if="recaptchaSiteKey" class="_formBlock">
-					<template #label>{{ i18n.ts.preview }}</template>
-					<MkCaptcha provider="recaptcha" :sitekey="recaptchaSiteKey"/>
-				</FormSlot>
-			</template>
-			<template v-else-if="provider === 'turnstile'">
-				<FormInput v-model="turnstileSiteKey" class="_formBlock">
-					<template #prefix><i class="ti ti-key"></i></template>
-					<template #label>{{ i18n.ts.turnstileSiteKey }}</template>
-				</FormInput>
-				<FormInput v-model="turnstileSecretKey" class="_formBlock">
-					<template #prefix><i class="ti ti-key"></i></template>
-					<template #label>{{ i18n.ts.turnstileSecretKey }}</template>
-				</FormInput>
-				<FormSlot class="_formBlock">
-					<template #label>{{ i18n.ts.preview }}</template>
-					<MkCaptcha provider="turnstile" :sitekey="turnstileSiteKey || '1x00000000000000000000AA'"/>
-				</FormSlot>
-			</template>
-
-			<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
-		</div>
-	</FormSuspense>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormSlot from '@/components/form/slot.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-
-const MkCaptcha = defineAsyncComponent(() => import('@/components/MkCaptcha.vue'));
-
-let provider = $ref(null);
-let hcaptchaSiteKey: string | null = $ref(null);
-let hcaptchaSecretKey: string | null = $ref(null);
-let recaptchaSiteKey: string | null = $ref(null);
-let recaptchaSecretKey: string | null = $ref(null);
-let turnstileSiteKey: string | null = $ref(null);
-let turnstileSecretKey: string | null = $ref(null);
-
-async function init() {
-	const meta = await os.api('admin/meta');
-	hcaptchaSiteKey = meta.hcaptchaSiteKey;
-	hcaptchaSecretKey = meta.hcaptchaSecretKey;
-	recaptchaSiteKey = meta.recaptchaSiteKey;
-	recaptchaSecretKey = meta.recaptchaSecretKey;
-	turnstileSiteKey = meta.turnstileSiteKey;
-	turnstileSecretKey = meta.turnstileSecretKey;
-
-	provider = meta.enableHcaptcha ? 'hcaptcha' : meta.enableRecaptcha ? 'recaptcha' : meta.enableTurnstile ? 'turnstile' : null;
-}
-
-function save() {
-	os.apiWithDialog('admin/update-meta', {
-		enableHcaptcha: provider === 'hcaptcha',
-		hcaptchaSiteKey,
-		hcaptchaSecretKey,
-		enableRecaptcha: provider === 'recaptcha',
-		recaptchaSiteKey,
-		recaptchaSecretKey,
-		enableTurnstile: provider === 'turnstile',
-		turnstileSiteKey,
-		turnstileSecretKey,
-	}).then(() => {
-		fetchInstance();
-	});
-}
-</script>
diff --git a/packages/client/src/pages/admin/database.vue b/packages/client/src/pages/admin/database.vue
deleted file mode 100644
index 5a0d3d5e51..0000000000
--- a/packages/client/src/pages/admin/database.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<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>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import * as os from '@/os';
-import bytes from '@/filters/bytes';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const databasePromiseFactory = () => os.api('admin/get-table-stats').then(res => Object.entries(res).sort((a, b) => b[1].size - a[1].size));
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.database,
-	icon: 'ti ti-database',
-});
-</script>
diff --git a/packages/client/src/pages/admin/email-settings.vue b/packages/client/src/pages/admin/email-settings.vue
deleted file mode 100644
index 6c9dee1704..0000000000
--- a/packages/client/src/pages/admin/email-settings.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<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">
-				<FormSwitch v-model="enableEmail" class="_formBlock">
-					<template #label>{{ i18n.ts.enableEmail }} ({{ i18n.ts.recommended }})</template>
-					<template #caption>{{ i18n.ts.emailConfigInfo }}</template>
-				</FormSwitch>
-
-				<template v-if="enableEmail">
-					<FormInput v-model="email" type="email" class="_formBlock">
-						<template #label>{{ i18n.ts.emailAddress }}</template>
-					</FormInput>
-
-					<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/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormSection from '@/components/form/section.vue';
-import * as os from '@/os';
-import { fetchInstance, instance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let enableEmail: boolean = $ref(false);
-let email: any = $ref(null);
-let smtpSecure: boolean = $ref(false);
-let smtpHost: string = $ref('');
-let smtpPort: number = $ref(0);
-let smtpUser: string = $ref('');
-let smtpPass: string = $ref('');
-
-async function init() {
-	const meta = await os.api('admin/meta');
-	enableEmail = meta.enableEmail;
-	email = meta.email;
-	smtpSecure = meta.smtpSecure;
-	smtpHost = meta.smtpHost;
-	smtpPort = meta.smtpPort;
-	smtpUser = meta.smtpUser;
-	smtpPass = meta.smtpPass;
-}
-
-async function testEmail() {
-	const { canceled, result: destination } = await os.inputText({
-		title: i18n.ts.destination,
-		type: 'email',
-		placeholder: instance.maintainerEmail,
-	});
-	if (canceled) return;
-	os.apiWithDialog('admin/send-email', {
-		to: destination,
-		subject: 'Test email',
-		text: 'Yo',
-	});
-}
-
-function save() {
-	os.apiWithDialog('admin/update-meta', {
-		enableEmail,
-		email,
-		smtpSecure,
-		smtpHost,
-		smtpPort,
-		smtpUser,
-		smtpPass,
-	}).then(() => {
-		fetchInstance();
-	});
-}
-
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	text: i18n.ts.testEmail,
-	handler: testEmail,
-}, {
-	asFullButton: true,
-	icon: 'ti ti-check',
-	text: i18n.ts.save,
-	handler: save,
-}]);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.emailServer,
-	icon: 'ti ti-mail',
-});
-</script>
diff --git a/packages/client/src/pages/admin/emoji-edit-dialog.vue b/packages/client/src/pages/admin/emoji-edit-dialog.vue
deleted file mode 100644
index bd601cb1de..0000000000
--- a/packages/client/src/pages/admin/emoji-edit-dialog.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<template>
-<XModalWindow
-	ref="dialog"
-	:width="370"
-	:with-ok-button="true"
-	@close="$refs.dialog.close()"
-	@closed="$emit('closed')"
-	@ok="ok()"
->
-	<template #header>:{{ emoji.name }}:</template>
-
-	<div class="_monolithic_">
-		<div class="yigymqpb _section">
-			<img :src="emoji.url" class="img"/>
-			<MkInput v-model="name" class="_formBlock">
-				<template #label>{{ i18n.ts.name }}</template>
-			</MkInput>
-			<MkInput v-model="category" class="_formBlock" :datalist="categories">
-				<template #label>{{ i18n.ts.category }}</template>
-			</MkInput>
-			<MkInput v-model="aliases" class="_formBlock">
-				<template #label>{{ i18n.ts.tags }}</template>
-				<template #caption>{{ i18n.ts.setMultipleBySeparatingWithSpace }}</template>
-			</MkInput>
-			<MkButton danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
-		</div>
-	</div>
-</XModalWindow>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import XModalWindow from '@/components/MkModalWindow.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import * as os from '@/os';
-import { unique } from '@/scripts/array';
-import { i18n } from '@/i18n';
-import { emojiCategories } from '@/instance';
-
-const props = defineProps<{
-	emoji: any,
-}>();
-
-let dialog = $ref(null);
-let name: string = $ref(props.emoji.name);
-let category: string = $ref(props.emoji.category);
-let aliases: string = $ref(props.emoji.aliases.join(' '));
-let categories: string[] = $ref(emojiCategories);
-
-const emit = defineEmits<{
-	(ev: 'done', v: { deleted?: boolean, updated?: any }): void,
-	(ev: 'closed'): void
-}>();
-
-function ok() {
-	update();
-}
-
-async function update() {
-	await os.apiWithDialog('admin/emoji/update', {
-		id: props.emoji.id,
-		name,
-		category,
-		aliases: aliases.split(' '),
-	});
-
-	emit('done', {
-		updated: {
-			id: props.emoji.id,
-			name,
-			category,
-			aliases: aliases.split(' '),
-		},
-	});
-
-	dialog.close();
-}
-
-async function del() {
-	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: name }),
-	});
-	if (canceled) return;
-
-	os.api('admin/emoji/delete', {
-		id: props.emoji.id,
-	}).then(() => {
-		emit('done', {
-			deleted: true,
-		});
-		dialog.close();
-	});
-}
-</script>
-
-<style lang="scss" scoped>
-.yigymqpb {
-	> .img {
-		display: block;
-		height: 64px;
-		margin: 0 auto;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
deleted file mode 100644
index 14c8466d73..0000000000
--- a/packages/client/src/pages/admin/emojis.vue
+++ /dev/null
@@ -1,398 +0,0 @@
-<template>
-<div>
-	<MkStickyContainer>
-		<template #header><XHeader v-model:tab="tab" :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="ti ti-search"></i></template>
-						<template #label>{{ i18n.ts.search }}</template>
-					</MkInput>
-					<MkSwitch v-model="selectMode" style="margin: 8px 0;">
-						<template #label>Select mode</template>
-					</MkSwitch>
-					<div v-if="selectMode" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-						<MkButton inline @click="selectAll">Select all</MkButton>
-						<MkButton inline @click="setCategoryBulk">Set category</MkButton>
-						<MkButton inline @click="addTagBulk">Add tag</MkButton>
-						<MkButton inline @click="removeTagBulk">Remove tag</MkButton>
-						<MkButton inline @click="setTagBulk">Set tag</MkButton>
-						<MkButton inline danger @click="delBulk">Delete</MkButton>
-					</div>
-					<MkPagination ref="emojisPaginationComponent" :pagination="pagination">
-						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
-						<template #default="{items}">
-							<div class="ldhfsamy">
-								<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
-									<img :src="emoji.url" class="img" :alt="emoji.name"/>
-									<div class="body">
-										<div class="name _monospace">{{ emoji.name }}</div>
-										<div class="info">{{ emoji.category }}</div>
-									</div>
-								</button>
-							</div>
-						</template>
-					</MkPagination>
-				</div>
-
-				<div v-else-if="tab === 'remote'" class="remote">
-					<FormSplit>
-						<MkInput v-model="queryRemote" :debounce="true" type="search">
-							<template #prefix><i class="ti ti-search"></i></template>
-							<template #label>{{ i18n.ts.search }}</template>
-						</MkInput>
-						<MkInput v-model="host" :debounce="true">
-							<template #label>{{ i18n.ts.host }}</template>
-						</MkInput>
-					</FormSplit>
-					<MkPagination :pagination="remotePagination">
-						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
-						<template #default="{items}">
-							<div class="ldhfsamy">
-								<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
-									<img :src="emoji.url" class="img" :alt="emoji.name"/>
-									<div class="body">
-										<div class="name _monospace">{{ emoji.name }}</div>
-										<div class="info">{{ emoji.host }}</div>
-									</div>
-								</div>
-							</div>
-						</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/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkTab from '@/components/MkTab.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import FormSplit from '@/components/form/split.vue';
-import { selectFile, selectFiles } from '@/scripts/select-file';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const emojisPaginationComponent = ref<InstanceType<typeof MkPagination>>();
-
-const tab = ref('local');
-const query = ref(null);
-const queryRemote = ref(null);
-const host = ref(null);
-const selectMode = ref(false);
-const selectedEmojis = ref<string[]>([]);
-
-const pagination = {
-	endpoint: 'admin/emoji/list' as const,
-	limit: 30,
-	params: computed(() => ({
-		query: (query.value && query.value !== '') ? query.value : null,
-	})),
-};
-
-const remotePagination = {
-	endpoint: 'admin/emoji/list-remote' as const,
-	limit: 30,
-	params: computed(() => ({
-		query: (queryRemote.value && queryRemote.value !== '') ? queryRemote.value : null,
-		host: (host.value && host.value !== '') ? host.value : null,
-	})),
-};
-
-const selectAll = () => {
-	if (selectedEmojis.value.length > 0) {
-		selectedEmojis.value = [];
-	} else {
-		selectedEmojis.value = emojisPaginationComponent.value.items.map(item => item.id);
-	}
-};
-
-const toggleSelect = (emoji) => {
-	if (selectedEmojis.value.includes(emoji.id)) {
-		selectedEmojis.value = selectedEmojis.value.filter(x => x !== emoji.id);
-	} else {
-		selectedEmojis.value.push(emoji.id);
-	}
-};
-
-const add = async (ev: MouseEvent) => {
-	const files = await selectFiles(ev.currentTarget ?? ev.target, null);
-
-	const promise = Promise.all(files.map(file => os.api('admin/emoji/add', {
-		fileId: file.id,
-	})));
-	promise.then(() => {
-		emojisPaginationComponent.value.reload();
-	});
-	os.promiseDialog(promise);
-};
-
-const edit = (emoji) => {
-	os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), {
-		emoji: emoji,
-	}, {
-		done: result => {
-			if (result.updated) {
-				emojisPaginationComponent.value.updateItem(result.updated.id, (oldEmoji: any) => ({
-					...oldEmoji,
-					...result.updated,
-				}));
-			} else if (result.deleted) {
-				emojisPaginationComponent.value.removeItem((item) => item.id === emoji.id);
-			}
-		},
-	}, 'closed');
-};
-
-const im = (emoji) => {
-	os.apiWithDialog('admin/emoji/copy', {
-		emojiId: emoji.id,
-	});
-};
-
-const remoteMenu = (emoji, ev: MouseEvent) => {
-	os.popupMenu([{
-		type: 'label',
-		text: ':' + emoji.name + ':',
-	}, {
-		text: i18n.ts.import,
-		icon: 'ti ti-plus',
-		action: () => { im(emoji); },
-	}], ev.currentTarget ?? ev.target);
-};
-
-const menu = (ev: MouseEvent) => {
-	os.popupMenu([{
-		icon: 'ti ti-download',
-		text: i18n.ts.export,
-		action: async () => {
-			os.api('export-custom-emojis', {
-			})
-				.then(() => {
-					os.alert({
-						type: 'info',
-						text: i18n.ts.exportRequested,
-					});
-				}).catch((err) => {
-					os.alert({
-						type: 'error',
-						text: err.message,
-					});
-				});
-		},
-	}, {
-		icon: 'ti ti-upload',
-		text: i18n.ts.import,
-		action: async () => {
-			const file = await selectFile(ev.currentTarget ?? ev.target);
-			os.api('admin/emoji/import-zip', {
-				fileId: file.id,
-			})
-				.then(() => {
-					os.alert({
-						type: 'info',
-						text: i18n.ts.importRequested,
-					});
-				}).catch((err) => {
-					os.alert({
-						type: 'error',
-						text: err.message,
-					});
-				});
-		},
-	}], ev.currentTarget ?? ev.target);
-};
-
-const setCategoryBulk = async () => {
-	const { canceled, result } = await os.inputText({
-		title: 'Category',
-	});
-	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/set-category-bulk', {
-		ids: selectedEmojis.value,
-		category: result,
-	});
-	emojisPaginationComponent.value.reload();
-};
-
-const addTagBulk = async () => {
-	const { canceled, result } = await os.inputText({
-		title: 'Tag',
-	});
-	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/add-aliases-bulk', {
-		ids: selectedEmojis.value,
-		aliases: result.split(' '),
-	});
-	emojisPaginationComponent.value.reload();
-};
-
-const removeTagBulk = async () => {
-	const { canceled, result } = await os.inputText({
-		title: 'Tag',
-	});
-	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/remove-aliases-bulk', {
-		ids: selectedEmojis.value,
-		aliases: result.split(' '),
-	});
-	emojisPaginationComponent.value.reload();
-};
-
-const setTagBulk = async () => {
-	const { canceled, result } = await os.inputText({
-		title: 'Tag',
-	});
-	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/set-aliases-bulk', {
-		ids: selectedEmojis.value,
-		aliases: result.split(' '),
-	});
-	emojisPaginationComponent.value.reload();
-};
-
-const delBulk = async () => {
-	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.ts.deleteConfirm,
-	});
-	if (canceled) return;
-	await os.apiWithDialog('admin/emoji/delete-bulk', {
-		ids: selectedEmojis.value,
-	});
-	emojisPaginationComponent.value.reload();
-};
-
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ti ti-plus',
-	text: i18n.ts.addEmoji,
-	handler: add,
-}, {
-	icon: 'ti ti-dots',
-	handler: menu,
-}]);
-
-const headerTabs = $computed(() => [{
-	key: 'local',
-	title: i18n.ts.local,
-}, {
-	key: 'remote',
-	title: i18n.ts.remote,
-}]);
-
-definePageMetadata(computed(() => ({
-	title: i18n.ts.customEmojis,
-	icon: 'ti ti-mood-happy',
-})));
-</script>
-
-<style lang="scss" scoped>
-.ogwlenmc {
-	> .local {
-		.empty {
-			margin: var(--margin);
-		}
-		
-		.ldhfsamy {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
-			grid-gap: 12px;
-			margin: var(--margin) 0;
-	
-			> .emoji {
-				display: flex;
-				align-items: center;
-				padding: 11px;
-				text-align: left;
-				border: solid 1px var(--panel);
-
-				&:hover {
-					border-color: var(--inputBorderHover);
-				}
-
-				&.selected {
-					border-color: var(--accent);
-				}
-
-				> .img {
-					width: 42px;
-					height: 42px;
-				}
-
-				> .body {
-					padding: 0 0 0 8px;
-					white-space: nowrap;
-					overflow: hidden;
-
-					> .name {
-						text-overflow: ellipsis;
-						overflow: hidden;
-					}
-
-					> .info {
-						opacity: 0.5;
-						text-overflow: ellipsis;
-						overflow: hidden;
-					}
-				}
-			}
-		}
-	}
-
-	> .remote {
-		.empty {
-			margin: var(--margin);
-		}
-
-		.ldhfsamy {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
-			grid-gap: 12px;
-			margin: var(--margin) 0;
-
-			> .emoji {
-				display: flex;
-				align-items: center;
-				padding: 12px;
-				text-align: left;
-
-				&:hover {
-					color: var(--accent);
-				}
-
-				> .img {
-					width: 32px;
-					height: 32px;
-				}
-
-				> .body {
-					padding: 0 0 0 8px;
-					white-space: nowrap;
-					overflow: hidden;
-
-					> .name {
-						text-overflow: ellipsis;
-						overflow: hidden;
-					}
-
-					> .info {
-						opacity: 0.5;
-						font-size: 90%;
-						text-overflow: ellipsis;
-						overflow: hidden;
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
deleted file mode 100644
index 8ad6bd4fc0..0000000000
--- a/packages/client/src/pages/admin/files.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-<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>{{ i18n.ts.instance }}</template>
-							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkSelect>
-						<MkInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params.origin === 'local'">
-							<template #label>{{ i18n.ts.host }}</template>
-						</MkInput>
-					</div>
-					<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap; padding-top: 1.2em;">
-						<MkInput v-model="userId" :debounce="true" type="search" style="margin: 0; flex: 1;">
-							<template #label>User ID</template>
-						</MkInput>
-						<MkInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
-							<template #label>MIME type</template>
-						</MkInput>
-					</div>
-					<MkFileListForAdmin :pagination="pagination" :view-mode="viewMode"/>
-				</div>
-			</div>
-		</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/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
-import bytes from '@/filters/bytes';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let origin = $ref('local');
-let 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,
-	})),
-};
-
-function clear() {
-	os.confirm({
-		type: 'warning',
-		text: i18n.ts.clearCachedFilesConfirm,
-	}).then(({ canceled }) => {
-		if (canceled) return;
-
-		os.apiWithDialog('admin/drive/clean-remote-files', {});
-	});
-}
-
-function show(file) {
-	os.pageWindow(`/admin/file/${file.id}`);
-}
-
-async function find() {
-	const { canceled, result: q } = await os.inputText({
-		title: i18n.ts.fileIdOrUrl,
-		allowEmpty: false,
-	});
-	if (canceled) return;
-
-	os.api('admin/drive/show-file', q.startsWith('http://') || q.startsWith('https://') ? { url: q.trim() } : { fileId: q.trim() }).then(file => {
-		show(file);
-	}).catch(err => {
-		if (err.code === 'NO_SUCH_FILE') {
-			os.alert({
-				type: 'error',
-				text: i18n.ts.notFound,
-			});
-		}
-	});
-}
-
-const headerActions = $computed(() => [{
-	text: i18n.ts.lookup,
-	icon: 'ti ti-search',
-	handler: find,
-}, {
-	text: i18n.ts.clearCachedFiles,
-	icon: 'ti ti-trash',
-	handler: clear,
-}]);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => ({
-	title: i18n.ts.files,
-	icon: 'ti ti-cloud',
-})));
-</script>
-
-<style lang="scss" scoped>
-.xrmjdkdw {
-	margin: var(--margin);
-}
-</style>
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
deleted file mode 100644
index 6c07a87eeb..0000000000
--- a/packages/client/src/pages/admin/index.vue
+++ /dev/null
@@ -1,316 +0,0 @@
-<template>
-<div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
-	<div v-if="!narrow || currentPage?.route.name == null" class="nav">	
-		<MkSpacer :content-max="700" :margin-min="16">
-			<div class="lxpfedzu">
-				<div class="banner">
-					<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
-				</div>
-
-				<MkInfo v-if="thereIsUnresolvedAbuseReport" warn class="info">{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }} <MkA to="/admin/abuses" class="_link">{{ i18n.ts.check }}</MkA></MkInfo>
-				<MkInfo v-if="noMaintainerInformation" warn class="info">{{ i18n.ts.noMaintainerInformationWarning }} <MkA to="/admin/settings" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
-				<MkInfo v-if="noBotProtection" warn class="info">{{ i18n.ts.noBotProtectionWarning }} <MkA to="/admin/security" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
-				<MkInfo v-if="noEmailServer" warn class="info">{{ i18n.ts.noEmailServerWarning }} <MkA to="/admin/email-settings" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
-
-				<MkSuperMenu :def="menuDef" :grid="currentPage?.route.name == null"></MkSuperMenu>
-			</div>
-		</MkSpacer>
-	</div>
-	<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
-		<RouterView/>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, inject, nextTick, onMounted, onUnmounted, provide, watch } from 'vue';
-import { i18n } from '@/i18n';
-import MkSuperMenu from '@/components/MkSuperMenu.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import { scroll } from '@/scripts/scroll';
-import { instance } from '@/instance';
-import * as os from '@/os';
-import { lookupUser } from '@/scripts/lookup-user';
-import { useRouter } from '@/router';
-import { definePageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-
-const isEmpty = (x: string | null) => x == null || x === '';
-
-const router = useRouter();
-
-const indexInfo = {
-	title: i18n.ts.controlPanel,
-	icon: 'ti ti-settings',
-	hideHeader: true,
-};
-
-provide('shouldOmitHeaderTitle', false);
-
-let INFO = $ref(indexInfo);
-let childInfo = $ref(null);
-let narrow = $ref(false);
-let view = $ref(null);
-let el = $ref(null);
-let pageProps = $ref({});
-let noMaintainerInformation = isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
-let noBotProtection = !instance.disableRegistration && !instance.enableHcaptcha && !instance.enableRecaptcha && !instance.enableTurnstile;
-let noEmailServer = !instance.enableEmail;
-let thereIsUnresolvedAbuseReport = $ref(false);
-let currentPage = $computed(() => router.currentRef.value.child);
-
-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) => {
-	if (entries.length === 0) return;
-	narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
-});
-
-const menuDef = $computed(() => [{
-	title: i18n.ts.quickAction,
-	items: [{
-		type: 'button',
-		icon: 'ti ti-search',
-		text: i18n.ts.lookup,
-		action: lookup,
-	}, ...(instance.disableRegistration ? [{
-		type: 'button',
-		icon: 'ti ti-user',
-		text: i18n.ts.invite,
-		action: invite,
-	}] : [])],
-}, {
-	title: i18n.ts.administration,
-	items: [{
-		icon: 'ti ti-dashboard',
-		text: i18n.ts.dashboard,
-		to: '/admin/overview',
-		active: currentPage?.route.name === 'overview',
-	}, {
-		icon: 'ti ti-users',
-		text: i18n.ts.users,
-		to: '/admin/users',
-		active: currentPage?.route.name === 'users',
-	}, {
-		icon: 'ti ti-mood-happy',
-		text: i18n.ts.customEmojis,
-		to: '/admin/emojis',
-		active: currentPage?.route.name === 'emojis',
-	}, {
-		icon: 'ti ti-whirl',
-		text: i18n.ts.federation,
-		to: '/about#federation',
-		active: currentPage?.route.name === 'federation',
-	}, {
-		icon: 'ti ti-clock-play',
-		text: i18n.ts.jobQueue,
-		to: '/admin/queue',
-		active: currentPage?.route.name === 'queue',
-	}, {
-		icon: 'ti ti-cloud',
-		text: i18n.ts.files,
-		to: '/admin/files',
-		active: currentPage?.route.name === 'files',
-	}, {
-		icon: 'ti ti-speakerphone',
-		text: i18n.ts.announcements,
-		to: '/admin/announcements',
-		active: currentPage?.route.name === 'announcements',
-	}, {
-		icon: 'ti ti-ad',
-		text: i18n.ts.ads,
-		to: '/admin/ads',
-		active: currentPage?.route.name === 'ads',
-	}, {
-		icon: 'ti ti-exclamation-circle',
-		text: i18n.ts.abuseReports,
-		to: '/admin/abuses',
-		active: currentPage?.route.name === 'abuses',
-	}],
-}, {
-	title: i18n.ts.settings,
-	items: [{
-		icon: 'ti ti-settings',
-		text: i18n.ts.general,
-		to: '/admin/settings',
-		active: currentPage?.route.name === 'settings',
-	}, {
-		icon: 'ti ti-mail',
-		text: i18n.ts.emailServer,
-		to: '/admin/email-settings',
-		active: currentPage?.route.name === 'email-settings',
-	}, {
-		icon: 'ti ti-cloud',
-		text: i18n.ts.objectStorage,
-		to: '/admin/object-storage',
-		active: currentPage?.route.name === 'object-storage',
-	}, {
-		icon: 'ti ti-lock',
-		text: i18n.ts.security,
-		to: '/admin/security',
-		active: currentPage?.route.name === 'security',
-	}, {
-		icon: 'ti ti-planet',
-		text: i18n.ts.relays,
-		to: '/admin/relays',
-		active: currentPage?.route.name === 'relays',
-	}, {
-		icon: 'ti ti-share',
-		text: i18n.ts.integration,
-		to: '/admin/integrations',
-		active: currentPage?.route.name === 'integrations',
-	}, {
-		icon: 'ti ti-ban',
-		text: i18n.ts.instanceBlocking,
-		to: '/admin/instance-block',
-		active: currentPage?.route.name === 'instance-block',
-	}, {
-		icon: 'ti ti-ghost',
-		text: i18n.ts.proxyAccount,
-		to: '/admin/proxy-account',
-		active: currentPage?.route.name === 'proxy-account',
-	}, {
-		icon: 'ti ti-adjustments',
-		text: i18n.ts.other,
-		to: '/admin/other-settings',
-		active: currentPage?.route.name === 'other-settings',
-	}],
-}, {
-	title: i18n.ts.info,
-	items: [{
-		icon: 'ti ti-database',
-		text: i18n.ts.database,
-		to: '/admin/database',
-		active: currentPage?.route.name === 'database',
-	}],
-}]);
-
-watch(narrow, () => {
-	if (currentPage?.route.name == null && !narrow) {
-		router.push('/admin/overview');
-	}
-});
-
-onMounted(() => {
-	ro.observe(el);
-
-	narrow = el.offsetWidth < NARROW_THRESHOLD;
-	if (currentPage?.route.name == null && !narrow) {
-		router.push('/admin/overview');
-	}
-});
-
-onUnmounted(() => {
-	ro.disconnect();
-});
-
-provideMetadataReceiver((info) => {
-	if (info == null) {
-		childInfo = null;
-	} else {
-		childInfo = info;
-	}
-});
-
-const invite = () => {
-	os.api('admin/invite').then(x => {
-		os.alert({
-			type: 'info',
-			text: x.code,
-		});
-	}).catch(err => {
-		os.alert({
-			type: 'error',
-			text: err,
-		});
-	});
-};
-
-const lookup = (ev) => {
-	os.popupMenu([{
-		text: i18n.ts.user,
-		icon: 'ti ti-user',
-		action: () => {
-			lookupUser();
-		},
-	}, {
-		text: i18n.ts.note,
-		icon: 'ti ti-pencil',
-		action: () => {
-			alert('TODO');
-		},
-	}, {
-		text: i18n.ts.file,
-		icon: 'ti ti-cloud',
-		action: () => {
-			alert('TODO');
-		},
-	}, {
-		text: i18n.ts.instance,
-		icon: 'ti ti-planet',
-		action: () => {
-			alert('TODO');
-		},
-	}], ev.currentTarget ?? ev.target);
-};
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(INFO);
-
-defineExpose({
-	header: {
-		title: i18n.ts.controlPanel,
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.hiyeyicy {
-	&.wide {
-		display: flex;
-		margin: 0 auto;
-		height: 100%;
-
-		> .nav {
-			width: 32%;
-			max-width: 280px;
-			box-sizing: border-box;
-			border-right: solid 0.5px var(--divider);
-			overflow: auto;
-			height: 100%;
-		}
-
-		> .main {
-			flex: 1;
-			min-width: 0;
-		}
-	}
-
-	> .nav {
-		.lxpfedzu {
-			> .info {
-				margin: 16px 0;
-			}
-
-			> .banner {
-				margin: 16px;
-
-				> .icon {
-					display: block;
-					margin: auto;
-					height: 42px;
-					border-radius: 8px;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/admin/instance-block.vue b/packages/client/src/pages/admin/instance-block.vue
deleted file mode 100644
index 1bdd174de4..0000000000
--- a/packages/client/src/pages/admin/instance-block.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-<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="ti ti-device-floppy"></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/MkButton.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let blockedHosts: string = $ref('');
-
-async function init() {
-	const meta = await os.api('admin/meta');
-	blockedHosts = meta.blockedHosts.join('\n');
-}
-
-function save() {
-	os.apiWithDialog('admin/update-meta', {
-		blockedHosts: blockedHosts.split('\n') || [],
-	}).then(() => {
-		fetchInstance();
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.instanceBlocking,
-	icon: 'ti ti-ban',
-});
-</script>
diff --git a/packages/client/src/pages/admin/integrations.discord.vue b/packages/client/src/pages/admin/integrations.discord.vue
deleted file mode 100644
index 0a69c44c93..0000000000
--- a/packages/client/src/pages/admin/integrations.discord.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-<FormSuspense :p="init">
-	<div class="_formRoot">
-		<FormSwitch v-model="enableDiscordIntegration" class="_formBlock">
-			<template #label>{{ i18n.ts.enable }}</template>
-		</FormSwitch>
-
-		<template v-if="enableDiscordIntegration">
-			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/dc/cb` }}</FormInfo>
-		
-			<FormInput v-model="discordClientId" class="_formBlock">
-				<template #prefix><i class="ti ti-key"></i></template>
-				<template #label>Client ID</template>
-			</FormInput>
-
-			<FormInput v-model="discordClientSecret" class="_formBlock">
-				<template #prefix><i class="ti ti-key"></i></template>
-				<template #label>Client Secret</template>
-			</FormInput>
-		</template>
-
-		<FormButton primary class="_formBlock" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
-	</div>
-</FormSuspense>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-
-let uri: string = $ref('');
-let enableDiscordIntegration: boolean = $ref(false);
-let discordClientId: string | null = $ref(null);
-let discordClientSecret: string | null = $ref(null);
-
-async function init() {
-	const meta = await os.api('admin/meta');
-	uri = meta.uri;
-	enableDiscordIntegration = meta.enableDiscordIntegration;
-	discordClientId = meta.discordClientId;
-	discordClientSecret = meta.discordClientSecret;
-}
-
-function save() {
-	os.apiWithDialog('admin/update-meta', {
-		enableDiscordIntegration,
-		discordClientId,
-		discordClientSecret,
-	}).then(() => {
-		fetchInstance();
-	});
-}
-</script>
diff --git a/packages/client/src/pages/admin/integrations.github.vue b/packages/client/src/pages/admin/integrations.github.vue
deleted file mode 100644
index 66419d5891..0000000000
--- a/packages/client/src/pages/admin/integrations.github.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-<FormSuspense :p="init">
-	<div class="_formRoot">
-		<FormSwitch v-model="enableGithubIntegration" class="_formBlock">
-			<template #label>{{ i18n.ts.enable }}</template>
-		</FormSwitch>
-
-		<template v-if="enableGithubIntegration">
-			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/gh/cb` }}</FormInfo>
-		
-			<FormInput v-model="githubClientId" class="_formBlock">
-				<template #prefix><i class="ti ti-key"></i></template>
-				<template #label>Client ID</template>
-			</FormInput>
-
-			<FormInput v-model="githubClientSecret" class="_formBlock">
-				<template #prefix><i class="ti ti-key"></i></template>
-				<template #label>Client Secret</template>
-			</FormInput>
-		</template>
-
-		<FormButton primary class="_formBlock" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
-	</div>
-</FormSuspense>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-
-let uri: string = $ref('');
-let enableGithubIntegration: boolean = $ref(false);
-let githubClientId: string | null = $ref(null);
-let githubClientSecret: string | null = $ref(null);
-
-async function init() {
-	const meta = await os.api('admin/meta');
-	uri = meta.uri;
-	enableGithubIntegration = meta.enableGithubIntegration;
-	githubClientId = meta.githubClientId;
-	githubClientSecret = meta.githubClientSecret;
-}
-
-function save() {
-	os.apiWithDialog('admin/update-meta', {
-		enableGithubIntegration,
-		githubClientId,
-		githubClientSecret,
-	}).then(() => {
-		fetchInstance();
-	});
-}
-</script>
diff --git a/packages/client/src/pages/admin/integrations.twitter.vue b/packages/client/src/pages/admin/integrations.twitter.vue
deleted file mode 100644
index 1e8d882b9c..0000000000
--- a/packages/client/src/pages/admin/integrations.twitter.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-<FormSuspense :p="init">
-	<div class="_formRoot">
-		<FormSwitch v-model="enableTwitterIntegration" class="_formBlock">
-			<template #label>{{ i18n.ts.enable }}</template>
-		</FormSwitch>
-
-		<template v-if="enableTwitterIntegration">
-			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/tw/cb` }}</FormInfo>
-		
-			<FormInput v-model="twitterConsumerKey" class="_formBlock">
-				<template #prefix><i class="ti ti-key"></i></template>
-				<template #label>Consumer Key</template>
-			</FormInput>
-
-			<FormInput v-model="twitterConsumerSecret" class="_formBlock">
-				<template #prefix><i class="ti ti-key"></i></template>
-				<template #label>Consumer Secret</template>
-			</FormInput>
-		</template>
-
-		<FormButton primary class="_formBlock" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
-	</div>
-</FormSuspense>
-</template>
-
-<script lang="ts" setup>
-import { defineComponent } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-
-let uri: string = $ref('');
-let enableTwitterIntegration: boolean = $ref(false);
-let twitterConsumerKey: string | null = $ref(null);
-let twitterConsumerSecret: string | null = $ref(null);
-
-async function init() {
-	const meta = await os.api('admin/meta');
-	uri = meta.uri;
-	enableTwitterIntegration = meta.enableTwitterIntegration;
-	twitterConsumerKey = meta.twitterConsumerKey;
-	twitterConsumerSecret = meta.twitterConsumerSecret;
-}
-
-function save() {
-	os.apiWithDialog('admin/update-meta', {
-		enableTwitterIntegration,
-		twitterConsumerKey,
-		twitterConsumerSecret,
-	}).then(() => {
-		fetchInstance();
-	});
-}
-</script>
diff --git a/packages/client/src/pages/admin/integrations.vue b/packages/client/src/pages/admin/integrations.vue
deleted file mode 100644
index 9cc35baefd..0000000000
--- a/packages/client/src/pages/admin/integrations.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<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="ti ti-brand-twitter"></i></template>
-			<template #label>Twitter</template>
-			<template #suffix>{{ enableTwitterIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
-			<XTwitter/>
-		</FormFolder>
-		<FormFolder class="_formBlock">
-			<template #icon><i class="ti ti-brand-github"></i></template>
-			<template #label>GitHub</template>
-			<template #suffix>{{ enableGithubIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
-			<XGithub/>
-		</FormFolder>
-		<FormFolder class="_formBlock">
-			<template #icon><i class="ti ti-brand-discord"></i></template>
-			<template #label>Discord</template>
-			<template #suffix>{{ enableDiscordIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
-			<XDiscord/>
-		</FormFolder>
-	</FormSuspense>
-</MkSpacer></MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import 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 { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let enableTwitterIntegration: boolean = $ref(false);
-let enableGithubIntegration: boolean = $ref(false);
-let enableDiscordIntegration: boolean = $ref(false);
-
-async function init() {
-	const meta = await os.api('admin/meta');
-	enableTwitterIntegration = meta.enableTwitterIntegration;
-	enableGithubIntegration = meta.enableGithubIntegration;
-	enableDiscordIntegration = meta.enableDiscordIntegration;
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.integration,
-	icon: 'ti ti-share',
-});
-</script>
diff --git a/packages/client/src/pages/admin/metrics.vue b/packages/client/src/pages/admin/metrics.vue
deleted file mode 100644
index db8e448639..0000000000
--- a/packages/client/src/pages/admin/metrics.vue
+++ /dev/null
@@ -1,472 +0,0 @@
-<template>
-<div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="fas fa-microchip"></i> {{ $ts.cpuAndMemory }}</div>
-	<div class="_debobigegoPanel xhexznfu">
-		<div>
-			<canvas :ref="cpumem"></canvas>
-		</div>
-		<div v-if="serverInfo">
-			<div class="_table">
-				<div class="_row">
-					<div class="_cell"><div class="_label">MEM total</div>{{ bytes(serverInfo.mem.total) }}</div>
-					<div class="_cell"><div class="_label">MEM used</div>{{ bytes(memUsage) }} ({{ (memUsage / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
-					<div class="_cell"><div class="_label">MEM free</div>{{ bytes(serverInfo.mem.total - memUsage) }} ({{ ((serverInfo.mem.total - memUsage) / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-<div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="fas fa-hdd"></i> {{ $ts.disk }}</div>
-	<div class="_debobigegoPanel xhexznfu">
-		<div>
-			<canvas :ref="disk"></canvas>
-		</div>
-		<div v-if="serverInfo">
-			<div class="_table">
-				<div class="_row">
-					<div class="_cell"><div class="_label">Disk total</div>{{ bytes(serverInfo.fs.total) }}</div>
-					<div class="_cell"><div class="_label">Disk used</div>{{ bytes(serverInfo.fs.used) }} ({{ (serverInfo.fs.used / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
-					<div class="_cell"><div class="_label">Disk free</div>{{ bytes(serverInfo.fs.total - serverInfo.fs.used) }} ({{ ((serverInfo.fs.total - serverInfo.fs.used) / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-<div class="_debobigegoItem">
-	<div class="_debobigegoLabel"><i class="fas fa-exchange-alt"></i> {{ $ts.network }}</div>
-	<div class="_debobigegoPanel xhexznfu">
-		<div>
-			<canvas :ref="net"></canvas>
-		</div>
-		<div v-if="serverInfo">
-			<div class="_table">
-				<div class="_row">
-					<div class="_cell"><div class="_label">Interface</div>{{ serverInfo.net.interface }}</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, markRaw } from 'vue';
-import {
-  Chart,
-  ArcElement,
-  LineElement,
-  BarElement,
-  PointElement,
-  BarController,
-  LineController,
-  CategoryScale,
-  LinearScale,
-  Legend,
-  Title,
-  Tooltip,
-  SubTitle,
-} from 'chart.js';
-import MkButton from '@/components/MkButton.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkInput from '@/components/form/input.vue';
-import MkContainer from '@/components/MkContainer.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkwFederation from '../../widgets/federation.vue';
-import { version, url } from '@/config';
-import bytes from '@/filters/bytes';
-import number from '@/filters/number';
-
-Chart.register(
-  ArcElement,
-  LineElement,
-  BarElement,
-  PointElement,
-  BarController,
-  LineController,
-  CategoryScale,
-  LinearScale,
-  Legend,
-  Title,
-  Tooltip,
-  SubTitle,
-);
-
-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})`;
-};
-import * as os from '@/os';
-import { stream } from '@/stream';
-
-export default defineComponent({
-	components: {
-		MkButton,
-		MkSelect,
-		MkInput,
-		MkContainer,
-		MkFolder,
-		MkwFederation,
-	},
-
-	data() {
-		return {
-			version,
-			url,
-			stats: null,
-			serverInfo: null,
-			connection: null,
-			queueConnection: markRaw(stream.useChannel('queueStats')),
-			memUsage: 0,
-			chartCpuMem: null,
-			chartNet: null,
-			jobs: [],
-			logs: [],
-			logLevel: 'all',
-			logDomain: '',
-			modLogs: [],
-			dbInfo: null,
-			overviewHeight: '1fr',
-			queueHeight: '1fr',
-			paused: false,
-		};
-	},
-
-	computed: {
-		gridColor() {
-			// TODO: var(--panel)の色が暗いか明るいかで判定する
-			return this.$store.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
-		},
-	},
-
-	mounted() {
-		this.fetchJobs();
-
-		Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
-
-		os.api('admin/server-info', {}).then(res => {
-			this.serverInfo = res;
-
-			this.connection = markRaw(stream.useChannel('serverStats'));
-			this.connection.on('stats', this.onStats);
-			this.connection.on('statsLog', this.onStatsLog);
-			this.connection.send('requestLog', {
-				id: Math.random().toString().substr(2, 8),
-				length: 150,
-			});
-
-			this.$nextTick(() => {
-				this.queueConnection.send('requestLog', {
-					id: Math.random().toString().substr(2, 8),
-					length: 200,
-				});
-			});
-		});
-	},
-
-	beforeUnmount() {
-		if (this.connection) {
-			this.connection.off('stats', this.onStats);
-			this.connection.off('statsLog', this.onStatsLog);
-			this.connection.dispose();
-		}
-		this.queueConnection.dispose();
-	},
-
-	methods: {
-		cpumem(el) {
-			if (this.chartCpuMem != null) return;
-			this.chartCpuMem = markRaw(new Chart(el, {
-				type: 'line',
-				data: {
-					labels: [],
-					datasets: [{
-						label: 'CPU',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#86b300',
-						backgroundColor: alpha('#86b300', 0.1),
-						data: [],
-					}, {
-						label: 'MEM (active)',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#935dbf',
-						backgroundColor: alpha('#935dbf', 0.02),
-						data: [],
-					}, {
-						label: 'MEM (used)',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#935dbf',
-						borderDash: [5, 5],
-						fill: false,
-						data: [],
-					}],
-				},
-				options: {
-					aspectRatio: 3,
-					layout: {
-						padding: {
-							left: 16,
-							right: 16,
-							top: 16,
-							bottom: 0,
-						},
-					},
-					legend: {
-						position: 'bottom',
-						labels: {
-							boxWidth: 16,
-						},
-					},
-					scales: {
-						x: {
-							gridLines: {
-								display: false,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
-							},
-						},
-						y: {
-							position: 'right',
-							gridLines: {
-								display: true,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
-								max: 100,
-							},
-						},
-					},
-					tooltips: {
-						intersect: false,
-						mode: 'index',
-					},
-				},
-			}));
-		},
-
-		net(el) {
-			if (this.chartNet != null) return;
-			this.chartNet = markRaw(new Chart(el, {
-				type: 'line',
-				data: {
-					labels: [],
-					datasets: [{
-						label: 'In',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#94a029',
-						backgroundColor: alpha('#94a029', 0.1),
-						data: [],
-					}, {
-						label: 'Out',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#ff9156',
-						backgroundColor: alpha('#ff9156', 0.1),
-						data: [],
-					}],
-				},
-				options: {
-					aspectRatio: 3,
-					layout: {
-						padding: {
-							left: 16,
-							right: 16,
-							top: 16,
-							bottom: 0,
-						},
-					},
-					legend: {
-						position: 'bottom',
-						labels: {
-							boxWidth: 16,
-						},
-					},
-					scales: {
-						x: {
-							gridLines: {
-								display: false,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
-							},
-						},
-						y: {
-							position: 'right',
-							gridLines: {
-								display: true,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
-							},
-						},
-					},
-					tooltips: {
-						intersect: false,
-						mode: 'index',
-					},
-				},
-			}));
-		},
-
-		disk(el) {
-			if (this.chartDisk != null) return;
-			this.chartDisk = markRaw(new Chart(el, {
-				type: 'line',
-				data: {
-					labels: [],
-					datasets: [{
-						label: 'Read',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#94a029',
-						backgroundColor: alpha('#94a029', 0.1),
-						data: [],
-					}, {
-						label: 'Write',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderColor: '#ff9156',
-						backgroundColor: alpha('#ff9156', 0.1),
-						data: [],
-					}],
-				},
-				options: {
-					aspectRatio: 3,
-					layout: {
-						padding: {
-							left: 16,
-							right: 16,
-							top: 16,
-							bottom: 0,
-						},
-					},
-					legend: {
-						position: 'bottom',
-						labels: {
-							boxWidth: 16,
-						},
-					},
-					scales: {
-						x: {
-							gridLines: {
-								display: false,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
-							},
-						},
-						y: {
-							position: 'right',
-							gridLines: {
-								display: true,
-								color: this.gridColor,
-								zeroLineColor: this.gridColor,
-							},
-							ticks: {
-								display: false,
-							},
-						},
-					},
-					tooltips: {
-						intersect: false,
-						mode: 'index',
-					},
-				},
-			}));
-		},
-
-		fetchJobs() {
-			os.api('admin/queue/deliver-delayed', {}).then(jobs => {
-				this.jobs = jobs;
-			});
-		},
-
-		onStats(stats) {
-			if (this.paused) return;
-
-			const cpu = (stats.cpu * 100).toFixed(0);
-			const memActive = (stats.mem.active / this.serverInfo.mem.total * 100).toFixed(0);
-			const memUsed = (stats.mem.used / this.serverInfo.mem.total * 100).toFixed(0);
-			this.memUsage = stats.mem.active;
-
-			this.chartCpuMem.data.labels.push('');
-			this.chartCpuMem.data.datasets[0].data.push(cpu);
-			this.chartCpuMem.data.datasets[1].data.push(memActive);
-			this.chartCpuMem.data.datasets[2].data.push(memUsed);
-			this.chartNet.data.labels.push('');
-			this.chartNet.data.datasets[0].data.push(stats.net.rx);
-			this.chartNet.data.datasets[1].data.push(stats.net.tx);
-			this.chartDisk.data.labels.push('');
-			this.chartDisk.data.datasets[0].data.push(stats.fs.r);
-			this.chartDisk.data.datasets[1].data.push(stats.fs.w);
-			if (this.chartCpuMem.data.datasets[0].data.length > 150) {
-				this.chartCpuMem.data.labels.shift();
-				this.chartCpuMem.data.datasets[0].data.shift();
-				this.chartCpuMem.data.datasets[1].data.shift();
-				this.chartCpuMem.data.datasets[2].data.shift();
-				this.chartNet.data.labels.shift();
-				this.chartNet.data.datasets[0].data.shift();
-				this.chartNet.data.datasets[1].data.shift();
-				this.chartDisk.data.labels.shift();
-				this.chartDisk.data.datasets[0].data.shift();
-				this.chartDisk.data.datasets[1].data.shift();
-			}
-			this.chartCpuMem.update();
-			this.chartNet.update();
-			this.chartDisk.update();
-		},
-
-		onStatsLog(statsLog) {
-			for (const stats of [...statsLog].reverse()) {
-				this.onStats(stats);
-			}
-		},
-
-		bytes,
-
-		number,
-
-		pause() {
-			this.paused = true;
-		},
-
-		resume() {
-			this.paused = false;
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.xhexznfu {
-	> div:nth-child(2) {
-		padding: 16px;
-		border-top: solid 0.5px var(--divider);
-	}
-}
-</style>
diff --git a/packages/client/src/pages/admin/object-storage.vue b/packages/client/src/pages/admin/object-storage.vue
deleted file mode 100644
index f2ab30eaa5..0000000000
--- a/packages/client/src/pages/admin/object-storage.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<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">
-				<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="ti ti-key"></i></template>
-							<template #label>Access key</template>
-						</FormInput>
-
-						<FormInput v-model="objectStorageSecretKey" class="_formBlock">
-							<template #prefix><i class="ti ti-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 FormSuspense from '@/components/form/suspense.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormSection from '@/components/form/section.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let useObjectStorage: boolean = $ref(false);
-let objectStorageBaseUrl: string | null = $ref(null);
-let objectStorageBucket: string | null = $ref(null);
-let objectStoragePrefix: string | null = $ref(null);
-let objectStorageEndpoint: string | null = $ref(null);
-let objectStorageRegion: string | null = $ref(null);
-let objectStoragePort: number | null = $ref(null);
-let objectStorageAccessKey: string | null = $ref(null);
-let objectStorageSecretKey: string | null = $ref(null);
-let objectStorageUseSSL: boolean = $ref(false);
-let objectStorageUseProxy: boolean = $ref(false);
-let objectStorageSetPublicRead: boolean = $ref(false);
-let objectStorageS3ForcePathStyle: boolean = $ref(true);
-
-async function init() {
-	const meta = await os.api('admin/meta');
-	useObjectStorage = meta.useObjectStorage;
-	objectStorageBaseUrl = meta.objectStorageBaseUrl;
-	objectStorageBucket = meta.objectStorageBucket;
-	objectStoragePrefix = meta.objectStoragePrefix;
-	objectStorageEndpoint = meta.objectStorageEndpoint;
-	objectStorageRegion = meta.objectStorageRegion;
-	objectStoragePort = meta.objectStoragePort;
-	objectStorageAccessKey = meta.objectStorageAccessKey;
-	objectStorageSecretKey = meta.objectStorageSecretKey;
-	objectStorageUseSSL = meta.objectStorageUseSSL;
-	objectStorageUseProxy = meta.objectStorageUseProxy;
-	objectStorageSetPublicRead = meta.objectStorageSetPublicRead;
-	objectStorageS3ForcePathStyle = meta.objectStorageS3ForcePathStyle;
-}
-
-function save() {
-	os.apiWithDialog('admin/update-meta', {
-		useObjectStorage,
-		objectStorageBaseUrl,
-		objectStorageBucket,
-		objectStoragePrefix,
-		objectStorageEndpoint,
-		objectStorageRegion,
-		objectStoragePort,
-		objectStorageAccessKey,
-		objectStorageSecretKey,
-		objectStorageUseSSL,
-		objectStorageUseProxy,
-		objectStorageSetPublicRead,
-		objectStorageS3ForcePathStyle,
-	}).then(() => {
-		fetchInstance();
-	});
-}
-
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ti ti-check',
-	text: i18n.ts.save,
-	handler: save,
-}]);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.objectStorage,
-	icon: 'ti ti-cloud',
-});
-</script>
diff --git a/packages/client/src/pages/admin/other-settings.vue b/packages/client/src/pages/admin/other-settings.vue
deleted file mode 100644
index 62dff6ce7f..0000000000
--- a/packages/client/src/pages/admin/other-settings.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-<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 { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-async function init() {
-	await os.api('admin/meta');
-}
-
-function save() {
-	os.apiWithDialog('admin/update-meta').then(() => {
-		fetchInstance();
-	});
-}
-
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ti ti-check',
-	text: i18n.ts.save,
-	handler: save,
-}]);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.other,
-	icon: 'ti ti-adjustments',
-});
-</script>
diff --git a/packages/client/src/pages/admin/overview.active-users.vue b/packages/client/src/pages/admin/overview.active-users.vue
deleted file mode 100644
index c3ce5ac901..0000000000
--- a/packages/client/src/pages/admin/overview.active-users.vue
+++ /dev/null
@@ -1,217 +0,0 @@
-<template>
-<div>
-	<MkLoading v-if="fetching"/>
-	<div v-show="!fetching" :class="$style.root" class="_panel">
-		<canvas ref="chartEl"></canvas>
-	</div>
-</div>
-</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 * as os from '@/os';
-import 'chartjs-adapter-date-fns';
-import { defaultStore } from '@/store';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import gradient from 'chartjs-plugin-gradient';
-import { chartVLine } from '@/scripts/chart-vline';
-
-Chart.register(
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-	gradient,
-);
-
-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 now = new Date();
-let chartInstance: Chart = null;
-const chartLimit = 7;
-let fetching = $ref(true);
-
-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 colorRead = '#3498db';
-	const colorWrite = '#2ecc71';
-
-	const max = Math.max(...raw.read);
-
-	chartInstance = new Chart(chartEl, {
-		type: 'bar',
-		data: {
-			datasets: [{
-				parsing: false,
-				label: 'Read',
-				data: format(raw.read).slice().reverse(),
-				pointRadius: 0,
-				borderWidth: 0,
-				borderJoinStyle: 'round',
-				borderRadius: 4,
-				backgroundColor: colorRead,
-				barPercentage: 0.7,
-				categoryPercentage: 0.5,
-				fill: true,
-			}, {
-				parsing: false,
-				label: 'Write',
-				data: format(raw.write).slice().reverse(),
-				pointRadius: 0,
-				borderWidth: 0,
-				borderJoinStyle: 'round',
-				borderRadius: 4,
-				backgroundColor: colorWrite,
-				barPercentage: 0.7,
-				categoryPercentage: 0.5,
-				fill: true,
-			}],
-		},
-		options: {
-			aspectRatio: 2.5,
-			layout: {
-				padding: {
-					left: 0,
-					right: 8,
-					top: 0,
-					bottom: 0,
-				},
-			},
-			scales: {
-				x: {
-					type: 'time',
-					offset: true,
-					time: {
-						stepSize: 1,
-						unit: 'day',
-					},
-					grid: {
-						display: false,
-						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
-					},
-					ticks: {
-						display: true,
-						maxRotation: 0,
-						autoSkipPadding: 8,
-					},
-					adapters: {
-						date: {
-							locale: enUS,
-						},
-					},
-				},
-				y: {
-					position: 'left',
-					suggestedMax: 10,
-					grid: {
-						display: true,
-						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
-					},
-					ticks: {
-						display: true,
-						//mirror: true,
-					},
-				},
-			},
-			interaction: {
-				intersect: false,
-				mode: 'index',
-			},
-			animation: false,
-			plugins: {
-				legend: {
-					display: false,
-				},
-				tooltip: {
-					enabled: false,
-					mode: 'index',
-					animation: {
-						duration: 0,
-					},
-					external: externalTooltipHandler,
-				},
-				gradient,
-			},
-		},
-		plugins: [chartVLine(vLineColor)],
-	});
-
-	fetching = false;
-}
-
-onMounted(async () => {
-	renderChart();
-});
-</script>
-
-<style lang="scss" module>
-.root {
-	padding: 20px;
-}
-</style>
diff --git a/packages/client/src/pages/admin/overview.ap-requests.vue b/packages/client/src/pages/admin/overview.ap-requests.vue
deleted file mode 100644
index 024ffdc245..0000000000
--- a/packages/client/src/pages/admin/overview.ap-requests.vue
+++ /dev/null
@@ -1,346 +0,0 @@
-<template>
-<div>
-	<MkLoading v-if="fetching"/>
-	<div v-show="!fetching" :class="$style.root">
-		<div class="charts _panel">
-			<div class="chart">
-				<canvas ref="chartEl2"></canvas>
-			</div>
-			<div class="chart">
-				<canvas ref="chartEl"></canvas>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import {
-	Chart,
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-} from 'chart.js';
-import gradient from 'chartjs-plugin-gradient';
-import { enUS } from 'date-fns/locale';
-import tinycolor from 'tinycolor2';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import MkNumberDiff from '@/components/MkNumberDiff.vue';
-import { i18n } from '@/i18n';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-import { chartVLine } from '@/scripts/chart-vline';
-import { defaultStore } from '@/store';
-
-Chart.register(
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-	gradient,
-);
-
-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 chartLimit = 50;
-const chartEl = $ref<HTMLCanvasElement>();
-const chartEl2 = $ref<HTMLCanvasElement>();
-let fetching = $ref(true);
-
-const { handler: externalTooltipHandler } = useChartTooltip();
-const { handler: externalTooltipHandler2 } = useChartTooltip();
-
-onMounted(async () => {
-	const now = new Date();
-
-	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 formatMinus = (arr) => {
-		return arr.map((v, i) => ({
-			x: getDate(i).getTime(),
-			y: -v,
-		}));
-	};
-
-	const raw = await os.api('charts/ap-request', { 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)';
-	const succColor = '#87e000';
-	const failColor = '#ff4400';
-
-	const succMax = Math.max(...raw.deliverSucceeded);
-	const failMax = Math.max(...raw.deliverFailed);
-
-	// フォントカラー
-	Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
-
-	new Chart(chartEl, {
-		type: 'line',
-		data: {
-			datasets: [{
-				stack: 'a',
-				parsing: false,
-				label: 'Out: Succ',
-				data: format(raw.deliverSucceeded).slice().reverse(),
-				tension: 0.3,
-				pointRadius: 0,
-				borderWidth: 2,
-				borderColor: succColor,
-				borderJoinStyle: 'round',
-				borderRadius: 4,
-				backgroundColor: alpha(succColor, 0.35),
-				fill: true,
-				clip: 8,
-			}, {
-				stack: 'a',
-				parsing: false,
-				label: 'Out: Fail',
-				data: formatMinus(raw.deliverFailed).slice().reverse(),
-				tension: 0.3,
-				pointRadius: 0,
-				borderWidth: 2,
-				borderColor: failColor,
-				borderJoinStyle: 'round',
-				borderRadius: 4,
-				backgroundColor: alpha(failColor, 0.35),
-				fill: true,
-				clip: 8,
-			}],
-		},
-		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: 'day',
-					},
-					grid: {
-						display: true,
-						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
-					},
-					ticks: {
-						display: true,
-						maxRotation: 0,
-						autoSkipPadding: 16,
-					},
-					adapters: {
-						date: {
-							locale: enUS,
-						},
-					},
-					min: getDate(chartLimit).getTime(),
-				},
-				y: {
-					stacked: true,
-					position: 'left',
-					suggestedMax: 10,
-					grid: {
-						display: true,
-						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
-					},
-					ticks: {
-						display: true,
-						//mirror: true,
-						callback: (value, index, values) => value < 0 ? -value : value,
-					},
-				},
-			},
-			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: [chartVLine(vLineColor)],
-	});
-
-	new Chart(chartEl2, {
-		type: 'bar',
-		data: {
-			datasets: [{
-				parsing: false,
-				label: 'In',
-				data: format(raw.inboxReceived).slice().reverse(),
-				tension: 0.3,
-				pointRadius: 0,
-				borderWidth: 0,
-				borderJoinStyle: 'round',
-				borderRadius: 4,
-				backgroundColor: '#0cc2d6',
-				barPercentage: 0.8,
-				categoryPercentage: 0.9,
-				fill: true,
-				clip: 8,
-			}],
-		},
-		options: {
-			aspectRatio: 5,
-			layout: {
-				padding: {
-					left: 0,
-					right: 8,
-					top: 0,
-					bottom: 0,
-				},
-			},
-			scales: {
-				x: {
-					type: 'time',
-					offset: false,
-					time: {
-						stepSize: 1,
-						unit: 'day',
-					},
-					grid: {
-						display: false,
-						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
-					},
-					ticks: {
-						display: false,
-						maxRotation: 0,
-						autoSkipPadding: 16,
-					},
-					adapters: {
-						date: {
-							locale: enUS,
-						},
-					},
-					min: getDate(chartLimit).getTime(),
-				},
-				y: {
-					position: 'left',
-					suggestedMax: 10,
-					grid: {
-						display: true,
-						color: gridColor,
-						borderColor: 'rgb(0, 0, 0, 0)',
-					},
-				},
-			},
-			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: externalTooltipHandler2,
-				},
-				gradient,
-			},
-		},
-		plugins: [chartVLine(vLineColor)],
-	});
-	
-	fetching = false;
-});
-</script>
-
-<style lang="scss" module>
-.root {
-	&:global {
-		> .charts {
-			> .chart {
-				padding: 16px;
-
-				&:first-child {
-					border-bottom: solid 0.5px var(--divider);
-				}
-			}
-		}
-	}
-}
-</style>
-
diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
deleted file mode 100644
index 71f5a054b4..0000000000
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<template>
-<div>
-	<MkLoading v-if="fetching"/>
-	<div v-show="!fetching" :class="$style.root">
-		<div v-if="topSubInstancesForPie && topPubInstancesForPie" class="pies">
-			<div class="pie deliver _panel">
-				<div class="title">Sub</div>
-				<XPie :data="topSubInstancesForPie" class="chart"/>
-				<div class="subTitle">Top 10</div>
-			</div>
-			<div class="pie inbox _panel">
-				<div class="title">Pub</div>
-				<XPie :data="topPubInstancesForPie" class="chart"/>
-				<div class="subTitle">Top 10</div>
-			</div>
-		</div>
-		<div v-if="!fetching" class="items">
-			<div class="item _panel sub">
-				<div class="icon"><i class="ti ti-world-download"></i></div>
-				<div class="body">
-					<div class="value">
-						{{ number(federationSubActive) }}
-						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="federationSubActiveDiff"></MkNumberDiff>
-					</div>
-					<div class="label">Sub</div>
-				</div>
-			</div>
-			<div class="item _panel pub">
-				<div class="icon"><i class="ti ti-world-upload"></i></div>
-				<div class="body">
-					<div class="value">
-						{{ number(federationPubActive) }}
-						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="federationPubActiveDiff"></MkNumberDiff>
-					</div>
-					<div class="label">Pub</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import XPie from './overview.pie.vue';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import MkNumberDiff from '@/components/MkNumberDiff.vue';
-import { i18n } from '@/i18n';
-import { useChartTooltip } from '@/scripts/use-chart-tooltip';
-
-let topSubInstancesForPie: any = $ref(null);
-let topPubInstancesForPie: 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 fetching = $ref(true);
-
-const { handler: externalTooltipHandler } = useChartTooltip();
-	
-onMounted(async () => {
-	const chart = await os.apiGet('charts/federation', { limit: 2, span: 'day' });
-	federationPubActive = chart.pubActive[0];
-	federationPubActiveDiff = chart.pubActive[0] - chart.pubActive[1];
-	federationSubActive = chart.subActive[0];
-	federationSubActiveDiff = chart.subActive[0] - chart.subActive[1];
-
-	os.apiGet('federation/stats', { limit: 10 }).then(res => {
-		topSubInstancesForPie = res.topSubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followersCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowersCount }]);
-		topPubInstancesForPie = res.topPubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followingCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowingCount }]);
-	});
-
-	fetching = false;
-});
-</script>
-
-<style lang="scss" module>
-.root {
-
-	&:global {
-		> .pies {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
-			grid-gap: 12px;
-			margin-bottom: 12px;
-
-			> .pie {
-				position: relative;
-				padding: 12px;
-
-				> .title {
-					position: absolute;
-					top: 20px;
-					left: 20px;
-					font-size: 90%;
-				}
-
-				> .chart {
-					max-height: 150px;
-				}
-
-				> .subTitle {
-					position: absolute;
-					bottom: 20px;
-					right: 20px;
-					font-size: 85%;
-				}
-			}
-		}
-
-		> .items {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
-			grid-gap: 12px;
-
-			> .item {
-				display: flex;
-				box-sizing: border-box;
-				padding: 12px;
-
-				> .icon {
-					display: grid;
-					place-items: center;
-					height: 100%;
-					aspect-ratio: 1;
-					margin-right: 12px;
-					background: var(--accentedBg);
-					color: var(--accent);
-					border-radius: 10px;
-				}
-
-				&.sub {
-					> .icon {
-						background: #d5ba0026;
-						color: #dfc300;
-					}
-				}
-
-				&.pub {
-					> .icon {
-						background: #00cf2326;
-						color: #00cd5b;
-					}
-				}
-
-				> .body {
-					padding: 2px 0;
-
-					> .value {
-						font-size: 1.25em;
-						font-weight: bold;
-
-						> .diff {
-							font-size: 0.65em;
-							font-weight: normal;
-						}
-					}
-
-					> .label {
-						font-size: 0.8em;
-						opacity: 0.5;
-					}
-				}
-			}
-		}
-	}
-}
-</style>
-
diff --git a/packages/client/src/pages/admin/overview.heatmap.vue b/packages/client/src/pages/admin/overview.heatmap.vue
deleted file mode 100644
index 16d1c83b9f..0000000000
--- a/packages/client/src/pages/admin/overview.heatmap.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-<div class="_panel" :class="$style.root">
-	<MkActiveUsersHeatmap/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import MkActiveUsersHeatmap from '@/components/MkActiveUsersHeatmap.vue';
-</script>
-
-<style lang="scss" module>
-.root {
-	padding: 20px;
-}
-</style>
diff --git a/packages/client/src/pages/admin/overview.instances.vue b/packages/client/src/pages/admin/overview.instances.vue
deleted file mode 100644
index 29848bf03b..0000000000
--- a/packages/client/src/pages/admin/overview.instances.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-<div class="wbrkwale">
-	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-		<MkLoading v-if="fetching"/>
-		<div v-else class="instances">
-			<MkA v-for="(instance, i) in instances" :key="instance.id" v-tooltip.mfm.noDelay="`${instance.name}\n${instance.host}\n${instance.softwareName} ${instance.softwareVersion}`" :to="`/instance-info/${instance.host}`" class="instance">
-				<MkInstanceCardMini :instance="instance"/>
-			</MkA>
-		</div>
-	</transition>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue';
-
-const instances = ref([]);
-const fetching = ref(true);
-
-const fetch = async () => {
-	const fetchedInstances = await os.api('federation/instances', {
-		sort: '+lastCommunicatedAt',
-		limit: 6,
-	});
-	instances.value = fetchedInstances;
-	fetching.value = false;
-};
-
-useInterval(fetch, 1000 * 60, {
-	immediate: true,
-	afterMounted: true,
-});
-</script>
-
-<style lang="scss" scoped>
-.wbrkwale {
-	> .instances {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-		grid-gap: 12px;
-
-		> .instance:hover {
-			text-decoration: none;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/admin/overview.moderators.vue b/packages/client/src/pages/admin/overview.moderators.vue
deleted file mode 100644
index a1f63c8711..0000000000
--- a/packages/client/src/pages/admin/overview.moderators.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-<div>
-	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-		<MkLoading v-if="fetching"/>
-		<div v-else :class="$style.root" class="_panel">
-			<MkA v-for="user in moderators" :key="user.id" class="user" :to="`/user-info/${user.id}`">
-				<MkAvatar :user="user" class="avatar" :show-indicator="true" :disable-link="true"/>
-			</MkA>
-		</div>
-	</transition>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
-
-let moderators: any = $ref(null);
-let fetching = $ref(true);
-
-onMounted(async () => {
-	moderators = await os.api('admin/show-users', {
-		sort: '+lastActiveDate',
-		state: 'adminOrModerator',
-		limit: 30,
-	});
-
-	fetching = false;
-});
-</script>
-
-<style lang="scss" module>
-.root {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(30px, 40px));
-	grid-gap: 12px;
-	place-content: center;
-	padding: 12px;
-
-	&:global {
-		> .user {
-			width: 100%;
-			height: 100%;
-			aspect-ratio: 1;
-
-			> .avatar {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/admin/overview.pie.vue b/packages/client/src/pages/admin/overview.pie.vue
deleted file mode 100644
index 94509cf006..0000000000
--- a/packages/client/src/pages/admin/overview.pie.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-<canvas ref="chartEl"></canvas>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import {
-	Chart,
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-	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; onClick?: () => void }[];
-}>();
-
-const chartEl = ref<HTMLCanvasElement>(null);
-
-// フォントカラー
-Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
-
-const { handler: externalTooltipHandler } = useChartTooltip({
-	position: 'middle',
-});
-
-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),
-				borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
-				borderWidth: 2,
-				hoverOffset: 0,
-				data: props.data.map(x => x.value),
-			}],
-		},
-		options: {
-			layout: {
-				padding: {
-					left: 16,
-					right: 16,
-					top: 16,
-					bottom: 16,
-				},
-			},
-			onClick: (ev) => {
-				const hit = chartInstance.getElementsAtEventForMode(ev, 'nearest', { intersect: true }, false)[0];
-				if (hit && props.data[hit.index].onClick) {
-					props.data[hit.index].onClick();
-				}
-			},
-			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.queue.chart.vue b/packages/client/src/pages/admin/overview.queue.chart.vue
deleted file mode 100644
index 1e095bddaa..0000000000
--- a/packages/client/src/pages/admin/overview.queue.chart.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<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';
-import { chartVLine } from '@/scripts/chart-vline';
-
-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 > 100) {
-			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 > 100) {
-		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(() => {
-	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
-
-	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.2),
-				fill: true,
-				data: [],
-			}],
-		},
-		options: {
-			aspectRatio: 2.5,
-			layout: {
-				padding: {
-					left: 0,
-					right: 0,
-					top: 0,
-					bottom: 0,
-				},
-			},
-			scales: {
-				x: {
-					grid: {
-						display: false,
-						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,
-				},
-			},
-		},
-		plugins: [chartVLine(vLineColor)],
-	});
-});
-
-defineExpose({
-	setData,
-	pushData,
-});
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/client/src/pages/admin/overview.queue.vue b/packages/client/src/pages/admin/overview.queue.vue
deleted file mode 100644
index 72ebddc72f..0000000000
--- a/packages/client/src/pages/admin/overview.queue.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-<div :class="$style.root">
-	<div class="_table status">
-		<div class="_row">
-			<div class="_cell" style="text-align: center;"><div class="_label">Process</div>{{ number(activeSincePrevTick) }}</div>
-			<div class="_cell" style="text-align: center;"><div class="_label">Active</div>{{ number(active) }}</div>
-			<div class="_cell" style="text-align: center;"><div class="_label">Waiting</div>{{ number(waiting) }}</div>
-			<div class="_cell" style="text-align: center;"><div class="_label">Delayed</div>{{ number(delayed) }}</div>
-		</div>
-	</div>
-	<div class="charts">
-		<div class="chart">
-			<div class="title">Process</div>
-			<XChart ref="chartProcess" type="process"/>
-		</div>
-		<div class="chart">
-			<div class="title">Active</div>
-			<XChart ref="chartActive" type="active"/>
-		</div>
-		<div class="chart">
-			<div class="title">Delayed</div>
-			<XChart ref="chartDelayed" type="delayed"/>
-		</div>
-		<div class="chart">
-			<div class="title">Waiting</div>
-			<XChart ref="chartWaiting" type="waiting"/>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { markRaw, onMounted, onUnmounted, ref } from 'vue';
-import XChart from './overview.queue.chart.vue';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
-
-const connection = markRaw(stream.useChannel('queueStats'));
-
-const activeSincePrevTick = ref(0);
-const active = ref(0);
-const delayed = ref(0);
-const waiting = ref(0);
-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;
-}>();
-
-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(() => {
-	connection.on('stats', onStats);
-	connection.on('statsLog', onStatsLog);
-	connection.send('requestLog', {
-		id: Math.random().toString().substr(2, 8),
-		length: 100,
-	});
-});
-
-onUnmounted(() => {
-	connection.off('stats', onStats);
-	connection.off('statsLog', onStatsLog);
-	connection.dispose();
-});
-</script>
-
-<style lang="scss" module>
-.root {
-	&:global {
-		> .status {
-			padding: 0 0 16px 0;
-		}
-
-		> .charts {
-			display: grid;
-			grid-template-columns: 1fr 1fr;
-			gap: 12px;
-
-			> .chart {
-				min-width: 0;
-				padding: 16px;
-				background: var(--panel);
-				border-radius: var(--radius);
-
-				> .title {
-					font-size: 0.85em;
-				}
-			}
-		}
-	}
-}
-</style>	
diff --git a/packages/client/src/pages/admin/overview.retention.vue b/packages/client/src/pages/admin/overview.retention.vue
deleted file mode 100644
index feac6f8118..0000000000
--- a/packages/client/src/pages/admin/overview.retention.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-<div>
-	<MkLoading v-if="fetching"/>
-	<div v-else :class="$style.root">
-		<div v-for="row in retention" class="row">
-			<div v-for="value in getValues(row)" v-tooltip="value.percentage" class="cell">
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
-
-let retention: any = $ref(null);
-let fetching = $ref(true);
-
-function getValues(row) {
-	const data = [];
-	for (const key in row.data) {
-		data.push({
-			date: new Date(key),
-			value: number(row.data[key]),
-			percentage: `${Math.ceil(row.data[key] / row.users) * 100}%`,
-		});
-	}
-	data.sort((a, b) => a.date > b.date);
-	return data;
-}
-
-onMounted(async () => {
-	retention = await os.apiGet('retention', {});
-
-	fetching = false;
-});
-</script>
-
-<style lang="scss" module>
-.root {
-
-	&:global {
-
-	}
-}
-</style>
diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/overview.stats.vue
deleted file mode 100644
index 4dcf7e751a..0000000000
--- a/packages/client/src/pages/admin/overview.stats.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-<div>
-	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-		<MkLoading v-if="fetching"/>
-		<div v-else :class="$style.root">
-			<div class="item _panel users">
-				<div class="icon"><i class="ti ti-users"></i></div>
-				<div class="body">
-					<div class="value">
-						{{ number(stats.originalUsersCount) }}
-						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"></MkNumberDiff>
-					</div>
-					<div class="label">Users</div>
-				</div>
-			</div>
-			<div class="item _panel notes">
-				<div class="icon"><i class="ti ti-pencil"></i></div>
-				<div class="body">
-					<div class="value">
-						{{ number(stats.originalNotesCount) }}
-						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff>
-					</div>
-					<div class="label">Notes</div>
-				</div>
-			</div>
-			<div class="item _panel instances">
-				<div class="icon"><i class="ti ti-planet"></i></div>
-				<div class="body">
-					<div class="value">
-						{{ number(stats.instances) }}
-					</div>
-					<div class="label">Instances</div>
-				</div>
-			</div>
-			<div class="item _panel online">
-				<div class="icon"><i class="ti ti-access-point"></i></div>
-				<div class="body">
-					<div class="value">
-						{{ number(onlineUsersCount) }}
-					</div>
-					<div class="label">Online</div>
-				</div>
-			</div>
-		</div>
-	</transition>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import MkNumberDiff from '@/components/MkNumberDiff.vue';
-import { i18n } from '@/i18n';
-
-let stats: any = $ref(null);
-let usersComparedToThePrevDay = $ref<number>();
-let notesComparedToThePrevDay = $ref<number>();
-let onlineUsersCount = $ref(0);
-let fetching = $ref(true);
-
-onMounted(async () => {
-	const [_stats, _onlineUsersCount] = await Promise.all([
-		os.api('stats', {}),
-		os.api('get-online-users-count').then(res => res.count),
-	]);
-	stats = _stats;
-	onlineUsersCount = _onlineUsersCount;
-
-	os.apiGet('charts/users', { limit: 2, span: 'day' }).then(chart => {
-		usersComparedToThePrevDay = stats.originalUsersCount - chart.local.total[1];
-	});
-
-	os.apiGet('charts/notes', { limit: 2, span: 'day' }).then(chart => {
-		notesComparedToThePrevDay = stats.originalNotesCount - chart.local.total[1];
-	});
-
-	fetching = false;
-});
-</script>
-
-<style lang="scss" module>
-.root {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
-	grid-gap: 12px;
-
-	&:global {
-		> .item {
-			display: flex;
-			box-sizing: border-box;
-			padding: 12px;
-
-			> .icon {
-				display: grid;
-				place-items: center;
-				height: 100%;
-				aspect-ratio: 1;
-				margin-right: 12px;
-				background: var(--accentedBg);
-				color: var(--accent);
-				border-radius: 10px;
-			}
-
-			&.users {
-				> .icon {
-					background: #0088d726;
-					color: #3d96c1;
-				}
-			}
-
-			&.notes {
-				> .icon {
-					background: #86b30026;
-					color: #86b300;
-				}
-			}
-
-			&.instances {
-				> .icon {
-					background: #e96b0026;
-					color: #d76d00;
-				}
-			}
-
-			&.online {
-				> .icon {
-					background: #8a00d126;
-					color: #c01ac3;
-				}
-			}
-
-			> .body {
-				padding: 2px 0;
-
-				> .value {
-					font-size: 1.25em;
-					font-weight: bold;
-
-					> .diff {
-						font-size: 0.65em;
-						font-weight: normal;
-					}
-				}
-
-				> .label {
-					font-size: 0.8em;
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/admin/overview.users.vue b/packages/client/src/pages/admin/overview.users.vue
deleted file mode 100644
index 5d4be11742..0000000000
--- a/packages/client/src/pages/admin/overview.users.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-<div :class="$style.root">
-	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-		<MkLoading v-if="fetching"/>
-		<div v-else class="users">
-			<MkA v-for="(user, i) in newUsers" :key="user.id" :to="`/user-info/${user.id}`" class="user">
-				<MkUserCardMini :user="user"/>
-			</MkA>
-		</div>
-	</transition>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import MkUserCardMini from '@/components/MkUserCardMini.vue';
-
-let newUsers = $ref(null);
-let fetching = $ref(true);
-
-const fetch = async () => {
-	const _newUsers = await os.api('admin/show-users', {
-		limit: 5,
-		sort: '+createdAt',
-		origin: 'local',
-	});
-	newUsers = _newUsers;
-	fetching = false;
-};
-
-useInterval(fetch, 1000 * 60, {
-	immediate: true,
-	afterMounted: true,
-});
-</script>
-
-<style lang="scss" module>
-.root {
-	&:global {
-		> .users {
-			.chart-move {
-				transition: transform 1s ease;
-			}
-
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-			grid-gap: 12px;
-
-			> .user:hover {
-				text-decoration: none;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
deleted file mode 100644
index d656e55200..0000000000
--- a/packages/client/src/pages/admin/overview.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<template>
-<MkSpacer :content-max="1000">
-	<div ref="rootEl" class="edbbcaef">
-		<MkFolder class="item">
-			<template #header>Stats</template>
-			<XStats/>
-		</MkFolder>
-
-		<MkFolder class="item">
-			<template #header>Active users</template>
-			<XActiveUsers/>
-		</MkFolder>
-
-		<MkFolder class="item">
-			<template #header>Heatmap</template>
-			<XHeatmap/>
-		</MkFolder>
-
-		<MkFolder class="item">
-			<template #header>Retention rate</template>
-			<XRetention/>
-		</MkFolder>
-
-		<MkFolder class="item">
-			<template #header>Moderators</template>
-			<XModerators/>
-		</MkFolder>
-
-		<MkFolder class="item">
-			<template #header>Federation</template>
-			<XFederation/>
-		</MkFolder>
-		
-		<MkFolder class="item">
-			<template #header>Instances</template>
-			<XInstances/>
-		</MkFolder>
-
-		<MkFolder class="item">
-			<template #header>Ap requests</template>
-			<XApRequests/>
-		</MkFolder>
-
-		<MkFolder class="item">
-			<template #header>New users</template>
-			<XUsers/>
-		</MkFolder>
-
-		<MkFolder class="item">
-			<template #header>Deliver queue</template>
-			<XQueue domain="deliver"/>
-		</MkFolder>
-
-		<MkFolder class="item">
-			<template #header>Inbox queue</template>
-			<XQueue domain="inbox"/>
-		</MkFolder>
-	</div>
-</MkSpacer>
-</template>
-
-<script lang="ts" setup>
-import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import XFederation from './overview.federation.vue';
-import XInstances from './overview.instances.vue';
-import XQueue from './overview.queue.vue';
-import XApRequests from './overview.ap-requests.vue';
-import XUsers from './overview.users.vue';
-import XActiveUsers from './overview.active-users.vue';
-import XStats from './overview.stats.vue';
-import XRetention from './overview.retention.vue';
-import XModerators from './overview.moderators.vue';
-import XHeatmap from './overview.heatmap.vue';
-import MkTagCloud from '@/components/MkTagCloud.vue';
-import { version, url } from '@/config';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import 'chartjs-adapter-date-fns';
-import { defaultStore } from '@/store';
-import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
-import MkFolder from '@/components/MkFolder.vue';
-
-const rootEl = $ref<HTMLElement>();
-let serverInfo: any = $ref(null);
-let topSubInstancesForPie: any = $ref(null);
-let topPubInstancesForPie: 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);
-let activeInstances = $shallowRef(null);
-const queueStatsConnection = markRaw(stream.useChannel('queueStats'));
-const now = new Date();
-const filesPagination = {
-	endpoint: 'admin/drive/files' as const,
-	limit: 9,
-	noPaging: true,
-};
-
-function onInstanceClick(i) {
-	os.pageWindow(`/instance-info/${i.host}`);
-}
-
-onMounted(async () => {
-	/*
-	const magicGrid = new MagicGrid({
-		container: rootEl,
-		static: true,
-		animate: true,
-	});
-
-	magicGrid.listen();
-	*/
-
-	os.apiGet('charts/federation', { limit: 2, span: 'day' }).then(chart => {
-		federationPubActive = chart.pubActive[0];
-		federationPubActiveDiff = chart.pubActive[0] - chart.pubActive[1];
-		federationSubActive = chart.subActive[0];
-		federationSubActiveDiff = chart.subActive[0] - chart.subActive[1];
-	});
-
-	os.apiGet('federation/stats', { limit: 10 }).then(res => {
-		topSubInstancesForPie = res.topSubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followersCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowersCount }]);
-		topPubInstancesForPie = res.topPubInstances.map(x => ({
-			name: x.host,
-			color: x.themeColor,
-			value: x.followingCount,
-			onClick: () => {
-				os.pageWindow(`/instance-info/${x.host}`);
-			},
-		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowingCount }]);
-	});
-
-	os.api('admin/server-info').then(serverInfoResponse => {
-		serverInfo = serverInfoResponse;
-	});
-
-	os.api('admin/show-users', {
-		limit: 5,
-		sort: '+createdAt',
-	}).then(res => {
-		newUsers = res;
-	});
-
-	os.api('federation/instances', {
-		sort: '+lastCommunicatedAt',
-		limit: 25,
-	}).then(res => {
-		activeInstances = res;
-	});
-
-	nextTick(() => {
-		queueStatsConnection.send('requestLog', {
-			id: Math.random().toString().substr(2, 8),
-			length: 100,
-		});
-	});
-});
-
-onBeforeUnmount(() => {
-	queueStatsConnection.dispose();
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.dashboard,
-	icon: 'ti ti-dashboard',
-});
-</script>
-
-<style lang="scss" scoped>
-.edbbcaef {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-	grid-gap: 16px;
-}
-</style>
diff --git a/packages/client/src/pages/admin/proxy-account.vue b/packages/client/src/pages/admin/proxy-account.vue
deleted file mode 100644
index 5d0d67980e..0000000000
--- a/packages/client/src/pages/admin/proxy-account.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<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">
-			<template #key>{{ i18n.ts.proxyAccount }}</template>
-			<template #value>{{ proxyAccount ? `@${proxyAccount.username}` : i18n.ts.none }}</template>
-		</MkKeyValue>
-
-		<FormButton primary class="_formBlock" @click="chooseProxyAccount">{{ i18n.ts.selectAccount }}</FormButton>
-	</FormSuspense>
-</MkSpacer></MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import FormButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let proxyAccount: any = $ref(null);
-let proxyAccountId: any = $ref(null);
-
-async function init() {
-	const meta = await os.api('admin/meta');
-	proxyAccountId = meta.proxyAccountId;
-	if (proxyAccountId) {
-		proxyAccount = await os.api('users/show', { userId: proxyAccountId });
-	}
-}
-
-function chooseProxyAccount() {
-	os.selectUser().then(user => {
-		proxyAccount = user;
-		proxyAccountId = user.id;
-		save();
-	});
-}
-
-function save() {
-	os.apiWithDialog('admin/update-meta', {
-		proxyAccountId: proxyAccountId,
-	}).then(() => {
-		fetchInstance();
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.proxyAccount,
-	icon: 'ti ti-ghost',
-});
-</script>
diff --git a/packages/client/src/pages/admin/queue.chart.chart.vue b/packages/client/src/pages/admin/queue.chart.chart.vue
deleted file mode 100644
index 5777674ae3..0000000000
--- a/packages/client/src/pages/admin/queue.chart.chart.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<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';
-import { chartVLine } from '@/scripts/chart-vline';
-
-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(() => {
-	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
-
-	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.2),
-				fill: true,
-				data: [],
-			}],
-		},
-		options: {
-			aspectRatio: 2.5,
-			layout: {
-				padding: {
-					left: 0,
-					right: 0,
-					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,
-				},
-			},
-		},
-		plugins: [chartVLine(vLineColor)],
-	});
-});
-
-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
deleted file mode 100644
index 186a22c43e..0000000000
--- a/packages/client/src/pages/admin/queue.chart.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<template>
-<div class="pumxzjhg">
-	<div class="_table status">
-		<div class="_row">
-			<div class="_cell"><div class="_label">Process</div>{{ number(activeSincePrevTick) }}</div>
-			<div class="_cell"><div class="_label">Active</div>{{ number(active) }}</div>
-			<div class="_cell"><div class="_label">Waiting</div>{{ number(waiting) }}</div>
-			<div class="_cell"><div class="_label">Delayed</div>{{ number(delayed) }}</div>
-		</div>
-	</div>
-	<div class="charts">
-		<div class="chart">
-			<div class="title">Process</div>
-			<XChart ref="chartProcess" type="process"/>
-		</div>
-		<div class="chart">
-			<div class="title">Active</div>
-			<XChart ref="chartActive" type="active"/>
-		</div>
-		<div class="chart">
-			<div class="title">Delayed</div>
-			<XChart ref="chartDelayed" type="delayed"/>
-		</div>
-		<div class="chart">
-			<div class="title">Waiting</div>
-			<XChart ref="chartWaiting" type="waiting"/>
-		</div>
-	</div>
-	<div class="jobs">
-		<div v-if="jobs.length > 0">
-			<div v-for="job in jobs" :key="job[0]">
-				<span>{{ job[0] }}</span>
-				<span style="margin-left: 8px; opacity: 0.7;">({{ number(job[1]) }} jobs)</span>
-			</div>
-		</div>
-		<span v-else style="opacity: 0.5;">{{ i18n.ts.noJobs }}</span>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { markRaw, onMounted, onUnmounted, ref } from 'vue';
-import XChart from './queue.chart.chart.vue';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
-
-const connection = markRaw(stream.useChannel('queueStats'));
-
-const activeSincePrevTick = ref(0);
-const active = 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;
-}>();
-
-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;
-	});
-
-	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;
-	}
-
-	> .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;
-		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
deleted file mode 100644
index 8d19b49fc5..0000000000
--- a/packages/client/src/pages/admin/queue.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><XHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800">
-		<XQueue v-if="tab === 'deliver'" domain="deliver"/>
-		<XQueue v-else-if="tab === 'inbox'" domain="inbox"/>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { markRaw, onMounted, onBeforeUnmount, nextTick } from 'vue';
-import XQueue from './queue.chart.vue';
-import XHeader from './_header_.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import * as config from '@/config';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let tab = $ref('deliver');
-
-function clear() {
-	os.confirm({
-		type: 'warning',
-		title: i18n.ts.clearQueueConfirmTitle,
-		text: i18n.ts.clearQueueConfirmText,
-	}).then(({ canceled }) => {
-		if (canceled) return;
-
-		os.apiWithDialog('admin/queue/clear');
-	});
-}
-
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ti ti-external-link',
-	text: i18n.ts.dashboard,
-	handler: () => {
-		window.open(config.url + '/queue', '_blank');
-	},
-}]);
-
-const headerTabs = $computed(() => [{
-	key: 'deliver',
-	title: 'Deliver',
-}, {
-	key: 'inbox',
-	title: 'Inbox',
-}]);
-
-definePageMetadata({
-	title: i18n.ts.jobQueue,
-	icon: 'ti ti-clock-play',
-});
-</script>
diff --git a/packages/client/src/pages/admin/relays.vue b/packages/client/src/pages/admin/relays.vue
deleted file mode 100644
index 4768ae67b1..0000000000
--- a/packages/client/src/pages/admin/relays.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-<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="ti ti-check icon accepted"></i>
-				<i v-else-if="relay.status === 'rejected'" class="ti ti-ban icon rejected"></i>
-				<i v-else class="ti ti-clock icon requesting"></i>
-				<span>{{ $t(`_relayStatus.${relay.status}`) }}</span>
-			</div>
-			<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import XHeader from './_header_.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let relays: any[] = $ref([]);
-
-async function addRelay() {
-	const { canceled, result: inbox } = await os.inputText({
-		title: i18n.ts.addRelay,
-		type: 'url',
-		placeholder: i18n.ts.inboxUrl,
-	});
-	if (canceled) return;
-	os.api('admin/relays/add', {
-		inbox,
-	}).then((relay: any) => {
-		refresh();
-	}).catch((err: any) => {
-		os.alert({
-			type: 'error',
-			text: err.message || err,
-		});
-	});
-}
-
-function remove(inbox: string) {
-	os.api('admin/relays/remove', {
-		inbox,
-	}).then(() => {
-		refresh();
-	}).catch((err: any) => {
-		os.alert({
-			type: 'error',
-			text: err.message || err,
-		});
-	});
-}
-
-function refresh() {
-	os.api('admin/relays/list').then((relayList: any) => {
-		relays = relayList;
-	});
-}
-
-refresh();
-
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ti ti-plus',
-	text: i18n.ts.addRelay,
-	handler: addRelay,
-}]);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.relays,
-	icon: 'ti ti-planet',
-});
-</script>
-
-<style lang="scss" scoped>
-.relaycxt {
-	> .status {
-		margin: 8px 0;
-
-		> .icon {
-			width: 1em;
-			margin-right: 0.75em;
-
-			&.accepted {
-				color: var(--success);
-			}
-
-			&.rejected {
-				color: var(--error);
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue
deleted file mode 100644
index 2682bda337..0000000000
--- a/packages/client/src/pages/admin/security.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<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="ti ti-shield"></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-if="enableTurnstile" #suffix>Turnstile</template>
-					<template v-else #suffix>{{ i18n.ts.none }} ({{ i18n.ts.notRecommended }})</template>
-
-					<XBotProtection/>
-				</FormFolder>
-
-				<FormFolder class="_formBlock">
-					<template #icon><i class="ti ti-eye-off"></i></template>
-					<template #label>{{ i18n.ts.sensitiveMediaDetection }}</template>
-					<template v-if="sensitiveMediaDetection === 'all'" #suffix>{{ i18n.ts.all }}</template>
-					<template v-else-if="sensitiveMediaDetection === 'local'" #suffix>{{ i18n.ts.localOnly }}</template>
-					<template v-else-if="sensitiveMediaDetection === 'remote'" #suffix>{{ i18n.ts.remoteOnly }}</template>
-					<template v-else #suffix>{{ i18n.ts.none }}</template>
-
-					<div class="_formRoot">
-						<span class="_formBlock">{{ i18n.ts._sensitiveMediaDetection.description }}</span>
-
-						<FormRadios v-model="sensitiveMediaDetection" class="_formBlock">
-							<option value="none">{{ i18n.ts.none }}</option>
-							<option value="all">{{ i18n.ts.all }}</option>
-							<option value="local">{{ i18n.ts.localOnly }}</option>
-							<option value="remote">{{ i18n.ts.remoteOnly }}</option>
-						</FormRadios>
-
-						<FormRange v-model="sensitiveMediaDetectionSensitivity" :min="0" :max="4" :step="1" :text-converter="(v) => `${v + 1}`" class="_formBlock">
-							<template #label>{{ i18n.ts._sensitiveMediaDetection.sensitivity }}</template>
-							<template #caption>{{ i18n.ts._sensitiveMediaDetection.sensitivityDescription }}</template>
-						</FormRange>
-
-						<FormSwitch v-model="enableSensitiveMediaDetectionForVideos" class="_formBlock">
-							<template #label>{{ i18n.ts._sensitiveMediaDetection.analyzeVideos }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
-							<template #caption>{{ i18n.ts._sensitiveMediaDetection.analyzeVideosDescription }}</template>
-						</FormSwitch>
-
-						<FormSwitch v-model="setSensitiveFlagAutomatically" class="_formBlock">
-							<template #label>{{ i18n.ts._sensitiveMediaDetection.setSensitiveFlagAutomatically }} ({{ i18n.ts.notRecommended }})</template>
-							<template #caption>{{ i18n.ts._sensitiveMediaDetection.setSensitiveFlagAutomaticallyDescription }}</template>
-						</FormSwitch>
-
-						<!-- 現状 false positive が多すぎて実用に耐えない
-						<FormSwitch v-model="disallowUploadWhenPredictedAsPorn" class="_formBlock">
-							<template #label>{{ i18n.ts._sensitiveMediaDetection.disallowUploadWhenPredictedAsPorn }}</template>
-						</FormSwitch>
-						-->
-
-						<FormButton primary class="_formBlock" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
-					</div>
-				</FormFolder>
-
-				<FormFolder class="_formBlock">
-					<template #label>Active Email Validation</template>
-					<template v-if="enableActiveEmailValidation" #suffix>Enabled</template>
-					<template v-else #suffix>Disabled</template>
-
-					<div class="_formRoot">
-						<span class="_formBlock">{{ i18n.ts.activeEmailValidationDescription }}</span>
-						<FormSwitch v-model="enableActiveEmailValidation" class="_formBlock" @update:model-value="save">
-							<template #label>Enable</template>
-						</FormSwitch>
-					</div>
-				</FormFolder>
-
-				<FormFolder class="_formBlock">
-					<template #label>Log IP address</template>
-					<template v-if="enableIpLogging" #suffix>Enabled</template>
-					<template v-else #suffix>Disabled</template>
-
-					<div class="_formRoot">
-						<FormSwitch v-model="enableIpLogging" class="_formBlock" @update:model-value="save">
-							<template #label>Enable</template>
-						</FormSwitch>
-					</div>
-				</FormFolder>
-
-				<FormFolder class="_formBlock">
-					<template #label>Summaly Proxy</template>
-
-					<div class="_formRoot">
-						<FormInput v-model="summalyProxy" class="_formBlock">
-							<template #prefix><i class="ti ti-link"></i></template>
-							<template #label>Summaly Proxy URL</template>
-						</FormInput>
-
-						<FormButton primary class="_formBlock" @click="save"><i class="ti ti-device-floppy"></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 FormRadios from '@/components/form/radios.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormRange from '@/components/form/range.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let summalyProxy: string = $ref('');
-let enableHcaptcha: boolean = $ref(false);
-let enableRecaptcha: boolean = $ref(false);
-let enableTurnstile: boolean = $ref(false);
-let sensitiveMediaDetection: string = $ref('none');
-let sensitiveMediaDetectionSensitivity: number = $ref(0);
-let setSensitiveFlagAutomatically: boolean = $ref(false);
-let enableSensitiveMediaDetectionForVideos: boolean = $ref(false);
-let enableIpLogging: boolean = $ref(false);
-let enableActiveEmailValidation: boolean = $ref(false);
-
-async function init() {
-	const meta = await os.api('admin/meta');
-	summalyProxy = meta.summalyProxy;
-	enableHcaptcha = meta.enableHcaptcha;
-	enableRecaptcha = meta.enableRecaptcha;
-	enableTurnstile = meta.enableTurnstile;
-	sensitiveMediaDetection = meta.sensitiveMediaDetection;
-	sensitiveMediaDetectionSensitivity =
-		meta.sensitiveMediaDetectionSensitivity === 'veryLow' ? 0 :
-		meta.sensitiveMediaDetectionSensitivity === 'low' ? 1 :
-		meta.sensitiveMediaDetectionSensitivity === 'medium' ? 2 :
-		meta.sensitiveMediaDetectionSensitivity === 'high' ? 3 :
-		meta.sensitiveMediaDetectionSensitivity === 'veryHigh' ? 4 : 0;
-	setSensitiveFlagAutomatically = meta.setSensitiveFlagAutomatically;
-	enableSensitiveMediaDetectionForVideos = meta.enableSensitiveMediaDetectionForVideos;
-	enableIpLogging = meta.enableIpLogging;
-	enableActiveEmailValidation = meta.enableActiveEmailValidation;
-}
-
-function save() {
-	os.apiWithDialog('admin/update-meta', {
-		summalyProxy,
-		sensitiveMediaDetection,
-		sensitiveMediaDetectionSensitivity:
-			sensitiveMediaDetectionSensitivity === 0 ? 'veryLow' :
-			sensitiveMediaDetectionSensitivity === 1 ? 'low' :
-			sensitiveMediaDetectionSensitivity === 2 ? 'medium' :
-			sensitiveMediaDetectionSensitivity === 3 ? 'high' :
-			sensitiveMediaDetectionSensitivity === 4 ? 'veryHigh' :
-			0,
-		setSensitiveFlagAutomatically,
-		enableSensitiveMediaDetectionForVideos,
-		enableIpLogging,
-		enableActiveEmailValidation,
-	}).then(() => {
-		fetchInstance();
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.security,
-	icon: 'ti ti-lock',
-});
-</script>
diff --git a/packages/client/src/pages/admin/settings.vue b/packages/client/src/pages/admin/settings.vue
deleted file mode 100644
index 460eb92694..0000000000
--- a/packages/client/src/pages/admin/settings.vue
+++ /dev/null
@@ -1,262 +0,0 @@
-<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>
-
-					<FormTextarea v-model="description" class="_formBlock">
-						<template #label>{{ i18n.ts.instanceDescription }}</template>
-					</FormTextarea>
-
-					<FormInput v-model="tosUrl" class="_formBlock">
-						<template #prefix><i class="ti ti-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="ti ti-mail"></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="ti ti-link"></i></template>
-							<template #label>{{ i18n.ts.iconUrl }}</template>
-						</FormInput>
-
-						<FormInput v-model="bannerUrl" class="_formBlock">
-							<template #prefix><i class="ti ti-link"></i></template>
-							<template #label>{{ i18n.ts.bannerUrl }}</template>
-						</FormInput>
-
-						<FormInput v-model="backgroundImageUrl" class="_formBlock">
-							<template #prefix><i class="ti ti-link"></i></template>
-							<template #label>{{ i18n.ts.backgroundImageUrl }}</template>
-						</FormInput>
-
-						<FormInput v-model="themeColor" class="_formBlock">
-							<template #prefix><i class="ti ti-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="ti ti-key"></i></template>
-								<template #label>Public key</template>
-							</FormInput>
-
-							<FormInput v-model="swPrivateKey" class="_formBlock">
-								<template #prefix><i class="ti ti-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="ti ti-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';
-import FormInfo from '@/components/MkInfo.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import { fetchInstance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let name: string | null = $ref(null);
-let description: string | null = $ref(null);
-let tosUrl: string | null = $ref(null);
-let maintainerName: string | null = $ref(null);
-let maintainerEmail: string | null = $ref(null);
-let iconUrl: string | null = $ref(null);
-let bannerUrl: string | null = $ref(null);
-let backgroundImageUrl: string | null = $ref(null);
-let themeColor: any = $ref(null);
-let defaultLightTheme: any = $ref(null);
-let defaultDarkTheme: any = $ref(null);
-let enableLocalTimeline: boolean = $ref(false);
-let enableGlobalTimeline: boolean = $ref(false);
-let pinnedUsers: string = $ref('');
-let cacheRemoteFiles: boolean = $ref(false);
-let localDriveCapacityMb: any = $ref(0);
-let remoteDriveCapacityMb: any = $ref(0);
-let enableRegistration: boolean = $ref(false);
-let emailRequiredForSignup: boolean = $ref(false);
-let enableServiceWorker: boolean = $ref(false);
-let swPublicKey: any = $ref(null);
-let swPrivateKey: any = $ref(null);
-let deeplAuthKey: string = $ref('');
-let deeplIsPro: boolean = $ref(false);
-
-async function init() {
-	const meta = await os.api('admin/meta');
-	name = meta.name;
-	description = meta.description;
-	tosUrl = meta.tosUrl;
-	iconUrl = meta.iconUrl;
-	bannerUrl = meta.bannerUrl;
-	backgroundImageUrl = meta.backgroundImageUrl;
-	themeColor = meta.themeColor;
-	defaultLightTheme = meta.defaultLightTheme;
-	defaultDarkTheme = meta.defaultDarkTheme;
-	maintainerName = meta.maintainerName;
-	maintainerEmail = meta.maintainerEmail;
-	enableLocalTimeline = !meta.disableLocalTimeline;
-	enableGlobalTimeline = !meta.disableGlobalTimeline;
-	pinnedUsers = meta.pinnedUsers.join('\n');
-	cacheRemoteFiles = meta.cacheRemoteFiles;
-	localDriveCapacityMb = meta.driveCapacityPerLocalUserMb;
-	remoteDriveCapacityMb = meta.driveCapacityPerRemoteUserMb;
-	enableRegistration = !meta.disableRegistration;
-	emailRequiredForSignup = meta.emailRequiredForSignup;
-	enableServiceWorker = meta.enableServiceWorker;
-	swPublicKey = meta.swPublickey;
-	swPrivateKey = meta.swPrivateKey;
-	deeplAuthKey = meta.deeplAuthKey;
-	deeplIsPro = meta.deeplIsPro;
-}
-
-function save() {
-	os.apiWithDialog('admin/update-meta', {
-		name,
-		description,
-		tosUrl,
-		iconUrl,
-		bannerUrl,
-		backgroundImageUrl,
-		themeColor: themeColor === '' ? null : themeColor,
-		defaultLightTheme: defaultLightTheme === '' ? null : defaultLightTheme,
-		defaultDarkTheme: defaultDarkTheme === '' ? null : defaultDarkTheme,
-		maintainerName,
-		maintainerEmail,
-		disableLocalTimeline: !enableLocalTimeline,
-		disableGlobalTimeline: !enableGlobalTimeline,
-		pinnedUsers: pinnedUsers.split('\n'),
-		cacheRemoteFiles,
-		localDriveCapacityMb: parseInt(localDriveCapacityMb, 10),
-		remoteDriveCapacityMb: parseInt(remoteDriveCapacityMb, 10),
-		disableRegistration: !enableRegistration,
-		emailRequiredForSignup,
-		enableServiceWorker,
-		swPublicKey,
-		swPrivateKey,
-		deeplAuthKey,
-		deeplIsPro,
-	}).then(() => {
-		fetchInstance();
-	});
-}
-
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ti ti-check',
-	text: i18n.ts.save,
-	handler: save,
-}]);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.general,
-	icon: 'ti ti-settings',
-});
-</script>
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
deleted file mode 100644
index d466e21907..0000000000
--- a/packages/client/src/pages/admin/users.vue
+++ /dev/null
@@ -1,170 +0,0 @@
-<template>
-<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>{{ i18n.ts.sort }}</template>
-							<option value="-createdAt">{{ i18n.ts.registeredDate }} ({{ i18n.ts.ascendingOrder }})</option>
-							<option value="+createdAt">{{ i18n.ts.registeredDate }} ({{ i18n.ts.descendingOrder }})</option>
-							<option value="-updatedAt">{{ i18n.ts.lastUsed }} ({{ i18n.ts.ascendingOrder }})</option>
-							<option value="+updatedAt">{{ i18n.ts.lastUsed }} ({{ i18n.ts.descendingOrder }})</option>
-						</MkSelect>
-						<MkSelect v-model="state" style="flex: 1;">
-							<template #label>{{ i18n.ts.state }}</template>
-							<option value="all">{{ i18n.ts.all }}</option>
-							<option value="available">{{ i18n.ts.normal }}</option>
-							<option value="admin">{{ i18n.ts.administrator }}</option>
-							<option value="moderator">{{ i18n.ts.moderator }}</option>
-							<option value="silenced">{{ i18n.ts.silence }}</option>
-							<option value="suspended">{{ i18n.ts.suspend }}</option>
-						</MkSelect>
-						<MkSelect v-model="origin" style="flex: 1;">
-							<template #label>{{ i18n.ts.instance }}</template>
-							<option value="combined">{{ i18n.ts.all }}</option>
-							<option value="local">{{ i18n.ts.local }}</option>
-							<option value="remote">{{ i18n.ts.remote }}</option>
-						</MkSelect>
-					</div>
-					<div class="inputs">
-						<MkInput v-model="searchUsername" style="flex: 1;" type="text" :spellcheck="false" @update:model-value="$refs.users.reload()">
-							<template #prefix>@</template>
-							<template #label>{{ i18n.ts.username }}</template>
-						</MkInput>
-						<MkInput v-model="searchHost" style="flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params.origin === 'local'" @update:model-value="$refs.users.reload()">
-							<template #prefix>@</template>
-							<template #label>{{ i18n.ts.host }}</template>
-						</MkInput>
-					</div>
-
-					<MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination" class="users">
-						<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${new Date(user.updatedAt).toLocaleString()}`" class="user" :to="`/user-info/${user.id}`">
-							<MkUserCardMini :user="user"/>
-						</MkA>
-					</MkPagination>
-				</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/MkPagination.vue';
-import * as os from '@/os';
-import { lookupUser } from '@/scripts/lookup-user';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import MkUserCardMini from '@/components/MkUserCardMini.vue';
-
-let paginationComponent = $ref<InstanceType<typeof MkPagination>>();
-
-let sort = $ref('+createdAt');
-let state = $ref('all');
-let origin = $ref('local');
-let searchUsername = $ref('');
-let searchHost = $ref('');
-const pagination = {
-	endpoint: 'admin/show-users' as const,
-	limit: 10,
-	params: computed(() => ({
-		sort: sort,
-		state: state,
-		origin: origin,
-		username: searchUsername,
-		hostname: searchHost,
-	})),
-	offsetMode: true,
-};
-
-function searchUser() {
-	os.selectUser().then(user => {
-		show(user);
-	});
-}
-
-async function addUser() {
-	const { canceled: canceled1, result: username } = await os.inputText({
-		title: i18n.ts.username,
-	});
-	if (canceled1) return;
-
-	const { canceled: canceled2, result: password } = await os.inputText({
-		title: i18n.ts.password,
-		type: 'password',
-	});
-	if (canceled2) return;
-
-	os.apiWithDialog('admin/accounts/create', {
-		username: username,
-		password: password,
-	}).then(res => {
-		paginationComponent.reload();
-	});
-}
-
-function show(user) {
-	os.pageWindow(`/user-info/${user.id}`);
-}
-
-const headerActions = $computed(() => [{
-	icon: 'ti ti-search',
-	text: i18n.ts.search,
-	handler: searchUser,
-}, {
-	asFullButton: true,
-	icon: 'ti ti-plus',
-	text: i18n.ts.addUser,
-	handler: addUser,
-}, {
-	asFullButton: true,
-	icon: 'ti ti-search',
-	text: i18n.ts.lookup,
-	handler: lookupUser,
-}]);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => ({
-	title: i18n.ts.users,
-	icon: 'ti ti-users',
-})));
-</script>
-
-<style lang="scss" scoped>
-.lknzcolw {
-	> .users {
-
-		> .inputs {
-			display: flex;
-			margin-bottom: 16px;
-
-			> * {
-				margin-right: 16px;
-
-				&:last-child {
-					margin-right: 0;
-				}
-			}
-		}
-	
-		> .users {
-			margin-top: var(--margin);
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
-			grid-gap: 12px;
-
-			> .user:hover {
-				text-decoration: none;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
deleted file mode 100644
index 6a93b3b9fa..0000000000
--- a/packages/client/src/pages/announcements.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800">
-		<MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _content">
-			<section v-for="(announcement, i) in items" :key="announcement.id" class="_card announcement">
-				<div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
-				<div class="_content">
-					<Mfm :text="announcement.text"/>
-					<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
-				</div>
-				<div v-if="$i && !announcement.isRead" class="_footer">
-					<MkButton primary @click="read(items, announcement, i)"><i class="ti ti-check"></i> {{ $ts.gotIt }}</MkButton>
-				</div>
-			</section>
-		</MkPagination>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const 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 });
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.announcements,
-	icon: 'ti ti-speakerphone',
-});
-</script>
-
-<style lang="scss" scoped>
-.ruryvtyk {
-	> .announcement {
-		&:not(:last-child) {
-			margin-bottom: var(--margin);
-		}
-
-		> ._content {
-			> img {
-				display: block;
-				max-height: 300px;
-				max-width: 100%;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
deleted file mode 100644
index 0b2c284c99..0000000000
--- a/packages/client/src/pages/antenna-timeline.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<div ref="rootEl" v-hotkey.global="keymap" v-size="{ min: [800] }" class="tqmomfks">
-		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
-		<div class="tl _block">
-			<XTimeline
-				ref="tlEl" :key="antennaId"
-				class="tl"
-				src="antenna"
-				:antenna="antennaId"
-				:sound="true"
-				@queue="queueUpdated"
-			/>
-		</div>
-	</div>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import { scroll } from '@/scripts/scroll';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-
-const router = useRouter();
-
-const props = defineProps<{
-	antennaId: string;
-}>();
-
-let antenna = $ref(null);
-let queue = $ref(0);
-let rootEl = $ref<HTMLElement>();
-let tlEl = $ref<InstanceType<typeof XTimeline>>();
-const keymap = $computed(() => ({
-	't': focus,
-}));
-
-function queueUpdated(q) {
-	queue = q;
-}
-
-function top() {
-	scroll(rootEl, { top: 0 });
-}
-
-async function timetravel() {
-	const { canceled, result: date } = await os.inputDate({
-		title: i18n.ts.date,
-	});
-	if (canceled) return;
-
-	tlEl.timetravel(date);
-}
-
-function settings() {
-	router.push(`/my/antennas/${props.antennaId}`);
-}
-
-function focus() {
-	tlEl.focus();
-}
-
-watch(() => props.antennaId, async () => {
-	antenna = await os.api('antennas/show', {
-		antennaId: props.antennaId,
-	});
-}, { immediate: true });
-
-const headerActions = $computed(() => antenna ? [{
-	icon: 'fas fa-calendar-alt',
-	text: i18n.ts.jumpToSpecifiedDate,
-	handler: timetravel,
-}, {
-	icon: 'ti ti-settings',
-	text: i18n.ts.settings,
-	handler: settings,
-}] : []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => antenna ? {
-	title: antenna.name,
-	icon: 'ti ti-antenna',
-} : null));
-</script>
-
-<style lang="scss" scoped>
-.tqmomfks {
-	padding: var(--margin);
-
-	> .new {
-		position: sticky;
-		top: calc(var(--stickyTop, 0px) + 16px);
-		z-index: 1000;
-		width: 100%;
-
-		> button {
-			display: block;
-			margin: var(--margin) auto 0 auto;
-			padding: 8px 16px;
-			border-radius: 32px;
-		}
-	}
-
-	> .tl {
-		background: var(--bg);
-		border-radius: var(--radius);
-		overflow: clip;
-	}
-
-	&.min-width_800px {
-		max-width: 800px;
-		margin: 0 auto;
-	}
-}
-
-@container (min-width: 800px) {
-	.tqmomfks {
-		max-width: 800px;
-		margin: 0 auto;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/api-console.vue b/packages/client/src/pages/api-console.vue
deleted file mode 100644
index 1d5339b44c..0000000000
--- a/packages/client/src/pages/api-console.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<div class="_formRoot">
-			<div class="_formBlock">
-				<MkInput v-model="endpoint" :datalist="endpoints" class="_formBlock" @update:model-value="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="ti ti-send"></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>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import JSON5 from 'json5';
-import { Endpoints } from 'misskey-js';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const body = ref('{}');
-const endpoint = ref('');
-const endpoints = ref<any[]>([]);
-const sending = ref(false);
-const res = ref('');
-const withCredential = ref(true);
-
-os.api('endpoints').then(endpointResponse => {
-	endpoints.value = endpointResponse;
-});
-
-function send() {
-	sending.value = true;
-	const requestBody = JSON5.parse(body.value);
-	os.api(endpoint.value as keyof Endpoints, requestBody, requestBody.i || (withCredential.value ? undefined : null)).then(resp => {
-		sending.value = false;
-		res.value = JSON5.stringify(resp, null, 2);
-	}, err => {
-		sending.value = false;
-		res.value = JSON5.stringify(err, null, 2);
-	});
-}
-
-function onEndpointChange() {
-	os.api('endpoint', { endpoint: endpoint.value }, withCredential.value ? undefined : null).then(resp => {
-		const endpointBody = {};
-		for (const p of resp.params) {
-			endpointBody[p.name] =
-				p.type === 'String' ? '' :
-				p.type === 'Number' ? 0 :
-				p.type === 'Boolean' ? false :
-				p.type === 'Array' ? [] :
-				p.type === 'Object' ? {} :
-				null;
-		}
-		body.value = JSON5.stringify(endpointBody, null, 2);
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: 'API console',
-	icon: 'ti ti-terminal-2',
-});
-</script>
diff --git a/packages/client/src/pages/auth.form.vue b/packages/client/src/pages/auth.form.vue
deleted file mode 100644
index 1546735266..0000000000
--- a/packages/client/src/pages/auth.form.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-<section class="_section">
-	<div class="_title">{{ $t('_auth.shareAccess', { name: app.name }) }}</div>
-	<div class="_content">
-		<h2>{{ app.name }}</h2>
-		<p class="id">{{ app.id }}</p>
-		<p class="description">{{ app.description }}</p>
-	</div>
-	<div class="_content">
-		<h2>{{ $ts._auth.permissionAsk }}</h2>
-		<ul>
-			<li v-for="p in app.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
-		</ul>
-	</div>
-	<div class="_footer">
-		<MkButton inline @click="cancel">{{ $ts.cancel }}</MkButton>
-		<MkButton inline primary @click="accept">{{ $ts.accept }}</MkButton>
-	</div>
-</section>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-
-export default defineComponent({
-	components: {
-		MkButton,
-	},
-	props: ['session'],
-	computed: {
-		name(): string {
-			const el = document.createElement('div');
-			el.textContent = this.app.name;
-			return el.innerHTML;
-		},
-		app(): any {
-			return this.session.app;
-		},
-	},
-	methods: {
-		cancel() {
-			os.api('auth/deny', {
-				token: this.session.token,
-			}).then(() => {
-				this.$emit('denied');
-			});
-		},
-
-		accept() {
-			os.api('auth/accept', {
-				token: this.session.token,
-			}).then(() => {
-				this.$emit('accepted');
-			});
-		},
-	},
-});
-</script>
diff --git a/packages/client/src/pages/auth.vue b/packages/client/src/pages/auth.vue
deleted file mode 100644
index bb55881a22..0000000000
--- a/packages/client/src/pages/auth.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-<div v-if="$i && fetching" class="">
-	<MkLoading/>
-</div>
-<div v-else-if="$i">
-	<XForm
-		v-if="state == 'waiting'"
-		ref="form"
-		class="form"
-		:session="session"
-		@denied="state = 'denied'"
-		@accepted="accepted"
-	/>
-	<div v-if="state == 'denied'" class="denied">
-		<h1>{{ $ts._auth.denied }}</h1>
-	</div>
-	<div v-if="state == 'accepted'" class="accepted">
-		<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>
-	<div v-if="state == 'fetch-session-error'" class="error">
-		<p>{{ $ts.somethingHappened }}</p>
-	</div>
-</div>
-<div v-else class="signin">
-	<MkSignin @login="onLogin"/>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import XForm from './auth.form.vue';
-import MkSignin from '@/components/MkSignin.vue';
-import * as os from '@/os';
-import { login } from '@/account';
-
-export default defineComponent({
-	components: {
-		XForm,
-		MkSignin,
-	},
-	props: ['token'],
-	data() {
-		return {
-			state: null,
-			session: null,
-			fetching: true,
-		};
-	},
-	mounted() {
-		if (!this.$i) return;
-
-		// Fetch session
-		os.api('auth/session/show', {
-			token: this.token,
-		}).then(session => {
-			this.session = session;
-			this.fetching = false;
-
-			// 既に連携していた場合
-			if (this.session.app.isAuthorized) {
-				os.api('auth/accept', {
-					token: this.session.token,
-				}).then(() => {
-					this.accepted();
-				});
-			} else {
-				this.state = 'waiting';
-			}
-		}).catch(error => {
-			this.state = 'fetch-session-error';
-			this.fetching = false;
-		});
-	},
-	methods: {
-		accepted() {
-			this.state = 'accepted';
-			if (this.session.app.callbackUrl) {
-				location.href = `${this.session.app.callbackUrl}?token=${this.session.token}`;
-			}
-		}, onLogin(res) {
-			login(res.i);
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/client/src/pages/channel-editor.vue b/packages/client/src/pages/channel-editor.vue
deleted file mode 100644
index 5ae7e63f99..0000000000
--- a/packages/client/src/pages/channel-editor.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<div class="_formRoot">
-			<MkInput v-model="name" class="_formBlock">
-				<template #label>{{ i18n.ts.name }}</template>
-			</MkInput>
-
-			<MkTextarea v-model="description" class="_formBlock">
-				<template #label>{{ i18n.ts.description }}</template>
-			</MkTextarea>
-
-			<div class="banner">
-				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="ti ti-plus"></i> {{ i18n.ts._channel.setBanner }}</MkButton>
-				<div v-else-if="bannerUrl">
-					<img :src="bannerUrl" style="width: 100%;"/>
-					<MkButton @click="removeBannerImage()"><i class="ti ti-trash"></i> {{ i18n.ts._channel.removeBanner }}</MkButton>
-				</div>
-			</div>
-			<div class="_formBlock">
-				<MkButton primary @click="save()"><i class="ti ti-device-floppy"></i> {{ channelId ? i18n.ts.save : i18n.ts.create }}</MkButton>
-			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import { selectFile } from '@/scripts/select-file';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-
-const router = useRouter();
-
-const props = defineProps<{
-	channelId?: string;
-}>();
-
-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(() => 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: 'ti ti-device-tv',
-} : {
-	title: i18n.ts._channel.create,
-	icon: 'ti ti-device-tv',
-}));
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
deleted file mode 100644
index f271bb270f..0000000000
--- a/packages/client/src/pages/channel.vue
+++ /dev/null
@@ -1,184 +0,0 @@
-<template>
-<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="ti ti-chevron-up"></i></template>
-					<template v-else><i class="ti ti-chevron-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="ti ti-users ti-fw"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
-						<div><i class="ti ti-pencil ti-fw"></i><I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
-					</div>
-					<div class="fade"></div>
-				</div>
-				<div v-if="channel.description" class="description">
-					<Mfm :text="channel.description" :is-note="false" :i="$i"/>
-				</div>
-			</div>
-
-			<XPostForm v-if="$i" :channel="channel" class="post-form _panel _gap" fixed/>
-
-			<XTimeline :key="channelId" class="_gap" src="channel" :channel="channelId" @before="before" @after="after"/>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
-import MkContainer from '@/components/MkContainer.vue';
-import XPostForm from '@/components/MkPostForm.vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import XChannelFollowButton from '@/components/MkChannelFollowButton.vue';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const router = useRouter();
-
-const props = defineProps<{
-	channelId: string;
-}>();
-
-let channel = $ref(null);
-let showBanner = $ref(true);
-const pagination = {
-	endpoint: 'channels/timeline' as const,
-	limit: 10,
-	params: computed(() => ({
-		channelId: props.channelId,
-	})),
-};
-
-watch(() => props.channelId, async () => {
-	channel = await os.api('channels/show', {
-		channelId: props.channelId,
-	});
-}, { immediate: true });
-
-function edit() {
-	router.push(`/channels/${channel.id}/edit`);
-}
-
-const headerActions = $computed(() => channel && channel.userId ? [{
-	icon: 'ti ti-settings',
-	text: i18n.ts.edit,
-	handler: edit,
-}] : null);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => channel ? {
-	title: channel.name,
-	icon: 'ti ti-device-tv',
-} : null));
-</script>
-
-<style lang="scss" scoped>
-.wpgynlbz {
-	position: relative;
-
-	> .subscribe {
-		position: absolute;
-		z-index: 1;
-		top: 16px;
-		left: 16px;
-	}
-
-	> .toggle {
-		position: absolute;
-		z-index: 2;
-    top: 8px;
-		right: 8px;
-		font-size: 1.2em;
-		width: 48px;
-		height: 48px;
-		color: #fff;
-		background: rgba(0, 0, 0, 0.5);
-		border-radius: 100%;
-		
-		> i {
-			vertical-align: middle;
-		}
-	}
-	
-	> .banner {
-		position: relative;
-		height: 200px;
-		background-position: center;
-		background-size: cover;
-
-		> .fade {
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			height: 64px;
-			background: linear-gradient(0deg, var(--panel), var(--X15));
-		}
-
-		> .status {
-			position: absolute;
-			z-index: 1;
-			bottom: 16px;
-			right: 16px;
-			padding: 8px 12px;
-			font-size: 80%;
-			background: rgba(0, 0, 0, 0.7);
-			border-radius: 6px;
-			color: #fff;
-		}
-	}
-
-	> .description {
-		padding: 16px;
-	}
-
-	> .hideOverlay {
-		position: absolute;
-		z-index: 1;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		-webkit-backdrop-filter: var(--blur, blur(16px));
-		backdrop-filter: var(--blur, blur(16px));
-		background: rgba(0, 0, 0, 0.3);
-	}
-
-	&.hide {
-		> .subscribe {
-			display: none;
-		}
-
-		> .toggle {
-			top: 0;
-			right: 0;
-			height: 100%;
-			background: transparent;
-		}
-
-		> .banner {
-			height: 42px;
-			filter: blur(8px);
-
-			> * {
-				display: none;
-			}
-		}
-
-		> .description {
-			display: none;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
deleted file mode 100644
index 34e9dac196..0000000000
--- a/packages/client/src/pages/channels.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-<MkStickyContainer>
-	<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">
-				<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="ti ti-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" setup>
-import { computed, defineComponent, inject } from 'vue';
-import MkChannelPreview from '@/components/MkChannelPreview.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-
-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: 'ti ti-plus',
-	text: i18n.ts.create,
-	handler: create,
-}]);
-
-const headerTabs = $computed(() => [{
-	key: 'featured',
-	title: i18n.ts._channel.featured,
-	icon: 'ti ti-comet',
-}, {
-	key: 'following',
-	title: i18n.ts._channel.following,
-	icon: 'ti ti-heart',
-}, {
-	key: 'owned',
-	title: i18n.ts._channel.owned,
-	icon: 'ti ti-edit',
-}]);
-
-definePageMetadata(computed(() => ({
-	title: i18n.ts.channel,
-	icon: 'ti ti-device-tv',
-})));
-</script>
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
deleted file mode 100644
index e0fbcb6bed..0000000000
--- a/packages/client/src/pages/clip.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions"/></template>
-		<MkSpacer :content-max="800">
-		<div v-if="clip">
-			<div class="okzinsic _panel">
-				<div v-if="clip.description" class="description">
-					<Mfm :text="clip.description" :is-note="false" :i="$i"/>
-				</div>
-				<div class="user">
-					<MkAvatar :user="clip.user" class="avatar" :show-indicator="true"/> <MkUserName :user="clip.user" :nowrap="false"/>
-				</div>
-			</div>
-
-			<XNotes :pagination="pagination" :detail="true"/>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed, watch, provide } from 'vue';
-import * as misskey from 'misskey-js';
-import XNotes from '@/components/MkNotes.vue';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const props = defineProps<{
-	clipId: string,
-}>();
-
-let clip: misskey.entities.Clip = $ref<misskey.entities.Clip>();
-const pagination = {
-	endpoint: 'clips/notes' as const,
-	limit: 10,
-	params: computed(() => ({
-		clipId: props.clipId,
-	})),
-};
-
-const isOwned: boolean | null = $computed<boolean | null>(() => $i && clip && ($i.id === clip.userId));
-
-watch(() => props.clipId, async () => {
-	clip = await os.api('clips/show', {
-		clipId: props.clipId,
-	});
-}, {
-	immediate: true,
-}); 
-
-provide('currentClipPage', $$(clip));
-
-const headerActions = $computed(() => clip && isOwned ? [{
-	icon: 'ti ti-pencil',
-	text: i18n.ts.edit,
-	handler: async (): Promise<void> => {
-		const { canceled, result } = await os.form(clip.name, {
-			name: {
-				type: 'string',
-				label: i18n.ts.name,
-				default: clip.name,
-			},
-			description: {
-				type: 'string',
-				required: false,
-				multiline: true,
-				label: i18n.ts.description,
-				default: clip.description,
-			},
-			isPublic: {
-				type: 'boolean',
-				label: i18n.ts.public,
-				default: clip.isPublic,
-			},
-		});
-		if (canceled) return;
-
-		os.apiWithDialog('clips/update', {
-			clipId: clip.id,
-			...result,
-		});
-	},
-}, {
-	icon: 'ti ti-trash',
-	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: 'ti ti-paperclip',
-} : null));
-</script>
-
-<style lang="scss" scoped>
-.okzinsic {
-	position: relative;
-	margin-bottom: var(--margin);
-
-	> .description {
-		padding: 16px;
-	}
-
-	> .user {
-		$height: 32px;
-		padding: 16px;
-		border-top: solid 0.5px var(--divider);
-		line-height: $height;
-
-		> .avatar {
-			width: $height;
-			height: $height;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/drive.vue b/packages/client/src/pages/drive.vue
deleted file mode 100644
index 04ade5c207..0000000000
--- a/packages/client/src/pages/drive.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-<div>
-	<XDrive ref="drive" @cd="x => folder = x"/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import XDrive from '@/components/MkDrive.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let folder = $ref(null);
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => ({
-	title: folder ? folder.name : i18n.ts.drive,
-	icon: 'ti ti-cloud',
-	hideHeader: true,
-})));
-</script>
diff --git a/packages/client/src/pages/emojis.emoji.vue b/packages/client/src/pages/emojis.emoji.vue
deleted file mode 100644
index 40fe496520..0000000000
--- a/packages/client/src/pages/emojis.emoji.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-<button class="zuvgdzyu _button" @click="menu">
-	<img :src="emoji.url" class="img" :alt="emoji.name"/>
-	<div class="body">
-		<div class="name _monospace">{{ emoji.name }}</div>
-		<div class="info">{{ emoji.aliases.join(' ') }}</div>
-	</div>
-</button>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as os from '@/os';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	emoji: Record<string, unknown>; // TODO
-}>();
-
-function menu(ev) {
-	os.popupMenu([{
-		type: 'label',
-		text: ':' + props.emoji.name + ':',
-	}, {
-		text: i18n.ts.copy,
-		icon: 'ti ti-copy',
-		action: () => {
-			copyToClipboard(`:${props.emoji.name}:`);
-			os.success();
-		},
-	}], ev.currentTarget ?? ev.target);
-}
-</script>
-
-<style lang="scss" scoped>
-.zuvgdzyu {
-	display: flex;
-	align-items: center;
-	padding: 12px;
-	text-align: left;
-	background: var(--panel);
-	border-radius: 8px;
-
-	&:hover {
-		border-color: var(--accent);
-	}
-
-	> .img {
-		width: 42px;
-		height: 42px;
-	}
-
-	> .body {
-		padding: 0 0 0 8px;
-		white-space: nowrap;
-		overflow: hidden;
-
-		> .name {
-			text-overflow: ellipsis;
-			overflow: hidden;
-		}
-
-		> .info {
-			opacity: 0.5;
-			font-size: 0.9em;
-			text-overflow: ellipsis;
-			overflow: hidden;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/explore.featured.vue b/packages/client/src/pages/explore.featured.vue
deleted file mode 100644
index 18a371a086..0000000000
--- a/packages/client/src/pages/explore.featured.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-<MkSpacer :content-max="800">
-	<MkTab v-model="tab" style="margin-bottom: var(--margin);">
-		<option value="notes">{{ i18n.ts.notes }}</option>
-		<option value="polls">{{ i18n.ts.poll }}</option>
-	</MkTab>
-	<XNotes v-if="tab === 'notes'" :pagination="paginationForNotes"/>
-	<XNotes v-else-if="tab === 'polls'" :pagination="paginationForPolls"/>
-</MkSpacer>
-</template>
-
-<script lang="ts" setup>
-import XNotes from '@/components/MkNotes.vue';
-import MkTab from '@/components/MkTab.vue';
-import { i18n } from '@/i18n';
-
-const paginationForNotes = {
-	endpoint: 'notes/featured' as const,
-	limit: 10,
-	offsetMode: true,
-};
-
-const paginationForPolls = {
-	endpoint: 'notes/polls/recommendation' as const,
-	limit: 10,
-	offsetMode: true,
-};
-
-let tab = $ref('notes');
-</script>
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
deleted file mode 100644
index bfee0a6c07..0000000000
--- a/packages/client/src/pages/explore.users.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-<MkSpacer :content-max="1200">
-	<MkTab v-model="origin" style="margin-bottom: var(--margin);">
-		<option value="local">{{ i18n.ts.local }}</option>
-		<option value="remote">{{ i18n.ts.remote }}</option>
-	</MkTab>
-	<div v-if="origin === 'local'">
-		<template v-if="tag == null">
-			<MkFolder class="_gap" persist-key="explore-pinned-users">
-				<template #header><i class="fas fa-bookmark ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
-				<XUserList :pagination="pinnedUsers"/>
-			</MkFolder>
-			<MkFolder class="_gap" persist-key="explore-popular-users">
-				<template #header><i class="fas fa-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
-				<XUserList :pagination="popularUsers"/>
-			</MkFolder>
-			<MkFolder class="_gap" persist-key="explore-recently-updated-users">
-				<template #header><i class="fas fa-comment-alt ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
-				<XUserList :pagination="recentlyUpdatedUsers"/>
-			</MkFolder>
-			<MkFolder class="_gap" persist-key="explore-recently-registered-users">
-				<template #header><i class="ti ti-plus ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
-				<XUserList :pagination="recentlyRegisteredUsers"/>
-			</MkFolder>
-		</template>
-	</div>
-	<div v-else>
-		<MkFolder ref="tagsEl" :foldable="true" :expanded="false" class="_gap">
-			<template #header><i class="ti ti-hash ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularTags }}</template>
-
-			<div class="vxjfqztj">
-				<MkA v-for="tag in tagsLocal" :key="'local:' + tag.tag" :to="`/explore/tags/${tag.tag}`" class="local">{{ tag.tag }}</MkA>
-				<MkA v-for="tag in tagsRemote" :key="'remote:' + tag.tag" :to="`/explore/tags/${tag.tag}`">{{ tag.tag }}</MkA>
-			</div>
-		</MkFolder>
-
-		<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
-			<template #header><i class="ti ti-hash ti-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
-			<XUserList :pagination="tagUsers"/>
-		</MkFolder>
-
-		<template v-if="tag == null">
-			<MkFolder class="_gap">
-				<template #header><i class="fas fa-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
-				<XUserList :pagination="popularUsersF"/>
-			</MkFolder>
-			<MkFolder class="_gap">
-				<template #header><i class="fas fa-comment-alt ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
-				<XUserList :pagination="recentlyUpdatedUsersF"/>
-			</MkFolder>
-			<MkFolder class="_gap">
-				<template #header><i class="fas fa-rocket ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyDiscoveredUsers }}</template>
-				<XUserList :pagination="recentlyRegisteredUsersF"/>
-			</MkFolder>
-		</template>
-	</div>
-</MkSpacer>
-</template>
-
-<script lang="ts" setup>
-import { computed, watch } from 'vue';
-import XUserList from '@/components/MkUserList.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkTab from '@/components/MkTab.vue';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-
-const props = defineProps<{
-	tag?: string;
-}>();
-
-let origin = $ref('local');
-let tagsEl = $ref<InstanceType<typeof MkFolder>>();
-let tagsLocal = $ref([]);
-let tagsRemote = $ref([]);
-
-watch(() => props.tag, () => {
-	if (tagsEl) tagsEl.toggleContent(props.tag == null);
-});
-
-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',
-} };
-
-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;
-});
-</script>
-
-<style lang="scss" scoped>
-.vxjfqztj {
-	> * {
-		margin-right: 16px;
-
-		&.local {
-			font-weight: bold;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
deleted file mode 100644
index 6b0bcdaf62..0000000000
--- a/packages/client/src/pages/explore.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<div class="lznhrdub">
-		<div v-if="tab === 'featured'">
-			<XFeatured/>
-		</div>
-		<div v-else-if="tab === 'users'">
-			<XUsers/>
-		</div>
-		<div v-else-if="tab === 'search'">
-			<MkSpacer :content-max="1200">
-				<div>
-					<MkInput v-model="searchQuery" :debounce="true" type="search" class="_formBlock">
-						<template #prefix><i class="ti ti-search"></i></template>
-						<template #label>{{ i18n.ts.searchUser }}</template>
-					</MkInput>
-					<MkRadios v-model="searchOrigin" class="_formBlock">
-						<option value="combined">{{ i18n.ts.all }}</option>
-						<option value="local">{{ i18n.ts.local }}</option>
-						<option value="remote">{{ i18n.ts.remote }}</option>
-					</MkRadios>
-				</div>
-
-				<XUserList v-if="searchQuery" ref="searchEl" class="_gap" :pagination="searchPagination"/>
-			</MkSpacer>
-		</div>
-	</div>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed, watch } from 'vue';
-import XFeatured from './explore.featured.vue';
-import XUsers from './explore.users.vue';
-import MkFolder from '@/components/MkFolder.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 { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import XUserList from '@/components/MkUserList.vue';
-
-const props = defineProps<{
-	tag?: string;
-}>();
-
-let tab = $ref('featured');
-let tagsEl = $ref<InstanceType<typeof MkFolder>>();
-let searchQuery = $ref(null);
-let searchOrigin = $ref('combined');
-
-watch(() => props.tag, () => {
-	if (tagsEl) tagsEl.toggleContent(props.tag == null);
-});
-
-const searchPagination = {
-	endpoint: 'users/search' as const,
-	limit: 10,
-	params: computed(() => (searchQuery && searchQuery !== '') ? {
-		query: searchQuery,
-		origin: searchOrigin,
-	} : null),
-};
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => [{
-	key: 'featured',
-	icon: 'ti ti-bolt',
-	title: i18n.ts.featured,
-}, {
-	key: 'users',
-	icon: 'ti ti-users',
-	title: i18n.ts.users,
-}, {
-	key: 'search',
-	title: i18n.ts.search,
-}]);
-
-definePageMetadata(computed(() => ({
-	title: i18n.ts.explore,
-	icon: 'ti ti-hash',
-})));
-</script>
diff --git a/packages/client/src/pages/favorites.vue b/packages/client/src/pages/favorites.vue
deleted file mode 100644
index ab47efec71..0000000000
--- a/packages/client/src/pages/favorites.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<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>{{ i18n.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>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import XNote from '@/components/MkNote.vue';
-import XList from '@/components/MkDateSeparatedList.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const pagination = {
-	endpoint: 'i/favorites' as const,
-	limit: 10,
-};
-
-const pagingComponent = ref<InstanceType<typeof MkPagination>>();
-
-definePageMetadata({
-	title: i18n.ts.favorites,
-	icon: 'ti ti-star',
-});
-</script>
-
-<style lang="scss" module>
-.note {
-	background: var(--panel);
-	border-radius: var(--radius);
-}
-</style>
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
deleted file mode 100644
index b20679ccc1..0000000000
--- a/packages/client/src/pages/follow-requests.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader/></template>
-	<MkSpacer :content-max="800">
-		<MkPagination ref="paginationComponent" :pagination="pagination">
-			<template #empty>
-				<div class="_fullinfo">
-					<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-					<div>{{ i18n.ts.noFollowRequests }}</div>
-				</div>
-			</template>
-			<template #default="{items}">
-				<div class="mk-follow-requests">
-					<div v-for="req in items" :key="req.id" class="user _panel">
-						<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
-						<div class="body">
-							<div class="name">
-								<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA>
-								<p class="acct">@{{ acct(req.follower) }}</p>
-							</div>
-							<div v-if="req.follower.description" class="description" :title="req.follower.description">
-								<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
-							</div>
-							<div class="actions">
-								<button class="_button" @click="accept(req.follower)"><i class="ti ti-check"></i></button>
-								<button class="_button" @click="reject(req.follower)"><i class="ti ti-x"></i></button>
-							</div>
-						</div>
-					</div>
-				</div>
-			</template>
-		</MkPagination>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import { userPage, acct } from '@/filters/user';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const paginationComponent = ref<InstanceType<typeof MkPagination>>();
-
-const pagination = {
-	endpoint: 'following/requests/list' as const,
-	limit: 10,
-};
-
-function accept(user) {
-	os.api('following/requests/accept', { userId: user.id }).then(() => {
-		paginationComponent.value.reload();
-	});
-}
-
-function reject(user) {
-	os.api('following/requests/reject', { userId: user.id }).then(() => {
-		paginationComponent.value.reload();
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => ({
-	title: i18n.ts.followRequests,
-	icon: 'ti ti-user-plus',
-})));
-</script>
-
-<style lang="scss" scoped>
-.mk-follow-requests {
-	> .user {
-		display: flex;
-		padding: 16px;
-
-		> .avatar {
-			display: block;
-			flex-shrink: 0;
-			margin: 0 12px 0 0;
-			width: 42px;
-			height: 42px;
-			border-radius: 8px;
-		}
-
-		> .body {
-			display: flex;
-			width: calc(100% - 54px);
-			position: relative;
-
-			> .name {
-				width: 45%;
-
-				@media (max-width: 500px) {
-					width: 100%;
-				}
-
-				> .name,
-				> .acct {
-					display: block;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					overflow: hidden;
-					margin: 0;
-				}
-
-				> .name {
-					font-size: 16px;
-					line-height: 24px;
-				}
-
-				> .acct {
-					font-size: 15px;
-					line-height: 16px;
-					opacity: 0.7;
-				}
-			}
-
-			> .description {
-				width: 55%;
-				line-height: 42px;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				opacity: 0.7;
-				font-size: 14px;
-				padding-right: 40px;
-				padding-left: 8px;
-				box-sizing: border-box;
-
-				@media (max-width: 500px) {
-					display: none;
-				}
-			}
-
-			> .actions {
-				position: absolute;
-				top: 0;
-				bottom: 0;
-				right: 0;
-				margin: auto 0;
-
-				> button {
-					padding: 12px;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/follow.vue b/packages/client/src/pages/follow.vue
deleted file mode 100644
index 828246d678..0000000000
--- a/packages/client/src/pages/follow.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-<div class="mk-follow-page">
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as Acct from 'misskey-js/built/acct';
-import * as os from '@/os';
-import { mainRouter } from '@/router';
-import { i18n } from '@/i18n';
-
-async function follow(user): Promise<void> {
-	const { canceled } = await os.confirm({
-		type: 'question',
-		text: i18n.t('followConfirm', { name: user.name || user.username }),
-	});
-
-	if (canceled) {
-		window.close();
-		return;
-	}
-	
-	os.apiWithDialog('following/create', {
-		userId: user.id,
-	});
-}
-
-const acct = new URL(location.href).searchParams.get('acct');
-if (acct == null) {
-	throw new Error('acct required');
-}
-
-let promise;
-
-if (acct.startsWith('https://')) {
-	promise = os.api('ap/show', {
-		uri: acct,
-	});
-	promise.then(res => {
-		if (res.type === 'User') {
-			follow(res.object);
-		} else if (res.type === 'Note') {
-			mainRouter.push(`/notes/${res.object.id}`);
-		} else {
-			os.alert({
-				type: 'error',
-				text: 'Not a user',
-			}).then(() => {
-				window.close();
-			});
-		}
-	});
-} else {
-	promise = os.api('users/show', Acct.parse(acct));
-	promise.then(user => {
-		follow(user);
-	});
-}
-
-os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject);
-</script>
diff --git a/packages/client/src/pages/gallery/edit.vue b/packages/client/src/pages/gallery/edit.vue
deleted file mode 100644
index c8111d7890..0000000000
--- a/packages/client/src/pages/gallery/edit.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<FormInput v-model="title">
-				<template #label>{{ i18n.ts.title }}</template>
-			</FormInput>
-
-			<FormTextarea v-model="description" :max="500">
-				<template #label>{{ i18n.ts.description }}</template>
-			</FormTextarea>
-
-			<div class="">
-				<div v-for="file in files" :key="file.id" class="wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : null }">
-					<div class="name">{{ file.name }}</div>
-					<button v-tooltip="i18n.ts.remove" class="remove _button" @click="remove(file)"><i class="ti ti-x"></i></button>
-				</div>
-				<FormButton primary @click="selectFile"><i class="ti ti-plus"></i> {{ i18n.ts.attachFile }}</FormButton>
-			</div>
-
-			<FormSwitch v-model="isSensitive">{{ i18n.ts.markAsSensitive }}</FormSwitch>
-
-			<FormButton v-if="postId" primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
-			<FormButton v-else primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.publish }}</FormButton>
-
-			<FormButton v-if="postId" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</FormButton>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
-import FormButton from '@/components/MkButton.vue';
-import FormInput from '@/components/form/input.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import { selectFiles } from '@/scripts/select-file';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-
-const router = useRouter();
-
-const props = defineProps<{
-	postId?: string;
-}>();
-
-let init = $ref(null);
-let files = $ref([]);
-let description = $ref(null);
-let title = $ref(null);
-let isSensitive = $ref(false);
-
-function selectFile(evt) {
-	selectFiles(evt.currentTarget ?? evt.target, null).then(selected => {
-		files = files.concat(selected);
-	});
-}
-
-function remove(file) {
-	files = files.filter(f => f.id !== file.id);
-}
-
-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,
-		});
-		router.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,
-	});
-	router.push('/gallery');
-}
-
-watch(() => props.postId, () => {
-	init = () => props.postId ? os.api('gallery/posts/show', {
-		postId: props.postId,
-	}).then(post => {
-		files = post.files;
-		title = post.title;
-		description = post.description;
-		isSensitive = post.isSensitive;
-	}) : Promise.resolve(null);
-}, { immediate: true });
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => props.postId ? {
-	title: i18n.ts.edit,
-	icon: 'ti ti-pencil',
-} : {
-	title: i18n.ts.postToGallery,
-	icon: 'ti ti-pencil',
-}));
-</script>
-
-<style lang="scss" scoped>
-.wqugxsfx {
-	height: 200px;
-	background-size: contain;
-	background-position: center;
-	background-repeat: no-repeat;
-	position: relative;
-
-	> .name {
-		position: absolute;
-		top: 8px;
-		left: 9px;
-		padding: 8px;
-		background: var(--panel);
-	}
-
-	> .remove {
-		position: absolute;
-		top: 8px;
-		right: 9px;
-		padding: 8px;
-		background: var(--panel);
-	}
-}
-</style>
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
deleted file mode 100644
index 24a634bab5..0000000000
--- a/packages/client/src/pages/gallery/index.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="1400">
-		<div class="_root">
-			<div v-if="tab === 'explore'">
-				<MkFolder class="_gap">
-					<template #header><i class="ti ti-clock"></i>{{ i18n.ts.recentPosts }}</template>
-					<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
-						<div class="vfpdbgtk">
-							<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
-						</div>
-					</MkPagination>
-				</MkFolder>
-				<MkFolder class="_gap">
-					<template #header><i class="ti ti-comet"></i>{{ i18n.ts.popularPosts }}</template>
-					<MkPagination v-slot="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
-						<div class="vfpdbgtk">
-							<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
-						</div>
-					</MkPagination>
-				</MkFolder>
-			</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>
-				</MkPagination>
-			</div>
-			<div v-else-if="tab === 'my'">
-				<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="ti ti-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
-				<MkPagination v-slot="{items}" :pagination="myPostsPagination">
-					<div class="vfpdbgtk">
-						<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
-					</div>
-				</MkPagination>
-			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineComponent, watch } from 'vue';
-import XUserList from '@/components/MkUserList.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkInput from '@/components/form/input.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkTab from '@/components/MkTab.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
-import number from '@/filters/number';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-import { useRouter } from '@/router';
-
-const router = useRouter();
-
-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',
-	},
-}));
-
-watch(() => props.tag, () => {
-	if (tagsRef) tagsRef.tags.toggleContent(props.tag == null);
-});
-
-const headerActions = $computed(() => [{
-	icon: 'ti ti-plus',
-	text: i18n.ts.create,
-	handler: () => {
-		router.push('/gallery/new');
-	},
-}]);
-
-const headerTabs = $computed(() => [{
-	key: 'explore',
-	title: i18n.ts.gallery,
-	icon: 'ti ti-icons',
-}, {
-	key: 'liked',
-	title: i18n.ts._gallery.liked,
-	icon: 'ti ti-heart',
-}, {
-	key: 'my',
-	title: i18n.ts._gallery.my,
-	icon: 'ti ti-edit',
-}]);
-
-definePageMetadata({
-	title: i18n.ts.gallery,
-	icon: 'ti ti-icons',
-});
-</script>
-
-<style lang="scss" scoped>
-.vfpdbgtk {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-	grid-gap: 12px;
-	margin: 0 var(--margin);
-
-	> .post {
-
-	}
-}
-</style>
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
deleted file mode 100644
index 85ab1048be..0000000000
--- a/packages/client/src/pages/gallery/post.vue
+++ /dev/null
@@ -1,265 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="1000" :margin-min="16" :margin-max="32">
-		<div class="_root">
-			<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
-				<div v-if="post" class="rkxwuolj">
-					<div class="files">
-						<div v-for="file in post.files" :key="file.id" class="file">
-							<img :src="file.url"/>
-						</div>
-					</div>
-					<div class="body _block">
-						<div class="title">{{ post.title }}</div>
-						<div class="description"><Mfm :text="post.description"/></div>
-						<div class="info">
-							<i class="ti ti-clock"></i> <MkTime :time="post.createdAt" mode="detail"/>
-						</div>
-						<div class="actions">
-							<div class="like">
-								<MkButton v-if="post.isLiked" v-tooltip="i18n.ts._gallery.unlike" class="button" primary @click="unlike()"><i class="ti ti-heart-off"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
-								<MkButton v-else v-tooltip="i18n.ts._gallery.like" class="button" @click="like()"><i class="ti ti-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
-							</div>
-							<div class="other">
-								<button v-if="$i && $i.id === post.user.id" v-tooltip="i18n.ts.edit" v-click-anime class="_button" @click="edit"><i class="ti ti-pencil ti-fw"></i></button>
-								<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ti ti-repeat ti-fw"></i></button>
-								<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="ti ti-share ti-fw"></i></button>
-							</div>
-						</div>
-						<div class="user">
-							<MkAvatar :user="post.user" class="avatar"/>
-							<div class="name">
-								<MkUserName :user="post.user" style="display: block;"/>
-								<MkAcct :user="post.user"/>
-							</div>
-							<MkFollowButton v-if="!$i || $i.id != post.user.id" :user="post.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
-						</div>
-					</div>
-					<MkAd :prefer="['horizontal', 'horizontal-big']"/>
-					<MkContainer :max-height="300" :foldable="true" class="other">
-						<template #header><i class="ti ti-clock"></i> {{ i18n.ts.recentPosts }}</template>
-						<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
-							<div class="sdrarzaf">
-								<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
-							</div>
-						</MkPagination>
-					</MkContainer>
-				</div>
-				<MkError v-else-if="error" @retry="fetch()"/>
-				<MkLoading v-else/>
-			</transition>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineComponent, inject, watch } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import { url } from '@/config';
-import { useRouter } from '@/router';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const router = useRouter();
-
-const props = defineProps<{
-	postId: string;
-}>();
-
-let post = $ref(null);
-let 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(() => [{
-	icon: 'ti ti-pencil',
-	text: i18n.ts.edit,
-	handler: edit,
-}]);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => post ? {
-	title: post.title,
-	avatar: post.user,
-} : null));
-</script>
-
-<style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
-	transition: opacity 0.125s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-
-.rkxwuolj {
-	> .files {
-		> .file {
-			> img {
-				display: block;
-				max-width: 100%;
-				max-height: 500px;
-				margin: 0 auto;
-			}
-
-			& + .file {
-				margin-top: 16px;
-			}
-		}
-	}
-
-	> .body {
-		padding: 32px;
-
-		> .title {
-			font-weight: bold;
-			font-size: 1.2em;
-			margin-bottom: 16px;
-		}
-
-		> .info {
-			margin-top: 16px;
-			font-size: 90%;
-			opacity: 0.7;
-		}
-
-		> .actions {
-			display: flex;
-			align-items: center;
-			margin-top: 16px;
-			padding: 16px 0 0 0;
-			border-top: solid 0.5px var(--divider);
-
-			> .like {
-				> .button {
-					--accent: rgb(241 97 132);
-					--X8: rgb(241 92 128);
-					--buttonBg: rgb(216 71 106 / 5%);
-					--buttonHoverBg: rgb(216 71 106 / 10%);
-					color: #ff002f;
-
-					::v-deep(.count) {
-						margin-left: 0.5em;
-					}
-				}
-			}
-
-			> .other {
-				margin-left: auto;
-
-				> button {
-					padding: 8px;
-					margin: 0 8px;
-
-					&:hover {
-						color: var(--fgHighlighted);
-					}
-				}
-			}
-		}
-
-		> .user {
-			margin-top: 16px;
-			padding: 16px 0 0 0;
-			border-top: solid 0.5px var(--divider);
-			display: flex;
-			align-items: center;
-
-			> .avatar {
-				width: 52px;
-				height: 52px;
-			}
-
-			> .name {
-				margin: 0 0 0 12px;
-				font-size: 90%;
-			}
-
-			> .koudoku {
-				margin-left: auto;
-			}
-		}
-	}
-}
-
-.sdrarzaf {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-	grid-gap: 12px;
-	margin: var(--margin);
-
-	> .post {
-
-	}
-}
-</style>
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
deleted file mode 100644
index a2a1254360..0000000000
--- a/packages/client/src/pages/instance-info.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer v-if="instance" :content-max="600" :margin-min="16" :margin-max="32">
-		<div v-if="tab === 'overview'" class="_formRoot">
-			<div class="fnfelxur">
-				<img :src="faviconUrl" alt="" class="icon"/>
-				<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
-			</div>
-			<MkKeyValue :copy="host" oneline style="margin: 1em 0;">
-				<template #key>Host</template>
-				<template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0;">
-				<template #key>{{ i18n.ts.software }}</template>
-				<template #value><span class="_monospace">{{ instance.softwareName || `(${i18n.ts.unknown})` }} / {{ instance.softwareVersion || `(${i18n.ts.unknown})` }}</span></template>
-			</MkKeyValue>
-			<MkKeyValue oneline style="margin: 1em 0;">
-				<template #key>{{ i18n.ts.administrator }}</template>
-				<template #value>{{ instance.maintainerName || `(${i18n.ts.unknown})` }} ({{ instance.maintainerEmail || `(${i18n.ts.unknown})` }})</template>
-			</MkKeyValue>
-			<MkKeyValue>
-				<template #key>{{ i18n.ts.description }}</template>
-				<template #value>{{ instance.description }}</template>
-			</MkKeyValue>
-
-			<FormSection v-if="iAmModerator">
-				<template #label>Moderation</template>
-				<FormSwitch v-model="suspended" class="_formBlock" @update:model-value="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</FormSwitch>
-				<FormSwitch v-model="isBlocked" class="_formBlock" @update:model-value="toggleBlock">{{ i18n.ts.blockThisInstance }}</FormSwitch>
-				<MkButton @click="refreshMetadata"><i class="ti ti-refresh"></i> Refresh metadata</MkButton>
-			</FormSection>
-
-			<FormSection>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ i18n.ts.registeredAt }}</template>
-					<template #value><MkTime mode="detail" :time="instance.caughtAt"/></template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ i18n.ts.updatedAt }}</template>
-					<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ i18n.ts.latestRequestSentAt }}</template>
-					<template #value><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ i18n.ts.latestStatus }}</template>
-					<template #value>{{ instance.latestStatus ? instance.latestStatus : 'N/A' }}</template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>{{ i18n.ts.latestRequestReceivedAt }}</template>
-					<template #value><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></template>
-				</MkKeyValue>
-			</FormSection>
-	
-			<FormSection>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>Following (Pub)</template>
-					<template #value>{{ number(instance.followingCount) }}</template>
-				</MkKeyValue>
-				<MkKeyValue oneline style="margin: 1em 0;">
-					<template #key>Followers (Sub)</template>
-					<template #value>{{ number(instance.followersCount) }}</template>
-				</MkKeyValue>
-			</FormSection>
-
-			<FormSection>
-				<template #label>Well-known resources</template>
-				<FormLink :to="`https://${host}/.well-known/host-meta`" external style="margin-bottom: 8px;">host-meta</FormLink>
-				<FormLink :to="`https://${host}/.well-known/host-meta.json`" external style="margin-bottom: 8px;">host-meta.json</FormLink>
-				<FormLink :to="`https://${host}/.well-known/nodeinfo`" external style="margin-bottom: 8px;">nodeinfo</FormLink>
-				<FormLink :to="`https://${host}/robots.txt`" external style="margin-bottom: 8px;">robots.txt</FormLink>
-				<FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink>
-			</FormSection>
-		</div>
-		<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;">
-						<option value="instance-requests">{{ i18n.ts._instanceCharts.requests }}</option>
-						<option value="instance-users">{{ i18n.ts._instanceCharts.users }}</option>
-						<option value="instance-users-total">{{ i18n.ts._instanceCharts.usersTotal }}</option>
-						<option value="instance-notes">{{ i18n.ts._instanceCharts.notes }}</option>
-						<option value="instance-notes-total">{{ i18n.ts._instanceCharts.notesTotal }}</option>
-						<option value="instance-ff">{{ i18n.ts._instanceCharts.ff }}</option>
-						<option value="instance-ff-total">{{ i18n.ts._instanceCharts.ffTotal }}</option>
-						<option value="instance-drive-usage">{{ i18n.ts._instanceCharts.cacheSize }}</option>
-						<option value="instance-drive-usage-total">{{ i18n.ts._instanceCharts.cacheSizeTotal }}</option>
-						<option value="instance-drive-files">{{ i18n.ts._instanceCharts.files }}</option>
-						<option value="instance-drive-files-total">{{ i18n.ts._instanceCharts.filesTotal }}</option>
-					</MkSelect>
-				</div>
-				<div class="charts">
-					<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div>
-					<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
-					<div class="label">{{ i18n.t('recentNDays', { n: 90 }) }}</div>
-					<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
-				</div>
-			</div>
-		</div>
-		<div v-else-if="tab === 'users'" class="_formRoot">
-			<MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;">
-				<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${new Date(user.updatedAt).toLocaleString()}`" class="user" :to="`/user-info/${user.id}`">
-					<MkUserCardMini :user="user"/>
-				</MkA>
-			</MkPagination>
-		</div>
-		<div v-else-if="tab === 'raw'" class="_formRoot">
-			<MkObjectView tall :value="instance">
-			</MkObjectView>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'misskey-js';
-import MkChart from '@/components/MkChart.vue';
-import MkObjectView from '@/components/MkObjectView.vue';
-import FormLink from '@/components/form/link.vue';
-import MkLink from '@/components/MkLink.vue';
-import MkButton from '@/components/MkButton.vue';
-import FormSection from '@/components/form/section.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import MkSelect from '@/components/form/select.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import bytes from '@/filters/bytes';
-import { iAmModerator } from '@/account';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-import MkUserCardMini from '@/components/MkUserCardMini.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
-
-const props = defineProps<{
-	host: string;
-}>();
-
-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 faviconUrl = $ref(null);
-
-const usersPagination = {
-	endpoint: iAmModerator ? 'admin/show-users' : 'users' as const,
-	limit: 10,
-	params: {
-		sort: '+updatedAt',
-		state: 'all',
-		hostname: props.host,
-	},
-	offsetMode: true,
-};
-
-async function fetch() {
-	instance = await os.api('federation/show-instance', {
-		host: props.host,
-	});
-	suspended = instance.isSuspended;
-	isBlocked = instance.isBlocked;
-	faviconUrl = getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.iconUrl, 'preview');
-}
-
-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),
-	});
-}
-
-async function toggleSuspend(v) {
-	await os.api('admin/federation/update-instance', {
-		host: instance.host,
-		isSuspended: suspended,
-	});
-}
-
-function refreshMetadata() {
-	os.api('admin/federation/refresh-remote-instance-metadata', {
-		host: instance.host,
-	});
-	os.alert({
-		text: 'Refresh requested',
-	});
-}
-
-fetch();
-
-const headerActions = $computed(() => [{
-	text: `https://${props.host}`,
-	icon: 'ti ti-external-link',
-	handler: () => {
-		window.open(`https://${props.host}`, '_blank');
-	},
-}]);
-
-const headerTabs = $computed(() => [{
-	key: 'overview',
-	title: i18n.ts.overview,
-	icon: 'ti ti-info-circle',
-}, {
-	key: 'chart',
-	title: i18n.ts.charts,
-	icon: 'ti ti-chart-line',
-}, {
-	key: 'users',
-	title: i18n.ts.users,
-	icon: 'ti ti-users',
-}, {
-	key: 'raw',
-	title: 'Raw',
-	icon: 'ti ti-code',
-}]);
-
-definePageMetadata({
-	title: props.host,
-	icon: 'ti ti-server',
-});
-</script>
-
-<style lang="scss" scoped>
-.fnfelxur {
-	display: flex;
-	align-items: center;
-
-	> .icon {
-		display: block;
-		margin: 0 16px 0 0;
-		height: 64px;
-		border-radius: 8px;
-	}
-
-	> .name {
-		word-break: break-all;
-	}
-}
-
-.cmhjzshl {
-	> .selects {
-		display: flex;
-		margin: 0 0 16px 0;
-	}
-
-	> .charts {
-		> .label {
-			margin-bottom: 12px;
-			font-weight: bold;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
deleted file mode 100644
index 0d30998330..0000000000
--- a/packages/client/src/pages/messaging/index.vue
+++ /dev/null
@@ -1,327 +0,0 @@
-<template>
-<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="ti ti-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>
-					</div>
-				</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>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<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/MkButton.vue';
-import { acct } from '@/filters/user';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { useRouter } from '@/router';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { $i } from '@/account';
-
-const router = useRouter();
-
-let fetching = $ref(true);
-let moreFetching = $ref(false);
-let messages = $ref([]);
-let connection = $ref(null);
-
-const getAcct = Acct.toString;
-
-function isMe(message) {
-	return message.userId === $i.id;
-}
-
-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)));
-
-		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: 'ti ti-user',
-		action: () => { startUser(); },
-	}, {
-		text: i18n.ts.messagingWithGroup,
-		icon: 'ti ti-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: 'ti ti-messages',
-});
-</script>
-
-<style lang="scss" scoped>
-.yweeujhr {
-
-	> .start {
-		margin: 0 auto var(--margin) auto;
-	}
-
-	> .history {
-		> .message {
-			display: block;
-			text-decoration: none;
-			margin-bottom: var(--margin);
-
-			* {
-				pointer-events: none;
-				user-select: none;
-			}
-
-			&:hover {
-				.avatar {
-					filter: saturate(200%);
-				}
-			}
-
-			&:active {
-			}
-
-			&.isRead,
-			&.isMe {
-				opacity: 0.8;
-			}
-
-			&:not(.isMe):not(.isRead) {
-				> div {
-					background-image: url("/client-assets/unread.svg");
-					background-repeat: no-repeat;
-					background-position: 0 center;
-				}
-			}
-
-			&:after {
-				content: "";
-				display: block;
-				clear: both;
-			}
-
-			> div {
-				padding: 20px 30px;
-
-				&:after {
-					content: "";
-					display: block;
-					clear: both;
-				}
-
-				> header {
-					display: flex;
-					align-items: center;
-					margin-bottom: 2px;
-					white-space: nowrap;
-					overflow: hidden;
-
-					> .name {
-						margin: 0;
-						padding: 0;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						font-size: 1em;
-						font-weight: bold;
-						transition: all 0.1s ease;
-					}
-
-					> .username {
-						margin: 0 8px;
-					}
-
-					> .time {
-						margin: 0 0 0 auto;
-					}
-				}
-
-				> .avatar {
-					float: left;
-					width: 54px;
-					height: 54px;
-					margin: 0 16px 0 0;
-					border-radius: 8px;
-					transition: all 0.1s ease;
-				}
-
-				> .body {
-
-					> .text {
-						display: block;
-						margin: 0 0 0 0;
-						padding: 0;
-						overflow: hidden;
-						overflow-wrap: break-word;
-						font-size: 1.1em;
-						color: var(--faceText);
-
-						.me {
-							opacity: 0.7;
-						}
-					}
-
-					> .image {
-						display: block;
-						max-width: 100%;
-						max-height: 512px;
-					}
-				}
-			}
-		}
-	}
-
-	&.max-width_400px {
-		> .history {
-			> .message {
-				&:not(.isMe):not(.isRead) {
-					> div {
-						background-image: none;
-						border-left: solid 4px #3aa2dc;
-					}
-				}
-
-				> div {
-					padding: 16px;
-					font-size: 0.9em;
-
-					> .avatar {
-						margin: 0 12px 0 0;
-					}
-				}
-			}
-		}
-	}
-}
-
-@container (max-width: 400px) {
-	.yweeujhr {
-		> .history {
-			> .message {
-				&:not(.isMe):not(.isRead) {
-					> div {
-						background-image: none;
-						border-left: solid 4px #3aa2dc;
-					}
-				}
-
-				> div {
-					padding: 16px;
-					font-size: 0.9em;
-
-					> .avatar {
-						margin: 0 12px 0 0;
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
deleted file mode 100644
index 84572815c0..0000000000
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ /dev/null
@@ -1,364 +0,0 @@
-<template>
-<div
-	class="pemppnzi _block"
-	@dragover.stop="onDragover"
-	@drop.stop="onDrop"
->
-	<textarea
-		ref="textEl"
-		v-model="text"
-		:placeholder="i18n.ts.inputMessageHere"
-		@keydown="onKeydown"
-		@compositionupdate="onCompositionUpdate"
-		@paste="onPaste"
-	></textarea>
-	<footer>
-		<div v-if="file" class="file" @click="file = null">{{ file.name }}</div>
-		<div class="buttons">
-			<button class="_button" @click="chooseFile"><i class="ti ti-photo-plus"></i></button>
-			<button class="_button" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
-			<button class="send _button" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send">
-				<template v-if="!sending"><i class="ti ti-send"></i></template><template v-if="sending"><MkLoading :em="true"/></template>
-			</button>
-		</div>
-	</footer>
-	<input ref="fileEl" type="file" @change="onChangeFile"/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, watch } from 'vue';
-import * as Misskey from '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 { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-//import { Autocomplete } from '@/scripts/autocomplete';
-import { uploadFile } from '@/scripts/upload';
-
-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);
-		}
-	} else {
-		if (items[0].kind === 'file') {
-			os.alert({
-				type: 'error',
-				text: i18n.ts.onlyOneFileCanBeAttached,
-			});
-		}
-	}
-}
-
-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();
-		switch (ev.dataTransfer.effectAllowed) {
-			case 'all':
-			case 'uninitialized':
-			case 'copy': 
-			case 'copyLink': 
-			case 'copyMove': 
-				ev.dataTransfer.dropEffect = 'copy';
-				break;
-			case 'linkMove':
-			case 'move':
-				ev.dataTransfer.dropEffect = 'move';
-				break;
-			default:
-				ev.dataTransfer.dropEffect = 'none';
-				break;
-		}
-	}
-}
-
-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>
-
-<style lang="scss" scoped>
-.pemppnzi {
-	position: relative;
-
-	> textarea {
-		cursor: auto;
-		display: block;
-		width: 100%;
-		min-width: 100%;
-		max-width: 100%;
-		min-height: 80px;
-		margin: 0;
-		padding: 16px 16px 0 16px;
-		resize: none;
-		font-size: 1em;
-		font-family: inherit;
-		outline: none;
-		border: none;
-		border-radius: 0;
-		box-shadow: none;
-		background: transparent;
-		box-sizing: border-box;
-		color: var(--fg);
-	}
-
-	footer {
-		position: sticky;
-		bottom: 0;
-		background: var(--panel);
-
-		> .file {
-			padding: 8px;
-			color: var(--fg);
-			background: transparent;
-			cursor: pointer;
-		}
-	}
-
-	.files {
-		display: block;
-		margin: 0;
-		padding: 0 8px;
-		list-style: none;
-
-		&:after {
-			content: '';
-			display: block;
-			clear: both;
-		}
-
-		> li {
-			display: block;
-			float: left;
-			margin: 4px;
-			padding: 0;
-			width: 64px;
-			height: 64px;
-			background-color: #eee;
-			background-repeat: no-repeat;
-			background-position: center center;
-			background-size: cover;
-			cursor: move;
-
-			&:hover {
-				> .remove {
-					display: block;
-				}
-			}
-
-			> .remove {
-				display: none;
-				position: absolute;
-				right: -6px;
-				top: -6px;
-				margin: 0;
-				padding: 0;
-				background: transparent;
-				outline: none;
-				border: none;
-				border-radius: 0;
-				box-shadow: none;
-				cursor: pointer;
-			}
-		}
-	}
-
-	.buttons {
-		display: flex;
-
-		._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;
-			}
-		}
-
-		> .send {
-			margin-left: auto;
-			color: var(--accent);
-
-			&:hover {
-				color: var(--accentLighten);
-			}
-
-			&:active {
-				color: var(--accentDarken);
-				transition: color 0s ease;
-			}
-		}
-	}
-
-	input[type=file] {
-		display: none;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
deleted file mode 100644
index dbf0e37b73..0000000000
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ /dev/null
@@ -1,367 +0,0 @@
-<template>
-<div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
-	<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
-	<div class="content">
-		<div class="balloon" :class="{ noText: message.text == null }">
-			<button v-if="isMe" class="delete-button" :title="$ts.delete" @click="del">
-				<img src="/client-assets/remove.png" alt="Delete"/>
-			</button>
-			<div v-if="!message.isDeleted" class="content">
-				<Mfm v-if="message.text" ref="text" class="text" :text="message.text" :i="$i"/>
-				<div v-if="message.file" class="file">
-					<a :href="message.file.url" rel="noopener" target="_blank" :title="message.file.name">
-						<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"/>
-						<p v-else>{{ message.file.name }}</p>
-					</a>
-				</div>
-			</div>
-			<div v-else class="content">
-				<p class="is-deleted">{{ $ts.deleted }}</p>
-			</div>
-		</div>
-		<div></div>
-		<MkUrlPreview v-for="url in urls" :key="url" :url="url" style="margin: 8px 0;"/>
-		<footer>
-			<template v-if="isGroup">
-				<span v-if="message.reads.length > 0" class="read">{{ $ts.messageRead }} {{ message.reads.length }}</span>
-			</template>
-			<template v-else>
-				<span v-if="isMe && message.isRead" class="read">{{ $ts.messageRead }}</span>
-			</template>
-			<MkTime :time="message.createdAt"/>
-			<template v-if="message.is_edited"><i class="ti ti-pencil"></i></template>
-		</footer>
-	</div>
-</div>
-</template>
-
-<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/MkUrlPreview.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-
-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>
-.thvuemwp {
-	$me-balloon-color: var(--accent);
-
-	position: relative;
-	background-color: transparent;
-	display: flex;
-
-	> .avatar {
-		position: sticky;
-		top: calc(var(--stickyTop, 0px) + 16px);
-		display: block;
-		width: 54px;
-		height: 54px;
-		transition: all 0.1s ease;
-	}
-
-	> .content {
-		min-width: 0;
-
-		> .balloon {
-			position: relative;
-			display: inline-flex;
-			align-items: center;
-			padding: 0;
-			min-height: 38px;
-			border-radius: 16px;
-			max-width: 100%;
-
-			&:before {
-				content: "";
-				pointer-events: none;
-				display: block;
-				position: absolute;
-				top: 12px;
-			}
-
-			& + * {
-				clear: both;
-			}
-
-			&:hover {
-				> .delete-button {
-					display: block;
-				}
-			}
-
-			> .delete-button {
-				display: none;
-				position: absolute;
-				z-index: 1;
-				top: -4px;
-				right: -4px;
-				margin: 0;
-				padding: 0;
-				cursor: pointer;
-				outline: none;
-				border: none;
-				border-radius: 0;
-				box-shadow: none;
-				background: transparent;
-
-				> img {
-					vertical-align: bottom;
-					width: 16px;
-					height: 16px;
-					cursor: pointer;
-				}
-			}
-
-			> .content {
-				max-width: 100%;
-
-				> .is-deleted {
-					display: block;
-					margin: 0;
-					padding: 0;
-					overflow: hidden;
-					overflow-wrap: break-word;
-					font-size: 1em;
-					color: rgba(#000, 0.5);
-				}
-
-				> .text {
-					display: block;
-					margin: 0;
-					padding: 12px 18px;
-					overflow: hidden;
-					overflow-wrap: break-word;
-					word-break: break-word;
-					font-size: 1em;
-					color: rgba(#000, 0.8);
-
-					& + .file {
-						> a {
-							border-radius: 0 0 16px 16px;
-						}
-					}
-				}
-
-				> .file {
-					> a {
-						display: block;
-						max-width: 100%;
-						border-radius: 16px;
-						overflow: hidden;
-						text-decoration: none;
-
-						&:hover {
-							text-decoration: none;
-
-							> p {
-								background: #ccc;
-							}
-						}
-
-						> * {
-							display: block;
-							margin: 0;
-							width: 100%;
-							max-height: 512px;
-							object-fit: contain;
-							box-sizing: border-box;
-						}
-
-						> p {
-							padding: 30px;
-							text-align: center;
-							color: #555;
-							background: #ddd;
-						}
-					}
-				}
-			}
-		}
-
-		> footer {
-			display: block;
-			margin: 2px 0 0 0;
-			font-size: 0.65em;
-
-			> .read {
-				margin: 0 8px;
-			}
-
-			> i {
-				margin-left: 4px;
-			}
-		}
-	}
-
-	&:not(.isMe) {
-		padding-left: var(--margin);
-
-		> .content {
-			padding-left: 16px;
-			padding-right: 32px;
-
-			> .balloon {
-				$color: var(--messageBg);
-				background: $color;
-
-				&.noText {
-					background: transparent;
-				}
-
-				&:not(.noText):before {
-					left: -14px;
-					border-top: solid 8px transparent;
-					border-right: solid 8px $color;
-					border-bottom: solid 8px transparent;
-					border-left: solid 8px transparent;
-				}
-
-				> .content {
-					> .text {
-						color: var(--fg);
-					}
-				}
-			}
-
-			> footer {
-				text-align: left;
-			}
-		}
-	}
-
-	&.isMe {
-		flex-direction: row-reverse;
-		padding-right: var(--margin);
-		right: var(--margin); // 削除時にposition: absoluteになったときに使う
-
-		> .content {
-			padding-right: 16px;
-			padding-left: 32px;
-			text-align: right;
-
-			> .balloon {
-				background: $me-balloon-color;
-				text-align: left;
-
-				::selection {
-					color: var(--accent);
-					background-color: #fff;
-				} 
-
-				&.noText {
-					background: transparent;
-				}
-
-				&:not(.noText):before {
-					right: -14px;
-					left: auto;
-					border-top: solid 8px transparent;
-					border-right: solid 8px transparent;
-					border-bottom: solid 8px transparent;
-					border-left: solid 8px $me-balloon-color;
-				}
-
-				> .content {
-
-					> p.is-deleted {
-						color: rgba(#fff, 0.5);
-					}
-
-					> .text {
-						&, ::v-deep(*) {
-							color: var(--fgOnAccent) !important;
-						}
-					}
-				}
-			}
-
-			> footer {
-				text-align: right;
-
-				> .read {
-					user-select: none;
-				}
-			}
-		}
-	}
-
-	&.max-width_400px {
-		> .avatar {
-			width: 48px;
-			height: 48px;
-		}
-
-		> .content {
-			> .balloon {
-				> .content {
-					> .text {
-						font-size: 0.9em;
-					}
-				}
-			}
-		}
-	}
-
-	&.max-width_500px {
-		> .content {
-			> .balloon {
-				> .content {
-					> .text {
-						padding: 8px 16px;
-					}
-				}
-			}
-		}
-	}
-}
-
-@container (max-width: 400px) {
-	.thvuemwp {
-		> .avatar {
-			width: 48px;
-			height: 48px;
-		}
-
-		> .content {
-			> .balloon {
-				> .content {
-					> .text {
-						font-size: 0.9em;
-					}
-				}
-			}
-		}
-	}
-}
-
-@container (max-width: 500px) {
-	.thvuemwp {
-		> .content {
-			> .balloon {
-				> .content {
-					> .text {
-						padding: 8px 16px;
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
deleted file mode 100644
index b6eeb9260e..0000000000
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ /dev/null
@@ -1,411 +0,0 @@
-<template>
-<div
-	ref="rootEl"
-	class="_section"
-	@dragover.prevent.stop="onDragover"
-	@drop.prevent.stop="onDrop"
->
-	<div class="_content mk-messaging-room">
-		<div class="body">
-			<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="i18n.ts.typingUsers" text-tag="span" class="users">
-					<template #users>
-						<b v-for="typer in typers" :key="typer.id" class="user">{{ typer.username }}</b>
-					</template>
-				</I18n>
-				<MkEllipsis/>
-			</div>
-			<transition :name="animation ? 'fade' : ''">
-				<div v-show="showIndicator" class="new-message">
-					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas ti-fw fa-arrow-circle-down"></i>{{ i18n.ts.newMessageExists }}</button>
-				</div>
-			</transition>
-			<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" class="form"/>
-		</footer>
-	</div>
-</div>
-</template>
-
-<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 XList from '@/components/MkDateSeparatedList.vue';
-import MkPagination, { Paging } from '@/components/MkPagination.vue';
-import { isBottomVisible, onScrollBottom, scrollToBottom } from '@/scripts/scroll';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import * as sound from '@/scripts/sound';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { defaultStore } from '@/store';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const props = defineProps<{
-	userAcct?: string;
-	groupId?: string;
-}>();
-
-let rootEl = $ref<HTMLDivElement>();
-let formEl = $ref<InstanceType<typeof XForm>>();
-let pagingComponent = $ref<InstanceType<typeof MkPagination>>();
-
-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;
-
-let pagination: Paging | null = $ref(null);
-
-watch([() => props.userAcct, () => props.groupId], () => {
-	if (connection) connection.dispose();
-	fetch();
-});
-
-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) {
-		switch (ev.dataTransfer.effectAllowed) {
-			case 'all':
-			case 'uninitialized':
-			case 'copy': 
-			case 'copyLink': 
-			case 'copyMove': 
-				ev.dataTransfer.dropEffect = 'copy';
-				break;
-			case 'linkMove':
-			case 'move':
-				ev.dataTransfer.dropEffect = 'move';
-				break;
-			default:
-				ev.dataTransfer.dropEffect = 'none';
-				break;
-		}
-	} 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();
-});
-
-definePageMetadata(computed(() => !fetching ? user ? {
-	userName: user,
-	avatar: user,
-} : {
-	title: group?.name,
-	icon: 'ti ti-users',
-} : null));
-</script>
-
-<style lang="scss" scoped>
-.mk-messaging-room {
-	position: relative;
-	overflow: auto;
-
-	> .body {
-		.more {
-			display: block;
-			margin: 16px auto;
-			padding: 0 12px;
-			line-height: 24px;
-			color: #fff;
-			background: rgba(#000, 0.3);
-			border-radius: 12px;
-
-			&:hover {
-				background: rgba(#000, 0.4);
-			}
-
-			&:active {
-				background: rgba(#000, 0.5);
-			}
-
-			&.fetching {
-				cursor: wait;
-			}
-
-			> i {
-				margin-right: 4px;
-			}
-		}
-
-		.messages {
-			padding: 8px 0;
-
-			> ::v-deep(*) {
-				margin-bottom: 16px;
-			}
-		}
-	}
-
-	> footer {
-		width: 100%;
-		position: sticky;
-		z-index: 2;
-		bottom: 0;
-		padding-top: 8px;
-		bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
-
-		> .new-message {
-			width: 100%;
-			padding-bottom: 8px;
-			text-align: center;
-
-			> button {
-				display: inline-block;
-				margin: 0;
-				padding: 0 12px;
-				line-height: 32px;
-				font-size: 12px;
-				border-radius: 16px;
-
-				> i {
-					display: inline-block;
-					margin-right: 8px;
-				}
-			}
-		}
-
-		> .typers {
-			position: absolute;
-			bottom: 100%;
-			padding: 0 8px 0 8px;
-			font-size: 0.9em;
-			color: var(--fgTransparentWeak);
-
-			> .users {
-				> .user + .user:before {
-					content: ", ";
-					font-weight: normal;
-				}
-
-				> .user:last-of-type:after {
-					content: " ";
-				}
-			}
-		}
-
-		> .form {
-			max-height: 12em;
-			overflow-y: scroll;
-			border-top: solid 0.5px var(--divider);
-		}
-	}
-}
-
-.fade-enter-active, .fade-leave-active {
-	transition: opacity 0.1s;
-}
-
-.fade-enter-from, .fade-leave-to {
-	transition: opacity 0.5s;
-	opacity: 0;
-}
-</style>
diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue
deleted file mode 100644
index 7c85dfb7ad..0000000000
--- a/packages/client/src/pages/mfm-cheat-sheet.vue
+++ /dev/null
@@ -1,387 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader/></template>
-	<MkSpacer :content-max="800">
-		<div class="mwysmxbg">
-			<div>{{ i18n.ts._mfm.intro }}</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.mention }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.mentionDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_mention"/>
-						<MkTextarea v-model="preview_mention"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.hashtag }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.hashtagDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_hashtag"/>
-						<MkTextarea v-model="preview_hashtag"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.url }}</div>
-				<div class="content">
-					<p>{{ i18n.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 class="section _block">
-				<div class="title">{{ i18n.ts._mfm.link }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.linkDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_link"/>
-						<MkTextarea v-model="preview_link"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.emoji }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.emojiDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_emoji"/>
-						<MkTextarea v-model="preview_emoji"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.bold }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.boldDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_bold"/>
-						<MkTextarea v-model="preview_bold"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.small }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.smallDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_small"/>
-						<MkTextarea v-model="preview_small"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.quote }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.quoteDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_quote"/>
-						<MkTextarea v-model="preview_quote"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.center }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.centerDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_center"/>
-						<MkTextarea v-model="preview_center"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.inlineCode }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_inlineCode"/>
-						<MkTextarea v-model="preview_inlineCode"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.blockCode }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_blockCode"/>
-						<MkTextarea v-model="preview_blockCode"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.inlineMath }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.inlineMathDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_inlineMath"/>
-						<MkTextarea v-model="preview_inlineMath"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<!-- deprecated
-		<div class="section _block">
-			<div class="title">{{ i18n.ts._mfm.search }}</div>
-			<div class="content">
-				<p>{{ i18n.ts._mfm.searchDescription }}</p>
-				<div class="preview">
-					<Mfm :text="preview_search"/>
-					<MkTextarea v-model="preview_search"><template #label>MFM</template></MkTextarea>
-				</div>
-			</div>
-		</div>
-		-->
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.flip }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.flipDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_flip"/>
-						<MkTextarea v-model="preview_flip"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.font }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.fontDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_font"/>
-						<MkTextarea v-model="preview_font"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.x2 }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.x2Description }}</p>
-					<div class="preview">
-						<Mfm :text="preview_x2"/>
-						<MkTextarea v-model="preview_x2"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.x3 }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.x3Description }}</p>
-					<div class="preview">
-						<Mfm :text="preview_x3"/>
-						<MkTextarea v-model="preview_x3"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.x4 }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.x4Description }}</p>
-					<div class="preview">
-						<Mfm :text="preview_x4"/>
-						<MkTextarea v-model="preview_x4"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.blur }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.blurDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_blur"/>
-						<MkTextarea v-model="preview_blur"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.jelly }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.jellyDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_jelly"/>
-						<MkTextarea v-model="preview_jelly"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.tada }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.tadaDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_tada"/>
-						<MkTextarea v-model="preview_tada"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.jump }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.jumpDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_jump"/>
-						<MkTextarea v-model="preview_jump"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.bounce }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.bounceDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_bounce"/>
-						<MkTextarea v-model="preview_bounce"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.spin }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.spinDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_spin"/>
-						<MkTextarea v-model="preview_spin"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.shake }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.shakeDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_shake"/>
-						<MkTextarea v-model="preview_shake"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.twitch }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.twitchDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_twitch"/>
-						<MkTextarea v-model="preview_twitch"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.rainbow }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.rainbowDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_rainbow"/>
-						<MkTextarea v-model="preview_rainbow"><template #label>MFM</template></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.sparkle }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.sparkleDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_sparkle"/>
-						<MkTextarea v-model="preview_sparkle"><span>MFM</span></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.rotate }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.rotateDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_rotate"/>
-						<MkTextarea v-model="preview_rotate"><span>MFM</span></MkTextarea>
-					</div>
-				</div>
-			</div>
-			<div class="section _block">
-				<div class="title">{{ i18n.ts._mfm.plain }}</div>
-				<div class="content">
-					<p>{{ i18n.ts._mfm.plainDescription }}</p>
-					<div class="preview">
-						<Mfm :text="preview_plain"/>
-						<MkTextarea v-model="preview_plain"><span>MFM</span></MkTextarea>
-					</div>
-				</div>
-			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { defineComponent } from 'vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-
-let preview_mention = $ref('@example');
-let preview_hashtag = $ref('#test');
-let preview_url = $ref('https://example.com');
-let preview_link = $ref(`[${i18n.ts._mfm.dummy}](https://example.com)`);
-let preview_emoji = $ref(instance.emojis.length ? `:${instance.emojis[0].name}:` : ':emojiname:');
-let preview_bold = $ref(`**${i18n.ts._mfm.dummy}**`);
-let preview_small = $ref(`<small>${i18n.ts._mfm.dummy}</small>`);
-let preview_center = $ref(`<center>${i18n.ts._mfm.dummy}</center>`);
-let preview_inlineCode = $ref('`<: "Hello, world!"`');
-let preview_blockCode = $ref('```\n~ (#i, 100) {\n\t<: ? ((i % 15) = 0) "FizzBuzz"\n\t\t.? ((i % 3) = 0) "Fizz"\n\t\t.? ((i % 5) = 0) "Buzz"\n\t\t. i\n}\n```');
-let preview_inlineMath = $ref('\\(x= \\frac{-b\' \\pm \\sqrt{(b\')^2-ac}}{a}\\)');
-let preview_quote = $ref(`> ${i18n.ts._mfm.dummy}`);
-let preview_search = $ref(`${i18n.ts._mfm.dummy} 検索`);
-let preview_jelly = $ref('$[jelly 🍮] $[jelly.speed=5s 🍮]');
-let preview_tada = $ref('$[tada 🍮] $[tada.speed=5s 🍮]');
-let preview_jump = $ref('$[jump 🍮] $[jump.speed=5s 🍮]');
-let preview_bounce = $ref('$[bounce 🍮] $[bounce.speed=5s 🍮]');
-let preview_shake = $ref('$[shake 🍮] $[shake.speed=5s 🍮]');
-let preview_twitch = $ref('$[twitch 🍮] $[twitch.speed=5s 🍮]');
-let preview_spin = $ref('$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]\n\n$[spin.speed=5s 🍮]');
-let preview_flip = $ref(`$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${i18n.ts._mfm.dummy}]`);
-let preview_font = $ref(`$[font.serif ${i18n.ts._mfm.dummy}]\n$[font.monospace ${i18n.ts._mfm.dummy}]\n$[font.cursive ${i18n.ts._mfm.dummy}]\n$[font.fantasy ${i18n.ts._mfm.dummy}]`);
-let preview_x2 = $ref('$[x2 🍮]');
-let preview_x3 = $ref('$[x3 🍮]');
-let preview_x4 = $ref('$[x4 🍮]');
-let preview_blur = $ref(`$[blur ${i18n.ts._mfm.dummy}]`);
-let preview_rainbow = $ref('$[rainbow 🍮] $[rainbow.speed=5s 🍮]');
-let preview_sparkle = $ref('$[sparkle 🍮]');
-let preview_rotate = $ref('$[rotate 🍮]');
-let preview_plain = $ref('<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>');
-
-definePageMetadata({
-	title: i18n.ts._mfm.cheatSheet,
-	icon: 'ti ti-question-circle',
-});
-</script>
-
-<style lang="scss" scoped>
-.mwysmxbg {
-	background: var(--bg);
-
-	> .section {
-		> .title {
-			position: sticky;
-			z-index: 1;
-			top: var(--stickyTop, 0px);
-			padding: 16px;
-			font-weight: bold;
-			-webkit-backdrop-filter: var(--blur, blur(10px));
-			backdrop-filter: var(--blur, blur(10px));
-			background-color: var(--X16);
-		}
-
-		> .content {
-			> p {
-				margin: 0;
-				padding: 16px;
-			}
-
-			> .preview {
-				border-top: solid 0.5px var(--divider);
-				padding: 16px;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/miauth.vue b/packages/client/src/pages/miauth.vue
deleted file mode 100644
index 5de072cbfa..0000000000
--- a/packages/client/src/pages/miauth.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-<MkSpacer :content-max="800">
-	<div v-if="$i">
-		<div v-if="state == 'waiting'" class="waiting _section">
-			<div class="_content">
-				<MkLoading/>
-			</div>
-		</div>
-		<div v-if="state == 'denied'" class="denied _section">
-			<div class="_content">
-				<p>{{ i18n.ts._auth.denied }}</p>
-			</div>
-		</div>
-		<div v-else-if="state == 'accepted'" class="accepted _section">
-			<div class="_content">
-				<p v-if="callback">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
-				<p v-else>{{ i18n.ts._auth.pleaseGoBack }}</p>
-			</div>
-		</div>
-		<div v-else class="_section">
-			<div v-if="name" class="_title">{{ $t('_auth.shareAccess', { name: name }) }}</div>
-			<div v-else class="_title">{{ i18n.ts._auth.shareAccessAsk }}</div>
-			<div class="_content">
-				<p>{{ i18n.ts._auth.permissionAsk }}</p>
-				<ul>
-					<li v-for="p in _permissions" :key="p">{{ $t(`_permissions.${p}`) }}</li>
-				</ul>
-			</div>
-			<div class="_footer">
-				<MkButton inline @click="deny">{{ i18n.ts.cancel }}</MkButton>
-				<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
-			</div>
-		</div>
-	</div>
-	<div v-else class="signin">
-		<MkSignin @login="onLogin"/>
-	</div>
-</MkSpacer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkSignin from '@/components/MkSignin.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { $i, login } from '@/account';
-import { appendQuery, query } from '@/scripts/url';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	session: string;
-	callback?: string;
-	name: string;
-	icon: string;
-	permission: string; // コンマ区切り
-}>();
-
-const _permissions = props.permission.split(',');
-
-let state = $ref<string | null>(null);
-
-async function accept(): Promise<void> {
-	state = 'waiting';
-	await os.api('miauth/gen-token', {
-		session: props.session,
-		name: props.name,
-		iconUrl: props.icon,
-		permission: _permissions,
-	});
-
-	state = 'accepted';
-	if (props.callback) {
-		location.href = appendQuery(props.callback, query({
-			session: props.session,
-		}));
-	}
-}
-
-function deny(): void {
-	state = 'denied';
-}
-
-function onLogin(res): void {
-	login(res.i);
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/client/src/pages/my-antennas/create.vue b/packages/client/src/pages/my-antennas/create.vue
deleted file mode 100644
index 005b036696..0000000000
--- a/packages/client/src/pages/my-antennas/create.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-<div class="geegznzt">
-	<XAntenna :antenna="draft" @created="onAntennaCreated"/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { inject } from 'vue';
-import XAntenna from './editor.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { useRouter } from '@/router';
-
-const router = useRouter();
-
-let draft = $ref({
-	name: '',
-	src: 'all',
-	userListId: null,
-	userGroupId: null,
-	users: [],
-	keywords: [],
-	excludeKeywords: [],
-	withReplies: false,
-	caseSensitive: false,
-	withFile: false,
-	notify: false,
-});
-
-function onAntennaCreated() {
-	router.push('/my/antennas');
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.manageAntennas,
-	icon: 'ti ti-antenna',
-});
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/client/src/pages/my-antennas/edit.vue b/packages/client/src/pages/my-antennas/edit.vue
deleted file mode 100644
index cb583faaeb..0000000000
--- a/packages/client/src/pages/my-antennas/edit.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-<div class="">
-	<XAntenna v-if="antenna" :antenna="antenna" @updated="onAntennaUpdated"/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { inject, watch } from 'vue';
-import XAntenna from './editor.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const router = useRouter();
-
-let antenna: any = $ref(null);
-
-const props = defineProps<{
-	antennaId: string
-}>();
-
-function onAntennaUpdated() {
-	router.push('/my/antennas');
-}
-
-os.api('antennas/show', { antennaId: props.antennaId }).then((antennaResponse) => {
-	antenna = antennaResponse;
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.manageAntennas,
-	icon: 'ti ti-antenna',
-});
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/client/src/pages/my-antennas/editor.vue b/packages/client/src/pages/my-antennas/editor.vue
deleted file mode 100644
index a409a734b5..0000000000
--- a/packages/client/src/pages/my-antennas/editor.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-<div class="shaynizk">
-	<div class="form">
-		<MkInput v-model="name" class="_formBlock">
-			<template #label>{{ i18n.ts.name }}</template>
-		</MkInput>
-		<MkSelect v-model="src" class="_formBlock">
-			<template #label>{{ i18n.ts.antennaSource }}</template>
-			<option value="all">{{ i18n.ts._antennaSources.all }}</option>
-			<!--<option value="home">{{ i18n.ts._antennaSources.homeTimeline }}</option>-->
-			<option value="users">{{ i18n.ts._antennaSources.users }}</option>
-			<!--<option value="list">{{ i18n.ts._antennaSources.userList }}</option>-->
-			<!--<option value="group">{{ i18n.ts._antennaSources.userGroup }}</option>-->
-		</MkSelect>
-		<MkSelect v-if="src === 'list'" v-model="userListId" class="_formBlock">
-			<template #label>{{ i18n.ts.userList }}</template>
-			<option v-for="list in userLists" :key="list.id" :value="list.id">{{ list.name }}</option>
-		</MkSelect>
-		<MkSelect v-else-if="src === 'group'" v-model="userGroupId" class="_formBlock">
-			<template #label>{{ i18n.ts.userGroup }}</template>
-			<option v-for="group in userGroups" :key="group.id" :value="group.id">{{ group.name }}</option>
-		</MkSelect>
-		<MkTextarea v-else-if="src === 'users'" v-model="users" class="_formBlock">
-			<template #label>{{ i18n.ts.users }}</template>
-			<template #caption>{{ i18n.ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ i18n.ts.addUser }}</button></template>
-		</MkTextarea>
-		<MkSwitch v-model="withReplies" class="_formBlock">{{ i18n.ts.withReplies }}</MkSwitch>
-		<MkTextarea v-model="keywords" class="_formBlock">
-			<template #label>{{ i18n.ts.antennaKeywords }}</template>
-			<template #caption>{{ i18n.ts.antennaKeywordsDescription }}</template>
-		</MkTextarea>
-		<MkTextarea v-model="excludeKeywords" class="_formBlock">
-			<template #label>{{ i18n.ts.antennaExcludeKeywords }}</template>
-			<template #caption>{{ i18n.ts.antennaKeywordsDescription }}</template>
-		</MkTextarea>
-		<MkSwitch v-model="caseSensitive" class="_formBlock">{{ i18n.ts.caseSensitive }}</MkSwitch>
-		<MkSwitch v-model="withFile" class="_formBlock">{{ i18n.ts.withFileAntenna }}</MkSwitch>
-		<MkSwitch v-model="notify" class="_formBlock">{{ i18n.ts.notifyAntenna }}</MkSwitch>
-	</div>
-	<div class="actions">
-		<MkButton inline primary @click="saveAntenna()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-		<MkButton v-if="antenna.id != null" inline danger @click="deleteAntenna()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { watch } from 'vue';
-import * as Acct from 'misskey-js/built/acct';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	antenna: any
-}>();
-
-const emit = defineEmits<{
-	(ev: 'created'): void,
-	(ev: 'updated'): void,
-	(ev: 'deleted'): void,
-}>();
-
-let name: string = $ref(props.antenna.name);
-let src: string = $ref(props.antenna.src);
-let userListId: any = $ref(props.antenna.userListId);
-let userGroupId: any = $ref(props.antenna.userGroupId);
-let users: string = $ref(props.antenna.users.join('\n'));
-let keywords: string = $ref(props.antenna.keywords.map(x => x.join(' ')).join('\n'));
-let excludeKeywords: string = $ref(props.antenna.excludeKeywords.map(x => x.join(' ')).join('\n'));
-let caseSensitive: boolean = $ref(props.antenna.caseSensitive);
-let withReplies: boolean = $ref(props.antenna.withReplies);
-let withFile: boolean = $ref(props.antenna.withFile);
-let notify: boolean = $ref(props.antenna.notify);
-let userLists: any = $ref(null);
-let userGroups: any = $ref(null);
-
-watch(() => src, async () => {
-	if (src === 'list' && userLists === null) {
-		userLists = await os.api('users/lists/list');
-	}
-
-	if (src === 'group' && userGroups === null) {
-		const groups1 = await os.api('users/groups/owned');
-		const groups2 = await os.api('users/groups/joined');
-
-		userGroups = [...groups1, ...groups2];
-	}
-});
-
-async function saveAntenna() {
-	const antennaData = {
-		name,
-		src,
-		userListId,
-		userGroupId,
-		withReplies,
-		withFile,
-		notify,
-		caseSensitive,
-		users: users.trim().split('\n').map(x => x.trim()),
-		keywords: keywords.trim().split('\n').map(x => x.trim().split(' ')),
-		excludeKeywords: excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')),
-	};
-
-	if (props.antenna.id == null) {
-		await os.apiWithDialog('antennas/create', antennaData);
-		emit('created');
-	} else {
-		antennaData['antennaId'] = props.antenna.id;
-		await os.apiWithDialog('antennas/update', antennaData);
-		emit('updated');
-	}
-}
-
-async function deleteAntenna() {
-	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: props.antenna.name }),
-	});
-	if (canceled) return;
-
-	await os.api('antennas/delete', {
-		antennaId: props.antenna.id,
-	});
-
-	os.success();
-	emit('deleted');
-}
-
-function addUser() {
-	os.selectUser().then(user => {
-		users = users.trim();
-		users += '\n@' + Acct.toString(user as any);
-		users = users.trim();
-	});
-}
-</script>
-
-<style lang="scss" scoped>
-.shaynizk {
-	> .form {
-		padding: 32px;
-	}
-
-	> .actions {
-		padding: 24px 32px;
-		border-top: solid 0.5px var(--divider);
-	}
-}
-</style>
diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue
deleted file mode 100644
index 9daf23f9b5..0000000000
--- a/packages/client/src/pages/my-antennas/index.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<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="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
-
-		<div class="">
-			<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-				<MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
-					<div class="name">{{ antenna.name }}</div>
-				</MkA>
-			</MkPagination>
-		</div>
-	</div>
-</MkSpacer></MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const pagination = {
-	endpoint: 'antennas/list' as const,
-	limit: 10,
-};
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.manageAntennas,
-	icon: 'ti ti-antenna',
-});
-</script>
-
-<style lang="scss" scoped>
-.ieepwinx {
-
-	> .add {
-		margin: 0 auto 16px auto;
-	}
-
-	.ljoevbzj {
-		display: block;
-		padding: 16px;
-		margin-bottom: 8px;
-		border: solid 1px var(--divider);
-		border-radius: 6px;
-
-		&:hover {
-			border: solid 1px var(--accent);
-			text-decoration: none;
-		}
-
-		> .name {
-			font-weight: bold;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/my-clips/index.vue b/packages/client/src/pages/my-clips/index.vue
deleted file mode 100644
index dd6b5b3a37..0000000000
--- a/packages/client/src/pages/my-clips/index.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<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="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
-
-			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="list">
-				<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
-					<b>{{ item.name }}</b>
-					<div v-if="item.description" class="description">{{ item.description }}</div>
-				</MkA>
-			</MkPagination>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const pagination = {
-	endpoint: 'clips/list' as const,
-	limit: 10,
-};
-
-const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
-
-async function create() {
-	const { canceled, result } = await os.form(i18n.ts.createNewClip, {
-		name: {
-			type: 'string',
-			label: i18n.ts.name,
-		},
-		description: {
-			type: 'string',
-			required: false,
-			multiline: true,
-			label: i18n.ts.description,
-		},
-		isPublic: {
-			type: 'boolean',
-			label: i18n.ts.public,
-			default: false,
-		},
-	});
-	if (canceled) return;
-
-	os.apiWithDialog('clips/create', result);
-
-	pagingComponent.reload();
-}
-
-function onClipCreated() {
-	pagingComponent.reload();
-}
-
-function onClipDeleted() {
-	pagingComponent.reload();
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.clip,
-	icon: 'ti ti-paperclip',
-	action: {
-		icon: 'ti ti-plus',
-		handler: create,
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.qtcaoidl {
-	> .add {
-		margin: 0 auto 16px auto;
-	}
-
-	> .list {
-		> .item {
-			display: block;
-			padding: 16px;
-
-			> .description {
-				margin-top: 8px;
-				padding-top: 8px;
-				border-top: solid 0.5px var(--divider);
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue
deleted file mode 100644
index 3476436b27..0000000000
--- a/packages/client/src/pages/my-lists/index.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<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="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton>
-
-			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists _content">
-				<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
-					<div class="name">{{ list.name }}</div>
-					<MkAvatars :user-ids="list.userIds"/>
-				</MkA>
-			</MkPagination>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkAvatars from '@/components/MkAvatars.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
-
-const pagination = {
-	endpoint: 'users/lists/list' as const,
-	limit: 10,
-};
-
-async function create() {
-	const { canceled, result: name } = await os.inputText({
-		title: i18n.ts.enterListName,
-	});
-	if (canceled) return;
-	await os.apiWithDialog('users/lists/create', { name: name });
-	pagingComponent.reload();
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.manageLists,
-	icon: 'ti ti-list',
-	action: {
-		icon: 'ti ti-plus',
-		handler: create,
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.qkcjvfiv {
-	> .add {
-		margin: 0 auto var(--margin) auto;
-	}
-
-	> .lists {
-		> .list {
-			display: block;
-			padding: 16px;
-			border: solid 1px var(--divider);
-			border-radius: 6px;
-
-			&:hover {
-				border: solid 1px var(--accent);
-				text-decoration: none;
-			}
-
-			> .name {
-				margin-bottom: 4px;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue
deleted file mode 100644
index f6234ffe44..0000000000
--- a/packages/client/src/pages/my-lists/list.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<div class="mk-list-page">
-			<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-				<div v-if="list" class="_section">
-					<div class="_content">
-						<MkButton inline @click="addUser()">{{ i18n.ts.addUser }}</MkButton>
-						<MkButton inline @click="renameList()">{{ i18n.ts.rename }}</MkButton>
-						<MkButton inline @click="deleteList()">{{ i18n.ts.delete }}</MkButton>
-					</div>
-				</div>
-			</transition>
-
-			<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
-				<div v-if="list" class="_section members _gap">
-					<div class="_title">{{ i18n.ts.members }}</div>
-					<div class="_content">
-						<div class="users">
-							<div v-for="user in users" :key="user.id" class="user _panel">
-								<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-								<div class="body">
-									<MkUserName :user="user" class="name"/>
-									<MkAcct :user="user" class="acct"/>
-								</div>
-								<div class="action">
-									<button class="_button" @click="removeUser(user)"><i class="ti ti-x"></i></button>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</transition>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed, watch } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { mainRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	listId: string;
-}>();
-
-let list = $ref(null);
-let users = $ref([]);
-
-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;
-		});
-	});
-}
-
-function addUser() {
-	os.selectUser().then(user => {
-		os.apiWithDialog('users/lists/push', {
-			listId: list.id,
-			userId: user.id,
-		}).then(() => {
-			users.push(user);
-		});
-	});
-}
-
-function removeUser(user) {
-	os.api('users/lists/pull', {
-		listId: list.id,
-		userId: user.id,
-	}).then(() => {
-		users = users.filter(x => x.id !== user.id);
-	});
-}
-
-async function renameList() {
-	const { canceled, result: name } = await os.inputText({
-		title: i18n.ts.enterListName,
-		default: list.name,
-	});
-	if (canceled) return;
-
-	await os.api('users/lists/update', {
-		listId: list.id,
-		name: name,
-	});
-
-	list.name = name;
-}
-
-async function deleteList() {
-	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('removeAreYouSure', { x: list.name }),
-	});
-	if (canceled) return;
-
-	await os.api('users/lists/delete', {
-		listId: list.id,
-	});
-	os.success();
-	mainRouter.push('/my/lists');
-}
-
-watch(() => props.listId, fetchList, { immediate: true });
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => list ? {
-	title: list.name,
-	icon: 'ti ti-list',
-} : null));
-</script>
-
-<style lang="scss" scoped>
-.mk-list-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/not-found.vue b/packages/client/src/pages/not-found.vue
deleted file mode 100644
index e58e44ef79..0000000000
--- a/packages/client/src/pages/not-found.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-<div class="ipledcug">
-	<div class="_fullinfo">
-		<img src="https://xn--931a.moe/assets/not-found.jpg" class="_ghost"/>
-		<div>{{ i18n.ts.notFoundDescription }}</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.notFound,
-	icon: 'ti ti-alert-triangle',
-});
-</script>
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
deleted file mode 100644
index ba2bb91239..0000000000
--- a/packages/client/src/pages/note.vue
+++ /dev/null
@@ -1,206 +0,0 @@
-<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="nextPagination" :no-gap="true"/>
-					</div>
-
-					<div class="main _gap">
-						<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="ti ti-chevron-up"></i></MkButton>
-						<div class="note _gap">
-							<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
-							<XNoteDetailed :key="note.id" v-model:note="note" class="note"/>
-						</div>
-						<div v-if="clips && clips.length > 0" class="_content clips _gap">
-							<div class="title">{{ i18n.ts.clip }}</div>
-							<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
-								<b>{{ item.name }}</b>
-								<div v-if="item.description" class="description">{{ item.description }}</div>
-								<div class="user">
-									<MkAvatar :user="item.user" class="avatar" :show-indicator="true"/> <MkUserName :user="item.user" :nowrap="false"/>
-								</div>
-							</MkA>
-						</div>
-						<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><i class="ti ti-chevron-down"></i></MkButton>
-					</div>
-
-					<div v-if="showPrev" class="_gap">
-						<XNotes class="_content" :pagination="prevPagination" :no-gap="true"/>
-					</div>
-				</div>
-				<MkError v-else-if="error" @retry="fetch()"/>
-				<MkLoading v-else/>
-			</transition>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineComponent, watch } from 'vue';
-import * as misskey from 'misskey-js';
-import XNote from '@/components/MkNote.vue';
-import XNoteDetailed from '@/components/MkNoteDetailed.vue';
-import XNotes from '@/components/MkNotes.vue';
-import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	noteId: string;
-}>();
-
-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,
-	},
-} : null));
-</script>
-
-<style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
-	transition: opacity 0.125s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-
-.fcuexfpr {
-	background: var(--bg);
-
-	> .note {
-		> .main {
-			> .load {
-				min-width: 0;
-				margin: 0 auto;
-				border-radius: 999px;
-
-				&.next {
-					margin-bottom: var(--margin);
-				}
-
-				&.prev {
-					margin-top: var(--margin);
-				}
-			}
-
-			> .note {
-				> .note {
-					border-radius: var(--radius);
-					background: var(--panel);
-				}
-			}
-
-			> .clips {
-				> .title {
-					font-weight: bold;
-					padding: 12px;
-				}
-
-				> .item {
-					display: block;
-					padding: 16px;
-
-					> .description {
-						padding: 8px 0;
-					}
-
-					> .user {
-						$height: 32px;
-						padding-top: 16px;
-						border-top: solid 0.5px var(--divider);
-						line-height: $height;
-
-						> .avatar {
-							width: $height;
-							height: $height;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
deleted file mode 100644
index 7106951de2..0000000000
--- a/packages/client/src/pages/notifications.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800">
-		<div v-if="tab === 'all' || tab === 'unread'">
-			<XNotifications class="notifications" :include-types="includeTypes" :unread-only="unreadOnly"/>
-		</div>
-		<div v-else-if="tab === 'mentions'">
-			<XNotes :pagination="mentionsPagination"/>
-		</div>
-		<div v-else-if="tab === 'directNotes'">
-			<XNotes :pagination="directNotesPagination"/>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { notificationTypes } from 'misskey-js';
-import XNotifications from '@/components/MkNotifications.vue';
-import XNotes from '@/components/MkNotes.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let tab = $ref('all');
-let includeTypes = $ref<string[] | null>(null);
-let unreadOnly = $computed(() => tab === 'unread');
-
-const mentionsPagination = {
-	endpoint: 'notes/mentions' as const,
-	limit: 10,
-};
-
-const directNotesPagination = {
-	endpoint: 'notes/mentions' as const,
-	limit: 10,
-	params: {
-		visibility: 'specified',
-	},
-};
-
-function setFilter(ev) {
-	const typeItems = notificationTypes.map(t => ({
-		text: i18n.t(`_notification._types.${t}`),
-		active: includeTypes && includeTypes.includes(t),
-		action: () => {
-			includeTypes = [t];
-		},
-	}));
-	const items = includeTypes != null ? [{
-		icon: 'ti ti-x',
-		text: i18n.ts.clear,
-		action: () => {
-			includeTypes = null;
-		},
-	}, null, ...typeItems] : typeItems;
-	os.popupMenu(items, ev.currentTarget ?? ev.target);
-}
-
-const headerActions = $computed(() => [tab === 'all' ? {
-	text: i18n.ts.filter,
-	icon: 'ti ti-filter',
-	highlighted: includeTypes != null,
-	handler: setFilter,
-} : undefined, tab === 'all' ? {
-	text: i18n.ts.markAllAsRead,
-	icon: 'ti ti-check',
-	handler: () => {
-		os.apiWithDialog('notifications/mark-all-as-read');
-	},
-} : undefined].filter(x => x !== undefined));
-
-const headerTabs = $computed(() => [{
-	key: 'all',
-	title: i18n.ts.all,
-}, {
-	key: 'unread',
-	title: i18n.ts.unread,
-}, {
-	key: 'mentions',
-	title: i18n.ts.mentions,
-	icon: 'ti ti-at',
-}, {
-	key: 'directNotes',
-	title: i18n.ts.directNotes,
-	icon: 'ti ti-mail',
-}]);
-
-definePageMetadata(computed(() => ({
-	title: i18n.ts.notifications,
-	icon: 'ti ti-bell',
-})));
-</script>
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
deleted file mode 100644
index a84cb1e80e..0000000000
--- a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-image"></i> {{ $ts._pages.blocks.image }}</template>
-	<template #func>
-		<button @click="choose()">
-			<i class="fas fa-folder-open"></i>
-		</button>
-	</template>
-
-	<section class="oyyftmcf">
-		<MkDriveFileThumbnail v-if="file" class="preview" :file="file" fit="contain" @click="choose()"/>
-	</section>
-</XContainer>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
-import { onMounted } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
-import * as os from '@/os';
-
-const props = defineProps<{
-	modelValue: any
-}>();
-
-const emit = defineEmits<{
-	(ev: 'update:modelValue', value: any): void;
-}>();
-
-let file: any = $ref(null);
-
-async function choose() {
-	os.selectDriveFile(false).then((fileResponse: any) => {
-		file = fileResponse;
-		emit('update:modelValue', {
-			...props.modelValue,
-			fileId: fileResponse.id,
-		});
-	});
-}
-
-onMounted(async () => {
-	if (props.modelValue.fileId == null) {
-		await choose();
-	} else {
-		os.api('drive/files/show', {
-			fileId: props.modelValue.fileId,
-		}).then(fileResponse => {
-			file = fileResponse;
-		});
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.oyyftmcf {
-	> .preview {
-		height: 150px;
-	}
-}
-</style>
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
deleted file mode 100644
index dc2a620c09..0000000000
--- a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-note"></i> {{ $ts._pages.blocks.note }}</template>
-
-	<section style="padding: 0 16px 0 16px;">
-		<MkInput v-model="id">
-			<template #label>{{ $ts._pages.blocks._note.id }}</template>
-			<template #caption>{{ $ts._pages.blocks._note.idDescription }}</template>
-		</MkInput>
-		<MkSwitch v-model="props.modelValue.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
-
-		<XNote v-if="note && !props.modelValue.detailed" :key="note.id + ':normal'" v-model:note="note" style="margin-bottom: 16px;"/>
-		<XNoteDetailed v-if="note && props.modelValue.detailed" :key="note.id + ':detail'" v-model:note="note" style="margin-bottom: 16px;"/>
-	</section>
-</XContainer>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
-import { watch } from 'vue';
-import XContainer from '../page-editor.container.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import XNote from '@/components/MkNote.vue';
-import XNoteDetailed from '@/components/MkNoteDetailed.vue';
-import * as os from '@/os';
-
-const props = defineProps<{
-	modelValue: any
-}>();
-
-const emit = defineEmits<{
-	(ev: 'update:modelValue', value: any): void;
-}>();
-
-let id: any = $ref(props.modelValue.note);
-let note: any = $ref(null);
-
-watch(id, async () => {
-	if (id && (id.startsWith('http://') || id.startsWith('https://'))) {
-		emit('update:modelValue', {
-			...props.modelValue,
-			note: (id.endsWith('/') ? id.slice(0, -1) : id).split('/').pop(),
-		});
-	} else {
-		emit('update:modelValue', {
-			...props.modelValue,
-			note: id,
-		});
-	}
-
-	note = await os.api('notes/show', { noteId: props.modelValue.note });
-}, {
-	immediate: 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
deleted file mode 100644
index 27324bdaef..0000000000
--- a/packages/client/src/pages/page-editor/els/page-editor.el.section.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="ti ti-note"></i> {{ props.modelValue.title }}</template>
-	<template #func>
-		<button class="_button" @click="rename()">
-			<i class="ti ti-pencil"></i>
-		</button>
-	</template>
-
-	<section class="ilrvjyvi">
-		<XBlocks v-model="children" class="children"/>
-		<MkButton rounded class="add" @click="add()"><i class="ti ti-plus"></i></MkButton>
-	</section>
-</XContainer>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
-import { defineAsyncComponent, inject, onMounted, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XContainer from '../page-editor.container.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { deepClone } from '@/scripts/clone';
-import MkButton from '@/components/MkButton.vue';
-
-const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
-
-const props = withDefaults(defineProps<{
-	modelValue: any,
-}>(), {
-	modelValue: {},
-});
-
-const emit = defineEmits<{
-	(ev: 'update:modelValue', value: any): void;
-}>();
-
-const children = $ref(deepClone(props.modelValue.children ?? []));
-
-watch($$(children), () => {
-	emit('update:modelValue', {
-		...props.modelValue,
-		children,
-	});
-}, {
-	deep: true,
-});
-
-const getPageBlockList = inject<(any) => any>('getPageBlockList');
-
-async function rename() {
-	const { canceled, result: title } = await os.inputText({
-		title: 'Enter title',
-		default: props.modelValue.title,
-	});
-	if (canceled) return;
-	emit('update:modelValue', {
-		...props.modelValue,
-		title,
-	});
-}
-
-async function add() {
-	const { canceled, result: type } = await os.select({
-		title: i18n.ts._pages.chooseBlock,
-		items: getPageBlockList(),
-	});
-	if (canceled) return;
-
-	const id = uuid();
-	children.push({ id, type });
-}
-
-onMounted(() => {
-	if (props.modelValue.title == null) {
-		rename();
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.ilrvjyvi {
-	> .children {
-		margin: 16px;
-
-		&:empty {
-			display: none;
-		}
-	}
-
-	> .add {
-		margin: 16px auto;
-	}
-}
-</style>
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
deleted file mode 100644
index 6f11e2a08b..0000000000
--- a/packages/client/src/pages/page-editor/els/page-editor.el.text.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-<!-- eslint-disable vue/no-mutating-props -->
-<XContainer :draggable="true" @remove="() => $emit('remove')">
-	<template #header><i class="fas fa-align-left"></i> {{ $ts._pages.blocks.text }}</template>
-
-	<section class="vckmsadr">
-		<textarea v-model="text"></textarea>
-	</section>
-</XContainer>
-</template>
-
-<script lang="ts" setup>
-/* eslint-disable vue/no-mutating-props */
-import { watch } from 'vue';
-import XContainer from '../page-editor.container.vue';
-
-const props = defineProps<{
-	modelValue: any
-}>();
-
-const emit = defineEmits<{
-	(ev: 'update:modelValue', value: any): void;
-}>();
-
-const text = $ref(props.modelValue.text ?? '');
-
-watch($$(text), () => {
-	emit('update:modelValue', {
-		...props.modelValue,
-		text,
-	});
-});
-</script>
-
-<style lang="scss" scoped>
-.vckmsadr {
-	> textarea {
-		display: block;
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		appearance: none;
-		width: 100%;
-		min-width: 100%;
-		min-height: 150px;
-		border: none;
-		box-shadow: none;
-		padding: 16px;
-		background: transparent;
-		color: var(--fg);
-		font-size: 14px;
-		box-sizing: border-box;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/page-editor/page-editor.blocks.vue b/packages/client/src/pages/page-editor/page-editor.blocks.vue
deleted file mode 100644
index f99fcb202f..0000000000
--- a/packages/client/src/pages/page-editor/page-editor.blocks.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-<Sortable :model-value="modelValue" tag="div" item-key="id" handle=".drag-handle" :group="{ name: 'blocks' }" :animation="150" :swap-threshold="0.5" @update:model-value="v => $emit('update:modelValue', v)">
-	<template #item="{element}">
-		<div :class="$style.item">
-			<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 -->
-			<component :is="'x-' + element.type" :model-value="element" @update:model-value="updateItem" @remove="() => removeItem(element)"/>
-		</div>
-	</template>
-</Sortable>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import XSection from './els/page-editor.el.section.vue';
-import XText from './els/page-editor.el.text.vue';
-import XImage from './els/page-editor.el.image.vue';
-import XNote from './els/page-editor.el.note.vue';
-import * as os from '@/os';
-import { deepClone } from '@/scripts/clone';
-
-export default defineComponent({
-	components: {
-		Sortable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
-		XSection, XText, XImage, XNote,
-	},
-
-	props: {
-		modelValue: {
-			type: Array,
-			required: true,
-		},
-	},
-
-	emits: ['update:modelValue'],
-
-	methods: {
-		updateItem(v) {
-			const i = this.modelValue.findIndex(x => x.id === v.id);
-			const newValue = [
-				...this.modelValue.slice(0, i),
-				v,
-				...this.modelValue.slice(i + 1),
-			];
-			this.$emit('update:modelValue', newValue);
-		},
-
-		removeItem(el) {
-			const i = this.modelValue.findIndex(x => x.id === el.id);
-			const newValue = [
-				...this.modelValue.slice(0, i),
-				...this.modelValue.slice(i + 1),
-			];
-			this.$emit('update:modelValue', newValue);
-		},
-	},
-});
-</script>
-
-<style lang="scss" module>
-.item {
-	& + .item {
-		margin-top: 16px;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/page-editor/page-editor.container.vue b/packages/client/src/pages/page-editor/page-editor.container.vue
deleted file mode 100644
index 15cdda5efb..0000000000
--- a/packages/client/src/pages/page-editor/page-editor.container.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-<div class="cpjygsrt" :class="{ error: error != null, warn: warn != null }">
-	<header>
-		<div class="title"><slot name="header"></slot></div>
-		<div class="buttons">
-			<slot name="func"></slot>
-			<button v-if="removable" class="_button" @click="remove()">
-				<i class="ti ti-trash"></i>
-			</button>
-			<button v-if="draggable" class="drag-handle _button">
-				<i class="ti ti-menu-2"></i>
-			</button>
-			<button class="_button" @click="toggleContent(!showBody)">
-				<template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
-				<template v-else><i class="ti ti-chevron-down"></i></template>
-			</button>
-		</div>
-	</header>
-	<p v-show="showBody" v-if="error != null" class="error">{{ $t('_pages.script.typeError', { slot: error.arg + 1, expect: $t(`script.types.${error.expect}`), actual: $t(`script.types.${error.actual}`) }) }}</p>
-	<p v-show="showBody" v-if="warn != null" class="warn">{{ $t('_pages.script.thereIsEmptySlot', { slot: warn.slot + 1 }) }}</p>
-	<div v-show="showBody" class="body">
-		<slot></slot>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-	props: {
-		expanded: {
-			type: Boolean,
-			default: true,
-		},
-		removable: {
-			type: Boolean,
-			default: true,
-		},
-		draggable: {
-			type: Boolean,
-			default: false,
-		},
-		error: {
-			required: false,
-			default: null,
-		},
-		warn: {
-			required: false,
-			default: null,
-		},
-	},
-	emits: ['toggle', 'remove'],
-	data() {
-		return {
-			showBody: this.expanded,
-		};
-	},
-	methods: {
-		toggleContent(show: boolean) {
-			this.showBody = show;
-			this.$emit('toggle', show);
-		},
-		remove() {
-			this.$emit('remove');
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.cpjygsrt {
-	position: relative;
-	overflow: hidden;
-	background: var(--panel);
-	border: solid 2px var(--X12);
-	border-radius: 8px;
-
-	&:hover {
-		border: solid 2px var(--X13);
-	}
-
-	&.warn {
-		border: solid 2px #dec44c;
-	}
-
-	&.error {
-		border: solid 2px #f00;
-	}
-
-	> header {
-		> .title {
-			z-index: 1;
-			margin: 0;
-			padding: 0 16px;
-			line-height: 42px;
-			font-size: 0.9em;
-			font-weight: bold;
-			box-shadow: 0 1px rgba(#000, 0.07);
-
-			> i {
-				margin-right: 6px;
-			}
-
-			&:empty {
-				display: none;
-			}
-		}
-
-		> .buttons {
-			position: absolute;
-			z-index: 2;
-			top: 0;
-			right: 0;
-
-			> button {
-				padding: 0;
-				width: 42px;
-				font-size: 0.9em;
-				line-height: 42px;
-			}
-
-			.drag-handle {
-				cursor: move;
-			}
-		}
-	}
-
-	> .warn {
-		color: #b19e49;
-		margin: 0;
-		padding: 16px 16px 0 16px;
-		font-size: 14px;
-	}
-
-	> .error {
-		color: #f00;
-		margin: 0;
-		padding: 16px 16px 0 16px;
-		font-size: 14px;
-	}
-
-	> .body {
-		::v-deep(.juejbjww), ::v-deep(.eiipwacr) {
-			&:not(.inline):first-child {
-				margin-top: 28px;
-			}
-
-			&:not(.inline):last-child {
-				margin-bottom: 20px;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
deleted file mode 100644
index 968aa12de2..0000000000
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ /dev/null
@@ -1,394 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="700">
-		<div class="jqqmcavi">
-			<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="ti ti-external-link"></i> {{ $ts._pages.viewPage }}</MkButton>
-			<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="ti ti-device-floppy"></i> {{ $ts.save }}</MkButton>
-			<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="ti ti-copy"></i> {{ $ts.duplicate }}</MkButton>
-			<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="ti ti-trash"></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>
-
-				<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>
-
-				<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>
-
-				<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
-
-				<div class="eyeCatch">
-					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ti ti-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="ti ti-trash"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<div v-else-if="tab === 'contents'">
-			<div :class="$style.contents">
-				<XBlocks v-model="content" class="content"/>
-
-				<MkButton v-if="!readonly" rounded class="add" @click="add()"><i class="ti ti-plus"></i></MkButton>
-			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, computed, provide, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XBlocks from './page-editor.blocks.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkSelect from '@/components/form/select.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkInput from '@/components/form/input.vue';
-import { url } from '@/config';
-import * as os from '@/os';
-import { selectFile } from '@/scripts/select-file';
-import { mainRouter } from '@/router';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { $i } from '@/account';
-
-const props = defineProps<{
-	initPageId?: string;
-	initPageName?: string;
-	initUser?: string;
-}>();
-
-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);
-
-provide('readonly', readonly);
-provide('getPageBlockList', getPageBlockList);
-
-watch($$(eyeCatchingImageId), async () => {
-	if (eyeCatchingImageId == null) {
-		eyeCatchingImage = null;
-	} else {
-		eyeCatchingImage = await os.api('drive/files/show', {
-			fileId: eyeCatchingImageId,
-		});
-	}
-});
-
-function getSaveOptions() {
-	return {
-		title: title.trim(),
-		name: name.trim(),
-		summary: summary,
-		font: font,
-		script: '',
-		hideTitleWhenPinned: hideTitleWhenPinned,
-		alignCenter: alignCenter,
-		content: content,
-		variables: [],
-		eyeCatchingImageId: eyeCatchingImageId,
-	};
-}
-
-function save() {
-	const options = getSaveOptions();
-
-	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 (pageId) {
-		options.pageId = pageId;
-		os.api('pages/update', options)
-			.then(page => {
-				currentName = name.trim();
-				os.alert({
-					type: 'success',
-					text: i18n.ts._pages.updated,
-				});
-			}).catch(onError);
-	} else {
-		os.api('pages/create', options)
-			.then(created => {
-				pageId = created.id;
-				currentName = name.trim();
-				os.alert({
-					type: 'success',
-					text: i18n.ts._pages.created,
-				});
-				mainRouter.push(`/pages/edit/${pageId}`);
-			}).catch(onError);
-	}
-}
-
-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() {
-	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,
-		});
-		mainRouter.push(`/pages/edit/${pageId}`);
-	});
-}
-
-async function add() {
-	const { canceled, result: type } = await os.select({
-		type: null,
-		title: i18n.ts._pages.chooseBlock,
-		items: getPageBlockList(),
-	});
-	if (canceled) return;
-
-	const id = uuid();
-	content.push({ id, type });
-}
-
-function getPageBlockList() {
-	return [
-		{ 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: 'note', text: i18n.ts._pages.blocks.note },
-	];
-}
-
-function setEyeCatchingImage(img) {
-	selectFile(img.currentTarget ?? img.target, null).then(file => {
-		eyeCatchingImageId = file.id;
-	});
-}
-
-function removeEyeCatchingImage() {
-	eyeCatchingImageId = null;
-}
-
-async function init() {
-	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;
-		hideTitleWhenPinned = page.hideTitleWhenPinned;
-		alignCenter = page.alignCenter;
-		content = page.content;
-		eyeCatchingImageId = page.eyeCatchingImageId;
-	} else {
-		const id = uuid();
-		content = [{
-			id,
-			type: 'text',
-			text: 'Hello World!',
-		}];
-	}
-}
-
-init();
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => [{
-	key: 'settings',
-	title: i18n.ts._pages.pageSetting,
-	icon: 'ti ti-settings',
-}, {
-	key: 'contents',
-	title: i18n.ts._pages.contents,
-	icon: 'ti ti-note',
-}]);
-
-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: 'ti ti-pencil',
-	};
-}));
-</script>
-
-<style lang="scss" module>
-.contents {
-	&:global {
-		> .add {
-			margin: 16px auto 0 auto;
-		}
-	}
-}
-</style>
-
-<style lang="scss" scoped>
-.jqqmcavi {
-	margin-bottom: 16px;
-
-	> .button {
-		& + .button {
-			margin-left: 8px;
-		}
-	}
-}
-
-.gwbmwxkm {
-	position: relative;
-
-	> header {
-		> .title {
-			z-index: 1;
-			margin: 0;
-			padding: 0 16px;
-			line-height: 42px;
-			font-size: 0.9em;
-			font-weight: bold;
-			box-shadow: 0 1px rgba(#000, 0.07);
-
-			> i {
-				margin-right: 6px;
-			}
-
-			&:empty {
-				display: none;
-			}
-		}
-
-		> .buttons {
-			position: absolute;
-			z-index: 2;
-			top: 0;
-			right: 0;
-
-			> button {
-				padding: 0;
-				width: 42px;
-				font-size: 0.9em;
-				line-height: 42px;
-			}
-		}
-	}
-
-	> section {
-		padding: 0 32px 32px 32px;
-
-		@media (max-width: 500px) {
-			padding: 0 16px 16px 16px;
-		}
-
-		> .view {
-			display: inline-block;
-			margin: 16px 0 0 0;
-			font-size: 14px;
-		}
-
-		> .content {
-			margin-bottom: 16px;
-		}
-
-		> .eyeCatch {
-			margin-bottom: 16px;
-
-			> div {
-				> img {
-					max-width: 100%;
-				}
-			}
-		}
-	}
-}
-
-.qmuvgica {
-	padding: 16px;
-
-	> .variables {
-		margin-bottom: 16px;
-	}
-
-	> .add {
-		margin-bottom: 16px;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
deleted file mode 100644
index a95bfe485c..0000000000
--- a/packages/client/src/pages/page.vue
+++ /dev/null
@@ -1,277 +0,0 @@
-<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" 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="i18n.ts._pages.unlike" class="button" primary @click="unlike()"><i class="ti ti-heart-off"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
-							<MkButton v-else v-tooltip="i18n.ts._pages.like" class="button" @click="like()"><i class="ti ti-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
-						</div>
-						<div class="other">
-							<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ti ti-repeat ti-fw"></i></button>
-							<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="ti ti-share ti-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">{{ i18n.ts._pages.viewSource }}</MkA>
-						<template v-if="$i && $i.id === page.userId">
-							<MkA :to="`/pages/edit/${page.id}`" class="link">{{ i18n.ts._pages.editThisPage }}</MkA>
-							<button v-if="$i.pinnedPageId === page.id" class="link _textButton" @click="pin(false)">{{ i18n.ts.unpin }}</button>
-							<button v-else class="link _textButton" @click="pin(true)">{{ i18n.ts.pin }}</button>
-						</template>
-					</div>
-				</div>
-				<div class="footer">
-					<div><i class="ti ti-clock"></i> {{ i18n.ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
-					<div v-if="page.createdAt != page.updatedAt"><i class="ti ti-clock"></i> {{ i18n.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="ti ti-clock"></i> {{ i18n.ts.recentPosts }}</template>
-					<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
-						<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
-					</MkPagination>
-				</MkContainer>
-			</div>
-			<MkError v-else-if="error" @retry="fetchPage()"/>
-			<MkLoading v-else/>
-		</transition>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed, watch } from 'vue';
-import XPage from '@/components/page/page.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { url } from '@/config';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import MkContainer from '@/components/MkContainer.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkPagePreview from '@/components/MkPagePreview.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-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,
-	},
-} : null));
-</script>
-
-<style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
-	transition: opacity 0.125s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-
-.xcukqgmh {
-	> .main {
-		padding: 32px;
-
-		> .header {
-			padding: 16px;
-
-			> h1 {
-				margin: 0;
-			}
-		}
-
-		> .banner {
-			> img {
-				// TODO: 良い感じのアスペクト比で表示
-				display: block;
-				width: 100%;
-				height: 150px;
-				object-fit: cover;
-			}
-		}
-
-		> .content {
-			margin-top: 16px;
-			padding: 16px 0 0 0;
-		}
-
-		> .actions {
-			display: flex;
-			align-items: center;
-			margin-top: 16px;
-			padding: 16px 0 0 0;
-			border-top: solid 0.5px var(--divider);
-
-			> .like {
-				> .button {
-					--accent: rgb(241 97 132);
-					--X8: rgb(241 92 128);
-					--buttonBg: rgb(216 71 106 / 5%);
-					--buttonHoverBg: rgb(216 71 106 / 10%);
-					color: #ff002f;
-
-					::v-deep(.count) {
-						margin-left: 0.5em;
-					}
-				}
-			}
-
-			> .other {
-				margin-left: auto;
-
-				> button {
-					padding: 8px;
-					margin: 0 8px;
-
-					&:hover {
-						color: var(--fgHighlighted);
-					}
-				}
-			}
-		}
-
-		> .user {
-			margin-top: 16px;
-			padding: 16px 0 0 0;
-			border-top: solid 0.5px var(--divider);
-			display: flex;
-			align-items: center;
-
-			> .avatar {
-				width: 52px;
-				height: 52px;
-			}
-
-			> .name {
-				margin: 0 0 0 12px;
-				font-size: 90%;
-			}
-
-			> .koudoku {
-				margin-left: auto;
-			}
-		}
-
-		> .links {
-			margin-top: 16px;
-			padding: 24px 0 0 0;
-			border-top: solid 0.5px var(--divider);
-
-			> .link {
-				margin-right: 0.75em;
-			}
-		}
-	}
-
-	> .footer {
-		margin: var(--margin) 0 var(--margin) 0;
-		font-size: 85%;
-		opacity: 0.75;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
deleted file mode 100644
index b077180df8..0000000000
--- a/packages/client/src/pages/pages.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-<MkStickyContainer>
-	<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">
-				<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="ti ti-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>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject } from 'vue';
-import MkPagePreview from '@/components/MkPagePreview.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import { useRouter } from '@/router';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-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: 'ti ti-plus',
-	text: i18n.ts.create,
-	handler: create,
-}]);
-
-const headerTabs = $computed(() => [{
-	key: 'featured',
-	title: i18n.ts._pages.featured,
-	icon: 'fas fa-fire-alt',
-}, {
-	key: 'my',
-	title: i18n.ts._pages.my,
-	icon: 'ti ti-edit',
-}, {
-	key: 'liked',
-	title: i18n.ts._pages.liked,
-	icon: 'ti ti-heart',
-}]);
-
-definePageMetadata(computed(() => ({
-	title: i18n.ts.pages,
-	icon: 'ti ti-note',
-})));
-</script>
-
-<style lang="scss" scoped>
-.rknalgpo {
-	&.my .ckltabjg:first-child {
-		margin-top: 16px;
-	}
-
-	.ckltabjg:not(:last-child) {
-		margin-bottom: 8px;
-	}
-
-	@media (min-width: 500px) {
-		.ckltabjg:not(:last-child) {
-			margin-bottom: 16px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/preview.vue b/packages/client/src/pages/preview.vue
deleted file mode 100644
index 354f686e46..0000000000
--- a/packages/client/src/pages/preview.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-<div class="graojtoi">
-	<MkSample/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import MkSample from '@/components/MkSample.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => ({
-	title: i18n.ts.preview,
-	icon: 'ti ti-eye',
-})));
-</script>
-
-<style lang="scss" scoped>
-.graojtoi {
-	padding: var(--margin);
-}
-</style>
diff --git a/packages/client/src/pages/registry.keys.vue b/packages/client/src/pages/registry.keys.vue
deleted file mode 100644
index f179fbe957..0000000000
--- a/packages/client/src/pages/registry.keys.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="16">
-		<FormSplit>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts._registry.domain }}</template>
-				<template #value>{{ i18n.ts.system }}</template>
-			</MkKeyValue>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts._registry.scope }}</template>
-				<template #value>{{ scope.join('/') }}</template>
-			</MkKeyValue>
-		</FormSplit>
-		
-		<MkButton primary @click="createKey">{{ i18n.ts._registry.createKey }}</MkButton>
-
-		<FormSection v-if="keys">
-			<template #label>{{ i18n.ts.keys }}</template>
-			<div class="_formLinks">
-				<FormLink v-for="key in keys" :to="`/registry/value/system/${scope.join('/')}/${key[0]}`" class="_monospace">{{ key[0] }}<template #suffix>{{ key[1].toUpperCase() }}</template></FormLink>
-			</div>
-		</FormSection>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import JSON5 from 'json5';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import FormSplit from '@/components/form/split.vue';
-
-const props = defineProps<{
-	path: string;
-}>();
-
-const scope = $computed(() => props.path.split('/'));
-
-let keys = $ref(null);
-
-function fetchKeys() {
-	os.api('i/registry/keys-with-type', {
-		scope: scope,
-	}).then(res => {
-		keys = Object.entries(res).sort((a, b) => a[0].localeCompare(b[0]));
-	});
-}
-
-async function createKey() {
-	const { canceled, result } = await os.form(i18n.ts._registry.createKey, {
-		key: {
-			type: 'string',
-			label: i18n.ts._registry.key,
-		},
-		value: {
-			type: 'string',
-			multiline: true,
-			label: i18n.ts.value,
-		},
-		scope: {
-			type: 'string',
-			label: i18n.ts._registry.scope,
-			default: scope.join('/'),
-		},
-	});
-	if (canceled) return;
-	os.apiWithDialog('i/registry/set', {
-		scope: result.scope.split('/'),
-		key: result.key,
-		value: JSON5.parse(result.value),
-	}).then(() => {
-		fetchKeys();
-	});
-}
-
-watch(() => props.path, fetchKeys, { immediate: true });
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.registry,
-	icon: 'ti ti-adjustments',
-});
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/client/src/pages/registry.value.vue b/packages/client/src/pages/registry.value.vue
deleted file mode 100644
index 378420b1ba..0000000000
--- a/packages/client/src/pages/registry.value.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="16">
-		<FormInfo warn>{{ i18n.ts.editTheseSettingsMayBreakAccount }}</FormInfo>
-
-		<template v-if="value">
-			<FormSplit>
-				<MkKeyValue class="_formBlock">
-					<template #key>{{ i18n.ts._registry.domain }}</template>
-					<template #value>{{ i18n.ts.system }}</template>
-				</MkKeyValue>
-				<MkKeyValue class="_formBlock">
-					<template #key>{{ i18n.ts._registry.scope }}</template>
-					<template #value>{{ scope.join('/') }}</template>
-				</MkKeyValue>
-				<MkKeyValue class="_formBlock">
-					<template #key>{{ i18n.ts._registry.key }}</template>
-					<template #value>{{ key }}</template>
-				</MkKeyValue>
-			</FormSplit>
-			
-			<FormTextarea v-model="valueForEditor" tall class="_formBlock _monospace">
-				<template #label>{{ i18n.ts.value }} (JSON)</template>
-			</FormTextarea>
-
-			<MkButton class="_formBlock" primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.updatedAt }}</template>
-				<template #value><MkTime :time="value.updatedAt" mode="detail"/></template>
-			</MkKeyValue>
-
-			<MkButton danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
-		</template>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import JSON5 from 'json5';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormInfo from '@/components/MkInfo.vue';
-
-const props = defineProps<{
-	path: string;
-}>();
-
-const scope = $computed(() => props.path.split('/').slice(0, -1));
-const key = $computed(() => props.path.split('/').at(-1));
-
-let value = $ref(null);
-let valueForEditor = $ref(null);
-
-function fetchValue() {
-	os.api('i/registry/get-detail', {
-		scope,
-		key,
-	}).then(res => {
-		value = res;
-		valueForEditor = JSON5.stringify(res.value, null, '\t');
-	});
-}
-
-async function save() {
-	try {
-		JSON5.parse(valueForEditor);
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			text: i18n.ts.invalidValue,
-		});
-		return;
-	}
-	os.confirm({
-		type: 'warning',
-		text: i18n.ts.saveConfirm,
-	}).then(({ canceled }) => {
-		if (canceled) return;
-		os.apiWithDialog('i/registry/set', {
-			scope,
-			key,
-			value: JSON5.parse(valueForEditor),
-		});
-	});
-}
-
-function del() {
-	os.confirm({
-		type: 'warning',
-		text: i18n.ts.deleteConfirm,
-	}).then(({ canceled }) => {
-		if (canceled) return;
-		os.apiWithDialog('i/registry/remove', {
-			scope,
-			key,
-		});
-	});
-}
-
-watch(() => props.path, fetchValue, { immediate: true });
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.registry,
-	icon: 'ti ti-adjustments',
-});
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/client/src/pages/registry.vue b/packages/client/src/pages/registry.vue
deleted file mode 100644
index a2c65294fc..0000000000
--- a/packages/client/src/pages/registry.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="16">
-		<MkButton primary @click="createKey">{{ i18n.ts._registry.createKey }}</MkButton>
-
-		<FormSection v-if="scopes">
-			<template #label>{{ i18n.ts.system }}</template>
-			<div class="_formLinks">
-				<FormLink v-for="scope in scopes" :to="`/registry/keys/system/${scope.join('/')}`" class="_monospace">{{ scope.join('/') }}</FormLink>
-			</div>
-		</FormSection>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import JSON5 from 'json5';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-
-let scopes = $ref(null);
-
-function fetchScopes() {
-	os.api('i/registry/scopes').then(res => {
-		scopes = res.slice().sort((a, b) => a.join('/').localeCompare(b.join('/')));
-	});
-}
-
-async function createKey() {
-	const { canceled, result } = await os.form(i18n.ts._registry.createKey, {
-		key: {
-			type: 'string',
-			label: i18n.ts._registry.key,
-		},
-		value: {
-			type: 'string',
-			multiline: true,
-			label: i18n.ts.value,
-		},
-		scope: {
-			type: 'string',
-			label: i18n.ts._registry.scope,
-		},
-	});
-	if (canceled) return;
-	os.apiWithDialog('i/registry/set', {
-		scope: result.scope.split('/'),
-		key: result.key,
-		value: JSON5.parse(result.value),
-	}).then(() => {
-		fetchScopes();
-	});
-}
-
-fetchScopes();
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.registry,
-	icon: 'ti ti-adjustments',
-});
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/client/src/pages/reset-password.vue b/packages/client/src/pages/reset-password.vue
deleted file mode 100644
index 8ec15f6425..0000000000
--- a/packages/client/src/pages/reset-password.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer v-if="token" :content-max="700" :margin-min="16" :margin-max="32">
-		<div class="_formRoot">
-			<FormInput v-model="password" type="password" class="_formBlock">
-				<template #prefix><i class="ti ti-lock"></i></template>
-				<template #label>{{ i18n.ts.newPassword }}</template>
-			</FormInput>
-		
-			<FormButton primary class="_formBlock" @click="save">{{ i18n.ts.save }}</FormButton>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, onMounted } from 'vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { mainRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const props = defineProps<{
-	token?: string;
-}>();
-
-let password = $ref('');
-
-async function save() {
-	await os.apiWithDialog('reset-password', {
-		token: props.token,
-		password: password,
-	});
-	mainRouter.push('/');
-}
-
-onMounted(() => {
-	if (props.token == null) {
-		os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {}, 'closed');
-		mainRouter.push('/');
-	}
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.resetPassword,
-	icon: 'ti ti-lock',
-});
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/client/src/pages/scratchpad.vue b/packages/client/src/pages/scratchpad.vue
deleted file mode 100644
index edb2d8e18c..0000000000
--- a/packages/client/src/pages/scratchpad.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-<div class="iltifgqe">
-	<div class="editor _panel _gap">
-		<PrismEditor v-model="code" class="_code code" :highlight="highlighter" :line-numbers="false"/>
-		<MkButton style="position: absolute; top: 8px; right: 8px;" primary @click="run()"><i class="ti ti-player-play"></i></MkButton>
-	</div>
-
-	<MkContainer :foldable="true" class="_gap">
-		<template #header>{{ i18n.ts.output }}</template>
-		<div class="bepmlvbi">
-			<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
-		</div>
-	</MkContainer>
-
-	<div class="_gap">
-		{{ i18n.ts.scratchpadDescription }}
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import 'prismjs';
-import { highlight, languages } from 'prismjs/components/prism-core';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/themes/prism-okaidia.css';
-import { PrismEditor } from 'vue-prism-editor';
-import 'vue-prism-editor/dist/prismeditor.min.css';
-import { AiScript, parse, utils } from '@syuilo/aiscript';
-import MkContainer from '@/components/MkContainer.vue';
-import MkButton from '@/components/MkButton.vue';
-import { createAiScriptEnv } from '@/scripts/aiscript/api';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const code = ref('');
-const logs = ref<any[]>([]);
-
-const saved = localStorage.getItem('scratchpad');
-if (saved) {
-	code.value = saved;
-}
-
-watch(code, () => {
-	localStorage.setItem('scratchpad', code.value);
-});
-
-async function run() {
-	logs.value = [];
-	const aiscript = new AiScript(createAiScriptEnv({
-		storageKey: 'scratchpad',
-		token: $i?.token,
-	}), {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					ok(a);
-				});
-			});
-		},
-		out: (value) => {
-			logs.value.push({
-				id: Math.random(),
-				text: value.type === 'str' ? value.value : utils.valToString(value),
-				print: true,
-			});
-		},
-		log: (type, params) => {
-			switch (type) {
-				case 'end': logs.value.push({
-					id: Math.random(),
-					text: utils.valToString(params.val, true),
-					print: false,
-				}); break;
-				default: break;
-			}
-		},
-	});
-
-	let ast;
-	try {
-		ast = parse(code.value);
-	} catch (error) {
-		os.alert({
-			type: 'error',
-			text: 'Syntax error :(',
-		});
-		return;
-	}
-	try {
-		await aiscript.exec(ast);
-	} catch (error: any) {
-		os.alert({
-			type: 'error',
-			text: error.message,
-		});
-	}
-}
-
-function highlighter(code) {
-	return highlight(code, languages.js, 'javascript');
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.scratchpad,
-	icon: 'ti ti-terminal-2',
-});
-</script>
-
-<style lang="scss" scoped>
-.iltifgqe {
-	padding: 16px;
-
-	> .editor {
-		position: relative;
-	}
-}
-
-.bepmlvbi {
-	padding: 16px;
-
-	> .log {
-		&:not(.print) {
-			opacity: 0.7;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
deleted file mode 100644
index c080b763bb..0000000000
--- a/packages/client/src/pages/search.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800">
-		<XNotes ref="notes" :pagination="pagination"/>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import XNotes from '@/components/MkNotes.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const props = defineProps<{
-	query: string;
-	channel?: string;
-}>();
-
-const pagination = {
-	endpoint: 'notes/search' as const,
-	limit: 10,
-	params: computed(() => ({
-		query: props.query,
-		channelId: props.channel,
-	})),
-};
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => ({
-	title: i18n.t('searchWith', { q: props.query }),
-	icon: 'ti ti-search',
-})));
-</script>
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
deleted file mode 100644
index 1803129aaa..0000000000
--- a/packages/client/src/pages/settings/2fa.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<template>
-<div>
-	<MkButton v-if="!twoFactorData && !$i.twoFactorEnabled" @click="register">{{ i18n.ts._2fa.registerDevice }}</MkButton>
-	<template v-if="$i.twoFactorEnabled">
-		<p>{{ i18n.ts._2fa.alreadyRegistered }}</p>
-		<MkButton @click="unregister">{{ i18n.ts.unregister }}</MkButton>
-
-		<template v-if="supportsCredentials">
-			<hr class="totp-method-sep">
-
-			<h2 class="heading">{{ i18n.ts.securityKey }}</h2>
-			<p>{{ i18n.ts._2fa.securityKeyInfo }}</p>
-			<div class="key-list">
-				<div v-for="key in $i.securityKeysList" class="key">
-					<h3>{{ key.name }}</h3>
-					<div class="last-used">{{ i18n.ts.lastUsed }}<MkTime :time="key.lastUsed"/></div>
-					<MkButton @click="unregisterKey(key)">{{ i18n.ts.unregister }}</MkButton>
-				</div>
-			</div>
-
-			<MkSwitch v-if="$i.securityKeysList.length > 0" v-model="usePasswordLessLogin" @update:model-value="updatePasswordLessLogin">{{ i18n.ts.passwordLessLogin }}</MkSwitch>
-
-			<MkInfo v-if="registration && registration.error" warn>{{ i18n.ts.error }} {{ registration.error }}</MkInfo>
-			<MkButton v-if="!registration || registration.error" @click="addSecurityKey">{{ i18n.ts._2fa.registerKey }}</MkButton>
-
-			<ol v-if="registration && !registration.error">
-				<li v-if="registration.stage >= 0">
-					{{ i18n.ts.tapSecurityKey }}
-					<MkLoading v-if="registration.saving && registration.stage == 0" :em="true"/>
-				</li>
-				<li v-if="registration.stage >= 1">
-					<MkForm :disabled="registration.stage != 1 || registration.saving">
-						<MkInput v-model="keyName" :max="30">
-							<template #label>{{ i18n.ts.securityKeyName }}</template>
-						</MkInput>
-						<MkButton :disabled="keyName.length == 0" @click="registerKey">{{ i18n.ts.registerSecurityKey }}</MkButton>
-						<MkLoading v-if="registration.saving && registration.stage == 1" :em="true"/>
-					</MkForm>
-				</li>
-			</ol>
-		</template>
-	</template>
-	<div v-if="twoFactorData && !$i.twoFactorEnabled">
-		<ol style="margin: 0; padding: 0 0 0 1em;">
-			<li>
-				<I18n :src="i18n.ts._2fa.step1" tag="span">
-					<template #a>
-						<a href="https://authy.com/" rel="noopener" target="_blank" class="_link">Authy</a>
-					</template>
-					<template #b>
-						<a href="https://support.google.com/accounts/answer/1066447" rel="noopener" target="_blank" class="_link">Google Authenticator</a>
-					</template>
-				</I18n>
-			</li>
-			<li>{{ i18n.ts._2fa.step2 }}<br><img :src="twoFactorData.qr"><p>{{ $ts._2fa.step2Url }}<br>{{ twoFactorData.url }}</p></li>
-			<li>
-				{{ i18n.ts._2fa.step3 }}<br>
-				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false"><template #label>{{ i18n.ts.token }}</template></MkInput>
-				<MkButton primary @click="submit">{{ i18n.ts.done }}</MkButton>
-			</li>
-		</ol>
-		<MkInfo>{{ i18n.ts._2fa.step4 }}</MkInfo>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { hostname } from '@/config';
-import { byteify, hexify, stringify } from '@/scripts/2fa';
-import MkButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-
-const twoFactorData = ref<any>(null);
-const supportsCredentials = ref(!!navigator.credentials);
-const usePasswordLessLogin = ref($i!.usePasswordLessLogin);
-const registration = ref<any>(null);
-const keyName = ref('');
-const token = ref(null);
-
-function register() {
-	os.inputText({
-		title: i18n.ts.password,
-		type: 'password',
-	}).then(({ canceled, result: password }) => {
-		if (canceled) return;
-		os.api('i/2fa/register', {
-			password: password,
-		}).then(data => {
-			twoFactorData.value = data;
-		});
-	});
-}
-
-function unregister() {
-	os.inputText({
-		title: i18n.ts.password,
-		type: 'password',
-	}).then(({ canceled, result: password }) => {
-		if (canceled) return;
-		os.api('i/2fa/unregister', {
-			password: password,
-		}).then(() => {
-			usePasswordLessLogin.value = false;
-			updatePasswordLessLogin();
-		}).then(() => {
-			os.success();
-			$i!.twoFactorEnabled = false;
-		});
-	});
-}
-
-function submit() {
-	os.api('i/2fa/done', {
-		token: token.value,
-	}).then(() => {
-		os.success();
-		$i!.twoFactorEnabled = true;
-	}).catch(err => {
-		os.alert({
-			type: 'error',
-			text: err,
-		});
-	});
-}
-
-function registerKey() {
-	registration.value.saving = true;
-	os.api('i/2fa/key-done', {
-		password: registration.value.password,
-		name: keyName.value,
-		challengeId: registration.value.challengeId,
-		// we convert each 16 bits to a string to serialise
-		clientDataJSON: stringify(registration.value.credential.response.clientDataJSON),
-		attestationObject: hexify(registration.value.credential.response.attestationObject),
-	}).then(key => {
-		registration.value = null;
-		key.lastUsed = new Date();
-		os.success();
-	});
-}
-
-function unregisterKey(key) {
-	os.inputText({
-		title: i18n.ts.password,
-		type: 'password',
-	}).then(({ canceled, result: password }) => {
-		if (canceled) return;
-		return os.api('i/2fa/remove-key', {
-			password,
-			credentialId: key.id,
-		}).then(() => {
-			usePasswordLessLogin.value = false;
-			updatePasswordLessLogin();
-		}).then(() => {
-			os.success();
-		});
-	});
-}
-
-function addSecurityKey() {
-	os.inputText({
-		title: i18n.ts.password,
-		type: 'password',
-	}).then(({ canceled, result: password }) => {
-		if (canceled) return;
-		os.api('i/2fa/register-key', {
-			password,
-		}).then(reg => {
-			registration.value = {
-				password,
-				challengeId: reg!.challengeId,
-				stage: 0,
-				publicKeyOptions: {
-					challenge: byteify(reg!.challenge, 'base64'),
-					rp: {
-						id: hostname,
-						name: 'Misskey',
-					},
-					user: {
-						id: byteify($i!.id, 'ascii'),
-						name: $i!.username,
-						displayName: $i!.name,
-					},
-					pubKeyCredParams: [{ alg: -7, type: 'public-key' }],
-					timeout: 60000,
-					attestation: 'direct',
-				},
-				saving: true,
-			};
-			return navigator.credentials.create({
-				publicKey: registration.value.publicKeyOptions,
-			});
-		}).then(credential => {
-			registration.value.credential = credential;
-			registration.value.saving = false;
-			registration.value.stage = 1;
-		}).catch(err => {
-			console.warn('Error while registering?', err);
-			registration.value.error = err.message;
-			registration.value.stage = -1;
-		});
-	});
-}
-
-async function updatePasswordLessLogin() {
-	await os.api('i/2fa/password-less', {
-		value: !!usePasswordLessLogin.value,
-	});
-}
-</script>
diff --git a/packages/client/src/pages/settings/account-info.vue b/packages/client/src/pages/settings/account-info.vue
deleted file mode 100644
index ccd99c162a..0000000000
--- a/packages/client/src/pages/settings/account-info.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<template>
-<div class="_formRoot">
-	<MkKeyValue>
-		<template #key>ID</template>
-		<template #value><span class="_monospace">{{ $i.id }}</span></template>
-	</MkKeyValue>
-
-	<FormSection>
-		<MkKeyValue>
-			<template #key>{{ i18n.ts.registeredDate }}</template>
-			<template #value><MkTime :time="$i.createdAt" mode="detail"/></template>
-		</MkKeyValue>
-	</FormSection>
-
-	<FormSection v-if="stats">
-		<template #label>{{ i18n.ts.statistics }}</template>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.notesCount }}</template>
-			<template #value>{{ number(stats.notesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.repliesCount }}</template>
-			<template #value>{{ number(stats.repliesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.renotesCount }}</template>
-			<template #value>{{ number(stats.renotesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.repliedCount }}</template>
-			<template #value>{{ number(stats.repliedCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.renotedCount }}</template>
-			<template #value>{{ number(stats.renotedCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.pollVotesCount }}</template>
-			<template #value>{{ number(stats.pollVotesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.pollVotedCount }}</template>
-			<template #value>{{ number(stats.pollVotedCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.sentReactionsCount }}</template>
-			<template #value>{{ number(stats.sentReactionsCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.receivedReactionsCount }}</template>
-			<template #value>{{ number(stats.receivedReactionsCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.noteFavoritesCount }}</template>
-			<template #value>{{ number(stats.noteFavoritesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followingCount }}</template>
-			<template #value>{{ number(stats.followingCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followingCount }} ({{ i18n.ts.local }})</template>
-			<template #value>{{ number(stats.localFollowingCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followingCount }} ({{ i18n.ts.remote }})</template>
-			<template #value>{{ number(stats.remoteFollowingCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followersCount }}</template>
-			<template #value>{{ number(stats.followersCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followersCount }} ({{ i18n.ts.local }})</template>
-			<template #value>{{ number(stats.localFollowersCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followersCount }} ({{ i18n.ts.remote }})</template>
-			<template #value>{{ number(stats.remoteFollowersCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.pageLikesCount }}</template>
-			<template #value>{{ number(stats.pageLikesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.pageLikedCount }}</template>
-			<template #value>{{ number(stats.pageLikedCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.driveFilesCount }}</template>
-			<template #value>{{ number(stats.driveFilesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.driveUsage }}</template>
-			<template #value>{{ bytes(stats.driveUsage) }}</template>
-		</MkKeyValue>
-	</FormSection>
-
-	<FormSection>
-		<template #label>{{ i18n.ts.other }}</template>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>emailVerified</template>
-			<template #value>{{ $i.emailVerified ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>twoFactorEnabled</template>
-			<template #value>{{ $i.twoFactorEnabled ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>securityKeys</template>
-			<template #value>{{ $i.securityKeys ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>usePasswordLessLogin</template>
-			<template #value>{{ $i.usePasswordLessLogin ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>isModerator</template>
-			<template #value>{{ $i.isModerator ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>isAdmin</template>
-			<template #value>{{ $i.isAdmin ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import FormSection from '@/components/form/section.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import bytes from '@/filters/bytes';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const stats = ref<any>({});
-
-onMounted(() => {
-	os.api('users/stats', {
-		userId: $i!.id,
-	}).then(response => {
-		stats.value = response;
-	});
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.accountInfo,
-	icon: 'ti ti-info-circle',
-});
-</script>
diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
deleted file mode 100644
index 493d3b2618..0000000000
--- a/packages/client/src/pages/settings/accounts.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormSuspense :p="init">
-		<FormButton primary @click="addAccount"><i class="ti ti-plus"></i> {{ i18n.ts.addAccount }}</FormButton>
-
-		<div v-for="account in accounts" :key="account.id" class="_panel _button lcjjdxlm" @click="menu(account, $event)">
-			<div class="avatar">
-				<MkAvatar :user="account" class="avatar"/>
-			</div>
-			<div class="body">
-				<div class="name">
-					<MkUserName :user="account"/>
-				</div>
-				<div class="acct">
-					<MkAcct :user="account"/>
-				</div>
-			</div>
-		</div>
-	</FormSuspense>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { getAccounts, addAccount as addAccounts, removeAccount as _removeAccount, login, $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const storedAccounts = ref<any>(null);
-const accounts = ref<any>(null);
-
-const init = async () => {
-	getAccounts().then(accounts => {
-		storedAccounts.value = accounts.filter(x => x.id !== $i!.id);
-
-		console.log(storedAccounts.value);
-
-		return os.api('users/show', {
-			userIds: storedAccounts.value.map(x => x.id),
-		});
-	}).then(response => {
-		accounts.value = response;
-		console.log(accounts.value);
-	});
-};
-
-function menu(account, ev) {
-	os.popupMenu([{
-		text: i18n.ts.switch,
-		icon: 'ti ti-switch-horizontal',
-		action: () => switchAccount(account),
-	}, {
-		text: i18n.ts.remove,
-		icon: 'ti ti-trash',
-		danger: true,
-		action: () => removeAccount(account),
-	}], ev.currentTarget ?? ev.target);
-}
-
-function addAccount(ev) {
-	os.popupMenu([{
-		text: i18n.ts.existingAccount,
-		action: () => { addExistingAccount(); },
-	}, {
-		text: i18n.ts.createAccount,
-		action: () => { createAccount(); },
-	}], ev.currentTarget ?? ev.target);
-}
-
-function removeAccount(account) {
-	_removeAccount(account.id);
-}
-
-function addExistingAccount() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
-		done: res => {
-			addAccounts(res.id, res.i);
-			os.success();
-		},
-	}, 'closed');
-}
-
-function createAccount() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, {
-		done: res => {
-			addAccounts(res.id, res.i);
-			switchAccountWithToken(res.i);
-		},
-	}, 'closed');
-}
-
-async function switchAccount(account: any) {
-	const fetchedAccounts: any[] = await getAccounts();
-	const token = fetchedAccounts.find(x => x.id === account.id).token;
-	switchAccountWithToken(token);
-}
-
-function switchAccountWithToken(token: string) {
-	login(token);
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.accounts,
-	icon: 'ti ti-users',
-});
-</script>
-
-<style lang="scss" scoped>
-.lcjjdxlm {
-	display: flex;
-	padding: 16px;
-
-	> .avatar {
-		display: block;
-		flex-shrink: 0;
-		margin: 0 12px 0 0;
-
-		> .avatar {
-			width: 50px;
-			height: 50px;
-		}
-	}
-
-	> .body {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		width: calc(100% - 62px);
-		position: relative;
-
-		> .name {
-			font-weight: bold;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/settings/api.vue b/packages/client/src/pages/settings/api.vue
deleted file mode 100644
index 8d7291cd10..0000000000
--- a/packages/client/src/pages/settings/api.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormButton primary class="_formBlock" @click="generateToken">{{ i18n.ts.generateAccessToken }}</FormButton>
-	<FormLink to="/settings/apps" class="_formBlock">{{ i18n.ts.manageAccessTokens }}</FormLink>
-	<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null" class="_formBlock">API console</FormLink>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, ref } from 'vue';
-import FormLink from '@/components/form/link.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const isDesktop = ref(window.innerWidth >= 1100);
-
-function generateToken() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, {
-		done: async result => {
-			const { name, permissions } = result;
-			const { token } = await os.api('miauth/gen-token', {
-				session: null,
-				name: name,
-				permission: permissions,
-			});
-
-			os.alert({
-				type: 'success',
-				title: i18n.ts.token,
-				text: token,
-			});
-		},
-	}, 'closed');
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: 'API',
-	icon: 'ti ti-api',
-});
-</script>
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
deleted file mode 100644
index 05abadff23..0000000000
--- a/packages/client/src/pages/settings/apps.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormPagination ref="list" :pagination="pagination">
-		<template #empty>
-			<div class="_fullinfo">
-				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-				<div>{{ i18n.ts.nothing }}</div>
-			</div>
-		</template>
-		<template #default="{items}">
-			<div v-for="token in items" :key="token.id" class="_panel bfomjevm">
-				<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
-				<div class="body">
-					<div class="name">{{ token.name }}</div>
-					<div class="description">{{ token.description }}</div>
-					<div class="_keyValue">
-						<div>{{ i18n.ts.installedDate }}:</div>
-						<div><MkTime :time="token.createdAt"/></div>
-					</div>
-					<div class="_keyValue">
-						<div>{{ i18n.ts.lastUsedDate }}:</div>
-						<div><MkTime :time="token.lastUsedAt"/></div>
-					</div>
-					<div class="actions">
-						<button class="_button" @click="revoke(token)"><i class="ti ti-trash"></i></button>
-					</div>
-					<details>
-						<summary>{{ i18n.ts.details }}</summary>
-						<ul>
-							<li v-for="p in token.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
-						</ul>
-					</details>
-				</div>
-			</div>
-		</template>
-	</FormPagination>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import FormPagination from '@/components/MkPagination.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const list = ref<any>(null);
-
-const pagination = {
-	endpoint: 'i/apps' as const,
-	limit: 100,
-	params: {
-		sort: '+lastUsedAt',
-	},
-};
-
-function revoke(token) {
-	os.api('i/revoke-token', { tokenId: token.id }).then(() => {
-		list.value.reload();
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.installedApps,
-	icon: 'ti ti-plug',
-});
-</script>
-
-<style lang="scss" scoped>
-.bfomjevm {
-	display: flex;
-	padding: 16px;
-
-	> .icon {
-		display: block;
-		flex-shrink: 0;
-		margin: 0 12px 0 0;
-		width: 50px;
-		height: 50px;
-		border-radius: 8px;
-	}
-
-	> .body {
-		width: calc(100% - 62px);
-		position: relative;
-
-		> .name {
-			font-weight: bold;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/settings/custom-css.vue b/packages/client/src/pages/settings/custom-css.vue
deleted file mode 100644
index 2caad22b7b..0000000000
--- a/packages/client/src/pages/settings/custom-css.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormInfo warn class="_formBlock">{{ i18n.ts.customCssWarn }}</FormInfo>
-
-	<FormTextarea v-model="localCustomCss" manual-save tall class="_monospace _formBlock" style="tab-size: 2;">
-		<template #label>CSS</template>
-	</FormTextarea>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import * as os from '@/os';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const localCustomCss = ref(localStorage.getItem('customCss') ?? '');
-
-async function apply() {
-	localStorage.setItem('customCss', localCustomCss.value);
-
-	const { canceled } = await os.confirm({
-		type: 'info',
-		text: i18n.ts.reloadToApplySetting,
-	});
-	if (canceled) return;
-
-	unisonReload();
-}
-
-watch(localCustomCss, async () => {
-	await apply();
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.customCss,
-	icon: 'ti ti-code',
-});
-</script>
diff --git a/packages/client/src/pages/settings/deck.vue b/packages/client/src/pages/settings/deck.vue
deleted file mode 100644
index 82cefe05d5..0000000000
--- a/packages/client/src/pages/settings/deck.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormSwitch v-model="navWindow">{{ i18n.ts.defaultNavigationBehaviour }}: {{ i18n.ts.openInWindow }}</FormSwitch>
-
-	<FormSwitch v-model="alwaysShowMainColumn" class="_formBlock">{{ i18n.ts._deck.alwaysShowMainColumn }}</FormSwitch>
-
-	<FormRadios v-model="columnAlign" class="_formBlock">
-		<template #label>{{ i18n.ts._deck.columnAlign }}</template>
-		<option value="left">{{ i18n.ts.left }}</option>
-		<option value="center">{{ i18n.ts.center }}</option>
-	</FormRadios>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, watch } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormLink from '@/components/form/link.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormInput from '@/components/form/input.vue';
-import { deckStore } from '@/ui/deck/deck-store';
-import * as os from '@/os';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const navWindow = computed(deckStore.makeGetterSetter('navWindow'));
-const alwaysShowMainColumn = computed(deckStore.makeGetterSetter('alwaysShowMainColumn'));
-const columnAlign = computed(deckStore.makeGetterSetter('columnAlign'));
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.deck,
-	icon: 'ti ti-columns',
-});
-</script>
diff --git a/packages/client/src/pages/settings/delete-account.vue b/packages/client/src/pages/settings/delete-account.vue
deleted file mode 100644
index 8a25ff39f0..0000000000
--- a/packages/client/src/pages/settings/delete-account.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormInfo warn class="_formBlock">{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo>
-	<FormInfo class="_formBlock">{{ i18n.ts._accountDelete.sendEmail }}</FormInfo>
-	<FormButton v-if="!$i.isDeleted" danger class="_formBlock" @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</FormButton>
-	<FormButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</FormButton>
-</div>
-</template>
-
-<script lang="ts" setup>
-import FormInfo from '@/components/MkInfo.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { signout } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-async function deleteAccount() {
-	{
-		const { canceled } = await os.confirm({
-			type: 'warning',
-			text: i18n.ts.deleteAccountConfirm,
-		});
-		if (canceled) return;
-	}
-
-	const { canceled, result: password } = await os.inputText({
-		title: i18n.ts.password,
-		type: 'password',
-	});
-	if (canceled) return;
-
-	await os.apiWithDialog('i/delete-account', {
-		password: password,
-	});
-
-	await os.alert({
-		title: i18n.ts._accountDelete.started,
-	});
-
-	await signout();
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts._accountDelete.accountDelete,
-	icon: 'ti ti-alert-triangle',
-});
-</script>
diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
deleted file mode 100644
index 2d45b1add8..0000000000
--- a/packages/client/src/pages/settings/drive.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormSection v-if="!fetching">
-		<template #label>{{ i18n.ts.usageAmount }}</template>
-		<div class="_formBlock uawsfosz">
-			<div class="meter"><div :style="meterStyle"></div></div>
-		</div>
-		<FormSplit>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.capacity }}</template>
-				<template #value>{{ bytes(capacity, 1) }}</template>
-			</MkKeyValue>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.inUse }}</template>
-				<template #value>{{ bytes(usage, 1) }}</template>
-			</MkKeyValue>
-		</FormSplit>
-	</FormSection>
-
-	<FormSection>
-		<template #label>{{ i18n.ts.statistics }}</template>
-		<MkChart src="per-user-drive" :args="{ user: $i }" span="day" :limit="7 * 5" :bar="true" :stacked="true" :detailed="false" :aspect-ratio="6"/>
-	</FormSection>
-
-	<FormSection>
-		<FormLink @click="chooseUploadFolder()">
-			{{ i18n.ts.uploadFolder }}
-			<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
-			<template #suffixIcon><i class="fas fa-folder-open"></i></template>
-		</FormLink>
-		<FormSwitch v-model="keepOriginalUploading" class="_formBlock">
-			<template #label>{{ i18n.ts.keepOriginalUploading }}</template>
-			<template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template>
-		</FormSwitch>
-		<FormSwitch v-model="alwaysMarkNsfw" class="_formBlock" @update:model-value="saveProfile()">
-			<template #label>{{ i18n.ts.alwaysMarkSensitive }}</template>
-		</FormSwitch>
-		<FormSwitch v-model="autoSensitive" class="_formBlock" @update:model-value="saveProfile()">
-			<template #label>{{ i18n.ts.enableAutoSensitive }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
-			<template #caption>{{ i18n.ts.enableAutoSensitiveDescription }}</template>
-		</FormSwitch>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-import tinycolor from 'tinycolor2';
-import FormLink from '@/components/form/link.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSection from '@/components/form/section.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import FormSplit from '@/components/form/split.vue';
-import * as os from '@/os';
-import bytes from '@/filters/bytes';
-import { defaultStore } from '@/store';
-import MkChart from '@/components/MkChart.vue';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { $i } from '@/account';
-
-const fetching = ref(true);
-const usage = ref<any>(null);
-const capacity = ref<any>(null);
-const uploadFolder = ref<any>(null);
-let alwaysMarkNsfw = $ref($i.alwaysMarkNsfw);
-let autoSensitive = $ref($i.autoSensitive);
-
-const meterStyle = computed(() => {
-	return {
-		width: `${usage.value / capacity.value * 100}%`,
-		background: tinycolor({
-			h: 180 - (usage.value / capacity.value * 180),
-			s: 0.7,
-			l: 0.5,
-		}),
-	};
-});
-
-const keepOriginalUploading = computed(defaultStore.makeGetterSetter('keepOriginalUploading'));
-
-os.api('drive').then(info => {
-	capacity.value = info.capacity;
-	usage.value = info.usage;
-	fetching.value = false;
-});
-
-if (defaultStore.state.uploadFolder) {
-	os.api('drive/folders/show', {
-		folderId: defaultStore.state.uploadFolder,
-	}).then(response => {
-		uploadFolder.value = response;
-	});
-}
-
-function chooseUploadFolder() {
-	os.selectDriveFolder(false).then(async folder => {
-		defaultStore.set('uploadFolder', folder ? folder.id : null);
-		os.success();
-		if (defaultStore.state.uploadFolder) {
-			uploadFolder.value = await os.api('drive/folders/show', {
-				folderId: defaultStore.state.uploadFolder,
-			});
-		} else {
-			uploadFolder.value = null;
-		}
-	});
-}
-
-function saveProfile() {
-	os.api('i/update', {
-		alwaysMarkNsfw: !!alwaysMarkNsfw,
-		autoSensitive: !!autoSensitive,
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.drive,
-	icon: 'ti ti-cloud',
-});
-</script>
-
-<style lang="scss" scoped>
-
-@use "sass:math";
-
-.uawsfosz {
-
-	> .meter {
-		$size: 12px;
-		background: rgba(0, 0, 0, 0.1);
-		border-radius: math.div($size, 2);
-		overflow: hidden;
-
-		> div {
-			height: $size;
-			border-radius: math.div($size, 2);
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/settings/email.vue b/packages/client/src/pages/settings/email.vue
deleted file mode 100644
index 3fff8c6b1d..0000000000
--- a/packages/client/src/pages/settings/email.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormSection>
-		<template #label>{{ i18n.ts.emailAddress }}</template>
-		<FormInput v-model="emailAddress" type="email" manual-save>
-			<template #prefix><i class="ti ti-mail"></i></template>
-			<template v-if="$i.email && !$i.emailVerified" #caption>{{ i18n.ts.verificationEmailSent }}</template>
-			<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="ti ti-check" style="color: var(--success);"></i> {{ i18n.ts.emailVerified }}</template>
-		</FormInput>
-	</FormSection>
-
-	<FormSection>
-		<FormSwitch :model-value="$i.receiveAnnouncementEmail" @update:model-value="onChangeReceiveAnnouncementEmail">
-			{{ i18n.ts.receiveAnnouncementFromInstance }}
-		</FormSwitch>
-	</FormSection>
-
-	<FormSection>
-		<template #label>{{ i18n.ts.emailNotification }}</template>
-		<FormSwitch v-model="emailNotification_mention" class="_formBlock">
-			{{ i18n.ts._notification._types.mention }}
-		</FormSwitch>
-		<FormSwitch v-model="emailNotification_reply" class="_formBlock">
-			{{ i18n.ts._notification._types.reply }}
-		</FormSwitch>
-		<FormSwitch v-model="emailNotification_quote" class="_formBlock">
-			{{ i18n.ts._notification._types.quote }}
-		</FormSwitch>
-		<FormSwitch v-model="emailNotification_follow" class="_formBlock">
-			{{ i18n.ts._notification._types.follow }}
-		</FormSwitch>
-		<FormSwitch v-model="emailNotification_receiveFollowRequest" class="_formBlock">
-			{{ i18n.ts._notification._types.receiveFollowRequest }}
-		</FormSwitch>
-		<FormSwitch v-model="emailNotification_groupInvited" class="_formBlock">
-			{{ i18n.ts._notification._types.groupInvited }}
-		</FormSwitch>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue';
-import FormSection from '@/components/form/section.vue';
-import FormInput from '@/components/form/input.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const emailAddress = ref($i!.email);
-
-const onChangeReceiveAnnouncementEmail = (v) => {
-	os.api('i/update', {
-		receiveAnnouncementEmail: v,
-	});
-};
-
-const saveEmailAddress = () => {
-	os.inputText({
-		title: i18n.ts.password,
-		type: 'password',
-	}).then(({ canceled, result: password }) => {
-		if (canceled) return;
-		os.apiWithDialog('i/update-email', {
-			password: password,
-			email: emailAddress.value,
-		});
-	});
-};
-
-const emailNotification_mention = ref($i!.emailNotificationTypes.includes('mention'));
-const emailNotification_reply = ref($i!.emailNotificationTypes.includes('reply'));
-const emailNotification_quote = ref($i!.emailNotificationTypes.includes('quote'));
-const emailNotification_follow = ref($i!.emailNotificationTypes.includes('follow'));
-const emailNotification_receiveFollowRequest = ref($i!.emailNotificationTypes.includes('receiveFollowRequest'));
-const emailNotification_groupInvited = ref($i!.emailNotificationTypes.includes('groupInvited'));
-
-const saveNotificationSettings = () => {
-	os.api('i/update', {
-		emailNotificationTypes: [
-			...[emailNotification_mention.value ? 'mention' : null],
-			...[emailNotification_reply.value ? 'reply' : null],
-			...[emailNotification_quote.value ? 'quote' : null],
-			...[emailNotification_follow.value ? 'follow' : null],
-			...[emailNotification_receiveFollowRequest.value ? 'receiveFollowRequest' : null],
-			...[emailNotification_groupInvited.value ? 'groupInvited' : null],
-		].filter(x => x != null),
-	});
-};
-
-watch([emailNotification_mention, emailNotification_reply, emailNotification_quote, emailNotification_follow, emailNotification_receiveFollowRequest, emailNotification_groupInvited], () => {
-	saveNotificationSettings();
-});
-
-onMounted(() => {
-	watch(emailAddress, () => {
-		saveEmailAddress();
-	});
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.email,
-	icon: 'ti ti-mail',
-});
-</script>
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
deleted file mode 100644
index 84d99d2fd7..0000000000
--- a/packages/client/src/pages/settings/general.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormSelect v-model="lang" class="_formBlock">
-		<template #label>{{ i18n.ts.uiLanguage }}</template>
-		<option v-for="x in langs" :key="x[0]" :value="x[0]">{{ x[1] }}</option>
-		<template #caption>
-			<I18n :src="i18n.ts.i18nInfo" tag="span">
-				<template #link>
-					<MkLink url="https://crowdin.com/project/misskey">Crowdin</MkLink>
-				</template>
-			</I18n>
-		</template>
-	</FormSelect>
-
-	<FormRadios v-model="overridedDeviceKind" class="_formBlock">
-		<template #label>{{ i18n.ts.overridedDeviceKind }}</template>
-		<option :value="null">{{ i18n.ts.auto }}</option>
-		<option value="smartphone"><i class="ti ti-device-mobile"/> {{ i18n.ts.smartphone }}</option>
-		<option value="tablet"><i class="ti ti-device-tablet"/> {{ i18n.ts.tablet }}</option>
-		<option value="desktop"><i class="ti ti-device-desktop"/> {{ i18n.ts.desktop }}</option>
-	</FormRadios>
-
-	<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{ i18n.ts.showFixedPostForm }}</FormSwitch>
-
-	<FormSection>
-		<template #label>{{ i18n.ts.behavior }}</template>
-		<FormSwitch v-model="imageNewTab" class="_formBlock">{{ i18n.ts.openImageInNewTab }}</FormSwitch>
-		<FormSwitch v-model="enableInfiniteScroll" class="_formBlock">{{ i18n.ts.enableInfiniteScroll }}</FormSwitch>
-		<FormSwitch v-model="useReactionPickerForContextMenu" class="_formBlock">{{ i18n.ts.useReactionPickerForContextMenu }}</FormSwitch>
-		<FormSwitch v-model="disablePagesScript" class="_formBlock">{{ i18n.ts.disablePagesScript }}</FormSwitch>
-
-		<FormSelect v-model="serverDisconnectedBehavior" class="_formBlock">
-			<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
-			<option value="reload">{{ i18n.ts._serverDisconnectedBehavior.reload }}</option>
-			<option value="dialog">{{ i18n.ts._serverDisconnectedBehavior.dialog }}</option>
-			<option value="quiet">{{ i18n.ts._serverDisconnectedBehavior.quiet }}</option>
-		</FormSelect>
-	</FormSection>
-
-	<FormSection>
-		<template #label>{{ i18n.ts.appearance }}</template>
-		<FormSwitch v-model="disableAnimatedMfm" class="_formBlock">{{ i18n.ts.disableAnimatedMfm }}</FormSwitch>
-		<FormSwitch v-model="reduceAnimation" class="_formBlock">{{ i18n.ts.reduceUiAnimation }}</FormSwitch>
-		<FormSwitch v-model="useBlurEffect" class="_formBlock">{{ i18n.ts.useBlurEffect }}</FormSwitch>
-		<FormSwitch v-model="useBlurEffectForModal" class="_formBlock">{{ i18n.ts.useBlurEffectForModal }}</FormSwitch>
-		<FormSwitch v-model="showGapBetweenNotesInTimeline" class="_formBlock">{{ i18n.ts.showGapBetweenNotesInTimeline }}</FormSwitch>
-		<FormSwitch v-model="loadRawImages" class="_formBlock">{{ i18n.ts.loadRawImages }}</FormSwitch>
-		<FormSwitch v-model="disableShowingAnimatedImages" class="_formBlock">{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch>
-		<FormSwitch v-model="squareAvatars" class="_formBlock">{{ i18n.ts.squareAvatars }}</FormSwitch>
-		<FormSwitch v-model="useSystemFont" class="_formBlock">{{ i18n.ts.useSystemFont }}</FormSwitch>
-		<div class="_formBlock">
-			<FormRadios v-model="emojiStyle">
-				<template #label>{{ i18n.ts.emojiStyle }}</template>
-				<option value="native">{{ i18n.ts.native }}</option>
-				<option value="fluentEmoji">Fluent Emoji</option>
-				<option value="twemoji">Twemoji</option>
-			</FormRadios>
-			<div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
-		</div>
-
-		<FormSwitch v-model="disableDrawer" class="_formBlock">{{ i18n.ts.disableDrawer }}</FormSwitch>
-
-		<FormRadios v-model="fontSize" class="_formBlock">
-			<template #label>{{ i18n.ts.fontSize }}</template>
-			<option :value="null"><span style="font-size: 14px;">Aa</span></option>
-			<option value="1"><span style="font-size: 15px;">Aa</span></option>
-			<option value="2"><span style="font-size: 16px;">Aa</span></option>
-			<option value="3"><span style="font-size: 17px;">Aa</span></option>
-		</FormRadios>
-	</FormSection>
-
-	<FormSection>
-		<FormSwitch v-model="aiChanMode">{{ i18n.ts.aiChanMode }}</FormSwitch>
-	</FormSection>
-
-	<FormSelect v-model="instanceTicker" class="_formBlock">
-		<template #label>{{ i18n.ts.instanceTicker }}</template>
-		<option value="none">{{ i18n.ts._instanceTicker.none }}</option>
-		<option value="remote">{{ i18n.ts._instanceTicker.remote }}</option>
-		<option value="always">{{ i18n.ts._instanceTicker.always }}</option>
-	</FormSelect>
-
-	<FormSelect v-model="nsfw" class="_formBlock">
-		<template #label>{{ i18n.ts.nsfw }}</template>
-		<option value="respect">{{ i18n.ts._nsfw.respect }}</option>
-		<option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
-		<option value="force">{{ i18n.ts._nsfw.force }}</option>
-	</FormSelect>
-
-	<FormRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing class="_formBlock">
-		<template #label>{{ i18n.ts.numberOfPageCache }}</template>
-		<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
-	</FormRange>
-
-	<FormLink to="/settings/deck" class="_formBlock">{{ i18n.ts.deck }}</FormLink>
-
-	<FormLink to="/settings/custom-css" class="_formBlock"><template #icon><i class="ti ti-code"></i></template>{{ i18n.ts.customCss }}</FormLink>
-</div>
-</template>
-
-<script lang="ts" setup>
-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';
-import FormRange from '@/components/form/range.vue';
-import FormSection from '@/components/form/section.vue';
-import FormLink from '@/components/form/link.vue';
-import MkLink from '@/components/MkLink.vue';
-import { langs } from '@/config';
-import { defaultStore } from '@/store';
-import * as os from '@/os';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const lang = ref(localStorage.getItem('lang'));
-const fontSize = ref(localStorage.getItem('fontSize'));
-const useSystemFont = ref(localStorage.getItem('useSystemFont') != null);
-
-async function reloadAsk() {
-	const { canceled } = await os.confirm({
-		type: 'info',
-		text: i18n.ts.reloadToApplySetting,
-	});
-	if (canceled) return;
-
-	unisonReload();
-}
-
-const overridedDeviceKind = computed(defaultStore.makeGetterSetter('overridedDeviceKind'));
-const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior'));
-const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v));
-const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));
-const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
-const showGapBetweenNotesInTimeline = computed(defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'));
-const disableAnimatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm', v => !v, v => !v));
-const emojiStyle = computed(defaultStore.makeGetterSetter('emojiStyle'));
-const disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer'));
-const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
-const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
-const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));
-const nsfw = computed(defaultStore.makeGetterSetter('nsfw'));
-const disablePagesScript = computed(defaultStore.makeGetterSetter('disablePagesScript'));
-const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostForm'));
-const numberOfPageCache = computed(defaultStore.makeGetterSetter('numberOfPageCache'));
-const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'));
-const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll'));
-const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
-const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
-const aiChanMode = computed(defaultStore.makeGetterSetter('aiChanMode'));
-
-watch(lang, () => {
-	localStorage.setItem('lang', lang.value as string);
-	localStorage.removeItem('locale');
-});
-
-watch(fontSize, () => {
-	if (fontSize.value == null) {
-		localStorage.removeItem('fontSize');
-	} else {
-		localStorage.setItem('fontSize', fontSize.value);
-	}
-});
-
-watch(useSystemFont, () => {
-	if (useSystemFont.value) {
-		localStorage.setItem('useSystemFont', 't');
-	} else {
-		localStorage.removeItem('useSystemFont');
-	}
-});
-
-watch([
-	lang,
-	fontSize,
-	useSystemFont,
-	enableInfiniteScroll,
-	squareAvatars,
-	aiChanMode,
-	showGapBetweenNotesInTimeline,
-	instanceTicker,
-	overridedDeviceKind,
-], async () => {
-	await reloadAsk();
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.general,
-	icon: 'ti ti-adjustments',
-});
-</script>
diff --git a/packages/client/src/pages/settings/import-export.vue b/packages/client/src/pages/settings/import-export.vue
deleted file mode 100644
index 7db267c142..0000000000
--- a/packages/client/src/pages/settings/import-export.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormSection>
-		<template #label>{{ i18n.ts._exportOrImport.allNotes }}</template>
-		<FormFolder>
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ti ti-download"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportNotes()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts._exportOrImport.followingList }}</template>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ti ti-download"></i></template>
-			<FormSwitch v-model="excludeMutingUsers" class="_formBlock">
-				{{ i18n.ts._exportOrImport.excludeMutingUsers }}
-			</FormSwitch>
-			<FormSwitch v-model="excludeInactiveUsers" class="_formBlock">
-				{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
-			</FormSwitch>
-			<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ti ti-upload"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts._exportOrImport.userLists }}</template>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ti ti-download"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ti ti-upload"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts._exportOrImport.muteList }}</template>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ti ti-download"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ti ti-upload"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts._exportOrImport.blockingList }}</template>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.export }}</template>
-			<template #icon><i class="ti ti-download"></i></template>
-			<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-		</FormFolder>
-		<FormFolder class="_formBlock">
-			<template #label>{{ i18n.ts.import }}</template>
-			<template #icon><i class="ti ti-upload"></i></template>
-			<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
-		</FormFolder>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import FormSection from '@/components/form/section.vue';
-import FormFolder from '@/components/form/folder.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { selectFile } from '@/scripts/select-file';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const excludeMutingUsers = ref(false);
-const excludeInactiveUsers = ref(false);
-
-const onExportSuccess = () => {
-	os.alert({
-		type: 'info',
-		text: i18n.ts.exportRequested,
-	});
-};
-
-const onImportSuccess = () => {
-	os.alert({
-		type: 'info',
-		text: i18n.ts.importRequested,
-	});
-};
-
-const onError = (ev) => {
-	os.alert({
-		type: 'error',
-		text: ev.message,
-	});
-};
-
-const exportNotes = () => {
-	os.api('i/export-notes', {}).then(onExportSuccess).catch(onError);
-};
-
-const exportFollowing = () => {
-	os.api('i/export-following', {
-		excludeMuting: excludeMutingUsers.value,
-		excludeInactive: excludeInactiveUsers.value,
-	})
-		.then(onExportSuccess).catch(onError);
-};
-
-const exportBlocking = () => {
-	os.api('i/export-blocking', {}).then(onExportSuccess).catch(onError);
-};
-
-const exportUserLists = () => {
-	os.api('i/export-user-lists', {}).then(onExportSuccess).catch(onError);
-};
-
-const exportMuting = () => {
-	os.api('i/export-mute', {}).then(onExportSuccess).catch(onError);
-};
-
-const importFollowing = async (ev) => {
-	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-following', { fileId: file.id }).then(onImportSuccess).catch(onError);
-};
-
-const importUserLists = async (ev) => {
-	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-user-lists', { fileId: file.id }).then(onImportSuccess).catch(onError);
-};
-
-const importMuting = async (ev) => {
-	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-muting', { fileId: file.id }).then(onImportSuccess).catch(onError);
-};
-
-const importBlocking = async (ev) => {
-	const file = await selectFile(ev.currentTarget ?? ev.target);
-	os.api('i/import-blocking', { fileId: file.id }).then(onImportSuccess).catch(onError);
-};
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.importAndExport,
-	icon: 'ti ti-package',
-});
-</script>
-
-<style module>
-.button {
-	margin-right: 16px;
-}
-</style>
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
deleted file mode 100644
index 01436cd554..0000000000
--- a/packages/client/src/pages/settings/index.vue
+++ /dev/null
@@ -1,291 +0,0 @@
-<template>
-<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 || currentPage?.route.name == null" class="nav">
-					<div class="baaadecd">
-						<MkInfo v-if="emailNotConfigured" warn class="info">{{ i18n.ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
-						<MkSuperMenu :def="menuDef" :grid="currentPage?.route.name == null"></MkSuperMenu>
-					</div>
-				</div>
-				<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
-					<div class="bkzroven">
-						<RouterView/>
-					</div>
-				</div>
-			</div>
-		</div>
-	</MkSpacer>
-</mkstickycontainer>
-</template>
-
-<script setup lang="ts">
-import { computed, defineAsyncComponent, inject, nextTick, onActivated, onMounted, onUnmounted, provide, ref, watch } from 'vue';
-import { i18n } from '@/i18n';
-import MkInfo from '@/components/MkInfo.vue';
-import MkSuperMenu from '@/components/MkSuperMenu.vue';
-import { scroll } from '@/scripts/scroll';
-import { signout, $i } from '@/account';
-import { unisonReload } from '@/scripts/unison-reload';
-import { instance } from '@/instance';
-import { useRouter } from '@/router';
-import { definePageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-import * as os from '@/os';
-
-const indexInfo = {
-	title: i18n.ts.settings,
-	icon: 'ti ti-settings',
-	hideHeader: true,
-};
-const INFO = ref(indexInfo);
-const el = ref<HTMLElement | null>(null);
-const childInfo = ref(null);
-
-const router = useRouter();
-
-let narrow = $ref(false);
-const NARROW_THRESHOLD = 600;
-
-let currentPage = $computed(() => router.currentRef.value.child);
-
-const ro = new ResizeObserver((entries, observer) => {
-	if (entries.length === 0) return;
-	narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
-});
-
-const menuDef = computed(() => [{
-	title: i18n.ts.basicSettings,
-	items: [{
-		icon: 'ti ti-user',
-		text: i18n.ts.profile,
-		to: '/settings/profile',
-		active: currentPage?.route.name === 'profile',
-	}, {
-		icon: 'ti ti-lock-open',
-		text: i18n.ts.privacy,
-		to: '/settings/privacy',
-		active: currentPage?.route.name === 'privacy',
-	}, {
-		icon: 'ti ti-mood-happy',
-		text: i18n.ts.reaction,
-		to: '/settings/reaction',
-		active: currentPage?.route.name === 'reaction',
-	}, {
-		icon: 'ti ti-cloud',
-		text: i18n.ts.drive,
-		to: '/settings/drive',
-		active: currentPage?.route.name === 'drive',
-	}, {
-		icon: 'ti ti-bell',
-		text: i18n.ts.notifications,
-		to: '/settings/notifications',
-		active: currentPage?.route.name === 'notifications',
-	}, {
-		icon: 'ti ti-mail',
-		text: i18n.ts.email,
-		to: '/settings/email',
-		active: currentPage?.route.name === 'email',
-	}, {
-		icon: 'ti ti-share',
-		text: i18n.ts.integration,
-		to: '/settings/integration',
-		active: currentPage?.route.name === 'integration',
-	}, {
-		icon: 'ti ti-lock',
-		text: i18n.ts.security,
-		to: '/settings/security',
-		active: currentPage?.route.name === 'security',
-	}],
-}, {
-	title: i18n.ts.clientSettings,
-	items: [{
-		icon: 'ti ti-adjustments',
-		text: i18n.ts.general,
-		to: '/settings/general',
-		active: currentPage?.route.name === 'general',
-	}, {
-		icon: 'ti ti-palette',
-		text: i18n.ts.theme,
-		to: '/settings/theme',
-		active: currentPage?.route.name === 'theme',
-	}, {
-		icon: 'ti ti-menu-2',
-		text: i18n.ts.navbar,
-		to: '/settings/navbar',
-		active: currentPage?.route.name === 'navbar',
-	}, {
-		icon: 'ti ti-equal-double',
-		text: i18n.ts.statusbar,
-		to: '/settings/statusbar',
-		active: currentPage?.route.name === 'statusbar',
-	}, {
-		icon: 'ti ti-music',
-		text: i18n.ts.sounds,
-		to: '/settings/sounds',
-		active: currentPage?.route.name === 'sounds',
-	}, {
-		icon: 'ti ti-plug',
-		text: i18n.ts.plugins,
-		to: '/settings/plugin',
-		active: currentPage?.route.name === 'plugin',
-	}],
-}, {
-	title: i18n.ts.otherSettings,
-	items: [{
-		icon: 'ti ti-package',
-		text: i18n.ts.importAndExport,
-		to: '/settings/import-export',
-		active: currentPage?.route.name === 'import-export',
-	}, {
-		icon: 'ti ti-planet-off',
-		text: i18n.ts.instanceMute,
-		to: '/settings/instance-mute',
-		active: currentPage?.route.name === 'instance-mute',
-	}, {
-		icon: 'ti ti-ban',
-		text: i18n.ts.muteAndBlock,
-		to: '/settings/mute-block',
-		active: currentPage?.route.name === 'mute-block',
-	}, {
-		icon: 'ti ti-message-off',
-		text: i18n.ts.wordMute,
-		to: '/settings/word-mute',
-		active: currentPage?.route.name === 'word-mute',
-	}, {
-		icon: 'ti ti-api',
-		text: 'API',
-		to: '/settings/api',
-		active: currentPage?.route.name === 'api',
-	}, {
-		icon: 'ti ti-webhook',
-		text: 'Webhook',
-		to: '/settings/webhook',
-		active: currentPage?.route.name === 'webhook',
-	}, {
-		icon: 'ti ti-dots',
-		text: i18n.ts.other,
-		to: '/settings/other',
-		active: currentPage?.route.name === 'other',
-	}],
-}, {
-	items: [{
-		icon: 'ti ti-device-floppy',
-		text: i18n.ts.preferencesBackups,
-		to: '/settings/preferences-backups',
-		active: currentPage?.route.name === 'preferences-backups',
-	}, {
-		type: 'button',
-		icon: 'ti ti-trash',
-		text: i18n.ts.clearCache,
-		action: () => {
-			localStorage.removeItem('locale');
-			localStorage.removeItem('theme');
-			unisonReload();
-		},
-	}, {
-		type: 'button',
-		icon: 'ti ti-power',
-		text: i18n.ts.logout,
-		action: async () => {
-			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: i18n.ts.logoutConfirm,
-			});
-			if (canceled) return;
-			signout();
-		},
-		danger: true,
-	}],
-}]);
-
-watch($$(narrow), () => {
-});
-
-onMounted(() => {
-	ro.observe(el.value);
-
-	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
-
-	if (!narrow && currentPage?.route.name == null) {
-		router.replace('/settings/profile');
-	}
-});
-
-onActivated(() => {
-	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
-
-	if (!narrow && currentPage?.route.name == null) {
-		router.replace('/settings/profile');
-	}
-});
-
-onUnmounted(() => {
-	ro.disconnect();
-});
-
-const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
-
-provideMetadataReceiver((info) => {
-	if (info == null) {
-		childInfo.value = null;
-	} else {
-		childInfo.value = info;
-	}
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(INFO);
-// w 890
-// h 700
-</script>
-
-<style lang="scss" scoped>
-.vvcocwet {
-	> .body {
-		> .nav {
-			.baaadecd {
-				> .info {
-					margin: 16px 0;
-				}
-
-				> .accounts {
-					> .avatar {
-						display: block;
-						width: 50px;
-						height: 50px;
-						margin: 8px auto 16px auto;
-					}
-				}
-			}
-		}
-
-		> .main {
-			.bkzroven {
-			}
-		}
-	}
-
-	&.wide {
-		> .body {
-			display: flex;
-			height: 100%;
-
-			> .nav {
-				width: 34%;
-				padding-right: 32px;
-				box-sizing: border-box;
-			}
-
-			> .main {
-				flex: 1;
-				min-width: 0;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/settings/instance-mute.vue b/packages/client/src/pages/settings/instance-mute.vue
deleted file mode 100644
index 54504de188..0000000000
--- a/packages/client/src/pages/settings/instance-mute.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-<div class="_formRoot">
-	<MkInfo>{{ i18n.ts._instanceMute.title }}</MkInfo>
-	<FormTextarea v-model="instanceMutes" class="_formBlock">
-		<template #label>{{ i18n.ts._instanceMute.heading }}</template>
-		<template #caption>{{ i18n.ts._instanceMute.instanceMuteDescription }}<br>{{ i18n.ts._instanceMute.instanceMuteDescription2 }}</template>
-	</FormTextarea>
-	<MkButton primary :disabled="!changed" class="_formBlock" @click="save()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const instanceMutes = ref($i!.mutedInstances.join('\n'));
-const changed = ref(false);
-
-async function save() {
-	let mutes = instanceMutes.value
-		.trim().split('\n')
-		.map(el => el.trim())
-		.filter(el => el);
-
-	await os.api('i/update', {
-		mutedInstances: mutes,
-	});
-
-	changed.value = false;
-
-	// Refresh filtered list to signal to the user how they've been saved
-	instanceMutes.value = mutes.join('\n');
-}
-
-watch(instanceMutes, () => {
-	changed.value = true;
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.instanceMute,
-	icon: 'ti ti-planet-off',
-});
-</script>
diff --git a/packages/client/src/pages/settings/integration.vue b/packages/client/src/pages/settings/integration.vue
deleted file mode 100644
index 557fe778e6..0000000000
--- a/packages/client/src/pages/settings/integration.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormSection v-if="instance.enableTwitterIntegration">
-		<template #label><i class="ti ti-brand-twitter"></i> Twitter</template>
-		<p v-if="integrations.twitter">{{ i18n.ts.connectedTo }}: <a :href="`https://twitter.com/${integrations.twitter.screenName}`" rel="nofollow noopener" target="_blank">@{{ integrations.twitter.screenName }}</a></p>
-		<MkButton v-if="integrations.twitter" danger @click="disconnectTwitter">{{ i18n.ts.disconnectService }}</MkButton>
-		<MkButton v-else primary @click="connectTwitter">{{ i18n.ts.connectService }}</MkButton>
-	</FormSection>
-
-	<FormSection v-if="instance.enableDiscordIntegration">
-		<template #label><i class="ti ti-brand-discord"></i> Discord</template>
-		<p v-if="integrations.discord">{{ i18n.ts.connectedTo }}: <a :href="`https://discord.com/users/${integrations.discord.id}`" rel="nofollow noopener" target="_blank">@{{ integrations.discord.username }}#{{ integrations.discord.discriminator }}</a></p>
-		<MkButton v-if="integrations.discord" danger @click="disconnectDiscord">{{ i18n.ts.disconnectService }}</MkButton>
-		<MkButton v-else primary @click="connectDiscord">{{ i18n.ts.connectService }}</MkButton>
-	</FormSection>
-
-	<FormSection v-if="instance.enableGithubIntegration">
-		<template #label><i class="ti ti-brand-github"></i> GitHub</template>
-		<p v-if="integrations.github">{{ i18n.ts.connectedTo }}: <a :href="`https://github.com/${integrations.github.login}`" rel="nofollow noopener" target="_blank">@{{ integrations.github.login }}</a></p>
-		<MkButton v-if="integrations.github" danger @click="disconnectGithub">{{ i18n.ts.disconnectService }}</MkButton>
-		<MkButton v-else primary @click="connectGithub">{{ i18n.ts.connectService }}</MkButton>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
-import { apiUrl } from '@/config';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import { $i } from '@/account';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const twitterForm = ref<Window | null>(null);
-const discordForm = ref<Window | null>(null);
-const githubForm = ref<Window | null>(null);
-
-const integrations = computed(() => $i!.integrations);
-
-function openWindow(service: string, type: string) {
-	return window.open(`${apiUrl}/${type}/${service}`,
-		`${service}_${type}_window`,
-		'height=570, width=520',
-	);
-}
-
-function connectTwitter() {
-	twitterForm.value = openWindow('twitter', 'connect');
-}
-
-function disconnectTwitter() {
-	openWindow('twitter', 'disconnect');
-}
-
-function connectDiscord() {
-	discordForm.value = openWindow('discord', 'connect');
-}
-
-function disconnectDiscord() {
-	openWindow('discord', 'disconnect');
-}
-
-function connectGithub() {
-	githubForm.value = openWindow('github', 'connect');
-}
-
-function disconnectGithub() {
-	openWindow('github', 'disconnect');
-}
-
-onMounted(() => {
-	document.cookie = `igi=${$i!.token}; path=/;` +
-		' max-age=31536000;' +
-		(document.location.protocol.startsWith('https') ? ' secure' : '');
-
-	watch(integrations, () => {
-		if (integrations.value.twitter) {
-			if (twitterForm.value) twitterForm.value.close();
-		}
-		if (integrations.value.discord) {
-			if (discordForm.value) discordForm.value.close();
-		}
-		if (integrations.value.github) {
-			if (githubForm.value) githubForm.value.close();
-		}
-	});
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.integration,
-	icon: 'ti ti-share',
-});
-</script>
diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/mute-block.vue
deleted file mode 100644
index 1cf33d34db..0000000000
--- a/packages/client/src/pages/settings/mute-block.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-<div class="_formRoot">
-	<MkTab v-model="tab" style="margin-bottom: var(--margin);">
-		<option value="mute">{{ i18n.ts.mutedUsers }}</option>
-		<option value="block">{{ i18n.ts.blockedUsers }}</option>
-	</MkTab>
-	<div v-if="tab === 'mute'">
-		<MkPagination :pagination="mutingPagination" class="muting">
-			<template #empty><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template>
-			<template #default="{items}">
-				<FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)">
-					<MkAcct :user="mute.mutee"/>
-				</FormLink>
-			</template>
-		</MkPagination>
-	</div>
-	<div v-if="tab === 'block'">
-		<MkPagination :pagination="blockingPagination" class="blocking">
-			<template #empty><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template>
-			<template #default="{items}">
-				<FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)">
-					<MkAcct :user="block.blockee"/>
-				</FormLink>
-			</template>
-		</MkPagination>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import MkTab from '@/components/MkTab.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import FormLink from '@/components/form/link.vue';
-import { userPage } from '@/filters/user';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let tab = $ref('mute');
-
-const mutingPagination = {
-	endpoint: 'mute/list' as const,
-	limit: 10,
-};
-
-const blockingPagination = {
-	endpoint: 'blocking/list' as const,
-	limit: 10,
-};
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.muteAndBlock,
-	icon: 'ti ti-ban',
-});
-</script>
diff --git a/packages/client/src/pages/settings/navbar.vue b/packages/client/src/pages/settings/navbar.vue
deleted file mode 100644
index 0b2776ec90..0000000000
--- a/packages/client/src/pages/settings/navbar.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormTextarea v-model="items" tall manual-save class="_formBlock">
-		<template #label>{{ i18n.ts.navbar }}</template>
-		<template #caption><button class="_textButton" @click="addItem">{{ i18n.ts.addItem }}</button></template>
-	</FormTextarea>
-
-	<FormRadios v-model="menuDisplay" class="_formBlock">
-		<template #label>{{ i18n.ts.display }}</template>
-		<option value="sideFull">{{ i18n.ts._menuDisplay.sideFull }}</option>
-		<option value="sideIcon">{{ i18n.ts._menuDisplay.sideIcon }}</option>
-		<option value="top">{{ i18n.ts._menuDisplay.top }}</option>
-		<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
-	</FormRadios>
-
-	<FormButton danger class="_formBlock" @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { defaultStore } from '@/store';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const items = ref(defaultStore.state.menu.join('\n'));
-
-const split = computed(() => items.value.trim().split('\n').filter(x => x.trim() !== ''));
-const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
-
-async function reloadAsk() {
-	const { canceled } = await os.confirm({
-		type: 'info',
-		text: i18n.ts.reloadToApplySetting,
-	});
-	if (canceled) return;
-
-	unisonReload();
-}
-
-async function addItem() {
-	const menu = Object.keys(navbarItemDef).filter(k => !defaultStore.state.menu.includes(k));
-	const { canceled, result: item } = await os.select({
-		title: i18n.ts.addItem,
-		items: [...menu.map(k => ({
-			value: k, text: i18n.ts[navbarItemDef[k].title],
-		})), {
-			value: '-', text: i18n.ts.divider,
-		}],
-	});
-	if (canceled) return;
-	items.value = [...split.value, item].join('\n');
-}
-
-async function save() {
-	defaultStore.set('menu', split.value);
-	await reloadAsk();
-}
-
-function reset() {
-	defaultStore.reset('menu');
-	items.value = defaultStore.state.menu.join('\n');
-}
-
-watch(items, async () => {
-	await save();
-});
-
-watch(menuDisplay, async () => {
-	await reloadAsk();
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.navbar,
-	icon: 'ti ti-list',
-});
-</script>
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
deleted file mode 100644
index e85fede157..0000000000
--- a/packages/client/src/pages/settings/notifications.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormLink class="_formBlock" @click="configure"><template #icon><i class="ti ti-settings"></i></template>{{ i18n.ts.notificationSetting }}</FormLink>
-	<FormSection>
-		<FormLink class="_formBlock" @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</FormLink>
-		<FormLink class="_formBlock" @click="readAllUnreadNotes">{{ i18n.ts.markAsReadAllUnreadNotes }}</FormLink>
-		<FormLink class="_formBlock" @click="readAllMessagingMessages">{{ i18n.ts.markAsReadAllTalkMessages }}</FormLink>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts.pushNotification }}</template>
-		<MkPushNotificationAllowButton ref="allowButton" />
-		<FormSwitch class="_formBlock" :disabled="!pushRegistrationInServer" :model-value="sendReadMessage" @update:model-value="onChangeSendReadMessage">
-			<template #label>{{ i18n.ts.sendPushNotificationReadMessage }}</template>
-			<template #caption>
-				<I18n :src="i18n.ts.sendPushNotificationReadMessageCaption">
-					<template #emptyPushNotificationMessage>{{ i18n.ts._notification.emptyPushNotificationMessage }}</template>
-				</I18n>
-			</template>
-		</FormSwitch>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { notificationTypes } from 'misskey-js';
-import FormButton from '@/components/MkButton.vue';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
-
-let allowButton = $ref<InstanceType<typeof MkPushNotificationAllowButton>>();
-let pushRegistrationInServer = $computed(() => allowButton?.pushRegistrationInServer);
-let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage || false);
-
-async function readAllUnreadNotes() {
-	await os.api('i/read-all-unread-notes');
-}
-
-async function readAllMessagingMessages() {
-	await os.api('i/read-all-messaging-messages');
-}
-
-async function readAllNotifications() {
-	await os.api('notifications/mark-all-as-read');
-}
-
-function configure() {
-	const includingTypes = notificationTypes.filter(x => !$i!.mutingNotificationTypes.includes(x));
-	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
-		includingTypes,
-		showGlobalToggle: false,
-	}, {
-		done: async (res) => {
-			const { includingTypes: value } = res;
-			await os.apiWithDialog('i/update', {
-				mutingNotificationTypes: notificationTypes.filter(x => !value.includes(x)),
-			}).then(i => {
-				$i!.mutingNotificationTypes = i.mutingNotificationTypes;
-			});
-		},
-	}, 'closed');
-}
-
-function onChangeSendReadMessage(v: boolean) {
-	if (!pushRegistrationInServer) return;
-
-	os.apiWithDialog('sw/update-registration', {
-		endpoint: pushRegistrationInServer.endpoint,
-		sendReadMessage: v,
-	}).then(res => {
-		if (!allowButton)	return;
-		allowButton.pushRegistrationInServer = res;
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.notifications,
-	icon: 'ti ti-bell',
-});
-</script>
diff --git a/packages/client/src/pages/settings/other.vue b/packages/client/src/pages/settings/other.vue
deleted file mode 100644
index 40bb202789..0000000000
--- a/packages/client/src/pages/settings/other.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormSwitch v-model="$i.injectFeaturedNote" class="_formBlock" @update:model-value="onChangeInjectFeaturedNote">
-		{{ i18n.ts.showFeaturedNotesInTimeline }}
-	</FormSwitch>
-
-	<!--
-	<FormSwitch v-model="reportError" class="_formBlock">{{ i18n.ts.sendErrorReports }}<template #caption>{{ i18n.ts.sendErrorReportsDescription }}</template></FormSwitch>
-	-->
-
-	<FormLink to="/settings/account-info" class="_formBlock">{{ i18n.ts.accountInfo }}</FormLink>
-
-	<FormLink to="/registry" class="_formBlock"><template #icon><i class="ti ti-adjustments"></i></template>{{ i18n.ts.registry }}</FormLink>
-
-	<FormLink to="/settings/delete-account" class="_formBlock"><template #icon><i class="ti ti-alert-triangle"></i></template>{{ i18n.ts.closeAccount }}</FormLink>
-</div>
-</template>
-
-<script lang="ts" setup>
-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 { $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,
-	}).then((i) => {
-		$i!.injectFeaturedNote = i.injectFeaturedNote;
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.other,
-	icon: 'ti ti-dots',
-});
-</script>
diff --git a/packages/client/src/pages/settings/plugin.install.vue b/packages/client/src/pages/settings/plugin.install.vue
deleted file mode 100644
index 550bba242e..0000000000
--- a/packages/client/src/pages/settings/plugin.install.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormInfo warn class="_formBlock">{{ i18n.ts._plugin.installWarn }}</FormInfo>
-
-	<FormTextarea v-model="code" tall class="_formBlock">
-		<template #label>{{ i18n.ts.code }}</template>
-	</FormTextarea>
-
-	<div class="_formBlock">
-		<FormButton :disabled="code == null" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</FormButton>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, nextTick, ref } from 'vue';
-import { AiScript, parse } from '@syuilo/aiscript';
-import { serialize } from '@syuilo/aiscript/built/serializer';
-import { v4 as uuid } from 'uuid';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormInfo from '@/components/MkInfo.vue';
-import * as os from '@/os';
-import { ColdDeviceStorage } from '@/store';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const code = ref(null);
-
-function installPlugin({ id, meta, ast, token }) {
-	ColdDeviceStorage.set('plugins', ColdDeviceStorage.get('plugins').concat({
-		...meta,
-		id,
-		active: true,
-		configData: {},
-		token: token,
-		ast: ast,
-	}));
-}
-
-async function install() {
-	let ast;
-	try {
-		ast = parse(code.value);
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			text: 'Syntax error :(',
-		});
-		return;
-	}
-
-	const meta = AiScript.collectMetadata(ast);
-	if (meta == null) {
-		os.alert({
-			type: 'error',
-			text: 'No metadata found :(',
-		});
-		return;
-	}
-
-	const metadata = meta.get(null);
-	if (metadata == null) {
-		os.alert({
-			type: 'error',
-			text: 'No metadata found :(',
-		});
-		return;
-	}
-
-	const { name, version, author, description, permissions, config } = metadata;
-	if (name == null || version == null || author == null) {
-		os.alert({
-			type: 'error',
-			text: 'Required property not found :(',
-		});
-		return;
-	}
-
-	const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => {
-		os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {
-			title: i18n.ts.tokenRequested,
-			information: i18n.ts.pluginTokenRequestedDescription,
-			initialName: name,
-			initialPermissions: permissions,
-		}, {
-			done: async result => {
-				const { name, permissions } = result;
-				const { token } = await os.api('miauth/gen-token', {
-					session: null,
-					name: name,
-					permission: permissions,
-				});
-				res(token);
-			},
-		}, 'closed');
-	});
-
-	installPlugin({
-		id: uuid(),
-		meta: {
-			name, version, author, description, permissions, config,
-		},
-		token,
-		ast: serialize(ast),
-	});
-
-	os.success();
-
-	nextTick(() => {
-		unisonReload();
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts._plugin.install,
-	icon: 'ti ti-download',
-});
-</script>
diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue
deleted file mode 100644
index 905efd833d..0000000000
--- a/packages/client/src/pages/settings/plugin.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormLink to="/settings/plugin/install"><template #icon><i class="ti ti-download"></i></template>{{ i18n.ts._plugin.install }}</FormLink>
-
-	<FormSection>
-		<template #label>{{ i18n.ts.manage }}</template>
-		<div v-for="plugin in plugins" :key="plugin.id" class="_formBlock _panel" style="padding: 20px;">
-			<span style="display: flex;"><b>{{ plugin.name }}</b><span style="margin-left: auto;">v{{ plugin.version }}</span></span>
-
-			<FormSwitch class="_formBlock" :model-value="plugin.active" @update:model-value="changeActive(plugin, $event)">{{ i18n.ts.makeActive }}</FormSwitch>
-
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.author }}</template>
-				<template #value>{{ plugin.author }}</template>
-			</MkKeyValue>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.description }}</template>
-				<template #value>{{ plugin.description }}</template>
-			</MkKeyValue>
-			<MkKeyValue class="_formBlock">
-				<template #key>{{ i18n.ts.permission }}</template>
-				<template #value>{{ plugin.permission }}</template>
-			</MkKeyValue>
-
-			<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-				<MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="ti ti-settings"></i> {{ i18n.ts.settings }}</MkButton>
-				<MkButton inline danger @click="uninstall(plugin)"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</MkButton>
-			</div>
-		</div>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, ref } from 'vue';
-import FormLink from '@/components/form/link.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import * as os from '@/os';
-import { ColdDeviceStorage } from '@/store';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const plugins = ref(ColdDeviceStorage.get('plugins'));
-
-function uninstall(plugin) {
-	ColdDeviceStorage.set('plugins', plugins.value.filter(x => x.id !== plugin.id));
-	os.success();
-	nextTick(() => {
-		unisonReload();
-	});
-}
-
-// TODO: この処理をstore側にactionとして移動し、設定画面を開くAiScriptAPIを実装できるようにする
-async function config(plugin) {
-	const config = plugin.config;
-	for (const key in plugin.configData) {
-		config[key].default = plugin.configData[key];
-	}
-
-	const { canceled, result } = await os.form(plugin.name, config);
-	if (canceled) return;
-
-	const coldPlugins = ColdDeviceStorage.get('plugins');
-	coldPlugins.find(p => p.id === plugin.id)!.configData = result;
-	ColdDeviceStorage.set('plugins', coldPlugins);
-
-	nextTick(() => {
-		location.reload();
-	});
-}
-
-function changeActive(plugin, active) {
-	const coldPlugins = ColdDeviceStorage.get('plugins');
-	coldPlugins.find(p => p.id === plugin.id)!.active = active;
-	ColdDeviceStorage.set('plugins', coldPlugins);
-
-	nextTick(() => {
-		location.reload();
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.plugins,
-	icon: 'ti ti-plug',
-});
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/client/src/pages/settings/preferences-backups.vue b/packages/client/src/pages/settings/preferences-backups.vue
deleted file mode 100644
index f427a170c4..0000000000
--- a/packages/client/src/pages/settings/preferences-backups.vue
+++ /dev/null
@@ -1,444 +0,0 @@
-<template>
-<div class="_formRoot">
-	<div :class="$style.buttons">
-		<MkButton inline primary @click="saveNew">{{ ts._preferencesBackups.saveNew }}</MkButton>
-		<MkButton inline @click="loadFile">{{ ts._preferencesBackups.loadFile }}</MkButton>
-	</div>
-
-	<FormSection>
-		<template #label>{{ ts._preferencesBackups.list }}</template>
-		<template v-if="profiles && Object.keys(profiles).length > 0">
-			<div
-				v-for="(profile, id) in profiles"
-				:key="id"
-				class="_formBlock _panel"
-				:class="$style.profile"
-				@click="$event => menu($event, id)"
-				@contextmenu.prevent.stop="$event => menu($event, id)"
-			>
-				<div :class="$style.profileName">{{ profile.name }}</div>
-				<div :class="$style.profileTime">{{ t('_preferencesBackups.createdAt', { date: (new Date(profile.createdAt)).toLocaleDateString(), time: (new Date(profile.createdAt)).toLocaleTimeString() }) }}</div>
-				<div v-if="profile.updatedAt" :class="$style.profileTime">{{ t('_preferencesBackups.updatedAt', { date: (new Date(profile.updatedAt)).toLocaleDateString(), time: (new Date(profile.updatedAt)).toLocaleTimeString() }) }}</div>
-			</div>
-		</template>
-		<div v-else-if="profiles">
-			<MkInfo>{{ ts._preferencesBackups.noBackups }}</MkInfo>
-		</div>
-		<MkLoading v-else/>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, onMounted, onUnmounted, useCssModule } from 'vue';
-import { v4 as uuid } from 'uuid';
-import FormSection from '@/components/form/section.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import * as os from '@/os';
-import { ColdDeviceStorage, defaultStore } from '@/store';
-import { unisonReload } from '@/scripts/unison-reload';
-import { stream } from '@/stream';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { version, host } from '@/config';
-import { definePageMetadata } from '@/scripts/page-metadata';
-const { t, ts } = i18n;
-
-useCssModule();
-
-const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
-	'menu',
-	'visibility',
-	'localOnly',
-	'statusbars',
-	'widgets',
-	'tl',
-	'overridedDeviceKind',
-	'serverDisconnectedBehavior',
-	'nsfw',
-	'animation',
-	'animatedMfm',
-	'loadRawImages',
-	'imageNewTab',
-	'disableShowingAnimatedImages',
-	'disablePagesScript',
-	'emojiStyle',
-	'disableDrawer',
-	'useBlurEffectForModal',
-	'useBlurEffect',
-	'showFixedPostForm',
-	'enableInfiniteScroll',
-	'useReactionPickerForContextMenu',
-	'showGapBetweenNotesInTimeline',
-	'instanceTicker',
-	'reactionPickerSize',
-	'reactionPickerWidth',
-	'reactionPickerHeight',
-	'reactionPickerUseDrawerForMobile',
-	'defaultSideView',
-	'menuDisplay',
-	'reportError',
-	'squareAvatars',
-	'numberOfPageCache',
-	'aiChanMode',
-];
-const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [
-	'lightTheme',
-	'darkTheme',
-	'syncDeviceDarkMode',
-	'plugins',
-	'mediaVolume',
-	'sound_masterVolume',
-	'sound_note',
-	'sound_noteMy',
-	'sound_notification',
-	'sound_chat',
-	'sound_chatBg',
-	'sound_antenna',
-	'sound_channel',
-];
-
-const scope = ['clientPreferencesProfiles'];
-
-const profileProps = ['name', 'createdAt', 'updatedAt', 'misskeyVersion', 'settings'];
-
-type Profile = {
-	name: string;
-	createdAt: string;
-	updatedAt: string | null;
-	misskeyVersion: string;
-	host: string;
-	settings: {
-		hot: Record<keyof typeof defaultStoreSaveKeys, unknown>;
-		cold: Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
-		fontSize: string | null;
-		useSystemFont: 't' | null;
-		wallpaper: string | null;
-	};
-};
-
-const connection = $i && stream.useChannel('main');
-
-let profiles = $ref<Record<string, Profile> | null>(null);
-
-os.api('i/registry/get-all', { scope })
-	.then(res => {
-		profiles = res || {};
-	});
-
-function isObject(value: unknown): value is Record<string, unknown> {
-	return value != null && typeof value === 'object' && !Array.isArray(value);
-}
-
-function validate(profile: unknown): void {
-	if (!isObject(profile)) throw new Error('not an object');
-
-	// Check if unnecessary properties exist
-	if (Object.keys(profile).some(key => !profileProps.includes(key))) throw new Error('Unnecessary properties exist');
-
-	if (!profile.name) throw new Error('Missing required prop: name');
-	if (!profile.misskeyVersion) throw new Error('Missing required prop: misskeyVersion');
-	
-	// Check if createdAt and updatedAt is Date
-	// https://zenn.dev/lollipop_onl/articles/eoz-judge-js-invalid-date
-	if (!profile.createdAt || Number.isNaN(new Date(profile.createdAt).getTime())) throw new Error('createdAt is falsy or not Date');
-	if (profile.updatedAt) {
-		if (Number.isNaN(new Date(profile.updatedAt).getTime())) {
-			throw new Error('updatedAt is not Date');
-		}
-	} else if (profile.updatedAt !== null) {
-		throw new Error('updatedAt is not null');
-	}
-
-	if (!profile.settings) throw new Error('Missing required prop: settings');
-	if (!isObject(profile.settings)) throw new Error('Invalid prop: settings');
-}
-
-function getSettings(): Profile['settings'] {
-	const hot = {} as Record<keyof typeof defaultStoreSaveKeys, unknown>;
-	for (const key of defaultStoreSaveKeys) {
-		hot[key] = defaultStore.state[key];
-	}
-
-	const cold = {} as Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
-	for (const key of coldDeviceStorageSaveKeys) {
-		cold[key] = ColdDeviceStorage.get(key);
-	}
-
-	return {
-		hot,
-		cold,
-		fontSize: localStorage.getItem('fontSize'),
-		useSystemFont: localStorage.getItem('useSystemFont') as 't' | null,
-		wallpaper: localStorage.getItem('wallpaper'),
-	};
-}
-
-async function saveNew(): Promise<void> {
-	if (!profiles) return;
-
-	const { canceled, result: name } = await os.inputText({
-		title: ts._preferencesBackups.inputName,
-	});
-	if (canceled) return;
-
-	if (Object.values(profiles).some(x => x.name === name)) {
-		return os.alert({
-			title: ts._preferencesBackups.cannotSave,
-			text: t('_preferencesBackups.nameAlreadyExists', { name }),
-		});
-	}
-
-	const id = uuid();
-	const profile: Profile = {
-		name,
-		createdAt: (new Date()).toISOString(),
-		updatedAt: null,
-		misskeyVersion: version,
-		host,
-		settings: getSettings(),
-	};
-	await os.apiWithDialog('i/registry/set', { scope, key: id, value: profile });
-}
-
-function loadFile(): void {
-	const input = document.createElement('input');
-	input.type = 'file';
-	input.multiple = false;
-	input.onchange = async () => {
-		if (!profiles) return;
-		if (!input.files || input.files.length === 0) return;
-
-		const file = input.files[0];
-
-		if (file.type !== 'application/json') {
-			return os.alert({
-				type: 'error',
-				title: ts._preferencesBackups.cannotLoad,
-				text: ts._preferencesBackups.invalidFile,
-			});
-		}
-
-		let profile: Profile;
-		try {
-			profile = JSON.parse(await file.text()) as unknown as Profile;
-			validate(profile);
-		} catch (err) {
-			return os.alert({
-				type: 'error',
-				title: ts._preferencesBackups.cannotLoad,
-				text: err?.message,
-			});
-		}
-
-		const id = uuid();
-		await os.apiWithDialog('i/registry/set', { scope, key: id, value: profile });
-
-		// 一応廃棄
-		(window as any).__misskey_input_ref__ = null;
-	};
-
-	// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
-	// iOS Safari で正常に動かす為のおまじない
-	(window as any).__misskey_input_ref__ = input;
-
-	input.click();
-}
-
-async function applyProfile(id: string): Promise<void> {
-	if (!profiles) return;
-
-	const profile = profiles[id];
-
-	const { canceled: cancel1 } = await os.confirm({
-		type: 'warning',
-		title: ts._preferencesBackups.apply,
-		text: t('_preferencesBackups.applyConfirm', { name: profile.name }),
-	});
-	if (cancel1) return;
-
-	// TODO: バージョン or ホストが違ったらさらに警告を表示
-
-	const settings = profile.settings;
-
-	// defaultStore
-	for (const key of defaultStoreSaveKeys) {
-		if (settings.hot[key] !== undefined) {
-			defaultStore.set(key, settings.hot[key]);
-		}
-	}
-	
-	// coldDeviceStorage
-	for (const key of coldDeviceStorageSaveKeys) {
-		if (settings.cold[key] !== undefined) {
-			ColdDeviceStorage.set(key, settings.cold[key]);
-		}
-	}
-
-	// fontSize
-	if (settings.fontSize) {
-		localStorage.setItem('fontSize', settings.fontSize);
-	} else {
-		localStorage.removeItem('fontSize');
-	}
-
-	// useSystemFont
-	if (settings.useSystemFont) {
-		localStorage.setItem('useSystemFont', settings.useSystemFont);
-	} else {
-		localStorage.removeItem('useSystemFont');
-	}
-
-	// wallpaper
-	if (settings.wallpaper != null) {
-		localStorage.setItem('wallpaper', settings.wallpaper);
-	} else {
-		localStorage.removeItem('wallpaper');
-	}
-
-	const { canceled: cancel2 } = await os.confirm({
-		type: 'info',
-		text: ts.reloadToApplySetting,
-	});
-	if (cancel2) return;
-
-	unisonReload();
-}
-
-async function deleteProfile(id: string): Promise<void> {
-	if (!profiles) return;
-
-	const { canceled } = await os.confirm({
-		type: 'info',
-		title: ts.delete,
-		text: t('deleteAreYouSure', { x: profiles[id].name }),
-	});
-	if (canceled) return;
-
-	await os.apiWithDialog('i/registry/remove', { scope, key: id });
-	delete profiles[id];
-}
-
-async function save(id: string): Promise<void> {
-	if (!profiles) return;
-
-	const { name, createdAt } = profiles[id];
-
-	const { canceled } = await os.confirm({
-		type: 'info',
-		title: ts._preferencesBackups.save,
-		text: t('_preferencesBackups.saveConfirm', { name }),
-	});
-	if (canceled) return;
-
-	const profile: Profile = {
-		name,
-		createdAt,
-		updatedAt: (new Date()).toISOString(),
-		misskeyVersion: version,
-		host,
-		settings: getSettings(),
-	};
-	await os.apiWithDialog('i/registry/set', { scope, key: id, value: profile });
-}
-
-async function rename(id: string): Promise<void> {
-	if (!profiles) return;
-
-	const { canceled: cancel1, result: name } = await os.inputText({
-		title: ts._preferencesBackups.inputName,
-	});
-	if (cancel1 || profiles[id].name === name) return;
-
-	if (Object.values(profiles).some(x => x.name === name)) {
-		return os.alert({
-			title: ts._preferencesBackups.cannotSave,
-			text: t('_preferencesBackups.nameAlreadyExists', { name }),
-		});
-	}
-
-	const registry = Object.assign({}, { ...profiles[id] });
-
-	const { canceled: cancel2 } = await os.confirm({
-		type: 'info',
-		title: ts._preferencesBackups.rename,
-		text: t('_preferencesBackups.renameConfirm', { old: registry.name, new: name }),
-	});
-	if (cancel2) return;
-
-	registry.name = name;
-	await os.apiWithDialog('i/registry/set', { scope, key: id, value: registry });
-}
-
-function menu(ev: MouseEvent, profileId: string) {
-	if (!profiles) return;
-
-	return os.popupMenu([{
-		text: ts._preferencesBackups.apply,
-		icon: 'ti ti-check',
-		action: () => applyProfile(profileId),
-	}, {
-		type: 'a',
-		text: ts.download,
-		icon: 'ti ti-download',
-		href: URL.createObjectURL(new Blob([JSON.stringify(profiles[profileId], null, 2)], { type: 'application/json' })),
-		download: `${profiles[profileId].name}.json`,
-	}, null, {
-		text: ts.rename,
-		icon: 'ti ti-forms',
-		action: () => rename(profileId),
-	}, {
-		text: ts._preferencesBackups.save,
-		icon: 'ti ti-device-floppy',
-		action: () => save(profileId),
-	}, null, {
-		text: ts._preferencesBackups.delete,
-		icon: 'ti ti-trash',
-		action: () => deleteProfile(profileId),
-		danger: true,
-	}], ev.currentTarget ?? ev.target);
-}
-
-onMounted(() => {
-	// streamingのuser storage updateイベントを監視して更新
-	connection?.on('registryUpdated', ({ scope: recievedScope, key, value }) => {
-		if (!recievedScope || recievedScope.length !== scope.length || recievedScope[0] !== scope[0]) return;
-		if (!profiles) return;
-
-		profiles[key] = value;
-	});
-});
-
-onUnmounted(() => {
-	connection?.off('registryUpdated');
-});
-
-definePageMetadata(computed(() => ({
-	title: ts.preferencesBackups,
-	icon: 'ti ti-device-floppy',
-	bg: 'var(--bg)',
-})));
-</script>
-
-<style lang="scss" module>
-.buttons {
-	display: flex;
-	gap: var(--margin);
-	flex-wrap: wrap;
-}
-
-.profile {
-	padding: 20px;
-	cursor: pointer;
-
-	&Name {
-		font-weight: 700;
-	}
-
-	&Time {
-		font-size: .85em;
-		opacity: .7;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/settings/privacy.vue b/packages/client/src/pages/settings/privacy.vue
deleted file mode 100644
index 915ca05767..0000000000
--- a/packages/client/src/pages/settings/privacy.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormSwitch v-model="isLocked" class="_formBlock" @update:model-value="save()">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></FormSwitch>
-	<FormSwitch v-if="isLocked" v-model="autoAcceptFollowed" class="_formBlock" @update:model-value="save()">{{ i18n.ts.autoAcceptFollowed }}</FormSwitch>
-
-	<FormSwitch v-model="publicReactions" class="_formBlock" @update:model-value="save()">
-		{{ i18n.ts.makeReactionsPublic }}
-		<template #caption>{{ i18n.ts.makeReactionsPublicDescription }}</template>
-	</FormSwitch>
-		
-	<FormSelect v-model="ffVisibility" class="_formBlock" @update:model-value="save()">
-		<template #label>{{ i18n.ts.ffVisibility }}</template>
-		<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
-		<option value="followers">{{ i18n.ts._ffVisibility.followers }}</option>
-		<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
-		<template #caption>{{ i18n.ts.ffVisibilityDescription }}</template>
-	</FormSelect>
-		
-	<FormSwitch v-model="hideOnlineStatus" class="_formBlock" @update:model-value="save()">
-		{{ i18n.ts.hideOnlineStatus }}
-		<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template>
-	</FormSwitch>
-	<FormSwitch v-model="noCrawle" class="_formBlock" @update:model-value="save()">
-		{{ i18n.ts.noCrawle }}
-		<template #caption>{{ i18n.ts.noCrawleDescription }}</template>
-	</FormSwitch>
-	<FormSwitch v-model="isExplorable" class="_formBlock" @update:model-value="save()">
-		{{ i18n.ts.makeExplorable }}
-		<template #caption>{{ i18n.ts.makeExplorableDescription }}</template>
-	</FormSwitch>
-
-	<FormSection>
-		<FormSwitch v-model="rememberNoteVisibility" class="_formBlock" @update:model-value="save()">{{ i18n.ts.rememberNoteVisibility }}</FormSwitch>
-		<FormFolder v-if="!rememberNoteVisibility" class="_formBlock">
-			<template #label>{{ i18n.ts.defaultNoteVisibility }}</template>
-			<template v-if="defaultNoteVisibility === 'public'" #suffix>{{ i18n.ts._visibility.public }}</template>
-			<template v-else-if="defaultNoteVisibility === 'home'" #suffix>{{ i18n.ts._visibility.home }}</template>
-			<template v-else-if="defaultNoteVisibility === 'followers'" #suffix>{{ i18n.ts._visibility.followers }}</template>
-			<template v-else-if="defaultNoteVisibility === 'specified'" #suffix>{{ i18n.ts._visibility.specified }}</template>
-
-			<FormSelect v-model="defaultNoteVisibility" class="_formBlock">
-				<option value="public">{{ i18n.ts._visibility.public }}</option>
-				<option value="home">{{ i18n.ts._visibility.home }}</option>
-				<option value="followers">{{ i18n.ts._visibility.followers }}</option>
-				<option value="specified">{{ i18n.ts._visibility.specified }}</option>
-			</FormSelect>
-			<FormSwitch v-model="defaultNoteLocalOnly" class="_formBlock">{{ i18n.ts._visibility.localOnly }}</FormSwitch>
-		</FormFolder>
-	</FormSection>
-
-	<FormSwitch v-model="keepCw" class="_formBlock" @update:model-value="save()">{{ i18n.ts.keepCw }}</FormSwitch>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormSection from '@/components/form/section.vue';
-import FormFolder from '@/components/form/folder.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let isLocked = $ref($i.isLocked);
-let autoAcceptFollowed = $ref($i.autoAcceptFollowed);
-let noCrawle = $ref($i.noCrawle);
-let isExplorable = $ref($i.isExplorable);
-let hideOnlineStatus = $ref($i.hideOnlineStatus);
-let publicReactions = $ref($i.publicReactions);
-let ffVisibility = $ref($i.ffVisibility);
-
-let defaultNoteVisibility = $computed(defaultStore.makeGetterSetter('defaultNoteVisibility'));
-let defaultNoteLocalOnly = $computed(defaultStore.makeGetterSetter('defaultNoteLocalOnly'));
-let rememberNoteVisibility = $computed(defaultStore.makeGetterSetter('rememberNoteVisibility'));
-let keepCw = $computed(defaultStore.makeGetterSetter('keepCw'));
-
-function save() {
-	os.api('i/update', {
-		isLocked: !!isLocked,
-		autoAcceptFollowed: !!autoAcceptFollowed,
-		noCrawle: !!noCrawle,
-		isExplorable: !!isExplorable,
-		hideOnlineStatus: !!hideOnlineStatus,
-		publicReactions: !!publicReactions,
-		ffVisibility: ffVisibility,
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.privacy,
-	icon: 'ti ti-lock-open',
-});
-</script>
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
deleted file mode 100644
index 14eeeaaa11..0000000000
--- a/packages/client/src/pages/settings/profile.vue
+++ /dev/null
@@ -1,220 +0,0 @@
-<template>
-<div class="_formRoot">
-	<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
-		<div class="avatar">
-			<MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/>
-			<MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
-		</div>
-		<MkButton primary rounded class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
-	</div>
-
-	<FormInput v-model="profile.name" :max="30" manual-save class="_formBlock">
-		<template #label>{{ i18n.ts._profile.name }}</template>
-	</FormInput>
-
-	<FormTextarea v-model="profile.description" :max="500" tall manual-save class="_formBlock">
-		<template #label>{{ i18n.ts._profile.description }}</template>
-		<template #caption>{{ i18n.ts._profile.youCanIncludeHashtags }}</template>
-	</FormTextarea>
-
-	<FormInput v-model="profile.location" manual-save class="_formBlock">
-		<template #label>{{ i18n.ts.location }}</template>
-		<template #prefix><i class="ti ti-map-pin"></i></template>
-	</FormInput>
-
-	<FormInput v-model="profile.birthday" type="date" manual-save class="_formBlock">
-		<template #label>{{ i18n.ts.birthday }}</template>
-		<template #prefix><i class="ti ti-cake"></i></template>
-	</FormInput>
-
-	<FormSelect v-model="profile.lang" class="_formBlock">
-		<template #label>{{ i18n.ts.language }}</template>
-		<option v-for="x in Object.keys(langmap)" :key="x" :value="x">{{ langmap[x].nativeName }}</option>
-	</FormSelect>
-
-	<FormSlot class="_formBlock">
-		<FormFolder>
-			<template #icon><i class="ti ti-list"></i></template>
-			<template #label>{{ i18n.ts._profile.metadataEdit }}</template>
-
-			<div class="_formRoot">
-				<FormSplit v-for="(record, i) in fields" :min-width="250" class="_formBlock">
-					<FormInput v-model="record.name" small>
-						<template #label>{{ i18n.ts._profile.metadataLabel }} #{{ i + 1 }}</template>
-					</FormInput>
-					<FormInput v-model="record.value" small>
-						<template #label>{{ i18n.ts._profile.metadataContent }} #{{ i + 1 }}</template>
-					</FormInput>
-				</FormSplit>
-				<MkButton :disabled="fields.length >= 16" inline style="margin-right: 8px;" @click="addField"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
-				<MkButton inline primary @click="saveFields"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
-			</div>
-		</FormFolder>
-		<template #caption>{{ i18n.ts._profile.metadataDescription }}</template>
-	</FormSlot>
-
-	<FormFolder>
-		<template #label>{{ i18n.ts.advancedSettings }}</template>
-
-		<div class="_formRoot">
-			<FormSwitch v-model="profile.isCat" class="_formBlock">{{ i18n.ts.flagAsCat }}<template #caption>{{ i18n.ts.flagAsCatDescription }}</template></FormSwitch>
-			<FormSwitch v-model="profile.isBot" class="_formBlock">{{ i18n.ts.flagAsBot }}<template #caption>{{ i18n.ts.flagAsBotDescription }}</template></FormSwitch>
-		</div>
-	</FormFolder>
-
-	<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock">{{ i18n.ts.flagShowTimelineReplies }}<template #caption>{{ i18n.ts.flagShowTimelineRepliesDescription }} {{ i18n.ts.reflectMayTakeTime }}</template></FormSwitch>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { reactive, watch } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import FormInput from '@/components/form/input.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormFolder from '@/components/form/folder.vue';
-import FormSlot from '@/components/form/slot.vue';
-import { host } from '@/config';
-import { selectFile } from '@/scripts/select-file';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { langmap } from '@/scripts/langmap';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const profile = reactive({
-	name: $i.name,
-	description: $i.description,
-	location: $i.location,
-	birthday: $i.birthday,
-	lang: $i.lang,
-	isBot: $i.isBot,
-	isCat: $i.isCat,
-	showTimelineReplies: $i.showTimelineReplies,
-});
-
-watch(() => profile, () => {
-	save();
-}, {
-	deep: true,
-});
-
-const fields = reactive($i.fields.map(field => ({ name: field.name, value: field.value })));
-
-function addField() {
-	fields.push({
-		name: '',
-		value: '',
-	});
-}
-
-while (fields.length < 4) {
-	addField();
-}
-
-function saveFields() {
-	os.apiWithDialog('i/update', {
-		fields: fields.filter(field => field.name !== '' && field.value !== ''),
-	});
-}
-
-function save() {
-	os.apiWithDialog('i/update', {
-		name: profile.name || null,
-		description: profile.description || null,
-		location: profile.location || null,
-		birthday: profile.birthday || null,
-		lang: profile.lang || null,
-		isBot: !!profile.isBot,
-		isCat: !!profile.isCat,
-		showTimelineReplies: !!profile.showTimelineReplies,
-	});
-}
-
-function changeAvatar(ev) {
-	selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar).then(async (file) => {
-		let originalOrCropped = file;
-
-		const { canceled } = await os.confirm({
-			type: 'question',
-			text: i18n.t('cropImageAsk'),
-		});
-
-		if (!canceled) {
-			originalOrCropped = await os.cropImage(file, {
-				aspectRatio: 1,
-			});
-		}
-
-		const i = await os.apiWithDialog('i/update', {
-			avatarId: originalOrCropped.id,
-		});
-		$i.avatarId = i.avatarId;
-		$i.avatarUrl = i.avatarUrl;
-	});
-}
-
-function changeBanner(ev) {
-	selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner).then(async (file) => {
-		let originalOrCropped = file;
-
-		const { canceled } = await os.confirm({
-			type: 'question',
-			text: i18n.t('cropImageAsk'),
-		});
-
-		if (!canceled) {
-			originalOrCropped = await os.cropImage(file, {
-				aspectRatio: 2,
-			});
-		}
-
-		const i = await os.apiWithDialog('i/update', {
-			bannerId: originalOrCropped.id,
-		});
-		$i.bannerId = i.bannerId;
-		$i.bannerUrl = i.bannerUrl;
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.profile,
-	icon: 'ti ti-user',
-});
-</script>
-
-<style lang="scss" scoped>
-.llvierxe {
-	position: relative;
-	background-size: cover;
-	background-position: center;
-	border: solid 1px var(--divider);
-	border-radius: 10px;
-	overflow: clip;
-
-	> .avatar {
-		display: inline-block;
-		text-align: center;
-		padding: 16px;
-
-		> .avatar {
-			display: inline-block;
-			width: 72px;
-			height: 72px;
-			margin: 0 auto 16px auto;
-		}
-	}
-
-	> .bannerEdit {
-		position: absolute;
-		top: 16px;
-		right: 16px;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
deleted file mode 100644
index 2748cd7d4e..0000000000
--- a/packages/client/src/pages/settings/reaction.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FromSlot class="_formBlock">
-		<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
-		<div v-panel style="border-radius: 6px;">
-			<Sortable v-model="reactions" class="zoaiodol" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
-				<template #item="{element}">
-					<button class="_button item" @click="remove(element, $event)">
-						<MkEmoji :emoji="element" :normal="true"/>
-					</button>
-				</template>
-				<template #footer>
-					<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
-				</template>
-			</Sortable>
-		</div>
-		<template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template>
-	</FromSlot>
-
-	<FormRadios v-model="reactionPickerSize" class="_formBlock">
-		<template #label>{{ i18n.ts.size }}</template>
-		<option :value="1">{{ i18n.ts.small }}</option>
-		<option :value="2">{{ i18n.ts.medium }}</option>
-		<option :value="3">{{ i18n.ts.large }}</option>
-	</FormRadios>
-	<FormRadios v-model="reactionPickerWidth" class="_formBlock">
-		<template #label>{{ i18n.ts.numberOfColumn }}</template>
-		<option :value="1">5</option>
-		<option :value="2">6</option>
-		<option :value="3">7</option>
-		<option :value="4">8</option>
-		<option :value="5">9</option>
-	</FormRadios>
-	<FormRadios v-model="reactionPickerHeight" class="_formBlock">
-		<template #label>{{ i18n.ts.height }}</template>
-		<option :value="1">{{ i18n.ts.small }}</option>
-		<option :value="2">{{ i18n.ts.medium }}</option>
-		<option :value="3">{{ i18n.ts.large }}</option>
-		<option :value="4">{{ i18n.ts.large }}+</option>
-	</FormRadios>
-
-	<FormSwitch v-model="reactionPickerUseDrawerForMobile" class="_formBlock">
-		{{ i18n.ts.useDrawerReactionPickerForMobile }}
-		<template #caption>{{ i18n.ts.needReloadToApply }}</template>
-	</FormSwitch>
-
-	<FormSection>
-		<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-			<FormButton inline @click="preview"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</FormButton>
-			<FormButton inline danger @click="setDefault"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
-		</div>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, watch } from 'vue';
-import Sortable from 'vuedraggable';
-import FormInput from '@/components/form/input.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FromSlot from '@/components/form/slot.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { deepClone } from '@/scripts/clone';
-
-let reactions = $ref(deepClone(defaultStore.state.reactions));
-
-const reactionPickerSize = $computed(defaultStore.makeGetterSetter('reactionPickerSize'));
-const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPickerWidth'));
-const reactionPickerHeight = $computed(defaultStore.makeGetterSetter('reactionPickerHeight'));
-const reactionPickerUseDrawerForMobile = $computed(defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'));
-
-function save() {
-	defaultStore.set('reactions', reactions);
-}
-
-function remove(reaction, ev: MouseEvent) {
-	os.popupMenu([{
-		text: i18n.ts.remove,
-		action: () => {
-			reactions = reactions.filter(x => x !== reaction);
-		},
-	}], ev.currentTarget ?? ev.target);
-}
-
-function preview(ev: MouseEvent) {
-	os.popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
-		asReactionPicker: true,
-		src: ev.currentTarget ?? ev.target,
-	}, {}, 'closed');
-}
-
-async function setDefault() {
-	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.ts.resetAreYouSure,
-	});
-	if (canceled) return;
-
-	reactions = deepClone(defaultStore.def.reactions.default);
-}
-
-function chooseEmoji(ev: MouseEvent) {
-	os.pickEmoji(ev.currentTarget ?? ev.target, {
-		showPinned: false,
-	}).then(emoji => {
-		if (!reactions.includes(emoji)) {
-			reactions.push(emoji);
-		}
-	});
-}
-
-watch($$(reactions), () => {
-	save();
-}, {
-	deep: true,
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.reaction,
-	icon: 'ti ti-mood-happy',
-	action: {
-		icon: 'ti ti-eye',
-		handler: preview,
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.zoaiodol {
-	padding: 12px;
-	font-size: 1.1em;
-
-	> .item {
-		display: inline-block;
-		padding: 8px;
-		cursor: move;
-	}
-
-	> .add {
-		display: inline-block;
-		padding: 8px;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
deleted file mode 100644
index 33f49eb3ef..0000000000
--- a/packages/client/src/pages/settings/security.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormSection>
-		<template #label>{{ i18n.ts.password }}</template>
-		<FormButton primary @click="change()">{{ i18n.ts.changePassword }}</FormButton>
-	</FormSection>
-
-	<FormSection>
-		<template #label>{{ i18n.ts.twoStepAuthentication }}</template>
-		<X2fa/>
-	</FormSection>
-	
-	<FormSection>
-		<template #label>{{ i18n.ts.signinHistory }}</template>
-		<MkPagination :pagination="pagination" disable-auto-load>
-			<template #default="{items}">
-				<div>
-					<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
-						<header>
-							<i v-if="item.success" class="ti ti-check icon succ"></i>
-							<i v-else class="ti ti-circle-x icon fail"></i>
-							<code class="ip _monospace">{{ item.ip }}</code>
-							<MkTime :time="item.createdAt" class="time"/>
-						</header>
-					</div>
-				</div>
-			</template>
-		</MkPagination>
-	</FormSection>
-
-	<FormSection>
-		<FormSlot>
-			<FormButton danger @click="regenerateToken"><i class="ti ti-refresh"></i> {{ i18n.ts.regenerateLoginToken }}</FormButton>
-			<template #caption>{{ i18n.ts.regenerateLoginTokenDescription }}</template>
-		</FormSlot>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import X2fa from './2fa.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSlot from '@/components/form/slot.vue';
-import FormButton from '@/components/MkButton.vue';
-import MkPagination from '@/components/MkPagination.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const pagination = {
-	endpoint: 'i/signin-history' as const,
-	limit: 5,
-};
-
-async function change() {
-	const { canceled: canceled1, result: currentPassword } = await os.inputText({
-		title: i18n.ts.currentPassword,
-		type: 'password',
-	});
-	if (canceled1) return;
-
-	const { canceled: canceled2, result: newPassword } = await os.inputText({
-		title: i18n.ts.newPassword,
-		type: 'password',
-	});
-	if (canceled2) return;
-
-	const { canceled: canceled3, result: newPassword2 } = await os.inputText({
-		title: i18n.ts.newPasswordRetype,
-		type: 'password',
-	});
-	if (canceled3) return;
-
-	if (newPassword !== newPassword2) {
-		os.alert({
-			type: 'error',
-			text: i18n.ts.retypedNotMatch,
-		});
-		return;
-	}
-	
-	os.apiWithDialog('i/change-password', {
-		currentPassword,
-		newPassword,
-	});
-}
-
-function regenerateToken() {
-	os.inputText({
-		title: i18n.ts.password,
-		type: 'password',
-	}).then(({ canceled, result: password }) => {
-		if (canceled) return;
-		os.api('i/regenerate_token', {
-			password: password,
-		});
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.security,
-	icon: 'ti ti-lock',
-});
-</script>
-
-<style lang="scss" scoped>
-.timnmucd {
-	padding: 16px;
-
-	&:first-child {
-		border-top-left-radius: 6px;
-		border-top-right-radius: 6px;
-	}
-
-	&:last-child {
-		border-bottom-left-radius: 6px;
-		border-bottom-right-radius: 6px;
-	}
-
-	&:not(:last-child) {
-		border-bottom: solid 0.5px var(--divider);
-	}
-
-	> header {
-		display: flex;
-		align-items: center;
-
-		> .icon {
-			width: 1em;
-			margin-right: 0.75em;
-
-			&.succ {
-				color: var(--success);
-			}
-
-			&.fail {
-				color: var(--error);
-			}
-		}
-
-		> .ip {
-			flex: 1;
-			min-width: 0;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			margin-right: 12px;
-		}
-
-		> .time {
-			margin-left: auto;
-			opacity: 0.7;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/settings/sounds.sound.vue b/packages/client/src/pages/settings/sounds.sound.vue
deleted file mode 100644
index 62627c6333..0000000000
--- a/packages/client/src/pages/settings/sounds.sound.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormSelect v-model="type">
-		<template #label>{{ i18n.ts.sound }}</template>
-		<option v-for="x in soundsTypes" :key="x" :value="x">{{ x == null ? i18n.ts.none : x }}</option>
-	</FormSelect>
-	<FormRange v-model="volume" :min="0" :max="1" :step="0.05" :text-converter="(v) => `${Math.floor(v * 100)}%`" class="_formBlock">
-		<template #label>{{ i18n.ts.volume }}</template>
-	</FormRange>
-
-	<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton inline @click="listen"><i class="ti ti-player-play"></i> {{ i18n.ts.listen }}</FormButton>
-		<FormButton inline primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</FormButton>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import FormSelect from '@/components/form/select.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormRange from '@/components/form/range.vue';
-import { i18n } from '@/i18n';
-import { playFile, soundsTypes } from '@/scripts/sound';
-
-const props = defineProps<{
-	type: string;
-	volume: number;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'update', result: { type: string; volume: number; }): void;
-}>();
-
-let type = $ref(props.type);
-let volume = $ref(props.volume);
-
-function listen() {
-	playFile(type, volume);
-}
-
-function save() {
-	emit('update', { type, volume });
-}
-</script>
diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue
deleted file mode 100644
index ef60b2c3c9..0000000000
--- a/packages/client/src/pages/settings/sounds.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormRange v-model="masterVolume" :min="0" :max="1" :step="0.05" :text-converter="(v) => `${Math.floor(v * 100)}%`" class="_formBlock">
-		<template #label>{{ i18n.ts.masterVolume }}</template>
-	</FormRange>
-
-	<FormSection>
-		<template #label>{{ i18n.ts.sounds }}</template>
-		<FormFolder v-for="type in Object.keys(sounds)" :key="type" style="margin-bottom: 8px;">
-			<template #label>{{ $t('_sfx.' + type) }}</template>
-			<template #suffix>{{ sounds[type].type ?? i18n.ts.none }}</template>
-
-			<XSound :type="sounds[type].type" :volume="sounds[type].volume" @update="(res) => updated(type, res)"/>
-		</FormFolder>
-	</FormSection>
-
-	<FormButton danger class="_formBlock" @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-import XSound from './sounds.sound.vue';
-import FormRange from '@/components/form/range.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import FormFolder from '@/components/form/folder.vue';
-import * as os from '@/os';
-import { ColdDeviceStorage } from '@/store';
-import { playFile } from '@/scripts/sound';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const masterVolume = computed({
-	get: () => {
-		return ColdDeviceStorage.get('sound_masterVolume');
-	},
-	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'),
-});
-
-async function updated(type, sound) {
-	const v = {
-		type: sound.type,
-		volume: sound.volume,
-	};
-
-	ColdDeviceStorage.set('sound_' + type, v);
-	sounds.value[type] = v;
-}
-
-function reset() {
-	for (const sound of Object.keys(sounds.value)) {
-		const v = ColdDeviceStorage.default['sound_' + sound];
-		ColdDeviceStorage.set('sound_' + sound, v);
-		sounds.value[sound] = v;
-	}
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.sounds,
-	icon: 'ti ti-music',
-});
-</script>
diff --git a/packages/client/src/pages/settings/statusbar.statusbar.vue b/packages/client/src/pages/settings/statusbar.statusbar.vue
deleted file mode 100644
index 608222386e..0000000000
--- a/packages/client/src/pages/settings/statusbar.statusbar.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormSelect v-model="statusbar.type" placeholder="Please select" class="_formBlock">
-		<template #label>{{ i18n.ts.type }}</template>
-		<option value="rss">RSS</option>
-		<option value="federation">Federation</option>
-		<option value="userList">User list timeline</option>
-	</FormSelect>
-
-	<MkInput v-model="statusbar.name" manual-save class="_formBlock">
-		<template #label>{{ i18n.ts.label }}</template>
-	</MkInput>
-
-	<MkSwitch v-model="statusbar.black" class="_formBlock">
-		<template #label>Black</template>
-	</MkSwitch>
-
-	<FormRadios v-model="statusbar.size" class="_formBlock">
-		<template #label>{{ i18n.ts.size }}</template>
-		<option value="verySmall">{{ i18n.ts.small }}+</option>
-		<option value="small">{{ i18n.ts.small }}</option>
-		<option value="medium">{{ i18n.ts.medium }}</option>
-		<option value="large">{{ i18n.ts.large }}</option>
-		<option value="veryLarge">{{ i18n.ts.large }}+</option>
-	</FormRadios>
-
-	<template v-if="statusbar.type === 'rss'">
-		<MkInput v-model="statusbar.props.url" manual-save class="_formBlock" type="url">
-			<template #label>URL</template>
-		</MkInput>
-		<MkSwitch v-model="statusbar.props.shuffle" class="_formBlock">
-			<template #label>{{ i18n.ts.shuffle }}</template>
-		</MkSwitch>
-		<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
-			<template #label>{{ i18n.ts.refreshInterval }}</template>
-		</MkInput>
-		<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock">
-			<template #label>{{ i18n.ts.speed }}</template>
-			<template #caption>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template>
-		</FormRange>
-		<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
-			<template #label>{{ i18n.ts.reverse }}</template>
-		</MkSwitch>
-	</template>
-	<template v-else-if="statusbar.type === 'federation'">
-		<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
-			<template #label>{{ i18n.ts.refreshInterval }}</template>
-		</MkInput>
-		<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock">
-			<template #label>{{ i18n.ts.speed }}</template>
-			<template #caption>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template>
-		</FormRange>
-		<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
-			<template #label>{{ i18n.ts.reverse }}</template>
-		</MkSwitch>
-		<MkSwitch v-model="statusbar.props.colored" class="_formBlock">
-			<template #label>{{ i18n.ts.colored }}</template>
-		</MkSwitch>
-	</template>
-	<template v-else-if="statusbar.type === 'userList' && userLists != null">
-		<FormSelect v-model="statusbar.props.userListId" class="_formBlock">
-			<template #label>{{ i18n.ts.userList }}</template>
-			<option v-for="list in userLists" :value="list.id">{{ list.name }}</option>
-		</FormSelect>
-		<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
-			<template #label>{{ i18n.ts.refreshInterval }}</template>
-		</MkInput>
-		<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock">
-			<template #label>{{ i18n.ts.speed }}</template>
-			<template #caption>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template>
-		</FormRange>
-		<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
-			<template #label>{{ i18n.ts.reverse }}</template>
-		</MkSwitch>
-	</template>
-
-	<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton danger @click="del">{{ i18n.ts.remove }}</FormButton>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue';
-import FormSelect from '@/components/form/select.vue';
-import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormRange from '@/components/form/range.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { deepClone } from '@/scripts/clone';
-
-const props = defineProps<{
-	_id: string;
-	userLists: any[] | null;
-}>();
-
-const statusbar = reactive(deepClone(defaultStore.state.statusbars.find(x => x.id === props._id)));
-
-watch(() => statusbar.type, () => {
-	if (statusbar.type === 'rss') {
-		statusbar.name = 'NEWS';
-		statusbar.props.url = 'http://feeds.afpbb.com/rss/afpbb/afpbbnews';
-		statusbar.props.shuffle = true;
-		statusbar.props.refreshIntervalSec = 120;
-		statusbar.props.display = 'marquee';
-		statusbar.props.marqueeDuration = 100;
-		statusbar.props.marqueeReverse = false;
-	} else if (statusbar.type === 'federation') {
-		statusbar.name = 'FEDERATION';
-		statusbar.props.refreshIntervalSec = 120;
-		statusbar.props.display = 'marquee';
-		statusbar.props.marqueeDuration = 100;
-		statusbar.props.marqueeReverse = false;
-		statusbar.props.colored = false;
-	} else if (statusbar.type === 'userList') {
-		statusbar.name = 'LIST TL';
-		statusbar.props.refreshIntervalSec = 120;
-		statusbar.props.display = 'marquee';
-		statusbar.props.marqueeDuration = 100;
-		statusbar.props.marqueeReverse = false;
-	}
-});
-
-watch(statusbar, save);
-
-async function save() {
-	const i = defaultStore.state.statusbars.findIndex(x => x.id === props._id);
-	const statusbars = deepClone(defaultStore.state.statusbars);
-	statusbars[i] = deepClone(statusbar);
-	defaultStore.set('statusbars', statusbars);
-}
-
-function del() {
-	defaultStore.set('statusbars', defaultStore.state.statusbars.filter(x => x.id !== props._id));
-}
-</script>
diff --git a/packages/client/src/pages/settings/statusbar.vue b/packages/client/src/pages/settings/statusbar.vue
deleted file mode 100644
index 86c69fa2c3..0000000000
--- a/packages/client/src/pages/settings/statusbar.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormFolder v-for="x in statusbars" :key="x.id" class="_formBlock">
-		<template #label>{{ x.type ?? i18n.ts.notSet }}</template>
-		<template #suffix>{{ x.name }}</template>
-		<XStatusbar :_id="x.id" :user-lists="userLists"/>
-	</FormFolder>
-	<FormButton primary @click="add">{{ i18n.ts.add }}</FormButton>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XStatusbar from './statusbar.statusbar.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormFolder from '@/components/form/folder.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { unisonReload } from '@/scripts/unison-reload';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const statusbars = defaultStore.reactiveState.statusbars;
-
-let userLists = $ref();
-
-onMounted(() => {
-	os.api('users/lists/list').then(res => {
-		userLists = res;
-	});
-});
-
-async function add() {
-	defaultStore.push('statusbars', {
-		id: uuid(),
-		type: null,
-		black: false,
-		size: 'medium',
-		props: {},
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.statusbar,
-	icon: 'ti ti-list',
-	bg: 'var(--bg)',
-});
-</script>
diff --git a/packages/client/src/pages/settings/theme.install.vue b/packages/client/src/pages/settings/theme.install.vue
deleted file mode 100644
index 52a436e18d..0000000000
--- a/packages/client/src/pages/settings/theme.install.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormTextarea v-model="installThemeCode" class="_formBlock">
-		<template #label>{{ i18n.ts._theme.code }}</template>
-	</FormTextarea>
-
-	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</FormButton>
-		<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="ti ti-check"></i> {{ i18n.ts.install }}</FormButton>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import JSON5 from 'json5';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormButton from '@/components/MkButton.vue';
-import { applyTheme, validateTheme } from '@/scripts/theme';
-import * as os from '@/os';
-import { addTheme, getThemes } from '@/theme-store';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let installThemeCode = $ref(null);
-
-function parseThemeCode(code: string) {
-	let theme;
-
-	try {
-		theme = JSON5.parse(code);
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			text: i18n.ts._theme.invalid,
-		});
-		return false;
-	}
-	if (!validateTheme(theme)) {
-		os.alert({
-			type: 'error',
-			text: i18n.ts._theme.invalid,
-		});
-		return false;
-	}
-	if (getThemes().some(t => t.id === theme.id)) {
-		os.alert({
-			type: 'info',
-			text: i18n.ts._theme.alreadyInstalled,
-		});
-		return false;
-	}
-
-	return theme;
-}
-
-function preview(code: string): void {
-	const theme = parseThemeCode(code);
-	if (theme) applyTheme(theme, false);
-}
-
-async function install(code: string): Promise<void> {
-	const theme = parseThemeCode(code);
-	if (!theme) return;
-	await addTheme(theme);
-	os.alert({
-		type: 'success',
-		text: i18n.t('_theme.installed', { name: theme.name }),
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts._theme.install,
-	icon: 'ti ti-download',
-});
-</script>
diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue
deleted file mode 100644
index 409f0af650..0000000000
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormSelect v-model="selectedThemeId" class="_formBlock">
-		<template #label>{{ i18n.ts.theme }}</template>
-		<optgroup :label="i18n.ts._theme.installedThemes">
-			<option v-for="x in installedThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
-		</optgroup>
-		<optgroup :label="i18n.ts._theme.builtinThemes">
-			<option v-for="x in builtinThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
-		</optgroup>
-	</FormSelect>
-	<template v-if="selectedTheme">
-		<FormInput readonly :model-value="selectedTheme.author" class="_formBlock">
-			<template #label>{{ i18n.ts.author }}</template>
-		</FormInput>
-		<FormTextarea v-if="selectedTheme.desc" readonly :model-value="selectedTheme.desc" class="_formBlock">
-			<template #label>{{ i18n.ts._theme.description }}</template>
-		</FormTextarea>
-		<FormTextarea readonly tall :model-value="selectedThemeCode" class="_formBlock">
-			<template #label>{{ i18n.ts._theme.code }}</template>
-			<template #caption><button class="_textButton" @click="copyThemeCode()">{{ i18n.ts.copy }}</button></template>
-		</FormTextarea>
-		<FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" class="_formBlock" danger @click="uninstall()"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</FormButton>
-	</template>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-import JSON5 from 'json5';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/MkButton.vue';
-import { Theme, getBuiltinThemesRef } from '@/scripts/theme';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import * as os from '@/os';
-import { getThemes, removeTheme } from '@/theme-store';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const installedThemes = ref(getThemes());
-const builtinThemes = getBuiltinThemesRef();
-const selectedThemeId = ref(null);
-
-const themes = computed(() => [...installedThemes.value, ...builtinThemes.value]);
-
-const selectedTheme = computed(() => {
-	if (selectedThemeId.value == null) return null;
-	return themes.value.find(x => x.id === selectedThemeId.value);
-});
-
-const selectedThemeCode = computed(() => {
-	if (selectedTheme.value == null) return null;
-	return JSON5.stringify(selectedTheme.value, null, '\t');
-});
-
-function copyThemeCode() {
-	copyToClipboard(selectedThemeCode.value);
-	os.success();
-}
-
-function uninstall() {
-	removeTheme(selectedTheme.value as Theme);
-	installedThemes.value = installedThemes.value.filter(t => t.id !== selectedThemeId.value);
-	selectedThemeId.value = null;
-	os.success();
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts._theme.manage,
-	icon: 'ti ti-tool',
-});
-</script>
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
deleted file mode 100644
index f37c213b06..0000000000
--- a/packages/client/src/pages/settings/theme.vue
+++ /dev/null
@@ -1,409 +0,0 @@
-<template>
-<div class="_formRoot rsljpzjq">
-	<div v-adaptive-border class="rfqxtzch _panel _formBlock">
-		<div class="toggle">
-			<div class="toggleWrapper">
-				<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
-				<label for="dn" class="toggle">
-					<span class="before">{{ i18n.ts.light }}</span>
-					<span class="after">{{ i18n.ts.dark }}</span>
-					<span class="toggle__handler">
-						<span class="crater crater--1"></span>
-						<span class="crater crater--2"></span>
-						<span class="crater crater--3"></span>
-					</span>
-					<span class="star star--1"></span>
-					<span class="star star--2"></span>
-					<span class="star star--3"></span>
-					<span class="star star--4"></span>
-					<span class="star star--5"></span>
-					<span class="star star--6"></span>
-				</label>
-			</div>
-		</div>
-		<div class="sync">
-			<FormSwitch v-model="syncDeviceDarkMode">{{ i18n.ts.syncDeviceDarkMode }}</FormSwitch>
-		</div>
-	</div>
-
-	<div class="selects _formBlock">
-		<FormSelect v-model="lightThemeId" large class="select">
-			<template #label>{{ i18n.ts.themeForLightMode }}</template>
-			<template #prefix><i class="ti ti-sun"></i></template>
-			<option v-if="instanceLightTheme" :key="'instance:' + instanceLightTheme.id" :value="instanceLightTheme.id">{{ instanceLightTheme.name }}</option>
-			<optgroup v-if="installedLightThemes.length > 0" :label="i18n.ts._theme.installedThemes">
-				<option v-for="x in installedLightThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
-			</optgroup>
-			<optgroup :label="i18n.ts._theme.builtinThemes">
-				<option v-for="x in builtinLightThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
-			</optgroup>
-		</FormSelect>
-		<FormSelect v-model="darkThemeId" large class="select">
-			<template #label>{{ i18n.ts.themeForDarkMode }}</template>
-			<template #prefix><i class="ti ti-moon"></i></template>
-			<option v-if="instanceDarkTheme" :key="'instance:' + instanceDarkTheme.id" :value="instanceDarkTheme.id">{{ instanceDarkTheme.name }}</option>
-			<optgroup v-if="installedDarkThemes.length > 0" :label="i18n.ts._theme.installedThemes">
-				<option v-for="x in installedDarkThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
-			</optgroup>
-			<optgroup :label="i18n.ts._theme.builtinThemes">
-				<option v-for="x in builtinDarkThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
-			</optgroup>
-		</FormSelect>
-	</div>
-
-	<FormSection>
-		<div class="_formLinksGrid">
-			<FormLink to="/settings/theme/manage"><template #icon><i class="ti ti-tool"></i></template>{{ i18n.ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink>
-			<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="ti ti-world"></i></template>{{ i18n.ts._theme.explore }}</FormLink>
-			<FormLink to="/settings/theme/install"><template #icon><i class="ti ti-download"></i></template>{{ i18n.ts._theme.install }}</FormLink>
-			<FormLink to="/theme-editor"><template #icon><i class="ti ti-paint"></i></template>{{ i18n.ts._theme.make }}</FormLink>
-		</div>
-	</FormSection>
-
-	<FormButton v-if="wallpaper == null" class="_formBlock" @click="setWallpaper">{{ i18n.ts.setWallpaper }}</FormButton>
-	<FormButton v-else class="_formBlock" @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</FormButton>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, onActivated, ref, watch } from 'vue';
-import JSON5 from 'json5';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormSection from '@/components/form/section.vue';
-import FormLink from '@/components/form/link.vue';
-import FormButton from '@/components/MkButton.vue';
-import { getBuiltinThemesRef } from '@/scripts/theme';
-import { selectFile } from '@/scripts/select-file';
-import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
-import { ColdDeviceStorage, defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { uniqueBy } from '@/scripts/array';
-import { fetchThemes, getThemes } from '@/theme-store';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const installedThemes = ref(getThemes());
-const builtinThemes = getBuiltinThemesRef();
-
-const instanceDarkTheme = computed(() => instance.defaultDarkTheme ? JSON5.parse(instance.defaultDarkTheme) : null);
-const installedDarkThemes = computed(() => installedThemes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
-const builtinDarkThemes = computed(() => builtinThemes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
-const instanceLightTheme = computed(() => instance.defaultLightTheme ? JSON5.parse(instance.defaultLightTheme) : null);
-const installedLightThemes = computed(() => installedThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
-const builtinLightThemes = computed(() => builtinThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
-const themes = computed(() => uniqueBy([instanceDarkTheme.value, instanceLightTheme.value, ...builtinThemes.value, ...installedThemes.value].filter(x => x != null), theme => theme.id));
-
-const darkTheme = ColdDeviceStorage.ref('darkTheme');
-const darkThemeId = computed({
-	get() {
-		return darkTheme.value.id;
-	},
-	set(id) {
-		const t = themes.value.find(x => x.id === id);
-		if (t) { // テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
-			ColdDeviceStorage.set('darkTheme', t);
-		}
-	},
-});
-const lightTheme = ColdDeviceStorage.ref('lightTheme');
-const lightThemeId = computed({
-	get() {
-		return lightTheme.value.id;
-	},
-	set(id) {
-		const t = themes.value.find(x => x.id === id);
-		if (t) { // テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
-			ColdDeviceStorage.set('lightTheme', t);
-		}
-	},
-});
-const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
-const syncDeviceDarkMode = computed(ColdDeviceStorage.makeGetterSetter('syncDeviceDarkMode'));
-const wallpaper = ref(localStorage.getItem('wallpaper'));
-const themesCount = installedThemes.value.length;
-
-watch(syncDeviceDarkMode, () => {
-	if (syncDeviceDarkMode.value) {
-		defaultStore.set('darkMode', isDeviceDarkmode());
-	}
-});
-
-watch(wallpaper, () => {
-	if (wallpaper.value == null) {
-		localStorage.removeItem('wallpaper');
-	} else {
-		localStorage.setItem('wallpaper', wallpaper.value);
-	}
-	location.reload();
-});
-
-onActivated(() => {
-	fetchThemes().then(() => {
-		installedThemes.value = getThemes();
-	});
-});
-
-fetchThemes().then(() => {
-	installedThemes.value = getThemes();
-});
-
-function setWallpaper(event) {
-	selectFile(event.currentTarget ?? event.target, null).then(file => {
-		wallpaper.value = file.url;
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.theme,
-	icon: 'ti ti-palette',
-});
-</script>
-
-<style lang="scss" scoped>
-.rfqxtzch {
-	border-radius: 6px;
-
-	> .toggle {
-		position: relative;
-		padding: 26px 0;
-		text-align: center;
-
-		&.disabled {
-			opacity: 0.7;
-
-			&, * {
-				cursor: not-allowed !important;
-			}
-		}
-
-		> .toggleWrapper {
-			display: inline-block;
-			text-align: left;
-			overflow: clip;
-			padding: 0 100px;
-			vertical-align: bottom;
-
-			input {
-				position: absolute;
-				left: -99em;
-			}
-		}
-
-		.toggle {
-			cursor: pointer;
-			display: inline-block;
-			position: relative;
-			width: 90px;
-			height: 50px;
-			background-color: #83D8FF;
-			border-radius: 90px - 6;
-			transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
-
-			> .before, > .after {
-				position: absolute;
-				top: 15px;
-				transition: color 1s ease;
-			}
-
-			> .before {
-				left: -70px;
-				color: var(--accent);
-			}
-
-			> .after {
-				right: -68px;
-				color: var(--fg);
-			}
-		}
-
-		.toggle__handler {
-			display: inline-block;
-			position: relative;
-			z-index: 1;
-			top: 3px;
-			left: 3px;
-			width: 50px - 6;
-			height: 50px - 6;
-			background-color: #FFCF96;
-			border-radius: 50px;
-			box-shadow: 0 2px 6px rgba(0,0,0,.3);
-			transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
-			transform:  rotate(-45deg);
-
-			.crater {
-				position: absolute;
-				background-color: #E8CDA5;
-				opacity: 0;
-				transition: opacity 200ms ease-in-out !important;
-				border-radius: 100%;
-			}
-
-			.crater--1 {
-				top: 18px;
-				left: 10px;
-				width: 4px;
-				height: 4px;
-			}
-
-			.crater--2 {
-				top: 28px;
-				left: 22px;
-				width: 6px;
-				height: 6px;
-			}
-
-			.crater--3 {
-				top: 10px;
-				left: 25px;
-				width: 8px;
-				height: 8px;
-			}
-		}
-
-		.star {
-			position: absolute;
-			background-color: #ffffff;
-			transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
-			border-radius: 50%;
-		}
-
-		.star--1 {
-			top: 10px;
-			left: 35px;
-			z-index: 0;
-			width: 30px;
-			height: 3px;
-		}
-
-		.star--2 {
-			top: 18px;
-			left: 28px;
-			z-index: 1;
-			width: 30px;
-			height: 3px;
-		}
-
-		.star--3 {
-			top: 27px;
-			left: 40px;
-			z-index: 0;
-			width: 30px;
-			height: 3px;
-		}
-
-		.star--4,
-		.star--5,
-		.star--6 {
-			opacity: 0;
-			transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
-		}
-
-		.star--4 {
-			top: 16px;
-			left: 11px;
-			z-index: 0;
-			width: 2px;
-			height: 2px;
-			transform: translate3d(3px,0,0);
-		}
-
-		.star--5 {
-			top: 32px;
-			left: 17px;
-			z-index: 0;
-			width: 3px;
-			height: 3px;
-			transform: translate3d(3px,0,0);
-		}
-
-		.star--6 {
-			top: 36px;
-			left: 28px;
-			z-index: 0;
-			width: 2px;
-			height: 2px;
-			transform: translate3d(3px,0,0);
-		}
-
-		input:checked {
-			+ .toggle {
-				background-color: #749DD6;
-
-				> .before {
-					color: var(--fg);
-				}
-
-				> .after {
-					color: var(--accent);
-				}
-
-				.toggle__handler {
-					background-color: #FFE5B5;
-					transform: translate3d(40px, 0, 0) rotate(0);
-
-					.crater { opacity: 1; }
-				}
-
-				.star--1 {
-					width: 2px;
-					height: 2px;
-				}
-
-				.star--2 {
-					width: 4px;
-					height: 4px;
-					transform: translate3d(-5px, 0, 0);
-				}
-
-				.star--3 {
-					width: 2px;
-					height: 2px;
-					transform: translate3d(-7px, 0, 0);
-				}
-
-				.star--4,
-				.star--5,
-				.star--6 {
-					opacity: 1;
-					transform: translate3d(0,0,0);
-				}
-
-				.star--4 {
-					transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
-				}
-
-				.star--5 {
-					transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
-				}
-
-				.star--6 {
-					transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
-				}
-			}
-		}
-	}
-
-	> .sync {
-		padding: 14px 16px;
-		border-top: solid 0.5px var(--divider);
-	}
-}
-
-.rsljpzjq {
-	> .selects {
-		display: flex;
-		gap: 1.5em var(--margin);
-		flex-wrap: wrap;
-
-		> .select {
-			flex: 1;
-			min-width: 280px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/settings/webhook.edit.vue b/packages/client/src/pages/settings/webhook.edit.vue
deleted file mode 100644
index c8ec1ea586..0000000000
--- a/packages/client/src/pages/settings/webhook.edit.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormInput v-model="name" class="_formBlock">
-		<template #label>Name</template>
-	</FormInput>
-
-	<FormInput v-model="url" type="url" class="_formBlock">
-		<template #label>URL</template>
-	</FormInput>
-
-	<FormInput v-model="secret" class="_formBlock">
-		<template #prefix><i class="ti ti-lock"></i></template>
-		<template #label>Secret</template>
-	</FormInput>
-
-	<FormSection>
-		<template #label>Events</template>
-
-		<FormSwitch v-model="event_follow" class="_formBlock">Follow</FormSwitch>
-		<FormSwitch v-model="event_followed" class="_formBlock">Followed</FormSwitch>
-		<FormSwitch v-model="event_note" class="_formBlock">Note</FormSwitch>
-		<FormSwitch v-model="event_reply" class="_formBlock">Reply</FormSwitch>
-		<FormSwitch v-model="event_renote" class="_formBlock">Renote</FormSwitch>
-		<FormSwitch v-model="event_reaction" class="_formBlock">Reaction</FormSwitch>
-		<FormSwitch v-model="event_mention" class="_formBlock">Mention</FormSwitch>
-	</FormSection>
-
-	<FormSwitch v-model="active" class="_formBlock">Active</FormSwitch>
-
-	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton primary inline @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</FormButton>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import FormInput from '@/components/form/input.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const props = defineProps<{
-	webhookId: string;
-}>();
-
-const webhook = await os.api('i/webhooks/show', {
-	webhookId: props.webhookId,
-});
-
-let name = $ref(webhook.name);
-let url = $ref(webhook.url);
-let secret = $ref(webhook.secret);
-let active = $ref(webhook.active);
-
-let event_follow = $ref(webhook.on.includes('follow'));
-let event_followed = $ref(webhook.on.includes('followed'));
-let event_note = $ref(webhook.on.includes('note'));
-let event_reply = $ref(webhook.on.includes('reply'));
-let event_renote = $ref(webhook.on.includes('renote'));
-let event_reaction = $ref(webhook.on.includes('reaction'));
-let event_mention = $ref(webhook.on.includes('mention'));
-
-async function save(): Promise<void> {
-	const events = [];
-	if (event_follow) events.push('follow');
-	if (event_followed) events.push('followed');
-	if (event_note) events.push('note');
-	if (event_reply) events.push('reply');
-	if (event_renote) events.push('renote');
-	if (event_reaction) events.push('reaction');
-	if (event_mention) events.push('mention');
-
-	os.apiWithDialog('i/webhooks/update', {
-		name,
-		url,
-		secret,
-		webhookId: props.webhookId,
-		on: events,
-		active,
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: 'Edit webhook',
-	icon: 'ti ti-webhook',
-});
-</script>
diff --git a/packages/client/src/pages/settings/webhook.new.vue b/packages/client/src/pages/settings/webhook.new.vue
deleted file mode 100644
index 00a547da69..0000000000
--- a/packages/client/src/pages/settings/webhook.new.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormInput v-model="name" class="_formBlock">
-		<template #label>Name</template>
-	</FormInput>
-
-	<FormInput v-model="url" type="url" class="_formBlock">
-		<template #label>URL</template>
-	</FormInput>
-
-	<FormInput v-model="secret" class="_formBlock">
-		<template #prefix><i class="ti ti-lock"></i></template>
-		<template #label>Secret</template>
-	</FormInput>
-
-	<FormSection>
-		<template #label>Events</template>
-
-		<FormSwitch v-model="event_follow" class="_formBlock">Follow</FormSwitch>
-		<FormSwitch v-model="event_followed" class="_formBlock">Followed</FormSwitch>
-		<FormSwitch v-model="event_note" class="_formBlock">Note</FormSwitch>
-		<FormSwitch v-model="event_reply" class="_formBlock">Reply</FormSwitch>
-		<FormSwitch v-model="event_renote" class="_formBlock">Renote</FormSwitch>
-		<FormSwitch v-model="event_reaction" class="_formBlock">Reaction</FormSwitch>
-		<FormSwitch v-model="event_mention" class="_formBlock">Mention</FormSwitch>
-	</FormSection>
-
-	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
-		<FormButton primary inline @click="create"><i class="ti ti-check"></i> {{ i18n.ts.create }}</FormButton>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import FormInput from '@/components/form/input.vue';
-import FormSection from '@/components/form/section.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let name = $ref('');
-let url = $ref('');
-let secret = $ref('');
-
-let event_follow = $ref(true);
-let event_followed = $ref(true);
-let event_note = $ref(true);
-let event_reply = $ref(true);
-let event_renote = $ref(true);
-let event_reaction = $ref(true);
-let event_mention = $ref(true);
-
-async function create(): Promise<void> {
-	const events = [];
-	if (event_follow) events.push('follow');
-	if (event_followed) events.push('followed');
-	if (event_note) events.push('note');
-	if (event_reply) events.push('reply');
-	if (event_renote) events.push('renote');
-	if (event_reaction) events.push('reaction');
-	if (event_mention) events.push('mention');
-
-	os.apiWithDialog('i/webhooks/create', {
-		name,
-		url,
-		secret,
-		on: events,
-	});
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: 'Create new webhook',
-	icon: 'ti ti-webhook',
-});
-</script>
diff --git a/packages/client/src/pages/settings/webhook.vue b/packages/client/src/pages/settings/webhook.vue
deleted file mode 100644
index 9be23ee4f0..0000000000
--- a/packages/client/src/pages/settings/webhook.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-<div class="_formRoot">
-	<FormSection>
-		<FormLink :to="`/settings/webhook/new`">
-			Create webhook
-		</FormLink>
-	</FormSection>
-	
-	<FormSection>
-		<MkPagination :pagination="pagination">
-			<template #default="{items}">
-				<FormLink v-for="webhook in items" :key="webhook.id" :to="`/settings/webhook/edit/${webhook.id}`" class="_formBlock">
-					<template #icon>
-						<i v-if="webhook.active === false" class="ti ti-player-pause"></i>
-						<i v-else-if="webhook.latestStatus === null" class="ti ti-circle"></i>
-						<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="ti ti-check" :style="{ color: 'var(--success)' }"></i>
-						<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--error)' }"></i>
-					</template>
-					{{ webhook.name || webhook.url }}
-					<template #suffix>
-						<MkTime v-if="webhook.latestSentAt" :time="webhook.latestSentAt"></MkTime>
-					</template>
-				</FormLink>
-			</template>
-		</MkPagination>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import FormSection from '@/components/form/section.vue';
-import FormLink from '@/components/form/link.vue';
-import { userPage } from '@/filters/user';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const pagination = {
-	endpoint: 'i/webhooks/list' as const,
-	limit: 10,
-};
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: 'Webhook',
-	icon: 'ti ti-webhook',
-});
-</script>
diff --git a/packages/client/src/pages/settings/word-mute.vue b/packages/client/src/pages/settings/word-mute.vue
deleted file mode 100644
index 6961d8151d..0000000000
--- a/packages/client/src/pages/settings/word-mute.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-<div class="_formRoot">
-	<MkTab v-model="tab" class="_formBlock">
-		<option value="soft">{{ i18n.ts._wordMute.soft }}</option>
-		<option value="hard">{{ i18n.ts._wordMute.hard }}</option>
-	</MkTab>
-	<div class="_formBlock">
-		<div v-show="tab === 'soft'">
-			<MkInfo class="_formBlock">{{ i18n.ts._wordMute.softDescription }}</MkInfo>
-			<FormTextarea v-model="softMutedWords" class="_formBlock">
-				<span>{{ i18n.ts._wordMute.muteWords }}</span>
-				<template #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
-			</FormTextarea>
-		</div>
-		<div v-show="tab === 'hard'">
-			<MkInfo class="_formBlock">{{ i18n.ts._wordMute.hardDescription }} {{ i18n.ts.reflectMayTakeTime }}</MkInfo>
-			<FormTextarea v-model="hardMutedWords" class="_formBlock">
-				<span>{{ i18n.ts._wordMute.muteWords }}</span>
-				<template #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
-			</FormTextarea>
-			<MkKeyValue v-if="hardWordMutedNotesCount != null" class="_formBlock">
-				<template #key>{{ i18n.ts._wordMute.mutedNotes }}</template>
-				<template #value>{{ number(hardWordMutedNotesCount) }}</template>
-			</MkKeyValue>
-		</div>
-	</div>
-	<MkButton primary inline :disabled="!changed" @click="save()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ref, watch } from 'vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import MkTab from '@/components/MkTab.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { defaultStore } from '@/store';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const render = (mutedWords) => mutedWords.map(x => {
-	if (Array.isArray(x)) {
-		return x.join(' ');
-	} else {
-		return x;
-	}
-}).join('\n');
-
-const tab = ref('soft');
-const softMutedWords = ref(render(defaultStore.state.mutedWords));
-const hardMutedWords = ref(render($i!.mutedWords));
-const hardWordMutedNotesCount = ref(null);
-const changed = ref(false);
-
-os.api('i/get-word-muted-notes-count', {}).then(response => {
-	hardWordMutedNotesCount.value = response?.count;
-});
-
-watch(softMutedWords, () => {
-	changed.value = true;
-});
-
-watch(hardMutedWords, () => {
-	changed.value = true;
-});
-
-async function save() {
-	const parseMutes = (mutes, tab) => {
-		// split into lines, remove empty lines and unnecessary whitespace
-		let lines = mutes.trim().split('\n').map(line => line.trim()).filter(line => line !== '');
-
-		// check each line if it is a RegExp or not
-		for (let i = 0; i < lines.length; i++) {
-			const line = lines[i];
-			const regexp = line.match(/^\/(.+)\/(.*)$/);
-			if (regexp) {
-				// check that the RegExp is valid
-				try {
-					new RegExp(regexp[1], regexp[2]);
-					// note that regex lines will not be split by spaces!
-				} catch (err: any) {
-					// invalid syntax: do not save, do not reset changed flag
-					os.alert({
-						type: 'error',
-						title: i18n.ts.regexpError,
-						text: i18n.t('regexpErrorDescription', { tab, line: i + 1 }) + '\n' + err.toString(),
-					});
-					// re-throw error so these invalid settings are not saved
-					throw err;
-				}
-			} else {
-				lines[i] = line.split(' ');
-			}
-		}
-
-		return lines;
-	};
-
-	let softMutes, hardMutes;
-	try {
-		softMutes = parseMutes(softMutedWords.value, i18n.ts._wordMute.soft);
-		hardMutes = parseMutes(hardMutedWords.value, i18n.ts._wordMute.hard);
-	} catch (err) {
-		// already displayed error message in parseMutes
-		return;
-	}
-
-	defaultStore.set('mutedWords', softMutes);
-	await os.api('i/update', {
-		mutedWords: hardMutes,
-	});
-
-	changed.value = false;
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.wordMute,
-	icon: 'ti ti-message-off',
-});
-</script>
diff --git a/packages/client/src/pages/share.vue b/packages/client/src/pages/share.vue
deleted file mode 100644
index a7e797eeab..0000000000
--- a/packages/client/src/pages/share.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800">
-		<XPostForm
-			v-if="state === 'writing'"
-			fixed
-			:instant="true"
-			:initial-text="initialText"
-			:initial-visibility="visibility"
-			:initial-files="files"
-			:initial-local-only="localOnly"
-			:reply="reply"
-			:renote="renote"
-			:initial-visible-users="visibleUsers"
-			class="_panel"
-			@posted="state = 'posted'"
-		/>
-		<MkButton v-else-if="state === 'posted'" primary class="close" @click="close()">{{ i18n.ts.close }}</MkButton>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-// SPECIFICATION: https://misskey-hub.net/docs/features/share-form.html
-
-import { } 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/MkButton.vue';
-import XPostForm from '@/components/MkPostForm.vue';
-import * as os from '@/os';
-import { mainRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-
-const urlParams = new URLSearchParams(window.location.search);
-const localOnlyQuery = urlParams.get('localOnly');
-const visibilityQuery = urlParams.get('visibility');
-
-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[]);
-
-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();
-
-	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)}`);
-				}),
-			),
-		);
-	}
-
-	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
-
-		//#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(
-				fileIds.split(',')
-				.map(fileId => os.api('drive/files/show', { fileId })
-					.then(file => {
-						files.push(file);
-					}, () => {
-						console.error(`Failed to fetch a file ${fileId}`);
-					}),
-				),
-			);
-		}
-		//#endregion
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			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: 'ti ti-share',
-});
-</script>
-
-<style lang="scss" scoped>
-.close {
-	margin: 16px auto;
-}
-</style>
diff --git a/packages/client/src/pages/signup-complete.vue b/packages/client/src/pages/signup-complete.vue
deleted file mode 100644
index 5459532310..0000000000
--- a/packages/client/src/pages/signup-complete.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-<div>
-	{{ i18n.ts.processing }}
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as os from '@/os';
-import { login } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const props = defineProps<{
-	code: string;
-}>();
-
-onMounted(async () => {
-	await os.alert({
-		type: 'info',
-		text: i18n.t('clickToFinishEmailVerification', { ok: i18n.ts.gotIt }),
-	});
-	const res = await os.apiWithDialog('signup-pending', {
-		code: props.code,
-	});
-	login(res.i, '/');
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.signup,
-	icon: 'ti ti-user',
-});
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
deleted file mode 100644
index 72775ed5c9..0000000000
--- a/packages/client/src/pages/tag.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="800">
-		<XNotes class="_content" :pagination="pagination"/>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import XNotes from '@/components/MkNotes.vue';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const props = defineProps<{
-	tag: string;
-}>();
-
-const pagination = {
-	endpoint: 'notes/search-by-tag' as const,
-	limit: 10,
-	params: computed(() => ({
-		tag: props.tag,
-	})),
-};
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => ({
-	title: props.tag,
-	icon: 'ti ti-hash',
-})));
-</script>
diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
deleted file mode 100644
index d8ff170ca2..0000000000
--- a/packages/client/src/pages/theme-editor.vue
+++ /dev/null
@@ -1,283 +0,0 @@
-<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>
-					</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>
-			</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>
-			</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>
-					</div>
-				</div>
-			</FormFolder>
-
-			<FormFolder :default-open="false" class="_formBlock">
-				<template #icon><i class="ti ti-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>
-			</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>
-</template>
-
-<script lang="ts" setup>
-import { watch } from 'vue';
-import { toUnicode } from 'punycode/';
-import tinycolor from 'tinycolor2';
-import { v4 as uuid } from 'uuid';
-import JSON5 from 'json5';
-
-import FormButton from '@/components/MkButton.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormFolder from '@/components/form/folder.vue';
-
-import { $i } from '@/account';
-import { Theme, applyTheme } from '@/scripts/theme';
-import lightTheme from '@/themes/_light.json5';
-import darkTheme from '@/themes/_dark.json5';
-import { host } from '@/config';
-import * as os from '@/os';
-import { ColdDeviceStorage, defaultStore } from '@/store';
-import { addTheme } from '@/theme-store';
-import { i18n } from '@/i18n';
-import { useLeaveGuard } from '@/scripts/use-leave-guard';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const bgColors = [
-	{ color: '#f5f5f5', kind: 'light', forPreview: '#f5f5f5' },
-	{ color: '#f0eee9', kind: 'light', forPreview: '#f3e2b9' },
-	{ color: '#e9eff0', kind: 'light', forPreview: '#bfe3e8' },
-	{ color: '#f0e9ee', kind: 'light', forPreview: '#f1d1e8' },
-	{ color: '#dce2e0', kind: 'light', forPreview: '#a4dccc' },
-	{ color: '#e2e0dc', kind: 'light', forPreview: '#d8c7a5' },
-	{ color: '#d5dbe0', kind: 'light', forPreview: '#b0cae0' },
-	{ color: '#dad5d5', kind: 'light', forPreview: '#d6afaf' },
-	{ color: '#2b2b2b', kind: 'dark', forPreview: '#444444' },
-	{ color: '#362e29', kind: 'dark', forPreview: '#735c4d' },
-	{ color: '#303629', kind: 'dark', forPreview: '#506d2f' },
-	{ color: '#293436', kind: 'dark', forPreview: '#258192' },
-	{ color: '#2e2936', kind: 'dark', forPreview: '#504069' },
-	{ color: '#252722', kind: 'dark', forPreview: '#3c462f' },
-	{ color: '#212525', kind: 'dark', forPreview: '#303e3e' },
-	{ color: '#191919', kind: 'dark', forPreview: '#272727' },
-] as const;
-const accentColors = ['#e36749', '#f29924', '#98c934', '#34c9a9', '#34a1c9', '#606df7', '#8d34c9', '#e84d83'];
-const fgColors = [
-	{ color: 'none', forLight: '#5f5f5f', forDark: '#dadada', forPreview: null },
-	{ color: 'red', forLight: '#7f6666', forDark: '#e4d1d1', forPreview: '#ca4343' },
-	{ color: 'yellow', forLight: '#736955', forDark: '#e0d5c0', forPreview: '#d49923' },
-	{ color: 'green', forLight: '#586d5b', forDark: '#d1e4d4', forPreview: '#4cbd5c' },
-	{ color: 'cyan', forLight: '#5d7475', forDark: '#d1e3e4', forPreview: '#2abdc3' },
-	{ color: 'blue', forLight: '#676880', forDark: '#d1d2e4', forPreview: '#7275d8' },
-	{ color: 'pink', forLight: '#84667d', forDark: '#e4d1e0', forPreview: '#b12390' },
-];
-
-let theme = $ref<Partial<Theme>>({
-	base: 'light',
-	props: lightTheme.props,
-});
-let description = $ref<string | null>(null);
-let themeCode = $ref<string | null>(null);
-let changed = $ref(false);
-
-useLeaveGuard($$(changed));
-
-function showPreview() {
-	os.pageWindow('/preview');
-}
-
-function setBgColor(color: typeof bgColors[number]) {
-	if (theme.base !== color.kind) {
-		const base = color.kind === 'dark' ? darkTheme : lightTheme;
-		for (const prop of Object.keys(base.props)) {
-			if (prop === 'accent') continue;
-			if (prop === 'fg') continue;
-			theme.props[prop] = base.props[prop];
-		}
-	}
-	theme.base = color.kind;
-	theme.props.bg = color.color;
-
-	if (theme.props.fg) {
-		const matchedFgColor = fgColors.find(x => [tinycolor(x.forLight).toRgbString(), tinycolor(x.forDark).toRgbString()].includes(tinycolor(theme.props.fg).toRgbString()));
-		if (matchedFgColor) setFgColor(matchedFgColor);
-	}
-}
-
-function setAccentColor(color) {
-	theme.props.accent = color;
-}
-
-function setFgColor(color) {
-	theme.props.fg = theme.base === 'light' ? color.forLight : color.forDark;
-}
-
-function apply() {
-	themeCode = JSON5.stringify(theme, null, '\t');
-	applyTheme(theme, false);
-	changed = true;
-}
-
-function applyThemeCode() {
-	let parsed;
-
-	try {
-		parsed = JSON5.parse(themeCode);
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			text: i18n.ts._theme.invalid,
-		});
-		return;
-	}
-
-	theme = parsed;
-}
-
-async function saveAs() {
-	const { canceled, result: name } = await os.inputText({
-		title: i18n.ts.name,
-		allowEmpty: false,
-	});
-	if (canceled) return;
-
-	theme.id = uuid();
-	theme.name = name;
-	theme.author = `@${$i.username}@${toUnicode(host)}`;
-	if (description) theme.desc = description;
-	await addTheme(theme);
-	applyTheme(theme);
-	if (defaultStore.state.darkMode) {
-		ColdDeviceStorage.set('darkTheme', theme);
-	} else {
-		ColdDeviceStorage.set('lightTheme', theme);
-	}
-	changed = false;
-	os.alert({
-		type: 'success',
-		text: i18n.t('_theme.installed', { name: theme.name }),
-	});
-}
-
-watch($$(theme), apply, { deep: true });
-
-const headerActions = $computed(() => [{
-	asFullButton: true,
-	icon: 'ti ti-eye',
-	text: i18n.ts.preview,
-	handler: showPreview,
-}, {
-	asFullButton: true,
-	icon: 'ti ti-check',
-	text: i18n.ts.saveAs,
-	handler: saveAs,
-}]);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.themeEditor,
-	icon: 'ti ti-palette',
-});
-</script>
-
-<style lang="scss" scoped>
-.cwepdizn {
-	::v-deep(.cwepdizn-colors) {
-		text-align: center;
-
-		> .row {
-			> .color {
-				display: inline-block;
-				position: relative;
-				width: 64px;
-				height: 64px;
-				border-radius: 8px;
-
-				> .preview {
-					position: absolute;
-					top: 0;
-					left: 0;
-					right: 0;
-					bottom: 0;
-					margin: auto;
-					width: 42px;
-					height: 42px;
-					border-radius: 4px;
-					box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
-					transition: transform 0.15s ease;
-				}
-
-				&:hover {
-					> .preview {
-						transform: scale(1.1);
-					}
-				}
-
-				&.active {
-					box-shadow: 0 0 0 2px var(--divider) inset;
-				}
-
-				&.rounded {
-					border-radius: 999px;
-
-					> .preview {
-						border-radius: 999px;
-					}
-				}
-
-				&.char {
-					line-height: 42px;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/timeline.tutorial.vue b/packages/client/src/pages/timeline.tutorial.vue
deleted file mode 100644
index ae7b098b90..0000000000
--- a/packages/client/src/pages/timeline.tutorial.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-<div class="_card">
-	<div :class="$style.title" class="_title">
-		<div :class="$style.titleText"><i class="ti ti-info-circle"></i> {{ i18n.ts._tutorial.title }}</div>
-		<div :class="$style.step">
-			<button class="_button" :class="$style.stepArrow" :disabled="tutorial === 0" @click="tutorial--">
-				<i class="ti ti-chevron-left"></i>
-			</button>
-			<span :class="$style.stepNumber">{{ tutorial + 1 }} / {{ tutorialsNumber }}</span>
-			<button class="_button" :class="$style.stepArrow" :disabled="tutorial === tutorialsNumber - 1" @click="tutorial++">
-				<i class="ti ti-chevron-right"></i>
-			</button>
-		</div>
-	</div>
-	<div v-if="tutorial === 0" class="_content">
-		<div>{{ i18n.ts._tutorial.step1_1 }}</div>
-		<div>{{ i18n.ts._tutorial.step1_2 }}</div>
-		<div>{{ i18n.ts._tutorial.step1_3 }}</div>
-	</div>
-	<div v-else-if="tutorial === 1" class="_content">
-		<div>{{ i18n.ts._tutorial.step2_1 }}</div>
-		<div>{{ i18n.ts._tutorial.step2_2 }}</div>
-		<MkA class="_link" to="/settings/profile">{{ i18n.ts.editProfile }}</MkA>
-	</div>
-	<div v-else-if="tutorial === 2" class="_content">
-		<div>{{ i18n.ts._tutorial.step3_1 }}</div>
-		<div>{{ i18n.ts._tutorial.step3_2 }}</div>
-		<div>{{ i18n.ts._tutorial.step3_3 }}</div>
-		<small :class="$style.small">{{ i18n.ts._tutorial.step3_4 }}</small>
-	</div>
-	<div v-else-if="tutorial === 3" class="_content">
-		<div>{{ i18n.ts._tutorial.step4_1 }}</div>
-		<div>{{ i18n.ts._tutorial.step4_2 }}</div>
-	</div>
-	<div v-else-if="tutorial === 4" class="_content">
-		<div>{{ i18n.ts._tutorial.step5_1 }}</div>
-		<I18n :src="i18n.ts._tutorial.step5_2" tag="div">
-			<template #featured>
-				<MkA class="_link" to="/featured">{{ i18n.ts.featured }}</MkA>
-			</template>
-			<template #explore>
-				<MkA class="_link" to="/explore">{{ i18n.ts.explore }}</MkA>
-			</template>
-		</I18n>
-		<div>{{ i18n.ts._tutorial.step5_3 }}</div>
-		<small :class="$style.small">{{ i18n.ts._tutorial.step5_4 }}</small>
-	</div>
-	<div v-else-if="tutorial === 5" class="_content">
-		<div>{{ i18n.ts._tutorial.step6_1 }}</div>
-		<div>{{ i18n.ts._tutorial.step6_2 }}</div>
-		<div>{{ i18n.ts._tutorial.step6_3 }}</div>
-	</div>
-	<div v-else-if="tutorial === 6" class="_content">
-		<div>{{ i18n.ts._tutorial.step7_1 }}</div>
-		<I18n :src="i18n.ts._tutorial.step7_2" tag="div">
-			<template #help>
-				<a href="https://misskey-hub.net/help.html" target="_blank" class="_link">{{ i18n.ts.help }}</a>
-			</template>
-		</I18n>
-		<div>{{ i18n.ts._tutorial.step7_3 }}</div>
-	</div>
-	<div v-else-if="tutorial === 7" class="_content">
-		<div>{{ i18n.ts._tutorial.step8_1 }}</div>
-		<div>{{ i18n.ts._tutorial.step8_2 }}</div>
-		<small :class="$style.small">{{ i18n.ts._tutorial.step8_3 }}</small>
-	</div>
-
-	<div class="_footer" :class="$style.footer">
-		<template v-if="tutorial === tutorialsNumber - 1">
-			<MkPushNotificationAllowButton :class="$style.footerItem" primary show-only-to-register @click="tutorial = -1" />
-			<MkButton :class="$style.footerItem" :primary="false" @click="tutorial = -1">{{ i18n.ts.noThankYou }}</MkButton>
-		</template>
-		<template v-else>
-			<MkButton :class="$style.footerItem" primary @click="tutorial++"><i class="ti ti-check"></i> {{ i18n.ts.next }}</MkButton>
-		</template>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-
-const tutorialsNumber = 8;
-
-const tutorial = computed({
-	get() { return defaultStore.reactiveState.tutorial.value || 0; },
-	set(value) { defaultStore.set('tutorial', value); },
-});
-</script>
-
-<style lang="scss" module>
-.small {
-	opacity: 0.7;
-}
-
-.title {
-	display: flex;
-	flex-wrap: wrap;
-
-	&Text {
-		margin: 4px 0;
-		padding-right: 4px;
-	}
-}
-
-.step {
-	margin-left: auto;
-
-	&Arrow {
-		padding: 4px;
-		&:disabled {
-			opacity: 0.5;
-		}
-		&:first-child {
-			padding-right: 8px;
-		}
-		&:last-child {
-			padding-left: 8px;
-		}
-	}
-
-	&Number {
-		font-weight: normal;
-		margin: 4px;
-	}
-}
-
-.footer {
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: row;
-	justify-content: right;
-
-	&Item {
-		margin: 4px;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
deleted file mode 100644
index 1c9e389367..0000000000
--- a/packages/client/src/pages/timeline.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template>
-	<MkSpacer :content-max="800">
-		<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
-			<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()">{{ i18n.ts.newNoteRecived }}</button></div>
-			<div class="tl _block">
-				<XTimeline
-					ref="tl" :key="src"
-					class="tl"
-					:src="src"
-					:sound="true"
-					@queue="queueUpdated"
-				/>
-			</div>
-		</div>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, computed, watch } from 'vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import XPostForm from '@/components/MkPostForm.vue';
-import { scroll } from '@/scripts/scroll';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { $i } from '@/account';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
-
-const isLocalTimelineAvailable = !instance.disableLocalTimeline || ($i != null && ($i.isModerator || $i.isAdmin));
-const isGlobalTimelineAvailable = !instance.disableGlobalTimeline || ($i != null && ($i.isModerator || $i.isAdmin));
-const keymap = {
-	't': focus,
-};
-
-const tlComponent = $ref<InstanceType<typeof XTimeline>>();
-const rootEl = $ref<HTMLElement>();
-
-let queue = $ref(0);
-const src = $computed({ get: () => defaultStore.reactiveState.tl.value.src, set: (x) => saveSrc(x) });
-
-watch ($$(src), () => queue = 0);
-
-function queueUpdated(q: number): void {
-	queue = q;
-}
-
-function top(): void {
-	scroll(rootEl, { top: 0 });
-}
-
-async function chooseList(ev: MouseEvent): Promise<void> {
-	const lists = await os.api('users/lists/list');
-	const items = lists.map(list => ({
-		type: 'link' as const,
-		text: list.name,
-		to: `/timeline/list/${list.id}`,
-	}));
-	os.popupMenu(items, ev.currentTarget ?? ev.target);
-}
-
-async function chooseAntenna(ev: MouseEvent): Promise<void> {
-	const antennas = await os.api('antennas/list');
-	const items = antennas.map(antenna => ({
-		type: 'link' as const,
-		text: antenna.name,
-		indicate: antenna.hasUnreadNote,
-		to: `/timeline/antenna/${antenna.id}`,
-	}));
-	os.popupMenu(items, ev.currentTarget ?? ev.target);
-}
-
-async function chooseChannel(ev: MouseEvent): Promise<void> {
-	const channels = await os.api('channels/followed');
-	const items = channels.map(channel => ({
-		type: 'link' as const,
-		text: channel.name,
-		indicate: channel.hasUnreadNote,
-		to: `/channels/${channel.id}`,
-	}));
-	os.popupMenu(items, ev.currentTarget ?? ev.target);
-}
-
-function saveSrc(newSrc: 'home' | 'local' | 'social' | 'global'): void {
-	defaultStore.set('tl', {
-		...defaultStore.state.tl,
-		src: newSrc,
-	});
-}
-
-async function timetravel(): Promise<void> {
-	const { canceled, result: date } = await os.inputDate({
-		title: i18n.ts.date,
-	});
-	if (canceled) return;
-
-	tlComponent.timetravel(date);
-}
-
-function focus(): void {
-	tlComponent.focus();
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => [{
-	key: 'home',
-	title: i18n.ts._timelines.home,
-	icon: 'ti ti-home',
-	iconOnly: true,
-}, ...(isLocalTimelineAvailable ? [{
-	key: 'local',
-	title: i18n.ts._timelines.local,
-	icon: 'ti ti-messages',
-	iconOnly: true,
-}, {
-	key: 'social',
-	title: i18n.ts._timelines.social,
-	icon: 'ti ti-share',
-	iconOnly: true,
-}] : []), ...(isGlobalTimelineAvailable ? [{
-	key: 'global',
-	title: i18n.ts._timelines.global,
-	icon: 'ti ti-world',
-	iconOnly: true,
-}] : []), {
-	icon: 'ti ti-list',
-	title: i18n.ts.lists,
-	iconOnly: true,
-	onClick: chooseList,
-}, {
-	icon: 'ti ti-antenna',
-	title: i18n.ts.antennas,
-	iconOnly: true,
-	onClick: chooseAntenna,
-}, {
-	icon: 'ti ti-device-tv',
-	title: i18n.ts.channel,
-	iconOnly: true,
-	onClick: chooseChannel,
-}]);
-
-definePageMetadata(computed(() => ({
-	title: i18n.ts.timeline,
-	icon: src === 'local' ? 'ti ti-messages' : src === 'social' ? 'ti ti-share' : src === 'global' ? 'ti ti-world' : 'ti ti-home',
-})));
-</script>
-
-<style lang="scss" scoped>
-.cmuxhskf {
-	> .new {
-		position: sticky;
-		top: calc(var(--stickyTop, 0px) + 16px);
-		z-index: 1000;
-		width: 100%;
-
-		> button {
-			display: block;
-			margin: var(--margin) auto 0 auto;
-			padding: 8px 16px;
-			border-radius: 32px;
-		}
-	}
-
-	> .post-form {
-		border-radius: var(--radius);
-	}
-
-	> .tl {
-		background: var(--bg);
-		border-radius: var(--radius);
-		overflow: clip;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
deleted file mode 100644
index addc8db9e6..0000000000
--- a/packages/client/src/pages/user-info.vue
+++ /dev/null
@@ -1,485 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
-		<FormSuspense :p="init">
-			<div v-if="tab === 'overview'" class="_formRoot">
-				<div class="_formBlock aeakzknw">
-					<MkAvatar class="avatar" :user="user" :show-indicator="true"/>
-					<div class="body">
-						<span class="name"><MkUserName class="name" :user="user"/></span>
-						<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
-						<span class="state">
-							<span v-if="suspended" class="suspended">Suspended</span>
-							<span v-if="silenced" class="silenced">Silenced</span>
-							<span v-if="moderator" class="moderator">Moderator</span>
-						</span>
-					</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>
-				</div>
-				<FormLink v-else class="_formBlock" :to="userPage(user)">Profile</FormLink>
-
-				<FormLink v-if="user.host" class="_formBlock" :to="`/instance-info/${user.host}`">{{ i18n.ts.instanceInfo }}</FormLink>
-
-				<div class="_formBlock">
-					<MkKeyValue :copy="user.id" oneline style="margin: 1em 0;">
-						<template #key>ID</template>
-						<template #value><span class="_monospace">{{ user.id }}</span></template>
-					</MkKeyValue>
-					<!-- 要る？
-					<MkKeyValue v-if="ips.length > 0" :copy="user.id" oneline style="margin: 1em 0;">
-						<template #key>IP (recent)</template>
-						<template #value><span class="_monospace">{{ ips[0].ip }}</span></template>
-					</MkKeyValue>
-					-->
-					<MkKeyValue oneline style="margin: 1em 0;">
-						<template #key>{{ i18n.ts.createdAt }}</template>
-						<template #value><span class="_monospace"><MkTime :time="user.createdAt" :mode="'detail'"/></span></template>
-					</MkKeyValue>
-					<MkKeyValue v-if="info" oneline style="margin: 1em 0;">
-						<template #key>{{ i18n.ts.lastActiveDate }}</template>
-						<template #value><span class="_monospace"><MkTime :time="info.lastActiveDate" :mode="'detail'"/></span></template>
-					</MkKeyValue>
-					<MkKeyValue v-if="info" oneline style="margin: 1em 0;">
-						<template #key>{{ i18n.ts.email }}</template>
-						<template #value><span class="_monospace">{{ info.email }}</span></template>
-					</MkKeyValue>
-				</div>
-
-				<FormSection>
-					<template #label>ActivityPub</template>
-
-					<div class="_formBlock">
-						<MkKeyValue v-if="user.host" oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.instanceInfo }}</template>
-							<template #value><MkA :to="`/instance-info/${user.host}`" class="_link">{{ user.host }} <i class="ti ti-chevron-right"></i></MkA></template>
-						</MkKeyValue>
-						<MkKeyValue v-else oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.instanceInfo }}</template>
-							<template #value>(Local user)</template>
-						</MkKeyValue>
-						<MkKeyValue oneline style="margin: 1em 0;">
-							<template #key>{{ i18n.ts.updatedAt }}</template>
-							<template #value><MkTime v-if="user.lastFetchedAt" mode="detail" :time="user.lastFetchedAt"/><span v-else>N/A</span></template>
-						</MkKeyValue>
-						<MkKeyValue v-if="ap" oneline style="margin: 1em 0;">
-							<template #key>Type</template>
-							<template #value><span class="_monospace">{{ ap.type }}</span></template>
-						</MkKeyValue>
-					</div>
-
-					<FormButton v-if="user.host != null" class="_formBlock" @click="updateRemoteUser"><i class="ti ti-refresh"></i> {{ i18n.ts.updateRemoteUser }}</FormButton>
-
-					<FormFolder class="_formBlock">
-						<template #label>Raw</template>
-
-						<MkObjectView v-if="ap" tall :value="ap">
-						</MkObjectView>
-					</FormFolder>
-				</FormSection>
-			</div>
-			<div v-else-if="tab === 'moderation'" class="_formRoot">
-				<FormSwitch v-if="user.host == null && $i.isAdmin && (moderator || !user.isAdmin)" v-model="moderator" class="_formBlock" @update:model-value="toggleModerator">{{ i18n.ts.moderator }}</FormSwitch>
-				<FormSwitch v-model="silenced" class="_formBlock" @update:model-value="toggleSilence">{{ i18n.ts.silence }}</FormSwitch>
-				<FormSwitch v-model="suspended" class="_formBlock" @update:model-value="toggleSuspend">{{ i18n.ts.suspend }}</FormSwitch>
-				{{ i18n.ts.reflectMayTakeTime }}
-				<div class="_formBlock">
-					<FormButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</FormButton>
-					<FormButton v-if="$i.isAdmin" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</FormButton>
-				</div>
-				<FormTextarea v-model="moderationNote" manual-save class="_formBlock">
-					<template #label>Moderation note</template>
-				</FormTextarea>
-				<FormFolder class="_formBlock">
-					<template #label>IP</template>
-					<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
-					<MkInfo v-else>The date is the IP address was first acknowledged.</MkInfo>
-					<template v-if="iAmAdmin && ips">
-						<div v-for="record in ips" :key="record.ip" class="_monospace" :class="$style.ip" style="margin: 1em 0;">
-							<span class="date">{{ record.createdAt }}</span>
-							<span class="ip">{{ record.ip }}</span>
-						</div>
-					</template>
-				</FormFolder>
-				<FormFolder class="_formBlock">
-					<template #label>{{ i18n.ts.files }}</template>
-
-					<MkFileListForAdmin :pagination="filesPagination" view-mode="grid"/>
-				</FormFolder>
-				<FormSection>
-					<template #label>Drive Capacity Override</template>
-
-					<FormInput v-if="user.host == null" v-model="driveCapacityOverrideMb" inline :manual-save="true" type="number" :placeholder="i18n.t('defaultValueIs', { value: instance.driveCapacityPerLocalUserMb })" @update:model-value="applyDriveCapacityOverride">
-						<template #label>{{ i18n.ts.driveCapOverrideLabel }}</template>
-						<template #suffix>MB</template>
-						<template #caption>
-							{{ i18n.ts.driveCapOverrideCaption }}
-						</template>
-					</FormInput>
-				</FormSection>
-			</div>
-			<div v-else-if="tab === 'chart'" class="_formRoot">
-				<div class="cmhjzshm">
-					<div class="selects">
-						<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
-							<option value="per-user-notes">{{ i18n.ts.notes }}</option>
-						</MkSelect>
-					</div>
-					<div class="charts">
-						<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div>
-						<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ user, withoutAll: true }" :detailed="true"></MkChart>
-						<div class="label">{{ i18n.t('recentNDays', { n: 90 }) }}</div>
-						<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ user, withoutAll: true }" :detailed="true"></MkChart>
-					</div>
-				</div>
-			</div>
-			<div v-else-if="tab === 'raw'" class="_formRoot">
-				<MkObjectView v-if="info && $i.isAdmin" tall :value="info">
-				</MkObjectView>
-
-				<MkObjectView tall :value="user">
-				</MkObjectView>
-			</div>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed, watch } from 'vue';
-import * as misskey from 'misskey-js';
-import MkChart from '@/components/MkChart.vue';
-import MkObjectView from '@/components/MkObjectView.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormLink from '@/components/form/link.vue';
-import FormSection from '@/components/form/section.vue';
-import FormButton from '@/components/MkButton.vue';
-import FormInput from '@/components/form/input.vue';
-import FormSplit from '@/components/form/split.vue';
-import FormFolder from '@/components/form/folder.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import MkSelect from '@/components/form/select.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import bytes from '@/filters/bytes';
-import { url } from '@/config';
-import { userPage, acct } from '@/filters/user';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-import { iAmAdmin, iAmModerator } from '@/account';
-import { instance } from '@/instance';
-
-const props = defineProps<{
-	userId: string;
-}>();
-
-let tab = $ref('overview');
-let chartSrc = $ref('per-user-notes');
-let user = $ref<null | misskey.entities.UserDetailed>();
-let init = $ref<ReturnType<typeof createFetcher>>();
-let info = $ref();
-let ips = $ref(null);
-let ap = $ref(null);
-let moderator = $ref(false);
-let silenced = $ref(false);
-let suspended = $ref(false);
-let driveCapacityOverrideMb: number | null = $ref(0);
-let moderationNote = $ref('');
-const filesPagination = {
-	endpoint: 'admin/drive/files' as const,
-	limit: 10,
-	params: computed(() => ({
-		userId: props.userId,
-	})),
-};
-
-function createFetcher() {
-	if (iAmModerator) {
-		return () => Promise.all([os.api('users/show', {
-			userId: props.userId,
-		}), os.api('admin/show-user', {
-			userId: props.userId,
-		}), iAmAdmin ? os.api('admin/get-user-ips', {
-			userId: props.userId,
-		}) : Promise.resolve(null)]).then(([_user, _info, _ips]) => {
-			user = _user;
-			info = _info;
-			ips = _ips;
-			moderator = info.isModerator;
-			silenced = info.isSilenced;
-			suspended = info.isSuspended;
-			driveCapacityOverrideMb = user.driveCapacityOverrideMb;
-			moderationNote = info.moderationNote;
-
-			watch($$(moderationNote), async () => {
-				await os.api('admin/update-user-note', { userId: user.id, text: moderationNote });
-				await refreshUser();
-			});
-		});
-	} else {
-		return () => os.api('users/show', {
-			userId: props.userId,
-		}).then((res) => {
-			user = res;
-		});
-	}
-}
-
-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();
-}
-
-async function applyDriveCapacityOverride() {
-	let driveCapOrMb = driveCapacityOverrideMb;
-	if (driveCapacityOverrideMb && driveCapacityOverrideMb < 0) {
-		driveCapOrMb = null;
-	}
-	try {
-		await os.apiWithDialog('admin/drive-capacity-override', { userId: user.id, overrideMb: driveCapOrMb });
-		await refreshUser();
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			text: err.toString(),
-		});
-	}
-}
-
-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();
-}, {
-	immediate: true,
-});
-
-watch($$(user), () => {
-	os.api('ap/get', {
-		uri: user.uri ?? `${url}/users/${user.id}`,
-	}).then(res => {
-		ap = res;
-	});
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => [{
-	key: 'overview',
-	title: i18n.ts.overview,
-	icon: 'ti ti-info-circle',
-}, iAmModerator ? {
-	key: 'moderation',
-	title: i18n.ts.moderation,
-	icon: 'ti ti-user-exclamation',
-} : null, {
-	key: 'chart',
-	title: i18n.ts.charts,
-	icon: 'ti ti-chart-line',
-}, {
-	key: 'raw',
-	title: 'Raw',
-	icon: 'ti ti-code',
-}].filter(x => x != null));
-
-definePageMetadata(computed(() => ({
-	title: user ? acct(user) : i18n.ts.userInfo,
-	icon: 'ti ti-info-circle',
-})));
-</script>
-
-<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;
-		}
-
-		> .state {
-			display: flex;
-			gap: 8px;
-			flex-wrap: wrap;
-			margin-top: 4px;
-
-			&:empty {
-				display: none;
-			}
-
-			> .suspended, > .silenced, > .moderator {
-				display: inline-block;
-				border: solid 1px;
-				border-radius: 6px;
-				padding: 2px 6px;
-				font-size: 85%;
-			}
-
-			> .suspended {
-				color: var(--error);
-				border-color: var(--error);
-			}
-
-			> .silenced {
-				color: var(--warn);
-				border-color: var(--warn);
-			}
-
-			> .moderator {
-				color: var(--success);
-				border-color: var(--success);
-			}
-		}
-	}
-}
-
-.cmhjzshm {
-	> .selects {
-		display: flex;
-		margin: 0 0 16px 0;
-	}
-
-	> .charts {
-		> .label {
-			margin-bottom: 12px;
-			font-weight: bold;
-		}
-	}
-}
-</style>
-
-<style lang="scss" module>
-.ip {
-	display: flex;
-
-	> :global(.date) {
-		opacity: 0.7;
-	}
-
-	> :global(.ip) {
-		margin-left: auto;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
deleted file mode 100644
index fdb3167375..0000000000
--- a/packages/client/src/pages/user-list-timeline.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj">
-		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
-		<div class="tl _block">
-			<XTimeline
-				ref="tlEl" :key="listId"
-				class="tl"
-				src="list"
-				:list="listId"
-				:sound="true"
-				@queue="queueUpdated"
-			/>
-		</div>
-	</div>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { computed, watch, inject } from 'vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import { scroll } from '@/scripts/scroll';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-
-const router = useRouter();
-
-const props = defineProps<{
-	listId: string;
-}>();
-
-let list = $ref(null);
-let queue = $ref(0);
-let tlEl = $ref<InstanceType<typeof XTimeline>>();
-let rootEl = $ref<HTMLElement>();
-
-watch(() => props.listId, async () => {
-	list = await os.api('users/lists/show', {
-		listId: props.listId,
-	});
-}, { immediate: true });
-
-function queueUpdated(q) {
-	queue = q;
-}
-
-function top() {
-	scroll(rootEl, { top: 0 });
-}
-
-function settings() {
-	router.push(`/my/lists/${props.listId}`);
-}
-
-async function timetravel() {
-	const { canceled, result: date } = await os.inputDate({
-		title: i18n.ts.date,
-	});
-	if (canceled) return;
-
-	tlEl.timetravel(date);
-}
-
-const headerActions = $computed(() => list ? [{
-	icon: 'fas fa-calendar-alt',
-	text: i18n.ts.jumpToSpecifiedDate,
-	handler: timetravel,
-}, {
-	icon: 'ti ti-settings',
-	text: i18n.ts.settings,
-	handler: settings,
-}] : []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => list ? {
-	title: list.name,
-	icon: 'ti ti-list',
-} : null));
-</script>
-
-<style lang="scss" scoped>
-.eqqrhokj {
-	padding: var(--margin);
-
-	> .new {
-		position: sticky;
-		top: calc(var(--stickyTop, 0px) + 16px);
-		z-index: 1000;
-		width: 100%;
-
-		> button {
-			display: block;
-			margin: var(--margin) auto 0 auto;
-			padding: 8px 16px;
-			border-radius: 32px;
-		}
-	}
-
-	> .tl {
-		background: var(--bg);
-		border-radius: var(--radius);
-		overflow: clip;
-	}
-
-	&.min-width_800px {
-		max-width: 800px;
-		margin: 0 auto;
-	}
-}
-
-@container (min-width: 800px) {
-	.eqqrhokj {
-		max-width: 800px;
-		margin: 0 auto;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/user/clips.vue b/packages/client/src/pages/user/clips.vue
deleted file mode 100644
index 8c71aacb0c..0000000000
--- a/packages/client/src/pages/user/clips.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-<MkSpacer :content-max="700">
-	<div class="pages-user-clips">
-		<MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="list">
-			<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
-				<b>{{ item.name }}</b>
-				<div v-if="item.description" class="description">{{ item.description }}</div>
-			</MkA>
-		</MkPagination>
-	</div>
-</MkSpacer>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'misskey-js';
-import MkPagination from '@/components/MkPagination.vue';
-
-const props = defineProps<{
-	user: misskey.entities.User;
-}>();
-
-const pagination = {
-	endpoint: 'users/clips' as const,
-	limit: 20,
-	params: computed(() => ({
-		userId: props.user.id,
-	})),
-};
-</script>
-
-<style lang="scss" scoped>
-.pages-user-clips {
-	> .list {
-		> .item {
-			display: block;
-			padding: 16px;
-
-			> .description {
-				margin-top: 8px;
-				padding-top: 8px;
-				border-top: solid 0.5px var(--divider);
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/user/follow-list.vue b/packages/client/src/pages/user/follow-list.vue
deleted file mode 100644
index d42acd838f..0000000000
--- a/packages/client/src/pages/user/follow-list.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-<div>
-	<MkPagination v-slot="{items}" ref="list" :pagination="type === 'following' ? followingPagination : followersPagination" class="mk-following-or-followers">
-		<div class="users">
-			<MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/>
-		</div>
-	</MkPagination>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'misskey-js';
-import MkUserInfo from '@/components/MkUserInfo.vue';
-import MkPagination from '@/components/MkPagination.vue';
-
-const props = defineProps<{
-	user: misskey.entities.User;
-	type: 'following' | 'followers';
-}>();
-
-const followingPagination = {
-	endpoint: 'users/following' as const,
-	limit: 20,
-	params: computed(() => ({
-		userId: props.user.id,
-	})),
-};
-
-const followersPagination = {
-	endpoint: 'users/followers' as const,
-	limit: 20,
-	params: computed(() => ({
-		userId: props.user.id,
-	})),
-};
-</script>
-
-<style lang="scss" scoped>
-.mk-following-or-followers {
-	> .users {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-		grid-gap: var(--margin);
-	}
-}
-</style>
diff --git a/packages/client/src/pages/user/followers.vue b/packages/client/src/pages/user/followers.vue
deleted file mode 100644
index 17c2843381..0000000000
--- a/packages/client/src/pages/user/followers.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="1000">
-		<transition name="fade" mode="out-in">
-			<div v-if="user">
-				<XFollowList :user="user" type="followers"/>
-			</div>
-			<MkError v-else-if="error" @retry="fetchUser()"/>
-			<MkLoading v-else/>
-		</transition>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue';
-import * as Acct from 'misskey-js/built/acct';
-import * as misskey from 'misskey-js';
-import XFollowList from './follow-list.vue';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{
-	acct: string;
-}>(), {
-});
-
-let user = $ref<null | misskey.entities.UserDetailed>(null);
-let error = $ref(null);
-
-function fetchUser(): void {
-	if (props.acct == null) return;
-	user = null;
-	os.api('users/show', Acct.parse(props.acct)).then(u => {
-		user = u;
-	}).catch(err => {
-		error = err;
-	});
-}
-
-watch(() => props.acct, fetchUser, {
-	immediate: true,
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => user ? {
-	icon: 'ti ti-user',
-	title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
-	subtitle: i18n.ts.followers,
-	userName: user,
-	avatar: user,
-} : null));
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/client/src/pages/user/following.vue b/packages/client/src/pages/user/following.vue
deleted file mode 100644
index 03892ec03d..0000000000
--- a/packages/client/src/pages/user/following.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :content-max="1000">
-		<transition name="fade" mode="out-in">
-			<div v-if="user">
-				<XFollowList :user="user" type="following"/>
-			</div>
-			<MkError v-else-if="error" @retry="fetchUser()"/>
-			<MkLoading v-else/>
-		</transition>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue';
-import * as Acct from 'misskey-js/built/acct';
-import * as misskey from 'misskey-js';
-import XFollowList from './follow-list.vue';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{
-	acct: string;
-}>(), {
-});
-
-let user = $ref<null | misskey.entities.UserDetailed>(null);
-let error = $ref(null);
-
-function fetchUser(): void {
-	if (props.acct == null) return;
-	user = null;
-	os.api('users/show', Acct.parse(props.acct)).then(u => {
-		user = u;
-	}).catch(err => {
-		error = err;
-	});
-}
-
-watch(() => props.acct, fetchUser, {
-	immediate: true,
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => user ? {
-	icon: 'ti ti-user',
-	title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
-	subtitle: i18n.ts.following,
-	userName: user,
-	avatar: user,
-} : null));
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/client/src/pages/user/gallery.vue b/packages/client/src/pages/user/gallery.vue
deleted file mode 100644
index b80e83fb11..0000000000
--- a/packages/client/src/pages/user/gallery.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-<MkSpacer :content-max="700">
-	<MkPagination v-slot="{items}" :pagination="pagination">
-		<div class="jrnovfpt">
-			<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
-		</div>
-	</MkPagination>
-</MkSpacer>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'misskey-js';
-import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
-import MkPagination from '@/components/MkPagination.vue';
-
-const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
-}>(), {
-});
-
-const pagination = {
-	endpoint: 'users/gallery/posts' as const,
-	limit: 6,
-	params: computed(() => ({
-		userId: props.user.id,
-	})),
-};
-</script>
-
-<style lang="scss" scoped>
-.jrnovfpt {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-	grid-gap: 12px;
-	margin: var(--margin);
-}
-</style>
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
deleted file mode 100644
index 43c1b37e1d..0000000000
--- a/packages/client/src/pages/user/home.vue
+++ /dev/null
@@ -1,530 +0,0 @@
-<template>
-<MkSpacer :content-max="narrow ? 800 : 1100">
-	<div ref="rootEl" v-size="{ max: [500] }" class="ftskorzw" :class="{ wide: !narrow }">
-		<div class="main">
-			<!-- TODO -->
-			<!-- <div class="punished" v-if="user.isSuspended"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> -->
-			<!-- <div class="punished" v-if="user.isSilenced"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
-
-			<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="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="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
-								<span v-if="!user.isAdmin && user.isModerator" :title="i18n.ts.isModerator" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
-								<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
-								<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
-							</div>
-						</div>
-						<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
-						<div v-if="$i" class="actions">
-							<button class="menu _button" @click="menu"><i class="ti ti-dots"></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 :user="user" :nowrap="false" class="name"/>
-						<div class="bottom">
-							<span class="username"><MkAcct :user="user" :detail="true"/></span>
-							<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
-							<span v-if="!user.isAdmin && user.isModerator" :title="i18n.ts.isModerator" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
-							<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
-							<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
-						</div>
-					</div>
-					<div class="description">
-						<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
-						<p v-else class="empty">{{ i18n.ts.noAccountDescription }}</p>
-					</div>
-					<div class="fields system">
-						<dl v-if="user.location" class="field">
-							<dt class="name"><i class="ti ti-map-pin ti-fw"></i> {{ i18n.ts.location }}</dt>
-							<dd class="value">{{ user.location }}</dd>
-						</dl>
-						<dl v-if="user.birthday" class="field">
-							<dt class="name"><i class="ti ti-cake ti-fw"></i> {{ i18n.ts.birthday }}</dt>
-							<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
-						</dl>
-						<dl class="field">
-							<dt class="name"><i class="ti ti-calendar ti-fw"></i> {{ i18n.ts.registeredDate }}</dt>
-							<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
-						</dl>
-					</div>
-					<div v-if="user.fields.length > 0" class="fields">
-						<dl v-for="(field, i) in user.fields" :key="i" class="field">
-							<dt class="name">
-								<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
-							</dt>
-							<dd class="value">
-								<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
-							</dd>
-						</dl>
-					</div>
-					<div class="status">
-						<MkA v-click-anime :to="userPage(user)" :class="{ active: page === 'index' }">
-							<b>{{ number(user.notesCount) }}</b>
-							<span>{{ i18n.ts.notes }}</span>
-						</MkA>
-						<MkA v-click-anime :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
-							<b>{{ number(user.followingCount) }}</b>
-							<span>{{ i18n.ts.following }}</span>
-						</MkA>
-						<MkA v-click-anime :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
-							<b>{{ number(user.followersCount) }}</b>
-							<span>{{ i18n.ts.followers }}</span>
-						</MkA>
-					</div>
-				</div>
-			</div>
-
-			<div class="contents">
-				<div v-if="user.pinnedNotes.length > 0" class="_gap">
-					<XNote v-for="note in user.pinnedNotes" :key="note.id" class="note _block" :note="note" :pinned="true"/>
-				</div>
-				<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
-				<template v-if="narrow">
-					<XPhotos :key="user.id" :user="user"/>
-					<XActivity :key="user.id" :user="user" style="margin-top: var(--margin);"/>
-				</template>
-			</div>
-			<div>
-				<XUserTimeline :user="user"/>
-			</div>
-		</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>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue';
-import calcAge from 's-age';
-import * as misskey from 'misskey-js';
-import XUserTimeline from './index.timeline.vue';
-import XNote from '@/components/MkNote.vue';
-import MkFollowButton from '@/components/MkFollowButton.vue';
-import MkContainer from '@/components/MkContainer.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
-import MkTab from '@/components/MkTab.vue';
-import MkInfo from '@/components/MkInfo.vue';
-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 { useRouter } from '@/router';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-
-const XPhotos = defineAsyncComponent(() => import('./index.photos.vue'));
-const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
-
-const props = withDefaults(defineProps<{
-	user: misskey.entities.UserDetailed;
-}>(), {
-});
-
-const router = useRouter();
-
-let parallaxAnimationId = $ref<null | number>(null);
-let narrow = $ref<null | boolean>(null);
-let rootEl = $ref<null | HTMLElement>(null);
-let bannerEl = $ref<null | HTMLElement>(null);
-
-const style = $computed(() => {
-	if (props.user.bannerUrl == null) return {};
-	return {
-		backgroundImage: `url(${ props.user.bannerUrl })`,
-	};
-});
-
-const age = $computed(() => {
-	return calcAge(props.user.birthday);
-});
-
-function menu(ev) {
-	os.popupMenu(getUserMenu(props.user, router), ev.currentTarget ?? ev.target);
-}
-
-function parallaxLoop() {
-	parallaxAnimationId = window.requestAnimationFrame(parallaxLoop);
-	parallax();
-}
-
-function parallax() {
-	const banner = bannerEl as any;
-	if (banner == null) return;
-
-	const top = getScrollPosition(rootEl);
-
-	if (top < 0) return;
-
-	const z = 1.75; // 奥行き(小さいほど奥)
-	const pos = -(top / z);
-	banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
-}
-
-onMounted(() => {
-	window.requestAnimationFrame(parallaxLoop);
-	narrow = rootEl!.clientWidth < 1000;
-});
-
-onUnmounted(() => {
-	if (parallaxAnimationId) {
-		window.cancelAnimationFrame(parallaxAnimationId);
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.ftskorzw {
-
-	> .main {
-
-		> .punished {
-			font-size: 0.8em;
-			padding: 16px;
-		}
-
-		> .profile {
-
-			> .main {
-				position: relative;
-				overflow: hidden;
-
-				> .banner-container {
-					position: relative;
-					height: 250px;
-					overflow: hidden;
-					background-size: cover;
-					background-position: center;
-
-					> .banner {
-						height: 100%;
-						background-color: #4c5e6d;
-						background-size: cover;
-						background-position: center;
-						box-shadow: 0 0 128px rgba(0, 0, 0, 0.5) inset;
-						will-change: background-position;
-					}
-
-					> .fade {
-						position: absolute;
-						bottom: 0;
-						left: 0;
-						width: 100%;
-						height: 78px;
-						background: linear-gradient(transparent, rgba(#000, 0.7));
-					}
-
-					> .followed {
-						position: absolute;
-						top: 12px;
-						left: 12px;
-						padding: 4px 8px;
-						color: #fff;
-						background: rgba(0, 0, 0, 0.7);
-						font-size: 0.7em;
-						border-radius: 6px;
-					}
-
-					> .actions {
-						position: absolute;
-						top: 12px;
-						right: 12px;
-						-webkit-backdrop-filter: var(--blur, blur(8px));
-						backdrop-filter: var(--blur, blur(8px));
-						background: rgba(0, 0, 0, 0.2);
-						padding: 8px;
-						border-radius: 24px;
-
-						> .menu {
-							vertical-align: bottom;
-							height: 31px;
-							width: 31px;
-							color: #fff;
-							text-shadow: 0 0 8px #000;
-							font-size: 16px;
-						}
-
-						> .koudoku {
-							margin-left: 4px;
-							vertical-align: bottom;
-						}
-					}
-
-					> .title {
-						position: absolute;
-						bottom: 0;
-						left: 0;
-						width: 100%;
-						padding: 0 0 8px 154px;
-						box-sizing: border-box;
-						color: #fff;
-
-						> .name {
-							display: block;
-							margin: 0;
-							line-height: 32px;
-							font-weight: bold;
-							font-size: 1.8em;
-							text-shadow: 0 0 8px #000;
-						}
-
-						> .bottom {
-							> * {
-								display: inline-block;
-								margin-right: 16px;
-								line-height: 20px;
-								opacity: 0.8;
-
-								&.username {
-									font-weight: bold;
-								}
-							}
-						}
-					}
-				}
-
-				> .title {
-					display: none;
-					text-align: center;
-					padding: 50px 8px 16px 8px;
-					font-weight: bold;
-					border-bottom: solid 0.5px var(--divider);
-
-					> .bottom {
-						> * {
-							display: inline-block;
-							margin-right: 8px;
-							opacity: 0.8;
-						}
-					}
-				}
-
-				> .avatar {
-					display: block;
-					position: absolute;
-					top: 170px;
-					left: 16px;
-					z-index: 2;
-					width: 120px;
-					height: 120px;
-					box-shadow: 1px 1px 3px rgba(#000, 0.2);
-				}
-
-				> .description {
-					padding: 24px 24px 24px 154px;
-					font-size: 0.95em;
-
-					> .empty {
-						margin: 0;
-						opacity: 0.5;
-					}
-				}
-
-				> .fields {
-					padding: 24px;
-					font-size: 0.9em;
-					border-top: solid 0.5px var(--divider);
-
-					> .field {
-						display: flex;
-						padding: 0;
-						margin: 0;
-						align-items: center;
-
-						&:not(:last-child) {
-							margin-bottom: 8px;
-						}
-
-						> .name {
-							width: 30%;
-							overflow: hidden;
-							white-space: nowrap;
-							text-overflow: ellipsis;
-							font-weight: bold;
-							text-align: center;
-						}
-
-						> .value {
-							width: 70%;
-							overflow: hidden;
-							white-space: nowrap;
-							text-overflow: ellipsis;
-							margin: 0;
-						}
-					}
-
-					&.system > .field > .name {
-					}
-				}
-
-				> .status {
-					display: flex;
-					padding: 24px;
-					border-top: solid 0.5px var(--divider);
-
-					> a {
-						flex: 1;
-						text-align: center;
-
-						&.active {
-							color: var(--accent);
-						}
-
-						&:hover {
-							text-decoration: none;
-						}
-
-						> b {
-							display: block;
-							line-height: 16px;
-						}
-
-						> span {
-							font-size: 70%;
-						}
-					}
-				}
-			}
-		}
-
-		> .contents {
-			> .content {
-				margin-bottom: var(--margin);
-			}
-		}
-	}
-
-	&.max-width_500px {
-		> .main {
-			> .profile > .main {
-				> .banner-container {
-					height: 140px;
-
-					> .fade {
-						display: none;
-					}
-
-					> .title {
-						display: none;
-					}
-				}
-
-				> .title {
-					display: block;
-				}
-
-				> .avatar {
-					top: 90px;
-					left: 0;
-					right: 0;
-					width: 92px;
-					height: 92px;
-					margin: auto;
-				}
-
-				> .description {
-					padding: 16px;
-					text-align: center;
-				}
-
-				> .fields {
-					padding: 16px;
-				}
-
-				> .status {
-					padding: 16px;
-				}
-			}
-
-			> .contents {
-				> .nav {
-					font-size: 80%;
-				}
-			}
-		}
-	}
-
-	&.wide {
-		display: flex;
-		width: 100%;
-
-		> .main {
-			width: 100%;
-			min-width: 0;
-		}
-
-		> .sub {
-			max-width: 350px;
-			min-width: 350px;
-			margin-left: var(--margin);
-		}
-	}
-}
-
-@container (max-width: 500px) {
-	.ftskorzw {
-		> .main {
-			> .profile > .main {
-				> .banner-container {
-					height: 140px;
-
-					> .fade {
-						display: none;
-					}
-
-					> .title {
-						display: none;
-					}
-				}
-
-				> .title {
-					display: block;
-				}
-
-				> .avatar {
-					top: 90px;
-					left: 0;
-					right: 0;
-					width: 92px;
-					height: 92px;
-					margin: auto;
-				}
-
-				> .description {
-					padding: 16px;
-					text-align: center;
-				}
-
-				> .fields {
-					padding: 16px;
-				}
-
-				> .status {
-					padding: 16px;
-				}
-			}
-
-			> .contents {
-				> .nav {
-					font-size: 80%;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/user/index.activity.vue b/packages/client/src/pages/user/index.activity.vue
deleted file mode 100644
index 523072d2e6..0000000000
--- a/packages/client/src/pages/user/index.activity.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-<MkContainer>
-	<template #header><i class="ti ti-chart-line" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
-	<template #func>
-		<button class="_button" @click="showMenu">
-			<i class="ti ti-dots"></i>
-		</button>
-	</template>
-
-	<div style="padding: 8px;">
-		<MkChart :src="chartSrc" :args="{ user, withoutAll: true }" span="day" :limit="limit" :bar="true" :stacked="true" :detailed="false" :aspect-ratio="5"/>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as misskey from 'misskey-js';
-import MkContainer from '@/components/MkContainer.vue';
-import MkChart from '@/components/MkChart.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = withDefaults(defineProps<{
-	user: misskey.entities.User;
-	limit?: number;
-}>(), {
-	limit: 50,
-});
-
-let chartSrc = $ref('per-user-notes');
-
-function showMenu(ev: MouseEvent) {
-	os.popupMenu([{
-		text: i18n.ts.notes,
-		active: true,
-		action: () => {
-			chartSrc = 'per-user-notes';
-		},
-	}, /*, {
-		text: i18n.ts.following,
-		action: () => {
-			chartSrc = 'per-user-following';
-		}
-	}, {
-		text: i18n.ts.followers,
-		action: () => {
-			chartSrc = 'per-user-followers';
-		}
-	}*/], ev.currentTarget ?? ev.target);
-}
-</script>
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
deleted file mode 100644
index b33979a79d..0000000000
--- a/packages/client/src/pages/user/index.photos.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-<MkContainer :max-height="300" :foldable="true">
-	<template #header><i class="ti ti-photo" style="margin-right: 0.5em;"></i>{{ $ts.images }}</template>
-	<div class="ujigsodd">
-		<MkLoading v-if="fetching"/>
-		<div v-if="!fetching && images.length > 0" class="stream">
-			<MkA
-				v-for="image in images"
-				:key="image.note.id + image.file.id"
-				class="img"
-				:to="notePage(image.note)"
-			>
-				<ImgWithBlurhash :hash="image.file.blurhash" :src="thumbnail(image.file)" :title="image.file.name"/>
-			</MkA>
-		</div>
-		<p v-if="!fetching && images.length == 0" class="empty">{{ $ts.nothing }}</p>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted } from 'vue';
-import * as misskey from 'misskey-js';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import { notePage } from '@/filters/note';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
-import { defaultStore } from '@/store';
-
-const props = defineProps<{
-	user: misskey.entities.UserDetailed;
-}>();
-
-let fetching = $ref(true);
-let images = $ref<{
-	note: misskey.entities.Note;
-	file: misskey.entities.DriveFile;
-}[]>([]);
-
-function thumbnail(image: misskey.entities.DriveFile): string {
-	return defaultStore.state.disableShowingAnimatedImages
-		? getStaticImageUrl(image.thumbnailUrl)
-		: image.thumbnailUrl;
-}
-
-onMounted(() => {
-	const image = [
-		'image/jpeg',
-		'image/webp',
-		'image/avif',
-		'image/png',
-		'image/gif',
-		'image/apng',
-		'image/vnd.mozilla.apng',
-	];
-	os.api('users/notes', {
-		userId: props.user.id,
-		fileType: image,
-		excludeNsfw: defaultStore.state.nsfw !== 'ignore',
-		limit: 10,
-	}).then(notes => {
-		for (const note of notes) {
-			for (const file of note.files) {
-				images.push({
-					note,
-					file,
-				});
-			}
-		}
-		fetching = false;
-	});
-});
-</script>
-
-<style lang="scss" scoped>
-.ujigsodd {
-	padding: 8px;
-
-	> .stream {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-		grid-gap: 6px;
-
-		> .img {
-			height: 128px;
-			border-radius: 6px;
-			overflow: clip;
-		}
-	}
-
-	> .empty {
-		margin: 0;
-		padding: 16px;
-		text-align: center;
-
-		> i {
-			margin-right: 4px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/user/index.timeline.vue b/packages/client/src/pages/user/index.timeline.vue
deleted file mode 100644
index 41983a5ae8..0000000000
--- a/packages/client/src/pages/user/index.timeline.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header>
-		<MkTab v-model="include" :class="$style.tab">
-			<option :value="null">{{ i18n.ts.notes }}</option>
-			<option value="replies">{{ i18n.ts.notesAndReplies }}</option>
-			<option value="files">{{ i18n.ts.withFiles }}</option>
-		</MkTab>
-	</template>
-	<XNotes :no-gap="true" :pagination="pagination"/>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed } from 'vue';
-import * as misskey from 'misskey-js';
-import XNotes from '@/components/MkNotes.vue';
-import MkTab from '@/components/MkTab.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	user: misskey.entities.UserDetailed;
-}>();
-
-const include = ref<string | null>(null);
-
-const pagination = {
-	endpoint: 'users/notes' as const,
-	limit: 10,
-	params: computed(() => ({
-		userId: props.user.id,
-		includeReplies: include.value === 'replies',
-		withFiles: include.value === 'files',
-	})),
-};
-</script>
-
-<style lang="scss" module>
-.tab {
-	margin: calc(var(--margin) / 2) 0;
-	padding: calc(var(--margin) / 2) 0;
-	background: var(--bg);
-}
-</style>
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
deleted file mode 100644
index 6e895cd8d7..0000000000
--- a/packages/client/src/pages/user/index.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
-	<div>
-		<transition name="fade" mode="out-in">
-			<div v-if="user">
-				<XHome v-if="tab === 'home'" :user="user"/>
-				<XReactions v-else-if="tab === 'reactions'" :user="user"/>
-				<XClips v-else-if="tab === 'clips'" :user="user"/>
-				<XPages v-else-if="tab === 'pages'" :user="user"/>
-				<XGallery v-else-if="tab === 'gallery'" :user="user"/>
-			</div>
-			<MkError v-else-if="error" @retry="fetchUser()"/>
-			<MkLoading v-else/>
-		</transition>
-	</div>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, computed, 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 { getScrollPosition } from '@/scripts/scroll';
-import number from '@/filters/number';
-import { userPage, acct as getAcct } from '@/filters/user';
-import * as os from '@/os';
-import { useRouter } from '@/router';
-import { definePageMetadata } from '@/scripts/page-metadata';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-
-const XHome = defineAsyncComponent(() => import('./home.vue'));
-const XReactions = defineAsyncComponent(() => import('./reactions.vue'));
-const XClips = defineAsyncComponent(() => import('./clips.vue'));
-const XPages = defineAsyncComponent(() => import('./pages.vue'));
-const XGallery = defineAsyncComponent(() => import('./gallery.vue'));
-
-const props = withDefaults(defineProps<{
-	acct: string;
-	page?: string;
-}>(), {
-	page: 'home',
-});
-
-const router = useRouter();
-
-let tab = $ref(props.page);
-let user = $ref<null | misskey.entities.UserDetailed>(null);
-let error = $ref(null);
-
-function fetchUser(): void {
-	if (props.acct == null) return;
-	user = null;
-	os.api('users/show', Acct.parse(props.acct)).then(u => {
-		user = u;
-	}).catch(err => {
-		error = err;
-	});
-}
-
-watch(() => props.acct, fetchUser, {
-	immediate: true,
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => user ? [{
-	key: 'home',
-	title: i18n.ts.overview,
-	icon: 'ti ti-home',
-}, ...($i && ($i.id === user.id)) || user.publicReactions ? [{
-	key: 'reactions',
-	title: i18n.ts.reaction,
-	icon: 'ti ti-mood-happy',
-}] : [], {
-	key: 'clips',
-	title: i18n.ts.clips,
-	icon: 'ti ti-paperclip',
-}, {
-	key: 'pages',
-	title: i18n.ts.pages,
-	icon: 'ti ti-news',
-}, {
-	key: 'gallery',
-	title: i18n.ts.gallery,
-	icon: 'ti ti-icons',
-}] : null);
-
-definePageMetadata(computed(() => user ? {
-	icon: 'ti ti-user',
-	title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
-	subtitle: `@${getAcct(user)}`,
-	userName: user,
-	avatar: user,
-	path: `/@${user.username}`,
-	share: {
-		title: user.name,
-	},
-} : null));
-</script>
-
-<style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
-	transition: opacity 0.125s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-</style>
diff --git a/packages/client/src/pages/user/pages.vue b/packages/client/src/pages/user/pages.vue
deleted file mode 100644
index 7833d6c42c..0000000000
--- a/packages/client/src/pages/user/pages.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-<MkSpacer :content-max="700">
-	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-		<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
-	</MkPagination>
-</MkSpacer>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'misskey-js';
-import MkPagePreview from '@/components/MkPagePreview.vue';
-import MkPagination from '@/components/MkPagination.vue';
-
-const props = defineProps<{
-	user: misskey.entities.User;
-}>();
-
-const pagination = {
-	endpoint: 'users/pages' as const,
-	limit: 20,
-	params: computed(() => ({
-		userId: props.user.id,
-	})),
-};
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
deleted file mode 100644
index ab3df34301..0000000000
--- a/packages/client/src/pages/user/reactions.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-<MkSpacer :content-max="700">
-	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
-		<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb">
-			<div class="header">
-				<MkAvatar class="avatar" :user="user"/>
-				<MkReactionIcon class="reaction" :reaction="item.type" :custom-emojis="item.note.emojis" :no-style="true"/>
-				<MkTime :time="item.createdAt" class="createdAt"/>
-			</div>
-			<MkNote :key="item.id" :note="item.note"/>
-		</div>
-	</MkPagination>
-</MkSpacer>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import * as misskey from 'misskey-js';
-import MkPagination from '@/components/MkPagination.vue';
-import MkNote from '@/components/MkNote.vue';
-import MkReactionIcon from '@/components/MkReactionIcon.vue';
-
-const props = defineProps<{
-	user: misskey.entities.User;
-}>();
-
-const pagination = {
-	endpoint: 'users/reactions' as const,
-	limit: 20,
-	params: computed(() => ({
-		userId: props.user.id,
-	})),
-};
-</script>
-
-<style lang="scss" scoped>
-.afdcfbfb {
-	> .header {
-		display: flex;
-		align-items: center;
-		padding: 8px 16px;
-		margin-bottom: 8px;
-		border-bottom: solid 2px var(--divider);
-
-		> .avatar {
-			width: 24px;
-			height: 24px;
-			margin-right: 8px;
-		}
-
-		> .reaction {
-			width: 32px;
-			height: 32px;
-		}
-
-		> .createdAt {
-			margin-left: auto;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
deleted file mode 100644
index bfa54d39f2..0000000000
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ /dev/null
@@ -1,309 +0,0 @@
-<template>
-<div v-if="meta" class="rsqzvsbo">
-	<div class="top">
-		<MkFeaturedPhotos class="bg"/>
-		<XTimeline class="tl"/>
-		<div class="shape1"></div>
-		<div class="shape2"></div>
-		<img src="/client-assets/misskey.svg" class="misskey"/>
-		<div class="emojis">
-			<MkEmoji :normal="true" :no-style="true" emoji="👍"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="❤"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="😆"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="🎉"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
-		</div>
-		<div class="main">
-			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
-			<button class="_button _acrylic menu" @click="showMenu"><i class="ti ti-dots"></i></button>
-			<div class="fg">
-				<h1>
-					<!-- 背景色によってはロゴが見えなくなるのでとりあえず無効に -->
-					<!-- <img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span> -->
-					<span class="text">{{ instanceName }}</span>
-				</h1>
-				<div class="about">
-					<!-- eslint-disable-next-line vue/no-v-html -->
-					<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
-				</div>
-				<div class="action">
-					<MkButton inline rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.signup }}</MkButton>
-					<MkButton inline rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton>
-				</div>
-			</div>
-		</div>
-		<div v-if="instances" class="federation">
-			<MarqueeText :duration="40">
-				<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
-					<!--<MkInstanceCardMini :instance="instance"/>-->
-					<img v-if="instance.iconUrl" class="icon" :src="instance.iconUrl" alt=""/>
-					<span class="name _monospace">{{ instance.host }}</span>
-				</MkA>
-			</MarqueeText>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import { toUnicode } from 'punycode/';
-import XTimeline from './welcome.timeline.vue';
-import MarqueeText from '@/components/MkMarquee.vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
-import MkButton from '@/components/MkButton.vue';
-import XNote from '@/components/MkNote.vue';
-import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
-import { host, instanceName } from '@/config';
-import * as os from '@/os';
-import number from '@/filters/number';
-import { i18n } from '@/i18n';
-
-let meta = $ref();
-let stats = $ref();
-let tags = $ref();
-let onlineUsersCount = $ref();
-let instances = $ref();
-
-os.api('meta', { detail: true }).then(_meta => {
-	meta = _meta;
-});
-
-os.api('stats').then(_stats => {
-	stats = _stats;
-});
-
-os.api('get-online-users-count').then(res => {
-	onlineUsersCount = res.count;
-});
-
-os.api('hashtags/list', {
-	sort: '+mentionedLocalUsers',
-	limit: 8,
-}).then(_tags => {
-	tags = _tags;
-});
-
-os.api('federation/instances', {
-	sort: '+pubSub',
-	limit: 20,
-}).then(_instances => {
-	instances = _instances;
-});
-
-function signin() {
-	os.popup(XSigninDialog, {
-		autoSet: true,
-	}, {}, 'closed');
-}
-
-function signup() {
-	os.popup(XSignupDialog, {
-		autoSet: true,
-	}, {}, 'closed');
-}
-
-function showMenu(ev) {
-	os.popupMenu([{
-		text: i18n.ts.instanceInfo,
-		icon: 'ti ti-info-circle',
-		action: () => {
-			os.pageWindow('/about');
-		},
-	}, {
-		text: i18n.ts.aboutMisskey,
-		icon: 'ti ti-info-circle',
-		action: () => {
-			os.pageWindow('/about-misskey');
-		},
-	}, null, {
-		text: i18n.ts.help,
-		icon: 'ti ti-question-circle',
-		action: () => {
-			window.open('https://misskey-hub.net/help.md', '_blank');
-		},
-	}], ev.currentTarget ?? ev.target);
-}
-</script>
-
-<style lang="scss" scoped>
-.rsqzvsbo {
-	> .top {
-		display: flex;
-		text-align: center;
-		min-height: 100vh;
-		box-sizing: border-box;
-		padding: 16px;
-
-		> .bg {
-			position: absolute;
-			top: 0;
-			right: 0;
-			width: 80%; // 100%からshapeの幅を引いている
-			height: 100%;
-		}
-
-		> .tl {
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			right: 64px;
-			margin: auto;
-			width: 500px;
-			height: calc(100% - 128px);
-			overflow: hidden;
-			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
-			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
-
-			@media (max-width: 1200px) {
-				display: none;
-			}
-		}
-
-		> .shape1 {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			background: var(--accent);
-			clip-path: polygon(0% 0%, 45% 0%, 20% 100%, 0% 100%);
-		}
-		> .shape2 {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			background: var(--accent);
-			clip-path: polygon(0% 0%, 25% 0%, 35% 100%, 0% 100%);
-			opacity: 0.5;
-		}
-
-		> .misskey {
-			position: absolute;
-			top: 42px;
-			left: 42px;
-			width: 140px;
-
-			@media (max-width: 450px) {
-				width: 130px;
-			}
-		}
-
-		> .emojis {
-			position: absolute;
-			bottom: 32px;
-			left: 35px;
-
-			> * {
-				margin-right: 8px;
-			}
-
-			@media (max-width: 1200px) {
-				display: none;
-			}
-		}
-
-		> .main {
-			position: relative;
-			width: min(480px, 100%);
-			margin: auto auto auto 128px;
-			background: var(--panel);
-			border-radius: var(--radius);
-			box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
-
-			@media (max-width: 1200px) {
-				margin: auto;
-			}
-
-			> .icon {
-				width: 85px;
-				margin-top: -47px;
-				border-radius: 100%;
-				vertical-align: bottom;
-			}
-
-			> .menu {
-				position: absolute;
-				top: 16px;
-				right: 16px;
-				width: 32px;
-				height: 32px;
-				border-radius: 8px;
-				font-size: 18px;
-			}
-
-			> .fg {
-				position: relative;
-				z-index: 1;
-
-				> h1 {
-					display: block;
-					margin: 0;
-					padding: 16px 32px 24px 32px;
-					font-size: 1.4em;
-
-					> .logo {
-						vertical-align: bottom;
-						max-height: 120px;
-						max-width: min(100%, 300px);
-					}
-				}
-
-				> .about {
-					padding: 0 32px;
-				}
-
-				> .action {
-					padding: 32px;
-
-					> * {
-						line-height: 28px;
-					}
-				}
-			}
-		}
-
-		> .federation {
-			position: absolute;
-			bottom: 16px;
-			left: 0;
-			right: 0;
-			margin: auto;
-			background: var(--acrylicPanel);
-			-webkit-backdrop-filter: var(--blur, blur(15px));
-			backdrop-filter: var(--blur, blur(15px));
-			border-radius: 999px;
-			overflow: clip;
-			width: 800px;
-			padding: 8px 0;
-
-			@media (max-width: 900px) {
-				display: none;
-			}
-		}
-	}
-}
-</style>
-
-<style lang="scss" module>
-.federationInstance {
-	display: inline-flex;
-	align-items: center;
-	vertical-align: bottom;
-	padding: 6px 12px 6px 6px;
-	margin: 0 10px 0 0;
-	background: var(--panel);
-	border-radius: 999px;
-
-	> :global(.icon) {
-		display: inline-block;
-		width: 20px;
-		height: 20px;
-		margin-right: 5px;
-		border-radius: 999px;
-	}
-}
-</style>
diff --git a/packages/client/src/pages/welcome.entrance.b.vue b/packages/client/src/pages/welcome.entrance.b.vue
deleted file mode 100644
index 8230adaf1f..0000000000
--- a/packages/client/src/pages/welcome.entrance.b.vue
+++ /dev/null
@@ -1,237 +0,0 @@
-<template>
-<div v-if="meta" class="rsqzvsbo">
-	<div class="top">
-		<MkFeaturedPhotos class="bg"/>
-		<XTimeline class="tl"/>
-		<div class="shape"></div>
-		<div class="main">
-			<h1>
-				<img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
-			</h1>
-			<div class="about">
-				<!-- eslint-disable-next-line vue/no-v-html -->
-				<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
-			</div>
-			<div class="action">
-				<MkButton class="signup" inline gradate @click="signup()">{{ $ts.signup }}</MkButton>
-				<MkButton class="signin" inline @click="signin()">{{ $ts.login }}</MkButton>
-			</div>
-			<div v-if="onlineUsersCount && stats" class="status">
-				<div>
-					<I18n :src="$ts.nUsers" text-tag="span" class="users">
-						<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
-					</I18n>
-					<I18n :src="$ts.nNotes" text-tag="span" class="notes">
-						<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
-					</I18n>
-				</div>
-				<I18n :src="$ts.onlineUsersCount" text-tag="span" class="online">
-					<template #n><b>{{ onlineUsersCount }}</b></template>
-				</I18n>
-			</div>
-		</div>
-		<img src="/client-assets/misskey.svg" class="misskey"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { toUnicode } from 'punycode/';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
-import MkButton from '@/components/MkButton.vue';
-import XNote from '@/components/MkNote.vue';
-import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
-import XTimeline from './welcome.timeline.vue';
-import { host, instanceName } from '@/config';
-import * as os from '@/os';
-import number from '@/filters/number';
-
-export default defineComponent({
-	components: {
-		MkButton,
-		XNote,
-		XTimeline,
-		MkFeaturedPhotos,
-	},
-
-	data() {
-		return {
-			host: toUnicode(host),
-			instanceName,
-			meta: null,
-			stats: null,
-			tags: [],
-			onlineUsersCount: null,
-		};
-	},
-
-	created() {
-		os.api('meta', { detail: true }).then(meta => {
-			this.meta = meta;
-		});
-
-		os.api('stats').then(stats => {
-			this.stats = stats;
-		});
-
-		os.api('get-online-users-count').then(res => {
-			this.onlineUsersCount = res.count;
-		});
-
-		os.api('hashtags/list', {
-			sort: '+mentionedLocalUsers',
-			limit: 8,
-		}).then(tags => {
-			this.tags = tags;
-		});
-	},
-
-	methods: {
-		signin() {
-			os.popup(XSigninDialog, {
-				autoSet: true,
-			}, {}, 'closed');
-		},
-
-		signup() {
-			os.popup(XSignupDialog, {
-				autoSet: true,
-			}, {}, 'closed');
-		},
-
-		showMenu(ev) {
-			os.popupMenu([{
-				text: this.$t('aboutX', { x: instanceName }),
-				icon: 'ti ti-info-circle',
-				action: () => {
-					os.pageWindow('/about');
-				},
-			}, {
-				text: this.$ts.aboutMisskey,
-				icon: 'ti ti-info-circle',
-				action: () => {
-					os.pageWindow('/about-misskey');
-				},
-			}, null, {
-				text: this.$ts.help,
-				icon: 'ti ti-question-circle',
-				action: () => {
-					window.open(`https://misskey-hub.net/help.md`, '_blank');
-				},
-			}], ev.currentTarget ?? ev.target);
-		},
-
-		number,
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.rsqzvsbo {
-	> .top {
-		min-height: 100vh;
-		box-sizing: border-box;
-
-		> .bg {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-		}
-
-		> .tl {
-			position: absolute;
-			top: 0;
-			bottom: 0;
-			right: 64px;
-			margin: auto;
-			width: 500px;
-			height: calc(100% - 128px);
-			overflow: hidden;
-			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
-			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
-		}
-
-		> .shape {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			background: var(--accent);
-			clip-path: polygon(0% 0%, 40% 0%, 22% 100%, 0% 100%);
-		}
-
-		> .misskey {
-			position: absolute;
-			bottom: 64px;
-			left: 64px;
-			width: 160px;
-		}
-
-		> .main {
-			position: relative;
-			width: min(450px, 100%);
-			padding: 64px;
-			color: #fff;
-			font-size: 1.1em;
-
-			@media (max-width: 1200px) {
-				margin: auto;
-			}
-
-			> h1 {
-				display: block;
-				margin: 0 0 32px 0;
-				padding: 0;
-
-				> .logo {
-					vertical-align: bottom;
-					max-height: 100px;
-				}
-			}
-
-			> .about {
-				padding: 0;
-			}
-
-			> .action {
-				margin: 32px 0;
-
-				> * {
-					line-height: 32px;
-				}
-
-				> .signup {
-					background: var(--panel);
-					color: var(--fg);
-				}
-
-				> .signin {
-					background: var(--accent);
-					color: inherit;
-				}
-			}
-
-			> .status {
-				margin: 32px 0;
-				border-top: solid 1px rgba(255, 255, 255, 0.5);
-				font-size: 90%;
-
-				> div {
-					padding: 16px 0;
-
-					> span:not(:last-child) {
-						padding-right: 1em;
-						margin-right: 1em;
-						border-right: solid 1px rgba(255, 255, 255, 0.5);
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/welcome.entrance.c.vue b/packages/client/src/pages/welcome.entrance.c.vue
deleted file mode 100644
index d2d07bb1f0..0000000000
--- a/packages/client/src/pages/welcome.entrance.c.vue
+++ /dev/null
@@ -1,306 +0,0 @@
-<template>
-<div v-if="meta" class="rsqzvsbo">
-	<div class="top">
-		<MkFeaturedPhotos class="bg"/>
-		<div class="fade"></div>
-		<div class="emojis">
-			<MkEmoji :normal="true" :no-style="true" emoji="👍"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="❤"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="😆"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="🎉"/>
-			<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
-		</div>
-		<div class="main">
-			<img src="/client-assets/misskey.svg" class="misskey"/>
-			<div class="form _panel">
-				<div class="bg">
-					<div class="fade"></div>
-				</div>
-				<div class="fg">
-					<h1>
-						<img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
-					</h1>
-					<div class="about">
-						<!-- eslint-disable-next-line vue/no-v-html -->
-						<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
-					</div>
-					<div class="action">
-						<MkButton inline gradate @click="signup()">{{ $ts.signup }}</MkButton>
-						<MkButton inline @click="signin()">{{ $ts.login }}</MkButton>
-					</div>
-					<div v-if="onlineUsersCount && stats" class="status">
-						<div>
-							<I18n :src="$ts.nUsers" text-tag="span" class="users">
-								<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
-							</I18n>
-							<I18n :src="$ts.nNotes" text-tag="span" class="notes">
-								<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
-							</I18n>
-						</div>
-						<I18n :src="$ts.onlineUsersCount" text-tag="span" class="online">
-							<template #n><b>{{ onlineUsersCount }}</b></template>
-						</I18n>
-					</div>
-					<button class="_button _acrylic menu" @click="showMenu"><i class="ti ti-dots"></i></button>
-				</div>
-			</div>
-			<nav class="nav">
-				<MkA to="/announcements">{{ $ts.announcements }}</MkA>
-				<MkA to="/explore">{{ $ts.explore }}</MkA>
-				<MkA to="/channels">{{ $ts.channel }}</MkA>
-				<MkA to="/featured">{{ $ts.featured }}</MkA>
-			</nav>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { toUnicode } from 'punycode/';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
-import MkButton from '@/components/MkButton.vue';
-import XNote from '@/components/MkNote.vue';
-import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
-import XTimeline from './welcome.timeline.vue';
-import { host, instanceName } from '@/config';
-import * as os from '@/os';
-import number from '@/filters/number';
-
-export default defineComponent({
-	components: {
-		MkButton,
-		XNote,
-		MkFeaturedPhotos,
-		XTimeline,
-	},
-
-	data() {
-		return {
-			host: toUnicode(host),
-			instanceName,
-			meta: null,
-			stats: null,
-			tags: [],
-			onlineUsersCount: null,
-		};
-	},
-
-	created() {
-		os.api('meta', { detail: true }).then(meta => {
-			this.meta = meta;
-		});
-
-		os.api('stats').then(stats => {
-			this.stats = stats;
-		});
-
-		os.api('get-online-users-count').then(res => {
-			this.onlineUsersCount = res.count;
-		});
-
-		os.api('hashtags/list', {
-			sort: '+mentionedLocalUsers',
-			limit: 8,
-		}).then(tags => {
-			this.tags = tags;
-		});
-	},
-
-	methods: {
-		signin() {
-			os.popup(XSigninDialog, {
-				autoSet: true,
-			}, {}, 'closed');
-		},
-
-		signup() {
-			os.popup(XSignupDialog, {
-				autoSet: true,
-			}, {}, 'closed');
-		},
-
-		showMenu(ev) {
-			os.popupMenu([{
-				text: this.$t('aboutX', { x: instanceName }),
-				icon: 'ti ti-info-circle',
-				action: () => {
-					os.pageWindow('/about');
-				},
-			}, {
-				text: this.$ts.aboutMisskey,
-				icon: 'ti ti-info-circle',
-				action: () => {
-					os.pageWindow('/about-misskey');
-				},
-			}, null, {
-				text: this.$ts.help,
-				icon: 'ti ti-question-circle',
-				action: () => {
-					window.open(`https://misskey-hub.net/help.md`, '_blank');
-				},
-			}], ev.currentTarget ?? ev.target);
-		},
-
-		number,
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.rsqzvsbo {
-	> .top {
-		display: flex;
-		text-align: center;
-		min-height: 100vh;
-		box-sizing: border-box;
-		padding: 16px;
-
-		> .bg {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-		}
-
-		> .fade {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			background: rgba(0, 0, 0, 0.25);
-		}
-
-		> .emojis {
-			position: absolute;
-			bottom: 32px;
-			left: 35px;
-
-			> * {
-				margin-right: 8px;
-			}
-
-			@media (max-width: 1200px) {
-				display: none;
-			}
-		}
-
-		> .main {
-			position: relative;
-			width: min(460px, 100%);
-			margin: auto;
-
-			> .misskey {
-				width: 150px;
-				margin-bottom: 16px;
-
-				@media (max-width: 450px) {
-					width: 130px;
-				}
-			}
-
-			> .form {
-				position: relative;
-				box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
-
-				> .bg {
-					position: absolute;
-					top: 0;
-					left: 0;
-					width: 100%;
-					height: 128px;
-					background-position: center;
-					background-size: cover;
-					opacity: 0.75;
-
-					> .fade {
-						position: absolute;
-						bottom: 0;
-						left: 0;
-						width: 100%;
-						height: 128px;
-						background: linear-gradient(0deg, var(--panel), var(--X15));
-					}
-				}
-
-				> .fg {
-					position: relative;
-					z-index: 1;
-
-					> h1 {
-						display: block;
-						margin: 0;
-						padding: 32px 32px 24px 32px;
-
-						> .logo {
-							vertical-align: bottom;
-							max-height: 120px;
-						}
-					}
-
-					> .about {
-						padding: 0 32px;
-					}
-
-					> .action {
-						padding: 32px;
-
-						> * {
-							line-height: 28px;
-						}
-					}
-
-					> .status {
-						border-top: solid 0.5px var(--divider);
-						padding: 32px;
-						font-size: 90%;
-
-						> div {
-							> span:not(:last-child) {
-								padding-right: 1em;
-								margin-right: 1em;
-								border-right: solid 0.5px var(--divider);
-							}
-						}
-
-						> .online {
-							::v-deep(b) {
-								color: #41b781;
-							}
-
-							::v-deep(span) {
-								opacity: 0.7;
-							}
-						}
-					}
-
-					> .menu {
-						position: absolute;
-						top: 16px;
-						right: 16px;
-						width: 32px;
-						height: 32px;
-						border-radius: 8px;
-					}
-				}
-			}
-
-			> .nav {
-				position: relative;
-				z-index: 2;
-				margin-top: 20px;
-				color: #fff;
-				text-shadow: 0 0 8px black;
-				font-size: 0.9em;
-
-				> *:not(:last-child) {
-					margin-right: 1.5em;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/welcome.setup.vue b/packages/client/src/pages/welcome.setup.vue
deleted file mode 100644
index 2729d30d4b..0000000000
--- a/packages/client/src/pages/welcome.setup.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-<form class="mk-setup" @submit.prevent="submit()">
-	<h1>Welcome to Misskey!</h1>
-	<div class="_formRoot">
-		<p>{{ $ts.intro }}</p>
-		<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-admin-username class="_formBlock">
-			<template #label>{{ $ts.username }}</template>
-			<template #prefix>@</template>
-			<template #suffix>@{{ host }}</template>
-		</MkInput>
-		<MkInput v-model="password" type="password" data-cy-admin-password class="_formBlock">
-			<template #label>{{ $ts.password }}</template>
-			<template #prefix><i class="ti ti-lock"></i></template>
-		</MkInput>
-		<div class="bottom _formBlock">
-			<MkButton gradate type="submit" :disabled="submitting" data-cy-admin-ok>
-				{{ submitting ? $ts.processing : $ts.done }}<MkEllipsis v-if="submitting"/>
-			</MkButton>
-		</div>
-	</div>
-</form>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/form/input.vue';
-import { host } from '@/config';
-import * as os from '@/os';
-import { login } from '@/account';
-import { i18n } from '@/i18n';
-
-let username = $ref('');
-let password = $ref('');
-let submitting = $ref(false);
-
-function submit() {
-	if (submitting) return;
-	submitting = true;
-
-	os.api('admin/accounts/create', {
-		username: username,
-		password: password,
-	}).then(res => {
-		return login(res.token);
-	}).catch(() => {
-		submitting = false;
-
-		os.alert({
-			type: 'error',
-			text: i18n.ts.somethingHappened,
-		});
-	});
-}
-</script>
-
-<style lang="scss" scoped>
-.mk-setup {
-	border-radius: var(--radius);
-	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-	overflow: hidden;
-	max-width: 500px;
-	margin: 32px auto;
-
-	> h1 {
-		margin: 0;
-		font-size: 1.5em;
-		text-align: center;
-		padding: 32px;
-		background: var(--accent);
-		color: #fff;
-	}
-
-	> div {
-		padding: 32px;
-		background: var(--panel);
-
-		> p {
-			margin-top: 0;
-		}
-
-		> .bottom {
-			> * {
-				margin: 0 auto;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/welcome.timeline.vue b/packages/client/src/pages/welcome.timeline.vue
deleted file mode 100644
index d6a88540d1..0000000000
--- a/packages/client/src/pages/welcome.timeline.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-<div class="civpbkhh">
-	<div ref="scroll" class="scrollbox" v-bind:class="{ scroll: isScrolling }">
-		<div v-for="note in notes" class="note">
-			<div class="content _panel">
-				<div class="body">
-					<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
-					<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
-					<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
-				</div>
-				<div v-if="note.files.length > 0" class="richcontent">
-					<XMediaList :media-list="note.files"/>
-				</div>
-				<div v-if="note.poll">
-					<XPoll :note="note" :readOnly="true"/>
-				</div>
-			</div>
-			<XReactionsViewer ref="reactionsViewer" :note="note"/>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import XReactionsViewer from '@/components/MkReactionsViewer.vue';
-import XMediaList from '@/components/MkMediaList.vue';
-import XPoll from '@/components/MkPoll.vue';
-import * as os from '@/os';
-
-export default defineComponent({
-	components: {
-		XReactionsViewer,
-		XMediaList,
-		XPoll,
-	},
-
-	data() {
-		return {
-			notes: [],
-			isScrolling: false,
-		};
-	},
-
-	created() {
-		os.api('notes/featured').then(notes => {
-			this.notes = notes;
-		});
-	},
-
-	updated() {
-		if (this.$refs.scroll.clientHeight > window.innerHeight) {
-			this.isScrolling = true;
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-@keyframes scroll {
-	0% {
-		transform: translate3d(0, 0, 0);
-	}
-	5% {
-		transform: translate3d(0, 0, 0);
-	}
-	75% {
-		transform: translate3d(0, calc(-100% + 90vh), 0);
-	}
-	90% {
-		transform: translate3d(0, calc(-100% + 90vh), 0);
-	}
-}
-
-.civpbkhh {
-	text-align: right;
-
-	> .scrollbox {
-		&.scroll {
-			animation: scroll 45s linear infinite;
-		}
-
-		> .note {
-			margin: 16px 0 16px auto;
-
-			> .content {
-				padding: 16px;
-				margin: 0 0 0 auto;
-				max-width: max-content;
-				border-radius: 16px;
-
-				> .richcontent {
-					min-width: 250px;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/welcome.vue b/packages/client/src/pages/welcome.vue
deleted file mode 100644
index a1c3fc2abb..0000000000
--- a/packages/client/src/pages/welcome.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-<div v-if="meta">
-	<XSetup v-if="meta.requireSetup"/>
-	<XEntrance v-else/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import XSetup from './welcome.setup.vue';
-import XEntrance from './welcome.entrance.a.vue';
-import { instanceName } from '@/config';
-import * as os from '@/os';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-let meta = $ref(null);
-
-os.api('meta', { detail: true }).then(res => {
-	meta = res;
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata(computed(() => ({
-	title: instanceName,
-	icon: null,
-})));
-</script>
diff --git a/packages/client/src/pizzax.ts b/packages/client/src/pizzax.ts
deleted file mode 100644
index 642e1f4f7f..0000000000
--- a/packages/client/src/pizzax.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-// PIZZAX --- A lightweight store
-
-import { onUnmounted, Ref, ref, watch } from 'vue';
-import { $i } from './account';
-import { api } from './os';
-import { stream } from './stream';
-
-type StateDef = Record<string, {
-	where: 'account' | 'device' | 'deviceAccount';
-	default: any;
-}>;
-
-type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
-
-const connection = $i && stream.useChannel('main');
-
-export class Storage<T extends StateDef> {
-	public readonly key: string;
-	public readonly keyForLocalStorage: string;
-
-	public readonly def: T;
-
-	// TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487
-	public readonly state: { [K in keyof T]: T[K]['default'] };
-	public readonly reactiveState: { [K in keyof T]: Ref<T[K]['default']> };
-
-	constructor(key: string, def: T) {
-		this.key = key;
-		this.keyForLocalStorage = 'pizzax::' + key;
-		this.def = def;
-
-		// TODO: indexedDBにする
-		const deviceState = JSON.parse(localStorage.getItem(this.keyForLocalStorage) || '{}');
-		const deviceAccountState = $i ? JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::' + $i.id) || '{}') : {};
-		const registryCache = $i ? JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}') : {};
-
-		const state = {};
-		const reactiveState = {};
-		for (const [k, v] of Object.entries(def)) {
-			if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
-				state[k] = deviceState[k];
-			} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) {
-				state[k] = registryCache[k];
-			} else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
-				state[k] = deviceAccountState[k];
-			} else {
-				state[k] = v.default;
-				if (_DEV_) console.log('Use default value', k, v.default);
-			}
-		}
-		for (const [k, v] of Object.entries(state)) {
-			reactiveState[k] = ref(v);
-		}
-		this.state = state as any;
-		this.reactiveState = reactiveState as any;
-	
-		if ($i) {
-			// なぜかsetTimeoutしないとapi関数内でエラーになる(おそらく循環参照してることに原因がありそう)
-			window.setTimeout(() => {
-				api('i/registry/get-all', { scope: ['client', this.key] }).then(kvs => {
-					const cache = {};
-					for (const [k, v] of Object.entries(def)) {
-						if (v.where === 'account') {
-							if (Object.prototype.hasOwnProperty.call(kvs, k)) {
-								state[k] = kvs[k];
-								reactiveState[k].value = kvs[k];
-								cache[k] = kvs[k];
-							} else {
-								state[k] = v.default;
-								reactiveState[k].value = v.default;
-							}
-						}
-					}
-					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
-				});
-			}, 1);
-			// streamingのuser storage updateイベントを監視して更新
-			connection?.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
-				if (scope.length !== 2 || scope[0] !== 'client' || scope[1] !== this.key || this.state[key] === value) return;
-
-				this.state[key] = value;
-				this.reactiveState[key].value = value;
-
-				const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
-				if (cache[key] !== value) {
-					cache[key] = value;
-					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
-				}
-			});
-		}
-	}
-
-	public set<K extends keyof T>(key: K, value: T[K]['default']): void {
-		if (_DEV_) console.log('set', key, value);
-
-		this.state[key] = value;
-		this.reactiveState[key].value = value;
-
-		switch (this.def[key].where) {
-			case 'device': {
-				const deviceState = JSON.parse(localStorage.getItem(this.keyForLocalStorage) || '{}');
-				deviceState[key] = value;
-				localStorage.setItem(this.keyForLocalStorage, JSON.stringify(deviceState));
-				break;
-			}
-			case 'deviceAccount': {
-				if ($i == null) break;
-				const deviceAccountState = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::' + $i.id) || '{}');
-				deviceAccountState[key] = value;
-				localStorage.setItem(this.keyForLocalStorage + '::' + $i.id, JSON.stringify(deviceAccountState));
-				break;
-			}
-			case 'account': {
-				if ($i == null) break;
-				const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
-				cache[key] = value;
-				localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
-				api('i/registry/set', {
-					scope: ['client', this.key],
-					key: key,
-					value: value,
-				});
-				break;
-			}
-		}
-	}
-
-	public push<K extends keyof T>(key: K, value: ArrayElement<T[K]['default']>): void {
-		const currentState = this.state[key];
-		this.set(key, [...currentState, value]);
-	}
-
-	public reset(key: keyof T) {
-		this.set(key, this.def[key].default);
-	}
-
-	/**
-	 * 特定のキーの、簡易的なgetter/setterを作ります
-	 * 主にvue場で設定コントロールのmodelとして使う用
-	 */
-	public makeGetterSetter<K extends keyof T>(key: K, getter?: (v: T[K]) => unknown, setter?: (v: unknown) => T[K]) {
-		const valueRef = ref(this.state[key]);
-
-		const stop = watch(this.reactiveState[key], val => {
-			valueRef.value = val;
-		});
-
-		// NOTE: vueコンポーネント内で呼ばれない限りは、onUnmounted は無意味なのでメモリリークする
-		onUnmounted(() => {
-			stop();
-		});
-
-		// TODO: VueのcustomRef使うと良い感じになるかも
-		return {
-			get: () => {
-				if (getter) {
-					return getter(valueRef.value);
-				} else {
-					return valueRef.value;
-				}
-			},
-			set: (value: unknown) => {
-				const val = setter ? setter(value) : value;
-				this.set(key, val);
-				valueRef.value = val;
-			},
-		};
-	}
-}
diff --git a/packages/client/src/plugin.ts b/packages/client/src/plugin.ts
deleted file mode 100644
index 3a00cd0455..0000000000
--- a/packages/client/src/plugin.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { AiScript, utils, values } from '@syuilo/aiscript';
-import { deserialize } from '@syuilo/aiscript/built/serializer';
-import { jsToVal } from '@syuilo/aiscript/built/interpreter/util';
-import { createAiScriptEnv } from '@/scripts/aiscript/api';
-import { inputText } from '@/os';
-import { noteActions, notePostInterruptors, noteViewInterruptors, postFormActions, userActions } from '@/store';
-
-const pluginContexts = new Map<string, AiScript>();
-
-export function install(plugin) {
-	console.info('Plugin installed:', plugin.name, 'v' + plugin.version);
-
-	const aiscript = new AiScript(createPluginEnv({
-		plugin: plugin,
-		storageKey: 'plugins:' + plugin.id,
-	}), {
-		in: (q) => {
-			return new Promise(ok => {
-				inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					ok(a);
-				});
-			});
-		},
-		out: (value) => {
-			console.log(value);
-		},
-		log: (type, params) => {
-		},
-	});
-
-	initPlugin({ plugin, aiscript });
-
-	aiscript.exec(deserialize(plugin.ast));
-}
-
-function createPluginEnv(opts) {
-	const config = new Map();
-	for (const [k, v] of Object.entries(opts.plugin.config || {})) {
-		config.set(k, jsToVal(typeof opts.plugin.configData[k] !== 'undefined' ? opts.plugin.configData[k] : v.default));
-	}
-
-	return {
-		...createAiScriptEnv({ ...opts, token: opts.plugin.token }),
-		//#region Deprecated
-		'Mk:register_post_form_action': values.FN_NATIVE(([title, handler]) => {
-			registerPostFormAction({ pluginId: opts.plugin.id, title: title.value, handler });
-		}),
-		'Mk:register_user_action': values.FN_NATIVE(([title, handler]) => {
-			registerUserAction({ pluginId: opts.plugin.id, title: title.value, handler });
-		}),
-		'Mk:register_note_action': values.FN_NATIVE(([title, handler]) => {
-			registerNoteAction({ pluginId: opts.plugin.id, title: title.value, handler });
-		}),
-		//#endregion
-		'Plugin:register_post_form_action': values.FN_NATIVE(([title, handler]) => {
-			registerPostFormAction({ pluginId: opts.plugin.id, title: title.value, handler });
-		}),
-		'Plugin:register_user_action': values.FN_NATIVE(([title, handler]) => {
-			registerUserAction({ pluginId: opts.plugin.id, title: title.value, handler });
-		}),
-		'Plugin:register_note_action': values.FN_NATIVE(([title, handler]) => {
-			registerNoteAction({ pluginId: opts.plugin.id, title: title.value, handler });
-		}),
-		'Plugin:register_note_view_interruptor': values.FN_NATIVE(([handler]) => {
-			registerNoteViewInterruptor({ pluginId: opts.plugin.id, handler });
-		}),
-		'Plugin:register_note_post_interruptor': values.FN_NATIVE(([handler]) => {
-			registerNotePostInterruptor({ pluginId: opts.plugin.id, handler });
-		}),
-		'Plugin:open_url': values.FN_NATIVE(([url]) => {
-			window.open(url.value, '_blank');
-		}),
-		'Plugin:config': values.OBJ(config),
-	};
-}
-
-function initPlugin({ plugin, aiscript }) {
-	pluginContexts.set(plugin.id, aiscript);
-}
-
-function registerPostFormAction({ pluginId, title, handler }) {
-	postFormActions.push({
-		title, handler: (form, update) => {
-			pluginContexts.get(pluginId).execFn(handler, [utils.jsToVal(form), values.FN_NATIVE(([key, value]) => {
-				update(key.value, value.value);
-			})]);
-		},
-	});
-}
-
-function registerUserAction({ pluginId, title, handler }) {
-	userActions.push({
-		title, handler: (user) => {
-			pluginContexts.get(pluginId).execFn(handler, [utils.jsToVal(user)]);
-		},
-	});
-}
-
-function registerNoteAction({ pluginId, title, handler }) {
-	noteActions.push({
-		title, handler: (note) => {
-			pluginContexts.get(pluginId).execFn(handler, [utils.jsToVal(note)]);
-		},
-	});
-}
-
-function registerNoteViewInterruptor({ pluginId, handler }) {
-	noteViewInterruptors.push({
-		handler: async (note) => {
-			return utils.valToJs(await pluginContexts.get(pluginId).execFn(handler, [utils.jsToVal(note)]));
-		},
-	});
-}
-
-function registerNotePostInterruptor({ pluginId, handler }) {
-	notePostInterruptors.push({
-		handler: async (note) => {
-			return utils.valToJs(await pluginContexts.get(pluginId).execFn(handler, [utils.jsToVal(note)]));
-		},
-	});
-}
diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
deleted file mode 100644
index 111b15e0a6..0000000000
--- a/packages/client/src/router.ts
+++ /dev/null
@@ -1,501 +0,0 @@
-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 { ui } from '@/config';
-
-const page = (loader: AsyncComponentLoader<any>) => defineAsyncComponent({
-	loader: loader,
-	loadingComponent: MkLoading,
-	errorComponent: MkError,
-});
-
-export const routes = [{
-	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')),
-}, {
-	path: '/@:acct/following',
-	component: page(() => import('./pages/user/following.vue')),
-}, {
-	path: '/@:acct/followers',
-	component: page(() => import('./pages/user/followers.vue')),
-}, {
-	name: 'user',
-	path: '/@:acct/:page?',
-	component: page(() => import('./pages/user/index.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',
-	component: page(() => import('./pages/settings/index.vue')),
-	loginRequired: true,
-	children: [{
-		path: '/profile',
-		name: 'profile',
-		component: page(() => import('./pages/settings/profile.vue')),
-	}, {
-		path: '/privacy',
-		name: 'privacy',
-		component: page(() => import('./pages/settings/privacy.vue')),
-	}, {
-		path: '/reaction',
-		name: 'reaction',
-		component: page(() => import('./pages/settings/reaction.vue')),
-	}, {
-		path: '/drive',
-		name: 'drive',
-		component: page(() => import('./pages/settings/drive.vue')),
-	}, {
-		path: '/notifications',
-		name: 'notifications',
-		component: page(() => import('./pages/settings/notifications.vue')),
-	}, {
-		path: '/email',
-		name: 'email',
-		component: page(() => import('./pages/settings/email.vue')),
-	}, {
-		path: '/integration',
-		name: 'integration',
-		component: page(() => import('./pages/settings/integration.vue')),
-	}, {
-		path: '/security',
-		name: 'security',
-		component: page(() => import('./pages/settings/security.vue')),
-	}, {
-		path: '/general',
-		name: 'general',
-		component: page(() => import('./pages/settings/general.vue')),
-	}, {
-		path: '/theme/install',
-		name: 'theme',
-		component: page(() => import('./pages/settings/theme.install.vue')),
-	}, {
-		path: '/theme/manage',
-		name: 'theme',
-		component: page(() => import('./pages/settings/theme.manage.vue')),
-	}, {
-		path: '/theme',
-		name: 'theme',
-		component: page(() => import('./pages/settings/theme.vue')),
-	}, {
-		path: '/navbar',
-		name: 'navbar',
-		component: page(() => import('./pages/settings/navbar.vue')),
-	}, {
-		path: '/statusbar',
-		name: 'statusbar',
-		component: page(() => import('./pages/settings/statusbar.vue')),
-	}, {
-		path: '/sounds',
-		name: 'sounds',
-		component: page(() => import('./pages/settings/sounds.vue')),
-	}, {
-		path: '/plugin/install',
-		name: 'plugin',
-		component: page(() => import('./pages/settings/plugin.install.vue')),
-	}, {
-		path: '/plugin',
-		name: 'plugin',
-		component: page(() => import('./pages/settings/plugin.vue')),
-	}, {
-		path: '/import-export',
-		name: 'import-export',
-		component: page(() => import('./pages/settings/import-export.vue')),
-	}, {
-		path: '/instance-mute',
-		name: 'instance-mute',
-		component: page(() => import('./pages/settings/instance-mute.vue')),
-	}, {
-		path: '/mute-block',
-		name: 'mute-block',
-		component: page(() => import('./pages/settings/mute-block.vue')),
-	}, {
-		path: '/word-mute',
-		name: 'word-mute',
-		component: page(() => import('./pages/settings/word-mute.vue')),
-	}, {
-		path: '/api',
-		name: 'api',
-		component: page(() => import('./pages/settings/api.vue')),
-	}, {
-		path: '/apps',
-		name: 'api',
-		component: page(() => import('./pages/settings/apps.vue')),
-	}, {
-		path: '/webhook/edit/:webhookId',
-		name: 'webhook',
-		component: page(() => import('./pages/settings/webhook.edit.vue')),
-	}, {
-		path: '/webhook/new',
-		name: 'webhook',
-		component: page(() => import('./pages/settings/webhook.new.vue')),
-	}, {
-		path: '/webhook',
-		name: 'webhook',
-		component: page(() => import('./pages/settings/webhook.vue')),
-	}, {
-		path: '/deck',
-		name: 'deck',
-		component: page(() => import('./pages/settings/deck.vue')),
-	}, {
-		path: '/preferences-backups',
-		name: 'preferences-backups',
-		component: page(() => import('./pages/settings/preferences-backups.vue')),
-	}, {
-		path: '/custom-css',
-		name: 'general',
-		component: page(() => import('./pages/settings/custom-css.vue')),
-	}, {
-		path: '/accounts',
-		name: 'profile',
-		component: page(() => import('./pages/settings/accounts.vue')),
-	}, {
-		path: '/account-info',
-		name: 'other',
-		component: page(() => import('./pages/settings/account-info.vue')),
-	}, {
-		path: '/delete-account',
-		name: 'other',
-		component: page(() => import('./pages/settings/delete-account.vue')),
-	}, {
-		path: '/other',
-		name: 'other',
-		component: page(() => import('./pages/settings/other.vue')),
-	}, {
-		path: '/',
-		component: page(() => import('./pages/_empty_.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')),
-	hash: 'initialTab',
-}, {
-	path: '/about-misskey',
-	component: page(() => import('./pages/about-misskey.vue')),
-}, {
-	path: '/theme-editor',
-	component: page(() => import('./pages/theme-editor.vue')),
-	loginRequired: true,
-}, {
-	path: '/explore/tags/:tag',
-	component: page(() => import('./pages/explore.vue')),
-}, {
-	path: '/explore',
-	component: page(() => import('./pages/explore.vue')),
-}, {
-	path: '/search',
-	component: page(() => import('./pages/search.vue')),
-	query: {
-		q: 'query',
-		channel: 'channel',
-	},
-}, {
-	path: '/authorize-follow',
-	component: page(() => import('./pages/follow.vue')),
-	loginRequired: true,
-}, {
-	path: '/share',
-	component: page(() => import('./pages/share.vue')),
-	loginRequired: true,
-}, {
-	path: '/api-console',
-	component: page(() => import('./pages/api-console.vue')),
-	loginRequired: true,
-}, {
-	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')),
-	loginRequired: true,
-}, {
-	path: '/pages/edit/:initPageId',
-	component: page(() => import('./pages/page-editor/page-editor.vue')),
-	loginRequired: true,
-}, {
-	path: '/pages',
-	component: page(() => import('./pages/pages.vue')),
-}, {
-	path: '/gallery/:postId/edit',
-	component: page(() => import('./pages/gallery/edit.vue')),
-	loginRequired: true,
-}, {
-	path: '/gallery/new',
-	component: page(() => import('./pages/gallery/edit.vue')),
-	loginRequired: true,
-}, {
-	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')),
-	loginRequired: true,
-}, {
-	path: '/channels/new',
-	component: page(() => import('./pages/channel-editor.vue')),
-	loginRequired: true,
-}, {
-	path: '/channels/:channelId',
-	component: page(() => import('./pages/channel.vue')),
-}, {
-	path: '/channels',
-	component: page(() => import('./pages/channels.vue')),
-}, {
-	path: '/registry/keys/system/:path(*)?',
-	component: page(() => import('./pages/registry.keys.vue')),
-}, {
-	path: '/registry/value/system/:path(*)?',
-	component: page(() => import('./pages/registry.value.vue')),
-}, {
-	path: '/registry',
-	component: page(() => import('./pages/registry.vue')),
-}, {
-	path: '/admin/file/:fileId',
-	component: iAmModerator ? page(() => import('./pages/admin-file.vue')) : page(() => import('./pages/not-found.vue')),
-}, {
-	path: '/admin',
-	component: iAmModerator ? page(() => import('./pages/admin/index.vue')) : page(() => import('./pages/not-found.vue')),
-	children: [{
-		path: '/overview',
-		name: 'overview',
-		component: page(() => import('./pages/admin/overview.vue')),
-	}, {
-		path: '/users',
-		name: 'users',
-		component: page(() => import('./pages/admin/users.vue')),
-	}, {
-		path: '/emojis',
-		name: 'emojis',
-		component: page(() => import('./pages/admin/emojis.vue')),
-	}, {
-		path: '/queue',
-		name: 'queue',
-		component: page(() => import('./pages/admin/queue.vue')),
-	}, {
-		path: '/files',
-		name: 'files',
-		component: page(() => import('./pages/admin/files.vue')),
-	}, {
-		path: '/announcements',
-		name: 'announcements',
-		component: page(() => import('./pages/admin/announcements.vue')),
-	}, {
-		path: '/ads',
-		name: 'ads',
-		component: page(() => import('./pages/admin/ads.vue')),
-	}, {
-		path: '/database',
-		name: 'database',
-		component: page(() => import('./pages/admin/database.vue')),
-	}, {
-		path: '/abuses',
-		name: 'abuses',
-		component: page(() => import('./pages/admin/abuses.vue')),
-	}, {
-		path: '/settings',
-		name: 'settings',
-		component: page(() => import('./pages/admin/settings.vue')),
-	}, {
-		path: '/email-settings',
-		name: 'email-settings',
-		component: page(() => import('./pages/admin/email-settings.vue')),
-	}, {
-		path: '/object-storage',
-		name: 'object-storage',
-		component: page(() => import('./pages/admin/object-storage.vue')),
-	}, {
-		path: '/security',
-		name: 'security',
-		component: page(() => import('./pages/admin/security.vue')),
-	}, {
-		path: '/relays',
-		name: 'relays',
-		component: page(() => import('./pages/admin/relays.vue')),
-	}, {
-		path: '/integrations',
-		name: 'integrations',
-		component: page(() => import('./pages/admin/integrations.vue')),
-	}, {
-		path: '/instance-block',
-		name: 'instance-block',
-		component: page(() => import('./pages/admin/instance-block.vue')),
-	}, {
-		path: '/proxy-account',
-		name: 'proxy-account',
-		component: page(() => import('./pages/admin/proxy-account.vue')),
-	}, {
-		path: '/other-settings',
-		name: 'other-settings',
-		component: page(() => import('./pages/admin/other-settings.vue')),
-	}, {
-		path: '/',
-		component: page(() => import('./pages/_empty_.vue')),
-	}],
-}, {
-	path: '/my/notifications',
-	component: page(() => import('./pages/notifications.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/favorites',
-	component: page(() => import('./pages/favorites.vue')),
-	loginRequired: true,
-}, {
-	name: 'messaging',
-	path: '/my/messaging',
-	component: page(() => import('./pages/messaging/index.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/messaging/:userAcct',
-	component: page(() => import('./pages/messaging/messaging-room.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/messaging/group/:groupId',
-	component: page(() => import('./pages/messaging/messaging-room.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/drive/folder/:folder',
-	component: page(() => import('./pages/drive.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/drive',
-	component: page(() => import('./pages/drive.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/follow-requests',
-	component: page(() => import('./pages/follow-requests.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/lists/:listId',
-	component: page(() => import('./pages/my-lists/list.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/lists',
-	component: page(() => import('./pages/my-lists/index.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/clips',
-	component: page(() => import('./pages/my-clips/index.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/antennas/create',
-	component: page(() => import('./pages/my-antennas/create.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/antennas/:antennaId',
-	component: page(() => import('./pages/my-antennas/edit.vue')),
-	loginRequired: true,
-}, {
-	path: '/my/antennas',
-	component: page(() => import('./pages/my-antennas/index.vue')),
-	loginRequired: true,
-}, {
-	path: '/timeline/list/:listId',
-	component: page(() => import('./pages/user-list-timeline.vue')),
-	loginRequired: true,
-}, {
-	path: '/timeline/antenna/:antennaId',
-	component: page(() => import('./pages/antenna-timeline.vue')),
-	loginRequired: true,
-}, {
-	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')),
-}];
-
-export const mainRouter = new Router(routes, location.pathname + location.search + location.hash);
-
-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' });
-		}, 100);
-	}
-});
-
-mainRouter.addListener('replace', ctx => {
-	window.history.replaceState({ key: ctx.key }, '', ctx.path);
-});
-
-mainRouter.addListener('same', () => {
-	window.scroll({ top: 0, behavior: 'smooth' });
-});
-
-window.addEventListener('popstate', (event) => {
-	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);
-	const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
-	window.scroll({ top: scrollPos, behavior: 'instant' });
-	window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
-		window.scroll({ top: scrollPos, behavior: 'instant' });
-	}, 100);
-});
-
-export function useRouter(): Router {
-	return inject<Router | null>('router', null) ?? mainRouter;
-}
diff --git a/packages/client/src/scripts/2fa.ts b/packages/client/src/scripts/2fa.ts
deleted file mode 100644
index 62a38ff02a..0000000000
--- a/packages/client/src/scripts/2fa.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-export function byteify(string: string, encoding: 'ascii' | 'base64' | 'hex') {
-	switch (encoding) {
-		case 'ascii':
-			return Uint8Array.from(string, c => c.charCodeAt(0));
-		case 'base64':
-			return Uint8Array.from(
-				atob(
-					string
-						.replace(/-/g, '+')
-						.replace(/_/g, '/'),
-				),
-				c => c.charCodeAt(0),
-			);
-		case 'hex':
-			return new Uint8Array(
-				string
-					.match(/.{1,2}/g)
-					.map(byte => parseInt(byte, 16)),
-			);
-	}
-}
-
-export function hexify(buffer: ArrayBuffer) {
-	return Array.from(new Uint8Array(buffer))
-		.reduce(
-			(str, byte) => str + byte.toString(16).padStart(2, '0'),
-			'',
-		);
-}
-
-export function stringify(buffer: ArrayBuffer) {
-	return String.fromCharCode(... new Uint8Array(buffer));
-}
diff --git a/packages/client/src/scripts/aiscript/api.ts b/packages/client/src/scripts/aiscript/api.ts
deleted file mode 100644
index 6debcb8a13..0000000000
--- a/packages/client/src/scripts/aiscript/api.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { utils, values } from '@syuilo/aiscript';
-import * as os from '@/os';
-import { $i } from '@/account';
-
-export function createAiScriptEnv(opts) {
-	let apiRequests = 0;
-	return {
-		USER_ID: $i ? values.STR($i.id) : values.NULL,
-		USER_NAME: $i ? values.STR($i.name) : values.NULL,
-		USER_USERNAME: $i ? values.STR($i.username) : values.NULL,
-		'Mk:dialog': values.FN_NATIVE(async ([title, text, type]) => {
-			await os.alert({
-				type: type ? type.value : 'info',
-				title: title.value,
-				text: text.value,
-			});
-		}),
-		'Mk:confirm': values.FN_NATIVE(async ([title, text, type]) => {
-			const confirm = await os.confirm({
-				type: type ? type.value : 'question',
-				title: title.value,
-				text: text.value,
-			});
-			return confirm.canceled ? values.FALSE : values.TRUE;
-		}),
-		'Mk:api': values.FN_NATIVE(async ([ep, param, token]) => {
-			if (token) utils.assertString(token);
-			apiRequests++;
-			if (apiRequests > 16) return values.NULL;
-			const res = await os.api(ep.value, utils.valToJs(param), token ? token.value : (opts.token ?? null));
-			return utils.jsToVal(res);
-		}),
-		'Mk:save': values.FN_NATIVE(([key, value]) => {
-			utils.assertString(key);
-			localStorage.setItem('aiscript:' + opts.storageKey + ':' + key.value, JSON.stringify(utils.valToJs(value)));
-			return values.NULL;
-		}),
-		'Mk:load': values.FN_NATIVE(([key]) => {
-			utils.assertString(key);
-			return utils.jsToVal(JSON.parse(localStorage.getItem('aiscript:' + opts.storageKey + ':' + key.value)));
-		}),
-	};
-}
diff --git a/packages/client/src/scripts/array.ts b/packages/client/src/scripts/array.ts
deleted file mode 100644
index 4620c8b735..0000000000
--- a/packages/client/src/scripts/array.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { EndoRelation, Predicate } from './relation';
-
-/**
- * Count the number of elements that satisfy the predicate
- */
-
-export function countIf<T>(f: Predicate<T>, xs: T[]): number {
-	return xs.filter(f).length;
-}
-
-/**
- * Count the number of elements that is equal to the element
- */
-export function count<T>(a: T, xs: T[]): number {
-	return countIf(x => x === a, xs);
-}
-
-/**
- * Concatenate an array of arrays
- */
-export function concat<T>(xss: T[][]): T[] {
-	return ([] as T[]).concat(...xss);
-}
-
-/**
- * Intersperse the element between the elements of the array
- * @param sep The element to be interspersed
- */
-export function intersperse<T>(sep: T, xs: T[]): T[] {
-	return concat(xs.map(x => [sep, x])).slice(1);
-}
-
-/**
- * Returns the array of elements that is not equal to the element
- */
-export function erase<T>(a: T, xs: T[]): T[] {
-	return xs.filter(x => x !== a);
-}
-
-/**
- * Finds the array of all elements in the first array not contained in the second array.
- * The order of result values are determined by the first array.
- */
-export function difference<T>(xs: T[], ys: T[]): T[] {
-	return xs.filter(x => !ys.includes(x));
-}
-
-/**
- * Remove all but the first element from every group of equivalent elements
- */
-export function unique<T>(xs: T[]): T[] {
-	return [...new Set(xs)];
-}
-
-export function uniqueBy<TValue, TKey>(values: TValue[], keySelector: (value: TValue) => TKey): TValue[] {
-	const map = new Map<TKey, TValue>();
-
-	for (const value of values) {
-		const key = keySelector(value);
-		if (!map.has(key)) map.set(key, value);
-	}
-
-	return [...map.values()];
-}
-
-export function sum(xs: number[]): number {
-	return xs.reduce((a, b) => a + b, 0);
-}
-
-export function maximum(xs: number[]): number {
-	return Math.max(...xs);
-}
-
-/**
- * Splits an array based on the equivalence relation.
- * The concatenation of the result is equal to the argument.
- */
-export function groupBy<T>(f: EndoRelation<T>, xs: T[]): T[][] {
-	const groups = [] as T[][];
-	for (const x of xs) {
-		if (groups.length !== 0 && f(groups[groups.length - 1][0], x)) {
-			groups[groups.length - 1].push(x);
-		} else {
-			groups.push([x]);
-		}
-	}
-	return groups;
-}
-
-/**
- * Splits an array based on the equivalence relation induced by the function.
- * The concatenation of the result is equal to the argument.
- */
-export function groupOn<T, S>(f: (x: T) => S, xs: T[]): T[][] {
-	return groupBy((a, b) => f(a) === f(b), xs);
-}
-
-export function groupByX<T>(collections: T[], keySelector: (x: T) => string) {
-	return collections.reduce((obj: Record<string, T[]>, item: T) => {
-		const key = keySelector(item);
-		if (typeof obj[key] === 'undefined') {
-			obj[key] = [];
-		}
-
-		obj[key].push(item);
-
-		return obj;
-	}, {});
-}
-
-/**
- * Compare two arrays by lexicographical order
- */
-export function lessThan(xs: number[], ys: number[]): boolean {
-	for (let i = 0; i < Math.min(xs.length, ys.length); i++) {
-		if (xs[i] < ys[i]) return true;
-		if (xs[i] > ys[i]) return false;
-	}
-	return xs.length < ys.length;
-}
-
-/**
- * Returns the longest prefix of elements that satisfy the predicate
- */
-export function takeWhile<T>(f: Predicate<T>, xs: T[]): T[] {
-	const ys: T[] = [];
-	for (const x of xs) {
-		if (f(x)) {
-			ys.push(x);
-		} else {
-			break;
-		}
-	}
-	return ys;
-}
-
-export function cumulativeSum(xs: number[]): number[] {
-	const ys = Array.from(xs); // deep copy
-	for (let i = 1; i < ys.length; i++) ys[i] += ys[i - 1];
-	return ys;
-}
-
-export function toArray<T>(x: T | T[] | undefined): T[] {
-	return Array.isArray(x) ? x : x != null ? [x] : [];
-}
-
-export function toSingle<T>(x: T | T[] | undefined): T | undefined {
-	return Array.isArray(x) ? x[0] : x;
-}
diff --git a/packages/client/src/scripts/autocomplete.ts b/packages/client/src/scripts/autocomplete.ts
deleted file mode 100644
index 1bae3790f5..0000000000
--- a/packages/client/src/scripts/autocomplete.ts
+++ /dev/null
@@ -1,276 +0,0 @@
-import { nextTick, Ref, ref, defineAsyncComponent } from 'vue';
-import getCaretCoordinates from 'textarea-caret';
-import { toASCII } from 'punycode/';
-import { popup } from '@/os';
-
-export class Autocomplete {
-	private suggestion: {
-		x: Ref<number>;
-		y: Ref<number>;
-		q: Ref<string | null>;
-		close: () => void;
-	} | null;
-	private textarea: HTMLInputElement | HTMLTextAreaElement;
-	private currentType: string;
-	private textRef: Ref<string>;
-	private opening: boolean;
-
-	private get text(): string {
-		// Use raw .value to get the latest value
-		// (Because v-model does not update while composition)
-		return this.textarea.value;
-	}
-
-	private set text(text: string) {
-		// Use ref value to notify other watchers
-		// (Because .value setter never fires input/change events)
-		this.textRef.value = text;
-	}
-
-	/**
-	 * 対象のテキストエリアを与えてインスタンスを初期化します。
-	 */
-	constructor(textarea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>) {
-		//#region BIND
-		this.onInput = this.onInput.bind(this);
-		this.complete = this.complete.bind(this);
-		this.close = this.close.bind(this);
-		//#endregion
-
-		this.suggestion = null;
-		this.textarea = textarea;
-		this.textRef = textRef;
-		this.opening = false;
-
-		this.attach();
-	}
-
-	/**
-	 * このインスタンスにあるテキストエリアの入力のキャプチャを開始します。
-	 */
-	public attach() {
-		this.textarea.addEventListener('input', this.onInput);
-	}
-
-	/**
-	 * このインスタンスにあるテキストエリアの入力のキャプチャを解除します。
-	 */
-	public detach() {
-		this.textarea.removeEventListener('input', this.onInput);
-		this.close();
-	}
-
-	/**
-	 * テキスト入力時
-	 */
-	private onInput() {
-		const caretPos = this.textarea.selectionStart;
-		const text = this.text.substr(0, caretPos).split('\n').pop()!;
-
-		const mentionIndex = text.lastIndexOf('@');
-		const hashtagIndex = text.lastIndexOf('#');
-		const emojiIndex = text.lastIndexOf(':');
-		const mfmTagIndex = text.lastIndexOf('$');
-
-		const max = Math.max(
-			mentionIndex,
-			hashtagIndex,
-			emojiIndex,
-			mfmTagIndex);
-
-		if (max === -1) {
-			this.close();
-			return;
-		}
-
-		const isMention = mentionIndex !== -1;
-		const isHashtag = hashtagIndex !== -1;
-		const isMfmTag = mfmTagIndex !== -1;
-		const isEmoji = emojiIndex !== -1 && text.split(/:[a-z0-9_+\-]+:/).pop()!.includes(':');
-
-		let opened = false;
-
-		if (isMention) {
-			const username = text.substr(mentionIndex + 1);
-			if (username !== '' && username.match(/^[a-zA-Z0-9_]+$/)) {
-				this.open('user', username);
-				opened = true;
-			} else if (username === '') {
-				this.open('user', null);
-				opened = true;
-			}
-		}
-
-		if (isHashtag && !opened) {
-			const hashtag = text.substr(hashtagIndex + 1);
-			if (!hashtag.includes(' ')) {
-				this.open('hashtag', hashtag);
-				opened = true;
-			}
-		}
-
-		if (isEmoji && !opened) {
-			const emoji = text.substr(emojiIndex + 1);
-			if (!emoji.includes(' ')) {
-				this.open('emoji', emoji);
-				opened = true;
-			}
-		}
-
-		if (isMfmTag && !opened) {
-			const mfmTag = text.substr(mfmTagIndex + 1);
-			if (!mfmTag.includes(' ')) {
-				this.open('mfmTag', mfmTag.replace('[', ''));
-				opened = true;
-			}
-		}
-
-		if (!opened) {
-			this.close();
-		}
-	}
-
-	/**
-	 * サジェストを提示します。
-	 */
-	private async open(type: string, q: string | null) {
-		if (type !== this.currentType) {
-			this.close();
-		}
-		if (this.opening) return;
-		this.opening = true;
-		this.currentType = type;
-
-		//#region サジェストを表示すべき位置を計算
-		const caretPosition = getCaretCoordinates(this.textarea, this.textarea.selectionStart);
-
-		const rect = this.textarea.getBoundingClientRect();
-
-		const x = rect.left + caretPosition.left - this.textarea.scrollLeft;
-		const y = rect.top + caretPosition.top - this.textarea.scrollTop;
-		//#endregion
-
-		if (this.suggestion) {
-			this.suggestion.x.value = x;
-			this.suggestion.y.value = y;
-			this.suggestion.q.value = q;
-
-			this.opening = false;
-		} else {
-			const _x = ref(x);
-			const _y = ref(y);
-			const _q = ref(q);
-
-			const { dispose } = await popup(defineAsyncComponent(() => import('@/components/MkAutocomplete.vue')), {
-				textarea: this.textarea,
-				close: this.close,
-				type: type,
-				q: _q,
-				x: _x,
-				y: _y,
-			}, {
-				done: (res) => {
-					this.complete(res);
-				},
-			});
-
-			this.suggestion = {
-				q: _q,
-				x: _x,
-				y: _y,
-				close: () => dispose(),
-			};
-
-			this.opening = false;
-		}
-	}
-
-	/**
-	 * サジェストを閉じます。
-	 */
-	private close() {
-		if (this.suggestion == null) return;
-
-		this.suggestion.close();
-		this.suggestion = null;
-
-		this.textarea.focus();
-	}
-
-	/**
-	 * オートコンプリートする
-	 */
-	private complete({ type, value }) {
-		this.close();
-
-		const caret = this.textarea.selectionStart;
-
-		if (type === 'user') {
-			const source = this.text;
-
-			const before = source.substr(0, caret);
-			const trimmedBefore = before.substring(0, before.lastIndexOf('@'));
-			const after = source.substr(caret);
-
-			const acct = value.host === null ? value.username : `${value.username}@${toASCII(value.host)}`;
-
-			// 挿入
-			this.text = `${trimmedBefore}@${acct} ${after}`;
-
-			// キャレットを戻す
-			nextTick(() => {
-				this.textarea.focus();
-				const pos = trimmedBefore.length + (acct.length + 2);
-				this.textarea.setSelectionRange(pos, pos);
-			});
-		} else if (type === 'hashtag') {
-			const source = this.text;
-
-			const before = source.substr(0, caret);
-			const trimmedBefore = before.substring(0, before.lastIndexOf('#'));
-			const after = source.substr(caret);
-
-			// 挿入
-			this.text = `${trimmedBefore}#${value} ${after}`;
-
-			// キャレットを戻す
-			nextTick(() => {
-				this.textarea.focus();
-				const pos = trimmedBefore.length + (value.length + 2);
-				this.textarea.setSelectionRange(pos, pos);
-			});
-		} else if (type === 'emoji') {
-			const source = this.text;
-
-			const before = source.substr(0, caret);
-			const trimmedBefore = before.substring(0, before.lastIndexOf(':'));
-			const after = source.substr(caret);
-
-			// 挿入
-			this.text = trimmedBefore + value + after;
-
-			// キャレットを戻す
-			nextTick(() => {
-				this.textarea.focus();
-				const pos = trimmedBefore.length + value.length;
-				this.textarea.setSelectionRange(pos, pos);
-			});
-		} else if (type === 'mfmTag') {
-			const source = this.text;
-
-			const before = source.substr(0, caret);
-			const trimmedBefore = before.substring(0, before.lastIndexOf('$'));
-			const after = source.substr(caret);
-
-			// 挿入
-			this.text = `${trimmedBefore}$[${value} ]${after}`;
-
-			// キャレットを戻す
-			nextTick(() => {
-				this.textarea.focus();
-				const pos = trimmedBefore.length + (value.length + 3);
-				this.textarea.setSelectionRange(pos, pos);
-			});
-		}
-	}
-}
diff --git a/packages/client/src/scripts/chart-vline.ts b/packages/client/src/scripts/chart-vline.ts
deleted file mode 100644
index 8e3c4436b2..0000000000
--- a/packages/client/src/scripts/chart-vline.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export const chartVLine = (vLineColor: string) => ({
-	id: 'vLine',
-	beforeDraw(chart, args, options) {
-		if (chart.tooltip?._active?.length) {
-			const activePoint = chart.tooltip._active[0];
-			const ctx = chart.ctx;
-			const x = activePoint.element.x;
-			const topY = chart.scales.y.top;
-			const bottomY = chart.scales.y.bottom;
-
-			ctx.save();
-			ctx.beginPath();
-			ctx.moveTo(x, bottomY);
-			ctx.lineTo(x, topY);
-			ctx.lineWidth = 1;
-			ctx.strokeStyle = vLineColor;
-			ctx.stroke();
-			ctx.restore();
-		}
-	},
-});
diff --git a/packages/client/src/scripts/check-word-mute.ts b/packages/client/src/scripts/check-word-mute.ts
deleted file mode 100644
index 35d40a6e08..0000000000
--- a/packages/client/src/scripts/check-word-mute.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-export function checkWordMute(note: Record<string, any>, me: Record<string, any> | null | undefined, mutedWords: Array<string | string[]>): boolean {
-	// 自分自身
-	if (me && (note.userId === me.id)) return false;
-
-	if (mutedWords.length > 0) {
-		const text = ((note.cw ?? '') + '\n' + (note.text ?? '')).trim();
-
-		if (text === '') return false;
-
-		const matched = mutedWords.some(filter => {
-			if (Array.isArray(filter)) {
-				// Clean up
-				const filteredFilter = filter.filter(keyword => keyword !== '');
-				if (filteredFilter.length === 0) return false;
-
-				return filteredFilter.every(keyword => text.includes(keyword));
-			} else {
-				// represents RegExp
-				const regexp = filter.match(/^\/(.+)\/(.*)$/);
-
-				// This should never happen due to input sanitisation.
-				if (!regexp) return false;
-
-				try {
-					return new RegExp(regexp[1], regexp[2]).test(text);
-				} catch (err) {
-					// This should never happen due to input sanitisation.
-					return false;
-				}
-			}
-		});
-
-		if (matched) return true;
-	}
-
-	return false;
-}
diff --git a/packages/client/src/scripts/clone.ts b/packages/client/src/scripts/clone.ts
deleted file mode 100644
index 16fad24129..0000000000
--- a/packages/client/src/scripts/clone.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// structredCloneが遅いため
-// SEE: http://var.blog.jp/archives/86038606.html
-
-type Cloneable = string | number | boolean | null | { [key: string]: Cloneable } | Cloneable[];
-
-export function deepClone<T extends Cloneable>(x: T): T {
-	if (typeof x === 'object') {
-		if (x === null) return x;
-		if (Array.isArray(x)) return x.map(deepClone) as T;
-		const obj = {} as Record<string, Cloneable>;
-		for (const [k, v] of Object.entries(x)) {
-			obj[k] = deepClone(v);
-		}
-		return obj as T;
-	} else {
-		return x;
-	}
-}
diff --git a/packages/client/src/scripts/collect-page-vars.ts b/packages/client/src/scripts/collect-page-vars.ts
deleted file mode 100644
index 76b68beaf6..0000000000
--- a/packages/client/src/scripts/collect-page-vars.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-interface StringPageVar {
-	name: string,
-	type: 'string',
-	value: string
-}
-
-interface NumberPageVar {
-	name: string,
-	type: 'number',
-	value: number
-}
-
-interface BooleanPageVar {
-	name: string,
-	type: 'boolean',
-	value: boolean
-}
-
-type PageVar = StringPageVar | NumberPageVar | BooleanPageVar;
-
-export function collectPageVars(content): PageVar[] {
-	const pageVars: PageVar[] = [];
-	const collect = (xs: any[]): void => {
-		for (const x of xs) {
-			if (x.type === 'textInput') {
-				pageVars.push({
-					name: x.name,
-					type: 'string',
-					value: x.default || '',
-				});
-			} else if (x.type === 'textareaInput') {
-				pageVars.push({
-					name: x.name,
-					type: 'string',
-					value: x.default || '',
-				});
-			} else if (x.type === 'numberInput') {
-				pageVars.push({
-					name: x.name,
-					type: 'number',
-					value: x.default || 0,
-				});
-			} else if (x.type === 'switch') {
-				pageVars.push({
-					name: x.name,
-					type: 'boolean',
-					value: x.default || false,
-				});
-			} else if (x.type === 'counter') {
-				pageVars.push({
-					name: x.name,
-					type: 'number',
-					value: 0,
-				});
-			} else if (x.type === 'radioButton') {
-				pageVars.push({
-					name: x.name,
-					type: 'string',
-					value: x.default || '',
-				});
-			} else if (x.children) {
-				collect(x.children);
-			}
-		}
-	};
-	collect(content);
-	return pageVars;
-}
diff --git a/packages/client/src/scripts/contains.ts b/packages/client/src/scripts/contains.ts
deleted file mode 100644
index 256e09d293..0000000000
--- a/packages/client/src/scripts/contains.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export default (parent, child, checkSame = true) => {
-	if (checkSame && parent === child) return true;
-	let node = child.parentNode;
-	while (node) {
-		if (node === parent) return true;
-		node = node.parentNode;
-	}
-	return false;
-};
diff --git a/packages/client/src/scripts/copy-to-clipboard.ts b/packages/client/src/scripts/copy-to-clipboard.ts
deleted file mode 100644
index ab13cab970..0000000000
--- a/packages/client/src/scripts/copy-to-clipboard.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Clipboardに値をコピー(TODO: 文字列以外も対応)
- */
-export default val => {
-	// 空div 生成
-	const tmp = document.createElement('div');
-	// 選択用のタグ生成
-	const pre = document.createElement('pre');
-
-	// 親要素のCSSで user-select: none だとコピーできないので書き換える
-	pre.style.webkitUserSelect = 'auto';
-	pre.style.userSelect = 'auto';
-
-	tmp.appendChild(pre).textContent = val;
-
-	// 要素を画面外へ
-	const s = tmp.style;
-	s.position = 'fixed';
-	s.right = '200%';
-
-	// body に追加
-	document.body.appendChild(tmp);
-	// 要素を選択
-	document.getSelection().selectAllChildren(tmp);
-
-	// クリップボードにコピー
-	const result = document.execCommand('copy');
-
-	// 要素削除
-	document.body.removeChild(tmp);
-
-	return result;
-};
diff --git a/packages/client/src/scripts/device-kind.ts b/packages/client/src/scripts/device-kind.ts
deleted file mode 100644
index 544cac0604..0000000000
--- a/packages/client/src/scripts/device-kind.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { defaultStore } from '@/store';
-
-const ua = navigator.userAgent.toLowerCase();
-const isTablet = /ipad/.test(ua) || (/mobile|iphone|android/.test(ua) && window.innerWidth > 700);
-const isSmartphone = !isTablet && /mobile|iphone|android/.test(ua);
-
-export const deviceKind = defaultStore.state.overridedDeviceKind ? defaultStore.state.overridedDeviceKind
-	: isSmartphone ? 'smartphone'
-	: isTablet ? 'tablet'
-	: 'desktop';
diff --git a/packages/client/src/scripts/emoji-base.ts b/packages/client/src/scripts/emoji-base.ts
deleted file mode 100644
index 3f05642d57..0000000000
--- a/packages/client/src/scripts/emoji-base.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-const twemojiSvgBase = '/twemoji';
-const fluentEmojiPngBase = '/fluent-emoji';
-
-export function char2twemojiFilePath(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);
-	const fileName = codes.join('-');
-	return `${twemojiSvgBase}/${fileName}.svg`;
-}
-
-export function char2fluentEmojiFilePath(char: string): string {
-	let codes = Array.from(char).map(x => x.codePointAt(0)?.toString(16));
-	// Fluent Emojiは国旗非対応 https://github.com/microsoft/fluentui-emoji/issues/25
-	if (codes[0]?.startsWith('1f1')) return char2twemojiFilePath(char);
-	if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');
-	codes = codes.filter(x => x && x.length);
-	const fileName = codes.map(x => x!.padStart(4, '0')).join('-');
-	return `${fluentEmojiPngBase}/${fileName}.png`;
-}
diff --git a/packages/client/src/scripts/emojilist.ts b/packages/client/src/scripts/emojilist.ts
deleted file mode 100644
index bc52fa7a43..0000000000
--- a/packages/client/src/scripts/emojilist.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export const unicodeEmojiCategories = ['face', 'people', 'animals_and_nature', 'food_and_drink', 'activity', 'travel_and_places', 'objects', 'symbols', 'flags'] as const;
-
-export type UnicodeEmojiDef = {
-	name: string;
-	keywords: string[];
-	char: string;
-	category: typeof unicodeEmojiCategories[number];
-}
-
-// initial converted from https://github.com/muan/emojilib/commit/242fe68be86ed6536843b83f7e32f376468b38fb
-import _emojilist from '../emojilist.json';
-
-export const emojilist = _emojilist as UnicodeEmojiDef[];
-
-export function getEmojiName(char: string): string | undefined {
-	return emojilist.find(emo => emo.char === char)?.name;
-}
diff --git a/packages/client/src/scripts/extract-avg-color-from-blurhash.ts b/packages/client/src/scripts/extract-avg-color-from-blurhash.ts
deleted file mode 100644
index af517f2672..0000000000
--- a/packages/client/src/scripts/extract-avg-color-from-blurhash.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export function extractAvgColorFromBlurhash(hash: string) {
-	return typeof hash === 'string'
-		? '#' + [...hash.slice(2, 6)]
-				.map(x => '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~'.indexOf(x))
-				.reduce((a, c) => a * 83 + c, 0)
-				.toString(16)
-				.padStart(6, '0')
-		: undefined;
-}
diff --git a/packages/client/src/scripts/extract-mentions.ts b/packages/client/src/scripts/extract-mentions.ts
deleted file mode 100644
index cc19b161a8..0000000000
--- a/packages/client/src/scripts/extract-mentions.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// test is located in test/extract-mentions
-
-import * as mfm from 'mfm-js';
-
-export function extractMentions(nodes: mfm.MfmNode[]): mfm.MfmMention['props'][] {
-	// TODO: 重複を削除
-	const mentionNodes = mfm.extract(nodes, (node) => node.type === 'mention');
-	const mentions = mentionNodes.map(x => x.props);
-
-	return mentions;
-}
diff --git a/packages/client/src/scripts/extract-url-from-mfm.ts b/packages/client/src/scripts/extract-url-from-mfm.ts
deleted file mode 100644
index 34e3eb6c19..0000000000
--- a/packages/client/src/scripts/extract-url-from-mfm.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as mfm from 'mfm-js';
-import { unique } from '@/scripts/array';
-
-// unique without hash
-// [ http://a/#1, http://a/#2, http://b/#3 ] => [ http://a/#1, http://b/#3 ]
-const removeHash = (x: string) => x.replace(/#[^#]*$/, '');
-
-export function extractUrlFromMfm(nodes: mfm.MfmNode[], respectSilentFlag = true): string[] {
-	const urlNodes = mfm.extract(nodes, (node) => {
-		return (node.type === 'url') || (node.type === 'link' && (!respectSilentFlag || !node.props.silent));
-	});
-	const urls: string[] = unique(urlNodes.map(x => x.props.url));
-
-	return urls.reduce((array, url) => {
-		const urlWithoutHash = removeHash(url);
-		if (!array.map(x => removeHash(x)).includes(urlWithoutHash)) array.push(url);
-		return array;
-	}, [] as string[]);
-}
diff --git a/packages/client/src/scripts/focus.ts b/packages/client/src/scripts/focus.ts
deleted file mode 100644
index d6802fa322..0000000000
--- a/packages/client/src/scripts/focus.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export function focusPrev(el: Element | null, self = false, scroll = true) {
-	if (el == null) return;
-	if (!self) el = el.previousElementSibling;
-	if (el) {
-		if (el.hasAttribute('tabindex')) {
-			(el as HTMLElement).focus({
-				preventScroll: !scroll,
-			});
-		} else {
-			focusPrev(el.previousElementSibling, true);
-		}
-	}
-}
-
-export function focusNext(el: Element | null, self = false, scroll = true) {
-	if (el == null) return;
-	if (!self) el = el.nextElementSibling;
-	if (el) {
-		if (el.hasAttribute('tabindex')) {
-			(el as HTMLElement).focus({
-				preventScroll: !scroll,
-			});
-		} else {
-			focusPrev(el.nextElementSibling, true);
-		}
-	}
-}
diff --git a/packages/client/src/scripts/form.ts b/packages/client/src/scripts/form.ts
deleted file mode 100644
index 7f321cc0ae..0000000000
--- a/packages/client/src/scripts/form.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-export type FormItem = {
-	label?: string;
-	type: 'string';
-	default: string | null;
-	hidden?: boolean;
-	multiline?: boolean;
-} | {
-	label?: string;
-	type: 'number';
-	default: number | null;
-	hidden?: boolean;
-	step?: number;
-} | {
-	label?: string;
-	type: 'boolean';
-	default: boolean | null;
-	hidden?: boolean;
-} | {
-	label?: string;
-	type: 'enum';
-	default: string | null;
-	hidden?: boolean;
-	enum: string[];
-} | {
-	label?: string;
-	type: 'radio';
-	default: unknown | null;
-	hidden?: boolean;
-	options: {
-		label: string;
-		value: unknown;
-	}[];
-} | {
-	label?: string;
-	type: 'object';
-	default: Record<string, unknown> | null;
-	hidden: true;
-} | {
-	label?: string;
-	type: 'array';
-	default: unknown[] | null;
-	hidden: true;
-};
-
-export type Form = Record<string, FormItem>;
-
-type GetItemType<Item extends FormItem> =
-	Item['type'] extends 'string' ? string :
-	Item['type'] extends 'number' ? number :
-	Item['type'] extends 'boolean' ? boolean :
-	Item['type'] extends 'radio' ? unknown :
-	Item['type'] extends 'enum' ? string :
-	Item['type'] extends 'array' ? unknown[] :
-	Item['type'] extends 'object' ? Record<string, unknown>
-	: never;
-
-export type GetFormResultType<F extends Form> = {
-	[P in keyof F]: GetItemType<F[P]>;
-};
diff --git a/packages/client/src/scripts/format-time-string.ts b/packages/client/src/scripts/format-time-string.ts
deleted file mode 100644
index c20db5e827..0000000000
--- a/packages/client/src/scripts/format-time-string.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-const defaultLocaleStringFormats: {[index: string]: string} = {
-	'weekday': 'narrow',
-	'era': 'narrow',
-	'year': 'numeric',
-	'month': 'numeric',
-	'day': 'numeric',
-	'hour': 'numeric',
-	'minute': 'numeric',
-	'second': 'numeric',
-	'timeZoneName': 'short',
-};
-
-function formatLocaleString(date: Date, format: string): string {
-	return format.replace(/\{\{(\w+)(:(\w+))?\}\}/g, (match: string, kind: string, unused?, option?: string) => {
-		if (['weekday', 'era', 'year', 'month', 'day', 'hour', 'minute', 'second', 'timeZoneName'].includes(kind)) {
-			return date.toLocaleString(window.navigator.language, { [kind]: option ? option : defaultLocaleStringFormats[kind] });
-		} else {
-			return match;
-		}
-	});
-}
-
-export function formatDateTimeString(date: Date, format: string): string {
-	return format
-		.replace(/yyyy/g, date.getFullYear().toString())
-		.replace(/yy/g, date.getFullYear().toString().slice(-2))
-		.replace(/MMMM/g, date.toLocaleString(window.navigator.language, { month: 'long' }))
-		.replace(/MMM/g, date.toLocaleString(window.navigator.language, { month: 'short' }))
-		.replace(/MM/g, (`0${date.getMonth() + 1}`).slice(-2))
-		.replace(/M/g, (date.getMonth() + 1).toString())
-		.replace(/dd/g, (`0${date.getDate()}`).slice(-2))
-		.replace(/d/g, date.getDate().toString())
-		.replace(/HH/g, (`0${date.getHours()}`).slice(-2))
-		.replace(/H/g, date.getHours().toString())
-		.replace(/hh/g, (`0${(date.getHours() % 12) || 12}`).slice(-2))
-		.replace(/h/g, ((date.getHours() % 12) || 12).toString())
-		.replace(/mm/g, (`0${date.getMinutes()}`).slice(-2))
-		.replace(/m/g, date.getMinutes().toString())
-		.replace(/ss/g, (`0${date.getSeconds()}`).slice(-2))
-		.replace(/s/g, date.getSeconds().toString())
-		.replace(/tt/g, date.getHours() >= 12 ? 'PM' : 'AM');
-}
-
-export function formatTimeString(date: Date, format: string): string {
-	return format.replace(/\[(([^\[]|\[\])*)\]|(([yMdHhmst])\4{0,3})/g, (match: string, localeformat?: string, unused?, datetimeformat?: string) => {
-		if (localeformat) return formatLocaleString(date, localeformat);
-		if (datetimeformat) return formatDateTimeString(date, datetimeformat);
-		return match;
-	});
-}
diff --git a/packages/client/src/scripts/gen-search-query.ts b/packages/client/src/scripts/gen-search-query.ts
deleted file mode 100644
index da7d622632..0000000000
--- a/packages/client/src/scripts/gen-search-query.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as Acct from 'misskey-js/built/acct';
-import { host as localHost } from '@/config';
-
-export async function genSearchQuery(v: any, q: string) {
-	let host: string;
-	let userId: string;
-	if (q.split(' ').some(x => x.startsWith('@'))) {
-		for (const at of q.split(' ').filter(x => x.startsWith('@')).map(x => x.substr(1))) {
-			if (at.includes('.')) {
-				if (at === localHost || at === '.') {
-					host = null;
-				} else {
-					host = at;
-				}
-			} else {
-				const user = await v.os.api('users/show', Acct.parse(at)).catch(x => null);
-				if (user) {
-					userId = user.id;
-				} else {
-					// todo: show error
-				}
-			}
-		}
-	}
-	return {
-		query: q.split(' ').filter(x => !x.startsWith('/') && !x.startsWith('@')).join(' '),
-		host: host,
-		userId: userId,
-	};
-}
diff --git a/packages/client/src/scripts/get-account-from-id.ts b/packages/client/src/scripts/get-account-from-id.ts
deleted file mode 100644
index 1da897f176..0000000000
--- a/packages/client/src/scripts/get-account-from-id.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { get } from '@/scripts/idb-proxy';
-
-export async function getAccountFromId(id: string) {
-	const accounts = await get('accounts') as { token: string; id: string; }[];
-	if (!accounts) console.log('Accounts are not recorded');
-	return accounts.find(account => account.id === id);
-}
diff --git a/packages/client/src/scripts/get-note-menu.ts b/packages/client/src/scripts/get-note-menu.ts
deleted file mode 100644
index 7656770894..0000000000
--- a/packages/client/src/scripts/get-note-menu.ts
+++ /dev/null
@@ -1,341 +0,0 @@
-import { defineAsyncComponent, Ref, inject } from 'vue';
-import * as misskey from 'misskey-js';
-import { pleaseLogin } from './please-login';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import * as os from '@/os';
-import copyToClipboard from '@/scripts/copy-to-clipboard';
-import { url } from '@/config';
-import { noteActions } from '@/store';
-import { notePage } from '@/filters/note';
-
-export function getNoteMenu(props: {
-	note: misskey.entities.Note;
-	menuButton: Ref<HTMLElement>;
-	translation: Ref<any>;
-	translating: Ref<boolean>;
-	isDeleted: Ref<boolean>;
-	currentClipPage?: Ref<misskey.entities.Clip>;
-}) {
-	const isRenote = (
-		props.note.renote != null &&
-		props.note.text == null &&
-		props.note.fileIds.length === 0 &&
-		props.note.poll == null
-	);
-
-	const appearNote = isRenote ? props.note.renote as misskey.entities.Note : props.note;
-
-	function del(): void {
-		os.confirm({
-			type: 'warning',
-			text: i18n.ts.noteDeleteConfirm,
-		}).then(({ canceled }) => {
-			if (canceled) return;
-
-			os.api('notes/delete', {
-				noteId: appearNote.id,
-			});
-		});
-	}
-
-	function delEdit(): void {
-		os.confirm({
-			type: 'warning',
-			text: i18n.ts.deleteAndEditConfirm,
-		}).then(({ canceled }) => {
-			if (canceled) return;
-
-			os.api('notes/delete', {
-				noteId: appearNote.id,
-			});
-
-			os.post({ initialNote: appearNote, renote: appearNote.renote, reply: appearNote.reply, channel: appearNote.channel });
-		});
-	}
-
-	function toggleFavorite(favorite: boolean): void {
-		os.apiWithDialog(favorite ? 'notes/favorites/create' : 'notes/favorites/delete', {
-			noteId: appearNote.id,
-		});
-	}
-
-	function toggleThreadMute(mute: boolean): void {
-		os.apiWithDialog(mute ? 'notes/thread-muting/create' : 'notes/thread-muting/delete', {
-			noteId: appearNote.id,
-		});
-	}
-
-	function copyContent(): void {
-		copyToClipboard(appearNote.text);
-		os.success();
-	}
-
-	function copyLink(): void {
-		copyToClipboard(`${url}/notes/${appearNote.id}`);
-		os.success();
-	}
-
-	function togglePin(pin: boolean): void {
-		os.apiWithDialog(pin ? 'i/pin' : 'i/unpin', {
-			noteId: appearNote.id,
-		}, undefined, null, res => {
-			if (res.id === '72dab508-c64d-498f-8740-a8eec1ba385a') {
-				os.alert({
-					type: 'error',
-					text: i18n.ts.pinLimitExceeded,
-				});
-			}
-		});
-	}
-
-	async function clip(): Promise<void> {
-		const clips = await os.api('clips/list');
-		os.popupMenu([{
-			icon: 'ti ti-plus',
-			text: i18n.ts.createNew,
-			action: async () => {
-				const { canceled, result } = await os.form(i18n.ts.createNewClip, {
-					name: {
-						type: 'string',
-						label: i18n.ts.name,
-					},
-					description: {
-						type: 'string',
-						required: false,
-						multiline: true,
-						label: i18n.ts.description,
-					},
-					isPublic: {
-						type: 'boolean',
-						label: i18n.ts.public,
-						default: false,
-					},
-				});
-				if (canceled) return;
-
-				const clip = await os.apiWithDialog('clips/create', result);
-
-				os.apiWithDialog('clips/add-note', { clipId: clip.id, noteId: appearNote.id });
-			},
-		}, null, ...clips.map(clip => ({
-			text: clip.name,
-			action: () => {
-				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.currentClipPage?.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.currentClipPage.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,
-		});
-
-		if (canceled) return;
-
-		os.apiWithDialog('admin/promo/create', {
-			noteId: appearNote.id,
-			expiresAt: Date.now() + (86400000 * days),
-		});
-	}
-
-	function share(): void {
-		navigator.share({
-			title: i18n.t('noteOf', { user: appearNote.user.name }),
-			text: appearNote.text,
-			url: `${url}/notes/${appearNote.id}`,
-		});
-	}
-	function notedetails(): void {
-		os.pageWindow(`/notes/${appearNote.id}`);
-	}
-	async function translate(): Promise<void> {
-		if (props.translation.value != null) return;
-		props.translating.value = true;
-		const res = await os.api('notes/translate', {
-			noteId: appearNote.id,
-			targetLang: localStorage.getItem('lang') || navigator.language,
-		});
-		props.translating.value = false;
-		props.translation.value = res;
-	}
-
-	let menu;
-	if ($i) {
-		const statePromise = os.api('notes/state', {
-			noteId: appearNote.id,
-		});
-
-		menu = [
-			...(
-				props.currentClipPage?.value.userId === $i.id ? [{
-					icon: 'ti ti-backspace',
-					text: i18n.ts.unclip,
-					danger: true,
-					action: unclip,
-				}, null] : []
-			), {
-				icon: 'ti ti-external-link',
-				text: i18n.ts.details,
-				action: notedetails,
-			}, {
-				icon: 'ti ti-copy',
-				text: i18n.ts.copyContent,
-				action: copyContent,
-			}, {
-				icon: 'ti ti-link',
-				text: i18n.ts.copyLink,
-				action: copyLink,
-			}, (appearNote.url || appearNote.uri) ? {
-				icon: 'ti ti-external-link',
-				text: i18n.ts.showOnRemote,
-				action: () => {
-					window.open(appearNote.url || appearNote.uri, '_blank');
-				},
-			} : undefined,
-			{
-				icon: 'ti ti-share',
-				text: i18n.ts.share,
-				action: share,
-			},
-			instance.translatorAvailable ? {
-				icon: 'ti ti-language-hiragana',
-				text: i18n.ts.translate,
-				action: translate,
-			} : undefined,
-			null,
-			statePromise.then(state => state.isFavorited ? {
-				icon: 'ti ti-star-off',
-				text: i18n.ts.unfavorite,
-				action: () => toggleFavorite(false),
-			} : {
-				icon: 'ti ti-star',
-				text: i18n.ts.favorite,
-				action: () => toggleFavorite(true),
-			}),
-			{
-				icon: 'ti ti-paperclip',
-				text: i18n.ts.clip,
-				action: () => clip(),
-			},
-			statePromise.then(state => state.isMutedThread ? {
-				icon: 'ti ti-message-off',
-				text: i18n.ts.unmuteThread,
-				action: () => toggleThreadMute(false),
-			} : {
-				icon: 'ti ti-message-off',
-				text: i18n.ts.muteThread,
-				action: () => toggleThreadMute(true),
-			}),
-			appearNote.userId === $i.id ? ($i.pinnedNoteIds || []).includes(appearNote.id) ? {
-				icon: 'ti ti-pinned-off',
-				text: i18n.ts.unpin,
-				action: () => togglePin(false),
-			} : {
-				icon: 'ti ti-pin',
-				text: i18n.ts.pin,
-				action: () => togglePin(true),
-			} : undefined,
-			/*
-		...($i.isModerator || $i.isAdmin ? [
-			null,
-			{
-				icon: 'fas fa-bullhorn',
-				text: i18n.ts.promote,
-				action: promote
-			}]
-			: []
-		),*/
-			...(appearNote.userId !== $i.id ? [
-				null,
-				{
-					icon: 'ti ti-exclamation-circle',
-					text: i18n.ts.reportAbuse,
-					action: () => {
-						const u = appearNote.url || appearNote.uri || `${url}/notes/${appearNote.id}`;
-						os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
-							user: appearNote.user,
-							initialComment: `Note: ${u}\n-----\n`,
-						}, {}, 'closed');
-					},
-				}]
-			: []
-			),
-			...(appearNote.userId === $i.id || $i.isModerator || $i.isAdmin ? [
-				null,
-				appearNote.userId === $i.id ? {
-					icon: 'ti ti-edit',
-					text: i18n.ts.deleteAndEdit,
-					action: delEdit,
-				} : undefined,
-				{
-					icon: 'ti ti-trash',
-					text: i18n.ts.delete,
-					danger: true,
-					action: del,
-				}]
-			: []
-			)]
-			.filter(x => x !== undefined);
-	} else {
-		menu = [{
-			icon: 'ti ti-external-link',
-			text: i18n.ts.detailed,
-			action: openDetail,
-		}, {
-			icon: 'ti ti-copy',
-			text: i18n.ts.copyContent,
-			action: copyContent,
-		}, {
-			icon: 'ti ti-link',
-			text: i18n.ts.copyLink,
-			action: copyLink,
-		}, (appearNote.url || appearNote.uri) ? {
-			icon: 'ti ti-external-link',
-			text: i18n.ts.showOnRemote,
-			action: () => {
-				window.open(appearNote.url || appearNote.uri, '_blank');
-			},
-		} : undefined]
-			.filter(x => x !== undefined);
-	}
-
-	if (noteActions.length > 0) {
-		menu = menu.concat([null, ...noteActions.map(action => ({
-			icon: 'ti ti-plug',
-			text: action.title,
-			action: () => {
-				action.handler(appearNote);
-			},
-		}))]);
-	}
-
-	return menu;
-}
diff --git a/packages/client/src/scripts/get-note-summary.ts b/packages/client/src/scripts/get-note-summary.ts
deleted file mode 100644
index d57e1c3029..0000000000
--- a/packages/client/src/scripts/get-note-summary.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as misskey from 'misskey-js';
-import { i18n } from '@/i18n';
-
-/**
- * 投稿を表す文字列を取得します。
- * @param {*} note (packされた)投稿
- */
-export const getNoteSummary = (note: misskey.entities.Note): string => {
-	if (note.deletedAt) {
-		return `(${i18n.ts.deletedNote})`;
-	}
-
-	if (note.isHidden) {
-		return `(${i18n.ts.invisibleNote})`;
-	}
-
-	let summary = '';
-
-	// 本文
-	if (note.cw != null) {
-		summary += note.cw;
-	} else {
-		summary += note.text ? note.text : '';
-	}
-
-	// ファイルが添付されているとき
-	if ((note.files || []).length !== 0) {
-		summary += ` (${i18n.t('withNFiles', { n: note.files.length })})`;
-	}
-
-	// 投票が添付されているとき
-	if (note.poll) {
-		summary += ` (${i18n.ts.poll})`;
-	}
-
-	// 返信のとき
-	if (note.replyId) {
-		if (note.reply) {
-			summary += `\n\nRE: ${getNoteSummary(note.reply)}`;
-		} else {
-			summary += '\n\nRE: ...';
-		}
-	}
-
-	// Renoteのとき
-	if (note.renoteId) {
-		if (note.renote) {
-			summary += `\n\nRN: ${getNoteSummary(note.renote)}`;
-		} else {
-			summary += '\n\nRN: ...';
-		}
-	}
-
-	return summary.trim();
-};
diff --git a/packages/client/src/scripts/get-static-image-url.ts b/packages/client/src/scripts/get-static-image-url.ts
deleted file mode 100644
index cbd1761983..0000000000
--- a/packages/client/src/scripts/get-static-image-url.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { url as instanceUrl } from '@/config';
-import * as url from '@/scripts/url';
-
-export function getStaticImageUrl(baseUrl: string): string {
-	const u = new URL(baseUrl);
-	if (u.href.startsWith(`${instanceUrl}/proxy/`)) {
-		// もう既にproxyっぽそうだったらsearchParams付けるだけ
-		u.searchParams.set('static', '1');
-		return u.href;
-	}
-
-	// 拡張子がないとキャッシュしてくれないCDNがあるのでダミーの名前を指定する
-	const dummy = `${encodeURIComponent(`${u.host}${u.pathname}`)}.webp`;
-
-	return `${instanceUrl}/proxy/${dummy}?${url.query({
-		url: u.href,
-		static: '1',
-	})}`;
-}
diff --git a/packages/client/src/scripts/get-user-menu.ts b/packages/client/src/scripts/get-user-menu.ts
deleted file mode 100644
index 2faacffdfc..0000000000
--- a/packages/client/src/scripts/get-user-menu.ts
+++ /dev/null
@@ -1,253 +0,0 @@
-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 os from '@/os';
-import { userActions } from '@/store';
-import { $i, iAmModerator } from '@/account';
-import { mainRouter } from '@/router';
-import { Router } from '@/nirax';
-
-export function getUserMenu(user, router: Router = mainRouter) {
-	const meId = $i ? $i.id : null;
-
-	async function pushList() {
-		const t = i18n.ts.selectList; // なぜか後で参照すると null になるので最初にメモリに確保しておく
-		const lists = await os.api('users/lists/list');
-		if (lists.length === 0) {
-			os.alert({
-				type: 'error',
-				text: i18n.ts.youHaveNoLists,
-			});
-			return;
-		}
-		const { canceled, result: listId } = await os.select({
-			title: t,
-			items: lists.map(list => ({
-				value: list.id, text: list.name,
-			})),
-		});
-		if (canceled) return;
-		os.apiWithDialog('users/lists/push', {
-			listId: listId,
-			userId: user.id,
-		});
-	}
-
-	async function inviteGroup() {
-		const groups = await os.api('users/groups/owned');
-		if (groups.length === 0) {
-			os.alert({
-				type: 'error',
-				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,
-			})),
-		});
-		if (canceled) return;
-		os.apiWithDialog('users/groups/invite', {
-			groupId: groupId,
-			userId: user.id,
-		});
-	}
-
-	async function toggleMute() {
-		if (user.isMuted) {
-			os.apiWithDialog('mute/delete', {
-				userId: user.id,
-			}).then(() => {
-				user.isMuted = false;
-			});
-		} else {
-			const { canceled, result: period } = await os.select({
-				title: i18n.ts.mutePeriod,
-				items: [{
-					value: 'indefinitely', text: i18n.ts.indefinitely,
-				}, {
-					value: 'tenMinutes', text: i18n.ts.tenMinutes,
-				}, {
-					value: 'oneHour', text: i18n.ts.oneHour,
-				}, {
-					value: 'oneDay', text: i18n.ts.oneDay,
-				}, {
-					value: 'oneWeek', text: i18n.ts.oneWeek,
-				}],
-				default: 'indefinitely',
-			});
-			if (canceled) return;
-
-			const expiresAt = period === 'indefinitely' ? null
-				: period === 'tenMinutes' ? Date.now() + (1000 * 60 * 10)
-				: period === 'oneHour' ? Date.now() + (1000 * 60 * 60)
-				: period === 'oneDay' ? Date.now() + (1000 * 60 * 60 * 24)
-				: period === 'oneWeek' ? Date.now() + (1000 * 60 * 60 * 24 * 7)
-				: null;
-
-			os.apiWithDialog('mute/create', {
-				userId: user.id,
-				expiresAt,
-			}).then(() => {
-				user.isMuted = true;
-			});
-		}
-	}
-
-	async function toggleBlock() {
-		if (!await getConfirmed(user.isBlocking ? i18n.ts.unblockConfirm : i18n.ts.blockConfirm)) return;
-
-		os.apiWithDialog(user.isBlocking ? 'blocking/delete' : 'blocking/create', {
-			userId: user.id,
-		}).then(() => {
-			user.isBlocking = !user.isBlocking;
-		});
-	}
-
-	async function toggleSilence() {
-		if (!await getConfirmed(i18n.t(user.isSilenced ? 'unsilenceConfirm' : 'silenceConfirm'))) return;
-
-		os.apiWithDialog(user.isSilenced ? 'admin/unsilence-user' : 'admin/silence-user', {
-			userId: user.id,
-		}).then(() => {
-			user.isSilenced = !user.isSilenced;
-		});
-	}
-
-	async function toggleSuspend() {
-		if (!await getConfirmed(i18n.t(user.isSuspended ? 'unsuspendConfirm' : 'suspendConfirm'))) return;
-
-		os.apiWithDialog(user.isSuspended ? 'admin/unsuspend-user' : 'admin/suspend-user', {
-			userId: user.id,
-		}).then(() => {
-			user.isSuspended = !user.isSuspended;
-		});
-	}
-
-	function reportAbuse() {
-		os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
-			user: user,
-		}, {}, 'closed');
-	}
-
-	async function getConfirmed(text: string): Promise<boolean> {
-		const confirm = await os.confirm({
-			type: 'warning',
-			title: 'confirm',
-			text,
-		});
-
-		return !confirm.canceled;
-	}
-
-	async function invalidateFollow() {
-		os.apiWithDialog('following/invalidate', {
-			userId: user.id,
-		}).then(() => {
-			user.isFollowed = !user.isFollowed;
-		});
-	}
-
-	let menu = [{
-		icon: 'ti ti-at',
-		text: i18n.ts.copyUsername,
-		action: () => {
-			copyToClipboard(`@${user.username}@${user.host || host}`);
-		},
-	}, {
-		icon: 'ti ti-rss',
-		text: i18n.ts.copyRSS,
-		action: () => {
-			copyToClipboard(`${user.host || host}/@${user.username}.atom`);
-		}
-	}, {
-		icon: 'ti ti-info-circle',
-		text: i18n.ts.info,
-		action: () => {
-			router.push(`/user-info/${user.id}`);
-		},
-	}, {
-		icon: 'ti ti-mail',
-		text: i18n.ts.sendMessage,
-		action: () => {
-			os.post({ specified: user });
-		},
-	}, meId !== user.id ? {
-		type: 'link',
-		icon: 'ti ti-messages',
-		text: i18n.ts.startMessaging,
-		to: '/my/messaging/' + Acct.toString(user),
-	} : undefined, null, {
-		icon: 'ti ti-list',
-		text: i18n.ts.addToList,
-		action: pushList,
-	}, meId !== user.id ? {
-		icon: 'ti ti-users',
-		text: i18n.ts.inviteToGroup,
-		action: inviteGroup,
-	} : undefined] as any;
-
-	if ($i && meId !== user.id) {
-		menu = menu.concat([null, {
-			icon: user.isMuted ? 'ti ti-eye' : 'ti ti-eye-off',
-			text: user.isMuted ? i18n.ts.unmute : i18n.ts.mute,
-			action: toggleMute,
-		}, {
-			icon: 'ti ti-ban',
-			text: user.isBlocking ? i18n.ts.unblock : i18n.ts.block,
-			action: toggleBlock,
-		}]);
-
-		if (user.isFollowed) {
-			menu = menu.concat([{
-				icon: 'ti ti-link-off',
-				text: i18n.ts.breakFollow,
-				action: invalidateFollow,
-			}]);
-		}
-
-		menu = menu.concat([null, {
-			icon: 'ti ti-exclamation-circle',
-			text: i18n.ts.reportAbuse,
-			action: reportAbuse,
-		}]);
-
-		if (iAmModerator) {
-			menu = menu.concat([null, {
-				icon: 'ti ti-microphone-2-off',
-				text: user.isSilenced ? i18n.ts.unsilence : i18n.ts.silence,
-				action: toggleSilence,
-			}, {
-				icon: 'ti ti-snowflake',
-				text: user.isSuspended ? i18n.ts.unsuspend : i18n.ts.suspend,
-				action: toggleSuspend,
-			}]);
-		}
-	}
-
-	if ($i && meId === user.id) {
-		menu = menu.concat([null, {
-			icon: 'ti ti-pencil',
-			text: i18n.ts.editProfile,
-			action: () => {
-				router.push('/settings/profile');
-			},
-		}]);
-	}
-
-	if (userActions.length > 0) {
-		menu = menu.concat([null, ...userActions.map(action => ({
-			icon: 'ti ti-plug',
-			text: action.title,
-			action: () => {
-				action.handler(user);
-			},
-		}))]);
-	}
-
-	return menu;
-}
diff --git a/packages/client/src/scripts/get-user-name.ts b/packages/client/src/scripts/get-user-name.ts
deleted file mode 100644
index d499ea0203..0000000000
--- a/packages/client/src/scripts/get-user-name.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function(user: { name?: string | null, username: string }): string {
-	return user.name || user.username;
-}
diff --git a/packages/client/src/scripts/hotkey.ts b/packages/client/src/scripts/hotkey.ts
deleted file mode 100644
index 4a0ded637d..0000000000
--- a/packages/client/src/scripts/hotkey.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import keyCode from './keycode';
-
-type Callback = (ev: KeyboardEvent) => void;
-
-type Keymap = Record<string, Callback>;
-
-type Pattern = {
-	which: string[];
-	ctrl?: boolean;
-	shift?: boolean;
-	alt?: boolean;
-};
-
-type Action = {
-	patterns: Pattern[];
-	callback: Callback;
-	allowRepeat: boolean;
-};
-
-const parseKeymap = (keymap: Keymap) => Object.entries(keymap).map(([patterns, callback]): Action => {
-	const result = {
-		patterns: [],
-		callback,
-		allowRepeat: true,
-	} as Action;
-
-	if (patterns.match(/^\(.*\)$/) !== null) {
-		result.allowRepeat = false;
-		patterns = patterns.slice(1, -1);
-	}
-
-	result.patterns = patterns.split('|').map(part => {
-		const pattern = {
-			which: [],
-			ctrl: false,
-			alt: false,
-			shift: false,
-		} as Pattern;
-
-		const keys = part.trim().split('+').map(x => x.trim().toLowerCase());
-		for (const key of keys) {
-			switch (key) {
-				case 'ctrl': pattern.ctrl = true; break;
-				case 'alt': pattern.alt = true; break;
-				case 'shift': pattern.shift = true; break;
-				default: pattern.which = keyCode(key).map(k => k.toLowerCase());
-			}
-		}
-
-		return pattern;
-	});
-
-	return result;
-});
-
-const ignoreElemens = ['input', 'textarea'];
-
-function match(ev: KeyboardEvent, patterns: Action['patterns']): boolean {
-	const key = ev.code.toLowerCase();
-	return patterns.some(pattern => pattern.which.includes(key) &&
-		pattern.ctrl === ev.ctrlKey &&
-		pattern.shift === ev.shiftKey &&
-		pattern.alt === ev.altKey &&
-		!ev.metaKey,
-	);
-}
-
-export const makeHotkey = (keymap: Keymap) => {
-	const actions = parseKeymap(keymap);
-
-	return (ev: KeyboardEvent) => {
-		if (document.activeElement) {
-			if (ignoreElemens.some(el => document.activeElement!.matches(el))) return;
-			if (document.activeElement.attributes['contenteditable']) return;
-		}
-
-		for (const action of actions) {
-			const matched = match(ev, action.patterns);
-
-			if (matched) {
-				if (!action.allowRepeat && ev.repeat) return;
-
-				ev.preventDefault();
-				ev.stopPropagation();
-				action.callback(ev);
-				break;
-			}
-		}
-	};
-};
diff --git a/packages/client/src/scripts/hpml/block.ts b/packages/client/src/scripts/hpml/block.ts
deleted file mode 100644
index 804c5c1124..0000000000
--- a/packages/client/src/scripts/hpml/block.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-// blocks
-
-export type BlockBase = {
-	id: string;
-	type: string;
-};
-
-export type TextBlock = BlockBase & {
-	type: 'text';
-	text: string;
-};
-
-export type SectionBlock = BlockBase & {
-	type: 'section';
-	title: string;
-	children: (Block | VarBlock)[];
-};
-
-export type ImageBlock = BlockBase & {
-	type: 'image';
-	fileId: string | null;
-};
-
-export type ButtonBlock = BlockBase & {
-	type: 'button';
-	text: any;
-	primary: boolean;
-	action: string;
-	content: string;
-	event: string;
-	message: string;
-	var: string;
-	fn: string;
-};
-
-export type IfBlock = BlockBase & {
-	type: 'if';
-	var: string;
-	children: Block[];
-};
-
-export type TextareaBlock = BlockBase & {
-	type: 'textarea';
-	text: string;
-};
-
-export type PostBlock = BlockBase & {
-	type: 'post';
-	text: string;
-	attachCanvasImage: boolean;
-	canvasId: string;
-};
-
-export type CanvasBlock = BlockBase & {
-	type: 'canvas';
-	name: string; // canvas id
-	width: number;
-	height: number;
-};
-
-export type NoteBlock = BlockBase & {
-	type: 'note';
-	detailed: boolean;
-	note: string | null;
-};
-
-export type Block =
-	TextBlock | SectionBlock | ImageBlock | ButtonBlock | IfBlock | TextareaBlock | PostBlock | CanvasBlock | NoteBlock | VarBlock;
-
-// variable blocks
-
-export type VarBlockBase = BlockBase & {
-	name: string;
-};
-
-export type NumberInputVarBlock = VarBlockBase & {
-	type: 'numberInput';
-	text: string;
-};
-
-export type TextInputVarBlock = VarBlockBase & {
-	type: 'textInput';
-	text: string;
-};
-
-export type SwitchVarBlock = VarBlockBase & {
-	type: 'switch';
-	text: string;
-};
-
-export type RadioButtonVarBlock = VarBlockBase & {
-	type: 'radioButton';
-	title: string;
-	values: string[];
-};
-
-export type CounterVarBlock = VarBlockBase & {
-	type: 'counter';
-	text: string;
-	inc: number;
-};
-
-export type VarBlock =
-	NumberInputVarBlock | TextInputVarBlock | SwitchVarBlock | RadioButtonVarBlock | CounterVarBlock;
-
-const varBlock = ['numberInput', 'textInput', 'switch', 'radioButton', 'counter'];
-export function isVarBlock(block: Block): block is VarBlock {
-	return varBlock.includes(block.type);
-}
diff --git a/packages/client/src/scripts/hpml/evaluator.ts b/packages/client/src/scripts/hpml/evaluator.ts
deleted file mode 100644
index 196b3142a1..0000000000
--- a/packages/client/src/scripts/hpml/evaluator.ts
+++ /dev/null
@@ -1,232 +0,0 @@
-import autobind from 'autobind-decorator';
-import { PageVar, envVarsDef, Fn, HpmlScope, HpmlError } from '.';
-import { version } from '@/config';
-import { AiScript, utils, values } from '@syuilo/aiscript';
-import { createAiScriptEnv } from '../aiscript/api';
-import { collectPageVars } from '../collect-page-vars';
-import { initHpmlLib, initAiLib } from './lib';
-import * as os from '@/os';
-import { markRaw, ref, Ref, unref } from 'vue';
-import { Expr, isLiteralValue, Variable } from './expr';
-
-/**
- * Hpml evaluator
- */
-export class Hpml {
-	private variables: Variable[];
-	private pageVars: PageVar[];
-	private envVars: Record<keyof typeof envVarsDef, any>;
-	public aiscript?: AiScript;
-	public pageVarUpdatedCallback?: values.VFn;
-	public canvases: Record<string, HTMLCanvasElement> = {};
-	public vars: Ref<Record<string, any>> = ref({});
-	public page: Record<string, any>;
-
-	private opts: {
-		randomSeed: string; visitor?: any; url?: string;
-		enableAiScript: boolean;
-	};
-
-	constructor(page: Hpml['page'], opts: Hpml['opts']) {
-		this.page = page;
-		this.variables = this.page.variables;
-		this.pageVars = collectPageVars(this.page.content);
-		this.opts = opts;
-
-		if (this.opts.enableAiScript) {
-			this.aiscript = markRaw(new AiScript({ ...createAiScriptEnv({
-				storageKey: 'pages:' + this.page.id,
-			}), ...initAiLib(this) }, {
-				in: (q) => {
-					return new Promise(ok => {
-						os.inputText({
-							title: q,
-						}).then(({ canceled, result: a }) => {
-							ok(a);
-						});
-					});
-				},
-				out: (value) => {
-					console.log(value);
-				},
-				log: (type, params) => {
-				},
-			}));
-
-			this.aiscript.scope.opts.onUpdated = (name, value) => {
-				this.eval();
-			};
-		}
-
-		const date = new Date();
-
-		this.envVars = {
-			AI: 'kawaii',
-			VERSION: version,
-			URL: this.page ? `${opts.url}/@${this.page.user.username}/pages/${this.page.name}` : '',
-			LOGIN: opts.visitor != null,
-			NAME: opts.visitor ? opts.visitor.name || opts.visitor.username : '',
-			USERNAME: opts.visitor ? opts.visitor.username : '',
-			USERID: opts.visitor ? opts.visitor.id : '',
-			NOTES_COUNT: opts.visitor ? opts.visitor.notesCount : 0,
-			FOLLOWERS_COUNT: opts.visitor ? opts.visitor.followersCount : 0,
-			FOLLOWING_COUNT: opts.visitor ? opts.visitor.followingCount : 0,
-			IS_CAT: opts.visitor ? opts.visitor.isCat : false,
-			SEED: opts.randomSeed ? opts.randomSeed : '',
-			YMD: `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`,
-			AISCRIPT_DISABLED: !this.opts.enableAiScript,
-			NULL: null,
-		};
-
-		this.eval();
-	}
-
-	@autobind
-	public eval() {
-		try {
-			this.vars.value = this.evaluateVars();
-		} catch (err) {
-			//this.onError(e);
-		}
-	}
-
-	@autobind
-	public interpolate(str: string) {
-		if (str == null) return null;
-		return str.replace(/{(.+?)}/g, match => {
-			const v = unref(this.vars)[match.slice(1, -1).trim()];
-			return v == null ? 'NULL' : v.toString();
-		});
-	}
-
-	@autobind
-	public callAiScript(fn: string) {
-		try {
-			if (this.aiscript) this.aiscript.execFn(this.aiscript.scope.get(fn), []);
-		} catch (err) {}
-	}
-
-	@autobind
-	public registerCanvas(id: string, canvas: any) {
-		this.canvases[id] = canvas;
-	}
-
-	@autobind
-	public updatePageVar(name: string, value: any) {
-		const pageVar = this.pageVars.find(v => v.name === name);
-		if (pageVar !== undefined) {
-			pageVar.value = value;
-			if (this.pageVarUpdatedCallback) {
-				if (this.aiscript) this.aiscript.execFn(this.pageVarUpdatedCallback, [values.STR(name), utils.jsToVal(value)]);
-			}
-		} else {
-			throw new HpmlError(`No such page var '${name}'`);
-		}
-	}
-
-	@autobind
-	public updateRandomSeed(seed: string) {
-		this.opts.randomSeed = seed;
-		this.envVars.SEED = seed;
-	}
-
-	@autobind
-	private _interpolateScope(str: string, scope: HpmlScope) {
-		return str.replace(/{(.+?)}/g, match => {
-			const v = scope.getState(match.slice(1, -1).trim());
-			return v == null ? 'NULL' : v.toString();
-		});
-	}
-
-	@autobind
-	public evaluateVars(): Record<string, any> {
-		const values: Record<string, any> = {};
-
-		for (const [k, v] of Object.entries(this.envVars)) {
-			values[k] = v;
-		}
-
-		for (const v of this.pageVars) {
-			values[v.name] = v.value;
-		}
-
-		for (const v of this.variables) {
-			values[v.name] = this.evaluate(v, new HpmlScope([values]));
-		}
-
-		return values;
-	}
-
-	@autobind
-	private evaluate(expr: Expr, scope: HpmlScope): any {
-		if (isLiteralValue(expr)) {
-			if (expr.type === null) {
-				return null;
-			}
-
-			if (expr.type === 'number') {
-				return parseInt((expr.value as any), 10);
-			}
-
-			if (expr.type === 'text' || expr.type === 'multiLineText') {
-				return this._interpolateScope(expr.value || '', scope);
-			}
-
-			if (expr.type === 'textList') {
-				return this._interpolateScope(expr.value || '', scope).trim().split('\n');
-			}
-
-			if (expr.type === 'ref') {
-				return scope.getState(expr.value);
-			}
-
-			if (expr.type === 'aiScriptVar') {
-				if (this.aiscript) {
-					try {
-						return utils.valToJs(this.aiscript.scope.get(expr.value));
-					} catch (err) {
-						return null;
-					}
-				} else {
-					return null;
-				}
-			}
-
-			// Define user function
-			if (expr.type === 'fn') {
-				return {
-					slots: expr.value.slots.map(x => x.name),
-					exec: (slotArg: Record<string, any>) => {
-						return this.evaluate(expr.value.expression, scope.createChildScope(slotArg, expr.id));
-					},
-				} as Fn;
-			}
-			return;
-		}
-
-		// Call user function
-		if (expr.type.startsWith('fn:')) {
-			const fnName = expr.type.split(':')[1];
-			const fn = scope.getState(fnName);
-			const args = {} as Record<string, any>;
-			for (let i = 0; i < fn.slots.length; i++) {
-				const name = fn.slots[i];
-				args[name] = this.evaluate(expr.args[i], scope);
-			}
-			return fn.exec(args);
-		}
-
-		if (expr.args === undefined) return null;
-
-		const funcs = initHpmlLib(expr, scope, this.opts.randomSeed, this.opts.visitor);
-
-		// Call function
-		const fnName = expr.type;
-		const fn = (funcs as any)[fnName];
-		if (fn == null) {
-			throw new HpmlError(`No such function '${fnName}'`);
-		} else {
-			return fn(...expr.args.map(x => this.evaluate(x, scope)));
-		}
-	}
-}
diff --git a/packages/client/src/scripts/hpml/expr.ts b/packages/client/src/scripts/hpml/expr.ts
deleted file mode 100644
index 18c7c2a14b..0000000000
--- a/packages/client/src/scripts/hpml/expr.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { literalDefs, Type } from '.';
-
-export type ExprBase = {
-	id: string;
-};
-
-// value
-
-export type EmptyValue = ExprBase & {
-	type: null;
-	value: null;
-};
-
-export type TextValue = ExprBase & {
-	type: 'text';
-	value: string;
-};
-
-export type MultiLineTextValue = ExprBase & {
-	type: 'multiLineText';
-	value: string;
-};
-
-export type TextListValue = ExprBase & {
-	type: 'textList';
-	value: string;
-};
-
-export type NumberValue = ExprBase & {
-	type: 'number';
-	value: number;
-};
-
-export type RefValue = ExprBase & {
-	type: 'ref';
-	value: string; // value is variable name
-};
-
-export type AiScriptRefValue = ExprBase & {
-	type: 'aiScriptVar';
-	value: string; // value is variable name
-};
-
-export type UserFnValue = ExprBase & {
-	type: 'fn';
-	value: UserFnInnerValue;
-};
-type UserFnInnerValue = {
-	slots: {
-		name: string;
-		type: Type;
-	}[];
-	expression: Expr;
-};
-
-export type Value =
-	EmptyValue | TextValue | MultiLineTextValue | TextListValue | NumberValue | RefValue | AiScriptRefValue | UserFnValue;
-
-export function isLiteralValue(expr: Expr): expr is Value {
-	if (expr.type == null) return true;
-	if (literalDefs[expr.type]) return true;
-	return false;
-}
-
-// call function
-
-export type CallFn = ExprBase & { // "fn:hoge" or string
-	type: string;
-	args: Expr[];
-	value: null;
-};
-
-// variable
-export type Variable = (Value | CallFn) & {
-	name: string;
-};
-
-// expression
-export type Expr = Variable | Value | CallFn;
diff --git a/packages/client/src/scripts/hpml/index.ts b/packages/client/src/scripts/hpml/index.ts
deleted file mode 100644
index 9a55a5c286..0000000000
--- a/packages/client/src/scripts/hpml/index.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Hpml
- */
-
-import autobind from 'autobind-decorator';
-import { Hpml } from './evaluator';
-import { funcDefs } from './lib';
-
-export type Fn = {
-	slots: string[];
-	exec: (args: Record<string, any>) => ReturnType<Hpml['evaluate']>;
-};
-
-export type Type = 'string' | 'number' | 'boolean' | 'stringArray' | null;
-
-export const literalDefs: Record<string, { out: any; category: string; icon: any; }> = {
-	text: { out: 'string', category: 'value', icon: 'ti ti-quote' },
-	multiLineText: { out: 'string', category: 'value', icon: 'fas fa-align-left' },
-	textList: { out: 'stringArray', category: 'value', icon: 'fas fa-list' },
-	number: { out: 'number', category: 'value', icon: 'fas fa-sort-numeric-up' },
-	ref: { out: null, category: 'value', icon: 'fas fa-magic' },
-	aiScriptVar: { out: null, category: 'value', icon: 'fas fa-magic' },
-	fn: { out: 'function', category: 'value', icon: 'fas fa-square-root-alt' },
-};
-
-export const blockDefs = [
-	...Object.entries(literalDefs).map(([k, v]) => ({
-		type: k, out: v.out, category: v.category, icon: v.icon,
-	})),
-	...Object.entries(funcDefs).map(([k, v]) => ({
-		type: k, out: v.out, category: v.category, icon: v.icon,
-	})),
-];
-
-export type PageVar = { name: string; value: any; type: Type; };
-
-export const envVarsDef: Record<string, Type> = {
-	AI: 'string',
-	URL: 'string',
-	VERSION: 'string',
-	LOGIN: 'boolean',
-	NAME: 'string',
-	USERNAME: 'string',
-	USERID: 'string',
-	NOTES_COUNT: 'number',
-	FOLLOWERS_COUNT: 'number',
-	FOLLOWING_COUNT: 'number',
-	IS_CAT: 'boolean',
-	SEED: null,
-	YMD: 'string',
-	AISCRIPT_DISABLED: 'boolean',
-	NULL: null,
-};
-
-export class HpmlScope {
-	private layerdStates: Record<string, any>[];
-	public name: string;
-
-	constructor(layerdStates: HpmlScope['layerdStates'], name?: HpmlScope['name']) {
-		this.layerdStates = layerdStates;
-		this.name = name || 'anonymous';
-	}
-
-	@autobind
-	public createChildScope(states: Record<string, any>, name?: HpmlScope['name']): HpmlScope {
-		const layer = [states, ...this.layerdStates];
-		return new HpmlScope(layer, name);
-	}
-
-	/**
-	 * 指定した名前の変数の値を取得します
-	 * @param name 変数名
-	 */
-	@autobind
-	public getState(name: string): any {
-		for (const later of this.layerdStates) {
-			const state = later[name];
-			if (state !== undefined) {
-				return state;
-			}
-		}
-
-		throw new HpmlError(
-			`No such variable '${name}' in scope '${this.name}'`, {
-				scope: this.layerdStates,
-			});
-	}
-}
-
-export class HpmlError extends Error {
-	public info?: any;
-
-	constructor(message: string, info?: any) {
-		super(message);
-
-		this.info = info;
-
-		// Maintains proper stack trace for where our error was thrown (only available on V8)
-		if (Error.captureStackTrace) {
-			Error.captureStackTrace(this, HpmlError);
-		}
-	}
-}
diff --git a/packages/client/src/scripts/hpml/lib.ts b/packages/client/src/scripts/hpml/lib.ts
deleted file mode 100644
index b684876a7f..0000000000
--- a/packages/client/src/scripts/hpml/lib.ts
+++ /dev/null
@@ -1,247 +0,0 @@
-import tinycolor from 'tinycolor2';
-import { Hpml } from './evaluator';
-import { values, utils } from '@syuilo/aiscript';
-import { Fn, HpmlScope } from '.';
-import { Expr } from './expr';
-import seedrandom from 'seedrandom';
-
-/* TODO: https://www.chartjs.org/docs/latest/configuration/canvas-background.html#color
-// https://stackoverflow.com/questions/38493564/chart-area-background-color-chartjs
-Chart.pluginService.register({
-	beforeDraw: (chart, easing) => {
-		if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
-			const ctx = chart.chart.ctx;
-			ctx.save();
-			ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
-			ctx.fillRect(0, 0, chart.chart.width, chart.chart.height);
-			ctx.restore();
-		}
-	}
-});
-*/
-
-export function initAiLib(hpml: Hpml) {
-	return {
-		'MkPages:updated': values.FN_NATIVE(([callback]) => {
-			hpml.pageVarUpdatedCallback = (callback as values.VFn);
-		}),
-		'MkPages:get_canvas': values.FN_NATIVE(([id]) => {
-			utils.assertString(id);
-			const canvas = hpml.canvases[id.value];
-			const ctx = canvas.getContext('2d');
-			return values.OBJ(new Map([
-				['clear_rect', values.FN_NATIVE(([x, y, width, height]) => { ctx.clearRect(x.value, y.value, width.value, height.value); })],
-				['fill_rect', values.FN_NATIVE(([x, y, width, height]) => { ctx.fillRect(x.value, y.value, width.value, height.value); })],
-				['stroke_rect', values.FN_NATIVE(([x, y, width, height]) => { ctx.strokeRect(x.value, y.value, width.value, height.value); })],
-				['fill_text', values.FN_NATIVE(([text, x, y, width]) => { ctx.fillText(text.value, x.value, y.value, width ? width.value : undefined); })],
-				['stroke_text', values.FN_NATIVE(([text, x, y, width]) => { ctx.strokeText(text.value, x.value, y.value, width ? width.value : undefined); })],
-				['set_line_width', values.FN_NATIVE(([width]) => { ctx.lineWidth = width.value; })],
-				['set_font', values.FN_NATIVE(([font]) => { ctx.font = font.value; })],
-				['set_fill_style', values.FN_NATIVE(([style]) => { ctx.fillStyle = style.value; })],
-				['set_stroke_style', values.FN_NATIVE(([style]) => { ctx.strokeStyle = style.value; })],
-				['begin_path', values.FN_NATIVE(() => { ctx.beginPath(); })],
-				['close_path', values.FN_NATIVE(() => { ctx.closePath(); })],
-				['move_to', values.FN_NATIVE(([x, y]) => { ctx.moveTo(x.value, y.value); })],
-				['line_to', values.FN_NATIVE(([x, y]) => { ctx.lineTo(x.value, y.value); })],
-				['arc', values.FN_NATIVE(([x, y, radius, startAngle, endAngle]) => { ctx.arc(x.value, y.value, radius.value, startAngle.value, endAngle.value); })],
-				['rect', values.FN_NATIVE(([x, y, width, height]) => { ctx.rect(x.value, y.value, width.value, height.value); })],
-				['fill', values.FN_NATIVE(() => { ctx.fill(); })],
-				['stroke', values.FN_NATIVE(() => { ctx.stroke(); })],
-			]));
-		}),
-		'MkPages:chart': values.FN_NATIVE(([id, opts]) => {
-			/* TODO
-			utils.assertString(id);
-			utils.assertObject(opts);
-			const canvas = hpml.canvases[id.value];
-			const color = getComputedStyle(document.documentElement).getPropertyValue('--accent');
-			Chart.defaults.color = '#555';
-			const chart = new Chart(canvas, {
-				type: opts.value.get('type').value,
-				data: {
-					labels: opts.value.get('labels').value.map(x => x.value),
-					datasets: opts.value.get('datasets').value.map(x => ({
-						label: x.value.has('label') ? x.value.get('label').value : '',
-						data: x.value.get('data').value.map(x => x.value),
-						pointRadius: 0,
-						lineTension: 0,
-						borderWidth: 2,
-						borderColor: x.value.has('color') ? x.value.get('color') : color,
-						backgroundColor: tinycolor(x.value.has('color') ? x.value.get('color') : color).setAlpha(0.1).toRgbString(),
-					}))
-				},
-				options: {
-					responsive: false,
-					devicePixelRatio: 1.5,
-					title: {
-						display: opts.value.has('title'),
-						text: opts.value.has('title') ? opts.value.get('title').value : '',
-						fontSize: 14,
-					},
-					layout: {
-						padding: {
-							left: 32,
-							right: 32,
-							top: opts.value.has('title') ? 16 : 32,
-							bottom: 16
-						}
-					},
-					legend: {
-						display: opts.value.get('datasets').value.filter(x => x.value.has('label') && x.value.get('label').value).length === 0 ? false : true,
-						position: 'bottom',
-						labels: {
-							boxWidth: 16,
-						}
-					},
-					tooltips: {
-						enabled: false,
-					},
-					chartArea: {
-						backgroundColor: '#fff'
-					},
-					...(opts.value.get('type').value === 'radar' ? {
-						scale: {
-							ticks: {
-								display: opts.value.has('show_tick_label') ? opts.value.get('show_tick_label').value : false,
-								min: opts.value.has('min') ? opts.value.get('min').value : undefined,
-								max: opts.value.has('max') ? opts.value.get('max').value : undefined,
-								maxTicksLimit: 8,
-							},
-							pointLabels: {
-								fontSize: 12
-							}
-						}
-					} : {
-						scales: {
-							yAxes: [{
-								ticks: {
-									display: opts.value.has('show_tick_label') ? opts.value.get('show_tick_label').value : true,
-									min: opts.value.has('min') ? opts.value.get('min').value : undefined,
-									max: opts.value.has('max') ? opts.value.get('max').value : undefined,
-								}
-							}]
-						}
-					})
-				}
-			});
-			*/
-		}),
-	};
-}
-
-export const funcDefs: Record<string, { in: any[]; out: any; category: string; icon: any; }> = {
-	if: { in: ['boolean', 0, 0], out: 0, category: 'flow', icon: 'ti ti-share' },
-	for: { in: ['number', 'function'], out: null, category: 'flow', icon: 'fas fa-recycle' },
-	not: { in: ['boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
-	or: { in: ['boolean', 'boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
-	and: { in: ['boolean', 'boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
-	add: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'ti ti-plus' },
-	subtract: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'ti ti-minus' },
-	multiply: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'ti ti-x' },
-	divide: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-divide' },
-	mod: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-divide' },
-	round: { in: ['number'], out: 'number', category: 'operation', icon: 'fas fa-calculator' },
-	eq: { in: [0, 0], out: 'boolean', category: 'comparison', icon: 'fas fa-equals' },
-	notEq: { in: [0, 0], out: 'boolean', category: 'comparison', icon: 'fas fa-not-equal' },
-	gt: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-greater-than' },
-	lt: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-less-than' },
-	gtEq: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-greater-than-equal' },
-	ltEq: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-less-than-equal' },
-	strLen: { in: ['string'], out: 'number', category: 'text', icon: 'ti ti-quote' },
-	strPick: { in: ['string', 'number'], out: 'string', category: 'text', icon: 'ti ti-quote' },
-	strReplace: { in: ['string', 'string', 'string'], out: 'string', category: 'text', icon: 'ti ti-quote' },
-	strReverse: { in: ['string'], out: 'string', category: 'text', icon: 'ti ti-quote' },
-	join: { in: ['stringArray', 'string'], out: 'string', category: 'text', icon: 'ti ti-quote' },
-	stringToNumber: { in: ['string'], out: 'number', category: 'convert', icon: 'fas fa-exchange-alt' },
-	numberToString: { in: ['number'], out: 'string', category: 'convert', icon: 'fas fa-exchange-alt' },
-	splitStrByLine: { in: ['string'], out: 'stringArray', category: 'convert', icon: 'fas fa-exchange-alt' },
-	pick: { in: [null, 'number'], out: null, category: 'list', icon: 'fas fa-indent' },
-	listLen: { in: [null], out: 'number', category: 'list', icon: 'fas fa-indent' },
-	rannum: { in: ['number', 'number'], out: 'number', category: 'random', icon: 'fas fa-dice' },
-	dailyRannum: { in: ['number', 'number'], out: 'number', category: 'random', icon: 'fas fa-dice' },
-	seedRannum: { in: [null, 'number', 'number'], out: 'number', category: 'random', icon: 'fas fa-dice' },
-	random: { in: ['number'], out: 'boolean', category: 'random', icon: 'fas fa-dice' },
-	dailyRandom: { in: ['number'], out: 'boolean', category: 'random', icon: 'fas fa-dice' },
-	seedRandom: { in: [null, 'number'], out: 'boolean', category: 'random', icon: 'fas fa-dice' },
-	randomPick: { in: [0], out: 0, category: 'random', icon: 'fas fa-dice' },
-	dailyRandomPick: { in: [0], out: 0, category: 'random', icon: 'fas fa-dice' },
-	seedRandomPick: { in: [null, 0], out: 0, category: 'random', icon: 'fas fa-dice' },
-	DRPWPM: { in: ['stringArray'], out: 'string', category: 'random', icon: 'fas fa-dice' }, // dailyRandomPickWithProbabilityMapping
-};
-
-export function initHpmlLib(expr: Expr, scope: HpmlScope, randomSeed: string, visitor?: any) {
-	const date = new Date();
-	const day = `${visitor ? visitor.id : ''} ${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
-
-	// SHOULD be fine to ignore since it's intended + function shape isn't defined
-	// eslint-disable-next-line @typescript-eslint/ban-types
-	const funcs: Record<string, Function> = {
-		not: (a: boolean) => !a,
-		or: (a: boolean, b: boolean) => a || b,
-		and: (a: boolean, b: boolean) => a && b,
-		eq: (a: any, b: any) => a === b,
-		notEq: (a: any, b: any) => a !== b,
-		gt: (a: number, b: number) => a > b,
-		lt: (a: number, b: number) => a < b,
-		gtEq: (a: number, b: number) => a >= b,
-		ltEq: (a: number, b: number) => a <= b,
-		if: (bool: boolean, a: any, b: any) => bool ? a : b,
-		for: (times: number, fn: Fn) => {
-			const result: any[] = [];
-			for (let i = 0; i < times; i++) {
-				result.push(fn.exec({
-					[fn.slots[0]]: i + 1,
-				}));
-			}
-			return result;
-		},
-		add: (a: number, b: number) => a + b,
-		subtract: (a: number, b: number) => a - b,
-		multiply: (a: number, b: number) => a * b,
-		divide: (a: number, b: number) => a / b,
-		mod: (a: number, b: number) => a % b,
-		round: (a: number) => Math.round(a),
-		strLen: (a: string) => a.length,
-		strPick: (a: string, b: number) => a[b - 1],
-		strReplace: (a: string, b: string, c: string) => a.split(b).join(c),
-		strReverse: (a: string) => a.split('').reverse().join(''),
-		join: (texts: string[], separator: string) => texts.join(separator || ''),
-		stringToNumber: (a: string) => parseInt(a),
-		numberToString: (a: number) => a.toString(),
-		splitStrByLine: (a: string) => a.split('\n'),
-		pick: (list: any[], i: number) => list[i - 1],
-		listLen: (list: any[]) => list.length,
-		random: (probability: number) => Math.floor(seedrandom(`${randomSeed}:${expr.id}`)() * 100) < probability,
-		rannum: (min: number, max: number) => min + Math.floor(seedrandom(`${randomSeed}:${expr.id}`)() * (max - min + 1)),
-		randomPick: (list: any[]) => list[Math.floor(seedrandom(`${randomSeed}:${expr.id}`)() * list.length)],
-		dailyRandom: (probability: number) => Math.floor(seedrandom(`${day}:${expr.id}`)() * 100) < probability,
-		dailyRannum: (min: number, max: number) => min + Math.floor(seedrandom(`${day}:${expr.id}`)() * (max - min + 1)),
-		dailyRandomPick: (list: any[]) => list[Math.floor(seedrandom(`${day}:${expr.id}`)() * list.length)],
-		seedRandom: (seed: any, probability: number) => Math.floor(seedrandom(seed)() * 100) < probability,
-		seedRannum: (seed: any, min: number, max: number) => min + Math.floor(seedrandom(seed)() * (max - min + 1)),
-		seedRandomPick: (seed: any, list: any[]) => list[Math.floor(seedrandom(seed)() * list.length)],
-		DRPWPM: (list: string[]) => {
-			const xs: any[] = [];
-			let totalFactor = 0;
-			for (const x of list) {
-				const parts = x.split(' ');
-				const factor = parseInt(parts.pop()!, 10);
-				const text = parts.join(' ');
-				totalFactor += factor;
-				xs.push({ factor, text });
-			}
-			const r = seedrandom(`${day}:${expr.id}`)() * totalFactor;
-			let stackedFactor = 0;
-			for (const x of xs) {
-				if (r >= stackedFactor && r <= stackedFactor + x.factor) {
-					return x.text;
-				} else {
-					stackedFactor += x.factor;
-				}
-			}
-			return xs[0].text;
-		},
-	};
-
-	return funcs;
-}
diff --git a/packages/client/src/scripts/hpml/type-checker.ts b/packages/client/src/scripts/hpml/type-checker.ts
deleted file mode 100644
index 24c9ed8bcb..0000000000
--- a/packages/client/src/scripts/hpml/type-checker.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-import autobind from 'autobind-decorator';
-import { isLiteralValue } from './expr';
-import { funcDefs } from './lib';
-import { envVarsDef } from '.';
-import type { Type, PageVar } from '.';
-import type { Expr, Variable } from './expr';
-
-type TypeError = {
-	arg: number;
-	expect: Type;
-	actual: Type;
-};
-
-/**
- * Hpml type checker
- */
-export class HpmlTypeChecker {
-	public variables: Variable[];
-	public pageVars: PageVar[];
-
-	constructor(variables: HpmlTypeChecker['variables'] = [], pageVars: HpmlTypeChecker['pageVars'] = []) {
-		this.variables = variables;
-		this.pageVars = pageVars;
-	}
-
-	@autobind
-	public typeCheck(v: Expr): TypeError | null {
-		if (isLiteralValue(v)) return null;
-
-		const def = funcDefs[v.type || ''];
-		if (def == null) {
-			throw new Error('Unknown type: ' + v.type);
-		}
-
-		const generic: Type[] = [];
-
-		for (let i = 0; i < def.in.length; i++) {
-			const arg = def.in[i];
-			const type = this.infer(v.args[i]);
-			if (type === null) continue;
-
-			if (typeof arg === 'number') {
-				if (generic[arg] === undefined) {
-					generic[arg] = type;
-				} else if (type !== generic[arg]) {
-					return {
-						arg: i,
-						expect: generic[arg],
-						actual: type,
-					};
-				}
-			} else if (type !== arg) {
-				return {
-					arg: i,
-					expect: arg,
-					actual: type,
-				};
-			}
-		}
-
-		return null;
-	}
-
-	@autobind
-	public getExpectedType(v: Expr, slot: number): Type {
-		const def = funcDefs[v.type || ''];
-		if (def == null) {
-			throw new Error('Unknown type: ' + v.type);
-		}
-
-		const generic: Type[] = [];
-
-		for (let i = 0; i < def.in.length; i++) {
-			const arg = def.in[i];
-			const type = this.infer(v.args[i]);
-			if (type === null) continue;
-
-			if (typeof arg === 'number') {
-				if (generic[arg] === undefined) {
-					generic[arg] = type;
-				}
-			}
-		}
-
-		if (typeof def.in[slot] === 'number') {
-			return generic[def.in[slot]] ?? null;
-		} else {
-			return def.in[slot];
-		}
-	}
-
-	@autobind
-	public infer(v: Expr): Type {
-		if (v.type === null) return null;
-		if (v.type === 'text') return 'string';
-		if (v.type === 'multiLineText') return 'string';
-		if (v.type === 'textList') return 'stringArray';
-		if (v.type === 'number') return 'number';
-		if (v.type === 'ref') {
-			const variable = this.variables.find(va => va.name === v.value);
-			if (variable) {
-				return this.infer(variable);
-			}
-
-			const pageVar = this.pageVars.find(va => va.name === v.value);
-			if (pageVar) {
-				return pageVar.type;
-			}
-
-			const envVar = envVarsDef[v.value || ''];
-			if (envVar !== undefined) {
-				return envVar;
-			}
-
-			return null;
-		}
-		if (v.type === 'aiScriptVar') return null;
-		if (v.type === 'fn') return null; // todo
-		if (v.type.startsWith('fn:')) return null; // todo
-
-		const generic: Type[] = [];
-
-		const def = funcDefs[v.type];
-
-		for (let i = 0; i < def.in.length; i++) {
-			const arg = def.in[i];
-			if (typeof arg === 'number') {
-				const type = this.infer(v.args[i]);
-
-				if (generic[arg] === undefined) {
-					generic[arg] = type;
-				} else {
-					if (type !== generic[arg]) {
-						generic[arg] = null;
-					}
-				}
-			}
-		}
-
-		if (typeof def.out === 'number') {
-			return generic[def.out];
-		} else {
-			return def.out;
-		}
-	}
-
-	@autobind
-	public getVarByName(name: string): Variable {
-		const v = this.variables.find(x => x.name === name);
-		if (v !== undefined) {
-			return v;
-		} else {
-			throw new Error(`No such variable '${name}'`);
-		}
-	}
-
-	@autobind
-	public getVarsByType(type: Type): Variable[] {
-		if (type == null) return this.variables;
-		return this.variables.filter(x => (this.infer(x) === null) || (this.infer(x) === type));
-	}
-
-	@autobind
-	public getEnvVarsByType(type: Type): string[] {
-		if (type == null) return Object.keys(envVarsDef);
-		return Object.entries(envVarsDef).filter(([k, v]) => v === null || type === v).map(([k, v]) => k);
-	}
-
-	@autobind
-	public getPageVarsByType(type: Type): string[] {
-		if (type == null) return this.pageVars.map(v => v.name);
-		return this.pageVars.filter(v => type === v.type).map(v => v.name);
-	}
-
-	@autobind
-	public isUsedName(name: string) {
-		if (this.variables.some(v => v.name === name)) {
-			return true;
-		}
-
-		if (this.pageVars.some(v => v.name === name)) {
-			return true;
-		}
-
-		if (envVarsDef[name]) {
-			return true;
-		}
-
-		return false;
-	}
-}
diff --git a/packages/client/src/scripts/i18n.ts b/packages/client/src/scripts/i18n.ts
deleted file mode 100644
index 54184386da..0000000000
--- a/packages/client/src/scripts/i18n.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export class I18n<T extends Record<string, any>> {
-	public ts: T;
-
-	constructor(locale: T) {
-		this.ts = locale;
-
-		//#region BIND
-		this.t = this.t.bind(this);
-		//#endregion
-	}
-
-	// string にしているのは、ドット区切りでのパス指定を許可するため
-	// なるべくこのメソッド使うよりもlocale直接参照の方がvueのキャッシュ効いてパフォーマンスが良いかも
-	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.toString());
-				}
-			}
-			return str;
-		} catch (err) {
-			console.warn(`missing localization '${key}'`);
-			return key;
-		}
-	}
-}
diff --git a/packages/client/src/scripts/idb-proxy.ts b/packages/client/src/scripts/idb-proxy.ts
deleted file mode 100644
index 77bb84463c..0000000000
--- a/packages/client/src/scripts/idb-proxy.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-// FirefoxのプライベートモードなどではindexedDBが使用不可能なので、
-// indexedDBが使えない環境ではlocalStorageを使う
-import {
-	get as iget,
-	set as iset,
-	del as idel,
-} from 'idb-keyval';
-
-const fallbackName = (key: string) => `idbfallback::${key}`;
-
-let idbAvailable = typeof window !== 'undefined' ? !!window.indexedDB : true;
-
-if (idbAvailable) {
-	iset('idb-test', 'test').catch(err => {
-		console.error('idb error', err);
-		console.error('indexedDB is unavailable. It will use localStorage.');
-		idbAvailable = false;
-	});
-} else {
-	console.error('indexedDB is unavailable. It will use localStorage.');
-}
-
-export async function get(key: string) {
-	if (idbAvailable) return iget(key);
-	return JSON.parse(localStorage.getItem(fallbackName(key)));
-}
-
-export async function set(key: string, val: any) {
-	if (idbAvailable) return iset(key, val);
-	return localStorage.setItem(fallbackName(key), JSON.stringify(val));
-}
-
-export async function del(key: string) {
-	if (idbAvailable) return idel(key);
-	return localStorage.removeItem(fallbackName(key));
-}
diff --git a/packages/client/src/scripts/initialize-sw.ts b/packages/client/src/scripts/initialize-sw.ts
deleted file mode 100644
index de52f30523..0000000000
--- a/packages/client/src/scripts/initialize-sw.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { lang } from '@/config';
-
-export async function initializeSw() {
-	if (!('serviceWorker' in navigator)) return;
-
-	navigator.serviceWorker.register(`/sw.js`, { scope: '/', type: 'classic' });
-	navigator.serviceWorker.ready.then(registration => {
-		registration.active?.postMessage({
-			msg: 'initialize',
-			lang,
-		});
-	});
-}
diff --git a/packages/client/src/scripts/is-device-darkmode.ts b/packages/client/src/scripts/is-device-darkmode.ts
deleted file mode 100644
index 854f38e517..0000000000
--- a/packages/client/src/scripts/is-device-darkmode.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function isDeviceDarkmode() {
-	return window.matchMedia('(prefers-color-scheme: dark)').matches;
-}
diff --git a/packages/client/src/scripts/keycode.ts b/packages/client/src/scripts/keycode.ts
deleted file mode 100644
index 69f6a82803..0000000000
--- a/packages/client/src/scripts/keycode.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-export default (input: string): string[] => {
-	if (Object.keys(aliases).some(a => a.toLowerCase() === input.toLowerCase())) {
-		const codes = aliases[input];
-		return Array.isArray(codes) ? codes : [codes];
-	} else {
-		return [input];
-	}
-};
-
-export const aliases = {
-	'esc': 'Escape',
-	'enter': ['Enter', 'NumpadEnter'],
-	'up': 'ArrowUp',
-	'down': 'ArrowDown',
-	'left': 'ArrowLeft',
-	'right': 'ArrowRight',
-	'plus': ['NumpadAdd', 'Semicolon'],
-};
-
-/*!
-* Programmatically add the following
-*/
-
-// lower case chars
-for (let i = 97; i < 123; i++) {
-	const char = String.fromCharCode(i);
-	aliases[char] = `Key${char.toUpperCase()}`;
-}
-
-// numbers
-for (let i = 0; i < 10; i++) {
-	aliases[i] = [`Numpad${i}`, `Digit${i}`];
-}
diff --git a/packages/client/src/scripts/langmap.ts b/packages/client/src/scripts/langmap.ts
deleted file mode 100644
index 25f5b366c8..0000000000
--- a/packages/client/src/scripts/langmap.ts
+++ /dev/null
@@ -1,666 +0,0 @@
-// TODO: sharedに置いてバックエンドのと統合したい
-export const langmap = {
-	'ach': {
-		nativeName: 'Lwo',
-	},
-	'ady': {
-		nativeName: 'Адыгэбзэ',
-	},
-	'af': {
-		nativeName: 'Afrikaans',
-	},
-	'af-NA': {
-		nativeName: 'Afrikaans (Namibia)',
-	},
-	'af-ZA': {
-		nativeName: 'Afrikaans (South Africa)',
-	},
-	'ak': {
-		nativeName: 'Tɕɥi',
-	},
-	'ar': {
-		nativeName: 'العربية',
-	},
-	'ar-AR': {
-		nativeName: 'العربية',
-	},
-	'ar-MA': {
-		nativeName: 'العربية',
-	},
-	'ar-SA': {
-		nativeName: 'العربية (السعودية)',
-	},
-	'ay-BO': {
-		nativeName: 'Aymar aru',
-	},
-	'az': {
-		nativeName: 'Azərbaycan dili',
-	},
-	'az-AZ': {
-		nativeName: 'Azərbaycan dili',
-	},
-	'be-BY': {
-		nativeName: 'Беларуская',
-	},
-	'bg': {
-		nativeName: 'Български',
-	},
-	'bg-BG': {
-		nativeName: 'Български',
-	},
-	'bn': {
-		nativeName: 'বাংলা',
-	},
-	'bn-IN': {
-		nativeName: 'বাংলা (ভারত)',
-	},
-	'bn-BD': {
-		nativeName: 'বাংলা(বাংলাদেশ)',
-	},
-	'br': {
-		nativeName: 'Brezhoneg',
-	},
-	'bs-BA': {
-		nativeName: 'Bosanski',
-	},
-	'ca': {
-		nativeName: 'Català',
-	},
-	'ca-ES': {
-		nativeName: 'Català',
-	},
-	'cak': {
-		nativeName: 'Maya Kaqchikel',
-	},
-	'ck-US': {
-		nativeName: 'ᏣᎳᎩ (tsalagi)',
-	},
-	'cs': {
-		nativeName: 'Čeština',
-	},
-	'cs-CZ': {
-		nativeName: 'Čeština',
-	},
-	'cy': {
-		nativeName: 'Cymraeg',
-	},
-	'cy-GB': {
-		nativeName: 'Cymraeg',
-	},
-	'da': {
-		nativeName: 'Dansk',
-	},
-	'da-DK': {
-		nativeName: 'Dansk',
-	},
-	'de': {
-		nativeName: 'Deutsch',
-	},
-	'de-AT': {
-		nativeName: 'Deutsch (Österreich)',
-	},
-	'de-DE': {
-		nativeName: 'Deutsch (Deutschland)',
-	},
-	'de-CH': {
-		nativeName: 'Deutsch (Schweiz)',
-	},
-	'dsb': {
-		nativeName: 'Dolnoserbšćina',
-	},
-	'el': {
-		nativeName: 'Ελληνικά',
-	},
-	'el-GR': {
-		nativeName: 'Ελληνικά',
-	},
-	'en': {
-		nativeName: 'English',
-	},
-	'en-GB': {
-		nativeName: 'English (UK)',
-	},
-	'en-AU': {
-		nativeName: 'English (Australia)',
-	},
-	'en-CA': {
-		nativeName: 'English (Canada)',
-	},
-	'en-IE': {
-		nativeName: 'English (Ireland)',
-	},
-	'en-IN': {
-		nativeName: 'English (India)',
-	},
-	'en-PI': {
-		nativeName: 'English (Pirate)',
-	},
-	'en-SG': {
-		nativeName: 'English (Singapore)',
-	},
-	'en-UD': {
-		nativeName: 'English (Upside Down)',
-	},
-	'en-US': {
-		nativeName: 'English (US)',
-	},
-	'en-ZA': {
-		nativeName: 'English (South Africa)',
-	},
-	'en@pirate': {
-		nativeName: 'English (Pirate)',
-	},
-	'eo': {
-		nativeName: 'Esperanto',
-	},
-	'eo-EO': {
-		nativeName: 'Esperanto',
-	},
-	'es': {
-		nativeName: 'Español',
-	},
-	'es-AR': {
-		nativeName: 'Español (Argentine)',
-	},
-	'es-419': {
-		nativeName: 'Español (Latinoamérica)',
-	},
-	'es-CL': {
-		nativeName: 'Español (Chile)',
-	},
-	'es-CO': {
-		nativeName: 'Español (Colombia)',
-	},
-	'es-EC': {
-		nativeName: 'Español (Ecuador)',
-	},
-	'es-ES': {
-		nativeName: 'Español (España)',
-	},
-	'es-LA': {
-		nativeName: 'Español (Latinoamérica)',
-	},
-	'es-NI': {
-		nativeName: 'Español (Nicaragua)',
-	},
-	'es-MX': {
-		nativeName: 'Español (México)',
-	},
-	'es-US': {
-		nativeName: 'Español (Estados Unidos)',
-	},
-	'es-VE': {
-		nativeName: 'Español (Venezuela)',
-	},
-	'et': {
-		nativeName: 'eesti keel',
-	},
-	'et-EE': {
-		nativeName: 'Eesti (Estonia)',
-	},
-	'eu': {
-		nativeName: 'Euskara',
-	},
-	'eu-ES': {
-		nativeName: 'Euskara',
-	},
-	'fa': {
-		nativeName: 'فارسی',
-	},
-	'fa-IR': {
-		nativeName: 'فارسی',
-	},
-	'fb-LT': {
-		nativeName: 'Leet Speak',
-	},
-	'ff': {
-		nativeName: 'Fulah',
-	},
-	'fi': {
-		nativeName: 'Suomi',
-	},
-	'fi-FI': {
-		nativeName: 'Suomi',
-	},
-	'fo': {
-		nativeName: 'Føroyskt',
-	},
-	'fo-FO': {
-		nativeName: 'Føroyskt (Færeyjar)',
-	},
-	'fr': {
-		nativeName: 'Français',
-	},
-	'fr-CA': {
-		nativeName: 'Français (Canada)',
-	},
-	'fr-FR': {
-		nativeName: 'Français (France)',
-	},
-	'fr-BE': {
-		nativeName: 'Français (Belgique)',
-	},
-	'fr-CH': {
-		nativeName: 'Français (Suisse)',
-	},
-	'fy-NL': {
-		nativeName: 'Frysk',
-	},
-	'ga': {
-		nativeName: 'Gaeilge',
-	},
-	'ga-IE': {
-		nativeName: 'Gaeilge',
-	},
-	'gd': {
-		nativeName: 'Gàidhlig',
-	},
-	'gl': {
-		nativeName: 'Galego',
-	},
-	'gl-ES': {
-		nativeName: 'Galego',
-	},
-	'gn-PY': {
-		nativeName: 'Avañe\'ẽ',
-	},
-	'gu-IN': {
-		nativeName: 'ગુજરાતી',
-	},
-	'gv': {
-		nativeName: 'Gaelg',
-	},
-	'gx-GR': {
-		nativeName: 'Ἑλληνική ἀρχαία',
-	},
-	'he': {
-		nativeName: 'עברית‏',
-	},
-	'he-IL': {
-		nativeName: 'עברית‏',
-	},
-	'hi': {
-		nativeName: 'हिन्दी',
-	},
-	'hi-IN': {
-		nativeName: 'हिन्दी',
-	},
-	'hr': {
-		nativeName: 'Hrvatski',
-	},
-	'hr-HR': {
-		nativeName: 'Hrvatski',
-	},
-	'hsb': {
-		nativeName: 'Hornjoserbšćina',
-	},
-	'ht': {
-		nativeName: 'Kreyòl',
-	},
-	'hu': {
-		nativeName: 'Magyar',
-	},
-	'hu-HU': {
-		nativeName: 'Magyar',
-	},
-	'hy': {
-		nativeName: 'Հայերեն',
-	},
-	'hy-AM': {
-		nativeName: 'Հայերեն (Հայաստան)',
-	},
-	'id': {
-		nativeName: 'Bahasa Indonesia',
-	},
-	'id-ID': {
-		nativeName: 'Bahasa Indonesia',
-	},
-	'is': {
-		nativeName: 'Íslenska',
-	},
-	'is-IS': {
-		nativeName: 'Íslenska (Iceland)',
-	},
-	'it': {
-		nativeName: 'Italiano',
-	},
-	'it-IT': {
-		nativeName: 'Italiano',
-	},
-	'ja': {
-		nativeName: '日本語',
-	},
-	'ja-JP': {
-		nativeName: '日本語 (日本)',
-	},
-	'jv-ID': {
-		nativeName: 'Basa Jawa',
-	},
-	'ka-GE': {
-		nativeName: 'ქართული',
-	},
-	'kk-KZ': {
-		nativeName: 'Қазақша',
-	},
-	'km': {
-		nativeName: 'ភាសាខ្មែរ',
-	},
-	'kl': {
-		nativeName: 'kalaallisut',
-	},
-	'km-KH': {
-		nativeName: 'ភាសាខ្មែរ',
-	},
-	'kab': {
-		nativeName: 'Taqbaylit',
-	},
-	'kn': {
-		nativeName: 'ಕನ್ನಡ',
-	},
-	'kn-IN': {
-		nativeName: 'ಕನ್ನಡ (India)',
-	},
-	'ko': {
-		nativeName: '한국어',
-	},
-	'ko-KR': {
-		nativeName: '한국어 (한국)',
-	},
-	'ku-TR': {
-		nativeName: 'Kurdî',
-	},
-	'kw': {
-		nativeName: 'Kernewek',
-	},
-	'la': {
-		nativeName: 'Latin',
-	},
-	'la-VA': {
-		nativeName: 'Latin',
-	},
-	'lb': {
-		nativeName: 'Lëtzebuergesch',
-	},
-	'li-NL': {
-		nativeName: 'Lèmbörgs',
-	},
-	'lt': {
-		nativeName: 'Lietuvių',
-	},
-	'lt-LT': {
-		nativeName: 'Lietuvių',
-	},
-	'lv': {
-		nativeName: 'Latviešu',
-	},
-	'lv-LV': {
-		nativeName: 'Latviešu',
-	},
-	'mai': {
-		nativeName: 'मैथिली, মৈথিলী',
-	},
-	'mg-MG': {
-		nativeName: 'Malagasy',
-	},
-	'mk': {
-		nativeName: 'Македонски',
-	},
-	'mk-MK': {
-		nativeName: 'Македонски (Македонски)',
-	},
-	'ml': {
-		nativeName: 'മലയാളം',
-	},
-	'ml-IN': {
-		nativeName: 'മലയാളം',
-	},
-	'mn-MN': {
-		nativeName: 'Монгол',
-	},
-	'mr': {
-		nativeName: 'मराठी',
-	},
-	'mr-IN': {
-		nativeName: 'मराठी',
-	},
-	'ms': {
-		nativeName: 'Bahasa Melayu',
-	},
-	'ms-MY': {
-		nativeName: 'Bahasa Melayu',
-	},
-	'mt': {
-		nativeName: 'Malti',
-	},
-	'mt-MT': {
-		nativeName: 'Malti',
-	},
-	'my': {
-		nativeName: 'ဗမာစကာ',
-	},
-	'no': {
-		nativeName: 'Norsk',
-	},
-	'nb': {
-		nativeName: 'Norsk (bokmål)',
-	},
-	'nb-NO': {
-		nativeName: 'Norsk (bokmål)',
-	},
-	'ne': {
-		nativeName: 'नेपाली',
-	},
-	'ne-NP': {
-		nativeName: 'नेपाली',
-	},
-	'nl': {
-		nativeName: 'Nederlands',
-	},
-	'nl-BE': {
-		nativeName: 'Nederlands (België)',
-	},
-	'nl-NL': {
-		nativeName: 'Nederlands (Nederland)',
-	},
-	'nn-NO': {
-		nativeName: 'Norsk (nynorsk)',
-	},
-	'oc': {
-		nativeName: 'Occitan',
-	},
-	'or-IN': {
-		nativeName: 'ଓଡ଼ିଆ',
-	},
-	'pa': {
-		nativeName: 'ਪੰਜਾਬੀ',
-	},
-	'pa-IN': {
-		nativeName: 'ਪੰਜਾਬੀ (ਭਾਰਤ ਨੂੰ)',
-	},
-	'pl': {
-		nativeName: 'Polski',
-	},
-	'pl-PL': {
-		nativeName: 'Polski',
-	},
-	'ps-AF': {
-		nativeName: 'پښتو',
-	},
-	'pt': {
-		nativeName: 'Português',
-	},
-	'pt-BR': {
-		nativeName: 'Português (Brasil)',
-	},
-	'pt-PT': {
-		nativeName: 'Português (Portugal)',
-	},
-	'qu-PE': {
-		nativeName: 'Qhichwa',
-	},
-	'rm-CH': {
-		nativeName: 'Rumantsch',
-	},
-	'ro': {
-		nativeName: 'Română',
-	},
-	'ro-RO': {
-		nativeName: 'Română',
-	},
-	'ru': {
-		nativeName: 'Русский',
-	},
-	'ru-RU': {
-		nativeName: 'Русский',
-	},
-	'sa-IN': {
-		nativeName: 'संस्कृतम्',
-	},
-	'se-NO': {
-		nativeName: 'Davvisámegiella',
-	},
-	'sh': {
-		nativeName: 'српскохрватски',
-	},
-	'si-LK': {
-		nativeName: 'සිංහල',
-	},
-	'sk': {
-		nativeName: 'Slovenčina',
-	},
-	'sk-SK': {
-		nativeName: 'Slovenčina (Slovakia)',
-	},
-	'sl': {
-		nativeName: 'Slovenščina',
-	},
-	'sl-SI': {
-		nativeName: 'Slovenščina',
-	},
-	'so-SO': {
-		nativeName: 'Soomaaliga',
-	},
-	'sq': {
-		nativeName: 'Shqip',
-	},
-	'sq-AL': {
-		nativeName: 'Shqip',
-	},
-	'sr': {
-		nativeName: 'Српски',
-	},
-	'sr-RS': {
-		nativeName: 'Српски (Serbia)',
-	},
-	'su': {
-		nativeName: 'Basa Sunda',
-	},
-	'sv': {
-		nativeName: 'Svenska',
-	},
-	'sv-SE': {
-		nativeName: 'Svenska',
-	},
-	'sw': {
-		nativeName: 'Kiswahili',
-	},
-	'sw-KE': {
-		nativeName: 'Kiswahili',
-	},
-	'ta': {
-		nativeName: 'தமிழ்',
-	},
-	'ta-IN': {
-		nativeName: 'தமிழ்',
-	},
-	'te': {
-		nativeName: 'తెలుగు',
-	},
-	'te-IN': {
-		nativeName: 'తెలుగు',
-	},
-	'tg': {
-		nativeName: 'забо́ни тоҷикӣ́',
-	},
-	'tg-TJ': {
-		nativeName: 'тоҷикӣ',
-	},
-	'th': {
-		nativeName: 'ภาษาไทย',
-	},
-	'th-TH': {
-		nativeName: 'ภาษาไทย (ประเทศไทย)',
-	},
-	'fil': {
-		nativeName: 'Filipino',
-	},
-	'tlh': {
-		nativeName: 'tlhIngan-Hol',
-	},
-	'tr': {
-		nativeName: 'Türkçe',
-	},
-	'tr-TR': {
-		nativeName: 'Türkçe',
-	},
-	'tt-RU': {
-		nativeName: 'татарча',
-	},
-	'uk': {
-		nativeName: 'Українська',
-	},
-	'uk-UA': {
-		nativeName: 'Українська',
-	},
-	'ur': {
-		nativeName: 'اردو',
-	},
-	'ur-PK': {
-		nativeName: 'اردو',
-	},
-	'uz': {
-		nativeName: 'O\'zbek',
-	},
-	'uz-UZ': {
-		nativeName: 'O\'zbek',
-	},
-	'vi': {
-		nativeName: 'Tiếng Việt',
-	},
-	'vi-VN': {
-		nativeName: 'Tiếng Việt',
-	},
-	'xh-ZA': {
-		nativeName: 'isiXhosa',
-	},
-	'yi': {
-		nativeName: 'ייִדיש',
-	},
-	'yi-DE': {
-		nativeName: 'ייִדיש (German)',
-	},
-	'zh': {
-		nativeName: '中文',
-	},
-	'zh-Hans': {
-		nativeName: '中文简体',
-	},
-	'zh-Hant': {
-		nativeName: '中文繁體',
-	},
-	'zh-CN': {
-		nativeName: '中文（中国大陆）',
-	},
-	'zh-HK': {
-		nativeName: '中文（香港）',
-	},
-	'zh-SG': {
-		nativeName: '中文（新加坡）',
-	},
-	'zh-TW': {
-		nativeName: '中文（台灣）',
-	},
-	'zu-ZA': {
-		nativeName: 'isiZulu',
-	},
-};
diff --git a/packages/client/src/scripts/login-id.ts b/packages/client/src/scripts/login-id.ts
deleted file mode 100644
index 0f9c6be4a9..0000000000
--- a/packages/client/src/scripts/login-id.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export function getUrlWithLoginId(url: string, loginId: string) {
-	const u = new URL(url, origin);
-	u.searchParams.append('loginId', loginId);
-	return u.toString();
-}
-
-export function getUrlWithoutLoginId(url: string) {
-	const u = new URL(url);
-	u.searchParams.delete('loginId');
-	return u.toString();
-}
diff --git a/packages/client/src/scripts/lookup-user.ts b/packages/client/src/scripts/lookup-user.ts
deleted file mode 100644
index 3ab9d55300..0000000000
--- a/packages/client/src/scripts/lookup-user.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as Acct from 'misskey-js/built/acct';
-import { i18n } from '@/i18n';
-import * as os from '@/os';
-
-export async function lookupUser() {
-	const { canceled, result } = await os.inputText({
-		title: i18n.ts.usernameOrUserId,
-	});
-	if (canceled) return;
-
-	const show = (user) => {
-		os.pageWindow(`/user-info/${user.id}`);
-	};
-
-	const usernamePromise = os.api('users/show', Acct.parse(result));
-	const idPromise = os.api('users/show', { userId: result });
-	let _notFound = false;
-	const notFound = () => {
-		if (_notFound) {
-			os.alert({
-				type: 'error',
-				text: i18n.ts.noSuchUser,
-			});
-		} else {
-			_notFound = true;
-		}
-	};
-	usernamePromise.then(show).catch(err => {
-		if (err.code === 'NO_SUCH_USER') {
-			notFound();
-		}
-	});
-	idPromise.then(show).catch(err => {
-		notFound();
-	});
-}
diff --git a/packages/client/src/scripts/media-proxy.ts b/packages/client/src/scripts/media-proxy.ts
deleted file mode 100644
index aaf7f9e610..0000000000
--- a/packages/client/src/scripts/media-proxy.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { query } from '@/scripts/url';
-import { url } from '@/config';
-
-export function getProxiedImageUrl(imageUrl: string, type?: 'preview'): string {
-	return `${url}/proxy/image.webp?${query({
-		url: imageUrl,
-		fallback: '1',
-		...(type ? { [type]: '1' } : {}),
-	})}`;
-}
-
-export function getProxiedImageUrlNullable(imageUrl: string | null | undefined, type?: 'preview'): string | null {
-	if (imageUrl == null) return null;
-	return getProxiedImageUrl(imageUrl, type);
-}
diff --git a/packages/client/src/scripts/mfm-tags.ts b/packages/client/src/scripts/mfm-tags.ts
deleted file mode 100644
index 18e8d7038a..0000000000
--- a/packages/client/src/scripts/mfm-tags.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle', 'rotate'];
diff --git a/packages/client/src/scripts/page-metadata.ts b/packages/client/src/scripts/page-metadata.ts
deleted file mode 100644
index 0db8369f9d..0000000000
--- a/packages/client/src/scripts/page-metadata.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-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/physics.ts b/packages/client/src/scripts/physics.ts
deleted file mode 100644
index efda80f074..0000000000
--- a/packages/client/src/scripts/physics.ts
+++ /dev/null
@@ -1,152 +0,0 @@
-import * as Matter from 'matter-js';
-
-export function physics(container: HTMLElement) {
-	const containerWidth = container.offsetWidth;
-	const containerHeight = container.offsetHeight;
-	const containerCenterX = containerWidth / 2;
-
-	// サイズ固定化(要らないかも？)
-	container.style.position = 'relative';
-	container.style.boxSizing = 'border-box';
-	container.style.width = `${containerWidth}px`;
-	container.style.height = `${containerHeight}px`;
-
-	// create engine
-	const engine = Matter.Engine.create({
-		constraintIterations: 4,
-		positionIterations: 8,
-		velocityIterations: 8,
-	});
-
-	const world = engine.world;
-
-	// create renderer
-	const render = Matter.Render.create({
-		engine: engine,
-		//element: document.getElementById('debug'),
-		options: {
-			width: containerWidth,
-			height: containerHeight,
-			background: 'transparent', // transparent to hide
-			wireframeBackground: 'transparent', // transparent to hide
-		},
-	});
-
-	// Disable to hide debug
-	Matter.Render.run(render);
-
-	// create runner
-	const runner = Matter.Runner.create();
-	Matter.Runner.run(runner, engine);
-
-	const groundThickness = 1024;
-	const ground = Matter.Bodies.rectangle(containerCenterX, containerHeight + (groundThickness / 2), containerWidth, groundThickness, {
-		isStatic: true,
-		restitution: 0.1,
-		friction: 2,
-	});
-
-	//const wallRight = Matter.Bodies.rectangle(window.innerWidth+50, window.innerHeight/2, 100, window.innerHeight, wallopts);
-	//const wallLeft = Matter.Bodies.rectangle(-50, window.innerHeight/2, 100, window.innerHeight, wallopts);
-
-	Matter.World.add(world, [
-		ground,
-		//wallRight,
-		//wallLeft,
-	]);
-
-	const objEls = Array.from(container.children) as HTMLElement[];
-	const objs: Matter.Body[] = [];
-	for (const objEl of objEls) {
-		const left = objEl.dataset.physicsX ? parseInt(objEl.dataset.physicsX) : objEl.offsetLeft;
-		const top = objEl.dataset.physicsY ? parseInt(objEl.dataset.physicsY) : objEl.offsetTop;
-
-		let obj: Matter.Body;
-		if (objEl.classList.contains('_physics_circle_')) {
-			obj = Matter.Bodies.circle(
-				left + (objEl.offsetWidth / 2),
-				top + (objEl.offsetHeight / 2),
-				Math.max(objEl.offsetWidth, objEl.offsetHeight) / 2,
-				{
-					restitution: 0.5,
-				},
-			);
-		} else {
-			const style = window.getComputedStyle(objEl);
-			obj = Matter.Bodies.rectangle(
-				left + (objEl.offsetWidth / 2),
-				top + (objEl.offsetHeight / 2),
-				objEl.offsetWidth,
-				objEl.offsetHeight,
-				{
-					chamfer: { radius: parseInt(style.borderRadius || '0', 10) },
-					restitution: 0.5,
-				},
-			);
-		}
-		objEl.id = obj.id.toString();
-		objs.push(obj);
-	}
-
-	Matter.World.add(engine.world, objs);
-
-	// Add mouse control
-
-	const mouse = Matter.Mouse.create(container);
-	const mouseConstraint = Matter.MouseConstraint.create(engine, {
-		mouse: mouse,
-		constraint: {
-			stiffness: 0.1,
-			render: {
-				visible: false,
-			},
-		},
-	});
-
-	Matter.World.add(engine.world, mouseConstraint);
-
-	// keep the mouse in sync with rendering
-	render.mouse = mouse;
-
-	for (const objEl of objEls) {
-		objEl.style.position = 'absolute';
-		objEl.style.top = '0';
-		objEl.style.left = '0';
-		objEl.style.margin = '0';
-	}
-
-	window.requestAnimationFrame(update);
-
-	let stop = false;
-
-	function update() {
-		for (const objEl of objEls) {
-			const obj = objs.find(obj => obj.id.toString() === objEl.id.toString());
-			if (obj == null) continue;
-
-			const x = (obj.position.x - objEl.offsetWidth / 2);
-			const y = (obj.position.y - objEl.offsetHeight / 2);
-			const angle = obj.angle;
-			objEl.style.transform = `translate(${x}px, ${y}px) rotate(${angle}rad)`;
-		}
-
-		if (!stop) {
-			window.requestAnimationFrame(update);
-		}
-	}
-
-	// 奈落に落ちたオブジェクトは消す
-	const intervalId = window.setInterval(() => {
-		for (const obj of objs) {
-			if (obj.position.y > (containerHeight + 1024)) Matter.World.remove(world, obj);
-		}
-	}, 1000 * 10);
-
-	return {
-		stop: () => {
-			stop = true;
-			Matter.Runner.stop(runner);
-			window.clearInterval(intervalId);
-		},
-	};
-}
diff --git a/packages/client/src/scripts/please-login.ts b/packages/client/src/scripts/please-login.ts
deleted file mode 100644
index b8fb853cc1..0000000000
--- a/packages/client/src/scripts/please-login.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { defineAsyncComponent } from 'vue';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { popup } from '@/os';
-
-export function pleaseLogin(path?: string) {
-	if ($i) return;
-
-	popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {
-		autoSet: true,
-		message: i18n.ts.signinRequired,
-	}, {
-		cancelled: () => {
-			if (path) {
-				window.location.href = path;
-			}
-		},
-	}, 'closed');
-
-	if (!path) throw new Error('signin required');
-}
diff --git a/packages/client/src/scripts/popout.ts b/packages/client/src/scripts/popout.ts
deleted file mode 100644
index 580031d0a3..0000000000
--- a/packages/client/src/scripts/popout.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as config from '@/config';
-import { appendQuery } from './url';
-
-export function popout(path: string, w?: HTMLElement) {
-	let url = path.startsWith('http://') || path.startsWith('https://') ? path : config.url + path;
-	url = appendQuery(url, 'zen');
-	if (w) {
-		const position = w.getBoundingClientRect();
-		const width = parseInt(getComputedStyle(w, '').width, 10);
-		const height = parseInt(getComputedStyle(w, '').height, 10);
-		const x = window.screenX + position.left;
-		const y = window.screenY + position.top;
-		window.open(url, url,
-			`width=${width}, height=${height}, top=${y}, left=${x}`);
-	} else {
-		const width = 400;
-		const height = 500;
-		const x = window.top.outerHeight / 2 + window.top.screenY - (height / 2);
-		const y = window.top.outerWidth / 2 + window.top.screenX - (width / 2);
-		window.open(url, url,
-			`width=${width}, height=${height}, top=${x}, left=${y}`);
-	}
-}
diff --git a/packages/client/src/scripts/popup-position.ts b/packages/client/src/scripts/popup-position.ts
deleted file mode 100644
index e84eebf103..0000000000
--- a/packages/client/src/scripts/popup-position.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-import { Ref } from 'vue';
-
-export function calcPopupPosition(el: HTMLElement, props: {
-	anchorElement: HTMLElement | null;
-	innerMargin: number;
-	direction: 'top' | 'bottom' | 'left' | 'right';
-	align: 'top' | 'bottom' | 'left' | 'right' | 'center';
-	alignOffset?: number;
-	x?: number;
-	y?: number;
-}): { top: number; left: number; transformOrigin: string; } {
-	const contentWidth = el.offsetWidth;
-	const contentHeight = el.offsetHeight;
-
-	let rect: DOMRect;
-
-	if (props.anchorElement) {
-		rect = props.anchorElement.getBoundingClientRect();
-	}
-
-	const calcPosWhenTop = () => {
-		let left: number;
-		let top: number;
-
-		if (props.anchorElement) {
-			left = rect.left + window.pageXOffset + (props.anchorElement.offsetWidth / 2);
-			top = (rect.top + window.pageYOffset - contentHeight) - props.innerMargin;
-		} else {
-			left = props.x;
-			top = (props.y - contentHeight) - props.innerMargin;
-		}
-
-		left -= (el.offsetWidth / 2);
-
-		if (left + contentWidth - window.pageXOffset > window.innerWidth) {
-			left = window.innerWidth - contentWidth + window.pageXOffset - 1;
-		}
-
-		return [left, top];
-	};
-
-	const calcPosWhenBottom = () => {
-		let left: number;
-		let top: number;
-
-		if (props.anchorElement) {
-			left = rect.left + window.pageXOffset + (props.anchorElement.offsetWidth / 2);
-			top = (rect.top + window.pageYOffset + props.anchorElement.offsetHeight) + props.innerMargin;
-		} else {
-			left = props.x;
-			top = (props.y) + props.innerMargin;
-		}
-
-		left -= (el.offsetWidth / 2);
-
-		if (left + contentWidth - window.pageXOffset > window.innerWidth) {
-			left = window.innerWidth - contentWidth + window.pageXOffset - 1;
-		}
-
-		return [left, top];
-	};
-
-	const calcPosWhenLeft = () => {
-		let left: number;
-		let top: number;
-
-		if (props.anchorElement) {
-			left = (rect.left + window.pageXOffset - contentWidth) - props.innerMargin;
-			top = rect.top + window.pageYOffset + (props.anchorElement.offsetHeight / 2);
-		} else {
-			left = (props.x - contentWidth) - props.innerMargin;
-			top = props.y;
-		}
-
-		top -= (el.offsetHeight / 2);
-
-		if (top + contentHeight - window.pageYOffset > window.innerHeight) {
-			top = window.innerHeight - contentHeight + window.pageYOffset - 1;
-		}
-
-		return [left, top];
-	};
-
-	const calcPosWhenRight = () => {
-		let left: number;
-		let top: number;
-
-		if (props.anchorElement) {
-			left = (rect.left + props.anchorElement.offsetWidth + window.pageXOffset) + props.innerMargin;
-
-			if (props.align === 'top') {
-				top = rect.top + window.pageYOffset;
-				if (props.alignOffset != null) top += props.alignOffset;
-			} else if (props.align === 'bottom') {
-				// TODO
-			} else { // center
-				top = rect.top + window.pageYOffset + (props.anchorElement.offsetHeight / 2);
-				top -= (el.offsetHeight / 2);
-			}
-		} else {
-			left = props.x + props.innerMargin;
-			top = props.y;
-			top -= (el.offsetHeight / 2);
-		}
-
-		if (top + contentHeight - window.pageYOffset > window.innerHeight) {
-			top = window.innerHeight - contentHeight + window.pageYOffset - 1;
-		}
-
-		return [left, top];
-	};
-
-	const calc = (): {
-		left: number;
-		top: number;
-		transformOrigin: string;
-	} => {
-		switch (props.direction) {
-			case 'top': {
-				const [left, top] = calcPosWhenTop();
-
-				// ツールチップを上に向かって表示するスペースがなければ下に向かって出す
-				if (top - window.pageYOffset < 0) {
-					const [left, top] = calcPosWhenBottom();
-					return { left, top, transformOrigin: 'center top' };
-				}
-
-				return { left, top, transformOrigin: 'center bottom' };
-			}
-
-			case 'bottom': {
-				const [left, top] = calcPosWhenBottom();
-				// TODO: ツールチップを下に向かって表示するスペースがなければ上に向かって出す
-				return { left, top, transformOrigin: 'center top' };
-			}
-
-			case 'left': {
-				const [left, top] = calcPosWhenLeft();
-
-				// ツールチップを左に向かって表示するスペースがなければ右に向かって出す
-				if (left - window.pageXOffset < 0) {
-					const [left, top] = calcPosWhenRight();
-					return { left, top, transformOrigin: 'left center' };
-				}
-
-				return { left, top, transformOrigin: 'right center' };
-			}
-
-			case 'right': {
-				const [left, top] = calcPosWhenRight();
-				// TODO: ツールチップを右に向かって表示するスペースがなければ左に向かって出す
-				return { left, top, transformOrigin: 'left center' };
-			}
-		}
-	};
-
-	return calc();
-}
diff --git a/packages/client/src/scripts/reaction-picker.ts b/packages/client/src/scripts/reaction-picker.ts
deleted file mode 100644
index fe32e719da..0000000000
--- a/packages/client/src/scripts/reaction-picker.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { defineAsyncComponent, Ref, ref } from 'vue';
-import { popup } from '@/os';
-
-class ReactionPicker {
-	private src: Ref<HTMLElement | null> = ref(null);
-	private manualShowing = ref(false);
-	private onChosen?: (reaction: string) => void;
-	private onClosed?: () => void;
-
-	constructor() {
-		// nop
-	}
-
-	public async init() {
-		await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
-			src: this.src,
-			asReactionPicker: true,
-			manualShowing: this.manualShowing,
-		}, {
-			done: reaction => {
-				this.onChosen!(reaction);
-			},
-			close: () => {
-				this.manualShowing.value = false;
-			},
-			closed: () => {
-				this.src.value = null;
-				this.onClosed!();
-			},
-		});
-	}
-
-	public show(src: HTMLElement, onChosen: ReactionPicker['onChosen'], onClosed: ReactionPicker['onClosed']) {
-		this.src.value = src;
-		this.manualShowing.value = true;
-		this.onChosen = onChosen;
-		this.onClosed = onClosed;
-	}
-}
-
-export const reactionPicker = new ReactionPicker();
diff --git a/packages/client/src/scripts/safe-uri-decode.ts b/packages/client/src/scripts/safe-uri-decode.ts
deleted file mode 100644
index 301b56d7fd..0000000000
--- a/packages/client/src/scripts/safe-uri-decode.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function safeURIDecode(str: string): string {
-	try {
-		return decodeURIComponent(str);
-	} catch {
-		return str;
-	}
-}
diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts
deleted file mode 100644
index f5bc6bf9ce..0000000000
--- a/packages/client/src/scripts/scroll.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-type ScrollBehavior = 'auto' | 'smooth' | 'instant';
-
-export function getScrollContainer(el: HTMLElement | null): HTMLElement | null {
-	if (el == null || el.tagName === 'HTML') return null;
-	const overflow = window.getComputedStyle(el).getPropertyValue('overflow-y');
-	if (overflow === 'scroll' || overflow === 'auto') {
-		return el;
-	} else {
-		return getScrollContainer(el.parentElement);
-	}
-}
-
-export function getScrollPosition(el: Element | null): number {
-	const container = getScrollContainer(el);
-	return container == null ? window.scrollY : container.scrollTop;
-}
-
-export function isTopVisible(el: Element | null): boolean {
-	const scrollTop = getScrollPosition(el);
-	const topPosition = el.offsetTop; // TODO: container内でのelの相対位置を取得できればより正確になる
-
-	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 => {
-		if (!document.body.contains(el)) return;
-		if (isTopVisible(el)) {
-			cb();
-			container.removeEventListener('scroll', onScroll);
-		}
-	};
-	container.addEventListener('scroll', onScroll, { passive: true });
-}
-
-export function onScrollBottom(el: Element, cb) {
-	const container = getScrollContainer(el) || window;
-	const onScroll = ev => {
-		if (!document.body.contains(el)) return;
-		const pos = getScrollPosition(el);
-		if (pos + el.clientHeight > el.scrollHeight - 1) {
-			cb();
-			container.removeEventListener('scroll', onScroll);
-		}
-	};
-	container.addEventListener('scroll', onScroll, { passive: true });
-}
-
-export function scroll(el: Element, options: {
-	top?: number;
-	left?: number;
-	behavior?: ScrollBehavior;
-}) {
-	const container = getScrollContainer(el);
-	if (container == null) {
-		window.scroll(options);
-	} else {
-		container.scroll(options);
-	}
-}
-
-export function scrollToTop(el: Element, options: { behavior?: ScrollBehavior; } = {}) {
-	scroll(el, { top: 0, ...options });
-}
-
-export function scrollToBottom(el: Element, options: { behavior?: ScrollBehavior; } = {}) {
-	scroll(el, { top: 99999, ...options }); // TODO: ちゃんと計算する
-}
-
-export function isBottom(el: Element, asobi = 0) {
-	const container = getScrollContainer(el);
-	const current = container
-		? el.scrollTop + el.offsetHeight
-		: window.scrollY + window.innerHeight;
-	const max = container
-		? el.scrollHeight
-		: document.body.offsetHeight;
-	return current >= (max - asobi);
-}
diff --git a/packages/client/src/scripts/search.ts b/packages/client/src/scripts/search.ts
deleted file mode 100644
index 64914d3d65..0000000000
--- a/packages/client/src/scripts/search.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { mainRouter } from '@/router';
-
-export async function search() {
-	const { canceled, result: query } = await os.inputText({
-		title: i18n.ts.search,
-	});
-	if (canceled || query == null || query === '') return;
-
-	const q = query.trim();
-
-	if (q.startsWith('@') && !q.includes(' ')) {
-		mainRouter.push(`/${q}`);
-		return;
-	}
-
-	if (q.startsWith('#')) {
-		mainRouter.push(`/tags/${encodeURIComponent(q.substr(1))}`);
-		return;
-	}
-
-	// like 2018/03/12
-	if (/^[0-9]{4}\/[0-9]{2}\/[0-9]{2}/.test(q.replace(/-/g, '/'))) {
-		const date = new Date(q.replace(/-/g, '/'));
-
-		// 日付しか指定されてない場合、例えば 2018/03/12 ならユーザーは
-		// 2018/03/12 のコンテンツを「含む」結果になることを期待するはずなので
-		// 23時間59分進める(そのままだと 2018/03/12 00:00:00 「まで」の
-		// 結果になってしまい、2018/03/12 のコンテンツは含まれない)
-		if (q.replace(/-/g, '/').match(/^[0-9]{4}\/[0-9]{2}\/[0-9]{2}$/)) {
-			date.setHours(23, 59, 59, 999);
-		}
-
-		// TODO
-		//v.$root.$emit('warp', date);
-		os.alert({
-			icon: 'fas fa-history',
-			iconOnly: true, autoClose: true,
-		});
-		return;
-	}
-
-	if (q.startsWith('https://')) {
-		const promise = os.api('ap/show', {
-			uri: q,
-		});
-
-		os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject);
-
-		const res = await promise;
-
-		if (res.type === 'User') {
-			mainRouter.push(`/@${res.object.username}@${res.object.host}`);
-		} else if (res.type === 'Note') {
-			mainRouter.push(`/notes/${res.object.id}`);
-		}
-
-		return;
-	}
-
-	mainRouter.push(`/search?q=${encodeURIComponent(q)}`);
-}
diff --git a/packages/client/src/scripts/select-file.ts b/packages/client/src/scripts/select-file.ts
deleted file mode 100644
index ec5f8f65e9..0000000000
--- a/packages/client/src/scripts/select-file.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { ref } from 'vue';
-import { DriveFile } from 'misskey-js/built/entities';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
-import { uploadFile } from '@/scripts/upload';
-
-function select(src: any, label: string | null, multiple: boolean): Promise<DriveFile | DriveFile[]> {
-	return new Promise((res, rej) => {
-		const keepOriginal = ref(defaultStore.state.keepOriginalUploading);
-
-		const chooseFileFromPc = () => {
-			const input = document.createElement('input');
-			input.type = 'file';
-			input.multiple = multiple;
-			input.onchange = () => {
-				const promises = Array.from(input.files).map(file => uploadFile(file, defaultStore.state.uploadFolder, undefined, keepOriginal.value));
-
-				Promise.all(promises).then(driveFiles => {
-					res(multiple ? driveFiles : driveFiles[0]);
-				}).catch(err => {
-					// アップロードのエラーは uploadFile 内でハンドリングされているためアラートダイアログを出したりはしてはいけない
-				});
-
-				// 一応廃棄
-				(window as any).__misskey_input_ref__ = null;
-			};
-
-			// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
-			// iOS Safari で正常に動かす為のおまじない
-			(window as any).__misskey_input_ref__ = input;
-
-			input.click();
-		};
-
-		const chooseFileFromDrive = () => {
-			os.selectDriveFile(multiple).then(files => {
-				res(files);
-			});
-		};
-
-		const chooseFileFromUrl = () => {
-			os.inputText({
-				title: i18n.ts.uploadFromUrl,
-				type: 'url',
-				placeholder: i18n.ts.uploadFromUrlDescription,
-			}).then(({ canceled, result: url }) => {
-				if (canceled) return;
-
-				const marker = Math.random().toString(); // TODO: UUIDとか使う
-
-				const connection = stream.useChannel('main');
-				connection.on('urlUploadFinished', urlResponse => {
-					if (urlResponse.marker === marker) {
-						res(multiple ? [urlResponse.file] : urlResponse.file);
-						connection.dispose();
-					}
-				});
-
-				os.api('drive/files/upload-from-url', {
-					url: url,
-					folderId: defaultStore.state.uploadFolder,
-					marker,
-				});
-
-				os.alert({
-					title: i18n.ts.uploadFromUrlRequested,
-					text: i18n.ts.uploadFromUrlMayTakeTime,
-				});
-			});
-		};
-
-		os.popupMenu([label ? {
-			text: label,
-			type: 'label',
-		} : undefined, {
-			type: 'switch',
-			text: i18n.ts.keepOriginalUploading,
-			ref: keepOriginal,
-		}, {
-			text: i18n.ts.upload,
-			icon: 'ti ti-upload',
-			action: chooseFileFromPc,
-		}, {
-			text: i18n.ts.fromDrive,
-			icon: 'ti ti-cloud',
-			action: chooseFileFromDrive,
-		}, {
-			text: i18n.ts.fromUrl,
-			icon: 'ti ti-link',
-			action: chooseFileFromUrl,
-		}], src);
-	});
-}
-
-export function selectFile(src: any, label: string | null = null): Promise<DriveFile> {
-	return select(src, label, false) as Promise<DriveFile>;
-}
-
-export function selectFiles(src: any, label: string | null = null): Promise<DriveFile[]> {
-	return select(src, label, true) as Promise<DriveFile[]>;
-}
diff --git a/packages/client/src/scripts/show-suspended-dialog.ts b/packages/client/src/scripts/show-suspended-dialog.ts
deleted file mode 100644
index e11569ecd4..0000000000
--- a/packages/client/src/scripts/show-suspended-dialog.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-export function showSuspendedDialog() {
-	return os.alert({
-		type: 'error',
-		title: i18n.ts.yourAccountSuspendedTitle,
-		text: i18n.ts.yourAccountSuspendedDescription,
-	});
-}
diff --git a/packages/client/src/scripts/shuffle.ts b/packages/client/src/scripts/shuffle.ts
deleted file mode 100644
index 05e6cdfbcf..0000000000
--- a/packages/client/src/scripts/shuffle.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * 配列をシャッフル (破壊的)
- */
-export function shuffle<T extends any[]>(array: T): T {
-	let currentIndex = array.length, randomIndex;
-
-	// While there remain elements to shuffle.
-	while (currentIndex !== 0) {
-		// Pick a remaining element.
-		randomIndex = Math.floor(Math.random() * currentIndex);
-		currentIndex--;
-
-		// And swap it with the current element.
-		[array[currentIndex], array[randomIndex]] = [
-			array[randomIndex], array[currentIndex]];
-	}
-
-	return array;
-}
diff --git a/packages/client/src/scripts/sound.ts b/packages/client/src/scripts/sound.ts
deleted file mode 100644
index 9d1f603235..0000000000
--- a/packages/client/src/scripts/sound.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { ColdDeviceStorage } from '@/store';
-
-const cache = new Map<string, HTMLAudioElement>();
-
-export const soundsTypes = [
-	null,
-	'syuilo/up',
-	'syuilo/down',
-	'syuilo/pope1',
-	'syuilo/pope2',
-	'syuilo/waon',
-	'syuilo/popo',
-	'syuilo/triple',
-	'syuilo/poi1',
-	'syuilo/poi2',
-	'syuilo/pirori',
-	'syuilo/pirori-wet',
-	'syuilo/pirori-square-wet',
-	'syuilo/square-pico',
-	'syuilo/reverved',
-	'syuilo/ryukyu',
-	'syuilo/kick',
-	'syuilo/snare',
-	'syuilo/queue-jammed',
-	'aisha/1',
-	'aisha/2',
-	'aisha/3',
-	'noizenecio/kick_gaba1',
-	'noizenecio/kick_gaba2',
-	'noizenecio/kick_gaba3',
-	'noizenecio/kick_gaba4',
-	'noizenecio/kick_gaba5',
-	'noizenecio/kick_gaba6',
-	'noizenecio/kick_gaba7',
-] as const;
-
-export function getAudio(file: string, useCache = true): HTMLAudioElement {
-	let audio: HTMLAudioElement;
-	if (useCache && cache.has(file)) {
-		audio = cache.get(file);
-	} else {
-		audio = new Audio(`/client-assets/sounds/${file}.mp3`);
-		if (useCache) cache.set(file, audio);
-	}
-	return audio;
-}
-
-export function setVolume(audio: HTMLAudioElement, volume: number): HTMLAudioElement {
-	const masterVolume = ColdDeviceStorage.get('sound_masterVolume');
-	audio.volume = masterVolume - ((1 - volume) * masterVolume);
-	return audio;
-}
-
-export function play(type: string) {
-	const sound = ColdDeviceStorage.get('sound_' + type as any);
-	if (sound.type == null) return;
-	playFile(sound.type, sound.volume);
-}
-
-export function playFile(file: string, volume: number) {
-	const masterVolume = ColdDeviceStorage.get('sound_masterVolume');
-	if (masterVolume === 0) return;
-
-	const audio = setVolume(getAudio(file), volume);
-	audio.play();
-}
diff --git a/packages/client/src/scripts/sticky-sidebar.ts b/packages/client/src/scripts/sticky-sidebar.ts
deleted file mode 100644
index c67b8f37ac..0000000000
--- a/packages/client/src/scripts/sticky-sidebar.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-export class StickySidebar {
-	private lastScrollTop = 0;
-	private container: HTMLElement;
-	private el: HTMLElement;
-	private spacer: HTMLElement;
-	private marginTop: number;
-	private isTop = false;
-	private isBottom = false;
-	private offsetTop: number;
-	private globalHeaderHeight: number = 59;
-
-	constructor(container: StickySidebar['container'], marginTop = 0, globalHeaderHeight = 0) {
-		this.container = container;
-		this.el = this.container.children[0] as HTMLElement;
-		this.el.style.position = 'sticky';
-		this.spacer = document.createElement('div');
-		this.container.prepend(this.spacer);
-		this.marginTop = marginTop;
-		this.offsetTop = this.container.getBoundingClientRect().top;
-		this.globalHeaderHeight = globalHeaderHeight;
-	}
-
-	public calc(scrollTop: number) {
-		if (scrollTop > this.lastScrollTop) { // downscroll
-			const overflow = Math.max(0, this.globalHeaderHeight + (this.el.clientHeight + this.marginTop) - window.innerHeight);
-			this.el.style.bottom = null;
-			this.el.style.top = `${-overflow + this.marginTop + this.globalHeaderHeight}px`;
-
-			this.isBottom = (scrollTop + window.innerHeight) >= (this.el.offsetTop + this.el.clientHeight);
-
-			if (this.isTop) {
-				this.isTop = false;
-				this.spacer.style.marginTop = `${Math.max(0, this.globalHeaderHeight + this.lastScrollTop + this.marginTop - this.offsetTop)}px`;
-			}
-		} else { // upscroll
-			const overflow = this.globalHeaderHeight + (this.el.clientHeight + this.marginTop) - window.innerHeight;
-			this.el.style.top = null;
-			this.el.style.bottom = `${-overflow}px`;
-
-			this.isTop = scrollTop + this.marginTop + this.globalHeaderHeight <= this.el.offsetTop;
-
-			if (this.isBottom) {
-				this.isBottom = false;
-				this.spacer.style.marginTop = `${this.globalHeaderHeight + this.lastScrollTop + this.marginTop - this.offsetTop - overflow}px`;
-			}
-		}
-
-		this.lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
-	}
-}
diff --git a/packages/client/src/scripts/theme-editor.ts b/packages/client/src/scripts/theme-editor.ts
deleted file mode 100644
index 944875ff15..0000000000
--- a/packages/client/src/scripts/theme-editor.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { v4 as uuid } from 'uuid';
-
-import { themeProps, Theme } from './theme';
-
-export type Default = null;
-export type Color = string;
-export type FuncName = 'alpha' | 'darken' | 'lighten';
-export type Func = { type: 'func'; name: FuncName; arg: number; value: string; };
-export type RefProp = { type: 'refProp'; key: string; };
-export type RefConst = { type: 'refConst'; key: string; };
-export type Css = { type: 'css'; value: string; };
-
-export type ThemeValue = Color | Func | RefProp | RefConst | Css | Default;
-
-export type ThemeViewModel = [ string, ThemeValue ][];
-
-export const fromThemeString = (str?: string) : ThemeValue => {
-	if (!str) return null;
-	if (str.startsWith(':')) {
-		const parts = str.slice(1).split('<');
-		const name = parts[0] as FuncName;
-		const arg = parseFloat(parts[1]);
-		const value = parts[2].startsWith('@') ? parts[2].slice(1) : '';
-		return { type: 'func', name, arg, value };
-	} else if (str.startsWith('@')) {
-		return {
-			type: 'refProp',
-			key: str.slice(1),
-		};
-	} else if (str.startsWith('$')) {
-		return {
-			type: 'refConst',
-			key: str.slice(1),
-		};
-	} else if (str.startsWith('"')) {
-		return {
-			type: 'css',
-			value: str.substr(1).trim(),
-		};
-	} else {
-		return str;
-	}
-};
-
-export const toThemeString = (value: Color | Func | RefProp | RefConst | Css) => {
-	if (typeof value === 'string') return value;
-	switch (value.type) {
-		case 'func': return `:${value.name}<${value.arg}<@${value.value}`;
-		case 'refProp': return `@${value.key}`;
-		case 'refConst': return `$${value.key}`;
-		case 'css': return `" ${value.value}`;
-	}
-};
-
-export const convertToMisskeyTheme = (vm: ThemeViewModel, name: string, desc: string, author: string, base: 'dark' | 'light'): Theme => {
-	const props = { } as { [key: string]: string };
-	for (const [key, value] of vm) {
-		if (value === null) continue;
-		props[key] = toThemeString(value);
-	}
-
-	return {
-		id: uuid(),
-		name, desc, author, props, base,
-	};
-};
-
-export const convertToViewModel = (theme: Theme): ThemeViewModel => {
-	const vm: ThemeViewModel = [];
-	// プロパティの登録
-	vm.push(...themeProps.map(key => [key, fromThemeString(theme.props[key])] as [ string, ThemeValue ]));
-
-	// 定数の登録
-	const consts = Object
-		.keys(theme.props)
-		.filter(k => k.startsWith('$'))
-		.map(k => [k, fromThemeString(theme.props[k])] as [ string, ThemeValue ]);
-
-		vm.push(...consts);
-	return vm;
-};
diff --git a/packages/client/src/scripts/theme.ts b/packages/client/src/scripts/theme.ts
deleted file mode 100644
index 62a2b9459a..0000000000
--- a/packages/client/src/scripts/theme.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import { ref } from 'vue';
-import tinycolor from 'tinycolor2';
-import { globalEvents } from '@/events';
-
-export type Theme = {
-	id: string;
-	name: string;
-	author: string;
-	desc?: string;
-	base?: 'dark' | 'light';
-	props: Record<string, string>;
-};
-
-import lightTheme from '@/themes/_light.json5';
-import darkTheme from '@/themes/_dark.json5';
-import { deepClone } from './clone';
-
-export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
-
-export const getBuiltinThemes = () => Promise.all(
-	[
-		'l-light',
-		'l-coffee',
-		'l-apricot',
-		'l-rainy',
-		'l-vivid',
-		'l-cherry',
-		'l-sushi',
-		'l-u0',
-
-		'd-dark',
-		'd-persimmon',
-		'd-astro',
-		'd-future',
-		'd-botanical',
-		'd-green-lime',
-		'd-green-orange',
-		'd-cherry',
-		'd-ice',
-		'd-u0',
-	].map(name => import(`../themes/${name}.json5`).then(({ default: _default }): Theme => _default)),
-);
-
-export const getBuiltinThemesRef = () => {
-	const builtinThemes = ref<Theme[]>([]);
-	getBuiltinThemes().then(themes => builtinThemes.value = themes);
-	return builtinThemes;
-};
-
-let timeout = null;
-
-export function applyTheme(theme: Theme, persist = true) {
-	if (timeout) window.clearTimeout(timeout);
-
-	document.documentElement.classList.add('_themeChanging_');
-
-	timeout = window.setTimeout(() => {
-		document.documentElement.classList.remove('_themeChanging_');
-	}, 1000);
-
-	const colorSchema = theme.base === 'dark' ? 'dark' : 'light';
-
-	// Deep copy
-	const _theme = deepClone(theme);
-
-	if (_theme.base) {
-		const base = [lightTheme, darkTheme].find(x => x.id === _theme.base);
-		if (base) _theme.props = Object.assign({}, base.props, _theme.props);
-	}
-
-	const props = compile(_theme);
-
-	for (const tag of document.head.children) {
-		if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') {
-			tag.setAttribute('content', props['htmlThemeColor']);
-			break;
-		}
-	}
-
-	for (const [k, v] of Object.entries(props)) {
-		document.documentElement.style.setProperty(`--${k}`, v.toString());
-	}
-
-	document.documentElement.style.setProperty('color-schema', colorSchema);
-
-	if (persist) {
-		localStorage.setItem('theme', JSON.stringify(props));
-		localStorage.setItem('colorSchema', colorSchema);
-	}
-
-	// 色計算など再度行えるようにクライアント全体に通知
-	globalEvents.emit('themeChanged');
-}
-
-function compile(theme: Theme): Record<string, string> {
-	function getColor(val: string): tinycolor.Instance {
-		// ref (prop)
-		if (val[0] === '@') {
-			return getColor(theme.props[val.substr(1)]);
-		}
-
-		// ref (const)
-		else if (val[0] === '$') {
-			return getColor(theme.props[val]);
-		}
-
-		// func
-		else if (val[0] === ':') {
-			const parts = val.split('<');
-			const func = parts.shift().substr(1);
-			const arg = parseFloat(parts.shift());
-			const color = getColor(parts.join('<'));
-
-			switch (func) {
-				case 'darken': return color.darken(arg);
-				case 'lighten': return color.lighten(arg);
-				case 'alpha': return color.setAlpha(arg);
-				case 'hue': return color.spin(arg);
-				case 'saturate': return color.saturate(arg);
-			}
-		}
-
-		// other case
-		return tinycolor(val);
-	}
-
-	const props = {};
-
-	for (const [k, v] of Object.entries(theme.props)) {
-		if (k.startsWith('$')) continue; // ignore const
-
-		props[k] = v.startsWith('"') ? v.replace(/^"\s*/, '') : genValue(getColor(v));
-	}
-
-	return props;
-}
-
-function genValue(c: tinycolor.Instance): string {
-	return c.toRgbString();
-}
-
-export function validateTheme(theme: Record<string, any>): boolean {
-	if (theme.id == null || typeof theme.id !== 'string') return false;
-	if (theme.name == null || typeof theme.name !== 'string') return false;
-	if (theme.base == null || !['light', 'dark'].includes(theme.base)) return false;
-	if (theme.props == null || typeof theme.props !== 'object') return false;
-	return true;
-}
diff --git a/packages/client/src/scripts/time.ts b/packages/client/src/scripts/time.ts
deleted file mode 100644
index 34e8b6b17c..0000000000
--- a/packages/client/src/scripts/time.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-const dateTimeIntervals = {
-	'day': 86400000,
-	'hour': 3600000,
-	'ms': 1,
-};
-
-export function dateUTC(time: number[]): Date {
-	const d = time.length === 2 ? Date.UTC(time[0], time[1])
-					: time.length === 3 ? Date.UTC(time[0], time[1], time[2])
-					: time.length === 4 ? Date.UTC(time[0], time[1], time[2], time[3])
-					: time.length === 5 ? Date.UTC(time[0], time[1], time[2], time[3], time[4])
-					: time.length === 6 ? Date.UTC(time[0], time[1], time[2], time[3], time[4], time[5])
-					: time.length === 7 ? Date.UTC(time[0], time[1], time[2], time[3], time[4], time[5], time[6])
-					: null;
-
-	if (!d) throw 'wrong number of arguments';
-
-	return new Date(d);
-}
-
-export function isTimeSame(a: Date, b: Date): boolean {
-	return a.getTime() === b.getTime();
-}
-
-export function isTimeBefore(a: Date, b: Date): boolean {
-	return (a.getTime() - b.getTime()) < 0;
-}
-
-export function isTimeAfter(a: Date, b: Date): boolean {
-	return (a.getTime() - b.getTime()) > 0;
-}
-
-export function addTime(x: Date, value: number, span: keyof typeof dateTimeIntervals = 'ms'): Date {
-	return new Date(x.getTime() + (value * dateTimeIntervals[span]));
-}
-
-export function subtractTime(x: Date, value: number, span: keyof typeof dateTimeIntervals = 'ms'): Date {
-	return new Date(x.getTime() - (value * dateTimeIntervals[span]));
-}
diff --git a/packages/client/src/scripts/timezones.ts b/packages/client/src/scripts/timezones.ts
deleted file mode 100644
index 8ce07323f6..0000000000
--- a/packages/client/src/scripts/timezones.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-export const timezones = [{
-	name: 'UTC',
-	abbrev: 'UTC',
-	offset: 0,
-}, {
-	name: 'Europe/Berlin',
-	abbrev: 'CET',
-	offset: 60,
-}, {
-	name: 'Asia/Tokyo',
-	abbrev: 'JST',
-	offset: 540,
-}, {
-	name: 'Asia/Seoul',
-	abbrev: 'KST',
-	offset: 540,
-}, {
-	name: 'Asia/Shanghai',
-	abbrev: 'CST',
-	offset: 480,
-}, {
-	name: 'Australia/Sydney',
-	abbrev: 'AEST',
-	offset: 600,
-}, {
-	name: 'Australia/Darwin',
-	abbrev: 'ACST',
-	offset: 570,
-}, {
-	name: 'Australia/Perth',
-	abbrev: 'AWST',
-	offset: 480,
-}, {
-	name: 'America/New_York',
-	abbrev: 'EST',
-	offset: -300,
-}, {
-	name: 'America/Mexico_City',
-	abbrev: 'CST',
-	offset: -360,
-}, {
-	name: 'America/Phoenix',
-	abbrev: 'MST',
-	offset: -420,
-}, {
-	name: 'America/Los_Angeles',
-	abbrev: 'PST',
-	offset: -480,
-}];
diff --git a/packages/client/src/scripts/touch.ts b/packages/client/src/scripts/touch.ts
deleted file mode 100644
index 5251bc2e27..0000000000
--- a/packages/client/src/scripts/touch.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-const isTouchSupported = 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0;
-
-export let isTouchUsing = false;
-
-export let isScreenTouching = false;
-
-if (isTouchSupported) {
-	window.addEventListener('touchstart', () => {
-		// maxTouchPointsなどでの判定だけだと、「タッチ機能付きディスプレイを使っているがマウスでしか操作しない」場合にも
-		// タッチで使っていると判定されてしまうため、実際に一度でもタッチされたらtrueにする
-		isTouchUsing = true;
-
-		isScreenTouching = true;
-	}, { passive: true });
-	
-	window.addEventListener('touchend', () => {
-		// 子要素のtouchstartイベントでstopPropagation()が呼ばれると親要素に伝搬されずタッチされたと判定されないため、
-		// touchendイベントでもtouchstartイベントと同様にtrueにする
-		isTouchUsing = true;
-
-		isScreenTouching = false;
-	}, { passive: true });
-}
diff --git a/packages/client/src/scripts/unison-reload.ts b/packages/client/src/scripts/unison-reload.ts
deleted file mode 100644
index 59af584c1b..0000000000
--- a/packages/client/src/scripts/unison-reload.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-// SafariがBroadcastChannel未実装なのでライブラリを使う
-import { BroadcastChannel } from 'broadcast-channel';
-
-export const reloadChannel = new BroadcastChannel<string | null>('reload');
-
-// BroadcastChannelを用いて、クライアントが一斉にreloadするようにします。
-export function unisonReload(path?: string) {
-	if (path !== undefined) {
-		reloadChannel.postMessage(path);
-		location.href = path;
-	} else {
-		reloadChannel.postMessage(null);
-		location.reload();
-	}
-}
diff --git a/packages/client/src/scripts/upload.ts b/packages/client/src/scripts/upload.ts
deleted file mode 100644
index 9a39652ef5..0000000000
--- a/packages/client/src/scripts/upload.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import { reactive, ref } from 'vue';
-import * as Misskey from 'misskey-js';
-import { readAndCompressImage } from 'browser-image-resizer';
-import { getCompressionConfig } from './upload/compress-config';
-import { defaultStore } from '@/store';
-import { apiUrl } from '@/config';
-import { $i } from '@/account';
-import { alert } from '@/os';
-import { i18n } from '@/i18n';
-
-type Uploading = {
-	id: string;
-	name: string;
-	progressMax: number | undefined;
-	progressValue: number | undefined;
-	img: string;
-};
-export const uploads = ref<Uploading[]>([]);
-
-const mimeTypeMap = {
-	'image/webp': 'webp',
-	'image/jpeg': 'jpg',
-	'image/png': 'png',
-} as const;
-
-export function uploadFile(
-	file: File,
-	folder?: any,
-	name?: string,
-	keepOriginal: boolean = defaultStore.state.keepOriginalUploading,
-): Promise<Misskey.entities.DriveFile> {
-	if ($i == null) throw new Error('Not logged in');
-
-	if (folder && typeof folder === 'object') folder = folder.id;
-
-	return new Promise((resolve, reject) => {
-		const id = Math.random().toString();
-
-		const reader = new FileReader();
-		reader.onload = async (): Promise<void> => {
-			const ctx = reactive<Uploading>({
-				id: id,
-				name: name ?? file.name ?? 'untitled',
-				progressMax: undefined,
-				progressValue: undefined,
-				img: window.URL.createObjectURL(file),
-			});
-
-			uploads.value.push(ctx);
-
-			const config = !keepOriginal ? await getCompressionConfig(file) : undefined;
-			let resizedImage: Blob | undefined;
-			if (config) {
-				try {
-					const resized = await readAndCompressImage(file, config);
-					if (resized.size < file.size || file.type === 'image/webp') {
-						// The compression may not always reduce the file size
-						// (and WebP is not browser safe yet)
-						resizedImage = resized;
-					}
-					if (_DEV_) {
-						const saved = ((1 - resized.size / file.size) * 100).toFixed(2);
-						console.log(`Image compression: before ${file.size} bytes, after ${resized.size} bytes, saved ${saved}%`);
-					}
-
-					ctx.name = file.type !== config.mimeType ? `${ctx.name}.${mimeTypeMap[config.mimeType]}` : ctx.name;
-				} catch (err) {
-					console.error('Failed to resize image', err);
-				}
-			}
-
-			const formData = new FormData();
-			formData.append('i', $i.token);
-			formData.append('force', 'true');
-			formData.append('file', resizedImage ?? file);
-			formData.append('name', ctx.name);
-			if (folder) formData.append('folderId', folder);
-
-			const xhr = new XMLHttpRequest();
-			xhr.open('POST', apiUrl + '/drive/files/create', true);
-			xhr.onload = ((ev: ProgressEvent<XMLHttpRequest>) => {
-				if (xhr.status !== 200 || ev.target == null || ev.target.response == null) {
-					// TODO: 消すのではなくて(ネットワーク的なエラーなら)再送できるようにしたい
-					uploads.value = uploads.value.filter(x => x.id !== id);
-
-					if (ev.target?.response) {
-						const res = JSON.parse(ev.target.response);
-						if (res.error?.id === 'bec5bd69-fba3-43c9-b4fb-2894b66ad5d2') {
-							alert({
-								type: 'error',
-								title: i18n.ts.failedToUpload,
-								text: i18n.ts.cannotUploadBecauseInappropriate,
-							});
-						} else if (res.error?.id === 'd08dbc37-a6a9-463a-8c47-96c32ab5f064') {
-							alert({
-								type: 'error',
-								title: i18n.ts.failedToUpload,
-								text: i18n.ts.cannotUploadBecauseNoFreeSpace,
-							});
-						} else {
-							alert({
-								type: 'error',
-								title: i18n.ts.failedToUpload,
-								text: `${res.error?.message}\n${res.error?.code}\n${res.error?.id}`,
-							});
-						}
-					} else {
-						alert({
-							type: 'error',
-							title: 'Failed to upload',
-							text: `${JSON.stringify(ev.target?.response)}, ${JSON.stringify(xhr.response)}`,
-						});
-					}
-
-					reject();
-					return;
-				}
-
-				const driveFile = JSON.parse(ev.target.response);
-
-				resolve(driveFile);
-
-				uploads.value = uploads.value.filter(x => x.id !== id);
-			}) as (ev: ProgressEvent<EventTarget>) => any;
-
-			xhr.upload.onprogress = ev => {
-				if (ev.lengthComputable) {
-					ctx.progressMax = ev.total;
-					ctx.progressValue = ev.loaded;
-				}
-			};
-
-			xhr.send(formData);
-		};
-		reader.readAsArrayBuffer(file);
-	});
-}
diff --git a/packages/client/src/scripts/upload/compress-config.ts b/packages/client/src/scripts/upload/compress-config.ts
deleted file mode 100644
index 793c78ad20..0000000000
--- a/packages/client/src/scripts/upload/compress-config.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import isAnimated from 'is-file-animated';
-import type { BrowserImageResizerConfig } from 'browser-image-resizer';
-
-const compressTypeMap = {
-	'image/jpeg': { quality: 0.85, mimeType: 'image/jpeg' },
-	'image/png': { quality: 1, mimeType: 'image/png' },
-	'image/webp': { quality: 0.85, mimeType: 'image/jpeg' },
-	'image/svg+xml': { quality: 1, mimeType: 'image/png' },
-} as const;
-
-export async function getCompressionConfig(file: File): Promise<BrowserImageResizerConfig | undefined> {
-	const imgConfig = compressTypeMap[file.type];
-	if (!imgConfig || await isAnimated(file)) {
-		return;
-	}
-
-	return {
-		maxWidth: 2048,
-		maxHeight: 2048,
-		debug: true,
-		...imgConfig,
-	};
-}
diff --git a/packages/client/src/scripts/url.ts b/packages/client/src/scripts/url.ts
deleted file mode 100644
index 86735de9f0..0000000000
--- a/packages/client/src/scripts/url.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export function query(obj: Record<string, any>): 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((p) => `${p[0]}=${encodeURIComponent(p[1])}`)
-		.join('&');
-}
-
-export function appendQuery(url: string, query: string): string {
-	return `${url}${/\?/.test(url) ? url.endsWith('?') ? '' : '&' : '?'}${query}`;
-}
diff --git a/packages/client/src/scripts/use-chart-tooltip.ts b/packages/client/src/scripts/use-chart-tooltip.ts
deleted file mode 100644
index 881e5e9ad5..0000000000
--- a/packages/client/src/scripts/use-chart-tooltip.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { onUnmounted, ref } from 'vue';
-import * as os from '@/os';
-import MkChartTooltip from '@/components/MkChartTooltip.vue';
-
-export function useChartTooltip(opts: { position: 'top' | 'middle' } = { position: 'top' }) {
-	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;
-		if (opts.position === 'top') {
-			tooltipY.value = rect.top + window.pageYOffset;
-		} else if (opts.position === 'middle') {
-			tooltipY.value = rect.top + window.pageYOffset + context.tooltip.caretY;
-		}
-	}
-
-	return {
-		handler,
-	};
-}
diff --git a/packages/client/src/scripts/use-interval.ts b/packages/client/src/scripts/use-interval.ts
deleted file mode 100644
index 201ba417ef..0000000000
--- a/packages/client/src/scripts/use-interval.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { onMounted, onUnmounted } from 'vue';
-
-export function useInterval(fn: () => void, interval: number, options: {
-	immediate: boolean;
-	afterMounted: boolean;
-}): void {
-	if (Number.isNaN(interval)) return;
-
-	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/scripts/use-leave-guard.ts b/packages/client/src/scripts/use-leave-guard.ts
deleted file mode 100644
index a93b84d1fe..0000000000
--- a/packages/client/src/scripts/use-leave-guard.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { inject, onUnmounted, Ref } from 'vue';
-import { i18n } from '@/i18n';
-import * as os from '@/os';
-
-export function useLeaveGuard(enabled: Ref<boolean>) {
-	/* TODO
-	const setLeaveGuard = inject('setLeaveGuard');
-
-	if (setLeaveGuard) {
-		setLeaveGuard(async () => {
-			if (!enabled.value) return false;
-
-			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: i18n.ts.leaveConfirm,
-			});
-
-			return canceled;
-		});
-	} else {
-		onBeforeRouteLeave(async (to, from) => {
-			if (!enabled.value) return true;
-
-			const { canceled } = await os.confirm({
-				type: 'warning',
-				text: i18n.ts.leaveConfirm,
-			});
-
-			return !canceled;
-		});
-	}
-	*/
-
-	/*
-	function onBeforeLeave(ev: BeforeUnloadEvent) {
-		if (enabled.value) {
-			ev.preventDefault();
-			ev.returnValue = '';
-		}
-	}
-
-	window.addEventListener('beforeunload', onBeforeLeave);
-	onUnmounted(() => {
-		window.removeEventListener('beforeunload', onBeforeLeave);
-	});
-	*/
-}
diff --git a/packages/client/src/scripts/use-note-capture.ts b/packages/client/src/scripts/use-note-capture.ts
deleted file mode 100644
index e6bdb345c4..0000000000
--- a/packages/client/src/scripts/use-note-capture.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { onUnmounted, Ref } from 'vue';
-import * as misskey from 'misskey-js';
-import { stream } from '@/stream';
-import { $i } from '@/account';
-
-export function useNoteCapture(props: {
-	rootEl: Ref<HTMLElement>;
-	note: Ref<misskey.entities.Note>;
-	isDeletedRef: Ref<boolean>;
-}) {
-	const note = props.note;
-	const connection = $i ? stream : null;
-
-	function onStreamNoteUpdated(noteData): void {
-		const { type, id, body } = noteData;
-
-		if (id !== note.value.id) return;
-
-		switch (type) {
-			case 'reacted': {
-				const reaction = body.reaction;
-
-				if (body.emoji) {
-					const emojis = note.value.emojis || [];
-					if (!emojis.includes(body.emoji)) {
-						note.value.emojis = [...emojis, body.emoji];
-					}
-				}
-
-				// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
-				const currentCount = (note.value.reactions || {})[reaction] || 0;
-
-				note.value.reactions[reaction] = currentCount + 1;
-
-				if ($i && (body.userId === $i.id)) {
-					note.value.myReaction = reaction;
-				}
-				break;
-			}
-
-			case 'unreacted': {
-				const reaction = body.reaction;
-
-				// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
-				const currentCount = (note.value.reactions || {})[reaction] || 0;
-
-				note.value.reactions[reaction] = Math.max(0, currentCount - 1);
-
-				if ($i && (body.userId === $i.id)) {
-					note.value.myReaction = null;
-				}
-				break;
-			}
-
-			case 'pollVoted': {
-				const choice = body.choice;
-
-				const choices = [...note.value.poll.choices];
-				choices[choice] = {
-					...choices[choice],
-					votes: choices[choice].votes + 1,
-					...($i && (body.userId === $i.id) ? {
-						isVoted: true,
-					} : {}),
-				};
-
-				note.value.poll.choices = choices;
-				break;
-			}
-
-			case 'deleted': {
-				props.isDeletedRef.value = true;
-				break;
-			}
-		}
-	}
-
-	function capture(withHandler = false): void {
-		if (connection) {
-			// TODO: このノートがストリーミング経由で流れてきた場合のみ sr する
-			connection.send(document.body.contains(props.rootEl.value) ? 'sr' : 's', { id: note.value.id });
-			if (withHandler) connection.on('noteUpdated', onStreamNoteUpdated);
-		}
-	}
-
-	function decapture(withHandler = false): void {
-		if (connection) {
-			connection.send('un', {
-				id: note.value.id,
-			});
-			if (withHandler) connection.off('noteUpdated', onStreamNoteUpdated);
-		}
-	}
-
-	function onStreamConnected() {
-		capture(false);
-	}
-	
-	capture(true);
-	if (connection) {
-		connection.on('_connected_', onStreamConnected);
-	}
-	
-	onUnmounted(() => {
-		decapture(true);
-		if (connection) {
-			connection.off('_connected_', onStreamConnected);
-		}
-	});
-}
diff --git a/packages/client/src/scripts/use-tooltip.ts b/packages/client/src/scripts/use-tooltip.ts
deleted file mode 100644
index 1f6e0fb6ce..0000000000
--- a/packages/client/src/scripts/use-tooltip.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Ref, ref, watch, onUnmounted } from 'vue';
-
-export function useTooltip(
-	elRef: Ref<HTMLElement | { $el: HTMLElement } | null | undefined>,
-	onShow: (showing: Ref<boolean>) => void,
-	delay = 300,
-): void {
-	let isHovering = false;
-
-	// iOS(Androidも？)では、要素をタップした直後に(おせっかいで)mouseoverイベントを発火させたりするため、それを無視するためのフラグ
-	// 無視しないと、画面に触れてないのにツールチップが出たりし、ユーザビリティが損なわれる
-	// TODO: 一度でもタップすると二度とマウスでツールチップ出せなくなるのをどうにかする 定期的にfalseに戻すとか...？
-	let shouldIgnoreMouseover = false;
-
-	let timeoutId: number;
-
-	let changeShowingState: (() => void) | null;
-
-	const open = () => {
-		close();
-		if (!isHovering) return;
-		if (elRef.value == null) return;
-		const el = elRef.value instanceof Element ? elRef.value : elRef.value.$el;
-		if (!document.body.contains(el)) return; // openしようとしたときに既に元要素がDOMから消えている場合があるため
-
-		const showing = ref(true);
-		onShow(showing);
-		changeShowingState = () => {
-			showing.value = false;
-		};
-	};
-
-	const close = () => {
-		if (changeShowingState != null) {
-			changeShowingState();
-			changeShowingState = null;
-		}
-	};
-
-	const onMouseover = () => {
-		if (isHovering) return;
-		if (shouldIgnoreMouseover) return;
-		isHovering = true;
-		timeoutId = window.setTimeout(open, delay);
-	};
-
-	const onMouseleave = () => {
-		if (!isHovering) return;
-		isHovering = false;
-		window.clearTimeout(timeoutId);
-		close();
-	};
-
-	const onTouchstart = () => {
-		shouldIgnoreMouseover = true;
-		if (isHovering) return;
-		isHovering = true;
-		timeoutId = window.setTimeout(open, delay);
-	};
-
-	const onTouchend = () => {
-		if (!isHovering) return;
-		isHovering = false;
-		window.clearTimeout(timeoutId);
-		close();
-	};
-
-	const stop = watch(elRef, () => {
-		if (elRef.value) {
-			stop();
-			const el = elRef.value instanceof Element ? elRef.value : elRef.value.$el;
-			el.addEventListener('mouseover', onMouseover, { passive: true });
-			el.addEventListener('mouseleave', onMouseleave, { passive: true });
-			el.addEventListener('touchstart', onTouchstart, { passive: true });
-			el.addEventListener('touchend', onTouchend, { passive: true });
-			el.addEventListener('click', close, { passive: true });
-		}
-	}, {
-		immediate: true,
-		flush: 'post',
-	});
-
-	onUnmounted(() => {
-		close();
-	});
-}
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
deleted file mode 100644
index 1bedab5fad..0000000000
--- a/packages/client/src/store.ts
+++ /dev/null
@@ -1,383 +0,0 @@
-import { markRaw, ref } from 'vue';
-import { Storage } from './pizzax';
-import { Theme } from './scripts/theme';
-
-interface PostFormAction {
-	title: string,
-	handler: <T>(form: T, update: (key: unknown, value: unknown) => void) => void;
-}
-
-interface UserAction {
-	title: string,
-	handler: (user: UserDetailed) => void;
-}
-
-interface NoteAction {
-	title: string,
-	handler: (note: Note) => void;
-}
-
-interface NoteViewInterruptor {
-	handler: (note: Note) => unknown;
-}
-
-interface NotePostInterruptor {
-	handler: (note: FIXME) => unknown;
-}
-
-export const postFormActions: PostFormAction[] = [];
-export const userActions: UserAction[] = [];
-export const noteActions: NoteAction[] = [];
-export const noteViewInterruptors: NoteViewInterruptor[] = [];
-export const notePostInterruptors: NotePostInterruptor[] = [];
-
-// TODO: それぞれいちいちwhereとかdefaultというキーを付けなきゃいけないの冗長なのでなんとかする(ただ型定義が面倒になりそう)
-//       あと、現行の定義の仕方なら「whereが何であるかに関わらずキー名の重複不可」という制約を付けられるメリットもあるからそのメリットを引き継ぐ方法も考えないといけない
-export const defaultStore = markRaw(new Storage('base', {
-	tutorial: {
-		where: 'account',
-		default: 0,
-	},
-	keepCw: {
-		where: 'account',
-		default: true,
-	},
-	showFullAcct: {
-		where: 'account',
-		default: false,
-	},
-	rememberNoteVisibility: {
-		where: 'account',
-		default: false,
-	},
-	defaultNoteVisibility: {
-		where: 'account',
-		default: 'public',
-	},
-	defaultNoteLocalOnly: {
-		where: 'account',
-		default: false,
-	},
-	uploadFolder: {
-		where: 'account',
-		default: null as string | null,
-	},
-	pastedFileName: {
-		where: 'account',
-		default: 'yyyy-MM-dd HH-mm-ss [{{number}}]',
-	},
-	keepOriginalUploading: {
-		where: 'account',
-		default: false,
-	},
-	memo: {
-		where: 'account',
-		default: null,
-	},
-	reactions: {
-		where: 'account',
-		default: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮'],
-	},
-	mutedWords: {
-		where: 'account',
-		default: [],
-	},
-	mutedAds: {
-		where: 'account',
-		default: [] as string[],
-	},
-
-	menu: {
-		where: 'deviceAccount',
-		default: [
-			'notifications',
-			'favorites',
-			'drive',
-			'followRequests',
-			'-',
-			'explore',
-			'announcements',
-			'search',
-			'-',
-			'ui',
-		],
-	},
-	visibility: {
-		where: 'deviceAccount',
-		default: 'public' as 'public' | 'home' | 'followers' | 'specified',
-	},
-	localOnly: {
-		where: 'deviceAccount',
-		default: false,
-	},
-	statusbars: {
-		where: 'deviceAccount',
-		default: [] as {
-			name: string;
-			id: string;
-			type: string;
-			size: 'verySmall' | 'small' | 'medium' | 'large' | 'veryLarge';
-			black: boolean;
-			props: Record<string, any>;
-		}[],
-	},
-	widgets: {
-		where: 'deviceAccount',
-		default: [] as {
-			name: string;
-			id: string;
-			place: string | null;
-			data: Record<string, any>;
-		}[],
-	},
-	tl: {
-		where: 'deviceAccount',
-		default: {
-			src: 'home' as 'home' | 'local' | 'social' | 'global',
-			arg: null,
-		},
-	},
-
-	overridedDeviceKind: {
-		where: 'device',
-		default: null as null | 'smartphone' | 'tablet' | 'desktop',
-	},
-	serverDisconnectedBehavior: {
-		where: 'device',
-		default: 'quiet' as 'quiet' | 'reload' | 'dialog',
-	},
-	nsfw: {
-		where: 'device',
-		default: 'respect' as 'respect' | 'force' | 'ignore',
-	},
-	animation: {
-		where: 'device',
-		default: true,
-	},
-	animatedMfm: {
-		where: 'device',
-		default: false,
-	},
-	loadRawImages: {
-		where: 'device',
-		default: false,
-	},
-	imageNewTab: {
-		where: 'device',
-		default: false,
-	},
-	disableShowingAnimatedImages: {
-		where: 'device',
-		default: false,
-	},
-	disablePagesScript: {
-		where: 'device',
-		default: false,
-	},
-	emojiStyle: {
-		where: 'device',
-		default: 'twemoji', // twemoji / fluentEmoji / native
-	},
-	disableDrawer: {
-		where: 'device',
-		default: false,
-	},
-	useBlurEffectForModal: {
-		where: 'device',
-		default: true,
-	},
-	useBlurEffect: {
-		where: 'device',
-		default: true,
-	},
-	showFixedPostForm: {
-		where: 'device',
-		default: false,
-	},
-	enableInfiniteScroll: {
-		where: 'device',
-		default: true,
-	},
-	useReactionPickerForContextMenu: {
-		where: 'device',
-		default: false,
-	},
-	showGapBetweenNotesInTimeline: {
-		where: 'device',
-		default: false,
-	},
-	darkMode: {
-		where: 'device',
-		default: false,
-	},
-	instanceTicker: {
-		where: 'device',
-		default: 'remote' as 'none' | 'remote' | 'always',
-	},
-	reactionPickerSize: {
-		where: 'device',
-		default: 1,
-	},
-	reactionPickerWidth: {
-		where: 'device',
-		default: 1,
-	},
-	reactionPickerHeight: {
-		where: 'device',
-		default: 2,
-	},
-	reactionPickerUseDrawerForMobile: {
-		where: 'device',
-		default: true,
-	},
-	recentlyUsedEmojis: {
-		where: 'device',
-		default: [] as string[],
-	},
-	recentlyUsedUsers: {
-		where: 'device',
-		default: [] as string[],
-	},
-	defaultSideView: {
-		where: 'device',
-		default: false,
-	},
-	menuDisplay: {
-		where: 'device',
-		default: 'sideFull' as 'sideFull' | 'sideIcon' | 'top',
-	},
-	reportError: {
-		where: 'device',
-		default: false,
-	},
-	squareAvatars: {
-		where: 'device',
-		default: false,
-	},
-	postFormWithHashtags: {
-		where: 'device',
-		default: false,
-	},
-	postFormHashtags: {
-		where: 'device',
-		default: '',
-	},
-	themeInitial: {
-		where: 'device',
-		default: true,
-	},
-	numberOfPageCache: {
-		where: 'device',
-		default: 5,
-	},
-	aiChanMode: {
-		where: 'device',
-		default: false,
-	},
-}));
-
-// TODO: 他のタブと永続化されたstateを同期
-
-const PREFIX = 'miux:';
-
-type Plugin = {
-	id: string;
-	name: string;
-	active: boolean;
-	configData: Record<string, any>;
-	token: string;
-	ast: any[];
-};
-
-interface Watcher {
-	key: string;
-	callback: (value: unknown) => void;
-}
-
-/**
- * 常にメモリにロードしておく必要がないような設定情報を保管するストレージ(非リアクティブ)
- */
-import lightTheme from '@/themes/l-light.json5';
-import darkTheme from '@/themes/d-green-lime.json5';
-import { Note, UserDetailed } from 'misskey-js/built/entities';
-
-export class ColdDeviceStorage {
-	public static default = {
-		lightTheme,
-		darkTheme,
-		syncDeviceDarkMode: true,
-		plugins: [] as Plugin[],
-		mediaVolume: 0.5,
-		sound_masterVolume: 0.3,
-		sound_note: { type: 'syuilo/down', volume: 1 },
-		sound_noteMy: { type: 'syuilo/up', volume: 1 },
-		sound_notification: { type: 'syuilo/pope2', volume: 1 },
-		sound_chat: { type: 'syuilo/pope1', volume: 1 },
-		sound_chatBg: { type: 'syuilo/waon', volume: 1 },
-		sound_antenna: { type: 'syuilo/triple', volume: 1 },
-		sound_channel: { type: 'syuilo/square-pico', volume: 1 },
-	};
-
-	public static watchers: Watcher[] = [];
-
-	public static get<T extends keyof typeof ColdDeviceStorage.default>(key: T): typeof ColdDeviceStorage.default[T] {
-		// TODO: indexedDBにする
-		//       ただしその際はnullチェックではなくキー存在チェックにしないとダメ
-		//       (indexedDBはnullを保存できるため、ユーザーが意図してnullを格納した可能性がある)
-		const value = localStorage.getItem(PREFIX + key);
-		if (value == null) {
-			return ColdDeviceStorage.default[key];
-		} else {
-			return JSON.parse(value);
-		}
-	}
-
-	public static set<T extends keyof typeof ColdDeviceStorage.default>(key: T, value: typeof ColdDeviceStorage.default[T]): void {
-		// 呼び出し側のバグ等で undefined が来ることがある
-		// undefined を文字列として localStorage に入れると参照する際の JSON.parse でコケて不具合の元になるため無視
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-		if (value === undefined) {
-			console.error(`attempt to store undefined value for key '${key}'`);
-			return;
-		}
-
-		localStorage.setItem(PREFIX + key, JSON.stringify(value));
-
-		for (const watcher of this.watchers) {
-			if (watcher.key === key) watcher.callback(value);
-		}
-	}
-
-	public static watch(key, callback) {
-		this.watchers.push({ key, callback });
-	}
-
-	// TODO: VueのcustomRef使うと良い感じになるかも
-	public static ref<T extends keyof typeof ColdDeviceStorage.default>(key: T) {
-		const v = ColdDeviceStorage.get(key);
-		const r = ref(v);
-		// TODO: このままではwatcherがリークするので開放する方法を考える
-		this.watch(key, v => {
-			r.value = v;
-		});
-		return r;
-	}
-
-	/**
-	 * 特定のキーの、簡易的なgetter/setterを作ります
-	 * 主にvue場で設定コントロールのmodelとして使う用
-	 */
-	public static makeGetterSetter<K extends keyof typeof ColdDeviceStorage.default>(key: K) {
-		// TODO: VueのcustomRef使うと良い感じになるかも
-		const valueRef = ColdDeviceStorage.ref(key);
-		return {
-			get: () => {
-				return valueRef.value;
-			},
-			set: (value: unknown) => {
-				const val = value;
-				ColdDeviceStorage.set(key, val);
-			},
-		};
-	}
-}
diff --git a/packages/client/src/stream.ts b/packages/client/src/stream.ts
deleted file mode 100644
index dea3459b86..0000000000
--- a/packages/client/src/stream.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as Misskey from 'misskey-js';
-import { markRaw } from 'vue';
-import { $i } from '@/account';
-import { url } from '@/config';
-
-export const stream = markRaw(new Misskey.Stream(url, $i ? {
-	token: $i.token,
-} : null));
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
deleted file mode 100644
index 8b7a846863..0000000000
--- a/packages/client/src/style.scss
+++ /dev/null
@@ -1,584 +0,0 @@
-@charset "utf-8";
-
-:root {
-	--radius: 12px;
-	--marginFull: 16px;
-	--marginHalf: 10px;
-
-	--margin: var(--marginFull);
-
-	@media (max-width: 500px) {
-		--margin: var(--marginHalf);
-	}
-
-	//--ad: rgb(255 169 0 / 10%);
-}
-
-::selection {
-	color: #fff;
-	background-color: var(--accent);
-} 
-
-html {
-	touch-action: manipulation;
-	background-color: var(--bg);
-	background-attachment: fixed;
-	background-size: cover;
-	background-position: center;
-	color: var(--fg);
-	accent-color: var(--accent);
-	overflow: auto;
-	overflow-wrap: break-word;
-	font-family: 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
-	font-size: 14px;
-	line-height: 1.35;
-	text-size-adjust: 100%;
-	tab-size: 2;
-
-	&, * {
-		scrollbar-color: var(--scrollbarHandle) inherit;
-		scrollbar-width: thin;
-
-		&::-webkit-scrollbar {
-			width: 6px;
-			height: 6px;
-		}
-
-		&::-webkit-scrollbar-track {
-			background: inherit;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--scrollbarHandle);
-
-			&:hover {
-				background: var(--scrollbarHandleHover);
-			}
-
-			&:active {
-				background: var(--accent);
-			}
-		}
-	}
-
-	&.f-1 {
-		font-size: 15px;
-	}
-
-	&.f-2 {
-		font-size: 16px;
-	}
-
-	&.f-3 {
-		font-size: 17px;
-	}
-
-	&.useSystemFont {
-		font-family: 'Hiragino Maru Gothic Pro', sans-serif;
-	}
-}
-
-html._themeChanging_ {
-	&, * {
-		transition: background 1s ease, border 1s ease !important;
-	}
-}
-
-html, body {
-	margin: 0;
-	padding: 0;
-	scroll-behavior: smooth;
-}
-
-a {
-	text-decoration: none;
-	cursor: pointer;
-	color: inherit;
-	tap-highlight-color: transparent;
-	-webkit-tap-highlight-color: transparent;
-
-	&:hover {
-		text-decoration: underline;
-	}
-}
-
-textarea, input {
-	tap-highlight-color: transparent;
-	-webkit-tap-highlight-color: transparent;
-}
-
-optgroup, option {
-	background: var(--panel);
-	color: var(--fg);
-}
-
-hr {
-	margin: var(--margin) 0 var(--margin) 0;
-	border: none;
-	height: 1px;
-	background: var(--divider);
-}
-
-.ti {
-	vertical-align: -10%;
-	line-height: 0.9em;
-
-	&:before {
-		font-size: 130%;
-	}
-}
-
-.ti-fw {
-	display: inline-block;
-	text-align: center;
-}
-
-._indicatorCircle {
-	display: inline-block;
-	width: 1em;
-	height: 1em;
-	border-radius: 100%;
-	background: currentColor;
-}
-
-._noSelect {
-	user-select: none;
-	-webkit-user-select: none;
-	-webkit-touch-callout: none;
-}
-
-._ghost {
-	&, * {
-		@extend ._noSelect;
-		pointer-events: none;
-	}
-}
-
-._modalBg {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background: var(--modalBg);
-	-webkit-backdrop-filter: var(--modalBgFilter);
-	backdrop-filter: var(--modalBgFilter);
-}
-
-._shadow {
-	box-shadow: 0px 4px 32px var(--shadow) !important;
-}
-
-._button {
-	appearance: none;
-	display: inline-block;
-	padding: 0;
-	margin: 0; // for Safari
-	background: none;
-	border: none;
-	cursor: pointer;
-	color: inherit;
-	touch-action: manipulation;
-	tap-highlight-color: transparent;
-	-webkit-tap-highlight-color: transparent;
-	font-size: 1em;
-	font-family: inherit;
-	line-height: inherit;
-	max-width: 100%;
-
-	&, * {
-		@extend ._noSelect;
-	}
-
-	* {
-		pointer-events: none;
-	}
-
-	&:focus-visible {
-		outline: none;
-	}
-
-	&:disabled {
-		opacity: 0.5;
-		cursor: default;
-	}
-}
-
-._buttonPrimary {
-	@extend ._button;
-	color: var(--fgOnAccent);
-	background: var(--accent);
-
-	&:not(:disabled):hover {
-		background: var(--X8);
-	}
-
-	&:not(:disabled):active {
-		background: var(--X9);
-	}
-}
-
-._buttonGradate {
-	@extend ._buttonPrimary;
-	color: var(--fgOnAccent);
-	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-
-	&:not(:disabled):hover {
-		background: linear-gradient(90deg, var(--X8), var(--X8));
-	}
-
-	&:not(:disabled):active {
-		background: linear-gradient(90deg, var(--X8), var(--X8));
-	}
-}
-
-._help {
-	color: var(--accent);
-	cursor: help
-}
-
-._textButton {
-	@extend ._button;
-	color: var(--accent);
-
-	&:not(:disabled):hover {
-		text-decoration: underline;
-	}
-}
-
-._inputs {
-	display: flex;
-	margin: 32px 0;
-
-	&:first-child {
-		margin-top: 8px;
-	}
-
-	&:last-child {
-		margin-bottom: 8px;
-	}
-
-	> * {
-		flex: 1;
-		margin: 0 !important;
-
-		&:not(:first-child) {
-			margin-left: 8px !important;
-		}
-
-		&:not(:last-child) {
-			margin-right: 8px !important;
-		}
-	}
-}
-
-._panel {
-	background: var(--panel);
-	border-radius: var(--radius);
-	overflow: clip;
-}
-
-._block {
-	@extend ._panel;
-
-	& + ._block {
-		margin-top: var(--margin);
-	}
-}
-
-._gap {
-	margin: var(--margin) 0;
-}
-
-// TODO: 廃止
-._card {
-	@extend ._panel;
-
-	// TODO: _cardTitle に
-	> ._title {
-		margin: 0;
-		padding: 22px 32px;
-		font-size: 1em;
-		border-bottom: solid 1px var(--panelHeaderDivider);
-		font-weight: bold;
-		background: var(--panelHeaderBg);
-		color: var(--panelHeaderFg);
-
-		@media (max-width: 500px) {
-			padding: 16px;
-			font-size: 1em;
-		}
-	}
-
-	// TODO: _cardContent に
-	> ._content {
-		padding: 32px;
-
-		@media (max-width: 500px) {
-			padding: 16px;
-		}
-
-		&._noPad {
-			padding: 0 !important;
-		}
-
-		& + ._content {
-			border-top: solid 0.5px var(--divider);
-		}
-	}
-
-	// TODO: _cardFooter に
-	> ._footer {
-		border-top: solid 0.5px var(--divider);
-		padding: 24px 32px;
-
-		@media (max-width: 500px) {
-			padding: 16px;
-		}
-	}
-}
-
-._borderButton {
-	@extend ._button;
-	display: block;
-	width: 100%;
-	padding: 10px;
-	box-sizing: border-box;
-	text-align: center;
-	border: solid 0.5px var(--divider);
-	border-radius: var(--radius);
-
-	&:active {
-		border-color: var(--accent);
-	}
-}
-
-._popup {
-	background: var(--popup);
-	border-radius: var(--radius);
-	contain: content;
-}
-
-// TODO: 廃止
-._monolithic_ {
-	._section:not(:empty) {
-		box-sizing: border-box;
-		padding: var(--root-margin, 32px);
-	
-		@media (max-width: 500px) {
-			--root-margin: 10px;
-		}
-	
-		& + ._section:not(:empty) {
-			border-top: solid 0.5px var(--divider);
-		}
-	}
-}
-
-._narrow_ ._card {
-	> ._title {
-		padding: 16px;
-		font-size: 1em;
-	}
-
-	> ._content {
-		padding: 16px;
-	}
-
-	> ._footer {
-		padding: 16px;
-	}
-}
-
-._acrylic {
-	background: var(--acrylicPanel);
-	-webkit-backdrop-filter: var(--blur, blur(15px));
-	backdrop-filter: var(--blur, blur(15px));
-}
-
-._formBlock {
-	margin: 1.5em 0;
-}
-
-._formRoot {
-	> ._formBlock:first-child {
-		margin-top: 0;
-	}
-
-	> ._formBlock:last-child {
-		margin-bottom: 0;
-	}
-}
-
-._formLinksGrid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-	grid-gap: 12px;
-}
-
-._formLinks {
-	> *:not(:last-child) {
-		margin-bottom: 8px;
-	}
-}
-
-._beta {
-	margin-left: 0.7em;
-	font-size: 65%;
-	padding: 2px 3px;
-	color: var(--accent);
-	border: solid 1px var(--accent);
-	border-radius: 4px;
-	vertical-align: top;
-}
-
-._table {
-	> ._row {
-		display: flex;
-
-		&:not(:last-child) {
-			margin-bottom: 16px;
-
-			@media (max-width: 500px) {
-				margin-bottom: 8px;
-			}
-		}
-
-		> ._cell {
-			flex: 1;
-
-			> ._label {
-				font-size: 80%;
-				opacity: 0.7;
-
-				> ._icon {
-					margin-right: 4px;
-					display: none;
-				}
-			}
-		}
-	}
-}
-
-._fullinfo {
-	padding: 64px 32px;
-	text-align: center;
-
-	> img {
-		vertical-align: bottom;
-		height: 128px;
-		margin-bottom: 16px;
-		border-radius: 16px;
-	}
-}
-
-._keyValue {
-	display: flex;
-
-	> * {
-		flex: 1;
-	}
-}
-
-._link {
-	color: var(--link);
-}
-
-._caption {
-	font-size: 0.8em;
-	opacity: 0.7;
-}
-
-._monospace {
-	font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace !important;
-}
-
-._code {
-	@extend ._monospace;
-	background: #2d2d2d;
-	color: #ccc;
-	font-size: 14px;
-	line-height: 1.5;
-	padding: 5px;
-}
-
-.prism-editor__textarea:focus {
-	outline: none;
-}
-
-._zoom {
-	transition-duration: 0.5s, 0.5s;
-	transition-property: opacity, transform;
-	transition-timing-function: cubic-bezier(0,.5,.5,1);
-}
-
-.zoom-enter-active, .zoom-leave-active {
-	transition: opacity 0.5s, transform 0.5s !important;
-}
-.zoom-enter-from, .zoom-leave-to {
-	opacity: 0;
-	transform: scale(0.9);
-}
-
-@keyframes blink {
-	0% { opacity: 1; transform: scale(1); }
-	30% { opacity: 1; transform: scale(1); }
-	90% { opacity: 0; transform: scale(0.5); }
-}
-
-@keyframes tada {
-	from {
-		transform: scale3d(1, 1, 1);
-	}
-
-	10%,
-	20% {
-		transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
-	}
-
-	30%,
-	50%,
-	70%,
-	90% {
-		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
-	}
-
-	40%,
-	60%,
-	80% {
-		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
-	}
-
-	to {
-		transform: scale3d(1, 1, 1);
-	}
-}
-
-._anime_bounce {
-	will-change: transform;
-  animation: bounce ease 0.7s;
-  animation-iteration-count: 1;
-  transform-origin: 50% 50%;
-}
-._anime_bounce_ready {
-	will-change: transform;
-	transform:  scaleX(0.90) scaleY(0.90) ;
-}
-._anime_bounce_standBy {
-	transition: transform 0.1s ease;
-}
-
-@keyframes bounce{
-  0% {
-    transform:  scaleX(0.90) scaleY(0.90) ;
-  }
-  19% {
-    transform:  scaleX(1.10) scaleY(1.10) ;
-  }
-  48% {
-    transform:  scaleX(0.95) scaleY(0.95) ;
-  }
-  100% {
-    transform:  scaleX(1.00) scaleY(1.00) ;
-  }
-}
diff --git a/packages/client/src/theme-store.ts b/packages/client/src/theme-store.ts
deleted file mode 100644
index fdc92ed793..0000000000
--- a/packages/client/src/theme-store.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { api } from '@/os';
-import { $i } from '@/account';
-import { Theme } from './scripts/theme';
-
-const lsCacheKey = $i ? `themes:${$i.id}` : '';
-
-export function getThemes(): Theme[] {
-	return JSON.parse(localStorage.getItem(lsCacheKey) || '[]');
-}
-
-export async function fetchThemes(): Promise<void> {
-	if ($i == null) return;
-
-	try {
-		const themes = await api('i/registry/get', { scope: ['client'], key: 'themes' });
-		localStorage.setItem(lsCacheKey, JSON.stringify(themes));
-	} catch (err) {
-		if (err.code === 'NO_SUCH_KEY') return;
-		throw err;
-	}
-}
-
-export async function addTheme(theme: Theme): Promise<void> {
-	await fetchThemes();
-	const themes = getThemes().concat(theme);
-	await api('i/registry/set', { scope: ['client'], key: 'themes', value: themes });
-	localStorage.setItem(lsCacheKey, JSON.stringify(themes));
-}
-
-export async function removeTheme(theme: Theme): Promise<void> {
-	const themes = getThemes().filter(t => t.id !== theme.id);
-	await api('i/registry/set', { scope: ['client'], key: 'themes', value: themes });
-	localStorage.setItem(lsCacheKey, JSON.stringify(themes));
-}
diff --git a/packages/client/src/themes/_dark.json5 b/packages/client/src/themes/_dark.json5
deleted file mode 100644
index 88ec8a5459..0000000000
--- a/packages/client/src/themes/_dark.json5
+++ /dev/null
@@ -1,99 +0,0 @@
-// ダークテーマのベーステーマ
-// このテーマが直接使われることは無い
-{
-	id: 'dark',
-
-	name: 'Dark',
-	author: 'syuilo',
-	desc: 'Default dark theme',
-	kind: 'dark',
-
-	props: {
-		accent: '#86b300',
-		accentDarken: ':darken<10<@accent',
-		accentLighten: ':lighten<10<@accent',
-		accentedBg: ':alpha<0.15<@accent',
-		focus: ':alpha<0.3<@accent',
-		bg: '#000',
-		acrylicBg: ':alpha<0.5<@bg',
-		fg: '#dadada',
-		fgTransparentWeak: ':alpha<0.75<@fg',
-		fgTransparent: ':alpha<0.5<@fg',
-		fgHighlighted: ':lighten<3<@fg',
-		fgOnAccent: '#fff',
-		divider: 'rgba(255, 255, 255, 0.1)',
-		indicator: '@accent',
-		panel: ':lighten<3<@bg',
-		panelHighlight: ':lighten<3<@panel',
-		panelHeaderBg: ':lighten<3<@panel',
-		panelHeaderFg: '@fg',
-		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',
-		navBg: '@panel',
-		navFg: '@fg',
-		navHoverFg: ':lighten<17<@fg',
-		navActive: '@accent',
-		navIndicator: '@indicator',
-		link: '#44a4c1',
-		hashtag: '#ff9156',
-		mention: '@accent',
-		mentionMe: '@mention',
-		renote: '#229e82',
-		modalBg: 'rgba(0, 0, 0, 0.5)',
-		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
-		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
-		dateLabelFg: '@fg',
-		infoBg: '#253142',
-		infoFg: '#fff',
-		infoWarnBg: '#42321c',
-		infoWarnFg: '#ffbd3e',
-		switchBg: 'rgba(255, 255, 255, 0.15)',
-		cwBg: '#687390',
-		cwFg: '#393f4f',
-		cwHoverBg: '#707b97',
-		buttonBg: 'rgba(255, 255, 255, 0.05)',
-		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)',
-		driveFolderBg: ':alpha<0.3<@accent',
-		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
-		badge: '#31b1ce',
-		messageBg: '@bg',
-		success: '#86b300',
-		error: '#ec4137',
-		warn: '#ecb637',
-		codeString: '#ffb675',
-		codeNumber: '#cfff9e',
-		codeBoolean: '#c59eff',
-		deckDivider: '#000',
-		htmlThemeColor: '@bg',
-		X2: ':darken<2<@panel',
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
-	},
-}
diff --git a/packages/client/src/themes/_light.json5 b/packages/client/src/themes/_light.json5
deleted file mode 100644
index bad1291c83..0000000000
--- a/packages/client/src/themes/_light.json5
+++ /dev/null
@@ -1,99 +0,0 @@
-// ライトテーマのベーステーマ
-// このテーマが直接使われることは無い
-{
-	id: 'light',
-
-	name: 'Light',
-	author: 'syuilo',
-	desc: 'Default light theme',
-	kind: 'light',
-
-	props: {
-		accent: '#86b300',
-		accentDarken: ':darken<10<@accent',
-		accentLighten: ':lighten<10<@accent',
-		accentedBg: ':alpha<0.15<@accent',
-		focus: ':alpha<0.3<@accent',
-		bg: '#fff',
-		acrylicBg: ':alpha<0.5<@bg',
-		fg: '#5f5f5f',
-		fgTransparentWeak: ':alpha<0.75<@fg',
-		fgTransparent: ':alpha<0.5<@fg',
-		fgHighlighted: ':darken<3<@fg',
-		fgOnAccent: '#fff',
-		divider: 'rgba(0, 0, 0, 0.1)',
-		indicator: '@accent',
-		panel: ':lighten<3<@bg',
-		panelHighlight: ':darken<3<@panel',
-		panelHeaderBg: ':lighten<3<@panel',
-		panelHeaderFg: '@fg',
-		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',
-		navBg: '@panel',
-		navFg: '@fg',
-		navHoverFg: ':darken<17<@fg',
-		navActive: '@accent',
-		navIndicator: '@indicator',
-		link: '#44a4c1',
-		hashtag: '#ff9156',
-		mention: '@accent',
-		mentionMe: '@mention',
-		renote: '#229e82',
-		modalBg: 'rgba(0, 0, 0, 0.3)',
-		scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
-		scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
-		dateLabelFg: '@fg',
-		infoBg: '#e5f5ff',
-		infoFg: '#72818a',
-		infoWarnBg: '#fff0db',
-		infoWarnFg: '#8f6e31',
-		switchBg: 'rgba(0, 0, 0, 0.15)',
-		cwBg: '#b1b9c1',
-		cwFg: '#fff',
-		cwHoverBg: '#bbc4ce',
-		buttonBg: 'rgba(0, 0, 0, 0.05)',
-		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)',
-		driveFolderBg: ':alpha<0.3<@accent',
-		wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
-		badge: '#31b1ce',
-		messageBg: '@bg',
-		success: '#86b300',
-		error: '#ec4137',
-		warn: '#ecb637',
-		codeString: '#b98710',
-		codeNumber: '#0fbbbb',
-		codeBoolean: '#62b70c',
-		deckDivider: ':darken<3<@bg',
-		htmlThemeColor: '@bg',
-		X2: ':darken<2<@panel',
-		X3: 'rgba(0, 0, 0, 0.05)',
-		X4: 'rgba(0, 0, 0, 0.1)',
-		X5: 'rgba(0, 0, 0, 0.05)',
-		X6: 'rgba(0, 0, 0, 0.25)',
-		X7: 'rgba(0, 0, 0, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.1)',
-		X12: 'rgba(0, 0, 0, 0.1)',
-		X13: 'rgba(0, 0, 0, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
-	},
-}
diff --git a/packages/client/src/themes/d-astro.json5 b/packages/client/src/themes/d-astro.json5
deleted file mode 100644
index c6a927ec3a..0000000000
--- a/packages/client/src/themes/d-astro.json5
+++ /dev/null
@@ -1,78 +0,0 @@
-{
-	id: '080a01c5-377d-4fbb-88cc-6bb5d04977ea',
-	base: 'dark',
-	name: 'Mi Astro Dark',
-	author: 'syuilo',
-	props: {
-		bg: '#232125',
-		fg: '#efdab9',
-		cwBg: '#687390',
-		cwFg: '#393f4f',
-		link: '#78b0a0',
-		warn: '#ecb637',
-		badge: '#31b1ce',
-		error: '#ec4137',
-		focus: ':alpha<0.3<@accent',
-		navBg: '@panel',
-		navFg: '@fg',
-		panel: '#2a272b',
-		accent: '#81c08b',
-		header: ':alpha<0.7<@bg',
-		infoBg: '#253142',
-		infoFg: '#fff',
-		renote: '#659CC8',
-		shadow: 'rgba(0, 0, 0, 0.3)',
-		divider: 'rgba(255, 255, 255, 0.1)',
-		hashtag: '#ff9156',
-		mention: '#ffd152',
-		modalBg: 'rgba(0, 0, 0, 0.5)',
-		success: '#86b300',
-		buttonBg: 'rgba(255, 255, 255, 0.05)',
-		acrylicBg: ':alpha<0.5<@bg',
-		cwHoverBg: '#707b97',
-		indicator: '@accent',
-		mentionMe: '#fb5d38',
-		messageBg: '@bg',
-		navActive: '@accent',
-		infoWarnBg: '#42321c',
-		infoWarnFg: '#ffbd3e',
-		navHoverFg: ':lighten<17<@fg',
-		dateLabelFg: '@fg',
-		inputBorder: 'rgba(255, 255, 255, 0.1)',
-		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
-		panelBorder: '" solid 1px var(--divider)',
-		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
-		navIndicator: '@accent',
-		accentLighten: ':lighten<10<@accent',
-		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
-		buttonGradateA: '@accent',
-		buttonGradateB: ':hue<-20<@accent',
-		driveFolderBg: ':alpha<0.3<@accent',
-		fgHighlighted: ':lighten<3<@fg',
-		panelHeaderBg: ':lighten<3<@panel',
-		panelHeaderFg: '@fg',
-		htmlThemeColor: '@bg',
-		panelHighlight: ':lighten<3<@panel',
-		listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
-		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
-		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
-		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
-		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
-		X2: ':darken<2<@panel',
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-	},
-}
diff --git a/packages/client/src/themes/d-botanical.json5 b/packages/client/src/themes/d-botanical.json5
deleted file mode 100644
index c03b95e2d7..0000000000
--- a/packages/client/src/themes/d-botanical.json5
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-	id: '504debaf-4912-6a4c-5059-1db08a76b737',
-
-	name: 'Mi Botanical Dark',
-	author: 'syuilo',
-
-	base: 'dark',
-
-	props: {
-		accent: 'rgb(148, 179, 0)',
-		bg: 'rgb(37, 38, 36)',
-		fg: 'rgb(216, 212, 199)',
-		fgHighlighted: '#fff',
-		divider: 'rgba(255, 255, 255, 0.14)',
-		panel: 'rgb(47, 47, 44)',
-		panelHeaderBg: '@panel',
-		panelHeaderDivider: '@divider',
-		header: ':alpha<0.7<@panel',
-		navBg: '#363636',
-		renote: '@accent',
-		mention: 'rgb(212, 153, 76)',
-		mentionMe: 'rgb(212, 210, 76)',
-		hashtag: '#5bcbb0',
-		link: '@accent',
-	},
-}
diff --git a/packages/client/src/themes/d-cherry.json5 b/packages/client/src/themes/d-cherry.json5
deleted file mode 100644
index a7e1ad1c80..0000000000
--- a/packages/client/src/themes/d-cherry.json5
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-	id: '679b3b87-a4e9-4789-8696-b56c15cc33b0',
-
-	name: 'Mi Cherry Dark',
-	author: 'syuilo',
-
-	base: 'dark',
-
-	props: {
-		accent: 'rgb(255, 89, 117)',
-		bg: 'rgb(28, 28, 37)',
-		fg: 'rgb(236, 239, 244)',
-		panel: 'rgb(35, 35, 47)',
-		renote: '@accent',
-		link: '@accent',
-		mention: '@accent',
-		hashtag: '@accent',
-		divider: 'rgb(63, 63, 80)',
-	},
-}
diff --git a/packages/client/src/themes/d-dark.json5 b/packages/client/src/themes/d-dark.json5
deleted file mode 100644
index d24ce4df69..0000000000
--- a/packages/client/src/themes/d-dark.json5
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-	id: '8050783a-7f63-445a-b270-36d0f6ba1677',
-
-	name: 'Mi Dark',
-	author: 'syuilo',
-	desc: 'Default light theme',
-
-	base: 'dark',
-
-	props: {
-		bg: '#232323',
-		fg: 'rgb(199, 209, 216)',
-		fgHighlighted: '#fff',
-		divider: 'rgba(255, 255, 255, 0.14)',
-		panel: '#2d2d2d',
-		panelHeaderBg: '@panel',
-		panelHeaderDivider: '@divider',
-		header: ':alpha<0.7<@panel',
-		navBg: '#363636',
-		renote: '@accent',
-		mention: '#da6d35',
-		mentionMe: '#d44c4c',
-		hashtag: '#4cb8d4',
-		link: '@accent',
-	},
-}
diff --git a/packages/client/src/themes/d-future.json5 b/packages/client/src/themes/d-future.json5
deleted file mode 100644
index b6fa1ab0c1..0000000000
--- a/packages/client/src/themes/d-future.json5
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-	id: '32a637ef-b47a-4775-bb7b-bacbb823f865',
-
-	name: 'Mi Future Dark',
-	author: 'syuilo',
-
-	base: 'dark',
-
-	props: {
-		accent: '#63e2b7',
-		bg: '#101014',
-		fg: '#D5D5D6',
-		fgHighlighted: '#fff',
-		fgOnAccent: '#000',
-		divider: 'rgba(255, 255, 255, 0.1)',
-		panel: '#18181c',
-		panelHeaderBg: '@panel',
-		panelHeaderDivider: '@divider',
-		renote: '@accent',
-		mention: '#f2c97d',
-		mentionMe: '@accent',
-		hashtag: '#70c0e8',
-		link: '#e88080',
-		buttonGradateA: '@accent',
-		buttonGradateB: ':saturate<30<:hue<30<@accent',
-	},
-}
diff --git a/packages/client/src/themes/d-green-lime.json5 b/packages/client/src/themes/d-green-lime.json5
deleted file mode 100644
index a6983b9ac2..0000000000
--- a/packages/client/src/themes/d-green-lime.json5
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-	id: '02816013-8107-440f-877e-865083ffe194',
-
-	name: 'Mi Green+Lime Dark',
-	author: 'syuilo',
-
-	base: 'dark',
-
-	props: {
-		accent: '#b4e900',
-		bg: '#0C1210',
-		fg: '#dee7e4',
-		fgHighlighted: '#fff',
-		fgOnAccent: '#192320',
-		divider: '#e7fffb24',
-		panel: '#192320',
-		panelHeaderBg: '@panel',
-		panelHeaderDivider: '@divider',
-		popup: '#293330',
-		renote: '@accent',
-		mentionMe: '#ffaa00',
-		link: '#24d7ce',
-	},
-}
diff --git a/packages/client/src/themes/d-green-orange.json5 b/packages/client/src/themes/d-green-orange.json5
deleted file mode 100644
index 62adc39e29..0000000000
--- a/packages/client/src/themes/d-green-orange.json5
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-	id: 'dc489603-27b5-424a-9b25-1ff6aec9824a',
-
-	name: 'Mi Green+Orange Dark',
-	author: 'syuilo',
-
-	base: 'dark',
-
-	props: {
-		accent: '#e97f00',
-		bg: '#0C1210',
-		fg: '#dee7e4',
-		fgHighlighted: '#fff',
-		fgOnAccent: '#192320',
-		divider: '#e7fffb24',
-		panel: '#192320',
-		panelHeaderBg: '@panel',
-		panelHeaderDivider: '@divider',
-		popup: '#293330',
-		renote: '@accent',
-		mentionMe: '#b4e900',
-		link: '#24d7ce',
-	},
-}
diff --git a/packages/client/src/themes/d-ice.json5 b/packages/client/src/themes/d-ice.json5
deleted file mode 100644
index 179b060dcf..0000000000
--- a/packages/client/src/themes/d-ice.json5
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-	id: '66e7e5a9-cd43-42cd-837d-12f47841fa34',
-
-	name: 'Mi Ice Dark',
-	author: 'syuilo',
-
-	base: 'dark',
-
-	props: {
-		accent: '#47BFE8',
-		bg: '#212526',
-	},
-}
diff --git a/packages/client/src/themes/d-persimmon.json5 b/packages/client/src/themes/d-persimmon.json5
deleted file mode 100644
index e36265ff10..0000000000
--- a/packages/client/src/themes/d-persimmon.json5
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-	id: 'c503d768-7c70-4db2-a4e6-08264304bc8d',
-
-	name: 'Mi Persimmon Dark',
-	author: 'syuilo',
-
-	base: 'dark',
-
-	props: {
-		accent: 'rgb(206, 102, 65)',
-		bg: 'rgb(31, 33, 31)',
-		fg: '#cdd8c7',
-		fgHighlighted: '#fff',
-		divider: 'rgba(255, 255, 255, 0.14)',
-		panel: 'rgb(41, 43, 41)',
-		infoFg: '@fg',
-		infoBg: '#333c3b',
-		navBg: '#141714',
-		renote: '@accent',
-		mention: '@accent',
-		mentionMe: '#de6161',
-		hashtag: '#68bad0',
-		link: '#a1c758',
-	},
-}
diff --git a/packages/client/src/themes/d-u0.json5 b/packages/client/src/themes/d-u0.json5
deleted file mode 100644
index b270f809ac..0000000000
--- a/packages/client/src/themes/d-u0.json5
+++ /dev/null
@@ -1,88 +0,0 @@
-{
-	id: '7a5bc13b-df8f-4d44-8e94-4452f0c634bb',
-	base: 'dark',
-	name: 'Mi U0 Dark',
-	props: {
-		X2: ':darken<2<@panel',
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
-		bg: '#172426',
-		fg: '#dadada',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
-		cwBg: '#687390',
-		cwFg: '#393f4f',
-		link: '@accent',
-		warn: '#ecb637',
-		badge: '#31b1ce',
-		error: '#ec4137',
-		focus: ':alpha<0.3<@accent',
-		navBg: '@panel',
-		navFg: '@fg',
-		panel: ':lighten<3<@bg',
-		popup: ':lighten<3<@panel',
-		accent: '#00a497',
-		header: ':alpha<0.7<@panel',
-		infoBg: '#253142',
-		infoFg: '#fff',
-		renote: '@accent',
-		shadow: 'rgba(0, 0, 0, 0.3)',
-		divider: 'rgba(255, 255, 255, 0.1)',
-		hashtag: '#e6b422',
-		mention: '@accent',
-		modalBg: 'rgba(0, 0, 0, 0.5)',
-		success: '#86b300',
-		buttonBg: 'rgba(255, 255, 255, 0.05)',
-		switchBg: 'rgba(255, 255, 255, 0.15)',
-		acrylicBg: ':alpha<0.5<@bg',
-		cwHoverBg: '#707b97',
-		indicator: '@accent',
-		mentionMe: '@mention',
-		messageBg: '@bg',
-		navActive: '@accent',
-		accentedBg: ':alpha<0.15<@accent',
-		codeNumber: '#cfff9e',
-		codeString: '#ffb675',
-		fgOnAccent: '#fff',
-		infoWarnBg: '#42321c',
-		infoWarnFg: '#ffbd3e',
-		navHoverFg: ':lighten<17<@fg',
-		codeBoolean: '#c59eff',
-		dateLabelFg: '@fg',
-		inputBorder: 'rgba(255, 255, 255, 0.1)',
-		panelBorder: '" solid 1px var(--divider)',
-		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
-		navIndicator: '@indicator',
-		accentLighten: ':lighten<10<@accent',
-		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
-		driveFolderBg: ':alpha<0.3<@accent',
-		fgHighlighted: ':lighten<3<@fg',
-		fgTransparent: ':alpha<0.5<@fg',
-		panelHeaderBg: ':lighten<3<@panel',
-		panelHeaderFg: '@fg',
-		buttonGradateA: '@accent',
-		buttonGradateB: ':hue<20<@accent',
-		htmlThemeColor: '@bg',
-		panelHighlight: ':lighten<3<@panel',
-		listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
-		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
-		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
-		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
-		fgTransparentWeak: ':alpha<0.75<@fg',
-		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
-		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
-		deckDivider: '#142022',
-	},
-}
diff --git a/packages/client/src/themes/l-apricot.json5 b/packages/client/src/themes/l-apricot.json5
deleted file mode 100644
index 1ed5525575..0000000000
--- a/packages/client/src/themes/l-apricot.json5
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-	id: '0ff48d43-aab3-46e7-ab12-8492110d2e2b',
-
-	name: 'Mi Apricot Light',
-	author: 'syuilo',
-
-	base: 'light',
-
-	props: {
-		accent: 'rgb(234, 154, 82)',
-		bg: '#e6e5e2',
-		fg: 'rgb(149, 143, 139)',
-		panel: '#EEECE8',
-		renote: '@accent',
-		link: '@accent',
-		mention: '@accent',
-		hashtag: '@accent',
-		inputBorder: 'rgba(0, 0, 0, 0.1)',
-		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
-		infoBg: 'rgb(226, 235, 241)',
-	},
-}
diff --git a/packages/client/src/themes/l-cherry.json5 b/packages/client/src/themes/l-cherry.json5
deleted file mode 100644
index 5ad240241e..0000000000
--- a/packages/client/src/themes/l-cherry.json5
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-	id: 'ac168876-f737-4074-a3fc-a370c732ef48',
-
-	name: 'Mi Cherry Light',
-	author: 'syuilo',
-
-	base: 'light',
-
-	props: {
-		accent: 'rgb(219, 96, 114)',
-		bg: 'rgb(254, 248, 249)',
-		fg: 'rgb(152, 13, 26)',
-		panel: 'rgb(255, 255, 255)',
-		renote: '@accent',
-		link: 'rgb(156, 187, 5)',
-		mention: '@accent',
-		hashtag: '@accent',
-		divider: 'rgba(134, 51, 51, 0.1)',
-		inputBorderHover: 'rgb(238, 221, 222)',
-	},
-}
diff --git a/packages/client/src/themes/l-coffee.json5 b/packages/client/src/themes/l-coffee.json5
deleted file mode 100644
index fbcd4fa9ef..0000000000
--- a/packages/client/src/themes/l-coffee.json5
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-	id: '6ed80faa-74f0-42c2-98e4-a64d9e138eab',
-
-	name: 'Mi Coffee Light',
-	author: 'syuilo',
-
-	base: 'light',
-
-	props: {
-		accent: '#9f8989',
-		bg: '#f5f3f3',
-		fg: '#7f6666',
-		panel: '#fff',
-		divider: 'rgba(87, 68, 68, 0.1)',
-		renote: 'rgb(160, 172, 125)',
-		link: 'rgb(137, 151, 159)',
-		mention: '@accent',
-		mentionMe: 'rgb(170, 149, 98)',
-		hashtag: '@accent',
-	},
-}
diff --git a/packages/client/src/themes/l-light.json5 b/packages/client/src/themes/l-light.json5
deleted file mode 100644
index 248355c945..0000000000
--- a/packages/client/src/themes/l-light.json5
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-	id: '4eea646f-7afa-4645-83e9-83af0333cd37',
-
-	name: 'Mi Light',
-	author: 'syuilo',
-	desc: 'Default light theme',
-
-	base: 'light',
-
-	props: {
-		bg: '#f9f9f9',
-		fg: '#676767',
-		divider: '#e8e8e8',
-		header: ':alpha<0.7<@panel',
-		navBg: '#fff',
-		panel: '#fff',
-		panelHeaderDivider: '@divider',
-		mentionMe: 'rgb(0, 179, 70)',
-	},
-}
diff --git a/packages/client/src/themes/l-rainy.json5 b/packages/client/src/themes/l-rainy.json5
deleted file mode 100644
index 283dd74c6c..0000000000
--- a/packages/client/src/themes/l-rainy.json5
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-	id: 'a58a0abb-ff8c-476a-8dec-0ad7837e7e96',
-
-	name: 'Mi Rainy Light',
-	author: 'syuilo',
-
-	base: 'light',
-
-	props: {
-		accent: '#5db0da',
-		bg: 'rgb(246 248 249)',
-		fg: '#636b71',
-		panel: '#fff',
-		divider: 'rgb(230 233 234)',
-		panelHeaderDivider: '@divider',
-		renote: '@accent',
-		link: '@accent',
-		mention: '@accent',
-		hashtag: '@accent',
-	},
-}
diff --git a/packages/client/src/themes/l-sushi.json5 b/packages/client/src/themes/l-sushi.json5
deleted file mode 100644
index 5846927d65..0000000000
--- a/packages/client/src/themes/l-sushi.json5
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-	id: '213273e5-7d20-d5f0-6e36-1b6a4f67115c',
-
-	name: 'Mi Sushi Light',
-	author: 'syuilo',
-
-	base: 'light',
-
-	props: {
-		accent: '#e36749',
-		bg: '#f0eee9',
-		fg: '#5f5f5f',
-		renote: '@accent',
-		link: '@accent',
-		mention: '@accent',
-		hashtag: '#229e82',
-	},
-}
diff --git a/packages/client/src/themes/l-u0.json5 b/packages/client/src/themes/l-u0.json5
deleted file mode 100644
index 03b114ba39..0000000000
--- a/packages/client/src/themes/l-u0.json5
+++ /dev/null
@@ -1,87 +0,0 @@
-{
-	id: 'e2c940b5-6e9a-4c03-b738-261c720c426d',
-	base: 'light',
-	name: 'Mi U0 Light',
-	props: {
-		X2: ':darken<2<@panel',
-		X3: 'rgba(255, 255, 255, 0.05)',
-		X4: 'rgba(255, 255, 255, 0.1)',
-		X5: 'rgba(255, 255, 255, 0.05)',
-		X6: 'rgba(255, 255, 255, 0.15)',
-		X7: 'rgba(255, 255, 255, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
-		bg: '#e7e7eb',
-		fg: '#5f5f5f',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.3)',
-		X12: 'rgba(255, 255, 255, 0.1)',
-		X13: 'rgba(255, 255, 255, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
-		cwBg: '#687390',
-		cwFg: '#393f4f',
-		link: '@accent',
-		warn: '#ecb637',
-		badge: '#31b1ce',
-		error: '#ec4137',
-		focus: ':alpha<0.3<@accent',
-		navBg: '@panel',
-		navFg: '@fg',
-		panel: ':lighten<3<@bg',
-		popup: ':lighten<3<@panel',
-		accent: '#478384',
-		header: ':alpha<0.7<@panel',
-		infoBg: '#253142',
-		infoFg: '#fff',
-		renote: '@accent',
-		shadow: 'rgba(0, 0, 0, 0.3)',
-		divider: '#4646461a',
-		hashtag: '#1f3134',
-		mention: '@accent',
-		modalBg: 'rgba(0, 0, 0, 0.5)',
-		success: '#86b300',
-		buttonBg: '#0000000d',
-		switchBg: 'rgba(255, 255, 255, 0.15)',
-		acrylicBg: ':alpha<0.5<@bg',
-		cwHoverBg: '#707b97',
-		indicator: '@accent',
-		mentionMe: '@mention',
-		messageBg: '@bg',
-		navActive: '@accent',
-		accentedBg: ':alpha<0.15<@accent',
-		codeNumber: '#cfff9e',
-		codeString: '#ffb675',
-		fgOnAccent: '#fff',
-		infoWarnBg: '#42321c',
-		infoWarnFg: '#ffbd3e',
-		navHoverFg: ':lighten<17<@fg',
-		codeBoolean: '#c59eff',
-		dateLabelFg: '@fg',
-		inputBorder: 'rgba(255, 255, 255, 0.1)',
-		panelBorder: '" solid 1px var(--divider)',
-		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
-		navIndicator: '@indicator',
-		accentLighten: ':lighten<10<@accent',
-		buttonHoverBg: '#0000001a',
-		driveFolderBg: ':alpha<0.3<@accent',
-		fgHighlighted: ':lighten<3<@fg',
-		fgTransparent: ':alpha<0.5<@fg',
-		panelHeaderBg: ':lighten<3<@panel',
-		panelHeaderFg: '@fg',
-		buttonGradateA: '@accent',
-		buttonGradateB: ':hue<20<@accent',
-		htmlThemeColor: '@bg',
-		panelHighlight: ':lighten<3<@panel',
-		listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
-		scrollbarHandle: '#74747433',
-		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
-		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
-		fgTransparentWeak: ':alpha<0.75<@fg',
-		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
-		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
-	},
-}
diff --git a/packages/client/src/themes/l-vivid.json5 b/packages/client/src/themes/l-vivid.json5
deleted file mode 100644
index b3c08f38ae..0000000000
--- a/packages/client/src/themes/l-vivid.json5
+++ /dev/null
@@ -1,82 +0,0 @@
-{
-	id: '6128c2a9-5c54-43fe-a47d-17942356470b',
-
-	name: 'Mi Vivid Light',
-	author: 'syuilo',
-
-	base: 'light',
-
-	props: {
-		bg: '#fafafa',
-		fg: '#444',
-		cwBg: '#b1b9c1',
-		cwFg: '#fff',
-		link: '#ff9400',
-		warn: '#ecb637',
-		badge: '#31b1ce',
-		error: '#ec4137',
-		focus: ':alpha<0.3<@accent',
-		navBg: '@panel',
-		navFg: '@fg',
-		panel: '#fff',
-		accent: '#008cff',
-		header: ':alpha<0.7<@panel',
-		infoBg: '#e5f5ff',
-		infoFg: '#72818a',
-		renote: '@accent',
-		shadow: 'rgba(0, 0, 0, 0.1)',
-		divider: 'rgba(0, 0, 0, 0.08)',
-		hashtag: '#92d400',
-		mention: '@accent',
-		modalBg: 'rgba(0, 0, 0, 0.3)',
-		success: '#86b300',
-		buttonBg: 'rgba(0, 0, 0, 0.05)',
-		acrylicBg: ':alpha<0.5<@bg',
-		cwHoverBg: '#bbc4ce',
-		indicator: '@accent',
-		mentionMe: '@mention',
-		messageBg: '@bg',
-		navActive: '@accent',
-		infoWarnBg: '#fff0db',
-		infoWarnFg: '#8f6e31',
-		navHoverFg: ':darken<17<@fg',
-		dateLabelFg: '@fg',
-		inputBorder: 'rgba(0, 0, 0, 0.1)',
-		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
-		panelBorder: '" solid 1px var(--divider)',
-		accentDarken: ':darken<10<@accent',
-		acrylicPanel: ':alpha<0.5<@panel',
-		navIndicator: '@accent',
-		accentLighten: ':lighten<10<@accent',
-		buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
-		driveFolderBg: ':alpha<0.3<@accent',
-		fgHighlighted: ':darken<3<@fg',
-		fgTransparent: ':alpha<0.5<@fg',
-		panelHeaderBg: ':lighten<3<@panel',
-		panelHeaderFg: '@fg',
-		htmlThemeColor: '@bg',
-		panelHighlight: ':darken<3<@panel',
-		listItemHoverBg: 'rgba(0, 0, 0, 0.03)',
-		scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
-		wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
-		fgTransparentWeak: ':alpha<0.75<@fg',
-		panelHeaderDivider: '@divider',
-		scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
-		X2: ':darken<2<@panel',
-		X3: 'rgba(0, 0, 0, 0.05)',
-		X4: 'rgba(0, 0, 0, 0.1)',
-		X5: 'rgba(0, 0, 0, 0.05)',
-		X6: 'rgba(0, 0, 0, 0.25)',
-		X7: 'rgba(0, 0, 0, 0.05)',
-		X8: ':lighten<5<@accent',
-		X9: ':darken<5<@accent',
-		X10: ':alpha<0.4<@accent',
-		X11: 'rgba(0, 0, 0, 0.1)',
-		X12: 'rgba(0, 0, 0, 0.1)',
-		X13: 'rgba(0, 0, 0, 0.15)',
-		X14: ':alpha<0.5<@navBg',
-		X15: ':alpha<0<@panel',
-		X16: ':alpha<0.7<@panel',
-		X17: ':alpha<0.8<@bg',
-	},
-}
diff --git a/packages/client/src/types/menu.ts b/packages/client/src/types/menu.ts
deleted file mode 100644
index 972f6db214..0000000000
--- a/packages/client/src/types/menu.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as Misskey from 'misskey-js';
-import { Ref } from 'vue';
-
-export type MenuAction = (ev: MouseEvent) => void;
-
-export type MenuDivider = null;
-export type MenuNull = undefined;
-export type MenuLabel = { type: 'label', text: string };
-export type MenuLink = { type: 'link', to: string, text: string, icon?: string, indicate?: boolean, avatar?: Misskey.entities.User };
-export type MenuA = { type: 'a', href: string, target?: string, download?: string, text: string, icon?: string, indicate?: boolean };
-export type MenuUser = { type: 'user', user: Misskey.entities.User, active?: boolean, indicate?: boolean, action: MenuAction };
-export type MenuSwitch = { type: 'switch', ref: Ref<boolean>, text: string, disabled?: boolean };
-export type MenuButton = { type?: 'button', text: string, icon?: string, indicate?: boolean, danger?: boolean, active?: boolean, avatar?: Misskey.entities.User; action: MenuAction };
-export type MenuParent = { type: 'parent', text: string, icon?: string, children: OuterMenuItem[] };
-
-export type MenuPending = { type: 'pending' };
-
-type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent;
-type OuterPromiseMenuItem = Promise<MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent>;
-export type MenuItem = OuterMenuItem | OuterPromiseMenuItem;
-export type InnerMenuItem = MenuDivider | MenuPending | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent;
diff --git a/packages/client/src/ui/_common_/common.vue b/packages/client/src/ui/_common_/common.vue
deleted file mode 100644
index 7f3fc0e4af..0000000000
--- a/packages/client/src/ui/_common_/common.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<template>
-<component
-	:is="popup.component"
-	v-for="popup in popups"
-	:key="popup.id"
-	v-bind="popup.props"
-	v-on="popup.events"
-/>
-
-<XUpload v-if="uploads.length > 0"/>
-
-<XStreamIndicator/>
-
-<div v-if="pendingApiRequestsCount > 0" id="wait"></div>
-
-<div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
-
-<div v-if="$i && $i.isBot" id="botWarn"><span>{{ i18n.ts.loggedInAsBot }}</span></div>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { swInject } from './sw-inject';
-import { popup, popups, pendingApiRequestsCount } from '@/os';
-import { uploads } from '@/scripts/upload';
-import * as sound from '@/scripts/sound';
-import { $i } from '@/account';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
-
-const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
-const XUpload = defineAsyncComponent(() => import('./upload.vue'));
-
-const dev = _DEV_;
-
-const onNotification = notification => {
-	if ($i.mutingNotificationTypes.includes(notification.type)) return;
-
-	if (document.visibilityState === 'visible') {
-		stream.send('readNotification', {
-			id: notification.id,
-		});
-
-		popup(defineAsyncComponent(() => import('@/components/MkNotificationToast.vue')), {
-			notification,
-		}, {}, 'closed');
-	}
-
-	sound.play('notification');
-};
-
-if ($i) {
-	const connection = stream.useChannel('main', null, 'UI');
-	connection.on('notification', onNotification);
-
-	//#region Listen message from SW
-	if ('serviceWorker' in navigator) {
-		swInject();
-	}
-}
-</script>
-
-<style lang="scss">
-@keyframes dev-ticker-blink {
-	0% { opacity: 1; }
-	50% { opacity: 0; }
-	100% { opacity: 1; }
-}
-
-@keyframes progress-spinner {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}
-
-#wait {
-	display: block;
-	position: fixed;
-	z-index: 4000000;
-	top: 15px;
-	right: 15px;
-
-	&:before {
-		content: "";
-		display: block;
-		width: 18px;
-		height: 18px;
-		box-sizing: border-box;
-		border: solid 2px transparent;
-		border-top-color: var(--accent);
-		border-left-color: var(--accent);
-		border-radius: 50%;
-		animation: progress-spinner 400ms linear infinite;
-	}
-}
-
-#botWarn {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	margin: auto;
-	width: 100%;
-	height: max-content;
-	text-align: center;
-	z-index: 2147483647;
-	color: #ff0;
-	background: rgba(0, 0, 0, 0.5);
-	padding: 4px 7px;
-	font-size: 14px;
-	pointer-events: none;
-	user-select: none;
-
-	> span {
-		animation: dev-ticker-blink 2s infinite;
-	}
-}
-
-#devTicker {
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 2147483647;
-	color: #ff0;
-	background: rgba(0, 0, 0, 0.5);
-	padding: 4px 5px;
-	font-size: 14px;
-	pointer-events: none;
-	user-select: none;
-
-	> span {
-		animation: dev-ticker-blink 2s infinite;
-	}
-}
-</style>
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
deleted file mode 100644
index 50b28de063..0000000000
--- a/packages/client/src/ui/_common_/navbar-for-mobile.vue
+++ /dev/null
@@ -1,314 +0,0 @@
-<template>
-<div class="kmwsukvl">
-	<div class="body">
-		<div class="top">
-			<div class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"></div>
-			<button v-click-anime class="item _button instance" @click="openInstanceMenu">
-				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
-			</button>
-		</div>
-		<div class="middle">
-			<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-				<i class="icon ti ti-home ti-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
-			</MkA>
-			<template v-for="item in menu">
-				<div v-if="item === '-'" class="divider"></div>
-				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-					<i class="icon ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
-					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
-				</component>
-			</template>
-			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
-				<i class="icon ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
-			</MkA>
-			<button v-click-anime class="item _button" @click="more">
-				<i class="icon ti ti-grid-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
-				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
-			</button>
-			<MkA v-click-anime class="item" active-class="active" to="/settings">
-				<i class="icon ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
-			</MkA>
-		</div>
-		<div class="bottom">
-			<button class="item _button post" data-cy-open-post-form @click="os.post">
-				<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span>
-			</button>
-			<button v-click-anime class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
-			</button>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } from 'vue';
-import { host } from '@/config';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { openAccountMenu as openAccountMenu_ } from '@/account';
-import { defaultStore } from '@/store';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
-
-const menu = toRef(defaultStore.state, 'menu');
-const otherMenuItemIndicated = computed(() => {
-	for (const def in navbarItemDef) {
-		if (menu.value.includes(def)) continue;
-		if (navbarItemDef[def].indicated) return true;
-	}
-	return false;
-});
-
-function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_({
-		withExtraOperation: true,
-	}, ev);
-}
-
-function openInstanceMenu(ev: MouseEvent) {
-	os.popupMenu([{
-		text: instance.name ?? host,
-		type: 'label',
-	}, {
-		type: 'link',
-		text: i18n.ts.instanceInfo,
-		icon: 'ti ti-info-circle',
-		to: '/about',
-	}, {
-		type: 'link',
-		text: i18n.ts.customEmojis,
-		icon: 'ti ti-mood-happy',
-		to: '/about#emojis',
-	}, {
-		type: 'link',
-		text: i18n.ts.federation,
-		icon: 'ti ti-whirl',
-		to: '/about#federation',
-	}, null, {
-		type: 'parent',
-		text: i18n.ts.help,
-		icon: 'ti ti-question-circle',
-		children: [{
-			type: 'link',
-			to: '/mfm-cheat-sheet',
-			text: i18n.ts._mfm.cheatSheet,
-			icon: 'ti ti-code',
-		}, {
-			type: 'link',
-			to: '/scratchpad',
-			text: i18n.ts.scratchpad,
-			icon: 'ti ti-terminal-2',
-		}, {
-			type: 'link',
-			to: '/api-console',
-			text: 'API Console',
-			icon: 'ti ti-terminal-2',
-		}, null, {
-			text: i18n.ts.document,
-			icon: 'ti ti-question-circle',
-			action: () => {
-				window.open('https://misskey-hub.net/help.html', '_blank');
-			},
-		}],
-	}, {
-		type: 'link',
-		text: i18n.ts.aboutMisskey,
-		to: '/about-misskey',
-	}], ev.currentTarget ?? ev.target, {
-		align: 'left',
-	});
-}
-
-function more() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {
-	}, 'closed');
-}
-</script>
-
-<style lang="scss" scoped>
-.kmwsukvl {
-	> .body {
-		display: flex;
-		flex-direction: column;
-
-		> .top {
-			position: sticky;
-			top: 0;
-			z-index: 1;
-			padding: 20px 0;
-			background: var(--X14);
-			-webkit-backdrop-filter: var(--blur, blur(8px));
-			backdrop-filter: var(--blur, blur(8px));
-
-			> .banner {
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				background-size: cover;
-				background-position: center center;
-				-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-				mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-			}
-
-			> .instance {
-				position: relative;
-				display: block;
-				text-align: center;
-				width: 100%;
-
-				> .icon {
-					display: inline-block;
-					width: 38px;
-					aspect-ratio: 1;
-				}
-			}
-		}
-
-		> .bottom {
-			position: sticky;
-			bottom: 0;
-			padding: 20px 0;
-			background: var(--X14);
-			-webkit-backdrop-filter: var(--blur, blur(8px));
-			backdrop-filter: var(--blur, blur(8px));
-
-			> .post {
-				position: relative;
-				display: block;
-				width: 100%;
-				height: 40px;
-				color: var(--fgOnAccent);
-				font-weight: bold;
-				text-align: left;
-
-				&:before {
-					content: "";
-					display: block;
-					width: calc(100% - 38px);
-					height: 100%;
-					margin: auto;
-					position: absolute;
-					top: 0;
-					left: 0;
-					right: 0;
-					bottom: 0;
-					border-radius: 999px;
-					background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-				}
-
-				&:hover, &.active {
-					&:before {
-						background: var(--accentLighten);
-					}
-				}
-
-				> .icon {
-					position: relative;
-					margin-left: 30px;
-					margin-right: 8px;
-					width: 32px;
-				}
-
-				> .text {
-					position: relative;
-				}
-			}
-
-			> .account {
-				position: relative;
-				display: flex;
-				align-items: center;
-				padding-left: 30px;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-				width: 100%;
-				text-align: left;
-				box-sizing: border-box;
-				margin-top: 16px;
-
-				> .avatar {
-					position: relative;
-					width: 32px;
-					aspect-ratio: 1;
-					margin-right: 8px;
-				}
-			}
-		}
-
-		> .middle {
-			flex: 1;
-
-			> .divider {
-				margin: 16px 16px;
-				border-top: solid 0.5px var(--divider);
-			}
-
-			> .item {
-				position: relative;
-				display: block;
-				padding-left: 24px;
-				line-height: 2.85rem;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-				width: 100%;
-				text-align: left;
-				box-sizing: border-box;
-				color: var(--navFg);
-
-				> .icon {
-					position: relative;
-					width: 32px;
-					margin-right: 8px;
-				}
-
-				> .indicator {
-					position: absolute;
-					top: 0;
-					left: 20px;
-					color: var(--navIndicator);
-					font-size: 8px;
-					animation: blink 1s infinite;
-				}
-
-				> .text {
-					position: relative;
-					font-size: 0.9em;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-
-				&:hover, &.active {
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 24px);
-						height: 100%;
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 999px;
-						background: var(--accentedBg);
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
deleted file mode 100644
index b82da15f13..0000000000
--- a/packages/client/src/ui/_common_/navbar.vue
+++ /dev/null
@@ -1,521 +0,0 @@
-<template>
-<div class="mvcprjjd" :class="{ iconOnly }">
-	<div class="body">
-		<div class="top">
-			<div class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"></div>
-			<button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
-				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
-			</button>
-		</div>
-		<div class="middle">
-			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
-				<i class="icon ti ti-home ti-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
-			</MkA>
-			<template v-for="item in menu">
-				<div v-if="item === '-'" class="divider"></div>
-				<component
-					:is="navbarItemDef[item].to ? 'MkA' : 'button'"
-					v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)"
-					v-click-anime
-					v-tooltip.noDelay.right="i18n.ts[navbarItemDef[item].title]"
-					class="item _button"
-					:class="[item, { active: navbarItemDef[item].active }]"
-					active-class="active"
-					:to="navbarItemDef[item].to"
-					v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
-				>
-					<i class="icon ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
-					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
-				</component>
-			</template>
-			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip.noDelay.right="i18n.ts.controlPanel" class="item" active-class="active" to="/admin">
-				<i class="icon ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
-			</MkA>
-			<button v-click-anime class="item _button" @click="more">
-				<i class="icon ti ti-grid-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
-				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
-			</button>
-			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item" active-class="active" to="/settings">
-				<i class="icon ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
-			</MkA>
-		</div>
-		<div class="bottom">
-			<button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post">
-				<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span>
-			</button>
-			<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
-			</button>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, watch } from 'vue';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-import { instance } from '@/instance';
-import { host } from '@/config';
-
-const iconOnly = ref(false);
-
-const menu = computed(() => defaultStore.state.menu);
-const otherMenuItemIndicated = computed(() => {
-	for (const def in navbarItemDef) {
-		if (menu.value.includes(def)) continue;
-		if (navbarItemDef[def].indicated) return true;
-	}
-	return false;
-});
-
-const calcViewState = () => {
-	iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
-};
-
-calcViewState();
-
-window.addEventListener('resize', calcViewState);
-
-watch(defaultStore.reactiveState.menuDisplay, () => {
-	calcViewState();
-});
-
-function openAccountMenu(ev: MouseEvent) {
-	openAccountMenu_({
-		withExtraOperation: true,
-	}, ev);
-}
-
-function openInstanceMenu(ev: MouseEvent) {
-	os.popupMenu([{
-		text: instance.name ?? host,
-		type: 'label',
-	}, {
-		type: 'link',
-		text: i18n.ts.instanceInfo,
-		icon: 'ti ti-info-circle',
-		to: '/about',
-	}, {
-		type: 'link',
-		text: i18n.ts.customEmojis,
-		icon: 'ti ti-mood-happy',
-		to: '/about#emojis',
-	}, {
-		type: 'link',
-		text: i18n.ts.federation,
-		icon: 'ti ti-whirl',
-		to: '/about#federation',
-	}, null, {
-		type: 'parent',
-		text: i18n.ts.help,
-		icon: 'ti ti-question-circle',
-		children: [{
-			type: 'link',
-			to: '/mfm-cheat-sheet',
-			text: i18n.ts._mfm.cheatSheet,
-			icon: 'ti ti-code',
-		}, {
-			type: 'link',
-			to: '/scratchpad',
-			text: i18n.ts.scratchpad,
-			icon: 'ti ti-terminal-2',
-		}, {
-			type: 'link',
-			to: '/api-console',
-			text: 'API Console',
-			icon: 'ti ti-terminal-2',
-		}, null, {
-			text: i18n.ts.document,
-			icon: 'ti ti-question-circle',
-			action: () => {
-				window.open('https://misskey-hub.net/help.html', '_blank');
-			},
-		}],
-	}, {
-		type: 'link',
-		text: i18n.ts.aboutMisskey,
-		to: '/about-misskey',
-	}], ev.currentTarget ?? ev.target, {
-		align: 'left',
-	});
-}
-
-function more(ev: MouseEvent) {
-	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
-		src: ev.currentTarget ?? ev.target,
-	}, {
-	}, 'closed');
-}
-</script>
-
-<style lang="scss" scoped>
-.mvcprjjd {
-	$nav-width: 250px;
-	$nav-icon-only-width: 80px;
-
-	flex: 0 0 $nav-width;
-	width: $nav-width;
-	box-sizing: border-box;
-
-	> .body {
-		position: fixed;
-		top: 0;
-		left: 0;
-		z-index: 1001;
-		width: $nav-icon-only-width;
-		height: 100dvh;
-		box-sizing: border-box;
-		overflow: auto;
-		overflow-x: clip;
-		background: var(--navBg);
-		contain: strict;
-		display: flex;
-		flex-direction: column;
-	}
-
-	&:not(.iconOnly) {
-		> .body {
-			width: $nav-width;
-
-			> .top {
-				position: sticky;
-				top: 0;
-				z-index: 1;
-				padding: 20px 0;
-				background: var(--X14);
-				-webkit-backdrop-filter: var(--blur, blur(8px));
-				backdrop-filter: var(--blur, blur(8px));
-
-				> .banner {
-					position: absolute;
-					top: 0;
-					left: 0;
-					width: 100%;
-					height: 100%;
-					background-size: cover;
-					background-position: center center;
-					-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-					mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
-				}
-
-				> .instance {
-					position: relative;
-					display: block;
-					text-align: center;
-					width: 100%;
-
-					> .icon {
-						display: inline-block;
-						width: 38px;
-						aspect-ratio: 1;
-					}
-				}
-			}
-
-			> .bottom {
-				position: sticky;
-				bottom: 0;
-				padding: 20px 0;
-				background: var(--X14);
-				-webkit-backdrop-filter: var(--blur, blur(8px));
-				backdrop-filter: var(--blur, blur(8px));
-
-				> .post {
-					position: relative;
-					display: block;
-					width: 100%;
-					height: 40px;
-					color: var(--fgOnAccent);
-					font-weight: bold;
-					text-align: left;
-
-					&:before {
-						content: "";
-						display: block;
-						width: calc(100% - 38px);
-						height: 100%;
-						margin: auto;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						border-radius: 999px;
-						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-					}
-
-					&:hover, &.active {
-						&:before {
-							background: var(--accentLighten);
-						}
-					}
-
-					> .icon {
-						position: relative;
-						margin-left: 30px;
-						margin-right: 8px;
-						width: 32px;
-					}
-
-					> .text {
-						position: relative;
-					}
-				}
-
-				> .account {
-					position: relative;
-					display: flex;
-					align-items: center;
-					padding-left: 30px;
-					text-overflow: ellipsis;
-					overflow: hidden;
-					white-space: nowrap;
-					width: 100%;
-					text-align: left;
-					box-sizing: border-box;
-					margin-top: 16px;
-
-					> .avatar {
-						position: relative;
-						width: 32px;
-						aspect-ratio: 1;
-						margin-right: 8px;
-					}
-				}
-			}
-
-			> .middle {
-				flex: 1;
-
-				> .divider {
-					margin: 16px 16px;
-					border-top: solid 0.5px var(--divider);
-				}
-
-				> .item {
-					position: relative;
-					display: block;
-					padding-left: 30px;
-					line-height: 2.85rem;
-					text-overflow: ellipsis;
-					overflow: hidden;
-					white-space: nowrap;
-					width: 100%;
-					text-align: left;
-					box-sizing: border-box;
-					color: var(--navFg);
-
-					> .icon {
-						position: relative;
-						width: 32px;
-						margin-right: 8px;
-					}
-
-					> .indicator {
-						position: absolute;
-						top: 0;
-						left: 20px;
-						color: var(--navIndicator);
-						font-size: 8px;
-						animation: blink 1s infinite;
-					}
-
-					> .text {
-						position: relative;
-						font-size: 0.9em;
-					}
-
-					&:hover {
-						text-decoration: none;
-						color: var(--navHoverFg);
-					}
-
-					&.active {
-						color: var(--navActive);
-					}
-
-					&:hover, &.active {
-						color: var(--accent);
-
-						&:before {
-							content: "";
-							display: block;
-							width: calc(100% - 34px);
-							height: 100%;
-							margin: auto;
-							position: absolute;
-							top: 0;
-							left: 0;
-							right: 0;
-							bottom: 0;
-							border-radius: 999px;
-							background: var(--accentedBg);
-						}
-					}
-				}
-			}
-		}
-	}
-
-	&.iconOnly {
-		flex: 0 0 $nav-icon-only-width;
-		width: $nav-icon-only-width;
-
-		> .body {
-			width: $nav-icon-only-width;
-
-			> .top {
-				position: sticky;
-				top: 0;
-				z-index: 1;
-				padding: 20px 0;
-				background: var(--X14);
-				-webkit-backdrop-filter: var(--blur, blur(8px));
-				backdrop-filter: var(--blur, blur(8px));
-
-				> .instance {
-					display: block;
-					text-align: center;
-					width: 100%;
-
-					> .icon {
-						display: inline-block;
-						width: 30px;
-						aspect-ratio: 1;
-					}
-				}
-			}
-
-			> .bottom {
-				position: sticky;
-				bottom: 0;
-				padding: 20px 0;
-				background: var(--X14);
-				-webkit-backdrop-filter: var(--blur, blur(8px));
-				backdrop-filter: var(--blur, blur(8px));
-
-				> .post {
-					display: block;
-					position: relative;
-					width: 100%;
-					height: 52px;
-					margin-bottom: 16px;
-					text-align: center;
-
-					&:before {
-						content: "";
-						display: block;
-						position: absolute;
-						top: 0;
-						left: 0;
-						right: 0;
-						bottom: 0;
-						margin: auto;
-						width: 52px;
-						aspect-ratio: 1/1;
-						border-radius: 100%;
-						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-					}
-
-					&:hover, &.active {
-						&:before {
-							background: var(--accentLighten);
-						}
-					}
-
-					> .icon {
-						position: relative;
-						color: var(--fgOnAccent);
-					}
-
-					> .text {
-						display: none;
-					}
-				}
-
-				> .account {
-					display: block;
-					text-align: center;
-					width: 100%;
-
-					> .avatar {
-						display: inline-block;
-						width: 38px;
-						aspect-ratio: 1;
-					}
-
-					> .text {
-						display: none;
-					}
-				}
-			}
-
-			> .middle {
-				flex: 1;
-
-				> .divider {
-					margin: 8px auto;
-					width: calc(100% - 32px);
-					border-top: solid 0.5px var(--divider);
-				}
-
-				> .item {
-					display: block;
-					position: relative;
-					padding: 18px 0;
-					width: 100%;
-					text-align: center;
-
-					> .icon {
-						display: block;
-						margin: 0 auto;
-						opacity: 0.7;
-					}
-
-					> .text {
-						display: none;
-					}
-
-					> .indicator {
-						position: absolute;
-						top: 6px;
-						left: 24px;
-						color: var(--navIndicator);
-						font-size: 8px;
-						animation: blink 1s infinite;
-					}
-
-					&:hover, &.active {
-						text-decoration: none;
-						color: var(--accent);
-
-						&:before {
-							content: "";
-							display: block;
-							height: 100%;
-							aspect-ratio: 1;
-							margin: auto;
-							position: absolute;
-							top: 0;
-							left: 0;
-							right: 0;
-							bottom: 0;
-							border-radius: 999px;
-							background: var(--accentedBg);
-						}
-
-						> .icon, > .text {
-							opacity: 1;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/_common_/statusbar-federation.vue b/packages/client/src/ui/_common_/statusbar-federation.vue
deleted file mode 100644
index 24fc4f6f6d..0000000000
--- a/packages/client/src/ui/_common_/statusbar-federation.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<template>
-<span v-if="!fetching" class="nmidsaqw">
-	<template v-if="display === 'marquee'">
-		<transition name="change" mode="default">
-			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
-				<span v-for="instance in instances" :key="instance.id" class="item" :class="{ colored }" :style="{ background: colored ? instance.themeColor : null }">
-					<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
-					<MkA :to="`/instance-info/${instance.host}`" class="host _monospace">
-						{{ instance.host }}
-					</MkA>
-					<span class="divider"></span>
-				</span>
-			</MarqueeText>
-		</transition>
-	</template>
-	<template v-else-if="display === 'oneByOne'">
-		<!-- TODO -->
-	</template>
-</span>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
-import * as misskey from 'misskey-js';
-import MarqueeText from '@/components/MkMarquee.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { getNoteSummary } from '@/scripts/get-note-summary';
-import { notePage } from '@/filters/note';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
-
-const props = defineProps<{
-	display?: 'marquee' | 'oneByOne';
-	colored?: boolean;
-	marqueeDuration?: number;
-	marqueeReverse?: boolean;
-	oneByOneInterval?: number;
-	refreshIntervalSec?: number;
-}>();
-
-const instances = ref<misskey.entities.Instance[]>([]);
-const fetching = ref(true);
-let key = $ref(0);
-
-const tick = () => {
-	os.api('federation/instances', {
-		sort: '+lastCommunicatedAt',
-		limit: 30,
-	}).then(res => {
-		instances.value = res;
-		fetching.value = false;
-		key++;
-	});
-};
-
-useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
-	immediate: true,
-	afterMounted: true,
-});
-
-function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
-}
-</script>
-
-<style lang="scss" scoped>
-.change-enter-active, .change-leave-active {
-	position: absolute;
-	top: 0;
-  transition: all 1s ease;
-}
-.change-enter-from {
-  opacity: 0;
-	transform: translateY(-100%);
-}
-.change-leave-to {
-  opacity: 0;
-	transform: translateY(100%);
-}
-
-.nmidsaqw {
-	display: inline-block;
-	position: relative;
-
-	::v-deep(.item) {
-		display: inline-block;
-		vertical-align: bottom;
-		margin-right: 5em;
-
-		> .icon {
-			display: inline-block;
-			height: var(--height);
-			aspect-ratio: 1;
-			vertical-align: bottom;
-			margin-right: 1em;
-		}
-
-		> .host {
-			vertical-align: bottom;
-		}
-
-		&.colored {
-			padding-right: 1em;
-			color: #fff;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/_common_/statusbar-rss.vue b/packages/client/src/ui/_common_/statusbar-rss.vue
deleted file mode 100644
index e7f88e4984..0000000000
--- a/packages/client/src/ui/_common_/statusbar-rss.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
-<span v-if="!fetching" class="xbhtxfms">
-	<template v-if="display === 'marquee'">
-		<transition name="change" mode="default">
-			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
-				<span v-for="item in items" class="item">
-					<a class="link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span class="divider"></span>
-				</span>
-			</MarqueeText>
-		</transition>
-	</template>
-	<template v-else-if="display === 'oneByOne'">
-		<!-- TODO -->
-	</template>
-</span>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
-import MarqueeText from '@/components/MkMarquee.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { shuffle } from '@/scripts/shuffle';
-
-const props = defineProps<{
-	url?: string;
-	shuffle?: boolean;
-	display?: 'marquee' | 'oneByOne';
-	marqueeDuration?: number;
-	marqueeReverse?: boolean;
-	oneByOneInterval?: number;
-	refreshIntervalSec?: number;
-}>();
-
-const items = ref([]);
-const fetching = ref(true);
-let key = $ref(0);
-
-const tick = () => {
-	window.fetch(`/api/fetch-rss?url=${props.url}`, {}).then(res => {
-		res.json().then(feed => {
-			if (props.shuffle) {
-				shuffle(feed.items);
-			}
-			items.value = feed.items;
-			fetching.value = false;
-			key++;
-		});
-	});
-};
-
-useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
-	immediate: true,
-	afterMounted: true,
-});
-</script>
-
-<style lang="scss" scoped>
-.change-enter-active, .change-leave-active {
-	position: absolute;
-	top: 0;
-  transition: all 1s ease;
-}
-.change-enter-from {
-  opacity: 0;
-	transform: translateY(-100%);
-}
-.change-leave-to {
-  opacity: 0;
-	transform: translateY(100%);
-}
-
-.xbhtxfms {
-	display: inline-block;
-	position: relative;
-
-	::v-deep(.item) {
-		display: inline-flex;
-		align-items: center;
-		vertical-align: bottom;
-		margin: 0;
-
-		> .divider {
-			display: inline-block;
-			width: 0.5px;
-			height: var(--height);
-			margin: 0 3em;
-			background: currentColor;
-			opacity: 0.3;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/_common_/statusbar-user-list.vue b/packages/client/src/ui/_common_/statusbar-user-list.vue
deleted file mode 100644
index f4d989c387..0000000000
--- a/packages/client/src/ui/_common_/statusbar-user-list.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-<span v-if="!fetching" class="osdsvwzy">
-	<template v-if="display === 'marquee'">
-		<transition name="change" mode="default">
-			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
-				<span v-for="note in notes" :key="note.id" class="item">
-					<img class="avatar" :src="note.user.avatarUrl" decoding="async"/>
-					<MkA class="text" :to="notePage(note)">
-						<Mfm class="text" :text="getNoteSummary(note)" :plain="true" :nowrap="true" :custom-emojis="note.emojis"/>
-					</MkA>
-					<span class="divider"></span>
-				</span>
-			</MarqueeText>
-		</transition>
-	</template>
-	<template v-else-if="display === 'oneByOne'">
-		<!-- TODO -->
-	</template>
-</span>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
-import * as misskey from 'misskey-js';
-import MarqueeText from '@/components/MkMarquee.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { getNoteSummary } from '@/scripts/get-note-summary';
-import { notePage } from '@/filters/note';
-
-const props = defineProps<{
-	userListId?: string;
-	display?: 'marquee' | 'oneByOne';
-	marqueeDuration?: number;
-	marqueeReverse?: boolean;
-	oneByOneInterval?: number;
-	refreshIntervalSec?: number;
-}>();
-
-const notes = ref<misskey.entities.Note[]>([]);
-const fetching = ref(true);
-let key = $ref(0);
-
-const tick = () => {
-	if (props.userListId == null) return;
-	os.api('notes/user-list-timeline', {
-		listId: props.userListId,
-	}).then(res => {
-		notes.value = res;
-		fetching.value = false;
-		key++;
-	});
-};
-
-watch(() => props.userListId, tick);
-
-useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
-	immediate: true,
-	afterMounted: true,
-});
-</script>
-
-<style lang="scss" scoped>
-.change-enter-active, .change-leave-active {
-	position: absolute;
-	top: 0;
-  transition: all 1s ease;
-}
-.change-enter-from {
-  opacity: 0;
-	transform: translateY(-100%);
-}
-.change-leave-to {
-  opacity: 0;
-	transform: translateY(100%);
-}
-
-.osdsvwzy {
-	display: inline-block;
-	position: relative;
-
-	::v-deep(.item) {
-		display: inline-flex;
-		align-items: center;
-		vertical-align: bottom;
-		margin: 0;
-
-		> .avatar {
-			display: inline-block;
-			height: var(--height);
-			aspect-ratio: 1;
-			vertical-align: bottom;
-			margin-right: 8px;
-		}
-
-		> .text {
-			> .text {
-				display: inline-block;
-				vertical-align: bottom;
-			}
-		}
-
-		> .divider {
-			display: inline-block;
-			width: 0.5px;
-			height: 16px;
-			margin: 0 3em;
-			background: currentColor;
-			opacity: 0;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/_common_/statusbars.vue b/packages/client/src/ui/_common_/statusbars.vue
deleted file mode 100644
index 114ca5be8c..0000000000
--- a/packages/client/src/ui/_common_/statusbars.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-<div class="dlrsnxqu">
-	<div
-		v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="[{ black: x.black }, {
-			verySmall: x.size === 'verySmall',
-			small: x.size === 'small',
-			medium: x.size === 'medium',
-			large: x.size === 'large',
-			veryLarge: x.size === 'veryLarge',
-		}]"
-	>
-		<span class="name">{{ x.name }}</span>
-		<XRss v-if="x.type === 'rss'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url" :shuffle="x.props.shuffle"/>
-		<XFederation v-else-if="x.type === 'federation'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/>
-		<XUserList v-else-if="x.type === 'userList'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :user-list-id="x.props.userListId"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-const XRss = defineAsyncComponent(() => import('./statusbar-rss.vue'));
-const XFederation = defineAsyncComponent(() => import('./statusbar-federation.vue'));
-const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue'));
-</script>
-
-<style lang="scss" scoped>
-.dlrsnxqu {
-	font-size: 15px;
-	background: var(--panel);
-
-	> .item {
-		--height: 24px;
-		--nameMargin: 10px;
-		font-size: 0.85em;
-
-		&.verySmall {
-			--nameMargin: 7px;
-			--height: 16px;
-			font-size: 0.75em;
-		}
-
-		&.small {
-			--nameMargin: 8px;
-			--height: 20px;
-			font-size: 0.8em;
-		}
-
-		&.large {
-			--nameMargin: 12px;
-			--height: 26px;
-			font-size: 0.875em;
-		}
-
-		&.veryLarge {
-			--nameMargin: 14px;
-			--height: 30px;
-			font-size: 0.9em;
-		}
-
-		display: flex;
-		vertical-align: bottom;
-		width: 100%;
-		line-height: var(--height);
-		height: var(--height);
-		overflow: clip;
-		contain: strict;
-
-		> .name {
-			padding: 0 var(--nameMargin);
-			font-weight: bold;
-			color: var(--accent);
-
-			&:empty {
-				display: none;
-			}
-		}
-
-		> .body {
-			min-width: 0;
-			flex: 1;
-		}
-
-		&.black {
-			background: #000;
-			color: #fff;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/_common_/stream-indicator.vue b/packages/client/src/ui/_common_/stream-indicator.vue
deleted file mode 100644
index a855de8ab9..0000000000
--- a/packages/client/src/ui/_common_/stream-indicator.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-<div v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" class="nsbbhtug" @click="resetDisconnected">
-	<div>{{ i18n.ts.disconnectedFromServer }}</div>
-	<div class="command">
-		<button class="_textButton" @click="reload">{{ i18n.ts.reload }}</button>
-		<button class="_textButton">{{ i18n.ts.doNothing }}</button>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onUnmounted } from 'vue';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
-
-let hasDisconnected = $ref(false);
-
-function onDisconnected() {
-	hasDisconnected = true;
-}
-
-function resetDisconnected() {
-	hasDisconnected = false;
-}
-
-function reload() {
-	location.reload();
-}
-
-stream.on('_disconnected_', onDisconnected);
-
-onUnmounted(() => {
-	stream.off('_disconnected_', onDisconnected);
-});
-</script>
-
-<style lang="scss" scoped>
-.nsbbhtug {
-	position: fixed;
-	z-index: 16385;
-	bottom: 8px;
-	right: 8px;
-	margin: 0;
-	padding: 6px 12px;
-	font-size: 0.9em;
-	color: #fff;
-	background: #000;
-	opacity: 0.8;
-	border-radius: 4px;
-	max-width: 320px;
-
-	> .command {
-		display: flex;
-		justify-content: space-around;
-
-		> button {
-			padding: 0.7em;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/_common_/sw-inject.ts b/packages/client/src/ui/_common_/sw-inject.ts
deleted file mode 100644
index 8676d2d48d..0000000000
--- a/packages/client/src/ui/_common_/sw-inject.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { inject } from 'vue';
-import { post } from '@/os';
-import { $i, login } from '@/account';
-import { defaultStore } from '@/store';
-import { getAccountFromId } from '@/scripts/get-account-from-id';
-import { mainRouter } from '@/router';
-
-export function swInject() {
-	navigator.serviceWorker.addEventListener('message', ev => {
-		if (_DEV_) {
-			console.log('sw msg', ev.data);
-		}
-
-		if (ev.data.type !== 'order') return;
-
-		if (ev.data.loginId !== $i?.id) {
-			return getAccountFromId(ev.data.loginId).then(account => {
-				if (!account) return;
-				return login(account.token, ev.data.url);
-			});
-		}
-
-		switch (ev.data.order) {
-			case 'post':
-				return post(ev.data.options);
-			case 'push':
-				if (mainRouter.currentRoute.value.path === ev.data.url) {
-					return window.scroll({ top: 0, behavior: 'smooth' });
-				}
-				return mainRouter.push(ev.data.url);
-			default:
-				return;
-		}
-	});
-}
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
deleted file mode 100644
index 70882bd251..0000000000
--- a/packages/client/src/ui/_common_/upload.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-<div class="mk-uploader _acrylic" :style="{ zIndex }">
-	<ol v-if="uploads.length > 0">
-		<li v-for="ctx in uploads" :key="ctx.id">
-			<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
-			<div class="top">
-				<p class="name"><MkLoading :em="true"/>{{ ctx.name }}</p>
-				<p class="status">
-					<span v-if="ctx.progressValue === undefined" class="initing">{{ i18n.ts.waiting }}<MkEllipsis/></span>
-					<span v-if="ctx.progressValue !== undefined" class="kb">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
-					<span v-if="ctx.progressValue !== undefined" class="percentage">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
-				</p>
-			</div>
-			<progress :value="ctx.progressValue || 0" :max="ctx.progressMax || 0" :class="{ initing: ctx.progressValue === undefined, waiting: ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax }"></progress>
-		</li>
-	</ol>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as os from '@/os';
-import { uploads } from '@/scripts/upload';
-import { i18n } from '@/i18n';
-
-const zIndex = os.claimZIndex('high');
-</script>
-
-<style lang="scss" scoped>
-.mk-uploader {
-	position: fixed;
-	right: 16px;
-	width: 260px;
-	top: 32px;
-	padding: 16px 20px;
-	pointer-events: none;
-	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-	border-radius: 8px;
-}
-.mk-uploader:empty {
-  display: none;
-}
-.mk-uploader > ol {
-  display: block;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.mk-uploader > ol > li {
-  display: grid;
-  margin: 8px 0 0 0;
-  padding: 0;
-  height: 36px;
-  width: 100%;
-  border-top: solid 8px transparent;
-  grid-template-columns: 36px calc(100% - 44px);
-  grid-template-rows: 1fr 8px;
-  column-gap: 8px;
-  box-sizing: content-box;
-}
-.mk-uploader > ol > li:first-child {
-  margin: 0;
-  box-shadow: none;
-  border-top: none;
-}
-.mk-uploader > ol > li > .img {
-  display: block;
-  background-size: cover;
-  background-position: center center;
-  grid-column: 1/2;
-  grid-row: 1/3;
-}
-.mk-uploader > ol > li > .top {
-  display: flex;
-  grid-column: 2/3;
-  grid-row: 1/2;
-}
-.mk-uploader > ol > li > .top > .name {
-  display: block;
-  padding: 0 8px 0 0;
-  margin: 0;
-  font-size: 0.8em;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  flex-shrink: 1;
-}
-.mk-uploader > ol > li > .top > .name > i {
-  margin-right: 4px;
-}
-.mk-uploader > ol > li > .top > .status {
-  display: block;
-  margin: 0 0 0 auto;
-  padding: 0;
-  font-size: 0.8em;
-  flex-shrink: 0;
-}
-.mk-uploader > ol > li > .top > .status > .initing {
-}
-.mk-uploader > ol > li > .top > .status > .kb {
-}
-.mk-uploader > ol > li > .top > .status > .percentage {
-  display: inline-block;
-  width: 48px;
-  text-align: right;
-}
-.mk-uploader > ol > li > .top > .status > .percentage:after {
-  content: '%';
-}
-.mk-uploader > ol > li > progress {
-  display: block;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  overflow: hidden;
-  grid-column: 2/3;
-  grid-row: 2/3;
-  z-index: 2;
-	width: 100%;
-	height: 8px;
-}
-.mk-uploader > ol > li > progress::-webkit-progress-value {
-  background: var(--accent);
-}
-.mk-uploader > ol > li > progress::-webkit-progress-bar {
-  //background: var(--accentAlpha01);
-	background: transparent;
-}
-</style>
diff --git a/packages/client/src/ui/classic.header.vue b/packages/client/src/ui/classic.header.vue
deleted file mode 100644
index 46d79e6355..0000000000
--- a/packages/client/src/ui/classic.header.vue
+++ /dev/null
@@ -1,217 +0,0 @@
-<template>
-<div class="azykntjl">
-	<div class="body">
-		<div class="left">
-			<MkA v-click-anime v-tooltip="$ts.timeline" class="item index" active-class="active" to="/" exact>
-				<i class="ti ti-home ti-fw"></i>
-			</MkA>
-			<template v-for="item in menu">
-				<div v-if="item === '-'" class="divider"></div>
-				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime v-tooltip="$ts[navbarItemDef[item].title]" class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-					<i class="ti-fw" :class="navbarItemDef[item].icon"></i>
-					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="_indicatorCircle"></i></span>
-				</component>
-			</template>
-			<div class="divider"></div>
-			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip="$ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
-				<i class="ti ti-dashboard ti-fw"></i>
-			</MkA>
-			<button v-click-anime class="item _button" @click="more">
-				<i class="ti ti-dots ti-fw"></i>
-				<span v-if="otherNavItemIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
-			</button>
-		</div>
-		<div class="right">
-			<MkA v-click-anime v-tooltip="$ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
-				<i class="ti ti-settings ti-fw"></i>
-			</MkA>
-			<button v-click-anime class="item _button account" @click="openAccountMenu">
-				<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
-			</button>
-			<div class="post" @click="post">
-				<MkButton class="button" gradate full rounded>
-					<i class="ti ti-pencil ti-fw"></i>
-				</MkButton>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
-import { host } from '@/config';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { openAccountMenu } from '@/account';
-import MkButton from '@/components/MkButton.vue';
-
-export default defineComponent({
-	components: {
-		MkButton,
-	},
-
-	data() {
-		return {
-			host: host,
-			accounts: [],
-			connection: null,
-			navbarItemDef: navbarItemDef,
-			settingsWindowed: false,
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return this.$store.state.menu;
-		},
-
-		otherNavItemIndicated(): boolean {
-			for (const def in this.navbarItemDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.navbarItemDef[def].indicated) return true;
-			}
-			return false;
-		},
-	},
-
-	watch: {
-		'$store.reactiveState.menuDisplay.value'() {
-			this.calcViewState();
-		},
-	},
-
-	created() {
-		window.addEventListener('resize', this.calcViewState);
-		this.calcViewState();
-	},
-
-	methods: {
-		calcViewState() {
-			this.settingsWindowed = (window.innerWidth > 1400);
-		},
-
-		post() {
-			os.post();
-		},
-
-		search() {
-			search();
-		},
-
-		more(ev) {
-			os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
-				src: ev.currentTarget ?? ev.target,
-				anchor: { x: 'center', y: 'bottom' },
-			}, {
-			}, 'closed');
-		},
-
-		openAccountMenu: (ev) => {
-			openAccountMenu({
-				withExtraOperation: true,
-			}, ev);
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.azykntjl {
-	$height: 60px;
-	$avatar-size: 32px;
-	$avatar-margin: 8px;
-
-	position: sticky;
-	top: 0;
-	z-index: 1000;
-	width: 100%;
-	height: $height;
-	background-color: var(--bg);
-
-	> .body {
-		max-width: 1380px;
-		margin: 0 auto;
-		display: flex;
-
-		> .right,
-		> .left {
-
-			> .item {
-				position: relative;
-				font-size: 0.9em;
-				display: inline-block;
-				padding: 0 12px;
-				line-height: $height;
-
-				> i,
-				> .avatar {
-					margin-right: 0;
-				}
-
-				> i {
-					left: 10px;
-				}
-
-				> .avatar {
-					width: $avatar-size;
-					height: $avatar-size;
-					vertical-align: middle;
-				}
-
-				> .indicator {
-					position: absolute;
-					top: 0;
-					left: 0;
-					color: var(--navIndicator);
-					font-size: 8px;
-					animation: blink 1s infinite;
-				}
-
-				&:hover {
-					text-decoration: none;
-					color: var(--navHoverFg);
-				}
-
-				&.active {
-					color: var(--navActive);
-				}
-			}
-
-			> .divider {
-				display: inline-block;
-				height: 16px;
-				margin: 0 10px;
-				border-right: solid 0.5px var(--divider);
-			}
-
-			> .post {
-				display: inline-block;
-			
-				> .button {
-					width: 40px;
-					height: 40px;
-					padding: 0;
-					min-width: 0;
-				}
-			}
-
-			> .account {
-				display: inline-flex;
-				align-items: center;
-				vertical-align: top;
-				margin-right: 8px;
-
-				> .acct {
-					margin-left: 8px;
-				}
-			}
-		}
-
-		> .right {
-			margin-left: auto;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/classic.sidebar.vue b/packages/client/src/ui/classic.sidebar.vue
deleted file mode 100644
index dac09ea703..0000000000
--- a/packages/client/src/ui/classic.sidebar.vue
+++ /dev/null
@@ -1,268 +0,0 @@
-<template>
-<div class="npcljfve" :class="{ iconOnly }">
-	<button v-click-anime class="item _button account" @click="openAccountMenu">
-		<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
-	</button>
-	<div class="post" data-cy-open-post-form @click="post">
-		<MkButton class="button" gradate full rounded>
-			<i class="ti ti-pencil ti-fw"></i><span v-if="!iconOnly" class="text">{{ $ts.note }}</span>
-		</MkButton>
-	</div>
-	<div class="divider"></div>
-	<MkA v-click-anime class="item index" active-class="active" to="/" exact>
-		<i class="ti ti-home ti-fw"></i><span class="text">{{ $ts.timeline }}</span>
-	</MkA>
-	<template v-for="item in menu">
-		<div v-if="item === '-'" class="divider"></div>
-		<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
-			<i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
-			<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="_indicatorCircle"></i></span>
-		</component>
-	</template>
-	<div class="divider"></div>
-	<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<i class="ti ti-dashboard ti-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
-	</MkA>
-	<button v-click-anime class="item _button" @click="more">
-		<i class="ti ti-dots ti-fw"></i><span class="text">{{ $ts.more }}</span>
-		<span v-if="otherNavItemIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
-	</button>
-	<MkA v-click-anime class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
-		<i class="ti ti-settings ti-fw"></i><span class="text">{{ $ts.settings }}</span>
-	</MkA>
-	<div class="divider"></div>
-	<div class="about">
-		<MkA v-click-anime class="link" to="/about">
-			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
-		</MkA>
-	</div>
-	<!--<MisskeyLogo class="misskey"/>-->
-</div>
-</template>
-
-<script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
-import { host } from '@/config';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { openAccountMenu } from '@/account';
-import MkButton from '@/components/MkButton.vue';
-import { StickySidebar } from '@/scripts/sticky-sidebar';
-//import MisskeyLogo from '@assets/client/misskey.svg';
-
-export default defineComponent({
-	components: {
-		MkButton,
-		//MisskeyLogo,
-	},
-
-	data() {
-		return {
-			host: host,
-			accounts: [],
-			connection: null,
-			navbarItemDef: navbarItemDef,
-			iconOnly: false,
-			settingsWindowed: false,
-		};
-	},
-
-	computed: {
-		menu(): string[] {
-			return this.$store.state.menu;
-		},
-
-		otherNavItemIndicated(): boolean {
-			for (const def in this.navbarItemDef) {
-				if (this.menu.includes(def)) continue;
-				if (this.navbarItemDef[def].indicated) return true;
-			}
-			return false;
-		},
-	},
-
-	watch: {
-		'$store.reactiveState.menuDisplay.value'() {
-			this.calcViewState();
-		},
-
-		iconOnly() {
-			this.$nextTick(() => {
-				this.$emit('change-view-mode');
-			});
-		},
-	},
-
-	created() {
-		window.addEventListener('resize', this.calcViewState);
-		this.calcViewState();
-	},
-
-	mounted() {
-		const sticky = new StickySidebar(this.$el.parentElement, 16);
-		window.addEventListener('scroll', () => {
-			sticky.calc(window.scrollY);
-		}, { passive: true });
-	},
-
-	methods: {
-		calcViewState() {
-			this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
-			this.settingsWindowed = (window.innerWidth > 1400);
-		},
-
-		post() {
-			os.post();
-		},
-
-		search() {
-			search();
-		},
-
-		more(ev) {
-			os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
-				src: ev.currentTarget ?? ev.target,
-			}, {}, 'closed');
-		},
-
-		openAccountMenu: (ev) => {
-			openAccountMenu({
-				withExtraOperation: true,
-			}, ev);
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.npcljfve {
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
-	$avatar-size: 32px;
-	$avatar-margin: 8px;
-
-	padding: 0 16px;
-	box-sizing: border-box;
-	width: 260px;
-
-	&.iconOnly {
-		flex: 0 0 $nav-icon-only-width;
-		width: $nav-icon-only-width !important;
-
-		> .divider {
-			margin: 8px auto;
-			width: calc(100% - 32px);
-		}
-
-		> .post {
-			> .button {
-				width: 46px;
-				height: 46px;
-				padding: 0;
-			}
-		}
-
-		> .item {
-			padding-left: 0;
-			width: 100%;
-			text-align: center;
-			font-size: $ui-font-size * 1.1;
-			line-height: 3.7rem;
-
-			> i,
-			> .avatar {
-				margin-right: 0;
-			}
-
-			> i {
-				left: 10px;
-			}
-
-			> .text {
-				display: none;
-			}
-		}
-	}
-
-	> .divider {
-		margin: 10px 0;
-		border-top: solid 0.5px var(--divider);
-	}
-
-	> .post {
-		position: sticky;
-		top: 0;
-		z-index: 1;
-		padding: 16px 0;
-		background: var(--bg);
-
-		> .button {
-			min-width: 0;
-		}
-	}
-
-	> .about {
-		fill: currentColor;
-		padding: 8px 0 16px 0;
-		text-align: center;
-
-		> .link {
-			display: block;
-			width: 32px;
-			margin: 0 auto;
-
-			img {
-				display: block;
-				width: 100%;
-			}
-		}
-	}
-
-	> .item {
-		position: relative;
-		display: block;
-		font-size: $ui-font-size;
-		line-height: 2.6rem;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		white-space: nowrap;
-		width: 100%;
-		text-align: left;
-		box-sizing: border-box;
-
-		> i {
-			width: 32px;
-		}
-
-		> i,
-		> .avatar {
-			margin-right: $avatar-margin;
-		}
-
-		> .avatar {
-			width: $avatar-size;
-			height: $avatar-size;
-			vertical-align: middle;
-		}
-
-		> .indicator {
-			position: absolute;
-			top: 0;
-			left: 0;
-			color: var(--navIndicator);
-			font-size: 8px;
-			animation: blink 1s infinite;
-		}
-
-		&:hover {
-			text-decoration: none;
-			color: var(--navHoverFg);
-		}
-
-		&.active {
-			color: var(--navActive);
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
deleted file mode 100644
index 0e726c11ed..0000000000
--- a/packages/client/src/ui/classic.vue
+++ /dev/null
@@ -1,320 +0,0 @@
-<template>
-<div class="gbhvwtnk" :class="{ wallpaper }" :style="`--globalHeaderHeight:${globalHeaderHeight}px`">
-	<XHeaderMenu v-if="showMenuOnTop" v-get-size="(w, h) => globalHeaderHeight = h"/>
-
-	<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
-		<div v-if="!showMenuOnTop" class="sidebar">
-			<XSidebar/>
-		</div>
-		<div v-else ref="widgetsLeft" class="widgets left">
-			<XWidgets :place="'left'" @mounted="attachSticky(widgetsLeft)"/>
-		</div>
-
-		<main class="main" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
-			<div class="content">
-				<RouterView/>
-			</div>
-		</main>
-
-		<div v-if="isDesktop" ref="widgetsRight" class="widgets right">
-			<XWidgets :place="null" @mounted="attachSticky(widgetsRight)"/>
-		</div>
-	</div>
-
-	<transition :name="$store.state.animation ? 'tray-back' : ''">
-		<div
-			v-if="widgetsShowing"
-			class="tray-back _modalBg"
-			@click="widgetsShowing = false"
-			@touchstart.passive="widgetsShowing = false"
-		></div>
-	</transition>
-
-	<transition :name="$store.state.animation ? 'tray' : ''">
-		<XWidgets v-if="widgetsShowing" class="tray"/>
-	</transition>
-
-	<iframe v-if="$store.state.aiChanMode" ref="live2d" class="ivnzpscs" src="https://misskey-dev.github.io/mascot-web/?scale=2&y=1.4"></iframe>
-
-	<XCommon/>
-</div>
-</template>
-
-<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 { 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;
-
-let isDesktop = $ref(window.innerWidth >= DESKTOP_THRESHOLD);
-
-let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
-let widgetsShowing = $ref(false);
-let fullView = $ref(false);
-let globalHeaderHeight = $ref(0);
-const wallpaper = localStorage.getItem('wallpaper') != null;
-const showMenuOnTop = $computed(() => defaultStore.state.menuDisplay === 'top');
-let live2d = $ref<HTMLIFrameElement>();
-let widgetsLeft = $ref();
-let widgetsRight = $ref();
-
-provide('router', mainRouter);
-provideMetadataReceiver((info) => {
-	pageMetadata = info;
-	if (pageMetadata.value) {
-		document.title = `${pageMetadata.value.title} | ${instanceName}`;
-	}
-});
-provide('shouldHeaderThin', showMenuOnTop);
-provide('shouldSpacerMin', true);
-
-function attachSticky(el) {
-	const sticky = new StickySidebar(el, defaultStore.state.menuDisplay === 'top' ? 0 : 16, defaultStore.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
-	window.addEventListener('scroll', () => {
-		sticky.calc(window.scrollY);
-	}, { passive: true });
-}
-
-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: 'ti ti-window-maximize',
-		text: i18n.ts.openInWindow,
-		action: () => {
-			os.pageWindow(path);
-		},
-	}], ev);
-}
-
-function onAiClick(ev) {
-	//if (this.live2d) this.live2d.click(ev);
-}
-
-if (window.innerWidth < 1024) {
-	localStorage.setItem('ui', 'default');
-	location.reload();
-}
-
-document.documentElement.style.overflowY = 'scroll';
-
-if (defaultStore.state.widgets.length === 0) {
-	defaultStore.set('widgets', [{
-		name: 'calendar',
-		id: 'a', place: null, data: {},
-	}, {
-		name: 'notifications',
-		id: 'b', place: null, data: {},
-	}, {
-		name: 'trends',
-		id: 'c', place: null, data: {},
-	}]);
-}
-
-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 });
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.tray-enter-active,
-.tray-leave-active {
-	opacity: 1;
-	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.tray-enter-from,
-.tray-leave-active {
-	opacity: 0;
-	transform: translateX(240px);
-}
-
-.tray-back-enter-active,
-.tray-back-leave-active {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.tray-back-enter-from,
-.tray-back-leave-active {
-	opacity: 0;
-}
-
-.gbhvwtnk {
-	$ui-font-size: 1em;
-	$widgets-hide-threshold: 1200px;
-
-	min-height: 100dvh;
-	box-sizing: border-box;
-
-	&.wallpaper {
-		background: var(--wallpaperOverlay);
-		//backdrop-filter: var(--blur, blur(4px));
-	}
-
-	> .columns {
-		display: flex;
-		justify-content: center;
-		max-width: 100%;
-		//margin: 32px 0;
-
-		&.fullView {
-			margin: 0;
-		
-			> .sidebar {
-				display: none;
-			}
-
-			> .widgets {
-				display: none;
-			}
-
-			> .main {
-				margin: 0;
-				border-radius: 0;
-				box-shadow: none;
-				width: 100%;
-			}
-		}
-
-		> .main {
-			min-width: 0;
-			width: 750px;
-			margin: 0 16px 0 0;
-			background: var(--panel);
-			border-left: solid 1px var(--divider);
-			border-right: solid 1px var(--divider);
-			border-radius: 0;
-			overflow: clip;
-			--margin: 12px;
-		}
-
-		> .widgets {
-			//--panelBorder: none;
-			width: 300px;
-			margin-top: 16px;
-
-			@media (max-width: $widgets-hide-threshold) {
-				display: none;
-			}
-
-			&.left {
-				margin-right: 16px;
-			}
-		}
-
-		> .sidebar {
-			margin-top: 16px;
-		}
-
-		&.withGlobalHeader {
-			> .main {
-				margin-top: 0;
-				border: solid 1px var(--divider);
-				border-radius: var(--radius);
-				--stickyTop: var(--globalHeaderHeight);
-			}
-
-			> .widgets {
-				--stickyTop: var(--globalHeaderHeight);
-				margin-top: 0;
-			}
-		}
-
-		@media (max-width: 850px) {
-			margin: 0;
-
-			> .sidebar {
-				border-right: solid 0.5px var(--divider);
-			}
-
-			> .main {
-				margin: 0;
-				border-radius: 0;
-				box-shadow: none;
-				width: 100%;
-			}
-		}
-	}
-
-	> .tray-back {
-		z-index: 1001;
-	}
-
-	> .tray {
-		position: fixed;
-		top: 0;
-		right: 0;
-		z-index: 1001;
-		height: 100dvh;
-		padding: var(--margin);
-		box-sizing: border-box;
-		overflow: auto;
-		background: var(--bg);
-	}
-
-	> .ivnzpscs {
-		position: fixed;
-		bottom: 0;
-		right: 0;
-		width: 300px;
-		height: 600px;
-		border: none;
-		pointer-events: none;
-	}
-}
-</style>
diff --git a/packages/client/src/ui/classic.widgets.vue b/packages/client/src/ui/classic.widgets.vue
deleted file mode 100644
index 163ec982ce..0000000000
--- a/packages/client/src/ui/classic.widgets.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-<div class="ddiqwdnk">
-	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
-	<MkAd class="a" :prefer="['square']"/>
-
-	<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ $ts.editWidgetsExit }}</button>
-	<button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ $ts.editWidgets }}</button>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import XWidgets from '@/components/MkWidgets.vue';
-
-export default defineComponent({
-	components: {
-		XWidgets,
-	},
-
-	props: {
-		place: {
-			type: String,
-		},
-	},
-
-	emits: ['mounted'],
-
-	data() {
-		return {
-			editMode: false,
-		};
-	},
-
-	mounted() {
-		this.$emit('mounted', this.$el);
-	},
-
-	methods: {
-		addWidget(widget) {
-			this.$store.set('widgets', [{
-				...widget,
-				place: this.place,
-			}, ...this.$store.state.widgets]);
-		},
-
-		removeWidget(widget) {
-			this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id !== widget.id));
-		},
-
-		updateWidget({ id, data }) {
-			this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
-				...w,
-				data,
-			} : w));
-		},
-
-		updateWidgets(widgets) {
-			this.$store.set('widgets', [
-				...this.$store.state.widgets.filter(w => w.place !== this.place),
-				...widgets,
-			]);
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.ddiqwdnk {
-	position: sticky;
-	height: min-content;
-	box-sizing: border-box;
-	padding-bottom: 8px;
-
-	> .widgets,
-	> .a {
-		width: 300px;
-	}
-
-	> .edit {
-		display: block;
-		margin: 16px auto;
-	}
-}
-</style>
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
deleted file mode 100644
index f3415cfd09..0000000000
--- a/packages/client/src/ui/deck.vue
+++ /dev/null
@@ -1,435 +0,0 @@
-<template>
-<div
-	class="mk-deck" :class="[{ isMobile }]"
->
-	<XSidebar v-if="!isMobile"/>
-
-	<div class="main">
-		<XStatusBars class="statusbars"/>
-		<div ref="columnsEl" class="columns" :class="deckStore.reactiveState.columnAlign.value" @contextmenu.self.prevent="onContextmenu">
-			<template v-for="ids in layout">
-				<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-				<section
-					v-if="ids.length > 1"
-					class="folder column"
-					:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
-				>
-					<DeckColumnCore v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
-				</section>
-				<DeckColumnCore
-					v-else
-					:ref="ids[0]"
-					:key="ids[0]"
-					class="column"
-					:column="columns.find(c => c.id === ids[0])"
-					:is-stacked="false"
-					:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
-					@parent-focus="moveFocus(ids[0], $event)"
-				/>
-			</template>
-			<div v-if="layout.length === 0" class="intro _panel">
-				<div>{{ i18n.ts._deck.introduction }}</div>
-				<MkButton primary class="add" @click="addColumn">{{ i18n.ts._deck.addColumn }}</MkButton>
-				<div>{{ i18n.ts._deck.introduction2 }}</div>
-			</div>
-			<div class="sideMenu">
-				<div class="top">
-					<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${deckStore.state.profile}`" class="_button button" @click="changeProfile"><i class="ti ti-caret-down"></i></button>
-					<button v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" class="_button button" @click="deleteProfile"><i class="ti ti-trash"></i></button>
-				</div>
-				<div class="middle">
-					<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" class="_button button" @click="addColumn"><i class="ti ti-plus"></i></button>
-				</div>
-				<div class="bottom">
-					<button v-tooltip.noDelay.left="i18n.ts.settings" class="_button button settings" @click="showSettings"><i class="ti ti-settings"></i></button>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<div v-if="isMobile" class="buttons">
-		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="ti ti-menu-2"></i><span v-if="menuIndicated" class="indicator"><i class="_indicatorCircle"></i></span></button>
-		<button class="button home _button" @click="mainRouter.push('/')"><i class="ti ti-home"></i></button>
-		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="_indicatorCircle"></i></span></button>
-		<button class="button post _button" @click="os.post()"><i class="ti ti-pencil"></i></button>
-	</div>
-
-	<transition :name="$store.state.animation ? 'menu-back' : ''">
-		<div
-			v-if="drawerMenuShowing"
-			class="menu-back _modalBg"
-			@click="drawerMenuShowing = false"
-			@touchstart.passive="drawerMenuShowing = false"
-		></div>
-	</transition>
-
-	<transition :name="$store.state.animation ? 'menu' : ''">
-		<XDrawerMenu v-if="drawerMenuShowing" class="menu"/>
-	</transition>
-
-	<XCommon/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed, defineAsyncComponent, onMounted, provide, ref, watch } from 'vue';
-import { v4 as uuid } from 'uuid';
-import XCommon from './_common_/common.vue';
-import { deckStore, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store';
-import DeckColumnCore from '@/ui/deck/column-core.vue';
-import XSidebar from '@/ui/_common_/navbar.vue';
-import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
-import MkButton from '@/components/MkButton.vue';
-import { getScrollContainer } from '@/scripts/scroll';
-import * as os from '@/os';
-import { navbarItemDef } from '@/navbar';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { mainRouter } from '@/router';
-import { unisonReload } from '@/scripts/unison-reload';
-const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
-
-mainRouter.navHook = (path, flag): boolean => {
-	if (flag === 'forcePage') return false;
-	const noMainColumn = !deckStore.state.columns.some(x => x.type === 'main');
-	if (deckStore.state.navWindow || noMainColumn) {
-		os.pageWindow(path);
-		return true;
-	}
-	return false;
-};
-
-const isMobile = ref(window.innerWidth <= 500);
-window.addEventListener('resize', () => {
-	isMobile.value = window.innerWidth <= 500;
-});
-
-const drawerMenuShowing = ref(false);
-
-const route = 'TODO';
-watch(route, () => {
-	drawerMenuShowing.value = false;
-});
-
-const columns = deckStore.reactiveState.columns;
-const layout = deckStore.reactiveState.layout;
-const menuIndicated = computed(() => {
-	if ($i == null) return false;
-	for (const def in navbarItemDef) {
-		if (navbarItemDef[def].indicated) return true;
-	}
-	return false;
-});
-
-function showSettings() {
-	os.pageWindow('/settings/deck');
-}
-
-let columnsEl = $ref<HTMLElement>();
-
-const addColumn = async (ev) => {
-	const columns = [
-		'main',
-		'widgets',
-		'notifications',
-		'tl',
-		'antenna',
-		'list',
-		'mentions',
-		'direct',
-	];
-
-	const { canceled, result: column } = await os.select({
-		title: i18n.ts._deck.addColumn,
-		items: columns.map(column => ({
-			value: column, text: i18n.t('_deck._columns.' + column),
-		})),
-	});
-	if (canceled) return;
-
-	addColumnToStore({
-		type: column,
-		id: uuid(),
-		name: i18n.t('_deck._columns.' + column),
-		width: 330,
-	});
-};
-
-const onContextmenu = (ev) => {
-	os.contextMenu([{
-		text: i18n.ts._deck.addColumn,
-		action: addColumn,
-	}], ev);
-};
-
-document.documentElement.style.overflowY = 'hidden';
-document.documentElement.style.scrollBehavior = 'auto';
-window.addEventListener('wheel', (ev) => {
-	if (ev.target === columnsEl && ev.deltaX === 0) {
-		columnsEl.scrollLeft += ev.deltaY;
-	} else if (getScrollContainer(ev.target as HTMLElement) == null && ev.deltaX === 0) {
-		columnsEl.scrollLeft += ev.deltaY;
-	}
-});
-loadDeck();
-
-function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
-	// TODO??
-}
-
-function changeProfile(ev: MouseEvent) {
-	const items = ref([{
-		text: deckStore.state.profile,
-		active: true.valueOf,
-	}]);
-	getProfiles().then(profiles => {
-		items.value = [{
-			text: deckStore.state.profile,
-			active: true.valueOf,
-		}, ...(profiles.filter(k => k !== deckStore.state.profile).map(k => ({
-			text: k,
-			action: () => {
-				deckStore.set('profile', k);
-				unisonReload();
-			},
-		}))), null, {
-			text: i18n.ts._deck.newProfile,
-			icon: 'ti ti-plus',
-			action: async () => {
-				const { canceled, result: name } = await os.inputText({
-					title: i18n.ts._deck.profile,
-					allowEmpty: false,
-				});
-				if (canceled) return;
-
-				deckStore.set('profile', name);
-				unisonReload();
-			},
-		}];
-	});
-	os.popupMenu(items, ev.currentTarget ?? ev.target);
-}
-
-async function deleteProfile() {
-	const { canceled } = await os.confirm({
-		type: 'warning',
-		text: i18n.t('deleteAreYouSure', { x: deckStore.state.profile }),
-	});
-	if (canceled) return;
-
-	deleteProfile_(deckStore.state.profile);
-	deckStore.set('profile', 'default');
-	unisonReload();
-}
-</script>
-
-<style lang="scss" scoped>
-.menu-enter-active,
-.menu-leave-active {
-	opacity: 1;
-	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.menu-enter-from,
-.menu-leave-active {
-	opacity: 0;
-	transform: translateX(-240px);
-}
-
-.menu-back-enter-active,
-.menu-back-leave-active {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.menu-back-enter-from,
-.menu-back-leave-active {
-	opacity: 0;
-}
-
-.mk-deck {
-	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
-
-	// TODO: ここではなくて、各カラムで自身の幅に応じて上書きするようにしたい
-	--margin: var(--marginHalf);
-
-	--deckDividerThickness: 5px;
-
-	display: flex;
-	height: 100dvh;
-	box-sizing: border-box;
-	flex: 1;
-
-	&.isMobile {
-		padding-bottom: 100px;
-	}
-
-	> .main {
-		flex: 1;
-		min-width: 0;
-		display: flex;
-		flex-direction: column;
-
-		> .columns {
-			flex: 1;
-			display: flex;
-			overflow-x: auto;
-			overflow-y: clip;
-
-			&.center {
-				> .column:first-of-type {
-					margin-left: auto;
-				}
-
-				> .column:last-of-type {
-					margin-right: auto;
-				}
-			}
-
-			> .column {
-				flex-shrink: 0;
-				border-right: solid var(--deckDividerThickness) var(--deckDivider);
-
-				&:first-of-type {
-					border-left: solid var(--deckDividerThickness) var(--deckDivider);
-				}
-
-				&.folder {
-					display: flex;
-					flex-direction: column;
-
-					> *:not(:last-of-type) {
-						border-bottom: solid var(--deckDividerThickness) var(--deckDivider);
-					}
-				}
-			}
-
-			> .intro {
-				padding: 32px;
-				height: min-content;
-				text-align: center;
-				margin: auto;
-
-				> .add {
-					margin: 1em auto;
-				}
-			}
-
-			> .sideMenu {
-				flex-shrink: 0;
-				margin-right: 0;
-				margin-left: auto;
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				width: 32px;
-
-				> .top, > .middle, > .bottom {
-					> .button {
-						display: block;
-						width: 100%;
-						aspect-ratio: 1;
-					}
-				}
-
-				> .top {
-					margin-bottom: auto;
-				}
-
-				> .middle {
-					margin-top: auto;
-					margin-bottom: auto;
-				}
-
-				> .bottom {
-					margin-top: auto;
-				}
-			}
-		}
-	}
-
-	> .buttons {
-		position: fixed;
-		z-index: 1000;
-		bottom: 0;
-		left: 0;
-		padding: 16px;
-		display: flex;
-		width: 100%;
-		box-sizing: border-box;
-
-		> .button {
-			position: relative;
-			flex: 1;
-			padding: 0;
-			margin: auto;
-			height: 64px;
-			border-radius: 8px;
-			background: var(--panel);
-			color: var(--fg);
-
-			&:not(:last-child) {
-				margin-right: 12px;
-			}
-
-			@media (max-width: 400px) {
-				height: 60px;
-
-				&:not(:last-child) {
-					margin-right: 8px;
-				}
-			}
-
-			&:hover {
-				background: var(--X2);
-			}
-
-			> .indicator {
-				position: absolute;
-				top: 0;
-				left: 0;
-				color: var(--indicator);
-				font-size: 16px;
-				animation: blink 1s infinite;
-			}
-
-			&:first-child {
-				margin-left: 0;
-			}
-
-			&:last-child {
-				margin-right: 0;
-			}
-
-			> * {
-				font-size: 20px;
-			}
-
-			&:disabled {
-				cursor: default;
-
-				> * {
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-
-	> .menu-back {
-		z-index: 1001;
-	}
-
-	> .menu {
-		position: fixed;
-		top: 0;
-		left: 0;
-		z-index: 1001;
-		height: 100dvh;
-		width: 240px;
-		box-sizing: border-box;
-		contain: strict;
-		overflow: auto;
-		overscroll-behavior: contain;
-		background: var(--navBg);
-	}
-}
-</style>
diff --git a/packages/client/src/ui/deck/antenna-column.vue b/packages/client/src/ui/deck/antenna-column.vue
deleted file mode 100644
index ba14530662..0000000000
--- a/packages/client/src/ui/deck/antenna-column.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header>
-		<i class="ti ti-antenna"></i><span style="margin-left: 8px;">{{ column.name }}</span>
-	</template>
-
-	<XTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => emit('loaded')"/>
-</XColumn>
-</template>
-
-<script lang="ts" setup>
-import { onMounted } from 'vue';
-import XColumn from './column.vue';
-import { updateColumn, Column } from './deck-store';
-import XTimeline from '@/components/MkTimeline.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	column: Column;
-	isStacked: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'loaded'): void;
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
-}>();
-
-let timeline = $ref<InstanceType<typeof XTimeline>>();
-
-onMounted(() => {
-	if (props.column.antennaId == null) {
-		setAntenna();
-	}
-});
-
-async function setAntenna() {
-	const antennas = await os.api('antennas/list');
-	const { canceled, result: antenna } = await os.select({
-		title: i18n.ts.selectAntenna,
-		items: antennas.map(x => ({
-			value: x, text: x.name,
-		})),
-		default: props.column.antennaId,
-	});
-	if (canceled) return;
-	updateColumn(props.column.id, {
-		antennaId: antenna.id,
-	});
-}
-
-const menu = [{
-	icon: 'ti ti-pencil',
-	text: i18n.ts.selectAntenna,
-	action: setAntenna,
-}];
-
-/*
-function focus() {
-	timeline.focus();
-}
-
-defineExpose({
-	focus,
-});
-*/
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/client/src/ui/deck/column-core.vue b/packages/client/src/ui/deck/column-core.vue
deleted file mode 100644
index 30c0dc5e1c..0000000000
--- a/packages/client/src/ui/deck/column-core.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-<!-- TODO: リファクタの余地がありそう -->
-<div v-if="!column">たぶん見えちゃいけないやつ</div>
-<XMainColumn v-else-if="column.type === 'main'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XWidgetsColumn v-else-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XNotificationsColumn v-else-if="column.type === 'notifications'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XTlColumn v-else-if="column.type === 'tl'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XListColumn v-else-if="column.type === 'list'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XAntennaColumn v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XMentionsColumn v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-<XDirectColumn v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import XMainColumn from './main-column.vue';
-import XTlColumn from './tl-column.vue';
-import XAntennaColumn from './antenna-column.vue';
-import XListColumn from './list-column.vue';
-import XNotificationsColumn from './notifications-column.vue';
-import XWidgetsColumn from './widgets-column.vue';
-import XMentionsColumn from './mentions-column.vue';
-import XDirectColumn from './direct-column.vue';
-import { Column } from './deck-store';
-
-defineProps<{
-	column?: Column;
-	isStacked: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
-}>();
-</script>
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
deleted file mode 100644
index 2a99b621e6..0000000000
--- a/packages/client/src/ui/deck/column.vue
+++ /dev/null
@@ -1,398 +0,0 @@
-<template>
-<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
-<section
-	v-hotkey="keymap" class="dnpfarvg _narrow_"
-	:class="{ paged: isMainColumn, naked, active, isStacked, draghover, dragging, dropready }"
-	@dragover.prevent.stop="onDragover"
-	@dragleave="onDragleave"
-	@drop.prevent.stop="onDrop"
->
-	<header
-		:class="{ indicated }"
-		draggable="true"
-		@click="goTop"
-		@dragstart="onDragstart"
-		@dragend="onDragend"
-		@contextmenu.prevent.stop="onContextmenu"
-	>
-		<button v-if="isStacked && !isMainColumn" class="toggleActive _button" @click="toggleActive">
-			<template v-if="active"><i class="ti ti-chevron-up"></i></template>
-			<template v-else><i class="ti ti-chevron-down"></i></template>
-		</button>
-		<div class="action">
-			<slot name="action"></slot>
-		</div>
-		<span class="header"><slot name="header"></slot></span>
-		<button v-tooltip="i18n.ts.settings" class="menu _button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
-	</header>
-	<div v-show="active" ref="body">
-		<slot></slot>
-	</div>
-</section>
-</template>
-
-<script lang="ts" setup>
-import { onBeforeUnmount, onMounted, provide, Ref, watch } from 'vue';
-import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn, Column, deckStore } from './deck-store';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { MenuItem } from '@/types/menu';
-
-provide('shouldHeaderThin', true);
-provide('shouldOmitHeaderTitle', true);
-provide('shouldSpacerMin', true);
-
-const props = withDefaults(defineProps<{
-	column: Column;
-	isStacked?: boolean;
-	naked?: boolean;
-	indicated?: boolean;
-	menu?: MenuItem[];
-}>(), {
-	isStacked: false,
-	naked: false,
-	indicated: false,
-});
-
-const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
-	(ev: 'change-active-state', v: boolean): void;
-}>();
-
-let body = $ref<HTMLDivElement>();
-
-let dragging = $ref(false);
-watch($$(dragging), v => os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd'));
-
-let draghover = $ref(false);
-let dropready = $ref(false);
-
-const isMainColumn = $computed(() => props.column.type === 'main');
-const active = $computed(() => props.column.active !== false);
-watch($$(active), v => emit('change-active-state', v));
-
-const keymap = $computed(() => ({
-	'shift+up': () => emit('parent-focus', 'up'),
-	'shift+down': () => emit('parent-focus', 'down'),
-	'shift+left': () => emit('parent-focus', 'left'),
-	'shift+right': () => emit('parent-focus', 'right'),
-}));
-
-onMounted(() => {
-	os.deckGlobalEvents.on('column.dragStart', onOtherDragStart);
-	os.deckGlobalEvents.on('column.dragEnd', onOtherDragEnd);
-});
-
-onBeforeUnmount(() => {
-	os.deckGlobalEvents.off('column.dragStart', onOtherDragStart);
-	os.deckGlobalEvents.off('column.dragEnd', onOtherDragEnd);
-});
-
-function onOtherDragStart() {
-	dropready = true;
-}
-
-function onOtherDragEnd() {
-	dropready = false;
-}
-
-function toggleActive() {
-	if (!props.isStacked) return;
-	updateColumn(props.column.id, {
-		active: !props.column.active,
-	});
-}
-
-function getMenu() {
-	let items = [{
-		icon: 'ti ti-settings',
-		text: i18n.ts._deck.configureColumn,
-		action: async () => {
-			const { canceled, result } = await os.form(props.column.name, {
-				name: {
-					type: 'string',
-					label: i18n.ts.name,
-					default: props.column.name,
-				},
-				width: {
-					type: 'number',
-					label: i18n.ts.width,
-					default: props.column.width,
-				},
-				flexible: {
-					type: 'boolean',
-					label: i18n.ts.flexible,
-					default: props.column.flexible,
-				},
-			});
-			if (canceled) return;
-			updateColumn(props.column.id, result);
-		},
-	}, {
-		type: 'parent',
-		text: i18n.ts.move + '...',
-		icon: 'ti ti-arrows-move',
-		children: [{
-			icon: 'ti ti-arrow-left',
-			text: i18n.ts._deck.swapLeft,
-			action: () => {
-				swapLeftColumn(props.column.id);
-			},
-		}, {
-			icon: 'ti ti-arrow-right',
-			text: i18n.ts._deck.swapRight,
-			action: () => {
-				swapRightColumn(props.column.id);
-			},
-		}, props.isStacked ? {
-			icon: 'ti ti-arrow-up',
-			text: i18n.ts._deck.swapUp,
-			action: () => {
-				swapUpColumn(props.column.id);
-			},
-		} : undefined, props.isStacked ? {
-			icon: 'ti ti-arrow-down',
-			text: i18n.ts._deck.swapDown,
-			action: () => {
-				swapDownColumn(props.column.id);
-			},
-		} : undefined],
-	}, {
-		icon: 'ti ti-stack-2',
-		text: i18n.ts._deck.stackLeft,
-		action: () => {
-			stackLeftColumn(props.column.id);
-		},
-	}, props.isStacked ? {
-		icon: 'ti ti-window-maximize',
-		text: i18n.ts._deck.popRight,
-		action: () => {
-			popRightColumn(props.column.id);
-		},
-	} : undefined, null, {
-		icon: 'ti ti-trash',
-		text: i18n.ts.remove,
-		danger: true,
-		action: () => {
-			removeColumn(props.column.id);
-		},
-	}];
-
-	if (props.menu) {
-		items.unshift(null);
-		items = props.menu.concat(items);
-	}
-
-	return items;
-}
-
-function showSettingsMenu(ev: MouseEvent) {
-	os.popupMenu(getMenu(), ev.currentTarget ?? ev.target);
-}
-
-function onContextmenu(ev: MouseEvent) {
-	os.contextMenu(getMenu(), ev);
-}
-
-function goTop() {
-	body.scrollTo({
-		top: 0,
-		behavior: 'smooth',
-	});
-}
-
-function onDragstart(ev) {
-	ev.dataTransfer.effectAllowed = 'move';
-	ev.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, props.column.id);
-
-	// Chromeのバグで、Dragstartハンドラ内ですぐにDOMを変更する(=リアクティブなプロパティを変更する)とDragが終了してしまう
-	// SEE: https://stackoverflow.com/questions/19639969/html5-dragend-event-firing-immediately
-	window.setTimeout(() => {
-		dragging = true;
-	}, 10);
-}
-
-function onDragend(ev) {
-	dragging = false;
-}
-
-function onDragover(ev) {
-	// 自分自身がドラッグされている場合
-	if (dragging) {
-		// 自分自身にはドロップさせない
-		ev.dataTransfer.dropEffect = 'none';
-	} else {
-		const isDeckColumn = ev.dataTransfer.types[0] === _DATA_TRANSFER_DECK_COLUMN_;
-
-		ev.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
-
-		if (isDeckColumn) draghover = true;
-	}
-}
-
-function onDragleave() {
-	draghover = false;
-}
-
-function onDrop(ev) {
-	draghover = false;
-	os.deckGlobalEvents.emit('column.dragEnd');
-
-	const id = ev.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
-	if (id != null && id !== '') {
-		swapColumn(props.column.id, id);
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.dnpfarvg {
-	--root-margin: 10px;
-	--deckColumnHeaderHeight: 40px;
-
-	height: 100%;
-	overflow: hidden;
-	contain: strict;
-
-	&.draghover {
-		&:after {
-			content: "";
-			display: block;
-			position: absolute;
-			z-index: 1000;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			background: var(--focus);
-		}
-	}
-
-	&.dragging {
-		&:after {
-			content: "";
-			display: block;
-			position: absolute;
-			z-index: 1000;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			background: var(--focus);
-			opacity: 0.5;
-		}
-	}
-
-	&.dropready {
-		* {
-			pointer-events: none;
-		}
-	}
-
-	&:not(.active) {
-		flex-basis: var(--deckColumnHeaderHeight);
-		min-height: var(--deckColumnHeaderHeight);
-
-		> header.indicated {
-			box-shadow: 4px 0px var(--accent) inset;
-		}
-	}
-
-	&.naked {
-		background: var(--acrylicBg) !important;
-		-webkit-backdrop-filter: var(--blur, blur(10px));
-		backdrop-filter: var(--blur, blur(10px));
-
-		> header {
-			background: transparent;
-			box-shadow: none;
-
-			> button {
-				color: var(--fg);
-			}
-		}
-	}
-
-	&.paged {
-		background: var(--bg) !important;
-	}
-
-	> header {
-		position: relative;
-		display: flex;
-		z-index: 2;
-		line-height: var(--deckColumnHeaderHeight);
-		height: var(--deckColumnHeaderHeight);
-		padding: 0 16px;
-		font-size: 0.9em;
-		color: var(--panelHeaderFg);
-		background: var(--panelHeaderBg);
-		box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
-		cursor: pointer;
-
-		&, * {
-			user-select: none;
-		}
-
-		&.indicated {
-			box-shadow: 0 3px 0 0 var(--accent);
-		}
-
-		> .header {
-			display: inline-block;
-			align-items: center;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-
-		> span:only-of-type {
-			width: 100%;
-		}
-
-		> .toggleActive,
-		> .action > ::v-deep(*),
-		> .menu {
-			z-index: 1;
-			width: var(--deckColumnHeaderHeight);
-			line-height: var(--deckColumnHeaderHeight);
-			color: var(--faceTextButton);
-
-			&:hover {
-				color: var(--faceTextButtonHover);
-			}
-
-			&:active {
-				color: var(--faceTextButtonActive);
-			}
-		}
-
-		> .toggleActive, > .action {
-			margin-left: -16px;
-		}
-
-		> .action {
-			z-index: 1;
-		}
-
-		> .action:empty {
-			display: none;
-		}
-
-		> .menu {
-			margin-left: auto;
-			margin-right: -16px;
-		}
-	}
-
-	> div {
-		height: calc(100% - var(--deckColumnHeaderHeight));
-		overflow-y: auto;
-		overflow-x: hidden; // Safari does not supports clip
-		overflow-x: clip;
-		-webkit-overflow-scrolling: touch;
-		box-sizing: border-box;
-		background-color: var(--bg);
-	}
-}
-</style>
diff --git a/packages/client/src/ui/deck/deck-store.ts b/packages/client/src/ui/deck/deck-store.ts
deleted file mode 100644
index 56db7398e5..0000000000
--- a/packages/client/src/ui/deck/deck-store.ts
+++ /dev/null
@@ -1,296 +0,0 @@
-import { throttle } from 'throttle-debounce';
-import { markRaw } from 'vue';
-import { notificationTypes } from 'misskey-js';
-import { Storage } from '../../pizzax';
-import { i18n } from '@/i18n';
-import { api } from '@/os';
-import { deepClone } from '@/scripts/clone';
-
-type ColumnWidget = {
-	name: string;
-	id: string;
-	data: Record<string, any>;
-};
-
-export type Column = {
-	id: string;
-	type: 'main' | 'widgets' | 'notifications' | 'tl' | 'antenna' | 'list' | 'mentions' | 'direct';
-	name: string | null;
-	width: number;
-	widgets?: ColumnWidget[];
-	active?: boolean;
-	flexible?: boolean;
-	antennaId?: string;
-	listId?: string;
-	includingTypes?: typeof notificationTypes[number][];
-	tl?: 'home' | 'local' | 'social' | 'global';
-};
-
-export const deckStore = markRaw(new Storage('deck', {
-	profile: {
-		where: 'deviceAccount',
-		default: 'default',
-	},
-	columns: {
-		where: 'deviceAccount',
-		default: [] as Column[],
-	},
-	layout: {
-		where: 'deviceAccount',
-		default: [] as Column['id'][][],
-	},
-	columnAlign: {
-		where: 'deviceAccount',
-		default: 'left' as 'left' | 'right' | 'center',
-	},
-	alwaysShowMainColumn: {
-		where: 'deviceAccount',
-		default: true,
-	},
-	navWindow: {
-		where: 'deviceAccount',
-		default: true,
-	},
-}));
-
-export const loadDeck = async () => {
-	let deck;
-
-	try {
-		deck = await api('i/registry/get', {
-			scope: ['client', 'deck', 'profiles'],
-			key: deckStore.state.profile,
-		});
-	} catch (err) {
-		if (err.code === 'NO_SUCH_KEY') {
-			// 後方互換性のため
-			if (deckStore.state.profile === 'default') {
-				saveDeck();
-				return;
-			}
-
-			deckStore.set('columns', []);
-			deckStore.set('layout', []);
-			return;
-		}
-		throw err;
-	}
-
-	deckStore.set('columns', deck.columns);
-	deckStore.set('layout', deck.layout);
-};
-
-// TODO: deckがloadされていない状態でsaveすると意図せず上書きが発生するので対策する
-export const saveDeck = throttle(1000, () => {
-	api('i/registry/set', {
-		scope: ['client', 'deck', 'profiles'],
-		key: deckStore.state.profile,
-		value: {
-			columns: deckStore.reactiveState.columns.value,
-			layout: deckStore.reactiveState.layout.value,
-		},
-	});
-});
-
-export async function getProfiles(): Promise<string[]> {
-	return await api('i/registry/keys', {
-		scope: ['client', 'deck', 'profiles'],
-	});
-}
-
-export async function deleteProfile(key: string): Promise<void> {
-	return await api('i/registry/remove', {
-		scope: ['client', 'deck', 'profiles'],
-		key: key,
-	});
-}
-
-export function addColumn(column: Column) {
-	if (column.name === undefined) column.name = null;
-	deckStore.push('columns', column);
-	deckStore.push('layout', [column.id]);
-	saveDeck();
-}
-
-export function removeColumn(id: Column['id']) {
-	deckStore.set('columns', deckStore.state.columns.filter(c => c.id !== id));
-	deckStore.set('layout', deckStore.state.layout
-		.map(ids => ids.filter(_id => _id !== id))
-		.filter(ids => ids.length > 0));
-	saveDeck();
-}
-
-export function swapColumn(a: Column['id'], b: Column['id']) {
-	const aX = deckStore.state.layout.findIndex(ids => ids.indexOf(a) !== -1);
-	const aY = deckStore.state.layout[aX].findIndex(id => id === a);
-	const bX = deckStore.state.layout.findIndex(ids => ids.indexOf(b) !== -1);
-	const bY = deckStore.state.layout[bX].findIndex(id => id === b);
-	const layout = deepClone(deckStore.state.layout);
-	layout[aX][aY] = b;
-	layout[bX][bY] = a;
-	deckStore.set('layout', layout);
-	saveDeck();
-}
-
-export function swapLeftColumn(id: Column['id']) {
-	const layout = deepClone(deckStore.state.layout);
-	deckStore.state.layout.some((ids, i) => {
-		if (ids.includes(id)) {
-			const left = deckStore.state.layout[i - 1];
-			if (left) {
-				layout[i - 1] = deckStore.state.layout[i];
-				layout[i] = left;
-				deckStore.set('layout', layout);
-			}
-			return true;
-		}
-	});
-	saveDeck();
-}
-
-export function swapRightColumn(id: Column['id']) {
-	const layout = deepClone(deckStore.state.layout);
-	deckStore.state.layout.some((ids, i) => {
-		if (ids.includes(id)) {
-			const right = deckStore.state.layout[i + 1];
-			if (right) {
-				layout[i + 1] = deckStore.state.layout[i];
-				layout[i] = right;
-				deckStore.set('layout', layout);
-			}
-			return true;
-		}
-	});
-	saveDeck();
-}
-
-export function swapUpColumn(id: Column['id']) {
-	const layout = deepClone(deckStore.state.layout);
-	const idsIndex = deckStore.state.layout.findIndex(ids => ids.includes(id));
-	const ids = deepClone(deckStore.state.layout[idsIndex]);
-	ids.some((x, i) => {
-		if (x === id) {
-			const up = ids[i - 1];
-			if (up) {
-				ids[i - 1] = id;
-				ids[i] = up;
-
-				layout[idsIndex] = ids;
-				deckStore.set('layout', layout);
-			}
-			return true;
-		}
-	});
-	saveDeck();
-}
-
-export function swapDownColumn(id: Column['id']) {
-	const layout = deepClone(deckStore.state.layout);
-	const idsIndex = deckStore.state.layout.findIndex(ids => ids.includes(id));
-	const ids = deepClone(deckStore.state.layout[idsIndex]);
-	ids.some((x, i) => {
-		if (x === id) {
-			const down = ids[i + 1];
-			if (down) {
-				ids[i + 1] = id;
-				ids[i] = down;
-
-				layout[idsIndex] = ids;
-				deckStore.set('layout', layout);
-			}
-			return true;
-		}
-	});
-	saveDeck();
-}
-
-export function stackLeftColumn(id: Column['id']) {
-	let layout = deepClone(deckStore.state.layout);
-	const i = deckStore.state.layout.findIndex(ids => ids.includes(id));
-	layout = layout.map(ids => ids.filter(_id => _id !== id));
-	layout[i - 1].push(id);
-	layout = layout.filter(ids => ids.length > 0);
-	deckStore.set('layout', layout);
-	saveDeck();
-}
-
-export function popRightColumn(id: Column['id']) {
-	let layout = deepClone(deckStore.state.layout);
-	const i = deckStore.state.layout.findIndex(ids => ids.includes(id));
-	const affected = layout[i];
-	layout = layout.map(ids => ids.filter(_id => _id !== id));
-	layout.splice(i + 1, 0, [id]);
-	layout = layout.filter(ids => ids.length > 0);
-	deckStore.set('layout', layout);
-
-	const columns = deepClone(deckStore.state.columns);
-	for (const column of columns) {
-		if (affected.includes(column.id)) {
-			column.active = true;
-		}
-	}
-	deckStore.set('columns', columns);
-
-	saveDeck();
-}
-
-export function addColumnWidget(id: Column['id'], widget: ColumnWidget) {
-	const columns = deepClone(deckStore.state.columns);
-	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
-	const column = deepClone(deckStore.state.columns[columnIndex]);
-	if (column == null) return;
-	if (column.widgets == null) column.widgets = [];
-	column.widgets.unshift(widget);
-	columns[columnIndex] = column;
-	deckStore.set('columns', columns);
-	saveDeck();
-}
-
-export function removeColumnWidget(id: Column['id'], widget: ColumnWidget) {
-	const columns = deepClone(deckStore.state.columns);
-	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
-	const column = deepClone(deckStore.state.columns[columnIndex]);
-	if (column == null) return;
-	column.widgets = column.widgets.filter(w => w.id !== widget.id);
-	columns[columnIndex] = column;
-	deckStore.set('columns', columns);
-	saveDeck();
-}
-
-export function setColumnWidgets(id: Column['id'], widgets: ColumnWidget[]) {
-	const columns = deepClone(deckStore.state.columns);
-	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
-	const column = deepClone(deckStore.state.columns[columnIndex]);
-	if (column == null) return;
-	column.widgets = widgets;
-	columns[columnIndex] = column;
-	deckStore.set('columns', columns);
-	saveDeck();
-}
-
-export function updateColumnWidget(id: Column['id'], widgetId: string, widgetData: any) {
-	const columns = deepClone(deckStore.state.columns);
-	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
-	const column = deepClone(deckStore.state.columns[columnIndex]);
-	if (column == null) return;
-	column.widgets = column.widgets.map(w => w.id === widgetId ? {
-		...w,
-		data: widgetData,
-	} : w);
-	columns[columnIndex] = column;
-	deckStore.set('columns', columns);
-	saveDeck();
-}
-
-export function updateColumn(id: Column['id'], column: Partial<Column>) {
-	const columns = deepClone(deckStore.state.columns);
-	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
-	const currentColumn = deepClone(deckStore.state.columns[columnIndex]);
-	if (currentColumn == null) return;
-	for (const [k, v] of Object.entries(column)) {
-		currentColumn[k] = v;
-	}
-	columns[columnIndex] = currentColumn;
-	deckStore.set('columns', columns);
-	saveDeck();
-}
diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue
deleted file mode 100644
index 75b018cacd..0000000000
--- a/packages/client/src/ui/deck/direct-column.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-<XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="ti ti-mail" style="margin-right: 8px;"></i>{{ column.name }}</template>
-
-	<XNotes :pagination="pagination"/>
-</XColumn>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import XColumn from './column.vue';
-import XNotes from '@/components/MkNotes.vue';
-import { Column } from './deck-store';
-
-defineProps<{
-	column: Column;
-	isStacked: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
-}>();
-
-const pagination = {
-	endpoint: 'notes/mentions' as const,
-	limit: 10,
-	params: {
-		visibility: 'specified',
-	},
-};
-</script>
diff --git a/packages/client/src/ui/deck/list-column.vue b/packages/client/src/ui/deck/list-column.vue
deleted file mode 100644
index d9f3f7b4e7..0000000000
--- a/packages/client/src/ui/deck/list-column.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header>
-		<i class="ti ti-list"></i><span style="margin-left: 8px;">{{ column.name }}</span>
-	</template>
-
-	<XTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => emit('loaded')"/>
-</XColumn>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import XColumn from './column.vue';
-import { updateColumn, Column } from './deck-store';
-import XTimeline from '@/components/MkTimeline.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	column: Column;
-	isStacked: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'loaded'): void;
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
-}>();
-
-let timeline = $ref<InstanceType<typeof XTimeline>>();
-
-if (props.column.listId == null) {
-	setList();
-}
-
-async function setList() {
-	const lists = await os.api('users/lists/list');
-	const { canceled, result: list } = await os.select({
-		title: i18n.ts.selectList,
-		items: lists.map(x => ({
-			value: x, text: x.name,
-		})),
-		default: props.column.listId,
-	});
-	if (canceled) return;
-	updateColumn(props.column.id, {
-		listId: list.id,
-	});
-}
-
-const menu = [{
-	icon: 'ti ti-pencil',
-	text: i18n.ts.selectList,
-	action: setList,
-}];
-</script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/packages/client/src/ui/deck/main-column.vue b/packages/client/src/ui/deck/main-column.vue
deleted file mode 100644
index 0c66172397..0000000000
--- a/packages/client/src/ui/deck/main-column.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-<XColumn v-if="deckStore.state.alwaysShowMainColumn || mainRouter.currentRoute.value.name !== 'index'" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header>
-		<template v-if="pageMetadata?.value">
-			<i :class="pageMetadata?.value.icon"></i>
-			{{ pageMetadata?.value.title }}
-		</template>
-	</template>
-
-	<RouterView @contextmenu.stop="onContextmenu"/>
-</XColumn>
-</template>
-
-<script lang="ts" setup>
-import { ComputedRef, provide } from 'vue';
-import XColumn from './column.vue';
-import { deckStore, Column } from '@/ui/deck/deck-store';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-import { mainRouter } from '@/router';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-
-defineProps<{
-	column: Column;
-	isStacked: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
-}>();
-
-let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
-
-provide('router', mainRouter);
-provideMetadataReceiver((info) => {
-	pageMetadata = info;
-});
-
-/*
-function back() {
-	history.back();
-}
-*/
-function onContextmenu(ev: MouseEvent) {
-	if (!ev.target) return;
-
-	const isLink = (el: HTMLElement) => {
-		if (el.tagName === 'A') return true;
-		if (el.parentElement) {
-			return isLink(el.parentElement);
-		}
-	};
-	if (isLink(ev.target as HTMLElement)) return;
-	if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes((ev.target as HTMLElement).tagName) || (ev.target as HTMLElement).attributes['contenteditable']) return;
-	if (window.getSelection()?.toString() !== '') return;
-	const path = mainRouter.currentRoute.value.path;
-	os.contextMenu([{
-		type: 'label',
-		text: path,
-	}, {
-		icon: 'ti ti-window-maximize',
-		text: i18n.ts.openInWindow,
-		action: () => {
-			os.pageWindow(path);
-		},
-	}], ev);
-}
-</script>
diff --git a/packages/client/src/ui/deck/mentions-column.vue b/packages/client/src/ui/deck/mentions-column.vue
deleted file mode 100644
index 16962956a0..0000000000
--- a/packages/client/src/ui/deck/mentions-column.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-<XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="ti ti-at" style="margin-right: 8px;"></i>{{ column.name }}</template>
-
-	<XNotes :pagination="pagination"/>
-</XColumn>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import XColumn from './column.vue';
-import XNotes from '@/components/MkNotes.vue';
-import { Column } from './deck-store';
-
-defineProps<{
-	column: Column;
-	isStacked: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
-}>();
-
-const pagination = {
-	endpoint: 'notes/mentions' as const,
-	limit: 10,
-};
-</script>
diff --git a/packages/client/src/ui/deck/notifications-column.vue b/packages/client/src/ui/deck/notifications-column.vue
deleted file mode 100644
index 9d133035fe..0000000000
--- a/packages/client/src/ui/deck/notifications-column.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-<XColumn :column="column" :is-stacked="isStacked" :menu="menu" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="ti ti-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
-
-	<XNotifications :include-types="column.includingTypes"/>
-</XColumn>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import XColumn from './column.vue';
-import { updateColumn, Column } from './deck-store';
-import XNotifications from '@/components/MkNotifications.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	column: Column;
-	isStacked: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
-}>();
-
-function func() {
-	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
-		includingTypes: props.column.includingTypes,
-	}, {
-		done: async (res) => {
-			const { includingTypes } = res;
-			updateColumn(props.column.id, {
-				includingTypes: includingTypes,
-			});
-		},
-	}, 'closed');
-}
-
-const menu = [{
-	icon: 'ti ti-pencil',
-	text: i18n.ts.notificationSetting,
-	action: func,
-}];
-</script>
diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/tl-column.vue
deleted file mode 100644
index 49b29145ff..0000000000
--- a/packages/client/src/ui/deck/tl-column.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header>
-		<i v-if="column.tl === 'home'" class="ti ti-home"></i>
-		<i v-else-if="column.tl === 'local'" class="ti ti-messages"></i>
-		<i v-else-if="column.tl === 'social'" class="ti ti-share"></i>
-		<i v-else-if="column.tl === 'global'" class="ti ti-world"></i>
-		<span style="margin-left: 8px;">{{ column.name }}</span>
-	</template>
-
-	<div v-if="disabled" class="iwaalbte">
-		<p>
-			<i class="ti ti-minus-circle"></i>
-			{{ $t('disabled-timeline.title') }}
-		</p>
-		<p class="desc">{{ $t('disabled-timeline.description') }}</p>
-	</div>
-	<XTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => emit('loaded')" @queue="queueUpdated" @note="onNote"/>
-</XColumn>
-</template>
-
-<script lang="ts" setup>
-import { onMounted } from 'vue';
-import XColumn from './column.vue';
-import { removeColumn, updateColumn, Column } from './deck-store';
-import XTimeline from '@/components/MkTimeline.vue';
-import * as os from '@/os';
-import { $i } from '@/account';
-import { instance } from '@/instance';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	column: Column;
-	isStacked: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'loaded'): void;
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
-}>();
-
-let disabled = $ref(false);
-let indicated = $ref(false);
-let columnActive = $ref(true);
-
-onMounted(() => {
-	if (props.column.tl == null) {
-		setType();
-	} else if ($i) {
-		disabled = !$i.isModerator && !$i.isAdmin && (
-			instance.disableLocalTimeline && ['local', 'social'].includes(props.column.tl) ||
-			instance.disableGlobalTimeline && ['global'].includes(props.column.tl));
-	}
-});
-
-async function setType() {
-	const { canceled, result: src } = await os.select({
-		title: i18n.ts.timeline,
-		items: [{
-			value: 'home' as const, text: i18n.ts._timelines.home,
-		}, {
-			value: 'local' as const, text: i18n.ts._timelines.local,
-		}, {
-			value: 'social' as const, text: i18n.ts._timelines.social,
-		}, {
-			value: 'global' as const, text: i18n.ts._timelines.global,
-		}],
-	});
-	if (canceled) {
-		if (props.column.tl == null) {
-			removeColumn(props.column.id);
-		}
-		return;
-	}
-	updateColumn(props.column.id, {
-		tl: src,
-	});
-}
-
-function queueUpdated(q) {
-	if (columnActive) {
-		indicated = q !== 0;
-	}
-}
-
-function onNote() {
-	if (!columnActive) {
-		indicated = true;
-	}
-}
-
-function onChangeActiveState(state) {
-	columnActive = state;
-
-	if (columnActive) {
-		indicated = false;
-	}
-}
-
-const menu = [{
-	icon: 'ti ti-pencil',
-	text: i18n.ts.timeline,
-	action: setType,
-}];
-</script>
-
-<style lang="scss" scoped>
-.iwaalbte {
-	text-align: center;
-
-	> p {
-		margin: 16px;
-
-		&.desc {
-			font-size: 14px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/deck/widgets-column.vue b/packages/client/src/ui/deck/widgets-column.vue
deleted file mode 100644
index fc61d18ff6..0000000000
--- a/packages/client/src/ui/deck/widgets-column.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-<XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
-	<template #header><i class="ti ti-apps" style="margin-right: 8px;"></i>{{ column.name }}</template>
-
-	<div class="wtdtxvec">
-		<div v-if="!(column.widgets && column.widgets.length > 0) && !edit" class="intro">{{ i18n.ts._deck.widgetsIntroduction }}</div>
-		<XWidgets :edit="edit" :widgets="column.widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
-	</div>
-</XColumn>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import XColumn from './column.vue';
-import { addColumnWidget, Column, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store';
-import XWidgets from '@/components/MkWidgets.vue';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	column: Column;
-	isStacked: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
-}>();
-
-let edit = $ref(false);
-
-function addWidget(widget) {
-	addColumnWidget(props.column.id, widget);
-}
-
-function removeWidget(widget) {
-	removeColumnWidget(props.column.id, widget);
-}
-
-function updateWidget({ id, data }) {
-	updateColumnWidget(props.column.id, id, data);
-}
-
-function updateWidgets(widgets) {
-	setColumnWidgets(props.column.id, widgets);
-}
-
-function func() {
-	edit = !edit;
-}
-
-const menu = [{
-	icon: 'ti ti-pencil',
-	text: i18n.ts.editWidgets,
-	action: func,
-}];
-</script>
-
-<style lang="scss" scoped>
-.wtdtxvec {
-	--margin: 8px;
-	--panelBorder: none;
-
-	padding: 0 var(--margin);
-
-	> .intro {
-		padding: 16px;
-		text-align: center;
-	}
-}
-</style>
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
deleted file mode 100644
index b91bf476e8..0000000000
--- a/packages/client/src/ui/universal.vue
+++ /dev/null
@@ -1,390 +0,0 @@
-<template>
-<div class="dkgtipfy" :class="{ wallpaper }">
-	<XSidebar v-if="!isMobile" class="sidebar"/>
-
-	<MkStickyContainer class="contents">
-		<template #header><XStatusBars :class="$style.statusbars"/></template>
-		<main style="min-width: 0;" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
-			<div :class="$style.content">
-				<RouterView/>
-			</div>
-			<div :class="$style.spacer"></div>
-		</main>
-	</MkStickyContainer>
-
-	<div v-if="isDesktop" ref="widgetsEl" class="widgets">
-		<XWidgets @mounted="attachSticky"/>
-	</div>
-
-	<button v-if="!isDesktop && !isMobile" class="widgetButton _button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
-
-	<div v-if="isMobile" class="buttons">
-		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="ti ti-menu-2"></i><span v-if="menuIndicated" class="indicator"><i class="_indicatorCircle"></i></span></button>
-		<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i class="ti ti-home"></i></button>
-		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="_indicatorCircle"></i></span></button>
-		<button class="button widget _button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
-		<button class="button post _button" @click="os.post()"><i class="ti ti-pencil"></i></button>
-	</div>
-
-	<transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
-		<div
-			v-if="drawerMenuShowing"
-			class="menuDrawer-back _modalBg"
-			@click="drawerMenuShowing = false"
-			@touchstart.passive="drawerMenuShowing = false"
-		></div>
-	</transition>
-
-	<transition :name="$store.state.animation ? 'menuDrawer' : ''">
-		<XDrawerMenu v-if="drawerMenuShowing" class="menuDrawer"/>
-	</transition>
-
-	<transition :name="$store.state.animation ? 'widgetsDrawer-back' : ''">
-		<div
-			v-if="widgetsShowing"
-			class="widgetsDrawer-back _modalBg"
-			@click="widgetsShowing = false"
-			@touchstart.passive="widgetsShowing = false"
-		></div>
-	</transition>
-
-	<transition :name="$store.state.animation ? 'widgetsDrawer' : ''">
-		<XWidgets v-if="widgetsShowing" class="widgetsDrawer"/>
-	</transition>
-
-	<XCommon/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, provide, onMounted, computed, ref, 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_/navbar-for-mobile.vue';
-import * as os from '@/os';
-import { defaultStore } from '@/store';
-import { navbarItemDef } from '@/navbar';
-import { i18n } from '@/i18n';
-import { $i } from '@/account';
-import { Router } from '@/nirax';
-import { mainRouter } from '@/router';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-import { deviceKind } from '@/scripts/device-kind';
-const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
-const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
-const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
-
-const DESKTOP_THRESHOLD = 1100;
-const MOBILE_THRESHOLD = 500;
-
-// デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
-const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
-const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
-window.addEventListener('resize', () => {
-	isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
-});
-
-let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
-const widgetsEl = $ref<HTMLElement>();
-const widgetsShowing = $ref(false);
-
-provide('router', mainRouter);
-provideMetadataReceiver((info) => {
-	pageMetadata = info;
-	if (pageMetadata.value) {
-		document.title = `${pageMetadata.value.title} | ${instanceName}`;
-	}
-});
-
-const menuIndicated = computed(() => {
-	for (const def in navbarItemDef) {
-		if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
-		if (navbarItemDef[def].indicated) return true;
-	}
-	return false;
-});
-
-const drawerMenuShowing = ref(false);
-
-mainRouter.on('change', () => {
-	drawerMenuShowing.value = false;
-});
-
-document.documentElement.style.overflowY = 'scroll';
-
-if (defaultStore.state.widgets.length === 0) {
-	defaultStore.set('widgets', [{
-		name: 'calendar',
-		id: 'a', place: 'right', data: {},
-	}, {
-		name: 'notifications',
-		id: 'b', place: 'right', data: {},
-	}, {
-		name: 'trends',
-		id: 'c', place: 'right', data: {},
-	}]);
-}
-
-onMounted(() => {
-	if (!isDesktop.value) {
-		window.addEventListener('resize', () => {
-			if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop.value = true;
-		}, { passive: true });
-	}
-});
-
-const onContextmenu = (ev) => {
-	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: 'ti ti-window-maximize',
-		text: i18n.ts.openInWindow,
-		action: () => {
-			os.pageWindow(path);
-		},
-	}], ev);
-};
-
-const attachSticky = (el) => {
-	const sticky = new StickySidebar(widgetsEl);
-	window.addEventListener('scroll', () => {
-		sticky.calc(window.scrollY);
-	}, { passive: true });
-};
-
-function top() {
-	window.scroll({ top: 0, behavior: 'smooth' });
-}
-
-const wallpaper = localStorage.getItem('wallpaper') != null;
-</script>
-
-<style lang="scss" scoped>
-.widgetsDrawer-enter-active,
-.widgetsDrawer-leave-active {
-	opacity: 1;
-	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.widgetsDrawer-enter-from,
-.widgetsDrawer-leave-active {
-	opacity: 0;
-	transform: translateX(240px);
-}
-
-.widgetsDrawer-back-enter-active,
-.widgetsDrawer-back-leave-active {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.widgetsDrawer-back-enter-from,
-.widgetsDrawer-back-leave-active {
-	opacity: 0;
-}
-
-.menuDrawer-enter-active,
-.menuDrawer-leave-active {
-	opacity: 1;
-	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.menuDrawer-enter-from,
-.menuDrawer-leave-active {
-	opacity: 0;
-	transform: translateX(-240px);
-}
-
-.menuDrawer-back-enter-active,
-.menuDrawer-back-leave-active {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.menuDrawer-back-enter-from,
-.menuDrawer-back-leave-active {
-	opacity: 0;
-}
-
-.dkgtipfy {
-	$ui-font-size: 1em; // TODO: どこかに集約したい
-	$widgets-hide-threshold: 1090px;
-
-	min-height: 100dvh;
-	box-sizing: border-box;
-	display: flex;
-
-	&.wallpaper {
-		background: var(--wallpaperOverlay);
-		//backdrop-filter: var(--blur, blur(4px));
-	}
-
-	> .sidebar {
-		border-right: solid 0.5px var(--divider);
-	}
-
-	> .contents {
-		width: 100%;
-		min-width: 0;
-		background: var(--bg);
-	}
-
-	> .widgets {
-		padding: 0 var(--margin);
-		border-left: solid 0.5px var(--divider);
-		background: var(--bg);
-
-		@media (max-width: $widgets-hide-threshold) {
-			display: none;
-		}
-	}
-
-	> .widgetButton {
-		display: block;
-		position: fixed;
-		z-index: 1000;
-		bottom: 32px;
-		right: 32px;
-		width: 64px;
-		height: 64px;
-		border-radius: 100%;
-		box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
-		font-size: 22px;
-		background: var(--panel);
-	}
-
-	> .widgetsDrawer-back {
-		z-index: 1001;
-	}
-
-	> .widgetsDrawer {
-		position: fixed;
-		top: 0;
-		right: 0;
-		z-index: 1001;
-		height: 100dvh;
-		padding: var(--margin);
-		box-sizing: border-box;
-		overflow: auto;
-		overscroll-behavior: contain;
-		background: var(--bg);
-	}
-
-	> .buttons {
-		position: fixed;
-		z-index: 1000;
-		bottom: 0;
-		left: 0;
-		padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
-		display: flex;
-		width: 100%;
-		box-sizing: border-box;
-		-webkit-backdrop-filter: var(--blur, blur(32px));
-		backdrop-filter: var(--blur, blur(32px));
-		background-color: var(--header);
-		border-top: solid 0.5px var(--divider);
-
-		> .button {
-			position: relative;
-			flex: 1;
-			padding: 0;
-			margin: auto;
-			height: 64px;
-			border-radius: 8px;
-			background: var(--panel);
-			color: var(--fg);
-
-			&:not(:last-child) {
-				margin-right: 12px;
-			}
-
-			@media (max-width: 400px) {
-				height: 60px;
-
-				&:not(:last-child) {
-					margin-right: 8px;
-				}
-			}
-
-			&:hover {
-				background: var(--X2);
-			}
-
-			> .indicator {
-				position: absolute;
-				top: 0;
-				left: 0;
-				color: var(--indicator);
-				font-size: 16px;
-				animation: blink 1s infinite;
-			}
-
-			&:first-child {
-				margin-left: 0;
-			}
-
-			&:last-child {
-				margin-right: 0;
-			}
-
-			> * {
-				font-size: 20px;
-			}
-
-			&:disabled {
-				cursor: default;
-
-				> * {
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-
-	> .menuDrawer-back {
-		z-index: 1001;
-	}
-
-	> .menuDrawer {
-		position: fixed;
-		top: 0;
-		left: 0;
-		z-index: 1001;
-		height: 100dvh;
-		width: 240px;
-		box-sizing: border-box;
-		contain: strict;
-		overflow: auto;
-		overscroll-behavior: contain;
-		background: var(--navBg);
-	}
-}
-</style>
-
-<style lang="scss" module>
-.statusbars {
-	position: sticky;
-	top: 0;
-	left: 0;
-}
-
-.spacer {
-	$widgets-hide-threshold: 1090px;
-
-	height: calc(env(safe-area-inset-bottom, 0px) + 96px);
-
-	@media (min-width: ($widgets-hide-threshold + 1px)) {
-		display: none;
-	}
-}
-</style>
diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/universal.widgets.vue
deleted file mode 100644
index 33fb492836..0000000000
--- a/packages/client/src/ui/universal.widgets.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-<div class="efzpzdvf">
-	<XWidgets :edit="editMode" :widgets="defaultStore.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
-
-	<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
-	<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ i18n.ts.editWidgets }}</button>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted } from 'vue';
-import XWidgets from '@/components/MkWidgets.vue';
-import { i18n } from '@/i18n';
-import { defaultStore } from '@/store';
-
-const emit = defineEmits<{
-	(ev: 'mounted', el: Element): void;
-}>();
-
-let editMode = $ref(false);
-let rootEl = $ref<HTMLDivElement>();
-
-onMounted(() => {
-	emit('mounted', rootEl);
-});
-
-function addWidget(widget) {
-	defaultStore.set('widgets', [{
-		...widget,
-		place: null,
-	}, ...defaultStore.state.widgets]);
-}
-
-function removeWidget(widget) {
-	defaultStore.set('widgets', defaultStore.state.widgets.filter(w => w.id !== widget.id));
-}
-
-function updateWidget({ id, data }) {
-	defaultStore.set('widgets', defaultStore.state.widgets.map(w => w.id === id ? {
-		...w,
-		data,
-	} : w));
-}
-
-function updateWidgets(widgets) {
-	defaultStore.set('widgets', widgets);
-}
-</script>
-
-<style lang="scss" scoped>
-.efzpzdvf {
-	position: sticky;
-	height: min-content;
-	min-height: 100vh;
-	padding: var(--margin) 0;
-	box-sizing: border-box;
-
-	> * {
-		margin: var(--margin) 0;
-		width: 300px;
-
-		&:first-child {
-			margin-top: 0;
-		}
-	}
-
-	> .add {
-		margin: 0 auto;
-	}
-}
-</style>
diff --git a/packages/client/src/ui/visitor.vue b/packages/client/src/ui/visitor.vue
deleted file mode 100644
index ec9150d346..0000000000
--- a/packages/client/src/ui/visitor.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-<DesignB/>
-<XCommon/>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import DesignA from './visitor/a.vue';
-import DesignB from './visitor/b.vue';
-import XCommon from './_common_/common.vue';
-
-export default defineComponent({
-	components: {
-		XCommon,
-		DesignA,
-		DesignB,
-	},
-});
-</script>
diff --git a/packages/client/src/ui/visitor/a.vue b/packages/client/src/ui/visitor/a.vue
deleted file mode 100644
index f8db7a9d09..0000000000
--- a/packages/client/src/ui/visitor/a.vue
+++ /dev/null
@@ -1,259 +0,0 @@
-<template>
-<div class="mk-app">
-	<div v-if="mainRouter.currentRoute?.name === 'index'" class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
-		<div>
-			<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
-			<div v-if="meta" class="about">
-				<!-- eslint-disable-next-line vue/no-v-html -->
-				<div class="desc" v-html="meta.description || $ts.introMisskey"></div>
-			</div>
-			<div class="action">
-				<button class="_button primary" @click="signup()">{{ $ts.signup }}</button>
-				<button class="_button" @click="signin()">{{ $ts.login }}</button>
-			</div>
-		</div>
-	</div>
-	<div v-else class="banner-mini" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
-		<div>
-			<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
-		</div>
-	</div>
-
-	<div class="main">
-		<div ref="contents" class="contents" :class="{ wallpaper }">
-			<header v-show="mainRouter.currentRoute?.name !== 'index'" ref="header" class="header">
-				<XHeader :info="pageInfo"/>
-			</header>
-			<main ref="main">
-				<RouterView/>
-			</main>
-			<div class="powered-by">
-				<b><MkA to="/">{{ host }}</MkA></b>
-				<small>Powered by <a href="https://github.com/misskey-dev/misskey" target="_blank">Misskey</a></small>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import XHeader from './header.vue';
-import { host, instanceName } from '@/config';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
-import { ColdDeviceStorage } from '@/store';
-import { mainRouter } from '@/router';
-
-const DESKTOP_THRESHOLD = 1100;
-
-export default defineComponent({
-	components: {
-		XHeader,
-		MkPagination,
-		MkButton,
-	},
-
-	data() {
-		return {
-			host,
-			instanceName,
-			pageInfo: null,
-			meta: null,
-			narrow: window.innerWidth < 1280,
-			announcements: {
-				endpoint: 'announcements',
-				limit: 10,
-			},
-			mainRouter,
-			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
-		};
-	},
-
-	computed: {
-		keymap(): any {
-			return {
-				'd': () => {
-					if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
-					this.$store.set('darkMode', !this.$store.state.darkMode);
-				},
-				's': search,
-				'h|/': this.help,
-			};
-		},
-	},
-
-	created() {
-		document.documentElement.style.overflowY = 'scroll';
-
-		os.api('meta', { detail: true }).then(meta => {
-			this.meta = meta;
-		});
-	},
-
-	mounted() {
-		if (!this.isDesktop) {
-			window.addEventListener('resize', () => {
-				if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
-			}, { passive: true });
-		}
-	},
-
-	methods: {
-		// @ThatOneCalculator: Are these methods even used?
-		// I can't find references to them anywhere else in the code...
-
-		// setParallax(el) {
-		// 	new simpleParallax(el);
-		// },
-
-		changePage(page) {
-			if (page == null) return;
-			// eslint-disable-next-line no-undef
-			if (page[symbols.PAGE_INFO]) {
-				// eslint-disable-next-line no-undef
-				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');
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.mk-app {
-	min-height: 100vh;
-
-	> .banner {
-		position: relative;
-		width: 100%;
-		text-align: center;
-		background-position: center;
-		background-size: cover;
-
-		> div {
-			height: 100%;
-			background: rgba(0, 0, 0, 0.3);
-
-			* {
-				color: #fff;
-			}
-					
-			> h1 {
-				margin: 0;
-				padding: 96px 32px 0 32px;
-				text-shadow: 0 0 8px black;
-
-				> .logo {
-					vertical-align: bottom;
-					max-height: 150px;
-				}
-			}
-
-			> .about {
-				padding: 32px;
-				max-width: 580px;
-				margin: 0 auto;
-				box-sizing: border-box;
-				text-shadow: 0 0 8px black;
-			}
-
-			> .action {
-				padding-bottom: 64px;
-				
-				> button {
-					display: inline-block;
-					padding: 10px 20px;
-					box-sizing: border-box;
-					text-align: center;
-					border-radius: 999px;
-					background: var(--panel);
-					color: var(--fg);
-
-					&.primary {
-						background: var(--accent);
-						color: #fff;
-					}
-
-					&:first-child {
-						margin-right: 16px;
-					}
-				}
-			}
-		}
-	}
-
-	> .banner-mini {
-		position: relative;
-		width: 100%;
-		text-align: center;
-		background-position: center;
-		background-size: cover;
-
-		> div {
-			position: relative;
-			z-index: 1;
-			height: 100%;
-			background: rgba(0, 0, 0, 0.3);
-
-			* {
-				color: #fff !important;
-			}
-
-			> header {
-				
-			}
-					
-			> h1 {
-				margin: 0;
-				padding: 32px;
-				text-shadow: 0 0 8px black;
-
-				> .logo {
-					vertical-align: bottom;
-					max-height: 100px;
-				}
-			}
-		}
-	}
-
-	> .main {
-		> .contents {
-			position: relative;
-			z-index: 1;
-
-			> .header {
-				position: sticky;
-				top: 0;
-				left: 0;
-				z-index: 1000;
-			}
-
-			> .powered-by {
-				padding: 28px;
-				font-size: 14px;
-				text-align: center;
-				border-top: 1px solid var(--divider);
-
-				> small {
-					display: block;
-					margin-top: 8px;
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-}
-</style>
-
-<style lang="scss">
-</style>
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
deleted file mode 100644
index 275008a8f8..0000000000
--- a/packages/client/src/ui/visitor/b.vue
+++ /dev/null
@@ -1,248 +0,0 @@
-<template>
-<div class="mk-app">
-	<a v-if="root" href="https://github.com/misskey-dev/misskey" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--panel); color:var(--fg); position: fixed; z-index: 10; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
-
-	<div v-if="!narrow && !root" class="side">
-		<XKanban class="kanban" full/>
-	</div>
-
-	<div class="main">
-		<XKanban v-if="narrow && !root" class="banner" :powered-by="root"/>
-
-		<div class="contents">
-			<XHeader v-if="!root" class="header" :info="pageInfo"/>
-			<main>
-				<RouterView/>
-			</main>
-			<div v-if="!root" class="powered-by">
-				<b><MkA to="/">{{ host }}</MkA></b>
-				<small>Powered by <a href="https://github.com/misskey-dev/misskey" target="_blank">Misskey</a></small>
-			</div>
-		</div>
-	</div>
-
-	<transition :name="$store.state.animation ? 'tray-back' : ''">
-		<div
-			v-if="showMenu"
-			class="menu-back _modalBg"
-			@click="showMenu = false"
-			@touchstart.passive="showMenu = false"
-		></div>
-	</transition>
-
-	<transition :name="$store.state.animation ? 'tray' : ''">
-		<div v-if="showMenu" class="menu">
-			<MkA to="/" class="link" active-class="active"><i class="ti ti-home icon"></i>{{ $ts.home }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ $ts.explore }}</MkA>
-			<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ $ts.featured }}</MkA>
-			<MkA to="/channels" class="link" active-class="active"><i class="ti ti-device-tv icon"></i>{{ $ts.channel }}</MkA>
-			<div class="action">
-				<button class="_buttonPrimary" @click="signup()">{{ $ts.signup }}</button>
-				<button class="_button" @click="signin()">{{ $ts.login }}</button>
-			</div>
-		</div>
-	</transition>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { ComputedRef, onMounted, provide } from 'vue';
-import XHeader from './header.vue';
-import XKanban from './kanban.vue';
-import { host, instanceName } from '@/config';
-import { search } from '@/scripts/search';
-import * as os from '@/os';
-import MkPagination from '@/components/MkPagination.vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
-import MkButton from '@/components/MkButton.vue';
-import { ColdDeviceStorage, defaultStore } from '@/store';
-import { mainRouter } from '@/router';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-
-const DESKTOP_THRESHOLD = 1100;
-
-let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
-
-provide('router', mainRouter);
-provideMetadataReceiver((info) => {
-	pageMetadata = info;
-	if (pageMetadata.value) {
-		document.title = `${pageMetadata.value.title} | ${instanceName}`;
-	}
-});
-
-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,
-	};
-});
-
-const root = $computed(() => mainRouter.currentRoute.value.name === 'index');
-
-os.api('meta', { detail: true }).then(res => {
-	meta = res;
-});
-
-function signin() {
-	os.popup(XSigninDialog, {
-		autoSet: true,
-	}, {}, 'closed');
-}
-
-function signup() {
-	os.popup(XSignupDialog, {
-		autoSet: true,
-	}, {}, 'closed');
-}
-
-onMounted(() => {
-	if (!isDesktop) {
-		window.addEventListener('resize', () => {
-			if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop = true;
-		}, { passive: true });
-	}
-});
-
-defineExpose({
-	showMenu: $$(showMenu),
-});
-</script>
-
-<style>
-.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
-</style>
-
-<style lang="scss" scoped>
-.tray-enter-active,
-.tray-leave-active {
-	opacity: 1;
-	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.tray-enter-from,
-.tray-leave-active {
-	opacity: 0;
-	transform: translateX(-240px);
-}
-
-.tray-back-enter-active,
-.tray-back-leave-active {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.tray-back-enter-from,
-.tray-back-leave-active {
-	opacity: 0;
-}
-
-.mk-app {
-	display: flex;
-	min-height: 100vh;
-	background-position: center;
-	background-size: cover;
-	background-attachment: fixed;
-
-	> .side {
-		width: 500px;
-		height: 100vh;
-
-		> .kanban {
-			position: fixed;
-			top: 0;
-			left: 0;
-			width: 500px;
-			height: 100vh;
-			overflow: auto;
-		}
-	}
-
-	> .main {
-		flex: 1;
-		min-width: 0;
-
-		> .banner {
-		}
-
-		> .contents {
-			position: relative;
-			z-index: 1;
-
-			> .powered-by {
-				padding: 28px;
-				font-size: 14px;
-				text-align: center;
-				border-top: 1px solid var(--divider);
-
-				> small {
-					display: block;
-					margin-top: 8px;
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-
-	> .menu-back {
-		position: fixed;
-		z-index: 1001;
-		top: 0;
-		left: 0;
-		width: 100vw;
-		height: 100vh;
-	}
-
-	> .menu {
-		position: fixed;
-		z-index: 1001;
-		top: 0;
-		left: 0;
-		width: 240px;
-		height: 100vh;
-		background: var(--panel);
-
-		> .link {
-			display: block;
-			padding: 16px;
-
-			> .icon {
-				margin-right: 1em;
-			}
-		}
-
-		> .action {
-			padding: 16px;
-
-			> button {
-				display: block;
-				width: 100%;
-				padding: 10px;
-				box-sizing: border-box;
-				text-align: center;
-				border-radius: 999px;
-
-				&._button {
-					background: var(--panel);
-				}
-
-				&:first-child {
-					margin-bottom: 16px;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/visitor/header.vue b/packages/client/src/ui/visitor/header.vue
deleted file mode 100644
index 7300b12a75..0000000000
--- a/packages/client/src/ui/visitor/header.vue
+++ /dev/null
@@ -1,228 +0,0 @@
-<template>
-<div class="sqxihjet">
-	<div v-if="narrow === false" class="wide">
-		<div class="content">
-			<MkA to="/" class="link" active-class="active"><i class="ti ti-home icon"></i>{{ $ts.home }}</MkA>
-			<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ $ts.explore }}</MkA>
-			<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ $ts.featured }}</MkA>
-			<MkA to="/channels" class="link" active-class="active"><i class="ti ti-device-tv icon"></i>{{ $ts.channel }}</MkA>
-			<div v-if="info" class="page active link">
-				<div class="title">
-					<i v-if="info.icon" class="icon" :class="info.icon"></i>
-					<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
-					<span v-if="info.title" class="text">{{ info.title }}</span>
-					<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
-				</div>
-				<button v-if="info.action" class="_button action" @click.stop="info.action.handler"><!-- TODO --></button>
-			</div>
-			<div class="right">
-				<button class="_button search" @click="search()"><i class="ti ti-search icon"></i><span>{{ $ts.search }}</span></button>
-				<button class="_buttonPrimary signup" @click="signup()">{{ $ts.signup }}</button>
-				<button class="_button login" @click="signin()">{{ $ts.login }}</button>
-			</div>
-		</div>
-	</div>
-	<div v-else-if="narrow === true" class="narrow">
-		<button class="menu _button" @click="$parent.showMenu = true">
-			<i class="ti ti-menu-2 icon"></i>
-		</button>
-		<div v-if="info" class="title">
-			<i v-if="info.icon" class="icon" :class="info.icon"></i>
-			<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
-			<span v-if="info.title" class="text">{{ info.title }}</span>
-			<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
-		</div>
-		<button v-if="info && info.action" class="action _button" @click.stop="info.action.handler">
-			<!-- TODO -->
-		</button>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
-import * as os from '@/os';
-import { search } from '@/scripts/search';
-
-export default defineComponent({
-	props: {
-		info: {
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			narrow: null,
-			showMenu: false,
-		};
-	},
-
-	mounted() {
-		this.narrow = this.$el.clientWidth < 1300;
-	},
-
-	methods: {
-		signin() {
-			os.popup(XSigninDialog, {
-				autoSet: true,
-			}, {}, 'closed');
-		},
-
-		signup() {
-			os.popup(XSignupDialog, {
-				autoSet: true,
-			}, {}, 'closed');
-		},
-
-		search,
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.sqxihjet {
-	$height: 60px;
-	position: sticky;
-	top: 0;
-	left: 0;
-	z-index: 1000;
-	line-height: $height;
-	-webkit-backdrop-filter: var(--blur, blur(32px));
-	backdrop-filter: var(--blur, blur(32px));
-	background-color: var(--X16);
-
-	> .wide {
-		> .content {
-			max-width: 1400px;
-			margin: 0 auto;
-			display: flex;
-			align-items: center;
-
-			> .link {
-				$line: 3px;
-				display: inline-block;
-				padding: 0 16px;
-				line-height: $height - ($line * 2);
-				border-top: solid $line transparent;
-				border-bottom: solid $line transparent;
-
-				> .icon {
-					margin-right: 0.5em;
-				}
-
-				&.page {
-					border-bottom-color: var(--accent);
-				}
-			}
-
-			> .page {
-				> .title {
-					display: inline-block;
-					vertical-align: bottom;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					position: relative;
-
-					> .icon + .text {
-						margin-left: 8px;
-					}
-
-					> .avatar {
-						$size: 32px;
-						display: inline-block;
-						width: $size;
-						height: $size;
-						vertical-align: middle;
-						margin-right: 8px;
-						pointer-events: none;
-					}
-
-					&._button {
-						&:hover {
-							color: var(--fgHighlighted);
-						}
-					}
-
-					&.selected {
-						box-shadow: 0 -2px 0 0 var(--accent) inset;
-						color: var(--fgHighlighted);
-					}
-				}
-
-				> .action {
-					padding: 0 0 0 16px;
-				}
-			}
-
-			> .right {
-				margin-left: auto;
-
-				> .search {
-					background: var(--bg);
-					border-radius: 999px;
-					width: 230px;
-					line-height: $height - 20px;
-					margin-right: 16px;
-					text-align: left;
-
-					> * {
-						opacity: 0.7;
-					}
-
-					> .icon {
-						padding: 0 16px;
-					}
-				}
-
-				> .signup {
-					border-radius: 999px;
-					padding: 0 24px;
-					line-height: $height - 20px;
-				}
-
-				> .login {
-					padding: 0 16px;
-				}
-			}
-		}
-	}
-
-	> .narrow {
-		display: flex;
-
-		> .menu,
-		> .action {
-			width: $height;
-			height: $height;
-			font-size: 20px;
-		}
-
-		> .title {
-			flex: 1;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			position: relative;
-			text-align: center;
-
-			> .icon + .text {
-				margin-left: 8px;
-			}
-
-			> .avatar {
-				$size: 32px;
-				display: inline-block;
-				width: $size;
-				height: $size;
-				vertical-align: middle;
-				margin-right: 8px;
-				pointer-events: none;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/visitor/kanban.vue b/packages/client/src/ui/visitor/kanban.vue
deleted file mode 100644
index 51e47f277d..0000000000
--- a/packages/client/src/ui/visitor/kanban.vue
+++ /dev/null
@@ -1,257 +0,0 @@
-<!-- eslint-disable vue/no-v-html -->
-<template>
-<div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ $instance.backgroundImageUrl })` }">
-	<div class="back" :class="{ transparent }"></div>
-	<div class="contents">
-		<div class="wrapper">
-			<h1 v-if="meta" :class="{ full }">
-				<MkA to="/" class="link"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl" alt="logo"><span v-else class="text">{{ instanceName }}</span></MkA>
-			</h1>
-			<template v-if="full">
-				<div v-if="meta" class="about">
-					<div class="desc" v-html="meta.description || $ts.introMisskey"></div>
-				</div>
-				<div class="action">
-					<button class="_buttonPrimary" @click="signup()">{{ $ts.signup }}</button>
-					<button class="_button" @click="signin()">{{ $ts.login }}</button>
-				</div>
-				<div class="announcements panel">
-					<header>{{ $ts.announcements }}</header>
-					<MkPagination v-slot="{items}" :pagination="announcements" class="list">
-						<section v-for="announcement in items" :key="announcement.id" class="item">
-							<div class="title">{{ announcement.title }}</div>
-							<div class="content">
-								<Mfm :text="announcement.text"/>
-								<img v-if="announcement.imageUrl" :src="announcement.imageUrl" alt="announcement image"/>
-							</div>
-						</section>
-					</MkPagination>
-				</div>
-				<div v-if="poweredBy" class="powered-by">
-					<b><MkA to="/">{{ host }}</MkA></b>
-					<small>Powered by <a href="https://github.com/misskey-dev/misskey" target="_blank">Misskey</a></small>
-				</div>
-			</template>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, defineAsyncComponent } from 'vue';
-import { host, instanceName } from '@/config';
-import * as os from '@/os';
-import MkPagination from '@/components/MkPagination.vue';
-import XSigninDialog from '@/components/MkSigninDialog.vue';
-import XSignupDialog from '@/components/MkSignupDialog.vue';
-import MkButton from '@/components/MkButton.vue';
-
-export default defineComponent({
-	components: {
-		MkPagination,
-		MkButton,
-	},
-
-	props: {
-		full: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		transparent: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		poweredBy: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-
-	data() {
-		return {
-			host,
-			instanceName,
-			pageInfo: null,
-			meta: null,
-			narrow: window.innerWidth < 1280,
-			announcements: {
-				endpoint: 'announcements',
-				limit: 10,
-			},
-		};
-	},
-
-	created() {
-		os.api('meta', { detail: true }).then(meta => {
-			this.meta = meta;
-		});
-	},
-
-	methods: {
-		signin() {
-			os.popup(XSigninDialog, {
-				autoSet: true,
-			}, {}, 'closed');
-		},
-
-		signup() {
-			os.popup(XSignupDialog, {
-				autoSet: true,
-			}, {}, 'closed');
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.rwqkcmrc {
-	position: relative;
-	text-align: center;
-	background-position: center;
-	background-size: cover;
-	// TODO: パララックスにしたい
-
-	> .back {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background: rgba(0, 0, 0, 0.3);
-
-		&.transparent {
-			-webkit-backdrop-filter: var(--blur, blur(12px));
-			backdrop-filter: var(--blur, blur(12px));
-		}
-	}
-
-	> .contents {
-		position: relative;
-		z-index: 1;
-		height: inherit;
-		overflow: auto;
-
-		> .wrapper {
-			max-width: 380px;
-			padding: 0 16px;
-			box-sizing: border-box;
-			margin: 0 auto;
-
-			> .panel {
-				-webkit-backdrop-filter: var(--blur, blur(8px));
-				backdrop-filter: var(--blur, blur(8px));
-				background: rgba(0, 0, 0, 0.5);
-				border-radius: var(--radius);
-
-				&, * {
-					color: #fff !important;
-				}
-			}
-
-			> h1 {
-				display: block;
-				margin: 0;
-				padding: 32px 0 32px 0;
-				color: #fff;
-
-				&.full {
-					padding: 64px 0 0 0;
-
-					> .link {
-						> ::v-deep(.logo) {
-							max-height: 130px;
-						}
-					}
-				}
-
-				> .link {
-					display: block;
-
-					> ::v-deep(.logo) {
-						vertical-align: bottom;
-						max-height: 100px;
-					}
-				}
-			}
-
-			> .about {
-				display: block;
-				margin: 24px 0;
-				text-align: center;
-				box-sizing: border-box;
-				text-shadow: 0 0 8px black;
-				color: #fff;
-			}
-
-			> .action {
-				> button {
-					display: block;
-					width: 100%;
-					padding: 10px;
-					box-sizing: border-box;
-					text-align: center;
-					border-radius: 999px;
-
-					&._button {
-						background: var(--panel);
-					}
-
-					&:first-child {
-						margin-bottom: 16px;
-					}
-				}
-			}
-
-			> .announcements {
-				margin: 32px 0;
-				text-align: left;
-
-				> header {
-					padding: 12px 16px;
-					border-bottom: solid 1px rgba(255, 255, 255, 0.5);
-				}
-
-				> .list {
-					max-height: 300px;
-					overflow: auto;
-
-					> .item {
-						padding: 12px 16px;
-
-						& + .item {
-							border-top: solid 1px rgba(255, 255, 255, 0.5);
-						}
-
-						> .title {
-							font-weight: bold;
-						}
-
-						> .content {
-							> img {
-								max-width: 100%;
-							}
-						}
-					}
-				}
-			}
-
-			> .powered-by {
-				padding: 28px;
-				font-size: 14px;
-				text-align: center;
-				border-top: 1px solid rgba(255, 255, 255, 0.5);
-				color: #fff;
-
-				> small {
-					display: block;
-					margin-top: 8px;
-					opacity: 0.5;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/ui/zen.vue b/packages/client/src/ui/zen.vue
deleted file mode 100644
index 84c96a1dae..0000000000
--- a/packages/client/src/ui/zen.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-<div class="mk-app">
-	<RouterView/>
-
-	<XCommon/>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { provide, ComputedRef } from 'vue';
-import XCommon from './_common_/common.vue';
-import { mainRouter } from '@/router';
-import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
-import { instanceName } from '@/config';
-
-let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
-
-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 {
-	min-height: 100dvh;
-	box-sizing: border-box;
-}
-</style>
diff --git a/packages/client/src/widgets/activity.calendar.vue b/packages/client/src/widgets/activity.calendar.vue
deleted file mode 100644
index 84f6af1c13..0000000000
--- a/packages/client/src/widgets/activity.calendar.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-<svg viewBox="0 0 21 7">
-	<rect v-for="record in activity" class="day"
-		width="1" height="1"
-		:x="record.x" :y="record.date.weekday"
-		rx="1" ry="1"
-		fill="transparent">
-		<title>{{ record.date.year }}/{{ record.date.month + 1 }}/{{ record.date.day }}</title>
-	</rect>
-	<rect v-for="record in activity" class="day"
-		:width="record.v" :height="record.v"
-		:x="record.x + ((1 - record.v) / 2)" :y="record.date.weekday + ((1 - record.v) / 2)"
-		rx="1" ry="1"
-		:fill="record.color"
-		style="pointer-events: none;"/>
-	<rect class="today"
-		width="1" height="1"
-		:x="activity[0].x" :y="activity[0].date.weekday"
-		rx="1" ry="1"
-		fill="none"
-		stroke-width="0.1"
-		stroke="#f73520"/>
-</svg>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-	activity: any[]
-}>();
-
-for (const d of props.activity) {
-	d.total = d.notes + d.replies + d.renotes;
-}
-const peak = Math.max(...props.activity.map(d => d.total));
-
-const now = new Date();
-const year = now.getFullYear();
-const month = now.getMonth();
-const day = now.getDate();
-
-let x = 20;
-props.activity.slice().forEach((d, i) => {
-	d.x = x;
-
-	const date = new Date(year, month, day - i);
-	d.date = {
-		year: date.getFullYear(),
-		month: date.getMonth(),
-		day: date.getDate(),
-		weekday: date.getDay(),
-	};
-
-	d.v = peak === 0 ? 0 : d.total / (peak / 2);
-	if (d.v > 1) d.v = 1;
-	const ch = d.date.weekday === 0 || d.date.weekday === 6 ? 275 : 170;
-	const cs = d.v * 100;
-	const cl = 15 + ((1 - d.v) * 80);
-	d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
-
-	if (d.date.weekday === 0) x--;
-});
-</script>
-
-<style lang="scss" scoped>
-svg {
-	display: block;
-	padding: 16px;
-	width: 100%;
-	box-sizing: border-box;
-
-	> rect {
-		transform-origin: center;
-
-		&.day {
-			&:hover {
-				fill: rgba(#000, 0.05);
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/activity.chart.vue b/packages/client/src/widgets/activity.chart.vue
deleted file mode 100644
index b61e419f94..0000000000
--- a/packages/client/src/widgets/activity.chart.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" @mousedown.prevent="onMousedown">
-	<polyline
-		:points="pointsNote"
-		fill="none"
-		stroke-width="1"
-		stroke="#41ddde"/>
-	<polyline
-		:points="pointsReply"
-		fill="none"
-		stroke-width="1"
-		stroke="#f7796c"/>
-	<polyline
-		:points="pointsRenote"
-		fill="none"
-		stroke-width="1"
-		stroke="#a1de41"/>
-	<polyline
-		:points="pointsTotal"
-		fill="none"
-		stroke-width="1"
-		stroke="#555"
-		stroke-dasharray="2 2"/>
-</svg>
-</template>
-
-<script lang="ts" setup>
-const props = defineProps<{
-	activity: any[]
-}>();
-
-let viewBoxX: number = $ref(147);
-let viewBoxY: number = $ref(60);
-let zoom: number = $ref(1);
-let pos: number = $ref(0);
-let pointsNote: any = $ref(null);
-let pointsReply: any = $ref(null);
-let pointsRenote: any = $ref(null);
-let pointsTotal: any = $ref(null);
-
-function dragListen(fn) {
-	window.addEventListener('mousemove', fn);
-	window.addEventListener('mouseleave', dragClear.bind(null, fn));
-	window.addEventListener('mouseup', dragClear.bind(null, fn));
-}
-
-function dragClear(fn) {
-	window.removeEventListener('mousemove', fn);
-	window.removeEventListener('mouseleave', dragClear);
-	window.removeEventListener('mouseup', dragClear);
-}
-
-function onMousedown(ev) {
-	const clickX = ev.clientX;
-	const clickY = ev.clientY;
-	const baseZoom = zoom;
-	const basePos = pos;
-
-	// 動かした時
-	dragListen(me => {
-		let moveLeft = me.clientX - clickX;
-		let moveTop = me.clientY - clickY;
-
-		zoom = Math.max(1, baseZoom + (-moveTop / 20));
-		pos = Math.min(0, basePos + moveLeft);
-		if (pos < -(((props.activity.length - 1) * zoom) - viewBoxX)) pos = -(((props.activity.length - 1) * zoom) - viewBoxX);
-
-		render();
-	});
-}
-
-function render() {
-	const peak = Math.max(...props.activity.map(d => d.total));
-	if (peak !== 0) {
-		const activity = props.activity.slice().reverse();
-		pointsNote = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.notes / peak)) * viewBoxY}`).join(' ');
-		pointsReply = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.replies / peak)) * viewBoxY}`).join(' ');
-		pointsRenote = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.renotes / peak)) * viewBoxY}`).join(' ');
-		pointsTotal = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.total / peak)) * viewBoxY}`).join(' ');
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-svg {
-	display: block;
-	padding: 16px;
-	width: 100%;
-	box-sizing: border-box;
-	cursor: all-scroll;
-}
-</style>
diff --git a/packages/client/src/widgets/activity.vue b/packages/client/src/widgets/activity.vue
deleted file mode 100644
index 238a05ca09..0000000000
--- a/packages/client/src/widgets/activity.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" class="mkw-activity">
-	<template #header><i class="ti ti-chart-line"></i>{{ i18n.ts._widgets.activity }}</template>
-	<template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
-
-	<div>
-		<MkLoading v-if="fetching"/>
-		<template v-else>
-			<XCalendar v-show="widgetProps.view === 0" :activity="[].concat(activity)"/>
-			<XChart v-show="widgetProps.view === 1" :activity="[].concat(activity)"/>
-		</template>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import XCalendar from './activity.calendar.vue';
-import XChart from './activity.chart.vue';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-
-const name = 'activity';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	view: {
-		type: 'number' as const,
-		default: 0,
-		hidden: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const activity = ref(null);
-const fetching = ref(true);
-
-const toggleView = () => {
-	if (widgetProps.view === 1) {
-		widgetProps.view = 0;
-	} else {
-		widgetProps.view++;
-	}
-	save();
-};
-
-os.apiGet('charts/user/notes', {
-	userId: $i.id,
-	span: 'day',
-	limit: 7 * 21,
-}).then(res => {
-	activity.value = res.diffs.normal.map((_, i) => ({
-		total: res.diffs.normal[i] + res.diffs.reply[i] + res.diffs.renote[i],
-		notes: res.diffs.normal[i],
-		replies: res.diffs.reply[i],
-		renotes: res.diffs.renote[i],
-	}));
-	fetching.value = false;
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
diff --git a/packages/client/src/widgets/aichan.vue b/packages/client/src/widgets/aichan.vue
deleted file mode 100644
index 828490fd9c..0000000000
--- a/packages/client/src/widgets/aichan.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
-<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-aichan">
-	<iframe ref="live2d" class="dedjhjmo" src="https://misskey-dev.github.io/mascot-web/?scale=1.5&y=1.1&eyeY=100" @click="touched"></iframe>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-
-const name = 'ai';
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const live2d = ref<HTMLIFrameElement>();
-
-const touched = () => {
-	//if (this.live2d) this.live2d.changeExpression('gurugurume');
-};
-
-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);
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.dedjhjmo {
-	width: 100%;
-	height: 350px;
-	border: none;
-	pointer-events: none;
-}
-</style>
diff --git a/packages/client/src/widgets/aiscript.vue b/packages/client/src/widgets/aiscript.vue
deleted file mode 100644
index 4009edb8b8..0000000000
--- a/packages/client/src/widgets/aiscript.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript">
-	<template #header><i class="ti ti-terminal-2"></i>{{ i18n.ts._widgets.aiscript }}</template>
-
-	<div class="uylguesu _monospace">
-		<textarea v-model="widgetProps.script" placeholder="(1 + 1)"></textarea>
-		<button class="_buttonPrimary" @click="run">RUN</button>
-		<div class="logs">
-			<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
-		</div>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { AiScript, parse, utils } from '@syuilo/aiscript';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { createAiScriptEnv } from '@/scripts/aiscript/api';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-
-const name = 'aiscript';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	script: {
-		type: 'string' as const,
-		multiline: true,
-		default: '(1 + 1)',
-		hidden: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const logs = ref<{
-	id: string;
-	text: string;
-	print: boolean;
-}[]>([]);
-
-const run = async () => {
-	logs.value = [];
-	const aiscript = new AiScript(createAiScriptEnv({
-		storageKey: 'widget',
-		token: $i?.token,
-	}), {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					ok(a);
-				});
-			});
-		},
-		out: (value) => {
-			logs.value.push({
-				id: Math.random().toString(),
-				text: value.type === 'str' ? value.value : utils.valToString(value),
-				print: true,
-			});
-		},
-		log: (type, params) => {
-			switch (type) {
-				case 'end': logs.value.push({
-					id: Math.random().toString(),
-					text: utils.valToString(params.val, true),
-					print: false,
-				}); break;
-				default: break;
-			}
-		},
-	});
-
-	let ast;
-	try {
-		ast = parse(widgetProps.script);
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			text: 'Syntax error :(',
-		});
-		return;
-	}
-	try {
-		await aiscript.exec(ast);
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			text: err,
-		});
-	}
-};
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.uylguesu {
-	text-align: right;
-
-	> textarea {
-		display: block;
-		width: 100%;
-		max-width: 100%;
-		min-width: 100%;
-		padding: 16px;
-		color: var(--fg);
-		background: transparent;
-		border: none;
-		border-bottom: solid 0.5px var(--divider);
-		border-radius: 0;
-		box-sizing: border-box;
-		font: inherit;
-
-		&:focus-visible {
-			outline: none;
-		}
-	}
-
-	> button {
-		display: inline-block;
-		margin: 8px;
-		padding: 0 10px;
-		height: 28px;
-		outline: none;
-		border-radius: 4px;
-
-		&:disabled {
-			opacity: 0.7;
-			cursor: default;
-		}
-	}
-
-	> .logs {
-		border-top: solid 0.5px var(--divider);
-		text-align: left;
-		padding: 16px;
-
-		&:empty {
-			display: none;
-		}
-
-		> .log {
-			&:not(.print) {
-				opacity: 0.7;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/button.vue b/packages/client/src/widgets/button.vue
deleted file mode 100644
index f0148d7f4e..0000000000
--- a/packages/client/src/widgets/button.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-<div class="mkw-button">
-	<MkButton :primary="widgetProps.colored" full @click="run">
-		{{ widgetProps.label }}
-	</MkButton>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { AiScript, parse, utils } from '@syuilo/aiscript';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { createAiScriptEnv } from '@/scripts/aiscript/api';
-import { $i } from '@/account';
-import MkButton from '@/components/MkButton.vue';
-
-const name = 'button';
-
-const widgetPropsDef = {
-	label: {
-		type: 'string' as const,
-		default: 'BUTTON',
-	},
-	colored: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	script: {
-		type: 'string' as const,
-		multiline: true,
-		default: 'Mk:dialog("hello" "world")',
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const run = async () => {
-	const aiscript = new AiScript(createAiScriptEnv({
-		storageKey: 'widget',
-		token: $i?.token,
-	}), {
-		in: (q) => {
-			return new Promise(ok => {
-				os.inputText({
-					title: q,
-				}).then(({ canceled, result: a }) => {
-					ok(a);
-				});
-			});
-		},
-		out: (value) => {
-			// nop
-		},
-		log: (type, params) => {
-			// nop
-		},
-	});
-
-	let ast;
-	try {
-		ast = parse(widgetProps.script);
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			text: 'Syntax error :(',
-		});
-		return;
-	}
-	try {
-		await aiscript.exec(ast);
-	} catch (err) {
-		os.alert({
-			type: 'error',
-			text: err,
-		});
-	}
-};
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.mkw-button {
-}
-</style>
diff --git a/packages/client/src/widgets/calendar.vue b/packages/client/src/widgets/calendar.vue
deleted file mode 100644
index 99bd36e2fc..0000000000
--- a/packages/client/src/widgets/calendar.vue
+++ /dev/null
@@ -1,213 +0,0 @@
-<template>
-<div class="mkw-calendar" :class="{ _panel: !widgetProps.transparent }">
-	<div class="calendar" :class="{ isHoliday }">
-		<p class="month-and-year">
-			<span class="year">{{ $t('yearX', { year }) }}</span>
-			<span class="month">{{ $t('monthX', { month }) }}</span>
-		</p>
-		<p v-if="month === 1 && day === 1" class="day">🎉{{ $t('dayX', { day }) }}<span style="display: inline-block; transform: scaleX(-1);">🎉</span></p>
-		<p v-else class="day">{{ $t('dayX', { day }) }}</p>
-		<p class="week-day">{{ weekDay }}</p>
-	</div>
-	<div class="info">
-		<div>
-			<p>{{ i18n.ts.today }}: <b>{{ dayP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${dayP}%` }"></div>
-			</div>
-		</div>
-		<div>
-			<p>{{ i18n.ts.thisMonth }}: <b>{{ monthP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${monthP}%` }"></div>
-			</div>
-		</div>
-		<div>
-			<p>{{ i18n.ts.thisYear }}: <b>{{ yearP.toFixed(1) }}%</b></p>
-			<div class="meter">
-				<div class="val" :style="{ width: `${yearP}%` }"></div>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { i18n } from '@/i18n';
-import { useInterval } from '@/scripts/use-interval';
-
-const name = 'calendar';
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const year = ref(0);
-const month = ref(0);
-const day = ref(0);
-const weekDay = ref('');
-const yearP = ref(0);
-const monthP = ref(0);
-const dayP = ref(0);
-const isHoliday = ref(false);
-const tick = () => {
-	const now = new Date();
-	const nd = now.getDate();
-	const nm = now.getMonth();
-	const ny = now.getFullYear();
-
-	year.value = ny;
-	month.value = nm + 1;
-	day.value = nd;
-	weekDay.value = [
-		i18n.ts._weekday.sunday,
-		i18n.ts._weekday.monday,
-		i18n.ts._weekday.tuesday,
-		i18n.ts._weekday.wednesday,
-		i18n.ts._weekday.thursday,
-		i18n.ts._weekday.friday,
-		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 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();
-
-	dayP.value = dayNumer / dayDenom * 100;
-	monthP.value = monthNumer / monthDenom * 100;
-	yearP.value = yearNumer / yearDenom * 100;
-
-	isHoliday.value = now.getDay() === 0 || now.getDay() === 6;
-};
-
-useInterval(tick, 1000, {
-	immediate: true,
-	afterMounted: false,
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.mkw-calendar {
-	padding: 16px 0;
-
-	&:after {
-		content: "";
-		display: block;
-		clear: both;
-	}
-
-	> .calendar {
-		float: left;
-		width: 60%;
-		text-align: center;
-
-		&.isHoliday {
-			> .day {
-				color: #ef95a0;
-			}
-		}
-
-		> .month-and-year, > .week-day {
-			margin: 0;
-			line-height: 18px;
-			font-size: 0.9em;
-
-			> .year, > .month {
-				margin: 0 4px;
-			}
-		}
-
-		> .day {
-			margin: 10px 0;
-			line-height: 32px;
-			font-size: 1.75em;
-		}
-	}
-
-	> .info {
-		display: block;
-		float: left;
-		width: 40%;
-		padding: 0 16px 0 0;
-		box-sizing: border-box;
-
-		> div {
-			margin-bottom: 8px;
-
-			&:last-child {
-				margin-bottom: 4px;
-			}
-
-			> p {
-				margin: 0 0 2px 0;
-				font-size: 0.75em;
-				line-height: 18px;
-				opacity: 0.8;
-
-				> b {
-					margin-left: 2px;
-				}
-			}
-
-			> .meter {
-				width: 100%;
-				overflow: hidden;
-				background: var(--X11);
-				border-radius: 8px;
-
-				> .val {
-					height: 4px;
-					transition: width .3s cubic-bezier(0.23, 1, 0.32, 1);
-				}
-			}
-
-			&:nth-child(1) {
-				> .meter > .val {
-					background: #f7796c;
-				}
-			}
-
-			&:nth-child(2) {
-				> .meter > .val {
-					background: #a1de41;
-				}
-			}
-
-			&:nth-child(3) {
-				> .meter > .val {
-					background: #41ddde;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/clock.vue b/packages/client/src/widgets/clock.vue
deleted file mode 100644
index dc99b6631e..0000000000
--- a/packages/client/src/widgets/clock.vue
+++ /dev/null
@@ -1,203 +0,0 @@
-<template>
-<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-clock">
-	<div class="vubelbmv" :class="widgetProps.size">
-		<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label a abbrev">{{ tzAbbrev }}</div>
-		<MkAnalogClock
-			class="clock"
-			:thickness="widgetProps.thickness"
-			:offset="tzOffset"
-			:graduations="widgetProps.graduations"
-			:fade-graduations="widgetProps.fadeGraduations"
-			:twentyfour="widgetProps.twentyFour"
-			:s-animation="widgetProps.sAnimation"
-		/>
-		<MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :show-s="false" :offset="tzOffset"/>
-		<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkAnalogClock from '@/components/MkAnalogClock.vue';
-import MkDigitalClock from '@/components/MkDigitalClock.vue';
-import { timezones } from '@/scripts/timezones';
-import { i18n } from '@/i18n';
-
-const name = 'clock';
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	size: {
-		type: 'radio' as const,
-		default: 'medium',
-		options: [{
-			value: 'small', label: i18n.ts.small,
-		}, {
-			value: 'medium', label: i18n.ts.medium,
-		}, {
-			value: 'large', label: i18n.ts.large,
-		}],
-	},
-	thickness: {
-		type: 'radio' as const,
-		default: 0.2,
-		options: [{
-			value: 0.1, label: 'thin',
-		}, {
-			value: 0.2, label: 'medium',
-		}, {
-			value: 0.3, label: 'thick',
-		}],
-	},
-	graduations: {
-		type: 'radio' as const,
-		default: 'numbers',
-		options: [{
-			value: 'none', label: 'None',
-		}, {
-			value: 'dots', label: 'Dots',
-		}, {
-			value: 'numbers', label: 'Numbers',
-		}],
-	},
-	fadeGraduations: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	sAnimation: {
-		type: 'radio' as const,
-		default: 'elastic',
-		options: [{
-			value: 'none', label: 'None',
-		}, {
-			value: 'elastic', label: 'Elastic',
-		}, {
-			value: 'easeOut', label: 'Ease out',
-		}],
-	},
-	twentyFour: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	label: {
-		type: 'radio' as const,
-		default: 'none',
-		options: [{
-			value: 'none', label: 'None',
-		}, {
-			value: 'time', label: 'Time',
-		}, {
-			value: 'tz', label: 'TZ',
-		}, {
-			value: 'timeAndTz', label: 'Time + TZ',
-		}],
-	},
-	timezone: {
-		type: 'enum' as const,
-		default: null,
-		enum: [...timezones.map((tz) => ({
-			label: tz.name,
-			value: tz.name.toLowerCase(),
-		})), {
-			label: '(auto)',
-			value: null,
-		}],
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const tzAbbrev = $computed(() => (widgetProps.timezone === null
-	? timezones.find((tz) => tz.name.toLowerCase() === Intl.DateTimeFormat().resolvedOptions().timeZone.toLowerCase())?.abbrev
-	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.abbrev) ?? '?');
-
-const tzOffset = $computed(() => widgetProps.timezone === null
-	? 0 - new Date().getTimezoneOffset()
-	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.offset ?? 0);
-
-const tzOffsetLabel = $computed(() => (tzOffset >= 0 ? '+' : '-') + Math.floor(tzOffset / 60).toString().padStart(2, '0') + ':' + (tzOffset % 60).toString().padStart(2, '0'));
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.vubelbmv {
-	position: relative;
-
-	> .label {
-		position: absolute;
-		opacity: 0.7;
-
-		&.a {
-			top: 14px;
-			left: 14px;
-		}
-
-		&.b {
-			top: 14px;
-			right: 14px;
-		}
-
-		&.c {
-			bottom: 14px;
-			left: 14px;
-		}
-
-		&.d {
-			bottom: 14px;
-			right: 14px;
-		}
-	}
-
-	> .clock {
-		margin: auto;
-	}
-
-	&.small {
-		padding: 12px;
-
-		> .clock {
-			height: 100px;
-		}
-	}
-
-	&.medium {
-		padding: 14px;
-
-		> .clock {
-			height: 150px;
-		}
-	}
-
-	&.large {
-		padding: 16px;
-
-		> .clock {
-			height: 200px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/digital-clock.vue b/packages/client/src/widgets/digital-clock.vue
deleted file mode 100644
index d2bfd523f3..0000000000
--- a/packages/client/src/widgets/digital-clock.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-<div class="mkw-digitalClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
-	<div v-if="widgetProps.showLabel" class="label">{{ tzAbbrev }}</div>
-	<div class="time">
-		<MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset"/>
-	</div>
-	<div v-if="widgetProps.showLabel" class="label">{{ tzOffsetLabel }}</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onUnmounted, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { timezones } from '@/scripts/timezones';
-import MkDigitalClock from '@/components/MkDigitalClock.vue';
-
-const name = 'digitalClock';
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	fontSize: {
-		type: 'number' as const,
-		default: 1.5,
-		step: 0.1,
-	},
-	showMs: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	showLabel: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	timezone: {
-		type: 'enum' as const,
-		default: null,
-		enum: [...timezones.map((tz) => ({
-			label: tz.name,
-			value: tz.name.toLowerCase(),
-		})), {
-			label: '(auto)',
-			value: null,
-		}],
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const tzAbbrev = $computed(() => (widgetProps.timezone === null
-	? timezones.find((tz) => tz.name.toLowerCase() === Intl.DateTimeFormat().resolvedOptions().timeZone.toLowerCase())?.abbrev
-	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.abbrev) ?? '?');
-
-const tzOffset = $computed(() => widgetProps.timezone === null
-	? 0 - new Date().getTimezoneOffset()
-	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.offset ?? 0);
-
-const tzOffsetLabel = $computed(() => (tzOffset >= 0 ? '+' : '-') + Math.floor(tzOffset / 60).toString().padStart(2, '0') + ':' + (tzOffset % 60).toString().padStart(2, '0'));
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.mkw-digitalClock {
-	padding: 16px 0;
-	text-align: center;
-
-	> .label {
-		font-size: 65%;
-		opacity: 0.7;
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/federation.vue b/packages/client/src/widgets/federation.vue
deleted file mode 100644
index 3374783b0c..0000000000
--- a/packages/client/src/widgets/federation.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" :foldable="foldable" :scrollable="scrollable" class="mkw-federation">
-	<template #header><i class="ti ti-whirl"></i>{{ i18n.ts._widgets.federation }}</template>
-
-	<div class="wbrkwalb">
-		<MkLoading v-if="fetching"/>
-		<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances">
-			<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
-				<img :src="getInstanceIcon(instance)" alt=""/>
-				<div class="body">
-					<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">{{ instance.host }}</a>
-					<p>{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</p>
-				</div>
-				<MkMiniChart class="chart" :src="charts[i].requests.received"/>
-			</div>
-		</transition-group>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
-
-const name = 'federation';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps> & { foldable?: boolean; scrollable?: boolean; }>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; foldable?: boolean; scrollable?: boolean; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-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;
-};
-
-useInterval(fetch, 1000 * 60, {
-	immediate: true,
-	afterMounted: true,
-});
-
-function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
-}
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.wbrkwalb {
-	$bodyTitleHieght: 18px;
-	$bodyInfoHieght: 16px;
-
-	height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
-	overflow: hidden;
-
-	> .instances {
-		.chart-move {
-			transition: transform 1s ease;
-		}
-
-		> .instance {
-			display: flex;
-			align-items: center;
-			padding: 14px 16px;
-			border-bottom: solid 0.5px var(--divider);
-
-			> img {
-				display: block;
-				width: ($bodyTitleHieght + $bodyInfoHieght);
-				height: ($bodyTitleHieght + $bodyInfoHieght);
-				object-fit: cover;
-				border-radius: 4px;
-				margin-right: 8px;
-			}
-
-			> .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;
-					line-height: $bodyTitleHieght;
-				}
-
-				> p {
-					margin: 0;
-					font-size: 75%;
-					opacity: 0.7;
-					line-height: $bodyInfoHieght;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-				}
-			}
-
-			> .chart {
-				height: 30px;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/index.ts b/packages/client/src/widgets/index.ts
deleted file mode 100644
index 39826f13c8..0000000000
--- a/packages/client/src/widgets/index.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { App, defineAsyncComponent } from 'vue';
-
-export default function(app: App) {
-	app.component('MkwMemo', defineAsyncComponent(() => import('./memo.vue')));
-	app.component('MkwNotifications', defineAsyncComponent(() => import('./notifications.vue')));
-	app.component('MkwTimeline', defineAsyncComponent(() => import('./timeline.vue')));
-	app.component('MkwCalendar', defineAsyncComponent(() => import('./calendar.vue')));
-	app.component('MkwRss', defineAsyncComponent(() => import('./rss.vue')));
-	app.component('MkwRssTicker', defineAsyncComponent(() => import('./rss-ticker.vue')));
-	app.component('MkwTrends', defineAsyncComponent(() => import('./trends.vue')));
-	app.component('MkwClock', defineAsyncComponent(() => import('./clock.vue')));
-	app.component('MkwActivity', defineAsyncComponent(() => import('./activity.vue')));
-	app.component('MkwPhotos', defineAsyncComponent(() => import('./photos.vue')));
-	app.component('MkwDigitalClock', defineAsyncComponent(() => import('./digital-clock.vue')));
-	app.component('MkwUnixClock', defineAsyncComponent(() => import('./unix-clock.vue')));
-	app.component('MkwFederation', defineAsyncComponent(() => import('./federation.vue')));
-	app.component('MkwPostForm', defineAsyncComponent(() => import('./post-form.vue')));
-	app.component('MkwSlideshow', defineAsyncComponent(() => import('./slideshow.vue')));
-	app.component('MkwServerMetric', defineAsyncComponent(() => import('./server-metric/index.vue')));
-	app.component('MkwOnlineUsers', defineAsyncComponent(() => import('./online-users.vue')));
-	app.component('MkwJobQueue', defineAsyncComponent(() => import('./job-queue.vue')));
-	app.component('MkwInstanceCloud', defineAsyncComponent(() => import('./instance-cloud.vue')));
-	app.component('MkwButton', defineAsyncComponent(() => import('./button.vue')));
-	app.component('MkwAiscript', defineAsyncComponent(() => import('./aiscript.vue')));
-	app.component('MkwAichan', defineAsyncComponent(() => import('./aichan.vue')));
-	app.component('MkwUserList', defineAsyncComponent(() => import('./user-list.vue')));
-}
-
-export const widgets = [
-	'memo',
-	'notifications',
-	'timeline',
-	'calendar',
-	'rss',
-	'rssTicker',
-	'trends',
-	'clock',
-	'activity',
-	'photos',
-	'digitalClock',
-	'unixClock',
-	'federation',
-	'instanceCloud',
-	'postForm',
-	'slideshow',
-	'serverMetric',
-	'onlineUsers',
-	'jobQueue',
-	'button',
-	'aiscript',
-	'aichan',
-	'userList',
-];
diff --git a/packages/client/src/widgets/instance-cloud.vue b/packages/client/src/widgets/instance-cloud.vue
deleted file mode 100644
index 4965616995..0000000000
--- a/packages/client/src/widgets/instance-cloud.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-instance-cloud">
-	<div class="">
-		<MkTagCloud v-if="activeInstances">
-			<li v-for="instance in activeInstances" :key="instance.id">
-				<a @click.prevent="onInstanceClick(instance)">
-					<img style="width: 32px;" :src="getInstanceIcon(instance)">
-				</a>
-			</li>
-		</MkTagCloud>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkTagCloud from '@/components/MkTagCloud.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
-
-const name = 'instanceCloud';
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-let cloud = $ref<InstanceType<typeof MkTagCloud> | null>();
-let activeInstances = $shallowRef(null);
-
-function onInstanceClick(i) {
-	os.pageWindow(`/instance-info/${i.host}`);
-}
-
-useInterval(() => {
-	os.api('federation/instances', {
-		sort: '+lastCommunicatedAt',
-		limit: 25,
-	}).then(res => {
-		activeInstances = res;
-		if (cloud) cloud.update();
-	});
-}, 1000 * 60 * 3, {
-	immediate: true,
-	afterMounted: true,
-});
-
-function getInstanceIcon(instance): string {
-	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
-}
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/client/src/widgets/job-queue.vue b/packages/client/src/widgets/job-queue.vue
deleted file mode 100644
index 9f19c51825..0000000000
--- a/packages/client/src/widgets/job-queue.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<template>
-<div class="mkw-jobQueue _monospace" :class="{ _panel: !widgetProps.transparent }">
-	<div class="inbox">
-		<div class="label">Inbox queue<i v-if="current.inbox.waiting > 0" class="ti ti-alert-triangle icon"></i></div>
-		<div class="values">
-			<div>
-				<div>Process</div>
-				<div :class="{ inc: current.inbox.activeSincePrevTick > prev.inbox.activeSincePrevTick, dec: current.inbox.activeSincePrevTick < prev.inbox.activeSincePrevTick }">{{ number(current.inbox.activeSincePrevTick) }}</div>
-			</div>
-			<div>
-				<div>Active</div>
-				<div :class="{ inc: current.inbox.active > prev.inbox.active, dec: current.inbox.active < prev.inbox.active }">{{ number(current.inbox.active) }}</div>
-			</div>
-			<div>
-				<div>Delayed</div>
-				<div :class="{ inc: current.inbox.delayed > prev.inbox.delayed, dec: current.inbox.delayed < prev.inbox.delayed }">{{ number(current.inbox.delayed) }}</div>
-			</div>
-			<div>
-				<div>Waiting</div>
-				<div :class="{ inc: current.inbox.waiting > prev.inbox.waiting, dec: current.inbox.waiting < prev.inbox.waiting }">{{ number(current.inbox.waiting) }}</div>
-			</div>
-		</div>
-	</div>
-	<div class="deliver">
-		<div class="label">Deliver queue<i v-if="current.deliver.waiting > 0" class="ti ti-alert-triangle icon"></i></div>
-		<div class="values">
-			<div>
-				<div>Process</div>
-				<div :class="{ inc: current.deliver.activeSincePrevTick > prev.deliver.activeSincePrevTick, dec: current.deliver.activeSincePrevTick < prev.deliver.activeSincePrevTick }">{{ number(current.deliver.activeSincePrevTick) }}</div>
-			</div>
-			<div>
-				<div>Active</div>
-				<div :class="{ inc: current.deliver.active > prev.deliver.active, dec: current.deliver.active < prev.deliver.active }">{{ number(current.deliver.active) }}</div>
-			</div>
-			<div>
-				<div>Delayed</div>
-				<div :class="{ inc: current.deliver.delayed > prev.deliver.delayed, dec: current.deliver.delayed < prev.deliver.delayed }">{{ number(current.deliver.delayed) }}</div>
-			</div>
-			<div>
-				<div>Waiting</div>
-				<div :class="{ inc: current.deliver.waiting > prev.deliver.waiting, dec: current.deliver.waiting < prev.deliver.waiting }">{{ number(current.deliver.waiting) }}</div>
-			</div>
-		</div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { stream } from '@/stream';
-import number from '@/filters/number';
-import * as sound from '@/scripts/sound';
-import * as os from '@/os';
-import { deepClone } from '@/scripts/clone';
-
-const name = 'jobQueue';
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	sound: {
-		type: 'boolean' as const,
-		default: false,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const connection = stream.useChannel('queueStats');
-const current = reactive({
-	inbox: {
-		activeSincePrevTick: 0,
-		active: 0,
-		waiting: 0,
-		delayed: 0,
-	},
-	deliver: {
-		activeSincePrevTick: 0,
-		active: 0,
-		waiting: 0,
-		delayed: 0,
-	},
-});
-const prev = reactive({} as typeof current);
-const jammedSound = sound.setVolume(sound.getAudio('syuilo/queue-jammed'), 1);
-
-for (const domain of ['inbox', 'deliver']) {
-	prev[domain] = deepClone(current[domain]);
-}
-
-const onStats = (stats) => {
-	for (const domain of ['inbox', 'deliver']) {
-		prev[domain] = deepClone(current[domain]);
-		current[domain].activeSincePrevTick = stats[domain].activeSincePrevTick;
-		current[domain].active = stats[domain].active;
-		current[domain].waiting = stats[domain].waiting;
-		current[domain].delayed = stats[domain].delayed;
-
-		if (current[domain].waiting > 0 && widgetProps.sound && jammedSound.paused) {
-			jammedSound.play();
-		}
-	}
-};
-
-const onStatsLog = (statsLog) => {
-	for (const stats of [...statsLog].reverse()) {
-		onStats(stats);
-	}
-};
-
-connection.on('stats', onStats);
-connection.on('statsLog', onStatsLog);
-
-connection.send('requestLog', {
-	id: Math.random().toString().substr(2, 8),
-	length: 1,
-});
-
-onUnmounted(() => {
-	connection.off('stats', onStats);
-	connection.off('statsLog', onStatsLog);
-	connection.dispose();
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-@keyframes warnBlink {
-	0% { opacity: 1; }
-	50% { opacity: 0; }
-}
-
-.mkw-jobQueue {
-	font-size: 0.9em;
-
-	> div {
-		padding: 16px;
-
-		&:not(:first-child) {
-			border-top: solid 0.5px var(--divider);
-		}
-
-		> .label {
-			display: flex;
-
-			> .icon {
-				color: var(--warn);
-				margin-left: auto;
-				animation: warnBlink 1s infinite;
-			}
-		}
-
-		> .values {
-			display: flex;
-
-			> div {
-				flex: 1;
-
-				> div:first-child {
-					opacity: 0.7;
-				}
-
-				> div:last-child {
-					&.inc {
-						color: var(--warn);
-					}
-
-					&.dec {
-						color: var(--success);
-					}
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/memo.vue b/packages/client/src/widgets/memo.vue
deleted file mode 100644
index 1cc0e10bba..0000000000
--- a/packages/client/src/widgets/memo.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-memo">
-	<template #header><i class="ti ti-note"></i>{{ i18n.ts._widgets.memo }}</template>
-
-	<div class="otgbylcu">
-		<textarea v-model="text" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea>
-		<button :disabled="!changed" class="_buttonPrimary" @click="saveMemo">{{ i18n.ts.save }}</button>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-
-const name = 'memo';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const text = ref<string | null>(defaultStore.state.memo);
-const changed = ref(false);
-let timeoutId;
-
-const saveMemo = () => {
-	defaultStore.set('memo', text.value);
-	changed.value = false;
-};
-
-const onChange = () => {
-	changed.value = true;
-	window.clearTimeout(timeoutId);
-	timeoutId = window.setTimeout(saveMemo, 1000);
-};
-
-watch(() => defaultStore.reactiveState.memo, newText => {
-	text.value = newText.value;
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.otgbylcu {
-	padding-bottom: 28px + 16px;
-
-	> textarea {
-		display: block;
-		width: 100%;
-		max-width: 100%;
-		min-width: 100%;
-		padding: 16px;
-		color: var(--fg);
-		background: transparent;
-		border: none;
-		border-bottom: solid 0.5px var(--divider);
-		border-radius: 0;
-		box-sizing: border-box;
-		font: inherit;
-		font-size: 0.9em;
-
-		&:focus-visible {
-			outline: none;
-		}
-	}
-
-	> button {
-		display: block;
-		position: absolute;
-		bottom: 8px;
-		right: 8px;
-		margin: 0;
-		padding: 0 10px;
-		height: 28px;
-		outline: none;
-		border-radius: 4px;
-
-		&:disabled {
-			opacity: 0.7;
-			cursor: default;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/notifications.vue b/packages/client/src/widgets/notifications.vue
deleted file mode 100644
index e697209444..0000000000
--- a/packages/client/src/widgets/notifications.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-<MkContainer :style="`height: ${widgetProps.height}px;`" :show-header="widgetProps.showHeader" :scrollable="true" class="mkw-notifications">
-	<template #header><i class="ti ti-bell"></i>{{ i18n.ts.notifications }}</template>
-	<template #func><button class="_button" @click="configureNotification()"><i class="ti ti-settings"></i></button></template>
-
-	<div>
-		<XNotifications :include-types="widgetProps.includingTypes"/>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import XNotifications from '@/components/MkNotifications.vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const name = 'notifications';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	height: {
-		type: 'number' as const,
-		default: 300,
-	},
-	includingTypes: {
-		type: 'array' as const,
-		hidden: true,
-		default: null,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const configureNotification = () => {
-	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
-		includingTypes: widgetProps.includingTypes,
-	}, {
-		done: async (res) => {
-			const { includingTypes } = res;
-			widgetProps.includingTypes = includingTypes;
-			save();
-		},
-	}, 'closed');
-};
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
diff --git a/packages/client/src/widgets/online-users.vue b/packages/client/src/widgets/online-users.vue
deleted file mode 100644
index e9ab79b111..0000000000
--- a/packages/client/src/widgets/online-users.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-<div class="mkw-onlineUsers" :class="{ _panel: !widgetProps.transparent, pad: !widgetProps.transparent }">
-	<I18n v-if="onlineUsersCount" :src="i18n.ts.onlineUsersCount" text-tag="span" class="text">
-		<template #n><b>{{ onlineUsersCount }}</b></template>
-	</I18n>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
-
-const name = 'onlineUsers';
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const onlineUsersCount = ref(0);
-
-const tick = () => {
-	os.api('get-online-users-count').then(res => {
-		onlineUsersCount.value = res.count;
-	});
-};
-
-useInterval(tick, 1000 * 15, {
-	immediate: true,
-	afterMounted: true,
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.mkw-onlineUsers {
-	text-align: center;
-
-	&.pad {
-		padding: 16px 0;
-	}
-
-	> .text {
-		::v-deep(b) {
-			color: #41b781;
-		}
-
-		::v-deep(span) {
-			opacity: 0.7;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/photos.vue b/packages/client/src/widgets/photos.vue
deleted file mode 100644
index 4ad5324053..0000000000
--- a/packages/client/src/widgets/photos.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" :class="$style.root" :data-transparent="widgetProps.transparent ? true : null" class="mkw-photos">
-	<template #header><i class="ti ti-camera"></i>{{ i18n.ts._widgets.photos }}</template>
-
-	<div class="">
-		<MkLoading v-if="fetching"/>
-		<div v-else :class="$style.stream">
-			<div
-				v-for="(image, i) in images" :key="i"
-				:class="$style.img"
-				:style="`background-image: url(${thumbnail(image)})`"
-			></div>
-		</div>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import { stream } from '@/stream';
-import { getStaticImageUrl } from '@/scripts/get-static-image-url';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { defaultStore } from '@/store';
-import { i18n } from '@/i18n';
-
-const name = 'photos';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const connection = stream.useChannel('main');
-const images = ref([]);
-const fetching = ref(true);
-
-const onDriveFileCreated = (file) => {
-	if (/^image\/.+$/.test(file.type)) {
-		images.value.unshift(file);
-		if (images.value.length > 9) images.value.pop();
-	}
-};
-
-const thumbnail = (image: any): string => {
-	return defaultStore.state.disableShowingAnimatedImages
-		? getStaticImageUrl(image.thumbnailUrl)
-		: image.thumbnailUrl;
-};
-
-os.api('drive/stream', {
-	type: 'image/*',
-	limit: 9,
-}).then(res => {
-	images.value = res;
-	fetching.value = false;
-});
-
-connection.on('driveFileCreated', onDriveFileCreated);
-onUnmounted(() => {
-	connection.dispose();
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" module>
-.root[data-transparent] {
-	.stream {
-		padding: 0;
-	}
-
-	.img {
-		border: solid 4px transparent;
-		border-radius: 8px;
-	}
-}
-
-.stream {
-	display: flex;
-	justify-content: center;
-	flex-wrap: wrap;
-	padding: 8px;
-
-	.img {
-		flex: 1 1 33%;
-		width: 33%;
-		height: 80px;
-		box-sizing: border-box;
-		background-position: center center;
-		background-size: cover;
-		background-clip: content-box;
-		border: solid 2px transparent;
-		border-radius: 4px;
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/post-form.vue b/packages/client/src/widgets/post-form.vue
deleted file mode 100644
index f1708775ba..0000000000
--- a/packages/client/src/widgets/post-form.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-<XPostForm class="_panel mkw-postForm" :fixed="true" :autofocus="false"/>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import XPostForm from '@/components/MkPostForm.vue';
-
-const name = 'postForm';
-
-const widgetPropsDef = {
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
diff --git a/packages/client/src/widgets/rss-ticker.vue b/packages/client/src/widgets/rss-ticker.vue
deleted file mode 100644
index 44c21d1836..0000000000
--- a/packages/client/src/widgets/rss-ticker.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<template>
-<MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-rss-ticker">
-	<template #header><i class="ti ti-rss"></i>RSS</template>
-	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
-
-	<div class="ekmkgxbk">
-		<MkLoading v-if="fetching"/>
-		<div v-else class="feed">
-			<transition name="change" mode="default">
-				<MarqueeText :key="key" :duration="widgetProps.duration" :reverse="widgetProps.reverse">
-					<span v-for="item in items" class="item">
-						<a class="link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span class="divider"></span>
-					</span>
-				</MarqueeText>
-			</transition>
-		</div>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import MarqueeText from '@/components/MkMarquee.vue';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { useInterval } from '@/scripts/use-interval';
-import { shuffle } from '@/scripts/shuffle';
-
-const name = 'rssTicker';
-
-const widgetPropsDef = {
-	url: {
-		type: 'string' as const,
-		default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
-	},
-	shuffle: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	refreshIntervalSec: {
-		type: 'number' as const,
-		default: 60,
-	},
-	duration: {
-		type: 'range' as const,
-		default: 70,
-		step: 1,
-		min: 5,
-		max: 200,
-	},
-	reverse: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	showHeader: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const items = ref([]);
-const fetching = ref(true);
-let key = $ref(0);
-
-const tick = () => {
-	window.fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then(res => {
-		res.json().then(feed => {
-			if (widgetProps.shuffle) {
-				shuffle(feed.items);
-			}
-			items.value = feed.items;
-			fetching.value = false;
-			key++;
-		});
-	});
-};
-
-watch(() => widgetProps.url, tick);
-
-useInterval(tick, Math.max(10000, widgetProps.refreshIntervalSec * 1000), {
-	immediate: true,
-	afterMounted: true,
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.change-enter-active, .change-leave-active {
-	position: absolute;
-	top: 0;
-  transition: all 1s ease;
-}
-.change-enter-from {
-  opacity: 0;
-	transform: translateY(-100%);
-}
-.change-leave-to {
-  opacity: 0;
-	transform: translateY(100%);
-}
-
-.ekmkgxbk {
-	> .feed {
-		--height: 42px;
-		padding: 0;
-		font-size: 0.9em;
-		line-height: var(--height);
-		height: var(--height);
-		contain: strict;
-
-		::v-deep(.item) {
-			display: inline-flex;
-			align-items: center;
-			vertical-align: bottom;
-			color: var(--fg);
-
-			> .divider {
-				display: inline-block;
-				width: 0.5px;
-				height: 16px;
-				margin: 0 1em;
-				background: var(--divider);
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/rss.vue b/packages/client/src/widgets/rss.vue
deleted file mode 100644
index c0338c8e47..0000000000
--- a/packages/client/src/widgets/rss.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-rss">
-	<template #header><i class="ti ti-rss"></i>RSS</template>
-	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
-
-	<div class="ekmkgxbj">
-		<MkLoading v-if="fetching"/>
-		<div v-else class="feed">
-			<a v-for="item in items" class="item" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a>
-		</div>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import { useInterval } from '@/scripts/use-interval';
-
-const name = 'rss';
-
-const widgetPropsDef = {
-	url: {
-		type: 'string' as const,
-		default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
-	},
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const items = ref([]);
-const fetching = ref(true);
-
-const tick = () => {
-	window.fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then(res => {
-		res.json().then(feed => {
-			items.value = feed.items;
-			fetching.value = false;
-		});
-	});
-};
-
-watch(() => widgetProps.url, tick);
-
-useInterval(tick, 60000, {
-	immediate: true,
-	afterMounted: true,
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.ekmkgxbj {
-	> .feed {
-		padding: 0;
-		font-size: 0.9em;
-
-		> .item {
-			display: block;
-			padding: 8px 16px;
-			color: var(--fg);
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-
-			&:nth-child(even) {
-				background: rgba(#000, 0.05);
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/server-metric/cpu-mem.vue b/packages/client/src/widgets/server-metric/cpu-mem.vue
deleted file mode 100644
index 80a8e427e1..0000000000
--- a/packages/client/src/widgets/server-metric/cpu-mem.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<template>
-<div class="lcfyofjk">
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<defs>
-			<linearGradient :id="cpuGradientId" x1="0" x2="0" y1="1" y2="0">
-				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
-				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
-			</linearGradient>
-			<mask :id="cpuMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
-				<polygon
-					:points="cpuPolygonPoints"
-					fill="#fff"
-					fill-opacity="0.5"
-				/>
-				<polyline
-					:points="cpuPolylinePoints"
-					fill="none"
-					stroke="#fff"
-					stroke-width="1"
-				/>
-				<circle
-					:cx="cpuHeadX"
-					:cy="cpuHeadY"
-					r="1.5"
-					fill="#fff"
-				/>
-			</mask>
-		</defs>
-		<rect
-			x="-2" y="-2"
-			:width="viewBoxX + 4" :height="viewBoxY + 4"
-			:style="`stroke: none; fill: url(#${ cpuGradientId }); mask: url(#${ cpuMaskId })`"
-		/>
-		<text x="1" y="5">CPU <tspan>{{ cpuP }}%</tspan></text>
-	</svg>
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<defs>
-			<linearGradient :id="memGradientId" x1="0" x2="0" y1="1" y2="0">
-				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
-				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
-			</linearGradient>
-			<mask :id="memMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
-				<polygon
-					:points="memPolygonPoints"
-					fill="#fff"
-					fill-opacity="0.5"
-				/>
-				<polyline
-					:points="memPolylinePoints"
-					fill="none"
-					stroke="#fff"
-					stroke-width="1"
-				/>
-				<circle
-					:cx="memHeadX"
-					:cy="memHeadY"
-					r="1.5"
-					fill="#fff"
-				/>
-			</mask>
-		</defs>
-		<rect
-			x="-2" y="-2"
-			:width="viewBoxX + 4" :height="viewBoxY + 4"
-			:style="`stroke: none; fill: url(#${ memGradientId }); mask: url(#${ memMaskId })`"
-		/>
-		<text x="1" y="5">MEM <tspan>{{ memP }}%</tspan></text>
-	</svg>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import { v4 as uuid } from 'uuid';
-
-const props = defineProps<{
-	connection: any,
-	meta: any
-}>();
-
-let viewBoxX: number = $ref(50);
-let viewBoxY: number = $ref(30);
-let stats: any[] = $ref([]);
-const cpuGradientId = uuid();
-const cpuMaskId = uuid();
-const memGradientId = uuid();
-const memMaskId = uuid();
-let cpuPolylinePoints: string = $ref('');
-let memPolylinePoints: string = $ref('');
-let cpuPolygonPoints: string = $ref('');
-let memPolygonPoints: string = $ref('');
-let cpuHeadX: any = $ref(null);
-let cpuHeadY: any = $ref(null);
-let memHeadX: any = $ref(null);
-let memHeadY: any = $ref(null);
-let cpuP: string = $ref('');
-let memP: string = $ref('');
-
-onMounted(() => {
-	props.connection.on('stats', onStats);
-	props.connection.on('statsLog', onStatsLog);
-	props.connection.send('requestLog', {
-		id: Math.random().toString().substr(2, 8),
-	});
-});
-
-onBeforeUnmount(() => {
-	props.connection.off('stats', onStats);
-	props.connection.off('statsLog', onStatsLog);
-});
-
-function onStats(connStats) {
-	stats.push(connStats);
-	if (stats.length > 50) stats.shift();
-
-	let cpuPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - s.cpu) * viewBoxY]);
-	let memPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - (s.mem.active / props.meta.mem.total)) * viewBoxY]);
-	cpuPolylinePoints = cpuPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
-	memPolylinePoints = memPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
-
-	cpuPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${cpuPolylinePoints} ${viewBoxX},${viewBoxY}`;
-	memPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${memPolylinePoints} ${viewBoxX},${viewBoxY}`;
-
-	cpuHeadX = cpuPolylinePointsStats[cpuPolylinePointsStats.length - 1][0];
-	cpuHeadY = cpuPolylinePointsStats[cpuPolylinePointsStats.length - 1][1];
-	memHeadX = memPolylinePointsStats[memPolylinePointsStats.length - 1][0];
-	memHeadY = memPolylinePointsStats[memPolylinePointsStats.length - 1][1];
-
-	cpuP = (connStats.cpu * 100).toFixed(0);
-	memP = (connStats.mem.active / props.meta.mem.total * 100).toFixed(0);
-}
-
-function onStatsLog(statsLog) {
-	for (const revStats of [...statsLog].reverse()) {
-		onStats(revStats);
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.lcfyofjk {
-	display: flex;
-
-	> svg {
-		display: block;
-		padding: 10px;
-		width: 50%;
-
-		&:first-child {
-			padding-right: 5px;
-		}
-
-		&:last-child {
-			padding-left: 5px;
-		}
-
-		> text {
-			font-size: 4.5px;
-			fill: currentColor;
-
-			> tspan {
-				opacity: 0.5;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/server-metric/cpu.vue b/packages/client/src/widgets/server-metric/cpu.vue
deleted file mode 100644
index e7b2226d1f..0000000000
--- a/packages/client/src/widgets/server-metric/cpu.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-<div class="vrvdvrys">
-	<XPie class="pie" :value="usage"/>
-	<div>
-		<p><i class="ti ti-cpu"></i>CPU</p>
-		<p>{{ meta.cpu.cores }} Logical cores</p>
-		<p>{{ meta.cpu.model }}</p>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import XPie from './pie.vue';
-
-const props = defineProps<{
-	connection: any,
-	meta: any
-}>();
-
-let usage: number = $ref(0);
-
-function onStats(stats) {
-	usage = stats.cpu;
-}
-
-onMounted(() => {
-	props.connection.on('stats', onStats);
-});
-
-onBeforeUnmount(() => {
-	props.connection.off('stats', onStats);
-});
-</script>
-
-<style lang="scss" scoped>
-.vrvdvrys {
-	display: flex;
-	padding: 16px;
-
-	> .pie {
-		height: 82px;
-		flex-shrink: 0;
-		margin-right: 16px;
-	}
-
-	> div {
-		flex: 1;
-
-		> p {
-			margin: 0;
-			font-size: 0.8em;
-
-			&:first-child {
-				font-weight: bold;
-				margin-bottom: 4px;
-
-				> i {
-					margin-right: 4px;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/server-metric/disk.vue b/packages/client/src/widgets/server-metric/disk.vue
deleted file mode 100644
index 3d22d05383..0000000000
--- a/packages/client/src/widgets/server-metric/disk.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-<div class="zbwaqsat">
-	<XPie class="pie" :value="usage"/>
-	<div>
-		<p><i class="ti ti-database"></i>Disk</p>
-		<p>Total: {{ bytes(total, 1) }}</p>
-		<p>Free: {{ bytes(available, 1) }}</p>
-		<p>Used: {{ bytes(used, 1) }}</p>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import XPie from './pie.vue';
-import bytes from '@/filters/bytes';
-
-const props = defineProps<{
-	meta: any; // TODO
-}>();
-
-const usage = $computed(() => props.meta.fs.used / props.meta.fs.total);
-const total = $computed(() => props.meta.fs.total);
-const used = $computed(() => props.meta.fs.used);
-const available = $computed(() => props.meta.fs.total - props.meta.fs.used);
-</script>
-
-<style lang="scss" scoped>
-.zbwaqsat {
-	display: flex;
-	padding: 16px;
-
-	> .pie {
-		height: 82px;
-		flex-shrink: 0;
-		margin-right: 16px;
-	}
-
-	> div {
-		flex: 1;
-
-		> p {
-			margin: 0;
-			font-size: 0.8em;
-
-			&:first-child {
-				font-weight: bold;
-				margin-bottom: 4px;
-
-				> i {
-					margin-right: 4px;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/server-metric/index.vue b/packages/client/src/widgets/server-metric/index.vue
deleted file mode 100644
index bc3fca6fc1..0000000000
--- a/packages/client/src/widgets/server-metric/index.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent">
-	<template #header><i class="ti ti-server"></i>{{ i18n.ts._widgets.serverMetric }}</template>
-	<template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
-
-	<div v-if="meta" class="mkw-serverMetric">
-		<XCpuMemory v-if="widgetProps.view === 0" :connection="connection" :meta="meta"/>
-		<XNet v-else-if="widgetProps.view === 1" :connection="connection" :meta="meta"/>
-		<XCpu v-else-if="widgetProps.view === 2" :connection="connection" :meta="meta"/>
-		<XMemory v-else-if="widgetProps.view === 3" :connection="connection" :meta="meta"/>
-		<XDisk v-else-if="widgetProps.view === 4" :connection="connection" :meta="meta"/>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from '../widget';
-import XCpuMemory from './cpu-mem.vue';
-import XNet from './net.vue';
-import XCpu from './cpu.vue';
-import XMemory from './mem.vue';
-import XDisk from './disk.vue';
-import MkContainer from '@/components/MkContainer.vue';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { stream } from '@/stream';
-import { i18n } from '@/i18n';
-
-const name = 'serverMetric';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	view: {
-		type: 'number' as const,
-		default: 0,
-		hidden: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const meta = ref(null);
-
-os.api('server-info', {}).then(res => {
-	meta.value = res;
-});
-
-const toggleView = () => {
-	if (widgetProps.view === 4) {
-		widgetProps.view = 0;
-	} else {
-		widgetProps.view++;
-	}
-	save();
-};
-
-const connection = stream.useChannel('serverStats');
-onUnmounted(() => {
-	connection.dispose();
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
diff --git a/packages/client/src/widgets/server-metric/mem.vue b/packages/client/src/widgets/server-metric/mem.vue
deleted file mode 100644
index 6018eb4265..0000000000
--- a/packages/client/src/widgets/server-metric/mem.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-<div class="zlxnikvl">
-	<XPie class="pie" :value="usage"/>
-	<div>
-		<p><i class="fas fa-memory"></i>RAM</p>
-		<p>Total: {{ bytes(total, 1) }}</p>
-		<p>Used: {{ bytes(used, 1) }}</p>
-		<p>Free: {{ bytes(free, 1) }}</p>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import XPie from './pie.vue';
-import bytes from '@/filters/bytes';
-
-const props = defineProps<{
-	connection: any,
-	meta: any
-}>();
-
-let usage: number = $ref(0);
-let total: number = $ref(0);
-let used: number = $ref(0);
-let free: number = $ref(0);
-
-function onStats(stats) {
-	usage = stats.mem.active / props.meta.mem.total;
-	total = props.meta.mem.total;
-	used = stats.mem.active;
-	free = total - used;
-}
-
-onMounted(() => {
-	props.connection.on('stats', onStats);
-});
-
-onBeforeUnmount(() => {
-	props.connection.off('stats', onStats);
-});
-</script>
-
-<style lang="scss" scoped>
-.zlxnikvl {
-	display: flex;
-	padding: 16px;
-
-	> .pie {
-		height: 82px;
-		flex-shrink: 0;
-		margin-right: 16px;
-	}
-
-	> div {
-		flex: 1;
-
-		> p {
-			margin: 0;
-			font-size: 0.8em;
-
-			&:first-child {
-				font-weight: bold;
-				margin-bottom: 4px;
-
-				> i {
-					margin-right: 4px;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/server-metric/net.vue b/packages/client/src/widgets/server-metric/net.vue
deleted file mode 100644
index ab8b0fe471..0000000000
--- a/packages/client/src/widgets/server-metric/net.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<template>
-<div class="oxxrhrto">
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<polygon
-			:points="inPolygonPoints"
-			fill="#94a029"
-			fill-opacity="0.5"
-		/>
-		<polyline
-			:points="inPolylinePoints"
-			fill="none"
-			stroke="#94a029"
-			stroke-width="1"
-		/>
-		<circle
-			:cx="inHeadX"
-			:cy="inHeadY"
-			r="1.5"
-			fill="#94a029"
-		/>
-		<text x="1" y="5">NET rx <tspan>{{ bytes(inRecent) }}</tspan></text>
-	</svg>
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<polygon
-			:points="outPolygonPoints"
-			fill="#ff9156"
-			fill-opacity="0.5"
-		/>
-		<polyline
-			:points="outPolylinePoints"
-			fill="none"
-			stroke="#ff9156"
-			stroke-width="1"
-		/>
-		<circle
-			:cx="outHeadX"
-			:cy="outHeadY"
-			r="1.5"
-			fill="#ff9156"
-		/>
-		<text x="1" y="5">NET tx <tspan>{{ bytes(outRecent) }}</tspan></text>
-	</svg>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from 'vue';
-import bytes from '@/filters/bytes';
-
-const props = defineProps<{
-	connection: any,
-	meta: any
-}>();
-
-let viewBoxX: number = $ref(50);
-let viewBoxY: number = $ref(30);
-let stats: any[] = $ref([]);
-let inPolylinePoints: string = $ref('');
-let outPolylinePoints: string = $ref('');
-let inPolygonPoints: string = $ref('');
-let outPolygonPoints: string = $ref('');
-let inHeadX: any = $ref(null);
-let inHeadY: any = $ref(null);
-let outHeadX: any = $ref(null);
-let outHeadY: any = $ref(null);
-let inRecent: number = $ref(0);
-let outRecent: number = $ref(0);
-
-onMounted(() => {
-	props.connection.on('stats', onStats);
-	props.connection.on('statsLog', onStatsLog);
-	props.connection.send('requestLog', {
-		id: Math.random().toString().substr(2, 8),
-	});
-});
-
-onBeforeUnmount(() => {
-	props.connection.off('stats', onStats);
-	props.connection.off('statsLog', onStatsLog);
-});
-
-function onStats(connStats) {
-	stats.push(connStats);
-	if (stats.length > 50) stats.shift();
-
-	const inPeak = Math.max(1024 * 64, Math.max(...stats.map(s => s.net.rx)));
-	const outPeak = Math.max(1024 * 64, Math.max(...stats.map(s => s.net.tx)));
-
-	let inPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - (s.net.rx / inPeak)) * viewBoxY]);
-	let outPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - (s.net.tx / outPeak)) * viewBoxY]);
-	inPolylinePoints = inPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
-	outPolylinePoints = outPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
-
-	inPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${inPolylinePoints} ${viewBoxX},${viewBoxY}`;
-	outPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${outPolylinePoints} ${viewBoxX},${viewBoxY}`;
-
-	inHeadX = inPolylinePointsStats[inPolylinePointsStats.length - 1][0];
-	inHeadY = inPolylinePointsStats[inPolylinePointsStats.length - 1][1];
-	outHeadX = outPolylinePointsStats[outPolylinePointsStats.length - 1][0];
-	outHeadY = outPolylinePointsStats[outPolylinePointsStats.length - 1][1];
-
-	inRecent = connStats.net.rx;
-	outRecent = connStats.net.tx;
-}
-
-function onStatsLog(statsLog) {
-	for (const revStats of [...statsLog].reverse()) {
-		onStats(revStats);
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.oxxrhrto {
-	display: flex;
-
-	> svg {
-		display: block;
-		padding: 10px;
-		width: 50%;
-
-		&:first-child {
-			padding-right: 5px;
-		}
-
-		&:last-child {
-			padding-left: 5px;
-		}
-
-		> text {
-			font-size: 4.5px;
-			fill: currentColor;
-
-			> tspan {
-				opacity: 0.5;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/server-metric/pie.vue b/packages/client/src/widgets/server-metric/pie.vue
deleted file mode 100644
index 868dbc0484..0000000000
--- a/packages/client/src/widgets/server-metric/pie.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-<svg class="hsalcinq" viewBox="0 0 1 1" preserveAspectRatio="none">
-	<circle
-		:r="r"
-		cx="50%" cy="50%"
-		fill="none"
-		stroke-width="0.1"
-		stroke="rgba(0, 0, 0, 0.05)"
-	/>
-	<circle
-		:r="r"
-		cx="50%" cy="50%"
-		:stroke-dasharray="Math.PI * (r * 2)"
-		:stroke-dashoffset="strokeDashoffset"
-		fill="none"
-		stroke-width="0.1"
-		:stroke="color"
-	/>
-	<text x="50%" y="50%" dy="0.05" text-anchor="middle">{{ (value * 100).toFixed(0) }}%</text>
-</svg>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-
-const props = defineProps<{
-	value: number;
-}>();
-
-const r = 0.45;
-
-const color = $computed(() => `hsl(${180 - (props.value * 180)}, 80%, 70%)`);
-const strokeDashoffset = $computed(() => (1 - props.value) * (Math.PI * (r * 2)));
-</script>
-
-<style lang="scss" scoped>
-.hsalcinq {
-	display: block;
-	height: 100%;
-
-	> circle {
-		transform-origin: center;
-		transform: rotate(-90deg);
-		transition: stroke-dashoffset 0.5s ease;
-	}
-
-	> text {
-		font-size: 0.15px;
-		fill: currentColor;
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/slideshow.vue b/packages/client/src/widgets/slideshow.vue
deleted file mode 100644
index e317b8ab94..0000000000
--- a/packages/client/src/widgets/slideshow.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<template>
-<div class="kvausudm _panel mkw-slideshow" :style="{ height: widgetProps.height + 'px' }">
-	<div @click="choose">
-		<p v-if="widgetProps.folderId == null">
-			{{ i18n.ts.folder }}
-		</p>
-		<p v-if="widgetProps.folderId != null && images.length === 0 && !fetching">{{ $t('no-image') }}</p>
-		<div ref="slideA" class="slide a"></div>
-		<div ref="slideB" class="slide b"></div>
-	</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
-
-const name = 'slideshow';
-
-const widgetPropsDef = {
-	height: {
-		type: 'number' as const,
-		default: 300,
-	},
-	folderId: {
-		type: 'string' as const,
-		default: null,
-		hidden: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const images = ref([]);
-const fetching = ref(true);
-const slideA = ref<HTMLElement>();
-const slideB = ref<HTMLElement>();
-
-const change = () => {
-	if (images.value.length === 0) return;
-
-	const index = Math.floor(Math.random() * images.value.length);
-	const img = `url(${ images.value[index].url })`;
-
-	slideB.value.style.backgroundImage = img;
-
-	slideB.value.classList.add('anime');
-	window.setTimeout(() => {
-		// 既にこのウィジェットがunmountされていたら要素がない
-		if (slideA.value == null) return;
-
-		slideA.value.style.backgroundImage = img;
-
-		slideB.value.classList.remove('anime');
-	}, 1000);
-};
-
-const fetch = () => {
-	fetching.value = true;
-
-	os.api('drive/files', {
-		folderId: widgetProps.folderId,
-		type: 'image/*',
-		limit: 100,
-	}).then(res => {
-		images.value = res;
-		fetching.value = false;
-		slideA.value.style.backgroundImage = '';
-		slideB.value.style.backgroundImage = '';
-		change();
-	});
-};
-
-const choose = () => {
-	os.selectDriveFolder(false).then(folder => {
-		if (folder == null) {
-			return;
-		}
-		widgetProps.folderId = folder.id;
-		save();
-		fetch();
-	});
-};
-
-useInterval(change, 10000, {
-	immediate: false,
-	afterMounted: true,
-});
-
-onMounted(() => {
-	if (widgetProps.folderId != null) {
-		fetch();
-	}
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.kvausudm {
-	position: relative;
-
-	> div {
-		width: 100%;
-		height: 100%;
-		cursor: pointer;
-
-		> p {
-			display: block;
-			margin: 1em;
-			text-align: center;
-			color: #888;
-		}
-
-		> * {
-			pointer-events: none;
-		}
-
-		> .slide {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			background-size: cover;
-			background-position: center;
-
-			&.b {
-				opacity: 0;
-			}
-
-			&.anime {
-				transition: opacity 1s;
-				opacity: 1;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/timeline.vue b/packages/client/src/widgets/timeline.vue
deleted file mode 100644
index e48444d33f..0000000000
--- a/packages/client/src/widgets/timeline.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" :style="`height: ${widgetProps.height}px;`" :scrollable="true" class="mkw-timeline">
-	<template #header>
-		<button class="_button" @click="choose">
-			<i v-if="widgetProps.src === 'home'" class="ti ti-home"></i>
-			<i v-else-if="widgetProps.src === 'local'" class="ti ti-messages"></i>
-			<i v-else-if="widgetProps.src === 'social'" class="ti ti-share"></i>
-			<i v-else-if="widgetProps.src === 'global'" class="ti ti-world"></i>
-			<i v-else-if="widgetProps.src === 'list'" class="ti ti-list"></i>
-			<i v-else-if="widgetProps.src === 'antenna'" class="ti ti-antenna"></i>
-			<span style="margin-left: 8px;">{{ widgetProps.src === 'list' ? widgetProps.list.name : widgetProps.src === 'antenna' ? widgetProps.antenna.name : $t('_timelines.' + widgetProps.src) }}</span>
-			<i :class="menuOpened ? 'ti ti-chevron-up' : 'ti ti-chevron-down'" style="margin-left: 8px;"></i>
-		</button>
-	</template>
-
-	<div>
-		<XTimeline :key="widgetProps.src === 'list' ? `list:${widgetProps.list.id}` : widgetProps.src === 'antenna' ? `antenna:${widgetProps.antenna.id}` : widgetProps.src" :src="widgetProps.src" :list="widgetProps.list ? widgetProps.list.id : null" :antenna="widgetProps.antenna ? widgetProps.antenna.id : null"/>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import * as os from '@/os';
-import MkContainer from '@/components/MkContainer.vue';
-import XTimeline from '@/components/MkTimeline.vue';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-
-const name = 'timeline';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	height: {
-		type: 'number' as const,
-		default: 300,
-	},
-	src: {
-		type: 'string' as const,
-		default: 'home',
-		hidden: true,
-	},
-	antenna: {
-		type: 'object' as const,
-		default: null,
-		hidden: true,
-	},
-	list: {
-		type: 'object' as const,
-		default: null,
-		hidden: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const menuOpened = ref(false);
-
-const setSrc = (src) => {
-	widgetProps.src = src;
-	save();
-};
-
-const choose = async (ev) => {
-	menuOpened.value = true;
-	const [antennas, lists] = await Promise.all([
-		os.api('antennas/list'),
-		os.api('users/lists/list'),
-	]);
-	const antennaItems = antennas.map(antenna => ({
-		text: antenna.name,
-		icon: 'ti ti-antenna',
-		action: () => {
-			widgetProps.antenna = antenna;
-			setSrc('antenna');
-		},
-	}));
-	const listItems = lists.map(list => ({
-		text: list.name,
-		icon: 'ti ti-list',
-		action: () => {
-			widgetProps.list = list;
-			setSrc('list');
-		},
-	}));
-	os.popupMenu([{
-		text: i18n.ts._timelines.home,
-		icon: 'ti ti-home',
-		action: () => { setSrc('home'); },
-	}, {
-		text: i18n.ts._timelines.local,
-		icon: 'ti ti-messages',
-		action: () => { setSrc('local'); },
-	}, {
-		text: i18n.ts._timelines.social,
-		icon: 'ti ti-share',
-		action: () => { setSrc('social'); },
-	}, {
-		text: i18n.ts._timelines.global,
-		icon: 'ti ti-world',
-		action: () => { setSrc('global'); },
-	}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], ev.currentTarget ?? ev.target).then(() => {
-		menuOpened.value = false;
-	});
-};
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
diff --git a/packages/client/src/widgets/trends.vue b/packages/client/src/widgets/trends.vue
deleted file mode 100644
index 02eec0431e..0000000000
--- a/packages/client/src/widgets/trends.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
-	<template #header><i class="ti ti-hash"></i>{{ i18n.ts._widgets.trends }}</template>
-
-	<div class="wbrkwala">
-		<MkLoading v-if="fetching"/>
-		<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="tags">
-			<div v-for="stat in stats" :key="stat.tag">
-				<div class="tag">
-					<MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA>
-					<p>{{ $t('nUsersMentioned', { n: stat.usersCount }) }}</p>
-				</div>
-				<MkMiniChart class="chart" :src="stat.chart"/>
-			</div>
-		</transition-group>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import MkMiniChart from '@/components/MkMiniChart.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
-
-const name = 'hashtags';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-const stats = ref([]);
-const fetching = ref(true);
-
-const fetch = () => {
-	os.api('hashtags/trend').then(res => {
-		stats.value = res;
-		fetching.value = false;
-	});
-};
-
-useInterval(fetch, 1000 * 60, {
-	immediate: true,
-	afterMounted: true,
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.wbrkwala {
-	height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
-	overflow: hidden;
-
-	> .tags {
-		.chart-move {
-			transition: transform 1s ease;
-		}
-
-		> div {
-			display: flex;
-			align-items: center;
-			padding: 14px 16px;
-			border-bottom: solid 0.5px var(--divider);
-
-			> .tag {
-				flex: 1;
-				overflow: hidden;
-				font-size: 0.9em;
-				color: var(--fg);
-
-				> .a {
-					display: block;
-					width: 100%;
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					line-height: 18px;
-				}
-
-				> p {
-					margin: 0;
-					font-size: 75%;
-					opacity: 0.7;
-					line-height: 16px;
-				}
-			}
-
-			> .chart {
-				height: 30px;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/unix-clock.vue b/packages/client/src/widgets/unix-clock.vue
deleted file mode 100644
index cf85ac782c..0000000000
--- a/packages/client/src/widgets/unix-clock.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-<div class="mkw-unixClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
-	<div v-if="widgetProps.showLabel" class="label">UNIX Epoch</div>
-	<div class="time">
-		<span v-text="ss"></span>
-		<span v-if="widgetProps.showMs" class="colon" :class="{ showColon }">:</span>
-		<span v-if="widgetProps.showMs" v-text="ms"></span>
-	</div>
-	<div v-if="widgetProps.showLabel" class="label">UTC</div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onUnmounted, ref, watch } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-
-const name = 'unixClock';
-
-const widgetPropsDef = {
-	transparent: {
-		type: 'boolean' as const,
-		default: false,
-	},
-	fontSize: {
-		type: 'number' as const,
-		default: 1.5,
-		step: 0.1,
-	},
-	showMs: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	showLabel: {
-		type: 'boolean' as const,
-		default: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-let intervalId;
-const ss = ref('');
-const ms = ref('');
-const showColon = ref(false);
-let prevSec: string | null = null;
-
-watch(showColon, (v) => {
-	if (v) {
-		window.setTimeout(() => {
-			showColon.value = false;
-		}, 30);
-	}
-});
-
-const tick = () => {
-	const now = new Date();
-	ss.value = Math.floor(now.getTime() / 1000).toString();
-	ms.value = Math.floor(now.getTime() % 1000 / 10).toString().padStart(2, '0');
-	if (ss.value !== prevSec) showColon.value = true;
-	prevSec = ss.value;
-};
-
-tick();
-
-watch(() => widgetProps.showMs, () => {
-	if (intervalId) window.clearInterval(intervalId);
-	intervalId = window.setInterval(tick, widgetProps.showMs ? 10 : 1000);
-}, { immediate: true });
-
-onUnmounted(() => {
-	window.clearInterval(intervalId);
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" scoped>
-.mkw-unixClock {
-	padding: 16px 0;
-	text-align: center;
-
-	> .label {
-		font-size: 65%;
-		opacity: 0.7;
-	}
-
-	> .time {
-		> .colon {
-			opacity: 0;
-			transition: opacity 1s ease;
-
-			&.showColon {
-				opacity: 1;
-				transition: opacity 0s;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/user-list.vue b/packages/client/src/widgets/user-list.vue
deleted file mode 100644
index 9ffbf0d8e3..0000000000
--- a/packages/client/src/widgets/user-list.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList">
-	<template #header><i class="ti ti-users"></i>{{ list ? list.name : i18n.ts._widgets.userList }}</template>
-	<template #func><button class="_button" @click="configure()"><i class="ti ti-settings"></i></button></template>
-
-	<div :class="$style.root">
-		<div v-if="widgetProps.listId == null" class="init">
-			<MkButton primary @click="chooseList">{{ i18n.ts._widgets._userList.chooseList }}</MkButton>
-		</div>
-		<MkLoading v-else-if="fetching"/>
-		<div v-else class="users">
-			<MkA v-for="user in users" :key="user.id" class="user">
-				<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
-			</MkA>
-		</div>
-	</div>
-</MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
-import { GetFormResultType } from '@/scripts/form';
-import MkContainer from '@/components/MkContainer.vue';
-import * as os from '@/os';
-import { useInterval } from '@/scripts/use-interval';
-import { i18n } from '@/i18n';
-import MkButton from '@/components/MkButton.vue';
-
-const name = 'userList';
-
-const widgetPropsDef = {
-	showHeader: {
-		type: 'boolean' as const,
-		default: true,
-	},
-	listId: {
-		type: 'string' as const,
-		default: null,
-		hidden: true,
-	},
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
-const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
-
-const { widgetProps, configure, save } = useWidgetPropsManager(name,
-	widgetPropsDef,
-	props,
-	emit,
-);
-
-let list = $ref();
-let users = $ref([]);
-let fetching = $ref(true);
-
-async function chooseList() {
-	const lists = await os.api('users/lists/list');
-	const { canceled, result: list } = await os.select({
-		title: i18n.ts.selectList,
-		items: lists.map(x => ({
-			value: x, text: x.name,
-		})),
-		default: widgetProps.listId,
-	});
-	if (canceled) return;
-
-	widgetProps.listId = list.id;
-	save();
-	fetch();
-}
-
-const fetch = () => {
-	if (widgetProps.listId == null) {
-		fetching = false;
-		return;
-	}
-
-	os.api('users/lists/show', {
-		listId: widgetProps.listId,
-	}).then(_list => {
-		list = _list;
-		os.api('users/show', {
-			userIds: list.userIds,
-		}).then(_users => {
-			users = _users;
-			fetching = false;
-		});
-	});
-};
-
-useInterval(fetch, 1000 * 60, {
-	immediate: true,
-	afterMounted: true,
-});
-
-defineExpose<WidgetComponentExpose>({
-	name,
-	configure,
-	id: props.widget ? props.widget.id : null,
-});
-</script>
-
-<style lang="scss" module>
-.root {
-	&:global {
-		> .init {
-			padding: 16px;
-		}
-
-		> .users {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(30px, 40px));
-			grid-gap: 12px;
-			place-content: center;
-			padding: 16px;
-
-			> .user {
-				width: 100%;
-				height: 100%;
-				aspect-ratio: 1;
-
-				> .avatar {
-					width: 100%;
-					height: 100%;
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/widgets/widget.ts b/packages/client/src/widgets/widget.ts
deleted file mode 100644
index 8bd56a5966..0000000000
--- a/packages/client/src/widgets/widget.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { reactive, watch } from 'vue';
-import { throttle } from 'throttle-debounce';
-import { Form, GetFormResultType } from '@/scripts/form';
-import * as os from '@/os';
-import { deepClone } from '@/scripts/clone';
-
-export type Widget<P extends Record<string, unknown>> = {
-	id: string;
-	data: Partial<P>;
-};
-
-export type WidgetComponentProps<P extends Record<string, unknown>> = {
-	widget?: Widget<P>;
-};
-
-export type WidgetComponentEmits<P extends Record<string, unknown>> = {
-	(ev: 'updateProps', props: P);
-};
-
-export type WidgetComponentExpose = {
-	name: string;
-	id: string | null;
-	configure: () => void;
-};
-
-export const useWidgetPropsManager = <F extends Form & Record<string, { default: any; }>>(
-	name: string,
-	propsDef: F,
-	props: Readonly<WidgetComponentProps<GetFormResultType<F>>>,
-	emit: WidgetComponentEmits<GetFormResultType<F>>,
-): {
-	widgetProps: GetFormResultType<F>;
-	save: () => void;
-	configure: () => void;
-} => {
-	const widgetProps = reactive(props.widget ? deepClone(props.widget.data) : {});
-
-	const mergeProps = () => {
-		for (const prop of Object.keys(propsDef)) {
-			if (typeof widgetProps[prop] === 'undefined') {
-				widgetProps[prop] = propsDef[prop].default;
-			}
-		}
-	};
-	watch(widgetProps, () => {
-		mergeProps();
-	}, { deep: true, immediate: true });
-
-	const save = throttle(3000, () => {
-		emit('updateProps', widgetProps);
-	});
-
-	const configure = async () => {
-		const form = deepClone(propsDef);
-		for (const item of Object.keys(form)) {
-			form[item].default = widgetProps[item];
-		}
-		const { canceled, result } = await os.form(name, form);
-		if (canceled) return;
-
-		for (const key of Object.keys(result)) {
-			widgetProps[key] = result[key];
-		}
-
-		save();
-	};
-
-	return {
-		widgetProps,
-		save,
-		configure,
-	};
-};
diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json
deleted file mode 100644
index 86109f600a..0000000000
--- a/packages/client/tsconfig.json
+++ /dev/null
@@ -1,47 +0,0 @@
-{
-	"compilerOptions": {
-		"allowJs": true,
-		"noEmitOnError": false,
-		"noImplicitAny": false,
-		"noImplicitReturns": true,
-		"noUnusedParameters": false,
-		"noUnusedLocals": true,
-		"noFallthroughCasesInSwitch": true,
-		"declaration": false,
-		"sourceMap": false,
-		"target": "es2017",
-		"module": "esnext",
-		"moduleResolution": "node",
-		"removeComments": false,
-		"noLib": false,
-		"strict": true,
-		"strictNullChecks": true,
-		"experimentalDecorators": true,
-		"resolveJsonModule": true,
-		"allowSyntheticDefaultImports": true,
-		"isolatedModules": true,
-		"useDefineForClassFields": true,
-		"baseUrl": ".",
-		"paths": {
-			"@/*": ["./src/*"],
-		},
-		"typeRoots": [
-			"node_modules/@types",
-			"@types",
-		],
-		"types": [
-			"vite/client",
-		],
-		"lib": [
-			"esnext",
-			"dom"
-		],
-		"jsx": "preserve"
-	},
-	"compileOnSave": false,
-	"include": [
-		".eslintrc.js",
-		"./**/*.ts",
-		"./**/*.vue"
-	]
-}
diff --git a/packages/client/vite.config.ts b/packages/client/vite.config.ts
deleted file mode 100644
index 1acf5301b7..0000000000
--- a/packages/client/vite.config.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import pluginVue from '@vitejs/plugin-vue';
-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'];
-
-export default defineConfig(({ command, mode }) => {
-
-	return {
-		base: '/vite/',
-
-		plugins: [
-			pluginVue({
-				reactivityTransform: true,
-			}),
-			pluginJson5(),
-		],
-
-		resolve: {
-			extensions,
-			alias: {
-				'@/': __dirname + '/src/',
-				'/client-assets/': __dirname + '/assets/',
-				'/static-assets/': __dirname + '/../backend/assets/',
-			},
-		},
-
-		define: {
-			_VERSION_: JSON.stringify(meta.version),
-			_LANGS_: JSON.stringify(Object.entries(locales).map(([k, v]) => [k, v._lang_])),
-			_ENV_: JSON.stringify(process.env.NODE_ENV),
-			_DEV_: process.env.NODE_ENV !== 'production',
-			_PERF_PREFIX_: JSON.stringify('Misskey:'),
-			_DATA_TRANSFER_DRIVE_FILE_: JSON.stringify('mk_drive_file'),
-			_DATA_TRANSFER_DRIVE_FOLDER_: JSON.stringify('mk_drive_folder'),
-			_DATA_TRANSFER_DECK_COLUMN_: JSON.stringify('mk_deck_column'),
-			__VUE_OPTIONS_API__: true,
-			__VUE_PROD_DEVTOOLS__: false,
-		},
-
-		build: {
-			target: [
-				'chrome100',
-				'firefox100',
-				'safari15',
-				'es2017', // TODO: そのうち消す
-			],
-			manifest: 'manifest.json',
-			rollupOptions: {
-				input: {
-					app: './src/init.ts',
-				},
-				output: {
-					manualChunks: {
-						vue: ['vue'],
-					},
-				},
-			},
-			cssCodeSplit: true,
-			outDir: __dirname + '/../../built/_vite_',
-			assetsDir: '.',
-			emptyOutDir: false,
-			sourcemap: process.env.NODE_ENV === 'development',
-			reportCompressedSize: false,
-		},
-	};
-});
diff --git a/packages/client/vite.json5.ts b/packages/client/vite.json5.ts
deleted file mode 100644
index 0a37fbff44..0000000000
--- a/packages/client/vite.json5.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-// Original: https://github.com/rollup/plugins/tree/8835dd2aed92f408d7dc72d7cc25a9728e16face/packages/json
-
-import JSON5 from 'json5';
-import { Plugin } from 'rollup';
-import { createFilter, dataToEsm } from '@rollup/pluginutils';
-import { RollupJsonOptions } from '@rollup/plugin-json';
-
-export default function json5(options: RollupJsonOptions = {}): Plugin {
-	const filter = createFilter(options.include, options.exclude);
-	const indent = 'indent' in options ? options.indent : '\t';
-
-	return {
-		name: 'json5',
-
-		// eslint-disable-next-line no-shadow
-		transform(json, id) {
-			if (id.slice(-6) !== '.json5' || !filter(id)) return null;
-
-			try {
-				const parsed = JSON5.parse(json);
-				return {
-					code: dataToEsm(parsed, {
-						preferConst: options.preferConst,
-						compact: options.compact,
-						namedExports: options.namedExports,
-						indent,
-					}),
-					map: { mappings: '' },
-				};
-			} catch (err) {
-				const message = 'Could not parse JSON file';
-				const position = parseInt(/[\d]/.exec(err.message)[0], 10);
-				this.warn({ message, id, position });
-				return null;
-			}
-		},
-	};
-}
diff --git a/packages/frontend/.eslintrc.js b/packages/frontend/.eslintrc.js
new file mode 100644
index 0000000000..6c3bfb5a6e
--- /dev/null
+++ b/packages/frontend/.eslintrc.js
@@ -0,0 +1,89 @@
+module.exports = {
+	root: true,
+	env: {
+		'node': false,
+	},
+	parser: 'vue-eslint-parser',
+	parserOptions: {
+		'parser': '@typescript-eslint/parser',
+		tsconfigRootDir: __dirname,
+		project: ['./tsconfig.json'],
+		extraFileExtensions: ['.vue'],
+	},
+	extends: [
+		'../shared/.eslintrc.js',
+		'plugin:vue/vue3-recommended',
+	],
+	rules: {
+		'@typescript-eslint/no-empty-interface': [
+			'error',
+			{
+				'allowSingleExtends': true,
+			},
+		],
+		'@typescript-eslint/prefer-nullish-coalescing': [
+			'error',
+		],
+		// window の禁止理由: グローバルスコープと衝突し、予期せぬ結果を招くため
+		// e の禁止理由: error や event など、複数のキーワードの頭文字であり分かりにくいため
+		'id-denylist': ['error', 'window', 'e'],
+		'no-shadow': ['warn'],
+		'vue/attributes-order': ['error', {
+			'alphabetical': false,
+		}],
+		'vue/no-use-v-if-with-v-for': ['error', {
+			'allowUsingIterationVar': false,
+		}],
+		'vue/no-ref-as-operand': 'error',
+		'vue/no-multi-spaces': ['error', {
+			'ignoreProperties': false,
+		}],
+		'vue/no-v-html': 'warn',
+		'vue/order-in-components': 'error',
+		'vue/html-indent': ['warn', 'tab', {
+			'attribute': 1,
+			'baseIndent': 0,
+			'closeBracket': 0,
+			'alignAttributesVertically': true,
+			'ignores': [],
+		}],
+		'vue/html-closing-bracket-spacing': ['warn', {
+			'startTag': 'never',
+			'endTag': 'never',
+			'selfClosingTag': 'never',
+		}],
+		'vue/multi-word-component-names': 'warn',
+		'vue/require-v-for-key': 'warn',
+		'vue/no-unused-components': 'warn',
+		'vue/valid-v-for': 'warn',
+		'vue/return-in-computed-property': 'warn',
+		'vue/no-setup-props-destructure': 'warn',
+		'vue/max-attributes-per-line': 'off',
+		'vue/html-self-closing': 'off',
+		'vue/singleline-html-element-content-newline': 'off',
+		// (vue/vue3-recommended disabled the autofix for Vue 2 compatibility)
+		'vue/v-on-event-hyphenation': ['warn', 'always', { autofix: true }],
+	},
+	globals: {
+		// Node.js
+		'module': false,
+		'require': false,
+		'__dirname': false,
+
+		// Vue
+		'$$': false,
+		'$ref': false,
+		'$shallowRef': false,
+		'$computed': false,
+
+		// Misskey
+		'_DEV_': false,
+		'_LANGS_': false,
+		'_VERSION_': false,
+		'_ENV_': false,
+		'_PERF_PREFIX_': false,
+		'_DATA_TRANSFER_DRIVE_FILE_': false,
+		'_DATA_TRANSFER_DRIVE_FOLDER_': false,
+		'_DATA_TRANSFER_DECK_COLUMN_': false,
+	},
+};
diff --git a/packages/frontend/.vscode/settings.json b/packages/frontend/.vscode/settings.json
new file mode 100644
index 0000000000..1a79b6a7dc
--- /dev/null
+++ b/packages/frontend/.vscode/settings.json
@@ -0,0 +1,11 @@
+{
+	"typescript.tsdk": "node_modules\\typescript\\lib",
+	"path-intellisense.mappings": {
+		"@": "${workspaceRoot}/packages/frontend/src/"
+	},
+	"eslint.validate": [
+		"javascript",
+		"javascriptreact",
+		"vue"
+	]
+}
diff --git a/packages/frontend/@types/global.d.ts b/packages/frontend/@types/global.d.ts
new file mode 100644
index 0000000000..c757482900
--- /dev/null
+++ b/packages/frontend/@types/global.d.ts
@@ -0,0 +1,10 @@
+type FIXME = any;
+
+declare const _LANGS_: string[][];
+declare const _VERSION_: string;
+declare const _ENV_: string;
+declare const _DEV_: boolean;
+declare const _PERF_PREFIX_: string;
+declare const _DATA_TRANSFER_DRIVE_FILE_: string;
+declare const _DATA_TRANSFER_DRIVE_FOLDER_: string;
+declare const _DATA_TRANSFER_DECK_COLUMN_: string;
diff --git a/packages/frontend/@types/theme.d.ts b/packages/frontend/@types/theme.d.ts
new file mode 100644
index 0000000000..67f724a9aa
--- /dev/null
+++ b/packages/frontend/@types/theme.d.ts
@@ -0,0 +1,7 @@
+declare module '@/themes/*.json5' {
+	import { Theme } from "@/scripts/theme";
+
+	const theme: Theme;
+
+	export default theme;
+}
diff --git a/packages/frontend/@types/vue.d.ts b/packages/frontend/@types/vue.d.ts
new file mode 100644
index 0000000000..9c9c34ccc5
--- /dev/null
+++ b/packages/frontend/@types/vue.d.ts
@@ -0,0 +1,16 @@
+/// <reference types="vue/macros-global" />
+
+import type { $i } from '@/account';
+import type { defaultStore } from '@/store';
+import type { instance } from '@/instance';
+import type { i18n } from '@/i18n';
+
+declare module 'vue' {
+	interface ComponentCustomProperties {
+		$i: typeof $i;
+		$store: typeof defaultStore;
+		$instance: typeof instance;
+		$t: typeof i18n['t'];
+		$ts: typeof i18n['ts'];
+	}
+}
diff --git a/packages/frontend/assets/about-icon.png b/packages/frontend/assets/about-icon.png
new file mode 100644
index 0000000000..afc1f0c728
Binary files /dev/null and b/packages/frontend/assets/about-icon.png differ
diff --git a/packages/frontend/assets/dummy.png b/packages/frontend/assets/dummy.png
new file mode 100644
index 0000000000..39332b0c1b
Binary files /dev/null and b/packages/frontend/assets/dummy.png differ
diff --git a/packages/frontend/assets/fedi.jpg b/packages/frontend/assets/fedi.jpg
new file mode 100644
index 0000000000..cbf3748eb8
Binary files /dev/null and b/packages/frontend/assets/fedi.jpg differ
diff --git a/packages/frontend/assets/label-red.svg b/packages/frontend/assets/label-red.svg
new file mode 100644
index 0000000000..45996aa9ce
--- /dev/null
+++ b/packages/frontend/assets/label-red.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
+<polygon fill="#ea2412" points="0,45.255 45.254,0 84.854,0 0,84.854 "/>
+</svg>
diff --git a/packages/frontend/assets/label.svg b/packages/frontend/assets/label.svg
new file mode 100644
index 0000000000..b1f85f3c07
--- /dev/null
+++ b/packages/frontend/assets/label.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
+<polygon fill="#0B8AEA" points="0,45.255 45.254,0 84.854,0 0,84.854 "/>
+</svg>
diff --git a/packages/frontend/assets/misskey.svg b/packages/frontend/assets/misskey.svg
new file mode 100644
index 0000000000..3fcb2d3ecb
--- /dev/null
+++ b/packages/frontend/assets/misskey.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="515px" height="136px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="path2" transform="matrix(0.264585,0,0,0.264585,-50.0005,-50.0001)">
+        <path d="M256.418,188.976C248.558,188.944 240.758,190.308 233.379,193.013C220.308,197.613 209.533,205.888 201.091,217.802C193.02,229.329 188.977,242.195 188.977,256.409L188.977,508.89C188.977,527.332 195.52,543.29 208.576,556.732C222.032,569.803 237.99,576.331 256.418,576.331C275.259,576.331 291.204,569.803 304.274,556.747C317.73,543.291 324.441,527.332 324.441,508.89L324.441,462.983C324.584,453.04 334.824,455.655 340.01,462.983C349.695,479.767 370.251,494.19 394.193,494.105L394.193,494.119C418.119,494.019 438.005,482.196 448.375,462.983C452.304,458.354 463.377,450.455 464.52,462.983L464.52,508.89C464.52,527.332 471.047,543.29 484.104,556.732C497.574,569.803 513.511,576.331 531.953,576.331C550.78,576.331 566.739,569.803 579.809,556.747C593.265,543.291 599.977,527.332 599.977,508.89L599.977,256.409C599.977,242.195 595.752,229.329 587.309,217.802C579.224,205.874 568.653,197.613 555.597,193.013C547.912,190.314 540.228,188.976 532.543,188.976C511.788,188.976 494.301,197.046 480.073,213.188L411.636,293.281C410.107,294.438 405.006,303.247 394.178,303.247C383.379,303.247 378.868,294.439 377.325,293.296L308.297,213.188C294.47,197.046 277.173,188.976 256.418,188.976ZM682.904,188.983C666.763,188.983 652.926,194.748 641.404,206.271C630.261,217.413 624.691,231.054 624.691,247.196C624.691,263.338 630.261,277.174 641.404,288.697C652.926,299.839 666.763,305.41 682.904,305.41C699.046,305.41 712.88,299.839 724.412,288.697C735.935,277.174 741.693,263.338 741.693,247.196C741.693,231.054 735.935,217.413 724.412,206.271C712.88,194.748 699.046,188.983 682.904,188.983ZM1327.58,193.013C1311.45,193.013 1297.62,198.779 1286.1,210.302C1274.96,221.444 1269.38,235.08 1269.38,251.212L1269.38,519.72C1269.38,535.861 1274.96,549.697 1286.1,561.22C1297.62,572.362 1311.45,577.933 1327.58,577.933C1343.73,577.933 1357.55,572.362 1369.08,561.22C1380.6,549.697 1386.37,535.867 1386.37,519.734C1386.37,508.211 1387.9,502.453 1390.96,502.453C1392.51,502.453 1394.05,503.023 1395.58,504.166L1453.2,560.061C1464.72,571.203 1478.36,576.774 1494.11,576.774C1510.62,576.774 1524.45,571.009 1535.6,559.486C1546.74,547.572 1552.31,533.936 1552.31,518.575C1552.31,502.053 1546.36,488.029 1534.45,476.506C1508.32,450.765 1494.69,437.517 1493.54,436.755C1488.54,431.755 1488.73,427.53 1494.11,424.073L1495.27,423.497L1495.27,422.929L1531.57,399.875C1548.85,388.352 1557.5,372.026 1557.5,350.904C1557.5,339.381 1554.42,328.622 1548.28,318.623C1536.76,301.339 1520.43,292.691 1499.3,292.691C1487.78,292.691 1477.02,295.768 1467.04,301.911C1422.48,331.499 1399.42,346.678 1397.88,347.449C1395.2,349.363 1392.7,349.738 1390.4,348.586C1387.7,347.434 1386.35,344.939 1386.35,341.101L1386.35,251.212C1386.35,235.08 1380.59,221.444 1369.07,210.302C1357.55,198.779 1343.72,193.013 1327.58,193.013ZM1716.37,291.738C1676.42,291.738 1642.24,305.949 1613.81,334.376C1585.76,362.422 1571.74,396.227 1571.74,435.795C1571.74,475.745 1585.76,509.932 1613.81,538.359C1642.24,566.404 1676.42,580.428 1716.37,580.428C1755.94,580.428 1789.94,566.404 1818.37,538.359C1827.2,529.521 1831.62,518.773 1831.62,506.107C1831.62,493.423 1827.2,482.664 1818.37,473.827C1809.53,464.999 1798.77,460.584 1786.11,460.584C1773.42,460.584 1762.66,464.999 1753.83,473.827C1743.46,484.588 1730.97,489.963 1716.37,489.963C1701.4,489.963 1688.53,484.78 1677.77,474.41C1667.39,463.649 1662.2,450.775 1662.2,435.795C1662.2,421.206 1667.59,408.72 1678.35,398.34C1683.73,392.578 1690.26,388.74 1697.93,386.817C1699.87,386.436 1701.4,386.623 1702.55,387.385C1703.32,388.547 1702.93,389.702 1701.39,390.854L1689.87,402.953C1681.03,411.791 1676.61,422.359 1676.61,434.644C1676.61,447.319 1680.45,457.497 1688.13,465.182C1695.81,472.868 1706.57,476.705 1720.41,476.705C1730.01,476.705 1739.61,471.91 1749.21,462.311L1816.06,396.044C1824.9,387.197 1829.32,376.436 1829.32,363.77C1829.32,351.086 1824.9,340.332 1816.06,331.504C1789.17,304.992 1755.94,291.738 1716.37,291.738ZM877.977,292.668C841.947,292.194 813.839,301.679 793.662,321.133C775.996,338.036 767.168,359.358 767.168,385.089C767.549,417.363 780.035,441.565 804.624,457.697C811.918,462.687 820.941,466.72 831.693,469.796C837.083,471.72 846.111,474.02 858.777,476.705C869.919,479.391 882.023,481.886 895.088,484.191C897.774,484.962 898.924,486.312 898.543,488.236C898.543,490.541 897.58,491.691 895.657,491.691C890.667,492.072 886.059,492.266 881.831,492.266C850.328,488.81 829.001,485.927 817.859,483.622C814.793,482.851 811.535,482.463 808.078,482.463C796.165,482.463 785.787,486.884 776.949,495.721C768.502,504.178 764.282,514.551 764.282,526.836C764.282,536.825 767.352,545.854 773.494,553.92C780.027,561.986 788.486,567.169 798.866,569.473C831.13,576.778 860.317,580.428 886.429,580.428C922.16,580.428 950.013,570.825 969.992,551.617C987.277,535.094 995.925,513.775 995.925,487.653C995.925,455.388 983.626,431.187 959.037,415.045C945.972,406.598 927.915,400.45 904.869,396.612C891.042,393.927 879.518,391.427 870.3,389.112L870.3,389.127C867.605,388.356 866.067,386.818 865.686,384.513C865.686,382.59 867.224,381.44 870.3,381.059C873.757,380.678 877.415,380.678 881.262,381.059C913.146,384.135 934.652,386.823 945.794,389.127C948.861,389.889 951.931,390.271 955.007,390.271C967.301,390.271 977.674,386.051 986.121,377.604C994.959,368.767 999.379,358.393 999.379,346.49C999.379,336.109 996.109,326.894 989.576,318.837C983.043,310.761 974.79,305.566 964.81,303.261C938.298,297.5 911.788,294.042 885.285,292.89C882.813,292.77 880.379,292.7 877.977,292.668ZM1128.73,292.668C1092.7,292.194 1064.59,301.679 1044.42,321.133C1026.75,338.036 1017.92,359.358 1017.92,385.089C1018.3,417.363 1030.79,441.565 1055.38,457.697C1062.67,462.687 1071.7,466.72 1082.46,469.796C1087.84,471.72 1096.86,474.02 1109.54,476.705C1120.68,479.391 1132.79,481.886 1145.84,484.191C1148.53,484.962 1149.68,486.312 1149.3,488.236C1149.3,490.541 1148.34,491.691 1146.41,491.691C1141.42,492.072 1136.81,492.266 1132.59,492.266C1101.09,488.81 1079.77,485.927 1068.63,483.622C1065.55,482.851 1062.29,482.463 1058.83,482.463C1046.92,482.463 1036.55,486.884 1027.72,495.721C1019.26,504.178 1015.04,514.551 1015.04,526.836C1015.04,536.825 1018.11,545.854 1024.26,553.92C1030.79,561.986 1039.24,567.169 1049.62,569.473C1081.88,576.778 1111.08,580.428 1137.2,580.428C1172.92,580.428 1200.77,570.825 1220.75,551.617C1238.03,535.094 1246.68,513.775 1246.68,487.653C1246.68,455.388 1234.39,431.187 1209.81,415.045C1196.74,406.598 1178.68,400.45 1155.64,396.612C1141.81,393.927 1130.29,391.427 1121.07,389.112L1121.05,389.127C1118.37,388.356 1116.84,386.818 1116.45,384.513C1116.45,382.59 1117.99,381.44 1121.05,381.059C1124.52,380.678 1128.17,380.678 1132.01,381.059C1163.89,384.135 1185.41,386.823 1196.55,389.127C1199.62,389.889 1202.69,390.271 1205.76,390.271C1218.06,390.271 1228.43,386.051 1236.89,377.604C1245.72,368.767 1250.13,358.393 1250.13,346.49C1250.13,336.109 1246.87,326.894 1240.35,318.837C1233.81,310.761 1225.55,305.566 1215.56,303.261C1189.06,297.5 1162.55,294.042 1136.04,292.89C1133.57,292.77 1131.13,292.7 1128.73,292.668ZM1910.17,296.736C1894.04,296.736 1880.21,302.501 1868.69,314.024C1857.55,325.157 1851.98,338.793 1851.98,354.934L1851.98,435.028C1851.98,473.825 1865.8,507.05 1893.45,534.705C1921.12,562.36 1954.36,576.191 1993.15,576.191C2000.84,576.191 2007.95,575.614 2014.48,574.471C2018.32,573.699 2021,574.469 2022.53,576.774C2023.69,578.307 2023.3,580.42 2021.39,583.115C2016.39,590.029 2005.82,593.486 1989.69,593.486C1983.55,593.486 1975.68,591.949 1966.07,588.873C1956.47,585.797 1948.98,584.259 1943.6,584.259C1920.93,584.259 1904.99,594.638 1895.77,615.388C1892.32,622.302 1890.58,629.598 1890.58,637.283C1890.58,659.948 1900.77,675.892 1921.13,685.11C1941.49,694.709 1964.34,699.505 1989.69,699.505C2033.49,699.505 2068.25,686.639 2093.98,660.898C2120.11,635.166 2133.18,600.784 2133.18,557.758L2133.18,452.308C2133.94,446.157 2134.32,440.399 2134.32,435.028L2134.32,354.934C2134.32,338.802 2128.57,325.166 2117.04,314.024C2105.9,302.501 2092.27,296.736 2076.13,296.736C2059.99,296.736 2046.16,302.501 2034.63,314.024C2023.11,325.157 2017.35,338.793 2017.35,354.934L2017.35,435.028C2017.35,441.551 2015.04,447.309 2010.43,452.308C2005.83,456.918 2000.07,459.225 1993.15,459.225C1986.62,459.225 1980.86,456.918 1975.87,452.308C1971.26,447.309 1968.95,441.551 1968.95,435.028L1968.95,354.934C1968.95,338.802 1963.19,325.166 1951.67,314.024C1940.14,302.501 1926.3,296.736 1910.17,296.736ZM683.473,316.947C667.331,316.947 653.495,322.713 641.972,334.236C630.449,345.768 624.691,359.602 624.691,375.744L624.691,518.118C624.691,534.259 630.449,548.095 641.972,559.618C653.504,570.761 667.341,576.331 683.473,576.331C699.624,576.331 713.27,570.761 724.412,559.618C735.935,548.095 741.693,534.259 741.693,518.118L741.693,375.744C741.693,359.593 735.935,345.759 724.412,334.236C713.261,322.713 699.614,316.947 683.473,316.947Z" style="fill:white;fill-rule:nonzero;"/>
+    </g>
+</svg>
diff --git a/packages/frontend/assets/remove.png b/packages/frontend/assets/remove.png
new file mode 100644
index 0000000000..c2e222a0fc
Binary files /dev/null and b/packages/frontend/assets/remove.png differ
diff --git a/packages/frontend/assets/sounds/aisha/1.mp3 b/packages/frontend/assets/sounds/aisha/1.mp3
new file mode 100644
index 0000000000..d8e9a2f265
Binary files /dev/null and b/packages/frontend/assets/sounds/aisha/1.mp3 differ
diff --git a/packages/frontend/assets/sounds/aisha/2.mp3 b/packages/frontend/assets/sounds/aisha/2.mp3
new file mode 100644
index 0000000000..477c2eba43
Binary files /dev/null and b/packages/frontend/assets/sounds/aisha/2.mp3 differ
diff --git a/packages/frontend/assets/sounds/aisha/3.mp3 b/packages/frontend/assets/sounds/aisha/3.mp3
new file mode 100644
index 0000000000..fe0d8063df
Binary files /dev/null and b/packages/frontend/assets/sounds/aisha/3.mp3 differ
diff --git a/packages/frontend/assets/sounds/noizenecio/kick_gaba1.mp3 b/packages/frontend/assets/sounds/noizenecio/kick_gaba1.mp3
new file mode 100644
index 0000000000..616b506c4f
Binary files /dev/null and b/packages/frontend/assets/sounds/noizenecio/kick_gaba1.mp3 differ
diff --git a/packages/frontend/assets/sounds/noizenecio/kick_gaba2.mp3 b/packages/frontend/assets/sounds/noizenecio/kick_gaba2.mp3
new file mode 100644
index 0000000000..33c2837620
Binary files /dev/null and b/packages/frontend/assets/sounds/noizenecio/kick_gaba2.mp3 differ
diff --git a/packages/frontend/assets/sounds/noizenecio/kick_gaba3.mp3 b/packages/frontend/assets/sounds/noizenecio/kick_gaba3.mp3
new file mode 100644
index 0000000000..1791f26573
Binary files /dev/null and b/packages/frontend/assets/sounds/noizenecio/kick_gaba3.mp3 differ
diff --git a/packages/frontend/assets/sounds/noizenecio/kick_gaba4.mp3 b/packages/frontend/assets/sounds/noizenecio/kick_gaba4.mp3
new file mode 100644
index 0000000000..5f8bf468e5
Binary files /dev/null and b/packages/frontend/assets/sounds/noizenecio/kick_gaba4.mp3 differ
diff --git a/packages/frontend/assets/sounds/noizenecio/kick_gaba5.mp3 b/packages/frontend/assets/sounds/noizenecio/kick_gaba5.mp3
new file mode 100644
index 0000000000..dabe754b5b
Binary files /dev/null and b/packages/frontend/assets/sounds/noizenecio/kick_gaba5.mp3 differ
diff --git a/packages/frontend/assets/sounds/noizenecio/kick_gaba6.mp3 b/packages/frontend/assets/sounds/noizenecio/kick_gaba6.mp3
new file mode 100644
index 0000000000..57ecb01bda
Binary files /dev/null and b/packages/frontend/assets/sounds/noizenecio/kick_gaba6.mp3 differ
diff --git a/packages/frontend/assets/sounds/noizenecio/kick_gaba7.mp3 b/packages/frontend/assets/sounds/noizenecio/kick_gaba7.mp3
new file mode 100644
index 0000000000..6ba317deb1
Binary files /dev/null and b/packages/frontend/assets/sounds/noizenecio/kick_gaba7.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/down.mp3 b/packages/frontend/assets/sounds/syuilo/down.mp3
new file mode 100644
index 0000000000..4cd421139d
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/down.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/kick.mp3 b/packages/frontend/assets/sounds/syuilo/kick.mp3
new file mode 100644
index 0000000000..4e0e72091c
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/kick.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/pirori-square-wet.mp3 b/packages/frontend/assets/sounds/syuilo/pirori-square-wet.mp3
new file mode 100644
index 0000000000..babf1fce60
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/pirori-square-wet.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/pirori-wet.mp3 b/packages/frontend/assets/sounds/syuilo/pirori-wet.mp3
new file mode 100644
index 0000000000..25e2c46a64
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/pirori-wet.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/pirori.mp3 b/packages/frontend/assets/sounds/syuilo/pirori.mp3
new file mode 100644
index 0000000000..a745415ac0
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/pirori.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/poi1.mp3 b/packages/frontend/assets/sounds/syuilo/poi1.mp3
new file mode 100644
index 0000000000..59dae90965
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/poi1.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/poi2.mp3 b/packages/frontend/assets/sounds/syuilo/poi2.mp3
new file mode 100644
index 0000000000..a65c653891
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/poi2.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/pope1.mp3 b/packages/frontend/assets/sounds/syuilo/pope1.mp3
new file mode 100644
index 0000000000..d6f53cfacc
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/pope1.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/pope2.mp3 b/packages/frontend/assets/sounds/syuilo/pope2.mp3
new file mode 100644
index 0000000000..fe5d95e292
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/pope2.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/popo.mp3 b/packages/frontend/assets/sounds/syuilo/popo.mp3
new file mode 100644
index 0000000000..a2a1605bbb
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/popo.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/queue-jammed.mp3 b/packages/frontend/assets/sounds/syuilo/queue-jammed.mp3
new file mode 100644
index 0000000000..99e0c437fe
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/queue-jammed.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/reverved.mp3 b/packages/frontend/assets/sounds/syuilo/reverved.mp3
new file mode 100644
index 0000000000..47588ef270
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/reverved.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/ryukyu.mp3 b/packages/frontend/assets/sounds/syuilo/ryukyu.mp3
new file mode 100644
index 0000000000..9e935e3f37
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/ryukyu.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/snare.mp3 b/packages/frontend/assets/sounds/syuilo/snare.mp3
new file mode 100644
index 0000000000..9244189c2d
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/snare.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/square-pico.mp3 b/packages/frontend/assets/sounds/syuilo/square-pico.mp3
new file mode 100644
index 0000000000..c4d8305ae7
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/square-pico.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/triple.mp3 b/packages/frontend/assets/sounds/syuilo/triple.mp3
new file mode 100644
index 0000000000..54ab974d46
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/triple.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/up.mp3 b/packages/frontend/assets/sounds/syuilo/up.mp3
new file mode 100644
index 0000000000..3f30867764
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/up.mp3 differ
diff --git a/packages/frontend/assets/sounds/syuilo/waon.mp3 b/packages/frontend/assets/sounds/syuilo/waon.mp3
new file mode 100644
index 0000000000..a4af473861
Binary files /dev/null and b/packages/frontend/assets/sounds/syuilo/waon.mp3 differ
diff --git a/packages/frontend/assets/tagcanvas.min.js b/packages/frontend/assets/tagcanvas.min.js
new file mode 100644
index 0000000000..bcee46e682
--- /dev/null
+++ b/packages/frontend/assets/tagcanvas.min.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (C) 2010-2021 Graham Breach
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ * 
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+/**
+ * TagCanvas 2.11
+ * For more information, please contact <graham@goat1000.com>
+ */
+ (function(){"use strict";var r,C,p=Math.abs,o=Math.sin,l=Math.cos,g=Math.max,h=Math.min,af=Math.ceil,E=Math.sqrt,w=Math.pow,I={},D={},R={0:"0,",1:"17,",2:"34,",3:"51,",4:"68,",5:"85,",6:"102,",7:"119,",8:"136,",9:"153,",a:"170,",A:"170,",b:"187,",B:"187,",c:"204,",C:"204,",d:"221,",D:"221,",e:"238,",E:"238,",f:"255,",F:"255,"},f,d,b,T,z,F,M,c=document,v,e,P,j={};for(r=0;r<256;++r)C=r.toString(16),r<16&&(C='0'+C),D[C]=D[C.toUpperCase()]=r.toString()+',';function n(a){return typeof a!='undefined'}function B(a){return typeof a=='object'&&a!=null}function G(a,c,b){return isNaN(a)?b:h(b,g(c,a))}function x(){return!1}function q(){return(new Date).valueOf()}function ak(c,d){var b=[],e=c.length,a;for(a=0;a<e;++a)b.push(c[a]);return b.sort(d),b}function ai(a){for(var b=a.length-1,d,c;b;)c=~~(Math.random()*b),d=a[b],a[b]=a[c],a[c]=d,--b}function ag(){var a=window.AudioContext||window.webkitAudioContext;if(e=new a,!e){e='off';return}return e}function $(u,a,t,s,r,q,p){var j=s,h=r,i=t*.01,n=80*i,m=100*i,o=40*i,l=30*i,c=l/2,b=j+n,f=b-o,k=h+m,d=k-l,g=h+l,e=h+m/2;if(a.setTransform(1,0,0,1,0,0),a.setLineDash([]),a.globalAlpha=1,a.strokeStyle=p,a.lineWidth=q,a.lineJoin='round',a.beginPath(),a.moveTo(f,g),a.lineTo(f,d),a.moveTo(b,k),a.lineTo(f,d),a.lineTo(j,d),a.lineTo(j,g),a.lineTo(f,g),a.lineTo(b,h),u){a.lineTo(b,g),a.moveTo(b,d),a.lineTo(b,k),a.moveTo(b-c,e-c),a.lineTo(b+c,e+c),a.moveTo(b+c,e-c),a.lineTo(b-c,e+c),a.stroke();return}a.closePath(),a.stroke()}function s(a,b,c){this.x=a,this.y=b,this.z=c}z=s.prototype,z.length=function(){return E(this.x*this.x+this.y*this.y+this.z*this.z)},z.dot=function(a){return this.x*a.x+this.y*a.y+this.z*a.z},z.cross=function(a){var b=this.y*a.z-this.z*a.y,c=this.z*a.x-this.x*a.z,d=this.x*a.y-this.y*a.x;return new s(b,c,d)},z.angle=function(b){var c=this.dot(b),a;return c==0?Math.PI/2:(a=c/(this.length()*b.length()),a>=1)?0:a<=-1?Math.PI:Math.acos(a)},z.unit=function(){var a=this.length();return new s(this.x/a,this.y/a,this.z/a)};function ay(b,a){a=a*Math.PI/180,b=b*Math.PI/180;var c=o(b)*l(a),d=-o(a),e=-l(b)*l(a);return new s(c,d,e)}function m(a){this[1]={1:a[0],2:a[1],3:a[2]},this[2]={1:a[3],2:a[4],3:a[5]},this[3]={1:a[6],2:a[7],3:a[8]}}T=m.prototype,m.Identity=function(){return new m([1,0,0,0,1,0,0,0,1])},m.Rotation=function(e,a){var c=o(e),d=l(e),b=1-d;return new m([d+w(a.x,2)*b,a.x*a.y*b-a.z*c,a.x*a.z*b+a.y*c,a.y*a.x*b+a.z*c,d+w(a.y,2)*b,a.y*a.z*b-a.x*c,a.z*a.x*b-a.y*c,a.z*a.y*b+a.x*c,d+w(a.z,2)*b])},T.mul=function(c){var d=[],a,b,e=c.xform?1:0;for(a=1;a<=3;++a)for(b=1;b<=3;++b)e?d.push(this[a][1]*c[1][b]+this[a][2]*c[2][b]+this[a][3]*c[3][b]):d.push(this[a][b]*c);return new m(d)},T.xform=function(b){var a={},c=b.x,d=b.y,e=b.z;return a.x=c*this[1][1]+d*this[2][1]+e*this[3][1],a.y=c*this[1][2]+d*this[2][2]+e*this[3][2],a.z=c*this[1][3]+d*this[2][3]+e*this[3][3],a};function aB(g,j,k,m,f){var a,b,c,d,e=[],h=2/g,i;i=Math.PI*(3-E(5)+(parseFloat(f)?parseFloat(f):0));for(a=0;a<g;++a)b=a*h-1+h/2,c=E(1-b*b),d=a*i,e.push([l(d)*c*j,b*k,o(d)*c*m]);return e}function U(n,p,m,k,h,g){var b,f=[],i=2/n,j,a,d,c,e;j=Math.PI*(3-E(5)+(parseFloat(g)?parseFloat(g):0));for(a=0;a<n;++a)d=a*i-1+i/2,b=a*j,c=l(b),e=o(b),f.push(p?[d*m,c*k,e*h]:[c*m,d*k,e*h]);return f}function aa(k,e,f,h,i,j){var b,g=[],m=Math.PI*2/e,a,c,d;for(a=0;a<e;++a)b=a*m,c=l(b),d=o(b),g.push(k?[j*f,c*h,d*i]:[c*f,j*h,d*i]);return g}function ax(a,b,c,d,e){return U(a,0,b,c,d,e)}function aH(a,b,c,d,e){return U(a,1,b,c,d,e)}function aG(b,c,d,e,a){return a=isNaN(a)?0:a*1,aa(0,b,c,d,e,a)}function aF(b,c,d,e,a){return a=isNaN(a)?0:a*1,aa(1,b,c,d,e,a)}function av(b){var a=new Image;a.onload=function(){var c=a.width/2,d=a.height/2;b.centreFunc=function(b,g,h,e,f){b.setTransform(1,0,0,1,0,0),b.globalAlpha=1,b.drawImage(a,e-c,f-d)}},a.src=b.centreImage}function aE(a,c){var b=a,d,e,f=(c*1).toPrecision(3)+')';return a[0]==='#'?(I[a]||(a.length===4?I[a]='rgba('+R[a[1]]+R[a[2]]+R[a[3]]:I[a]='rgba('+D[a.substr(1,2)]+D[a.substr(3,2)]+D[a.substr(5,2)]),b=I[a]+f):a.substr(0,4)==='rgb('||a.substr(0,4)==='hsl('?b=a.replace('(','a(').replace(')',','+f):(a.substr(0,5)==='rgba('||a.substr(0,5)==='hsla(')&&(d=a.lastIndexOf(',')+1,e=a.indexOf(')'),c*=parseFloat(a.substring(d,e)),b=a.substr(0,d)+c.toPrecision(3)+')'),b}function k(b,d){if(window.G_vmlCanvasManager)return null;var a=c.createElement('canvas');return a.width=b,a.height=d,a}function aD(){var b=k(3,3),a,c;return!!b&&(a=b.getContext('2d'),a.strokeStyle='#000',a.shadowColor='#fff',a.shadowBlur=3,a.globalAlpha=0,a.strokeRect(2,2,2,2),a.globalAlpha=1,c=a.getImageData(2,2,1,1),b=null,c.data[0]>0)}function aC(a,c,f,d){var e=a.createLinearGradient(0,0,c,0),b;for(b in d)e.addColorStop(1-b,d[b]);a.fillStyle=e,a.fillRect(0,f,c,1)}function L(a,m,j){var l=1024,d=1,e=a.weightGradient,i,f,b,c;if(a.gCanvas)f=a.gCanvas.getContext('2d'),d=a.gCanvas.height;else{if(B(e[0])?d=e.length:e=[e],a.gCanvas=i=k(l,d),!i)return null;f=i.getContext('2d');for(b=0;b<d;++b)aC(f,l,b,e[b])}return j=g(h(j||0,d-1),0),c=f.getImageData(~~((l-1)*m),j,1,1).data,'rgba('+c[0]+','+c[1]+','+c[2]+','+c[3]/255+')'}function Y(b,i,q,k,o,n,h,d,a,g,f,l){var m=o+(d||0)+(a.length&&a[0]<0?p(a[0]):0),j=n+(d||0)+(a.length&&a[1]<0?p(a[1]):0),c,e;b.font=i,b.textBaseline='top',b.fillStyle=q,h&&(b.shadowColor=h),d&&(b.shadowBlur=d),a.length&&(b.shadowOffsetX=a[0],b.shadowOffsetY=a[1]);for(c=0;c<k.length;++c)e=0,f&&('right'==l?e=g-f[c]:'centre'==l&&(e=(g-f[c])/2)),b.fillText(k[c],m+e,j),j+=parseInt(i)}function y(d,a,b,f,e,c,g){c?(d.beginPath(),d.moveTo(a,b+e-c),d.arcTo(a,b,a+c,b,c),d.arcTo(a+f,b,a+f,b+c,c),d.arcTo(a+f,b+e,a+f-c,b+e,c),d.arcTo(a,b+e,a,b+e-c,c),d.closePath(),d[g?'stroke':'fill']()):d[g?'strokeRect':'fillRect'](a,b,f,e)}function O(a,b,c,d,e,f,g,h,i){this.strings=a,this.font=b,this.width=c,this.height=d,this.maxWidth=e,this.stringWidths=f,this.align=g,this.valign=h,this.scale=i}M=O.prototype,M.SetImage=function(a,b,c,d,e,f,g,h){this.image=a,this.iwidth=b*this.scale,this.iheight=c*this.scale,this.ipos=d,this.ipad=e*this.scale,this.iscale=h,this.ialign=f,this.ivalign=g},M.Align=function(c,d,a){var b=0;return a=='right'||a=='bottom'?b=d-c:a!='left'&&a!='top'&&(b=(d-c)/2),b},M.Create=function(G,D,F,b,A,m,q,j,E){var o,e,f,a,l,s,i,u,v,r,w,n,c,d,x,B=p(q[0]),C=p(q[1]),t,z;return j=g(j,B+m,C+m),l=2*(j+b),i=2*(j+b),e=this.width+l,f=this.height+i,v=r=j+b,this.image&&(w=n=j+b,c=this.iwidth,d=this.iheight,this.ipos=='top'||this.ipos=='bottom'?(c<this.width?w+=this.Align(c,this.width,this.ialign):v+=this.Align(this.width,c,this.align),this.ipos=='top'?r+=d+this.ipad:n+=this.height+this.ipad,e=g(e,c+l),f+=d+this.ipad):(d<this.height?n+=this.Align(d,this.height,this.ivalign):r+=this.Align(this.height,d,this.valign),this.ipos=='right'?w+=this.width+this.ipad:v+=c+this.ipad,e+=c+this.ipad,f=g(f,d+i))),o=k(e,f),!o?null:(l=i=b/2,s=e-b,u=f-b,x=h(E,s/2,u/2),a=o.getContext('2d'),D&&(a.fillStyle=D,y(a,l,i,s,u,x)),b&&(a.strokeStyle=F,a.lineWidth=b,y(a,l,i,s,u,x,!0)),(m||B||C)&&(t=k(e,f),t&&(z=a,a=t.getContext('2d'))),Y(a,this.font,G,this.strings,v,r,0,0,[],this.maxWidth,this.stringWidths,this.align),this.image&&a.drawImage(this.image,w,n,c,d),z&&(a=z,A&&(a.shadowColor=A),m&&(a.shadowBlur=m),a.shadowOffsetX=q[0],a.shadowOffsetY=q[1],a.drawImage(t,0,0)),o)};function H(a,c,d){var b=k(c,d),e;return b?(e=b.getContext('2d'),e.drawImage(a,(c-a.width)/2,(d-a.height)/2),b):null}function S(e,b,c){var a=k(b,c),d;return a?(d=a.getContext('2d'),d.drawImage(e,0,0,b,c),a):null}function W(n,u,t,e,s,c,v,d,r,w){var g=u+(2*d+c)*e,f=t+(2*d+c)*e,l=k(g,f),b,i,q,m,j,o,a,p;return l?(c*=e,r*=e,i=q=c/2,m=g-c,j=f-c,d=d*e+i,b=l.getContext('2d'),p=h(r,m/2,j/2),s&&(b.fillStyle=s,y(b,i,q,m,j,p)),c&&(b.strokeStyle=v,b.lineWidth=c,y(b,i,q,m,j,p,!0)),w?(o=k(g,f),a=o.getContext('2d'),a.drawImage(n,d,d,u,t),a.globalCompositeOperation='source-in',a.fillStyle=v,a.fillRect(0,0,g,f),a.globalCompositeOperation='destination-over',a.drawImage(l,0,0),a.globalCompositeOperation='source-over',b.drawImage(o,0,0)):b.drawImage(n,d,d,n.width,n.height),{image:l,width:g/e,height:f/e}):null}function at(l,f,c,d,j){var e,a,b=parseFloat(f),i=g(c,d);return e=k(c,d),!e?null:(f.indexOf('%')>0?b=i*b/100:b=b*j,a=e.getContext('2d'),a.globalCompositeOperation='source-over',a.fillStyle='#fff',b>=i/2?(b=h(c,d)/2,a.beginPath(),a.moveTo(c/2,d/2),a.arc(c/2,d/2,b,0,2*Math.PI,!1),a.fill(),a.closePath()):(b=h(c/2,d/2,b),y(a,0,0,c,d,b,!0),a.fill()),a.globalCompositeOperation='source-in',a.drawImage(l,0,0,c,d),e)}function ao(q,m,i,b,h,a,c){var g=p(c[0]),f=p(c[1]),j=m+(g>a?g+a:a*2)*b,l=i+(f>a?f+a:a*2)*b,n=b*((a||0)+(c[0]<0?g:0)),o=b*((a||0)+(c[1]<0?f:0)),e,d;return e=k(j,l),!e?null:(d=e.getContext('2d'),h&&(d.shadowColor=h),a&&(d.shadowBlur=a*b),c&&(d.shadowOffsetX=c[0]*b,d.shadowOffsetY=c[1]*b),d.drawImage(q,n,o,m,i),{image:e,width:j/b,height:l/b})}function ae(m,o,l){var c=parseInt(m.toString().length*l),h=parseInt(l*2*m.length),j=k(c,h),g,i,e,f,b,d,n,a;if(!j)return null;g=j.getContext('2d'),g.fillStyle='#000',g.fillRect(0,0,c,h),Y(g,l+'px '+o,'#fff',m,0,0,0,0,[],'centre'),i=g.getImageData(0,0,c,h),e=i.width,f=i.height,a={min:{x:e,y:f},max:{x:-1,y:-1}};for(d=0;d<f;++d)for(b=0;b<e;++b)n=(d*e+b)*4,i.data[n+1]>0&&(b<a.min.x&&(a.min.x=b),b>a.max.x&&(a.max.x=b),d<a.min.y&&(a.min.y=d),d>a.max.y&&(a.max.y=d));return e!=c&&(a.min.x*=c/e,a.max.x*=c/e),f!=h&&(a.min.y*=c/f,a.max.y*=c/f),j=null,a}function Q(a){return"'"+a.replace(/(\'|\")/g,'').replace(/\s*,\s*/g,"', '")+"'"}function t(b,d,a){a=a||c,a.addEventListener?a.addEventListener(b,d,!1):a.attachEvent('on'+b,d)}function am(b,d,a){a=a||c,a.removeEventListener?a.removeEventListener(b,d):a.detachEvent('on'+b,d)}function A(g,e,j,a,b){var l=b.imageScale,h,c,k,m,f,d;if(!e.complete)return t('load',function(){A(g,e,j,a,b)},e);if(!g.complete)return t('load',function(){A(g,e,j,a,b)},g);if(j&&!j.complete)return t('load',function(){A(g,e,j,a,b)},j);e.width=e.width,e.height=e.height,l&&(g.width=e.width*l,g.height=e.height*l),a.iw=g.width,a.ih=g.height,b.txtOpt&&(c=g,h=b.zoomMax*b.txtScale,f=a.iw*h,d=a.ih*h,f<e.naturalWidth||d<e.naturalHeight?(c=S(g,f,d),c&&(a.fimage=c)):(f=a.iw,d=a.ih,h=1),parseFloat(b.imageRadius)&&(a.image=a.fimage=g=at(a.image,b.imageRadius,f,d,h)),a.HasText()||(b.shadow&&(c=ao(a.image,f,d,h,b.shadow,b.shadowBlur,b.shadowOffset),c&&(a.fimage=c.image,a.w=c.width,a.h=c.height)),(b.bgColour||b.bgOutlineThickness)&&(k=b.bgColour=='tag'?i(a.a,'background-color'):b.bgColour,m=b.bgOutline=='tag'?i(a.a,'color'):b.bgOutline||b.textColour,f=a.fimage.width,d=a.fimage.height,b.outlineMethod=='colour'&&(c=W(a.fimage,f,d,h,k,b.bgOutlineThickness,a.outline.colour,b.padding,b.bgRadius,1),c&&(a.oimage=c.image)),c=W(a.fimage,f,d,h,k,b.bgOutlineThickness,m,b.padding,b.bgRadius),c&&(a.fimage=c.image,a.w=c.width,a.h=c.height)),b.outlineMethod=='size'&&(b.outlineIncrease>0?(a.iw+=2*b.outlineIncrease,a.ih+=2*b.outlineIncrease,f=h*a.iw,d=h*a.ih,c=S(a.fimage,f,d),a.oimage=c,a.fimage=H(a.fimage,a.oimage.width,a.oimage.height)):(f=h*(a.iw+2*b.outlineIncrease),d=h*(a.ih+2*b.outlineIncrease),c=S(a.fimage,f,d),a.oimage=H(c,a.fimage.width,a.fimage.height))))),a.alt=j,a.Init()}function i(a,d){var b=c.defaultView,e=d.replace(/\-([a-z])/g,function(a){return a.charAt(1).toUpperCase()});return b&&b.getComputedStyle&&b.getComputedStyle(a,null).getPropertyValue(d)||a.currentStyle&&a.currentStyle[e]}function aj(c,d,e){var b=1,a;return d?b=1*(c.getAttribute(d)||e):(a=i(c,'font-size'))&&(b=a.indexOf('px')>-1&&a.replace('px','')*1||a.indexOf('pt')>-1&&a.replace('pt','')*1.25||a*3.3),b}function u(a){return a.target&&n(a.target.id)?a.target.id:a.srcElement.parentNode.id}function K(a,c){var b,d,e=parseInt(i(c,'width'))/c.width,f=parseInt(i(c,'height'))/c.height;return n(a.offsetX)?b={x:a.offsetX,y:a.offsetY}:(d=X(c.id),n(a.changedTouches)&&(a=a.changedTouches[0]),a.pageX&&(b={x:a.pageX-d.x,y:a.pageY-d.y})),b&&e&&f&&(b.x/=e,b.y/=f),b}function an(c){var d=c.target||c.fromElement.parentNode,b=a.tc[d.id];b&&(b.mx=b.my=-1,b.UnFreeze(),b.EndDrag())}function ad(e){var g,c=a,b,d,f=u(e);for(g in c.tc)b=c.tc[g],b.tttimer&&(clearTimeout(b.tttimer),b.tttimer=null);f&&c.tc[f]&&(b=c.tc[f],(d=K(e,b.canvas))&&(b.mx=d.x,b.my=d.y,b.Drag(e,d)),b.drawn=0)}function ap(b){var e=a,f=c.addEventListener?0:1,d=u(b);d&&b.button==f&&e.tc[d]&&e.tc[d].BeginDrag(b)}function aq(b){var f=a,g=c.addEventListener?0:1,e=u(b),d;e&&b.button==g&&f.tc[e]&&(d=f.tc[e],ad(b),!d.EndDrag()&&!d.touchState&&d.Clicked(b))}function ar(c){var e=u(c),b=e&&a.tc[e],d;b&&c.changedTouches&&(c.touches.length==1&&b.touchState==0?(b.touchState=1,b.BeginDrag(c),(d=K(c,b.canvas))&&(b.mx=d.x,b.my=d.y,b.drawn=0)):c.targetTouches.length==2&&b.pinchZoom?(b.touchState=3,b.EndDrag(),b.BeginPinch(c)):(b.EndDrag(),b.EndPinch(),b.touchState=0))}function ac(c){var d=u(c),b=d&&a.tc[d];if(b&&c.changedTouches){switch(b.touchState){case 1:b.Draw(),b.Clicked();break;break;case 2:b.EndDrag();break;case 3:b.EndPinch()}b.touchState=0}}function au(c){var f,e=a,b,d,g=u(c);for(f in e.tc)b=e.tc[f],b.tttimer&&(clearTimeout(b.tttimer),b.tttimer=null);if(b=g&&e.tc[g],b&&c.changedTouches&&b.touchState){switch(b.touchState){case 1:case 2:(d=K(c,b.canvas))&&(b.mx=d.x,b.my=d.y,b.Drag(c,d)&&(b.touchState=2));break;case 3:b.Pinch(c)}b.drawn=0}}function ab(b){var d=a,c=u(b);c&&d.tc[c]&&(b.cancelBubble=!0,b.returnValue=!1,b.preventDefault&&b.preventDefault(),d.tc[c].Wheel((b.wheelDelta||b.detail)>0))}function aw(d){var c,b=a;clearTimeout(b.scrollTimer);for(c in b.tc)b.tc[c].Pause();b.scrollTimer=setTimeout(function(){var b,c=a;for(b in c.tc)c.tc[b].Resume()},b.scrollPause)}function al(){Z(q())}function Z(b){var c=a.tc,d;a.NextFrame(a.interval),b=b||q();for(d in c)c[d].Draw(b)}function az(){requestAnimationFrame(Z)}function aA(a){setTimeout(al,a)}function X(f){var g=c.getElementById(f),b=g.getBoundingClientRect(),a=c.documentElement,d=c.body,e=window,h=e.pageXOffset||a.scrollLeft,i=e.pageYOffset||a.scrollTop,j=a.clientLeft||d.clientLeft,k=a.clientTop||d.clientTop;return{x:b.left+h-j,y:b.top+i-k}}function aI(a,b,d,e){var c=a.radius*a.z1/(a.z1+a.z2+b.z);return{x:b.x*c*d,y:b.y*c*e,z:b.z,w:(a.z1-b.z)/a.z2}}function V(a){this.e=a,this.br=0,this.line=[],this.text=[],this.original=a.innerText||a.textContent}F=V.prototype,F.Empty=function(){for(var a=0;a<this.text.length;++a)if(this.text[a].length)return!1;return!0},F.Lines=function(c){var e=c?1:0,b,d,a;c=c||this.e,b=c.childNodes,d=b.length;for(a=0;a<d;++a)b[a].nodeName=='BR'?(this.text.push(this.line.join(' ')),this.br=1):b[a].nodeType==3?this.br?(this.line=[b[a].nodeValue],this.br=0):this.line.push(b[a].nodeValue):this.Lines(b[a]);return e||this.br||this.text.push(this.line.join(' ')),this.text},F.SplitWidth=function(h,e,f,g){var c,b,a,d=[];e.font=g+'px '+f;for(c=0;c<this.text.length;++c){a=this.text[c].split(/\s+/),this.line=[a[0]];for(b=1;b<a.length;++b)e.measureText(this.line.join(' ')+' '+a[b]).width>h?(d.push(this.line.join(' ')),this.line=[a[b]]):this.line.push(a[b]);d.push(this.line.join(' '))}return this.text=d};function _(a,b){this.ts=null,this.tc=a,this.tag=b,this.x=this.y=this.w=this.h=this.sc=1,this.z=0,this.pulse=1,this.pulsate=a.pulsateTo<1,this.colour=a.outlineColour,this.adash=~~a.outlineDash,this.agap=~~a.outlineDashSpace||this.adash,this.aspeed=a.outlineDashSpeed*1,this.colour=='tag'?this.colour=i(b.a,'color'):this.colour=='tagbg'&&(this.colour=i(b.a,'background-color')),this.Draw=this.pulsate?this.DrawPulsate:this.DrawSimple,this.radius=a.outlineRadius|0,this.SetMethod(a.outlineMethod,a.altImage)}f=_.prototype,f.SetMethod=function(a,d){var b={block:['PreDraw','DrawBlock'],colour:['PreDraw','DrawColour'],outline:['PostDraw','DrawOutline'],classic:['LastDraw','DrawOutline'],size:['PreDraw','DrawSize'],none:['LastDraw']},c=b[a]||b.outline;a=='none'?this.Draw=function(){return 1}:this.drawFunc=this[c[1]],this[c[0]]=this.Draw,d&&(this.RealPreDraw=this.PreDraw,this.PreDraw=this.DrawAlt)},f.Update=function(d,e,i,j,a,f,g,h){var b=this.tc.outlineOffset,c=2*b;this.x=a*d+g-b,this.y=a*e+h-b,this.w=a*i+c,this.h=a*j+c,this.sc=a,this.z=f},f.Ants=function(k){if(!this.adash)return;var b=this.adash,c=this.agap,a=this.aspeed,j=b+c,h=0,g=b,f=c,i=0,d=0,e;a&&(d=p(a)*(q()-this.ts)/50,a<0&&(d=864e4-d),a=~~d%j),a?(b>=a?(h=b-a,g=a):(f=j-a,i=c-f),e=[h,f,g,i]):e=[b,c],k.setLineDash(e)},f.DrawOutline=function(a,d,e,b,c,f){var g=h(this.radius,c/2,b/2);a.strokeStyle=f,this.Ants(a),y(a,d,e,b,c,g,!0)},f.DrawSize=function(i,n,m,l,k,j,a,h,g){var f=a.w,e=a.h,c,b,d;return this.pulsate?(a.image?d=(a.image.height+this.tc.outlineIncrease)/a.image.height:d=a.oscale,b=a.fimage||a.image,c=1+(d-1)*(1-this.pulse),a.h*=c,a.w*=c):b=a.oimage,a.alpha=1,a.Draw(i,h,g,b),a.h=e,a.w=f,1},f.DrawColour=function(d,h,i,e,f,g,a,b,c){return a.oimage?(this.pulse<1?(a.alpha=1-w(this.pulse,2),a.Draw(d,b,c,a.fimage),a.alpha=this.pulse):a.alpha=1,a.Draw(d,b,c,a.oimage),1):this[a.image?'DrawColourImage':'DrawColourText'](d,h,i,e,f,g,a,b,c)},f.DrawColourText=function(f,h,i,j,g,e,a,b,c){var d=a.colour;return a.colour=e,a.alpha=1,a.Draw(f,b,c),a.colour=d,1},f.DrawColourImage=function(a,q,p,o,n,m,i,r,l){var f=a.canvas,e=~~g(q,0),d=~~g(p,0),c=h(f.width-e,o)+.5|0,b=h(f.height-d,n)+.5|0,j;return v?(v.width=c,v.height=b):v=k(c,b),!v?this.SetMethod('outline'):(j=v.getContext('2d'),j.drawImage(f,e,d,c,b,0,0,c,b),a.clearRect(e,d,c,b),this.pulsate?i.alpha=1-w(this.pulse,2):i.alpha=1,i.Draw(a,r,l),a.setTransform(1,0,0,1,0,0),a.save(),a.beginPath(),a.rect(e,d,c,b),a.clip(),a.globalCompositeOperation='source-in',a.fillStyle=m,a.fillRect(e,d,c,b),a.restore(),a.globalAlpha=1,a.globalCompositeOperation='destination-over',a.drawImage(v,0,0,c,b,e,d,c,b),a.globalCompositeOperation='source-over',1)},f.DrawAlt=function(b,a,c,d,f,g){var e=this.RealPreDraw(b,a,c,d,f,g);return a.alt&&(a.DrawImage(b,c,d,a.alt),e=1),e},f.DrawBlock=function(a,d,e,b,c,f){var g=h(this.radius,c/2,b/2);a.fillStyle=f,y(a,d,e,b,c,g)},f.DrawSimple=function(a,b,c,d,e,f){var g=this.tc;return a.setTransform(1,0,0,1,0,0),a.strokeStyle=this.colour,a.lineWidth=g.outlineThickness,a.shadowBlur=a.shadowOffsetX=a.shadowOffsetY=0,a.globalAlpha=f?e:1,this.drawFunc(a,this.x,this.y,this.w,this.h,this.colour,b,c,d)},f.DrawPulsate=function(h,d,e,f){var g=q()-this.ts,c=this.tc,b=c.pulsateTo+(1-c.pulsateTo)*(.5+l(2*Math.PI*g/(1e3*c.pulsateTime))/2);return this.pulse=b=a.Smooth(1,b),this.DrawSimple(h,d,e,f,b,1)},f.Active=function(d,a,b){var c=a>=this.x&&b>=this.y&&a<=this.x+this.w&&b<=this.y+this.h;return c?this.ts=this.ts||q():this.ts=null,c},f.PreDraw=f.PostDraw=f.LastDraw=x;function J(a,h,c,b,e,f,g,d,i,j,k,l,m,n){this.tc=a,this.image=null,this.text=h,this.text_original=n,this.line_widths=[],this.title=c.title||null,this.a=c,this.position=new s(b[0],b[1],b[2]),this.x=this.y=this.z=0,this.w=e,this.h=f,this.colour=g||a.textColour,this.bgColour=d||a.bgColour,this.bgRadius=i|0,this.bgOutline=j||this.colour,this.bgOutlineThickness=k|0,this.textFont=l||a.textFont,this.padding=m|0,this.sc=this.alpha=1,this.weighted=!a.weight,this.outline=new _(a,this),this.audio=null}d=J.prototype,d.Init=function(b){var a=this.tc;this.textHeight=a.textHeight,this.HasText()?this.Measure(a.ctxt,a):(this.w=this.iw,this.h=this.ih),this.SetShadowColour=a.shadowAlpha?this.SetShadowColourAlpha:this.SetShadowColourFixed,this.SetDraw(a)},d.Draw=x,d.HasText=function(){return this.text&&this.text[0].length>0},d.EqualTo=function(a){var b=a.getElementsByTagName('img');return this.a.href!=a.href?0:b.length?this.image.src==b[0].src:(a.innerText||a.textContent)==this.text_original},d.SetImage=function(a){this.image=this.fimage=a},d.SetAudio=function(a){this.audio=a,this.audio.load()},d.SetDraw=function(a){this.Draw=this.fimage?a.ie>7?this.DrawImageIE:this.DrawImage:this.DrawText,a.noSelect&&(this.CheckActive=x)},d.MeasureText=function(d){var a,e=this.text.length,b=0,c;for(a=0;a<e;++a)this.line_widths[a]=c=d.measureText(this.text[a]).width,b=g(b,c);return b},d.Measure=function(e,a){var f=ae(this.text,this.textFont,this.textHeight),b,k,h,i,g,l,j,c,d;j=f?f.max.y+f.min.y:this.textHeight,e.font=this.font=this.textHeight+'px '+this.textFont,l=this.MeasureText(e),a.txtOpt&&(b=a.txtScale,k=b*this.textHeight,h=k+'px '+this.textFont,i=[b*a.shadowOffset[0],b*a.shadowOffset[1]],e.font=h,g=this.MeasureText(e),d=new O(this.text,h,g+b,b*j+b,g,this.line_widths,a.textAlign,a.textVAlign,b),this.image&&d.SetImage(this.image,this.iw,this.ih,a.imagePosition,a.imagePadding,a.imageAlign,a.imageVAlign,a.imageScale),c=d.Create(this.colour,this.bgColour,this.bgOutline,b*this.bgOutlineThickness,a.shadow,b*a.shadowBlur,i,b*this.padding,b*this.bgRadius),a.outlineMethod=='colour'?this.oimage=d.Create(this.outline.colour,this.bgColour,this.outline.colour,b*this.bgOutlineThickness,a.shadow,b*a.shadowBlur,i,b*this.padding,b*this.bgRadius):a.outlineMethod=='size'&&(f=ae(this.text,this.textFont,this.textHeight+a.outlineIncrease),k=f.max.y+f.min.y,h=b*(this.textHeight+a.outlineIncrease)+'px '+this.textFont,e.font=h,g=this.MeasureText(e),d=new O(this.text,h,g+b,b*k+b,g,this.line_widths,a.textAlign,a.textVAlign,b),this.image&&d.SetImage(this.image,this.iw+a.outlineIncrease,this.ih+a.outlineIncrease,a.imagePosition,a.imagePadding,a.imageAlign,a.imageVAlign,a.imageScale),this.oimage=d.Create(this.colour,this.bgColour,this.bgOutline,b*this.bgOutlineThickness,a.shadow,b*a.shadowBlur,i,b*this.padding,b*this.bgRadius),this.oscale=this.oimage.width/c.width,a.outlineIncrease>0?c=H(c,this.oimage.width,this.oimage.height):this.oimage=H(this.oimage,c.width,c.height)),c&&(this.fimage=c,l=this.fimage.width/b,j=this.fimage.height/b),this.SetDraw(a),a.txtOpt=!!this.fimage),this.h=j,this.w=l},d.SetFont=function(a,b,c,d){this.textFont=a,this.colour=b,this.bgColour=c,this.bgOutline=d,this.Measure(this.tc.ctxt,this.tc)},d.SetWeight=function(c){var b=this.tc,e=b.weightMode.split(/[, ]/),d,a,f=c.length;if(!this.HasText())return;this.weighted=!0;for(a=0;a<f;++a)d=e[a]||'size','both'==d?(this.Weight(c[a],b.ctxt,b,'size',b.min_weight[a],b.max_weight[a],a),this.Weight(c[a],b.ctxt,b,'colour',b.min_weight[a],b.max_weight[a],a)):this.Weight(c[a],b.ctxt,b,d,b.min_weight[a],b.max_weight[a],a);this.Measure(b.ctxt,b)},d.Weight=function(b,i,a,d,f,h,e){b=isNaN(b)?1:b;var c=(b-f)/(h-f);'colour'==d?this.colour=L(a,c,e):'bgcolour'==d?this.bgColour=L(a,c,e):'bgoutline'==d?this.bgOutline=L(a,c,e):'outline'==d?this.outline.colour=L(a,c,e):'size'==d&&(a.weightSizeMin>0&&a.weightSizeMax>a.weightSizeMin?this.textHeight=a.weightSize*(a.weightSizeMin+(a.weightSizeMax-a.weightSizeMin)*c):this.textHeight=g(1,b*a.weightSize))},d.SetShadowColourFixed=function(a,b,c){a.shadowColor=b},d.SetShadowColourAlpha=function(a,b,c){a.shadowColor=aE(b,c)},d.DrawText=function(a,h,i){var e=this.tc,g=this.x,f=this.y,c=this.sc,b,d;a.globalAlpha=this.alpha,a.fillStyle=this.colour,e.shadow&&this.SetShadowColour(a,e.shadow,this.alpha),a.font=this.font,g+=h/c,f+=i/c-this.h/2;for(b=0;b<this.text.length;++b)d=g,'right'==e.textAlign?d+=this.w/2-this.line_widths[b]:'centre'==e.textAlign?d-=this.line_widths[b]/2:d-=this.w/2,a.setTransform(c,0,0,c,c*d,c*f),a.fillText(this.text[b],0,0),f+=this.textHeight},d.DrawImage=function(b,i,k,l){var e=this.x,f=this.y,a=this.sc,j=l||this.fimage,c=this.w,d=this.h,g=this.alpha,h=this.shadow;b.globalAlpha=g,h&&this.SetShadowColour(b,h,g),e+=i/a-c/2,f+=k/a-d/2,b.setTransform(a,0,0,a,a*e,a*f),b.drawImage(j,0,0,c,d)},d.DrawImageIE=function(b,d,e){var c=this.fimage,a=this.sc,f=c.width=this.w*a,g=c.height=this.h*a,h=this.x*a+d-f/2,i=this.y*a+e-g/2;b.setTransform(1,0,0,1,0,0),b.globalAlpha=this.alpha,b.drawImage(c,h,i)},d.Calc=function(g,e){var a,b=this.tc,d=b.minBrightness,f=b.maxBrightness,c=b.max_radius;return a=g.xform(this.position),this.xformed=a,a=aI(b,a,b.stretchX,b.stretchY),this.x=a.x,this.y=a.y,this.z=a.z,this.sc=a.w,this.alpha=e*G(d+(f-d)*(c-this.z)/(2*c),0,1),this.xformed},d.UpdateActive=function(h,e,f){var a=this.outline,b=this.w,c=this.h,d=this.x-b/2,g=this.y-c/2;return a.Update(d,g,b,c,this.sc,this.z,e,f),a},d.CheckActive=function(a,d,e){var b=this.tc,c=this.UpdateActive(a,d,e);return c.Active(a,b.mx,b.my)?c:null},d.Clicked=function(f){var b=this.a,a=b.target,d=b.href,e;if(a!=''&&a!='_self'){if(self.frames[a])self.frames[a].document.location=d;else{try{if(top.frames[a]){top.frames[a].document.location=d;return}}catch(a){}window.open(d,a)}return}if(c.createEvent){if(e=c.createEvent('MouseEvents'),e.initMouseEvent('click',1,1,window,0,0,0,0,0,0,0,0,0,0,null),!b.dispatchEvent(e))return}else if(b.fireEvent)if(!b.fireEvent('onclick'))return;c.location=d},d.StopAudio=function(){this.audio&&this.playing&&this.audio.pause(),this.stopped=1,this.playing=0},d.PlayAudio=function(){if(e==='off'||this.tc.audioOff)return;if(!e&&!ag())return;var a=this.tc.audio,c=this.tc.gain,d='suspended',b;if(this.audio)if(this.track||(this.track=e.createMediaElementSource(this.audio),this.gain=e.createGain(),this.track.connect(this.gain),this.gain.connect(e.destination)),a=this.audio,c=this.gain,!a.paused)return 1;if(a){if(e.state==d&&e.resume(),e.state==d)return;return c.gain.value=h(2,g(0,this.tc.audioVolume*1)),a.currentTime=0,this.stopped=0,b=a.play(),b!==void 0&&b.then(a=>{this.stopped?this.audio.pause():this.playing=1}),1}};function a(f,o,k){var d,i,b=c.getElementById(f),l=['id','class','innerHTML'];if(!b)throw 0;if(n(window.G_vmlCanvasManager)&&(b=window.G_vmlCanvasManager.initElement(b),this.ie=parseFloat(navigator.appVersion.split('MSIE')[1])),b&&(!b.getContext||!b.getContext('2d').fillText)){i=c.createElement('DIV');for(d=0;d<l.length;++d)i[l[d]]=b[l[d]];throw b.parentNode.insertBefore(i,b),b.parentNode.removeChild(b),0}for(d in a.options)this[d]=k&&n(k[d])?k[d]:n(a[d])?a[d]:a.options[d];if(this.canvas=b,this.ctxt=b.getContext('2d'),this.z1=250/g(this.depth,.001),this.z2=this.z1/this.zoom,this.radius=h(b.height,b.width)*.0075,this.max_radius=100,this.max_weight=[],this.min_weight=[],this.textFont=this.textFont&&Q(this.textFont),this.textHeight*=1,this.imageRadius=this.imageRadius.toString(),this.pulsateTo=G(this.pulsateTo,0,1),this.minBrightness=G(this.minBrightness,0,1),this.maxBrightness=G(this.maxBrightness,this.minBrightness,1),this.ctxt.textBaseline='top',this.lx=(this.lock+'').indexOf('x')+1,this.ly=(this.lock+'').indexOf('y')+1,this.frozen=this.dx=this.dy=this.fixedAnim=this.touchState=0,this.fixedAlpha=1,this.source=o||f,this.repeatTags=h(64,~~this.repeatTags),this.minTags=h(200,~~this.minTags),~~this.scrollPause>0?a.scrollPause=~~this.scrollPause:this.scrollPause=0,this.minTags>0&&this.repeatTags<1&&(d=this.GetTags().length)&&(this.repeatTags=af(this.minTags/d)-1),this.transform=m.Identity(),this.startTime=this.time=q(),this.mx=this.my=-1,this.centreImage&&av(this),this.Animate=this.dragControl?this.AnimateDrag:this.AnimatePosition,this.animTiming=typeof a[this.animTiming]=='function'?a[this.animTiming]:a.Smooth,this.shadowBlur||this.shadowOffset[0]||this.shadowOffset[1]?(this.ctxt.shadowColor=this.shadow,this.shadow=this.ctxt.shadowColor,this.shadowAlpha=aD()):delete this.shadow,this.activeAudio===!1?e='off':this.activeAudio&&this.LoadAudio(),this.Load(),o&&this.hideTags&&function(b){a.loaded?b.HideTags():t('load',function(){b.HideTags()},window)}(this),this.yaw=this.initial?this.initial[0]*this.maxSpeed:0,this.pitch=this.initial?this.initial[1]*this.maxSpeed:0,this.tooltip?(this.ctitle=b.title,b.title='',this.tooltip=='native'?this.Tooltip=this.TooltipNative:(this.Tooltip=this.TooltipDiv,this.ttdiv||(this.ttdiv=c.createElement('div'),this.ttdiv.className=this.tooltipClass,this.ttdiv.style.position='absolute',this.ttdiv.style.zIndex=b.style.zIndex+1,t('mouseover',function(a){a.target.style.display='none'},this.ttdiv),c.body.appendChild(this.ttdiv)))):this.Tooltip=this.TooltipNone,!this.noMouse&&!j[f]){j[f]=[['mousemove',ad],['mouseout',an],['mouseup',aq],['touchstart',ar],['touchend',ac],['touchcancel',ac],['touchmove',au]],this.dragControl&&(j[f].push(['mousedown',ap]),j[f].push(['selectstart',x])),this.wheelZoom&&(j[f].push(['mousewheel',ab]),j[f].push(['DOMMouseScroll',ab])),this.scrollPause&&j[f].push(['scroll',aw,window]);for(d=0;d<j[f].length;++d)i=j[f][d],t(i[0],i[1],i[2]?i[2]:b)}a.started||(a.NextFrame=window.requestAnimationFrame?az:aA,a.interval=this.interval,a.NextFrame(this.interval),a.started=1)}b=a.prototype,b.SourceElements=function(){return c.querySelectorAll?c.querySelectorAll('#'+this.source):[c.getElementById(this.source)]},b.HideTags=function(){var b=this.SourceElements(),a;for(a=0;a<b.length;++a)b[a].style.display='none'},b.GetTags=function(){var e=this.SourceElements(),c,f=[],a,b,d;for(d=0;d<=this.repeatTags;++d)for(a=0;a<e.length;++a){c=e[a].getElementsByTagName('a');for(b=0;b<c.length;++b)f.push(c[b])}return f},b.Message=function(j){var g=[],a,f,b=j.split(''),d,e,h,i;for(a=0;a<b.length;++a)b[a]!=' '&&(f=a-b.length/2,d=c.createElement('A'),d.href='#',d.innerText=b[a],h=100*o(f/9),i=-100*l(f/9),e=new J(this,b[a],d,[h,0,i],2,18,'#000','#fff',0,0,0,'monospace',2,b[a]),e.Init(),g.push(e));return g},b.AddAudio=function(b,c){if(e==='off')return;var a=b.getElementsByTagName('audio');a.length&&(c.SetAudio(a[0]),this.hasAudio=1)},b.CreateTag=function(b){var e,c,a,f,d,g,h,j,k=[0,0,0],l;if('text'!=this.imageMode)if(e=b.getElementsByTagName('img'),e.length)if(c=new Image,c.src=e[0].src,!this.imageMode)return a=new J(this,"",b,k,0,0),a.SetImage(c),A(c,e[0],e[1],a,this),this.AddAudio(b,a),a;if('image'!=this.imageMode&&(d=new V(b),f=d.Lines(),d.Empty()?d=null:(g=this.textFont||Q(i(b,'font-family')),this.splitWidth&&(f=d.SplitWidth(this.splitWidth,this.ctxt,g,this.textHeight)),h=this.bgColour=='tag'?i(b,'background-color'):this.bgColour,j=this.bgOutline=='tag'?i(b,'color'):this.bgOutline)),d||c)return a=new J(this,f,b,k,2,this.textHeight+2,this.textColour||i(b,'color'),h,this.bgRadius,j,this.bgOutlineThickness,g,this.padding,d&&d.original),c?(a.SetImage(c),A(c,e[0],e[1],a,this)):a.Init(),this.AddAudio(b,a),a},b.UpdateTag=function(a,b){var c=this.textColour||i(b,'color'),d=this.textFont||Q(i(b,'font-family')),e=this.bgColour=='tag'?i(b,'background-color'):this.bgColour,f=this.bgOutline=='tag'?i(b,'color'):this.bgOutline;a.a=b,a.title=b.title,(a.colour!=c||a.textFont!=d||a.bgColour!=e||a.bgOutline!=f)&&a.SetFont(d,c,e,f)},b.Weight=function(d){var f=d.length,c,b,a,e=[],g,h=this.weightFrom?this.weightFrom.split(/[, ]/):[null],i=h.length;for(b=0;b<f;++b){e[b]=[];for(a=0;a<i;++a)c=aj(d[b].a,h[a],this.textHeight),(!this.max_weight[a]||c>this.max_weight[a])&&(this.max_weight[a]=c),(!this.min_weight[a]||c<this.min_weight[a])&&(this.min_weight[a]=c),e[b][a]=c}for(a=0;a<i;++a)this.max_weight[a]>this.min_weight[a]&&(g=1);if(g)for(b=0;b<f;++b)d[b].SetWeight(e[b])},b.Load=function(){var c=this.GetTags(),b=[],d,k,l,h,i,j,f,a,e=[],m={sphere:aB,vcylinder:ax,hcylinder:aH,vring:aG,hring:aF};if(c.length){e.length=c.length;for(a=0;a<c.length;++a)e[a]=a;this.shuffleTags&&ai(e),h=100*this.radiusX,i=100*this.radiusY,j=100*this.radiusZ,this.max_radius=g(h,g(i,j));for(a=0;a<c.length;++a)k=this.CreateTag(c[e[a]]),k&&b.push(k);this.weight&&this.Weight(b,!0),this.shapeArgs?this.shapeArgs[0]=b.length:(l=this.shape.toString().split(/[(),]/),d=l.shift(),typeof window[d]=='function'?this.shape=window[d]:this.shape=m[d]||m.sphere,this.shapeArgs=[b.length,h,i,j].concat(l)),f=this.shape.apply(this,this.shapeArgs),this.listLength=b.length;for(a=0;a<b.length;++a)b[a].position=new s(f[a][0],f[a][1],f[a][2])}this.noTagsMessage&&!b.length&&(a=this.imageMode&&this.imageMode!='both'?this.imageMode+' ':'',b=this.Message('No '+a+'tags')),this.taglist=b},b.Update=function(){var e=this.GetTags(),d=[],j=this.taglist,k,f=[],c=[],h,i,g,a,b;if(!this.shapeArgs)return this.Load();if(e.length){g=this.listLength=e.length,i=j.length;for(a=0;a<i;++a)d.push(j[a]),c.push(a);for(a=0;a<g;++a){for(b=0,k=0;b<i;++b)j[b].EqualTo(e[a])&&(this.UpdateTag(d[b],e[a]),k=c[b]=-1);k||f.push(a)}for(a=0,b=0;a<i;++a)c[b]==-1?c.splice(b,1):++b;if(c.length){for(ai(c);c.length&&f.length;)a=c.shift(),b=f.shift(),d[a]=this.CreateTag(e[b]);for(c.sort(function(a,b){return a-b});c.length;)d.splice(c.pop(),1)}for(b=d.length/(f.length+1),a=0;f.length;)d.splice(af(++a*b),0,this.CreateTag(e[f.shift()]));this.shapeArgs[0]=g=d.length,h=this.shape.apply(this,this.shapeArgs);for(a=0;a<g;++a)d[a].position=new s(h[a][0],h[a][1],h[a][2]);this.weight&&this.Weight(d)}this.taglist=d},b.SetShadow=function(a){a.shadowBlur=this.shadowBlur,a.shadowOffsetX=this.shadowOffset[0],a.shadowOffsetY=this.shadowOffset[1]},b.LoadAudio=function(){if(!e&&!ag())return;this.audio=c.createElement('audio'),this.audio.src=this.activeAudio,this.track=e.createMediaElementSource(this.audio),this.gain=e.createGain(),this.track.connect(this.gain),this.gain.connect(e.destination),this.hasAudio=1,P=function(a){e.resume(),c.removeEventListener('click',P)},c.addEventListener('click',P)},b.ShowAudioIcon=function(){var a=this.audioIconSize,c=this.canvas,d=this.ctxt,k=c.width-a-3,f=c.height-a-3,g=this.audioIconThickness,h='#000',i='#fff',j=this.audioIconDark,b=this.audioOff,l='suspended';if(!e)return;b||(b=e.state===l),this.audioIcon&&this.hasAudio&&($(b,d,a,k,f,g+1,j?i:h),$(b,d,a,k,f,g,j?h:i))},b.CheckAudioIcon=function(){var a=this.audioIconSize,b=this.canvas,c=this.audioIconThickness/2,d=b.width-a-3-c,e=b.height-a-3-c;if(this.audioIcon&&this.mx>=d&&this.my>=e)return!0},b.ToggleAudio=function(){var a=this.audioOff||e&&e.state==='suspended';a||this.currentAudio&&this.currentAudio.StopAudio(),this.audioOff=!a},b.Draw=function(s){if(this.paused)return;var l=this.canvas,i=l.width,j=l.height,q=0,p=(s-this.time)*a.interval/1e3,h=i/2+this.offsetX,g=j/2+this.offsetY,d=this.ctxt,b,f,c,o=-1,e=this.taglist,k=e.length,t=this.active&&this.active.tag,m='',u=this.frontSelect,r=this.centreFunc==x,n;if(this.time=s,this.frozen&&this.drawn)return this.Animate(i,j,p);n=this.AnimateFixed(),d.setTransform(1,0,0,1,0,0);for(c=0;c<k;++c)e[c].Calc(this.transform,this.fixedAlpha);if(e=ak(e,function(a,b){return b.z-a.z}),n&&this.fixedAnim.active)b=this.fixedAnim.tag.UpdateActive(d,h,g);else if(this.active=null,this.CheckAudioIcon())m='pointer';else{for(c=0;c<k;++c)f=this.mx>=0&&this.my>=0&&this.taglist[c].CheckActive(d,h,g),f&&f.sc>q&&(!u||f.z<=0)&&(b=f,o=c,b.tag=this.taglist[c],q=f.sc);this.active=b}this.txtOpt||this.shadow&&this.SetShadow(d),d.clearRect(0,0,i,j);for(c=0;c<k;++c){if(!r&&e[c].z<=0){try{this.centreFunc(d,i,j,h,g)}catch(a){alert(a),this.centreFunc=x}r=!0}b&&b.tag==e[c]&&b.PreDraw(d,e[c],h,g)||e[c].Draw(d,h,g),b&&b.tag==e[c]&&b.PostDraw(d)}this.freezeActive&&b?this.Freeze():(this.UnFreeze(),this.drawn=k==this.listLength),this.fixedCallback&&(this.fixedCallback(this,this.fixedCallbackTag),this.fixedCallback=null),n||this.Animate(i,j,p),b&&(b.LastDraw(d),b.tag!=t&&(this.currentAudio&&this.currentAudio!=b.tag&&this.currentAudio.StopAudio(),b.tag.PlayAudio()&&(this.currentAudio=b.tag)),m=this.activeCursor),l.style.cursor=m,this.Tooltip(b,this.taglist[o]),this.audioIcon&&this.ShowAudioIcon()},b.TooltipNone=function(){},b.TooltipNative=function(b,a){b?this.canvas.title=a&&a.title?a.title:'':this.canvas.title=this.ctitle},b.SetTTDiv=function(c,d){var a=this,b=a.ttdiv.style;c!=a.ttdiv.innerHTML&&(b.display='none'),a.ttdiv.innerHTML=c,d&&(d.title=a.ttdiv.innerHTML),b.display=='none'&&!a.tttimer&&(a.tttimer=setTimeout(function(){var c=X(a.canvas.id);b.display='block',b.left=c.x+a.mx+'px',b.top=c.y+a.my+24+'px',a.tttimer=null},a.tooltipDelay))},b.TooltipDiv=function(b,a){b&&a&&a.title?this.SetTTDiv(a.title,a):!b&&this.mx!=-1&&this.my!=-1&&this.ctitle.length?this.SetTTDiv(this.ctitle):this.ttdiv.style.display='none'},b.Transform=function(c,a,b){if(a||b){var d=o(a),e=l(a),f=o(b),g=l(b),h=new m([g,0,f,0,1,0,-f,0,g]),i=new m([1,0,0,0,e,-d,0,d,e]);c.transform=c.transform.mul(h.mul(i))}},b.AnimateFixed=function(){var a,b,c,d,e;return!!(this.fadeIn&&(b=q()-this.startTime,b>=this.fadeIn?(this.fadeIn=0,this.fixedAlpha=1):this.fixedAlpha=b/this.fadeIn),this.fixedAnim)&&(this.fixedAnim.transform||(this.fixedAnim.transform=this.transform),a=this.fixedAnim,b=q()-a.t0,c=a.angle,d,e=this.animTiming(a.t,b),this.transform=a.transform,b>=a.t?(this.fixedCallbackTag=a.tag,this.fixedCallback=a.cb,this.fixedAnim=this.yaw=this.pitch=0):c*=e,d=m.Rotation(c,a.axis),this.transform=this.transform.mul(d),this.fixedAnim!=0)},b.AnimatePosition=function(g,h,f){var a=this,d=a.mx,e=a.my,b,c;!a.frozen&&d>=0&&e>=0&&d<g&&e<h?(b=a.maxSpeed,c=a.reverse?-1:1,a.lx||(a.yaw=(d*2*b/g-b)*c*f),a.ly||(a.pitch=(e*2*b/h-b)*-c*f),a.initial=null):a.initial||(a.frozen&&!a.freezeDecel?a.yaw=a.pitch=0:a.Decel(a)),this.Transform(a,a.pitch,a.yaw)},b.AnimateDrag=function(d,e,c){var a=this,b=100*c*a.maxSpeed/a.max_radius/a.zoom;a.dx||a.dy?(a.lx||(a.yaw=a.dx*b/a.stretchX),a.ly||(a.pitch=a.dy*-b/a.stretchY),a.dx=a.dy=0,a.initial=null):a.initial||a.Decel(a),this.Transform(a,a.pitch,a.yaw)},b.Freeze=function(){this.frozen||(this.preFreeze=[this.yaw,this.pitch],this.frozen=1,this.drawn=0)},b.UnFreeze=function(){this.frozen&&(this.yaw=this.preFreeze[0],this.pitch=this.preFreeze[1],this.frozen=0)},b.Decel=function(a){var b=a.minSpeed,c=p(a.yaw),d=p(a.pitch);!a.lx&&c>b&&(a.yaw=c>a.z0?a.yaw*a.decel:0),!a.ly&&d>b&&(a.pitch=d>a.z0?a.pitch*a.decel:0)},b.Zoom=function(a){this.z2=this.z1*(1/a),this.drawn=0},b.Clicked=function(b){if(this.CheckAudioIcon()){this.ToggleAudio();return}var a=this.active;try{a&&a.tag&&(this.clickToFront===!1||this.clickToFront===null?a.tag.Clicked(b):this.TagToFront(a.tag,this.clickToFront,function(){a.tag.Clicked(b)},!0))}catch(a){}},b.Wheel=function(a){var b=this.zoom+this.zoomStep*(a?1:-1);this.zoom=h(this.zoomMax,g(this.zoomMin,b)),this.Zoom(this.zoom)},b.BeginDrag=function(a){this.down=K(a,this.canvas),a.cancelBubble=!0,a.returnValue=!1,a.preventDefault&&a.preventDefault()},b.Drag=function(e,a){if(this.dragControl&&this.down){var d=this.dragThreshold*this.dragThreshold,b=a.x-this.down.x,c=a.y-this.down.y;(this.dragging||b*b+c*c>d)&&(this.dx=b,this.dy=c,this.dragging=1,this.down=a)}return this.dragging},b.EndDrag=function(){var a=this.dragging;return this.dragging=this.down=null,a};function ah(a){var b=a.targetTouches[0],c=a.targetTouches[1];return E(w(c.pageX-b.pageX,2)+w(c.pageY-b.pageY,2))}b.BeginPinch=function(a){this.pinched=[ah(a),this.zoom],a.preventDefault&&a.preventDefault()},b.Pinch=function(d){var b,c,a=this.pinched;if(!a)return;c=ah(d),b=a[1]*c/a[0],this.zoom=h(this.zoomMax,g(this.zoomMin,b)),this.Zoom(this.zoom)},b.EndPinch=function(a){this.pinched=null},b.Pause=function(){this.paused=!0},b.Resume=function(){this.paused=!1},b.SetSpeed=function(a){this.initial=a,this.yaw=a[0]*this.maxSpeed,this.pitch=a[1]*this.maxSpeed},b.FindTag=function(a){if(!n(a))return null;if(n(a.index)&&(a=a.index),!B(a))return this.taglist[a];var c,d,b;n(a.id)?(c='id',d=a.id):n(a.text)&&(c='innerText',d=a.text);for(b=0;b<this.taglist.length;++b)if(this.taglist[b].a[c]==d)return this.taglist[b]},b.RotateTag=function(a,h,i,j,f,g){var b=a.Calc(this.transform,1),c=new s(b.x,b.y,b.z),d=ay(i,h),e=c.angle(d),k=c.cross(d).unit();e==0?(this.fixedCallbackTag=a,this.fixedCallback=f):this.fixedAnim={angle:-e,axis:k,t:j,t0:q(),cb:f,tag:a,active:g}},b.TagToFront=function(a,b,c,d){this.RotateTag(a,0,0,b,c,d)},b.Volume=function(a){this.audioVolume=a*1},a.Start=function(b,c,d){a.Delete(b),a.tc[b]=new a(b,c,d)};function N(c,b){a.tc[b]&&a.tc[b][c]()}a.Linear=function(a,b){return b/a},a.Smooth=function(a,b){return.5-l(b*Math.PI/a)/2},a.Pause=function(a){N('Pause',a)},a.Resume=function(a){N('Resume',a)},a.Reload=function(a){N('Load',a)},a.Update=function(a){N('Update',a)},a.SetSpeed=function(c,b){return!!(B(b)&&a.tc[c]&&!isNaN(b[0])&&!isNaN(b[1]))&&(a.tc[c].SetSpeed(b),!0)},a.TagToFront=function(c,b){return!!B(b)&&(b.lat=b.lng=0,a.RotateTag(c,b))},a.RotateTag=function(c,b){if(B(b)&&a.tc[c]){isNaN(b.time)&&(b.time=500);var d=a.tc[c].FindTag(b);if(d)return a.tc[c].RotateTag(d,b.lat,b.lng,b.time,b.callback,b.active),!0}return!1},a.Delete=function(b){var d,e;if(j[b])if(e=c.getElementById(b),e)for(d=0;d<j[b].length;++d)am(j[b][d][0],j[b][d][1],e);delete j[b],delete a.tc[b]},a.tc={},a.options={z1:2e4,z2:2e4,z0:2e-4,freezeActive:!1,freezeDecel:!1,activeCursor:'pointer',pulsateTo:1,pulsateTime:3,reverse:!1,depth:.5,maxSpeed:.05,minSpeed:0,decel:.95,interval:20,minBrightness:.1,maxBrightness:1,outlineColour:'#ffff99',outlineThickness:2,outlineOffset:5,outlineMethod:'outline',outlineRadius:0,textColour:'#ff99ff',textHeight:15,textFont:'Helvetica, Arial, sans-serif',shadow:'#000',shadowBlur:0,shadowOffset:[0,0],initial:null,hideTags:!0,zoom:1,weight:!1,weightMode:'size',weightFrom:null,weightSize:1,weightSizeMin:null,weightSizeMax:null,weightGradient:{0:'#f00',0.33:'#ff0',0.66:'#0f0',1:'#00f'},txtOpt:!0,txtScale:2,frontSelect:!1,wheelZoom:!0,zoomMin:.3,zoomMax:3,zoomStep:.05,shape:'sphere',lock:null,tooltip:null,tooltipDelay:300,tooltipClass:'tctooltip',radiusX:1,radiusY:1,radiusZ:1,stretchX:1,stretchY:1,offsetX:0,offsetY:0,shuffleTags:!1,noSelect:!1,noMouse:!1,imageScale:1,paused:!1,dragControl:!1,dragThreshold:4,centreFunc:x,splitWidth:0,animTiming:'Smooth',clickToFront:!1,fadeIn:0,padding:0,bgColour:null,bgRadius:0,bgOutline:null,bgOutlineThickness:0,outlineIncrease:4,textAlign:'centre',textVAlign:'middle',imageMode:null,imagePosition:null,imagePadding:2,imageAlign:'centre',imageVAlign:'middle',noTagsMessage:!0,centreImage:null,pinchZoom:!1,repeatTags:0,minTags:0,imageRadius:0,scrollPause:!1,outlineDash:0,outlineDashSpace:0,outlineDashSpeed:1,activeAudio:'',audioVolume:1,audioIcon:1,audioIconSize:20,audioIconThickness:2,audioIconDark:0,altImage:0};for(r in a.options)a[r]=a.options[r];window.TagCanvas=a,t('load',function(){a.loaded=1},window)})()
diff --git a/packages/frontend/assets/unread.svg b/packages/frontend/assets/unread.svg
new file mode 100644
index 0000000000..8c3cc9f475
--- /dev/null
+++ b/packages/frontend/assets/unread.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
+<circle fill="#3AA2DC" cx="16.5" cy="16.5" r="6"/>
+</svg>
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
new file mode 100644
index 0000000000..c23adf7c70
--- /dev/null
+++ b/packages/frontend/package.json
@@ -0,0 +1,94 @@
+{
+	"name": "frontend",
+	"private": true,
+	"scripts": {
+		"watch": "vite",
+		"build": "vite build",
+		"lint": "vue-tsc --noEmit && eslint --quiet \"src/**/*.{ts,vue}\""
+	},
+	"dependencies": {
+		"@discordapp/twemoji": "14.0.2",
+		"@rollup/plugin-alias": "4.0.2",
+		"@rollup/plugin-json": "6.0.0",
+		"@rollup/pluginutils": "5.0.2",
+		"@syuilo/aiscript": "0.11.1",
+		"@tabler/icons": "^1.118.0",
+		"@vitejs/plugin-vue": "4.0.0",
+		"@vue/compiler-sfc": "3.2.45",
+		"autobind-decorator": "2.4.0",
+		"autosize": "5.0.2",
+		"blurhash": "2.0.4",
+		"broadcast-channel": "4.18.1",
+		"browser-image-resizer": "git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey.3",
+		"chart.js": "4.1.1",
+		"chartjs-adapter-date-fns": "3.0.0",
+		"chartjs-chart-matrix": "^1.3.0",
+		"chartjs-plugin-gradient": "0.6.1",
+		"chartjs-plugin-zoom": "2.0.0",
+		"compare-versions": "5.0.1",
+		"cropperjs": "2.0.0-beta",
+		"date-fns": "2.29.3",
+		"escape-regexp": "0.0.1",
+		"eventemitter3": "5.0.0",
+		"idb-keyval": "6.2.0",
+		"insert-text-at-cursor": "0.3.0",
+		"is-file-animated": "1.0.2",
+		"json5": "2.2.2",
+		"katex": "0.15.6",
+		"matter-js": "0.18.0",
+		"mfm-js": "0.23.0",
+		"misskey-js": "0.0.14",
+		"photoswipe": "5.3.4",
+		"prismjs": "1.29.0",
+		"punycode": "2.1.1",
+		"querystring": "0.2.1",
+		"rndstr": "1.0.0",
+		"rollup": "3.8.0",
+		"s-age": "1.1.2",
+		"sass": "1.57.1",
+		"seedrandom": "3.0.5",
+		"strict-event-emitter-types": "2.0.0",
+		"stringz": "2.1.0",
+		"syuilo-password-strength": "0.0.1",
+		"textarea-caret": "3.1.0",
+		"three": "0.148.0",
+		"throttle-debounce": "5.0.0",
+		"tinycolor2": "1.4.2",
+		"tsc-alias": "1.8.2",
+		"tsconfig-paths": "4.1.1",
+		"twemoji-parser": "14.0.0",
+		"typescript": "4.9.4",
+		"uuid": "9.0.0",
+		"vanilla-tilt": "1.8.0",
+		"vite": "4.0.3",
+		"vue": "3.2.45",
+		"vue-prism-editor": "2.0.0-alpha.2",
+		"vuedraggable": "next"
+	},
+	"devDependencies": {
+		"@types/escape-regexp": "0.0.1",
+		"@types/glob": "8.0.0",
+		"@types/gulp": "4.0.10",
+		"@types/gulp-rename": "2.0.1",
+		"@types/katex": "0.14.0",
+		"@types/matter-js": "0.18.2",
+		"@types/punycode": "2.1.0",
+		"@types/seedrandom": "3.0.3",
+		"@types/throttle-debounce": "5.0.0",
+		"@types/tinycolor2": "1.4.3",
+		"@types/uuid": "9.0.0",
+		"@types/websocket": "1.0.5",
+		"@types/ws": "8.5.3",
+		"@typescript-eslint/eslint-plugin": "5.47.0",
+		"@typescript-eslint/parser": "5.47.0",
+		"@vue/runtime-core": "3.2.45",
+		"cross-env": "7.0.3",
+		"cypress": "12.2.0",
+		"eslint": "8.30.0",
+		"eslint-plugin-import": "2.26.0",
+		"eslint-plugin-vue": "9.8.0",
+		"start-server-and-test": "1.15.2",
+		"vue-eslint-parser": "^9.1.0",
+		"vue-tsc": "^1.0.16"
+	}
+}
diff --git a/packages/frontend/src/account.ts b/packages/frontend/src/account.ts
new file mode 100644
index 0000000000..0e991cdfb5
--- /dev/null
+++ b/packages/frontend/src/account.ts
@@ -0,0 +1,238 @@
+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';
+
+// TODO: 他のタブと永続化されたstateを同期
+
+type Account = misskey.entities.MeDetailed;
+
+const accountData = localStorage.getItem('account');
+
+// TODO: 外部からはreadonlyに
+export const $i = accountData ? reactive(JSON.parse(accountData) as Account) : null;
+
+export const iAmModerator = $i != null && ($i.isAdmin || $i.isModerator);
+export const iAmAdmin = $i != null && $i.isAdmin;
+
+export async function signout() {
+	waiting();
+	localStorage.removeItem('account');
+
+	await removeAccount($i.id);
+
+	const accounts = await getAccounts();
+
+	//#region Remove service worker registration
+	try {
+		if (navigator.serviceWorker.controller) {
+			const registration = await navigator.serviceWorker.ready;
+			const push = await registration.pushManager.getSubscription();
+			if (push) {
+				await window.fetch(`${apiUrl}/sw/unregister`, {
+					method: 'POST',
+					body: JSON.stringify({
+						i: $i.token,
+						endpoint: push.endpoint,
+					}),
+					headers: {
+						'Content-Type': 'application/json',
+					},
+				});
+			}
+		}
+
+		if (accounts.length === 0) {
+			await navigator.serviceWorker.getRegistrations()
+				.then(registrations => {
+					return Promise.all(registrations.map(registration => registration.unregister()));
+				});
+		}
+	} catch (err) {}
+	//#endregion
+
+	document.cookie = 'igi=; path=/';
+
+	if (accounts.length > 0) login(accounts[0].token);
+	else unisonReload('/');
+}
+
+export async function getAccounts(): Promise<{ id: Account['id'], token: Account['token'] }[]> {
+	return (await get('accounts')) || [];
+}
+
+export async function addAccount(id: Account['id'], token: Account['token']) {
+	const accounts = await getAccounts();
+	if (!accounts.some(x => x.id === id)) {
+		await set('accounts', accounts.concat([{ id, 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
+		window.fetch(`${apiUrl}/i`, {
+			method: 'POST',
+			body: JSON.stringify({
+				i: token,
+			}),
+			headers: {
+				'Content-Type': 'application/json',
+			},
+		})
+			.then(res => res.json())
+			.then(res => {
+				if (res.error) {
+					if (res.error.id === 'a8c724b3-6e9c-4b46-b1a8-bc3ed6258370') {
+						showSuspendedDialog().then(() => {
+							signout();
+						});
+					} else {
+						alert({
+							type: 'error',
+							title: i18n.ts.failedToFetchAccountInformation,
+							text: JSON.stringify(res.error),
+						});
+					}
+				} else {
+					res.token = token;
+					done(res);
+				}
+			})
+			.catch(fail);
+	});
+}
+
+export function updateAccount(accountData) {
+	for (const [key, value] of Object.entries(accountData)) {
+		$i[key] = value;
+	}
+	localStorage.setItem('account', JSON.stringify($i));
+}
+
+export function refreshAccount() {
+	return fetchAccount($i.token).then(updateAccount);
+}
+
+export async function login(token: Account['token'], redirect?: string) {
+	waiting();
+	if (_DEV_) console.log('logging as token ', token);
+	const me = await fetchAccount(token);
+	localStorage.setItem('account', JSON.stringify(me));
+	document.cookie = `token=${token}; path=/; max-age=31536000`; // bull dashboardの認証とかで使う
+	await addAccount(me.id, token);
+
+	if (redirect) {
+		// 他のタブは再読み込みするだけ
+		reloadChannel.postMessage(null);
+		// このページはredirectで指定された先に移動
+		location.href = redirect;
+		return;
+	}
+
+	unisonReload();
+}
+
+export async function openAccountMenu(opts: {
+	includeCurrentAccount?: boolean;
+	withExtraOperation: boolean;
+	active?: misskey.entities.UserDetailed['id'];
+	onChoose?: (account: misskey.entities.UserDetailed) => void;
+}, ev: MouseEvent) {
+	function showSigninDialog() {
+		popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
+			done: res => {
+				addAccount(res.id, res.i);
+				success();
+			},
+		}, 'closed');
+	}
+
+	function createAccount() {
+		popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, {
+			done: res => {
+				addAccount(res.id, res.i);
+				switchAccountWithToken(res.i);
+			},
+		}, 'closed');
+	}
+
+	async function switchAccount(account: misskey.entities.UserDetailed) {
+		const storedAccounts = await getAccounts();
+		const token = storedAccounts.find(x => x.id === account.id).token;
+		switchAccountWithToken(token);
+	}
+
+	function switchAccountWithToken(token: string) {
+		login(token);
+	}
+
+	const storedAccounts = await getAccounts().then(accounts => accounts.filter(x => x.id !== $i.id));
+	const accountsPromise = api('users/show', { userIds: storedAccounts.map(x => x.id) });
+
+	function createItem(account: misskey.entities.UserDetailed) {
+		return {
+			type: 'user',
+			user: account,
+			active: opts.active != null ? opts.active === account.id : false,
+			action: () => {
+				if (opts.onChoose) {
+					opts.onChoose(account);
+				} else {
+					switchAccount(account);
+				}
+			},
+		};
+	}
+
+	const accountItemPromises = storedAccounts.map(a => new Promise(res => {
+		accountsPromise.then(accounts => {
+			const account = accounts.find(x => x.id === a.id);
+			if (account == null) return res(null);
+			res(createItem(account));
+		});
+	}));
+
+	if (opts.withExtraOperation) {
+		popupMenu([...[{
+			type: 'link',
+			text: i18n.ts.profile,
+			to: `/@${ $i.username }`,
+			avatar: $i,
+		}, null, ...(opts.includeCurrentAccount ? [createItem($i)] : []), ...accountItemPromises, {
+			type: 'parent',
+			icon: 'ti ti-plus',
+			text: i18n.ts.addAccount,
+			children: [{
+				text: i18n.ts.existingAccount,
+				action: () => { showSigninDialog(); },
+			}, {
+				text: i18n.ts.createAccount,
+				action: () => { createAccount(); },
+			}],
+		}, {
+			type: 'link',
+			icon: 'ti ti-users',
+			text: i18n.ts.manageAccounts,
+			to: '/settings/accounts',
+		}]], ev.currentTarget ?? ev.target, {
+			align: 'left',
+		});
+	} else {
+		popupMenu([...(opts.includeCurrentAccount ? [createItem($i)] : []), ...accountItemPromises], ev.currentTarget ?? ev.target, {
+			align: 'left',
+		});
+	}
+}
diff --git a/packages/frontend/src/components/MkAbuseReport.vue b/packages/frontend/src/components/MkAbuseReport.vue
new file mode 100644
index 0000000000..9a3464b640
--- /dev/null
+++ b/packages/frontend/src/components/MkAbuseReport.vue
@@ -0,0 +1,109 @@
+<template>
+<div class="bcekxzvu _gap _panel">
+	<div class="target">
+		<MkA v-user-preview="report.targetUserId" class="info" :to="`/user-info/${report.targetUserId}`">
+			<MkAvatar class="avatar" :user="report.targetUser" :show-indicator="true" :disable-link="true"/>
+			<div class="names">
+				<MkUserName class="name" :user="report.targetUser"/>
+				<MkAcct class="acct" :user="report.targetUser" style="display: block;"/>
+			</div>
+		</MkA>
+		<MkKeyValue class="_formBlock">
+			<template #key>{{ i18n.ts.registeredDate }}</template>
+			<template #value>{{ new Date(report.targetUser.createdAt).toLocaleString() }} (<MkTime :time="report.targetUser.createdAt"/>)</template>
+		</MkKeyValue>
+	</div>
+	<div class="detail">
+		<div>
+			<Mfm :text="report.comment"/>
+		</div>
+		<hr/>
+		<div>{{ i18n.ts.reporter }}: <MkAcct :user="report.reporter"/></div>
+		<div v-if="report.assignee">
+			{{ i18n.ts.moderator }}:
+			<MkAcct :user="report.assignee"/>
+		</div>
+		<div><MkTime :time="report.createdAt"/></div>
+		<div class="action">
+			<MkSwitch v-model="forward" :disabled="report.targetUser.host == null || report.resolved">
+				{{ i18n.ts.forwardReport }}
+				<template #caption>{{ i18n.ts.forwardReportIsAnonymous }}</template>
+			</MkSwitch>
+			<MkButton v-if="!report.resolved" primary @click="resolve">{{ i18n.ts.abuseMarkAsResolved }}</MkButton>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import MkButton from '@/components/MkButton.vue';
+import MkSwitch from '@/components/form/switch.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import { acct, userPage } from '@/filters/user';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	report: any;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'resolved', reportId: string): void;
+}>();
+
+let forward = $ref(props.report.forwarded);
+
+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 {
+		width: 35%;
+		box-sizing: border-box;
+		text-align: left;
+		padding: 24px;
+		border-right: solid 1px var(--divider);
+
+		> .info {
+			display: flex;
+			box-sizing: border-box;
+			align-items: center;
+			padding: 14px;
+			border-radius: 8px;
+			--c: rgb(255 196 0 / 15%);
+			background-image: linear-gradient(45deg, var(--c) 16.67%, transparent 16.67%, transparent 50%, var(--c) 50%, var(--c) 66.67%, transparent 66.67%, transparent 100%);
+			background-size: 16px 16px;
+
+			> .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/frontend/src/components/MkAbuseReportWindow.vue b/packages/frontend/src/components/MkAbuseReportWindow.vue
new file mode 100644
index 0000000000..039f77c859
--- /dev/null
+++ b/packages/frontend/src/components/MkAbuseReportWindow.vue
@@ -0,0 +1,65 @@
+<template>
+<XWindow ref="uiWindow" :initial-width="400" :initial-height="500" :can-resize="true" @closed="emit('closed')">
+	<template #header>
+		<i class="ti ti-exclamation-circle" style="margin-right: 0.5em;"></i>
+		<I18n :src="i18n.ts.reportAbuseOf" tag="span">
+			<template #name>
+				<b><MkAcct :user="user"/></b>
+			</template>
+		</I18n>
+	</template>
+	<div class="dpvffvvy _monolithic_">
+		<div class="_section">
+			<MkTextarea v-model="comment">
+				<template #label>{{ i18n.ts.details }}</template>
+				<template #caption>{{ i18n.ts.fillAbuseReportDescription }}</template>
+			</MkTextarea>
+		</div>
+		<div class="_section">
+			<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
+		</div>
+	</div>
+</XWindow>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import * as Misskey from 'misskey-js';
+import XWindow from '@/components/MkWindow.vue';
+import MkTextarea from '@/components/form/textarea.vue';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	user: Misskey.entities.User;
+	initialComment?: string;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const uiWindow = ref<InstanceType<typeof XWindow>>();
+const comment = ref(props.initialComment || '');
+
+function send() {
+	os.apiWithDialog('users/report-abuse', {
+		userId: props.user.id,
+		comment: comment.value,
+	}, undefined).then(res => {
+		os.alert({
+			type: 'success',
+			text: i18n.ts.abuseReported,
+		});
+		uiWindow.value?.close();
+		emit('closed');
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.dpvffvvy {
+	--root-margin: 16px;
+}
+</style>
diff --git a/packages/frontend/src/components/MkActiveUsersHeatmap.vue b/packages/frontend/src/components/MkActiveUsersHeatmap.vue
new file mode 100644
index 0000000000..02b2eeeb36
--- /dev/null
+++ b/packages/frontend/src/components/MkActiveUsersHeatmap.vue
@@ -0,0 +1,236 @@
+<template>
+<div ref="rootEl">
+	<MkLoading v-if="fetching"/>
+	<div v-else>
+		<canvas ref="chartEl"></canvas>
+	</div>
+</div>
+</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 * as os from '@/os';
+import 'chartjs-adapter-date-fns';
+import { defaultStore } from '@/store';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+import { MatrixController, MatrixElement } from 'chartjs-chart-matrix';
+import { chartVLine } from '@/scripts/chart-vline';
+
+Chart.register(
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+	MatrixController, MatrixElement,
+);
+
+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 rootEl = $ref<HTMLDivElement>(null);
+const chartEl = $ref<HTMLCanvasElement>(null);
+const now = new Date();
+let chartInstance: Chart = null;
+let fetching = $ref(true);
+
+const { handler: externalTooltipHandler } = useChartTooltip({
+	position: 'middle',
+});
+
+async function renderChart() {
+	if (chartInstance) {
+		chartInstance.destroy();
+	}
+
+	const wide = rootEl.offsetWidth > 700;
+	const narrow = rootEl.offsetWidth < 400;
+
+	const weeks = wide ? 50 : narrow ? 10 : 25;
+	const chartLimit = 7 * weeks;
+
+	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) => {
+			const dt = getDate(i);
+			const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1).toString().padStart(2, '0')}-${dt.getDate().toString().padStart(2, '0')}`;
+			return {
+				x: iso,
+				y: dt.getDay(),
+				d: iso,
+				v,
+			};
+		});
+	};
+
+	const raw = await os.api('charts/active-users', { limit: chartLimit, span: 'day' });
+
+	fetching = false;
+
+	await nextTick();
+
+	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 color = '#3498db';
+
+	const max = Math.max(...raw.readWrite);
+
+	const marginEachCell = 4;
+
+	chartInstance = new Chart(chartEl, {
+		type: 'matrix',
+		data: {
+			datasets: [{
+				label: 'Read & Write',
+				data: format(raw.readWrite),
+				pointRadius: 0,
+				borderWidth: 0,
+				borderJoinStyle: 'round',
+				borderRadius: 3,
+				backgroundColor(c) {
+					const value = c.dataset.data[c.dataIndex].v;
+					const a = value / max;
+					return alpha(color, a);
+				},
+				fill: true,
+				width(c) {
+					const a = c.chart.chartArea ?? {};
+					// 20週間
+					return (a.right - a.left) / weeks - marginEachCell;
+				},
+				height(c) {
+					const a = c.chart.chartArea ?? {};
+					// 7日
+					return (a.bottom - a.top) / 7 - marginEachCell;
+				},
+			}],
+		},
+		options: {
+			aspectRatio: wide ? 6 : narrow ? 1.8 : 3.2,
+			layout: {
+				padding: {
+					left: 8,
+					right: 0,
+					top: 0,
+					bottom: 0,
+				},
+			},
+			scales: {
+				x: {
+					type: 'time',
+					offset: true,
+					position: 'bottom',
+					time: {
+						unit: 'week',
+						round: 'week',
+						isoWeekday: 0,
+						displayFormats: {
+							week: 'MMM dd',
+						},
+					},
+					grid: {
+						display: false,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: true,
+						maxRotation: 0,
+						autoSkipPadding: 8,
+					},
+				},
+				y: {
+					offset: true,
+					reverse: true,
+					position: 'right',
+					grid: {
+						display: false,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						maxRotation: 0,
+						autoSkip: true,
+						padding: 1,
+						font: {
+							size: 9,
+						},
+						callback: (value, index, values) => ['', 'Mon', '', 'Wed', '', 'Fri', ''][value],
+					},
+				},
+			},
+			animation: false,
+			plugins: {
+				legend: {
+					display: false,
+				},
+				tooltip: {
+					enabled: false,
+					callbacks: {
+						title(context) {
+							const v = context[0].dataset.data[context[0].dataIndex];
+							return v.d;
+						},
+						label(context) {
+							const v = context.dataset.data[context.dataIndex];
+							return ['Active: ' + v.v];
+						},
+					},
+					//mode: 'index',
+					animation: {
+						duration: 0,
+					},
+					external: externalTooltipHandler,
+				},
+			},
+		},
+	});
+}
+
+onMounted(async () => {
+	renderChart();
+});
+</script>
diff --git a/packages/frontend/src/components/MkAnalogClock.vue b/packages/frontend/src/components/MkAnalogClock.vue
new file mode 100644
index 0000000000..40ef626aed
--- /dev/null
+++ b/packages/frontend/src/components/MkAnalogClock.vue
@@ -0,0 +1,225 @@
+<template>
+<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
+	<template v-if="props.graduations === 'dots'">
+		<circle
+			v-for="(angle, i) in graduationsMajor"
+			:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
+			:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
+			:r="0.125"
+			:fill="(props.twentyfour ? h : h % 12) === i ? nowColor : majorGraduationColor"
+			:opacity="!props.fadeGraduations || (props.twentyfour ? h : h % 12) === i ? 1 : Math.max(0, 1 - (angleDiff(hAngle, angle) / Math.PI) - numbersOpacityFactor)"
+		/>
+	</template>
+	<template v-else-if="props.graduations === 'numbers'">
+		<text
+			v-for="(angle, i) in texts"
+			:x="5 + (Math.sin(angle) * (5 - textsPadding))"
+			:y="5 - (Math.cos(angle) * (5 - textsPadding))"
+			text-anchor="middle"
+			dominant-baseline="middle"
+			:font-size="(props.twentyfour ? h : h % 12) === i ? 1 : 0.7"
+			:font-weight="(props.twentyfour ? h : h % 12) === i ? 'bold' : 'normal'"
+			:fill="(props.twentyfour ? h : h % 12) === i ? nowColor : 'currentColor'"
+			:opacity="!props.fadeGraduations || (props.twentyfour ? h : h % 12) === i ? 1 : Math.max(0, 1 - (angleDiff(hAngle, angle) / Math.PI) - numbersOpacityFactor)"
+		>
+			{{ i === 0 ? (props.twentyfour ? '24' : '12') : i }}
+		</text>
+	</template>
+
+	<!--
+	<line
+		:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
+		:y1="5 + (Math.cos(sAngle) * (sHandLengthRatio * handsTailLength))"
+		:x2="5 + (Math.sin(sAngle) * ((sHandLengthRatio * 5) - handsPadding))"
+		:y2="5 - (Math.cos(sAngle) * ((sHandLengthRatio * 5) - handsPadding))"
+		:stroke="sHandColor"
+		:stroke-width="thickness / 2"
+		stroke-linecap="round"
+	/>
+	-->
+
+	<line
+		class="s"
+		:class="{ animate: !disableSAnimate && sAnimation !== 'none', elastic: sAnimation === 'elastic', easeOut: sAnimation === 'easeOut' }"
+		:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
+		:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
+		:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
+		:y2="5 - (1 * ((sHandLengthRatio * 5) - handsPadding))"
+		:stroke="sHandColor"
+		:stroke-width="thickness / 2"
+		:style="`transform: rotateZ(${sAngle}rad)`"
+		stroke-linecap="round"
+	/>
+
+	<line
+		:x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))"
+		:y1="5 + (Math.cos(mAngle) * (mHandLengthRatio * handsTailLength))"
+		:x2="5 + (Math.sin(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
+		:y2="5 - (Math.cos(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
+		:stroke="mHandColor"
+		:stroke-width="thickness"
+		stroke-linecap="round"
+	/>
+
+	<line
+		:x1="5 - (Math.sin(hAngle) * (hHandLengthRatio * handsTailLength))"
+		:y1="5 + (Math.cos(hAngle) * (hHandLengthRatio * handsTailLength))"
+		:x2="5 + (Math.sin(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
+		:y2="5 - (Math.cos(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
+		:stroke="hHandColor"
+		:stroke-width="thickness"
+		stroke-linecap="round"
+	/>
+</svg>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, onBeforeUnmount, shallowRef, nextTick } from 'vue';
+import tinycolor from 'tinycolor2';
+import { globalEvents } from '@/events.js';
+
+// https://stackoverflow.com/questions/1878907/how-can-i-find-the-difference-between-two-angles
+const angleDiff = (a: number, b: number) => {
+	const x = Math.abs(a - b);
+	return Math.abs((x + Math.PI) % (Math.PI * 2) - Math.PI);
+};
+
+const graduationsPadding = 0.5;
+const textsPadding = 0.6;
+const handsPadding = 1;
+const handsTailLength = 0.7;
+const hHandLengthRatio = 0.75;
+const mHandLengthRatio = 1;
+const sHandLengthRatio = 1;
+const numbersOpacityFactor = 0.35;
+
+const props = withDefaults(defineProps<{
+	thickness?: number;
+	offset?: number;
+	twentyfour?: boolean;
+	graduations?: 'none' | 'dots' | 'numbers';
+	fadeGraduations?: boolean;
+	sAnimation?: 'none' | 'elastic' | 'easeOut';
+}>(), {
+	numbers: false,
+	thickness: 0.1,
+	offset: 0 - new Date().getTimezoneOffset(),
+	twentyfour: false,
+	graduations: 'dots',
+	fadeGraduations: true,
+	sAnimation: 'elastic',
+});
+
+const graduationsMajor = computed(() => {
+	const angles: number[] = [];
+	const times = props.twentyfour ? 24 : 12;
+	for (let i = 0; i < times; i++) {
+		const angle = Math.PI * i / (times / 2);
+		angles.push(angle);
+	}
+	return angles;
+});
+const texts = computed(() => {
+	const angles: number[] = [];
+	const times = props.twentyfour ? 24 : 12;
+	for (let i = 0; i < times; i++) {
+		const angle = Math.PI * i / (times / 2);
+		angles.push(angle);
+	}
+	return angles;
+});
+
+let enabled = true;
+let majorGraduationColor = $ref<string>();
+//let minorGraduationColor = $ref<string>();
+let sHandColor = $ref<string>();
+let mHandColor = $ref<string>();
+let hHandColor = $ref<string>();
+let nowColor = $ref<string>();
+let h = $ref<number>(0);
+let m = $ref<number>(0);
+let s = $ref<number>(0);
+let hAngle = $ref<number>(0);
+let mAngle = $ref<number>(0);
+let sAngle = $ref<number>(0);
+let disableSAnimate = $ref(false);
+let sOneRound = false;
+
+function tick() {
+	const now = new Date();
+	now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
+	s = now.getSeconds();
+	m = now.getMinutes();
+	h = now.getHours();
+	hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6);
+	mAngle = Math.PI * (m + s / 60) / 30;
+	if (sOneRound) { // 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
+		sAngle = Math.PI * 60 / 30;
+		window.setTimeout(() => {
+			disableSAnimate = true;
+			window.setTimeout(() => {
+				sAngle = 0;
+				window.setTimeout(() => {
+					disableSAnimate = false;
+				}, 100);
+			}, 100);
+		}, 700);
+	} else {
+		sAngle = Math.PI * s / 30;
+	}
+	sOneRound = s === 59;
+}
+
+tick();
+
+function calcColors() {
+	const computedStyle = getComputedStyle(document.documentElement);
+	const dark = tinycolor(computedStyle.getPropertyValue('--bg')).isDark();
+	const accent = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
+	majorGraduationColor = dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
+	//minorGraduationColor = dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
+	sHandColor = dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)';
+	mHandColor = tinycolor(computedStyle.getPropertyValue('--fg')).toHexString();
+	hHandColor = accent;
+	nowColor = accent;
+}
+
+calcColors();
+
+onMounted(() => {
+	const update = () => {
+		if (enabled) {
+			tick();
+			window.setTimeout(update, 1000);
+		}
+	};
+	update();
+
+	globalEvents.on('themeChanged', calcColors);
+});
+
+onBeforeUnmount(() => {
+	enabled = false;
+
+	globalEvents.off('themeChanged', calcColors);
+});
+</script>
+
+<style lang="scss" scoped>
+.mbcofsoe {
+	display: block;
+
+	> .s {
+		will-change: transform;
+		transform-origin: 50% 50%;
+
+		&.animate.elastic {
+			transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
+		}
+
+		&.animate.easeOut {
+			transition: transform .7s cubic-bezier(0,.7,.3,1);
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkAutocomplete.vue b/packages/frontend/src/components/MkAutocomplete.vue
new file mode 100644
index 0000000000..72783921d5
--- /dev/null
+++ b/packages/frontend/src/components/MkAutocomplete.vue
@@ -0,0 +1,476 @@
+<template>
+<div ref="rootEl" class="swhvrteh _popup _shadow" :style="{ zIndex }" @contextmenu.prevent="() => {}">
+	<ol v-if="type === 'user'" ref="suggests" class="users">
+		<li v-for="user in users" tabindex="-1" class="user" @click="complete(type, user)" @keydown="onKeydown">
+			<img class="avatar" :src="user.avatarUrl"/>
+			<span class="name">
+				<MkUserName :key="user.id" :user="user"/>
+			</span>
+			<span class="username">@{{ acct(user) }}</span>
+		</li>
+		<li tabindex="-1" class="choose" @click="chooseUser()" @keydown="onKeydown">{{ i18n.ts.selectUser }}</li>
+	</ol>
+	<ol v-else-if="hashtags.length > 0" ref="suggests" class="hashtags">
+		<li v-for="hashtag in hashtags" tabindex="-1" @click="complete(type, hashtag)" @keydown="onKeydown">
+			<span class="name">{{ hashtag }}</span>
+		</li>
+	</ol>
+	<ol v-else-if="emojis.length > 0" ref="suggests" class="emojis">
+		<li v-for="emoji in emojis" tabindex="-1" @click="complete(type, emoji.emoji)" @keydown="onKeydown">
+			<span v-if="emoji.isCustomEmoji" class="emoji"><img :src="defaultStore.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url" :alt="emoji.emoji"/></span>
+			<span v-else-if="defaultStore.state.emojiStyle != 'native'" class="emoji"><img :src="emoji.url" :alt="emoji.emoji"/></span>
+			<span v-else class="emoji">{{ emoji.emoji }}</span>
+			<!-- eslint-disable-next-line vue/no-v-html -->
+			<span class="name" v-html="emoji.name.replace(q, `<b>${q}</b>`)"></span>
+			<span v-if="emoji.aliasOf" class="alias">({{ emoji.aliasOf }})</span>
+		</li>
+	</ol>
+	<ol v-else-if="mfmTags.length > 0" ref="suggests" class="mfmTags">
+		<li v-for="tag in mfmTags" tabindex="-1" @click="complete(type, tag)" @keydown="onKeydown">
+			<span class="tag">{{ tag }}</span>
+		</li>
+	</ol>
+</div>
+</template>
+
+<script lang="ts">
+import { markRaw, ref, onUpdated, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+import contains from '@/scripts/contains';
+import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import { acct } from '@/filters/user';
+import * as os from '@/os';
+import { MFM_TAGS } from '@/scripts/mfm-tags';
+import { defaultStore } from '@/store';
+import { emojilist } from '@/scripts/emojilist';
+import { instance } from '@/instance';
+import { i18n } from '@/i18n';
+
+type EmojiDef = {
+	emoji: string;
+	name: string;
+	aliasOf?: string;
+	url?: string;
+	isCustomEmoji?: boolean;
+};
+
+const lib = emojilist.filter(x => x.category !== 'flags');
+
+const emjdb: EmojiDef[] = lib.map(x => ({
+	emoji: x.char,
+	name: x.name,
+	url: char2path(x.char),
+}));
+
+const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
+
+for (const x of lib) {
+	if (x.keywords) {
+		for (const k of x.keywords) {
+			emjdb.push({
+				emoji: x.char,
+				name: k,
+				aliasOf: x.name,
+				url: char2path(x.char),
+			});
+		}
+	}
+}
+
+emjdb.sort((a, b) => a.name.length - b.name.length);
+
+//#region Construct Emoji DB
+const customEmojis = instance.emojis;
+const emojiDefinitions: EmojiDef[] = [];
+
+for (const x of customEmojis) {
+	emojiDefinitions.push({
+		name: x.name,
+		emoji: `:${x.name}:`,
+		url: x.url,
+		isCustomEmoji: true,
+	});
+
+	if (x.aliases) {
+		for (const alias of x.aliases) {
+			emojiDefinitions.push({
+				name: alias,
+				aliasOf: x.name,
+				emoji: `:${x.name}:`,
+				url: x.url,
+				isCustomEmoji: true,
+			});
+		}
+	}
+}
+
+emojiDefinitions.sort((a, b) => a.name.length - b.name.length);
+
+const emojiDb = markRaw(emojiDefinitions.concat(emjdb));
+//#endregion
+
+export default {
+	emojiDb,
+	emojiDefinitions,
+	emojilist,
+	customEmojis,
+};
+</script>
+
+<script lang="ts" setup>
+const props = defineProps<{
+	type: string;
+	q: string | null;
+	textarea: HTMLTextAreaElement;
+	close: () => void;
+	x: number;
+	y: number;
+}>();
+
+const emit = defineEmits<{
+	(event: 'done', value: { type: string; value: any }): void;
+	(event: 'closed'): void;
+}>();
+
+const suggests = ref<Element>();
+const rootEl = ref<HTMLDivElement>();
+
+const fetching = ref(true);
+const users = ref<any[]>([]);
+const hashtags = ref<any[]>([]);
+const emojis = ref<(EmojiDef)[]>([]);
+const items = ref<Element[] | HTMLCollection>([]);
+const mfmTags = ref<string[]>([]);
+const select = ref(-1);
+const zIndex = os.claimZIndex('high');
+
+function complete(type: string, value: any) {
+	emit('done', { type, value });
+	emit('closed');
+	if (type === 'emoji') {
+		let recents = defaultStore.state.recentlyUsedEmojis;
+		recents = recents.filter((emoji: any) => emoji !== value);
+		recents.unshift(value);
+		defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
+	}
+}
+
+function setPosition() {
+	if (!rootEl.value) return;
+	if (props.x + rootEl.value.offsetWidth > window.innerWidth) {
+		rootEl.value.style.left = (window.innerWidth - rootEl.value.offsetWidth) + 'px';
+	} else {
+		rootEl.value.style.left = `${props.x}px`;
+	}
+	if (props.y + rootEl.value.offsetHeight > window.innerHeight) {
+		rootEl.value.style.top = (props.y - rootEl.value.offsetHeight) + 'px';
+		rootEl.value.style.marginTop = '0';
+	} else {
+		rootEl.value.style.top = props.y + 'px';
+		rootEl.value.style.marginTop = 'calc(1em + 8px)';
+	}
+}
+
+function exec() {
+	select.value = -1;
+	if (suggests.value) {
+		for (const el of Array.from(items.value)) {
+			el.removeAttribute('data-selected');
+		}
+	}
+	if (props.type === 'user') {
+		if (!props.q) {
+			users.value = [];
+			fetching.value = false;
+			return;
+		}
+
+		const cacheKey = `autocomplete:user:${props.q}`;
+		const cache = sessionStorage.getItem(cacheKey);
+
+		if (cache) {
+			users.value = JSON.parse(cache);
+			fetching.value = false;
+		} else {
+			os.api('users/search-by-username-and-host', {
+				username: props.q,
+				limit: 10,
+				detail: false,
+			}).then(searchedUsers => {
+				users.value = searchedUsers as any[];
+				fetching.value = false;
+				// キャッシュ
+				sessionStorage.setItem(cacheKey, JSON.stringify(searchedUsers));
+			});
+		}
+	} else if (props.type === 'hashtag') {
+		if (!props.q || props.q === '') {
+			hashtags.value = JSON.parse(localStorage.getItem('hashtags') || '[]');
+			fetching.value = false;
+		} else {
+			const cacheKey = `autocomplete:hashtag:${props.q}`;
+			const cache = sessionStorage.getItem(cacheKey);
+			if (cache) {
+				const hashtags = JSON.parse(cache);
+				hashtags.value = hashtags;
+				fetching.value = false;
+			} else {
+				os.api('hashtags/search', {
+					query: props.q,
+					limit: 30,
+				}).then(searchedHashtags => {
+					hashtags.value = searchedHashtags as any[];
+					fetching.value = false;
+					// キャッシュ
+					sessionStorage.setItem(cacheKey, JSON.stringify(searchedHashtags));
+				});
+			}
+		}
+	} else if (props.type === 'emoji') {
+		if (!props.q || props.q === '') {
+			// 最近使った絵文字をサジェスト
+			emojis.value = defaultStore.state.recentlyUsedEmojis.map(emoji => emojiDb.find(dbEmoji => dbEmoji.emoji === emoji)).filter(x => x) as EmojiDef[];
+			return;
+		}
+
+		const matched: EmojiDef[] = [];
+		const max = 30;
+
+		emojiDb.some(x => {
+			if (x.name.startsWith(props.q ?? '') && !x.aliasOf && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
+			return matched.length === max;
+		});
+
+		if (matched.length < max) {
+			emojiDb.some(x => {
+				if (x.name.startsWith(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
+				return matched.length === max;
+			});
+		}
+
+		if (matched.length < max) {
+			emojiDb.some(x => {
+				if (x.name.includes(props.q ?? '') && !matched.some(y => y.emoji === x.emoji)) matched.push(x);
+				return matched.length === max;
+			});
+		}
+
+		emojis.value = matched;
+	} else if (props.type === 'mfmTag') {
+		if (!props.q || props.q === '') {
+			mfmTags.value = MFM_TAGS;
+			return;
+		}
+
+		mfmTags.value = MFM_TAGS.filter(tag => tag.startsWith(props.q ?? ''));
+	}
+}
+
+function onMousedown(event: Event) {
+	if (!contains(rootEl.value, event.target) && (rootEl.value !== event.target)) props.close();
+}
+
+function onKeydown(event: KeyboardEvent) {
+	const cancel = () => {
+		event.preventDefault();
+		event.stopPropagation();
+	};
+
+	switch (event.key) {
+		case 'Enter':
+			if (select.value !== -1) {
+				cancel();
+				(items.value[select.value] as any).click();
+			} else {
+				props.close();
+			}
+			break;
+
+		case 'Escape':
+			cancel();
+			props.close();
+			break;
+
+		case 'ArrowUp':
+			if (select.value !== -1) {
+				cancel();
+				selectPrev();
+			} else {
+				props.close();
+			}
+			break;
+
+		case 'Tab':
+		case 'ArrowDown':
+			cancel();
+			selectNext();
+			break;
+
+		default:
+			event.stopPropagation();
+			props.textarea.focus();
+	}
+}
+
+function selectNext() {
+	if (++select.value >= items.value.length) select.value = 0;
+	if (items.value.length === 0) select.value = -1;
+	applySelect();
+}
+
+function selectPrev() {
+	if (--select.value < 0) select.value = items.value.length - 1;
+	applySelect();
+}
+
+function applySelect() {
+	for (const el of Array.from(items.value)) {
+		el.removeAttribute('data-selected');
+	}
+
+	if (select.value !== -1) {
+		items.value[select.value].setAttribute('data-selected', 'true');
+		(items.value[select.value] as any).focus();
+	}
+}
+
+function chooseUser() {
+	props.close();
+	os.selectUser().then(user => {
+		complete('user', user);
+		props.textarea.focus();
+	});
+}
+
+onUpdated(() => {
+	setPosition();
+	items.value = suggests.value?.children ?? [];
+});
+
+onMounted(() => {
+	setPosition();
+
+	props.textarea.addEventListener('keydown', onKeydown);
+
+	for (const el of Array.from(document.querySelectorAll('body *'))) {
+		el.addEventListener('mousedown', onMousedown);
+	}
+
+	nextTick(() => {
+		exec();
+
+		watch(() => props.q, () => {
+			nextTick(() => {
+				exec();
+			});
+		});
+	});
+});
+
+onBeforeUnmount(() => {
+	props.textarea.removeEventListener('keydown', onKeydown);
+
+	for (const el of Array.from(document.querySelectorAll('body *'))) {
+		el.removeEventListener('mousedown', onMousedown);
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.swhvrteh {
+	position: fixed;
+	max-width: 100%;
+	margin-top: calc(1em + 8px);
+	overflow: hidden;
+	transition: top 0.1s ease, left 0.1s ease;
+
+	> ol {
+		display: block;
+		margin: 0;
+		padding: 4px 0;
+		max-height: 190px;
+		max-width: 500px;
+		overflow: auto;
+		list-style: none;
+
+		> li {
+			display: flex;
+			align-items: center;
+			padding: 4px 12px;
+			white-space: nowrap;
+			overflow: hidden;
+			font-size: 0.9em;
+			cursor: default;
+
+			&, * {
+				user-select: none;
+			}
+
+			* {
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			&:hover {
+				background: var(--X3);
+			}
+
+			&[data-selected='true'] {
+				background: var(--accent);
+
+				&, * {
+					color: #fff !important;
+				}
+			}
+
+			&:active {
+				background: var(--accentDarken);
+
+				&, * {
+					color: #fff !important;
+				}
+			}
+		}
+	}
+
+	> .users > li {
+
+		.avatar {
+			min-width: 28px;
+			min-height: 28px;
+			max-width: 28px;
+			max-height: 28px;
+			margin: 0 8px 0 0;
+			border-radius: 100%;
+		}
+
+		.name {
+			margin: 0 8px 0 0;
+		}
+	}
+
+	> .emojis > li {
+
+		.emoji {
+			display: inline-block;
+			margin: 0 4px 0 0;
+			width: 24px;
+
+			> img {
+				width: 24px;
+				vertical-align: bottom;
+			}
+		}
+
+		.alias {
+			margin: 0 0 0 8px;
+		}
+	}
+
+	> .mfmTags > li {
+
+		.name {
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkAvatars.vue b/packages/frontend/src/components/MkAvatars.vue
new file mode 100644
index 0000000000..162338b639
--- /dev/null
+++ b/packages/frontend/src/components/MkAvatars.vue
@@ -0,0 +1,24 @@
+<template>
+<div>
+	<div v-for="user in users" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
+		<MkAvatar :user="user" style="width:32px;height:32px;" :show-indicator="true"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import * as os from '@/os';
+
+const props = defineProps<{
+	userIds: string[];
+}>();
+
+const users = ref([]);
+
+onMounted(async () => {
+	users.value = await os.api('users/show', {
+		userIds: props.userIds,
+	});
+});
+</script>
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
new file mode 100644
index 0000000000..891645bb2a
--- /dev/null
+++ b/packages/frontend/src/components/MkButton.vue
@@ -0,0 +1,227 @@
+<template>
+<button
+	v-if="!link"
+	ref="el" class="bghgjjyj _button"
+	:class="{ inline, primary, gradate, danger, rounded, full }"
+	:type="type"
+	@click="emit('click', $event)"
+	@mousedown="onMousedown"
+>
+	<div ref="ripples" class="ripples"></div>
+	<div class="content">
+		<slot></slot>
+	</div>
+</button>
+<MkA
+	v-else class="bghgjjyj _button"
+	:class="{ inline, primary, gradate, danger, rounded, full }"
+	:to="to"
+	@mousedown="onMousedown"
+>
+	<div ref="ripples" class="ripples"></div>
+	<div class="content">
+		<slot></slot>
+	</div>
+</MkA>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted } from 'vue';
+
+const props = defineProps<{
+	type?: 'button' | 'submit' | 'reset';
+	primary?: boolean;
+	gradate?: boolean;
+	rounded?: boolean;
+	inline?: boolean;
+	link?: boolean;
+	to?: string;
+	autofocus?: boolean;
+	wait?: boolean;
+	danger?: boolean;
+	full?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'click', payload: MouseEvent): void;
+}>();
+
+let el = $ref<HTMLElement | null>(null);
+let ripples = $ref<HTMLElement | null>(null);
+
+onMounted(() => {
+	if (props.autofocus) {
+		nextTick(() => {
+			el!.focus();
+		});
+	}
+});
+
+function distance(p, q): number {
+	return Math.hypot(p.x - q.x, p.y - q.y);
+}
+
+function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY): number {
+	const origin = { x: circleCenterX, y: circleCenterY };
+	const dist1 = distance({ x: 0, y: 0 }, origin);
+	const dist2 = distance({ x: boxW, y: 0 }, origin);
+	const dist3 = distance({ x: 0, y: boxH }, origin);
+	const dist4 = distance({ x: boxW, y: boxH }, origin);
+	return Math.max(dist1, dist2, dist3, dist4) * 2;
+}
+
+function onMousedown(evt: MouseEvent): void {
+	const target = evt.target! as HTMLElement;
+	const rect = target.getBoundingClientRect();
+
+	const ripple = document.createElement('div');
+	ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
+	ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
+
+	ripples!.appendChild(ripple);
+
+	const circleCenterX = evt.clientX - rect.left;
+	const circleCenterY = evt.clientY - rect.top;
+
+	const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY);
+
+	window.setTimeout(() => {
+		ripple.style.transform = 'scale(' + (scale / 2) + ')';
+	}, 1);
+	window.setTimeout(() => {
+		ripple.style.transition = 'all 1s ease';
+		ripple.style.opacity = '0';
+	}, 1000);
+	window.setTimeout(() => {
+		if (ripples) ripples.removeChild(ripple);
+	}, 2000);
+}
+</script>
+
+<style lang="scss" scoped>
+.bghgjjyj {
+	position: relative;
+	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
+	display: block;
+	min-width: 100px;
+	width: max-content;
+	padding: 7px 14px;
+	text-align: center;
+	font-weight: normal;
+	font-size: 95%;
+	box-shadow: none;
+	text-decoration: none;
+	background: var(--buttonBg);
+	border-radius: 5px;
+	overflow: clip;
+	box-sizing: border-box;
+	transition: background 0.1s ease;
+
+	&:not(:disabled):hover {
+		background: var(--buttonHoverBg);
+	}
+
+	&:not(:disabled):active {
+		background: var(--buttonHoverBg);
+	}
+
+	&.full {
+		width: 100%;
+	}
+
+	&.rounded {
+		border-radius: 999px;
+	}
+
+	&.primary {
+		font-weight: bold;
+		color: var(--fgOnAccent) !important;
+		background: var(--accent);
+
+		&:not(:disabled):hover {
+			background: var(--X8);
+		}
+
+		&:not(:disabled):active {
+			background: var(--X8);
+		}
+	}
+
+	&.gradate {
+		font-weight: bold;
+		color: var(--fgOnAccent) !important;
+		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+
+		&:not(:disabled):hover {
+			background: linear-gradient(90deg, var(--X8), var(--X8));
+		}
+
+		&:not(:disabled):active {
+			background: linear-gradient(90deg, var(--X8), var(--X8));
+		}
+	}
+
+	&.danger {
+		color: #ff2a2a;
+
+		&.primary {
+			color: #fff;
+			background: #ff2a2a;
+
+			&:not(:disabled):hover {
+				background: #ff4242;
+			}
+
+			&:not(:disabled):active {
+				background: #d42e2e;
+			}
+		}
+	}
+
+	&:disabled {
+		opacity: 0.7;
+	}
+
+	&:focus-visible {
+		outline: solid 2px var(--focus);
+		outline-offset: 2px;
+	}
+
+	&.inline {
+		display: inline-block;
+		width: auto;
+		min-width: 100px;
+	}
+
+	> .ripples {
+		position: absolute;
+		z-index: 0;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		border-radius: 6px;
+		overflow: hidden;
+
+		::v-deep(div) {
+			position: absolute;
+			width: 2px;
+			height: 2px;
+			border-radius: 100%;
+			background: rgba(0, 0, 0, 0.1);
+			opacity: 1;
+			transform: scale(1);
+			transition: all 0.5s cubic-bezier(0,.5,0,1);
+		}
+	}
+
+	&.primary > .ripples ::v-deep(div) {
+		background: rgba(0, 0, 0, 0.15);
+	}
+
+	> .content {
+		position: relative;
+		z-index: 1;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkCaptcha.vue b/packages/frontend/src/components/MkCaptcha.vue
new file mode 100644
index 0000000000..6d218389fc
--- /dev/null
+++ b/packages/frontend/src/components/MkCaptcha.vue
@@ -0,0 +1,118 @@
+<template>
+<div>
+	<span v-if="!available">{{ i18n.ts.waiting }}<MkEllipsis/></span>
+	<div ref="captchaEl"></div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+
+type Captcha = {
+	render(container: string | Node, options: {
+		readonly [_ in 'sitekey' | 'theme' | 'type' | 'size' | 'tabindex' | 'callback' | 'expired' | 'expired-callback' | 'error-callback' | 'endpoint']?: unknown;
+	}): string;
+	remove(id: string): void;
+	execute(id: string): void;
+	reset(id?: string): void;
+	getResponse(id: string): string;
+};
+
+type CaptchaProvider = 'hcaptcha' | 'recaptcha' | 'turnstile';
+
+type CaptchaContainer = {
+	readonly [_ in CaptchaProvider]?: Captcha;
+};
+
+declare global {
+	interface Window extends CaptchaContainer { }
+}
+
+const props = defineProps<{
+	provider: CaptchaProvider;
+	sitekey: string;
+	modelValue?: string | null;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', v: string | null): void;
+}>();
+
+const available = ref(false);
+
+const captchaEl = ref<HTMLDivElement | undefined>();
+
+const variable = computed(() => {
+	switch (props.provider) {
+		case 'hcaptcha': return 'hcaptcha';
+		case 'recaptcha': return 'grecaptcha';
+		case 'turnstile': return 'turnstile';
+	}
+});
+
+const loaded = !!window[variable.value];
+
+const src = computed(() => {
+	switch (props.provider) {
+		case 'hcaptcha': return 'https://js.hcaptcha.com/1/api.js?render=explicit&recaptchacompat=off';
+		case 'recaptcha': return 'https://www.recaptcha.net/recaptcha/api.js?render=explicit';
+		case 'turnstile': return 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
+	}
+});
+
+const scriptId = computed(() => `script-${props.provider}`)
+
+const captcha = computed<Captcha>(() => window[variable.value] || {} as unknown as Captcha);
+
+if (loaded) {
+	available.value = true;
+} else {
+	(document.getElementById(scriptId.value) || document.head.appendChild(Object.assign(document.createElement('script'), {
+		async: true,
+		id: scriptId.value,
+		src: src.value,
+	})))
+		.addEventListener('load', () => available.value = true);
+}
+
+function reset() {
+	if (captcha.value.reset) captcha.value.reset();
+}
+
+function requestRender() {
+	if (captcha.value.render && captchaEl.value instanceof Element) {
+		captcha.value.render(captchaEl.value, {
+			sitekey: props.sitekey,
+			theme: defaultStore.state.darkMode ? 'dark' : 'light',
+			callback: callback,
+			'expired-callback': callback,
+			'error-callback': callback,
+		});
+	} else {
+		window.setTimeout(requestRender, 1);
+	}
+}
+
+function callback(response?: string) {
+	emit('update:modelValue', typeof response === 'string' ? response : null);
+}
+
+onMounted(() => {
+	if (available.value) {
+		requestRender();
+	} else {
+		watch(available, requestRender);
+	}
+});
+
+onBeforeUnmount(() => {
+	reset();
+});
+
+defineExpose({
+	reset,
+});
+
+</script>
diff --git a/packages/frontend/src/components/MkChannelFollowButton.vue b/packages/frontend/src/components/MkChannelFollowButton.vue
new file mode 100644
index 0000000000..9e275d6172
--- /dev/null
+++ b/packages/frontend/src/components/MkChannelFollowButton.vue
@@ -0,0 +1,129 @@
+<template>
+<button
+	class="hdcaacmi _button"
+	:class="{ wait, active: isFollowing, full }"
+	:disabled="wait"
+	@click="onClick"
+>
+	<template v-if="!wait">
+		<template v-if="isFollowing">
+			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
+		</template>
+		<template v-else>
+			<span v-if="full">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
+		</template>
+	</template>
+	<template v-else>
+		<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true"/>
+	</template>
+</button>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const props = withDefaults(defineProps<{
+	channel: Record<string, any>;
+	full?: boolean;
+}>(), {
+	full: false,
+});
+
+const isFollowing = ref<boolean>(props.channel.isFollowing);
+const wait = ref(false);
+
+async function onClick() {
+	wait.value = true;
+
+	try {
+		if (isFollowing.value) {
+			await os.api('channels/unfollow', {
+				channelId: props.channel.id,
+			});
+			isFollowing.value = false;
+		} else {
+			await os.api('channels/follow', {
+				channelId: props.channel.id,
+			});
+			isFollowing.value = true;
+		}
+	} catch (err) {
+		console.error(err);
+	} finally {
+		wait.value = false;
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.hdcaacmi {
+	position: relative;
+	display: inline-block;
+	font-weight: bold;
+	color: var(--accent);
+	background: transparent;
+	border: solid 1px var(--accent);
+	padding: 0;
+	height: 31px;
+	font-size: 16px;
+	border-radius: 32px;
+	background: #fff;
+
+	&.full {
+		padding: 0 8px 0 12px;
+		font-size: 14px;
+	}
+
+	&:not(.full) {
+		width: 31px;
+	}
+
+	&:focus-visible {
+		&:after {
+			content: "";
+			pointer-events: none;
+			position: absolute;
+			top: -5px;
+			right: -5px;
+			bottom: -5px;
+			left: -5px;
+			border: 2px solid var(--focus);
+			border-radius: 32px;
+		}
+	}
+
+	&:hover {
+		//background: mix($primary, #fff, 20);
+	}
+
+	&:active {
+		//background: mix($primary, #fff, 40);
+	}
+
+	&.active {
+		color: #fff;
+		background: var(--accent);
+
+		&:hover {
+			background: var(--accentLighten);
+			border-color: var(--accentLighten);
+		}
+
+		&:active {
+			background: var(--accentDarken);
+			border-color: var(--accentDarken);
+		}
+	}
+
+	&.wait {
+		cursor: wait !important;
+		opacity: 0.7;
+	}
+
+	> span {
+		margin-right: 6px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue
new file mode 100644
index 0000000000..6ef50bddcf
--- /dev/null
+++ b/packages/frontend/src/components/MkChannelPreview.vue
@@ -0,0 +1,154 @@
+<template>
+<MkA :to="`/channels/${channel.id}`" class="eftoefju _panel" tabindex="-1">
+	<div class="banner" :style="bannerStyle">
+		<div class="fade"></div>
+		<div class="name"><i class="ti ti-device-tv"></i> {{ channel.name }}</div>
+		<div class="status">
+			<div>
+				<i class="ti ti-users ti-fw"></i>
+				<I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;">
+					<template #n>
+						<b>{{ channel.usersCount }}</b>
+					</template>
+				</I18n>
+			</div>
+			<div>
+				<i class="ti ti-pencil ti-fw"></i>
+				<I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;">
+					<template #n>
+						<b>{{ channel.notesCount }}</b>
+					</template>
+				</I18n>
+			</div>
+		</div>
+	</div>
+	<article v-if="channel.description">
+		<p :title="channel.description">{{ channel.description.length > 85 ? channel.description.slice(0, 85) + '…' : channel.description }}</p>
+	</article>
+	<footer>
+		<span v-if="channel.lastNotedAt">
+			{{ i18n.ts.updatedAt }}: <MkTime :time="channel.lastNotedAt"/>
+		</span>
+	</footer>
+</MkA>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	channel: Record<string, any>;
+}>();
+
+const bannerStyle = computed(() => {
+	if (props.channel.bannerUrl) {
+		return { backgroundImage: `url(${props.channel.bannerUrl})` };
+	} else {
+		return { backgroundColor: '#4c5e6d' };
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.eftoefju {
+	display: block;
+	overflow: hidden;
+	width: 100%;
+
+	&:hover {
+		text-decoration: none;
+	}
+
+	> .banner {
+		position: relative;
+		width: 100%;
+		height: 200px;
+		background-position: center;
+		background-size: cover;
+
+		> .fade {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 64px;
+			background: linear-gradient(0deg, var(--panel), var(--X15));
+		}
+
+		> .name {
+			position: absolute;
+			top: 16px;
+			left: 16px;
+			padding: 12px 16px;
+			background: rgba(0, 0, 0, 0.7);
+			color: #fff;
+			font-size: 1.2em;
+		}
+
+		> .status {
+			position: absolute;
+			z-index: 1;
+			bottom: 16px;
+			right: 16px;
+			padding: 8px 12px;
+			font-size: 80%;
+			background: rgba(0, 0, 0, 0.7);
+			border-radius: 6px;
+			color: #fff;
+		}
+	}
+
+	> article {
+		padding: 16px;
+
+		> p {
+			margin: 0;
+			font-size: 1em;
+		}
+	}
+
+	> footer {
+		padding: 12px 16px;
+		border-top: solid 0.5px var(--divider);
+
+		> span {
+			opacity: 0.7;
+			font-size: 0.9em;
+		}
+	}
+
+	@media (max-width: 550px) {
+		font-size: 0.9em;
+
+		> .banner {
+			height: 80px;
+
+			> .status {
+				display: none;
+			}
+		}
+
+		> article {
+			padding: 12px;
+		}
+
+		> footer {
+			display: none;
+		}
+	}
+
+	@media (max-width: 500px) {
+		font-size: 0.8em;
+
+		> .banner {
+			height: 70px;
+		}
+
+		> article {
+			padding: 8px;
+		}
+	}
+}
+
+</style>
diff --git a/packages/frontend/src/components/MkChart.vue b/packages/frontend/src/components/MkChart.vue
new file mode 100644
index 0000000000..fbbc231b88
--- /dev/null
+++ b/packages/frontend/src/components/MkChart.vue
@@ -0,0 +1,859 @@
+<template>
+<div class="cbbedffa">
+	<canvas ref="chartEl"></canvas>
+	<div v-if="fetching" class="fetching">
+		<MkLoading/>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+/* eslint-disable id-denylist --
+  Chart.js has a `data` attribute in most chart definitions, which triggers the
+  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 { onMounted, ref, watch, PropType, onUnmounted } from 'vue';
+import {
+	Chart,
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+} from 'chart.js';
+import 'chartjs-adapter-date-fns';
+import { enUS } from 'date-fns/locale';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import gradient from 'chartjs-plugin-gradient';
+import * as os from '@/os';
+import { defaultStore } from '@/store';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+import { chartVLine } from '@/scripts/chart-vline';
+
+const props = defineProps({
+	src: {
+		type: String,
+		required: true,
+	},
+	args: {
+		type: Object,
+		required: false,
+	},
+	limit: {
+		type: Number,
+		required: false,
+		default: 90,
+	},
+	span: {
+		type: String as PropType<'hour' | 'day'>,
+		required: true,
+	},
+	detailed: {
+		type: Boolean,
+		required: false,
+		default: false,
+	},
+	stacked: {
+		type: Boolean,
+		required: false,
+		default: false,
+	},
+	bar: {
+		type: Boolean,
+		required: false,
+		default: false,
+	},
+	aspectRatio: {
+		type: Number,
+		required: false,
+		default: null,
+	},
+});
+
+Chart.register(
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+	zoomPlugin,
+	gradient,
+);
+
+const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
+const negate = arr => arr.map(x => -x);
+const alpha = (hex, a) => {
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)!;
+	const r = parseInt(result[1], 16);
+	const g = parseInt(result[2], 16);
+	const b = parseInt(result[3], 16);
+	return `rgba(${r}, ${g}, ${b}, ${a})`;
+};
+
+const colors = {
+	blue: '#008FFB',
+	green: '#00E396',
+	yellow: '#FEB019',
+	red: '#FF4560',
+	purple: '#e300db',
+	orange: '#fe6919',
+	lime: '#bde800',
+	cyan: '#00e0e0',
+};
+const colorSets = [colors.blue, colors.green, colors.yellow, colors.red, colors.purple];
+const getColor = (i) => {
+	return colorSets[i % colorSets.length];
+};
+
+const now = new Date();
+let chartInstance: Chart = null;
+let chartData: {
+	series: {
+		name: string;
+		type: 'line' | 'area';
+		color?: string;
+		dashed?: boolean;
+		hidden?: boolean;
+		data: {
+			x: number;
+			y: number;
+		}[];
+	}[];
+} = null;
+
+const chartEl = ref<HTMLCanvasElement>(null);
+const fetching = ref(true);
+
+const getDate = (ago: number) => {
+	const y = now.getFullYear();
+	const m = now.getMonth();
+	const d = now.getDate();
+	const h = now.getHours();
+
+	return props.span === 'day' ? new Date(y, m, d - ago) : new Date(y, m, d, h - ago);
+};
+
+const format = (arr) => {
+	return arr.map((v, i) => ({
+		x: getDate(i).getTime(),
+		y: v,
+	}));
+};
+
+const { handler: externalTooltipHandler } = useChartTooltip();
+
+const render = () => {
+	if (chartInstance) {
+		chartInstance.destroy();
+	}
+
+	const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
+
+	// フォントカラー
+	Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+
+	const maxes = chartData.series.map((x, i) => Math.max(...x.data.map(d => d.y)));
+
+	chartInstance = new Chart(chartEl.value, {
+		type: props.bar ? 'bar' : 'line',
+		data: {
+			labels: new Array(props.limit).fill(0).map((_, i) => getDate(i).toLocaleString()).slice().reverse(),
+			datasets: chartData.series.map((x, i) => ({
+				parsing: false,
+				label: x.name,
+				data: x.data.slice().reverse(),
+				tension: 0.3,
+				pointRadius: 0,
+				borderWidth: props.bar ? 0 : 2,
+				borderColor: x.color ? x.color : getColor(i),
+				borderDash: x.dashed ? [5, 5] : [],
+				borderJoinStyle: 'round',
+				borderRadius: props.bar ? 3 : undefined,
+				backgroundColor: props.bar ? (x.color ? x.color : getColor(i)) : alpha(x.color ? x.color : getColor(i), 0.1),
+				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.35),
+						},
+					},
+				},
+				barPercentage: 0.9,
+				categoryPercentage: 0.9,
+				fill: x.type === 'area',
+				clip: 8,
+				hidden: !!x.hidden,
+			})),
+		},
+		options: {
+			aspectRatio: props.aspectRatio || 2.5,
+			layout: {
+				padding: {
+					left: 0,
+					right: 8,
+					top: 0,
+					bottom: 0,
+				},
+			},
+			scales: {
+				x: {
+					type: 'time',
+					stacked: props.stacked,
+					offset: false,
+					time: {
+						stepSize: 1,
+						unit: props.span === 'day' ? 'month' : 'day',
+					},
+					grid: {
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: props.detailed,
+						maxRotation: 0,
+						autoSkipPadding: 16,
+					},
+					adapters: {
+						date: {
+							locale: enUS,
+						},
+					},
+					min: getDate(props.limit).getTime(),
+				},
+				y: {
+					position: 'left',
+					stacked: props.stacked,
+					suggestedMax: 50,
+					grid: {
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: props.detailed,
+						//mirror: true,
+					},
+				},
+			},
+			interaction: {
+				intersect: false,
+				mode: 'index',
+			},
+			elements: {
+				point: {
+					hoverRadius: 5,
+					hoverBorderWidth: 2,
+				},
+			},
+			animation: false,
+			plugins: {
+				legend: {
+					display: props.detailed,
+					position: 'bottom',
+					labels: {
+						boxWidth: 16,
+					},
+				},
+				tooltip: {
+					enabled: false,
+					mode: 'index',
+					animation: {
+						duration: 0,
+					},
+					external: externalTooltipHandler,
+				},
+				zoom: props.detailed ? {
+					pan: {
+						enabled: true,
+					},
+					zoom: {
+						wheel: {
+							enabled: true,
+						},
+						pinch: {
+							enabled: true,
+						},
+						drag: {
+							enabled: false,
+						},
+						mode: 'x',
+					},
+					limits: {
+						x: {
+							min: 'original',
+							max: 'original',
+						},
+						y: {
+							min: 'original',
+							max: 'original',
+						},
+					},
+				} : undefined,
+				gradient,
+			},
+		},
+		plugins: [chartVLine(vLineColor)],
+	});
+};
+
+const exportData = () => {
+	// TODO
+};
+
+const fetchFederationChart = async (): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/federation', { limit: props.limit, span: props.span });
+	return {
+		series: [{
+			name: 'Received',
+			type: 'area',
+			data: format(raw.inboxInstances),
+			color: colors.blue,
+		}, {
+			name: 'Delivered',
+			type: 'area',
+			data: format(raw.deliveredInstances),
+			color: colors.green,
+		}, {
+			name: 'Stalled',
+			type: 'area',
+			data: format(raw.stalled),
+			color: colors.red,
+		}, {
+			name: 'Pub Active',
+			type: 'line',
+			data: format(raw.pubActive),
+			color: colors.purple,
+		}, {
+			name: 'Sub Active',
+			type: 'line',
+			data: format(raw.subActive),
+			color: colors.orange,
+		}, {
+			name: 'Pub & Sub',
+			type: 'line',
+			data: format(raw.pubsub),
+			dashed: true,
+			color: colors.cyan,
+		}, {
+			name: 'Pub',
+			type: 'line',
+			data: format(raw.pub),
+			dashed: true,
+			color: colors.purple,
+		}, {
+			name: 'Sub',
+			type: 'line',
+			data: format(raw.sub),
+			dashed: true,
+			color: colors.orange,
+		}],
+	};
+};
+
+const fetchApRequestChart = async (): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/ap-request', { limit: props.limit, span: props.span });
+	return {
+		series: [{
+			name: 'In',
+			type: 'area',
+			color: '#008FFB',
+			data: format(raw.inboxReceived),
+		}, {
+			name: 'Out (succ)',
+			type: 'area',
+			color: '#00E396',
+			data: format(raw.deliverSucceeded),
+		}, {
+			name: 'Out (fail)',
+			type: 'area',
+			color: '#FEB019',
+			data: format(raw.deliverFailed),
+		}],
+	};
+};
+
+const fetchNotesChart = async (type: string): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/notes', { limit: props.limit, span: props.span });
+	return {
+		series: [{
+			name: 'All',
+			type: 'line',
+			data: format(type === 'combined'
+				? sum(raw.local.inc, negate(raw.local.dec), raw.remote.inc, negate(raw.remote.dec))
+				: sum(raw[type].inc, negate(raw[type].dec)),
+			),
+			color: '#888888',
+		}, {
+			name: 'Renotes',
+			type: 'area',
+			data: format(type === 'combined'
+				? sum(raw.local.diffs.renote, raw.remote.diffs.renote)
+				: raw[type].diffs.renote,
+			),
+			color: colors.green,
+		}, {
+			name: 'Replies',
+			type: 'area',
+			data: format(type === 'combined'
+				? sum(raw.local.diffs.reply, raw.remote.diffs.reply)
+				: raw[type].diffs.reply,
+			),
+			color: colors.yellow,
+		}, {
+			name: 'Normal',
+			type: 'area',
+			data: format(type === 'combined'
+				? sum(raw.local.diffs.normal, raw.remote.diffs.normal)
+				: raw[type].diffs.normal,
+			),
+			color: colors.blue,
+		}, {
+			name: 'With file',
+			type: 'area',
+			data: format(type === 'combined'
+				? sum(raw.local.diffs.withFile, raw.remote.diffs.withFile)
+				: raw[type].diffs.withFile,
+			),
+			color: colors.purple,
+		}],
+	};
+};
+
+const fetchNotesTotalChart = async (): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/notes', { limit: props.limit, span: props.span });
+	return {
+		series: [{
+			name: 'Combined',
+			type: 'line',
+			data: format(sum(raw.local.total, raw.remote.total)),
+		}, {
+			name: 'Local',
+			type: 'area',
+			data: format(raw.local.total),
+		}, {
+			name: 'Remote',
+			type: 'area',
+			data: format(raw.remote.total),
+		}],
+	};
+};
+
+const fetchUsersChart = async (total: boolean): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/users', { limit: props.limit, span: props.span });
+	return {
+		series: [{
+			name: 'Combined',
+			type: 'line',
+			data: format(total
+				? sum(raw.local.total, raw.remote.total)
+				: sum(raw.local.inc, negate(raw.local.dec), raw.remote.inc, negate(raw.remote.dec)),
+			),
+		}, {
+			name: 'Local',
+			type: 'area',
+			data: format(total
+				? raw.local.total
+				: sum(raw.local.inc, negate(raw.local.dec)),
+			),
+		}, {
+			name: 'Remote',
+			type: 'area',
+			data: format(total
+				? raw.remote.total
+				: sum(raw.remote.inc, negate(raw.remote.dec)),
+			),
+		}],
+	};
+};
+
+const fetchActiveUsersChart = async (): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/active-users', { limit: props.limit, span: props.span });
+	return {
+		series: [{
+			name: 'Read & Write',
+			type: 'area',
+			data: format(raw.readWrite),
+			color: colors.orange,
+		}, {
+			name: 'Write',
+			type: 'area',
+			data: format(raw.write),
+			color: colors.lime,
+		}, {
+			name: 'Read',
+			type: 'area',
+			data: format(raw.read),
+			color: colors.blue,
+		}, {
+			name: '< Week',
+			type: 'area',
+			data: format(raw.registeredWithinWeek),
+			color: colors.green,
+		}, {
+			name: '< Month',
+			type: 'area',
+			data: format(raw.registeredWithinMonth),
+			color: colors.yellow,
+		}, {
+			name: '< Year',
+			type: 'area',
+			data: format(raw.registeredWithinYear),
+			color: colors.red,
+		}, {
+			name: '> Week',
+			type: 'area',
+			data: format(raw.registeredOutsideWeek),
+			color: colors.yellow,
+		}, {
+			name: '> Month',
+			type: 'area',
+			data: format(raw.registeredOutsideMonth),
+			color: colors.red,
+		}, {
+			name: '> Year',
+			type: 'area',
+			data: format(raw.registeredOutsideYear),
+			color: colors.purple,
+		}],
+	};
+};
+
+const fetchDriveChart = async (): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/drive', { limit: props.limit, span: props.span });
+	return {
+		bytes: true,
+		series: [{
+			name: 'All',
+			type: 'line',
+			dashed: true,
+			data: format(
+				sum(
+					raw.local.incSize,
+					negate(raw.local.decSize),
+					raw.remote.incSize,
+					negate(raw.remote.decSize),
+				),
+			),
+		}, {
+			name: 'Local +',
+			type: 'area',
+			data: format(raw.local.incSize),
+		}, {
+			name: 'Local -',
+			type: 'area',
+			data: format(negate(raw.local.decSize)),
+		}, {
+			name: 'Remote +',
+			type: 'area',
+			data: format(raw.remote.incSize),
+		}, {
+			name: 'Remote -',
+			type: 'area',
+			data: format(negate(raw.remote.decSize)),
+		}],
+	};
+};
+
+const fetchDriveFilesChart = async (): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/drive', { limit: props.limit, span: props.span });
+	return {
+		series: [{
+			name: 'All',
+			type: 'line',
+			dashed: true,
+			data: format(
+				sum(
+					raw.local.incCount,
+					negate(raw.local.decCount),
+					raw.remote.incCount,
+					negate(raw.remote.decCount),
+				),
+			),
+		}, {
+			name: 'Local +',
+			type: 'area',
+			data: format(raw.local.incCount),
+		}, {
+			name: 'Local -',
+			type: 'area',
+			data: format(negate(raw.local.decCount)),
+		}, {
+			name: 'Remote +',
+			type: 'area',
+			data: format(raw.remote.incCount),
+		}, {
+			name: 'Remote -',
+			type: 'area',
+			data: format(negate(raw.remote.decCount)),
+		}],
+	};
+};
+
+const fetchInstanceRequestsChart = async (): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+	return {
+		series: [{
+			name: 'In',
+			type: 'area',
+			color: '#008FFB',
+			data: format(raw.requests.received),
+		}, {
+			name: 'Out (succ)',
+			type: 'area',
+			color: '#00E396',
+			data: format(raw.requests.succeeded),
+		}, {
+			name: 'Out (fail)',
+			type: 'area',
+			color: '#FEB019',
+			data: format(raw.requests.failed),
+		}],
+	};
+};
+
+const fetchInstanceUsersChart = async (total: boolean): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+	return {
+		series: [{
+			name: 'Users',
+			type: 'area',
+			color: '#008FFB',
+			data: format(total
+				? raw.users.total
+				: sum(raw.users.inc, negate(raw.users.dec)),
+			),
+		}],
+	};
+};
+
+const fetchInstanceNotesChart = async (total: boolean): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+	return {
+		series: [{
+			name: 'Notes',
+			type: 'area',
+			color: '#008FFB',
+			data: format(total
+				? raw.notes.total
+				: sum(raw.notes.inc, negate(raw.notes.dec)),
+			),
+		}],
+	};
+};
+
+const fetchInstanceFfChart = async (total: boolean): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+	return {
+		series: [{
+			name: 'Following',
+			type: 'area',
+			color: '#008FFB',
+			data: format(total
+				? raw.following.total
+				: 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)),
+			),
+		}],
+	};
+};
+
+const fetchInstanceDriveUsageChart = async (total: boolean): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+	return {
+		bytes: true,
+		series: [{
+			name: 'Drive usage',
+			type: 'area',
+			color: '#008FFB',
+			data: format(total
+				? raw.drive.totalUsage
+				: sum(raw.drive.incUsage, negate(raw.drive.decUsage)),
+			),
+		}],
+	};
+};
+
+const fetchInstanceDriveFilesChart = async (total: boolean): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
+	return {
+		series: [{
+			name: 'Drive files',
+			type: 'area',
+			color: '#008FFB',
+			data: format(total
+				? raw.drive.totalFiles
+				: sum(raw.drive.incFiles, negate(raw.drive.decFiles)),
+			),
+		}],
+	};
+};
+
+const fetchPerUserNotesChart = async (): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/user/notes', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	return {
+		series: [...(props.args.withoutAll ? [] : [{
+			name: 'All',
+			type: 'line',
+			data: format(sum(raw.inc, negate(raw.dec))),
+			color: '#888888',
+		}]), {
+			name: 'With file',
+			type: 'area',
+			data: format(raw.diffs.withFile),
+			color: colors.purple,
+		}, {
+			name: 'Renotes',
+			type: 'area',
+			data: format(raw.diffs.renote),
+			color: colors.green,
+		}, {
+			name: 'Replies',
+			type: 'area',
+			data: format(raw.diffs.reply),
+			color: colors.yellow,
+		}, {
+			name: 'Normal',
+			type: 'area',
+			data: format(raw.diffs.normal),
+			color: colors.blue,
+		}],
+	};
+};
+
+const fetchPerUserFollowingChart = async (): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	return {
+		series: [{
+			name: 'Local',
+			type: 'area',
+			data: format(raw.local.followings.total),
+		}, {
+			name: 'Remote',
+			type: 'area',
+			data: format(raw.remote.followings.total),
+		}],
+	};
+};
+
+const fetchPerUserFollowersChart = async (): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/user/following', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	return {
+		series: [{
+			name: 'Local',
+			type: 'area',
+			data: format(raw.local.followers.total),
+		}, {
+			name: 'Remote',
+			type: 'area',
+			data: format(raw.remote.followers.total),
+		}],
+	};
+};
+
+const fetchPerUserDriveChart = async (): Promise<typeof chartData> => {
+	const raw = await os.apiGet('charts/user/drive', { userId: props.args.user.id, limit: props.limit, span: props.span });
+	return {
+		series: [{
+			name: 'Inc',
+			type: 'area',
+			data: format(raw.incSize),
+		}, {
+			name: 'Dec',
+			type: 'area',
+			data: format(raw.decSize),
+		}],
+	};
+};
+
+const fetchAndRender = async () => {
+	const fetchData = () => {
+		switch (props.src) {
+			case 'federation': return fetchFederationChart();
+			case 'ap-request': return fetchApRequestChart();
+			case 'users': return fetchUsersChart(false);
+			case 'users-total': return fetchUsersChart(true);
+			case 'active-users': return fetchActiveUsersChart();
+			case 'notes': return fetchNotesChart('combined');
+			case 'local-notes': return fetchNotesChart('local');
+			case 'remote-notes': return fetchNotesChart('remote');
+			case 'notes-total': return fetchNotesTotalChart();
+			case 'drive': return fetchDriveChart();
+			case 'drive-files': return fetchDriveFilesChart();
+			case 'instance-requests': return fetchInstanceRequestsChart();
+			case 'instance-users': return fetchInstanceUsersChart(false);
+			case 'instance-users-total': return fetchInstanceUsersChart(true);
+			case 'instance-notes': return fetchInstanceNotesChart(false);
+			case 'instance-notes-total': return fetchInstanceNotesChart(true);
+			case 'instance-ff': return fetchInstanceFfChart(false);
+			case 'instance-ff-total': return fetchInstanceFfChart(true);
+			case 'instance-drive-usage': return fetchInstanceDriveUsageChart(false);
+			case 'instance-drive-usage-total': return fetchInstanceDriveUsageChart(true);
+			case 'instance-drive-files': return fetchInstanceDriveFilesChart(false);
+			case 'instance-drive-files-total': return fetchInstanceDriveFilesChart(true);
+
+			case 'per-user-notes': return fetchPerUserNotesChart();
+			case 'per-user-following': return fetchPerUserFollowingChart();
+			case 'per-user-followers': return fetchPerUserFollowersChart();
+			case 'per-user-drive': return fetchPerUserDriveChart();
+		}
+	};
+	fetching.value = true;
+	chartData = await fetchData();
+	fetching.value = false;
+	render();
+};
+
+watch(() => [props.src, props.span], fetchAndRender);
+
+onMounted(() => {
+	fetchAndRender();
+});
+/* eslint-enable id-denylist */
+</script>
+
+<style lang="scss" scoped>
+.cbbedffa {
+	position: relative;
+
+	> .fetching {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		-webkit-backdrop-filter: var(--blur, blur(12px));
+		backdrop-filter: var(--blur, blur(12px));
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		cursor: wait;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkChartTooltip.vue b/packages/frontend/src/components/MkChartTooltip.vue
new file mode 100644
index 0000000000..d36f45463c
--- /dev/null
+++ b/packages/frontend/src/components/MkChartTooltip.vue
@@ -0,0 +1,53 @@
+<template>
+<MkTooltip ref="tooltip" :showing="showing" :x="x" :y="y" :max-width="340" :direction="'top'" :inner-margin="16" @closed="emit('closed')">
+	<div v-if="title || series" class="qpcyisrl">
+		<div v-if="title" class="title">{{ title }}</div>
+		<template v-if="series">
+			<div v-for="x in series" class="series">
+				<span class="color" :style="{ background: x.backgroundColor, borderColor: x.borderColor }"></span>
+				<span>{{ x.text }}</span>
+			</div>
+		</template>
+	</div>
+</MkTooltip>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkTooltip from './MkTooltip.vue';
+
+defineProps<{
+	showing: boolean;
+	x: number;
+	y: number;
+	title?: string;
+	series?: {
+		backgroundColor: string;
+		borderColor: string;
+		text: string;
+	}[];
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.qpcyisrl {
+	> .title {
+		margin-bottom: 4px;
+	}
+
+	> .series {
+		> .color {
+			display: inline-block;
+			width: 8px;
+			height: 8px;
+			border-width: 1px;
+			border-style: solid;
+			margin-right: 8px;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkCode.core.vue b/packages/frontend/src/components/MkCode.core.vue
new file mode 100644
index 0000000000..b074028821
--- /dev/null
+++ b/packages/frontend/src/components/MkCode.core.vue
@@ -0,0 +1,20 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+<code v-if="inline" :class="`language-${prismLang}`" v-html="html"></code>
+<pre v-else :class="`language-${prismLang}`"><code :class="`language-${prismLang}`" v-html="html"></code></pre>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import Prism from 'prismjs';
+import 'prismjs/themes/prism-okaidia.css';
+
+const props = defineProps<{
+	code: string;
+	lang?: string;
+	inline?: boolean;
+}>();
+
+const prismLang = computed(() => Prism.languages[props.lang] ? props.lang : 'js');
+const html = computed(() => Prism.highlight(props.code, Prism.languages[prismLang.value], prismLang.value));
+</script>
diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue
new file mode 100644
index 0000000000..1640258d5b
--- /dev/null
+++ b/packages/frontend/src/components/MkCode.vue
@@ -0,0 +1,15 @@
+<template>
+<XCode :code="code" :lang="lang" :inline="inline"/>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue';
+
+defineProps<{
+	code: string;
+	lang?: string;
+	inline?: boolean;
+}>();
+
+const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue'));
+</script>
diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
new file mode 100644
index 0000000000..6d4d5be2bc
--- /dev/null
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -0,0 +1,275 @@
+<template>
+<div v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
+	<header v-if="showHeader" ref="header">
+		<div class="title"><slot name="header"></slot></div>
+		<div class="sub">
+			<slot name="func"></slot>
+			<button v-if="foldable" class="_button" @click="() => showBody = !showBody">
+				<template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
+				<template v-else><i class="ti ti-chevron-down"></i></template>
+			</button>
+		</div>
+	</header>
+	<transition
+		:name="$store.state.animation ? 'container-toggle' : ''"
+		@enter="enter"
+		@after-enter="afterEnter"
+		@leave="leave"
+		@after-leave="afterLeave"
+	>
+		<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
+			<slot></slot>
+			<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
+				<span>{{ $ts.showMore }}</span>
+			</button>
+		</div>
+	</transition>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		showHeader: {
+			type: Boolean,
+			required: false,
+			default: true,
+		},
+		thin: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		naked: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		foldable: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		expanded: {
+			type: Boolean,
+			required: false,
+			default: true,
+		},
+		scrollable: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		maxHeight: {
+			type: Number,
+			required: false,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			showBody: this.expanded,
+			omitted: null,
+			ignoreOmit: false,
+		};
+	},
+	mounted() {
+		this.$watch('showBody', showBody => {
+			const headerHeight = this.showHeader ? this.$refs.header.offsetHeight : 0;
+			this.$el.style.minHeight = `${headerHeight}px`;
+			if (showBody) {
+				this.$el.style.flexBasis = 'auto';
+			} else {
+				this.$el.style.flexBasis = `${headerHeight}px`;
+			}
+		}, {
+			immediate: true,
+		});
+
+		this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
+
+		const calcOmit = () => {
+			if (this.omitted || this.ignoreOmit || this.maxHeight == null) return;
+			const height = this.$refs.content.offsetHeight;
+			this.omitted = height > this.maxHeight;
+		};
+
+		calcOmit();
+		new ResizeObserver((entries, observer) => {
+			calcOmit();
+		}).observe(this.$refs.content);
+	},
+	methods: {
+		toggleContent(show: boolean) {
+			if (!this.foldable) return;
+			this.showBody = show;
+		},
+
+		enter(el) {
+			const elementHeight = el.getBoundingClientRect().height;
+			el.style.height = 0;
+			el.offsetHeight; // reflow
+			el.style.height = elementHeight + 'px';
+		},
+		afterEnter(el) {
+			el.style.height = null;
+		},
+		leave(el) {
+			const elementHeight = el.getBoundingClientRect().height;
+			el.style.height = elementHeight + 'px';
+			el.offsetHeight; // reflow
+			el.style.height = 0;
+		},
+		afterLeave(el) {
+			el.style.height = null;
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.container-toggle-enter-active, .container-toggle-leave-active {
+	overflow-y: hidden;
+	transition: opacity 0.5s, height 0.5s !important;
+}
+.container-toggle-enter-from {
+	opacity: 0;
+}
+.container-toggle-leave-to {
+	opacity: 0;
+}
+
+.ukygtjoj {
+	position: relative;
+	overflow: clip;
+	contain: content;
+
+	&.naked {
+		background: transparent !important;
+		box-shadow: none !important;
+	}
+
+	&.scrollable {
+		display: flex;
+		flex-direction: column;
+
+		> .content {
+			overflow: auto;
+		}
+	}
+
+	> header {
+		position: sticky;
+		top: var(--stickyTop, 0px);
+		left: 0;
+		color: var(--panelHeaderFg);
+		background: var(--panelHeaderBg);
+		border-bottom: solid 0.5px var(--panelHeaderDivider);
+		z-index: 2;
+		line-height: 1.4em;
+
+		> .title {
+			margin: 0;
+			padding: 12px 16px;
+
+			> ::v-deep(i) {
+				margin-right: 6px;
+			}
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		> .sub {
+			position: absolute;
+			z-index: 2;
+			top: 0;
+			right: 0;
+			height: 100%;
+
+			> ::v-deep(button) {
+				width: 42px;
+				height: 100%;
+			}
+		}
+	}
+
+	> .content {
+		--stickyTop: 0px;
+
+		&.omitted {
+			position: relative;
+			max-height: var(--maxHeight);
+			overflow: hidden;
+
+			> .fade {
+				display: block;
+				position: absolute;
+				z-index: 10;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				height: 64px;
+				background: linear-gradient(0deg, var(--panel), var(--X15));
+
+				> span {
+					display: inline-block;
+					background: var(--panel);
+					padding: 6px 10px;
+					font-size: 0.8em;
+					border-radius: 999px;
+					box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+				}
+
+				&:hover {
+					> span {
+						background: var(--panelHighlight);
+					}
+				}
+			}
+		}
+	}
+
+	&.max-width_380px, &.thin {
+		> header {
+			> .title {
+				padding: 8px 10px;
+				font-size: 0.9em;
+			}
+		}
+
+		> .content {
+		}
+	}
+}
+
+@container (max-width: 380px) {
+	.ukygtjoj {
+		> header {
+			> .title {
+				padding: 8px 10px;
+				font-size: 0.9em;
+			}
+		}
+	}
+}
+
+._forceContainerFull_ .ukygtjoj {
+	> header {
+		> .title {
+			padding: 12px 16px !important;
+		}
+	}
+}
+
+._forceContainerFull_.ukygtjoj {
+	> header {
+		> .title {
+			padding: 12px 16px !important;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkContextMenu.vue b/packages/frontend/src/components/MkContextMenu.vue
new file mode 100644
index 0000000000..cfc9502b41
--- /dev/null
+++ b/packages/frontend/src/components/MkContextMenu.vue
@@ -0,0 +1,85 @@
+<template>
+<transition :name="$store.state.animation ? 'fade' : ''" appear>
+	<div ref="rootEl" class="nvlagfpb" :style="{ zIndex }" @contextmenu.prevent.stop="() => {}">
+		<MkMenu :items="items" :align="'left'" @close="$emit('closed')"/>
+	</div>
+</transition>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onBeforeUnmount } from 'vue';
+import MkMenu from './MkMenu.vue';
+import { MenuItem } from './types/menu.vue';
+import contains from '@/scripts/contains';
+import * as os from '@/os';
+
+const props = defineProps<{
+	items: MenuItem[];
+	ev: MouseEvent;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+let rootEl = $ref<HTMLDivElement>();
+
+let zIndex = $ref<number>(os.claimZIndex('high'));
+
+onMounted(() => {
+	let left = props.ev.pageX + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
+	let top = props.ev.pageY + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
+
+	const width = rootEl.offsetWidth;
+	const height = rootEl.offsetHeight;
+
+	if (left + width - window.pageXOffset > window.innerWidth) {
+		left = window.innerWidth - width + window.pageXOffset;
+	}
+
+	if (top + height - window.pageYOffset > window.innerHeight) {
+		top = window.innerHeight - height + window.pageYOffset;
+	}
+
+	if (top < 0) {
+		top = 0;
+	}
+
+	if (left < 0) {
+		left = 0;
+	}
+
+	rootEl.style.top = `${top}px`;
+	rootEl.style.left = `${left}px`;
+
+	for (const el of Array.from(document.querySelectorAll('body *'))) {
+		el.addEventListener('mousedown', onMousedown);
+	}
+});
+
+onBeforeUnmount(() => {
+	for (const el of Array.from(document.querySelectorAll('body *'))) {
+		el.removeEventListener('mousedown', onMousedown);
+	}
+});
+
+function onMousedown(evt: Event) {
+	if (!contains(rootEl, evt.target) && (rootEl !== evt.target)) emit('closed');
+}
+</script>
+
+<style lang="scss" scoped>
+.nvlagfpb {
+	position: absolute;
+}
+
+.fade-enter-active, .fade-leave-active {
+	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+	transform-origin: left top;
+}
+
+.fade-enter-from, .fade-leave-to {
+	opacity: 0;
+	transform: scale(0.9);
+}
+</style>
diff --git a/packages/frontend/src/components/MkCropperDialog.vue b/packages/frontend/src/components/MkCropperDialog.vue
new file mode 100644
index 0000000000..ae18160dea
--- /dev/null
+++ b/packages/frontend/src/components/MkCropperDialog.vue
@@ -0,0 +1,174 @@
+<template>
+<XModalWindow
+	ref="dialogEl"
+	:width="800"
+	:height="500"
+	:scroll="false"
+	:with-ok-button="true"
+	@close="cancel()"
+	@ok="ok()"
+	@closed="$emit('closed')"
+>
+	<template #header>{{ i18n.ts.cropImage }}</template>
+	<template #default="{ width, height }">
+		<div class="mk-cropper-dialog" :style="`--vw: ${width}px; --vh: ${height}px;`">
+			<Transition name="fade">
+				<div v-if="loading" class="loading">
+					<MkLoading/>
+				</div>
+			</Transition>
+			<div class="container">
+				<img ref="imgEl" :src="imgUrl" style="display: none;" @load="onImageLoad">
+			</div>
+		</div>
+	</template>
+</XModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted } from 'vue';
+import * as misskey from 'misskey-js';
+import Cropper from 'cropperjs';
+import tinycolor from 'tinycolor2';
+import XModalWindow from '@/components/MkModalWindow.vue';
+import * as os from '@/os';
+import { $i } from '@/account';
+import { defaultStore } from '@/store';
+import { apiUrl } from '@/config';
+import { i18n } from '@/i18n';
+import { getProxiedImageUrl } from '@/scripts/media-proxy';
+
+const emit = defineEmits<{
+	(ev: 'ok', cropped: misskey.entities.DriveFile): void;
+	(ev: 'cancel'): void;
+	(ev: 'closed'): void;
+}>();
+
+const props = defineProps<{
+	file: misskey.entities.DriveFile;
+	aspectRatio: number;
+}>();
+
+const imgUrl = getProxiedImageUrl(props.file.url);
+let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
+let imgEl = $ref<HTMLImageElement>();
+let cropper: Cropper | null = null;
+let loading = $ref(true);
+
+const ok = async () => {
+	const promise = new Promise<misskey.entities.DriveFile>(async (res) => {
+		const croppedCanvas = await cropper?.getCropperSelection()?.$toCanvas();
+		croppedCanvas.toBlob(blob => {
+			const formData = new FormData();
+			formData.append('file', blob);
+			formData.append('i', $i.token);
+			if (defaultStore.state.uploadFolder) {
+				formData.append('folderId', defaultStore.state.uploadFolder);
+			}
+
+			window.fetch(apiUrl + '/drive/files/create', {
+				method: 'POST',
+				body: formData,
+			})
+				.then(response => response.json())
+				.then(f => {
+					res(f);
+				});
+		});
+	});
+
+	os.promiseDialog(promise);
+
+	const f = await promise;
+
+	emit('ok', f);
+	dialogEl.close();
+};
+
+const cancel = () => {
+	emit('cancel');
+	dialogEl.close();
+};
+
+const onImageLoad = () => {
+	loading = false;
+
+	if (cropper) {
+		cropper.getCropperImage()!.$center('contain');
+		cropper.getCropperSelection()!.$center();
+	}
+};
+
+onMounted(() => {
+	cropper = new Cropper(imgEl, {
+	});
+
+	const computedStyle = getComputedStyle(document.documentElement);
+
+	const selection = cropper.getCropperSelection()!;
+	selection.themeColor = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
+	selection.aspectRatio = props.aspectRatio;
+	selection.initialAspectRatio = props.aspectRatio;
+	selection.outlined = true;
+
+	window.setTimeout(() => {
+		cropper.getCropperImage()!.$center('contain');
+		selection.$center();
+	}, 100);
+
+	// モーダルオープンアニメーションが終わったあとで再度調整
+	window.setTimeout(() => {
+		cropper.getCropperImage()!.$center('contain');
+		selection.$center();
+	}, 500);
+});
+</script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.5s ease 0.5s;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
+.mk-cropper-dialog {
+	display: flex;
+	flex-direction: column;
+	width: var(--vw);
+	height: var(--vh);
+	position: relative;
+
+	> .loading {
+		position: absolute;
+		z-index: 10;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		-webkit-backdrop-filter: var(--blur, blur(10px));
+		backdrop-filter: var(--blur, blur(10px));
+		background: rgba(0, 0, 0, 0.5);
+	}
+
+	> .container {
+		flex: 1;
+		width: 100%;
+		height: 100%;
+
+		> ::v-deep(cropper-canvas) {
+			width: 100%;
+			height: 100%;
+
+			> cropper-selection > cropper-handle[action="move"] {
+				background: transparent;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkCwButton.vue b/packages/frontend/src/components/MkCwButton.vue
new file mode 100644
index 0000000000..ee611921ef
--- /dev/null
+++ b/packages/frontend/src/components/MkCwButton.vue
@@ -0,0 +1,62 @@
+<template>
+<button class="nrvgflfu _button" @click="toggle">
+	<b>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}</b>
+	<span v-if="!modelValue">{{ label }}</span>
+</button>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { length } from 'stringz';
+import * as misskey from 'misskey-js';
+import { concat } from '@/scripts/array';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	modelValue: boolean;
+	note: misskey.entities.Note;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', v: boolean): void;
+}>();
+
+const label = computed(() => {
+	return concat([
+		props.note.text ? [i18n.t('_cw.chars', { count: length(props.note.text) })] : [],
+		props.note.files && props.note.files.length !== 0 ? [i18n.t('_cw.files', { count: props.note.files.length })] : [],
+		props.note.poll != null ? [i18n.ts.poll] : [],
+	] as string[][]).join(' / ');
+});
+
+const toggle = () => {
+	emit('update:modelValue', !props.modelValue);
+};
+</script>
+
+<style lang="scss" scoped>
+.nrvgflfu {
+	display: inline-block;
+	padding: 4px 8px;
+	font-size: 0.7em;
+	color: var(--cwFg);
+	background: var(--cwBg);
+	border-radius: 2px;
+
+	&:hover {
+		background: var(--cwHoverBg);
+	}
+
+	> span {
+		margin-left: 4px;
+
+		&:before {
+			content: '(';
+		}
+
+		&:after {
+			content: ')';
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue
new file mode 100644
index 0000000000..1f88bdf137
--- /dev/null
+++ b/packages/frontend/src/components/MkDateSeparatedList.vue
@@ -0,0 +1,189 @@
+<script lang="ts">
+import { defineComponent, h, PropType, TransitionGroup } from 'vue';
+import MkAd from '@/components/global/MkAd.vue';
+import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
+
+export default defineComponent({
+	props: {
+		items: {
+			type: Array as PropType<{ id: string; createdAt: string; _shouldInsertAd_: boolean; }[]>,
+			required: true,
+		},
+		direction: {
+			type: String,
+			required: false,
+			default: 'down',
+		},
+		reversed: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		noGap: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		ad: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+
+	setup(props, { slots, expose }) {
+		function getDateText(time: string) {
+			const date = new Date(time).getDate();
+			const month = new Date(time).getMonth() + 1;
+			return i18n.t('monthAndDay', {
+				month: month.toString(),
+				day: date.toString(),
+			});
+		}
+
+		if (props.items.length === 0) return;
+
+		const renderChildren = () => props.items.map((item, i) => {
+			if (!slots || !slots.default) return;
+
+			const el = slots.default({
+				item: item,
+			})[0];
+			if (el.key == null && item.id) el.key = item.id;
+
+			if (
+				i !== props.items.length - 1 &&
+				new Date(item.createdAt).getDate() !== new Date(props.items[i + 1].createdAt).getDate()
+			) {
+				const separator = h('div', {
+					class: 'separator',
+					key: item.id + ':separator',
+				}, h('p', {
+					class: 'date',
+				}, [
+					h('span', [
+						h('i', {
+							class: 'ti ti-chevron-up icon',
+						}),
+						getDateText(item.createdAt),
+					]),
+					h('span', [
+						getDateText(props.items[i + 1].createdAt),
+						h('i', {
+							class: 'ti ti-chevron-down icon',
+						}),
+					]),
+				]));
+
+				return [el, separator];
+			} else {
+				if (props.ad && item._shouldInsertAd_) {
+					return [h(MkAd, {
+						class: 'a', // advertiseの意(ブロッカー対策)
+						key: item.id + ':ad',
+						prefer: ['horizontal', 'horizontal-big'],
+					}), el];
+				} else {
+					return el;
+				}
+			}
+		});
+
+		return () => h(
+			defaultStore.state.animation ? TransitionGroup : 'div',
+			defaultStore.state.animation ? {
+				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
+				name: 'list',
+				tag: 'div',
+				'data-direction': props.direction,
+				'data-reversed': props.reversed ? 'true' : 'false',
+			} : {
+				class: 'sqadhkmv' + (props.noGap ? ' noGap' : ''),
+			},
+			{ default: renderChildren });
+	},
+});
+</script>
+
+<style lang="scss">
+.sqadhkmv {
+	container-type: inline-size;
+
+	> *:empty {
+		display: none;
+	}
+
+	> *:not(:last-child) {
+		margin-bottom: var(--margin);
+	}
+
+	> .list-move {
+		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+	}
+
+	> .list-enter-active {
+		transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1);
+	}
+
+	&[data-direction="up"] {
+		> .list-enter-from {
+			opacity: 0;
+			transform: translateY(64px);
+		}
+	}
+
+	&[data-direction="down"] {
+		> .list-enter-from {
+			opacity: 0;
+			transform: translateY(-64px);
+		}
+	}
+
+	> .separator {
+		text-align: center;
+
+		> .date {
+			display: inline-block;
+			position: relative;
+			margin: 0;
+			padding: 0 16px;
+			line-height: 32px;
+			text-align: center;
+			font-size: 12px;
+			color: var(--dateLabelFg);
+
+			> span {
+				&:first-child {
+					margin-right: 8px;
+
+					> .icon {
+						margin-right: 8px;
+					}
+				}
+
+				&:last-child {
+					margin-left: 8px;
+
+					> .icon {
+						margin-left: 8px;
+					}
+				}
+			}
+		}
+	}
+
+	&.noGap {
+		> * {
+			margin: 0 !important;
+			border: none;
+			border-radius: 0;
+			box-shadow: none;
+
+			&:not(:last-child) {
+				border-bottom: solid 0.5px var(--divider);
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkDialog.vue b/packages/frontend/src/components/MkDialog.vue
new file mode 100644
index 0000000000..374ecd8abf
--- /dev/null
+++ b/packages/frontend/src/components/MkDialog.vue
@@ -0,0 +1,208 @@
+<template>
+<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="emit('closed')">
+	<div class="mk-dialog">
+		<div v-if="icon" class="icon">
+			<i :class="icon"></i>
+		</div>
+		<div v-else-if="!input && !select" class="icon" :class="type">
+			<i v-if="type === 'success'" class="ti ti-check"></i>
+			<i v-else-if="type === 'error'" class="ti ti-circle-x"></i>
+			<i v-else-if="type === 'warning'" class="ti ti-alert-triangle"></i>
+			<i v-else-if="type === 'info'" class="ti ti-info-circle"></i>
+			<i v-else-if="type === 'question'" class="ti ti-question-circle"></i>
+			<MkLoading v-else-if="type === 'waiting'" :em="true"/>
+		</div>
+		<header v-if="title"><Mfm :text="title"/></header>
+		<div v-if="text" class="body"><Mfm :text="text"/></div>
+		<MkInput v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder || undefined" @keydown="onInputKeydown">
+			<template v-if="input.type === 'password'" #prefix><i class="ti ti-lock"></i></template>
+		</MkInput>
+		<MkSelect v-if="select" v-model="selectedValue" autofocus>
+			<template v-if="select.items">
+				<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
+			</template>
+			<template v-else>
+				<optgroup v-for="groupedItem in select.groupedItems" :label="groupedItem.label">
+					<option v-for="item in groupedItem.items" :value="item.value">{{ item.text }}</option>
+				</optgroup>
+			</template>
+		</MkSelect>
+		<div v-if="(showOkButton || showCancelButton) && !actions" class="buttons">
+			<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? i18n.ts.ok : i18n.ts.gotIt }}</MkButton>
+			<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.ts.cancel }}</MkButton>
+		</div>
+		<div v-if="actions" class="buttons">
+			<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); close(); }">{{ action.text }}</MkButton>
+		</div>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import MkModal from '@/components/MkModal.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/form/input.vue';
+import MkSelect from '@/components/form/select.vue';
+import { i18n } from '@/i18n';
+
+type Input = {
+	type: HTMLInputElement['type'];
+	placeholder?: string | null;
+	default: any | null;
+};
+
+type Select = {
+	items: {
+		value: string;
+		text: string;
+	}[];
+	groupedItems: {
+		label: string;
+		items: {
+			value: string;
+			text: string;
+		}[];
+	}[];
+	default: string | null;
+};
+
+const props = withDefaults(defineProps<{
+	type?: 'success' | 'error' | 'warning' | 'info' | 'question' | 'waiting';
+	title: string;
+	text?: string;
+	input?: Input;
+	select?: Select;
+	icon?: string;
+	actions?: {
+		text: string;
+		primary?: boolean,
+		callback: (...args: any[]) => void;
+	}[];
+	showOkButton?: boolean;
+	showCancelButton?: boolean;
+	cancelableByBgClick?: boolean;
+}>(), {
+	type: 'info',
+	showOkButton: true,
+	showCancelButton: false,
+	cancelableByBgClick: true,
+});
+
+const emit = defineEmits<{
+	(ev: 'done', v: { canceled: boolean; result: any }): void;
+	(ev: 'closed'): void;
+}>();
+
+const modal = ref<InstanceType<typeof MkModal>>();
+
+const inputValue = ref(props.input?.default || null);
+const selectedValue = ref(props.select?.default || null);
+
+function done(canceled: boolean, result?) {
+	emit('done', { canceled, result });
+	modal.value?.close();
+}
+
+async function ok() {
+	if (!props.showOkButton) return;
+
+	const result =
+		props.input ? inputValue.value :
+		props.select ? selectedValue.value :
+		true;
+	done(false, result);
+}
+
+function cancel() {
+	done(true);
+}
+/*
+function onBgClick() {
+	if (props.cancelableByBgClick) cancel();
+}
+*/
+function onKeydown(evt: KeyboardEvent) {
+	if (evt.key === 'Escape') cancel();
+}
+
+function onInputKeydown(evt: KeyboardEvent) {
+	if (evt.key === 'Enter') {
+		evt.preventDefault();
+		evt.stopPropagation();
+		ok();
+	}
+}
+
+onMounted(() => {
+	document.addEventListener('keydown', onKeydown);
+});
+
+onBeforeUnmount(() => {
+	document.removeEventListener('keydown', onKeydown);
+});
+</script>
+
+<style lang="scss" scoped>
+.mk-dialog {
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+
+	> .icon {
+		font-size: 24px;
+
+		&.info {
+			color: #55c4dd;
+		}
+
+		&.success {
+			color: var(--success);
+		}
+
+		&.error {
+			color: var(--error);
+		}
+
+		&.warning {
+			color: var(--warn);
+		}
+
+		> * {
+			display: block;
+			margin: 0 auto;
+		}
+
+		& + header {
+			margin-top: 8px;
+		}
+	}
+
+	> header {
+		margin: 0 0 8px 0;
+		font-weight: bold;
+		font-size: 1.1em;
+
+		& + .body {
+			margin-top: 8px;
+		}
+	}
+
+	> .body {
+		margin: 16px 0 0 0;
+	}
+
+	> .buttons {
+		margin-top: 16px;
+
+		> * {
+			margin: 0 8px;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkDigitalClock.vue b/packages/frontend/src/components/MkDigitalClock.vue
new file mode 100644
index 0000000000..9ed8d63d19
--- /dev/null
+++ b/packages/frontend/src/components/MkDigitalClock.vue
@@ -0,0 +1,77 @@
+<template>
+<span class="zjobosdg">
+	<span v-text="hh"></span>
+	<span class="colon" :class="{ showColon }">:</span>
+	<span v-text="mm"></span>
+	<span v-if="showS" class="colon" :class="{ showColon }">:</span>
+	<span v-if="showS" v-text="ss"></span>
+	<span v-if="showMs" class="colon" :class="{ showColon }">:</span>
+	<span v-if="showMs" v-text="ms"></span>
+</span>
+</template>
+
+<script lang="ts" setup>
+import { onUnmounted, ref, watch } from 'vue';
+
+const props = withDefaults(defineProps<{
+	showS?: boolean;
+	showMs?: boolean;
+	offset?: number;
+}>(), {
+	showS: true,
+	showMs: false,
+	offset: 0 - new Date().getTimezoneOffset(),
+});
+
+let intervalId;
+const hh = ref('');
+const mm = ref('');
+const ss = ref('');
+const ms = ref('');
+const showColon = ref(false);
+let prevSec: number | null = null;
+
+watch(showColon, (v) => {
+	if (v) {
+		window.setTimeout(() => {
+			showColon.value = false;
+		}, 30);
+	}
+});
+
+const tick = () => {
+	const now = new Date();
+	now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
+	hh.value = now.getHours().toString().padStart(2, '0');
+	mm.value = now.getMinutes().toString().padStart(2, '0');
+	ss.value = now.getSeconds().toString().padStart(2, '0');
+	ms.value = Math.floor(now.getMilliseconds() / 10).toString().padStart(2, '0');
+	if (now.getSeconds() !== prevSec) showColon.value = true;
+	prevSec = now.getSeconds();
+};
+
+tick();
+
+watch(() => props.showMs, () => {
+	if (intervalId) window.clearInterval(intervalId);
+	intervalId = window.setInterval(tick, props.showMs ? 10 : 1000);
+}, { immediate: true });
+
+onUnmounted(() => {
+	window.clearInterval(intervalId);
+});
+</script>
+
+<style lang="scss" scoped>
+.zjobosdg {
+	> .colon {
+		opacity: 0;
+		transition: opacity 1s ease;
+
+		&.showColon {
+			opacity: 1;
+			transition: opacity 0s;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkDrive.file.vue b/packages/frontend/src/components/MkDrive.file.vue
new file mode 100644
index 0000000000..8c17c0530a
--- /dev/null
+++ b/packages/frontend/src/components/MkDrive.file.vue
@@ -0,0 +1,334 @@
+<template>
+<div
+	class="ncvczrfv"
+	:class="{ isSelected }"
+	draggable="true"
+	:title="title"
+	@click="onClick"
+	@contextmenu.stop="onContextmenu"
+	@dragstart="onDragstart"
+	@dragend="onDragend"
+>
+	<div v-if="$i?.avatarId == file.id" class="label">
+		<img src="/client-assets/label.svg"/>
+		<p>{{ i18n.ts.avatar }}</p>
+	</div>
+	<div v-if="$i?.bannerId == file.id" class="label">
+		<img src="/client-assets/label.svg"/>
+		<p>{{ i18n.ts.banner }}</p>
+	</div>
+	<div v-if="file.isSensitive" class="label red">
+		<img src="/client-assets/label-red.svg"/>
+		<p>{{ i18n.ts.nsfw }}</p>
+	</div>
+
+	<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
+
+	<p class="name">
+		<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
+		<span v-if="file.name.lastIndexOf('.') != -1" class="ext">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
+	</p>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, ref } from 'vue';
+import * as Misskey from 'misskey-js';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
+import bytes from '@/filters/bytes';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
+
+const props = withDefaults(defineProps<{
+	file: Misskey.entities.DriveFile;
+	isSelected?: boolean;
+	selectMode?: boolean;
+}>(), {
+	isSelected: false,
+	selectMode: false,
+});
+
+const emit = defineEmits<{
+	(ev: 'chosen', r: Misskey.entities.DriveFile): void;
+	(ev: 'dragstart'): void;
+	(ev: 'dragend'): void;
+}>();
+
+const isDragging = ref(false);
+
+const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
+
+function getMenu() {
+	return [{
+		text: i18n.ts.rename,
+		icon: 'ti ti-forms',
+		action: rename,
+	}, {
+		text: props.file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
+		icon: props.file.isSensitive ? 'ti ti-eye' : 'ti ti-eye-off',
+		action: toggleSensitive,
+	}, {
+		text: i18n.ts.describeFile,
+		icon: 'ti ti-text-caption',
+		action: describe,
+	}, null, {
+		text: i18n.ts.copyUrl,
+		icon: 'ti ti-link',
+		action: copyUrl,
+	}, {
+		type: 'a',
+		href: props.file.url,
+		target: '_blank',
+		text: i18n.ts.download,
+		icon: 'ti ti-download',
+		download: props.file.name,
+	}, null, {
+		text: i18n.ts.delete,
+		icon: 'ti ti-trash',
+		danger: true,
+		action: deleteFile,
+	}];
+}
+
+function onClick(ev: MouseEvent) {
+	if (props.selectMode) {
+		emit('chosen', props.file);
+	} else {
+		os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+	}
+}
+
+function onContextmenu(ev: MouseEvent) {
+	os.contextMenu(getMenu(), ev);
+}
+
+function onDragstart(ev: DragEvent) {
+	if (ev.dataTransfer) {
+		ev.dataTransfer.effectAllowed = 'move';
+		ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
+	}
+	isDragging.value = true;
+
+	emit('dragstart');
+}
+
+function onDragend() {
+	isDragging.value = false;
+	emit('dragend');
+}
+
+function rename() {
+	os.inputText({
+		title: i18n.ts.renameFile,
+		placeholder: i18n.ts.inputNewFileName,
+		default: props.file.name,
+	}).then(({ canceled, result: name }) => {
+		if (canceled) return;
+		os.api('drive/files/update', {
+			fileId: props.file.id,
+			name: name,
+		});
+	});
+}
+
+function describe() {
+	os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
+		default: props.file.comment != null ? props.file.comment : '',
+		file: props.file,
+	}, {
+		done: caption => {
+			os.api('drive/files/update', {
+				fileId: props.file.id,
+				comment: caption.length === 0 ? null : caption,
+			});
+		},
+	}, 'closed');
+}
+
+function toggleSensitive() {
+	os.api('drive/files/update', {
+		fileId: props.file.id,
+		isSensitive: !props.file.isSensitive,
+	});
+}
+
+function copyUrl() {
+	copyToClipboard(props.file.url);
+	os.success();
+}
+/*
+function addApp() {
+	alert('not implemented yet');
+}
+*/
+async function deleteFile() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.t('driveFileDeleteConfirm', { name: props.file.name }),
+	});
+
+	if (canceled) return;
+	os.api('drive/files/delete', {
+		fileId: props.file.id,
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.ncvczrfv {
+	position: relative;
+	padding: 8px 0 0 0;
+	min-height: 180px;
+	border-radius: 8px;
+
+	&, * {
+		cursor: pointer;
+	}
+
+	> * {
+		pointer-events: none;
+	}
+
+	&:hover {
+		background: rgba(#000, 0.05);
+
+		> .label {
+			&:before,
+			&:after {
+				background: #0b65a5;
+			}
+
+			&.red {
+				&:before,
+				&:after {
+					background: #c12113;
+				}
+			}
+		}
+	}
+
+	&:active {
+		background: rgba(#000, 0.1);
+
+		> .label {
+			&:before,
+			&:after {
+				background: #0b588c;
+			}
+
+			&.red {
+				&:before,
+				&:after {
+					background: #ce2212;
+				}
+			}
+		}
+	}
+
+	&.isSelected {
+		background: var(--accent);
+
+		&:hover {
+			background: var(--accentLighten);
+		}
+
+		&:active {
+			background: var(--accentDarken);
+		}
+
+		> .label {
+			&:before,
+			&:after {
+				display: none;
+			}
+		}
+
+		> .name {
+			color: #fff;
+		}
+
+		> .thumbnail {
+			color: #fff;
+		}
+	}
+
+	> .label {
+		position: absolute;
+		top: 0;
+		left: 0;
+		pointer-events: none;
+
+		&:before,
+		&:after {
+			content: "";
+			display: block;
+			position: absolute;
+			z-index: 1;
+			background: #0c7ac9;
+		}
+
+		&:before {
+			top: 0;
+			left: 57px;
+			width: 28px;
+			height: 8px;
+		}
+
+		&:after {
+			top: 57px;
+			left: 0;
+			width: 8px;
+			height: 28px;
+		}
+
+		&.red {
+			&:before,
+			&:after {
+				background: #c12113;
+			}
+		}
+
+		> img {
+			position: absolute;
+			z-index: 2;
+			top: 0;
+			left: 0;
+		}
+
+		> p {
+			position: absolute;
+			z-index: 3;
+			top: 19px;
+			left: -28px;
+			width: 120px;
+			margin: 0;
+			text-align: center;
+			line-height: 28px;
+			color: #fff;
+			transform: rotate(-45deg);
+		}
+	}
+
+	> .thumbnail {
+		width: 110px;
+		height: 110px;
+		margin: auto;
+	}
+
+	> .name {
+		display: block;
+		margin: 4px 0 0 0;
+		font-size: 0.8em;
+		text-align: center;
+		word-break: break-all;
+		color: var(--fg);
+		overflow: hidden;
+
+		> .ext {
+			opacity: 0.5;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkDrive.folder.vue b/packages/frontend/src/components/MkDrive.folder.vue
new file mode 100644
index 0000000000..82653ca0b4
--- /dev/null
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@@ -0,0 +1,330 @@
+<template>
+<div
+	class="rghtznwe"
+	:class="{ draghover }"
+	draggable="true"
+	:title="title"
+	@click="onClick"
+	@contextmenu.stop="onContextmenu"
+	@mouseover="onMouseover"
+	@mouseout="onMouseout"
+	@dragover.prevent.stop="onDragover"
+	@dragenter.prevent="onDragenter"
+	@dragleave="onDragleave"
+	@drop.prevent.stop="onDrop"
+	@dragstart="onDragstart"
+	@dragend="onDragend"
+>
+	<p class="name">
+		<template v-if="hover"><i class="ti ti-folder ti-fw"></i></template>
+		<template v-if="!hover"><i class="ti ti-folder ti-fw"></i></template>
+		{{ folder.name }}
+	</p>
+	<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
+		{{ i18n.ts.uploadFolder }}
+	</p>
+	<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, ref } from 'vue';
+import * as Misskey from 'misskey-js';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
+
+const props = withDefaults(defineProps<{
+	folder: Misskey.entities.DriveFolder;
+	isSelected?: boolean;
+	selectMode?: boolean;
+}>(), {
+	isSelected: false,
+	selectMode: false,
+});
+
+const emit = defineEmits<{
+	(ev: 'chosen', v: Misskey.entities.DriveFolder): void;
+	(ev: 'move', v: Misskey.entities.DriveFolder): void;
+	(ev: 'upload', file: File, folder: Misskey.entities.DriveFolder);
+	(ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
+	(ev: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
+	(ev: 'dragstart'): void;
+	(ev: 'dragend'): void;
+}>();
+
+const hover = ref(false);
+const draghover = ref(false);
+const isDragging = ref(false);
+
+const title = computed(() => props.folder.name);
+
+function checkboxClicked() {
+	emit('chosen', props.folder);
+}
+
+function onClick() {
+	emit('move', props.folder);
+}
+
+function onMouseover() {
+	hover.value = true;
+}
+
+function onMouseout() {
+	hover.value = false;
+}
+
+function onDragover(ev: DragEvent) {
+	if (!ev.dataTransfer) return;
+
+	// 自分自身がドラッグされている場合
+	if (isDragging.value) {
+		// 自分自身にはドロップさせない
+		ev.dataTransfer.dropEffect = 'none';
+		return;
+	}
+
+	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
+	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
+
+	if (isFile || isDriveFile || isDriveFolder) {
+		switch (ev.dataTransfer.effectAllowed) {
+			case 'all':
+			case 'uninitialized':
+			case 'copy': 
+			case 'copyLink': 
+			case 'copyMove': 
+				ev.dataTransfer.dropEffect = 'copy';
+				break;
+			case 'linkMove':
+			case 'move':
+				ev.dataTransfer.dropEffect = 'move';
+				break;
+			default:
+				ev.dataTransfer.dropEffect = 'none';
+				break;
+		}
+	} else {
+		ev.dataTransfer.dropEffect = 'none';
+	}
+}
+
+function onDragenter() {
+	if (!isDragging.value) draghover.value = true;
+}
+
+function onDragleave() {
+	draghover.value = false;
+}
+
+function onDrop(ev: DragEvent) {
+	draghover.value = false;
+
+	if (!ev.dataTransfer) return;
+
+	// ファイルだったら
+	if (ev.dataTransfer.files.length > 0) {
+		for (const file of Array.from(ev.dataTransfer.files)) {
+			emit('upload', file, props.folder);
+		}
+		return;
+	}
+
+	//#region ドライブのファイル
+	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
+	if (driveFile != null && driveFile !== '') {
+		const file = JSON.parse(driveFile);
+		emit('removeFile', file.id);
+		os.api('drive/files/update', {
+			fileId: file.id,
+			folderId: props.folder.id,
+		});
+	}
+	//#endregion
+
+	//#region ドライブのフォルダ
+	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
+	if (driveFolder != null && driveFolder !== '') {
+		const folder = JSON.parse(driveFolder);
+
+		// 移動先が自分自身ならreject
+		if (folder.id === props.folder.id) return;
+
+		emit('removeFolder', folder.id);
+		os.api('drive/folders/update', {
+			folderId: folder.id,
+			parentId: props.folder.id,
+		}).then(() => {
+			// noop
+		}).catch(err => {
+			switch (err) {
+				case 'detected-circular-definition':
+					os.alert({
+						title: i18n.ts.unableToProcess,
+						text: i18n.ts.circularReferenceFolder,
+					});
+					break;
+				default:
+					os.alert({
+						type: 'error',
+						text: i18n.ts.somethingHappened,
+					});
+			}
+		});
+	}
+	//#endregion
+}
+
+function onDragstart(ev: DragEvent) {
+	if (!ev.dataTransfer) return;
+
+	ev.dataTransfer.effectAllowed = 'move';
+	ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FOLDER_, JSON.stringify(props.folder));
+	isDragging.value = true;
+
+	// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
+	// (=あなたの子供が、ドラッグを開始しましたよ)
+	emit('dragstart');
+}
+
+function onDragend() {
+	isDragging.value = false;
+	emit('dragend');
+}
+
+function go() {
+	emit('move', props.folder.id);
+}
+
+function rename() {
+	os.inputText({
+		title: i18n.ts.renameFolder,
+		placeholder: i18n.ts.inputNewFolderName,
+		default: props.folder.name,
+	}).then(({ canceled, result: name }) => {
+		if (canceled) return;
+		os.api('drive/folders/update', {
+			folderId: props.folder.id,
+			name: name,
+		});
+	});
+}
+
+function deleteFolder() {
+	os.api('drive/folders/delete', {
+		folderId: props.folder.id,
+	}).then(() => {
+		if (defaultStore.state.uploadFolder === props.folder.id) {
+			defaultStore.set('uploadFolder', null);
+		}
+	}).catch(err => {
+		switch (err.id) {
+			case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
+				os.alert({
+					type: 'error',
+					title: i18n.ts.unableToDelete,
+					text: i18n.ts.hasChildFilesOrFolders,
+				});
+				break;
+			default:
+				os.alert({
+					type: 'error',
+					text: i18n.ts.unableToDelete,
+				});
+		}
+	});
+}
+
+function setAsUploadFolder() {
+	defaultStore.set('uploadFolder', props.folder.id);
+}
+
+function onContextmenu(ev: MouseEvent) {
+	os.contextMenu([{
+		text: i18n.ts.openInWindow,
+		icon: 'ti ti-app-window',
+		action: () => {
+			os.popup(defineAsyncComponent(() => import('@/components/MkDriveWindow.vue')), {
+				initialFolder: props.folder,
+			}, {
+			}, 'closed');
+		},
+	}, null, {
+		text: i18n.ts.rename,
+		icon: 'ti ti-forms',
+		action: rename,
+	}, null, {
+		text: i18n.ts.delete,
+		icon: 'ti ti-trash',
+		danger: true,
+		action: deleteFolder,
+	}], ev);
+}
+</script>
+
+<style lang="scss" scoped>
+.rghtznwe {
+	position: relative;
+	padding: 8px;
+	height: 64px;
+	background: var(--driveFolderBg);
+	border-radius: 4px;
+
+	&, * {
+		cursor: pointer;
+	}
+
+	*:not(.checkbox) {
+		pointer-events: none;
+	}
+
+	> .checkbox {
+		position: absolute;
+		bottom: 8px;
+		right: 8px;
+		width: 16px;
+		height: 16px;
+		background: #fff;
+		border: solid 1px #000;
+
+		&.checked {
+			background: var(--accent);
+		}
+	}
+
+	&.draghover {
+		&:after {
+			content: "";
+			pointer-events: none;
+			position: absolute;
+			top: -4px;
+			right: -4px;
+			bottom: -4px;
+			left: -4px;
+			border: 2px dashed var(--focus);
+			border-radius: 4px;
+		}
+	}
+
+	> .name {
+		margin: 0;
+		font-size: 0.9em;
+		color: var(--desktopDriveFolderFg);
+
+		> i {
+			margin-right: 4px;
+			margin-left: 2px;
+			text-align: left;
+		}
+	}
+
+	> .upload {
+		margin: 4px 4px;
+		font-size: 0.8em;
+		text-align: right;
+		color: var(--desktopDriveFolderFg);
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkDrive.navFolder.vue b/packages/frontend/src/components/MkDrive.navFolder.vue
new file mode 100644
index 0000000000..dbbfef5f05
--- /dev/null
+++ b/packages/frontend/src/components/MkDrive.navFolder.vue
@@ -0,0 +1,147 @@
+<template>
+<div class="drylbebk"
+	:class="{ draghover }"
+	@click="onClick"
+	@dragover.prevent.stop="onDragover"
+	@dragenter="onDragenter"
+	@dragleave="onDragleave"
+	@drop.stop="onDrop"
+>
+	<i v-if="folder == null" class="ti ti-cloud"></i>
+	<span>{{ folder == null ? i18n.ts.drive : folder.name }}</span>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import * as Misskey from 'misskey-js';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	folder?: Misskey.entities.DriveFolder;
+	parentFolder: Misskey.entities.DriveFolder | null;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'move', v?: Misskey.entities.DriveFolder): void;
+	(ev: 'upload', file: File, folder?: Misskey.entities.DriveFolder | null): void;
+	(ev: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
+	(ev: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
+}>();
+
+const hover = ref(false);
+const draghover = ref(false);
+
+function onClick() {
+	emit('move', props.folder);
+}
+
+function onMouseover() {
+	hover.value = true;
+}
+
+function onMouseout() {
+	hover.value = false;
+}
+
+function onDragover(ev: DragEvent) {
+	if (!ev.dataTransfer) return;
+
+	// このフォルダがルートかつカレントディレクトリならドロップ禁止
+	if (props.folder == null && props.parentFolder == null) {
+		ev.dataTransfer.dropEffect = 'none';
+	}
+
+	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
+	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
+
+	if (isFile || isDriveFile || isDriveFolder) {
+		switch (ev.dataTransfer.effectAllowed) {
+			case 'all':
+			case 'uninitialized':
+			case 'copy': 
+			case 'copyLink': 
+			case 'copyMove': 
+				ev.dataTransfer.dropEffect = 'copy';
+				break;
+			case 'linkMove':
+			case 'move':
+				ev.dataTransfer.dropEffect = 'move';
+				break;
+			default:
+				ev.dataTransfer.dropEffect = 'none';
+				break;
+		}
+	} else {
+		ev.dataTransfer.dropEffect = 'none';
+	}
+
+	return false;
+}
+
+function onDragenter() {
+	if (props.folder || props.parentFolder) draghover.value = true;
+}
+
+function onDragleave() {
+	if (props.folder || props.parentFolder) draghover.value = false;
+}
+
+function onDrop(ev: DragEvent) {
+	draghover.value = false;
+
+	if (!ev.dataTransfer) return;
+
+	// ファイルだったら
+	if (ev.dataTransfer.files.length > 0) {
+		for (const file of Array.from(ev.dataTransfer.files)) {
+			emit('upload', file, props.folder);
+		}
+		return;
+	}
+
+	//#region ドライブのファイル
+	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
+	if (driveFile != null && driveFile !== '') {
+		const file = JSON.parse(driveFile);
+		emit('removeFile', file.id);
+		os.api('drive/files/update', {
+			fileId: file.id,
+			folderId: props.folder ? props.folder.id : null,
+		});
+	}
+	//#endregion
+
+	//#region ドライブのフォルダ
+	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
+	if (driveFolder != null && driveFolder !== '') {
+		const folder = JSON.parse(driveFolder);
+		// 移動先が自分自身ならreject
+		if (props.folder && folder.id === props.folder.id) return;
+		emit('removeFolder', folder.id);
+		os.api('drive/folders/update', {
+			folderId: folder.id,
+			parentId: props.folder ? props.folder.id : null,
+		});
+	}
+	//#endregion
+}
+</script>
+
+<style lang="scss" scoped>
+.drylbebk {
+	> * {
+		pointer-events: none;
+	}
+
+	&.draghover {
+		background: #eee;
+	}
+
+	> i {
+		margin-right: 4px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
new file mode 100644
index 0000000000..4053870950
--- /dev/null
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -0,0 +1,801 @@
+<template>
+<div class="yfudmmck">
+	<nav>
+		<div class="path" @contextmenu.prevent.stop="() => {}">
+			<XNavFolder
+				:class="{ current: folder == null }"
+				:parent-folder="folder"
+				@move="move"
+				@upload="upload"
+				@remove-file="removeFile"
+				@remove-folder="removeFolder"
+			/>
+			<template v-for="f in hierarchyFolders">
+				<span class="separator"><i class="ti ti-chevron-right"></i></span>
+				<XNavFolder
+					:folder="f"
+					:parent-folder="folder"
+					@move="move"
+					@upload="upload"
+					@remove-file="removeFile"
+					@remove-folder="removeFolder"
+				/>
+			</template>
+			<span v-if="folder != null" class="separator"><i class="ti ti-chevron-right"></i></span>
+			<span v-if="folder != null" class="folder current">{{ folder.name }}</span>
+		</div>
+		<button class="menu _button" @click="showMenu"><i class="ti ti-dots"></i></button>
+	</nav>
+	<div
+		ref="main" class="main"
+		:class="{ uploading: uploadings.length > 0, fetching }"
+		@dragover.prevent.stop="onDragover"
+		@dragenter="onDragenter"
+		@dragleave="onDragleave"
+		@drop.prevent.stop="onDrop"
+		@contextmenu.stop="onContextmenu"
+	>
+		<div ref="contents" class="contents">
+			<div v-show="folders.length > 0" ref="foldersContainer" class="folders">
+				<XFolder
+					v-for="(f, i) in folders"
+					:key="f.id"
+					v-anim="i"
+					class="folder"
+					:folder="f"
+					:select-mode="select === 'folder'"
+					:is-selected="selectedFolders.some(x => x.id === f.id)"
+					@chosen="chooseFolder"
+					@move="move"
+					@upload="upload"
+					@remove-file="removeFile"
+					@remove-folder="removeFolder"
+					@dragstart="isDragSource = true"
+					@dragend="isDragSource = false"
+				/>
+				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
+				<div v-for="(n, i) in 16" :key="i" class="padding"></div>
+				<MkButton v-if="moreFolders" ref="moreFolders">{{ i18n.ts.loadMore }}</MkButton>
+			</div>
+			<div v-show="files.length > 0" ref="filesContainer" class="files">
+				<XFile
+					v-for="(file, i) in files"
+					:key="file.id"
+					v-anim="i"
+					class="file"
+					:file="file"
+					:select-mode="select === 'file'"
+					:is-selected="selectedFiles.some(x => x.id === file.id)"
+					@chosen="chooseFile"
+					@dragstart="isDragSource = true"
+					@dragend="isDragSource = false"
+				/>
+				<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
+				<div v-for="(n, i) in 16" :key="i" class="padding"></div>
+				<MkButton v-show="moreFiles" ref="loadMoreFiles" @click="fetchMoreFiles">{{ i18n.ts.loadMore }}</MkButton>
+			</div>
+			<div v-if="files.length == 0 && folders.length == 0 && !fetching" class="empty">
+				<p v-if="draghover">{{ i18n.t('empty-draghover') }}</p>
+				<p v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.t('empty-drive-description') }}</p>
+				<p v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</p>
+			</div>
+		</div>
+		<MkLoading v-if="fetching"/>
+	</div>
+	<div v-if="draghover" class="dropzone"></div>
+	<input ref="fileInput" type="file" accept="*/*" multiple tabindex="-1" @change="onChangeFileInput"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import * as Misskey from 'misskey-js';
+import MkButton from './MkButton.vue';
+import XNavFolder from '@/components/MkDrive.navFolder.vue';
+import XFolder from '@/components/MkDrive.folder.vue';
+import XFile from '@/components/MkDrive.file.vue';
+import * as os from '@/os';
+import { stream } from '@/stream';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+import { uploadFile, uploads } from '@/scripts/upload';
+
+const props = withDefaults(defineProps<{
+	initialFolder?: Misskey.entities.DriveFolder;
+	type?: string;
+	multiple?: boolean;
+	select?: 'file' | 'folder' | null;
+}>(), {
+	multiple: false,
+	select: null,
+});
+
+const emit = defineEmits<{
+	(ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
+	(ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
+	(ev: 'move-root'): void;
+	(ev: 'cd', v: Misskey.entities.DriveFolder | null): void;
+	(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
+}>();
+
+const loadMoreFiles = ref<InstanceType<typeof MkButton>>();
+const fileInput = ref<HTMLInputElement>();
+
+const folder = ref<Misskey.entities.DriveFolder | null>(null);
+const files = ref<Misskey.entities.DriveFile[]>([]);
+const folders = ref<Misskey.entities.DriveFolder[]>([]);
+const moreFiles = ref(false);
+const moreFolders = ref(false);
+const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
+const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
+const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
+const uploadings = uploads;
+const connection = stream.useChannel('drive');
+const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい
+
+// ドロップされようとしているか
+const draghover = ref(false);
+
+// 自身の所有するアイテムがドラッグをスタートさせたか
+// (自分自身の階層にドロップできないようにするためのフラグ)
+const isDragSource = ref(false);
+
+const fetching = ref(true);
+
+const ilFilesObserver = new IntersectionObserver(
+	(entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles(),
+);
+
+watch(folder, () => emit('cd', folder.value));
+
+function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
+	addFile(file, true);
+}
+
+function onStreamDriveFileUpdated(file: Misskey.entities.DriveFile) {
+	const current = folder.value ? folder.value.id : null;
+	if (current !== file.folderId) {
+		removeFile(file);
+	} else {
+		addFile(file, true);
+	}
+}
+
+function onStreamDriveFileDeleted(fileId: string) {
+	removeFile(fileId);
+}
+
+function onStreamDriveFolderCreated(createdFolder: Misskey.entities.DriveFolder) {
+	addFolder(createdFolder, true);
+}
+
+function onStreamDriveFolderUpdated(updatedFolder: Misskey.entities.DriveFolder) {
+	const current = folder.value ? folder.value.id : null;
+	if (current !== updatedFolder.parentId) {
+		removeFolder(updatedFolder);
+	} else {
+		addFolder(updatedFolder, true);
+	}
+}
+
+function onStreamDriveFolderDeleted(folderId: string) {
+	removeFolder(folderId);
+}
+
+function onDragover(ev: DragEvent): any {
+	if (!ev.dataTransfer) return;
+
+	// ドラッグ元が自分自身の所有するアイテムだったら
+	if (isDragSource.value) {
+		// 自分自身にはドロップさせない
+		ev.dataTransfer.dropEffect = 'none';
+		return;
+	}
+
+	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
+	const isDriveFolder = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FOLDER_;
+	if (isFile || isDriveFile || isDriveFolder) {
+		switch (ev.dataTransfer.effectAllowed) {
+			case 'all':
+			case 'uninitialized':
+			case 'copy': 
+			case 'copyLink': 
+			case 'copyMove': 
+				ev.dataTransfer.dropEffect = 'copy';
+				break;
+			case 'linkMove':
+			case 'move':
+				ev.dataTransfer.dropEffect = 'move';
+				break;
+			default:
+				ev.dataTransfer.dropEffect = 'none';
+				break;
+		}
+	} else {
+		ev.dataTransfer.dropEffect = 'none';
+	}
+
+	return false;
+}
+
+function onDragenter() {
+	if (!isDragSource.value) draghover.value = true;
+}
+
+function onDragleave() {
+	draghover.value = false;
+}
+
+function onDrop(ev: DragEvent): any {
+	draghover.value = false;
+
+	if (!ev.dataTransfer) return;
+
+	// ドロップされてきたものがファイルだったら
+	if (ev.dataTransfer.files.length > 0) {
+		for (const file of Array.from(ev.dataTransfer.files)) {
+			upload(file, folder.value);
+		}
+		return;
+	}
+
+	//#region ドライブのファイル
+	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
+	if (driveFile != null && driveFile !== '') {
+		const file = JSON.parse(driveFile);
+		if (files.value.some(f => f.id === file.id)) return;
+		removeFile(file.id);
+		os.api('drive/files/update', {
+			fileId: file.id,
+			folderId: folder.value ? folder.value.id : null,
+		});
+	}
+	//#endregion
+
+	//#region ドライブのフォルダ
+	const driveFolder = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
+	if (driveFolder != null && driveFolder !== '') {
+		const droppedFolder = JSON.parse(driveFolder);
+
+		// 移動先が自分自身ならreject
+		if (folder.value && droppedFolder.id === folder.value.id) return false;
+		if (folders.value.some(f => f.id === droppedFolder.id)) return false;
+		removeFolder(droppedFolder.id);
+		os.api('drive/folders/update', {
+			folderId: droppedFolder.id,
+			parentId: folder.value ? folder.value.id : null,
+		}).then(() => {
+			// noop
+		}).catch(err => {
+			switch (err) {
+				case 'detected-circular-definition':
+					os.alert({
+						title: i18n.ts.unableToProcess,
+						text: i18n.ts.circularReferenceFolder,
+					});
+					break;
+				default:
+					os.alert({
+						type: 'error',
+						text: i18n.ts.somethingHappened,
+					});
+			}
+		});
+	}
+	//#endregion
+}
+
+function selectLocalFile() {
+	fileInput.value?.click();
+}
+
+function urlUpload() {
+	os.inputText({
+		title: i18n.ts.uploadFromUrl,
+		type: 'url',
+		placeholder: i18n.ts.uploadFromUrlDescription,
+	}).then(({ canceled, result: url }) => {
+		if (canceled || !url) return;
+		os.api('drive/files/upload-from-url', {
+			url: url,
+			folderId: folder.value ? folder.value.id : undefined,
+		});
+
+		os.alert({
+			title: i18n.ts.uploadFromUrlRequested,
+			text: i18n.ts.uploadFromUrlMayTakeTime,
+		});
+	});
+}
+
+function createFolder() {
+	os.inputText({
+		title: i18n.ts.createFolder,
+		placeholder: i18n.ts.folderName,
+	}).then(({ canceled, result: name }) => {
+		if (canceled) return;
+		os.api('drive/folders/create', {
+			name: name,
+			parentId: folder.value ? folder.value.id : undefined,
+		}).then(createdFolder => {
+			addFolder(createdFolder, true);
+		});
+	});
+}
+
+function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
+	os.inputText({
+		title: i18n.ts.renameFolder,
+		placeholder: i18n.ts.inputNewFolderName,
+		default: folderToRename.name,
+	}).then(({ canceled, result: name }) => {
+		if (canceled) return;
+		os.api('drive/folders/update', {
+			folderId: folderToRename.id,
+			name: name,
+		}).then(updatedFolder => {
+			// FIXME: 画面を更新するために自分自身に移動
+			move(updatedFolder);
+		});
+	});
+}
+
+function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
+	os.api('drive/folders/delete', {
+		folderId: folderToDelete.id,
+	}).then(() => {
+		// 削除時に親フォルダに移動
+		move(folderToDelete.parentId);
+	}).catch(err => {
+		switch (err.id) {
+			case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
+				os.alert({
+					type: 'error',
+					title: i18n.ts.unableToDelete,
+					text: i18n.ts.hasChildFilesOrFolders,
+				});
+				break;
+			default:
+				os.alert({
+					type: 'error',
+					text: i18n.ts.unableToDelete,
+				});
+		}
+	});
+}
+
+function onChangeFileInput() {
+	if (!fileInput.value?.files) return;
+	for (const file of Array.from(fileInput.value.files)) {
+		upload(file, folder.value);
+	}
+}
+
+function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null) {
+	uploadFile(file, (folderToUpload && typeof folderToUpload === 'object') ? folderToUpload.id : null, undefined, keepOriginal.value).then(res => {
+		addFile(res, true);
+	});
+}
+
+function chooseFile(file: Misskey.entities.DriveFile) {
+	const isAlreadySelected = selectedFiles.value.some(f => f.id === file.id);
+	if (props.multiple) {
+		if (isAlreadySelected) {
+			selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);
+		} else {
+			selectedFiles.value.push(file);
+		}
+		emit('change-selection', selectedFiles.value);
+	} else {
+		if (isAlreadySelected) {
+			emit('selected', file);
+		} else {
+			selectedFiles.value = [file];
+			emit('change-selection', [file]);
+		}
+	}
+}
+
+function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
+	const isAlreadySelected = selectedFolders.value.some(f => f.id === folderToChoose.id);
+	if (props.multiple) {
+		if (isAlreadySelected) {
+			selectedFolders.value = selectedFolders.value.filter(f => f.id !== folderToChoose.id);
+		} else {
+			selectedFolders.value.push(folderToChoose);
+		}
+		emit('change-selection', selectedFolders.value);
+	} else {
+		if (isAlreadySelected) {
+			emit('selected', folderToChoose);
+		} else {
+			selectedFolders.value = [folderToChoose];
+			emit('change-selection', [folderToChoose]);
+		}
+	}
+}
+
+function move(target?: Misskey.entities.DriveFolder) {
+	if (!target) {
+		goRoot();
+		return;
+	} else if (typeof target === 'object') {
+		target = target.id;
+	}
+
+	fetching.value = true;
+
+	os.api('drive/folders/show', {
+		folderId: target,
+	}).then(folderToMove => {
+		folder.value = folderToMove;
+		hierarchyFolders.value = [];
+
+		const dive = folderToDive => {
+			hierarchyFolders.value.unshift(folderToDive);
+			if (folderToDive.parent) dive(folderToDive.parent);
+		};
+
+		if (folderToMove.parent) dive(folderToMove.parent);
+
+		emit('open-folder', folderToMove);
+		fetch();
+	});
+}
+
+function addFolder(folderToAdd: Misskey.entities.DriveFolder, unshift = false) {
+	const current = folder.value ? folder.value.id : null;
+	if (current !== folderToAdd.parentId) return;
+
+	if (folders.value.some(f => f.id === folderToAdd.id)) {
+		const exist = folders.value.map(f => f.id).indexOf(folderToAdd.id);
+		folders.value[exist] = folderToAdd;
+		return;
+	}
+
+	if (unshift) {
+		folders.value.unshift(folderToAdd);
+	} else {
+		folders.value.push(folderToAdd);
+	}
+}
+
+function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
+	const current = folder.value ? folder.value.id : null;
+	if (current !== fileToAdd.folderId) return;
+
+	if (files.value.some(f => f.id === fileToAdd.id)) {
+		const exist = files.value.map(f => f.id).indexOf(fileToAdd.id);
+		files.value[exist] = fileToAdd;
+		return;
+	}
+
+	if (unshift) {
+		files.value.unshift(fileToAdd);
+	} else {
+		files.value.push(fileToAdd);
+	}
+}
+
+function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
+	const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
+	folders.value = folders.value.filter(f => f.id !== folderIdToRemove);
+}
+
+function removeFile(file: Misskey.entities.DriveFile | string) {
+	const fileId = typeof file === 'object' ? file.id : file;
+	files.value = files.value.filter(f => f.id !== fileId);
+}
+
+function appendFile(file: Misskey.entities.DriveFile) {
+	addFile(file);
+}
+
+function appendFolder(folderToAppend: Misskey.entities.DriveFolder) {
+	addFolder(folderToAppend);
+}
+/*
+function prependFile(file: Misskey.entities.DriveFile) {
+	addFile(file, true);
+}
+
+function prependFolder(folderToPrepend: Misskey.entities.DriveFolder) {
+	addFolder(folderToPrepend, true);
+}
+*/
+function goRoot() {
+	// 既にrootにいるなら何もしない
+	if (folder.value == null) return;
+
+	folder.value = null;
+	hierarchyFolders.value = [];
+	emit('move-root');
+	fetch();
+}
+
+async function fetch() {
+	folders.value = [];
+	files.value = [];
+	moreFolders.value = false;
+	moreFiles.value = false;
+	fetching.value = true;
+
+	const foldersMax = 30;
+	const filesMax = 30;
+
+	const foldersPromise = os.api('drive/folders', {
+		folderId: folder.value ? folder.value.id : null,
+		limit: foldersMax + 1,
+	}).then(fetchedFolders => {
+		if (fetchedFolders.length === foldersMax + 1) {
+			moreFolders.value = true;
+			fetchedFolders.pop();
+		}
+		return fetchedFolders;
+	});
+
+	const filesPromise = os.api('drive/files', {
+		folderId: folder.value ? folder.value.id : null,
+		type: props.type,
+		limit: filesMax + 1,
+	}).then(fetchedFiles => {
+		if (fetchedFiles.length === filesMax + 1) {
+			moreFiles.value = true;
+			fetchedFiles.pop();
+		}
+		return fetchedFiles;
+	});
+
+	const [fetchedFolders, fetchedFiles] = await Promise.all([foldersPromise, filesPromise]);
+
+	for (const x of fetchedFolders) appendFolder(x);
+	for (const x of fetchedFiles) appendFile(x);
+
+	fetching.value = false;
+}
+
+function fetchMoreFiles() {
+	fetching.value = true;
+
+	const max = 30;
+
+	// ファイル一覧取得
+	os.api('drive/files', {
+		folderId: folder.value ? folder.value.id : null,
+		type: props.type,
+		untilId: files.value[files.value.length - 1].id,
+		limit: max + 1,
+	}).then(files => {
+		if (files.length === max + 1) {
+			moreFiles.value = true;
+			files.pop();
+		} else {
+			moreFiles.value = false;
+		}
+		for (const x of files) appendFile(x);
+		fetching.value = false;
+	});
+}
+
+function getMenu() {
+	return [{
+		type: 'switch',
+		text: i18n.ts.keepOriginalUploading,
+		ref: keepOriginal,
+	}, null, {
+		text: i18n.ts.addFile,
+		type: 'label',
+	}, {
+		text: i18n.ts.upload,
+		icon: 'ti ti-upload',
+		action: () => { selectLocalFile(); },
+	}, {
+		text: i18n.ts.fromUrl,
+		icon: 'ti ti-link',
+		action: () => { urlUpload(); },
+	}, null, {
+		text: folder.value ? folder.value.name : i18n.ts.drive,
+		type: 'label',
+	}, folder.value ? {
+		text: i18n.ts.renameFolder,
+		icon: 'ti ti-forms',
+		action: () => { renameFolder(folder.value); },
+	} : undefined, folder.value ? {
+		text: i18n.ts.deleteFolder,
+		icon: 'ti ti-trash',
+		action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
+	} : undefined, {
+		text: i18n.ts.createFolder,
+		icon: 'ti ti-folder-plus',
+		action: () => { createFolder(); },
+	}];
+}
+
+function showMenu(ev: MouseEvent) {
+	os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+}
+
+function onContextmenu(ev: MouseEvent) {
+	os.contextMenu(getMenu(), ev);
+}
+
+onMounted(() => {
+	if (defaultStore.state.enableInfiniteScroll && loadMoreFiles.value) {
+		nextTick(() => {
+			ilFilesObserver.observe(loadMoreFiles.value?.$el);
+		});
+	}
+
+	connection.on('fileCreated', onStreamDriveFileCreated);
+	connection.on('fileUpdated', onStreamDriveFileUpdated);
+	connection.on('fileDeleted', onStreamDriveFileDeleted);
+	connection.on('folderCreated', onStreamDriveFolderCreated);
+	connection.on('folderUpdated', onStreamDriveFolderUpdated);
+	connection.on('folderDeleted', onStreamDriveFolderDeleted);
+
+	if (props.initialFolder) {
+		move(props.initialFolder);
+	} else {
+		fetch();
+	}
+});
+
+onActivated(() => {
+	if (defaultStore.state.enableInfiniteScroll) {
+		nextTick(() => {
+			ilFilesObserver.observe(loadMoreFiles.value?.$el);
+		});
+	}
+});
+
+onBeforeUnmount(() => {
+	connection.dispose();
+	ilFilesObserver.disconnect();
+});
+</script>
+
+<style lang="scss" scoped>
+.yfudmmck {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	> nav {
+		display: flex;
+		z-index: 2;
+		width: 100%;
+		padding: 0 8px;
+		box-sizing: border-box;
+		overflow: auto;
+		font-size: 0.9em;
+		box-shadow: 0 1px 0 var(--divider);
+
+		&, * {
+			user-select: none;
+		}
+
+		> .path {
+			display: inline-block;
+			vertical-align: bottom;
+			line-height: 42px;
+			white-space: nowrap;
+
+			> * {
+				display: inline-block;
+				margin: 0;
+				padding: 0 8px;
+				line-height: 42px;
+				cursor: pointer;
+
+				* {
+					pointer-events: none;
+				}
+
+				&:hover {
+					text-decoration: underline;
+				}
+
+				&.current {
+					font-weight: bold;
+					cursor: default;
+
+					&:hover {
+						text-decoration: none;
+					}
+				}
+
+				&.separator {
+					margin: 0;
+					padding: 0;
+					opacity: 0.5;
+					cursor: default;
+
+					> i {
+						margin: 0;
+					}
+				}
+			}
+		}
+
+		> .menu {
+			margin-left: auto;
+			padding: 0 12px;
+		}
+	}
+
+	> .main {
+		flex: 1;
+		overflow: auto;
+		padding: var(--margin);
+
+		&, * {
+			user-select: none;
+		}
+
+		&.fetching {
+			cursor: wait !important;
+
+			* {
+				pointer-events: none;
+			}
+
+			> .contents {
+				opacity: 0.5;
+			}
+		}
+
+		&.uploading {
+			height: calc(100% - 38px - 100px);
+		}
+
+		> .contents {
+
+			> .folders,
+			> .files {
+				display: flex;
+				flex-wrap: wrap;
+
+				> .folder,
+				> .file {
+					flex-grow: 1;
+					width: 128px;
+					margin: 4px;
+					box-sizing: border-box;
+				}
+
+				> .padding {
+					flex-grow: 1;
+					pointer-events: none;
+					width: 128px + 8px;
+				}
+			}
+
+			> .empty {
+				padding: 16px;
+				text-align: center;
+				pointer-events: none;
+				opacity: 0.5;
+
+				> p {
+					margin: 0;
+				}
+			}
+		}
+	}
+
+	> .dropzone {
+		position: absolute;
+		left: 0;
+		top: 38px;
+		width: 100%;
+		height: calc(100% - 38px);
+		border: dashed 2px var(--focus);
+		pointer-events: none;
+	}
+
+	> input {
+		display: none;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.vue b/packages/frontend/src/components/MkDriveFileThumbnail.vue
new file mode 100644
index 0000000000..33379ed5ca
--- /dev/null
+++ b/packages/frontend/src/components/MkDriveFileThumbnail.vue
@@ -0,0 +1,80 @@
+<template>
+<div ref="thumbnail" class="zdjebgpv">
+	<ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/>
+	<i v-else-if="is === 'image'" class="ti ti-photo icon"></i>
+	<i v-else-if="is === 'video'" class="ti ti-video icon"></i>
+	<i v-else-if="is === 'audio' || is === 'midi'" class="ti ti-file-music icon"></i>
+	<i v-else-if="is === 'csv'" class="ti ti-file-text icon"></i>
+	<i v-else-if="is === 'pdf'" class="ti ti-file-text icon"></i>
+	<i v-else-if="is === 'textfile'" class="ti ti-file-text icon"></i>
+	<i v-else-if="is === 'archive'" class="ti ti-file-zip icon"></i>
+	<i v-else class="ti ti-file icon"></i>
+
+	<i v-if="isThumbnailAvailable && is === 'video'" class="ti ti-video icon-sub"></i>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import * as Misskey from 'misskey-js';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+
+const props = defineProps<{
+	file: Misskey.entities.DriveFile;
+	fit: string;
+}>();
+
+const is = computed(() => {
+	if (props.file.type.startsWith('image/')) return 'image';
+	if (props.file.type.startsWith('video/')) return 'video';
+	if (props.file.type === 'audio/midi') return 'midi';
+	if (props.file.type.startsWith('audio/')) return 'audio';
+	if (props.file.type.endsWith('/csv')) return 'csv';
+	if (props.file.type.endsWith('/pdf')) return 'pdf';
+	if (props.file.type.startsWith('text/')) return 'textfile';
+	if ([
+		'application/zip',
+		'application/x-cpio',
+		'application/x-bzip',
+		'application/x-bzip2',
+		'application/java-archive',
+		'application/x-rar-compressed',
+		'application/x-tar',
+		'application/gzip',
+		'application/x-7z-compressed',
+	].some(archiveType => archiveType === props.file.type)) return 'archive';
+	return 'unknown';
+});
+
+const isThumbnailAvailable = computed(() => {
+	return props.file.thumbnailUrl
+		? (is.value === 'image' as const || is.value === 'video')
+		: false;
+});
+</script>
+
+<style lang="scss" scoped>
+.zdjebgpv {
+	position: relative;
+	display: flex;
+	background: var(--panel);
+	border-radius: 8px;
+	overflow: clip;
+
+	> .icon-sub {
+		position: absolute;
+		width: 30%;
+		height: auto;
+		margin: 0;
+		right: 4%;
+		bottom: 4%;
+	}
+
+	> .icon {
+		pointer-events: none;
+		margin: auto;
+		font-size: 32px;
+		color: #777;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkDriveSelectDialog.vue b/packages/frontend/src/components/MkDriveSelectDialog.vue
new file mode 100644
index 0000000000..3ee821b539
--- /dev/null
+++ b/packages/frontend/src/components/MkDriveSelectDialog.vue
@@ -0,0 +1,58 @@
+<template>
+<XModalWindow
+	ref="dialog"
+	:width="800"
+	:height="500"
+	:with-ok-button="true"
+	:ok-button-disabled="(type === 'file') && (selected.length === 0)"
+	@click="cancel()"
+	@close="cancel()"
+	@ok="ok()"
+	@closed="emit('closed')"
+>
+	<template #header>
+		{{ multiple ? ((type === 'file') ? i18n.ts.selectFiles : i18n.ts.selectFolders) : ((type === 'file') ? i18n.ts.selectFile : i18n.ts.selectFolder) }}
+		<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
+	</template>
+	<XDrive :multiple="multiple" :select="type" @change-selection="onChangeSelection" @selected="ok()"/>
+</XModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import * as Misskey from 'misskey-js';
+import XDrive from '@/components/MkDrive.vue';
+import XModalWindow from '@/components/MkModalWindow.vue';
+import number from '@/filters/number';
+import { i18n } from '@/i18n';
+
+withDefaults(defineProps<{
+	type?: 'file' | 'folder';
+	multiple: boolean;
+}>(), {
+	type: 'file',
+});
+
+const emit = defineEmits<{
+	(ev: 'done', r?: Misskey.entities.DriveFile[]): void;
+	(ev: 'closed'): void;
+}>();
+
+const dialog = ref<InstanceType<typeof XModalWindow>>();
+
+const selected = ref<Misskey.entities.DriveFile[]>([]);
+
+function ok() {
+	emit('done', selected.value);
+	dialog.value?.close();
+}
+
+function cancel() {
+	emit('done');
+	dialog.value?.close();
+}
+
+function onChangeSelection(files: Misskey.entities.DriveFile[]) {
+	selected.value = files;
+}
+</script>
diff --git a/packages/frontend/src/components/MkDriveWindow.vue b/packages/frontend/src/components/MkDriveWindow.vue
new file mode 100644
index 0000000000..617200321b
--- /dev/null
+++ b/packages/frontend/src/components/MkDriveWindow.vue
@@ -0,0 +1,30 @@
+<template>
+<XWindow
+	ref="window"
+	:initial-width="800"
+	:initial-height="500"
+	:can-resize="true"
+	@closed="emit('closed')"
+>
+	<template #header>
+		{{ i18n.ts.drive }}
+	</template>
+	<XDrive :initial-folder="initialFolder"/>
+</XWindow>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as Misskey from 'misskey-js';
+import XDrive from '@/components/MkDrive.vue';
+import XWindow from '@/components/MkWindow.vue';
+import { i18n } from '@/i18n';
+
+defineProps<{
+	initialFolder?: Misskey.entities.DriveFolder;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+</script>
diff --git a/packages/frontend/src/components/MkEmojiPicker.section.vue b/packages/frontend/src/components/MkEmojiPicker.section.vue
new file mode 100644
index 0000000000..f6ba7abfc4
--- /dev/null
+++ b/packages/frontend/src/components/MkEmojiPicker.section.vue
@@ -0,0 +1,36 @@
+<template>
+<!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
+<section>
+	<header class="_acrylic" @click="shown = !shown">
+		<i class="toggle ti-fw" :class="shown ? 'ti ti-chevron-down' : 'ti ti-chevron-up'"></i> <slot></slot> ({{ emojis.length }})
+	</header>
+	<div v-if="shown" class="body">
+		<button
+			v-for="emoji in emojis"
+			:key="emoji"
+			class="_button item"
+			@click="emit('chosen', emoji, $event)"
+		>
+			<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
+		</button>
+	</div>
+</section>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const props = defineProps<{
+	emojis: string[];
+	initialShown?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'chosen', v: string, event: MouseEvent): void;
+}>();
+
+const shown = ref(!!props.initialShown);
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue
new file mode 100644
index 0000000000..814f71168a
--- /dev/null
+++ b/packages/frontend/src/components/MkEmojiPicker.vue
@@ -0,0 +1,569 @@
+<template>
+<div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
+	<input ref="search" :value="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" type="search" @input="input()" @paste.stop="paste" @keyup.enter="done()">
+	<div ref="emojis" class="emojis">
+		<section class="result">
+			<div v-if="searchResultCustom.length > 0" class="body">
+				<button
+					v-for="emoji in searchResultCustom"
+					:key="emoji.id"
+					class="_button item"
+					:title="emoji.name"
+					tabindex="0"
+					@click="chosen(emoji, $event)"
+				>
+					<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
+					<img class="emoji" :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
+				</button>
+			</div>
+			<div v-if="searchResultUnicode.length > 0" class="body">
+				<button
+					v-for="emoji in searchResultUnicode"
+					:key="emoji.name"
+					class="_button item"
+					:title="emoji.name"
+					tabindex="0"
+					@click="chosen(emoji, $event)"
+				>
+					<MkEmoji class="emoji" :emoji="emoji.char"/>
+				</button>
+			</div>
+		</section>
+
+		<div v-if="tab === 'index'" class="group index">
+			<section v-if="showPinned">
+				<div class="body">
+					<button
+						v-for="emoji in pinned"
+						:key="emoji"
+						class="_button item"
+						tabindex="0"
+						@click="chosen(emoji, $event)"
+					>
+						<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
+					</button>
+				</div>
+			</section>
+
+			<section>
+				<header class="_acrylic"><i class="ti ti-clock ti-fw"></i> {{ i18n.ts.recentUsed }}</header>
+				<div class="body">
+					<button
+						v-for="emoji in recentlyUsedEmojis"
+						:key="emoji"
+						class="_button item"
+						@click="chosen(emoji, $event)"
+					>
+						<MkEmoji class="emoji" :emoji="emoji" :normal="true"/>
+					</button>
+				</div>
+			</section>
+		</div>
+		<div v-once class="group">
+			<header class="_acrylic">{{ i18n.ts.customEmojis }}</header>
+			<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.ts.other }}</XSection>
+		</div>
+		<div v-once class="group">
+			<header class="_acrylic">{{ i18n.ts.emoji }}</header>
+			<XSection v-for="category in categories" :key="category" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
+		</div>
+	</div>
+	<div class="tabs">
+		<button class="_button tab" :class="{ active: tab === 'index' }" @click="tab = 'index'"><i class="ti ti-asterisk ti-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'custom' }" @click="tab = 'custom'"><i class="ti ti-mood-happy ti-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'unicode' }" @click="tab = 'unicode'"><i class="ti ti-leaf ti-fw"></i></button>
+		<button class="_button tab" :class="{ active: tab === 'tags' }" @click="tab = 'tags'"><i class="ti ti-hash ti-fw"></i></button>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import * as Misskey from 'misskey-js';
+import XSection from '@/components/MkEmojiPicker.section.vue';
+import { emojilist, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import Ripple from '@/components/MkRipple.vue';
+import * as os from '@/os';
+import { isTouchUsing } from '@/scripts/touch';
+import { deviceKind } from '@/scripts/device-kind';
+import { emojiCategories, instance } from '@/instance';
+import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
+
+const props = withDefaults(defineProps<{
+	showPinned?: boolean;
+	asReactionPicker?: boolean;
+	maxHeight?: number;
+	asDrawer?: boolean;
+}>(), {
+	showPinned: true,
+});
+
+const emit = defineEmits<{
+	(ev: 'chosen', v: string): void;
+}>();
+
+const search = ref<HTMLInputElement>();
+const emojis = ref<HTMLDivElement>();
+
+const {
+	reactions: pinned,
+	reactionPickerSize,
+	reactionPickerWidth,
+	reactionPickerHeight,
+	disableShowingAnimatedImages,
+	recentlyUsedEmojis,
+} = defaultStore.reactiveState;
+
+const size = computed(() => props.asReactionPicker ? reactionPickerSize.value : 1);
+const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3);
+const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2);
+const customEmojiCategories = emojiCategories;
+const customEmojis = instance.emojis;
+const q = ref<string>('');
+const searchResultCustom = ref<Misskey.entities.CustomEmoji[]>([]);
+const searchResultUnicode = ref<UnicodeEmojiDef[]>([]);
+const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
+
+watch(q, () => {
+	if (emojis.value) emojis.value.scrollTop = 0;
+
+	if (q.value === '') {
+		searchResultCustom.value = [];
+		searchResultUnicode.value = [];
+		return;
+	}
+
+	const newQ = q.value.replace(/:/g, '').toLowerCase();
+
+	const searchCustom = () => {
+		const max = 8;
+		const emojis = customEmojis;
+		const matches = new Set<Misskey.entities.CustomEmoji>();
+
+		const exactMatch = emojis.find(emoji => emoji.name === newQ);
+		if (exactMatch) matches.add(exactMatch);
+
+		if (newQ.includes(' ')) { // AND検索
+			const keywords = newQ.split(' ');
+
+			// 名前にキーワードが含まれている
+			for (const emoji of emojis) {
+				if (keywords.every(keyword => emoji.name.includes(keyword))) {
+					matches.add(emoji);
+					if (matches.size >= max) break;
+				}
+			}
+			if (matches.size >= max) return matches;
+
+			// 名前またはエイリアスにキーワードが含まれている
+			for (const emoji of emojis) {
+				if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.aliases.some(alias => alias.includes(keyword)))) {
+					matches.add(emoji);
+					if (matches.size >= max) break;
+				}
+			}
+		} else {
+			for (const emoji of emojis) {
+				if (emoji.name.startsWith(newQ)) {
+					matches.add(emoji);
+					if (matches.size >= max) break;
+				}
+			}
+			if (matches.size >= max) return matches;
+
+			for (const emoji of emojis) {
+				if (emoji.aliases.some(alias => alias.startsWith(newQ))) {
+					matches.add(emoji);
+					if (matches.size >= max) break;
+				}
+			}
+			if (matches.size >= max) return matches;
+
+			for (const emoji of emojis) {
+				if (emoji.name.includes(newQ)) {
+					matches.add(emoji);
+					if (matches.size >= max) break;
+				}
+			}
+			if (matches.size >= max) return matches;
+
+			for (const emoji of emojis) {
+				if (emoji.aliases.some(alias => alias.includes(newQ))) {
+					matches.add(emoji);
+					if (matches.size >= max) break;
+				}
+			}
+		}
+
+		return matches;
+	};
+
+	const searchUnicode = () => {
+		const max = 8;
+		const emojis = emojilist;
+		const matches = new Set<UnicodeEmojiDef>();
+
+		const exactMatch = emojis.find(emoji => emoji.name === newQ);
+		if (exactMatch) matches.add(exactMatch);
+
+		if (newQ.includes(' ')) { // AND検索
+			const keywords = newQ.split(' ');
+
+			// 名前にキーワードが含まれている
+			for (const emoji of emojis) {
+				if (keywords.every(keyword => emoji.name.includes(keyword))) {
+					matches.add(emoji);
+					if (matches.size >= max) break;
+				}
+			}
+			if (matches.size >= max) return matches;
+
+			// 名前またはエイリアスにキーワードが含まれている
+			for (const emoji of emojis) {
+				if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.keywords.some(alias => alias.includes(keyword)))) {
+					matches.add(emoji);
+					if (matches.size >= max) break;
+				}
+			}
+		} else {
+			for (const emoji of emojis) {
+				if (emoji.name.startsWith(newQ)) {
+					matches.add(emoji);
+					if (matches.size >= max) break;
+				}
+			}
+			if (matches.size >= max) return matches;
+
+			for (const emoji of emojis) {
+				if (emoji.keywords.some(keyword => keyword.startsWith(newQ))) {
+					matches.add(emoji);
+					if (matches.size >= max) break;
+				}
+			}
+			if (matches.size >= max) return matches;
+
+			for (const emoji of emojis) {
+				if (emoji.name.includes(newQ)) {
+					matches.add(emoji);
+					if (matches.size >= max) break;
+				}
+			}
+			if (matches.size >= max) return matches;
+
+			for (const emoji of emojis) {
+				if (emoji.keywords.some(keyword => keyword.includes(newQ))) {
+					matches.add(emoji);
+					if (matches.size >= max) break;
+				}
+			}
+		}
+
+		return matches;
+	};
+
+	searchResultCustom.value = Array.from(searchCustom());
+	searchResultUnicode.value = Array.from(searchUnicode());
+});
+
+function focus() {
+	if (!['smartphone', 'tablet'].includes(deviceKind) && !isTouchUsing) {
+		search.value?.focus({
+			preventScroll: true,
+		});
+	}
+}
+
+function reset() {
+	if (emojis.value) emojis.value.scrollTop = 0;
+	q.value = '';
+}
+
+function getKey(emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef): string {
+	return typeof emoji === 'string' ? emoji : 'char' in emoji ? emoji.char : `:${emoji.name}:`;
+}
+
+function chosen(emoji: any, ev?: MouseEvent) {
+	const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined;
+	if (el) {
+		const rect = el.getBoundingClientRect();
+		const x = rect.left + (el.offsetWidth / 2);
+		const y = rect.top + (el.offsetHeight / 2);
+		os.popup(Ripple, { x, y }, {}, 'end');
+	}
+
+	const key = getKey(emoji);
+	emit('chosen', key);
+
+	// 最近使った絵文字更新
+	if (!pinned.value.includes(key)) {
+		let recents = defaultStore.state.recentlyUsedEmojis;
+		recents = recents.filter((emoji: any) => emoji !== key);
+		recents.unshift(key);
+		defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
+	}
+}
+
+function input(): void {
+	// Using custom input event instead of v-model to respond immediately on
+	// Android, where composition happens on all languages
+	// (v-model does not update during composition)
+	q.value = search.value?.value.trim() ?? '';
+}
+
+function paste(event: ClipboardEvent): void {
+	const pasted = event.clipboardData?.getData('text') ?? '';
+	if (done(pasted)) {
+		event.preventDefault();
+	}
+}
+
+function done(query?: string): boolean | void {
+	if (query == null) query = q.value;
+	if (query == null || typeof query !== 'string') return;
+
+	const q2 = query.replace(/:/g, '');
+	const exactMatchCustom = customEmojis.find(emoji => emoji.name === q2);
+	if (exactMatchCustom) {
+		chosen(exactMatchCustom);
+		return true;
+	}
+	const exactMatchUnicode = emojilist.find(emoji => emoji.char === q2 || emoji.name === q2);
+	if (exactMatchUnicode) {
+		chosen(exactMatchUnicode);
+		return true;
+	}
+	if (searchResultCustom.value.length > 0) {
+		chosen(searchResultCustom.value[0]);
+		return true;
+	}
+	if (searchResultUnicode.value.length > 0) {
+		chosen(searchResultUnicode.value[0]);
+		return true;
+	}
+}
+
+onMounted(() => {
+	focus();
+});
+
+defineExpose({
+	focus,
+	reset,
+});
+</script>
+
+<style lang="scss" scoped>
+.omfetrab {
+	$pad: 8px;
+
+	display: flex;
+	flex-direction: column;
+
+	&.s1 {
+		--eachSize: 40px;
+	}
+
+	&.s2 {
+		--eachSize: 45px;
+	}
+
+	&.s3 {
+		--eachSize: 50px;
+	}
+
+	&.w1 {
+		width: calc((var(--eachSize) * 5) + (#{$pad} * 2));
+		--columns: 1fr 1fr 1fr 1fr 1fr;
+	}
+
+	&.w2 {
+		width: calc((var(--eachSize) * 6) + (#{$pad} * 2));
+		--columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+	}
+
+	&.w3 {
+		width: calc((var(--eachSize) * 7) + (#{$pad} * 2));
+		--columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+	}
+
+	&.w4 {
+		width: calc((var(--eachSize) * 8) + (#{$pad} * 2));
+		--columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+	}
+
+	&.w5 {
+		width: calc((var(--eachSize) * 9) + (#{$pad} * 2));
+		--columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+	}
+
+	&.h1 {
+		height: calc((var(--eachSize) * 4) + (#{$pad} * 2));
+	}
+
+	&.h2 {
+		height: calc((var(--eachSize) * 6) + (#{$pad} * 2));
+	}
+
+	&.h3 {
+		height: calc((var(--eachSize) * 8) + (#{$pad} * 2));
+	}
+
+	&.h4 {
+		height: calc((var(--eachSize) * 10) + (#{$pad} * 2));
+	}
+
+	&.asDrawer {
+		width: 100% !important;
+
+		> .emojis {
+			::v-deep(section) {
+				> header {
+					height: 32px;
+					line-height: 32px;
+					padding: 0 12px;
+					font-size: 15px;
+				}
+
+				> .body {
+					display: grid;
+					grid-template-columns: var(--columns);
+					font-size: 30px;
+
+					> .item {
+						aspect-ratio: 1 / 1;
+						width: auto;
+						height: auto;
+						min-width: 0;
+					}
+				}
+			}
+		}
+	}
+
+	> .search {
+		width: 100%;
+		padding: 12px;
+		box-sizing: border-box;
+		font-size: 1em;
+		outline: none;
+		border: none;
+		background: transparent;
+		color: var(--fg);
+
+		&:not(.filled) {
+			order: 1;
+			z-index: 2;
+			box-shadow: 0px -1px 0 0px var(--divider);
+		}
+	}
+
+	> .tabs {
+		display: flex;
+		display: none;
+
+		> .tab {
+			flex: 1;
+			height: 38px;
+			border-top: solid 0.5px var(--divider);
+
+			&.active {
+				border-top: solid 1px var(--accent);
+				color: var(--accent);
+			}
+		}
+	}
+
+	> .emojis {
+		height: 100%;
+		overflow-y: auto;
+		overflow-x: hidden;
+
+		scrollbar-width: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+
+		> .group {
+			&:not(.index) {
+				padding: 4px 0 8px 0;
+				border-top: solid 0.5px var(--divider);
+			}
+
+			> header {
+				/*position: sticky;
+				top: 0;
+				left: 0;*/
+				height: 32px;
+				line-height: 32px;
+				z-index: 2;
+				padding: 0 8px;
+				font-size: 12px;
+			}
+		}
+
+		::v-deep(section) {
+			> header {
+				position: sticky;
+				top: 0;
+				left: 0;
+				height: 32px;
+				line-height: 32px;
+				z-index: 1;
+				padding: 0 8px;
+				font-size: 12px;
+				cursor: pointer;
+
+				&:hover {
+					color: var(--accent);
+				}
+			}
+
+			> .body {
+				position: relative;
+				padding: $pad;
+
+				> .item {
+					position: relative;
+					padding: 0;
+					width: var(--eachSize);
+					height: var(--eachSize);
+					contain: strict;
+					border-radius: 4px;
+					font-size: 24px;
+
+					&:focus-visible {
+						outline: solid 2px var(--focus);
+						z-index: 1;
+					}
+
+					&:hover {
+						background: rgba(0, 0, 0, 0.05);
+					}
+
+					&:active {
+						background: var(--accent);
+						box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
+					}
+
+					> .emoji {
+						height: 1.25em;
+						vertical-align: -.25em;
+						pointer-events: none;
+					}
+				}
+			}
+
+			&.result {
+				border-bottom: solid 0.5px var(--divider);
+
+				&:empty {
+					display: none;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkEmojiPickerDialog.vue b/packages/frontend/src/components/MkEmojiPickerDialog.vue
new file mode 100644
index 0000000000..3b41f9d75b
--- /dev/null
+++ b/packages/frontend/src/components/MkEmojiPickerDialog.vue
@@ -0,0 +1,73 @@
+<template>
+<MkModal
+	ref="modal"
+	v-slot="{ type, maxHeight }"
+	:z-priority="'middle'"
+	:prefer-type="asReactionPicker && defaultStore.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'"
+	:transparent-bg="true"
+	:manual-showing="manualShowing"
+	:src="src"
+	@click="modal?.close()"
+	@opening="opening"
+	@close="emit('close')"
+	@closed="emit('closed')"
+>
+	<MkEmojiPicker
+		ref="picker"
+		class="ryghynhb _popup _shadow"
+		:class="{ drawer: type === 'drawer' }"
+		:show-pinned="showPinned"
+		:as-reaction-picker="asReactionPicker"
+		:as-drawer="type === 'drawer'"
+		:max-height="maxHeight"
+		@chosen="chosen"
+	/>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MkModal from '@/components/MkModal.vue';
+import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
+import { defaultStore } from '@/store';
+
+withDefaults(defineProps<{
+	manualShowing?: boolean | null;
+	src?: HTMLElement;
+	showPinned?: boolean;
+	asReactionPicker?: boolean;
+}>(), {
+	manualShowing: null,
+	showPinned: true,
+	asReactionPicker: false,
+});
+
+const emit = defineEmits<{
+	(ev: 'done', v: any): void;
+	(ev: 'close'): void;
+	(ev: 'closed'): void;
+}>();
+
+const modal = ref<InstanceType<typeof MkModal>>();
+const picker = ref<InstanceType<typeof MkEmojiPicker>>();
+
+function chosen(emoji: any) {
+	emit('done', emoji);
+	modal.value?.close();
+}
+
+function opening() {
+	picker.value?.reset();
+	picker.value?.focus();
+}
+</script>
+
+<style lang="scss" scoped>
+.ryghynhb {
+	&.drawer {
+		border-radius: 24px;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkEmojiPickerWindow.vue b/packages/frontend/src/components/MkEmojiPickerWindow.vue
new file mode 100644
index 0000000000..523e4ba695
--- /dev/null
+++ b/packages/frontend/src/components/MkEmojiPickerWindow.vue
@@ -0,0 +1,180 @@
+<template>
+<MkWindow ref="window"
+	:initial-width="null"
+	:initial-height="null"
+	:can-resize="false"
+	:mini="true"
+	:front="true"
+	@closed="emit('closed')"
+>
+	<MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen"/>
+</MkWindow>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkWindow from '@/components/MkWindow.vue';
+import MkEmojiPicker from '@/components/MkEmojiPicker.vue';
+
+withDefaults(defineProps<{
+	src?: HTMLElement;
+	showPinned?: boolean;
+	asReactionPicker?: boolean;
+}>(), {
+	showPinned: true,
+});
+
+const emit = defineEmits<{
+	(ev: 'chosen', v: any): void;
+	(ev: 'closed'): void;
+}>();
+
+function chosen(emoji: any) {
+	emit('chosen', emoji);
+}
+</script>
+
+<style lang="scss" scoped>
+.omfetrab {
+	$pad: 8px;
+	--eachSize: 40px;
+
+	display: flex;
+	flex-direction: column;
+	contain: content;
+
+	&.big {
+		--eachSize: 44px;
+	}
+
+	&.w1 {
+		width: calc((var(--eachSize) * 5) + (#{$pad} * 2));
+	}
+
+	&.w2 {
+		width: calc((var(--eachSize) * 6) + (#{$pad} * 2));
+	}
+
+	&.w3 {
+		width: calc((var(--eachSize) * 7) + (#{$pad} * 2));
+	}
+
+	&.h1 {
+		--height: calc((var(--eachSize) * 4) + (#{$pad} * 2));
+	}
+
+	&.h2 {
+		--height: calc((var(--eachSize) * 6) + (#{$pad} * 2));
+	}
+
+	&.h3 {
+		--height: calc((var(--eachSize) * 8) + (#{$pad} * 2));
+	}
+
+	> .search {
+		width: 100%;
+		padding: 12px;
+		box-sizing: border-box;
+		font-size: 1em;
+		outline: none;
+		border: none;
+		background: transparent;
+		color: var(--fg);
+
+		&:not(.filled) {
+			order: 1;
+			z-index: 2;
+			box-shadow: 0px -1px 0 0px var(--divider);
+		}
+	}
+
+	> .emojis {
+		height: var(--height);
+		overflow-y: auto;
+		overflow-x: hidden;
+
+		scrollbar-width: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+
+		> .index {
+			min-height: var(--height);
+			position: relative;
+			border-bottom: solid 0.5px var(--divider);
+				
+			> .arrow {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				padding: 16px 0;
+				text-align: center;
+				opacity: 0.5;
+				pointer-events: none;
+			}
+		}
+
+		section {
+			> header {
+				position: sticky;
+				top: 0;
+				left: 0;
+				z-index: 1;
+				padding: 8px;
+				font-size: 12px;
+			}
+
+			> div {
+				padding: $pad;
+
+				> button {
+					position: relative;
+					padding: 0;
+					width: var(--eachSize);
+					height: var(--eachSize);
+					border-radius: 4px;
+
+					&:focus-visible {
+						outline: solid 2px var(--focus);
+						z-index: 1;
+					}
+
+					&:hover {
+						background: rgba(0, 0, 0, 0.05);
+					}
+
+					&:active {
+						background: var(--accent);
+						box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
+					}
+
+					> * {
+						font-size: 24px;
+						height: 1.25em;
+						vertical-align: -.25em;
+						pointer-events: none;
+					}
+				}
+			}
+
+			&.result {
+				border-bottom: solid 0.5px var(--divider);
+
+				&:empty {
+					display: none;
+				}
+			}
+
+			&.unicode {
+				min-height: 384px;
+			}
+
+			&.custom {
+				min-height: 64px;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkFeaturedPhotos.vue b/packages/frontend/src/components/MkFeaturedPhotos.vue
new file mode 100644
index 0000000000..e58b5d2849
--- /dev/null
+++ b/packages/frontend/src/components/MkFeaturedPhotos.vue
@@ -0,0 +1,22 @@
+<template>
+<div v-if="meta" class="xfbouadm" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import * as Misskey from 'misskey-js';
+import * as os from '@/os';
+
+const meta = ref<Misskey.entities.DetailedInstanceMetadata>();
+
+os.api('meta', { detail: true }).then(gotMeta => {
+	meta.value = gotMeta;
+});
+</script>
+
+<style lang="scss" scoped>
+.xfbouadm {
+	background-position: center;
+	background-size: cover;
+}
+</style>
diff --git a/packages/frontend/src/components/MkFileCaptionEditWindow.vue b/packages/frontend/src/components/MkFileCaptionEditWindow.vue
new file mode 100644
index 0000000000..73875251f0
--- /dev/null
+++ b/packages/frontend/src/components/MkFileCaptionEditWindow.vue
@@ -0,0 +1,175 @@
+<template>
+<XModalWindow
+	ref="dialog"
+	:width="400"
+	:height="450"
+	:with-ok-button="true"
+	:ok-button-disabled="false"
+	@ok="ok()"
+	@close="dialog.close()"
+	@closed="emit('closed')"
+>
+	<template #header>{{ i18n.ts.describeFile }}</template>
+	<div>
+		<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain" style="height: 100px;"/>
+		<MkTextarea v-model="caption" autofocus :placeholder="i18n.ts.inputNewDescription">
+			<template #label>{{ i18n.ts.caption }}</template>
+		</MkTextarea>
+	</div>
+</XModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as Misskey from 'misskey-js';
+import XModalWindow from '@/components/MkModalWindow.vue';
+import MkTextarea from '@/components/form/textarea.vue';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	file: Misskey.entities.DriveFile;
+	default: string;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'done', v: string): void;
+	(ev: 'closed'): void;
+}>();
+
+const dialog = $ref<InstanceType<typeof XModalWindow>>();
+
+let caption = $ref(props.default);
+
+async function ok() {
+	emit('done', caption);
+	dialog.close();
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	flex-direction: row;
+	overflow: scroll;
+	position: fixed;
+	left: 0;
+	top: 0;
+}
+@media (max-width: 850px) {
+	.container {
+		flex-direction: column;
+	}
+	.top-caption {
+		padding-bottom: 8px;
+	}
+}
+.fullwidth {
+	width: 100%;
+	margin: auto;
+}
+.mk-dialog {
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+	margin: auto;
+
+	> header {
+		margin: 0 0 8px 0;
+		position: relative;
+
+		> .title {
+			font-weight: bold;
+			font-size: 20px;
+		}
+
+		> .text-count {
+			opacity: 0.7;
+			position: absolute;
+			right: 0;
+		}
+	}
+
+	> .buttons {
+		margin-top: 16px;
+
+		> * {
+			margin: 0 8px;
+		}
+	}
+
+	> textarea {
+		display: block;
+		box-sizing: border-box;
+		padding: 0 24px;
+		margin: 0;
+		width: 100%;
+		font-size: 16px;
+		border: none;
+		border-radius: 0;
+		background: transparent;
+		color: var(--fg);
+		font-family: inherit;
+		max-width: 100%;
+		min-width: 100%;
+		min-height: 90px;
+
+		&:focus-visible {
+			outline: none;
+		}
+
+		&:disabled {
+			opacity: 0.5;
+		}
+	}
+}
+.hdrwpsaf {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	> header,
+	> footer {
+		align-self: center;
+		display: inline-block;
+		padding: 6px 9px;
+		font-size: 90%;
+		background: rgba(0, 0, 0, 0.5);
+		border-radius: 6px;
+		color: #fff;
+	}
+
+	> header {
+		margin-bottom: 8px;
+		opacity: 0.9;
+	}
+
+	> img {
+		display: block;
+		flex: 1;
+		min-height: 0;
+		object-fit: contain;
+		width: 100%;
+		cursor: zoom-out;
+		image-orientation: from-image;
+	}
+
+	> footer {
+		margin-top: 8px;
+		opacity: 0.8;
+
+		> span + span {
+			margin-left: 0.5em;
+			padding-left: 0.5em;
+			border-left: solid 1px rgba(255, 255, 255, 0.5);
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkFileListForAdmin.vue b/packages/frontend/src/components/MkFileListForAdmin.vue
new file mode 100644
index 0000000000..4910506a95
--- /dev/null
+++ b/packages/frontend/src/components/MkFileListForAdmin.vue
@@ -0,0 +1,117 @@
+<template>
+<div>
+	<MkPagination v-slot="{items}" :pagination="pagination" class="urempief" :class="{ grid: viewMode === 'grid' }">
+		<MkA
+			v-for="file in items"
+			:key="file.id"
+			v-tooltip.mfm="`${file.type}\n${bytes(file.size)}\n${new Date(file.createdAt).toLocaleString()}\nby ${file.user ? '@' + Acct.toString(file.user) : 'system'}`"
+			:to="`/admin/file/${file.id}`"
+			class="file _button"
+		>
+			<div v-if="file.isSensitive" class="sensitive-label">{{ i18n.ts.sensitive }}</div>
+			<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
+			<div v-if="viewMode === 'list'" class="body">
+				<div>
+					<small style="opacity: 0.7;">{{ file.name }}</small>
+				</div>
+				<div>
+					<MkAcct v-if="file.user" :user="file.user"/>
+					<div v-else>{{ i18n.ts.system }}</div>
+				</div>
+				<div>
+					<span style="margin-right: 1em;">{{ file.type }}</span>
+					<span>{{ bytes(file.size) }}</span>
+				</div>
+				<div>
+					<span>{{ i18n.ts.registeredDate }}: <MkTime :time="file.createdAt" mode="detail"/></span>
+				</div>
+			</div>
+		</MkA>
+	</MkPagination>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import * as Acct from 'misskey-js/built/acct';
+import MkPagination from '@/components/MkPagination.vue';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
+import bytes from '@/filters/bytes';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	pagination: any;
+	viewMode: 'grid' | 'list';
+}>();
+</script>
+
+<style lang="scss" scoped>
+@keyframes sensitive-blink {
+	0% { opacity: 1; }
+	50% { opacity: 0; }
+}
+
+.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(130px, 1fr));
+		grid-gap: 12px;
+		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;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkFolder.vue b/packages/frontend/src/components/MkFolder.vue
new file mode 100644
index 0000000000..9e83b07cd7
--- /dev/null
+++ b/packages/frontend/src/components/MkFolder.vue
@@ -0,0 +1,159 @@
+<template>
+<div v-size="{ max: [500] }" class="ssazuxis">
+	<header class="_button" :style="{ background: bg }" @click="showBody = !showBody">
+		<div class="title"><slot name="header"></slot></div>
+		<div class="divider"></div>
+		<button class="_button">
+			<template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
+			<template v-else><i class="ti ti-chevron-down"></i></template>
+		</button>
+	</header>
+	<transition
+		:name="$store.state.animation ? 'folder-toggle' : ''"
+		@enter="enter"
+		@after-enter="afterEnter"
+		@leave="leave"
+		@after-leave="afterLeave"
+	>
+		<div v-show="showBody">
+			<slot></slot>
+		</div>
+	</transition>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import tinycolor from 'tinycolor2';
+
+const localStoragePrefix = 'ui:folder:';
+
+export default defineComponent({
+	props: {
+		expanded: {
+			type: Boolean,
+			required: false,
+			default: true,
+		},
+		persistKey: {
+			type: String,
+			required: false,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			bg: null,
+			showBody: (this.persistKey && localStorage.getItem(localStoragePrefix + this.persistKey)) ? localStorage.getItem(localStoragePrefix + this.persistKey) === 't' : this.expanded,
+		};
+	},
+	watch: {
+		showBody() {
+			if (this.persistKey) {
+				localStorage.setItem(localStoragePrefix + this.persistKey, this.showBody ? 't' : 'f');
+			}
+		},
+	},
+	mounted() {
+		function getParentBg(el: Element | null): string {
+			if (el == null || el.tagName === 'BODY') return 'var(--bg)';
+			const bg = el.style.background || el.style.backgroundColor;
+			if (bg) {
+				return bg;
+			} else {
+				return getParentBg(el.parentElement);
+			}
+		}
+		const rawBg = getParentBg(this.$el);
+		const bg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
+		bg.setAlpha(0.85);
+		this.bg = bg.toRgbString();
+	},
+	methods: {
+		toggleContent(show: boolean) {
+			this.showBody = show;
+		},
+
+		enter(el) {
+			const elementHeight = el.getBoundingClientRect().height;
+			el.style.height = 0;
+			el.offsetHeight; // reflow
+			el.style.height = elementHeight + 'px';
+		},
+		afterEnter(el) {
+			el.style.height = null;
+		},
+		leave(el) {
+			const elementHeight = el.getBoundingClientRect().height;
+			el.style.height = elementHeight + 'px';
+			el.offsetHeight; // reflow
+			el.style.height = 0;
+		},
+		afterLeave(el) {
+			el.style.height = null;
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.folder-toggle-enter-active, .folder-toggle-leave-active {
+	overflow-y: hidden;
+	transition: opacity 0.5s, height 0.5s !important;
+}
+.folder-toggle-enter-from {
+	opacity: 0;
+}
+.folder-toggle-leave-to {
+	opacity: 0;
+}
+
+.ssazuxis {
+	position: relative;
+
+	> header {
+		display: flex;
+		position: relative;
+		z-index: 10;
+		position: sticky;
+		top: var(--stickyTop, 0px);
+		padding: var(--x-padding);
+		-webkit-backdrop-filter: var(--blur, blur(8px));
+		backdrop-filter: var(--blur, blur(20px));
+
+		> .title {
+			display: grid;
+			place-content: center;
+			margin: 0;
+			padding: 12px 16px 12px 0;
+
+			> i {
+				margin-right: 6px;
+			}
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		> .divider {
+			flex: 1;
+			margin: auto;
+			height: 1px;
+			background: var(--divider);
+		}
+
+		> button {
+			padding: 12px 0 12px 16px;
+		}
+	}
+
+	&.max-width_500px {
+		> header {
+			> .title {
+				padding: 8px 10px 8px 0;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue
new file mode 100644
index 0000000000..ee256d9263
--- /dev/null
+++ b/packages/frontend/src/components/MkFollowButton.vue
@@ -0,0 +1,187 @@
+<template>
+<button
+	class="kpoogebi _button"
+	:class="{ wait, active: isFollowing || hasPendingFollowRequestFromYou, full, large }"
+	:disabled="wait"
+	@click="onClick"
+>
+	<template v-if="!wait">
+		<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
+			<span v-if="full">{{ i18n.ts.followRequestPending }}</span><i class="ti ti-hourglass-empty"></i>
+		</template>
+		<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked">
+			<!-- つまりリモートフォローの場合。 -->
+			<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
+		</template>
+		<template v-else-if="isFollowing">
+			<span v-if="full">{{ i18n.ts.unfollow }}</span><i class="ti ti-minus"></i>
+		</template>
+		<template v-else-if="!isFollowing && user.isLocked">
+			<span v-if="full">{{ i18n.ts.followRequest }}</span><i class="ti ti-plus"></i>
+		</template>
+		<template v-else-if="!isFollowing && !user.isLocked">
+			<span v-if="full">{{ i18n.ts.follow }}</span><i class="ti ti-plus"></i>
+		</template>
+	</template>
+	<template v-else>
+		<span v-if="full">{{ i18n.ts.processing }}</span><MkLoading :em="true" :colored="false"/>
+	</template>
+</button>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted } from 'vue';
+import * as Misskey from 'misskey-js';
+import * as os from '@/os';
+import { stream } from '@/stream';
+import { i18n } from '@/i18n';
+
+const props = withDefaults(defineProps<{
+	user: Misskey.entities.UserDetailed,
+	full?: boolean,
+	large?: boolean,
+}>(), {
+	full: false,
+	large: false,
+});
+
+let isFollowing = $ref(props.user.isFollowing);
+let hasPendingFollowRequestFromYou = $ref(props.user.hasPendingFollowRequestFromYou);
+let wait = $ref(false);
+const connection = stream.useChannel('main');
+
+if (props.user.isFollowing == null) {
+	os.api('users/show', {
+		userId: props.user.id,
+	})
+		.then(onFollowChange);
+}
+
+function onFollowChange(user: Misskey.entities.UserDetailed) {
+	if (user.id === props.user.id) {
+		isFollowing = user.isFollowing;
+		hasPendingFollowRequestFromYou = user.hasPendingFollowRequestFromYou;
+	}
+}
+
+async function onClick() {
+	wait = true;
+
+	try {
+		if (isFollowing) {
+			const { canceled } = await os.confirm({
+				type: 'warning',
+				text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }),
+			});
+
+			if (canceled) return;
+
+			await os.api('following/delete', {
+				userId: props.user.id,
+			});
+		} else {
+			if (hasPendingFollowRequestFromYou) {
+				await os.api('following/requests/cancel', {
+					userId: props.user.id,
+				});
+				hasPendingFollowRequestFromYou = false;
+			} else {
+				await os.api('following/create', {
+					userId: props.user.id,
+				});
+				hasPendingFollowRequestFromYou = true;
+			}
+		}
+	} catch (err) {
+		console.error(err);
+	} finally {
+		wait = false;
+	}
+}
+
+onMounted(() => {
+	connection.on('follow', onFollowChange);
+	connection.on('unfollow', onFollowChange);
+});
+
+onBeforeUnmount(() => {
+	connection.dispose();
+});
+</script>
+
+<style lang="scss" scoped>
+.kpoogebi {
+	position: relative;
+	display: inline-block;
+	font-weight: bold;
+	color: var(--accent);
+	background: transparent;
+	border: solid 1px var(--accent);
+	padding: 0;
+	height: 31px;
+	font-size: 16px;
+	border-radius: 32px;
+	background: #fff;
+
+	&.full {
+		padding: 0 8px 0 12px;
+		font-size: 14px;
+	}
+
+	&.large {
+		font-size: 16px;
+		height: 38px;
+		padding: 0 12px 0 16px;
+	}
+
+	&:not(.full) {
+		width: 31px;
+	}
+
+	&:focus-visible {
+		&:after {
+			content: "";
+			pointer-events: none;
+			position: absolute;
+			top: -5px;
+			right: -5px;
+			bottom: -5px;
+			left: -5px;
+			border: 2px solid var(--focus);
+			border-radius: 32px;
+		}
+	}
+
+	&:hover {
+		//background: mix($primary, #fff, 20);
+	}
+
+	&:active {
+		//background: mix($primary, #fff, 40);
+	}
+
+	&.active {
+		color: #fff;
+		background: var(--accent);
+
+		&:hover {
+			background: var(--accentLighten);
+			border-color: var(--accentLighten);
+		}
+
+		&:active {
+			background: var(--accentDarken);
+			border-color: var(--accentDarken);
+		}
+	}
+
+	&.wait {
+		cursor: wait !important;
+		opacity: 0.7;
+	}
+
+	> span {
+		margin-right: 6px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkForgotPassword.vue b/packages/frontend/src/components/MkForgotPassword.vue
new file mode 100644
index 0000000000..1b55451c94
--- /dev/null
+++ b/packages/frontend/src/components/MkForgotPassword.vue
@@ -0,0 +1,80 @@
+<template>
+<XModalWindow ref="dialog"
+	:width="370"
+	:height="400"
+	@close="dialog.close()"
+	@closed="emit('closed')"
+>
+	<template #header>{{ i18n.ts.forgotPassword }}</template>
+
+	<form v-if="instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit">
+		<div class="main _formRoot">
+			<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required>
+				<template #label>{{ i18n.ts.username }}</template>
+				<template #prefix>@</template>
+			</MkInput>
+
+			<MkInput v-model="email" class="_formBlock" type="email" :spellcheck="false" required>
+				<template #label>{{ i18n.ts.emailAddress }}</template>
+				<template #caption>{{ i18n.ts._forgotPassword.enterEmail }}</template>
+			</MkInput>
+
+			<MkButton class="_formBlock" type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ i18n.ts.send }}</MkButton>
+		</div>
+		<div class="sub">
+			<MkA to="/about" class="_link">{{ i18n.ts._forgotPassword.ifNoEmail }}</MkA>
+		</div>
+	</form>
+	<div v-else class="bafecedb">
+		{{ i18n.ts._forgotPassword.contactAdmin }}
+	</div>
+</XModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import XModalWindow from '@/components/MkModalWindow.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/form/input.vue';
+import * as os from '@/os';
+import { instance } from '@/instance';
+import { i18n } from '@/i18n';
+
+const emit = defineEmits<{
+	(ev: 'done'): void;
+	(ev: 'closed'): void;
+}>();
+
+let dialog: InstanceType<typeof XModalWindow> = $ref();
+
+let username = $ref('');
+let email = $ref('');
+let processing = $ref(false);
+
+async function onSubmit() {
+	processing = true;
+	await os.apiWithDialog('request-reset-password', {
+		username,
+		email,
+	});
+	emit('done');
+	dialog.close();
+}
+</script>
+
+<style lang="scss" scoped>
+.bafeceda {
+	> .main {
+		padding: 24px;
+	}
+
+	> .sub {
+		border-top: solid 0.5px var(--divider);
+		padding: 24px;
+	}
+}
+
+.bafecedb {
+	padding: 24px;
+}
+</style>
diff --git a/packages/frontend/src/components/MkFormDialog.vue b/packages/frontend/src/components/MkFormDialog.vue
new file mode 100644
index 0000000000..b2bf76a8c7
--- /dev/null
+++ b/packages/frontend/src/components/MkFormDialog.vue
@@ -0,0 +1,127 @@
+<template>
+<XModalWindow
+	ref="dialog"
+	:width="450"
+	:can-close="false"
+	:with-ok-button="true"
+	:ok-button-disabled="false"
+	@click="cancel()"
+	@ok="ok()"
+	@close="cancel()"
+	@closed="$emit('closed')"
+>
+	<template #header>
+		{{ title }}
+	</template>
+
+	<MkSpacer :margin-min="20" :margin-max="32">
+		<div class="xkpnjxcv _formRoot">
+			<template v-for="item in Object.keys(form).filter(item => !form[item].hidden)">
+				<FormInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+				</FormInput>
+				<FormInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+				</FormInput>
+				<FormTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+				</FormTextarea>
+				<FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]" class="_formBlock">
+					<span v-text="form[item].label || item"></span>
+					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+				</FormSwitch>
+				<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option>
+				</FormSelect>
+				<FormRadios v-else-if="form[item].type === 'radio'" v-model="values[item]" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option>
+				</FormRadios>
+				<FormRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].min" :max="form[item].max" :step="form[item].step" :text-converter="form[item].textConverter" class="_formBlock">
+					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
+					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
+				</FormRange>
+				<MkButton v-else-if="form[item].type === 'button'" class="_formBlock" @click="form[item].action($event, values)">
+					<span v-text="form[item].content || item"></span>
+				</MkButton>
+			</template>
+		</div>
+	</MkSpacer>
+</XModalWindow>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import FormInput from './form/input.vue';
+import FormTextarea from './form/textarea.vue';
+import FormSwitch from './form/switch.vue';
+import FormSelect from './form/select.vue';
+import FormRange from './form/range.vue';
+import MkButton from './MkButton.vue';
+import FormRadios from './form/radios.vue';
+import XModalWindow from '@/components/MkModalWindow.vue';
+
+export default defineComponent({
+	components: {
+		XModalWindow,
+		FormInput,
+		FormTextarea,
+		FormSwitch,
+		FormSelect,
+		FormRange,
+		MkButton,
+		FormRadios,
+	},
+
+	props: {
+		title: {
+			type: String,
+			required: true,
+		},
+		form: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	emits: ['done'],
+
+	data() {
+		return {
+			values: {},
+		};
+	},
+
+	created() {
+		for (const item in this.form) {
+			this.values[item] = this.form[item].default ?? null;
+		}
+	},
+
+	methods: {
+		ok() {
+			this.$emit('done', {
+				result: this.values,
+			});
+			this.$refs.dialog.close();
+		},
+
+		cancel() {
+			this.$emit('done', {
+				canceled: true,
+			});
+			this.$refs.dialog.close();
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.xkpnjxcv {
+
+}
+</style>
diff --git a/packages/frontend/src/components/MkFormula.vue b/packages/frontend/src/components/MkFormula.vue
new file mode 100644
index 0000000000..65a2fee930
--- /dev/null
+++ b/packages/frontend/src/components/MkFormula.vue
@@ -0,0 +1,24 @@
+<template>
+<XFormula :formula="formula" :block="block"/>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		XFormula: defineAsyncComponent(() => import('@/components/MkFormulaCore.vue')),
+	},
+	props: {
+		formula: {
+			type: String,
+			required: true,
+		},
+		block: {
+			type: Boolean,
+			required: true,
+		},
+	},
+});
+</script>
diff --git a/packages/frontend/src/components/MkFormulaCore.vue b/packages/frontend/src/components/MkFormulaCore.vue
new file mode 100644
index 0000000000..6028db9e64
--- /dev/null
+++ b/packages/frontend/src/components/MkFormulaCore.vue
@@ -0,0 +1,34 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+<div v-if="block" v-html="compiledFormula"></div>
+<span v-else v-html="compiledFormula"></span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import katex from 'katex';
+
+export default defineComponent({
+	props: {
+		formula: {
+			type: String,
+			required: true,
+		},
+		block: {
+			type: Boolean,
+			required: true,
+		},
+	},
+	computed: {
+		compiledFormula(): any {
+			return katex.renderToString(this.formula, {
+				throwOnError: false,
+			} as any);
+		},
+	},
+});
+</script>
+
+<style>
+@import "../../node_modules/katex/dist/katex.min.css";
+</style>
diff --git a/packages/frontend/src/components/MkGalleryPostPreview.vue b/packages/frontend/src/components/MkGalleryPostPreview.vue
new file mode 100644
index 0000000000..a133f6431b
--- /dev/null
+++ b/packages/frontend/src/components/MkGalleryPostPreview.vue
@@ -0,0 +1,115 @@
+<template>
+<MkA :to="`/gallery/${post.id}`" class="ttasepnz _panel" tabindex="-1">
+	<div class="thumbnail">
+		<ImgWithBlurhash class="img" :src="post.files[0].thumbnailUrl" :hash="post.files[0].blurhash"/>
+	</div>
+	<article>
+		<header>
+			<MkAvatar :user="post.user" class="avatar"/>
+		</header>
+		<footer>
+			<span class="title">{{ post.title }}</span>
+		</footer>
+	</article>
+</MkA>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import { userName } from '@/filters/user';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import * as os from '@/os';
+
+const props = defineProps<{
+	post: any;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.ttasepnz {
+	display: block;
+	position: relative;
+	height: 200px;
+
+	&:hover {
+		text-decoration: none;
+		color: var(--accent);
+
+		> .thumbnail {
+			transform: scale(1.1);
+		}
+
+		> article {
+			> footer {
+				&:before {
+					opacity: 1;
+				}
+			}
+		}
+	}
+
+	> .thumbnail {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		transition: all 0.5s ease;
+
+		> .img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+	}
+
+	> article {
+		position: absolute;
+		z-index: 1;
+		width: 100%;
+		height: 100%;
+
+		> header {
+			position: absolute;
+			top: 0;
+			width: 100%;
+			padding: 12px;
+			box-sizing: border-box;
+			display: flex;
+
+			> .avatar {
+				margin-left: auto;
+				width: 32px;
+				height: 32px;
+			}
+		}
+
+		> footer {
+			position: absolute;
+			bottom: 0;
+			width: 100%;
+			padding: 16px;
+			box-sizing: border-box;
+			color: #fff;
+			text-shadow: 0 0 8px #000;
+			background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+
+			&:before {
+				content: "";
+				display: block;
+				position: absolute;
+				z-index: -1;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				background: linear-gradient(rgba(0, 0, 0, 0.4), transparent);
+				opacity: 0;
+				transition: opacity 0.5s ease;
+			}
+
+			> .title {
+				font-weight: bold;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkGoogle.vue b/packages/frontend/src/components/MkGoogle.vue
new file mode 100644
index 0000000000..d104cd4cd4
--- /dev/null
+++ b/packages/frontend/src/components/MkGoogle.vue
@@ -0,0 +1,51 @@
+<template>
+<div class="mk-google">
+	<input v-model="query" type="search" :placeholder="q">
+	<button @click="search"><i class="ti ti-search"></i> {{ $ts.searchByGoogle }}</button>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const props = defineProps<{
+	q: string;
+}>();
+
+const query = ref(props.q);
+
+const search = () => {
+	window.open(`https://www.google.com/search?q=${query.value}`, '_blank');
+};
+</script>
+
+<style lang="scss" scoped>
+.mk-google {
+	display: flex;
+	margin: 8px 0;
+
+	> input {
+		flex-shrink: 1;
+		padding: 10px;
+		width: 100%;
+		height: 40px;
+		font-size: 16px;
+		border: solid 1px var(--divider);
+		border-radius: 4px 0 0 4px;
+		-webkit-appearance: textfield;
+	}
+
+	> button {
+		flex-shrink: 0;
+		margin: 0;
+		padding: 0 16px;
+		border: solid 1px var(--divider);
+		border-left: none;
+		border-radius: 0 4px 4px 0;
+
+		&:active {
+			box-shadow: 0 2px 4px rgba(#000, 0.15) inset;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkImageViewer.vue b/packages/frontend/src/components/MkImageViewer.vue
new file mode 100644
index 0000000000..f074b1a2f2
--- /dev/null
+++ b/packages/frontend/src/components/MkImageViewer.vue
@@ -0,0 +1,77 @@
+<template>
+<MkModal ref="modal" :z-priority="'middle'" @click="modal.close()" @closed="emit('closed')">
+	<div class="xubzgfga">
+		<header>{{ image.name }}</header>
+		<img :src="image.url" :alt="image.comment" :title="image.comment" @click="modal.close()"/>
+		<footer>
+			<span>{{ image.type }}</span>
+			<span>{{ bytes(image.size) }}</span>
+			<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
+		</footer>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as misskey from 'misskey-js';
+import bytes from '@/filters/bytes';
+import number from '@/filters/number';
+import MkModal from '@/components/MkModal.vue';
+
+const props = withDefaults(defineProps<{
+	image: misskey.entities.DriveFile;
+}>(), {
+});
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const modal = $ref<InstanceType<typeof MkModal>>();
+</script>
+
+<style lang="scss" scoped>
+.xubzgfga {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	> header,
+	> footer {
+		align-self: center;
+		display: inline-block;
+		padding: 6px 9px;
+		font-size: 90%;
+		background: rgba(0, 0, 0, 0.5);
+		border-radius: 6px;
+		color: #fff;
+	}
+
+	> header {
+		margin-bottom: 8px;
+		opacity: 0.9;
+	}
+
+	> img {
+		display: block;
+		flex: 1;
+		min-height: 0;
+		object-fit: contain;
+		width: 100%;
+		cursor: zoom-out;
+		image-orientation: from-image;
+	}
+
+	> footer {
+		margin-top: 8px;
+		opacity: 0.8;
+
+		> span + span {
+			margin-left: 0.5em;
+			padding-left: 0.5em;
+			border-left: solid 1px rgba(255, 255, 255, 0.5);
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue
new file mode 100644
index 0000000000..80d7c201a4
--- /dev/null
+++ b/packages/frontend/src/components/MkImgWithBlurhash.vue
@@ -0,0 +1,76 @@
+<template>
+<div class="xubzgfgb" :class="{ cover }" :title="title">
+	<canvas v-if="!loaded" ref="canvas" :width="size" :height="size" :title="title"/>
+	<img v-if="src" :src="src" :title="title" :alt="alt" @load="onLoad"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import { decode } from 'blurhash';
+
+const props = withDefaults(defineProps<{
+	src?: string | null;
+	hash?: string;
+	alt?: string;
+	title?: string | null;
+	size?: number;
+	cover?: boolean;
+}>(), {
+	src: null,
+	alt: '',
+	title: null,
+	size: 64,
+	cover: true,
+});
+
+const canvas = $ref<HTMLCanvasElement>();
+let loaded = $ref(false);
+
+function draw() {
+	if (props.hash == null) return;
+	const pixels = decode(props.hash, props.size, props.size);
+	const ctx = canvas.getContext('2d');
+	const imageData = ctx!.createImageData(props.size, props.size);
+	imageData.data.set(pixels);
+	ctx!.putImageData(imageData, 0, 0);
+}
+
+function onLoad() {
+	loaded = true;
+}
+
+onMounted(() => {
+	draw();
+});
+</script>
+
+<style lang="scss" scoped>
+.xubzgfgb {
+	position: relative;
+	width: 100%;
+	height: 100%;
+
+	> canvas,
+	> img {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+	> canvas {
+		position: absolute;
+		object-fit: cover;
+	}
+
+	> img {
+		object-fit: contain;
+	}
+
+	&.cover {
+		> img {
+			object-fit: cover;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkInfo.vue b/packages/frontend/src/components/MkInfo.vue
new file mode 100644
index 0000000000..7aaf2c5bcb
--- /dev/null
+++ b/packages/frontend/src/components/MkInfo.vue
@@ -0,0 +1,34 @@
+<template>
+<div class="fpezltsf" :class="{ warn }">
+	<i v-if="warn" class="ti ti-alert-triangle"></i>
+	<i v-else class="ti ti-info-circle"></i>
+	<slot></slot>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+
+const props = defineProps<{
+	warn?: boolean;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.fpezltsf {
+	padding: 12px 14px;
+	font-size: 90%;
+	background: var(--infoBg);
+	color: var(--infoFg);
+	border-radius: var(--radius);
+
+	&.warn {
+		background: var(--infoWarnBg);
+		color: var(--infoWarnFg);
+	}
+
+	> i {
+		margin-right: 4px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkInstanceCardMini.vue b/packages/frontend/src/components/MkInstanceCardMini.vue
new file mode 100644
index 0000000000..4625de40af
--- /dev/null
+++ b/packages/frontend/src/components/MkInstanceCardMini.vue
@@ -0,0 +1,105 @@
+<template>
+<div :class="[$style.root, { yellow: instance.isNotResponding, red: instance.isBlocked, gray: instance.isSuspended }]">
+	<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
+	<div class="body">
+		<span class="host">{{ instance.name ?? instance.host }}</span>
+		<span class="sub _monospace"><b>{{ instance.host }}</b> / {{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</span>
+	</div>
+	<MkMiniChart v-if="chartValues" class="chart" :src="chartValues"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import * as misskey from 'misskey-js';
+import MkMiniChart from '@/components/MkMiniChart.vue';
+import * as os from '@/os';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+
+const props = defineProps<{
+	instance: misskey.entities.Instance;
+}>();
+
+let chartValues = $ref<number[] | null>(null);
+
+os.apiGet('charts/instance', { host: props.instance.host, limit: 16 + 1, span: 'day' }).then(res => {
+	// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
+	res.requests.received.splice(0, 1);
+	chartValues = res.requests.received;
+});
+
+function getInstanceIcon(instance): string {
+	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+}
+</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: 10px;
+	}
+
+	> :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) {
+			display: block;
+			width: 100%;
+			font-size: 80%;
+			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/frontend/src/components/MkInstanceStats.vue b/packages/frontend/src/components/MkInstanceStats.vue
new file mode 100644
index 0000000000..41f6f9ffd5
--- /dev/null
+++ b/packages/frontend/src/components/MkInstanceStats.vue
@@ -0,0 +1,255 @@
+<template>
+<div :class="$style.root">
+	<MkFolder class="item">
+		<template #header>Chart</template>
+		<div :class="$style.chart">
+			<div class="selects">
+				<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
+					<optgroup :label="i18n.ts.federation">
+						<option value="federation">{{ i18n.ts._charts.federation }}</option>
+						<option value="ap-request">{{ i18n.ts._charts.apRequest }}</option>
+					</optgroup>
+					<optgroup :label="i18n.ts.users">
+						<option value="users">{{ i18n.ts._charts.usersIncDec }}</option>
+						<option value="users-total">{{ i18n.ts._charts.usersTotal }}</option>
+						<option value="active-users">{{ i18n.ts._charts.activeUsers }}</option>
+					</optgroup>
+					<optgroup :label="i18n.ts.notes">
+						<option value="notes">{{ i18n.ts._charts.notesIncDec }}</option>
+						<option value="local-notes">{{ i18n.ts._charts.localNotesIncDec }}</option>
+						<option value="remote-notes">{{ i18n.ts._charts.remoteNotesIncDec }}</option>
+						<option value="notes-total">{{ i18n.ts._charts.notesTotal }}</option>
+					</optgroup>
+					<optgroup :label="i18n.ts.drive">
+						<option value="drive-files">{{ i18n.ts._charts.filesIncDec }}</option>
+						<option value="drive">{{ i18n.ts._charts.storageUsageIncDec }}</option>
+					</optgroup>
+				</MkSelect>
+				<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px;">
+					<option value="hour">{{ i18n.ts.perHour }}</option>
+					<option value="day">{{ i18n.ts.perDay }}</option>
+				</MkSelect>
+			</div>
+			<div class="chart _panel">
+				<MkChart :src="chartSrc" :span="chartSpan" :limit="chartLimit" :detailed="detailed"></MkChart>
+			</div>
+		</div>
+	</MkFolder>
+
+	<MkFolder class="item">
+		<template #header>Active users heatmap</template>
+		<div class="_panel" :class="$style.heatmap">
+			<MkActiveUsersHeatmap/>
+		</div>
+	</MkFolder>
+
+	<MkFolder class="item">
+		<template #header>Federation</template>
+		<div :class="$style.federation">
+			<div class="pies">
+				<div class="sub">
+					<div class="title">Sub</div>
+					<canvas ref="subDoughnutEl"></canvas>
+				</div>
+				<div class="pub">
+					<div class="title">Pub</div>
+					<canvas ref="pubDoughnutEl"></canvas>
+				</div>
+			</div>
+		</div>
+	</MkFolder>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import {
+	Chart,
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+	DoughnutController,
+} from 'chart.js';
+import MkSelect from '@/components/form/select.vue';
+import MkChart from '@/components/MkChart.vue';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import MkActiveUsersHeatmap from '@/components/MkActiveUsersHeatmap.vue';
+import MkFolder from '@/components/MkFolder.vue';
+
+Chart.register(
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	DoughnutController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+);
+
+const props = withDefaults(defineProps<{
+	chartLimit?: number;
+	detailed?: boolean;
+}>(), {
+	chartLimit: 90,
+});
+
+const chartSpan = $ref<'hour' | 'day'>('hour');
+const chartSrc = $ref('active-users');
+let subDoughnutEl = $ref<HTMLCanvasElement>();
+let pubDoughnutEl = $ref<HTMLCanvasElement>();
+
+const { handler: externalTooltipHandler1 } = useChartTooltip({
+	position: 'middle',
+});
+const { handler: externalTooltipHandler2 } = useChartTooltip({
+	position: 'middle',
+});
+
+function createDoughnut(chartEl, tooltip, data) {
+	const chartInstance = new Chart(chartEl, {
+		type: 'doughnut',
+		data: {
+			labels: data.map(x => x.name),
+			datasets: [{
+				backgroundColor: data.map(x => x.color),
+				borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
+				borderWidth: 2,
+				hoverOffset: 0,
+				data: data.map(x => x.value),
+			}],
+		},
+		options: {
+			maintainAspectRatio: false,
+			layout: {
+				padding: {
+					left: 16,
+					right: 16,
+					top: 16,
+					bottom: 16,
+				},
+			},
+			onClick: (ev) => {
+				const hit = chartInstance.getElementsAtEventForMode(ev, 'nearest', { intersect: true }, false)[0];
+				if (hit && data[hit.index].onClick) {
+					data[hit.index].onClick();
+				}
+			},
+			plugins: {
+				legend: {
+					display: false,
+				},
+				tooltip: {
+					enabled: false,
+					mode: 'index',
+					animation: {
+						duration: 0,
+					},
+					external: tooltip,
+				},
+			},
+		},
+	});
+
+	return chartInstance;
+}
+
+onMounted(() => {
+	os.apiGet('federation/stats', { limit: 30 }).then(fedStats => {
+		createDoughnut(subDoughnutEl, externalTooltipHandler1, fedStats.topSubInstances.map(x => ({
+			name: x.host,
+			color: x.themeColor,
+			value: x.followersCount,
+			onClick: () => {
+				os.pageWindow(`/instance-info/${x.host}`);
+			},
+		})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowersCount }]));
+
+		createDoughnut(pubDoughnutEl, externalTooltipHandler2, fedStats.topPubInstances.map(x => ({
+			name: x.host,
+			color: x.themeColor,
+			value: x.followingCount,
+			onClick: () => {
+				os.pageWindow(`/instance-info/${x.host}`);
+			},
+		})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowingCount }]));
+	});
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	&:global {
+		> .item {
+			margin-bottom: 16px;
+		}
+	}
+}
+
+.chart {
+	&:global {
+		> .selects {
+			display: flex;
+			margin-bottom: 12px;
+		}
+
+		> .chart {
+			padding: 16px;
+		}
+	}
+}
+
+.heatmap {
+	padding: 16px;
+	margin-bottom: 16px;
+}
+
+.federation {
+	&:global {
+		> .pies {
+			display: flex;
+			gap: 16px;
+
+			> .sub, > .pub {
+				flex: 1;
+				min-width: 0;
+				position: relative;
+				background: var(--panel);
+				border-radius: var(--radius);
+				padding: 24px;
+				max-height: 300px;
+
+				> .title {
+					position: absolute;
+					top: 24px;
+					left: 24px;
+				}
+			}
+
+			@media (max-width: 600px) {
+				flex-direction: column;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkInstanceTicker.vue b/packages/frontend/src/components/MkInstanceTicker.vue
new file mode 100644
index 0000000000..646172fe8d
--- /dev/null
+++ b/packages/frontend/src/components/MkInstanceTicker.vue
@@ -0,0 +1,80 @@
+<template>
+<div :class="$style.root" :style="bg">
+	<img v-if="faviconUrl" :class="$style.icon" :src="faviconUrl"/>
+	<div :class="$style.name">{{ instance.name }}</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import { instanceName } from '@/config';
+import { instance as Instance } from '@/instance';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+
+const props = defineProps<{
+	instance?: {
+		faviconUrl?: string
+		name: string
+		themeColor?: string
+	}
+}>();
+
+// if no instance data is given, this is for the local instance
+const instance = props.instance ?? {
+	name: instanceName,
+	themeColor: (document.querySelector('meta[name="theme-color-orig"]') as HTMLMetaElement).content,
+};
+
+const faviconUrl = $computed(() => props.instance ? getProxiedImageUrlNullable(props.instance.faviconUrl, 'preview') : getProxiedImageUrlNullable(Instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(Instance.faviconUrl, 'preview') ?? '/favicon.ico');
+
+const themeColor = instance.themeColor ?? '#777777';
+
+const bg = {
+	background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`,
+};
+</script>
+
+<style lang="scss" module>
+$height: 2ex;
+
+.root {
+	display: flex;
+	align-items: center;
+	height: $height;
+	border-radius: 4px 0 0 4px;
+	overflow: clip;
+	color: #fff;
+	text-shadow: /* .866 ≈ sin(60deg) */
+		1px 0 1px #000,
+		.866px .5px 1px #000,
+		.5px .866px 1px #000,
+		0 1px 1px #000,
+		-.5px .866px 1px #000,
+		-.866px .5px 1px #000,
+		-1px 0 1px #000,
+		-.866px -.5px 1px #000,
+		-.5px -.866px 1px #000,
+		0 -1px 1px #000,
+		.5px -.866px 1px #000,
+		.866px -.5px 1px #000;
+	mask-image: linear-gradient(90deg,
+		rgb(0,0,0),
+		rgb(0,0,0) calc(100% - 16px),
+		rgba(0,0,0,0) 100%
+	);
+}
+
+.icon {
+	height: $height;
+	flex-shrink: 0;
+}
+
+.name {
+	margin-left: 4px;
+	line-height: 1;
+	font-size: 0.9em;
+	font-weight: bold;
+	white-space: nowrap;
+	overflow: visible;
+}
+</style>
diff --git a/packages/frontend/src/components/MkKeyValue.vue b/packages/frontend/src/components/MkKeyValue.vue
new file mode 100644
index 0000000000..ff69c79641
--- /dev/null
+++ b/packages/frontend/src/components/MkKeyValue.vue
@@ -0,0 +1,58 @@
+<template>
+<div class="alqyeyti" :class="{ oneline }">
+	<div class="key">
+		<slot name="key"></slot>
+	</div>
+	<div class="value">
+		<slot name="value"></slot>
+		<button v-if="copy" v-tooltip="i18n.ts.copy" class="_textButton" style="margin-left: 0.5em;" @click="copy_"><i class="ti ti-copy"></i></button>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+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 {
+		font-size: 0.85em;
+		padding: 0 0 0.25em 0;
+		opacity: 0.75;
+	}
+
+	&.oneline {
+		display: flex;
+
+		> .key {
+			width: 30%;
+			font-size: 1em;
+			padding: 0 8px 0 0;
+		}
+
+		> .value {
+			width: 70%;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue
new file mode 100644
index 0000000000..1ccc648c72
--- /dev/null
+++ b/packages/frontend/src/components/MkLaunchPad.vue
@@ -0,0 +1,138 @@
+<template>
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="preferedModalType" :anchor="anchor" :transparent-bg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
+	<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
+		<div class="main">
+			<template v-for="item in items">
+				<button v-if="item.action" v-click-anime class="_button" @click="$event => { item.action($event); close(); }">
+					<i class="icon" :class="item.icon"></i>
+					<div class="text">{{ item.text }}</div>
+					<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
+				</button>
+				<MkA v-else v-click-anime :to="item.to" @click.passive="close()">
+					<i class="icon" :class="item.icon"></i>
+					<div class="text">{{ item.text }}</div>
+					<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
+				</MkA>
+			</template>
+		</div>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkModal from '@/components/MkModal.vue';
+import { navbarItemDef } from '@/navbar';
+import { instanceName } from '@/config';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+import { deviceKind } from '@/scripts/device-kind';
+import * as os from '@/os';
+
+const props = withDefaults(defineProps<{
+	src?: HTMLElement;
+	anchor?: { x: string; y: string; };
+}>(), {
+	anchor: () => ({ x: 'right', y: 'center' }),
+});
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const preferedModalType = (deviceKind === 'desktop' && props.src != null) ? 'popup' :
+	deviceKind === 'smartphone' ? 'drawer' :
+	'dialog';
+
+const modal = $ref<InstanceType<typeof MkModal>>();
+
+const menu = defaultStore.state.menu;
+
+const items = Object.keys(navbarItemDef).filter(k => !menu.includes(k)).map(k => navbarItemDef[k]).filter(def => def.show == null ? true : def.show).map(def => ({
+	type: def.to ? 'link' : 'button',
+	text: i18n.ts[def.title],
+	icon: def.icon,
+	to: def.to,
+	action: def.action,
+	indicate: def.indicated,
+}));
+
+function close() {
+	modal.close();
+}
+</script>
+
+<style lang="scss" scoped>
+.szkkfdyq {
+	max-height: 100%;
+	width: min(460px, 100vw);
+	padding: 24px;
+	box-sizing: border-box;
+	overflow: auto;
+	overscroll-behavior: contain;
+	text-align: left;
+	border-radius: 16px;
+
+	&.asDrawer {
+		width: 100%;
+		padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
+		border-radius: 24px;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+		text-align: center;
+	}
+
+	> .main, > .sub {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+
+		> * {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			vertical-align: bottom;
+			height: 100px;
+			border-radius: 10px;
+
+			&:hover {
+				color: var(--accent);
+				background: var(--accentedBg);
+				text-decoration: none;
+			}
+
+			> .icon {
+				font-size: 24px;
+				height: 24px;
+			}
+
+			> .text {
+				margin-top: 12px;
+				font-size: 0.8em;
+				line-height: 1.5em;
+			}
+
+			> .indicator {
+				position: absolute;
+				top: 32px;
+				left: 32px;
+				color: var(--indicator);
+				font-size: 8px;
+				animation: blink 1s infinite;
+
+				@media (max-width: 500px) {
+					top: 16px;
+					left: 16px;
+				}
+			}
+		}
+	}
+
+	> .sub {
+		margin-top: 8px;
+		padding-top: 8px;
+		border-top: solid 0.5px var(--divider);
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkLink.vue b/packages/frontend/src/components/MkLink.vue
new file mode 100644
index 0000000000..6148ec6195
--- /dev/null
+++ b/packages/frontend/src/components/MkLink.vue
@@ -0,0 +1,47 @@
+<template>
+<component
+	:is="self ? 'MkA' : 'a'" ref="el" class="xlcxczvw _link" :[attr]="self ? url.substr(local.length) : url" :rel="rel" :target="target"
+	:title="url"
+>
+	<slot></slot>
+	<i v-if="target === '_blank'" class="ti ti-external-link icon"></i>
+</component>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue';
+import { url as local } from '@/config';
+import { useTooltip } from '@/scripts/use-tooltip';
+import * as os from '@/os';
+
+const props = withDefaults(defineProps<{
+	url: string;
+	rel?: null | string;
+}>(), {
+});
+
+const self = props.url.startsWith(local);
+const attr = self ? 'to' : 'href';
+const target = self ? null : '_blank';
+
+const el = $ref();
+
+useTooltip($$(el), (showing) => {
+	os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
+		showing,
+		url: props.url,
+		source: el,
+	}, {}, 'closed');
+});
+</script>
+
+<style lang="scss" scoped>
+.xlcxczvw {
+	word-break: break-all;
+
+	> .icon {
+		padding-left: 2px;
+		font-size: .9em;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkMarquee.vue b/packages/frontend/src/components/MkMarquee.vue
new file mode 100644
index 0000000000..5ca04b0b48
--- /dev/null
+++ b/packages/frontend/src/components/MkMarquee.vue
@@ -0,0 +1,106 @@
+<script lang="ts">
+import { h, onMounted, onUnmounted, ref, watch } from 'vue';
+
+export default {
+	name: 'MarqueeText',
+	props: {
+		duration: {
+			type: Number,
+			default: 15,
+		},
+		repeat: {
+			type: Number,
+			default: 2,
+		},
+		paused: {
+			type: Boolean,
+			default: false,
+		},
+		reverse: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props) {
+		const contentEl = ref();
+
+		function calc() {
+			const eachLength = contentEl.value.offsetWidth / props.repeat;
+			const factor = 3000;
+			const duration = props.duration / ((1 / eachLength) * factor);
+
+			contentEl.value.style.animationDuration = `${duration}s`;
+		}
+
+		watch(() => props.duration, calc);
+
+		onMounted(() => {
+			calc();
+		});
+
+		onUnmounted(() => {
+		});
+
+		return {
+			contentEl,
+		};
+	},
+	render({
+		$slots, $style, $props: {
+			duration, repeat, paused, reverse,
+		},
+	}) {
+		return h('div', { class: [$style.wrap] }, [
+			h('span', {
+				ref: 'contentEl',
+				class: [
+					paused
+						? $style.paused
+						: undefined,
+					$style.content,
+				],
+			}, Array(repeat).fill(
+				h('span', {
+					class: $style.text,
+					style: {
+						animationDirection: reverse
+							? 'reverse'
+							: undefined,
+					},
+				}, $slots.default()),
+			)),
+		]);
+	},
+};
+</script>
+
+<style lang="scss" module>
+.wrap {
+	overflow: clip;
+	animation-play-state: running;
+
+	&:hover {
+		animation-play-state: paused;
+	}
+}
+.content {
+	display: inline-block;
+	white-space: nowrap;
+	animation-play-state: inherit;
+}
+.text {
+	display: inline-block;
+	animation-name: marquee;
+	animation-timing-function: linear;
+	animation-iteration-count: infinite;
+	animation-duration: inherit;
+	animation-play-state: inherit;
+}
+.paused .text {
+	animation-play-state: paused;
+}
+@keyframes marquee {
+	0% { transform:translateX(0); }
+	100% { transform:translateX(-100%); }
+}
+</style>
diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue
new file mode 100644
index 0000000000..aa06c00fc6
--- /dev/null
+++ b/packages/frontend/src/components/MkMediaBanner.vue
@@ -0,0 +1,102 @@
+<template>
+<div class="mk-media-banner">
+	<div v-if="media.isSensitive && hide" class="sensitive" @click="hide = false">
+		<span class="icon"><i class="ti ti-alert-triangle"></i></span>
+		<b>{{ $ts.sensitive }}</b>
+		<span>{{ $ts.clickToShow }}</span>
+	</div>
+	<div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio">
+		<audio
+			ref="audioEl"
+			class="audio"
+			:src="media.url"
+			:title="media.name"
+			controls
+			preload="metadata"
+			@volumechange="volumechange"
+		/>
+	</div>
+	<a
+		v-else class="download"
+		:href="media.url"
+		:title="media.name"
+		:download="media.name"
+	>
+		<span class="icon"><i class="ti ti-download"></i></span>
+		<b>{{ media.name }}</b>
+	</a>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import * as misskey from 'misskey-js';
+import { ColdDeviceStorage } from '@/store';
+
+const props = withDefaults(defineProps<{
+	media: misskey.entities.DriveFile;
+}>(), {
+});
+
+const audioEl = $ref<HTMLAudioElement | null>();
+let hide = $ref(true);
+
+function volumechange() {
+	if (audioEl) ColdDeviceStorage.set('mediaVolume', audioEl.volume);
+}
+
+onMounted(() => {
+	if (audioEl) audioEl.volume = ColdDeviceStorage.get('mediaVolume');
+});
+</script>
+
+<style lang="scss" scoped>
+.mk-media-banner {
+	width: 100%;
+	border-radius: 4px;
+	margin-top: 4px;
+	overflow: hidden;
+
+	> .download,
+	> .sensitive {
+		display: flex;
+		align-items: center;
+		font-size: 12px;
+		padding: 8px 12px;
+		white-space: nowrap;
+
+		> * {
+			display: block;
+		}
+
+		> b {
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		> *:not(:last-child) {
+			margin-right: .2em;
+		}
+
+		> .icon {
+			font-size: 1.6em;
+		}
+	}
+
+	> .download {
+		background: var(--noteAttachedFile);
+	}
+
+	> .sensitive {
+		background: #111;
+		color: #fff;
+	}
+
+	> .audio {
+		.audio {
+			display: block;
+			width: 100%;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkMediaImage.vue b/packages/frontend/src/components/MkMediaImage.vue
new file mode 100644
index 0000000000..56570eaa05
--- /dev/null
+++ b/packages/frontend/src/components/MkMediaImage.vue
@@ -0,0 +1,130 @@
+<template>
+<div v-if="hide" class="qjewsnkg" @click="hide = false">
+	<ImgWithBlurhash class="bg" :hash="image.blurhash" :title="image.comment" :alt="image.comment"/>
+	<div class="text">
+		<div class="wrapper">
+			<b style="display: block;"><i class="ti ti-alert-triangle"></i> {{ $ts.sensitive }}</b>
+			<span style="display: block;">{{ $ts.clickToShow }}</span>
+		</div>
+	</div>
+</div>
+<div v-else class="gqnyydlz">
+	<a
+		:href="image.url"
+		:title="image.name"
+	>
+		<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :title="image.comment" :cover="false"/>
+		<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
+	</a>
+	<button v-tooltip="$ts.hide" class="_button hide" @click="hide = true"><i class="ti ti-eye-off"></i></button>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { watch } from 'vue';
+import * as misskey from 'misskey-js';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import { defaultStore } from '@/store';
+
+const props = defineProps<{
+	image: misskey.entities.DriveFile;
+	raw?: boolean;
+}>();
+
+let hide = $ref(true);
+
+const url = (props.raw || defaultStore.state.loadRawImages)
+	? props.image.url
+	: defaultStore.state.disableShowingAnimatedImages
+		? getStaticImageUrl(props.image.thumbnailUrl)
+		: props.image.thumbnailUrl;
+
+// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
+watch(() => props.image, () => {
+	hide = (defaultStore.state.nsfw === 'force') ? true : props.image.isSensitive && (defaultStore.state.nsfw !== 'ignore');
+}, {
+	deep: true,
+	immediate: true,
+});
+</script>
+
+<style lang="scss" scoped>
+.qjewsnkg {
+	position: relative;
+
+	> .bg {
+		filter: brightness(0.5);
+	}
+
+	> .text {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		> .wrapper {
+			display: table-cell;
+			text-align: center;
+			font-size: 0.8em;
+			color: #fff;
+		}
+	}
+}
+
+.gqnyydlz {
+	position: relative;
+	//box-shadow: 0 0 0 1px var(--divider) inset;
+	background: var(--bg);
+
+	> .hide {
+		display: block;
+		position: absolute;
+		border-radius: 6px;
+		background-color: var(--accentedBg);
+		-webkit-backdrop-filter: var(--blur, blur(15px));
+		backdrop-filter: var(--blur, blur(15px));
+		color: var(--accent);
+		font-size: 0.8em;
+		padding: 6px 8px;
+		text-align: center;
+		top: 12px;
+		right: 12px;
+
+		> i {
+			display: block;
+		}
+	}
+
+	> a {
+		display: block;
+		cursor: zoom-in;
+		overflow: hidden;
+		width: 100%;
+		height: 100%;
+		background-position: center;
+		background-size: contain;
+		background-repeat: no-repeat;
+
+		> .gif {
+			background-color: var(--fg);
+			border-radius: 6px;
+			color: var(--accentLighten);
+			display: inline-block;
+			font-size: 14px;
+			font-weight: bold;
+			left: 12px;
+			opacity: .5;
+			padding: 0 6px;
+			text-align: center;
+			top: 12px;
+			pointer-events: none;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkMediaList.vue b/packages/frontend/src/components/MkMediaList.vue
new file mode 100644
index 0000000000..c6f8612182
--- /dev/null
+++ b/packages/frontend/src/components/MkMediaList.vue
@@ -0,0 +1,189 @@
+<template>
+<div class="hoawjimk">
+	<XBanner v-for="media in mediaList.filter(media => !previewable(media))" :key="media.id" :media="media"/>
+	<div v-if="mediaList.filter(media => previewable(media)).length > 0" class="gird-container">
+		<div ref="gallery" :data-count="mediaList.filter(media => previewable(media)).length">
+			<template v-for="media in mediaList.filter(media => previewable(media))">
+				<XVideo v-if="media.type.startsWith('video')" :key="media.id" :video="media"/>
+				<XImage v-else-if="media.type.startsWith('image')" :key="media.id" class="image" :data-id="media.id" :image="media" :raw="raw"/>
+			</template>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import * as misskey from 'misskey-js';
+import PhotoSwipeLightbox from 'photoswipe/lightbox';
+import PhotoSwipe from 'photoswipe';
+import 'photoswipe/style.css';
+import XBanner from '@/components/MkMediaBanner.vue';
+import XImage from '@/components/MkMediaImage.vue';
+import XVideo from '@/components/MkMediaVideo.vue';
+import * as os from '@/os';
+import { FILE_TYPE_BROWSERSAFE } from '@/const';
+import { defaultStore } from '@/store';
+
+const props = defineProps<{
+	mediaList: misskey.entities.DriveFile[];
+	raw?: boolean;
+}>();
+
+const gallery = ref(null);
+const pswpZIndex = os.claimZIndex('middle');
+
+onMounted(() => {
+	const lightbox = new PhotoSwipeLightbox({
+		dataSource: props.mediaList
+			.filter(media => {
+				if (media.type === 'image/svg+xml') return true; // svgのwebpublicはpngなのでtrue
+				return media.type.startsWith('image') && FILE_TYPE_BROWSERSAFE.includes(media.type);
+			})
+			.map(media => {
+				const item = {
+					src: media.url,
+					w: media.properties.width,
+					h: media.properties.height,
+					alt: media.name,
+				};
+				if (media.properties.orientation != null && media.properties.orientation >= 5) {
+					[item.w, item.h] = [item.h, item.w];
+				}
+				return item;
+			}),
+		gallery: gallery.value,
+		children: '.image',
+		thumbSelector: '.image',
+		loop: false,
+		padding: window.innerWidth > 500 ? {
+			top: 32,
+			bottom: 32,
+			left: 32,
+			right: 32,
+		} : {
+			top: 0,
+			bottom: 0,
+			left: 0,
+			right: 0,
+		},
+		imageClickAction: 'close',
+		tapAction: 'toggle-controls',
+		pswpModule: PhotoSwipe,
+	});
+
+	lightbox.on('itemData', (ev) => {
+		const { itemData } = ev;
+
+		// element is children
+		const { element } = itemData;
+
+		const id = element.dataset.id;
+		const file = props.mediaList.find(media => media.id === id);
+
+		itemData.src = file.url;
+		itemData.w = Number(file.properties.width);
+		itemData.h = Number(file.properties.height);
+		if (file.properties.orientation != null && file.properties.orientation >= 5) {
+			[itemData.w, itemData.h] = [itemData.h, itemData.w];
+		}
+		itemData.msrc = file.thumbnailUrl;
+		itemData.thumbCropped = true;
+	});
+
+	lightbox.init();
+});
+
+const previewable = (file: misskey.entities.DriveFile): boolean => {
+	if (file.type === 'image/svg+xml') return true; // svgのwebpublic/thumbnailはpngなのでtrue
+	// FILE_TYPE_BROWSERSAFEに適合しないものはブラウザで表示するのに不適切
+	return (file.type.startsWith('video') || file.type.startsWith('image')) && FILE_TYPE_BROWSERSAFE.includes(file.type);
+};
+</script>
+
+<style lang="scss" scoped>
+.hoawjimk {
+	> .gird-container {
+		position: relative;
+		width: 100%;
+		margin-top: 4px;
+
+		&:before {
+			content: '';
+			display: block;
+			padding-top: 56.25% // 16:9;
+		}
+
+		> div {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			display: grid;
+			grid-gap: 8px;
+
+			> * {
+				overflow: hidden;
+				border-radius: 6px;
+			}
+
+			&[data-count="1"] {
+				grid-template-rows: 1fr;
+			}
+
+			&[data-count="2"] {
+				grid-template-columns: 1fr 1fr;
+				grid-template-rows: 1fr;
+			}
+
+			&[data-count="3"] {
+				grid-template-columns: 1fr 0.5fr;
+				grid-template-rows: 1fr 1fr;
+
+				> *:nth-child(1) {
+					grid-row: 1 / 3;
+				}
+
+				> *:nth-child(3) {
+					grid-column: 2 / 3;
+					grid-row: 2 / 3;
+				}
+			}
+
+			&[data-count="4"] {
+				grid-template-columns: 1fr 1fr;
+				grid-template-rows: 1fr 1fr;
+			}
+
+			> *:nth-child(1) {
+				grid-column: 1 / 2;
+				grid-row: 1 / 2;
+			}
+
+			> *:nth-child(2) {
+				grid-column: 2 / 3;
+				grid-row: 1 / 2;
+			}
+
+			> *:nth-child(3) {
+				grid-column: 1 / 2;
+				grid-row: 2 / 3;
+			}
+
+			> *:nth-child(4) {
+				grid-column: 2 / 3;
+				grid-row: 2 / 3;
+			}
+		}
+	}
+}
+</style>
+
+<style lang="scss">
+.pswp {
+	// なぜか機能しない
+  //z-index: v-bind(pswpZIndex);
+	z-index: 2000000;
+}
+</style>
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue
new file mode 100644
index 0000000000..df0bf84116
--- /dev/null
+++ b/packages/frontend/src/components/MkMediaVideo.vue
@@ -0,0 +1,88 @@
+<template>
+<div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false">
+	<div>
+		<b><i class="ti ti-alert-triangle"></i> {{ $ts.sensitive }}</b>
+		<span>{{ $ts.clickToShow }}</span>
+	</div>
+</div>
+<div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu">
+	<video
+		:poster="video.thumbnailUrl"
+		:title="video.comment"
+		:alt="video.comment"
+		preload="none"
+		controls
+		@contextmenu.stop
+	>
+		<source 
+			:src="video.url" 
+			:type="video.type"
+		>
+	</video>
+	<i class="ti ti-eye-off" @click="hide = true"></i>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import * as misskey from 'misskey-js';
+import { defaultStore } from '@/store';
+
+const props = defineProps<{
+	video: misskey.entities.DriveFile;
+}>();
+
+const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSensitive && (defaultStore.state.nsfw !== 'ignore'));
+</script>
+
+<style lang="scss" scoped>
+.kkjnbbplepmiyuadieoenjgutgcmtsvu {
+	position: relative;
+
+	> i {
+		display: block;
+		position: absolute;
+		border-radius: 6px;
+		background-color: var(--fg);
+		color: var(--accentLighten);
+		font-size: 14px;
+		opacity: .5;
+		padding: 3px 6px;
+		text-align: center;
+		cursor: pointer;
+		top: 12px;
+		right: 12px;
+	}
+
+	> video {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		font-size: 3.5em;
+		overflow: hidden;
+		background-position: center;
+		background-size: cover;
+		width: 100%;
+		height: 100%;
+	}
+}
+
+.icozogqfvdetwohsdglrbswgrejoxbdj {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: #111;
+	color: #fff;
+
+	> div {
+		display: table-cell;
+		text-align: center;
+		font-size: 12px;
+
+		> b {
+			display: block;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkMention.vue b/packages/frontend/src/components/MkMention.vue
new file mode 100644
index 0000000000..3091b435e4
--- /dev/null
+++ b/packages/frontend/src/components/MkMention.vue
@@ -0,0 +1,66 @@
+<template>
+<MkA v-if="url.startsWith('/')" v-user-preview="canonical" class="akbvjaqn" :class="{ isMe }" :to="url" :style="{ background: bgCss }">
+	<img class="icon" :src="`/avatar/@${username}@${host}`" alt="">
+	<span class="main">
+		<span class="username">@{{ username }}</span>
+		<span v-if="(host != localHost) || $store.state.showFullAcct" class="host">@{{ toUnicode(host) }}</span>
+	</span>
+</MkA>
+<a v-else class="akbvjaqn" :href="url" target="_blank" rel="noopener" :style="{ background: bgCss }">
+	<span class="main">
+		<span class="username">@{{ username }}</span>
+		<span class="host">@{{ toUnicode(host) }}</span>
+	</span>
+</a>
+</template>
+
+<script lang="ts" setup>
+import { toUnicode } from 'punycode';
+import { } from 'vue';
+import tinycolor from 'tinycolor2';
+import { host as localHost } from '@/config';
+import { $i } from '@/account';
+
+const props = defineProps<{
+	username: string;
+	host: string;
+}>();
+
+const canonical = props.host === localHost ? `@${props.username}` : `@${props.username}@${toUnicode(props.host)}`;
+
+const url = `/${canonical}`;
+
+const isMe = $i && (
+	`@${props.username}@${toUnicode(props.host)}` === `@${$i.username}@${toUnicode(localHost)}`.toLowerCase()
+);
+
+const bg = tinycolor(getComputedStyle(document.documentElement).getPropertyValue(isMe ? '--mentionMe' : '--mention'));
+bg.setAlpha(0.1);
+const bgCss = bg.toRgbString();
+</script>
+
+<style lang="scss" scoped>
+.akbvjaqn {
+	display: inline-block;
+	padding: 4px 8px 4px 4px;
+	border-radius: 999px;
+	color: var(--mention);
+
+	&.isMe {
+		color: var(--mentionMe);
+	}
+
+	> .icon {
+		width: 1.5em;
+		height: 1.5em;
+		object-fit: cover;
+		margin: 0 0.2em 0 0;
+		vertical-align: bottom;
+		border-radius: 100%;
+	}
+
+	> .main > .host {
+		opacity: 0.5;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkMenu.child.vue b/packages/frontend/src/components/MkMenu.child.vue
new file mode 100644
index 0000000000..3ada4afbdc
--- /dev/null
+++ b/packages/frontend/src/components/MkMenu.child.vue
@@ -0,0 +1,65 @@
+<template>
+<div ref="el" class="sfhdhdhr">
+	<MkMenu ref="menu" :items="items" :align="align" :width="width" :as-drawer="false" @close="onChildClosed"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { on } from 'events';
+import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue';
+import MkMenu from './MkMenu.vue';
+import { MenuItem } from '@/types/menu';
+import * as os from '@/os';
+
+const props = defineProps<{
+	items: MenuItem[];
+	targetElement: HTMLElement;
+	rootElement: HTMLElement;
+	width?: number;
+	viaKeyboard?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+	(ev: 'actioned'): void;
+}>();
+
+const el = ref<HTMLElement>();
+const align = 'left';
+
+function setPosition() {
+	const rootRect = props.rootElement.getBoundingClientRect();
+	const rect = props.targetElement.getBoundingClientRect();
+	const left = props.targetElement.offsetWidth;
+	const top = (rect.top - rootRect.top) - 8;
+	el.value.style.left = left + 'px';
+	el.value.style.top = top + 'px';
+}
+
+function onChildClosed(actioned?: boolean) {
+	if (actioned) {
+		emit('actioned');
+	} else {
+		emit('closed');
+	}
+}
+
+onMounted(() => {
+	setPosition();
+	nextTick(() => {
+		setPosition();
+	});
+});
+
+defineExpose({
+	checkHit: (ev: MouseEvent) => {
+		return (ev.target === el.value || el.value.contains(ev.target));
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.sfhdhdhr {
+	position: absolute;
+}
+</style>
diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
new file mode 100644
index 0000000000..64d18b6b7c
--- /dev/null
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -0,0 +1,367 @@
+<template>
+<div>
+	<div
+		ref="itemsEl" v-hotkey="keymap"
+		class="rrevdjwt _popup _shadow"
+		:class="{ center: align === 'center', asDrawer }"
+		:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
+		@contextmenu.self="e => e.preventDefault()"
+	>
+		<template v-for="(item, i) in items2">
+			<div v-if="item === null" class="divider"></div>
+			<span v-else-if="item.type === 'label'" class="label item">
+				<span>{{ item.text }}</span>
+			</span>
+			<span v-else-if="item.type === 'pending'" :tabindex="i" class="pending item">
+				<span><MkEllipsis/></span>
+			</span>
+			<MkA v-else-if="item.type === 'link'" :to="item.to" :tabindex="i" class="_button item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
+				<i v-if="item.icon" class="ti-fw" :class="item.icon"></i>
+				<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
+				<span>{{ item.text }}</span>
+				<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
+			</MkA>
+			<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button item" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
+				<i v-if="item.icon" class="ti-fw" :class="item.icon"></i>
+				<span>{{ item.text }}</span>
+				<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
+			</a>
+			<button v-else-if="item.type === 'user'" :tabindex="i" class="_button item" :class="{ active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
+				<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
+				<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
+			</button>
+			<span v-else-if="item.type === 'switch'" :tabindex="i" class="item" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
+				<FormSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch">{{ item.text }}</FormSwitch>
+			</span>
+			<button v-else-if="item.type === 'parent'" :tabindex="i" class="_button item parent" :class="{ childShowing: childShowingItem === item }" @mouseenter="showChildren(item, $event)">
+				<i v-if="item.icon" class="ti-fw" :class="item.icon"></i>
+				<span>{{ item.text }}</span>
+				<span class="caret"><i class="ti ti-caret-right ti-fw"></i></span>
+			</button>
+			<button v-else :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
+				<i v-if="item.icon" class="ti-fw" :class="item.icon"></i>
+				<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
+				<span>{{ item.text }}</span>
+				<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
+			</button>
+		</template>
+		<span v-if="items2.length === 0" class="none item">
+			<span>{{ i18n.ts.none }}</span>
+		</span>
+	</div>
+	<div v-if="childMenu" class="child">
+		<XChild ref="child" :items="childMenu" :target-element="childTarget" :root-element="itemsEl" showing @actioned="childActioned"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
+import { focusPrev, focusNext } from '@/scripts/focus';
+import FormSwitch from '@/components/form/switch.vue';
+import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const XChild = defineAsyncComponent(() => import('./MkMenu.child.vue'));
+
+const props = defineProps<{
+	items: MenuItem[];
+	viaKeyboard?: boolean;
+	asDrawer?: boolean;
+	align?: 'center' | string;
+	width?: number;
+	maxHeight?: number;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'close', actioned?: boolean): void;
+}>();
+
+let itemsEl = $ref<HTMLDivElement>();
+
+let items2: InnerMenuItem[] = $ref([]);
+
+let child = $ref<InstanceType<typeof XChild>>();
+
+let keymap = $computed(() => ({
+	'up|k|shift+tab': focusUp,
+	'down|j|tab': focusDown,
+	'esc': close,
+}));
+
+let childShowingItem = $ref<MenuItem | null>();
+
+watch(() => props.items, () => {
+	const items: (MenuItem | MenuPending)[] = [...props.items].filter(item => item !== undefined);
+
+	for (let i = 0; i < items.length; i++) {
+		const item = items[i];
+
+		if (item && 'then' in item) { // if item is Promise
+			items[i] = { type: 'pending' };
+			item.then(actualItem => {
+				items2[i] = actualItem;
+			});
+		}
+	}
+
+	items2 = items as InnerMenuItem[];
+}, {
+	immediate: true,
+});
+
+let childMenu = $ref<MenuItem[] | null>();
+let childTarget = $ref<HTMLElement | null>();
+
+function closeChild() {
+	childMenu = null;
+	childShowingItem = null;
+}
+
+function childActioned() {
+	closeChild();
+	close(true);
+}
+
+function onGlobalMousedown(event: MouseEvent) {
+	if (childTarget && (event.target === childTarget || childTarget.contains(event.target))) return;
+	if (child && child.checkHit(event)) return;
+	closeChild();
+}
+
+let childCloseTimer: null | number = null;
+function onItemMouseEnter(item) {
+	childCloseTimer = window.setTimeout(() => {
+		closeChild();
+	}, 300);
+}
+function onItemMouseLeave(item) {
+	if (childCloseTimer) window.clearTimeout(childCloseTimer);
+}
+
+async function showChildren(item: MenuItem, ev: MouseEvent) {
+	if (props.asDrawer) {
+		os.popupMenu(item.children, ev.currentTarget ?? ev.target);
+		close();
+	} else {
+		childTarget = ev.currentTarget ?? ev.target;
+		childMenu = item.children;
+		childShowingItem = item;
+	}
+}
+
+function clicked(fn: MenuAction, ev: MouseEvent) {
+	fn(ev);
+	close(true);
+}
+
+function close(actioned = false) {
+	emit('close', actioned);
+}
+
+function focusUp() {
+	focusPrev(document.activeElement);
+}
+
+function focusDown() {
+	focusNext(document.activeElement);
+}
+
+onMounted(() => {
+	if (props.viaKeyboard) {
+		nextTick(() => {
+			focusNext(itemsEl.children[0], true, false);
+		});
+	}
+
+	// TODO: アクティブな要素までスクロール
+	//itemsEl.scrollTo();
+
+	document.addEventListener('mousedown', onGlobalMousedown, { passive: true });
+});
+
+onBeforeUnmount(() => {
+	document.removeEventListener('mousedown', onGlobalMousedown);
+});
+</script>
+
+<style lang="scss" scoped>
+.rrevdjwt {
+	padding: 8px 0;
+	box-sizing: border-box;
+	min-width: 200px;
+	overflow: auto;
+	overscroll-behavior: contain;
+
+	&.center {
+		> .item {
+			text-align: center;
+		}
+	}
+
+	> .item {
+		display: block;
+		position: relative;
+		padding: 6px 16px;
+		width: 100%;
+		box-sizing: border-box;
+		white-space: nowrap;
+		font-size: 0.9em;
+		line-height: 20px;
+		text-align: left;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		&:before {
+			content: "";
+			display: block;
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			margin: auto;
+			width: calc(100% - 16px);
+			height: 100%;
+			border-radius: 6px;
+		}
+
+		> * {
+			position: relative;
+		}
+
+		&:not(:disabled):hover {
+			color: var(--accent);
+			text-decoration: none;
+
+			&:before {
+				background: var(--accentedBg);
+			}
+		}
+
+		&.danger {
+			color: #ff2a2a;
+
+			&:hover {
+				color: #fff;
+
+				&:before {
+					background: #ff4242;
+				}
+			}
+
+			&:active {
+				color: #fff;
+
+				&:before {
+					background: #d42e2e;
+				}
+			}
+		}
+
+		&.active {
+			color: var(--fgOnAccent);
+			opacity: 1;
+
+			&:before {
+				background: var(--accent);
+			}
+		}
+
+		&:not(:active):focus-visible {
+			box-shadow: 0 0 0 2px var(--focus) inset;
+		}
+
+		&.label {
+			pointer-events: none;
+			font-size: 0.7em;
+			padding-bottom: 4px;
+
+			> span {
+				opacity: 0.7;
+			}
+		}
+
+		&.pending {
+			pointer-events: none;
+			opacity: 0.7;
+		}
+
+		&.none {
+			pointer-events: none;
+			opacity: 0.7;
+		}
+
+		&.parent {
+			display: flex;
+			align-items: center;
+			cursor: default;
+
+			> .caret {
+				margin-left: auto;
+			}
+
+			&.childShowing {
+				color: var(--accent);
+				text-decoration: none;
+
+				&:before {
+					background: var(--accentedBg);
+				}
+			}
+		}
+
+		> i {
+			margin-right: 5px;
+			width: 20px;
+		}
+
+		> .avatar {
+			margin-right: 5px;
+			width: 20px;
+			height: 20px;
+		}
+
+		> .indicator {
+			position: absolute;
+			top: 5px;
+			left: 13px;
+			color: var(--indicator);
+			font-size: 12px;
+			animation: blink 1s infinite;
+		}
+	}
+
+	> .divider {
+		margin: 8px 0;
+		border-top: solid 0.5px var(--divider);
+	}
+
+	&.asDrawer {
+		padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px) 0;
+		width: 100%;
+		border-radius: 24px;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+
+		> .item {
+			font-size: 1em;
+			padding: 12px 24px;
+
+			&:before {
+				width: calc(100% - 24px);
+				border-radius: 12px;
+			}
+
+			> i {
+				margin-right: 14px;
+				width: 24px;
+			}
+		}
+
+		> .divider {
+			margin: 12px 0;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkMiniChart.vue b/packages/frontend/src/components/MkMiniChart.vue
new file mode 100644
index 0000000000..c64ce163f9
--- /dev/null
+++ b/packages/frontend/src/components/MkMiniChart.vue
@@ -0,0 +1,73 @@
+<template>
+<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" style="overflow:visible">
+	<defs>
+		<linearGradient :id="gradientId" x1="0" x2="0" y1="1" y2="0">
+			<stop offset="0%" :stop-color="color" stop-opacity="0"></stop>
+			<stop offset="100%" :stop-color="color" stop-opacity="0.65"></stop>
+		</linearGradient>
+	</defs>
+	<polygon
+		:points="polygonPoints"
+		:style="`stroke: none; fill: url(#${ gradientId });`"
+	/>
+	<polyline
+		:points="polylinePoints"
+		fill="none"
+		:stroke="color"
+		stroke-width="2"
+	/>
+	<circle
+		:cx="headX"
+		:cy="headY"
+		r="3"
+		:fill="color"
+	/>
+</svg>
+</template>
+
+<script lang="ts" setup>
+import { onUnmounted, watch } from 'vue';
+import { v4 as uuid } from 'uuid';
+import tinycolor from 'tinycolor2';
+import { useInterval } from '@/scripts/use-interval';
+
+const props = defineProps<{
+	src: number[];
+}>();
+
+const viewBoxX = 50;
+const viewBoxY = 50;
+const gradientId = 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 accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent'));
+const color = accent.toRgbString();
+
+function draw(): void {
+	const stats = props.src.slice().reverse();
+	const peak = Math.max.apply(null, stats) || 1;
+
+	const _polylinePoints = stats.map((n, i) => [
+		i * (viewBoxX / (stats.length - 1)),
+		(1 - (n / peak)) * viewBoxY,
+	]);
+
+	polylinePoints = _polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+
+	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を発動させない場合があるので
+useInterval(draw, 1000, {
+	immediate: false,
+	afterMounted: true,
+});
+</script>
diff --git a/packages/frontend/src/components/MkModal.vue b/packages/frontend/src/components/MkModal.vue
new file mode 100644
index 0000000000..2305a02794
--- /dev/null
+++ b/packages/frontend/src/components/MkModal.vue
@@ -0,0 +1,406 @@
+<template>
+<transition :name="$store.state.animation ? (type === 'drawer') ? 'modal-drawer' : (type === 'popup') ? 'modal-popup' : 'modal' : ''" :duration="$store.state.animation ? 200 : 0" appear @after-leave="emit('closed')" @enter="emit('opening')" @after-enter="onOpened">
+	<div v-show="manualShowing != null ? manualShowing : showing" v-hotkey.global="keymap" class="qzhlnise" :class="{ drawer: type === 'drawer', dialog: type === 'dialog' || type === 'dialog:top', popup: type === 'popup' }" :style="{ zIndex, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }">
+		<div class="bg _modalBg" :class="{ transparent: transparentBg && (type === 'popup') }" :style="{ zIndex }" @click="onBgClick" @contextmenu.prevent.stop="() => {}"></div>
+		<div ref="content" class="content" :class="{ fixed, top: type === 'dialog:top' }" :style="{ zIndex }" @click.self="onBgClick">
+			<slot :max-height="maxHeight" :type="type"></slot>
+		</div>
+	</div>
+</transition>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, watch, provide } from 'vue';
+import * as os from '@/os';
+import { isTouchUsing } from '@/scripts/touch';
+import { defaultStore } from '@/store';
+import { deviceKind } from '@/scripts/device-kind';
+
+function getFixedContainer(el: Element | null): Element | null {
+	if (el == null || el.tagName === 'BODY') return null;
+	const position = window.getComputedStyle(el).getPropertyValue('position');
+	if (position === 'fixed') {
+		return el;
+	} else {
+		return getFixedContainer(el.parentElement);
+	}
+}
+
+type ModalTypes = 'popup' | 'dialog' | 'dialog:top' | 'drawer';
+
+const props = withDefaults(defineProps<{
+	manualShowing?: boolean | null;
+	anchor?: { x: string; y: string; };
+	src?: HTMLElement;
+	preferType?: ModalTypes | 'auto';
+	zPriority?: 'low' | 'middle' | 'high';
+	noOverlap?: boolean;
+	transparentBg?: boolean;
+}>(), {
+	manualShowing: null,
+	src: null,
+	anchor: () => ({ x: 'center', y: 'bottom' }),
+	preferType: 'auto',
+	zPriority: 'low',
+	noOverlap: true,
+	transparentBg: false,
+});
+
+const emit = defineEmits<{
+	(ev: 'opening'): void;
+	(ev: 'opened'): void;
+	(ev: 'click'): void;
+	(ev: 'esc'): void;
+	(ev: 'close'): void;
+	(ev: 'closed'): void;
+}>();
+
+provide('modal', true);
+
+let maxHeight = $ref<number>();
+let fixed = $ref(false);
+let transformOrigin = $ref('center');
+let showing = $ref(true);
+let content = $ref<HTMLElement>();
+const zIndex = os.claimZIndex(props.zPriority);
+const type = $computed(() => {
+	if (props.preferType === 'auto') {
+		if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
+			return 'drawer';
+		} else {
+			return props.src != null ? 'popup' : 'dialog';
+		}
+	} else {
+		return props.preferType!;
+	}
+});
+
+let contentClicking = false;
+
+const close = () => {
+	// eslint-disable-next-line vue/no-mutating-props
+	if (props.src) props.src.style.pointerEvents = 'auto';
+	showing = false;
+	emit('close');
+};
+
+const onBgClick = () => {
+	if (contentClicking) return;
+	emit('click');
+};
+
+if (type === 'drawer') {
+	maxHeight = window.innerHeight / 1.5;
+}
+
+const keymap = {
+	'esc': () => emit('esc'),
+};
+
+const MARGIN = 16;
+
+const align = () => {
+	if (props.src == null) return;
+	if (type === 'drawer') return;
+	if (type === 'dialog') return;
+
+	if (content == null) return;
+
+	const srcRect = props.src.getBoundingClientRect();
+
+	const width = content!.offsetWidth;
+	const height = content!.offsetHeight;
+
+	let left;
+	let top;
+
+	const x = srcRect.left + (fixed ? 0 : window.pageXOffset);
+	const y = srcRect.top + (fixed ? 0 : window.pageYOffset);
+
+	if (props.anchor.x === 'center') {
+		left = x + (props.src.offsetWidth / 2) - (width / 2);
+	} else if (props.anchor.x === 'left') {
+		// TODO
+	} else if (props.anchor.x === 'right') {
+		left = x + props.src.offsetWidth;
+	}
+
+	if (props.anchor.y === 'center') {
+		top = (y - (height / 2));
+	} else if (props.anchor.y === 'top') {
+		// TODO
+	} else if (props.anchor.y === 'bottom') {
+		top = y + props.src.offsetHeight;
+	}
+
+	if (fixed) {
+		// 画面から横にはみ出る場合
+		if (left + width > window.innerWidth) {
+			left = window.innerWidth - width;
+		}
+
+		const underSpace = (window.innerHeight - MARGIN) - top;
+		const upperSpace = (srcRect.top - MARGIN);
+
+		// 画面から縦にはみ出る場合
+		if (top + height > (window.innerHeight - MARGIN)) {
+			if (props.noOverlap && props.anchor.x === 'center') {
+				if (underSpace >= (upperSpace / 3)) {
+					maxHeight = underSpace;
+				} else {
+					maxHeight = upperSpace;
+					top = (upperSpace + MARGIN) - height;
+				}
+			} else {
+				top = (window.innerHeight - MARGIN) - height;
+			}
+		} else {
+			maxHeight = underSpace;
+		}
+	} else {
+		// 画面から横にはみ出る場合
+		if (left + width - window.pageXOffset > window.innerWidth) {
+			left = window.innerWidth - width + window.pageXOffset - 1;
+		}
+
+		const underSpace = (window.innerHeight - MARGIN) - (top - window.pageYOffset);
+		const upperSpace = (srcRect.top - MARGIN);
+
+		// 画面から縦にはみ出る場合
+		if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) {
+			if (props.noOverlap && props.anchor.x === 'center') {
+				if (underSpace >= (upperSpace / 3)) {
+					maxHeight = underSpace;
+				} else {
+					maxHeight = upperSpace;
+					top = window.pageYOffset + ((upperSpace + MARGIN) - height);
+				}
+			} else {
+				top = (window.innerHeight - MARGIN) - height + window.pageYOffset - 1;
+			}
+		} else {
+			maxHeight = underSpace;
+		}
+	}
+
+	if (top < 0) {
+		top = MARGIN;
+	}
+
+	if (left < 0) {
+		left = 0;
+	}
+
+	let transformOriginX = 'center';
+	let transformOriginY = 'center';
+
+	if (top >= srcRect.top + props.src.offsetHeight + (fixed ? 0 : window.pageYOffset)) {
+		transformOriginY = 'top';
+	} else if ((top + height) <= srcRect.top + (fixed ? 0 : window.pageYOffset)) {
+		transformOriginY = 'bottom';
+	}
+
+	if (left >= srcRect.left + props.src.offsetWidth + (fixed ? 0 : window.pageXOffset)) {
+		transformOriginX = 'left';
+	} else if ((left + width) <= srcRect.left + (fixed ? 0 : window.pageXOffset)) {
+		transformOriginX = 'right';
+	}
+
+	transformOrigin = `${transformOriginX} ${transformOriginY}`;
+
+	content.style.left = left + 'px';
+	content.style.top = top + 'px';
+};
+
+const onOpened = () => {
+	emit('opened');
+
+	// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
+	const el = content!.children[0];
+	el.addEventListener('mousedown', ev => {
+		contentClicking = true;
+		window.addEventListener('mouseup', ev => {
+			// click イベントより先に mouseup イベントが発生するかもしれないのでちょっと待つ
+			window.setTimeout(() => {
+				contentClicking = false;
+			}, 100);
+		}, { passive: true, once: true });
+	}, { passive: true });
+};
+
+onMounted(() => {
+	watch(() => props.src, async () => {
+		if (props.src) {
+			// eslint-disable-next-line vue/no-mutating-props
+			props.src.style.pointerEvents = 'none';
+		}
+		fixed = (type === 'drawer') || (getFixedContainer(props.src) != null);
+
+		await nextTick();
+		
+		align();
+	}, { immediate: true });
+
+	nextTick(() => {
+		new ResizeObserver((entries, observer) => {
+			align();
+		}).observe(content!);
+	});
+});
+
+defineExpose({
+	close,
+});
+</script>
+
+<style lang="scss" scoped>
+.modal-enter-active, .modal-leave-active {
+	> .bg {
+		transition: opacity 0.2s !important;
+	}
+
+	> .content {
+		transform-origin: var(--transformOrigin);
+		transition: opacity 0.2s, transform 0.2s !important;
+	}
+}
+.modal-enter-from, .modal-leave-to {
+	> .bg {
+		opacity: 0;
+	}
+
+	> .content {
+		pointer-events: none;
+		opacity: 0;
+		transform-origin: var(--transformOrigin);
+		transform: scale(0.9);
+	}
+}
+
+.modal-popup-enter-active, .modal-popup-leave-active {
+	> .bg {
+		transition: opacity 0.2s !important;
+	}
+
+	> .content {
+		transform-origin: var(--transformOrigin);
+		transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1) !important;
+	}
+}
+.modal-popup-enter-from, .modal-popup-leave-to {
+	> .bg {
+		opacity: 0;
+	}
+
+	> .content {
+		pointer-events: none;
+		opacity: 0;
+		transform-origin: var(--transformOrigin);
+		transform: scale(0.9);
+	}
+}
+
+.modal-drawer-enter-active {
+	> .bg {
+		transition: opacity 0.2s !important;
+	}
+
+	> .content {
+		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
+	}
+}
+.modal-drawer-leave-active {
+	> .bg {
+		transition: opacity 0.2s !important;
+	}
+
+	> .content {
+		transition: transform 0.2s cubic-bezier(0,.5,0,1) !important;
+	}
+}
+.modal-drawer-enter-from, .modal-drawer-leave-to {
+	> .bg {
+		opacity: 0;
+	}
+
+	> .content {
+		pointer-events: none;
+		transform: translateY(100%);
+	}
+}
+
+.qzhlnise {
+	> .bg {
+		&.transparent {
+			background: transparent;
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+	}
+
+	&.dialog {
+		> .content {
+			position: fixed;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			margin: auto;
+			padding: 32px;
+			// TODO: mask-imageはiOSだとやたら重い。なんとかしたい
+			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
+			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 32px, rgba(0,0,0,1) calc(100% - 32px), rgba(0,0,0,0) 100%);
+			overflow: auto;
+			display: flex;
+
+			@media (max-width: 500px) {
+				padding: 16px;
+				-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
+				mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%);
+			}
+
+			> ::v-deep(*) {
+				margin: auto;
+			}
+
+			&.top {
+				> ::v-deep(*) {
+					margin-top: 0;
+				}
+			}
+		}
+	}
+
+	&.popup {
+		> .content {
+			position: absolute;
+
+			&.fixed {
+				position: fixed;
+			}
+		}
+	}
+
+	&.drawer {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		overflow: clip;
+
+		> .content {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			margin: auto;
+
+			> ::v-deep(*) {
+				margin: auto;
+			}
+		}
+	}
+
+}
+</style>
diff --git a/packages/frontend/src/components/MkModalPageWindow.vue b/packages/frontend/src/components/MkModalPageWindow.vue
new file mode 100644
index 0000000000..ced8a7a714
--- /dev/null
+++ b/packages/frontend/src/components/MkModalPageWindow.vue
@@ -0,0 +1,181 @@
+<template>
+<MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')">
+	<div ref="rootEl" class="hrmcaedk _narrow_" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }">
+		<div class="header" @contextmenu="onContextmenu">
+			<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="ti ti-arrow-left"></i></button>
+			<span v-else style="display: inline-block; width: 20px"></span>
+			<span v-if="pageMetadata?.value" class="title">
+				<i v-if="pageMetadata?.value.icon" class="icon" :class="pageMetadata?.value.icon"></i>
+				<span>{{ pageMetadata?.value.title }}</span>
+			</span>
+			<button class="_button" @click="$refs.modal.close()"><i class="ti ti-x"></i></button>
+		</div>
+		<div class="body">
+			<MkStickyContainer>
+				<template #header><MkPageHeader v-if="pageMetadata?.value && !pageMetadata?.value.hideHeader" :info="pageMetadata?.value"/></template>
+				<RouterView :router="router"/>
+			</MkStickyContainer>
+		</div>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { ComputedRef, provide } from 'vue';
+import MkModal from '@/components/MkModal.vue';
+import { popout as _popout } from '@/scripts/popout';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import { url } from '@/config';
+import * as os from '@/os';
+import { mainRouter, routes } from '@/router';
+import { i18n } from '@/i18n';
+import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+import { Router } from '@/nirax';
+
+const props = defineProps<{
+	initialPath: string;
+}>();
+
+defineEmits<{
+	(ev: 'closed'): void;
+	(ev: 'click'): void;
+}>();
+
+const router = new Router(routes, props.initialPath);
+
+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: 'ti ti-player-eject',
+		text: i18n.ts.showInPage,
+		action: expand,
+	}, {
+		icon: 'ti ti-window-maximize',
+		text: i18n.ts.popout,
+		action: popout,
+	}, null, {
+		icon: 'ti ti-external-link',
+		text: i18n.ts.openInNewTab,
+		action: () => {
+			window.open(pageUrl, '_blank');
+			modal.close();
+		},
+	}, {
+		icon: 'ti ti-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>
+.hrmcaedk {
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	contain: content;
+	border-radius: var(--radius);
+
+	--root-margin: 24px;
+
+	@media (max-width: 500px) {
+		--root-margin: 16px;
+	}
+
+	> .header {
+		$height: 52px;
+		$height-narrow: 42px;
+		display: flex;
+		flex-shrink: 0;
+		height: $height;
+		line-height: $height;
+		font-weight: bold;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		background: var(--windowHeader);
+		-webkit-backdrop-filter: var(--blur, blur(15px));
+		backdrop-filter: var(--blur, blur(15px));
+
+		> button {
+			height: $height;
+			width: $height;
+
+			&:hover {
+				color: var(--fgHighlighted);
+			}
+		}
+
+		@media (max-width: 500px) {
+			height: $height-narrow;
+			line-height: $height-narrow;
+			padding-left: 16px;
+
+			> button {
+				height: $height-narrow;
+				width: $height-narrow;
+			}
+		}
+
+		> .title {
+			flex: 1;
+
+			> .icon {
+				margin-right: 0.5em;
+			}
+		}
+	}
+
+	> .body {
+		overflow: auto;
+		background: var(--bg);
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkModalWindow.vue b/packages/frontend/src/components/MkModalWindow.vue
new file mode 100644
index 0000000000..d977ca6e9c
--- /dev/null
+++ b/packages/frontend/src/components/MkModalWindow.vue
@@ -0,0 +1,146 @@
+<template>
+<MkModal ref="modal" :prefer-type="'dialog'" @click="onBgClick" @closed="$emit('closed')">
+	<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="ti ti-x"></i></button>
+			<span class="title">
+				<slot name="header"></slot>
+			</span>
+			<button v-if="!withOkButton" class="_button" @click="$emit('close')"><i class="ti ti-x"></i></button>
+			<button v-if="withOkButton" class="_button" :disabled="okButtonDisabled" @click="$emit('ok')"><i class="ti ti-check"></i></button>
+		</div>
+		<div class="body">
+			<slot :width="bodyWidth" :height="bodyHeight"></slot>
+		</div>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from 'vue';
+import MkModal from './MkModal.vue';
+
+const props = withDefaults(defineProps<{
+	withOkButton: boolean;
+	okButtonDisabled: boolean;
+	width: number;
+	height: number | null;
+	scroll: boolean;
+}>(), {
+	withOkButton: false,
+	okButtonDisabled: false,
+	width: 400,
+	height: null,
+	scroll: true,
+});
+
+const emit = defineEmits<{
+	(event: 'click'): void;
+	(event: 'close'): void;
+	(event: 'closed'): void;
+	(event: 'ok'): void;
+}>();
+
+let modal = $ref<InstanceType<typeof MkModal>>();
+let rootEl = $ref<HTMLElement>();
+let headerEl = $ref<HTMLElement>();
+let bodyWidth = $ref(0);
+let bodyHeight = $ref(0);
+
+const close = () => {
+	modal.close();
+};
+
+const onBgClick = () => {
+	emit('click');
+};
+
+const onKeydown = (evt) => {
+	if (evt.which === 27) { // Esc
+		evt.preventDefault();
+		evt.stopPropagation();
+		close();
+	}
+};
+
+const ro = new ResizeObserver((entries, observer) => {
+	bodyWidth = rootEl.offsetWidth;
+	bodyHeight = rootEl.offsetHeight - headerEl.offsetHeight;
+});
+
+onMounted(() => {
+	bodyWidth = rootEl.offsetWidth;
+	bodyHeight = rootEl.offsetHeight - headerEl.offsetHeight;
+	ro.observe(rootEl);
+});
+
+onUnmounted(() => {
+	ro.disconnect();
+});
+
+defineExpose({
+	close,
+});
+</script>
+
+<style lang="scss" scoped>
+.ebkgoccj {
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	contain: content;
+	border-radius: var(--radius);
+
+	--root-margin: 24px;
+
+	@media (max-width: 500px) {
+		--root-margin: 16px;
+	}
+
+	> .header {
+		$height: 46px;
+		$height-narrow: 42px;
+		display: flex;
+		flex-shrink: 0;
+		background: var(--windowHeader);
+		-webkit-backdrop-filter: var(--blur, blur(15px));
+		backdrop-filter: var(--blur, blur(15px));
+
+		> button {
+			height: $height;
+			width: $height;
+
+			@media (max-width: 500px) {
+				height: $height-narrow;
+				width: $height-narrow;
+			}
+		}
+
+		> .title {
+			flex: 1;
+			line-height: $height;
+			padding-left: 32px;
+			font-weight: bold;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			pointer-events: none;
+
+			@media (max-width: 500px) {
+				line-height: $height-narrow;
+				padding-left: 16px;
+			}
+		}
+
+		> button + .title {
+			padding-left: 0;
+		}
+	}
+
+	> .body {
+		flex: 1;
+		overflow: auto;
+		background: var(--panel);
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
new file mode 100644
index 0000000000..a4100e1f2c
--- /dev/null
+++ b/packages/frontend/src/components/MkNote.vue
@@ -0,0 +1,658 @@
+<template>
+<div
+	v-if="!muted"
+	v-show="!isDeleted"
+	ref="el"
+	v-hotkey="keymap"
+	v-size="{ max: [500, 450, 350, 300] }"
+	class="tkcbzcuz"
+	:tabindex="!isDeleted ? '-1' : null"
+	:class="{ renote: isRenote }"
+>
+	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
+	<div v-if="pinned" class="info"><i class="ti ti-pin"></i> {{ i18n.ts.pinnedNote }}</div>
+	<div v-if="appearNote._prId_" class="info"><i class="fas fa-bullhorn"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ti ti-x"></i></button></div>
+	<div v-if="appearNote._featuredId_" class="info"><i class="ti ti-bolt"></i> {{ i18n.ts.featured }}</div>
+	<div v-if="isRenote" class="renote">
+		<MkAvatar class="avatar" :user="note.user"/>
+		<i class="ti ti-repeat"></i>
+		<I18n :src="i18n.ts.renotedBy" tag="span">
+			<template #user>
+				<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
+					<MkUserName :user="note.user"/>
+				</MkA>
+			</template>
+		</I18n>
+		<div class="info">
+			<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
+				<i v-if="isMyRenote" class="ti ti-dots dropdownIcon"></i>
+				<MkTime :time="note.createdAt"/>
+			</button>
+			<MkVisibility :note="note"/>
+		</div>
+	</div>
+	<article class="article" @contextmenu.stop="onContextmenu">
+		<MkAvatar class="avatar" :user="appearNote.user"/>
+		<div class="main">
+			<XNoteHeader class="header" :note="appearNote" :mini="true"/>
+			<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
+			<div class="body">
+				<p v-if="appearNote.cw != null" class="cw">
+					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+					<XCwButton v-model="showContent" :note="appearNote"/>
+				</p>
+				<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
+					<div class="text">
+						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
+						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
+						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+						<a v-if="appearNote.renote != null" class="rp">RN:</a>
+						<div v-if="translating || translation" class="translation">
+							<MkLoading v-if="translating" mini/>
+							<div v-else class="translated">
+								<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
+								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+							</div>
+						</div>
+					</div>
+					<div v-if="appearNote.files.length > 0" class="files">
+						<XMediaList :media-list="appearNote.files"/>
+					</div>
+					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
+					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="false" class="url-preview"/>
+					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
+					<button v-if="isLong && collapsed" class="fade _button" @click="collapsed = false">
+						<span>{{ i18n.ts.showMore }}</span>
+					</button>
+					<button v-else-if="isLong && !collapsed" class="showLess _button" @click="collapsed = true">
+						<span>{{ i18n.ts.showLess }}</span>
+					</button>
+				</div>
+				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
+			</div>
+			<footer class="footer">
+				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+				<button class="button _button" @click="reply()">
+					<i class="ti ti-arrow-back-up"></i>
+					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
+				</button>
+				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
+				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
+					<i class="ti ti-plus"></i>
+				</button>
+				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
+					<i class="ti ti-minus"></i>
+				</button>
+				<button ref="menuButton" class="button _button" @click="menu()">
+					<i class="ti ti-dots"></i>
+				</button>
+			</footer>
+		</div>
+	</article>
+</div>
+<div v-else class="muted" @click="muted = false">
+	<I18n :src="i18n.ts.userSaysSomething" tag="small">
+		<template #name>
+			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
+				<MkUserName :user="appearNote.user"/>
+			</MkA>
+		</template>
+	</I18n>
+</div>
+</template>
+
+<script lang="ts" setup>
+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 '@/components/MkNoteSub.vue';
+import XNoteHeader from '@/components/MkNoteHeader.vue';
+import XNoteSimple from '@/components/MkNoteSimple.vue';
+import XReactionsViewer from '@/components/MkReactionsViewer.vue';
+import XMediaList from '@/components/MkMediaList.vue';
+import XCwButton from '@/components/MkCwButton.vue';
+import XPoll from '@/components/MkPoll.vue';
+import XRenoteButton from '@/components/MkRenoteButton.vue';
+import MkUrlPreview from '@/components/MkUrlPreview.vue';
+import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
+import MkVisibility from '@/components/MkVisibility.vue';
+import { pleaseLogin } from '@/scripts/please-login';
+import { focusPrev, focusNext } from '@/scripts/focus';
+import { checkWordMute } from '@/scripts/check-word-mute';
+import { userPage } from '@/filters/user';
+import * as os from '@/os';
+import { defaultStore, noteViewInterruptors } from '@/store';
+import { reactionPicker } from '@/scripts/reaction-picker';
+import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import { getNoteMenu } from '@/scripts/get-note-menu';
+import { useNoteCapture } from '@/scripts/use-note-capture';
+import { deepClone } from '@/scripts/clone';
+
+const props = defineProps<{
+	note: misskey.entities.Note;
+	pinned?: boolean;
+}>();
+
+const inChannel = inject('inChannel', null);
+
+let note = $ref(deepClone(props.note));
+
+// plugin
+if (noteViewInterruptors.length > 0) {
+	onMounted(async () => {
+		let result = deepClone(note);
+		for (const interruptor of noteViewInterruptors) {
+			result = await interruptor.handler(result);
+		}
+		note = result;
+	});
+}
+
+const isRenote = (
+	note.renote != null &&
+	note.text == null &&
+	note.fileIds.length === 0 &&
+	note.poll == null
+);
+
+const el = ref<HTMLElement>();
+const menuButton = ref<HTMLElement>();
+const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
+const renoteTime = ref<HTMLElement>();
+const reactButton = ref<HTMLElement>();
+let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
+const isMyRenote = $i && ($i.id === note.userId);
+const showContent = ref(false);
+const isLong = (appearNote.cw == null && appearNote.text != null && (
+	(appearNote.text.split('\n').length > 9) ||
+	(appearNote.text.length > 500)
+));
+const collapsed = ref(appearNote.cw == null && isLong);
+const isDeleted = ref(false);
+const muted = ref(checkWordMute(appearNote, $i, defaultStore.state.mutedWords));
+const translation = ref(null);
+const translating = ref(false);
+const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
+const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
+
+const keymap = {
+	'r': () => reply(true),
+	'e|a|plus': () => react(true),
+	'q': () => renoteButton.value.renote(true),
+	'up|k|shift+tab': focusBefore,
+	'down|j|tab': focusAfter,
+	'esc': blur,
+	'm|o': () => menu(true),
+	's': () => showContent.value !== showContent.value,
+};
+
+useNoteCapture({
+	rootEl: el,
+	note: $$(appearNote),
+	isDeletedRef: isDeleted,
+});
+
+function reply(viaKeyboard = false): void {
+	pleaseLogin();
+	os.post({
+		reply: appearNote,
+		animation: !viaKeyboard,
+	}, () => {
+		focus();
+	});
+}
+
+function react(viaKeyboard = false): void {
+	pleaseLogin();
+	blur();
+	reactionPicker.show(reactButton.value, reaction => {
+		os.api('notes/reactions/create', {
+			noteId: appearNote.id,
+			reaction: reaction,
+		});
+	}, () => {
+		focus();
+	});
+}
+
+function undoReact(note): void {
+	const oldReaction = note.myReaction;
+	if (!oldReaction) return;
+	os.api('notes/reactions/delete', {
+		noteId: note.id,
+	});
+}
+
+const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
+
+function onContextmenu(ev: MouseEvent): void {
+	const isLink = (el: HTMLElement) => {
+		if (el.tagName === 'A') return true;
+		if (el.parentElement) {
+			return isLink(el.parentElement);
+		}
+	};
+	if (isLink(ev.target)) return;
+	if (window.getSelection().toString() !== '') return;
+
+	if (defaultStore.state.useReactionPickerForContextMenu) {
+		ev.preventDefault();
+		react();
+	} else {
+		os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), ev).then(focus);
+	}
+}
+
+function menu(viaKeyboard = false): void {
+	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), menuButton.value, {
+		viaKeyboard,
+	}).then(focus);
+}
+
+function showRenoteMenu(viaKeyboard = false): void {
+	if (!isMyRenote) return;
+	os.popupMenu([{
+		text: i18n.ts.unrenote,
+		icon: 'ti ti-trash',
+		danger: true,
+		action: () => {
+			os.api('notes/delete', {
+				noteId: note.id,
+			});
+			isDeleted.value = true;
+		},
+	}], renoteTime.value, {
+		viaKeyboard: viaKeyboard,
+	});
+}
+
+function focus() {
+	el.value.focus();
+}
+
+function blur() {
+	el.value.blur();
+}
+
+function focusBefore() {
+	focusPrev(el.value);
+}
+
+function focusAfter() {
+	focusNext(el.value);
+}
+
+function readPromo() {
+	os.api('promo/read', {
+		noteId: appearNote.id,
+	});
+	isDeleted.value = true;
+}
+</script>
+
+<style lang="scss" scoped>
+.tkcbzcuz {
+	position: relative;
+	transition: box-shadow 0.1s ease;
+	font-size: 1.05em;
+	overflow: clip;
+	contain: content;
+
+	// これらの指定はパフォーマンス向上には有効だが、ノートの高さは一定でないため、
+	// 下の方までスクロールすると上のノートの高さがここで決め打ちされたものに変化し、表示しているノートの位置が変わってしまう
+	// ノートがマウントされたときに自身の高さを取得し contain-intrinsic-size を設定しなおせばほぼ解決できそうだが、
+	// 今度はその処理自体がパフォーマンス低下の原因にならないか懸念される。また、被リアクションでも高さは変化するため、やはり多少のズレは生じる
+	// 一度レンダリングされた要素はブラウザがよしなにサイズを覚えておいてくれるような実装になるまで待った方が良さそう(なるのか？)
+	//content-visibility: auto;
+  //contain-intrinsic-size: 0 128px;
+
+	&:focus-visible {
+		outline: none;
+
+		&:after {
+			content: "";
+			pointer-events: none;
+			display: block;
+			position: absolute;
+			z-index: 10;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			margin: auto;
+			width: calc(100% - 8px);
+			height: calc(100% - 8px);
+			border: dashed 1px var(--focus);
+			border-radius: var(--radius);
+			box-sizing: border-box;
+		}
+	}
+
+	&:hover > .article > .main > .footer > .button {
+		opacity: 1;
+	}
+
+	> .info {
+		display: flex;
+		align-items: center;
+		padding: 16px 32px 8px 32px;
+		line-height: 24px;
+		font-size: 90%;
+		white-space: pre;
+		color: #d28a3f;
+
+		> i {
+			margin-right: 4px;
+		}
+
+		> .hide {
+			margin-left: auto;
+			color: inherit;
+		}
+	}
+
+	> .info + .article {
+		padding-top: 8px;
+	}
+
+	> .reply-to {
+		opacity: 0.7;
+		padding-bottom: 0;
+	}
+
+	> .renote {
+		display: flex;
+		align-items: center;
+		padding: 16px 32px 8px 32px;
+		line-height: 28px;
+		white-space: pre;
+		color: var(--renote);
+
+		> .avatar {
+			flex-shrink: 0;
+			display: inline-block;
+			width: 28px;
+			height: 28px;
+			margin: 0 8px 0 0;
+			border-radius: 6px;
+		}
+
+		> i {
+			margin-right: 4px;
+		}
+
+		> span {
+			overflow: hidden;
+			flex-shrink: 1;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+
+			> .name {
+				font-weight: bold;
+			}
+		}
+
+		> .info {
+			margin-left: auto;
+			font-size: 0.9em;
+
+			> .time {
+				flex-shrink: 0;
+				color: inherit;
+
+				> .dropdownIcon {
+					margin-right: 4px;
+				}
+			}
+		}
+	}
+
+	> .renote + .article {
+		padding-top: 8px;
+	}
+
+	> .article {
+		display: flex;
+		padding: 28px 32px 18px;
+
+		> .avatar {
+			flex-shrink: 0;
+			display: block;
+			margin: 0 14px 8px 0;
+			width: 58px;
+			height: 58px;
+			position: sticky;
+			top: calc(22px + var(--stickyTop, 0px));
+			left: 0;
+		}
+
+		> .main {
+			flex: 1;
+			min-width: 0;
+
+			> .body {
+				container-type: inline-size;
+
+				> .cw {
+					cursor: default;
+					display: block;
+					margin: 0;
+					padding: 0;
+					overflow-wrap: break-word;
+
+					> .text {
+						margin-right: 8px;
+					}
+				}
+
+				> .content {
+					&.isLong {
+						> .showLess {
+							width: 100%;
+							margin-top: 1em;
+							position: sticky;
+							bottom: 1em;
+
+							> span {
+								display: inline-block;
+								background: var(--popup);
+								padding: 6px 10px;
+								font-size: 0.8em;
+								border-radius: 999px;
+								box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+							}
+						}
+					}
+
+					&.collapsed {
+						position: relative;
+						max-height: 9em;
+						overflow: hidden;
+
+						> .fade {
+							display: block;
+							position: absolute;
+							bottom: 0;
+							left: 0;
+							width: 100%;
+							height: 64px;
+							background: linear-gradient(0deg, var(--panel), var(--X15));
+
+							> span {
+								display: inline-block;
+								background: var(--panel);
+								padding: 6px 10px;
+								font-size: 0.8em;
+								border-radius: 999px;
+								box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+							}
+
+							&:hover {
+								> span {
+									background: var(--panelHighlight);
+								}
+							}
+						}
+					}
+
+					> .text {
+						overflow-wrap: break-word;
+
+						> .reply {
+							color: var(--accent);
+							margin-right: 0.5em;
+						}
+
+						> .rp {
+							margin-left: 4px;
+							font-style: oblique;
+							color: var(--renote);
+						}
+
+						> .translation {
+							border: solid 0.5px var(--divider);
+							border-radius: var(--radius);
+							padding: 12px;
+							margin-top: 8px;
+						}
+					}
+
+					> .url-preview {
+						margin-top: 8px;
+					}
+
+					> .poll {
+						font-size: 80%;
+					}
+
+					> .renote {
+						padding: 8px 0;
+
+						> * {
+							padding: 16px;
+							border: dashed 1px var(--renote);
+							border-radius: 8px;
+						}
+					}
+				}
+
+				> .channel {
+					opacity: 0.7;
+					font-size: 80%;
+				}
+			}
+
+			> .footer {
+				> .button {
+					margin: 0;
+					padding: 8px;
+					opacity: 0.7;
+
+					&:not(:last-child) {
+						margin-right: 28px;
+					}
+
+					&:hover {
+						color: var(--fgHighlighted);
+					}
+
+					> .count {
+						display: inline;
+						margin: 0 0 0 8px;
+						opacity: 0.7;
+					}
+
+					&.reacted {
+						color: var(--accent);
+					}
+				}
+			}
+		}
+	}
+
+	> .reply {
+		border-top: solid 0.5px var(--divider);
+	}
+}
+
+@container (max-width: 500px) {
+	.tkcbzcuz {
+		font-size: 0.9em;
+
+		> .article {
+			> .avatar {
+				width: 50px;
+				height: 50px;
+			}
+		}
+	}
+}
+
+@container (max-width: 450px) {
+	.tkcbzcuz {
+		> .renote {
+			padding: 8px 16px 0 16px;
+		}
+
+		> .info {
+			padding: 8px 16px 0 16px;
+		}
+
+		> .article {
+			padding: 14px 16px 9px;
+
+			> .avatar {
+				margin: 0 10px 8px 0;
+				width: 46px;
+				height: 46px;
+				top: calc(14px + var(--stickyTop, 0px));
+			}
+		}
+	}
+}
+
+@container (max-width: 350px) {
+	.tkcbzcuz {
+		> .article {
+			> .main {
+				> .footer {
+					> .button {
+						&:not(:last-child) {
+							margin-right: 18px;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+@container (max-width: 300px) {
+	.tkcbzcuz {
+		> .article {
+			> .avatar {
+				width: 44px;
+				height: 44px;
+			}
+
+			> .main {
+				> .footer {
+					> .button {
+						&:not(:last-child) {
+							margin-right: 12px;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+.muted {
+	padding: 8px;
+	text-align: center;
+	opacity: 0.7;
+}
+</style>
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
new file mode 100644
index 0000000000..7ce8e039d9
--- /dev/null
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -0,0 +1,677 @@
+<template>
+<div
+	v-if="!muted"
+	v-show="!isDeleted"
+	ref="el"
+	v-hotkey="keymap"
+	v-size="{ max: [500, 450, 350, 300] }"
+	class="lxwezrsl _block"
+	:tabindex="!isDeleted ? '-1' : null"
+	:class="{ renote: isRenote }"
+>
+	<MkNoteSub v-for="note in conversation" :key="note.id" class="reply-to-more" :note="note"/>
+	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
+	<div v-if="isRenote" class="renote">
+		<MkAvatar class="avatar" :user="note.user"/>
+		<i class="ti ti-repeat"></i>
+		<I18n :src="i18n.ts.renotedBy" tag="span">
+			<template #user>
+				<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
+					<MkUserName :user="note.user"/>
+				</MkA>
+			</template>
+		</I18n>
+		<div class="info">
+			<button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
+				<i v-if="isMyRenote" class="ti ti-dots dropdownIcon"></i>
+				<MkTime :time="note.createdAt"/>
+			</button>
+			<MkVisibility :note="note"/>
+		</div>
+	</div>
+	<article class="article" @contextmenu.stop="onContextmenu">
+		<header class="header">
+			<MkAvatar class="avatar" :user="appearNote.user" :show-indicator="true"/>
+			<div class="body">
+				<div class="top">
+					<MkA v-user-preview="appearNote.user.id" class="name" :to="userPage(appearNote.user)">
+						<MkUserName :nowrap="false" :user="appearNote.user"/>
+					</MkA>
+					<span v-if="appearNote.user.isBot" class="is-bot">bot</span>
+					<div class="info">
+						<MkVisibility :note="appearNote"/>
+					</div>
+				</div>
+				<div class="username"><MkAcct :user="appearNote.user"/></div>
+				<MkInstanceTicker v-if="showTicker" class="ticker" :instance="appearNote.user.instance"/>
+			</div>
+		</header>
+		<div class="main">
+			<div class="body">
+				<p v-if="appearNote.cw != null" class="cw">
+					<Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+					<XCwButton v-model="showContent" :note="appearNote"/>
+				</p>
+				<div v-show="appearNote.cw == null || showContent" class="content">
+					<div class="text">
+						<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
+						<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
+						<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+						<a v-if="appearNote.renote != null" class="rp">RN:</a>
+						<div v-if="translating || translation" class="translation">
+							<MkLoading v-if="translating" mini/>
+							<div v-else class="translated">
+								<b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b>
+								<Mfm :text="translation.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
+							</div>
+						</div>
+					</div>
+					<div v-if="appearNote.files.length > 0" class="files">
+						<XMediaList :media-list="appearNote.files"/>
+					</div>
+					<XPoll v-if="appearNote.poll" ref="pollViewer" :note="appearNote" class="poll"/>
+					<MkUrlPreview v-for="url in urls" :key="url" :url="url" :compact="true" :detail="true" class="url-preview"/>
+					<div v-if="appearNote.renote" class="renote"><XNoteSimple :note="appearNote.renote"/></div>
+				</div>
+				<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ti ti-device-tv"></i> {{ appearNote.channel.name }}</MkA>
+			</div>
+			<footer class="footer">
+				<div class="info">
+					<MkA class="created-at" :to="notePage(appearNote)">
+						<MkTime :time="appearNote.createdAt" mode="detail"/>
+					</MkA>
+				</div>
+				<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
+				<button class="button _button" @click="reply()">
+					<i class="ti ti-arrow-back-up"></i>
+					<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
+				</button>
+				<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
+				<button v-if="appearNote.myReaction == null" ref="reactButton" class="button _button" @click="react()">
+					<i class="ti ti-plus"></i>
+				</button>
+				<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
+					<i class="ti ti-minus"></i>
+				</button>
+				<button ref="menuButton" class="button _button" @click="menu()">
+					<i class="ti ti-dots"></i>
+				</button>
+			</footer>
+		</div>
+	</article>
+	<MkNoteSub v-for="note in replies" :key="note.id" :note="note" class="reply" :detail="true"/>
+</div>
+<div v-else class="_panel muted" @click="muted = false">
+	<I18n :src="i18n.ts.userSaysSomething" tag="small">
+		<template #name>
+			<MkA v-user-preview="appearNote.userId" class="name" :to="userPage(appearNote.user)">
+				<MkUserName :user="appearNote.user"/>
+			</MkA>
+		</template>
+	</I18n>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, onMounted, onUnmounted, reactive, ref } from 'vue';
+import * as mfm from 'mfm-js';
+import * as misskey from 'misskey-js';
+import MkNoteSub from '@/components/MkNoteSub.vue';
+import XNoteSimple from '@/components/MkNoteSimple.vue';
+import XReactionsViewer from '@/components/MkReactionsViewer.vue';
+import XMediaList from '@/components/MkMediaList.vue';
+import XCwButton from '@/components/MkCwButton.vue';
+import XPoll from '@/components/MkPoll.vue';
+import XRenoteButton from '@/components/MkRenoteButton.vue';
+import MkUrlPreview from '@/components/MkUrlPreview.vue';
+import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
+import MkVisibility from '@/components/MkVisibility.vue';
+import { pleaseLogin } from '@/scripts/please-login';
+import { checkWordMute } from '@/scripts/check-word-mute';
+import { userPage } from '@/filters/user';
+import { notePage } from '@/filters/note';
+import * as os from '@/os';
+import { defaultStore, noteViewInterruptors } from '@/store';
+import { reactionPicker } from '@/scripts/reaction-picker';
+import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import { getNoteMenu } from '@/scripts/get-note-menu';
+import { useNoteCapture } from '@/scripts/use-note-capture';
+import { deepClone } from '@/scripts/clone';
+
+const props = defineProps<{
+	note: misskey.entities.Note;
+	pinned?: boolean;
+}>();
+
+const inChannel = inject('inChannel', null);
+
+let note = $ref(deepClone(props.note));
+
+// plugin
+if (noteViewInterruptors.length > 0) {
+	onMounted(async () => {
+		let result = deepClone(note);
+		for (const interruptor of noteViewInterruptors) {
+			result = await interruptor.handler(result);
+		}
+		note = result;
+	});
+}
+
+const isRenote = (
+	note.renote != null &&
+	note.text == null &&
+	note.fileIds.length === 0 &&
+	note.poll == null
+);
+
+const el = ref<HTMLElement>();
+const menuButton = ref<HTMLElement>();
+const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
+const renoteTime = ref<HTMLElement>();
+const reactButton = ref<HTMLElement>();
+let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
+const isMyRenote = $i && ($i.id === note.userId);
+const showContent = ref(false);
+const isDeleted = ref(false);
+const muted = ref(checkWordMute(appearNote, $i, defaultStore.state.mutedWords));
+const translation = ref(null);
+const translating = ref(false);
+const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
+const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
+const conversation = ref<misskey.entities.Note[]>([]);
+const replies = ref<misskey.entities.Note[]>([]);
+
+const keymap = {
+	'r': () => reply(true),
+	'e|a|plus': () => react(true),
+	'q': () => renoteButton.value.renote(true),
+	'esc': blur,
+	'm|o': () => menu(true),
+	's': () => showContent.value !== showContent.value,
+};
+
+useNoteCapture({
+	rootEl: el,
+	note: $$(appearNote),
+	isDeletedRef: isDeleted,
+});
+
+function reply(viaKeyboard = false): void {
+	pleaseLogin();
+	os.post({
+		reply: appearNote,
+		animation: !viaKeyboard,
+	}, () => {
+		focus();
+	});
+}
+
+function react(viaKeyboard = false): void {
+	pleaseLogin();
+	blur();
+	reactionPicker.show(reactButton.value, reaction => {
+		os.api('notes/reactions/create', {
+			noteId: appearNote.id,
+			reaction: reaction,
+		});
+	}, () => {
+		focus();
+	});
+}
+
+function undoReact(note): void {
+	const oldReaction = note.myReaction;
+	if (!oldReaction) return;
+	os.api('notes/reactions/delete', {
+		noteId: note.id,
+	});
+}
+
+function onContextmenu(ev: MouseEvent): void {
+	const isLink = (el: HTMLElement) => {
+		if (el.tagName === 'A') return true;
+		if (el.parentElement) {
+			return isLink(el.parentElement);
+		}
+	};
+	if (isLink(ev.target)) return;
+	if (window.getSelection().toString() !== '') return;
+
+	if (defaultStore.state.useReactionPickerForContextMenu) {
+		ev.preventDefault();
+		react();
+	} else {
+		os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), ev).then(focus);
+	}
+}
+
+function menu(viaKeyboard = false): void {
+	os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), menuButton.value, {
+		viaKeyboard,
+	}).then(focus);
+}
+
+function showRenoteMenu(viaKeyboard = false): void {
+	if (!isMyRenote) return;
+	os.popupMenu([{
+		text: i18n.ts.unrenote,
+		icon: 'ti ti-trash',
+		danger: true,
+		action: () => {
+			os.api('notes/delete', {
+				noteId: note.id,
+			});
+			isDeleted.value = true;
+		},
+	}], renoteTime.value, {
+		viaKeyboard: viaKeyboard,
+	});
+}
+
+function focus() {
+	el.value.focus();
+}
+
+function blur() {
+	el.value.blur();
+}
+
+os.api('notes/children', {
+	noteId: appearNote.id,
+	limit: 30,
+}).then(res => {
+	replies.value = res;
+});
+
+if (appearNote.replyId) {
+	os.api('notes/conversation', {
+		noteId: appearNote.replyId,
+	}).then(res => {
+		conversation.value = res.reverse();
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.lxwezrsl {
+	position: relative;
+	transition: box-shadow 0.1s ease;
+	overflow: hidden;
+	contain: content;
+
+	&:focus-visible {
+		outline: none;
+
+		&:after {
+			content: "";
+			pointer-events: none;
+			display: block;
+			position: absolute;
+			z-index: 10;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			margin: auto;
+			width: calc(100% - 8px);
+			height: calc(100% - 8px);
+			border: dashed 1px var(--focus);
+			border-radius: var(--radius);
+			box-sizing: border-box;
+		}
+	}
+
+	&:hover > .article > .main > .footer > .button {
+		opacity: 1;
+	}
+
+	> .reply-to {
+		opacity: 0.7;
+		padding-bottom: 0;
+	}
+
+	> .reply-to-more {
+		opacity: 0.7;
+	}
+
+	> .renote {
+		display: flex;
+		align-items: center;
+		padding: 16px 32px 8px 32px;
+		line-height: 28px;
+		white-space: pre;
+		color: var(--renote);
+
+		> .avatar {
+			flex-shrink: 0;
+			display: inline-block;
+			width: 28px;
+			height: 28px;
+			margin: 0 8px 0 0;
+			border-radius: 6px;
+		}
+
+		> i {
+			margin-right: 4px;
+		}
+
+		> span {
+			overflow: hidden;
+			flex-shrink: 1;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+
+			> .name {
+				font-weight: bold;
+			}
+		}
+
+		> .info {
+			margin-left: auto;
+			font-size: 0.9em;
+
+			> .time {
+				flex-shrink: 0;
+				color: inherit;
+
+				> .dropdownIcon {
+					margin-right: 4px;
+				}
+			}
+		}
+	}
+
+	> .renote + .article {
+		padding-top: 8px;
+	}
+
+	> .article {
+		padding: 32px;
+		font-size: 1.2em;
+
+		> .header {
+			display: flex;
+			position: relative;
+			margin-bottom: 16px;
+			align-items: center;
+
+			> .avatar {
+				display: block;
+				flex-shrink: 0;
+				width: 58px;
+				height: 58px;
+			}
+
+			> .body {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				padding-left: 16px;
+				font-size: 0.95em;
+
+				> .top {
+					> .name {
+						font-weight: bold;
+						line-height: 1.3;
+					}
+
+					> .is-bot {
+						display: inline-block;
+						margin: 0 0.5em;
+						padding: 4px 6px;
+						font-size: 80%;
+						line-height: 1;
+						border: solid 0.5px var(--divider);
+						border-radius: 4px;
+					}
+
+					> .info {
+						float: right;
+					}
+				}
+
+				> .username {
+					margin-bottom: 2px;
+					line-height: 1.3;
+					word-wrap: anywhere;
+				}
+			}
+		}
+
+		> .main {
+			> .body {
+				container-type: inline-size;
+
+				> .cw {
+					cursor: default;
+					display: block;
+					margin: 0;
+					padding: 0;
+					overflow-wrap: break-word;
+
+					> .text {
+						margin-right: 8px;
+					}
+				}
+
+				> .content {
+					> .text {
+						overflow-wrap: break-word;
+
+						> .reply {
+							color: var(--accent);
+							margin-right: 0.5em;
+						}
+
+						> .rp {
+							margin-left: 4px;
+							font-style: oblique;
+							color: var(--renote);
+						}
+
+						> .translation {
+							border: solid 0.5px var(--divider);
+							border-radius: var(--radius);
+							padding: 12px;
+							margin-top: 8px;
+						}
+					}
+
+					> .url-preview {
+						margin-top: 8px;
+					}
+
+					> .poll {
+						font-size: 80%;
+					}
+
+					> .renote {
+						padding: 8px 0;
+
+						> * {
+							padding: 16px;
+							border: dashed 1px var(--renote);
+							border-radius: 8px;
+						}
+					}
+				}
+
+				> .channel {
+					opacity: 0.7;
+					font-size: 80%;
+				}
+			}
+
+			> .footer {
+				> .info {
+					margin: 16px 0;
+					opacity: 0.7;
+					font-size: 0.9em;
+				}
+
+				> .button {
+					margin: 0;
+					padding: 8px;
+					opacity: 0.7;
+
+					&:not(:last-child) {
+						margin-right: 28px;
+					}
+
+					&:hover {
+						color: var(--fgHighlighted);
+					}
+
+					> .count {
+						display: inline;
+						margin: 0 0 0 8px;
+						opacity: 0.7;
+					}
+
+					&.reacted {
+						color: var(--accent);
+					}
+				}
+			}
+		}
+	}
+
+	> .reply {
+		border-top: solid 0.5px var(--divider);
+	}
+
+	&.max-width_500px {
+		font-size: 0.9em;
+	}
+
+	&.max-width_450px {
+		> .renote {
+			padding: 8px 16px 0 16px;
+		}
+
+		> .article {
+			padding: 16px;
+
+			> .header {
+				> .avatar {
+					width: 50px;
+					height: 50px;
+				}
+			}
+		}
+	}
+
+	&.max-width_350px {
+		> .article {
+			> .main {
+				> .footer {
+					> .button {
+						&:not(:last-child) {
+							margin-right: 18px;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	&.max-width_300px {
+		font-size: 0.825em;
+
+		> .article {
+			> .header {
+				> .avatar {
+					width: 50px;
+					height: 50px;
+				}
+			}
+
+			> .main {
+				> .footer {
+					> .button {
+						&:not(:last-child) {
+							margin-right: 12px;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+@container (max-width: 500px) {
+	.lxwezrsl {
+		font-size: 0.9em;
+	}
+}
+
+@container (max-width: 450px) {
+	.lxwezrsl {
+		> .renote {
+			padding: 8px 16px 0 16px;
+		}
+
+		> .article {
+			padding: 16px;
+
+			> .header {
+				> .avatar {
+					width: 50px;
+					height: 50px;
+				}
+			}
+		}
+	}
+}
+
+@container (max-width: 350px) {
+	.lxwezrsl {
+		> .article {
+			> .main {
+				> .footer {
+					> .button {
+						&:not(:last-child) {
+							margin-right: 18px;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+@container (max-width: 300px) {
+	.lxwezrsl {
+		font-size: 0.825em;
+
+		> .article {
+			> .header {
+				> .avatar {
+					width: 50px;
+					height: 50px;
+				}
+			}
+
+			> .main {
+				> .footer {
+					> .button {
+						&:not(:last-child) {
+							margin-right: 12px;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+.muted {
+	padding: 8px;
+	text-align: center;
+	opacity: 0.7;
+}
+</style>
diff --git a/packages/frontend/src/components/MkNoteHeader.vue b/packages/frontend/src/components/MkNoteHeader.vue
new file mode 100644
index 0000000000..333c3ddbd9
--- /dev/null
+++ b/packages/frontend/src/components/MkNoteHeader.vue
@@ -0,0 +1,75 @@
+<template>
+<header class="kkwtjztg">
+	<MkA v-user-preview="note.user.id" class="name" :to="userPage(note.user)">
+		<MkUserName :user="note.user"/>
+	</MkA>
+	<div v-if="note.user.isBot" class="is-bot">bot</div>
+	<div class="username"><MkAcct :user="note.user"/></div>
+	<div class="info">
+		<MkA class="created-at" :to="notePage(note)">
+			<MkTime :time="note.createdAt"/>
+		</MkA>
+		<MkVisibility :note="note"/>
+	</div>
+</header>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as misskey from 'misskey-js';
+import MkVisibility from '@/components/MkVisibility.vue';
+import { notePage } from '@/filters/note';
+import { userPage } from '@/filters/user';
+
+defineProps<{
+	note: misskey.entities.Note;
+	pinned?: boolean;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.kkwtjztg {
+	display: flex;
+	align-items: baseline;
+	white-space: nowrap;
+
+	> .name {
+		flex-shrink: 1;
+		display: block;
+		margin: 0 .5em 0 0;
+		padding: 0;
+		overflow: hidden;
+		font-size: 1em;
+		font-weight: bold;
+		text-decoration: none;
+		text-overflow: ellipsis;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
+	> .is-bot {
+		flex-shrink: 0;
+		align-self: center;
+		margin: 0 .5em 0 0;
+		padding: 1px 6px;
+		font-size: 80%;
+		border: solid 0.5px var(--divider);
+		border-radius: 3px;
+	}
+
+	> .username {
+		flex-shrink: 9999999;
+		margin: 0 .5em 0 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	> .info {
+		flex-shrink: 0;
+		margin-left: auto;
+		font-size: 0.9em;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkNotePreview.vue b/packages/frontend/src/components/MkNotePreview.vue
new file mode 100644
index 0000000000..0c81059091
--- /dev/null
+++ b/packages/frontend/src/components/MkNotePreview.vue
@@ -0,0 +1,112 @@
+<template>
+<div v-size="{ min: [350, 500] }" class="fefdfafb">
+	<MkAvatar class="avatar" :user="$i"/>
+	<div class="main">
+		<div class="header">
+			<MkUserName :user="$i"/>
+		</div>
+		<div class="body">
+			<div class="content">
+				<Mfm :text="text.trim()" :author="$i" :i="$i"/>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+
+const props = defineProps<{
+	text: string;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.fefdfafb {
+	display: flex;
+	margin: 0;
+	padding: 0;
+	overflow: clip;
+	font-size: 0.95em;
+
+	&.min-width_350px {
+		> .avatar {
+			margin: 0 10px 0 0;
+			width: 44px;
+			height: 44px;
+		}
+	}
+
+	&.min-width_500px {
+		> .avatar {
+			margin: 0 12px 0 0;
+			width: 48px;
+			height: 48px;
+		}
+	}
+
+	> .avatar {
+		flex-shrink: 0;
+		display: block;
+		margin: 0 10px 0 0;
+		width: 40px;
+		height: 40px;
+		border-radius: 8px;
+		pointer-events: none;
+	}
+
+	> .main {
+		flex: 1;
+		min-width: 0;
+
+		> .header {
+			margin-bottom: 2px;
+			font-weight: bold;
+		}
+
+		> .body {
+
+			> .cw {
+				cursor: default;
+				display: block;
+				margin: 0;
+				padding: 0;
+				overflow-wrap: break-word;
+
+				> .text {
+					margin-right: 8px;
+				}
+			}
+
+			> .content {
+				> .text {
+					cursor: default;
+					margin: 0;
+					padding: 0;
+				}
+			}
+		}
+	}
+}
+
+@container (min-width: 350px) {
+	.fefdfafb {
+		> .avatar {
+			margin: 0 10px 0 0;
+			width: 44px;
+			height: 44px;
+		}
+	}
+}
+
+@container (min-width: 500px) {
+	.fefdfafb {
+		> .avatar {
+			margin: 0 12px 0 0;
+			width: 48px;
+			height: 48px;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkNoteSimple.vue b/packages/frontend/src/components/MkNoteSimple.vue
new file mode 100644
index 0000000000..96d29831d2
--- /dev/null
+++ b/packages/frontend/src/components/MkNoteSimple.vue
@@ -0,0 +1,119 @@
+<template>
+<div v-size="{ min: [350, 500] }" class="yohlumlk">
+	<MkAvatar class="avatar" :user="note.user"/>
+	<div class="main">
+		<XNoteHeader class="header" :note="note" :mini="true"/>
+		<div class="body">
+			<p v-if="note.cw != null" class="cw">
+				<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
+				<XCwButton v-model="showContent" :note="note"/>
+			</p>
+			<div v-show="note.cw == null || showContent" class="content">
+				<MkSubNoteContent class="text" :note="note"/>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as misskey from 'misskey-js';
+import XNoteHeader from '@/components/MkNoteHeader.vue';
+import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
+import XCwButton from '@/components/MkCwButton.vue';
+
+const props = defineProps<{
+	note: misskey.entities.Note;
+	pinned?: boolean;
+}>();
+
+const showContent = $ref(false);
+</script>
+
+<style lang="scss" scoped>
+.yohlumlk {
+	display: flex;
+	margin: 0;
+	padding: 0;
+	overflow: clip;
+	font-size: 0.95em;
+
+	&.min-width_350px {
+		> .avatar {
+			margin: 0 10px 0 0;
+			width: 44px;
+			height: 44px;
+		}
+	}
+
+	&.min-width_500px {
+		> .avatar {
+			margin: 0 12px 0 0;
+			width: 48px;
+			height: 48px;
+		}
+	}
+
+	> .avatar {
+		flex-shrink: 0;
+		display: block;
+		margin: 0 10px 0 0;
+		width: 40px;
+		height: 40px;
+		border-radius: 8px;
+	}
+
+	> .main {
+		flex: 1;
+		min-width: 0;
+
+		> .header {
+			margin-bottom: 2px;
+		}
+
+		> .body {
+
+			> .cw {
+				cursor: default;
+				display: block;
+				margin: 0;
+				padding: 0;
+				overflow-wrap: break-word;
+
+				> .text {
+					margin-right: 8px;
+				}
+			}
+
+			> .content {
+				> .text {
+					cursor: default;
+					margin: 0;
+					padding: 0;
+				}
+			}
+		}
+	}
+}
+
+@container (min-width: 350px) {
+	.yohlumlk {
+		> .avatar {
+			margin: 0 10px 0 0;
+			width: 44px;
+			height: 44px;
+		}
+	}
+}
+
+@container (min-width: 500px) {
+	.yohlumlk {
+		> .avatar {
+			margin: 0 12px 0 0;
+			width: 48px;
+			height: 48px;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkNoteSub.vue b/packages/frontend/src/components/MkNoteSub.vue
new file mode 100644
index 0000000000..d03ce7c434
--- /dev/null
+++ b/packages/frontend/src/components/MkNoteSub.vue
@@ -0,0 +1,140 @@
+<template>
+<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1 }">
+	<div class="main">
+		<MkAvatar class="avatar" :user="note.user"/>
+		<div class="body">
+			<XNoteHeader class="header" :note="note" :mini="true"/>
+			<div class="body">
+				<p v-if="note.cw != null" class="cw">
+					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
+					<XCwButton v-model="showContent" :note="note"/>
+				</p>
+				<div v-show="note.cw == null || showContent" class="content">
+					<MkSubNoteContent class="text" :note="note"/>
+				</div>
+			</div>
+		</div>
+	</div>
+	<template v-if="depth < 5">
+		<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :detail="true" :depth="depth + 1"/>
+	</template>
+	<div v-else class="more">
+		<MkA class="text _link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ti ti-chevron-double-right"></i></MkA>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as misskey from 'misskey-js';
+import XNoteHeader from '@/components/MkNoteHeader.vue';
+import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
+import XCwButton from '@/components/MkCwButton.vue';
+import { notePage } from '@/filters/note';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const props = withDefaults(defineProps<{
+	note: misskey.entities.Note;
+	detail?: boolean;
+
+	// how many notes are in between this one and the note being viewed in detail
+	depth?: number;
+}>(), {
+	depth: 1,
+});
+
+let showContent = $ref(false);
+let replies: misskey.entities.Note[] = $ref([]);
+
+if (props.detail) {
+	os.api('notes/children', {
+		noteId: props.note.id,
+		limit: 5,
+	}).then(res => {
+		replies = res;
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.wrpstxzv {
+	padding: 16px 32px;
+	font-size: 0.9em;
+
+	&.max-width_450px {
+		padding: 14px 16px;
+	}
+
+	&.children {
+		padding: 10px 0 0 16px;
+		font-size: 1em;
+
+		&.max-width_450px {
+			padding: 10px 0 0 8px;
+		}
+	}
+
+	> .main {
+		display: flex;
+
+		> .avatar {
+			flex-shrink: 0;
+			display: block;
+			margin: 0 8px 0 0;
+			width: 38px;
+			height: 38px;
+			border-radius: 8px;
+		}
+
+		> .body {
+			flex: 1;
+			min-width: 0;
+
+			> .header {
+				margin-bottom: 2px;
+			}
+
+			> .body {
+				> .cw {
+					cursor: default;
+					display: block;
+					margin: 0;
+					padding: 0;
+					overflow-wrap: break-word;
+
+					> .text {
+						margin-right: 8px;
+					}
+				}
+
+				> .content {
+					> .text {
+						margin: 0;
+						padding: 0;
+					}
+				}
+			}
+		}
+	}
+
+	> .reply, > .more {
+		border-left: solid 0.5px var(--divider);
+		margin-top: 10px;
+	}
+
+	> .more {
+		padding: 10px 0 0 16px;
+	}
+}
+
+@container (max-width: 450px) {
+	.wrpstxzv {
+		padding: 14px 16px;
+
+		&.children {
+			padding: 10px 0 0 8px;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue
new file mode 100644
index 0000000000..5abcdc2298
--- /dev/null
+++ b/packages/frontend/src/components/MkNotes.vue
@@ -0,0 +1,58 @@
+<template>
+<MkPagination ref="pagingComponent" :pagination="pagination">
+	<template #empty>
+		<div class="_fullinfo">
+			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+			<div>{{ i18n.ts.noNotes }}</div>
+		</div>
+	</template>
+
+	<template #default="{ items: notes }">
+		<div class="giivymft" :class="{ noGap }">
+			<XList ref="notes" v-slot="{ item: note }" :items="notes" :direction="pagination.reversed ? 'up' : 'down'" :reversed="pagination.reversed" :no-gap="noGap" :ad="true" class="notes">
+				<XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note"/>
+			</XList>
+		</div>
+	</template>
+</MkPagination>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import XNote from '@/components/MkNote.vue';
+import XList from '@/components/MkDateSeparatedList.vue';
+import MkPagination, { Paging } from '@/components/MkPagination.vue';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	pagination: Paging;
+	noGap?: boolean;
+}>();
+
+const pagingComponent = ref<InstanceType<typeof MkPagination>>();
+
+defineExpose({
+	pagingComponent,
+});
+</script>
+
+<style lang="scss" scoped>
+.giivymft {
+	&.noGap {
+		> .notes {
+			background: var(--panel);
+		}
+	}
+
+	&:not(.noGap) {
+		> .notes {
+			background: var(--bg);
+
+			.qtqtichx {
+				background: var(--panel);
+				border-radius: var(--radius);
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkNotification.vue b/packages/frontend/src/components/MkNotification.vue
new file mode 100644
index 0000000000..8b8d3f452d
--- /dev/null
+++ b/packages/frontend/src/components/MkNotification.vue
@@ -0,0 +1,323 @@
+<template>
+<div ref="elRef" v-size="{ max: [500, 600] }" class="qglefbjs" :class="notification.type">
+	<div class="head">
+		<MkAvatar v-if="notification.type === 'pollEnded'" class="icon" :user="notification.note.user"/>
+		<MkAvatar v-else-if="notification.user" class="icon" :user="notification.user"/>
+		<img v-else-if="notification.icon" class="icon" :src="notification.icon" alt=""/>
+		<div class="sub-icon" :class="notification.type">
+			<i v-if="notification.type === 'follow'" class="ti ti-plus"></i>
+			<i v-else-if="notification.type === 'receiveFollowRequest'" class="ti ti-clock"></i>
+			<i v-else-if="notification.type === 'followRequestAccepted'" class="ti ti-check"></i>
+			<i v-else-if="notification.type === 'groupInvited'" class="ti ti-certificate-2"></i>
+			<i v-else-if="notification.type === 'renote'" class="ti ti-repeat"></i>
+			<i v-else-if="notification.type === 'reply'" class="ti ti-arrow-back-up"></i>
+			<i v-else-if="notification.type === 'mention'" class="ti ti-at"></i>
+			<i v-else-if="notification.type === 'quote'" class="ti ti-quote"></i>
+			<i v-else-if="notification.type === 'pollVote'" class="ti ti-chart-arrows"></i>
+			<i v-else-if="notification.type === 'pollEnded'" class="ti ti-chart-arrows"></i>
+			<!-- notification.reaction が null になることはまずないが、ここでoptional chaining使うと一部ブラウザで刺さるので念の為 -->
+			<XReactionIcon
+				v-else-if="notification.type === 'reaction'"
+				ref="reactionRef"
+				:reaction="notification.reaction ? notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : notification.reaction"
+				:custom-emojis="notification.note.emojis"
+				:no-style="true"
+			/>
+		</div>
+	</div>
+	<div class="tail">
+		<header>
+			<span v-if="notification.type === 'pollEnded'">{{ i18n.ts._notification.pollEnded }}</span>
+			<MkA v-else-if="notification.user" v-user-preview="notification.user.id" class="name" :to="userPage(notification.user)"><MkUserName :user="notification.user"/></MkA>
+			<span v-else>{{ notification.header }}</span>
+			<MkTime v-if="withTime" :time="notification.createdAt" class="time"/>
+		</header>
+		<MkA v-if="notification.type === 'reaction'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<i class="ti ti-quote"></i>
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+			<i class="ti ti-quote"></i>
+		</MkA>
+		<MkA v-if="notification.type === 'renote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note.renote)">
+			<i class="ti ti-quote"></i>
+			<Mfm :text="getNoteSummary(notification.note.renote)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.renote.emojis"/>
+			<i class="ti ti-quote"></i>
+		</MkA>
+		<MkA v-if="notification.type === 'reply'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+		</MkA>
+		<MkA v-if="notification.type === 'mention'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+		</MkA>
+		<MkA v-if="notification.type === 'quote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+		</MkA>
+		<MkA v-if="notification.type === 'pollVote'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<i class="ti ti-quote"></i>
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+			<i class="ti ti-quote"></i>
+		</MkA>
+		<MkA v-if="notification.type === 'pollEnded'" class="text" :to="notePage(notification.note)" :title="getNoteSummary(notification.note)">
+			<i class="ti ti-quote"></i>
+			<Mfm :text="getNoteSummary(notification.note)" :plain="true" :nowrap="!full" :custom-emojis="notification.note.emojis"/>
+			<i class="ti ti-quote"></i>
+		</MkA>
+		<span v-if="notification.type === 'follow'" class="text" style="opacity: 0.6;">{{ i18n.ts.youGotNewFollower }}<div v-if="full"><MkFollowButton :user="notification.user" :full="true"/></div></span>
+		<span v-if="notification.type === 'followRequestAccepted'" class="text" style="opacity: 0.6;">{{ i18n.ts.followRequestAccepted }}</span>
+		<span v-if="notification.type === 'receiveFollowRequest'" class="text" style="opacity: 0.6;">{{ i18n.ts.receiveFollowRequest }}<div v-if="full && !followRequestDone"><button class="_textButton" @click="acceptFollowRequest()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectFollowRequest()">{{ i18n.ts.reject }}</button></div></span>
+		<span v-if="notification.type === 'groupInvited'" class="text" style="opacity: 0.6;">{{ i18n.ts.groupInvited }}: <b>{{ notification.invitation.group.name }}</b><div v-if="full && !groupInviteDone"><button class="_textButton" @click="acceptGroupInvitation()">{{ i18n.ts.accept }}</button> | <button class="_textButton" @click="rejectGroupInvitation()">{{ i18n.ts.reject }}</button></div></span>
+		<span v-if="notification.type === 'app'" class="text">
+			<Mfm :text="notification.body" :nowrap="!full"/>
+		</span>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue';
+import * as misskey from 'misskey-js';
+import XReactionIcon from '@/components/MkReactionIcon.vue';
+import MkFollowButton from '@/components/MkFollowButton.vue';
+import XReactionTooltip from '@/components/MkReactionTooltip.vue';
+import { getNoteSummary } from '@/scripts/get-note-summary';
+import { notePage } from '@/filters/note';
+import { userPage } from '@/filters/user';
+import { i18n } from '@/i18n';
+import * as os from '@/os';
+import { stream } from '@/stream';
+import { useTooltip } from '@/scripts/use-tooltip';
+
+const props = withDefaults(defineProps<{
+	notification: misskey.entities.Notification;
+	withTime?: boolean;
+	full?: boolean;
+}>(), {
+	withTime: false,
+	full: false,
+});
+
+const elRef = ref<HTMLElement>(null);
+const reactionRef = ref(null);
+
+let readObserver: IntersectionObserver | undefined;
+let connection;
+
+onMounted(() => {
+	if (!props.notification.isRead) {
+		readObserver = new IntersectionObserver((entries, observer) => {
+			if (!entries.some(entry => entry.isIntersecting)) return;
+			stream.send('readNotification', {
+				id: props.notification.id,
+			});
+			observer.disconnect();
+		});
+
+		readObserver.observe(elRef.value);
+
+		connection = stream.useChannel('main');
+		connection.on('readAllNotifications', () => readObserver.disconnect());
+
+		watch(props.notification.isRead, () => {
+			readObserver.disconnect();
+		});
+	}
+});
+
+onUnmounted(() => {
+	if (readObserver) readObserver.disconnect();
+	if (connection) connection.dispose();
+});
+
+const followRequestDone = ref(false);
+const groupInviteDone = ref(false);
+
+const acceptFollowRequest = () => {
+	followRequestDone.value = true;
+	os.api('following/requests/accept', { userId: props.notification.user.id });
+};
+
+const rejectFollowRequest = () => {
+	followRequestDone.value = true;
+	os.api('following/requests/reject', { userId: props.notification.user.id });
+};
+
+const acceptGroupInvitation = () => {
+	groupInviteDone.value = true;
+	os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id });
+};
+
+const rejectGroupInvitation = () => {
+	groupInviteDone.value = true;
+	os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
+};
+
+useTooltip(reactionRef, (showing) => {
+	os.popup(XReactionTooltip, {
+		showing,
+		reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction,
+		emojis: props.notification.note.emojis,
+		targetElement: reactionRef.value.$el,
+	}, {}, 'closed');
+});
+</script>
+
+<style lang="scss" scoped>
+.qglefbjs {
+	position: relative;
+	box-sizing: border-box;
+	padding: 24px 32px;
+	font-size: 0.9em;
+	overflow-wrap: break-word;
+	display: flex;
+	contain: content;
+
+	&.max-width_600px {
+		padding: 16px;
+		font-size: 0.9em;
+	}
+
+	&.max-width_500px {
+		padding: 12px;
+		font-size: 0.85em;
+	}
+
+	> .head {
+		position: sticky;
+		top: 0;
+		flex-shrink: 0;
+		width: 42px;
+		height: 42px;
+		margin-right: 8px;
+
+		> .icon {
+			display: block;
+			width: 100%;
+			height: 100%;
+			border-radius: 6px;
+		}
+
+		> .sub-icon {
+			position: absolute;
+			z-index: 1;
+			bottom: -2px;
+			right: -2px;
+			width: 20px;
+			height: 20px;
+			box-sizing: border-box;
+			border-radius: 100%;
+			background: var(--panel);
+			box-shadow: 0 0 0 3px var(--panel);
+			font-size: 12px;
+			text-align: center;
+
+			&:empty {
+				display: none;
+			}
+
+			> * {
+				color: #fff;
+				width: 100%;
+				height: 100%;
+			}
+
+			&.follow, &.followRequestAccepted, &.receiveFollowRequest, &.groupInvited {
+				padding: 3px;
+				background: #36aed2;
+				pointer-events: none;
+			}
+
+			&.renote {
+				padding: 3px;
+				background: #36d298;
+				pointer-events: none;
+			}
+
+			&.quote {
+				padding: 3px;
+				background: #36d298;
+				pointer-events: none;
+			}
+
+			&.reply {
+				padding: 3px;
+				background: #007aff;
+				pointer-events: none;
+			}
+
+			&.mention {
+				padding: 3px;
+				background: #88a6b7;
+				pointer-events: none;
+			}
+
+			&.pollVote {
+				padding: 3px;
+				background: #88a6b7;
+				pointer-events: none;
+			}
+
+			&.pollEnded {
+				padding: 3px;
+				background: #88a6b7;
+				pointer-events: none;
+			}
+		}
+	}
+
+	> .tail {
+		flex: 1;
+		min-width: 0;
+
+		> header {
+			display: flex;
+			align-items: baseline;
+			white-space: nowrap;
+
+			> .name {
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				min-width: 0;
+				overflow: hidden;
+			}
+
+			> .time {
+				margin-left: auto;
+				font-size: 0.9em;
+			}
+		}
+
+		> .text {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+
+			> i {
+				vertical-align: super;
+				font-size: 50%;
+				opacity: 0.5;
+			}
+
+			> i:first-child {
+				margin-right: 4px;
+			}
+
+			> i:last-child {
+				margin-left: 4px;
+			}
+		}
+	}
+}
+
+@container (max-width: 600px) {
+	.qglefbjs {
+		padding: 16px;
+		font-size: 0.9em;
+	}
+}
+
+@container (max-width: 500px) {
+	.qglefbjs {
+		padding: 12px;
+		font-size: 0.85em;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkNotificationSettingWindow.vue b/packages/frontend/src/components/MkNotificationSettingWindow.vue
new file mode 100644
index 0000000000..75bea2976c
--- /dev/null
+++ b/packages/frontend/src/components/MkNotificationSettingWindow.vue
@@ -0,0 +1,87 @@
+<template>
+<XModalWindow
+	ref="dialog"
+	:width="400"
+	:height="450"
+	:with-ok-button="true"
+	:ok-button-disabled="false"
+	@ok="ok()"
+	@close="dialog.close()"
+	@closed="emit('closed')"
+>
+	<template #header>{{ i18n.ts.notificationSetting }}</template>
+	<div class="_monolithic_">
+		<div v-if="showGlobalToggle" class="_section">
+			<MkSwitch v-model="useGlobalSetting">
+				{{ i18n.ts.useGlobalSetting }}
+				<template #caption>{{ i18n.ts.useGlobalSettingDesc }}</template>
+			</MkSwitch>
+		</div>
+		<div v-if="!useGlobalSetting" class="_section">
+			<MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo>
+			<MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton>
+			<MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton>
+			<MkSwitch v-for="ntype in notificationTypes" :key="ntype" v-model="typesMap[ntype]">{{ i18n.t(`_notification._types.${ntype}`) }}</MkSwitch>
+		</div>
+	</div>
+</XModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import { notificationTypes } from 'misskey-js';
+import MkSwitch from './form/switch.vue';
+import MkInfo from './MkInfo.vue';
+import MkButton from './MkButton.vue';
+import XModalWindow from '@/components/MkModalWindow.vue';
+import { i18n } from '@/i18n';
+
+const emit = defineEmits<{
+	(ev: 'done', v: { includingTypes: string[] | null }): void,
+	(ev: 'closed'): void,
+}>();
+
+const props = withDefaults(defineProps<{
+	includingTypes?: typeof notificationTypes[number][] | null;
+	showGlobalToggle?: boolean;
+}>(), {
+	includingTypes: () => [],
+	showGlobalToggle: true,
+});
+
+let includingTypes = $computed(() => props.includingTypes || []);
+
+const dialog = $ref<InstanceType<typeof XModalWindow>>();
+
+let typesMap = $ref<Record<typeof notificationTypes[number], boolean>>({});
+let useGlobalSetting = $ref((includingTypes === null || includingTypes.length === 0) && props.showGlobalToggle);
+
+for (const ntype of notificationTypes) {
+	typesMap[ntype] = includingTypes.includes(ntype);
+}
+
+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>
diff --git a/packages/frontend/src/components/MkNotificationToast.vue b/packages/frontend/src/components/MkNotificationToast.vue
new file mode 100644
index 0000000000..07640792c0
--- /dev/null
+++ b/packages/frontend/src/components/MkNotificationToast.vue
@@ -0,0 +1,68 @@
+<template>
+<div class="mk-notification-toast" :style="{ zIndex }">
+	<transition :name="$store.state.animation ? 'notification-toast' : ''" appear @after-leave="$emit('closed')">
+		<XNotification v-if="showing" :notification="notification" class="notification _acrylic"/>
+	</transition>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import XNotification from '@/components/MkNotification.vue';
+import * as os from '@/os';
+
+defineProps<{
+	notification: any; // TODO
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const zIndex = os.claimZIndex('high');
+let showing = $ref(true);
+
+onMounted(() => {
+	window.setTimeout(() => {
+		showing = false;
+	}, 6000);
+});
+</script>
+
+<style lang="scss" scoped>
+.notification-toast-enter-active, .notification-toast-leave-active {
+	transition: opacity 0.3s, transform 0.3s !important;
+}
+.notification-toast-enter-from, .notification-toast-leave-to {
+	opacity: 0;
+	transform: translateX(-250px);
+}
+
+.mk-notification-toast {
+	position: fixed;
+	left: 0;
+	width: 250px;
+	top: 32px;
+	padding: 0 32px;
+	pointer-events: none;
+	container-type: inline-size;
+
+	@media (max-width: 700px) {
+		top: initial;
+		bottom: 112px;
+		padding: 0 16px;
+	}
+
+	@media (max-width: 500px) {
+		bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
+		padding: 0 8px;
+	}
+
+	> .notification {
+		height: 100%;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+		border-radius: 8px;
+		overflow: hidden;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkNotifications.vue b/packages/frontend/src/components/MkNotifications.vue
new file mode 100644
index 0000000000..0e1cc06743
--- /dev/null
+++ b/packages/frontend/src/components/MkNotifications.vue
@@ -0,0 +1,104 @@
+<template>
+<MkPagination ref="pagingComponent" :pagination="pagination">
+	<template #empty>
+		<div class="_fullinfo">
+			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+			<div>{{ i18n.ts.noNotifications }}</div>
+		</div>
+	</template>
+
+	<template #default="{ items: notifications }">
+		<XList v-slot="{ item: notification }" class="elsfgstc" :items="notifications" :no-gap="true">
+			<XNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="notification.id" :note="notification.note"/>
+			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
+		</XList>
+	</template>
+</MkPagination>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, markRaw, onUnmounted, onMounted, computed, ref } from 'vue';
+import { notificationTypes } from 'misskey-js';
+import MkPagination, { Paging } from '@/components/MkPagination.vue';
+import XNotification from '@/components/MkNotification.vue';
+import XList from '@/components/MkDateSeparatedList.vue';
+import XNote from '@/components/MkNote.vue';
+import * as os from '@/os';
+import { stream } from '@/stream';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	includeTypes?: typeof notificationTypes[number][];
+	unreadOnly?: boolean;
+}>();
+
+const pagingComponent = ref<InstanceType<typeof MkPagination>>();
+
+const pagination: Paging = {
+	endpoint: 'i/notifications' as const,
+	limit: 10,
+	params: computed(() => ({
+		includeTypes: props.includeTypes ?? undefined,
+		excludeTypes: props.includeTypes ? undefined : $i.mutingNotificationTypes,
+		unreadOnly: props.unreadOnly,
+	})),
+};
+
+const onNotification = (notification) => {
+	const isMuted = props.includeTypes ? !props.includeTypes.includes(notification.type) : $i.mutingNotificationTypes.includes(notification.type);
+	if (isMuted || document.visibilityState === 'visible') {
+		stream.send('readNotification', {
+			id: notification.id,
+		});
+	}
+
+	if (!isMuted) {
+		pagingComponent.value.prepend({
+			...notification,
+			isRead: document.visibilityState === 'visible',
+		});
+	}
+};
+
+let connection;
+
+onMounted(() => {
+	connection = stream.useChannel('main');
+	connection.on('notification', onNotification);
+	connection.on('readAllNotifications', () => {
+		if (pagingComponent.value) {
+			for (const item of pagingComponent.value.queue) {
+				item.isRead = true;
+			}
+			for (const item of pagingComponent.value.items) {
+				item.isRead = true;
+			}
+		}
+	});
+	connection.on('readNotifications', notificationIds => {
+		if (pagingComponent.value) {
+			for (let i = 0; i < pagingComponent.value.queue.length; i++) {
+				if (notificationIds.includes(pagingComponent.value.queue[i].id)) {
+					pagingComponent.value.queue[i].isRead = true;
+				}
+			}
+			for (let i = 0; i < (pagingComponent.value.items || []).length; i++) {
+				if (notificationIds.includes(pagingComponent.value.items[i].id)) {
+					pagingComponent.value.items[i].isRead = true;
+				}
+			}
+		}
+	});
+});
+
+onUnmounted(() => {
+	if (connection) connection.dispose();
+});
+</script>
+
+<style lang="scss" scoped>
+.elsfgstc {
+	background: var(--panel);
+}
+</style>
diff --git a/packages/frontend/src/components/MkNumberDiff.vue b/packages/frontend/src/components/MkNumberDiff.vue
new file mode 100644
index 0000000000..e7d4a5472a
--- /dev/null
+++ b/packages/frontend/src/components/MkNumberDiff.vue
@@ -0,0 +1,47 @@
+<template>
+<span class="ceaaebcd" :class="{ isPlus, isMinus, isZero }">
+	<slot name="before"></slot>{{ isPlus ? '+' : '' }}{{ number(value) }}<slot name="after"></slot>
+</span>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import number from '@/filters/number';
+
+export default defineComponent({
+	props: {
+		value: {
+			type: Number,
+			required: true,
+		},
+	},
+
+	setup(props) {
+		const isPlus = computed(() => props.value > 0);
+		const isMinus = computed(() => props.value < 0);
+		const isZero = computed(() => props.value === 0);
+		return {
+			isPlus,
+			isMinus,
+			isZero,
+			number,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.ceaaebcd {
+	&.isPlus {
+		color: var(--success);
+	}
+
+	&.isMinus {
+		color: var(--error);
+	}
+
+	&.isZero {
+		opacity: 0.5;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkObjectView.value.vue b/packages/frontend/src/components/MkObjectView.value.vue
new file mode 100644
index 0000000000..0c7230d783
--- /dev/null
+++ b/packages/frontend/src/components/MkObjectView.value.vue
@@ -0,0 +1,160 @@
+<template>
+<div class="igpposuu _monospace">
+	<div v-if="value === null" class="null">null</div>
+	<div v-else-if="typeof value === 'boolean'" class="boolean" :class="{ true: value, false: !value }">{{ value ? 'true' : 'false' }}</div>
+	<div v-else-if="typeof value === 'string'" class="string">"{{ value }}"</div>
+	<div v-else-if="typeof value === 'number'" class="number">{{ number(value) }}</div>
+	<div v-else-if="isArray(value) && isEmpty(value)" class="array empty">[]</div>
+	<div v-else-if="isArray(value)" class="array">
+		<div v-for="i in value.length" class="element">
+			{{ i }}: <XValue :value="value[i - 1]" collapsed/>
+		</div>
+	</div>
+	<div v-else-if="isObject(value) && isEmpty(value)" class="object empty">{}</div>
+	<div v-else-if="isObject(value)" class="object">
+		<div v-for="k in Object.keys(value)" class="kv">
+			<button class="toggle _button" :class="{ visible: collapsable(value[k]) }" @click="collapsed[k] = !collapsed[k]">{{ collapsed[k] ? '+' : '-' }}</button>
+			<div class="k">{{ k }}:</div>
+			<div v-if="collapsed[k]" class="v">
+				<button class="_button" @click="collapsed[k] = !collapsed[k]">
+					<template v-if="typeof value[k] === 'string'">"..."</template>
+					<template v-else-if="isArray(value[k])">[...]</template>
+					<template v-else-if="isObject(value[k])">{...}</template>
+				</button>
+			</div>
+			<div v-else class="v"><XValue :value="value[k]"/></div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, ref } from 'vue';
+import number from '@/filters/number';
+
+export default defineComponent({
+	name: 'XValue',
+
+	props: {
+		value: {
+			required: true,
+		},
+	},
+
+	setup(props) {
+		const collapsed = reactive({});
+
+		if (isObject(props.value)) {
+			for (const key in props.value) {
+				collapsed[key] = collapsable(props.value[key]);
+			}
+		}
+
+		function isObject(v): boolean {
+			return typeof v === 'object' && !Array.isArray(v) && v !== null;
+		}
+
+		function isArray(v): boolean {
+			return Array.isArray(v);
+		}
+
+		function isEmpty(v): boolean {
+			return (isArray(v) && v.length === 0) || (isObject(v) && Object.keys(v).length === 0);
+		}
+
+		function collapsable(v): boolean {
+			return (isObject(v) || isArray(v)) && !isEmpty(v);
+		}
+
+		return {
+			number,
+			collapsed,
+			isObject,
+			isArray,
+			isEmpty,
+			collapsable,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.igpposuu {
+	display: inline;
+
+	> .null {
+		display: inline;
+		opacity: 0.7;
+	}
+
+	> .boolean {
+		display: inline;
+		color: var(--codeBoolean);
+
+		&.true {
+			font-weight: bold;
+		}
+
+		&.false {
+			opacity: 0.7;
+		}
+	}
+
+	> .string {
+		display: inline;
+		color: var(--codeString);
+	}
+
+	> .number {
+		display: inline;
+		color: var(--codeNumber);
+	}
+
+	> .array.empty {
+		display: inline;
+		opacity: 0.7;
+	}
+
+	> .array:not(.empty) {
+		display: inline;
+
+		> .element {
+			display: block;
+			padding-left: 16px;
+		}
+	}
+
+	> .object.empty {
+		display: inline;
+		opacity: 0.7;
+	}
+
+	> .object:not(.empty) {
+		display: inline;
+
+		> .kv {
+			display: block;
+			padding-left: 16px;
+
+			> .toggle {
+				width: 16px;
+				color: var(--accent);
+				visibility: hidden;
+
+				&.visible {
+					visibility: visible;
+				}
+			}
+
+			> .k {
+				display: inline;
+				margin-right: 8px;
+			}
+
+			> .v {
+				display: inline;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkObjectView.vue b/packages/frontend/src/components/MkObjectView.vue
new file mode 100644
index 0000000000..55578a37f6
--- /dev/null
+++ b/packages/frontend/src/components/MkObjectView.vue
@@ -0,0 +1,20 @@
+<template>
+<div class="zhyxdalp">
+	<XValue :value="value" :collapsed="false"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import XValue from './MkObjectView.value.vue';
+
+const props = defineProps<{
+	value: Record<string, unknown>;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.zhyxdalp {
+
+}
+</style>
diff --git a/packages/frontend/src/components/MkPagePreview.vue b/packages/frontend/src/components/MkPagePreview.vue
new file mode 100644
index 0000000000..009582e540
--- /dev/null
+++ b/packages/frontend/src/components/MkPagePreview.vue
@@ -0,0 +1,162 @@
+<template>
+<MkA :to="`/@${page.user.username}/pages/${page.name}`" class="vhpxefrj _block" tabindex="-1">
+	<div v-if="page.eyeCatchingImage" class="thumbnail" :style="`background-image: url('${page.eyeCatchingImage.thumbnailUrl}')`"></div>
+	<article>
+		<header>
+			<h1 :title="page.title">{{ page.title }}</h1>
+		</header>
+		<p v-if="page.summary" :title="page.summary">{{ page.summary.length > 85 ? page.summary.slice(0, 85) + '…' : page.summary }}</p>
+		<footer>
+			<img class="icon" :src="page.user.avatarUrl"/>
+			<p>{{ userName(page.user) }}</p>
+		</footer>
+	</article>
+</MkA>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { userName } from '@/filters/user';
+import * as os from '@/os';
+
+export default defineComponent({
+	props: {
+		page: {
+			type: Object,
+			required: true,
+		},
+	},
+	methods: {
+		userName,
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.vhpxefrj {
+	display: block;
+
+	&:hover {
+		text-decoration: none;
+		color: var(--accent);
+	}
+
+	> .thumbnail {
+		width: 100%;
+		height: 200px;
+		background-position: center;
+		background-size: cover;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		> button {
+			font-size: 3.5em;
+			opacity: 0.7;
+
+			&:hover {
+				font-size: 4em;
+				opacity: 0.9;
+			}
+		}
+
+		& + article {
+			left: 100px;
+			width: calc(100% - 100px);
+		}
+	}
+
+	> article {
+		padding: 16px;
+
+		> header {
+			margin-bottom: 8px;
+
+			> h1 {
+				margin: 0;
+				font-size: 1em;
+				color: var(--urlPreviewTitle);
+			}
+		}
+
+		> p {
+			margin: 0;
+			color: var(--urlPreviewText);
+			font-size: 0.8em;
+		}
+
+		> footer {
+			margin-top: 8px;
+			height: 16px;
+
+			> img {
+				display: inline-block;
+				width: 16px;
+				height: 16px;
+				margin-right: 4px;
+				vertical-align: top;
+			}
+
+			> p {
+				display: inline-block;
+				margin: 0;
+				color: var(--urlPreviewInfo);
+				font-size: 0.8em;
+				line-height: 16px;
+				vertical-align: top;
+			}
+		}
+	}
+
+	@media (max-width: 700px) {
+		> .thumbnail {
+			position: relative;
+			width: 100%;
+			height: 100px;
+
+			& + article {
+				left: 0;
+				width: 100%;
+			}
+		}
+	}
+
+	@media (max-width: 550px) {
+		font-size: 12px;
+
+		> .thumbnail {
+			height: 80px;
+		}
+
+		> article {
+			padding: 12px;
+		}
+	}
+
+	@media (max-width: 500px) {
+		font-size: 10px;
+
+		> .thumbnail {
+			height: 70px;
+		}
+
+		> article {
+			padding: 8px;
+
+			> header {
+				margin-bottom: 4px;
+			}
+
+			> footer {
+				margin-top: 4px;
+
+				> img {
+					width: 12px;
+					height: 12px;
+				}
+			}
+		}
+	}
+}
+
+</style>
diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
new file mode 100644
index 0000000000..29d45558a7
--- /dev/null
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -0,0 +1,140 @@
+<template>
+<XWindow
+	ref="windowEl"
+	:initial-width="500"
+	:initial-height="500"
+	:can-resize="true"
+	:close-button="true"
+	:buttons-left="buttonsLeft"
+	:buttons-right="buttonsRight"
+	:contextmenu="contextmenu"
+	@closed="$emit('closed')"
+>
+	<template #header>
+		<template v-if="pageMetadata?.value">
+			<i v-if="pageMetadata.value.icon" class="icon" :class="pageMetadata.value.icon" style="margin-right: 0.5em;"></i>
+			<span>{{ pageMetadata.value.title }}</span>
+		</template>
+	</template>
+
+	<div class="yrolvcoq" :style="{ background: pageMetadata?.value?.bg }">
+		<RouterView :router="router"/>
+	</div>
+</XWindow>
+</template>
+
+<script lang="ts" setup>
+import { ComputedRef, inject, provide } from 'vue';
+import RouterView from '@/components/global/RouterView.vue';
+import XWindow from '@/components/MkWindow.vue';
+import { popout as _popout } from '@/scripts/popout';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import { url } from '@/config';
+import * as os from '@/os';
+import { mainRouter, routes } from '@/router';
+import { Router } from '@/nirax';
+import { i18n } from '@/i18n';
+import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+
+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<{ path: string; key: any; }[]>([{
+	path: router.getCurrentPath(),
+	key: router.getCurrentKey(),
+}]);
+const buttonsLeft = $computed(() => {
+	const buttons = [];
+
+	if (history.length > 1) {
+		buttons.push({
+			icon: 'ti ti-arrow-left',
+			onClick: back,
+		});
+	}
+
+	return buttons;
+});
+const buttonsRight = $computed(() => {
+	const buttons = [{
+		icon: 'ti ti-player-eject',
+		title: i18n.ts.showInPage,
+		onClick: expand,
+	}];
+
+	return buttons;
+});
+
+router.addListener('push', ctx => {
+	history.push({ path: ctx.path, key: ctx.key });
+});
+
+provide('router', router);
+provideMetadataReceiver((info) => {
+	pageMetadata = info;
+});
+provide('shouldOmitHeaderTitle', true);
+provide('shouldHeaderThin', true);
+
+const contextmenu = $computed(() => ([{
+	icon: 'ti ti-player-eject',
+	text: i18n.ts.showInPage,
+	action: expand,
+}, {
+	icon: 'ti ti-window-maximize',
+	text: i18n.ts.popout,
+	action: popout,
+}, {
+	icon: 'ti ti-external-link',
+	text: i18n.ts.openInNewTab,
+	action: () => {
+		window.open(url + router.getCurrentPath(), '_blank');
+		windowEl.close();
+	},
+}, {
+	icon: 'ti ti-link',
+	text: i18n.ts.copyLink,
+	action: () => {
+		copyToClipboard(url + router.getCurrentPath());
+	},
+}]));
+
+function back() {
+	history.pop();
+	router.replace(history[history.length - 1].path, history[history.length - 1].key);
+}
+
+function close() {
+	windowEl.close();
+}
+
+function expand() {
+	mainRouter.push(router.getCurrentPath(), 'forcePage');
+	windowEl.close();
+}
+
+function popout() {
+	_popout(router.getCurrentPath(), windowEl.$el);
+	windowEl.close();
+}
+
+defineExpose({
+	close,
+});
+</script>
+
+<style lang="scss" scoped>
+.yrolvcoq {
+	min-height: 100%;
+	background: var(--bg);
+}
+</style>
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
new file mode 100644
index 0000000000..291409171a
--- /dev/null
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -0,0 +1,317 @@
+<template>
+<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+	<MkLoading v-if="fetching"/>
+
+	<MkError v-else-if="error" @retry="init()"/>
+
+	<div v-else-if="empty" key="_empty_" class="empty">
+		<slot name="empty">
+			<div class="_fullinfo">
+				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+				<div>{{ i18n.ts.nothing }}</div>
+			</div>
+		</slot>
+	</div>
+
+	<div v-else ref="rootEl">
+		<div v-show="pagination.reversed && more" key="_more_" class="cxiknjgy _gap">
+			<MkButton v-if="!moreFetching" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMoreAhead">
+				{{ i18n.ts.loadMore }}
+			</MkButton>
+			<MkLoading v-else class="loading"/>
+		</div>
+		<slot :items="items"></slot>
+		<div v-show="!pagination.reversed && more" key="_more_" class="cxiknjgy _gap">
+			<MkButton v-if="!moreFetching" v-appear="($store.state.enableInfiniteScroll && !disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
+				{{ i18n.ts.loadMore }}
+			</MkButton>
+			<MkLoading v-else class="loading"/>
+		</div>
+	</div>
+</transition>
+</template>
+
+<script lang="ts" setup>
+import { computed, ComputedRef, isRef, markRaw, onActivated, onDeactivated, Ref, ref, watch } from 'vue';
+import * as misskey from 'misskey-js';
+import * as os from '@/os';
+import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer } from '@/scripts/scroll';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n';
+
+const SECOND_FETCH_LIMIT = 30;
+
+export type Paging<E extends keyof misskey.Endpoints = keyof misskey.Endpoints> = {
+	endpoint: E;
+	limit: number;
+	params?: misskey.Endpoints[E]['req'] | ComputedRef<misskey.Endpoints[E]['req']>;
+
+	/**
+	 * 検索APIのような、ページング不可なエンドポイントを利用する場合
+	 * (そのようなAPIをこの関数で使うのは若干矛盾してるけど)
+	 */
+	noPaging?: boolean;
+
+	/**
+	 * items 配列の中身を逆順にする(新しい方が最後)
+	 */
+	reversed?: boolean;
+
+	offsetMode?: boolean;
+};
+
+const props = withDefaults(defineProps<{
+	pagination: Paging;
+	disableAutoLoad?: boolean;
+	displayLimit?: number;
+}>(), {
+	displayLimit: 30,
+});
+
+const emit = defineEmits<{
+	(ev: 'queue', count: number): void;
+}>();
+
+type Item = { id: string; [another: string]: unknown; };
+
+const rootEl = ref<HTMLElement>();
+const items = ref<Item[]>([]);
+const queue = ref<Item[]>([]);
+const offset = ref(0);
+const fetching = ref(true);
+const moreFetching = ref(false);
+const more = ref(false);
+const backed = ref(false); // 遡り中か否か
+const isBackTop = ref(false);
+const empty = computed(() => items.value.length === 0);
+const error = ref(false);
+
+const init = async (): Promise<void> => {
+	queue.value = [];
+	fetching.value = true;
+	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
+	await os.api(props.pagination.endpoint, {
+		...params,
+		limit: props.pagination.noPaging ? (props.pagination.limit || 10) : (props.pagination.limit || 10) + 1,
+	}).then(res => {
+		for (let i = 0; i < res.length; i++) {
+			const item = res[i];
+			if (props.pagination.reversed) {
+				if (i === res.length - 2) item._shouldInsertAd_ = true;
+			} else {
+				if (i === 3) item._shouldInsertAd_ = true;
+			}
+		}
+		if (!props.pagination.noPaging && (res.length > (props.pagination.limit || 10))) {
+			res.pop();
+			items.value = props.pagination.reversed ? [...res].reverse() : res;
+			more.value = true;
+		} else {
+			items.value = props.pagination.reversed ? [...res].reverse() : res;
+			more.value = false;
+		}
+		offset.value = res.length;
+		error.value = false;
+		fetching.value = false;
+	}, err => {
+		error.value = true;
+		fetching.value = false;
+	});
+};
+
+const reload = (): void => {
+	items.value = [];
+	init();
+};
+
+const fetchMore = async (): Promise<void> => {
+	if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
+	moreFetching.value = true;
+	backed.value = true;
+	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
+	await os.api(props.pagination.endpoint, {
+		...params,
+		limit: SECOND_FETCH_LIMIT + 1,
+		...(props.pagination.offsetMode ? {
+			offset: offset.value,
+		} : props.pagination.reversed ? {
+			sinceId: items.value[0].id,
+		} : {
+			untilId: items.value[items.value.length - 1].id,
+		}),
+	}).then(res => {
+		for (let i = 0; i < res.length; i++) {
+			const item = res[i];
+			if (props.pagination.reversed) {
+				if (i === res.length - 9) item._shouldInsertAd_ = true;
+			} else {
+				if (i === 10) item._shouldInsertAd_ = true;
+			}
+		}
+		if (res.length > SECOND_FETCH_LIMIT) {
+			res.pop();
+			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
+			more.value = true;
+		} else {
+			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
+			more.value = false;
+		}
+		offset.value += res.length;
+		moreFetching.value = false;
+	}, err => {
+		moreFetching.value = false;
+	});
+};
+
+const fetchMoreAhead = async (): Promise<void> => {
+	if (!more.value || fetching.value || moreFetching.value || items.value.length === 0) return;
+	moreFetching.value = true;
+	const params = props.pagination.params ? isRef(props.pagination.params) ? props.pagination.params.value : props.pagination.params : {};
+	await os.api(props.pagination.endpoint, {
+		...params,
+		limit: SECOND_FETCH_LIMIT + 1,
+		...(props.pagination.offsetMode ? {
+			offset: offset.value,
+		} : props.pagination.reversed ? {
+			untilId: items.value[0].id,
+		} : {
+			sinceId: items.value[items.value.length - 1].id,
+		}),
+	}).then(res => {
+		if (res.length > SECOND_FETCH_LIMIT) {
+			res.pop();
+			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
+			more.value = true;
+		} else {
+			items.value = props.pagination.reversed ? [...res].reverse().concat(items.value) : items.value.concat(res);
+			more.value = false;
+		}
+		offset.value += res.length;
+		moreFetching.value = false;
+	}, err => {
+		moreFetching.value = false;
+	});
+};
+
+const prepend = (item: Item): void => {
+	if (props.pagination.reversed) {
+		if (rootEl.value) {
+			const container = getScrollContainer(rootEl.value);
+			if (container == null) {
+				// TODO?
+			} else {
+				const pos = getScrollPosition(rootEl.value);
+				const viewHeight = container.clientHeight;
+				const height = container.scrollHeight;
+				const isBottom = (pos + viewHeight > height - 32);
+				if (isBottom) {
+					// オーバーフローしたら古いアイテムは捨てる
+					if (items.value.length >= props.displayLimit) {
+						// このやり方だとVue 3.2以降アニメーションが動かなくなる
+						//items.value = items.value.slice(-props.displayLimit);
+						while (items.value.length >= props.displayLimit) {
+							items.value.shift();
+						}
+						more.value = true;
+					}
+				}
+			}
+		}
+		items.value.push(item);
+		// TODO
+	} else {
+		// 初回表示時はunshiftだけでOK
+		if (!rootEl.value) {
+			items.value.unshift(item);
+			return;
+		}
+
+		const isTop = isBackTop.value || (document.body.contains(rootEl.value) && isTopVisible(rootEl.value));
+
+		if (isTop) {
+			// Prepend the item
+			items.value.unshift(item);
+
+			// オーバーフローしたら古いアイテムは捨てる
+			if (items.value.length >= props.displayLimit) {
+				// このやり方だとVue 3.2以降アニメーションが動かなくなる
+				//this.items = items.value.slice(0, props.displayLimit);
+				while (items.value.length >= props.displayLimit) {
+					items.value.pop();
+				}
+				more.value = true;
+			}
+		} else {
+			queue.value.push(item);
+			onScrollTop(rootEl.value, () => {
+				for (const item of queue.value) {
+					prepend(item);
+				}
+				queue.value = [];
+			});
+		}
+	}
+};
+
+const append = (item: Item): void => {
+	items.value.push(item);
+};
+
+const removeItem = (finder: (item: Item) => boolean) => {
+	const i = items.value.findIndex(finder);
+	items.value.splice(i, 1);
+};
+
+const updateItem = (id: Item['id'], replacer: (old: Item) => Item): void => {
+	const i = items.value.findIndex(item => item.id === id);
+	items.value[i] = replacer(items.value[i]);
+};
+
+if (props.pagination.params && isRef(props.pagination.params)) {
+	watch(props.pagination.params, init, { deep: true });
+}
+
+watch(queue, (a, b) => {
+	if (a.length === 0 && b.length === 0) return;
+	emit('queue', queue.value.length);
+}, { deep: true });
+
+init();
+
+onActivated(() => {
+	isBackTop.value = false;
+});
+
+onDeactivated(() => {
+	isBackTop.value = window.scrollY === 0;
+});
+
+defineExpose({
+	items,
+	queue,
+	backed,
+	reload,
+	prepend,
+	append,
+	removeItem,
+	updateItem,
+});
+</script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
+.cxiknjgy {
+	> .button {
+		margin-left: auto;
+		margin-right: auto;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue
new file mode 100644
index 0000000000..a1b927e42a
--- /dev/null
+++ b/packages/frontend/src/components/MkPoll.vue
@@ -0,0 +1,152 @@
+<template>
+<div class="tivcixzd" :class="{ done: closed || isVoted }">
+	<ul>
+		<li v-for="(choice, i) in note.poll.choices" :key="i" :class="{ voted: choice.voted }" @click="vote(i)">
+			<div class="backdrop" :style="{ 'width': `${showResult ? (choice.votes / total * 100) : 0}%` }"></div>
+			<span>
+				<template v-if="choice.isVoted"><i class="ti ti-check"></i></template>
+				<Mfm :text="choice.text" :plain="true" :custom-emojis="note.emojis"/>
+				<span v-if="showResult" class="votes">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span>
+			</span>
+		</li>
+	</ul>
+	<p v-if="!readOnly">
+		<span>{{ $t('_poll.totalVotes', { n: total }) }}</span>
+		<span> · </span>
+		<a v-if="!closed && !isVoted" @click="showResult = !showResult">{{ showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult }}</a>
+		<span v-if="isVoted">{{ i18n.ts._poll.voted }}</span>
+		<span v-else-if="closed">{{ i18n.ts._poll.closed }}</span>
+		<span v-if="remaining > 0"> · {{ timer }}</span>
+	</p>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onUnmounted, ref, toRef } from 'vue';
+import * as misskey from 'misskey-js';
+import { sum } from '@/scripts/array';
+import { pleaseLogin } from '@/scripts/please-login';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { useInterval } from '@/scripts/use-interval';
+
+const props = defineProps<{
+	note: misskey.entities.Note;
+	readOnly?: boolean;
+}>();
+
+const remaining = ref(-1);
+
+const total = computed(() => sum(props.note.poll.choices.map(x => x.votes)));
+const closed = computed(() => remaining.value === 0);
+const isVoted = computed(() => !props.note.poll.multiple && props.note.poll.choices.some(c => c.isVoted));
+const timer = computed(() => i18n.t(
+	remaining.value >= 86400 ? '_poll.remainingDays' :
+	remaining.value >= 3600 ? '_poll.remainingHours' :
+	remaining.value >= 60 ? '_poll.remainingMinutes' : '_poll.remainingSeconds', {
+		s: Math.floor(remaining.value % 60),
+		m: Math.floor(remaining.value / 60) % 60,
+		h: Math.floor(remaining.value / 3600) % 24,
+		d: Math.floor(remaining.value / 86400),
+	}));
+
+const showResult = ref(props.readOnly || isVoted.value);
+
+// 期限付きアンケート
+if (props.note.poll.expiresAt) {
+	const tick = () => {
+		remaining.value = Math.floor(Math.max(new Date(props.note.poll.expiresAt).getTime() - Date.now(), 0) / 1000);
+		if (remaining.value === 0) {
+			showResult.value = true;
+		}
+	};
+
+	useInterval(tick, 3000, {
+		immediate: true,
+		afterMounted: false,
+	});
+}
+
+const vote = async (id) => {
+	pleaseLogin();
+
+	if (props.readOnly || closed.value || isVoted.value) return;
+
+	const { canceled } = await os.confirm({
+		type: 'question',
+		text: i18n.t('voteConfirm', { choice: props.note.poll.choices[id].text }),
+	});
+	if (canceled) return;
+
+	await os.api('notes/polls/vote', {
+		noteId: props.note.id,
+		choice: id,
+	});
+	if (!showResult.value) showResult.value = !props.note.poll.multiple;
+};
+</script>
+
+<style lang="scss" scoped>
+.tivcixzd {
+	> ul {
+		display: block;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+
+		> li {
+			display: block;
+			position: relative;
+			margin: 4px 0;
+			padding: 4px;
+			//border: solid 0.5px var(--divider);
+			background: var(--accentedBg);
+			border-radius: 4px;
+			overflow: hidden;
+			cursor: pointer;
+
+			> .backdrop {
+				position: absolute;
+				top: 0;
+				left: 0;
+				height: 100%;
+				background: var(--accent);
+				background: linear-gradient(90deg,var(--buttonGradateA),var(--buttonGradateB));
+				transition: width 1s ease;
+			}
+
+			> span {
+				position: relative;
+				display: inline-block;
+				padding: 3px 5px;
+				background: var(--panel);
+				border-radius: 3px;
+
+				> i {
+					margin-right: 4px;
+					color: var(--accent);
+				}
+
+				> .votes {
+					margin-left: 4px;
+					opacity: 0.7;
+				}
+			}
+		}
+	}
+
+	> p {
+		color: var(--fg);
+
+		a {
+			color: inherit;
+		}
+	}
+
+	&.done {
+		> ul > li {
+			cursor: default;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkPollEditor.vue b/packages/frontend/src/components/MkPollEditor.vue
new file mode 100644
index 0000000000..556abc5fd0
--- /dev/null
+++ b/packages/frontend/src/components/MkPollEditor.vue
@@ -0,0 +1,219 @@
+<template>
+<div class="zmdxowus">
+	<p v-if="choices.length < 2" class="caution">
+		<i class="ti ti-alert-triangle"></i>{{ i18n.ts._poll.noOnlyOneChoice }}
+	</p>
+	<ul>
+		<li v-for="(choice, i) in choices" :key="i">
+			<MkInput class="input" small :model-value="choice" :placeholder="$t('_poll.choiceN', { n: i + 1 })" @update:model-value="onInput(i, $event)">
+			</MkInput>
+			<button class="_button" @click="remove(i)">
+				<i class="ti ti-x"></i>
+			</button>
+		</li>
+	</ul>
+	<MkButton v-if="choices.length < 10" class="add" @click="add">{{ i18n.ts.add }}</MkButton>
+	<MkButton v-else class="add" disabled>{{ i18n.ts._poll.noMore }}</MkButton>
+	<MkSwitch v-model="multiple">{{ i18n.ts._poll.canMultipleVote }}</MkSwitch>
+	<section>
+		<div>
+			<MkSelect v-model="expiration" small>
+				<template #label>{{ i18n.ts._poll.expiration }}</template>
+				<option value="infinite">{{ i18n.ts._poll.infinite }}</option>
+				<option value="at">{{ i18n.ts._poll.at }}</option>
+				<option value="after">{{ i18n.ts._poll.after }}</option>
+			</MkSelect>
+			<section v-if="expiration === 'at'">
+				<MkInput v-model="atDate" small type="date" class="input">
+					<template #label>{{ i18n.ts._poll.deadlineDate }}</template>
+				</MkInput>
+				<MkInput v-model="atTime" small type="time" class="input">
+					<template #label>{{ i18n.ts._poll.deadlineTime }}</template>
+				</MkInput>
+			</section>
+			<section v-else-if="expiration === 'after'">
+				<MkInput v-model="after" small type="number" class="input">
+					<template #label>{{ i18n.ts._poll.duration }}</template>
+				</MkInput>
+				<MkSelect v-model="unit" small>
+					<option value="second">{{ i18n.ts._time.second }}</option>
+					<option value="minute">{{ i18n.ts._time.minute }}</option>
+					<option value="hour">{{ i18n.ts._time.hour }}</option>
+					<option value="day">{{ i18n.ts._time.day }}</option>
+				</MkSelect>
+			</section>
+		</div>
+	</section>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import MkInput from './form/input.vue';
+import MkSelect from './form/select.vue';
+import MkSwitch from './form/switch.vue';
+import MkButton from './MkButton.vue';
+import { formatDateTimeString } from '@/scripts/format-time-string';
+import { addTime } from '@/scripts/time';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	modelValue: {
+		expiresAt: string;
+		expiredAfter: number;
+		choices: string[];
+		multiple: boolean;
+	};
+}>();
+const emit = defineEmits<{
+	(ev: 'update:modelValue', v: {
+		expiresAt: string;
+		expiredAfter: number;
+		choices: string[];
+		multiple: boolean;
+	}): void;
+}>();
+
+const choices = ref(props.modelValue.choices);
+const multiple = ref(props.modelValue.multiple);
+const expiration = ref('infinite');
+const atDate = ref(formatDateTimeString(addTime(new Date(), 1, 'day'), 'yyyy-MM-dd'));
+const atTime = ref('00:00');
+const after = ref(0);
+const unit = ref('second');
+
+if (props.modelValue.expiresAt) {
+	expiration.value = 'at';
+	atDate.value = atTime.value = props.modelValue.expiresAt;
+} else if (typeof props.modelValue.expiredAfter === 'number') {
+	expiration.value = 'after';
+	after.value = props.modelValue.expiredAfter / 1000;
+} else {
+	expiration.value = 'infinite';
+}
+
+function onInput(i, value) {
+	choices.value[i] = value;
+}
+
+function add() {
+	choices.value.push('');
+	// TODO
+	// nextTick(() => {
+	//   (this.$refs.choices as any).childNodes[this.choices.length - 1].childNodes[0].focus();
+	// });
+}
+
+function remove(i) {
+	choices.value = choices.value.filter((_, _i) => _i !== i);
+}
+
+function get() {
+	const calcAt = () => {
+		return new Date(`${atDate.value} ${atTime.value}`).getTime();
+	};
+
+	const calcAfter = () => {
+		let base = parseInt(after.value);
+		switch (unit.value) {
+			case 'day': base *= 24;
+				// fallthrough
+			case 'hour': base *= 60;
+				// fallthrough
+			case 'minute': base *= 60;
+				// fallthrough
+			case 'second': return base *= 1000;
+			default: return null;
+		}
+	};
+
+	return {
+		choices: choices.value,
+		multiple: multiple.value,
+		...(
+			expiration.value === 'at' ? { expiresAt: calcAt() } :
+			expiration.value === 'after' ? { expiredAfter: calcAfter() } : {}
+		),
+	};
+}
+
+watch([choices, multiple, expiration, atDate, atTime, after, unit], () => emit('update:modelValue', get()), {
+	deep: true,
+});
+</script>
+
+<style lang="scss" scoped>
+.zmdxowus {
+	padding: 8px 16px;
+
+	> .caution {
+		margin: 0 0 8px 0;
+		font-size: 0.8em;
+		color: #f00;
+
+		> i {
+			margin-right: 4px;
+		}
+	}
+
+	> ul {
+		display: block;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+
+		> li {
+			display: flex;
+			margin: 8px 0;
+			padding: 0;
+			width: 100%;
+
+			> .input {
+				flex: 1;
+			}
+
+			> button {
+				width: 32px;
+				padding: 4px 0;
+			}
+		}
+	}
+
+	> .add {
+		margin: 8px 0;
+		z-index: 1;
+	}
+
+	> section {
+		margin: 16px 0 0 0;
+
+		> div {
+			margin: 0 8px;
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			gap: 12px;
+
+			&:last-child {
+				flex: 1 0 auto;
+
+				> div {
+					flex-grow: 1;
+				}
+
+				> section {
+					// MAGIC: Prevent div above from growing unless wrapped to its own line
+					flex-grow: 9999;
+					align-items: end;
+					display: flex;
+					gap: 4px;
+
+					> .input {
+						flex: 1 1 auto;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkPopupMenu.vue b/packages/frontend/src/components/MkPopupMenu.vue
new file mode 100644
index 0000000000..f04c7f5618
--- /dev/null
+++ b/packages/frontend/src/components/MkPopupMenu.vue
@@ -0,0 +1,36 @@
+<template>
+<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'high'" :src="src" :transparent-bg="true" @click="modal.close()" @closed="emit('closed')">
+	<MkMenu :items="items" :align="align" :width="width" :max-height="maxHeight" :as-drawer="type === 'drawer'" class="sfhdhdhq" :class="{ drawer: type === 'drawer' }" @close="modal.close()"/>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkModal from './MkModal.vue';
+import MkMenu from './MkMenu.vue';
+import { MenuItem } from '@/types/menu';
+
+defineProps<{
+	items: MenuItem[];
+	align?: 'center' | string;
+	width?: number;
+	viaKeyboard?: boolean;
+	src?: any;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+let modal = $ref<InstanceType<typeof MkModal>>();
+</script>
+
+<style lang="scss" scoped>
+.sfhdhdhq {
+	&.drawer {
+		border-radius: 24px;
+		border-bottom-right-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
new file mode 100644
index 0000000000..f79e5a32cd
--- /dev/null
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -0,0 +1,1050 @@
+<template>
+<div
+	v-size="{ max: [310, 500] }" class="gafaadew"
+	:class="{ modal, _popup: modal }"
+	@dragover.stop="onDragover"
+	@dragenter="onDragenter"
+	@dragleave="onDragleave"
+	@drop.stop="onDrop"
+>
+	<header>
+		<button v-if="!fixed" class="cancel _button" @click="cancel"><i class="ti ti-x"></i></button>
+		<button v-click-anime v-tooltip="i18n.ts.switchAccount" class="account _button" @click="openAccountMenu">
+			<MkAvatar :user="postAccount ?? $i" class="avatar"/>
+		</button>
+		<div class="right">
+			<span class="text-count" :class="{ over: textLength > maxTextLength }">{{ maxTextLength - textLength }}</span>
+			<span v-if="localOnly" class="local-only"><i class="ti ti-world-off"></i></span>
+			<button ref="visibilityButton" v-tooltip="i18n.ts.visibility" class="_button visibility" :disabled="channel != null" @click="setVisibility">
+				<span v-if="visibility === 'public'"><i class="ti ti-world"></i></span>
+				<span v-if="visibility === 'home'"><i class="ti ti-home"></i></span>
+				<span v-if="visibility === 'followers'"><i class="ti ti-lock-open"></i></span>
+				<span v-if="visibility === 'specified'"><i class="ti ti-mail"></i></span>
+			</button>
+			<button v-tooltip="i18n.ts.previewNoteText" class="_button preview" :class="{ active: showPreview }" @click="showPreview = !showPreview"><i class="ti ti-eye"></i></button>
+			<button class="submit _buttonGradate" :disabled="!canPost" data-cy-open-post-form-submit @click="post">{{ submitText }}<i :class="reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i></button>
+		</div>
+	</header>
+	<div class="form" :class="{ fixed }">
+		<XNoteSimple v-if="reply" class="preview" :note="reply"/>
+		<XNoteSimple v-if="renote" class="preview" :note="renote"/>
+		<div v-if="quoteId" class="with-quote"><i class="ti ti-quote"></i> {{ i18n.ts.quoteAttached }}<button @click="quoteId = null"><i class="ti ti-x"></i></button></div>
+		<div v-if="visibility === 'specified'" class="to-specified">
+			<span style="margin-right: 8px;">{{ i18n.ts.recipient }}</span>
+			<div class="visibleUsers">
+				<span v-for="u in visibleUsers" :key="u.id">
+					<MkAcct :user="u"/>
+					<button class="_button" @click="removeVisibleUser(u)"><i class="ti ti-x"></i></button>
+				</span>
+				<button class="_buttonPrimary" @click="addVisibleUser"><i class="ti ti-plus ti-fw"></i></button>
+			</div>
+		</div>
+		<MkInfo v-if="hasNotSpecifiedMentions" warn class="hasNotSpecifiedMentions">{{ i18n.ts.notSpecifiedMentionWarning }} - <button class="_textButton" @click="addMissingMention()">{{ i18n.ts.add }}</button></MkInfo>
+		<input v-show="useCw" ref="cwInputEl" v-model="cw" class="cw" :placeholder="i18n.ts.annotation" @keydown="onKeydown">
+		<textarea ref="textareaEl" v-model="text" class="text" :class="{ withCw: useCw }" :disabled="posting" :placeholder="placeholder" data-cy-post-form-text @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
+		<input v-show="withHashtags" ref="hashtagsInputEl" v-model="hashtags" class="hashtags" :placeholder="i18n.ts.hashtags" list="hashtags">
+		<XPostFormAttaches v-model="files" class="attaches" @detach="detachFile" @change-sensitive="updateFileSensitive" @change-name="updateFileName"/>
+		<XPollEditor v-if="poll" v-model="poll" @destroyed="poll = null"/>
+		<XNotePreview v-if="showPreview" class="preview" :text="text"/>
+		<footer>
+			<button v-tooltip="i18n.ts.attachFile" class="_button" @click="chooseFileFrom"><i class="ti ti-photo-plus"></i></button>
+			<button v-tooltip="i18n.ts.poll" class="_button" :class="{ active: poll }" @click="togglePoll"><i class="ti ti-chart-arrows"></i></button>
+			<button v-tooltip="i18n.ts.useCw" class="_button" :class="{ active: useCw }" @click="useCw = !useCw"><i class="ti ti-eye-off"></i></button>
+			<button v-tooltip="i18n.ts.mention" class="_button" @click="insertMention"><i class="ti ti-at"></i></button>
+			<button v-tooltip="i18n.ts.hashtags" class="_button" :class="{ active: withHashtags }" @click="withHashtags = !withHashtags"><i class="ti ti-hash"></i></button>
+			<button v-tooltip="i18n.ts.emoji" class="_button" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
+			<button v-if="postFormActions.length > 0" v-tooltip="i18n.ts.plugin" class="_button" @click="showActions"><i class="ti ti-plug"></i></button>
+		</footer>
+		<datalist id="hashtags">
+			<option v-for="hashtag in recentHashtags" :key="hashtag" :value="hashtag"/>
+		</datalist>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { inject, watch, nextTick, onMounted, defineAsyncComponent } from 'vue';
+import * as mfm from 'mfm-js';
+import * as misskey from 'misskey-js';
+import insertTextAtCursor from 'insert-text-at-cursor';
+import { length } from 'stringz';
+import { toASCII } from 'punycode/';
+import * as Acct from 'misskey-js/built/acct';
+import { throttle } from 'throttle-debounce';
+import XNoteSimple from '@/components/MkNoteSimple.vue';
+import XNotePreview from '@/components/MkNotePreview.vue';
+import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
+import XPollEditor from '@/components/MkPollEditor.vue';
+import { host, url } from '@/config';
+import { erase, unique } from '@/scripts/array';
+import { extractMentions } from '@/scripts/extract-mentions';
+import { formatTimeString } from '@/scripts/format-time-string';
+import { Autocomplete } from '@/scripts/autocomplete';
+import * as os from '@/os';
+import { stream } from '@/stream';
+import { selectFiles } from '@/scripts/select-file';
+import { defaultStore, notePostInterruptors, postFormActions } from '@/store';
+import MkInfo from '@/components/MkInfo.vue';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account';
+import { uploadFile } from '@/scripts/upload';
+import { deepClone } from '@/scripts/clone';
+
+const modal = inject('modal');
+
+const props = withDefaults(defineProps<{
+	reply?: misskey.entities.Note;
+	renote?: misskey.entities.Note;
+	channel?: any; // TODO
+	mention?: misskey.entities.User;
+	specified?: misskey.entities.User;
+	initialText?: string;
+	initialVisibility?: typeof misskey.noteVisibilities;
+	initialFiles?: misskey.entities.DriveFile[];
+	initialLocalOnly?: boolean;
+	initialVisibleUsers?: misskey.entities.User[];
+	initialNote?: misskey.entities.Note;
+	instant?: boolean;
+	fixed?: boolean;
+	autofocus?: boolean;
+}>(), {
+	initialVisibleUsers: () => [],
+	autofocus: true,
+});
+
+const emit = defineEmits<{
+	(ev: 'posted'): void;
+	(ev: 'cancel'): void;
+	(ev: 'esc'): void;
+}>();
+
+const textareaEl = $ref<HTMLTextAreaElement | null>(null);
+const cwInputEl = $ref<HTMLInputElement | null>(null);
+const hashtagsInputEl = $ref<HTMLInputElement | null>(null);
+const visibilityButton = $ref<HTMLElement | null>(null);
+
+let posting = $ref(false);
+let text = $ref(props.initialText ?? '');
+let files = $ref(props.initialFiles ?? []);
+let poll = $ref<{
+	choices: string[];
+	multiple: boolean;
+	expiresAt: string | null;
+	expiredAfter: string | null;
+} | null>(null);
+let useCw = $ref(false);
+let showPreview = $ref(false);
+let cw = $ref<string | null>(null);
+let localOnly = $ref<boolean>(props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility ? defaultStore.state.localOnly : defaultStore.state.defaultNoteLocalOnly);
+let visibility = $ref(props.initialVisibility ?? (defaultStore.state.rememberNoteVisibility ? defaultStore.state.visibility : defaultStore.state.defaultNoteVisibility) as typeof misskey.noteVisibilities[number]);
+let visibleUsers = $ref([]);
+if (props.initialVisibleUsers) {
+	props.initialVisibleUsers.forEach(pushVisibleUser);
+}
+let autocomplete = $ref(null);
+let draghover = $ref(false);
+let quoteId = $ref(null);
+let hasNotSpecifiedMentions = $ref(false);
+let recentHashtags = $ref(JSON.parse(localStorage.getItem('hashtags') || '[]'));
+let imeText = $ref('');
+
+const typing = throttle(3000, () => {
+	if (props.channel) {
+		stream.send('typingOnChannel', { channel: props.channel.id });
+	}
+});
+
+const draftKey = $computed((): string => {
+	let key = props.channel ? `channel:${props.channel.id}` : '';
+
+	if (props.renote) {
+		key += `renote:${props.renote.id}`;
+	} else if (props.reply) {
+		key += `reply:${props.reply.id}`;
+	} else {
+		key += 'note';
+	}
+
+	return key;
+});
+
+const placeholder = $computed((): string => {
+	if (props.renote) {
+		return i18n.ts._postForm.quotePlaceholder;
+	} else if (props.reply) {
+		return i18n.ts._postForm.replyPlaceholder;
+	} else if (props.channel) {
+		return i18n.ts._postForm.channelPlaceholder;
+	} else {
+		const xs = [
+			i18n.ts._postForm._placeholders.a,
+			i18n.ts._postForm._placeholders.b,
+			i18n.ts._postForm._placeholders.c,
+			i18n.ts._postForm._placeholders.d,
+			i18n.ts._postForm._placeholders.e,
+			i18n.ts._postForm._placeholders.f,
+		];
+		return xs[Math.floor(Math.random() * xs.length)];
+	}
+});
+
+const submitText = $computed((): string => {
+	return props.renote
+		? i18n.ts.quote
+		: props.reply
+			? i18n.ts.reply
+			: i18n.ts.note;
+});
+
+const textLength = $computed((): number => {
+	return length((text + imeText).trim());
+});
+
+const maxTextLength = $computed((): number => {
+	return instance ? instance.maxNoteTextLength : 1000;
+});
+
+const canPost = $computed((): boolean => {
+	return !posting &&
+		(1 <= textLength || 1 <= files.length || !!poll || !!props.renote) &&
+		(textLength <= maxTextLength) &&
+		(!poll || poll.choices.length >= 2);
+});
+
+const withHashtags = $computed(defaultStore.makeGetterSetter('postFormWithHashtags'));
+const hashtags = $computed(defaultStore.makeGetterSetter('postFormHashtags'));
+
+watch($$(text), () => {
+	checkMissingMention();
+});
+
+watch($$(visibleUsers), () => {
+	checkMissingMention();
+}, {
+	deep: true,
+});
+
+if (props.mention) {
+	text = props.mention.host ? `@${props.mention.username}@${toASCII(props.mention.host)}` : `@${props.mention.username}`;
+	text += ' ';
+}
+
+if (props.reply && (props.reply.user.username !== $i.username || (props.reply.user.host != null && props.reply.user.host !== host))) {
+	text = `@${props.reply.user.username}${props.reply.user.host != null ? '@' + toASCII(props.reply.user.host) : ''} `;
+}
+
+if (props.reply && props.reply.text != null) {
+	const ast = mfm.parse(props.reply.text);
+	const otherHost = props.reply.user.host;
+
+	for (const x of extractMentions(ast)) {
+		const mention = x.host ?
+			`@${x.username}@${toASCII(x.host)}` :
+			(otherHost == null || otherHost === host) ?
+				`@${x.username}` :
+				`@${x.username}@${toASCII(otherHost)}`;
+
+		// 自分は除外
+		if ($i.username === x.username && (x.host == null || x.host === host)) continue;
+
+		// 重複は除外
+		if (text.includes(`${mention} `)) continue;
+
+		text += `${mention} `;
+	}
+}
+
+if (props.channel) {
+	visibility = 'public';
+	localOnly = true; // TODO: チャンネルが連合するようになった折には消す
+}
+
+// 公開以外へのリプライ時は元の公開範囲を引き継ぐ
+if (props.reply && ['home', 'followers', 'specified'].includes(props.reply.visibility)) {
+	if (props.reply.visibility === 'home' && visibility === 'followers') {
+		visibility = 'followers';
+	} else if (['home', 'followers'].includes(props.reply.visibility) && visibility === 'specified') {
+		visibility = 'specified';
+	} else {
+		visibility = props.reply.visibility;
+	}
+
+	if (visibility === 'specified') {
+		if (props.reply.visibleUserIds) {
+			os.api('users/show', {
+				userIds: props.reply.visibleUserIds.filter(uid => uid !== $i.id && uid !== props.reply.userId),
+			}).then(users => {
+				users.forEach(pushVisibleUser);
+			});
+		}
+
+		if (props.reply.userId !== $i.id) {
+			os.api('users/show', { userId: props.reply.userId }).then(user => {
+				pushVisibleUser(user);
+			});
+		}
+	}
+}
+
+if (props.specified) {
+	visibility = 'specified';
+	pushVisibleUser(props.specified);
+}
+
+// keep cw when reply
+if (defaultStore.state.keepCw && props.reply && props.reply.cw) {
+	useCw = true;
+	cw = props.reply.cw;
+}
+
+function watchForDraft() {
+	watch($$(text), () => saveDraft());
+	watch($$(useCw), () => saveDraft());
+	watch($$(cw), () => saveDraft());
+	watch($$(poll), () => saveDraft());
+	watch($$(files), () => saveDraft(), { deep: true });
+	watch($$(visibility), () => saveDraft());
+	watch($$(localOnly), () => saveDraft());
+}
+
+function checkMissingMention() {
+	if (visibility === 'specified') {
+		const ast = mfm.parse(text);
+
+		for (const x of extractMentions(ast)) {
+			if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
+				hasNotSpecifiedMentions = true;
+				return;
+			}
+		}
+		hasNotSpecifiedMentions = false;
+	}
+}
+
+function addMissingMention() {
+	const ast = mfm.parse(text);
+
+	for (const x of extractMentions(ast)) {
+		if (!visibleUsers.some(u => (u.username === x.username) && (u.host === x.host))) {
+			os.api('users/show', { username: x.username, host: x.host }).then(user => {
+				visibleUsers.push(user);
+			});
+		}
+	}
+}
+
+function togglePoll() {
+	if (poll) {
+		poll = null;
+	} else {
+		poll = {
+			choices: ['', ''],
+			multiple: false,
+			expiresAt: null,
+			expiredAfter: null,
+		};
+	}
+}
+
+function addTag(tag: string) {
+	insertTextAtCursor(textareaEl, ` #${tag} `);
+}
+
+function focus() {
+	if (textareaEl) {
+		textareaEl.focus();
+		textareaEl.setSelectionRange(textareaEl.value.length, textareaEl.value.length);
+	}
+}
+
+function chooseFileFrom(ev) {
+	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(files_ => {
+		for (const file of files_) {
+			files.push(file);
+		}
+	});
+}
+
+function detachFile(id) {
+	files = files.filter(x => x.id !== id);
+}
+
+function updateFileSensitive(file, sensitive) {
+	files[files.findIndex(x => x.id === file.id)].isSensitive = sensitive;
+}
+
+function updateFileName(file, name) {
+	files[files.findIndex(x => x.id === file.id)].name = name;
+}
+
+function upload(file: File, name?: string) {
+	uploadFile(file, defaultStore.state.uploadFolder, name).then(res => {
+		files.push(res);
+	});
+}
+
+function setVisibility() {
+	if (props.channel) {
+		// TODO: information dialog
+		return;
+	}
+
+	os.popup(defineAsyncComponent(() => import('@/components/MkVisibilityPicker.vue')), {
+		currentVisibility: visibility,
+		currentLocalOnly: localOnly,
+		src: visibilityButton,
+	}, {
+		changeVisibility: v => {
+			visibility = v;
+			if (defaultStore.state.rememberNoteVisibility) {
+				defaultStore.set('visibility', visibility);
+			}
+		},
+		changeLocalOnly: v => {
+			localOnly = v;
+			if (defaultStore.state.rememberNoteVisibility) {
+				defaultStore.set('localOnly', localOnly);
+			}
+		},
+	}, 'closed');
+}
+
+function pushVisibleUser(user) {
+	if (!visibleUsers.some(u => u.username === user.username && u.host === user.host)) {
+		visibleUsers.push(user);
+	}
+}
+
+function addVisibleUser() {
+	os.selectUser().then(user => {
+		pushVisibleUser(user);
+	});
+}
+
+function removeVisibleUser(user) {
+	visibleUsers = erase(user, visibleUsers);
+}
+
+function clear() {
+	text = '';
+	files = [];
+	poll = null;
+	quoteId = null;
+}
+
+function onKeydown(ev: KeyboardEvent) {
+	if ((ev.which === 10 || ev.which === 13) && (ev.ctrlKey || ev.metaKey) && canPost) post();
+	if (ev.which === 27) emit('esc');
+	typing();
+}
+
+function onCompositionUpdate(ev: CompositionEvent) {
+	imeText = ev.data;
+	typing();
+}
+
+function onCompositionEnd(ev: CompositionEvent) {
+	imeText = '';
+}
+
+async function onPaste(ev: ClipboardEvent) {
+	for (const { item, i } of Array.from(ev.clipboardData.items).map((item, i) => ({ item, i }))) {
+		if (item.kind === 'file') {
+			const file = item.getAsFile();
+			const lio = file.name.lastIndexOf('.');
+			const ext = lio >= 0 ? file.name.slice(lio) : '';
+			const formatted = `${formatTimeString(new Date(file.lastModified), defaultStore.state.pastedFileName).replace(/{{number}}/g, `${i + 1}`)}${ext}`;
+			upload(file, formatted);
+		}
+	}
+
+	const paste = ev.clipboardData.getData('text');
+
+	if (!props.renote && !quoteId && paste.startsWith(url + '/notes/')) {
+		ev.preventDefault();
+
+		os.confirm({
+			type: 'info',
+			text: i18n.ts.quoteQuestion,
+		}).then(({ canceled }) => {
+			if (canceled) {
+				insertTextAtCursor(textareaEl, paste);
+				return;
+			}
+
+			quoteId = paste.substr(url.length).match(/^\/notes\/(.+?)\/?$/)[1];
+		});
+	}
+}
+
+function onDragover(ev) {
+	if (!ev.dataTransfer.items[0]) return;
+	const isFile = ev.dataTransfer.items[0].kind === 'file';
+	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
+	if (isFile || isDriveFile) {
+		ev.preventDefault();
+		draghover = true;
+		switch (ev.dataTransfer.effectAllowed) {
+			case 'all':
+			case 'uninitialized':
+			case 'copy': 
+			case 'copyLink': 
+			case 'copyMove': 
+				ev.dataTransfer.dropEffect = 'copy';
+				break;
+			case 'linkMove':
+			case 'move':
+				ev.dataTransfer.dropEffect = 'move';
+				break;
+			default:
+				ev.dataTransfer.dropEffect = 'none';
+				break;
+		}
+	}
+}
+
+function onDragenter(ev) {
+	draghover = true;
+}
+
+function onDragleave(ev) {
+	draghover = false;
+}
+
+function onDrop(ev): void {
+	draghover = false;
+
+	// ファイルだったら
+	if (ev.dataTransfer.files.length > 0) {
+		ev.preventDefault();
+		for (const x of Array.from(ev.dataTransfer.files)) upload(x);
+		return;
+	}
+
+	//#region ドライブのファイル
+	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
+	if (driveFile != null && driveFile !== '') {
+		const file = JSON.parse(driveFile);
+		files.push(file);
+		ev.preventDefault();
+	}
+	//#endregion
+}
+
+function saveDraft() {
+	const draftData = JSON.parse(localStorage.getItem('drafts') || '{}');
+
+	draftData[draftKey] = {
+		updatedAt: new Date(),
+		data: {
+			text: text,
+			useCw: useCw,
+			cw: cw,
+			visibility: visibility,
+			localOnly: localOnly,
+			files: files,
+			poll: poll,
+		},
+	};
+
+	localStorage.setItem('drafts', JSON.stringify(draftData));
+}
+
+function deleteDraft() {
+	const draftData = JSON.parse(localStorage.getItem('drafts') ?? '{}');
+
+	delete draftData[draftKey];
+
+	localStorage.setItem('drafts', JSON.stringify(draftData));
+}
+
+async function post() {
+	let postData = {
+		text: text === '' ? undefined : text,
+		fileIds: files.length > 0 ? files.map(f => f.id) : undefined,
+		replyId: props.reply ? props.reply.id : undefined,
+		renoteId: props.renote ? props.renote.id : quoteId ? quoteId : undefined,
+		channelId: props.channel ? props.channel.id : undefined,
+		poll: poll,
+		cw: useCw ? cw ?? '' : undefined,
+		localOnly: localOnly,
+		visibility: visibility,
+		visibleUserIds: visibility === 'specified' ? visibleUsers.map(u => u.id) : undefined,
+	};
+
+	if (withHashtags && hashtags && hashtags.trim() !== '') {
+		const hashtags_ = hashtags.trim().split(' ').map(x => x.startsWith('#') ? x : '#' + x).join(' ');
+		postData.text = postData.text ? `${postData.text} ${hashtags_}` : hashtags_;
+	}
+
+	// plugin
+	if (notePostInterruptors.length > 0) {
+		for (const interruptor of notePostInterruptors) {
+			postData = await interruptor.handler(deepClone(postData));
+		}
+	}
+
+	let token = undefined;
+
+	if (postAccount) {
+		const storedAccounts = await getAccounts();
+		token = storedAccounts.find(x => x.id === postAccount.id)?.token;
+	}
+
+	posting = true;
+	os.api('notes/create', postData, token).then(() => {
+		clear();
+		nextTick(() => {
+			deleteDraft();
+			emit('posted');
+			if (postData.text && postData.text !== '') {
+				const hashtags_ = mfm.parse(postData.text).filter(x => x.type === 'hashtag').map(x => x.props.hashtag);
+				const history = JSON.parse(localStorage.getItem('hashtags') || '[]') as string[];
+				localStorage.setItem('hashtags', JSON.stringify(unique(hashtags_.concat(history))));
+			}
+			posting = false;
+			postAccount = null;
+		});
+	}).catch(err => {
+		posting = false;
+		os.alert({
+			type: 'error',
+			text: err.message + '\n' + (err as any).id,
+		});
+	});
+}
+
+function cancel() {
+	emit('cancel');
+}
+
+function insertMention() {
+	os.selectUser().then(user => {
+		insertTextAtCursor(textareaEl, '@' + Acct.toString(user) + ' ');
+	});
+}
+
+async function insertEmoji(ev: MouseEvent) {
+	os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, textareaEl);
+}
+
+function showActions(ev) {
+	os.popupMenu(postFormActions.map(action => ({
+		text: action.title,
+		action: () => {
+			action.handler({
+				text: text,
+			}, (key, value) => {
+				if (key === 'text') { text = value; }
+			});
+		},
+	})), ev.currentTarget ?? ev.target);
+}
+
+let postAccount = $ref<misskey.entities.UserDetailed | null>(null);
+
+function openAccountMenu(ev: MouseEvent) {
+	openAccountMenu_({
+		withExtraOperation: false,
+		includeCurrentAccount: true,
+		active: postAccount != null ? postAccount.id : $i.id,
+		onChoose: (account) => {
+			if (account.id === $i.id) {
+				postAccount = null;
+			} else {
+				postAccount = account;
+			}
+		},
+	}, ev);
+}
+
+onMounted(() => {
+	if (props.autofocus) {
+		focus();
+
+		nextTick(() => {
+			focus();
+		});
+	}
+
+	// TODO: detach when unmount
+	new Autocomplete(textareaEl, $$(text));
+	new Autocomplete(cwInputEl, $$(cw));
+	new Autocomplete(hashtagsInputEl, $$(hashtags));
+
+	nextTick(() => {
+		// 書きかけの投稿を復元
+		if (!props.instant && !props.mention && !props.specified) {
+			const draft = JSON.parse(localStorage.getItem('drafts') || '{}')[draftKey];
+			if (draft) {
+				text = draft.data.text;
+				useCw = draft.data.useCw;
+				cw = draft.data.cw;
+				visibility = draft.data.visibility;
+				localOnly = draft.data.localOnly;
+				files = (draft.data.files || []).filter(draftFile => draftFile);
+				if (draft.data.poll) {
+					poll = draft.data.poll;
+				}
+			}
+		}
+
+		// 削除して編集
+		if (props.initialNote) {
+			const init = props.initialNote;
+			text = init.text ? init.text : '';
+			files = init.files;
+			cw = init.cw;
+			useCw = init.cw != null;
+			if (init.poll) {
+				poll = {
+					choices: init.poll.choices.map(x => x.text),
+					multiple: init.poll.multiple,
+					expiresAt: init.poll.expiresAt,
+					expiredAfter: init.poll.expiredAfter,
+				};
+			}
+			visibility = init.visibility;
+			localOnly = init.localOnly;
+			quoteId = init.renote ? init.renote.id : null;
+		}
+
+		nextTick(() => watchForDraft());
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+.gafaadew {
+	position: relative;
+
+	&.modal {
+		width: 100%;
+		max-width: 520px;
+	}
+
+	> header {
+		z-index: 1000;
+		height: 66px;
+
+		> .cancel {
+			padding: 0;
+			font-size: 1em;
+			width: 64px;
+			line-height: 66px;
+		}
+
+		> .account {
+			height: 100%;
+			aspect-ratio: 1/1;
+			display: inline-flex;
+			vertical-align: bottom;
+
+			> .avatar {
+				width: 28px;
+				height: 28px;
+				margin: auto;
+			}
+		}
+
+		> .right {
+			position: absolute;
+			top: 0;
+			right: 0;
+
+			> .text-count {
+				opacity: 0.7;
+				line-height: 66px;
+			}
+
+			> .visibility {
+				height: 34px;
+				width: 34px;
+				margin: 0 0 0 8px;
+
+				& + .localOnly {
+					margin-left: 0 !important;
+				}
+			}
+			
+			> .local-only {
+				margin: 0 0 0 12px;
+				opacity: 0.7;
+			}
+
+			> .preview {
+				display: inline-block;
+				padding: 0;
+				margin: 0 8px 0 0;
+				font-size: 16px;
+				width: 34px;
+				height: 34px;
+				border-radius: 6px;
+
+				&:hover {
+					background: var(--X5);
+				}
+
+				&.active {
+					color: var(--accent);
+				}
+			}
+
+			> .submit {
+				margin: 16px 16px 16px 0;
+				padding: 0 12px;
+				line-height: 34px;
+				font-weight: bold;
+				vertical-align: bottom;
+				border-radius: 4px;
+				font-size: 0.9em;
+
+				&:disabled {
+					opacity: 0.7;
+				}
+
+				> i {
+					margin-left: 6px;
+				}
+			}
+		}
+	}
+
+	> .form {
+		> .preview {
+			padding: 16px;
+		}
+
+		> .with-quote {
+			margin: 0 0 8px 0;
+			color: var(--accent);
+
+			> button {
+				padding: 4px 8px;
+				color: var(--accentAlpha04);
+
+				&:hover {
+					color: var(--accentAlpha06);
+				}
+
+				&:active {
+					color: var(--accentDarken30);
+				}
+			}
+		}
+
+		> .to-specified {
+			padding: 6px 24px;
+			margin-bottom: 8px;
+			overflow: auto;
+			white-space: nowrap;
+
+			> .visibleUsers {
+				display: inline;
+				top: -1px;
+				font-size: 14px;
+
+				> button {
+					padding: 4px;
+					border-radius: 8px;
+				}
+
+				> span {
+					margin-right: 14px;
+					padding: 8px 0 8px 8px;
+					border-radius: 8px;
+					background: var(--X4);
+
+					> button {
+						padding: 4px 8px;
+					}
+				}
+			}
+		}
+
+		> .hasNotSpecifiedMentions {
+			margin: 0 20px 16px 20px;
+		}
+
+		> .cw,
+		> .hashtags,
+		> .text {
+			display: block;
+			box-sizing: border-box;
+			padding: 0 24px;
+			margin: 0;
+			width: 100%;
+			font-size: 16px;
+			border: none;
+			border-radius: 0;
+			background: transparent;
+			color: var(--fg);
+			font-family: inherit;
+
+			&:focus {
+				outline: none;
+			}
+
+			&:disabled {
+				opacity: 0.5;
+			}
+		}
+
+		> .cw {
+			z-index: 1;
+			padding-bottom: 8px;
+			border-bottom: solid 0.5px var(--divider);
+		}
+
+		> .hashtags {
+			z-index: 1;
+			padding-top: 8px;
+			padding-bottom: 8px;
+			border-top: solid 0.5px var(--divider);
+		}
+
+		> .text {
+			max-width: 100%;
+			min-width: 100%;
+			min-height: 90px;
+
+			&.withCw {
+				padding-top: 8px;
+			}
+		}
+
+		> footer {
+			padding: 0 16px 16px 16px;
+
+			> button {
+				display: inline-block;
+				padding: 0;
+				margin: 0;
+				font-size: 1em;
+				width: 46px;
+				height: 46px;
+				border-radius: 6px;
+
+				&:hover {
+					background: var(--X5);
+				}
+
+				&.active {
+					color: var(--accent);
+				}
+			}
+		}
+	}
+
+	&.max-width_500px {
+		> header {
+			height: 50px;
+
+			> .cancel {
+				width: 50px;
+				line-height: 50px;
+			}
+
+			> .right {
+				> .text-count {
+					line-height: 50px;
+				}
+
+				> .submit {
+					margin: 8px;
+				}
+			}
+		}
+
+		> .form {
+			> .to-specified {
+				padding: 6px 16px;
+			}
+
+			> .cw,
+			> .hashtags,
+			> .text {
+				padding: 0 16px;
+			}
+
+			> .text {
+				min-height: 80px;
+			}
+
+			> footer {
+				padding: 0 8px 8px 8px;
+			}
+		}
+	}
+
+	&.max-width_310px {
+		> .form {
+			> footer {
+				> button {
+					font-size: 14px;
+					width: 44px;
+				height: 44px;
+				}
+			}
+		}
+	}
+}
+
+@container (max-width: 500px) {
+	.gafaadew {
+		> header {
+			height: 50px;
+
+			> .cancel {
+				width: 50px;
+				line-height: 50px;
+			}
+
+			> .right {
+				> .text-count {
+					line-height: 50px;
+				}
+
+				> .submit {
+					margin: 8px;
+				}
+			}
+		}
+
+		> .form {
+			> .to-specified {
+				padding: 6px 16px;
+			}
+
+			> .cw,
+			> .hashtags,
+			> .text {
+				padding: 0 16px;
+			}
+
+			> .text {
+				min-height: 80px;
+			}
+
+			> footer {
+				padding: 0 8px 8px 8px;
+			}
+		}
+	}
+}
+
+@container (max-width: 310px) {
+	.gafaadew {
+		> .form {
+			> footer {
+				> button {
+					font-size: 14px;
+					width: 44px;
+					height: 44px;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkPostFormAttaches.vue b/packages/frontend/src/components/MkPostFormAttaches.vue
new file mode 100644
index 0000000000..766cc9a06c
--- /dev/null
+++ b/packages/frontend/src/components/MkPostFormAttaches.vue
@@ -0,0 +1,168 @@
+<template>
+<div v-show="props.modelValue.length != 0" class="skeikyzd">
+	<Sortable :model-value="props.modelValue" class="files" item-key="id" :animation="150" :delay="100" :delay-on-touch-only="true" @update:model-value="v => emit('update:modelValue', v)">
+		<template #item="{element}">
+			<div class="file" @click="showFileMenu(element, $event)" @contextmenu.prevent="showFileMenu(element, $event)">
+				<MkDriveFileThumbnail :data-id="element.id" class="thumbnail" :file="element" fit="cover"/>
+				<div v-if="element.isSensitive" class="sensitive">
+					<i class="ti ti-alert-triangle icon"></i>
+				</div>
+			</div>
+		</template>
+	</Sortable>
+	<p class="remain">{{ 16 - props.modelValue.length }}/16</p>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, watch } from 'vue';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
+import * as os from '@/os';
+import { deepClone } from '@/scripts/clone';
+import { i18n } from '@/i18n';
+
+const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
+
+const props = defineProps<{
+	modelValue: any[];
+	detachMediaFn: () => void;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', value: any[]): void;
+	(ev: 'detach'): void;
+	(ev: 'changeSensitive'): void;
+	(ev: 'changeName'): void;
+}>();
+
+let menuShowing = false;
+
+function detachMedia(id) {
+	if (props.detachMediaFn) {
+		props.detachMediaFn(id);
+	} else {
+		emit('detach', id);
+	}
+}
+
+function toggleSensitive(file) {
+	os.api('drive/files/update', {
+		fileId: file.id,
+		isSensitive: !file.isSensitive,
+	}).then(() => {
+		emit('changeSensitive', file, !file.isSensitive);
+	});
+}
+async function rename(file) {
+	const { canceled, result } = await os.inputText({
+		title: i18n.ts.enterFileName,
+		default: file.name,
+		allowEmpty: false,
+	});
+	if (canceled) return;
+	os.api('drive/files/update', {
+		fileId: file.id,
+		name: result,
+	}).then(() => {
+		emit('changeName', file, result);
+		file.name = result;
+	});
+}
+
+async function describe(file) {
+	os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
+		default: file.comment !== null ? file.comment : '',
+		file: file,
+	}, {
+		done: caption => {
+			let comment = caption.length === 0 ? null : caption;
+			os.api('drive/files/update', {
+				fileId: file.id,
+				comment: comment,
+			}).then(() => {
+				file.comment = comment;
+			});
+		},
+	}, 'closed');
+}
+
+function showFileMenu(file, ev: MouseEvent) {
+	if (menuShowing) return;
+	os.popupMenu([{
+		text: i18n.ts.renameFile,
+		icon: 'ti ti-forms',
+		action: () => { rename(file); },
+	}, {
+		text: file.isSensitive ? i18n.ts.unmarkAsSensitive : i18n.ts.markAsSensitive,
+		icon: file.isSensitive ? 'ti ti-eye-off' : 'ti ti-eye',
+		action: () => { toggleSensitive(file); },
+	}, {
+		text: i18n.ts.describeFile,
+		icon: 'ti ti-text-caption',
+		action: () => { describe(file); },
+	}, {
+		text: i18n.ts.attachCancel,
+		icon: 'ti ti-circle-x',
+		action: () => { detachMedia(file.id); },
+	}], ev.currentTarget ?? ev.target).then(() => menuShowing = false);
+	menuShowing = true;
+}
+</script>
+
+<style lang="scss" scoped>
+.skeikyzd {
+	padding: 8px 16px;
+	position: relative;
+
+	> .files {
+		display: flex;
+		flex-wrap: wrap;
+
+		> .file {
+			position: relative;
+			width: 64px;
+			height: 64px;
+			margin-right: 4px;
+			border-radius: 4px;
+			overflow: hidden;
+			cursor: move;
+
+			&:hover > .remove {
+				display: block;
+			}
+
+			> .thumbnail {
+				width: 100%;
+				height: 100%;
+				z-index: 1;
+				color: var(--fg);
+			}
+
+			> .sensitive {
+				display: flex;
+				position: absolute;
+				width: 64px;
+				height: 64px;
+				top: 0;
+				left: 0;
+				z-index: 2;
+				background: rgba(17, 17, 17, .7);
+				color: #fff;
+
+				> .icon {
+					margin: auto;
+				}
+			}
+		}
+	}
+
+	> .remain {
+		display: block;
+		position: absolute;
+		top: 8px;
+		right: 8px;
+		margin: 0;
+		padding: 0;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkPostFormDialog.vue b/packages/frontend/src/components/MkPostFormDialog.vue
new file mode 100644
index 0000000000..6dabb1db14
--- /dev/null
+++ b/packages/frontend/src/components/MkPostFormDialog.vue
@@ -0,0 +1,19 @@
+<template>
+<MkModal ref="modal" :prefer-type="'dialog:top'" @click="$refs.modal.close()" @closed="$emit('closed')">
+	<MkPostForm v-bind="$attrs" @posted="$refs.modal.close()" @cancel="$refs.modal.close()" @esc="$refs.modal.close()"/>
+</MkModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkModal from '@/components/MkModal.vue';
+import MkPostForm from '@/components/MkPostForm.vue';
+
+export default defineComponent({
+	components: {
+		MkModal,
+		MkPostForm,
+	},
+	emits: ['closed'],
+});
+</script>
diff --git a/packages/frontend/src/components/MkPushNotificationAllowButton.vue b/packages/frontend/src/components/MkPushNotificationAllowButton.vue
new file mode 100644
index 0000000000..b356fd3b89
--- /dev/null
+++ b/packages/frontend/src/components/MkPushNotificationAllowButton.vue
@@ -0,0 +1,167 @@
+<template>
+<MkButton
+	v-if="supported && !pushRegistrationInServer"
+	type="button"
+	primary
+	:gradate="gradate"
+	:rounded="rounded"
+	:inline="inline"
+	:autofocus="autofocus"
+	:wait="wait"
+	:full="full"
+	@click="subscribe"
+>
+	{{ i18n.ts.subscribePushNotification }}
+</MkButton>
+<MkButton
+	v-else-if="!showOnlyToRegister && ($i ? pushRegistrationInServer : pushSubscription)"
+	type="button"
+	:primary="false"
+	:gradate="gradate"
+	:rounded="rounded"
+	:inline="inline"
+	:autofocus="autofocus"
+	:wait="wait"
+	:full="full"
+	@click="unsubscribe"
+>
+	{{ i18n.ts.unsubscribePushNotification }}
+</MkButton>
+<MkButton v-else-if="$i && pushRegistrationInServer" disabled :rounded="rounded" :inline="inline" :wait="wait" :full="full">
+	{{ i18n.ts.pushNotificationAlreadySubscribed }}
+</MkButton>
+<MkButton v-else-if="!supported" disabled :rounded="rounded" :inline="inline" :wait="wait" :full="full">
+	{{ i18n.ts.pushNotificationNotSupported }}
+</MkButton>
+</template>
+
+<script setup lang="ts">
+import { $i, getAccounts } from '@/account';
+import MkButton from '@/components/MkButton.vue';
+import { instance } from '@/instance';
+import { api, apiWithDialog, promiseDialog } from '@/os';
+import { i18n } from '@/i18n';
+
+defineProps<{
+	primary?: boolean;
+	gradate?: boolean;
+	rounded?: boolean;
+	inline?: boolean;
+	link?: boolean;
+	to?: string;
+	autofocus?: boolean;
+	wait?: boolean;
+	danger?: boolean;
+	full?: boolean;
+	showOnlyToRegister?: boolean;
+}>();
+
+// ServiceWorker registration
+let registration = $ref<ServiceWorkerRegistration | undefined>();
+// If this browser supports push notification
+let supported = $ref(false);
+// If this browser has already subscribed to push notification
+let pushSubscription = $ref<PushSubscription | null>(null);
+let pushRegistrationInServer = $ref<{ state?: string; key?: string; userId: string; endpoint: string; sendReadMessage: boolean; } | undefined>();
+
+function subscribe() {
+	if (!registration || !supported || !instance.swPublickey) return;
+
+	// SEE: https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe#Parameters
+	return promiseDialog(registration.pushManager.subscribe({
+		userVisibleOnly: true,
+		applicationServerKey: urlBase64ToUint8Array(instance.swPublickey),
+	})
+	.then(async subscription => {
+		pushSubscription = subscription;
+
+		// Register
+		pushRegistrationInServer = await api('sw/register', {
+			endpoint: subscription.endpoint,
+			auth: encode(subscription.getKey('auth')),
+			publickey: encode(subscription.getKey('p256dh')),
+		});
+	}, async err => { // When subscribe failed
+		// 通知が許可されていなかったとき
+		if (err?.name === 'NotAllowedError') {
+			console.info('User denied the notification permission request.');
+			return;
+		}
+
+		// 違うapplicationServerKey (または gcm_sender_id)のサブスクリプションが
+		// 既に存在していることが原因でエラーになった可能性があるので、
+		// そのサブスクリプションを解除しておく
+		// （これは実行されなさそうだけど、おまじない的に古い実装から残してある）
+		await unsubscribe();
+	}), null, null);
+}
+
+async function unsubscribe() {
+	if (!pushSubscription) return;
+
+	const endpoint = pushSubscription.endpoint;
+	const accounts = await getAccounts();
+
+	pushRegistrationInServer = undefined;
+
+	if ($i && accounts.length >= 2) {
+		apiWithDialog('sw/unregister', {
+			i: $i.token,
+			endpoint,
+		});
+	} else {
+		pushSubscription.unsubscribe();
+		apiWithDialog('sw/unregister', {
+			endpoint,
+		});
+		pushSubscription = null;
+	}
+}
+
+function encode(buffer: ArrayBuffer | null) {
+	return btoa(String.fromCharCode.apply(null, new Uint8Array(buffer)));
+}
+
+/**
+ * Convert the URL safe base64 string to a Uint8Array
+ * @param base64String base64 string
+ */
+ function urlBase64ToUint8Array(base64String: string): Uint8Array {
+	const padding = '='.repeat((4 - base64String.length % 4) % 4);
+	const base64 = (base64String + padding)
+		.replace(/-/g, '+')
+		.replace(/_/g, '/');
+
+	const rawData = window.atob(base64);
+	const outputArray = new Uint8Array(rawData.length);
+
+	for (let i = 0; i < rawData.length; ++i) {
+		outputArray[i] = rawData.charCodeAt(i);
+	}
+	return outputArray;
+}
+
+navigator.serviceWorker.ready.then(async swr => {
+	registration = swr;
+
+	pushSubscription = await registration.pushManager.getSubscription();
+
+	if (instance.swPublickey && ('PushManager' in window) && $i && $i.token) {
+		supported = true;
+
+		if (pushSubscription) {
+			const res = await api('sw/show-registration', {
+				endpoint: pushSubscription.endpoint,
+			});
+
+			if (res) {
+				pushRegistrationInServer = res;
+			}
+		}
+	}
+});
+
+defineExpose({
+	pushRegistrationInServer: $$(pushRegistrationInServer),
+});
+</script>
diff --git a/packages/frontend/src/components/MkReactionIcon.vue b/packages/frontend/src/components/MkReactionIcon.vue
new file mode 100644
index 0000000000..5638c9a816
--- /dev/null
+++ b/packages/frontend/src/components/MkReactionIcon.vue
@@ -0,0 +1,13 @@
+<template>
+<MkEmoji :emoji="reaction" :custom-emojis="customEmojis || []" :is-reaction="true" :normal="true" :no-style="noStyle"/>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+
+const props = defineProps<{
+	reaction: string;
+	customEmojis?: any[]; // TODO
+	noStyle?: boolean;
+}>();
+</script>
diff --git a/packages/frontend/src/components/MkReactionTooltip.vue b/packages/frontend/src/components/MkReactionTooltip.vue
new file mode 100644
index 0000000000..310d5954fc
--- /dev/null
+++ b/packages/frontend/src/components/MkReactionTooltip.vue
@@ -0,0 +1,43 @@
+<template>
+<MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
+	<div class="beeadbfb">
+		<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
+		<div class="name">{{ reaction.replace('@.', '') }}</div>
+	</div>
+</MkTooltip>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkTooltip from './MkTooltip.vue';
+import XReactionIcon from '@/components/MkReactionIcon.vue';
+
+defineProps<{
+	showing: boolean;
+	reaction: string;
+	emojis: any[]; // TODO
+	targetElement: HTMLElement;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.beeadbfb {
+	text-align: center;
+
+	> .icon {
+		display: block;
+		width: 60px;
+		font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
+		margin: 0 auto;
+		object-fit: contain;
+	}
+
+	> .name {
+		font-size: 0.9em;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkReactionsViewer.details.vue b/packages/frontend/src/components/MkReactionsViewer.details.vue
new file mode 100644
index 0000000000..29902a5075
--- /dev/null
+++ b/packages/frontend/src/components/MkReactionsViewer.details.vue
@@ -0,0 +1,96 @@
+<template>
+<MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="340" @closed="emit('closed')">
+	<div class="bqxuuuey">
+		<div class="reaction">
+			<XReactionIcon :reaction="reaction" :custom-emojis="emojis" class="icon" :no-style="true"/>
+			<div class="name">{{ getReactionName(reaction) }}</div>
+		</div>
+		<div class="users">
+			<div v-for="u in users" :key="u.id" class="user">
+				<MkAvatar class="avatar" :user="u"/>
+				<MkUserName class="name" :user="u" :nowrap="true"/>
+			</div>
+			<div v-if="users.length > 10" class="omitted">+{{ count - 10 }}</div>
+		</div>
+	</div>
+</MkTooltip>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkTooltip from './MkTooltip.vue';
+import XReactionIcon from '@/components/MkReactionIcon.vue';
+import { getEmojiName } from '@/scripts/emojilist';
+
+defineProps<{
+	showing: boolean;
+	reaction: string;
+	users: any[]; // TODO
+	count: number;
+	emojis: any[]; // TODO
+	targetElement: HTMLElement;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+function getReactionName(reaction: string): string {
+	const trimLocal = reaction.replace('@.', '');
+	if (trimLocal.startsWith(':')) {
+		return trimLocal;
+	}
+	return getEmojiName(reaction) ?? reaction;
+}
+</script>
+
+<style lang="scss" scoped>
+.bqxuuuey {
+	display: flex;
+
+	> .reaction {
+		max-width: 100px;
+		text-align: center;
+
+		> .icon {
+			display: block;
+			width: 60px;
+			font-size: 60px; // unicodeな絵文字についてはwidthが効かないため
+			object-fit: contain;
+			margin: 0 auto;
+		}
+
+		> .name {
+			font-size: 1em;
+		}
+	}
+
+	> .users {
+		flex: 1;
+		min-width: 0;
+		font-size: 0.95em;
+		border-left: solid 0.5px var(--divider);
+		padding-left: 10px;
+		margin-left: 10px;
+		margin-right: 14px;
+		text-align: left;
+
+		> .user {
+			line-height: 24px;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+
+			&:not(:last-child) {
+				margin-bottom: 3px;
+			}
+
+			> .avatar {
+				width: 24px;
+				height: 24px;
+				margin-right: 3px;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
new file mode 100644
index 0000000000..31342b0b48
--- /dev/null
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -0,0 +1,135 @@
+<template>
+<button
+	v-if="count > 0"
+	ref="buttonRef"
+	v-ripple="canToggle"
+	class="hkzvhatu _button"
+	:class="{ reacted: note.myReaction == reaction, canToggle }"
+	@click="toggleReaction()"
+>
+	<XReactionIcon class="icon" :reaction="reaction" :custom-emojis="note.emojis"/>
+	<span class="count">{{ count }}</span>
+</button>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import * as misskey from 'misskey-js';
+import XDetails from '@/components/MkReactionsViewer.details.vue';
+import XReactionIcon from '@/components/MkReactionIcon.vue';
+import * as os from '@/os';
+import { useTooltip } from '@/scripts/use-tooltip';
+import { $i } from '@/account';
+
+const props = defineProps<{
+	reaction: string;
+	count: number;
+	isInitial: boolean;
+	note: misskey.entities.Note;
+}>();
+
+const buttonRef = ref<HTMLElement>();
+
+const canToggle = computed(() => !props.reaction.match(/@\w/) && $i);
+
+const toggleReaction = () => {
+	if (!canToggle.value) return;
+
+	const oldReaction = props.note.myReaction;
+	if (oldReaction) {
+		os.api('notes/reactions/delete', {
+			noteId: props.note.id,
+		}).then(() => {
+			if (oldReaction !== props.reaction) {
+				os.api('notes/reactions/create', {
+					noteId: props.note.id,
+					reaction: props.reaction,
+				});
+			}
+		});
+	} else {
+		os.api('notes/reactions/create', {
+			noteId: props.note.id,
+			reaction: props.reaction,
+		});
+	}
+};
+
+const anime = () => {
+	if (document.hidden) return;
+
+	// TODO: 新しくリアクションが付いたことが視覚的に分かりやすいアニメーション
+};
+
+watch(() => props.count, (newCount, oldCount) => {
+	if (oldCount < newCount) anime();
+});
+
+onMounted(() => {
+	if (!props.isInitial) anime();
+});
+
+useTooltip(buttonRef, async (showing) => {
+	const reactions = await os.apiGet('notes/reactions', {
+		noteId: props.note.id,
+		type: props.reaction,
+		limit: 11,
+		_cacheKey_: props.count,
+	});
+
+	const users = reactions.map(x => x.user);
+
+	os.popup(XDetails, {
+		showing,
+		reaction: props.reaction,
+		emojis: props.note.emojis,
+		users,
+		count: props.count,
+		targetElement: buttonRef.value,
+	}, {}, 'closed');
+}, 100);
+</script>
+
+<style lang="scss" scoped>
+.hkzvhatu {
+	display: inline-block;
+	height: 32px;
+	margin: 2px;
+	padding: 0 6px;
+	border-radius: 4px;
+
+	&.canToggle {
+		background: rgba(0, 0, 0, 0.05);
+
+		&:hover {
+			background: rgba(0, 0, 0, 0.1);
+		}
+	}
+
+	&:not(.canToggle) {
+		cursor: default;
+	}
+
+	&.reacted {
+		background: var(--accent);
+
+		&:hover {
+			background: var(--accent);
+		}
+
+		> .count {
+			color: var(--fgOnAccent);
+		}
+
+		> .icon {
+			filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
+		}
+	}
+
+	> .count {
+		font-size: 0.9em;
+		line-height: 32px;
+		margin: 0 0 0 4px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkReactionsViewer.vue b/packages/frontend/src/components/MkReactionsViewer.vue
new file mode 100644
index 0000000000..a88311efa1
--- /dev/null
+++ b/packages/frontend/src/components/MkReactionsViewer.vue
@@ -0,0 +1,36 @@
+<template>
+<div class="tdflqwzn" :class="{ isMe }">
+	<XReaction v-for="(count, reaction) in note.reactions" :key="reaction" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import * as misskey from 'misskey-js';
+import { $i } from '@/account';
+import XReaction from '@/components/MkReactionsViewer.reaction.vue';
+
+const props = defineProps<{
+	note: misskey.entities.Note;
+}>();
+
+const initialReactions = new Set(Object.keys(props.note.reactions));
+
+const isMe = computed(() => $i && $i.id === props.note.userId);
+</script>
+
+<style lang="scss" scoped>
+.tdflqwzn {
+	margin: 4px -2px 0 -2px;
+
+	&:empty {
+		display: none;
+	}
+
+	&.isMe {
+		> span {
+			cursor: default !important;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkRemoteCaution.vue b/packages/frontend/src/components/MkRemoteCaution.vue
new file mode 100644
index 0000000000..d5dc01c1f8
--- /dev/null
+++ b/packages/frontend/src/components/MkRemoteCaution.vue
@@ -0,0 +1,25 @@
+<template>
+<div class="jmgmzlwq _block"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i>{{ i18n.ts.remoteUserCaution }}<a class="link" :href="href" rel="nofollow noopener" target="_blank">{{ i18n.ts.showOnRemote }}</a></div>
+</template>
+
+<script lang="ts" setup>
+import { i18n } from '@/i18n';
+
+defineProps<{
+	href: string;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.jmgmzlwq {
+	font-size: 0.8em;
+	padding: 16px;
+	background: var(--infoWarnBg);
+	color: var(--infoWarnFg);
+
+	> .link {
+		margin-left: 4px;
+		color: var(--accent);
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkRenoteButton.vue b/packages/frontend/src/components/MkRenoteButton.vue
new file mode 100644
index 0000000000..e0b1eaafc9
--- /dev/null
+++ b/packages/frontend/src/components/MkRenoteButton.vue
@@ -0,0 +1,99 @@
+<template>
+<button
+	v-if="canRenote"
+	ref="buttonRef"
+	class="eddddedb _button canRenote"
+	@click="renote()"
+>
+	<i class="ti ti-repeat"></i>
+	<p v-if="count > 0" class="count">{{ count }}</p>
+</button>
+<button v-else class="eddddedb _button">
+	<i class="ti ti-ban"></i>
+</button>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import * as misskey from 'misskey-js';
+import XDetails from '@/components/MkUsersTooltip.vue';
+import { pleaseLogin } from '@/scripts/please-login';
+import * as os from '@/os';
+import { $i } from '@/account';
+import { useTooltip } from '@/scripts/use-tooltip';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	note: misskey.entities.Note;
+	count: number;
+}>();
+
+const buttonRef = ref<HTMLElement>();
+
+const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i.id);
+
+useTooltip(buttonRef, async (showing) => {
+	const renotes = await os.api('notes/renotes', {
+		noteId: props.note.id,
+		limit: 11,
+	});
+
+	const users = renotes.map(x => x.user);
+
+	if (users.length < 1) return;
+
+	os.popup(XDetails, {
+		showing,
+		users,
+		count: props.count,
+		targetElement: buttonRef.value,
+	}, {}, 'closed');
+});
+
+const renote = (viaKeyboard = false) => {
+	pleaseLogin();
+	os.popupMenu([{
+		text: i18n.ts.renote,
+		icon: 'ti ti-repeat',
+		action: () => {
+			os.api('notes/create', {
+				renoteId: props.note.id,
+			});
+		},
+	}, {
+		text: i18n.ts.quote,
+		icon: 'ti ti-quote',
+		action: () => {
+			os.post({
+				renote: props.note,
+			});
+		},
+	}], buttonRef.value, {
+		viaKeyboard,
+	});
+};
+</script>
+
+<style lang="scss" scoped>
+.eddddedb {
+	display: inline-block;
+	height: 32px;
+	margin: 2px;
+	padding: 0 6px;
+	border-radius: 4px;
+
+	&:not(.canRenote) {
+		cursor: default;
+	}
+
+	&.renoted {
+		background: var(--accent);
+	}
+
+	> .count {
+		display: inline;
+		margin-left: 8px;
+		opacity: 0.7;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkRipple.vue b/packages/frontend/src/components/MkRipple.vue
new file mode 100644
index 0000000000..9d93211d5f
--- /dev/null
+++ b/packages/frontend/src/components/MkRipple.vue
@@ -0,0 +1,116 @@
+<template>
+<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
+	<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
+		<circle fill="none" cx="64" cy="64">
+			<animate
+				attributeName="r"
+				begin="0s" dur="0.5s"
+				values="4; 32"
+				calcMode="spline"
+				keyTimes="0; 1"
+				keySplines="0.165, 0.84, 0.44, 1"
+				repeatCount="1"
+			/>
+			<animate
+				attributeName="stroke-width"
+				begin="0s" dur="0.5s"
+				values="16; 0"
+				calcMode="spline"
+				keyTimes="0; 1"
+				keySplines="0.3, 0.61, 0.355, 1"
+				repeatCount="1"
+			/>
+		</circle>
+		<g fill="none" fill-rule="evenodd">
+			<circle v-for="(particle, i) in particles" :key="i" :fill="particle.color">
+				<animate
+					attributeName="r"
+					begin="0s" dur="0.8s"
+					:values="`${particle.size}; 0`"
+					calcMode="spline"
+					keyTimes="0; 1"
+					keySplines="0.165, 0.84, 0.44, 1"
+					repeatCount="1"
+				/>
+				<animate
+					attributeName="cx"
+					begin="0s" dur="0.8s"
+					:values="`${particle.xA}; ${particle.xB}`"
+					calcMode="spline"
+					keyTimes="0; 1"
+					keySplines="0.3, 0.61, 0.355, 1"
+					repeatCount="1"
+				/>
+				<animate
+					attributeName="cy"
+					begin="0s" dur="0.8s"
+					:values="`${particle.yA}; ${particle.yB}`"
+					calcMode="spline"
+					keyTimes="0; 1"
+					keySplines="0.3, 0.61, 0.355, 1"
+					repeatCount="1"
+				/>
+			</circle>
+		</g>
+	</svg>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import * as os from '@/os';
+
+const props = withDefaults(defineProps<{
+	x: number;
+	y: number;
+	particle?: boolean;
+}>(), {
+	particle: true,
+});
+
+const emit = defineEmits<{
+	(ev: 'end'): void;
+}>();
+
+const particles = [];
+const origin = 64;
+const colors = ['#FF1493', '#00FFFF', '#FFE202'];
+const zIndex = os.claimZIndex('high');
+
+if (props.particle) {
+	for (let i = 0; i < 12; i++) {
+		const angle = Math.random() * (Math.PI * 2);
+		const pos = Math.random() * 16;
+		const velocity = 16 + (Math.random() * 48);
+		particles.push({
+			size: 4 + (Math.random() * 8),
+			xA: origin + (Math.sin(angle) * pos),
+			yA: origin + (Math.cos(angle) * pos),
+			xB: origin + (Math.sin(angle) * (pos + velocity)),
+			yB: origin + (Math.cos(angle) * (pos + velocity)),
+			color: colors[Math.floor(Math.random() * colors.length)],
+		});
+	}
+}
+
+onMounted(() => {
+	window.setTimeout(() => {
+		emit('end');
+	}, 1100);
+});
+</script>
+
+<style lang="scss" scoped>
+.vswabwbm {
+	pointer-events: none;
+	position: fixed;
+	width: 128px;
+	height: 128px;
+
+	> svg {
+		> circle {
+			stroke: var(--accent);
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkSample.vue b/packages/frontend/src/components/MkSample.vue
new file mode 100644
index 0000000000..1d25ab54b5
--- /dev/null
+++ b/packages/frontend/src/components/MkSample.vue
@@ -0,0 +1,116 @@
+<template>
+<div class="_card">
+	<div class="_content">
+		<MkInput v-model="text">
+			<template #label>Text</template>
+		</MkInput>
+		<MkSwitch v-model="flag">
+			<span>Switch is now {{ flag ? 'on' : 'off' }}</span>
+		</MkSwitch>
+		<div style="margin: 32px 0;">
+			<MkRadio v-model="radio" value="misskey">Misskey</MkRadio>
+			<MkRadio v-model="radio" value="mastodon">Mastodon</MkRadio>
+			<MkRadio v-model="radio" value="pleroma">Pleroma</MkRadio>
+		</div>
+		<MkButton inline>This is</MkButton>
+		<MkButton inline primary>the button</MkButton>
+	</div>
+	<div class="_content" style="pointer-events: none;">
+		<Mfm :text="mfm"/>
+	</div>
+	<div class="_content">
+		<MkButton inline primary @click="openMenu">Open menu</MkButton>
+		<MkButton inline primary @click="openDialog">Open dialog</MkButton>
+		<MkButton inline primary @click="openForm">Open form</MkButton>
+		<MkButton inline primary @click="openDrive">Open drive</MkButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/form/input.vue';
+import MkSwitch from '@/components/form/switch.vue';
+import MkTextarea from '@/components/form/textarea.vue';
+import MkRadio from '@/components/form/radio.vue';
+import * as os from '@/os';
+import * as config from '@/config';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		MkInput,
+		MkSwitch,
+		MkTextarea,
+		MkRadio,
+	},
+
+	data() {
+		return {
+			text: '',
+			flag: true,
+			radio: 'misskey',
+			mfm: `Hello world! This is an @example mention. BTW you are @${this.$i ? this.$i.username : 'guest'}.\nAlso, here is ${config.url} and [example link](${config.url}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`,
+		};
+	},
+
+	methods: {
+		async openDialog() {
+			os.alert({
+				type: 'warning',
+				title: 'Oh my Aichan',
+				text: 'Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+			});
+		},
+
+		async openForm() {
+			os.form('Example form', {
+				foo: {
+					type: 'boolean',
+					default: true,
+					label: 'This is a boolean property',
+				},
+				bar: {
+					type: 'number',
+					default: 300,
+					label: 'This is a number property',
+				},
+				baz: {
+					type: 'string',
+					default: 'Misskey makes you happy.',
+					label: 'This is a string property',
+				},
+			});
+		},
+
+		async openDrive() {
+			os.selectDriveFile();
+		},
+
+		async selectUser() {
+			os.selectUser();
+		},
+
+		async openMenu(ev) {
+			os.popupMenu([{
+				type: 'label',
+				text: 'Fruits',
+			}, {
+				text: 'Create some apples',
+				action: () => {},
+			}, {
+				text: 'Read some oranges',
+				action: () => {},
+			}, {
+				text: 'Update some melons',
+				action: () => {},
+			}, null, {
+				text: 'Delete some bananas',
+				danger: true,
+				action: () => {},
+			}], ev.currentTarget ?? ev.target);
+		},
+	},
+});
+</script>
diff --git a/packages/frontend/src/components/MkSignin.vue b/packages/frontend/src/components/MkSignin.vue
new file mode 100644
index 0000000000..96f18f8d61
--- /dev/null
+++ b/packages/frontend/src/components/MkSignin.vue
@@ -0,0 +1,259 @@
+<template>
+<form class="eppvobhk _monolithic_" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
+	<div class="auth _section _formRoot">
+		<div v-show="withAvatar" class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null, marginBottom: message ? '1.5em' : null }"></div>
+		<MkInfo v-if="message">
+			{{ message }}
+		</MkInfo>
+		<div v-if="!totpLogin" class="normal-signin">
+			<MkInput v-model="username" class="_formBlock" :placeholder="i18n.ts.username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required data-cy-signin-username @update:model-value="onUsernameChange">
+				<template #prefix>@</template>
+				<template #suffix>@{{ host }}</template>
+			</MkInput>
+			<MkInput v-if="!user || user && !user.usePasswordLessLogin" v-model="password" class="_formBlock" :placeholder="i18n.ts.password" type="password" :with-password-toggle="true" required data-cy-signin-password>
+				<template #prefix><i class="ti ti-lock"></i></template>
+				<template #caption><button class="_textButton" type="button" @click="resetPassword">{{ i18n.ts.forgotPassword }}</button></template>
+			</MkInput>
+			<MkButton class="_formBlock" type="submit" primary :disabled="signing" style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
+		</div>
+		<div v-if="totpLogin" class="2fa-signin" :class="{ securityKeys: user && user.securityKeys }">
+			<div v-if="user && user.securityKeys" class="twofa-group tap-group">
+				<p>{{ i18n.ts.tapSecurityKey }}</p>
+				<MkButton v-if="!queryingKey" @click="queryKey">
+					{{ i18n.ts.retry }}
+				</MkButton>
+			</div>
+			<div v-if="user && user.securityKeys" class="or-hr">
+				<p class="or-msg">{{ i18n.ts.or }}</p>
+			</div>
+			<div class="twofa-group totp-group">
+				<p style="margin-bottom:0;">{{ i18n.ts.twoStepAuthentication }}</p>
+				<MkInput v-if="user && user.usePasswordLessLogin" v-model="password" type="password" :with-password-toggle="true" required>
+					<template #label>{{ i18n.ts.password }}</template>
+					<template #prefix><i class="ti ti-lock"></i></template>
+				</MkInput>
+				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false" required>
+					<template #label>{{ i18n.ts.token }}</template>
+					<template #prefix><i class="ti ti-123"></i></template>
+				</MkInput>
+				<MkButton type="submit" :disabled="signing" primary style="margin: 0 auto;">{{ signing ? i18n.ts.loggingIn : i18n.ts.login }}</MkButton>
+			</div>
+		</div>
+	</div>
+	<div class="social _section">
+		<a v-if="meta && meta.enableTwitterIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/twitter`"><i class="ti ti-brand-twitter" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Twitter' }) }}</a>
+		<a v-if="meta && meta.enableGithubIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/github`"><i class="ti ti-brand-github" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'GitHub' }) }}</a>
+		<a v-if="meta && meta.enableDiscordIntegration" class="_borderButton _gap" :href="`${apiUrl}/signin/discord`"><i class="ti ti-brand-discord" style="margin-right: 4px;"></i>{{ $t('signinWith', { x: 'Discord' }) }}</a>
+	</div>
+</form>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue';
+import { toUnicode } from 'punycode/';
+import { showSuspendedDialog } from '../scripts/show-suspended-dialog';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/form/input.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import { apiUrl, host as configHost } from '@/config';
+import { byteify, hexify } from '@/scripts/2fa';
+import * as os from '@/os';
+import { login } from '@/account';
+import { instance } from '@/instance';
+import { i18n } from '@/i18n';
+
+let signing = $ref(false);
+let user = $ref(null);
+let username = $ref('');
+let password = $ref('');
+let token = $ref('');
+let host = $ref(toUnicode(configHost));
+let totpLogin = $ref(false);
+let credential = $ref(null);
+let challengeData = $ref(null);
+let queryingKey = $ref(false);
+let hCaptchaResponse = $ref(null);
+let reCaptchaResponse = $ref(null);
+
+const meta = $computed(() => instance);
+
+const emit = defineEmits<{
+	(ev: 'login', v: any): void;
+}>();
+
+const props = defineProps({
+	withAvatar: {
+		type: Boolean,
+		required: false,
+		default: true,
+	},
+	autoSet: {
+		type: Boolean,
+		required: false,
+		default: false,
+	},
+	message: {
+		type: String,
+		required: false,
+		default: '',
+	},
+});
+
+function onUsernameChange() {
+	os.api('users/show', {
+		username: username,
+	}).then(userResponse => {
+		user = userResponse;
+	}, () => {
+		user = null;
+	});
+}
+
+function onLogin(res) {
+	if (props.autoSet) {
+		return login(res.i);
+	}
+}
+
+function queryKey() {
+	queryingKey = true;
+	return navigator.credentials.get({
+		publicKey: {
+			challenge: byteify(challengeData.challenge, 'base64'),
+			allowCredentials: challengeData.securityKeys.map(key => ({
+				id: byteify(key.id, 'hex'),
+				type: 'public-key',
+				transports: ['usb', 'nfc', 'ble', 'internal'],
+			})),
+			timeout: 60 * 1000,
+		},
+	}).catch(() => {
+		queryingKey = false;
+		return Promise.reject(null);
+	}).then(credential => {
+		queryingKey = false;
+		signing = true;
+		return os.api('signin', {
+			username,
+			password,
+			signature: hexify(credential.response.signature),
+			authenticatorData: hexify(credential.response.authenticatorData),
+			clientDataJSON: hexify(credential.response.clientDataJSON),
+			credentialId: credential.id,
+			challengeId: challengeData.challengeId,
+			'hcaptcha-response': hCaptchaResponse,
+			'g-recaptcha-response': reCaptchaResponse,
+		});
+	}).then(res => {
+		emit('login', res);
+		return onLogin(res);
+	}).catch(err => {
+		if (err === null) return;
+		os.alert({
+			type: 'error',
+			text: i18n.ts.signinFailed,
+		});
+		signing = false;
+	});
+}
+
+function onSubmit() {
+	signing = true;
+	console.log('submit');
+	if (!totpLogin && user && user.twoFactorEnabled) {
+		if (window.PublicKeyCredential && user.securityKeys) {
+			os.api('signin', {
+				username,
+				password,
+				'hcaptcha-response': hCaptchaResponse,
+				'g-recaptcha-response': reCaptchaResponse,
+			}).then(res => {
+				totpLogin = true;
+				signing = false;
+				challengeData = res;
+				return queryKey();
+			}).catch(loginFailed);
+		} else {
+			totpLogin = true;
+			signing = false;
+		}
+	} else {
+		os.api('signin', {
+			username,
+			password,
+			'hcaptcha-response': hCaptchaResponse,
+			'g-recaptcha-response': reCaptchaResponse,
+			token: user && user.twoFactorEnabled ? token : undefined,
+		}).then(res => {
+			emit('login', res);
+			onLogin(res);
+		}).catch(loginFailed);
+	}
+}
+
+function loginFailed(err) {
+	switch (err.id) {
+		case '6cc579cc-885d-43d8-95c2-b8c7fc963280': {
+			os.alert({
+				type: 'error',
+				title: i18n.ts.loginFailed,
+				text: i18n.ts.noSuchUser,
+			});
+			break;
+		}
+		case '932c904e-9460-45b7-9ce6-7ed33be7eb2c': {
+			os.alert({
+				type: 'error',
+				title: i18n.ts.loginFailed,
+				text: i18n.ts.incorrectPassword,
+			});
+			break;
+		}
+		case 'e03a5f46-d309-4865-9b69-56282d94e1eb': {
+			showSuspendedDialog();
+			break;
+		}
+		case '22d05606-fbcf-421a-a2db-b32610dcfd1b': {
+			os.alert({
+				type: 'error',
+				title: i18n.ts.loginFailed,
+				text: i18n.ts.rateLimitExceeded,
+			});
+			break;
+		}
+		default: {
+			console.log(err);
+			os.alert({
+				type: 'error',
+				title: i18n.ts.loginFailed,
+				text: JSON.stringify(err),
+			});
+		}
+	}
+
+	challengeData = null;
+	totpLogin = false;
+	signing = false;
+}
+
+function resetPassword() {
+	os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {
+	}, 'closed');
+}
+</script>
+
+<style lang="scss" scoped>
+.eppvobhk {
+	> .auth {
+		> .avatar {
+			margin: 0 auto 0 auto;
+			width: 64px;
+			height: 64px;
+			background: #ddd;
+			background-position: center;
+			background-size: cover;
+			border-radius: 100%;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkSigninDialog.vue b/packages/frontend/src/components/MkSigninDialog.vue
new file mode 100644
index 0000000000..fd27244516
--- /dev/null
+++ b/packages/frontend/src/components/MkSigninDialog.vue
@@ -0,0 +1,46 @@
+<template>
+<XModalWindow
+	ref="dialog"
+	:width="370"
+	:height="400"
+	@close="onClose"
+	@closed="emit('closed')"
+>
+	<template #header>{{ i18n.ts.login }}</template>
+
+	<MkSignin :auto-set="autoSet" :message="message" @login="onLogin"/>
+</XModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkSignin from '@/components/MkSignin.vue';
+import XModalWindow from '@/components/MkModalWindow.vue';
+import { i18n } from '@/i18n';
+
+const props = withDefaults(defineProps<{
+	autoSet?: boolean;
+	message?: string,
+}>(), {
+	autoSet: false,
+	message: '',
+});
+
+const emit = defineEmits<{
+	(ev: 'done'): void;
+	(ev: 'closed'): void;
+	(ev: 'cancelled'): void;
+}>();
+
+const dialog = $ref<InstanceType<typeof XModalWindow>>();
+
+function onClose() {
+	emit('cancelled');
+	dialog.close();
+}
+
+function onLogin(res) {
+	emit('done', res);
+	dialog.close();
+}
+</script>
diff --git a/packages/frontend/src/components/MkSignup.vue b/packages/frontend/src/components/MkSignup.vue
new file mode 100644
index 0000000000..d987425ca3
--- /dev/null
+++ b/packages/frontend/src/components/MkSignup.vue
@@ -0,0 +1,246 @@
+<template>
+<form class="qlvuhzng _formRoot" autocomplete="new-password" @submit.prevent="onSubmit">
+	<MkInput v-if="instance.disableRegistration" v-model="invitationCode" class="_formBlock" type="text" :spellcheck="false" required>
+		<template #label>{{ i18n.ts.invitationCode }}</template>
+		<template #prefix><i class="ti ti-key"></i></template>
+	</MkInput>
+	<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-signup-username @update:model-value="onChangeUsername">
+		<template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="ti ti-question-circle"></i></div></template>
+		<template #prefix>@</template>
+		<template #suffix>@{{ host }}</template>
+		<template #caption>
+			<span v-if="usernameState === 'wait'" style="color:#999"><MkLoading :em="true"/> {{ i18n.ts.checking }}</span>
+			<span v-else-if="usernameState === 'ok'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.available }}</span>
+			<span v-else-if="usernameState === 'unavailable'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.unavailable }}</span>
+			<span v-else-if="usernameState === 'error'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.error }}</span>
+			<span v-else-if="usernameState === 'invalid-format'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.usernameInvalidFormat }}</span>
+			<span v-else-if="usernameState === 'min-range'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.tooShort }}</span>
+			<span v-else-if="usernameState === 'max-range'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.tooLong }}</span>
+		</template>
+	</MkInput>
+	<MkInput v-if="instance.emailRequiredForSignup" v-model="email" class="_formBlock" :debounce="true" type="email" :spellcheck="false" required data-cy-signup-email @update:model-value="onChangeEmail">
+		<template #label>{{ i18n.ts.emailAddress }} <div v-tooltip:dialog="i18n.ts._signup.emailAddressInfo" class="_button _help"><i class="ti ti-question-circle"></i></div></template>
+		<template #prefix><i class="ti ti-mail"></i></template>
+		<template #caption>
+			<span v-if="emailState === 'wait'" style="color:#999"><MkLoading :em="true"/> {{ i18n.ts.checking }}</span>
+			<span v-else-if="emailState === 'ok'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.available }}</span>
+			<span v-else-if="emailState === 'unavailable:used'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.used }}</span>
+			<span v-else-if="emailState === 'unavailable:format'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.format }}</span>
+			<span v-else-if="emailState === 'unavailable:disposable'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.disposable }}</span>
+			<span v-else-if="emailState === 'unavailable:mx'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.mx }}</span>
+			<span v-else-if="emailState === 'unavailable:smtp'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts._emailUnavailable.smtp }}</span>
+			<span v-else-if="emailState === 'unavailable'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.unavailable }}</span>
+			<span v-else-if="emailState === 'error'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.error }}</span>
+		</template>
+	</MkInput>
+	<MkInput v-model="password" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password @update:model-value="onChangePassword">
+		<template #label>{{ i18n.ts.password }}</template>
+		<template #prefix><i class="ti ti-lock"></i></template>
+		<template #caption>
+			<span v-if="passwordStrength == 'low'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.weakPassword }}</span>
+			<span v-if="passwordStrength == 'medium'" style="color: var(--warn)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.normalPassword }}</span>
+			<span v-if="passwordStrength == 'high'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.strongPassword }}</span>
+		</template>
+	</MkInput>
+	<MkInput v-model="retypedPassword" class="_formBlock" type="password" autocomplete="new-password" required data-cy-signup-password-retype @update:model-value="onChangePasswordRetype">
+		<template #label>{{ i18n.ts.password }} ({{ i18n.ts.retype }})</template>
+		<template #prefix><i class="ti ti-lock"></i></template>
+		<template #caption>
+			<span v-if="passwordRetypeState == 'match'" style="color: var(--success)"><i class="ti ti-check ti-fw"></i> {{ i18n.ts.passwordMatched }}</span>
+			<span v-if="passwordRetypeState == 'not-match'" style="color: var(--error)"><i class="ti ti-alert-triangle ti-fw"></i> {{ i18n.ts.passwordNotMatched }}</span>
+		</template>
+	</MkInput>
+	<MkSwitch v-if="instance.tosUrl" v-model="ToSAgreement" class="_formBlock tou">
+		<I18n :src="i18n.ts.agreeTo">
+			<template #0>
+				<a :href="instance.tosUrl" class="_link" target="_blank">{{ i18n.ts.tos }}</a>
+			</template>
+		</I18n>
+	</MkSwitch>
+	<MkCaptcha v-if="instance.enableHcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" class="_formBlock captcha" provider="hcaptcha" :sitekey="instance.hcaptchaSiteKey"/>
+	<MkCaptcha v-if="instance.enableRecaptcha" ref="recaptcha" v-model="reCaptchaResponse" class="_formBlock captcha" provider="recaptcha" :sitekey="instance.recaptchaSiteKey"/>
+	<MkCaptcha v-if="instance.enableTurnstile" ref="turnstile" v-model="turnstileResponse" class="_formBlock captcha" provider="turnstile" :sitekey="instance.turnstileSiteKey"/>
+	<MkButton class="_formBlock" type="submit" :disabled="shouldDisableSubmitting" gradate data-cy-signup-submit>{{ i18n.ts.start }}</MkButton>
+</form>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import getPasswordStrength from 'syuilo-password-strength';
+import { toUnicode } from 'punycode/';
+import MkButton from './MkButton.vue';
+import MkInput from './form/input.vue';
+import MkSwitch from './form/switch.vue';
+import MkCaptcha from '@/components/MkCaptcha.vue';
+import * as config from '@/config';
+import * as os from '@/os';
+import { login } from '@/account';
+import { instance } from '@/instance';
+import { i18n } from '@/i18n';
+
+const props = withDefaults(defineProps<{
+	autoSet?: boolean;
+}>(), {
+	autoSet: false,
+});
+
+const emit = defineEmits<{
+	(ev: 'signup', user: Record<string, any>): void;
+	(ev: 'signupEmailPending'): void;
+}>();
+
+const host = toUnicode(config.host);
+
+let hcaptcha = $ref();
+let recaptcha = $ref();
+let turnstile = $ref();
+
+let username: string = $ref('');
+let password: string = $ref('');
+let retypedPassword: string = $ref('');
+let invitationCode: string = $ref('');
+let email = $ref('');
+let usernameState: null | 'wait' | 'ok' | 'unavailable' | 'error' | 'invalid-format' | 'min-range' | 'max-range' = $ref(null);
+let emailState: null | 'wait' | 'ok' | 'unavailable:used' | 'unavailable:format' | 'unavailable:disposable' | 'unavailable:mx' | 'unavailable:smtp' | 'unavailable' | 'error' = $ref(null);
+let passwordStrength: '' | 'low' | 'medium' | 'high' = $ref('');
+let passwordRetypeState: null | 'match' | 'not-match' = $ref(null);
+let submitting: boolean = $ref(false);
+let ToSAgreement: boolean = $ref(false);
+let hCaptchaResponse = $ref(null);
+let reCaptchaResponse = $ref(null);
+let turnstileResponse = $ref(null);
+
+const shouldDisableSubmitting = $computed((): boolean => {
+	return submitting ||
+		instance.tosUrl && !ToSAgreement ||
+		instance.enableHcaptcha && !hCaptchaResponse ||
+		instance.enableRecaptcha && !reCaptchaResponse ||
+		instance.enableTurnstile && !turnstileResponse ||
+		passwordRetypeState === 'not-match';
+});
+
+function onChangeUsername(): void {
+	if (username === '') {
+		usernameState = null;
+		return;
+	}
+
+	{
+		const err =
+			!username.match(/^[a-zA-Z0-9_]+$/) ? 'invalid-format' :
+			username.length < 1 ? 'min-range' :
+			username.length > 20 ? 'max-range' :
+			null;
+
+		if (err) {
+			usernameState = err;
+			return;
+		}
+	}
+
+	usernameState = 'wait';
+
+	os.api('username/available', {
+		username,
+	}).then(result => {
+		usernameState = result.available ? 'ok' : 'unavailable';
+	}).catch(() => {
+		usernameState = 'error';
+	});
+}
+
+function onChangeEmail(): void {
+	if (email === '') {
+		emailState = null;
+		return;
+	}
+
+	emailState = 'wait';
+
+	os.api('email-address/available', {
+		emailAddress: email,
+	}).then(result => {
+		emailState = result.available ? 'ok' :
+			result.reason === 'used' ? 'unavailable:used' :
+			result.reason === 'format' ? 'unavailable:format' :
+			result.reason === 'disposable' ? 'unavailable:disposable' :
+			result.reason === 'mx' ? 'unavailable:mx' :
+			result.reason === 'smtp' ? 'unavailable:smtp' :
+			'unavailable';
+	}).catch(() => {
+		emailState = 'error';
+	});
+}
+
+function onChangePassword(): void {
+	if (password === '') {
+		passwordStrength = '';
+		return;
+	}
+
+	const strength = getPasswordStrength(password);
+	passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
+}
+
+function onChangePasswordRetype(): void {
+	if (retypedPassword === '') {
+		passwordRetypeState = null;
+		return;
+	}
+
+	passwordRetypeState = password === retypedPassword ? 'match' : 'not-match';
+}
+
+function onSubmit(): void {
+	if (submitting) return;
+	submitting = true;
+
+	os.api('signup', {
+		username,
+		password,
+		emailAddress: email,
+		invitationCode,
+		'hcaptcha-response': hCaptchaResponse,
+		'g-recaptcha-response': reCaptchaResponse,
+		'turnstile-response': turnstileResponse,
+	}).then(() => {
+		if (instance.emailRequiredForSignup) {
+			os.alert({
+				type: 'success',
+				title: i18n.ts._signup.almostThere,
+				text: i18n.t('_signup.emailSent', { email }),
+			});
+			emit('signupEmailPending');
+		} else {
+			os.api('signin', {
+				username,
+				password,
+			}).then(res => {
+				emit('signup', res);
+
+				if (props.autoSet) {
+					login(res.i);
+				}
+			});
+		}
+	}).catch(() => {
+		submitting = false;
+		hcaptcha.reset?.();
+		recaptcha.reset?.();
+		turnstile.reset?.();
+
+		os.alert({
+			type: 'error',
+			text: i18n.ts.somethingHappened,
+		});
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.qlvuhzng {
+	.captcha {
+		margin: 16px 0;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkSignupDialog.vue b/packages/frontend/src/components/MkSignupDialog.vue
new file mode 100644
index 0000000000..77497021c3
--- /dev/null
+++ b/packages/frontend/src/components/MkSignupDialog.vue
@@ -0,0 +1,46 @@
+<template>
+<XModalWindow
+	ref="dialog"
+	:width="366"
+	:height="500"
+	@close="dialog.close()"
+	@closed="$emit('closed')"
+>
+	<template #header>{{ i18n.ts.signup }}</template>
+
+	<div class="_monolithic_">
+		<div class="_section">
+			<XSignup :auto-set="autoSet" @signup="onSignup" @signup-email-pending="onSignupEmailPending"/>
+		</div>
+	</div>
+</XModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import XSignup from '@/components/MkSignup.vue';
+import XModalWindow from '@/components/MkModalWindow.vue';
+import { i18n } from '@/i18n';
+
+const props = withDefaults(defineProps<{
+	autoSet?: boolean;
+}>(), {
+	autoSet: false,
+});
+
+const emit = defineEmits<{
+	(ev: 'done'): void;
+	(ev: 'closed'): void;
+}>();
+
+const dialog = $ref<InstanceType<typeof XModalWindow>>();
+
+function onSignup(res) {
+	emit('done', res);
+	dialog.close();
+}
+
+function onSignupEmailPending() {
+	dialog.close();
+}
+</script>
diff --git a/packages/frontend/src/components/MkSparkle.vue b/packages/frontend/src/components/MkSparkle.vue
new file mode 100644
index 0000000000..cdeaf9c417
--- /dev/null
+++ b/packages/frontend/src/components/MkSparkle.vue
@@ -0,0 +1,130 @@
+<template>
+<span class="mk-sparkle">
+	<span ref="el">
+		<slot></slot>
+	</span>
+	<!-- なぜか path に対する key が機能しないため
+	<svg :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg">
+		<path v-for="particle in particles" :key="particle.id" style="transform-origin: center; transform-box: fill-box;"
+			:transform="`translate(${particle.x} ${particle.y})`"
+			:fill="particle.color"
+			d="M29.427,2.011C29.721,0.83 30.782,0 32,0C33.218,0 34.279,0.83 34.573,2.011L39.455,21.646C39.629,22.347 39.991,22.987 40.502,23.498C41.013,24.009 41.653,24.371 42.354,24.545L61.989,29.427C63.17,29.721 64,30.782 64,32C64,33.218 63.17,34.279 61.989,34.573L42.354,39.455C41.653,39.629 41.013,39.991 40.502,40.502C39.991,41.013 39.629,41.653 39.455,42.354L34.573,61.989C34.279,63.17 33.218,64 32,64C30.782,64 29.721,63.17 29.427,61.989L24.545,42.354C24.371,41.653 24.009,41.013 23.498,40.502C22.987,39.991 22.347,39.629 21.646,39.455L2.011,34.573C0.83,34.279 0,33.218 0,32C0,30.782 0.83,29.721 2.011,29.427L21.646,24.545C22.347,24.371 22.987,24.009 23.498,23.498C24.009,22.987 24.371,22.347 24.545,21.646L29.427,2.011Z"
+		>
+			<animateTransform
+				attributeName="transform"
+				attributeType="XML"
+				type="rotate"
+				from="0 0 0"
+				to="360 0 0"
+				:dur="`${particle.dur}ms`"
+				repeatCount="indefinite"
+				additive="sum"
+			/>
+			<animateTransform
+				attributeName="transform"
+				attributeType="XML"
+				type="scale"
+				:values="`0; ${particle.size}; 0`"
+				:dur="`${particle.dur}ms`"
+				repeatCount="indefinite"
+				additive="sum"
+			/>
+		</path>
+	</svg>
+	-->
+	<svg v-for="particle in particles" :key="particle.id" :width="width" :height="height" :viewBox="`0 0 ${width} ${height}`" xmlns="http://www.w3.org/2000/svg">
+		<path
+			style="transform-origin: center; transform-box: fill-box;"
+			:transform="`translate(${particle.x} ${particle.y})`"
+			:fill="particle.color"
+			d="M29.427,2.011C29.721,0.83 30.782,0 32,0C33.218,0 34.279,0.83 34.573,2.011L39.455,21.646C39.629,22.347 39.991,22.987 40.502,23.498C41.013,24.009 41.653,24.371 42.354,24.545L61.989,29.427C63.17,29.721 64,30.782 64,32C64,33.218 63.17,34.279 61.989,34.573L42.354,39.455C41.653,39.629 41.013,39.991 40.502,40.502C39.991,41.013 39.629,41.653 39.455,42.354L34.573,61.989C34.279,63.17 33.218,64 32,64C30.782,64 29.721,63.17 29.427,61.989L24.545,42.354C24.371,41.653 24.009,41.013 23.498,40.502C22.987,39.991 22.347,39.629 21.646,39.455L2.011,34.573C0.83,34.279 0,33.218 0,32C0,30.782 0.83,29.721 2.011,29.427L21.646,24.545C22.347,24.371 22.987,24.009 23.498,23.498C24.009,22.987 24.371,22.347 24.545,21.646L29.427,2.011Z"
+		>
+			<animateTransform
+				attributeName="transform"
+				attributeType="XML"
+				type="rotate"
+				from="0 0 0"
+				to="360 0 0"
+				:dur="`${particle.dur}ms`"
+				repeatCount="1"
+				additive="sum"
+			/>
+			<animateTransform
+				attributeName="transform"
+				attributeType="XML"
+				type="scale"
+				:values="`0; ${particle.size}; 0`"
+				:dur="`${particle.dur}ms`"
+				repeatCount="1"
+				additive="sum"
+			/>
+		</path>
+	</svg>
+</span>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+
+const particles = ref([]);
+const el = ref<HTMLElement>();
+const width = ref(0);
+const height = ref(0);
+const colors = ['#FF1493', '#00FFFF', '#FFE202', '#FFE202', '#FFE202'];
+let stop = false;
+let ro: ResizeObserver | undefined;
+
+onMounted(() => {
+	ro = new ResizeObserver((entries, observer) => {
+		width.value = el.value?.offsetWidth + 64;
+		height.value = el.value?.offsetHeight + 64;
+	});
+	ro.observe(el.value);
+	const add = () => {
+		if (stop) return;
+		const x = (Math.random() * (width.value - 64));
+		const y = (Math.random() * (height.value - 64));
+		const sizeFactor = Math.random();
+		const particle = {
+			id: Math.random().toString(),
+			x,
+			y,
+			size: 0.2 + ((sizeFactor / 10) * 3),
+			dur: 1000 + (sizeFactor * 1000),
+			color: colors[Math.floor(Math.random() * colors.length)],
+		};
+		particles.value.push(particle);
+		window.setTimeout(() => {
+			particles.value = particles.value.filter(x => x.id !== particle.id);
+		}, particle.dur - 100);
+
+		window.setTimeout(() => {
+			add();
+		}, 500 + (Math.random() * 500));
+	};
+	add();
+});
+
+onUnmounted(() => {
+	if (ro) ro.disconnect();
+	stop = true;
+});
+</script>
+
+<style lang="scss" scoped>
+.mk-sparkle {
+	position: relative;
+	display: inline-block;
+
+	> span {
+		display: inline-block;
+	}
+
+	> svg {
+		position: absolute;
+		top: -32px;
+		left: -32px;
+		pointer-events: none;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
new file mode 100644
index 0000000000..210923be46
--- /dev/null
+++ b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -0,0 +1,90 @@
+<template>
+<div class="wrmlmaau" :class="{ collapsed }">
+	<div class="body">
+		<span v-if="note.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
+		<span v-if="note.deletedAt" style="opacity: 0.5">({{ i18n.ts.deleted }})</span>
+		<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
+		<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
+		<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
+	</div>
+	<details v-if="note.files.length > 0">
+		<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>
+		<XMediaList :media-list="note.files"/>
+	</details>
+	<details v-if="note.poll">
+		<summary>{{ i18n.ts.poll }}</summary>
+		<XPoll :note="note"/>
+	</details>
+	<button v-if="collapsed" class="fade _button" @click="collapsed = false">
+		<span>{{ i18n.ts.showMore }}</span>
+	</button>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as misskey from 'misskey-js';
+import XMediaList from '@/components/MkMediaList.vue';
+import XPoll from '@/components/MkPoll.vue';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	note: misskey.entities.Note;
+}>();
+
+const collapsed = $ref(
+	props.note.cw == null && props.note.text != null && (
+		(props.note.text.split('\n').length > 9) ||
+		(props.note.text.length > 500)
+	));
+</script>
+
+<style lang="scss" scoped>
+.wrmlmaau {
+	overflow-wrap: break-word;
+
+	> .body {
+		> .reply {
+			margin-right: 6px;
+			color: var(--accent);
+		}
+
+		> .rp {
+			margin-left: 4px;
+			font-style: oblique;
+			color: var(--renote);
+		}
+	}
+
+	&.collapsed {
+		position: relative;
+		max-height: 9em;
+		overflow: hidden;
+
+		> .fade {
+			display: block;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 64px;
+			background: linear-gradient(0deg, var(--panel), var(--X15));
+
+			> span {
+				display: inline-block;
+				background: var(--panel);
+				padding: 6px 10px;
+				font-size: 0.8em;
+				border-radius: 999px;
+				box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+			}
+
+			&:hover {
+				> span {
+					background: var(--panelHighlight);
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkSuperMenu.vue b/packages/frontend/src/components/MkSuperMenu.vue
new file mode 100644
index 0000000000..e79794aea4
--- /dev/null
+++ b/packages/frontend/src/components/MkSuperMenu.vue
@@ -0,0 +1,161 @@
+<template>
+<div class="rrevdjwu" :class="{ grid }">
+	<div v-for="group in def" class="group">
+		<div v-if="group.title" class="title">{{ group.title }}</div>
+
+		<div class="items">
+			<template v-for="(item, i) in group.items">
+				<a v-if="item.type === 'a'" :href="item.href" :target="item.target" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
+					<i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i>
+					<span class="text">{{ item.text }}</span>
+				</a>
+				<button v-else-if="item.type === 'button'" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)">
+					<i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i>
+					<span class="text">{{ item.text }}</span>
+				</button>
+				<MkA v-else :to="item.to" :tabindex="i" class="_button item" :class="{ danger: item.danger, active: item.active }">
+					<i v-if="item.icon" class="icon ti-fw" :class="item.icon"></i>
+					<span class="text">{{ item.text }}</span>
+				</MkA>
+			</template>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, unref } from 'vue';
+
+export default defineComponent({
+	props: {
+		def: {
+			type: Array,
+			required: true,
+		},
+		grid: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.rrevdjwu {
+	> .group {
+		& + .group {
+			margin-top: 16px;
+			padding-top: 16px;
+			border-top: solid 0.5px var(--divider);
+		}
+
+		> .title {
+			opacity: 0.7;
+			margin: 0 0 8px 0;
+			font-size: 0.9em;
+		}
+	
+		> .items {
+			> .item {
+				display: flex;
+				align-items: center;
+				width: 100%;
+				box-sizing: border-box;
+				padding: 10px 16px 10px 8px;
+				border-radius: 9px;
+				font-size: 0.9em;
+
+				&:hover {
+					text-decoration: none;
+					background: var(--panelHighlight);
+				}
+
+				&.active {
+					color: var(--accent);
+					background: var(--accentedBg);
+				}
+
+				&.danger {
+					color: var(--error);
+				}
+
+				> .icon {
+					width: 32px;
+					margin-right: 2px;
+					flex-shrink: 0;
+					text-align: center;
+					opacity: 0.8;
+				}
+
+				> .text {
+					white-space: normal;
+					padding-right: 12px;
+					flex-shrink: 1;
+				}
+
+			}
+		}
+	}
+
+	&.grid {
+		> .group {
+			& + .group {
+				padding-top: 0;
+				border-top: none;
+			}
+
+			margin-left: 0;
+			margin-right: 0;
+
+			> .title {
+				font-size: 1em;
+				opacity: 0.7;
+				margin: 0 0 8px 16px;
+			}
+
+			> .items {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+				grid-gap: 16px;
+				padding: 0 16px;
+
+				> .item {
+					flex-direction: column;
+					text-align: center;
+					padding: 0;
+
+					&:hover {
+						text-decoration: none;
+						background: none;
+						color: var(--accent);
+
+						> .icon {
+							background: var(--accentedBg);
+						}
+					}
+
+					> .icon {
+						display: grid;
+						place-content: center;
+						margin-right: 0;
+						margin-bottom: 6px;
+						font-size: 1.5em;
+						width: 54px;
+						height: 54px;
+						aspect-ratio: 1;
+						background: var(--panel);
+						border-radius: 100%;
+					}
+
+					> .text {
+						padding-right: 0;
+						width: 100%;
+						font-size: 0.8em;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkTab.vue b/packages/frontend/src/components/MkTab.vue
new file mode 100644
index 0000000000..669e9e2e11
--- /dev/null
+++ b/packages/frontend/src/components/MkTab.vue
@@ -0,0 +1,73 @@
+<script lang="ts">
+import { defineComponent, h, resolveDirective, withDirectives } from 'vue';
+
+export default defineComponent({
+	props: {
+		modelValue: {
+			required: true,
+		},
+	},
+	render() {
+		const options = this.$slots.default();
+
+		return withDirectives(h('div', {
+			class: 'pxhvhrfw',
+		}, options.map(option => withDirectives(h('button', {
+			class: ['_button', { active: this.modelValue === option.props.value }],
+			key: option.key,
+			disabled: this.modelValue === option.props.value,
+			onClick: () => {
+				this.$emit('update:modelValue', option.props.value);
+			},
+		}, option.children), [
+			[resolveDirective('click-anime')],
+		]))), [
+			[resolveDirective('size'), { max: [500] }],
+		]);
+	},
+});
+</script>
+
+<style lang="scss">
+.pxhvhrfw {
+	display: flex;
+	font-size: 90%;
+
+	> button {
+		flex: 1;
+		padding: 10px 8px;
+		border-radius: var(--radius);
+
+		&:disabled {
+			opacity: 1 !important;
+			cursor: default;
+		}
+
+		&.active {
+			color: var(--accent);
+			background: var(--accentedBg);
+		}
+
+		&:not(.active):hover {
+			color: var(--fgHighlighted);
+			background: var(--panelHighlight);
+		}
+
+		&:not(:first-child) {
+			margin-left: 8px;
+		}
+
+		> .icon {
+			margin-right: 6px;
+		}
+	}
+
+	&.max-width_500px {
+		font-size: 80%;
+
+		> button {
+			padding: 11px 8px;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkTagCloud.vue b/packages/frontend/src/components/MkTagCloud.vue
new file mode 100644
index 0000000000..2dfd26edb0
--- /dev/null
+++ b/packages/frontend/src/components/MkTagCloud.vue
@@ -0,0 +1,90 @@
+<template>
+<div ref="rootEl" class="meijqfqm">
+	<canvas :id="idForCanvas" ref="canvasEl" class="canvas" :width="width" height="300" @contextmenu.prevent="() => {}"></canvas>
+	<div :id="idForTags" ref="tagsEl" class="tags">
+		<ul>
+			<slot></slot>
+		</ul>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, watch, PropType, onBeforeUnmount } from 'vue';
+import tinycolor from 'tinycolor2';
+
+const loaded = !!window.TagCanvas;
+const SAFE_FOR_HTML_ID = 'abcdefghijklmnopqrstuvwxyz';
+const computedStyle = getComputedStyle(document.documentElement);
+const idForCanvas = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
+const idForTags = Array.from(Array(16)).map(() => SAFE_FOR_HTML_ID[Math.floor(Math.random() * SAFE_FOR_HTML_ID.length)]).join('');
+let available = $ref(false);
+let rootEl = $ref<HTMLElement | null>(null);
+let canvasEl = $ref<HTMLCanvasElement | null>(null);
+let tagsEl = $ref<HTMLElement | null>(null);
+let width = $ref(300);
+
+watch($$(available), () => {
+	try {
+		window.TagCanvas.Start(idForCanvas, idForTags, {
+			textColour: '#ffffff',
+			outlineColour: tinycolor(computedStyle.getPropertyValue('--accent')).toHexString(),
+			outlineRadius: 10,
+			initial: [-0.030, -0.010],
+			frontSelect: true,
+			imageRadius: 8,
+			//dragControl: true,
+			dragThreshold: 3,
+			wheelZoom: false,
+			reverse: true,
+			depth: 0.5,
+			maxSpeed: 0.2,
+			minSpeed: 0.003,
+			stretchX: 0.8,
+			stretchY: 0.8,
+		});
+	} catch (err) {}
+});
+
+onMounted(() => {
+	width = rootEl.offsetWidth;
+
+	if (loaded) {
+		available = true;
+	} else {
+		document.head.appendChild(Object.assign(document.createElement('script'), {
+			async: true,
+			src: '/client-assets/tagcanvas.min.js',
+		})).addEventListener('load', () => available = true);
+	}
+});
+
+onBeforeUnmount(() => {
+	if (window.TagCanvas) window.TagCanvas.Delete(idForCanvas);
+});
+
+defineExpose({
+	update: () => {
+		window.TagCanvas.Update(idForCanvas);
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.meijqfqm {
+	position: relative;
+	overflow: clip;
+	display: grid;
+	place-items: center;
+
+	> .canvas {
+		display: block;
+	}
+
+	> .tags {
+		position: absolute;
+		top: 999px;
+		left: 999px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkTimeline.vue b/packages/frontend/src/components/MkTimeline.vue
new file mode 100644
index 0000000000..831a194ce3
--- /dev/null
+++ b/packages/frontend/src/components/MkTimeline.vue
@@ -0,0 +1,143 @@
+<template>
+<XNotes ref="tlComponent" :no-gap="!$store.state.showGapBetweenNotesInTimeline" :pagination="pagination" @queue="emit('queue', $event)"/>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, provide, onUnmounted } from 'vue';
+import XNotes from '@/components/MkNotes.vue';
+import * as os from '@/os';
+import { stream } from '@/stream';
+import * as sound from '@/scripts/sound';
+import { $i } from '@/account';
+
+const props = defineProps<{
+	src: string;
+	list?: string;
+	antenna?: string;
+	channel?: string;
+	sound?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'note'): void;
+	(ev: 'queue', count: number): void;
+}>();
+
+provide('inChannel', computed(() => props.src === 'channel'));
+
+const tlComponent: InstanceType<typeof XNotes> = $ref();
+
+const prepend = note => {
+	tlComponent.pagingComponent?.prepend(note);
+
+	emit('note');
+
+	if (props.sound) {
+		sound.play($i && (note.userId === $i.id) ? 'noteMy' : 'note');
+	}
+};
+
+const onUserAdded = () => {
+	tlComponent.pagingComponent?.reload();
+};
+
+const onUserRemoved = () => {
+	tlComponent.pagingComponent?.reload();
+};
+
+const onChangeFollowing = () => {
+	if (!tlComponent.pagingComponent?.backed) {
+		tlComponent.pagingComponent?.reload();
+	}
+};
+
+let endpoint;
+let query;
+let connection;
+let connection2;
+
+if (props.src === 'antenna') {
+	endpoint = 'antennas/notes';
+	query = {
+		antennaId: props.antenna,
+	};
+	connection = stream.useChannel('antenna', {
+		antennaId: props.antenna,
+	});
+	connection.on('note', prepend);
+} else if (props.src === 'home') {
+	endpoint = 'notes/timeline';
+	connection = stream.useChannel('homeTimeline');
+	connection.on('note', prepend);
+
+	connection2 = stream.useChannel('main');
+	connection2.on('follow', onChangeFollowing);
+	connection2.on('unfollow', onChangeFollowing);
+} else if (props.src === 'local') {
+	endpoint = 'notes/local-timeline';
+	connection = stream.useChannel('localTimeline');
+	connection.on('note', prepend);
+} else if (props.src === 'social') {
+	endpoint = 'notes/hybrid-timeline';
+	connection = stream.useChannel('hybridTimeline');
+	connection.on('note', prepend);
+} else if (props.src === 'global') {
+	endpoint = 'notes/global-timeline';
+	connection = stream.useChannel('globalTimeline');
+	connection.on('note', prepend);
+} else if (props.src === 'mentions') {
+	endpoint = 'notes/mentions';
+	connection = stream.useChannel('main');
+	connection.on('mention', prepend);
+} else if (props.src === 'directs') {
+	endpoint = 'notes/mentions';
+	query = {
+		visibility: 'specified',
+	};
+	const onNote = note => {
+		if (note.visibility === 'specified') {
+			prepend(note);
+		}
+	};
+	connection = stream.useChannel('main');
+	connection.on('mention', onNote);
+} else if (props.src === 'list') {
+	endpoint = 'notes/user-list-timeline';
+	query = {
+		listId: props.list,
+	};
+	connection = stream.useChannel('userList', {
+		listId: props.list,
+	});
+	connection.on('note', prepend);
+	connection.on('userAdded', onUserAdded);
+	connection.on('userRemoved', onUserRemoved);
+} else if (props.src === 'channel') {
+	endpoint = 'channels/timeline';
+	query = {
+		channelId: props.channel,
+	};
+	connection = stream.useChannel('channel', {
+		channelId: props.channel,
+	});
+	connection.on('note', prepend);
+}
+
+const pagination = {
+	endpoint: endpoint,
+	limit: 10,
+	params: query,
+};
+
+onUnmounted(() => {
+	connection.dispose();
+	if (connection2) connection2.dispose();
+});
+
+/* TODO
+const timetravel = (date?: Date) => {
+	this.date = date;
+	this.$refs.tl.reload();
+};
+*/
+</script>
diff --git a/packages/frontend/src/components/MkToast.vue b/packages/frontend/src/components/MkToast.vue
new file mode 100644
index 0000000000..c9fad64eb6
--- /dev/null
+++ b/packages/frontend/src/components/MkToast.vue
@@ -0,0 +1,66 @@
+<template>
+<div class="mk-toast">
+	<transition :name="$store.state.animation ? 'toast' : ''" appear @after-leave="emit('closed')">
+		<div v-if="showing" class="body _acrylic" :style="{ zIndex }">
+			<div class="message">
+				{{ message }}
+			</div>
+		</div>
+	</transition>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import * as os from '@/os';
+
+defineProps<{
+	message: string;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const zIndex = os.claimZIndex('high');
+let showing = $ref(true);
+
+onMounted(() => {
+	window.setTimeout(() => {
+		showing = false;
+	}, 4000);
+});
+</script>
+
+<style lang="scss" scoped>
+.toast-enter-active, .toast-leave-active {
+	transition: opacity 0.3s, transform 0.3s !important;
+}
+.toast-enter-from, .toast-leave-to {
+	opacity: 0;
+	transform: translateY(-100%);
+}
+
+.mk-toast {
+	> .body {
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		margin: 0 auto;
+		margin-top: 16px;
+		min-width: 300px;
+		max-width: calc(100% - 32px);
+		width: min-content;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+		border-radius: 8px;
+		overflow: clip;
+		text-align: center;
+		pointer-events: none;
+
+		> .message {
+			padding: 16px 24px;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkTokenGenerateWindow.vue b/packages/frontend/src/components/MkTokenGenerateWindow.vue
new file mode 100644
index 0000000000..b846034a24
--- /dev/null
+++ b/packages/frontend/src/components/MkTokenGenerateWindow.vue
@@ -0,0 +1,90 @@
+<template>
+<XModalWindow
+	ref="dialog"
+	:width="400"
+	:height="450"
+	:with-ok-button="true"
+	:ok-button-disabled="false"
+	:can-close="false"
+	@close="dialog.close()"
+	@closed="$emit('closed')"
+	@ok="ok()"
+>
+	<template #header>{{ title || $ts.generateAccessToken }}</template>
+	<div v-if="information" class="_section">
+		<MkInfo warn>{{ information }}</MkInfo>
+	</div>
+	<div class="_section">
+		<MkInput v-model="name">
+			<template #label>{{ $ts.name }}</template>
+		</MkInput>
+	</div>
+	<div class="_section">
+		<div style="margin-bottom: 16px;"><b>{{ $ts.permission }}</b></div>
+		<MkButton inline @click="disableAll">{{ $ts.disableAll }}</MkButton>
+		<MkButton inline @click="enableAll">{{ $ts.enableAll }}</MkButton>
+		<MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch>
+	</div>
+</XModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import { permissions as kinds } from 'misskey-js';
+import MkInput from './form/input.vue';
+import MkSwitch from './form/switch.vue';
+import MkButton from './MkButton.vue';
+import MkInfo from './MkInfo.vue';
+import XModalWindow from '@/components/MkModalWindow.vue';
+
+const props = withDefaults(defineProps<{
+	title?: string | null;
+	information?: string | null;
+	initialName?: string | null;
+	initialPermissions?: string[] | null;
+}>(), {
+	title: null,
+	information: null,
+	initialName: null,
+	initialPermissions: null,
+});
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+	(ev: 'done', result: { name: string | null, permissions: string[] }): void;
+}>();
+
+const dialog = $ref<InstanceType<typeof XModalWindow>>();
+let name = $ref(props.initialName);
+let permissions = $ref({});
+
+if (props.initialPermissions) {
+	for (const kind of props.initialPermissions) {
+		permissions[kind] = true;
+	}
+} else {
+	for (const kind of kinds) {
+		permissions[kind] = false;
+	}
+}
+
+function ok(): void {
+	emit('done', {
+		name: name,
+		permissions: Object.keys(permissions).filter(p => permissions[p]),
+	});
+	dialog.close();
+}
+
+function disableAll(): void {
+	for (const p in permissions) {
+		permissions[p] = false;
+	}
+}
+
+function enableAll(): void {
+	for (const p in permissions) {
+		permissions[p] = true;
+	}
+}
+</script>
diff --git a/packages/frontend/src/components/MkTooltip.vue b/packages/frontend/src/components/MkTooltip.vue
new file mode 100644
index 0000000000..4c6258d245
--- /dev/null
+++ b/packages/frontend/src/components/MkTooltip.vue
@@ -0,0 +1,101 @@
+<template>
+<transition :name="$store.state.animation ? 'tooltip' : ''" appear @after-leave="emit('closed')">
+	<div v-show="showing" ref="el" class="buebdbiu _acrylic _shadow" :style="{ zIndex, maxWidth: maxWidth + 'px' }">
+		<slot>
+			<Mfm v-if="asMfm" :text="text"/>
+			<span v-else>{{ text }}</span>
+		</slot>
+	</div>
+</transition>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+import * as os from '@/os';
+import { calcPopupPosition } from '@/scripts/popup-position';
+
+const props = withDefaults(defineProps<{
+	showing: boolean;
+	targetElement?: HTMLElement;
+	x?: number;
+	y?: number;
+	text?: string;
+	asMfm?: boolean;
+	maxWidth?: number;
+	direction?: 'top' | 'bottom' | 'right' | 'left';
+	innerMargin?: number;
+}>(), {
+	maxWidth: 250,
+	direction: 'top',
+	innerMargin: 0,
+});
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const el = ref<HTMLElement>();
+const zIndex = os.claimZIndex('high');
+
+function setPosition() {
+	const data = calcPopupPosition(el.value, {
+		anchorElement: props.targetElement,
+		direction: props.direction,
+		align: 'center',
+		innerMargin: props.innerMargin,
+		x: props.x,
+		y: props.y,
+	});
+
+	el.value.style.transformOrigin = data.transformOrigin;
+	el.value.style.left = data.left + 'px';
+	el.value.style.top = data.top + 'px';
+}
+
+let loopHandler;
+
+onMounted(() => {
+	nextTick(() => {
+		setPosition();
+
+		const loop = () => {
+			loopHandler = window.requestAnimationFrame(() => {
+				setPosition();
+				loop();
+			});
+		};
+
+		loop();
+	});
+});
+
+onUnmounted(() => {
+	window.cancelAnimationFrame(loopHandler);
+});
+</script>
+
+<style lang="scss" scoped>
+.tooltip-enter-active,
+.tooltip-leave-active {
+	opacity: 1;
+	transform: scale(1);
+	transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.tooltip-enter-from,
+.tooltip-leave-active {
+	opacity: 0;
+	transform: scale(0.75);
+}
+
+.buebdbiu {
+	position: absolute;
+	font-size: 0.8em;
+	padding: 8px 12px;
+	box-sizing: border-box;
+	text-align: center;
+	border-radius: 4px;
+	border: solid 0.5px var(--divider);
+	pointer-events: none;
+	transform-origin: center center;
+}
+</style>
diff --git a/packages/frontend/src/components/MkUpdated.vue b/packages/frontend/src/components/MkUpdated.vue
new file mode 100644
index 0000000000..48aeb30224
--- /dev/null
+++ b/packages/frontend/src/components/MkUpdated.vue
@@ -0,0 +1,51 @@
+<template>
+<MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')">
+	<div class="ewlycnyt">
+		<div class="title"><MkSparkle>{{ i18n.ts.misskeyUpdated }}</MkSparkle></div>
+		<div class="version">✨{{ version }}🚀</div>
+		<MkButton full @click="whatIsNew">{{ i18n.ts.whatIsNew }}</MkButton>
+		<MkButton class="gotIt" primary full @click="$refs.modal.close()">{{ i18n.ts.gotIt }}</MkButton>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MkModal from '@/components/MkModal.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkSparkle from '@/components/MkSparkle.vue';
+import { version } from '@/config';
+import { i18n } from '@/i18n';
+
+const modal = ref<InstanceType<typeof MkModal>>();
+
+const whatIsNew = () => {
+	modal.value.close();
+	window.open(`https://misskey-hub.net/docs/releases.html#_${version.replace(/\./g, '-')}`, '_blank');
+};
+</script>
+
+<style lang="scss" scoped>
+.ewlycnyt {
+	position: relative;
+	padding: 32px;
+	min-width: 320px;
+	max-width: 480px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+
+	> .title {
+		font-weight: bold;
+	}
+
+	> .version {
+		margin: 1em 0;
+	}
+
+	> .gotIt {
+		margin: 8px 0 0 0;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
new file mode 100644
index 0000000000..b2d16ddb01
--- /dev/null
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -0,0 +1,383 @@
+<template>
+<div v-if="playerEnabled" class="player" :style="`padding: ${(player.height || 0) / (player.width || 1) * 100}% 0 0`">
+	<button class="disablePlayer" :title="i18n.ts.disablePlayer" @click="playerEnabled = false"><i class="ti ti-x"></i></button>
+	<iframe :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" :width="player.width || '100%'" :heigth="player.height || 250" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
+</div>
+<div v-else-if="tweetId && tweetExpanded" ref="twitter" class="twitter">
+	<iframe ref="tweet" scrolling="no" frameborder="no" :style="{ position: 'relative', width: '100%', height: `${tweetHeight}px` }" :src="`https://platform.twitter.com/embed/index.html?embedId=${embedId}&amp;hideCard=false&amp;hideThread=false&amp;lang=en&amp;theme=${$store.state.darkMode ? 'dark' : 'light'}&amp;id=${tweetId}`"></iframe>
+</div>
+<div v-else v-size="{ max: [400, 350] }" class="mk-url-preview">
+	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+		<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
+			<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
+				<button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="isMobile? playerEnabled = true : openPlayer()"><i class="ti ti-player-play"></i></button>
+			</div>
+			<article>
+				<header>
+					<h1 :title="title">{{ title }}</h1>
+				</header>
+				<p v-if="description" :title="description">{{ description.length > 85 ? description.slice(0, 85) + '…' : description }}</p>
+				<footer>
+					<img v-if="icon" class="icon" :src="icon"/>
+					<p :title="sitename">{{ sitename }}</p>
+				</footer>
+			</article>
+		</component>
+	</transition>
+	<div v-if="tweetId" class="expandTweet">
+		<a @click="tweetExpanded = true">
+			<i class="ti ti-brand-twitter"></i> {{ i18n.ts.expandTweet }}
+		</a>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, onMounted, onUnmounted } from 'vue';
+import { url as local, lang } from '@/config';
+import { i18n } from '@/i18n';
+import * as os from '@/os';
+import { deviceKind } from '@/scripts/device-kind';
+
+const props = withDefaults(defineProps<{
+	url: string;
+	detail?: boolean;
+	compact?: boolean;
+}>(), {
+	detail: false,
+	compact: false,
+});
+
+const MOBILE_THRESHOLD = 500;
+const isMobile = $ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
+
+const self = props.url.startsWith(local);
+const attr = self ? 'to' : 'href';
+const target = self ? null : '_blank';
+let fetching = $ref(true);
+let title = $ref<string | null>(null);
+let description = $ref<string | null>(null);
+let thumbnail = $ref<string | null>(null);
+let icon = $ref<string | null>(null);
+let sitename = $ref<string | null>(null);
+let player = $ref({
+	url: null,
+	width: null,
+	height: null,
+});
+let playerEnabled = $ref(false);
+let tweetId = $ref<string | null>(null);
+let tweetExpanded = $ref(props.detail);
+const embedId = `embed${Math.random().toString().replace(/\D/, '')}`;
+let tweetHeight = $ref(150);
+
+const requestUrl = new URL(props.url);
+
+if (requestUrl.hostname === 'twitter.com' || requestUrl.hostname === 'mobile.twitter.com') {
+	const m = requestUrl.pathname.match(/^\/.+\/status(?:es)?\/(\d+)/);
+	if (m) tweetId = m[1];
+}
+
+if (requestUrl.hostname === 'music.youtube.com' && requestUrl.pathname.match('^/(?:watch|channel)')) {
+	requestUrl.hostname = 'www.youtube.com';
+}
+
+const requestLang = (lang ?? 'ja-JP').replace('ja-KS', 'ja-JP');
+
+requestUrl.hash = '';
+
+window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
+	res.json().then(info => {
+		if (info.url == null) return;
+		title = info.title;
+		description = info.description;
+		thumbnail = info.thumbnail;
+		icon = info.icon;
+		sitename = info.sitename;
+		fetching = false;
+		player = info.player;
+	});
+});
+
+function adjustTweetHeight(message: any) {
+	if (message.origin !== 'https://platform.twitter.com') return;
+	const embed = message.data?.['twttr.embed'];
+	if (embed?.method !== 'twttr.private.resize') return;
+	if (embed?.id !== embedId) return;
+	const height = embed?.params[0]?.height;
+	if (height) tweetHeight = height;
+}
+
+const openPlayer = (): void => {
+	os.popup(defineAsyncComponent(() => import('@/components/MkYoutubePlayer.vue')), {
+		url: requestUrl.href,
+	});
+};
+
+(window as any).addEventListener('message', adjustTweetHeight);
+
+onUnmounted(() => {
+	(window as any).removeEventListener('message', adjustTweetHeight);
+});
+</script>
+
+<style lang="scss" scoped>
+.player {
+	position: relative;
+	width: 100%;
+
+	> button {
+		position: absolute;
+		top: -1.5em;
+		right: 0;
+		font-size: 1em;
+		width: 1.5em;
+		height: 1.5em;
+		padding: 0;
+		margin: 0;
+		color: var(--fg);
+		background: rgba(128, 128, 128, 0.2);
+		opacity: 0.7;
+
+		&:hover {
+			opacity: 0.9;
+		}
+	}
+
+	> iframe {
+		height: 100%;
+		left: 0;
+		position: absolute;
+		top: 0;
+		width: 100%;
+	}
+}
+
+.mk-url-preview {
+	&.max-width_400px {
+		> .link {
+			font-size: 12px;
+
+			> .thumbnail {
+				height: 80px;
+			}
+
+			> article {
+				padding: 12px;
+			}
+		}
+	}
+
+	&.max-width_350px {
+		> .link {
+			font-size: 10px;
+
+			> .thumbnail {
+				height: 70px;
+			}
+
+			> article {
+				padding: 8px;
+
+				> header {
+					margin-bottom: 4px;
+				}
+
+				> footer {
+					margin-top: 4px;
+
+					> img {
+						width: 12px;
+						height: 12px;
+					}
+				}
+			}
+
+			&.compact {
+				> .thumbnail {
+					position: absolute;
+					width: 56px;
+					height: 100%;
+				}
+
+				> article {
+					left: 56px;
+					width: calc(100% - 56px);
+					padding: 4px;
+
+					> header {
+						margin-bottom: 2px;
+					}
+
+					> footer {
+						margin-top: 2px;
+					}
+				}
+			}
+		}
+	}
+
+	> .link {
+		position: relative;
+		display: block;
+		font-size: 14px;
+		box-shadow: 0 0 0 1px var(--divider);
+		border-radius: 8px;
+		overflow: hidden;
+
+		&:hover {
+			text-decoration: none;
+			border-color: rgba(0, 0, 0, 0.2);
+
+			> article > header > h1 {
+				text-decoration: underline;
+			}
+		}
+
+		> .thumbnail {
+			position: absolute;
+			width: 100px;
+			height: 100%;
+			background-position: center;
+			background-size: cover;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			> button {
+				font-size: 3.5em;
+				opacity: 0.7;
+
+				&:hover {
+					font-size: 4em;
+					opacity: 0.9;
+				}
+			}
+
+			& + article {
+				left: 100px;
+				width: calc(100% - 100px);
+			}
+		}
+
+		> article {
+			position: relative;
+			box-sizing: border-box;
+			padding: 16px;
+
+			> header {
+				margin-bottom: 8px;
+
+				> h1 {
+					margin: 0;
+					font-size: 1em;
+				}
+			}
+
+			> p {
+				margin: 0;
+				font-size: 0.8em;
+			}
+
+			> footer {
+				margin-top: 8px;
+				height: 16px;
+
+				> img {
+					display: inline-block;
+					width: 16px;
+					height: 16px;
+					margin-right: 4px;
+					vertical-align: top;
+				}
+
+				> p {
+					display: inline-block;
+					margin: 0;
+					color: var(--urlPreviewInfo);
+					font-size: 0.8em;
+					line-height: 16px;
+					vertical-align: top;
+				}
+			}
+		}
+
+		&.compact {
+			> article {
+				> header h1, p, footer {
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+				}
+			}
+		}
+	}
+}
+
+@container (max-width: 400px) {
+	.mk-url-preview {
+		> .link {
+			font-size: 12px;
+
+			> .thumbnail {
+				height: 80px;
+			}
+
+			> article {
+				padding: 12px;
+			}
+		}
+	}
+}
+
+@container (max-width: 350px) {
+	.mk-url-preview {
+		> .link {
+			font-size: 10px;
+
+			> .thumbnail {
+				height: 70px;
+			}
+
+			> article {
+				padding: 8px;
+
+				> header {
+					margin-bottom: 4px;
+				}
+
+				> footer {
+					margin-top: 4px;
+
+					> img {
+						width: 12px;
+						height: 12px;
+					}
+				}
+			}
+
+			&.compact {
+				> .thumbnail {
+					position: absolute;
+					width: 56px;
+					height: 100%;
+				}
+
+				> article {
+					left: 56px;
+					width: calc(100% - 56px);
+					padding: 4px;
+
+					> header {
+						margin-bottom: 2px;
+					}
+
+					> footer {
+						margin-top: 2px;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkUrlPreviewPopup.vue b/packages/frontend/src/components/MkUrlPreviewPopup.vue
new file mode 100644
index 0000000000..f343c6d8a6
--- /dev/null
+++ b/packages/frontend/src/components/MkUrlPreviewPopup.vue
@@ -0,0 +1,45 @@
+<template>
+<div class="fgmtyycl" :style="{ zIndex, top: top + 'px', left: left + 'px' }">
+	<transition :name="$store.state.animation ? 'zoom' : ''" @after-leave="emit('closed')">
+		<MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/>
+	</transition>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import MkUrlPreview from '@/components/MkUrlPreview.vue';
+import * as os from '@/os';
+
+const props = defineProps<{
+	showing: boolean;
+	url: string;
+	source: HTMLElement;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+const zIndex = os.claimZIndex('middle');
+let top = $ref(0);
+let left = $ref(0);
+
+onMounted(() => {
+	const rect = props.source.getBoundingClientRect();
+	const x = Math.max((rect.left + (props.source.offsetWidth / 2)) - (300 / 2), 6) + window.pageXOffset;
+	const y = rect.top + props.source.offsetHeight + window.pageYOffset;
+
+	top = y;
+	left = x;
+});
+</script>
+
+<style lang="scss" scoped>
+.fgmtyycl {
+	position: absolute;
+	width: 500px;
+	max-width: calc(90vw - 12px);
+	pointer-events: none;
+}
+</style>
diff --git a/packages/frontend/src/components/MkUserCardMini.vue b/packages/frontend/src/components/MkUserCardMini.vue
new file mode 100644
index 0000000000..1a4c494987
--- /dev/null
+++ b/packages/frontend/src/components/MkUserCardMini.vue
@@ -0,0 +1,99 @@
+<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="chartValues" class="chart" :src="chartValues"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import * as misskey from 'misskey-js';
+import MkMiniChart from '@/components/MkMiniChart.vue';
+import * as os from '@/os';
+import { acct } from '@/filters/user';
+
+const props = defineProps<{
+	user: misskey.entities.User;
+}>();
+
+let chartValues = $ref<number[] | null>(null);
+
+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>
+
+<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) {
+			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;
+	}
+
+	&: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/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue
new file mode 100644
index 0000000000..036cbea304
--- /dev/null
+++ b/packages/frontend/src/components/MkUserInfo.vue
@@ -0,0 +1,137 @@
+<template>
+<div class="_panel vjnjpkug">
+	<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"></div>
+	<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
+	<div class="title">
+		<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
+		<p class="username"><MkAcct :user="user"/></p>
+	</div>
+	<span v-if="$i && $i.id !== user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
+	<div class="description">
+		<div v-if="user.description" class="mfm">
+			<Mfm :text="user.description" :author="user" :i="$i" :custom-emojis="user.emojis"/>
+		</div>
+		<span v-else style="opacity: 0.7;">{{ i18n.ts.noAccountDescription }}</span>
+	</div>
+	<div class="status">
+		<div>
+			<p>{{ i18n.ts.notes }}</p><span>{{ user.notesCount }}</span>
+		</div>
+		<div>
+			<p>{{ i18n.ts.following }}</p><span>{{ user.followingCount }}</span>
+		</div>
+		<div>
+			<p>{{ i18n.ts.followers }}</p><span>{{ user.followersCount }}</span>
+		</div>
+	</div>
+	<MkFollowButton v-if="$i && user.id != $i.id" class="koudoku-button" :user="user" mini/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import * as misskey from 'misskey-js';
+import MkFollowButton from '@/components/MkFollowButton.vue';
+import { userPage } from '@/filters/user';
+import { i18n } from '@/i18n';
+
+defineProps<{
+	user: misskey.entities.UserDetailed;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.vjnjpkug {
+	position: relative;
+
+	> .banner {
+		height: 84px;
+		background-color: rgba(0, 0, 0, 0.1);
+		background-size: cover;
+		background-position: center;
+	}
+
+	> .avatar {
+		display: block;
+		position: absolute;
+		top: 62px;
+		left: 13px;
+		z-index: 2;
+		width: 58px;
+		height: 58px;
+		border: solid 4px var(--panel);
+	}
+
+	> .title {
+		display: block;
+		padding: 10px 0 10px 88px;
+
+		> .name {
+			display: inline-block;
+			margin: 0;
+			font-weight: bold;
+			line-height: 16px;
+			word-break: break-all;
+		}
+
+		> .username {
+			display: block;
+			margin: 0;
+			line-height: 16px;
+			font-size: 0.8em;
+			color: var(--fg);
+			opacity: 0.7;
+		}
+	}
+	
+	> .followed {
+		position: absolute;
+		top: 12px;
+		left: 12px;
+		padding: 4px 8px;
+		color: #fff;
+		background: rgba(0, 0, 0, 0.7);
+		font-size: 0.7em;
+		border-radius: 6px;
+	}
+	
+	> .description {
+		padding: 16px;
+		font-size: 0.8em;
+		border-top: solid 0.5px var(--divider);
+
+		> .mfm {
+			display: -webkit-box;
+			-webkit-line-clamp: 3;
+			-webkit-box-orient: vertical;  
+			overflow: hidden;
+		}
+	}
+
+	> .status {
+		padding: 10px 16px;
+		border-top: solid 0.5px var(--divider);
+
+		> div {
+			display: inline-block;
+			width: 33%;
+
+			> p {
+				margin: 0;
+				font-size: 0.7em;
+				color: var(--fg);
+			}
+
+			> span {
+				font-size: 1em;
+				color: var(--accent);
+			}
+		}
+	}
+
+	> .koudoku-button {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkUserList.vue b/packages/frontend/src/components/MkUserList.vue
new file mode 100644
index 0000000000..e1f47c7673
--- /dev/null
+++ b/packages/frontend/src/components/MkUserList.vue
@@ -0,0 +1,39 @@
+<template>
+<MkPagination ref="pagingComponent" :pagination="pagination">
+	<template #empty>
+		<div class="_fullinfo">
+			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+			<div>{{ i18n.ts.noUsers }}</div>
+		</div>
+	</template>
+
+	<template #default="{ items: users }">
+		<div class="efvhhmdq">
+			<MkUserInfo v-for="user in users" :key="user.id" class="user" :user="user"/>
+		</div>
+	</template>
+</MkPagination>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MkUserInfo from '@/components/MkUserInfo.vue';
+import MkPagination, { Paging } from '@/components/MkPagination.vue';
+import { userPage } from '@/filters/user';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	pagination: Paging;
+	noGap?: boolean;
+}>();
+
+const pagingComponent = ref<InstanceType<typeof MkPagination>>();
+</script>
+
+<style lang="scss" scoped>
+.efvhhmdq {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+	grid-gap: var(--margin);
+}
+</style>
diff --git a/packages/frontend/src/components/MkUserOnlineIndicator.vue b/packages/frontend/src/components/MkUserOnlineIndicator.vue
new file mode 100644
index 0000000000..a4f6f80383
--- /dev/null
+++ b/packages/frontend/src/components/MkUserOnlineIndicator.vue
@@ -0,0 +1,45 @@
+<template>
+<div v-tooltip="text" class="fzgwjkgc" :class="user.onlineStatus"></div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as misskey from 'misskey-js';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	user: misskey.entities.User;
+}>();
+
+const text = $computed(() => {
+	switch (props.user.onlineStatus) {
+		case 'online': return i18n.ts.online;
+		case 'active': return i18n.ts.active;
+		case 'offline': return i18n.ts.offline;
+		case 'unknown': return i18n.ts.unknown;
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.fzgwjkgc {
+	box-shadow: 0 0 0 3px var(--panel);
+	border-radius: 120%; // Blinkのバグか知らんけど、100%ぴったりにすると何故か若干楕円でレンダリングされる
+
+	&.online {
+		background: #58d4c9;
+	}
+
+	&.active {
+		background: #e4bc48;
+	}
+
+	&.offline {
+		background: #ea5353;
+	}
+
+	&.unknown {
+		background: #888;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkUserPreview.vue b/packages/frontend/src/components/MkUserPreview.vue
new file mode 100644
index 0000000000..4de2e8baa2
--- /dev/null
+++ b/packages/frontend/src/components/MkUserPreview.vue
@@ -0,0 +1,184 @@
+<template>
+<transition :name="$store.state.animation ? 'popup' : ''" appear @after-leave="emit('closed')">
+	<div v-if="showing" class="fxxzrfni _popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }">
+		<div v-if="user != null" class="info">
+			<div class="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''">
+				<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span>
+			</div>
+			<MkAvatar class="avatar" :user="user" :disable-preview="true" :show-indicator="true"/>
+			<div class="title">
+				<MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
+				<p class="username"><MkAcct :user="user"/></p>
+			</div>
+			<div class="description">
+				<Mfm v-if="user.description" :text="user.description" :author="user" :i="$i" :custom-emojis="user.emojis"/>
+			</div>
+			<div class="status">
+				<div>
+					<p>{{ $ts.notes }}</p><span>{{ user.notesCount }}</span>
+				</div>
+				<div>
+					<p>{{ $ts.following }}</p><span>{{ user.followingCount }}</span>
+				</div>
+				<div>
+					<p>{{ $ts.followers }}</p><span>{{ user.followersCount }}</span>
+				</div>
+			</div>
+			<MkFollowButton v-if="$i && user.id != $i.id" class="koudoku-button" :user="user" mini/>
+		</div>
+		<div v-else>
+			<MkLoading/>
+		</div>
+	</div>
+</transition>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import * as Acct from 'misskey-js/built/acct';
+import * as misskey from 'misskey-js';
+import MkFollowButton from '@/components/MkFollowButton.vue';
+import { userPage } from '@/filters/user';
+import * as os from '@/os';
+
+const props = defineProps<{
+	showing: boolean;
+	q: string;
+	source: HTMLElement;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+	(ev: 'mouseover'): void;
+	(ev: 'mouseleave'): void;
+}>();
+
+const zIndex = os.claimZIndex('middle');
+let user = $ref<misskey.entities.UserDetailed | null>(null);
+let top = $ref(0);
+let left = $ref(0);
+
+onMounted(() => {
+	if (typeof props.q === 'object') {
+		user = props.q;
+	} else {
+		const query = props.q.startsWith('@') ?
+			Acct.parse(props.q.substr(1)) :
+			{ userId: props.q };
+
+		os.api('users/show', query).then(res => {
+			if (!props.showing) return;
+			user = res;
+		});
+	}
+
+	const rect = props.source.getBoundingClientRect();
+	const x = ((rect.left + (props.source.offsetWidth / 2)) - (300 / 2)) + window.pageXOffset;
+	const y = rect.top + props.source.offsetHeight + window.pageYOffset;
+
+	top = y;
+	left = x;
+});
+</script>
+
+<style lang="scss" scoped>
+.popup-enter-active, .popup-leave-active {
+	transition: opacity 0.3s, transform 0.3s !important;
+}
+.popup-enter-from, .popup-leave-to {
+	opacity: 0;
+	transform: scale(0.9);
+}
+
+.fxxzrfni {
+	position: absolute;
+	width: 300px;
+	overflow: hidden;
+	transform-origin: center top;
+
+	> .info {
+		> .banner {
+			height: 84px;
+			background-color: rgba(0, 0, 0, 0.1);
+			background-size: cover;
+			background-position: center;
+			> .followed {
+					position: absolute;
+					top: 12px;
+					left: 12px;
+					padding: 4px 8px;
+					color: #fff;
+					background: rgba(0, 0, 0, 0.7);
+					font-size: 0.7em;
+					border-radius: 6px;
+			}
+		}
+
+		> .avatar {
+			display: block;
+			position: absolute;
+			top: 62px;
+			left: 13px;
+			z-index: 2;
+			width: 58px;
+			height: 58px;
+			border: solid 3px var(--face);
+			border-radius: 8px;
+		}
+
+		> .title {
+			display: block;
+			padding: 8px 0 8px 82px;
+
+			> .name {
+				display: inline-block;
+				margin: 0;
+				font-weight: bold;
+				line-height: 16px;
+				word-break: break-all;
+			}
+
+			> .username {
+				display: block;
+				margin: 0;
+				line-height: 16px;
+				font-size: 0.8em;
+				color: var(--fg);
+				opacity: 0.7;
+			}
+		}
+
+		> .description {
+			padding: 0 16px;
+			font-size: 0.8em;
+			color: var(--fg);
+		}
+
+		> .status {
+			padding: 8px 16px;
+
+			> div {
+				display: inline-block;
+				width: 33%;
+
+				> p {
+					margin: 0;
+					font-size: 0.7em;
+					color: var(--fg);
+				}
+
+				> span {
+					font-size: 1em;
+					color: var(--accent);
+				}
+			}
+		}
+
+		> .koudoku-button {
+			position: absolute;
+			top: 8px;
+			right: 8px;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkUserSelectDialog.vue b/packages/frontend/src/components/MkUserSelectDialog.vue
new file mode 100644
index 0000000000..1d31769c30
--- /dev/null
+++ b/packages/frontend/src/components/MkUserSelectDialog.vue
@@ -0,0 +1,190 @@
+<template>
+<XModalWindow
+	ref="dialogEl"
+	:with-ok-button="true"
+	:ok-button-disabled="selected == null"
+	@click="cancel()"
+	@close="cancel()"
+	@ok="ok()"
+	@closed="$emit('closed')"
+>
+	<template #header>{{ i18n.ts.selectUser }}</template>
+	<div class="tbhwbxda">
+		<div class="form">
+			<FormSplit :min-width="170">
+				<MkInput v-model="username" :autofocus="true" @update:model-value="search">
+					<template #label>{{ i18n.ts.username }}</template>
+					<template #prefix>@</template>
+				</MkInput>
+				<MkInput v-model="host" @update:model-value="search">
+					<template #label>{{ i18n.ts.host }}</template>
+					<template #prefix>@</template>
+				</MkInput>
+			</FormSplit>
+		</div>
+		<div v-if="username != '' || host != ''" class="result" :class="{ hit: users.length > 0 }">
+			<div v-if="users.length > 0" class="users">
+				<div v-for="user in users" :key="user.id" class="user" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
+					<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
+					<div class="body">
+						<MkUserName :user="user" class="name"/>
+						<MkAcct :user="user" class="acct"/>
+					</div>
+				</div>
+			</div>
+			<div v-else class="empty">
+				<span>{{ i18n.ts.noUsers }}</span>
+			</div>
+		</div>
+		<div v-if="username == '' && host == ''" class="recent">
+			<div class="users">
+				<div v-for="user in recentUsers" :key="user.id" class="user" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
+					<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
+					<div class="body">
+						<MkUserName :user="user" class="name"/>
+						<MkAcct :user="user" class="acct"/>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</XModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted } from 'vue';
+import * as misskey from 'misskey-js';
+import MkInput from '@/components/form/input.vue';
+import FormSplit from '@/components/form/split.vue';
+import XModalWindow from '@/components/MkModalWindow.vue';
+import * as os from '@/os';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+
+const emit = defineEmits<{
+	(ev: 'ok', selected: misskey.entities.UserDetailed): void;
+	(ev: 'cancel'): void;
+	(ev: 'closed'): void;
+}>();
+
+let username = $ref('');
+let host = $ref('');
+let users: misskey.entities.UserDetailed[] = $ref([]);
+let recentUsers: misskey.entities.UserDetailed[] = $ref([]);
+let selected: misskey.entities.UserDetailed | null = $ref(null);
+let dialogEl = $ref();
+
+const search = () => {
+	if (username === '' && host === '') {
+		users = [];
+		return;
+	}
+	os.api('users/search-by-username-and-host', {
+		username: username,
+		host: host,
+		limit: 10,
+		detail: false,
+	}).then(_users => {
+		users = _users;
+	});
+};
+
+const ok = () => {
+	if (selected == null) return;
+	emit('ok', selected);
+	dialogEl.close();
+
+	// 最近使ったユーザー更新
+	let recents = defaultStore.state.recentlyUsedUsers;
+	recents = recents.filter(x => x !== selected.id);
+	recents.unshift(selected.id);
+	defaultStore.set('recentlyUsedUsers', recents.splice(0, 16));
+};
+
+const cancel = () => {
+	emit('cancel');
+	dialogEl.close();
+};
+
+onMounted(() => {
+	os.api('users/show', {
+		userIds: defaultStore.state.recentlyUsedUsers,
+	}).then(users => {
+		recentUsers = users;
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+.tbhwbxda {
+	> .form {
+		padding: 0 var(--root-margin);
+	}
+
+	> .result, > .recent {
+		display: flex;
+		flex-direction: column;
+		overflow: auto;
+		height: 100%;
+
+		&.result.hit {
+			padding: 0;
+		}
+
+		&.recent {
+			padding: 0;
+		}
+
+		> .users {
+			flex: 1;
+			overflow: auto;
+			padding: 8px 0;
+
+			> .user {
+				display: flex;
+				align-items: center;
+				padding: 8px var(--root-margin);
+				font-size: 14px;
+
+				&:hover {
+					background: var(--X7);
+				}
+
+				&.selected {
+					background: var(--accent);
+					color: #fff;
+				}
+
+				> * {
+					pointer-events: none;
+					user-select: none;
+				}
+
+				> .avatar {
+					width: 45px;
+					height: 45px;
+				}
+
+				> .body {
+					padding: 0 8px;
+					min-width: 0;
+
+					> .name {
+						display: block;
+						font-weight: bold;
+					}
+
+					> .acct {
+						opacity: 0.5;
+					}
+				}
+			}
+		}
+
+		> .empty {
+			opacity: 0.7;
+			text-align: center;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkUsersTooltip.vue b/packages/frontend/src/components/MkUsersTooltip.vue
new file mode 100644
index 0000000000..f0384e2d65
--- /dev/null
+++ b/packages/frontend/src/components/MkUsersTooltip.vue
@@ -0,0 +1,51 @@
+<template>
+<MkTooltip ref="tooltip" :showing="showing" :target-element="targetElement" :max-width="250" @closed="emit('closed')">
+	<div class="beaffaef">
+		<div v-for="u in users" :key="u.id" class="user">
+			<MkAvatar class="avatar" :user="u"/>
+			<MkUserName class="name" :user="u" :nowrap="true"/>
+		</div>
+		<div v-if="users.length < count" class="omitted">+{{ count - users.length }}</div>
+	</div>
+</MkTooltip>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkTooltip from './MkTooltip.vue';
+
+defineProps<{
+	showing: boolean;
+	users: any[]; // TODO
+	count: number;
+	targetElement: HTMLElement;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.beaffaef {
+	font-size: 0.9em;
+	text-align: left;
+
+	> .user {
+		line-height: 24px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		&:not(:last-child) {
+			margin-bottom: 3px;
+		}
+
+		> .avatar {
+			width: 24px;
+			height: 24px;
+			margin-right: 3px;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkVisibility.vue b/packages/frontend/src/components/MkVisibility.vue
new file mode 100644
index 0000000000..229907fbb8
--- /dev/null
+++ b/packages/frontend/src/components/MkVisibility.vue
@@ -0,0 +1,48 @@
+<template>
+<span v-if="note.visibility !== 'public'" :class="$style.visibility" :title="i18n.ts._visibility[note.visibility]">
+	<i v-if="note.visibility === 'home'" class="ti ti-home"></i>
+	<i v-else-if="note.visibility === 'followers'" class="ti ti-lock-open"></i>
+	<i v-else-if="note.visibility === 'specified'" ref="specified" class="ti ti-mail"></i>
+</span>
+<span v-if="note.localOnly" :class="$style.localOnly" :title="i18n.ts._visibility['localOnly']"><i class="ti ti-world-off"></i></span>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import XDetails from '@/components/MkUsersTooltip.vue';
+import * as os from '@/os';
+import { useTooltip } from '@/scripts/use-tooltip';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	note: {
+		visibility: string;
+		localOnly?: boolean;
+		visibleUserIds?: string[];
+	},
+}>();
+
+const specified = $ref<HTMLElement>();
+
+if (props.note.visibility === 'specified') {
+	useTooltip($$(specified), async (showing) => {
+		const users = await os.api('users/show', {
+			userIds: props.note.visibleUserIds,
+			limit: 10,
+		});
+
+		os.popup(XDetails, {
+			showing,
+			users,
+			count: props.note.visibleUserIds.length,
+			targetElement: specified,
+		}, {}, 'closed');
+	});
+}
+</script>
+
+<style lang="scss" module>
+.visibility, .localOnly {
+	margin-left: 0.5em;
+}
+</style>
diff --git a/packages/frontend/src/components/MkVisibilityPicker.vue b/packages/frontend/src/components/MkVisibilityPicker.vue
new file mode 100644
index 0000000000..8f0bcdeae8
--- /dev/null
+++ b/packages/frontend/src/components/MkVisibilityPicker.vue
@@ -0,0 +1,159 @@
+<template>
+<MkModal ref="modal" :z-priority="'high'" :src="src" @click="modal.close()" @closed="emit('closed')">
+	<div class="gqyayizv _popup">
+		<button key="public" class="_button" :class="{ active: v === 'public' }" data-index="1" @click="choose('public')">
+			<div><i class="ti ti-world"></i></div>
+			<div>
+				<span>{{ i18n.ts._visibility.public }}</span>
+				<span>{{ i18n.ts._visibility.publicDescription }}</span>
+			</div>
+		</button>
+		<button key="home" class="_button" :class="{ active: v === 'home' }" data-index="2" @click="choose('home')">
+			<div><i class="ti ti-home"></i></div>
+			<div>
+				<span>{{ i18n.ts._visibility.home }}</span>
+				<span>{{ i18n.ts._visibility.homeDescription }}</span>
+			</div>
+		</button>
+		<button key="followers" class="_button" :class="{ active: v === 'followers' }" data-index="3" @click="choose('followers')">
+			<div><i class="ti ti-lock-open"></i></div>
+			<div>
+				<span>{{ i18n.ts._visibility.followers }}</span>
+				<span>{{ i18n.ts._visibility.followersDescription }}</span>
+			</div>
+		</button>
+		<button key="specified" :disabled="localOnly" class="_button" :class="{ active: v === 'specified' }" data-index="4" @click="choose('specified')">
+			<div><i class="ti ti-mail"></i></div>
+			<div>
+				<span>{{ i18n.ts._visibility.specified }}</span>
+				<span>{{ i18n.ts._visibility.specifiedDescription }}</span>
+			</div>
+		</button>
+		<div class="divider"></div>
+		<button key="localOnly" class="_button localOnly" :class="{ active: localOnly }" data-index="5" @click="localOnly = !localOnly">
+			<div><i class="ti ti-world-off"></i></div>
+			<div>
+				<span>{{ i18n.ts._visibility.localOnly }}</span>
+				<span>{{ i18n.ts._visibility.localOnlyDescription }}</span>
+			</div>
+			<div><i :class="localOnly ? 'ti ti-toggle-right' : 'ti ti-toggle-left'"></i></div>
+		</button>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, watch } from 'vue';
+import * as misskey from 'misskey-js';
+import MkModal from '@/components/MkModal.vue';
+import { i18n } from '@/i18n';
+
+const modal = $ref<InstanceType<typeof MkModal>>();
+
+const props = withDefaults(defineProps<{
+	currentVisibility: typeof misskey.noteVisibilities[number];
+	currentLocalOnly: boolean;
+	src?: HTMLElement;
+}>(), {
+});
+
+const emit = defineEmits<{
+	(ev: 'changeVisibility', v: typeof misskey.noteVisibilities[number]): void;
+	(ev: 'changeLocalOnly', v: boolean): void;
+	(ev: 'closed'): void;
+}>();
+
+let v = $ref(props.currentVisibility);
+let localOnly = $ref(props.currentLocalOnly);
+
+watch($$(localOnly), () => {
+	emit('changeLocalOnly', localOnly);
+});
+
+function choose(visibility: typeof misskey.noteVisibilities[number]): void {
+	v = visibility;
+	emit('changeVisibility', visibility);
+	nextTick(() => {
+		modal.close();
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.gqyayizv {
+	width: 240px;
+	padding: 8px 0;
+
+	> .divider {
+		margin: 8px 0;
+		border-top: solid 0.5px var(--divider);
+	}
+
+	> button {
+		display: flex;
+		padding: 8px 14px;
+		font-size: 12px;
+		text-align: left;
+		width: 100%;
+		box-sizing: border-box;
+
+		&:hover {
+			background: rgba(0, 0, 0, 0.05);
+		}
+
+		&:active {
+			background: rgba(0, 0, 0, 0.1);
+		}
+
+		&.active {
+			color: var(--fgOnAccent);
+			background: var(--accent);
+		}
+
+		&.localOnly.active {
+			color: var(--accent);
+			background: inherit;
+		}
+
+		> *:nth-child(1) {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-right: 10px;
+			width: 16px;
+			top: 0;
+			bottom: 0;
+			margin-top: auto;
+			margin-bottom: auto;
+		}
+
+		> *:nth-child(2) {
+			flex: 1 1 auto;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+
+			> span:first-child {
+				display: block;
+				font-weight: bold;
+			}
+
+			> span:last-child:not(:first-child) {
+				opacity: 0.6;
+			}
+		}
+
+		> *:nth-child(3) {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-left: 10px;
+			width: 16px;
+			top: 0;
+			bottom: 0;
+			margin-top: auto;
+			margin-bottom: auto;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkWaitingDialog.vue b/packages/frontend/src/components/MkWaitingDialog.vue
new file mode 100644
index 0000000000..f4a9f4f22c
--- /dev/null
+++ b/packages/frontend/src/components/MkWaitingDialog.vue
@@ -0,0 +1,73 @@
+<template>
+<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="success ? done() : () => {}" @closed="emit('closed')">
+	<div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
+		<i v-if="success" class="ti ti-check icon success"></i>
+		<MkLoading v-else class="icon waiting" :em="true"/>
+		<div v-if="text && !success" class="text">{{ text }}<MkEllipsis/></div>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts" setup>
+import { watch, ref } from 'vue';
+import MkModal from '@/components/MkModal.vue';
+
+const modal = ref<InstanceType<typeof MkModal>>();
+
+const props = defineProps<{
+	success: boolean;
+	showing: boolean;
+	text?: string;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'done');
+	(ev: 'closed');
+}>();
+
+function done() {
+	emit('done');
+	modal.value.close();
+}
+
+watch(() => props.showing, () => {
+	if (!props.showing) done();
+});
+</script>
+
+<style lang="scss" scoped>
+.iuyakobc {
+	position: relative;
+	padding: 32px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+	width: 250px;
+
+	&.iconOnly {
+		padding: 0;
+		width: 96px;
+		height: 96px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	> .icon {
+		font-size: 32px;
+
+		&.success {
+			color: var(--accent);
+		}
+
+		&.waiting {
+			opacity: 0.7;
+		}
+	}
+
+	> .text {
+		margin-top: 16px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkWidgets.vue b/packages/frontend/src/components/MkWidgets.vue
new file mode 100644
index 0000000000..fff89117ce
--- /dev/null
+++ b/packages/frontend/src/components/MkWidgets.vue
@@ -0,0 +1,165 @@
+<template>
+<div class="vjoppmmu">
+	<template v-if="edit">
+		<header>
+			<MkSelect v-model="widgetAdderSelected" style="margin-bottom: var(--margin)" class="mk-widget-select">
+				<template #label>{{ i18n.ts.selectWidget }}</template>
+				<option v-for="widget in widgetDefs" :key="widget" :value="widget">{{ i18n.t(`_widgets.${widget}`) }}</option>
+			</MkSelect>
+			<MkButton inline primary class="mk-widget-add" @click="addWidget"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+			<MkButton inline @click="$emit('exit')">{{ i18n.ts.close }}</MkButton>
+		</header>
+		<Sortable
+			:model-value="props.widgets"
+			item-key="id"
+			handle=".handle"
+			:animation="150"
+			@update:model-value="v => emit('updateWidgets', v)"
+		>
+			<template #item="{element}">
+				<div class="customize-container">
+					<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="ti ti-settings"></i></button>
+					<button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="ti ti-x"></i></button>
+					<div class="handle">
+						<component :is="`mkw-${element.name}`" :ref="el => widgetRefs[element.id] = el" class="widget" :widget="element" @update-props="updateWidget(element.id, $event)"/>
+					</div>
+				</div>
+			</template>
+		</Sortable>
+	</template>
+	<component :is="`mkw-${widget.name}`" v-for="widget in widgets" v-else :key="widget.id" :ref="el => widgetRefs[widget.id] = el" class="widget" :widget="widget" @update-props="updateWidget(widget.id, $event)" @contextmenu.stop="onContextmenu(widget, $event)"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, reactive, ref, computed } from 'vue';
+import { v4 as uuid } from 'uuid';
+import MkSelect from '@/components/form/select.vue';
+import MkButton from '@/components/MkButton.vue';
+import { widgets as widgetDefs } from '@/widgets';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { deepClone } from '@/scripts/clone';
+
+const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
+
+type Widget = {
+	name: string;
+	id: string;
+	data: Record<string, any>;
+};
+
+const props = defineProps<{
+	widgets: Widget[];
+	edit: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'updateWidgets', widgets: Widget[]): void;
+	(ev: 'addWidget', widget: Widget): void;
+	(ev: 'removeWidget', widget: Widget): void;
+	(ev: 'updateWidget', widget: Partial<Widget>): void;
+	(ev: 'exit'): void;
+}>();
+
+const widgetRefs = {};
+const configWidget = (id: string) => {
+	widgetRefs[id].configure();
+};
+const widgetAdderSelected = ref(null);
+const addWidget = () => {
+	if (widgetAdderSelected.value == null) return;
+
+	emit('addWidget', {
+		name: widgetAdderSelected.value,
+		id: uuid(),
+		data: {},
+	});
+
+	widgetAdderSelected.value = null;
+};
+const removeWidget = (widget) => {
+	emit('removeWidget', widget);
+};
+const updateWidget = (id, data) => {
+	emit('updateWidget', { id, data });
+};
+
+function onContextmenu(widget: Widget, 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;
+
+	os.contextMenu([{
+		type: 'label',
+		text: i18n.t(`_widgets.${widget.name}`),
+	}, {
+		icon: 'ti ti-settings',
+		text: i18n.ts.settings,
+		action: () => {
+			configWidget(widget.id);
+		},
+	}], ev);
+}
+</script>
+
+<style lang="scss" scoped>
+.vjoppmmu {
+	container-type: inline-size;
+
+	> header {
+		margin: 16px 0;
+
+		> * {
+			width: 100%;
+			padding: 4px;
+		}
+	}
+
+	> .widget, .customize-container {
+		contain: content;
+		margin: var(--margin) 0;
+
+		&:first-of-type {
+			margin-top: 0;
+		}
+	}
+
+	.customize-container {
+		position: relative;
+		cursor: move;
+
+		> .config,
+		> .remove {
+			position: absolute;
+			z-index: 10000;
+			top: 8px;
+			width: 32px;
+			height: 32px;
+			color: #fff;
+			background: rgba(#000, 0.7);
+			border-radius: 4px;
+		}
+
+		> .config {
+			right: 8px + 8px + 32px;
+		}
+
+		> .remove {
+			right: 8px;
+		}
+
+		> .handle {
+			> .widget {
+				pointer-events: none;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkWindow.vue b/packages/frontend/src/components/MkWindow.vue
new file mode 100644
index 0000000000..629c105810
--- /dev/null
+++ b/packages/frontend/src/components/MkWindow.vue
@@ -0,0 +1,571 @@
+<template>
+<transition :name="$store.state.animation ? 'window' : ''" appear @after-leave="$emit('closed')">
+	<div v-if="showing" ref="rootEl" class="ebkgocck" :class="{ maximized }">
+		<div class="body _shadow _narrow_" @mousedown="onBodyMousedown" @keydown="onKeydown">
+			<div class="header" :class="{ mini }" @contextmenu.prevent.stop="onContextmenu">
+				<span class="left">
+					<button v-for="button in buttonsLeft" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
+				</span>
+				<span class="title" @mousedown.prevent="onHeaderMousedown" @touchstart.prevent="onHeaderMousedown">
+					<slot name="header"></slot>
+				</span>
+				<span class="right">
+					<button v-for="button in buttonsRight" v-tooltip="button.title" class="button _button" :class="{ highlighted: button.highlighted }" @click="button.onClick"><i :class="button.icon"></i></button>
+					<button v-if="canResize && maximized" v-tooltip="i18n.ts.windowRestore" class="button _button" @click="unMaximize()"><i class="ti ti-picture-in-picture"></i></button>
+					<button v-else-if="canResize && !maximized" v-tooltip="i18n.ts.windowMaximize" class="button _button" @click="maximize()"><i class="ti ti-rectangle"></i></button>
+					<button v-if="closeButton" v-tooltip="i18n.ts.close" class="button _button" @click="close()"><i class="ti ti-x"></i></button>
+				</span>
+			</div>
+			<div class="body">
+				<slot></slot>
+			</div>
+		</div>
+		<template v-if="canResize">
+			<div class="handle top" @mousedown.prevent="onTopHandleMousedown"></div>
+			<div class="handle right" @mousedown.prevent="onRightHandleMousedown"></div>
+			<div class="handle bottom" @mousedown.prevent="onBottomHandleMousedown"></div>
+			<div class="handle left" @mousedown.prevent="onLeftHandleMousedown"></div>
+			<div class="handle top-left" @mousedown.prevent="onTopLeftHandleMousedown"></div>
+			<div class="handle top-right" @mousedown.prevent="onTopRightHandleMousedown"></div>
+			<div class="handle bottom-right" @mousedown.prevent="onBottomRightHandleMousedown"></div>
+			<div class="handle bottom-left" @mousedown.prevent="onBottomLeftHandleMousedown"></div>
+		</template>
+	</div>
+</transition>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, provide } from 'vue';
+import contains from '@/scripts/contains';
+import * as os from '@/os';
+import { MenuItem } from '@/types/menu';
+import { i18n } from '@/i18n';
+
+const minHeight = 50;
+const minWidth = 250;
+
+function dragListen(fn: (ev: MouseEvent) => void) {
+	window.addEventListener('mousemove', fn);
+	window.addEventListener('touchmove', fn);
+	window.addEventListener('mouseleave', dragClear.bind(null, fn));
+	window.addEventListener('mouseup', dragClear.bind(null, fn));
+	window.addEventListener('touchend', dragClear.bind(null, fn));
+}
+
+function dragClear(fn) {
+	window.removeEventListener('mousemove', fn);
+	window.removeEventListener('touchmove', fn);
+	window.removeEventListener('mouseleave', dragClear);
+	window.removeEventListener('mouseup', dragClear);
+	window.removeEventListener('touchend', dragClear);
+}
+
+const props = withDefaults(defineProps<{
+	initialWidth?: number;
+	initialHeight?: number | null;
+	canResize?: boolean;
+	closeButton?: boolean;
+	mini?: boolean;
+	front?: boolean;
+	contextmenu?: MenuItem[] | null;
+	buttonsLeft?: any[];
+	buttonsRight?: any[];
+}>(), {
+	initialWidth: 400,
+	initialHeight: null,
+	canResize: false,
+	closeButton: true,
+	mini: false,
+	front: false,
+	contextmenu: null,
+	buttonsLeft: () => [],
+	buttonsRight: () => [],
+});
+
+const emit = defineEmits<{
+	(ev: 'closed'): void;
+}>();
+
+provide('inWindow', true);
+
+let rootEl = $ref<HTMLElement | null>();
+let showing = $ref(true);
+let beforeClickedAt = 0;
+let maximized = $ref(false);
+let unMaximizedTop = '';
+let unMaximizedLeft = '';
+let unMaximizedWidth = '';
+let unMaximizedHeight = '';
+
+function close() {
+	showing = false;
+}
+
+function onKeydown(evt) {
+	if (evt.which === 27) { // Esc
+		evt.preventDefault();
+		evt.stopPropagation();
+		close();
+	}
+}
+
+function onContextmenu(ev: MouseEvent) {
+	if (props.contextmenu) {
+		os.contextMenu(props.contextmenu, ev);
+	}
+}
+
+// 最前面へ移動
+function top() {
+	if (rootEl) {
+		rootEl.style.zIndex = os.claimZIndex(props.front ? 'middle' : 'low');
+	}
+}
+
+function maximize() {
+	maximized = true;
+	unMaximizedTop = rootEl.style.top;
+	unMaximizedLeft = rootEl.style.left;
+	unMaximizedWidth = rootEl.style.width;
+	unMaximizedHeight = rootEl.style.height;
+	rootEl.style.top = '0';
+	rootEl.style.left = '0';
+	rootEl.style.width = '100%';
+	rootEl.style.height = '100%';
+}
+
+function unMaximize() {
+	maximized = false;
+	rootEl.style.top = unMaximizedTop;
+	rootEl.style.left = unMaximizedLeft;
+	rootEl.style.width = unMaximizedWidth;
+	rootEl.style.height = unMaximizedHeight;
+}
+
+function onBodyMousedown() {
+	top();
+}
+
+function onDblClick() {
+	maximize();
+}
+
+function onHeaderMousedown(evt: MouseEvent) {
+	// 右クリックはコンテキストメニューを開こうとした可能性が高いため無視
+	if (evt.button === 2) return;
+
+	let beforeMaximized = false;
+
+	if (maximized) {
+		beforeMaximized = true;
+		unMaximize();
+	}
+
+	// ダブルクリック判定
+	if (Date.now() - beforeClickedAt < 300) {
+		beforeClickedAt = Date.now();
+		onDblClick();
+		return;
+	}
+
+	beforeClickedAt = Date.now();
+
+	const main = rootEl;
+	if (main == null) return;
+
+	if (!contains(main, document.activeElement)) main.focus();
+
+	const position = main.getBoundingClientRect();
+
+	const clickX = evt.touches && evt.touches.length > 0 ? evt.touches[0].clientX : evt.clientX;
+	const clickY = evt.touches && evt.touches.length > 0 ? evt.touches[0].clientY : evt.clientY;
+	const moveBaseX = beforeMaximized ? parseInt(unMaximizedWidth, 10) / 2 : clickX - position.left; // TODO: parseIntやめる
+	const moveBaseY = beforeMaximized ? 20 : clickY - position.top;
+	const browserWidth = window.innerWidth;
+	const browserHeight = window.innerHeight;
+	const windowWidth = main.offsetWidth;
+	const windowHeight = main.offsetHeight;
+
+	function move(x: number, y: number) {
+		let moveLeft = x - moveBaseX;
+		let moveTop = y - moveBaseY;
+
+		// 下はみ出し
+		if (moveTop + windowHeight > browserHeight) moveTop = browserHeight - windowHeight;
+
+		// 左はみ出し
+		if (moveLeft < 0) moveLeft = 0;
+
+		// 上はみ出し
+		if (moveTop < 0) moveTop = 0;
+
+		// 右はみ出し
+		if (moveLeft + windowWidth > browserWidth) moveLeft = browserWidth - windowWidth;
+
+		rootEl.style.left = moveLeft + 'px';
+		rootEl.style.top = moveTop + 'px';
+	}
+
+	if (beforeMaximized) {
+		move(clickX, clickY);
+	}
+
+	// 動かした時
+	dragListen(me => {
+		const x = me.touches && me.touches.length > 0 ? me.touches[0].clientX : me.clientX;
+		const y = me.touches && me.touches.length > 0 ? me.touches[0].clientY : me.clientY;
+
+		move(x, y);
+	});
+}
+
+// 上ハンドル掴み時
+function onTopHandleMousedown(evt) {
+	const main = rootEl;
+	// どういうわけかnullになることがある
+	if (main == null) return;
+
+	const base = evt.clientY;
+	const height = parseInt(getComputedStyle(main, '').height, 10);
+	const top = parseInt(getComputedStyle(main, '').top, 10);
+
+	// 動かした時
+	dragListen(me => {
+		const move = me.clientY - base;
+		if (top + move > 0) {
+			if (height + -move > minHeight) {
+				applyTransformHeight(height + -move);
+				applyTransformTop(top + move);
+			} else { // 最小の高さより小さくなろうとした時
+				applyTransformHeight(minHeight);
+				applyTransformTop(top + (height - minHeight));
+			}
+		} else { // 上のはみ出し時
+			applyTransformHeight(top + height);
+			applyTransformTop(0);
+		}
+	});
+}
+
+// 右ハンドル掴み時
+function onRightHandleMousedown(evt) {
+	const main = rootEl;
+	if (main == null) return;
+
+	const base = evt.clientX;
+	const width = parseInt(getComputedStyle(main, '').width, 10);
+	const left = parseInt(getComputedStyle(main, '').left, 10);
+	const browserWidth = window.innerWidth;
+
+	// 動かした時
+	dragListen(me => {
+		const move = me.clientX - base;
+		if (left + width + move < browserWidth) {
+			if (width + move > minWidth) {
+				applyTransformWidth(width + move);
+			} else { // 最小の幅より小さくなろうとした時
+				applyTransformWidth(minWidth);
+			}
+		} else { // 右のはみ出し時
+			applyTransformWidth(browserWidth - left);
+		}
+	});
+}
+
+// 下ハンドル掴み時
+function onBottomHandleMousedown(evt) {
+	const main = rootEl;
+	if (main == null) return;
+
+	const base = evt.clientY;
+	const height = parseInt(getComputedStyle(main, '').height, 10);
+	const top = parseInt(getComputedStyle(main, '').top, 10);
+	const browserHeight = window.innerHeight;
+
+	// 動かした時
+	dragListen(me => {
+		const move = me.clientY - base;
+		if (top + height + move < browserHeight) {
+			if (height + move > minHeight) {
+				applyTransformHeight(height + move);
+			} else { // 最小の高さより小さくなろうとした時
+				applyTransformHeight(minHeight);
+			}
+		} else { // 下のはみ出し時
+			applyTransformHeight(browserHeight - top);
+		}
+	});
+}
+
+// 左ハンドル掴み時
+function onLeftHandleMousedown(evt) {
+	const main = rootEl;
+	if (main == null) return;
+
+	const base = evt.clientX;
+	const width = parseInt(getComputedStyle(main, '').width, 10);
+	const left = parseInt(getComputedStyle(main, '').left, 10);
+
+	// 動かした時
+	dragListen(me => {
+		const move = me.clientX - base;
+		if (left + move > 0) {
+			if (width + -move > minWidth) {
+				applyTransformWidth(width + -move);
+				applyTransformLeft(left + move);
+			} else { // 最小の幅より小さくなろうとした時
+				applyTransformWidth(minWidth);
+				applyTransformLeft(left + (width - minWidth));
+			}
+		} else { // 左のはみ出し時
+			applyTransformWidth(left + width);
+			applyTransformLeft(0);
+		}
+	});
+}
+
+// 左上ハンドル掴み時
+function onTopLeftHandleMousedown(evt) {
+	onTopHandleMousedown(evt);
+	onLeftHandleMousedown(evt);
+}
+
+// 右上ハンドル掴み時
+function onTopRightHandleMousedown(evt) {
+	onTopHandleMousedown(evt);
+	onRightHandleMousedown(evt);
+}
+
+// 右下ハンドル掴み時
+function onBottomRightHandleMousedown(evt) {
+	onBottomHandleMousedown(evt);
+	onRightHandleMousedown(evt);
+}
+
+// 左下ハンドル掴み時
+function onBottomLeftHandleMousedown(evt) {
+	onBottomHandleMousedown(evt);
+	onLeftHandleMousedown(evt);
+}
+
+// 高さを適用
+function applyTransformHeight(height) {
+	if (height > window.innerHeight) height = window.innerHeight;
+	rootEl.style.height = height + 'px';
+}
+
+// 幅を適用
+function applyTransformWidth(width) {
+	if (width > window.innerWidth) width = window.innerWidth;
+	rootEl.style.width = width + 'px';
+}
+
+// Y座標を適用
+function applyTransformTop(top) {
+	rootEl.style.top = top + 'px';
+}
+
+// X座標を適用
+function applyTransformLeft(left) {
+	rootEl.style.left = left + 'px';
+}
+
+function onBrowserResize() {
+	const main = rootEl;
+	if (main == null) return;
+
+	const position = main.getBoundingClientRect();
+	const browserWidth = window.innerWidth;
+	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'; // 上はみ出し
+}
+
+onMounted(() => {
+	if (props.initialWidth) applyTransformWidth(props.initialWidth);
+	if (props.initialHeight) applyTransformHeight(props.initialHeight);
+
+	applyTransformTop((window.innerHeight / 2) - (rootEl.offsetHeight / 2));
+	applyTransformLeft((window.innerWidth / 2) - (rootEl.offsetWidth / 2));
+
+	// 他のウィンドウ内のボタンなどを押してこのウィンドウが開かれた場合、親が最前面になろうとするのでそれに隠されないようにする
+	top();
+
+	window.addEventListener('resize', onBrowserResize);
+});
+
+onBeforeUnmount(() => {
+	window.removeEventListener('resize', onBrowserResize);
+});
+
+defineExpose({
+	close,
+});
+</script>
+
+<style lang="scss" scoped>
+.window-enter-active, .window-leave-active {
+	transition: opacity 0.2s, transform 0.2s !important;
+}
+.window-enter-from, .window-leave-to {
+	pointer-events: none;
+	opacity: 0;
+	transform: scale(0.9);
+}
+
+.ebkgocck {
+	position: fixed;
+	top: 0;
+	left: 0;
+
+	> .body {
+		overflow: clip;
+		display: flex;
+		flex-direction: column;
+		contain: content;
+		width: 100%;
+		height: 100%;
+		border-radius: var(--radius);
+
+		> .header {
+			--height: 39px;
+
+			&.mini {
+				--height: 32px;
+			}
+
+			display: flex;
+			position: relative;
+			z-index: 1;
+			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%;
+			font-weight: bold;
+
+			> .left, > .right {
+				> .button {
+					height: var(--height);
+					width: var(--height);
+
+					&:hover {
+						color: var(--fgHighlighted);
+					}
+
+					&.highlighted {
+						color: var(--accent);
+					}
+				}
+			}
+
+			> .left {
+				margin-right: 16px;
+			}
+
+			> .right {
+				min-width: 16px;
+			}
+
+			> .title {
+				flex: 1;
+				position: relative;
+				line-height: var(--height);
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				cursor: move;
+			}
+		}
+
+		> .body {
+			flex: 1;
+			overflow: auto;
+			background: var(--panel);
+		}
+	}
+
+	> .handle {
+		$size: 8px;
+
+		position: absolute;
+
+		&.top {
+			top: -($size);
+			left: 0;
+			width: 100%;
+			height: $size;
+			cursor: ns-resize;
+		}
+
+		&.right {
+			top: 0;
+			right: -($size);
+			width: $size;
+			height: 100%;
+			cursor: ew-resize;
+		}
+
+		&.bottom {
+			bottom: -($size);
+			left: 0;
+			width: 100%;
+			height: $size;
+			cursor: ns-resize;
+		}
+
+		&.left {
+			top: 0;
+			left: -($size);
+			width: $size;
+			height: 100%;
+			cursor: ew-resize;
+		}
+
+		&.top-left {
+			top: -($size);
+			left: -($size);
+			width: $size * 2;
+			height: $size * 2;
+			cursor: nwse-resize;
+		}
+
+		&.top-right {
+			top: -($size);
+			right: -($size);
+			width: $size * 2;
+			height: $size * 2;
+			cursor: nesw-resize;
+		}
+
+		&.bottom-right {
+			bottom: -($size);
+			right: -($size);
+			width: $size * 2;
+			height: $size * 2;
+			cursor: nwse-resize;
+		}
+
+		&.bottom-left {
+			bottom: -($size);
+			left: -($size);
+			width: $size * 2;
+			height: $size * 2;
+			cursor: nesw-resize;
+		}
+	}
+
+	&.maximized {
+		> .body {
+			border-radius: 0;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkYoutubePlayer.vue b/packages/frontend/src/components/MkYoutubePlayer.vue
new file mode 100644
index 0000000000..8cd481a39c
--- /dev/null
+++ b/packages/frontend/src/components/MkYoutubePlayer.vue
@@ -0,0 +1,72 @@
+<template>
+<XWindow :initial-width="640" :initial-height="402" :can-resize="true" :close-button="true">
+	<template #header>
+		<i class="icon ti ti-brand-youtube" style="margin-right: 0.5em;"></i>
+		<span>{{ title ?? 'YouTube' }}</span>
+	</template>
+
+	<div class="poamfof">
+		<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+			<div v-if="player.url" class="player">
+				<iframe v-if="!fetching" :src="player.url + (player.url.match(/\?/) ? '&autoplay=1&auto_play=1' : '?autoplay=1&auto_play=1')" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen/>
+			</div>
+		</transition>
+		<MkLoading v-if="fetching"/>
+		<MkError v-else-if="!player.url" @retry="ytFetch()"/>
+	</div>
+</XWindow>
+</template>
+
+<script lang="ts" setup>
+import XWindow from '@/components/MkWindow.vue';
+import { lang } from '@/config';
+
+const props = defineProps<{
+	url: string;
+}>();
+
+const requestUrl = new URL(props.url);
+
+let fetching = $ref(true);
+let title = $ref<string | null>(null);
+let player = $ref({
+	url: null,
+	width: null,
+	height: null,
+});
+
+const requestLang = (lang ?? 'ja-JP').replace('ja-KS', 'ja-JP');
+
+const ytFetch = (): void => {
+	fetching = true;
+	window.fetch(`/url?url=${encodeURIComponent(requestUrl.href)}&lang=${requestLang}`).then(res => {
+		res.json().then(info => {
+			if (info.url == null) return;
+			title = info.title;
+			fetching = false;
+			player = info.player;
+		});
+	});
+};
+
+ytFetch();
+
+</script>
+
+<style lang="scss">
+.poamfof {
+	position: relative;
+	overflow: hidden;
+	height: 100%;
+
+	.player {
+		position: absolute;
+		inset: 0;
+
+		iframe {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/form/checkbox.vue b/packages/frontend/src/components/form/checkbox.vue
new file mode 100644
index 0000000000..ba3b2dc146
--- /dev/null
+++ b/packages/frontend/src/components/form/checkbox.vue
@@ -0,0 +1,144 @@
+<template>
+<div
+	class="ziffeoms"
+	:class="{ disabled, checked }"
+>
+	<input
+		ref="input"
+		type="checkbox"
+		:disabled="disabled"
+		@keydown.enter="toggle"
+	>
+	<span ref="button" v-adaptive-border v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
+		<i class="check ti ti-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/MkRipple.vue';
+import { i18n } from '@/i18n';
+
+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/frontend/src/components/form/folder.vue b/packages/frontend/src/components/form/folder.vue
new file mode 100644
index 0000000000..1256dfcbb4
--- /dev/null
+++ b/packages/frontend/src/components/form/folder.vue
@@ -0,0 +1,107 @@
+<template>
+<div class="dwzlatin" :class="{ opened }">
+	<div class="header _button" @click="toggle">
+		<span class="icon"><slot name="icon"></slot></span>
+		<span class="text"><slot name="label"></slot></span>
+		<span class="right">
+			<span class="text"><slot name="suffix"></slot></span>
+			<i v-if="opened" class="ti ti-chevron-up icon"></i>
+			<i v-else class="ti ti-chevron-down icon"></i>
+		</span>
+	</div>
+	<KeepAlive>
+		<div v-if="openedAtLeastOnce" v-show="opened" class="body">
+			<MkSpacer :margin-min="14" :margin-max="22">
+				<slot></slot>
+			</MkSpacer>
+		</div>
+	</KeepAlive>
+</div>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+	defaultOpen: boolean;
+}>(), {
+	defaultOpen: false,
+});
+
+let opened = $ref(props.defaultOpen);
+let openedAtLeastOnce = $ref(props.defaultOpen);
+
+const toggle = () => {
+	opened = !opened;
+	if (opened) {
+		openedAtLeastOnce = true;
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.dwzlatin {
+	display: block;
+
+	> .header {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 10px 14px 10px 14px;
+		background: var(--buttonBg);
+		border-radius: 6px;
+
+		&:hover {
+			text-decoration: none;
+			background: var(--buttonHoverBg);
+		}
+
+		&.active {
+			color: var(--accent);
+			background: var(--buttonHoverBg);
+		}
+
+		> .icon {
+			margin-right: 0.75em;
+			flex-shrink: 0;
+			text-align: center;
+			opacity: 0.8;
+
+			&:empty {
+				display: none;
+
+				& + .text {
+					padding-left: 4px;
+				}
+			}
+		}
+
+		> .text {
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			padding-right: 12px;
+		}
+
+		> .right {
+			margin-left: auto;
+			opacity: 0.7;
+			white-space: nowrap;
+
+			> .text:not(:empty) {
+				margin-right: 0.75em;
+			}
+		}
+	}
+
+	> .body {
+		background: var(--panel);
+		border-radius: 0 0 6px 6px;
+	}
+
+	&.opened {
+		> .header {
+			border-radius: 6px 6px 0 0;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/form/input.vue b/packages/frontend/src/components/form/input.vue
new file mode 100644
index 0000000000..939e9691a6
--- /dev/null
+++ b/packages/frontend/src/components/form/input.vue
@@ -0,0 +1,263 @@
+<template>
+<div class="matxzzsk">
+	<div class="label" @click="focus"><slot name="label"></slot></div>
+	<div class="input" :class="{ inline, disabled, focused }">
+		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
+		<input
+			ref="inputEl"
+			v-model="v"
+			v-adaptive-border
+			:type="type"
+			:disabled="disabled"
+			:required="required"
+			:readonly="readonly"
+			:placeholder="placeholder"
+			:pattern="pattern"
+			:autocomplete="autocomplete"
+			:spellcheck="spellcheck"
+			:step="step"
+			:list="id"
+			@focus="focused = true"
+			@blur="focused = false"
+			@keydown="onKeydown($event)"
+			@input="onInput"
+		>
+		<datalist v-if="datalist" :id="id">
+			<option v-for="data in datalist" :value="data"/>
+		</datalist>
+		<div ref="suffixEl" class="suffix"><slot name="suffix"></slot></div>
+	</div>
+	<div class="caption"><slot name="caption"></slot></div>
+
+	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
+import { debounce } from 'throttle-debounce';
+import MkButton from '@/components/MkButton.vue';
+import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	modelValue: string | number;
+	type?: 'text' | 'number' | 'password' | 'email' | 'url' | 'date' | 'time' | 'search';
+	required?: boolean;
+	readonly?: boolean;
+	disabled?: boolean;
+	pattern?: string;
+	placeholder?: string;
+	autofocus?: boolean;
+	autocomplete?: boolean;
+	spellcheck?: boolean;
+	step?: any;
+	datalist?: string[];
+	inline?: boolean;
+	debounce?: boolean;
+	manualSave?: boolean;
+	small?: boolean;
+	large?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'change', _ev: KeyboardEvent): void;
+	(ev: 'keydown', _ev: KeyboardEvent): void;
+	(ev: 'enter'): void;
+	(ev: 'update:modelValue', value: string | number): void;
+}>();
+
+const { modelValue, type, autofocus } = toRefs(props);
+const v = ref(modelValue.value);
+const id = Math.random().toString(); // TODO: uuid?
+const focused = ref(false);
+const changed = ref(false);
+const invalid = ref(false);
+const filled = computed(() => v.value !== '' && v.value != null);
+const inputEl = ref<HTMLElement>();
+const prefixEl = ref<HTMLElement>();
+const suffixEl = ref<HTMLElement>();
+const height =
+	props.small ? 36 :
+	props.large ? 40 :
+	38;
+
+const focus = () => inputEl.value.focus();
+const onInput = (ev: KeyboardEvent) => {
+	changed.value = true;
+	emit('change', ev);
+};
+const onKeydown = (ev: KeyboardEvent) => {
+	emit('keydown', ev);
+
+	if (ev.code === 'Enter') {
+		emit('enter');
+	}
+};
+
+const updated = () => {
+	changed.value = false;
+	if (type.value === 'number') {
+		emit('update:modelValue', parseFloat(v.value));
+	} else {
+		emit('update:modelValue', v.value);
+	}
+};
+
+const debouncedUpdated = debounce(1000, updated);
+
+watch(modelValue, newValue => {
+	v.value = newValue;
+});
+
+watch(v, newValue => {
+	if (!props.manualSave) {
+		if (props.debounce) {
+			debouncedUpdated();
+		} else {
+			updated();
+		}
+	}
+
+	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();
+		}
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+.matxzzsk {
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 8px 0;
+		user-select: none;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .caption {
+		font-size: 0.85em;
+		padding: 8px 0 0 0;
+		color: var(--fgTransparentWeak);
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .input {
+		position: relative;
+
+		> input {
+			appearance: none;
+			-webkit-appearance: none;
+			display: block;
+			height: v-bind("height + 'px'");
+			width: 100%;
+			margin: 0;
+			padding: 0 12px;
+			font: inherit;
+			font-weight: normal;
+			font-size: 1em;
+			color: var(--fg);
+			background: var(--panel);
+			border: solid 1px var(--panel);
+			border-radius: 6px;
+			outline: none;
+			box-shadow: none;
+			box-sizing: border-box;
+			transition: border-color 0.1s ease-out;
+
+			&:hover {
+				border-color: var(--inputBorderHover) !important;
+			}
+		}
+
+		> .prefix,
+		> .suffix {
+			display: flex;
+			align-items: center;
+			position: absolute;
+			z-index: 1;
+			top: 0;
+			padding: 0 12px;
+			font-size: 1em;
+			height: v-bind("height + 'px'");
+			pointer-events: none;
+
+			&:empty {
+				display: none;
+			}
+
+			> * {
+				display: inline-block;
+				min-width: 16px;
+				max-width: 150px;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+		}
+
+		> .prefix {
+			left: 0;
+			padding-right: 6px;
+		}
+
+		> .suffix {
+			right: 0;
+			padding-left: 6px;
+		}
+
+		&.inline {
+			display: inline-block;
+			margin: 0;
+		}
+
+		&.focused {
+			> input {
+				border-color: var(--accent) !important;
+				//box-shadow: 0 0 0 4px var(--focus);
+			}
+		}
+
+		&.disabled {
+			opacity: 0.7;
+
+			&, * {
+				cursor: not-allowed !important;
+			}
+		}
+	}
+
+	> .save {
+		margin: 8px 0 0 0;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/form/link.vue b/packages/frontend/src/components/form/link.vue
new file mode 100644
index 0000000000..a1775c0bdb
--- /dev/null
+++ b/packages/frontend/src/components/form/link.vue
@@ -0,0 +1,95 @@
+<template>
+<div class="ffcbddfc" :class="{ inline }">
+	<a v-if="external" class="main _button" :href="to" target="_blank">
+		<span class="icon"><slot name="icon"></slot></span>
+		<span class="text"><slot></slot></span>
+		<span class="right">
+			<span class="text"><slot name="suffix"></slot></span>
+			<i class="ti ti-external-link icon"></i>
+		</span>
+	</a>
+	<MkA v-else class="main _button" :class="{ active }" :to="to" :behavior="behavior">
+		<span class="icon"><slot name="icon"></slot></span>
+		<span class="text"><slot></slot></span>
+		<span class="right">
+			<span class="text"><slot name="suffix"></slot></span>
+			<i class="ti ti-chevron-right icon"></i>
+		</span>
+	</MkA>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+
+const props = defineProps<{
+	to: string;
+	active?: boolean;
+	external?: boolean;
+	behavior?: null | 'window' | 'browser' | 'modalWindow';
+	inline?: boolean;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.ffcbddfc {
+	display: block;
+
+	&.inline {
+		display: inline-block;
+	}
+
+	> .main {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 10px 14px;
+		background: var(--buttonBg);
+		border-radius: 6px;
+		font-size: 0.9em;
+
+		&:hover {
+			text-decoration: none;
+			background: var(--buttonHoverBg);
+		}
+
+		&.active {
+			color: var(--accent);
+			background: var(--buttonHoverBg);
+		}
+
+		> .icon {
+			margin-right: 0.75em;
+			flex-shrink: 0;
+			text-align: center;
+			color: var(--fgTransparentWeak);
+
+			&:empty {
+				display: none;
+
+				& + .text {
+					padding-left: 4px;
+				}
+			}
+		}
+
+		> .text {
+			flex-shrink: 1;
+			white-space: normal;
+			padding-right: 12px;
+			text-align: center;
+		}
+
+		> .right {
+			margin-left: auto;
+			opacity: 0.7;
+			white-space: nowrap;
+
+			> .text:not(:empty) {
+				margin-right: 0.75em;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/form/radio.vue b/packages/frontend/src/components/form/radio.vue
new file mode 100644
index 0000000000..fcf454c77a
--- /dev/null
+++ b/packages/frontend/src/components/form/radio.vue
@@ -0,0 +1,132 @@
+<template>
+<div
+	v-adaptive-border
+	class="novjtctn"
+	:class="{ disabled, checked }"
+	:aria-checked="checked"
+	:aria-disabled="disabled"
+	@click="toggle"
+>
+	<input
+		type="radio"
+		:disabled="disabled"
+	>
+	<span class="button">
+		<span></span>
+	</span>
+	<span class="label"><slot></slot></span>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+
+const props = defineProps<{
+	modelValue: any;
+	value: any;
+	disabled: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', value: any): void;
+}>();
+
+let checked = $computed(() => props.modelValue === props.value);
+
+function toggle(): void {
+	if (props.disabled) return;
+	emit('update:modelValue', props.value);
+}
+</script>
+
+<style lang="scss" scoped>
+.novjtctn {
+	position: relative;
+	display: inline-block;
+	text-align: left;
+	cursor: pointer;
+	padding: 7px 10px;
+	min-width: 60px;
+	background-color: var(--panel);
+	background-clip: padding-box !important;
+	border: solid 1px var(--panel);
+	border-radius: 6px;
+	font-size: 90%;
+	transition: all 0.2s;
+
+	> * {
+		user-select: none;
+	}
+
+	&.disabled {
+		opacity: 0.6;
+
+		&, * {
+			cursor: not-allowed !important;
+		}
+	}
+
+	&:hover {
+		border-color: var(--inputBorderHover) !important;
+	}
+
+	&.checked {
+		background-color: var(--accentedBg) !important;
+		border-color: var(--accentedBg) !important;
+		color: var(--accent);
+
+		&, * {
+			cursor: default !important;
+		}
+
+		> .button {
+			border-color: var(--accent);
+
+			&:after {
+				background-color: var(--accent);
+				transform: scale(1);
+				opacity: 1;
+			}
+		}
+	}
+
+	> input {
+		position: absolute;
+		width: 0;
+		height: 0;
+		opacity: 0;
+		margin: 0;
+	}
+
+	> .button {
+		position: absolute;
+		width: 14px;
+		height: 14px;
+		background: none;
+		border: solid 2px var(--inputBorder);
+		border-radius: 100%;
+		transition: inherit;
+
+		&:after {
+			content: '';
+			display: block;
+			position: absolute;
+			top: 3px;
+			right: 3px;
+			bottom: 3px;
+			left: 3px;
+			border-radius: 100%;
+			opacity: 0;
+			transform: scale(0);
+			transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+		}
+	}
+
+	> .label {
+		margin-left: 28px;
+		display: block;
+		line-height: 20px;
+		cursor: pointer;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/form/radios.vue b/packages/frontend/src/components/form/radios.vue
new file mode 100644
index 0000000000..bde4a8fb00
--- /dev/null
+++ b/packages/frontend/src/components/form/radios.vue
@@ -0,0 +1,83 @@
+<script lang="ts">
+import { defineComponent, h } from 'vue';
+import MkRadio from './radio.vue';
+
+export default defineComponent({
+	components: {
+		MkRadio,
+	},
+	props: {
+		modelValue: {
+			required: false,
+		},
+	},
+	data() {
+		return {
+			value: this.modelValue,
+		};
+	},
+	watch: {
+		value() {
+			this.$emit('update:modelValue', this.value);
+		},
+	},
+	render() {
+		let options = this.$slots.default();
+		const label = this.$slots.label && this.$slots.label();
+		const caption = this.$slots.caption && this.$slots.caption();
+
+		// なぜかFragmentになることがあるため
+		if (options.length === 1 && options[0].props == null) options = options[0].children;
+
+		return h('div', {
+			class: 'novjtcto',
+		}, [
+			...(label ? [h('div', {
+				class: 'label',
+			}, [label])] : []),
+			h('div', {
+				class: 'body',
+			}, options.map(option => h(MkRadio, {
+				key: option.key,
+				value: option.props.value,
+				modelValue: this.value,
+				'onUpdate:modelValue': value => this.value = value,
+			}, option.children)),
+			),
+			...(caption ? [h('div', {
+				class: 'caption',
+			}, [caption])] : []),
+		]);
+	},
+});
+</script>
+
+<style lang="scss">
+.novjtcto {
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 8px 0;
+		user-select: none;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .body {
+		display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+	}
+
+	> .caption {
+		font-size: 0.85em;
+		padding: 8px 0 0 0;
+		color: var(--fgTransparentWeak);
+
+		&:empty {
+			display: none;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/form/range.vue b/packages/frontend/src/components/form/range.vue
new file mode 100644
index 0000000000..db21c35717
--- /dev/null
+++ b/packages/frontend/src/components/form/range.vue
@@ -0,0 +1,259 @@
+<template>
+<div class="timctyfi" :class="{ disabled, easing }">
+	<div class="label"><slot name="label"></slot></div>
+	<div v-adaptive-border class="body">
+		<div ref="containerEl" class="container">
+			<div class="track">
+				<div class="highlight" :style="{ width: (steppedRawValue * 100) + '%' }"></div>
+			</div>
+			<div v-if="steps && showTicks" class="ticks">
+				<div v-for="i in (steps + 1)" class="tick" :style="{ left: (((i - 1) / steps) * 100) + '%' }"></div>
+			</div>
+			<div ref="thumbEl" v-tooltip="textConverter(finalValue)" class="thumb" :style="{ left: thumbPosition + 'px' }" @mousedown="onMousedown" @touchstart="onMousedown"></div>
+		</div>
+	</div>
+	<div class="caption"><slot name="caption"></slot></div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+import * as os from '@/os';
+
+const props = withDefaults(defineProps<{
+	modelValue: number;
+	disabled?: boolean;
+	min: number;
+	max: number;
+	step?: number;
+	textConverter?: (value: number) => string,
+	showTicks?: boolean;
+	easing?: boolean;
+}>(), {
+	step: 1,
+	textConverter: (v) => v.toString(),
+	easing: false,
+});
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', value: number): void;
+}>();
+
+const containerEl = ref<HTMLElement>();
+const thumbEl = ref<HTMLElement>();
+
+const rawValue = ref((props.modelValue - props.min) / (props.max - props.min));
+const steppedRawValue = computed(() => {
+	if (props.step) {
+		const step = props.step / (props.max - props.min);
+		return (step * Math.round(rawValue.value / step));
+	} else {
+		return rawValue.value;
+	}
+});
+const finalValue = computed(() => {
+	if (Number.isInteger(props.step)) {
+		return Math.round((steppedRawValue.value * (props.max - props.min)) + props.min);
+	} else {
+		return (steppedRawValue.value * (props.max - props.min)) + props.min;
+	}
+});
+
+const thumbWidth = computed(() => {
+	if (thumbEl.value == null) return 0;
+	return thumbEl.value!.offsetWidth;
+});
+const thumbPosition = ref(0);
+const calcThumbPosition = () => {
+	if (containerEl.value == null) {
+		thumbPosition.value = 0;
+	} else {
+		thumbPosition.value = (containerEl.value.offsetWidth - thumbWidth.value) * steppedRawValue.value;
+	}
+};
+watch([steppedRawValue, containerEl], calcThumbPosition);
+
+let ro: ResizeObserver | undefined;
+
+onMounted(() => {
+	ro = new ResizeObserver((entries, observer) => {
+		calcThumbPosition();
+	});
+	ro.observe(containerEl.value);
+});
+
+onUnmounted(() => {
+	if (ro) ro.disconnect();
+});
+
+const steps = computed(() => {
+	if (props.step) {
+		return (props.max - props.min) / props.step;
+	} else {
+		return 0;
+	}
+});
+
+const onMousedown = (ev: MouseEvent | TouchEvent) => {
+	ev.preventDefault();
+
+	const tooltipShowing = ref(true);
+	os.popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
+		showing: tooltipShowing,
+		text: computed(() => {
+			return props.textConverter(finalValue.value);
+		}),
+		targetElement: thumbEl,
+	}, {}, 'closed');
+
+	const style = document.createElement('style');
+	style.appendChild(document.createTextNode('* { cursor: grabbing !important; } body * { pointer-events: none !important; }'));
+	document.head.appendChild(style);
+
+	const onDrag = (ev: MouseEvent | TouchEvent) => {
+		ev.preventDefault();
+		const containerRect = containerEl.value!.getBoundingClientRect();
+		const pointerX = ev.touches && ev.touches.length > 0 ? ev.touches[0].clientX : ev.clientX;
+		const pointerPositionOnContainer = pointerX - (containerRect.left + (thumbWidth.value / 2));
+		rawValue.value = Math.min(1, Math.max(0, pointerPositionOnContainer / (containerEl.value!.offsetWidth - thumbWidth.value)));
+	};
+
+	let beforeValue = finalValue.value;
+
+	const onMouseup = () => {
+		document.head.removeChild(style);
+		tooltipShowing.value = false;
+		window.removeEventListener('mousemove', onDrag);
+		window.removeEventListener('touchmove', onDrag);
+		window.removeEventListener('mouseup', onMouseup);
+		window.removeEventListener('touchend', onMouseup);
+
+		// 値が変わってたら通知
+		if (beforeValue !== finalValue.value) {
+			emit('update:modelValue', finalValue.value);
+		}
+	};
+
+	window.addEventListener('mousemove', onDrag);
+	window.addEventListener('touchmove', onDrag);
+	window.addEventListener('mouseup', onMouseup, { once: true });
+	window.addEventListener('touchend', onMouseup, { once: true });
+};
+</script>
+
+<style lang="scss" scoped>
+@use "sass:math";
+
+.timctyfi {
+	position: relative;
+
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 8px 0;
+		user-select: none;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .caption {
+		font-size: 0.85em;
+		padding: 8px 0 0 0;
+		color: var(--fgTransparentWeak);
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	$thumbHeight: 20px;
+	$thumbWidth: 20px;
+
+	> .body {
+		padding: 10px 12px;
+		background: var(--panel);
+		border: solid 1px var(--panel);
+		border-radius: 6px;
+
+		> .container {
+			position: relative;
+			height: $thumbHeight;
+
+			> .track {
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				margin: auto;
+				width: calc(100% - #{$thumbWidth});
+				height: 3px;
+				background: rgba(0, 0, 0, 0.1);
+				border-radius: 999px;
+				overflow: clip;
+
+				> .highlight {
+					position: absolute;
+					top: 0;
+					left: 0;
+					height: 100%;
+					background: var(--accent);
+					opacity: 0.5;
+				}
+			}
+
+			> .ticks {
+				$tickWidth: 3px;
+
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				margin: auto;
+				width: calc(100% - #{$thumbWidth});
+
+				> .tick {
+					position: absolute;
+					bottom: 0;
+					width: $tickWidth;
+					height: 3px;
+					margin-left: - math.div($tickWidth, 2);
+					background: var(--divider);
+					border-radius: 999px;
+				}
+			}
+
+			> .thumb {
+				position: absolute;
+				width: $thumbWidth;
+				height: $thumbHeight;
+				cursor: grab;
+				background: var(--accent);
+				border-radius: 999px;
+
+				&:hover {
+					background: var(--accentLighten);
+				}
+			}
+		}
+	}
+
+	&.easing {
+		> .body {
+			> .container {
+				> .track {
+					> .highlight {
+						transition: width 0.2s cubic-bezier(0,0,0,1);
+					}
+				}
+
+				> .thumb {
+					transition: left 0.2s cubic-bezier(0,0,0,1);
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/form/section.vue b/packages/frontend/src/components/form/section.vue
new file mode 100644
index 0000000000..c6e34ef1cc
--- /dev/null
+++ b/packages/frontend/src/components/form/section.vue
@@ -0,0 +1,43 @@
+<template>
+<div class="vrtktovh _formBlock">
+	<div class="label"><slot name="label"></slot></div>
+	<div class="main _formRoot">
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style lang="scss" scoped>
+.vrtktovh {
+	border-top: solid 0.5px var(--divider);
+	border-bottom: solid 0.5px var(--divider);
+
+	& + .vrtktovh {
+		border-top: none;
+	}
+
+	&:first-child {
+		border-top: none;
+	}
+
+	&:last-child {
+		border-bottom: none;
+	}
+
+	> .label {
+		font-weight: bold;
+		margin: 1.5em 0 16px 0;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .main {
+		margin: 1.5em 0;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/form/select.vue b/packages/frontend/src/components/form/select.vue
new file mode 100644
index 0000000000..eaf4b131cd
--- /dev/null
+++ b/packages/frontend/src/components/form/select.vue
@@ -0,0 +1,279 @@
+<template>
+<div class="vblkjoeq">
+	<div class="label" @click="focus"><slot name="label"></slot></div>
+	<div ref="container" class="input" :class="{ inline, disabled, focused }" @click.prevent="onClick">
+		<div ref="prefixEl" class="prefix"><slot name="prefix"></slot></div>
+		<select
+			ref="inputEl"
+			v-model="v"
+			v-adaptive-border
+			class="select"
+			:disabled="disabled"
+			:required="required"
+			:readonly="readonly"
+			:placeholder="placeholder"
+			@focus="focused = true"
+			@blur="focused = false"
+			@input="onInput"
+		>
+			<slot></slot>
+		</select>
+		<div ref="suffixEl" class="suffix"><i class="ti ti-chevron-down"></i></div>
+	</div>
+	<div class="caption"><slot name="caption"></slot></div>
+
+	<MkButton v-if="manualSave && changed" primary @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs, VNode, useSlots } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	modelValue: string;
+	required?: boolean;
+	readonly?: boolean;
+	disabled?: boolean;
+	placeholder?: string;
+	autofocus?: boolean;
+	inline?: boolean;
+	manualSave?: boolean;
+	small?: boolean;
+	large?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'change', _ev: KeyboardEvent): void;
+	(ev: 'update:modelValue', value: string): void;
+}>();
+
+const slots = useSlots();
+
+const { modelValue, autofocus } = toRefs(props);
+const v = ref(modelValue.value);
+const focused = ref(false);
+const changed = ref(false);
+const invalid = ref(false);
+const filled = computed(() => v.value !== '' && v.value != null);
+const inputEl = ref(null);
+const prefixEl = ref(null);
+const suffixEl = ref(null);
+const container = ref(null);
+const height =
+	props.small ? 36 :
+	props.large ? 40 :
+	38;
+
+const focus = () => inputEl.value.focus();
+const onInput = (ev) => {
+	changed.value = true;
+	emit('change', ev);
+};
+
+const updated = () => {
+	changed.value = false;
+	emit('update:modelValue', v.value);
+};
+
+watch(modelValue, newValue => {
+	v.value = newValue;
+});
+
+watch(v, newValue => {
+	if (!props.manualSave) {
+		updated();
+	}
+
+	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();
+		}
+	});
+});
+
+const onClick = (ev: MouseEvent) => {
+	focused.value = true;
+
+	const menu = [];
+	let options = slots.default!();
+
+	const pushOption = (option: VNode) => {
+		menu.push({
+			text: option.children,
+			active: v.value === option.props.value,
+			action: () => {
+				v.value = option.props.value;
+			},
+		});
+	};
+
+	const scanOptions = (options: VNode[]) => {
+		for (const vnode of options) {
+			if (vnode.type === 'optgroup') {
+				const optgroup = vnode;
+				menu.push({
+					type: 'label',
+					text: optgroup.props.label,
+				});
+				scanOptions(optgroup.children);
+			} else if (Array.isArray(vnode.children)) { // 何故かフラグメントになってくることがある
+				const fragment = vnode;
+				scanOptions(fragment.children);
+			} else if (vnode.props == null) { // v-if で条件が false のときにこうなる
+				// nop?
+			} else {
+				const option = vnode;
+				pushOption(option);
+			}
+		}
+	};
+
+	scanOptions(options);
+
+	os.popupMenu(menu, container.value, {
+		width: container.value.offsetWidth,
+	}).then(() => {
+		focused.value = false;
+	});
+};
+</script>
+
+<style lang="scss" scoped>
+.vblkjoeq {
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 8px 0;
+		user-select: none;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .caption {
+		font-size: 0.85em;
+		padding: 8px 0 0 0;
+		color: var(--fgTransparentWeak);
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .input {
+		position: relative;
+		cursor: pointer;
+
+		&:hover {
+			> .select {
+				border-color: var(--inputBorderHover) !important;
+			}
+		}
+
+		> .select {
+			appearance: none;
+			-webkit-appearance: none;
+			display: block;
+			height: v-bind("height + 'px'");
+			width: 100%;
+			margin: 0;
+			padding: 0 12px;
+			font: inherit;
+			font-weight: normal;
+			font-size: 1em;
+			color: var(--fg);
+			background: var(--panel);
+			border: solid 1px var(--panel);
+			border-radius: 6px;
+			outline: none;
+			box-shadow: none;
+			box-sizing: border-box;
+			cursor: pointer;
+			transition: border-color 0.1s ease-out;
+			pointer-events: none;
+			user-select: none;
+		}
+
+		> .prefix,
+		> .suffix {
+			display: flex;
+			align-items: center;
+			position: absolute;
+			z-index: 1;
+			top: 0;
+			padding: 0 12px;
+			font-size: 1em;
+			height: v-bind("height + 'px'");
+			pointer-events: none;
+
+			&:empty {
+				display: none;
+			}
+
+			> * {
+				display: inline-block;
+				min-width: 16px;
+				max-width: 150px;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+		}
+
+		> .prefix {
+			left: 0;
+			padding-right: 6px;
+		}
+
+		> .suffix {
+			right: 0;
+			padding-left: 6px;
+		}
+
+		&.inline {
+			display: inline-block;
+			margin: 0;
+		}
+
+		&.focused {
+			> select {
+				border-color: var(--accent) !important;
+			}
+		}
+
+		&.disabled {
+			opacity: 0.7;
+
+			&, * {
+				cursor: not-allowed !important;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/form/slot.vue b/packages/frontend/src/components/form/slot.vue
new file mode 100644
index 0000000000..79ce8fe51f
--- /dev/null
+++ b/packages/frontend/src/components/form/slot.vue
@@ -0,0 +1,41 @@
+<template>
+<div class="adhpbeou">
+	<div class="label" @click="focus"><slot name="label"></slot></div>
+	<div class="content">
+		<slot></slot>
+	</div>
+	<div class="caption"><slot name="caption"></slot></div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+
+function focus() {
+	// TODO
+}
+</script>
+
+<style lang="scss" scoped>
+.adhpbeou {
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 8px 0;
+		user-select: none;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .caption {
+		font-size: 0.85em;
+		padding: 8px 0 0 0;
+		color: var(--fgTransparentWeak);
+
+		&:empty {
+			display: none;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/form/split.vue b/packages/frontend/src/components/form/split.vue
new file mode 100644
index 0000000000..301a8a84e5
--- /dev/null
+++ b/packages/frontend/src/components/form/split.vue
@@ -0,0 +1,27 @@
+<template>
+<div class="terlnhxf _formBlock">
+	<slot></slot>
+</div>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+	minWidth?: number;
+}>(), {
+	minWidth: 210,
+});
+
+const minWidth = props.minWidth + 'px';
+</script>
+
+<style lang="scss" scoped>
+.terlnhxf {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(v-bind('minWidth'), 1fr));
+	grid-gap: 12px;
+
+	> ::v-deep(*) {
+		margin: 0 !important;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/form/suspense.vue b/packages/frontend/src/components/form/suspense.vue
new file mode 100644
index 0000000000..7efa501f27
--- /dev/null
+++ b/packages/frontend/src/components/form/suspense.vue
@@ -0,0 +1,98 @@
+<template>
+<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+	<div v-if="pending">
+		<MkLoading/>
+	</div>
+	<div v-else-if="resolved">
+		<slot :result="result"></slot>
+	</div>
+	<div v-else>
+		<div class="wszdbhzo">
+			<div><i class="ti ti-alert-triangle"></i> {{ $ts.somethingHappened }}</div>
+			<MkButton inline class="retry" @click="retry"><i class="ti ti-reload"></i> {{ $ts.retry }}</MkButton>
+		</div>
+	</div>
+</transition>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, watch } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+
+export default defineComponent({
+	components: {
+		MkButton,
+	},
+
+	props: {
+		p: {
+			type: Function as PropType<() => Promise<any>>,
+			required: true,
+		},
+	},
+
+	setup(props, context) {
+		const pending = ref(true);
+		const resolved = ref(false);
+		const rejected = ref(false);
+		const result = ref(null);
+
+		const process = () => {
+			if (props.p == null) {
+				return;
+			}
+			const promise = props.p();
+			pending.value = true;
+			resolved.value = false;
+			rejected.value = false;
+			promise.then((_result) => {
+				pending.value = false;
+				resolved.value = true;
+				result.value = _result;
+			});
+			promise.catch(() => {
+				pending.value = false;
+				rejected.value = true;
+			});
+		};
+
+		watch(() => props.p, () => {
+			process();
+		}, {
+			immediate: true,
+		});
+
+		const retry = () => {
+			process();
+		};
+
+		return {
+			pending,
+			resolved,
+			rejected,
+			result,
+			retry,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
+.wszdbhzo {
+	padding: 16px;
+	text-align: center;
+
+	> .retry {
+		margin-top: 16px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/form/switch.vue b/packages/frontend/src/components/form/switch.vue
new file mode 100644
index 0000000000..1ed00ae655
--- /dev/null
+++ b/packages/frontend/src/components/form/switch.vue
@@ -0,0 +1,144 @@
+<template>
+<div
+	class="ziffeomt"
+	:class="{ disabled, checked }"
+>
+	<input
+		ref="input"
+		type="checkbox"
+		:disabled="disabled"
+		@keydown.enter="toggle"
+	>
+	<span ref="button" v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
+		<div class="knob"></div>
+	</span>
+	<span class="label">
+		<!-- TODO: 無名slotの方は廃止 -->
+		<span @click="toggle"><slot name="label"></slot><slot></slot></span>
+		<p class="caption"><slot name="caption"></slot></p>
+	</span>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, Ref } from 'vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+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) {
+
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.ziffeomt {
+	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: 32px;
+		height: 23px;
+		outline: none;
+		background: var(--swutchOffBg);
+		background-clip: content-box;
+		border: solid 1px var(--swutchOffBg);
+		border-radius: 999px;
+		cursor: pointer;
+		transition: inherit;
+		user-select: none;
+
+		> .knob {
+			position: absolute;
+			top: 3px;
+			left: 3px;
+			width: 15px;
+			height: 15px;
+			background: var(--swutchOffFg);
+			border-radius: 999px;
+			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(--swutchOnBg) !important;
+			border-color: var(--swutchOnBg) !important;
+
+			> .knob {
+				left: 12px;
+				background: var(--swutchOnFg);
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/form/textarea.vue b/packages/frontend/src/components/form/textarea.vue
new file mode 100644
index 0000000000..d34d7b1775
--- /dev/null
+++ b/packages/frontend/src/components/form/textarea.vue
@@ -0,0 +1,260 @@
+<template>
+<div class="adhpbeos">
+	<div class="label" @click="focus"><slot name="label"></slot></div>
+	<div class="input" :class="{ disabled, focused, tall, pre }">
+		<textarea
+			ref="inputEl"
+			v-model="v"
+			v-adaptive-border
+			:class="{ code, _monospace: code }"
+			:disabled="disabled"
+			:required="required"
+			:readonly="readonly"
+			:placeholder="placeholder"
+			:pattern="pattern"
+			:autocomplete="autocomplete"
+			:spellcheck="spellcheck"
+			@focus="focused = true"
+			@blur="focused = false"
+			@keydown="onKeydown($event)"
+			@input="onInput"
+		></textarea>
+	</div>
+	<div class="caption"><slot name="caption"></slot></div>
+
+	<MkButton v-if="manualSave && changed" primary class="save" @click="updated"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, onUnmounted, nextTick, ref, watch, computed, toRefs } from 'vue';
+import { debounce } from 'throttle-debounce';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n';
+
+export default defineComponent({
+	components: {
+		MkButton,
+	},
+
+	props: {
+		modelValue: {
+			required: true,
+		},
+		type: {
+			type: String,
+			required: false,
+		},
+		required: {
+			type: Boolean,
+			required: false,
+		},
+		readonly: {
+			type: Boolean,
+			required: false,
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+		},
+		pattern: {
+			type: String,
+			required: false,
+		},
+		placeholder: {
+			type: String,
+			required: false,
+		},
+		autofocus: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		autocomplete: {
+			required: false,
+		},
+		spellcheck: {
+			required: false,
+		},
+		code: {
+			type: Boolean,
+			required: false,
+		},
+		tall: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		pre: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		debounce: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		manualSave: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+
+	emits: ['change', 'keydown', 'enter', 'update:modelValue'],
+
+	setup(props, context) {
+		const { modelValue, autofocus } = toRefs(props);
+		const v = ref(modelValue.value);
+		const focused = ref(false);
+		const changed = ref(false);
+		const invalid = ref(false);
+		const filled = computed(() => v.value !== '' && v.value != null);
+		const inputEl = ref(null);
+
+		const focus = () => inputEl.value.focus();
+		const onInput = (ev) => {
+			changed.value = true;
+			context.emit('change', ev);
+		};
+		const onKeydown = (ev: KeyboardEvent) => {
+			context.emit('keydown', ev);
+
+			if (ev.code === 'Enter') {
+				context.emit('enter');
+			}
+		};
+
+		const updated = () => {
+			changed.value = false;
+			context.emit('update:modelValue', v.value);
+		};
+
+		const debouncedUpdated = debounce(1000, updated);
+
+		watch(modelValue, newValue => {
+			v.value = newValue;
+		});
+
+		watch(v, newValue => {
+			if (!props.manualSave) {
+				if (props.debounce) {
+					debouncedUpdated();
+				} else {
+					updated();
+				}
+			}
+
+			invalid.value = inputEl.value.validity.badInput;
+		});
+
+		onMounted(() => {
+			nextTick(() => {
+				if (autofocus.value) {
+					focus();
+				}
+			});
+		});
+
+		return {
+			v,
+			focused,
+			invalid,
+			changed,
+			filled,
+			inputEl,
+			focus,
+			onInput,
+			onKeydown,
+			updated,
+			i18n,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.adhpbeos {
+	> .label {
+		font-size: 0.85em;
+		padding: 0 0 8px 0;
+		user-select: none;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .caption {
+		font-size: 0.85em;
+		padding: 8px 0 0 0;
+		color: var(--fgTransparentWeak);
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .input {
+		position: relative;
+
+		> textarea {
+			appearance: none;
+			-webkit-appearance: none;
+			display: block;
+			width: 100%;
+			min-width: 100%;
+			max-width: 100%;
+			min-height: 130px;
+			margin: 0;
+			padding: 12px;
+			font: inherit;
+			font-weight: normal;
+			font-size: 1em;
+			color: var(--fg);
+			background: var(--panel);
+			border: solid 1px var(--panel);
+			border-radius: 6px;
+			outline: none;
+			box-shadow: none;
+			box-sizing: border-box;
+			transition: border-color 0.1s ease-out;
+
+			&:hover {
+				border-color: var(--inputBorderHover) !important;
+			}
+		}
+
+		&.focused {
+			> textarea {
+				border-color: var(--accent) !important;
+			}
+		}
+
+		&.disabled {
+			opacity: 0.7;
+
+			&, * {
+				cursor: not-allowed !important;
+			}
+		}
+
+		&.tall {
+			> textarea {
+				min-height: 200px;
+			}
+		}
+
+		&.pre {
+			> textarea {
+				white-space: pre;
+			}
+		}
+	}
+
+	> .save {
+		margin: 8px 0 0 0;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/global/MkA.vue b/packages/frontend/src/components/global/MkA.vue
new file mode 100644
index 0000000000..5a0ba0d8d3
--- /dev/null
+++ b/packages/frontend/src/components/global/MkA.vue
@@ -0,0 +1,102 @@
+<template>
+<a :href="to" :class="active ? activeClass : null" @click.prevent="nav" @contextmenu.prevent.stop="onContextmenu">
+	<slot></slot>
+</a>
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue';
+import * as os from '@/os';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import { url } from '@/config';
+import { popout as popout_ } from '@/scripts/popout';
+import { i18n } from '@/i18n';
+import { useRouter } from '@/router';
+
+const props = withDefaults(defineProps<{
+	to: string;
+	activeClass?: null | string;
+	behavior?: null | 'window' | 'browser' | 'modalWindow';
+}>(), {
+	activeClass: null,
+	behavior: null,
+});
+
+const router = useRouter();
+
+const active = $computed(() => {
+	if (props.activeClass == null) return false;
+	const resolved = router.resolve(props.to);
+	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.route.name === router.currentRoute.value.name;
+});
+
+function onContextmenu(ev) {
+	const selection = window.getSelection();
+	if (selection && selection.toString() !== '') return;
+	os.contextMenu([{
+		type: 'label',
+		text: props.to,
+	}, {
+		icon: 'ti ti-app-window',
+		text: i18n.ts.openInWindow,
+		action: () => {
+			os.pageWindow(props.to);
+		},
+	}, {
+		icon: 'ti ti-player-eject',
+		text: i18n.ts.showInPage,
+		action: () => {
+			router.push(props.to, 'forcePage');
+		},
+	}, null, {
+		icon: 'ti ti-external-link',
+		text: i18n.ts.openInNewTab,
+		action: () => {
+			window.open(props.to, '_blank');
+		},
+	}, {
+		icon: 'ti ti-link',
+		text: i18n.ts.copyLink,
+		action: () => {
+			copyToClipboard(`${url}${props.to}`);
+		},
+	}], ev);
+}
+
+function openWindow() {
+	os.pageWindow(props.to);
+}
+
+function modalWindow() {
+	os.modalPageWindow(props.to);
+}
+
+function popout() {
+	popout_(props.to);
+}
+
+function nav(ev: MouseEvent) {
+	if (props.behavior === 'browser') {
+		location.href = props.to;
+		return;
+	}
+
+	if (props.behavior) {
+		if (props.behavior === 'window') {
+			return openWindow();
+		} else if (props.behavior === 'modalWindow') {
+			return modalWindow();
+		}
+	}
+
+	if (ev.shiftKey) {
+		return openWindow();
+	}
+
+	router.push(props.to, ev.ctrlKey ? 'forcePage' : null);
+}
+</script>
diff --git a/packages/frontend/src/components/global/MkAcct.vue b/packages/frontend/src/components/global/MkAcct.vue
new file mode 100644
index 0000000000..c3e806b5fb
--- /dev/null
+++ b/packages/frontend/src/components/global/MkAcct.vue
@@ -0,0 +1,27 @@
+<template>
+<span class="mk-acct">
+	<span class="name">@{{ user.username }}</span>
+	<span v-if="user.host || detail || $store.state.showFullAcct" class="host">@{{ user.host || host }}</span>
+</span>
+</template>
+
+<script lang="ts" setup>
+import * as misskey from 'misskey-js';
+import { toUnicode } from 'punycode/';
+import { host as hostRaw } from '@/config';
+
+defineProps<{
+	user: misskey.entities.UserDetailed;
+	detail?: boolean;
+}>();
+
+const host = toUnicode(hostRaw);
+</script>
+
+<style lang="scss" scoped>
+.mk-acct {
+	> .host {
+		opacity: 0.5;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/global/MkAd.vue b/packages/frontend/src/components/global/MkAd.vue
new file mode 100644
index 0000000000..a80efb142c
--- /dev/null
+++ b/packages/frontend/src/components/global/MkAd.vue
@@ -0,0 +1,186 @@
+<template>
+<div v-if="chosen" class="qiivuoyo">
+	<div v-if="!showMenu" class="main" :class="chosen.place">
+		<a :href="chosen.url" target="_blank">
+			<img :src="chosen.imageUrl">
+			<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="ti ti-info-circle info-circle"></span></button>
+		</a>
+	</div>
+	<div v-else class="menu">
+		<div class="body">
+			<div>Ads by {{ host }}</div>
+			<!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>-->
+			<MkButton v-if="chosen.ratio !== 0" class="button" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton>
+			<button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button>
+		</div>
+	</div>
+</div>
+<div v-else></div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { instance } from '@/instance';
+import { host } from '@/config';
+import MkButton from '@/components/MkButton.vue';
+import { defaultStore } from '@/store';
+import * as os from '@/os';
+
+type Ad = (typeof instance)['ads'][number];
+
+const props = defineProps<{
+	prefer: string[];
+	specify?: Ad;
+}>();
+
+const showMenu = ref(false);
+const toggleMenu = (): void => {
+	showMenu.value = !showMenu.value;
+};
+
+const choseAd = (): Ad | null => {
+	if (props.specify) {
+		return props.specify;
+	}
+
+	const allAds = instance.ads.map(ad => defaultStore.state.mutedAds.includes(ad.id) ? {
+		...ad,
+		ratio: 0,
+	} : ad);
+
+	let ads = allAds.filter(ad => props.prefer.includes(ad.place));
+
+	if (ads.length === 0) {
+		ads = allAds.filter(ad => ad.place === 'square');
+	}
+
+	const lowPriorityAds = ads.filter(ad => ad.ratio === 0);
+	ads = ads.filter(ad => ad.ratio !== 0);
+
+	if (ads.length === 0) {
+		if (lowPriorityAds.length !== 0) {
+			return lowPriorityAds[Math.floor(Math.random() * lowPriorityAds.length)];
+		} else {
+			return null;
+		}
+	}
+
+	const totalFactor = ads.reduce((a, b) => a + b.ratio, 0);
+	const r = Math.random() * totalFactor;
+
+	let stackedFactor = 0;
+	for (const ad of ads) {
+		if (r >= stackedFactor && r <= stackedFactor + ad.ratio) {
+			return ad;
+		} else {
+			stackedFactor += ad.ratio;
+		}
+	}
+
+	return null;
+};
+
+const chosen = ref(choseAd());
+
+function reduceFrequency(): void {
+	if (chosen.value == null) return;
+	if (defaultStore.state.mutedAds.includes(chosen.value.id)) return;
+	defaultStore.push('mutedAds', chosen.value.id);
+	os.success();
+	chosen.value = choseAd();
+	showMenu.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+.qiivuoyo {
+	background-size: auto auto;
+	background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--ad) 8px, var(--ad) 14px );
+
+	> .main {
+		text-align: center;
+
+		> a {
+			display: inline-block;
+			position: relative;
+			vertical-align: bottom;
+
+			&:hover {
+				> img {
+					filter: contrast(120%);
+				}
+			}
+
+			> img {
+				display: block;
+				object-fit: contain;
+				margin: auto;
+				border-radius: 5px;
+			}
+
+			> .menu {
+				position: absolute;
+				top: 1px;
+				right: 1px;
+
+				> .info-circle {
+					border: 3px solid var(--panel);
+					border-radius: 50%;
+					background: var(--panel);
+				}
+			}
+		}
+
+		&.square {
+			> a ,
+			> a > img {
+				max-width: min(300px, 100%);
+				max-height: 300px;
+			}
+		}
+
+		&.horizontal {
+			padding: 8px;
+
+			> a ,
+			> a > img {
+				max-width: min(600px, 100%);
+				max-height: 80px;
+			}
+		}
+
+		&.horizontal-big {
+			padding: 8px;
+
+			> a ,
+			> a > img {
+				max-width: min(600px, 100%);
+				max-height: 250px;
+			}
+		}
+
+		&.vertical {
+			> a ,
+			> a > img {
+				max-width: min(100px, 100%);
+			}
+		}
+	}
+
+	> .menu {
+		padding: 8px;
+		text-align: center;
+
+		> .body {
+			padding: 8px;
+			margin: 0 auto;
+			max-width: 400px;
+			border: solid 1px var(--divider);
+
+			> .button {
+				margin: 8px auto;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
new file mode 100644
index 0000000000..5f3e3c176d
--- /dev/null
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -0,0 +1,143 @@
+<template>
+<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :title="acct(user)" @click="onClick">
+	<img class="inner" :src="url" decoding="async"/>
+	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
+</span>
+<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: $store.state.squareAvatars }" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
+	<img class="inner" :src="url" decoding="async"/>
+	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
+</MkA>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, watch } from 'vue';
+import * as misskey from 'misskey-js';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
+import { acct, userPage } from '@/filters/user';
+import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue';
+import { defaultStore } from '@/store';
+
+const props = withDefaults(defineProps<{
+	user: misskey.entities.User;
+	target?: string | null;
+	disableLink?: boolean;
+	disablePreview?: boolean;
+	showIndicator?: boolean;
+}>(), {
+	target: null,
+	disableLink: false,
+	disablePreview: false,
+	showIndicator: false,
+});
+
+const emit = defineEmits<{
+	(ev: 'click', v: MouseEvent): void;
+}>();
+
+const url = $computed(() => defaultStore.state.disableShowingAnimatedImages
+	? getStaticImageUrl(props.user.avatarUrl)
+	: props.user.avatarUrl);
+
+function onClick(ev: MouseEvent) {
+	emit('click', ev);
+}
+
+let color = $ref();
+
+watch(() => props.user.avatarBlurhash, () => {
+	color = extractAvgColorFromBlurhash(props.user.avatarBlurhash);
+}, {
+	immediate: true,
+});
+</script>
+
+<style lang="scss" scoped>
+@keyframes earwiggleleft {
+	from { transform: rotate(37.6deg) skew(30deg); }
+	25% { transform: rotate(10deg) skew(30deg); }
+	50% { transform: rotate(20deg) skew(30deg); }
+	75% { transform: rotate(0deg) skew(30deg); }
+	to { transform: rotate(37.6deg) skew(30deg); }
+}
+
+@keyframes earwiggleright {
+	from { transform: rotate(-37.6deg) skew(-30deg); }
+	30% { transform: rotate(-10deg) skew(-30deg); }
+	55% { transform: rotate(-20deg) skew(-30deg); }
+	75% { transform: rotate(0deg) skew(-30deg); }
+	to { transform: rotate(-37.6deg) skew(-30deg); }
+}
+
+.eiwwqkts {
+	position: relative;
+	display: inline-block;
+	vertical-align: bottom;
+	flex-shrink: 0;
+	border-radius: 100%;
+	line-height: 16px;
+
+	> .inner {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		top: 0;
+		border-radius: 100%;
+		z-index: 1;
+		overflow: hidden;
+		object-fit: cover;
+		width: 100%;
+		height: 100%;
+	}
+
+	> .indicator {
+		position: absolute;
+		z-index: 1;
+		bottom: 0;
+		left: 0;
+		width: 20%;
+		height: 20%;
+	}
+
+	&.square {
+		border-radius: 20%;
+
+		> .inner {
+			border-radius: 20%;
+		}
+	}
+
+	&.cat {
+		&:before, &:after {
+			background: #df548f;
+			border: solid 4px currentColor;
+			box-sizing: border-box;
+			content: '';
+			display: inline-block;
+			height: 50%;
+			width: 50%;
+		}
+
+		&:before {
+			border-radius: 0 75% 75%;
+			transform: rotate(37.5deg) skew(30deg);
+		}
+
+		&:after {
+			border-radius: 75% 0 75% 75%;
+			transform: rotate(-37.5deg) skew(-30deg);
+		}
+
+		&:hover {
+			&:before {
+				animation: earwiggleleft 1s infinite;
+			}
+
+			&:after {
+				animation: earwiggleright 1s infinite;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/global/MkEllipsis.vue b/packages/frontend/src/components/global/MkEllipsis.vue
new file mode 100644
index 0000000000..0a46f486d6
--- /dev/null
+++ b/packages/frontend/src/components/global/MkEllipsis.vue
@@ -0,0 +1,34 @@
+<template>
+	<span class="mk-ellipsis">
+		<span>.</span><span>.</span><span>.</span>
+	</span>
+</template>
+
+<style lang="scss" scoped>
+.mk-ellipsis {
+	> span {
+		animation: ellipsis 1.4s infinite ease-in-out both;
+
+		&:nth-child(1) {
+			animation-delay: 0s;
+		}
+
+		&:nth-child(2) {
+			animation-delay: 0.16s;
+		}
+
+		&:nth-child(3) {
+			animation-delay: 0.32s;
+		}
+	}
+}
+
+@keyframes ellipsis {
+	0%, 80%, 100% {
+		opacity: 1;
+	}
+	40% {
+		opacity: 0;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/global/MkEmoji.vue b/packages/frontend/src/components/global/MkEmoji.vue
new file mode 100644
index 0000000000..ce1299a39f
--- /dev/null
+++ b/packages/frontend/src/components/global/MkEmoji.vue
@@ -0,0 +1,81 @@
+<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" decoding="async" @pointerenter="computeTitle"/>
+<span v-else-if="char && useOsNativeEmojis" :alt="alt" @pointerenter="computeTitle">{{ char }}</span>
+<span v-else>{{ emoji }}</span>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { CustomEmoji } from 'misskey-js/built/entities';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import { char2twemojiFilePath, char2fluentEmojiFilePath } from '@/scripts/emoji-base';
+import { defaultStore } from '@/store';
+import { instance } from '@/instance';
+import { getEmojiName } from '@/scripts/emojilist';
+
+const props = defineProps<{
+	emoji: string;
+	normal?: boolean;
+	noStyle?: boolean;
+	customEmojis?: CustomEmoji[];
+	isReaction?: boolean;
+}>();
+
+const char2path = defaultStore.state.emojiStyle === 'twemoji' ? char2twemojiFilePath : char2fluentEmojiFilePath;
+
+const isCustom = computed(() => props.emoji.startsWith(':'));
+const char = computed(() => isCustom.value ? undefined : props.emoji);
+const useOsNativeEmojis = computed(() => defaultStore.state.emojiStyle === 'native' && !props.isReaction);
+const ce = computed(() => props.customEmojis ?? instance.emojis ?? []);
+const customEmoji = computed(() => isCustom.value ? ce.value.find(x => x.name === props.emoji.substr(1, props.emoji.length - 2)) : undefined);
+const url = computed(() => {
+	if (char.value) {
+		return char2path(char.value);
+	} else {
+		const rawUrl = (customEmoji.value as CustomEmoji).url;
+		return defaultStore.state.disableShowingAnimatedImages
+			? getStaticImageUrl(rawUrl)
+			: rawUrl;
+	}
+});
+const alt = computed(() => customEmoji.value ? `:${customEmoji.value.name}:` : char.value);
+
+// Searching from an array with 2000 items for every emoji felt like too energy-consuming, so I decided to do it lazily on pointerenter
+function computeTitle(event: PointerEvent): void {
+	const title = customEmoji.value
+		? `:${customEmoji.value.name}:`
+		: (getEmojiName(char.value as string) ?? char.value as string);
+	(event.target as HTMLElement).title = title;
+}
+</script>
+
+<style lang="scss" scoped>
+.mk-emoji {
+	height: 1.25em;
+	vertical-align: -0.25em;
+
+	&.custom {
+		height: 2.5em;
+		vertical-align: middle;
+		transition: transform 0.2s ease;
+
+		&:hover {
+			transform: scale(1.2);
+		}
+
+		&.normal {
+			height: 1.25em;
+			vertical-align: -0.25em;
+
+			&:hover {
+				transform: none;
+			}
+		}
+	}
+
+	&.noStyle {
+		height: auto !important;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/global/MkError.vue b/packages/frontend/src/components/global/MkError.vue
new file mode 100644
index 0000000000..e135d4184b
--- /dev/null
+++ b/packages/frontend/src/components/global/MkError.vue
@@ -0,0 +1,36 @@
+<template>
+<transition :name="$store.state.animation ? 'zoom' : ''" appear>
+	<div class="mjndxjcg">
+		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
+		<p><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
+		<MkButton class="button" @click="() => $emit('retry')">{{ i18n.ts.retry }}</MkButton>
+	</div>
+</transition>
+</template>
+
+<script lang="ts" setup>
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n';
+</script>
+
+<style lang="scss" scoped>
+.mjndxjcg {
+	padding: 32px;
+	text-align: center;
+
+	> p {
+		margin: 0 0 8px 0;
+	}
+
+	> .button {
+		margin: 0 auto;
+	}
+
+	> img {
+		vertical-align: bottom;
+		height: 128px;
+		margin-bottom: 16px;
+		border-radius: 16px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/global/MkLoading.vue b/packages/frontend/src/components/global/MkLoading.vue
new file mode 100644
index 0000000000..64e12e3b44
--- /dev/null
+++ b/packages/frontend/src/components/global/MkLoading.vue
@@ -0,0 +1,101 @@
+<template>
+<div :class="[$style.root, { [$style.inline]: inline, [$style.colored]: colored, [$style.mini]: mini, [$style.em]: em }]">
+	<div :class="$style.container">
+		<svg :class="[$style.spinner, $style.bg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
+			<g transform="matrix(1.125,0,0,1.125,12,12)">
+				<circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
+			</g>
+		</svg>
+		<svg :class="[$style.spinner, $style.fg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg">
+			<g transform="matrix(1.125,0,0,1.125,12,12)">
+				<path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/>
+			</g>
+		</svg>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+
+const props = withDefaults(defineProps<{
+	inline?: boolean;
+	colored?: boolean;
+	mini?: boolean;
+	em?: boolean;
+}>(), {
+	inline: false,
+	colored: true,
+	mini: false,
+	em: false,
+});
+</script>
+
+<style lang="scss" module>
+@keyframes spinner {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+.root {
+	padding: 32px;
+	text-align: center;
+	cursor: wait;
+
+	--size: 38px;
+
+	&.colored {
+		color: var(--accent);
+	}
+
+	&.inline {
+		display: inline;
+		padding: 0;
+		--size: 32px;
+	}
+
+	&.mini {
+		padding: 16px;
+		--size: 32px;
+	}
+
+	&.em {
+		display: inline-block;
+		vertical-align: middle;
+		padding: 0;
+		--size: 1em;
+	}
+}
+
+.container {
+	position: relative;
+	width: var(--size);
+	height: var(--size);
+	margin: 0 auto;
+}
+
+.spinner {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: var(--size);
+	height: var(--size);
+	fill-rule: evenodd;
+	clip-rule: evenodd;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-miterlimit: 1.5;
+}
+
+.bg {
+	opacity: 0.275;
+}
+
+.fg {
+	animation: spinner 0.5s linear infinite;
+}
+</style>
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue
new file mode 100644
index 0000000000..70d0108e9f
--- /dev/null
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.vue
@@ -0,0 +1,191 @@
+<template>
+<MfmCore :text="text" :plain="plain" :nowrap="nowrap" :author="author" :customEmojis="customEmojis" :isNote="isNote" class="havbbuyv" :class="{ nowrap }"/>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MfmCore from '@/components/mfm';
+
+const props = withDefaults(defineProps<{
+	text: string;
+	plain?: boolean;
+	nowrap?: boolean;
+	author?: any;
+	customEmojis?: any;
+	isNote?: boolean;
+}>(), {
+	plain: false,
+	nowrap: false,
+	author: null,
+	isNote: true,
+});
+</script>
+
+<style lang="scss">
+._mfm_blur_ {
+	filter: blur(6px);
+	transition: filter 0.3s;
+
+	&:hover {
+		filter: blur(0px);
+	}
+}
+
+.mfm-x2 {
+	--mfm-zoom-size: 200%;
+}
+
+.mfm-x3 {
+	--mfm-zoom-size: 400%;
+}
+
+.mfm-x4 {
+	--mfm-zoom-size: 600%;
+}
+
+.mfm-x2, .mfm-x3, .mfm-x4 {
+	font-size: var(--mfm-zoom-size);
+
+	.mfm-x2, .mfm-x3, .mfm-x4 {
+		/* only half effective */
+		font-size: calc(var(--mfm-zoom-size) / 2 + 50%);
+
+		.mfm-x2, .mfm-x3, .mfm-x4 {
+			/* disabled */
+			font-size: 100%;
+		}
+	}
+}
+
+@keyframes mfm-spin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+}
+
+@keyframes mfm-spinX {
+	0% { transform: perspective(128px) rotateX(0deg); }
+	100% { transform: perspective(128px) rotateX(360deg); }
+}
+
+@keyframes mfm-spinY {
+	0% { transform: perspective(128px) rotateY(0deg); }
+	100% { transform: perspective(128px) rotateY(360deg); }
+}
+
+@keyframes mfm-jump {
+	0% { transform: translateY(0); }
+	25% { transform: translateY(-16px); }
+	50% { transform: translateY(0); }
+	75% { transform: translateY(-8px); }
+	100% { transform: translateY(0); }
+}
+
+@keyframes mfm-bounce {
+	0% { transform: translateY(0) scale(1, 1); }
+	25% { transform: translateY(-16px) scale(1, 1); }
+	50% { transform: translateY(0) scale(1, 1); }
+	75% { transform: translateY(0) scale(1.5, 0.75); }
+	100% { transform: translateY(0) scale(1, 1); }
+}
+
+// const val = () => `translate(${Math.floor(Math.random() * 20) - 10}px, ${Math.floor(Math.random() * 20) - 10}px)`;
+// let css = '';
+// for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
+@keyframes mfm-twitch {
+	0% { transform: translate(7px, -2px) }
+	5% { transform: translate(-3px, 1px) }
+	10% { transform: translate(-7px, -1px) }
+	15% { transform: translate(0px, -1px) }
+	20% { transform: translate(-8px, 6px) }
+	25% { transform: translate(-4px, -3px) }
+	30% { transform: translate(-4px, -6px) }
+	35% { transform: translate(-8px, -8px) }
+	40% { transform: translate(4px, 6px) }
+	45% { transform: translate(-3px, 1px) }
+	50% { transform: translate(2px, -10px) }
+	55% { transform: translate(-7px, 0px) }
+	60% { transform: translate(-2px, 4px) }
+	65% { transform: translate(3px, -8px) }
+	70% { transform: translate(6px, 7px) }
+	75% { transform: translate(-7px, -2px) }
+	80% { transform: translate(-7px, -8px) }
+	85% { transform: translate(9px, 3px) }
+	90% { transform: translate(-3px, -2px) }
+	95% { transform: translate(-10px, 2px) }
+	100% { transform: translate(-2px, -6px) }
+}
+
+// const val = () => `translate(${Math.floor(Math.random() * 6) - 3}px, ${Math.floor(Math.random() * 6) - 3}px) rotate(${Math.floor(Math.random() * 24) - 12}deg)`;
+// let css = '';
+// for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
+@keyframes mfm-shake {
+	0% { transform: translate(-3px, -1px) rotate(-8deg) }
+	5% { transform: translate(0px, -1px) rotate(-10deg) }
+	10% { transform: translate(1px, -3px) rotate(0deg) }
+	15% { transform: translate(1px, 1px) rotate(11deg) }
+	20% { transform: translate(-2px, 1px) rotate(1deg) }
+	25% { transform: translate(-1px, -2px) rotate(-2deg) }
+	30% { transform: translate(-1px, 2px) rotate(-3deg) }
+	35% { transform: translate(2px, 1px) rotate(6deg) }
+	40% { transform: translate(-2px, -3px) rotate(-9deg) }
+	45% { transform: translate(0px, -1px) rotate(-12deg) }
+	50% { transform: translate(1px, 2px) rotate(10deg) }
+	55% { transform: translate(0px, -3px) rotate(8deg) }
+	60% { transform: translate(1px, -1px) rotate(8deg) }
+	65% { transform: translate(0px, -1px) rotate(-7deg) }
+	70% { transform: translate(-1px, -3px) rotate(6deg) }
+	75% { transform: translate(0px, -2px) rotate(4deg) }
+	80% { transform: translate(-2px, -1px) rotate(3deg) }
+	85% { transform: translate(1px, -3px) rotate(-10deg) }
+	90% { transform: translate(1px, 0px) rotate(3deg) }
+	95% { transform: translate(-2px, 0px) rotate(-3deg) }
+	100% { transform: translate(2px, 1px) rotate(2deg) }
+}
+
+@keyframes mfm-rubberBand {
+	from { transform: scale3d(1, 1, 1); }
+	30% { transform: scale3d(1.25, 0.75, 1); }
+	40% { transform: scale3d(0.75, 1.25, 1); }
+	50% { transform: scale3d(1.15, 0.85, 1); }
+	65% { transform: scale3d(0.95, 1.05, 1); }
+	75% { transform: scale3d(1.05, 0.95, 1); }
+	to { transform: scale3d(1, 1, 1); }
+}
+
+@keyframes mfm-rainbow {
+	0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
+	100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
+}
+</style>
+
+<style lang="scss" scoped>
+.havbbuyv {
+	white-space: pre-wrap;
+
+	&.nowrap {
+		white-space: pre;
+		word-wrap: normal; // https://codeday.me/jp/qa/20190424/690106.html
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	::v-deep(.quote) {
+		display: block;
+		margin: 8px;
+		padding: 6px 0 6px 12px;
+		color: var(--fg);
+		border-left: solid 3px var(--fg);
+		opacity: 0.7;
+	}
+
+	::v-deep(pre) {
+		font-size: 0.8em;
+	}
+
+	> ::v-deep(code) {
+		font-size: 0.8em;
+		word-break: break-all;
+		padding: 4px 6px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
new file mode 100644
index 0000000000..a228dfe883
--- /dev/null
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -0,0 +1,368 @@
+<template>
+<div v-if="show" ref="el" class="fdidabkb" :class="{ slim: narrow, thin: thin_ }" :style="{ background: bg }" @click="onClick">
+	<div v-if="narrow" class="buttons left">
+		<MkAvatar v-if="props.displayMyAvatar && $i" class="avatar" :user="$i" :disable-preview="true"/>
+	</div>
+	<template v-if="metadata">
+		<div v-if="!hideTitle" class="titleContainer" @click="showTabsPopup">
+			<MkAvatar v-if="metadata.avatar" class="avatar" :user="metadata.avatar" :disable-preview="true" :show-indicator="true"/>
+			<i v-else-if="metadata.icon" 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.key === props.tab)?.title }}
+					<i class="chevron ti ti-chevron-down"></i>
+				</div>
+			</div>
+		</div>
+		<div v-if="!narrow || hideTitle" class="tabs">
+			<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = (el as HTMLElement)" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
+				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
+				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
+			</button>
+			<div ref="tabHighlightEl" class="highlight"></div>
+		</div>
+	</template>
+	<div class="buttons right">
+		<template v-for="action in actions">
+			<button v-tooltip.noDelay="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
+		</template>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, inject, watch, nextTick } from 'vue';
+import tinycolor from 'tinycolor2';
+import { popupMenu } from '@/os';
+import { scrollToTop } from '@/scripts/scroll';
+import { globalEvents } from '@/events';
+import { injectPageMetadata } from '@/scripts/page-metadata';
+import { $i } from '@/account';
+
+type Tab = {
+	key: string;
+	title: string;
+	icon?: string;
+	iconOnly?: boolean;
+	onClick?: (ev: MouseEvent) => void;
+};
+
+const props = withDefaults(defineProps<{
+	tabs?: Tab[];
+	tab?: string;
+	actions?: {
+		text: string;
+		icon: string;
+		highlighted?: boolean;
+		handler: (ev: MouseEvent) => void;
+	}[];
+	thin?: boolean;
+	displayMyAvatar?: boolean;
+}>(), {
+	tabs: () => ([] as Tab[])
+});
+
+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 | undefined>(undefined);
+const tabRefs: Record<string, HTMLElement | null> = {};
+const tabHighlightEl = $ref<HTMLElement | null>(null);
+const bg = ref<string | undefined>(undefined);
+let narrow = $ref(false);
+const hasTabs = $computed(() => 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,
+		active: tab.key != null && tab.key === props.tab,
+		action: (ev) => {
+			onTabClick(tab, ev);
+		},
+	}));
+	popupMenu(menu, (ev.currentTarget ?? ev.target) as HTMLElement);
+};
+
+const preventDrag = (ev: TouchEvent) => {
+	ev.stopPropagation();
+};
+
+const onClick = () => {
+	if (el) {
+		scrollToTop(el as HTMLElement, { 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) {
+		ev.preventDefault();
+		ev.stopPropagation();
+		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);
+	tinyBg.setAlpha(0.85);
+	bg.value = tinyBg.toRgbString();
+};
+
+let ro: ResizeObserver | null;
+
+onMounted(() => {
+	calcBg();
+	globalEvents.on('themeChanged', calcBg);
+
+	watch(() => [props.tab, props.tabs], () => {
+		nextTick(() => {
+			const tabEl = props.tab ? tabRefs[props.tab] : undefined;
+			if (tabEl && tabHighlightEl && tabEl.parentElement) {
+				// 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) => {
+			if (el.parentElement && document.body.contains(el as HTMLElement)) {
+				narrow = el.parentElement.offsetWidth < 500;
+			}
+		});
+		ro.observe(el.parentElement as HTMLElement);
+	}
+});
+
+onUnmounted(() => {
+	globalEvents.off('themeChanged', calcBg);
+	if (ro) ro.disconnect();
+});
+</script>
+
+<style lang="scss" scoped>
+.fdidabkb {
+	--height: 52px;
+	display: flex;
+	width: 100%;
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+	border-bottom: solid 0.5px var(--divider);
+	contain: strict;
+	height: var(--height);
+
+	&.thin {
+		--height: 42px;
+
+		> .buttons {
+			> .button {
+				font-size: 0.9em;
+			}
+		}
+	}
+
+	&.slim {
+		text-align: center;
+
+		> .titleContainer {
+			flex: 1;
+			margin: 0 auto;
+
+			> *:first-child {
+				margin-left: auto;
+			}
+
+			> *:last-child {
+				margin-right: auto;
+			}
+		}
+	}
+
+	> .buttons {
+		--margin: 8px;
+		display: flex;
+    align-items: center;
+		min-width: var(--height);
+		height: var(--height);
+		margin: 0 var(--margin);
+
+		&.left {
+			margin-right: auto;
+
+			> .avatar {
+				$size: 32px;
+				display: inline-block;
+				width: $size;
+				height: $size;
+				vertical-align: bottom;
+				margin: 0 8px;
+				pointer-events: none;
+			}
+		}
+
+		&.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;
+			width: 16px;
+			text-align: center;
+		}
+
+		> .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 {
+		position: relative;
+		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;
+			}
+
+			> .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/frontend/src/components/global/MkSpacer.vue b/packages/frontend/src/components/global/MkSpacer.vue
new file mode 100644
index 0000000000..b3a42d77e7
--- /dev/null
+++ b/packages/frontend/src/components/global/MkSpacer.vue
@@ -0,0 +1,96 @@
+<template>
+<div ref="root" :class="$style.root" :style="{ padding: margin + 'px' }">
+	<div ref="content" :class="$style.content">
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { inject, onMounted, onUnmounted, ref } from 'vue';
+import { deviceKind } from '@/scripts/device-kind';
+
+const props = withDefaults(defineProps<{
+	contentMax?: number | null;
+	marginMin?: number;
+	marginMax?: number;
+}>(), {
+	contentMax: null,
+	marginMin: 12,
+	marginMax: 24,
+});
+
+let ro: ResizeObserver;
+let root = $ref<HTMLElement>();
+let content = $ref<HTMLElement>();
+let margin = $ref(0);
+const widthHistory = [null, null] as [number | null, number | null];
+const heightHistory = [null, null] as [number | null, number | null];
+const shouldSpacerMin = inject('shouldSpacerMin', false);
+
+const adjust = (rect: { width: number; height: number; }) => {
+	if (shouldSpacerMin || deviceKind === 'smartphone') {
+		margin = props.marginMin;
+		return;
+	}
+
+	if (rect.width > (props.contentMax ?? 0) || (rect.width > 360 && window.innerWidth > 400)) {
+		margin = props.marginMax;
+	} else {
+		margin = props.marginMin;
+	}
+};
+
+onMounted(() => {
+	ro = new ResizeObserver((entries) => {
+		/* iOSが対応していない
+		adjust({
+			width: entries[0].borderBoxSize[0].inlineSize,
+			height: entries[0].borderBoxSize[0].blockSize,
+		});
+		*/
+
+		const width = root!.offsetWidth;
+		const height = root!.offsetHeight;
+
+		//#region Prevent infinite resizing
+		// https://github.com/misskey-dev/misskey/issues/9076
+		const pastWidth = widthHistory.pop();
+		widthHistory.unshift(width);
+		const pastHeight = heightHistory.pop();
+		heightHistory.unshift(height);
+
+
+		if (pastWidth === width && pastHeight === height) {
+			return;
+		}
+		//#endregion
+
+		adjust({
+			width,
+			height,
+		});
+	});
+	ro.observe(root!);
+
+	if (props.contentMax) {
+		content!.style.maxWidth = `${props.contentMax}px`;
+	}
+});
+
+onUnmounted(() => {
+	ro.disconnect();
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	box-sizing: border-box;
+	width: 100%;
+}
+
+.content {
+	margin: 0 auto;
+	container-type: inline-size;
+}
+</style>
diff --git a/packages/frontend/src/components/global/MkStickyContainer.vue b/packages/frontend/src/components/global/MkStickyContainer.vue
new file mode 100644
index 0000000000..44f4f065a6
--- /dev/null
+++ b/packages/frontend/src/components/global/MkStickyContainer.vue
@@ -0,0 +1,66 @@
+<template>
+<div ref="rootEl">
+	<div ref="headerEl">
+		<slot name="header"></slot>
+	</div>
+	<div ref="bodyEl" :data-sticky-container-header-height="headerHeight">
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+// なんか動かない
+//const CURRENT_STICKY_TOP = Symbol('CURRENT_STICKY_TOP');
+const CURRENT_STICKY_TOP = 'CURRENT_STICKY_TOP';
+</script>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, provide, inject, Ref, ref, watch } from 'vue';
+
+const rootEl = $ref<HTMLElement>();
+const headerEl = $ref<HTMLElement>();
+const bodyEl = $ref<HTMLElement>();
+
+let headerHeight = $ref<string | undefined>();
+let childStickyTop = $ref(0);
+const parentStickyTop = inject<Ref<number>>(CURRENT_STICKY_TOP, ref(0));
+provide(CURRENT_STICKY_TOP, $$(childStickyTop));
+
+const calc = () => {
+	childStickyTop = parentStickyTop.value + headerEl.offsetHeight;
+	headerHeight = headerEl.offsetHeight.toString();
+};
+
+const observer = new ResizeObserver(() => {
+	window.setTimeout(() => {
+		calc();
+	}, 100);
+});
+
+onMounted(() => {
+	calc();
+
+	watch(parentStickyTop, calc);
+
+	watch($$(childStickyTop), () => {
+		bodyEl.style.setProperty('--stickyTop', `${childStickyTop}px`);
+	}, {
+		immediate: true,
+	});
+
+	headerEl.style.position = 'sticky';
+	headerEl.style.top = 'var(--stickyTop, 0)';
+	headerEl.style.zIndex = '1000';
+
+	observer.observe(headerEl);
+});
+
+onUnmounted(() => {
+	observer.disconnect();
+});
+</script>
+
+<style lang="scss" module>
+
+</style>
diff --git a/packages/frontend/src/components/global/MkTime.vue b/packages/frontend/src/components/global/MkTime.vue
new file mode 100644
index 0000000000..f72b153f56
--- /dev/null
+++ b/packages/frontend/src/components/global/MkTime.vue
@@ -0,0 +1,56 @@
+<template>
+<time :title="absolute">
+	<template v-if="mode === 'relative'">{{ relative }}</template>
+	<template v-else-if="mode === 'absolute'">{{ absolute }}</template>
+	<template v-else-if="mode === 'detail'">{{ absolute }} ({{ relative }})</template>
+</time>
+</template>
+
+<script lang="ts" setup>
+import { onUnmounted } from 'vue';
+import { i18n } from '@/i18n';
+
+const props = withDefaults(defineProps<{
+	time: Date | string;
+	mode?: 'relative' | 'absolute' | 'detail';
+}>(), {
+	mode: 'relative',
+});
+
+const _time = typeof props.time === 'string' ? new Date(props.time) : props.time;
+const absolute = _time.toLocaleString();
+
+let now = $shallowRef(new Date());
+const relative = $computed(() => {
+	const ago = (now.getTime() - _time.getTime()) / 1000/*ms*/;
+	return (
+		ago >= 31536000 ? i18n.t('_ago.yearsAgo', { n: Math.round(ago / 31536000).toString() }) :
+		ago >= 2592000 ? i18n.t('_ago.monthsAgo', { n: Math.round(ago / 2592000).toString() }) :
+		ago >= 604800 ? i18n.t('_ago.weeksAgo', { n: Math.round(ago / 604800).toString() }) :
+		ago >= 86400 ? i18n.t('_ago.daysAgo', { n: Math.round(ago / 86400).toString() }) :
+		ago >= 3600 ? i18n.t('_ago.hoursAgo', { n: Math.round(ago / 3600).toString() }) :
+		ago >= 60 ? i18n.t('_ago.minutesAgo', { n: (~~(ago / 60)).toString() }) :
+		ago >= 10 ? i18n.t('_ago.secondsAgo', { n: (~~(ago % 60)).toString() }) :
+		ago >= -1 ? i18n.ts._ago.justNow :
+		i18n.ts._ago.future);
+});
+
+function tick() {
+	// TODO: パフォーマンス向上のため、このコンポーネントが画面内に表示されている場合のみ更新する
+	now = new Date();
+
+	tickId = window.setTimeout(() => {
+		window.requestAnimationFrame(tick);
+	}, 10000);
+}
+
+let tickId: number;
+
+if (props.mode === 'relative' || props.mode === 'detail') {
+	tickId = window.requestAnimationFrame(tick);
+
+	onUnmounted(() => {
+		window.cancelAnimationFrame(tickId);
+	});
+}
+</script>
diff --git a/packages/frontend/src/components/global/MkUrl.vue b/packages/frontend/src/components/global/MkUrl.vue
new file mode 100644
index 0000000000..9f5be96224
--- /dev/null
+++ b/packages/frontend/src/components/global/MkUrl.vue
@@ -0,0 +1,89 @@
+<template>
+<component
+	:is="self ? 'MkA' : 'a'" ref="el" class="ieqqeuvs _link" :[attr]="self ? props.url.substring(local.length) : props.url" :rel="rel" :target="target"
+	@contextmenu.stop="() => {}"
+>
+	<template v-if="!self">
+		<span class="schema">{{ schema }}//</span>
+		<span class="hostname">{{ hostname }}</span>
+		<span v-if="port != ''" class="port">:{{ port }}</span>
+	</template>
+	<template v-if="pathname === '/' && self">
+		<span class="self">{{ hostname }}</span>
+	</template>
+	<span v-if="pathname != ''" class="pathname">{{ self ? pathname.substring(1) : pathname }}</span>
+	<span class="query">{{ query }}</span>
+	<span class="hash">{{ hash }}</span>
+	<i v-if="target === '_blank'" class="ti ti-external-link icon"></i>
+</component>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, ref } from 'vue';
+import { toUnicode as decodePunycode } from 'punycode/';
+import { url as local } from '@/config';
+import * as os from '@/os';
+import { useTooltip } from '@/scripts/use-tooltip';
+import { safeURIDecode } from '@/scripts/safe-uri-decode';
+
+const props = defineProps<{
+	url: string;
+	rel?: string;
+}>();
+
+const self = props.url.startsWith(local);
+const url = new URL(props.url);
+const el = ref();
+
+useTooltip(el, (showing) => {
+	os.popup(defineAsyncComponent(() => import('@/components/MkUrlPreviewPopup.vue')), {
+		showing,
+		url: props.url,
+		source: el.value,
+	}, {}, 'closed');
+});
+
+const schema = url.protocol;
+const hostname = decodePunycode(url.hostname);
+const port = url.port;
+const pathname = safeURIDecode(url.pathname);
+const query = safeURIDecode(url.search);
+const hash = safeURIDecode(url.hash);
+const attr = self ? 'to' : 'href';
+const target = self ? null : '_blank';
+</script>
+
+<style lang="scss" scoped>
+.ieqqeuvs {
+	word-break: break-all;
+
+	> .icon {
+		padding-left: 2px;
+		font-size: .9em;
+	}
+
+	> .self {
+		font-weight: bold;
+	}
+
+	> .schema {
+		opacity: 0.5;
+	}
+
+	> .hostname {
+		font-weight: bold;
+	}
+
+	> .pathname {
+		opacity: 0.8;
+	}
+
+	> .query {
+		opacity: 0.5;
+	}
+
+	> .hash {
+		font-style: italic;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/global/MkUserName.vue b/packages/frontend/src/components/global/MkUserName.vue
new file mode 100644
index 0000000000..090de3df30
--- /dev/null
+++ b/packages/frontend/src/components/global/MkUserName.vue
@@ -0,0 +1,15 @@
+<template>
+<Mfm :text="user.name || user.username" :plain="true" :nowrap="nowrap" :custom-emojis="user.emojis"/>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as misskey from 'misskey-js';
+
+const props = withDefaults(defineProps<{
+	user: misskey.entities.User;
+	nowrap?: boolean;
+}>(), {
+	nowrap: true,
+});
+</script>
diff --git a/packages/frontend/src/components/global/RouterView.vue b/packages/frontend/src/components/global/RouterView.vue
new file mode 100644
index 0000000000..e21a57471c
--- /dev/null
+++ b/packages/frontend/src/components/global/RouterView.vue
@@ -0,0 +1,61 @@
+<template>
+<KeepAlive :max="defaultStore.state.numberOfPageCache">
+	<Suspense>
+		<component :is="currentPageComponent" :key="key" v-bind="Object.fromEntries(currentPageProps)"/>
+
+		<template #fallback>
+			<MkLoading/>
+		</template>
+	</Suspense>
+</KeepAlive>
+</template>
+
+<script lang="ts" setup>
+import { inject, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, watch } from 'vue';
+import { Resolved, Router } from '@/nirax';
+import { defaultStore } from '@/store';
+
+const props = defineProps<{
+	router?: Router;
+}>();
+
+const router = props.router ?? inject('router');
+
+if (router == null) {
+	throw new Error('no router provided');
+}
+
+const currentDepth = inject('routerCurrentDepth', 0);
+provide('routerCurrentDepth', currentDepth + 1);
+
+function resolveNested(current: Resolved, d = 0): Resolved | null {
+	if (d === currentDepth) {
+		return current;
+	} else {
+		if (current.child) {
+			return resolveNested(current.child, d + 1);
+		} else {
+			return null;
+		}
+	}
+}
+
+const current = resolveNested(router.current)!;
+let currentPageComponent = $shallowRef(current.route.component);
+let currentPageProps = $ref(current.props);
+let key = $ref(current.route.path + JSON.stringify(Object.fromEntries(current.props)));
+
+function onChange({ resolved, key: newKey }) {
+	const current = resolveNested(resolved);
+	if (current == null) return;
+	currentPageComponent = current.route.component;
+	currentPageProps = current.props;
+	key = current.route.path + JSON.stringify(Object.fromEntries(current.props));
+}
+
+router.addListener('change', onChange);
+
+onBeforeUnmount(() => {
+	router.removeListener('change', onChange);
+});
+</script>
diff --git a/packages/frontend/src/components/global/i18n.ts b/packages/frontend/src/components/global/i18n.ts
new file mode 100644
index 0000000000..1fd293ba10
--- /dev/null
+++ b/packages/frontend/src/components/global/i18n.ts
@@ -0,0 +1,42 @@
+import { h, defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		src: {
+			type: String,
+			required: true,
+		},
+		tag: {
+			type: String,
+			required: false,
+			default: 'span',
+		},
+		textTag: {
+			type: String,
+			required: false,
+			default: null,
+		},
+	},
+	render() {
+		let str = this.src;
+		const parsed = [] as (string | { arg: string; })[];
+		while (true) {
+			const nextBracketOpen = str.indexOf('{');
+			const nextBracketClose = str.indexOf('}');
+
+			if (nextBracketOpen === -1) {
+				parsed.push(str);
+				break;
+			} else {
+				if (nextBracketOpen > 0) parsed.push(str.substr(0, nextBracketOpen));
+				parsed.push({
+					arg: str.substring(nextBracketOpen + 1, nextBracketClose),
+				});
+			}
+
+			str = str.substr(nextBracketClose + 1);
+		}
+
+		return h(this.tag, parsed.map(x => typeof x === 'string' ? (this.textTag ? h(this.textTag, x) : x) : this.$slots[x.arg]()));
+	},
+});
diff --git a/packages/frontend/src/components/index.ts b/packages/frontend/src/components/index.ts
new file mode 100644
index 0000000000..8639257003
--- /dev/null
+++ b/packages/frontend/src/components/index.ts
@@ -0,0 +1,61 @@
+import { App } from 'vue';
+
+import Mfm from './global/MkMisskeyFlavoredMarkdown.vue';
+import MkA from './global/MkA.vue';
+import MkAcct from './global/MkAcct.vue';
+import MkAvatar from './global/MkAvatar.vue';
+import MkEmoji from './global/MkEmoji.vue';
+import MkUserName from './global/MkUserName.vue';
+import MkEllipsis from './global/MkEllipsis.vue';
+import MkTime from './global/MkTime.vue';
+import MkUrl from './global/MkUrl.vue';
+import I18n from './global/i18n';
+import RouterView from './global/RouterView.vue';
+import MkLoading from './global/MkLoading.vue';
+import MkError from './global/MkError.vue';
+import MkAd from './global/MkAd.vue';
+import MkPageHeader from './global/MkPageHeader.vue';
+import MkSpacer from './global/MkSpacer.vue';
+import MkStickyContainer from './global/MkStickyContainer.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);
+	app.component('MkAvatar', MkAvatar);
+	app.component('MkEmoji', MkEmoji);
+	app.component('MkUserName', MkUserName);
+	app.component('MkEllipsis', MkEllipsis);
+	app.component('MkTime', MkTime);
+	app.component('MkUrl', MkUrl);
+	app.component('MkLoading', MkLoading);
+	app.component('MkError', MkError);
+	app.component('MkAd', MkAd);
+	app.component('MkPageHeader', MkPageHeader);
+	app.component('MkSpacer', MkSpacer);
+	app.component('MkStickyContainer', MkStickyContainer);
+}
+
+declare module '@vue/runtime-core' {
+	export interface GlobalComponents {
+		I18n: typeof I18n;
+		RouterView: typeof RouterView;
+		Mfm: typeof Mfm;
+		MkA: typeof MkA;
+		MkAcct: typeof MkAcct;
+		MkAvatar: typeof MkAvatar;
+		MkEmoji: typeof MkEmoji;
+		MkUserName: typeof MkUserName;
+		MkEllipsis: typeof MkEllipsis;
+		MkTime: typeof MkTime;
+		MkUrl: typeof MkUrl;
+		MkLoading: typeof MkLoading;
+		MkError: typeof MkError;
+		MkAd: typeof MkAd;
+		MkPageHeader: typeof MkPageHeader;
+		MkSpacer: typeof MkSpacer;
+		MkStickyContainer: typeof MkStickyContainer;
+	}
+}
diff --git a/packages/frontend/src/components/mfm.ts b/packages/frontend/src/components/mfm.ts
new file mode 100644
index 0000000000..5b5b1caae3
--- /dev/null
+++ b/packages/frontend/src/components/mfm.ts
@@ -0,0 +1,331 @@
+import { VNode, defineComponent, h } from 'vue';
+import * as mfm from 'mfm-js';
+import MkUrl from '@/components/global/MkUrl.vue';
+import MkLink from '@/components/MkLink.vue';
+import MkMention from '@/components/MkMention.vue';
+import MkEmoji from '@/components/global/MkEmoji.vue';
+import { concat } from '@/scripts/array';
+import MkFormula from '@/components/MkFormula.vue';
+import MkCode from '@/components/MkCode.vue';
+import MkGoogle from '@/components/MkGoogle.vue';
+import MkSparkle from '@/components/MkSparkle.vue';
+import MkA from '@/components/global/MkA.vue';
+import { host } from '@/config';
+import { MFM_TAGS } from '@/scripts/mfm-tags';
+
+export default defineComponent({
+	props: {
+		text: {
+			type: String,
+			required: true,
+		},
+		plain: {
+			type: Boolean,
+			default: false,
+		},
+		nowrap: {
+			type: Boolean,
+			default: false,
+		},
+		author: {
+			type: Object,
+			default: null,
+		},
+		i: {
+			type: Object,
+			default: null,
+		},
+		customEmojis: {
+			required: false,
+		},
+		isNote: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	render() {
+		if (this.text == null || this.text === '') return;
+
+		const ast = (this.plain ? mfm.parseSimple : mfm.parse)(this.text, { fnNameList: MFM_TAGS });
+
+		const validTime = (t: string | null | undefined) => {
+			if (t == null) return null;
+			return t.match(/^[0-9.]+s$/) ? t : null;
+		};
+
+		const genEl = (ast: mfm.MfmNode[]) => ast.map((token): VNode | string | (VNode | string)[] => {
+			switch (token.type) {
+				case 'text': {
+					const text = token.props.text.replace(/(\r\n|\n|\r)/g, '\n');
+
+					if (!this.plain) {
+						const res: (VNode | string)[] = [];
+						for (const t of text.split('\n')) {
+							res.push(h('br'));
+							res.push(t);
+						}
+						res.shift();
+						return res;
+					} else {
+						return [text.replace(/\n/g, ' ')];
+					}
+				}
+
+				case 'bold': {
+					return [h('b', genEl(token.children))];
+				}
+
+				case 'strike': {
+					return [h('del', genEl(token.children))];
+				}
+
+				case 'italic': {
+					return h('i', {
+						style: 'font-style: oblique;',
+					}, genEl(token.children));
+				}
+
+				case 'fn': {
+					// TODO: CSSを文字列で組み立てていくと token.props.args.~~~ 経由でCSSインジェクションできるのでよしなにやる
+					let style;
+					switch (token.props.name) {
+						case 'tada': {
+							const speed = validTime(token.props.args.speed) || '1s';
+							style = 'font-size: 150%;' + (this.$store.state.animatedMfm ? `animation: tada ${speed} linear infinite both;` : '');
+							break;
+						}
+						case 'jelly': {
+							const speed = validTime(token.props.args.speed) || '1s';
+							style = (this.$store.state.animatedMfm ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
+							break;
+						}
+						case 'twitch': {
+							const speed = validTime(token.props.args.speed) || '0.5s';
+							style = this.$store.state.animatedMfm ? `animation: mfm-twitch ${speed} ease infinite;` : '';
+							break;
+						}
+						case 'shake': {
+							const speed = validTime(token.props.args.speed) || '0.5s';
+							style = this.$store.state.animatedMfm ? `animation: mfm-shake ${speed} ease infinite;` : '';
+							break;
+						}
+						case 'spin': {
+							const direction =
+								token.props.args.left ? 'reverse' :
+								token.props.args.alternate ? 'alternate' :
+								'normal';
+							const anime =
+								token.props.args.x ? 'mfm-spinX' :
+								token.props.args.y ? 'mfm-spinY' :
+								'mfm-spin';
+							const speed = validTime(token.props.args.speed) || '1.5s';
+							style = this.$store.state.animatedMfm ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
+							break;
+						}
+						case 'jump': {
+							const speed = validTime(token.props.args.speed) || '0.75s';
+							style = this.$store.state.animatedMfm ? `animation: mfm-jump ${speed} linear infinite;` : '';
+							break;
+						}
+						case 'bounce': {
+							const speed = validTime(token.props.args.speed) || '0.75s';
+							style = this.$store.state.animatedMfm ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : '';
+							break;
+						}
+						case 'flip': {
+							const transform =
+								(token.props.args.h && token.props.args.v) ? 'scale(-1, -1)' :
+								token.props.args.v ? 'scaleY(-1)' :
+								'scaleX(-1)';
+							style = `transform: ${transform};`;
+							break;
+						}
+						case 'x2': {
+							return h('span', {
+								class: 'mfm-x2',
+							}, genEl(token.children));
+						}
+						case 'x3': {
+							return h('span', {
+								class: 'mfm-x3',
+							}, genEl(token.children));
+						}
+						case 'x4': {
+							return h('span', {
+								class: 'mfm-x4',
+							}, genEl(token.children));
+						}
+						case 'font': {
+							const family =
+								token.props.args.serif ? 'serif' :
+								token.props.args.monospace ? 'monospace' :
+								token.props.args.cursive ? 'cursive' :
+								token.props.args.fantasy ? 'fantasy' :
+								token.props.args.emoji ? 'emoji' :
+								token.props.args.math ? 'math' :
+								null;
+							if (family) style = `font-family: ${family};`;
+							break;
+						}
+						case 'blur': {
+							return h('span', {
+								class: '_mfm_blur_',
+							}, genEl(token.children));
+						}
+						case 'rainbow': {
+							const speed = validTime(token.props.args.speed) || '1s';
+							style = this.$store.state.animatedMfm ? `animation: mfm-rainbow ${speed} linear infinite;` : '';
+							break;
+						}
+						case 'sparkle': {
+							if (!this.$store.state.animatedMfm) {
+								return genEl(token.children);
+							}
+							return h(MkSparkle, {}, genEl(token.children));
+						}
+						case 'rotate': {
+							const degrees = parseInt(token.props.args.deg) || '90';
+							style = `transform: rotate(${degrees}deg); transform-origin: center center;`;
+							break;
+						}
+					}
+					if (style == null) {
+						return h('span', {}, ['$[', token.props.name, ' ', ...genEl(token.children), ']']);
+					} else {
+						return h('span', {
+							style: 'display: inline-block;' + style,
+						}, genEl(token.children));
+					}
+				}
+
+				case 'small': {
+					return [h('small', {
+						style: 'opacity: 0.7;',
+					}, genEl(token.children))];
+				}
+
+				case 'center': {
+					return [h('div', {
+						style: 'text-align:center;',
+					}, genEl(token.children))];
+				}
+
+				case 'url': {
+					return [h(MkUrl, {
+						key: Math.random(),
+						url: token.props.url,
+						rel: 'nofollow noopener',
+					})];
+				}
+
+				case 'link': {
+					return [h(MkLink, {
+						key: Math.random(),
+						url: token.props.url,
+						rel: 'nofollow noopener',
+					}, genEl(token.children))];
+				}
+
+				case 'mention': {
+					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,
+					})];
+				}
+
+				case 'hashtag': {
+					return [h(MkA, {
+						key: Math.random(),
+						to: this.isNote ? `/tags/${encodeURIComponent(token.props.hashtag)}` : `/explore/tags/${encodeURIComponent(token.props.hashtag)}`,
+						style: 'color:var(--hashtag);',
+					}, `#${token.props.hashtag}`)];
+				}
+
+				case 'blockCode': {
+					return [h(MkCode, {
+						key: Math.random(),
+						code: token.props.code,
+						lang: token.props.lang,
+					})];
+				}
+
+				case 'inlineCode': {
+					return [h(MkCode, {
+						key: Math.random(),
+						code: token.props.code,
+						inline: true,
+					})];
+				}
+
+				case 'quote': {
+					if (!this.nowrap) {
+						return [h('div', {
+							class: 'quote',
+						}, genEl(token.children))];
+					} else {
+						return [h('span', {
+							class: 'quote',
+						}, genEl(token.children))];
+					}
+				}
+
+				case 'emojiCode': {
+					return [h(MkEmoji, {
+						key: Math.random(),
+						emoji: `:${token.props.name}:`,
+						customEmojis: this.customEmojis,
+						normal: this.plain,
+					})];
+				}
+
+				case 'unicodeEmoji': {
+					return [h(MkEmoji, {
+						key: Math.random(),
+						emoji: token.props.emoji,
+						customEmojis: this.customEmojis,
+						normal: this.plain,
+					})];
+				}
+
+				case 'mathInline': {
+					return [h(MkFormula, {
+						key: Math.random(),
+						formula: token.props.formula,
+						block: false,
+					})];
+				}
+
+				case 'mathBlock': {
+					return [h(MkFormula, {
+						key: Math.random(),
+						formula: token.props.formula,
+						block: true,
+					})];
+				}
+
+				case 'search': {
+					return [h(MkGoogle, {
+						key: Math.random(),
+						q: token.props.query,
+					})];
+				}
+
+				case 'plain': {
+					return [h('span', genEl(token.children))];
+				}
+
+				default: {
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					console.error('unrecognized ast type:', (token as any).type);
+
+					return [];
+				}
+			}
+		}).flat(Infinity) as (VNode | string)[];
+
+		// Parse ast to DOM
+		return h('span', genEl(ast));
+	},
+});
diff --git a/packages/frontend/src/components/page/page.block.vue b/packages/frontend/src/components/page/page.block.vue
new file mode 100644
index 0000000000..f3e7764604
--- /dev/null
+++ b/packages/frontend/src/components/page/page.block.vue
@@ -0,0 +1,44 @@
+<template>
+<component :is="'x-' + block.type" :key="block.id" :block="block" :hpml="hpml" :h="h"/>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import XText from './page.text.vue';
+import XSection from './page.section.vue';
+import XImage from './page.image.vue';
+import XButton from './page.button.vue';
+import XNumberInput from './page.number-input.vue';
+import XTextInput from './page.text-input.vue';
+import XTextareaInput from './page.textarea-input.vue';
+import XSwitch from './page.switch.vue';
+import XIf from './page.if.vue';
+import XTextarea from './page.textarea.vue';
+import XPost from './page.post.vue';
+import XCounter from './page.counter.vue';
+import XRadioButton from './page.radio-button.vue';
+import XCanvas from './page.canvas.vue';
+import XNote from './page.note.vue';
+import { Hpml } from '@/scripts/hpml/evaluator';
+import { Block } from '@/scripts/hpml/block';
+
+export default defineComponent({
+	components: {
+		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton, XCanvas, XNote,
+	},
+	props: {
+		block: {
+			type: Object as PropType<Block>,
+			required: true,
+		},
+		hpml: {
+			type: Object as PropType<Hpml>,
+			required: true,
+		},
+		h: {
+			type: Number,
+			required: true,
+		},
+	},
+});
+</script>
diff --git a/packages/frontend/src/components/page/page.button.vue b/packages/frontend/src/components/page/page.button.vue
new file mode 100644
index 0000000000..83931021d8
--- /dev/null
+++ b/packages/frontend/src/components/page/page.button.vue
@@ -0,0 +1,66 @@
+<template>
+<div>
+	<MkButton class="kudkigyw" :primary="block.primary" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, unref } from 'vue';
+import MkButton from '../MkButton.vue';
+import * as os from '@/os';
+import { ButtonBlock } from '@/scripts/hpml/block';
+import { Hpml } from '@/scripts/hpml/evaluator';
+
+export default defineComponent({
+	components: {
+		MkButton,
+	},
+	props: {
+		block: {
+			type: Object as PropType<ButtonBlock>,
+			required: true,
+		},
+		hpml: {
+			type: Object as PropType<Hpml>,
+			required: true,
+		},
+	},
+	methods: {
+		click() {
+			if (this.block.action === 'dialog') {
+				this.hpml.eval();
+				os.alert({
+					text: this.hpml.interpolate(this.block.content),
+				});
+			} else if (this.block.action === 'resetRandom') {
+				this.hpml.updateRandomSeed(Math.random());
+				this.hpml.eval();
+			} else if (this.block.action === 'pushEvent') {
+				os.api('page-push', {
+					pageId: this.hpml.page.id,
+					event: this.block.event,
+					...(this.block.var ? {
+						var: unref(this.hpml.vars)[this.block.var],
+					} : {}),
+				});
+
+				os.alert({
+					type: 'success',
+					text: this.hpml.interpolate(this.block.message),
+				});
+			} else if (this.block.action === 'callAiScript') {
+				this.hpml.callAiScript(this.block.fn);
+			}
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.kudkigyw {
+	display: inline-block;
+	min-width: 200px;
+	max-width: 450px;
+	margin: 8px 0;
+}
+</style>
diff --git a/packages/frontend/src/components/page/page.canvas.vue b/packages/frontend/src/components/page/page.canvas.vue
new file mode 100644
index 0000000000..80f6c8339c
--- /dev/null
+++ b/packages/frontend/src/components/page/page.canvas.vue
@@ -0,0 +1,49 @@
+<template>
+<div class="ysrxegms">
+	<canvas ref="canvas" :width="block.width" :height="block.height"/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
+import * as os from '@/os';
+import { CanvasBlock } from '@/scripts/hpml/block';
+import { Hpml } from '@/scripts/hpml/evaluator';
+
+export default defineComponent({
+	props: {
+		block: {
+			type: Object as PropType<CanvasBlock>,
+			required: true,
+		},
+		hpml: {
+			type: Object as PropType<Hpml>,
+			required: true,
+		},
+	},
+	setup(props, ctx) {
+		const canvas: Ref<any> = ref(null);
+
+		onMounted(() => {
+			props.hpml.registerCanvas(props.block.name, canvas.value);
+		});
+
+		return {
+			canvas,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.ysrxegms {
+	display: inline-block;
+	vertical-align: bottom;
+	overflow: auto;
+	max-width: 100%;
+
+	> canvas {
+		display: block;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/page/page.counter.vue b/packages/frontend/src/components/page/page.counter.vue
new file mode 100644
index 0000000000..a9e1f41a54
--- /dev/null
+++ b/packages/frontend/src/components/page/page.counter.vue
@@ -0,0 +1,52 @@
+<template>
+<div>
+	<MkButton class="llumlmnx" @click="click()">{{ hpml.interpolate(block.text) }}</MkButton>
+</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+import MkButton from '../MkButton.vue';
+import * as os from '@/os';
+import { CounterVarBlock } from '@/scripts/hpml/block';
+import { Hpml } from '@/scripts/hpml/evaluator';
+
+export default defineComponent({
+	components: {
+		MkButton,
+	},
+	props: {
+		block: {
+			type: Object as PropType<CounterVarBlock>,
+			required: true,
+		},
+		hpml: {
+			type: Object as PropType<Hpml>,
+			required: true,
+		},
+	},
+	setup(props, ctx) {
+		const value = computed(() => {
+			return props.hpml.vars.value[props.block.name];
+		});
+
+		function click() {
+			props.hpml.updatePageVar(props.block.name, value.value + (props.block.inc || 1));
+			props.hpml.eval();
+		}
+
+		return {
+			click,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.llumlmnx {
+	display: inline-block;
+	min-width: 300px;
+	max-width: 450px;
+	margin: 8px 0;
+}
+</style>
diff --git a/packages/frontend/src/components/page/page.if.vue b/packages/frontend/src/components/page/page.if.vue
new file mode 100644
index 0000000000..372a15f0c6
--- /dev/null
+++ b/packages/frontend/src/components/page/page.if.vue
@@ -0,0 +1,31 @@
+<template>
+<div v-show="hpml.vars.value[block.var]">
+	<XBlock v-for="child in block.children" :key="child.id" :block="child" :hpml="hpml" :h="h"/>
+</div>
+</template>
+
+<script lang="ts">
+import { IfBlock } from '@/scripts/hpml/block';
+import { Hpml } from '@/scripts/hpml/evaluator';
+import { defineComponent, defineAsyncComponent, PropType } from 'vue';
+
+export default defineComponent({
+	components: {
+		XBlock: defineAsyncComponent(() => import('./page.block.vue')),
+	},
+	props: {
+		block: {
+			type: Object as PropType<IfBlock>,
+			required: true,
+		},
+		hpml: {
+			type: Object as PropType<Hpml>,
+			required: true,
+		},
+		h: {
+			type: Number,
+			required: true,
+		},
+	},
+});
+</script>
diff --git a/packages/frontend/src/components/page/page.image.vue b/packages/frontend/src/components/page/page.image.vue
new file mode 100644
index 0000000000..8ba70c5855
--- /dev/null
+++ b/packages/frontend/src/components/page/page.image.vue
@@ -0,0 +1,28 @@
+<template>
+<div class="lzyxtsnt">
+	<ImgWithBlurhash v-if="image" :hash="image.blurhash" :src="image.url" :alt="image.comment" :title="image.comment" :cover="false"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent, PropType } from 'vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import * as os from '@/os';
+import { ImageBlock } from '@/scripts/hpml/block';
+import { Hpml } from '@/scripts/hpml/evaluator';
+
+const props = defineProps<{
+	block: PropType<ImageBlock>,
+	hpml: PropType<Hpml>,
+}>();
+
+const image = props.hpml.page.attachedFiles.find(x => x.id === props.block.fileId);
+</script>
+
+<style lang="scss" scoped>
+.lzyxtsnt {
+	> img {
+		max-width: 100%;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/page/page.note.vue b/packages/frontend/src/components/page/page.note.vue
new file mode 100644
index 0000000000..7d5c484a1b
--- /dev/null
+++ b/packages/frontend/src/components/page/page.note.vue
@@ -0,0 +1,47 @@
+<template>
+<div class="voxdxuby">
+	<XNote v-if="note && !block.detailed" :key="note.id + ':normal'" v-model:note="note"/>
+	<XNoteDetailed v-if="note && block.detailed" :key="note.id + ':detail'" v-model:note="note"/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, PropType, Ref, ref } from 'vue';
+import XNote from '@/components/MkNote.vue';
+import XNoteDetailed from '@/components/MkNoteDetailed.vue';
+import * as os from '@/os';
+import { NoteBlock } from '@/scripts/hpml/block';
+
+export default defineComponent({
+	components: {
+		XNote,
+		XNoteDetailed,
+	},
+	props: {
+		block: {
+			type: Object as PropType<NoteBlock>,
+			required: true,
+		},
+	},
+	setup(props, ctx) {
+		const note: Ref<Record<string, any> | null> = ref(null);
+
+		onMounted(() => {
+			os.api('notes/show', { noteId: props.block.note })
+			.then(result => {
+				note.value = result;
+			});
+		});
+
+		return {
+			note,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.voxdxuby {
+	margin: 1em 0;
+}
+</style>
diff --git a/packages/frontend/src/components/page/page.number-input.vue b/packages/frontend/src/components/page/page.number-input.vue
new file mode 100644
index 0000000000..50cf6d0770
--- /dev/null
+++ b/packages/frontend/src/components/page/page.number-input.vue
@@ -0,0 +1,55 @@
+<template>
+<div>
+	<MkInput class="kudkigyw" :model-value="value" type="number" @update:model-value="updateValue($event)">
+		<template #label>{{ hpml.interpolate(block.text) }}</template>
+	</MkInput>
+</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+import MkInput from '../form/input.vue';
+import * as os from '@/os';
+import { Hpml } from '@/scripts/hpml/evaluator';
+import { NumberInputVarBlock } from '@/scripts/hpml/block';
+
+export default defineComponent({
+	components: {
+		MkInput,
+	},
+	props: {
+		block: {
+			type: Object as PropType<NumberInputVarBlock>,
+			required: true,
+		},
+		hpml: {
+			type: Object as PropType<Hpml>,
+			required: true,
+		},
+	},
+	setup(props, ctx) {
+		const value = computed(() => {
+			return props.hpml.vars.value[props.block.name];
+		});
+
+		function updateValue(newValue) {
+			props.hpml.updatePageVar(props.block.name, newValue);
+			props.hpml.eval();
+		}
+
+		return {
+			value,
+			updateValue,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.kudkigyw {
+	display: inline-block;
+	min-width: 300px;
+	max-width: 450px;
+	margin: 8px 0;
+}
+</style>
diff --git a/packages/frontend/src/components/page/page.post.vue b/packages/frontend/src/components/page/page.post.vue
new file mode 100644
index 0000000000..0ef50d65cd
--- /dev/null
+++ b/packages/frontend/src/components/page/page.post.vue
@@ -0,0 +1,109 @@
+<template>
+<div class="ngbfujlo">
+	<MkTextarea :model-value="text" readonly style="margin: 0;"></MkTextarea>
+	<MkButton class="button" primary :disabled="posting || posted" @click="post()">
+		<i v-if="posted" class="ti ti-check"></i>
+		<i v-else class="ti ti-send"></i>
+	</MkButton>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import MkTextarea from '../form/textarea.vue';
+import MkButton from '../MkButton.vue';
+import { apiUrl } from '@/config';
+import * as os from '@/os';
+import { PostBlock } from '@/scripts/hpml/block';
+import { Hpml } from '@/scripts/hpml/evaluator';
+
+export default defineComponent({
+	components: {
+		MkTextarea,
+		MkButton,
+	},
+	props: {
+		block: {
+			type: Object as PropType<PostBlock>,
+			required: true,
+		},
+		hpml: {
+			type: Object as PropType<Hpml>,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			text: this.hpml.interpolate(this.block.text),
+			posted: false,
+			posting: false,
+		};
+	},
+	watch: {
+		'hpml.vars': {
+			handler() {
+				this.text = this.hpml.interpolate(this.block.text);
+			},
+			deep: true,
+		},
+	},
+	methods: {
+		upload() {
+			const promise = new Promise((ok) => {
+				const canvas = this.hpml.canvases[this.block.canvasId];
+				canvas.toBlob(blob => {
+					const formData = new FormData();
+					formData.append('file', blob);
+					formData.append('i', this.$i.token);
+					if (this.$store.state.uploadFolder) {
+						formData.append('folderId', this.$store.state.uploadFolder);
+					}
+
+					window.fetch(apiUrl + '/drive/files/create', {
+						method: 'POST',
+						body: formData,
+					})
+						.then(response => response.json())
+						.then(f => {
+							ok(f);
+						});
+				});
+			});
+			os.promiseDialog(promise);
+			return promise;
+		},
+		async post() {
+			this.posting = true;
+			const file = this.block.attachCanvasImage ? await this.upload() : null;
+			os.apiWithDialog('notes/create', {
+				text: this.text === '' ? null : this.text,
+				fileIds: file ? [file.id] : undefined,
+			}).then(() => {
+				this.posted = true;
+			});
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.ngbfujlo {
+	position: relative;
+	padding: 32px;
+	border-radius: 6px;
+	box-shadow: 0 2px 8px var(--shadow);
+	z-index: 1;
+
+	> .button {
+		margin-top: 32px;
+	}
+
+	@media (max-width: 600px) {
+		padding: 16px;
+
+		> .button {
+			margin-top: 16px;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/page/page.radio-button.vue b/packages/frontend/src/components/page/page.radio-button.vue
new file mode 100644
index 0000000000..b4d9e01a54
--- /dev/null
+++ b/packages/frontend/src/components/page/page.radio-button.vue
@@ -0,0 +1,45 @@
+<template>
+<div>
+	<div>{{ hpml.interpolate(block.title) }}</div>
+	<MkRadio v-for="item in block.values" :key="item" :modelValue="value" :value="item" @update:model-value="updateValue($event)">{{ item }}</MkRadio>
+</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+import MkRadio from '../form/radio.vue';
+import * as os from '@/os';
+import { Hpml } from '@/scripts/hpml/evaluator';
+import { RadioButtonVarBlock } from '@/scripts/hpml/block';
+
+export default defineComponent({
+	components: {
+		MkRadio,
+	},
+	props: {
+		block: {
+			type: Object as PropType<RadioButtonVarBlock>,
+			required: true,
+		},
+		hpml: {
+			type: Object as PropType<Hpml>,
+			required: true,
+		},
+	},
+	setup(props, ctx) {
+		const value = computed(() => {
+			return props.hpml.vars.value[props.block.name];
+		});
+
+		function updateValue(newValue: string) {
+			props.hpml.updatePageVar(props.block.name, newValue);
+			props.hpml.eval();
+		}
+
+		return {
+			value,
+			updateValue,
+		};
+	},
+});
+</script>
diff --git a/packages/frontend/src/components/page/page.section.vue b/packages/frontend/src/components/page/page.section.vue
new file mode 100644
index 0000000000..630c1f5179
--- /dev/null
+++ b/packages/frontend/src/components/page/page.section.vue
@@ -0,0 +1,60 @@
+<template>
+<section class="sdgxphyu">
+	<component :is="'h' + h">{{ block.title }}</component>
+
+	<div class="children">
+		<XBlock v-for="child in block.children" :key="child.id" :block="child" :hpml="hpml" :h="h + 1"/>
+	</div>
+</section>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent, PropType } from 'vue';
+import * as os from '@/os';
+import { SectionBlock } from '@/scripts/hpml/block';
+import { Hpml } from '@/scripts/hpml/evaluator';
+
+export default defineComponent({
+	components: {
+		XBlock: defineAsyncComponent(() => import('./page.block.vue')),
+	},
+	props: {
+		block: {
+			type: Object as PropType<SectionBlock>,
+			required: true,
+		},
+		hpml: {
+			type: Object as PropType<Hpml>,
+			required: true,
+		},
+		h: {
+			required: true,
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.sdgxphyu {
+	margin: 1.5em 0;
+
+	> h2 {
+		font-size: 1.35em;
+		margin: 0 0 0.5em 0;
+	}
+
+	> h3 {
+		font-size: 1em;
+		margin: 0 0 0.5em 0;
+	}
+
+	> h4 {
+		font-size: 1em;
+		margin: 0 0 0.5em 0;
+	}
+
+	> .children {
+		//padding 16px
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/page/page.switch.vue b/packages/frontend/src/components/page/page.switch.vue
new file mode 100644
index 0000000000..64dc4ff8aa
--- /dev/null
+++ b/packages/frontend/src/components/page/page.switch.vue
@@ -0,0 +1,55 @@
+<template>
+<div class="hkcxmtwj">
+	<MkSwitch :model-value="value" @update:model-value="updateValue($event)">{{ hpml.interpolate(block.text) }}</MkSwitch>
+</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+import MkSwitch from '../form/switch.vue';
+import * as os from '@/os';
+import { Hpml } from '@/scripts/hpml/evaluator';
+import { SwitchVarBlock } from '@/scripts/hpml/block';
+
+export default defineComponent({
+	components: {
+		MkSwitch,
+	},
+	props: {
+		block: {
+			type: Object as PropType<SwitchVarBlock>,
+			required: true,
+		},
+		hpml: {
+			type: Object as PropType<Hpml>,
+			required: true,
+		},
+	},
+	setup(props, ctx) {
+		const value = computed(() => {
+			return props.hpml.vars.value[props.block.name];
+		});
+
+		function updateValue(newValue: boolean) {
+			props.hpml.updatePageVar(props.block.name, newValue);
+			props.hpml.eval();
+		}
+
+		return {
+			value,
+			updateValue,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.hkcxmtwj {
+	display: inline-block;
+	margin: 16px auto;
+
+	& + .hkcxmtwj {
+		margin-left: 16px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/page/page.text-input.vue b/packages/frontend/src/components/page/page.text-input.vue
new file mode 100644
index 0000000000..840649ece6
--- /dev/null
+++ b/packages/frontend/src/components/page/page.text-input.vue
@@ -0,0 +1,55 @@
+<template>
+<div>
+	<MkInput class="kudkigyw" :model-value="value" type="text" @update:model-value="updateValue($event)">
+		<template #label>{{ hpml.interpolate(block.text) }}</template>
+	</MkInput>
+</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+import MkInput from '../form/input.vue';
+import * as os from '@/os';
+import { Hpml } from '@/scripts/hpml/evaluator';
+import { TextInputVarBlock } from '@/scripts/hpml/block';
+
+export default defineComponent({
+	components: {
+		MkInput,
+	},
+	props: {
+		block: {
+			type: Object as PropType<TextInputVarBlock>,
+			required: true,
+		},
+		hpml: {
+			type: Object as PropType<Hpml>,
+			required: true,
+		},
+	},
+	setup(props, ctx) {
+		const value = computed(() => {
+			return props.hpml.vars.value[props.block.name];
+		});
+
+		function updateValue(newValue) {
+			props.hpml.updatePageVar(props.block.name, newValue);
+			props.hpml.eval();
+		}
+
+		return {
+			value,
+			updateValue,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.kudkigyw {
+	display: inline-block;
+	min-width: 300px;
+	max-width: 450px;
+	margin: 8px 0;
+}
+</style>
diff --git a/packages/frontend/src/components/page/page.text.vue b/packages/frontend/src/components/page/page.text.vue
new file mode 100644
index 0000000000..689c484521
--- /dev/null
+++ b/packages/frontend/src/components/page/page.text.vue
@@ -0,0 +1,68 @@
+<template>
+<div class="mrdgzndn">
+	<Mfm :key="text" :text="text" :is-note="false" :i="$i"/>
+	<MkUrlPreview v-for="url in urls" :key="url" :url="url" class="url"/>
+</div>
+</template>
+
+<script lang="ts">
+import { TextBlock } from '@/scripts/hpml/block';
+import { Hpml } from '@/scripts/hpml/evaluator';
+import { defineAsyncComponent, defineComponent, PropType } from 'vue';
+import * as mfm from 'mfm-js';
+import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
+
+export default defineComponent({
+	components: {
+		MkUrlPreview: defineAsyncComponent(() => import('@/components/MkUrlPreview.vue')),
+	},
+	props: {
+		block: {
+			type: Object as PropType<TextBlock>,
+			required: true,
+		},
+		hpml: {
+			type: Object as PropType<Hpml>,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			text: this.hpml.interpolate(this.block.text),
+		};
+	},
+	computed: {
+		urls(): string[] {
+			if (this.text) {
+				return extractUrlFromMfm(mfm.parse(this.text));
+			} else {
+				return [];
+			}
+		},
+	},
+	watch: {
+		'hpml.vars': {
+			handler() {
+				this.text = this.hpml.interpolate(this.block.text);
+			},
+			deep: true,
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.mrdgzndn {
+	&:not(:first-child) {
+		margin-top: 0.5em;
+	}
+
+	&:not(:last-child) {
+		margin-bottom: 0.5em;
+	}
+
+	> .url {
+		margin: 0.5em 0;
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/page/page.textarea-input.vue b/packages/frontend/src/components/page/page.textarea-input.vue
new file mode 100644
index 0000000000..507e1bd97b
--- /dev/null
+++ b/packages/frontend/src/components/page/page.textarea-input.vue
@@ -0,0 +1,47 @@
+<template>
+<div>
+	<MkTextarea :model-value="value" @update:model-value="updateValue($event)">
+		<template #label>{{ hpml.interpolate(block.text) }}</template>
+	</MkTextarea>
+</div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+import MkTextarea from '../form/textarea.vue';
+import * as os from '@/os';
+import { Hpml } from '@/scripts/hpml/evaluator';
+import { HpmlTextInput } from '@/scripts/hpml';
+import { TextInputVarBlock } from '@/scripts/hpml/block';
+
+export default defineComponent({
+	components: {
+		MkTextarea,
+	},
+	props: {
+		block: {
+			type: Object as PropType<TextInputVarBlock>,
+			required: true,
+		},
+		hpml: {
+			type: Object as PropType<Hpml>,
+			required: true,
+		},
+	},
+	setup(props, ctx) {
+		const value = computed(() => {
+			return props.hpml.vars.value[props.block.name];
+		});
+
+		function updateValue(newValue) {
+			props.hpml.updatePageVar(props.block.name, newValue);
+			props.hpml.eval();
+		}
+
+		return {
+			value,
+			updateValue,
+		};
+	},
+});
+</script>
diff --git a/packages/frontend/src/components/page/page.textarea.vue b/packages/frontend/src/components/page/page.textarea.vue
new file mode 100644
index 0000000000..f809925081
--- /dev/null
+++ b/packages/frontend/src/components/page/page.textarea.vue
@@ -0,0 +1,39 @@
+<template>
+<MkTextarea :model-value="text" readonly></MkTextarea>
+</template>
+
+<script lang="ts">
+import { TextBlock } from '@/scripts/hpml/block';
+import { Hpml } from '@/scripts/hpml/evaluator';
+import { defineComponent, PropType } from 'vue';
+import MkTextarea from '../form/textarea.vue';
+
+export default defineComponent({
+	components: {
+		MkTextarea,
+	},
+	props: {
+		block: {
+			type: Object as PropType<TextBlock>,
+			required: true,
+		},
+		hpml: {
+			type: Object as PropType<Hpml>,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			text: this.hpml.interpolate(this.block.text),
+		};
+	},
+	watch: {
+		'hpml.vars': {
+			handler() {
+				this.text = this.hpml.interpolate(this.block.text);
+			},
+			deep: true,
+		},
+	},
+});
+</script>
diff --git a/packages/frontend/src/components/page/page.vue b/packages/frontend/src/components/page/page.vue
new file mode 100644
index 0000000000..b5cb73c009
--- /dev/null
+++ b/packages/frontend/src/components/page/page.vue
@@ -0,0 +1,85 @@
+<template>
+<div v-if="hpml" class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }">
+	<XBlock v-for="child in page.content" :key="child.id" :block="child" :hpml="hpml" :h="2"/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, nextTick, onUnmounted, PropType } from 'vue';
+import { parse } from '@syuilo/aiscript';
+import XBlock from './page.block.vue';
+import { Hpml } from '@/scripts/hpml/evaluator';
+import { url } from '@/config';
+import { $i } from '@/account';
+import { defaultStore } from '@/store';
+
+export default defineComponent({
+	components: {
+		XBlock,
+	},
+	props: {
+		page: {
+			type: Object as PropType<Record<string, any>>,
+			required: true,
+		},
+	},
+	setup(props, ctx) {
+		const hpml = new Hpml(props.page, {
+			randomSeed: Math.random(),
+			visitor: $i,
+			url: url,
+			enableAiScript: !defaultStore.state.disablePagesScript,
+		});
+
+		onMounted(() => {
+			nextTick(() => {
+				if (props.page.script && hpml.aiscript) {
+					let ast;
+					try {
+						ast = parse(props.page.script);
+					} catch (err) {
+						console.error(err);
+						/*os.alert({
+							type: 'error',
+							text: 'Syntax error :('
+						});*/
+						return;
+					}
+					hpml.aiscript.exec(ast).then(() => {
+						hpml.eval();
+					}).catch(err => {
+						console.error(err);
+						/*os.alert({
+							type: 'error',
+							text: err
+						});*/
+					});
+				} else {
+					hpml.eval();
+				}
+			});
+			onUnmounted(() => {
+				if (hpml.aiscript) hpml.aiscript.abort();
+			});
+		});
+
+		return {
+			hpml,
+		};
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.iroscrza {
+	&.serif {
+		> div {
+			font-family: serif;
+		}
+	}
+
+	&.center {
+		text-align: center;
+	}
+}
+</style>
diff --git a/packages/frontend/src/config.ts b/packages/frontend/src/config.ts
new file mode 100644
index 0000000000..f2022b0f02
--- /dev/null
+++ b/packages/frontend/src/config.ts
@@ -0,0 +1,15 @@
+const address = new URL(location.href);
+const siteName = (document.querySelector('meta[property="og:site_name"]') as HTMLMetaElement)?.content;
+
+export const host = address.host;
+export const hostname = address.hostname;
+export const url = address.origin;
+export const apiUrl = url + '/api';
+export const wsUrl = url.replace('http://', 'ws://').replace('https://', 'wss://') + '/streaming';
+export const lang = localStorage.getItem('lang');
+export const langs = _LANGS_;
+export const locale = JSON.parse(localStorage.getItem('locale'));
+export const version = _VERSION_;
+export const instanceName = siteName === 'Misskey' ? host : siteName;
+export const ui = localStorage.getItem('ui');
+export const debug = localStorage.getItem('debug') === 'true';
diff --git a/packages/frontend/src/const.ts b/packages/frontend/src/const.ts
new file mode 100644
index 0000000000..77366cf07b
--- /dev/null
+++ b/packages/frontend/src/const.ts
@@ -0,0 +1,45 @@
+// ブラウザで直接表示することを許可するファイルの種類のリスト
+// ここに含まれないものは application/octet-stream としてレスポンスされる
+// SVGはXSSを生むので許可しない
+export const FILE_TYPE_BROWSERSAFE = [
+	// Images
+	'image/png',
+	'image/gif',
+	'image/jpeg',
+	'image/webp',
+	'image/avif',
+	'image/apng',
+	'image/bmp',
+	'image/tiff',
+	'image/x-icon',
+
+	// OggS
+	'audio/opus',
+	'video/ogg',
+	'audio/ogg',
+	'application/ogg',
+
+	// ISO/IEC base media file format
+	'video/quicktime',
+	'video/mp4',
+	'audio/mp4',
+	'video/x-m4v',
+	'audio/x-m4a',
+	'video/3gpp',
+	'video/3gpp2',
+
+	'video/mpeg',
+	'audio/mpeg',
+
+	'video/webm',
+	'audio/webm',
+
+	'audio/aac',
+	'audio/x-flac',
+	'audio/vnd.wave',
+];
+/*
+https://github.com/sindresorhus/file-type/blob/main/supported.js
+https://github.com/sindresorhus/file-type/blob/main/core.js
+https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Containers
+*/
diff --git a/packages/frontend/src/directives/adaptive-border.ts b/packages/frontend/src/directives/adaptive-border.ts
new file mode 100644
index 0000000000..619c9f0b6d
--- /dev/null
+++ b/packages/frontend/src/directives/adaptive-border.ts
@@ -0,0 +1,24 @@
+import { Directive } from 'vue';
+
+export default {
+	mounted(src, binding, vn) {
+		const getBgColor = (el: HTMLElement) => {
+			const style = window.getComputedStyle(el);
+			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
+				return style.backgroundColor;
+			} else {
+				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
+			}
+		};
+	
+		const parentBg = getBgColor(src.parentElement);
+
+		const myBg = window.getComputedStyle(src).backgroundColor;
+
+		if (parentBg === myBg) {
+			src.style.borderColor = 'var(--divider)';
+		} else {
+			src.style.borderColor = myBg;
+		}
+	},
+} as Directive;
diff --git a/packages/frontend/src/directives/anim.ts b/packages/frontend/src/directives/anim.ts
new file mode 100644
index 0000000000..04e1c6a404
--- /dev/null
+++ b/packages/frontend/src/directives/anim.ts
@@ -0,0 +1,18 @@
+import { Directive } from 'vue';
+
+export default {
+	beforeMount(src, binding, vn) {
+		src.style.opacity = '0';
+		src.style.transform = 'scale(0.9)';
+		// ページネーションと相性が悪いので
+		//if (typeof binding.value === 'number') src.style.transitionDelay = `${binding.value * 30}ms`;
+		src.classList.add('_zoom');
+	},
+
+	mounted(src, binding, vn) {
+		window.setTimeout(() => {
+			src.style.opacity = '1';
+			src.style.transform = 'none';
+		}, 1);
+	},
+} as Directive;
diff --git a/packages/frontend/src/directives/appear.ts b/packages/frontend/src/directives/appear.ts
new file mode 100644
index 0000000000..7fa43fc34a
--- /dev/null
+++ b/packages/frontend/src/directives/appear.ts
@@ -0,0 +1,22 @@
+import { Directive } from 'vue';
+
+export default {
+	mounted(src, binding, vn) {
+		const fn = binding.value;
+		if (fn == null) return;
+
+		const observer = new IntersectionObserver(entries => {
+			if (entries.some(entry => entry.isIntersecting)) {
+				fn();
+			}
+		});
+
+		observer.observe(src);
+
+		src._observer_ = observer;
+	},
+
+	unmounted(src, binding, vn) {
+		if (src._observer_) src._observer_.disconnect();
+	},
+} as Directive;
diff --git a/packages/frontend/src/directives/click-anime.ts b/packages/frontend/src/directives/click-anime.ts
new file mode 100644
index 0000000000..e2f514b7ca
--- /dev/null
+++ b/packages/frontend/src/directives/click-anime.ts
@@ -0,0 +1,31 @@
+import { Directive } from 'vue';
+import { defaultStore } from '@/store';
+
+export default {
+	mounted(el, binding, vn) {
+		/*
+		if (!defaultStore.state.animation) return;
+
+		el.classList.add('_anime_bounce_standBy');
+
+		el.addEventListener('mousedown', () => {
+			el.classList.add('_anime_bounce_standBy');
+			el.classList.add('_anime_bounce_ready');
+
+			el.addEventListener('mouseleave', () => {
+				el.classList.remove('_anime_bounce_ready');
+			});
+		});
+
+		el.addEventListener('click', () => {
+			el.classList.add('_anime_bounce');
+		});
+
+		el.addEventListener('animationend', () => {
+			el.classList.remove('_anime_bounce_ready');
+			el.classList.remove('_anime_bounce');
+			el.classList.add('_anime_bounce_standBy');
+		});
+		*/
+	},
+} as Directive;
diff --git a/packages/frontend/src/directives/follow-append.ts b/packages/frontend/src/directives/follow-append.ts
new file mode 100644
index 0000000000..62e0ac3b94
--- /dev/null
+++ b/packages/frontend/src/directives/follow-append.ts
@@ -0,0 +1,35 @@
+import { Directive } from 'vue';
+import { getScrollContainer, getScrollPosition } from '@/scripts/scroll';
+
+export default {
+	mounted(src, binding, vn) {
+		if (binding.value === false) return;
+
+		let isBottom = true;
+
+		const container = getScrollContainer(src)!;
+		container.addEventListener('scroll', () => {
+			const pos = getScrollPosition(container);
+			const viewHeight = container.clientHeight;
+			const height = container.scrollHeight;
+			isBottom = (pos + viewHeight > height - 32);
+		}, { passive: true });
+		container.scrollTop = container.scrollHeight;
+
+		const ro = new ResizeObserver((entries, observer) => {
+			if (isBottom) {
+				const height = container.scrollHeight;
+				container.scrollTop = height;
+			}
+		});
+
+		ro.observe(src);
+
+		// TODO: 新たにプロパティを作るのをやめMapを使う
+		src._ro_ = ro;
+	},
+
+	unmounted(src, binding, vn) {
+		if (src._ro_) src._ro_.unobserve(src);
+	},
+} as Directive;
diff --git a/packages/frontend/src/directives/get-size.ts b/packages/frontend/src/directives/get-size.ts
new file mode 100644
index 0000000000..ff3bdd78ac
--- /dev/null
+++ b/packages/frontend/src/directives/get-size.ts
@@ -0,0 +1,54 @@
+import { Directive } from 'vue';
+
+const mountings = new Map<Element, {
+	resize: ResizeObserver;
+	intersection?: IntersectionObserver;
+	fn: (w: number, h: number) => void;
+}>();
+
+function calc(src: Element) {
+	const info = mountings.get(src);
+	const height = src.clientHeight;
+	const width = src.clientWidth;
+
+	if (!info) return;
+
+	// アクティベート前などでsrcが描画されていない場合
+	if (!height) {
+		// IntersectionObserverで表示検出する
+		if (!info.intersection) {
+			info.intersection = new IntersectionObserver(entries => {
+				if (entries.some(entry => entry.isIntersecting)) calc(src);
+			});
+		}
+		info.intersection.observe(src);
+		return;
+	}
+	if (info.intersection) {
+		info.intersection.disconnect();
+		delete info.intersection;
+	}
+
+	info.fn(width, height);
+}
+
+export default {
+	mounted(src, binding, vn) {
+		const resize = new ResizeObserver((entries, observer) => {
+			calc(src);
+		});
+		resize.observe(src);
+
+		mountings.set(src, { resize, fn: binding.value });
+		calc(src);
+	},
+
+	unmounted(src, binding, vn) {
+		binding.value(0, 0);
+		const info = mountings.get(src);
+		if (!info) return;
+		info.resize.disconnect();
+		if (info.intersection) info.intersection.disconnect();
+		mountings.delete(src);
+	},
+} as Directive<Element, (w: number, h: number) => void>;
diff --git a/packages/frontend/src/directives/hotkey.ts b/packages/frontend/src/directives/hotkey.ts
new file mode 100644
index 0000000000..dfc5f646a4
--- /dev/null
+++ b/packages/frontend/src/directives/hotkey.ts
@@ -0,0 +1,24 @@
+import { Directive } from 'vue';
+import { makeHotkey } from '../scripts/hotkey';
+
+export default {
+	mounted(el, binding) {
+		el._hotkey_global = binding.modifiers.global === true;
+
+		el._keyHandler = makeHotkey(binding.value);
+
+		if (el._hotkey_global) {
+			document.addEventListener('keydown', el._keyHandler);
+		} else {
+			el.addEventListener('keydown', el._keyHandler);
+		}
+	},
+
+	unmounted(el) {
+		if (el._hotkey_global) {
+			document.removeEventListener('keydown', el._keyHandler);
+		} else {
+			el.removeEventListener('keydown', el._keyHandler);
+		}
+	},
+} as Directive;
diff --git a/packages/frontend/src/directives/index.ts b/packages/frontend/src/directives/index.ts
new file mode 100644
index 0000000000..401a917cba
--- /dev/null
+++ b/packages/frontend/src/directives/index.ts
@@ -0,0 +1,28 @@
+import { App } from 'vue';
+
+import userPreview from './user-preview';
+import size from './size';
+import getSize from './get-size';
+import ripple from './ripple';
+import tooltip from './tooltip';
+import hotkey from './hotkey';
+import appear from './appear';
+import anim from './anim';
+import clickAnime from './click-anime';
+import panel from './panel';
+import adaptiveBorder from './adaptive-border';
+
+export default function(app: App) {
+	app.directive('userPreview', userPreview);
+	app.directive('user-preview', userPreview);
+	app.directive('size', size);
+	app.directive('get-size', getSize);
+	app.directive('ripple', ripple);
+	app.directive('tooltip', tooltip);
+	app.directive('hotkey', hotkey);
+	app.directive('appear', appear);
+	app.directive('anim', anim);
+	app.directive('click-anime', clickAnime);
+	app.directive('panel', panel);
+	app.directive('adaptive-border', adaptiveBorder);
+}
diff --git a/packages/frontend/src/directives/panel.ts b/packages/frontend/src/directives/panel.ts
new file mode 100644
index 0000000000..d31dc41ed4
--- /dev/null
+++ b/packages/frontend/src/directives/panel.ts
@@ -0,0 +1,24 @@
+import { Directive } from 'vue';
+
+export default {
+	mounted(src, binding, vn) {
+		const getBgColor = (el: HTMLElement) => {
+			const style = window.getComputedStyle(el);
+			if (style.backgroundColor && !['rgba(0, 0, 0, 0)', 'rgba(0,0,0,0)', 'transparent'].includes(style.backgroundColor)) {
+				return style.backgroundColor;
+			} else {
+				return el.parentElement ? getBgColor(el.parentElement) : 'transparent';
+			}
+		};
+	
+		const parentBg = getBgColor(src.parentElement);
+
+		const myBg = getComputedStyle(document.documentElement).getPropertyValue('--panel');
+
+		if (parentBg === myBg) {
+			src.style.backgroundColor = 'var(--bg)';
+		} else {
+			src.style.backgroundColor = 'var(--panel)';
+		}
+	},
+} as Directive;
diff --git a/packages/frontend/src/directives/ripple.ts b/packages/frontend/src/directives/ripple.ts
new file mode 100644
index 0000000000..d32f7ab441
--- /dev/null
+++ b/packages/frontend/src/directives/ripple.ts
@@ -0,0 +1,18 @@
+import Ripple from '@/components/MkRipple.vue';
+import { popup } from '@/os';
+
+export default {
+	mounted(el, binding, vn) {
+		// 明示的に false であればバインドしない
+		if (binding.value === false) return;
+
+		el.addEventListener('click', () => {
+			const rect = el.getBoundingClientRect();
+
+			const x = rect.left + (el.offsetWidth / 2);
+			const y = rect.top + (el.offsetHeight / 2);
+
+			popup(Ripple, { x, y }, {}, 'end');
+		});
+	},
+};
diff --git a/packages/frontend/src/directives/size.ts b/packages/frontend/src/directives/size.ts
new file mode 100644
index 0000000000..da8bd78ea1
--- /dev/null
+++ b/packages/frontend/src/directives/size.ts
@@ -0,0 +1,123 @@
+import { Directive } from 'vue';
+
+type Value = { max?: number[]; min?: number[]; };
+
+//const observers = new Map<Element, ResizeObserver>();
+const mountings = new Map<Element, {
+	value: Value;
+	resize: ResizeObserver;
+	intersection?: IntersectionObserver;
+	previousWidth: number;
+	twoPreviousWidth: number;
+}>();
+
+type ClassOrder = {
+	add: string[];
+	remove: string[];
+};
+
+const isContainerQueriesSupported = ('container' in document.documentElement.style);
+
+const cache = new Map<string, ClassOrder>();
+
+function getClassOrder(width: number, queue: Value): ClassOrder {
+	const getMaxClass = (v: number) => `max-width_${v}px`;
+	const getMinClass = (v: number) => `min-width_${v}px`;
+
+	return {
+		add: [
+			...(queue.max ? queue.max.filter(v => width <= v).map(getMaxClass) : []),
+			...(queue.min ? queue.min.filter(v => width >= v).map(getMinClass) : []),
+		],
+		remove: [
+			...(queue.max ? queue.max.filter(v => width > v).map(getMaxClass) : []),
+			...(queue.min ? queue.min.filter(v => width < v).map(getMinClass) : []),
+		],
+	};
+}
+
+function applyClassOrder(el: Element, order: ClassOrder) {
+	el.classList.add(...order.add);
+	el.classList.remove(...order.remove);
+}
+
+function getOrderName(width: number, queue: Value): string {
+	return `${width}|${queue.max ? queue.max.join(',') : ''}|${queue.min ? queue.min.join(',') : ''}`;
+}
+
+function calc(el: Element) {
+	const info = mountings.get(el);
+	const width = el.clientWidth;
+
+	if (!info || info.previousWidth === width) return;
+
+	// アクティベート前などでsrcが描画されていない場合
+	if (!width) {
+		// IntersectionObserverで表示検出する
+		if (!info.intersection) {
+			info.intersection = new IntersectionObserver(entries => {
+				if (entries.some(entry => entry.isIntersecting)) calc(el);
+			});
+		}
+		info.intersection.observe(el);
+		return;
+	}
+	if (info.intersection) {
+		info.intersection.disconnect();
+		delete info.intersection;
+	}
+
+	mountings.set(el, { ...info, ...{ previousWidth: width, twoPreviousWidth: info.previousWidth }});
+
+	// Prevent infinite resizing
+	// https://github.com/misskey-dev/misskey/issues/9076
+	if (info.twoPreviousWidth === width) {
+		return;
+	}
+
+	const cached = cache.get(getOrderName(width, info.value));
+	if (cached) {
+		applyClassOrder(el, cached);
+	} else {
+		const order = getClassOrder(width, info.value);
+		cache.set(getOrderName(width, info.value), order);
+		applyClassOrder(el, order);
+	}
+}
+
+export default {
+	mounted(src, binding, vn) {
+		if (isContainerQueriesSupported) return;
+
+		const resize = new ResizeObserver((entries, observer) => {
+			calc(src);
+		});
+
+		mountings.set(src, {
+			value: binding.value,
+			resize,
+			previousWidth: 0,
+			twoPreviousWidth: 0,
+		});
+
+		calc(src);
+		resize.observe(src);
+	},
+
+	updated(src, binding, vn) {
+		if (isContainerQueriesSupported) return;
+
+		mountings.set(src, Object.assign({}, mountings.get(src), { value: binding.value }));
+		calc(src);
+	},
+
+	unmounted(src, binding, vn) {
+		if (isContainerQueriesSupported) return;
+
+		const info = mountings.get(src);
+		if (!info) return;
+		info.resize.disconnect();
+		if (info.intersection) info.intersection.disconnect();
+		mountings.delete(src);
+	},
+} as Directive<Element, Value>;
diff --git a/packages/frontend/src/directives/tooltip.ts b/packages/frontend/src/directives/tooltip.ts
new file mode 100644
index 0000000000..5d13497b5f
--- /dev/null
+++ b/packages/frontend/src/directives/tooltip.ts
@@ -0,0 +1,93 @@
+// TODO: useTooltip関数使うようにしたい
+// ただディレクティブ内でonUnmountedなどのcomposition api使えるのか不明
+
+import { defineAsyncComponent, Directive, ref } from 'vue';
+import { isTouchUsing } from '@/scripts/touch';
+import { popup, alert } from '@/os';
+
+const start = isTouchUsing ? 'touchstart' : 'mouseover';
+const end = isTouchUsing ? 'touchend' : 'mouseleave';
+
+export default {
+	mounted(el: HTMLElement, binding, vn) {
+		const delay = binding.modifiers.noDelay ? 0 : 100;
+
+		const self = (el as any)._tooltipDirective_ = {} as any;
+
+		self.text = binding.value as string;
+		self._close = null;
+		self.showTimer = null;
+		self.hideTimer = null;
+		self.checkTimer = null;
+
+		self.close = () => {
+			if (self._close) {
+				window.clearInterval(self.checkTimer);
+				self._close();
+				self._close = null;
+			}
+		};
+
+		if (binding.arg === 'dialog') {
+			el.addEventListener('click', (ev) => {
+				ev.preventDefault();
+				ev.stopPropagation();
+				alert({
+					type: 'info',
+					text: binding.value,
+				});
+				return false;
+			});
+		}
+
+		self.show = () => {
+			if (!document.body.contains(el)) return;
+			if (self._close) return;
+			if (self.text == null) return;
+
+			const showing = ref(true);
+			popup(defineAsyncComponent(() => import('@/components/MkTooltip.vue')), {
+				showing,
+				text: self.text,
+				asMfm: binding.modifiers.mfm,
+				direction: binding.modifiers.left ? 'left' : binding.modifiers.right ? 'right' : binding.modifiers.top ? 'top' : binding.modifiers.bottom ? 'bottom' : 'top',
+				targetElement: el,
+			}, {}, 'closed');
+
+			self._close = () => {
+				showing.value = false;
+			};
+		};
+
+		el.addEventListener('selectstart', ev => {
+			ev.preventDefault();
+		});
+
+		el.addEventListener(start, () => {
+			window.clearTimeout(self.showTimer);
+			window.clearTimeout(self.hideTimer);
+			self.showTimer = window.setTimeout(self.show, delay);
+		}, { passive: true });
+
+		el.addEventListener(end, () => {
+			window.clearTimeout(self.showTimer);
+			window.clearTimeout(self.hideTimer);
+			self.hideTimer = window.setTimeout(self.close, delay);
+		}, { passive: true });
+
+		el.addEventListener('click', () => {
+			window.clearTimeout(self.showTimer);
+			self.close();
+		});
+	},
+
+	updated(el, binding) {
+		const self = el._tooltipDirective_;
+		self.text = binding.value as string;
+	},
+
+	unmounted(el, binding, vn) {
+		const self = el._tooltipDirective_;
+		window.clearInterval(self.checkTimer);
+	},
+} as Directive;
diff --git a/packages/frontend/src/directives/user-preview.ts b/packages/frontend/src/directives/user-preview.ts
new file mode 100644
index 0000000000..ed5f00ca65
--- /dev/null
+++ b/packages/frontend/src/directives/user-preview.ts
@@ -0,0 +1,118 @@
+import { defineAsyncComponent, Directive, ref } from 'vue';
+import autobind from 'autobind-decorator';
+import { popup } from '@/os';
+
+export class UserPreview {
+	private el;
+	private user;
+	private showTimer;
+	private hideTimer;
+	private checkTimer;
+	private promise;
+
+	constructor(el, user) {
+		this.el = el;
+		this.user = user;
+
+		this.attach();
+	}
+
+	@autobind
+	private show() {
+		if (!document.body.contains(this.el)) return;
+		if (this.promise) return;
+
+		const showing = ref(true);
+
+		popup(defineAsyncComponent(() => import('@/components/MkUserPreview.vue')), {
+			showing,
+			q: this.user,
+			source: this.el,
+		}, {
+			mouseover: () => {
+				window.clearTimeout(this.hideTimer);
+			},
+			mouseleave: () => {
+				window.clearTimeout(this.showTimer);
+				this.hideTimer = window.setTimeout(this.close, 500);
+			},
+		}, 'closed');
+
+		this.promise = {
+			cancel: () => {
+				showing.value = false;
+			},
+		};
+
+		this.checkTimer = window.setInterval(() => {
+			if (!document.body.contains(this.el)) {
+				window.clearTimeout(this.showTimer);
+				window.clearTimeout(this.hideTimer);
+				this.close();
+			}
+		}, 1000);
+	}
+
+	@autobind
+	private close() {
+		if (this.promise) {
+			window.clearInterval(this.checkTimer);
+			this.promise.cancel();
+			this.promise = null;
+		}
+	}
+
+	@autobind
+	private onMouseover() {
+		window.clearTimeout(this.showTimer);
+		window.clearTimeout(this.hideTimer);
+		this.showTimer = window.setTimeout(this.show, 500);
+	}
+
+	@autobind
+	private onMouseleave() {
+		window.clearTimeout(this.showTimer);
+		window.clearTimeout(this.hideTimer);
+		this.hideTimer = window.setTimeout(this.close, 500);
+	}
+
+	@autobind
+	private onClick() {
+		window.clearTimeout(this.showTimer);
+		this.close();
+	}
+
+	@autobind
+	public attach() {
+		this.el.addEventListener('mouseover', this.onMouseover);
+		this.el.addEventListener('mouseleave', this.onMouseleave);
+		this.el.addEventListener('click', this.onClick);
+	}
+
+	@autobind
+	public detach() {
+		this.el.removeEventListener('mouseover', this.onMouseover);
+		this.el.removeEventListener('mouseleave', this.onMouseleave);
+		this.el.removeEventListener('click', this.onClick);
+		window.clearInterval(this.checkTimer);
+	}
+}
+
+export default {
+	mounted(el: HTMLElement, binding, vn) {
+		if (binding.value == null) return;
+
+		// TODO: 新たにプロパティを作るのをやめMapを使う
+		// ただメモリ的には↓の方が省メモリかもしれないので検討中
+		const self = (el as any)._userPreviewDirective_ = {} as any;
+
+		self.preview = new UserPreview(el, binding.value);
+	},
+
+	unmounted(el, binding, vn) {
+		if (binding.value == null) return;
+
+		const self = el._userPreviewDirective_;
+		self.preview.detach();
+	},
+} as Directive;
diff --git a/packages/frontend/src/emojilist.json b/packages/frontend/src/emojilist.json
new file mode 100644
index 0000000000..402e82e33b
--- /dev/null
+++ b/packages/frontend/src/emojilist.json
@@ -0,0 +1,1785 @@
+[
+	{ "category": "face", "char": "😀", "name": "grinning", "keywords": ["face", "smile", "happy", "joy", ": D", "grin"] },
+	{ "category": "face", "char": "😬", "name": "grimacing", "keywords": ["face", "grimace", "teeth"] },
+	{ "category": "face", "char": "😁", "name": "grin", "keywords": ["face", "happy", "smile", "joy", "kawaii"] },
+	{ "category": "face", "char": "😂", "name": "joy", "keywords": ["face", "cry", "tears", "weep", "happy", "happytears", "haha"] },
+	{ "category": "face", "char": "🤣", "name": "rofl", "keywords": ["face", "rolling", "floor", "laughing", "lol", "haha"] },
+	{ "category": "face", "char": "🥳", "name": "partying", "keywords": ["face", "celebration", "woohoo"] },
+	{ "category": "face", "char": "😃", "name": "smiley", "keywords": ["face", "happy", "joy", "haha", ": D", ": )", "smile", "funny"] },
+	{ "category": "face", "char": "😄", "name": "smile", "keywords": ["face", "happy", "joy", "funny", "haha", "laugh", "like", ": D", ": )"] },
+	{ "category": "face", "char": "😅", "name": "sweat_smile", "keywords": ["face", "hot", "happy", "laugh", "sweat", "smile", "relief"] },
+	{ "category": "face", "char": "🥲", "name": "smiling_face_with_tear", "keywords": ["face"] },
+	{ "category": "face", "char": "😆", "name": "laughing", "keywords": ["happy", "joy", "lol", "satisfied", "haha", "face", "glad", "XD", "laugh"] },
+	{ "category": "face", "char": "😇", "name": "innocent", "keywords": ["face", "angel", "heaven", "halo"] },
+	{ "category": "face", "char": "😉", "name": "wink", "keywords": ["face", "happy", "mischievous", "secret", ";)", "smile", "eye"] },
+	{ "category": "face", "char": "😊", "name": "blush", "keywords": ["face", "smile", "happy", "flushed", "crush", "embarrassed", "shy", "joy"] },
+	{ "category": "face", "char": "🙂", "name": "slightly_smiling_face", "keywords": ["face", "smile"] },
+	{ "category": "face", "char": "🙃", "name": "upside_down_face", "keywords": ["face", "flipped", "silly", "smile"] },
+	{ "category": "face", "char": "☺️", "name": "relaxed", "keywords": ["face", "blush", "massage", "happiness"] },
+	{ "category": "face", "char": "😋", "name": "yum", "keywords": ["happy", "joy", "tongue", "smile", "face", "silly", "yummy", "nom", "delicious", "savouring"] },
+	{ "category": "face", "char": "😌", "name": "relieved", "keywords": ["face", "relaxed", "phew", "massage", "happiness"] },
+	{ "category": "face", "char": "😍", "name": "heart_eyes", "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "crush", "heart"] },
+	{ "category": "face", "char": "🥰", "name": "smiling_face_with_three_hearts", "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "crush", "hearts", "adore"] },
+	{ "category": "face", "char": "😘", "name": "kissing_heart", "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "kiss"] },
+	{ "category": "face", "char": "😗", "name": "kissing", "keywords": ["love", "like", "face", "3", "valentines", "infatuation", "kiss"] },
+	{ "category": "face", "char": "😙", "name": "kissing_smiling_eyes", "keywords": ["face", "affection", "valentines", "infatuation", "kiss"] },
+	{ "category": "face", "char": "😚", "name": "kissing_closed_eyes", "keywords": ["face", "love", "like", "affection", "valentines", "infatuation", "kiss"] },
+	{ "category": "face", "char": "😜", "name": "stuck_out_tongue_winking_eye", "keywords": ["face", "prank", "childish", "playful", "mischievous", "smile", "wink", "tongue"] },
+	{ "category": "face", "char": "🤪", "name": "zany", "keywords": ["face", "goofy", "crazy"] },
+	{ "category": "face", "char": "🤨", "name": "raised_eyebrow", "keywords": ["face", "distrust", "scepticism", "disapproval", "disbelief", "surprise"] },
+	{ "category": "face", "char": "🧐", "name": "monocle", "keywords": ["face", "stuffy", "wealthy"] },
+	{ "category": "face", "char": "😝", "name": "stuck_out_tongue_closed_eyes", "keywords": ["face", "prank", "playful", "mischievous", "smile", "tongue"] },
+	{ "category": "face", "char": "😛", "name": "stuck_out_tongue", "keywords": ["face", "prank", "childish", "playful", "mischievous", "smile", "tongue"] },
+	{ "category": "face", "char": "🤑", "name": "money_mouth_face", "keywords": ["face", "rich", "dollar", "money"] },
+	{ "category": "face", "char": "🤓", "name": "nerd_face", "keywords": ["face", "nerdy", "geek", "dork"] },
+	{ "category": "face", "char": "🥸", "name": "disguised_face", "keywords": ["face", "nose", "glasses", "incognito"] },
+	{ "category": "face", "char": "😎", "name": "sunglasses", "keywords": ["face", "cool", "smile", "summer", "beach", "sunglass"] },
+	{ "category": "face", "char": "🤩", "name": "star_struck", "keywords": ["face", "smile", "starry", "eyes", "grinning"] },
+	{ "category": "face", "char": "🤡", "name": "clown_face", "keywords": ["face"] },
+	{ "category": "face", "char": "🤠", "name": "cowboy_hat_face", "keywords": ["face", "cowgirl", "hat"] },
+	{ "category": "face", "char": "🤗", "name": "hugs", "keywords": ["face", "smile", "hug"] },
+	{ "category": "face", "char": "😏", "name": "smirk", "keywords": ["face", "smile", "mean", "prank", "smug", "sarcasm"] },
+	{ "category": "face", "char": "😶", "name": "no_mouth", "keywords": ["face", "hellokitty"] },
+	{ "category": "face", "char": "😐", "name": "neutral_face", "keywords": ["indifference", "meh", ": |", "neutral"] },
+	{ "category": "face", "char": "😑", "name": "expressionless", "keywords": ["face", "indifferent", "-_-", "meh", "deadpan"] },
+	{ "category": "face", "char": "😒", "name": "unamused", "keywords": ["indifference", "bored", "straight face", "serious", "sarcasm", "unimpressed", "skeptical", "dubious", "side_eye"] },
+	{ "category": "face", "char": "🙄", "name": "roll_eyes", "keywords": ["face", "eyeroll", "frustrated"] },
+	{ "category": "face", "char": "🤔", "name": "thinking", "keywords": ["face", "hmmm", "think", "consider"] },
+	{ "category": "face", "char": "🤥", "name": "lying_face", "keywords": ["face", "lie", "pinocchio"] },
+	{ "category": "face", "char": "🤭", "name": "hand_over_mouth", "keywords": ["face", "whoops", "shock", "surprise"] },
+	{ "category": "face", "char": "🤫", "name": "shushing", "keywords": ["face", "quiet", "shhh"] },
+	{ "category": "face", "char": "🤬", "name": "symbols_over_mouth", "keywords": ["face", "swearing", "cursing", "cussing", "profanity", "expletive"] },
+	{ "category": "face", "char": "🤯", "name": "exploding_head", "keywords": ["face", "shocked", "mind", "blown"] },
+	{ "category": "face", "char": "😳", "name": "flushed", "keywords": ["face", "blush", "shy", "flattered"] },
+	{ "category": "face", "char": "😞", "name": "disappointed", "keywords": ["face", "sad", "upset", "depressed", ": ("] },
+	{ "category": "face", "char": "😟", "name": "worried", "keywords": ["face", "concern", "nervous", ": ("] },
+	{ "category": "face", "char": "😠", "name": "angry", "keywords": ["mad", "face", "annoyed", "frustrated"] },
+	{ "category": "face", "char": "😡", "name": "rage", "keywords": ["angry", "mad", "hate", "despise"] },
+	{ "category": "face", "char": "😔", "name": "pensive", "keywords": ["face", "sad", "depressed", "upset"] },
+	{ "category": "face", "char": "😕", "name": "confused", "keywords": ["face", "indifference", "huh", "weird", "hmmm", ": /"] },
+	{ "category": "face", "char": "🙁", "name": "slightly_frowning_face", "keywords": ["face", "frowning", "disappointed", "sad", "upset"] },
+	{ "category": "face", "char": "☹", "name": "frowning_face", "keywords": ["face", "sad", "upset", "frown"] },
+	{ "category": "face", "char": "😣", "name": "persevere", "keywords": ["face", "sick", "no", "upset", "oops"] },
+	{ "category": "face", "char": "😖", "name": "confounded", "keywords": ["face", "confused", "sick", "unwell", "oops", ": S"] },
+	{ "category": "face", "char": "😫", "name": "tired_face", "keywords": ["sick", "whine", "upset", "frustrated"] },
+	{ "category": "face", "char": "😩", "name": "weary", "keywords": ["face", "tired", "sleepy", "sad", "frustrated", "upset"] },
+	{ "category": "face", "char": "🥺", "name": "pleading", "keywords": ["face", "begging", "mercy"] },
+	{ "category": "face", "char": "😤", "name": "triumph", "keywords": ["face", "gas", "phew", "proud", "pride"] },
+	{ "category": "face", "char": "😮", "name": "open_mouth", "keywords": ["face", "surprise", "impressed", "wow", "whoa", ": O"] },
+	{ "category": "face", "char": "😱", "name": "scream", "keywords": ["face", "munch", "scared", "omg"] },
+	{ "category": "face", "char": "😨", "name": "fearful", "keywords": ["face", "scared", "terrified", "nervous", "oops", "huh"] },
+	{ "category": "face", "char": "😰", "name": "cold_sweat", "keywords": ["face", "nervous", "sweat"] },
+	{ "category": "face", "char": "😯", "name": "hushed", "keywords": ["face", "woo", "shh"] },
+	{ "category": "face", "char": "😦", "name": "frowning", "keywords": ["face", "aw", "what"] },
+	{ "category": "face", "char": "😧", "name": "anguished", "keywords": ["face", "stunned", "nervous"] },
+	{ "category": "face", "char": "😢", "name": "cry", "keywords": ["face", "tears", "sad", "depressed", "upset", ": '("] },
+	{ "category": "face", "char": "😥", "name": "disappointed_relieved", "keywords": ["face", "phew", "sweat", "nervous"] },
+	{ "category": "face", "char": "🤤", "name": "drooling_face", "keywords": ["face"] },
+	{ "category": "face", "char": "😪", "name": "sleepy", "keywords": ["face", "tired", "rest", "nap"] },
+	{ "category": "face", "char": "😓", "name": "sweat", "keywords": ["face", "hot", "sad", "tired", "exercise"] },
+	{ "category": "face", "char": "🥵", "name": "hot", "keywords": ["face", "feverish", "heat", "red", "sweating"] },
+	{ "category": "face", "char": "🥶", "name": "cold", "keywords": ["face", "blue", "freezing", "frozen", "frostbite", "icicles"] },
+	{ "category": "face", "char": "😭", "name": "sob", "keywords": ["face", "cry", "tears", "sad", "upset", "depressed"] },
+	{ "category": "face", "char": "😵", "name": "dizzy_face", "keywords": ["spent", "unconscious", "xox", "dizzy"] },
+	{ "category": "face", "char": "😲", "name": "astonished", "keywords": ["face", "xox", "surprised", "poisoned"] },
+	{ "category": "face", "char": "🤐", "name": "zipper_mouth_face", "keywords": ["face", "sealed", "zipper", "secret"] },
+	{ "category": "face", "char": "🤢", "name": "nauseated_face", "keywords": ["face", "vomit", "gross", "green", "sick", "throw up", "ill"] },
+	{ "category": "face", "char": "🤧", "name": "sneezing_face", "keywords": ["face", "gesundheit", "sneeze", "sick", "allergy"] },
+	{ "category": "face", "char": "🤮", "name": "vomiting", "keywords": ["face", "sick"] },
+	{ "category": "face", "char": "😷", "name": "mask", "keywords": ["face", "sick", "ill", "disease"] },
+	{ "category": "face", "char": "🤒", "name": "face_with_thermometer", "keywords": ["sick", "temperature", "thermometer", "cold", "fever"] },
+	{ "category": "face", "char": "🤕", "name": "face_with_head_bandage", "keywords": ["injured", "clumsy", "bandage", "hurt"] },
+	{ "category": "face", "char": "🥴", "name": "woozy", "keywords": ["face", "dizzy", "intoxicated", "tipsy", "wavy"] },
+	{ "category": "face", "char": "🥱", "name": "yawning", "keywords": ["face", "tired", "yawning"] },
+	{ "category": "face", "char": "😴", "name": "sleeping", "keywords": ["face", "tired", "sleepy", "night", "zzz"] },
+	{ "category": "face", "char": "💤", "name": "zzz", "keywords": ["sleepy", "tired", "dream"] },
+	{ "category": "face", "char": "\uD83D\uDE36\u200D\uD83C\uDF2B\uFE0F", "name": "face_in_clouds", "keywords": [] },
+	{ "category": "face", "char": "\uD83D\uDE2E\u200D\uD83D\uDCA8", "name": "face_exhaling", "keywords": [] },
+	{ "category": "face", "char": "\uD83D\uDE35\u200D\uD83D\uDCAB", "name": "face_with_spiral_eyes", "keywords": [] },
+	{ "category": "face", "char": "\uD83E\uDEE0", "name": "melting_face", "keywords": ["disappear", "dissolve", "liquid", "melt", "toketa"] },
+	{ "category": "face", "char": "\uD83E\uDEE2", "name": "face_with_open_eyes_and_hand_over_mouth", "keywords": ["amazement", "awe", "disbelief", "embarrass", "scared", "surprise", "ohoho"] },
+	{ "category": "face", "char": "\uD83E\uDEE3", "name": "face_with_peeking_eye", "keywords": ["captivated", "peep", "stare", "chunibyo"] },
+	{ "category": "face", "char": "\uD83E\uDEE1", "name": "saluting_face", "keywords": ["ok", "salute", "sunny", "troops", "yes", "raja"] },
+	{ "category": "face", "char": "\uD83E\uDEE5", "name": "dotted_line_face", "keywords": ["depressed", "disappear", "hide", "introvert", "invisible", "tensen"] },
+	{ "category": "face", "char": "\uD83E\uDEE4", "name": "face_with_diagonal_mouth", "keywords": ["disappointed", "meh", "skeptical", "unsure"] },
+	{ "category": "face", "char": "\uD83E\uDD79", "name": "face_holding_back_tears", "keywords": ["angry", "cry", "proud", "resist", "sad"] },
+	{ "category": "face", "char": "💩", "name": "poop", "keywords": ["hankey", "shitface", "fail", "turd", "shit"] },
+	{ "category": "face", "char": "😈", "name": "smiling_imp", "keywords": ["devil", "horns"] },
+	{ "category": "face", "char": "👿", "name": "imp", "keywords": ["devil", "angry", "horns"] },
+	{ "category": "face", "char": "👹", "name": "japanese_ogre", "keywords": ["monster", "red", "mask", "halloween", "scary", "creepy", "devil", "demon", "japanese", "ogre"] },
+	{ "category": "face", "char": "👺", "name": "japanese_goblin", "keywords": ["red", "evil", "mask", "monster", "scary", "creepy", "japanese", "goblin"] },
+	{ "category": "face", "char": "💀", "name": "skull", "keywords": ["dead", "skeleton", "creepy", "death"] },
+	{ "category": "face", "char": "👻", "name": "ghost", "keywords": ["halloween", "spooky", "scary"] },
+	{ "category": "face", "char": "👽", "name": "alien", "keywords": ["UFO", "paul", "weird", "outer_space"] },
+	{ "category": "face", "char": "🤖", "name": "robot", "keywords": ["computer", "machine", "bot"] },
+	{ "category": "face", "char": "😺", "name": "smiley_cat", "keywords": ["animal", "cats", "happy", "smile"] },
+	{ "category": "face", "char": "😸", "name": "smile_cat", "keywords": ["animal", "cats", "smile"] },
+	{ "category": "face", "char": "😹", "name": "joy_cat", "keywords": ["animal", "cats", "haha", "happy", "tears"] },
+	{ "category": "face", "char": "😻", "name": "heart_eyes_cat", "keywords": ["animal", "love", "like", "affection", "cats", "valentines", "heart"] },
+	{ "category": "face", "char": "😼", "name": "smirk_cat", "keywords": ["animal", "cats", "smirk"] },
+	{ "category": "face", "char": "😽", "name": "kissing_cat", "keywords": ["animal", "cats", "kiss"] },
+	{ "category": "face", "char": "🙀", "name": "scream_cat", "keywords": ["animal", "cats", "munch", "scared", "scream"] },
+	{ "category": "face", "char": "😿", "name": "crying_cat_face", "keywords": ["animal", "tears", "weep", "sad", "cats", "upset", "cry"] },
+	{ "category": "face", "char": "😾", "name": "pouting_cat", "keywords": ["animal", "cats"] },
+	{ "category": "people", "char": "🤲", "name": "palms_up", "keywords": ["hands", "gesture", "cupped", "prayer"] },
+	{ "category": "people", "char": "🙌", "name": "raised_hands", "keywords": ["gesture", "hooray", "yea", "celebration", "hands"] },
+	{ "category": "people", "char": "👏", "name": "clap", "keywords": ["hands", "praise", "applause", "congrats", "yay"] },
+	{ "category": "people", "char": "👋", "name": "wave", "keywords": ["hands", "gesture", "goodbye", "solong", "farewell", "hello", "hi", "palm"] },
+	{ "category": "people", "char": "🤙", "name": "call_me_hand", "keywords": ["hands", "gesture"] },
+	{ "category": "people", "char": "👍", "name": "+1", "keywords": ["thumbsup", "yes", "awesome", "good", "agree", "accept", "cool", "hand", "like"] },
+	{ "category": "people", "char": "👎", "name": "-1", "keywords": ["thumbsdown", "no", "dislike", "hand"] },
+	{ "category": "people", "char": "👊", "name": "facepunch", "keywords": ["angry", "violence", "fist", "hit", "attack", "hand"] },
+	{ "category": "people", "char": "✊", "name": "fist", "keywords": ["fingers", "hand", "grasp"] },
+	{ "category": "people", "char": "🤛", "name": "fist_left", "keywords": ["hand", "fistbump"] },
+	{ "category": "people", "char": "🤜", "name": "fist_right", "keywords": ["hand", "fistbump"] },
+	{ "category": "people", "char": "✌", "name": "v", "keywords": ["fingers", "ohyeah", "hand", "peace", "victory", "two"] },
+	{ "category": "people", "char": "👌", "name": "ok_hand", "keywords": ["fingers", "limbs", "perfect", "ok", "okay"] },
+	{ "category": "people", "char": "✋", "name": "raised_hand", "keywords": ["fingers", "stop", "highfive", "palm", "ban"] },
+	{ "category": "people", "char": "🤚", "name": "raised_back_of_hand", "keywords": ["fingers", "raised", "backhand"] },
+	{ "category": "people", "char": "👐", "name": "open_hands", "keywords": ["fingers", "butterfly", "hands", "open"] },
+	{ "category": "people", "char": "💪", "name": "muscle", "keywords": ["arm", "flex", "hand", "summer", "strong", "biceps"] },
+	{ "category": "people", "char": "🦾", "name": "mechanical_arm", "keywords": ["flex", "hand", "strong", "biceps"] },
+	{ "category": "people", "char": "🙏", "name": "pray", "keywords": ["please", "hope", "wish", "namaste", "highfive"] },
+	{ "category": "people", "char": "🦶", "name": "foot", "keywords": ["kick", "stomp"] },
+	{ "category": "people", "char": "🦵", "name": "leg", "keywords": ["kick", "limb"] },
+	{ "category": "people", "char": "🦿", "name": "mechanical_leg", "keywords": ["kick", "limb"] },
+	{ "category": "people", "char": "🤝", "name": "handshake", "keywords": ["agreement", "shake"] },
+	{ "category": "people", "char": "☝", "name": "point_up", "keywords": ["hand", "fingers", "direction", "up"] },
+	{ "category": "people", "char": "👆", "name": "point_up_2", "keywords": ["fingers", "hand", "direction", "up"] },
+	{ "category": "people", "char": "👇", "name": "point_down", "keywords": ["fingers", "hand", "direction", "down"] },
+	{ "category": "people", "char": "👈", "name": "point_left", "keywords": ["direction", "fingers", "hand", "left"] },
+	{ "category": "people", "char": "👉", "name": "point_right", "keywords": ["fingers", "hand", "direction", "right"] },
+	{ "category": "people", "char": "🖕", "name": "fu", "keywords": ["hand", "fingers", "rude", "middle", "flipping"] },
+	{ "category": "people", "char": "🖐", "name": "raised_hand_with_fingers_splayed", "keywords": ["hand", "fingers", "palm"] },
+	{ "category": "people", "char": "🤟", "name": "love_you", "keywords": ["hand", "fingers", "gesture"] },
+	{ "category": "people", "char": "🤘", "name": "metal", "keywords": ["hand", "fingers", "evil_eye", "sign_of_horns", "rock_on"] },
+	{ "category": "people", "char": "🤞", "name": "crossed_fingers", "keywords": ["good", "lucky"] },
+	{ "category": "people", "char": "🖖", "name": "vulcan_salute", "keywords": ["hand", "fingers", "spock", "star trek"] },
+	{ "category": "people", "char": "✍", "name": "writing_hand", "keywords": ["lower_left_ballpoint_pen", "stationery", "write", "compose"] },
+	{ "category": "people", "char": "\uD83E\uDEF0", "name": "hand_with_index_finger_and_thumb_crossed", "keywords": [] },
+	{ "category": "people", "char": "\uD83E\uDEF1", "name": "rightwards_hand", "keywords": [] },
+	{ "category": "people", "char": "\uD83E\uDEF2", "name": "leftwards_hand", "keywords": [] },
+	{ "category": "people", "char": "\uD83E\uDEF3", "name": "palm_down_hand", "keywords": [] },
+	{ "category": "people", "char": "\uD83E\uDEF4", "name": "palm_up_hand", "keywords": [] },
+	{ "category": "people", "char": "\uD83E\uDEF5", "name": "index_pointing_at_the_viewer", "keywords": [] },
+	{ "category": "people", "char": "\uD83E\uDEF6", "name": "heart_hands", "keywords": ["moemoekyun"] },
+	{ "category": "people", "char": "🤏", "name": "pinching_hand", "keywords": ["hand", "fingers"] },
+	{ "category": "people", "char": "🤌", "name": "pinched_fingers", "keywords": ["hand", "fingers"] },
+	{ "category": "people", "char": "🤳", "name": "selfie", "keywords": ["camera", "phone"] },
+	{ "category": "people", "char": "💅", "name": "nail_care", "keywords": ["beauty", "manicure", "finger", "fashion", "nail"] },
+	{ "category": "people", "char": "👄", "name": "lips", "keywords": ["mouth", "kiss"] },
+	{ "category": "people", "char": "\uD83E\uDEE6", "name": "biting_lip", "keywords": [] },
+	{ "category": "people", "char": "🦷", "name": "tooth", "keywords": ["teeth", "dentist"] },
+	{ "category": "people", "char": "👅", "name": "tongue", "keywords": ["mouth", "playful"] },
+	{ "category": "people", "char": "👂", "name": "ear", "keywords": ["face", "hear", "sound", "listen"] },
+	{ "category": "people", "char": "🦻", "name": "ear_with_hearing_aid", "keywords": ["face", "hear", "sound", "listen"] },
+	{ "category": "people", "char": "👃", "name": "nose", "keywords": ["smell", "sniff"] },
+	{ "category": "people", "char": "👁", "name": "eye", "keywords": ["face", "look", "see", "watch", "stare"] },
+	{ "category": "people", "char": "👀", "name": "eyes", "keywords": ["look", "watch", "stalk", "peek", "see"] },
+	{ "category": "people", "char": "🧠", "name": "brain", "keywords": ["smart", "intelligent"] },
+	{ "category": "people", "char": "🫀", "name": "anatomical_heart", "keywords": [] },
+	{ "category": "people", "char": "🫁", "name": "lungs", "keywords": [] },
+	{ "category": "people", "char": "👤", "name": "bust_in_silhouette", "keywords": ["user", "person", "human"] },
+	{ "category": "people", "char": "👥", "name": "busts_in_silhouette", "keywords": ["user", "person", "human", "group", "team"] },
+	{ "category": "people", "char": "🗣", "name": "speaking_head", "keywords": ["user", "person", "human", "sing", "say", "talk"] },
+	{ "category": "people", "char": "👶", "name": "baby", "keywords": ["child", "boy", "girl", "toddler"] },
+	{ "category": "people", "char": "🧒", "name": "child", "keywords": ["gender-neutral", "young"] },
+	{ "category": "people", "char": "👦", "name": "boy", "keywords": ["man", "male", "guy", "teenager"] },
+	{ "category": "people", "char": "👧", "name": "girl", "keywords": ["female", "woman", "teenager"] },
+	{ "category": "people", "char": "🧑", "name": "adult", "keywords": ["gender-neutral", "person"] },
+	{ "category": "people", "char": "👨", "name": "man", "keywords": ["mustache", "father", "dad", "guy", "classy", "sir", "moustache"] },
+	{ "category": "people", "char": "👩", "name": "woman", "keywords": ["female", "girls", "lady"] },
+	{ "category": "people", "char": "🧑‍🦱", "name": "curly_hair", "keywords": ["curly", "afro", "braids", "ringlets"] },
+	{ "category": "people", "char": "👩‍🦱", "name": "curly_hair_woman", "keywords": ["woman", "female", "girl", "curly", "afro", "braids", "ringlets"] },
+	{ "category": "people", "char": "👨‍🦱", "name": "curly_hair_man", "keywords": ["man", "male", "boy", "guy", "curly", "afro", "braids", "ringlets"] },
+	{ "category": "people", "char": "🧑‍🦰", "name": "red_hair", "keywords": ["redhead"] },
+	{ "category": "people", "char": "👩‍🦰", "name": "red_hair_woman", "keywords": ["woman", "female", "girl", "ginger", "redhead"] },
+	{ "category": "people", "char": "👨‍🦰", "name": "red_hair_man", "keywords": ["man", "male", "boy", "guy", "ginger", "redhead"] },
+	{ "category": "people", "char": "👱‍♀️", "name": "blonde_woman", "keywords": ["woman", "female", "girl", "blonde", "person"] },
+	{ "category": "people", "char": "👱", "name": "blonde_man", "keywords": ["man", "male", "boy", "blonde", "guy", "person"] },
+	{ "category": "people", "char": "🧑‍🦳", "name": "white_hair", "keywords": ["gray", "old", "white"] },
+	{ "category": "people", "char": "👩‍🦳", "name": "white_hair_woman", "keywords": ["woman", "female", "girl", "gray", "old", "white"] },
+	{ "category": "people", "char": "👨‍🦳", "name": "white_hair_man", "keywords": ["man", "male", "boy", "guy", "gray", "old", "white"] },
+	{ "category": "people", "char": "🧑‍🦲", "name": "bald", "keywords": ["bald", "chemotherapy", "hairless", "shaven"] },
+	{ "category": "people", "char": "👩‍🦲", "name": "bald_woman", "keywords": ["woman", "female", "girl", "bald", "chemotherapy", "hairless", "shaven"] },
+	{ "category": "people", "char": "👨‍🦲", "name": "bald_man", "keywords": ["man", "male", "boy", "guy", "bald", "chemotherapy", "hairless", "shaven"] },
+	{ "category": "people", "char": "🧔", "name": "bearded_person", "keywords": ["person", "bewhiskered"] },
+	{ "category": "people", "char": "🧓", "name": "older_adult", "keywords": ["human", "elder", "senior", "gender-neutral"] },
+	{ "category": "people", "char": "👴", "name": "older_man", "keywords": ["human", "male", "men", "old", "elder", "senior"] },
+	{ "category": "people", "char": "👵", "name": "older_woman", "keywords": ["human", "female", "women", "lady", "old", "elder", "senior"] },
+	{ "category": "people", "char": "👲", "name": "man_with_gua_pi_mao", "keywords": ["male", "boy", "chinese"] },
+	{ "category": "people", "char": "🧕", "name": "woman_with_headscarf", "keywords": ["female", "hijab", "mantilla", "tichel"] },
+	{ "category": "people", "char": "👳‍♀️", "name": "woman_with_turban", "keywords": ["female", "indian", "hinduism", "arabs", "woman"] },
+	{ "category": "people", "char": "👳", "name": "man_with_turban", "keywords": ["male", "indian", "hinduism", "arabs"] },
+	{ "category": "people", "char": "👮‍♀️", "name": "policewoman", "keywords": ["woman", "police", "law", "legal", "enforcement", "arrest", "911", "female"] },
+	{ "category": "people", "char": "👮", "name": "policeman", "keywords": ["man", "police", "law", "legal", "enforcement", "arrest", "911"] },
+	{ "category": "people", "char": "👷‍♀️", "name": "construction_worker_woman", "keywords": ["female", "human", "wip", "build", "construction", "worker", "labor", "woman"] },
+	{ "category": "people", "char": "👷", "name": "construction_worker_man", "keywords": ["male", "human", "wip", "guy", "build", "construction", "worker", "labor"] },
+	{ "category": "people", "char": "💂‍♀️", "name": "guardswoman", "keywords": ["uk", "gb", "british", "female", "royal", "woman"] },
+	{ "category": "people", "char": "💂", "name": "guardsman", "keywords": ["uk", "gb", "british", "male", "guy", "royal"] },
+	{ "category": "people", "char": "🕵️‍♀️", "name": "female_detective", "keywords": ["human", "spy", "detective", "female", "woman"] },
+	{ "category": "people", "char": "🕵", "name": "male_detective", "keywords": ["human", "spy", "detective"] },
+	{ "category": "people", "char": "🧑‍⚕️", "name": "health_worker", "keywords": ["doctor", "nurse", "therapist", "healthcare", "human"] },
+	{ "category": "people", "char": "👩‍⚕️", "name": "woman_health_worker", "keywords": ["doctor", "nurse", "therapist", "healthcare", "woman", "human"] },
+	{ "category": "people", "char": "👨‍⚕️", "name": "man_health_worker", "keywords": ["doctor", "nurse", "therapist", "healthcare", "man", "human"] },
+	{ "category": "people", "char": "🧑‍🌾", "name": "farmer", "keywords": ["rancher", "gardener", "human"] },
+	{ "category": "people", "char": "👩‍🌾", "name": "woman_farmer", "keywords": ["rancher", "gardener", "woman", "human"] },
+	{ "category": "people", "char": "👨‍🌾", "name": "man_farmer", "keywords": ["rancher", "gardener", "man", "human"] },
+	{ "category": "people", "char": "🧑‍🍳", "name": "cook", "keywords": ["chef", "human"] },
+	{ "category": "people", "char": "👩‍🍳", "name": "woman_cook", "keywords": ["chef", "woman", "human"] },
+	{ "category": "people", "char": "👨‍🍳", "name": "man_cook", "keywords": ["chef", "man", "human"] },
+	{ "category": "people", "char": "🧑‍🎓", "name": "student", "keywords": ["graduate", "human"] },
+	{ "category": "people", "char": "👩‍🎓", "name": "woman_student", "keywords": ["graduate", "woman", "human"] },
+	{ "category": "people", "char": "👨‍🎓", "name": "man_student", "keywords": ["graduate", "man", "human"] },
+	{ "category": "people", "char": "🧑‍🎤", "name": "singer", "keywords": ["rockstar", "entertainer", "human"] },
+	{ "category": "people", "char": "👩‍🎤", "name": "woman_singer", "keywords": ["rockstar", "entertainer", "woman", "human"] },
+	{ "category": "people", "char": "👨‍🎤", "name": "man_singer", "keywords": ["rockstar", "entertainer", "man", "human"] },
+	{ "category": "people", "char": "🧑‍🏫", "name": "teacher", "keywords": ["instructor", "professor", "human"] },
+	{ "category": "people", "char": "👩‍🏫", "name": "woman_teacher", "keywords": ["instructor", "professor", "woman", "human"] },
+	{ "category": "people", "char": "👨‍🏫", "name": "man_teacher", "keywords": ["instructor", "professor", "man", "human"] },
+	{ "category": "people", "char": "🧑‍🏭", "name": "factory_worker", "keywords": ["assembly", "industrial", "human"] },
+	{ "category": "people", "char": "👩‍🏭", "name": "woman_factory_worker", "keywords": ["assembly", "industrial", "woman", "human"] },
+	{ "category": "people", "char": "👨‍🏭", "name": "man_factory_worker", "keywords": ["assembly", "industrial", "man", "human"] },
+	{ "category": "people", "char": "🧑‍💻", "name": "technologist", "keywords": ["coder", "developer", "engineer", "programmer", "software", "human", "laptop", "computer"] },
+	{ "category": "people", "char": "👩‍💻", "name": "woman_technologist", "keywords": ["coder", "developer", "engineer", "programmer", "software", "woman", "human", "laptop", "computer"] },
+	{ "category": "people", "char": "👨‍💻", "name": "man_technologist", "keywords": ["coder", "developer", "engineer", "programmer", "software", "man", "human", "laptop", "computer"] },
+	{ "category": "people", "char": "🧑‍💼", "name": "office_worker", "keywords": ["business", "manager", "human"] },
+	{ "category": "people", "char": "👩‍💼", "name": "woman_office_worker", "keywords": ["business", "manager", "woman", "human"] },
+	{ "category": "people", "char": "👨‍💼", "name": "man_office_worker", "keywords": ["business", "manager", "man", "human"] },
+	{ "category": "people", "char": "🧑‍🔧", "name": "mechanic", "keywords": ["plumber", "human", "wrench"] },
+	{ "category": "people", "char": "👩‍🔧", "name": "woman_mechanic", "keywords": ["plumber", "woman", "human", "wrench"] },
+	{ "category": "people", "char": "👨‍🔧", "name": "man_mechanic", "keywords": ["plumber", "man", "human", "wrench"] },
+	{ "category": "people", "char": "🧑‍🔬", "name": "scientist", "keywords": ["biologist", "chemist", "engineer", "physicist", "human"] },
+	{ "category": "people", "char": "👩‍🔬", "name": "woman_scientist", "keywords": ["biologist", "chemist", "engineer", "physicist", "woman", "human"] },
+	{ "category": "people", "char": "👨‍🔬", "name": "man_scientist", "keywords": ["biologist", "chemist", "engineer", "physicist", "man", "human"] },
+	{ "category": "people", "char": "🧑‍🎨", "name": "artist", "keywords": ["painter", "human"] },
+	{ "category": "people", "char": "👩‍🎨", "name": "woman_artist", "keywords": ["painter", "woman", "human"] },
+	{ "category": "people", "char": "👨‍🎨", "name": "man_artist", "keywords": ["painter", "man", "human"] },
+	{ "category": "people", "char": "🧑‍🚒", "name": "firefighter", "keywords": ["fireman", "human"] },
+	{ "category": "people", "char": "👩‍🚒", "name": "woman_firefighter", "keywords": ["fireman", "woman", "human"] },
+	{ "category": "people", "char": "👨‍🚒", "name": "man_firefighter", "keywords": ["fireman", "man", "human"] },
+	{ "category": "people", "char": "🧑‍✈️", "name": "pilot", "keywords": ["aviator", "plane", "human"] },
+	{ "category": "people", "char": "👩‍✈️", "name": "woman_pilot", "keywords": ["aviator", "plane", "woman", "human"] },
+	{ "category": "people", "char": "👨‍✈️", "name": "man_pilot", "keywords": ["aviator", "plane", "man", "human"] },
+	{ "category": "people", "char": "🧑‍🚀", "name": "astronaut", "keywords": ["space", "rocket", "human"] },
+	{ "category": "people", "char": "👩‍🚀", "name": "woman_astronaut", "keywords": ["space", "rocket", "woman", "human"] },
+	{ "category": "people", "char": "👨‍🚀", "name": "man_astronaut", "keywords": ["space", "rocket", "man", "human"] },
+	{ "category": "people", "char": "🧑‍⚖️", "name": "judge", "keywords": ["justice", "court", "human"] },
+	{ "category": "people", "char": "👩‍⚖️", "name": "woman_judge", "keywords": ["justice", "court", "woman", "human"] },
+	{ "category": "people", "char": "👨‍⚖️", "name": "man_judge", "keywords": ["justice", "court", "man", "human"] },
+	{ "category": "people", "char": "🦸‍♀️", "name": "woman_superhero", "keywords": ["woman", "female", "good", "heroine", "superpowers"] },
+	{ "category": "people", "char": "🦸‍♂️", "name": "man_superhero", "keywords": ["man", "male", "good", "hero", "superpowers"] },
+	{ "category": "people", "char": "🦹‍♀️", "name": "woman_supervillain", "keywords": ["woman", "female", "evil", "bad", "criminal", "heroine", "superpowers"] },
+	{ "category": "people", "char": "🦹‍♂️", "name": "man_supervillain", "keywords": ["man", "male", "evil", "bad", "criminal", "hero", "superpowers"] },
+	{ "category": "people", "char": "🤶", "name": "mrs_claus", "keywords": ["woman", "female", "xmas", "mother christmas"] },
+	{ "category": "people", "char": "\uD83E\uDDD1\u200D\uD83C\uDF84", "name": "mx_claus", "keywords": ["xmas", "christmas"] },
+	{ "category": "people", "char": "🎅", "name": "santa", "keywords": ["festival", "man", "male", "xmas", "father christmas"] },
+	{ "category": "people", "char": "🥷", "name": "ninja", "keywords": [] },
+	{ "category": "people", "char": "🧙‍♀️", "name": "sorceress", "keywords": ["woman", "female", "mage", "witch"] },
+	{ "category": "people", "char": "🧙‍♂️", "name": "wizard", "keywords": ["man", "male", "mage", "sorcerer"] },
+	{ "category": "people", "char": "🧝‍♀️", "name": "woman_elf", "keywords": ["woman", "female"] },
+	{ "category": "people", "char": "🧝‍♂️", "name": "man_elf", "keywords": ["man", "male"] },
+	{ "category": "people", "char": "🧛‍♀️", "name": "woman_vampire", "keywords": ["woman", "female"] },
+	{ "category": "people", "char": "🧛‍♂️", "name": "man_vampire", "keywords": ["man", "male", "dracula"] },
+	{ "category": "people", "char": "🧟‍♀️", "name": "woman_zombie", "keywords": ["woman", "female", "undead", "walking dead"] },
+	{ "category": "people", "char": "🧟‍♂️", "name": "man_zombie", "keywords": ["man", "male", "dracula", "undead", "walking dead"] },
+	{ "category": "people", "char": "🧞‍♀️", "name": "woman_genie", "keywords": ["woman", "female"] },
+	{ "category": "people", "char": "🧞‍♂️", "name": "man_genie", "keywords": ["man", "male"] },
+	{ "category": "people", "char": "🧜‍♀️", "name": "mermaid", "keywords": ["woman", "female", "merwoman", "ariel"] },
+	{ "category": "people", "char": "🧜‍♂️", "name": "merman", "keywords": ["man", "male", "triton"] },
+	{ "category": "people", "char": "🧚‍♀️", "name": "woman_fairy", "keywords": ["woman", "female"] },
+	{ "category": "people", "char": "🧚‍♂️", "name": "man_fairy", "keywords": ["man", "male"] },
+	{ "category": "people", "char": "👼", "name": "angel", "keywords": ["heaven", "wings", "halo"] },
+	{ "category": "people", "char": "\uD83E\uDDCC", "name": "troll", "keywords": [] },
+	{ "category": "people", "char": "🤰", "name": "pregnant_woman", "keywords": ["baby"] },
+	{ "category": "people", "char": "\uD83E\uDEC3", "name": "pregnant_man", "keywords": [] },
+	{ "category": "people", "char": "\uD83E\uDEC4", "name": "pregnant_person", "keywords": [] },
+	{ "category": "people", "char": "\uD83E\uDEC5", "name": "person_with_crown", "keywords": [] },
+	{ "category": "people", "char": "🤱", "name": "breastfeeding", "keywords": ["nursing", "baby"] },
+	{ "category": "people", "char": "\uD83D\uDC69\u200D\uD83C\uDF7C", "name": "woman_feeding_baby", "keywords": [] },
+	{ "category": "people", "char": "\uD83D\uDC68\u200D\uD83C\uDF7C", "name": "man_feeding_baby", "keywords": [] },
+	{ "category": "people", "char": "\uD83E\uDDD1\u200D\uD83C\uDF7C", "name": "person_feeding_baby", "keywords": [] },
+	{ "category": "people", "char": "👸", "name": "princess", "keywords": ["girl", "woman", "female", "blond", "crown", "royal", "queen"] },
+	{ "category": "people", "char": "🤴", "name": "prince", "keywords": ["boy", "man", "male", "crown", "royal", "king"] },
+	{ "category": "people", "char": "👰", "name": "person_with_veil", "keywords": ["couple", "marriage", "wedding", "woman", "bride"] },
+	{ "category": "people", "char": "👰", "name": "bride_with_veil", "keywords": ["couple", "marriage", "wedding", "woman", "bride"] },
+	{ "category": "people", "char": "🤵", "name": "person_in_tuxedo", "keywords": ["couple", "marriage", "wedding", "groom"] },
+	{ "category": "people", "char": "🤵", "name": "man_in_tuxedo", "keywords": ["couple", "marriage", "wedding", "groom"] },
+	{ "category": "people", "char": "🏃‍♀️", "name": "running_woman", "keywords": ["woman", "walking", "exercise", "race", "running", "female"] },
+	{ "category": "people", "char": "🏃", "name": "running_man", "keywords": ["man", "walking", "exercise", "race", "running"] },
+	{ "category": "people", "char": "🚶‍♀️", "name": "walking_woman", "keywords": ["human", "feet", "steps", "woman", "female"] },
+	{ "category": "people", "char": "🚶", "name": "walking_man", "keywords": ["human", "feet", "steps"] },
+	{ "category": "people", "char": "💃", "name": "dancer", "keywords": ["female", "girl", "woman", "fun"] },
+	{ "category": "people", "char": "🕺", "name": "man_dancing", "keywords": ["male", "boy", "fun", "dancer"] },
+	{ "category": "people", "char": "👯", "name": "dancing_women", "keywords": ["female", "bunny", "women", "girls"] },
+	{ "category": "people", "char": "👯‍♂️", "name": "dancing_men", "keywords": ["male", "bunny", "men", "boys"] },
+	{ "category": "people", "char": "👫", "name": "couple", "keywords": ["pair", "people", "human", "love", "date", "dating", "like", "affection", "valentines", "marriage"] },
+	{ "category": "people", "char": "\uD83E\uDDD1\u200D\uD83E\uDD1D\u200D\uD83E\uDDD1", "name": "people_holding_hands", "keywords": ["pair", "couple", "love", "like", "bromance", "friendship", "people", "human"] },
+	{ "category": "people", "char": "👬", "name": "two_men_holding_hands", "keywords": ["pair", "couple", "love", "like", "bromance", "friendship", "people", "man", "human"] },
+	{ "category": "people", "char": "👭", "name": "two_women_holding_hands", "keywords": ["pair", "couple", "love", "like", "bromance", "friendship", "people", "female", "human"] },
+	{ "category": "people", "char": "🫂", "name": "people_hugging", "keywords": [] },
+	{ "category": "people", "char": "🙇‍♀️", "name": "bowing_woman", "keywords": ["woman", "female", "girl"] },
+	{ "category": "people", "char": "🙇", "name": "bowing_man", "keywords": ["man", "male", "boy"] },
+	{ "category": "people", "char": "🤦‍♂️", "name": "man_facepalming", "keywords": ["man", "male", "boy", "disbelief"] },
+	{ "category": "people", "char": "🤦‍♀️", "name": "woman_facepalming", "keywords": ["woman", "female", "girl", "disbelief"] },
+	{ "category": "people", "char": "🤷", "name": "woman_shrugging", "keywords": ["woman", "female", "girl", "confused", "indifferent", "doubt"] },
+	{ "category": "people", "char": "🤷‍♂️", "name": "man_shrugging", "keywords": ["man", "male", "boy", "confused", "indifferent", "doubt"] },
+	{ "category": "people", "char": "💁", "name": "tipping_hand_woman", "keywords": ["female", "girl", "woman", "human", "information"] },
+	{ "category": "people", "char": "💁‍♂️", "name": "tipping_hand_man", "keywords": ["male", "boy", "man", "human", "information"] },
+	{ "category": "people", "char": "🙅", "name": "no_good_woman", "keywords": ["female", "girl", "woman", "nope"] },
+	{ "category": "people", "char": "🙅‍♂️", "name": "no_good_man", "keywords": ["male", "boy", "man", "nope"] },
+	{ "category": "people", "char": "🙆", "name": "ok_woman", "keywords": ["women", "girl", "female", "pink", "human", "woman"] },
+	{ "category": "people", "char": "🙆‍♂️", "name": "ok_man", "keywords": ["men", "boy", "male", "blue", "human", "man"] },
+	{ "category": "people", "char": "🙋", "name": "raising_hand_woman", "keywords": ["female", "girl", "woman"] },
+	{ "category": "people", "char": "🙋‍♂️", "name": "raising_hand_man", "keywords": ["male", "boy", "man"] },
+	{ "category": "people", "char": "🙎", "name": "pouting_woman", "keywords": ["female", "girl", "woman"] },
+	{ "category": "people", "char": "🙎‍♂️", "name": "pouting_man", "keywords": ["male", "boy", "man"] },
+	{ "category": "people", "char": "🙍", "name": "frowning_woman", "keywords": ["female", "girl", "woman", "sad", "depressed", "discouraged", "unhappy"] },
+	{ "category": "people", "char": "🙍‍♂️", "name": "frowning_man", "keywords": ["male", "boy", "man", "sad", "depressed", "discouraged", "unhappy"] },
+	{ "category": "people", "char": "💇", "name": "haircut_woman", "keywords": ["female", "girl", "woman"] },
+	{ "category": "people", "char": "💇‍♂️", "name": "haircut_man", "keywords": ["male", "boy", "man"] },
+	{ "category": "people", "char": "💆", "name": "massage_woman", "keywords": ["female", "girl", "woman", "head"] },
+	{ "category": "people", "char": "💆‍♂️", "name": "massage_man", "keywords": ["male", "boy", "man", "head"] },
+	{ "category": "people", "char": "🧖‍♀️", "name": "woman_in_steamy_room", "keywords": ["female", "woman", "spa", "steamroom", "sauna"] },
+	{ "category": "people", "char": "🧖‍♂️", "name": "man_in_steamy_room", "keywords": ["male", "man", "spa", "steamroom", "sauna"] },
+	{ "category": "people", "char": "🧏‍♀️", "name": "woman_deaf", "keywords": ["woman", "female"] },
+	{ "category": "people", "char": "🧏‍♂️", "name": "man_deaf", "keywords": ["man", "male"] },
+	{ "category": "people", "char": "🧍‍♀️", "name": "woman_standing", "keywords": ["woman", "female"] },
+	{ "category": "people", "char": "🧍‍♂️", "name": "man_standing", "keywords": ["man", "male"] },
+	{ "category": "people", "char": "🧎‍♀️", "name": "woman_kneeling", "keywords": ["woman", "female"] },
+	{ "category": "people", "char": "🧎‍♂️", "name": "man_kneeling", "keywords": ["man", "male"] },
+	{ "category": "people", "char": "🧑‍🦯", "name": "person_with_probing_cane", "keywords": ["accessibility", "blind"] },
+	{ "category": "people", "char": "👩‍🦯", "name": "woman_with_probing_cane", "keywords": ["woman", "female", "accessibility", "blind"] },
+	{ "category": "people", "char": "👨‍🦯", "name": "man_with_probing_cane", "keywords": ["man", "male", "accessibility", "blind"] },
+	{ "category": "people", "char": "🧑‍🦼", "name": "person_in_motorized_wheelchair", "keywords": ["accessibility"] },
+	{ "category": "people", "char": "👩‍🦼", "name": "woman_in_motorized_wheelchair", "keywords": ["woman", "female", "accessibility"] },
+	{ "category": "people", "char": "👨‍🦼", "name": "man_in_motorized_wheelchair", "keywords": ["man", "male", "accessibility"] },
+	{ "category": "people", "char": "🧑‍🦽", "name": "person_in_manual_wheelchair", "keywords": ["accessibility"] },
+	{ "category": "people", "char": "👩‍🦽", "name": "woman_in_manual_wheelchair", "keywords": ["woman", "female", "accessibility"] },
+	{ "category": "people", "char": "👨‍🦽", "name": "man_in_manual_wheelchair", "keywords": ["man", "male", "accessibility"] },
+	{ "category": "people", "char": "💑", "name": "couple_with_heart_woman_man", "keywords": ["pair", "love", "like", "affection", "human", "dating", "valentines", "marriage"] },
+	{ "category": "people", "char": "👩‍❤️‍👩", "name": "couple_with_heart_woman_woman", "keywords": ["pair", "love", "like", "affection", "human", "dating", "valentines", "marriage"] },
+	{ "category": "people", "char": "👨‍❤️‍👨", "name": "couple_with_heart_man_man", "keywords": ["pair", "love", "like", "affection", "human", "dating", "valentines", "marriage"] },
+	{ "category": "people", "char": "💏", "name": "couplekiss_man_woman", "keywords": ["pair", "valentines", "love", "like", "dating", "marriage"] },
+	{ "category": "people", "char": "👩‍❤️‍💋‍👩", "name": "couplekiss_woman_woman", "keywords": ["pair", "valentines", "love", "like", "dating", "marriage"] },
+	{ "category": "people", "char": "👨‍❤️‍💋‍👨", "name": "couplekiss_man_man", "keywords": ["pair", "valentines", "love", "like", "dating", "marriage"] },
+	{ "category": "people", "char": "👪", "name": "family_man_woman_boy", "keywords": ["home", "parents", "child", "mom", "dad", "father", "mother", "people", "human"] },
+	{ "category": "people", "char": "👨‍👩‍👧", "name": "family_man_woman_girl", "keywords": ["home", "parents", "people", "human", "child"] },
+	{ "category": "people", "char": "👨‍👩‍👧‍👦", "name": "family_man_woman_girl_boy", "keywords": ["home", "parents", "people", "human", "children"] },
+	{ "category": "people", "char": "👨‍👩‍👦‍👦", "name": "family_man_woman_boy_boy", "keywords": ["home", "parents", "people", "human", "children"] },
+	{ "category": "people", "char": "👨‍👩‍👧‍👧", "name": "family_man_woman_girl_girl", "keywords": ["home", "parents", "people", "human", "children"] },
+	{ "category": "people", "char": "👩‍👩‍👦", "name": "family_woman_woman_boy", "keywords": ["home", "parents", "people", "human", "children"] },
+	{ "category": "people", "char": "👩‍👩‍👧", "name": "family_woman_woman_girl", "keywords": ["home", "parents", "people", "human", "children"] },
+	{ "category": "people", "char": "👩‍👩‍👧‍👦", "name": "family_woman_woman_girl_boy", "keywords": ["home", "parents", "people", "human", "children"] },
+	{ "category": "people", "char": "👩‍👩‍👦‍👦", "name": "family_woman_woman_boy_boy", "keywords": ["home", "parents", "people", "human", "children"] },
+	{ "category": "people", "char": "👩‍👩‍👧‍👧", "name": "family_woman_woman_girl_girl", "keywords": ["home", "parents", "people", "human", "children"] },
+	{ "category": "people", "char": "👨‍👨‍👦", "name": "family_man_man_boy", "keywords": ["home", "parents", "people", "human", "children"] },
+	{ "category": "people", "char": "👨‍👨‍👧", "name": "family_man_man_girl", "keywords": ["home", "parents", "people", "human", "children"] },
+	{ "category": "people", "char": "👨‍👨‍👧‍👦", "name": "family_man_man_girl_boy", "keywords": ["home", "parents", "people", "human", "children"] },
+	{ "category": "people", "char": "👨‍👨‍👦‍👦", "name": "family_man_man_boy_boy", "keywords": ["home", "parents", "people", "human", "children"] },
+	{ "category": "people", "char": "👨‍👨‍👧‍👧", "name": "family_man_man_girl_girl", "keywords": ["home", "parents", "people", "human", "children"] },
+	{ "category": "people", "char": "👩‍👦", "name": "family_woman_boy", "keywords": ["home", "parent", "people", "human", "child"] },
+	{ "category": "people", "char": "👩‍👧", "name": "family_woman_girl", "keywords": ["home", "parent", "people", "human", "child"] },
+	{ "category": "people", "char": "👩‍👧‍👦", "name": "family_woman_girl_boy", "keywords": ["home", "parent", "people", "human", "children"] },
+	{ "category": "people", "char": "👩‍👦‍👦", "name": "family_woman_boy_boy", "keywords": ["home", "parent", "people", "human", "children"] },
+	{ "category": "people", "char": "👩‍👧‍👧", "name": "family_woman_girl_girl", "keywords": ["home", "parent", "people", "human", "children"] },
+	{ "category": "people", "char": "👨‍👦", "name": "family_man_boy", "keywords": ["home", "parent", "people", "human", "child"] },
+	{ "category": "people", "char": "👨‍👧", "name": "family_man_girl", "keywords": ["home", "parent", "people", "human", "child"] },
+	{ "category": "people", "char": "👨‍👧‍👦", "name": "family_man_girl_boy", "keywords": ["home", "parent", "people", "human", "children"] },
+	{ "category": "people", "char": "👨‍👦‍👦", "name": "family_man_boy_boy", "keywords": ["home", "parent", "people", "human", "children"] },
+	{ "category": "people", "char": "👨‍👧‍👧", "name": "family_man_girl_girl", "keywords": ["home", "parent", "people", "human", "children"] },
+	{ "category": "people", "char": "🧶", "name": "yarn", "keywords": ["ball", "crochet", "knit"] },
+	{ "category": "people", "char": "🧵", "name": "thread", "keywords": ["needle", "sewing", "spool", "string"] },
+	{ "category": "people", "char": "🧥", "name": "coat", "keywords": ["jacket"] },
+	{ "category": "people", "char": "🥼", "name": "labcoat", "keywords": ["doctor", "experiment", "scientist", "chemist"] },
+	{ "category": "people", "char": "👚", "name": "womans_clothes", "keywords": ["fashion", "shopping_bags", "female"] },
+	{ "category": "people", "char": "👕", "name": "tshirt", "keywords": ["fashion", "cloth", "casual", "shirt", "tee"] },
+	{ "category": "people", "char": "👖", "name": "jeans", "keywords": ["fashion", "shopping"] },
+	{ "category": "people", "char": "👔", "name": "necktie", "keywords": ["shirt", "suitup", "formal", "fashion", "cloth", "business"] },
+	{ "category": "people", "char": "👗", "name": "dress", "keywords": ["clothes", "fashion", "shopping"] },
+	{ "category": "people", "char": "👙", "name": "bikini", "keywords": ["swimming", "female", "woman", "girl", "fashion", "beach", "summer"] },
+	{ "category": "people", "char": "🩱", "name": "one_piece_swimsuit", "keywords": ["swimming", "female", "woman", "girl", "fashion", "beach", "summer"] },
+	{ "category": "people", "char": "👘", "name": "kimono", "keywords": ["dress", "fashion", "women", "female", "japanese"] },
+	{ "category": "people", "char": "🥻", "name": "sari", "keywords": ["dress", "fashion", "women", "female"] },
+	{ "category": "people", "char": "🩲", "name": "briefs", "keywords": ["dress", "fashion"] },
+	{ "category": "people", "char": "🩳", "name": "shorts", "keywords": ["dress", "fashion"] },
+	{ "category": "people", "char": "💄", "name": "lipstick", "keywords": ["female", "girl", "fashion", "woman"] },
+	{ "category": "people", "char": "💋", "name": "kiss", "keywords": ["face", "lips", "love", "like", "affection", "valentines"] },
+	{ "category": "people", "char": "👣", "name": "footprints", "keywords": ["feet", "tracking", "walking", "beach"] },
+	{ "category": "people", "char": "🥿", "name": "flat_shoe", "keywords": ["ballet", "slip-on", "slipper"] },
+	{ "category": "people", "char": "👠", "name": "high_heel", "keywords": ["fashion", "shoes", "female", "pumps", "stiletto"] },
+	{ "category": "people", "char": "👡", "name": "sandal", "keywords": ["shoes", "fashion", "flip flops"] },
+	{ "category": "people", "char": "👢", "name": "boot", "keywords": ["shoes", "fashion"] },
+	{ "category": "people", "char": "👞", "name": "mans_shoe", "keywords": ["fashion", "male"] },
+	{ "category": "people", "char": "👟", "name": "athletic_shoe", "keywords": ["shoes", "sports", "sneakers"] },
+	{ "category": "people", "char": "🩴", "name": "thong_sandal", "keywords": [] },
+	{ "category": "people", "char": "🩰", "name": "ballet_shoes", "keywords": ["shoes", "sports"] },
+	{ "category": "people", "char": "🧦", "name": "socks", "keywords": ["stockings", "clothes"] },
+	{ "category": "people", "char": "🧤", "name": "gloves", "keywords": ["hands", "winter", "clothes"] },
+	{ "category": "people", "char": "🧣", "name": "scarf", "keywords": ["neck", "winter", "clothes"] },
+	{ "category": "people", "char": "👒", "name": "womans_hat", "keywords": ["fashion", "accessories", "female", "lady", "spring"] },
+	{ "category": "people", "char": "🎩", "name": "tophat", "keywords": ["magic", "gentleman", "classy", "circus"] },
+	{ "category": "people", "char": "🧢", "name": "billed_hat", "keywords": ["cap", "baseball"] },
+	{ "category": "people", "char": "⛑", "name": "rescue_worker_helmet", "keywords": ["construction", "build"] },
+	{ "category": "people", "char": "🪖", "name": "military_helmet", "keywords": [] },
+	{ "category": "people", "char": "🎓", "name": "mortar_board", "keywords": ["school", "college", "degree", "university", "graduation", "cap", "hat", "legal", "learn", "education"] },
+	{ "category": "people", "char": "👑", "name": "crown", "keywords": ["king", "kod", "leader", "royalty", "lord"] },
+	{ "category": "people", "char": "🎒", "name": "school_satchel", "keywords": ["student", "education", "bag", "backpack"] },
+	{ "category": "people", "char": "🧳", "name": "luggage", "keywords": ["packing", "travel"] },
+	{ "category": "people", "char": "👝", "name": "pouch", "keywords": ["bag", "accessories", "shopping"] },
+	{ "category": "people", "char": "👛", "name": "purse", "keywords": ["fashion", "accessories", "money", "sales", "shopping"] },
+	{ "category": "people", "char": "👜", "name": "handbag", "keywords": ["fashion", "accessory", "accessories", "shopping"] },
+	{ "category": "people", "char": "💼", "name": "briefcase", "keywords": ["business", "documents", "work", "law", "legal", "job", "career"] },
+	{ "category": "people", "char": "👓", "name": "eyeglasses", "keywords": ["fashion", "accessories", "eyesight", "nerdy", "dork", "geek"] },
+	{ "category": "people", "char": "🕶", "name": "dark_sunglasses", "keywords": ["face", "cool", "accessories"] },
+	{ "category": "people", "char": "🥽", "name": "goggles", "keywords": ["eyes", "protection", "safety"] },
+	{ "category": "people", "char": "💍", "name": "ring", "keywords": ["wedding", "propose", "marriage", "valentines", "diamond", "fashion", "jewelry", "gem", "engagement"] },
+	{ "category": "people", "char": "🌂", "name": "closed_umbrella", "keywords": ["weather", "rain", "drizzle"] },
+	{ "category": "animals_and_nature", "char": "🐶", "name": "dog", "keywords": ["animal", "friend", "nature", "woof", "puppy", "pet", "faithful"] },
+	{ "category": "animals_and_nature", "char": "🐱", "name": "cat", "keywords": ["animal", "meow", "nature", "pet", "kitten"] },
+	{ "category": "animals_and_nature", "char": "🐈‍⬛", "name": "black_cat", "keywords": ["animal", "meow", "nature", "pet", "kitten"] },
+	{ "category": "animals_and_nature", "char": "🐭", "name": "mouse", "keywords": ["animal", "nature", "cheese_wedge", "rodent"] },
+	{ "category": "animals_and_nature", "char": "🐹", "name": "hamster", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🐰", "name": "rabbit", "keywords": ["animal", "nature", "pet", "spring", "magic", "bunny"] },
+	{ "category": "animals_and_nature", "char": "🦊", "name": "fox_face", "keywords": ["animal", "nature", "face"] },
+	{ "category": "animals_and_nature", "char": "🐻", "name": "bear", "keywords": ["animal", "nature", "wild"] },
+	{ "category": "animals_and_nature", "char": "🐼", "name": "panda_face", "keywords": ["animal", "nature", "panda"] },
+	{ "category": "animals_and_nature", "char": "🐨", "name": "koala", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🐯", "name": "tiger", "keywords": ["animal", "cat", "danger", "wild", "nature", "roar"] },
+	{ "category": "animals_and_nature", "char": "🦁", "name": "lion", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🐮", "name": "cow", "keywords": ["beef", "ox", "animal", "nature", "moo", "milk"] },
+	{ "category": "animals_and_nature", "char": "🐷", "name": "pig", "keywords": ["animal", "oink", "nature"] },
+	{ "category": "animals_and_nature", "char": "🐽", "name": "pig_nose", "keywords": ["animal", "oink"] },
+	{ "category": "animals_and_nature", "char": "🐸", "name": "frog", "keywords": ["animal", "nature", "croak", "toad"] },
+	{ "category": "animals_and_nature", "char": "🦑", "name": "squid", "keywords": ["animal", "nature", "ocean", "sea"] },
+	{ "category": "animals_and_nature", "char": "🐙", "name": "octopus", "keywords": ["animal", "creature", "ocean", "sea", "nature", "beach"] },
+	{ "category": "animals_and_nature", "char": "🦐", "name": "shrimp", "keywords": ["animal", "ocean", "nature", "seafood"] },
+	{ "category": "animals_and_nature", "char": "🐵", "name": "monkey_face", "keywords": ["animal", "nature", "circus"] },
+	{ "category": "animals_and_nature", "char": "🦍", "name": "gorilla", "keywords": ["animal", "nature", "circus"] },
+	{ "category": "animals_and_nature", "char": "🙈", "name": "see_no_evil", "keywords": ["monkey", "animal", "nature", "haha"] },
+	{ "category": "animals_and_nature", "char": "🙉", "name": "hear_no_evil", "keywords": ["animal", "monkey", "nature"] },
+	{ "category": "animals_and_nature", "char": "🙊", "name": "speak_no_evil", "keywords": ["monkey", "animal", "nature", "omg"] },
+	{ "category": "animals_and_nature", "char": "🐒", "name": "monkey", "keywords": ["animal", "nature", "banana", "circus"] },
+	{ "category": "animals_and_nature", "char": "🐔", "name": "chicken", "keywords": ["animal", "cluck", "nature", "bird"] },
+	{ "category": "animals_and_nature", "char": "🐧", "name": "penguin", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🐦", "name": "bird", "keywords": ["animal", "nature", "fly", "tweet", "spring"] },
+	{ "category": "animals_and_nature", "char": "🐤", "name": "baby_chick", "keywords": ["animal", "chicken", "bird"] },
+	{ "category": "animals_and_nature", "char": "🐣", "name": "hatching_chick", "keywords": ["animal", "chicken", "egg", "born", "baby", "bird"] },
+	{ "category": "animals_and_nature", "char": "🐥", "name": "hatched_chick", "keywords": ["animal", "chicken", "baby", "bird"] },
+	{ "category": "animals_and_nature", "char": "🦆", "name": "duck", "keywords": ["animal", "nature", "bird", "mallard"] },
+	{ "category": "animals_and_nature", "char": "🦅", "name": "eagle", "keywords": ["animal", "nature", "bird"] },
+	{ "category": "animals_and_nature", "char": "🦉", "name": "owl", "keywords": ["animal", "nature", "bird", "hoot"] },
+	{ "category": "animals_and_nature", "char": "🦇", "name": "bat", "keywords": ["animal", "nature", "blind", "vampire"] },
+	{ "category": "animals_and_nature", "char": "🐺", "name": "wolf", "keywords": ["animal", "nature", "wild"] },
+	{ "category": "animals_and_nature", "char": "🐗", "name": "boar", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🐴", "name": "horse", "keywords": ["animal", "brown", "nature"] },
+	{ "category": "animals_and_nature", "char": "🦄", "name": "unicorn", "keywords": ["animal", "nature", "mystical"] },
+	{ "category": "animals_and_nature", "char": "🐝", "name": "honeybee", "keywords": ["animal", "insect", "nature", "bug", "spring", "honey"] },
+	{ "category": "animals_and_nature", "char": "🐛", "name": "bug", "keywords": ["animal", "insect", "nature", "worm"] },
+	{ "category": "animals_and_nature", "char": "🦋", "name": "butterfly", "keywords": ["animal", "insect", "nature", "caterpillar"] },
+	{ "category": "animals_and_nature", "char": "🐌", "name": "snail", "keywords": ["slow", "animal", "shell"] },
+	{ "category": "animals_and_nature", "char": "🐞", "name": "lady_beetle", "keywords": ["animal", "insect", "nature", "ladybug"] },
+	{ "category": "animals_and_nature", "char": "🐜", "name": "ant", "keywords": ["animal", "insect", "nature", "bug"] },
+	{ "category": "animals_and_nature", "char": "🦗", "name": "grasshopper", "keywords": ["animal", "cricket", "chirp"] },
+	{ "category": "animals_and_nature", "char": "🕷", "name": "spider", "keywords": ["animal", "arachnid"] },
+	{ "category": "animals_and_nature", "char": "🪲", "name": "beetle", "keywords": ["animal"] },
+	{ "category": "animals_and_nature", "char": "🪳", "name": "cockroach", "keywords": ["animal"] },
+	{ "category": "animals_and_nature", "char": "🪰", "name": "fly", "keywords": ["animal"] },
+	{ "category": "animals_and_nature", "char": "🪱", "name": "worm", "keywords": ["animal"] },
+	{ "category": "animals_and_nature", "char": "🦂", "name": "scorpion", "keywords": ["animal", "arachnid"] },
+	{ "category": "animals_and_nature", "char": "🦀", "name": "crab", "keywords": ["animal", "crustacean"] },
+	{ "category": "animals_and_nature", "char": "🐍", "name": "snake", "keywords": ["animal", "evil", "nature", "hiss", "python"] },
+	{ "category": "animals_and_nature", "char": "🦎", "name": "lizard", "keywords": ["animal", "nature", "reptile"] },
+	{ "category": "animals_and_nature", "char": "🦖", "name": "t-rex", "keywords": ["animal", "nature", "dinosaur", "tyrannosaurus", "extinct"] },
+	{ "category": "animals_and_nature", "char": "🦕", "name": "sauropod", "keywords": ["animal", "nature", "dinosaur", "brachiosaurus", "brontosaurus", "diplodocus", "extinct"] },
+	{ "category": "animals_and_nature", "char": "🐢", "name": "turtle", "keywords": ["animal", "slow", "nature", "tortoise"] },
+	{ "category": "animals_and_nature", "char": "🐠", "name": "tropical_fish", "keywords": ["animal", "swim", "ocean", "beach", "nemo"] },
+	{ "category": "animals_and_nature", "char": "🐟", "name": "fish", "keywords": ["animal", "food", "nature"] },
+	{ "category": "animals_and_nature", "char": "🐡", "name": "blowfish", "keywords": ["animal", "nature", "food", "sea", "ocean"] },
+	{ "category": "animals_and_nature", "char": "🐬", "name": "dolphin", "keywords": ["animal", "nature", "fish", "sea", "ocean", "flipper", "fins", "beach"] },
+	{ "category": "animals_and_nature", "char": "🦈", "name": "shark", "keywords": ["animal", "nature", "fish", "sea", "ocean", "jaws", "fins", "beach"] },
+	{ "category": "animals_and_nature", "char": "🐳", "name": "whale", "keywords": ["animal", "nature", "sea", "ocean"] },
+	{ "category": "animals_and_nature", "char": "🐋", "name": "whale2", "keywords": ["animal", "nature", "sea", "ocean"] },
+	{ "category": "animals_and_nature", "char": "🐊", "name": "crocodile", "keywords": ["animal", "nature", "reptile", "lizard", "alligator"] },
+	{ "category": "animals_and_nature", "char": "🐆", "name": "leopard", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🦓", "name": "zebra", "keywords": ["animal", "nature", "stripes", "safari"] },
+	{ "category": "animals_and_nature", "char": "🐅", "name": "tiger2", "keywords": ["animal", "nature", "roar"] },
+	{ "category": "animals_and_nature", "char": "🐃", "name": "water_buffalo", "keywords": ["animal", "nature", "ox", "cow"] },
+	{ "category": "animals_and_nature", "char": "🐂", "name": "ox", "keywords": ["animal", "cow", "beef"] },
+	{ "category": "animals_and_nature", "char": "🐄", "name": "cow2", "keywords": ["beef", "ox", "animal", "nature", "moo", "milk"] },
+	{ "category": "animals_and_nature", "char": "🦌", "name": "deer", "keywords": ["animal", "nature", "horns", "venison"] },
+	{ "category": "animals_and_nature", "char": "🐪", "name": "dromedary_camel", "keywords": ["animal", "hot", "desert", "hump"] },
+	{ "category": "animals_and_nature", "char": "🐫", "name": "camel", "keywords": ["animal", "nature", "hot", "desert", "hump"] },
+	{ "category": "animals_and_nature", "char": "🦒", "name": "giraffe", "keywords": ["animal", "nature", "spots", "safari"] },
+	{ "category": "animals_and_nature", "char": "🐘", "name": "elephant", "keywords": ["animal", "nature", "nose", "th", "circus"] },
+	{ "category": "animals_and_nature", "char": "🦏", "name": "rhinoceros", "keywords": ["animal", "nature", "horn"] },
+	{ "category": "animals_and_nature", "char": "🐐", "name": "goat", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🐏", "name": "ram", "keywords": ["animal", "sheep", "nature"] },
+	{ "category": "animals_and_nature", "char": "🐑", "name": "sheep", "keywords": ["animal", "nature", "wool", "shipit"] },
+	{ "category": "animals_and_nature", "char": "🐎", "name": "racehorse", "keywords": ["animal", "gamble", "luck"] },
+	{ "category": "animals_and_nature", "char": "🐖", "name": "pig2", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🐀", "name": "rat", "keywords": ["animal", "mouse", "rodent"] },
+	{ "category": "animals_and_nature", "char": "🐁", "name": "mouse2", "keywords": ["animal", "nature", "rodent"] },
+	{ "category": "animals_and_nature", "char": "🐓", "name": "rooster", "keywords": ["animal", "nature", "chicken"] },
+	{ "category": "animals_and_nature", "char": "🦃", "name": "turkey", "keywords": ["animal", "bird"] },
+	{ "category": "animals_and_nature", "char": "🕊", "name": "dove", "keywords": ["animal", "bird"] },
+	{ "category": "animals_and_nature", "char": "🐕", "name": "dog2", "keywords": ["animal", "nature", "friend", "doge", "pet", "faithful"] },
+	{ "category": "animals_and_nature", "char": "🐩", "name": "poodle", "keywords": ["dog", "animal", "101", "nature", "pet"] },
+	{ "category": "animals_and_nature", "char": "🐈", "name": "cat2", "keywords": ["animal", "meow", "pet", "cats"] },
+	{ "category": "animals_and_nature", "char": "🐇", "name": "rabbit2", "keywords": ["animal", "nature", "pet", "magic", "spring"] },
+	{ "category": "animals_and_nature", "char": "🐿", "name": "chipmunk", "keywords": ["animal", "nature", "rodent", "squirrel"] },
+	{ "category": "animals_and_nature", "char": "🦔", "name": "hedgehog", "keywords": ["animal", "nature", "spiny"] },
+	{ "category": "animals_and_nature", "char": "🦝", "name": "raccoon", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🦙", "name": "llama", "keywords": ["animal", "nature", "alpaca"] },
+	{ "category": "animals_and_nature", "char": "🦛", "name": "hippopotamus", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🦘", "name": "kangaroo", "keywords": ["animal", "nature", "australia", "joey", "hop", "marsupial"] },
+	{ "category": "animals_and_nature", "char": "🦡", "name": "badger", "keywords": ["animal", "nature", "honey"] },
+	{ "category": "animals_and_nature", "char": "🦢", "name": "swan", "keywords": ["animal", "nature", "bird"] },
+	{ "category": "animals_and_nature", "char": "🦚", "name": "peacock", "keywords": ["animal", "nature", "peahen", "bird"] },
+	{ "category": "animals_and_nature", "char": "🦜", "name": "parrot", "keywords": ["animal", "nature", "bird", "pirate", "talk"] },
+	{ "category": "animals_and_nature", "char": "🦞", "name": "lobster", "keywords": ["animal", "nature", "bisque", "claws", "seafood"] },
+	{ "category": "animals_and_nature", "char": "🦠", "name": "microbe", "keywords": ["amoeba", "bacteria", "germs"] },
+	{ "category": "animals_and_nature", "char": "🦟", "name": "mosquito", "keywords": ["animal", "nature", "insect", "malaria"] },
+	{ "category": "animals_and_nature", "char": "🦬", "name": "bison", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🦣", "name": "mammoth", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🦫", "name": "beaver", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🐻‍❄️", "name": "polar_bear", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🦤", "name": "dodo", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🪶", "name": "feather", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🦭", "name": "seal", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🐾", "name": "paw_prints", "keywords": ["animal", "tracking", "footprints", "dog", "cat", "pet", "feet"] },
+	{ "category": "animals_and_nature", "char": "🐉", "name": "dragon", "keywords": ["animal", "myth", "nature", "chinese", "green"] },
+	{ "category": "animals_and_nature", "char": "🐲", "name": "dragon_face", "keywords": ["animal", "myth", "nature", "chinese", "green"] },
+	{ "category": "animals_and_nature", "char": "🦧", "name": "orangutan", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🦮", "name": "guide_dog", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🐕‍🦺", "name": "service_dog", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🦥", "name": "sloth", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🦦", "name": "otter", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🦨", "name": "skunk", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🦩", "name": "flamingo", "keywords": ["animal", "nature"] },
+	{ "category": "animals_and_nature", "char": "🌵", "name": "cactus", "keywords": ["vegetable", "plant", "nature"] },
+	{ "category": "animals_and_nature", "char": "🎄", "name": "christmas_tree", "keywords": ["festival", "vacation", "december", "xmas", "celebration"] },
+	{ "category": "animals_and_nature", "char": "🌲", "name": "evergreen_tree", "keywords": ["plant", "nature"] },
+	{ "category": "animals_and_nature", "char": "🌳", "name": "deciduous_tree", "keywords": ["plant", "nature"] },
+	{ "category": "animals_and_nature", "char": "🌴", "name": "palm_tree", "keywords": ["plant", "vegetable", "nature", "summer", "beach", "mojito", "tropical"] },
+	{ "category": "animals_and_nature", "char": "🌱", "name": "seedling", "keywords": ["plant", "nature", "grass", "lawn", "spring"] },
+	{ "category": "animals_and_nature", "char": "🌿", "name": "herb", "keywords": ["vegetable", "plant", "medicine", "weed", "grass", "lawn"] },
+	{ "category": "animals_and_nature", "char": "☘", "name": "shamrock", "keywords": ["vegetable", "plant", "nature", "irish", "clover"] },
+	{ "category": "animals_and_nature", "char": "🍀", "name": "four_leaf_clover", "keywords": ["vegetable", "plant", "nature", "lucky", "irish"] },
+	{ "category": "animals_and_nature", "char": "🎍", "name": "bamboo", "keywords": ["plant", "nature", "vegetable", "panda", "pine_decoration"] },
+	{ "category": "animals_and_nature", "char": "🎋", "name": "tanabata_tree", "keywords": ["plant", "nature", "branch", "summer"] },
+	{ "category": "animals_and_nature", "char": "🍃", "name": "leaves", "keywords": ["nature", "plant", "tree", "vegetable", "grass", "lawn", "spring"] },
+	{ "category": "animals_and_nature", "char": "🍂", "name": "fallen_leaf", "keywords": ["nature", "plant", "vegetable", "leaves"] },
+	{ "category": "animals_and_nature", "char": "🍁", "name": "maple_leaf", "keywords": ["nature", "plant", "vegetable", "ca", "fall"] },
+	{ "category": "animals_and_nature", "char": "🌾", "name": "ear_of_rice", "keywords": ["nature", "plant"] },
+	{ "category": "animals_and_nature", "char": "🌺", "name": "hibiscus", "keywords": ["plant", "vegetable", "flowers", "beach"] },
+	{ "category": "animals_and_nature", "char": "🌻", "name": "sunflower", "keywords": ["nature", "plant", "fall"] },
+	{ "category": "animals_and_nature", "char": "🌹", "name": "rose", "keywords": ["flowers", "valentines", "love", "spring"] },
+	{ "category": "animals_and_nature", "char": "🥀", "name": "wilted_flower", "keywords": ["plant", "nature", "flower"] },
+	{ "category": "animals_and_nature", "char": "🌷", "name": "tulip", "keywords": ["flowers", "plant", "nature", "summer", "spring"] },
+	{ "category": "animals_and_nature", "char": "🌼", "name": "blossom", "keywords": ["nature", "flowers", "yellow"] },
+	{ "category": "animals_and_nature", "char": "🌸", "name": "cherry_blossom", "keywords": ["nature", "plant", "spring", "flower"] },
+	{ "category": "animals_and_nature", "char": "💐", "name": "bouquet", "keywords": ["flowers", "nature", "spring"] },
+	{ "category": "animals_and_nature", "char": "🍄", "name": "mushroom", "keywords": ["plant", "vegetable"] },
+	{ "category": "animals_and_nature", "char": "🪴", "name": "potted_plant", "keywords": ["plant"] },
+	{ "category": "animals_and_nature", "char": "🌰", "name": "chestnut", "keywords": ["food", "squirrel"] },
+	{ "category": "animals_and_nature", "char": "🎃", "name": "jack_o_lantern", "keywords": ["halloween", "light", "pumpkin", "creepy", "fall"] },
+	{ "category": "animals_and_nature", "char": "🐚", "name": "shell", "keywords": ["nature", "sea", "beach"] },
+	{ "category": "animals_and_nature", "char": "🕸", "name": "spider_web", "keywords": ["animal", "insect", "arachnid", "silk"] },
+	{ "category": "animals_and_nature", "char": "🌎", "name": "earth_americas", "keywords": ["globe", "world", "USA", "international"] },
+	{ "category": "animals_and_nature", "char": "🌍", "name": "earth_africa", "keywords": ["globe", "world", "international"] },
+	{ "category": "animals_and_nature", "char": "🌏", "name": "earth_asia", "keywords": ["globe", "world", "east", "international"] },
+	{ "category": "animals_and_nature", "char": "🪐", "name": "ringed_planet", "keywords": ["saturn"] },
+	{ "category": "animals_and_nature", "char": "🌕", "name": "full_moon", "keywords": ["nature", "yellow", "twilight", "planet", "space", "night", "evening", "sleep"] },
+	{ "category": "animals_and_nature", "char": "🌖", "name": "waning_gibbous_moon", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep", "waxing_gibbous_moon"] },
+	{ "category": "animals_and_nature", "char": "🌗", "name": "last_quarter_moon", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
+	{ "category": "animals_and_nature", "char": "🌘", "name": "waning_crescent_moon", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
+	{ "category": "animals_and_nature", "char": "🌑", "name": "new_moon", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
+	{ "category": "animals_and_nature", "char": "🌒", "name": "waxing_crescent_moon", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
+	{ "category": "animals_and_nature", "char": "🌓", "name": "first_quarter_moon", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
+	{ "category": "animals_and_nature", "char": "🌔", "name": "waxing_gibbous_moon", "keywords": ["nature", "night", "sky", "gray", "twilight", "planet", "space", "evening", "sleep"] },
+	{ "category": "animals_and_nature", "char": "🌚", "name": "new_moon_with_face", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
+	{ "category": "animals_and_nature", "char": "🌝", "name": "full_moon_with_face", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
+	{ "category": "animals_and_nature", "char": "🌛", "name": "first_quarter_moon_with_face", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
+	{ "category": "animals_and_nature", "char": "🌜", "name": "last_quarter_moon_with_face", "keywords": ["nature", "twilight", "planet", "space", "night", "evening", "sleep"] },
+	{ "category": "animals_and_nature", "char": "🌞", "name": "sun_with_face", "keywords": ["nature", "morning", "sky"] },
+	{ "category": "animals_and_nature", "char": "🌙", "name": "crescent_moon", "keywords": ["night", "sleep", "sky", "evening", "magic"] },
+	{ "category": "animals_and_nature", "char": "⭐", "name": "star", "keywords": ["night", "yellow"] },
+	{ "category": "animals_and_nature", "char": "🌟", "name": "star2", "keywords": ["night", "sparkle", "awesome", "good", "magic"] },
+	{ "category": "animals_and_nature", "char": "💫", "name": "dizzy", "keywords": ["star", "sparkle", "shoot", "magic"] },
+	{ "category": "animals_and_nature", "char": "✨", "name": "sparkles", "keywords": ["stars", "shine", "shiny", "cool", "awesome", "good", "magic"] },
+	{ "category": "animals_and_nature", "char": "☄", "name": "comet", "keywords": ["space"] },
+	{ "category": "animals_and_nature", "char": "☀️", "name": "sunny", "keywords": ["weather", "nature", "brightness", "summer", "beach", "spring"] },
+	{ "category": "animals_and_nature", "char": "🌤", "name": "sun_behind_small_cloud", "keywords": ["weather"] },
+	{ "category": "animals_and_nature", "char": "⛅", "name": "partly_sunny", "keywords": ["weather", "nature", "cloudy", "morning", "fall", "spring"] },
+	{ "category": "animals_and_nature", "char": "🌥", "name": "sun_behind_large_cloud", "keywords": ["weather"] },
+	{ "category": "animals_and_nature", "char": "🌦", "name": "sun_behind_rain_cloud", "keywords": ["weather"] },
+	{ "category": "animals_and_nature", "char": "☁️", "name": "cloud", "keywords": ["weather", "sky"] },
+	{ "category": "animals_and_nature", "char": "🌧", "name": "cloud_with_rain", "keywords": ["weather"] },
+	{ "category": "animals_and_nature", "char": "⛈", "name": "cloud_with_lightning_and_rain", "keywords": ["weather", "lightning"] },
+	{ "category": "animals_and_nature", "char": "🌩", "name": "cloud_with_lightning", "keywords": ["weather", "thunder"] },
+	{ "category": "animals_and_nature", "char": "⚡", "name": "zap", "keywords": ["thunder", "weather", "lightning bolt", "fast"] },
+	{ "category": "animals_and_nature", "char": "🔥", "name": "fire", "keywords": ["hot", "cook", "flame"] },
+	{ "category": "animals_and_nature", "char": "💥", "name": "boom", "keywords": ["bomb", "explode", "explosion", "collision", "blown"] },
+	{ "category": "animals_and_nature", "char": "❄️", "name": "snowflake", "keywords": ["winter", "season", "cold", "weather", "christmas", "xmas"] },
+	{ "category": "animals_and_nature", "char": "🌨", "name": "cloud_with_snow", "keywords": ["weather"] },
+	{ "category": "animals_and_nature", "char": "⛄", "name": "snowman", "keywords": ["winter", "season", "cold", "weather", "christmas", "xmas", "frozen", "without_snow"] },
+	{ "category": "animals_and_nature", "char": "☃", "name": "snowman_with_snow", "keywords": ["winter", "season", "cold", "weather", "christmas", "xmas", "frozen"] },
+	{ "category": "animals_and_nature", "char": "🌬", "name": "wind_face", "keywords": ["gust", "air"] },
+	{ "category": "animals_and_nature", "char": "💨", "name": "dash", "keywords": ["wind", "air", "fast", "shoo", "fart", "smoke", "puff"] },
+	{ "category": "animals_and_nature", "char": "🌪", "name": "tornado", "keywords": ["weather", "cyclone", "twister"] },
+	{ "category": "animals_and_nature", "char": "🌫", "name": "fog", "keywords": ["weather"] },
+	{ "category": "animals_and_nature", "char": "☂", "name": "open_umbrella", "keywords": ["weather", "spring"] },
+	{ "category": "animals_and_nature", "char": "☔", "name": "umbrella", "keywords": ["rainy", "weather", "spring"] },
+	{ "category": "animals_and_nature", "char": "💧", "name": "droplet", "keywords": ["water", "drip", "faucet", "spring"] },
+	{ "category": "animals_and_nature", "char": "💦", "name": "sweat_drops", "keywords": ["water", "drip", "oops"] },
+	{ "category": "animals_and_nature", "char": "🌊", "name": "ocean", "keywords": ["sea", "water", "wave", "nature", "tsunami", "disaster"] },
+	{ "category": "animals_and_nature", "char": "\uD83E\uDEB7", "name": "lotus", "keywords": [] },
+	{ "category": "animals_and_nature", "char": "\uD83E\uDEB8", "name": "coral", "keywords": [] },
+	{ "category": "animals_and_nature", "char": "\uD83E\uDEB9", "name": "empty_nest", "keywords": [] },
+	{ "category": "animals_and_nature", "char": "\uD83E\uDEBA", "name": "nest_with_eggs", "keywords": [] },
+	{ "category": "food_and_drink", "char": "🍏", "name": "green_apple", "keywords": ["fruit", "nature"] },
+	{ "category": "food_and_drink", "char": "🍎", "name": "apple", "keywords": ["fruit", "mac", "school"] },
+	{ "category": "food_and_drink", "char": "🍐", "name": "pear", "keywords": ["fruit", "nature", "food"] },
+	{ "category": "food_and_drink", "char": "🍊", "name": "tangerine", "keywords": ["food", "fruit", "nature", "orange"] },
+	{ "category": "food_and_drink", "char": "🍋", "name": "lemon", "keywords": ["fruit", "nature"] },
+	{ "category": "food_and_drink", "char": "🍌", "name": "banana", "keywords": ["fruit", "food", "monkey"] },
+	{ "category": "food_and_drink", "char": "🍉", "name": "watermelon", "keywords": ["fruit", "food", "picnic", "summer"] },
+	{ "category": "food_and_drink", "char": "🍇", "name": "grapes", "keywords": ["fruit", "food", "wine"] },
+	{ "category": "food_and_drink", "char": "🍓", "name": "strawberry", "keywords": ["fruit", "food", "nature"] },
+	{ "category": "food_and_drink", "char": "🍈", "name": "melon", "keywords": ["fruit", "nature", "food"] },
+	{ "category": "food_and_drink", "char": "🍒", "name": "cherries", "keywords": ["food", "fruit"] },
+	{ "category": "food_and_drink", "char": "🍑", "name": "peach", "keywords": ["fruit", "nature", "food"] },
+	{ "category": "food_and_drink", "char": "🍍", "name": "pineapple", "keywords": ["fruit", "nature", "food"] },
+	{ "category": "food_and_drink", "char": "🥥", "name": "coconut", "keywords": ["fruit", "nature", "food", "palm"] },
+	{ "category": "food_and_drink", "char": "🥝", "name": "kiwi_fruit", "keywords": ["fruit", "food"] },
+	{ "category": "food_and_drink", "char": "🥭", "name": "mango", "keywords": ["fruit", "food", "tropical"] },
+	{ "category": "food_and_drink", "char": "🥑", "name": "avocado", "keywords": ["fruit", "food"] },
+	{ "category": "food_and_drink", "char": "🥦", "name": "broccoli", "keywords": ["fruit", "food", "vegetable"] },
+	{ "category": "food_and_drink", "char": "🍅", "name": "tomato", "keywords": ["fruit", "vegetable", "nature", "food"] },
+	{ "category": "food_and_drink", "char": "🍆", "name": "eggplant", "keywords": ["vegetable", "nature", "food", "aubergine"] },
+	{ "category": "food_and_drink", "char": "🥒", "name": "cucumber", "keywords": ["fruit", "food", "pickle"] },
+	{ "category": "food_and_drink", "char": "🫐", "name": "blueberries", "keywords": ["fruit", "food"] },
+	{ "category": "food_and_drink", "char": "🫒", "name": "olive", "keywords": ["fruit", "food"] },
+	{ "category": "food_and_drink", "char": "🫑", "name": "bell_pepper", "keywords": ["fruit", "food"] },
+	{ "category": "food_and_drink", "char": "🥕", "name": "carrot", "keywords": ["vegetable", "food", "orange"] },
+	{ "category": "food_and_drink", "char": "🌶", "name": "hot_pepper", "keywords": ["food", "spicy", "chilli", "chili"] },
+	{ "category": "food_and_drink", "char": "🥔", "name": "potato", "keywords": ["food", "tuber", "vegatable", "starch"] },
+	{ "category": "food_and_drink", "char": "🌽", "name": "corn", "keywords": ["food", "vegetable", "plant"] },
+	{ "category": "food_and_drink", "char": "🥬", "name": "leafy_greens", "keywords": ["food", "vegetable", "plant", "bok choy", "cabbage", "kale", "lettuce"] },
+	{ "category": "food_and_drink", "char": "🍠", "name": "sweet_potato", "keywords": ["food", "nature"] },
+	{ "category": "food_and_drink", "char": "🥜", "name": "peanuts", "keywords": ["food", "nut"] },
+	{ "category": "food_and_drink", "char": "🧄", "name": "garlic", "keywords": ["food"] },
+	{ "category": "food_and_drink", "char": "🧅", "name": "onion", "keywords": ["food"] },
+	{ "category": "food_and_drink", "char": "🍯", "name": "honey_pot", "keywords": ["bees", "sweet", "kitchen"] },
+	{ "category": "food_and_drink", "char": "🥐", "name": "croissant", "keywords": ["food", "bread", "french"] },
+	{ "category": "food_and_drink", "char": "🍞", "name": "bread", "keywords": ["food", "wheat", "breakfast", "toast"] },
+	{ "category": "food_and_drink", "char": "🥖", "name": "baguette_bread", "keywords": ["food", "bread", "french"] },
+	{ "category": "food_and_drink", "char": "🥯", "name": "bagel", "keywords": ["food", "bread", "bakery", "schmear"] },
+	{ "category": "food_and_drink", "char": "🥨", "name": "pretzel", "keywords": ["food", "bread", "twisted"] },
+	{ "category": "food_and_drink", "char": "🧀", "name": "cheese", "keywords": ["food", "chadder"] },
+	{ "category": "food_and_drink", "char": "🥚", "name": "egg", "keywords": ["food", "chicken", "breakfast"] },
+	{ "category": "food_and_drink", "char": "🥓", "name": "bacon", "keywords": ["food", "breakfast", "pork", "pig", "meat"] },
+	{ "category": "food_and_drink", "char": "🥩", "name": "steak", "keywords": ["food", "cow", "meat", "cut", "chop", "lambchop", "porkchop"] },
+	{ "category": "food_and_drink", "char": "🥞", "name": "pancakes", "keywords": ["food", "breakfast", "flapjacks", "hotcakes"] },
+	{ "category": "food_and_drink", "char": "🍗", "name": "poultry_leg", "keywords": ["food", "meat", "drumstick", "bird", "chicken", "turkey"] },
+	{ "category": "food_and_drink", "char": "🍖", "name": "meat_on_bone", "keywords": ["good", "food", "drumstick"] },
+	{ "category": "food_and_drink", "char": "🦴", "name": "bone", "keywords": ["skeleton"] },
+	{ "category": "food_and_drink", "char": "🍤", "name": "fried_shrimp", "keywords": ["food", "animal", "appetizer", "summer"] },
+	{ "category": "food_and_drink", "char": "🍳", "name": "fried_egg", "keywords": ["food", "breakfast", "kitchen", "egg"] },
+	{ "category": "food_and_drink", "char": "🍔", "name": "hamburger", "keywords": ["meat", "fast food", "beef", "cheeseburger", "mcdonalds", "burger king"] },
+	{ "category": "food_and_drink", "char": "🍟", "name": "fries", "keywords": ["chips", "snack", "fast food"] },
+	{ "category": "food_and_drink", "char": "🥙", "name": "stuffed_flatbread", "keywords": ["food", "flatbread", "stuffed", "gyro"] },
+	{ "category": "food_and_drink", "char": "🌭", "name": "hotdog", "keywords": ["food", "frankfurter"] },
+	{ "category": "food_and_drink", "char": "🍕", "name": "pizza", "keywords": ["food", "party"] },
+	{ "category": "food_and_drink", "char": "🥪", "name": "sandwich", "keywords": ["food", "lunch", "bread"] },
+	{ "category": "food_and_drink", "char": "🥫", "name": "canned_food", "keywords": ["food", "soup"] },
+	{ "category": "food_and_drink", "char": "🍝", "name": "spaghetti", "keywords": ["food", "italian", "noodle"] },
+	{ "category": "food_and_drink", "char": "🌮", "name": "taco", "keywords": ["food", "mexican"] },
+	{ "category": "food_and_drink", "char": "🌯", "name": "burrito", "keywords": ["food", "mexican"] },
+	{ "category": "food_and_drink", "char": "🥗", "name": "green_salad", "keywords": ["food", "healthy", "lettuce"] },
+	{ "category": "food_and_drink", "char": "🥘", "name": "shallow_pan_of_food", "keywords": ["food", "cooking", "casserole", "paella"] },
+	{ "category": "food_and_drink", "char": "🍜", "name": "ramen", "keywords": ["food", "japanese", "noodle", "chopsticks"] },
+	{ "category": "food_and_drink", "char": "🍲", "name": "stew", "keywords": ["food", "meat", "soup"] },
+	{ "category": "food_and_drink", "char": "🍥", "name": "fish_cake", "keywords": ["food", "japan", "sea", "beach", "narutomaki", "pink", "swirl", "kamaboko", "surimi", "ramen"] },
+	{ "category": "food_and_drink", "char": "🥠", "name": "fortune_cookie", "keywords": ["food", "prophecy"] },
+	{ "category": "food_and_drink", "char": "🍣", "name": "sushi", "keywords": ["food", "fish", "japanese", "rice"] },
+	{ "category": "food_and_drink", "char": "🍱", "name": "bento", "keywords": ["food", "japanese", "box"] },
+	{ "category": "food_and_drink", "char": "🍛", "name": "curry", "keywords": ["food", "spicy", "hot", "indian"] },
+	{ "category": "food_and_drink", "char": "🍙", "name": "rice_ball", "keywords": ["food", "japanese"] },
+	{ "category": "food_and_drink", "char": "🍚", "name": "rice", "keywords": ["food", "china", "asian"] },
+	{ "category": "food_and_drink", "char": "🍘", "name": "rice_cracker", "keywords": ["food", "japanese"] },
+	{ "category": "food_and_drink", "char": "🍢", "name": "oden", "keywords": ["food", "japanese"] },
+	{ "category": "food_and_drink", "char": "🍡", "name": "dango", "keywords": ["food", "dessert", "sweet", "japanese", "barbecue", "meat"] },
+	{ "category": "food_and_drink", "char": "🍧", "name": "shaved_ice", "keywords": ["hot", "dessert", "summer"] },
+	{ "category": "food_and_drink", "char": "🍨", "name": "ice_cream", "keywords": ["food", "hot", "dessert"] },
+	{ "category": "food_and_drink", "char": "🍦", "name": "icecream", "keywords": ["food", "hot", "dessert", "summer"] },
+	{ "category": "food_and_drink", "char": "🥧", "name": "pie", "keywords": ["food", "dessert", "pastry"] },
+	{ "category": "food_and_drink", "char": "🍰", "name": "cake", "keywords": ["food", "dessert"] },
+	{ "category": "food_and_drink", "char": "🧁", "name": "cupcake", "keywords": ["food", "dessert", "bakery", "sweet"] },
+	{ "category": "food_and_drink", "char": "🥮", "name": "moon_cake", "keywords": ["food", "autumn"] },
+	{ "category": "food_and_drink", "char": "🎂", "name": "birthday", "keywords": ["food", "dessert", "cake"] },
+	{ "category": "food_and_drink", "char": "🍮", "name": "custard", "keywords": ["dessert", "food"] },
+	{ "category": "food_and_drink", "char": "🍬", "name": "candy", "keywords": ["snack", "dessert", "sweet", "lolly"] },
+	{ "category": "food_and_drink", "char": "🍭", "name": "lollipop", "keywords": ["food", "snack", "candy", "sweet"] },
+	{ "category": "food_and_drink", "char": "🍫", "name": "chocolate_bar", "keywords": ["food", "snack", "dessert", "sweet"] },
+	{ "category": "food_and_drink", "char": "🍿", "name": "popcorn", "keywords": ["food", "movie theater", "films", "snack"] },
+	{ "category": "food_and_drink", "char": "🥟", "name": "dumpling", "keywords": ["food", "empanada", "pierogi", "potsticker"] },
+	{ "category": "food_and_drink", "char": "🍩", "name": "doughnut", "keywords": ["food", "dessert", "snack", "sweet", "donut"] },
+	{ "category": "food_and_drink", "char": "🍪", "name": "cookie", "keywords": ["food", "snack", "oreo", "chocolate", "sweet", "dessert"] },
+	{ "category": "food_and_drink", "char": "🧇", "name": "waffle", "keywords": ["food"] },
+	{ "category": "food_and_drink", "char": "🧆", "name": "falafel", "keywords": ["food"] },
+	{ "category": "food_and_drink", "char": "🧈", "name": "butter", "keywords": ["food"] },
+	{ "category": "food_and_drink", "char": "🦪", "name": "oyster", "keywords": ["food"] },
+	{ "category": "food_and_drink", "char": "🫓", "name": "flatbread", "keywords": ["food"] },
+	{ "category": "food_and_drink", "char": "🫔", "name": "tamale", "keywords": ["food"] },
+	{ "category": "food_and_drink", "char": "🫕", "name": "fondue", "keywords": ["food"] },
+	{ "category": "food_and_drink", "char": "🥛", "name": "milk_glass", "keywords": ["beverage", "drink", "cow"] },
+	{ "category": "food_and_drink", "char": "🍺", "name": "beer", "keywords": ["relax", "beverage", "drink", "drunk", "party", "pub", "summer", "alcohol", "booze"] },
+	{ "category": "food_and_drink", "char": "🍻", "name": "beers", "keywords": ["relax", "beverage", "drink", "drunk", "party", "pub", "summer", "alcohol", "booze"] },
+	{ "category": "food_and_drink", "char": "🥂", "name": "clinking_glasses", "keywords": ["beverage", "drink", "party", "alcohol", "celebrate", "cheers", "wine", "champagne", "toast"] },
+	{ "category": "food_and_drink", "char": "🍷", "name": "wine_glass", "keywords": ["drink", "beverage", "drunk", "alcohol", "booze"] },
+	{ "category": "food_and_drink", "char": "🥃", "name": "tumbler_glass", "keywords": ["drink", "beverage", "drunk", "alcohol", "liquor", "booze", "bourbon", "scotch", "whisky", "glass", "shot"] },
+	{ "category": "food_and_drink", "char": "🍸", "name": "cocktail", "keywords": ["drink", "drunk", "alcohol", "beverage", "booze", "mojito"] },
+	{ "category": "food_and_drink", "char": "🍹", "name": "tropical_drink", "keywords": ["beverage", "cocktail", "summer", "beach", "alcohol", "booze", "mojito"] },
+	{ "category": "food_and_drink", "char": "🍾", "name": "champagne", "keywords": ["drink", "wine", "bottle", "celebration"] },
+	{ "category": "food_and_drink", "char": "🍶", "name": "sake", "keywords": ["wine", "drink", "drunk", "beverage", "japanese", "alcohol", "booze"] },
+	{ "category": "food_and_drink", "char": "🍵", "name": "tea", "keywords": ["drink", "bowl", "breakfast", "green", "british"] },
+	{ "category": "food_and_drink", "char": "🥤", "name": "cup_with_straw", "keywords": ["drink", "soda"] },
+	{ "category": "food_and_drink", "char": "☕", "name": "coffee", "keywords": ["beverage", "caffeine", "latte", "espresso"] },
+	{ "category": "food_and_drink", "char": "🫖", "name": "teapot", "keywords": [] },
+	{ "category": "food_and_drink", "char": "🧋", "name": "bubble_tea", "keywords": ["tapioca"] },
+	{ "category": "food_and_drink", "char": "🍼", "name": "baby_bottle", "keywords": ["food", "container", "milk"] },
+	{ "category": "food_and_drink", "char": "🧃", "name": "beverage_box", "keywords": ["food", "drink"] },
+	{ "category": "food_and_drink", "char": "🧉", "name": "mate", "keywords": ["food", "drink"] },
+	{ "category": "food_and_drink", "char": "🧊", "name": "ice_cube", "keywords": ["food"] },
+	{ "category": "food_and_drink", "char": "🧂", "name": "salt", "keywords": ["condiment", "shaker"] },
+	{ "category": "food_and_drink", "char": "🥄", "name": "spoon", "keywords": ["cutlery", "kitchen", "tableware"] },
+	{ "category": "food_and_drink", "char": "🍴", "name": "fork_and_knife", "keywords": ["cutlery", "kitchen"] },
+	{ "category": "food_and_drink", "char": "🍽", "name": "plate_with_cutlery", "keywords": ["food", "eat", "meal", "lunch", "dinner", "restaurant"] },
+	{ "category": "food_and_drink", "char": "🥣", "name": "bowl_with_spoon", "keywords": ["food", "breakfast", "cereal", "oatmeal", "porridge"] },
+	{ "category": "food_and_drink", "char": "🥡", "name": "takeout_box", "keywords": ["food", "leftovers"] },
+	{ "category": "food_and_drink", "char": "🥢", "name": "chopsticks", "keywords": ["food"] },
+	{ "category": "food_and_drink", "char": "\uD83E\uDED7", "name": "pouring_liquid", "keywords": [] },
+	{ "category": "food_and_drink", "char": "\uD83E\uDED8", "name": "beans", "keywords": [] },
+	{ "category": "food_and_drink", "char": "\uD83E\uDED9", "name": "jar", "keywords": [] },
+	{ "category": "activity", "char": "⚽", "name": "soccer", "keywords": ["sports", "football"] },
+	{ "category": "activity", "char": "🏀", "name": "basketball", "keywords": ["sports", "balls", "NBA"] },
+	{ "category": "activity", "char": "🏈", "name": "football", "keywords": ["sports", "balls", "NFL"] },
+	{ "category": "activity", "char": "⚾", "name": "baseball", "keywords": ["sports", "balls"] },
+	{ "category": "activity", "char": "🥎", "name": "softball", "keywords": ["sports", "balls"] },
+	{ "category": "activity", "char": "🎾", "name": "tennis", "keywords": ["sports", "balls", "green"] },
+	{ "category": "activity", "char": "🏐", "name": "volleyball", "keywords": ["sports", "balls"] },
+	{ "category": "activity", "char": "🏉", "name": "rugby_football", "keywords": ["sports", "team"] },
+	{ "category": "activity", "char": "🥏", "name": "flying_disc", "keywords": ["sports", "frisbee", "ultimate"] },
+	{ "category": "activity", "char": "🎱", "name": "8ball", "keywords": ["pool", "hobby", "game", "luck", "magic"] },
+	{ "category": "activity", "char": "⛳", "name": "golf", "keywords": ["sports", "business", "flag", "hole", "summer"] },
+	{ "category": "activity", "char": "🏌️‍♀️", "name": "golfing_woman", "keywords": ["sports", "business", "woman", "female"] },
+	{ "category": "activity", "char": "🏌", "name": "golfing_man", "keywords": ["sports", "business"] },
+	{ "category": "activity", "char": "🏓", "name": "ping_pong", "keywords": ["sports", "pingpong"] },
+	{ "category": "activity", "char": "🏸", "name": "badminton", "keywords": ["sports"] },
+	{ "category": "activity", "char": "🥅", "name": "goal_net", "keywords": ["sports"] },
+	{ "category": "activity", "char": "🏒", "name": "ice_hockey", "keywords": ["sports"] },
+	{ "category": "activity", "char": "🏑", "name": "field_hockey", "keywords": ["sports"] },
+	{ "category": "activity", "char": "🥍", "name": "lacrosse", "keywords": ["sports", "ball", "stick"] },
+	{ "category": "activity", "char": "🏏", "name": "cricket", "keywords": ["sports"] },
+	{ "category": "activity", "char": "🎿", "name": "ski", "keywords": ["sports", "winter", "cold", "snow"] },
+	{ "category": "activity", "char": "⛷", "name": "skier", "keywords": ["sports", "winter", "snow"] },
+	{ "category": "activity", "char": "🏂", "name": "snowboarder", "keywords": ["sports", "winter"] },
+	{ "category": "activity", "char": "🤺", "name": "person_fencing", "keywords": ["sports", "fencing", "sword"] },
+	{ "category": "activity", "char": "🤼‍♀️", "name": "women_wrestling", "keywords": ["sports", "wrestlers"] },
+	{ "category": "activity", "char": "🤼‍♂️", "name": "men_wrestling", "keywords": ["sports", "wrestlers"] },
+	{ "category": "activity", "char": "🤸‍♀️", "name": "woman_cartwheeling", "keywords": ["gymnastics"] },
+	{ "category": "activity", "char": "🤸‍♂️", "name": "man_cartwheeling", "keywords": ["gymnastics"] },
+	{ "category": "activity", "char": "🤾‍♀️", "name": "woman_playing_handball", "keywords": ["sports"] },
+	{ "category": "activity", "char": "🤾‍♂️", "name": "man_playing_handball", "keywords": ["sports"] },
+	{ "category": "activity", "char": "⛸", "name": "ice_skate", "keywords": ["sports"] },
+	{ "category": "activity", "char": "🥌", "name": "curling_stone", "keywords": ["sports"] },
+	{ "category": "activity", "char": "🛹", "name": "skateboard", "keywords": ["board"] },
+	{ "category": "activity", "char": "🛷", "name": "sled", "keywords": ["sleigh", "luge", "toboggan"] },
+	{ "category": "activity", "char": "🏹", "name": "bow_and_arrow", "keywords": ["sports"] },
+	{ "category": "activity", "char": "🎣", "name": "fishing_pole_and_fish", "keywords": ["food", "hobby", "summer"] },
+	{ "category": "activity", "char": "🥊", "name": "boxing_glove", "keywords": ["sports", "fighting"] },
+	{ "category": "activity", "char": "🥋", "name": "martial_arts_uniform", "keywords": ["judo", "karate", "taekwondo"] },
+	{ "category": "activity", "char": "🚣‍♀️", "name": "rowing_woman", "keywords": ["sports", "hobby", "water", "ship", "woman", "female"] },
+	{ "category": "activity", "char": "🚣", "name": "rowing_man", "keywords": ["sports", "hobby", "water", "ship"] },
+	{ "category": "activity", "char": "🧗‍♀️", "name": "climbing_woman", "keywords": ["sports", "hobby", "woman", "female", "rock"] },
+	{ "category": "activity", "char": "🧗‍♂️", "name": "climbing_man", "keywords": ["sports", "hobby", "man", "male", "rock"] },
+	{ "category": "activity", "char": "🏊‍♀️", "name": "swimming_woman", "keywords": ["sports", "exercise", "human", "athlete", "water", "summer", "woman", "female"] },
+	{ "category": "activity", "char": "🏊", "name": "swimming_man", "keywords": ["sports", "exercise", "human", "athlete", "water", "summer"] },
+	{ "category": "activity", "char": "🤽‍♀️", "name": "woman_playing_water_polo", "keywords": ["sports", "pool"] },
+	{ "category": "activity", "char": "🤽‍♂️", "name": "man_playing_water_polo", "keywords": ["sports", "pool"] },
+	{ "category": "activity", "char": "🧘‍♀️", "name": "woman_in_lotus_position", "keywords": ["woman", "female", "meditation", "yoga", "serenity", "zen", "mindfulness"] },
+	{ "category": "activity", "char": "🧘‍♂️", "name": "man_in_lotus_position", "keywords": ["man", "male", "meditation", "yoga", "serenity", "zen", "mindfulness"] },
+	{ "category": "activity", "char": "🏄‍♀️", "name": "surfing_woman", "keywords": ["sports", "ocean", "sea", "summer", "beach", "woman", "female"] },
+	{ "category": "activity", "char": "🏄", "name": "surfing_man", "keywords": ["sports", "ocean", "sea", "summer", "beach"] },
+	{ "category": "activity", "char": "🛀", "name": "bath", "keywords": ["clean", "shower", "bathroom"] },
+	{ "category": "activity", "char": "⛹️‍♀️", "name": "basketball_woman", "keywords": ["sports", "human", "woman", "female"] },
+	{ "category": "activity", "char": "⛹", "name": "basketball_man", "keywords": ["sports", "human"] },
+	{ "category": "activity", "char": "🏋️‍♀️", "name": "weight_lifting_woman", "keywords": ["sports", "training", "exercise", "woman", "female"] },
+	{ "category": "activity", "char": "🏋", "name": "weight_lifting_man", "keywords": ["sports", "training", "exercise"] },
+	{ "category": "activity", "char": "🚴‍♀️", "name": "biking_woman", "keywords": ["sports", "bike", "exercise", "hipster", "woman", "female"] },
+	{ "category": "activity", "char": "🚴", "name": "biking_man", "keywords": ["sports", "bike", "exercise", "hipster"] },
+	{ "category": "activity", "char": "🚵‍♀️", "name": "mountain_biking_woman", "keywords": ["transportation", "sports", "human", "race", "bike", "woman", "female"] },
+	{ "category": "activity", "char": "🚵", "name": "mountain_biking_man", "keywords": ["transportation", "sports", "human", "race", "bike"] },
+	{ "category": "activity", "char": "🏇", "name": "horse_racing", "keywords": ["animal", "betting", "competition", "gambling", "luck"] },
+	{ "category": "activity", "char": "🤿", "name": "diving_mask", "keywords": ["sports"] },
+	{ "category": "activity", "char": "🪀", "name": "yo_yo", "keywords": ["sports"] },
+	{ "category": "activity", "char": "🪁", "name": "kite", "keywords": ["sports"] },
+	{ "category": "activity", "char": "🦺", "name": "safety_vest", "keywords": ["sports"] },
+	{ "category": "activity", "char": "🪡", "name": "sewing_needle", "keywords": [] },
+	{ "category": "activity", "char": "🪢", "name": "knot", "keywords": [] },
+	{ "category": "activity", "char": "🕴", "name": "business_suit_levitating", "keywords": ["suit", "business", "levitate", "hover", "jump"] },
+	{ "category": "activity", "char": "🏆", "name": "trophy", "keywords": ["win", "award", "contest", "place", "ftw", "ceremony"] },
+	{ "category": "activity", "char": "🎽", "name": "running_shirt_with_sash", "keywords": ["play", "pageant"] },
+	{ "category": "activity", "char": "🏅", "name": "medal_sports", "keywords": ["award", "winning"] },
+	{ "category": "activity", "char": "🎖", "name": "medal_military", "keywords": ["award", "winning", "army"] },
+	{ "category": "activity", "char": "🥇", "name": "1st_place_medal", "keywords": ["award", "winning", "first"] },
+	{ "category": "activity", "char": "🥈", "name": "2nd_place_medal", "keywords": ["award", "second"] },
+	{ "category": "activity", "char": "🥉", "name": "3rd_place_medal", "keywords": ["award", "third"] },
+	{ "category": "activity", "char": "🎗", "name": "reminder_ribbon", "keywords": ["sports", "cause", "support", "awareness"] },
+	{ "category": "activity", "char": "🏵", "name": "rosette", "keywords": ["flower", "decoration", "military"] },
+	{ "category": "activity", "char": "🎫", "name": "ticket", "keywords": ["event", "concert", "pass"] },
+	{ "category": "activity", "char": "🎟", "name": "tickets", "keywords": ["sports", "concert", "entrance"] },
+	{ "category": "activity", "char": "🎭", "name": "performing_arts", "keywords": ["acting", "theater", "drama"] },
+	{ "category": "activity", "char": "🎨", "name": "art", "keywords": ["design", "paint", "draw", "colors"] },
+	{ "category": "activity", "char": "🎪", "name": "circus_tent", "keywords": ["festival", "carnival", "party"] },
+	{ "category": "activity", "char": "🤹‍♀️", "name": "woman_juggling", "keywords": ["juggle", "balance", "skill", "multitask"] },
+	{ "category": "activity", "char": "🤹‍♂️", "name": "man_juggling", "keywords": ["juggle", "balance", "skill", "multitask"] },
+	{ "category": "activity", "char": "🎤", "name": "microphone", "keywords": ["sound", "music", "PA", "sing", "talkshow"] },
+	{ "category": "activity", "char": "🎧", "name": "headphones", "keywords": ["music", "score", "gadgets"] },
+	{ "category": "activity", "char": "🎼", "name": "musical_score", "keywords": ["treble", "clef", "compose"] },
+	{ "category": "activity", "char": "🎹", "name": "musical_keyboard", "keywords": ["piano", "instrument", "compose"] },
+	{ "category": "activity", "char": "🥁", "name": "drum", "keywords": ["music", "instrument", "drumsticks", "snare"] },
+	{ "category": "activity", "char": "🎷", "name": "saxophone", "keywords": ["music", "instrument", "jazz", "blues"] },
+	{ "category": "activity", "char": "🎺", "name": "trumpet", "keywords": ["music", "brass"] },
+	{ "category": "activity", "char": "🎸", "name": "guitar", "keywords": ["music", "instrument"] },
+	{ "category": "activity", "char": "🎻", "name": "violin", "keywords": ["music", "instrument", "orchestra", "symphony"] },
+	{ "category": "activity", "char": "🪕", "name": "banjo", "keywords": ["music", "instrument"] },
+	{ "category": "activity", "char": "🪗", "name": "accordion", "keywords": ["music", "instrument"] },
+	{ "category": "activity", "char": "🪘", "name": "long_drum", "keywords": ["music", "instrument"] },
+	{ "category": "activity", "char": "🎬", "name": "clapper", "keywords": ["movie", "film", "record"] },
+	{ "category": "activity", "char": "🎮", "name": "video_game", "keywords": ["play", "console", "PS4", "controller"] },
+	{ "category": "activity", "char": "👾", "name": "space_invader", "keywords": ["game", "arcade", "play"] },
+	{ "category": "activity", "char": "🎯", "name": "dart", "keywords": ["game", "play", "bar", "target", "bullseye"] },
+	{ "category": "activity", "char": "🎲", "name": "game_die", "keywords": ["dice", "random", "tabletop", "play", "luck"] },
+	{ "category": "activity", "char": "♟️", "name": "chess_pawn", "keywords": ["expendable"] },
+	{ "category": "activity", "char": "🎰", "name": "slot_machine", "keywords": ["bet", "gamble", "vegas", "fruit machine", "luck", "casino"] },
+	{ "category": "activity", "char": "🧩", "name": "jigsaw", "keywords": ["interlocking", "puzzle", "piece"] },
+	{ "category": "activity", "char": "🎳", "name": "bowling", "keywords": ["sports", "fun", "play"] },
+	{ "category": "activity", "char": "🪄", "name": "magic_wand", "keywords": [] },
+	{ "category": "activity", "char": "🪅", "name": "pinata", "keywords": [] },
+	{ "category": "activity", "char": "🪆", "name": "nesting_dolls", "keywords": [] },
+	{ "category": "activity", "char": "\uD83E\uDEAC", "name": "hamsa", "keywords": [] },
+	{ "category": "activity", "char": "\uD83E\uDEA9", "name": "mirror_ball", "keywords": [] },
+	{ "category": "travel_and_places", "char": "🚗", "name": "red_car", "keywords": ["red", "transportation", "vehicle"] },
+	{ "category": "travel_and_places", "char": "🚕", "name": "taxi", "keywords": ["uber", "vehicle", "cars", "transportation"] },
+	{ "category": "travel_and_places", "char": "🚙", "name": "blue_car", "keywords": ["transportation", "vehicle"] },
+	{ "category": "travel_and_places", "char": "🚌", "name": "bus", "keywords": ["car", "vehicle", "transportation"] },
+	{ "category": "travel_and_places", "char": "🚎", "name": "trolleybus", "keywords": ["bart", "transportation", "vehicle"] },
+	{ "category": "travel_and_places", "char": "🏎", "name": "racing_car", "keywords": ["sports", "race", "fast", "formula", "f1"] },
+	{ "category": "travel_and_places", "char": "🚓", "name": "police_car", "keywords": ["vehicle", "cars", "transportation", "law", "legal", "enforcement"] },
+	{ "category": "travel_and_places", "char": "🚑", "name": "ambulance", "keywords": ["health", "911", "hospital"] },
+	{ "category": "travel_and_places", "char": "🚒", "name": "fire_engine", "keywords": ["transportation", "cars", "vehicle"] },
+	{ "category": "travel_and_places", "char": "🚐", "name": "minibus", "keywords": ["vehicle", "car", "transportation"] },
+	{ "category": "travel_and_places", "char": "🚚", "name": "truck", "keywords": ["cars", "transportation"] },
+	{ "category": "travel_and_places", "char": "🚛", "name": "articulated_lorry", "keywords": ["vehicle", "cars", "transportation", "express"] },
+	{ "category": "travel_and_places", "char": "🚜", "name": "tractor", "keywords": ["vehicle", "car", "farming", "agriculture"] },
+	{ "category": "travel_and_places", "char": "🛴", "name": "kick_scooter", "keywords": ["vehicle", "kick", "razor"] },
+	{ "category": "travel_and_places", "char": "🏍", "name": "motorcycle", "keywords": ["race", "sports", "fast"] },
+	{ "category": "travel_and_places", "char": "🚲", "name": "bike", "keywords": ["sports", "bicycle", "exercise", "hipster"] },
+	{ "category": "travel_and_places", "char": "🛵", "name": "motor_scooter", "keywords": ["vehicle", "vespa", "sasha"] },
+	{ "category": "travel_and_places", "char": "🦽", "name": "manual_wheelchair", "keywords": ["vehicle"] },
+	{ "category": "travel_and_places", "char": "🦼", "name": "motorized_wheelchair", "keywords": ["vehicle"] },
+	{ "category": "travel_and_places", "char": "🛺", "name": "auto_rickshaw", "keywords": ["vehicle"] },
+	{ "category": "travel_and_places", "char": "🪂", "name": "parachute", "keywords": ["vehicle"] },
+	{ "category": "travel_and_places", "char": "🚨", "name": "rotating_light", "keywords": ["police", "ambulance", "911", "emergency", "alert", "error", "pinged", "law", "legal"] },
+	{ "category": "travel_and_places", "char": "🚔", "name": "oncoming_police_car", "keywords": ["vehicle", "law", "legal", "enforcement", "911"] },
+	{ "category": "travel_and_places", "char": "🚍", "name": "oncoming_bus", "keywords": ["vehicle", "transportation"] },
+	{ "category": "travel_and_places", "char": "🚘", "name": "oncoming_automobile", "keywords": ["car", "vehicle", "transportation"] },
+	{ "category": "travel_and_places", "char": "🚖", "name": "oncoming_taxi", "keywords": ["vehicle", "cars", "uber"] },
+	{ "category": "travel_and_places", "char": "🚡", "name": "aerial_tramway", "keywords": ["transportation", "vehicle", "ski"] },
+	{ "category": "travel_and_places", "char": "🚠", "name": "mountain_cableway", "keywords": ["transportation", "vehicle", "ski"] },
+	{ "category": "travel_and_places", "char": "🚟", "name": "suspension_railway", "keywords": ["vehicle", "transportation"] },
+	{ "category": "travel_and_places", "char": "🚃", "name": "railway_car", "keywords": ["transportation", "vehicle", "train"] },
+	{ "category": "travel_and_places", "char": "🚋", "name": "train", "keywords": ["transportation", "vehicle", "carriage", "public", "travel"] },
+	{ "category": "travel_and_places", "char": "🚝", "name": "monorail", "keywords": ["transportation", "vehicle"] },
+	{ "category": "travel_and_places", "char": "🚄", "name": "bullettrain_side", "keywords": ["transportation", "vehicle"] },
+	{ "category": "travel_and_places", "char": "🚅", "name": "bullettrain_front", "keywords": ["transportation", "vehicle", "speed", "fast", "public", "travel"] },
+	{ "category": "travel_and_places", "char": "🚈", "name": "light_rail", "keywords": ["transportation", "vehicle"] },
+	{ "category": "travel_and_places", "char": "🚞", "name": "mountain_railway", "keywords": ["transportation", "vehicle"] },
+	{ "category": "travel_and_places", "char": "🚂", "name": "steam_locomotive", "keywords": ["transportation", "vehicle", "train"] },
+	{ "category": "travel_and_places", "char": "🚆", "name": "train2", "keywords": ["transportation", "vehicle"] },
+	{ "category": "travel_and_places", "char": "🚇", "name": "metro", "keywords": ["transportation", "blue-square", "mrt", "underground", "tube"] },
+	{ "category": "travel_and_places", "char": "🚊", "name": "tram", "keywords": ["transportation", "vehicle"] },
+	{ "category": "travel_and_places", "char": "🚉", "name": "station", "keywords": ["transportation", "vehicle", "public"] },
+	{ "category": "travel_and_places", "char": "🛸", "name": "flying_saucer", "keywords": ["transportation", "vehicle", "ufo"] },
+	{ "category": "travel_and_places", "char": "🚁", "name": "helicopter", "keywords": ["transportation", "vehicle", "fly"] },
+	{ "category": "travel_and_places", "char": "🛩", "name": "small_airplane", "keywords": ["flight", "transportation", "fly", "vehicle"] },
+	{ "category": "travel_and_places", "char": "✈️", "name": "airplane", "keywords": ["vehicle", "transportation", "flight", "fly"] },
+	{ "category": "travel_and_places", "char": "🛫", "name": "flight_departure", "keywords": ["airport", "flight", "landing"] },
+	{ "category": "travel_and_places", "char": "🛬", "name": "flight_arrival", "keywords": ["airport", "flight", "boarding"] },
+	{ "category": "travel_and_places", "char": "⛵", "name": "sailboat", "keywords": ["ship", "summer", "transportation", "water", "sailing"] },
+	{ "category": "travel_and_places", "char": "🛥", "name": "motor_boat", "keywords": ["ship"] },
+	{ "category": "travel_and_places", "char": "🚤", "name": "speedboat", "keywords": ["ship", "transportation", "vehicle", "summer"] },
+	{ "category": "travel_and_places", "char": "⛴", "name": "ferry", "keywords": ["boat", "ship", "yacht"] },
+	{ "category": "travel_and_places", "char": "🛳", "name": "passenger_ship", "keywords": ["yacht", "cruise", "ferry"] },
+	{ "category": "travel_and_places", "char": "🚀", "name": "rocket", "keywords": ["launch", "ship", "staffmode", "NASA", "outer space", "outer_space", "fly"] },
+	{ "category": "travel_and_places", "char": "🛰", "name": "artificial_satellite", "keywords": ["communication", "gps", "orbit", "spaceflight", "NASA", "ISS"] },
+	{ "category": "travel_and_places", "char": "🛻", "name": "pickup_truck", "keywords": ["car"] },
+	{ "category": "travel_and_places", "char": "🛼", "name": "roller_skate", "keywords": [] },
+	{ "category": "travel_and_places", "char": "💺", "name": "seat", "keywords": ["sit", "airplane", "transport", "bus", "flight", "fly"] },
+	{ "category": "travel_and_places", "char": "🛶", "name": "canoe", "keywords": ["boat", "paddle", "water", "ship"] },
+	{ "category": "travel_and_places", "char": "⚓", "name": "anchor", "keywords": ["ship", "ferry", "sea", "boat"] },
+	{ "category": "travel_and_places", "char": "🚧", "name": "construction", "keywords": ["wip", "progress", "caution", "warning"] },
+	{ "category": "travel_and_places", "char": "⛽", "name": "fuelpump", "keywords": ["gas station", "petroleum"] },
+	{ "category": "travel_and_places", "char": "🚏", "name": "busstop", "keywords": ["transportation", "wait"] },
+	{ "category": "travel_and_places", "char": "🚦", "name": "vertical_traffic_light", "keywords": ["transportation", "driving"] },
+	{ "category": "travel_and_places", "char": "🚥", "name": "traffic_light", "keywords": ["transportation", "signal"] },
+	{ "category": "travel_and_places", "char": "🏁", "name": "checkered_flag", "keywords": ["contest", "finishline", "race", "gokart"] },
+	{ "category": "travel_and_places", "char": "🚢", "name": "ship", "keywords": ["transportation", "titanic", "deploy"] },
+	{ "category": "travel_and_places", "char": "🎡", "name": "ferris_wheel", "keywords": ["photo", "carnival", "londoneye"] },
+	{ "category": "travel_and_places", "char": "🎢", "name": "roller_coaster", "keywords": ["carnival", "playground", "photo", "fun"] },
+	{ "category": "travel_and_places", "char": "🎠", "name": "carousel_horse", "keywords": ["photo", "carnival"] },
+	{ "category": "travel_and_places", "char": "🏗", "name": "building_construction", "keywords": ["wip", "working", "progress"] },
+	{ "category": "travel_and_places", "char": "🌁", "name": "foggy", "keywords": ["photo", "mountain"] },
+	{ "category": "travel_and_places", "char": "🏭", "name": "factory", "keywords": ["building", "industry", "pollution", "smoke"] },
+	{ "category": "travel_and_places", "char": "⛲", "name": "fountain", "keywords": ["photo", "summer", "water", "fresh"] },
+	{ "category": "travel_and_places", "char": "🎑", "name": "rice_scene", "keywords": ["photo", "japan", "asia", "tsukimi"] },
+	{ "category": "travel_and_places", "char": "⛰", "name": "mountain", "keywords": ["photo", "nature", "environment"] },
+	{ "category": "travel_and_places", "char": "🏔", "name": "mountain_snow", "keywords": ["photo", "nature", "environment", "winter", "cold"] },
+	{ "category": "travel_and_places", "char": "🗻", "name": "mount_fuji", "keywords": ["photo", "mountain", "nature", "japanese"] },
+	{ "category": "travel_and_places", "char": "🌋", "name": "volcano", "keywords": ["photo", "nature", "disaster"] },
+	{ "category": "travel_and_places", "char": "🗾", "name": "japan", "keywords": ["nation", "country", "japanese", "asia"] },
+	{ "category": "travel_and_places", "char": "🏕", "name": "camping", "keywords": ["photo", "outdoors", "tent"] },
+	{ "category": "travel_and_places", "char": "⛺", "name": "tent", "keywords": ["photo", "camping", "outdoors"] },
+	{ "category": "travel_and_places", "char": "🏞", "name": "national_park", "keywords": ["photo", "environment", "nature"] },
+	{ "category": "travel_and_places", "char": "🛣", "name": "motorway", "keywords": ["road", "cupertino", "interstate", "highway"] },
+	{ "category": "travel_and_places", "char": "🛤", "name": "railway_track", "keywords": ["train", "transportation"] },
+	{ "category": "travel_and_places", "char": "🌅", "name": "sunrise", "keywords": ["morning", "view", "vacation", "photo"] },
+	{ "category": "travel_and_places", "char": "🌄", "name": "sunrise_over_mountains", "keywords": ["view", "vacation", "photo"] },
+	{ "category": "travel_and_places", "char": "🏜", "name": "desert", "keywords": ["photo", "warm", "saharah"] },
+	{ "category": "travel_and_places", "char": "🏖", "name": "beach_umbrella", "keywords": ["weather", "summer", "sunny", "sand", "mojito"] },
+	{ "category": "travel_and_places", "char": "🏝", "name": "desert_island", "keywords": ["photo", "tropical", "mojito"] },
+	{ "category": "travel_and_places", "char": "🌇", "name": "city_sunrise", "keywords": ["photo", "good morning", "dawn"] },
+	{ "category": "travel_and_places", "char": "🌆", "name": "city_sunset", "keywords": ["photo", "evening", "sky", "buildings"] },
+	{ "category": "travel_and_places", "char": "🏙", "name": "cityscape", "keywords": ["photo", "night life", "urban"] },
+	{ "category": "travel_and_places", "char": "🌃", "name": "night_with_stars", "keywords": ["evening", "city", "downtown"] },
+	{ "category": "travel_and_places", "char": "🌉", "name": "bridge_at_night", "keywords": ["photo", "sanfrancisco"] },
+	{ "category": "travel_and_places", "char": "🌌", "name": "milky_way", "keywords": ["photo", "space", "stars"] },
+	{ "category": "travel_and_places", "char": "🌠", "name": "stars", "keywords": ["night", "photo"] },
+	{ "category": "travel_and_places", "char": "🎇", "name": "sparkler", "keywords": ["stars", "night", "shine"] },
+	{ "category": "travel_and_places", "char": "🎆", "name": "fireworks", "keywords": ["photo", "festival", "carnival", "congratulations"] },
+	{ "category": "travel_and_places", "char": "🌈", "name": "rainbow", "keywords": ["nature", "happy", "unicorn_face", "photo", "sky", "spring"] },
+	{ "category": "travel_and_places", "char": "🏘", "name": "houses", "keywords": ["buildings", "photo"] },
+	{ "category": "travel_and_places", "char": "🏰", "name": "european_castle", "keywords": ["building", "royalty", "history"] },
+	{ "category": "travel_and_places", "char": "🏯", "name": "japanese_castle", "keywords": ["photo", "building"] },
+	{ "category": "travel_and_places", "char": "🗼", "name": "tokyo_tower", "keywords": ["photo", "japanese"] },
+	{ "category": "travel_and_places", "char": "", "name": "shibuya_109", "keywords": ["photo", "japanese"] },
+	{ "category": "travel_and_places", "char": "🏟", "name": "stadium", "keywords": ["photo", "place", "sports", "concert", "venue"] },
+	{ "category": "travel_and_places", "char": "🗽", "name": "statue_of_liberty", "keywords": ["american", "newyork"] },
+	{ "category": "travel_and_places", "char": "🏠", "name": "house", "keywords": ["building", "home"] },
+	{ "category": "travel_and_places", "char": "🏡", "name": "house_with_garden", "keywords": ["home", "plant", "nature"] },
+	{ "category": "travel_and_places", "char": "🏚", "name": "derelict_house", "keywords": ["abandon", "evict", "broken", "building"] },
+	{ "category": "travel_and_places", "char": "🏢", "name": "office", "keywords": ["building", "bureau", "work"] },
+	{ "category": "travel_and_places", "char": "🏬", "name": "department_store", "keywords": ["building", "shopping", "mall"] },
+	{ "category": "travel_and_places", "char": "🏣", "name": "post_office", "keywords": ["building", "envelope", "communication"] },
+	{ "category": "travel_and_places", "char": "🏤", "name": "european_post_office", "keywords": ["building", "email"] },
+	{ "category": "travel_and_places", "char": "🏥", "name": "hospital", "keywords": ["building", "health", "surgery", "doctor"] },
+	{ "category": "travel_and_places", "char": "🏦", "name": "bank", "keywords": ["building", "money", "sales", "cash", "business", "enterprise"] },
+	{ "category": "travel_and_places", "char": "🏨", "name": "hotel", "keywords": ["building", "accomodation", "checkin"] },
+	{ "category": "travel_and_places", "char": "🏪", "name": "convenience_store", "keywords": ["building", "shopping", "groceries"] },
+	{ "category": "travel_and_places", "char": "🏫", "name": "school", "keywords": ["building", "student", "education", "learn", "teach"] },
+	{ "category": "travel_and_places", "char": "🏩", "name": "love_hotel", "keywords": ["like", "affection", "dating"] },
+	{ "category": "travel_and_places", "char": "💒", "name": "wedding", "keywords": ["love", "like", "affection", "couple", "marriage", "bride", "groom"] },
+	{ "category": "travel_and_places", "char": "🏛", "name": "classical_building", "keywords": ["art", "culture", "history"] },
+	{ "category": "travel_and_places", "char": "⛪", "name": "church", "keywords": ["building", "religion", "christ"] },
+	{ "category": "travel_and_places", "char": "🕌", "name": "mosque", "keywords": ["islam", "worship", "minaret"] },
+	{ "category": "travel_and_places", "char": "🕍", "name": "synagogue", "keywords": ["judaism", "worship", "temple", "jewish"] },
+	{ "category": "travel_and_places", "char": "🕋", "name": "kaaba", "keywords": ["mecca", "mosque", "islam"] },
+	{ "category": "travel_and_places", "char": "⛩", "name": "shinto_shrine", "keywords": ["temple", "japan", "kyoto"] },
+	{ "category": "travel_and_places", "char": "🛕", "name": "hindu_temple", "keywords": ["temple"] },
+	{ "category": "travel_and_places", "char": "🪨", "name": "rock", "keywords": [] },
+	{ "category": "travel_and_places", "char": "🪵", "name": "wood", "keywords": [] },
+	{ "category": "travel_and_places", "char": "🛖", "name": "hut", "keywords": [] },
+	{ "category": "travel_and_places", "char": "\uD83D\uDEDD", "name": "playground_slide", "keywords": [] },
+	{ "category": "travel_and_places", "char": "\uD83D\uDEDE", "name": "wheel", "keywords": [] },
+	{ "category": "travel_and_places", "char": "\uD83D\uDEDF", "name": "ring_buoy", "keywords": [] },
+	{ "category": "objects", "char": "⌚", "name": "watch", "keywords": ["time", "accessories"] },
+	{ "category": "objects", "char": "📱", "name": "iphone", "keywords": ["technology", "apple", "gadgets", "dial"] },
+	{ "category": "objects", "char": "📲", "name": "calling", "keywords": ["iphone", "incoming"] },
+	{ "category": "objects", "char": "💻", "name": "computer", "keywords": ["technology", "laptop", "screen", "display", "monitor"] },
+	{ "category": "objects", "char": "⌨", "name": "keyboard", "keywords": ["technology", "computer", "type", "input", "text"] },
+	{ "category": "objects", "char": "🖥", "name": "desktop_computer", "keywords": ["technology", "computing", "screen"] },
+	{ "category": "objects", "char": "🖨", "name": "printer", "keywords": ["paper", "ink"] },
+	{ "category": "objects", "char": "🖱", "name": "computer_mouse", "keywords": ["click"] },
+	{ "category": "objects", "char": "🖲", "name": "trackball", "keywords": ["technology", "trackpad"] },
+	{ "category": "objects", "char": "🕹", "name": "joystick", "keywords": ["game", "play"] },
+	{ "category": "objects", "char": "🗜", "name": "clamp", "keywords": ["tool"] },
+	{ "category": "objects", "char": "💽", "name": "minidisc", "keywords": ["technology", "record", "data", "disk", "90s"] },
+	{ "category": "objects", "char": "💾", "name": "floppy_disk", "keywords": ["oldschool", "technology", "save", "90s", "80s"] },
+	{ "category": "objects", "char": "💿", "name": "cd", "keywords": ["technology", "dvd", "disk", "disc", "90s"] },
+	{ "category": "objects", "char": "📀", "name": "dvd", "keywords": ["cd", "disk", "disc"] },
+	{ "category": "objects", "char": "📼", "name": "vhs", "keywords": ["record", "video", "oldschool", "90s", "80s"] },
+	{ "category": "objects", "char": "📷", "name": "camera", "keywords": ["gadgets", "photography"] },
+	{ "category": "objects", "char": "📸", "name": "camera_flash", "keywords": ["photography", "gadgets"] },
+	{ "category": "objects", "char": "📹", "name": "video_camera", "keywords": ["film", "record"] },
+	{ "category": "objects", "char": "🎥", "name": "movie_camera", "keywords": ["film", "record"] },
+	{ "category": "objects", "char": "📽", "name": "film_projector", "keywords": ["video", "tape", "record", "movie"] },
+	{ "category": "objects", "char": "🎞", "name": "film_strip", "keywords": ["movie"] },
+	{ "category": "objects", "char": "📞", "name": "telephone_receiver", "keywords": ["technology", "communication", "dial"] },
+	{ "category": "objects", "char": "☎️", "name": "phone", "keywords": ["technology", "communication", "dial", "telephone"] },
+	{ "category": "objects", "char": "📟", "name": "pager", "keywords": ["bbcall", "oldschool", "90s"] },
+	{ "category": "objects", "char": "📠", "name": "fax", "keywords": ["communication", "technology"] },
+	{ "category": "objects", "char": "📺", "name": "tv", "keywords": ["technology", "program", "oldschool", "show", "television"] },
+	{ "category": "objects", "char": "📻", "name": "radio", "keywords": ["communication", "music", "podcast", "program"] },
+	{ "category": "objects", "char": "🎙", "name": "studio_microphone", "keywords": ["sing", "recording", "artist", "talkshow"] },
+	{ "category": "objects", "char": "🎚", "name": "level_slider", "keywords": ["scale"] },
+	{ "category": "objects", "char": "🎛", "name": "control_knobs", "keywords": ["dial"] },
+	{ "category": "objects", "char": "🧭", "name": "compass", "keywords": ["magnetic", "navigation", "orienteering"] },
+	{ "category": "objects", "char": "⏱", "name": "stopwatch", "keywords": ["time", "deadline"] },
+	{ "category": "objects", "char": "⏲", "name": "timer_clock", "keywords": ["alarm"] },
+	{ "category": "objects", "char": "⏰", "name": "alarm_clock", "keywords": ["time", "wake"] },
+	{ "category": "objects", "char": "🕰", "name": "mantelpiece_clock", "keywords": ["time"] },
+	{ "category": "objects", "char": "⏳", "name": "hourglass_flowing_sand", "keywords": ["oldschool", "time", "countdown"] },
+	{ "category": "objects", "char": "⌛", "name": "hourglass", "keywords": ["time", "clock", "oldschool", "limit", "exam", "quiz", "test"] },
+	{ "category": "objects", "char": "📡", "name": "satellite", "keywords": ["communication", "future", "radio", "space"] },
+	{ "category": "objects", "char": "🔋", "name": "battery", "keywords": ["power", "energy", "sustain"] },
+	{ "category": "objects", "char": "\uD83E\uDEAB", "name": "battery", "keywords": [] },
+	{ "category": "objects", "char": "🔌", "name": "electric_plug", "keywords": ["charger", "power"] },
+	{ "category": "objects", "char": "💡", "name": "bulb", "keywords": ["light", "electricity", "idea"] },
+	{ "category": "objects", "char": "🔦", "name": "flashlight", "keywords": ["dark", "camping", "sight", "night"] },
+	{ "category": "objects", "char": "🕯", "name": "candle", "keywords": ["fire", "wax"] },
+	{ "category": "objects", "char": "🧯", "name": "fire_extinguisher", "keywords": ["quench"] },
+	{ "category": "objects", "char": "🗑", "name": "wastebasket", "keywords": ["bin", "trash", "rubbish", "garbage", "toss"] },
+	{ "category": "objects", "char": "🛢", "name": "oil_drum", "keywords": ["barrell"] },
+	{ "category": "objects", "char": "💸", "name": "money_with_wings", "keywords": ["dollar", "bills", "payment", "sale"] },
+	{ "category": "objects", "char": "💵", "name": "dollar", "keywords": ["money", "sales", "bill", "currency"] },
+	{ "category": "objects", "char": "💴", "name": "yen", "keywords": ["money", "sales", "japanese", "dollar", "currency"] },
+	{ "category": "objects", "char": "💶", "name": "euro", "keywords": ["money", "sales", "dollar", "currency"] },
+	{ "category": "objects", "char": "💷", "name": "pound", "keywords": ["british", "sterling", "money", "sales", "bills", "uk", "england", "currency"] },
+	{ "category": "objects", "char": "💰", "name": "moneybag", "keywords": ["dollar", "payment", "coins", "sale"] },
+	{ "category": "objects", "char": "🪙", "name": "coin", "keywords": ["dollar", "payment", "coins", "sale"] },
+	{ "category": "objects", "char": "💳", "name": "credit_card", "keywords": ["money", "sales", "dollar", "bill", "payment", "shopping"] },
+	{ "category": "objects", "char": "\uD83E\uDEAB", "name": "identification_card", "keywords": [] },
+	{ "category": "objects", "char": "💎", "name": "gem", "keywords": ["blue", "ruby", "diamond", "jewelry"] },
+	{ "category": "objects", "char": "⚖", "name": "balance_scale", "keywords": ["law", "fairness", "weight"] },
+	{ "category": "objects", "char": "🧰", "name": "toolbox", "keywords": ["tools", "diy", "fix", "maintainer", "mechanic"] },
+	{ "category": "objects", "char": "🔧", "name": "wrench", "keywords": ["tools", "diy", "ikea", "fix", "maintainer"] },
+	{ "category": "objects", "char": "🔨", "name": "hammer", "keywords": ["tools", "build", "create"] },
+	{ "category": "objects", "char": "⚒", "name": "hammer_and_pick", "keywords": ["tools", "build", "create"] },
+	{ "category": "objects", "char": "🛠", "name": "hammer_and_wrench", "keywords": ["tools", "build", "create"] },
+	{ "category": "objects", "char": "⛏", "name": "pick", "keywords": ["tools", "dig"] },
+	{ "category": "objects", "char": "🪓", "name": "axe", "keywords": ["tools"] },
+	{ "category": "objects", "char": "🦯", "name": "probing_cane", "keywords": ["tools"] },
+	{ "category": "objects", "char": "🔩", "name": "nut_and_bolt", "keywords": ["handy", "tools", "fix"] },
+	{ "category": "objects", "char": "⚙", "name": "gear", "keywords": ["cog"] },
+	{ "category": "objects", "char": "🪃", "name": "boomerang", "keywords": ["tool"] },
+	{ "category": "objects", "char": "🪚", "name": "carpentry_saw", "keywords": ["tool"] },
+	{ "category": "objects", "char": "🪛", "name": "screwdriver", "keywords": ["tool"] },
+	{ "category": "objects", "char": "🪝", "name": "hook", "keywords": ["tool"] },
+	{ "category": "objects", "char": "🪜", "name": "ladder", "keywords": ["tool"] },
+	{ "category": "objects", "char": "🧱", "name": "brick", "keywords": ["bricks"] },
+	{ "category": "objects", "char": "⛓", "name": "chains", "keywords": ["lock", "arrest"] },
+	{ "category": "objects", "char": "🧲", "name": "magnet", "keywords": ["attraction", "magnetic"] },
+	{ "category": "objects", "char": "🔫", "name": "gun", "keywords": ["violence", "weapon", "pistol", "revolver"] },
+	{ "category": "objects", "char": "💣", "name": "bomb", "keywords": ["boom", "explode", "explosion", "terrorism"] },
+	{ "category": "objects", "char": "🧨", "name": "firecracker", "keywords": ["dynamite", "boom", "explode", "explosion", "explosive"] },
+	{ "category": "objects", "char": "🔪", "name": "hocho", "keywords": ["knife", "blade", "cutlery", "kitchen", "weapon"] },
+	{ "category": "objects", "char": "🗡", "name": "dagger", "keywords": ["weapon"] },
+	{ "category": "objects", "char": "⚔", "name": "crossed_swords", "keywords": ["weapon"] },
+	{ "category": "objects", "char": "🛡", "name": "shield", "keywords": ["protection", "security"] },
+	{ "category": "objects", "char": "🚬", "name": "smoking", "keywords": ["kills", "tobacco", "cigarette", "joint", "smoke"] },
+	{ "category": "objects", "char": "☠", "name": "skull_and_crossbones", "keywords": ["poison", "danger", "deadly", "scary", "death", "pirate", "evil"] },
+	{ "category": "objects", "char": "⚰", "name": "coffin", "keywords": ["vampire", "dead", "die", "death", "rip", "graveyard", "cemetery", "casket", "funeral", "box"] },
+	{ "category": "objects", "char": "⚱", "name": "funeral_urn", "keywords": ["dead", "die", "death", "rip", "ashes"] },
+	{ "category": "objects", "char": "🏺", "name": "amphora", "keywords": ["vase", "jar"] },
+	{ "category": "objects", "char": "🔮", "name": "crystal_ball", "keywords": ["disco", "party", "magic", "circus", "fortune_teller"] },
+	{ "category": "objects", "char": "📿", "name": "prayer_beads", "keywords": ["dhikr", "religious"] },
+	{ "category": "objects", "char": "🧿", "name": "nazar_amulet", "keywords": ["bead", "charm"] },
+	{ "category": "objects", "char": "💈", "name": "barber", "keywords": ["hair", "salon", "style"] },
+	{ "category": "objects", "char": "⚗", "name": "alembic", "keywords": ["distilling", "science", "experiment", "chemistry"] },
+	{ "category": "objects", "char": "🔭", "name": "telescope", "keywords": ["stars", "space", "zoom", "science", "astronomy"] },
+	{ "category": "objects", "char": "🔬", "name": "microscope", "keywords": ["laboratory", "experiment", "zoomin", "science", "study"] },
+	{ "category": "objects", "char": "🕳", "name": "hole", "keywords": ["embarrassing"] },
+	{ "category": "objects", "char": "💊", "name": "pill", "keywords": ["health", "medicine", "doctor", "pharmacy", "drug"] },
+	{ "category": "objects", "char": "💉", "name": "syringe", "keywords": ["health", "hospital", "drugs", "blood", "medicine", "needle", "doctor", "nurse"] },
+	{ "category": "objects", "char": "🩸", "name": "drop_of_blood", "keywords": ["health", "hospital", "medicine", "needle", "doctor", "nurse"] },
+	{ "category": "objects", "char": "🩹", "name": "adhesive_bandage", "keywords": ["health", "hospital", "medicine", "needle", "doctor", "nurse"] },
+	{ "category": "objects", "char": "🩺", "name": "stethoscope", "keywords": ["health", "hospital", "medicine", "needle", "doctor", "nurse"] },
+	{ "category": "objects", "char": "🪒", "name": "razor", "keywords": ["health"] },
+	{ "category": "objects", "char": "\uD83E\uDE7B", "name": "xray", "keywords": [] },
+	{ "category": "objects", "char": "\uD83E\uDE7C", "name": "crutch", "keywords": [] },
+	{ "category": "objects", "char": "🧬", "name": "dna", "keywords": ["biologist", "genetics", "life"] },
+	{ "category": "objects", "char": "🧫", "name": "petri_dish", "keywords": ["bacteria", "biology", "culture", "lab"] },
+	{ "category": "objects", "char": "🧪", "name": "test_tube", "keywords": ["chemistry", "experiment", "lab", "science"] },
+	{ "category": "objects", "char": "🌡", "name": "thermometer", "keywords": ["weather", "temperature", "hot", "cold"] },
+	{ "category": "objects", "char": "🧹", "name": "broom", "keywords": ["cleaning", "sweeping", "witch"] },
+	{ "category": "objects", "char": "🧺", "name": "basket", "keywords": ["laundry"] },
+	{ "category": "objects", "char": "🧻", "name": "toilet_paper", "keywords": ["roll"] },
+	{ "category": "objects", "char": "🏷", "name": "label", "keywords": ["sale", "tag"] },
+	{ "category": "objects", "char": "🔖", "name": "bookmark", "keywords": ["favorite", "label", "save"] },
+	{ "category": "objects", "char": "🚽", "name": "toilet", "keywords": ["restroom", "wc", "washroom", "bathroom", "potty"] },
+	{ "category": "objects", "char": "🚿", "name": "shower", "keywords": ["clean", "water", "bathroom"] },
+	{ "category": "objects", "char": "🛁", "name": "bathtub", "keywords": ["clean", "shower", "bathroom"] },
+	{ "category": "objects", "char": "🧼", "name": "soap", "keywords": ["bar", "bathing", "cleaning", "lather"] },
+	{ "category": "objects", "char": "🧽", "name": "sponge", "keywords": ["absorbing", "cleaning", "porous"] },
+	{ "category": "objects", "char": "🧴", "name": "lotion_bottle", "keywords": ["moisturizer", "sunscreen"] },
+	{ "category": "objects", "char": "🔑", "name": "key", "keywords": ["lock", "door", "password"] },
+	{ "category": "objects", "char": "🗝", "name": "old_key", "keywords": ["lock", "door", "password"] },
+	{ "category": "objects", "char": "🛋", "name": "couch_and_lamp", "keywords": ["read", "chill"] },
+	{ "category": "objects", "char": "🪔", "name": "diya_Lamp", "keywords": ["light", "oil"] },
+	{ "category": "objects", "char": "🛌", "name": "sleeping_bed", "keywords": ["bed", "rest"] },
+	{ "category": "objects", "char": "🛏", "name": "bed", "keywords": ["sleep", "rest"] },
+	{ "category": "objects", "char": "🚪", "name": "door", "keywords": ["house", "entry", "exit"] },
+	{ "category": "objects", "char": "🪑", "name": "chair", "keywords": ["house", "desk"] },
+	{ "category": "objects", "char": "🛎", "name": "bellhop_bell", "keywords": ["service"] },
+	{ "category": "objects", "char": "🧸", "name": "teddy_bear", "keywords": ["plush", "stuffed"] },
+	{ "category": "objects", "char": "🖼", "name": "framed_picture", "keywords": ["photography"] },
+	{ "category": "objects", "char": "🗺", "name": "world_map", "keywords": ["location", "direction"] },
+	{ "category": "objects", "char": "🛗", "name": "elevator", "keywords": ["household"] },
+	{ "category": "objects", "char": "🪞", "name": "mirror", "keywords": ["household"] },
+	{ "category": "objects", "char": "🪟", "name": "window", "keywords": ["household"] },
+	{ "category": "objects", "char": "🪠", "name": "plunger", "keywords": ["household"] },
+	{ "category": "objects", "char": "🪤", "name": "mouse_trap", "keywords": ["household"] },
+	{ "category": "objects", "char": "🪣", "name": "bucket", "keywords": ["household"] },
+	{ "category": "objects", "char": "🪥", "name": "toothbrush", "keywords": ["household"] },
+	{ "category": "objects", "char": "\uD83E\uDEE7", "name": "bubbles", "keywords": [] },
+	{ "category": "objects", "char": "⛱", "name": "parasol_on_ground", "keywords": ["weather", "summer"] },
+	{ "category": "objects", "char": "🗿", "name": "moyai", "keywords": ["rock", "easter island", "moai"] },
+	{ "category": "objects", "char": "🛍", "name": "shopping", "keywords": ["mall", "buy", "purchase"] },
+	{ "category": "objects", "char": "🛒", "name": "shopping_cart", "keywords": ["trolley"] },
+	{ "category": "objects", "char": "🎈", "name": "balloon", "keywords": ["party", "celebration", "birthday", "circus"] },
+	{ "category": "objects", "char": "🎏", "name": "flags", "keywords": ["fish", "japanese", "koinobori", "carp", "banner"] },
+	{ "category": "objects", "char": "🎀", "name": "ribbon", "keywords": ["decoration", "pink", "girl", "bowtie"] },
+	{ "category": "objects", "char": "🎁", "name": "gift", "keywords": ["present", "birthday", "christmas", "xmas"] },
+	{ "category": "objects", "char": "🎊", "name": "confetti_ball", "keywords": ["festival", "party", "birthday", "circus"] },
+	{ "category": "objects", "char": "🎉", "name": "tada", "keywords": ["party", "congratulations", "birthday", "magic", "circus", "celebration"] },
+	{ "category": "objects", "char": "🎎", "name": "dolls", "keywords": ["japanese", "toy", "kimono"] },
+	{ "category": "objects", "char": "🎐", "name": "wind_chime", "keywords": ["nature", "ding", "spring", "bell"] },
+	{ "category": "objects", "char": "🎌", "name": "crossed_flags", "keywords": ["japanese", "nation", "country", "border"] },
+	{ "category": "objects", "char": "🏮", "name": "izakaya_lantern", "keywords": ["light", "paper", "halloween", "spooky"] },
+	{ "category": "objects", "char": "🧧", "name": "red_envelope", "keywords": ["gift"] },
+	{ "category": "objects", "char": "✉️", "name": "email", "keywords": ["letter", "postal", "inbox", "communication"] },
+	{ "category": "objects", "char": "📩", "name": "envelope_with_arrow", "keywords": ["email", "communication"] },
+	{ "category": "objects", "char": "📨", "name": "incoming_envelope", "keywords": ["email", "inbox"] },
+	{ "category": "objects", "char": "📧", "name": "e-mail", "keywords": ["communication", "inbox"] },
+	{ "category": "objects", "char": "💌", "name": "love_letter", "keywords": ["email", "like", "affection", "envelope", "valentines"] },
+	{ "category": "objects", "char": "📮", "name": "postbox", "keywords": ["email", "letter", "envelope"] },
+	{ "category": "objects", "char": "📪", "name": "mailbox_closed", "keywords": ["email", "communication", "inbox"] },
+	{ "category": "objects", "char": "📫", "name": "mailbox", "keywords": ["email", "inbox", "communication"] },
+	{ "category": "objects", "char": "📬", "name": "mailbox_with_mail", "keywords": ["email", "inbox", "communication"] },
+	{ "category": "objects", "char": "📭", "name": "mailbox_with_no_mail", "keywords": ["email", "inbox"] },
+	{ "category": "objects", "char": "📦", "name": "package", "keywords": ["mail", "gift", "cardboard", "box", "moving"] },
+	{ "category": "objects", "char": "📯", "name": "postal_horn", "keywords": ["instrument", "music"] },
+	{ "category": "objects", "char": "📥", "name": "inbox_tray", "keywords": ["email", "documents"] },
+	{ "category": "objects", "char": "📤", "name": "outbox_tray", "keywords": ["inbox", "email"] },
+	{ "category": "objects", "char": "📜", "name": "scroll", "keywords": ["documents", "ancient", "history", "paper"] },
+	{ "category": "objects", "char": "📃", "name": "page_with_curl", "keywords": ["documents", "office", "paper"] },
+	{ "category": "objects", "char": "📑", "name": "bookmark_tabs", "keywords": ["favorite", "save", "order", "tidy"] },
+	{ "category": "objects", "char": "🧾", "name": "receipt", "keywords": ["accounting", "expenses"] },
+	{ "category": "objects", "char": "📊", "name": "bar_chart", "keywords": ["graph", "presentation", "stats"] },
+	{ "category": "objects", "char": "📈", "name": "chart_with_upwards_trend", "keywords": ["graph", "presentation", "stats", "recovery", "business", "economics", "money", "sales", "good", "success"] },
+	{ "category": "objects", "char": "📉", "name": "chart_with_downwards_trend", "keywords": ["graph", "presentation", "stats", "recession", "business", "economics", "money", "sales", "bad", "failure"] },
+	{ "category": "objects", "char": "📄", "name": "page_facing_up", "keywords": ["documents", "office", "paper", "information"] },
+	{ "category": "objects", "char": "📅", "name": "date", "keywords": ["calendar", "schedule"] },
+	{ "category": "objects", "char": "📆", "name": "calendar", "keywords": ["schedule", "date", "planning"] },
+	{ "category": "objects", "char": "🗓", "name": "spiral_calendar", "keywords": ["date", "schedule", "planning"] },
+	{ "category": "objects", "char": "📇", "name": "card_index", "keywords": ["business", "stationery"] },
+	{ "category": "objects", "char": "🗃", "name": "card_file_box", "keywords": ["business", "stationery"] },
+	{ "category": "objects", "char": "🗳", "name": "ballot_box", "keywords": ["election", "vote"] },
+	{ "category": "objects", "char": "🗄", "name": "file_cabinet", "keywords": ["filing", "organizing"] },
+	{ "category": "objects", "char": "📋", "name": "clipboard", "keywords": ["stationery", "documents"] },
+	{ "category": "objects", "char": "🗒", "name": "spiral_notepad", "keywords": ["memo", "stationery"] },
+	{ "category": "objects", "char": "📁", "name": "file_folder", "keywords": ["documents", "business", "office"] },
+	{ "category": "objects", "char": "📂", "name": "open_file_folder", "keywords": ["documents", "load"] },
+	{ "category": "objects", "char": "🗂", "name": "card_index_dividers", "keywords": ["organizing", "business", "stationery"] },
+	{ "category": "objects", "char": "🗞", "name": "newspaper_roll", "keywords": ["press", "headline"] },
+	{ "category": "objects", "char": "📰", "name": "newspaper", "keywords": ["press", "headline"] },
+	{ "category": "objects", "char": "📓", "name": "notebook", "keywords": ["stationery", "record", "notes", "paper", "study"] },
+	{ "category": "objects", "char": "📕", "name": "closed_book", "keywords": ["read", "library", "knowledge", "textbook", "learn"] },
+	{ "category": "objects", "char": "📗", "name": "green_book", "keywords": ["read", "library", "knowledge", "study"] },
+	{ "category": "objects", "char": "📘", "name": "blue_book", "keywords": ["read", "library", "knowledge", "learn", "study"] },
+	{ "category": "objects", "char": "📙", "name": "orange_book", "keywords": ["read", "library", "knowledge", "textbook", "study"] },
+	{ "category": "objects", "char": "📔", "name": "notebook_with_decorative_cover", "keywords": ["classroom", "notes", "record", "paper", "study"] },
+	{ "category": "objects", "char": "📒", "name": "ledger", "keywords": ["notes", "paper"] },
+	{ "category": "objects", "char": "📚", "name": "books", "keywords": ["literature", "library", "study"] },
+	{ "category": "objects", "char": "📖", "name": "open_book", "keywords": ["book", "read", "library", "knowledge", "literature", "learn", "study"] },
+	{ "category": "objects", "char": "🧷", "name": "safety_pin", "keywords": ["diaper"] },
+	{ "category": "objects", "char": "🔗", "name": "link", "keywords": ["rings", "url"] },
+	{ "category": "objects", "char": "📎", "name": "paperclip", "keywords": ["documents", "stationery"] },
+	{ "category": "objects", "char": "🖇", "name": "paperclips", "keywords": ["documents", "stationery"] },
+	{ "category": "objects", "char": "✂️", "name": "scissors", "keywords": ["stationery", "cut"] },
+	{ "category": "objects", "char": "📐", "name": "triangular_ruler", "keywords": ["stationery", "math", "architect", "sketch"] },
+	{ "category": "objects", "char": "📏", "name": "straight_ruler", "keywords": ["stationery", "calculate", "length", "math", "school", "drawing", "architect", "sketch"] },
+	{ "category": "objects", "char": "🧮", "name": "abacus", "keywords": ["calculation"] },
+	{ "category": "objects", "char": "📌", "name": "pushpin", "keywords": ["stationery", "mark", "here"] },
+	{ "category": "objects", "char": "📍", "name": "round_pushpin", "keywords": ["stationery", "location", "map", "here"] },
+	{ "category": "objects", "char": "🚩", "name": "triangular_flag_on_post", "keywords": ["mark", "milestone", "place"] },
+	{ "category": "objects", "char": "🏳", "name": "white_flag", "keywords": ["losing", "loser", "lost", "surrender", "give up", "fail"] },
+	{ "category": "objects", "char": "🏴", "name": "black_flag", "keywords": ["pirate"] },
+	{ "category": "objects", "char": "🏳️‍🌈", "name": "rainbow_flag", "keywords": ["flag", "rainbow", "pride", "gay", "lgbt", "glbt", "queer", "homosexual", "lesbian", "bisexual", "transgender"] },
+	{ "category": "objects", "char": "🏳️‍⚧️", "name": "transgender_flag", "keywords": ["flag", "transgender"] },
+	{ "category": "objects", "char": "🔐", "name": "closed_lock_with_key", "keywords": ["security", "privacy"] },
+	{ "category": "objects", "char": "🔒", "name": "lock", "keywords": ["security", "password", "padlock"] },
+	{ "category": "objects", "char": "🔓", "name": "unlock", "keywords": ["privacy", "security"] },
+	{ "category": "objects", "char": "🔏", "name": "lock_with_ink_pen", "keywords": ["security", "secret"] },
+	{ "category": "objects", "char": "🖊", "name": "pen", "keywords": ["stationery", "writing", "write"] },
+	{ "category": "objects", "char": "🖋", "name": "fountain_pen", "keywords": ["stationery", "writing", "write"] },
+	{ "category": "objects", "char": "✒️", "name": "black_nib", "keywords": ["pen", "stationery", "writing", "write"] },
+	{ "category": "objects", "char": "📝", "name": "memo", "keywords": ["write", "documents", "stationery", "pencil", "paper", "writing", "legal", "exam", "quiz", "test", "study", "compose"] },
+	{ "category": "objects", "char": "✏️", "name": "pencil2", "keywords": ["stationery", "write", "paper", "writing", "school", "study"] },
+	{ "category": "objects", "char": "🖍", "name": "crayon", "keywords": ["drawing", "creativity"] },
+	{ "category": "objects", "char": "🖌", "name": "paintbrush", "keywords": ["drawing", "creativity", "art"] },
+	{ "category": "objects", "char": "🔍", "name": "mag", "keywords": ["search", "zoom", "find", "detective"] },
+	{ "category": "objects", "char": "🔎", "name": "mag_right", "keywords": ["search", "zoom", "find", "detective"] },
+	{ "category": "objects", "char": "🪦", "name": "headstone", "keywords": [] },
+	{ "category": "objects", "char": "🪧", "name": "placard", "keywords": [] },
+	{ "category": "symbols", "char": "💯", "name": "100", "keywords": ["score", "perfect", "numbers", "century", "exam", "quiz", "test", "pass", "hundred"] },
+	{ "category": "symbols", "char": "🔢", "name": "1234", "keywords": ["numbers", "blue-square"] },
+	{ "category": "symbols", "char": "❤️", "name": "heart", "keywords": ["love", "like", "affection", "valentines"] },
+	{ "category": "symbols", "char": "🧡", "name": "orange_heart", "keywords": ["love", "like", "affection", "valentines"] },
+	{ "category": "symbols", "char": "💛", "name": "yellow_heart", "keywords": ["love", "like", "affection", "valentines"] },
+	{ "category": "symbols", "char": "💚", "name": "green_heart", "keywords": ["love", "like", "affection", "valentines"] },
+	{ "category": "symbols", "char": "💙", "name": "blue_heart", "keywords": ["love", "like", "affection", "valentines"] },
+	{ "category": "symbols", "char": "💜", "name": "purple_heart", "keywords": ["love", "like", "affection", "valentines"] },
+	{ "category": "symbols", "char": "🤎", "name": "brown_heart", "keywords": ["love", "like", "affection", "valentines"] },
+	{ "category": "symbols", "char": "🖤", "name": "black_heart", "keywords": ["love", "like", "affection", "valentines"] },
+	{ "category": "symbols", "char": "🤍", "name": "white_heart", "keywords": ["love", "like", "affection", "valentines"] },
+	{ "category": "symbols", "char": "💔", "name": "broken_heart", "keywords": ["sad", "sorry", "break", "heart", "heartbreak"] },
+	{ "category": "symbols", "char": "❣", "name": "heavy_heart_exclamation", "keywords": ["decoration", "love"] },
+	{ "category": "symbols", "char": "💕", "name": "two_hearts", "keywords": ["love", "like", "affection", "valentines", "heart"] },
+	{ "category": "symbols", "char": "💞", "name": "revolving_hearts", "keywords": ["love", "like", "affection", "valentines"] },
+	{ "category": "symbols", "char": "💓", "name": "heartbeat", "keywords": ["love", "like", "affection", "valentines", "pink", "heart"] },
+	{ "category": "symbols", "char": "💗", "name": "heartpulse", "keywords": ["like", "love", "affection", "valentines", "pink"] },
+	{ "category": "symbols", "char": "💖", "name": "sparkling_heart", "keywords": ["love", "like", "affection", "valentines"] },
+	{ "category": "symbols", "char": "💘", "name": "cupid", "keywords": ["love", "like", "heart", "affection", "valentines"] },
+	{ "category": "symbols", "char": "💝", "name": "gift_heart", "keywords": ["love", "valentines"] },
+	{ "category": "symbols", "char": "💟", "name": "heart_decoration", "keywords": ["purple-square", "love", "like"] },
+	{ "category": "symbols", "char": "\u2764\uFE0F\u200D\uD83D\uDD25", "name": "heart_on_fire", "keywords": [] },
+	{ "category": "symbols", "char": "\u2764\uFE0F\u200D\uD83E\uDE79", "name": "mending_heart", "keywords": [] },
+	{ "category": "symbols", "char": "☮", "name": "peace_symbol", "keywords": ["hippie"] },
+	{ "category": "symbols", "char": "✝", "name": "latin_cross", "keywords": ["christianity"] },
+	{ "category": "symbols", "char": "☪", "name": "star_and_crescent", "keywords": ["islam"] },
+	{ "category": "symbols", "char": "🕉", "name": "om", "keywords": ["hinduism", "buddhism", "sikhism", "jainism"] },
+	{ "category": "symbols", "char": "☸", "name": "wheel_of_dharma", "keywords": ["hinduism", "buddhism", "sikhism", "jainism"] },
+	{ "category": "symbols", "char": "✡", "name": "star_of_david", "keywords": ["judaism"] },
+	{ "category": "symbols", "char": "🔯", "name": "six_pointed_star", "keywords": ["purple-square", "religion", "jewish", "hexagram"] },
+	{ "category": "symbols", "char": "🕎", "name": "menorah", "keywords": ["hanukkah", "candles", "jewish"] },
+	{ "category": "symbols", "char": "☯", "name": "yin_yang", "keywords": ["balance"] },
+	{ "category": "symbols", "char": "☦", "name": "orthodox_cross", "keywords": ["suppedaneum", "religion"] },
+	{ "category": "symbols", "char": "🛐", "name": "place_of_worship", "keywords": ["religion", "church", "temple", "prayer"] },
+	{ "category": "symbols", "char": "⛎", "name": "ophiuchus", "keywords": ["sign", "purple-square", "constellation", "astrology"] },
+	{ "category": "symbols", "char": "♈", "name": "aries", "keywords": ["sign", "purple-square", "zodiac", "astrology"] },
+	{ "category": "symbols", "char": "♉", "name": "taurus", "keywords": ["purple-square", "sign", "zodiac", "astrology"] },
+	{ "category": "symbols", "char": "♊", "name": "gemini", "keywords": ["sign", "zodiac", "purple-square", "astrology"] },
+	{ "category": "symbols", "char": "♋", "name": "cancer", "keywords": ["sign", "zodiac", "purple-square", "astrology"] },
+	{ "category": "symbols", "char": "♌", "name": "leo", "keywords": ["sign", "purple-square", "zodiac", "astrology"] },
+	{ "category": "symbols", "char": "♍", "name": "virgo", "keywords": ["sign", "zodiac", "purple-square", "astrology"] },
+	{ "category": "symbols", "char": "♎", "name": "libra", "keywords": ["sign", "purple-square", "zodiac", "astrology"] },
+	{ "category": "symbols", "char": "♏", "name": "scorpius", "keywords": ["sign", "zodiac", "purple-square", "astrology", "scorpio"] },
+	{ "category": "symbols", "char": "♐", "name": "sagittarius", "keywords": ["sign", "zodiac", "purple-square", "astrology"] },
+	{ "category": "symbols", "char": "♑", "name": "capricorn", "keywords": ["sign", "zodiac", "purple-square", "astrology"] },
+	{ "category": "symbols", "char": "♒", "name": "aquarius", "keywords": ["sign", "purple-square", "zodiac", "astrology"] },
+	{ "category": "symbols", "char": "♓", "name": "pisces", "keywords": ["purple-square", "sign", "zodiac", "astrology"] },
+	{ "category": "symbols", "char": "🆔", "name": "id", "keywords": ["purple-square", "words"] },
+	{ "category": "symbols", "char": "⚛", "name": "atom_symbol", "keywords": ["science", "physics", "chemistry"] },
+	{ "category": "symbols", "char": "⚧️", "name": "transgender_symbol", "keywords": ["purple-square", "woman", "female", "toilet", "loo", "restroom", "gender"] },
+	{ "category": "symbols", "char": "🈳", "name": "u7a7a", "keywords": ["kanji", "japanese", "chinese", "empty", "sky", "blue-square", "aki"] },
+	{ "category": "symbols", "char": "🈹", "name": "u5272", "keywords": ["cut", "divide", "chinese", "kanji", "pink-square", "waribiki"] },
+	{ "category": "symbols", "char": "☢", "name": "radioactive", "keywords": ["nuclear", "danger"] },
+	{ "category": "symbols", "char": "☣", "name": "biohazard", "keywords": ["danger"] },
+	{ "category": "symbols", "char": "📴", "name": "mobile_phone_off", "keywords": ["mute", "orange-square", "silence", "quiet"] },
+	{ "category": "symbols", "char": "📳", "name": "vibration_mode", "keywords": ["orange-square", "phone"] },
+	{ "category": "symbols", "char": "🈶", "name": "u6709", "keywords": ["orange-square", "chinese", "have", "kanji", "ari"] },
+	{ "category": "symbols", "char": "🈚", "name": "u7121", "keywords": ["nothing", "chinese", "kanji", "japanese", "orange-square", "nashi"] },
+	{ "category": "symbols", "char": "🈸", "name": "u7533", "keywords": ["chinese", "japanese", "kanji", "orange-square", "moushikomi"] },
+	{ "category": "symbols", "char": "🈺", "name": "u55b6", "keywords": ["japanese", "opening hours", "orange-square", "eigyo"] },
+	{ "category": "symbols", "char": "🈷️", "name": "u6708", "keywords": ["chinese", "month", "moon", "japanese", "orange-square", "kanji", "tsuki", "tsukigime", "getsugaku"] },
+	{ "category": "symbols", "char": "✴️", "name": "eight_pointed_black_star", "keywords": ["orange-square", "shape", "polygon"] },
+	{ "category": "symbols", "char": "🆚", "name": "vs", "keywords": ["words", "orange-square"] },
+	{ "category": "symbols", "char": "🉑", "name": "accept", "keywords": ["ok", "good", "chinese", "kanji", "agree", "yes", "orange-circle"] },
+	{ "category": "symbols", "char": "💮", "name": "white_flower", "keywords": ["japanese", "spring"] },
+	{ "category": "symbols", "char": "🉐", "name": "ideograph_advantage", "keywords": ["chinese", "kanji", "obtain", "get", "circle"] },
+	{ "category": "symbols", "char": "㊙️", "name": "secret", "keywords": ["privacy", "chinese", "sshh", "kanji", "red-circle"] },
+	{ "category": "symbols", "char": "㊗️", "name": "congratulations", "keywords": ["chinese", "kanji", "japanese", "red-circle"] },
+	{ "category": "symbols", "char": "🈴", "name": "u5408", "keywords": ["japanese", "chinese", "join", "kanji", "red-square", "goukaku", "pass"] },
+	{ "category": "symbols", "char": "🈵", "name": "u6e80", "keywords": ["full", "chinese", "japanese", "red-square", "kanji", "man"] },
+	{ "category": "symbols", "char": "🈲", "name": "u7981", "keywords": ["kanji", "japanese", "chinese", "forbidden", "limit", "restricted", "red-square", "kinshi"] },
+	{ "category": "symbols", "char": "🅰️", "name": "a", "keywords": ["red-square", "alphabet", "letter"] },
+	{ "category": "symbols", "char": "🅱️", "name": "b", "keywords": ["red-square", "alphabet", "letter"] },
+	{ "category": "symbols", "char": "🆎", "name": "ab", "keywords": ["red-square", "alphabet"] },
+	{ "category": "symbols", "char": "🆑", "name": "cl", "keywords": ["alphabet", "words", "red-square"] },
+	{ "category": "symbols", "char": "🅾️", "name": "o2", "keywords": ["alphabet", "red-square", "letter"] },
+	{ "category": "symbols", "char": "🆘", "name": "sos", "keywords": ["help", "red-square", "words", "emergency", "911"] },
+	{ "category": "symbols", "char": "⛔", "name": "no_entry", "keywords": ["limit", "security", "privacy", "bad", "denied", "stop", "circle"] },
+	{ "category": "symbols", "char": "📛", "name": "name_badge", "keywords": ["fire", "forbid"] },
+	{ "category": "symbols", "char": "🚫", "name": "no_entry_sign", "keywords": ["forbid", "stop", "limit", "denied", "disallow", "circle"] },
+	{ "category": "symbols", "char": "❌", "name": "x", "keywords": ["no", "delete", "remove", "cancel", "red"] },
+	{ "category": "symbols", "char": "⭕", "name": "o", "keywords": ["circle", "round"] },
+	{ "category": "symbols", "char": "🛑", "name": "stop_sign", "keywords": ["stop"] },
+	{ "category": "symbols", "char": "💢", "name": "anger", "keywords": ["angry", "mad"] },
+	{ "category": "symbols", "char": "♨️", "name": "hotsprings", "keywords": ["bath", "warm", "relax"] },
+	{ "category": "symbols", "char": "🚷", "name": "no_pedestrians", "keywords": ["rules", "crossing", "walking", "circle"] },
+	{ "category": "symbols", "char": "🚯", "name": "do_not_litter", "keywords": ["trash", "bin", "garbage", "circle"] },
+	{ "category": "symbols", "char": "🚳", "name": "no_bicycles", "keywords": ["cyclist", "prohibited", "circle"] },
+	{ "category": "symbols", "char": "🚱", "name": "non-potable_water", "keywords": ["drink", "faucet", "tap", "circle"] },
+	{ "category": "symbols", "char": "🔞", "name": "underage", "keywords": ["18", "drink", "pub", "night", "minor", "circle"] },
+	{ "category": "symbols", "char": "📵", "name": "no_mobile_phones", "keywords": ["iphone", "mute", "circle"] },
+	{ "category": "symbols", "char": "❗", "name": "exclamation", "keywords": ["heavy_exclamation_mark", "danger", "surprise", "punctuation", "wow", "warning"] },
+	{ "category": "symbols", "char": "❕", "name": "grey_exclamation", "keywords": ["surprise", "punctuation", "gray", "wow", "warning"] },
+	{ "category": "symbols", "char": "❓", "name": "question", "keywords": ["doubt", "confused"] },
+	{ "category": "symbols", "char": "❔", "name": "grey_question", "keywords": ["doubts", "gray", "huh", "confused"] },
+	{ "category": "symbols", "char": "‼️", "name": "bangbang", "keywords": ["exclamation", "surprise"] },
+	{ "category": "symbols", "char": "⁉️", "name": "interrobang", "keywords": ["wat", "punctuation", "surprise"] },
+	{ "category": "symbols", "char": "🔅", "name": "low_brightness", "keywords": ["sun", "afternoon", "warm", "summer"] },
+	{ "category": "symbols", "char": "🔆", "name": "high_brightness", "keywords": ["sun", "light"] },
+	{ "category": "symbols", "char": "🔱", "name": "trident", "keywords": ["weapon", "spear"] },
+	{ "category": "symbols", "char": "⚜", "name": "fleur_de_lis", "keywords": ["decorative", "scout"] },
+	{ "category": "symbols", "char": "〽️", "name": "part_alternation_mark", "keywords": ["graph", "presentation", "stats", "business", "economics", "bad"] },
+	{ "category": "symbols", "char": "⚠️", "name": "warning", "keywords": ["exclamation", "wip", "alert", "error", "problem", "issue"] },
+	{ "category": "symbols", "char": "🚸", "name": "children_crossing", "keywords": ["school", "warning", "danger", "sign", "driving", "yellow-diamond"] },
+	{ "category": "symbols", "char": "🔰", "name": "beginner", "keywords": ["badge", "shield"] },
+	{ "category": "symbols", "char": "♻️", "name": "recycle", "keywords": ["arrow", "environment", "garbage", "trash"] },
+	{ "category": "symbols", "char": "🈯", "name": "u6307", "keywords": ["chinese", "point", "green-square", "kanji", "reserved", "shiteiseki"] },
+	{ "category": "symbols", "char": "💹", "name": "chart", "keywords": ["green-square", "graph", "presentation", "stats"] },
+	{ "category": "symbols", "char": "❇️", "name": "sparkle", "keywords": ["stars", "green-square", "awesome", "good", "fireworks"] },
+	{ "category": "symbols", "char": "✳️", "name": "eight_spoked_asterisk", "keywords": ["star", "sparkle", "green-square"] },
+	{ "category": "symbols", "char": "❎", "name": "negative_squared_cross_mark", "keywords": ["x", "green-square", "no", "deny"] },
+	{ "category": "symbols", "char": "✅", "name": "white_check_mark", "keywords": ["green-square", "ok", "agree", "vote", "election", "answer", "tick"] },
+	{ "category": "symbols", "char": "💠", "name": "diamond_shape_with_a_dot_inside", "keywords": ["jewel", "blue", "gem", "crystal", "fancy"] },
+	{ "category": "symbols", "char": "🌀", "name": "cyclone", "keywords": ["weather", "swirl", "blue", "cloud", "vortex", "spiral", "whirlpool", "spin", "tornado", "hurricane", "typhoon"] },
+	{ "category": "symbols", "char": "➿", "name": "loop", "keywords": ["tape", "cassette"] },
+	{ "category": "symbols", "char": "🌐", "name": "globe_with_meridians", "keywords": ["earth", "international", "world", "internet", "interweb", "i18n"] },
+	{ "category": "symbols", "char": "Ⓜ️", "name": "m", "keywords": ["alphabet", "blue-circle", "letter"] },
+	{ "category": "symbols", "char": "🏧", "name": "atm", "keywords": ["money", "sales", "cash", "blue-square", "payment", "bank"] },
+	{ "category": "symbols", "char": "🈂️", "name": "sa", "keywords": ["japanese", "blue-square", "katakana"] },
+	{ "category": "symbols", "char": "🛂", "name": "passport_control", "keywords": ["custom", "blue-square"] },
+	{ "category": "symbols", "char": "🛃", "name": "customs", "keywords": ["passport", "border", "blue-square"] },
+	{ "category": "symbols", "char": "🛄", "name": "baggage_claim", "keywords": ["blue-square", "airport", "transport"] },
+	{ "category": "symbols", "char": "🛅", "name": "left_luggage", "keywords": ["blue-square", "travel"] },
+	{ "category": "symbols", "char": "♿", "name": "wheelchair", "keywords": ["blue-square", "disabled", "a11y", "accessibility"] },
+	{ "category": "symbols", "char": "🚭", "name": "no_smoking", "keywords": ["cigarette", "blue-square", "smell", "smoke"] },
+	{ "category": "symbols", "char": "🚾", "name": "wc", "keywords": ["toilet", "restroom", "blue-square"] },
+	{ "category": "symbols", "char": "🅿️", "name": "parking", "keywords": ["cars", "blue-square", "alphabet", "letter"] },
+	{ "category": "symbols", "char": "🚰", "name": "potable_water", "keywords": ["blue-square", "liquid", "restroom", "cleaning", "faucet"] },
+	{ "category": "symbols", "char": "🚹", "name": "mens", "keywords": ["toilet", "restroom", "wc", "blue-square", "gender", "male"] },
+	{ "category": "symbols", "char": "🚺", "name": "womens", "keywords": ["purple-square", "woman", "female", "toilet", "loo", "restroom", "gender"] },
+	{ "category": "symbols", "char": "🚼", "name": "baby_symbol", "keywords": ["orange-square", "child"] },
+	{ "category": "symbols", "char": "🚻", "name": "restroom", "keywords": ["blue-square", "toilet", "refresh", "wc", "gender"] },
+	{ "category": "symbols", "char": "🚮", "name": "put_litter_in_its_place", "keywords": ["blue-square", "sign", "human", "info"] },
+	{ "category": "symbols", "char": "🎦", "name": "cinema", "keywords": ["blue-square", "record", "film", "movie", "curtain", "stage", "theater"] },
+	{ "category": "symbols", "char": "📶", "name": "signal_strength", "keywords": ["blue-square", "reception", "phone", "internet", "connection", "wifi", "bluetooth", "bars"] },
+	{ "category": "symbols", "char": "🈁", "name": "koko", "keywords": ["blue-square", "here", "katakana", "japanese", "destination"] },
+	{ "category": "symbols", "char": "🆖", "name": "ng", "keywords": ["blue-square", "words", "shape", "icon"] },
+	{ "category": "symbols", "char": "🆗", "name": "ok", "keywords": ["good", "agree", "yes", "blue-square"] },
+	{ "category": "symbols", "char": "🆙", "name": "up", "keywords": ["blue-square", "above", "high"] },
+	{ "category": "symbols", "char": "🆒", "name": "cool", "keywords": ["words", "blue-square"] },
+	{ "category": "symbols", "char": "🆕", "name": "new", "keywords": ["blue-square", "words", "start"] },
+	{ "category": "symbols", "char": "🆓", "name": "free", "keywords": ["blue-square", "words"] },
+	{ "category": "symbols", "char": "0️⃣", "name": "zero", "keywords": ["0", "numbers", "blue-square", "null"] },
+	{ "category": "symbols", "char": "1️⃣", "name": "one", "keywords": ["blue-square", "numbers", "1"] },
+	{ "category": "symbols", "char": "2️⃣", "name": "two", "keywords": ["numbers", "2", "prime", "blue-square"] },
+	{ "category": "symbols", "char": "3️⃣", "name": "three", "keywords": ["3", "numbers", "prime", "blue-square"] },
+	{ "category": "symbols", "char": "4️⃣", "name": "four", "keywords": ["4", "numbers", "blue-square"] },
+	{ "category": "symbols", "char": "5️⃣", "name": "five", "keywords": ["5", "numbers", "blue-square", "prime"] },
+	{ "category": "symbols", "char": "6️⃣", "name": "six", "keywords": ["6", "numbers", "blue-square"] },
+	{ "category": "symbols", "char": "7️⃣", "name": "seven", "keywords": ["7", "numbers", "blue-square", "prime"] },
+	{ "category": "symbols", "char": "8️⃣", "name": "eight", "keywords": ["8", "blue-square", "numbers"] },
+	{ "category": "symbols", "char": "9️⃣", "name": "nine", "keywords": ["blue-square", "numbers", "9"] },
+	{ "category": "symbols", "char": "🔟", "name": "keycap_ten", "keywords": ["numbers", "10", "blue-square"] },
+	{ "category": "symbols", "char": "*⃣", "name": "asterisk", "keywords": ["star", "keycap"] },
+	{ "category": "symbols", "char": "⏏️", "name": "eject_button", "keywords": ["blue-square"] },
+	{ "category": "symbols", "char": "▶️", "name": "arrow_forward", "keywords": ["blue-square", "right", "direction", "play"] },
+	{ "category": "symbols", "char": "⏸", "name": "pause_button", "keywords": ["pause", "blue-square"] },
+	{ "category": "symbols", "char": "⏭", "name": "next_track_button", "keywords": ["forward", "next", "blue-square"] },
+	{ "category": "symbols", "char": "⏹", "name": "stop_button", "keywords": ["blue-square"] },
+	{ "category": "symbols", "char": "⏺", "name": "record_button", "keywords": ["blue-square"] },
+	{ "category": "symbols", "char": "⏯", "name": "play_or_pause_button", "keywords": ["blue-square", "play", "pause"] },
+	{ "category": "symbols", "char": "⏮", "name": "previous_track_button", "keywords": ["backward"] },
+	{ "category": "symbols", "char": "⏩", "name": "fast_forward", "keywords": ["blue-square", "play", "speed", "continue"] },
+	{ "category": "symbols", "char": "⏪", "name": "rewind", "keywords": ["play", "blue-square"] },
+	{ "category": "symbols", "char": "🔀", "name": "twisted_rightwards_arrows", "keywords": ["blue-square", "shuffle", "music", "random"] },
+	{ "category": "symbols", "char": "🔁", "name": "repeat", "keywords": ["loop", "record"] },
+	{ "category": "symbols", "char": "🔂", "name": "repeat_one", "keywords": ["blue-square", "loop"] },
+	{ "category": "symbols", "char": "◀️", "name": "arrow_backward", "keywords": ["blue-square", "left", "direction"] },
+	{ "category": "symbols", "char": "🔼", "name": "arrow_up_small", "keywords": ["blue-square", "triangle", "direction", "point", "forward", "top"] },
+	{ "category": "symbols", "char": "🔽", "name": "arrow_down_small", "keywords": ["blue-square", "direction", "bottom"] },
+	{ "category": "symbols", "char": "⏫", "name": "arrow_double_up", "keywords": ["blue-square", "direction", "top"] },
+	{ "category": "symbols", "char": "⏬", "name": "arrow_double_down", "keywords": ["blue-square", "direction", "bottom"] },
+	{ "category": "symbols", "char": "➡️", "name": "arrow_right", "keywords": ["blue-square", "next"] },
+	{ "category": "symbols", "char": "⬅️", "name": "arrow_left", "keywords": ["blue-square", "previous", "back"] },
+	{ "category": "symbols", "char": "⬆️", "name": "arrow_up", "keywords": ["blue-square", "continue", "top", "direction"] },
+	{ "category": "symbols", "char": "⬇️", "name": "arrow_down", "keywords": ["blue-square", "direction", "bottom"] },
+	{ "category": "symbols", "char": "↗️", "name": "arrow_upper_right", "keywords": ["blue-square", "point", "direction", "diagonal", "northeast"] },
+	{ "category": "symbols", "char": "↘️", "name": "arrow_lower_right", "keywords": ["blue-square", "direction", "diagonal", "southeast"] },
+	{ "category": "symbols", "char": "↙️", "name": "arrow_lower_left", "keywords": ["blue-square", "direction", "diagonal", "southwest"] },
+	{ "category": "symbols", "char": "↖️", "name": "arrow_upper_left", "keywords": ["blue-square", "point", "direction", "diagonal", "northwest"] },
+	{ "category": "symbols", "char": "↕️", "name": "arrow_up_down", "keywords": ["blue-square", "direction", "way", "vertical"] },
+	{ "category": "symbols", "char": "↔️", "name": "left_right_arrow", "keywords": ["shape", "direction", "horizontal", "sideways"] },
+	{ "category": "symbols", "char": "🔄", "name": "arrows_counterclockwise", "keywords": ["blue-square", "sync", "cycle"] },
+	{ "category": "symbols", "char": "↪️", "name": "arrow_right_hook", "keywords": ["blue-square", "return", "rotate", "direction"] },
+	{ "category": "symbols", "char": "↩️", "name": "leftwards_arrow_with_hook", "keywords": ["back", "return", "blue-square", "undo", "enter"] },
+	{ "category": "symbols", "char": "⤴️", "name": "arrow_heading_up", "keywords": ["blue-square", "direction", "top"] },
+	{ "category": "symbols", "char": "⤵️", "name": "arrow_heading_down", "keywords": ["blue-square", "direction", "bottom"] },
+	{ "category": "symbols", "char": "#️⃣", "name": "hash", "keywords": ["symbol", "blue-square", "twitter"] },
+	{ "category": "symbols", "char": "ℹ️", "name": "information_source", "keywords": ["blue-square", "alphabet", "letter"] },
+	{ "category": "symbols", "char": "🔤", "name": "abc", "keywords": ["blue-square", "alphabet"] },
+	{ "category": "symbols", "char": "🔡", "name": "abcd", "keywords": ["blue-square", "alphabet"] },
+	{ "category": "symbols", "char": "🔠", "name": "capital_abcd", "keywords": ["alphabet", "words", "blue-square"] },
+	{ "category": "symbols", "char": "🔣", "name": "symbols", "keywords": ["blue-square", "music", "note", "ampersand", "percent", "glyphs", "characters"] },
+	{ "category": "symbols", "char": "🎵", "name": "musical_note", "keywords": ["score", "tone", "sound"] },
+	{ "category": "symbols", "char": "🎶", "name": "notes", "keywords": ["music", "score"] },
+	{ "category": "symbols", "char": "〰️", "name": "wavy_dash", "keywords": ["draw", "line", "moustache", "mustache", "squiggle", "scribble"] },
+	{ "category": "symbols", "char": "➰", "name": "curly_loop", "keywords": ["scribble", "draw", "shape", "squiggle"] },
+	{ "category": "symbols", "char": "✔️", "name": "heavy_check_mark", "keywords": ["ok", "nike", "answer", "yes", "tick"] },
+	{ "category": "symbols", "char": "🔃", "name": "arrows_clockwise", "keywords": ["sync", "cycle", "round", "repeat"] },
+	{ "category": "symbols", "char": "➕", "name": "heavy_plus_sign", "keywords": ["math", "calculation", "addition", "more", "increase"] },
+	{ "category": "symbols", "char": "➖", "name": "heavy_minus_sign", "keywords": ["math", "calculation", "subtract", "less"] },
+	{ "category": "symbols", "char": "➗", "name": "heavy_division_sign", "keywords": ["divide", "math", "calculation"] },
+	{ "category": "symbols", "char": "✖️", "name": "heavy_multiplication_x", "keywords": ["math", "calculation"] },
+	{ "category": "symbols", "char": "\uD83D\uDFF0", "name": "heavy_equals_sign", "keywords": [] },
+	{ "category": "symbols", "char": "♾", "name": "infinity", "keywords": ["forever"] },
+	{ "category": "symbols", "char": "💲", "name": "heavy_dollar_sign", "keywords": ["money", "sales", "payment", "currency", "buck"] },
+	{ "category": "symbols", "char": "💱", "name": "currency_exchange", "keywords": ["money", "sales", "dollar", "travel"] },
+	{ "category": "symbols", "char": "©️", "name": "copyright", "keywords": ["ip", "license", "circle", "law", "legal"] },
+	{ "category": "symbols", "char": "®️", "name": "registered", "keywords": ["alphabet", "circle"] },
+	{ "category": "symbols", "char": "™️", "name": "tm", "keywords": ["trademark", "brand", "law", "legal"] },
+	{ "category": "symbols", "char": "🔚", "name": "end", "keywords": ["words", "arrow"] },
+	{ "category": "symbols", "char": "🔙", "name": "back", "keywords": ["arrow", "words", "return"] },
+	{ "category": "symbols", "char": "🔛", "name": "on", "keywords": ["arrow", "words"] },
+	{ "category": "symbols", "char": "🔝", "name": "top", "keywords": ["words", "blue-square"] },
+	{ "category": "symbols", "char": "🔜", "name": "soon", "keywords": ["arrow", "words"] },
+	{ "category": "symbols", "char": "☑️", "name": "ballot_box_with_check", "keywords": ["ok", "agree", "confirm", "black-square", "vote", "election", "yes", "tick"] },
+	{ "category": "symbols", "char": "🔘", "name": "radio_button", "keywords": ["input", "old", "music", "circle"] },
+	{ "category": "symbols", "char": "⚫", "name": "black_circle", "keywords": ["shape", "button", "round"] },
+	{ "category": "symbols", "char": "⚪", "name": "white_circle", "keywords": ["shape", "round"] },
+	{ "category": "symbols", "char": "🔴", "name": "red_circle", "keywords": ["shape", "error", "danger"] },
+	{ "category": "symbols", "char": "🟠", "name": "orange_circle", "keywords": ["shape"] },
+	{ "category": "symbols", "char": "🟡", "name": "yellow_circle", "keywords": ["shape"] },
+	{ "category": "symbols", "char": "🟢", "name": "green_circle", "keywords": ["shape"] },
+	{ "category": "symbols", "char": "🔵", "name": "large_blue_circle", "keywords": ["shape", "icon", "button"] },
+	{ "category": "symbols", "char": "🟣", "name": "purple_circle", "keywords": ["shape"] },
+	{ "category": "symbols", "char": "🟤", "name": "brown_circle", "keywords": ["shape"] },
+	{ "category": "symbols", "char": "🔸", "name": "small_orange_diamond", "keywords": ["shape", "jewel", "gem"] },
+	{ "category": "symbols", "char": "🔹", "name": "small_blue_diamond", "keywords": ["shape", "jewel", "gem"] },
+	{ "category": "symbols", "char": "🔶", "name": "large_orange_diamond", "keywords": ["shape", "jewel", "gem"] },
+	{ "category": "symbols", "char": "🔷", "name": "large_blue_diamond", "keywords": ["shape", "jewel", "gem"] },
+	{ "category": "symbols", "char": "🔺", "name": "small_red_triangle", "keywords": ["shape", "direction", "up", "top"] },
+	{ "category": "symbols", "char": "▪️", "name": "black_small_square", "keywords": ["shape", "icon"] },
+	{ "category": "symbols", "char": "▫️", "name": "white_small_square", "keywords": ["shape", "icon"] },
+	{ "category": "symbols", "char": "⬛", "name": "black_large_square", "keywords": ["shape", "icon", "button"] },
+	{ "category": "symbols", "char": "⬜", "name": "white_large_square", "keywords": ["shape", "icon", "stone", "button"] },
+	{ "category": "symbols", "char": "🟥", "name": "red_square", "keywords": ["shape"] },
+	{ "category": "symbols", "char": "🟧", "name": "orange_square", "keywords": ["shape"] },
+	{ "category": "symbols", "char": "🟨", "name": "yellow_square", "keywords": ["shape"] },
+	{ "category": "symbols", "char": "🟩", "name": "green_square", "keywords": ["shape"] },
+	{ "category": "symbols", "char": "🟦", "name": "blue_square", "keywords": ["shape"] },
+	{ "category": "symbols", "char": "🟪", "name": "purple_square", "keywords": ["shape"] },
+	{ "category": "symbols", "char": "🟫", "name": "brown_square", "keywords": ["shape"] },
+	{ "category": "symbols", "char": "🔻", "name": "small_red_triangle_down", "keywords": ["shape", "direction", "bottom"] },
+	{ "category": "symbols", "char": "◼️", "name": "black_medium_square", "keywords": ["shape", "button", "icon"] },
+	{ "category": "symbols", "char": "◻️", "name": "white_medium_square", "keywords": ["shape", "stone", "icon"] },
+	{ "category": "symbols", "char": "◾", "name": "black_medium_small_square", "keywords": ["icon", "shape", "button"] },
+	{ "category": "symbols", "char": "◽", "name": "white_medium_small_square", "keywords": ["shape", "stone", "icon", "button"] },
+	{ "category": "symbols", "char": "🔲", "name": "black_square_button", "keywords": ["shape", "input", "frame"] },
+	{ "category": "symbols", "char": "🔳", "name": "white_square_button", "keywords": ["shape", "input"] },
+	{ "category": "symbols", "char": "🔈", "name": "speaker", "keywords": ["sound", "volume", "silence", "broadcast"] },
+	{ "category": "symbols", "char": "🔉", "name": "sound", "keywords": ["volume", "speaker", "broadcast"] },
+	{ "category": "symbols", "char": "🔊", "name": "loud_sound", "keywords": ["volume", "noise", "noisy", "speaker", "broadcast"] },
+	{ "category": "symbols", "char": "🔇", "name": "mute", "keywords": ["sound", "volume", "silence", "quiet"] },
+	{ "category": "symbols", "char": "📣", "name": "mega", "keywords": ["sound", "speaker", "volume"] },
+	{ "category": "symbols", "char": "📢", "name": "loudspeaker", "keywords": ["volume", "sound"] },
+	{ "category": "symbols", "char": "🔔", "name": "bell", "keywords": ["sound", "notification", "christmas", "xmas", "chime"] },
+	{ "category": "symbols", "char": "🔕", "name": "no_bell", "keywords": ["sound", "volume", "mute", "quiet", "silent"] },
+	{ "category": "symbols", "char": "🃏", "name": "black_joker", "keywords": ["poker", "cards", "game", "play", "magic"] },
+	{ "category": "symbols", "char": "🀄", "name": "mahjong", "keywords": ["game", "play", "chinese", "kanji"] },
+	{ "category": "symbols", "char": "♠️", "name": "spades", "keywords": ["poker", "cards", "suits", "magic"] },
+	{ "category": "symbols", "char": "♣️", "name": "clubs", "keywords": ["poker", "cards", "magic", "suits"] },
+	{ "category": "symbols", "char": "♥️", "name": "hearts", "keywords": ["poker", "cards", "magic", "suits"] },
+	{ "category": "symbols", "char": "♦️", "name": "diamonds", "keywords": ["poker", "cards", "magic", "suits"] },
+	{ "category": "symbols", "char": "🎴", "name": "flower_playing_cards", "keywords": ["game", "sunset", "red"] },
+	{ "category": "symbols", "char": "💭", "name": "thought_balloon", "keywords": ["bubble", "cloud", "speech", "thinking", "dream"] },
+	{ "category": "symbols", "char": "🗯", "name": "right_anger_bubble", "keywords": ["caption", "speech", "thinking", "mad"] },
+	{ "category": "symbols", "char": "💬", "name": "speech_balloon", "keywords": ["bubble", "words", "message", "talk", "chatting"] },
+	{ "category": "symbols", "char": "🗨", "name": "left_speech_bubble", "keywords": ["words", "message", "talk", "chatting"] },
+	{ "category": "symbols", "char": "🕐", "name": "clock1", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕑", "name": "clock2", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕒", "name": "clock3", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕓", "name": "clock4", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕔", "name": "clock5", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕕", "name": "clock6", "keywords": ["time", "late", "early", "schedule", "dawn", "dusk"] },
+	{ "category": "symbols", "char": "🕖", "name": "clock7", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕗", "name": "clock8", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕘", "name": "clock9", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕙", "name": "clock10", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕚", "name": "clock11", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕛", "name": "clock12", "keywords": ["time", "noon", "midnight", "midday", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕜", "name": "clock130", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕝", "name": "clock230", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕞", "name": "clock330", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕟", "name": "clock430", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕠", "name": "clock530", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕡", "name": "clock630", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕢", "name": "clock730", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕣", "name": "clock830", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕤", "name": "clock930", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕥", "name": "clock1030", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕦", "name": "clock1130", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "symbols", "char": "🕧", "name": "clock1230", "keywords": ["time", "late", "early", "schedule"] },
+	{ "category": "flags", "char": "🇦🇫", "name": "afghanistan", "keywords": ["af", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇦🇽", "name": "aland_islands", "keywords": ["Åland", "islands", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇦🇱", "name": "albania", "keywords": ["al", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇩🇿", "name": "algeria", "keywords": ["dz", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇦🇸", "name": "american_samoa", "keywords": ["american", "ws", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇦🇩", "name": "andorra", "keywords": ["ad", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇦🇴", "name": "angola", "keywords": ["ao", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇦🇮", "name": "anguilla", "keywords": ["ai", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇦🇶", "name": "antarctica", "keywords": ["aq", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇦🇬", "name": "antigua_barbuda", "keywords": ["antigua", "barbuda", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇦🇷", "name": "argentina", "keywords": ["ar", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇦🇲", "name": "armenia", "keywords": ["am", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇦🇼", "name": "aruba", "keywords": ["aw", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇦🇨", "name": "ascension_island", "keywords": ["flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇦🇺", "name": "australia", "keywords": ["au", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇦🇹", "name": "austria", "keywords": ["at", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇦🇿", "name": "azerbaijan", "keywords": ["az", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇸", "name": "bahamas", "keywords": ["bs", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇭", "name": "bahrain", "keywords": ["bh", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇩", "name": "bangladesh", "keywords": ["bd", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇧", "name": "barbados", "keywords": ["bb", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇾", "name": "belarus", "keywords": ["by", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇪", "name": "belgium", "keywords": ["be", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇿", "name": "belize", "keywords": ["bz", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇯", "name": "benin", "keywords": ["bj", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇲", "name": "bermuda", "keywords": ["bm", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇹", "name": "bhutan", "keywords": ["bt", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇴", "name": "bolivia", "keywords": ["bo", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇶", "name": "caribbean_netherlands", "keywords": ["bonaire", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇦", "name": "bosnia_herzegovina", "keywords": ["bosnia", "herzegovina", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇼", "name": "botswana", "keywords": ["bw", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇷", "name": "brazil", "keywords": ["br", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇮🇴", "name": "british_indian_ocean_territory", "keywords": ["british", "indian", "ocean", "territory", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇻🇬", "name": "british_virgin_islands", "keywords": ["british", "virgin", "islands", "bvi", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇳", "name": "brunei", "keywords": ["bn", "darussalam", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇬", "name": "bulgaria", "keywords": ["bg", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇫", "name": "burkina_faso", "keywords": ["burkina", "faso", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇮", "name": "burundi", "keywords": ["bi", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇻", "name": "cape_verde", "keywords": ["cabo", "verde", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇰🇭", "name": "cambodia", "keywords": ["kh", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇲", "name": "cameroon", "keywords": ["cm", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇦", "name": "canada", "keywords": ["ca", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇮🇨", "name": "canary_islands", "keywords": ["canary", "islands", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇰🇾", "name": "cayman_islands", "keywords": ["cayman", "islands", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇫", "name": "central_african_republic", "keywords": ["central", "african", "republic", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇩", "name": "chad", "keywords": ["td", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇱", "name": "chile", "keywords": ["flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇳", "name": "cn", "keywords": ["china", "chinese", "prc", "flag", "country", "nation", "banner"] },
+	{ "category": "flags", "char": "🇨🇽", "name": "christmas_island", "keywords": ["christmas", "island", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇨", "name": "cocos_islands", "keywords": ["cocos", "keeling", "islands", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇴", "name": "colombia", "keywords": ["co", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇰🇲", "name": "comoros", "keywords": ["km", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇬", "name": "congo_brazzaville", "keywords": ["congo", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇩", "name": "congo_kinshasa", "keywords": ["congo", "democratic", "republic", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇰", "name": "cook_islands", "keywords": ["cook", "islands", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇷", "name": "costa_rica", "keywords": ["costa", "rica", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇭🇷", "name": "croatia", "keywords": ["hr", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇺", "name": "cuba", "keywords": ["cu", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇼", "name": "curacao", "keywords": ["curaçao", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇾", "name": "cyprus", "keywords": ["cy", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇿", "name": "czech_republic", "keywords": ["cz", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇩🇰", "name": "denmark", "keywords": ["dk", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇩🇯", "name": "djibouti", "keywords": ["dj", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇩🇲", "name": "dominica", "keywords": ["dm", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇩🇴", "name": "dominican_republic", "keywords": ["dominican", "republic", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇪🇨", "name": "ecuador", "keywords": ["ec", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇪🇬", "name": "egypt", "keywords": ["eg", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇻", "name": "el_salvador", "keywords": ["el", "salvador", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇶", "name": "equatorial_guinea", "keywords": ["equatorial", "gn", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇪🇷", "name": "eritrea", "keywords": ["er", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇪🇪", "name": "estonia", "keywords": ["ee", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇪🇹", "name": "ethiopia", "keywords": ["et", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇪🇺", "name": "eu", "keywords": ["european", "union", "flag", "banner"] },
+	{ "category": "flags", "char": "🇫🇰", "name": "falkland_islands", "keywords": ["falkland", "islands", "malvinas", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇫🇴", "name": "faroe_islands", "keywords": ["faroe", "islands", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇫🇯", "name": "fiji", "keywords": ["fj", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇫🇮", "name": "finland", "keywords": ["fi", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇫🇷", "name": "fr", "keywords": ["banner", "flag", "nation", "france", "french", "country"] },
+	{ "category": "flags", "char": "🇬🇫", "name": "french_guiana", "keywords": ["french", "guiana", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇵🇫", "name": "french_polynesia", "keywords": ["french", "polynesia", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇫", "name": "french_southern_territories", "keywords": ["french", "southern", "territories", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇦", "name": "gabon", "keywords": ["ga", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇲", "name": "gambia", "keywords": ["gm", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇪", "name": "georgia", "keywords": ["ge", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇩🇪", "name": "de", "keywords": ["german", "nation", "flag", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇭", "name": "ghana", "keywords": ["gh", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇮", "name": "gibraltar", "keywords": ["gi", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇷", "name": "greece", "keywords": ["gr", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇱", "name": "greenland", "keywords": ["gl", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇩", "name": "grenada", "keywords": ["gd", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇵", "name": "guadeloupe", "keywords": ["gp", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇺", "name": "guam", "keywords": ["gu", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇹", "name": "guatemala", "keywords": ["gt", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇬", "name": "guernsey", "keywords": ["gg", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇳", "name": "guinea", "keywords": ["gn", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇼", "name": "guinea_bissau", "keywords": ["gw", "bissau", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇾", "name": "guyana", "keywords": ["gy", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇭🇹", "name": "haiti", "keywords": ["ht", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇭🇳", "name": "honduras", "keywords": ["hn", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇭🇰", "name": "hong_kong", "keywords": ["hong", "kong", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇭🇺", "name": "hungary", "keywords": ["hu", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇮🇸", "name": "iceland", "keywords": ["is", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇮🇳", "name": "india", "keywords": ["in", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇮🇩", "name": "indonesia", "keywords": ["flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇮🇷", "name": "iran", "keywords": ["iran, ", "islamic", "republic", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇮🇶", "name": "iraq", "keywords": ["iq", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇮🇪", "name": "ireland", "keywords": ["ie", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇮🇲", "name": "isle_of_man", "keywords": ["isle", "man", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇮🇱", "name": "israel", "keywords": ["il", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇮🇹", "name": "it", "keywords": ["italy", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇮", "name": "cote_divoire", "keywords": ["ivory", "coast", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇯🇲", "name": "jamaica", "keywords": ["jm", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇯🇵", "name": "jp", "keywords": ["japanese", "nation", "flag", "country", "banner"] },
+	{ "category": "flags", "char": "🇯🇪", "name": "jersey", "keywords": ["je", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇯🇴", "name": "jordan", "keywords": ["jo", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇰🇿", "name": "kazakhstan", "keywords": ["kz", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇰🇪", "name": "kenya", "keywords": ["ke", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇰🇮", "name": "kiribati", "keywords": ["ki", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇽🇰", "name": "kosovo", "keywords": ["xk", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇰🇼", "name": "kuwait", "keywords": ["kw", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇰🇬", "name": "kyrgyzstan", "keywords": ["kg", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇱🇦", "name": "laos", "keywords": ["lao", "democratic", "republic", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇱🇻", "name": "latvia", "keywords": ["lv", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇱🇧", "name": "lebanon", "keywords": ["lb", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇱🇸", "name": "lesotho", "keywords": ["ls", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇱🇷", "name": "liberia", "keywords": ["lr", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇱🇾", "name": "libya", "keywords": ["ly", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇱🇮", "name": "liechtenstein", "keywords": ["li", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇱🇹", "name": "lithuania", "keywords": ["lt", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇱🇺", "name": "luxembourg", "keywords": ["lu", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇴", "name": "macau", "keywords": ["macao", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇰", "name": "macedonia", "keywords": ["macedonia, ", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇬", "name": "madagascar", "keywords": ["mg", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇼", "name": "malawi", "keywords": ["mw", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇾", "name": "malaysia", "keywords": ["my", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇻", "name": "maldives", "keywords": ["mv", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇱", "name": "mali", "keywords": ["ml", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇹", "name": "malta", "keywords": ["mt", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇭", "name": "marshall_islands", "keywords": ["marshall", "islands", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇶", "name": "martinique", "keywords": ["mq", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇷", "name": "mauritania", "keywords": ["mr", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇺", "name": "mauritius", "keywords": ["mu", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇾🇹", "name": "mayotte", "keywords": ["yt", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇽", "name": "mexico", "keywords": ["mx", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇫🇲", "name": "micronesia", "keywords": ["micronesia, ", "federated", "states", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇩", "name": "moldova", "keywords": ["moldova, ", "republic", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇨", "name": "monaco", "keywords": ["mc", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇳", "name": "mongolia", "keywords": ["mn", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇪", "name": "montenegro", "keywords": ["me", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇸", "name": "montserrat", "keywords": ["ms", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇦", "name": "morocco", "keywords": ["ma", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇿", "name": "mozambique", "keywords": ["mz", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇲", "name": "myanmar", "keywords": ["mm", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇳🇦", "name": "namibia", "keywords": ["na", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇳🇷", "name": "nauru", "keywords": ["nr", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇳🇵", "name": "nepal", "keywords": ["np", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇳🇱", "name": "netherlands", "keywords": ["nl", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇳🇨", "name": "new_caledonia", "keywords": ["new", "caledonia", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇳🇿", "name": "new_zealand", "keywords": ["new", "zealand", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇳🇮", "name": "nicaragua", "keywords": ["ni", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇳🇪", "name": "niger", "keywords": ["ne", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇳🇬", "name": "nigeria", "keywords": ["flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇳🇺", "name": "niue", "keywords": ["nu", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇳🇫", "name": "norfolk_island", "keywords": ["norfolk", "island", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇲🇵", "name": "northern_mariana_islands", "keywords": ["northern", "mariana", "islands", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇰🇵", "name": "north_korea", "keywords": ["north", "korea", "nation", "flag", "country", "banner"] },
+	{ "category": "flags", "char": "🇳🇴", "name": "norway", "keywords": ["no", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇴🇲", "name": "oman", "keywords": ["om_symbol", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇵🇰", "name": "pakistan", "keywords": ["pk", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇵🇼", "name": "palau", "keywords": ["pw", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇵🇸", "name": "palestinian_territories", "keywords": ["palestine", "palestinian", "territories", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇵🇦", "name": "panama", "keywords": ["pa", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇵🇬", "name": "papua_new_guinea", "keywords": ["papua", "new", "guinea", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇵🇾", "name": "paraguay", "keywords": ["py", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇵🇪", "name": "peru", "keywords": ["pe", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇵🇭", "name": "philippines", "keywords": ["ph", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇵🇳", "name": "pitcairn_islands", "keywords": ["pitcairn", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇵🇱", "name": "poland", "keywords": ["pl", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇵🇹", "name": "portugal", "keywords": ["pt", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇵🇷", "name": "puerto_rico", "keywords": ["puerto", "rico", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇶🇦", "name": "qatar", "keywords": ["qa", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇷🇪", "name": "reunion", "keywords": ["réunion", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇷🇴", "name": "romania", "keywords": ["ro", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇷🇺", "name": "ru", "keywords": ["russian", "federation", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇷🇼", "name": "rwanda", "keywords": ["rw", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇧🇱", "name": "st_barthelemy", "keywords": ["saint", "barthélemy", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇭", "name": "st_helena", "keywords": ["saint", "helena", "ascension", "tristan", "cunha", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇰🇳", "name": "st_kitts_nevis", "keywords": ["saint", "kitts", "nevis", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇱🇨", "name": "st_lucia", "keywords": ["saint", "lucia", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇵🇲", "name": "st_pierre_miquelon", "keywords": ["saint", "pierre", "miquelon", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇻🇨", "name": "st_vincent_grenadines", "keywords": ["saint", "vincent", "grenadines", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇼🇸", "name": "samoa", "keywords": ["ws", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇲", "name": "san_marino", "keywords": ["san", "marino", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇹", "name": "sao_tome_principe", "keywords": ["sao", "tome", "principe", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇦", "name": "saudi_arabia", "keywords": ["flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇳", "name": "senegal", "keywords": ["sn", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇷🇸", "name": "serbia", "keywords": ["rs", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇨", "name": "seychelles", "keywords": ["sc", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇱", "name": "sierra_leone", "keywords": ["sierra", "leone", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇬", "name": "singapore", "keywords": ["sg", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇽", "name": "sint_maarten", "keywords": ["sint", "maarten", "dutch", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇰", "name": "slovakia", "keywords": ["sk", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇮", "name": "slovenia", "keywords": ["si", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇧", "name": "solomon_islands", "keywords": ["solomon", "islands", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇴", "name": "somalia", "keywords": ["so", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇿🇦", "name": "south_africa", "keywords": ["south", "africa", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇸", "name": "south_georgia_south_sandwich_islands", "keywords": ["south", "georgia", "sandwich", "islands", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇰🇷", "name": "kr", "keywords": ["south", "korea", "nation", "flag", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇸", "name": "south_sudan", "keywords": ["south", "sd", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇪🇸", "name": "es", "keywords": ["spain", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇱🇰", "name": "sri_lanka", "keywords": ["sri", "lanka", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇩", "name": "sudan", "keywords": ["sd", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇷", "name": "suriname", "keywords": ["sr", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇿", "name": "swaziland", "keywords": ["sz", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇪", "name": "sweden", "keywords": ["se", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇨🇭", "name": "switzerland", "keywords": ["ch", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇸🇾", "name": "syria", "keywords": ["syrian", "arab", "republic", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇼", "name": "taiwan", "keywords": ["tw", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇯", "name": "tajikistan", "keywords": ["tj", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇿", "name": "tanzania", "keywords": ["tanzania, ", "united", "republic", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇭", "name": "thailand", "keywords": ["th", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇱", "name": "timor_leste", "keywords": ["timor", "leste", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇬", "name": "togo", "keywords": ["tg", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇰", "name": "tokelau", "keywords": ["tk", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇴", "name": "tonga", "keywords": ["to", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇹", "name": "trinidad_tobago", "keywords": ["trinidad", "tobago", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇦", "name": "tristan_da_cunha", "keywords": ["flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇳", "name": "tunisia", "keywords": ["tn", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇷", "name": "tr", "keywords": ["turkey", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇲", "name": "turkmenistan", "keywords": ["flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇨", "name": "turks_caicos_islands", "keywords": ["turks", "caicos", "islands", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇹🇻", "name": "tuvalu", "keywords": ["flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇺🇬", "name": "uganda", "keywords": ["ug", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇺🇦", "name": "ukraine", "keywords": ["ua", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇦🇪", "name": "united_arab_emirates", "keywords": ["united", "arab", "emirates", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇬🇧", "name": "uk", "keywords": ["united", "kingdom", "great", "britain", "northern", "ireland", "flag", "nation", "country", "banner", "british", "UK", "english", "england", "union jack"] },
+	{ "category": "flags", "char": "🏴󠁧󠁢󠁥󠁮󠁧󠁿", "name": "england", "keywords": ["flag", "english"] },
+	{ "category": "flags", "char": "🏴󠁧󠁢󠁳󠁣󠁴󠁿", "name": "scotland", "keywords": ["flag", "scottish"] },
+	{ "category": "flags", "char": "🏴󠁧󠁢󠁷󠁬󠁳󠁿", "name": "wales", "keywords": ["flag", "welsh"] },
+	{ "category": "flags", "char": "🇺🇸", "name": "us", "keywords": ["united", "states", "america", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇻🇮", "name": "us_virgin_islands", "keywords": ["virgin", "islands", "us", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇺🇾", "name": "uruguay", "keywords": ["uy", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇺🇿", "name": "uzbekistan", "keywords": ["uz", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇻🇺", "name": "vanuatu", "keywords": ["vu", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇻🇦", "name": "vatican_city", "keywords": ["vatican", "city", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇻🇪", "name": "venezuela", "keywords": ["ve", "bolivarian", "republic", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇻🇳", "name": "vietnam", "keywords": ["viet", "nam", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇼🇫", "name": "wallis_futuna", "keywords": ["wallis", "futuna", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇪🇭", "name": "western_sahara", "keywords": ["western", "sahara", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇾🇪", "name": "yemen", "keywords": ["ye", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇿🇲", "name": "zambia", "keywords": ["zm", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇿🇼", "name": "zimbabwe", "keywords": ["zw", "flag", "nation", "country", "banner"] },
+	{ "category": "flags", "char": "🇺🇳", "name": "united_nations", "keywords": ["un", "flag", "banner"] },
+	{ "category": "flags", "char": "🏴‍☠️", "name": "pirate_flag", "keywords": ["skull", "crossbones", "flag", "banner"] }
+]
+
diff --git a/packages/frontend/src/events.ts b/packages/frontend/src/events.ts
new file mode 100644
index 0000000000..dbbd908b8f
--- /dev/null
+++ b/packages/frontend/src/events.ts
@@ -0,0 +1,4 @@
+import { EventEmitter } from 'eventemitter3';
+
+// TODO: 型付け
+export const globalEvents = new EventEmitter();
diff --git a/packages/frontend/src/filters/bytes.ts b/packages/frontend/src/filters/bytes.ts
new file mode 100644
index 0000000000..c80f2f0ed2
--- /dev/null
+++ b/packages/frontend/src/filters/bytes.ts
@@ -0,0 +1,9 @@
+export default (v, digits = 0) => {
+	if (v == null) return '?';
+	const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+	if (v === 0) return '0';
+	const isMinus = v < 0;
+	if (isMinus) v = -v;
+	const i = Math.floor(Math.log(v) / Math.log(1024));
+	return (isMinus ? '-' : '') + (v / Math.pow(1024, i)).toFixed(digits).replace(/\.0+$/, '') + sizes[i];
+};
diff --git a/packages/frontend/src/filters/note.ts b/packages/frontend/src/filters/note.ts
new file mode 100644
index 0000000000..cd9b7d98d2
--- /dev/null
+++ b/packages/frontend/src/filters/note.ts
@@ -0,0 +1,3 @@
+export const notePage = note => {
+	return `/notes/${note.id}`;
+};
diff --git a/packages/frontend/src/filters/number.ts b/packages/frontend/src/filters/number.ts
new file mode 100644
index 0000000000..880a848ca4
--- /dev/null
+++ b/packages/frontend/src/filters/number.ts
@@ -0,0 +1 @@
+export default n => n == null ? 'N/A' : n.toLocaleString();
diff --git a/packages/frontend/src/filters/user.ts b/packages/frontend/src/filters/user.ts
new file mode 100644
index 0000000000..ff2f7e2dae
--- /dev/null
+++ b/packages/frontend/src/filters/user.ts
@@ -0,0 +1,15 @@
+import * as misskey from 'misskey-js';
+import * as Acct from 'misskey-js/built/acct';
+import { url } from '@/config';
+
+export const acct = (user: misskey.Acct) => {
+	return Acct.toString(user);
+};
+
+export const userName = (user: misskey.entities.User) => {
+	return user.name || user.username;
+};
+
+export const userPage = (user: misskey.Acct, path?, absolute = false) => {
+	return `${absolute ? url : ''}/@${acct(user)}${(path ? `/${path}` : '')}`;
+};
diff --git a/packages/frontend/src/i18n.ts b/packages/frontend/src/i18n.ts
new file mode 100644
index 0000000000..31e066960d
--- /dev/null
+++ b/packages/frontend/src/i18n.ts
@@ -0,0 +1,5 @@
+import { markRaw } from 'vue';
+import { locale } from '@/config';
+import { I18n } from '@/scripts/i18n';
+
+export const i18n = markRaw(new I18n(locale));
diff --git a/packages/frontend/src/init.ts b/packages/frontend/src/init.ts
new file mode 100644
index 0000000000..508d3262b3
--- /dev/null
+++ b/packages/frontend/src/init.ts
@@ -0,0 +1,433 @@
+/**
+ * Client entry point
+ */
+// https://vitejs.dev/config/build-options.html#build-modulepreload
+import 'vite/modulepreload-polyfill';
+
+import '@/style.scss';
+
+//#region account indexedDB migration
+import { set } from '@/scripts/idb-proxy';
+
+if (localStorage.getItem('accounts') != null) {
+	set('accounts', JSON.parse(localStorage.getItem('accounts')));
+	localStorage.removeItem('accounts');
+}
+//#endregion
+
+import { computed, createApp, watch, markRaw, version as vueVersion, defineAsyncComponent } from 'vue';
+import { compareVersions } from 'compare-versions';
+import JSON5 from 'json5';
+
+import widgets from '@/widgets';
+import directives from '@/directives';
+import components from '@/components';
+import { version, ui, lang, host } from '@/config';
+import { applyTheme } from '@/scripts/theme';
+import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
+import { i18n } from '@/i18n';
+import { confirm, alert, post, popup, toast } from '@/os';
+import { stream } from '@/stream';
+import * as sound from '@/scripts/sound';
+import { $i, refreshAccount, login, updateAccount, signout } from '@/account';
+import { defaultStore, ColdDeviceStorage } from '@/store';
+import { fetchInstance, instance } from '@/instance';
+import { makeHotkey } from '@/scripts/hotkey';
+import { search } from '@/scripts/search';
+import { deviceKind } from '@/scripts/device-kind';
+import { initializeSw } from '@/scripts/initialize-sw';
+import { reloadChannel } from '@/scripts/unison-reload';
+import { reactionPicker } from '@/scripts/reaction-picker';
+import { getUrlWithoutLoginId } from '@/scripts/login-id';
+import { getAccountFromId } from '@/scripts/get-account-from-id';
+
+(async () => {
+	console.info(`Misskey v${version}`);
+
+	if (_DEV_) {
+		console.warn('Development mode!!!');
+
+		console.info(`vue ${vueVersion}`);
+
+		(window as any).$i = $i;
+		(window as any).$store = defaultStore;
+
+		window.addEventListener('error', event => {
+			console.error(event);
+			/*
+			alert({
+				type: 'error',
+				title: 'DEV: Unhandled error',
+				text: event.message
+			});
+			*/
+		});
+
+		window.addEventListener('unhandledrejection', event => {
+			console.error(event);
+			/*
+			alert({
+				type: 'error',
+				title: 'DEV: Unhandled promise rejection',
+				text: event.reason
+			});
+			*/
+		});
+	}
+
+	// タッチデバイスでCSSの:hoverを機能させる
+	document.addEventListener('touchend', () => {}, { passive: true });
+
+	// 一斉リロード
+	reloadChannel.addEventListener('message', path => {
+		if (path !== null) location.href = path;
+		else location.reload();
+	});
+
+	// If mobile, insert the viewport meta tag
+	if (['smartphone', 'tablet'].includes(deviceKind)) {
+		const viewport = document.getElementsByName('viewport').item(0);
+		viewport.setAttribute('content',
+			`${viewport.getAttribute('content')}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`);
+	}
+
+	//#region Set lang attr
+	const html = document.documentElement;
+	html.setAttribute('lang', lang);
+	//#endregion
+
+	//#region loginId
+	const params = new URLSearchParams(location.search);
+	const loginId = params.get('loginId');
+
+	if (loginId) {
+		const target = getUrlWithoutLoginId(location.href);
+
+		if (!$i || $i.id !== loginId) {
+			const account = await getAccountFromId(loginId);
+			if (account) {
+				await login(account.token, target);
+			}
+		}
+
+		history.replaceState({ misskey: 'loginId' }, '', target);
+	}
+
+	//#endregion
+
+	//#region Fetch user
+	if ($i && $i.token) {
+		if (_DEV_) {
+			console.log('account cache found. refreshing...');
+		}
+
+		refreshAccount();
+	} else {
+		if (_DEV_) {
+			console.log('no account cache found.');
+		}
+
+		// 連携ログインの場合用にCookieを参照する
+		const i = (document.cookie.match(/igi=(\w+)/) ?? [null, null])[1];
+
+		if (i != null && i !== 'null') {
+			if (_DEV_) {
+				console.log('signing...');
+			}
+
+			try {
+				document.body.innerHTML = '<div>Please wait...</div>';
+				await login(i);
+			} catch (err) {
+				// Render the error screen
+				// TODO: ちゃんとしたコンポーネントをレンダリングする(v10とかのトラブルシューティングゲーム付きのやつみたいな)
+				document.body.innerHTML = '<div id="err">Oops!</div>';
+			}
+		} else {
+			if (_DEV_) {
+				console.log('not signed in');
+			}
+		}
+	}
+	//#endregion
+
+	const fetchInstanceMetaPromise = fetchInstance();
+
+	fetchInstanceMetaPromise.then(() => {
+		localStorage.setItem('v', instance.version);
+
+		// Init service worker
+		initializeSw();
+	});
+
+	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 === 'classic' ? defineAsyncComponent(() => import('@/ui/classic.vue')) :
+		defineAsyncComponent(() => import('@/ui/universal.vue')),
+	);
+
+	if (_DEV_) {
+		app.config.performance = true;
+	}
+
+	app.config.globalProperties = {
+		$i,
+		$store: defaultStore,
+		$instance: instance,
+		$t: i18n.t,
+		$ts: i18n.ts,
+	};
+
+	widgets(app);
+	directives(app);
+	components(app);
+
+	const splash = document.getElementById('splash');
+	// 念のためnullチェック(HTMLが古い場合があるため(そのうち消す))
+	if (splash) splash.addEventListener('transitionend', () => {
+		splash.remove();
+	});
+
+	// https://github.com/misskey-dev/misskey/pull/8575#issuecomment-1114239210
+	// なぜかinit.tsの内容が2回実行されることがあるため、mountするdivを1つに制限する
+	const rootEl = (() => {
+		const MISSKEY_MOUNT_DIV_ID = 'misskey_app';
+
+		const currentEl = document.getElementById(MISSKEY_MOUNT_DIV_ID);
+
+		if (currentEl) {
+			console.warn('multiple import detected');
+			return currentEl;
+		}
+
+		const rootEl = document.createElement('div');
+		rootEl.id = MISSKEY_MOUNT_DIV_ID;
+		document.body.appendChild(rootEl);
+		return rootEl;
+	})();
+
+	app.mount(rootEl);
+
+	// boot.jsのやつを解除
+	window.onerror = null;
+	window.onunhandledrejection = null;
+
+	reactionPicker.init();
+
+	if (splash) {
+		splash.style.opacity = '0';
+		splash.style.pointerEvents = 'none';
+	}
+
+	// クライアントが更新されたか？
+	const lastVersion = localStorage.getItem('lastVersion');
+	if (lastVersion !== version) {
+		localStorage.setItem('lastVersion', version);
+
+		// テーマリビルドするため
+		localStorage.removeItem('theme');
+
+		try { // 変なバージョン文字列来るとcompareVersionsでエラーになるため
+			if (lastVersion != null && compareVersions(version, lastVersion) === 1) {
+				// ログインしてる場合だけ
+				if ($i) {
+					popup(defineAsyncComponent(() => import('@/components/MkUpdated.vue')), {}, {}, 'closed');
+				}
+			}
+		} catch (err) {
+		}
+	}
+
+	// NOTE: この処理は必ず↑のクライアント更新時処理より後に来ること(テーマ再構築のため)
+	watch(defaultStore.reactiveState.darkMode, (darkMode) => {
+		applyTheme(darkMode ? ColdDeviceStorage.get('darkTheme') : ColdDeviceStorage.get('lightTheme'));
+	}, { immediate: localStorage.theme == null });
+
+	const darkTheme = computed(ColdDeviceStorage.makeGetterSetter('darkTheme'));
+	const lightTheme = computed(ColdDeviceStorage.makeGetterSetter('lightTheme'));
+
+	watch(darkTheme, (theme) => {
+		if (defaultStore.state.darkMode) {
+			applyTheme(theme);
+		}
+	});
+
+	watch(lightTheme, (theme) => {
+		if (!defaultStore.state.darkMode) {
+			applyTheme(theme);
+		}
+	});
+
+	//#region Sync dark mode
+	if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
+		defaultStore.set('darkMode', isDeviceDarkmode());
+	}
+
+	window.matchMedia('(prefers-color-scheme: dark)').addListener(mql => {
+		if (ColdDeviceStorage.get('syncDeviceDarkMode')) {
+			defaultStore.set('darkMode', mql.matches);
+		}
+	});
+	//#endregion
+
+	fetchInstanceMetaPromise.then(() => {
+		if (defaultStore.state.themeInitial) {
+			if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON5.parse(instance.defaultLightTheme));
+			if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON5.parse(instance.defaultDarkTheme));
+			defaultStore.set('themeInitial', false);
+		}
+	});
+
+	watch(defaultStore.reactiveState.useBlurEffectForModal, v => {
+		document.documentElement.style.setProperty('--modalBgFilter', v ? 'blur(4px)' : 'none');
+	}, { immediate: true });
+
+	watch(defaultStore.reactiveState.useBlurEffect, v => {
+		if (v) {
+			document.documentElement.style.removeProperty('--blur');
+		} else {
+			document.documentElement.style.setProperty('--blur', 'none');
+		}
+	}, { immediate: true });
+
+	let reloadDialogShowing = false;
+	stream.on('_disconnected_', async () => {
+		if (defaultStore.state.serverDisconnectedBehavior === 'reload') {
+			location.reload();
+		} else if (defaultStore.state.serverDisconnectedBehavior === 'dialog') {
+			if (reloadDialogShowing) return;
+			reloadDialogShowing = true;
+			const { canceled } = await confirm({
+				type: 'warning',
+				title: i18n.ts.disconnectedFromServer,
+				text: i18n.ts.reloadConfirm,
+			});
+			reloadDialogShowing = false;
+			if (!canceled) {
+				location.reload();
+			}
+		}
+	});
+
+	stream.on('emojiAdded', emojiData => {
+		// TODO
+		//store.commit('instance/set', );
+	});
+
+	for (const plugin of ColdDeviceStorage.get('plugins').filter(p => p.active)) {
+		import('./plugin').then(({ install }) => {
+			install(plugin);
+		});
+	}
+
+	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',
+				text: i18n.ts.accountDeletionInProgress,
+			});
+		}
+
+		const lastUsed = localStorage.getItem('lastUsed');
+		if (lastUsed) {
+			const lastUsedDate = parseInt(lastUsed, 10);
+			// 二時間以上前なら
+			if (Date.now() - lastUsedDate > 1000 * 60 * 60 * 2) {
+				toast(i18n.t('welcomeBackWithName', {
+					name: $i.name || $i.username,
+				}));
+			}
+		}
+		localStorage.setItem('lastUsed', Date.now().toString());
+
+		if ('Notification' in window) {
+			// 許可を得ていなかったらリクエスト
+			if (Notification.permission === 'default') {
+				Notification.requestPermission();
+			}
+		}
+
+		const main = markRaw(stream.useChannel('main', null, 'System'));
+
+		// 自分の情報が更新されたとき
+		main.on('meUpdated', i => {
+			updateAccount(i);
+		});
+
+		main.on('readAllNotifications', () => {
+			updateAccount({ hasUnreadNotification: false });
+		});
+
+		main.on('unreadNotification', () => {
+			updateAccount({ hasUnreadNotification: true });
+		});
+
+		main.on('unreadMention', () => {
+			updateAccount({ hasUnreadMentions: true });
+		});
+
+		main.on('readAllUnreadMentions', () => {
+			updateAccount({ hasUnreadMentions: false });
+		});
+
+		main.on('unreadSpecifiedNote', () => {
+			updateAccount({ hasUnreadSpecifiedNotes: true });
+		});
+
+		main.on('readAllUnreadSpecifiedNotes', () => {
+			updateAccount({ hasUnreadSpecifiedNotes: false });
+		});
+
+		main.on('readAllMessagingMessages', () => {
+			updateAccount({ hasUnreadMessagingMessage: false });
+		});
+
+		main.on('unreadMessagingMessage', () => {
+			updateAccount({ hasUnreadMessagingMessage: true });
+			sound.play('chatBg');
+		});
+
+		main.on('readAllAntennas', () => {
+			updateAccount({ hasUnreadAntenna: false });
+		});
+
+		main.on('unreadAntenna', () => {
+			updateAccount({ hasUnreadAntenna: true });
+			sound.play('antenna');
+		});
+
+		main.on('readAllAnnouncements', () => {
+			updateAccount({ hasUnreadAnnouncement: false });
+		});
+
+		main.on('readAllChannels', () => {
+			updateAccount({ hasUnreadChannel: false });
+		});
+
+		main.on('unreadChannel', () => {
+			updateAccount({ hasUnreadChannel: true });
+			sound.play('channel');
+		});
+
+		// トークンが再生成されたとき
+		// このままではMisskeyが利用できないので強制的にサインアウトさせる
+		main.on('myTokenRegenerated', () => {
+			signout();
+		});
+	}
+
+	// shortcut
+	document.addEventListener('keydown', makeHotkey(hotkeys));
+})();
diff --git a/packages/frontend/src/instance.ts b/packages/frontend/src/instance.ts
new file mode 100644
index 0000000000..51464f32fb
--- /dev/null
+++ b/packages/frontend/src/instance.ts
@@ -0,0 +1,45 @@
+import { computed, reactive } from 'vue';
+import * as Misskey from 'misskey-js';
+import { api } from './os';
+
+// TODO: 他のタブと永続化されたstateを同期
+
+const instanceData = localStorage.getItem('instance');
+
+// TODO: instanceをリアクティブにするかは再考の余地あり
+
+export const instance: Misskey.entities.InstanceMetadata = reactive(instanceData ? JSON.parse(instanceData) : {
+	// TODO: set default values
+});
+
+export async function fetchInstance() {
+	const meta = await api('meta', {
+		detail: false,
+	});
+
+	for (const [k, v] of Object.entries(meta)) {
+		instance[k] = v;
+	}
+
+	localStorage.setItem('instance', JSON.stringify(instance));
+}
+
+export const emojiCategories = computed(() => {
+	if (instance.emojis == null) return [];
+	const categories = new Set();
+	for (const emoji of instance.emojis) {
+		categories.add(emoji.category);
+	}
+	return Array.from(categories);
+});
+
+export const emojiTags = computed(() => {
+	if (instance.emojis == null) return [];
+	const tags = new Set();
+	for (const emoji of instance.emojis) {
+		for (const tag of emoji.aliases) {
+			tags.add(tag);
+		}
+	}
+	return Array.from(tags);
+});
diff --git a/packages/frontend/src/navbar.ts b/packages/frontend/src/navbar.ts
new file mode 100644
index 0000000000..31e6cd64a4
--- /dev/null
+++ b/packages/frontend/src/navbar.ts
@@ -0,0 +1,135 @@
+import { computed, ref, reactive } from 'vue';
+import { $i } from './account';
+import { search } from '@/scripts/search';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { ui } from '@/config';
+import { unisonReload } from '@/scripts/unison-reload';
+
+export const navbarItemDef = reactive({
+	notifications: {
+		title: 'notifications',
+		icon: 'ti ti-bell',
+		show: computed(() => $i != null),
+		indicated: computed(() => $i != null && $i.hasUnreadNotification),
+		to: '/my/notifications',
+	},
+	messaging: {
+		title: 'messaging',
+		icon: 'ti ti-messages',
+		show: computed(() => $i != null),
+		indicated: computed(() => $i != null && $i.hasUnreadMessagingMessage),
+		to: '/my/messaging',
+	},
+	drive: {
+		title: 'drive',
+		icon: 'ti ti-cloud',
+		show: computed(() => $i != null),
+		to: '/my/drive',
+	},
+	followRequests: {
+		title: 'followRequests',
+		icon: 'ti ti-user-plus',
+		show: computed(() => $i != null && $i.isLocked),
+		indicated: computed(() => $i != null && $i.hasPendingReceivedFollowRequest),
+		to: '/my/follow-requests',
+	},
+	explore: {
+		title: 'explore',
+		icon: 'ti ti-hash',
+		to: '/explore',
+	},
+	announcements: {
+		title: 'announcements',
+		icon: 'ti ti-speakerphone',
+		indicated: computed(() => $i != null && $i.hasUnreadAnnouncement),
+		to: '/announcements',
+	},
+	search: {
+		title: 'search',
+		icon: 'ti ti-search',
+		action: () => search(),
+	},
+	lists: {
+		title: 'lists',
+		icon: 'ti ti-list',
+		show: computed(() => $i != null),
+		to: '/my/lists',
+	},
+	/*
+	groups: {
+		title: 'groups',
+		icon: 'ti ti-users',
+		show: computed(() => $i != null),
+		to: '/my/groups',
+	},
+	*/
+	antennas: {
+		title: 'antennas',
+		icon: 'ti ti-antenna',
+		show: computed(() => $i != null),
+		to: '/my/antennas',
+	},
+	favorites: {
+		title: 'favorites',
+		icon: 'ti ti-star',
+		show: computed(() => $i != null),
+		to: '/my/favorites',
+	},
+	pages: {
+		title: 'pages',
+		icon: 'ti ti-news',
+		to: '/pages',
+	},
+	gallery: {
+		title: 'gallery',
+		icon: 'ti ti-icons',
+		to: '/gallery',
+	},
+	clips: {
+		title: 'clip',
+		icon: 'ti ti-paperclip',
+		show: computed(() => $i != null),
+		to: '/my/clips',
+	},
+	channels: {
+		title: 'channel',
+		icon: 'ti ti-device-tv',
+		to: '/channels',
+	},
+	ui: {
+		title: 'switchUi',
+		icon: 'ti ti-devices',
+		action: (ev) => {
+			os.popupMenu([{
+				text: i18n.ts.default,
+				active: ui === 'default' || ui === null,
+				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();
+				},
+			}], ev.currentTarget ?? ev.target);
+		},
+	},
+	reload: {
+		title: 'reload',
+		icon: 'ti ti-refresh',
+		action: (ev) => {
+			location.reload();
+		},
+	},
+});
diff --git a/packages/frontend/src/nirax.ts b/packages/frontend/src/nirax.ts
new file mode 100644
index 0000000000..53e73a8d48
--- /dev/null
+++ b/packages/frontend/src/nirax.ts
@@ -0,0 +1,275 @@
+// NIRAX --- A lightweight router
+
+import { EventEmitter } from 'eventemitter3';
+import { Ref, Component, ref, shallowRef, ShallowRef } from 'vue';
+import { pleaseLogin } from '@/scripts/please-login';
+import { safeURIDecode } from '@/scripts/safe-uri-decode';
+
+type RouteDef = {
+	path: string;
+	component: Component;
+	query?: Record<string, string>;
+	loginRequired?: boolean;
+	name?: string;
+	hash?: string;
+	globalCacheKey?: string;
+	children?: RouteDef[];
+};
+
+type ParsedPath = (string | {
+	name: string;
+	startsWith?: string;
+	wildcard?: boolean;
+	optional?: boolean;
+})[];
+
+export type Resolved = { route: RouteDef; props: Map<string, string>; child?: Resolved; };
+
+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 if (part.length !== 0) {
+			res.push(part);
+		}
+	}
+
+	return res;
+}
+
+export class Router extends EventEmitter<{
+	change: (ctx: {
+		beforePath: string;
+		path: string;
+		resolved: Resolved;
+		key: string;
+	}) => void;
+	replace: (ctx: {
+		path: string;
+		key: string;
+	}) => void;
+	push: (ctx: {
+		beforePath: string;
+		path: string;
+		route: RouteDef | null;
+		props: Map<string, string> | null;
+		key: string;
+	}) => void;
+	same: () => void;
+}> {
+	private routes: RouteDef[];
+	public current: Resolved;
+	public currentRef: ShallowRef<Resolved> = shallowRef();
+	public currentRoute: ShallowRef<RouteDef> = shallowRef();
+	private currentPath: string;
+	private currentKey = Date.now().toString();
+
+	public navHook: ((path: string, flag?: any) => boolean) | null = null;
+
+	constructor(routes: Router['routes'], currentPath: Router['currentPath']) {
+		super();
+
+		this.routes = routes;
+		this.currentPath = currentPath;
+		this.navigate(currentPath, null, false);
+	}
+
+	public resolve(path: string): Resolved | null {
+		let queryString: string | null = null;
+		let hash: string | null = null;
+		if (path[0] === '/') path = path.substring(1);
+		if (path.includes('#')) {
+			hash = path.substring(path.indexOf('#') + 1);
+			path = path.substring(0, path.indexOf('#'));
+		}
+		if (path.includes('?')) {
+			queryString = path.substring(path.indexOf('?') + 1);
+			path = path.substring(0, path.indexOf('?'));
+		}
+
+		if (_DEV_) console.log('Routing: ', path, queryString);
+
+		function check(routes: RouteDef[], _parts: string[]): Resolved | null {
+			forEachRouteLoop:
+			for (const route of routes) {
+				let parts = [..._parts];
+				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, safeURIDecode(parts.join('/')));
+								parts = [];
+							}
+							break pathMatchLoop;
+						} else {
+							if (p.startsWith) {
+								if (parts[0] == null || !parts[0].startsWith(p.startsWith)) continue forEachRouteLoop;
+
+								props.set(p.name, safeURIDecode(parts[0].substring(p.startsWith.length)));
+								parts.shift();
+							} else {
+								if (parts[0]) {
+									props.set(p.name, safeURIDecode(parts[0]));
+								}
+								parts.shift();
+							}
+						}
+					}
+				}
+
+				if (parts.length === 0) {
+					if (route.children) {
+						const child = check(route.children, []);
+						if (child) {
+							return {
+								route,
+								props,
+								child,
+							};
+						} else {
+							continue forEachRouteLoop;
+						}
+					}
+
+					if (route.hash != null && hash != null) {
+						props.set(route.hash, safeURIDecode(hash));
+					}
+	
+					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, safeURIDecode(queryObject[q]));
+							}
+						}
+					}
+	
+					return {
+						route,
+						props,
+					};
+				} else {
+					if (route.children) {
+						const child = check(route.children, parts);
+						if (child) {
+							return {
+								route,
+								props,
+								child,
+							};
+						} else {
+							continue forEachRouteLoop;
+						}
+					} else {
+						continue forEachRouteLoop;
+					}
+				}
+			}
+
+			return null;
+		}
+
+		const _parts = path.split('/').filter(part => part.length !== 0);
+
+		return check(this.routes, _parts);
+	}
+
+	private navigate(path: string, key: string | null | undefined, emitChange = true) {
+		const beforePath = this.currentPath;
+		this.currentPath = path;
+
+		const res = this.resolve(this.currentPath);
+
+		if (res == null) {
+			throw new Error('no route found for: ' + path);
+		}
+
+		if (res.route.loginRequired) {
+			pleaseLogin('/');
+		}
+
+		const isSamePath = beforePath === path;
+		if (isSamePath && key == null) key = this.currentKey;
+		this.current = res;
+		this.currentRef.value = res;
+		this.currentRoute.value = res.route;
+		this.currentKey = res.route.globalCacheKey ?? key ?? path;
+
+		if (emitChange) {
+			this.emit('change', {
+				beforePath,
+				path,
+				resolved: res,
+				key: this.currentKey,
+			});
+		}
+
+		return res;
+	}
+
+	public getCurrentPath() {
+		return this.currentPath;
+	}
+
+	public getCurrentKey() {
+		return this.currentKey;
+	}
+
+	public push(path: string, flag?: any) {
+		const beforePath = this.currentPath;
+		if (path === beforePath) {
+			this.emit('same');
+			return;
+		}
+		if (this.navHook) {
+			const cancel = this.navHook(path, flag);
+			if (cancel) return;
+		}
+		const res = this.navigate(path, null);
+		this.emit('push', {
+			beforePath,
+			path,
+			route: res.route,
+			props: res.props,
+			key: this.currentKey,
+		});
+	}
+
+	public replace(path: string, key?: string | null, emitEvent = true) {
+		this.navigate(path, key);
+		if (emitEvent) {
+			this.emit('replace', {
+				path,
+				key: this.currentKey,
+			});
+		}
+	}
+}
diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts
new file mode 100644
index 0000000000..7e57dcb4af
--- /dev/null
+++ b/packages/frontend/src/os.ts
@@ -0,0 +1,588 @@
+// TODO: なんでもかんでもos.tsに突っ込むのやめたいのでよしなに分割する
+
+import { Component, markRaw, Ref, ref, defineAsyncComponent } from 'vue';
+import { EventEmitter } from 'eventemitter3';
+import insertTextAtCursor from 'insert-text-at-cursor';
+import * as Misskey from 'misskey-js';
+import { apiUrl, url } from '@/config';
+import MkPostFormDialog from '@/components/MkPostFormDialog.vue';
+import MkWaitingDialog from '@/components/MkWaitingDialog.vue';
+import { MenuItem } from '@/types/menu';
+import { $i } from '@/account';
+
+export const pendingApiRequestsCount = ref(0);
+
+const apiClient = new Misskey.api.APIClient({
+	origin: url,
+});
+
+export const api = ((endpoint: string, data: Record<string, any> = {}, token?: string | null | undefined) => {
+	pendingApiRequestsCount.value++;
+
+	const onFinally = () => {
+		pendingApiRequestsCount.value--;
+	};
+
+	const promise = new Promise((resolve, reject) => {
+		// Append a credential
+		if ($i) (data as any).i = $i.token;
+		if (token !== undefined) (data as any).i = token;
+
+		// Send request
+		window.fetch(endpoint.indexOf('://') > -1 ? endpoint : `${apiUrl}/${endpoint}`, {
+			method: 'POST',
+			body: JSON.stringify(data),
+			credentials: 'omit',
+			cache: 'no-cache',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+		}).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 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
+		window.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> = {},
+	token?: string | null | undefined,
+) => {
+	const promise = api(endpoint, data, token);
+	promiseDialog(promise, null, (err) => {
+		alert({
+			type: 'error',
+			text: err.message + '\n' + (err as any).id,
+		});
+	});
+
+	return promise;
+}) as typeof api;
+
+export function promiseDialog<T extends Promise<any>>(
+	promise: T,
+	onSuccess?: ((res: any) => void) | null,
+	onFailure?: ((err: Error) => void) | null,
+	text?: string,
+): T {
+	const showing = ref(true);
+	const success = ref(false);
+
+	promise.then(res => {
+		if (onSuccess) {
+			showing.value = false;
+			onSuccess(res);
+		} else {
+			success.value = true;
+			window.setTimeout(() => {
+				showing.value = false;
+			}, 1000);
+		}
+	}).catch(err => {
+		showing.value = false;
+		if (onFailure) {
+			onFailure(err);
+		} else {
+			alert({
+				type: 'error',
+				text: err,
+			});
+		}
+	});
+
+	// NOTE: dynamic importすると挙動がおかしくなる(showingの変更が伝播しない)
+	popup(MkWaitingDialog, {
+		success: success,
+		showing: showing,
+		text: text,
+	}, {}, 'closed');
+
+	return promise;
+}
+
+let popupIdCount = 0;
+export const popups = ref([]) as Ref<{
+	id: any;
+	component: any;
+	props: Record<string, any>;
+}[]>;
+
+const zIndexes = {
+	low: 1000000,
+	middle: 2000000,
+	high: 3000000,
+};
+export function claimZIndex(priority: 'low' | 'middle' | 'high' = 'low'): number {
+	zIndexes[priority] += 100;
+	return zIndexes[priority];
+}
+
+export async function popup(component: Component, props: Record<string, any>, events = {}, disposeEvent?: string) {
+	markRaw(component);
+
+	const id = ++popupIdCount;
+	const dispose = () => {
+		// このsetTimeoutが無いと挙動がおかしくなる(autocompleteが閉じなくなる)。Vueのバグ？
+		window.setTimeout(() => {
+			popups.value = popups.value.filter(popup => popup.id !== id);
+		}, 0);
+	};
+	const state = {
+		component,
+		props,
+		events: disposeEvent ? {
+			...events,
+			[disposeEvent]: dispose,
+		} : events,
+		id,
+	};
+
+	popups.value.push(state);
+
+	return {
+		dispose,
+	};
+}
+
+export function pageWindow(path: string) {
+	popup(defineAsyncComponent(() => import('@/components/MkPageWindow.vue')), {
+		initialPath: path,
+	}, {}, 'closed');
+}
+
+export function modalPageWindow(path: string) {
+	popup(defineAsyncComponent(() => import('@/components/MkModalPageWindow.vue')), {
+		initialPath: path,
+	}, {}, 'closed');
+}
+
+export function toast(message: string) {
+	popup(defineAsyncComponent(() => import('@/components/MkToast.vue')), {
+		message,
+	}, {}, 'closed');
+}
+
+export function alert(props: {
+	type?: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
+	title?: string | null;
+	text?: string | null;
+}): Promise<void> {
+	return new Promise((resolve, reject) => {
+		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), props, {
+			done: result => {
+				resolve();
+			},
+		}, 'closed');
+	});
+}
+
+export function confirm(props: {
+	type: 'error' | 'info' | 'success' | 'warning' | 'waiting' | 'question';
+	title?: string | null;
+	text?: string | null;
+}): Promise<{ canceled: boolean }> {
+	return new Promise((resolve, reject) => {
+		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), {
+			...props,
+			showCancelButton: true,
+		}, {
+			done: result => {
+				resolve(result ? result : { canceled: true });
+			},
+		}, 'closed');
+	});
+}
+
+export function inputText(props: {
+	type?: 'text' | 'email' | 'password' | 'url';
+	title?: string | null;
+	text?: string | null;
+	placeholder?: string | null;
+	default?: string | null;
+}): Promise<{ canceled: true; result: undefined; } | {
+	canceled: false; result: string;
+}> {
+	return new Promise((resolve, reject) => {
+		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), {
+			title: props.title,
+			text: props.text,
+			input: {
+				type: props.type,
+				placeholder: props.placeholder,
+				default: props.default,
+			},
+		}, {
+			done: result => {
+				resolve(result ? result : { canceled: true });
+			},
+		}, 'closed');
+	});
+}
+
+export function inputNumber(props: {
+	title?: string | null;
+	text?: string | null;
+	placeholder?: string | null;
+	default?: number | null;
+}): Promise<{ canceled: true; result: undefined; } | {
+	canceled: false; result: number;
+}> {
+	return new Promise((resolve, reject) => {
+		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), {
+			title: props.title,
+			text: props.text,
+			input: {
+				type: 'number',
+				placeholder: props.placeholder,
+				default: props.default,
+			},
+		}, {
+			done: result => {
+				resolve(result ? result : { canceled: true });
+			},
+		}, 'closed');
+	});
+}
+
+export function inputDate(props: {
+	title?: string | null;
+	text?: string | null;
+	placeholder?: string | null;
+	default?: Date | null;
+}): Promise<{ canceled: true; result: undefined; } | {
+	canceled: false; result: Date;
+}> {
+	return new Promise((resolve, reject) => {
+		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), {
+			title: props.title,
+			text: props.text,
+			input: {
+				type: 'date',
+				placeholder: props.placeholder,
+				default: props.default,
+			},
+		}, {
+			done: result => {
+				resolve(result ? { result: new Date(result.result), canceled: false } : { canceled: true });
+			},
+		}, 'closed');
+	});
+}
+
+export function select<C = any>(props: {
+	title?: string | null;
+	text?: string | null;
+	default?: string | null;
+} & ({
+	items: {
+		value: C;
+		text: string;
+	}[];
+} | {
+	groupedItems: {
+		label: string;
+		items: {
+			value: C;
+			text: string;
+		}[];
+	}[];
+})): Promise<{ canceled: true; result: undefined; } | {
+	canceled: false; result: C;
+}> {
+	return new Promise((resolve, reject) => {
+		popup(defineAsyncComponent(() => import('@/components/MkDialog.vue')), {
+			title: props.title,
+			text: props.text,
+			select: {
+				items: props.items,
+				groupedItems: props.groupedItems,
+				default: props.default,
+			},
+		}, {
+			done: result => {
+				resolve(result ? result : { canceled: true });
+			},
+		}, 'closed');
+	});
+}
+
+export function success() {
+	return new Promise((resolve, reject) => {
+		const showing = ref(true);
+		window.setTimeout(() => {
+			showing.value = false;
+		}, 1000);
+		popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), {
+			success: true,
+			showing: showing,
+		}, {
+			done: () => resolve(),
+		}, 'closed');
+	});
+}
+
+export function waiting() {
+	return new Promise((resolve, reject) => {
+		const showing = ref(true);
+		popup(defineAsyncComponent(() => import('@/components/MkWaitingDialog.vue')), {
+			success: false,
+			showing: showing,
+		}, {
+			done: () => resolve(),
+		}, 'closed');
+	});
+}
+
+export function form(title, form) {
+	return new Promise((resolve, reject) => {
+		popup(defineAsyncComponent(() => import('@/components/MkFormDialog.vue')), { title, form }, {
+			done: result => {
+				resolve(result);
+			},
+		}, 'closed');
+	});
+}
+
+export async function selectUser() {
+	return new Promise((resolve, reject) => {
+		popup(defineAsyncComponent(() => import('@/components/MkUserSelectDialog.vue')), {}, {
+			ok: user => {
+				resolve(user);
+			},
+		}, 'closed');
+	});
+}
+
+export async function selectDriveFile(multiple: boolean) {
+	return new Promise((resolve, reject) => {
+		popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
+			type: 'file',
+			multiple,
+		}, {
+			done: files => {
+				if (files) {
+					resolve(multiple ? files : files[0]);
+				}
+			},
+		}, 'closed');
+	});
+}
+
+export async function selectDriveFolder(multiple: boolean) {
+	return new Promise((resolve, reject) => {
+		popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), {
+			type: 'folder',
+			multiple,
+		}, {
+			done: folders => {
+				if (folders) {
+					resolve(multiple ? folders : folders[0]);
+				}
+			},
+		}, 'closed');
+	});
+}
+
+export async function pickEmoji(src: HTMLElement | null, opts) {
+	return new Promise((resolve, reject) => {
+		popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
+			src,
+			...opts,
+		}, {
+			done: emoji => {
+				resolve(emoji);
+			},
+		}, 'closed');
+	});
+}
+
+export async function cropImage(image: Misskey.entities.DriveFile, options: {
+	aspectRatio: number;
+}): Promise<Misskey.entities.DriveFile> {
+	return new Promise((resolve, reject) => {
+		popup(defineAsyncComponent(() => import('@/components/MkCropperDialog.vue')), {
+			file: image,
+			aspectRatio: options.aspectRatio,
+		}, {
+			ok: x => {
+				resolve(x);
+			},
+		}, 'closed');
+	});
+}
+
+type AwaitType<T> =
+	T extends Promise<infer U> ? U :
+	T extends (...args: any[]) => Promise<infer V> ? V :
+	T;
+let openingEmojiPicker: AwaitType<ReturnType<typeof popup>> | null = null;
+let activeTextarea: HTMLTextAreaElement | HTMLInputElement | null = null;
+export async function openEmojiPicker(src?: HTMLElement, opts, initialTextarea: typeof activeTextarea) {
+	if (openingEmojiPicker) return;
+
+	activeTextarea = initialTextarea;
+
+	const textareas = document.querySelectorAll('textarea, input');
+	for (const textarea of Array.from(textareas)) {
+		textarea.addEventListener('focus', () => {
+			activeTextarea = textarea;
+		});
+	}
+
+	const observer = new MutationObserver(records => {
+		for (const record of records) {
+			for (const node of Array.from(record.addedNodes).filter(node => node instanceof HTMLElement) as HTMLElement[]) {
+				const textareas = node.querySelectorAll('textarea, input') as NodeListOf<NonNullable<typeof activeTextarea>>;
+				for (const textarea of Array.from(textareas).filter(textarea => textarea.dataset.preventEmojiInsert == null)) {
+					if (document.activeElement === textarea) activeTextarea = textarea;
+					textarea.addEventListener('focus', () => {
+						activeTextarea = textarea;
+					});
+				}
+			}
+		}
+	});
+
+	observer.observe(document.body, {
+		childList: true,
+		subtree: true,
+		attributes: false,
+		characterData: false,
+	});
+
+	openingEmojiPicker = await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerWindow.vue')), {
+		src,
+		...opts,
+	}, {
+		chosen: emoji => {
+			insertTextAtCursor(activeTextarea, emoji);
+		},
+		closed: () => {
+			openingEmojiPicker!.dispose();
+			openingEmojiPicker = null;
+			observer.disconnect();
+		},
+	});
+}
+
+export function popupMenu(items: MenuItem[] | Ref<MenuItem[]>, src?: HTMLElement, options?: {
+	align?: string;
+	width?: number;
+	viaKeyboard?: boolean;
+}) {
+	return new Promise((resolve, reject) => {
+		let dispose;
+		popup(defineAsyncComponent(() => import('@/components/MkPopupMenu.vue')), {
+			items,
+			src,
+			width: options?.width,
+			align: options?.align,
+			viaKeyboard: options?.viaKeyboard,
+		}, {
+			closed: () => {
+				resolve();
+				dispose();
+			},
+		}).then(res => {
+			dispose = res.dispose;
+		});
+	});
+}
+
+export function contextMenu(items: MenuItem[] | Ref<MenuItem[]>, ev: MouseEvent) {
+	ev.preventDefault();
+	return new Promise((resolve, reject) => {
+		let dispose;
+		popup(defineAsyncComponent(() => import('@/components/MkContextMenu.vue')), {
+			items,
+			ev,
+		}, {
+			closed: () => {
+				resolve();
+				dispose();
+			},
+		}).then(res => {
+			dispose = res.dispose;
+		});
+	});
+}
+
+export function post(props: Record<string, any> = {}) {
+	return new Promise((resolve, reject) => {
+		// NOTE: MkPostFormDialogをdynamic importするとiOSでテキストエリアに自動フォーカスできない
+		// NOTE: ただ、dynamic importしない場合、MkPostFormDialogインスタンスが使いまわされ、
+		//       Vueが渡されたコンポーネントに内部的に__propsというプロパティを生やす影響で、
+		//       複数のpost formを開いたときに場合によってはエラーになる
+		//       もちろん複数のpost formを開けること自体Misskeyサイドのバグなのだが
+		let dispose;
+		popup(MkPostFormDialog, props, {
+			closed: () => {
+				resolve();
+				dispose();
+			},
+		}).then(res => {
+			dispose = res.dispose;
+		});
+	});
+}
+
+export const deckGlobalEvents = new EventEmitter();
+
+/*
+export function checkExistence(fileData: ArrayBuffer): Promise<any> {
+	return new Promise((resolve, reject) => {
+		const data = new FormData();
+		data.append('md5', getMD5(fileData));
+
+		os.api('drive/files/find-by-hash', {
+			md5: getMD5(fileData)
+		}).then(resp => {
+			resolve(resp.length > 0 ? resp[0] : null);
+		});
+	});
+}*/
diff --git a/packages/frontend/src/pages/_empty_.vue b/packages/frontend/src/pages/_empty_.vue
new file mode 100644
index 0000000000..000b6decc9
--- /dev/null
+++ b/packages/frontend/src/pages/_empty_.vue
@@ -0,0 +1,7 @@
+<template>
+<div></div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+</script>
diff --git a/packages/frontend/src/pages/_error_.vue b/packages/frontend/src/pages/_error_.vue
new file mode 100644
index 0000000000..232d525347
--- /dev/null
+++ b/packages/frontend/src/pages/_error_.vue
@@ -0,0 +1,89 @@
+<template>
+<MkLoading v-if="!loaded"/>
+<transition :name="$store.state.animation ? 'zoom' : ''" appear>
+	<div v-show="loaded" class="mjndxjch">
+		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
+		<p><b><i class="ti ti-alert-triangle"></i> {{ i18n.ts.pageLoadError }}</b></p>
+		<p v-if="meta && (version === meta.version)">{{ i18n.ts.pageLoadErrorDescription }}</p>
+		<p v-else-if="serverIsDead">{{ i18n.ts.serverIsDead }}</p>
+		<template v-else>
+			<p>{{ i18n.ts.newVersionOfClientAvailable }}</p>
+			<p>{{ i18n.ts.youShouldUpgradeClient }}</p>
+			<MkButton class="button primary" @click="reload">{{ i18n.ts.reload }}</MkButton>
+		</template>
+		<p><MkA to="/docs/general/troubleshooting" class="_link">{{ i18n.ts.troubleshooting }}</MkA></p>
+		<p v-if="error" class="error">ERROR: {{ error }}</p>
+	</div>
+</transition>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as misskey from 'misskey-js';
+import MkButton from '@/components/MkButton.vue';
+import { version } from '@/config';
+import * as os from '@/os';
+import { unisonReload } from '@/scripts/unison-reload';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const props = withDefaults(defineProps<{
+	error?: Error;
+}>(), {
+});
+
+let loaded = $ref(false);
+let serverIsDead = $ref(false);
+let meta = $ref<misskey.entities.LiteInstanceMetadata | null>(null);
+
+os.api('meta', {
+	detail: false,
+}).then(res => {
+	loaded = true;
+	serverIsDead = false;
+	meta = res;
+	localStorage.setItem('v', res.version);
+}, () => {
+	loaded = true;
+	serverIsDead = true;
+});
+
+function reload() {
+	unisonReload();
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.error,
+	icon: 'ti ti-alert-triangle',
+});
+</script>
+
+<style lang="scss" scoped>
+.mjndxjch {
+	padding: 32px;
+	text-align: center;
+
+	> p {
+		margin: 0 0 12px 0;
+	}
+
+	> .button {
+		margin: 8px auto;
+	}
+
+	> img {
+		vertical-align: bottom;
+		height: 128px;
+		margin-bottom: 24px;
+		border-radius: 16px;
+	}
+
+	> .error {
+		opacity: 0.7;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/_loading_.vue b/packages/frontend/src/pages/_loading_.vue
new file mode 100644
index 0000000000..1dd2e46e10
--- /dev/null
+++ b/packages/frontend/src/pages/_loading_.vue
@@ -0,0 +1,6 @@
+<template>
+<MkLoading/>
+</template>
+
+<script lang="ts" setup>
+</script>
diff --git a/packages/frontend/src/pages/about-misskey.vue b/packages/frontend/src/pages/about-misskey.vue
new file mode 100644
index 0000000000..3ec972bcda
--- /dev/null
+++ b/packages/frontend/src/pages/about-misskey.vue
@@ -0,0 +1,264 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<div style="overflow: clip;">
+		<MkSpacer :content-max="600" :margin-min="20">
+			<div class="_formRoot znqjceqz">
+				<div id="debug"></div>
+				<div ref="containerEl" v-panel class="_formBlock about" :class="{ playing: easterEggEngine != null }">
+					<img src="/client-assets/about-icon.png" alt="" class="icon" draggable="false" @load="iconLoaded" @click="gravity"/>
+					<div class="misskey">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="ti ti-code"></i></template>
+							{{ i18n.ts._aboutMisskey.source }}
+							<template #suffix>GitHub</template>
+						</FormLink>
+						<FormLink to="https://crowdin.com/project/misskey" external>
+							<template #icon><i class="ti ti-language-hiragana"></i></template>
+							{{ i18n.ts._aboutMisskey.translation }}
+							<template #suffix>Crowdin</template>
+						</FormLink>
+						<FormLink to="https://www.patreon.com/syuilo" external>
+							<template #icon><i class="ti ti-pig-money"></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>
+import { nextTick, onBeforeUnmount } from 'vue';
+import { version } from '@/config';
+import FormLink from '@/components/form/link.vue';
+import FormSection from '@/components/form/section.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkLink from '@/components/MkLink.vue';
+import { physics } from '@/scripts/physics';
+import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
+import * as os from '@/os';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const patrons = [
+	'まっちゃとーにゅ',
+	'mametsuko',
+	'noellabo',
+	'AureoleArk',
+	'Gargron',
+	'Nokotaro Takeda',
+	'Suji Yan',
+	'oi_yekssim',
+	'regtan',
+	'Hekovic',
+	'nenohi',
+	'Gitmo Life Services',
+	'naga_rus',
+	'Efertone',
+	'Melilot',
+	'motcha',
+	'nanami kan',
+	'sevvie Rose',
+	'Hayato Ishikawa',
+	'Puniko',
+	'skehmatics',
+	'Quinton Macejkovic',
+	'YUKIMOCHI',
+	'dansup',
+	'mewl hayabusa',
+	'Emilis',
+	'Fristi',
+	'makokunsan',
+	'chidori ninokura',
+	'Peter G.',
+	'見当かなみ',
+	'natalie',
+	'Maronu',
+	'Steffen K9',
+	'takimura',
+	'sikyosyounin',
+	'Nesakko',
+	'YuzuRyo61',
+	'blackskye',
+	'sheeta.s',
+	'osapon',
+	'public_yusuke',
+	'CG',
+	'吴浥',
+	't_w',
+	'Jerry',
+	'nafuchoco',
+	'Takumi Sugita',
+	'GLaTAN',
+	'mkatze',
+	'kabo2468y',
+	'mydarkstar',
+	'Roujo',
+	'DignifiedSilence',
+	'uroco @99',
+	'totokoro',
+	'うし',
+	'kiritan',
+	'weepjp',
+	'Liaizon Wakest',
+	'Duponin',
+	'Blue',
+	'Naoki Hirayama',
+	'wara',
+	'Wataru Manji (manji0)',
+	'みなしま',
+	'kanoy',
+	'xianon',
+	'Denshi',
+	'Osushimaru',
+	'にょんへら',
+	'おのだい',
+	'Leni',
+	'oss',
+	'Weeble',
+	'蝉暮せせせ',
+	'ThatOneCalculator',
+	'pixeldesu',
+];
+
+let easterEggReady = false;
+let easterEggEmojis = $ref([]);
+let easterEggEngine = $ref(null);
+const containerEl = $ref<HTMLElement>();
+
+function iconLoaded() {
+	const emojis = defaultStore.state.reactions;
+	const containerWidth = containerEl.offsetWidth;
+	for (let i = 0; i < 32; i++) {
+		easterEggEmojis.push({
+			id: i.toString(),
+			top: -(128 + (Math.random() * 256)),
+			left: (Math.random() * containerWidth),
+			emoji: emojis[Math.floor(Math.random() * emojis.length)],
+		});
+	}
+
+	nextTick(() => {
+		easterEggReady = true;
+	});
+}
+
+function gravity() {
+	if (!easterEggReady) return;
+	easterEggReady = false;
+	easterEggEngine = physics(containerEl);
+}
+
+function iLoveMisskey() {
+	os.post({
+		initialText: 'I $[jelly ❤] #Misskey',
+		instant: true,
+	});
+}
+
+onBeforeUnmount(() => {
+	if (easterEggEngine) {
+		easterEggEngine.stop();
+	}
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.aboutMisskey,
+	icon: null,
+});
+</script>
+
+<style lang="scss" scoped>
+.znqjceqz {
+	> .about {
+		position: relative;
+		text-align: center;
+		padding: 16px;
+		border-radius: var(--radius);
+
+		&.playing {
+			&, * {
+				user-select: none;
+			}
+
+			* {
+				will-change: transform;
+			}
+
+			> .emoji {
+				visibility: visible;
+			}
+		}
+
+		> .icon {
+			display: block;
+			width: 100px;
+			margin: 0 auto;
+			border-radius: 16px;
+		}
+
+		> .misskey {
+			margin: 0.75em auto 0 auto;
+			width: max-content;
+		}
+
+		> .version {
+			margin: 0 auto;
+			width: max-content;
+			opacity: 0.5;
+		}
+
+		> .emoji {
+			position: absolute;
+			top: 0;
+			left: 0;
+			visibility: hidden;
+
+			> .emoji {
+				pointer-events: none;
+				font-size: 24px;
+				width: 24px;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/about.emojis.vue b/packages/frontend/src/pages/about.emojis.vue
new file mode 100644
index 0000000000..53ce1e4b75
--- /dev/null
+++ b/packages/frontend/src/pages/about.emojis.vue
@@ -0,0 +1,134 @@
+<template>
+<div class="driuhtrh">
+	<div class="query">
+		<MkInput v-model="q" class="" :placeholder="$ts.search">
+			<template #prefix><i class="ti ti-search"></i></template>
+		</MkInput>
+
+		<!-- たくさんあると邪魔
+		<div class="tags">
+			<span class="tag _button" v-for="tag in tags" :class="{ active: selectedTags.has(tag) }" @click="toggleTag(tag)">{{ tag }}</span>
+		</div>
+		-->
+	</div>
+
+	<MkFolder v-if="searchEmojis" class="emojis">
+		<template #header>{{ $ts.searchResult }}</template>
+		<div class="zuvgdzyt">
+			<XEmoji v-for="emoji in searchEmojis" :key="emoji.name" class="emoji" :emoji="emoji"/>
+		</div>
+	</MkFolder>
+	
+	<MkFolder v-for="category in customEmojiCategories" :key="category" class="emojis">
+		<template #header>{{ category || $ts.other }}</template>
+		<div class="zuvgdzyt">
+			<XEmoji v-for="emoji in customEmojis.filter(e => e.category === category)" :key="emoji.name" class="emoji" :emoji="emoji"/>
+		</div>
+	</MkFolder>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import XEmoji from './emojis.emoji.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/form/input.vue';
+import MkSelect from '@/components/form/select.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkTab from '@/components/MkTab.vue';
+import * as os from '@/os';
+import { emojiCategories, emojiTags } from '@/instance';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		MkInput,
+		MkSelect,
+		MkFolder,
+		MkTab,
+		XEmoji,
+	},
+
+	data() {
+		return {
+			q: '',
+			customEmojiCategories: emojiCategories,
+			customEmojis: this.$instance.emojis,
+			tags: emojiTags,
+			selectedTags: new Set(),
+			searchEmojis: null,
+		};
+	},
+
+	watch: {
+		q() { this.search(); },
+		selectedTags: {
+			handler() {
+				this.search();
+			},
+			deep: true,
+		},
+	},
+
+	methods: {
+		search() {
+			if ((this.q === '' || this.q == null) && this.selectedTags.size === 0) {
+				this.searchEmojis = null;
+				return;
+			}
+
+			if (this.selectedTags.size === 0) {
+				this.searchEmojis = this.customEmojis.filter(emoji => emoji.name.includes(this.q) || emoji.aliases.includes(this.q));
+			} else {
+				this.searchEmojis = this.customEmojis.filter(emoji => (emoji.name.includes(this.q) || emoji.aliases.includes(this.q)) && [...this.selectedTags].every(t => emoji.aliases.includes(t)));
+			}
+		},
+
+		toggleTag(tag) {
+			if (this.selectedTags.has(tag)) {
+				this.selectedTags.delete(tag);
+			} else {
+				this.selectedTags.add(tag);
+			}
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.driuhtrh {
+	background: var(--bg);
+
+	> .query {
+		background: var(--bg);
+		padding: 16px;
+
+		> .tags {
+			> .tag {
+				display: inline-block;
+				margin: 8px 8px 0 0;
+				padding: 4px 8px;
+				font-size: 0.9em;
+				background: var(--accentedBg);
+				border-radius: 5px;
+
+				&.active {
+					background: var(--accent);
+					color: var(--fgOnAccent);
+				}
+			}
+		}
+	}
+
+	> .emojis {
+		--x-padding: 0 16px;
+
+		.zuvgdzyt {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+			grid-gap: 12px;
+			margin: 0 var(--margin) var(--margin) var(--margin);
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/about.federation.vue b/packages/frontend/src/pages/about.federation.vue
new file mode 100644
index 0000000000..6c92ab1264
--- /dev/null
+++ b/packages/frontend/src/pages/about.federation.vue
@@ -0,0 +1,106 @@
+<template>
+<div class="taeiyria">
+	<div class="query">
+		<MkInput v-model="host" :debounce="true" class="">
+			<template #prefix><i class="ti ti-search"></i></template>
+			<template #label>{{ i18n.ts.host }}</template>
+		</MkInput>
+		<FormSplit style="margin-top: var(--margin);">
+			<MkSelect v-model="state">
+				<template #label>{{ i18n.ts.state }}</template>
+				<option value="all">{{ i18n.ts.all }}</option>
+				<option value="federating">{{ i18n.ts.federating }}</option>
+				<option value="subscribing">{{ i18n.ts.subscribing }}</option>
+				<option value="publishing">{{ i18n.ts.publishing }}</option>
+				<option value="suspended">{{ i18n.ts.suspended }}</option>
+				<option value="blocked">{{ i18n.ts.blocked }}</option>
+				<option value="notResponding">{{ i18n.ts.notResponding }}</option>
+			</MkSelect>
+			<MkSelect v-model="sort">
+				<template #label>{{ i18n.ts.sort }}</template>
+				<option value="+pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.descendingOrder }})</option>
+				<option value="-pubSub">{{ i18n.ts.pubSub }} ({{ i18n.ts.ascendingOrder }})</option>
+				<option value="+notes">{{ i18n.ts.notes }} ({{ i18n.ts.descendingOrder }})</option>
+				<option value="-notes">{{ i18n.ts.notes }} ({{ i18n.ts.ascendingOrder }})</option>
+				<option value="+users">{{ i18n.ts.users }} ({{ i18n.ts.descendingOrder }})</option>
+				<option value="-users">{{ i18n.ts.users }} ({{ i18n.ts.ascendingOrder }})</option>
+				<option value="+following">{{ i18n.ts.following }} ({{ i18n.ts.descendingOrder }})</option>
+				<option value="-following">{{ i18n.ts.following }} ({{ i18n.ts.ascendingOrder }})</option>
+				<option value="+followers">{{ i18n.ts.followers }} ({{ i18n.ts.descendingOrder }})</option>
+				<option value="-followers">{{ i18n.ts.followers }} ({{ i18n.ts.ascendingOrder }})</option>
+				<option value="+caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.descendingOrder }})</option>
+				<option value="-caughtAt">{{ i18n.ts.registeredAt }} ({{ i18n.ts.ascendingOrder }})</option>
+				<option value="+lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.descendingOrder }})</option>
+				<option value="-lastCommunicatedAt">{{ i18n.ts.lastCommunication }} ({{ i18n.ts.ascendingOrder }})</option>
+			</MkSelect>
+		</FormSplit>
+	</div>
+
+	<MkPagination v-slot="{items}" ref="instances" :key="host + state" :pagination="pagination">
+		<div class="dqokceoi">
+			<MkA v-for="instance in items" :key="instance.id" v-tooltip.mfm="`Last communicated: ${new Date(instance.lastCommunicatedAt).toLocaleString()}\nStatus: ${getStatus(instance)}`" class="instance" :to="`/instance-info/${instance.host}`">
+				<MkInstanceCardMini :instance="instance"/>
+			</MkA>
+		</div>
+	</MkPagination>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/form/input.vue';
+import MkSelect from '@/components/form/select.vue';
+import MkPagination from '@/components/MkPagination.vue';
+import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue';
+import FormSplit from '@/components/form/split.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+let host = $ref('');
+let state = $ref('federating');
+let sort = $ref('+pubSub');
+const pagination = {
+	endpoint: 'federation/instances' as const,
+	limit: 10,
+	offsetMode: true,
+	params: computed(() => ({
+		sort: sort,
+		host: host !== '' ? host : null,
+		...(
+			state === 'federating' ? { federating: true } :
+			state === 'subscribing' ? { subscribing: true } :
+			state === 'publishing' ? { publishing: true } :
+			state === 'suspended' ? { suspended: true } :
+			state === 'blocked' ? { blocked: true } :
+			state === 'notResponding' ? { notResponding: true } :
+			{}),
+	})),
+};
+
+function getStatus(instance) {
+	if (instance.isSuspended) return 'Suspended';
+	if (instance.isBlocked) return 'Blocked';
+	if (instance.isNotResponding) return 'Error';
+	return 'Alive';
+}
+</script>
+
+<style lang="scss" scoped>
+.taeiyria {
+	> .query {
+		background: var(--bg);
+		margin-bottom: 16px;
+	}
+}
+
+.dqokceoi {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+	grid-gap: 12px;
+
+	> .instance:hover {
+		text-decoration: none;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/about.vue b/packages/frontend/src/pages/about.vue
new file mode 100644
index 0000000000..0ed692c5c5
--- /dev/null
+++ b/packages/frontend/src/pages/about.vue
@@ -0,0 +1,166 @@
+<template>
+<MkStickyContainer>
+	<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 })` }">
+				<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>
+
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ i18n.ts.description }}</template>
+				<template #value><div v-html="$instance.description"></div></template>
+			</MkKeyValue>
+
+			<FormSection>
+				<MkKeyValue class="_formBlock" :copy="version">
+					<template #key>Misskey</template>
+					<template #value>{{ version }}</template>
+				</MkKeyValue>
+				<div class="_formBlock" v-html="i18n.t('poweredByMisskeyDescription', { name: $instance.name ?? host })">
+				</div>
+				<FormLink to="/about-misskey">{{ i18n.ts.aboutMisskey }}</FormLink>
+			</FormSection>
+
+			<FormSection>
+				<FormSplit>
+					<MkKeyValue class="_formBlock">
+						<template #key>{{ i18n.ts.administrator }}</template>
+						<template #value>{{ $instance.maintainerName }}</template>
+					</MkKeyValue>
+					<MkKeyValue class="_formBlock">
+						<template #key>{{ i18n.ts.contact }}</template>
+						<template #value>{{ $instance.maintainerEmail }}</template>
+					</MkKeyValue>
+				</FormSplit>
+				<FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" class="_formBlock" external>{{ i18n.ts.tos }}</FormLink>
+			</FormSection>
+
+			<FormSuspense :p="initStats">
+				<FormSection>
+					<template #label>{{ i18n.ts.statistics }}</template>
+					<FormSplit>
+						<MkKeyValue class="_formBlock">
+							<template #key>{{ i18n.ts.users }}</template>
+							<template #value>{{ number(stats.originalUsersCount) }}</template>
+						</MkKeyValue>
+						<MkKeyValue class="_formBlock">
+							<template #key>{{ i18n.ts.notes }}</template>
+							<template #value>{{ number(stats.originalNotesCount) }}</template>
+						</MkKeyValue>
+					</FormSplit>
+				</FormSection>
+			</FormSuspense>
+
+			<FormSection>
+				<template #label>Well-known resources</template>
+				<div class="_formLinks">
+					<FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink>
+					<FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink>
+					<FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink>
+					<FormLink :to="`/robots.txt`" external>robots.txt</FormLink>
+					<FormLink :to="`/manifest.json`" external>manifest.json</FormLink>
+				</div>
+			</FormSection>
+		</div>
+	</MkSpacer>
+	<MkSpacer v-else-if="tab === 'emojis'" :content-max="1000" :margin-min="20">
+		<XEmojis/>
+	</MkSpacer>
+	<MkSpacer v-else-if="tab === 'federation'" :content-max="1000" :margin-min="20">
+		<XFederation/>
+	</MkSpacer>
+	<MkSpacer v-else-if="tab === 'charts'" :content-max="1000" :margin-min="20">
+		<MkInstanceStats :chart-limit="500" :detailed="true"/>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import XEmojis from './about.emojis.vue';
+import XFederation from './about.federation.vue';
+import { version, instanceName, host } from '@/config';
+import FormLink from '@/components/form/link.vue';
+import FormSection from '@/components/form/section.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import FormSplit from '@/components/form/split.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import MkInstanceStats from '@/components/MkInstanceStats.vue';
+import * as os from '@/os';
+import number from '@/filters/number';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const props = withDefaults(defineProps<{
+	initialTab?: string;
+}>(), {
+	initialTab: 'overview',
+});
+
+let stats = $ref(null);
+let tab = $ref(props.initialTab);
+
+const initStats = () => os.api('stats', {
+}).then((res) => {
+	stats = res;
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => [{
+	key: 'overview',
+	title: i18n.ts.overview,
+}, {
+	key: 'emojis',
+	title: i18n.ts.customEmojis,
+	icon: 'ti ti-mood-happy',
+}, {
+	key: 'federation',
+	title: i18n.ts.federation,
+	icon: 'ti ti-whirl',
+}, {
+	key: 'charts',
+	title: i18n.ts.charts,
+	icon: 'ti ti-chart-line',
+}]);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.instanceInfo,
+	icon: 'ti ti-info-circle',
+})));
+</script>
+
+<style lang="scss" scoped>
+.fwhjspax {
+	text-align: center;
+	border-radius: 10px;
+	overflow: clip;
+	background-size: cover;
+	background-position: center center;
+
+	> .content {
+		overflow: hidden;
+
+		> .icon {
+			display: block;
+			margin: 16px auto 0 auto;
+			height: 64px;
+			border-radius: 8px;
+		}
+
+		> .name {
+			display: block;
+			padding: 16px;
+			color: #fff;
+			text-shadow: 0 0 8px #000;
+			background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/admin-file.vue b/packages/frontend/src/pages/admin-file.vue
new file mode 100644
index 0000000000..a11249e75d
--- /dev/null
+++ b/packages/frontend/src/pages/admin-file.vue
@@ -0,0 +1,160 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer v-if="file" :content-max="600" :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"/>
+			</a>
+			<div class="_formBlock">
+				<MkKeyValue :copy="file.type" oneline style="margin: 1em 0;">
+					<template #key>MIME Type</template>
+					<template #value><span class="_monospace">{{ file.type }}</span></template>
+				</MkKeyValue>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>Size</template>
+					<template #value><span class="_monospace">{{ bytes(file.size) }}</span></template>
+				</MkKeyValue>
+				<MkKeyValue :copy="file.id" oneline style="margin: 1em 0;">
+					<template #key>ID</template>
+					<template #value><span class="_monospace">{{ file.id }}</span></template>
+				</MkKeyValue>
+				<MkKeyValue :copy="file.md5" oneline style="margin: 1em 0;">
+					<template #key>MD5</template>
+					<template #value><span class="_monospace">{{ file.md5 }}</span></template>
+				</MkKeyValue>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>{{ i18n.ts.createdAt }}</template>
+					<template #value><span class="_monospace"><MkTime :time="file.createdAt" mode="detail" style="display: block;"/></span></template>
+				</MkKeyValue>
+			</div>
+			<MkA v-if="file.user" class="user" :to="`/user-info/${file.user.id}`">
+				<MkUserCardMini :user="file.user"/>
+			</MkA>
+			<div class="_formBlock">
+				<MkSwitch v-model="isSensitive" @update:model-value="toggleIsSensitive">NSFW</MkSwitch>
+			</div>
+
+			<div class="_formBlock">
+				<MkButton danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
+			</div>
+		</div>
+		<div v-else-if="tab === 'ip' && info" class="_formRoot">
+			<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
+			<MkKeyValue v-if="info.requestIp" class="_formBlock _monospace" :copy="info.requestIp" oneline>
+				<template #key>IP</template>
+				<template #value>{{ info.requestIp }}</template>
+			</MkKeyValue>
+			<FormSection v-if="info.requestHeaders">
+				<template #label>Headers</template>
+				<MkKeyValue v-for="(v, k) in info.requestHeaders" :key="k" class="_formBlock _monospace">
+					<template #key>{{ k }}</template>
+					<template #value>{{ v }}</template>
+				</MkKeyValue>
+			</FormSection>
+		</div>
+		<div v-else-if="tab === 'raw'" class="_formRoot">
+			<MkObjectView v-if="info" tall :value="info">
+			</MkObjectView>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import MkSwitch from '@/components/form/switch.vue';
+import MkObjectView from '@/components/MkObjectView.vue';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import FormSection from '@/components/form/section.vue';
+import MkUserCardMini from '@/components/MkUserCardMini.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import bytes from '@/filters/bytes';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { acct } from '@/filters/user';
+import { iAmAdmin, iAmModerator } from '@/account';
+
+let tab = $ref('overview');
+let file: any = $ref(null);
+let info: any = $ref(null);
+let isSensitive: boolean = $ref(false);
+
+const props = defineProps<{
+	fileId: string,
+}>();
+
+async function fetch() {
+	file = await os.api('drive/files/show', { fileId: props.fileId });
+	info = await os.api('admin/drive/show-file', { fileId: props.fileId });
+	isSensitive = file.isSensitive;
+}
+
+fetch();
+
+async function del() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.t('removeAreYouSure', { x: file.name }),
+	});
+	if (canceled) return;
+
+	os.apiWithDialog('drive/files/delete', {
+		fileId: file.id,
+	});
+}
+
+async function toggleIsSensitive(v) {
+	await os.api('drive/files/update', { fileId: props.fileId, isSensitive: v });
+	isSensitive = v;
+}
+
+const headerActions = $computed(() => [{
+	text: i18n.ts.openInNewTab,
+	icon: 'ti ti-external-link',
+	handler: () => {
+		window.open(file.url, '_blank');
+	},
+}]);
+
+const headerTabs = $computed(() => [{
+	key: 'overview',
+	title: i18n.ts.overview,
+	icon: 'ti ti-info-circle',
+}, iAmModerator ? {
+	key: 'ip',
+	title: 'IP',
+	icon: 'ti ti-password',
+} : null, {
+	key: 'raw',
+	title: 'Raw data',
+	icon: 'ti ti-code',
+}]);
+
+definePageMetadata(computed(() => ({
+	title: file ? i18n.ts.file + ': ' + file.name : i18n.ts.file,
+	icon: 'ti ti-file',
+})));
+</script>
+
+<style lang="scss" scoped>
+.cxqhhsmd {
+	> .thumbnail {
+		display: block;
+
+		> .thumbnail {
+			height: 300px;
+			max-width: 100%;
+		}
+	}
+
+	> .user {
+		&:hover {
+			text-decoration: none;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/_header_.vue b/packages/frontend/src/pages/admin/_header_.vue
new file mode 100644
index 0000000000..bdb41b2d2c
--- /dev/null
+++ b/packages/frontend/src/pages/admin/_header_.vue
@@ -0,0 +1,292 @@
+<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" :ref="(el) => tabRefs[tab.key] = el" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
+				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
+				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
+			</button>
+			<div ref="tabHighlightEl" class="highlight"></div>
+		</div>
+	</template>
+	<div class="buttons right">
+		<template v-if="actions">
+			<template v-for="action in actions">
+				<MkButton v-if="action.asFullButton" class="fullButton" primary @click.stop="action.handler"><i :class="action.icon" style="margin-right: 6px;"></i>{{ action.text }}</MkButton>
+				<button v-else v-tooltip.noDelay="action.text" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" @touchstart="preventDrag"><i :class="action.icon"></i></button>
+			</template>
+		</template>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, ref, inject, watch, nextTick } from 'vue';
+import tinycolor from 'tinycolor2';
+import { popupMenu } from '@/os';
+import { url } from '@/config';
+import { scrollToTop } from '@/scripts/scroll';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n';
+import { globalEvents } from '@/events';
+import { injectPageMetadata } from '@/scripts/page-metadata';
+
+type Tab = {
+	key?: string | null;
+	title: string;
+	icon?: string;
+	iconOnly?: boolean;
+	onClick?: (ev: MouseEvent) => void;
+};
+
+const props = defineProps<{
+	tabs?: Tab[];
+	tab?: string;
+	actions?: {
+		text: string;
+		icon: string;
+		asFullButton?: boolean;
+		handler: (ev: MouseEvent) => void;
+	}[];
+	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(() => {
+	return props.tabs && props.tabs.length > 0;
+});
+
+const showTabsPopup = (ev: MouseEvent) => {
+	if (!hasTabs.value) return;
+	ev.preventDefault();
+	ev.stopPropagation();
+	const menu = props.tabs.map(tab => ({
+		text: tab.title,
+		icon: tab.icon,
+		active: tab.key != null && tab.key === props.tab,
+		action: (ev) => {
+			onTabClick(tab, ev);
+		},
+	}));
+	popupMenu(menu, ev.currentTarget ?? ev.target);
+};
+
+const preventDrag = (ev: TouchEvent) => {
+	ev.stopPropagation();
+};
+
+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) {
+		ev.preventDefault();
+		ev.stopPropagation();
+		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);
+	tinyBg.setAlpha(0.85);
+	bg.value = tinyBg.toRgbString();
+};
+
+onMounted(() => {
+	calcBg();
+	globalEvents.on('themeChanged', calcBg);
+
+	watch(() => [props.tab, props.tabs], () => {
+		nextTick(() => {
+			const tabEl = tabRefs[props.tab];
+			if (tabEl && tabHighlightEl) {
+				// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
+				// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
+				const parentRect = tabEl.parentElement.getBoundingClientRect();
+				const rect = tabEl.getBoundingClientRect();
+				tabHighlightEl.style.width = rect.width + 'px';
+				tabHighlightEl.style.left = (rect.left - parentRect.left) + 'px';
+			}
+		});
+	}, {
+		immediate: true,
+	});
+});
+
+onUnmounted(() => {
+	globalEvents.off('themeChanged', calcBg);
+});
+</script>
+
+<style lang="scss" scoped>
+.fdidabkc {
+	--height: 60px;
+	display: flex;
+	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;
+			width: 16px;
+			text-align: center;
+		}
+
+		> .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 {
+		position: relative;
+		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;
+			}
+
+			> .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/frontend/src/pages/admin/abuses.vue b/packages/frontend/src/pages/admin/abuses.vue
new file mode 100644
index 0000000000..973ec871ab
--- /dev/null
+++ b/packages/frontend/src/pages/admin/abuses.vue
@@ -0,0 +1,97 @@
+<template>
+<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>{{ i18n.ts.state }}</template>
+							<option value="all">{{ i18n.ts.all }}</option>
+							<option value="unresolved">{{ i18n.ts.unresolved }}</option>
+							<option value="resolved">{{ i18n.ts.resolved }}</option>
+						</MkSelect>
+						<MkSelect v-model="targetUserOrigin" style="margin: 0; flex: 1;">
+							<template #label>{{ i18n.ts.reporteeOrigin }}</template>
+							<option value="combined">{{ i18n.ts.all }}</option>
+							<option value="local">{{ i18n.ts.local }}</option>
+							<option value="remote">{{ i18n.ts.remote }}</option>
+						</MkSelect>
+						<MkSelect v-model="reporterOrigin" style="margin: 0; flex: 1;">
+							<template #label>{{ i18n.ts.reporterOrigin }}</template>
+							<option value="combined">{{ i18n.ts.all }}</option>
+							<option value="local">{{ i18n.ts.local }}</option>
+							<option value="remote">{{ i18n.ts.remote }}</option>
+						</MkSelect>
+					</div>
+					<!-- TODO
+			<div class="inputs" style="display: flex; padding-top: 1.2em;">
+				<MkInput v-model="searchUsername" style="margin: 0; flex: 1;" type="text" :spellcheck="false">
+					<span>{{ i18n.ts.username }}</span>
+				</MkInput>
+				<MkInput v-model="searchHost" style="margin: 0; flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params().origin === 'local'">
+					<span>{{ i18n.ts.host }}</span>
+				</MkInput>
+			</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>
+				</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/MkPagination.vue';
+import XAbuseReport from '@/components/MkAbuseReport.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let reports = $ref<InstanceType<typeof MkPagination>>();
+
+let state = $ref('unresolved');
+let reporterOrigin = $ref('combined');
+let targetUserOrigin = $ref('combined');
+let searchUsername = $ref('');
+let searchHost = $ref('');
+
+const pagination = {
+	endpoint: 'admin/abuse-user-reports' as const,
+	limit: 10,
+	params: computed(() => ({
+		state,
+		reporterOrigin,
+		targetUserOrigin,
+	})),
+};
+
+function resolved(reportId) {
+	reports.removeItem(item => item.id === reportId);
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.abuseReports,
+	icon: 'ti ti-exclamation-circle',
+});
+</script>
+
+<style lang="scss" scoped>
+.lcixvhis {
+	margin: var(--margin);
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/ads.vue b/packages/frontend/src/pages/admin/ads.vue
new file mode 100644
index 0000000000..2ec926c65c
--- /dev/null
+++ b/packages/frontend/src/pages/admin/ads.vue
@@ -0,0 +1,132 @@
+<template>
+<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>
+				<MkRadio v-model="ad.priority" value="middle">{{ i18n.ts.middle }}</MkRadio>
+				<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="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+					<MkButton class="button" inline danger @click="remove(ad)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
+				</div>
+			</div>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import XHeader from './_header_.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/form/input.vue';
+import MkTextarea from '@/components/form/textarea.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormSplit from '@/components/form/split.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let ads: any[] = $ref([]);
+
+os.api('admin/ad/list').then(adsResponse => {
+	ads = adsResponse;
+});
+
+function add() {
+	ads.unshift({
+		id: null,
+		memo: '',
+		place: 'square',
+		priority: 'middle',
+		ratio: 1,
+		url: '',
+		imageUrl: null,
+		expiresAt: null,
+	});
+}
+
+function remove(ad) {
+	os.confirm({
+		type: 'warning',
+		text: i18n.t('removeAreYouSure', { x: ad.url }),
+	}).then(({ canceled }) => {
+		if (canceled) return;
+		ads = ads.filter(x => x !== ad);
+		os.apiWithDialog('admin/ad/delete', {
+			id: ad.id,
+		});
+	});
+}
+
+function save(ad) {
+	if (ad.id == null) {
+		os.apiWithDialog('admin/ad/create', {
+			...ad,
+			expiresAt: new Date(ad.expiresAt).getTime(),
+		});
+	} else {
+		os.apiWithDialog('admin/ad/update', {
+			...ad,
+			expiresAt: new Date(ad.expiresAt).getTime(),
+		});
+	}
+}
+
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'ti ti-plus',
+	text: i18n.ts.add,
+	handler: add,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.ads,
+	icon: 'ti ti-ad',
+});
+</script>
+
+<style lang="scss" scoped>
+.uqshojas {
+	> .ad {
+		padding: 32px;
+
+		&:not(:last-child) {
+			margin-bottom: var(--margin);
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/announcements.vue b/packages/frontend/src/pages/admin/announcements.vue
new file mode 100644
index 0000000000..607ad8aa02
--- /dev/null
+++ b/packages/frontend/src/pages/admin/announcements.vue
@@ -0,0 +1,112 @@
+<template>
+<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="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+						<MkButton class="button" inline @click="remove(announcement)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
+					</div>
+				</div>
+			</section>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import XHeader from './_header_.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/form/input.vue';
+import MkTextarea from '@/components/form/textarea.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let announcements: any[] = $ref([]);
+
+os.api('admin/announcements/list').then(announcementResponse => {
+	announcements = announcementResponse;
+});
+
+function add() {
+	announcements.unshift({
+		id: null,
+		title: '',
+		text: '',
+		imageUrl: null,
+	});
+}
+
+function remove(announcement) {
+	os.confirm({
+		type: 'warning',
+		text: i18n.t('removeAreYouSure', { x: announcement.title }),
+	}).then(({ canceled }) => {
+		if (canceled) return;
+		announcements = announcements.filter(x => x !== announcement);
+		os.api('admin/announcements/delete', announcement);
+	});
+}
+
+function save(announcement) {
+	if (announcement.id == null) {
+		os.api('admin/announcements/create', announcement).then(() => {
+			os.alert({
+				type: 'success',
+				text: i18n.ts.saved,
+			});
+		}).catch(err => {
+			os.alert({
+				type: 'error',
+				text: err,
+			});
+		});
+	} else {
+		os.api('admin/announcements/update', announcement).then(() => {
+			os.alert({
+				type: 'success',
+				text: i18n.ts.saved,
+			});
+		}).catch(err => {
+			os.alert({
+				type: 'error',
+				text: err,
+			});
+		});
+	}
+}
+
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'ti ti-plus',
+	text: i18n.ts.add,
+	handler: add,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.announcements,
+	icon: 'ti ti-speakerphone',
+});
+</script>
+
+<style lang="scss" scoped>
+.ztgjmzrw {
+	margin: var(--margin);
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/bot-protection.vue b/packages/frontend/src/pages/admin/bot-protection.vue
new file mode 100644
index 0000000000..d03961cf95
--- /dev/null
+++ b/packages/frontend/src/pages/admin/bot-protection.vue
@@ -0,0 +1,109 @@
+<template>
+<div>
+	<FormSuspense :p="init">
+		<div class="_formRoot">
+			<FormRadios v-model="provider" class="_formBlock">
+				<option :value="null">{{ i18n.ts.none }} ({{ i18n.ts.notRecommended }})</option>
+				<option value="hcaptcha">hCaptcha</option>
+				<option value="recaptcha">reCAPTCHA</option>
+				<option value="turnstile">Turnstile</option>
+			</FormRadios>
+
+			<template v-if="provider === 'hcaptcha'">
+				<FormInput v-model="hcaptchaSiteKey" class="_formBlock">
+					<template #prefix><i class="ti ti-key"></i></template>
+					<template #label>{{ i18n.ts.hcaptchaSiteKey }}</template>
+				</FormInput>
+				<FormInput v-model="hcaptchaSecretKey" class="_formBlock">
+					<template #prefix><i class="ti ti-key"></i></template>
+					<template #label>{{ i18n.ts.hcaptchaSecretKey }}</template>
+				</FormInput>
+				<FormSlot class="_formBlock">
+					<template #label>{{ i18n.ts.preview }}</template>
+					<MkCaptcha provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
+				</FormSlot>
+			</template>
+			<template v-else-if="provider === 'recaptcha'">
+				<FormInput v-model="recaptchaSiteKey" class="_formBlock">
+					<template #prefix><i class="ti ti-key"></i></template>
+					<template #label>{{ i18n.ts.recaptchaSiteKey }}</template>
+				</FormInput>
+				<FormInput v-model="recaptchaSecretKey" class="_formBlock">
+					<template #prefix><i class="ti ti-key"></i></template>
+					<template #label>{{ i18n.ts.recaptchaSecretKey }}</template>
+				</FormInput>
+				<FormSlot v-if="recaptchaSiteKey" class="_formBlock">
+					<template #label>{{ i18n.ts.preview }}</template>
+					<MkCaptcha provider="recaptcha" :sitekey="recaptchaSiteKey"/>
+				</FormSlot>
+			</template>
+			<template v-else-if="provider === 'turnstile'">
+				<FormInput v-model="turnstileSiteKey" class="_formBlock">
+					<template #prefix><i class="ti ti-key"></i></template>
+					<template #label>{{ i18n.ts.turnstileSiteKey }}</template>
+				</FormInput>
+				<FormInput v-model="turnstileSecretKey" class="_formBlock">
+					<template #prefix><i class="ti ti-key"></i></template>
+					<template #label>{{ i18n.ts.turnstileSecretKey }}</template>
+				</FormInput>
+				<FormSlot class="_formBlock">
+					<template #label>{{ i18n.ts.preview }}</template>
+					<MkCaptcha provider="turnstile" :sitekey="turnstileSiteKey || '1x00000000000000000000AA'"/>
+				</FormSlot>
+			</template>
+
+			<FormButton primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
+		</div>
+	</FormSuspense>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/MkButton.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import FormSlot from '@/components/form/slot.vue';
+import * as os from '@/os';
+import { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
+
+const MkCaptcha = defineAsyncComponent(() => import('@/components/MkCaptcha.vue'));
+
+let provider = $ref(null);
+let hcaptchaSiteKey: string | null = $ref(null);
+let hcaptchaSecretKey: string | null = $ref(null);
+let recaptchaSiteKey: string | null = $ref(null);
+let recaptchaSecretKey: string | null = $ref(null);
+let turnstileSiteKey: string | null = $ref(null);
+let turnstileSecretKey: string | null = $ref(null);
+
+async function init() {
+	const meta = await os.api('admin/meta');
+	hcaptchaSiteKey = meta.hcaptchaSiteKey;
+	hcaptchaSecretKey = meta.hcaptchaSecretKey;
+	recaptchaSiteKey = meta.recaptchaSiteKey;
+	recaptchaSecretKey = meta.recaptchaSecretKey;
+	turnstileSiteKey = meta.turnstileSiteKey;
+	turnstileSecretKey = meta.turnstileSecretKey;
+
+	provider = meta.enableHcaptcha ? 'hcaptcha' : meta.enableRecaptcha ? 'recaptcha' : meta.enableTurnstile ? 'turnstile' : null;
+}
+
+function save() {
+	os.apiWithDialog('admin/update-meta', {
+		enableHcaptcha: provider === 'hcaptcha',
+		hcaptchaSiteKey,
+		hcaptchaSecretKey,
+		enableRecaptcha: provider === 'recaptcha',
+		recaptchaSiteKey,
+		recaptchaSecretKey,
+		enableTurnstile: provider === 'turnstile',
+		turnstileSiteKey,
+		turnstileSecretKey,
+	}).then(() => {
+		fetchInstance();
+	});
+}
+</script>
diff --git a/packages/frontend/src/pages/admin/database.vue b/packages/frontend/src/pages/admin/database.vue
new file mode 100644
index 0000000000..5a0d3d5e51
--- /dev/null
+++ b/packages/frontend/src/pages/admin/database.vue
@@ -0,0 +1,35 @@
+<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>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import * as os from '@/os';
+import bytes from '@/filters/bytes';
+import number from '@/filters/number';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const databasePromiseFactory = () => os.api('admin/get-table-stats').then(res => Object.entries(res).sort((a, b) => b[1].size - a[1].size));
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.database,
+	icon: 'ti ti-database',
+});
+</script>
diff --git a/packages/frontend/src/pages/admin/email-settings.vue b/packages/frontend/src/pages/admin/email-settings.vue
new file mode 100644
index 0000000000..6c9dee1704
--- /dev/null
+++ b/packages/frontend/src/pages/admin/email-settings.vue
@@ -0,0 +1,126 @@
+<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">
+				<FormSwitch v-model="enableEmail" class="_formBlock">
+					<template #label>{{ i18n.ts.enableEmail }} ({{ i18n.ts.recommended }})</template>
+					<template #caption>{{ i18n.ts.emailConfigInfo }}</template>
+				</FormSwitch>
+
+				<template v-if="enableEmail">
+					<FormInput v-model="email" type="email" class="_formBlock">
+						<template #label>{{ i18n.ts.emailAddress }}</template>
+					</FormInput>
+
+					<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/MkInfo.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import FormSplit from '@/components/form/split.vue';
+import FormSection from '@/components/form/section.vue';
+import * as os from '@/os';
+import { fetchInstance, instance } from '@/instance';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let enableEmail: boolean = $ref(false);
+let email: any = $ref(null);
+let smtpSecure: boolean = $ref(false);
+let smtpHost: string = $ref('');
+let smtpPort: number = $ref(0);
+let smtpUser: string = $ref('');
+let smtpPass: string = $ref('');
+
+async function init() {
+	const meta = await os.api('admin/meta');
+	enableEmail = meta.enableEmail;
+	email = meta.email;
+	smtpSecure = meta.smtpSecure;
+	smtpHost = meta.smtpHost;
+	smtpPort = meta.smtpPort;
+	smtpUser = meta.smtpUser;
+	smtpPass = meta.smtpPass;
+}
+
+async function testEmail() {
+	const { canceled, result: destination } = await os.inputText({
+		title: i18n.ts.destination,
+		type: 'email',
+		placeholder: instance.maintainerEmail,
+	});
+	if (canceled) return;
+	os.apiWithDialog('admin/send-email', {
+		to: destination,
+		subject: 'Test email',
+		text: 'Yo',
+	});
+}
+
+function save() {
+	os.apiWithDialog('admin/update-meta', {
+		enableEmail,
+		email,
+		smtpSecure,
+		smtpHost,
+		smtpPort,
+		smtpUser,
+		smtpPass,
+	}).then(() => {
+		fetchInstance();
+	});
+}
+
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	text: i18n.ts.testEmail,
+	handler: testEmail,
+}, {
+	asFullButton: true,
+	icon: 'ti ti-check',
+	text: i18n.ts.save,
+	handler: save,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.emailServer,
+	icon: 'ti ti-mail',
+});
+</script>
diff --git a/packages/frontend/src/pages/admin/emoji-edit-dialog.vue b/packages/frontend/src/pages/admin/emoji-edit-dialog.vue
new file mode 100644
index 0000000000..bd601cb1de
--- /dev/null
+++ b/packages/frontend/src/pages/admin/emoji-edit-dialog.vue
@@ -0,0 +1,106 @@
+<template>
+<XModalWindow
+	ref="dialog"
+	:width="370"
+	:with-ok-button="true"
+	@close="$refs.dialog.close()"
+	@closed="$emit('closed')"
+	@ok="ok()"
+>
+	<template #header>:{{ emoji.name }}:</template>
+
+	<div class="_monolithic_">
+		<div class="yigymqpb _section">
+			<img :src="emoji.url" class="img"/>
+			<MkInput v-model="name" class="_formBlock">
+				<template #label>{{ i18n.ts.name }}</template>
+			</MkInput>
+			<MkInput v-model="category" class="_formBlock" :datalist="categories">
+				<template #label>{{ i18n.ts.category }}</template>
+			</MkInput>
+			<MkInput v-model="aliases" class="_formBlock">
+				<template #label>{{ i18n.ts.tags }}</template>
+				<template #caption>{{ i18n.ts.setMultipleBySeparatingWithSpace }}</template>
+			</MkInput>
+			<MkButton danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
+		</div>
+	</div>
+</XModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import XModalWindow from '@/components/MkModalWindow.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/form/input.vue';
+import * as os from '@/os';
+import { unique } from '@/scripts/array';
+import { i18n } from '@/i18n';
+import { emojiCategories } from '@/instance';
+
+const props = defineProps<{
+	emoji: any,
+}>();
+
+let dialog = $ref(null);
+let name: string = $ref(props.emoji.name);
+let category: string = $ref(props.emoji.category);
+let aliases: string = $ref(props.emoji.aliases.join(' '));
+let categories: string[] = $ref(emojiCategories);
+
+const emit = defineEmits<{
+	(ev: 'done', v: { deleted?: boolean, updated?: any }): void,
+	(ev: 'closed'): void
+}>();
+
+function ok() {
+	update();
+}
+
+async function update() {
+	await os.apiWithDialog('admin/emoji/update', {
+		id: props.emoji.id,
+		name,
+		category,
+		aliases: aliases.split(' '),
+	});
+
+	emit('done', {
+		updated: {
+			id: props.emoji.id,
+			name,
+			category,
+			aliases: aliases.split(' '),
+		},
+	});
+
+	dialog.close();
+}
+
+async function del() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.t('removeAreYouSure', { x: name }),
+	});
+	if (canceled) return;
+
+	os.api('admin/emoji/delete', {
+		id: props.emoji.id,
+	}).then(() => {
+		emit('done', {
+			deleted: true,
+		});
+		dialog.close();
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.yigymqpb {
+	> .img {
+		display: block;
+		height: 64px;
+		margin: 0 auto;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/emojis.vue b/packages/frontend/src/pages/admin/emojis.vue
new file mode 100644
index 0000000000..14c8466d73
--- /dev/null
+++ b/packages/frontend/src/pages/admin/emojis.vue
@@ -0,0 +1,398 @@
+<template>
+<div>
+	<MkStickyContainer>
+		<template #header><XHeader v-model:tab="tab" :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="ti ti-search"></i></template>
+						<template #label>{{ i18n.ts.search }}</template>
+					</MkInput>
+					<MkSwitch v-model="selectMode" style="margin: 8px 0;">
+						<template #label>Select mode</template>
+					</MkSwitch>
+					<div v-if="selectMode" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+						<MkButton inline @click="selectAll">Select all</MkButton>
+						<MkButton inline @click="setCategoryBulk">Set category</MkButton>
+						<MkButton inline @click="addTagBulk">Add tag</MkButton>
+						<MkButton inline @click="removeTagBulk">Remove tag</MkButton>
+						<MkButton inline @click="setTagBulk">Set tag</MkButton>
+						<MkButton inline danger @click="delBulk">Delete</MkButton>
+					</div>
+					<MkPagination ref="emojisPaginationComponent" :pagination="pagination">
+						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
+						<template #default="{items}">
+							<div class="ldhfsamy">
+								<button v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" :class="{ selected: selectedEmojis.includes(emoji.id) }" @click="selectMode ? toggleSelect(emoji) : edit(emoji)">
+									<img :src="emoji.url" class="img" :alt="emoji.name"/>
+									<div class="body">
+										<div class="name _monospace">{{ emoji.name }}</div>
+										<div class="info">{{ emoji.category }}</div>
+									</div>
+								</button>
+							</div>
+						</template>
+					</MkPagination>
+				</div>
+
+				<div v-else-if="tab === 'remote'" class="remote">
+					<FormSplit>
+						<MkInput v-model="queryRemote" :debounce="true" type="search">
+							<template #prefix><i class="ti ti-search"></i></template>
+							<template #label>{{ i18n.ts.search }}</template>
+						</MkInput>
+						<MkInput v-model="host" :debounce="true">
+							<template #label>{{ i18n.ts.host }}</template>
+						</MkInput>
+					</FormSplit>
+					<MkPagination :pagination="remotePagination">
+						<template #empty><span>{{ i18n.ts.noCustomEmojis }}</span></template>
+						<template #default="{items}">
+							<div class="ldhfsamy">
+								<div v-for="emoji in items" :key="emoji.id" class="emoji _panel _button" @click="remoteMenu(emoji, $event)">
+									<img :src="emoji.url" class="img" :alt="emoji.name"/>
+									<div class="body">
+										<div class="name _monospace">{{ emoji.name }}</div>
+										<div class="info">{{ emoji.host }}</div>
+									</div>
+								</div>
+							</div>
+						</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/MkButton.vue';
+import MkInput from '@/components/form/input.vue';
+import MkPagination from '@/components/MkPagination.vue';
+import MkTab from '@/components/MkTab.vue';
+import MkSwitch from '@/components/form/switch.vue';
+import FormSplit from '@/components/form/split.vue';
+import { selectFile, selectFiles } from '@/scripts/select-file';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const emojisPaginationComponent = ref<InstanceType<typeof MkPagination>>();
+
+const tab = ref('local');
+const query = ref(null);
+const queryRemote = ref(null);
+const host = ref(null);
+const selectMode = ref(false);
+const selectedEmojis = ref<string[]>([]);
+
+const pagination = {
+	endpoint: 'admin/emoji/list' as const,
+	limit: 30,
+	params: computed(() => ({
+		query: (query.value && query.value !== '') ? query.value : null,
+	})),
+};
+
+const remotePagination = {
+	endpoint: 'admin/emoji/list-remote' as const,
+	limit: 30,
+	params: computed(() => ({
+		query: (queryRemote.value && queryRemote.value !== '') ? queryRemote.value : null,
+		host: (host.value && host.value !== '') ? host.value : null,
+	})),
+};
+
+const selectAll = () => {
+	if (selectedEmojis.value.length > 0) {
+		selectedEmojis.value = [];
+	} else {
+		selectedEmojis.value = emojisPaginationComponent.value.items.map(item => item.id);
+	}
+};
+
+const toggleSelect = (emoji) => {
+	if (selectedEmojis.value.includes(emoji.id)) {
+		selectedEmojis.value = selectedEmojis.value.filter(x => x !== emoji.id);
+	} else {
+		selectedEmojis.value.push(emoji.id);
+	}
+};
+
+const add = async (ev: MouseEvent) => {
+	const files = await selectFiles(ev.currentTarget ?? ev.target, null);
+
+	const promise = Promise.all(files.map(file => os.api('admin/emoji/add', {
+		fileId: file.id,
+	})));
+	promise.then(() => {
+		emojisPaginationComponent.value.reload();
+	});
+	os.promiseDialog(promise);
+};
+
+const edit = (emoji) => {
+	os.popup(defineAsyncComponent(() => import('./emoji-edit-dialog.vue')), {
+		emoji: emoji,
+	}, {
+		done: result => {
+			if (result.updated) {
+				emojisPaginationComponent.value.updateItem(result.updated.id, (oldEmoji: any) => ({
+					...oldEmoji,
+					...result.updated,
+				}));
+			} else if (result.deleted) {
+				emojisPaginationComponent.value.removeItem((item) => item.id === emoji.id);
+			}
+		},
+	}, 'closed');
+};
+
+const im = (emoji) => {
+	os.apiWithDialog('admin/emoji/copy', {
+		emojiId: emoji.id,
+	});
+};
+
+const remoteMenu = (emoji, ev: MouseEvent) => {
+	os.popupMenu([{
+		type: 'label',
+		text: ':' + emoji.name + ':',
+	}, {
+		text: i18n.ts.import,
+		icon: 'ti ti-plus',
+		action: () => { im(emoji); },
+	}], ev.currentTarget ?? ev.target);
+};
+
+const menu = (ev: MouseEvent) => {
+	os.popupMenu([{
+		icon: 'ti ti-download',
+		text: i18n.ts.export,
+		action: async () => {
+			os.api('export-custom-emojis', {
+			})
+				.then(() => {
+					os.alert({
+						type: 'info',
+						text: i18n.ts.exportRequested,
+					});
+				}).catch((err) => {
+					os.alert({
+						type: 'error',
+						text: err.message,
+					});
+				});
+		},
+	}, {
+		icon: 'ti ti-upload',
+		text: i18n.ts.import,
+		action: async () => {
+			const file = await selectFile(ev.currentTarget ?? ev.target);
+			os.api('admin/emoji/import-zip', {
+				fileId: file.id,
+			})
+				.then(() => {
+					os.alert({
+						type: 'info',
+						text: i18n.ts.importRequested,
+					});
+				}).catch((err) => {
+					os.alert({
+						type: 'error',
+						text: err.message,
+					});
+				});
+		},
+	}], ev.currentTarget ?? ev.target);
+};
+
+const setCategoryBulk = async () => {
+	const { canceled, result } = await os.inputText({
+		title: 'Category',
+	});
+	if (canceled) return;
+	await os.apiWithDialog('admin/emoji/set-category-bulk', {
+		ids: selectedEmojis.value,
+		category: result,
+	});
+	emojisPaginationComponent.value.reload();
+};
+
+const addTagBulk = async () => {
+	const { canceled, result } = await os.inputText({
+		title: 'Tag',
+	});
+	if (canceled) return;
+	await os.apiWithDialog('admin/emoji/add-aliases-bulk', {
+		ids: selectedEmojis.value,
+		aliases: result.split(' '),
+	});
+	emojisPaginationComponent.value.reload();
+};
+
+const removeTagBulk = async () => {
+	const { canceled, result } = await os.inputText({
+		title: 'Tag',
+	});
+	if (canceled) return;
+	await os.apiWithDialog('admin/emoji/remove-aliases-bulk', {
+		ids: selectedEmojis.value,
+		aliases: result.split(' '),
+	});
+	emojisPaginationComponent.value.reload();
+};
+
+const setTagBulk = async () => {
+	const { canceled, result } = await os.inputText({
+		title: 'Tag',
+	});
+	if (canceled) return;
+	await os.apiWithDialog('admin/emoji/set-aliases-bulk', {
+		ids: selectedEmojis.value,
+		aliases: result.split(' '),
+	});
+	emojisPaginationComponent.value.reload();
+};
+
+const delBulk = async () => {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.ts.deleteConfirm,
+	});
+	if (canceled) return;
+	await os.apiWithDialog('admin/emoji/delete-bulk', {
+		ids: selectedEmojis.value,
+	});
+	emojisPaginationComponent.value.reload();
+};
+
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'ti ti-plus',
+	text: i18n.ts.addEmoji,
+	handler: add,
+}, {
+	icon: 'ti ti-dots',
+	handler: menu,
+}]);
+
+const headerTabs = $computed(() => [{
+	key: 'local',
+	title: i18n.ts.local,
+}, {
+	key: 'remote',
+	title: i18n.ts.remote,
+}]);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.customEmojis,
+	icon: 'ti ti-mood-happy',
+})));
+</script>
+
+<style lang="scss" scoped>
+.ogwlenmc {
+	> .local {
+		.empty {
+			margin: var(--margin);
+		}
+		
+		.ldhfsamy {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+			grid-gap: 12px;
+			margin: var(--margin) 0;
+	
+			> .emoji {
+				display: flex;
+				align-items: center;
+				padding: 11px;
+				text-align: left;
+				border: solid 1px var(--panel);
+
+				&:hover {
+					border-color: var(--inputBorderHover);
+				}
+
+				&.selected {
+					border-color: var(--accent);
+				}
+
+				> .img {
+					width: 42px;
+					height: 42px;
+				}
+
+				> .body {
+					padding: 0 0 0 8px;
+					white-space: nowrap;
+					overflow: hidden;
+
+					> .name {
+						text-overflow: ellipsis;
+						overflow: hidden;
+					}
+
+					> .info {
+						opacity: 0.5;
+						text-overflow: ellipsis;
+						overflow: hidden;
+					}
+				}
+			}
+		}
+	}
+
+	> .remote {
+		.empty {
+			margin: var(--margin);
+		}
+
+		.ldhfsamy {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+			grid-gap: 12px;
+			margin: var(--margin) 0;
+
+			> .emoji {
+				display: flex;
+				align-items: center;
+				padding: 12px;
+				text-align: left;
+
+				&:hover {
+					color: var(--accent);
+				}
+
+				> .img {
+					width: 32px;
+					height: 32px;
+				}
+
+				> .body {
+					padding: 0 0 0 8px;
+					white-space: nowrap;
+					overflow: hidden;
+
+					> .name {
+						text-overflow: ellipsis;
+						overflow: hidden;
+					}
+
+					> .info {
+						opacity: 0.5;
+						font-size: 90%;
+						text-overflow: ellipsis;
+						overflow: hidden;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/files.vue b/packages/frontend/src/pages/admin/files.vue
new file mode 100644
index 0000000000..8ad6bd4fc0
--- /dev/null
+++ b/packages/frontend/src/pages/admin/files.vue
@@ -0,0 +1,120 @@
+<template>
+<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>{{ i18n.ts.instance }}</template>
+							<option value="combined">{{ i18n.ts.all }}</option>
+							<option value="local">{{ i18n.ts.local }}</option>
+							<option value="remote">{{ i18n.ts.remote }}</option>
+						</MkSelect>
+						<MkInput v-model="searchHost" :debounce="true" type="search" style="margin: 0; flex: 1;" :disabled="pagination.params.origin === 'local'">
+							<template #label>{{ i18n.ts.host }}</template>
+						</MkInput>
+					</div>
+					<div class="inputs" style="display: flex; gap: var(--margin); flex-wrap: wrap; padding-top: 1.2em;">
+						<MkInput v-model="userId" :debounce="true" type="search" style="margin: 0; flex: 1;">
+							<template #label>User ID</template>
+						</MkInput>
+						<MkInput v-model="type" :debounce="true" type="search" style="margin: 0; flex: 1;">
+							<template #label>MIME type</template>
+						</MkInput>
+					</div>
+					<MkFileListForAdmin :pagination="pagination" :view-mode="viewMode"/>
+				</div>
+			</div>
+		</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/MkButton.vue';
+import MkInput from '@/components/form/input.vue';
+import MkSelect from '@/components/form/select.vue';
+import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
+import bytes from '@/filters/bytes';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let origin = $ref('local');
+let 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,
+	})),
+};
+
+function clear() {
+	os.confirm({
+		type: 'warning',
+		text: i18n.ts.clearCachedFilesConfirm,
+	}).then(({ canceled }) => {
+		if (canceled) return;
+
+		os.apiWithDialog('admin/drive/clean-remote-files', {});
+	});
+}
+
+function show(file) {
+	os.pageWindow(`/admin/file/${file.id}`);
+}
+
+async function find() {
+	const { canceled, result: q } = await os.inputText({
+		title: i18n.ts.fileIdOrUrl,
+		allowEmpty: false,
+	});
+	if (canceled) return;
+
+	os.api('admin/drive/show-file', q.startsWith('http://') || q.startsWith('https://') ? { url: q.trim() } : { fileId: q.trim() }).then(file => {
+		show(file);
+	}).catch(err => {
+		if (err.code === 'NO_SUCH_FILE') {
+			os.alert({
+				type: 'error',
+				text: i18n.ts.notFound,
+			});
+		}
+	});
+}
+
+const headerActions = $computed(() => [{
+	text: i18n.ts.lookup,
+	icon: 'ti ti-search',
+	handler: find,
+}, {
+	text: i18n.ts.clearCachedFiles,
+	icon: 'ti ti-trash',
+	handler: clear,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.files,
+	icon: 'ti ti-cloud',
+})));
+</script>
+
+<style lang="scss" scoped>
+.xrmjdkdw {
+	margin: var(--margin);
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
new file mode 100644
index 0000000000..6c07a87eeb
--- /dev/null
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -0,0 +1,316 @@
+<template>
+<div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
+	<div v-if="!narrow || currentPage?.route.name == null" class="nav">	
+		<MkSpacer :content-max="700" :margin-min="16">
+			<div class="lxpfedzu">
+				<div class="banner">
+					<img :src="$instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
+				</div>
+
+				<MkInfo v-if="thereIsUnresolvedAbuseReport" warn class="info">{{ i18n.ts.thereIsUnresolvedAbuseReportWarning }} <MkA to="/admin/abuses" class="_link">{{ i18n.ts.check }}</MkA></MkInfo>
+				<MkInfo v-if="noMaintainerInformation" warn class="info">{{ i18n.ts.noMaintainerInformationWarning }} <MkA to="/admin/settings" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
+				<MkInfo v-if="noBotProtection" warn class="info">{{ i18n.ts.noBotProtectionWarning }} <MkA to="/admin/security" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
+				<MkInfo v-if="noEmailServer" warn class="info">{{ i18n.ts.noEmailServerWarning }} <MkA to="/admin/email-settings" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
+
+				<MkSuperMenu :def="menuDef" :grid="currentPage?.route.name == null"></MkSuperMenu>
+			</div>
+		</MkSpacer>
+	</div>
+	<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
+		<RouterView/>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, inject, nextTick, onMounted, onUnmounted, provide, watch } from 'vue';
+import { i18n } from '@/i18n';
+import MkSuperMenu from '@/components/MkSuperMenu.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import { scroll } from '@/scripts/scroll';
+import { instance } from '@/instance';
+import * as os from '@/os';
+import { lookupUser } from '@/scripts/lookup-user';
+import { useRouter } from '@/router';
+import { definePageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+
+const isEmpty = (x: string | null) => x == null || x === '';
+
+const router = useRouter();
+
+const indexInfo = {
+	title: i18n.ts.controlPanel,
+	icon: 'ti ti-settings',
+	hideHeader: true,
+};
+
+provide('shouldOmitHeaderTitle', false);
+
+let INFO = $ref(indexInfo);
+let childInfo = $ref(null);
+let narrow = $ref(false);
+let view = $ref(null);
+let el = $ref(null);
+let pageProps = $ref({});
+let noMaintainerInformation = isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
+let noBotProtection = !instance.disableRegistration && !instance.enableHcaptcha && !instance.enableRecaptcha && !instance.enableTurnstile;
+let noEmailServer = !instance.enableEmail;
+let thereIsUnresolvedAbuseReport = $ref(false);
+let currentPage = $computed(() => router.currentRef.value.child);
+
+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) => {
+	if (entries.length === 0) return;
+	narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
+});
+
+const menuDef = $computed(() => [{
+	title: i18n.ts.quickAction,
+	items: [{
+		type: 'button',
+		icon: 'ti ti-search',
+		text: i18n.ts.lookup,
+		action: lookup,
+	}, ...(instance.disableRegistration ? [{
+		type: 'button',
+		icon: 'ti ti-user',
+		text: i18n.ts.invite,
+		action: invite,
+	}] : [])],
+}, {
+	title: i18n.ts.administration,
+	items: [{
+		icon: 'ti ti-dashboard',
+		text: i18n.ts.dashboard,
+		to: '/admin/overview',
+		active: currentPage?.route.name === 'overview',
+	}, {
+		icon: 'ti ti-users',
+		text: i18n.ts.users,
+		to: '/admin/users',
+		active: currentPage?.route.name === 'users',
+	}, {
+		icon: 'ti ti-mood-happy',
+		text: i18n.ts.customEmojis,
+		to: '/admin/emojis',
+		active: currentPage?.route.name === 'emojis',
+	}, {
+		icon: 'ti ti-whirl',
+		text: i18n.ts.federation,
+		to: '/about#federation',
+		active: currentPage?.route.name === 'federation',
+	}, {
+		icon: 'ti ti-clock-play',
+		text: i18n.ts.jobQueue,
+		to: '/admin/queue',
+		active: currentPage?.route.name === 'queue',
+	}, {
+		icon: 'ti ti-cloud',
+		text: i18n.ts.files,
+		to: '/admin/files',
+		active: currentPage?.route.name === 'files',
+	}, {
+		icon: 'ti ti-speakerphone',
+		text: i18n.ts.announcements,
+		to: '/admin/announcements',
+		active: currentPage?.route.name === 'announcements',
+	}, {
+		icon: 'ti ti-ad',
+		text: i18n.ts.ads,
+		to: '/admin/ads',
+		active: currentPage?.route.name === 'ads',
+	}, {
+		icon: 'ti ti-exclamation-circle',
+		text: i18n.ts.abuseReports,
+		to: '/admin/abuses',
+		active: currentPage?.route.name === 'abuses',
+	}],
+}, {
+	title: i18n.ts.settings,
+	items: [{
+		icon: 'ti ti-settings',
+		text: i18n.ts.general,
+		to: '/admin/settings',
+		active: currentPage?.route.name === 'settings',
+	}, {
+		icon: 'ti ti-mail',
+		text: i18n.ts.emailServer,
+		to: '/admin/email-settings',
+		active: currentPage?.route.name === 'email-settings',
+	}, {
+		icon: 'ti ti-cloud',
+		text: i18n.ts.objectStorage,
+		to: '/admin/object-storage',
+		active: currentPage?.route.name === 'object-storage',
+	}, {
+		icon: 'ti ti-lock',
+		text: i18n.ts.security,
+		to: '/admin/security',
+		active: currentPage?.route.name === 'security',
+	}, {
+		icon: 'ti ti-planet',
+		text: i18n.ts.relays,
+		to: '/admin/relays',
+		active: currentPage?.route.name === 'relays',
+	}, {
+		icon: 'ti ti-share',
+		text: i18n.ts.integration,
+		to: '/admin/integrations',
+		active: currentPage?.route.name === 'integrations',
+	}, {
+		icon: 'ti ti-ban',
+		text: i18n.ts.instanceBlocking,
+		to: '/admin/instance-block',
+		active: currentPage?.route.name === 'instance-block',
+	}, {
+		icon: 'ti ti-ghost',
+		text: i18n.ts.proxyAccount,
+		to: '/admin/proxy-account',
+		active: currentPage?.route.name === 'proxy-account',
+	}, {
+		icon: 'ti ti-adjustments',
+		text: i18n.ts.other,
+		to: '/admin/other-settings',
+		active: currentPage?.route.name === 'other-settings',
+	}],
+}, {
+	title: i18n.ts.info,
+	items: [{
+		icon: 'ti ti-database',
+		text: i18n.ts.database,
+		to: '/admin/database',
+		active: currentPage?.route.name === 'database',
+	}],
+}]);
+
+watch(narrow, () => {
+	if (currentPage?.route.name == null && !narrow) {
+		router.push('/admin/overview');
+	}
+});
+
+onMounted(() => {
+	ro.observe(el);
+
+	narrow = el.offsetWidth < NARROW_THRESHOLD;
+	if (currentPage?.route.name == null && !narrow) {
+		router.push('/admin/overview');
+	}
+});
+
+onUnmounted(() => {
+	ro.disconnect();
+});
+
+provideMetadataReceiver((info) => {
+	if (info == null) {
+		childInfo = null;
+	} else {
+		childInfo = info;
+	}
+});
+
+const invite = () => {
+	os.api('admin/invite').then(x => {
+		os.alert({
+			type: 'info',
+			text: x.code,
+		});
+	}).catch(err => {
+		os.alert({
+			type: 'error',
+			text: err,
+		});
+	});
+};
+
+const lookup = (ev) => {
+	os.popupMenu([{
+		text: i18n.ts.user,
+		icon: 'ti ti-user',
+		action: () => {
+			lookupUser();
+		},
+	}, {
+		text: i18n.ts.note,
+		icon: 'ti ti-pencil',
+		action: () => {
+			alert('TODO');
+		},
+	}, {
+		text: i18n.ts.file,
+		icon: 'ti ti-cloud',
+		action: () => {
+			alert('TODO');
+		},
+	}, {
+		text: i18n.ts.instance,
+		icon: 'ti ti-planet',
+		action: () => {
+			alert('TODO');
+		},
+	}], ev.currentTarget ?? ev.target);
+};
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(INFO);
+
+defineExpose({
+	header: {
+		title: i18n.ts.controlPanel,
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.hiyeyicy {
+	&.wide {
+		display: flex;
+		margin: 0 auto;
+		height: 100%;
+
+		> .nav {
+			width: 32%;
+			max-width: 280px;
+			box-sizing: border-box;
+			border-right: solid 0.5px var(--divider);
+			overflow: auto;
+			height: 100%;
+		}
+
+		> .main {
+			flex: 1;
+			min-width: 0;
+		}
+	}
+
+	> .nav {
+		.lxpfedzu {
+			> .info {
+				margin: 16px 0;
+			}
+
+			> .banner {
+				margin: 16px;
+
+				> .icon {
+					display: block;
+					margin: auto;
+					height: 42px;
+					border-radius: 8px;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/instance-block.vue b/packages/frontend/src/pages/admin/instance-block.vue
new file mode 100644
index 0000000000..1bdd174de4
--- /dev/null
+++ b/packages/frontend/src/pages/admin/instance-block.vue
@@ -0,0 +1,51 @@
+<template>
+<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="ti ti-device-floppy"></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/MkButton.vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import * as os from '@/os';
+import { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let blockedHosts: string = $ref('');
+
+async function init() {
+	const meta = await os.api('admin/meta');
+	blockedHosts = meta.blockedHosts.join('\n');
+}
+
+function save() {
+	os.apiWithDialog('admin/update-meta', {
+		blockedHosts: blockedHosts.split('\n') || [],
+	}).then(() => {
+		fetchInstance();
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.instanceBlocking,
+	icon: 'ti ti-ban',
+});
+</script>
diff --git a/packages/frontend/src/pages/admin/integrations.discord.vue b/packages/frontend/src/pages/admin/integrations.discord.vue
new file mode 100644
index 0000000000..0a69c44c93
--- /dev/null
+++ b/packages/frontend/src/pages/admin/integrations.discord.vue
@@ -0,0 +1,60 @@
+<template>
+<FormSuspense :p="init">
+	<div class="_formRoot">
+		<FormSwitch v-model="enableDiscordIntegration" class="_formBlock">
+			<template #label>{{ i18n.ts.enable }}</template>
+		</FormSwitch>
+
+		<template v-if="enableDiscordIntegration">
+			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/dc/cb` }}</FormInfo>
+		
+			<FormInput v-model="discordClientId" class="_formBlock">
+				<template #prefix><i class="ti ti-key"></i></template>
+				<template #label>Client ID</template>
+			</FormInput>
+
+			<FormInput v-model="discordClientSecret" class="_formBlock">
+				<template #prefix><i class="ti ti-key"></i></template>
+				<template #label>Client Secret</template>
+			</FormInput>
+		</template>
+
+		<FormButton primary class="_formBlock" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
+	</div>
+</FormSuspense>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/MkButton.vue';
+import FormInfo from '@/components/MkInfo.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import * as os from '@/os';
+import { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
+
+let uri: string = $ref('');
+let enableDiscordIntegration: boolean = $ref(false);
+let discordClientId: string | null = $ref(null);
+let discordClientSecret: string | null = $ref(null);
+
+async function init() {
+	const meta = await os.api('admin/meta');
+	uri = meta.uri;
+	enableDiscordIntegration = meta.enableDiscordIntegration;
+	discordClientId = meta.discordClientId;
+	discordClientSecret = meta.discordClientSecret;
+}
+
+function save() {
+	os.apiWithDialog('admin/update-meta', {
+		enableDiscordIntegration,
+		discordClientId,
+		discordClientSecret,
+	}).then(() => {
+		fetchInstance();
+	});
+}
+</script>
diff --git a/packages/frontend/src/pages/admin/integrations.github.vue b/packages/frontend/src/pages/admin/integrations.github.vue
new file mode 100644
index 0000000000..66419d5891
--- /dev/null
+++ b/packages/frontend/src/pages/admin/integrations.github.vue
@@ -0,0 +1,60 @@
+<template>
+<FormSuspense :p="init">
+	<div class="_formRoot">
+		<FormSwitch v-model="enableGithubIntegration" class="_formBlock">
+			<template #label>{{ i18n.ts.enable }}</template>
+		</FormSwitch>
+
+		<template v-if="enableGithubIntegration">
+			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/gh/cb` }}</FormInfo>
+		
+			<FormInput v-model="githubClientId" class="_formBlock">
+				<template #prefix><i class="ti ti-key"></i></template>
+				<template #label>Client ID</template>
+			</FormInput>
+
+			<FormInput v-model="githubClientSecret" class="_formBlock">
+				<template #prefix><i class="ti ti-key"></i></template>
+				<template #label>Client Secret</template>
+			</FormInput>
+		</template>
+
+		<FormButton primary class="_formBlock" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
+	</div>
+</FormSuspense>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/MkButton.vue';
+import FormInfo from '@/components/MkInfo.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import * as os from '@/os';
+import { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
+
+let uri: string = $ref('');
+let enableGithubIntegration: boolean = $ref(false);
+let githubClientId: string | null = $ref(null);
+let githubClientSecret: string | null = $ref(null);
+
+async function init() {
+	const meta = await os.api('admin/meta');
+	uri = meta.uri;
+	enableGithubIntegration = meta.enableGithubIntegration;
+	githubClientId = meta.githubClientId;
+	githubClientSecret = meta.githubClientSecret;
+}
+
+function save() {
+	os.apiWithDialog('admin/update-meta', {
+		enableGithubIntegration,
+		githubClientId,
+		githubClientSecret,
+	}).then(() => {
+		fetchInstance();
+	});
+}
+</script>
diff --git a/packages/frontend/src/pages/admin/integrations.twitter.vue b/packages/frontend/src/pages/admin/integrations.twitter.vue
new file mode 100644
index 0000000000..1e8d882b9c
--- /dev/null
+++ b/packages/frontend/src/pages/admin/integrations.twitter.vue
@@ -0,0 +1,60 @@
+<template>
+<FormSuspense :p="init">
+	<div class="_formRoot">
+		<FormSwitch v-model="enableTwitterIntegration" class="_formBlock">
+			<template #label>{{ i18n.ts.enable }}</template>
+		</FormSwitch>
+
+		<template v-if="enableTwitterIntegration">
+			<FormInfo class="_formBlock">Callback URL: {{ `${uri}/api/tw/cb` }}</FormInfo>
+		
+			<FormInput v-model="twitterConsumerKey" class="_formBlock">
+				<template #prefix><i class="ti ti-key"></i></template>
+				<template #label>Consumer Key</template>
+			</FormInput>
+
+			<FormInput v-model="twitterConsumerSecret" class="_formBlock">
+				<template #prefix><i class="ti ti-key"></i></template>
+				<template #label>Consumer Secret</template>
+			</FormInput>
+		</template>
+
+		<FormButton primary class="_formBlock" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
+	</div>
+</FormSuspense>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent } from 'vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/MkButton.vue';
+import FormInfo from '@/components/MkInfo.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import * as os from '@/os';
+import { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
+
+let uri: string = $ref('');
+let enableTwitterIntegration: boolean = $ref(false);
+let twitterConsumerKey: string | null = $ref(null);
+let twitterConsumerSecret: string | null = $ref(null);
+
+async function init() {
+	const meta = await os.api('admin/meta');
+	uri = meta.uri;
+	enableTwitterIntegration = meta.enableTwitterIntegration;
+	twitterConsumerKey = meta.twitterConsumerKey;
+	twitterConsumerSecret = meta.twitterConsumerSecret;
+}
+
+function save() {
+	os.apiWithDialog('admin/update-meta', {
+		enableTwitterIntegration,
+		twitterConsumerKey,
+		twitterConsumerSecret,
+	}).then(() => {
+		fetchInstance();
+	});
+}
+</script>
diff --git a/packages/frontend/src/pages/admin/integrations.vue b/packages/frontend/src/pages/admin/integrations.vue
new file mode 100644
index 0000000000..9cc35baefd
--- /dev/null
+++ b/packages/frontend/src/pages/admin/integrations.vue
@@ -0,0 +1,57 @@
+<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="ti ti-brand-twitter"></i></template>
+			<template #label>Twitter</template>
+			<template #suffix>{{ enableTwitterIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
+			<XTwitter/>
+		</FormFolder>
+		<FormFolder class="_formBlock">
+			<template #icon><i class="ti ti-brand-github"></i></template>
+			<template #label>GitHub</template>
+			<template #suffix>{{ enableGithubIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
+			<XGithub/>
+		</FormFolder>
+		<FormFolder class="_formBlock">
+			<template #icon><i class="ti ti-brand-discord"></i></template>
+			<template #label>Discord</template>
+			<template #suffix>{{ enableDiscordIntegration ? i18n.ts.enabled : i18n.ts.disabled }}</template>
+			<XDiscord/>
+		</FormFolder>
+	</FormSuspense>
+</MkSpacer></MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import 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 { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let enableTwitterIntegration: boolean = $ref(false);
+let enableGithubIntegration: boolean = $ref(false);
+let enableDiscordIntegration: boolean = $ref(false);
+
+async function init() {
+	const meta = await os.api('admin/meta');
+	enableTwitterIntegration = meta.enableTwitterIntegration;
+	enableGithubIntegration = meta.enableGithubIntegration;
+	enableDiscordIntegration = meta.enableDiscordIntegration;
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.integration,
+	icon: 'ti ti-share',
+});
+</script>
diff --git a/packages/frontend/src/pages/admin/metrics.vue b/packages/frontend/src/pages/admin/metrics.vue
new file mode 100644
index 0000000000..db8e448639
--- /dev/null
+++ b/packages/frontend/src/pages/admin/metrics.vue
@@ -0,0 +1,472 @@
+<template>
+<div class="_debobigegoItem">
+	<div class="_debobigegoLabel"><i class="fas fa-microchip"></i> {{ $ts.cpuAndMemory }}</div>
+	<div class="_debobigegoPanel xhexznfu">
+		<div>
+			<canvas :ref="cpumem"></canvas>
+		</div>
+		<div v-if="serverInfo">
+			<div class="_table">
+				<div class="_row">
+					<div class="_cell"><div class="_label">MEM total</div>{{ bytes(serverInfo.mem.total) }}</div>
+					<div class="_cell"><div class="_label">MEM used</div>{{ bytes(memUsage) }} ({{ (memUsage / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
+					<div class="_cell"><div class="_label">MEM free</div>{{ bytes(serverInfo.mem.total - memUsage) }} ({{ ((serverInfo.mem.total - memUsage) / serverInfo.mem.total * 100).toFixed(0) }}%)</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+<div class="_debobigegoItem">
+	<div class="_debobigegoLabel"><i class="fas fa-hdd"></i> {{ $ts.disk }}</div>
+	<div class="_debobigegoPanel xhexznfu">
+		<div>
+			<canvas :ref="disk"></canvas>
+		</div>
+		<div v-if="serverInfo">
+			<div class="_table">
+				<div class="_row">
+					<div class="_cell"><div class="_label">Disk total</div>{{ bytes(serverInfo.fs.total) }}</div>
+					<div class="_cell"><div class="_label">Disk used</div>{{ bytes(serverInfo.fs.used) }} ({{ (serverInfo.fs.used / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
+					<div class="_cell"><div class="_label">Disk free</div>{{ bytes(serverInfo.fs.total - serverInfo.fs.used) }} ({{ ((serverInfo.fs.total - serverInfo.fs.used) / serverInfo.fs.total * 100).toFixed(0) }}%)</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+<div class="_debobigegoItem">
+	<div class="_debobigegoLabel"><i class="fas fa-exchange-alt"></i> {{ $ts.network }}</div>
+	<div class="_debobigegoPanel xhexznfu">
+		<div>
+			<canvas :ref="net"></canvas>
+		</div>
+		<div v-if="serverInfo">
+			<div class="_table">
+				<div class="_row">
+					<div class="_cell"><div class="_label">Interface</div>{{ serverInfo.net.interface }}</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, markRaw } from 'vue';
+import {
+  Chart,
+  ArcElement,
+  LineElement,
+  BarElement,
+  PointElement,
+  BarController,
+  LineController,
+  CategoryScale,
+  LinearScale,
+  Legend,
+  Title,
+  Tooltip,
+  SubTitle,
+} from 'chart.js';
+import MkButton from '@/components/MkButton.vue';
+import MkSelect from '@/components/form/select.vue';
+import MkInput from '@/components/form/input.vue';
+import MkContainer from '@/components/MkContainer.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkwFederation from '../../widgets/federation.vue';
+import { version, url } from '@/config';
+import bytes from '@/filters/bytes';
+import number from '@/filters/number';
+
+Chart.register(
+  ArcElement,
+  LineElement,
+  BarElement,
+  PointElement,
+  BarController,
+  LineController,
+  CategoryScale,
+  LinearScale,
+  Legend,
+  Title,
+  Tooltip,
+  SubTitle,
+);
+
+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})`;
+};
+import * as os from '@/os';
+import { stream } from '@/stream';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		MkSelect,
+		MkInput,
+		MkContainer,
+		MkFolder,
+		MkwFederation,
+	},
+
+	data() {
+		return {
+			version,
+			url,
+			stats: null,
+			serverInfo: null,
+			connection: null,
+			queueConnection: markRaw(stream.useChannel('queueStats')),
+			memUsage: 0,
+			chartCpuMem: null,
+			chartNet: null,
+			jobs: [],
+			logs: [],
+			logLevel: 'all',
+			logDomain: '',
+			modLogs: [],
+			dbInfo: null,
+			overviewHeight: '1fr',
+			queueHeight: '1fr',
+			paused: false,
+		};
+	},
+
+	computed: {
+		gridColor() {
+			// TODO: var(--panel)の色が暗いか明るいかで判定する
+			return this.$store.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+		},
+	},
+
+	mounted() {
+		this.fetchJobs();
+
+		Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+
+		os.api('admin/server-info', {}).then(res => {
+			this.serverInfo = res;
+
+			this.connection = markRaw(stream.useChannel('serverStats'));
+			this.connection.on('stats', this.onStats);
+			this.connection.on('statsLog', this.onStatsLog);
+			this.connection.send('requestLog', {
+				id: Math.random().toString().substr(2, 8),
+				length: 150,
+			});
+
+			this.$nextTick(() => {
+				this.queueConnection.send('requestLog', {
+					id: Math.random().toString().substr(2, 8),
+					length: 200,
+				});
+			});
+		});
+	},
+
+	beforeUnmount() {
+		if (this.connection) {
+			this.connection.off('stats', this.onStats);
+			this.connection.off('statsLog', this.onStatsLog);
+			this.connection.dispose();
+		}
+		this.queueConnection.dispose();
+	},
+
+	methods: {
+		cpumem(el) {
+			if (this.chartCpuMem != null) return;
+			this.chartCpuMem = markRaw(new Chart(el, {
+				type: 'line',
+				data: {
+					labels: [],
+					datasets: [{
+						label: 'CPU',
+						pointRadius: 0,
+						tension: 0,
+						borderWidth: 2,
+						borderColor: '#86b300',
+						backgroundColor: alpha('#86b300', 0.1),
+						data: [],
+					}, {
+						label: 'MEM (active)',
+						pointRadius: 0,
+						tension: 0,
+						borderWidth: 2,
+						borderColor: '#935dbf',
+						backgroundColor: alpha('#935dbf', 0.02),
+						data: [],
+					}, {
+						label: 'MEM (used)',
+						pointRadius: 0,
+						tension: 0,
+						borderWidth: 2,
+						borderColor: '#935dbf',
+						borderDash: [5, 5],
+						fill: false,
+						data: [],
+					}],
+				},
+				options: {
+					aspectRatio: 3,
+					layout: {
+						padding: {
+							left: 16,
+							right: 16,
+							top: 16,
+							bottom: 0,
+						},
+					},
+					legend: {
+						position: 'bottom',
+						labels: {
+							boxWidth: 16,
+						},
+					},
+					scales: {
+						x: {
+							gridLines: {
+								display: false,
+								color: this.gridColor,
+								zeroLineColor: this.gridColor,
+							},
+							ticks: {
+								display: false,
+							},
+						},
+						y: {
+							position: 'right',
+							gridLines: {
+								display: true,
+								color: this.gridColor,
+								zeroLineColor: this.gridColor,
+							},
+							ticks: {
+								display: false,
+								max: 100,
+							},
+						},
+					},
+					tooltips: {
+						intersect: false,
+						mode: 'index',
+					},
+				},
+			}));
+		},
+
+		net(el) {
+			if (this.chartNet != null) return;
+			this.chartNet = markRaw(new Chart(el, {
+				type: 'line',
+				data: {
+					labels: [],
+					datasets: [{
+						label: 'In',
+						pointRadius: 0,
+						tension: 0,
+						borderWidth: 2,
+						borderColor: '#94a029',
+						backgroundColor: alpha('#94a029', 0.1),
+						data: [],
+					}, {
+						label: 'Out',
+						pointRadius: 0,
+						tension: 0,
+						borderWidth: 2,
+						borderColor: '#ff9156',
+						backgroundColor: alpha('#ff9156', 0.1),
+						data: [],
+					}],
+				},
+				options: {
+					aspectRatio: 3,
+					layout: {
+						padding: {
+							left: 16,
+							right: 16,
+							top: 16,
+							bottom: 0,
+						},
+					},
+					legend: {
+						position: 'bottom',
+						labels: {
+							boxWidth: 16,
+						},
+					},
+					scales: {
+						x: {
+							gridLines: {
+								display: false,
+								color: this.gridColor,
+								zeroLineColor: this.gridColor,
+							},
+							ticks: {
+								display: false,
+							},
+						},
+						y: {
+							position: 'right',
+							gridLines: {
+								display: true,
+								color: this.gridColor,
+								zeroLineColor: this.gridColor,
+							},
+							ticks: {
+								display: false,
+							},
+						},
+					},
+					tooltips: {
+						intersect: false,
+						mode: 'index',
+					},
+				},
+			}));
+		},
+
+		disk(el) {
+			if (this.chartDisk != null) return;
+			this.chartDisk = markRaw(new Chart(el, {
+				type: 'line',
+				data: {
+					labels: [],
+					datasets: [{
+						label: 'Read',
+						pointRadius: 0,
+						tension: 0,
+						borderWidth: 2,
+						borderColor: '#94a029',
+						backgroundColor: alpha('#94a029', 0.1),
+						data: [],
+					}, {
+						label: 'Write',
+						pointRadius: 0,
+						tension: 0,
+						borderWidth: 2,
+						borderColor: '#ff9156',
+						backgroundColor: alpha('#ff9156', 0.1),
+						data: [],
+					}],
+				},
+				options: {
+					aspectRatio: 3,
+					layout: {
+						padding: {
+							left: 16,
+							right: 16,
+							top: 16,
+							bottom: 0,
+						},
+					},
+					legend: {
+						position: 'bottom',
+						labels: {
+							boxWidth: 16,
+						},
+					},
+					scales: {
+						x: {
+							gridLines: {
+								display: false,
+								color: this.gridColor,
+								zeroLineColor: this.gridColor,
+							},
+							ticks: {
+								display: false,
+							},
+						},
+						y: {
+							position: 'right',
+							gridLines: {
+								display: true,
+								color: this.gridColor,
+								zeroLineColor: this.gridColor,
+							},
+							ticks: {
+								display: false,
+							},
+						},
+					},
+					tooltips: {
+						intersect: false,
+						mode: 'index',
+					},
+				},
+			}));
+		},
+
+		fetchJobs() {
+			os.api('admin/queue/deliver-delayed', {}).then(jobs => {
+				this.jobs = jobs;
+			});
+		},
+
+		onStats(stats) {
+			if (this.paused) return;
+
+			const cpu = (stats.cpu * 100).toFixed(0);
+			const memActive = (stats.mem.active / this.serverInfo.mem.total * 100).toFixed(0);
+			const memUsed = (stats.mem.used / this.serverInfo.mem.total * 100).toFixed(0);
+			this.memUsage = stats.mem.active;
+
+			this.chartCpuMem.data.labels.push('');
+			this.chartCpuMem.data.datasets[0].data.push(cpu);
+			this.chartCpuMem.data.datasets[1].data.push(memActive);
+			this.chartCpuMem.data.datasets[2].data.push(memUsed);
+			this.chartNet.data.labels.push('');
+			this.chartNet.data.datasets[0].data.push(stats.net.rx);
+			this.chartNet.data.datasets[1].data.push(stats.net.tx);
+			this.chartDisk.data.labels.push('');
+			this.chartDisk.data.datasets[0].data.push(stats.fs.r);
+			this.chartDisk.data.datasets[1].data.push(stats.fs.w);
+			if (this.chartCpuMem.data.datasets[0].data.length > 150) {
+				this.chartCpuMem.data.labels.shift();
+				this.chartCpuMem.data.datasets[0].data.shift();
+				this.chartCpuMem.data.datasets[1].data.shift();
+				this.chartCpuMem.data.datasets[2].data.shift();
+				this.chartNet.data.labels.shift();
+				this.chartNet.data.datasets[0].data.shift();
+				this.chartNet.data.datasets[1].data.shift();
+				this.chartDisk.data.labels.shift();
+				this.chartDisk.data.datasets[0].data.shift();
+				this.chartDisk.data.datasets[1].data.shift();
+			}
+			this.chartCpuMem.update();
+			this.chartNet.update();
+			this.chartDisk.update();
+		},
+
+		onStatsLog(statsLog) {
+			for (const stats of [...statsLog].reverse()) {
+				this.onStats(stats);
+			}
+		},
+
+		bytes,
+
+		number,
+
+		pause() {
+			this.paused = true;
+		},
+
+		resume() {
+			this.paused = false;
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.xhexznfu {
+	> div:nth-child(2) {
+		padding: 16px;
+		border-top: solid 0.5px var(--divider);
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/object-storage.vue b/packages/frontend/src/pages/admin/object-storage.vue
new file mode 100644
index 0000000000..f2ab30eaa5
--- /dev/null
+++ b/packages/frontend/src/pages/admin/object-storage.vue
@@ -0,0 +1,148 @@
+<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">
+				<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="ti ti-key"></i></template>
+							<template #label>Access key</template>
+						</FormInput>
+
+						<FormInput v-model="objectStorageSecretKey" class="_formBlock">
+							<template #prefix><i class="ti ti-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 FormSuspense from '@/components/form/suspense.vue';
+import FormSplit from '@/components/form/split.vue';
+import FormSection from '@/components/form/section.vue';
+import * as os from '@/os';
+import { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let useObjectStorage: boolean = $ref(false);
+let objectStorageBaseUrl: string | null = $ref(null);
+let objectStorageBucket: string | null = $ref(null);
+let objectStoragePrefix: string | null = $ref(null);
+let objectStorageEndpoint: string | null = $ref(null);
+let objectStorageRegion: string | null = $ref(null);
+let objectStoragePort: number | null = $ref(null);
+let objectStorageAccessKey: string | null = $ref(null);
+let objectStorageSecretKey: string | null = $ref(null);
+let objectStorageUseSSL: boolean = $ref(false);
+let objectStorageUseProxy: boolean = $ref(false);
+let objectStorageSetPublicRead: boolean = $ref(false);
+let objectStorageS3ForcePathStyle: boolean = $ref(true);
+
+async function init() {
+	const meta = await os.api('admin/meta');
+	useObjectStorage = meta.useObjectStorage;
+	objectStorageBaseUrl = meta.objectStorageBaseUrl;
+	objectStorageBucket = meta.objectStorageBucket;
+	objectStoragePrefix = meta.objectStoragePrefix;
+	objectStorageEndpoint = meta.objectStorageEndpoint;
+	objectStorageRegion = meta.objectStorageRegion;
+	objectStoragePort = meta.objectStoragePort;
+	objectStorageAccessKey = meta.objectStorageAccessKey;
+	objectStorageSecretKey = meta.objectStorageSecretKey;
+	objectStorageUseSSL = meta.objectStorageUseSSL;
+	objectStorageUseProxy = meta.objectStorageUseProxy;
+	objectStorageSetPublicRead = meta.objectStorageSetPublicRead;
+	objectStorageS3ForcePathStyle = meta.objectStorageS3ForcePathStyle;
+}
+
+function save() {
+	os.apiWithDialog('admin/update-meta', {
+		useObjectStorage,
+		objectStorageBaseUrl,
+		objectStorageBucket,
+		objectStoragePrefix,
+		objectStorageEndpoint,
+		objectStorageRegion,
+		objectStoragePort,
+		objectStorageAccessKey,
+		objectStorageSecretKey,
+		objectStorageUseSSL,
+		objectStorageUseProxy,
+		objectStorageSetPublicRead,
+		objectStorageS3ForcePathStyle,
+	}).then(() => {
+		fetchInstance();
+	});
+}
+
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'ti ti-check',
+	text: i18n.ts.save,
+	handler: save,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.objectStorage,
+	icon: 'ti ti-cloud',
+});
+</script>
diff --git a/packages/frontend/src/pages/admin/other-settings.vue b/packages/frontend/src/pages/admin/other-settings.vue
new file mode 100644
index 0000000000..62dff6ce7f
--- /dev/null
+++ b/packages/frontend/src/pages/admin/other-settings.vue
@@ -0,0 +1,44 @@
+<template>
+<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 { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+async function init() {
+	await os.api('admin/meta');
+}
+
+function save() {
+	os.apiWithDialog('admin/update-meta').then(() => {
+		fetchInstance();
+	});
+}
+
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'ti ti-check',
+	text: i18n.ts.save,
+	handler: save,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.other,
+	icon: 'ti ti-adjustments',
+});
+</script>
diff --git a/packages/frontend/src/pages/admin/overview.active-users.vue b/packages/frontend/src/pages/admin/overview.active-users.vue
new file mode 100644
index 0000000000..c3ce5ac901
--- /dev/null
+++ b/packages/frontend/src/pages/admin/overview.active-users.vue
@@ -0,0 +1,217 @@
+<template>
+<div>
+	<MkLoading v-if="fetching"/>
+	<div v-show="!fetching" :class="$style.root" class="_panel">
+		<canvas ref="chartEl"></canvas>
+	</div>
+</div>
+</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 * as os from '@/os';
+import 'chartjs-adapter-date-fns';
+import { defaultStore } from '@/store';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+import gradient from 'chartjs-plugin-gradient';
+import { chartVLine } from '@/scripts/chart-vline';
+
+Chart.register(
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+	gradient,
+);
+
+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 now = new Date();
+let chartInstance: Chart = null;
+const chartLimit = 7;
+let fetching = $ref(true);
+
+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 colorRead = '#3498db';
+	const colorWrite = '#2ecc71';
+
+	const max = Math.max(...raw.read);
+
+	chartInstance = new Chart(chartEl, {
+		type: 'bar',
+		data: {
+			datasets: [{
+				parsing: false,
+				label: 'Read',
+				data: format(raw.read).slice().reverse(),
+				pointRadius: 0,
+				borderWidth: 0,
+				borderJoinStyle: 'round',
+				borderRadius: 4,
+				backgroundColor: colorRead,
+				barPercentage: 0.7,
+				categoryPercentage: 0.5,
+				fill: true,
+			}, {
+				parsing: false,
+				label: 'Write',
+				data: format(raw.write).slice().reverse(),
+				pointRadius: 0,
+				borderWidth: 0,
+				borderJoinStyle: 'round',
+				borderRadius: 4,
+				backgroundColor: colorWrite,
+				barPercentage: 0.7,
+				categoryPercentage: 0.5,
+				fill: true,
+			}],
+		},
+		options: {
+			aspectRatio: 2.5,
+			layout: {
+				padding: {
+					left: 0,
+					right: 8,
+					top: 0,
+					bottom: 0,
+				},
+			},
+			scales: {
+				x: {
+					type: 'time',
+					offset: true,
+					time: {
+						stepSize: 1,
+						unit: 'day',
+					},
+					grid: {
+						display: false,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: true,
+						maxRotation: 0,
+						autoSkipPadding: 8,
+					},
+					adapters: {
+						date: {
+							locale: enUS,
+						},
+					},
+				},
+				y: {
+					position: 'left',
+					suggestedMax: 10,
+					grid: {
+						display: true,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: true,
+						//mirror: true,
+					},
+				},
+			},
+			interaction: {
+				intersect: false,
+				mode: 'index',
+			},
+			animation: false,
+			plugins: {
+				legend: {
+					display: false,
+				},
+				tooltip: {
+					enabled: false,
+					mode: 'index',
+					animation: {
+						duration: 0,
+					},
+					external: externalTooltipHandler,
+				},
+				gradient,
+			},
+		},
+		plugins: [chartVLine(vLineColor)],
+	});
+
+	fetching = false;
+}
+
+onMounted(async () => {
+	renderChart();
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 20px;
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/overview.ap-requests.vue b/packages/frontend/src/pages/admin/overview.ap-requests.vue
new file mode 100644
index 0000000000..024ffdc245
--- /dev/null
+++ b/packages/frontend/src/pages/admin/overview.ap-requests.vue
@@ -0,0 +1,346 @@
+<template>
+<div>
+	<MkLoading v-if="fetching"/>
+	<div v-show="!fetching" :class="$style.root">
+		<div class="charts _panel">
+			<div class="chart">
+				<canvas ref="chartEl2"></canvas>
+			</div>
+			<div class="chart">
+				<canvas ref="chartEl"></canvas>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import {
+	Chart,
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+} from 'chart.js';
+import gradient from 'chartjs-plugin-gradient';
+import { enUS } from 'date-fns/locale';
+import tinycolor from 'tinycolor2';
+import MkMiniChart from '@/components/MkMiniChart.vue';
+import * as os from '@/os';
+import number from '@/filters/number';
+import MkNumberDiff from '@/components/MkNumberDiff.vue';
+import { i18n } from '@/i18n';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+import { chartVLine } from '@/scripts/chart-vline';
+import { defaultStore } from '@/store';
+
+Chart.register(
+	ArcElement,
+	LineElement,
+	BarElement,
+	PointElement,
+	BarController,
+	LineController,
+	CategoryScale,
+	LinearScale,
+	TimeScale,
+	Legend,
+	Title,
+	Tooltip,
+	SubTitle,
+	Filler,
+	gradient,
+);
+
+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 chartLimit = 50;
+const chartEl = $ref<HTMLCanvasElement>();
+const chartEl2 = $ref<HTMLCanvasElement>();
+let fetching = $ref(true);
+
+const { handler: externalTooltipHandler } = useChartTooltip();
+const { handler: externalTooltipHandler2 } = useChartTooltip();
+
+onMounted(async () => {
+	const now = new Date();
+
+	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 formatMinus = (arr) => {
+		return arr.map((v, i) => ({
+			x: getDate(i).getTime(),
+			y: -v,
+		}));
+	};
+
+	const raw = await os.api('charts/ap-request', { 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)';
+	const succColor = '#87e000';
+	const failColor = '#ff4400';
+
+	const succMax = Math.max(...raw.deliverSucceeded);
+	const failMax = Math.max(...raw.deliverFailed);
+
+	// フォントカラー
+	Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+
+	new Chart(chartEl, {
+		type: 'line',
+		data: {
+			datasets: [{
+				stack: 'a',
+				parsing: false,
+				label: 'Out: Succ',
+				data: format(raw.deliverSucceeded).slice().reverse(),
+				tension: 0.3,
+				pointRadius: 0,
+				borderWidth: 2,
+				borderColor: succColor,
+				borderJoinStyle: 'round',
+				borderRadius: 4,
+				backgroundColor: alpha(succColor, 0.35),
+				fill: true,
+				clip: 8,
+			}, {
+				stack: 'a',
+				parsing: false,
+				label: 'Out: Fail',
+				data: formatMinus(raw.deliverFailed).slice().reverse(),
+				tension: 0.3,
+				pointRadius: 0,
+				borderWidth: 2,
+				borderColor: failColor,
+				borderJoinStyle: 'round',
+				borderRadius: 4,
+				backgroundColor: alpha(failColor, 0.35),
+				fill: true,
+				clip: 8,
+			}],
+		},
+		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: 'day',
+					},
+					grid: {
+						display: true,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: true,
+						maxRotation: 0,
+						autoSkipPadding: 16,
+					},
+					adapters: {
+						date: {
+							locale: enUS,
+						},
+					},
+					min: getDate(chartLimit).getTime(),
+				},
+				y: {
+					stacked: true,
+					position: 'left',
+					suggestedMax: 10,
+					grid: {
+						display: true,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: true,
+						//mirror: true,
+						callback: (value, index, values) => value < 0 ? -value : value,
+					},
+				},
+			},
+			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: [chartVLine(vLineColor)],
+	});
+
+	new Chart(chartEl2, {
+		type: 'bar',
+		data: {
+			datasets: [{
+				parsing: false,
+				label: 'In',
+				data: format(raw.inboxReceived).slice().reverse(),
+				tension: 0.3,
+				pointRadius: 0,
+				borderWidth: 0,
+				borderJoinStyle: 'round',
+				borderRadius: 4,
+				backgroundColor: '#0cc2d6',
+				barPercentage: 0.8,
+				categoryPercentage: 0.9,
+				fill: true,
+				clip: 8,
+			}],
+		},
+		options: {
+			aspectRatio: 5,
+			layout: {
+				padding: {
+					left: 0,
+					right: 8,
+					top: 0,
+					bottom: 0,
+				},
+			},
+			scales: {
+				x: {
+					type: 'time',
+					offset: false,
+					time: {
+						stepSize: 1,
+						unit: 'day',
+					},
+					grid: {
+						display: false,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+					ticks: {
+						display: false,
+						maxRotation: 0,
+						autoSkipPadding: 16,
+					},
+					adapters: {
+						date: {
+							locale: enUS,
+						},
+					},
+					min: getDate(chartLimit).getTime(),
+				},
+				y: {
+					position: 'left',
+					suggestedMax: 10,
+					grid: {
+						display: true,
+						color: gridColor,
+						borderColor: 'rgb(0, 0, 0, 0)',
+					},
+				},
+			},
+			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: externalTooltipHandler2,
+				},
+				gradient,
+			},
+		},
+		plugins: [chartVLine(vLineColor)],
+	});
+	
+	fetching = false;
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	&:global {
+		> .charts {
+			> .chart {
+				padding: 16px;
+
+				&:first-child {
+					border-bottom: solid 0.5px var(--divider);
+				}
+			}
+		}
+	}
+}
+</style>
+
diff --git a/packages/frontend/src/pages/admin/overview.federation.vue b/packages/frontend/src/pages/admin/overview.federation.vue
new file mode 100644
index 0000000000..71f5a054b4
--- /dev/null
+++ b/packages/frontend/src/pages/admin/overview.federation.vue
@@ -0,0 +1,185 @@
+<template>
+<div>
+	<MkLoading v-if="fetching"/>
+	<div v-show="!fetching" :class="$style.root">
+		<div v-if="topSubInstancesForPie && topPubInstancesForPie" class="pies">
+			<div class="pie deliver _panel">
+				<div class="title">Sub</div>
+				<XPie :data="topSubInstancesForPie" class="chart"/>
+				<div class="subTitle">Top 10</div>
+			</div>
+			<div class="pie inbox _panel">
+				<div class="title">Pub</div>
+				<XPie :data="topPubInstancesForPie" class="chart"/>
+				<div class="subTitle">Top 10</div>
+			</div>
+		</div>
+		<div v-if="!fetching" class="items">
+			<div class="item _panel sub">
+				<div class="icon"><i class="ti ti-world-download"></i></div>
+				<div class="body">
+					<div class="value">
+						{{ number(federationSubActive) }}
+						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="federationSubActiveDiff"></MkNumberDiff>
+					</div>
+					<div class="label">Sub</div>
+				</div>
+			</div>
+			<div class="item _panel pub">
+				<div class="icon"><i class="ti ti-world-upload"></i></div>
+				<div class="body">
+					<div class="value">
+						{{ number(federationPubActive) }}
+						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="federationPubActiveDiff"></MkNumberDiff>
+					</div>
+					<div class="label">Pub</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import XPie from './overview.pie.vue';
+import MkMiniChart from '@/components/MkMiniChart.vue';
+import * as os from '@/os';
+import number from '@/filters/number';
+import MkNumberDiff from '@/components/MkNumberDiff.vue';
+import { i18n } from '@/i18n';
+import { useChartTooltip } from '@/scripts/use-chart-tooltip';
+
+let topSubInstancesForPie: any = $ref(null);
+let topPubInstancesForPie: 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 fetching = $ref(true);
+
+const { handler: externalTooltipHandler } = useChartTooltip();
+	
+onMounted(async () => {
+	const chart = await os.apiGet('charts/federation', { limit: 2, span: 'day' });
+	federationPubActive = chart.pubActive[0];
+	federationPubActiveDiff = chart.pubActive[0] - chart.pubActive[1];
+	federationSubActive = chart.subActive[0];
+	federationSubActiveDiff = chart.subActive[0] - chart.subActive[1];
+
+	os.apiGet('federation/stats', { limit: 10 }).then(res => {
+		topSubInstancesForPie = res.topSubInstances.map(x => ({
+			name: x.host,
+			color: x.themeColor,
+			value: x.followersCount,
+			onClick: () => {
+				os.pageWindow(`/instance-info/${x.host}`);
+			},
+		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowersCount }]);
+		topPubInstancesForPie = res.topPubInstances.map(x => ({
+			name: x.host,
+			color: x.themeColor,
+			value: x.followingCount,
+			onClick: () => {
+				os.pageWindow(`/instance-info/${x.host}`);
+			},
+		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowingCount }]);
+	});
+
+	fetching = false;
+});
+</script>
+
+<style lang="scss" module>
+.root {
+
+	&:global {
+		> .pies {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+			grid-gap: 12px;
+			margin-bottom: 12px;
+
+			> .pie {
+				position: relative;
+				padding: 12px;
+
+				> .title {
+					position: absolute;
+					top: 20px;
+					left: 20px;
+					font-size: 90%;
+				}
+
+				> .chart {
+					max-height: 150px;
+				}
+
+				> .subTitle {
+					position: absolute;
+					bottom: 20px;
+					right: 20px;
+					font-size: 85%;
+				}
+			}
+		}
+
+		> .items {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+			grid-gap: 12px;
+
+			> .item {
+				display: flex;
+				box-sizing: border-box;
+				padding: 12px;
+
+				> .icon {
+					display: grid;
+					place-items: center;
+					height: 100%;
+					aspect-ratio: 1;
+					margin-right: 12px;
+					background: var(--accentedBg);
+					color: var(--accent);
+					border-radius: 10px;
+				}
+
+				&.sub {
+					> .icon {
+						background: #d5ba0026;
+						color: #dfc300;
+					}
+				}
+
+				&.pub {
+					> .icon {
+						background: #00cf2326;
+						color: #00cd5b;
+					}
+				}
+
+				> .body {
+					padding: 2px 0;
+
+					> .value {
+						font-size: 1.25em;
+						font-weight: bold;
+
+						> .diff {
+							font-size: 0.65em;
+							font-weight: normal;
+						}
+					}
+
+					> .label {
+						font-size: 0.8em;
+						opacity: 0.5;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
+
diff --git a/packages/frontend/src/pages/admin/overview.heatmap.vue b/packages/frontend/src/pages/admin/overview.heatmap.vue
new file mode 100644
index 0000000000..16d1c83b9f
--- /dev/null
+++ b/packages/frontend/src/pages/admin/overview.heatmap.vue
@@ -0,0 +1,15 @@
+<template>
+<div class="_panel" :class="$style.root">
+	<MkActiveUsersHeatmap/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import MkActiveUsersHeatmap from '@/components/MkActiveUsersHeatmap.vue';
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 20px;
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/overview.instances.vue b/packages/frontend/src/pages/admin/overview.instances.vue
new file mode 100644
index 0000000000..29848bf03b
--- /dev/null
+++ b/packages/frontend/src/pages/admin/overview.instances.vue
@@ -0,0 +1,50 @@
+<template>
+<div class="wbrkwale">
+	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+		<MkLoading v-if="fetching"/>
+		<div v-else class="instances">
+			<MkA v-for="(instance, i) in instances" :key="instance.id" v-tooltip.mfm.noDelay="`${instance.name}\n${instance.host}\n${instance.softwareName} ${instance.softwareVersion}`" :to="`/instance-info/${instance.host}`" class="instance">
+				<MkInstanceCardMini :instance="instance"/>
+			</MkA>
+		</div>
+	</transition>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import MkInstanceCardMini from '@/components/MkInstanceCardMini.vue';
+
+const instances = ref([]);
+const fetching = ref(true);
+
+const fetch = async () => {
+	const fetchedInstances = await os.api('federation/instances', {
+		sort: '+lastCommunicatedAt',
+		limit: 6,
+	});
+	instances.value = fetchedInstances;
+	fetching.value = false;
+};
+
+useInterval(fetch, 1000 * 60, {
+	immediate: true,
+	afterMounted: true,
+});
+</script>
+
+<style lang="scss" scoped>
+.wbrkwale {
+	> .instances {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+		grid-gap: 12px;
+
+		> .instance:hover {
+			text-decoration: none;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/overview.moderators.vue b/packages/frontend/src/pages/admin/overview.moderators.vue
new file mode 100644
index 0000000000..a1f63c8711
--- /dev/null
+++ b/packages/frontend/src/pages/admin/overview.moderators.vue
@@ -0,0 +1,55 @@
+<template>
+<div>
+	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+		<MkLoading v-if="fetching"/>
+		<div v-else :class="$style.root" class="_panel">
+			<MkA v-for="user in moderators" :key="user.id" class="user" :to="`/user-info/${user.id}`">
+				<MkAvatar :user="user" class="avatar" :show-indicator="true" :disable-link="true"/>
+			</MkA>
+		</div>
+	</transition>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import * as os from '@/os';
+import number from '@/filters/number';
+import { i18n } from '@/i18n';
+
+let moderators: any = $ref(null);
+let fetching = $ref(true);
+
+onMounted(async () => {
+	moderators = await os.api('admin/show-users', {
+		sort: '+lastActiveDate',
+		state: 'adminOrModerator',
+		limit: 30,
+	});
+
+	fetching = false;
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(30px, 40px));
+	grid-gap: 12px;
+	place-content: center;
+	padding: 12px;
+
+	&:global {
+		> .user {
+			width: 100%;
+			height: 100%;
+			aspect-ratio: 1;
+
+			> .avatar {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/overview.pie.vue b/packages/frontend/src/pages/admin/overview.pie.vue
new file mode 100644
index 0000000000..94509cf006
--- /dev/null
+++ b/packages/frontend/src/pages/admin/overview.pie.vue
@@ -0,0 +1,110 @@
+<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; onClick?: () => void }[];
+}>();
+
+const chartEl = ref<HTMLCanvasElement>(null);
+
+// フォントカラー
+Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+
+const { handler: externalTooltipHandler } = useChartTooltip({
+	position: 'middle',
+});
+
+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),
+				borderColor: getComputedStyle(document.documentElement).getPropertyValue('--panel'),
+				borderWidth: 2,
+				hoverOffset: 0,
+				data: props.data.map(x => x.value),
+			}],
+		},
+		options: {
+			layout: {
+				padding: {
+					left: 16,
+					right: 16,
+					top: 16,
+					bottom: 16,
+				},
+			},
+			onClick: (ev) => {
+				const hit = chartInstance.getElementsAtEventForMode(ev, 'nearest', { intersect: true }, false)[0];
+				if (hit && props.data[hit.index].onClick) {
+					props.data[hit.index].onClick();
+				}
+			},
+			plugins: {
+				legend: {
+					display: false,
+				},
+				tooltip: {
+					enabled: false,
+					mode: 'index',
+					animation: {
+						duration: 0,
+					},
+					external: externalTooltipHandler,
+				},
+			},
+		},
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/frontend/src/pages/admin/overview.queue.chart.vue b/packages/frontend/src/pages/admin/overview.queue.chart.vue
new file mode 100644
index 0000000000..1e095bddaa
--- /dev/null
+++ b/packages/frontend/src/pages/admin/overview.queue.chart.vue
@@ -0,0 +1,186 @@
+<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';
+import { chartVLine } from '@/scripts/chart-vline';
+
+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 > 100) {
+			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 > 100) {
+		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(() => {
+	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
+
+	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.2),
+				fill: true,
+				data: [],
+			}],
+		},
+		options: {
+			aspectRatio: 2.5,
+			layout: {
+				padding: {
+					left: 0,
+					right: 0,
+					top: 0,
+					bottom: 0,
+				},
+			},
+			scales: {
+				x: {
+					grid: {
+						display: false,
+						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,
+				},
+			},
+		},
+		plugins: [chartVLine(vLineColor)],
+	});
+});
+
+defineExpose({
+	setData,
+	pushData,
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/frontend/src/pages/admin/overview.queue.vue b/packages/frontend/src/pages/admin/overview.queue.vue
new file mode 100644
index 0000000000..72ebddc72f
--- /dev/null
+++ b/packages/frontend/src/pages/admin/overview.queue.vue
@@ -0,0 +1,127 @@
+<template>
+<div :class="$style.root">
+	<div class="_table status">
+		<div class="_row">
+			<div class="_cell" style="text-align: center;"><div class="_label">Process</div>{{ number(activeSincePrevTick) }}</div>
+			<div class="_cell" style="text-align: center;"><div class="_label">Active</div>{{ number(active) }}</div>
+			<div class="_cell" style="text-align: center;"><div class="_label">Waiting</div>{{ number(waiting) }}</div>
+			<div class="_cell" style="text-align: center;"><div class="_label">Delayed</div>{{ number(delayed) }}</div>
+		</div>
+	</div>
+	<div class="charts">
+		<div class="chart">
+			<div class="title">Process</div>
+			<XChart ref="chartProcess" type="process"/>
+		</div>
+		<div class="chart">
+			<div class="title">Active</div>
+			<XChart ref="chartActive" type="active"/>
+		</div>
+		<div class="chart">
+			<div class="title">Delayed</div>
+			<XChart ref="chartDelayed" type="delayed"/>
+		</div>
+		<div class="chart">
+			<div class="title">Waiting</div>
+			<XChart ref="chartWaiting" type="waiting"/>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { markRaw, onMounted, onUnmounted, ref } from 'vue';
+import XChart from './overview.queue.chart.vue';
+import number from '@/filters/number';
+import * as os from '@/os';
+import { stream } from '@/stream';
+import { i18n } from '@/i18n';
+
+const connection = markRaw(stream.useChannel('queueStats'));
+
+const activeSincePrevTick = ref(0);
+const active = ref(0);
+const delayed = ref(0);
+const waiting = ref(0);
+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;
+}>();
+
+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(() => {
+	connection.on('stats', onStats);
+	connection.on('statsLog', onStatsLog);
+	connection.send('requestLog', {
+		id: Math.random().toString().substr(2, 8),
+		length: 100,
+	});
+});
+
+onUnmounted(() => {
+	connection.off('stats', onStats);
+	connection.off('statsLog', onStatsLog);
+	connection.dispose();
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	&:global {
+		> .status {
+			padding: 0 0 16px 0;
+		}
+
+		> .charts {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+			gap: 12px;
+
+			> .chart {
+				min-width: 0;
+				padding: 16px;
+				background: var(--panel);
+				border-radius: var(--radius);
+
+				> .title {
+					font-size: 0.85em;
+				}
+			}
+		}
+	}
+}
+</style>	
diff --git a/packages/frontend/src/pages/admin/overview.retention.vue b/packages/frontend/src/pages/admin/overview.retention.vue
new file mode 100644
index 0000000000..feac6f8118
--- /dev/null
+++ b/packages/frontend/src/pages/admin/overview.retention.vue
@@ -0,0 +1,49 @@
+<template>
+<div>
+	<MkLoading v-if="fetching"/>
+	<div v-else :class="$style.root">
+		<div v-for="row in retention" class="row">
+			<div v-for="value in getValues(row)" v-tooltip="value.percentage" class="cell">
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import * as os from '@/os';
+import number from '@/filters/number';
+import { i18n } from '@/i18n';
+
+let retention: any = $ref(null);
+let fetching = $ref(true);
+
+function getValues(row) {
+	const data = [];
+	for (const key in row.data) {
+		data.push({
+			date: new Date(key),
+			value: number(row.data[key]),
+			percentage: `${Math.ceil(row.data[key] / row.users) * 100}%`,
+		});
+	}
+	data.sort((a, b) => a.date > b.date);
+	return data;
+}
+
+onMounted(async () => {
+	retention = await os.apiGet('retention', {});
+
+	fetching = false;
+});
+</script>
+
+<style lang="scss" module>
+.root {
+
+	&:global {
+
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/overview.stats.vue b/packages/frontend/src/pages/admin/overview.stats.vue
new file mode 100644
index 0000000000..4dcf7e751a
--- /dev/null
+++ b/packages/frontend/src/pages/admin/overview.stats.vue
@@ -0,0 +1,155 @@
+<template>
+<div>
+	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+		<MkLoading v-if="fetching"/>
+		<div v-else :class="$style.root">
+			<div class="item _panel users">
+				<div class="icon"><i class="ti ti-users"></i></div>
+				<div class="body">
+					<div class="value">
+						{{ number(stats.originalUsersCount) }}
+						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"></MkNumberDiff>
+					</div>
+					<div class="label">Users</div>
+				</div>
+			</div>
+			<div class="item _panel notes">
+				<div class="icon"><i class="ti ti-pencil"></i></div>
+				<div class="body">
+					<div class="value">
+						{{ number(stats.originalNotesCount) }}
+						<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff>
+					</div>
+					<div class="label">Notes</div>
+				</div>
+			</div>
+			<div class="item _panel instances">
+				<div class="icon"><i class="ti ti-planet"></i></div>
+				<div class="body">
+					<div class="value">
+						{{ number(stats.instances) }}
+					</div>
+					<div class="label">Instances</div>
+				</div>
+			</div>
+			<div class="item _panel online">
+				<div class="icon"><i class="ti ti-access-point"></i></div>
+				<div class="body">
+					<div class="value">
+						{{ number(onlineUsersCount) }}
+					</div>
+					<div class="label">Online</div>
+				</div>
+			</div>
+		</div>
+	</transition>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import MkMiniChart from '@/components/MkMiniChart.vue';
+import * as os from '@/os';
+import number from '@/filters/number';
+import MkNumberDiff from '@/components/MkNumberDiff.vue';
+import { i18n } from '@/i18n';
+
+let stats: any = $ref(null);
+let usersComparedToThePrevDay = $ref<number>();
+let notesComparedToThePrevDay = $ref<number>();
+let onlineUsersCount = $ref(0);
+let fetching = $ref(true);
+
+onMounted(async () => {
+	const [_stats, _onlineUsersCount] = await Promise.all([
+		os.api('stats', {}),
+		os.api('get-online-users-count').then(res => res.count),
+	]);
+	stats = _stats;
+	onlineUsersCount = _onlineUsersCount;
+
+	os.apiGet('charts/users', { limit: 2, span: 'day' }).then(chart => {
+		usersComparedToThePrevDay = stats.originalUsersCount - chart.local.total[1];
+	});
+
+	os.apiGet('charts/notes', { limit: 2, span: 'day' }).then(chart => {
+		notesComparedToThePrevDay = stats.originalNotesCount - chart.local.total[1];
+	});
+
+	fetching = false;
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+	grid-gap: 12px;
+
+	&:global {
+		> .item {
+			display: flex;
+			box-sizing: border-box;
+			padding: 12px;
+
+			> .icon {
+				display: grid;
+				place-items: center;
+				height: 100%;
+				aspect-ratio: 1;
+				margin-right: 12px;
+				background: var(--accentedBg);
+				color: var(--accent);
+				border-radius: 10px;
+			}
+
+			&.users {
+				> .icon {
+					background: #0088d726;
+					color: #3d96c1;
+				}
+			}
+
+			&.notes {
+				> .icon {
+					background: #86b30026;
+					color: #86b300;
+				}
+			}
+
+			&.instances {
+				> .icon {
+					background: #e96b0026;
+					color: #d76d00;
+				}
+			}
+
+			&.online {
+				> .icon {
+					background: #8a00d126;
+					color: #c01ac3;
+				}
+			}
+
+			> .body {
+				padding: 2px 0;
+
+				> .value {
+					font-size: 1.25em;
+					font-weight: bold;
+
+					> .diff {
+						font-size: 0.65em;
+						font-weight: normal;
+					}
+				}
+
+				> .label {
+					font-size: 0.8em;
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/overview.users.vue b/packages/frontend/src/pages/admin/overview.users.vue
new file mode 100644
index 0000000000..5d4be11742
--- /dev/null
+++ b/packages/frontend/src/pages/admin/overview.users.vue
@@ -0,0 +1,57 @@
+<template>
+<div :class="$style.root">
+	<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+		<MkLoading v-if="fetching"/>
+		<div v-else class="users">
+			<MkA v-for="(user, i) in newUsers" :key="user.id" :to="`/user-info/${user.id}`" class="user">
+				<MkUserCardMini :user="user"/>
+			</MkA>
+		</div>
+	</transition>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import MkUserCardMini from '@/components/MkUserCardMini.vue';
+
+let newUsers = $ref(null);
+let fetching = $ref(true);
+
+const fetch = async () => {
+	const _newUsers = await os.api('admin/show-users', {
+		limit: 5,
+		sort: '+createdAt',
+		origin: 'local',
+	});
+	newUsers = _newUsers;
+	fetching = false;
+};
+
+useInterval(fetch, 1000 * 60, {
+	immediate: true,
+	afterMounted: true,
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	&:global {
+		> .users {
+			.chart-move {
+				transition: transform 1s ease;
+			}
+
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+			grid-gap: 12px;
+
+			> .user:hover {
+				text-decoration: none;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/overview.vue b/packages/frontend/src/pages/admin/overview.vue
new file mode 100644
index 0000000000..d656e55200
--- /dev/null
+++ b/packages/frontend/src/pages/admin/overview.vue
@@ -0,0 +1,190 @@
+<template>
+<MkSpacer :content-max="1000">
+	<div ref="rootEl" class="edbbcaef">
+		<MkFolder class="item">
+			<template #header>Stats</template>
+			<XStats/>
+		</MkFolder>
+
+		<MkFolder class="item">
+			<template #header>Active users</template>
+			<XActiveUsers/>
+		</MkFolder>
+
+		<MkFolder class="item">
+			<template #header>Heatmap</template>
+			<XHeatmap/>
+		</MkFolder>
+
+		<MkFolder class="item">
+			<template #header>Retention rate</template>
+			<XRetention/>
+		</MkFolder>
+
+		<MkFolder class="item">
+			<template #header>Moderators</template>
+			<XModerators/>
+		</MkFolder>
+
+		<MkFolder class="item">
+			<template #header>Federation</template>
+			<XFederation/>
+		</MkFolder>
+		
+		<MkFolder class="item">
+			<template #header>Instances</template>
+			<XInstances/>
+		</MkFolder>
+
+		<MkFolder class="item">
+			<template #header>Ap requests</template>
+			<XApRequests/>
+		</MkFolder>
+
+		<MkFolder class="item">
+			<template #header>New users</template>
+			<XUsers/>
+		</MkFolder>
+
+		<MkFolder class="item">
+			<template #header>Deliver queue</template>
+			<XQueue domain="deliver"/>
+		</MkFolder>
+
+		<MkFolder class="item">
+			<template #header>Inbox queue</template>
+			<XQueue domain="inbox"/>
+		</MkFolder>
+	</div>
+</MkSpacer>
+</template>
+
+<script lang="ts" setup>
+import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import XFederation from './overview.federation.vue';
+import XInstances from './overview.instances.vue';
+import XQueue from './overview.queue.vue';
+import XApRequests from './overview.ap-requests.vue';
+import XUsers from './overview.users.vue';
+import XActiveUsers from './overview.active-users.vue';
+import XStats from './overview.stats.vue';
+import XRetention from './overview.retention.vue';
+import XModerators from './overview.moderators.vue';
+import XHeatmap from './overview.heatmap.vue';
+import MkTagCloud from '@/components/MkTagCloud.vue';
+import { version, url } from '@/config';
+import * as os from '@/os';
+import { stream } from '@/stream';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import 'chartjs-adapter-date-fns';
+import { defaultStore } from '@/store';
+import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
+import MkFolder from '@/components/MkFolder.vue';
+
+const rootEl = $ref<HTMLElement>();
+let serverInfo: any = $ref(null);
+let topSubInstancesForPie: any = $ref(null);
+let topPubInstancesForPie: 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);
+let activeInstances = $shallowRef(null);
+const queueStatsConnection = markRaw(stream.useChannel('queueStats'));
+const now = new Date();
+const filesPagination = {
+	endpoint: 'admin/drive/files' as const,
+	limit: 9,
+	noPaging: true,
+};
+
+function onInstanceClick(i) {
+	os.pageWindow(`/instance-info/${i.host}`);
+}
+
+onMounted(async () => {
+	/*
+	const magicGrid = new MagicGrid({
+		container: rootEl,
+		static: true,
+		animate: true,
+	});
+
+	magicGrid.listen();
+	*/
+
+	os.apiGet('charts/federation', { limit: 2, span: 'day' }).then(chart => {
+		federationPubActive = chart.pubActive[0];
+		federationPubActiveDiff = chart.pubActive[0] - chart.pubActive[1];
+		federationSubActive = chart.subActive[0];
+		federationSubActiveDiff = chart.subActive[0] - chart.subActive[1];
+	});
+
+	os.apiGet('federation/stats', { limit: 10 }).then(res => {
+		topSubInstancesForPie = res.topSubInstances.map(x => ({
+			name: x.host,
+			color: x.themeColor,
+			value: x.followersCount,
+			onClick: () => {
+				os.pageWindow(`/instance-info/${x.host}`);
+			},
+		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowersCount }]);
+		topPubInstancesForPie = res.topPubInstances.map(x => ({
+			name: x.host,
+			color: x.themeColor,
+			value: x.followingCount,
+			onClick: () => {
+				os.pageWindow(`/instance-info/${x.host}`);
+			},
+		})).concat([{ name: '(other)', color: '#80808080', value: res.otherFollowingCount }]);
+	});
+
+	os.api('admin/server-info').then(serverInfoResponse => {
+		serverInfo = serverInfoResponse;
+	});
+
+	os.api('admin/show-users', {
+		limit: 5,
+		sort: '+createdAt',
+	}).then(res => {
+		newUsers = res;
+	});
+
+	os.api('federation/instances', {
+		sort: '+lastCommunicatedAt',
+		limit: 25,
+	}).then(res => {
+		activeInstances = res;
+	});
+
+	nextTick(() => {
+		queueStatsConnection.send('requestLog', {
+			id: Math.random().toString().substr(2, 8),
+			length: 100,
+		});
+	});
+});
+
+onBeforeUnmount(() => {
+	queueStatsConnection.dispose();
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.dashboard,
+	icon: 'ti ti-dashboard',
+});
+</script>
+
+<style lang="scss" scoped>
+.edbbcaef {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+	grid-gap: 16px;
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/proxy-account.vue b/packages/frontend/src/pages/admin/proxy-account.vue
new file mode 100644
index 0000000000..5d0d67980e
--- /dev/null
+++ b/packages/frontend/src/pages/admin/proxy-account.vue
@@ -0,0 +1,62 @@
+<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">
+			<template #key>{{ i18n.ts.proxyAccount }}</template>
+			<template #value>{{ proxyAccount ? `@${proxyAccount.username}` : i18n.ts.none }}</template>
+		</MkKeyValue>
+
+		<FormButton primary class="_formBlock" @click="chooseProxyAccount">{{ i18n.ts.selectAccount }}</FormButton>
+	</FormSuspense>
+</MkSpacer></MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import FormButton from '@/components/MkButton.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import * as os from '@/os';
+import { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let proxyAccount: any = $ref(null);
+let proxyAccountId: any = $ref(null);
+
+async function init() {
+	const meta = await os.api('admin/meta');
+	proxyAccountId = meta.proxyAccountId;
+	if (proxyAccountId) {
+		proxyAccount = await os.api('users/show', { userId: proxyAccountId });
+	}
+}
+
+function chooseProxyAccount() {
+	os.selectUser().then(user => {
+		proxyAccount = user;
+		proxyAccountId = user.id;
+		save();
+	});
+}
+
+function save() {
+	os.apiWithDialog('admin/update-meta', {
+		proxyAccountId: proxyAccountId,
+	}).then(() => {
+		fetchInstance();
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.proxyAccount,
+	icon: 'ti ti-ghost',
+});
+</script>
diff --git a/packages/frontend/src/pages/admin/queue.chart.chart.vue b/packages/frontend/src/pages/admin/queue.chart.chart.vue
new file mode 100644
index 0000000000..5777674ae3
--- /dev/null
+++ b/packages/frontend/src/pages/admin/queue.chart.chart.vue
@@ -0,0 +1,186 @@
+<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';
+import { chartVLine } from '@/scripts/chart-vline';
+
+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(() => {
+	const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
+
+	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.2),
+				fill: true,
+				data: [],
+			}],
+		},
+		options: {
+			aspectRatio: 2.5,
+			layout: {
+				padding: {
+					left: 0,
+					right: 0,
+					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,
+				},
+			},
+		},
+		plugins: [chartVLine(vLineColor)],
+	});
+});
+
+defineExpose({
+	setData,
+	pushData,
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/frontend/src/pages/admin/queue.chart.vue b/packages/frontend/src/pages/admin/queue.chart.vue
new file mode 100644
index 0000000000..186a22c43e
--- /dev/null
+++ b/packages/frontend/src/pages/admin/queue.chart.vue
@@ -0,0 +1,149 @@
+<template>
+<div class="pumxzjhg">
+	<div class="_table status">
+		<div class="_row">
+			<div class="_cell"><div class="_label">Process</div>{{ number(activeSincePrevTick) }}</div>
+			<div class="_cell"><div class="_label">Active</div>{{ number(active) }}</div>
+			<div class="_cell"><div class="_label">Waiting</div>{{ number(waiting) }}</div>
+			<div class="_cell"><div class="_label">Delayed</div>{{ number(delayed) }}</div>
+		</div>
+	</div>
+	<div class="charts">
+		<div class="chart">
+			<div class="title">Process</div>
+			<XChart ref="chartProcess" type="process"/>
+		</div>
+		<div class="chart">
+			<div class="title">Active</div>
+			<XChart ref="chartActive" type="active"/>
+		</div>
+		<div class="chart">
+			<div class="title">Delayed</div>
+			<XChart ref="chartDelayed" type="delayed"/>
+		</div>
+		<div class="chart">
+			<div class="title">Waiting</div>
+			<XChart ref="chartWaiting" type="waiting"/>
+		</div>
+	</div>
+	<div class="jobs">
+		<div v-if="jobs.length > 0">
+			<div v-for="job in jobs" :key="job[0]">
+				<span>{{ job[0] }}</span>
+				<span style="margin-left: 8px; opacity: 0.7;">({{ number(job[1]) }} jobs)</span>
+			</div>
+		</div>
+		<span v-else style="opacity: 0.5;">{{ i18n.ts.noJobs }}</span>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { markRaw, onMounted, onUnmounted, ref } from 'vue';
+import XChart from './queue.chart.chart.vue';
+import number from '@/filters/number';
+import * as os from '@/os';
+import { stream } from '@/stream';
+import { i18n } from '@/i18n';
+
+const connection = markRaw(stream.useChannel('queueStats'));
+
+const activeSincePrevTick = ref(0);
+const active = 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;
+}>();
+
+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;
+	});
+
+	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;
+	}
+
+	> .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;
+		max-height: 180px;
+		overflow: auto;
+		background: var(--panel);
+		border-radius: var(--radius);
+	}
+
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/queue.vue b/packages/frontend/src/pages/admin/queue.vue
new file mode 100644
index 0000000000..8d19b49fc5
--- /dev/null
+++ b/packages/frontend/src/pages/admin/queue.vue
@@ -0,0 +1,56 @@
+<template>
+<MkStickyContainer>
+	<template #header><XHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="800">
+		<XQueue v-if="tab === 'deliver'" domain="deliver"/>
+		<XQueue v-else-if="tab === 'inbox'" domain="inbox"/>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { markRaw, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import XQueue from './queue.chart.vue';
+import XHeader from './_header_.vue';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import * as config from '@/config';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let tab = $ref('deliver');
+
+function clear() {
+	os.confirm({
+		type: 'warning',
+		title: i18n.ts.clearQueueConfirmTitle,
+		text: i18n.ts.clearQueueConfirmText,
+	}).then(({ canceled }) => {
+		if (canceled) return;
+
+		os.apiWithDialog('admin/queue/clear');
+	});
+}
+
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'ti ti-external-link',
+	text: i18n.ts.dashboard,
+	handler: () => {
+		window.open(config.url + '/queue', '_blank');
+	},
+}]);
+
+const headerTabs = $computed(() => [{
+	key: 'deliver',
+	title: 'Deliver',
+}, {
+	key: 'inbox',
+	title: 'Inbox',
+}]);
+
+definePageMetadata({
+	title: i18n.ts.jobQueue,
+	icon: 'ti ti-clock-play',
+});
+</script>
diff --git a/packages/frontend/src/pages/admin/relays.vue b/packages/frontend/src/pages/admin/relays.vue
new file mode 100644
index 0000000000..4768ae67b1
--- /dev/null
+++ b/packages/frontend/src/pages/admin/relays.vue
@@ -0,0 +1,103 @@
+<template>
+<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="ti ti-check icon accepted"></i>
+				<i v-else-if="relay.status === 'rejected'" class="ti ti-ban icon rejected"></i>
+				<i v-else class="ti ti-clock icon requesting"></i>
+				<span>{{ $t(`_relayStatus.${relay.status}`) }}</span>
+			</div>
+			<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import XHeader from './_header_.vue';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let relays: any[] = $ref([]);
+
+async function addRelay() {
+	const { canceled, result: inbox } = await os.inputText({
+		title: i18n.ts.addRelay,
+		type: 'url',
+		placeholder: i18n.ts.inboxUrl,
+	});
+	if (canceled) return;
+	os.api('admin/relays/add', {
+		inbox,
+	}).then((relay: any) => {
+		refresh();
+	}).catch((err: any) => {
+		os.alert({
+			type: 'error',
+			text: err.message || err,
+		});
+	});
+}
+
+function remove(inbox: string) {
+	os.api('admin/relays/remove', {
+		inbox,
+	}).then(() => {
+		refresh();
+	}).catch((err: any) => {
+		os.alert({
+			type: 'error',
+			text: err.message || err,
+		});
+	});
+}
+
+function refresh() {
+	os.api('admin/relays/list').then((relayList: any) => {
+		relays = relayList;
+	});
+}
+
+refresh();
+
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'ti ti-plus',
+	text: i18n.ts.addRelay,
+	handler: addRelay,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.relays,
+	icon: 'ti ti-planet',
+});
+</script>
+
+<style lang="scss" scoped>
+.relaycxt {
+	> .status {
+		margin: 8px 0;
+
+		> .icon {
+			width: 1em;
+			margin-right: 0.75em;
+
+			&.accepted {
+				color: var(--success);
+			}
+
+			&.rejected {
+				color: var(--error);
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/admin/security.vue b/packages/frontend/src/pages/admin/security.vue
new file mode 100644
index 0000000000..2682bda337
--- /dev/null
+++ b/packages/frontend/src/pages/admin/security.vue
@@ -0,0 +1,179 @@
+<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="ti ti-shield"></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-if="enableTurnstile" #suffix>Turnstile</template>
+					<template v-else #suffix>{{ i18n.ts.none }} ({{ i18n.ts.notRecommended }})</template>
+
+					<XBotProtection/>
+				</FormFolder>
+
+				<FormFolder class="_formBlock">
+					<template #icon><i class="ti ti-eye-off"></i></template>
+					<template #label>{{ i18n.ts.sensitiveMediaDetection }}</template>
+					<template v-if="sensitiveMediaDetection === 'all'" #suffix>{{ i18n.ts.all }}</template>
+					<template v-else-if="sensitiveMediaDetection === 'local'" #suffix>{{ i18n.ts.localOnly }}</template>
+					<template v-else-if="sensitiveMediaDetection === 'remote'" #suffix>{{ i18n.ts.remoteOnly }}</template>
+					<template v-else #suffix>{{ i18n.ts.none }}</template>
+
+					<div class="_formRoot">
+						<span class="_formBlock">{{ i18n.ts._sensitiveMediaDetection.description }}</span>
+
+						<FormRadios v-model="sensitiveMediaDetection" class="_formBlock">
+							<option value="none">{{ i18n.ts.none }}</option>
+							<option value="all">{{ i18n.ts.all }}</option>
+							<option value="local">{{ i18n.ts.localOnly }}</option>
+							<option value="remote">{{ i18n.ts.remoteOnly }}</option>
+						</FormRadios>
+
+						<FormRange v-model="sensitiveMediaDetectionSensitivity" :min="0" :max="4" :step="1" :text-converter="(v) => `${v + 1}`" class="_formBlock">
+							<template #label>{{ i18n.ts._sensitiveMediaDetection.sensitivity }}</template>
+							<template #caption>{{ i18n.ts._sensitiveMediaDetection.sensitivityDescription }}</template>
+						</FormRange>
+
+						<FormSwitch v-model="enableSensitiveMediaDetectionForVideos" class="_formBlock">
+							<template #label>{{ i18n.ts._sensitiveMediaDetection.analyzeVideos }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
+							<template #caption>{{ i18n.ts._sensitiveMediaDetection.analyzeVideosDescription }}</template>
+						</FormSwitch>
+
+						<FormSwitch v-model="setSensitiveFlagAutomatically" class="_formBlock">
+							<template #label>{{ i18n.ts._sensitiveMediaDetection.setSensitiveFlagAutomatically }} ({{ i18n.ts.notRecommended }})</template>
+							<template #caption>{{ i18n.ts._sensitiveMediaDetection.setSensitiveFlagAutomaticallyDescription }}</template>
+						</FormSwitch>
+
+						<!-- 現状 false positive が多すぎて実用に耐えない
+						<FormSwitch v-model="disallowUploadWhenPredictedAsPorn" class="_formBlock">
+							<template #label>{{ i18n.ts._sensitiveMediaDetection.disallowUploadWhenPredictedAsPorn }}</template>
+						</FormSwitch>
+						-->
+
+						<FormButton primary class="_formBlock" @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
+					</div>
+				</FormFolder>
+
+				<FormFolder class="_formBlock">
+					<template #label>Active Email Validation</template>
+					<template v-if="enableActiveEmailValidation" #suffix>Enabled</template>
+					<template v-else #suffix>Disabled</template>
+
+					<div class="_formRoot">
+						<span class="_formBlock">{{ i18n.ts.activeEmailValidationDescription }}</span>
+						<FormSwitch v-model="enableActiveEmailValidation" class="_formBlock" @update:model-value="save">
+							<template #label>Enable</template>
+						</FormSwitch>
+					</div>
+				</FormFolder>
+
+				<FormFolder class="_formBlock">
+					<template #label>Log IP address</template>
+					<template v-if="enableIpLogging" #suffix>Enabled</template>
+					<template v-else #suffix>Disabled</template>
+
+					<div class="_formRoot">
+						<FormSwitch v-model="enableIpLogging" class="_formBlock" @update:model-value="save">
+							<template #label>Enable</template>
+						</FormSwitch>
+					</div>
+				</FormFolder>
+
+				<FormFolder class="_formBlock">
+					<template #label>Summaly Proxy</template>
+
+					<div class="_formRoot">
+						<FormInput v-model="summalyProxy" class="_formBlock">
+							<template #prefix><i class="ti ti-link"></i></template>
+							<template #label>Summaly Proxy URL</template>
+						</FormInput>
+
+						<FormButton primary class="_formBlock" @click="save"><i class="ti ti-device-floppy"></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 FormRadios from '@/components/form/radios.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormInfo from '@/components/MkInfo.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import FormRange from '@/components/form/range.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let summalyProxy: string = $ref('');
+let enableHcaptcha: boolean = $ref(false);
+let enableRecaptcha: boolean = $ref(false);
+let enableTurnstile: boolean = $ref(false);
+let sensitiveMediaDetection: string = $ref('none');
+let sensitiveMediaDetectionSensitivity: number = $ref(0);
+let setSensitiveFlagAutomatically: boolean = $ref(false);
+let enableSensitiveMediaDetectionForVideos: boolean = $ref(false);
+let enableIpLogging: boolean = $ref(false);
+let enableActiveEmailValidation: boolean = $ref(false);
+
+async function init() {
+	const meta = await os.api('admin/meta');
+	summalyProxy = meta.summalyProxy;
+	enableHcaptcha = meta.enableHcaptcha;
+	enableRecaptcha = meta.enableRecaptcha;
+	enableTurnstile = meta.enableTurnstile;
+	sensitiveMediaDetection = meta.sensitiveMediaDetection;
+	sensitiveMediaDetectionSensitivity =
+		meta.sensitiveMediaDetectionSensitivity === 'veryLow' ? 0 :
+		meta.sensitiveMediaDetectionSensitivity === 'low' ? 1 :
+		meta.sensitiveMediaDetectionSensitivity === 'medium' ? 2 :
+		meta.sensitiveMediaDetectionSensitivity === 'high' ? 3 :
+		meta.sensitiveMediaDetectionSensitivity === 'veryHigh' ? 4 : 0;
+	setSensitiveFlagAutomatically = meta.setSensitiveFlagAutomatically;
+	enableSensitiveMediaDetectionForVideos = meta.enableSensitiveMediaDetectionForVideos;
+	enableIpLogging = meta.enableIpLogging;
+	enableActiveEmailValidation = meta.enableActiveEmailValidation;
+}
+
+function save() {
+	os.apiWithDialog('admin/update-meta', {
+		summalyProxy,
+		sensitiveMediaDetection,
+		sensitiveMediaDetectionSensitivity:
+			sensitiveMediaDetectionSensitivity === 0 ? 'veryLow' :
+			sensitiveMediaDetectionSensitivity === 1 ? 'low' :
+			sensitiveMediaDetectionSensitivity === 2 ? 'medium' :
+			sensitiveMediaDetectionSensitivity === 3 ? 'high' :
+			sensitiveMediaDetectionSensitivity === 4 ? 'veryHigh' :
+			0,
+		setSensitiveFlagAutomatically,
+		enableSensitiveMediaDetectionForVideos,
+		enableIpLogging,
+		enableActiveEmailValidation,
+	}).then(() => {
+		fetchInstance();
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.security,
+	icon: 'ti ti-lock',
+});
+</script>
diff --git a/packages/frontend/src/pages/admin/settings.vue b/packages/frontend/src/pages/admin/settings.vue
new file mode 100644
index 0000000000..460eb92694
--- /dev/null
+++ b/packages/frontend/src/pages/admin/settings.vue
@@ -0,0 +1,262 @@
+<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>
+
+					<FormTextarea v-model="description" class="_formBlock">
+						<template #label>{{ i18n.ts.instanceDescription }}</template>
+					</FormTextarea>
+
+					<FormInput v-model="tosUrl" class="_formBlock">
+						<template #prefix><i class="ti ti-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="ti ti-mail"></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="ti ti-link"></i></template>
+							<template #label>{{ i18n.ts.iconUrl }}</template>
+						</FormInput>
+
+						<FormInput v-model="bannerUrl" class="_formBlock">
+							<template #prefix><i class="ti ti-link"></i></template>
+							<template #label>{{ i18n.ts.bannerUrl }}</template>
+						</FormInput>
+
+						<FormInput v-model="backgroundImageUrl" class="_formBlock">
+							<template #prefix><i class="ti ti-link"></i></template>
+							<template #label>{{ i18n.ts.backgroundImageUrl }}</template>
+						</FormInput>
+
+						<FormInput v-model="themeColor" class="_formBlock">
+							<template #prefix><i class="ti ti-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="ti ti-key"></i></template>
+								<template #label>Public key</template>
+							</FormInput>
+
+							<FormInput v-model="swPrivateKey" class="_formBlock">
+								<template #prefix><i class="ti ti-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="ti ti-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';
+import FormInfo from '@/components/MkInfo.vue';
+import FormSection from '@/components/form/section.vue';
+import FormSplit from '@/components/form/split.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import * as os from '@/os';
+import { fetchInstance } from '@/instance';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let name: string | null = $ref(null);
+let description: string | null = $ref(null);
+let tosUrl: string | null = $ref(null);
+let maintainerName: string | null = $ref(null);
+let maintainerEmail: string | null = $ref(null);
+let iconUrl: string | null = $ref(null);
+let bannerUrl: string | null = $ref(null);
+let backgroundImageUrl: string | null = $ref(null);
+let themeColor: any = $ref(null);
+let defaultLightTheme: any = $ref(null);
+let defaultDarkTheme: any = $ref(null);
+let enableLocalTimeline: boolean = $ref(false);
+let enableGlobalTimeline: boolean = $ref(false);
+let pinnedUsers: string = $ref('');
+let cacheRemoteFiles: boolean = $ref(false);
+let localDriveCapacityMb: any = $ref(0);
+let remoteDriveCapacityMb: any = $ref(0);
+let enableRegistration: boolean = $ref(false);
+let emailRequiredForSignup: boolean = $ref(false);
+let enableServiceWorker: boolean = $ref(false);
+let swPublicKey: any = $ref(null);
+let swPrivateKey: any = $ref(null);
+let deeplAuthKey: string = $ref('');
+let deeplIsPro: boolean = $ref(false);
+
+async function init() {
+	const meta = await os.api('admin/meta');
+	name = meta.name;
+	description = meta.description;
+	tosUrl = meta.tosUrl;
+	iconUrl = meta.iconUrl;
+	bannerUrl = meta.bannerUrl;
+	backgroundImageUrl = meta.backgroundImageUrl;
+	themeColor = meta.themeColor;
+	defaultLightTheme = meta.defaultLightTheme;
+	defaultDarkTheme = meta.defaultDarkTheme;
+	maintainerName = meta.maintainerName;
+	maintainerEmail = meta.maintainerEmail;
+	enableLocalTimeline = !meta.disableLocalTimeline;
+	enableGlobalTimeline = !meta.disableGlobalTimeline;
+	pinnedUsers = meta.pinnedUsers.join('\n');
+	cacheRemoteFiles = meta.cacheRemoteFiles;
+	localDriveCapacityMb = meta.driveCapacityPerLocalUserMb;
+	remoteDriveCapacityMb = meta.driveCapacityPerRemoteUserMb;
+	enableRegistration = !meta.disableRegistration;
+	emailRequiredForSignup = meta.emailRequiredForSignup;
+	enableServiceWorker = meta.enableServiceWorker;
+	swPublicKey = meta.swPublickey;
+	swPrivateKey = meta.swPrivateKey;
+	deeplAuthKey = meta.deeplAuthKey;
+	deeplIsPro = meta.deeplIsPro;
+}
+
+function save() {
+	os.apiWithDialog('admin/update-meta', {
+		name,
+		description,
+		tosUrl,
+		iconUrl,
+		bannerUrl,
+		backgroundImageUrl,
+		themeColor: themeColor === '' ? null : themeColor,
+		defaultLightTheme: defaultLightTheme === '' ? null : defaultLightTheme,
+		defaultDarkTheme: defaultDarkTheme === '' ? null : defaultDarkTheme,
+		maintainerName,
+		maintainerEmail,
+		disableLocalTimeline: !enableLocalTimeline,
+		disableGlobalTimeline: !enableGlobalTimeline,
+		pinnedUsers: pinnedUsers.split('\n'),
+		cacheRemoteFiles,
+		localDriveCapacityMb: parseInt(localDriveCapacityMb, 10),
+		remoteDriveCapacityMb: parseInt(remoteDriveCapacityMb, 10),
+		disableRegistration: !enableRegistration,
+		emailRequiredForSignup,
+		enableServiceWorker,
+		swPublicKey,
+		swPrivateKey,
+		deeplAuthKey,
+		deeplIsPro,
+	}).then(() => {
+		fetchInstance();
+	});
+}
+
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'ti ti-check',
+	text: i18n.ts.save,
+	handler: save,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.general,
+	icon: 'ti ti-settings',
+});
+</script>
diff --git a/packages/frontend/src/pages/admin/users.vue b/packages/frontend/src/pages/admin/users.vue
new file mode 100644
index 0000000000..d466e21907
--- /dev/null
+++ b/packages/frontend/src/pages/admin/users.vue
@@ -0,0 +1,170 @@
+<template>
+<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>{{ i18n.ts.sort }}</template>
+							<option value="-createdAt">{{ i18n.ts.registeredDate }} ({{ i18n.ts.ascendingOrder }})</option>
+							<option value="+createdAt">{{ i18n.ts.registeredDate }} ({{ i18n.ts.descendingOrder }})</option>
+							<option value="-updatedAt">{{ i18n.ts.lastUsed }} ({{ i18n.ts.ascendingOrder }})</option>
+							<option value="+updatedAt">{{ i18n.ts.lastUsed }} ({{ i18n.ts.descendingOrder }})</option>
+						</MkSelect>
+						<MkSelect v-model="state" style="flex: 1;">
+							<template #label>{{ i18n.ts.state }}</template>
+							<option value="all">{{ i18n.ts.all }}</option>
+							<option value="available">{{ i18n.ts.normal }}</option>
+							<option value="admin">{{ i18n.ts.administrator }}</option>
+							<option value="moderator">{{ i18n.ts.moderator }}</option>
+							<option value="silenced">{{ i18n.ts.silence }}</option>
+							<option value="suspended">{{ i18n.ts.suspend }}</option>
+						</MkSelect>
+						<MkSelect v-model="origin" style="flex: 1;">
+							<template #label>{{ i18n.ts.instance }}</template>
+							<option value="combined">{{ i18n.ts.all }}</option>
+							<option value="local">{{ i18n.ts.local }}</option>
+							<option value="remote">{{ i18n.ts.remote }}</option>
+						</MkSelect>
+					</div>
+					<div class="inputs">
+						<MkInput v-model="searchUsername" style="flex: 1;" type="text" :spellcheck="false" @update:model-value="$refs.users.reload()">
+							<template #prefix>@</template>
+							<template #label>{{ i18n.ts.username }}</template>
+						</MkInput>
+						<MkInput v-model="searchHost" style="flex: 1;" type="text" :spellcheck="false" :disabled="pagination.params.origin === 'local'" @update:model-value="$refs.users.reload()">
+							<template #prefix>@</template>
+							<template #label>{{ i18n.ts.host }}</template>
+						</MkInput>
+					</div>
+
+					<MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination" class="users">
+						<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${new Date(user.updatedAt).toLocaleString()}`" class="user" :to="`/user-info/${user.id}`">
+							<MkUserCardMini :user="user"/>
+						</MkA>
+					</MkPagination>
+				</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/MkPagination.vue';
+import * as os from '@/os';
+import { lookupUser } from '@/scripts/lookup-user';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import MkUserCardMini from '@/components/MkUserCardMini.vue';
+
+let paginationComponent = $ref<InstanceType<typeof MkPagination>>();
+
+let sort = $ref('+createdAt');
+let state = $ref('all');
+let origin = $ref('local');
+let searchUsername = $ref('');
+let searchHost = $ref('');
+const pagination = {
+	endpoint: 'admin/show-users' as const,
+	limit: 10,
+	params: computed(() => ({
+		sort: sort,
+		state: state,
+		origin: origin,
+		username: searchUsername,
+		hostname: searchHost,
+	})),
+	offsetMode: true,
+};
+
+function searchUser() {
+	os.selectUser().then(user => {
+		show(user);
+	});
+}
+
+async function addUser() {
+	const { canceled: canceled1, result: username } = await os.inputText({
+		title: i18n.ts.username,
+	});
+	if (canceled1) return;
+
+	const { canceled: canceled2, result: password } = await os.inputText({
+		title: i18n.ts.password,
+		type: 'password',
+	});
+	if (canceled2) return;
+
+	os.apiWithDialog('admin/accounts/create', {
+		username: username,
+		password: password,
+	}).then(res => {
+		paginationComponent.reload();
+	});
+}
+
+function show(user) {
+	os.pageWindow(`/user-info/${user.id}`);
+}
+
+const headerActions = $computed(() => [{
+	icon: 'ti ti-search',
+	text: i18n.ts.search,
+	handler: searchUser,
+}, {
+	asFullButton: true,
+	icon: 'ti ti-plus',
+	text: i18n.ts.addUser,
+	handler: addUser,
+}, {
+	asFullButton: true,
+	icon: 'ti ti-search',
+	text: i18n.ts.lookup,
+	handler: lookupUser,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.users,
+	icon: 'ti ti-users',
+})));
+</script>
+
+<style lang="scss" scoped>
+.lknzcolw {
+	> .users {
+
+		> .inputs {
+			display: flex;
+			margin-bottom: 16px;
+
+			> * {
+				margin-right: 16px;
+
+				&:last-child {
+					margin-right: 0;
+				}
+			}
+		}
+	
+		> .users {
+			margin-top: var(--margin);
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+			grid-gap: 12px;
+
+			> .user:hover {
+				text-decoration: none;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/announcements.vue b/packages/frontend/src/pages/announcements.vue
new file mode 100644
index 0000000000..6a93b3b9fa
--- /dev/null
+++ b/packages/frontend/src/pages/announcements.vue
@@ -0,0 +1,69 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="800">
+		<MkPagination v-slot="{items}" :pagination="pagination" class="ruryvtyk _content">
+			<section v-for="(announcement, i) in items" :key="announcement.id" class="_card announcement">
+				<div class="_title"><span v-if="$i && !announcement.isRead">🆕 </span>{{ announcement.title }}</div>
+				<div class="_content">
+					<Mfm :text="announcement.text"/>
+					<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
+				</div>
+				<div v-if="$i && !announcement.isRead" class="_footer">
+					<MkButton primary @click="read(items, announcement, i)"><i class="ti ti-check"></i> {{ $ts.gotIt }}</MkButton>
+				</div>
+			</section>
+		</MkPagination>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkPagination from '@/components/MkPagination.vue';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const 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 });
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.announcements,
+	icon: 'ti ti-speakerphone',
+});
+</script>
+
+<style lang="scss" scoped>
+.ruryvtyk {
+	> .announcement {
+		&:not(:last-child) {
+			margin-bottom: var(--margin);
+		}
+
+		> ._content {
+			> img {
+				display: block;
+				max-height: 300px;
+				max-width: 100%;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/antenna-timeline.vue b/packages/frontend/src/pages/antenna-timeline.vue
new file mode 100644
index 0000000000..0b2c284c99
--- /dev/null
+++ b/packages/frontend/src/pages/antenna-timeline.vue
@@ -0,0 +1,128 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<div ref="rootEl" v-hotkey.global="keymap" v-size="{ min: [800] }" class="tqmomfks">
+		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ $ts.newNoteRecived }}</button></div>
+		<div class="tl _block">
+			<XTimeline
+				ref="tlEl" :key="antennaId"
+				class="tl"
+				src="antenna"
+				:antenna="antennaId"
+				:sound="true"
+				@queue="queueUpdated"
+			/>
+		</div>
+	</div>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, watch } from 'vue';
+import XTimeline from '@/components/MkTimeline.vue';
+import { scroll } from '@/scripts/scroll';
+import * as os from '@/os';
+import { useRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+
+const router = useRouter();
+
+const props = defineProps<{
+	antennaId: string;
+}>();
+
+let antenna = $ref(null);
+let queue = $ref(0);
+let rootEl = $ref<HTMLElement>();
+let tlEl = $ref<InstanceType<typeof XTimeline>>();
+const keymap = $computed(() => ({
+	't': focus,
+}));
+
+function queueUpdated(q) {
+	queue = q;
+}
+
+function top() {
+	scroll(rootEl, { top: 0 });
+}
+
+async function timetravel() {
+	const { canceled, result: date } = await os.inputDate({
+		title: i18n.ts.date,
+	});
+	if (canceled) return;
+
+	tlEl.timetravel(date);
+}
+
+function settings() {
+	router.push(`/my/antennas/${props.antennaId}`);
+}
+
+function focus() {
+	tlEl.focus();
+}
+
+watch(() => props.antennaId, async () => {
+	antenna = await os.api('antennas/show', {
+		antennaId: props.antennaId,
+	});
+}, { immediate: true });
+
+const headerActions = $computed(() => antenna ? [{
+	icon: 'fas fa-calendar-alt',
+	text: i18n.ts.jumpToSpecifiedDate,
+	handler: timetravel,
+}, {
+	icon: 'ti ti-settings',
+	text: i18n.ts.settings,
+	handler: settings,
+}] : []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => antenna ? {
+	title: antenna.name,
+	icon: 'ti ti-antenna',
+} : null));
+</script>
+
+<style lang="scss" scoped>
+.tqmomfks {
+	padding: var(--margin);
+
+	> .new {
+		position: sticky;
+		top: calc(var(--stickyTop, 0px) + 16px);
+		z-index: 1000;
+		width: 100%;
+
+		> button {
+			display: block;
+			margin: var(--margin) auto 0 auto;
+			padding: 8px 16px;
+			border-radius: 32px;
+		}
+	}
+
+	> .tl {
+		background: var(--bg);
+		border-radius: var(--radius);
+		overflow: clip;
+	}
+
+	&.min-width_800px {
+		max-width: 800px;
+		margin: 0 auto;
+	}
+}
+
+@container (min-width: 800px) {
+	.tqmomfks {
+		max-width: 800px;
+		margin: 0 auto;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/api-console.vue b/packages/frontend/src/pages/api-console.vue
new file mode 100644
index 0000000000..1d5339b44c
--- /dev/null
+++ b/packages/frontend/src/pages/api-console.vue
@@ -0,0 +1,89 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="700">
+		<div class="_formRoot">
+			<div class="_formBlock">
+				<MkInput v-model="endpoint" :datalist="endpoints" class="_formBlock" @update:model-value="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="ti ti-send"></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>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import JSON5 from 'json5';
+import { Endpoints } from 'misskey-js';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/form/input.vue';
+import MkTextarea from '@/components/form/textarea.vue';
+import MkSwitch from '@/components/form/switch.vue';
+import * as os from '@/os';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const body = ref('{}');
+const endpoint = ref('');
+const endpoints = ref<any[]>([]);
+const sending = ref(false);
+const res = ref('');
+const withCredential = ref(true);
+
+os.api('endpoints').then(endpointResponse => {
+	endpoints.value = endpointResponse;
+});
+
+function send() {
+	sending.value = true;
+	const requestBody = JSON5.parse(body.value);
+	os.api(endpoint.value as keyof Endpoints, requestBody, requestBody.i || (withCredential.value ? undefined : null)).then(resp => {
+		sending.value = false;
+		res.value = JSON5.stringify(resp, null, 2);
+	}, err => {
+		sending.value = false;
+		res.value = JSON5.stringify(err, null, 2);
+	});
+}
+
+function onEndpointChange() {
+	os.api('endpoint', { endpoint: endpoint.value }, withCredential.value ? undefined : null).then(resp => {
+		const endpointBody = {};
+		for (const p of resp.params) {
+			endpointBody[p.name] =
+				p.type === 'String' ? '' :
+				p.type === 'Number' ? 0 :
+				p.type === 'Boolean' ? false :
+				p.type === 'Array' ? [] :
+				p.type === 'Object' ? {} :
+				null;
+		}
+		body.value = JSON5.stringify(endpointBody, null, 2);
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: 'API console',
+	icon: 'ti ti-terminal-2',
+});
+</script>
diff --git a/packages/frontend/src/pages/auth.form.vue b/packages/frontend/src/pages/auth.form.vue
new file mode 100644
index 0000000000..1546735266
--- /dev/null
+++ b/packages/frontend/src/pages/auth.form.vue
@@ -0,0 +1,60 @@
+<template>
+<section class="_section">
+	<div class="_title">{{ $t('_auth.shareAccess', { name: app.name }) }}</div>
+	<div class="_content">
+		<h2>{{ app.name }}</h2>
+		<p class="id">{{ app.id }}</p>
+		<p class="description">{{ app.description }}</p>
+	</div>
+	<div class="_content">
+		<h2>{{ $ts._auth.permissionAsk }}</h2>
+		<ul>
+			<li v-for="p in app.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
+		</ul>
+	</div>
+	<div class="_footer">
+		<MkButton inline @click="cancel">{{ $ts.cancel }}</MkButton>
+		<MkButton inline primary @click="accept">{{ $ts.accept }}</MkButton>
+	</div>
+</section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		MkButton,
+	},
+	props: ['session'],
+	computed: {
+		name(): string {
+			const el = document.createElement('div');
+			el.textContent = this.app.name;
+			return el.innerHTML;
+		},
+		app(): any {
+			return this.session.app;
+		},
+	},
+	methods: {
+		cancel() {
+			os.api('auth/deny', {
+				token: this.session.token,
+			}).then(() => {
+				this.$emit('denied');
+			});
+		},
+
+		accept() {
+			os.api('auth/accept', {
+				token: this.session.token,
+			}).then(() => {
+				this.$emit('accepted');
+			});
+		},
+	},
+});
+</script>
diff --git a/packages/frontend/src/pages/auth.vue b/packages/frontend/src/pages/auth.vue
new file mode 100644
index 0000000000..bb55881a22
--- /dev/null
+++ b/packages/frontend/src/pages/auth.vue
@@ -0,0 +1,91 @@
+<template>
+<div v-if="$i && fetching" class="">
+	<MkLoading/>
+</div>
+<div v-else-if="$i">
+	<XForm
+		v-if="state == 'waiting'"
+		ref="form"
+		class="form"
+		:session="session"
+		@denied="state = 'denied'"
+		@accepted="accepted"
+	/>
+	<div v-if="state == 'denied'" class="denied">
+		<h1>{{ $ts._auth.denied }}</h1>
+	</div>
+	<div v-if="state == 'accepted'" class="accepted">
+		<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>
+	<div v-if="state == 'fetch-session-error'" class="error">
+		<p>{{ $ts.somethingHappened }}</p>
+	</div>
+</div>
+<div v-else class="signin">
+	<MkSignin @login="onLogin"/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import XForm from './auth.form.vue';
+import MkSignin from '@/components/MkSignin.vue';
+import * as os from '@/os';
+import { login } from '@/account';
+
+export default defineComponent({
+	components: {
+		XForm,
+		MkSignin,
+	},
+	props: ['token'],
+	data() {
+		return {
+			state: null,
+			session: null,
+			fetching: true,
+		};
+	},
+	mounted() {
+		if (!this.$i) return;
+
+		// Fetch session
+		os.api('auth/session/show', {
+			token: this.token,
+		}).then(session => {
+			this.session = session;
+			this.fetching = false;
+
+			// 既に連携していた場合
+			if (this.session.app.isAuthorized) {
+				os.api('auth/accept', {
+					token: this.session.token,
+				}).then(() => {
+					this.accepted();
+				});
+			} else {
+				this.state = 'waiting';
+			}
+		}).catch(error => {
+			this.state = 'fetch-session-error';
+			this.fetching = false;
+		});
+	},
+	methods: {
+		accepted() {
+			this.state = 'accepted';
+			if (this.session.app.callbackUrl) {
+				location.href = `${this.session.app.callbackUrl}?token=${this.session.token}`;
+			}
+		}, onLogin(res) {
+			login(res.i);
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/frontend/src/pages/channel-editor.vue b/packages/frontend/src/pages/channel-editor.vue
new file mode 100644
index 0000000000..5ae7e63f99
--- /dev/null
+++ b/packages/frontend/src/pages/channel-editor.vue
@@ -0,0 +1,122 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="700">
+		<div class="_formRoot">
+			<MkInput v-model="name" class="_formBlock">
+				<template #label>{{ i18n.ts.name }}</template>
+			</MkInput>
+
+			<MkTextarea v-model="description" class="_formBlock">
+				<template #label>{{ i18n.ts.description }}</template>
+			</MkTextarea>
+
+			<div class="banner">
+				<MkButton v-if="bannerId == null" @click="setBannerImage"><i class="ti ti-plus"></i> {{ i18n.ts._channel.setBanner }}</MkButton>
+				<div v-else-if="bannerUrl">
+					<img :src="bannerUrl" style="width: 100%;"/>
+					<MkButton @click="removeBannerImage()"><i class="ti ti-trash"></i> {{ i18n.ts._channel.removeBanner }}</MkButton>
+				</div>
+			</div>
+			<div class="_formBlock">
+				<MkButton primary @click="save()"><i class="ti ti-device-floppy"></i> {{ channelId ? i18n.ts.save : i18n.ts.create }}</MkButton>
+			</div>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, watch } from 'vue';
+import MkTextarea from '@/components/form/textarea.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/form/input.vue';
+import { selectFile } from '@/scripts/select-file';
+import * as os from '@/os';
+import { useRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+
+const router = useRouter();
+
+const props = defineProps<{
+	channelId?: string;
+}>();
+
+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(() => 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: 'ti ti-device-tv',
+} : {
+	title: i18n.ts._channel.create,
+	icon: 'ti ti-device-tv',
+}));
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
new file mode 100644
index 0000000000..f271bb270f
--- /dev/null
+++ b/packages/frontend/src/pages/channel.vue
@@ -0,0 +1,184 @@
+<template>
+<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="ti ti-chevron-up"></i></template>
+					<template v-else><i class="ti ti-chevron-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="ti ti-users ti-fw"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
+						<div><i class="ti ti-pencil ti-fw"></i><I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
+					</div>
+					<div class="fade"></div>
+				</div>
+				<div v-if="channel.description" class="description">
+					<Mfm :text="channel.description" :is-note="false" :i="$i"/>
+				</div>
+			</div>
+
+			<XPostForm v-if="$i" :channel="channel" class="post-form _panel _gap" fixed/>
+
+			<XTimeline :key="channelId" class="_gap" src="channel" :channel="channelId" @before="before" @after="after"/>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, watch } from 'vue';
+import MkContainer from '@/components/MkContainer.vue';
+import XPostForm from '@/components/MkPostForm.vue';
+import XTimeline from '@/components/MkTimeline.vue';
+import XChannelFollowButton from '@/components/MkChannelFollowButton.vue';
+import * as os from '@/os';
+import { useRouter } from '@/router';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const router = useRouter();
+
+const props = defineProps<{
+	channelId: string;
+}>();
+
+let channel = $ref(null);
+let showBanner = $ref(true);
+const pagination = {
+	endpoint: 'channels/timeline' as const,
+	limit: 10,
+	params: computed(() => ({
+		channelId: props.channelId,
+	})),
+};
+
+watch(() => props.channelId, async () => {
+	channel = await os.api('channels/show', {
+		channelId: props.channelId,
+	});
+}, { immediate: true });
+
+function edit() {
+	router.push(`/channels/${channel.id}/edit`);
+}
+
+const headerActions = $computed(() => channel && channel.userId ? [{
+	icon: 'ti ti-settings',
+	text: i18n.ts.edit,
+	handler: edit,
+}] : null);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => channel ? {
+	title: channel.name,
+	icon: 'ti ti-device-tv',
+} : null));
+</script>
+
+<style lang="scss" scoped>
+.wpgynlbz {
+	position: relative;
+
+	> .subscribe {
+		position: absolute;
+		z-index: 1;
+		top: 16px;
+		left: 16px;
+	}
+
+	> .toggle {
+		position: absolute;
+		z-index: 2;
+    top: 8px;
+		right: 8px;
+		font-size: 1.2em;
+		width: 48px;
+		height: 48px;
+		color: #fff;
+		background: rgba(0, 0, 0, 0.5);
+		border-radius: 100%;
+		
+		> i {
+			vertical-align: middle;
+		}
+	}
+	
+	> .banner {
+		position: relative;
+		height: 200px;
+		background-position: center;
+		background-size: cover;
+
+		> .fade {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 64px;
+			background: linear-gradient(0deg, var(--panel), var(--X15));
+		}
+
+		> .status {
+			position: absolute;
+			z-index: 1;
+			bottom: 16px;
+			right: 16px;
+			padding: 8px 12px;
+			font-size: 80%;
+			background: rgba(0, 0, 0, 0.7);
+			border-radius: 6px;
+			color: #fff;
+		}
+	}
+
+	> .description {
+		padding: 16px;
+	}
+
+	> .hideOverlay {
+		position: absolute;
+		z-index: 1;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		-webkit-backdrop-filter: var(--blur, blur(16px));
+		backdrop-filter: var(--blur, blur(16px));
+		background: rgba(0, 0, 0, 0.3);
+	}
+
+	&.hide {
+		> .subscribe {
+			display: none;
+		}
+
+		> .toggle {
+			top: 0;
+			right: 0;
+			height: 100%;
+			background: transparent;
+		}
+
+		> .banner {
+			height: 42px;
+			filter: blur(8px);
+
+			> * {
+				display: none;
+			}
+		}
+
+		> .description {
+			display: none;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/channels.vue b/packages/frontend/src/pages/channels.vue
new file mode 100644
index 0000000000..34e9dac196
--- /dev/null
+++ b/packages/frontend/src/pages/channels.vue
@@ -0,0 +1,79 @@
+<template>
+<MkStickyContainer>
+	<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">
+				<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="ti ti-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" setup>
+import { computed, defineComponent, inject } from 'vue';
+import MkChannelPreview from '@/components/MkChannelPreview.vue';
+import MkPagination from '@/components/MkPagination.vue';
+import MkButton from '@/components/MkButton.vue';
+import { useRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+
+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: 'ti ti-plus',
+	text: i18n.ts.create,
+	handler: create,
+}]);
+
+const headerTabs = $computed(() => [{
+	key: 'featured',
+	title: i18n.ts._channel.featured,
+	icon: 'ti ti-comet',
+}, {
+	key: 'following',
+	title: i18n.ts._channel.following,
+	icon: 'ti ti-heart',
+}, {
+	key: 'owned',
+	title: i18n.ts._channel.owned,
+	icon: 'ti ti-edit',
+}]);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.channel,
+	icon: 'ti ti-device-tv',
+})));
+</script>
diff --git a/packages/frontend/src/pages/clip.vue b/packages/frontend/src/pages/clip.vue
new file mode 100644
index 0000000000..e0fbcb6bed
--- /dev/null
+++ b/packages/frontend/src/pages/clip.vue
@@ -0,0 +1,129 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions"/></template>
+		<MkSpacer :content-max="800">
+		<div v-if="clip">
+			<div class="okzinsic _panel">
+				<div v-if="clip.description" class="description">
+					<Mfm :text="clip.description" :is-note="false" :i="$i"/>
+				</div>
+				<div class="user">
+					<MkAvatar :user="clip.user" class="avatar" :show-indicator="true"/> <MkUserName :user="clip.user" :nowrap="false"/>
+				</div>
+			</div>
+
+			<XNotes :pagination="pagination" :detail="true"/>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch, provide } from 'vue';
+import * as misskey from 'misskey-js';
+import XNotes from '@/components/MkNotes.vue';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import * as os from '@/os';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const props = defineProps<{
+	clipId: string,
+}>();
+
+let clip: misskey.entities.Clip = $ref<misskey.entities.Clip>();
+const pagination = {
+	endpoint: 'clips/notes' as const,
+	limit: 10,
+	params: computed(() => ({
+		clipId: props.clipId,
+	})),
+};
+
+const isOwned: boolean | null = $computed<boolean | null>(() => $i && clip && ($i.id === clip.userId));
+
+watch(() => props.clipId, async () => {
+	clip = await os.api('clips/show', {
+		clipId: props.clipId,
+	});
+}, {
+	immediate: true,
+}); 
+
+provide('currentClipPage', $$(clip));
+
+const headerActions = $computed(() => clip && isOwned ? [{
+	icon: 'ti ti-pencil',
+	text: i18n.ts.edit,
+	handler: async (): Promise<void> => {
+		const { canceled, result } = await os.form(clip.name, {
+			name: {
+				type: 'string',
+				label: i18n.ts.name,
+				default: clip.name,
+			},
+			description: {
+				type: 'string',
+				required: false,
+				multiline: true,
+				label: i18n.ts.description,
+				default: clip.description,
+			},
+			isPublic: {
+				type: 'boolean',
+				label: i18n.ts.public,
+				default: clip.isPublic,
+			},
+		});
+		if (canceled) return;
+
+		os.apiWithDialog('clips/update', {
+			clipId: clip.id,
+			...result,
+		});
+	},
+}, {
+	icon: 'ti ti-trash',
+	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: 'ti ti-paperclip',
+} : null));
+</script>
+
+<style lang="scss" scoped>
+.okzinsic {
+	position: relative;
+	margin-bottom: var(--margin);
+
+	> .description {
+		padding: 16px;
+	}
+
+	> .user {
+		$height: 32px;
+		padding: 16px;
+		border-top: solid 0.5px var(--divider);
+		line-height: $height;
+
+		> .avatar {
+			width: $height;
+			height: $height;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/drive.vue b/packages/frontend/src/pages/drive.vue
new file mode 100644
index 0000000000..04ade5c207
--- /dev/null
+++ b/packages/frontend/src/pages/drive.vue
@@ -0,0 +1,25 @@
+<template>
+<div>
+	<XDrive ref="drive" @cd="x => folder = x"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import XDrive from '@/components/MkDrive.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let folder = $ref(null);
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: folder ? folder.name : i18n.ts.drive,
+	icon: 'ti ti-cloud',
+	hideHeader: true,
+})));
+</script>
diff --git a/packages/frontend/src/pages/emojis.emoji.vue b/packages/frontend/src/pages/emojis.emoji.vue
new file mode 100644
index 0000000000..40fe496520
--- /dev/null
+++ b/packages/frontend/src/pages/emojis.emoji.vue
@@ -0,0 +1,72 @@
+<template>
+<button class="zuvgdzyu _button" @click="menu">
+	<img :src="emoji.url" class="img" :alt="emoji.name"/>
+	<div class="body">
+		<div class="name _monospace">{{ emoji.name }}</div>
+		<div class="info">{{ emoji.aliases.join(' ') }}</div>
+	</div>
+</button>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as os from '@/os';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	emoji: Record<string, unknown>; // TODO
+}>();
+
+function menu(ev) {
+	os.popupMenu([{
+		type: 'label',
+		text: ':' + props.emoji.name + ':',
+	}, {
+		text: i18n.ts.copy,
+		icon: 'ti ti-copy',
+		action: () => {
+			copyToClipboard(`:${props.emoji.name}:`);
+			os.success();
+		},
+	}], ev.currentTarget ?? ev.target);
+}
+</script>
+
+<style lang="scss" scoped>
+.zuvgdzyu {
+	display: flex;
+	align-items: center;
+	padding: 12px;
+	text-align: left;
+	background: var(--panel);
+	border-radius: 8px;
+
+	&:hover {
+		border-color: var(--accent);
+	}
+
+	> .img {
+		width: 42px;
+		height: 42px;
+	}
+
+	> .body {
+		padding: 0 0 0 8px;
+		white-space: nowrap;
+		overflow: hidden;
+
+		> .name {
+			text-overflow: ellipsis;
+			overflow: hidden;
+		}
+
+		> .info {
+			opacity: 0.5;
+			font-size: 0.9em;
+			text-overflow: ellipsis;
+			overflow: hidden;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/explore.featured.vue b/packages/frontend/src/pages/explore.featured.vue
new file mode 100644
index 0000000000..18a371a086
--- /dev/null
+++ b/packages/frontend/src/pages/explore.featured.vue
@@ -0,0 +1,30 @@
+<template>
+<MkSpacer :content-max="800">
+	<MkTab v-model="tab" style="margin-bottom: var(--margin);">
+		<option value="notes">{{ i18n.ts.notes }}</option>
+		<option value="polls">{{ i18n.ts.poll }}</option>
+	</MkTab>
+	<XNotes v-if="tab === 'notes'" :pagination="paginationForNotes"/>
+	<XNotes v-else-if="tab === 'polls'" :pagination="paginationForPolls"/>
+</MkSpacer>
+</template>
+
+<script lang="ts" setup>
+import XNotes from '@/components/MkNotes.vue';
+import MkTab from '@/components/MkTab.vue';
+import { i18n } from '@/i18n';
+
+const paginationForNotes = {
+	endpoint: 'notes/featured' as const,
+	limit: 10,
+	offsetMode: true,
+};
+
+const paginationForPolls = {
+	endpoint: 'notes/polls/recommendation' as const,
+	limit: 10,
+	offsetMode: true,
+};
+
+let tab = $ref('notes');
+</script>
diff --git a/packages/frontend/src/pages/explore.users.vue b/packages/frontend/src/pages/explore.users.vue
new file mode 100644
index 0000000000..bfee0a6c07
--- /dev/null
+++ b/packages/frontend/src/pages/explore.users.vue
@@ -0,0 +1,148 @@
+<template>
+<MkSpacer :content-max="1200">
+	<MkTab v-model="origin" style="margin-bottom: var(--margin);">
+		<option value="local">{{ i18n.ts.local }}</option>
+		<option value="remote">{{ i18n.ts.remote }}</option>
+	</MkTab>
+	<div v-if="origin === 'local'">
+		<template v-if="tag == null">
+			<MkFolder class="_gap" persist-key="explore-pinned-users">
+				<template #header><i class="fas fa-bookmark ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.pinnedUsers }}</template>
+				<XUserList :pagination="pinnedUsers"/>
+			</MkFolder>
+			<MkFolder class="_gap" persist-key="explore-popular-users">
+				<template #header><i class="fas fa-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
+				<XUserList :pagination="popularUsers"/>
+			</MkFolder>
+			<MkFolder class="_gap" persist-key="explore-recently-updated-users">
+				<template #header><i class="fas fa-comment-alt ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
+				<XUserList :pagination="recentlyUpdatedUsers"/>
+			</MkFolder>
+			<MkFolder class="_gap" persist-key="explore-recently-registered-users">
+				<template #header><i class="ti ti-plus ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyRegisteredUsers }}</template>
+				<XUserList :pagination="recentlyRegisteredUsers"/>
+			</MkFolder>
+		</template>
+	</div>
+	<div v-else>
+		<MkFolder ref="tagsEl" :foldable="true" :expanded="false" class="_gap">
+			<template #header><i class="ti ti-hash ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularTags }}</template>
+
+			<div class="vxjfqztj">
+				<MkA v-for="tag in tagsLocal" :key="'local:' + tag.tag" :to="`/explore/tags/${tag.tag}`" class="local">{{ tag.tag }}</MkA>
+				<MkA v-for="tag in tagsRemote" :key="'remote:' + tag.tag" :to="`/explore/tags/${tag.tag}`">{{ tag.tag }}</MkA>
+			</div>
+		</MkFolder>
+
+		<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
+			<template #header><i class="ti ti-hash ti-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
+			<XUserList :pagination="tagUsers"/>
+		</MkFolder>
+
+		<template v-if="tag == null">
+			<MkFolder class="_gap">
+				<template #header><i class="fas fa-chart-line ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.popularUsers }}</template>
+				<XUserList :pagination="popularUsersF"/>
+			</MkFolder>
+			<MkFolder class="_gap">
+				<template #header><i class="fas fa-comment-alt ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyUpdatedUsers }}</template>
+				<XUserList :pagination="recentlyUpdatedUsersF"/>
+			</MkFolder>
+			<MkFolder class="_gap">
+				<template #header><i class="fas fa-rocket ti-fw" style="margin-right: 0.5em;"></i>{{ i18n.ts.recentlyDiscoveredUsers }}</template>
+				<XUserList :pagination="recentlyRegisteredUsersF"/>
+			</MkFolder>
+		</template>
+	</div>
+</MkSpacer>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
+import XUserList from '@/components/MkUserList.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkTab from '@/components/MkTab.vue';
+import number from '@/filters/number';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+
+const props = defineProps<{
+	tag?: string;
+}>();
+
+let origin = $ref('local');
+let tagsEl = $ref<InstanceType<typeof MkFolder>>();
+let tagsLocal = $ref([]);
+let tagsRemote = $ref([]);
+
+watch(() => props.tag, () => {
+	if (tagsEl) tagsEl.toggleContent(props.tag == null);
+});
+
+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',
+} };
+
+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;
+});
+</script>
+
+<style lang="scss" scoped>
+.vxjfqztj {
+	> * {
+		margin-right: 16px;
+
+		&.local {
+			font-weight: bold;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/explore.vue b/packages/frontend/src/pages/explore.vue
new file mode 100644
index 0000000000..6b0bcdaf62
--- /dev/null
+++ b/packages/frontend/src/pages/explore.vue
@@ -0,0 +1,87 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<div class="lznhrdub">
+		<div v-if="tab === 'featured'">
+			<XFeatured/>
+		</div>
+		<div v-else-if="tab === 'users'">
+			<XUsers/>
+		</div>
+		<div v-else-if="tab === 'search'">
+			<MkSpacer :content-max="1200">
+				<div>
+					<MkInput v-model="searchQuery" :debounce="true" type="search" class="_formBlock">
+						<template #prefix><i class="ti ti-search"></i></template>
+						<template #label>{{ i18n.ts.searchUser }}</template>
+					</MkInput>
+					<MkRadios v-model="searchOrigin" class="_formBlock">
+						<option value="combined">{{ i18n.ts.all }}</option>
+						<option value="local">{{ i18n.ts.local }}</option>
+						<option value="remote">{{ i18n.ts.remote }}</option>
+					</MkRadios>
+				</div>
+
+				<XUserList v-if="searchQuery" ref="searchEl" class="_gap" :pagination="searchPagination"/>
+			</MkSpacer>
+		</div>
+	</div>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
+import XFeatured from './explore.featured.vue';
+import XUsers from './explore.users.vue';
+import MkFolder from '@/components/MkFolder.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 { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+import XUserList from '@/components/MkUserList.vue';
+
+const props = defineProps<{
+	tag?: string;
+}>();
+
+let tab = $ref('featured');
+let tagsEl = $ref<InstanceType<typeof MkFolder>>();
+let searchQuery = $ref(null);
+let searchOrigin = $ref('combined');
+
+watch(() => props.tag, () => {
+	if (tagsEl) tagsEl.toggleContent(props.tag == null);
+});
+
+const searchPagination = {
+	endpoint: 'users/search' as const,
+	limit: 10,
+	params: computed(() => (searchQuery && searchQuery !== '') ? {
+		query: searchQuery,
+		origin: searchOrigin,
+	} : null),
+};
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => [{
+	key: 'featured',
+	icon: 'ti ti-bolt',
+	title: i18n.ts.featured,
+}, {
+	key: 'users',
+	icon: 'ti ti-users',
+	title: i18n.ts.users,
+}, {
+	key: 'search',
+	title: i18n.ts.search,
+}]);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.explore,
+	icon: 'ti ti-hash',
+})));
+</script>
diff --git a/packages/frontend/src/pages/favorites.vue b/packages/frontend/src/pages/favorites.vue
new file mode 100644
index 0000000000..ab47efec71
--- /dev/null
+++ b/packages/frontend/src/pages/favorites.vue
@@ -0,0 +1,49 @@
+<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>{{ i18n.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>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MkPagination from '@/components/MkPagination.vue';
+import XNote from '@/components/MkNote.vue';
+import XList from '@/components/MkDateSeparatedList.vue';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const pagination = {
+	endpoint: 'i/favorites' as const,
+	limit: 10,
+};
+
+const pagingComponent = ref<InstanceType<typeof MkPagination>>();
+
+definePageMetadata({
+	title: i18n.ts.favorites,
+	icon: 'ti ti-star',
+});
+</script>
+
+<style lang="scss" module>
+.note {
+	background: var(--panel);
+	border-radius: var(--radius);
+}
+</style>
diff --git a/packages/frontend/src/pages/follow-requests.vue b/packages/frontend/src/pages/follow-requests.vue
new file mode 100644
index 0000000000..b20679ccc1
--- /dev/null
+++ b/packages/frontend/src/pages/follow-requests.vue
@@ -0,0 +1,153 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
+	<MkSpacer :content-max="800">
+		<MkPagination ref="paginationComponent" :pagination="pagination">
+			<template #empty>
+				<div class="_fullinfo">
+					<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+					<div>{{ i18n.ts.noFollowRequests }}</div>
+				</div>
+			</template>
+			<template #default="{items}">
+				<div class="mk-follow-requests">
+					<div v-for="req in items" :key="req.id" class="user _panel">
+						<MkAvatar class="avatar" :user="req.follower" :show-indicator="true"/>
+						<div class="body">
+							<div class="name">
+								<MkA v-user-preview="req.follower.id" class="name" :to="userPage(req.follower)"><MkUserName :user="req.follower"/></MkA>
+								<p class="acct">@{{ acct(req.follower) }}</p>
+							</div>
+							<div v-if="req.follower.description" class="description" :title="req.follower.description">
+								<Mfm :text="req.follower.description" :is-note="false" :author="req.follower" :i="$i" :custom-emojis="req.follower.emojis" :plain="true" :nowrap="true"/>
+							</div>
+							<div class="actions">
+								<button class="_button" @click="accept(req.follower)"><i class="ti ti-check"></i></button>
+								<button class="_button" @click="reject(req.follower)"><i class="ti ti-x"></i></button>
+							</div>
+						</div>
+					</div>
+				</div>
+			</template>
+		</MkPagination>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import MkPagination from '@/components/MkPagination.vue';
+import { userPage, acct } from '@/filters/user';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const paginationComponent = ref<InstanceType<typeof MkPagination>>();
+
+const pagination = {
+	endpoint: 'following/requests/list' as const,
+	limit: 10,
+};
+
+function accept(user) {
+	os.api('following/requests/accept', { userId: user.id }).then(() => {
+		paginationComponent.value.reload();
+	});
+}
+
+function reject(user) {
+	os.api('following/requests/reject', { userId: user.id }).then(() => {
+		paginationComponent.value.reload();
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.followRequests,
+	icon: 'ti ti-user-plus',
+})));
+</script>
+
+<style lang="scss" scoped>
+.mk-follow-requests {
+	> .user {
+		display: flex;
+		padding: 16px;
+
+		> .avatar {
+			display: block;
+			flex-shrink: 0;
+			margin: 0 12px 0 0;
+			width: 42px;
+			height: 42px;
+			border-radius: 8px;
+		}
+
+		> .body {
+			display: flex;
+			width: calc(100% - 54px);
+			position: relative;
+
+			> .name {
+				width: 45%;
+
+				@media (max-width: 500px) {
+					width: 100%;
+				}
+
+				> .name,
+				> .acct {
+					display: block;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					margin: 0;
+				}
+
+				> .name {
+					font-size: 16px;
+					line-height: 24px;
+				}
+
+				> .acct {
+					font-size: 15px;
+					line-height: 16px;
+					opacity: 0.7;
+				}
+			}
+
+			> .description {
+				width: 55%;
+				line-height: 42px;
+				white-space: nowrap;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				opacity: 0.7;
+				font-size: 14px;
+				padding-right: 40px;
+				padding-left: 8px;
+				box-sizing: border-box;
+
+				@media (max-width: 500px) {
+					display: none;
+				}
+			}
+
+			> .actions {
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				right: 0;
+				margin: auto 0;
+
+				> button {
+					padding: 12px;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/follow.vue b/packages/frontend/src/pages/follow.vue
new file mode 100644
index 0000000000..828246d678
--- /dev/null
+++ b/packages/frontend/src/pages/follow.vue
@@ -0,0 +1,62 @@
+<template>
+<div class="mk-follow-page">
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as Acct from 'misskey-js/built/acct';
+import * as os from '@/os';
+import { mainRouter } from '@/router';
+import { i18n } from '@/i18n';
+
+async function follow(user): Promise<void> {
+	const { canceled } = await os.confirm({
+		type: 'question',
+		text: i18n.t('followConfirm', { name: user.name || user.username }),
+	});
+
+	if (canceled) {
+		window.close();
+		return;
+	}
+	
+	os.apiWithDialog('following/create', {
+		userId: user.id,
+	});
+}
+
+const acct = new URL(location.href).searchParams.get('acct');
+if (acct == null) {
+	throw new Error('acct required');
+}
+
+let promise;
+
+if (acct.startsWith('https://')) {
+	promise = os.api('ap/show', {
+		uri: acct,
+	});
+	promise.then(res => {
+		if (res.type === 'User') {
+			follow(res.object);
+		} else if (res.type === 'Note') {
+			mainRouter.push(`/notes/${res.object.id}`);
+		} else {
+			os.alert({
+				type: 'error',
+				text: 'Not a user',
+			}).then(() => {
+				window.close();
+			});
+		}
+	});
+} else {
+	promise = os.api('users/show', Acct.parse(acct));
+	promise.then(user => {
+		follow(user);
+	});
+}
+
+os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject);
+</script>
diff --git a/packages/frontend/src/pages/gallery/edit.vue b/packages/frontend/src/pages/gallery/edit.vue
new file mode 100644
index 0000000000..c8111d7890
--- /dev/null
+++ b/packages/frontend/src/pages/gallery/edit.vue
@@ -0,0 +1,149 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="800" :margin-min="16" :margin-max="32">
+		<FormSuspense :p="init">
+			<FormInput v-model="title">
+				<template #label>{{ i18n.ts.title }}</template>
+			</FormInput>
+
+			<FormTextarea v-model="description" :max="500">
+				<template #label>{{ i18n.ts.description }}</template>
+			</FormTextarea>
+
+			<div class="">
+				<div v-for="file in files" :key="file.id" class="wqugxsfx" :style="{ backgroundImage: file ? `url(${ file.thumbnailUrl })` : null }">
+					<div class="name">{{ file.name }}</div>
+					<button v-tooltip="i18n.ts.remove" class="remove _button" @click="remove(file)"><i class="ti ti-x"></i></button>
+				</div>
+				<FormButton primary @click="selectFile"><i class="ti ti-plus"></i> {{ i18n.ts.attachFile }}</FormButton>
+			</div>
+
+			<FormSwitch v-model="isSensitive">{{ i18n.ts.markAsSensitive }}</FormSwitch>
+
+			<FormButton v-if="postId" primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</FormButton>
+			<FormButton v-else primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.publish }}</FormButton>
+
+			<FormButton v-if="postId" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</FormButton>
+		</FormSuspense>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, watch } from 'vue';
+import FormButton from '@/components/MkButton.vue';
+import FormInput from '@/components/form/input.vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import { selectFiles } from '@/scripts/select-file';
+import * as os from '@/os';
+import { useRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+
+const router = useRouter();
+
+const props = defineProps<{
+	postId?: string;
+}>();
+
+let init = $ref(null);
+let files = $ref([]);
+let description = $ref(null);
+let title = $ref(null);
+let isSensitive = $ref(false);
+
+function selectFile(evt) {
+	selectFiles(evt.currentTarget ?? evt.target, null).then(selected => {
+		files = files.concat(selected);
+	});
+}
+
+function remove(file) {
+	files = files.filter(f => f.id !== file.id);
+}
+
+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,
+		});
+		router.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,
+	});
+	router.push('/gallery');
+}
+
+watch(() => props.postId, () => {
+	init = () => props.postId ? os.api('gallery/posts/show', {
+		postId: props.postId,
+	}).then(post => {
+		files = post.files;
+		title = post.title;
+		description = post.description;
+		isSensitive = post.isSensitive;
+	}) : Promise.resolve(null);
+}, { immediate: true });
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => props.postId ? {
+	title: i18n.ts.edit,
+	icon: 'ti ti-pencil',
+} : {
+	title: i18n.ts.postToGallery,
+	icon: 'ti ti-pencil',
+}));
+</script>
+
+<style lang="scss" scoped>
+.wqugxsfx {
+	height: 200px;
+	background-size: contain;
+	background-position: center;
+	background-repeat: no-repeat;
+	position: relative;
+
+	> .name {
+		position: absolute;
+		top: 8px;
+		left: 9px;
+		padding: 8px;
+		background: var(--panel);
+	}
+
+	> .remove {
+		position: absolute;
+		top: 8px;
+		right: 9px;
+		padding: 8px;
+		background: var(--panel);
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/gallery/index.vue b/packages/frontend/src/pages/gallery/index.vue
new file mode 100644
index 0000000000..24a634bab5
--- /dev/null
+++ b/packages/frontend/src/pages/gallery/index.vue
@@ -0,0 +1,139 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="1400">
+		<div class="_root">
+			<div v-if="tab === 'explore'">
+				<MkFolder class="_gap">
+					<template #header><i class="ti ti-clock"></i>{{ i18n.ts.recentPosts }}</template>
+					<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disable-auto-load="true">
+						<div class="vfpdbgtk">
+							<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
+						</div>
+					</MkPagination>
+				</MkFolder>
+				<MkFolder class="_gap">
+					<template #header><i class="ti ti-comet"></i>{{ i18n.ts.popularPosts }}</template>
+					<MkPagination v-slot="{items}" :pagination="popularPostsPagination" :disable-auto-load="true">
+						<div class="vfpdbgtk">
+							<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
+						</div>
+					</MkPagination>
+				</MkFolder>
+			</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>
+				</MkPagination>
+			</div>
+			<div v-else-if="tab === 'my'">
+				<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="ti ti-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
+				<MkPagination v-slot="{items}" :pagination="myPostsPagination">
+					<div class="vfpdbgtk">
+						<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
+					</div>
+				</MkPagination>
+			</div>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineComponent, watch } from 'vue';
+import XUserList from '@/components/MkUserList.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkInput from '@/components/form/input.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkTab from '@/components/MkTab.vue';
+import MkPagination from '@/components/MkPagination.vue';
+import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
+import number from '@/filters/number';
+import * as os from '@/os';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+import { useRouter } from '@/router';
+
+const router = useRouter();
+
+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',
+	},
+}));
+
+watch(() => props.tag, () => {
+	if (tagsRef) tagsRef.tags.toggleContent(props.tag == null);
+});
+
+const headerActions = $computed(() => [{
+	icon: 'ti ti-plus',
+	text: i18n.ts.create,
+	handler: () => {
+		router.push('/gallery/new');
+	},
+}]);
+
+const headerTabs = $computed(() => [{
+	key: 'explore',
+	title: i18n.ts.gallery,
+	icon: 'ti ti-icons',
+}, {
+	key: 'liked',
+	title: i18n.ts._gallery.liked,
+	icon: 'ti ti-heart',
+}, {
+	key: 'my',
+	title: i18n.ts._gallery.my,
+	icon: 'ti ti-edit',
+}]);
+
+definePageMetadata({
+	title: i18n.ts.gallery,
+	icon: 'ti ti-icons',
+});
+</script>
+
+<style lang="scss" scoped>
+.vfpdbgtk {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+	grid-gap: 12px;
+	margin: 0 var(--margin);
+
+	> .post {
+
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
new file mode 100644
index 0000000000..85ab1048be
--- /dev/null
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -0,0 +1,265 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="1000" :margin-min="16" :margin-max="32">
+		<div class="_root">
+			<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
+				<div v-if="post" class="rkxwuolj">
+					<div class="files">
+						<div v-for="file in post.files" :key="file.id" class="file">
+							<img :src="file.url"/>
+						</div>
+					</div>
+					<div class="body _block">
+						<div class="title">{{ post.title }}</div>
+						<div class="description"><Mfm :text="post.description"/></div>
+						<div class="info">
+							<i class="ti ti-clock"></i> <MkTime :time="post.createdAt" mode="detail"/>
+						</div>
+						<div class="actions">
+							<div class="like">
+								<MkButton v-if="post.isLiked" v-tooltip="i18n.ts._gallery.unlike" class="button" primary @click="unlike()"><i class="ti ti-heart-off"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
+								<MkButton v-else v-tooltip="i18n.ts._gallery.like" class="button" @click="like()"><i class="ti ti-heart"></i><span v-if="post.likedCount > 0" class="count">{{ post.likedCount }}</span></MkButton>
+							</div>
+							<div class="other">
+								<button v-if="$i && $i.id === post.user.id" v-tooltip="i18n.ts.edit" v-click-anime class="_button" @click="edit"><i class="ti ti-pencil ti-fw"></i></button>
+								<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ti ti-repeat ti-fw"></i></button>
+								<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="ti ti-share ti-fw"></i></button>
+							</div>
+						</div>
+						<div class="user">
+							<MkAvatar :user="post.user" class="avatar"/>
+							<div class="name">
+								<MkUserName :user="post.user" style="display: block;"/>
+								<MkAcct :user="post.user"/>
+							</div>
+							<MkFollowButton v-if="!$i || $i.id != post.user.id" :user="post.user" :inline="true" :transparent="false" :full="true" large class="koudoku"/>
+						</div>
+					</div>
+					<MkAd :prefer="['horizontal', 'horizontal-big']"/>
+					<MkContainer :max-height="300" :foldable="true" class="other">
+						<template #header><i class="ti ti-clock"></i> {{ i18n.ts.recentPosts }}</template>
+						<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
+							<div class="sdrarzaf">
+								<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
+							</div>
+						</MkPagination>
+					</MkContainer>
+				</div>
+				<MkError v-else-if="error" @retry="fetch()"/>
+				<MkLoading v-else/>
+			</transition>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineComponent, inject, watch } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import MkContainer from '@/components/MkContainer.vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import MkPagination from '@/components/MkPagination.vue';
+import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
+import MkFollowButton from '@/components/MkFollowButton.vue';
+import { url } from '@/config';
+import { useRouter } from '@/router';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const router = useRouter();
+
+const props = defineProps<{
+	postId: string;
+}>();
+
+let post = $ref(null);
+let 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(() => [{
+	icon: 'ti ti-pencil',
+	text: i18n.ts.edit,
+	handler: edit,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => post ? {
+	title: post.title,
+	avatar: post.user,
+} : null));
+</script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
+.rkxwuolj {
+	> .files {
+		> .file {
+			> img {
+				display: block;
+				max-width: 100%;
+				max-height: 500px;
+				margin: 0 auto;
+			}
+
+			& + .file {
+				margin-top: 16px;
+			}
+		}
+	}
+
+	> .body {
+		padding: 32px;
+
+		> .title {
+			font-weight: bold;
+			font-size: 1.2em;
+			margin-bottom: 16px;
+		}
+
+		> .info {
+			margin-top: 16px;
+			font-size: 90%;
+			opacity: 0.7;
+		}
+
+		> .actions {
+			display: flex;
+			align-items: center;
+			margin-top: 16px;
+			padding: 16px 0 0 0;
+			border-top: solid 0.5px var(--divider);
+
+			> .like {
+				> .button {
+					--accent: rgb(241 97 132);
+					--X8: rgb(241 92 128);
+					--buttonBg: rgb(216 71 106 / 5%);
+					--buttonHoverBg: rgb(216 71 106 / 10%);
+					color: #ff002f;
+
+					::v-deep(.count) {
+						margin-left: 0.5em;
+					}
+				}
+			}
+
+			> .other {
+				margin-left: auto;
+
+				> button {
+					padding: 8px;
+					margin: 0 8px;
+
+					&:hover {
+						color: var(--fgHighlighted);
+					}
+				}
+			}
+		}
+
+		> .user {
+			margin-top: 16px;
+			padding: 16px 0 0 0;
+			border-top: solid 0.5px var(--divider);
+			display: flex;
+			align-items: center;
+
+			> .avatar {
+				width: 52px;
+				height: 52px;
+			}
+
+			> .name {
+				margin: 0 0 0 12px;
+				font-size: 90%;
+			}
+
+			> .koudoku {
+				margin-left: auto;
+			}
+		}
+	}
+}
+
+.sdrarzaf {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+	grid-gap: 12px;
+	margin: var(--margin);
+
+	> .post {
+
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/instance-info.vue b/packages/frontend/src/pages/instance-info.vue
new file mode 100644
index 0000000000..a2a1254360
--- /dev/null
+++ b/packages/frontend/src/pages/instance-info.vue
@@ -0,0 +1,258 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer v-if="instance" :content-max="600" :margin-min="16" :margin-max="32">
+		<div v-if="tab === 'overview'" class="_formRoot">
+			<div class="fnfelxur">
+				<img :src="faviconUrl" alt="" class="icon"/>
+				<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
+			</div>
+			<MkKeyValue :copy="host" oneline style="margin: 1em 0;">
+				<template #key>Host</template>
+				<template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0;">
+				<template #key>{{ i18n.ts.software }}</template>
+				<template #value><span class="_monospace">{{ instance.softwareName || `(${i18n.ts.unknown})` }} / {{ instance.softwareVersion || `(${i18n.ts.unknown})` }}</span></template>
+			</MkKeyValue>
+			<MkKeyValue oneline style="margin: 1em 0;">
+				<template #key>{{ i18n.ts.administrator }}</template>
+				<template #value>{{ instance.maintainerName || `(${i18n.ts.unknown})` }} ({{ instance.maintainerEmail || `(${i18n.ts.unknown})` }})</template>
+			</MkKeyValue>
+			<MkKeyValue>
+				<template #key>{{ i18n.ts.description }}</template>
+				<template #value>{{ instance.description }}</template>
+			</MkKeyValue>
+
+			<FormSection v-if="iAmModerator">
+				<template #label>Moderation</template>
+				<FormSwitch v-model="suspended" class="_formBlock" @update:model-value="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</FormSwitch>
+				<FormSwitch v-model="isBlocked" class="_formBlock" @update:model-value="toggleBlock">{{ i18n.ts.blockThisInstance }}</FormSwitch>
+				<MkButton @click="refreshMetadata"><i class="ti ti-refresh"></i> Refresh metadata</MkButton>
+			</FormSection>
+
+			<FormSection>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>{{ i18n.ts.registeredAt }}</template>
+					<template #value><MkTime mode="detail" :time="instance.caughtAt"/></template>
+				</MkKeyValue>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>{{ i18n.ts.updatedAt }}</template>
+					<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
+				</MkKeyValue>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>{{ i18n.ts.latestRequestSentAt }}</template>
+					<template #value><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></template>
+				</MkKeyValue>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>{{ i18n.ts.latestStatus }}</template>
+					<template #value>{{ instance.latestStatus ? instance.latestStatus : 'N/A' }}</template>
+				</MkKeyValue>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>{{ i18n.ts.latestRequestReceivedAt }}</template>
+					<template #value><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></template>
+				</MkKeyValue>
+			</FormSection>
+	
+			<FormSection>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>Following (Pub)</template>
+					<template #value>{{ number(instance.followingCount) }}</template>
+				</MkKeyValue>
+				<MkKeyValue oneline style="margin: 1em 0;">
+					<template #key>Followers (Sub)</template>
+					<template #value>{{ number(instance.followersCount) }}</template>
+				</MkKeyValue>
+			</FormSection>
+
+			<FormSection>
+				<template #label>Well-known resources</template>
+				<FormLink :to="`https://${host}/.well-known/host-meta`" external style="margin-bottom: 8px;">host-meta</FormLink>
+				<FormLink :to="`https://${host}/.well-known/host-meta.json`" external style="margin-bottom: 8px;">host-meta.json</FormLink>
+				<FormLink :to="`https://${host}/.well-known/nodeinfo`" external style="margin-bottom: 8px;">nodeinfo</FormLink>
+				<FormLink :to="`https://${host}/robots.txt`" external style="margin-bottom: 8px;">robots.txt</FormLink>
+				<FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink>
+			</FormSection>
+		</div>
+		<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;">
+						<option value="instance-requests">{{ i18n.ts._instanceCharts.requests }}</option>
+						<option value="instance-users">{{ i18n.ts._instanceCharts.users }}</option>
+						<option value="instance-users-total">{{ i18n.ts._instanceCharts.usersTotal }}</option>
+						<option value="instance-notes">{{ i18n.ts._instanceCharts.notes }}</option>
+						<option value="instance-notes-total">{{ i18n.ts._instanceCharts.notesTotal }}</option>
+						<option value="instance-ff">{{ i18n.ts._instanceCharts.ff }}</option>
+						<option value="instance-ff-total">{{ i18n.ts._instanceCharts.ffTotal }}</option>
+						<option value="instance-drive-usage">{{ i18n.ts._instanceCharts.cacheSize }}</option>
+						<option value="instance-drive-usage-total">{{ i18n.ts._instanceCharts.cacheSizeTotal }}</option>
+						<option value="instance-drive-files">{{ i18n.ts._instanceCharts.files }}</option>
+						<option value="instance-drive-files-total">{{ i18n.ts._instanceCharts.filesTotal }}</option>
+					</MkSelect>
+				</div>
+				<div class="charts">
+					<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div>
+					<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
+					<div class="label">{{ i18n.t('recentNDays', { n: 90 }) }}</div>
+					<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
+				</div>
+			</div>
+		</div>
+		<div v-else-if="tab === 'users'" class="_formRoot">
+			<MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;">
+				<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${new Date(user.updatedAt).toLocaleString()}`" class="user" :to="`/user-info/${user.id}`">
+					<MkUserCardMini :user="user"/>
+				</MkA>
+			</MkPagination>
+		</div>
+		<div v-else-if="tab === 'raw'" class="_formRoot">
+			<MkObjectView tall :value="instance">
+			</MkObjectView>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as misskey from 'misskey-js';
+import MkChart from '@/components/MkChart.vue';
+import MkObjectView from '@/components/MkObjectView.vue';
+import FormLink from '@/components/form/link.vue';
+import MkLink from '@/components/MkLink.vue';
+import MkButton from '@/components/MkButton.vue';
+import FormSection from '@/components/form/section.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import MkSelect from '@/components/form/select.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import * as os from '@/os';
+import number from '@/filters/number';
+import bytes from '@/filters/bytes';
+import { iAmModerator } from '@/account';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+import MkUserCardMini from '@/components/MkUserCardMini.vue';
+import MkPagination from '@/components/MkPagination.vue';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+
+const props = defineProps<{
+	host: string;
+}>();
+
+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 faviconUrl = $ref(null);
+
+const usersPagination = {
+	endpoint: iAmModerator ? 'admin/show-users' : 'users' as const,
+	limit: 10,
+	params: {
+		sort: '+updatedAt',
+		state: 'all',
+		hostname: props.host,
+	},
+	offsetMode: true,
+};
+
+async function fetch() {
+	instance = await os.api('federation/show-instance', {
+		host: props.host,
+	});
+	suspended = instance.isSuspended;
+	isBlocked = instance.isBlocked;
+	faviconUrl = getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.iconUrl, 'preview');
+}
+
+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),
+	});
+}
+
+async function toggleSuspend(v) {
+	await os.api('admin/federation/update-instance', {
+		host: instance.host,
+		isSuspended: suspended,
+	});
+}
+
+function refreshMetadata() {
+	os.api('admin/federation/refresh-remote-instance-metadata', {
+		host: instance.host,
+	});
+	os.alert({
+		text: 'Refresh requested',
+	});
+}
+
+fetch();
+
+const headerActions = $computed(() => [{
+	text: `https://${props.host}`,
+	icon: 'ti ti-external-link',
+	handler: () => {
+		window.open(`https://${props.host}`, '_blank');
+	},
+}]);
+
+const headerTabs = $computed(() => [{
+	key: 'overview',
+	title: i18n.ts.overview,
+	icon: 'ti ti-info-circle',
+}, {
+	key: 'chart',
+	title: i18n.ts.charts,
+	icon: 'ti ti-chart-line',
+}, {
+	key: 'users',
+	title: i18n.ts.users,
+	icon: 'ti ti-users',
+}, {
+	key: 'raw',
+	title: 'Raw',
+	icon: 'ti ti-code',
+}]);
+
+definePageMetadata({
+	title: props.host,
+	icon: 'ti ti-server',
+});
+</script>
+
+<style lang="scss" scoped>
+.fnfelxur {
+	display: flex;
+	align-items: center;
+
+	> .icon {
+		display: block;
+		margin: 0 16px 0 0;
+		height: 64px;
+		border-radius: 8px;
+	}
+
+	> .name {
+		word-break: break-all;
+	}
+}
+
+.cmhjzshl {
+	> .selects {
+		display: flex;
+		margin: 0 0 16px 0;
+	}
+
+	> .charts {
+		> .label {
+			margin-bottom: 12px;
+			font-weight: bold;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/messaging/index.vue b/packages/frontend/src/pages/messaging/index.vue
new file mode 100644
index 0000000000..0d30998330
--- /dev/null
+++ b/packages/frontend/src/pages/messaging/index.vue
@@ -0,0 +1,327 @@
+<template>
+<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="ti ti-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>
+					</div>
+				</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>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<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/MkButton.vue';
+import { acct } from '@/filters/user';
+import * as os from '@/os';
+import { stream } from '@/stream';
+import { useRouter } from '@/router';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { $i } from '@/account';
+
+const router = useRouter();
+
+let fetching = $ref(true);
+let moreFetching = $ref(false);
+let messages = $ref([]);
+let connection = $ref(null);
+
+const getAcct = Acct.toString;
+
+function isMe(message) {
+	return message.userId === $i.id;
+}
+
+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)));
+
+		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: 'ti ti-user',
+		action: () => { startUser(); },
+	}, {
+		text: i18n.ts.messagingWithGroup,
+		icon: 'ti ti-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: 'ti ti-messages',
+});
+</script>
+
+<style lang="scss" scoped>
+.yweeujhr {
+
+	> .start {
+		margin: 0 auto var(--margin) auto;
+	}
+
+	> .history {
+		> .message {
+			display: block;
+			text-decoration: none;
+			margin-bottom: var(--margin);
+
+			* {
+				pointer-events: none;
+				user-select: none;
+			}
+
+			&:hover {
+				.avatar {
+					filter: saturate(200%);
+				}
+			}
+
+			&:active {
+			}
+
+			&.isRead,
+			&.isMe {
+				opacity: 0.8;
+			}
+
+			&:not(.isMe):not(.isRead) {
+				> div {
+					background-image: url("/client-assets/unread.svg");
+					background-repeat: no-repeat;
+					background-position: 0 center;
+				}
+			}
+
+			&:after {
+				content: "";
+				display: block;
+				clear: both;
+			}
+
+			> div {
+				padding: 20px 30px;
+
+				&:after {
+					content: "";
+					display: block;
+					clear: both;
+				}
+
+				> header {
+					display: flex;
+					align-items: center;
+					margin-bottom: 2px;
+					white-space: nowrap;
+					overflow: hidden;
+
+					> .name {
+						margin: 0;
+						padding: 0;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						font-size: 1em;
+						font-weight: bold;
+						transition: all 0.1s ease;
+					}
+
+					> .username {
+						margin: 0 8px;
+					}
+
+					> .time {
+						margin: 0 0 0 auto;
+					}
+				}
+
+				> .avatar {
+					float: left;
+					width: 54px;
+					height: 54px;
+					margin: 0 16px 0 0;
+					border-radius: 8px;
+					transition: all 0.1s ease;
+				}
+
+				> .body {
+
+					> .text {
+						display: block;
+						margin: 0 0 0 0;
+						padding: 0;
+						overflow: hidden;
+						overflow-wrap: break-word;
+						font-size: 1.1em;
+						color: var(--faceText);
+
+						.me {
+							opacity: 0.7;
+						}
+					}
+
+					> .image {
+						display: block;
+						max-width: 100%;
+						max-height: 512px;
+					}
+				}
+			}
+		}
+	}
+
+	&.max-width_400px {
+		> .history {
+			> .message {
+				&:not(.isMe):not(.isRead) {
+					> div {
+						background-image: none;
+						border-left: solid 4px #3aa2dc;
+					}
+				}
+
+				> div {
+					padding: 16px;
+					font-size: 0.9em;
+
+					> .avatar {
+						margin: 0 12px 0 0;
+					}
+				}
+			}
+		}
+	}
+}
+
+@container (max-width: 400px) {
+	.yweeujhr {
+		> .history {
+			> .message {
+				&:not(.isMe):not(.isRead) {
+					> div {
+						background-image: none;
+						border-left: solid 4px #3aa2dc;
+					}
+				}
+
+				> div {
+					padding: 16px;
+					font-size: 0.9em;
+
+					> .avatar {
+						margin: 0 12px 0 0;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/messaging/messaging-room.form.vue b/packages/frontend/src/pages/messaging/messaging-room.form.vue
new file mode 100644
index 0000000000..84572815c0
--- /dev/null
+++ b/packages/frontend/src/pages/messaging/messaging-room.form.vue
@@ -0,0 +1,364 @@
+<template>
+<div
+	class="pemppnzi _block"
+	@dragover.stop="onDragover"
+	@drop.stop="onDrop"
+>
+	<textarea
+		ref="textEl"
+		v-model="text"
+		:placeholder="i18n.ts.inputMessageHere"
+		@keydown="onKeydown"
+		@compositionupdate="onCompositionUpdate"
+		@paste="onPaste"
+	></textarea>
+	<footer>
+		<div v-if="file" class="file" @click="file = null">{{ file.name }}</div>
+		<div class="buttons">
+			<button class="_button" @click="chooseFile"><i class="ti ti-photo-plus"></i></button>
+			<button class="_button" @click="insertEmoji"><i class="ti ti-mood-happy"></i></button>
+			<button class="send _button" :disabled="!canSend || sending" :title="i18n.ts.send" @click="send">
+				<template v-if="!sending"><i class="ti ti-send"></i></template><template v-if="sending"><MkLoading :em="true"/></template>
+			</button>
+		</div>
+	</footer>
+	<input ref="fileEl" type="file" @change="onChangeFile"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, watch } from 'vue';
+import * as Misskey from '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 { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+//import { Autocomplete } from '@/scripts/autocomplete';
+import { uploadFile } from '@/scripts/upload';
+
+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);
+		}
+	} else {
+		if (items[0].kind === 'file') {
+			os.alert({
+				type: 'error',
+				text: i18n.ts.onlyOneFileCanBeAttached,
+			});
+		}
+	}
+}
+
+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();
+		switch (ev.dataTransfer.effectAllowed) {
+			case 'all':
+			case 'uninitialized':
+			case 'copy': 
+			case 'copyLink': 
+			case 'copyMove': 
+				ev.dataTransfer.dropEffect = 'copy';
+				break;
+			case 'linkMove':
+			case 'move':
+				ev.dataTransfer.dropEffect = 'move';
+				break;
+			default:
+				ev.dataTransfer.dropEffect = 'none';
+				break;
+		}
+	}
+}
+
+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>
+
+<style lang="scss" scoped>
+.pemppnzi {
+	position: relative;
+
+	> textarea {
+		cursor: auto;
+		display: block;
+		width: 100%;
+		min-width: 100%;
+		max-width: 100%;
+		min-height: 80px;
+		margin: 0;
+		padding: 16px 16px 0 16px;
+		resize: none;
+		font-size: 1em;
+		font-family: inherit;
+		outline: none;
+		border: none;
+		border-radius: 0;
+		box-shadow: none;
+		background: transparent;
+		box-sizing: border-box;
+		color: var(--fg);
+	}
+
+	footer {
+		position: sticky;
+		bottom: 0;
+		background: var(--panel);
+
+		> .file {
+			padding: 8px;
+			color: var(--fg);
+			background: transparent;
+			cursor: pointer;
+		}
+	}
+
+	.files {
+		display: block;
+		margin: 0;
+		padding: 0 8px;
+		list-style: none;
+
+		&:after {
+			content: '';
+			display: block;
+			clear: both;
+		}
+
+		> li {
+			display: block;
+			float: left;
+			margin: 4px;
+			padding: 0;
+			width: 64px;
+			height: 64px;
+			background-color: #eee;
+			background-repeat: no-repeat;
+			background-position: center center;
+			background-size: cover;
+			cursor: move;
+
+			&:hover {
+				> .remove {
+					display: block;
+				}
+			}
+
+			> .remove {
+				display: none;
+				position: absolute;
+				right: -6px;
+				top: -6px;
+				margin: 0;
+				padding: 0;
+				background: transparent;
+				outline: none;
+				border: none;
+				border-radius: 0;
+				box-shadow: none;
+				cursor: pointer;
+			}
+		}
+	}
+
+	.buttons {
+		display: flex;
+
+		._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;
+			}
+		}
+
+		> .send {
+			margin-left: auto;
+			color: var(--accent);
+
+			&:hover {
+				color: var(--accentLighten);
+			}
+
+			&:active {
+				color: var(--accentDarken);
+				transition: color 0s ease;
+			}
+		}
+	}
+
+	input[type=file] {
+		display: none;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/messaging/messaging-room.message.vue b/packages/frontend/src/pages/messaging/messaging-room.message.vue
new file mode 100644
index 0000000000..dbf0e37b73
--- /dev/null
+++ b/packages/frontend/src/pages/messaging/messaging-room.message.vue
@@ -0,0 +1,367 @@
+<template>
+<div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
+	<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
+	<div class="content">
+		<div class="balloon" :class="{ noText: message.text == null }">
+			<button v-if="isMe" class="delete-button" :title="$ts.delete" @click="del">
+				<img src="/client-assets/remove.png" alt="Delete"/>
+			</button>
+			<div v-if="!message.isDeleted" class="content">
+				<Mfm v-if="message.text" ref="text" class="text" :text="message.text" :i="$i"/>
+				<div v-if="message.file" class="file">
+					<a :href="message.file.url" rel="noopener" target="_blank" :title="message.file.name">
+						<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"/>
+						<p v-else>{{ message.file.name }}</p>
+					</a>
+				</div>
+			</div>
+			<div v-else class="content">
+				<p class="is-deleted">{{ $ts.deleted }}</p>
+			</div>
+		</div>
+		<div></div>
+		<MkUrlPreview v-for="url in urls" :key="url" :url="url" style="margin: 8px 0;"/>
+		<footer>
+			<template v-if="isGroup">
+				<span v-if="message.reads.length > 0" class="read">{{ $ts.messageRead }} {{ message.reads.length }}</span>
+			</template>
+			<template v-else>
+				<span v-if="isMe && message.isRead" class="read">{{ $ts.messageRead }}</span>
+			</template>
+			<MkTime :time="message.createdAt"/>
+			<template v-if="message.is_edited"><i class="ti ti-pencil"></i></template>
+		</footer>
+	</div>
+</div>
+</template>
+
+<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/MkUrlPreview.vue';
+import * as os from '@/os';
+import { $i } from '@/account';
+
+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>
+.thvuemwp {
+	$me-balloon-color: var(--accent);
+
+	position: relative;
+	background-color: transparent;
+	display: flex;
+
+	> .avatar {
+		position: sticky;
+		top: calc(var(--stickyTop, 0px) + 16px);
+		display: block;
+		width: 54px;
+		height: 54px;
+		transition: all 0.1s ease;
+	}
+
+	> .content {
+		min-width: 0;
+
+		> .balloon {
+			position: relative;
+			display: inline-flex;
+			align-items: center;
+			padding: 0;
+			min-height: 38px;
+			border-radius: 16px;
+			max-width: 100%;
+
+			&:before {
+				content: "";
+				pointer-events: none;
+				display: block;
+				position: absolute;
+				top: 12px;
+			}
+
+			& + * {
+				clear: both;
+			}
+
+			&:hover {
+				> .delete-button {
+					display: block;
+				}
+			}
+
+			> .delete-button {
+				display: none;
+				position: absolute;
+				z-index: 1;
+				top: -4px;
+				right: -4px;
+				margin: 0;
+				padding: 0;
+				cursor: pointer;
+				outline: none;
+				border: none;
+				border-radius: 0;
+				box-shadow: none;
+				background: transparent;
+
+				> img {
+					vertical-align: bottom;
+					width: 16px;
+					height: 16px;
+					cursor: pointer;
+				}
+			}
+
+			> .content {
+				max-width: 100%;
+
+				> .is-deleted {
+					display: block;
+					margin: 0;
+					padding: 0;
+					overflow: hidden;
+					overflow-wrap: break-word;
+					font-size: 1em;
+					color: rgba(#000, 0.5);
+				}
+
+				> .text {
+					display: block;
+					margin: 0;
+					padding: 12px 18px;
+					overflow: hidden;
+					overflow-wrap: break-word;
+					word-break: break-word;
+					font-size: 1em;
+					color: rgba(#000, 0.8);
+
+					& + .file {
+						> a {
+							border-radius: 0 0 16px 16px;
+						}
+					}
+				}
+
+				> .file {
+					> a {
+						display: block;
+						max-width: 100%;
+						border-radius: 16px;
+						overflow: hidden;
+						text-decoration: none;
+
+						&:hover {
+							text-decoration: none;
+
+							> p {
+								background: #ccc;
+							}
+						}
+
+						> * {
+							display: block;
+							margin: 0;
+							width: 100%;
+							max-height: 512px;
+							object-fit: contain;
+							box-sizing: border-box;
+						}
+
+						> p {
+							padding: 30px;
+							text-align: center;
+							color: #555;
+							background: #ddd;
+						}
+					}
+				}
+			}
+		}
+
+		> footer {
+			display: block;
+			margin: 2px 0 0 0;
+			font-size: 0.65em;
+
+			> .read {
+				margin: 0 8px;
+			}
+
+			> i {
+				margin-left: 4px;
+			}
+		}
+	}
+
+	&:not(.isMe) {
+		padding-left: var(--margin);
+
+		> .content {
+			padding-left: 16px;
+			padding-right: 32px;
+
+			> .balloon {
+				$color: var(--messageBg);
+				background: $color;
+
+				&.noText {
+					background: transparent;
+				}
+
+				&:not(.noText):before {
+					left: -14px;
+					border-top: solid 8px transparent;
+					border-right: solid 8px $color;
+					border-bottom: solid 8px transparent;
+					border-left: solid 8px transparent;
+				}
+
+				> .content {
+					> .text {
+						color: var(--fg);
+					}
+				}
+			}
+
+			> footer {
+				text-align: left;
+			}
+		}
+	}
+
+	&.isMe {
+		flex-direction: row-reverse;
+		padding-right: var(--margin);
+		right: var(--margin); // 削除時にposition: absoluteになったときに使う
+
+		> .content {
+			padding-right: 16px;
+			padding-left: 32px;
+			text-align: right;
+
+			> .balloon {
+				background: $me-balloon-color;
+				text-align: left;
+
+				::selection {
+					color: var(--accent);
+					background-color: #fff;
+				} 
+
+				&.noText {
+					background: transparent;
+				}
+
+				&:not(.noText):before {
+					right: -14px;
+					left: auto;
+					border-top: solid 8px transparent;
+					border-right: solid 8px transparent;
+					border-bottom: solid 8px transparent;
+					border-left: solid 8px $me-balloon-color;
+				}
+
+				> .content {
+
+					> p.is-deleted {
+						color: rgba(#fff, 0.5);
+					}
+
+					> .text {
+						&, ::v-deep(*) {
+							color: var(--fgOnAccent) !important;
+						}
+					}
+				}
+			}
+
+			> footer {
+				text-align: right;
+
+				> .read {
+					user-select: none;
+				}
+			}
+		}
+	}
+
+	&.max-width_400px {
+		> .avatar {
+			width: 48px;
+			height: 48px;
+		}
+
+		> .content {
+			> .balloon {
+				> .content {
+					> .text {
+						font-size: 0.9em;
+					}
+				}
+			}
+		}
+	}
+
+	&.max-width_500px {
+		> .content {
+			> .balloon {
+				> .content {
+					> .text {
+						padding: 8px 16px;
+					}
+				}
+			}
+		}
+	}
+}
+
+@container (max-width: 400px) {
+	.thvuemwp {
+		> .avatar {
+			width: 48px;
+			height: 48px;
+		}
+
+		> .content {
+			> .balloon {
+				> .content {
+					> .text {
+						font-size: 0.9em;
+					}
+				}
+			}
+		}
+	}
+}
+
+@container (max-width: 500px) {
+	.thvuemwp {
+		> .content {
+			> .balloon {
+				> .content {
+					> .text {
+						padding: 8px 16px;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/messaging/messaging-room.vue b/packages/frontend/src/pages/messaging/messaging-room.vue
new file mode 100644
index 0000000000..b6eeb9260e
--- /dev/null
+++ b/packages/frontend/src/pages/messaging/messaging-room.vue
@@ -0,0 +1,411 @@
+<template>
+<div
+	ref="rootEl"
+	class="_section"
+	@dragover.prevent.stop="onDragover"
+	@drop.prevent.stop="onDrop"
+>
+	<div class="_content mk-messaging-room">
+		<div class="body">
+			<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="i18n.ts.typingUsers" text-tag="span" class="users">
+					<template #users>
+						<b v-for="typer in typers" :key="typer.id" class="user">{{ typer.username }}</b>
+					</template>
+				</I18n>
+				<MkEllipsis/>
+			</div>
+			<transition :name="animation ? 'fade' : ''">
+				<div v-show="showIndicator" class="new-message">
+					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas ti-fw fa-arrow-circle-down"></i>{{ i18n.ts.newMessageExists }}</button>
+				</div>
+			</transition>
+			<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" class="form"/>
+		</footer>
+	</div>
+</div>
+</template>
+
+<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 XList from '@/components/MkDateSeparatedList.vue';
+import MkPagination, { Paging } from '@/components/MkPagination.vue';
+import { isBottomVisible, onScrollBottom, scrollToBottom } from '@/scripts/scroll';
+import * as os from '@/os';
+import { stream } from '@/stream';
+import * as sound from '@/scripts/sound';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
+import { defaultStore } from '@/store';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const props = defineProps<{
+	userAcct?: string;
+	groupId?: string;
+}>();
+
+let rootEl = $ref<HTMLDivElement>();
+let formEl = $ref<InstanceType<typeof XForm>>();
+let pagingComponent = $ref<InstanceType<typeof MkPagination>>();
+
+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;
+
+let pagination: Paging | null = $ref(null);
+
+watch([() => props.userAcct, () => props.groupId], () => {
+	if (connection) connection.dispose();
+	fetch();
+});
+
+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) {
+		switch (ev.dataTransfer.effectAllowed) {
+			case 'all':
+			case 'uninitialized':
+			case 'copy': 
+			case 'copyLink': 
+			case 'copyMove': 
+				ev.dataTransfer.dropEffect = 'copy';
+				break;
+			case 'linkMove':
+			case 'move':
+				ev.dataTransfer.dropEffect = 'move';
+				break;
+			default:
+				ev.dataTransfer.dropEffect = 'none';
+				break;
+		}
+	} 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();
+});
+
+definePageMetadata(computed(() => !fetching ? user ? {
+	userName: user,
+	avatar: user,
+} : {
+	title: group?.name,
+	icon: 'ti ti-users',
+} : null));
+</script>
+
+<style lang="scss" scoped>
+.mk-messaging-room {
+	position: relative;
+	overflow: auto;
+
+	> .body {
+		.more {
+			display: block;
+			margin: 16px auto;
+			padding: 0 12px;
+			line-height: 24px;
+			color: #fff;
+			background: rgba(#000, 0.3);
+			border-radius: 12px;
+
+			&:hover {
+				background: rgba(#000, 0.4);
+			}
+
+			&:active {
+				background: rgba(#000, 0.5);
+			}
+
+			&.fetching {
+				cursor: wait;
+			}
+
+			> i {
+				margin-right: 4px;
+			}
+		}
+
+		.messages {
+			padding: 8px 0;
+
+			> ::v-deep(*) {
+				margin-bottom: 16px;
+			}
+		}
+	}
+
+	> footer {
+		width: 100%;
+		position: sticky;
+		z-index: 2;
+		bottom: 0;
+		padding-top: 8px;
+		bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
+
+		> .new-message {
+			width: 100%;
+			padding-bottom: 8px;
+			text-align: center;
+
+			> button {
+				display: inline-block;
+				margin: 0;
+				padding: 0 12px;
+				line-height: 32px;
+				font-size: 12px;
+				border-radius: 16px;
+
+				> i {
+					display: inline-block;
+					margin-right: 8px;
+				}
+			}
+		}
+
+		> .typers {
+			position: absolute;
+			bottom: 100%;
+			padding: 0 8px 0 8px;
+			font-size: 0.9em;
+			color: var(--fgTransparentWeak);
+
+			> .users {
+				> .user + .user:before {
+					content: ", ";
+					font-weight: normal;
+				}
+
+				> .user:last-of-type:after {
+					content: " ";
+				}
+			}
+		}
+
+		> .form {
+			max-height: 12em;
+			overflow-y: scroll;
+			border-top: solid 0.5px var(--divider);
+		}
+	}
+}
+
+.fade-enter-active, .fade-leave-active {
+	transition: opacity 0.1s;
+}
+
+.fade-enter-from, .fade-leave-to {
+	transition: opacity 0.5s;
+	opacity: 0;
+}
+</style>
diff --git a/packages/frontend/src/pages/mfm-cheat-sheet.vue b/packages/frontend/src/pages/mfm-cheat-sheet.vue
new file mode 100644
index 0000000000..7c85dfb7ad
--- /dev/null
+++ b/packages/frontend/src/pages/mfm-cheat-sheet.vue
@@ -0,0 +1,387 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader/></template>
+	<MkSpacer :content-max="800">
+		<div class="mwysmxbg">
+			<div>{{ i18n.ts._mfm.intro }}</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.mention }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.mentionDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_mention"/>
+						<MkTextarea v-model="preview_mention"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.hashtag }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.hashtagDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_hashtag"/>
+						<MkTextarea v-model="preview_hashtag"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.url }}</div>
+				<div class="content">
+					<p>{{ i18n.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 class="section _block">
+				<div class="title">{{ i18n.ts._mfm.link }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.linkDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_link"/>
+						<MkTextarea v-model="preview_link"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.emoji }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.emojiDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_emoji"/>
+						<MkTextarea v-model="preview_emoji"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.bold }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.boldDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_bold"/>
+						<MkTextarea v-model="preview_bold"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.small }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.smallDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_small"/>
+						<MkTextarea v-model="preview_small"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.quote }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.quoteDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_quote"/>
+						<MkTextarea v-model="preview_quote"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.center }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.centerDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_center"/>
+						<MkTextarea v-model="preview_center"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.inlineCode }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.inlineCodeDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_inlineCode"/>
+						<MkTextarea v-model="preview_inlineCode"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.blockCode }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.blockCodeDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_blockCode"/>
+						<MkTextarea v-model="preview_blockCode"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.inlineMath }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.inlineMathDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_inlineMath"/>
+						<MkTextarea v-model="preview_inlineMath"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<!-- deprecated
+		<div class="section _block">
+			<div class="title">{{ i18n.ts._mfm.search }}</div>
+			<div class="content">
+				<p>{{ i18n.ts._mfm.searchDescription }}</p>
+				<div class="preview">
+					<Mfm :text="preview_search"/>
+					<MkTextarea v-model="preview_search"><template #label>MFM</template></MkTextarea>
+				</div>
+			</div>
+		</div>
+		-->
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.flip }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.flipDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_flip"/>
+						<MkTextarea v-model="preview_flip"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.font }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.fontDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_font"/>
+						<MkTextarea v-model="preview_font"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.x2 }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.x2Description }}</p>
+					<div class="preview">
+						<Mfm :text="preview_x2"/>
+						<MkTextarea v-model="preview_x2"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.x3 }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.x3Description }}</p>
+					<div class="preview">
+						<Mfm :text="preview_x3"/>
+						<MkTextarea v-model="preview_x3"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.x4 }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.x4Description }}</p>
+					<div class="preview">
+						<Mfm :text="preview_x4"/>
+						<MkTextarea v-model="preview_x4"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.blur }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.blurDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_blur"/>
+						<MkTextarea v-model="preview_blur"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.jelly }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.jellyDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_jelly"/>
+						<MkTextarea v-model="preview_jelly"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.tada }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.tadaDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_tada"/>
+						<MkTextarea v-model="preview_tada"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.jump }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.jumpDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_jump"/>
+						<MkTextarea v-model="preview_jump"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.bounce }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.bounceDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_bounce"/>
+						<MkTextarea v-model="preview_bounce"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.spin }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.spinDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_spin"/>
+						<MkTextarea v-model="preview_spin"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.shake }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.shakeDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_shake"/>
+						<MkTextarea v-model="preview_shake"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.twitch }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.twitchDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_twitch"/>
+						<MkTextarea v-model="preview_twitch"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.rainbow }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.rainbowDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_rainbow"/>
+						<MkTextarea v-model="preview_rainbow"><template #label>MFM</template></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.sparkle }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.sparkleDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_sparkle"/>
+						<MkTextarea v-model="preview_sparkle"><span>MFM</span></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.rotate }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.rotateDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_rotate"/>
+						<MkTextarea v-model="preview_rotate"><span>MFM</span></MkTextarea>
+					</div>
+				</div>
+			</div>
+			<div class="section _block">
+				<div class="title">{{ i18n.ts._mfm.plain }}</div>
+				<div class="content">
+					<p>{{ i18n.ts._mfm.plainDescription }}</p>
+					<div class="preview">
+						<Mfm :text="preview_plain"/>
+						<MkTextarea v-model="preview_plain"><span>MFM</span></MkTextarea>
+					</div>
+				</div>
+			</div>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { defineComponent } from 'vue';
+import MkTextarea from '@/components/form/textarea.vue';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+
+let preview_mention = $ref('@example');
+let preview_hashtag = $ref('#test');
+let preview_url = $ref('https://example.com');
+let preview_link = $ref(`[${i18n.ts._mfm.dummy}](https://example.com)`);
+let preview_emoji = $ref(instance.emojis.length ? `:${instance.emojis[0].name}:` : ':emojiname:');
+let preview_bold = $ref(`**${i18n.ts._mfm.dummy}**`);
+let preview_small = $ref(`<small>${i18n.ts._mfm.dummy}</small>`);
+let preview_center = $ref(`<center>${i18n.ts._mfm.dummy}</center>`);
+let preview_inlineCode = $ref('`<: "Hello, world!"`');
+let preview_blockCode = $ref('```\n~ (#i, 100) {\n\t<: ? ((i % 15) = 0) "FizzBuzz"\n\t\t.? ((i % 3) = 0) "Fizz"\n\t\t.? ((i % 5) = 0) "Buzz"\n\t\t. i\n}\n```');
+let preview_inlineMath = $ref('\\(x= \\frac{-b\' \\pm \\sqrt{(b\')^2-ac}}{a}\\)');
+let preview_quote = $ref(`> ${i18n.ts._mfm.dummy}`);
+let preview_search = $ref(`${i18n.ts._mfm.dummy} 検索`);
+let preview_jelly = $ref('$[jelly 🍮] $[jelly.speed=5s 🍮]');
+let preview_tada = $ref('$[tada 🍮] $[tada.speed=5s 🍮]');
+let preview_jump = $ref('$[jump 🍮] $[jump.speed=5s 🍮]');
+let preview_bounce = $ref('$[bounce 🍮] $[bounce.speed=5s 🍮]');
+let preview_shake = $ref('$[shake 🍮] $[shake.speed=5s 🍮]');
+let preview_twitch = $ref('$[twitch 🍮] $[twitch.speed=5s 🍮]');
+let preview_spin = $ref('$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]\n\n$[spin.speed=5s 🍮]');
+let preview_flip = $ref(`$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${i18n.ts._mfm.dummy}]`);
+let preview_font = $ref(`$[font.serif ${i18n.ts._mfm.dummy}]\n$[font.monospace ${i18n.ts._mfm.dummy}]\n$[font.cursive ${i18n.ts._mfm.dummy}]\n$[font.fantasy ${i18n.ts._mfm.dummy}]`);
+let preview_x2 = $ref('$[x2 🍮]');
+let preview_x3 = $ref('$[x3 🍮]');
+let preview_x4 = $ref('$[x4 🍮]');
+let preview_blur = $ref(`$[blur ${i18n.ts._mfm.dummy}]`);
+let preview_rainbow = $ref('$[rainbow 🍮] $[rainbow.speed=5s 🍮]');
+let preview_sparkle = $ref('$[sparkle 🍮]');
+let preview_rotate = $ref('$[rotate 🍮]');
+let preview_plain = $ref('<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>');
+
+definePageMetadata({
+	title: i18n.ts._mfm.cheatSheet,
+	icon: 'ti ti-question-circle',
+});
+</script>
+
+<style lang="scss" scoped>
+.mwysmxbg {
+	background: var(--bg);
+
+	> .section {
+		> .title {
+			position: sticky;
+			z-index: 1;
+			top: var(--stickyTop, 0px);
+			padding: 16px;
+			font-weight: bold;
+			-webkit-backdrop-filter: var(--blur, blur(10px));
+			backdrop-filter: var(--blur, blur(10px));
+			background-color: var(--X16);
+		}
+
+		> .content {
+			> p {
+				margin: 0;
+				padding: 16px;
+			}
+
+			> .preview {
+				border-top: solid 0.5px var(--divider);
+				padding: 16px;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/miauth.vue b/packages/frontend/src/pages/miauth.vue
new file mode 100644
index 0000000000..5de072cbfa
--- /dev/null
+++ b/packages/frontend/src/pages/miauth.vue
@@ -0,0 +1,90 @@
+<template>
+<MkSpacer :content-max="800">
+	<div v-if="$i">
+		<div v-if="state == 'waiting'" class="waiting _section">
+			<div class="_content">
+				<MkLoading/>
+			</div>
+		</div>
+		<div v-if="state == 'denied'" class="denied _section">
+			<div class="_content">
+				<p>{{ i18n.ts._auth.denied }}</p>
+			</div>
+		</div>
+		<div v-else-if="state == 'accepted'" class="accepted _section">
+			<div class="_content">
+				<p v-if="callback">{{ i18n.ts._auth.callback }}<MkEllipsis/></p>
+				<p v-else>{{ i18n.ts._auth.pleaseGoBack }}</p>
+			</div>
+		</div>
+		<div v-else class="_section">
+			<div v-if="name" class="_title">{{ $t('_auth.shareAccess', { name: name }) }}</div>
+			<div v-else class="_title">{{ i18n.ts._auth.shareAccessAsk }}</div>
+			<div class="_content">
+				<p>{{ i18n.ts._auth.permissionAsk }}</p>
+				<ul>
+					<li v-for="p in _permissions" :key="p">{{ $t(`_permissions.${p}`) }}</li>
+				</ul>
+			</div>
+			<div class="_footer">
+				<MkButton inline @click="deny">{{ i18n.ts.cancel }}</MkButton>
+				<MkButton inline primary @click="accept">{{ i18n.ts.accept }}</MkButton>
+			</div>
+		</div>
+	</div>
+	<div v-else class="signin">
+		<MkSignin @login="onLogin"/>
+	</div>
+</MkSpacer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkSignin from '@/components/MkSignin.vue';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { $i, login } from '@/account';
+import { appendQuery, query } from '@/scripts/url';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	session: string;
+	callback?: string;
+	name: string;
+	icon: string;
+	permission: string; // コンマ区切り
+}>();
+
+const _permissions = props.permission.split(',');
+
+let state = $ref<string | null>(null);
+
+async function accept(): Promise<void> {
+	state = 'waiting';
+	await os.api('miauth/gen-token', {
+		session: props.session,
+		name: props.name,
+		iconUrl: props.icon,
+		permission: _permissions,
+	});
+
+	state = 'accepted';
+	if (props.callback) {
+		location.href = appendQuery(props.callback, query({
+			session: props.session,
+		}));
+	}
+}
+
+function deny(): void {
+	state = 'denied';
+}
+
+function onLogin(res): void {
+	login(res.i);
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/frontend/src/pages/my-antennas/create.vue b/packages/frontend/src/pages/my-antennas/create.vue
new file mode 100644
index 0000000000..005b036696
--- /dev/null
+++ b/packages/frontend/src/pages/my-antennas/create.vue
@@ -0,0 +1,46 @@
+<template>
+<div class="geegznzt">
+	<XAntenna :antenna="draft" @created="onAntennaCreated"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue';
+import XAntenna from './editor.vue';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { useRouter } from '@/router';
+
+const router = useRouter();
+
+let draft = $ref({
+	name: '',
+	src: 'all',
+	userListId: null,
+	userGroupId: null,
+	users: [],
+	keywords: [],
+	excludeKeywords: [],
+	withReplies: false,
+	caseSensitive: false,
+	withFile: false,
+	notify: false,
+});
+
+function onAntennaCreated() {
+	router.push('/my/antennas');
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.manageAntennas,
+	icon: 'ti ti-antenna',
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/frontend/src/pages/my-antennas/edit.vue b/packages/frontend/src/pages/my-antennas/edit.vue
new file mode 100644
index 0000000000..cb583faaeb
--- /dev/null
+++ b/packages/frontend/src/pages/my-antennas/edit.vue
@@ -0,0 +1,43 @@
+<template>
+<div class="">
+	<XAntenna v-if="antenna" :antenna="antenna" @updated="onAntennaUpdated"/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { inject, watch } from 'vue';
+import XAntenna from './editor.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { useRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const router = useRouter();
+
+let antenna: any = $ref(null);
+
+const props = defineProps<{
+	antennaId: string
+}>();
+
+function onAntennaUpdated() {
+	router.push('/my/antennas');
+}
+
+os.api('antennas/show', { antennaId: props.antennaId }).then((antennaResponse) => {
+	antenna = antennaResponse;
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.manageAntennas,
+	icon: 'ti ti-antenna',
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/frontend/src/pages/my-antennas/editor.vue b/packages/frontend/src/pages/my-antennas/editor.vue
new file mode 100644
index 0000000000..a409a734b5
--- /dev/null
+++ b/packages/frontend/src/pages/my-antennas/editor.vue
@@ -0,0 +1,155 @@
+<template>
+<div class="shaynizk">
+	<div class="form">
+		<MkInput v-model="name" class="_formBlock">
+			<template #label>{{ i18n.ts.name }}</template>
+		</MkInput>
+		<MkSelect v-model="src" class="_formBlock">
+			<template #label>{{ i18n.ts.antennaSource }}</template>
+			<option value="all">{{ i18n.ts._antennaSources.all }}</option>
+			<!--<option value="home">{{ i18n.ts._antennaSources.homeTimeline }}</option>-->
+			<option value="users">{{ i18n.ts._antennaSources.users }}</option>
+			<!--<option value="list">{{ i18n.ts._antennaSources.userList }}</option>-->
+			<!--<option value="group">{{ i18n.ts._antennaSources.userGroup }}</option>-->
+		</MkSelect>
+		<MkSelect v-if="src === 'list'" v-model="userListId" class="_formBlock">
+			<template #label>{{ i18n.ts.userList }}</template>
+			<option v-for="list in userLists" :key="list.id" :value="list.id">{{ list.name }}</option>
+		</MkSelect>
+		<MkSelect v-else-if="src === 'group'" v-model="userGroupId" class="_formBlock">
+			<template #label>{{ i18n.ts.userGroup }}</template>
+			<option v-for="group in userGroups" :key="group.id" :value="group.id">{{ group.name }}</option>
+		</MkSelect>
+		<MkTextarea v-else-if="src === 'users'" v-model="users" class="_formBlock">
+			<template #label>{{ i18n.ts.users }}</template>
+			<template #caption>{{ i18n.ts.antennaUsersDescription }} <button class="_textButton" @click="addUser">{{ i18n.ts.addUser }}</button></template>
+		</MkTextarea>
+		<MkSwitch v-model="withReplies" class="_formBlock">{{ i18n.ts.withReplies }}</MkSwitch>
+		<MkTextarea v-model="keywords" class="_formBlock">
+			<template #label>{{ i18n.ts.antennaKeywords }}</template>
+			<template #caption>{{ i18n.ts.antennaKeywordsDescription }}</template>
+		</MkTextarea>
+		<MkTextarea v-model="excludeKeywords" class="_formBlock">
+			<template #label>{{ i18n.ts.antennaExcludeKeywords }}</template>
+			<template #caption>{{ i18n.ts.antennaKeywordsDescription }}</template>
+		</MkTextarea>
+		<MkSwitch v-model="caseSensitive" class="_formBlock">{{ i18n.ts.caseSensitive }}</MkSwitch>
+		<MkSwitch v-model="withFile" class="_formBlock">{{ i18n.ts.withFileAntenna }}</MkSwitch>
+		<MkSwitch v-model="notify" class="_formBlock">{{ i18n.ts.notifyAntenna }}</MkSwitch>
+	</div>
+	<div class="actions">
+		<MkButton inline primary @click="saveAntenna()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+		<MkButton v-if="antenna.id != null" inline danger @click="deleteAntenna()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { watch } from 'vue';
+import * as Acct from 'misskey-js/built/acct';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/form/input.vue';
+import MkTextarea from '@/components/form/textarea.vue';
+import MkSelect from '@/components/form/select.vue';
+import MkSwitch from '@/components/form/switch.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	antenna: any
+}>();
+
+const emit = defineEmits<{
+	(ev: 'created'): void,
+	(ev: 'updated'): void,
+	(ev: 'deleted'): void,
+}>();
+
+let name: string = $ref(props.antenna.name);
+let src: string = $ref(props.antenna.src);
+let userListId: any = $ref(props.antenna.userListId);
+let userGroupId: any = $ref(props.antenna.userGroupId);
+let users: string = $ref(props.antenna.users.join('\n'));
+let keywords: string = $ref(props.antenna.keywords.map(x => x.join(' ')).join('\n'));
+let excludeKeywords: string = $ref(props.antenna.excludeKeywords.map(x => x.join(' ')).join('\n'));
+let caseSensitive: boolean = $ref(props.antenna.caseSensitive);
+let withReplies: boolean = $ref(props.antenna.withReplies);
+let withFile: boolean = $ref(props.antenna.withFile);
+let notify: boolean = $ref(props.antenna.notify);
+let userLists: any = $ref(null);
+let userGroups: any = $ref(null);
+
+watch(() => src, async () => {
+	if (src === 'list' && userLists === null) {
+		userLists = await os.api('users/lists/list');
+	}
+
+	if (src === 'group' && userGroups === null) {
+		const groups1 = await os.api('users/groups/owned');
+		const groups2 = await os.api('users/groups/joined');
+
+		userGroups = [...groups1, ...groups2];
+	}
+});
+
+async function saveAntenna() {
+	const antennaData = {
+		name,
+		src,
+		userListId,
+		userGroupId,
+		withReplies,
+		withFile,
+		notify,
+		caseSensitive,
+		users: users.trim().split('\n').map(x => x.trim()),
+		keywords: keywords.trim().split('\n').map(x => x.trim().split(' ')),
+		excludeKeywords: excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')),
+	};
+
+	if (props.antenna.id == null) {
+		await os.apiWithDialog('antennas/create', antennaData);
+		emit('created');
+	} else {
+		antennaData['antennaId'] = props.antenna.id;
+		await os.apiWithDialog('antennas/update', antennaData);
+		emit('updated');
+	}
+}
+
+async function deleteAntenna() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.t('removeAreYouSure', { x: props.antenna.name }),
+	});
+	if (canceled) return;
+
+	await os.api('antennas/delete', {
+		antennaId: props.antenna.id,
+	});
+
+	os.success();
+	emit('deleted');
+}
+
+function addUser() {
+	os.selectUser().then(user => {
+		users = users.trim();
+		users += '\n@' + Acct.toString(user as any);
+		users = users.trim();
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.shaynizk {
+	> .form {
+		padding: 32px;
+	}
+
+	> .actions {
+		padding: 24px 32px;
+		border-top: solid 0.5px var(--divider);
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/my-antennas/index.vue b/packages/frontend/src/pages/my-antennas/index.vue
new file mode 100644
index 0000000000..9daf23f9b5
--- /dev/null
+++ b/packages/frontend/src/pages/my-antennas/index.vue
@@ -0,0 +1,64 @@
+<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="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+
+		<div class="">
+			<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
+				<MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
+					<div class="name">{{ antenna.name }}</div>
+				</MkA>
+			</MkPagination>
+		</div>
+	</div>
+</MkSpacer></MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkPagination from '@/components/MkPagination.vue';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const pagination = {
+	endpoint: 'antennas/list' as const,
+	limit: 10,
+};
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.manageAntennas,
+	icon: 'ti ti-antenna',
+});
+</script>
+
+<style lang="scss" scoped>
+.ieepwinx {
+
+	> .add {
+		margin: 0 auto 16px auto;
+	}
+
+	.ljoevbzj {
+		display: block;
+		padding: 16px;
+		margin-bottom: 8px;
+		border: solid 1px var(--divider);
+		border-radius: 6px;
+
+		&:hover {
+			border: solid 1px var(--accent);
+			text-decoration: none;
+		}
+
+		> .name {
+			font-weight: bold;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/my-clips/index.vue b/packages/frontend/src/pages/my-clips/index.vue
new file mode 100644
index 0000000000..dd6b5b3a37
--- /dev/null
+++ b/packages/frontend/src/pages/my-clips/index.vue
@@ -0,0 +1,100 @@
+<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="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+
+			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="list">
+				<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
+					<b>{{ item.name }}</b>
+					<div v-if="item.description" class="description">{{ item.description }}</div>
+				</MkA>
+			</MkPagination>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkPagination from '@/components/MkPagination.vue';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const pagination = {
+	endpoint: 'clips/list' as const,
+	limit: 10,
+};
+
+const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
+
+async function create() {
+	const { canceled, result } = await os.form(i18n.ts.createNewClip, {
+		name: {
+			type: 'string',
+			label: i18n.ts.name,
+		},
+		description: {
+			type: 'string',
+			required: false,
+			multiline: true,
+			label: i18n.ts.description,
+		},
+		isPublic: {
+			type: 'boolean',
+			label: i18n.ts.public,
+			default: false,
+		},
+	});
+	if (canceled) return;
+
+	os.apiWithDialog('clips/create', result);
+
+	pagingComponent.reload();
+}
+
+function onClipCreated() {
+	pagingComponent.reload();
+}
+
+function onClipDeleted() {
+	pagingComponent.reload();
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.clip,
+	icon: 'ti ti-paperclip',
+	action: {
+		icon: 'ti ti-plus',
+		handler: create,
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.qtcaoidl {
+	> .add {
+		margin: 0 auto 16px auto;
+	}
+
+	> .list {
+		> .item {
+			display: block;
+			padding: 16px;
+
+			> .description {
+				margin-top: 8px;
+				padding-top: 8px;
+				border-top: solid 0.5px var(--divider);
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/my-lists/index.vue b/packages/frontend/src/pages/my-lists/index.vue
new file mode 100644
index 0000000000..3476436b27
--- /dev/null
+++ b/packages/frontend/src/pages/my-lists/index.vue
@@ -0,0 +1,82 @@
+<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="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton>
+
+			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists _content">
+				<MkA v-for="list in items" :key="list.id" class="list _panel" :to="`/my/lists/${ list.id }`">
+					<div class="name">{{ list.name }}</div>
+					<MkAvatars :user-ids="list.userIds"/>
+				</MkA>
+			</MkPagination>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkPagination from '@/components/MkPagination.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkAvatars from '@/components/MkAvatars.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
+
+const pagination = {
+	endpoint: 'users/lists/list' as const,
+	limit: 10,
+};
+
+async function create() {
+	const { canceled, result: name } = await os.inputText({
+		title: i18n.ts.enterListName,
+	});
+	if (canceled) return;
+	await os.apiWithDialog('users/lists/create', { name: name });
+	pagingComponent.reload();
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.manageLists,
+	icon: 'ti ti-list',
+	action: {
+		icon: 'ti ti-plus',
+		handler: create,
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.qkcjvfiv {
+	> .add {
+		margin: 0 auto var(--margin) auto;
+	}
+
+	> .lists {
+		> .list {
+			display: block;
+			padding: 16px;
+			border: solid 1px var(--divider);
+			border-radius: 6px;
+
+			&:hover {
+				border: solid 1px var(--accent);
+				text-decoration: none;
+			}
+
+			> .name {
+				margin-bottom: 4px;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue
new file mode 100644
index 0000000000..f6234ffe44
--- /dev/null
+++ b/packages/frontend/src/pages/my-lists/list.vue
@@ -0,0 +1,162 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="700">
+		<div class="mk-list-page">
+			<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+				<div v-if="list" class="_section">
+					<div class="_content">
+						<MkButton inline @click="addUser()">{{ i18n.ts.addUser }}</MkButton>
+						<MkButton inline @click="renameList()">{{ i18n.ts.rename }}</MkButton>
+						<MkButton inline @click="deleteList()">{{ i18n.ts.delete }}</MkButton>
+					</div>
+				</div>
+			</transition>
+
+			<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
+				<div v-if="list" class="_section members _gap">
+					<div class="_title">{{ i18n.ts.members }}</div>
+					<div class="_content">
+						<div class="users">
+							<div v-for="user in users" :key="user.id" class="user _panel">
+								<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
+								<div class="body">
+									<MkUserName :user="user" class="name"/>
+									<MkAcct :user="user" class="acct"/>
+								</div>
+								<div class="action">
+									<button class="_button" @click="removeUser(user)"><i class="ti ti-x"></i></button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</transition>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { mainRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	listId: string;
+}>();
+
+let list = $ref(null);
+let users = $ref([]);
+
+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;
+		});
+	});
+}
+
+function addUser() {
+	os.selectUser().then(user => {
+		os.apiWithDialog('users/lists/push', {
+			listId: list.id,
+			userId: user.id,
+		}).then(() => {
+			users.push(user);
+		});
+	});
+}
+
+function removeUser(user) {
+	os.api('users/lists/pull', {
+		listId: list.id,
+		userId: user.id,
+	}).then(() => {
+		users = users.filter(x => x.id !== user.id);
+	});
+}
+
+async function renameList() {
+	const { canceled, result: name } = await os.inputText({
+		title: i18n.ts.enterListName,
+		default: list.name,
+	});
+	if (canceled) return;
+
+	await os.api('users/lists/update', {
+		listId: list.id,
+		name: name,
+	});
+
+	list.name = name;
+}
+
+async function deleteList() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.t('removeAreYouSure', { x: list.name }),
+	});
+	if (canceled) return;
+
+	await os.api('users/lists/delete', {
+		listId: list.id,
+	});
+	os.success();
+	mainRouter.push('/my/lists');
+}
+
+watch(() => props.listId, fetchList, { immediate: true });
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => list ? {
+	title: list.name,
+	icon: 'ti ti-list',
+} : null));
+</script>
+
+<style lang="scss" scoped>
+.mk-list-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/frontend/src/pages/not-found.vue b/packages/frontend/src/pages/not-found.vue
new file mode 100644
index 0000000000..e58e44ef79
--- /dev/null
+++ b/packages/frontend/src/pages/not-found.vue
@@ -0,0 +1,22 @@
+<template>
+<div class="ipledcug">
+	<div class="_fullinfo">
+		<img src="https://xn--931a.moe/assets/not-found.jpg" class="_ghost"/>
+		<div>{{ i18n.ts.notFoundDescription }}</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.notFound,
+	icon: 'ti ti-alert-triangle',
+});
+</script>
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
new file mode 100644
index 0000000000..ba2bb91239
--- /dev/null
+++ b/packages/frontend/src/pages/note.vue
@@ -0,0 +1,206 @@
+<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="nextPagination" :no-gap="true"/>
+					</div>
+
+					<div class="main _gap">
+						<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><i class="ti ti-chevron-up"></i></MkButton>
+						<div class="note _gap">
+							<MkRemoteCaution v-if="note.user.host != null" :href="note.url ?? note.uri"/>
+							<XNoteDetailed :key="note.id" v-model:note="note" class="note"/>
+						</div>
+						<div v-if="clips && clips.length > 0" class="_content clips _gap">
+							<div class="title">{{ i18n.ts.clip }}</div>
+							<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
+								<b>{{ item.name }}</b>
+								<div v-if="item.description" class="description">{{ item.description }}</div>
+								<div class="user">
+									<MkAvatar :user="item.user" class="avatar" :show-indicator="true"/> <MkUserName :user="item.user" :nowrap="false"/>
+								</div>
+							</MkA>
+						</div>
+						<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><i class="ti ti-chevron-down"></i></MkButton>
+					</div>
+
+					<div v-if="showPrev" class="_gap">
+						<XNotes class="_content" :pagination="prevPagination" :no-gap="true"/>
+					</div>
+				</div>
+				<MkError v-else-if="error" @retry="fetch()"/>
+				<MkLoading v-else/>
+			</transition>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineComponent, watch } from 'vue';
+import * as misskey from 'misskey-js';
+import XNote from '@/components/MkNote.vue';
+import XNoteDetailed from '@/components/MkNoteDetailed.vue';
+import XNotes from '@/components/MkNotes.vue';
+import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	noteId: string;
+}>();
+
+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,
+	},
+} : null));
+</script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
+.fcuexfpr {
+	background: var(--bg);
+
+	> .note {
+		> .main {
+			> .load {
+				min-width: 0;
+				margin: 0 auto;
+				border-radius: 999px;
+
+				&.next {
+					margin-bottom: var(--margin);
+				}
+
+				&.prev {
+					margin-top: var(--margin);
+				}
+			}
+
+			> .note {
+				> .note {
+					border-radius: var(--radius);
+					background: var(--panel);
+				}
+			}
+
+			> .clips {
+				> .title {
+					font-weight: bold;
+					padding: 12px;
+				}
+
+				> .item {
+					display: block;
+					padding: 16px;
+
+					> .description {
+						padding: 8px 0;
+					}
+
+					> .user {
+						$height: 32px;
+						padding-top: 16px;
+						border-top: solid 0.5px var(--divider);
+						line-height: $height;
+
+						> .avatar {
+							width: $height;
+							height: $height;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/notifications.vue b/packages/frontend/src/pages/notifications.vue
new file mode 100644
index 0000000000..7106951de2
--- /dev/null
+++ b/packages/frontend/src/pages/notifications.vue
@@ -0,0 +1,95 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="800">
+		<div v-if="tab === 'all' || tab === 'unread'">
+			<XNotifications class="notifications" :include-types="includeTypes" :unread-only="unreadOnly"/>
+		</div>
+		<div v-else-if="tab === 'mentions'">
+			<XNotes :pagination="mentionsPagination"/>
+		</div>
+		<div v-else-if="tab === 'directNotes'">
+			<XNotes :pagination="directNotesPagination"/>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { notificationTypes } from 'misskey-js';
+import XNotifications from '@/components/MkNotifications.vue';
+import XNotes from '@/components/MkNotes.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let tab = $ref('all');
+let includeTypes = $ref<string[] | null>(null);
+let unreadOnly = $computed(() => tab === 'unread');
+
+const mentionsPagination = {
+	endpoint: 'notes/mentions' as const,
+	limit: 10,
+};
+
+const directNotesPagination = {
+	endpoint: 'notes/mentions' as const,
+	limit: 10,
+	params: {
+		visibility: 'specified',
+	},
+};
+
+function setFilter(ev) {
+	const typeItems = notificationTypes.map(t => ({
+		text: i18n.t(`_notification._types.${t}`),
+		active: includeTypes && includeTypes.includes(t),
+		action: () => {
+			includeTypes = [t];
+		},
+	}));
+	const items = includeTypes != null ? [{
+		icon: 'ti ti-x',
+		text: i18n.ts.clear,
+		action: () => {
+			includeTypes = null;
+		},
+	}, null, ...typeItems] : typeItems;
+	os.popupMenu(items, ev.currentTarget ?? ev.target);
+}
+
+const headerActions = $computed(() => [tab === 'all' ? {
+	text: i18n.ts.filter,
+	icon: 'ti ti-filter',
+	highlighted: includeTypes != null,
+	handler: setFilter,
+} : undefined, tab === 'all' ? {
+	text: i18n.ts.markAllAsRead,
+	icon: 'ti ti-check',
+	handler: () => {
+		os.apiWithDialog('notifications/mark-all-as-read');
+	},
+} : undefined].filter(x => x !== undefined));
+
+const headerTabs = $computed(() => [{
+	key: 'all',
+	title: i18n.ts.all,
+}, {
+	key: 'unread',
+	title: i18n.ts.unread,
+}, {
+	key: 'mentions',
+	title: i18n.ts.mentions,
+	icon: 'ti ti-at',
+}, {
+	key: 'directNotes',
+	title: i18n.ts.directNotes,
+	icon: 'ti ti-mail',
+}]);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.notifications,
+	icon: 'ti ti-bell',
+})));
+</script>
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
new file mode 100644
index 0000000000..a84cb1e80e
--- /dev/null
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue
@@ -0,0 +1,63 @@
+<template>
+<!-- eslint-disable vue/no-mutating-props -->
+<XContainer :draggable="true" @remove="() => $emit('remove')">
+	<template #header><i class="fas fa-image"></i> {{ $ts._pages.blocks.image }}</template>
+	<template #func>
+		<button @click="choose()">
+			<i class="fas fa-folder-open"></i>
+		</button>
+	</template>
+
+	<section class="oyyftmcf">
+		<MkDriveFileThumbnail v-if="file" class="preview" :file="file" fit="contain" @click="choose()"/>
+	</section>
+</XContainer>
+</template>
+
+<script lang="ts" setup>
+/* eslint-disable vue/no-mutating-props */
+import { onMounted } from 'vue';
+import XContainer from '../page-editor.container.vue';
+import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
+import * as os from '@/os';
+
+const props = defineProps<{
+	modelValue: any
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', value: any): void;
+}>();
+
+let file: any = $ref(null);
+
+async function choose() {
+	os.selectDriveFile(false).then((fileResponse: any) => {
+		file = fileResponse;
+		emit('update:modelValue', {
+			...props.modelValue,
+			fileId: fileResponse.id,
+		});
+	});
+}
+
+onMounted(async () => {
+	if (props.modelValue.fileId == null) {
+		await choose();
+	} else {
+		os.api('drive/files/show', {
+			fileId: props.modelValue.fileId,
+		}).then(fileResponse => {
+			file = fileResponse;
+		});
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.oyyftmcf {
+	> .preview {
+		height: 150px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
new file mode 100644
index 0000000000..dc2a620c09
--- /dev/null
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
@@ -0,0 +1,57 @@
+<template>
+<!-- eslint-disable vue/no-mutating-props -->
+<XContainer :draggable="true" @remove="() => $emit('remove')">
+	<template #header><i class="ti ti-note"></i> {{ $ts._pages.blocks.note }}</template>
+
+	<section style="padding: 0 16px 0 16px;">
+		<MkInput v-model="id">
+			<template #label>{{ $ts._pages.blocks._note.id }}</template>
+			<template #caption>{{ $ts._pages.blocks._note.idDescription }}</template>
+		</MkInput>
+		<MkSwitch v-model="props.modelValue.detailed"><span>{{ $ts._pages.blocks._note.detailed }}</span></MkSwitch>
+
+		<XNote v-if="note && !props.modelValue.detailed" :key="note.id + ':normal'" v-model:note="note" style="margin-bottom: 16px;"/>
+		<XNoteDetailed v-if="note && props.modelValue.detailed" :key="note.id + ':detail'" v-model:note="note" style="margin-bottom: 16px;"/>
+	</section>
+</XContainer>
+</template>
+
+<script lang="ts" setup>
+/* eslint-disable vue/no-mutating-props */
+import { watch } from 'vue';
+import XContainer from '../page-editor.container.vue';
+import MkInput from '@/components/form/input.vue';
+import MkSwitch from '@/components/form/switch.vue';
+import XNote from '@/components/MkNote.vue';
+import XNoteDetailed from '@/components/MkNoteDetailed.vue';
+import * as os from '@/os';
+
+const props = defineProps<{
+	modelValue: any
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', value: any): void;
+}>();
+
+let id: any = $ref(props.modelValue.note);
+let note: any = $ref(null);
+
+watch(id, async () => {
+	if (id && (id.startsWith('http://') || id.startsWith('https://'))) {
+		emit('update:modelValue', {
+			...props.modelValue,
+			note: (id.endsWith('/') ? id.slice(0, -1) : id).split('/').pop(),
+		});
+	} else {
+		emit('update:modelValue', {
+			...props.modelValue,
+			note: id,
+		});
+	}
+
+	note = await os.api('notes/show', { noteId: props.modelValue.note });
+}, {
+	immediate: true,
+});
+</script>
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue
new file mode 100644
index 0000000000..27324bdaef
--- /dev/null
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.section.vue
@@ -0,0 +1,97 @@
+<template>
+<!-- eslint-disable vue/no-mutating-props -->
+<XContainer :draggable="true" @remove="() => $emit('remove')">
+	<template #header><i class="ti ti-note"></i> {{ props.modelValue.title }}</template>
+	<template #func>
+		<button class="_button" @click="rename()">
+			<i class="ti ti-pencil"></i>
+		</button>
+	</template>
+
+	<section class="ilrvjyvi">
+		<XBlocks v-model="children" class="children"/>
+		<MkButton rounded class="add" @click="add()"><i class="ti ti-plus"></i></MkButton>
+	</section>
+</XContainer>
+</template>
+
+<script lang="ts" setup>
+/* eslint-disable vue/no-mutating-props */
+import { defineAsyncComponent, inject, onMounted, watch } from 'vue';
+import { v4 as uuid } from 'uuid';
+import XContainer from '../page-editor.container.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { deepClone } from '@/scripts/clone';
+import MkButton from '@/components/MkButton.vue';
+
+const XBlocks = defineAsyncComponent(() => import('../page-editor.blocks.vue'));
+
+const props = withDefaults(defineProps<{
+	modelValue: any,
+}>(), {
+	modelValue: {},
+});
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', value: any): void;
+}>();
+
+const children = $ref(deepClone(props.modelValue.children ?? []));
+
+watch($$(children), () => {
+	emit('update:modelValue', {
+		...props.modelValue,
+		children,
+	});
+}, {
+	deep: true,
+});
+
+const getPageBlockList = inject<(any) => any>('getPageBlockList');
+
+async function rename() {
+	const { canceled, result: title } = await os.inputText({
+		title: 'Enter title',
+		default: props.modelValue.title,
+	});
+	if (canceled) return;
+	emit('update:modelValue', {
+		...props.modelValue,
+		title,
+	});
+}
+
+async function add() {
+	const { canceled, result: type } = await os.select({
+		title: i18n.ts._pages.chooseBlock,
+		items: getPageBlockList(),
+	});
+	if (canceled) return;
+
+	const id = uuid();
+	children.push({ id, type });
+}
+
+onMounted(() => {
+	if (props.modelValue.title == null) {
+		rename();
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.ilrvjyvi {
+	> .children {
+		margin: 16px;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	> .add {
+		margin: 16px auto;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
new file mode 100644
index 0000000000..6f11e2a08b
--- /dev/null
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.text.vue
@@ -0,0 +1,54 @@
+<template>
+<!-- eslint-disable vue/no-mutating-props -->
+<XContainer :draggable="true" @remove="() => $emit('remove')">
+	<template #header><i class="fas fa-align-left"></i> {{ $ts._pages.blocks.text }}</template>
+
+	<section class="vckmsadr">
+		<textarea v-model="text"></textarea>
+	</section>
+</XContainer>
+</template>
+
+<script lang="ts" setup>
+/* eslint-disable vue/no-mutating-props */
+import { watch } from 'vue';
+import XContainer from '../page-editor.container.vue';
+
+const props = defineProps<{
+	modelValue: any
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', value: any): void;
+}>();
+
+const text = $ref(props.modelValue.text ?? '');
+
+watch($$(text), () => {
+	emit('update:modelValue', {
+		...props.modelValue,
+		text,
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+.vckmsadr {
+	> textarea {
+		display: block;
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		width: 100%;
+		min-width: 100%;
+		min-height: 150px;
+		border: none;
+		box-shadow: none;
+		padding: 16px;
+		background: transparent;
+		color: var(--fg);
+		font-size: 14px;
+		box-sizing: border-box;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/page-editor/page-editor.blocks.vue b/packages/frontend/src/pages/page-editor/page-editor.blocks.vue
new file mode 100644
index 0000000000..f99fcb202f
--- /dev/null
+++ b/packages/frontend/src/pages/page-editor/page-editor.blocks.vue
@@ -0,0 +1,65 @@
+<template>
+<Sortable :model-value="modelValue" tag="div" item-key="id" handle=".drag-handle" :group="{ name: 'blocks' }" :animation="150" :swap-threshold="0.5" @update:model-value="v => $emit('update:modelValue', v)">
+	<template #item="{element}">
+		<div :class="$style.item">
+			<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 -->
+			<component :is="'x-' + element.type" :model-value="element" @update:model-value="updateItem" @remove="() => removeItem(element)"/>
+		</div>
+	</template>
+</Sortable>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import XSection from './els/page-editor.el.section.vue';
+import XText from './els/page-editor.el.text.vue';
+import XImage from './els/page-editor.el.image.vue';
+import XNote from './els/page-editor.el.note.vue';
+import * as os from '@/os';
+import { deepClone } from '@/scripts/clone';
+
+export default defineComponent({
+	components: {
+		Sortable: defineAsyncComponent(() => import('vuedraggable').then(x => x.default)),
+		XSection, XText, XImage, XNote,
+	},
+
+	props: {
+		modelValue: {
+			type: Array,
+			required: true,
+		},
+	},
+
+	emits: ['update:modelValue'],
+
+	methods: {
+		updateItem(v) {
+			const i = this.modelValue.findIndex(x => x.id === v.id);
+			const newValue = [
+				...this.modelValue.slice(0, i),
+				v,
+				...this.modelValue.slice(i + 1),
+			];
+			this.$emit('update:modelValue', newValue);
+		},
+
+		removeItem(el) {
+			const i = this.modelValue.findIndex(x => x.id === el.id);
+			const newValue = [
+				...this.modelValue.slice(0, i),
+				...this.modelValue.slice(i + 1),
+			];
+			this.$emit('update:modelValue', newValue);
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.item {
+	& + .item {
+		margin-top: 16px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/page-editor/page-editor.container.vue b/packages/frontend/src/pages/page-editor/page-editor.container.vue
new file mode 100644
index 0000000000..15cdda5efb
--- /dev/null
+++ b/packages/frontend/src/pages/page-editor/page-editor.container.vue
@@ -0,0 +1,155 @@
+<template>
+<div class="cpjygsrt" :class="{ error: error != null, warn: warn != null }">
+	<header>
+		<div class="title"><slot name="header"></slot></div>
+		<div class="buttons">
+			<slot name="func"></slot>
+			<button v-if="removable" class="_button" @click="remove()">
+				<i class="ti ti-trash"></i>
+			</button>
+			<button v-if="draggable" class="drag-handle _button">
+				<i class="ti ti-menu-2"></i>
+			</button>
+			<button class="_button" @click="toggleContent(!showBody)">
+				<template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
+				<template v-else><i class="ti ti-chevron-down"></i></template>
+			</button>
+		</div>
+	</header>
+	<p v-show="showBody" v-if="error != null" class="error">{{ $t('_pages.script.typeError', { slot: error.arg + 1, expect: $t(`script.types.${error.expect}`), actual: $t(`script.types.${error.actual}`) }) }}</p>
+	<p v-show="showBody" v-if="warn != null" class="warn">{{ $t('_pages.script.thereIsEmptySlot', { slot: warn.slot + 1 }) }}</p>
+	<div v-show="showBody" class="body">
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	props: {
+		expanded: {
+			type: Boolean,
+			default: true,
+		},
+		removable: {
+			type: Boolean,
+			default: true,
+		},
+		draggable: {
+			type: Boolean,
+			default: false,
+		},
+		error: {
+			required: false,
+			default: null,
+		},
+		warn: {
+			required: false,
+			default: null,
+		},
+	},
+	emits: ['toggle', 'remove'],
+	data() {
+		return {
+			showBody: this.expanded,
+		};
+	},
+	methods: {
+		toggleContent(show: boolean) {
+			this.showBody = show;
+			this.$emit('toggle', show);
+		},
+		remove() {
+			this.$emit('remove');
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.cpjygsrt {
+	position: relative;
+	overflow: hidden;
+	background: var(--panel);
+	border: solid 2px var(--X12);
+	border-radius: 8px;
+
+	&:hover {
+		border: solid 2px var(--X13);
+	}
+
+	&.warn {
+		border: solid 2px #dec44c;
+	}
+
+	&.error {
+		border: solid 2px #f00;
+	}
+
+	> header {
+		> .title {
+			z-index: 1;
+			margin: 0;
+			padding: 0 16px;
+			line-height: 42px;
+			font-size: 0.9em;
+			font-weight: bold;
+			box-shadow: 0 1px rgba(#000, 0.07);
+
+			> i {
+				margin-right: 6px;
+			}
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		> .buttons {
+			position: absolute;
+			z-index: 2;
+			top: 0;
+			right: 0;
+
+			> button {
+				padding: 0;
+				width: 42px;
+				font-size: 0.9em;
+				line-height: 42px;
+			}
+
+			.drag-handle {
+				cursor: move;
+			}
+		}
+	}
+
+	> .warn {
+		color: #b19e49;
+		margin: 0;
+		padding: 16px 16px 0 16px;
+		font-size: 14px;
+	}
+
+	> .error {
+		color: #f00;
+		margin: 0;
+		padding: 16px 16px 0 16px;
+		font-size: 14px;
+	}
+
+	> .body {
+		::v-deep(.juejbjww), ::v-deep(.eiipwacr) {
+			&:not(.inline):first-child {
+				margin-top: 28px;
+			}
+
+			&:not(.inline):last-child {
+				margin-bottom: 20px;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/page-editor/page-editor.vue b/packages/frontend/src/pages/page-editor/page-editor.vue
new file mode 100644
index 0000000000..968aa12de2
--- /dev/null
+++ b/packages/frontend/src/pages/page-editor/page-editor.vue
@@ -0,0 +1,394 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="700">
+		<div class="jqqmcavi">
+			<MkButton v-if="pageId" class="button" inline link :to="`/@${ author.username }/pages/${ currentName }`"><i class="ti ti-external-link"></i> {{ $ts._pages.viewPage }}</MkButton>
+			<MkButton v-if="!readonly" inline primary class="button" @click="save"><i class="ti ti-device-floppy"></i> {{ $ts.save }}</MkButton>
+			<MkButton v-if="pageId" inline class="button" @click="duplicate"><i class="ti ti-copy"></i> {{ $ts.duplicate }}</MkButton>
+			<MkButton v-if="pageId && !readonly" inline class="button" danger @click="del"><i class="ti ti-trash"></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>
+
+				<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>
+
+				<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>
+
+				<MkSwitch v-model="hideTitleWhenPinned" class="_formBlock">{{ $ts._pages.hideTitleWhenPinned }}</MkSwitch>
+
+				<div class="eyeCatch">
+					<MkButton v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage"><i class="ti ti-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="ti ti-trash"></i> {{ $ts._pages.eyeCatchingImageRemove }}</MkButton>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div v-else-if="tab === 'contents'">
+			<div :class="$style.contents">
+				<XBlocks v-model="content" class="content"/>
+
+				<MkButton v-if="!readonly" rounded class="add" @click="add()"><i class="ti ti-plus"></i></MkButton>
+			</div>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, computed, provide, watch } from 'vue';
+import { v4 as uuid } from 'uuid';
+import XBlocks from './page-editor.blocks.vue';
+import MkTextarea from '@/components/form/textarea.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkSelect from '@/components/form/select.vue';
+import MkSwitch from '@/components/form/switch.vue';
+import MkInput from '@/components/form/input.vue';
+import { url } from '@/config';
+import * as os from '@/os';
+import { selectFile } from '@/scripts/select-file';
+import { mainRouter } from '@/router';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { $i } from '@/account';
+
+const props = defineProps<{
+	initPageId?: string;
+	initPageName?: string;
+	initUser?: string;
+}>();
+
+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);
+
+provide('readonly', readonly);
+provide('getPageBlockList', getPageBlockList);
+
+watch($$(eyeCatchingImageId), async () => {
+	if (eyeCatchingImageId == null) {
+		eyeCatchingImage = null;
+	} else {
+		eyeCatchingImage = await os.api('drive/files/show', {
+			fileId: eyeCatchingImageId,
+		});
+	}
+});
+
+function getSaveOptions() {
+	return {
+		title: title.trim(),
+		name: name.trim(),
+		summary: summary,
+		font: font,
+		script: '',
+		hideTitleWhenPinned: hideTitleWhenPinned,
+		alignCenter: alignCenter,
+		content: content,
+		variables: [],
+		eyeCatchingImageId: eyeCatchingImageId,
+	};
+}
+
+function save() {
+	const options = getSaveOptions();
+
+	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 (pageId) {
+		options.pageId = pageId;
+		os.api('pages/update', options)
+			.then(page => {
+				currentName = name.trim();
+				os.alert({
+					type: 'success',
+					text: i18n.ts._pages.updated,
+				});
+			}).catch(onError);
+	} else {
+		os.api('pages/create', options)
+			.then(created => {
+				pageId = created.id;
+				currentName = name.trim();
+				os.alert({
+					type: 'success',
+					text: i18n.ts._pages.created,
+				});
+				mainRouter.push(`/pages/edit/${pageId}`);
+			}).catch(onError);
+	}
+}
+
+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() {
+	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,
+		});
+		mainRouter.push(`/pages/edit/${pageId}`);
+	});
+}
+
+async function add() {
+	const { canceled, result: type } = await os.select({
+		type: null,
+		title: i18n.ts._pages.chooseBlock,
+		items: getPageBlockList(),
+	});
+	if (canceled) return;
+
+	const id = uuid();
+	content.push({ id, type });
+}
+
+function getPageBlockList() {
+	return [
+		{ 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: 'note', text: i18n.ts._pages.blocks.note },
+	];
+}
+
+function setEyeCatchingImage(img) {
+	selectFile(img.currentTarget ?? img.target, null).then(file => {
+		eyeCatchingImageId = file.id;
+	});
+}
+
+function removeEyeCatchingImage() {
+	eyeCatchingImageId = null;
+}
+
+async function init() {
+	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;
+		hideTitleWhenPinned = page.hideTitleWhenPinned;
+		alignCenter = page.alignCenter;
+		content = page.content;
+		eyeCatchingImageId = page.eyeCatchingImageId;
+	} else {
+		const id = uuid();
+		content = [{
+			id,
+			type: 'text',
+			text: 'Hello World!',
+		}];
+	}
+}
+
+init();
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => [{
+	key: 'settings',
+	title: i18n.ts._pages.pageSetting,
+	icon: 'ti ti-settings',
+}, {
+	key: 'contents',
+	title: i18n.ts._pages.contents,
+	icon: 'ti ti-note',
+}]);
+
+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: 'ti ti-pencil',
+	};
+}));
+</script>
+
+<style lang="scss" module>
+.contents {
+	&:global {
+		> .add {
+			margin: 16px auto 0 auto;
+		}
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+.jqqmcavi {
+	margin-bottom: 16px;
+
+	> .button {
+		& + .button {
+			margin-left: 8px;
+		}
+	}
+}
+
+.gwbmwxkm {
+	position: relative;
+
+	> header {
+		> .title {
+			z-index: 1;
+			margin: 0;
+			padding: 0 16px;
+			line-height: 42px;
+			font-size: 0.9em;
+			font-weight: bold;
+			box-shadow: 0 1px rgba(#000, 0.07);
+
+			> i {
+				margin-right: 6px;
+			}
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		> .buttons {
+			position: absolute;
+			z-index: 2;
+			top: 0;
+			right: 0;
+
+			> button {
+				padding: 0;
+				width: 42px;
+				font-size: 0.9em;
+				line-height: 42px;
+			}
+		}
+	}
+
+	> section {
+		padding: 0 32px 32px 32px;
+
+		@media (max-width: 500px) {
+			padding: 0 16px 16px 16px;
+		}
+
+		> .view {
+			display: inline-block;
+			margin: 16px 0 0 0;
+			font-size: 14px;
+		}
+
+		> .content {
+			margin-bottom: 16px;
+		}
+
+		> .eyeCatch {
+			margin-bottom: 16px;
+
+			> div {
+				> img {
+					max-width: 100%;
+				}
+			}
+		}
+	}
+}
+
+.qmuvgica {
+	padding: 16px;
+
+	> .variables {
+		margin-bottom: 16px;
+	}
+
+	> .add {
+		margin-bottom: 16px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
new file mode 100644
index 0000000000..a95bfe485c
--- /dev/null
+++ b/packages/frontend/src/pages/page.vue
@@ -0,0 +1,277 @@
+<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" 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="i18n.ts._pages.unlike" class="button" primary @click="unlike()"><i class="ti ti-heart-off"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+							<MkButton v-else v-tooltip="i18n.ts._pages.like" class="button" @click="like()"><i class="ti ti-heart"></i><span v-if="page.likedCount > 0" class="count">{{ page.likedCount }}</span></MkButton>
+						</div>
+						<div class="other">
+							<button v-tooltip="i18n.ts.shareWithNote" v-click-anime class="_button" @click="shareWithNote"><i class="ti ti-repeat ti-fw"></i></button>
+							<button v-tooltip="i18n.ts.share" v-click-anime class="_button" @click="share"><i class="ti ti-share ti-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">{{ i18n.ts._pages.viewSource }}</MkA>
+						<template v-if="$i && $i.id === page.userId">
+							<MkA :to="`/pages/edit/${page.id}`" class="link">{{ i18n.ts._pages.editThisPage }}</MkA>
+							<button v-if="$i.pinnedPageId === page.id" class="link _textButton" @click="pin(false)">{{ i18n.ts.unpin }}</button>
+							<button v-else class="link _textButton" @click="pin(true)">{{ i18n.ts.pin }}</button>
+						</template>
+					</div>
+				</div>
+				<div class="footer">
+					<div><i class="ti ti-clock"></i> {{ i18n.ts.createdAt }}: <MkTime :time="page.createdAt" mode="detail"/></div>
+					<div v-if="page.createdAt != page.updatedAt"><i class="ti ti-clock"></i> {{ i18n.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="ti ti-clock"></i> {{ i18n.ts.recentPosts }}</template>
+					<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
+						<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
+					</MkPagination>
+				</MkContainer>
+			</div>
+			<MkError v-else-if="error" @retry="fetchPage()"/>
+			<MkLoading v-else/>
+		</transition>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
+import XPage from '@/components/page/page.vue';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { url } from '@/config';
+import MkFollowButton from '@/components/MkFollowButton.vue';
+import MkContainer from '@/components/MkContainer.vue';
+import MkPagination from '@/components/MkPagination.vue';
+import MkPagePreview from '@/components/MkPagePreview.vue';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+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,
+	},
+} : null));
+</script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
+.xcukqgmh {
+	> .main {
+		padding: 32px;
+
+		> .header {
+			padding: 16px;
+
+			> h1 {
+				margin: 0;
+			}
+		}
+
+		> .banner {
+			> img {
+				// TODO: 良い感じのアスペクト比で表示
+				display: block;
+				width: 100%;
+				height: 150px;
+				object-fit: cover;
+			}
+		}
+
+		> .content {
+			margin-top: 16px;
+			padding: 16px 0 0 0;
+		}
+
+		> .actions {
+			display: flex;
+			align-items: center;
+			margin-top: 16px;
+			padding: 16px 0 0 0;
+			border-top: solid 0.5px var(--divider);
+
+			> .like {
+				> .button {
+					--accent: rgb(241 97 132);
+					--X8: rgb(241 92 128);
+					--buttonBg: rgb(216 71 106 / 5%);
+					--buttonHoverBg: rgb(216 71 106 / 10%);
+					color: #ff002f;
+
+					::v-deep(.count) {
+						margin-left: 0.5em;
+					}
+				}
+			}
+
+			> .other {
+				margin-left: auto;
+
+				> button {
+					padding: 8px;
+					margin: 0 8px;
+
+					&:hover {
+						color: var(--fgHighlighted);
+					}
+				}
+			}
+		}
+
+		> .user {
+			margin-top: 16px;
+			padding: 16px 0 0 0;
+			border-top: solid 0.5px var(--divider);
+			display: flex;
+			align-items: center;
+
+			> .avatar {
+				width: 52px;
+				height: 52px;
+			}
+
+			> .name {
+				margin: 0 0 0 12px;
+				font-size: 90%;
+			}
+
+			> .koudoku {
+				margin-left: auto;
+			}
+		}
+
+		> .links {
+			margin-top: 16px;
+			padding: 24px 0 0 0;
+			border-top: solid 0.5px var(--divider);
+
+			> .link {
+				margin-right: 0.75em;
+			}
+		}
+	}
+
+	> .footer {
+		margin: var(--margin) 0 var(--margin) 0;
+		font-size: 85%;
+		opacity: 0.75;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/pages.vue b/packages/frontend/src/pages/pages.vue
new file mode 100644
index 0000000000..b077180df8
--- /dev/null
+++ b/packages/frontend/src/pages/pages.vue
@@ -0,0 +1,99 @@
+<template>
+<MkStickyContainer>
+	<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">
+				<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="ti ti-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>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+import MkPagePreview from '@/components/MkPagePreview.vue';
+import MkPagination from '@/components/MkPagination.vue';
+import MkButton from '@/components/MkButton.vue';
+import { useRouter } from '@/router';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+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: 'ti ti-plus',
+	text: i18n.ts.create,
+	handler: create,
+}]);
+
+const headerTabs = $computed(() => [{
+	key: 'featured',
+	title: i18n.ts._pages.featured,
+	icon: 'fas fa-fire-alt',
+}, {
+	key: 'my',
+	title: i18n.ts._pages.my,
+	icon: 'ti ti-edit',
+}, {
+	key: 'liked',
+	title: i18n.ts._pages.liked,
+	icon: 'ti ti-heart',
+}]);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.pages,
+	icon: 'ti ti-note',
+})));
+</script>
+
+<style lang="scss" scoped>
+.rknalgpo {
+	&.my .ckltabjg:first-child {
+		margin-top: 16px;
+	}
+
+	.ckltabjg:not(:last-child) {
+		margin-bottom: 8px;
+	}
+
+	@media (min-width: 500px) {
+		.ckltabjg:not(:last-child) {
+			margin-bottom: 16px;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/preview.vue b/packages/frontend/src/pages/preview.vue
new file mode 100644
index 0000000000..354f686e46
--- /dev/null
+++ b/packages/frontend/src/pages/preview.vue
@@ -0,0 +1,27 @@
+<template>
+<div class="graojtoi">
+	<MkSample/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import MkSample from '@/components/MkSample.vue';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.preview,
+	icon: 'ti ti-eye',
+})));
+</script>
+
+<style lang="scss" scoped>
+.graojtoi {
+	padding: var(--margin);
+}
+</style>
diff --git a/packages/frontend/src/pages/registry.keys.vue b/packages/frontend/src/pages/registry.keys.vue
new file mode 100644
index 0000000000..f179fbe957
--- /dev/null
+++ b/packages/frontend/src/pages/registry.keys.vue
@@ -0,0 +1,96 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="600" :margin-min="16">
+		<FormSplit>
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ i18n.ts._registry.domain }}</template>
+				<template #value>{{ i18n.ts.system }}</template>
+			</MkKeyValue>
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ i18n.ts._registry.scope }}</template>
+				<template #value>{{ scope.join('/') }}</template>
+			</MkKeyValue>
+		</FormSplit>
+		
+		<MkButton primary @click="createKey">{{ i18n.ts._registry.createKey }}</MkButton>
+
+		<FormSection v-if="keys">
+			<template #label>{{ i18n.ts.keys }}</template>
+			<div class="_formLinks">
+				<FormLink v-for="key in keys" :to="`/registry/value/system/${scope.join('/')}/${key[0]}`" class="_monospace">{{ key[0] }}<template #suffix>{{ key[1].toUpperCase() }}</template></FormLink>
+			</div>
+		</FormSection>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import JSON5 from 'json5';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import FormLink from '@/components/form/link.vue';
+import FormSection from '@/components/form/section.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import FormSplit from '@/components/form/split.vue';
+
+const props = defineProps<{
+	path: string;
+}>();
+
+const scope = $computed(() => props.path.split('/'));
+
+let keys = $ref(null);
+
+function fetchKeys() {
+	os.api('i/registry/keys-with-type', {
+		scope: scope,
+	}).then(res => {
+		keys = Object.entries(res).sort((a, b) => a[0].localeCompare(b[0]));
+	});
+}
+
+async function createKey() {
+	const { canceled, result } = await os.form(i18n.ts._registry.createKey, {
+		key: {
+			type: 'string',
+			label: i18n.ts._registry.key,
+		},
+		value: {
+			type: 'string',
+			multiline: true,
+			label: i18n.ts.value,
+		},
+		scope: {
+			type: 'string',
+			label: i18n.ts._registry.scope,
+			default: scope.join('/'),
+		},
+	});
+	if (canceled) return;
+	os.apiWithDialog('i/registry/set', {
+		scope: result.scope.split('/'),
+		key: result.key,
+		value: JSON5.parse(result.value),
+	}).then(() => {
+		fetchKeys();
+	});
+}
+
+watch(() => props.path, fetchKeys, { immediate: true });
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.registry,
+	icon: 'ti ti-adjustments',
+});
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/packages/frontend/src/pages/registry.value.vue b/packages/frontend/src/pages/registry.value.vue
new file mode 100644
index 0000000000..378420b1ba
--- /dev/null
+++ b/packages/frontend/src/pages/registry.value.vue
@@ -0,0 +1,123 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="600" :margin-min="16">
+		<FormInfo warn>{{ i18n.ts.editTheseSettingsMayBreakAccount }}</FormInfo>
+
+		<template v-if="value">
+			<FormSplit>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts._registry.domain }}</template>
+					<template #value>{{ i18n.ts.system }}</template>
+				</MkKeyValue>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts._registry.scope }}</template>
+					<template #value>{{ scope.join('/') }}</template>
+				</MkKeyValue>
+				<MkKeyValue class="_formBlock">
+					<template #key>{{ i18n.ts._registry.key }}</template>
+					<template #value>{{ key }}</template>
+				</MkKeyValue>
+			</FormSplit>
+			
+			<FormTextarea v-model="valueForEditor" tall class="_formBlock _monospace">
+				<template #label>{{ i18n.ts.value }} (JSON)</template>
+			</FormTextarea>
+
+			<MkButton class="_formBlock" primary @click="save"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ i18n.ts.updatedAt }}</template>
+				<template #value><MkTime :time="value.updatedAt" mode="detail"/></template>
+			</MkKeyValue>
+
+			<MkButton danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
+		</template>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import JSON5 from 'json5';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import FormLink from '@/components/form/link.vue';
+import FormSection from '@/components/form/section.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormSplit from '@/components/form/split.vue';
+import FormInfo from '@/components/MkInfo.vue';
+
+const props = defineProps<{
+	path: string;
+}>();
+
+const scope = $computed(() => props.path.split('/').slice(0, -1));
+const key = $computed(() => props.path.split('/').at(-1));
+
+let value = $ref(null);
+let valueForEditor = $ref(null);
+
+function fetchValue() {
+	os.api('i/registry/get-detail', {
+		scope,
+		key,
+	}).then(res => {
+		value = res;
+		valueForEditor = JSON5.stringify(res.value, null, '\t');
+	});
+}
+
+async function save() {
+	try {
+		JSON5.parse(valueForEditor);
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			text: i18n.ts.invalidValue,
+		});
+		return;
+	}
+	os.confirm({
+		type: 'warning',
+		text: i18n.ts.saveConfirm,
+	}).then(({ canceled }) => {
+		if (canceled) return;
+		os.apiWithDialog('i/registry/set', {
+			scope,
+			key,
+			value: JSON5.parse(valueForEditor),
+		});
+	});
+}
+
+function del() {
+	os.confirm({
+		type: 'warning',
+		text: i18n.ts.deleteConfirm,
+	}).then(({ canceled }) => {
+		if (canceled) return;
+		os.apiWithDialog('i/registry/remove', {
+			scope,
+			key,
+		});
+	});
+}
+
+watch(() => props.path, fetchValue, { immediate: true });
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.registry,
+	icon: 'ti ti-adjustments',
+});
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/packages/frontend/src/pages/registry.vue b/packages/frontend/src/pages/registry.vue
new file mode 100644
index 0000000000..a2c65294fc
--- /dev/null
+++ b/packages/frontend/src/pages/registry.vue
@@ -0,0 +1,74 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="600" :margin-min="16">
+		<MkButton primary @click="createKey">{{ i18n.ts._registry.createKey }}</MkButton>
+
+		<FormSection v-if="scopes">
+			<template #label>{{ i18n.ts.system }}</template>
+			<div class="_formLinks">
+				<FormLink v-for="scope in scopes" :to="`/registry/keys/system/${scope.join('/')}`" class="_monospace">{{ scope.join('/') }}</FormLink>
+			</div>
+		</FormSection>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import JSON5 from 'json5';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import FormLink from '@/components/form/link.vue';
+import FormSection from '@/components/form/section.vue';
+import MkButton from '@/components/MkButton.vue';
+
+let scopes = $ref(null);
+
+function fetchScopes() {
+	os.api('i/registry/scopes').then(res => {
+		scopes = res.slice().sort((a, b) => a.join('/').localeCompare(b.join('/')));
+	});
+}
+
+async function createKey() {
+	const { canceled, result } = await os.form(i18n.ts._registry.createKey, {
+		key: {
+			type: 'string',
+			label: i18n.ts._registry.key,
+		},
+		value: {
+			type: 'string',
+			multiline: true,
+			label: i18n.ts.value,
+		},
+		scope: {
+			type: 'string',
+			label: i18n.ts._registry.scope,
+		},
+	});
+	if (canceled) return;
+	os.apiWithDialog('i/registry/set', {
+		scope: result.scope.split('/'),
+		key: result.key,
+		value: JSON5.parse(result.value),
+	}).then(() => {
+		fetchScopes();
+	});
+}
+
+fetchScopes();
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.registry,
+	icon: 'ti ti-adjustments',
+});
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/packages/frontend/src/pages/reset-password.vue b/packages/frontend/src/pages/reset-password.vue
new file mode 100644
index 0000000000..8ec15f6425
--- /dev/null
+++ b/packages/frontend/src/pages/reset-password.vue
@@ -0,0 +1,59 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer v-if="token" :content-max="700" :margin-min="16" :margin-max="32">
+		<div class="_formRoot">
+			<FormInput v-model="password" type="password" class="_formBlock">
+				<template #prefix><i class="ti ti-lock"></i></template>
+				<template #label>{{ i18n.ts.newPassword }}</template>
+			</FormInput>
+		
+			<FormButton primary class="_formBlock" @click="save">{{ i18n.ts.save }}</FormButton>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, onMounted } from 'vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { mainRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const props = defineProps<{
+	token?: string;
+}>();
+
+let password = $ref('');
+
+async function save() {
+	await os.apiWithDialog('reset-password', {
+		token: props.token,
+		password: password,
+	});
+	mainRouter.push('/');
+}
+
+onMounted(() => {
+	if (props.token == null) {
+		os.popup(defineAsyncComponent(() => import('@/components/MkForgotPassword.vue')), {}, {}, 'closed');
+		mainRouter.push('/');
+	}
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.resetPassword,
+	icon: 'ti ti-lock',
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/frontend/src/pages/scratchpad.vue b/packages/frontend/src/pages/scratchpad.vue
new file mode 100644
index 0000000000..edb2d8e18c
--- /dev/null
+++ b/packages/frontend/src/pages/scratchpad.vue
@@ -0,0 +1,137 @@
+<template>
+<div class="iltifgqe">
+	<div class="editor _panel _gap">
+		<PrismEditor v-model="code" class="_code code" :highlight="highlighter" :line-numbers="false"/>
+		<MkButton style="position: absolute; top: 8px; right: 8px;" primary @click="run()"><i class="ti ti-player-play"></i></MkButton>
+	</div>
+
+	<MkContainer :foldable="true" class="_gap">
+		<template #header>{{ i18n.ts.output }}</template>
+		<div class="bepmlvbi">
+			<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
+		</div>
+	</MkContainer>
+
+	<div class="_gap">
+		{{ i18n.ts.scratchpadDescription }}
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import 'prismjs';
+import { highlight, languages } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/themes/prism-okaidia.css';
+import { PrismEditor } from 'vue-prism-editor';
+import 'vue-prism-editor/dist/prismeditor.min.css';
+import { AiScript, parse, utils } from '@syuilo/aiscript';
+import MkContainer from '@/components/MkContainer.vue';
+import MkButton from '@/components/MkButton.vue';
+import { createAiScriptEnv } from '@/scripts/aiscript/api';
+import * as os from '@/os';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const code = ref('');
+const logs = ref<any[]>([]);
+
+const saved = localStorage.getItem('scratchpad');
+if (saved) {
+	code.value = saved;
+}
+
+watch(code, () => {
+	localStorage.setItem('scratchpad', code.value);
+});
+
+async function run() {
+	logs.value = [];
+	const aiscript = new AiScript(createAiScriptEnv({
+		storageKey: 'scratchpad',
+		token: $i?.token,
+	}), {
+		in: (q) => {
+			return new Promise(ok => {
+				os.inputText({
+					title: q,
+				}).then(({ canceled, result: a }) => {
+					ok(a);
+				});
+			});
+		},
+		out: (value) => {
+			logs.value.push({
+				id: Math.random(),
+				text: value.type === 'str' ? value.value : utils.valToString(value),
+				print: true,
+			});
+		},
+		log: (type, params) => {
+			switch (type) {
+				case 'end': logs.value.push({
+					id: Math.random(),
+					text: utils.valToString(params.val, true),
+					print: false,
+				}); break;
+				default: break;
+			}
+		},
+	});
+
+	let ast;
+	try {
+		ast = parse(code.value);
+	} catch (error) {
+		os.alert({
+			type: 'error',
+			text: 'Syntax error :(',
+		});
+		return;
+	}
+	try {
+		await aiscript.exec(ast);
+	} catch (error: any) {
+		os.alert({
+			type: 'error',
+			text: error.message,
+		});
+	}
+}
+
+function highlighter(code) {
+	return highlight(code, languages.js, 'javascript');
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.scratchpad,
+	icon: 'ti ti-terminal-2',
+});
+</script>
+
+<style lang="scss" scoped>
+.iltifgqe {
+	padding: 16px;
+
+	> .editor {
+		position: relative;
+	}
+}
+
+.bepmlvbi {
+	padding: 16px;
+
+	> .log {
+		&:not(.print) {
+			opacity: 0.7;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/search.vue b/packages/frontend/src/pages/search.vue
new file mode 100644
index 0000000000..c080b763bb
--- /dev/null
+++ b/packages/frontend/src/pages/search.vue
@@ -0,0 +1,38 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="800">
+		<XNotes ref="notes" :pagination="pagination"/>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import XNotes from '@/components/MkNotes.vue';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const props = defineProps<{
+	query: string;
+	channel?: string;
+}>();
+
+const pagination = {
+	endpoint: 'notes/search' as const,
+	limit: 10,
+	params: computed(() => ({
+		query: props.query,
+		channelId: props.channel,
+	})),
+};
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: i18n.t('searchWith', { q: props.query }),
+	icon: 'ti ti-search',
+})));
+</script>
diff --git a/packages/frontend/src/pages/settings/2fa.vue b/packages/frontend/src/pages/settings/2fa.vue
new file mode 100644
index 0000000000..1803129aaa
--- /dev/null
+++ b/packages/frontend/src/pages/settings/2fa.vue
@@ -0,0 +1,216 @@
+<template>
+<div>
+	<MkButton v-if="!twoFactorData && !$i.twoFactorEnabled" @click="register">{{ i18n.ts._2fa.registerDevice }}</MkButton>
+	<template v-if="$i.twoFactorEnabled">
+		<p>{{ i18n.ts._2fa.alreadyRegistered }}</p>
+		<MkButton @click="unregister">{{ i18n.ts.unregister }}</MkButton>
+
+		<template v-if="supportsCredentials">
+			<hr class="totp-method-sep">
+
+			<h2 class="heading">{{ i18n.ts.securityKey }}</h2>
+			<p>{{ i18n.ts._2fa.securityKeyInfo }}</p>
+			<div class="key-list">
+				<div v-for="key in $i.securityKeysList" class="key">
+					<h3>{{ key.name }}</h3>
+					<div class="last-used">{{ i18n.ts.lastUsed }}<MkTime :time="key.lastUsed"/></div>
+					<MkButton @click="unregisterKey(key)">{{ i18n.ts.unregister }}</MkButton>
+				</div>
+			</div>
+
+			<MkSwitch v-if="$i.securityKeysList.length > 0" v-model="usePasswordLessLogin" @update:model-value="updatePasswordLessLogin">{{ i18n.ts.passwordLessLogin }}</MkSwitch>
+
+			<MkInfo v-if="registration && registration.error" warn>{{ i18n.ts.error }} {{ registration.error }}</MkInfo>
+			<MkButton v-if="!registration || registration.error" @click="addSecurityKey">{{ i18n.ts._2fa.registerKey }}</MkButton>
+
+			<ol v-if="registration && !registration.error">
+				<li v-if="registration.stage >= 0">
+					{{ i18n.ts.tapSecurityKey }}
+					<MkLoading v-if="registration.saving && registration.stage == 0" :em="true"/>
+				</li>
+				<li v-if="registration.stage >= 1">
+					<MkForm :disabled="registration.stage != 1 || registration.saving">
+						<MkInput v-model="keyName" :max="30">
+							<template #label>{{ i18n.ts.securityKeyName }}</template>
+						</MkInput>
+						<MkButton :disabled="keyName.length == 0" @click="registerKey">{{ i18n.ts.registerSecurityKey }}</MkButton>
+						<MkLoading v-if="registration.saving && registration.stage == 1" :em="true"/>
+					</MkForm>
+				</li>
+			</ol>
+		</template>
+	</template>
+	<div v-if="twoFactorData && !$i.twoFactorEnabled">
+		<ol style="margin: 0; padding: 0 0 0 1em;">
+			<li>
+				<I18n :src="i18n.ts._2fa.step1" tag="span">
+					<template #a>
+						<a href="https://authy.com/" rel="noopener" target="_blank" class="_link">Authy</a>
+					</template>
+					<template #b>
+						<a href="https://support.google.com/accounts/answer/1066447" rel="noopener" target="_blank" class="_link">Google Authenticator</a>
+					</template>
+				</I18n>
+			</li>
+			<li>{{ i18n.ts._2fa.step2 }}<br><img :src="twoFactorData.qr"><p>{{ $ts._2fa.step2Url }}<br>{{ twoFactorData.url }}</p></li>
+			<li>
+				{{ i18n.ts._2fa.step3 }}<br>
+				<MkInput v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" :spellcheck="false"><template #label>{{ i18n.ts.token }}</template></MkInput>
+				<MkButton primary @click="submit">{{ i18n.ts.done }}</MkButton>
+			</li>
+		</ol>
+		<MkInfo>{{ i18n.ts._2fa.step4 }}</MkInfo>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { hostname } from '@/config';
+import { byteify, hexify, stringify } from '@/scripts/2fa';
+import MkButton from '@/components/MkButton.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import MkInput from '@/components/form/input.vue';
+import MkSwitch from '@/components/form/switch.vue';
+import * as os from '@/os';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+
+const twoFactorData = ref<any>(null);
+const supportsCredentials = ref(!!navigator.credentials);
+const usePasswordLessLogin = ref($i!.usePasswordLessLogin);
+const registration = ref<any>(null);
+const keyName = ref('');
+const token = ref(null);
+
+function register() {
+	os.inputText({
+		title: i18n.ts.password,
+		type: 'password',
+	}).then(({ canceled, result: password }) => {
+		if (canceled) return;
+		os.api('i/2fa/register', {
+			password: password,
+		}).then(data => {
+			twoFactorData.value = data;
+		});
+	});
+}
+
+function unregister() {
+	os.inputText({
+		title: i18n.ts.password,
+		type: 'password',
+	}).then(({ canceled, result: password }) => {
+		if (canceled) return;
+		os.api('i/2fa/unregister', {
+			password: password,
+		}).then(() => {
+			usePasswordLessLogin.value = false;
+			updatePasswordLessLogin();
+		}).then(() => {
+			os.success();
+			$i!.twoFactorEnabled = false;
+		});
+	});
+}
+
+function submit() {
+	os.api('i/2fa/done', {
+		token: token.value,
+	}).then(() => {
+		os.success();
+		$i!.twoFactorEnabled = true;
+	}).catch(err => {
+		os.alert({
+			type: 'error',
+			text: err,
+		});
+	});
+}
+
+function registerKey() {
+	registration.value.saving = true;
+	os.api('i/2fa/key-done', {
+		password: registration.value.password,
+		name: keyName.value,
+		challengeId: registration.value.challengeId,
+		// we convert each 16 bits to a string to serialise
+		clientDataJSON: stringify(registration.value.credential.response.clientDataJSON),
+		attestationObject: hexify(registration.value.credential.response.attestationObject),
+	}).then(key => {
+		registration.value = null;
+		key.lastUsed = new Date();
+		os.success();
+	});
+}
+
+function unregisterKey(key) {
+	os.inputText({
+		title: i18n.ts.password,
+		type: 'password',
+	}).then(({ canceled, result: password }) => {
+		if (canceled) return;
+		return os.api('i/2fa/remove-key', {
+			password,
+			credentialId: key.id,
+		}).then(() => {
+			usePasswordLessLogin.value = false;
+			updatePasswordLessLogin();
+		}).then(() => {
+			os.success();
+		});
+	});
+}
+
+function addSecurityKey() {
+	os.inputText({
+		title: i18n.ts.password,
+		type: 'password',
+	}).then(({ canceled, result: password }) => {
+		if (canceled) return;
+		os.api('i/2fa/register-key', {
+			password,
+		}).then(reg => {
+			registration.value = {
+				password,
+				challengeId: reg!.challengeId,
+				stage: 0,
+				publicKeyOptions: {
+					challenge: byteify(reg!.challenge, 'base64'),
+					rp: {
+						id: hostname,
+						name: 'Misskey',
+					},
+					user: {
+						id: byteify($i!.id, 'ascii'),
+						name: $i!.username,
+						displayName: $i!.name,
+					},
+					pubKeyCredParams: [{ alg: -7, type: 'public-key' }],
+					timeout: 60000,
+					attestation: 'direct',
+				},
+				saving: true,
+			};
+			return navigator.credentials.create({
+				publicKey: registration.value.publicKeyOptions,
+			});
+		}).then(credential => {
+			registration.value.credential = credential;
+			registration.value.saving = false;
+			registration.value.stage = 1;
+		}).catch(err => {
+			console.warn('Error while registering?', err);
+			registration.value.error = err.message;
+			registration.value.stage = -1;
+		});
+	});
+}
+
+async function updatePasswordLessLogin() {
+	await os.api('i/2fa/password-less', {
+		value: !!usePasswordLessLogin.value,
+	});
+}
+</script>
diff --git a/packages/frontend/src/pages/settings/account-info.vue b/packages/frontend/src/pages/settings/account-info.vue
new file mode 100644
index 0000000000..ccd99c162a
--- /dev/null
+++ b/packages/frontend/src/pages/settings/account-info.vue
@@ -0,0 +1,158 @@
+<template>
+<div class="_formRoot">
+	<MkKeyValue>
+		<template #key>ID</template>
+		<template #value><span class="_monospace">{{ $i.id }}</span></template>
+	</MkKeyValue>
+
+	<FormSection>
+		<MkKeyValue>
+			<template #key>{{ i18n.ts.registeredDate }}</template>
+			<template #value><MkTime :time="$i.createdAt" mode="detail"/></template>
+		</MkKeyValue>
+	</FormSection>
+
+	<FormSection v-if="stats">
+		<template #label>{{ i18n.ts.statistics }}</template>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.notesCount }}</template>
+			<template #value>{{ number(stats.notesCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.repliesCount }}</template>
+			<template #value>{{ number(stats.repliesCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.renotesCount }}</template>
+			<template #value>{{ number(stats.renotesCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.repliedCount }}</template>
+			<template #value>{{ number(stats.repliedCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.renotedCount }}</template>
+			<template #value>{{ number(stats.renotedCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.pollVotesCount }}</template>
+			<template #value>{{ number(stats.pollVotesCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.pollVotedCount }}</template>
+			<template #value>{{ number(stats.pollVotedCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.sentReactionsCount }}</template>
+			<template #value>{{ number(stats.sentReactionsCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.receivedReactionsCount }}</template>
+			<template #value>{{ number(stats.receivedReactionsCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.noteFavoritesCount }}</template>
+			<template #value>{{ number(stats.noteFavoritesCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.followingCount }}</template>
+			<template #value>{{ number(stats.followingCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.followingCount }} ({{ i18n.ts.local }})</template>
+			<template #value>{{ number(stats.localFollowingCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.followingCount }} ({{ i18n.ts.remote }})</template>
+			<template #value>{{ number(stats.remoteFollowingCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.followersCount }}</template>
+			<template #value>{{ number(stats.followersCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.followersCount }} ({{ i18n.ts.local }})</template>
+			<template #value>{{ number(stats.localFollowersCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.followersCount }} ({{ i18n.ts.remote }})</template>
+			<template #value>{{ number(stats.remoteFollowersCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.pageLikesCount }}</template>
+			<template #value>{{ number(stats.pageLikesCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.pageLikedCount }}</template>
+			<template #value>{{ number(stats.pageLikedCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.driveFilesCount }}</template>
+			<template #value>{{ number(stats.driveFilesCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.driveUsage }}</template>
+			<template #value>{{ bytes(stats.driveUsage) }}</template>
+		</MkKeyValue>
+	</FormSection>
+
+	<FormSection>
+		<template #label>{{ i18n.ts.other }}</template>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>emailVerified</template>
+			<template #value>{{ $i.emailVerified ? i18n.ts.yes : i18n.ts.no }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>twoFactorEnabled</template>
+			<template #value>{{ $i.twoFactorEnabled ? i18n.ts.yes : i18n.ts.no }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>securityKeys</template>
+			<template #value>{{ $i.securityKeys ? i18n.ts.yes : i18n.ts.no }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>usePasswordLessLogin</template>
+			<template #value>{{ $i.usePasswordLessLogin ? i18n.ts.yes : i18n.ts.no }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>isModerator</template>
+			<template #value>{{ $i.isModerator ? i18n.ts.yes : i18n.ts.no }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>isAdmin</template>
+			<template #value>{{ $i.isAdmin ? i18n.ts.yes : i18n.ts.no }}</template>
+		</MkKeyValue>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import FormSection from '@/components/form/section.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import * as os from '@/os';
+import number from '@/filters/number';
+import bytes from '@/filters/bytes';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const stats = ref<any>({});
+
+onMounted(() => {
+	os.api('users/stats', {
+		userId: $i!.id,
+	}).then(response => {
+		stats.value = response;
+	});
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.accountInfo,
+	icon: 'ti ti-info-circle',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/accounts.vue b/packages/frontend/src/pages/settings/accounts.vue
new file mode 100644
index 0000000000..493d3b2618
--- /dev/null
+++ b/packages/frontend/src/pages/settings/accounts.vue
@@ -0,0 +1,143 @@
+<template>
+<div class="_formRoot">
+	<FormSuspense :p="init">
+		<FormButton primary @click="addAccount"><i class="ti ti-plus"></i> {{ i18n.ts.addAccount }}</FormButton>
+
+		<div v-for="account in accounts" :key="account.id" class="_panel _button lcjjdxlm" @click="menu(account, $event)">
+			<div class="avatar">
+				<MkAvatar :user="account" class="avatar"/>
+			</div>
+			<div class="body">
+				<div class="name">
+					<MkUserName :user="account"/>
+				</div>
+				<div class="acct">
+					<MkAcct :user="account"/>
+				</div>
+			</div>
+		</div>
+	</FormSuspense>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, ref } from 'vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import FormButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { getAccounts, addAccount as addAccounts, removeAccount as _removeAccount, login, $i } from '@/account';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const storedAccounts = ref<any>(null);
+const accounts = ref<any>(null);
+
+const init = async () => {
+	getAccounts().then(accounts => {
+		storedAccounts.value = accounts.filter(x => x.id !== $i!.id);
+
+		console.log(storedAccounts.value);
+
+		return os.api('users/show', {
+			userIds: storedAccounts.value.map(x => x.id),
+		});
+	}).then(response => {
+		accounts.value = response;
+		console.log(accounts.value);
+	});
+};
+
+function menu(account, ev) {
+	os.popupMenu([{
+		text: i18n.ts.switch,
+		icon: 'ti ti-switch-horizontal',
+		action: () => switchAccount(account),
+	}, {
+		text: i18n.ts.remove,
+		icon: 'ti ti-trash',
+		danger: true,
+		action: () => removeAccount(account),
+	}], ev.currentTarget ?? ev.target);
+}
+
+function addAccount(ev) {
+	os.popupMenu([{
+		text: i18n.ts.existingAccount,
+		action: () => { addExistingAccount(); },
+	}, {
+		text: i18n.ts.createAccount,
+		action: () => { createAccount(); },
+	}], ev.currentTarget ?? ev.target);
+}
+
+function removeAccount(account) {
+	_removeAccount(account.id);
+}
+
+function addExistingAccount() {
+	os.popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
+		done: res => {
+			addAccounts(res.id, res.i);
+			os.success();
+		},
+	}, 'closed');
+}
+
+function createAccount() {
+	os.popup(defineAsyncComponent(() => import('@/components/MkSignupDialog.vue')), {}, {
+		done: res => {
+			addAccounts(res.id, res.i);
+			switchAccountWithToken(res.i);
+		},
+	}, 'closed');
+}
+
+async function switchAccount(account: any) {
+	const fetchedAccounts: any[] = await getAccounts();
+	const token = fetchedAccounts.find(x => x.id === account.id).token;
+	switchAccountWithToken(token);
+}
+
+function switchAccountWithToken(token: string) {
+	login(token);
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.accounts,
+	icon: 'ti ti-users',
+});
+</script>
+
+<style lang="scss" scoped>
+.lcjjdxlm {
+	display: flex;
+	padding: 16px;
+
+	> .avatar {
+		display: block;
+		flex-shrink: 0;
+		margin: 0 12px 0 0;
+
+		> .avatar {
+			width: 50px;
+			height: 50px;
+		}
+	}
+
+	> .body {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		width: calc(100% - 62px);
+		position: relative;
+
+		> .name {
+			font-weight: bold;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/api.vue b/packages/frontend/src/pages/settings/api.vue
new file mode 100644
index 0000000000..8d7291cd10
--- /dev/null
+++ b/packages/frontend/src/pages/settings/api.vue
@@ -0,0 +1,46 @@
+<template>
+<div class="_formRoot">
+	<FormButton primary class="_formBlock" @click="generateToken">{{ i18n.ts.generateAccessToken }}</FormButton>
+	<FormLink to="/settings/apps" class="_formBlock">{{ i18n.ts.manageAccessTokens }}</FormLink>
+	<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null" class="_formBlock">API console</FormLink>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, ref } from 'vue';
+import FormLink from '@/components/form/link.vue';
+import FormButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const isDesktop = ref(window.innerWidth >= 1100);
+
+function generateToken() {
+	os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, {
+		done: async result => {
+			const { name, permissions } = result;
+			const { token } = await os.api('miauth/gen-token', {
+				session: null,
+				name: name,
+				permission: permissions,
+			});
+
+			os.alert({
+				type: 'success',
+				title: i18n.ts.token,
+				text: token,
+			});
+		},
+	}, 'closed');
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: 'API',
+	icon: 'ti ti-api',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/apps.vue b/packages/frontend/src/pages/settings/apps.vue
new file mode 100644
index 0000000000..05abadff23
--- /dev/null
+++ b/packages/frontend/src/pages/settings/apps.vue
@@ -0,0 +1,96 @@
+<template>
+<div class="_formRoot">
+	<FormPagination ref="list" :pagination="pagination">
+		<template #empty>
+			<div class="_fullinfo">
+				<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+				<div>{{ i18n.ts.nothing }}</div>
+			</div>
+		</template>
+		<template #default="{items}">
+			<div v-for="token in items" :key="token.id" class="_panel bfomjevm">
+				<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
+				<div class="body">
+					<div class="name">{{ token.name }}</div>
+					<div class="description">{{ token.description }}</div>
+					<div class="_keyValue">
+						<div>{{ i18n.ts.installedDate }}:</div>
+						<div><MkTime :time="token.createdAt"/></div>
+					</div>
+					<div class="_keyValue">
+						<div>{{ i18n.ts.lastUsedDate }}:</div>
+						<div><MkTime :time="token.lastUsedAt"/></div>
+					</div>
+					<div class="actions">
+						<button class="_button" @click="revoke(token)"><i class="ti ti-trash"></i></button>
+					</div>
+					<details>
+						<summary>{{ i18n.ts.details }}</summary>
+						<ul>
+							<li v-for="p in token.permission" :key="p">{{ $t(`_permissions.${p}`) }}</li>
+						</ul>
+					</details>
+				</div>
+			</div>
+		</template>
+	</FormPagination>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import FormPagination from '@/components/MkPagination.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const list = ref<any>(null);
+
+const pagination = {
+	endpoint: 'i/apps' as const,
+	limit: 100,
+	params: {
+		sort: '+lastUsedAt',
+	},
+};
+
+function revoke(token) {
+	os.api('i/revoke-token', { tokenId: token.id }).then(() => {
+		list.value.reload();
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.installedApps,
+	icon: 'ti ti-plug',
+});
+</script>
+
+<style lang="scss" scoped>
+.bfomjevm {
+	display: flex;
+	padding: 16px;
+
+	> .icon {
+		display: block;
+		flex-shrink: 0;
+		margin: 0 12px 0 0;
+		width: 50px;
+		height: 50px;
+		border-radius: 8px;
+	}
+
+	> .body {
+		width: calc(100% - 62px);
+		position: relative;
+
+		> .name {
+			font-weight: bold;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/custom-css.vue b/packages/frontend/src/pages/settings/custom-css.vue
new file mode 100644
index 0000000000..2caad22b7b
--- /dev/null
+++ b/packages/frontend/src/pages/settings/custom-css.vue
@@ -0,0 +1,46 @@
+<template>
+<div class="_formRoot">
+	<FormInfo warn class="_formBlock">{{ i18n.ts.customCssWarn }}</FormInfo>
+
+	<FormTextarea v-model="localCustomCss" manual-save tall class="_monospace _formBlock" style="tab-size: 2;">
+		<template #label>CSS</template>
+	</FormTextarea>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormInfo from '@/components/MkInfo.vue';
+import * as os from '@/os';
+import { unisonReload } from '@/scripts/unison-reload';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const localCustomCss = ref(localStorage.getItem('customCss') ?? '');
+
+async function apply() {
+	localStorage.setItem('customCss', localCustomCss.value);
+
+	const { canceled } = await os.confirm({
+		type: 'info',
+		text: i18n.ts.reloadToApplySetting,
+	});
+	if (canceled) return;
+
+	unisonReload();
+}
+
+watch(localCustomCss, async () => {
+	await apply();
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.customCss,
+	icon: 'ti ti-code',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/deck.vue b/packages/frontend/src/pages/settings/deck.vue
new file mode 100644
index 0000000000..82cefe05d5
--- /dev/null
+++ b/packages/frontend/src/pages/settings/deck.vue
@@ -0,0 +1,39 @@
+<template>
+<div class="_formRoot">
+	<FormSwitch v-model="navWindow">{{ i18n.ts.defaultNavigationBehaviour }}: {{ i18n.ts.openInWindow }}</FormSwitch>
+
+	<FormSwitch v-model="alwaysShowMainColumn" class="_formBlock">{{ i18n.ts._deck.alwaysShowMainColumn }}</FormSwitch>
+
+	<FormRadios v-model="columnAlign" class="_formBlock">
+		<template #label>{{ i18n.ts._deck.columnAlign }}</template>
+		<option value="left">{{ i18n.ts.left }}</option>
+		<option value="center">{{ i18n.ts.center }}</option>
+	</FormRadios>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormLink from '@/components/form/link.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormInput from '@/components/form/input.vue';
+import { deckStore } from '@/ui/deck/deck-store';
+import * as os from '@/os';
+import { unisonReload } from '@/scripts/unison-reload';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const navWindow = computed(deckStore.makeGetterSetter('navWindow'));
+const alwaysShowMainColumn = computed(deckStore.makeGetterSetter('alwaysShowMainColumn'));
+const columnAlign = computed(deckStore.makeGetterSetter('columnAlign'));
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.deck,
+	icon: 'ti ti-columns',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/delete-account.vue b/packages/frontend/src/pages/settings/delete-account.vue
new file mode 100644
index 0000000000..8a25ff39f0
--- /dev/null
+++ b/packages/frontend/src/pages/settings/delete-account.vue
@@ -0,0 +1,52 @@
+<template>
+<div class="_formRoot">
+	<FormInfo warn class="_formBlock">{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo>
+	<FormInfo class="_formBlock">{{ i18n.ts._accountDelete.sendEmail }}</FormInfo>
+	<FormButton v-if="!$i.isDeleted" danger class="_formBlock" @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</FormButton>
+	<FormButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</FormButton>
+</div>
+</template>
+
+<script lang="ts" setup>
+import FormInfo from '@/components/MkInfo.vue';
+import FormButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { signout } from '@/account';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+async function deleteAccount() {
+	{
+		const { canceled } = await os.confirm({
+			type: 'warning',
+			text: i18n.ts.deleteAccountConfirm,
+		});
+		if (canceled) return;
+	}
+
+	const { canceled, result: password } = await os.inputText({
+		title: i18n.ts.password,
+		type: 'password',
+	});
+	if (canceled) return;
+
+	await os.apiWithDialog('i/delete-account', {
+		password: password,
+	});
+
+	await os.alert({
+		title: i18n.ts._accountDelete.started,
+	});
+
+	await signout();
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts._accountDelete.accountDelete,
+	icon: 'ti ti-alert-triangle',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/drive.vue b/packages/frontend/src/pages/settings/drive.vue
new file mode 100644
index 0000000000..2d45b1add8
--- /dev/null
+++ b/packages/frontend/src/pages/settings/drive.vue
@@ -0,0 +1,145 @@
+<template>
+<div class="_formRoot">
+	<FormSection v-if="!fetching">
+		<template #label>{{ i18n.ts.usageAmount }}</template>
+		<div class="_formBlock uawsfosz">
+			<div class="meter"><div :style="meterStyle"></div></div>
+		</div>
+		<FormSplit>
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ i18n.ts.capacity }}</template>
+				<template #value>{{ bytes(capacity, 1) }}</template>
+			</MkKeyValue>
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ i18n.ts.inUse }}</template>
+				<template #value>{{ bytes(usage, 1) }}</template>
+			</MkKeyValue>
+		</FormSplit>
+	</FormSection>
+
+	<FormSection>
+		<template #label>{{ i18n.ts.statistics }}</template>
+		<MkChart src="per-user-drive" :args="{ user: $i }" span="day" :limit="7 * 5" :bar="true" :stacked="true" :detailed="false" :aspect-ratio="6"/>
+	</FormSection>
+
+	<FormSection>
+		<FormLink @click="chooseUploadFolder()">
+			{{ i18n.ts.uploadFolder }}
+			<template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template>
+			<template #suffixIcon><i class="fas fa-folder-open"></i></template>
+		</FormLink>
+		<FormSwitch v-model="keepOriginalUploading" class="_formBlock">
+			<template #label>{{ i18n.ts.keepOriginalUploading }}</template>
+			<template #caption>{{ i18n.ts.keepOriginalUploadingDescription }}</template>
+		</FormSwitch>
+		<FormSwitch v-model="alwaysMarkNsfw" class="_formBlock" @update:model-value="saveProfile()">
+			<template #label>{{ i18n.ts.alwaysMarkSensitive }}</template>
+		</FormSwitch>
+		<FormSwitch v-model="autoSensitive" class="_formBlock" @update:model-value="saveProfile()">
+			<template #label>{{ i18n.ts.enableAutoSensitive }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
+			<template #caption>{{ i18n.ts.enableAutoSensitiveDescription }}</template>
+		</FormSwitch>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import tinycolor from 'tinycolor2';
+import FormLink from '@/components/form/link.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSection from '@/components/form/section.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import FormSplit from '@/components/form/split.vue';
+import * as os from '@/os';
+import bytes from '@/filters/bytes';
+import { defaultStore } from '@/store';
+import MkChart from '@/components/MkChart.vue';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { $i } from '@/account';
+
+const fetching = ref(true);
+const usage = ref<any>(null);
+const capacity = ref<any>(null);
+const uploadFolder = ref<any>(null);
+let alwaysMarkNsfw = $ref($i.alwaysMarkNsfw);
+let autoSensitive = $ref($i.autoSensitive);
+
+const meterStyle = computed(() => {
+	return {
+		width: `${usage.value / capacity.value * 100}%`,
+		background: tinycolor({
+			h: 180 - (usage.value / capacity.value * 180),
+			s: 0.7,
+			l: 0.5,
+		}),
+	};
+});
+
+const keepOriginalUploading = computed(defaultStore.makeGetterSetter('keepOriginalUploading'));
+
+os.api('drive').then(info => {
+	capacity.value = info.capacity;
+	usage.value = info.usage;
+	fetching.value = false;
+});
+
+if (defaultStore.state.uploadFolder) {
+	os.api('drive/folders/show', {
+		folderId: defaultStore.state.uploadFolder,
+	}).then(response => {
+		uploadFolder.value = response;
+	});
+}
+
+function chooseUploadFolder() {
+	os.selectDriveFolder(false).then(async folder => {
+		defaultStore.set('uploadFolder', folder ? folder.id : null);
+		os.success();
+		if (defaultStore.state.uploadFolder) {
+			uploadFolder.value = await os.api('drive/folders/show', {
+				folderId: defaultStore.state.uploadFolder,
+			});
+		} else {
+			uploadFolder.value = null;
+		}
+	});
+}
+
+function saveProfile() {
+	os.api('i/update', {
+		alwaysMarkNsfw: !!alwaysMarkNsfw,
+		autoSensitive: !!autoSensitive,
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.drive,
+	icon: 'ti ti-cloud',
+});
+</script>
+
+<style lang="scss" scoped>
+
+@use "sass:math";
+
+.uawsfosz {
+
+	> .meter {
+		$size: 12px;
+		background: rgba(0, 0, 0, 0.1);
+		border-radius: math.div($size, 2);
+		overflow: hidden;
+
+		> div {
+			height: $size;
+			border-radius: math.div($size, 2);
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/email.vue b/packages/frontend/src/pages/settings/email.vue
new file mode 100644
index 0000000000..3fff8c6b1d
--- /dev/null
+++ b/packages/frontend/src/pages/settings/email.vue
@@ -0,0 +1,111 @@
+<template>
+<div class="_formRoot">
+	<FormSection>
+		<template #label>{{ i18n.ts.emailAddress }}</template>
+		<FormInput v-model="emailAddress" type="email" manual-save>
+			<template #prefix><i class="ti ti-mail"></i></template>
+			<template v-if="$i.email && !$i.emailVerified" #caption>{{ i18n.ts.verificationEmailSent }}</template>
+			<template v-else-if="emailAddress === $i.email && $i.emailVerified" #caption><i class="ti ti-check" style="color: var(--success);"></i> {{ i18n.ts.emailVerified }}</template>
+		</FormInput>
+	</FormSection>
+
+	<FormSection>
+		<FormSwitch :model-value="$i.receiveAnnouncementEmail" @update:model-value="onChangeReceiveAnnouncementEmail">
+			{{ i18n.ts.receiveAnnouncementFromInstance }}
+		</FormSwitch>
+	</FormSection>
+
+	<FormSection>
+		<template #label>{{ i18n.ts.emailNotification }}</template>
+		<FormSwitch v-model="emailNotification_mention" class="_formBlock">
+			{{ i18n.ts._notification._types.mention }}
+		</FormSwitch>
+		<FormSwitch v-model="emailNotification_reply" class="_formBlock">
+			{{ i18n.ts._notification._types.reply }}
+		</FormSwitch>
+		<FormSwitch v-model="emailNotification_quote" class="_formBlock">
+			{{ i18n.ts._notification._types.quote }}
+		</FormSwitch>
+		<FormSwitch v-model="emailNotification_follow" class="_formBlock">
+			{{ i18n.ts._notification._types.follow }}
+		</FormSwitch>
+		<FormSwitch v-model="emailNotification_receiveFollowRequest" class="_formBlock">
+			{{ i18n.ts._notification._types.receiveFollowRequest }}
+		</FormSwitch>
+		<FormSwitch v-model="emailNotification_groupInvited" class="_formBlock">
+			{{ i18n.ts._notification._types.groupInvited }}
+		</FormSwitch>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue';
+import FormSection from '@/components/form/section.vue';
+import FormInput from '@/components/form/input.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import * as os from '@/os';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const emailAddress = ref($i!.email);
+
+const onChangeReceiveAnnouncementEmail = (v) => {
+	os.api('i/update', {
+		receiveAnnouncementEmail: v,
+	});
+};
+
+const saveEmailAddress = () => {
+	os.inputText({
+		title: i18n.ts.password,
+		type: 'password',
+	}).then(({ canceled, result: password }) => {
+		if (canceled) return;
+		os.apiWithDialog('i/update-email', {
+			password: password,
+			email: emailAddress.value,
+		});
+	});
+};
+
+const emailNotification_mention = ref($i!.emailNotificationTypes.includes('mention'));
+const emailNotification_reply = ref($i!.emailNotificationTypes.includes('reply'));
+const emailNotification_quote = ref($i!.emailNotificationTypes.includes('quote'));
+const emailNotification_follow = ref($i!.emailNotificationTypes.includes('follow'));
+const emailNotification_receiveFollowRequest = ref($i!.emailNotificationTypes.includes('receiveFollowRequest'));
+const emailNotification_groupInvited = ref($i!.emailNotificationTypes.includes('groupInvited'));
+
+const saveNotificationSettings = () => {
+	os.api('i/update', {
+		emailNotificationTypes: [
+			...[emailNotification_mention.value ? 'mention' : null],
+			...[emailNotification_reply.value ? 'reply' : null],
+			...[emailNotification_quote.value ? 'quote' : null],
+			...[emailNotification_follow.value ? 'follow' : null],
+			...[emailNotification_receiveFollowRequest.value ? 'receiveFollowRequest' : null],
+			...[emailNotification_groupInvited.value ? 'groupInvited' : null],
+		].filter(x => x != null),
+	});
+};
+
+watch([emailNotification_mention, emailNotification_reply, emailNotification_quote, emailNotification_follow, emailNotification_receiveFollowRequest, emailNotification_groupInvited], () => {
+	saveNotificationSettings();
+});
+
+onMounted(() => {
+	watch(emailAddress, () => {
+		saveEmailAddress();
+	});
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.email,
+	icon: 'ti ti-mail',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
new file mode 100644
index 0000000000..84d99d2fd7
--- /dev/null
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -0,0 +1,196 @@
+<template>
+<div class="_formRoot">
+	<FormSelect v-model="lang" class="_formBlock">
+		<template #label>{{ i18n.ts.uiLanguage }}</template>
+		<option v-for="x in langs" :key="x[0]" :value="x[0]">{{ x[1] }}</option>
+		<template #caption>
+			<I18n :src="i18n.ts.i18nInfo" tag="span">
+				<template #link>
+					<MkLink url="https://crowdin.com/project/misskey">Crowdin</MkLink>
+				</template>
+			</I18n>
+		</template>
+	</FormSelect>
+
+	<FormRadios v-model="overridedDeviceKind" class="_formBlock">
+		<template #label>{{ i18n.ts.overridedDeviceKind }}</template>
+		<option :value="null">{{ i18n.ts.auto }}</option>
+		<option value="smartphone"><i class="ti ti-device-mobile"/> {{ i18n.ts.smartphone }}</option>
+		<option value="tablet"><i class="ti ti-device-tablet"/> {{ i18n.ts.tablet }}</option>
+		<option value="desktop"><i class="ti ti-device-desktop"/> {{ i18n.ts.desktop }}</option>
+	</FormRadios>
+
+	<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{ i18n.ts.showFixedPostForm }}</FormSwitch>
+
+	<FormSection>
+		<template #label>{{ i18n.ts.behavior }}</template>
+		<FormSwitch v-model="imageNewTab" class="_formBlock">{{ i18n.ts.openImageInNewTab }}</FormSwitch>
+		<FormSwitch v-model="enableInfiniteScroll" class="_formBlock">{{ i18n.ts.enableInfiniteScroll }}</FormSwitch>
+		<FormSwitch v-model="useReactionPickerForContextMenu" class="_formBlock">{{ i18n.ts.useReactionPickerForContextMenu }}</FormSwitch>
+		<FormSwitch v-model="disablePagesScript" class="_formBlock">{{ i18n.ts.disablePagesScript }}</FormSwitch>
+
+		<FormSelect v-model="serverDisconnectedBehavior" class="_formBlock">
+			<template #label>{{ i18n.ts.whenServerDisconnected }}</template>
+			<option value="reload">{{ i18n.ts._serverDisconnectedBehavior.reload }}</option>
+			<option value="dialog">{{ i18n.ts._serverDisconnectedBehavior.dialog }}</option>
+			<option value="quiet">{{ i18n.ts._serverDisconnectedBehavior.quiet }}</option>
+		</FormSelect>
+	</FormSection>
+
+	<FormSection>
+		<template #label>{{ i18n.ts.appearance }}</template>
+		<FormSwitch v-model="disableAnimatedMfm" class="_formBlock">{{ i18n.ts.disableAnimatedMfm }}</FormSwitch>
+		<FormSwitch v-model="reduceAnimation" class="_formBlock">{{ i18n.ts.reduceUiAnimation }}</FormSwitch>
+		<FormSwitch v-model="useBlurEffect" class="_formBlock">{{ i18n.ts.useBlurEffect }}</FormSwitch>
+		<FormSwitch v-model="useBlurEffectForModal" class="_formBlock">{{ i18n.ts.useBlurEffectForModal }}</FormSwitch>
+		<FormSwitch v-model="showGapBetweenNotesInTimeline" class="_formBlock">{{ i18n.ts.showGapBetweenNotesInTimeline }}</FormSwitch>
+		<FormSwitch v-model="loadRawImages" class="_formBlock">{{ i18n.ts.loadRawImages }}</FormSwitch>
+		<FormSwitch v-model="disableShowingAnimatedImages" class="_formBlock">{{ i18n.ts.disableShowingAnimatedImages }}</FormSwitch>
+		<FormSwitch v-model="squareAvatars" class="_formBlock">{{ i18n.ts.squareAvatars }}</FormSwitch>
+		<FormSwitch v-model="useSystemFont" class="_formBlock">{{ i18n.ts.useSystemFont }}</FormSwitch>
+		<div class="_formBlock">
+			<FormRadios v-model="emojiStyle">
+				<template #label>{{ i18n.ts.emojiStyle }}</template>
+				<option value="native">{{ i18n.ts.native }}</option>
+				<option value="fluentEmoji">Fluent Emoji</option>
+				<option value="twemoji">Twemoji</option>
+			</FormRadios>
+			<div style="margin: 8px 0 0 0; font-size: 1.5em;"><Mfm :key="emojiStyle" text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></div>
+		</div>
+
+		<FormSwitch v-model="disableDrawer" class="_formBlock">{{ i18n.ts.disableDrawer }}</FormSwitch>
+
+		<FormRadios v-model="fontSize" class="_formBlock">
+			<template #label>{{ i18n.ts.fontSize }}</template>
+			<option :value="null"><span style="font-size: 14px;">Aa</span></option>
+			<option value="1"><span style="font-size: 15px;">Aa</span></option>
+			<option value="2"><span style="font-size: 16px;">Aa</span></option>
+			<option value="3"><span style="font-size: 17px;">Aa</span></option>
+		</FormRadios>
+	</FormSection>
+
+	<FormSection>
+		<FormSwitch v-model="aiChanMode">{{ i18n.ts.aiChanMode }}</FormSwitch>
+	</FormSection>
+
+	<FormSelect v-model="instanceTicker" class="_formBlock">
+		<template #label>{{ i18n.ts.instanceTicker }}</template>
+		<option value="none">{{ i18n.ts._instanceTicker.none }}</option>
+		<option value="remote">{{ i18n.ts._instanceTicker.remote }}</option>
+		<option value="always">{{ i18n.ts._instanceTicker.always }}</option>
+	</FormSelect>
+
+	<FormSelect v-model="nsfw" class="_formBlock">
+		<template #label>{{ i18n.ts.nsfw }}</template>
+		<option value="respect">{{ i18n.ts._nsfw.respect }}</option>
+		<option value="ignore">{{ i18n.ts._nsfw.ignore }}</option>
+		<option value="force">{{ i18n.ts._nsfw.force }}</option>
+	</FormSelect>
+
+	<FormRange v-model="numberOfPageCache" :min="1" :max="10" :step="1" easing class="_formBlock">
+		<template #label>{{ i18n.ts.numberOfPageCache }}</template>
+		<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
+	</FormRange>
+
+	<FormLink to="/settings/deck" class="_formBlock">{{ i18n.ts.deck }}</FormLink>
+
+	<FormLink to="/settings/custom-css" class="_formBlock"><template #icon><i class="ti ti-code"></i></template>{{ i18n.ts.customCss }}</FormLink>
+</div>
+</template>
+
+<script lang="ts" setup>
+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';
+import FormRange from '@/components/form/range.vue';
+import FormSection from '@/components/form/section.vue';
+import FormLink from '@/components/form/link.vue';
+import MkLink from '@/components/MkLink.vue';
+import { langs } from '@/config';
+import { defaultStore } from '@/store';
+import * as os from '@/os';
+import { unisonReload } from '@/scripts/unison-reload';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const lang = ref(localStorage.getItem('lang'));
+const fontSize = ref(localStorage.getItem('fontSize'));
+const useSystemFont = ref(localStorage.getItem('useSystemFont') != null);
+
+async function reloadAsk() {
+	const { canceled } = await os.confirm({
+		type: 'info',
+		text: i18n.ts.reloadToApplySetting,
+	});
+	if (canceled) return;
+
+	unisonReload();
+}
+
+const overridedDeviceKind = computed(defaultStore.makeGetterSetter('overridedDeviceKind'));
+const serverDisconnectedBehavior = computed(defaultStore.makeGetterSetter('serverDisconnectedBehavior'));
+const reduceAnimation = computed(defaultStore.makeGetterSetter('animation', v => !v, v => !v));
+const useBlurEffectForModal = computed(defaultStore.makeGetterSetter('useBlurEffectForModal'));
+const useBlurEffect = computed(defaultStore.makeGetterSetter('useBlurEffect'));
+const showGapBetweenNotesInTimeline = computed(defaultStore.makeGetterSetter('showGapBetweenNotesInTimeline'));
+const disableAnimatedMfm = computed(defaultStore.makeGetterSetter('animatedMfm', v => !v, v => !v));
+const emojiStyle = computed(defaultStore.makeGetterSetter('emojiStyle'));
+const disableDrawer = computed(defaultStore.makeGetterSetter('disableDrawer'));
+const disableShowingAnimatedImages = computed(defaultStore.makeGetterSetter('disableShowingAnimatedImages'));
+const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
+const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));
+const nsfw = computed(defaultStore.makeGetterSetter('nsfw'));
+const disablePagesScript = computed(defaultStore.makeGetterSetter('disablePagesScript'));
+const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostForm'));
+const numberOfPageCache = computed(defaultStore.makeGetterSetter('numberOfPageCache'));
+const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'));
+const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll'));
+const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
+const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
+const aiChanMode = computed(defaultStore.makeGetterSetter('aiChanMode'));
+
+watch(lang, () => {
+	localStorage.setItem('lang', lang.value as string);
+	localStorage.removeItem('locale');
+});
+
+watch(fontSize, () => {
+	if (fontSize.value == null) {
+		localStorage.removeItem('fontSize');
+	} else {
+		localStorage.setItem('fontSize', fontSize.value);
+	}
+});
+
+watch(useSystemFont, () => {
+	if (useSystemFont.value) {
+		localStorage.setItem('useSystemFont', 't');
+	} else {
+		localStorage.removeItem('useSystemFont');
+	}
+});
+
+watch([
+	lang,
+	fontSize,
+	useSystemFont,
+	enableInfiniteScroll,
+	squareAvatars,
+	aiChanMode,
+	showGapBetweenNotesInTimeline,
+	instanceTicker,
+	overridedDeviceKind,
+], async () => {
+	await reloadAsk();
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.general,
+	icon: 'ti ti-adjustments',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/import-export.vue b/packages/frontend/src/pages/settings/import-export.vue
new file mode 100644
index 0000000000..7db267c142
--- /dev/null
+++ b/packages/frontend/src/pages/settings/import-export.vue
@@ -0,0 +1,165 @@
+<template>
+<div class="_formRoot">
+	<FormSection>
+		<template #label>{{ i18n.ts._exportOrImport.allNotes }}</template>
+		<FormFolder>
+			<template #label>{{ i18n.ts.export }}</template>
+			<template #icon><i class="ti ti-download"></i></template>
+			<MkButton primary :class="$style.button" inline @click="exportNotes()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+		</FormFolder>
+	</FormSection>
+	<FormSection>
+		<template #label>{{ i18n.ts._exportOrImport.followingList }}</template>
+		<FormFolder class="_formBlock">
+			<template #label>{{ i18n.ts.export }}</template>
+			<template #icon><i class="ti ti-download"></i></template>
+			<FormSwitch v-model="excludeMutingUsers" class="_formBlock">
+				{{ i18n.ts._exportOrImport.excludeMutingUsers }}
+			</FormSwitch>
+			<FormSwitch v-model="excludeInactiveUsers" class="_formBlock">
+				{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
+			</FormSwitch>
+			<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+		</FormFolder>
+		<FormFolder class="_formBlock">
+			<template #label>{{ i18n.ts.import }}</template>
+			<template #icon><i class="ti ti-upload"></i></template>
+			<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
+		</FormFolder>
+	</FormSection>
+	<FormSection>
+		<template #label>{{ i18n.ts._exportOrImport.userLists }}</template>
+		<FormFolder class="_formBlock">
+			<template #label>{{ i18n.ts.export }}</template>
+			<template #icon><i class="ti ti-download"></i></template>
+			<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+		</FormFolder>
+		<FormFolder class="_formBlock">
+			<template #label>{{ i18n.ts.import }}</template>
+			<template #icon><i class="ti ti-upload"></i></template>
+			<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
+		</FormFolder>
+	</FormSection>
+	<FormSection>
+		<template #label>{{ i18n.ts._exportOrImport.muteList }}</template>
+		<FormFolder class="_formBlock">
+			<template #label>{{ i18n.ts.export }}</template>
+			<template #icon><i class="ti ti-download"></i></template>
+			<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+		</FormFolder>
+		<FormFolder class="_formBlock">
+			<template #label>{{ i18n.ts.import }}</template>
+			<template #icon><i class="ti ti-upload"></i></template>
+			<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
+		</FormFolder>
+	</FormSection>
+	<FormSection>
+		<template #label>{{ i18n.ts._exportOrImport.blockingList }}</template>
+		<FormFolder class="_formBlock">
+			<template #label>{{ i18n.ts.export }}</template>
+			<template #icon><i class="ti ti-download"></i></template>
+			<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+		</FormFolder>
+		<FormFolder class="_formBlock">
+			<template #label>{{ i18n.ts.import }}</template>
+			<template #icon><i class="ti ti-upload"></i></template>
+			<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
+		</FormFolder>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import FormSection from '@/components/form/section.vue';
+import FormFolder from '@/components/form/folder.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import * as os from '@/os';
+import { selectFile } from '@/scripts/select-file';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const excludeMutingUsers = ref(false);
+const excludeInactiveUsers = ref(false);
+
+const onExportSuccess = () => {
+	os.alert({
+		type: 'info',
+		text: i18n.ts.exportRequested,
+	});
+};
+
+const onImportSuccess = () => {
+	os.alert({
+		type: 'info',
+		text: i18n.ts.importRequested,
+	});
+};
+
+const onError = (ev) => {
+	os.alert({
+		type: 'error',
+		text: ev.message,
+	});
+};
+
+const exportNotes = () => {
+	os.api('i/export-notes', {}).then(onExportSuccess).catch(onError);
+};
+
+const exportFollowing = () => {
+	os.api('i/export-following', {
+		excludeMuting: excludeMutingUsers.value,
+		excludeInactive: excludeInactiveUsers.value,
+	})
+		.then(onExportSuccess).catch(onError);
+};
+
+const exportBlocking = () => {
+	os.api('i/export-blocking', {}).then(onExportSuccess).catch(onError);
+};
+
+const exportUserLists = () => {
+	os.api('i/export-user-lists', {}).then(onExportSuccess).catch(onError);
+};
+
+const exportMuting = () => {
+	os.api('i/export-mute', {}).then(onExportSuccess).catch(onError);
+};
+
+const importFollowing = async (ev) => {
+	const file = await selectFile(ev.currentTarget ?? ev.target);
+	os.api('i/import-following', { fileId: file.id }).then(onImportSuccess).catch(onError);
+};
+
+const importUserLists = async (ev) => {
+	const file = await selectFile(ev.currentTarget ?? ev.target);
+	os.api('i/import-user-lists', { fileId: file.id }).then(onImportSuccess).catch(onError);
+};
+
+const importMuting = async (ev) => {
+	const file = await selectFile(ev.currentTarget ?? ev.target);
+	os.api('i/import-muting', { fileId: file.id }).then(onImportSuccess).catch(onError);
+};
+
+const importBlocking = async (ev) => {
+	const file = await selectFile(ev.currentTarget ?? ev.target);
+	os.api('i/import-blocking', { fileId: file.id }).then(onImportSuccess).catch(onError);
+};
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.importAndExport,
+	icon: 'ti ti-package',
+});
+</script>
+
+<style module>
+.button {
+	margin-right: 16px;
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/index.vue b/packages/frontend/src/pages/settings/index.vue
new file mode 100644
index 0000000000..01436cd554
--- /dev/null
+++ b/packages/frontend/src/pages/settings/index.vue
@@ -0,0 +1,291 @@
+<template>
+<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 || currentPage?.route.name == null" class="nav">
+					<div class="baaadecd">
+						<MkInfo v-if="emailNotConfigured" warn class="info">{{ i18n.ts.emailNotConfiguredWarning }} <MkA to="/settings/email" class="_link">{{ i18n.ts.configure }}</MkA></MkInfo>
+						<MkSuperMenu :def="menuDef" :grid="currentPage?.route.name == null"></MkSuperMenu>
+					</div>
+				</div>
+				<div v-if="!(narrow && currentPage?.route.name == null)" class="main">
+					<div class="bkzroven">
+						<RouterView/>
+					</div>
+				</div>
+			</div>
+		</div>
+	</MkSpacer>
+</mkstickycontainer>
+</template>
+
+<script setup lang="ts">
+import { computed, defineAsyncComponent, inject, nextTick, onActivated, onMounted, onUnmounted, provide, ref, watch } from 'vue';
+import { i18n } from '@/i18n';
+import MkInfo from '@/components/MkInfo.vue';
+import MkSuperMenu from '@/components/MkSuperMenu.vue';
+import { scroll } from '@/scripts/scroll';
+import { signout, $i } from '@/account';
+import { unisonReload } from '@/scripts/unison-reload';
+import { instance } from '@/instance';
+import { useRouter } from '@/router';
+import { definePageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+import * as os from '@/os';
+
+const indexInfo = {
+	title: i18n.ts.settings,
+	icon: 'ti ti-settings',
+	hideHeader: true,
+};
+const INFO = ref(indexInfo);
+const el = ref<HTMLElement | null>(null);
+const childInfo = ref(null);
+
+const router = useRouter();
+
+let narrow = $ref(false);
+const NARROW_THRESHOLD = 600;
+
+let currentPage = $computed(() => router.currentRef.value.child);
+
+const ro = new ResizeObserver((entries, observer) => {
+	if (entries.length === 0) return;
+	narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
+});
+
+const menuDef = computed(() => [{
+	title: i18n.ts.basicSettings,
+	items: [{
+		icon: 'ti ti-user',
+		text: i18n.ts.profile,
+		to: '/settings/profile',
+		active: currentPage?.route.name === 'profile',
+	}, {
+		icon: 'ti ti-lock-open',
+		text: i18n.ts.privacy,
+		to: '/settings/privacy',
+		active: currentPage?.route.name === 'privacy',
+	}, {
+		icon: 'ti ti-mood-happy',
+		text: i18n.ts.reaction,
+		to: '/settings/reaction',
+		active: currentPage?.route.name === 'reaction',
+	}, {
+		icon: 'ti ti-cloud',
+		text: i18n.ts.drive,
+		to: '/settings/drive',
+		active: currentPage?.route.name === 'drive',
+	}, {
+		icon: 'ti ti-bell',
+		text: i18n.ts.notifications,
+		to: '/settings/notifications',
+		active: currentPage?.route.name === 'notifications',
+	}, {
+		icon: 'ti ti-mail',
+		text: i18n.ts.email,
+		to: '/settings/email',
+		active: currentPage?.route.name === 'email',
+	}, {
+		icon: 'ti ti-share',
+		text: i18n.ts.integration,
+		to: '/settings/integration',
+		active: currentPage?.route.name === 'integration',
+	}, {
+		icon: 'ti ti-lock',
+		text: i18n.ts.security,
+		to: '/settings/security',
+		active: currentPage?.route.name === 'security',
+	}],
+}, {
+	title: i18n.ts.clientSettings,
+	items: [{
+		icon: 'ti ti-adjustments',
+		text: i18n.ts.general,
+		to: '/settings/general',
+		active: currentPage?.route.name === 'general',
+	}, {
+		icon: 'ti ti-palette',
+		text: i18n.ts.theme,
+		to: '/settings/theme',
+		active: currentPage?.route.name === 'theme',
+	}, {
+		icon: 'ti ti-menu-2',
+		text: i18n.ts.navbar,
+		to: '/settings/navbar',
+		active: currentPage?.route.name === 'navbar',
+	}, {
+		icon: 'ti ti-equal-double',
+		text: i18n.ts.statusbar,
+		to: '/settings/statusbar',
+		active: currentPage?.route.name === 'statusbar',
+	}, {
+		icon: 'ti ti-music',
+		text: i18n.ts.sounds,
+		to: '/settings/sounds',
+		active: currentPage?.route.name === 'sounds',
+	}, {
+		icon: 'ti ti-plug',
+		text: i18n.ts.plugins,
+		to: '/settings/plugin',
+		active: currentPage?.route.name === 'plugin',
+	}],
+}, {
+	title: i18n.ts.otherSettings,
+	items: [{
+		icon: 'ti ti-package',
+		text: i18n.ts.importAndExport,
+		to: '/settings/import-export',
+		active: currentPage?.route.name === 'import-export',
+	}, {
+		icon: 'ti ti-planet-off',
+		text: i18n.ts.instanceMute,
+		to: '/settings/instance-mute',
+		active: currentPage?.route.name === 'instance-mute',
+	}, {
+		icon: 'ti ti-ban',
+		text: i18n.ts.muteAndBlock,
+		to: '/settings/mute-block',
+		active: currentPage?.route.name === 'mute-block',
+	}, {
+		icon: 'ti ti-message-off',
+		text: i18n.ts.wordMute,
+		to: '/settings/word-mute',
+		active: currentPage?.route.name === 'word-mute',
+	}, {
+		icon: 'ti ti-api',
+		text: 'API',
+		to: '/settings/api',
+		active: currentPage?.route.name === 'api',
+	}, {
+		icon: 'ti ti-webhook',
+		text: 'Webhook',
+		to: '/settings/webhook',
+		active: currentPage?.route.name === 'webhook',
+	}, {
+		icon: 'ti ti-dots',
+		text: i18n.ts.other,
+		to: '/settings/other',
+		active: currentPage?.route.name === 'other',
+	}],
+}, {
+	items: [{
+		icon: 'ti ti-device-floppy',
+		text: i18n.ts.preferencesBackups,
+		to: '/settings/preferences-backups',
+		active: currentPage?.route.name === 'preferences-backups',
+	}, {
+		type: 'button',
+		icon: 'ti ti-trash',
+		text: i18n.ts.clearCache,
+		action: () => {
+			localStorage.removeItem('locale');
+			localStorage.removeItem('theme');
+			unisonReload();
+		},
+	}, {
+		type: 'button',
+		icon: 'ti ti-power',
+		text: i18n.ts.logout,
+		action: async () => {
+			const { canceled } = await os.confirm({
+				type: 'warning',
+				text: i18n.ts.logoutConfirm,
+			});
+			if (canceled) return;
+			signout();
+		},
+		danger: true,
+	}],
+}]);
+
+watch($$(narrow), () => {
+});
+
+onMounted(() => {
+	ro.observe(el.value);
+
+	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
+
+	if (!narrow && currentPage?.route.name == null) {
+		router.replace('/settings/profile');
+	}
+});
+
+onActivated(() => {
+	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
+
+	if (!narrow && currentPage?.route.name == null) {
+		router.replace('/settings/profile');
+	}
+});
+
+onUnmounted(() => {
+	ro.disconnect();
+});
+
+const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
+
+provideMetadataReceiver((info) => {
+	if (info == null) {
+		childInfo.value = null;
+	} else {
+		childInfo.value = info;
+	}
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(INFO);
+// w 890
+// h 700
+</script>
+
+<style lang="scss" scoped>
+.vvcocwet {
+	> .body {
+		> .nav {
+			.baaadecd {
+				> .info {
+					margin: 16px 0;
+				}
+
+				> .accounts {
+					> .avatar {
+						display: block;
+						width: 50px;
+						height: 50px;
+						margin: 8px auto 16px auto;
+					}
+				}
+			}
+		}
+
+		> .main {
+			.bkzroven {
+			}
+		}
+	}
+
+	&.wide {
+		> .body {
+			display: flex;
+			height: 100%;
+
+			> .nav {
+				width: 34%;
+				padding-right: 32px;
+				box-sizing: border-box;
+			}
+
+			> .main {
+				flex: 1;
+				min-width: 0;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/instance-mute.vue b/packages/frontend/src/pages/settings/instance-mute.vue
new file mode 100644
index 0000000000..54504de188
--- /dev/null
+++ b/packages/frontend/src/pages/settings/instance-mute.vue
@@ -0,0 +1,53 @@
+<template>
+<div class="_formRoot">
+	<MkInfo>{{ i18n.ts._instanceMute.title }}</MkInfo>
+	<FormTextarea v-model="instanceMutes" class="_formBlock">
+		<template #label>{{ i18n.ts._instanceMute.heading }}</template>
+		<template #caption>{{ i18n.ts._instanceMute.instanceMuteDescription }}<br>{{ i18n.ts._instanceMute.instanceMuteDescription2 }}</template>
+	</FormTextarea>
+	<MkButton primary :disabled="!changed" class="_formBlock" @click="save()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import MkButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const instanceMutes = ref($i!.mutedInstances.join('\n'));
+const changed = ref(false);
+
+async function save() {
+	let mutes = instanceMutes.value
+		.trim().split('\n')
+		.map(el => el.trim())
+		.filter(el => el);
+
+	await os.api('i/update', {
+		mutedInstances: mutes,
+	});
+
+	changed.value = false;
+
+	// Refresh filtered list to signal to the user how they've been saved
+	instanceMutes.value = mutes.join('\n');
+}
+
+watch(instanceMutes, () => {
+	changed.value = true;
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.instanceMute,
+	icon: 'ti ti-planet-off',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/integration.vue b/packages/frontend/src/pages/settings/integration.vue
new file mode 100644
index 0000000000..557fe778e6
--- /dev/null
+++ b/packages/frontend/src/pages/settings/integration.vue
@@ -0,0 +1,99 @@
+<template>
+<div class="_formRoot">
+	<FormSection v-if="instance.enableTwitterIntegration">
+		<template #label><i class="ti ti-brand-twitter"></i> Twitter</template>
+		<p v-if="integrations.twitter">{{ i18n.ts.connectedTo }}: <a :href="`https://twitter.com/${integrations.twitter.screenName}`" rel="nofollow noopener" target="_blank">@{{ integrations.twitter.screenName }}</a></p>
+		<MkButton v-if="integrations.twitter" danger @click="disconnectTwitter">{{ i18n.ts.disconnectService }}</MkButton>
+		<MkButton v-else primary @click="connectTwitter">{{ i18n.ts.connectService }}</MkButton>
+	</FormSection>
+
+	<FormSection v-if="instance.enableDiscordIntegration">
+		<template #label><i class="ti ti-brand-discord"></i> Discord</template>
+		<p v-if="integrations.discord">{{ i18n.ts.connectedTo }}: <a :href="`https://discord.com/users/${integrations.discord.id}`" rel="nofollow noopener" target="_blank">@{{ integrations.discord.username }}#{{ integrations.discord.discriminator }}</a></p>
+		<MkButton v-if="integrations.discord" danger @click="disconnectDiscord">{{ i18n.ts.disconnectService }}</MkButton>
+		<MkButton v-else primary @click="connectDiscord">{{ i18n.ts.connectService }}</MkButton>
+	</FormSection>
+
+	<FormSection v-if="instance.enableGithubIntegration">
+		<template #label><i class="ti ti-brand-github"></i> GitHub</template>
+		<p v-if="integrations.github">{{ i18n.ts.connectedTo }}: <a :href="`https://github.com/${integrations.github.login}`" rel="nofollow noopener" target="_blank">@{{ integrations.github.login }}</a></p>
+		<MkButton v-if="integrations.github" danger @click="disconnectGithub">{{ i18n.ts.disconnectService }}</MkButton>
+		<MkButton v-else primary @click="connectGithub">{{ i18n.ts.connectService }}</MkButton>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import { apiUrl } from '@/config';
+import FormSection from '@/components/form/section.vue';
+import MkButton from '@/components/MkButton.vue';
+import { $i } from '@/account';
+import { instance } from '@/instance';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const twitterForm = ref<Window | null>(null);
+const discordForm = ref<Window | null>(null);
+const githubForm = ref<Window | null>(null);
+
+const integrations = computed(() => $i!.integrations);
+
+function openWindow(service: string, type: string) {
+	return window.open(`${apiUrl}/${type}/${service}`,
+		`${service}_${type}_window`,
+		'height=570, width=520',
+	);
+}
+
+function connectTwitter() {
+	twitterForm.value = openWindow('twitter', 'connect');
+}
+
+function disconnectTwitter() {
+	openWindow('twitter', 'disconnect');
+}
+
+function connectDiscord() {
+	discordForm.value = openWindow('discord', 'connect');
+}
+
+function disconnectDiscord() {
+	openWindow('discord', 'disconnect');
+}
+
+function connectGithub() {
+	githubForm.value = openWindow('github', 'connect');
+}
+
+function disconnectGithub() {
+	openWindow('github', 'disconnect');
+}
+
+onMounted(() => {
+	document.cookie = `igi=${$i!.token}; path=/;` +
+		' max-age=31536000;' +
+		(document.location.protocol.startsWith('https') ? ' secure' : '');
+
+	watch(integrations, () => {
+		if (integrations.value.twitter) {
+			if (twitterForm.value) twitterForm.value.close();
+		}
+		if (integrations.value.discord) {
+			if (discordForm.value) discordForm.value.close();
+		}
+		if (integrations.value.github) {
+			if (githubForm.value) githubForm.value.close();
+		}
+	});
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.integration,
+	icon: 'ti ti-share',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/mute-block.vue b/packages/frontend/src/pages/settings/mute-block.vue
new file mode 100644
index 0000000000..1cf33d34db
--- /dev/null
+++ b/packages/frontend/src/pages/settings/mute-block.vue
@@ -0,0 +1,61 @@
+<template>
+<div class="_formRoot">
+	<MkTab v-model="tab" style="margin-bottom: var(--margin);">
+		<option value="mute">{{ i18n.ts.mutedUsers }}</option>
+		<option value="block">{{ i18n.ts.blockedUsers }}</option>
+	</MkTab>
+	<div v-if="tab === 'mute'">
+		<MkPagination :pagination="mutingPagination" class="muting">
+			<template #empty><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template>
+			<template #default="{items}">
+				<FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)">
+					<MkAcct :user="mute.mutee"/>
+				</FormLink>
+			</template>
+		</MkPagination>
+	</div>
+	<div v-if="tab === 'block'">
+		<MkPagination :pagination="blockingPagination" class="blocking">
+			<template #empty><FormInfo>{{ i18n.ts.noUsers }}</FormInfo></template>
+			<template #default="{items}">
+				<FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)">
+					<MkAcct :user="block.blockee"/>
+				</FormLink>
+			</template>
+		</MkPagination>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkPagination from '@/components/MkPagination.vue';
+import MkTab from '@/components/MkTab.vue';
+import FormInfo from '@/components/MkInfo.vue';
+import FormLink from '@/components/form/link.vue';
+import { userPage } from '@/filters/user';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let tab = $ref('mute');
+
+const mutingPagination = {
+	endpoint: 'mute/list' as const,
+	limit: 10,
+};
+
+const blockingPagination = {
+	endpoint: 'blocking/list' as const,
+	limit: 10,
+};
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.muteAndBlock,
+	icon: 'ti ti-ban',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/navbar.vue b/packages/frontend/src/pages/settings/navbar.vue
new file mode 100644
index 0000000000..0b2776ec90
--- /dev/null
+++ b/packages/frontend/src/pages/settings/navbar.vue
@@ -0,0 +1,87 @@
+<template>
+<div class="_formRoot">
+	<FormTextarea v-model="items" tall manual-save class="_formBlock">
+		<template #label>{{ i18n.ts.navbar }}</template>
+		<template #caption><button class="_textButton" @click="addItem">{{ i18n.ts.addItem }}</button></template>
+	</FormTextarea>
+
+	<FormRadios v-model="menuDisplay" class="_formBlock">
+		<template #label>{{ i18n.ts.display }}</template>
+		<option value="sideFull">{{ i18n.ts._menuDisplay.sideFull }}</option>
+		<option value="sideIcon">{{ i18n.ts._menuDisplay.sideIcon }}</option>
+		<option value="top">{{ i18n.ts._menuDisplay.top }}</option>
+		<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ i18n.ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
+	</FormRadios>
+
+	<FormButton danger class="_formBlock" @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { navbarItemDef } from '@/navbar';
+import { defaultStore } from '@/store';
+import { unisonReload } from '@/scripts/unison-reload';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const items = ref(defaultStore.state.menu.join('\n'));
+
+const split = computed(() => items.value.trim().split('\n').filter(x => x.trim() !== ''));
+const menuDisplay = computed(defaultStore.makeGetterSetter('menuDisplay'));
+
+async function reloadAsk() {
+	const { canceled } = await os.confirm({
+		type: 'info',
+		text: i18n.ts.reloadToApplySetting,
+	});
+	if (canceled) return;
+
+	unisonReload();
+}
+
+async function addItem() {
+	const menu = Object.keys(navbarItemDef).filter(k => !defaultStore.state.menu.includes(k));
+	const { canceled, result: item } = await os.select({
+		title: i18n.ts.addItem,
+		items: [...menu.map(k => ({
+			value: k, text: i18n.ts[navbarItemDef[k].title],
+		})), {
+			value: '-', text: i18n.ts.divider,
+		}],
+	});
+	if (canceled) return;
+	items.value = [...split.value, item].join('\n');
+}
+
+async function save() {
+	defaultStore.set('menu', split.value);
+	await reloadAsk();
+}
+
+function reset() {
+	defaultStore.reset('menu');
+	items.value = defaultStore.state.menu.join('\n');
+}
+
+watch(items, async () => {
+	await save();
+});
+
+watch(menuDisplay, async () => {
+	await reloadAsk();
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.navbar,
+	icon: 'ti ti-list',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/notifications.vue b/packages/frontend/src/pages/settings/notifications.vue
new file mode 100644
index 0000000000..e85fede157
--- /dev/null
+++ b/packages/frontend/src/pages/settings/notifications.vue
@@ -0,0 +1,90 @@
+<template>
+<div class="_formRoot">
+	<FormLink class="_formBlock" @click="configure"><template #icon><i class="ti ti-settings"></i></template>{{ i18n.ts.notificationSetting }}</FormLink>
+	<FormSection>
+		<FormLink class="_formBlock" @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</FormLink>
+		<FormLink class="_formBlock" @click="readAllUnreadNotes">{{ i18n.ts.markAsReadAllUnreadNotes }}</FormLink>
+		<FormLink class="_formBlock" @click="readAllMessagingMessages">{{ i18n.ts.markAsReadAllTalkMessages }}</FormLink>
+	</FormSection>
+	<FormSection>
+		<template #label>{{ i18n.ts.pushNotification }}</template>
+		<MkPushNotificationAllowButton ref="allowButton" />
+		<FormSwitch class="_formBlock" :disabled="!pushRegistrationInServer" :model-value="sendReadMessage" @update:model-value="onChangeSendReadMessage">
+			<template #label>{{ i18n.ts.sendPushNotificationReadMessage }}</template>
+			<template #caption>
+				<I18n :src="i18n.ts.sendPushNotificationReadMessageCaption">
+					<template #emptyPushNotificationMessage>{{ i18n.ts._notification.emptyPushNotificationMessage }}</template>
+				</I18n>
+			</template>
+		</FormSwitch>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue';
+import { notificationTypes } from 'misskey-js';
+import FormButton from '@/components/MkButton.vue';
+import FormLink from '@/components/form/link.vue';
+import FormSection from '@/components/form/section.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import * as os from '@/os';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
+
+let allowButton = $ref<InstanceType<typeof MkPushNotificationAllowButton>>();
+let pushRegistrationInServer = $computed(() => allowButton?.pushRegistrationInServer);
+let sendReadMessage = $computed(() => pushRegistrationInServer?.sendReadMessage || false);
+
+async function readAllUnreadNotes() {
+	await os.api('i/read-all-unread-notes');
+}
+
+async function readAllMessagingMessages() {
+	await os.api('i/read-all-messaging-messages');
+}
+
+async function readAllNotifications() {
+	await os.api('notifications/mark-all-as-read');
+}
+
+function configure() {
+	const includingTypes = notificationTypes.filter(x => !$i!.mutingNotificationTypes.includes(x));
+	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
+		includingTypes,
+		showGlobalToggle: false,
+	}, {
+		done: async (res) => {
+			const { includingTypes: value } = res;
+			await os.apiWithDialog('i/update', {
+				mutingNotificationTypes: notificationTypes.filter(x => !value.includes(x)),
+			}).then(i => {
+				$i!.mutingNotificationTypes = i.mutingNotificationTypes;
+			});
+		},
+	}, 'closed');
+}
+
+function onChangeSendReadMessage(v: boolean) {
+	if (!pushRegistrationInServer) return;
+
+	os.apiWithDialog('sw/update-registration', {
+		endpoint: pushRegistrationInServer.endpoint,
+		sendReadMessage: v,
+	}).then(res => {
+		if (!allowButton)	return;
+		allowButton.pushRegistrationInServer = res;
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.notifications,
+	icon: 'ti ti-bell',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/other.vue b/packages/frontend/src/pages/settings/other.vue
new file mode 100644
index 0000000000..40bb202789
--- /dev/null
+++ b/packages/frontend/src/pages/settings/other.vue
@@ -0,0 +1,47 @@
+<template>
+<div class="_formRoot">
+	<FormSwitch v-model="$i.injectFeaturedNote" class="_formBlock" @update:model-value="onChangeInjectFeaturedNote">
+		{{ i18n.ts.showFeaturedNotesInTimeline }}
+	</FormSwitch>
+
+	<!--
+	<FormSwitch v-model="reportError" class="_formBlock">{{ i18n.ts.sendErrorReports }}<template #caption>{{ i18n.ts.sendErrorReportsDescription }}</template></FormSwitch>
+	-->
+
+	<FormLink to="/settings/account-info" class="_formBlock">{{ i18n.ts.accountInfo }}</FormLink>
+
+	<FormLink to="/registry" class="_formBlock"><template #icon><i class="ti ti-adjustments"></i></template>{{ i18n.ts.registry }}</FormLink>
+
+	<FormLink to="/settings/delete-account" class="_formBlock"><template #icon><i class="ti ti-alert-triangle"></i></template>{{ i18n.ts.closeAccount }}</FormLink>
+</div>
+</template>
+
+<script lang="ts" setup>
+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 { $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,
+	}).then((i) => {
+		$i!.injectFeaturedNote = i.injectFeaturedNote;
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.other,
+	icon: 'ti ti-dots',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/plugin.install.vue b/packages/frontend/src/pages/settings/plugin.install.vue
new file mode 100644
index 0000000000..550bba242e
--- /dev/null
+++ b/packages/frontend/src/pages/settings/plugin.install.vue
@@ -0,0 +1,124 @@
+<template>
+<div class="_formRoot">
+	<FormInfo warn class="_formBlock">{{ i18n.ts._plugin.installWarn }}</FormInfo>
+
+	<FormTextarea v-model="code" tall class="_formBlock">
+		<template #label>{{ i18n.ts.code }}</template>
+	</FormTextarea>
+
+	<div class="_formBlock">
+		<FormButton :disabled="code == null" primary inline @click="install"><i class="ti ti-check"></i> {{ i18n.ts.install }}</FormButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, nextTick, ref } from 'vue';
+import { AiScript, parse } from '@syuilo/aiscript';
+import { serialize } from '@syuilo/aiscript/built/serializer';
+import { v4 as uuid } from 'uuid';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormButton from '@/components/MkButton.vue';
+import FormInfo from '@/components/MkInfo.vue';
+import * as os from '@/os';
+import { ColdDeviceStorage } from '@/store';
+import { unisonReload } from '@/scripts/unison-reload';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const code = ref(null);
+
+function installPlugin({ id, meta, ast, token }) {
+	ColdDeviceStorage.set('plugins', ColdDeviceStorage.get('plugins').concat({
+		...meta,
+		id,
+		active: true,
+		configData: {},
+		token: token,
+		ast: ast,
+	}));
+}
+
+async function install() {
+	let ast;
+	try {
+		ast = parse(code.value);
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			text: 'Syntax error :(',
+		});
+		return;
+	}
+
+	const meta = AiScript.collectMetadata(ast);
+	if (meta == null) {
+		os.alert({
+			type: 'error',
+			text: 'No metadata found :(',
+		});
+		return;
+	}
+
+	const metadata = meta.get(null);
+	if (metadata == null) {
+		os.alert({
+			type: 'error',
+			text: 'No metadata found :(',
+		});
+		return;
+	}
+
+	const { name, version, author, description, permissions, config } = metadata;
+	if (name == null || version == null || author == null) {
+		os.alert({
+			type: 'error',
+			text: 'Required property not found :(',
+		});
+		return;
+	}
+
+	const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => {
+		os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {
+			title: i18n.ts.tokenRequested,
+			information: i18n.ts.pluginTokenRequestedDescription,
+			initialName: name,
+			initialPermissions: permissions,
+		}, {
+			done: async result => {
+				const { name, permissions } = result;
+				const { token } = await os.api('miauth/gen-token', {
+					session: null,
+					name: name,
+					permission: permissions,
+				});
+				res(token);
+			},
+		}, 'closed');
+	});
+
+	installPlugin({
+		id: uuid(),
+		meta: {
+			name, version, author, description, permissions, config,
+		},
+		token,
+		ast: serialize(ast),
+	});
+
+	os.success();
+
+	nextTick(() => {
+		unisonReload();
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts._plugin.install,
+	icon: 'ti ti-download',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/plugin.vue b/packages/frontend/src/pages/settings/plugin.vue
new file mode 100644
index 0000000000..905efd833d
--- /dev/null
+++ b/packages/frontend/src/pages/settings/plugin.vue
@@ -0,0 +1,98 @@
+<template>
+<div class="_formRoot">
+	<FormLink to="/settings/plugin/install"><template #icon><i class="ti ti-download"></i></template>{{ i18n.ts._plugin.install }}</FormLink>
+
+	<FormSection>
+		<template #label>{{ i18n.ts.manage }}</template>
+		<div v-for="plugin in plugins" :key="plugin.id" class="_formBlock _panel" style="padding: 20px;">
+			<span style="display: flex;"><b>{{ plugin.name }}</b><span style="margin-left: auto;">v{{ plugin.version }}</span></span>
+
+			<FormSwitch class="_formBlock" :model-value="plugin.active" @update:model-value="changeActive(plugin, $event)">{{ i18n.ts.makeActive }}</FormSwitch>
+
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ i18n.ts.author }}</template>
+				<template #value>{{ plugin.author }}</template>
+			</MkKeyValue>
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ i18n.ts.description }}</template>
+				<template #value>{{ plugin.description }}</template>
+			</MkKeyValue>
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ i18n.ts.permission }}</template>
+				<template #value>{{ plugin.permission }}</template>
+			</MkKeyValue>
+
+			<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+				<MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="ti ti-settings"></i> {{ i18n.ts.settings }}</MkButton>
+				<MkButton inline danger @click="uninstall(plugin)"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</MkButton>
+			</div>
+		</div>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, ref } from 'vue';
+import FormLink from '@/components/form/link.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSection from '@/components/form/section.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import * as os from '@/os';
+import { ColdDeviceStorage } from '@/store';
+import { unisonReload } from '@/scripts/unison-reload';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const plugins = ref(ColdDeviceStorage.get('plugins'));
+
+function uninstall(plugin) {
+	ColdDeviceStorage.set('plugins', plugins.value.filter(x => x.id !== plugin.id));
+	os.success();
+	nextTick(() => {
+		unisonReload();
+	});
+}
+
+// TODO: この処理をstore側にactionとして移動し、設定画面を開くAiScriptAPIを実装できるようにする
+async function config(plugin) {
+	const config = plugin.config;
+	for (const key in plugin.configData) {
+		config[key].default = plugin.configData[key];
+	}
+
+	const { canceled, result } = await os.form(plugin.name, config);
+	if (canceled) return;
+
+	const coldPlugins = ColdDeviceStorage.get('plugins');
+	coldPlugins.find(p => p.id === plugin.id)!.configData = result;
+	ColdDeviceStorage.set('plugins', coldPlugins);
+
+	nextTick(() => {
+		location.reload();
+	});
+}
+
+function changeActive(plugin, active) {
+	const coldPlugins = ColdDeviceStorage.get('plugins');
+	coldPlugins.find(p => p.id === plugin.id)!.active = active;
+	ColdDeviceStorage.set('plugins', coldPlugins);
+
+	nextTick(() => {
+		location.reload();
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.plugins,
+	icon: 'ti ti-plug',
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/frontend/src/pages/settings/preferences-backups.vue b/packages/frontend/src/pages/settings/preferences-backups.vue
new file mode 100644
index 0000000000..f427a170c4
--- /dev/null
+++ b/packages/frontend/src/pages/settings/preferences-backups.vue
@@ -0,0 +1,444 @@
+<template>
+<div class="_formRoot">
+	<div :class="$style.buttons">
+		<MkButton inline primary @click="saveNew">{{ ts._preferencesBackups.saveNew }}</MkButton>
+		<MkButton inline @click="loadFile">{{ ts._preferencesBackups.loadFile }}</MkButton>
+	</div>
+
+	<FormSection>
+		<template #label>{{ ts._preferencesBackups.list }}</template>
+		<template v-if="profiles && Object.keys(profiles).length > 0">
+			<div
+				v-for="(profile, id) in profiles"
+				:key="id"
+				class="_formBlock _panel"
+				:class="$style.profile"
+				@click="$event => menu($event, id)"
+				@contextmenu.prevent.stop="$event => menu($event, id)"
+			>
+				<div :class="$style.profileName">{{ profile.name }}</div>
+				<div :class="$style.profileTime">{{ t('_preferencesBackups.createdAt', { date: (new Date(profile.createdAt)).toLocaleDateString(), time: (new Date(profile.createdAt)).toLocaleTimeString() }) }}</div>
+				<div v-if="profile.updatedAt" :class="$style.profileTime">{{ t('_preferencesBackups.updatedAt', { date: (new Date(profile.updatedAt)).toLocaleDateString(), time: (new Date(profile.updatedAt)).toLocaleTimeString() }) }}</div>
+			</div>
+		</template>
+		<div v-else-if="profiles">
+			<MkInfo>{{ ts._preferencesBackups.noBackups }}</MkInfo>
+		</div>
+		<MkLoading v-else/>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, useCssModule } from 'vue';
+import { v4 as uuid } from 'uuid';
+import FormSection from '@/components/form/section.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import * as os from '@/os';
+import { ColdDeviceStorage, defaultStore } from '@/store';
+import { unisonReload } from '@/scripts/unison-reload';
+import { stream } from '@/stream';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import { version, host } from '@/config';
+import { definePageMetadata } from '@/scripts/page-metadata';
+const { t, ts } = i18n;
+
+useCssModule();
+
+const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
+	'menu',
+	'visibility',
+	'localOnly',
+	'statusbars',
+	'widgets',
+	'tl',
+	'overridedDeviceKind',
+	'serverDisconnectedBehavior',
+	'nsfw',
+	'animation',
+	'animatedMfm',
+	'loadRawImages',
+	'imageNewTab',
+	'disableShowingAnimatedImages',
+	'disablePagesScript',
+	'emojiStyle',
+	'disableDrawer',
+	'useBlurEffectForModal',
+	'useBlurEffect',
+	'showFixedPostForm',
+	'enableInfiniteScroll',
+	'useReactionPickerForContextMenu',
+	'showGapBetweenNotesInTimeline',
+	'instanceTicker',
+	'reactionPickerSize',
+	'reactionPickerWidth',
+	'reactionPickerHeight',
+	'reactionPickerUseDrawerForMobile',
+	'defaultSideView',
+	'menuDisplay',
+	'reportError',
+	'squareAvatars',
+	'numberOfPageCache',
+	'aiChanMode',
+];
+const coldDeviceStorageSaveKeys: (keyof typeof ColdDeviceStorage.default)[] = [
+	'lightTheme',
+	'darkTheme',
+	'syncDeviceDarkMode',
+	'plugins',
+	'mediaVolume',
+	'sound_masterVolume',
+	'sound_note',
+	'sound_noteMy',
+	'sound_notification',
+	'sound_chat',
+	'sound_chatBg',
+	'sound_antenna',
+	'sound_channel',
+];
+
+const scope = ['clientPreferencesProfiles'];
+
+const profileProps = ['name', 'createdAt', 'updatedAt', 'misskeyVersion', 'settings'];
+
+type Profile = {
+	name: string;
+	createdAt: string;
+	updatedAt: string | null;
+	misskeyVersion: string;
+	host: string;
+	settings: {
+		hot: Record<keyof typeof defaultStoreSaveKeys, unknown>;
+		cold: Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
+		fontSize: string | null;
+		useSystemFont: 't' | null;
+		wallpaper: string | null;
+	};
+};
+
+const connection = $i && stream.useChannel('main');
+
+let profiles = $ref<Record<string, Profile> | null>(null);
+
+os.api('i/registry/get-all', { scope })
+	.then(res => {
+		profiles = res || {};
+	});
+
+function isObject(value: unknown): value is Record<string, unknown> {
+	return value != null && typeof value === 'object' && !Array.isArray(value);
+}
+
+function validate(profile: unknown): void {
+	if (!isObject(profile)) throw new Error('not an object');
+
+	// Check if unnecessary properties exist
+	if (Object.keys(profile).some(key => !profileProps.includes(key))) throw new Error('Unnecessary properties exist');
+
+	if (!profile.name) throw new Error('Missing required prop: name');
+	if (!profile.misskeyVersion) throw new Error('Missing required prop: misskeyVersion');
+	
+	// Check if createdAt and updatedAt is Date
+	// https://zenn.dev/lollipop_onl/articles/eoz-judge-js-invalid-date
+	if (!profile.createdAt || Number.isNaN(new Date(profile.createdAt).getTime())) throw new Error('createdAt is falsy or not Date');
+	if (profile.updatedAt) {
+		if (Number.isNaN(new Date(profile.updatedAt).getTime())) {
+			throw new Error('updatedAt is not Date');
+		}
+	} else if (profile.updatedAt !== null) {
+		throw new Error('updatedAt is not null');
+	}
+
+	if (!profile.settings) throw new Error('Missing required prop: settings');
+	if (!isObject(profile.settings)) throw new Error('Invalid prop: settings');
+}
+
+function getSettings(): Profile['settings'] {
+	const hot = {} as Record<keyof typeof defaultStoreSaveKeys, unknown>;
+	for (const key of defaultStoreSaveKeys) {
+		hot[key] = defaultStore.state[key];
+	}
+
+	const cold = {} as Record<keyof typeof coldDeviceStorageSaveKeys, unknown>;
+	for (const key of coldDeviceStorageSaveKeys) {
+		cold[key] = ColdDeviceStorage.get(key);
+	}
+
+	return {
+		hot,
+		cold,
+		fontSize: localStorage.getItem('fontSize'),
+		useSystemFont: localStorage.getItem('useSystemFont') as 't' | null,
+		wallpaper: localStorage.getItem('wallpaper'),
+	};
+}
+
+async function saveNew(): Promise<void> {
+	if (!profiles) return;
+
+	const { canceled, result: name } = await os.inputText({
+		title: ts._preferencesBackups.inputName,
+	});
+	if (canceled) return;
+
+	if (Object.values(profiles).some(x => x.name === name)) {
+		return os.alert({
+			title: ts._preferencesBackups.cannotSave,
+			text: t('_preferencesBackups.nameAlreadyExists', { name }),
+		});
+	}
+
+	const id = uuid();
+	const profile: Profile = {
+		name,
+		createdAt: (new Date()).toISOString(),
+		updatedAt: null,
+		misskeyVersion: version,
+		host,
+		settings: getSettings(),
+	};
+	await os.apiWithDialog('i/registry/set', { scope, key: id, value: profile });
+}
+
+function loadFile(): void {
+	const input = document.createElement('input');
+	input.type = 'file';
+	input.multiple = false;
+	input.onchange = async () => {
+		if (!profiles) return;
+		if (!input.files || input.files.length === 0) return;
+
+		const file = input.files[0];
+
+		if (file.type !== 'application/json') {
+			return os.alert({
+				type: 'error',
+				title: ts._preferencesBackups.cannotLoad,
+				text: ts._preferencesBackups.invalidFile,
+			});
+		}
+
+		let profile: Profile;
+		try {
+			profile = JSON.parse(await file.text()) as unknown as Profile;
+			validate(profile);
+		} catch (err) {
+			return os.alert({
+				type: 'error',
+				title: ts._preferencesBackups.cannotLoad,
+				text: err?.message,
+			});
+		}
+
+		const id = uuid();
+		await os.apiWithDialog('i/registry/set', { scope, key: id, value: profile });
+
+		// 一応廃棄
+		(window as any).__misskey_input_ref__ = null;
+	};
+
+	// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
+	// iOS Safari で正常に動かす為のおまじない
+	(window as any).__misskey_input_ref__ = input;
+
+	input.click();
+}
+
+async function applyProfile(id: string): Promise<void> {
+	if (!profiles) return;
+
+	const profile = profiles[id];
+
+	const { canceled: cancel1 } = await os.confirm({
+		type: 'warning',
+		title: ts._preferencesBackups.apply,
+		text: t('_preferencesBackups.applyConfirm', { name: profile.name }),
+	});
+	if (cancel1) return;
+
+	// TODO: バージョン or ホストが違ったらさらに警告を表示
+
+	const settings = profile.settings;
+
+	// defaultStore
+	for (const key of defaultStoreSaveKeys) {
+		if (settings.hot[key] !== undefined) {
+			defaultStore.set(key, settings.hot[key]);
+		}
+	}
+	
+	// coldDeviceStorage
+	for (const key of coldDeviceStorageSaveKeys) {
+		if (settings.cold[key] !== undefined) {
+			ColdDeviceStorage.set(key, settings.cold[key]);
+		}
+	}
+
+	// fontSize
+	if (settings.fontSize) {
+		localStorage.setItem('fontSize', settings.fontSize);
+	} else {
+		localStorage.removeItem('fontSize');
+	}
+
+	// useSystemFont
+	if (settings.useSystemFont) {
+		localStorage.setItem('useSystemFont', settings.useSystemFont);
+	} else {
+		localStorage.removeItem('useSystemFont');
+	}
+
+	// wallpaper
+	if (settings.wallpaper != null) {
+		localStorage.setItem('wallpaper', settings.wallpaper);
+	} else {
+		localStorage.removeItem('wallpaper');
+	}
+
+	const { canceled: cancel2 } = await os.confirm({
+		type: 'info',
+		text: ts.reloadToApplySetting,
+	});
+	if (cancel2) return;
+
+	unisonReload();
+}
+
+async function deleteProfile(id: string): Promise<void> {
+	if (!profiles) return;
+
+	const { canceled } = await os.confirm({
+		type: 'info',
+		title: ts.delete,
+		text: t('deleteAreYouSure', { x: profiles[id].name }),
+	});
+	if (canceled) return;
+
+	await os.apiWithDialog('i/registry/remove', { scope, key: id });
+	delete profiles[id];
+}
+
+async function save(id: string): Promise<void> {
+	if (!profiles) return;
+
+	const { name, createdAt } = profiles[id];
+
+	const { canceled } = await os.confirm({
+		type: 'info',
+		title: ts._preferencesBackups.save,
+		text: t('_preferencesBackups.saveConfirm', { name }),
+	});
+	if (canceled) return;
+
+	const profile: Profile = {
+		name,
+		createdAt,
+		updatedAt: (new Date()).toISOString(),
+		misskeyVersion: version,
+		host,
+		settings: getSettings(),
+	};
+	await os.apiWithDialog('i/registry/set', { scope, key: id, value: profile });
+}
+
+async function rename(id: string): Promise<void> {
+	if (!profiles) return;
+
+	const { canceled: cancel1, result: name } = await os.inputText({
+		title: ts._preferencesBackups.inputName,
+	});
+	if (cancel1 || profiles[id].name === name) return;
+
+	if (Object.values(profiles).some(x => x.name === name)) {
+		return os.alert({
+			title: ts._preferencesBackups.cannotSave,
+			text: t('_preferencesBackups.nameAlreadyExists', { name }),
+		});
+	}
+
+	const registry = Object.assign({}, { ...profiles[id] });
+
+	const { canceled: cancel2 } = await os.confirm({
+		type: 'info',
+		title: ts._preferencesBackups.rename,
+		text: t('_preferencesBackups.renameConfirm', { old: registry.name, new: name }),
+	});
+	if (cancel2) return;
+
+	registry.name = name;
+	await os.apiWithDialog('i/registry/set', { scope, key: id, value: registry });
+}
+
+function menu(ev: MouseEvent, profileId: string) {
+	if (!profiles) return;
+
+	return os.popupMenu([{
+		text: ts._preferencesBackups.apply,
+		icon: 'ti ti-check',
+		action: () => applyProfile(profileId),
+	}, {
+		type: 'a',
+		text: ts.download,
+		icon: 'ti ti-download',
+		href: URL.createObjectURL(new Blob([JSON.stringify(profiles[profileId], null, 2)], { type: 'application/json' })),
+		download: `${profiles[profileId].name}.json`,
+	}, null, {
+		text: ts.rename,
+		icon: 'ti ti-forms',
+		action: () => rename(profileId),
+	}, {
+		text: ts._preferencesBackups.save,
+		icon: 'ti ti-device-floppy',
+		action: () => save(profileId),
+	}, null, {
+		text: ts._preferencesBackups.delete,
+		icon: 'ti ti-trash',
+		action: () => deleteProfile(profileId),
+		danger: true,
+	}], ev.currentTarget ?? ev.target);
+}
+
+onMounted(() => {
+	// streamingのuser storage updateイベントを監視して更新
+	connection?.on('registryUpdated', ({ scope: recievedScope, key, value }) => {
+		if (!recievedScope || recievedScope.length !== scope.length || recievedScope[0] !== scope[0]) return;
+		if (!profiles) return;
+
+		profiles[key] = value;
+	});
+});
+
+onUnmounted(() => {
+	connection?.off('registryUpdated');
+});
+
+definePageMetadata(computed(() => ({
+	title: ts.preferencesBackups,
+	icon: 'ti ti-device-floppy',
+	bg: 'var(--bg)',
+})));
+</script>
+
+<style lang="scss" module>
+.buttons {
+	display: flex;
+	gap: var(--margin);
+	flex-wrap: wrap;
+}
+
+.profile {
+	padding: 20px;
+	cursor: pointer;
+
+	&Name {
+		font-weight: 700;
+	}
+
+	&Time {
+		font-size: .85em;
+		opacity: .7;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/privacy.vue b/packages/frontend/src/pages/settings/privacy.vue
new file mode 100644
index 0000000000..915ca05767
--- /dev/null
+++ b/packages/frontend/src/pages/settings/privacy.vue
@@ -0,0 +1,100 @@
+<template>
+<div class="_formRoot">
+	<FormSwitch v-model="isLocked" class="_formBlock" @update:model-value="save()">{{ i18n.ts.makeFollowManuallyApprove }}<template #caption>{{ i18n.ts.lockedAccountInfo }}</template></FormSwitch>
+	<FormSwitch v-if="isLocked" v-model="autoAcceptFollowed" class="_formBlock" @update:model-value="save()">{{ i18n.ts.autoAcceptFollowed }}</FormSwitch>
+
+	<FormSwitch v-model="publicReactions" class="_formBlock" @update:model-value="save()">
+		{{ i18n.ts.makeReactionsPublic }}
+		<template #caption>{{ i18n.ts.makeReactionsPublicDescription }}</template>
+	</FormSwitch>
+		
+	<FormSelect v-model="ffVisibility" class="_formBlock" @update:model-value="save()">
+		<template #label>{{ i18n.ts.ffVisibility }}</template>
+		<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
+		<option value="followers">{{ i18n.ts._ffVisibility.followers }}</option>
+		<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
+		<template #caption>{{ i18n.ts.ffVisibilityDescription }}</template>
+	</FormSelect>
+		
+	<FormSwitch v-model="hideOnlineStatus" class="_formBlock" @update:model-value="save()">
+		{{ i18n.ts.hideOnlineStatus }}
+		<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template>
+	</FormSwitch>
+	<FormSwitch v-model="noCrawle" class="_formBlock" @update:model-value="save()">
+		{{ i18n.ts.noCrawle }}
+		<template #caption>{{ i18n.ts.noCrawleDescription }}</template>
+	</FormSwitch>
+	<FormSwitch v-model="isExplorable" class="_formBlock" @update:model-value="save()">
+		{{ i18n.ts.makeExplorable }}
+		<template #caption>{{ i18n.ts.makeExplorableDescription }}</template>
+	</FormSwitch>
+
+	<FormSection>
+		<FormSwitch v-model="rememberNoteVisibility" class="_formBlock" @update:model-value="save()">{{ i18n.ts.rememberNoteVisibility }}</FormSwitch>
+		<FormFolder v-if="!rememberNoteVisibility" class="_formBlock">
+			<template #label>{{ i18n.ts.defaultNoteVisibility }}</template>
+			<template v-if="defaultNoteVisibility === 'public'" #suffix>{{ i18n.ts._visibility.public }}</template>
+			<template v-else-if="defaultNoteVisibility === 'home'" #suffix>{{ i18n.ts._visibility.home }}</template>
+			<template v-else-if="defaultNoteVisibility === 'followers'" #suffix>{{ i18n.ts._visibility.followers }}</template>
+			<template v-else-if="defaultNoteVisibility === 'specified'" #suffix>{{ i18n.ts._visibility.specified }}</template>
+
+			<FormSelect v-model="defaultNoteVisibility" class="_formBlock">
+				<option value="public">{{ i18n.ts._visibility.public }}</option>
+				<option value="home">{{ i18n.ts._visibility.home }}</option>
+				<option value="followers">{{ i18n.ts._visibility.followers }}</option>
+				<option value="specified">{{ i18n.ts._visibility.specified }}</option>
+			</FormSelect>
+			<FormSwitch v-model="defaultNoteLocalOnly" class="_formBlock">{{ i18n.ts._visibility.localOnly }}</FormSwitch>
+		</FormFolder>
+	</FormSection>
+
+	<FormSwitch v-model="keepCw" class="_formBlock" @update:model-value="save()">{{ i18n.ts.keepCw }}</FormSwitch>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormSection from '@/components/form/section.vue';
+import FormFolder from '@/components/form/folder.vue';
+import * as os from '@/os';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let isLocked = $ref($i.isLocked);
+let autoAcceptFollowed = $ref($i.autoAcceptFollowed);
+let noCrawle = $ref($i.noCrawle);
+let isExplorable = $ref($i.isExplorable);
+let hideOnlineStatus = $ref($i.hideOnlineStatus);
+let publicReactions = $ref($i.publicReactions);
+let ffVisibility = $ref($i.ffVisibility);
+
+let defaultNoteVisibility = $computed(defaultStore.makeGetterSetter('defaultNoteVisibility'));
+let defaultNoteLocalOnly = $computed(defaultStore.makeGetterSetter('defaultNoteLocalOnly'));
+let rememberNoteVisibility = $computed(defaultStore.makeGetterSetter('rememberNoteVisibility'));
+let keepCw = $computed(defaultStore.makeGetterSetter('keepCw'));
+
+function save() {
+	os.api('i/update', {
+		isLocked: !!isLocked,
+		autoAcceptFollowed: !!autoAcceptFollowed,
+		noCrawle: !!noCrawle,
+		isExplorable: !!isExplorable,
+		hideOnlineStatus: !!hideOnlineStatus,
+		publicReactions: !!publicReactions,
+		ffVisibility: ffVisibility,
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.privacy,
+	icon: 'ti ti-lock-open',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
new file mode 100644
index 0000000000..14eeeaaa11
--- /dev/null
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -0,0 +1,220 @@
+<template>
+<div class="_formRoot">
+	<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
+		<div class="avatar">
+			<MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/>
+			<MkButton primary rounded class="avatarEdit" @click="changeAvatar">{{ i18n.ts._profile.changeAvatar }}</MkButton>
+		</div>
+		<MkButton primary rounded class="bannerEdit" @click="changeBanner">{{ i18n.ts._profile.changeBanner }}</MkButton>
+	</div>
+
+	<FormInput v-model="profile.name" :max="30" manual-save class="_formBlock">
+		<template #label>{{ i18n.ts._profile.name }}</template>
+	</FormInput>
+
+	<FormTextarea v-model="profile.description" :max="500" tall manual-save class="_formBlock">
+		<template #label>{{ i18n.ts._profile.description }}</template>
+		<template #caption>{{ i18n.ts._profile.youCanIncludeHashtags }}</template>
+	</FormTextarea>
+
+	<FormInput v-model="profile.location" manual-save class="_formBlock">
+		<template #label>{{ i18n.ts.location }}</template>
+		<template #prefix><i class="ti ti-map-pin"></i></template>
+	</FormInput>
+
+	<FormInput v-model="profile.birthday" type="date" manual-save class="_formBlock">
+		<template #label>{{ i18n.ts.birthday }}</template>
+		<template #prefix><i class="ti ti-cake"></i></template>
+	</FormInput>
+
+	<FormSelect v-model="profile.lang" class="_formBlock">
+		<template #label>{{ i18n.ts.language }}</template>
+		<option v-for="x in Object.keys(langmap)" :key="x" :value="x">{{ langmap[x].nativeName }}</option>
+	</FormSelect>
+
+	<FormSlot class="_formBlock">
+		<FormFolder>
+			<template #icon><i class="ti ti-list"></i></template>
+			<template #label>{{ i18n.ts._profile.metadataEdit }}</template>
+
+			<div class="_formRoot">
+				<FormSplit v-for="(record, i) in fields" :min-width="250" class="_formBlock">
+					<FormInput v-model="record.name" small>
+						<template #label>{{ i18n.ts._profile.metadataLabel }} #{{ i + 1 }}</template>
+					</FormInput>
+					<FormInput v-model="record.value" small>
+						<template #label>{{ i18n.ts._profile.metadataContent }} #{{ i + 1 }}</template>
+					</FormInput>
+				</FormSplit>
+				<MkButton :disabled="fields.length >= 16" inline style="margin-right: 8px;" @click="addField"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+				<MkButton inline primary @click="saveFields"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
+			</div>
+		</FormFolder>
+		<template #caption>{{ i18n.ts._profile.metadataDescription }}</template>
+	</FormSlot>
+
+	<FormFolder>
+		<template #label>{{ i18n.ts.advancedSettings }}</template>
+
+		<div class="_formRoot">
+			<FormSwitch v-model="profile.isCat" class="_formBlock">{{ i18n.ts.flagAsCat }}<template #caption>{{ i18n.ts.flagAsCatDescription }}</template></FormSwitch>
+			<FormSwitch v-model="profile.isBot" class="_formBlock">{{ i18n.ts.flagAsBot }}<template #caption>{{ i18n.ts.flagAsBotDescription }}</template></FormSwitch>
+		</div>
+	</FormFolder>
+
+	<FormSwitch v-model="profile.showTimelineReplies" class="_formBlock">{{ i18n.ts.flagShowTimelineReplies }}<template #caption>{{ i18n.ts.flagShowTimelineRepliesDescription }} {{ i18n.ts.reflectMayTakeTime }}</template></FormSwitch>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, watch } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import FormInput from '@/components/form/input.vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormSplit from '@/components/form/split.vue';
+import FormFolder from '@/components/form/folder.vue';
+import FormSlot from '@/components/form/slot.vue';
+import { host } from '@/config';
+import { selectFile } from '@/scripts/select-file';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
+import { langmap } from '@/scripts/langmap';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const profile = reactive({
+	name: $i.name,
+	description: $i.description,
+	location: $i.location,
+	birthday: $i.birthday,
+	lang: $i.lang,
+	isBot: $i.isBot,
+	isCat: $i.isCat,
+	showTimelineReplies: $i.showTimelineReplies,
+});
+
+watch(() => profile, () => {
+	save();
+}, {
+	deep: true,
+});
+
+const fields = reactive($i.fields.map(field => ({ name: field.name, value: field.value })));
+
+function addField() {
+	fields.push({
+		name: '',
+		value: '',
+	});
+}
+
+while (fields.length < 4) {
+	addField();
+}
+
+function saveFields() {
+	os.apiWithDialog('i/update', {
+		fields: fields.filter(field => field.name !== '' && field.value !== ''),
+	});
+}
+
+function save() {
+	os.apiWithDialog('i/update', {
+		name: profile.name || null,
+		description: profile.description || null,
+		location: profile.location || null,
+		birthday: profile.birthday || null,
+		lang: profile.lang || null,
+		isBot: !!profile.isBot,
+		isCat: !!profile.isCat,
+		showTimelineReplies: !!profile.showTimelineReplies,
+	});
+}
+
+function changeAvatar(ev) {
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar).then(async (file) => {
+		let originalOrCropped = file;
+
+		const { canceled } = await os.confirm({
+			type: 'question',
+			text: i18n.t('cropImageAsk'),
+		});
+
+		if (!canceled) {
+			originalOrCropped = await os.cropImage(file, {
+				aspectRatio: 1,
+			});
+		}
+
+		const i = await os.apiWithDialog('i/update', {
+			avatarId: originalOrCropped.id,
+		});
+		$i.avatarId = i.avatarId;
+		$i.avatarUrl = i.avatarUrl;
+	});
+}
+
+function changeBanner(ev) {
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner).then(async (file) => {
+		let originalOrCropped = file;
+
+		const { canceled } = await os.confirm({
+			type: 'question',
+			text: i18n.t('cropImageAsk'),
+		});
+
+		if (!canceled) {
+			originalOrCropped = await os.cropImage(file, {
+				aspectRatio: 2,
+			});
+		}
+
+		const i = await os.apiWithDialog('i/update', {
+			bannerId: originalOrCropped.id,
+		});
+		$i.bannerId = i.bannerId;
+		$i.bannerUrl = i.bannerUrl;
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.profile,
+	icon: 'ti ti-user',
+});
+</script>
+
+<style lang="scss" scoped>
+.llvierxe {
+	position: relative;
+	background-size: cover;
+	background-position: center;
+	border: solid 1px var(--divider);
+	border-radius: 10px;
+	overflow: clip;
+
+	> .avatar {
+		display: inline-block;
+		text-align: center;
+		padding: 16px;
+
+		> .avatar {
+			display: inline-block;
+			width: 72px;
+			height: 72px;
+			margin: 0 auto 16px auto;
+		}
+	}
+
+	> .bannerEdit {
+		position: absolute;
+		top: 16px;
+		right: 16px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/reaction.vue b/packages/frontend/src/pages/settings/reaction.vue
new file mode 100644
index 0000000000..2748cd7d4e
--- /dev/null
+++ b/packages/frontend/src/pages/settings/reaction.vue
@@ -0,0 +1,154 @@
+<template>
+<div class="_formRoot">
+	<FromSlot class="_formBlock">
+		<template #label>{{ i18n.ts.reactionSettingDescription }}</template>
+		<div v-panel style="border-radius: 6px;">
+			<Sortable v-model="reactions" class="zoaiodol" :item-key="item => item" :animation="150" :delay="100" :delay-on-touch-only="true">
+				<template #item="{element}">
+					<button class="_button item" @click="remove(element, $event)">
+						<MkEmoji :emoji="element" :normal="true"/>
+					</button>
+				</template>
+				<template #footer>
+					<button class="_button add" @click="chooseEmoji"><i class="ti ti-plus"></i></button>
+				</template>
+			</Sortable>
+		</div>
+		<template #caption>{{ i18n.ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ i18n.ts.preview }}</button></template>
+	</FromSlot>
+
+	<FormRadios v-model="reactionPickerSize" class="_formBlock">
+		<template #label>{{ i18n.ts.size }}</template>
+		<option :value="1">{{ i18n.ts.small }}</option>
+		<option :value="2">{{ i18n.ts.medium }}</option>
+		<option :value="3">{{ i18n.ts.large }}</option>
+	</FormRadios>
+	<FormRadios v-model="reactionPickerWidth" class="_formBlock">
+		<template #label>{{ i18n.ts.numberOfColumn }}</template>
+		<option :value="1">5</option>
+		<option :value="2">6</option>
+		<option :value="3">7</option>
+		<option :value="4">8</option>
+		<option :value="5">9</option>
+	</FormRadios>
+	<FormRadios v-model="reactionPickerHeight" class="_formBlock">
+		<template #label>{{ i18n.ts.height }}</template>
+		<option :value="1">{{ i18n.ts.small }}</option>
+		<option :value="2">{{ i18n.ts.medium }}</option>
+		<option :value="3">{{ i18n.ts.large }}</option>
+		<option :value="4">{{ i18n.ts.large }}+</option>
+	</FormRadios>
+
+	<FormSwitch v-model="reactionPickerUseDrawerForMobile" class="_formBlock">
+		{{ i18n.ts.useDrawerReactionPickerForMobile }}
+		<template #caption>{{ i18n.ts.needReloadToApply }}</template>
+	</FormSwitch>
+
+	<FormSection>
+		<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+			<FormButton inline @click="preview"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</FormButton>
+			<FormButton inline danger @click="setDefault"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
+		</div>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, watch } from 'vue';
+import Sortable from 'vuedraggable';
+import FormInput from '@/components/form/input.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FromSlot from '@/components/form/slot.vue';
+import FormButton from '@/components/MkButton.vue';
+import FormSection from '@/components/form/section.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import * as os from '@/os';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { deepClone } from '@/scripts/clone';
+
+let reactions = $ref(deepClone(defaultStore.state.reactions));
+
+const reactionPickerSize = $computed(defaultStore.makeGetterSetter('reactionPickerSize'));
+const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPickerWidth'));
+const reactionPickerHeight = $computed(defaultStore.makeGetterSetter('reactionPickerHeight'));
+const reactionPickerUseDrawerForMobile = $computed(defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'));
+
+function save() {
+	defaultStore.set('reactions', reactions);
+}
+
+function remove(reaction, ev: MouseEvent) {
+	os.popupMenu([{
+		text: i18n.ts.remove,
+		action: () => {
+			reactions = reactions.filter(x => x !== reaction);
+		},
+	}], ev.currentTarget ?? ev.target);
+}
+
+function preview(ev: MouseEvent) {
+	os.popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
+		asReactionPicker: true,
+		src: ev.currentTarget ?? ev.target,
+	}, {}, 'closed');
+}
+
+async function setDefault() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.ts.resetAreYouSure,
+	});
+	if (canceled) return;
+
+	reactions = deepClone(defaultStore.def.reactions.default);
+}
+
+function chooseEmoji(ev: MouseEvent) {
+	os.pickEmoji(ev.currentTarget ?? ev.target, {
+		showPinned: false,
+	}).then(emoji => {
+		if (!reactions.includes(emoji)) {
+			reactions.push(emoji);
+		}
+	});
+}
+
+watch($$(reactions), () => {
+	save();
+}, {
+	deep: true,
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.reaction,
+	icon: 'ti ti-mood-happy',
+	action: {
+		icon: 'ti ti-eye',
+		handler: preview,
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.zoaiodol {
+	padding: 12px;
+	font-size: 1.1em;
+
+	> .item {
+		display: inline-block;
+		padding: 8px;
+		cursor: move;
+	}
+
+	> .add {
+		display: inline-block;
+		padding: 8px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/security.vue b/packages/frontend/src/pages/settings/security.vue
new file mode 100644
index 0000000000..33f49eb3ef
--- /dev/null
+++ b/packages/frontend/src/pages/settings/security.vue
@@ -0,0 +1,160 @@
+<template>
+<div class="_formRoot">
+	<FormSection>
+		<template #label>{{ i18n.ts.password }}</template>
+		<FormButton primary @click="change()">{{ i18n.ts.changePassword }}</FormButton>
+	</FormSection>
+
+	<FormSection>
+		<template #label>{{ i18n.ts.twoStepAuthentication }}</template>
+		<X2fa/>
+	</FormSection>
+	
+	<FormSection>
+		<template #label>{{ i18n.ts.signinHistory }}</template>
+		<MkPagination :pagination="pagination" disable-auto-load>
+			<template #default="{items}">
+				<div>
+					<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
+						<header>
+							<i v-if="item.success" class="ti ti-check icon succ"></i>
+							<i v-else class="ti ti-circle-x icon fail"></i>
+							<code class="ip _monospace">{{ item.ip }}</code>
+							<MkTime :time="item.createdAt" class="time"/>
+						</header>
+					</div>
+				</div>
+			</template>
+		</MkPagination>
+	</FormSection>
+
+	<FormSection>
+		<FormSlot>
+			<FormButton danger @click="regenerateToken"><i class="ti ti-refresh"></i> {{ i18n.ts.regenerateLoginToken }}</FormButton>
+			<template #caption>{{ i18n.ts.regenerateLoginTokenDescription }}</template>
+		</FormSlot>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import X2fa from './2fa.vue';
+import FormSection from '@/components/form/section.vue';
+import FormSlot from '@/components/form/slot.vue';
+import FormButton from '@/components/MkButton.vue';
+import MkPagination from '@/components/MkPagination.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const pagination = {
+	endpoint: 'i/signin-history' as const,
+	limit: 5,
+};
+
+async function change() {
+	const { canceled: canceled1, result: currentPassword } = await os.inputText({
+		title: i18n.ts.currentPassword,
+		type: 'password',
+	});
+	if (canceled1) return;
+
+	const { canceled: canceled2, result: newPassword } = await os.inputText({
+		title: i18n.ts.newPassword,
+		type: 'password',
+	});
+	if (canceled2) return;
+
+	const { canceled: canceled3, result: newPassword2 } = await os.inputText({
+		title: i18n.ts.newPasswordRetype,
+		type: 'password',
+	});
+	if (canceled3) return;
+
+	if (newPassword !== newPassword2) {
+		os.alert({
+			type: 'error',
+			text: i18n.ts.retypedNotMatch,
+		});
+		return;
+	}
+	
+	os.apiWithDialog('i/change-password', {
+		currentPassword,
+		newPassword,
+	});
+}
+
+function regenerateToken() {
+	os.inputText({
+		title: i18n.ts.password,
+		type: 'password',
+	}).then(({ canceled, result: password }) => {
+		if (canceled) return;
+		os.api('i/regenerate_token', {
+			password: password,
+		});
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.security,
+	icon: 'ti ti-lock',
+});
+</script>
+
+<style lang="scss" scoped>
+.timnmucd {
+	padding: 16px;
+
+	&:first-child {
+		border-top-left-radius: 6px;
+		border-top-right-radius: 6px;
+	}
+
+	&:last-child {
+		border-bottom-left-radius: 6px;
+		border-bottom-right-radius: 6px;
+	}
+
+	&:not(:last-child) {
+		border-bottom: solid 0.5px var(--divider);
+	}
+
+	> header {
+		display: flex;
+		align-items: center;
+
+		> .icon {
+			width: 1em;
+			margin-right: 0.75em;
+
+			&.succ {
+				color: var(--success);
+			}
+
+			&.fail {
+				color: var(--error);
+			}
+		}
+
+		> .ip {
+			flex: 1;
+			min-width: 0;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			margin-right: 12px;
+		}
+
+		> .time {
+			margin-left: auto;
+			opacity: 0.7;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/sounds.sound.vue b/packages/frontend/src/pages/settings/sounds.sound.vue
new file mode 100644
index 0000000000..62627c6333
--- /dev/null
+++ b/packages/frontend/src/pages/settings/sounds.sound.vue
@@ -0,0 +1,45 @@
+<template>
+<div class="_formRoot">
+	<FormSelect v-model="type">
+		<template #label>{{ i18n.ts.sound }}</template>
+		<option v-for="x in soundsTypes" :key="x" :value="x">{{ x == null ? i18n.ts.none : x }}</option>
+	</FormSelect>
+	<FormRange v-model="volume" :min="0" :max="1" :step="0.05" :text-converter="(v) => `${Math.floor(v * 100)}%`" class="_formBlock">
+		<template #label>{{ i18n.ts.volume }}</template>
+	</FormRange>
+
+	<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+		<FormButton inline @click="listen"><i class="ti ti-player-play"></i> {{ i18n.ts.listen }}</FormButton>
+		<FormButton inline primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</FormButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import FormSelect from '@/components/form/select.vue';
+import FormButton from '@/components/MkButton.vue';
+import FormRange from '@/components/form/range.vue';
+import { i18n } from '@/i18n';
+import { playFile, soundsTypes } from '@/scripts/sound';
+
+const props = defineProps<{
+	type: string;
+	volume: number;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update', result: { type: string; volume: number; }): void;
+}>();
+
+let type = $ref(props.type);
+let volume = $ref(props.volume);
+
+function listen() {
+	playFile(type, volume);
+}
+
+function save() {
+	emit('update', { type, volume });
+}
+</script>
diff --git a/packages/frontend/src/pages/settings/sounds.vue b/packages/frontend/src/pages/settings/sounds.vue
new file mode 100644
index 0000000000..ef60b2c3c9
--- /dev/null
+++ b/packages/frontend/src/pages/settings/sounds.vue
@@ -0,0 +1,82 @@
+<template>
+<div class="_formRoot">
+	<FormRange v-model="masterVolume" :min="0" :max="1" :step="0.05" :text-converter="(v) => `${Math.floor(v * 100)}%`" class="_formBlock">
+		<template #label>{{ i18n.ts.masterVolume }}</template>
+	</FormRange>
+
+	<FormSection>
+		<template #label>{{ i18n.ts.sounds }}</template>
+		<FormFolder v-for="type in Object.keys(sounds)" :key="type" style="margin-bottom: 8px;">
+			<template #label>{{ $t('_sfx.' + type) }}</template>
+			<template #suffix>{{ sounds[type].type ?? i18n.ts.none }}</template>
+
+			<XSound :type="sounds[type].type" :volume="sounds[type].volume" @update="(res) => updated(type, res)"/>
+		</FormFolder>
+	</FormSection>
+
+	<FormButton danger class="_formBlock" @click="reset()"><i class="ti ti-reload"></i> {{ i18n.ts.default }}</FormButton>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import XSound from './sounds.sound.vue';
+import FormRange from '@/components/form/range.vue';
+import FormButton from '@/components/MkButton.vue';
+import FormLink from '@/components/form/link.vue';
+import FormSection from '@/components/form/section.vue';
+import FormFolder from '@/components/form/folder.vue';
+import * as os from '@/os';
+import { ColdDeviceStorage } from '@/store';
+import { playFile } from '@/scripts/sound';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const masterVolume = computed({
+	get: () => {
+		return ColdDeviceStorage.get('sound_masterVolume');
+	},
+	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'),
+});
+
+async function updated(type, sound) {
+	const v = {
+		type: sound.type,
+		volume: sound.volume,
+	};
+
+	ColdDeviceStorage.set('sound_' + type, v);
+	sounds.value[type] = v;
+}
+
+function reset() {
+	for (const sound of Object.keys(sounds.value)) {
+		const v = ColdDeviceStorage.default['sound_' + sound];
+		ColdDeviceStorage.set('sound_' + sound, v);
+		sounds.value[sound] = v;
+	}
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.sounds,
+	icon: 'ti ti-music',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/statusbar.statusbar.vue b/packages/frontend/src/pages/settings/statusbar.statusbar.vue
new file mode 100644
index 0000000000..608222386e
--- /dev/null
+++ b/packages/frontend/src/pages/settings/statusbar.statusbar.vue
@@ -0,0 +1,140 @@
+<template>
+<div class="_formRoot">
+	<FormSelect v-model="statusbar.type" placeholder="Please select" class="_formBlock">
+		<template #label>{{ i18n.ts.type }}</template>
+		<option value="rss">RSS</option>
+		<option value="federation">Federation</option>
+		<option value="userList">User list timeline</option>
+	</FormSelect>
+
+	<MkInput v-model="statusbar.name" manual-save class="_formBlock">
+		<template #label>{{ i18n.ts.label }}</template>
+	</MkInput>
+
+	<MkSwitch v-model="statusbar.black" class="_formBlock">
+		<template #label>Black</template>
+	</MkSwitch>
+
+	<FormRadios v-model="statusbar.size" class="_formBlock">
+		<template #label>{{ i18n.ts.size }}</template>
+		<option value="verySmall">{{ i18n.ts.small }}+</option>
+		<option value="small">{{ i18n.ts.small }}</option>
+		<option value="medium">{{ i18n.ts.medium }}</option>
+		<option value="large">{{ i18n.ts.large }}</option>
+		<option value="veryLarge">{{ i18n.ts.large }}+</option>
+	</FormRadios>
+
+	<template v-if="statusbar.type === 'rss'">
+		<MkInput v-model="statusbar.props.url" manual-save class="_formBlock" type="url">
+			<template #label>URL</template>
+		</MkInput>
+		<MkSwitch v-model="statusbar.props.shuffle" class="_formBlock">
+			<template #label>{{ i18n.ts.shuffle }}</template>
+		</MkSwitch>
+		<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
+			<template #label>{{ i18n.ts.refreshInterval }}</template>
+		</MkInput>
+		<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock">
+			<template #label>{{ i18n.ts.speed }}</template>
+			<template #caption>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template>
+		</FormRange>
+		<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
+			<template #label>{{ i18n.ts.reverse }}</template>
+		</MkSwitch>
+	</template>
+	<template v-else-if="statusbar.type === 'federation'">
+		<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
+			<template #label>{{ i18n.ts.refreshInterval }}</template>
+		</MkInput>
+		<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock">
+			<template #label>{{ i18n.ts.speed }}</template>
+			<template #caption>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template>
+		</FormRange>
+		<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
+			<template #label>{{ i18n.ts.reverse }}</template>
+		</MkSwitch>
+		<MkSwitch v-model="statusbar.props.colored" class="_formBlock">
+			<template #label>{{ i18n.ts.colored }}</template>
+		</MkSwitch>
+	</template>
+	<template v-else-if="statusbar.type === 'userList' && userLists != null">
+		<FormSelect v-model="statusbar.props.userListId" class="_formBlock">
+			<template #label>{{ i18n.ts.userList }}</template>
+			<option v-for="list in userLists" :value="list.id">{{ list.name }}</option>
+		</FormSelect>
+		<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
+			<template #label>{{ i18n.ts.refreshInterval }}</template>
+		</MkInput>
+		<FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock">
+			<template #label>{{ i18n.ts.speed }}</template>
+			<template #caption>{{ i18n.ts.fast }} &lt;-&gt; {{ i18n.ts.slow }}</template>
+		</FormRange>
+		<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
+			<template #label>{{ i18n.ts.reverse }}</template>
+		</MkSwitch>
+	</template>
+
+	<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+		<FormButton danger @click="del">{{ i18n.ts.remove }}</FormButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive, ref, watch } from 'vue';
+import FormSelect from '@/components/form/select.vue';
+import MkInput from '@/components/form/input.vue';
+import MkSwitch from '@/components/form/switch.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormButton from '@/components/MkButton.vue';
+import FormRange from '@/components/form/range.vue';
+import * as os from '@/os';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+import { deepClone } from '@/scripts/clone';
+
+const props = defineProps<{
+	_id: string;
+	userLists: any[] | null;
+}>();
+
+const statusbar = reactive(deepClone(defaultStore.state.statusbars.find(x => x.id === props._id)));
+
+watch(() => statusbar.type, () => {
+	if (statusbar.type === 'rss') {
+		statusbar.name = 'NEWS';
+		statusbar.props.url = 'http://feeds.afpbb.com/rss/afpbb/afpbbnews';
+		statusbar.props.shuffle = true;
+		statusbar.props.refreshIntervalSec = 120;
+		statusbar.props.display = 'marquee';
+		statusbar.props.marqueeDuration = 100;
+		statusbar.props.marqueeReverse = false;
+	} else if (statusbar.type === 'federation') {
+		statusbar.name = 'FEDERATION';
+		statusbar.props.refreshIntervalSec = 120;
+		statusbar.props.display = 'marquee';
+		statusbar.props.marqueeDuration = 100;
+		statusbar.props.marqueeReverse = false;
+		statusbar.props.colored = false;
+	} else if (statusbar.type === 'userList') {
+		statusbar.name = 'LIST TL';
+		statusbar.props.refreshIntervalSec = 120;
+		statusbar.props.display = 'marquee';
+		statusbar.props.marqueeDuration = 100;
+		statusbar.props.marqueeReverse = false;
+	}
+});
+
+watch(statusbar, save);
+
+async function save() {
+	const i = defaultStore.state.statusbars.findIndex(x => x.id === props._id);
+	const statusbars = deepClone(defaultStore.state.statusbars);
+	statusbars[i] = deepClone(statusbar);
+	defaultStore.set('statusbars', statusbars);
+}
+
+function del() {
+	defaultStore.set('statusbars', defaultStore.state.statusbars.filter(x => x.id !== props._id));
+}
+</script>
diff --git a/packages/frontend/src/pages/settings/statusbar.vue b/packages/frontend/src/pages/settings/statusbar.vue
new file mode 100644
index 0000000000..86c69fa2c3
--- /dev/null
+++ b/packages/frontend/src/pages/settings/statusbar.vue
@@ -0,0 +1,54 @@
+<template>
+<div class="_formRoot">
+	<FormFolder v-for="x in statusbars" :key="x.id" class="_formBlock">
+		<template #label>{{ x.type ?? i18n.ts.notSet }}</template>
+		<template #suffix>{{ x.name }}</template>
+		<XStatusbar :_id="x.id" :user-lists="userLists"/>
+	</FormFolder>
+	<FormButton primary @click="add">{{ i18n.ts.add }}</FormButton>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch } from 'vue';
+import { v4 as uuid } from 'uuid';
+import XStatusbar from './statusbar.statusbar.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormFolder from '@/components/form/folder.vue';
+import FormButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { defaultStore } from '@/store';
+import { unisonReload } from '@/scripts/unison-reload';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const statusbars = defaultStore.reactiveState.statusbars;
+
+let userLists = $ref();
+
+onMounted(() => {
+	os.api('users/lists/list').then(res => {
+		userLists = res;
+	});
+});
+
+async function add() {
+	defaultStore.push('statusbars', {
+		id: uuid(),
+		type: null,
+		black: false,
+		size: 'medium',
+		props: {},
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.statusbar,
+	icon: 'ti ti-list',
+	bg: 'var(--bg)',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/theme.install.vue b/packages/frontend/src/pages/settings/theme.install.vue
new file mode 100644
index 0000000000..52a436e18d
--- /dev/null
+++ b/packages/frontend/src/pages/settings/theme.install.vue
@@ -0,0 +1,80 @@
+<template>
+<div class="_formRoot">
+	<FormTextarea v-model="installThemeCode" class="_formBlock">
+		<template #label>{{ i18n.ts._theme.code }}</template>
+	</FormTextarea>
+
+	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+		<FormButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="ti ti-eye"></i> {{ i18n.ts.preview }}</FormButton>
+		<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="ti ti-check"></i> {{ i18n.ts.install }}</FormButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import JSON5 from 'json5';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormButton from '@/components/MkButton.vue';
+import { applyTheme, validateTheme } from '@/scripts/theme';
+import * as os from '@/os';
+import { addTheme, getThemes } from '@/theme-store';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let installThemeCode = $ref(null);
+
+function parseThemeCode(code: string) {
+	let theme;
+
+	try {
+		theme = JSON5.parse(code);
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			text: i18n.ts._theme.invalid,
+		});
+		return false;
+	}
+	if (!validateTheme(theme)) {
+		os.alert({
+			type: 'error',
+			text: i18n.ts._theme.invalid,
+		});
+		return false;
+	}
+	if (getThemes().some(t => t.id === theme.id)) {
+		os.alert({
+			type: 'info',
+			text: i18n.ts._theme.alreadyInstalled,
+		});
+		return false;
+	}
+
+	return theme;
+}
+
+function preview(code: string): void {
+	const theme = parseThemeCode(code);
+	if (theme) applyTheme(theme, false);
+}
+
+async function install(code: string): Promise<void> {
+	const theme = parseThemeCode(code);
+	if (!theme) return;
+	await addTheme(theme);
+	os.alert({
+		type: 'success',
+		text: i18n.t('_theme.installed', { name: theme.name }),
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts._theme.install,
+	icon: 'ti ti-download',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/theme.manage.vue b/packages/frontend/src/pages/settings/theme.manage.vue
new file mode 100644
index 0000000000..409f0af650
--- /dev/null
+++ b/packages/frontend/src/pages/settings/theme.manage.vue
@@ -0,0 +1,78 @@
+<template>
+<div class="_formRoot">
+	<FormSelect v-model="selectedThemeId" class="_formBlock">
+		<template #label>{{ i18n.ts.theme }}</template>
+		<optgroup :label="i18n.ts._theme.installedThemes">
+			<option v-for="x in installedThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
+		</optgroup>
+		<optgroup :label="i18n.ts._theme.builtinThemes">
+			<option v-for="x in builtinThemes" :key="x.id" :value="x.id">{{ x.name }}</option>
+		</optgroup>
+	</FormSelect>
+	<template v-if="selectedTheme">
+		<FormInput readonly :model-value="selectedTheme.author" class="_formBlock">
+			<template #label>{{ i18n.ts.author }}</template>
+		</FormInput>
+		<FormTextarea v-if="selectedTheme.desc" readonly :model-value="selectedTheme.desc" class="_formBlock">
+			<template #label>{{ i18n.ts._theme.description }}</template>
+		</FormTextarea>
+		<FormTextarea readonly tall :model-value="selectedThemeCode" class="_formBlock">
+			<template #label>{{ i18n.ts._theme.code }}</template>
+			<template #caption><button class="_textButton" @click="copyThemeCode()">{{ i18n.ts.copy }}</button></template>
+		</FormTextarea>
+		<FormButton v-if="!builtinThemes.some(t => t.id == selectedTheme.id)" class="_formBlock" danger @click="uninstall()"><i class="ti ti-trash"></i> {{ i18n.ts.uninstall }}</FormButton>
+	</template>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import JSON5 from 'json5';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/MkButton.vue';
+import { Theme, getBuiltinThemesRef } from '@/scripts/theme';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import * as os from '@/os';
+import { getThemes, removeTheme } from '@/theme-store';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const installedThemes = ref(getThemes());
+const builtinThemes = getBuiltinThemesRef();
+const selectedThemeId = ref(null);
+
+const themes = computed(() => [...installedThemes.value, ...builtinThemes.value]);
+
+const selectedTheme = computed(() => {
+	if (selectedThemeId.value == null) return null;
+	return themes.value.find(x => x.id === selectedThemeId.value);
+});
+
+const selectedThemeCode = computed(() => {
+	if (selectedTheme.value == null) return null;
+	return JSON5.stringify(selectedTheme.value, null, '\t');
+});
+
+function copyThemeCode() {
+	copyToClipboard(selectedThemeCode.value);
+	os.success();
+}
+
+function uninstall() {
+	removeTheme(selectedTheme.value as Theme);
+	installedThemes.value = installedThemes.value.filter(t => t.id !== selectedThemeId.value);
+	selectedThemeId.value = null;
+	os.success();
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts._theme.manage,
+	icon: 'ti ti-tool',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/theme.vue b/packages/frontend/src/pages/settings/theme.vue
new file mode 100644
index 0000000000..f37c213b06
--- /dev/null
+++ b/packages/frontend/src/pages/settings/theme.vue
@@ -0,0 +1,409 @@
+<template>
+<div class="_formRoot rsljpzjq">
+	<div v-adaptive-border class="rfqxtzch _panel _formBlock">
+		<div class="toggle">
+			<div class="toggleWrapper">
+				<input id="dn" v-model="darkMode" type="checkbox" class="dn"/>
+				<label for="dn" class="toggle">
+					<span class="before">{{ i18n.ts.light }}</span>
+					<span class="after">{{ i18n.ts.dark }}</span>
+					<span class="toggle__handler">
+						<span class="crater crater--1"></span>
+						<span class="crater crater--2"></span>
+						<span class="crater crater--3"></span>
+					</span>
+					<span class="star star--1"></span>
+					<span class="star star--2"></span>
+					<span class="star star--3"></span>
+					<span class="star star--4"></span>
+					<span class="star star--5"></span>
+					<span class="star star--6"></span>
+				</label>
+			</div>
+		</div>
+		<div class="sync">
+			<FormSwitch v-model="syncDeviceDarkMode">{{ i18n.ts.syncDeviceDarkMode }}</FormSwitch>
+		</div>
+	</div>
+
+	<div class="selects _formBlock">
+		<FormSelect v-model="lightThemeId" large class="select">
+			<template #label>{{ i18n.ts.themeForLightMode }}</template>
+			<template #prefix><i class="ti ti-sun"></i></template>
+			<option v-if="instanceLightTheme" :key="'instance:' + instanceLightTheme.id" :value="instanceLightTheme.id">{{ instanceLightTheme.name }}</option>
+			<optgroup v-if="installedLightThemes.length > 0" :label="i18n.ts._theme.installedThemes">
+				<option v-for="x in installedLightThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup :label="i18n.ts._theme.builtinThemes">
+				<option v-for="x in builtinLightThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
+			</optgroup>
+		</FormSelect>
+		<FormSelect v-model="darkThemeId" large class="select">
+			<template #label>{{ i18n.ts.themeForDarkMode }}</template>
+			<template #prefix><i class="ti ti-moon"></i></template>
+			<option v-if="instanceDarkTheme" :key="'instance:' + instanceDarkTheme.id" :value="instanceDarkTheme.id">{{ instanceDarkTheme.name }}</option>
+			<optgroup v-if="installedDarkThemes.length > 0" :label="i18n.ts._theme.installedThemes">
+				<option v-for="x in installedDarkThemes" :key="'installed:' + x.id" :value="x.id">{{ x.name }}</option>
+			</optgroup>
+			<optgroup :label="i18n.ts._theme.builtinThemes">
+				<option v-for="x in builtinDarkThemes" :key="'builtin:' + x.id" :value="x.id">{{ x.name }}</option>
+			</optgroup>
+		</FormSelect>
+	</div>
+
+	<FormSection>
+		<div class="_formLinksGrid">
+			<FormLink to="/settings/theme/manage"><template #icon><i class="ti ti-tool"></i></template>{{ i18n.ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink>
+			<FormLink to="https://assets.misskey.io/theme/list" external><template #icon><i class="ti ti-world"></i></template>{{ i18n.ts._theme.explore }}</FormLink>
+			<FormLink to="/settings/theme/install"><template #icon><i class="ti ti-download"></i></template>{{ i18n.ts._theme.install }}</FormLink>
+			<FormLink to="/theme-editor"><template #icon><i class="ti ti-paint"></i></template>{{ i18n.ts._theme.make }}</FormLink>
+		</div>
+	</FormSection>
+
+	<FormButton v-if="wallpaper == null" class="_formBlock" @click="setWallpaper">{{ i18n.ts.setWallpaper }}</FormButton>
+	<FormButton v-else class="_formBlock" @click="wallpaper = null">{{ i18n.ts.removeWallpaper }}</FormButton>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onActivated, ref, watch } from 'vue';
+import JSON5 from 'json5';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormSection from '@/components/form/section.vue';
+import FormLink from '@/components/form/link.vue';
+import FormButton from '@/components/MkButton.vue';
+import { getBuiltinThemesRef } from '@/scripts/theme';
+import { selectFile } from '@/scripts/select-file';
+import { isDeviceDarkmode } from '@/scripts/is-device-darkmode';
+import { ColdDeviceStorage, defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+import { uniqueBy } from '@/scripts/array';
+import { fetchThemes, getThemes } from '@/theme-store';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const installedThemes = ref(getThemes());
+const builtinThemes = getBuiltinThemesRef();
+
+const instanceDarkTheme = computed(() => instance.defaultDarkTheme ? JSON5.parse(instance.defaultDarkTheme) : null);
+const installedDarkThemes = computed(() => installedThemes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
+const builtinDarkThemes = computed(() => builtinThemes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
+const instanceLightTheme = computed(() => instance.defaultLightTheme ? JSON5.parse(instance.defaultLightTheme) : null);
+const installedLightThemes = computed(() => installedThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
+const builtinLightThemes = computed(() => builtinThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
+const themes = computed(() => uniqueBy([instanceDarkTheme.value, instanceLightTheme.value, ...builtinThemes.value, ...installedThemes.value].filter(x => x != null), theme => theme.id));
+
+const darkTheme = ColdDeviceStorage.ref('darkTheme');
+const darkThemeId = computed({
+	get() {
+		return darkTheme.value.id;
+	},
+	set(id) {
+		const t = themes.value.find(x => x.id === id);
+		if (t) { // テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
+			ColdDeviceStorage.set('darkTheme', t);
+		}
+	},
+});
+const lightTheme = ColdDeviceStorage.ref('lightTheme');
+const lightThemeId = computed({
+	get() {
+		return lightTheme.value.id;
+	},
+	set(id) {
+		const t = themes.value.find(x => x.id === id);
+		if (t) { // テーマエディタでテーマを作成したときなどは、themesに反映されないため undefined になる
+			ColdDeviceStorage.set('lightTheme', t);
+		}
+	},
+});
+const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+const syncDeviceDarkMode = computed(ColdDeviceStorage.makeGetterSetter('syncDeviceDarkMode'));
+const wallpaper = ref(localStorage.getItem('wallpaper'));
+const themesCount = installedThemes.value.length;
+
+watch(syncDeviceDarkMode, () => {
+	if (syncDeviceDarkMode.value) {
+		defaultStore.set('darkMode', isDeviceDarkmode());
+	}
+});
+
+watch(wallpaper, () => {
+	if (wallpaper.value == null) {
+		localStorage.removeItem('wallpaper');
+	} else {
+		localStorage.setItem('wallpaper', wallpaper.value);
+	}
+	location.reload();
+});
+
+onActivated(() => {
+	fetchThemes().then(() => {
+		installedThemes.value = getThemes();
+	});
+});
+
+fetchThemes().then(() => {
+	installedThemes.value = getThemes();
+});
+
+function setWallpaper(event) {
+	selectFile(event.currentTarget ?? event.target, null).then(file => {
+		wallpaper.value = file.url;
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.theme,
+	icon: 'ti ti-palette',
+});
+</script>
+
+<style lang="scss" scoped>
+.rfqxtzch {
+	border-radius: 6px;
+
+	> .toggle {
+		position: relative;
+		padding: 26px 0;
+		text-align: center;
+
+		&.disabled {
+			opacity: 0.7;
+
+			&, * {
+				cursor: not-allowed !important;
+			}
+		}
+
+		> .toggleWrapper {
+			display: inline-block;
+			text-align: left;
+			overflow: clip;
+			padding: 0 100px;
+			vertical-align: bottom;
+
+			input {
+				position: absolute;
+				left: -99em;
+			}
+		}
+
+		.toggle {
+			cursor: pointer;
+			display: inline-block;
+			position: relative;
+			width: 90px;
+			height: 50px;
+			background-color: #83D8FF;
+			border-radius: 90px - 6;
+			transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+
+			> .before, > .after {
+				position: absolute;
+				top: 15px;
+				transition: color 1s ease;
+			}
+
+			> .before {
+				left: -70px;
+				color: var(--accent);
+			}
+
+			> .after {
+				right: -68px;
+				color: var(--fg);
+			}
+		}
+
+		.toggle__handler {
+			display: inline-block;
+			position: relative;
+			z-index: 1;
+			top: 3px;
+			left: 3px;
+			width: 50px - 6;
+			height: 50px - 6;
+			background-color: #FFCF96;
+			border-radius: 50px;
+			box-shadow: 0 2px 6px rgba(0,0,0,.3);
+			transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
+			transform:  rotate(-45deg);
+
+			.crater {
+				position: absolute;
+				background-color: #E8CDA5;
+				opacity: 0;
+				transition: opacity 200ms ease-in-out !important;
+				border-radius: 100%;
+			}
+
+			.crater--1 {
+				top: 18px;
+				left: 10px;
+				width: 4px;
+				height: 4px;
+			}
+
+			.crater--2 {
+				top: 28px;
+				left: 22px;
+				width: 6px;
+				height: 6px;
+			}
+
+			.crater--3 {
+				top: 10px;
+				left: 25px;
+				width: 8px;
+				height: 8px;
+			}
+		}
+
+		.star {
+			position: absolute;
+			background-color: #ffffff;
+			transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+			border-radius: 50%;
+		}
+
+		.star--1 {
+			top: 10px;
+			left: 35px;
+			z-index: 0;
+			width: 30px;
+			height: 3px;
+		}
+
+		.star--2 {
+			top: 18px;
+			left: 28px;
+			z-index: 1;
+			width: 30px;
+			height: 3px;
+		}
+
+		.star--3 {
+			top: 27px;
+			left: 40px;
+			z-index: 0;
+			width: 30px;
+			height: 3px;
+		}
+
+		.star--4,
+		.star--5,
+		.star--6 {
+			opacity: 0;
+			transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+		}
+
+		.star--4 {
+			top: 16px;
+			left: 11px;
+			z-index: 0;
+			width: 2px;
+			height: 2px;
+			transform: translate3d(3px,0,0);
+		}
+
+		.star--5 {
+			top: 32px;
+			left: 17px;
+			z-index: 0;
+			width: 3px;
+			height: 3px;
+			transform: translate3d(3px,0,0);
+		}
+
+		.star--6 {
+			top: 36px;
+			left: 28px;
+			z-index: 0;
+			width: 2px;
+			height: 2px;
+			transform: translate3d(3px,0,0);
+		}
+
+		input:checked {
+			+ .toggle {
+				background-color: #749DD6;
+
+				> .before {
+					color: var(--fg);
+				}
+
+				> .after {
+					color: var(--accent);
+				}
+
+				.toggle__handler {
+					background-color: #FFE5B5;
+					transform: translate3d(40px, 0, 0) rotate(0);
+
+					.crater { opacity: 1; }
+				}
+
+				.star--1 {
+					width: 2px;
+					height: 2px;
+				}
+
+				.star--2 {
+					width: 4px;
+					height: 4px;
+					transform: translate3d(-5px, 0, 0);
+				}
+
+				.star--3 {
+					width: 2px;
+					height: 2px;
+					transform: translate3d(-7px, 0, 0);
+				}
+
+				.star--4,
+				.star--5,
+				.star--6 {
+					opacity: 1;
+					transform: translate3d(0,0,0);
+				}
+
+				.star--4 {
+					transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+				}
+
+				.star--5 {
+					transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+				}
+
+				.star--6 {
+					transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95) !important;
+				}
+			}
+		}
+	}
+
+	> .sync {
+		padding: 14px 16px;
+		border-top: solid 0.5px var(--divider);
+	}
+}
+
+.rsljpzjq {
+	> .selects {
+		display: flex;
+		gap: 1.5em var(--margin);
+		flex-wrap: wrap;
+
+		> .select {
+			flex: 1;
+			min-width: 280px;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/webhook.edit.vue b/packages/frontend/src/pages/settings/webhook.edit.vue
new file mode 100644
index 0000000000..c8ec1ea586
--- /dev/null
+++ b/packages/frontend/src/pages/settings/webhook.edit.vue
@@ -0,0 +1,95 @@
+<template>
+<div class="_formRoot">
+	<FormInput v-model="name" class="_formBlock">
+		<template #label>Name</template>
+	</FormInput>
+
+	<FormInput v-model="url" type="url" class="_formBlock">
+		<template #label>URL</template>
+	</FormInput>
+
+	<FormInput v-model="secret" class="_formBlock">
+		<template #prefix><i class="ti ti-lock"></i></template>
+		<template #label>Secret</template>
+	</FormInput>
+
+	<FormSection>
+		<template #label>Events</template>
+
+		<FormSwitch v-model="event_follow" class="_formBlock">Follow</FormSwitch>
+		<FormSwitch v-model="event_followed" class="_formBlock">Followed</FormSwitch>
+		<FormSwitch v-model="event_note" class="_formBlock">Note</FormSwitch>
+		<FormSwitch v-model="event_reply" class="_formBlock">Reply</FormSwitch>
+		<FormSwitch v-model="event_renote" class="_formBlock">Renote</FormSwitch>
+		<FormSwitch v-model="event_reaction" class="_formBlock">Reaction</FormSwitch>
+		<FormSwitch v-model="event_mention" class="_formBlock">Mention</FormSwitch>
+	</FormSection>
+
+	<FormSwitch v-model="active" class="_formBlock">Active</FormSwitch>
+
+	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+		<FormButton primary inline @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</FormButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import FormInput from '@/components/form/input.vue';
+import FormSection from '@/components/form/section.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const props = defineProps<{
+	webhookId: string;
+}>();
+
+const webhook = await os.api('i/webhooks/show', {
+	webhookId: props.webhookId,
+});
+
+let name = $ref(webhook.name);
+let url = $ref(webhook.url);
+let secret = $ref(webhook.secret);
+let active = $ref(webhook.active);
+
+let event_follow = $ref(webhook.on.includes('follow'));
+let event_followed = $ref(webhook.on.includes('followed'));
+let event_note = $ref(webhook.on.includes('note'));
+let event_reply = $ref(webhook.on.includes('reply'));
+let event_renote = $ref(webhook.on.includes('renote'));
+let event_reaction = $ref(webhook.on.includes('reaction'));
+let event_mention = $ref(webhook.on.includes('mention'));
+
+async function save(): Promise<void> {
+	const events = [];
+	if (event_follow) events.push('follow');
+	if (event_followed) events.push('followed');
+	if (event_note) events.push('note');
+	if (event_reply) events.push('reply');
+	if (event_renote) events.push('renote');
+	if (event_reaction) events.push('reaction');
+	if (event_mention) events.push('mention');
+
+	os.apiWithDialog('i/webhooks/update', {
+		name,
+		url,
+		secret,
+		webhookId: props.webhookId,
+		on: events,
+		active,
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: 'Edit webhook',
+	icon: 'ti ti-webhook',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/webhook.new.vue b/packages/frontend/src/pages/settings/webhook.new.vue
new file mode 100644
index 0000000000..00a547da69
--- /dev/null
+++ b/packages/frontend/src/pages/settings/webhook.new.vue
@@ -0,0 +1,82 @@
+<template>
+<div class="_formRoot">
+	<FormInput v-model="name" class="_formBlock">
+		<template #label>Name</template>
+	</FormInput>
+
+	<FormInput v-model="url" type="url" class="_formBlock">
+		<template #label>URL</template>
+	</FormInput>
+
+	<FormInput v-model="secret" class="_formBlock">
+		<template #prefix><i class="ti ti-lock"></i></template>
+		<template #label>Secret</template>
+	</FormInput>
+
+	<FormSection>
+		<template #label>Events</template>
+
+		<FormSwitch v-model="event_follow" class="_formBlock">Follow</FormSwitch>
+		<FormSwitch v-model="event_followed" class="_formBlock">Followed</FormSwitch>
+		<FormSwitch v-model="event_note" class="_formBlock">Note</FormSwitch>
+		<FormSwitch v-model="event_reply" class="_formBlock">Reply</FormSwitch>
+		<FormSwitch v-model="event_renote" class="_formBlock">Renote</FormSwitch>
+		<FormSwitch v-model="event_reaction" class="_formBlock">Reaction</FormSwitch>
+		<FormSwitch v-model="event_mention" class="_formBlock">Mention</FormSwitch>
+	</FormSection>
+
+	<div class="_formBlock" style="display: flex; gap: var(--margin); flex-wrap: wrap;">
+		<FormButton primary inline @click="create"><i class="ti ti-check"></i> {{ i18n.ts.create }}</FormButton>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import FormInput from '@/components/form/input.vue';
+import FormSection from '@/components/form/section.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormButton from '@/components/MkButton.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let name = $ref('');
+let url = $ref('');
+let secret = $ref('');
+
+let event_follow = $ref(true);
+let event_followed = $ref(true);
+let event_note = $ref(true);
+let event_reply = $ref(true);
+let event_renote = $ref(true);
+let event_reaction = $ref(true);
+let event_mention = $ref(true);
+
+async function create(): Promise<void> {
+	const events = [];
+	if (event_follow) events.push('follow');
+	if (event_followed) events.push('followed');
+	if (event_note) events.push('note');
+	if (event_reply) events.push('reply');
+	if (event_renote) events.push('renote');
+	if (event_reaction) events.push('reaction');
+	if (event_mention) events.push('mention');
+
+	os.apiWithDialog('i/webhooks/create', {
+		name,
+		url,
+		secret,
+		on: events,
+	});
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: 'Create new webhook',
+	icon: 'ti ti-webhook',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/webhook.vue b/packages/frontend/src/pages/settings/webhook.vue
new file mode 100644
index 0000000000..9be23ee4f0
--- /dev/null
+++ b/packages/frontend/src/pages/settings/webhook.vue
@@ -0,0 +1,53 @@
+<template>
+<div class="_formRoot">
+	<FormSection>
+		<FormLink :to="`/settings/webhook/new`">
+			Create webhook
+		</FormLink>
+	</FormSection>
+	
+	<FormSection>
+		<MkPagination :pagination="pagination">
+			<template #default="{items}">
+				<FormLink v-for="webhook in items" :key="webhook.id" :to="`/settings/webhook/edit/${webhook.id}`" class="_formBlock">
+					<template #icon>
+						<i v-if="webhook.active === false" class="ti ti-player-pause"></i>
+						<i v-else-if="webhook.latestStatus === null" class="ti ti-circle"></i>
+						<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="ti ti-check" :style="{ color: 'var(--success)' }"></i>
+						<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--error)' }"></i>
+					</template>
+					{{ webhook.name || webhook.url }}
+					<template #suffix>
+						<MkTime v-if="webhook.latestSentAt" :time="webhook.latestSentAt"></MkTime>
+					</template>
+				</FormLink>
+			</template>
+		</MkPagination>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkPagination from '@/components/MkPagination.vue';
+import FormSection from '@/components/form/section.vue';
+import FormLink from '@/components/form/link.vue';
+import { userPage } from '@/filters/user';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const pagination = {
+	endpoint: 'i/webhooks/list' as const,
+	limit: 10,
+};
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: 'Webhook',
+	icon: 'ti ti-webhook',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/word-mute.vue b/packages/frontend/src/pages/settings/word-mute.vue
new file mode 100644
index 0000000000..6961d8151d
--- /dev/null
+++ b/packages/frontend/src/pages/settings/word-mute.vue
@@ -0,0 +1,128 @@
+<template>
+<div class="_formRoot">
+	<MkTab v-model="tab" class="_formBlock">
+		<option value="soft">{{ i18n.ts._wordMute.soft }}</option>
+		<option value="hard">{{ i18n.ts._wordMute.hard }}</option>
+	</MkTab>
+	<div class="_formBlock">
+		<div v-show="tab === 'soft'">
+			<MkInfo class="_formBlock">{{ i18n.ts._wordMute.softDescription }}</MkInfo>
+			<FormTextarea v-model="softMutedWords" class="_formBlock">
+				<span>{{ i18n.ts._wordMute.muteWords }}</span>
+				<template #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
+			</FormTextarea>
+		</div>
+		<div v-show="tab === 'hard'">
+			<MkInfo class="_formBlock">{{ i18n.ts._wordMute.hardDescription }} {{ i18n.ts.reflectMayTakeTime }}</MkInfo>
+			<FormTextarea v-model="hardMutedWords" class="_formBlock">
+				<span>{{ i18n.ts._wordMute.muteWords }}</span>
+				<template #caption>{{ i18n.ts._wordMute.muteWordsDescription }}<br>{{ i18n.ts._wordMute.muteWordsDescription2 }}</template>
+			</FormTextarea>
+			<MkKeyValue v-if="hardWordMutedNotesCount != null" class="_formBlock">
+				<template #key>{{ i18n.ts._wordMute.mutedNotes }}</template>
+				<template #value>{{ number(hardWordMutedNotesCount) }}</template>
+			</MkKeyValue>
+		</div>
+	</div>
+	<MkButton primary inline :disabled="!changed" @click="save()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import MkTab from '@/components/MkTab.vue';
+import * as os from '@/os';
+import number from '@/filters/number';
+import { defaultStore } from '@/store';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const render = (mutedWords) => mutedWords.map(x => {
+	if (Array.isArray(x)) {
+		return x.join(' ');
+	} else {
+		return x;
+	}
+}).join('\n');
+
+const tab = ref('soft');
+const softMutedWords = ref(render(defaultStore.state.mutedWords));
+const hardMutedWords = ref(render($i!.mutedWords));
+const hardWordMutedNotesCount = ref(null);
+const changed = ref(false);
+
+os.api('i/get-word-muted-notes-count', {}).then(response => {
+	hardWordMutedNotesCount.value = response?.count;
+});
+
+watch(softMutedWords, () => {
+	changed.value = true;
+});
+
+watch(hardMutedWords, () => {
+	changed.value = true;
+});
+
+async function save() {
+	const parseMutes = (mutes, tab) => {
+		// split into lines, remove empty lines and unnecessary whitespace
+		let lines = mutes.trim().split('\n').map(line => line.trim()).filter(line => line !== '');
+
+		// check each line if it is a RegExp or not
+		for (let i = 0; i < lines.length; i++) {
+			const line = lines[i];
+			const regexp = line.match(/^\/(.+)\/(.*)$/);
+			if (regexp) {
+				// check that the RegExp is valid
+				try {
+					new RegExp(regexp[1], regexp[2]);
+					// note that regex lines will not be split by spaces!
+				} catch (err: any) {
+					// invalid syntax: do not save, do not reset changed flag
+					os.alert({
+						type: 'error',
+						title: i18n.ts.regexpError,
+						text: i18n.t('regexpErrorDescription', { tab, line: i + 1 }) + '\n' + err.toString(),
+					});
+					// re-throw error so these invalid settings are not saved
+					throw err;
+				}
+			} else {
+				lines[i] = line.split(' ');
+			}
+		}
+
+		return lines;
+	};
+
+	let softMutes, hardMutes;
+	try {
+		softMutes = parseMutes(softMutedWords.value, i18n.ts._wordMute.soft);
+		hardMutes = parseMutes(hardMutedWords.value, i18n.ts._wordMute.hard);
+	} catch (err) {
+		// already displayed error message in parseMutes
+		return;
+	}
+
+	defaultStore.set('mutedWords', softMutes);
+	await os.api('i/update', {
+		mutedWords: hardMutes,
+	});
+
+	changed.value = false;
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.wordMute,
+	icon: 'ti ti-message-off',
+});
+</script>
diff --git a/packages/frontend/src/pages/share.vue b/packages/frontend/src/pages/share.vue
new file mode 100644
index 0000000000..a7e797eeab
--- /dev/null
+++ b/packages/frontend/src/pages/share.vue
@@ -0,0 +1,169 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="800">
+		<XPostForm
+			v-if="state === 'writing'"
+			fixed
+			:instant="true"
+			:initial-text="initialText"
+			:initial-visibility="visibility"
+			:initial-files="files"
+			:initial-local-only="localOnly"
+			:reply="reply"
+			:renote="renote"
+			:initial-visible-users="visibleUsers"
+			class="_panel"
+			@posted="state = 'posted'"
+		/>
+		<MkButton v-else-if="state === 'posted'" primary class="close" @click="close()">{{ i18n.ts.close }}</MkButton>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+// SPECIFICATION: https://misskey-hub.net/docs/features/share-form.html
+
+import { } 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/MkButton.vue';
+import XPostForm from '@/components/MkPostForm.vue';
+import * as os from '@/os';
+import { mainRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+
+const urlParams = new URLSearchParams(window.location.search);
+const localOnlyQuery = urlParams.get('localOnly');
+const visibilityQuery = urlParams.get('visibility');
+
+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[]);
+
+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();
+
+	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)}`);
+				}),
+			),
+		);
+	}
+
+	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
+
+		//#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(
+				fileIds.split(',')
+				.map(fileId => os.api('drive/files/show', { fileId })
+					.then(file => {
+						files.push(file);
+					}, () => {
+						console.error(`Failed to fetch a file ${fileId}`);
+					}),
+				),
+			);
+		}
+		//#endregion
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			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: 'ti ti-share',
+});
+</script>
+
+<style lang="scss" scoped>
+.close {
+	margin: 16px auto;
+}
+</style>
diff --git a/packages/frontend/src/pages/signup-complete.vue b/packages/frontend/src/pages/signup-complete.vue
new file mode 100644
index 0000000000..5459532310
--- /dev/null
+++ b/packages/frontend/src/pages/signup-complete.vue
@@ -0,0 +1,41 @@
+<template>
+<div>
+	{{ i18n.ts.processing }}
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import * as os from '@/os';
+import { login } from '@/account';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const props = defineProps<{
+	code: string;
+}>();
+
+onMounted(async () => {
+	await os.alert({
+		type: 'info',
+		text: i18n.t('clickToFinishEmailVerification', { ok: i18n.ts.gotIt }),
+	});
+	const res = await os.apiWithDialog('signup-pending', {
+		code: props.code,
+	});
+	login(res.i, '/');
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.signup,
+	icon: 'ti ti-user',
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/frontend/src/pages/tag.vue b/packages/frontend/src/pages/tag.vue
new file mode 100644
index 0000000000..72775ed5c9
--- /dev/null
+++ b/packages/frontend/src/pages/tag.vue
@@ -0,0 +1,35 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="800">
+		<XNotes class="_content" :pagination="pagination"/>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import XNotes from '@/components/MkNotes.vue';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const props = defineProps<{
+	tag: string;
+}>();
+
+const pagination = {
+	endpoint: 'notes/search-by-tag' as const,
+	limit: 10,
+	params: computed(() => ({
+		tag: props.tag,
+	})),
+};
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: props.tag,
+	icon: 'ti ti-hash',
+})));
+</script>
diff --git a/packages/frontend/src/pages/theme-editor.vue b/packages/frontend/src/pages/theme-editor.vue
new file mode 100644
index 0000000000..d8ff170ca2
--- /dev/null
+++ b/packages/frontend/src/pages/theme-editor.vue
@@ -0,0 +1,283 @@
+<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>
+					</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>
+			</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>
+			</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>
+					</div>
+				</div>
+			</FormFolder>
+
+			<FormFolder :default-open="false" class="_formBlock">
+				<template #icon><i class="ti ti-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>
+			</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>
+</template>
+
+<script lang="ts" setup>
+import { watch } from 'vue';
+import { toUnicode } from 'punycode/';
+import tinycolor from 'tinycolor2';
+import { v4 as uuid } from 'uuid';
+import JSON5 from 'json5';
+
+import FormButton from '@/components/MkButton.vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormFolder from '@/components/form/folder.vue';
+
+import { $i } from '@/account';
+import { Theme, applyTheme } from '@/scripts/theme';
+import lightTheme from '@/themes/_light.json5';
+import darkTheme from '@/themes/_dark.json5';
+import { host } from '@/config';
+import * as os from '@/os';
+import { ColdDeviceStorage, defaultStore } from '@/store';
+import { addTheme } from '@/theme-store';
+import { i18n } from '@/i18n';
+import { useLeaveGuard } from '@/scripts/use-leave-guard';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const bgColors = [
+	{ color: '#f5f5f5', kind: 'light', forPreview: '#f5f5f5' },
+	{ color: '#f0eee9', kind: 'light', forPreview: '#f3e2b9' },
+	{ color: '#e9eff0', kind: 'light', forPreview: '#bfe3e8' },
+	{ color: '#f0e9ee', kind: 'light', forPreview: '#f1d1e8' },
+	{ color: '#dce2e0', kind: 'light', forPreview: '#a4dccc' },
+	{ color: '#e2e0dc', kind: 'light', forPreview: '#d8c7a5' },
+	{ color: '#d5dbe0', kind: 'light', forPreview: '#b0cae0' },
+	{ color: '#dad5d5', kind: 'light', forPreview: '#d6afaf' },
+	{ color: '#2b2b2b', kind: 'dark', forPreview: '#444444' },
+	{ color: '#362e29', kind: 'dark', forPreview: '#735c4d' },
+	{ color: '#303629', kind: 'dark', forPreview: '#506d2f' },
+	{ color: '#293436', kind: 'dark', forPreview: '#258192' },
+	{ color: '#2e2936', kind: 'dark', forPreview: '#504069' },
+	{ color: '#252722', kind: 'dark', forPreview: '#3c462f' },
+	{ color: '#212525', kind: 'dark', forPreview: '#303e3e' },
+	{ color: '#191919', kind: 'dark', forPreview: '#272727' },
+] as const;
+const accentColors = ['#e36749', '#f29924', '#98c934', '#34c9a9', '#34a1c9', '#606df7', '#8d34c9', '#e84d83'];
+const fgColors = [
+	{ color: 'none', forLight: '#5f5f5f', forDark: '#dadada', forPreview: null },
+	{ color: 'red', forLight: '#7f6666', forDark: '#e4d1d1', forPreview: '#ca4343' },
+	{ color: 'yellow', forLight: '#736955', forDark: '#e0d5c0', forPreview: '#d49923' },
+	{ color: 'green', forLight: '#586d5b', forDark: '#d1e4d4', forPreview: '#4cbd5c' },
+	{ color: 'cyan', forLight: '#5d7475', forDark: '#d1e3e4', forPreview: '#2abdc3' },
+	{ color: 'blue', forLight: '#676880', forDark: '#d1d2e4', forPreview: '#7275d8' },
+	{ color: 'pink', forLight: '#84667d', forDark: '#e4d1e0', forPreview: '#b12390' },
+];
+
+let theme = $ref<Partial<Theme>>({
+	base: 'light',
+	props: lightTheme.props,
+});
+let description = $ref<string | null>(null);
+let themeCode = $ref<string | null>(null);
+let changed = $ref(false);
+
+useLeaveGuard($$(changed));
+
+function showPreview() {
+	os.pageWindow('/preview');
+}
+
+function setBgColor(color: typeof bgColors[number]) {
+	if (theme.base !== color.kind) {
+		const base = color.kind === 'dark' ? darkTheme : lightTheme;
+		for (const prop of Object.keys(base.props)) {
+			if (prop === 'accent') continue;
+			if (prop === 'fg') continue;
+			theme.props[prop] = base.props[prop];
+		}
+	}
+	theme.base = color.kind;
+	theme.props.bg = color.color;
+
+	if (theme.props.fg) {
+		const matchedFgColor = fgColors.find(x => [tinycolor(x.forLight).toRgbString(), tinycolor(x.forDark).toRgbString()].includes(tinycolor(theme.props.fg).toRgbString()));
+		if (matchedFgColor) setFgColor(matchedFgColor);
+	}
+}
+
+function setAccentColor(color) {
+	theme.props.accent = color;
+}
+
+function setFgColor(color) {
+	theme.props.fg = theme.base === 'light' ? color.forLight : color.forDark;
+}
+
+function apply() {
+	themeCode = JSON5.stringify(theme, null, '\t');
+	applyTheme(theme, false);
+	changed = true;
+}
+
+function applyThemeCode() {
+	let parsed;
+
+	try {
+		parsed = JSON5.parse(themeCode);
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			text: i18n.ts._theme.invalid,
+		});
+		return;
+	}
+
+	theme = parsed;
+}
+
+async function saveAs() {
+	const { canceled, result: name } = await os.inputText({
+		title: i18n.ts.name,
+		allowEmpty: false,
+	});
+	if (canceled) return;
+
+	theme.id = uuid();
+	theme.name = name;
+	theme.author = `@${$i.username}@${toUnicode(host)}`;
+	if (description) theme.desc = description;
+	await addTheme(theme);
+	applyTheme(theme);
+	if (defaultStore.state.darkMode) {
+		ColdDeviceStorage.set('darkTheme', theme);
+	} else {
+		ColdDeviceStorage.set('lightTheme', theme);
+	}
+	changed = false;
+	os.alert({
+		type: 'success',
+		text: i18n.t('_theme.installed', { name: theme.name }),
+	});
+}
+
+watch($$(theme), apply, { deep: true });
+
+const headerActions = $computed(() => [{
+	asFullButton: true,
+	icon: 'ti ti-eye',
+	text: i18n.ts.preview,
+	handler: showPreview,
+}, {
+	asFullButton: true,
+	icon: 'ti ti-check',
+	text: i18n.ts.saveAs,
+	handler: saveAs,
+}]);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.themeEditor,
+	icon: 'ti ti-palette',
+});
+</script>
+
+<style lang="scss" scoped>
+.cwepdizn {
+	::v-deep(.cwepdizn-colors) {
+		text-align: center;
+
+		> .row {
+			> .color {
+				display: inline-block;
+				position: relative;
+				width: 64px;
+				height: 64px;
+				border-radius: 8px;
+
+				> .preview {
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					margin: auto;
+					width: 42px;
+					height: 42px;
+					border-radius: 4px;
+					box-shadow: 0 2px 4px rgb(0 0 0 / 30%);
+					transition: transform 0.15s ease;
+				}
+
+				&:hover {
+					> .preview {
+						transform: scale(1.1);
+					}
+				}
+
+				&.active {
+					box-shadow: 0 0 0 2px var(--divider) inset;
+				}
+
+				&.rounded {
+					border-radius: 999px;
+
+					> .preview {
+						border-radius: 999px;
+					}
+				}
+
+				&.char {
+					line-height: 42px;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/timeline.tutorial.vue b/packages/frontend/src/pages/timeline.tutorial.vue
new file mode 100644
index 0000000000..ae7b098b90
--- /dev/null
+++ b/packages/frontend/src/pages/timeline.tutorial.vue
@@ -0,0 +1,142 @@
+<template>
+<div class="_card">
+	<div :class="$style.title" class="_title">
+		<div :class="$style.titleText"><i class="ti ti-info-circle"></i> {{ i18n.ts._tutorial.title }}</div>
+		<div :class="$style.step">
+			<button class="_button" :class="$style.stepArrow" :disabled="tutorial === 0" @click="tutorial--">
+				<i class="ti ti-chevron-left"></i>
+			</button>
+			<span :class="$style.stepNumber">{{ tutorial + 1 }} / {{ tutorialsNumber }}</span>
+			<button class="_button" :class="$style.stepArrow" :disabled="tutorial === tutorialsNumber - 1" @click="tutorial++">
+				<i class="ti ti-chevron-right"></i>
+			</button>
+		</div>
+	</div>
+	<div v-if="tutorial === 0" class="_content">
+		<div>{{ i18n.ts._tutorial.step1_1 }}</div>
+		<div>{{ i18n.ts._tutorial.step1_2 }}</div>
+		<div>{{ i18n.ts._tutorial.step1_3 }}</div>
+	</div>
+	<div v-else-if="tutorial === 1" class="_content">
+		<div>{{ i18n.ts._tutorial.step2_1 }}</div>
+		<div>{{ i18n.ts._tutorial.step2_2 }}</div>
+		<MkA class="_link" to="/settings/profile">{{ i18n.ts.editProfile }}</MkA>
+	</div>
+	<div v-else-if="tutorial === 2" class="_content">
+		<div>{{ i18n.ts._tutorial.step3_1 }}</div>
+		<div>{{ i18n.ts._tutorial.step3_2 }}</div>
+		<div>{{ i18n.ts._tutorial.step3_3 }}</div>
+		<small :class="$style.small">{{ i18n.ts._tutorial.step3_4 }}</small>
+	</div>
+	<div v-else-if="tutorial === 3" class="_content">
+		<div>{{ i18n.ts._tutorial.step4_1 }}</div>
+		<div>{{ i18n.ts._tutorial.step4_2 }}</div>
+	</div>
+	<div v-else-if="tutorial === 4" class="_content">
+		<div>{{ i18n.ts._tutorial.step5_1 }}</div>
+		<I18n :src="i18n.ts._tutorial.step5_2" tag="div">
+			<template #featured>
+				<MkA class="_link" to="/featured">{{ i18n.ts.featured }}</MkA>
+			</template>
+			<template #explore>
+				<MkA class="_link" to="/explore">{{ i18n.ts.explore }}</MkA>
+			</template>
+		</I18n>
+		<div>{{ i18n.ts._tutorial.step5_3 }}</div>
+		<small :class="$style.small">{{ i18n.ts._tutorial.step5_4 }}</small>
+	</div>
+	<div v-else-if="tutorial === 5" class="_content">
+		<div>{{ i18n.ts._tutorial.step6_1 }}</div>
+		<div>{{ i18n.ts._tutorial.step6_2 }}</div>
+		<div>{{ i18n.ts._tutorial.step6_3 }}</div>
+	</div>
+	<div v-else-if="tutorial === 6" class="_content">
+		<div>{{ i18n.ts._tutorial.step7_1 }}</div>
+		<I18n :src="i18n.ts._tutorial.step7_2" tag="div">
+			<template #help>
+				<a href="https://misskey-hub.net/help.html" target="_blank" class="_link">{{ i18n.ts.help }}</a>
+			</template>
+		</I18n>
+		<div>{{ i18n.ts._tutorial.step7_3 }}</div>
+	</div>
+	<div v-else-if="tutorial === 7" class="_content">
+		<div>{{ i18n.ts._tutorial.step8_1 }}</div>
+		<div>{{ i18n.ts._tutorial.step8_2 }}</div>
+		<small :class="$style.small">{{ i18n.ts._tutorial.step8_3 }}</small>
+	</div>
+
+	<div class="_footer" :class="$style.footer">
+		<template v-if="tutorial === tutorialsNumber - 1">
+			<MkPushNotificationAllowButton :class="$style.footerItem" primary show-only-to-register @click="tutorial = -1" />
+			<MkButton :class="$style.footerItem" :primary="false" @click="tutorial = -1">{{ i18n.ts.noThankYou }}</MkButton>
+		</template>
+		<template v-else>
+			<MkButton :class="$style.footerItem" primary @click="tutorial++"><i class="ti ti-check"></i> {{ i18n.ts.next }}</MkButton>
+		</template>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+
+const tutorialsNumber = 8;
+
+const tutorial = computed({
+	get() { return defaultStore.reactiveState.tutorial.value || 0; },
+	set(value) { defaultStore.set('tutorial', value); },
+});
+</script>
+
+<style lang="scss" module>
+.small {
+	opacity: 0.7;
+}
+
+.title {
+	display: flex;
+	flex-wrap: wrap;
+
+	&Text {
+		margin: 4px 0;
+		padding-right: 4px;
+	}
+}
+
+.step {
+	margin-left: auto;
+
+	&Arrow {
+		padding: 4px;
+		&:disabled {
+			opacity: 0.5;
+		}
+		&:first-child {
+			padding-right: 8px;
+		}
+		&:last-child {
+			padding-left: 8px;
+		}
+	}
+
+	&Number {
+		font-weight: normal;
+		margin: 4px;
+	}
+}
+
+.footer {
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+	justify-content: right;
+
+	&Item {
+		margin: 4px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
new file mode 100644
index 0000000000..1c9e389367
--- /dev/null
+++ b/packages/frontend/src/pages/timeline.vue
@@ -0,0 +1,183 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="headerTabs" :display-my-avatar="true"/></template>
+	<MkSpacer :content-max="800">
+		<div ref="rootEl" v-hotkey.global="keymap" class="cmuxhskf">
+			<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()">{{ i18n.ts.newNoteRecived }}</button></div>
+			<div class="tl _block">
+				<XTimeline
+					ref="tl" :key="src"
+					class="tl"
+					:src="src"
+					:sound="true"
+					@queue="queueUpdated"
+				/>
+			</div>
+		</div>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, computed, watch } from 'vue';
+import XTimeline from '@/components/MkTimeline.vue';
+import XPostForm from '@/components/MkPostForm.vue';
+import { scroll } from '@/scripts/scroll';
+import * as os from '@/os';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+import { $i } from '@/account';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const XTutorial = defineAsyncComponent(() => import('./timeline.tutorial.vue'));
+
+const isLocalTimelineAvailable = !instance.disableLocalTimeline || ($i != null && ($i.isModerator || $i.isAdmin));
+const isGlobalTimelineAvailable = !instance.disableGlobalTimeline || ($i != null && ($i.isModerator || $i.isAdmin));
+const keymap = {
+	't': focus,
+};
+
+const tlComponent = $ref<InstanceType<typeof XTimeline>>();
+const rootEl = $ref<HTMLElement>();
+
+let queue = $ref(0);
+const src = $computed({ get: () => defaultStore.reactiveState.tl.value.src, set: (x) => saveSrc(x) });
+
+watch ($$(src), () => queue = 0);
+
+function queueUpdated(q: number): void {
+	queue = q;
+}
+
+function top(): void {
+	scroll(rootEl, { top: 0 });
+}
+
+async function chooseList(ev: MouseEvent): Promise<void> {
+	const lists = await os.api('users/lists/list');
+	const items = lists.map(list => ({
+		type: 'link' as const,
+		text: list.name,
+		to: `/timeline/list/${list.id}`,
+	}));
+	os.popupMenu(items, ev.currentTarget ?? ev.target);
+}
+
+async function chooseAntenna(ev: MouseEvent): Promise<void> {
+	const antennas = await os.api('antennas/list');
+	const items = antennas.map(antenna => ({
+		type: 'link' as const,
+		text: antenna.name,
+		indicate: antenna.hasUnreadNote,
+		to: `/timeline/antenna/${antenna.id}`,
+	}));
+	os.popupMenu(items, ev.currentTarget ?? ev.target);
+}
+
+async function chooseChannel(ev: MouseEvent): Promise<void> {
+	const channels = await os.api('channels/followed');
+	const items = channels.map(channel => ({
+		type: 'link' as const,
+		text: channel.name,
+		indicate: channel.hasUnreadNote,
+		to: `/channels/${channel.id}`,
+	}));
+	os.popupMenu(items, ev.currentTarget ?? ev.target);
+}
+
+function saveSrc(newSrc: 'home' | 'local' | 'social' | 'global'): void {
+	defaultStore.set('tl', {
+		...defaultStore.state.tl,
+		src: newSrc,
+	});
+}
+
+async function timetravel(): Promise<void> {
+	const { canceled, result: date } = await os.inputDate({
+		title: i18n.ts.date,
+	});
+	if (canceled) return;
+
+	tlComponent.timetravel(date);
+}
+
+function focus(): void {
+	tlComponent.focus();
+}
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => [{
+	key: 'home',
+	title: i18n.ts._timelines.home,
+	icon: 'ti ti-home',
+	iconOnly: true,
+}, ...(isLocalTimelineAvailable ? [{
+	key: 'local',
+	title: i18n.ts._timelines.local,
+	icon: 'ti ti-messages',
+	iconOnly: true,
+}, {
+	key: 'social',
+	title: i18n.ts._timelines.social,
+	icon: 'ti ti-share',
+	iconOnly: true,
+}] : []), ...(isGlobalTimelineAvailable ? [{
+	key: 'global',
+	title: i18n.ts._timelines.global,
+	icon: 'ti ti-world',
+	iconOnly: true,
+}] : []), {
+	icon: 'ti ti-list',
+	title: i18n.ts.lists,
+	iconOnly: true,
+	onClick: chooseList,
+}, {
+	icon: 'ti ti-antenna',
+	title: i18n.ts.antennas,
+	iconOnly: true,
+	onClick: chooseAntenna,
+}, {
+	icon: 'ti ti-device-tv',
+	title: i18n.ts.channel,
+	iconOnly: true,
+	onClick: chooseChannel,
+}]);
+
+definePageMetadata(computed(() => ({
+	title: i18n.ts.timeline,
+	icon: src === 'local' ? 'ti ti-messages' : src === 'social' ? 'ti ti-share' : src === 'global' ? 'ti ti-world' : 'ti ti-home',
+})));
+</script>
+
+<style lang="scss" scoped>
+.cmuxhskf {
+	> .new {
+		position: sticky;
+		top: calc(var(--stickyTop, 0px) + 16px);
+		z-index: 1000;
+		width: 100%;
+
+		> button {
+			display: block;
+			margin: var(--margin) auto 0 auto;
+			padding: 8px 16px;
+			border-radius: 32px;
+		}
+	}
+
+	> .post-form {
+		border-radius: var(--radius);
+	}
+
+	> .tl {
+		background: var(--bg);
+		border-radius: var(--radius);
+		overflow: clip;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/user-info.vue b/packages/frontend/src/pages/user-info.vue
new file mode 100644
index 0000000000..addc8db9e6
--- /dev/null
+++ b/packages/frontend/src/pages/user-info.vue
@@ -0,0 +1,485 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+		<FormSuspense :p="init">
+			<div v-if="tab === 'overview'" class="_formRoot">
+				<div class="_formBlock aeakzknw">
+					<MkAvatar class="avatar" :user="user" :show-indicator="true"/>
+					<div class="body">
+						<span class="name"><MkUserName class="name" :user="user"/></span>
+						<span class="sub"><span class="acct _monospace">@{{ acct(user) }}</span></span>
+						<span class="state">
+							<span v-if="suspended" class="suspended">Suspended</span>
+							<span v-if="silenced" class="silenced">Silenced</span>
+							<span v-if="moderator" class="moderator">Moderator</span>
+						</span>
+					</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>
+				</div>
+				<FormLink v-else class="_formBlock" :to="userPage(user)">Profile</FormLink>
+
+				<FormLink v-if="user.host" class="_formBlock" :to="`/instance-info/${user.host}`">{{ i18n.ts.instanceInfo }}</FormLink>
+
+				<div class="_formBlock">
+					<MkKeyValue :copy="user.id" oneline style="margin: 1em 0;">
+						<template #key>ID</template>
+						<template #value><span class="_monospace">{{ user.id }}</span></template>
+					</MkKeyValue>
+					<!-- 要る？
+					<MkKeyValue v-if="ips.length > 0" :copy="user.id" oneline style="margin: 1em 0;">
+						<template #key>IP (recent)</template>
+						<template #value><span class="_monospace">{{ ips[0].ip }}</span></template>
+					</MkKeyValue>
+					-->
+					<MkKeyValue oneline style="margin: 1em 0;">
+						<template #key>{{ i18n.ts.createdAt }}</template>
+						<template #value><span class="_monospace"><MkTime :time="user.createdAt" :mode="'detail'"/></span></template>
+					</MkKeyValue>
+					<MkKeyValue v-if="info" oneline style="margin: 1em 0;">
+						<template #key>{{ i18n.ts.lastActiveDate }}</template>
+						<template #value><span class="_monospace"><MkTime :time="info.lastActiveDate" :mode="'detail'"/></span></template>
+					</MkKeyValue>
+					<MkKeyValue v-if="info" oneline style="margin: 1em 0;">
+						<template #key>{{ i18n.ts.email }}</template>
+						<template #value><span class="_monospace">{{ info.email }}</span></template>
+					</MkKeyValue>
+				</div>
+
+				<FormSection>
+					<template #label>ActivityPub</template>
+
+					<div class="_formBlock">
+						<MkKeyValue v-if="user.host" oneline style="margin: 1em 0;">
+							<template #key>{{ i18n.ts.instanceInfo }}</template>
+							<template #value><MkA :to="`/instance-info/${user.host}`" class="_link">{{ user.host }} <i class="ti ti-chevron-right"></i></MkA></template>
+						</MkKeyValue>
+						<MkKeyValue v-else oneline style="margin: 1em 0;">
+							<template #key>{{ i18n.ts.instanceInfo }}</template>
+							<template #value>(Local user)</template>
+						</MkKeyValue>
+						<MkKeyValue oneline style="margin: 1em 0;">
+							<template #key>{{ i18n.ts.updatedAt }}</template>
+							<template #value><MkTime v-if="user.lastFetchedAt" mode="detail" :time="user.lastFetchedAt"/><span v-else>N/A</span></template>
+						</MkKeyValue>
+						<MkKeyValue v-if="ap" oneline style="margin: 1em 0;">
+							<template #key>Type</template>
+							<template #value><span class="_monospace">{{ ap.type }}</span></template>
+						</MkKeyValue>
+					</div>
+
+					<FormButton v-if="user.host != null" class="_formBlock" @click="updateRemoteUser"><i class="ti ti-refresh"></i> {{ i18n.ts.updateRemoteUser }}</FormButton>
+
+					<FormFolder class="_formBlock">
+						<template #label>Raw</template>
+
+						<MkObjectView v-if="ap" tall :value="ap">
+						</MkObjectView>
+					</FormFolder>
+				</FormSection>
+			</div>
+			<div v-else-if="tab === 'moderation'" class="_formRoot">
+				<FormSwitch v-if="user.host == null && $i.isAdmin && (moderator || !user.isAdmin)" v-model="moderator" class="_formBlock" @update:model-value="toggleModerator">{{ i18n.ts.moderator }}</FormSwitch>
+				<FormSwitch v-model="silenced" class="_formBlock" @update:model-value="toggleSilence">{{ i18n.ts.silence }}</FormSwitch>
+				<FormSwitch v-model="suspended" class="_formBlock" @update:model-value="toggleSuspend">{{ i18n.ts.suspend }}</FormSwitch>
+				{{ i18n.ts.reflectMayTakeTime }}
+				<div class="_formBlock">
+					<FormButton v-if="user.host == null && iAmModerator" inline style="margin-right: 8px;" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</FormButton>
+					<FormButton v-if="$i.isAdmin" inline danger @click="deleteAccount">{{ i18n.ts.deleteAccount }}</FormButton>
+				</div>
+				<FormTextarea v-model="moderationNote" manual-save class="_formBlock">
+					<template #label>Moderation note</template>
+				</FormTextarea>
+				<FormFolder class="_formBlock">
+					<template #label>IP</template>
+					<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
+					<MkInfo v-else>The date is the IP address was first acknowledged.</MkInfo>
+					<template v-if="iAmAdmin && ips">
+						<div v-for="record in ips" :key="record.ip" class="_monospace" :class="$style.ip" style="margin: 1em 0;">
+							<span class="date">{{ record.createdAt }}</span>
+							<span class="ip">{{ record.ip }}</span>
+						</div>
+					</template>
+				</FormFolder>
+				<FormFolder class="_formBlock">
+					<template #label>{{ i18n.ts.files }}</template>
+
+					<MkFileListForAdmin :pagination="filesPagination" view-mode="grid"/>
+				</FormFolder>
+				<FormSection>
+					<template #label>Drive Capacity Override</template>
+
+					<FormInput v-if="user.host == null" v-model="driveCapacityOverrideMb" inline :manual-save="true" type="number" :placeholder="i18n.t('defaultValueIs', { value: instance.driveCapacityPerLocalUserMb })" @update:model-value="applyDriveCapacityOverride">
+						<template #label>{{ i18n.ts.driveCapOverrideLabel }}</template>
+						<template #suffix>MB</template>
+						<template #caption>
+							{{ i18n.ts.driveCapOverrideCaption }}
+						</template>
+					</FormInput>
+				</FormSection>
+			</div>
+			<div v-else-if="tab === 'chart'" class="_formRoot">
+				<div class="cmhjzshm">
+					<div class="selects">
+						<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
+							<option value="per-user-notes">{{ i18n.ts.notes }}</option>
+						</MkSelect>
+					</div>
+					<div class="charts">
+						<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div>
+						<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ user, withoutAll: true }" :detailed="true"></MkChart>
+						<div class="label">{{ i18n.t('recentNDays', { n: 90 }) }}</div>
+						<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ user, withoutAll: true }" :detailed="true"></MkChart>
+					</div>
+				</div>
+			</div>
+			<div v-else-if="tab === 'raw'" class="_formRoot">
+				<MkObjectView v-if="info && $i.isAdmin" tall :value="info">
+				</MkObjectView>
+
+				<MkObjectView tall :value="user">
+				</MkObjectView>
+			</div>
+		</FormSuspense>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
+import * as misskey from 'misskey-js';
+import MkChart from '@/components/MkChart.vue';
+import MkObjectView from '@/components/MkObjectView.vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormLink from '@/components/form/link.vue';
+import FormSection from '@/components/form/section.vue';
+import FormButton from '@/components/MkButton.vue';
+import FormInput from '@/components/form/input.vue';
+import FormSplit from '@/components/form/split.vue';
+import FormFolder from '@/components/form/folder.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import MkSelect from '@/components/form/select.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import MkFileListForAdmin from '@/components/MkFileListForAdmin.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import * as os from '@/os';
+import number from '@/filters/number';
+import bytes from '@/filters/bytes';
+import { url } from '@/config';
+import { userPage, acct } from '@/filters/user';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+import { iAmAdmin, iAmModerator } from '@/account';
+import { instance } from '@/instance';
+
+const props = defineProps<{
+	userId: string;
+}>();
+
+let tab = $ref('overview');
+let chartSrc = $ref('per-user-notes');
+let user = $ref<null | misskey.entities.UserDetailed>();
+let init = $ref<ReturnType<typeof createFetcher>>();
+let info = $ref();
+let ips = $ref(null);
+let ap = $ref(null);
+let moderator = $ref(false);
+let silenced = $ref(false);
+let suspended = $ref(false);
+let driveCapacityOverrideMb: number | null = $ref(0);
+let moderationNote = $ref('');
+const filesPagination = {
+	endpoint: 'admin/drive/files' as const,
+	limit: 10,
+	params: computed(() => ({
+		userId: props.userId,
+	})),
+};
+
+function createFetcher() {
+	if (iAmModerator) {
+		return () => Promise.all([os.api('users/show', {
+			userId: props.userId,
+		}), os.api('admin/show-user', {
+			userId: props.userId,
+		}), iAmAdmin ? os.api('admin/get-user-ips', {
+			userId: props.userId,
+		}) : Promise.resolve(null)]).then(([_user, _info, _ips]) => {
+			user = _user;
+			info = _info;
+			ips = _ips;
+			moderator = info.isModerator;
+			silenced = info.isSilenced;
+			suspended = info.isSuspended;
+			driveCapacityOverrideMb = user.driveCapacityOverrideMb;
+			moderationNote = info.moderationNote;
+
+			watch($$(moderationNote), async () => {
+				await os.api('admin/update-user-note', { userId: user.id, text: moderationNote });
+				await refreshUser();
+			});
+		});
+	} else {
+		return () => os.api('users/show', {
+			userId: props.userId,
+		}).then((res) => {
+			user = res;
+		});
+	}
+}
+
+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();
+}
+
+async function applyDriveCapacityOverride() {
+	let driveCapOrMb = driveCapacityOverrideMb;
+	if (driveCapacityOverrideMb && driveCapacityOverrideMb < 0) {
+		driveCapOrMb = null;
+	}
+	try {
+		await os.apiWithDialog('admin/drive-capacity-override', { userId: user.id, overrideMb: driveCapOrMb });
+		await refreshUser();
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			text: err.toString(),
+		});
+	}
+}
+
+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();
+}, {
+	immediate: true,
+});
+
+watch($$(user), () => {
+	os.api('ap/get', {
+		uri: user.uri ?? `${url}/users/${user.id}`,
+	}).then(res => {
+		ap = res;
+	});
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => [{
+	key: 'overview',
+	title: i18n.ts.overview,
+	icon: 'ti ti-info-circle',
+}, iAmModerator ? {
+	key: 'moderation',
+	title: i18n.ts.moderation,
+	icon: 'ti ti-user-exclamation',
+} : null, {
+	key: 'chart',
+	title: i18n.ts.charts,
+	icon: 'ti ti-chart-line',
+}, {
+	key: 'raw',
+	title: 'Raw',
+	icon: 'ti ti-code',
+}].filter(x => x != null));
+
+definePageMetadata(computed(() => ({
+	title: user ? acct(user) : i18n.ts.userInfo,
+	icon: 'ti ti-info-circle',
+})));
+</script>
+
+<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;
+		}
+
+		> .state {
+			display: flex;
+			gap: 8px;
+			flex-wrap: wrap;
+			margin-top: 4px;
+
+			&:empty {
+				display: none;
+			}
+
+			> .suspended, > .silenced, > .moderator {
+				display: inline-block;
+				border: solid 1px;
+				border-radius: 6px;
+				padding: 2px 6px;
+				font-size: 85%;
+			}
+
+			> .suspended {
+				color: var(--error);
+				border-color: var(--error);
+			}
+
+			> .silenced {
+				color: var(--warn);
+				border-color: var(--warn);
+			}
+
+			> .moderator {
+				color: var(--success);
+				border-color: var(--success);
+			}
+		}
+	}
+}
+
+.cmhjzshm {
+	> .selects {
+		display: flex;
+		margin: 0 0 16px 0;
+	}
+
+	> .charts {
+		> .label {
+			margin-bottom: 12px;
+			font-weight: bold;
+		}
+	}
+}
+</style>
+
+<style lang="scss" module>
+.ip {
+	display: flex;
+
+	> :global(.date) {
+		opacity: 0.7;
+	}
+
+	> :global(.ip) {
+		margin-left: auto;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/user-list-timeline.vue b/packages/frontend/src/pages/user-list-timeline.vue
new file mode 100644
index 0000000000..fdb3167375
--- /dev/null
+++ b/packages/frontend/src/pages/user-list-timeline.vue
@@ -0,0 +1,121 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<div ref="rootEl" v-size="{ min: [800] }" class="eqqrhokj">
+		<div v-if="queue > 0" class="new"><button class="_buttonPrimary" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
+		<div class="tl _block">
+			<XTimeline
+				ref="tlEl" :key="listId"
+				class="tl"
+				src="list"
+				:list="listId"
+				:sound="true"
+				@queue="queueUpdated"
+			/>
+		</div>
+	</div>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { computed, watch, inject } from 'vue';
+import XTimeline from '@/components/MkTimeline.vue';
+import { scroll } from '@/scripts/scroll';
+import * as os from '@/os';
+import { useRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+
+const router = useRouter();
+
+const props = defineProps<{
+	listId: string;
+}>();
+
+let list = $ref(null);
+let queue = $ref(0);
+let tlEl = $ref<InstanceType<typeof XTimeline>>();
+let rootEl = $ref<HTMLElement>();
+
+watch(() => props.listId, async () => {
+	list = await os.api('users/lists/show', {
+		listId: props.listId,
+	});
+}, { immediate: true });
+
+function queueUpdated(q) {
+	queue = q;
+}
+
+function top() {
+	scroll(rootEl, { top: 0 });
+}
+
+function settings() {
+	router.push(`/my/lists/${props.listId}`);
+}
+
+async function timetravel() {
+	const { canceled, result: date } = await os.inputDate({
+		title: i18n.ts.date,
+	});
+	if (canceled) return;
+
+	tlEl.timetravel(date);
+}
+
+const headerActions = $computed(() => list ? [{
+	icon: 'fas fa-calendar-alt',
+	text: i18n.ts.jumpToSpecifiedDate,
+	handler: timetravel,
+}, {
+	icon: 'ti ti-settings',
+	text: i18n.ts.settings,
+	handler: settings,
+}] : []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => list ? {
+	title: list.name,
+	icon: 'ti ti-list',
+} : null));
+</script>
+
+<style lang="scss" scoped>
+.eqqrhokj {
+	padding: var(--margin);
+
+	> .new {
+		position: sticky;
+		top: calc(var(--stickyTop, 0px) + 16px);
+		z-index: 1000;
+		width: 100%;
+
+		> button {
+			display: block;
+			margin: var(--margin) auto 0 auto;
+			padding: 8px 16px;
+			border-radius: 32px;
+		}
+	}
+
+	> .tl {
+		background: var(--bg);
+		border-radius: var(--radius);
+		overflow: clip;
+	}
+
+	&.min-width_800px {
+		max-width: 800px;
+		margin: 0 auto;
+	}
+}
+
+@container (min-width: 800px) {
+	.eqqrhokj {
+		max-width: 800px;
+		margin: 0 auto;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/user/clips.vue b/packages/frontend/src/pages/user/clips.vue
new file mode 100644
index 0000000000..8c71aacb0c
--- /dev/null
+++ b/packages/frontend/src/pages/user/clips.vue
@@ -0,0 +1,47 @@
+<template>
+<MkSpacer :content-max="700">
+	<div class="pages-user-clips">
+		<MkPagination v-slot="{items}" ref="list" :pagination="pagination" class="list">
+			<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
+				<b>{{ item.name }}</b>
+				<div v-if="item.description" class="description">{{ item.description }}</div>
+			</MkA>
+		</MkPagination>
+	</div>
+</MkSpacer>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import * as misskey from 'misskey-js';
+import MkPagination from '@/components/MkPagination.vue';
+
+const props = defineProps<{
+	user: misskey.entities.User;
+}>();
+
+const pagination = {
+	endpoint: 'users/clips' as const,
+	limit: 20,
+	params: computed(() => ({
+		userId: props.user.id,
+	})),
+};
+</script>
+
+<style lang="scss" scoped>
+.pages-user-clips {
+	> .list {
+		> .item {
+			display: block;
+			padding: 16px;
+
+			> .description {
+				margin-top: 8px;
+				padding-top: 8px;
+				border-top: solid 0.5px var(--divider);
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/user/follow-list.vue b/packages/frontend/src/pages/user/follow-list.vue
new file mode 100644
index 0000000000..d42acd838f
--- /dev/null
+++ b/packages/frontend/src/pages/user/follow-list.vue
@@ -0,0 +1,47 @@
+<template>
+<div>
+	<MkPagination v-slot="{items}" ref="list" :pagination="type === 'following' ? followingPagination : followersPagination" class="mk-following-or-followers">
+		<div class="users">
+			<MkUserInfo v-for="user in items.map(x => type === 'following' ? x.followee : x.follower)" :key="user.id" class="user" :user="user"/>
+		</div>
+	</MkPagination>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import * as misskey from 'misskey-js';
+import MkUserInfo from '@/components/MkUserInfo.vue';
+import MkPagination from '@/components/MkPagination.vue';
+
+const props = defineProps<{
+	user: misskey.entities.User;
+	type: 'following' | 'followers';
+}>();
+
+const followingPagination = {
+	endpoint: 'users/following' as const,
+	limit: 20,
+	params: computed(() => ({
+		userId: props.user.id,
+	})),
+};
+
+const followersPagination = {
+	endpoint: 'users/followers' as const,
+	limit: 20,
+	params: computed(() => ({
+		userId: props.user.id,
+	})),
+};
+</script>
+
+<style lang="scss" scoped>
+.mk-following-or-followers {
+	> .users {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+		grid-gap: var(--margin);
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/user/followers.vue b/packages/frontend/src/pages/user/followers.vue
new file mode 100644
index 0000000000..17c2843381
--- /dev/null
+++ b/packages/frontend/src/pages/user/followers.vue
@@ -0,0 +1,61 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="1000">
+		<transition name="fade" mode="out-in">
+			<div v-if="user">
+				<XFollowList :user="user" type="followers"/>
+			</div>
+			<MkError v-else-if="error" @retry="fetchUser()"/>
+			<MkLoading v-else/>
+		</transition>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue';
+import * as Acct from 'misskey-js/built/acct';
+import * as misskey from 'misskey-js';
+import XFollowList from './follow-list.vue';
+import * as os from '@/os';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+
+const props = withDefaults(defineProps<{
+	acct: string;
+}>(), {
+});
+
+let user = $ref<null | misskey.entities.UserDetailed>(null);
+let error = $ref(null);
+
+function fetchUser(): void {
+	if (props.acct == null) return;
+	user = null;
+	os.api('users/show', Acct.parse(props.acct)).then(u => {
+		user = u;
+	}).catch(err => {
+		error = err;
+	});
+}
+
+watch(() => props.acct, fetchUser, {
+	immediate: true,
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => user ? {
+	icon: 'ti ti-user',
+	title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
+	subtitle: i18n.ts.followers,
+	userName: user,
+	avatar: user,
+} : null));
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/packages/frontend/src/pages/user/following.vue b/packages/frontend/src/pages/user/following.vue
new file mode 100644
index 0000000000..03892ec03d
--- /dev/null
+++ b/packages/frontend/src/pages/user/following.vue
@@ -0,0 +1,61 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="1000">
+		<transition name="fade" mode="out-in">
+			<div v-if="user">
+				<XFollowList :user="user" type="following"/>
+			</div>
+			<MkError v-else-if="error" @retry="fetchUser()"/>
+			<MkLoading v-else/>
+		</transition>
+	</MkSpacer>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue';
+import * as Acct from 'misskey-js/built/acct';
+import * as misskey from 'misskey-js';
+import XFollowList from './follow-list.vue';
+import * as os from '@/os';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+
+const props = withDefaults(defineProps<{
+	acct: string;
+}>(), {
+});
+
+let user = $ref<null | misskey.entities.UserDetailed>(null);
+let error = $ref(null);
+
+function fetchUser(): void {
+	if (props.acct == null) return;
+	user = null;
+	os.api('users/show', Acct.parse(props.acct)).then(u => {
+		user = u;
+	}).catch(err => {
+		error = err;
+	});
+}
+
+watch(() => props.acct, fetchUser, {
+	immediate: true,
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => user ? {
+	icon: 'ti ti-user',
+	title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
+	subtitle: i18n.ts.following,
+	userName: user,
+	avatar: user,
+} : null));
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/packages/frontend/src/pages/user/gallery.vue b/packages/frontend/src/pages/user/gallery.vue
new file mode 100644
index 0000000000..b80e83fb11
--- /dev/null
+++ b/packages/frontend/src/pages/user/gallery.vue
@@ -0,0 +1,38 @@
+<template>
+<MkSpacer :content-max="700">
+	<MkPagination v-slot="{items}" :pagination="pagination">
+		<div class="jrnovfpt">
+			<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
+		</div>
+	</MkPagination>
+</MkSpacer>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import * as misskey from 'misskey-js';
+import MkGalleryPostPreview from '@/components/MkGalleryPostPreview.vue';
+import MkPagination from '@/components/MkPagination.vue';
+
+const props = withDefaults(defineProps<{
+	user: misskey.entities.User;
+}>(), {
+});
+
+const pagination = {
+	endpoint: 'users/gallery/posts' as const,
+	limit: 6,
+	params: computed(() => ({
+		userId: props.user.id,
+	})),
+};
+</script>
+
+<style lang="scss" scoped>
+.jrnovfpt {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+	grid-gap: 12px;
+	margin: var(--margin);
+}
+</style>
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
new file mode 100644
index 0000000000..43c1b37e1d
--- /dev/null
+++ b/packages/frontend/src/pages/user/home.vue
@@ -0,0 +1,530 @@
+<template>
+<MkSpacer :content-max="narrow ? 800 : 1100">
+	<div ref="rootEl" v-size="{ max: [500] }" class="ftskorzw" :class="{ wide: !narrow }">
+		<div class="main">
+			<!-- TODO -->
+			<!-- <div class="punished" v-if="user.isSuspended"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSuspended }}</div> -->
+			<!-- <div class="punished" v-if="user.isSilenced"><i class="ti ti-alert-triangle" style="margin-right: 8px;"></i> {{ i18n.ts.userSilenced }}</div> -->
+
+			<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="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="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
+								<span v-if="!user.isAdmin && user.isModerator" :title="i18n.ts.isModerator" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
+								<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
+								<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
+							</div>
+						</div>
+						<span v-if="$i && $i.id != user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span>
+						<div v-if="$i" class="actions">
+							<button class="menu _button" @click="menu"><i class="ti ti-dots"></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 :user="user" :nowrap="false" class="name"/>
+						<div class="bottom">
+							<span class="username"><MkAcct :user="user" :detail="true"/></span>
+							<span v-if="user.isAdmin" :title="i18n.ts.isAdmin" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
+							<span v-if="!user.isAdmin && user.isModerator" :title="i18n.ts.isModerator" style="color: var(--badge);"><i class="ti ti-shield"></i></span>
+							<span v-if="user.isLocked" :title="i18n.ts.isLocked"><i class="ti ti-lock"></i></span>
+							<span v-if="user.isBot" :title="i18n.ts.isBot"><i class="ti ti-robot"></i></span>
+						</div>
+					</div>
+					<div class="description">
+						<Mfm v-if="user.description" :text="user.description" :is-note="false" :author="user" :i="$i" :custom-emojis="user.emojis"/>
+						<p v-else class="empty">{{ i18n.ts.noAccountDescription }}</p>
+					</div>
+					<div class="fields system">
+						<dl v-if="user.location" class="field">
+							<dt class="name"><i class="ti ti-map-pin ti-fw"></i> {{ i18n.ts.location }}</dt>
+							<dd class="value">{{ user.location }}</dd>
+						</dl>
+						<dl v-if="user.birthday" class="field">
+							<dt class="name"><i class="ti ti-cake ti-fw"></i> {{ i18n.ts.birthday }}</dt>
+							<dd class="value">{{ user.birthday.replace('-', '/').replace('-', '/') }} ({{ $t('yearsOld', { age }) }})</dd>
+						</dl>
+						<dl class="field">
+							<dt class="name"><i class="ti ti-calendar ti-fw"></i> {{ i18n.ts.registeredDate }}</dt>
+							<dd class="value">{{ new Date(user.createdAt).toLocaleString() }} (<MkTime :time="user.createdAt"/>)</dd>
+						</dl>
+					</div>
+					<div v-if="user.fields.length > 0" class="fields">
+						<dl v-for="(field, i) in user.fields" :key="i" class="field">
+							<dt class="name">
+								<Mfm :text="field.name" :plain="true" :custom-emojis="user.emojis" :colored="false"/>
+							</dt>
+							<dd class="value">
+								<Mfm :text="field.value" :author="user" :i="$i" :custom-emojis="user.emojis" :colored="false"/>
+							</dd>
+						</dl>
+					</div>
+					<div class="status">
+						<MkA v-click-anime :to="userPage(user)" :class="{ active: page === 'index' }">
+							<b>{{ number(user.notesCount) }}</b>
+							<span>{{ i18n.ts.notes }}</span>
+						</MkA>
+						<MkA v-click-anime :to="userPage(user, 'following')" :class="{ active: page === 'following' }">
+							<b>{{ number(user.followingCount) }}</b>
+							<span>{{ i18n.ts.following }}</span>
+						</MkA>
+						<MkA v-click-anime :to="userPage(user, 'followers')" :class="{ active: page === 'followers' }">
+							<b>{{ number(user.followersCount) }}</b>
+							<span>{{ i18n.ts.followers }}</span>
+						</MkA>
+					</div>
+				</div>
+			</div>
+
+			<div class="contents">
+				<div v-if="user.pinnedNotes.length > 0" class="_gap">
+					<XNote v-for="note in user.pinnedNotes" :key="note.id" class="note _block" :note="note" :pinned="true"/>
+				</div>
+				<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
+				<template v-if="narrow">
+					<XPhotos :key="user.id" :user="user"/>
+					<XActivity :key="user.id" :user="user" style="margin-top: var(--margin);"/>
+				</template>
+			</div>
+			<div>
+				<XUserTimeline :user="user"/>
+			</div>
+		</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>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue';
+import calcAge from 's-age';
+import * as misskey from 'misskey-js';
+import XUserTimeline from './index.timeline.vue';
+import XNote from '@/components/MkNote.vue';
+import MkFollowButton from '@/components/MkFollowButton.vue';
+import MkContainer from '@/components/MkContainer.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
+import MkTab from '@/components/MkTab.vue';
+import MkInfo from '@/components/MkInfo.vue';
+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 { useRouter } from '@/router';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
+
+const XPhotos = defineAsyncComponent(() => import('./index.photos.vue'));
+const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
+
+const props = withDefaults(defineProps<{
+	user: misskey.entities.UserDetailed;
+}>(), {
+});
+
+const router = useRouter();
+
+let parallaxAnimationId = $ref<null | number>(null);
+let narrow = $ref<null | boolean>(null);
+let rootEl = $ref<null | HTMLElement>(null);
+let bannerEl = $ref<null | HTMLElement>(null);
+
+const style = $computed(() => {
+	if (props.user.bannerUrl == null) return {};
+	return {
+		backgroundImage: `url(${ props.user.bannerUrl })`,
+	};
+});
+
+const age = $computed(() => {
+	return calcAge(props.user.birthday);
+});
+
+function menu(ev) {
+	os.popupMenu(getUserMenu(props.user, router), ev.currentTarget ?? ev.target);
+}
+
+function parallaxLoop() {
+	parallaxAnimationId = window.requestAnimationFrame(parallaxLoop);
+	parallax();
+}
+
+function parallax() {
+	const banner = bannerEl as any;
+	if (banner == null) return;
+
+	const top = getScrollPosition(rootEl);
+
+	if (top < 0) return;
+
+	const z = 1.75; // 奥行き(小さいほど奥)
+	const pos = -(top / z);
+	banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
+}
+
+onMounted(() => {
+	window.requestAnimationFrame(parallaxLoop);
+	narrow = rootEl!.clientWidth < 1000;
+});
+
+onUnmounted(() => {
+	if (parallaxAnimationId) {
+		window.cancelAnimationFrame(parallaxAnimationId);
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.ftskorzw {
+
+	> .main {
+
+		> .punished {
+			font-size: 0.8em;
+			padding: 16px;
+		}
+
+		> .profile {
+
+			> .main {
+				position: relative;
+				overflow: hidden;
+
+				> .banner-container {
+					position: relative;
+					height: 250px;
+					overflow: hidden;
+					background-size: cover;
+					background-position: center;
+
+					> .banner {
+						height: 100%;
+						background-color: #4c5e6d;
+						background-size: cover;
+						background-position: center;
+						box-shadow: 0 0 128px rgba(0, 0, 0, 0.5) inset;
+						will-change: background-position;
+					}
+
+					> .fade {
+						position: absolute;
+						bottom: 0;
+						left: 0;
+						width: 100%;
+						height: 78px;
+						background: linear-gradient(transparent, rgba(#000, 0.7));
+					}
+
+					> .followed {
+						position: absolute;
+						top: 12px;
+						left: 12px;
+						padding: 4px 8px;
+						color: #fff;
+						background: rgba(0, 0, 0, 0.7);
+						font-size: 0.7em;
+						border-radius: 6px;
+					}
+
+					> .actions {
+						position: absolute;
+						top: 12px;
+						right: 12px;
+						-webkit-backdrop-filter: var(--blur, blur(8px));
+						backdrop-filter: var(--blur, blur(8px));
+						background: rgba(0, 0, 0, 0.2);
+						padding: 8px;
+						border-radius: 24px;
+
+						> .menu {
+							vertical-align: bottom;
+							height: 31px;
+							width: 31px;
+							color: #fff;
+							text-shadow: 0 0 8px #000;
+							font-size: 16px;
+						}
+
+						> .koudoku {
+							margin-left: 4px;
+							vertical-align: bottom;
+						}
+					}
+
+					> .title {
+						position: absolute;
+						bottom: 0;
+						left: 0;
+						width: 100%;
+						padding: 0 0 8px 154px;
+						box-sizing: border-box;
+						color: #fff;
+
+						> .name {
+							display: block;
+							margin: 0;
+							line-height: 32px;
+							font-weight: bold;
+							font-size: 1.8em;
+							text-shadow: 0 0 8px #000;
+						}
+
+						> .bottom {
+							> * {
+								display: inline-block;
+								margin-right: 16px;
+								line-height: 20px;
+								opacity: 0.8;
+
+								&.username {
+									font-weight: bold;
+								}
+							}
+						}
+					}
+				}
+
+				> .title {
+					display: none;
+					text-align: center;
+					padding: 50px 8px 16px 8px;
+					font-weight: bold;
+					border-bottom: solid 0.5px var(--divider);
+
+					> .bottom {
+						> * {
+							display: inline-block;
+							margin-right: 8px;
+							opacity: 0.8;
+						}
+					}
+				}
+
+				> .avatar {
+					display: block;
+					position: absolute;
+					top: 170px;
+					left: 16px;
+					z-index: 2;
+					width: 120px;
+					height: 120px;
+					box-shadow: 1px 1px 3px rgba(#000, 0.2);
+				}
+
+				> .description {
+					padding: 24px 24px 24px 154px;
+					font-size: 0.95em;
+
+					> .empty {
+						margin: 0;
+						opacity: 0.5;
+					}
+				}
+
+				> .fields {
+					padding: 24px;
+					font-size: 0.9em;
+					border-top: solid 0.5px var(--divider);
+
+					> .field {
+						display: flex;
+						padding: 0;
+						margin: 0;
+						align-items: center;
+
+						&:not(:last-child) {
+							margin-bottom: 8px;
+						}
+
+						> .name {
+							width: 30%;
+							overflow: hidden;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+							font-weight: bold;
+							text-align: center;
+						}
+
+						> .value {
+							width: 70%;
+							overflow: hidden;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+							margin: 0;
+						}
+					}
+
+					&.system > .field > .name {
+					}
+				}
+
+				> .status {
+					display: flex;
+					padding: 24px;
+					border-top: solid 0.5px var(--divider);
+
+					> a {
+						flex: 1;
+						text-align: center;
+
+						&.active {
+							color: var(--accent);
+						}
+
+						&:hover {
+							text-decoration: none;
+						}
+
+						> b {
+							display: block;
+							line-height: 16px;
+						}
+
+						> span {
+							font-size: 70%;
+						}
+					}
+				}
+			}
+		}
+
+		> .contents {
+			> .content {
+				margin-bottom: var(--margin);
+			}
+		}
+	}
+
+	&.max-width_500px {
+		> .main {
+			> .profile > .main {
+				> .banner-container {
+					height: 140px;
+
+					> .fade {
+						display: none;
+					}
+
+					> .title {
+						display: none;
+					}
+				}
+
+				> .title {
+					display: block;
+				}
+
+				> .avatar {
+					top: 90px;
+					left: 0;
+					right: 0;
+					width: 92px;
+					height: 92px;
+					margin: auto;
+				}
+
+				> .description {
+					padding: 16px;
+					text-align: center;
+				}
+
+				> .fields {
+					padding: 16px;
+				}
+
+				> .status {
+					padding: 16px;
+				}
+			}
+
+			> .contents {
+				> .nav {
+					font-size: 80%;
+				}
+			}
+		}
+	}
+
+	&.wide {
+		display: flex;
+		width: 100%;
+
+		> .main {
+			width: 100%;
+			min-width: 0;
+		}
+
+		> .sub {
+			max-width: 350px;
+			min-width: 350px;
+			margin-left: var(--margin);
+		}
+	}
+}
+
+@container (max-width: 500px) {
+	.ftskorzw {
+		> .main {
+			> .profile > .main {
+				> .banner-container {
+					height: 140px;
+
+					> .fade {
+						display: none;
+					}
+
+					> .title {
+						display: none;
+					}
+				}
+
+				> .title {
+					display: block;
+				}
+
+				> .avatar {
+					top: 90px;
+					left: 0;
+					right: 0;
+					width: 92px;
+					height: 92px;
+					margin: auto;
+				}
+
+				> .description {
+					padding: 16px;
+					text-align: center;
+				}
+
+				> .fields {
+					padding: 16px;
+				}
+
+				> .status {
+					padding: 16px;
+				}
+			}
+
+			> .contents {
+				> .nav {
+					font-size: 80%;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/user/index.activity.vue b/packages/frontend/src/pages/user/index.activity.vue
new file mode 100644
index 0000000000..523072d2e6
--- /dev/null
+++ b/packages/frontend/src/pages/user/index.activity.vue
@@ -0,0 +1,52 @@
+<template>
+<MkContainer>
+	<template #header><i class="ti ti-chart-line" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
+	<template #func>
+		<button class="_button" @click="showMenu">
+			<i class="ti ti-dots"></i>
+		</button>
+	</template>
+
+	<div style="padding: 8px;">
+		<MkChart :src="chartSrc" :args="{ user, withoutAll: true }" span="day" :limit="limit" :bar="true" :stacked="true" :detailed="false" :aspect-ratio="5"/>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as misskey from 'misskey-js';
+import MkContainer from '@/components/MkContainer.vue';
+import MkChart from '@/components/MkChart.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const props = withDefaults(defineProps<{
+	user: misskey.entities.User;
+	limit?: number;
+}>(), {
+	limit: 50,
+});
+
+let chartSrc = $ref('per-user-notes');
+
+function showMenu(ev: MouseEvent) {
+	os.popupMenu([{
+		text: i18n.ts.notes,
+		active: true,
+		action: () => {
+			chartSrc = 'per-user-notes';
+		},
+	}, /*, {
+		text: i18n.ts.following,
+		action: () => {
+			chartSrc = 'per-user-following';
+		}
+	}, {
+		text: i18n.ts.followers,
+		action: () => {
+			chartSrc = 'per-user-followers';
+		}
+	}*/], ev.currentTarget ?? ev.target);
+}
+</script>
diff --git a/packages/frontend/src/pages/user/index.photos.vue b/packages/frontend/src/pages/user/index.photos.vue
new file mode 100644
index 0000000000..b33979a79d
--- /dev/null
+++ b/packages/frontend/src/pages/user/index.photos.vue
@@ -0,0 +1,102 @@
+<template>
+<MkContainer :max-height="300" :foldable="true">
+	<template #header><i class="ti ti-photo" style="margin-right: 0.5em;"></i>{{ $ts.images }}</template>
+	<div class="ujigsodd">
+		<MkLoading v-if="fetching"/>
+		<div v-if="!fetching && images.length > 0" class="stream">
+			<MkA
+				v-for="image in images"
+				:key="image.note.id + image.file.id"
+				class="img"
+				:to="notePage(image.note)"
+			>
+				<ImgWithBlurhash :hash="image.file.blurhash" :src="thumbnail(image.file)" :title="image.file.name"/>
+			</MkA>
+		</div>
+		<p v-if="!fetching && images.length == 0" class="empty">{{ $ts.nothing }}</p>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import * as misskey from 'misskey-js';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import { notePage } from '@/filters/note';
+import * as os from '@/os';
+import MkContainer from '@/components/MkContainer.vue';
+import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
+import { defaultStore } from '@/store';
+
+const props = defineProps<{
+	user: misskey.entities.UserDetailed;
+}>();
+
+let fetching = $ref(true);
+let images = $ref<{
+	note: misskey.entities.Note;
+	file: misskey.entities.DriveFile;
+}[]>([]);
+
+function thumbnail(image: misskey.entities.DriveFile): string {
+	return defaultStore.state.disableShowingAnimatedImages
+		? getStaticImageUrl(image.thumbnailUrl)
+		: image.thumbnailUrl;
+}
+
+onMounted(() => {
+	const image = [
+		'image/jpeg',
+		'image/webp',
+		'image/avif',
+		'image/png',
+		'image/gif',
+		'image/apng',
+		'image/vnd.mozilla.apng',
+	];
+	os.api('users/notes', {
+		userId: props.user.id,
+		fileType: image,
+		excludeNsfw: defaultStore.state.nsfw !== 'ignore',
+		limit: 10,
+	}).then(notes => {
+		for (const note of notes) {
+			for (const file of note.files) {
+				images.push({
+					note,
+					file,
+				});
+			}
+		}
+		fetching = false;
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+.ujigsodd {
+	padding: 8px;
+
+	> .stream {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+		grid-gap: 6px;
+
+		> .img {
+			height: 128px;
+			border-radius: 6px;
+			overflow: clip;
+		}
+	}
+
+	> .empty {
+		margin: 0;
+		padding: 16px;
+		text-align: center;
+
+		> i {
+			margin-right: 4px;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/user/index.timeline.vue b/packages/frontend/src/pages/user/index.timeline.vue
new file mode 100644
index 0000000000..41983a5ae8
--- /dev/null
+++ b/packages/frontend/src/pages/user/index.timeline.vue
@@ -0,0 +1,45 @@
+<template>
+<MkStickyContainer>
+	<template #header>
+		<MkTab v-model="include" :class="$style.tab">
+			<option :value="null">{{ i18n.ts.notes }}</option>
+			<option value="replies">{{ i18n.ts.notesAndReplies }}</option>
+			<option value="files">{{ i18n.ts.withFiles }}</option>
+		</MkTab>
+	</template>
+	<XNotes :no-gap="true" :pagination="pagination"/>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import * as misskey from 'misskey-js';
+import XNotes from '@/components/MkNotes.vue';
+import MkTab from '@/components/MkTab.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	user: misskey.entities.UserDetailed;
+}>();
+
+const include = ref<string | null>(null);
+
+const pagination = {
+	endpoint: 'users/notes' as const,
+	limit: 10,
+	params: computed(() => ({
+		userId: props.user.id,
+		includeReplies: include.value === 'replies',
+		withFiles: include.value === 'files',
+	})),
+};
+</script>
+
+<style lang="scss" module>
+.tab {
+	margin: calc(var(--margin) / 2) 0;
+	padding: calc(var(--margin) / 2) 0;
+	background: var(--bg);
+}
+</style>
diff --git a/packages/frontend/src/pages/user/index.vue b/packages/frontend/src/pages/user/index.vue
new file mode 100644
index 0000000000..6e895cd8d7
--- /dev/null
+++ b/packages/frontend/src/pages/user/index.vue
@@ -0,0 +1,113 @@
+<template>
+<MkStickyContainer>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<div>
+		<transition name="fade" mode="out-in">
+			<div v-if="user">
+				<XHome v-if="tab === 'home'" :user="user"/>
+				<XReactions v-else-if="tab === 'reactions'" :user="user"/>
+				<XClips v-else-if="tab === 'clips'" :user="user"/>
+				<XPages v-else-if="tab === 'pages'" :user="user"/>
+				<XGallery v-else-if="tab === 'gallery'" :user="user"/>
+			</div>
+			<MkError v-else-if="error" @retry="fetchUser()"/>
+			<MkLoading v-else/>
+		</transition>
+	</div>
+</MkStickyContainer>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, computed, 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 { getScrollPosition } from '@/scripts/scroll';
+import number from '@/filters/number';
+import { userPage, acct as getAcct } from '@/filters/user';
+import * as os from '@/os';
+import { useRouter } from '@/router';
+import { definePageMetadata } from '@/scripts/page-metadata';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
+
+const XHome = defineAsyncComponent(() => import('./home.vue'));
+const XReactions = defineAsyncComponent(() => import('./reactions.vue'));
+const XClips = defineAsyncComponent(() => import('./clips.vue'));
+const XPages = defineAsyncComponent(() => import('./pages.vue'));
+const XGallery = defineAsyncComponent(() => import('./gallery.vue'));
+
+const props = withDefaults(defineProps<{
+	acct: string;
+	page?: string;
+}>(), {
+	page: 'home',
+});
+
+const router = useRouter();
+
+let tab = $ref(props.page);
+let user = $ref<null | misskey.entities.UserDetailed>(null);
+let error = $ref(null);
+
+function fetchUser(): void {
+	if (props.acct == null) return;
+	user = null;
+	os.api('users/show', Acct.parse(props.acct)).then(u => {
+		user = u;
+	}).catch(err => {
+		error = err;
+	});
+}
+
+watch(() => props.acct, fetchUser, {
+	immediate: true,
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => user ? [{
+	key: 'home',
+	title: i18n.ts.overview,
+	icon: 'ti ti-home',
+}, ...($i && ($i.id === user.id)) || user.publicReactions ? [{
+	key: 'reactions',
+	title: i18n.ts.reaction,
+	icon: 'ti ti-mood-happy',
+}] : [], {
+	key: 'clips',
+	title: i18n.ts.clips,
+	icon: 'ti ti-paperclip',
+}, {
+	key: 'pages',
+	title: i18n.ts.pages,
+	icon: 'ti ti-news',
+}, {
+	key: 'gallery',
+	title: i18n.ts.gallery,
+	icon: 'ti ti-icons',
+}] : null);
+
+definePageMetadata(computed(() => user ? {
+	icon: 'ti ti-user',
+	title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`,
+	subtitle: `@${getAcct(user)}`,
+	userName: user,
+	avatar: user,
+	path: `/@${user.username}`,
+	share: {
+		title: user.name,
+	},
+} : null));
+</script>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+</style>
diff --git a/packages/frontend/src/pages/user/pages.vue b/packages/frontend/src/pages/user/pages.vue
new file mode 100644
index 0000000000..7833d6c42c
--- /dev/null
+++ b/packages/frontend/src/pages/user/pages.vue
@@ -0,0 +1,30 @@
+<template>
+<MkSpacer :content-max="700">
+	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
+		<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_gap"/>
+	</MkPagination>
+</MkSpacer>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import * as misskey from 'misskey-js';
+import MkPagePreview from '@/components/MkPagePreview.vue';
+import MkPagination from '@/components/MkPagination.vue';
+
+const props = defineProps<{
+	user: misskey.entities.User;
+}>();
+
+const pagination = {
+	endpoint: 'users/pages' as const,
+	limit: 20,
+	params: computed(() => ({
+		userId: props.user.id,
+	})),
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/frontend/src/pages/user/reactions.vue b/packages/frontend/src/pages/user/reactions.vue
new file mode 100644
index 0000000000..ab3df34301
--- /dev/null
+++ b/packages/frontend/src/pages/user/reactions.vue
@@ -0,0 +1,61 @@
+<template>
+<MkSpacer :content-max="700">
+	<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
+		<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap afdcfbfb">
+			<div class="header">
+				<MkAvatar class="avatar" :user="user"/>
+				<MkReactionIcon class="reaction" :reaction="item.type" :custom-emojis="item.note.emojis" :no-style="true"/>
+				<MkTime :time="item.createdAt" class="createdAt"/>
+			</div>
+			<MkNote :key="item.id" :note="item.note"/>
+		</div>
+	</MkPagination>
+</MkSpacer>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import * as misskey from 'misskey-js';
+import MkPagination from '@/components/MkPagination.vue';
+import MkNote from '@/components/MkNote.vue';
+import MkReactionIcon from '@/components/MkReactionIcon.vue';
+
+const props = defineProps<{
+	user: misskey.entities.User;
+}>();
+
+const pagination = {
+	endpoint: 'users/reactions' as const,
+	limit: 20,
+	params: computed(() => ({
+		userId: props.user.id,
+	})),
+};
+</script>
+
+<style lang="scss" scoped>
+.afdcfbfb {
+	> .header {
+		display: flex;
+		align-items: center;
+		padding: 8px 16px;
+		margin-bottom: 8px;
+		border-bottom: solid 2px var(--divider);
+
+		> .avatar {
+			width: 24px;
+			height: 24px;
+			margin-right: 8px;
+		}
+
+		> .reaction {
+			width: 32px;
+			height: 32px;
+		}
+
+		> .createdAt {
+			margin-left: auto;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/welcome.entrance.a.vue b/packages/frontend/src/pages/welcome.entrance.a.vue
new file mode 100644
index 0000000000..bfa54d39f2
--- /dev/null
+++ b/packages/frontend/src/pages/welcome.entrance.a.vue
@@ -0,0 +1,309 @@
+<template>
+<div v-if="meta" class="rsqzvsbo">
+	<div class="top">
+		<MkFeaturedPhotos class="bg"/>
+		<XTimeline class="tl"/>
+		<div class="shape1"></div>
+		<div class="shape2"></div>
+		<img src="/client-assets/misskey.svg" class="misskey"/>
+		<div class="emojis">
+			<MkEmoji :normal="true" :no-style="true" emoji="👍"/>
+			<MkEmoji :normal="true" :no-style="true" emoji="❤"/>
+			<MkEmoji :normal="true" :no-style="true" emoji="😆"/>
+			<MkEmoji :normal="true" :no-style="true" emoji="🎉"/>
+			<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
+		</div>
+		<div class="main">
+			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
+			<button class="_button _acrylic menu" @click="showMenu"><i class="ti ti-dots"></i></button>
+			<div class="fg">
+				<h1>
+					<!-- 背景色によってはロゴが見えなくなるのでとりあえず無効に -->
+					<!-- <img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span> -->
+					<span class="text">{{ instanceName }}</span>
+				</h1>
+				<div class="about">
+					<!-- eslint-disable-next-line vue/no-v-html -->
+					<div class="desc" v-html="meta.description || i18n.ts.headlineMisskey"></div>
+				</div>
+				<div class="action">
+					<MkButton inline rounded gradate data-cy-signup style="margin-right: 12px;" @click="signup()">{{ i18n.ts.signup }}</MkButton>
+					<MkButton inline rounded data-cy-signin @click="signin()">{{ i18n.ts.login }}</MkButton>
+				</div>
+			</div>
+		</div>
+		<div v-if="instances" class="federation">
+			<MarqueeText :duration="40">
+				<MkA v-for="instance in instances" :key="instance.id" :class="$style.federationInstance" :to="`/instance-info/${instance.host}`" behavior="window">
+					<!--<MkInstanceCardMini :instance="instance"/>-->
+					<img v-if="instance.iconUrl" class="icon" :src="instance.iconUrl" alt=""/>
+					<span class="name _monospace">{{ instance.host }}</span>
+				</MkA>
+			</MarqueeText>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import { toUnicode } from 'punycode/';
+import XTimeline from './welcome.timeline.vue';
+import MarqueeText from '@/components/MkMarquee.vue';
+import XSigninDialog from '@/components/MkSigninDialog.vue';
+import XSignupDialog from '@/components/MkSignupDialog.vue';
+import MkButton from '@/components/MkButton.vue';
+import XNote from '@/components/MkNote.vue';
+import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
+import { host, instanceName } from '@/config';
+import * as os from '@/os';
+import number from '@/filters/number';
+import { i18n } from '@/i18n';
+
+let meta = $ref();
+let stats = $ref();
+let tags = $ref();
+let onlineUsersCount = $ref();
+let instances = $ref();
+
+os.api('meta', { detail: true }).then(_meta => {
+	meta = _meta;
+});
+
+os.api('stats').then(_stats => {
+	stats = _stats;
+});
+
+os.api('get-online-users-count').then(res => {
+	onlineUsersCount = res.count;
+});
+
+os.api('hashtags/list', {
+	sort: '+mentionedLocalUsers',
+	limit: 8,
+}).then(_tags => {
+	tags = _tags;
+});
+
+os.api('federation/instances', {
+	sort: '+pubSub',
+	limit: 20,
+}).then(_instances => {
+	instances = _instances;
+});
+
+function signin() {
+	os.popup(XSigninDialog, {
+		autoSet: true,
+	}, {}, 'closed');
+}
+
+function signup() {
+	os.popup(XSignupDialog, {
+		autoSet: true,
+	}, {}, 'closed');
+}
+
+function showMenu(ev) {
+	os.popupMenu([{
+		text: i18n.ts.instanceInfo,
+		icon: 'ti ti-info-circle',
+		action: () => {
+			os.pageWindow('/about');
+		},
+	}, {
+		text: i18n.ts.aboutMisskey,
+		icon: 'ti ti-info-circle',
+		action: () => {
+			os.pageWindow('/about-misskey');
+		},
+	}, null, {
+		text: i18n.ts.help,
+		icon: 'ti ti-question-circle',
+		action: () => {
+			window.open('https://misskey-hub.net/help.md', '_blank');
+		},
+	}], ev.currentTarget ?? ev.target);
+}
+</script>
+
+<style lang="scss" scoped>
+.rsqzvsbo {
+	> .top {
+		display: flex;
+		text-align: center;
+		min-height: 100vh;
+		box-sizing: border-box;
+		padding: 16px;
+
+		> .bg {
+			position: absolute;
+			top: 0;
+			right: 0;
+			width: 80%; // 100%からshapeの幅を引いている
+			height: 100%;
+		}
+
+		> .tl {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			right: 64px;
+			margin: auto;
+			width: 500px;
+			height: calc(100% - 128px);
+			overflow: hidden;
+			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+
+			@media (max-width: 1200px) {
+				display: none;
+			}
+		}
+
+		> .shape1 {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: var(--accent);
+			clip-path: polygon(0% 0%, 45% 0%, 20% 100%, 0% 100%);
+		}
+		> .shape2 {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: var(--accent);
+			clip-path: polygon(0% 0%, 25% 0%, 35% 100%, 0% 100%);
+			opacity: 0.5;
+		}
+
+		> .misskey {
+			position: absolute;
+			top: 42px;
+			left: 42px;
+			width: 140px;
+
+			@media (max-width: 450px) {
+				width: 130px;
+			}
+		}
+
+		> .emojis {
+			position: absolute;
+			bottom: 32px;
+			left: 35px;
+
+			> * {
+				margin-right: 8px;
+			}
+
+			@media (max-width: 1200px) {
+				display: none;
+			}
+		}
+
+		> .main {
+			position: relative;
+			width: min(480px, 100%);
+			margin: auto auto auto 128px;
+			background: var(--panel);
+			border-radius: var(--radius);
+			box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
+
+			@media (max-width: 1200px) {
+				margin: auto;
+			}
+
+			> .icon {
+				width: 85px;
+				margin-top: -47px;
+				border-radius: 100%;
+				vertical-align: bottom;
+			}
+
+			> .menu {
+				position: absolute;
+				top: 16px;
+				right: 16px;
+				width: 32px;
+				height: 32px;
+				border-radius: 8px;
+				font-size: 18px;
+			}
+
+			> .fg {
+				position: relative;
+				z-index: 1;
+
+				> h1 {
+					display: block;
+					margin: 0;
+					padding: 16px 32px 24px 32px;
+					font-size: 1.4em;
+
+					> .logo {
+						vertical-align: bottom;
+						max-height: 120px;
+						max-width: min(100%, 300px);
+					}
+				}
+
+				> .about {
+					padding: 0 32px;
+				}
+
+				> .action {
+					padding: 32px;
+
+					> * {
+						line-height: 28px;
+					}
+				}
+			}
+		}
+
+		> .federation {
+			position: absolute;
+			bottom: 16px;
+			left: 0;
+			right: 0;
+			margin: auto;
+			background: var(--acrylicPanel);
+			-webkit-backdrop-filter: var(--blur, blur(15px));
+			backdrop-filter: var(--blur, blur(15px));
+			border-radius: 999px;
+			overflow: clip;
+			width: 800px;
+			padding: 8px 0;
+
+			@media (max-width: 900px) {
+				display: none;
+			}
+		}
+	}
+}
+</style>
+
+<style lang="scss" module>
+.federationInstance {
+	display: inline-flex;
+	align-items: center;
+	vertical-align: bottom;
+	padding: 6px 12px 6px 6px;
+	margin: 0 10px 0 0;
+	background: var(--panel);
+	border-radius: 999px;
+
+	> :global(.icon) {
+		display: inline-block;
+		width: 20px;
+		height: 20px;
+		margin-right: 5px;
+		border-radius: 999px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/welcome.entrance.b.vue b/packages/frontend/src/pages/welcome.entrance.b.vue
new file mode 100644
index 0000000000..8230adaf1f
--- /dev/null
+++ b/packages/frontend/src/pages/welcome.entrance.b.vue
@@ -0,0 +1,237 @@
+<template>
+<div v-if="meta" class="rsqzvsbo">
+	<div class="top">
+		<MkFeaturedPhotos class="bg"/>
+		<XTimeline class="tl"/>
+		<div class="shape"></div>
+		<div class="main">
+			<h1>
+				<img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
+			</h1>
+			<div class="about">
+				<!-- eslint-disable-next-line vue/no-v-html -->
+				<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
+			</div>
+			<div class="action">
+				<MkButton class="signup" inline gradate @click="signup()">{{ $ts.signup }}</MkButton>
+				<MkButton class="signin" inline @click="signin()">{{ $ts.login }}</MkButton>
+			</div>
+			<div v-if="onlineUsersCount && stats" class="status">
+				<div>
+					<I18n :src="$ts.nUsers" text-tag="span" class="users">
+						<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
+					</I18n>
+					<I18n :src="$ts.nNotes" text-tag="span" class="notes">
+						<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
+					</I18n>
+				</div>
+				<I18n :src="$ts.onlineUsersCount" text-tag="span" class="online">
+					<template #n><b>{{ onlineUsersCount }}</b></template>
+				</I18n>
+			</div>
+		</div>
+		<img src="/client-assets/misskey.svg" class="misskey"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { toUnicode } from 'punycode/';
+import XSigninDialog from '@/components/MkSigninDialog.vue';
+import XSignupDialog from '@/components/MkSignupDialog.vue';
+import MkButton from '@/components/MkButton.vue';
+import XNote from '@/components/MkNote.vue';
+import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
+import XTimeline from './welcome.timeline.vue';
+import { host, instanceName } from '@/config';
+import * as os from '@/os';
+import number from '@/filters/number';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		XNote,
+		XTimeline,
+		MkFeaturedPhotos,
+	},
+
+	data() {
+		return {
+			host: toUnicode(host),
+			instanceName,
+			meta: null,
+			stats: null,
+			tags: [],
+			onlineUsersCount: null,
+		};
+	},
+
+	created() {
+		os.api('meta', { detail: true }).then(meta => {
+			this.meta = meta;
+		});
+
+		os.api('stats').then(stats => {
+			this.stats = stats;
+		});
+
+		os.api('get-online-users-count').then(res => {
+			this.onlineUsersCount = res.count;
+		});
+
+		os.api('hashtags/list', {
+			sort: '+mentionedLocalUsers',
+			limit: 8,
+		}).then(tags => {
+			this.tags = tags;
+		});
+	},
+
+	methods: {
+		signin() {
+			os.popup(XSigninDialog, {
+				autoSet: true,
+			}, {}, 'closed');
+		},
+
+		signup() {
+			os.popup(XSignupDialog, {
+				autoSet: true,
+			}, {}, 'closed');
+		},
+
+		showMenu(ev) {
+			os.popupMenu([{
+				text: this.$t('aboutX', { x: instanceName }),
+				icon: 'ti ti-info-circle',
+				action: () => {
+					os.pageWindow('/about');
+				},
+			}, {
+				text: this.$ts.aboutMisskey,
+				icon: 'ti ti-info-circle',
+				action: () => {
+					os.pageWindow('/about-misskey');
+				},
+			}, null, {
+				text: this.$ts.help,
+				icon: 'ti ti-question-circle',
+				action: () => {
+					window.open(`https://misskey-hub.net/help.md`, '_blank');
+				},
+			}], ev.currentTarget ?? ev.target);
+		},
+
+		number,
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.rsqzvsbo {
+	> .top {
+		min-height: 100vh;
+		box-sizing: border-box;
+
+		> .bg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+
+		> .tl {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			right: 64px;
+			margin: auto;
+			width: 500px;
+			height: calc(100% - 128px);
+			overflow: hidden;
+			-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+			mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 128px, rgba(0,0,0,1) calc(100% - 128px), rgba(0,0,0,0) 100%);
+		}
+
+		> .shape {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: var(--accent);
+			clip-path: polygon(0% 0%, 40% 0%, 22% 100%, 0% 100%);
+		}
+
+		> .misskey {
+			position: absolute;
+			bottom: 64px;
+			left: 64px;
+			width: 160px;
+		}
+
+		> .main {
+			position: relative;
+			width: min(450px, 100%);
+			padding: 64px;
+			color: #fff;
+			font-size: 1.1em;
+
+			@media (max-width: 1200px) {
+				margin: auto;
+			}
+
+			> h1 {
+				display: block;
+				margin: 0 0 32px 0;
+				padding: 0;
+
+				> .logo {
+					vertical-align: bottom;
+					max-height: 100px;
+				}
+			}
+
+			> .about {
+				padding: 0;
+			}
+
+			> .action {
+				margin: 32px 0;
+
+				> * {
+					line-height: 32px;
+				}
+
+				> .signup {
+					background: var(--panel);
+					color: var(--fg);
+				}
+
+				> .signin {
+					background: var(--accent);
+					color: inherit;
+				}
+			}
+
+			> .status {
+				margin: 32px 0;
+				border-top: solid 1px rgba(255, 255, 255, 0.5);
+				font-size: 90%;
+
+				> div {
+					padding: 16px 0;
+
+					> span:not(:last-child) {
+						padding-right: 1em;
+						margin-right: 1em;
+						border-right: solid 1px rgba(255, 255, 255, 0.5);
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/welcome.entrance.c.vue b/packages/frontend/src/pages/welcome.entrance.c.vue
new file mode 100644
index 0000000000..d2d07bb1f0
--- /dev/null
+++ b/packages/frontend/src/pages/welcome.entrance.c.vue
@@ -0,0 +1,306 @@
+<template>
+<div v-if="meta" class="rsqzvsbo">
+	<div class="top">
+		<MkFeaturedPhotos class="bg"/>
+		<div class="fade"></div>
+		<div class="emojis">
+			<MkEmoji :normal="true" :no-style="true" emoji="👍"/>
+			<MkEmoji :normal="true" :no-style="true" emoji="❤"/>
+			<MkEmoji :normal="true" :no-style="true" emoji="😆"/>
+			<MkEmoji :normal="true" :no-style="true" emoji="🎉"/>
+			<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
+		</div>
+		<div class="main">
+			<img src="/client-assets/misskey.svg" class="misskey"/>
+			<div class="form _panel">
+				<div class="bg">
+					<div class="fade"></div>
+				</div>
+				<div class="fg">
+					<h1>
+						<img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span>
+					</h1>
+					<div class="about">
+						<!-- eslint-disable-next-line vue/no-v-html -->
+						<div class="desc" v-html="meta.description || $ts.headlineMisskey"></div>
+					</div>
+					<div class="action">
+						<MkButton inline gradate @click="signup()">{{ $ts.signup }}</MkButton>
+						<MkButton inline @click="signin()">{{ $ts.login }}</MkButton>
+					</div>
+					<div v-if="onlineUsersCount && stats" class="status">
+						<div>
+							<I18n :src="$ts.nUsers" text-tag="span" class="users">
+								<template #n><b>{{ number(stats.originalUsersCount) }}</b></template>
+							</I18n>
+							<I18n :src="$ts.nNotes" text-tag="span" class="notes">
+								<template #n><b>{{ number(stats.originalNotesCount) }}</b></template>
+							</I18n>
+						</div>
+						<I18n :src="$ts.onlineUsersCount" text-tag="span" class="online">
+							<template #n><b>{{ onlineUsersCount }}</b></template>
+						</I18n>
+					</div>
+					<button class="_button _acrylic menu" @click="showMenu"><i class="ti ti-dots"></i></button>
+				</div>
+			</div>
+			<nav class="nav">
+				<MkA to="/announcements">{{ $ts.announcements }}</MkA>
+				<MkA to="/explore">{{ $ts.explore }}</MkA>
+				<MkA to="/channels">{{ $ts.channel }}</MkA>
+				<MkA to="/featured">{{ $ts.featured }}</MkA>
+			</nav>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { toUnicode } from 'punycode/';
+import XSigninDialog from '@/components/MkSigninDialog.vue';
+import XSignupDialog from '@/components/MkSignupDialog.vue';
+import MkButton from '@/components/MkButton.vue';
+import XNote from '@/components/MkNote.vue';
+import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
+import XTimeline from './welcome.timeline.vue';
+import { host, instanceName } from '@/config';
+import * as os from '@/os';
+import number from '@/filters/number';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		XNote,
+		MkFeaturedPhotos,
+		XTimeline,
+	},
+
+	data() {
+		return {
+			host: toUnicode(host),
+			instanceName,
+			meta: null,
+			stats: null,
+			tags: [],
+			onlineUsersCount: null,
+		};
+	},
+
+	created() {
+		os.api('meta', { detail: true }).then(meta => {
+			this.meta = meta;
+		});
+
+		os.api('stats').then(stats => {
+			this.stats = stats;
+		});
+
+		os.api('get-online-users-count').then(res => {
+			this.onlineUsersCount = res.count;
+		});
+
+		os.api('hashtags/list', {
+			sort: '+mentionedLocalUsers',
+			limit: 8,
+		}).then(tags => {
+			this.tags = tags;
+		});
+	},
+
+	methods: {
+		signin() {
+			os.popup(XSigninDialog, {
+				autoSet: true,
+			}, {}, 'closed');
+		},
+
+		signup() {
+			os.popup(XSignupDialog, {
+				autoSet: true,
+			}, {}, 'closed');
+		},
+
+		showMenu(ev) {
+			os.popupMenu([{
+				text: this.$t('aboutX', { x: instanceName }),
+				icon: 'ti ti-info-circle',
+				action: () => {
+					os.pageWindow('/about');
+				},
+			}, {
+				text: this.$ts.aboutMisskey,
+				icon: 'ti ti-info-circle',
+				action: () => {
+					os.pageWindow('/about-misskey');
+				},
+			}, null, {
+				text: this.$ts.help,
+				icon: 'ti ti-question-circle',
+				action: () => {
+					window.open(`https://misskey-hub.net/help.md`, '_blank');
+				},
+			}], ev.currentTarget ?? ev.target);
+		},
+
+		number,
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.rsqzvsbo {
+	> .top {
+		display: flex;
+		text-align: center;
+		min-height: 100vh;
+		box-sizing: border-box;
+		padding: 16px;
+
+		> .bg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+
+		> .fade {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: rgba(0, 0, 0, 0.25);
+		}
+
+		> .emojis {
+			position: absolute;
+			bottom: 32px;
+			left: 35px;
+
+			> * {
+				margin-right: 8px;
+			}
+
+			@media (max-width: 1200px) {
+				display: none;
+			}
+		}
+
+		> .main {
+			position: relative;
+			width: min(460px, 100%);
+			margin: auto;
+
+			> .misskey {
+				width: 150px;
+				margin-bottom: 16px;
+
+				@media (max-width: 450px) {
+					width: 130px;
+				}
+			}
+
+			> .form {
+				position: relative;
+				box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
+
+				> .bg {
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 128px;
+					background-position: center;
+					background-size: cover;
+					opacity: 0.75;
+
+					> .fade {
+						position: absolute;
+						bottom: 0;
+						left: 0;
+						width: 100%;
+						height: 128px;
+						background: linear-gradient(0deg, var(--panel), var(--X15));
+					}
+				}
+
+				> .fg {
+					position: relative;
+					z-index: 1;
+
+					> h1 {
+						display: block;
+						margin: 0;
+						padding: 32px 32px 24px 32px;
+
+						> .logo {
+							vertical-align: bottom;
+							max-height: 120px;
+						}
+					}
+
+					> .about {
+						padding: 0 32px;
+					}
+
+					> .action {
+						padding: 32px;
+
+						> * {
+							line-height: 28px;
+						}
+					}
+
+					> .status {
+						border-top: solid 0.5px var(--divider);
+						padding: 32px;
+						font-size: 90%;
+
+						> div {
+							> span:not(:last-child) {
+								padding-right: 1em;
+								margin-right: 1em;
+								border-right: solid 0.5px var(--divider);
+							}
+						}
+
+						> .online {
+							::v-deep(b) {
+								color: #41b781;
+							}
+
+							::v-deep(span) {
+								opacity: 0.7;
+							}
+						}
+					}
+
+					> .menu {
+						position: absolute;
+						top: 16px;
+						right: 16px;
+						width: 32px;
+						height: 32px;
+						border-radius: 8px;
+					}
+				}
+			}
+
+			> .nav {
+				position: relative;
+				z-index: 2;
+				margin-top: 20px;
+				color: #fff;
+				text-shadow: 0 0 8px black;
+				font-size: 0.9em;
+
+				> *:not(:last-child) {
+					margin-right: 1.5em;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/welcome.setup.vue b/packages/frontend/src/pages/welcome.setup.vue
new file mode 100644
index 0000000000..2729d30d4b
--- /dev/null
+++ b/packages/frontend/src/pages/welcome.setup.vue
@@ -0,0 +1,89 @@
+<template>
+<form class="mk-setup" @submit.prevent="submit()">
+	<h1>Welcome to Misskey!</h1>
+	<div class="_formRoot">
+		<p>{{ $ts.intro }}</p>
+		<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-admin-username class="_formBlock">
+			<template #label>{{ $ts.username }}</template>
+			<template #prefix>@</template>
+			<template #suffix>@{{ host }}</template>
+		</MkInput>
+		<MkInput v-model="password" type="password" data-cy-admin-password class="_formBlock">
+			<template #label>{{ $ts.password }}</template>
+			<template #prefix><i class="ti ti-lock"></i></template>
+		</MkInput>
+		<div class="bottom _formBlock">
+			<MkButton gradate type="submit" :disabled="submitting" data-cy-admin-ok>
+				{{ submitting ? $ts.processing : $ts.done }}<MkEllipsis v-if="submitting"/>
+			</MkButton>
+		</div>
+	</div>
+</form>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/form/input.vue';
+import { host } from '@/config';
+import * as os from '@/os';
+import { login } from '@/account';
+import { i18n } from '@/i18n';
+
+let username = $ref('');
+let password = $ref('');
+let submitting = $ref(false);
+
+function submit() {
+	if (submitting) return;
+	submitting = true;
+
+	os.api('admin/accounts/create', {
+		username: username,
+		password: password,
+	}).then(res => {
+		return login(res.token);
+	}).catch(() => {
+		submitting = false;
+
+		os.alert({
+			type: 'error',
+			text: i18n.ts.somethingHappened,
+		});
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.mk-setup {
+	border-radius: var(--radius);
+	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+	overflow: hidden;
+	max-width: 500px;
+	margin: 32px auto;
+
+	> h1 {
+		margin: 0;
+		font-size: 1.5em;
+		text-align: center;
+		padding: 32px;
+		background: var(--accent);
+		color: #fff;
+	}
+
+	> div {
+		padding: 32px;
+		background: var(--panel);
+
+		> p {
+			margin-top: 0;
+		}
+
+		> .bottom {
+			> * {
+				margin: 0 auto;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/welcome.timeline.vue b/packages/frontend/src/pages/welcome.timeline.vue
new file mode 100644
index 0000000000..d6a88540d1
--- /dev/null
+++ b/packages/frontend/src/pages/welcome.timeline.vue
@@ -0,0 +1,99 @@
+<template>
+<div class="civpbkhh">
+	<div ref="scroll" class="scrollbox" v-bind:class="{ scroll: isScrolling }">
+		<div v-for="note in notes" class="note">
+			<div class="content _panel">
+				<div class="body">
+					<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ti ti-arrow-back-up"></i></MkA>
+					<Mfm v-if="note.text" :text="note.text" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
+					<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
+				</div>
+				<div v-if="note.files.length > 0" class="richcontent">
+					<XMediaList :media-list="note.files"/>
+				</div>
+				<div v-if="note.poll">
+					<XPoll :note="note" :readOnly="true"/>
+				</div>
+			</div>
+			<XReactionsViewer ref="reactionsViewer" :note="note"/>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import XReactionsViewer from '@/components/MkReactionsViewer.vue';
+import XMediaList from '@/components/MkMediaList.vue';
+import XPoll from '@/components/MkPoll.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		XReactionsViewer,
+		XMediaList,
+		XPoll,
+	},
+
+	data() {
+		return {
+			notes: [],
+			isScrolling: false,
+		};
+	},
+
+	created() {
+		os.api('notes/featured').then(notes => {
+			this.notes = notes;
+		});
+	},
+
+	updated() {
+		if (this.$refs.scroll.clientHeight > window.innerHeight) {
+			this.isScrolling = true;
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@keyframes scroll {
+	0% {
+		transform: translate3d(0, 0, 0);
+	}
+	5% {
+		transform: translate3d(0, 0, 0);
+	}
+	75% {
+		transform: translate3d(0, calc(-100% + 90vh), 0);
+	}
+	90% {
+		transform: translate3d(0, calc(-100% + 90vh), 0);
+	}
+}
+
+.civpbkhh {
+	text-align: right;
+
+	> .scrollbox {
+		&.scroll {
+			animation: scroll 45s linear infinite;
+		}
+
+		> .note {
+			margin: 16px 0 16px auto;
+
+			> .content {
+				padding: 16px;
+				margin: 0 0 0 auto;
+				max-width: max-content;
+				border-radius: 16px;
+
+				> .richcontent {
+					min-width: 250px;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/welcome.vue b/packages/frontend/src/pages/welcome.vue
new file mode 100644
index 0000000000..a1c3fc2abb
--- /dev/null
+++ b/packages/frontend/src/pages/welcome.vue
@@ -0,0 +1,30 @@
+<template>
+<div v-if="meta">
+	<XSetup v-if="meta.requireSetup"/>
+	<XEntrance v-else/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import XSetup from './welcome.setup.vue';
+import XEntrance from './welcome.entrance.a.vue';
+import { instanceName } from '@/config';
+import * as os from '@/os';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+let meta = $ref(null);
+
+os.api('meta', { detail: true }).then(res => {
+	meta = res;
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata(computed(() => ({
+	title: instanceName,
+	icon: null,
+})));
+</script>
diff --git a/packages/frontend/src/pizzax.ts b/packages/frontend/src/pizzax.ts
new file mode 100644
index 0000000000..642e1f4f7f
--- /dev/null
+++ b/packages/frontend/src/pizzax.ts
@@ -0,0 +1,169 @@
+// PIZZAX --- A lightweight store
+
+import { onUnmounted, Ref, ref, watch } from 'vue';
+import { $i } from './account';
+import { api } from './os';
+import { stream } from './stream';
+
+type StateDef = Record<string, {
+	where: 'account' | 'device' | 'deviceAccount';
+	default: any;
+}>;
+
+type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
+
+const connection = $i && stream.useChannel('main');
+
+export class Storage<T extends StateDef> {
+	public readonly key: string;
+	public readonly keyForLocalStorage: string;
+
+	public readonly def: T;
+
+	// TODO: これが実装されたらreadonlyにしたい: https://github.com/microsoft/TypeScript/issues/37487
+	public readonly state: { [K in keyof T]: T[K]['default'] };
+	public readonly reactiveState: { [K in keyof T]: Ref<T[K]['default']> };
+
+	constructor(key: string, def: T) {
+		this.key = key;
+		this.keyForLocalStorage = 'pizzax::' + key;
+		this.def = def;
+
+		// TODO: indexedDBにする
+		const deviceState = JSON.parse(localStorage.getItem(this.keyForLocalStorage) || '{}');
+		const deviceAccountState = $i ? JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::' + $i.id) || '{}') : {};
+		const registryCache = $i ? JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}') : {};
+
+		const state = {};
+		const reactiveState = {};
+		for (const [k, v] of Object.entries(def)) {
+			if (v.where === 'device' && Object.prototype.hasOwnProperty.call(deviceState, k)) {
+				state[k] = deviceState[k];
+			} else if (v.where === 'account' && $i && Object.prototype.hasOwnProperty.call(registryCache, k)) {
+				state[k] = registryCache[k];
+			} else if (v.where === 'deviceAccount' && Object.prototype.hasOwnProperty.call(deviceAccountState, k)) {
+				state[k] = deviceAccountState[k];
+			} else {
+				state[k] = v.default;
+				if (_DEV_) console.log('Use default value', k, v.default);
+			}
+		}
+		for (const [k, v] of Object.entries(state)) {
+			reactiveState[k] = ref(v);
+		}
+		this.state = state as any;
+		this.reactiveState = reactiveState as any;
+	
+		if ($i) {
+			// なぜかsetTimeoutしないとapi関数内でエラーになる(おそらく循環参照してることに原因がありそう)
+			window.setTimeout(() => {
+				api('i/registry/get-all', { scope: ['client', this.key] }).then(kvs => {
+					const cache = {};
+					for (const [k, v] of Object.entries(def)) {
+						if (v.where === 'account') {
+							if (Object.prototype.hasOwnProperty.call(kvs, k)) {
+								state[k] = kvs[k];
+								reactiveState[k].value = kvs[k];
+								cache[k] = kvs[k];
+							} else {
+								state[k] = v.default;
+								reactiveState[k].value = v.default;
+							}
+						}
+					}
+					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
+				});
+			}, 1);
+			// streamingのuser storage updateイベントを監視して更新
+			connection?.on('registryUpdated', ({ scope, key, value }: { scope: string[], key: keyof T, value: T[typeof key]['default'] }) => {
+				if (scope.length !== 2 || scope[0] !== 'client' || scope[1] !== this.key || this.state[key] === value) return;
+
+				this.state[key] = value;
+				this.reactiveState[key].value = value;
+
+				const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
+				if (cache[key] !== value) {
+					cache[key] = value;
+					localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
+				}
+			});
+		}
+	}
+
+	public set<K extends keyof T>(key: K, value: T[K]['default']): void {
+		if (_DEV_) console.log('set', key, value);
+
+		this.state[key] = value;
+		this.reactiveState[key].value = value;
+
+		switch (this.def[key].where) {
+			case 'device': {
+				const deviceState = JSON.parse(localStorage.getItem(this.keyForLocalStorage) || '{}');
+				deviceState[key] = value;
+				localStorage.setItem(this.keyForLocalStorage, JSON.stringify(deviceState));
+				break;
+			}
+			case 'deviceAccount': {
+				if ($i == null) break;
+				const deviceAccountState = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::' + $i.id) || '{}');
+				deviceAccountState[key] = value;
+				localStorage.setItem(this.keyForLocalStorage + '::' + $i.id, JSON.stringify(deviceAccountState));
+				break;
+			}
+			case 'account': {
+				if ($i == null) break;
+				const cache = JSON.parse(localStorage.getItem(this.keyForLocalStorage + '::cache::' + $i.id) || '{}');
+				cache[key] = value;
+				localStorage.setItem(this.keyForLocalStorage + '::cache::' + $i.id, JSON.stringify(cache));
+				api('i/registry/set', {
+					scope: ['client', this.key],
+					key: key,
+					value: value,
+				});
+				break;
+			}
+		}
+	}
+
+	public push<K extends keyof T>(key: K, value: ArrayElement<T[K]['default']>): void {
+		const currentState = this.state[key];
+		this.set(key, [...currentState, value]);
+	}
+
+	public reset(key: keyof T) {
+		this.set(key, this.def[key].default);
+	}
+
+	/**
+	 * 特定のキーの、簡易的なgetter/setterを作ります
+	 * 主にvue場で設定コントロールのmodelとして使う用
+	 */
+	public makeGetterSetter<K extends keyof T>(key: K, getter?: (v: T[K]) => unknown, setter?: (v: unknown) => T[K]) {
+		const valueRef = ref(this.state[key]);
+
+		const stop = watch(this.reactiveState[key], val => {
+			valueRef.value = val;
+		});
+
+		// NOTE: vueコンポーネント内で呼ばれない限りは、onUnmounted は無意味なのでメモリリークする
+		onUnmounted(() => {
+			stop();
+		});
+
+		// TODO: VueのcustomRef使うと良い感じになるかも
+		return {
+			get: () => {
+				if (getter) {
+					return getter(valueRef.value);
+				} else {
+					return valueRef.value;
+				}
+			},
+			set: (value: unknown) => {
+				const val = setter ? setter(value) : value;
+				this.set(key, val);
+				valueRef.value = val;
+			},
+		};
+	}
+}
diff --git a/packages/frontend/src/plugin.ts b/packages/frontend/src/plugin.ts
new file mode 100644
index 0000000000..3a00cd0455
--- /dev/null
+++ b/packages/frontend/src/plugin.ts
@@ -0,0 +1,123 @@
+import { AiScript, utils, values } from '@syuilo/aiscript';
+import { deserialize } from '@syuilo/aiscript/built/serializer';
+import { jsToVal } from '@syuilo/aiscript/built/interpreter/util';
+import { createAiScriptEnv } from '@/scripts/aiscript/api';
+import { inputText } from '@/os';
+import { noteActions, notePostInterruptors, noteViewInterruptors, postFormActions, userActions } from '@/store';
+
+const pluginContexts = new Map<string, AiScript>();
+
+export function install(plugin) {
+	console.info('Plugin installed:', plugin.name, 'v' + plugin.version);
+
+	const aiscript = new AiScript(createPluginEnv({
+		plugin: plugin,
+		storageKey: 'plugins:' + plugin.id,
+	}), {
+		in: (q) => {
+			return new Promise(ok => {
+				inputText({
+					title: q,
+				}).then(({ canceled, result: a }) => {
+					ok(a);
+				});
+			});
+		},
+		out: (value) => {
+			console.log(value);
+		},
+		log: (type, params) => {
+		},
+	});
+
+	initPlugin({ plugin, aiscript });
+
+	aiscript.exec(deserialize(plugin.ast));
+}
+
+function createPluginEnv(opts) {
+	const config = new Map();
+	for (const [k, v] of Object.entries(opts.plugin.config || {})) {
+		config.set(k, jsToVal(typeof opts.plugin.configData[k] !== 'undefined' ? opts.plugin.configData[k] : v.default));
+	}
+
+	return {
+		...createAiScriptEnv({ ...opts, token: opts.plugin.token }),
+		//#region Deprecated
+		'Mk:register_post_form_action': values.FN_NATIVE(([title, handler]) => {
+			registerPostFormAction({ pluginId: opts.plugin.id, title: title.value, handler });
+		}),
+		'Mk:register_user_action': values.FN_NATIVE(([title, handler]) => {
+			registerUserAction({ pluginId: opts.plugin.id, title: title.value, handler });
+		}),
+		'Mk:register_note_action': values.FN_NATIVE(([title, handler]) => {
+			registerNoteAction({ pluginId: opts.plugin.id, title: title.value, handler });
+		}),
+		//#endregion
+		'Plugin:register_post_form_action': values.FN_NATIVE(([title, handler]) => {
+			registerPostFormAction({ pluginId: opts.plugin.id, title: title.value, handler });
+		}),
+		'Plugin:register_user_action': values.FN_NATIVE(([title, handler]) => {
+			registerUserAction({ pluginId: opts.plugin.id, title: title.value, handler });
+		}),
+		'Plugin:register_note_action': values.FN_NATIVE(([title, handler]) => {
+			registerNoteAction({ pluginId: opts.plugin.id, title: title.value, handler });
+		}),
+		'Plugin:register_note_view_interruptor': values.FN_NATIVE(([handler]) => {
+			registerNoteViewInterruptor({ pluginId: opts.plugin.id, handler });
+		}),
+		'Plugin:register_note_post_interruptor': values.FN_NATIVE(([handler]) => {
+			registerNotePostInterruptor({ pluginId: opts.plugin.id, handler });
+		}),
+		'Plugin:open_url': values.FN_NATIVE(([url]) => {
+			window.open(url.value, '_blank');
+		}),
+		'Plugin:config': values.OBJ(config),
+	};
+}
+
+function initPlugin({ plugin, aiscript }) {
+	pluginContexts.set(plugin.id, aiscript);
+}
+
+function registerPostFormAction({ pluginId, title, handler }) {
+	postFormActions.push({
+		title, handler: (form, update) => {
+			pluginContexts.get(pluginId).execFn(handler, [utils.jsToVal(form), values.FN_NATIVE(([key, value]) => {
+				update(key.value, value.value);
+			})]);
+		},
+	});
+}
+
+function registerUserAction({ pluginId, title, handler }) {
+	userActions.push({
+		title, handler: (user) => {
+			pluginContexts.get(pluginId).execFn(handler, [utils.jsToVal(user)]);
+		},
+	});
+}
+
+function registerNoteAction({ pluginId, title, handler }) {
+	noteActions.push({
+		title, handler: (note) => {
+			pluginContexts.get(pluginId).execFn(handler, [utils.jsToVal(note)]);
+		},
+	});
+}
+
+function registerNoteViewInterruptor({ pluginId, handler }) {
+	noteViewInterruptors.push({
+		handler: async (note) => {
+			return utils.valToJs(await pluginContexts.get(pluginId).execFn(handler, [utils.jsToVal(note)]));
+		},
+	});
+}
+
+function registerNotePostInterruptor({ pluginId, handler }) {
+	notePostInterruptors.push({
+		handler: async (note) => {
+			return utils.valToJs(await pluginContexts.get(pluginId).execFn(handler, [utils.jsToVal(note)]));
+		},
+	});
+}
diff --git a/packages/frontend/src/router.ts b/packages/frontend/src/router.ts
new file mode 100644
index 0000000000..111b15e0a6
--- /dev/null
+++ b/packages/frontend/src/router.ts
@@ -0,0 +1,501 @@
+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 { ui } from '@/config';
+
+const page = (loader: AsyncComponentLoader<any>) => defineAsyncComponent({
+	loader: loader,
+	loadingComponent: MkLoading,
+	errorComponent: MkError,
+});
+
+export const routes = [{
+	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')),
+}, {
+	path: '/@:acct/following',
+	component: page(() => import('./pages/user/following.vue')),
+}, {
+	path: '/@:acct/followers',
+	component: page(() => import('./pages/user/followers.vue')),
+}, {
+	name: 'user',
+	path: '/@:acct/:page?',
+	component: page(() => import('./pages/user/index.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',
+	component: page(() => import('./pages/settings/index.vue')),
+	loginRequired: true,
+	children: [{
+		path: '/profile',
+		name: 'profile',
+		component: page(() => import('./pages/settings/profile.vue')),
+	}, {
+		path: '/privacy',
+		name: 'privacy',
+		component: page(() => import('./pages/settings/privacy.vue')),
+	}, {
+		path: '/reaction',
+		name: 'reaction',
+		component: page(() => import('./pages/settings/reaction.vue')),
+	}, {
+		path: '/drive',
+		name: 'drive',
+		component: page(() => import('./pages/settings/drive.vue')),
+	}, {
+		path: '/notifications',
+		name: 'notifications',
+		component: page(() => import('./pages/settings/notifications.vue')),
+	}, {
+		path: '/email',
+		name: 'email',
+		component: page(() => import('./pages/settings/email.vue')),
+	}, {
+		path: '/integration',
+		name: 'integration',
+		component: page(() => import('./pages/settings/integration.vue')),
+	}, {
+		path: '/security',
+		name: 'security',
+		component: page(() => import('./pages/settings/security.vue')),
+	}, {
+		path: '/general',
+		name: 'general',
+		component: page(() => import('./pages/settings/general.vue')),
+	}, {
+		path: '/theme/install',
+		name: 'theme',
+		component: page(() => import('./pages/settings/theme.install.vue')),
+	}, {
+		path: '/theme/manage',
+		name: 'theme',
+		component: page(() => import('./pages/settings/theme.manage.vue')),
+	}, {
+		path: '/theme',
+		name: 'theme',
+		component: page(() => import('./pages/settings/theme.vue')),
+	}, {
+		path: '/navbar',
+		name: 'navbar',
+		component: page(() => import('./pages/settings/navbar.vue')),
+	}, {
+		path: '/statusbar',
+		name: 'statusbar',
+		component: page(() => import('./pages/settings/statusbar.vue')),
+	}, {
+		path: '/sounds',
+		name: 'sounds',
+		component: page(() => import('./pages/settings/sounds.vue')),
+	}, {
+		path: '/plugin/install',
+		name: 'plugin',
+		component: page(() => import('./pages/settings/plugin.install.vue')),
+	}, {
+		path: '/plugin',
+		name: 'plugin',
+		component: page(() => import('./pages/settings/plugin.vue')),
+	}, {
+		path: '/import-export',
+		name: 'import-export',
+		component: page(() => import('./pages/settings/import-export.vue')),
+	}, {
+		path: '/instance-mute',
+		name: 'instance-mute',
+		component: page(() => import('./pages/settings/instance-mute.vue')),
+	}, {
+		path: '/mute-block',
+		name: 'mute-block',
+		component: page(() => import('./pages/settings/mute-block.vue')),
+	}, {
+		path: '/word-mute',
+		name: 'word-mute',
+		component: page(() => import('./pages/settings/word-mute.vue')),
+	}, {
+		path: '/api',
+		name: 'api',
+		component: page(() => import('./pages/settings/api.vue')),
+	}, {
+		path: '/apps',
+		name: 'api',
+		component: page(() => import('./pages/settings/apps.vue')),
+	}, {
+		path: '/webhook/edit/:webhookId',
+		name: 'webhook',
+		component: page(() => import('./pages/settings/webhook.edit.vue')),
+	}, {
+		path: '/webhook/new',
+		name: 'webhook',
+		component: page(() => import('./pages/settings/webhook.new.vue')),
+	}, {
+		path: '/webhook',
+		name: 'webhook',
+		component: page(() => import('./pages/settings/webhook.vue')),
+	}, {
+		path: '/deck',
+		name: 'deck',
+		component: page(() => import('./pages/settings/deck.vue')),
+	}, {
+		path: '/preferences-backups',
+		name: 'preferences-backups',
+		component: page(() => import('./pages/settings/preferences-backups.vue')),
+	}, {
+		path: '/custom-css',
+		name: 'general',
+		component: page(() => import('./pages/settings/custom-css.vue')),
+	}, {
+		path: '/accounts',
+		name: 'profile',
+		component: page(() => import('./pages/settings/accounts.vue')),
+	}, {
+		path: '/account-info',
+		name: 'other',
+		component: page(() => import('./pages/settings/account-info.vue')),
+	}, {
+		path: '/delete-account',
+		name: 'other',
+		component: page(() => import('./pages/settings/delete-account.vue')),
+	}, {
+		path: '/other',
+		name: 'other',
+		component: page(() => import('./pages/settings/other.vue')),
+	}, {
+		path: '/',
+		component: page(() => import('./pages/_empty_.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')),
+	hash: 'initialTab',
+}, {
+	path: '/about-misskey',
+	component: page(() => import('./pages/about-misskey.vue')),
+}, {
+	path: '/theme-editor',
+	component: page(() => import('./pages/theme-editor.vue')),
+	loginRequired: true,
+}, {
+	path: '/explore/tags/:tag',
+	component: page(() => import('./pages/explore.vue')),
+}, {
+	path: '/explore',
+	component: page(() => import('./pages/explore.vue')),
+}, {
+	path: '/search',
+	component: page(() => import('./pages/search.vue')),
+	query: {
+		q: 'query',
+		channel: 'channel',
+	},
+}, {
+	path: '/authorize-follow',
+	component: page(() => import('./pages/follow.vue')),
+	loginRequired: true,
+}, {
+	path: '/share',
+	component: page(() => import('./pages/share.vue')),
+	loginRequired: true,
+}, {
+	path: '/api-console',
+	component: page(() => import('./pages/api-console.vue')),
+	loginRequired: true,
+}, {
+	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')),
+	loginRequired: true,
+}, {
+	path: '/pages/edit/:initPageId',
+	component: page(() => import('./pages/page-editor/page-editor.vue')),
+	loginRequired: true,
+}, {
+	path: '/pages',
+	component: page(() => import('./pages/pages.vue')),
+}, {
+	path: '/gallery/:postId/edit',
+	component: page(() => import('./pages/gallery/edit.vue')),
+	loginRequired: true,
+}, {
+	path: '/gallery/new',
+	component: page(() => import('./pages/gallery/edit.vue')),
+	loginRequired: true,
+}, {
+	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')),
+	loginRequired: true,
+}, {
+	path: '/channels/new',
+	component: page(() => import('./pages/channel-editor.vue')),
+	loginRequired: true,
+}, {
+	path: '/channels/:channelId',
+	component: page(() => import('./pages/channel.vue')),
+}, {
+	path: '/channels',
+	component: page(() => import('./pages/channels.vue')),
+}, {
+	path: '/registry/keys/system/:path(*)?',
+	component: page(() => import('./pages/registry.keys.vue')),
+}, {
+	path: '/registry/value/system/:path(*)?',
+	component: page(() => import('./pages/registry.value.vue')),
+}, {
+	path: '/registry',
+	component: page(() => import('./pages/registry.vue')),
+}, {
+	path: '/admin/file/:fileId',
+	component: iAmModerator ? page(() => import('./pages/admin-file.vue')) : page(() => import('./pages/not-found.vue')),
+}, {
+	path: '/admin',
+	component: iAmModerator ? page(() => import('./pages/admin/index.vue')) : page(() => import('./pages/not-found.vue')),
+	children: [{
+		path: '/overview',
+		name: 'overview',
+		component: page(() => import('./pages/admin/overview.vue')),
+	}, {
+		path: '/users',
+		name: 'users',
+		component: page(() => import('./pages/admin/users.vue')),
+	}, {
+		path: '/emojis',
+		name: 'emojis',
+		component: page(() => import('./pages/admin/emojis.vue')),
+	}, {
+		path: '/queue',
+		name: 'queue',
+		component: page(() => import('./pages/admin/queue.vue')),
+	}, {
+		path: '/files',
+		name: 'files',
+		component: page(() => import('./pages/admin/files.vue')),
+	}, {
+		path: '/announcements',
+		name: 'announcements',
+		component: page(() => import('./pages/admin/announcements.vue')),
+	}, {
+		path: '/ads',
+		name: 'ads',
+		component: page(() => import('./pages/admin/ads.vue')),
+	}, {
+		path: '/database',
+		name: 'database',
+		component: page(() => import('./pages/admin/database.vue')),
+	}, {
+		path: '/abuses',
+		name: 'abuses',
+		component: page(() => import('./pages/admin/abuses.vue')),
+	}, {
+		path: '/settings',
+		name: 'settings',
+		component: page(() => import('./pages/admin/settings.vue')),
+	}, {
+		path: '/email-settings',
+		name: 'email-settings',
+		component: page(() => import('./pages/admin/email-settings.vue')),
+	}, {
+		path: '/object-storage',
+		name: 'object-storage',
+		component: page(() => import('./pages/admin/object-storage.vue')),
+	}, {
+		path: '/security',
+		name: 'security',
+		component: page(() => import('./pages/admin/security.vue')),
+	}, {
+		path: '/relays',
+		name: 'relays',
+		component: page(() => import('./pages/admin/relays.vue')),
+	}, {
+		path: '/integrations',
+		name: 'integrations',
+		component: page(() => import('./pages/admin/integrations.vue')),
+	}, {
+		path: '/instance-block',
+		name: 'instance-block',
+		component: page(() => import('./pages/admin/instance-block.vue')),
+	}, {
+		path: '/proxy-account',
+		name: 'proxy-account',
+		component: page(() => import('./pages/admin/proxy-account.vue')),
+	}, {
+		path: '/other-settings',
+		name: 'other-settings',
+		component: page(() => import('./pages/admin/other-settings.vue')),
+	}, {
+		path: '/',
+		component: page(() => import('./pages/_empty_.vue')),
+	}],
+}, {
+	path: '/my/notifications',
+	component: page(() => import('./pages/notifications.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/favorites',
+	component: page(() => import('./pages/favorites.vue')),
+	loginRequired: true,
+}, {
+	name: 'messaging',
+	path: '/my/messaging',
+	component: page(() => import('./pages/messaging/index.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/messaging/:userAcct',
+	component: page(() => import('./pages/messaging/messaging-room.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/messaging/group/:groupId',
+	component: page(() => import('./pages/messaging/messaging-room.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/drive/folder/:folder',
+	component: page(() => import('./pages/drive.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/drive',
+	component: page(() => import('./pages/drive.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/follow-requests',
+	component: page(() => import('./pages/follow-requests.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/lists/:listId',
+	component: page(() => import('./pages/my-lists/list.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/lists',
+	component: page(() => import('./pages/my-lists/index.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/clips',
+	component: page(() => import('./pages/my-clips/index.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/antennas/create',
+	component: page(() => import('./pages/my-antennas/create.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/antennas/:antennaId',
+	component: page(() => import('./pages/my-antennas/edit.vue')),
+	loginRequired: true,
+}, {
+	path: '/my/antennas',
+	component: page(() => import('./pages/my-antennas/index.vue')),
+	loginRequired: true,
+}, {
+	path: '/timeline/list/:listId',
+	component: page(() => import('./pages/user-list-timeline.vue')),
+	loginRequired: true,
+}, {
+	path: '/timeline/antenna/:antennaId',
+	component: page(() => import('./pages/antenna-timeline.vue')),
+	loginRequired: true,
+}, {
+	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')),
+}];
+
+export const mainRouter = new Router(routes, location.pathname + location.search + location.hash);
+
+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' });
+		}, 100);
+	}
+});
+
+mainRouter.addListener('replace', ctx => {
+	window.history.replaceState({ key: ctx.key }, '', ctx.path);
+});
+
+mainRouter.addListener('same', () => {
+	window.scroll({ top: 0, behavior: 'smooth' });
+});
+
+window.addEventListener('popstate', (event) => {
+	mainRouter.replace(location.pathname + location.search + location.hash, event.state?.key, false);
+	const scrollPos = scrollPosStore.get(event.state?.key) ?? 0;
+	window.scroll({ top: scrollPos, behavior: 'instant' });
+	window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
+		window.scroll({ top: scrollPos, behavior: 'instant' });
+	}, 100);
+});
+
+export function useRouter(): Router {
+	return inject<Router | null>('router', null) ?? mainRouter;
+}
diff --git a/packages/frontend/src/scripts/2fa.ts b/packages/frontend/src/scripts/2fa.ts
new file mode 100644
index 0000000000..62a38ff02a
--- /dev/null
+++ b/packages/frontend/src/scripts/2fa.ts
@@ -0,0 +1,33 @@
+export function byteify(string: string, encoding: 'ascii' | 'base64' | 'hex') {
+	switch (encoding) {
+		case 'ascii':
+			return Uint8Array.from(string, c => c.charCodeAt(0));
+		case 'base64':
+			return Uint8Array.from(
+				atob(
+					string
+						.replace(/-/g, '+')
+						.replace(/_/g, '/'),
+				),
+				c => c.charCodeAt(0),
+			);
+		case 'hex':
+			return new Uint8Array(
+				string
+					.match(/.{1,2}/g)
+					.map(byte => parseInt(byte, 16)),
+			);
+	}
+}
+
+export function hexify(buffer: ArrayBuffer) {
+	return Array.from(new Uint8Array(buffer))
+		.reduce(
+			(str, byte) => str + byte.toString(16).padStart(2, '0'),
+			'',
+		);
+}
+
+export function stringify(buffer: ArrayBuffer) {
+	return String.fromCharCode(... new Uint8Array(buffer));
+}
diff --git a/packages/frontend/src/scripts/aiscript/api.ts b/packages/frontend/src/scripts/aiscript/api.ts
new file mode 100644
index 0000000000..6debcb8a13
--- /dev/null
+++ b/packages/frontend/src/scripts/aiscript/api.ts
@@ -0,0 +1,43 @@
+import { utils, values } from '@syuilo/aiscript';
+import * as os from '@/os';
+import { $i } from '@/account';
+
+export function createAiScriptEnv(opts) {
+	let apiRequests = 0;
+	return {
+		USER_ID: $i ? values.STR($i.id) : values.NULL,
+		USER_NAME: $i ? values.STR($i.name) : values.NULL,
+		USER_USERNAME: $i ? values.STR($i.username) : values.NULL,
+		'Mk:dialog': values.FN_NATIVE(async ([title, text, type]) => {
+			await os.alert({
+				type: type ? type.value : 'info',
+				title: title.value,
+				text: text.value,
+			});
+		}),
+		'Mk:confirm': values.FN_NATIVE(async ([title, text, type]) => {
+			const confirm = await os.confirm({
+				type: type ? type.value : 'question',
+				title: title.value,
+				text: text.value,
+			});
+			return confirm.canceled ? values.FALSE : values.TRUE;
+		}),
+		'Mk:api': values.FN_NATIVE(async ([ep, param, token]) => {
+			if (token) utils.assertString(token);
+			apiRequests++;
+			if (apiRequests > 16) return values.NULL;
+			const res = await os.api(ep.value, utils.valToJs(param), token ? token.value : (opts.token ?? null));
+			return utils.jsToVal(res);
+		}),
+		'Mk:save': values.FN_NATIVE(([key, value]) => {
+			utils.assertString(key);
+			localStorage.setItem('aiscript:' + opts.storageKey + ':' + key.value, JSON.stringify(utils.valToJs(value)));
+			return values.NULL;
+		}),
+		'Mk:load': values.FN_NATIVE(([key]) => {
+			utils.assertString(key);
+			return utils.jsToVal(JSON.parse(localStorage.getItem('aiscript:' + opts.storageKey + ':' + key.value)));
+		}),
+	};
+}
diff --git a/packages/frontend/src/scripts/array.ts b/packages/frontend/src/scripts/array.ts
new file mode 100644
index 0000000000..4620c8b735
--- /dev/null
+++ b/packages/frontend/src/scripts/array.ts
@@ -0,0 +1,149 @@
+import { EndoRelation, Predicate } from './relation';
+
+/**
+ * Count the number of elements that satisfy the predicate
+ */
+
+export function countIf<T>(f: Predicate<T>, xs: T[]): number {
+	return xs.filter(f).length;
+}
+
+/**
+ * Count the number of elements that is equal to the element
+ */
+export function count<T>(a: T, xs: T[]): number {
+	return countIf(x => x === a, xs);
+}
+
+/**
+ * Concatenate an array of arrays
+ */
+export function concat<T>(xss: T[][]): T[] {
+	return ([] as T[]).concat(...xss);
+}
+
+/**
+ * Intersperse the element between the elements of the array
+ * @param sep The element to be interspersed
+ */
+export function intersperse<T>(sep: T, xs: T[]): T[] {
+	return concat(xs.map(x => [sep, x])).slice(1);
+}
+
+/**
+ * Returns the array of elements that is not equal to the element
+ */
+export function erase<T>(a: T, xs: T[]): T[] {
+	return xs.filter(x => x !== a);
+}
+
+/**
+ * Finds the array of all elements in the first array not contained in the second array.
+ * The order of result values are determined by the first array.
+ */
+export function difference<T>(xs: T[], ys: T[]): T[] {
+	return xs.filter(x => !ys.includes(x));
+}
+
+/**
+ * Remove all but the first element from every group of equivalent elements
+ */
+export function unique<T>(xs: T[]): T[] {
+	return [...new Set(xs)];
+}
+
+export function uniqueBy<TValue, TKey>(values: TValue[], keySelector: (value: TValue) => TKey): TValue[] {
+	const map = new Map<TKey, TValue>();
+
+	for (const value of values) {
+		const key = keySelector(value);
+		if (!map.has(key)) map.set(key, value);
+	}
+
+	return [...map.values()];
+}
+
+export function sum(xs: number[]): number {
+	return xs.reduce((a, b) => a + b, 0);
+}
+
+export function maximum(xs: number[]): number {
+	return Math.max(...xs);
+}
+
+/**
+ * Splits an array based on the equivalence relation.
+ * The concatenation of the result is equal to the argument.
+ */
+export function groupBy<T>(f: EndoRelation<T>, xs: T[]): T[][] {
+	const groups = [] as T[][];
+	for (const x of xs) {
+		if (groups.length !== 0 && f(groups[groups.length - 1][0], x)) {
+			groups[groups.length - 1].push(x);
+		} else {
+			groups.push([x]);
+		}
+	}
+	return groups;
+}
+
+/**
+ * Splits an array based on the equivalence relation induced by the function.
+ * The concatenation of the result is equal to the argument.
+ */
+export function groupOn<T, S>(f: (x: T) => S, xs: T[]): T[][] {
+	return groupBy((a, b) => f(a) === f(b), xs);
+}
+
+export function groupByX<T>(collections: T[], keySelector: (x: T) => string) {
+	return collections.reduce((obj: Record<string, T[]>, item: T) => {
+		const key = keySelector(item);
+		if (typeof obj[key] === 'undefined') {
+			obj[key] = [];
+		}
+
+		obj[key].push(item);
+
+		return obj;
+	}, {});
+}
+
+/**
+ * Compare two arrays by lexicographical order
+ */
+export function lessThan(xs: number[], ys: number[]): boolean {
+	for (let i = 0; i < Math.min(xs.length, ys.length); i++) {
+		if (xs[i] < ys[i]) return true;
+		if (xs[i] > ys[i]) return false;
+	}
+	return xs.length < ys.length;
+}
+
+/**
+ * Returns the longest prefix of elements that satisfy the predicate
+ */
+export function takeWhile<T>(f: Predicate<T>, xs: T[]): T[] {
+	const ys: T[] = [];
+	for (const x of xs) {
+		if (f(x)) {
+			ys.push(x);
+		} else {
+			break;
+		}
+	}
+	return ys;
+}
+
+export function cumulativeSum(xs: number[]): number[] {
+	const ys = Array.from(xs); // deep copy
+	for (let i = 1; i < ys.length; i++) ys[i] += ys[i - 1];
+	return ys;
+}
+
+export function toArray<T>(x: T | T[] | undefined): T[] {
+	return Array.isArray(x) ? x : x != null ? [x] : [];
+}
+
+export function toSingle<T>(x: T | T[] | undefined): T | undefined {
+	return Array.isArray(x) ? x[0] : x;
+}
diff --git a/packages/frontend/src/scripts/autocomplete.ts b/packages/frontend/src/scripts/autocomplete.ts
new file mode 100644
index 0000000000..1bae3790f5
--- /dev/null
+++ b/packages/frontend/src/scripts/autocomplete.ts
@@ -0,0 +1,276 @@
+import { nextTick, Ref, ref, defineAsyncComponent } from 'vue';
+import getCaretCoordinates from 'textarea-caret';
+import { toASCII } from 'punycode/';
+import { popup } from '@/os';
+
+export class Autocomplete {
+	private suggestion: {
+		x: Ref<number>;
+		y: Ref<number>;
+		q: Ref<string | null>;
+		close: () => void;
+	} | null;
+	private textarea: HTMLInputElement | HTMLTextAreaElement;
+	private currentType: string;
+	private textRef: Ref<string>;
+	private opening: boolean;
+
+	private get text(): string {
+		// Use raw .value to get the latest value
+		// (Because v-model does not update while composition)
+		return this.textarea.value;
+	}
+
+	private set text(text: string) {
+		// Use ref value to notify other watchers
+		// (Because .value setter never fires input/change events)
+		this.textRef.value = text;
+	}
+
+	/**
+	 * 対象のテキストエリアを与えてインスタンスを初期化します。
+	 */
+	constructor(textarea: HTMLInputElement | HTMLTextAreaElement, textRef: Ref<string>) {
+		//#region BIND
+		this.onInput = this.onInput.bind(this);
+		this.complete = this.complete.bind(this);
+		this.close = this.close.bind(this);
+		//#endregion
+
+		this.suggestion = null;
+		this.textarea = textarea;
+		this.textRef = textRef;
+		this.opening = false;
+
+		this.attach();
+	}
+
+	/**
+	 * このインスタンスにあるテキストエリアの入力のキャプチャを開始します。
+	 */
+	public attach() {
+		this.textarea.addEventListener('input', this.onInput);
+	}
+
+	/**
+	 * このインスタンスにあるテキストエリアの入力のキャプチャを解除します。
+	 */
+	public detach() {
+		this.textarea.removeEventListener('input', this.onInput);
+		this.close();
+	}
+
+	/**
+	 * テキスト入力時
+	 */
+	private onInput() {
+		const caretPos = this.textarea.selectionStart;
+		const text = this.text.substr(0, caretPos).split('\n').pop()!;
+
+		const mentionIndex = text.lastIndexOf('@');
+		const hashtagIndex = text.lastIndexOf('#');
+		const emojiIndex = text.lastIndexOf(':');
+		const mfmTagIndex = text.lastIndexOf('$');
+
+		const max = Math.max(
+			mentionIndex,
+			hashtagIndex,
+			emojiIndex,
+			mfmTagIndex);
+
+		if (max === -1) {
+			this.close();
+			return;
+		}
+
+		const isMention = mentionIndex !== -1;
+		const isHashtag = hashtagIndex !== -1;
+		const isMfmTag = mfmTagIndex !== -1;
+		const isEmoji = emojiIndex !== -1 && text.split(/:[a-z0-9_+\-]+:/).pop()!.includes(':');
+
+		let opened = false;
+
+		if (isMention) {
+			const username = text.substr(mentionIndex + 1);
+			if (username !== '' && username.match(/^[a-zA-Z0-9_]+$/)) {
+				this.open('user', username);
+				opened = true;
+			} else if (username === '') {
+				this.open('user', null);
+				opened = true;
+			}
+		}
+
+		if (isHashtag && !opened) {
+			const hashtag = text.substr(hashtagIndex + 1);
+			if (!hashtag.includes(' ')) {
+				this.open('hashtag', hashtag);
+				opened = true;
+			}
+		}
+
+		if (isEmoji && !opened) {
+			const emoji = text.substr(emojiIndex + 1);
+			if (!emoji.includes(' ')) {
+				this.open('emoji', emoji);
+				opened = true;
+			}
+		}
+
+		if (isMfmTag && !opened) {
+			const mfmTag = text.substr(mfmTagIndex + 1);
+			if (!mfmTag.includes(' ')) {
+				this.open('mfmTag', mfmTag.replace('[', ''));
+				opened = true;
+			}
+		}
+
+		if (!opened) {
+			this.close();
+		}
+	}
+
+	/**
+	 * サジェストを提示します。
+	 */
+	private async open(type: string, q: string | null) {
+		if (type !== this.currentType) {
+			this.close();
+		}
+		if (this.opening) return;
+		this.opening = true;
+		this.currentType = type;
+
+		//#region サジェストを表示すべき位置を計算
+		const caretPosition = getCaretCoordinates(this.textarea, this.textarea.selectionStart);
+
+		const rect = this.textarea.getBoundingClientRect();
+
+		const x = rect.left + caretPosition.left - this.textarea.scrollLeft;
+		const y = rect.top + caretPosition.top - this.textarea.scrollTop;
+		//#endregion
+
+		if (this.suggestion) {
+			this.suggestion.x.value = x;
+			this.suggestion.y.value = y;
+			this.suggestion.q.value = q;
+
+			this.opening = false;
+		} else {
+			const _x = ref(x);
+			const _y = ref(y);
+			const _q = ref(q);
+
+			const { dispose } = await popup(defineAsyncComponent(() => import('@/components/MkAutocomplete.vue')), {
+				textarea: this.textarea,
+				close: this.close,
+				type: type,
+				q: _q,
+				x: _x,
+				y: _y,
+			}, {
+				done: (res) => {
+					this.complete(res);
+				},
+			});
+
+			this.suggestion = {
+				q: _q,
+				x: _x,
+				y: _y,
+				close: () => dispose(),
+			};
+
+			this.opening = false;
+		}
+	}
+
+	/**
+	 * サジェストを閉じます。
+	 */
+	private close() {
+		if (this.suggestion == null) return;
+
+		this.suggestion.close();
+		this.suggestion = null;
+
+		this.textarea.focus();
+	}
+
+	/**
+	 * オートコンプリートする
+	 */
+	private complete({ type, value }) {
+		this.close();
+
+		const caret = this.textarea.selectionStart;
+
+		if (type === 'user') {
+			const source = this.text;
+
+			const before = source.substr(0, caret);
+			const trimmedBefore = before.substring(0, before.lastIndexOf('@'));
+			const after = source.substr(caret);
+
+			const acct = value.host === null ? value.username : `${value.username}@${toASCII(value.host)}`;
+
+			// 挿入
+			this.text = `${trimmedBefore}@${acct} ${after}`;
+
+			// キャレットを戻す
+			nextTick(() => {
+				this.textarea.focus();
+				const pos = trimmedBefore.length + (acct.length + 2);
+				this.textarea.setSelectionRange(pos, pos);
+			});
+		} else if (type === 'hashtag') {
+			const source = this.text;
+
+			const before = source.substr(0, caret);
+			const trimmedBefore = before.substring(0, before.lastIndexOf('#'));
+			const after = source.substr(caret);
+
+			// 挿入
+			this.text = `${trimmedBefore}#${value} ${after}`;
+
+			// キャレットを戻す
+			nextTick(() => {
+				this.textarea.focus();
+				const pos = trimmedBefore.length + (value.length + 2);
+				this.textarea.setSelectionRange(pos, pos);
+			});
+		} else if (type === 'emoji') {
+			const source = this.text;
+
+			const before = source.substr(0, caret);
+			const trimmedBefore = before.substring(0, before.lastIndexOf(':'));
+			const after = source.substr(caret);
+
+			// 挿入
+			this.text = trimmedBefore + value + after;
+
+			// キャレットを戻す
+			nextTick(() => {
+				this.textarea.focus();
+				const pos = trimmedBefore.length + value.length;
+				this.textarea.setSelectionRange(pos, pos);
+			});
+		} else if (type === 'mfmTag') {
+			const source = this.text;
+
+			const before = source.substr(0, caret);
+			const trimmedBefore = before.substring(0, before.lastIndexOf('$'));
+			const after = source.substr(caret);
+
+			// 挿入
+			this.text = `${trimmedBefore}$[${value} ]${after}`;
+
+			// キャレットを戻す
+			nextTick(() => {
+				this.textarea.focus();
+				const pos = trimmedBefore.length + (value.length + 3);
+				this.textarea.setSelectionRange(pos, pos);
+			});
+		}
+	}
+}
diff --git a/packages/frontend/src/scripts/chart-vline.ts b/packages/frontend/src/scripts/chart-vline.ts
new file mode 100644
index 0000000000..8e3c4436b2
--- /dev/null
+++ b/packages/frontend/src/scripts/chart-vline.ts
@@ -0,0 +1,21 @@
+export const chartVLine = (vLineColor: string) => ({
+	id: 'vLine',
+	beforeDraw(chart, args, options) {
+		if (chart.tooltip?._active?.length) {
+			const activePoint = chart.tooltip._active[0];
+			const ctx = chart.ctx;
+			const x = activePoint.element.x;
+			const topY = chart.scales.y.top;
+			const bottomY = chart.scales.y.bottom;
+
+			ctx.save();
+			ctx.beginPath();
+			ctx.moveTo(x, bottomY);
+			ctx.lineTo(x, topY);
+			ctx.lineWidth = 1;
+			ctx.strokeStyle = vLineColor;
+			ctx.stroke();
+			ctx.restore();
+		}
+	},
+});
diff --git a/packages/frontend/src/scripts/check-word-mute.ts b/packages/frontend/src/scripts/check-word-mute.ts
new file mode 100644
index 0000000000..35d40a6e08
--- /dev/null
+++ b/packages/frontend/src/scripts/check-word-mute.ts
@@ -0,0 +1,37 @@
+export function checkWordMute(note: Record<string, any>, me: Record<string, any> | null | undefined, mutedWords: Array<string | string[]>): boolean {
+	// 自分自身
+	if (me && (note.userId === me.id)) return false;
+
+	if (mutedWords.length > 0) {
+		const text = ((note.cw ?? '') + '\n' + (note.text ?? '')).trim();
+
+		if (text === '') return false;
+
+		const matched = mutedWords.some(filter => {
+			if (Array.isArray(filter)) {
+				// Clean up
+				const filteredFilter = filter.filter(keyword => keyword !== '');
+				if (filteredFilter.length === 0) return false;
+
+				return filteredFilter.every(keyword => text.includes(keyword));
+			} else {
+				// represents RegExp
+				const regexp = filter.match(/^\/(.+)\/(.*)$/);
+
+				// This should never happen due to input sanitisation.
+				if (!regexp) return false;
+
+				try {
+					return new RegExp(regexp[1], regexp[2]).test(text);
+				} catch (err) {
+					// This should never happen due to input sanitisation.
+					return false;
+				}
+			}
+		});
+
+		if (matched) return true;
+	}
+
+	return false;
+}
diff --git a/packages/frontend/src/scripts/clone.ts b/packages/frontend/src/scripts/clone.ts
new file mode 100644
index 0000000000..16fad24129
--- /dev/null
+++ b/packages/frontend/src/scripts/clone.ts
@@ -0,0 +1,18 @@
+// structredCloneが遅いため
+// SEE: http://var.blog.jp/archives/86038606.html
+
+type Cloneable = string | number | boolean | null | { [key: string]: Cloneable } | Cloneable[];
+
+export function deepClone<T extends Cloneable>(x: T): T {
+	if (typeof x === 'object') {
+		if (x === null) return x;
+		if (Array.isArray(x)) return x.map(deepClone) as T;
+		const obj = {} as Record<string, Cloneable>;
+		for (const [k, v] of Object.entries(x)) {
+			obj[k] = deepClone(v);
+		}
+		return obj as T;
+	} else {
+		return x;
+	}
+}
diff --git a/packages/frontend/src/scripts/collect-page-vars.ts b/packages/frontend/src/scripts/collect-page-vars.ts
new file mode 100644
index 0000000000..76b68beaf6
--- /dev/null
+++ b/packages/frontend/src/scripts/collect-page-vars.ts
@@ -0,0 +1,68 @@
+interface StringPageVar {
+	name: string,
+	type: 'string',
+	value: string
+}
+
+interface NumberPageVar {
+	name: string,
+	type: 'number',
+	value: number
+}
+
+interface BooleanPageVar {
+	name: string,
+	type: 'boolean',
+	value: boolean
+}
+
+type PageVar = StringPageVar | NumberPageVar | BooleanPageVar;
+
+export function collectPageVars(content): PageVar[] {
+	const pageVars: PageVar[] = [];
+	const collect = (xs: any[]): void => {
+		for (const x of xs) {
+			if (x.type === 'textInput') {
+				pageVars.push({
+					name: x.name,
+					type: 'string',
+					value: x.default || '',
+				});
+			} else if (x.type === 'textareaInput') {
+				pageVars.push({
+					name: x.name,
+					type: 'string',
+					value: x.default || '',
+				});
+			} else if (x.type === 'numberInput') {
+				pageVars.push({
+					name: x.name,
+					type: 'number',
+					value: x.default || 0,
+				});
+			} else if (x.type === 'switch') {
+				pageVars.push({
+					name: x.name,
+					type: 'boolean',
+					value: x.default || false,
+				});
+			} else if (x.type === 'counter') {
+				pageVars.push({
+					name: x.name,
+					type: 'number',
+					value: 0,
+				});
+			} else if (x.type === 'radioButton') {
+				pageVars.push({
+					name: x.name,
+					type: 'string',
+					value: x.default || '',
+				});
+			} else if (x.children) {
+				collect(x.children);
+			}
+		}
+	};
+	collect(content);
+	return pageVars;
+}
diff --git a/packages/frontend/src/scripts/contains.ts b/packages/frontend/src/scripts/contains.ts
new file mode 100644
index 0000000000..256e09d293
--- /dev/null
+++ b/packages/frontend/src/scripts/contains.ts
@@ -0,0 +1,9 @@
+export default (parent, child, checkSame = true) => {
+	if (checkSame && parent === child) return true;
+	let node = child.parentNode;
+	while (node) {
+		if (node === parent) return true;
+		node = node.parentNode;
+	}
+	return false;
+};
diff --git a/packages/frontend/src/scripts/copy-to-clipboard.ts b/packages/frontend/src/scripts/copy-to-clipboard.ts
new file mode 100644
index 0000000000..ab13cab970
--- /dev/null
+++ b/packages/frontend/src/scripts/copy-to-clipboard.ts
@@ -0,0 +1,33 @@
+/**
+ * Clipboardに値をコピー(TODO: 文字列以外も対応)
+ */
+export default val => {
+	// 空div 生成
+	const tmp = document.createElement('div');
+	// 選択用のタグ生成
+	const pre = document.createElement('pre');
+
+	// 親要素のCSSで user-select: none だとコピーできないので書き換える
+	pre.style.webkitUserSelect = 'auto';
+	pre.style.userSelect = 'auto';
+
+	tmp.appendChild(pre).textContent = val;
+
+	// 要素を画面外へ
+	const s = tmp.style;
+	s.position = 'fixed';
+	s.right = '200%';
+
+	// body に追加
+	document.body.appendChild(tmp);
+	// 要素を選択
+	document.getSelection().selectAllChildren(tmp);
+
+	// クリップボードにコピー
+	const result = document.execCommand('copy');
+
+	// 要素削除
+	document.body.removeChild(tmp);
+
+	return result;
+};
diff --git a/packages/frontend/src/scripts/device-kind.ts b/packages/frontend/src/scripts/device-kind.ts
new file mode 100644
index 0000000000..544cac0604
--- /dev/null
+++ b/packages/frontend/src/scripts/device-kind.ts
@@ -0,0 +1,10 @@
+import { defaultStore } from '@/store';
+
+const ua = navigator.userAgent.toLowerCase();
+const isTablet = /ipad/.test(ua) || (/mobile|iphone|android/.test(ua) && window.innerWidth > 700);
+const isSmartphone = !isTablet && /mobile|iphone|android/.test(ua);
+
+export const deviceKind = defaultStore.state.overridedDeviceKind ? defaultStore.state.overridedDeviceKind
+	: isSmartphone ? 'smartphone'
+	: isTablet ? 'tablet'
+	: 'desktop';
diff --git a/packages/frontend/src/scripts/emoji-base.ts b/packages/frontend/src/scripts/emoji-base.ts
new file mode 100644
index 0000000000..3f05642d57
--- /dev/null
+++ b/packages/frontend/src/scripts/emoji-base.ts
@@ -0,0 +1,20 @@
+const twemojiSvgBase = '/twemoji';
+const fluentEmojiPngBase = '/fluent-emoji';
+
+export function char2twemojiFilePath(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);
+	const fileName = codes.join('-');
+	return `${twemojiSvgBase}/${fileName}.svg`;
+}
+
+export function char2fluentEmojiFilePath(char: string): string {
+	let codes = Array.from(char).map(x => x.codePointAt(0)?.toString(16));
+	// Fluent Emojiは国旗非対応 https://github.com/microsoft/fluentui-emoji/issues/25
+	if (codes[0]?.startsWith('1f1')) return char2twemojiFilePath(char);
+	if (!codes.includes('200d')) codes = codes.filter(x => x !== 'fe0f');
+	codes = codes.filter(x => x && x.length);
+	const fileName = codes.map(x => x!.padStart(4, '0')).join('-');
+	return `${fluentEmojiPngBase}/${fileName}.png`;
+}
diff --git a/packages/frontend/src/scripts/emojilist.ts b/packages/frontend/src/scripts/emojilist.ts
new file mode 100644
index 0000000000..bc52fa7a43
--- /dev/null
+++ b/packages/frontend/src/scripts/emojilist.ts
@@ -0,0 +1,17 @@
+export const unicodeEmojiCategories = ['face', 'people', 'animals_and_nature', 'food_and_drink', 'activity', 'travel_and_places', 'objects', 'symbols', 'flags'] as const;
+
+export type UnicodeEmojiDef = {
+	name: string;
+	keywords: string[];
+	char: string;
+	category: typeof unicodeEmojiCategories[number];
+}
+
+// initial converted from https://github.com/muan/emojilib/commit/242fe68be86ed6536843b83f7e32f376468b38fb
+import _emojilist from '../emojilist.json';
+
+export const emojilist = _emojilist as UnicodeEmojiDef[];
+
+export function getEmojiName(char: string): string | undefined {
+	return emojilist.find(emo => emo.char === char)?.name;
+}
diff --git a/packages/frontend/src/scripts/extract-avg-color-from-blurhash.ts b/packages/frontend/src/scripts/extract-avg-color-from-blurhash.ts
new file mode 100644
index 0000000000..af517f2672
--- /dev/null
+++ b/packages/frontend/src/scripts/extract-avg-color-from-blurhash.ts
@@ -0,0 +1,9 @@
+export function extractAvgColorFromBlurhash(hash: string) {
+	return typeof hash === 'string'
+		? '#' + [...hash.slice(2, 6)]
+				.map(x => '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#$%*+,-.:;=?@[]^_{|}~'.indexOf(x))
+				.reduce((a, c) => a * 83 + c, 0)
+				.toString(16)
+				.padStart(6, '0')
+		: undefined;
+}
diff --git a/packages/frontend/src/scripts/extract-mentions.ts b/packages/frontend/src/scripts/extract-mentions.ts
new file mode 100644
index 0000000000..cc19b161a8
--- /dev/null
+++ b/packages/frontend/src/scripts/extract-mentions.ts
@@ -0,0 +1,11 @@
+// test is located in test/extract-mentions
+
+import * as mfm from 'mfm-js';
+
+export function extractMentions(nodes: mfm.MfmNode[]): mfm.MfmMention['props'][] {
+	// TODO: 重複を削除
+	const mentionNodes = mfm.extract(nodes, (node) => node.type === 'mention');
+	const mentions = mentionNodes.map(x => x.props);
+
+	return mentions;
+}
diff --git a/packages/frontend/src/scripts/extract-url-from-mfm.ts b/packages/frontend/src/scripts/extract-url-from-mfm.ts
new file mode 100644
index 0000000000..34e3eb6c19
--- /dev/null
+++ b/packages/frontend/src/scripts/extract-url-from-mfm.ts
@@ -0,0 +1,19 @@
+import * as mfm from 'mfm-js';
+import { unique } from '@/scripts/array';
+
+// unique without hash
+// [ http://a/#1, http://a/#2, http://b/#3 ] => [ http://a/#1, http://b/#3 ]
+const removeHash = (x: string) => x.replace(/#[^#]*$/, '');
+
+export function extractUrlFromMfm(nodes: mfm.MfmNode[], respectSilentFlag = true): string[] {
+	const urlNodes = mfm.extract(nodes, (node) => {
+		return (node.type === 'url') || (node.type === 'link' && (!respectSilentFlag || !node.props.silent));
+	});
+	const urls: string[] = unique(urlNodes.map(x => x.props.url));
+
+	return urls.reduce((array, url) => {
+		const urlWithoutHash = removeHash(url);
+		if (!array.map(x => removeHash(x)).includes(urlWithoutHash)) array.push(url);
+		return array;
+	}, [] as string[]);
+}
diff --git a/packages/frontend/src/scripts/focus.ts b/packages/frontend/src/scripts/focus.ts
new file mode 100644
index 0000000000..d6802fa322
--- /dev/null
+++ b/packages/frontend/src/scripts/focus.ts
@@ -0,0 +1,27 @@
+export function focusPrev(el: Element | null, self = false, scroll = true) {
+	if (el == null) return;
+	if (!self) el = el.previousElementSibling;
+	if (el) {
+		if (el.hasAttribute('tabindex')) {
+			(el as HTMLElement).focus({
+				preventScroll: !scroll,
+			});
+		} else {
+			focusPrev(el.previousElementSibling, true);
+		}
+	}
+}
+
+export function focusNext(el: Element | null, self = false, scroll = true) {
+	if (el == null) return;
+	if (!self) el = el.nextElementSibling;
+	if (el) {
+		if (el.hasAttribute('tabindex')) {
+			(el as HTMLElement).focus({
+				preventScroll: !scroll,
+			});
+		} else {
+			focusPrev(el.nextElementSibling, true);
+		}
+	}
+}
diff --git a/packages/frontend/src/scripts/form.ts b/packages/frontend/src/scripts/form.ts
new file mode 100644
index 0000000000..7f321cc0ae
--- /dev/null
+++ b/packages/frontend/src/scripts/form.ts
@@ -0,0 +1,59 @@
+export type FormItem = {
+	label?: string;
+	type: 'string';
+	default: string | null;
+	hidden?: boolean;
+	multiline?: boolean;
+} | {
+	label?: string;
+	type: 'number';
+	default: number | null;
+	hidden?: boolean;
+	step?: number;
+} | {
+	label?: string;
+	type: 'boolean';
+	default: boolean | null;
+	hidden?: boolean;
+} | {
+	label?: string;
+	type: 'enum';
+	default: string | null;
+	hidden?: boolean;
+	enum: string[];
+} | {
+	label?: string;
+	type: 'radio';
+	default: unknown | null;
+	hidden?: boolean;
+	options: {
+		label: string;
+		value: unknown;
+	}[];
+} | {
+	label?: string;
+	type: 'object';
+	default: Record<string, unknown> | null;
+	hidden: true;
+} | {
+	label?: string;
+	type: 'array';
+	default: unknown[] | null;
+	hidden: true;
+};
+
+export type Form = Record<string, FormItem>;
+
+type GetItemType<Item extends FormItem> =
+	Item['type'] extends 'string' ? string :
+	Item['type'] extends 'number' ? number :
+	Item['type'] extends 'boolean' ? boolean :
+	Item['type'] extends 'radio' ? unknown :
+	Item['type'] extends 'enum' ? string :
+	Item['type'] extends 'array' ? unknown[] :
+	Item['type'] extends 'object' ? Record<string, unknown>
+	: never;
+
+export type GetFormResultType<F extends Form> = {
+	[P in keyof F]: GetItemType<F[P]>;
+};
diff --git a/packages/frontend/src/scripts/format-time-string.ts b/packages/frontend/src/scripts/format-time-string.ts
new file mode 100644
index 0000000000..c20db5e827
--- /dev/null
+++ b/packages/frontend/src/scripts/format-time-string.ts
@@ -0,0 +1,50 @@
+const defaultLocaleStringFormats: {[index: string]: string} = {
+	'weekday': 'narrow',
+	'era': 'narrow',
+	'year': 'numeric',
+	'month': 'numeric',
+	'day': 'numeric',
+	'hour': 'numeric',
+	'minute': 'numeric',
+	'second': 'numeric',
+	'timeZoneName': 'short',
+};
+
+function formatLocaleString(date: Date, format: string): string {
+	return format.replace(/\{\{(\w+)(:(\w+))?\}\}/g, (match: string, kind: string, unused?, option?: string) => {
+		if (['weekday', 'era', 'year', 'month', 'day', 'hour', 'minute', 'second', 'timeZoneName'].includes(kind)) {
+			return date.toLocaleString(window.navigator.language, { [kind]: option ? option : defaultLocaleStringFormats[kind] });
+		} else {
+			return match;
+		}
+	});
+}
+
+export function formatDateTimeString(date: Date, format: string): string {
+	return format
+		.replace(/yyyy/g, date.getFullYear().toString())
+		.replace(/yy/g, date.getFullYear().toString().slice(-2))
+		.replace(/MMMM/g, date.toLocaleString(window.navigator.language, { month: 'long' }))
+		.replace(/MMM/g, date.toLocaleString(window.navigator.language, { month: 'short' }))
+		.replace(/MM/g, (`0${date.getMonth() + 1}`).slice(-2))
+		.replace(/M/g, (date.getMonth() + 1).toString())
+		.replace(/dd/g, (`0${date.getDate()}`).slice(-2))
+		.replace(/d/g, date.getDate().toString())
+		.replace(/HH/g, (`0${date.getHours()}`).slice(-2))
+		.replace(/H/g, date.getHours().toString())
+		.replace(/hh/g, (`0${(date.getHours() % 12) || 12}`).slice(-2))
+		.replace(/h/g, ((date.getHours() % 12) || 12).toString())
+		.replace(/mm/g, (`0${date.getMinutes()}`).slice(-2))
+		.replace(/m/g, date.getMinutes().toString())
+		.replace(/ss/g, (`0${date.getSeconds()}`).slice(-2))
+		.replace(/s/g, date.getSeconds().toString())
+		.replace(/tt/g, date.getHours() >= 12 ? 'PM' : 'AM');
+}
+
+export function formatTimeString(date: Date, format: string): string {
+	return format.replace(/\[(([^\[]|\[\])*)\]|(([yMdHhmst])\4{0,3})/g, (match: string, localeformat?: string, unused?, datetimeformat?: string) => {
+		if (localeformat) return formatLocaleString(date, localeformat);
+		if (datetimeformat) return formatDateTimeString(date, datetimeformat);
+		return match;
+	});
+}
diff --git a/packages/frontend/src/scripts/gen-search-query.ts b/packages/frontend/src/scripts/gen-search-query.ts
new file mode 100644
index 0000000000..da7d622632
--- /dev/null
+++ b/packages/frontend/src/scripts/gen-search-query.ts
@@ -0,0 +1,30 @@
+import * as Acct from 'misskey-js/built/acct';
+import { host as localHost } from '@/config';
+
+export async function genSearchQuery(v: any, q: string) {
+	let host: string;
+	let userId: string;
+	if (q.split(' ').some(x => x.startsWith('@'))) {
+		for (const at of q.split(' ').filter(x => x.startsWith('@')).map(x => x.substr(1))) {
+			if (at.includes('.')) {
+				if (at === localHost || at === '.') {
+					host = null;
+				} else {
+					host = at;
+				}
+			} else {
+				const user = await v.os.api('users/show', Acct.parse(at)).catch(x => null);
+				if (user) {
+					userId = user.id;
+				} else {
+					// todo: show error
+				}
+			}
+		}
+	}
+	return {
+		query: q.split(' ').filter(x => !x.startsWith('/') && !x.startsWith('@')).join(' '),
+		host: host,
+		userId: userId,
+	};
+}
diff --git a/packages/frontend/src/scripts/get-account-from-id.ts b/packages/frontend/src/scripts/get-account-from-id.ts
new file mode 100644
index 0000000000..1da897f176
--- /dev/null
+++ b/packages/frontend/src/scripts/get-account-from-id.ts
@@ -0,0 +1,7 @@
+import { get } from '@/scripts/idb-proxy';
+
+export async function getAccountFromId(id: string) {
+	const accounts = await get('accounts') as { token: string; id: string; }[];
+	if (!accounts) console.log('Accounts are not recorded');
+	return accounts.find(account => account.id === id);
+}
diff --git a/packages/frontend/src/scripts/get-note-menu.ts b/packages/frontend/src/scripts/get-note-menu.ts
new file mode 100644
index 0000000000..7656770894
--- /dev/null
+++ b/packages/frontend/src/scripts/get-note-menu.ts
@@ -0,0 +1,341 @@
+import { defineAsyncComponent, Ref, inject } from 'vue';
+import * as misskey from 'misskey-js';
+import { pleaseLogin } from './please-login';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+import * as os from '@/os';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import { url } from '@/config';
+import { noteActions } from '@/store';
+import { notePage } from '@/filters/note';
+
+export function getNoteMenu(props: {
+	note: misskey.entities.Note;
+	menuButton: Ref<HTMLElement>;
+	translation: Ref<any>;
+	translating: Ref<boolean>;
+	isDeleted: Ref<boolean>;
+	currentClipPage?: Ref<misskey.entities.Clip>;
+}) {
+	const isRenote = (
+		props.note.renote != null &&
+		props.note.text == null &&
+		props.note.fileIds.length === 0 &&
+		props.note.poll == null
+	);
+
+	const appearNote = isRenote ? props.note.renote as misskey.entities.Note : props.note;
+
+	function del(): void {
+		os.confirm({
+			type: 'warning',
+			text: i18n.ts.noteDeleteConfirm,
+		}).then(({ canceled }) => {
+			if (canceled) return;
+
+			os.api('notes/delete', {
+				noteId: appearNote.id,
+			});
+		});
+	}
+
+	function delEdit(): void {
+		os.confirm({
+			type: 'warning',
+			text: i18n.ts.deleteAndEditConfirm,
+		}).then(({ canceled }) => {
+			if (canceled) return;
+
+			os.api('notes/delete', {
+				noteId: appearNote.id,
+			});
+
+			os.post({ initialNote: appearNote, renote: appearNote.renote, reply: appearNote.reply, channel: appearNote.channel });
+		});
+	}
+
+	function toggleFavorite(favorite: boolean): void {
+		os.apiWithDialog(favorite ? 'notes/favorites/create' : 'notes/favorites/delete', {
+			noteId: appearNote.id,
+		});
+	}
+
+	function toggleThreadMute(mute: boolean): void {
+		os.apiWithDialog(mute ? 'notes/thread-muting/create' : 'notes/thread-muting/delete', {
+			noteId: appearNote.id,
+		});
+	}
+
+	function copyContent(): void {
+		copyToClipboard(appearNote.text);
+		os.success();
+	}
+
+	function copyLink(): void {
+		copyToClipboard(`${url}/notes/${appearNote.id}`);
+		os.success();
+	}
+
+	function togglePin(pin: boolean): void {
+		os.apiWithDialog(pin ? 'i/pin' : 'i/unpin', {
+			noteId: appearNote.id,
+		}, undefined, null, res => {
+			if (res.id === '72dab508-c64d-498f-8740-a8eec1ba385a') {
+				os.alert({
+					type: 'error',
+					text: i18n.ts.pinLimitExceeded,
+				});
+			}
+		});
+	}
+
+	async function clip(): Promise<void> {
+		const clips = await os.api('clips/list');
+		os.popupMenu([{
+			icon: 'ti ti-plus',
+			text: i18n.ts.createNew,
+			action: async () => {
+				const { canceled, result } = await os.form(i18n.ts.createNewClip, {
+					name: {
+						type: 'string',
+						label: i18n.ts.name,
+					},
+					description: {
+						type: 'string',
+						required: false,
+						multiline: true,
+						label: i18n.ts.description,
+					},
+					isPublic: {
+						type: 'boolean',
+						label: i18n.ts.public,
+						default: false,
+					},
+				});
+				if (canceled) return;
+
+				const clip = await os.apiWithDialog('clips/create', result);
+
+				os.apiWithDialog('clips/add-note', { clipId: clip.id, noteId: appearNote.id });
+			},
+		}, null, ...clips.map(clip => ({
+			text: clip.name,
+			action: () => {
+				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.currentClipPage?.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.currentClipPage.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,
+		});
+
+		if (canceled) return;
+
+		os.apiWithDialog('admin/promo/create', {
+			noteId: appearNote.id,
+			expiresAt: Date.now() + (86400000 * days),
+		});
+	}
+
+	function share(): void {
+		navigator.share({
+			title: i18n.t('noteOf', { user: appearNote.user.name }),
+			text: appearNote.text,
+			url: `${url}/notes/${appearNote.id}`,
+		});
+	}
+	function notedetails(): void {
+		os.pageWindow(`/notes/${appearNote.id}`);
+	}
+	async function translate(): Promise<void> {
+		if (props.translation.value != null) return;
+		props.translating.value = true;
+		const res = await os.api('notes/translate', {
+			noteId: appearNote.id,
+			targetLang: localStorage.getItem('lang') || navigator.language,
+		});
+		props.translating.value = false;
+		props.translation.value = res;
+	}
+
+	let menu;
+	if ($i) {
+		const statePromise = os.api('notes/state', {
+			noteId: appearNote.id,
+		});
+
+		menu = [
+			...(
+				props.currentClipPage?.value.userId === $i.id ? [{
+					icon: 'ti ti-backspace',
+					text: i18n.ts.unclip,
+					danger: true,
+					action: unclip,
+				}, null] : []
+			), {
+				icon: 'ti ti-external-link',
+				text: i18n.ts.details,
+				action: notedetails,
+			}, {
+				icon: 'ti ti-copy',
+				text: i18n.ts.copyContent,
+				action: copyContent,
+			}, {
+				icon: 'ti ti-link',
+				text: i18n.ts.copyLink,
+				action: copyLink,
+			}, (appearNote.url || appearNote.uri) ? {
+				icon: 'ti ti-external-link',
+				text: i18n.ts.showOnRemote,
+				action: () => {
+					window.open(appearNote.url || appearNote.uri, '_blank');
+				},
+			} : undefined,
+			{
+				icon: 'ti ti-share',
+				text: i18n.ts.share,
+				action: share,
+			},
+			instance.translatorAvailable ? {
+				icon: 'ti ti-language-hiragana',
+				text: i18n.ts.translate,
+				action: translate,
+			} : undefined,
+			null,
+			statePromise.then(state => state.isFavorited ? {
+				icon: 'ti ti-star-off',
+				text: i18n.ts.unfavorite,
+				action: () => toggleFavorite(false),
+			} : {
+				icon: 'ti ti-star',
+				text: i18n.ts.favorite,
+				action: () => toggleFavorite(true),
+			}),
+			{
+				icon: 'ti ti-paperclip',
+				text: i18n.ts.clip,
+				action: () => clip(),
+			},
+			statePromise.then(state => state.isMutedThread ? {
+				icon: 'ti ti-message-off',
+				text: i18n.ts.unmuteThread,
+				action: () => toggleThreadMute(false),
+			} : {
+				icon: 'ti ti-message-off',
+				text: i18n.ts.muteThread,
+				action: () => toggleThreadMute(true),
+			}),
+			appearNote.userId === $i.id ? ($i.pinnedNoteIds || []).includes(appearNote.id) ? {
+				icon: 'ti ti-pinned-off',
+				text: i18n.ts.unpin,
+				action: () => togglePin(false),
+			} : {
+				icon: 'ti ti-pin',
+				text: i18n.ts.pin,
+				action: () => togglePin(true),
+			} : undefined,
+			/*
+		...($i.isModerator || $i.isAdmin ? [
+			null,
+			{
+				icon: 'fas fa-bullhorn',
+				text: i18n.ts.promote,
+				action: promote
+			}]
+			: []
+		),*/
+			...(appearNote.userId !== $i.id ? [
+				null,
+				{
+					icon: 'ti ti-exclamation-circle',
+					text: i18n.ts.reportAbuse,
+					action: () => {
+						const u = appearNote.url || appearNote.uri || `${url}/notes/${appearNote.id}`;
+						os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
+							user: appearNote.user,
+							initialComment: `Note: ${u}\n-----\n`,
+						}, {}, 'closed');
+					},
+				}]
+			: []
+			),
+			...(appearNote.userId === $i.id || $i.isModerator || $i.isAdmin ? [
+				null,
+				appearNote.userId === $i.id ? {
+					icon: 'ti ti-edit',
+					text: i18n.ts.deleteAndEdit,
+					action: delEdit,
+				} : undefined,
+				{
+					icon: 'ti ti-trash',
+					text: i18n.ts.delete,
+					danger: true,
+					action: del,
+				}]
+			: []
+			)]
+			.filter(x => x !== undefined);
+	} else {
+		menu = [{
+			icon: 'ti ti-external-link',
+			text: i18n.ts.detailed,
+			action: openDetail,
+		}, {
+			icon: 'ti ti-copy',
+			text: i18n.ts.copyContent,
+			action: copyContent,
+		}, {
+			icon: 'ti ti-link',
+			text: i18n.ts.copyLink,
+			action: copyLink,
+		}, (appearNote.url || appearNote.uri) ? {
+			icon: 'ti ti-external-link',
+			text: i18n.ts.showOnRemote,
+			action: () => {
+				window.open(appearNote.url || appearNote.uri, '_blank');
+			},
+		} : undefined]
+			.filter(x => x !== undefined);
+	}
+
+	if (noteActions.length > 0) {
+		menu = menu.concat([null, ...noteActions.map(action => ({
+			icon: 'ti ti-plug',
+			text: action.title,
+			action: () => {
+				action.handler(appearNote);
+			},
+		}))]);
+	}
+
+	return menu;
+}
diff --git a/packages/frontend/src/scripts/get-note-summary.ts b/packages/frontend/src/scripts/get-note-summary.ts
new file mode 100644
index 0000000000..d57e1c3029
--- /dev/null
+++ b/packages/frontend/src/scripts/get-note-summary.ts
@@ -0,0 +1,55 @@
+import * as misskey from 'misskey-js';
+import { i18n } from '@/i18n';
+
+/**
+ * 投稿を表す文字列を取得します。
+ * @param {*} note (packされた)投稿
+ */
+export const getNoteSummary = (note: misskey.entities.Note): string => {
+	if (note.deletedAt) {
+		return `(${i18n.ts.deletedNote})`;
+	}
+
+	if (note.isHidden) {
+		return `(${i18n.ts.invisibleNote})`;
+	}
+
+	let summary = '';
+
+	// 本文
+	if (note.cw != null) {
+		summary += note.cw;
+	} else {
+		summary += note.text ? note.text : '';
+	}
+
+	// ファイルが添付されているとき
+	if ((note.files || []).length !== 0) {
+		summary += ` (${i18n.t('withNFiles', { n: note.files.length })})`;
+	}
+
+	// 投票が添付されているとき
+	if (note.poll) {
+		summary += ` (${i18n.ts.poll})`;
+	}
+
+	// 返信のとき
+	if (note.replyId) {
+		if (note.reply) {
+			summary += `\n\nRE: ${getNoteSummary(note.reply)}`;
+		} else {
+			summary += '\n\nRE: ...';
+		}
+	}
+
+	// Renoteのとき
+	if (note.renoteId) {
+		if (note.renote) {
+			summary += `\n\nRN: ${getNoteSummary(note.renote)}`;
+		} else {
+			summary += '\n\nRN: ...';
+		}
+	}
+
+	return summary.trim();
+};
diff --git a/packages/frontend/src/scripts/get-static-image-url.ts b/packages/frontend/src/scripts/get-static-image-url.ts
new file mode 100644
index 0000000000..cbd1761983
--- /dev/null
+++ b/packages/frontend/src/scripts/get-static-image-url.ts
@@ -0,0 +1,19 @@
+import { url as instanceUrl } from '@/config';
+import * as url from '@/scripts/url';
+
+export function getStaticImageUrl(baseUrl: string): string {
+	const u = new URL(baseUrl);
+	if (u.href.startsWith(`${instanceUrl}/proxy/`)) {
+		// もう既にproxyっぽそうだったらsearchParams付けるだけ
+		u.searchParams.set('static', '1');
+		return u.href;
+	}
+
+	// 拡張子がないとキャッシュしてくれないCDNがあるのでダミーの名前を指定する
+	const dummy = `${encodeURIComponent(`${u.host}${u.pathname}`)}.webp`;
+
+	return `${instanceUrl}/proxy/${dummy}?${url.query({
+		url: u.href,
+		static: '1',
+	})}`;
+}
diff --git a/packages/frontend/src/scripts/get-user-menu.ts b/packages/frontend/src/scripts/get-user-menu.ts
new file mode 100644
index 0000000000..2faacffdfc
--- /dev/null
+++ b/packages/frontend/src/scripts/get-user-menu.ts
@@ -0,0 +1,253 @@
+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 os from '@/os';
+import { userActions } from '@/store';
+import { $i, iAmModerator } from '@/account';
+import { mainRouter } from '@/router';
+import { Router } from '@/nirax';
+
+export function getUserMenu(user, router: Router = mainRouter) {
+	const meId = $i ? $i.id : null;
+
+	async function pushList() {
+		const t = i18n.ts.selectList; // なぜか後で参照すると null になるので最初にメモリに確保しておく
+		const lists = await os.api('users/lists/list');
+		if (lists.length === 0) {
+			os.alert({
+				type: 'error',
+				text: i18n.ts.youHaveNoLists,
+			});
+			return;
+		}
+		const { canceled, result: listId } = await os.select({
+			title: t,
+			items: lists.map(list => ({
+				value: list.id, text: list.name,
+			})),
+		});
+		if (canceled) return;
+		os.apiWithDialog('users/lists/push', {
+			listId: listId,
+			userId: user.id,
+		});
+	}
+
+	async function inviteGroup() {
+		const groups = await os.api('users/groups/owned');
+		if (groups.length === 0) {
+			os.alert({
+				type: 'error',
+				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,
+			})),
+		});
+		if (canceled) return;
+		os.apiWithDialog('users/groups/invite', {
+			groupId: groupId,
+			userId: user.id,
+		});
+	}
+
+	async function toggleMute() {
+		if (user.isMuted) {
+			os.apiWithDialog('mute/delete', {
+				userId: user.id,
+			}).then(() => {
+				user.isMuted = false;
+			});
+		} else {
+			const { canceled, result: period } = await os.select({
+				title: i18n.ts.mutePeriod,
+				items: [{
+					value: 'indefinitely', text: i18n.ts.indefinitely,
+				}, {
+					value: 'tenMinutes', text: i18n.ts.tenMinutes,
+				}, {
+					value: 'oneHour', text: i18n.ts.oneHour,
+				}, {
+					value: 'oneDay', text: i18n.ts.oneDay,
+				}, {
+					value: 'oneWeek', text: i18n.ts.oneWeek,
+				}],
+				default: 'indefinitely',
+			});
+			if (canceled) return;
+
+			const expiresAt = period === 'indefinitely' ? null
+				: period === 'tenMinutes' ? Date.now() + (1000 * 60 * 10)
+				: period === 'oneHour' ? Date.now() + (1000 * 60 * 60)
+				: period === 'oneDay' ? Date.now() + (1000 * 60 * 60 * 24)
+				: period === 'oneWeek' ? Date.now() + (1000 * 60 * 60 * 24 * 7)
+				: null;
+
+			os.apiWithDialog('mute/create', {
+				userId: user.id,
+				expiresAt,
+			}).then(() => {
+				user.isMuted = true;
+			});
+		}
+	}
+
+	async function toggleBlock() {
+		if (!await getConfirmed(user.isBlocking ? i18n.ts.unblockConfirm : i18n.ts.blockConfirm)) return;
+
+		os.apiWithDialog(user.isBlocking ? 'blocking/delete' : 'blocking/create', {
+			userId: user.id,
+		}).then(() => {
+			user.isBlocking = !user.isBlocking;
+		});
+	}
+
+	async function toggleSilence() {
+		if (!await getConfirmed(i18n.t(user.isSilenced ? 'unsilenceConfirm' : 'silenceConfirm'))) return;
+
+		os.apiWithDialog(user.isSilenced ? 'admin/unsilence-user' : 'admin/silence-user', {
+			userId: user.id,
+		}).then(() => {
+			user.isSilenced = !user.isSilenced;
+		});
+	}
+
+	async function toggleSuspend() {
+		if (!await getConfirmed(i18n.t(user.isSuspended ? 'unsuspendConfirm' : 'suspendConfirm'))) return;
+
+		os.apiWithDialog(user.isSuspended ? 'admin/unsuspend-user' : 'admin/suspend-user', {
+			userId: user.id,
+		}).then(() => {
+			user.isSuspended = !user.isSuspended;
+		});
+	}
+
+	function reportAbuse() {
+		os.popup(defineAsyncComponent(() => import('@/components/MkAbuseReportWindow.vue')), {
+			user: user,
+		}, {}, 'closed');
+	}
+
+	async function getConfirmed(text: string): Promise<boolean> {
+		const confirm = await os.confirm({
+			type: 'warning',
+			title: 'confirm',
+			text,
+		});
+
+		return !confirm.canceled;
+	}
+
+	async function invalidateFollow() {
+		os.apiWithDialog('following/invalidate', {
+			userId: user.id,
+		}).then(() => {
+			user.isFollowed = !user.isFollowed;
+		});
+	}
+
+	let menu = [{
+		icon: 'ti ti-at',
+		text: i18n.ts.copyUsername,
+		action: () => {
+			copyToClipboard(`@${user.username}@${user.host || host}`);
+		},
+	}, {
+		icon: 'ti ti-rss',
+		text: i18n.ts.copyRSS,
+		action: () => {
+			copyToClipboard(`${user.host || host}/@${user.username}.atom`);
+		}
+	}, {
+		icon: 'ti ti-info-circle',
+		text: i18n.ts.info,
+		action: () => {
+			router.push(`/user-info/${user.id}`);
+		},
+	}, {
+		icon: 'ti ti-mail',
+		text: i18n.ts.sendMessage,
+		action: () => {
+			os.post({ specified: user });
+		},
+	}, meId !== user.id ? {
+		type: 'link',
+		icon: 'ti ti-messages',
+		text: i18n.ts.startMessaging,
+		to: '/my/messaging/' + Acct.toString(user),
+	} : undefined, null, {
+		icon: 'ti ti-list',
+		text: i18n.ts.addToList,
+		action: pushList,
+	}, meId !== user.id ? {
+		icon: 'ti ti-users',
+		text: i18n.ts.inviteToGroup,
+		action: inviteGroup,
+	} : undefined] as any;
+
+	if ($i && meId !== user.id) {
+		menu = menu.concat([null, {
+			icon: user.isMuted ? 'ti ti-eye' : 'ti ti-eye-off',
+			text: user.isMuted ? i18n.ts.unmute : i18n.ts.mute,
+			action: toggleMute,
+		}, {
+			icon: 'ti ti-ban',
+			text: user.isBlocking ? i18n.ts.unblock : i18n.ts.block,
+			action: toggleBlock,
+		}]);
+
+		if (user.isFollowed) {
+			menu = menu.concat([{
+				icon: 'ti ti-link-off',
+				text: i18n.ts.breakFollow,
+				action: invalidateFollow,
+			}]);
+		}
+
+		menu = menu.concat([null, {
+			icon: 'ti ti-exclamation-circle',
+			text: i18n.ts.reportAbuse,
+			action: reportAbuse,
+		}]);
+
+		if (iAmModerator) {
+			menu = menu.concat([null, {
+				icon: 'ti ti-microphone-2-off',
+				text: user.isSilenced ? i18n.ts.unsilence : i18n.ts.silence,
+				action: toggleSilence,
+			}, {
+				icon: 'ti ti-snowflake',
+				text: user.isSuspended ? i18n.ts.unsuspend : i18n.ts.suspend,
+				action: toggleSuspend,
+			}]);
+		}
+	}
+
+	if ($i && meId === user.id) {
+		menu = menu.concat([null, {
+			icon: 'ti ti-pencil',
+			text: i18n.ts.editProfile,
+			action: () => {
+				router.push('/settings/profile');
+			},
+		}]);
+	}
+
+	if (userActions.length > 0) {
+		menu = menu.concat([null, ...userActions.map(action => ({
+			icon: 'ti ti-plug',
+			text: action.title,
+			action: () => {
+				action.handler(user);
+			},
+		}))]);
+	}
+
+	return menu;
+}
diff --git a/packages/frontend/src/scripts/get-user-name.ts b/packages/frontend/src/scripts/get-user-name.ts
new file mode 100644
index 0000000000..d499ea0203
--- /dev/null
+++ b/packages/frontend/src/scripts/get-user-name.ts
@@ -0,0 +1,3 @@
+export default function(user: { name?: string | null, username: string }): string {
+	return user.name || user.username;
+}
diff --git a/packages/frontend/src/scripts/hotkey.ts b/packages/frontend/src/scripts/hotkey.ts
new file mode 100644
index 0000000000..4a0ded637d
--- /dev/null
+++ b/packages/frontend/src/scripts/hotkey.ts
@@ -0,0 +1,90 @@
+import keyCode from './keycode';
+
+type Callback = (ev: KeyboardEvent) => void;
+
+type Keymap = Record<string, Callback>;
+
+type Pattern = {
+	which: string[];
+	ctrl?: boolean;
+	shift?: boolean;
+	alt?: boolean;
+};
+
+type Action = {
+	patterns: Pattern[];
+	callback: Callback;
+	allowRepeat: boolean;
+};
+
+const parseKeymap = (keymap: Keymap) => Object.entries(keymap).map(([patterns, callback]): Action => {
+	const result = {
+		patterns: [],
+		callback,
+		allowRepeat: true,
+	} as Action;
+
+	if (patterns.match(/^\(.*\)$/) !== null) {
+		result.allowRepeat = false;
+		patterns = patterns.slice(1, -1);
+	}
+
+	result.patterns = patterns.split('|').map(part => {
+		const pattern = {
+			which: [],
+			ctrl: false,
+			alt: false,
+			shift: false,
+		} as Pattern;
+
+		const keys = part.trim().split('+').map(x => x.trim().toLowerCase());
+		for (const key of keys) {
+			switch (key) {
+				case 'ctrl': pattern.ctrl = true; break;
+				case 'alt': pattern.alt = true; break;
+				case 'shift': pattern.shift = true; break;
+				default: pattern.which = keyCode(key).map(k => k.toLowerCase());
+			}
+		}
+
+		return pattern;
+	});
+
+	return result;
+});
+
+const ignoreElemens = ['input', 'textarea'];
+
+function match(ev: KeyboardEvent, patterns: Action['patterns']): boolean {
+	const key = ev.code.toLowerCase();
+	return patterns.some(pattern => pattern.which.includes(key) &&
+		pattern.ctrl === ev.ctrlKey &&
+		pattern.shift === ev.shiftKey &&
+		pattern.alt === ev.altKey &&
+		!ev.metaKey,
+	);
+}
+
+export const makeHotkey = (keymap: Keymap) => {
+	const actions = parseKeymap(keymap);
+
+	return (ev: KeyboardEvent) => {
+		if (document.activeElement) {
+			if (ignoreElemens.some(el => document.activeElement!.matches(el))) return;
+			if (document.activeElement.attributes['contenteditable']) return;
+		}
+
+		for (const action of actions) {
+			const matched = match(ev, action.patterns);
+
+			if (matched) {
+				if (!action.allowRepeat && ev.repeat) return;
+
+				ev.preventDefault();
+				ev.stopPropagation();
+				action.callback(ev);
+				break;
+			}
+		}
+	};
+};
diff --git a/packages/frontend/src/scripts/hpml/block.ts b/packages/frontend/src/scripts/hpml/block.ts
new file mode 100644
index 0000000000..804c5c1124
--- /dev/null
+++ b/packages/frontend/src/scripts/hpml/block.ts
@@ -0,0 +1,109 @@
+// blocks
+
+export type BlockBase = {
+	id: string;
+	type: string;
+};
+
+export type TextBlock = BlockBase & {
+	type: 'text';
+	text: string;
+};
+
+export type SectionBlock = BlockBase & {
+	type: 'section';
+	title: string;
+	children: (Block | VarBlock)[];
+};
+
+export type ImageBlock = BlockBase & {
+	type: 'image';
+	fileId: string | null;
+};
+
+export type ButtonBlock = BlockBase & {
+	type: 'button';
+	text: any;
+	primary: boolean;
+	action: string;
+	content: string;
+	event: string;
+	message: string;
+	var: string;
+	fn: string;
+};
+
+export type IfBlock = BlockBase & {
+	type: 'if';
+	var: string;
+	children: Block[];
+};
+
+export type TextareaBlock = BlockBase & {
+	type: 'textarea';
+	text: string;
+};
+
+export type PostBlock = BlockBase & {
+	type: 'post';
+	text: string;
+	attachCanvasImage: boolean;
+	canvasId: string;
+};
+
+export type CanvasBlock = BlockBase & {
+	type: 'canvas';
+	name: string; // canvas id
+	width: number;
+	height: number;
+};
+
+export type NoteBlock = BlockBase & {
+	type: 'note';
+	detailed: boolean;
+	note: string | null;
+};
+
+export type Block =
+	TextBlock | SectionBlock | ImageBlock | ButtonBlock | IfBlock | TextareaBlock | PostBlock | CanvasBlock | NoteBlock | VarBlock;
+
+// variable blocks
+
+export type VarBlockBase = BlockBase & {
+	name: string;
+};
+
+export type NumberInputVarBlock = VarBlockBase & {
+	type: 'numberInput';
+	text: string;
+};
+
+export type TextInputVarBlock = VarBlockBase & {
+	type: 'textInput';
+	text: string;
+};
+
+export type SwitchVarBlock = VarBlockBase & {
+	type: 'switch';
+	text: string;
+};
+
+export type RadioButtonVarBlock = VarBlockBase & {
+	type: 'radioButton';
+	title: string;
+	values: string[];
+};
+
+export type CounterVarBlock = VarBlockBase & {
+	type: 'counter';
+	text: string;
+	inc: number;
+};
+
+export type VarBlock =
+	NumberInputVarBlock | TextInputVarBlock | SwitchVarBlock | RadioButtonVarBlock | CounterVarBlock;
+
+const varBlock = ['numberInput', 'textInput', 'switch', 'radioButton', 'counter'];
+export function isVarBlock(block: Block): block is VarBlock {
+	return varBlock.includes(block.type);
+}
diff --git a/packages/frontend/src/scripts/hpml/evaluator.ts b/packages/frontend/src/scripts/hpml/evaluator.ts
new file mode 100644
index 0000000000..196b3142a1
--- /dev/null
+++ b/packages/frontend/src/scripts/hpml/evaluator.ts
@@ -0,0 +1,232 @@
+import autobind from 'autobind-decorator';
+import { PageVar, envVarsDef, Fn, HpmlScope, HpmlError } from '.';
+import { version } from '@/config';
+import { AiScript, utils, values } from '@syuilo/aiscript';
+import { createAiScriptEnv } from '../aiscript/api';
+import { collectPageVars } from '../collect-page-vars';
+import { initHpmlLib, initAiLib } from './lib';
+import * as os from '@/os';
+import { markRaw, ref, Ref, unref } from 'vue';
+import { Expr, isLiteralValue, Variable } from './expr';
+
+/**
+ * Hpml evaluator
+ */
+export class Hpml {
+	private variables: Variable[];
+	private pageVars: PageVar[];
+	private envVars: Record<keyof typeof envVarsDef, any>;
+	public aiscript?: AiScript;
+	public pageVarUpdatedCallback?: values.VFn;
+	public canvases: Record<string, HTMLCanvasElement> = {};
+	public vars: Ref<Record<string, any>> = ref({});
+	public page: Record<string, any>;
+
+	private opts: {
+		randomSeed: string; visitor?: any; url?: string;
+		enableAiScript: boolean;
+	};
+
+	constructor(page: Hpml['page'], opts: Hpml['opts']) {
+		this.page = page;
+		this.variables = this.page.variables;
+		this.pageVars = collectPageVars(this.page.content);
+		this.opts = opts;
+
+		if (this.opts.enableAiScript) {
+			this.aiscript = markRaw(new AiScript({ ...createAiScriptEnv({
+				storageKey: 'pages:' + this.page.id,
+			}), ...initAiLib(this) }, {
+				in: (q) => {
+					return new Promise(ok => {
+						os.inputText({
+							title: q,
+						}).then(({ canceled, result: a }) => {
+							ok(a);
+						});
+					});
+				},
+				out: (value) => {
+					console.log(value);
+				},
+				log: (type, params) => {
+				},
+			}));
+
+			this.aiscript.scope.opts.onUpdated = (name, value) => {
+				this.eval();
+			};
+		}
+
+		const date = new Date();
+
+		this.envVars = {
+			AI: 'kawaii',
+			VERSION: version,
+			URL: this.page ? `${opts.url}/@${this.page.user.username}/pages/${this.page.name}` : '',
+			LOGIN: opts.visitor != null,
+			NAME: opts.visitor ? opts.visitor.name || opts.visitor.username : '',
+			USERNAME: opts.visitor ? opts.visitor.username : '',
+			USERID: opts.visitor ? opts.visitor.id : '',
+			NOTES_COUNT: opts.visitor ? opts.visitor.notesCount : 0,
+			FOLLOWERS_COUNT: opts.visitor ? opts.visitor.followersCount : 0,
+			FOLLOWING_COUNT: opts.visitor ? opts.visitor.followingCount : 0,
+			IS_CAT: opts.visitor ? opts.visitor.isCat : false,
+			SEED: opts.randomSeed ? opts.randomSeed : '',
+			YMD: `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`,
+			AISCRIPT_DISABLED: !this.opts.enableAiScript,
+			NULL: null,
+		};
+
+		this.eval();
+	}
+
+	@autobind
+	public eval() {
+		try {
+			this.vars.value = this.evaluateVars();
+		} catch (err) {
+			//this.onError(e);
+		}
+	}
+
+	@autobind
+	public interpolate(str: string) {
+		if (str == null) return null;
+		return str.replace(/{(.+?)}/g, match => {
+			const v = unref(this.vars)[match.slice(1, -1).trim()];
+			return v == null ? 'NULL' : v.toString();
+		});
+	}
+
+	@autobind
+	public callAiScript(fn: string) {
+		try {
+			if (this.aiscript) this.aiscript.execFn(this.aiscript.scope.get(fn), []);
+		} catch (err) {}
+	}
+
+	@autobind
+	public registerCanvas(id: string, canvas: any) {
+		this.canvases[id] = canvas;
+	}
+
+	@autobind
+	public updatePageVar(name: string, value: any) {
+		const pageVar = this.pageVars.find(v => v.name === name);
+		if (pageVar !== undefined) {
+			pageVar.value = value;
+			if (this.pageVarUpdatedCallback) {
+				if (this.aiscript) this.aiscript.execFn(this.pageVarUpdatedCallback, [values.STR(name), utils.jsToVal(value)]);
+			}
+		} else {
+			throw new HpmlError(`No such page var '${name}'`);
+		}
+	}
+
+	@autobind
+	public updateRandomSeed(seed: string) {
+		this.opts.randomSeed = seed;
+		this.envVars.SEED = seed;
+	}
+
+	@autobind
+	private _interpolateScope(str: string, scope: HpmlScope) {
+		return str.replace(/{(.+?)}/g, match => {
+			const v = scope.getState(match.slice(1, -1).trim());
+			return v == null ? 'NULL' : v.toString();
+		});
+	}
+
+	@autobind
+	public evaluateVars(): Record<string, any> {
+		const values: Record<string, any> = {};
+
+		for (const [k, v] of Object.entries(this.envVars)) {
+			values[k] = v;
+		}
+
+		for (const v of this.pageVars) {
+			values[v.name] = v.value;
+		}
+
+		for (const v of this.variables) {
+			values[v.name] = this.evaluate(v, new HpmlScope([values]));
+		}
+
+		return values;
+	}
+
+	@autobind
+	private evaluate(expr: Expr, scope: HpmlScope): any {
+		if (isLiteralValue(expr)) {
+			if (expr.type === null) {
+				return null;
+			}
+
+			if (expr.type === 'number') {
+				return parseInt((expr.value as any), 10);
+			}
+
+			if (expr.type === 'text' || expr.type === 'multiLineText') {
+				return this._interpolateScope(expr.value || '', scope);
+			}
+
+			if (expr.type === 'textList') {
+				return this._interpolateScope(expr.value || '', scope).trim().split('\n');
+			}
+
+			if (expr.type === 'ref') {
+				return scope.getState(expr.value);
+			}
+
+			if (expr.type === 'aiScriptVar') {
+				if (this.aiscript) {
+					try {
+						return utils.valToJs(this.aiscript.scope.get(expr.value));
+					} catch (err) {
+						return null;
+					}
+				} else {
+					return null;
+				}
+			}
+
+			// Define user function
+			if (expr.type === 'fn') {
+				return {
+					slots: expr.value.slots.map(x => x.name),
+					exec: (slotArg: Record<string, any>) => {
+						return this.evaluate(expr.value.expression, scope.createChildScope(slotArg, expr.id));
+					},
+				} as Fn;
+			}
+			return;
+		}
+
+		// Call user function
+		if (expr.type.startsWith('fn:')) {
+			const fnName = expr.type.split(':')[1];
+			const fn = scope.getState(fnName);
+			const args = {} as Record<string, any>;
+			for (let i = 0; i < fn.slots.length; i++) {
+				const name = fn.slots[i];
+				args[name] = this.evaluate(expr.args[i], scope);
+			}
+			return fn.exec(args);
+		}
+
+		if (expr.args === undefined) return null;
+
+		const funcs = initHpmlLib(expr, scope, this.opts.randomSeed, this.opts.visitor);
+
+		// Call function
+		const fnName = expr.type;
+		const fn = (funcs as any)[fnName];
+		if (fn == null) {
+			throw new HpmlError(`No such function '${fnName}'`);
+		} else {
+			return fn(...expr.args.map(x => this.evaluate(x, scope)));
+		}
+	}
+}
diff --git a/packages/frontend/src/scripts/hpml/expr.ts b/packages/frontend/src/scripts/hpml/expr.ts
new file mode 100644
index 0000000000..18c7c2a14b
--- /dev/null
+++ b/packages/frontend/src/scripts/hpml/expr.ts
@@ -0,0 +1,79 @@
+import { literalDefs, Type } from '.';
+
+export type ExprBase = {
+	id: string;
+};
+
+// value
+
+export type EmptyValue = ExprBase & {
+	type: null;
+	value: null;
+};
+
+export type TextValue = ExprBase & {
+	type: 'text';
+	value: string;
+};
+
+export type MultiLineTextValue = ExprBase & {
+	type: 'multiLineText';
+	value: string;
+};
+
+export type TextListValue = ExprBase & {
+	type: 'textList';
+	value: string;
+};
+
+export type NumberValue = ExprBase & {
+	type: 'number';
+	value: number;
+};
+
+export type RefValue = ExprBase & {
+	type: 'ref';
+	value: string; // value is variable name
+};
+
+export type AiScriptRefValue = ExprBase & {
+	type: 'aiScriptVar';
+	value: string; // value is variable name
+};
+
+export type UserFnValue = ExprBase & {
+	type: 'fn';
+	value: UserFnInnerValue;
+};
+type UserFnInnerValue = {
+	slots: {
+		name: string;
+		type: Type;
+	}[];
+	expression: Expr;
+};
+
+export type Value =
+	EmptyValue | TextValue | MultiLineTextValue | TextListValue | NumberValue | RefValue | AiScriptRefValue | UserFnValue;
+
+export function isLiteralValue(expr: Expr): expr is Value {
+	if (expr.type == null) return true;
+	if (literalDefs[expr.type]) return true;
+	return false;
+}
+
+// call function
+
+export type CallFn = ExprBase & { // "fn:hoge" or string
+	type: string;
+	args: Expr[];
+	value: null;
+};
+
+// variable
+export type Variable = (Value | CallFn) & {
+	name: string;
+};
+
+// expression
+export type Expr = Variable | Value | CallFn;
diff --git a/packages/frontend/src/scripts/hpml/index.ts b/packages/frontend/src/scripts/hpml/index.ts
new file mode 100644
index 0000000000..9a55a5c286
--- /dev/null
+++ b/packages/frontend/src/scripts/hpml/index.ts
@@ -0,0 +1,103 @@
+/**
+ * Hpml
+ */
+
+import autobind from 'autobind-decorator';
+import { Hpml } from './evaluator';
+import { funcDefs } from './lib';
+
+export type Fn = {
+	slots: string[];
+	exec: (args: Record<string, any>) => ReturnType<Hpml['evaluate']>;
+};
+
+export type Type = 'string' | 'number' | 'boolean' | 'stringArray' | null;
+
+export const literalDefs: Record<string, { out: any; category: string; icon: any; }> = {
+	text: { out: 'string', category: 'value', icon: 'ti ti-quote' },
+	multiLineText: { out: 'string', category: 'value', icon: 'fas fa-align-left' },
+	textList: { out: 'stringArray', category: 'value', icon: 'fas fa-list' },
+	number: { out: 'number', category: 'value', icon: 'fas fa-sort-numeric-up' },
+	ref: { out: null, category: 'value', icon: 'fas fa-magic' },
+	aiScriptVar: { out: null, category: 'value', icon: 'fas fa-magic' },
+	fn: { out: 'function', category: 'value', icon: 'fas fa-square-root-alt' },
+};
+
+export const blockDefs = [
+	...Object.entries(literalDefs).map(([k, v]) => ({
+		type: k, out: v.out, category: v.category, icon: v.icon,
+	})),
+	...Object.entries(funcDefs).map(([k, v]) => ({
+		type: k, out: v.out, category: v.category, icon: v.icon,
+	})),
+];
+
+export type PageVar = { name: string; value: any; type: Type; };
+
+export const envVarsDef: Record<string, Type> = {
+	AI: 'string',
+	URL: 'string',
+	VERSION: 'string',
+	LOGIN: 'boolean',
+	NAME: 'string',
+	USERNAME: 'string',
+	USERID: 'string',
+	NOTES_COUNT: 'number',
+	FOLLOWERS_COUNT: 'number',
+	FOLLOWING_COUNT: 'number',
+	IS_CAT: 'boolean',
+	SEED: null,
+	YMD: 'string',
+	AISCRIPT_DISABLED: 'boolean',
+	NULL: null,
+};
+
+export class HpmlScope {
+	private layerdStates: Record<string, any>[];
+	public name: string;
+
+	constructor(layerdStates: HpmlScope['layerdStates'], name?: HpmlScope['name']) {
+		this.layerdStates = layerdStates;
+		this.name = name || 'anonymous';
+	}
+
+	@autobind
+	public createChildScope(states: Record<string, any>, name?: HpmlScope['name']): HpmlScope {
+		const layer = [states, ...this.layerdStates];
+		return new HpmlScope(layer, name);
+	}
+
+	/**
+	 * 指定した名前の変数の値を取得します
+	 * @param name 変数名
+	 */
+	@autobind
+	public getState(name: string): any {
+		for (const later of this.layerdStates) {
+			const state = later[name];
+			if (state !== undefined) {
+				return state;
+			}
+		}
+
+		throw new HpmlError(
+			`No such variable '${name}' in scope '${this.name}'`, {
+				scope: this.layerdStates,
+			});
+	}
+}
+
+export class HpmlError extends Error {
+	public info?: any;
+
+	constructor(message: string, info?: any) {
+		super(message);
+
+		this.info = info;
+
+		// Maintains proper stack trace for where our error was thrown (only available on V8)
+		if (Error.captureStackTrace) {
+			Error.captureStackTrace(this, HpmlError);
+		}
+	}
+}
diff --git a/packages/frontend/src/scripts/hpml/lib.ts b/packages/frontend/src/scripts/hpml/lib.ts
new file mode 100644
index 0000000000..b684876a7f
--- /dev/null
+++ b/packages/frontend/src/scripts/hpml/lib.ts
@@ -0,0 +1,247 @@
+import tinycolor from 'tinycolor2';
+import { Hpml } from './evaluator';
+import { values, utils } from '@syuilo/aiscript';
+import { Fn, HpmlScope } from '.';
+import { Expr } from './expr';
+import seedrandom from 'seedrandom';
+
+/* TODO: https://www.chartjs.org/docs/latest/configuration/canvas-background.html#color
+// https://stackoverflow.com/questions/38493564/chart-area-background-color-chartjs
+Chart.pluginService.register({
+	beforeDraw: (chart, easing) => {
+		if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
+			const ctx = chart.chart.ctx;
+			ctx.save();
+			ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
+			ctx.fillRect(0, 0, chart.chart.width, chart.chart.height);
+			ctx.restore();
+		}
+	}
+});
+*/
+
+export function initAiLib(hpml: Hpml) {
+	return {
+		'MkPages:updated': values.FN_NATIVE(([callback]) => {
+			hpml.pageVarUpdatedCallback = (callback as values.VFn);
+		}),
+		'MkPages:get_canvas': values.FN_NATIVE(([id]) => {
+			utils.assertString(id);
+			const canvas = hpml.canvases[id.value];
+			const ctx = canvas.getContext('2d');
+			return values.OBJ(new Map([
+				['clear_rect', values.FN_NATIVE(([x, y, width, height]) => { ctx.clearRect(x.value, y.value, width.value, height.value); })],
+				['fill_rect', values.FN_NATIVE(([x, y, width, height]) => { ctx.fillRect(x.value, y.value, width.value, height.value); })],
+				['stroke_rect', values.FN_NATIVE(([x, y, width, height]) => { ctx.strokeRect(x.value, y.value, width.value, height.value); })],
+				['fill_text', values.FN_NATIVE(([text, x, y, width]) => { ctx.fillText(text.value, x.value, y.value, width ? width.value : undefined); })],
+				['stroke_text', values.FN_NATIVE(([text, x, y, width]) => { ctx.strokeText(text.value, x.value, y.value, width ? width.value : undefined); })],
+				['set_line_width', values.FN_NATIVE(([width]) => { ctx.lineWidth = width.value; })],
+				['set_font', values.FN_NATIVE(([font]) => { ctx.font = font.value; })],
+				['set_fill_style', values.FN_NATIVE(([style]) => { ctx.fillStyle = style.value; })],
+				['set_stroke_style', values.FN_NATIVE(([style]) => { ctx.strokeStyle = style.value; })],
+				['begin_path', values.FN_NATIVE(() => { ctx.beginPath(); })],
+				['close_path', values.FN_NATIVE(() => { ctx.closePath(); })],
+				['move_to', values.FN_NATIVE(([x, y]) => { ctx.moveTo(x.value, y.value); })],
+				['line_to', values.FN_NATIVE(([x, y]) => { ctx.lineTo(x.value, y.value); })],
+				['arc', values.FN_NATIVE(([x, y, radius, startAngle, endAngle]) => { ctx.arc(x.value, y.value, radius.value, startAngle.value, endAngle.value); })],
+				['rect', values.FN_NATIVE(([x, y, width, height]) => { ctx.rect(x.value, y.value, width.value, height.value); })],
+				['fill', values.FN_NATIVE(() => { ctx.fill(); })],
+				['stroke', values.FN_NATIVE(() => { ctx.stroke(); })],
+			]));
+		}),
+		'MkPages:chart': values.FN_NATIVE(([id, opts]) => {
+			/* TODO
+			utils.assertString(id);
+			utils.assertObject(opts);
+			const canvas = hpml.canvases[id.value];
+			const color = getComputedStyle(document.documentElement).getPropertyValue('--accent');
+			Chart.defaults.color = '#555';
+			const chart = new Chart(canvas, {
+				type: opts.value.get('type').value,
+				data: {
+					labels: opts.value.get('labels').value.map(x => x.value),
+					datasets: opts.value.get('datasets').value.map(x => ({
+						label: x.value.has('label') ? x.value.get('label').value : '',
+						data: x.value.get('data').value.map(x => x.value),
+						pointRadius: 0,
+						lineTension: 0,
+						borderWidth: 2,
+						borderColor: x.value.has('color') ? x.value.get('color') : color,
+						backgroundColor: tinycolor(x.value.has('color') ? x.value.get('color') : color).setAlpha(0.1).toRgbString(),
+					}))
+				},
+				options: {
+					responsive: false,
+					devicePixelRatio: 1.5,
+					title: {
+						display: opts.value.has('title'),
+						text: opts.value.has('title') ? opts.value.get('title').value : '',
+						fontSize: 14,
+					},
+					layout: {
+						padding: {
+							left: 32,
+							right: 32,
+							top: opts.value.has('title') ? 16 : 32,
+							bottom: 16
+						}
+					},
+					legend: {
+						display: opts.value.get('datasets').value.filter(x => x.value.has('label') && x.value.get('label').value).length === 0 ? false : true,
+						position: 'bottom',
+						labels: {
+							boxWidth: 16,
+						}
+					},
+					tooltips: {
+						enabled: false,
+					},
+					chartArea: {
+						backgroundColor: '#fff'
+					},
+					...(opts.value.get('type').value === 'radar' ? {
+						scale: {
+							ticks: {
+								display: opts.value.has('show_tick_label') ? opts.value.get('show_tick_label').value : false,
+								min: opts.value.has('min') ? opts.value.get('min').value : undefined,
+								max: opts.value.has('max') ? opts.value.get('max').value : undefined,
+								maxTicksLimit: 8,
+							},
+							pointLabels: {
+								fontSize: 12
+							}
+						}
+					} : {
+						scales: {
+							yAxes: [{
+								ticks: {
+									display: opts.value.has('show_tick_label') ? opts.value.get('show_tick_label').value : true,
+									min: opts.value.has('min') ? opts.value.get('min').value : undefined,
+									max: opts.value.has('max') ? opts.value.get('max').value : undefined,
+								}
+							}]
+						}
+					})
+				}
+			});
+			*/
+		}),
+	};
+}
+
+export const funcDefs: Record<string, { in: any[]; out: any; category: string; icon: any; }> = {
+	if: { in: ['boolean', 0, 0], out: 0, category: 'flow', icon: 'ti ti-share' },
+	for: { in: ['number', 'function'], out: null, category: 'flow', icon: 'fas fa-recycle' },
+	not: { in: ['boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
+	or: { in: ['boolean', 'boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
+	and: { in: ['boolean', 'boolean'], out: 'boolean', category: 'logical', icon: 'fas fa-flag' },
+	add: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'ti ti-plus' },
+	subtract: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'ti ti-minus' },
+	multiply: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'ti ti-x' },
+	divide: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-divide' },
+	mod: { in: ['number', 'number'], out: 'number', category: 'operation', icon: 'fas fa-divide' },
+	round: { in: ['number'], out: 'number', category: 'operation', icon: 'fas fa-calculator' },
+	eq: { in: [0, 0], out: 'boolean', category: 'comparison', icon: 'fas fa-equals' },
+	notEq: { in: [0, 0], out: 'boolean', category: 'comparison', icon: 'fas fa-not-equal' },
+	gt: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-greater-than' },
+	lt: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-less-than' },
+	gtEq: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-greater-than-equal' },
+	ltEq: { in: ['number', 'number'], out: 'boolean', category: 'comparison', icon: 'fas fa-less-than-equal' },
+	strLen: { in: ['string'], out: 'number', category: 'text', icon: 'ti ti-quote' },
+	strPick: { in: ['string', 'number'], out: 'string', category: 'text', icon: 'ti ti-quote' },
+	strReplace: { in: ['string', 'string', 'string'], out: 'string', category: 'text', icon: 'ti ti-quote' },
+	strReverse: { in: ['string'], out: 'string', category: 'text', icon: 'ti ti-quote' },
+	join: { in: ['stringArray', 'string'], out: 'string', category: 'text', icon: 'ti ti-quote' },
+	stringToNumber: { in: ['string'], out: 'number', category: 'convert', icon: 'fas fa-exchange-alt' },
+	numberToString: { in: ['number'], out: 'string', category: 'convert', icon: 'fas fa-exchange-alt' },
+	splitStrByLine: { in: ['string'], out: 'stringArray', category: 'convert', icon: 'fas fa-exchange-alt' },
+	pick: { in: [null, 'number'], out: null, category: 'list', icon: 'fas fa-indent' },
+	listLen: { in: [null], out: 'number', category: 'list', icon: 'fas fa-indent' },
+	rannum: { in: ['number', 'number'], out: 'number', category: 'random', icon: 'fas fa-dice' },
+	dailyRannum: { in: ['number', 'number'], out: 'number', category: 'random', icon: 'fas fa-dice' },
+	seedRannum: { in: [null, 'number', 'number'], out: 'number', category: 'random', icon: 'fas fa-dice' },
+	random: { in: ['number'], out: 'boolean', category: 'random', icon: 'fas fa-dice' },
+	dailyRandom: { in: ['number'], out: 'boolean', category: 'random', icon: 'fas fa-dice' },
+	seedRandom: { in: [null, 'number'], out: 'boolean', category: 'random', icon: 'fas fa-dice' },
+	randomPick: { in: [0], out: 0, category: 'random', icon: 'fas fa-dice' },
+	dailyRandomPick: { in: [0], out: 0, category: 'random', icon: 'fas fa-dice' },
+	seedRandomPick: { in: [null, 0], out: 0, category: 'random', icon: 'fas fa-dice' },
+	DRPWPM: { in: ['stringArray'], out: 'string', category: 'random', icon: 'fas fa-dice' }, // dailyRandomPickWithProbabilityMapping
+};
+
+export function initHpmlLib(expr: Expr, scope: HpmlScope, randomSeed: string, visitor?: any) {
+	const date = new Date();
+	const day = `${visitor ? visitor.id : ''} ${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+
+	// SHOULD be fine to ignore since it's intended + function shape isn't defined
+	// eslint-disable-next-line @typescript-eslint/ban-types
+	const funcs: Record<string, Function> = {
+		not: (a: boolean) => !a,
+		or: (a: boolean, b: boolean) => a || b,
+		and: (a: boolean, b: boolean) => a && b,
+		eq: (a: any, b: any) => a === b,
+		notEq: (a: any, b: any) => a !== b,
+		gt: (a: number, b: number) => a > b,
+		lt: (a: number, b: number) => a < b,
+		gtEq: (a: number, b: number) => a >= b,
+		ltEq: (a: number, b: number) => a <= b,
+		if: (bool: boolean, a: any, b: any) => bool ? a : b,
+		for: (times: number, fn: Fn) => {
+			const result: any[] = [];
+			for (let i = 0; i < times; i++) {
+				result.push(fn.exec({
+					[fn.slots[0]]: i + 1,
+				}));
+			}
+			return result;
+		},
+		add: (a: number, b: number) => a + b,
+		subtract: (a: number, b: number) => a - b,
+		multiply: (a: number, b: number) => a * b,
+		divide: (a: number, b: number) => a / b,
+		mod: (a: number, b: number) => a % b,
+		round: (a: number) => Math.round(a),
+		strLen: (a: string) => a.length,
+		strPick: (a: string, b: number) => a[b - 1],
+		strReplace: (a: string, b: string, c: string) => a.split(b).join(c),
+		strReverse: (a: string) => a.split('').reverse().join(''),
+		join: (texts: string[], separator: string) => texts.join(separator || ''),
+		stringToNumber: (a: string) => parseInt(a),
+		numberToString: (a: number) => a.toString(),
+		splitStrByLine: (a: string) => a.split('\n'),
+		pick: (list: any[], i: number) => list[i - 1],
+		listLen: (list: any[]) => list.length,
+		random: (probability: number) => Math.floor(seedrandom(`${randomSeed}:${expr.id}`)() * 100) < probability,
+		rannum: (min: number, max: number) => min + Math.floor(seedrandom(`${randomSeed}:${expr.id}`)() * (max - min + 1)),
+		randomPick: (list: any[]) => list[Math.floor(seedrandom(`${randomSeed}:${expr.id}`)() * list.length)],
+		dailyRandom: (probability: number) => Math.floor(seedrandom(`${day}:${expr.id}`)() * 100) < probability,
+		dailyRannum: (min: number, max: number) => min + Math.floor(seedrandom(`${day}:${expr.id}`)() * (max - min + 1)),
+		dailyRandomPick: (list: any[]) => list[Math.floor(seedrandom(`${day}:${expr.id}`)() * list.length)],
+		seedRandom: (seed: any, probability: number) => Math.floor(seedrandom(seed)() * 100) < probability,
+		seedRannum: (seed: any, min: number, max: number) => min + Math.floor(seedrandom(seed)() * (max - min + 1)),
+		seedRandomPick: (seed: any, list: any[]) => list[Math.floor(seedrandom(seed)() * list.length)],
+		DRPWPM: (list: string[]) => {
+			const xs: any[] = [];
+			let totalFactor = 0;
+			for (const x of list) {
+				const parts = x.split(' ');
+				const factor = parseInt(parts.pop()!, 10);
+				const text = parts.join(' ');
+				totalFactor += factor;
+				xs.push({ factor, text });
+			}
+			const r = seedrandom(`${day}:${expr.id}`)() * totalFactor;
+			let stackedFactor = 0;
+			for (const x of xs) {
+				if (r >= stackedFactor && r <= stackedFactor + x.factor) {
+					return x.text;
+				} else {
+					stackedFactor += x.factor;
+				}
+			}
+			return xs[0].text;
+		},
+	};
+
+	return funcs;
+}
diff --git a/packages/frontend/src/scripts/hpml/type-checker.ts b/packages/frontend/src/scripts/hpml/type-checker.ts
new file mode 100644
index 0000000000..24c9ed8bcb
--- /dev/null
+++ b/packages/frontend/src/scripts/hpml/type-checker.ts
@@ -0,0 +1,191 @@
+import autobind from 'autobind-decorator';
+import { isLiteralValue } from './expr';
+import { funcDefs } from './lib';
+import { envVarsDef } from '.';
+import type { Type, PageVar } from '.';
+import type { Expr, Variable } from './expr';
+
+type TypeError = {
+	arg: number;
+	expect: Type;
+	actual: Type;
+};
+
+/**
+ * Hpml type checker
+ */
+export class HpmlTypeChecker {
+	public variables: Variable[];
+	public pageVars: PageVar[];
+
+	constructor(variables: HpmlTypeChecker['variables'] = [], pageVars: HpmlTypeChecker['pageVars'] = []) {
+		this.variables = variables;
+		this.pageVars = pageVars;
+	}
+
+	@autobind
+	public typeCheck(v: Expr): TypeError | null {
+		if (isLiteralValue(v)) return null;
+
+		const def = funcDefs[v.type || ''];
+		if (def == null) {
+			throw new Error('Unknown type: ' + v.type);
+		}
+
+		const generic: Type[] = [];
+
+		for (let i = 0; i < def.in.length; i++) {
+			const arg = def.in[i];
+			const type = this.infer(v.args[i]);
+			if (type === null) continue;
+
+			if (typeof arg === 'number') {
+				if (generic[arg] === undefined) {
+					generic[arg] = type;
+				} else if (type !== generic[arg]) {
+					return {
+						arg: i,
+						expect: generic[arg],
+						actual: type,
+					};
+				}
+			} else if (type !== arg) {
+				return {
+					arg: i,
+					expect: arg,
+					actual: type,
+				};
+			}
+		}
+
+		return null;
+	}
+
+	@autobind
+	public getExpectedType(v: Expr, slot: number): Type {
+		const def = funcDefs[v.type || ''];
+		if (def == null) {
+			throw new Error('Unknown type: ' + v.type);
+		}
+
+		const generic: Type[] = [];
+
+		for (let i = 0; i < def.in.length; i++) {
+			const arg = def.in[i];
+			const type = this.infer(v.args[i]);
+			if (type === null) continue;
+
+			if (typeof arg === 'number') {
+				if (generic[arg] === undefined) {
+					generic[arg] = type;
+				}
+			}
+		}
+
+		if (typeof def.in[slot] === 'number') {
+			return generic[def.in[slot]] ?? null;
+		} else {
+			return def.in[slot];
+		}
+	}
+
+	@autobind
+	public infer(v: Expr): Type {
+		if (v.type === null) return null;
+		if (v.type === 'text') return 'string';
+		if (v.type === 'multiLineText') return 'string';
+		if (v.type === 'textList') return 'stringArray';
+		if (v.type === 'number') return 'number';
+		if (v.type === 'ref') {
+			const variable = this.variables.find(va => va.name === v.value);
+			if (variable) {
+				return this.infer(variable);
+			}
+
+			const pageVar = this.pageVars.find(va => va.name === v.value);
+			if (pageVar) {
+				return pageVar.type;
+			}
+
+			const envVar = envVarsDef[v.value || ''];
+			if (envVar !== undefined) {
+				return envVar;
+			}
+
+			return null;
+		}
+		if (v.type === 'aiScriptVar') return null;
+		if (v.type === 'fn') return null; // todo
+		if (v.type.startsWith('fn:')) return null; // todo
+
+		const generic: Type[] = [];
+
+		const def = funcDefs[v.type];
+
+		for (let i = 0; i < def.in.length; i++) {
+			const arg = def.in[i];
+			if (typeof arg === 'number') {
+				const type = this.infer(v.args[i]);
+
+				if (generic[arg] === undefined) {
+					generic[arg] = type;
+				} else {
+					if (type !== generic[arg]) {
+						generic[arg] = null;
+					}
+				}
+			}
+		}
+
+		if (typeof def.out === 'number') {
+			return generic[def.out];
+		} else {
+			return def.out;
+		}
+	}
+
+	@autobind
+	public getVarByName(name: string): Variable {
+		const v = this.variables.find(x => x.name === name);
+		if (v !== undefined) {
+			return v;
+		} else {
+			throw new Error(`No such variable '${name}'`);
+		}
+	}
+
+	@autobind
+	public getVarsByType(type: Type): Variable[] {
+		if (type == null) return this.variables;
+		return this.variables.filter(x => (this.infer(x) === null) || (this.infer(x) === type));
+	}
+
+	@autobind
+	public getEnvVarsByType(type: Type): string[] {
+		if (type == null) return Object.keys(envVarsDef);
+		return Object.entries(envVarsDef).filter(([k, v]) => v === null || type === v).map(([k, v]) => k);
+	}
+
+	@autobind
+	public getPageVarsByType(type: Type): string[] {
+		if (type == null) return this.pageVars.map(v => v.name);
+		return this.pageVars.filter(v => type === v.type).map(v => v.name);
+	}
+
+	@autobind
+	public isUsedName(name: string) {
+		if (this.variables.some(v => v.name === name)) {
+			return true;
+		}
+
+		if (this.pageVars.some(v => v.name === name)) {
+			return true;
+		}
+
+		if (envVarsDef[name]) {
+			return true;
+		}
+
+		return false;
+	}
+}
diff --git a/packages/frontend/src/scripts/i18n.ts b/packages/frontend/src/scripts/i18n.ts
new file mode 100644
index 0000000000..54184386da
--- /dev/null
+++ b/packages/frontend/src/scripts/i18n.ts
@@ -0,0 +1,29 @@
+export class I18n<T extends Record<string, any>> {
+	public ts: T;
+
+	constructor(locale: T) {
+		this.ts = locale;
+
+		//#region BIND
+		this.t = this.t.bind(this);
+		//#endregion
+	}
+
+	// string にしているのは、ドット区切りでのパス指定を許可するため
+	// なるべくこのメソッド使うよりもlocale直接参照の方がvueのキャッシュ効いてパフォーマンスが良いかも
+	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.toString());
+				}
+			}
+			return str;
+		} catch (err) {
+			console.warn(`missing localization '${key}'`);
+			return key;
+		}
+	}
+}
diff --git a/packages/frontend/src/scripts/idb-proxy.ts b/packages/frontend/src/scripts/idb-proxy.ts
new file mode 100644
index 0000000000..77bb84463c
--- /dev/null
+++ b/packages/frontend/src/scripts/idb-proxy.ts
@@ -0,0 +1,36 @@
+// FirefoxのプライベートモードなどではindexedDBが使用不可能なので、
+// indexedDBが使えない環境ではlocalStorageを使う
+import {
+	get as iget,
+	set as iset,
+	del as idel,
+} from 'idb-keyval';
+
+const fallbackName = (key: string) => `idbfallback::${key}`;
+
+let idbAvailable = typeof window !== 'undefined' ? !!window.indexedDB : true;
+
+if (idbAvailable) {
+	iset('idb-test', 'test').catch(err => {
+		console.error('idb error', err);
+		console.error('indexedDB is unavailable. It will use localStorage.');
+		idbAvailable = false;
+	});
+} else {
+	console.error('indexedDB is unavailable. It will use localStorage.');
+}
+
+export async function get(key: string) {
+	if (idbAvailable) return iget(key);
+	return JSON.parse(localStorage.getItem(fallbackName(key)));
+}
+
+export async function set(key: string, val: any) {
+	if (idbAvailable) return iset(key, val);
+	return localStorage.setItem(fallbackName(key), JSON.stringify(val));
+}
+
+export async function del(key: string) {
+	if (idbAvailable) return idel(key);
+	return localStorage.removeItem(fallbackName(key));
+}
diff --git a/packages/frontend/src/scripts/initialize-sw.ts b/packages/frontend/src/scripts/initialize-sw.ts
new file mode 100644
index 0000000000..de52f30523
--- /dev/null
+++ b/packages/frontend/src/scripts/initialize-sw.ts
@@ -0,0 +1,13 @@
+import { lang } from '@/config';
+
+export async function initializeSw() {
+	if (!('serviceWorker' in navigator)) return;
+
+	navigator.serviceWorker.register(`/sw.js`, { scope: '/', type: 'classic' });
+	navigator.serviceWorker.ready.then(registration => {
+		registration.active?.postMessage({
+			msg: 'initialize',
+			lang,
+		});
+	});
+}
diff --git a/packages/frontend/src/scripts/is-device-darkmode.ts b/packages/frontend/src/scripts/is-device-darkmode.ts
new file mode 100644
index 0000000000..854f38e517
--- /dev/null
+++ b/packages/frontend/src/scripts/is-device-darkmode.ts
@@ -0,0 +1,3 @@
+export function isDeviceDarkmode() {
+	return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
diff --git a/packages/frontend/src/scripts/keycode.ts b/packages/frontend/src/scripts/keycode.ts
new file mode 100644
index 0000000000..69f6a82803
--- /dev/null
+++ b/packages/frontend/src/scripts/keycode.ts
@@ -0,0 +1,33 @@
+export default (input: string): string[] => {
+	if (Object.keys(aliases).some(a => a.toLowerCase() === input.toLowerCase())) {
+		const codes = aliases[input];
+		return Array.isArray(codes) ? codes : [codes];
+	} else {
+		return [input];
+	}
+};
+
+export const aliases = {
+	'esc': 'Escape',
+	'enter': ['Enter', 'NumpadEnter'],
+	'up': 'ArrowUp',
+	'down': 'ArrowDown',
+	'left': 'ArrowLeft',
+	'right': 'ArrowRight',
+	'plus': ['NumpadAdd', 'Semicolon'],
+};
+
+/*!
+* Programmatically add the following
+*/
+
+// lower case chars
+for (let i = 97; i < 123; i++) {
+	const char = String.fromCharCode(i);
+	aliases[char] = `Key${char.toUpperCase()}`;
+}
+
+// numbers
+for (let i = 0; i < 10; i++) {
+	aliases[i] = [`Numpad${i}`, `Digit${i}`];
+}
diff --git a/packages/frontend/src/scripts/langmap.ts b/packages/frontend/src/scripts/langmap.ts
new file mode 100644
index 0000000000..25f5b366c8
--- /dev/null
+++ b/packages/frontend/src/scripts/langmap.ts
@@ -0,0 +1,666 @@
+// TODO: sharedに置いてバックエンドのと統合したい
+export const langmap = {
+	'ach': {
+		nativeName: 'Lwo',
+	},
+	'ady': {
+		nativeName: 'Адыгэбзэ',
+	},
+	'af': {
+		nativeName: 'Afrikaans',
+	},
+	'af-NA': {
+		nativeName: 'Afrikaans (Namibia)',
+	},
+	'af-ZA': {
+		nativeName: 'Afrikaans (South Africa)',
+	},
+	'ak': {
+		nativeName: 'Tɕɥi',
+	},
+	'ar': {
+		nativeName: 'العربية',
+	},
+	'ar-AR': {
+		nativeName: 'العربية',
+	},
+	'ar-MA': {
+		nativeName: 'العربية',
+	},
+	'ar-SA': {
+		nativeName: 'العربية (السعودية)',
+	},
+	'ay-BO': {
+		nativeName: 'Aymar aru',
+	},
+	'az': {
+		nativeName: 'Azərbaycan dili',
+	},
+	'az-AZ': {
+		nativeName: 'Azərbaycan dili',
+	},
+	'be-BY': {
+		nativeName: 'Беларуская',
+	},
+	'bg': {
+		nativeName: 'Български',
+	},
+	'bg-BG': {
+		nativeName: 'Български',
+	},
+	'bn': {
+		nativeName: 'বাংলা',
+	},
+	'bn-IN': {
+		nativeName: 'বাংলা (ভারত)',
+	},
+	'bn-BD': {
+		nativeName: 'বাংলা(বাংলাদেশ)',
+	},
+	'br': {
+		nativeName: 'Brezhoneg',
+	},
+	'bs-BA': {
+		nativeName: 'Bosanski',
+	},
+	'ca': {
+		nativeName: 'Català',
+	},
+	'ca-ES': {
+		nativeName: 'Català',
+	},
+	'cak': {
+		nativeName: 'Maya Kaqchikel',
+	},
+	'ck-US': {
+		nativeName: 'ᏣᎳᎩ (tsalagi)',
+	},
+	'cs': {
+		nativeName: 'Čeština',
+	},
+	'cs-CZ': {
+		nativeName: 'Čeština',
+	},
+	'cy': {
+		nativeName: 'Cymraeg',
+	},
+	'cy-GB': {
+		nativeName: 'Cymraeg',
+	},
+	'da': {
+		nativeName: 'Dansk',
+	},
+	'da-DK': {
+		nativeName: 'Dansk',
+	},
+	'de': {
+		nativeName: 'Deutsch',
+	},
+	'de-AT': {
+		nativeName: 'Deutsch (Österreich)',
+	},
+	'de-DE': {
+		nativeName: 'Deutsch (Deutschland)',
+	},
+	'de-CH': {
+		nativeName: 'Deutsch (Schweiz)',
+	},
+	'dsb': {
+		nativeName: 'Dolnoserbšćina',
+	},
+	'el': {
+		nativeName: 'Ελληνικά',
+	},
+	'el-GR': {
+		nativeName: 'Ελληνικά',
+	},
+	'en': {
+		nativeName: 'English',
+	},
+	'en-GB': {
+		nativeName: 'English (UK)',
+	},
+	'en-AU': {
+		nativeName: 'English (Australia)',
+	},
+	'en-CA': {
+		nativeName: 'English (Canada)',
+	},
+	'en-IE': {
+		nativeName: 'English (Ireland)',
+	},
+	'en-IN': {
+		nativeName: 'English (India)',
+	},
+	'en-PI': {
+		nativeName: 'English (Pirate)',
+	},
+	'en-SG': {
+		nativeName: 'English (Singapore)',
+	},
+	'en-UD': {
+		nativeName: 'English (Upside Down)',
+	},
+	'en-US': {
+		nativeName: 'English (US)',
+	},
+	'en-ZA': {
+		nativeName: 'English (South Africa)',
+	},
+	'en@pirate': {
+		nativeName: 'English (Pirate)',
+	},
+	'eo': {
+		nativeName: 'Esperanto',
+	},
+	'eo-EO': {
+		nativeName: 'Esperanto',
+	},
+	'es': {
+		nativeName: 'Español',
+	},
+	'es-AR': {
+		nativeName: 'Español (Argentine)',
+	},
+	'es-419': {
+		nativeName: 'Español (Latinoamérica)',
+	},
+	'es-CL': {
+		nativeName: 'Español (Chile)',
+	},
+	'es-CO': {
+		nativeName: 'Español (Colombia)',
+	},
+	'es-EC': {
+		nativeName: 'Español (Ecuador)',
+	},
+	'es-ES': {
+		nativeName: 'Español (España)',
+	},
+	'es-LA': {
+		nativeName: 'Español (Latinoamérica)',
+	},
+	'es-NI': {
+		nativeName: 'Español (Nicaragua)',
+	},
+	'es-MX': {
+		nativeName: 'Español (México)',
+	},
+	'es-US': {
+		nativeName: 'Español (Estados Unidos)',
+	},
+	'es-VE': {
+		nativeName: 'Español (Venezuela)',
+	},
+	'et': {
+		nativeName: 'eesti keel',
+	},
+	'et-EE': {
+		nativeName: 'Eesti (Estonia)',
+	},
+	'eu': {
+		nativeName: 'Euskara',
+	},
+	'eu-ES': {
+		nativeName: 'Euskara',
+	},
+	'fa': {
+		nativeName: 'فارسی',
+	},
+	'fa-IR': {
+		nativeName: 'فارسی',
+	},
+	'fb-LT': {
+		nativeName: 'Leet Speak',
+	},
+	'ff': {
+		nativeName: 'Fulah',
+	},
+	'fi': {
+		nativeName: 'Suomi',
+	},
+	'fi-FI': {
+		nativeName: 'Suomi',
+	},
+	'fo': {
+		nativeName: 'Føroyskt',
+	},
+	'fo-FO': {
+		nativeName: 'Føroyskt (Færeyjar)',
+	},
+	'fr': {
+		nativeName: 'Français',
+	},
+	'fr-CA': {
+		nativeName: 'Français (Canada)',
+	},
+	'fr-FR': {
+		nativeName: 'Français (France)',
+	},
+	'fr-BE': {
+		nativeName: 'Français (Belgique)',
+	},
+	'fr-CH': {
+		nativeName: 'Français (Suisse)',
+	},
+	'fy-NL': {
+		nativeName: 'Frysk',
+	},
+	'ga': {
+		nativeName: 'Gaeilge',
+	},
+	'ga-IE': {
+		nativeName: 'Gaeilge',
+	},
+	'gd': {
+		nativeName: 'Gàidhlig',
+	},
+	'gl': {
+		nativeName: 'Galego',
+	},
+	'gl-ES': {
+		nativeName: 'Galego',
+	},
+	'gn-PY': {
+		nativeName: 'Avañe\'ẽ',
+	},
+	'gu-IN': {
+		nativeName: 'ગુજરાતી',
+	},
+	'gv': {
+		nativeName: 'Gaelg',
+	},
+	'gx-GR': {
+		nativeName: 'Ἑλληνική ἀρχαία',
+	},
+	'he': {
+		nativeName: 'עברית‏',
+	},
+	'he-IL': {
+		nativeName: 'עברית‏',
+	},
+	'hi': {
+		nativeName: 'हिन्दी',
+	},
+	'hi-IN': {
+		nativeName: 'हिन्दी',
+	},
+	'hr': {
+		nativeName: 'Hrvatski',
+	},
+	'hr-HR': {
+		nativeName: 'Hrvatski',
+	},
+	'hsb': {
+		nativeName: 'Hornjoserbšćina',
+	},
+	'ht': {
+		nativeName: 'Kreyòl',
+	},
+	'hu': {
+		nativeName: 'Magyar',
+	},
+	'hu-HU': {
+		nativeName: 'Magyar',
+	},
+	'hy': {
+		nativeName: 'Հայերեն',
+	},
+	'hy-AM': {
+		nativeName: 'Հայերեն (Հայաստան)',
+	},
+	'id': {
+		nativeName: 'Bahasa Indonesia',
+	},
+	'id-ID': {
+		nativeName: 'Bahasa Indonesia',
+	},
+	'is': {
+		nativeName: 'Íslenska',
+	},
+	'is-IS': {
+		nativeName: 'Íslenska (Iceland)',
+	},
+	'it': {
+		nativeName: 'Italiano',
+	},
+	'it-IT': {
+		nativeName: 'Italiano',
+	},
+	'ja': {
+		nativeName: '日本語',
+	},
+	'ja-JP': {
+		nativeName: '日本語 (日本)',
+	},
+	'jv-ID': {
+		nativeName: 'Basa Jawa',
+	},
+	'ka-GE': {
+		nativeName: 'ქართული',
+	},
+	'kk-KZ': {
+		nativeName: 'Қазақша',
+	},
+	'km': {
+		nativeName: 'ភាសាខ្មែរ',
+	},
+	'kl': {
+		nativeName: 'kalaallisut',
+	},
+	'km-KH': {
+		nativeName: 'ភាសាខ្មែរ',
+	},
+	'kab': {
+		nativeName: 'Taqbaylit',
+	},
+	'kn': {
+		nativeName: 'ಕನ್ನಡ',
+	},
+	'kn-IN': {
+		nativeName: 'ಕನ್ನಡ (India)',
+	},
+	'ko': {
+		nativeName: '한국어',
+	},
+	'ko-KR': {
+		nativeName: '한국어 (한국)',
+	},
+	'ku-TR': {
+		nativeName: 'Kurdî',
+	},
+	'kw': {
+		nativeName: 'Kernewek',
+	},
+	'la': {
+		nativeName: 'Latin',
+	},
+	'la-VA': {
+		nativeName: 'Latin',
+	},
+	'lb': {
+		nativeName: 'Lëtzebuergesch',
+	},
+	'li-NL': {
+		nativeName: 'Lèmbörgs',
+	},
+	'lt': {
+		nativeName: 'Lietuvių',
+	},
+	'lt-LT': {
+		nativeName: 'Lietuvių',
+	},
+	'lv': {
+		nativeName: 'Latviešu',
+	},
+	'lv-LV': {
+		nativeName: 'Latviešu',
+	},
+	'mai': {
+		nativeName: 'मैथिली, মৈথিলী',
+	},
+	'mg-MG': {
+		nativeName: 'Malagasy',
+	},
+	'mk': {
+		nativeName: 'Македонски',
+	},
+	'mk-MK': {
+		nativeName: 'Македонски (Македонски)',
+	},
+	'ml': {
+		nativeName: 'മലയാളം',
+	},
+	'ml-IN': {
+		nativeName: 'മലയാളം',
+	},
+	'mn-MN': {
+		nativeName: 'Монгол',
+	},
+	'mr': {
+		nativeName: 'मराठी',
+	},
+	'mr-IN': {
+		nativeName: 'मराठी',
+	},
+	'ms': {
+		nativeName: 'Bahasa Melayu',
+	},
+	'ms-MY': {
+		nativeName: 'Bahasa Melayu',
+	},
+	'mt': {
+		nativeName: 'Malti',
+	},
+	'mt-MT': {
+		nativeName: 'Malti',
+	},
+	'my': {
+		nativeName: 'ဗမာစကာ',
+	},
+	'no': {
+		nativeName: 'Norsk',
+	},
+	'nb': {
+		nativeName: 'Norsk (bokmål)',
+	},
+	'nb-NO': {
+		nativeName: 'Norsk (bokmål)',
+	},
+	'ne': {
+		nativeName: 'नेपाली',
+	},
+	'ne-NP': {
+		nativeName: 'नेपाली',
+	},
+	'nl': {
+		nativeName: 'Nederlands',
+	},
+	'nl-BE': {
+		nativeName: 'Nederlands (België)',
+	},
+	'nl-NL': {
+		nativeName: 'Nederlands (Nederland)',
+	},
+	'nn-NO': {
+		nativeName: 'Norsk (nynorsk)',
+	},
+	'oc': {
+		nativeName: 'Occitan',
+	},
+	'or-IN': {
+		nativeName: 'ଓଡ଼ିଆ',
+	},
+	'pa': {
+		nativeName: 'ਪੰਜਾਬੀ',
+	},
+	'pa-IN': {
+		nativeName: 'ਪੰਜਾਬੀ (ਭਾਰਤ ਨੂੰ)',
+	},
+	'pl': {
+		nativeName: 'Polski',
+	},
+	'pl-PL': {
+		nativeName: 'Polski',
+	},
+	'ps-AF': {
+		nativeName: 'پښتو',
+	},
+	'pt': {
+		nativeName: 'Português',
+	},
+	'pt-BR': {
+		nativeName: 'Português (Brasil)',
+	},
+	'pt-PT': {
+		nativeName: 'Português (Portugal)',
+	},
+	'qu-PE': {
+		nativeName: 'Qhichwa',
+	},
+	'rm-CH': {
+		nativeName: 'Rumantsch',
+	},
+	'ro': {
+		nativeName: 'Română',
+	},
+	'ro-RO': {
+		nativeName: 'Română',
+	},
+	'ru': {
+		nativeName: 'Русский',
+	},
+	'ru-RU': {
+		nativeName: 'Русский',
+	},
+	'sa-IN': {
+		nativeName: 'संस्कृतम्',
+	},
+	'se-NO': {
+		nativeName: 'Davvisámegiella',
+	},
+	'sh': {
+		nativeName: 'српскохрватски',
+	},
+	'si-LK': {
+		nativeName: 'සිංහල',
+	},
+	'sk': {
+		nativeName: 'Slovenčina',
+	},
+	'sk-SK': {
+		nativeName: 'Slovenčina (Slovakia)',
+	},
+	'sl': {
+		nativeName: 'Slovenščina',
+	},
+	'sl-SI': {
+		nativeName: 'Slovenščina',
+	},
+	'so-SO': {
+		nativeName: 'Soomaaliga',
+	},
+	'sq': {
+		nativeName: 'Shqip',
+	},
+	'sq-AL': {
+		nativeName: 'Shqip',
+	},
+	'sr': {
+		nativeName: 'Српски',
+	},
+	'sr-RS': {
+		nativeName: 'Српски (Serbia)',
+	},
+	'su': {
+		nativeName: 'Basa Sunda',
+	},
+	'sv': {
+		nativeName: 'Svenska',
+	},
+	'sv-SE': {
+		nativeName: 'Svenska',
+	},
+	'sw': {
+		nativeName: 'Kiswahili',
+	},
+	'sw-KE': {
+		nativeName: 'Kiswahili',
+	},
+	'ta': {
+		nativeName: 'தமிழ்',
+	},
+	'ta-IN': {
+		nativeName: 'தமிழ்',
+	},
+	'te': {
+		nativeName: 'తెలుగు',
+	},
+	'te-IN': {
+		nativeName: 'తెలుగు',
+	},
+	'tg': {
+		nativeName: 'забо́ни тоҷикӣ́',
+	},
+	'tg-TJ': {
+		nativeName: 'тоҷикӣ',
+	},
+	'th': {
+		nativeName: 'ภาษาไทย',
+	},
+	'th-TH': {
+		nativeName: 'ภาษาไทย (ประเทศไทย)',
+	},
+	'fil': {
+		nativeName: 'Filipino',
+	},
+	'tlh': {
+		nativeName: 'tlhIngan-Hol',
+	},
+	'tr': {
+		nativeName: 'Türkçe',
+	},
+	'tr-TR': {
+		nativeName: 'Türkçe',
+	},
+	'tt-RU': {
+		nativeName: 'татарча',
+	},
+	'uk': {
+		nativeName: 'Українська',
+	},
+	'uk-UA': {
+		nativeName: 'Українська',
+	},
+	'ur': {
+		nativeName: 'اردو',
+	},
+	'ur-PK': {
+		nativeName: 'اردو',
+	},
+	'uz': {
+		nativeName: 'O\'zbek',
+	},
+	'uz-UZ': {
+		nativeName: 'O\'zbek',
+	},
+	'vi': {
+		nativeName: 'Tiếng Việt',
+	},
+	'vi-VN': {
+		nativeName: 'Tiếng Việt',
+	},
+	'xh-ZA': {
+		nativeName: 'isiXhosa',
+	},
+	'yi': {
+		nativeName: 'ייִדיש',
+	},
+	'yi-DE': {
+		nativeName: 'ייִדיש (German)',
+	},
+	'zh': {
+		nativeName: '中文',
+	},
+	'zh-Hans': {
+		nativeName: '中文简体',
+	},
+	'zh-Hant': {
+		nativeName: '中文繁體',
+	},
+	'zh-CN': {
+		nativeName: '中文（中国大陆）',
+	},
+	'zh-HK': {
+		nativeName: '中文（香港）',
+	},
+	'zh-SG': {
+		nativeName: '中文（新加坡）',
+	},
+	'zh-TW': {
+		nativeName: '中文（台灣）',
+	},
+	'zu-ZA': {
+		nativeName: 'isiZulu',
+	},
+};
diff --git a/packages/frontend/src/scripts/login-id.ts b/packages/frontend/src/scripts/login-id.ts
new file mode 100644
index 0000000000..0f9c6be4a9
--- /dev/null
+++ b/packages/frontend/src/scripts/login-id.ts
@@ -0,0 +1,11 @@
+export function getUrlWithLoginId(url: string, loginId: string) {
+	const u = new URL(url, origin);
+	u.searchParams.append('loginId', loginId);
+	return u.toString();
+}
+
+export function getUrlWithoutLoginId(url: string) {
+	const u = new URL(url);
+	u.searchParams.delete('loginId');
+	return u.toString();
+}
diff --git a/packages/frontend/src/scripts/lookup-user.ts b/packages/frontend/src/scripts/lookup-user.ts
new file mode 100644
index 0000000000..3ab9d55300
--- /dev/null
+++ b/packages/frontend/src/scripts/lookup-user.ts
@@ -0,0 +1,36 @@
+import * as Acct from 'misskey-js/built/acct';
+import { i18n } from '@/i18n';
+import * as os from '@/os';
+
+export async function lookupUser() {
+	const { canceled, result } = await os.inputText({
+		title: i18n.ts.usernameOrUserId,
+	});
+	if (canceled) return;
+
+	const show = (user) => {
+		os.pageWindow(`/user-info/${user.id}`);
+	};
+
+	const usernamePromise = os.api('users/show', Acct.parse(result));
+	const idPromise = os.api('users/show', { userId: result });
+	let _notFound = false;
+	const notFound = () => {
+		if (_notFound) {
+			os.alert({
+				type: 'error',
+				text: i18n.ts.noSuchUser,
+			});
+		} else {
+			_notFound = true;
+		}
+	};
+	usernamePromise.then(show).catch(err => {
+		if (err.code === 'NO_SUCH_USER') {
+			notFound();
+		}
+	});
+	idPromise.then(show).catch(err => {
+		notFound();
+	});
+}
diff --git a/packages/frontend/src/scripts/media-proxy.ts b/packages/frontend/src/scripts/media-proxy.ts
new file mode 100644
index 0000000000..aaf7f9e610
--- /dev/null
+++ b/packages/frontend/src/scripts/media-proxy.ts
@@ -0,0 +1,15 @@
+import { query } from '@/scripts/url';
+import { url } from '@/config';
+
+export function getProxiedImageUrl(imageUrl: string, type?: 'preview'): string {
+	return `${url}/proxy/image.webp?${query({
+		url: imageUrl,
+		fallback: '1',
+		...(type ? { [type]: '1' } : {}),
+	})}`;
+}
+
+export function getProxiedImageUrlNullable(imageUrl: string | null | undefined, type?: 'preview'): string | null {
+	if (imageUrl == null) return null;
+	return getProxiedImageUrl(imageUrl, type);
+}
diff --git a/packages/frontend/src/scripts/mfm-tags.ts b/packages/frontend/src/scripts/mfm-tags.ts
new file mode 100644
index 0000000000..18e8d7038a
--- /dev/null
+++ b/packages/frontend/src/scripts/mfm-tags.ts
@@ -0,0 +1 @@
+export const MFM_TAGS = ['tada', 'jelly', 'twitch', 'shake', 'spin', 'jump', 'bounce', 'flip', 'x2', 'x3', 'x4', 'font', 'blur', 'rainbow', 'sparkle', 'rotate'];
diff --git a/packages/frontend/src/scripts/page-metadata.ts b/packages/frontend/src/scripts/page-metadata.ts
new file mode 100644
index 0000000000..0db8369f9d
--- /dev/null
+++ b/packages/frontend/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/frontend/src/scripts/physics.ts b/packages/frontend/src/scripts/physics.ts
new file mode 100644
index 0000000000..efda80f074
--- /dev/null
+++ b/packages/frontend/src/scripts/physics.ts
@@ -0,0 +1,152 @@
+import * as Matter from 'matter-js';
+
+export function physics(container: HTMLElement) {
+	const containerWidth = container.offsetWidth;
+	const containerHeight = container.offsetHeight;
+	const containerCenterX = containerWidth / 2;
+
+	// サイズ固定化(要らないかも？)
+	container.style.position = 'relative';
+	container.style.boxSizing = 'border-box';
+	container.style.width = `${containerWidth}px`;
+	container.style.height = `${containerHeight}px`;
+
+	// create engine
+	const engine = Matter.Engine.create({
+		constraintIterations: 4,
+		positionIterations: 8,
+		velocityIterations: 8,
+	});
+
+	const world = engine.world;
+
+	// create renderer
+	const render = Matter.Render.create({
+		engine: engine,
+		//element: document.getElementById('debug'),
+		options: {
+			width: containerWidth,
+			height: containerHeight,
+			background: 'transparent', // transparent to hide
+			wireframeBackground: 'transparent', // transparent to hide
+		},
+	});
+
+	// Disable to hide debug
+	Matter.Render.run(render);
+
+	// create runner
+	const runner = Matter.Runner.create();
+	Matter.Runner.run(runner, engine);
+
+	const groundThickness = 1024;
+	const ground = Matter.Bodies.rectangle(containerCenterX, containerHeight + (groundThickness / 2), containerWidth, groundThickness, {
+		isStatic: true,
+		restitution: 0.1,
+		friction: 2,
+	});
+
+	//const wallRight = Matter.Bodies.rectangle(window.innerWidth+50, window.innerHeight/2, 100, window.innerHeight, wallopts);
+	//const wallLeft = Matter.Bodies.rectangle(-50, window.innerHeight/2, 100, window.innerHeight, wallopts);
+
+	Matter.World.add(world, [
+		ground,
+		//wallRight,
+		//wallLeft,
+	]);
+
+	const objEls = Array.from(container.children) as HTMLElement[];
+	const objs: Matter.Body[] = [];
+	for (const objEl of objEls) {
+		const left = objEl.dataset.physicsX ? parseInt(objEl.dataset.physicsX) : objEl.offsetLeft;
+		const top = objEl.dataset.physicsY ? parseInt(objEl.dataset.physicsY) : objEl.offsetTop;
+
+		let obj: Matter.Body;
+		if (objEl.classList.contains('_physics_circle_')) {
+			obj = Matter.Bodies.circle(
+				left + (objEl.offsetWidth / 2),
+				top + (objEl.offsetHeight / 2),
+				Math.max(objEl.offsetWidth, objEl.offsetHeight) / 2,
+				{
+					restitution: 0.5,
+				},
+			);
+		} else {
+			const style = window.getComputedStyle(objEl);
+			obj = Matter.Bodies.rectangle(
+				left + (objEl.offsetWidth / 2),
+				top + (objEl.offsetHeight / 2),
+				objEl.offsetWidth,
+				objEl.offsetHeight,
+				{
+					chamfer: { radius: parseInt(style.borderRadius || '0', 10) },
+					restitution: 0.5,
+				},
+			);
+		}
+		objEl.id = obj.id.toString();
+		objs.push(obj);
+	}
+
+	Matter.World.add(engine.world, objs);
+
+	// Add mouse control
+
+	const mouse = Matter.Mouse.create(container);
+	const mouseConstraint = Matter.MouseConstraint.create(engine, {
+		mouse: mouse,
+		constraint: {
+			stiffness: 0.1,
+			render: {
+				visible: false,
+			},
+		},
+	});
+
+	Matter.World.add(engine.world, mouseConstraint);
+
+	// keep the mouse in sync with rendering
+	render.mouse = mouse;
+
+	for (const objEl of objEls) {
+		objEl.style.position = 'absolute';
+		objEl.style.top = '0';
+		objEl.style.left = '0';
+		objEl.style.margin = '0';
+	}
+
+	window.requestAnimationFrame(update);
+
+	let stop = false;
+
+	function update() {
+		for (const objEl of objEls) {
+			const obj = objs.find(obj => obj.id.toString() === objEl.id.toString());
+			if (obj == null) continue;
+
+			const x = (obj.position.x - objEl.offsetWidth / 2);
+			const y = (obj.position.y - objEl.offsetHeight / 2);
+			const angle = obj.angle;
+			objEl.style.transform = `translate(${x}px, ${y}px) rotate(${angle}rad)`;
+		}
+
+		if (!stop) {
+			window.requestAnimationFrame(update);
+		}
+	}
+
+	// 奈落に落ちたオブジェクトは消す
+	const intervalId = window.setInterval(() => {
+		for (const obj of objs) {
+			if (obj.position.y > (containerHeight + 1024)) Matter.World.remove(world, obj);
+		}
+	}, 1000 * 10);
+
+	return {
+		stop: () => {
+			stop = true;
+			Matter.Runner.stop(runner);
+			window.clearInterval(intervalId);
+		},
+	};
+}
diff --git a/packages/frontend/src/scripts/please-login.ts b/packages/frontend/src/scripts/please-login.ts
new file mode 100644
index 0000000000..b8fb853cc1
--- /dev/null
+++ b/packages/frontend/src/scripts/please-login.ts
@@ -0,0 +1,21 @@
+import { defineAsyncComponent } from 'vue';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import { popup } from '@/os';
+
+export function pleaseLogin(path?: string) {
+	if ($i) return;
+
+	popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {
+		autoSet: true,
+		message: i18n.ts.signinRequired,
+	}, {
+		cancelled: () => {
+			if (path) {
+				window.location.href = path;
+			}
+		},
+	}, 'closed');
+
+	if (!path) throw new Error('signin required');
+}
diff --git a/packages/frontend/src/scripts/popout.ts b/packages/frontend/src/scripts/popout.ts
new file mode 100644
index 0000000000..580031d0a3
--- /dev/null
+++ b/packages/frontend/src/scripts/popout.ts
@@ -0,0 +1,23 @@
+import * as config from '@/config';
+import { appendQuery } from './url';
+
+export function popout(path: string, w?: HTMLElement) {
+	let url = path.startsWith('http://') || path.startsWith('https://') ? path : config.url + path;
+	url = appendQuery(url, 'zen');
+	if (w) {
+		const position = w.getBoundingClientRect();
+		const width = parseInt(getComputedStyle(w, '').width, 10);
+		const height = parseInt(getComputedStyle(w, '').height, 10);
+		const x = window.screenX + position.left;
+		const y = window.screenY + position.top;
+		window.open(url, url,
+			`width=${width}, height=${height}, top=${y}, left=${x}`);
+	} else {
+		const width = 400;
+		const height = 500;
+		const x = window.top.outerHeight / 2 + window.top.screenY - (height / 2);
+		const y = window.top.outerWidth / 2 + window.top.screenX - (width / 2);
+		window.open(url, url,
+			`width=${width}, height=${height}, top=${x}, left=${y}`);
+	}
+}
diff --git a/packages/frontend/src/scripts/popup-position.ts b/packages/frontend/src/scripts/popup-position.ts
new file mode 100644
index 0000000000..e84eebf103
--- /dev/null
+++ b/packages/frontend/src/scripts/popup-position.ts
@@ -0,0 +1,158 @@
+import { Ref } from 'vue';
+
+export function calcPopupPosition(el: HTMLElement, props: {
+	anchorElement: HTMLElement | null;
+	innerMargin: number;
+	direction: 'top' | 'bottom' | 'left' | 'right';
+	align: 'top' | 'bottom' | 'left' | 'right' | 'center';
+	alignOffset?: number;
+	x?: number;
+	y?: number;
+}): { top: number; left: number; transformOrigin: string; } {
+	const contentWidth = el.offsetWidth;
+	const contentHeight = el.offsetHeight;
+
+	let rect: DOMRect;
+
+	if (props.anchorElement) {
+		rect = props.anchorElement.getBoundingClientRect();
+	}
+
+	const calcPosWhenTop = () => {
+		let left: number;
+		let top: number;
+
+		if (props.anchorElement) {
+			left = rect.left + window.pageXOffset + (props.anchorElement.offsetWidth / 2);
+			top = (rect.top + window.pageYOffset - contentHeight) - props.innerMargin;
+		} else {
+			left = props.x;
+			top = (props.y - contentHeight) - props.innerMargin;
+		}
+
+		left -= (el.offsetWidth / 2);
+
+		if (left + contentWidth - window.pageXOffset > window.innerWidth) {
+			left = window.innerWidth - contentWidth + window.pageXOffset - 1;
+		}
+
+		return [left, top];
+	};
+
+	const calcPosWhenBottom = () => {
+		let left: number;
+		let top: number;
+
+		if (props.anchorElement) {
+			left = rect.left + window.pageXOffset + (props.anchorElement.offsetWidth / 2);
+			top = (rect.top + window.pageYOffset + props.anchorElement.offsetHeight) + props.innerMargin;
+		} else {
+			left = props.x;
+			top = (props.y) + props.innerMargin;
+		}
+
+		left -= (el.offsetWidth / 2);
+
+		if (left + contentWidth - window.pageXOffset > window.innerWidth) {
+			left = window.innerWidth - contentWidth + window.pageXOffset - 1;
+		}
+
+		return [left, top];
+	};
+
+	const calcPosWhenLeft = () => {
+		let left: number;
+		let top: number;
+
+		if (props.anchorElement) {
+			left = (rect.left + window.pageXOffset - contentWidth) - props.innerMargin;
+			top = rect.top + window.pageYOffset + (props.anchorElement.offsetHeight / 2);
+		} else {
+			left = (props.x - contentWidth) - props.innerMargin;
+			top = props.y;
+		}
+
+		top -= (el.offsetHeight / 2);
+
+		if (top + contentHeight - window.pageYOffset > window.innerHeight) {
+			top = window.innerHeight - contentHeight + window.pageYOffset - 1;
+		}
+
+		return [left, top];
+	};
+
+	const calcPosWhenRight = () => {
+		let left: number;
+		let top: number;
+
+		if (props.anchorElement) {
+			left = (rect.left + props.anchorElement.offsetWidth + window.pageXOffset) + props.innerMargin;
+
+			if (props.align === 'top') {
+				top = rect.top + window.pageYOffset;
+				if (props.alignOffset != null) top += props.alignOffset;
+			} else if (props.align === 'bottom') {
+				// TODO
+			} else { // center
+				top = rect.top + window.pageYOffset + (props.anchorElement.offsetHeight / 2);
+				top -= (el.offsetHeight / 2);
+			}
+		} else {
+			left = props.x + props.innerMargin;
+			top = props.y;
+			top -= (el.offsetHeight / 2);
+		}
+
+		if (top + contentHeight - window.pageYOffset > window.innerHeight) {
+			top = window.innerHeight - contentHeight + window.pageYOffset - 1;
+		}
+
+		return [left, top];
+	};
+
+	const calc = (): {
+		left: number;
+		top: number;
+		transformOrigin: string;
+	} => {
+		switch (props.direction) {
+			case 'top': {
+				const [left, top] = calcPosWhenTop();
+
+				// ツールチップを上に向かって表示するスペースがなければ下に向かって出す
+				if (top - window.pageYOffset < 0) {
+					const [left, top] = calcPosWhenBottom();
+					return { left, top, transformOrigin: 'center top' };
+				}
+
+				return { left, top, transformOrigin: 'center bottom' };
+			}
+
+			case 'bottom': {
+				const [left, top] = calcPosWhenBottom();
+				// TODO: ツールチップを下に向かって表示するスペースがなければ上に向かって出す
+				return { left, top, transformOrigin: 'center top' };
+			}
+
+			case 'left': {
+				const [left, top] = calcPosWhenLeft();
+
+				// ツールチップを左に向かって表示するスペースがなければ右に向かって出す
+				if (left - window.pageXOffset < 0) {
+					const [left, top] = calcPosWhenRight();
+					return { left, top, transformOrigin: 'left center' };
+				}
+
+				return { left, top, transformOrigin: 'right center' };
+			}
+
+			case 'right': {
+				const [left, top] = calcPosWhenRight();
+				// TODO: ツールチップを右に向かって表示するスペースがなければ左に向かって出す
+				return { left, top, transformOrigin: 'left center' };
+			}
+		}
+	};
+
+	return calc();
+}
diff --git a/packages/frontend/src/scripts/reaction-picker.ts b/packages/frontend/src/scripts/reaction-picker.ts
new file mode 100644
index 0000000000..fe32e719da
--- /dev/null
+++ b/packages/frontend/src/scripts/reaction-picker.ts
@@ -0,0 +1,41 @@
+import { defineAsyncComponent, Ref, ref } from 'vue';
+import { popup } from '@/os';
+
+class ReactionPicker {
+	private src: Ref<HTMLElement | null> = ref(null);
+	private manualShowing = ref(false);
+	private onChosen?: (reaction: string) => void;
+	private onClosed?: () => void;
+
+	constructor() {
+		// nop
+	}
+
+	public async init() {
+		await popup(defineAsyncComponent(() => import('@/components/MkEmojiPickerDialog.vue')), {
+			src: this.src,
+			asReactionPicker: true,
+			manualShowing: this.manualShowing,
+		}, {
+			done: reaction => {
+				this.onChosen!(reaction);
+			},
+			close: () => {
+				this.manualShowing.value = false;
+			},
+			closed: () => {
+				this.src.value = null;
+				this.onClosed!();
+			},
+		});
+	}
+
+	public show(src: HTMLElement, onChosen: ReactionPicker['onChosen'], onClosed: ReactionPicker['onClosed']) {
+		this.src.value = src;
+		this.manualShowing.value = true;
+		this.onChosen = onChosen;
+		this.onClosed = onClosed;
+	}
+}
+
+export const reactionPicker = new ReactionPicker();
diff --git a/packages/frontend/src/scripts/safe-uri-decode.ts b/packages/frontend/src/scripts/safe-uri-decode.ts
new file mode 100644
index 0000000000..301b56d7fd
--- /dev/null
+++ b/packages/frontend/src/scripts/safe-uri-decode.ts
@@ -0,0 +1,7 @@
+export function safeURIDecode(str: string): string {
+	try {
+		return decodeURIComponent(str);
+	} catch {
+		return str;
+	}
+}
diff --git a/packages/frontend/src/scripts/scroll.ts b/packages/frontend/src/scripts/scroll.ts
new file mode 100644
index 0000000000..f5bc6bf9ce
--- /dev/null
+++ b/packages/frontend/src/scripts/scroll.ts
@@ -0,0 +1,85 @@
+type ScrollBehavior = 'auto' | 'smooth' | 'instant';
+
+export function getScrollContainer(el: HTMLElement | null): HTMLElement | null {
+	if (el == null || el.tagName === 'HTML') return null;
+	const overflow = window.getComputedStyle(el).getPropertyValue('overflow-y');
+	if (overflow === 'scroll' || overflow === 'auto') {
+		return el;
+	} else {
+		return getScrollContainer(el.parentElement);
+	}
+}
+
+export function getScrollPosition(el: Element | null): number {
+	const container = getScrollContainer(el);
+	return container == null ? window.scrollY : container.scrollTop;
+}
+
+export function isTopVisible(el: Element | null): boolean {
+	const scrollTop = getScrollPosition(el);
+	const topPosition = el.offsetTop; // TODO: container内でのelの相対位置を取得できればより正確になる
+
+	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 => {
+		if (!document.body.contains(el)) return;
+		if (isTopVisible(el)) {
+			cb();
+			container.removeEventListener('scroll', onScroll);
+		}
+	};
+	container.addEventListener('scroll', onScroll, { passive: true });
+}
+
+export function onScrollBottom(el: Element, cb) {
+	const container = getScrollContainer(el) || window;
+	const onScroll = ev => {
+		if (!document.body.contains(el)) return;
+		const pos = getScrollPosition(el);
+		if (pos + el.clientHeight > el.scrollHeight - 1) {
+			cb();
+			container.removeEventListener('scroll', onScroll);
+		}
+	};
+	container.addEventListener('scroll', onScroll, { passive: true });
+}
+
+export function scroll(el: Element, options: {
+	top?: number;
+	left?: number;
+	behavior?: ScrollBehavior;
+}) {
+	const container = getScrollContainer(el);
+	if (container == null) {
+		window.scroll(options);
+	} else {
+		container.scroll(options);
+	}
+}
+
+export function scrollToTop(el: Element, options: { behavior?: ScrollBehavior; } = {}) {
+	scroll(el, { top: 0, ...options });
+}
+
+export function scrollToBottom(el: Element, options: { behavior?: ScrollBehavior; } = {}) {
+	scroll(el, { top: 99999, ...options }); // TODO: ちゃんと計算する
+}
+
+export function isBottom(el: Element, asobi = 0) {
+	const container = getScrollContainer(el);
+	const current = container
+		? el.scrollTop + el.offsetHeight
+		: window.scrollY + window.innerHeight;
+	const max = container
+		? el.scrollHeight
+		: document.body.offsetHeight;
+	return current >= (max - asobi);
+}
diff --git a/packages/frontend/src/scripts/search.ts b/packages/frontend/src/scripts/search.ts
new file mode 100644
index 0000000000..64914d3d65
--- /dev/null
+++ b/packages/frontend/src/scripts/search.ts
@@ -0,0 +1,63 @@
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { mainRouter } from '@/router';
+
+export async function search() {
+	const { canceled, result: query } = await os.inputText({
+		title: i18n.ts.search,
+	});
+	if (canceled || query == null || query === '') return;
+
+	const q = query.trim();
+
+	if (q.startsWith('@') && !q.includes(' ')) {
+		mainRouter.push(`/${q}`);
+		return;
+	}
+
+	if (q.startsWith('#')) {
+		mainRouter.push(`/tags/${encodeURIComponent(q.substr(1))}`);
+		return;
+	}
+
+	// like 2018/03/12
+	if (/^[0-9]{4}\/[0-9]{2}\/[0-9]{2}/.test(q.replace(/-/g, '/'))) {
+		const date = new Date(q.replace(/-/g, '/'));
+
+		// 日付しか指定されてない場合、例えば 2018/03/12 ならユーザーは
+		// 2018/03/12 のコンテンツを「含む」結果になることを期待するはずなので
+		// 23時間59分進める(そのままだと 2018/03/12 00:00:00 「まで」の
+		// 結果になってしまい、2018/03/12 のコンテンツは含まれない)
+		if (q.replace(/-/g, '/').match(/^[0-9]{4}\/[0-9]{2}\/[0-9]{2}$/)) {
+			date.setHours(23, 59, 59, 999);
+		}
+
+		// TODO
+		//v.$root.$emit('warp', date);
+		os.alert({
+			icon: 'fas fa-history',
+			iconOnly: true, autoClose: true,
+		});
+		return;
+	}
+
+	if (q.startsWith('https://')) {
+		const promise = os.api('ap/show', {
+			uri: q,
+		});
+
+		os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject);
+
+		const res = await promise;
+
+		if (res.type === 'User') {
+			mainRouter.push(`/@${res.object.username}@${res.object.host}`);
+		} else if (res.type === 'Note') {
+			mainRouter.push(`/notes/${res.object.id}`);
+		}
+
+		return;
+	}
+
+	mainRouter.push(`/search?q=${encodeURIComponent(q)}`);
+}
diff --git a/packages/frontend/src/scripts/select-file.ts b/packages/frontend/src/scripts/select-file.ts
new file mode 100644
index 0000000000..ec5f8f65e9
--- /dev/null
+++ b/packages/frontend/src/scripts/select-file.ts
@@ -0,0 +1,103 @@
+import { ref } from 'vue';
+import { DriveFile } from 'misskey-js/built/entities';
+import * as os from '@/os';
+import { stream } from '@/stream';
+import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
+import { uploadFile } from '@/scripts/upload';
+
+function select(src: any, label: string | null, multiple: boolean): Promise<DriveFile | DriveFile[]> {
+	return new Promise((res, rej) => {
+		const keepOriginal = ref(defaultStore.state.keepOriginalUploading);
+
+		const chooseFileFromPc = () => {
+			const input = document.createElement('input');
+			input.type = 'file';
+			input.multiple = multiple;
+			input.onchange = () => {
+				const promises = Array.from(input.files).map(file => uploadFile(file, defaultStore.state.uploadFolder, undefined, keepOriginal.value));
+
+				Promise.all(promises).then(driveFiles => {
+					res(multiple ? driveFiles : driveFiles[0]);
+				}).catch(err => {
+					// アップロードのエラーは uploadFile 内でハンドリングされているためアラートダイアログを出したりはしてはいけない
+				});
+
+				// 一応廃棄
+				(window as any).__misskey_input_ref__ = null;
+			};
+
+			// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
+			// iOS Safari で正常に動かす為のおまじない
+			(window as any).__misskey_input_ref__ = input;
+
+			input.click();
+		};
+
+		const chooseFileFromDrive = () => {
+			os.selectDriveFile(multiple).then(files => {
+				res(files);
+			});
+		};
+
+		const chooseFileFromUrl = () => {
+			os.inputText({
+				title: i18n.ts.uploadFromUrl,
+				type: 'url',
+				placeholder: i18n.ts.uploadFromUrlDescription,
+			}).then(({ canceled, result: url }) => {
+				if (canceled) return;
+
+				const marker = Math.random().toString(); // TODO: UUIDとか使う
+
+				const connection = stream.useChannel('main');
+				connection.on('urlUploadFinished', urlResponse => {
+					if (urlResponse.marker === marker) {
+						res(multiple ? [urlResponse.file] : urlResponse.file);
+						connection.dispose();
+					}
+				});
+
+				os.api('drive/files/upload-from-url', {
+					url: url,
+					folderId: defaultStore.state.uploadFolder,
+					marker,
+				});
+
+				os.alert({
+					title: i18n.ts.uploadFromUrlRequested,
+					text: i18n.ts.uploadFromUrlMayTakeTime,
+				});
+			});
+		};
+
+		os.popupMenu([label ? {
+			text: label,
+			type: 'label',
+		} : undefined, {
+			type: 'switch',
+			text: i18n.ts.keepOriginalUploading,
+			ref: keepOriginal,
+		}, {
+			text: i18n.ts.upload,
+			icon: 'ti ti-upload',
+			action: chooseFileFromPc,
+		}, {
+			text: i18n.ts.fromDrive,
+			icon: 'ti ti-cloud',
+			action: chooseFileFromDrive,
+		}, {
+			text: i18n.ts.fromUrl,
+			icon: 'ti ti-link',
+			action: chooseFileFromUrl,
+		}], src);
+	});
+}
+
+export function selectFile(src: any, label: string | null = null): Promise<DriveFile> {
+	return select(src, label, false) as Promise<DriveFile>;
+}
+
+export function selectFiles(src: any, label: string | null = null): Promise<DriveFile[]> {
+	return select(src, label, true) as Promise<DriveFile[]>;
+}
diff --git a/packages/frontend/src/scripts/show-suspended-dialog.ts b/packages/frontend/src/scripts/show-suspended-dialog.ts
new file mode 100644
index 0000000000..e11569ecd4
--- /dev/null
+++ b/packages/frontend/src/scripts/show-suspended-dialog.ts
@@ -0,0 +1,10 @@
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+export function showSuspendedDialog() {
+	return os.alert({
+		type: 'error',
+		title: i18n.ts.yourAccountSuspendedTitle,
+		text: i18n.ts.yourAccountSuspendedDescription,
+	});
+}
diff --git a/packages/frontend/src/scripts/shuffle.ts b/packages/frontend/src/scripts/shuffle.ts
new file mode 100644
index 0000000000..05e6cdfbcf
--- /dev/null
+++ b/packages/frontend/src/scripts/shuffle.ts
@@ -0,0 +1,19 @@
+/**
+ * 配列をシャッフル (破壊的)
+ */
+export function shuffle<T extends any[]>(array: T): T {
+	let currentIndex = array.length, randomIndex;
+
+	// While there remain elements to shuffle.
+	while (currentIndex !== 0) {
+		// Pick a remaining element.
+		randomIndex = Math.floor(Math.random() * currentIndex);
+		currentIndex--;
+
+		// And swap it with the current element.
+		[array[currentIndex], array[randomIndex]] = [
+			array[randomIndex], array[currentIndex]];
+	}
+
+	return array;
+}
diff --git a/packages/frontend/src/scripts/sound.ts b/packages/frontend/src/scripts/sound.ts
new file mode 100644
index 0000000000..9d1f603235
--- /dev/null
+++ b/packages/frontend/src/scripts/sound.ts
@@ -0,0 +1,66 @@
+import { ColdDeviceStorage } from '@/store';
+
+const cache = new Map<string, HTMLAudioElement>();
+
+export const soundsTypes = [
+	null,
+	'syuilo/up',
+	'syuilo/down',
+	'syuilo/pope1',
+	'syuilo/pope2',
+	'syuilo/waon',
+	'syuilo/popo',
+	'syuilo/triple',
+	'syuilo/poi1',
+	'syuilo/poi2',
+	'syuilo/pirori',
+	'syuilo/pirori-wet',
+	'syuilo/pirori-square-wet',
+	'syuilo/square-pico',
+	'syuilo/reverved',
+	'syuilo/ryukyu',
+	'syuilo/kick',
+	'syuilo/snare',
+	'syuilo/queue-jammed',
+	'aisha/1',
+	'aisha/2',
+	'aisha/3',
+	'noizenecio/kick_gaba1',
+	'noizenecio/kick_gaba2',
+	'noizenecio/kick_gaba3',
+	'noizenecio/kick_gaba4',
+	'noizenecio/kick_gaba5',
+	'noizenecio/kick_gaba6',
+	'noizenecio/kick_gaba7',
+] as const;
+
+export function getAudio(file: string, useCache = true): HTMLAudioElement {
+	let audio: HTMLAudioElement;
+	if (useCache && cache.has(file)) {
+		audio = cache.get(file);
+	} else {
+		audio = new Audio(`/client-assets/sounds/${file}.mp3`);
+		if (useCache) cache.set(file, audio);
+	}
+	return audio;
+}
+
+export function setVolume(audio: HTMLAudioElement, volume: number): HTMLAudioElement {
+	const masterVolume = ColdDeviceStorage.get('sound_masterVolume');
+	audio.volume = masterVolume - ((1 - volume) * masterVolume);
+	return audio;
+}
+
+export function play(type: string) {
+	const sound = ColdDeviceStorage.get('sound_' + type as any);
+	if (sound.type == null) return;
+	playFile(sound.type, sound.volume);
+}
+
+export function playFile(file: string, volume: number) {
+	const masterVolume = ColdDeviceStorage.get('sound_masterVolume');
+	if (masterVolume === 0) return;
+
+	const audio = setVolume(getAudio(file), volume);
+	audio.play();
+}
diff --git a/packages/frontend/src/scripts/sticky-sidebar.ts b/packages/frontend/src/scripts/sticky-sidebar.ts
new file mode 100644
index 0000000000..c67b8f37ac
--- /dev/null
+++ b/packages/frontend/src/scripts/sticky-sidebar.ts
@@ -0,0 +1,50 @@
+export class StickySidebar {
+	private lastScrollTop = 0;
+	private container: HTMLElement;
+	private el: HTMLElement;
+	private spacer: HTMLElement;
+	private marginTop: number;
+	private isTop = false;
+	private isBottom = false;
+	private offsetTop: number;
+	private globalHeaderHeight: number = 59;
+
+	constructor(container: StickySidebar['container'], marginTop = 0, globalHeaderHeight = 0) {
+		this.container = container;
+		this.el = this.container.children[0] as HTMLElement;
+		this.el.style.position = 'sticky';
+		this.spacer = document.createElement('div');
+		this.container.prepend(this.spacer);
+		this.marginTop = marginTop;
+		this.offsetTop = this.container.getBoundingClientRect().top;
+		this.globalHeaderHeight = globalHeaderHeight;
+	}
+
+	public calc(scrollTop: number) {
+		if (scrollTop > this.lastScrollTop) { // downscroll
+			const overflow = Math.max(0, this.globalHeaderHeight + (this.el.clientHeight + this.marginTop) - window.innerHeight);
+			this.el.style.bottom = null;
+			this.el.style.top = `${-overflow + this.marginTop + this.globalHeaderHeight}px`;
+
+			this.isBottom = (scrollTop + window.innerHeight) >= (this.el.offsetTop + this.el.clientHeight);
+
+			if (this.isTop) {
+				this.isTop = false;
+				this.spacer.style.marginTop = `${Math.max(0, this.globalHeaderHeight + this.lastScrollTop + this.marginTop - this.offsetTop)}px`;
+			}
+		} else { // upscroll
+			const overflow = this.globalHeaderHeight + (this.el.clientHeight + this.marginTop) - window.innerHeight;
+			this.el.style.top = null;
+			this.el.style.bottom = `${-overflow}px`;
+
+			this.isTop = scrollTop + this.marginTop + this.globalHeaderHeight <= this.el.offsetTop;
+
+			if (this.isBottom) {
+				this.isBottom = false;
+				this.spacer.style.marginTop = `${this.globalHeaderHeight + this.lastScrollTop + this.marginTop - this.offsetTop - overflow}px`;
+			}
+		}
+
+		this.lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+	}
+}
diff --git a/packages/frontend/src/scripts/theme-editor.ts b/packages/frontend/src/scripts/theme-editor.ts
new file mode 100644
index 0000000000..944875ff15
--- /dev/null
+++ b/packages/frontend/src/scripts/theme-editor.ts
@@ -0,0 +1,81 @@
+import { v4 as uuid } from 'uuid';
+
+import { themeProps, Theme } from './theme';
+
+export type Default = null;
+export type Color = string;
+export type FuncName = 'alpha' | 'darken' | 'lighten';
+export type Func = { type: 'func'; name: FuncName; arg: number; value: string; };
+export type RefProp = { type: 'refProp'; key: string; };
+export type RefConst = { type: 'refConst'; key: string; };
+export type Css = { type: 'css'; value: string; };
+
+export type ThemeValue = Color | Func | RefProp | RefConst | Css | Default;
+
+export type ThemeViewModel = [ string, ThemeValue ][];
+
+export const fromThemeString = (str?: string) : ThemeValue => {
+	if (!str) return null;
+	if (str.startsWith(':')) {
+		const parts = str.slice(1).split('<');
+		const name = parts[0] as FuncName;
+		const arg = parseFloat(parts[1]);
+		const value = parts[2].startsWith('@') ? parts[2].slice(1) : '';
+		return { type: 'func', name, arg, value };
+	} else if (str.startsWith('@')) {
+		return {
+			type: 'refProp',
+			key: str.slice(1),
+		};
+	} else if (str.startsWith('$')) {
+		return {
+			type: 'refConst',
+			key: str.slice(1),
+		};
+	} else if (str.startsWith('"')) {
+		return {
+			type: 'css',
+			value: str.substr(1).trim(),
+		};
+	} else {
+		return str;
+	}
+};
+
+export const toThemeString = (value: Color | Func | RefProp | RefConst | Css) => {
+	if (typeof value === 'string') return value;
+	switch (value.type) {
+		case 'func': return `:${value.name}<${value.arg}<@${value.value}`;
+		case 'refProp': return `@${value.key}`;
+		case 'refConst': return `$${value.key}`;
+		case 'css': return `" ${value.value}`;
+	}
+};
+
+export const convertToMisskeyTheme = (vm: ThemeViewModel, name: string, desc: string, author: string, base: 'dark' | 'light'): Theme => {
+	const props = { } as { [key: string]: string };
+	for (const [key, value] of vm) {
+		if (value === null) continue;
+		props[key] = toThemeString(value);
+	}
+
+	return {
+		id: uuid(),
+		name, desc, author, props, base,
+	};
+};
+
+export const convertToViewModel = (theme: Theme): ThemeViewModel => {
+	const vm: ThemeViewModel = [];
+	// プロパティの登録
+	vm.push(...themeProps.map(key => [key, fromThemeString(theme.props[key])] as [ string, ThemeValue ]));
+
+	// 定数の登録
+	const consts = Object
+		.keys(theme.props)
+		.filter(k => k.startsWith('$'))
+		.map(k => [k, fromThemeString(theme.props[k])] as [ string, ThemeValue ]);
+
+		vm.push(...consts);
+	return vm;
+};
diff --git a/packages/frontend/src/scripts/theme.ts b/packages/frontend/src/scripts/theme.ts
new file mode 100644
index 0000000000..62a2b9459a
--- /dev/null
+++ b/packages/frontend/src/scripts/theme.ts
@@ -0,0 +1,148 @@
+import { ref } from 'vue';
+import tinycolor from 'tinycolor2';
+import { globalEvents } from '@/events';
+
+export type Theme = {
+	id: string;
+	name: string;
+	author: string;
+	desc?: string;
+	base?: 'dark' | 'light';
+	props: Record<string, string>;
+};
+
+import lightTheme from '@/themes/_light.json5';
+import darkTheme from '@/themes/_dark.json5';
+import { deepClone } from './clone';
+
+export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
+
+export const getBuiltinThemes = () => Promise.all(
+	[
+		'l-light',
+		'l-coffee',
+		'l-apricot',
+		'l-rainy',
+		'l-vivid',
+		'l-cherry',
+		'l-sushi',
+		'l-u0',
+
+		'd-dark',
+		'd-persimmon',
+		'd-astro',
+		'd-future',
+		'd-botanical',
+		'd-green-lime',
+		'd-green-orange',
+		'd-cherry',
+		'd-ice',
+		'd-u0',
+	].map(name => import(`../themes/${name}.json5`).then(({ default: _default }): Theme => _default)),
+);
+
+export const getBuiltinThemesRef = () => {
+	const builtinThemes = ref<Theme[]>([]);
+	getBuiltinThemes().then(themes => builtinThemes.value = themes);
+	return builtinThemes;
+};
+
+let timeout = null;
+
+export function applyTheme(theme: Theme, persist = true) {
+	if (timeout) window.clearTimeout(timeout);
+
+	document.documentElement.classList.add('_themeChanging_');
+
+	timeout = window.setTimeout(() => {
+		document.documentElement.classList.remove('_themeChanging_');
+	}, 1000);
+
+	const colorSchema = theme.base === 'dark' ? 'dark' : 'light';
+
+	// Deep copy
+	const _theme = deepClone(theme);
+
+	if (_theme.base) {
+		const base = [lightTheme, darkTheme].find(x => x.id === _theme.base);
+		if (base) _theme.props = Object.assign({}, base.props, _theme.props);
+	}
+
+	const props = compile(_theme);
+
+	for (const tag of document.head.children) {
+		if (tag.tagName === 'META' && tag.getAttribute('name') === 'theme-color') {
+			tag.setAttribute('content', props['htmlThemeColor']);
+			break;
+		}
+	}
+
+	for (const [k, v] of Object.entries(props)) {
+		document.documentElement.style.setProperty(`--${k}`, v.toString());
+	}
+
+	document.documentElement.style.setProperty('color-schema', colorSchema);
+
+	if (persist) {
+		localStorage.setItem('theme', JSON.stringify(props));
+		localStorage.setItem('colorSchema', colorSchema);
+	}
+
+	// 色計算など再度行えるようにクライアント全体に通知
+	globalEvents.emit('themeChanged');
+}
+
+function compile(theme: Theme): Record<string, string> {
+	function getColor(val: string): tinycolor.Instance {
+		// ref (prop)
+		if (val[0] === '@') {
+			return getColor(theme.props[val.substr(1)]);
+		}
+
+		// ref (const)
+		else if (val[0] === '$') {
+			return getColor(theme.props[val]);
+		}
+
+		// func
+		else if (val[0] === ':') {
+			const parts = val.split('<');
+			const func = parts.shift().substr(1);
+			const arg = parseFloat(parts.shift());
+			const color = getColor(parts.join('<'));
+
+			switch (func) {
+				case 'darken': return color.darken(arg);
+				case 'lighten': return color.lighten(arg);
+				case 'alpha': return color.setAlpha(arg);
+				case 'hue': return color.spin(arg);
+				case 'saturate': return color.saturate(arg);
+			}
+		}
+
+		// other case
+		return tinycolor(val);
+	}
+
+	const props = {};
+
+	for (const [k, v] of Object.entries(theme.props)) {
+		if (k.startsWith('$')) continue; // ignore const
+
+		props[k] = v.startsWith('"') ? v.replace(/^"\s*/, '') : genValue(getColor(v));
+	}
+
+	return props;
+}
+
+function genValue(c: tinycolor.Instance): string {
+	return c.toRgbString();
+}
+
+export function validateTheme(theme: Record<string, any>): boolean {
+	if (theme.id == null || typeof theme.id !== 'string') return false;
+	if (theme.name == null || typeof theme.name !== 'string') return false;
+	if (theme.base == null || !['light', 'dark'].includes(theme.base)) return false;
+	if (theme.props == null || typeof theme.props !== 'object') return false;
+	return true;
+}
diff --git a/packages/frontend/src/scripts/time.ts b/packages/frontend/src/scripts/time.ts
new file mode 100644
index 0000000000..34e8b6b17c
--- /dev/null
+++ b/packages/frontend/src/scripts/time.ts
@@ -0,0 +1,39 @@
+const dateTimeIntervals = {
+	'day': 86400000,
+	'hour': 3600000,
+	'ms': 1,
+};
+
+export function dateUTC(time: number[]): Date {
+	const d = time.length === 2 ? Date.UTC(time[0], time[1])
+					: time.length === 3 ? Date.UTC(time[0], time[1], time[2])
+					: time.length === 4 ? Date.UTC(time[0], time[1], time[2], time[3])
+					: time.length === 5 ? Date.UTC(time[0], time[1], time[2], time[3], time[4])
+					: time.length === 6 ? Date.UTC(time[0], time[1], time[2], time[3], time[4], time[5])
+					: time.length === 7 ? Date.UTC(time[0], time[1], time[2], time[3], time[4], time[5], time[6])
+					: null;
+
+	if (!d) throw 'wrong number of arguments';
+
+	return new Date(d);
+}
+
+export function isTimeSame(a: Date, b: Date): boolean {
+	return a.getTime() === b.getTime();
+}
+
+export function isTimeBefore(a: Date, b: Date): boolean {
+	return (a.getTime() - b.getTime()) < 0;
+}
+
+export function isTimeAfter(a: Date, b: Date): boolean {
+	return (a.getTime() - b.getTime()) > 0;
+}
+
+export function addTime(x: Date, value: number, span: keyof typeof dateTimeIntervals = 'ms'): Date {
+	return new Date(x.getTime() + (value * dateTimeIntervals[span]));
+}
+
+export function subtractTime(x: Date, value: number, span: keyof typeof dateTimeIntervals = 'ms'): Date {
+	return new Date(x.getTime() - (value * dateTimeIntervals[span]));
+}
diff --git a/packages/frontend/src/scripts/timezones.ts b/packages/frontend/src/scripts/timezones.ts
new file mode 100644
index 0000000000..8ce07323f6
--- /dev/null
+++ b/packages/frontend/src/scripts/timezones.ts
@@ -0,0 +1,49 @@
+export const timezones = [{
+	name: 'UTC',
+	abbrev: 'UTC',
+	offset: 0,
+}, {
+	name: 'Europe/Berlin',
+	abbrev: 'CET',
+	offset: 60,
+}, {
+	name: 'Asia/Tokyo',
+	abbrev: 'JST',
+	offset: 540,
+}, {
+	name: 'Asia/Seoul',
+	abbrev: 'KST',
+	offset: 540,
+}, {
+	name: 'Asia/Shanghai',
+	abbrev: 'CST',
+	offset: 480,
+}, {
+	name: 'Australia/Sydney',
+	abbrev: 'AEST',
+	offset: 600,
+}, {
+	name: 'Australia/Darwin',
+	abbrev: 'ACST',
+	offset: 570,
+}, {
+	name: 'Australia/Perth',
+	abbrev: 'AWST',
+	offset: 480,
+}, {
+	name: 'America/New_York',
+	abbrev: 'EST',
+	offset: -300,
+}, {
+	name: 'America/Mexico_City',
+	abbrev: 'CST',
+	offset: -360,
+}, {
+	name: 'America/Phoenix',
+	abbrev: 'MST',
+	offset: -420,
+}, {
+	name: 'America/Los_Angeles',
+	abbrev: 'PST',
+	offset: -480,
+}];
diff --git a/packages/frontend/src/scripts/touch.ts b/packages/frontend/src/scripts/touch.ts
new file mode 100644
index 0000000000..5251bc2e27
--- /dev/null
+++ b/packages/frontend/src/scripts/touch.ts
@@ -0,0 +1,23 @@
+const isTouchSupported = 'maxTouchPoints' in navigator && navigator.maxTouchPoints > 0;
+
+export let isTouchUsing = false;
+
+export let isScreenTouching = false;
+
+if (isTouchSupported) {
+	window.addEventListener('touchstart', () => {
+		// maxTouchPointsなどでの判定だけだと、「タッチ機能付きディスプレイを使っているがマウスでしか操作しない」場合にも
+		// タッチで使っていると判定されてしまうため、実際に一度でもタッチされたらtrueにする
+		isTouchUsing = true;
+
+		isScreenTouching = true;
+	}, { passive: true });
+	
+	window.addEventListener('touchend', () => {
+		// 子要素のtouchstartイベントでstopPropagation()が呼ばれると親要素に伝搬されずタッチされたと判定されないため、
+		// touchendイベントでもtouchstartイベントと同様にtrueにする
+		isTouchUsing = true;
+
+		isScreenTouching = false;
+	}, { passive: true });
+}
diff --git a/packages/frontend/src/scripts/unison-reload.ts b/packages/frontend/src/scripts/unison-reload.ts
new file mode 100644
index 0000000000..59af584c1b
--- /dev/null
+++ b/packages/frontend/src/scripts/unison-reload.ts
@@ -0,0 +1,15 @@
+// SafariがBroadcastChannel未実装なのでライブラリを使う
+import { BroadcastChannel } from 'broadcast-channel';
+
+export const reloadChannel = new BroadcastChannel<string | null>('reload');
+
+// BroadcastChannelを用いて、クライアントが一斉にreloadするようにします。
+export function unisonReload(path?: string) {
+	if (path !== undefined) {
+		reloadChannel.postMessage(path);
+		location.href = path;
+	} else {
+		reloadChannel.postMessage(null);
+		location.reload();
+	}
+}
diff --git a/packages/frontend/src/scripts/upload.ts b/packages/frontend/src/scripts/upload.ts
new file mode 100644
index 0000000000..9a39652ef5
--- /dev/null
+++ b/packages/frontend/src/scripts/upload.ts
@@ -0,0 +1,137 @@
+import { reactive, ref } from 'vue';
+import * as Misskey from 'misskey-js';
+import { readAndCompressImage } from 'browser-image-resizer';
+import { getCompressionConfig } from './upload/compress-config';
+import { defaultStore } from '@/store';
+import { apiUrl } from '@/config';
+import { $i } from '@/account';
+import { alert } from '@/os';
+import { i18n } from '@/i18n';
+
+type Uploading = {
+	id: string;
+	name: string;
+	progressMax: number | undefined;
+	progressValue: number | undefined;
+	img: string;
+};
+export const uploads = ref<Uploading[]>([]);
+
+const mimeTypeMap = {
+	'image/webp': 'webp',
+	'image/jpeg': 'jpg',
+	'image/png': 'png',
+} as const;
+
+export function uploadFile(
+	file: File,
+	folder?: any,
+	name?: string,
+	keepOriginal: boolean = defaultStore.state.keepOriginalUploading,
+): Promise<Misskey.entities.DriveFile> {
+	if ($i == null) throw new Error('Not logged in');
+
+	if (folder && typeof folder === 'object') folder = folder.id;
+
+	return new Promise((resolve, reject) => {
+		const id = Math.random().toString();
+
+		const reader = new FileReader();
+		reader.onload = async (): Promise<void> => {
+			const ctx = reactive<Uploading>({
+				id: id,
+				name: name ?? file.name ?? 'untitled',
+				progressMax: undefined,
+				progressValue: undefined,
+				img: window.URL.createObjectURL(file),
+			});
+
+			uploads.value.push(ctx);
+
+			const config = !keepOriginal ? await getCompressionConfig(file) : undefined;
+			let resizedImage: Blob | undefined;
+			if (config) {
+				try {
+					const resized = await readAndCompressImage(file, config);
+					if (resized.size < file.size || file.type === 'image/webp') {
+						// The compression may not always reduce the file size
+						// (and WebP is not browser safe yet)
+						resizedImage = resized;
+					}
+					if (_DEV_) {
+						const saved = ((1 - resized.size / file.size) * 100).toFixed(2);
+						console.log(`Image compression: before ${file.size} bytes, after ${resized.size} bytes, saved ${saved}%`);
+					}
+
+					ctx.name = file.type !== config.mimeType ? `${ctx.name}.${mimeTypeMap[config.mimeType]}` : ctx.name;
+				} catch (err) {
+					console.error('Failed to resize image', err);
+				}
+			}
+
+			const formData = new FormData();
+			formData.append('i', $i.token);
+			formData.append('force', 'true');
+			formData.append('file', resizedImage ?? file);
+			formData.append('name', ctx.name);
+			if (folder) formData.append('folderId', folder);
+
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', apiUrl + '/drive/files/create', true);
+			xhr.onload = ((ev: ProgressEvent<XMLHttpRequest>) => {
+				if (xhr.status !== 200 || ev.target == null || ev.target.response == null) {
+					// TODO: 消すのではなくて(ネットワーク的なエラーなら)再送できるようにしたい
+					uploads.value = uploads.value.filter(x => x.id !== id);
+
+					if (ev.target?.response) {
+						const res = JSON.parse(ev.target.response);
+						if (res.error?.id === 'bec5bd69-fba3-43c9-b4fb-2894b66ad5d2') {
+							alert({
+								type: 'error',
+								title: i18n.ts.failedToUpload,
+								text: i18n.ts.cannotUploadBecauseInappropriate,
+							});
+						} else if (res.error?.id === 'd08dbc37-a6a9-463a-8c47-96c32ab5f064') {
+							alert({
+								type: 'error',
+								title: i18n.ts.failedToUpload,
+								text: i18n.ts.cannotUploadBecauseNoFreeSpace,
+							});
+						} else {
+							alert({
+								type: 'error',
+								title: i18n.ts.failedToUpload,
+								text: `${res.error?.message}\n${res.error?.code}\n${res.error?.id}`,
+							});
+						}
+					} else {
+						alert({
+							type: 'error',
+							title: 'Failed to upload',
+							text: `${JSON.stringify(ev.target?.response)}, ${JSON.stringify(xhr.response)}`,
+						});
+					}
+
+					reject();
+					return;
+				}
+
+				const driveFile = JSON.parse(ev.target.response);
+
+				resolve(driveFile);
+
+				uploads.value = uploads.value.filter(x => x.id !== id);
+			}) as (ev: ProgressEvent<EventTarget>) => any;
+
+			xhr.upload.onprogress = ev => {
+				if (ev.lengthComputable) {
+					ctx.progressMax = ev.total;
+					ctx.progressValue = ev.loaded;
+				}
+			};
+
+			xhr.send(formData);
+		};
+		reader.readAsArrayBuffer(file);
+	});
+}
diff --git a/packages/frontend/src/scripts/upload/compress-config.ts b/packages/frontend/src/scripts/upload/compress-config.ts
new file mode 100644
index 0000000000..793c78ad20
--- /dev/null
+++ b/packages/frontend/src/scripts/upload/compress-config.ts
@@ -0,0 +1,23 @@
+import isAnimated from 'is-file-animated';
+import type { BrowserImageResizerConfig } from 'browser-image-resizer';
+
+const compressTypeMap = {
+	'image/jpeg': { quality: 0.85, mimeType: 'image/jpeg' },
+	'image/png': { quality: 1, mimeType: 'image/png' },
+	'image/webp': { quality: 0.85, mimeType: 'image/jpeg' },
+	'image/svg+xml': { quality: 1, mimeType: 'image/png' },
+} as const;
+
+export async function getCompressionConfig(file: File): Promise<BrowserImageResizerConfig | undefined> {
+	const imgConfig = compressTypeMap[file.type];
+	if (!imgConfig || await isAnimated(file)) {
+		return;
+	}
+
+	return {
+		maxWidth: 2048,
+		maxHeight: 2048,
+		debug: true,
+		...imgConfig,
+	};
+}
diff --git a/packages/frontend/src/scripts/url.ts b/packages/frontend/src/scripts/url.ts
new file mode 100644
index 0000000000..86735de9f0
--- /dev/null
+++ b/packages/frontend/src/scripts/url.ts
@@ -0,0 +1,13 @@
+export function query(obj: Record<string, any>): 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((p) => `${p[0]}=${encodeURIComponent(p[1])}`)
+		.join('&');
+}
+
+export function appendQuery(url: string, query: string): string {
+	return `${url}${/\?/.test(url) ? url.endsWith('?') ? '' : '&' : '?'}${query}`;
+}
diff --git a/packages/frontend/src/scripts/use-chart-tooltip.ts b/packages/frontend/src/scripts/use-chart-tooltip.ts
new file mode 100644
index 0000000000..881e5e9ad5
--- /dev/null
+++ b/packages/frontend/src/scripts/use-chart-tooltip.ts
@@ -0,0 +1,54 @@
+import { onUnmounted, ref } from 'vue';
+import * as os from '@/os';
+import MkChartTooltip from '@/components/MkChartTooltip.vue';
+
+export function useChartTooltip(opts: { position: 'top' | 'middle' } = { position: 'top' }) {
+	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;
+		if (opts.position === 'top') {
+			tooltipY.value = rect.top + window.pageYOffset;
+		} else if (opts.position === 'middle') {
+			tooltipY.value = rect.top + window.pageYOffset + context.tooltip.caretY;
+		}
+	}
+
+	return {
+		handler,
+	};
+}
diff --git a/packages/frontend/src/scripts/use-interval.ts b/packages/frontend/src/scripts/use-interval.ts
new file mode 100644
index 0000000000..201ba417ef
--- /dev/null
+++ b/packages/frontend/src/scripts/use-interval.ts
@@ -0,0 +1,24 @@
+import { onMounted, onUnmounted } from 'vue';
+
+export function useInterval(fn: () => void, interval: number, options: {
+	immediate: boolean;
+	afterMounted: boolean;
+}): void {
+	if (Number.isNaN(interval)) return;
+
+	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/frontend/src/scripts/use-leave-guard.ts b/packages/frontend/src/scripts/use-leave-guard.ts
new file mode 100644
index 0000000000..a93b84d1fe
--- /dev/null
+++ b/packages/frontend/src/scripts/use-leave-guard.ts
@@ -0,0 +1,47 @@
+import { inject, onUnmounted, Ref } from 'vue';
+import { i18n } from '@/i18n';
+import * as os from '@/os';
+
+export function useLeaveGuard(enabled: Ref<boolean>) {
+	/* TODO
+	const setLeaveGuard = inject('setLeaveGuard');
+
+	if (setLeaveGuard) {
+		setLeaveGuard(async () => {
+			if (!enabled.value) return false;
+
+			const { canceled } = await os.confirm({
+				type: 'warning',
+				text: i18n.ts.leaveConfirm,
+			});
+
+			return canceled;
+		});
+	} else {
+		onBeforeRouteLeave(async (to, from) => {
+			if (!enabled.value) return true;
+
+			const { canceled } = await os.confirm({
+				type: 'warning',
+				text: i18n.ts.leaveConfirm,
+			});
+
+			return !canceled;
+		});
+	}
+	*/
+
+	/*
+	function onBeforeLeave(ev: BeforeUnloadEvent) {
+		if (enabled.value) {
+			ev.preventDefault();
+			ev.returnValue = '';
+		}
+	}
+
+	window.addEventListener('beforeunload', onBeforeLeave);
+	onUnmounted(() => {
+		window.removeEventListener('beforeunload', onBeforeLeave);
+	});
+	*/
+}
diff --git a/packages/frontend/src/scripts/use-note-capture.ts b/packages/frontend/src/scripts/use-note-capture.ts
new file mode 100644
index 0000000000..e6bdb345c4
--- /dev/null
+++ b/packages/frontend/src/scripts/use-note-capture.ts
@@ -0,0 +1,110 @@
+import { onUnmounted, Ref } from 'vue';
+import * as misskey from 'misskey-js';
+import { stream } from '@/stream';
+import { $i } from '@/account';
+
+export function useNoteCapture(props: {
+	rootEl: Ref<HTMLElement>;
+	note: Ref<misskey.entities.Note>;
+	isDeletedRef: Ref<boolean>;
+}) {
+	const note = props.note;
+	const connection = $i ? stream : null;
+
+	function onStreamNoteUpdated(noteData): void {
+		const { type, id, body } = noteData;
+
+		if (id !== note.value.id) return;
+
+		switch (type) {
+			case 'reacted': {
+				const reaction = body.reaction;
+
+				if (body.emoji) {
+					const emojis = note.value.emojis || [];
+					if (!emojis.includes(body.emoji)) {
+						note.value.emojis = [...emojis, body.emoji];
+					}
+				}
+
+				// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
+				const currentCount = (note.value.reactions || {})[reaction] || 0;
+
+				note.value.reactions[reaction] = currentCount + 1;
+
+				if ($i && (body.userId === $i.id)) {
+					note.value.myReaction = reaction;
+				}
+				break;
+			}
+
+			case 'unreacted': {
+				const reaction = body.reaction;
+
+				// TODO: reactionsプロパティがない場合ってあったっけ？ なければ || {} は消せる
+				const currentCount = (note.value.reactions || {})[reaction] || 0;
+
+				note.value.reactions[reaction] = Math.max(0, currentCount - 1);
+
+				if ($i && (body.userId === $i.id)) {
+					note.value.myReaction = null;
+				}
+				break;
+			}
+
+			case 'pollVoted': {
+				const choice = body.choice;
+
+				const choices = [...note.value.poll.choices];
+				choices[choice] = {
+					...choices[choice],
+					votes: choices[choice].votes + 1,
+					...($i && (body.userId === $i.id) ? {
+						isVoted: true,
+					} : {}),
+				};
+
+				note.value.poll.choices = choices;
+				break;
+			}
+
+			case 'deleted': {
+				props.isDeletedRef.value = true;
+				break;
+			}
+		}
+	}
+
+	function capture(withHandler = false): void {
+		if (connection) {
+			// TODO: このノートがストリーミング経由で流れてきた場合のみ sr する
+			connection.send(document.body.contains(props.rootEl.value) ? 'sr' : 's', { id: note.value.id });
+			if (withHandler) connection.on('noteUpdated', onStreamNoteUpdated);
+		}
+	}
+
+	function decapture(withHandler = false): void {
+		if (connection) {
+			connection.send('un', {
+				id: note.value.id,
+			});
+			if (withHandler) connection.off('noteUpdated', onStreamNoteUpdated);
+		}
+	}
+
+	function onStreamConnected() {
+		capture(false);
+	}
+	
+	capture(true);
+	if (connection) {
+		connection.on('_connected_', onStreamConnected);
+	}
+	
+	onUnmounted(() => {
+		decapture(true);
+		if (connection) {
+			connection.off('_connected_', onStreamConnected);
+		}
+	});
+}
diff --git a/packages/frontend/src/scripts/use-tooltip.ts b/packages/frontend/src/scripts/use-tooltip.ts
new file mode 100644
index 0000000000..1f6e0fb6ce
--- /dev/null
+++ b/packages/frontend/src/scripts/use-tooltip.ts
@@ -0,0 +1,86 @@
+import { Ref, ref, watch, onUnmounted } from 'vue';
+
+export function useTooltip(
+	elRef: Ref<HTMLElement | { $el: HTMLElement } | null | undefined>,
+	onShow: (showing: Ref<boolean>) => void,
+	delay = 300,
+): void {
+	let isHovering = false;
+
+	// iOS(Androidも？)では、要素をタップした直後に(おせっかいで)mouseoverイベントを発火させたりするため、それを無視するためのフラグ
+	// 無視しないと、画面に触れてないのにツールチップが出たりし、ユーザビリティが損なわれる
+	// TODO: 一度でもタップすると二度とマウスでツールチップ出せなくなるのをどうにかする 定期的にfalseに戻すとか...？
+	let shouldIgnoreMouseover = false;
+
+	let timeoutId: number;
+
+	let changeShowingState: (() => void) | null;
+
+	const open = () => {
+		close();
+		if (!isHovering) return;
+		if (elRef.value == null) return;
+		const el = elRef.value instanceof Element ? elRef.value : elRef.value.$el;
+		if (!document.body.contains(el)) return; // openしようとしたときに既に元要素がDOMから消えている場合があるため
+
+		const showing = ref(true);
+		onShow(showing);
+		changeShowingState = () => {
+			showing.value = false;
+		};
+	};
+
+	const close = () => {
+		if (changeShowingState != null) {
+			changeShowingState();
+			changeShowingState = null;
+		}
+	};
+
+	const onMouseover = () => {
+		if (isHovering) return;
+		if (shouldIgnoreMouseover) return;
+		isHovering = true;
+		timeoutId = window.setTimeout(open, delay);
+	};
+
+	const onMouseleave = () => {
+		if (!isHovering) return;
+		isHovering = false;
+		window.clearTimeout(timeoutId);
+		close();
+	};
+
+	const onTouchstart = () => {
+		shouldIgnoreMouseover = true;
+		if (isHovering) return;
+		isHovering = true;
+		timeoutId = window.setTimeout(open, delay);
+	};
+
+	const onTouchend = () => {
+		if (!isHovering) return;
+		isHovering = false;
+		window.clearTimeout(timeoutId);
+		close();
+	};
+
+	const stop = watch(elRef, () => {
+		if (elRef.value) {
+			stop();
+			const el = elRef.value instanceof Element ? elRef.value : elRef.value.$el;
+			el.addEventListener('mouseover', onMouseover, { passive: true });
+			el.addEventListener('mouseleave', onMouseleave, { passive: true });
+			el.addEventListener('touchstart', onTouchstart, { passive: true });
+			el.addEventListener('touchend', onTouchend, { passive: true });
+			el.addEventListener('click', close, { passive: true });
+		}
+	}, {
+		immediate: true,
+		flush: 'post',
+	});
+
+	onUnmounted(() => {
+		close();
+	});
+}
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
new file mode 100644
index 0000000000..1bedab5fad
--- /dev/null
+++ b/packages/frontend/src/store.ts
@@ -0,0 +1,383 @@
+import { markRaw, ref } from 'vue';
+import { Storage } from './pizzax';
+import { Theme } from './scripts/theme';
+
+interface PostFormAction {
+	title: string,
+	handler: <T>(form: T, update: (key: unknown, value: unknown) => void) => void;
+}
+
+interface UserAction {
+	title: string,
+	handler: (user: UserDetailed) => void;
+}
+
+interface NoteAction {
+	title: string,
+	handler: (note: Note) => void;
+}
+
+interface NoteViewInterruptor {
+	handler: (note: Note) => unknown;
+}
+
+interface NotePostInterruptor {
+	handler: (note: FIXME) => unknown;
+}
+
+export const postFormActions: PostFormAction[] = [];
+export const userActions: UserAction[] = [];
+export const noteActions: NoteAction[] = [];
+export const noteViewInterruptors: NoteViewInterruptor[] = [];
+export const notePostInterruptors: NotePostInterruptor[] = [];
+
+// TODO: それぞれいちいちwhereとかdefaultというキーを付けなきゃいけないの冗長なのでなんとかする(ただ型定義が面倒になりそう)
+//       あと、現行の定義の仕方なら「whereが何であるかに関わらずキー名の重複不可」という制約を付けられるメリットもあるからそのメリットを引き継ぐ方法も考えないといけない
+export const defaultStore = markRaw(new Storage('base', {
+	tutorial: {
+		where: 'account',
+		default: 0,
+	},
+	keepCw: {
+		where: 'account',
+		default: true,
+	},
+	showFullAcct: {
+		where: 'account',
+		default: false,
+	},
+	rememberNoteVisibility: {
+		where: 'account',
+		default: false,
+	},
+	defaultNoteVisibility: {
+		where: 'account',
+		default: 'public',
+	},
+	defaultNoteLocalOnly: {
+		where: 'account',
+		default: false,
+	},
+	uploadFolder: {
+		where: 'account',
+		default: null as string | null,
+	},
+	pastedFileName: {
+		where: 'account',
+		default: 'yyyy-MM-dd HH-mm-ss [{{number}}]',
+	},
+	keepOriginalUploading: {
+		where: 'account',
+		default: false,
+	},
+	memo: {
+		where: 'account',
+		default: null,
+	},
+	reactions: {
+		where: 'account',
+		default: ['👍', '❤️', '😆', '🤔', '😮', '🎉', '💢', '😥', '😇', '🍮'],
+	},
+	mutedWords: {
+		where: 'account',
+		default: [],
+	},
+	mutedAds: {
+		where: 'account',
+		default: [] as string[],
+	},
+
+	menu: {
+		where: 'deviceAccount',
+		default: [
+			'notifications',
+			'favorites',
+			'drive',
+			'followRequests',
+			'-',
+			'explore',
+			'announcements',
+			'search',
+			'-',
+			'ui',
+		],
+	},
+	visibility: {
+		where: 'deviceAccount',
+		default: 'public' as 'public' | 'home' | 'followers' | 'specified',
+	},
+	localOnly: {
+		where: 'deviceAccount',
+		default: false,
+	},
+	statusbars: {
+		where: 'deviceAccount',
+		default: [] as {
+			name: string;
+			id: string;
+			type: string;
+			size: 'verySmall' | 'small' | 'medium' | 'large' | 'veryLarge';
+			black: boolean;
+			props: Record<string, any>;
+		}[],
+	},
+	widgets: {
+		where: 'deviceAccount',
+		default: [] as {
+			name: string;
+			id: string;
+			place: string | null;
+			data: Record<string, any>;
+		}[],
+	},
+	tl: {
+		where: 'deviceAccount',
+		default: {
+			src: 'home' as 'home' | 'local' | 'social' | 'global',
+			arg: null,
+		},
+	},
+
+	overridedDeviceKind: {
+		where: 'device',
+		default: null as null | 'smartphone' | 'tablet' | 'desktop',
+	},
+	serverDisconnectedBehavior: {
+		where: 'device',
+		default: 'quiet' as 'quiet' | 'reload' | 'dialog',
+	},
+	nsfw: {
+		where: 'device',
+		default: 'respect' as 'respect' | 'force' | 'ignore',
+	},
+	animation: {
+		where: 'device',
+		default: true,
+	},
+	animatedMfm: {
+		where: 'device',
+		default: false,
+	},
+	loadRawImages: {
+		where: 'device',
+		default: false,
+	},
+	imageNewTab: {
+		where: 'device',
+		default: false,
+	},
+	disableShowingAnimatedImages: {
+		where: 'device',
+		default: false,
+	},
+	disablePagesScript: {
+		where: 'device',
+		default: false,
+	},
+	emojiStyle: {
+		where: 'device',
+		default: 'twemoji', // twemoji / fluentEmoji / native
+	},
+	disableDrawer: {
+		where: 'device',
+		default: false,
+	},
+	useBlurEffectForModal: {
+		where: 'device',
+		default: true,
+	},
+	useBlurEffect: {
+		where: 'device',
+		default: true,
+	},
+	showFixedPostForm: {
+		where: 'device',
+		default: false,
+	},
+	enableInfiniteScroll: {
+		where: 'device',
+		default: true,
+	},
+	useReactionPickerForContextMenu: {
+		where: 'device',
+		default: false,
+	},
+	showGapBetweenNotesInTimeline: {
+		where: 'device',
+		default: false,
+	},
+	darkMode: {
+		where: 'device',
+		default: false,
+	},
+	instanceTicker: {
+		where: 'device',
+		default: 'remote' as 'none' | 'remote' | 'always',
+	},
+	reactionPickerSize: {
+		where: 'device',
+		default: 1,
+	},
+	reactionPickerWidth: {
+		where: 'device',
+		default: 1,
+	},
+	reactionPickerHeight: {
+		where: 'device',
+		default: 2,
+	},
+	reactionPickerUseDrawerForMobile: {
+		where: 'device',
+		default: true,
+	},
+	recentlyUsedEmojis: {
+		where: 'device',
+		default: [] as string[],
+	},
+	recentlyUsedUsers: {
+		where: 'device',
+		default: [] as string[],
+	},
+	defaultSideView: {
+		where: 'device',
+		default: false,
+	},
+	menuDisplay: {
+		where: 'device',
+		default: 'sideFull' as 'sideFull' | 'sideIcon' | 'top',
+	},
+	reportError: {
+		where: 'device',
+		default: false,
+	},
+	squareAvatars: {
+		where: 'device',
+		default: false,
+	},
+	postFormWithHashtags: {
+		where: 'device',
+		default: false,
+	},
+	postFormHashtags: {
+		where: 'device',
+		default: '',
+	},
+	themeInitial: {
+		where: 'device',
+		default: true,
+	},
+	numberOfPageCache: {
+		where: 'device',
+		default: 5,
+	},
+	aiChanMode: {
+		where: 'device',
+		default: false,
+	},
+}));
+
+// TODO: 他のタブと永続化されたstateを同期
+
+const PREFIX = 'miux:';
+
+type Plugin = {
+	id: string;
+	name: string;
+	active: boolean;
+	configData: Record<string, any>;
+	token: string;
+	ast: any[];
+};
+
+interface Watcher {
+	key: string;
+	callback: (value: unknown) => void;
+}
+
+/**
+ * 常にメモリにロードしておく必要がないような設定情報を保管するストレージ(非リアクティブ)
+ */
+import lightTheme from '@/themes/l-light.json5';
+import darkTheme from '@/themes/d-green-lime.json5';
+import { Note, UserDetailed } from 'misskey-js/built/entities';
+
+export class ColdDeviceStorage {
+	public static default = {
+		lightTheme,
+		darkTheme,
+		syncDeviceDarkMode: true,
+		plugins: [] as Plugin[],
+		mediaVolume: 0.5,
+		sound_masterVolume: 0.3,
+		sound_note: { type: 'syuilo/down', volume: 1 },
+		sound_noteMy: { type: 'syuilo/up', volume: 1 },
+		sound_notification: { type: 'syuilo/pope2', volume: 1 },
+		sound_chat: { type: 'syuilo/pope1', volume: 1 },
+		sound_chatBg: { type: 'syuilo/waon', volume: 1 },
+		sound_antenna: { type: 'syuilo/triple', volume: 1 },
+		sound_channel: { type: 'syuilo/square-pico', volume: 1 },
+	};
+
+	public static watchers: Watcher[] = [];
+
+	public static get<T extends keyof typeof ColdDeviceStorage.default>(key: T): typeof ColdDeviceStorage.default[T] {
+		// TODO: indexedDBにする
+		//       ただしその際はnullチェックではなくキー存在チェックにしないとダメ
+		//       (indexedDBはnullを保存できるため、ユーザーが意図してnullを格納した可能性がある)
+		const value = localStorage.getItem(PREFIX + key);
+		if (value == null) {
+			return ColdDeviceStorage.default[key];
+		} else {
+			return JSON.parse(value);
+		}
+	}
+
+	public static set<T extends keyof typeof ColdDeviceStorage.default>(key: T, value: typeof ColdDeviceStorage.default[T]): void {
+		// 呼び出し側のバグ等で undefined が来ることがある
+		// undefined を文字列として localStorage に入れると参照する際の JSON.parse でコケて不具合の元になるため無視
+		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+		if (value === undefined) {
+			console.error(`attempt to store undefined value for key '${key}'`);
+			return;
+		}
+
+		localStorage.setItem(PREFIX + key, JSON.stringify(value));
+
+		for (const watcher of this.watchers) {
+			if (watcher.key === key) watcher.callback(value);
+		}
+	}
+
+	public static watch(key, callback) {
+		this.watchers.push({ key, callback });
+	}
+
+	// TODO: VueのcustomRef使うと良い感じになるかも
+	public static ref<T extends keyof typeof ColdDeviceStorage.default>(key: T) {
+		const v = ColdDeviceStorage.get(key);
+		const r = ref(v);
+		// TODO: このままではwatcherがリークするので開放する方法を考える
+		this.watch(key, v => {
+			r.value = v;
+		});
+		return r;
+	}
+
+	/**
+	 * 特定のキーの、簡易的なgetter/setterを作ります
+	 * 主にvue場で設定コントロールのmodelとして使う用
+	 */
+	public static makeGetterSetter<K extends keyof typeof ColdDeviceStorage.default>(key: K) {
+		// TODO: VueのcustomRef使うと良い感じになるかも
+		const valueRef = ColdDeviceStorage.ref(key);
+		return {
+			get: () => {
+				return valueRef.value;
+			},
+			set: (value: unknown) => {
+				const val = value;
+				ColdDeviceStorage.set(key, val);
+			},
+		};
+	}
+}
diff --git a/packages/frontend/src/stream.ts b/packages/frontend/src/stream.ts
new file mode 100644
index 0000000000..dea3459b86
--- /dev/null
+++ b/packages/frontend/src/stream.ts
@@ -0,0 +1,8 @@
+import * as Misskey from 'misskey-js';
+import { markRaw } from 'vue';
+import { $i } from '@/account';
+import { url } from '@/config';
+
+export const stream = markRaw(new Misskey.Stream(url, $i ? {
+	token: $i.token,
+} : null));
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
new file mode 100644
index 0000000000..8b7a846863
--- /dev/null
+++ b/packages/frontend/src/style.scss
@@ -0,0 +1,584 @@
+@charset "utf-8";
+
+:root {
+	--radius: 12px;
+	--marginFull: 16px;
+	--marginHalf: 10px;
+
+	--margin: var(--marginFull);
+
+	@media (max-width: 500px) {
+		--margin: var(--marginHalf);
+	}
+
+	//--ad: rgb(255 169 0 / 10%);
+}
+
+::selection {
+	color: #fff;
+	background-color: var(--accent);
+} 
+
+html {
+	touch-action: manipulation;
+	background-color: var(--bg);
+	background-attachment: fixed;
+	background-size: cover;
+	background-position: center;
+	color: var(--fg);
+	accent-color: var(--accent);
+	overflow: auto;
+	overflow-wrap: break-word;
+	font-family: 'Hiragino Maru Gothic Pro', "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
+	font-size: 14px;
+	line-height: 1.35;
+	text-size-adjust: 100%;
+	tab-size: 2;
+
+	&, * {
+		scrollbar-color: var(--scrollbarHandle) inherit;
+		scrollbar-width: thin;
+
+		&::-webkit-scrollbar {
+			width: 6px;
+			height: 6px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: inherit;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--scrollbarHandle);
+
+			&:hover {
+				background: var(--scrollbarHandleHover);
+			}
+
+			&:active {
+				background: var(--accent);
+			}
+		}
+	}
+
+	&.f-1 {
+		font-size: 15px;
+	}
+
+	&.f-2 {
+		font-size: 16px;
+	}
+
+	&.f-3 {
+		font-size: 17px;
+	}
+
+	&.useSystemFont {
+		font-family: 'Hiragino Maru Gothic Pro', sans-serif;
+	}
+}
+
+html._themeChanging_ {
+	&, * {
+		transition: background 1s ease, border 1s ease !important;
+	}
+}
+
+html, body {
+	margin: 0;
+	padding: 0;
+	scroll-behavior: smooth;
+}
+
+a {
+	text-decoration: none;
+	cursor: pointer;
+	color: inherit;
+	tap-highlight-color: transparent;
+	-webkit-tap-highlight-color: transparent;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+textarea, input {
+	tap-highlight-color: transparent;
+	-webkit-tap-highlight-color: transparent;
+}
+
+optgroup, option {
+	background: var(--panel);
+	color: var(--fg);
+}
+
+hr {
+	margin: var(--margin) 0 var(--margin) 0;
+	border: none;
+	height: 1px;
+	background: var(--divider);
+}
+
+.ti {
+	vertical-align: -10%;
+	line-height: 0.9em;
+
+	&:before {
+		font-size: 130%;
+	}
+}
+
+.ti-fw {
+	display: inline-block;
+	text-align: center;
+}
+
+._indicatorCircle {
+	display: inline-block;
+	width: 1em;
+	height: 1em;
+	border-radius: 100%;
+	background: currentColor;
+}
+
+._noSelect {
+	user-select: none;
+	-webkit-user-select: none;
+	-webkit-touch-callout: none;
+}
+
+._ghost {
+	&, * {
+		@extend ._noSelect;
+		pointer-events: none;
+	}
+}
+
+._modalBg {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: var(--modalBg);
+	-webkit-backdrop-filter: var(--modalBgFilter);
+	backdrop-filter: var(--modalBgFilter);
+}
+
+._shadow {
+	box-shadow: 0px 4px 32px var(--shadow) !important;
+}
+
+._button {
+	appearance: none;
+	display: inline-block;
+	padding: 0;
+	margin: 0; // for Safari
+	background: none;
+	border: none;
+	cursor: pointer;
+	color: inherit;
+	touch-action: manipulation;
+	tap-highlight-color: transparent;
+	-webkit-tap-highlight-color: transparent;
+	font-size: 1em;
+	font-family: inherit;
+	line-height: inherit;
+	max-width: 100%;
+
+	&, * {
+		@extend ._noSelect;
+	}
+
+	* {
+		pointer-events: none;
+	}
+
+	&:focus-visible {
+		outline: none;
+	}
+
+	&:disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+}
+
+._buttonPrimary {
+	@extend ._button;
+	color: var(--fgOnAccent);
+	background: var(--accent);
+
+	&:not(:disabled):hover {
+		background: var(--X8);
+	}
+
+	&:not(:disabled):active {
+		background: var(--X9);
+	}
+}
+
+._buttonGradate {
+	@extend ._buttonPrimary;
+	color: var(--fgOnAccent);
+	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+
+	&:not(:disabled):hover {
+		background: linear-gradient(90deg, var(--X8), var(--X8));
+	}
+
+	&:not(:disabled):active {
+		background: linear-gradient(90deg, var(--X8), var(--X8));
+	}
+}
+
+._help {
+	color: var(--accent);
+	cursor: help
+}
+
+._textButton {
+	@extend ._button;
+	color: var(--accent);
+
+	&:not(:disabled):hover {
+		text-decoration: underline;
+	}
+}
+
+._inputs {
+	display: flex;
+	margin: 32px 0;
+
+	&:first-child {
+		margin-top: 8px;
+	}
+
+	&:last-child {
+		margin-bottom: 8px;
+	}
+
+	> * {
+		flex: 1;
+		margin: 0 !important;
+
+		&:not(:first-child) {
+			margin-left: 8px !important;
+		}
+
+		&:not(:last-child) {
+			margin-right: 8px !important;
+		}
+	}
+}
+
+._panel {
+	background: var(--panel);
+	border-radius: var(--radius);
+	overflow: clip;
+}
+
+._block {
+	@extend ._panel;
+
+	& + ._block {
+		margin-top: var(--margin);
+	}
+}
+
+._gap {
+	margin: var(--margin) 0;
+}
+
+// TODO: 廃止
+._card {
+	@extend ._panel;
+
+	// TODO: _cardTitle に
+	> ._title {
+		margin: 0;
+		padding: 22px 32px;
+		font-size: 1em;
+		border-bottom: solid 1px var(--panelHeaderDivider);
+		font-weight: bold;
+		background: var(--panelHeaderBg);
+		color: var(--panelHeaderFg);
+
+		@media (max-width: 500px) {
+			padding: 16px;
+			font-size: 1em;
+		}
+	}
+
+	// TODO: _cardContent に
+	> ._content {
+		padding: 32px;
+
+		@media (max-width: 500px) {
+			padding: 16px;
+		}
+
+		&._noPad {
+			padding: 0 !important;
+		}
+
+		& + ._content {
+			border-top: solid 0.5px var(--divider);
+		}
+	}
+
+	// TODO: _cardFooter に
+	> ._footer {
+		border-top: solid 0.5px var(--divider);
+		padding: 24px 32px;
+
+		@media (max-width: 500px) {
+			padding: 16px;
+		}
+	}
+}
+
+._borderButton {
+	@extend ._button;
+	display: block;
+	width: 100%;
+	padding: 10px;
+	box-sizing: border-box;
+	text-align: center;
+	border: solid 0.5px var(--divider);
+	border-radius: var(--radius);
+
+	&:active {
+		border-color: var(--accent);
+	}
+}
+
+._popup {
+	background: var(--popup);
+	border-radius: var(--radius);
+	contain: content;
+}
+
+// TODO: 廃止
+._monolithic_ {
+	._section:not(:empty) {
+		box-sizing: border-box;
+		padding: var(--root-margin, 32px);
+	
+		@media (max-width: 500px) {
+			--root-margin: 10px;
+		}
+	
+		& + ._section:not(:empty) {
+			border-top: solid 0.5px var(--divider);
+		}
+	}
+}
+
+._narrow_ ._card {
+	> ._title {
+		padding: 16px;
+		font-size: 1em;
+	}
+
+	> ._content {
+		padding: 16px;
+	}
+
+	> ._footer {
+		padding: 16px;
+	}
+}
+
+._acrylic {
+	background: var(--acrylicPanel);
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+}
+
+._formBlock {
+	margin: 1.5em 0;
+}
+
+._formRoot {
+	> ._formBlock:first-child {
+		margin-top: 0;
+	}
+
+	> ._formBlock:last-child {
+		margin-bottom: 0;
+	}
+}
+
+._formLinksGrid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	grid-gap: 12px;
+}
+
+._formLinks {
+	> *:not(:last-child) {
+		margin-bottom: 8px;
+	}
+}
+
+._beta {
+	margin-left: 0.7em;
+	font-size: 65%;
+	padding: 2px 3px;
+	color: var(--accent);
+	border: solid 1px var(--accent);
+	border-radius: 4px;
+	vertical-align: top;
+}
+
+._table {
+	> ._row {
+		display: flex;
+
+		&:not(:last-child) {
+			margin-bottom: 16px;
+
+			@media (max-width: 500px) {
+				margin-bottom: 8px;
+			}
+		}
+
+		> ._cell {
+			flex: 1;
+
+			> ._label {
+				font-size: 80%;
+				opacity: 0.7;
+
+				> ._icon {
+					margin-right: 4px;
+					display: none;
+				}
+			}
+		}
+	}
+}
+
+._fullinfo {
+	padding: 64px 32px;
+	text-align: center;
+
+	> img {
+		vertical-align: bottom;
+		height: 128px;
+		margin-bottom: 16px;
+		border-radius: 16px;
+	}
+}
+
+._keyValue {
+	display: flex;
+
+	> * {
+		flex: 1;
+	}
+}
+
+._link {
+	color: var(--link);
+}
+
+._caption {
+	font-size: 0.8em;
+	opacity: 0.7;
+}
+
+._monospace {
+	font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace !important;
+}
+
+._code {
+	@extend ._monospace;
+	background: #2d2d2d;
+	color: #ccc;
+	font-size: 14px;
+	line-height: 1.5;
+	padding: 5px;
+}
+
+.prism-editor__textarea:focus {
+	outline: none;
+}
+
+._zoom {
+	transition-duration: 0.5s, 0.5s;
+	transition-property: opacity, transform;
+	transition-timing-function: cubic-bezier(0,.5,.5,1);
+}
+
+.zoom-enter-active, .zoom-leave-active {
+	transition: opacity 0.5s, transform 0.5s !important;
+}
+.zoom-enter-from, .zoom-leave-to {
+	opacity: 0;
+	transform: scale(0.9);
+}
+
+@keyframes blink {
+	0% { opacity: 1; transform: scale(1); }
+	30% { opacity: 1; transform: scale(1); }
+	90% { opacity: 0; transform: scale(0.5); }
+}
+
+@keyframes tada {
+	from {
+		transform: scale3d(1, 1, 1);
+	}
+
+	10%,
+	20% {
+		transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+	}
+
+	30%,
+	50%,
+	70%,
+	90% {
+		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+	}
+
+	40%,
+	60%,
+	80% {
+		transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+	}
+
+	to {
+		transform: scale3d(1, 1, 1);
+	}
+}
+
+._anime_bounce {
+	will-change: transform;
+  animation: bounce ease 0.7s;
+  animation-iteration-count: 1;
+  transform-origin: 50% 50%;
+}
+._anime_bounce_ready {
+	will-change: transform;
+	transform:  scaleX(0.90) scaleY(0.90) ;
+}
+._anime_bounce_standBy {
+	transition: transform 0.1s ease;
+}
+
+@keyframes bounce{
+  0% {
+    transform:  scaleX(0.90) scaleY(0.90) ;
+  }
+  19% {
+    transform:  scaleX(1.10) scaleY(1.10) ;
+  }
+  48% {
+    transform:  scaleX(0.95) scaleY(0.95) ;
+  }
+  100% {
+    transform:  scaleX(1.00) scaleY(1.00) ;
+  }
+}
diff --git a/packages/frontend/src/theme-store.ts b/packages/frontend/src/theme-store.ts
new file mode 100644
index 0000000000..fdc92ed793
--- /dev/null
+++ b/packages/frontend/src/theme-store.ts
@@ -0,0 +1,34 @@
+import { api } from '@/os';
+import { $i } from '@/account';
+import { Theme } from './scripts/theme';
+
+const lsCacheKey = $i ? `themes:${$i.id}` : '';
+
+export function getThemes(): Theme[] {
+	return JSON.parse(localStorage.getItem(lsCacheKey) || '[]');
+}
+
+export async function fetchThemes(): Promise<void> {
+	if ($i == null) return;
+
+	try {
+		const themes = await api('i/registry/get', { scope: ['client'], key: 'themes' });
+		localStorage.setItem(lsCacheKey, JSON.stringify(themes));
+	} catch (err) {
+		if (err.code === 'NO_SUCH_KEY') return;
+		throw err;
+	}
+}
+
+export async function addTheme(theme: Theme): Promise<void> {
+	await fetchThemes();
+	const themes = getThemes().concat(theme);
+	await api('i/registry/set', { scope: ['client'], key: 'themes', value: themes });
+	localStorage.setItem(lsCacheKey, JSON.stringify(themes));
+}
+
+export async function removeTheme(theme: Theme): Promise<void> {
+	const themes = getThemes().filter(t => t.id !== theme.id);
+	await api('i/registry/set', { scope: ['client'], key: 'themes', value: themes });
+	localStorage.setItem(lsCacheKey, JSON.stringify(themes));
+}
diff --git a/packages/frontend/src/themes/_dark.json5 b/packages/frontend/src/themes/_dark.json5
new file mode 100644
index 0000000000..88ec8a5459
--- /dev/null
+++ b/packages/frontend/src/themes/_dark.json5
@@ -0,0 +1,99 @@
+// ダークテーマのベーステーマ
+// このテーマが直接使われることは無い
+{
+	id: 'dark',
+
+	name: 'Dark',
+	author: 'syuilo',
+	desc: 'Default dark theme',
+	kind: 'dark',
+
+	props: {
+		accent: '#86b300',
+		accentDarken: ':darken<10<@accent',
+		accentLighten: ':lighten<10<@accent',
+		accentedBg: ':alpha<0.15<@accent',
+		focus: ':alpha<0.3<@accent',
+		bg: '#000',
+		acrylicBg: ':alpha<0.5<@bg',
+		fg: '#dadada',
+		fgTransparentWeak: ':alpha<0.75<@fg',
+		fgTransparent: ':alpha<0.5<@fg',
+		fgHighlighted: ':lighten<3<@fg',
+		fgOnAccent: '#fff',
+		divider: 'rgba(255, 255, 255, 0.1)',
+		indicator: '@accent',
+		panel: ':lighten<3<@bg',
+		panelHighlight: ':lighten<3<@panel',
+		panelHeaderBg: ':lighten<3<@panel',
+		panelHeaderFg: '@fg',
+		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',
+		navBg: '@panel',
+		navFg: '@fg',
+		navHoverFg: ':lighten<17<@fg',
+		navActive: '@accent',
+		navIndicator: '@indicator',
+		link: '#44a4c1',
+		hashtag: '#ff9156',
+		mention: '@accent',
+		mentionMe: '@mention',
+		renote: '#229e82',
+		modalBg: 'rgba(0, 0, 0, 0.5)',
+		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
+		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
+		dateLabelFg: '@fg',
+		infoBg: '#253142',
+		infoFg: '#fff',
+		infoWarnBg: '#42321c',
+		infoWarnFg: '#ffbd3e',
+		switchBg: 'rgba(255, 255, 255, 0.15)',
+		cwBg: '#687390',
+		cwFg: '#393f4f',
+		cwHoverBg: '#707b97',
+		buttonBg: 'rgba(255, 255, 255, 0.05)',
+		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)',
+		driveFolderBg: ':alpha<0.3<@accent',
+		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
+		badge: '#31b1ce',
+		messageBg: '@bg',
+		success: '#86b300',
+		error: '#ec4137',
+		warn: '#ecb637',
+		codeString: '#ffb675',
+		codeNumber: '#cfff9e',
+		codeBoolean: '#c59eff',
+		deckDivider: '#000',
+		htmlThemeColor: '@bg',
+		X2: ':darken<2<@panel',
+		X3: 'rgba(255, 255, 255, 0.05)',
+		X4: 'rgba(255, 255, 255, 0.1)',
+		X5: 'rgba(255, 255, 255, 0.05)',
+		X6: 'rgba(255, 255, 255, 0.15)',
+		X7: 'rgba(255, 255, 255, 0.05)',
+		X8: ':lighten<5<@accent',
+		X9: ':darken<5<@accent',
+		X10: ':alpha<0.4<@accent',
+		X11: 'rgba(0, 0, 0, 0.3)',
+		X12: 'rgba(255, 255, 255, 0.1)',
+		X13: 'rgba(255, 255, 255, 0.15)',
+		X14: ':alpha<0.5<@navBg',
+		X15: ':alpha<0<@panel',
+		X16: ':alpha<0.7<@panel',
+		X17: ':alpha<0.8<@bg',
+	},
+}
diff --git a/packages/frontend/src/themes/_light.json5 b/packages/frontend/src/themes/_light.json5
new file mode 100644
index 0000000000..bad1291c83
--- /dev/null
+++ b/packages/frontend/src/themes/_light.json5
@@ -0,0 +1,99 @@
+// ライトテーマのベーステーマ
+// このテーマが直接使われることは無い
+{
+	id: 'light',
+
+	name: 'Light',
+	author: 'syuilo',
+	desc: 'Default light theme',
+	kind: 'light',
+
+	props: {
+		accent: '#86b300',
+		accentDarken: ':darken<10<@accent',
+		accentLighten: ':lighten<10<@accent',
+		accentedBg: ':alpha<0.15<@accent',
+		focus: ':alpha<0.3<@accent',
+		bg: '#fff',
+		acrylicBg: ':alpha<0.5<@bg',
+		fg: '#5f5f5f',
+		fgTransparentWeak: ':alpha<0.75<@fg',
+		fgTransparent: ':alpha<0.5<@fg',
+		fgHighlighted: ':darken<3<@fg',
+		fgOnAccent: '#fff',
+		divider: 'rgba(0, 0, 0, 0.1)',
+		indicator: '@accent',
+		panel: ':lighten<3<@bg',
+		panelHighlight: ':darken<3<@panel',
+		panelHeaderBg: ':lighten<3<@panel',
+		panelHeaderFg: '@fg',
+		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',
+		navBg: '@panel',
+		navFg: '@fg',
+		navHoverFg: ':darken<17<@fg',
+		navActive: '@accent',
+		navIndicator: '@indicator',
+		link: '#44a4c1',
+		hashtag: '#ff9156',
+		mention: '@accent',
+		mentionMe: '@mention',
+		renote: '#229e82',
+		modalBg: 'rgba(0, 0, 0, 0.3)',
+		scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
+		scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
+		dateLabelFg: '@fg',
+		infoBg: '#e5f5ff',
+		infoFg: '#72818a',
+		infoWarnBg: '#fff0db',
+		infoWarnFg: '#8f6e31',
+		switchBg: 'rgba(0, 0, 0, 0.15)',
+		cwBg: '#b1b9c1',
+		cwFg: '#fff',
+		cwHoverBg: '#bbc4ce',
+		buttonBg: 'rgba(0, 0, 0, 0.05)',
+		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)',
+		driveFolderBg: ':alpha<0.3<@accent',
+		wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
+		badge: '#31b1ce',
+		messageBg: '@bg',
+		success: '#86b300',
+		error: '#ec4137',
+		warn: '#ecb637',
+		codeString: '#b98710',
+		codeNumber: '#0fbbbb',
+		codeBoolean: '#62b70c',
+		deckDivider: ':darken<3<@bg',
+		htmlThemeColor: '@bg',
+		X2: ':darken<2<@panel',
+		X3: 'rgba(0, 0, 0, 0.05)',
+		X4: 'rgba(0, 0, 0, 0.1)',
+		X5: 'rgba(0, 0, 0, 0.05)',
+		X6: 'rgba(0, 0, 0, 0.25)',
+		X7: 'rgba(0, 0, 0, 0.05)',
+		X8: ':lighten<5<@accent',
+		X9: ':darken<5<@accent',
+		X10: ':alpha<0.4<@accent',
+		X11: 'rgba(0, 0, 0, 0.1)',
+		X12: 'rgba(0, 0, 0, 0.1)',
+		X13: 'rgba(0, 0, 0, 0.15)',
+		X14: ':alpha<0.5<@navBg',
+		X15: ':alpha<0<@panel',
+		X16: ':alpha<0.7<@panel',
+		X17: ':alpha<0.8<@bg',
+	},
+}
diff --git a/packages/frontend/src/themes/d-astro.json5 b/packages/frontend/src/themes/d-astro.json5
new file mode 100644
index 0000000000..c6a927ec3a
--- /dev/null
+++ b/packages/frontend/src/themes/d-astro.json5
@@ -0,0 +1,78 @@
+{
+	id: '080a01c5-377d-4fbb-88cc-6bb5d04977ea',
+	base: 'dark',
+	name: 'Mi Astro Dark',
+	author: 'syuilo',
+	props: {
+		bg: '#232125',
+		fg: '#efdab9',
+		cwBg: '#687390',
+		cwFg: '#393f4f',
+		link: '#78b0a0',
+		warn: '#ecb637',
+		badge: '#31b1ce',
+		error: '#ec4137',
+		focus: ':alpha<0.3<@accent',
+		navBg: '@panel',
+		navFg: '@fg',
+		panel: '#2a272b',
+		accent: '#81c08b',
+		header: ':alpha<0.7<@bg',
+		infoBg: '#253142',
+		infoFg: '#fff',
+		renote: '#659CC8',
+		shadow: 'rgba(0, 0, 0, 0.3)',
+		divider: 'rgba(255, 255, 255, 0.1)',
+		hashtag: '#ff9156',
+		mention: '#ffd152',
+		modalBg: 'rgba(0, 0, 0, 0.5)',
+		success: '#86b300',
+		buttonBg: 'rgba(255, 255, 255, 0.05)',
+		acrylicBg: ':alpha<0.5<@bg',
+		cwHoverBg: '#707b97',
+		indicator: '@accent',
+		mentionMe: '#fb5d38',
+		messageBg: '@bg',
+		navActive: '@accent',
+		infoWarnBg: '#42321c',
+		infoWarnFg: '#ffbd3e',
+		navHoverFg: ':lighten<17<@fg',
+		dateLabelFg: '@fg',
+		inputBorder: 'rgba(255, 255, 255, 0.1)',
+		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
+		panelBorder: '" solid 1px var(--divider)',
+		accentDarken: ':darken<10<@accent',
+		acrylicPanel: ':alpha<0.5<@panel',
+		navIndicator: '@accent',
+		accentLighten: ':lighten<10<@accent',
+		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
+		buttonGradateA: '@accent',
+		buttonGradateB: ':hue<-20<@accent',
+		driveFolderBg: ':alpha<0.3<@accent',
+		fgHighlighted: ':lighten<3<@fg',
+		panelHeaderBg: ':lighten<3<@panel',
+		panelHeaderFg: '@fg',
+		htmlThemeColor: '@bg',
+		panelHighlight: ':lighten<3<@panel',
+		listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
+		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
+		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
+		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
+		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
+		X2: ':darken<2<@panel',
+		X3: 'rgba(255, 255, 255, 0.05)',
+		X4: 'rgba(255, 255, 255, 0.1)',
+		X5: 'rgba(255, 255, 255, 0.05)',
+		X6: 'rgba(255, 255, 255, 0.15)',
+		X7: 'rgba(255, 255, 255, 0.05)',
+		X8: ':lighten<5<@accent',
+		X9: ':darken<5<@accent',
+		X10: ':alpha<0.4<@accent',
+		X11: 'rgba(0, 0, 0, 0.3)',
+		X12: 'rgba(255, 255, 255, 0.1)',
+		X13: 'rgba(255, 255, 255, 0.15)',
+		X14: ':alpha<0.5<@navBg',
+		X15: ':alpha<0<@panel',
+		X16: ':alpha<0.7<@panel',
+	},
+}
diff --git a/packages/frontend/src/themes/d-botanical.json5 b/packages/frontend/src/themes/d-botanical.json5
new file mode 100644
index 0000000000..c03b95e2d7
--- /dev/null
+++ b/packages/frontend/src/themes/d-botanical.json5
@@ -0,0 +1,26 @@
+{
+	id: '504debaf-4912-6a4c-5059-1db08a76b737',
+
+	name: 'Mi Botanical Dark',
+	author: 'syuilo',
+
+	base: 'dark',
+
+	props: {
+		accent: 'rgb(148, 179, 0)',
+		bg: 'rgb(37, 38, 36)',
+		fg: 'rgb(216, 212, 199)',
+		fgHighlighted: '#fff',
+		divider: 'rgba(255, 255, 255, 0.14)',
+		panel: 'rgb(47, 47, 44)',
+		panelHeaderBg: '@panel',
+		panelHeaderDivider: '@divider',
+		header: ':alpha<0.7<@panel',
+		navBg: '#363636',
+		renote: '@accent',
+		mention: 'rgb(212, 153, 76)',
+		mentionMe: 'rgb(212, 210, 76)',
+		hashtag: '#5bcbb0',
+		link: '@accent',
+	},
+}
diff --git a/packages/frontend/src/themes/d-cherry.json5 b/packages/frontend/src/themes/d-cherry.json5
new file mode 100644
index 0000000000..a7e1ad1c80
--- /dev/null
+++ b/packages/frontend/src/themes/d-cherry.json5
@@ -0,0 +1,20 @@
+{
+	id: '679b3b87-a4e9-4789-8696-b56c15cc33b0',
+
+	name: 'Mi Cherry Dark',
+	author: 'syuilo',
+
+	base: 'dark',
+
+	props: {
+		accent: 'rgb(255, 89, 117)',
+		bg: 'rgb(28, 28, 37)',
+		fg: 'rgb(236, 239, 244)',
+		panel: 'rgb(35, 35, 47)',
+		renote: '@accent',
+		link: '@accent',
+		mention: '@accent',
+		hashtag: '@accent',
+		divider: 'rgb(63, 63, 80)',
+	},
+}
diff --git a/packages/frontend/src/themes/d-dark.json5 b/packages/frontend/src/themes/d-dark.json5
new file mode 100644
index 0000000000..d24ce4df69
--- /dev/null
+++ b/packages/frontend/src/themes/d-dark.json5
@@ -0,0 +1,26 @@
+{
+	id: '8050783a-7f63-445a-b270-36d0f6ba1677',
+
+	name: 'Mi Dark',
+	author: 'syuilo',
+	desc: 'Default light theme',
+
+	base: 'dark',
+
+	props: {
+		bg: '#232323',
+		fg: 'rgb(199, 209, 216)',
+		fgHighlighted: '#fff',
+		divider: 'rgba(255, 255, 255, 0.14)',
+		panel: '#2d2d2d',
+		panelHeaderBg: '@panel',
+		panelHeaderDivider: '@divider',
+		header: ':alpha<0.7<@panel',
+		navBg: '#363636',
+		renote: '@accent',
+		mention: '#da6d35',
+		mentionMe: '#d44c4c',
+		hashtag: '#4cb8d4',
+		link: '@accent',
+	},
+}
diff --git a/packages/frontend/src/themes/d-future.json5 b/packages/frontend/src/themes/d-future.json5
new file mode 100644
index 0000000000..b6fa1ab0c1
--- /dev/null
+++ b/packages/frontend/src/themes/d-future.json5
@@ -0,0 +1,27 @@
+{
+	id: '32a637ef-b47a-4775-bb7b-bacbb823f865',
+
+	name: 'Mi Future Dark',
+	author: 'syuilo',
+
+	base: 'dark',
+
+	props: {
+		accent: '#63e2b7',
+		bg: '#101014',
+		fg: '#D5D5D6',
+		fgHighlighted: '#fff',
+		fgOnAccent: '#000',
+		divider: 'rgba(255, 255, 255, 0.1)',
+		panel: '#18181c',
+		panelHeaderBg: '@panel',
+		panelHeaderDivider: '@divider',
+		renote: '@accent',
+		mention: '#f2c97d',
+		mentionMe: '@accent',
+		hashtag: '#70c0e8',
+		link: '#e88080',
+		buttonGradateA: '@accent',
+		buttonGradateB: ':saturate<30<:hue<30<@accent',
+	},
+}
diff --git a/packages/frontend/src/themes/d-green-lime.json5 b/packages/frontend/src/themes/d-green-lime.json5
new file mode 100644
index 0000000000..a6983b9ac2
--- /dev/null
+++ b/packages/frontend/src/themes/d-green-lime.json5
@@ -0,0 +1,24 @@
+{
+	id: '02816013-8107-440f-877e-865083ffe194',
+
+	name: 'Mi Green+Lime Dark',
+	author: 'syuilo',
+
+	base: 'dark',
+
+	props: {
+		accent: '#b4e900',
+		bg: '#0C1210',
+		fg: '#dee7e4',
+		fgHighlighted: '#fff',
+		fgOnAccent: '#192320',
+		divider: '#e7fffb24',
+		panel: '#192320',
+		panelHeaderBg: '@panel',
+		panelHeaderDivider: '@divider',
+		popup: '#293330',
+		renote: '@accent',
+		mentionMe: '#ffaa00',
+		link: '#24d7ce',
+	},
+}
diff --git a/packages/frontend/src/themes/d-green-orange.json5 b/packages/frontend/src/themes/d-green-orange.json5
new file mode 100644
index 0000000000..62adc39e29
--- /dev/null
+++ b/packages/frontend/src/themes/d-green-orange.json5
@@ -0,0 +1,24 @@
+{
+	id: 'dc489603-27b5-424a-9b25-1ff6aec9824a',
+
+	name: 'Mi Green+Orange Dark',
+	author: 'syuilo',
+
+	base: 'dark',
+
+	props: {
+		accent: '#e97f00',
+		bg: '#0C1210',
+		fg: '#dee7e4',
+		fgHighlighted: '#fff',
+		fgOnAccent: '#192320',
+		divider: '#e7fffb24',
+		panel: '#192320',
+		panelHeaderBg: '@panel',
+		panelHeaderDivider: '@divider',
+		popup: '#293330',
+		renote: '@accent',
+		mentionMe: '#b4e900',
+		link: '#24d7ce',
+	},
+}
diff --git a/packages/frontend/src/themes/d-ice.json5 b/packages/frontend/src/themes/d-ice.json5
new file mode 100644
index 0000000000..179b060dcf
--- /dev/null
+++ b/packages/frontend/src/themes/d-ice.json5
@@ -0,0 +1,13 @@
+{
+	id: '66e7e5a9-cd43-42cd-837d-12f47841fa34',
+
+	name: 'Mi Ice Dark',
+	author: 'syuilo',
+
+	base: 'dark',
+
+	props: {
+		accent: '#47BFE8',
+		bg: '#212526',
+	},
+}
diff --git a/packages/frontend/src/themes/d-persimmon.json5 b/packages/frontend/src/themes/d-persimmon.json5
new file mode 100644
index 0000000000..e36265ff10
--- /dev/null
+++ b/packages/frontend/src/themes/d-persimmon.json5
@@ -0,0 +1,25 @@
+{
+	id: 'c503d768-7c70-4db2-a4e6-08264304bc8d',
+
+	name: 'Mi Persimmon Dark',
+	author: 'syuilo',
+
+	base: 'dark',
+
+	props: {
+		accent: 'rgb(206, 102, 65)',
+		bg: 'rgb(31, 33, 31)',
+		fg: '#cdd8c7',
+		fgHighlighted: '#fff',
+		divider: 'rgba(255, 255, 255, 0.14)',
+		panel: 'rgb(41, 43, 41)',
+		infoFg: '@fg',
+		infoBg: '#333c3b',
+		navBg: '#141714',
+		renote: '@accent',
+		mention: '@accent',
+		mentionMe: '#de6161',
+		hashtag: '#68bad0',
+		link: '#a1c758',
+	},
+}
diff --git a/packages/frontend/src/themes/d-u0.json5 b/packages/frontend/src/themes/d-u0.json5
new file mode 100644
index 0000000000..b270f809ac
--- /dev/null
+++ b/packages/frontend/src/themes/d-u0.json5
@@ -0,0 +1,88 @@
+{
+	id: '7a5bc13b-df8f-4d44-8e94-4452f0c634bb',
+	base: 'dark',
+	name: 'Mi U0 Dark',
+	props: {
+		X2: ':darken<2<@panel',
+		X3: 'rgba(255, 255, 255, 0.05)',
+		X4: 'rgba(255, 255, 255, 0.1)',
+		X5: 'rgba(255, 255, 255, 0.05)',
+		X6: 'rgba(255, 255, 255, 0.15)',
+		X7: 'rgba(255, 255, 255, 0.05)',
+		X8: ':lighten<5<@accent',
+		X9: ':darken<5<@accent',
+		bg: '#172426',
+		fg: '#dadada',
+		X10: ':alpha<0.4<@accent',
+		X11: 'rgba(0, 0, 0, 0.3)',
+		X12: 'rgba(255, 255, 255, 0.1)',
+		X13: 'rgba(255, 255, 255, 0.15)',
+		X14: ':alpha<0.5<@navBg',
+		X15: ':alpha<0<@panel',
+		X16: ':alpha<0.7<@panel',
+		X17: ':alpha<0.8<@bg',
+		cwBg: '#687390',
+		cwFg: '#393f4f',
+		link: '@accent',
+		warn: '#ecb637',
+		badge: '#31b1ce',
+		error: '#ec4137',
+		focus: ':alpha<0.3<@accent',
+		navBg: '@panel',
+		navFg: '@fg',
+		panel: ':lighten<3<@bg',
+		popup: ':lighten<3<@panel',
+		accent: '#00a497',
+		header: ':alpha<0.7<@panel',
+		infoBg: '#253142',
+		infoFg: '#fff',
+		renote: '@accent',
+		shadow: 'rgba(0, 0, 0, 0.3)',
+		divider: 'rgba(255, 255, 255, 0.1)',
+		hashtag: '#e6b422',
+		mention: '@accent',
+		modalBg: 'rgba(0, 0, 0, 0.5)',
+		success: '#86b300',
+		buttonBg: 'rgba(255, 255, 255, 0.05)',
+		switchBg: 'rgba(255, 255, 255, 0.15)',
+		acrylicBg: ':alpha<0.5<@bg',
+		cwHoverBg: '#707b97',
+		indicator: '@accent',
+		mentionMe: '@mention',
+		messageBg: '@bg',
+		navActive: '@accent',
+		accentedBg: ':alpha<0.15<@accent',
+		codeNumber: '#cfff9e',
+		codeString: '#ffb675',
+		fgOnAccent: '#fff',
+		infoWarnBg: '#42321c',
+		infoWarnFg: '#ffbd3e',
+		navHoverFg: ':lighten<17<@fg',
+		codeBoolean: '#c59eff',
+		dateLabelFg: '@fg',
+		inputBorder: 'rgba(255, 255, 255, 0.1)',
+		panelBorder: '" solid 1px var(--divider)',
+		accentDarken: ':darken<10<@accent',
+		acrylicPanel: ':alpha<0.5<@panel',
+		navIndicator: '@indicator',
+		accentLighten: ':lighten<10<@accent',
+		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
+		driveFolderBg: ':alpha<0.3<@accent',
+		fgHighlighted: ':lighten<3<@fg',
+		fgTransparent: ':alpha<0.5<@fg',
+		panelHeaderBg: ':lighten<3<@panel',
+		panelHeaderFg: '@fg',
+		buttonGradateA: '@accent',
+		buttonGradateB: ':hue<20<@accent',
+		htmlThemeColor: '@bg',
+		panelHighlight: ':lighten<3<@panel',
+		listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
+		scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
+		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
+		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
+		fgTransparentWeak: ':alpha<0.75<@fg',
+		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
+		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
+		deckDivider: '#142022',
+	},
+}
diff --git a/packages/frontend/src/themes/l-apricot.json5 b/packages/frontend/src/themes/l-apricot.json5
new file mode 100644
index 0000000000..1ed5525575
--- /dev/null
+++ b/packages/frontend/src/themes/l-apricot.json5
@@ -0,0 +1,22 @@
+{
+	id: '0ff48d43-aab3-46e7-ab12-8492110d2e2b',
+
+	name: 'Mi Apricot Light',
+	author: 'syuilo',
+
+	base: 'light',
+
+	props: {
+		accent: 'rgb(234, 154, 82)',
+		bg: '#e6e5e2',
+		fg: 'rgb(149, 143, 139)',
+		panel: '#EEECE8',
+		renote: '@accent',
+		link: '@accent',
+		mention: '@accent',
+		hashtag: '@accent',
+		inputBorder: 'rgba(0, 0, 0, 0.1)',
+		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
+		infoBg: 'rgb(226, 235, 241)',
+	},
+}
diff --git a/packages/frontend/src/themes/l-cherry.json5 b/packages/frontend/src/themes/l-cherry.json5
new file mode 100644
index 0000000000..5ad240241e
--- /dev/null
+++ b/packages/frontend/src/themes/l-cherry.json5
@@ -0,0 +1,21 @@
+{
+	id: 'ac168876-f737-4074-a3fc-a370c732ef48',
+
+	name: 'Mi Cherry Light',
+	author: 'syuilo',
+
+	base: 'light',
+
+	props: {
+		accent: 'rgb(219, 96, 114)',
+		bg: 'rgb(254, 248, 249)',
+		fg: 'rgb(152, 13, 26)',
+		panel: 'rgb(255, 255, 255)',
+		renote: '@accent',
+		link: 'rgb(156, 187, 5)',
+		mention: '@accent',
+		hashtag: '@accent',
+		divider: 'rgba(134, 51, 51, 0.1)',
+		inputBorderHover: 'rgb(238, 221, 222)',
+	},
+}
diff --git a/packages/frontend/src/themes/l-coffee.json5 b/packages/frontend/src/themes/l-coffee.json5
new file mode 100644
index 0000000000..fbcd4fa9ef
--- /dev/null
+++ b/packages/frontend/src/themes/l-coffee.json5
@@ -0,0 +1,21 @@
+{
+	id: '6ed80faa-74f0-42c2-98e4-a64d9e138eab',
+
+	name: 'Mi Coffee Light',
+	author: 'syuilo',
+
+	base: 'light',
+
+	props: {
+		accent: '#9f8989',
+		bg: '#f5f3f3',
+		fg: '#7f6666',
+		panel: '#fff',
+		divider: 'rgba(87, 68, 68, 0.1)',
+		renote: 'rgb(160, 172, 125)',
+		link: 'rgb(137, 151, 159)',
+		mention: '@accent',
+		mentionMe: 'rgb(170, 149, 98)',
+		hashtag: '@accent',
+	},
+}
diff --git a/packages/frontend/src/themes/l-light.json5 b/packages/frontend/src/themes/l-light.json5
new file mode 100644
index 0000000000..248355c945
--- /dev/null
+++ b/packages/frontend/src/themes/l-light.json5
@@ -0,0 +1,20 @@
+{
+	id: '4eea646f-7afa-4645-83e9-83af0333cd37',
+
+	name: 'Mi Light',
+	author: 'syuilo',
+	desc: 'Default light theme',
+
+	base: 'light',
+
+	props: {
+		bg: '#f9f9f9',
+		fg: '#676767',
+		divider: '#e8e8e8',
+		header: ':alpha<0.7<@panel',
+		navBg: '#fff',
+		panel: '#fff',
+		panelHeaderDivider: '@divider',
+		mentionMe: 'rgb(0, 179, 70)',
+	},
+}
diff --git a/packages/frontend/src/themes/l-rainy.json5 b/packages/frontend/src/themes/l-rainy.json5
new file mode 100644
index 0000000000..283dd74c6c
--- /dev/null
+++ b/packages/frontend/src/themes/l-rainy.json5
@@ -0,0 +1,21 @@
+{
+	id: 'a58a0abb-ff8c-476a-8dec-0ad7837e7e96',
+
+	name: 'Mi Rainy Light',
+	author: 'syuilo',
+
+	base: 'light',
+
+	props: {
+		accent: '#5db0da',
+		bg: 'rgb(246 248 249)',
+		fg: '#636b71',
+		panel: '#fff',
+		divider: 'rgb(230 233 234)',
+		panelHeaderDivider: '@divider',
+		renote: '@accent',
+		link: '@accent',
+		mention: '@accent',
+		hashtag: '@accent',
+	},
+}
diff --git a/packages/frontend/src/themes/l-sushi.json5 b/packages/frontend/src/themes/l-sushi.json5
new file mode 100644
index 0000000000..5846927d65
--- /dev/null
+++ b/packages/frontend/src/themes/l-sushi.json5
@@ -0,0 +1,18 @@
+{
+	id: '213273e5-7d20-d5f0-6e36-1b6a4f67115c',
+
+	name: 'Mi Sushi Light',
+	author: 'syuilo',
+
+	base: 'light',
+
+	props: {
+		accent: '#e36749',
+		bg: '#f0eee9',
+		fg: '#5f5f5f',
+		renote: '@accent',
+		link: '@accent',
+		mention: '@accent',
+		hashtag: '#229e82',
+	},
+}
diff --git a/packages/frontend/src/themes/l-u0.json5 b/packages/frontend/src/themes/l-u0.json5
new file mode 100644
index 0000000000..03b114ba39
--- /dev/null
+++ b/packages/frontend/src/themes/l-u0.json5
@@ -0,0 +1,87 @@
+{
+	id: 'e2c940b5-6e9a-4c03-b738-261c720c426d',
+	base: 'light',
+	name: 'Mi U0 Light',
+	props: {
+		X2: ':darken<2<@panel',
+		X3: 'rgba(255, 255, 255, 0.05)',
+		X4: 'rgba(255, 255, 255, 0.1)',
+		X5: 'rgba(255, 255, 255, 0.05)',
+		X6: 'rgba(255, 255, 255, 0.15)',
+		X7: 'rgba(255, 255, 255, 0.05)',
+		X8: ':lighten<5<@accent',
+		X9: ':darken<5<@accent',
+		bg: '#e7e7eb',
+		fg: '#5f5f5f',
+		X10: ':alpha<0.4<@accent',
+		X11: 'rgba(0, 0, 0, 0.3)',
+		X12: 'rgba(255, 255, 255, 0.1)',
+		X13: 'rgba(255, 255, 255, 0.15)',
+		X14: ':alpha<0.5<@navBg',
+		X15: ':alpha<0<@panel',
+		X16: ':alpha<0.7<@panel',
+		X17: ':alpha<0.8<@bg',
+		cwBg: '#687390',
+		cwFg: '#393f4f',
+		link: '@accent',
+		warn: '#ecb637',
+		badge: '#31b1ce',
+		error: '#ec4137',
+		focus: ':alpha<0.3<@accent',
+		navBg: '@panel',
+		navFg: '@fg',
+		panel: ':lighten<3<@bg',
+		popup: ':lighten<3<@panel',
+		accent: '#478384',
+		header: ':alpha<0.7<@panel',
+		infoBg: '#253142',
+		infoFg: '#fff',
+		renote: '@accent',
+		shadow: 'rgba(0, 0, 0, 0.3)',
+		divider: '#4646461a',
+		hashtag: '#1f3134',
+		mention: '@accent',
+		modalBg: 'rgba(0, 0, 0, 0.5)',
+		success: '#86b300',
+		buttonBg: '#0000000d',
+		switchBg: 'rgba(255, 255, 255, 0.15)',
+		acrylicBg: ':alpha<0.5<@bg',
+		cwHoverBg: '#707b97',
+		indicator: '@accent',
+		mentionMe: '@mention',
+		messageBg: '@bg',
+		navActive: '@accent',
+		accentedBg: ':alpha<0.15<@accent',
+		codeNumber: '#cfff9e',
+		codeString: '#ffb675',
+		fgOnAccent: '#fff',
+		infoWarnBg: '#42321c',
+		infoWarnFg: '#ffbd3e',
+		navHoverFg: ':lighten<17<@fg',
+		codeBoolean: '#c59eff',
+		dateLabelFg: '@fg',
+		inputBorder: 'rgba(255, 255, 255, 0.1)',
+		panelBorder: '" solid 1px var(--divider)',
+		accentDarken: ':darken<10<@accent',
+		acrylicPanel: ':alpha<0.5<@panel',
+		navIndicator: '@indicator',
+		accentLighten: ':lighten<10<@accent',
+		buttonHoverBg: '#0000001a',
+		driveFolderBg: ':alpha<0.3<@accent',
+		fgHighlighted: ':lighten<3<@fg',
+		fgTransparent: ':alpha<0.5<@fg',
+		panelHeaderBg: ':lighten<3<@panel',
+		panelHeaderFg: '@fg',
+		buttonGradateA: '@accent',
+		buttonGradateB: ':hue<20<@accent',
+		htmlThemeColor: '@bg',
+		panelHighlight: ':lighten<3<@panel',
+		listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
+		scrollbarHandle: '#74747433',
+		inputBorderHover: 'rgba(255, 255, 255, 0.2)',
+		wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
+		fgTransparentWeak: ':alpha<0.75<@fg',
+		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
+		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
+	},
+}
diff --git a/packages/frontend/src/themes/l-vivid.json5 b/packages/frontend/src/themes/l-vivid.json5
new file mode 100644
index 0000000000..b3c08f38ae
--- /dev/null
+++ b/packages/frontend/src/themes/l-vivid.json5
@@ -0,0 +1,82 @@
+{
+	id: '6128c2a9-5c54-43fe-a47d-17942356470b',
+
+	name: 'Mi Vivid Light',
+	author: 'syuilo',
+
+	base: 'light',
+
+	props: {
+		bg: '#fafafa',
+		fg: '#444',
+		cwBg: '#b1b9c1',
+		cwFg: '#fff',
+		link: '#ff9400',
+		warn: '#ecb637',
+		badge: '#31b1ce',
+		error: '#ec4137',
+		focus: ':alpha<0.3<@accent',
+		navBg: '@panel',
+		navFg: '@fg',
+		panel: '#fff',
+		accent: '#008cff',
+		header: ':alpha<0.7<@panel',
+		infoBg: '#e5f5ff',
+		infoFg: '#72818a',
+		renote: '@accent',
+		shadow: 'rgba(0, 0, 0, 0.1)',
+		divider: 'rgba(0, 0, 0, 0.08)',
+		hashtag: '#92d400',
+		mention: '@accent',
+		modalBg: 'rgba(0, 0, 0, 0.3)',
+		success: '#86b300',
+		buttonBg: 'rgba(0, 0, 0, 0.05)',
+		acrylicBg: ':alpha<0.5<@bg',
+		cwHoverBg: '#bbc4ce',
+		indicator: '@accent',
+		mentionMe: '@mention',
+		messageBg: '@bg',
+		navActive: '@accent',
+		infoWarnBg: '#fff0db',
+		infoWarnFg: '#8f6e31',
+		navHoverFg: ':darken<17<@fg',
+		dateLabelFg: '@fg',
+		inputBorder: 'rgba(0, 0, 0, 0.1)',
+		inputBorderHover: 'rgba(0, 0, 0, 0.2)',
+		panelBorder: '" solid 1px var(--divider)',
+		accentDarken: ':darken<10<@accent',
+		acrylicPanel: ':alpha<0.5<@panel',
+		navIndicator: '@accent',
+		accentLighten: ':lighten<10<@accent',
+		buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
+		driveFolderBg: ':alpha<0.3<@accent',
+		fgHighlighted: ':darken<3<@fg',
+		fgTransparent: ':alpha<0.5<@fg',
+		panelHeaderBg: ':lighten<3<@panel',
+		panelHeaderFg: '@fg',
+		htmlThemeColor: '@bg',
+		panelHighlight: ':darken<3<@panel',
+		listItemHoverBg: 'rgba(0, 0, 0, 0.03)',
+		scrollbarHandle: 'rgba(0, 0, 0, 0.2)',
+		wallpaperOverlay: 'rgba(255, 255, 255, 0.5)',
+		fgTransparentWeak: ':alpha<0.75<@fg',
+		panelHeaderDivider: '@divider',
+		scrollbarHandleHover: 'rgba(0, 0, 0, 0.4)',
+		X2: ':darken<2<@panel',
+		X3: 'rgba(0, 0, 0, 0.05)',
+		X4: 'rgba(0, 0, 0, 0.1)',
+		X5: 'rgba(0, 0, 0, 0.05)',
+		X6: 'rgba(0, 0, 0, 0.25)',
+		X7: 'rgba(0, 0, 0, 0.05)',
+		X8: ':lighten<5<@accent',
+		X9: ':darken<5<@accent',
+		X10: ':alpha<0.4<@accent',
+		X11: 'rgba(0, 0, 0, 0.1)',
+		X12: 'rgba(0, 0, 0, 0.1)',
+		X13: 'rgba(0, 0, 0, 0.15)',
+		X14: ':alpha<0.5<@navBg',
+		X15: ':alpha<0<@panel',
+		X16: ':alpha<0.7<@panel',
+		X17: ':alpha<0.8<@bg',
+	},
+}
diff --git a/packages/frontend/src/types/menu.ts b/packages/frontend/src/types/menu.ts
new file mode 100644
index 0000000000..972f6db214
--- /dev/null
+++ b/packages/frontend/src/types/menu.ts
@@ -0,0 +1,21 @@
+import * as Misskey from 'misskey-js';
+import { Ref } from 'vue';
+
+export type MenuAction = (ev: MouseEvent) => void;
+
+export type MenuDivider = null;
+export type MenuNull = undefined;
+export type MenuLabel = { type: 'label', text: string };
+export type MenuLink = { type: 'link', to: string, text: string, icon?: string, indicate?: boolean, avatar?: Misskey.entities.User };
+export type MenuA = { type: 'a', href: string, target?: string, download?: string, text: string, icon?: string, indicate?: boolean };
+export type MenuUser = { type: 'user', user: Misskey.entities.User, active?: boolean, indicate?: boolean, action: MenuAction };
+export type MenuSwitch = { type: 'switch', ref: Ref<boolean>, text: string, disabled?: boolean };
+export type MenuButton = { type?: 'button', text: string, icon?: string, indicate?: boolean, danger?: boolean, active?: boolean, avatar?: Misskey.entities.User; action: MenuAction };
+export type MenuParent = { type: 'parent', text: string, icon?: string, children: OuterMenuItem[] };
+
+export type MenuPending = { type: 'pending' };
+
+type OuterMenuItem = MenuDivider | MenuNull | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent;
+type OuterPromiseMenuItem = Promise<MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent>;
+export type MenuItem = OuterMenuItem | OuterPromiseMenuItem;
+export type InnerMenuItem = MenuDivider | MenuPending | MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent;
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
new file mode 100644
index 0000000000..7f3fc0e4af
--- /dev/null
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -0,0 +1,139 @@
+<template>
+<component
+	:is="popup.component"
+	v-for="popup in popups"
+	:key="popup.id"
+	v-bind="popup.props"
+	v-on="popup.events"
+/>
+
+<XUpload v-if="uploads.length > 0"/>
+
+<XStreamIndicator/>
+
+<div v-if="pendingApiRequestsCount > 0" id="wait"></div>
+
+<div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
+
+<div v-if="$i && $i.isBot" id="botWarn"><span>{{ i18n.ts.loggedInAsBot }}</span></div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue';
+import { swInject } from './sw-inject';
+import { popup, popups, pendingApiRequestsCount } from '@/os';
+import { uploads } from '@/scripts/upload';
+import * as sound from '@/scripts/sound';
+import { $i } from '@/account';
+import { stream } from '@/stream';
+import { i18n } from '@/i18n';
+
+const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
+const XUpload = defineAsyncComponent(() => import('./upload.vue'));
+
+const dev = _DEV_;
+
+const onNotification = notification => {
+	if ($i.mutingNotificationTypes.includes(notification.type)) return;
+
+	if (document.visibilityState === 'visible') {
+		stream.send('readNotification', {
+			id: notification.id,
+		});
+
+		popup(defineAsyncComponent(() => import('@/components/MkNotificationToast.vue')), {
+			notification,
+		}, {}, 'closed');
+	}
+
+	sound.play('notification');
+};
+
+if ($i) {
+	const connection = stream.useChannel('main', null, 'UI');
+	connection.on('notification', onNotification);
+
+	//#region Listen message from SW
+	if ('serviceWorker' in navigator) {
+		swInject();
+	}
+}
+</script>
+
+<style lang="scss">
+@keyframes dev-ticker-blink {
+	0% { opacity: 1; }
+	50% { opacity: 0; }
+	100% { opacity: 1; }
+}
+
+@keyframes progress-spinner {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+#wait {
+	display: block;
+	position: fixed;
+	z-index: 4000000;
+	top: 15px;
+	right: 15px;
+
+	&:before {
+		content: "";
+		display: block;
+		width: 18px;
+		height: 18px;
+		box-sizing: border-box;
+		border: solid 2px transparent;
+		border-top-color: var(--accent);
+		border-left-color: var(--accent);
+		border-radius: 50%;
+		animation: progress-spinner 400ms linear infinite;
+	}
+}
+
+#botWarn {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	margin: auto;
+	width: 100%;
+	height: max-content;
+	text-align: center;
+	z-index: 2147483647;
+	color: #ff0;
+	background: rgba(0, 0, 0, 0.5);
+	padding: 4px 7px;
+	font-size: 14px;
+	pointer-events: none;
+	user-select: none;
+
+	> span {
+		animation: dev-ticker-blink 2s infinite;
+	}
+}
+
+#devTicker {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 2147483647;
+	color: #ff0;
+	background: rgba(0, 0, 0, 0.5);
+	padding: 4px 5px;
+	font-size: 14px;
+	pointer-events: none;
+	user-select: none;
+
+	> span {
+		animation: dev-ticker-blink 2s infinite;
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
new file mode 100644
index 0000000000..50b28de063
--- /dev/null
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -0,0 +1,314 @@
+<template>
+<div class="kmwsukvl">
+	<div class="body">
+		<div class="top">
+			<div class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"></div>
+			<button v-click-anime class="item _button instance" @click="openInstanceMenu">
+				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
+			</button>
+		</div>
+		<div class="middle">
+			<MkA v-click-anime class="item index" active-class="active" to="/" exact>
+				<i class="icon ti ti-home ti-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
+			</MkA>
+			<template v-for="item in menu">
+				<div v-if="item === '-'" class="divider"></div>
+				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: navbarItemDef[item].active }]" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+					<i class="icon ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
+					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
+				</component>
+			</template>
+			<div class="divider"></div>
+			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
+				<i class="icon ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
+			</MkA>
+			<button v-click-anime class="item _button" @click="more">
+				<i class="icon ti ti-grid-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
+				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
+			</button>
+			<MkA v-click-anime class="item" active-class="active" to="/settings">
+				<i class="icon ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
+			</MkA>
+		</div>
+		<div class="bottom">
+			<button class="item _button post" data-cy-open-post-form @click="os.post">
+				<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span>
+			</button>
+			<button v-click-anime class="item _button account" @click="openAccountMenu">
+				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
+			</button>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } from 'vue';
+import { host } from '@/config';
+import { search } from '@/scripts/search';
+import * as os from '@/os';
+import { navbarItemDef } from '@/navbar';
+import { openAccountMenu as openAccountMenu_ } from '@/account';
+import { defaultStore } from '@/store';
+import { instance } from '@/instance';
+import { i18n } from '@/i18n';
+
+const menu = toRef(defaultStore.state, 'menu');
+const otherMenuItemIndicated = computed(() => {
+	for (const def in navbarItemDef) {
+		if (menu.value.includes(def)) continue;
+		if (navbarItemDef[def].indicated) return true;
+	}
+	return false;
+});
+
+function openAccountMenu(ev: MouseEvent) {
+	openAccountMenu_({
+		withExtraOperation: true,
+	}, ev);
+}
+
+function openInstanceMenu(ev: MouseEvent) {
+	os.popupMenu([{
+		text: instance.name ?? host,
+		type: 'label',
+	}, {
+		type: 'link',
+		text: i18n.ts.instanceInfo,
+		icon: 'ti ti-info-circle',
+		to: '/about',
+	}, {
+		type: 'link',
+		text: i18n.ts.customEmojis,
+		icon: 'ti ti-mood-happy',
+		to: '/about#emojis',
+	}, {
+		type: 'link',
+		text: i18n.ts.federation,
+		icon: 'ti ti-whirl',
+		to: '/about#federation',
+	}, null, {
+		type: 'parent',
+		text: i18n.ts.help,
+		icon: 'ti ti-question-circle',
+		children: [{
+			type: 'link',
+			to: '/mfm-cheat-sheet',
+			text: i18n.ts._mfm.cheatSheet,
+			icon: 'ti ti-code',
+		}, {
+			type: 'link',
+			to: '/scratchpad',
+			text: i18n.ts.scratchpad,
+			icon: 'ti ti-terminal-2',
+		}, {
+			type: 'link',
+			to: '/api-console',
+			text: 'API Console',
+			icon: 'ti ti-terminal-2',
+		}, null, {
+			text: i18n.ts.document,
+			icon: 'ti ti-question-circle',
+			action: () => {
+				window.open('https://misskey-hub.net/help.html', '_blank');
+			},
+		}],
+	}, {
+		type: 'link',
+		text: i18n.ts.aboutMisskey,
+		to: '/about-misskey',
+	}], ev.currentTarget ?? ev.target, {
+		align: 'left',
+	});
+}
+
+function more() {
+	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {
+	}, 'closed');
+}
+</script>
+
+<style lang="scss" scoped>
+.kmwsukvl {
+	> .body {
+		display: flex;
+		flex-direction: column;
+
+		> .top {
+			position: sticky;
+			top: 0;
+			z-index: 1;
+			padding: 20px 0;
+			background: var(--X14);
+			-webkit-backdrop-filter: var(--blur, blur(8px));
+			backdrop-filter: var(--blur, blur(8px));
+
+			> .banner {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				background-size: cover;
+				background-position: center center;
+				-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
+				mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
+			}
+
+			> .instance {
+				position: relative;
+				display: block;
+				text-align: center;
+				width: 100%;
+
+				> .icon {
+					display: inline-block;
+					width: 38px;
+					aspect-ratio: 1;
+				}
+			}
+		}
+
+		> .bottom {
+			position: sticky;
+			bottom: 0;
+			padding: 20px 0;
+			background: var(--X14);
+			-webkit-backdrop-filter: var(--blur, blur(8px));
+			backdrop-filter: var(--blur, blur(8px));
+
+			> .post {
+				position: relative;
+				display: block;
+				width: 100%;
+				height: 40px;
+				color: var(--fgOnAccent);
+				font-weight: bold;
+				text-align: left;
+
+				&:before {
+					content: "";
+					display: block;
+					width: calc(100% - 38px);
+					height: 100%;
+					margin: auto;
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					border-radius: 999px;
+					background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+				}
+
+				&:hover, &.active {
+					&:before {
+						background: var(--accentLighten);
+					}
+				}
+
+				> .icon {
+					position: relative;
+					margin-left: 30px;
+					margin-right: 8px;
+					width: 32px;
+				}
+
+				> .text {
+					position: relative;
+				}
+			}
+
+			> .account {
+				position: relative;
+				display: flex;
+				align-items: center;
+				padding-left: 30px;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width: 100%;
+				text-align: left;
+				box-sizing: border-box;
+				margin-top: 16px;
+
+				> .avatar {
+					position: relative;
+					width: 32px;
+					aspect-ratio: 1;
+					margin-right: 8px;
+				}
+			}
+		}
+
+		> .middle {
+			flex: 1;
+
+			> .divider {
+				margin: 16px 16px;
+				border-top: solid 0.5px var(--divider);
+			}
+
+			> .item {
+				position: relative;
+				display: block;
+				padding-left: 24px;
+				line-height: 2.85rem;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				white-space: nowrap;
+				width: 100%;
+				text-align: left;
+				box-sizing: border-box;
+				color: var(--navFg);
+
+				> .icon {
+					position: relative;
+					width: 32px;
+					margin-right: 8px;
+				}
+
+				> .indicator {
+					position: absolute;
+					top: 0;
+					left: 20px;
+					color: var(--navIndicator);
+					font-size: 8px;
+					animation: blink 1s infinite;
+				}
+
+				> .text {
+					position: relative;
+					font-size: 0.9em;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+
+				&:hover, &.active {
+					&:before {
+						content: "";
+						display: block;
+						width: calc(100% - 24px);
+						height: 100%;
+						margin: auto;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						border-radius: 999px;
+						background: var(--accentedBg);
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
new file mode 100644
index 0000000000..b82da15f13
--- /dev/null
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -0,0 +1,521 @@
+<template>
+<div class="mvcprjjd" :class="{ iconOnly }">
+	<div class="body">
+		<div class="top">
+			<div class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"></div>
+			<button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
+				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
+			</button>
+		</div>
+		<div class="middle">
+			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
+				<i class="icon ti ti-home ti-fw"></i><span class="text">{{ i18n.ts.timeline }}</span>
+			</MkA>
+			<template v-for="item in menu">
+				<div v-if="item === '-'" class="divider"></div>
+				<component
+					:is="navbarItemDef[item].to ? 'MkA' : 'button'"
+					v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)"
+					v-click-anime
+					v-tooltip.noDelay.right="i18n.ts[navbarItemDef[item].title]"
+					class="item _button"
+					:class="[item, { active: navbarItemDef[item].active }]"
+					active-class="active"
+					:to="navbarItemDef[item].to"
+					v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
+				>
+					<i class="icon ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ i18n.ts[navbarItemDef[item].title] }}</span>
+					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
+				</component>
+			</template>
+			<div class="divider"></div>
+			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip.noDelay.right="i18n.ts.controlPanel" class="item" active-class="active" to="/admin">
+				<i class="icon ti ti-dashboard ti-fw"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
+			</MkA>
+			<button v-click-anime class="item _button" @click="more">
+				<i class="icon ti ti-grid-dots ti-fw"></i><span class="text">{{ i18n.ts.more }}</span>
+				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon _indicatorCircle"></i></span>
+			</button>
+			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item" active-class="active" to="/settings">
+				<i class="icon ti ti-settings ti-fw"></i><span class="text">{{ i18n.ts.settings }}</span>
+			</MkA>
+		</div>
+		<div class="bottom">
+			<button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post">
+				<i class="icon ti ti-pencil ti-fw"></i><span class="text">{{ i18n.ts.note }}</span>
+			</button>
+			<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
+				<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
+			</button>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, ref, watch } from 'vue';
+import * as os from '@/os';
+import { navbarItemDef } from '@/navbar';
+import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+import { instance } from '@/instance';
+import { host } from '@/config';
+
+const iconOnly = ref(false);
+
+const menu = computed(() => defaultStore.state.menu);
+const otherMenuItemIndicated = computed(() => {
+	for (const def in navbarItemDef) {
+		if (menu.value.includes(def)) continue;
+		if (navbarItemDef[def].indicated) return true;
+	}
+	return false;
+});
+
+const calcViewState = () => {
+	iconOnly.value = (window.innerWidth <= 1279) || (defaultStore.state.menuDisplay === 'sideIcon');
+};
+
+calcViewState();
+
+window.addEventListener('resize', calcViewState);
+
+watch(defaultStore.reactiveState.menuDisplay, () => {
+	calcViewState();
+});
+
+function openAccountMenu(ev: MouseEvent) {
+	openAccountMenu_({
+		withExtraOperation: true,
+	}, ev);
+}
+
+function openInstanceMenu(ev: MouseEvent) {
+	os.popupMenu([{
+		text: instance.name ?? host,
+		type: 'label',
+	}, {
+		type: 'link',
+		text: i18n.ts.instanceInfo,
+		icon: 'ti ti-info-circle',
+		to: '/about',
+	}, {
+		type: 'link',
+		text: i18n.ts.customEmojis,
+		icon: 'ti ti-mood-happy',
+		to: '/about#emojis',
+	}, {
+		type: 'link',
+		text: i18n.ts.federation,
+		icon: 'ti ti-whirl',
+		to: '/about#federation',
+	}, null, {
+		type: 'parent',
+		text: i18n.ts.help,
+		icon: 'ti ti-question-circle',
+		children: [{
+			type: 'link',
+			to: '/mfm-cheat-sheet',
+			text: i18n.ts._mfm.cheatSheet,
+			icon: 'ti ti-code',
+		}, {
+			type: 'link',
+			to: '/scratchpad',
+			text: i18n.ts.scratchpad,
+			icon: 'ti ti-terminal-2',
+		}, {
+			type: 'link',
+			to: '/api-console',
+			text: 'API Console',
+			icon: 'ti ti-terminal-2',
+		}, null, {
+			text: i18n.ts.document,
+			icon: 'ti ti-question-circle',
+			action: () => {
+				window.open('https://misskey-hub.net/help.html', '_blank');
+			},
+		}],
+	}, {
+		type: 'link',
+		text: i18n.ts.aboutMisskey,
+		to: '/about-misskey',
+	}], ev.currentTarget ?? ev.target, {
+		align: 'left',
+	});
+}
+
+function more(ev: MouseEvent) {
+	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
+		src: ev.currentTarget ?? ev.target,
+	}, {
+	}, 'closed');
+}
+</script>
+
+<style lang="scss" scoped>
+.mvcprjjd {
+	$nav-width: 250px;
+	$nav-icon-only-width: 80px;
+
+	flex: 0 0 $nav-width;
+	width: $nav-width;
+	box-sizing: border-box;
+
+	> .body {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1001;
+		width: $nav-icon-only-width;
+		height: 100dvh;
+		box-sizing: border-box;
+		overflow: auto;
+		overflow-x: clip;
+		background: var(--navBg);
+		contain: strict;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&:not(.iconOnly) {
+		> .body {
+			width: $nav-width;
+
+			> .top {
+				position: sticky;
+				top: 0;
+				z-index: 1;
+				padding: 20px 0;
+				background: var(--X14);
+				-webkit-backdrop-filter: var(--blur, blur(8px));
+				backdrop-filter: var(--blur, blur(8px));
+
+				> .banner {
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					background-size: cover;
+					background-position: center center;
+					-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
+					mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
+				}
+
+				> .instance {
+					position: relative;
+					display: block;
+					text-align: center;
+					width: 100%;
+
+					> .icon {
+						display: inline-block;
+						width: 38px;
+						aspect-ratio: 1;
+					}
+				}
+			}
+
+			> .bottom {
+				position: sticky;
+				bottom: 0;
+				padding: 20px 0;
+				background: var(--X14);
+				-webkit-backdrop-filter: var(--blur, blur(8px));
+				backdrop-filter: var(--blur, blur(8px));
+
+				> .post {
+					position: relative;
+					display: block;
+					width: 100%;
+					height: 40px;
+					color: var(--fgOnAccent);
+					font-weight: bold;
+					text-align: left;
+
+					&:before {
+						content: "";
+						display: block;
+						width: calc(100% - 38px);
+						height: 100%;
+						margin: auto;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						border-radius: 999px;
+						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+					}
+
+					&:hover, &.active {
+						&:before {
+							background: var(--accentLighten);
+						}
+					}
+
+					> .icon {
+						position: relative;
+						margin-left: 30px;
+						margin-right: 8px;
+						width: 32px;
+					}
+
+					> .text {
+						position: relative;
+					}
+				}
+
+				> .account {
+					position: relative;
+					display: flex;
+					align-items: center;
+					padding-left: 30px;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
+					width: 100%;
+					text-align: left;
+					box-sizing: border-box;
+					margin-top: 16px;
+
+					> .avatar {
+						position: relative;
+						width: 32px;
+						aspect-ratio: 1;
+						margin-right: 8px;
+					}
+				}
+			}
+
+			> .middle {
+				flex: 1;
+
+				> .divider {
+					margin: 16px 16px;
+					border-top: solid 0.5px var(--divider);
+				}
+
+				> .item {
+					position: relative;
+					display: block;
+					padding-left: 30px;
+					line-height: 2.85rem;
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
+					width: 100%;
+					text-align: left;
+					box-sizing: border-box;
+					color: var(--navFg);
+
+					> .icon {
+						position: relative;
+						width: 32px;
+						margin-right: 8px;
+					}
+
+					> .indicator {
+						position: absolute;
+						top: 0;
+						left: 20px;
+						color: var(--navIndicator);
+						font-size: 8px;
+						animation: blink 1s infinite;
+					}
+
+					> .text {
+						position: relative;
+						font-size: 0.9em;
+					}
+
+					&:hover {
+						text-decoration: none;
+						color: var(--navHoverFg);
+					}
+
+					&.active {
+						color: var(--navActive);
+					}
+
+					&:hover, &.active {
+						color: var(--accent);
+
+						&:before {
+							content: "";
+							display: block;
+							width: calc(100% - 34px);
+							height: 100%;
+							margin: auto;
+							position: absolute;
+							top: 0;
+							left: 0;
+							right: 0;
+							bottom: 0;
+							border-radius: 999px;
+							background: var(--accentedBg);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	&.iconOnly {
+		flex: 0 0 $nav-icon-only-width;
+		width: $nav-icon-only-width;
+
+		> .body {
+			width: $nav-icon-only-width;
+
+			> .top {
+				position: sticky;
+				top: 0;
+				z-index: 1;
+				padding: 20px 0;
+				background: var(--X14);
+				-webkit-backdrop-filter: var(--blur, blur(8px));
+				backdrop-filter: var(--blur, blur(8px));
+
+				> .instance {
+					display: block;
+					text-align: center;
+					width: 100%;
+
+					> .icon {
+						display: inline-block;
+						width: 30px;
+						aspect-ratio: 1;
+					}
+				}
+			}
+
+			> .bottom {
+				position: sticky;
+				bottom: 0;
+				padding: 20px 0;
+				background: var(--X14);
+				-webkit-backdrop-filter: var(--blur, blur(8px));
+				backdrop-filter: var(--blur, blur(8px));
+
+				> .post {
+					display: block;
+					position: relative;
+					width: 100%;
+					height: 52px;
+					margin-bottom: 16px;
+					text-align: center;
+
+					&:before {
+						content: "";
+						display: block;
+						position: absolute;
+						top: 0;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						margin: auto;
+						width: 52px;
+						aspect-ratio: 1/1;
+						border-radius: 100%;
+						background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+					}
+
+					&:hover, &.active {
+						&:before {
+							background: var(--accentLighten);
+						}
+					}
+
+					> .icon {
+						position: relative;
+						color: var(--fgOnAccent);
+					}
+
+					> .text {
+						display: none;
+					}
+				}
+
+				> .account {
+					display: block;
+					text-align: center;
+					width: 100%;
+
+					> .avatar {
+						display: inline-block;
+						width: 38px;
+						aspect-ratio: 1;
+					}
+
+					> .text {
+						display: none;
+					}
+				}
+			}
+
+			> .middle {
+				flex: 1;
+
+				> .divider {
+					margin: 8px auto;
+					width: calc(100% - 32px);
+					border-top: solid 0.5px var(--divider);
+				}
+
+				> .item {
+					display: block;
+					position: relative;
+					padding: 18px 0;
+					width: 100%;
+					text-align: center;
+
+					> .icon {
+						display: block;
+						margin: 0 auto;
+						opacity: 0.7;
+					}
+
+					> .text {
+						display: none;
+					}
+
+					> .indicator {
+						position: absolute;
+						top: 6px;
+						left: 24px;
+						color: var(--navIndicator);
+						font-size: 8px;
+						animation: blink 1s infinite;
+					}
+
+					&:hover, &.active {
+						text-decoration: none;
+						color: var(--accent);
+
+						&:before {
+							content: "";
+							display: block;
+							height: 100%;
+							aspect-ratio: 1;
+							margin: auto;
+							position: absolute;
+							top: 0;
+							left: 0;
+							right: 0;
+							bottom: 0;
+							border-radius: 999px;
+							background: var(--accentedBg);
+						}
+
+						> .icon, > .text {
+							opacity: 1;
+						}
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/_common_/statusbar-federation.vue b/packages/frontend/src/ui/_common_/statusbar-federation.vue
new file mode 100644
index 0000000000..24fc4f6f6d
--- /dev/null
+++ b/packages/frontend/src/ui/_common_/statusbar-federation.vue
@@ -0,0 +1,108 @@
+<template>
+<span v-if="!fetching" class="nmidsaqw">
+	<template v-if="display === 'marquee'">
+		<transition name="change" mode="default">
+			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
+				<span v-for="instance in instances" :key="instance.id" class="item" :class="{ colored }" :style="{ background: colored ? instance.themeColor : null }">
+					<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
+					<MkA :to="`/instance-info/${instance.host}`" class="host _monospace">
+						{{ instance.host }}
+					</MkA>
+					<span class="divider"></span>
+				</span>
+			</MarqueeText>
+		</transition>
+	</template>
+	<template v-else-if="display === 'oneByOne'">
+		<!-- TODO -->
+	</template>
+</span>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
+import * as misskey from 'misskey-js';
+import MarqueeText from '@/components/MkMarquee.vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { getNoteSummary } from '@/scripts/get-note-summary';
+import { notePage } from '@/filters/note';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+
+const props = defineProps<{
+	display?: 'marquee' | 'oneByOne';
+	colored?: boolean;
+	marqueeDuration?: number;
+	marqueeReverse?: boolean;
+	oneByOneInterval?: number;
+	refreshIntervalSec?: number;
+}>();
+
+const instances = ref<misskey.entities.Instance[]>([]);
+const fetching = ref(true);
+let key = $ref(0);
+
+const tick = () => {
+	os.api('federation/instances', {
+		sort: '+lastCommunicatedAt',
+		limit: 30,
+	}).then(res => {
+		instances.value = res;
+		fetching.value = false;
+		key++;
+	});
+};
+
+useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
+	immediate: true,
+	afterMounted: true,
+});
+
+function getInstanceIcon(instance): string {
+	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+}
+</script>
+
+<style lang="scss" scoped>
+.change-enter-active, .change-leave-active {
+	position: absolute;
+	top: 0;
+  transition: all 1s ease;
+}
+.change-enter-from {
+  opacity: 0;
+	transform: translateY(-100%);
+}
+.change-leave-to {
+  opacity: 0;
+	transform: translateY(100%);
+}
+
+.nmidsaqw {
+	display: inline-block;
+	position: relative;
+
+	::v-deep(.item) {
+		display: inline-block;
+		vertical-align: bottom;
+		margin-right: 5em;
+
+		> .icon {
+			display: inline-block;
+			height: var(--height);
+			aspect-ratio: 1;
+			vertical-align: bottom;
+			margin-right: 1em;
+		}
+
+		> .host {
+			vertical-align: bottom;
+		}
+
+		&.colored {
+			padding-right: 1em;
+			color: #fff;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/_common_/statusbar-rss.vue b/packages/frontend/src/ui/_common_/statusbar-rss.vue
new file mode 100644
index 0000000000..e7f88e4984
--- /dev/null
+++ b/packages/frontend/src/ui/_common_/statusbar-rss.vue
@@ -0,0 +1,93 @@
+<template>
+<span v-if="!fetching" class="xbhtxfms">
+	<template v-if="display === 'marquee'">
+		<transition name="change" mode="default">
+			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
+				<span v-for="item in items" class="item">
+					<a class="link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span class="divider"></span>
+				</span>
+			</MarqueeText>
+		</transition>
+	</template>
+	<template v-else-if="display === 'oneByOne'">
+		<!-- TODO -->
+	</template>
+</span>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
+import MarqueeText from '@/components/MkMarquee.vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { shuffle } from '@/scripts/shuffle';
+
+const props = defineProps<{
+	url?: string;
+	shuffle?: boolean;
+	display?: 'marquee' | 'oneByOne';
+	marqueeDuration?: number;
+	marqueeReverse?: boolean;
+	oneByOneInterval?: number;
+	refreshIntervalSec?: number;
+}>();
+
+const items = ref([]);
+const fetching = ref(true);
+let key = $ref(0);
+
+const tick = () => {
+	window.fetch(`/api/fetch-rss?url=${props.url}`, {}).then(res => {
+		res.json().then(feed => {
+			if (props.shuffle) {
+				shuffle(feed.items);
+			}
+			items.value = feed.items;
+			fetching.value = false;
+			key++;
+		});
+	});
+};
+
+useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
+	immediate: true,
+	afterMounted: true,
+});
+</script>
+
+<style lang="scss" scoped>
+.change-enter-active, .change-leave-active {
+	position: absolute;
+	top: 0;
+  transition: all 1s ease;
+}
+.change-enter-from {
+  opacity: 0;
+	transform: translateY(-100%);
+}
+.change-leave-to {
+  opacity: 0;
+	transform: translateY(100%);
+}
+
+.xbhtxfms {
+	display: inline-block;
+	position: relative;
+
+	::v-deep(.item) {
+		display: inline-flex;
+		align-items: center;
+		vertical-align: bottom;
+		margin: 0;
+
+		> .divider {
+			display: inline-block;
+			width: 0.5px;
+			height: var(--height);
+			margin: 0 3em;
+			background: currentColor;
+			opacity: 0.3;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/_common_/statusbar-user-list.vue b/packages/frontend/src/ui/_common_/statusbar-user-list.vue
new file mode 100644
index 0000000000..f4d989c387
--- /dev/null
+++ b/packages/frontend/src/ui/_common_/statusbar-user-list.vue
@@ -0,0 +1,113 @@
+<template>
+<span v-if="!fetching" class="osdsvwzy">
+	<template v-if="display === 'marquee'">
+		<transition name="change" mode="default">
+			<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
+				<span v-for="note in notes" :key="note.id" class="item">
+					<img class="avatar" :src="note.user.avatarUrl" decoding="async"/>
+					<MkA class="text" :to="notePage(note)">
+						<Mfm class="text" :text="getNoteSummary(note)" :plain="true" :nowrap="true" :custom-emojis="note.emojis"/>
+					</MkA>
+					<span class="divider"></span>
+				</span>
+			</MarqueeText>
+		</transition>
+	</template>
+	<template v-else-if="display === 'oneByOne'">
+		<!-- TODO -->
+	</template>
+</span>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
+import * as misskey from 'misskey-js';
+import MarqueeText from '@/components/MkMarquee.vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { getNoteSummary } from '@/scripts/get-note-summary';
+import { notePage } from '@/filters/note';
+
+const props = defineProps<{
+	userListId?: string;
+	display?: 'marquee' | 'oneByOne';
+	marqueeDuration?: number;
+	marqueeReverse?: boolean;
+	oneByOneInterval?: number;
+	refreshIntervalSec?: number;
+}>();
+
+const notes = ref<misskey.entities.Note[]>([]);
+const fetching = ref(true);
+let key = $ref(0);
+
+const tick = () => {
+	if (props.userListId == null) return;
+	os.api('notes/user-list-timeline', {
+		listId: props.userListId,
+	}).then(res => {
+		notes.value = res;
+		fetching.value = false;
+		key++;
+	});
+};
+
+watch(() => props.userListId, tick);
+
+useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
+	immediate: true,
+	afterMounted: true,
+});
+</script>
+
+<style lang="scss" scoped>
+.change-enter-active, .change-leave-active {
+	position: absolute;
+	top: 0;
+  transition: all 1s ease;
+}
+.change-enter-from {
+  opacity: 0;
+	transform: translateY(-100%);
+}
+.change-leave-to {
+  opacity: 0;
+	transform: translateY(100%);
+}
+
+.osdsvwzy {
+	display: inline-block;
+	position: relative;
+
+	::v-deep(.item) {
+		display: inline-flex;
+		align-items: center;
+		vertical-align: bottom;
+		margin: 0;
+
+		> .avatar {
+			display: inline-block;
+			height: var(--height);
+			aspect-ratio: 1;
+			vertical-align: bottom;
+			margin-right: 8px;
+		}
+
+		> .text {
+			> .text {
+				display: inline-block;
+				vertical-align: bottom;
+			}
+		}
+
+		> .divider {
+			display: inline-block;
+			width: 0.5px;
+			height: 16px;
+			margin: 0 3em;
+			background: currentColor;
+			opacity: 0;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/_common_/statusbars.vue b/packages/frontend/src/ui/_common_/statusbars.vue
new file mode 100644
index 0000000000..114ca5be8c
--- /dev/null
+++ b/packages/frontend/src/ui/_common_/statusbars.vue
@@ -0,0 +1,92 @@
+<template>
+<div class="dlrsnxqu">
+	<div
+		v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="[{ black: x.black }, {
+			verySmall: x.size === 'verySmall',
+			small: x.size === 'small',
+			medium: x.size === 'medium',
+			large: x.size === 'large',
+			veryLarge: x.size === 'veryLarge',
+		}]"
+	>
+		<span class="name">{{ x.name }}</span>
+		<XRss v-if="x.type === 'rss'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url" :shuffle="x.props.shuffle"/>
+		<XFederation v-else-if="x.type === 'federation'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/>
+		<XUserList v-else-if="x.type === 'userList'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :user-list-id="x.props.userListId"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, ref, toRef, watch } from 'vue';
+import * as os from '@/os';
+import { defaultStore } from '@/store';
+const XRss = defineAsyncComponent(() => import('./statusbar-rss.vue'));
+const XFederation = defineAsyncComponent(() => import('./statusbar-federation.vue'));
+const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue'));
+</script>
+
+<style lang="scss" scoped>
+.dlrsnxqu {
+	font-size: 15px;
+	background: var(--panel);
+
+	> .item {
+		--height: 24px;
+		--nameMargin: 10px;
+		font-size: 0.85em;
+
+		&.verySmall {
+			--nameMargin: 7px;
+			--height: 16px;
+			font-size: 0.75em;
+		}
+
+		&.small {
+			--nameMargin: 8px;
+			--height: 20px;
+			font-size: 0.8em;
+		}
+
+		&.large {
+			--nameMargin: 12px;
+			--height: 26px;
+			font-size: 0.875em;
+		}
+
+		&.veryLarge {
+			--nameMargin: 14px;
+			--height: 30px;
+			font-size: 0.9em;
+		}
+
+		display: flex;
+		vertical-align: bottom;
+		width: 100%;
+		line-height: var(--height);
+		height: var(--height);
+		overflow: clip;
+		contain: strict;
+
+		> .name {
+			padding: 0 var(--nameMargin);
+			font-weight: bold;
+			color: var(--accent);
+
+			&:empty {
+				display: none;
+			}
+		}
+
+		> .body {
+			min-width: 0;
+			flex: 1;
+		}
+
+		&.black {
+			background: #000;
+			color: #fff;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/_common_/stream-indicator.vue b/packages/frontend/src/ui/_common_/stream-indicator.vue
new file mode 100644
index 0000000000..a855de8ab9
--- /dev/null
+++ b/packages/frontend/src/ui/_common_/stream-indicator.vue
@@ -0,0 +1,61 @@
+<template>
+<div v-if="hasDisconnected && $store.state.serverDisconnectedBehavior === 'quiet'" class="nsbbhtug" @click="resetDisconnected">
+	<div>{{ i18n.ts.disconnectedFromServer }}</div>
+	<div class="command">
+		<button class="_textButton" @click="reload">{{ i18n.ts.reload }}</button>
+		<button class="_textButton">{{ i18n.ts.doNothing }}</button>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onUnmounted } from 'vue';
+import { stream } from '@/stream';
+import { i18n } from '@/i18n';
+
+let hasDisconnected = $ref(false);
+
+function onDisconnected() {
+	hasDisconnected = true;
+}
+
+function resetDisconnected() {
+	hasDisconnected = false;
+}
+
+function reload() {
+	location.reload();
+}
+
+stream.on('_disconnected_', onDisconnected);
+
+onUnmounted(() => {
+	stream.off('_disconnected_', onDisconnected);
+});
+</script>
+
+<style lang="scss" scoped>
+.nsbbhtug {
+	position: fixed;
+	z-index: 16385;
+	bottom: 8px;
+	right: 8px;
+	margin: 0;
+	padding: 6px 12px;
+	font-size: 0.9em;
+	color: #fff;
+	background: #000;
+	opacity: 0.8;
+	border-radius: 4px;
+	max-width: 320px;
+
+	> .command {
+		display: flex;
+		justify-content: space-around;
+
+		> button {
+			padding: 0.7em;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/_common_/sw-inject.ts b/packages/frontend/src/ui/_common_/sw-inject.ts
new file mode 100644
index 0000000000..8676d2d48d
--- /dev/null
+++ b/packages/frontend/src/ui/_common_/sw-inject.ts
@@ -0,0 +1,35 @@
+import { inject } from 'vue';
+import { post } from '@/os';
+import { $i, login } from '@/account';
+import { defaultStore } from '@/store';
+import { getAccountFromId } from '@/scripts/get-account-from-id';
+import { mainRouter } from '@/router';
+
+export function swInject() {
+	navigator.serviceWorker.addEventListener('message', ev => {
+		if (_DEV_) {
+			console.log('sw msg', ev.data);
+		}
+
+		if (ev.data.type !== 'order') return;
+
+		if (ev.data.loginId !== $i?.id) {
+			return getAccountFromId(ev.data.loginId).then(account => {
+				if (!account) return;
+				return login(account.token, ev.data.url);
+			});
+		}
+
+		switch (ev.data.order) {
+			case 'post':
+				return post(ev.data.options);
+			case 'push':
+				if (mainRouter.currentRoute.value.path === ev.data.url) {
+					return window.scroll({ top: 0, behavior: 'smooth' });
+				}
+				return mainRouter.push(ev.data.url);
+			default:
+				return;
+		}
+	});
+}
diff --git a/packages/frontend/src/ui/_common_/upload.vue b/packages/frontend/src/ui/_common_/upload.vue
new file mode 100644
index 0000000000..70882bd251
--- /dev/null
+++ b/packages/frontend/src/ui/_common_/upload.vue
@@ -0,0 +1,129 @@
+<template>
+<div class="mk-uploader _acrylic" :style="{ zIndex }">
+	<ol v-if="uploads.length > 0">
+		<li v-for="ctx in uploads" :key="ctx.id">
+			<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
+			<div class="top">
+				<p class="name"><MkLoading :em="true"/>{{ ctx.name }}</p>
+				<p class="status">
+					<span v-if="ctx.progressValue === undefined" class="initing">{{ i18n.ts.waiting }}<MkEllipsis/></span>
+					<span v-if="ctx.progressValue !== undefined" class="kb">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
+					<span v-if="ctx.progressValue !== undefined" class="percentage">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
+				</p>
+			</div>
+			<progress :value="ctx.progressValue || 0" :max="ctx.progressMax || 0" :class="{ initing: ctx.progressValue === undefined, waiting: ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax }"></progress>
+		</li>
+	</ol>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import * as os from '@/os';
+import { uploads } from '@/scripts/upload';
+import { i18n } from '@/i18n';
+
+const zIndex = os.claimZIndex('high');
+</script>
+
+<style lang="scss" scoped>
+.mk-uploader {
+	position: fixed;
+	right: 16px;
+	width: 260px;
+	top: 32px;
+	padding: 16px 20px;
+	pointer-events: none;
+	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+	border-radius: 8px;
+}
+.mk-uploader:empty {
+  display: none;
+}
+.mk-uploader > ol {
+  display: block;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.mk-uploader > ol > li {
+  display: grid;
+  margin: 8px 0 0 0;
+  padding: 0;
+  height: 36px;
+  width: 100%;
+  border-top: solid 8px transparent;
+  grid-template-columns: 36px calc(100% - 44px);
+  grid-template-rows: 1fr 8px;
+  column-gap: 8px;
+  box-sizing: content-box;
+}
+.mk-uploader > ol > li:first-child {
+  margin: 0;
+  box-shadow: none;
+  border-top: none;
+}
+.mk-uploader > ol > li > .img {
+  display: block;
+  background-size: cover;
+  background-position: center center;
+  grid-column: 1/2;
+  grid-row: 1/3;
+}
+.mk-uploader > ol > li > .top {
+  display: flex;
+  grid-column: 2/3;
+  grid-row: 1/2;
+}
+.mk-uploader > ol > li > .top > .name {
+  display: block;
+  padding: 0 8px 0 0;
+  margin: 0;
+  font-size: 0.8em;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex-shrink: 1;
+}
+.mk-uploader > ol > li > .top > .name > i {
+  margin-right: 4px;
+}
+.mk-uploader > ol > li > .top > .status {
+  display: block;
+  margin: 0 0 0 auto;
+  padding: 0;
+  font-size: 0.8em;
+  flex-shrink: 0;
+}
+.mk-uploader > ol > li > .top > .status > .initing {
+}
+.mk-uploader > ol > li > .top > .status > .kb {
+}
+.mk-uploader > ol > li > .top > .status > .percentage {
+  display: inline-block;
+  width: 48px;
+  text-align: right;
+}
+.mk-uploader > ol > li > .top > .status > .percentage:after {
+  content: '%';
+}
+.mk-uploader > ol > li > progress {
+  display: block;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  overflow: hidden;
+  grid-column: 2/3;
+  grid-row: 2/3;
+  z-index: 2;
+	width: 100%;
+	height: 8px;
+}
+.mk-uploader > ol > li > progress::-webkit-progress-value {
+  background: var(--accent);
+}
+.mk-uploader > ol > li > progress::-webkit-progress-bar {
+  //background: var(--accentAlpha01);
+	background: transparent;
+}
+</style>
diff --git a/packages/frontend/src/ui/classic.header.vue b/packages/frontend/src/ui/classic.header.vue
new file mode 100644
index 0000000000..46d79e6355
--- /dev/null
+++ b/packages/frontend/src/ui/classic.header.vue
@@ -0,0 +1,217 @@
+<template>
+<div class="azykntjl">
+	<div class="body">
+		<div class="left">
+			<MkA v-click-anime v-tooltip="$ts.timeline" class="item index" active-class="active" to="/" exact>
+				<i class="ti ti-home ti-fw"></i>
+			</MkA>
+			<template v-for="item in menu">
+				<div v-if="item === '-'" class="divider"></div>
+				<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime v-tooltip="$ts[navbarItemDef[item].title]" class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+					<i class="ti-fw" :class="navbarItemDef[item].icon"></i>
+					<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="_indicatorCircle"></i></span>
+				</component>
+			</template>
+			<div class="divider"></div>
+			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip="$ts.controlPanel" class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
+				<i class="ti ti-dashboard ti-fw"></i>
+			</MkA>
+			<button v-click-anime class="item _button" @click="more">
+				<i class="ti ti-dots ti-fw"></i>
+				<span v-if="otherNavItemIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
+			</button>
+		</div>
+		<div class="right">
+			<MkA v-click-anime v-tooltip="$ts.settings" class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
+				<i class="ti ti-settings ti-fw"></i>
+			</MkA>
+			<button v-click-anime class="item _button account" @click="openAccountMenu">
+				<MkAvatar :user="$i" class="avatar"/><MkAcct class="acct" :user="$i"/>
+			</button>
+			<div class="post" @click="post">
+				<MkButton class="button" gradate full rounded>
+					<i class="ti ti-pencil ti-fw"></i>
+				</MkButton>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent } from 'vue';
+import { host } from '@/config';
+import { search } from '@/scripts/search';
+import * as os from '@/os';
+import { navbarItemDef } from '@/navbar';
+import { openAccountMenu } from '@/account';
+import MkButton from '@/components/MkButton.vue';
+
+export default defineComponent({
+	components: {
+		MkButton,
+	},
+
+	data() {
+		return {
+			host: host,
+			accounts: [],
+			connection: null,
+			navbarItemDef: navbarItemDef,
+			settingsWindowed: false,
+		};
+	},
+
+	computed: {
+		menu(): string[] {
+			return this.$store.state.menu;
+		},
+
+		otherNavItemIndicated(): boolean {
+			for (const def in this.navbarItemDef) {
+				if (this.menu.includes(def)) continue;
+				if (this.navbarItemDef[def].indicated) return true;
+			}
+			return false;
+		},
+	},
+
+	watch: {
+		'$store.reactiveState.menuDisplay.value'() {
+			this.calcViewState();
+		},
+	},
+
+	created() {
+		window.addEventListener('resize', this.calcViewState);
+		this.calcViewState();
+	},
+
+	methods: {
+		calcViewState() {
+			this.settingsWindowed = (window.innerWidth > 1400);
+		},
+
+		post() {
+			os.post();
+		},
+
+		search() {
+			search();
+		},
+
+		more(ev) {
+			os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
+				src: ev.currentTarget ?? ev.target,
+				anchor: { x: 'center', y: 'bottom' },
+			}, {
+			}, 'closed');
+		},
+
+		openAccountMenu: (ev) => {
+			openAccountMenu({
+				withExtraOperation: true,
+			}, ev);
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.azykntjl {
+	$height: 60px;
+	$avatar-size: 32px;
+	$avatar-margin: 8px;
+
+	position: sticky;
+	top: 0;
+	z-index: 1000;
+	width: 100%;
+	height: $height;
+	background-color: var(--bg);
+
+	> .body {
+		max-width: 1380px;
+		margin: 0 auto;
+		display: flex;
+
+		> .right,
+		> .left {
+
+			> .item {
+				position: relative;
+				font-size: 0.9em;
+				display: inline-block;
+				padding: 0 12px;
+				line-height: $height;
+
+				> i,
+				> .avatar {
+					margin-right: 0;
+				}
+
+				> i {
+					left: 10px;
+				}
+
+				> .avatar {
+					width: $avatar-size;
+					height: $avatar-size;
+					vertical-align: middle;
+				}
+
+				> .indicator {
+					position: absolute;
+					top: 0;
+					left: 0;
+					color: var(--navIndicator);
+					font-size: 8px;
+					animation: blink 1s infinite;
+				}
+
+				&:hover {
+					text-decoration: none;
+					color: var(--navHoverFg);
+				}
+
+				&.active {
+					color: var(--navActive);
+				}
+			}
+
+			> .divider {
+				display: inline-block;
+				height: 16px;
+				margin: 0 10px;
+				border-right: solid 0.5px var(--divider);
+			}
+
+			> .post {
+				display: inline-block;
+			
+				> .button {
+					width: 40px;
+					height: 40px;
+					padding: 0;
+					min-width: 0;
+				}
+			}
+
+			> .account {
+				display: inline-flex;
+				align-items: center;
+				vertical-align: top;
+				margin-right: 8px;
+
+				> .acct {
+					margin-left: 8px;
+				}
+			}
+		}
+
+		> .right {
+			margin-left: auto;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue
new file mode 100644
index 0000000000..dac09ea703
--- /dev/null
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@@ -0,0 +1,268 @@
+<template>
+<div class="npcljfve" :class="{ iconOnly }">
+	<button v-click-anime class="item _button account" @click="openAccountMenu">
+		<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
+	</button>
+	<div class="post" data-cy-open-post-form @click="post">
+		<MkButton class="button" gradate full rounded>
+			<i class="ti ti-pencil ti-fw"></i><span v-if="!iconOnly" class="text">{{ $ts.note }}</span>
+		</MkButton>
+	</div>
+	<div class="divider"></div>
+	<MkA v-click-anime class="item index" active-class="active" to="/" exact>
+		<i class="ti ti-home ti-fw"></i><span class="text">{{ $ts.timeline }}</span>
+	</MkA>
+	<template v-for="item in menu">
+		<div v-if="item === '-'" class="divider"></div>
+		<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" active-class="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
+			<i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ $ts[navbarItemDef[item].title] }}</span>
+			<span v-if="navbarItemDef[item].indicated" class="indicator"><i class="_indicatorCircle"></i></span>
+		</component>
+	</template>
+	<div class="divider"></div>
+	<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin" :behavior="settingsWindowed ? 'modalWindow' : null">
+		<i class="ti ti-dashboard ti-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
+	</MkA>
+	<button v-click-anime class="item _button" @click="more">
+		<i class="ti ti-dots ti-fw"></i><span class="text">{{ $ts.more }}</span>
+		<span v-if="otherNavItemIndicated" class="indicator"><i class="_indicatorCircle"></i></span>
+	</button>
+	<MkA v-click-anime class="item" active-class="active" to="/settings" :behavior="settingsWindowed ? 'modalWindow' : null">
+		<i class="ti ti-settings ti-fw"></i><span class="text">{{ $ts.settings }}</span>
+	</MkA>
+	<div class="divider"></div>
+	<div class="about">
+		<MkA v-click-anime class="link" to="/about">
+			<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
+		</MkA>
+	</div>
+	<!--<MisskeyLogo class="misskey"/>-->
+</div>
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent } from 'vue';
+import { host } from '@/config';
+import { search } from '@/scripts/search';
+import * as os from '@/os';
+import { navbarItemDef } from '@/navbar';
+import { openAccountMenu } from '@/account';
+import MkButton from '@/components/MkButton.vue';
+import { StickySidebar } from '@/scripts/sticky-sidebar';
+//import MisskeyLogo from '@assets/client/misskey.svg';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		//MisskeyLogo,
+	},
+
+	data() {
+		return {
+			host: host,
+			accounts: [],
+			connection: null,
+			navbarItemDef: navbarItemDef,
+			iconOnly: false,
+			settingsWindowed: false,
+		};
+	},
+
+	computed: {
+		menu(): string[] {
+			return this.$store.state.menu;
+		},
+
+		otherNavItemIndicated(): boolean {
+			for (const def in this.navbarItemDef) {
+				if (this.menu.includes(def)) continue;
+				if (this.navbarItemDef[def].indicated) return true;
+			}
+			return false;
+		},
+	},
+
+	watch: {
+		'$store.reactiveState.menuDisplay.value'() {
+			this.calcViewState();
+		},
+
+		iconOnly() {
+			this.$nextTick(() => {
+				this.$emit('change-view-mode');
+			});
+		},
+	},
+
+	created() {
+		window.addEventListener('resize', this.calcViewState);
+		this.calcViewState();
+	},
+
+	mounted() {
+		const sticky = new StickySidebar(this.$el.parentElement, 16);
+		window.addEventListener('scroll', () => {
+			sticky.calc(window.scrollY);
+		}, { passive: true });
+	},
+
+	methods: {
+		calcViewState() {
+			this.iconOnly = (window.innerWidth <= 1400) || (this.$store.state.menuDisplay === 'sideIcon');
+			this.settingsWindowed = (window.innerWidth > 1400);
+		},
+
+		post() {
+			os.post();
+		},
+
+		search() {
+			search();
+		},
+
+		more(ev) {
+			os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
+				src: ev.currentTarget ?? ev.target,
+			}, {}, 'closed');
+		},
+
+		openAccountMenu: (ev) => {
+			openAccountMenu({
+				withExtraOperation: true,
+			}, ev);
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.npcljfve {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$nav-icon-only-width: 78px; // TODO: どこかに集約したい
+	$avatar-size: 32px;
+	$avatar-margin: 8px;
+
+	padding: 0 16px;
+	box-sizing: border-box;
+	width: 260px;
+
+	&.iconOnly {
+		flex: 0 0 $nav-icon-only-width;
+		width: $nav-icon-only-width !important;
+
+		> .divider {
+			margin: 8px auto;
+			width: calc(100% - 32px);
+		}
+
+		> .post {
+			> .button {
+				width: 46px;
+				height: 46px;
+				padding: 0;
+			}
+		}
+
+		> .item {
+			padding-left: 0;
+			width: 100%;
+			text-align: center;
+			font-size: $ui-font-size * 1.1;
+			line-height: 3.7rem;
+
+			> i,
+			> .avatar {
+				margin-right: 0;
+			}
+
+			> i {
+				left: 10px;
+			}
+
+			> .text {
+				display: none;
+			}
+		}
+	}
+
+	> .divider {
+		margin: 10px 0;
+		border-top: solid 0.5px var(--divider);
+	}
+
+	> .post {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+		padding: 16px 0;
+		background: var(--bg);
+
+		> .button {
+			min-width: 0;
+		}
+	}
+
+	> .about {
+		fill: currentColor;
+		padding: 8px 0 16px 0;
+		text-align: center;
+
+		> .link {
+			display: block;
+			width: 32px;
+			margin: 0 auto;
+
+			img {
+				display: block;
+				width: 100%;
+			}
+		}
+	}
+
+	> .item {
+		position: relative;
+		display: block;
+		font-size: $ui-font-size;
+		line-height: 2.6rem;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		white-space: nowrap;
+		width: 100%;
+		text-align: left;
+		box-sizing: border-box;
+
+		> i {
+			width: 32px;
+		}
+
+		> i,
+		> .avatar {
+			margin-right: $avatar-margin;
+		}
+
+		> .avatar {
+			width: $avatar-size;
+			height: $avatar-size;
+			vertical-align: middle;
+		}
+
+		> .indicator {
+			position: absolute;
+			top: 0;
+			left: 0;
+			color: var(--navIndicator);
+			font-size: 8px;
+			animation: blink 1s infinite;
+		}
+
+		&:hover {
+			text-decoration: none;
+			color: var(--navHoverFg);
+		}
+
+		&.active {
+			color: var(--navActive);
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/classic.vue b/packages/frontend/src/ui/classic.vue
new file mode 100644
index 0000000000..0e726c11ed
--- /dev/null
+++ b/packages/frontend/src/ui/classic.vue
@@ -0,0 +1,320 @@
+<template>
+<div class="gbhvwtnk" :class="{ wallpaper }" :style="`--globalHeaderHeight:${globalHeaderHeight}px`">
+	<XHeaderMenu v-if="showMenuOnTop" v-get-size="(w, h) => globalHeaderHeight = h"/>
+
+	<div class="columns" :class="{ fullView, withGlobalHeader: showMenuOnTop }">
+		<div v-if="!showMenuOnTop" class="sidebar">
+			<XSidebar/>
+		</div>
+		<div v-else ref="widgetsLeft" class="widgets left">
+			<XWidgets :place="'left'" @mounted="attachSticky(widgetsLeft)"/>
+		</div>
+
+		<main class="main" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
+			<div class="content">
+				<RouterView/>
+			</div>
+		</main>
+
+		<div v-if="isDesktop" ref="widgetsRight" class="widgets right">
+			<XWidgets :place="null" @mounted="attachSticky(widgetsRight)"/>
+		</div>
+	</div>
+
+	<transition :name="$store.state.animation ? 'tray-back' : ''">
+		<div
+			v-if="widgetsShowing"
+			class="tray-back _modalBg"
+			@click="widgetsShowing = false"
+			@touchstart.passive="widgetsShowing = false"
+		></div>
+	</transition>
+
+	<transition :name="$store.state.animation ? 'tray' : ''">
+		<XWidgets v-if="widgetsShowing" class="tray"/>
+	</transition>
+
+	<iframe v-if="$store.state.aiChanMode" ref="live2d" class="ivnzpscs" src="https://misskey-dev.github.io/mascot-web/?scale=2&y=1.4"></iframe>
+
+	<XCommon/>
+</div>
+</template>
+
+<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 { 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;
+
+let isDesktop = $ref(window.innerWidth >= DESKTOP_THRESHOLD);
+
+let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
+let widgetsShowing = $ref(false);
+let fullView = $ref(false);
+let globalHeaderHeight = $ref(0);
+const wallpaper = localStorage.getItem('wallpaper') != null;
+const showMenuOnTop = $computed(() => defaultStore.state.menuDisplay === 'top');
+let live2d = $ref<HTMLIFrameElement>();
+let widgetsLeft = $ref();
+let widgetsRight = $ref();
+
+provide('router', mainRouter);
+provideMetadataReceiver((info) => {
+	pageMetadata = info;
+	if (pageMetadata.value) {
+		document.title = `${pageMetadata.value.title} | ${instanceName}`;
+	}
+});
+provide('shouldHeaderThin', showMenuOnTop);
+provide('shouldSpacerMin', true);
+
+function attachSticky(el) {
+	const sticky = new StickySidebar(el, defaultStore.state.menuDisplay === 'top' ? 0 : 16, defaultStore.state.menuDisplay === 'top' ? 60 : 0); // TODO: ヘッダーの高さを60pxと決め打ちしているのを直す
+	window.addEventListener('scroll', () => {
+		sticky.calc(window.scrollY);
+	}, { passive: true });
+}
+
+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: 'ti ti-window-maximize',
+		text: i18n.ts.openInWindow,
+		action: () => {
+			os.pageWindow(path);
+		},
+	}], ev);
+}
+
+function onAiClick(ev) {
+	//if (this.live2d) this.live2d.click(ev);
+}
+
+if (window.innerWidth < 1024) {
+	localStorage.setItem('ui', 'default');
+	location.reload();
+}
+
+document.documentElement.style.overflowY = 'scroll';
+
+if (defaultStore.state.widgets.length === 0) {
+	defaultStore.set('widgets', [{
+		name: 'calendar',
+		id: 'a', place: null, data: {},
+	}, {
+		name: 'notifications',
+		id: 'b', place: null, data: {},
+	}, {
+		name: 'trends',
+		id: 'c', place: null, data: {},
+	}]);
+}
+
+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 });
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.tray-enter-active,
+.tray-leave-active {
+	opacity: 1;
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.tray-enter-from,
+.tray-leave-active {
+	opacity: 0;
+	transform: translateX(240px);
+}
+
+.tray-back-enter-active,
+.tray-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.tray-back-enter-from,
+.tray-back-leave-active {
+	opacity: 0;
+}
+
+.gbhvwtnk {
+	$ui-font-size: 1em;
+	$widgets-hide-threshold: 1200px;
+
+	min-height: 100dvh;
+	box-sizing: border-box;
+
+	&.wallpaper {
+		background: var(--wallpaperOverlay);
+		//backdrop-filter: var(--blur, blur(4px));
+	}
+
+	> .columns {
+		display: flex;
+		justify-content: center;
+		max-width: 100%;
+		//margin: 32px 0;
+
+		&.fullView {
+			margin: 0;
+		
+			> .sidebar {
+				display: none;
+			}
+
+			> .widgets {
+				display: none;
+			}
+
+			> .main {
+				margin: 0;
+				border-radius: 0;
+				box-shadow: none;
+				width: 100%;
+			}
+		}
+
+		> .main {
+			min-width: 0;
+			width: 750px;
+			margin: 0 16px 0 0;
+			background: var(--panel);
+			border-left: solid 1px var(--divider);
+			border-right: solid 1px var(--divider);
+			border-radius: 0;
+			overflow: clip;
+			--margin: 12px;
+		}
+
+		> .widgets {
+			//--panelBorder: none;
+			width: 300px;
+			margin-top: 16px;
+
+			@media (max-width: $widgets-hide-threshold) {
+				display: none;
+			}
+
+			&.left {
+				margin-right: 16px;
+			}
+		}
+
+		> .sidebar {
+			margin-top: 16px;
+		}
+
+		&.withGlobalHeader {
+			> .main {
+				margin-top: 0;
+				border: solid 1px var(--divider);
+				border-radius: var(--radius);
+				--stickyTop: var(--globalHeaderHeight);
+			}
+
+			> .widgets {
+				--stickyTop: var(--globalHeaderHeight);
+				margin-top: 0;
+			}
+		}
+
+		@media (max-width: 850px) {
+			margin: 0;
+
+			> .sidebar {
+				border-right: solid 0.5px var(--divider);
+			}
+
+			> .main {
+				margin: 0;
+				border-radius: 0;
+				box-shadow: none;
+				width: 100%;
+			}
+		}
+	}
+
+	> .tray-back {
+		z-index: 1001;
+	}
+
+	> .tray {
+		position: fixed;
+		top: 0;
+		right: 0;
+		z-index: 1001;
+		height: 100dvh;
+		padding: var(--margin);
+		box-sizing: border-box;
+		overflow: auto;
+		background: var(--bg);
+	}
+
+	> .ivnzpscs {
+		position: fixed;
+		bottom: 0;
+		right: 0;
+		width: 300px;
+		height: 600px;
+		border: none;
+		pointer-events: none;
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/classic.widgets.vue b/packages/frontend/src/ui/classic.widgets.vue
new file mode 100644
index 0000000000..163ec982ce
--- /dev/null
+++ b/packages/frontend/src/ui/classic.widgets.vue
@@ -0,0 +1,84 @@
+<template>
+<div class="ddiqwdnk">
+	<XWidgets class="widgets" :edit="editMode" :widgets="$store.reactiveState.widgets.value.filter(w => w.place === place)" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
+	<MkAd class="a" :prefer="['square']"/>
+
+	<button v-if="editMode" class="_textButton edit" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ $ts.editWidgetsExit }}</button>
+	<button v-else class="_textButton edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ $ts.editWidgets }}</button>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import XWidgets from '@/components/MkWidgets.vue';
+
+export default defineComponent({
+	components: {
+		XWidgets,
+	},
+
+	props: {
+		place: {
+			type: String,
+		},
+	},
+
+	emits: ['mounted'],
+
+	data() {
+		return {
+			editMode: false,
+		};
+	},
+
+	mounted() {
+		this.$emit('mounted', this.$el);
+	},
+
+	methods: {
+		addWidget(widget) {
+			this.$store.set('widgets', [{
+				...widget,
+				place: this.place,
+			}, ...this.$store.state.widgets]);
+		},
+
+		removeWidget(widget) {
+			this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id !== widget.id));
+		},
+
+		updateWidget({ id, data }) {
+			this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
+				...w,
+				data,
+			} : w));
+		},
+
+		updateWidgets(widgets) {
+			this.$store.set('widgets', [
+				...this.$store.state.widgets.filter(w => w.place !== this.place),
+				...widgets,
+			]);
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.ddiqwdnk {
+	position: sticky;
+	height: min-content;
+	box-sizing: border-box;
+	padding-bottom: 8px;
+
+	> .widgets,
+	> .a {
+		width: 300px;
+	}
+
+	> .edit {
+		display: block;
+		margin: 16px auto;
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
new file mode 100644
index 0000000000..f3415cfd09
--- /dev/null
+++ b/packages/frontend/src/ui/deck.vue
@@ -0,0 +1,435 @@
+<template>
+<div
+	class="mk-deck" :class="[{ isMobile }]"
+>
+	<XSidebar v-if="!isMobile"/>
+
+	<div class="main">
+		<XStatusBars class="statusbars"/>
+		<div ref="columnsEl" class="columns" :class="deckStore.reactiveState.columnAlign.value" @contextmenu.self.prevent="onContextmenu">
+			<template v-for="ids in layout">
+				<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
+				<section
+					v-if="ids.length > 1"
+					class="folder column"
+					:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
+				>
+					<DeckColumnCore v-for="id in ids" :ref="id" :key="id" :column="columns.find(c => c.id === id)" :is-stacked="true" @parent-focus="moveFocus(id, $event)"/>
+				</section>
+				<DeckColumnCore
+					v-else
+					:ref="ids[0]"
+					:key="ids[0]"
+					class="column"
+					:column="columns.find(c => c.id === ids[0])"
+					:is-stacked="false"
+					:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
+					@parent-focus="moveFocus(ids[0], $event)"
+				/>
+			</template>
+			<div v-if="layout.length === 0" class="intro _panel">
+				<div>{{ i18n.ts._deck.introduction }}</div>
+				<MkButton primary class="add" @click="addColumn">{{ i18n.ts._deck.addColumn }}</MkButton>
+				<div>{{ i18n.ts._deck.introduction2 }}</div>
+			</div>
+			<div class="sideMenu">
+				<div class="top">
+					<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${deckStore.state.profile}`" class="_button button" @click="changeProfile"><i class="ti ti-caret-down"></i></button>
+					<button v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" class="_button button" @click="deleteProfile"><i class="ti ti-trash"></i></button>
+				</div>
+				<div class="middle">
+					<button v-tooltip.noDelay.left="i18n.ts._deck.addColumn" class="_button button" @click="addColumn"><i class="ti ti-plus"></i></button>
+				</div>
+				<div class="bottom">
+					<button v-tooltip.noDelay.left="i18n.ts.settings" class="_button button settings" @click="showSettings"><i class="ti ti-settings"></i></button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div v-if="isMobile" class="buttons">
+		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="ti ti-menu-2"></i><span v-if="menuIndicated" class="indicator"><i class="_indicatorCircle"></i></span></button>
+		<button class="button home _button" @click="mainRouter.push('/')"><i class="ti ti-home"></i></button>
+		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="_indicatorCircle"></i></span></button>
+		<button class="button post _button" @click="os.post()"><i class="ti ti-pencil"></i></button>
+	</div>
+
+	<transition :name="$store.state.animation ? 'menu-back' : ''">
+		<div
+			v-if="drawerMenuShowing"
+			class="menu-back _modalBg"
+			@click="drawerMenuShowing = false"
+			@touchstart.passive="drawerMenuShowing = false"
+		></div>
+	</transition>
+
+	<transition :name="$store.state.animation ? 'menu' : ''">
+		<XDrawerMenu v-if="drawerMenuShowing" class="menu"/>
+	</transition>
+
+	<XCommon/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineAsyncComponent, onMounted, provide, ref, watch } from 'vue';
+import { v4 as uuid } from 'uuid';
+import XCommon from './_common_/common.vue';
+import { deckStore, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store';
+import DeckColumnCore from '@/ui/deck/column-core.vue';
+import XSidebar from '@/ui/_common_/navbar.vue';
+import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
+import MkButton from '@/components/MkButton.vue';
+import { getScrollContainer } from '@/scripts/scroll';
+import * as os from '@/os';
+import { navbarItemDef } from '@/navbar';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import { mainRouter } from '@/router';
+import { unisonReload } from '@/scripts/unison-reload';
+const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
+
+mainRouter.navHook = (path, flag): boolean => {
+	if (flag === 'forcePage') return false;
+	const noMainColumn = !deckStore.state.columns.some(x => x.type === 'main');
+	if (deckStore.state.navWindow || noMainColumn) {
+		os.pageWindow(path);
+		return true;
+	}
+	return false;
+};
+
+const isMobile = ref(window.innerWidth <= 500);
+window.addEventListener('resize', () => {
+	isMobile.value = window.innerWidth <= 500;
+});
+
+const drawerMenuShowing = ref(false);
+
+const route = 'TODO';
+watch(route, () => {
+	drawerMenuShowing.value = false;
+});
+
+const columns = deckStore.reactiveState.columns;
+const layout = deckStore.reactiveState.layout;
+const menuIndicated = computed(() => {
+	if ($i == null) return false;
+	for (const def in navbarItemDef) {
+		if (navbarItemDef[def].indicated) return true;
+	}
+	return false;
+});
+
+function showSettings() {
+	os.pageWindow('/settings/deck');
+}
+
+let columnsEl = $ref<HTMLElement>();
+
+const addColumn = async (ev) => {
+	const columns = [
+		'main',
+		'widgets',
+		'notifications',
+		'tl',
+		'antenna',
+		'list',
+		'mentions',
+		'direct',
+	];
+
+	const { canceled, result: column } = await os.select({
+		title: i18n.ts._deck.addColumn,
+		items: columns.map(column => ({
+			value: column, text: i18n.t('_deck._columns.' + column),
+		})),
+	});
+	if (canceled) return;
+
+	addColumnToStore({
+		type: column,
+		id: uuid(),
+		name: i18n.t('_deck._columns.' + column),
+		width: 330,
+	});
+};
+
+const onContextmenu = (ev) => {
+	os.contextMenu([{
+		text: i18n.ts._deck.addColumn,
+		action: addColumn,
+	}], ev);
+};
+
+document.documentElement.style.overflowY = 'hidden';
+document.documentElement.style.scrollBehavior = 'auto';
+window.addEventListener('wheel', (ev) => {
+	if (ev.target === columnsEl && ev.deltaX === 0) {
+		columnsEl.scrollLeft += ev.deltaY;
+	} else if (getScrollContainer(ev.target as HTMLElement) == null && ev.deltaX === 0) {
+		columnsEl.scrollLeft += ev.deltaY;
+	}
+});
+loadDeck();
+
+function moveFocus(id: string, direction: 'up' | 'down' | 'left' | 'right') {
+	// TODO??
+}
+
+function changeProfile(ev: MouseEvent) {
+	const items = ref([{
+		text: deckStore.state.profile,
+		active: true.valueOf,
+	}]);
+	getProfiles().then(profiles => {
+		items.value = [{
+			text: deckStore.state.profile,
+			active: true.valueOf,
+		}, ...(profiles.filter(k => k !== deckStore.state.profile).map(k => ({
+			text: k,
+			action: () => {
+				deckStore.set('profile', k);
+				unisonReload();
+			},
+		}))), null, {
+			text: i18n.ts._deck.newProfile,
+			icon: 'ti ti-plus',
+			action: async () => {
+				const { canceled, result: name } = await os.inputText({
+					title: i18n.ts._deck.profile,
+					allowEmpty: false,
+				});
+				if (canceled) return;
+
+				deckStore.set('profile', name);
+				unisonReload();
+			},
+		}];
+	});
+	os.popupMenu(items, ev.currentTarget ?? ev.target);
+}
+
+async function deleteProfile() {
+	const { canceled } = await os.confirm({
+		type: 'warning',
+		text: i18n.t('deleteAreYouSure', { x: deckStore.state.profile }),
+	});
+	if (canceled) return;
+
+	deleteProfile_(deckStore.state.profile);
+	deckStore.set('profile', 'default');
+	unisonReload();
+}
+</script>
+
+<style lang="scss" scoped>
+.menu-enter-active,
+.menu-leave-active {
+	opacity: 1;
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.menu-enter-from,
+.menu-leave-active {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
+.menu-back-enter-active,
+.menu-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.menu-back-enter-from,
+.menu-back-leave-active {
+	opacity: 0;
+}
+
+.mk-deck {
+	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
+
+	// TODO: ここではなくて、各カラムで自身の幅に応じて上書きするようにしたい
+	--margin: var(--marginHalf);
+
+	--deckDividerThickness: 5px;
+
+	display: flex;
+	height: 100dvh;
+	box-sizing: border-box;
+	flex: 1;
+
+	&.isMobile {
+		padding-bottom: 100px;
+	}
+
+	> .main {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+
+		> .columns {
+			flex: 1;
+			display: flex;
+			overflow-x: auto;
+			overflow-y: clip;
+
+			&.center {
+				> .column:first-of-type {
+					margin-left: auto;
+				}
+
+				> .column:last-of-type {
+					margin-right: auto;
+				}
+			}
+
+			> .column {
+				flex-shrink: 0;
+				border-right: solid var(--deckDividerThickness) var(--deckDivider);
+
+				&:first-of-type {
+					border-left: solid var(--deckDividerThickness) var(--deckDivider);
+				}
+
+				&.folder {
+					display: flex;
+					flex-direction: column;
+
+					> *:not(:last-of-type) {
+						border-bottom: solid var(--deckDividerThickness) var(--deckDivider);
+					}
+				}
+			}
+
+			> .intro {
+				padding: 32px;
+				height: min-content;
+				text-align: center;
+				margin: auto;
+
+				> .add {
+					margin: 1em auto;
+				}
+			}
+
+			> .sideMenu {
+				flex-shrink: 0;
+				margin-right: 0;
+				margin-left: auto;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				width: 32px;
+
+				> .top, > .middle, > .bottom {
+					> .button {
+						display: block;
+						width: 100%;
+						aspect-ratio: 1;
+					}
+				}
+
+				> .top {
+					margin-bottom: auto;
+				}
+
+				> .middle {
+					margin-top: auto;
+					margin-bottom: auto;
+				}
+
+				> .bottom {
+					margin-top: auto;
+				}
+			}
+		}
+	}
+
+	> .buttons {
+		position: fixed;
+		z-index: 1000;
+		bottom: 0;
+		left: 0;
+		padding: 16px;
+		display: flex;
+		width: 100%;
+		box-sizing: border-box;
+
+		> .button {
+			position: relative;
+			flex: 1;
+			padding: 0;
+			margin: auto;
+			height: 64px;
+			border-radius: 8px;
+			background: var(--panel);
+			color: var(--fg);
+
+			&:not(:last-child) {
+				margin-right: 12px;
+			}
+
+			@media (max-width: 400px) {
+				height: 60px;
+
+				&:not(:last-child) {
+					margin-right: 8px;
+				}
+			}
+
+			&:hover {
+				background: var(--X2);
+			}
+
+			> .indicator {
+				position: absolute;
+				top: 0;
+				left: 0;
+				color: var(--indicator);
+				font-size: 16px;
+				animation: blink 1s infinite;
+			}
+
+			&:first-child {
+				margin-left: 0;
+			}
+
+			&:last-child {
+				margin-right: 0;
+			}
+
+			> * {
+				font-size: 20px;
+			}
+
+			&:disabled {
+				cursor: default;
+
+				> * {
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+
+	> .menu-back {
+		z-index: 1001;
+	}
+
+	> .menu {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1001;
+		height: 100dvh;
+		width: 240px;
+		box-sizing: border-box;
+		contain: strict;
+		overflow: auto;
+		overscroll-behavior: contain;
+		background: var(--navBg);
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/deck/antenna-column.vue b/packages/frontend/src/ui/deck/antenna-column.vue
new file mode 100644
index 0000000000..ba14530662
--- /dev/null
+++ b/packages/frontend/src/ui/deck/antenna-column.vue
@@ -0,0 +1,70 @@
+<template>
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
+	<template #header>
+		<i class="ti ti-antenna"></i><span style="margin-left: 8px;">{{ column.name }}</span>
+	</template>
+
+	<XTimeline v-if="column.antennaId" ref="timeline" src="antenna" :antenna="column.antennaId" @after="() => emit('loaded')"/>
+</XColumn>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import XColumn from './column.vue';
+import { updateColumn, Column } from './deck-store';
+import XTimeline from '@/components/MkTimeline.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	column: Column;
+	isStacked: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'loaded'): void;
+	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+
+let timeline = $ref<InstanceType<typeof XTimeline>>();
+
+onMounted(() => {
+	if (props.column.antennaId == null) {
+		setAntenna();
+	}
+});
+
+async function setAntenna() {
+	const antennas = await os.api('antennas/list');
+	const { canceled, result: antenna } = await os.select({
+		title: i18n.ts.selectAntenna,
+		items: antennas.map(x => ({
+			value: x, text: x.name,
+		})),
+		default: props.column.antennaId,
+	});
+	if (canceled) return;
+	updateColumn(props.column.id, {
+		antennaId: antenna.id,
+	});
+}
+
+const menu = [{
+	icon: 'ti ti-pencil',
+	text: i18n.ts.selectAntenna,
+	action: setAntenna,
+}];
+
+/*
+function focus() {
+	timeline.focus();
+}
+
+defineExpose({
+	focus,
+});
+*/
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/packages/frontend/src/ui/deck/column-core.vue b/packages/frontend/src/ui/deck/column-core.vue
new file mode 100644
index 0000000000..30c0dc5e1c
--- /dev/null
+++ b/packages/frontend/src/ui/deck/column-core.vue
@@ -0,0 +1,34 @@
+<template>
+<!-- TODO: リファクタの余地がありそう -->
+<div v-if="!column">たぶん見えちゃいけないやつ</div>
+<XMainColumn v-else-if="column.type === 'main'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+<XWidgetsColumn v-else-if="column.type === 'widgets'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+<XNotificationsColumn v-else-if="column.type === 'notifications'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+<XTlColumn v-else-if="column.type === 'tl'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+<XListColumn v-else-if="column.type === 'list'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+<XAntennaColumn v-else-if="column.type === 'antenna'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+<XMentionsColumn v-else-if="column.type === 'mentions'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+<XDirectColumn v-else-if="column.type === 'direct'" :column="column" :is-stacked="isStacked" @parent-focus="emit('parent-focus', $event)"/>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import XMainColumn from './main-column.vue';
+import XTlColumn from './tl-column.vue';
+import XAntennaColumn from './antenna-column.vue';
+import XListColumn from './list-column.vue';
+import XNotificationsColumn from './notifications-column.vue';
+import XWidgetsColumn from './widgets-column.vue';
+import XMentionsColumn from './mentions-column.vue';
+import XDirectColumn from './direct-column.vue';
+import { Column } from './deck-store';
+
+defineProps<{
+	column?: Column;
+	isStacked: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+</script>
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
new file mode 100644
index 0000000000..2a99b621e6
--- /dev/null
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -0,0 +1,398 @@
+<template>
+<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
+<section
+	v-hotkey="keymap" class="dnpfarvg _narrow_"
+	:class="{ paged: isMainColumn, naked, active, isStacked, draghover, dragging, dropready }"
+	@dragover.prevent.stop="onDragover"
+	@dragleave="onDragleave"
+	@drop.prevent.stop="onDrop"
+>
+	<header
+		:class="{ indicated }"
+		draggable="true"
+		@click="goTop"
+		@dragstart="onDragstart"
+		@dragend="onDragend"
+		@contextmenu.prevent.stop="onContextmenu"
+	>
+		<button v-if="isStacked && !isMainColumn" class="toggleActive _button" @click="toggleActive">
+			<template v-if="active"><i class="ti ti-chevron-up"></i></template>
+			<template v-else><i class="ti ti-chevron-down"></i></template>
+		</button>
+		<div class="action">
+			<slot name="action"></slot>
+		</div>
+		<span class="header"><slot name="header"></slot></span>
+		<button v-tooltip="i18n.ts.settings" class="menu _button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
+	</header>
+	<div v-show="active" ref="body">
+		<slot></slot>
+	</div>
+</section>
+</template>
+
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, provide, Ref, watch } from 'vue';
+import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn, Column, deckStore } from './deck-store';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { MenuItem } from '@/types/menu';
+
+provide('shouldHeaderThin', true);
+provide('shouldOmitHeaderTitle', true);
+provide('shouldSpacerMin', true);
+
+const props = withDefaults(defineProps<{
+	column: Column;
+	isStacked?: boolean;
+	naked?: boolean;
+	indicated?: boolean;
+	menu?: MenuItem[];
+}>(), {
+	isStacked: false,
+	naked: false,
+	indicated: false,
+});
+
+const emit = defineEmits<{
+	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+	(ev: 'change-active-state', v: boolean): void;
+}>();
+
+let body = $ref<HTMLDivElement>();
+
+let dragging = $ref(false);
+watch($$(dragging), v => os.deckGlobalEvents.emit(v ? 'column.dragStart' : 'column.dragEnd'));
+
+let draghover = $ref(false);
+let dropready = $ref(false);
+
+const isMainColumn = $computed(() => props.column.type === 'main');
+const active = $computed(() => props.column.active !== false);
+watch($$(active), v => emit('change-active-state', v));
+
+const keymap = $computed(() => ({
+	'shift+up': () => emit('parent-focus', 'up'),
+	'shift+down': () => emit('parent-focus', 'down'),
+	'shift+left': () => emit('parent-focus', 'left'),
+	'shift+right': () => emit('parent-focus', 'right'),
+}));
+
+onMounted(() => {
+	os.deckGlobalEvents.on('column.dragStart', onOtherDragStart);
+	os.deckGlobalEvents.on('column.dragEnd', onOtherDragEnd);
+});
+
+onBeforeUnmount(() => {
+	os.deckGlobalEvents.off('column.dragStart', onOtherDragStart);
+	os.deckGlobalEvents.off('column.dragEnd', onOtherDragEnd);
+});
+
+function onOtherDragStart() {
+	dropready = true;
+}
+
+function onOtherDragEnd() {
+	dropready = false;
+}
+
+function toggleActive() {
+	if (!props.isStacked) return;
+	updateColumn(props.column.id, {
+		active: !props.column.active,
+	});
+}
+
+function getMenu() {
+	let items = [{
+		icon: 'ti ti-settings',
+		text: i18n.ts._deck.configureColumn,
+		action: async () => {
+			const { canceled, result } = await os.form(props.column.name, {
+				name: {
+					type: 'string',
+					label: i18n.ts.name,
+					default: props.column.name,
+				},
+				width: {
+					type: 'number',
+					label: i18n.ts.width,
+					default: props.column.width,
+				},
+				flexible: {
+					type: 'boolean',
+					label: i18n.ts.flexible,
+					default: props.column.flexible,
+				},
+			});
+			if (canceled) return;
+			updateColumn(props.column.id, result);
+		},
+	}, {
+		type: 'parent',
+		text: i18n.ts.move + '...',
+		icon: 'ti ti-arrows-move',
+		children: [{
+			icon: 'ti ti-arrow-left',
+			text: i18n.ts._deck.swapLeft,
+			action: () => {
+				swapLeftColumn(props.column.id);
+			},
+		}, {
+			icon: 'ti ti-arrow-right',
+			text: i18n.ts._deck.swapRight,
+			action: () => {
+				swapRightColumn(props.column.id);
+			},
+		}, props.isStacked ? {
+			icon: 'ti ti-arrow-up',
+			text: i18n.ts._deck.swapUp,
+			action: () => {
+				swapUpColumn(props.column.id);
+			},
+		} : undefined, props.isStacked ? {
+			icon: 'ti ti-arrow-down',
+			text: i18n.ts._deck.swapDown,
+			action: () => {
+				swapDownColumn(props.column.id);
+			},
+		} : undefined],
+	}, {
+		icon: 'ti ti-stack-2',
+		text: i18n.ts._deck.stackLeft,
+		action: () => {
+			stackLeftColumn(props.column.id);
+		},
+	}, props.isStacked ? {
+		icon: 'ti ti-window-maximize',
+		text: i18n.ts._deck.popRight,
+		action: () => {
+			popRightColumn(props.column.id);
+		},
+	} : undefined, null, {
+		icon: 'ti ti-trash',
+		text: i18n.ts.remove,
+		danger: true,
+		action: () => {
+			removeColumn(props.column.id);
+		},
+	}];
+
+	if (props.menu) {
+		items.unshift(null);
+		items = props.menu.concat(items);
+	}
+
+	return items;
+}
+
+function showSettingsMenu(ev: MouseEvent) {
+	os.popupMenu(getMenu(), ev.currentTarget ?? ev.target);
+}
+
+function onContextmenu(ev: MouseEvent) {
+	os.contextMenu(getMenu(), ev);
+}
+
+function goTop() {
+	body.scrollTo({
+		top: 0,
+		behavior: 'smooth',
+	});
+}
+
+function onDragstart(ev) {
+	ev.dataTransfer.effectAllowed = 'move';
+	ev.dataTransfer.setData(_DATA_TRANSFER_DECK_COLUMN_, props.column.id);
+
+	// Chromeのバグで、Dragstartハンドラ内ですぐにDOMを変更する(=リアクティブなプロパティを変更する)とDragが終了してしまう
+	// SEE: https://stackoverflow.com/questions/19639969/html5-dragend-event-firing-immediately
+	window.setTimeout(() => {
+		dragging = true;
+	}, 10);
+}
+
+function onDragend(ev) {
+	dragging = false;
+}
+
+function onDragover(ev) {
+	// 自分自身がドラッグされている場合
+	if (dragging) {
+		// 自分自身にはドロップさせない
+		ev.dataTransfer.dropEffect = 'none';
+	} else {
+		const isDeckColumn = ev.dataTransfer.types[0] === _DATA_TRANSFER_DECK_COLUMN_;
+
+		ev.dataTransfer.dropEffect = isDeckColumn ? 'move' : 'none';
+
+		if (isDeckColumn) draghover = true;
+	}
+}
+
+function onDragleave() {
+	draghover = false;
+}
+
+function onDrop(ev) {
+	draghover = false;
+	os.deckGlobalEvents.emit('column.dragEnd');
+
+	const id = ev.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
+	if (id != null && id !== '') {
+		swapColumn(props.column.id, id);
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.dnpfarvg {
+	--root-margin: 10px;
+	--deckColumnHeaderHeight: 40px;
+
+	height: 100%;
+	overflow: hidden;
+	contain: strict;
+
+	&.draghover {
+		&:after {
+			content: "";
+			display: block;
+			position: absolute;
+			z-index: 1000;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: var(--focus);
+		}
+	}
+
+	&.dragging {
+		&:after {
+			content: "";
+			display: block;
+			position: absolute;
+			z-index: 1000;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: var(--focus);
+			opacity: 0.5;
+		}
+	}
+
+	&.dropready {
+		* {
+			pointer-events: none;
+		}
+	}
+
+	&:not(.active) {
+		flex-basis: var(--deckColumnHeaderHeight);
+		min-height: var(--deckColumnHeaderHeight);
+
+		> header.indicated {
+			box-shadow: 4px 0px var(--accent) inset;
+		}
+	}
+
+	&.naked {
+		background: var(--acrylicBg) !important;
+		-webkit-backdrop-filter: var(--blur, blur(10px));
+		backdrop-filter: var(--blur, blur(10px));
+
+		> header {
+			background: transparent;
+			box-shadow: none;
+
+			> button {
+				color: var(--fg);
+			}
+		}
+	}
+
+	&.paged {
+		background: var(--bg) !important;
+	}
+
+	> header {
+		position: relative;
+		display: flex;
+		z-index: 2;
+		line-height: var(--deckColumnHeaderHeight);
+		height: var(--deckColumnHeaderHeight);
+		padding: 0 16px;
+		font-size: 0.9em;
+		color: var(--panelHeaderFg);
+		background: var(--panelHeaderBg);
+		box-shadow: 0 1px 0 0 var(--panelHeaderDivider);
+		cursor: pointer;
+
+		&, * {
+			user-select: none;
+		}
+
+		&.indicated {
+			box-shadow: 0 3px 0 0 var(--accent);
+		}
+
+		> .header {
+			display: inline-block;
+			align-items: center;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		> span:only-of-type {
+			width: 100%;
+		}
+
+		> .toggleActive,
+		> .action > ::v-deep(*),
+		> .menu {
+			z-index: 1;
+			width: var(--deckColumnHeaderHeight);
+			line-height: var(--deckColumnHeaderHeight);
+			color: var(--faceTextButton);
+
+			&:hover {
+				color: var(--faceTextButtonHover);
+			}
+
+			&:active {
+				color: var(--faceTextButtonActive);
+			}
+		}
+
+		> .toggleActive, > .action {
+			margin-left: -16px;
+		}
+
+		> .action {
+			z-index: 1;
+		}
+
+		> .action:empty {
+			display: none;
+		}
+
+		> .menu {
+			margin-left: auto;
+			margin-right: -16px;
+		}
+	}
+
+	> div {
+		height: calc(100% - var(--deckColumnHeaderHeight));
+		overflow-y: auto;
+		overflow-x: hidden; // Safari does not supports clip
+		overflow-x: clip;
+		-webkit-overflow-scrolling: touch;
+		box-sizing: border-box;
+		background-color: var(--bg);
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/deck/deck-store.ts b/packages/frontend/src/ui/deck/deck-store.ts
new file mode 100644
index 0000000000..56db7398e5
--- /dev/null
+++ b/packages/frontend/src/ui/deck/deck-store.ts
@@ -0,0 +1,296 @@
+import { throttle } from 'throttle-debounce';
+import { markRaw } from 'vue';
+import { notificationTypes } from 'misskey-js';
+import { Storage } from '../../pizzax';
+import { i18n } from '@/i18n';
+import { api } from '@/os';
+import { deepClone } from '@/scripts/clone';
+
+type ColumnWidget = {
+	name: string;
+	id: string;
+	data: Record<string, any>;
+};
+
+export type Column = {
+	id: string;
+	type: 'main' | 'widgets' | 'notifications' | 'tl' | 'antenna' | 'list' | 'mentions' | 'direct';
+	name: string | null;
+	width: number;
+	widgets?: ColumnWidget[];
+	active?: boolean;
+	flexible?: boolean;
+	antennaId?: string;
+	listId?: string;
+	includingTypes?: typeof notificationTypes[number][];
+	tl?: 'home' | 'local' | 'social' | 'global';
+};
+
+export const deckStore = markRaw(new Storage('deck', {
+	profile: {
+		where: 'deviceAccount',
+		default: 'default',
+	},
+	columns: {
+		where: 'deviceAccount',
+		default: [] as Column[],
+	},
+	layout: {
+		where: 'deviceAccount',
+		default: [] as Column['id'][][],
+	},
+	columnAlign: {
+		where: 'deviceAccount',
+		default: 'left' as 'left' | 'right' | 'center',
+	},
+	alwaysShowMainColumn: {
+		where: 'deviceAccount',
+		default: true,
+	},
+	navWindow: {
+		where: 'deviceAccount',
+		default: true,
+	},
+}));
+
+export const loadDeck = async () => {
+	let deck;
+
+	try {
+		deck = await api('i/registry/get', {
+			scope: ['client', 'deck', 'profiles'],
+			key: deckStore.state.profile,
+		});
+	} catch (err) {
+		if (err.code === 'NO_SUCH_KEY') {
+			// 後方互換性のため
+			if (deckStore.state.profile === 'default') {
+				saveDeck();
+				return;
+			}
+
+			deckStore.set('columns', []);
+			deckStore.set('layout', []);
+			return;
+		}
+		throw err;
+	}
+
+	deckStore.set('columns', deck.columns);
+	deckStore.set('layout', deck.layout);
+};
+
+// TODO: deckがloadされていない状態でsaveすると意図せず上書きが発生するので対策する
+export const saveDeck = throttle(1000, () => {
+	api('i/registry/set', {
+		scope: ['client', 'deck', 'profiles'],
+		key: deckStore.state.profile,
+		value: {
+			columns: deckStore.reactiveState.columns.value,
+			layout: deckStore.reactiveState.layout.value,
+		},
+	});
+});
+
+export async function getProfiles(): Promise<string[]> {
+	return await api('i/registry/keys', {
+		scope: ['client', 'deck', 'profiles'],
+	});
+}
+
+export async function deleteProfile(key: string): Promise<void> {
+	return await api('i/registry/remove', {
+		scope: ['client', 'deck', 'profiles'],
+		key: key,
+	});
+}
+
+export function addColumn(column: Column) {
+	if (column.name === undefined) column.name = null;
+	deckStore.push('columns', column);
+	deckStore.push('layout', [column.id]);
+	saveDeck();
+}
+
+export function removeColumn(id: Column['id']) {
+	deckStore.set('columns', deckStore.state.columns.filter(c => c.id !== id));
+	deckStore.set('layout', deckStore.state.layout
+		.map(ids => ids.filter(_id => _id !== id))
+		.filter(ids => ids.length > 0));
+	saveDeck();
+}
+
+export function swapColumn(a: Column['id'], b: Column['id']) {
+	const aX = deckStore.state.layout.findIndex(ids => ids.indexOf(a) !== -1);
+	const aY = deckStore.state.layout[aX].findIndex(id => id === a);
+	const bX = deckStore.state.layout.findIndex(ids => ids.indexOf(b) !== -1);
+	const bY = deckStore.state.layout[bX].findIndex(id => id === b);
+	const layout = deepClone(deckStore.state.layout);
+	layout[aX][aY] = b;
+	layout[bX][bY] = a;
+	deckStore.set('layout', layout);
+	saveDeck();
+}
+
+export function swapLeftColumn(id: Column['id']) {
+	const layout = deepClone(deckStore.state.layout);
+	deckStore.state.layout.some((ids, i) => {
+		if (ids.includes(id)) {
+			const left = deckStore.state.layout[i - 1];
+			if (left) {
+				layout[i - 1] = deckStore.state.layout[i];
+				layout[i] = left;
+				deckStore.set('layout', layout);
+			}
+			return true;
+		}
+	});
+	saveDeck();
+}
+
+export function swapRightColumn(id: Column['id']) {
+	const layout = deepClone(deckStore.state.layout);
+	deckStore.state.layout.some((ids, i) => {
+		if (ids.includes(id)) {
+			const right = deckStore.state.layout[i + 1];
+			if (right) {
+				layout[i + 1] = deckStore.state.layout[i];
+				layout[i] = right;
+				deckStore.set('layout', layout);
+			}
+			return true;
+		}
+	});
+	saveDeck();
+}
+
+export function swapUpColumn(id: Column['id']) {
+	const layout = deepClone(deckStore.state.layout);
+	const idsIndex = deckStore.state.layout.findIndex(ids => ids.includes(id));
+	const ids = deepClone(deckStore.state.layout[idsIndex]);
+	ids.some((x, i) => {
+		if (x === id) {
+			const up = ids[i - 1];
+			if (up) {
+				ids[i - 1] = id;
+				ids[i] = up;
+
+				layout[idsIndex] = ids;
+				deckStore.set('layout', layout);
+			}
+			return true;
+		}
+	});
+	saveDeck();
+}
+
+export function swapDownColumn(id: Column['id']) {
+	const layout = deepClone(deckStore.state.layout);
+	const idsIndex = deckStore.state.layout.findIndex(ids => ids.includes(id));
+	const ids = deepClone(deckStore.state.layout[idsIndex]);
+	ids.some((x, i) => {
+		if (x === id) {
+			const down = ids[i + 1];
+			if (down) {
+				ids[i + 1] = id;
+				ids[i] = down;
+
+				layout[idsIndex] = ids;
+				deckStore.set('layout', layout);
+			}
+			return true;
+		}
+	});
+	saveDeck();
+}
+
+export function stackLeftColumn(id: Column['id']) {
+	let layout = deepClone(deckStore.state.layout);
+	const i = deckStore.state.layout.findIndex(ids => ids.includes(id));
+	layout = layout.map(ids => ids.filter(_id => _id !== id));
+	layout[i - 1].push(id);
+	layout = layout.filter(ids => ids.length > 0);
+	deckStore.set('layout', layout);
+	saveDeck();
+}
+
+export function popRightColumn(id: Column['id']) {
+	let layout = deepClone(deckStore.state.layout);
+	const i = deckStore.state.layout.findIndex(ids => ids.includes(id));
+	const affected = layout[i];
+	layout = layout.map(ids => ids.filter(_id => _id !== id));
+	layout.splice(i + 1, 0, [id]);
+	layout = layout.filter(ids => ids.length > 0);
+	deckStore.set('layout', layout);
+
+	const columns = deepClone(deckStore.state.columns);
+	for (const column of columns) {
+		if (affected.includes(column.id)) {
+			column.active = true;
+		}
+	}
+	deckStore.set('columns', columns);
+
+	saveDeck();
+}
+
+export function addColumnWidget(id: Column['id'], widget: ColumnWidget) {
+	const columns = deepClone(deckStore.state.columns);
+	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
+	const column = deepClone(deckStore.state.columns[columnIndex]);
+	if (column == null) return;
+	if (column.widgets == null) column.widgets = [];
+	column.widgets.unshift(widget);
+	columns[columnIndex] = column;
+	deckStore.set('columns', columns);
+	saveDeck();
+}
+
+export function removeColumnWidget(id: Column['id'], widget: ColumnWidget) {
+	const columns = deepClone(deckStore.state.columns);
+	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
+	const column = deepClone(deckStore.state.columns[columnIndex]);
+	if (column == null) return;
+	column.widgets = column.widgets.filter(w => w.id !== widget.id);
+	columns[columnIndex] = column;
+	deckStore.set('columns', columns);
+	saveDeck();
+}
+
+export function setColumnWidgets(id: Column['id'], widgets: ColumnWidget[]) {
+	const columns = deepClone(deckStore.state.columns);
+	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
+	const column = deepClone(deckStore.state.columns[columnIndex]);
+	if (column == null) return;
+	column.widgets = widgets;
+	columns[columnIndex] = column;
+	deckStore.set('columns', columns);
+	saveDeck();
+}
+
+export function updateColumnWidget(id: Column['id'], widgetId: string, widgetData: any) {
+	const columns = deepClone(deckStore.state.columns);
+	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
+	const column = deepClone(deckStore.state.columns[columnIndex]);
+	if (column == null) return;
+	column.widgets = column.widgets.map(w => w.id === widgetId ? {
+		...w,
+		data: widgetData,
+	} : w);
+	columns[columnIndex] = column;
+	deckStore.set('columns', columns);
+	saveDeck();
+}
+
+export function updateColumn(id: Column['id'], column: Partial<Column>) {
+	const columns = deepClone(deckStore.state.columns);
+	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
+	const currentColumn = deepClone(deckStore.state.columns[columnIndex]);
+	if (currentColumn == null) return;
+	for (const [k, v] of Object.entries(column)) {
+		currentColumn[k] = v;
+	}
+	columns[columnIndex] = currentColumn;
+	deckStore.set('columns', columns);
+	saveDeck();
+}
diff --git a/packages/frontend/src/ui/deck/direct-column.vue b/packages/frontend/src/ui/deck/direct-column.vue
new file mode 100644
index 0000000000..75b018cacd
--- /dev/null
+++ b/packages/frontend/src/ui/deck/direct-column.vue
@@ -0,0 +1,31 @@
+<template>
+<XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
+	<template #header><i class="ti ti-mail" style="margin-right: 8px;"></i>{{ column.name }}</template>
+
+	<XNotes :pagination="pagination"/>
+</XColumn>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import XColumn from './column.vue';
+import XNotes from '@/components/MkNotes.vue';
+import { Column } from './deck-store';
+
+defineProps<{
+	column: Column;
+	isStacked: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+
+const pagination = {
+	endpoint: 'notes/mentions' as const,
+	limit: 10,
+	params: {
+		visibility: 'specified',
+	},
+};
+</script>
diff --git a/packages/frontend/src/ui/deck/list-column.vue b/packages/frontend/src/ui/deck/list-column.vue
new file mode 100644
index 0000000000..d9f3f7b4e7
--- /dev/null
+++ b/packages/frontend/src/ui/deck/list-column.vue
@@ -0,0 +1,58 @@
+<template>
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
+	<template #header>
+		<i class="ti ti-list"></i><span style="margin-left: 8px;">{{ column.name }}</span>
+	</template>
+
+	<XTimeline v-if="column.listId" ref="timeline" src="list" :list="column.listId" @after="() => emit('loaded')"/>
+</XColumn>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import XColumn from './column.vue';
+import { updateColumn, Column } from './deck-store';
+import XTimeline from '@/components/MkTimeline.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	column: Column;
+	isStacked: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'loaded'): void;
+	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+
+let timeline = $ref<InstanceType<typeof XTimeline>>();
+
+if (props.column.listId == null) {
+	setList();
+}
+
+async function setList() {
+	const lists = await os.api('users/lists/list');
+	const { canceled, result: list } = await os.select({
+		title: i18n.ts.selectList,
+		items: lists.map(x => ({
+			value: x, text: x.name,
+		})),
+		default: props.column.listId,
+	});
+	if (canceled) return;
+	updateColumn(props.column.id, {
+		listId: list.id,
+	});
+}
+
+const menu = [{
+	icon: 'ti ti-pencil',
+	text: i18n.ts.selectList,
+	action: setList,
+}];
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/packages/frontend/src/ui/deck/main-column.vue b/packages/frontend/src/ui/deck/main-column.vue
new file mode 100644
index 0000000000..0c66172397
--- /dev/null
+++ b/packages/frontend/src/ui/deck/main-column.vue
@@ -0,0 +1,68 @@
+<template>
+<XColumn v-if="deckStore.state.alwaysShowMainColumn || mainRouter.currentRoute.value.name !== 'index'" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
+	<template #header>
+		<template v-if="pageMetadata?.value">
+			<i :class="pageMetadata?.value.icon"></i>
+			{{ pageMetadata?.value.title }}
+		</template>
+	</template>
+
+	<RouterView @contextmenu.stop="onContextmenu"/>
+</XColumn>
+</template>
+
+<script lang="ts" setup>
+import { ComputedRef, provide } from 'vue';
+import XColumn from './column.vue';
+import { deckStore, Column } from '@/ui/deck/deck-store';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+import { mainRouter } from '@/router';
+import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+
+defineProps<{
+	column: Column;
+	isStacked: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+
+let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
+
+provide('router', mainRouter);
+provideMetadataReceiver((info) => {
+	pageMetadata = info;
+});
+
+/*
+function back() {
+	history.back();
+}
+*/
+function onContextmenu(ev: MouseEvent) {
+	if (!ev.target) return;
+
+	const isLink = (el: HTMLElement) => {
+		if (el.tagName === 'A') return true;
+		if (el.parentElement) {
+			return isLink(el.parentElement);
+		}
+	};
+	if (isLink(ev.target as HTMLElement)) return;
+	if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes((ev.target as HTMLElement).tagName) || (ev.target as HTMLElement).attributes['contenteditable']) return;
+	if (window.getSelection()?.toString() !== '') return;
+	const path = mainRouter.currentRoute.value.path;
+	os.contextMenu([{
+		type: 'label',
+		text: path,
+	}, {
+		icon: 'ti ti-window-maximize',
+		text: i18n.ts.openInWindow,
+		action: () => {
+			os.pageWindow(path);
+		},
+	}], ev);
+}
+</script>
diff --git a/packages/frontend/src/ui/deck/mentions-column.vue b/packages/frontend/src/ui/deck/mentions-column.vue
new file mode 100644
index 0000000000..16962956a0
--- /dev/null
+++ b/packages/frontend/src/ui/deck/mentions-column.vue
@@ -0,0 +1,28 @@
+<template>
+<XColumn :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
+	<template #header><i class="ti ti-at" style="margin-right: 8px;"></i>{{ column.name }}</template>
+
+	<XNotes :pagination="pagination"/>
+</XColumn>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import XColumn from './column.vue';
+import XNotes from '@/components/MkNotes.vue';
+import { Column } from './deck-store';
+
+defineProps<{
+	column: Column;
+	isStacked: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+
+const pagination = {
+	endpoint: 'notes/mentions' as const,
+	limit: 10,
+};
+</script>
diff --git a/packages/frontend/src/ui/deck/notifications-column.vue b/packages/frontend/src/ui/deck/notifications-column.vue
new file mode 100644
index 0000000000..9d133035fe
--- /dev/null
+++ b/packages/frontend/src/ui/deck/notifications-column.vue
@@ -0,0 +1,44 @@
+<template>
+<XColumn :column="column" :is-stacked="isStacked" :menu="menu" @parent-focus="$event => emit('parent-focus', $event)">
+	<template #header><i class="ti ti-bell" style="margin-right: 8px;"></i>{{ column.name }}</template>
+
+	<XNotifications :include-types="column.includingTypes"/>
+</XColumn>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue';
+import XColumn from './column.vue';
+import { updateColumn, Column } from './deck-store';
+import XNotifications from '@/components/MkNotifications.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	column: Column;
+	isStacked: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+
+function func() {
+	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
+		includingTypes: props.column.includingTypes,
+	}, {
+		done: async (res) => {
+			const { includingTypes } = res;
+			updateColumn(props.column.id, {
+				includingTypes: includingTypes,
+			});
+		},
+	}, 'closed');
+}
+
+const menu = [{
+	icon: 'ti ti-pencil',
+	text: i18n.ts.notificationSetting,
+	action: func,
+}];
+</script>
diff --git a/packages/frontend/src/ui/deck/tl-column.vue b/packages/frontend/src/ui/deck/tl-column.vue
new file mode 100644
index 0000000000..49b29145ff
--- /dev/null
+++ b/packages/frontend/src/ui/deck/tl-column.vue
@@ -0,0 +1,119 @@
+<template>
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState" @parent-focus="$event => emit('parent-focus', $event)">
+	<template #header>
+		<i v-if="column.tl === 'home'" class="ti ti-home"></i>
+		<i v-else-if="column.tl === 'local'" class="ti ti-messages"></i>
+		<i v-else-if="column.tl === 'social'" class="ti ti-share"></i>
+		<i v-else-if="column.tl === 'global'" class="ti ti-world"></i>
+		<span style="margin-left: 8px;">{{ column.name }}</span>
+	</template>
+
+	<div v-if="disabled" class="iwaalbte">
+		<p>
+			<i class="ti ti-minus-circle"></i>
+			{{ $t('disabled-timeline.title') }}
+		</p>
+		<p class="desc">{{ $t('disabled-timeline.description') }}</p>
+	</div>
+	<XTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => emit('loaded')" @queue="queueUpdated" @note="onNote"/>
+</XColumn>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import XColumn from './column.vue';
+import { removeColumn, updateColumn, Column } from './deck-store';
+import XTimeline from '@/components/MkTimeline.vue';
+import * as os from '@/os';
+import { $i } from '@/account';
+import { instance } from '@/instance';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	column: Column;
+	isStacked: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'loaded'): void;
+	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+
+let disabled = $ref(false);
+let indicated = $ref(false);
+let columnActive = $ref(true);
+
+onMounted(() => {
+	if (props.column.tl == null) {
+		setType();
+	} else if ($i) {
+		disabled = !$i.isModerator && !$i.isAdmin && (
+			instance.disableLocalTimeline && ['local', 'social'].includes(props.column.tl) ||
+			instance.disableGlobalTimeline && ['global'].includes(props.column.tl));
+	}
+});
+
+async function setType() {
+	const { canceled, result: src } = await os.select({
+		title: i18n.ts.timeline,
+		items: [{
+			value: 'home' as const, text: i18n.ts._timelines.home,
+		}, {
+			value: 'local' as const, text: i18n.ts._timelines.local,
+		}, {
+			value: 'social' as const, text: i18n.ts._timelines.social,
+		}, {
+			value: 'global' as const, text: i18n.ts._timelines.global,
+		}],
+	});
+	if (canceled) {
+		if (props.column.tl == null) {
+			removeColumn(props.column.id);
+		}
+		return;
+	}
+	updateColumn(props.column.id, {
+		tl: src,
+	});
+}
+
+function queueUpdated(q) {
+	if (columnActive) {
+		indicated = q !== 0;
+	}
+}
+
+function onNote() {
+	if (!columnActive) {
+		indicated = true;
+	}
+}
+
+function onChangeActiveState(state) {
+	columnActive = state;
+
+	if (columnActive) {
+		indicated = false;
+	}
+}
+
+const menu = [{
+	icon: 'ti ti-pencil',
+	text: i18n.ts.timeline,
+	action: setType,
+}];
+</script>
+
+<style lang="scss" scoped>
+.iwaalbte {
+	text-align: center;
+
+	> p {
+		margin: 16px;
+
+		&.desc {
+			font-size: 14px;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/deck/widgets-column.vue b/packages/frontend/src/ui/deck/widgets-column.vue
new file mode 100644
index 0000000000..fc61d18ff6
--- /dev/null
+++ b/packages/frontend/src/ui/deck/widgets-column.vue
@@ -0,0 +1,69 @@
+<template>
+<XColumn :menu="menu" :naked="true" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
+	<template #header><i class="ti ti-apps" style="margin-right: 8px;"></i>{{ column.name }}</template>
+
+	<div class="wtdtxvec">
+		<div v-if="!(column.widgets && column.widgets.length > 0) && !edit" class="intro">{{ i18n.ts._deck.widgetsIntroduction }}</div>
+		<XWidgets :edit="edit" :widgets="column.widgets" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="edit = false"/>
+	</div>
+</XColumn>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import XColumn from './column.vue';
+import { addColumnWidget, Column, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store';
+import XWidgets from '@/components/MkWidgets.vue';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	column: Column;
+	isStacked: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'parent-focus', direction: 'up' | 'down' | 'left' | 'right'): void;
+}>();
+
+let edit = $ref(false);
+
+function addWidget(widget) {
+	addColumnWidget(props.column.id, widget);
+}
+
+function removeWidget(widget) {
+	removeColumnWidget(props.column.id, widget);
+}
+
+function updateWidget({ id, data }) {
+	updateColumnWidget(props.column.id, id, data);
+}
+
+function updateWidgets(widgets) {
+	setColumnWidgets(props.column.id, widgets);
+}
+
+function func() {
+	edit = !edit;
+}
+
+const menu = [{
+	icon: 'ti ti-pencil',
+	text: i18n.ts.editWidgets,
+	action: func,
+}];
+</script>
+
+<style lang="scss" scoped>
+.wtdtxvec {
+	--margin: 8px;
+	--panelBorder: none;
+
+	padding: 0 var(--margin);
+
+	> .intro {
+		padding: 16px;
+		text-align: center;
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
new file mode 100644
index 0000000000..b91bf476e8
--- /dev/null
+++ b/packages/frontend/src/ui/universal.vue
@@ -0,0 +1,390 @@
+<template>
+<div class="dkgtipfy" :class="{ wallpaper }">
+	<XSidebar v-if="!isMobile" class="sidebar"/>
+
+	<MkStickyContainer class="contents">
+		<template #header><XStatusBars :class="$style.statusbars"/></template>
+		<main style="min-width: 0;" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
+			<div :class="$style.content">
+				<RouterView/>
+			</div>
+			<div :class="$style.spacer"></div>
+		</main>
+	</MkStickyContainer>
+
+	<div v-if="isDesktop" ref="widgetsEl" class="widgets">
+		<XWidgets @mounted="attachSticky"/>
+	</div>
+
+	<button v-if="!isDesktop && !isMobile" class="widgetButton _button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
+
+	<div v-if="isMobile" class="buttons">
+		<button class="button nav _button" @click="drawerMenuShowing = true"><i class="ti ti-menu-2"></i><span v-if="menuIndicated" class="indicator"><i class="_indicatorCircle"></i></span></button>
+		<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i class="ti ti-home"></i></button>
+		<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="ti ti-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="_indicatorCircle"></i></span></button>
+		<button class="button widget _button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
+		<button class="button post _button" @click="os.post()"><i class="ti ti-pencil"></i></button>
+	</div>
+
+	<transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
+		<div
+			v-if="drawerMenuShowing"
+			class="menuDrawer-back _modalBg"
+			@click="drawerMenuShowing = false"
+			@touchstart.passive="drawerMenuShowing = false"
+		></div>
+	</transition>
+
+	<transition :name="$store.state.animation ? 'menuDrawer' : ''">
+		<XDrawerMenu v-if="drawerMenuShowing" class="menuDrawer"/>
+	</transition>
+
+	<transition :name="$store.state.animation ? 'widgetsDrawer-back' : ''">
+		<div
+			v-if="widgetsShowing"
+			class="widgetsDrawer-back _modalBg"
+			@click="widgetsShowing = false"
+			@touchstart.passive="widgetsShowing = false"
+		></div>
+	</transition>
+
+	<transition :name="$store.state.animation ? 'widgetsDrawer' : ''">
+		<XWidgets v-if="widgetsShowing" class="widgetsDrawer"/>
+	</transition>
+
+	<XCommon/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, provide, onMounted, computed, ref, 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_/navbar-for-mobile.vue';
+import * as os from '@/os';
+import { defaultStore } from '@/store';
+import { navbarItemDef } from '@/navbar';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
+import { Router } from '@/nirax';
+import { mainRouter } from '@/router';
+import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+import { deviceKind } from '@/scripts/device-kind';
+const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
+const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
+const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
+
+const DESKTOP_THRESHOLD = 1100;
+const MOBILE_THRESHOLD = 500;
+
+// デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない
+const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD);
+const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
+window.addEventListener('resize', () => {
+	isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
+});
+
+let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
+const widgetsEl = $ref<HTMLElement>();
+const widgetsShowing = $ref(false);
+
+provide('router', mainRouter);
+provideMetadataReceiver((info) => {
+	pageMetadata = info;
+	if (pageMetadata.value) {
+		document.title = `${pageMetadata.value.title} | ${instanceName}`;
+	}
+});
+
+const menuIndicated = computed(() => {
+	for (const def in navbarItemDef) {
+		if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
+		if (navbarItemDef[def].indicated) return true;
+	}
+	return false;
+});
+
+const drawerMenuShowing = ref(false);
+
+mainRouter.on('change', () => {
+	drawerMenuShowing.value = false;
+});
+
+document.documentElement.style.overflowY = 'scroll';
+
+if (defaultStore.state.widgets.length === 0) {
+	defaultStore.set('widgets', [{
+		name: 'calendar',
+		id: 'a', place: 'right', data: {},
+	}, {
+		name: 'notifications',
+		id: 'b', place: 'right', data: {},
+	}, {
+		name: 'trends',
+		id: 'c', place: 'right', data: {},
+	}]);
+}
+
+onMounted(() => {
+	if (!isDesktop.value) {
+		window.addEventListener('resize', () => {
+			if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop.value = true;
+		}, { passive: true });
+	}
+});
+
+const onContextmenu = (ev) => {
+	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: 'ti ti-window-maximize',
+		text: i18n.ts.openInWindow,
+		action: () => {
+			os.pageWindow(path);
+		},
+	}], ev);
+};
+
+const attachSticky = (el) => {
+	const sticky = new StickySidebar(widgetsEl);
+	window.addEventListener('scroll', () => {
+		sticky.calc(window.scrollY);
+	}, { passive: true });
+};
+
+function top() {
+	window.scroll({ top: 0, behavior: 'smooth' });
+}
+
+const wallpaper = localStorage.getItem('wallpaper') != null;
+</script>
+
+<style lang="scss" scoped>
+.widgetsDrawer-enter-active,
+.widgetsDrawer-leave-active {
+	opacity: 1;
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.widgetsDrawer-enter-from,
+.widgetsDrawer-leave-active {
+	opacity: 0;
+	transform: translateX(240px);
+}
+
+.widgetsDrawer-back-enter-active,
+.widgetsDrawer-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.widgetsDrawer-back-enter-from,
+.widgetsDrawer-back-leave-active {
+	opacity: 0;
+}
+
+.menuDrawer-enter-active,
+.menuDrawer-leave-active {
+	opacity: 1;
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.menuDrawer-enter-from,
+.menuDrawer-leave-active {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
+.menuDrawer-back-enter-active,
+.menuDrawer-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.menuDrawer-back-enter-from,
+.menuDrawer-back-leave-active {
+	opacity: 0;
+}
+
+.dkgtipfy {
+	$ui-font-size: 1em; // TODO: どこかに集約したい
+	$widgets-hide-threshold: 1090px;
+
+	min-height: 100dvh;
+	box-sizing: border-box;
+	display: flex;
+
+	&.wallpaper {
+		background: var(--wallpaperOverlay);
+		//backdrop-filter: var(--blur, blur(4px));
+	}
+
+	> .sidebar {
+		border-right: solid 0.5px var(--divider);
+	}
+
+	> .contents {
+		width: 100%;
+		min-width: 0;
+		background: var(--bg);
+	}
+
+	> .widgets {
+		padding: 0 var(--margin);
+		border-left: solid 0.5px var(--divider);
+		background: var(--bg);
+
+		@media (max-width: $widgets-hide-threshold) {
+			display: none;
+		}
+	}
+
+	> .widgetButton {
+		display: block;
+		position: fixed;
+		z-index: 1000;
+		bottom: 32px;
+		right: 32px;
+		width: 64px;
+		height: 64px;
+		border-radius: 100%;
+		box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
+		font-size: 22px;
+		background: var(--panel);
+	}
+
+	> .widgetsDrawer-back {
+		z-index: 1001;
+	}
+
+	> .widgetsDrawer {
+		position: fixed;
+		top: 0;
+		right: 0;
+		z-index: 1001;
+		height: 100dvh;
+		padding: var(--margin);
+		box-sizing: border-box;
+		overflow: auto;
+		overscroll-behavior: contain;
+		background: var(--bg);
+	}
+
+	> .buttons {
+		position: fixed;
+		z-index: 1000;
+		bottom: 0;
+		left: 0;
+		padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
+		display: flex;
+		width: 100%;
+		box-sizing: border-box;
+		-webkit-backdrop-filter: var(--blur, blur(32px));
+		backdrop-filter: var(--blur, blur(32px));
+		background-color: var(--header);
+		border-top: solid 0.5px var(--divider);
+
+		> .button {
+			position: relative;
+			flex: 1;
+			padding: 0;
+			margin: auto;
+			height: 64px;
+			border-radius: 8px;
+			background: var(--panel);
+			color: var(--fg);
+
+			&:not(:last-child) {
+				margin-right: 12px;
+			}
+
+			@media (max-width: 400px) {
+				height: 60px;
+
+				&:not(:last-child) {
+					margin-right: 8px;
+				}
+			}
+
+			&:hover {
+				background: var(--X2);
+			}
+
+			> .indicator {
+				position: absolute;
+				top: 0;
+				left: 0;
+				color: var(--indicator);
+				font-size: 16px;
+				animation: blink 1s infinite;
+			}
+
+			&:first-child {
+				margin-left: 0;
+			}
+
+			&:last-child {
+				margin-right: 0;
+			}
+
+			> * {
+				font-size: 20px;
+			}
+
+			&:disabled {
+				cursor: default;
+
+				> * {
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+
+	> .menuDrawer-back {
+		z-index: 1001;
+	}
+
+	> .menuDrawer {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1001;
+		height: 100dvh;
+		width: 240px;
+		box-sizing: border-box;
+		contain: strict;
+		overflow: auto;
+		overscroll-behavior: contain;
+		background: var(--navBg);
+	}
+}
+</style>
+
+<style lang="scss" module>
+.statusbars {
+	position: sticky;
+	top: 0;
+	left: 0;
+}
+
+.spacer {
+	$widgets-hide-threshold: 1090px;
+
+	height: calc(env(safe-area-inset-bottom, 0px) + 96px);
+
+	@media (min-width: ($widgets-hide-threshold + 1px)) {
+		display: none;
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/universal.widgets.vue b/packages/frontend/src/ui/universal.widgets.vue
new file mode 100644
index 0000000000..33fb492836
--- /dev/null
+++ b/packages/frontend/src/ui/universal.widgets.vue
@@ -0,0 +1,71 @@
+<template>
+<div class="efzpzdvf">
+	<XWidgets :edit="editMode" :widgets="defaultStore.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
+
+	<button v-if="editMode" class="_textButton" style="font-size: 0.9em;" @click="editMode = false"><i class="ti ti-check"></i> {{ i18n.ts.editWidgetsExit }}</button>
+	<button v-else class="_textButton mk-widget-edit" style="font-size: 0.9em;" @click="editMode = true"><i class="ti ti-pencil"></i> {{ i18n.ts.editWidgets }}</button>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+import XWidgets from '@/components/MkWidgets.vue';
+import { i18n } from '@/i18n';
+import { defaultStore } from '@/store';
+
+const emit = defineEmits<{
+	(ev: 'mounted', el: Element): void;
+}>();
+
+let editMode = $ref(false);
+let rootEl = $ref<HTMLDivElement>();
+
+onMounted(() => {
+	emit('mounted', rootEl);
+});
+
+function addWidget(widget) {
+	defaultStore.set('widgets', [{
+		...widget,
+		place: null,
+	}, ...defaultStore.state.widgets]);
+}
+
+function removeWidget(widget) {
+	defaultStore.set('widgets', defaultStore.state.widgets.filter(w => w.id !== widget.id));
+}
+
+function updateWidget({ id, data }) {
+	defaultStore.set('widgets', defaultStore.state.widgets.map(w => w.id === id ? {
+		...w,
+		data,
+	} : w));
+}
+
+function updateWidgets(widgets) {
+	defaultStore.set('widgets', widgets);
+}
+</script>
+
+<style lang="scss" scoped>
+.efzpzdvf {
+	position: sticky;
+	height: min-content;
+	min-height: 100vh;
+	padding: var(--margin) 0;
+	box-sizing: border-box;
+
+	> * {
+		margin: var(--margin) 0;
+		width: 300px;
+
+		&:first-child {
+			margin-top: 0;
+		}
+	}
+
+	> .add {
+		margin: 0 auto;
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/visitor.vue b/packages/frontend/src/ui/visitor.vue
new file mode 100644
index 0000000000..ec9150d346
--- /dev/null
+++ b/packages/frontend/src/ui/visitor.vue
@@ -0,0 +1,19 @@
+<template>
+<DesignB/>
+<XCommon/>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import DesignA from './visitor/a.vue';
+import DesignB from './visitor/b.vue';
+import XCommon from './_common_/common.vue';
+
+export default defineComponent({
+	components: {
+		XCommon,
+		DesignA,
+		DesignB,
+	},
+});
+</script>
diff --git a/packages/frontend/src/ui/visitor/a.vue b/packages/frontend/src/ui/visitor/a.vue
new file mode 100644
index 0000000000..f8db7a9d09
--- /dev/null
+++ b/packages/frontend/src/ui/visitor/a.vue
@@ -0,0 +1,259 @@
+<template>
+<div class="mk-app">
+	<div v-if="mainRouter.currentRoute?.name === 'index'" class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
+		<div>
+			<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
+			<div v-if="meta" class="about">
+				<!-- eslint-disable-next-line vue/no-v-html -->
+				<div class="desc" v-html="meta.description || $ts.introMisskey"></div>
+			</div>
+			<div class="action">
+				<button class="_button primary" @click="signup()">{{ $ts.signup }}</button>
+				<button class="_button" @click="signin()">{{ $ts.login }}</button>
+			</div>
+		</div>
+	</div>
+	<div v-else class="banner-mini" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
+		<div>
+			<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
+		</div>
+	</div>
+
+	<div class="main">
+		<div ref="contents" class="contents" :class="{ wallpaper }">
+			<header v-show="mainRouter.currentRoute?.name !== 'index'" ref="header" class="header">
+				<XHeader :info="pageInfo"/>
+			</header>
+			<main ref="main">
+				<RouterView/>
+			</main>
+			<div class="powered-by">
+				<b><MkA to="/">{{ host }}</MkA></b>
+				<small>Powered by <a href="https://github.com/misskey-dev/misskey" target="_blank">Misskey</a></small>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import XHeader from './header.vue';
+import { host, instanceName } from '@/config';
+import { search } from '@/scripts/search';
+import * as os from '@/os';
+import MkPagination from '@/components/MkPagination.vue';
+import MkButton from '@/components/MkButton.vue';
+import { ColdDeviceStorage } from '@/store';
+import { mainRouter } from '@/router';
+
+const DESKTOP_THRESHOLD = 1100;
+
+export default defineComponent({
+	components: {
+		XHeader,
+		MkPagination,
+		MkButton,
+	},
+
+	data() {
+		return {
+			host,
+			instanceName,
+			pageInfo: null,
+			meta: null,
+			narrow: window.innerWidth < 1280,
+			announcements: {
+				endpoint: 'announcements',
+				limit: 10,
+			},
+			mainRouter,
+			isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
+		};
+	},
+
+	computed: {
+		keymap(): any {
+			return {
+				'd': () => {
+					if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
+					this.$store.set('darkMode', !this.$store.state.darkMode);
+				},
+				's': search,
+				'h|/': this.help,
+			};
+		},
+	},
+
+	created() {
+		document.documentElement.style.overflowY = 'scroll';
+
+		os.api('meta', { detail: true }).then(meta => {
+			this.meta = meta;
+		});
+	},
+
+	mounted() {
+		if (!this.isDesktop) {
+			window.addEventListener('resize', () => {
+				if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
+			}, { passive: true });
+		}
+	},
+
+	methods: {
+		// @ThatOneCalculator: Are these methods even used?
+		// I can't find references to them anywhere else in the code...
+
+		// setParallax(el) {
+		// 	new simpleParallax(el);
+		// },
+
+		changePage(page) {
+			if (page == null) return;
+			// eslint-disable-next-line no-undef
+			if (page[symbols.PAGE_INFO]) {
+				// eslint-disable-next-line no-undef
+				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');
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.mk-app {
+	min-height: 100vh;
+
+	> .banner {
+		position: relative;
+		width: 100%;
+		text-align: center;
+		background-position: center;
+		background-size: cover;
+
+		> div {
+			height: 100%;
+			background: rgba(0, 0, 0, 0.3);
+
+			* {
+				color: #fff;
+			}
+					
+			> h1 {
+				margin: 0;
+				padding: 96px 32px 0 32px;
+				text-shadow: 0 0 8px black;
+
+				> .logo {
+					vertical-align: bottom;
+					max-height: 150px;
+				}
+			}
+
+			> .about {
+				padding: 32px;
+				max-width: 580px;
+				margin: 0 auto;
+				box-sizing: border-box;
+				text-shadow: 0 0 8px black;
+			}
+
+			> .action {
+				padding-bottom: 64px;
+				
+				> button {
+					display: inline-block;
+					padding: 10px 20px;
+					box-sizing: border-box;
+					text-align: center;
+					border-radius: 999px;
+					background: var(--panel);
+					color: var(--fg);
+
+					&.primary {
+						background: var(--accent);
+						color: #fff;
+					}
+
+					&:first-child {
+						margin-right: 16px;
+					}
+				}
+			}
+		}
+	}
+
+	> .banner-mini {
+		position: relative;
+		width: 100%;
+		text-align: center;
+		background-position: center;
+		background-size: cover;
+
+		> div {
+			position: relative;
+			z-index: 1;
+			height: 100%;
+			background: rgba(0, 0, 0, 0.3);
+
+			* {
+				color: #fff !important;
+			}
+
+			> header {
+				
+			}
+					
+			> h1 {
+				margin: 0;
+				padding: 32px;
+				text-shadow: 0 0 8px black;
+
+				> .logo {
+					vertical-align: bottom;
+					max-height: 100px;
+				}
+			}
+		}
+	}
+
+	> .main {
+		> .contents {
+			position: relative;
+			z-index: 1;
+
+			> .header {
+				position: sticky;
+				top: 0;
+				left: 0;
+				z-index: 1000;
+			}
+
+			> .powered-by {
+				padding: 28px;
+				font-size: 14px;
+				text-align: center;
+				border-top: 1px solid var(--divider);
+
+				> small {
+					display: block;
+					margin-top: 8px;
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+}
+</style>
+
+<style lang="scss">
+</style>
diff --git a/packages/frontend/src/ui/visitor/b.vue b/packages/frontend/src/ui/visitor/b.vue
new file mode 100644
index 0000000000..275008a8f8
--- /dev/null
+++ b/packages/frontend/src/ui/visitor/b.vue
@@ -0,0 +1,248 @@
+<template>
+<div class="mk-app">
+	<a v-if="root" href="https://github.com/misskey-dev/misskey" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:var(--panel); color:var(--fg); position: fixed; z-index: 10; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+	<div v-if="!narrow && !root" class="side">
+		<XKanban class="kanban" full/>
+	</div>
+
+	<div class="main">
+		<XKanban v-if="narrow && !root" class="banner" :powered-by="root"/>
+
+		<div class="contents">
+			<XHeader v-if="!root" class="header" :info="pageInfo"/>
+			<main>
+				<RouterView/>
+			</main>
+			<div v-if="!root" class="powered-by">
+				<b><MkA to="/">{{ host }}</MkA></b>
+				<small>Powered by <a href="https://github.com/misskey-dev/misskey" target="_blank">Misskey</a></small>
+			</div>
+		</div>
+	</div>
+
+	<transition :name="$store.state.animation ? 'tray-back' : ''">
+		<div
+			v-if="showMenu"
+			class="menu-back _modalBg"
+			@click="showMenu = false"
+			@touchstart.passive="showMenu = false"
+		></div>
+	</transition>
+
+	<transition :name="$store.state.animation ? 'tray' : ''">
+		<div v-if="showMenu" class="menu">
+			<MkA to="/" class="link" active-class="active"><i class="ti ti-home icon"></i>{{ $ts.home }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ $ts.explore }}</MkA>
+			<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ $ts.featured }}</MkA>
+			<MkA to="/channels" class="link" active-class="active"><i class="ti ti-device-tv icon"></i>{{ $ts.channel }}</MkA>
+			<div class="action">
+				<button class="_buttonPrimary" @click="signup()">{{ $ts.signup }}</button>
+				<button class="_button" @click="signin()">{{ $ts.login }}</button>
+			</div>
+		</div>
+	</transition>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ComputedRef, onMounted, provide } from 'vue';
+import XHeader from './header.vue';
+import XKanban from './kanban.vue';
+import { host, instanceName } from '@/config';
+import { search } from '@/scripts/search';
+import * as os from '@/os';
+import MkPagination from '@/components/MkPagination.vue';
+import XSigninDialog from '@/components/MkSigninDialog.vue';
+import XSignupDialog from '@/components/MkSignupDialog.vue';
+import MkButton from '@/components/MkButton.vue';
+import { ColdDeviceStorage, defaultStore } from '@/store';
+import { mainRouter } from '@/router';
+import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+
+const DESKTOP_THRESHOLD = 1100;
+
+let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
+
+provide('router', mainRouter);
+provideMetadataReceiver((info) => {
+	pageMetadata = info;
+	if (pageMetadata.value) {
+		document.title = `${pageMetadata.value.title} | ${instanceName}`;
+	}
+});
+
+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,
+	};
+});
+
+const root = $computed(() => mainRouter.currentRoute.value.name === 'index');
+
+os.api('meta', { detail: true }).then(res => {
+	meta = res;
+});
+
+function signin() {
+	os.popup(XSigninDialog, {
+		autoSet: true,
+	}, {}, 'closed');
+}
+
+function signup() {
+	os.popup(XSignupDialog, {
+		autoSet: true,
+	}, {}, 'closed');
+}
+
+onMounted(() => {
+	if (!isDesktop) {
+		window.addEventListener('resize', () => {
+			if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop = true;
+		}, { passive: true });
+	}
+});
+
+defineExpose({
+	showMenu: $$(showMenu),
+});
+</script>
+
+<style>
+.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
+</style>
+
+<style lang="scss" scoped>
+.tray-enter-active,
+.tray-leave-active {
+	opacity: 1;
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.tray-enter-from,
+.tray-leave-active {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
+.tray-back-enter-active,
+.tray-back-leave-active {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.tray-back-enter-from,
+.tray-back-leave-active {
+	opacity: 0;
+}
+
+.mk-app {
+	display: flex;
+	min-height: 100vh;
+	background-position: center;
+	background-size: cover;
+	background-attachment: fixed;
+
+	> .side {
+		width: 500px;
+		height: 100vh;
+
+		> .kanban {
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 500px;
+			height: 100vh;
+			overflow: auto;
+		}
+	}
+
+	> .main {
+		flex: 1;
+		min-width: 0;
+
+		> .banner {
+		}
+
+		> .contents {
+			position: relative;
+			z-index: 1;
+
+			> .powered-by {
+				padding: 28px;
+				font-size: 14px;
+				text-align: center;
+				border-top: 1px solid var(--divider);
+
+				> small {
+					display: block;
+					margin-top: 8px;
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+
+	> .menu-back {
+		position: fixed;
+		z-index: 1001;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+	}
+
+	> .menu {
+		position: fixed;
+		z-index: 1001;
+		top: 0;
+		left: 0;
+		width: 240px;
+		height: 100vh;
+		background: var(--panel);
+
+		> .link {
+			display: block;
+			padding: 16px;
+
+			> .icon {
+				margin-right: 1em;
+			}
+		}
+
+		> .action {
+			padding: 16px;
+
+			> button {
+				display: block;
+				width: 100%;
+				padding: 10px;
+				box-sizing: border-box;
+				text-align: center;
+				border-radius: 999px;
+
+				&._button {
+					background: var(--panel);
+				}
+
+				&:first-child {
+					margin-bottom: 16px;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/visitor/header.vue b/packages/frontend/src/ui/visitor/header.vue
new file mode 100644
index 0000000000..7300b12a75
--- /dev/null
+++ b/packages/frontend/src/ui/visitor/header.vue
@@ -0,0 +1,228 @@
+<template>
+<div class="sqxihjet">
+	<div v-if="narrow === false" class="wide">
+		<div class="content">
+			<MkA to="/" class="link" active-class="active"><i class="ti ti-home icon"></i>{{ $ts.home }}</MkA>
+			<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ $ts.explore }}</MkA>
+			<MkA to="/featured" class="link" active-class="active"><i class="fas fa-fire-alt icon"></i>{{ $ts.featured }}</MkA>
+			<MkA to="/channels" class="link" active-class="active"><i class="ti ti-device-tv icon"></i>{{ $ts.channel }}</MkA>
+			<div v-if="info" class="page active link">
+				<div class="title">
+					<i v-if="info.icon" class="icon" :class="info.icon"></i>
+					<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
+					<span v-if="info.title" class="text">{{ info.title }}</span>
+					<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
+				</div>
+				<button v-if="info.action" class="_button action" @click.stop="info.action.handler"><!-- TODO --></button>
+			</div>
+			<div class="right">
+				<button class="_button search" @click="search()"><i class="ti ti-search icon"></i><span>{{ $ts.search }}</span></button>
+				<button class="_buttonPrimary signup" @click="signup()">{{ $ts.signup }}</button>
+				<button class="_button login" @click="signin()">{{ $ts.login }}</button>
+			</div>
+		</div>
+	</div>
+	<div v-else-if="narrow === true" class="narrow">
+		<button class="menu _button" @click="$parent.showMenu = true">
+			<i class="ti ti-menu-2 icon"></i>
+		</button>
+		<div v-if="info" class="title">
+			<i v-if="info.icon" class="icon" :class="info.icon"></i>
+			<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
+			<span v-if="info.title" class="text">{{ info.title }}</span>
+			<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
+		</div>
+		<button v-if="info && info.action" class="action _button" @click.stop="info.action.handler">
+			<!-- TODO -->
+		</button>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import XSigninDialog from '@/components/MkSigninDialog.vue';
+import XSignupDialog from '@/components/MkSignupDialog.vue';
+import * as os from '@/os';
+import { search } from '@/scripts/search';
+
+export default defineComponent({
+	props: {
+		info: {
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			narrow: null,
+			showMenu: false,
+		};
+	},
+
+	mounted() {
+		this.narrow = this.$el.clientWidth < 1300;
+	},
+
+	methods: {
+		signin() {
+			os.popup(XSigninDialog, {
+				autoSet: true,
+			}, {}, 'closed');
+		},
+
+		signup() {
+			os.popup(XSignupDialog, {
+				autoSet: true,
+			}, {}, 'closed');
+		},
+
+		search,
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.sqxihjet {
+	$height: 60px;
+	position: sticky;
+	top: 0;
+	left: 0;
+	z-index: 1000;
+	line-height: $height;
+	-webkit-backdrop-filter: var(--blur, blur(32px));
+	backdrop-filter: var(--blur, blur(32px));
+	background-color: var(--X16);
+
+	> .wide {
+		> .content {
+			max-width: 1400px;
+			margin: 0 auto;
+			display: flex;
+			align-items: center;
+
+			> .link {
+				$line: 3px;
+				display: inline-block;
+				padding: 0 16px;
+				line-height: $height - ($line * 2);
+				border-top: solid $line transparent;
+				border-bottom: solid $line transparent;
+
+				> .icon {
+					margin-right: 0.5em;
+				}
+
+				&.page {
+					border-bottom-color: var(--accent);
+				}
+			}
+
+			> .page {
+				> .title {
+					display: inline-block;
+					vertical-align: bottom;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					position: relative;
+
+					> .icon + .text {
+						margin-left: 8px;
+					}
+
+					> .avatar {
+						$size: 32px;
+						display: inline-block;
+						width: $size;
+						height: $size;
+						vertical-align: middle;
+						margin-right: 8px;
+						pointer-events: none;
+					}
+
+					&._button {
+						&:hover {
+							color: var(--fgHighlighted);
+						}
+					}
+
+					&.selected {
+						box-shadow: 0 -2px 0 0 var(--accent) inset;
+						color: var(--fgHighlighted);
+					}
+				}
+
+				> .action {
+					padding: 0 0 0 16px;
+				}
+			}
+
+			> .right {
+				margin-left: auto;
+
+				> .search {
+					background: var(--bg);
+					border-radius: 999px;
+					width: 230px;
+					line-height: $height - 20px;
+					margin-right: 16px;
+					text-align: left;
+
+					> * {
+						opacity: 0.7;
+					}
+
+					> .icon {
+						padding: 0 16px;
+					}
+				}
+
+				> .signup {
+					border-radius: 999px;
+					padding: 0 24px;
+					line-height: $height - 20px;
+				}
+
+				> .login {
+					padding: 0 16px;
+				}
+			}
+		}
+	}
+
+	> .narrow {
+		display: flex;
+
+		> .menu,
+		> .action {
+			width: $height;
+			height: $height;
+			font-size: 20px;
+		}
+
+		> .title {
+			flex: 1;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			position: relative;
+			text-align: center;
+
+			> .icon + .text {
+				margin-left: 8px;
+			}
+
+			> .avatar {
+				$size: 32px;
+				display: inline-block;
+				width: $size;
+				height: $size;
+				vertical-align: middle;
+				margin-right: 8px;
+				pointer-events: none;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/visitor/kanban.vue b/packages/frontend/src/ui/visitor/kanban.vue
new file mode 100644
index 0000000000..51e47f277d
--- /dev/null
+++ b/packages/frontend/src/ui/visitor/kanban.vue
@@ -0,0 +1,257 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+<div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ $instance.backgroundImageUrl })` }">
+	<div class="back" :class="{ transparent }"></div>
+	<div class="contents">
+		<div class="wrapper">
+			<h1 v-if="meta" :class="{ full }">
+				<MkA to="/" class="link"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl" alt="logo"><span v-else class="text">{{ instanceName }}</span></MkA>
+			</h1>
+			<template v-if="full">
+				<div v-if="meta" class="about">
+					<div class="desc" v-html="meta.description || $ts.introMisskey"></div>
+				</div>
+				<div class="action">
+					<button class="_buttonPrimary" @click="signup()">{{ $ts.signup }}</button>
+					<button class="_button" @click="signin()">{{ $ts.login }}</button>
+				</div>
+				<div class="announcements panel">
+					<header>{{ $ts.announcements }}</header>
+					<MkPagination v-slot="{items}" :pagination="announcements" class="list">
+						<section v-for="announcement in items" :key="announcement.id" class="item">
+							<div class="title">{{ announcement.title }}</div>
+							<div class="content">
+								<Mfm :text="announcement.text"/>
+								<img v-if="announcement.imageUrl" :src="announcement.imageUrl" alt="announcement image"/>
+							</div>
+						</section>
+					</MkPagination>
+				</div>
+				<div v-if="poweredBy" class="powered-by">
+					<b><MkA to="/">{{ host }}</MkA></b>
+					<small>Powered by <a href="https://github.com/misskey-dev/misskey" target="_blank">Misskey</a></small>
+				</div>
+			</template>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import { host, instanceName } from '@/config';
+import * as os from '@/os';
+import MkPagination from '@/components/MkPagination.vue';
+import XSigninDialog from '@/components/MkSigninDialog.vue';
+import XSignupDialog from '@/components/MkSignupDialog.vue';
+import MkButton from '@/components/MkButton.vue';
+
+export default defineComponent({
+	components: {
+		MkPagination,
+		MkButton,
+	},
+
+	props: {
+		full: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		transparent: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		poweredBy: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+	},
+
+	data() {
+		return {
+			host,
+			instanceName,
+			pageInfo: null,
+			meta: null,
+			narrow: window.innerWidth < 1280,
+			announcements: {
+				endpoint: 'announcements',
+				limit: 10,
+			},
+		};
+	},
+
+	created() {
+		os.api('meta', { detail: true }).then(meta => {
+			this.meta = meta;
+		});
+	},
+
+	methods: {
+		signin() {
+			os.popup(XSigninDialog, {
+				autoSet: true,
+			}, {}, 'closed');
+		},
+
+		signup() {
+			os.popup(XSignupDialog, {
+				autoSet: true,
+			}, {}, 'closed');
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.rwqkcmrc {
+	position: relative;
+	text-align: center;
+	background-position: center;
+	background-size: cover;
+	// TODO: パララックスにしたい
+
+	> .back {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.3);
+
+		&.transparent {
+			-webkit-backdrop-filter: var(--blur, blur(12px));
+			backdrop-filter: var(--blur, blur(12px));
+		}
+	}
+
+	> .contents {
+		position: relative;
+		z-index: 1;
+		height: inherit;
+		overflow: auto;
+
+		> .wrapper {
+			max-width: 380px;
+			padding: 0 16px;
+			box-sizing: border-box;
+			margin: 0 auto;
+
+			> .panel {
+				-webkit-backdrop-filter: var(--blur, blur(8px));
+				backdrop-filter: var(--blur, blur(8px));
+				background: rgba(0, 0, 0, 0.5);
+				border-radius: var(--radius);
+
+				&, * {
+					color: #fff !important;
+				}
+			}
+
+			> h1 {
+				display: block;
+				margin: 0;
+				padding: 32px 0 32px 0;
+				color: #fff;
+
+				&.full {
+					padding: 64px 0 0 0;
+
+					> .link {
+						> ::v-deep(.logo) {
+							max-height: 130px;
+						}
+					}
+				}
+
+				> .link {
+					display: block;
+
+					> ::v-deep(.logo) {
+						vertical-align: bottom;
+						max-height: 100px;
+					}
+				}
+			}
+
+			> .about {
+				display: block;
+				margin: 24px 0;
+				text-align: center;
+				box-sizing: border-box;
+				text-shadow: 0 0 8px black;
+				color: #fff;
+			}
+
+			> .action {
+				> button {
+					display: block;
+					width: 100%;
+					padding: 10px;
+					box-sizing: border-box;
+					text-align: center;
+					border-radius: 999px;
+
+					&._button {
+						background: var(--panel);
+					}
+
+					&:first-child {
+						margin-bottom: 16px;
+					}
+				}
+			}
+
+			> .announcements {
+				margin: 32px 0;
+				text-align: left;
+
+				> header {
+					padding: 12px 16px;
+					border-bottom: solid 1px rgba(255, 255, 255, 0.5);
+				}
+
+				> .list {
+					max-height: 300px;
+					overflow: auto;
+
+					> .item {
+						padding: 12px 16px;
+
+						& + .item {
+							border-top: solid 1px rgba(255, 255, 255, 0.5);
+						}
+
+						> .title {
+							font-weight: bold;
+						}
+
+						> .content {
+							> img {
+								max-width: 100%;
+							}
+						}
+					}
+				}
+			}
+
+			> .powered-by {
+				padding: 28px;
+				font-size: 14px;
+				text-align: center;
+				border-top: 1px solid rgba(255, 255, 255, 0.5);
+				color: #fff;
+
+				> small {
+					display: block;
+					margin-top: 8px;
+					opacity: 0.5;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/ui/zen.vue b/packages/frontend/src/ui/zen.vue
new file mode 100644
index 0000000000..84c96a1dae
--- /dev/null
+++ b/packages/frontend/src/ui/zen.vue
@@ -0,0 +1,34 @@
+<template>
+<div class="mk-app">
+	<RouterView/>
+
+	<XCommon/>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { provide, ComputedRef } from 'vue';
+import XCommon from './_common_/common.vue';
+import { mainRouter } from '@/router';
+import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata';
+import { instanceName } from '@/config';
+
+let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
+
+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 {
+	min-height: 100dvh;
+	box-sizing: border-box;
+}
+</style>
diff --git a/packages/frontend/src/widgets/activity.calendar.vue b/packages/frontend/src/widgets/activity.calendar.vue
new file mode 100644
index 0000000000..84f6af1c13
--- /dev/null
+++ b/packages/frontend/src/widgets/activity.calendar.vue
@@ -0,0 +1,81 @@
+<template>
+<svg viewBox="0 0 21 7">
+	<rect v-for="record in activity" class="day"
+		width="1" height="1"
+		:x="record.x" :y="record.date.weekday"
+		rx="1" ry="1"
+		fill="transparent">
+		<title>{{ record.date.year }}/{{ record.date.month + 1 }}/{{ record.date.day }}</title>
+	</rect>
+	<rect v-for="record in activity" class="day"
+		:width="record.v" :height="record.v"
+		:x="record.x + ((1 - record.v) / 2)" :y="record.date.weekday + ((1 - record.v) / 2)"
+		rx="1" ry="1"
+		:fill="record.color"
+		style="pointer-events: none;"/>
+	<rect class="today"
+		width="1" height="1"
+		:x="activity[0].x" :y="activity[0].date.weekday"
+		rx="1" ry="1"
+		fill="none"
+		stroke-width="0.1"
+		stroke="#f73520"/>
+</svg>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+	activity: any[]
+}>();
+
+for (const d of props.activity) {
+	d.total = d.notes + d.replies + d.renotes;
+}
+const peak = Math.max(...props.activity.map(d => d.total));
+
+const now = new Date();
+const year = now.getFullYear();
+const month = now.getMonth();
+const day = now.getDate();
+
+let x = 20;
+props.activity.slice().forEach((d, i) => {
+	d.x = x;
+
+	const date = new Date(year, month, day - i);
+	d.date = {
+		year: date.getFullYear(),
+		month: date.getMonth(),
+		day: date.getDate(),
+		weekday: date.getDay(),
+	};
+
+	d.v = peak === 0 ? 0 : d.total / (peak / 2);
+	if (d.v > 1) d.v = 1;
+	const ch = d.date.weekday === 0 || d.date.weekday === 6 ? 275 : 170;
+	const cs = d.v * 100;
+	const cl = 15 + ((1 - d.v) * 80);
+	d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
+
+	if (d.date.weekday === 0) x--;
+});
+</script>
+
+<style lang="scss" scoped>
+svg {
+	display: block;
+	padding: 16px;
+	width: 100%;
+	box-sizing: border-box;
+
+	> rect {
+		transform-origin: center;
+
+		&.day {
+			&:hover {
+				fill: rgba(#000, 0.05);
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/activity.chart.vue b/packages/frontend/src/widgets/activity.chart.vue
new file mode 100644
index 0000000000..b61e419f94
--- /dev/null
+++ b/packages/frontend/src/widgets/activity.chart.vue
@@ -0,0 +1,92 @@
+<template>
+<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" @mousedown.prevent="onMousedown">
+	<polyline
+		:points="pointsNote"
+		fill="none"
+		stroke-width="1"
+		stroke="#41ddde"/>
+	<polyline
+		:points="pointsReply"
+		fill="none"
+		stroke-width="1"
+		stroke="#f7796c"/>
+	<polyline
+		:points="pointsRenote"
+		fill="none"
+		stroke-width="1"
+		stroke="#a1de41"/>
+	<polyline
+		:points="pointsTotal"
+		fill="none"
+		stroke-width="1"
+		stroke="#555"
+		stroke-dasharray="2 2"/>
+</svg>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+	activity: any[]
+}>();
+
+let viewBoxX: number = $ref(147);
+let viewBoxY: number = $ref(60);
+let zoom: number = $ref(1);
+let pos: number = $ref(0);
+let pointsNote: any = $ref(null);
+let pointsReply: any = $ref(null);
+let pointsRenote: any = $ref(null);
+let pointsTotal: any = $ref(null);
+
+function dragListen(fn) {
+	window.addEventListener('mousemove', fn);
+	window.addEventListener('mouseleave', dragClear.bind(null, fn));
+	window.addEventListener('mouseup', dragClear.bind(null, fn));
+}
+
+function dragClear(fn) {
+	window.removeEventListener('mousemove', fn);
+	window.removeEventListener('mouseleave', dragClear);
+	window.removeEventListener('mouseup', dragClear);
+}
+
+function onMousedown(ev) {
+	const clickX = ev.clientX;
+	const clickY = ev.clientY;
+	const baseZoom = zoom;
+	const basePos = pos;
+
+	// 動かした時
+	dragListen(me => {
+		let moveLeft = me.clientX - clickX;
+		let moveTop = me.clientY - clickY;
+
+		zoom = Math.max(1, baseZoom + (-moveTop / 20));
+		pos = Math.min(0, basePos + moveLeft);
+		if (pos < -(((props.activity.length - 1) * zoom) - viewBoxX)) pos = -(((props.activity.length - 1) * zoom) - viewBoxX);
+
+		render();
+	});
+}
+
+function render() {
+	const peak = Math.max(...props.activity.map(d => d.total));
+	if (peak !== 0) {
+		const activity = props.activity.slice().reverse();
+		pointsNote = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.notes / peak)) * viewBoxY}`).join(' ');
+		pointsReply = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.replies / peak)) * viewBoxY}`).join(' ');
+		pointsRenote = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.renotes / peak)) * viewBoxY}`).join(' ');
+		pointsTotal = activity.map((d, i) => `${(i * zoom) + pos},${(1 - (d.total / peak)) * viewBoxY}`).join(' ');
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+svg {
+	display: block;
+	padding: 16px;
+	width: 100%;
+	box-sizing: border-box;
+	cursor: all-scroll;
+}
+</style>
diff --git a/packages/frontend/src/widgets/activity.vue b/packages/frontend/src/widgets/activity.vue
new file mode 100644
index 0000000000..238a05ca09
--- /dev/null
+++ b/packages/frontend/src/widgets/activity.vue
@@ -0,0 +1,90 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" class="mkw-activity">
+	<template #header><i class="ti ti-chart-line"></i>{{ i18n.ts._widgets.activity }}</template>
+	<template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
+
+	<div>
+		<MkLoading v-if="fetching"/>
+		<template v-else>
+			<XCalendar v-show="widgetProps.view === 0" :activity="[].concat(activity)"/>
+			<XChart v-show="widgetProps.view === 1" :activity="[].concat(activity)"/>
+		</template>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import XCalendar from './activity.calendar.vue';
+import XChart from './activity.chart.vue';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import MkContainer from '@/components/MkContainer.vue';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+
+const name = 'activity';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	view: {
+		type: 'number' as const,
+		default: 0,
+		hidden: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure, save } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const activity = ref(null);
+const fetching = ref(true);
+
+const toggleView = () => {
+	if (widgetProps.view === 1) {
+		widgetProps.view = 0;
+	} else {
+		widgetProps.view++;
+	}
+	save();
+};
+
+os.apiGet('charts/user/notes', {
+	userId: $i.id,
+	span: 'day',
+	limit: 7 * 21,
+}).then(res => {
+	activity.value = res.diffs.normal.map((_, i) => ({
+		total: res.diffs.normal[i] + res.diffs.reply[i] + res.diffs.renote[i],
+		notes: res.diffs.normal[i],
+		replies: res.diffs.reply[i],
+		renotes: res.diffs.renote[i],
+	}));
+	fetching.value = false;
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
diff --git a/packages/frontend/src/widgets/aichan.vue b/packages/frontend/src/widgets/aichan.vue
new file mode 100644
index 0000000000..828490fd9c
--- /dev/null
+++ b/packages/frontend/src/widgets/aichan.vue
@@ -0,0 +1,74 @@
+<template>
+<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-aichan">
+	<iframe ref="live2d" class="dedjhjmo" src="https://misskey-dev.github.io/mascot-web/?scale=1.5&y=1.1&eyeY=100" @click="touched"></iframe>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+
+const name = 'ai';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const live2d = ref<HTMLIFrameElement>();
+
+const touched = () => {
+	//if (this.live2d) this.live2d.changeExpression('gurugurume');
+};
+
+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);
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.dedjhjmo {
+	width: 100%;
+	height: 350px;
+	border: none;
+	pointer-events: none;
+}
+</style>
diff --git a/packages/frontend/src/widgets/aiscript.vue b/packages/frontend/src/widgets/aiscript.vue
new file mode 100644
index 0000000000..4009edb8b8
--- /dev/null
+++ b/packages/frontend/src/widgets/aiscript.vue
@@ -0,0 +1,175 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript">
+	<template #header><i class="ti ti-terminal-2"></i>{{ i18n.ts._widgets.aiscript }}</template>
+
+	<div class="uylguesu _monospace">
+		<textarea v-model="widgetProps.script" placeholder="(1 + 1)"></textarea>
+		<button class="_buttonPrimary" @click="run">RUN</button>
+		<div class="logs">
+			<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
+		</div>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { AiScript, parse, utils } from '@syuilo/aiscript';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import MkContainer from '@/components/MkContainer.vue';
+import { createAiScriptEnv } from '@/scripts/aiscript/api';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+
+const name = 'aiscript';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	script: {
+		type: 'string' as const,
+		multiline: true,
+		default: '(1 + 1)',
+		hidden: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const logs = ref<{
+	id: string;
+	text: string;
+	print: boolean;
+}[]>([]);
+
+const run = async () => {
+	logs.value = [];
+	const aiscript = new AiScript(createAiScriptEnv({
+		storageKey: 'widget',
+		token: $i?.token,
+	}), {
+		in: (q) => {
+			return new Promise(ok => {
+				os.inputText({
+					title: q,
+				}).then(({ canceled, result: a }) => {
+					ok(a);
+				});
+			});
+		},
+		out: (value) => {
+			logs.value.push({
+				id: Math.random().toString(),
+				text: value.type === 'str' ? value.value : utils.valToString(value),
+				print: true,
+			});
+		},
+		log: (type, params) => {
+			switch (type) {
+				case 'end': logs.value.push({
+					id: Math.random().toString(),
+					text: utils.valToString(params.val, true),
+					print: false,
+				}); break;
+				default: break;
+			}
+		},
+	});
+
+	let ast;
+	try {
+		ast = parse(widgetProps.script);
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			text: 'Syntax error :(',
+		});
+		return;
+	}
+	try {
+		await aiscript.exec(ast);
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			text: err,
+		});
+	}
+};
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.uylguesu {
+	text-align: right;
+
+	> textarea {
+		display: block;
+		width: 100%;
+		max-width: 100%;
+		min-width: 100%;
+		padding: 16px;
+		color: var(--fg);
+		background: transparent;
+		border: none;
+		border-bottom: solid 0.5px var(--divider);
+		border-radius: 0;
+		box-sizing: border-box;
+		font: inherit;
+
+		&:focus-visible {
+			outline: none;
+		}
+	}
+
+	> button {
+		display: inline-block;
+		margin: 8px;
+		padding: 0 10px;
+		height: 28px;
+		outline: none;
+		border-radius: 4px;
+
+		&:disabled {
+			opacity: 0.7;
+			cursor: default;
+		}
+	}
+
+	> .logs {
+		border-top: solid 0.5px var(--divider);
+		text-align: left;
+		padding: 16px;
+
+		&:empty {
+			display: none;
+		}
+
+		> .log {
+			&:not(.print) {
+				opacity: 0.7;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/button.vue b/packages/frontend/src/widgets/button.vue
new file mode 100644
index 0000000000..f0148d7f4e
--- /dev/null
+++ b/packages/frontend/src/widgets/button.vue
@@ -0,0 +1,103 @@
+<template>
+<div class="mkw-button">
+	<MkButton :primary="widgetProps.colored" full @click="run">
+		{{ widgetProps.label }}
+	</MkButton>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { AiScript, parse, utils } from '@syuilo/aiscript';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import { createAiScriptEnv } from '@/scripts/aiscript/api';
+import { $i } from '@/account';
+import MkButton from '@/components/MkButton.vue';
+
+const name = 'button';
+
+const widgetPropsDef = {
+	label: {
+		type: 'string' as const,
+		default: 'BUTTON',
+	},
+	colored: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	script: {
+		type: 'string' as const,
+		multiline: true,
+		default: 'Mk:dialog("hello" "world")',
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const run = async () => {
+	const aiscript = new AiScript(createAiScriptEnv({
+		storageKey: 'widget',
+		token: $i?.token,
+	}), {
+		in: (q) => {
+			return new Promise(ok => {
+				os.inputText({
+					title: q,
+				}).then(({ canceled, result: a }) => {
+					ok(a);
+				});
+			});
+		},
+		out: (value) => {
+			// nop
+		},
+		log: (type, params) => {
+			// nop
+		},
+	});
+
+	let ast;
+	try {
+		ast = parse(widgetProps.script);
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			text: 'Syntax error :(',
+		});
+		return;
+	}
+	try {
+		await aiscript.exec(ast);
+	} catch (err) {
+		os.alert({
+			type: 'error',
+			text: err,
+		});
+	}
+};
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.mkw-button {
+}
+</style>
diff --git a/packages/frontend/src/widgets/calendar.vue b/packages/frontend/src/widgets/calendar.vue
new file mode 100644
index 0000000000..99bd36e2fc
--- /dev/null
+++ b/packages/frontend/src/widgets/calendar.vue
@@ -0,0 +1,213 @@
+<template>
+<div class="mkw-calendar" :class="{ _panel: !widgetProps.transparent }">
+	<div class="calendar" :class="{ isHoliday }">
+		<p class="month-and-year">
+			<span class="year">{{ $t('yearX', { year }) }}</span>
+			<span class="month">{{ $t('monthX', { month }) }}</span>
+		</p>
+		<p v-if="month === 1 && day === 1" class="day">🎉{{ $t('dayX', { day }) }}<span style="display: inline-block; transform: scaleX(-1);">🎉</span></p>
+		<p v-else class="day">{{ $t('dayX', { day }) }}</p>
+		<p class="week-day">{{ weekDay }}</p>
+	</div>
+	<div class="info">
+		<div>
+			<p>{{ i18n.ts.today }}: <b>{{ dayP.toFixed(1) }}%</b></p>
+			<div class="meter">
+				<div class="val" :style="{ width: `${dayP}%` }"></div>
+			</div>
+		</div>
+		<div>
+			<p>{{ i18n.ts.thisMonth }}: <b>{{ monthP.toFixed(1) }}%</b></p>
+			<div class="meter">
+				<div class="val" :style="{ width: `${monthP}%` }"></div>
+			</div>
+		</div>
+		<div>
+			<p>{{ i18n.ts.thisYear }}: <b>{{ yearP.toFixed(1) }}%</b></p>
+			<div class="meter">
+				<div class="val" :style="{ width: `${yearP}%` }"></div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onUnmounted, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import { i18n } from '@/i18n';
+import { useInterval } from '@/scripts/use-interval';
+
+const name = 'calendar';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const year = ref(0);
+const month = ref(0);
+const day = ref(0);
+const weekDay = ref('');
+const yearP = ref(0);
+const monthP = ref(0);
+const dayP = ref(0);
+const isHoliday = ref(false);
+const tick = () => {
+	const now = new Date();
+	const nd = now.getDate();
+	const nm = now.getMonth();
+	const ny = now.getFullYear();
+
+	year.value = ny;
+	month.value = nm + 1;
+	day.value = nd;
+	weekDay.value = [
+		i18n.ts._weekday.sunday,
+		i18n.ts._weekday.monday,
+		i18n.ts._weekday.tuesday,
+		i18n.ts._weekday.wednesday,
+		i18n.ts._weekday.thursday,
+		i18n.ts._weekday.friday,
+		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 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();
+
+	dayP.value = dayNumer / dayDenom * 100;
+	monthP.value = monthNumer / monthDenom * 100;
+	yearP.value = yearNumer / yearDenom * 100;
+
+	isHoliday.value = now.getDay() === 0 || now.getDay() === 6;
+};
+
+useInterval(tick, 1000, {
+	immediate: true,
+	afterMounted: false,
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.mkw-calendar {
+	padding: 16px 0;
+
+	&:after {
+		content: "";
+		display: block;
+		clear: both;
+	}
+
+	> .calendar {
+		float: left;
+		width: 60%;
+		text-align: center;
+
+		&.isHoliday {
+			> .day {
+				color: #ef95a0;
+			}
+		}
+
+		> .month-and-year, > .week-day {
+			margin: 0;
+			line-height: 18px;
+			font-size: 0.9em;
+
+			> .year, > .month {
+				margin: 0 4px;
+			}
+		}
+
+		> .day {
+			margin: 10px 0;
+			line-height: 32px;
+			font-size: 1.75em;
+		}
+	}
+
+	> .info {
+		display: block;
+		float: left;
+		width: 40%;
+		padding: 0 16px 0 0;
+		box-sizing: border-box;
+
+		> div {
+			margin-bottom: 8px;
+
+			&:last-child {
+				margin-bottom: 4px;
+			}
+
+			> p {
+				margin: 0 0 2px 0;
+				font-size: 0.75em;
+				line-height: 18px;
+				opacity: 0.8;
+
+				> b {
+					margin-left: 2px;
+				}
+			}
+
+			> .meter {
+				width: 100%;
+				overflow: hidden;
+				background: var(--X11);
+				border-radius: 8px;
+
+				> .val {
+					height: 4px;
+					transition: width .3s cubic-bezier(0.23, 1, 0.32, 1);
+				}
+			}
+
+			&:nth-child(1) {
+				> .meter > .val {
+					background: #f7796c;
+				}
+			}
+
+			&:nth-child(2) {
+				> .meter > .val {
+					background: #a1de41;
+				}
+			}
+
+			&:nth-child(3) {
+				> .meter > .val {
+					background: #41ddde;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/clock.vue b/packages/frontend/src/widgets/clock.vue
new file mode 100644
index 0000000000..dc99b6631e
--- /dev/null
+++ b/packages/frontend/src/widgets/clock.vue
@@ -0,0 +1,203 @@
+<template>
+<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-clock">
+	<div class="vubelbmv" :class="widgetProps.size">
+		<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label a abbrev">{{ tzAbbrev }}</div>
+		<MkAnalogClock
+			class="clock"
+			:thickness="widgetProps.thickness"
+			:offset="tzOffset"
+			:graduations="widgetProps.graduations"
+			:fade-graduations="widgetProps.fadeGraduations"
+			:twentyfour="widgetProps.twentyFour"
+			:s-animation="widgetProps.sAnimation"
+		/>
+		<MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :show-s="false" :offset="tzOffset"/>
+		<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import MkContainer from '@/components/MkContainer.vue';
+import MkAnalogClock from '@/components/MkAnalogClock.vue';
+import MkDigitalClock from '@/components/MkDigitalClock.vue';
+import { timezones } from '@/scripts/timezones';
+import { i18n } from '@/i18n';
+
+const name = 'clock';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	size: {
+		type: 'radio' as const,
+		default: 'medium',
+		options: [{
+			value: 'small', label: i18n.ts.small,
+		}, {
+			value: 'medium', label: i18n.ts.medium,
+		}, {
+			value: 'large', label: i18n.ts.large,
+		}],
+	},
+	thickness: {
+		type: 'radio' as const,
+		default: 0.2,
+		options: [{
+			value: 0.1, label: 'thin',
+		}, {
+			value: 0.2, label: 'medium',
+		}, {
+			value: 0.3, label: 'thick',
+		}],
+	},
+	graduations: {
+		type: 'radio' as const,
+		default: 'numbers',
+		options: [{
+			value: 'none', label: 'None',
+		}, {
+			value: 'dots', label: 'Dots',
+		}, {
+			value: 'numbers', label: 'Numbers',
+		}],
+	},
+	fadeGraduations: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	sAnimation: {
+		type: 'radio' as const,
+		default: 'elastic',
+		options: [{
+			value: 'none', label: 'None',
+		}, {
+			value: 'elastic', label: 'Elastic',
+		}, {
+			value: 'easeOut', label: 'Ease out',
+		}],
+	},
+	twentyFour: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	label: {
+		type: 'radio' as const,
+		default: 'none',
+		options: [{
+			value: 'none', label: 'None',
+		}, {
+			value: 'time', label: 'Time',
+		}, {
+			value: 'tz', label: 'TZ',
+		}, {
+			value: 'timeAndTz', label: 'Time + TZ',
+		}],
+	},
+	timezone: {
+		type: 'enum' as const,
+		default: null,
+		enum: [...timezones.map((tz) => ({
+			label: tz.name,
+			value: tz.name.toLowerCase(),
+		})), {
+			label: '(auto)',
+			value: null,
+		}],
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const tzAbbrev = $computed(() => (widgetProps.timezone === null
+	? timezones.find((tz) => tz.name.toLowerCase() === Intl.DateTimeFormat().resolvedOptions().timeZone.toLowerCase())?.abbrev
+	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.abbrev) ?? '?');
+
+const tzOffset = $computed(() => widgetProps.timezone === null
+	? 0 - new Date().getTimezoneOffset()
+	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.offset ?? 0);
+
+const tzOffsetLabel = $computed(() => (tzOffset >= 0 ? '+' : '-') + Math.floor(tzOffset / 60).toString().padStart(2, '0') + ':' + (tzOffset % 60).toString().padStart(2, '0'));
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.vubelbmv {
+	position: relative;
+
+	> .label {
+		position: absolute;
+		opacity: 0.7;
+
+		&.a {
+			top: 14px;
+			left: 14px;
+		}
+
+		&.b {
+			top: 14px;
+			right: 14px;
+		}
+
+		&.c {
+			bottom: 14px;
+			left: 14px;
+		}
+
+		&.d {
+			bottom: 14px;
+			right: 14px;
+		}
+	}
+
+	> .clock {
+		margin: auto;
+	}
+
+	&.small {
+		padding: 12px;
+
+		> .clock {
+			height: 100px;
+		}
+	}
+
+	&.medium {
+		padding: 14px;
+
+		> .clock {
+			height: 150px;
+		}
+	}
+
+	&.large {
+		padding: 16px;
+
+		> .clock {
+			height: 200px;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/digital-clock.vue b/packages/frontend/src/widgets/digital-clock.vue
new file mode 100644
index 0000000000..d2bfd523f3
--- /dev/null
+++ b/packages/frontend/src/widgets/digital-clock.vue
@@ -0,0 +1,92 @@
+<template>
+<div class="mkw-digitalClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
+	<div v-if="widgetProps.showLabel" class="label">{{ tzAbbrev }}</div>
+	<div class="time">
+		<MkDigitalClock :show-ms="widgetProps.showMs" :offset="tzOffset"/>
+	</div>
+	<div v-if="widgetProps.showLabel" class="label">{{ tzOffsetLabel }}</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onUnmounted, ref, watch } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import { timezones } from '@/scripts/timezones';
+import MkDigitalClock from '@/components/MkDigitalClock.vue';
+
+const name = 'digitalClock';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	fontSize: {
+		type: 'number' as const,
+		default: 1.5,
+		step: 0.1,
+	},
+	showMs: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	showLabel: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	timezone: {
+		type: 'enum' as const,
+		default: null,
+		enum: [...timezones.map((tz) => ({
+			label: tz.name,
+			value: tz.name.toLowerCase(),
+		})), {
+			label: '(auto)',
+			value: null,
+		}],
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const tzAbbrev = $computed(() => (widgetProps.timezone === null
+	? timezones.find((tz) => tz.name.toLowerCase() === Intl.DateTimeFormat().resolvedOptions().timeZone.toLowerCase())?.abbrev
+	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.abbrev) ?? '?');
+
+const tzOffset = $computed(() => widgetProps.timezone === null
+	? 0 - new Date().getTimezoneOffset()
+	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.offset ?? 0);
+
+const tzOffsetLabel = $computed(() => (tzOffset >= 0 ? '+' : '-') + Math.floor(tzOffset / 60).toString().padStart(2, '0') + ':' + (tzOffset % 60).toString().padStart(2, '0'));
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.mkw-digitalClock {
+	padding: 16px 0;
+	text-align: center;
+
+	> .label {
+		font-size: 65%;
+		opacity: 0.7;
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/federation.vue b/packages/frontend/src/widgets/federation.vue
new file mode 100644
index 0000000000..3374783b0c
--- /dev/null
+++ b/packages/frontend/src/widgets/federation.vue
@@ -0,0 +1,147 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" :foldable="foldable" :scrollable="scrollable" class="mkw-federation">
+	<template #header><i class="ti ti-whirl"></i>{{ i18n.ts._widgets.federation }}</template>
+
+	<div class="wbrkwalb">
+		<MkLoading v-if="fetching"/>
+		<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="instances">
+			<div v-for="(instance, i) in instances" :key="instance.id" class="instance">
+				<img :src="getInstanceIcon(instance)" alt=""/>
+				<div class="body">
+					<a class="a" :href="'https://' + instance.host" target="_blank" :title="instance.host">{{ instance.host }}</a>
+					<p>{{ instance.softwareName || '?' }} {{ instance.softwareVersion }}</p>
+				</div>
+				<MkMiniChart class="chart" :src="charts[i].requests.received"/>
+			</div>
+		</transition-group>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import MkContainer from '@/components/MkContainer.vue';
+import MkMiniChart from '@/components/MkMiniChart.vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+
+const name = 'federation';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps> & { foldable?: boolean; scrollable?: boolean; }>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; foldable?: boolean; scrollable?: boolean; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+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;
+};
+
+useInterval(fetch, 1000 * 60, {
+	immediate: true,
+	afterMounted: true,
+});
+
+function getInstanceIcon(instance): string {
+	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+}
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.wbrkwalb {
+	$bodyTitleHieght: 18px;
+	$bodyInfoHieght: 16px;
+
+	height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
+	overflow: hidden;
+
+	> .instances {
+		.chart-move {
+			transition: transform 1s ease;
+		}
+
+		> .instance {
+			display: flex;
+			align-items: center;
+			padding: 14px 16px;
+			border-bottom: solid 0.5px var(--divider);
+
+			> img {
+				display: block;
+				width: ($bodyTitleHieght + $bodyInfoHieght);
+				height: ($bodyTitleHieght + $bodyInfoHieght);
+				object-fit: cover;
+				border-radius: 4px;
+				margin-right: 8px;
+			}
+
+			> .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;
+					line-height: $bodyTitleHieght;
+				}
+
+				> p {
+					margin: 0;
+					font-size: 75%;
+					opacity: 0.7;
+					line-height: $bodyInfoHieght;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
+
+			> .chart {
+				height: 30px;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/index.ts b/packages/frontend/src/widgets/index.ts
new file mode 100644
index 0000000000..39826f13c8
--- /dev/null
+++ b/packages/frontend/src/widgets/index.ts
@@ -0,0 +1,53 @@
+import { App, defineAsyncComponent } from 'vue';
+
+export default function(app: App) {
+	app.component('MkwMemo', defineAsyncComponent(() => import('./memo.vue')));
+	app.component('MkwNotifications', defineAsyncComponent(() => import('./notifications.vue')));
+	app.component('MkwTimeline', defineAsyncComponent(() => import('./timeline.vue')));
+	app.component('MkwCalendar', defineAsyncComponent(() => import('./calendar.vue')));
+	app.component('MkwRss', defineAsyncComponent(() => import('./rss.vue')));
+	app.component('MkwRssTicker', defineAsyncComponent(() => import('./rss-ticker.vue')));
+	app.component('MkwTrends', defineAsyncComponent(() => import('./trends.vue')));
+	app.component('MkwClock', defineAsyncComponent(() => import('./clock.vue')));
+	app.component('MkwActivity', defineAsyncComponent(() => import('./activity.vue')));
+	app.component('MkwPhotos', defineAsyncComponent(() => import('./photos.vue')));
+	app.component('MkwDigitalClock', defineAsyncComponent(() => import('./digital-clock.vue')));
+	app.component('MkwUnixClock', defineAsyncComponent(() => import('./unix-clock.vue')));
+	app.component('MkwFederation', defineAsyncComponent(() => import('./federation.vue')));
+	app.component('MkwPostForm', defineAsyncComponent(() => import('./post-form.vue')));
+	app.component('MkwSlideshow', defineAsyncComponent(() => import('./slideshow.vue')));
+	app.component('MkwServerMetric', defineAsyncComponent(() => import('./server-metric/index.vue')));
+	app.component('MkwOnlineUsers', defineAsyncComponent(() => import('./online-users.vue')));
+	app.component('MkwJobQueue', defineAsyncComponent(() => import('./job-queue.vue')));
+	app.component('MkwInstanceCloud', defineAsyncComponent(() => import('./instance-cloud.vue')));
+	app.component('MkwButton', defineAsyncComponent(() => import('./button.vue')));
+	app.component('MkwAiscript', defineAsyncComponent(() => import('./aiscript.vue')));
+	app.component('MkwAichan', defineAsyncComponent(() => import('./aichan.vue')));
+	app.component('MkwUserList', defineAsyncComponent(() => import('./user-list.vue')));
+}
+
+export const widgets = [
+	'memo',
+	'notifications',
+	'timeline',
+	'calendar',
+	'rss',
+	'rssTicker',
+	'trends',
+	'clock',
+	'activity',
+	'photos',
+	'digitalClock',
+	'unixClock',
+	'federation',
+	'instanceCloud',
+	'postForm',
+	'slideshow',
+	'serverMetric',
+	'onlineUsers',
+	'jobQueue',
+	'button',
+	'aiscript',
+	'aichan',
+	'userList',
+];
diff --git a/packages/frontend/src/widgets/instance-cloud.vue b/packages/frontend/src/widgets/instance-cloud.vue
new file mode 100644
index 0000000000..4965616995
--- /dev/null
+++ b/packages/frontend/src/widgets/instance-cloud.vue
@@ -0,0 +1,81 @@
+<template>
+<MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-instance-cloud">
+	<div class="">
+		<MkTagCloud v-if="activeInstances">
+			<li v-for="instance in activeInstances" :key="instance.id">
+				<a @click.prevent="onInstanceClick(instance)">
+					<img style="width: 32px;" :src="getInstanceIcon(instance)">
+				</a>
+			</li>
+		</MkTagCloud>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import MkContainer from '@/components/MkContainer.vue';
+import MkTagCloud from '@/components/MkTagCloud.vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { getProxiedImageUrlNullable } from '@/scripts/media-proxy';
+
+const name = 'instanceCloud';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+let cloud = $ref<InstanceType<typeof MkTagCloud> | null>();
+let activeInstances = $shallowRef(null);
+
+function onInstanceClick(i) {
+	os.pageWindow(`/instance-info/${i.host}`);
+}
+
+useInterval(() => {
+	os.api('federation/instances', {
+		sort: '+lastCommunicatedAt',
+		limit: 25,
+	}).then(res => {
+		activeInstances = res;
+		if (cloud) cloud.update();
+	});
+}, 1000 * 60 * 3, {
+	immediate: true,
+	afterMounted: true,
+});
+
+function getInstanceIcon(instance): string {
+	return getProxiedImageUrlNullable(instance.iconUrl, 'preview') ?? getProxiedImageUrlNullable(instance.faviconUrl, 'preview') ?? '/client-assets/dummy.png';
+}
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/packages/frontend/src/widgets/job-queue.vue b/packages/frontend/src/widgets/job-queue.vue
new file mode 100644
index 0000000000..9f19c51825
--- /dev/null
+++ b/packages/frontend/src/widgets/job-queue.vue
@@ -0,0 +1,197 @@
+<template>
+<div class="mkw-jobQueue _monospace" :class="{ _panel: !widgetProps.transparent }">
+	<div class="inbox">
+		<div class="label">Inbox queue<i v-if="current.inbox.waiting > 0" class="ti ti-alert-triangle icon"></i></div>
+		<div class="values">
+			<div>
+				<div>Process</div>
+				<div :class="{ inc: current.inbox.activeSincePrevTick > prev.inbox.activeSincePrevTick, dec: current.inbox.activeSincePrevTick < prev.inbox.activeSincePrevTick }">{{ number(current.inbox.activeSincePrevTick) }}</div>
+			</div>
+			<div>
+				<div>Active</div>
+				<div :class="{ inc: current.inbox.active > prev.inbox.active, dec: current.inbox.active < prev.inbox.active }">{{ number(current.inbox.active) }}</div>
+			</div>
+			<div>
+				<div>Delayed</div>
+				<div :class="{ inc: current.inbox.delayed > prev.inbox.delayed, dec: current.inbox.delayed < prev.inbox.delayed }">{{ number(current.inbox.delayed) }}</div>
+			</div>
+			<div>
+				<div>Waiting</div>
+				<div :class="{ inc: current.inbox.waiting > prev.inbox.waiting, dec: current.inbox.waiting < prev.inbox.waiting }">{{ number(current.inbox.waiting) }}</div>
+			</div>
+		</div>
+	</div>
+	<div class="deliver">
+		<div class="label">Deliver queue<i v-if="current.deliver.waiting > 0" class="ti ti-alert-triangle icon"></i></div>
+		<div class="values">
+			<div>
+				<div>Process</div>
+				<div :class="{ inc: current.deliver.activeSincePrevTick > prev.deliver.activeSincePrevTick, dec: current.deliver.activeSincePrevTick < prev.deliver.activeSincePrevTick }">{{ number(current.deliver.activeSincePrevTick) }}</div>
+			</div>
+			<div>
+				<div>Active</div>
+				<div :class="{ inc: current.deliver.active > prev.deliver.active, dec: current.deliver.active < prev.deliver.active }">{{ number(current.deliver.active) }}</div>
+			</div>
+			<div>
+				<div>Delayed</div>
+				<div :class="{ inc: current.deliver.delayed > prev.deliver.delayed, dec: current.deliver.delayed < prev.deliver.delayed }">{{ number(current.deliver.delayed) }}</div>
+			</div>
+			<div>
+				<div>Waiting</div>
+				<div :class="{ inc: current.deliver.waiting > prev.deliver.waiting, dec: current.deliver.waiting < prev.deliver.waiting }">{{ number(current.deliver.waiting) }}</div>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import { stream } from '@/stream';
+import number from '@/filters/number';
+import * as sound from '@/scripts/sound';
+import * as os from '@/os';
+import { deepClone } from '@/scripts/clone';
+
+const name = 'jobQueue';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	sound: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const connection = stream.useChannel('queueStats');
+const current = reactive({
+	inbox: {
+		activeSincePrevTick: 0,
+		active: 0,
+		waiting: 0,
+		delayed: 0,
+	},
+	deliver: {
+		activeSincePrevTick: 0,
+		active: 0,
+		waiting: 0,
+		delayed: 0,
+	},
+});
+const prev = reactive({} as typeof current);
+const jammedSound = sound.setVolume(sound.getAudio('syuilo/queue-jammed'), 1);
+
+for (const domain of ['inbox', 'deliver']) {
+	prev[domain] = deepClone(current[domain]);
+}
+
+const onStats = (stats) => {
+	for (const domain of ['inbox', 'deliver']) {
+		prev[domain] = deepClone(current[domain]);
+		current[domain].activeSincePrevTick = stats[domain].activeSincePrevTick;
+		current[domain].active = stats[domain].active;
+		current[domain].waiting = stats[domain].waiting;
+		current[domain].delayed = stats[domain].delayed;
+
+		if (current[domain].waiting > 0 && widgetProps.sound && jammedSound.paused) {
+			jammedSound.play();
+		}
+	}
+};
+
+const onStatsLog = (statsLog) => {
+	for (const stats of [...statsLog].reverse()) {
+		onStats(stats);
+	}
+};
+
+connection.on('stats', onStats);
+connection.on('statsLog', onStatsLog);
+
+connection.send('requestLog', {
+	id: Math.random().toString().substr(2, 8),
+	length: 1,
+});
+
+onUnmounted(() => {
+	connection.off('stats', onStats);
+	connection.off('statsLog', onStatsLog);
+	connection.dispose();
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+@keyframes warnBlink {
+	0% { opacity: 1; }
+	50% { opacity: 0; }
+}
+
+.mkw-jobQueue {
+	font-size: 0.9em;
+
+	> div {
+		padding: 16px;
+
+		&:not(:first-child) {
+			border-top: solid 0.5px var(--divider);
+		}
+
+		> .label {
+			display: flex;
+
+			> .icon {
+				color: var(--warn);
+				margin-left: auto;
+				animation: warnBlink 1s infinite;
+			}
+		}
+
+		> .values {
+			display: flex;
+
+			> div {
+				flex: 1;
+
+				> div:first-child {
+					opacity: 0.7;
+				}
+
+				> div:last-child {
+					&.inc {
+						color: var(--warn);
+					}
+
+					&.dec {
+						color: var(--success);
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/memo.vue b/packages/frontend/src/widgets/memo.vue
new file mode 100644
index 0000000000..1cc0e10bba
--- /dev/null
+++ b/packages/frontend/src/widgets/memo.vue
@@ -0,0 +1,111 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" class="mkw-memo">
+	<template #header><i class="ti ti-note"></i>{{ i18n.ts._widgets.memo }}</template>
+
+	<div class="otgbylcu">
+		<textarea v-model="text" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea>
+		<button :disabled="!changed" class="_buttonPrimary" @click="saveMemo">{{ i18n.ts.save }}</button>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import MkContainer from '@/components/MkContainer.vue';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+
+const name = 'memo';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const text = ref<string | null>(defaultStore.state.memo);
+const changed = ref(false);
+let timeoutId;
+
+const saveMemo = () => {
+	defaultStore.set('memo', text.value);
+	changed.value = false;
+};
+
+const onChange = () => {
+	changed.value = true;
+	window.clearTimeout(timeoutId);
+	timeoutId = window.setTimeout(saveMemo, 1000);
+};
+
+watch(() => defaultStore.reactiveState.memo, newText => {
+	text.value = newText.value;
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.otgbylcu {
+	padding-bottom: 28px + 16px;
+
+	> textarea {
+		display: block;
+		width: 100%;
+		max-width: 100%;
+		min-width: 100%;
+		padding: 16px;
+		color: var(--fg);
+		background: transparent;
+		border: none;
+		border-bottom: solid 0.5px var(--divider);
+		border-radius: 0;
+		box-sizing: border-box;
+		font: inherit;
+		font-size: 0.9em;
+
+		&:focus-visible {
+			outline: none;
+		}
+	}
+
+	> button {
+		display: block;
+		position: absolute;
+		bottom: 8px;
+		right: 8px;
+		margin: 0;
+		padding: 0 10px;
+		height: 28px;
+		outline: none;
+		border-radius: 4px;
+
+		&:disabled {
+			opacity: 0.7;
+			cursor: default;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/notifications.vue b/packages/frontend/src/widgets/notifications.vue
new file mode 100644
index 0000000000..e697209444
--- /dev/null
+++ b/packages/frontend/src/widgets/notifications.vue
@@ -0,0 +1,70 @@
+<template>
+<MkContainer :style="`height: ${widgetProps.height}px;`" :show-header="widgetProps.showHeader" :scrollable="true" class="mkw-notifications">
+	<template #header><i class="ti ti-bell"></i>{{ i18n.ts.notifications }}</template>
+	<template #func><button class="_button" @click="configureNotification()"><i class="ti ti-settings"></i></button></template>
+
+	<div>
+		<XNotifications :include-types="widgetProps.includingTypes"/>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import MkContainer from '@/components/MkContainer.vue';
+import XNotifications from '@/components/MkNotifications.vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const name = 'notifications';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	height: {
+		type: 'number' as const,
+		default: 300,
+	},
+	includingTypes: {
+		type: 'array' as const,
+		hidden: true,
+		default: null,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure, save } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const configureNotification = () => {
+	os.popup(defineAsyncComponent(() => import('@/components/MkNotificationSettingWindow.vue')), {
+		includingTypes: widgetProps.includingTypes,
+	}, {
+		done: async (res) => {
+			const { includingTypes } = res;
+			widgetProps.includingTypes = includingTypes;
+			save();
+		},
+	}, 'closed');
+};
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
diff --git a/packages/frontend/src/widgets/online-users.vue b/packages/frontend/src/widgets/online-users.vue
new file mode 100644
index 0000000000..e9ab79b111
--- /dev/null
+++ b/packages/frontend/src/widgets/online-users.vue
@@ -0,0 +1,78 @@
+<template>
+<div class="mkw-onlineUsers" :class="{ _panel: !widgetProps.transparent, pad: !widgetProps.transparent }">
+	<I18n v-if="onlineUsersCount" :src="i18n.ts.onlineUsersCount" text-tag="span" class="text">
+		<template #n><b>{{ onlineUsersCount }}</b></template>
+	</I18n>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
+
+const name = 'onlineUsers';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const onlineUsersCount = ref(0);
+
+const tick = () => {
+	os.api('get-online-users-count').then(res => {
+		onlineUsersCount.value = res.count;
+	});
+};
+
+useInterval(tick, 1000 * 15, {
+	immediate: true,
+	afterMounted: true,
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.mkw-onlineUsers {
+	text-align: center;
+
+	&.pad {
+		padding: 16px 0;
+	}
+
+	> .text {
+		::v-deep(b) {
+			color: #41b781;
+		}
+
+		::v-deep(span) {
+			opacity: 0.7;
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/photos.vue b/packages/frontend/src/widgets/photos.vue
new file mode 100644
index 0000000000..4ad5324053
--- /dev/null
+++ b/packages/frontend/src/widgets/photos.vue
@@ -0,0 +1,123 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" :class="$style.root" :data-transparent="widgetProps.transparent ? true : null" class="mkw-photos">
+	<template #header><i class="ti ti-camera"></i>{{ i18n.ts._widgets.photos }}</template>
+
+	<div class="">
+		<MkLoading v-if="fetching"/>
+		<div v-else :class="$style.stream">
+			<div
+				v-for="(image, i) in images" :key="i"
+				:class="$style.img"
+				:style="`background-image: url(${thumbnail(image)})`"
+			></div>
+		</div>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import { stream } from '@/stream';
+import { getStaticImageUrl } from '@/scripts/get-static-image-url';
+import * as os from '@/os';
+import MkContainer from '@/components/MkContainer.vue';
+import { defaultStore } from '@/store';
+import { i18n } from '@/i18n';
+
+const name = 'photos';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const connection = stream.useChannel('main');
+const images = ref([]);
+const fetching = ref(true);
+
+const onDriveFileCreated = (file) => {
+	if (/^image\/.+$/.test(file.type)) {
+		images.value.unshift(file);
+		if (images.value.length > 9) images.value.pop();
+	}
+};
+
+const thumbnail = (image: any): string => {
+	return defaultStore.state.disableShowingAnimatedImages
+		? getStaticImageUrl(image.thumbnailUrl)
+		: image.thumbnailUrl;
+};
+
+os.api('drive/stream', {
+	type: 'image/*',
+	limit: 9,
+}).then(res => {
+	images.value = res;
+	fetching.value = false;
+});
+
+connection.on('driveFileCreated', onDriveFileCreated);
+onUnmounted(() => {
+	connection.dispose();
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" module>
+.root[data-transparent] {
+	.stream {
+		padding: 0;
+	}
+
+	.img {
+		border: solid 4px transparent;
+		border-radius: 8px;
+	}
+}
+
+.stream {
+	display: flex;
+	justify-content: center;
+	flex-wrap: wrap;
+	padding: 8px;
+
+	.img {
+		flex: 1 1 33%;
+		width: 33%;
+		height: 80px;
+		box-sizing: border-box;
+		background-position: center center;
+		background-size: cover;
+		background-clip: content-box;
+		border: solid 2px transparent;
+		border-radius: 4px;
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/post-form.vue b/packages/frontend/src/widgets/post-form.vue
new file mode 100644
index 0000000000..f1708775ba
--- /dev/null
+++ b/packages/frontend/src/widgets/post-form.vue
@@ -0,0 +1,35 @@
+<template>
+<XPostForm class="_panel mkw-postForm" :fixed="true" :autofocus="false"/>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import { GetFormResultType } from '@/scripts/form';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import XPostForm from '@/components/MkPostForm.vue';
+
+const name = 'postForm';
+
+const widgetPropsDef = {
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
diff --git a/packages/frontend/src/widgets/rss-ticker.vue b/packages/frontend/src/widgets/rss-ticker.vue
new file mode 100644
index 0000000000..44c21d1836
--- /dev/null
+++ b/packages/frontend/src/widgets/rss-ticker.vue
@@ -0,0 +1,152 @@
+<template>
+<MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-rss-ticker">
+	<template #header><i class="ti ti-rss"></i>RSS</template>
+	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
+
+	<div class="ekmkgxbk">
+		<MkLoading v-if="fetching"/>
+		<div v-else class="feed">
+			<transition name="change" mode="default">
+				<MarqueeText :key="key" :duration="widgetProps.duration" :reverse="widgetProps.reverse">
+					<span v-for="item in items" class="item">
+						<a class="link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span class="divider"></span>
+					</span>
+				</MarqueeText>
+			</transition>
+		</div>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import MarqueeText from '@/components/MkMarquee.vue';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import MkContainer from '@/components/MkContainer.vue';
+import { useInterval } from '@/scripts/use-interval';
+import { shuffle } from '@/scripts/shuffle';
+
+const name = 'rssTicker';
+
+const widgetPropsDef = {
+	url: {
+		type: 'string' as const,
+		default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
+	},
+	shuffle: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	refreshIntervalSec: {
+		type: 'number' as const,
+		default: 60,
+	},
+	duration: {
+		type: 'range' as const,
+		default: 70,
+		step: 1,
+		min: 5,
+		max: 200,
+	},
+	reverse: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	showHeader: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const items = ref([]);
+const fetching = ref(true);
+let key = $ref(0);
+
+const tick = () => {
+	window.fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then(res => {
+		res.json().then(feed => {
+			if (widgetProps.shuffle) {
+				shuffle(feed.items);
+			}
+			items.value = feed.items;
+			fetching.value = false;
+			key++;
+		});
+	});
+};
+
+watch(() => widgetProps.url, tick);
+
+useInterval(tick, Math.max(10000, widgetProps.refreshIntervalSec * 1000), {
+	immediate: true,
+	afterMounted: true,
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.change-enter-active, .change-leave-active {
+	position: absolute;
+	top: 0;
+  transition: all 1s ease;
+}
+.change-enter-from {
+  opacity: 0;
+	transform: translateY(-100%);
+}
+.change-leave-to {
+  opacity: 0;
+	transform: translateY(100%);
+}
+
+.ekmkgxbk {
+	> .feed {
+		--height: 42px;
+		padding: 0;
+		font-size: 0.9em;
+		line-height: var(--height);
+		height: var(--height);
+		contain: strict;
+
+		::v-deep(.item) {
+			display: inline-flex;
+			align-items: center;
+			vertical-align: bottom;
+			color: var(--fg);
+
+			> .divider {
+				display: inline-block;
+				width: 0.5px;
+				height: 16px;
+				margin: 0 1em;
+				background: var(--divider);
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/rss.vue b/packages/frontend/src/widgets/rss.vue
new file mode 100644
index 0000000000..c0338c8e47
--- /dev/null
+++ b/packages/frontend/src/widgets/rss.vue
@@ -0,0 +1,96 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" class="mkw-rss">
+	<template #header><i class="ti ti-rss"></i>RSS</template>
+	<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
+
+	<div class="ekmkgxbj">
+		<MkLoading v-if="fetching"/>
+		<div v-else class="feed">
+			<a v-for="item in items" class="item" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a>
+		</div>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import MkContainer from '@/components/MkContainer.vue';
+import { useInterval } from '@/scripts/use-interval';
+
+const name = 'rss';
+
+const widgetPropsDef = {
+	url: {
+		type: 'string' as const,
+		default: 'http://feeds.afpbb.com/rss/afpbb/afpbbnews',
+	},
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const items = ref([]);
+const fetching = ref(true);
+
+const tick = () => {
+	window.fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then(res => {
+		res.json().then(feed => {
+			items.value = feed.items;
+			fetching.value = false;
+		});
+	});
+};
+
+watch(() => widgetProps.url, tick);
+
+useInterval(tick, 60000, {
+	immediate: true,
+	afterMounted: true,
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.ekmkgxbj {
+	> .feed {
+		padding: 0;
+		font-size: 0.9em;
+
+		> .item {
+			display: block;
+			padding: 8px 16px;
+			color: var(--fg);
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+
+			&:nth-child(even) {
+				background: rgba(#000, 0.05);
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/server-metric/cpu-mem.vue b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
new file mode 100644
index 0000000000..80a8e427e1
--- /dev/null
+++ b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
@@ -0,0 +1,167 @@
+<template>
+<div class="lcfyofjk">
+	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
+		<defs>
+			<linearGradient :id="cpuGradientId" x1="0" x2="0" y1="1" y2="0">
+				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
+				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
+			</linearGradient>
+			<mask :id="cpuMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
+				<polygon
+					:points="cpuPolygonPoints"
+					fill="#fff"
+					fill-opacity="0.5"
+				/>
+				<polyline
+					:points="cpuPolylinePoints"
+					fill="none"
+					stroke="#fff"
+					stroke-width="1"
+				/>
+				<circle
+					:cx="cpuHeadX"
+					:cy="cpuHeadY"
+					r="1.5"
+					fill="#fff"
+				/>
+			</mask>
+		</defs>
+		<rect
+			x="-2" y="-2"
+			:width="viewBoxX + 4" :height="viewBoxY + 4"
+			:style="`stroke: none; fill: url(#${ cpuGradientId }); mask: url(#${ cpuMaskId })`"
+		/>
+		<text x="1" y="5">CPU <tspan>{{ cpuP }}%</tspan></text>
+	</svg>
+	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
+		<defs>
+			<linearGradient :id="memGradientId" x1="0" x2="0" y1="1" y2="0">
+				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
+				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
+			</linearGradient>
+			<mask :id="memMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
+				<polygon
+					:points="memPolygonPoints"
+					fill="#fff"
+					fill-opacity="0.5"
+				/>
+				<polyline
+					:points="memPolylinePoints"
+					fill="none"
+					stroke="#fff"
+					stroke-width="1"
+				/>
+				<circle
+					:cx="memHeadX"
+					:cy="memHeadY"
+					r="1.5"
+					fill="#fff"
+				/>
+			</mask>
+		</defs>
+		<rect
+			x="-2" y="-2"
+			:width="viewBoxX + 4" :height="viewBoxY + 4"
+			:style="`stroke: none; fill: url(#${ memGradientId }); mask: url(#${ memMaskId })`"
+		/>
+		<text x="1" y="5">MEM <tspan>{{ memP }}%</tspan></text>
+	</svg>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onBeforeUnmount } from 'vue';
+import { v4 as uuid } from 'uuid';
+
+const props = defineProps<{
+	connection: any,
+	meta: any
+}>();
+
+let viewBoxX: number = $ref(50);
+let viewBoxY: number = $ref(30);
+let stats: any[] = $ref([]);
+const cpuGradientId = uuid();
+const cpuMaskId = uuid();
+const memGradientId = uuid();
+const memMaskId = uuid();
+let cpuPolylinePoints: string = $ref('');
+let memPolylinePoints: string = $ref('');
+let cpuPolygonPoints: string = $ref('');
+let memPolygonPoints: string = $ref('');
+let cpuHeadX: any = $ref(null);
+let cpuHeadY: any = $ref(null);
+let memHeadX: any = $ref(null);
+let memHeadY: any = $ref(null);
+let cpuP: string = $ref('');
+let memP: string = $ref('');
+
+onMounted(() => {
+	props.connection.on('stats', onStats);
+	props.connection.on('statsLog', onStatsLog);
+	props.connection.send('requestLog', {
+		id: Math.random().toString().substr(2, 8),
+	});
+});
+
+onBeforeUnmount(() => {
+	props.connection.off('stats', onStats);
+	props.connection.off('statsLog', onStatsLog);
+});
+
+function onStats(connStats) {
+	stats.push(connStats);
+	if (stats.length > 50) stats.shift();
+
+	let cpuPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - s.cpu) * viewBoxY]);
+	let memPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - (s.mem.active / props.meta.mem.total)) * viewBoxY]);
+	cpuPolylinePoints = cpuPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+	memPolylinePoints = memPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+
+	cpuPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${cpuPolylinePoints} ${viewBoxX},${viewBoxY}`;
+	memPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${memPolylinePoints} ${viewBoxX},${viewBoxY}`;
+
+	cpuHeadX = cpuPolylinePointsStats[cpuPolylinePointsStats.length - 1][0];
+	cpuHeadY = cpuPolylinePointsStats[cpuPolylinePointsStats.length - 1][1];
+	memHeadX = memPolylinePointsStats[memPolylinePointsStats.length - 1][0];
+	memHeadY = memPolylinePointsStats[memPolylinePointsStats.length - 1][1];
+
+	cpuP = (connStats.cpu * 100).toFixed(0);
+	memP = (connStats.mem.active / props.meta.mem.total * 100).toFixed(0);
+}
+
+function onStatsLog(statsLog) {
+	for (const revStats of [...statsLog].reverse()) {
+		onStats(revStats);
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.lcfyofjk {
+	display: flex;
+
+	> svg {
+		display: block;
+		padding: 10px;
+		width: 50%;
+
+		&:first-child {
+			padding-right: 5px;
+		}
+
+		&:last-child {
+			padding-left: 5px;
+		}
+
+		> text {
+			font-size: 4.5px;
+			fill: currentColor;
+
+			> tspan {
+				opacity: 0.5;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/server-metric/cpu.vue b/packages/frontend/src/widgets/server-metric/cpu.vue
new file mode 100644
index 0000000000..e7b2226d1f
--- /dev/null
+++ b/packages/frontend/src/widgets/server-metric/cpu.vue
@@ -0,0 +1,65 @@
+<template>
+<div class="vrvdvrys">
+	<XPie class="pie" :value="usage"/>
+	<div>
+		<p><i class="ti ti-cpu"></i>CPU</p>
+		<p>{{ meta.cpu.cores }} Logical cores</p>
+		<p>{{ meta.cpu.model }}</p>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onBeforeUnmount } from 'vue';
+import XPie from './pie.vue';
+
+const props = defineProps<{
+	connection: any,
+	meta: any
+}>();
+
+let usage: number = $ref(0);
+
+function onStats(stats) {
+	usage = stats.cpu;
+}
+
+onMounted(() => {
+	props.connection.on('stats', onStats);
+});
+
+onBeforeUnmount(() => {
+	props.connection.off('stats', onStats);
+});
+</script>
+
+<style lang="scss" scoped>
+.vrvdvrys {
+	display: flex;
+	padding: 16px;
+
+	> .pie {
+		height: 82px;
+		flex-shrink: 0;
+		margin-right: 16px;
+	}
+
+	> div {
+		flex: 1;
+
+		> p {
+			margin: 0;
+			font-size: 0.8em;
+
+			&:first-child {
+				font-weight: bold;
+				margin-bottom: 4px;
+
+				> i {
+					margin-right: 4px;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/server-metric/disk.vue b/packages/frontend/src/widgets/server-metric/disk.vue
new file mode 100644
index 0000000000..3d22d05383
--- /dev/null
+++ b/packages/frontend/src/widgets/server-metric/disk.vue
@@ -0,0 +1,57 @@
+<template>
+<div class="zbwaqsat">
+	<XPie class="pie" :value="usage"/>
+	<div>
+		<p><i class="ti ti-database"></i>Disk</p>
+		<p>Total: {{ bytes(total, 1) }}</p>
+		<p>Free: {{ bytes(available, 1) }}</p>
+		<p>Used: {{ bytes(used, 1) }}</p>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+import XPie from './pie.vue';
+import bytes from '@/filters/bytes';
+
+const props = defineProps<{
+	meta: any; // TODO
+}>();
+
+const usage = $computed(() => props.meta.fs.used / props.meta.fs.total);
+const total = $computed(() => props.meta.fs.total);
+const used = $computed(() => props.meta.fs.used);
+const available = $computed(() => props.meta.fs.total - props.meta.fs.used);
+</script>
+
+<style lang="scss" scoped>
+.zbwaqsat {
+	display: flex;
+	padding: 16px;
+
+	> .pie {
+		height: 82px;
+		flex-shrink: 0;
+		margin-right: 16px;
+	}
+
+	> div {
+		flex: 1;
+
+		> p {
+			margin: 0;
+			font-size: 0.8em;
+
+			&:first-child {
+				font-weight: bold;
+				margin-bottom: 4px;
+
+				> i {
+					margin-right: 4px;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/server-metric/index.vue b/packages/frontend/src/widgets/server-metric/index.vue
new file mode 100644
index 0000000000..bc3fca6fc1
--- /dev/null
+++ b/packages/frontend/src/widgets/server-metric/index.vue
@@ -0,0 +1,87 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent">
+	<template #header><i class="ti ti-server"></i>{{ i18n.ts._widgets.serverMetric }}</template>
+	<template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
+
+	<div v-if="meta" class="mkw-serverMetric">
+		<XCpuMemory v-if="widgetProps.view === 0" :connection="connection" :meta="meta"/>
+		<XNet v-else-if="widgetProps.view === 1" :connection="connection" :meta="meta"/>
+		<XCpu v-else-if="widgetProps.view === 2" :connection="connection" :meta="meta"/>
+		<XMemory v-else-if="widgetProps.view === 3" :connection="connection" :meta="meta"/>
+		<XDisk v-else-if="widgetProps.view === 4" :connection="connection" :meta="meta"/>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from '../widget';
+import XCpuMemory from './cpu-mem.vue';
+import XNet from './net.vue';
+import XCpu from './cpu.vue';
+import XMemory from './mem.vue';
+import XDisk from './disk.vue';
+import MkContainer from '@/components/MkContainer.vue';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import { stream } from '@/stream';
+import { i18n } from '@/i18n';
+
+const name = 'serverMetric';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	view: {
+		type: 'number' as const,
+		default: 0,
+		hidden: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure, save } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const meta = ref(null);
+
+os.api('server-info', {}).then(res => {
+	meta.value = res;
+});
+
+const toggleView = () => {
+	if (widgetProps.view === 4) {
+		widgetProps.view = 0;
+	} else {
+		widgetProps.view++;
+	}
+	save();
+};
+
+const connection = stream.useChannel('serverStats');
+onUnmounted(() => {
+	connection.dispose();
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
diff --git a/packages/frontend/src/widgets/server-metric/mem.vue b/packages/frontend/src/widgets/server-metric/mem.vue
new file mode 100644
index 0000000000..6018eb4265
--- /dev/null
+++ b/packages/frontend/src/widgets/server-metric/mem.vue
@@ -0,0 +1,73 @@
+<template>
+<div class="zlxnikvl">
+	<XPie class="pie" :value="usage"/>
+	<div>
+		<p><i class="fas fa-memory"></i>RAM</p>
+		<p>Total: {{ bytes(total, 1) }}</p>
+		<p>Used: {{ bytes(used, 1) }}</p>
+		<p>Free: {{ bytes(free, 1) }}</p>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onBeforeUnmount } from 'vue';
+import XPie from './pie.vue';
+import bytes from '@/filters/bytes';
+
+const props = defineProps<{
+	connection: any,
+	meta: any
+}>();
+
+let usage: number = $ref(0);
+let total: number = $ref(0);
+let used: number = $ref(0);
+let free: number = $ref(0);
+
+function onStats(stats) {
+	usage = stats.mem.active / props.meta.mem.total;
+	total = props.meta.mem.total;
+	used = stats.mem.active;
+	free = total - used;
+}
+
+onMounted(() => {
+	props.connection.on('stats', onStats);
+});
+
+onBeforeUnmount(() => {
+	props.connection.off('stats', onStats);
+});
+</script>
+
+<style lang="scss" scoped>
+.zlxnikvl {
+	display: flex;
+	padding: 16px;
+
+	> .pie {
+		height: 82px;
+		flex-shrink: 0;
+		margin-right: 16px;
+	}
+
+	> div {
+		flex: 1;
+
+		> p {
+			margin: 0;
+			font-size: 0.8em;
+
+			&:first-child {
+				font-weight: bold;
+				margin-bottom: 4px;
+
+				> i {
+					margin-right: 4px;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/server-metric/net.vue b/packages/frontend/src/widgets/server-metric/net.vue
new file mode 100644
index 0000000000..ab8b0fe471
--- /dev/null
+++ b/packages/frontend/src/widgets/server-metric/net.vue
@@ -0,0 +1,140 @@
+<template>
+<div class="oxxrhrto">
+	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
+		<polygon
+			:points="inPolygonPoints"
+			fill="#94a029"
+			fill-opacity="0.5"
+		/>
+		<polyline
+			:points="inPolylinePoints"
+			fill="none"
+			stroke="#94a029"
+			stroke-width="1"
+		/>
+		<circle
+			:cx="inHeadX"
+			:cy="inHeadY"
+			r="1.5"
+			fill="#94a029"
+		/>
+		<text x="1" y="5">NET rx <tspan>{{ bytes(inRecent) }}</tspan></text>
+	</svg>
+	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
+		<polygon
+			:points="outPolygonPoints"
+			fill="#ff9156"
+			fill-opacity="0.5"
+		/>
+		<polyline
+			:points="outPolylinePoints"
+			fill="none"
+			stroke="#ff9156"
+			stroke-width="1"
+		/>
+		<circle
+			:cx="outHeadX"
+			:cy="outHeadY"
+			r="1.5"
+			fill="#ff9156"
+		/>
+		<text x="1" y="5">NET tx <tspan>{{ bytes(outRecent) }}</tspan></text>
+	</svg>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onBeforeUnmount } from 'vue';
+import bytes from '@/filters/bytes';
+
+const props = defineProps<{
+	connection: any,
+	meta: any
+}>();
+
+let viewBoxX: number = $ref(50);
+let viewBoxY: number = $ref(30);
+let stats: any[] = $ref([]);
+let inPolylinePoints: string = $ref('');
+let outPolylinePoints: string = $ref('');
+let inPolygonPoints: string = $ref('');
+let outPolygonPoints: string = $ref('');
+let inHeadX: any = $ref(null);
+let inHeadY: any = $ref(null);
+let outHeadX: any = $ref(null);
+let outHeadY: any = $ref(null);
+let inRecent: number = $ref(0);
+let outRecent: number = $ref(0);
+
+onMounted(() => {
+	props.connection.on('stats', onStats);
+	props.connection.on('statsLog', onStatsLog);
+	props.connection.send('requestLog', {
+		id: Math.random().toString().substr(2, 8),
+	});
+});
+
+onBeforeUnmount(() => {
+	props.connection.off('stats', onStats);
+	props.connection.off('statsLog', onStatsLog);
+});
+
+function onStats(connStats) {
+	stats.push(connStats);
+	if (stats.length > 50) stats.shift();
+
+	const inPeak = Math.max(1024 * 64, Math.max(...stats.map(s => s.net.rx)));
+	const outPeak = Math.max(1024 * 64, Math.max(...stats.map(s => s.net.tx)));
+
+	let inPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - (s.net.rx / inPeak)) * viewBoxY]);
+	let outPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - (s.net.tx / outPeak)) * viewBoxY]);
+	inPolylinePoints = inPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+	outPolylinePoints = outPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+
+	inPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${inPolylinePoints} ${viewBoxX},${viewBoxY}`;
+	outPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${outPolylinePoints} ${viewBoxX},${viewBoxY}`;
+
+	inHeadX = inPolylinePointsStats[inPolylinePointsStats.length - 1][0];
+	inHeadY = inPolylinePointsStats[inPolylinePointsStats.length - 1][1];
+	outHeadX = outPolylinePointsStats[outPolylinePointsStats.length - 1][0];
+	outHeadY = outPolylinePointsStats[outPolylinePointsStats.length - 1][1];
+
+	inRecent = connStats.net.rx;
+	outRecent = connStats.net.tx;
+}
+
+function onStatsLog(statsLog) {
+	for (const revStats of [...statsLog].reverse()) {
+		onStats(revStats);
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.oxxrhrto {
+	display: flex;
+
+	> svg {
+		display: block;
+		padding: 10px;
+		width: 50%;
+
+		&:first-child {
+			padding-right: 5px;
+		}
+
+		&:last-child {
+			padding-left: 5px;
+		}
+
+		> text {
+			font-size: 4.5px;
+			fill: currentColor;
+
+			> tspan {
+				opacity: 0.5;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/server-metric/pie.vue b/packages/frontend/src/widgets/server-metric/pie.vue
new file mode 100644
index 0000000000..868dbc0484
--- /dev/null
+++ b/packages/frontend/src/widgets/server-metric/pie.vue
@@ -0,0 +1,52 @@
+<template>
+<svg class="hsalcinq" viewBox="0 0 1 1" preserveAspectRatio="none">
+	<circle
+		:r="r"
+		cx="50%" cy="50%"
+		fill="none"
+		stroke-width="0.1"
+		stroke="rgba(0, 0, 0, 0.05)"
+	/>
+	<circle
+		:r="r"
+		cx="50%" cy="50%"
+		:stroke-dasharray="Math.PI * (r * 2)"
+		:stroke-dashoffset="strokeDashoffset"
+		fill="none"
+		stroke-width="0.1"
+		:stroke="color"
+	/>
+	<text x="50%" y="50%" dy="0.05" text-anchor="middle">{{ (value * 100).toFixed(0) }}%</text>
+</svg>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+
+const props = defineProps<{
+	value: number;
+}>();
+
+const r = 0.45;
+
+const color = $computed(() => `hsl(${180 - (props.value * 180)}, 80%, 70%)`);
+const strokeDashoffset = $computed(() => (1 - props.value) * (Math.PI * (r * 2)));
+</script>
+
+<style lang="scss" scoped>
+.hsalcinq {
+	display: block;
+	height: 100%;
+
+	> circle {
+		transform-origin: center;
+		transform: rotate(-90deg);
+		transition: stroke-dashoffset 0.5s ease;
+	}
+
+	> text {
+		font-size: 0.15px;
+		fill: currentColor;
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/slideshow.vue b/packages/frontend/src/widgets/slideshow.vue
new file mode 100644
index 0000000000..e317b8ab94
--- /dev/null
+++ b/packages/frontend/src/widgets/slideshow.vue
@@ -0,0 +1,159 @@
+<template>
+<div class="kvausudm _panel mkw-slideshow" :style="{ height: widgetProps.height + 'px' }">
+	<div @click="choose">
+		<p v-if="widgetProps.folderId == null">
+			{{ i18n.ts.folder }}
+		</p>
+		<p v-if="widgetProps.folderId != null && images.length === 0 && !fetching">{{ $t('no-image') }}</p>
+		<div ref="slideA" class="slide a"></div>
+		<div ref="slideB" class="slide b"></div>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
+
+const name = 'slideshow';
+
+const widgetPropsDef = {
+	height: {
+		type: 'number' as const,
+		default: 300,
+	},
+	folderId: {
+		type: 'string' as const,
+		default: null,
+		hidden: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure, save } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const images = ref([]);
+const fetching = ref(true);
+const slideA = ref<HTMLElement>();
+const slideB = ref<HTMLElement>();
+
+const change = () => {
+	if (images.value.length === 0) return;
+
+	const index = Math.floor(Math.random() * images.value.length);
+	const img = `url(${ images.value[index].url })`;
+
+	slideB.value.style.backgroundImage = img;
+
+	slideB.value.classList.add('anime');
+	window.setTimeout(() => {
+		// 既にこのウィジェットがunmountされていたら要素がない
+		if (slideA.value == null) return;
+
+		slideA.value.style.backgroundImage = img;
+
+		slideB.value.classList.remove('anime');
+	}, 1000);
+};
+
+const fetch = () => {
+	fetching.value = true;
+
+	os.api('drive/files', {
+		folderId: widgetProps.folderId,
+		type: 'image/*',
+		limit: 100,
+	}).then(res => {
+		images.value = res;
+		fetching.value = false;
+		slideA.value.style.backgroundImage = '';
+		slideB.value.style.backgroundImage = '';
+		change();
+	});
+};
+
+const choose = () => {
+	os.selectDriveFolder(false).then(folder => {
+		if (folder == null) {
+			return;
+		}
+		widgetProps.folderId = folder.id;
+		save();
+		fetch();
+	});
+};
+
+useInterval(change, 10000, {
+	immediate: false,
+	afterMounted: true,
+});
+
+onMounted(() => {
+	if (widgetProps.folderId != null) {
+		fetch();
+	}
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.kvausudm {
+	position: relative;
+
+	> div {
+		width: 100%;
+		height: 100%;
+		cursor: pointer;
+
+		> p {
+			display: block;
+			margin: 1em;
+			text-align: center;
+			color: #888;
+		}
+
+		> * {
+			pointer-events: none;
+		}
+
+		> .slide {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background-size: cover;
+			background-position: center;
+
+			&.b {
+				opacity: 0;
+			}
+
+			&.anime {
+				transition: opacity 1s;
+				opacity: 1;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/timeline.vue b/packages/frontend/src/widgets/timeline.vue
new file mode 100644
index 0000000000..e48444d33f
--- /dev/null
+++ b/packages/frontend/src/widgets/timeline.vue
@@ -0,0 +1,129 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" :style="`height: ${widgetProps.height}px;`" :scrollable="true" class="mkw-timeline">
+	<template #header>
+		<button class="_button" @click="choose">
+			<i v-if="widgetProps.src === 'home'" class="ti ti-home"></i>
+			<i v-else-if="widgetProps.src === 'local'" class="ti ti-messages"></i>
+			<i v-else-if="widgetProps.src === 'social'" class="ti ti-share"></i>
+			<i v-else-if="widgetProps.src === 'global'" class="ti ti-world"></i>
+			<i v-else-if="widgetProps.src === 'list'" class="ti ti-list"></i>
+			<i v-else-if="widgetProps.src === 'antenna'" class="ti ti-antenna"></i>
+			<span style="margin-left: 8px;">{{ widgetProps.src === 'list' ? widgetProps.list.name : widgetProps.src === 'antenna' ? widgetProps.antenna.name : $t('_timelines.' + widgetProps.src) }}</span>
+			<i :class="menuOpened ? 'ti ti-chevron-up' : 'ti ti-chevron-down'" style="margin-left: 8px;"></i>
+		</button>
+	</template>
+
+	<div>
+		<XTimeline :key="widgetProps.src === 'list' ? `list:${widgetProps.list.id}` : widgetProps.src === 'antenna' ? `antenna:${widgetProps.antenna.id}` : widgetProps.src" :src="widgetProps.src" :list="widgetProps.list ? widgetProps.list.id : null" :antenna="widgetProps.antenna ? widgetProps.antenna.id : null"/>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
+import { GetFormResultType } from '@/scripts/form';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import * as os from '@/os';
+import MkContainer from '@/components/MkContainer.vue';
+import XTimeline from '@/components/MkTimeline.vue';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+
+const name = 'timeline';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	height: {
+		type: 'number' as const,
+		default: 300,
+	},
+	src: {
+		type: 'string' as const,
+		default: 'home',
+		hidden: true,
+	},
+	antenna: {
+		type: 'object' as const,
+		default: null,
+		hidden: true,
+	},
+	list: {
+		type: 'object' as const,
+		default: null,
+		hidden: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure, save } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const menuOpened = ref(false);
+
+const setSrc = (src) => {
+	widgetProps.src = src;
+	save();
+};
+
+const choose = async (ev) => {
+	menuOpened.value = true;
+	const [antennas, lists] = await Promise.all([
+		os.api('antennas/list'),
+		os.api('users/lists/list'),
+	]);
+	const antennaItems = antennas.map(antenna => ({
+		text: antenna.name,
+		icon: 'ti ti-antenna',
+		action: () => {
+			widgetProps.antenna = antenna;
+			setSrc('antenna');
+		},
+	}));
+	const listItems = lists.map(list => ({
+		text: list.name,
+		icon: 'ti ti-list',
+		action: () => {
+			widgetProps.list = list;
+			setSrc('list');
+		},
+	}));
+	os.popupMenu([{
+		text: i18n.ts._timelines.home,
+		icon: 'ti ti-home',
+		action: () => { setSrc('home'); },
+	}, {
+		text: i18n.ts._timelines.local,
+		icon: 'ti ti-messages',
+		action: () => { setSrc('local'); },
+	}, {
+		text: i18n.ts._timelines.social,
+		icon: 'ti ti-share',
+		action: () => { setSrc('social'); },
+	}, {
+		text: i18n.ts._timelines.global,
+		icon: 'ti ti-world',
+		action: () => { setSrc('global'); },
+	}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], ev.currentTarget ?? ev.target).then(() => {
+		menuOpened.value = false;
+	});
+};
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
diff --git a/packages/frontend/src/widgets/trends.vue b/packages/frontend/src/widgets/trends.vue
new file mode 100644
index 0000000000..02eec0431e
--- /dev/null
+++ b/packages/frontend/src/widgets/trends.vue
@@ -0,0 +1,120 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
+	<template #header><i class="ti ti-hash"></i>{{ i18n.ts._widgets.trends }}</template>
+
+	<div class="wbrkwala">
+		<MkLoading v-if="fetching"/>
+		<transition-group v-else tag="div" :name="$store.state.animation ? 'chart' : ''" class="tags">
+			<div v-for="stat in stats" :key="stat.tag">
+				<div class="tag">
+					<MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA>
+					<p>{{ $t('nUsersMentioned', { n: stat.usersCount }) }}</p>
+				</div>
+				<MkMiniChart class="chart" :src="stat.chart"/>
+			</div>
+		</transition-group>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import MkContainer from '@/components/MkContainer.vue';
+import MkMiniChart from '@/components/MkMiniChart.vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
+
+const name = 'hashtags';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+const stats = ref([]);
+const fetching = ref(true);
+
+const fetch = () => {
+	os.api('hashtags/trend').then(res => {
+		stats.value = res;
+		fetching.value = false;
+	});
+};
+
+useInterval(fetch, 1000 * 60, {
+	immediate: true,
+	afterMounted: true,
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.wbrkwala {
+	height: (62px + 1px) + (62px + 1px) + (62px + 1px) + (62px + 1px) + 62px;
+	overflow: hidden;
+
+	> .tags {
+		.chart-move {
+			transition: transform 1s ease;
+		}
+
+		> div {
+			display: flex;
+			align-items: center;
+			padding: 14px 16px;
+			border-bottom: solid 0.5px var(--divider);
+
+			> .tag {
+				flex: 1;
+				overflow: hidden;
+				font-size: 0.9em;
+				color: var(--fg);
+
+				> .a {
+					display: block;
+					width: 100%;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					line-height: 18px;
+				}
+
+				> p {
+					margin: 0;
+					font-size: 75%;
+					opacity: 0.7;
+					line-height: 16px;
+				}
+			}
+
+			> .chart {
+				height: 30px;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/unix-clock.vue b/packages/frontend/src/widgets/unix-clock.vue
new file mode 100644
index 0000000000..cf85ac782c
--- /dev/null
+++ b/packages/frontend/src/widgets/unix-clock.vue
@@ -0,0 +1,116 @@
+<template>
+<div class="mkw-unixClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
+	<div v-if="widgetProps.showLabel" class="label">UNIX Epoch</div>
+	<div class="time">
+		<span v-text="ss"></span>
+		<span v-if="widgetProps.showMs" class="colon" :class="{ showColon }">:</span>
+		<span v-if="widgetProps.showMs" v-text="ms"></span>
+	</div>
+	<div v-if="widgetProps.showLabel" class="label">UTC</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onUnmounted, ref, watch } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+
+const name = 'unixClock';
+
+const widgetPropsDef = {
+	transparent: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	fontSize: {
+		type: 'number' as const,
+		default: 1.5,
+		step: 0.1,
+	},
+	showMs: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	showLabel: {
+		type: 'boolean' as const,
+		default: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+let intervalId;
+const ss = ref('');
+const ms = ref('');
+const showColon = ref(false);
+let prevSec: string | null = null;
+
+watch(showColon, (v) => {
+	if (v) {
+		window.setTimeout(() => {
+			showColon.value = false;
+		}, 30);
+	}
+});
+
+const tick = () => {
+	const now = new Date();
+	ss.value = Math.floor(now.getTime() / 1000).toString();
+	ms.value = Math.floor(now.getTime() % 1000 / 10).toString().padStart(2, '0');
+	if (ss.value !== prevSec) showColon.value = true;
+	prevSec = ss.value;
+};
+
+tick();
+
+watch(() => widgetProps.showMs, () => {
+	if (intervalId) window.clearInterval(intervalId);
+	intervalId = window.setInterval(tick, widgetProps.showMs ? 10 : 1000);
+}, { immediate: true });
+
+onUnmounted(() => {
+	window.clearInterval(intervalId);
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" scoped>
+.mkw-unixClock {
+	padding: 16px 0;
+	text-align: center;
+
+	> .label {
+		font-size: 65%;
+		opacity: 0.7;
+	}
+
+	> .time {
+		> .colon {
+			opacity: 0;
+			transition: opacity 1s ease;
+
+			&.showColon {
+				opacity: 1;
+				transition: opacity 0s;
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/user-list.vue b/packages/frontend/src/widgets/user-list.vue
new file mode 100644
index 0000000000..9ffbf0d8e3
--- /dev/null
+++ b/packages/frontend/src/widgets/user-list.vue
@@ -0,0 +1,136 @@
+<template>
+<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList">
+	<template #header><i class="ti ti-users"></i>{{ list ? list.name : i18n.ts._widgets.userList }}</template>
+	<template #func><button class="_button" @click="configure()"><i class="ti ti-settings"></i></button></template>
+
+	<div :class="$style.root">
+		<div v-if="widgetProps.listId == null" class="init">
+			<MkButton primary @click="chooseList">{{ i18n.ts._widgets._userList.chooseList }}</MkButton>
+		</div>
+		<MkLoading v-else-if="fetching"/>
+		<div v-else class="users">
+			<MkA v-for="user in users" :key="user.id" class="user">
+				<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
+			</MkA>
+		</div>
+	</div>
+</MkContainer>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
+import MkContainer from '@/components/MkContainer.vue';
+import * as os from '@/os';
+import { useInterval } from '@/scripts/use-interval';
+import { i18n } from '@/i18n';
+import MkButton from '@/components/MkButton.vue';
+
+const name = 'userList';
+
+const widgetPropsDef = {
+	showHeader: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	listId: {
+		type: 'string' as const,
+		default: null,
+		hidden: true,
+	},
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
+//const props = defineProps<WidgetComponentProps<WidgetProps>>();
+//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
+const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
+
+const { widgetProps, configure, save } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+let list = $ref();
+let users = $ref([]);
+let fetching = $ref(true);
+
+async function chooseList() {
+	const lists = await os.api('users/lists/list');
+	const { canceled, result: list } = await os.select({
+		title: i18n.ts.selectList,
+		items: lists.map(x => ({
+			value: x, text: x.name,
+		})),
+		default: widgetProps.listId,
+	});
+	if (canceled) return;
+
+	widgetProps.listId = list.id;
+	save();
+	fetch();
+}
+
+const fetch = () => {
+	if (widgetProps.listId == null) {
+		fetching = false;
+		return;
+	}
+
+	os.api('users/lists/show', {
+		listId: widgetProps.listId,
+	}).then(_list => {
+		list = _list;
+		os.api('users/show', {
+			userIds: list.userIds,
+		}).then(_users => {
+			users = _users;
+			fetching = false;
+		});
+	});
+};
+
+useInterval(fetch, 1000 * 60, {
+	immediate: true,
+	afterMounted: true,
+});
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	&:global {
+		> .init {
+			padding: 16px;
+		}
+
+		> .users {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(30px, 40px));
+			grid-gap: 12px;
+			place-content: center;
+			padding: 16px;
+
+			> .user {
+				width: 100%;
+				height: 100%;
+				aspect-ratio: 1;
+
+				> .avatar {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/widgets/widget.ts b/packages/frontend/src/widgets/widget.ts
new file mode 100644
index 0000000000..8bd56a5966
--- /dev/null
+++ b/packages/frontend/src/widgets/widget.ts
@@ -0,0 +1,73 @@
+import { reactive, watch } from 'vue';
+import { throttle } from 'throttle-debounce';
+import { Form, GetFormResultType } from '@/scripts/form';
+import * as os from '@/os';
+import { deepClone } from '@/scripts/clone';
+
+export type Widget<P extends Record<string, unknown>> = {
+	id: string;
+	data: Partial<P>;
+};
+
+export type WidgetComponentProps<P extends Record<string, unknown>> = {
+	widget?: Widget<P>;
+};
+
+export type WidgetComponentEmits<P extends Record<string, unknown>> = {
+	(ev: 'updateProps', props: P);
+};
+
+export type WidgetComponentExpose = {
+	name: string;
+	id: string | null;
+	configure: () => void;
+};
+
+export const useWidgetPropsManager = <F extends Form & Record<string, { default: any; }>>(
+	name: string,
+	propsDef: F,
+	props: Readonly<WidgetComponentProps<GetFormResultType<F>>>,
+	emit: WidgetComponentEmits<GetFormResultType<F>>,
+): {
+	widgetProps: GetFormResultType<F>;
+	save: () => void;
+	configure: () => void;
+} => {
+	const widgetProps = reactive(props.widget ? deepClone(props.widget.data) : {});
+
+	const mergeProps = () => {
+		for (const prop of Object.keys(propsDef)) {
+			if (typeof widgetProps[prop] === 'undefined') {
+				widgetProps[prop] = propsDef[prop].default;
+			}
+		}
+	};
+	watch(widgetProps, () => {
+		mergeProps();
+	}, { deep: true, immediate: true });
+
+	const save = throttle(3000, () => {
+		emit('updateProps', widgetProps);
+	});
+
+	const configure = async () => {
+		const form = deepClone(propsDef);
+		for (const item of Object.keys(form)) {
+			form[item].default = widgetProps[item];
+		}
+		const { canceled, result } = await os.form(name, form);
+		if (canceled) return;
+
+		for (const key of Object.keys(result)) {
+			widgetProps[key] = result[key];
+		}
+
+		save();
+	};
+
+	return {
+		widgetProps,
+		save,
+		configure,
+	};
+};
diff --git a/packages/frontend/tsconfig.json b/packages/frontend/tsconfig.json
new file mode 100644
index 0000000000..86109f600a
--- /dev/null
+++ b/packages/frontend/tsconfig.json
@@ -0,0 +1,47 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"noEmitOnError": false,
+		"noImplicitAny": false,
+		"noImplicitReturns": true,
+		"noUnusedParameters": false,
+		"noUnusedLocals": true,
+		"noFallthroughCasesInSwitch": true,
+		"declaration": false,
+		"sourceMap": false,
+		"target": "es2017",
+		"module": "esnext",
+		"moduleResolution": "node",
+		"removeComments": false,
+		"noLib": false,
+		"strict": true,
+		"strictNullChecks": true,
+		"experimentalDecorators": true,
+		"resolveJsonModule": true,
+		"allowSyntheticDefaultImports": true,
+		"isolatedModules": true,
+		"useDefineForClassFields": true,
+		"baseUrl": ".",
+		"paths": {
+			"@/*": ["./src/*"],
+		},
+		"typeRoots": [
+			"node_modules/@types",
+			"@types",
+		],
+		"types": [
+			"vite/client",
+		],
+		"lib": [
+			"esnext",
+			"dom"
+		],
+		"jsx": "preserve"
+	},
+	"compileOnSave": false,
+	"include": [
+		".eslintrc.js",
+		"./**/*.ts",
+		"./**/*.vue"
+	]
+}
diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts
new file mode 100644
index 0000000000..1acf5301b7
--- /dev/null
+++ b/packages/frontend/vite.config.ts
@@ -0,0 +1,70 @@
+import pluginVue from '@vitejs/plugin-vue';
+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'];
+
+export default defineConfig(({ command, mode }) => {
+
+	return {
+		base: '/vite/',
+
+		plugins: [
+			pluginVue({
+				reactivityTransform: true,
+			}),
+			pluginJson5(),
+		],
+
+		resolve: {
+			extensions,
+			alias: {
+				'@/': __dirname + '/src/',
+				'/client-assets/': __dirname + '/assets/',
+				'/static-assets/': __dirname + '/../backend/assets/',
+			},
+		},
+
+		define: {
+			_VERSION_: JSON.stringify(meta.version),
+			_LANGS_: JSON.stringify(Object.entries(locales).map(([k, v]) => [k, v._lang_])),
+			_ENV_: JSON.stringify(process.env.NODE_ENV),
+			_DEV_: process.env.NODE_ENV !== 'production',
+			_PERF_PREFIX_: JSON.stringify('Misskey:'),
+			_DATA_TRANSFER_DRIVE_FILE_: JSON.stringify('mk_drive_file'),
+			_DATA_TRANSFER_DRIVE_FOLDER_: JSON.stringify('mk_drive_folder'),
+			_DATA_TRANSFER_DECK_COLUMN_: JSON.stringify('mk_deck_column'),
+			__VUE_OPTIONS_API__: true,
+			__VUE_PROD_DEVTOOLS__: false,
+		},
+
+		build: {
+			target: [
+				'chrome100',
+				'firefox100',
+				'safari15',
+				'es2017', // TODO: そのうち消す
+			],
+			manifest: 'manifest.json',
+			rollupOptions: {
+				input: {
+					app: './src/init.ts',
+				},
+				output: {
+					manualChunks: {
+						vue: ['vue'],
+					},
+				},
+			},
+			cssCodeSplit: true,
+			outDir: __dirname + '/../../built/_vite_',
+			assetsDir: '.',
+			emptyOutDir: false,
+			sourcemap: process.env.NODE_ENV === 'development',
+			reportCompressedSize: false,
+		},
+	};
+});
diff --git a/packages/frontend/vite.json5.ts b/packages/frontend/vite.json5.ts
new file mode 100644
index 0000000000..0a37fbff44
--- /dev/null
+++ b/packages/frontend/vite.json5.ts
@@ -0,0 +1,38 @@
+// Original: https://github.com/rollup/plugins/tree/8835dd2aed92f408d7dc72d7cc25a9728e16face/packages/json
+
+import JSON5 from 'json5';
+import { Plugin } from 'rollup';
+import { createFilter, dataToEsm } from '@rollup/pluginutils';
+import { RollupJsonOptions } from '@rollup/plugin-json';
+
+export default function json5(options: RollupJsonOptions = {}): Plugin {
+	const filter = createFilter(options.include, options.exclude);
+	const indent = 'indent' in options ? options.indent : '\t';
+
+	return {
+		name: 'json5',
+
+		// eslint-disable-next-line no-shadow
+		transform(json, id) {
+			if (id.slice(-6) !== '.json5' || !filter(id)) return null;
+
+			try {
+				const parsed = JSON5.parse(json);
+				return {
+					code: dataToEsm(parsed, {
+						preferConst: options.preferConst,
+						compact: options.compact,
+						namedExports: options.namedExports,
+						indent,
+					}),
+					map: { mappings: '' },
+				};
+			} catch (err) {
+				const message = 'Could not parse JSON file';
+				const position = parseInt(/[\d]/.exec(err.message)[0], 10);
+				this.warn({ message, id, position });
+				return null;
+			}
+		},
+	};
+}
diff --git a/scripts/clean-all.js b/scripts/clean-all.js
index 49b9957657..c65a1c3a32 100644
--- a/scripts/clean-all.js
+++ b/scripts/clean-all.js
@@ -4,8 +4,8 @@ const fs = require('fs');
 	fs.rmSync(__dirname + '/../packages/backend/built', { recursive: true, force: true });
 	fs.rmSync(__dirname + '/../packages/backend/node_modules', { recursive: true, force: true });
 
-	fs.rmSync(__dirname + '/../packages/client/built', { recursive: true, force: true });
-	fs.rmSync(__dirname + '/../packages/client/node_modules', { recursive: true, force: true });
+	fs.rmSync(__dirname + '/../packages/frontend/built', { recursive: true, force: true });
+	fs.rmSync(__dirname + '/../packages/frontend/node_modules', { recursive: true, force: true });
 
 	fs.rmSync(__dirname + '/../packages/sw/built', { recursive: true, force: true });
 	fs.rmSync(__dirname + '/../packages/sw/node_modules', { recursive: true, force: true });
diff --git a/scripts/clean.js b/scripts/clean.js
index 70b9d882b5..d32586914b 100644
--- a/scripts/clean.js
+++ b/scripts/clean.js
@@ -2,7 +2,7 @@ const fs = require('fs');
 
 (async () => {
 	fs.rmSync(__dirname + '/../packages/backend/built', { recursive: true, force: true });
-	fs.rmSync(__dirname + '/../packages/client/built', { recursive: true, force: true });
+	fs.rmSync(__dirname + '/../packages/frontend/built', { recursive: true, force: true });
 	fs.rmSync(__dirname + '/../packages/sw/built', { recursive: true, force: true });
 	fs.rmSync(__dirname + '/../built', { recursive: true, force: true });
 })();
diff --git a/scripts/dev.js b/scripts/dev.js
index 24e8914ee9..eee27450c3 100644
--- a/scripts/dev.js
+++ b/scripts/dev.js
@@ -26,7 +26,7 @@ const fs = require('fs');
 		stderr: process.stderr,
 	});
 
-	execa('yarn', ['workspace', 'client', 'watch'], {
+	execa('yarn', ['workspace', 'frontend', 'watch'], {
 		cwd: __dirname + '/../',
 		stdout: process.stdout,
 		stderr: process.stderr,
diff --git a/yarn.lock b/yarn.lock
index 3fdc9145fe..e3606489d6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5139,94 +5139,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"client@workspace:packages/client":
-  version: 0.0.0-use.local
-  resolution: "client@workspace:packages/client"
-  dependencies:
-    "@discordapp/twemoji": 14.0.2
-    "@rollup/plugin-alias": 4.0.2
-    "@rollup/plugin-json": 6.0.0
-    "@rollup/pluginutils": 5.0.2
-    "@syuilo/aiscript": 0.11.1
-    "@tabler/icons": ^1.118.0
-    "@types/escape-regexp": 0.0.1
-    "@types/glob": 8.0.0
-    "@types/gulp": 4.0.10
-    "@types/gulp-rename": 2.0.1
-    "@types/katex": 0.14.0
-    "@types/matter-js": 0.18.2
-    "@types/punycode": 2.1.0
-    "@types/seedrandom": 3.0.3
-    "@types/throttle-debounce": 5.0.0
-    "@types/tinycolor2": 1.4.3
-    "@types/uuid": 9.0.0
-    "@types/websocket": 1.0.5
-    "@types/ws": 8.5.3
-    "@typescript-eslint/eslint-plugin": 5.47.0
-    "@typescript-eslint/parser": 5.47.0
-    "@vitejs/plugin-vue": 4.0.0
-    "@vue/compiler-sfc": 3.2.45
-    "@vue/runtime-core": 3.2.45
-    autobind-decorator: 2.4.0
-    autosize: 5.0.2
-    blurhash: 2.0.4
-    broadcast-channel: 4.18.1
-    browser-image-resizer: "git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey.3"
-    chart.js: 4.1.1
-    chartjs-adapter-date-fns: 3.0.0
-    chartjs-chart-matrix: ^1.3.0
-    chartjs-plugin-gradient: 0.6.1
-    chartjs-plugin-zoom: 2.0.0
-    compare-versions: 5.0.1
-    cropperjs: 2.0.0-beta
-    cross-env: 7.0.3
-    cypress: 12.2.0
-    date-fns: 2.29.3
-    escape-regexp: 0.0.1
-    eslint: 8.30.0
-    eslint-plugin-import: 2.26.0
-    eslint-plugin-vue: 9.8.0
-    eventemitter3: 5.0.0
-    idb-keyval: 6.2.0
-    insert-text-at-cursor: 0.3.0
-    is-file-animated: 1.0.2
-    json5: 2.2.2
-    katex: 0.15.6
-    matter-js: 0.18.0
-    mfm-js: 0.23.0
-    misskey-js: 0.0.14
-    photoswipe: 5.3.4
-    prismjs: 1.29.0
-    punycode: 2.1.1
-    querystring: 0.2.1
-    rndstr: 1.0.0
-    rollup: 3.8.0
-    s-age: 1.1.2
-    sass: 1.57.1
-    seedrandom: 3.0.5
-    start-server-and-test: 1.15.2
-    strict-event-emitter-types: 2.0.0
-    stringz: 2.1.0
-    syuilo-password-strength: 0.0.1
-    textarea-caret: 3.1.0
-    three: 0.148.0
-    throttle-debounce: 5.0.0
-    tinycolor2: 1.4.2
-    tsc-alias: 1.8.2
-    tsconfig-paths: 4.1.1
-    twemoji-parser: 14.0.0
-    typescript: 4.9.4
-    uuid: 9.0.0
-    vanilla-tilt: 1.8.0
-    vite: 4.0.3
-    vue: 3.2.45
-    vue-eslint-parser: ^9.1.0
-    vue-prism-editor: 2.0.0-alpha.2
-    vue-tsc: ^1.0.16
-    vuedraggable: next
-  languageName: unknown
-  linkType: soft
-
 "cliui@npm:^3.2.0":
   version: 3.2.0
   resolution: "cliui@npm:3.2.0"
@@ -8135,6 +8047,94 @@ __metadata:
   languageName: node
   linkType: hard
 
+"frontend@workspace:packages/frontend":
+  version: 0.0.0-use.local
+  resolution: "frontend@workspace:packages/frontend"
+  dependencies:
+    "@discordapp/twemoji": 14.0.2
+    "@rollup/plugin-alias": 4.0.2
+    "@rollup/plugin-json": 6.0.0
+    "@rollup/pluginutils": 5.0.2
+    "@syuilo/aiscript": 0.11.1
+    "@tabler/icons": ^1.118.0
+    "@types/escape-regexp": 0.0.1
+    "@types/glob": 8.0.0
+    "@types/gulp": 4.0.10
+    "@types/gulp-rename": 2.0.1
+    "@types/katex": 0.14.0
+    "@types/matter-js": 0.18.2
+    "@types/punycode": 2.1.0
+    "@types/seedrandom": 3.0.3
+    "@types/throttle-debounce": 5.0.0
+    "@types/tinycolor2": 1.4.3
+    "@types/uuid": 9.0.0
+    "@types/websocket": 1.0.5
+    "@types/ws": 8.5.3
+    "@typescript-eslint/eslint-plugin": 5.47.0
+    "@typescript-eslint/parser": 5.47.0
+    "@vitejs/plugin-vue": 4.0.0
+    "@vue/compiler-sfc": 3.2.45
+    "@vue/runtime-core": 3.2.45
+    autobind-decorator: 2.4.0
+    autosize: 5.0.2
+    blurhash: 2.0.4
+    broadcast-channel: 4.18.1
+    browser-image-resizer: "git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey.3"
+    chart.js: 4.1.1
+    chartjs-adapter-date-fns: 3.0.0
+    chartjs-chart-matrix: ^1.3.0
+    chartjs-plugin-gradient: 0.6.1
+    chartjs-plugin-zoom: 2.0.0
+    compare-versions: 5.0.1
+    cropperjs: 2.0.0-beta
+    cross-env: 7.0.3
+    cypress: 12.2.0
+    date-fns: 2.29.3
+    escape-regexp: 0.0.1
+    eslint: 8.30.0
+    eslint-plugin-import: 2.26.0
+    eslint-plugin-vue: 9.8.0
+    eventemitter3: 5.0.0
+    idb-keyval: 6.2.0
+    insert-text-at-cursor: 0.3.0
+    is-file-animated: 1.0.2
+    json5: 2.2.2
+    katex: 0.15.6
+    matter-js: 0.18.0
+    mfm-js: 0.23.0
+    misskey-js: 0.0.14
+    photoswipe: 5.3.4
+    prismjs: 1.29.0
+    punycode: 2.1.1
+    querystring: 0.2.1
+    rndstr: 1.0.0
+    rollup: 3.8.0
+    s-age: 1.1.2
+    sass: 1.57.1
+    seedrandom: 3.0.5
+    start-server-and-test: 1.15.2
+    strict-event-emitter-types: 2.0.0
+    stringz: 2.1.0
+    syuilo-password-strength: 0.0.1
+    textarea-caret: 3.1.0
+    three: 0.148.0
+    throttle-debounce: 5.0.0
+    tinycolor2: 1.4.2
+    tsc-alias: 1.8.2
+    tsconfig-paths: 4.1.1
+    twemoji-parser: 14.0.0
+    typescript: 4.9.4
+    uuid: 9.0.0
+    vanilla-tilt: 1.8.0
+    vite: 4.0.3
+    vue: 3.2.45
+    vue-eslint-parser: ^9.1.0
+    vue-prism-editor: 2.0.0-alpha.2
+    vue-tsc: ^1.0.16
+    vuedraggable: next
+  languageName: unknown
+  linkType: soft
+
 "fs-constants@npm:^1.0.0":
   version: 1.0.0
   resolution: "fs-constants@npm:1.0.0"
-- 
cgit v1.2.3-freya