From 616b18a9e520aa5beee0719c1b92b13bb60c91b4 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 30 Dec 2021 21:47:48 +0900
Subject: enhance(client): tweak ui

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

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
index 9ab99c6efe..c123159b61 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -5,7 +5,7 @@
 		<div class="_formBlock uawsfosz">
 			<div class="meter"><div :style="meterStyle"></div></div>
 		</div>
-		<div class="_inputSplit _formBlock">
+		<FormSplit>
 			<MkKeyValue class="_formBlock">
 				<template #key>{{ $ts.capacity }}</template>
 				<template #value>{{ bytes(capacity, 1) }}</template>
@@ -14,7 +14,7 @@
 				<template #key>{{ $ts.inUse }}</template>
 				<template #value>{{ bytes(usage, 1) }}</template>
 			</MkKeyValue>
-		</div>
+		</FormSplit>
 	</FormSection>
 
 	<FormSection>
@@ -38,6 +38,7 @@ import * as tinycolor from 'tinycolor2';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import MkKeyValue from '@/components/key-value.vue';
+import FormSplit from '@/components/form/split.vue';
 import * as os from '@/os';
 import bytes from '@/filters/bytes';
 import * as symbols from '@/symbols';
@@ -49,6 +50,7 @@ export default defineComponent({
 		FormLink,
 		FormSection,
 		MkKeyValue,
+		FormSplit,
 	},
 
 	emits: ['info'],
-- 
cgit v1.2.3-freya


From e6c8b83b20537311ceaa717b2fa817fc60388027 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 31 Dec 2021 03:21:26 +0900
Subject: enhance(client): tweak ui

---
 packages/client/src/pages/admin/files-settings.vue | 97 ----------------------
 packages/client/src/pages/admin/index.vue          |  6 --
 packages/client/src/pages/admin/security.vue       | 29 -------
 packages/client/src/pages/admin/settings.vue       | 56 +++++++++++++
 packages/client/src/pages/settings/menu.vue        |  2 -
 .../client/src/pages/settings/notifications.vue    |  2 -
 6 files changed, 56 insertions(+), 136 deletions(-)
 delete mode 100644 packages/client/src/pages/admin/files-settings.vue

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/src/pages/admin/files-settings.vue b/packages/client/src/pages/admin/files-settings.vue
deleted file mode 100644
index 2ac81843f0..0000000000
--- a/packages/client/src/pages/admin/files-settings.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-	<FormSuspense :p="init">
-		<div class="_formRoot">
-			<FormSwitch v-model="cacheRemoteFiles" class="_formBlock">
-				<template #label>{{ $ts.cacheRemoteFiles }}</template>
-				<template #caption>{{ $ts.cacheRemoteFilesDescription }}</template>
-			</FormSwitch>
-
-			<FormSwitch v-model="proxyRemoteFiles" class="_formBlock">
-				<template #label>{{ $ts.proxyRemoteFiles }}</template>
-				<template #caption>{{ $ts.proxyRemoteFilesDescription }}</template>
-			</FormSwitch>
-
-			<FormSplit :min-width="280">
-				<FormInput v-model="localDriveCapacityMb" type="number" class="_formBlock">
-					<template #label>{{ $ts.driveCapacityPerLocalAccount }}</template>
-					<template #suffix>MB</template>
-					<template #caption>{{ $ts.inMb }}</template>
-				</FormInput>
-
-				<FormInput v-model="remoteDriveCapacityMb" type="number" :disabled="!cacheRemoteFiles" class="_formBlock">
-					<template #label>{{ $ts.driveCapacityPerRemoteAccount }}</template>
-					<template #suffix>MB</template>
-					<template #caption>{{ $ts.inMb }}</template>
-				</FormInput>
-			</FormSplit>
-		</div>
-	</FormSuspense>
-</MkSpacer>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import FormSplit from '@/components/form/split.vue';
-import * as os from '@/os';
-import * as symbols from '@/symbols';
-import { fetchInstance } from '@/instance';
-
-export default defineComponent({
-	components: {
-		FormSwitch,
-		FormInput,
-		FormSplit,
-		FormSuspense,
-	},
-
-	emits: ['info'],
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.files,
-				icon: 'fas fa-cloud',
-				bg: 'var(--bg)',
-				actions: [{
-					asFullButton: true,
-					icon: 'fas fa-check',
-					text: this.$ts.save,
-					handler: this.save,
-				}],
-			},
-			cacheRemoteFiles: false,
-			proxyRemoteFiles: false,
-			localDriveCapacityMb: 0,
-			remoteDriveCapacityMb: 0,
-		}
-	},
-
-	async mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
-	methods: {
-		async init() {
-			const meta = await os.api('meta', { detail: true });
-			this.cacheRemoteFiles = meta.cacheRemoteFiles;
-			this.proxyRemoteFiles = meta.proxyRemoteFiles;
-			this.localDriveCapacityMb = meta.driveCapacityPerLocalUserMb;
-			this.remoteDriveCapacityMb = meta.driveCapacityPerRemoteUserMb;
-		},
-		save() {
-			os.apiWithDialog('admin/update-meta', {
-				cacheRemoteFiles: this.cacheRemoteFiles,
-				proxyRemoteFiles: this.proxyRemoteFiles,
-				localDriveCapacityMb: parseInt(this.localDriveCapacityMb, 10),
-				remoteDriveCapacityMb: parseInt(this.remoteDriveCapacityMb, 10),
-			}).then(() => {
-				fetchInstance();
-			});
-		}
-	}
-});
-</script>
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index e66a2f6c01..56b6b25a74 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -162,11 +162,6 @@ export default defineComponent({
 				text: i18n.locale.general,
 				to: '/admin/settings',
 				active: page.value === 'settings',
-			}, {
-				icon: 'fas fa-cloud',
-				text: i18n.locale.files,
-				to: '/admin/files-settings',
-				active: page.value === 'files-settings',
 			}, {
 				icon: 'fas fa-envelope',
 				text: i18n.locale.emailServer,
@@ -236,7 +231,6 @@ export default defineComponent({
 				case 'database': return defineAsyncComponent(() => import('./database.vue'));
 				case 'abuses': return defineAsyncComponent(() => import('./abuses.vue'));
 				case 'settings': return defineAsyncComponent(() => import('./settings.vue'));
-				case 'files-settings': return defineAsyncComponent(() => import('./files-settings.vue'));
 				case 'email-settings': return defineAsyncComponent(() => import('./email-settings.vue'));
 				case 'object-storage': return defineAsyncComponent(() => import('./object-storage.vue'));
 				case 'security': return defineAsyncComponent(() => import('./security.vue'));
diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue
index ae0eaf2572..91b10b68cc 100644
--- a/packages/client/src/pages/admin/security.vue
+++ b/packages/client/src/pages/admin/security.vue
@@ -2,16 +2,6 @@
 <MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 	<FormSuspense :p="init">
 		<div class="_formRoot">
-			<FormSection>
-				<FormSwitch v-model="enableRegistration" class="_formBlock">
-					<template #label>{{ $ts.enableRegistration }}</template>
-				</FormSwitch>
-
-				<FormSwitch v-model="emailRequiredForSignup" class="_formBlock">
-					<template #label>{{ $ts.emailRequiredForSignup }}</template>
-				</FormSwitch>
-			</FormSection>
-
 			<FormLink to="/admin/bot-protection" class="_formBlock">
 				<i class="fas fa-shield-alt"></i> {{ $ts.botProtection }}
 				<template v-if="enableHcaptcha" #suffix>hCaptcha</template>
@@ -51,17 +41,9 @@ export default defineComponent({
 				title: this.$ts.security,
 				icon: 'fas fa-lock',
 				bg: 'var(--bg)',
-				actions: [{
-					asFullButton: true,
-					icon: 'fas fa-check',
-					text: this.$ts.save,
-					handler: this.save,
-				}],
 			},
 			enableHcaptcha: false,
 			enableRecaptcha: false,
-			enableRegistration: false,
-			emailRequiredForSignup: false,
 		}
 	},
 
@@ -74,18 +56,7 @@ export default defineComponent({
 			const meta = await os.api('meta', { detail: true });
 			this.enableHcaptcha = meta.enableHcaptcha;
 			this.enableRecaptcha = meta.enableRecaptcha;
-			this.enableRegistration = !meta.disableRegistration;
-			this.emailRequiredForSignup = meta.emailRequiredForSignup;
 		},
-	
-		save() {
-			os.apiWithDialog('admin/update-meta', {
-				disableRegistration: !this.enableRegistration,
-				emailRequiredForSignup: this.emailRequiredForSignup,
-			}).then(() => {
-				fetchInstance();
-			});
-		}
 	}
 });
 </script>
diff --git a/packages/client/src/pages/admin/settings.vue b/packages/client/src/pages/admin/settings.vue
index 78c2616051..e20ce40c75 100644
--- a/packages/client/src/pages/admin/settings.vue
+++ b/packages/client/src/pages/admin/settings.vue
@@ -51,11 +51,49 @@
 				<template #label>{{ $ts.maxNoteTextLength }}</template>
 			</FormInput>
 
+			<FormSection>
+				<FormSwitch v-model="enableRegistration" class="_formBlock">
+					<template #label>{{ $ts.enableRegistration }}</template>
+				</FormSwitch>
+
+				<FormSwitch v-model="emailRequiredForSignup" class="_formBlock">
+					<template #label>{{ $ts.emailRequiredForSignup }}</template>
+				</FormSwitch>
+			</FormSection>
+
 			<FormSection>
 				<FormSwitch v-model="enableLocalTimeline" class="_formBlock">{{ $ts.enableLocalTimeline }}</FormSwitch>
 				<FormSwitch v-model="enableGlobalTimeline" class="_formBlock">{{ $ts.enableGlobalTimeline }}</FormSwitch>
 				<FormInfo class="_formBlock">{{ $ts.disablingTimelinesInfo }}</FormInfo>
 			</FormSection>
+
+			<FormSection>
+				<template #label>{{ $ts.files }}</template>
+
+				<FormSwitch v-model="cacheRemoteFiles" class="_formBlock">
+					<template #label>{{ $ts.cacheRemoteFiles }}</template>
+					<template #caption>{{ $ts.cacheRemoteFilesDescription }}</template>
+				</FormSwitch>
+
+				<FormSwitch v-model="proxyRemoteFiles" class="_formBlock">
+					<template #label>{{ $ts.proxyRemoteFiles }}</template>
+					<template #caption>{{ $ts.proxyRemoteFilesDescription }}</template>
+				</FormSwitch>
+
+				<FormSplit :min-width="280">
+					<FormInput v-model="localDriveCapacityMb" type="number" class="_formBlock">
+						<template #label>{{ $ts.driveCapacityPerLocalAccount }}</template>
+						<template #suffix>MB</template>
+						<template #caption>{{ $ts.inMb }}</template>
+					</FormInput>
+
+					<FormInput v-model="remoteDriveCapacityMb" type="number" :disabled="!cacheRemoteFiles" class="_formBlock">
+						<template #label>{{ $ts.driveCapacityPerRemoteAccount }}</template>
+						<template #suffix>MB</template>
+						<template #caption>{{ $ts.inMb }}</template>
+					</FormInput>
+				</FormSplit>
+			</FormSection>
 		</div>
 	</FormSuspense>
 </MkSpacer>
@@ -112,6 +150,12 @@ export default defineComponent({
 			enableLocalTimeline: false,
 			enableGlobalTimeline: false,
 			pinnedUsers: '',
+			cacheRemoteFiles: false,
+			proxyRemoteFiles: false,
+			localDriveCapacityMb: 0,
+			remoteDriveCapacityMb: 0,
+			enableRegistration: false,
+			emailRequiredForSignup: false,
 		}
 	},
 
@@ -134,6 +178,12 @@ export default defineComponent({
 			this.enableLocalTimeline = !meta.disableLocalTimeline;
 			this.enableGlobalTimeline = !meta.disableGlobalTimeline;
 			this.pinnedUsers = meta.pinnedUsers.join('\n');
+			this.cacheRemoteFiles = meta.cacheRemoteFiles;
+			this.proxyRemoteFiles = meta.proxyRemoteFiles;
+			this.localDriveCapacityMb = meta.driveCapacityPerLocalUserMb;
+			this.remoteDriveCapacityMb = meta.driveCapacityPerRemoteUserMb;
+			this.enableRegistration = !meta.disableRegistration;
+			this.emailRequiredForSignup = meta.emailRequiredForSignup;
 		},
 
 		save() {
@@ -150,6 +200,12 @@ export default defineComponent({
 				disableLocalTimeline: !this.enableLocalTimeline,
 				disableGlobalTimeline: !this.enableGlobalTimeline,
 				pinnedUsers: this.pinnedUsers.split('\n'),
+				cacheRemoteFiles: this.cacheRemoteFiles,
+				proxyRemoteFiles: this.proxyRemoteFiles,
+				localDriveCapacityMb: parseInt(this.localDriveCapacityMb, 10),
+				remoteDriveCapacityMb: parseInt(this.remoteDriveCapacityMb, 10),
+				disableRegistration: !this.enableRegistration,
+				emailRequiredForSignup: this.emailRequiredForSignup,
 			}).then(() => {
 				fetchInstance();
 			});
diff --git a/packages/client/src/pages/settings/menu.vue b/packages/client/src/pages/settings/menu.vue
index 19d26be89a..26404f3adf 100644
--- a/packages/client/src/pages/settings/menu.vue
+++ b/packages/client/src/pages/settings/menu.vue
@@ -21,7 +21,6 @@
 import { defineComponent } from 'vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormRadios from '@/components/form/radios.vue';
-import FormBase from '@/components/debobigego/base.vue';
 import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import { menuDef } from '@/menu';
@@ -31,7 +30,6 @@ import { unisonReload } from '@/scripts/unison-reload';
 
 export default defineComponent({
 	components: {
-		FormBase,
 		FormButton,
 		FormTextarea,
 		FormRadios,
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
index d3ada0d7ef..ab26d7d558 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -13,7 +13,6 @@
 import { defineComponent } from 'vue';
 import FormButton from '@/components/ui/button.vue';
 import FormLink from '@/components/form/link.vue';
-import FormBase from '@/components/debobigego/base.vue';
 import FormSection from '@/components/form/section.vue';
 import { notificationTypes } from 'misskey-js';
 import * as os from '@/os';
@@ -21,7 +20,6 @@ import * as symbols from '@/symbols';
 
 export default defineComponent({
 	components: {
-		FormBase,
 		FormLink,
 		FormButton,
 		FormSection,
-- 
cgit v1.2.3-freya


From 41ed9a1a7263fbdfac46c6c49f19f8d8d82f55de Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 2 Jan 2022 21:35:23 +0900
Subject: tweak client

---
 packages/client/package.json                       |  2 -
 packages/client/src/components/form/group.vue      |  3 +-
 packages/client/src/components/form/radio.vue      | 20 +++--
 packages/client/src/init.ts                        | 14 ----
 packages/client/src/os.ts                          | 14 ----
 packages/client/src/pages/admin/index.vue          |  6 --
 packages/client/src/pages/admin/overview.vue       |  2 -
 packages/client/src/pages/reset-password.vue       | 31 ++++---
 packages/client/src/pages/settings/2fa.vue         |  3 -
 packages/client/src/pages/settings/email.vue       |  4 -
 .../src/pages/settings/experimental-features.vue   | 52 ------------
 packages/client/src/pages/settings/index.vue       |  2 -
 packages/client/src/pages/settings/other.vue       |  3 -
 packages/client/src/pages/settings/security.vue    |  2 -
 .../client/src/pages/settings/theme.install.vue    | 31 +++----
 .../client/src/pages/settings/theme.manage.vue     |  6 --
 packages/client/src/pages/settings/update.vue      | 95 ----------------------
 packages/client/src/pages/settings/word-mute.vue   |  2 -
 packages/client/yarn.lock                          | 68 ----------------
 19 files changed, 37 insertions(+), 323 deletions(-)
 delete mode 100644 packages/client/src/pages/settings/experimental-features.vue
 delete mode 100644 packages/client/src/pages/settings/update.vue

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/package.json b/packages/client/package.json
index ff63579902..167ab2e816 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -11,8 +11,6 @@
 	},
 	"dependencies": {
 		"@discordapp/twemoji": "13.1.0",
-		"@sentry/browser": "5.29.2",
-		"@sentry/tracing": "5.29.2",
 		"@syuilo/aiscript": "0.11.1",
 		"@types/dateformat": "3.0.1",
 		"@types/escape-regexp": "0.0.0",
diff --git a/packages/client/src/components/form/group.vue b/packages/client/src/components/form/group.vue
index 2fc203f1b9..1e8376ca44 100644
--- a/packages/client/src/components/form/group.vue
+++ b/packages/client/src/components/form/group.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-sticky-container v-panel class="adfeebaf _formBlock">
+<div v-sticky-container class="adfeebaf _formBlock">
 	<div class="label"><slot name="label"></slot></div>
 	<div class="main _formRoot">
 		<slot></slot>
@@ -17,6 +17,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .adfeebaf {
 	padding: 24px 24px;
+	border: solid 1px var(--divider);
 	border-radius: var(--radius);
 
 	> .label {
diff --git a/packages/client/src/components/form/radio.vue b/packages/client/src/components/form/radio.vue
index f0b8c71376..2becbec6f3 100644
--- a/packages/client/src/components/form/radio.vue
+++ b/packages/client/src/components/form/radio.vue
@@ -1,6 +1,6 @@
 <template>
 <div
-	v-panel
+	v-adaptive-border
 	class="novjtctn"
 	:class="{ disabled, checked }"
 	:aria-checked="checked"
@@ -53,7 +53,10 @@ export default defineComponent({
 	display: inline-block;
 	text-align: left;
 	cursor: pointer;
-	padding: 11px 14px;
+	padding: 10px 12px;
+	background-color: var(--panel);
+	background-clip: padding-box !important;
+	border: solid 1px var(--panel);
 	border-radius: 6px;
 	transition: all 0.3s;
 
@@ -69,9 +72,13 @@ export default defineComponent({
 		}
 	}
 
+	&:hover {
+		border-color: var(--inputBorderHover) !important;
+	}
+
 	&.checked {
-		background: var(--accentedBg) !important;
-		border-color: var(--accent);
+		background-color: var(--accentedBg) !important;
+		border-color: var(--accentedBg) !important;
 		color: var(--accent);
 
 		&, * {
@@ -89,11 +96,6 @@ export default defineComponent({
 		}
 	}
 
-	&:hover {
-		border-color: var(--inputBorderHover);
-		color: var(--accent);
-	}
-
 	> input {
 		position: absolute;
 		width: 0;
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 131ea0cf8b..2263b4ca3c 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -13,8 +13,6 @@ if (localStorage.getItem('accounts') != null) {
 }
 //#endregion
 
-import * as Sentry from '@sentry/browser';
-import { Integrations } from '@sentry/tracing';
 import { computed, createApp, watch, markRaw, version as vueVersion } from 'vue';
 import * as compareVersions from 'compare-versions';
 
@@ -74,18 +72,6 @@ if (_DEV_) {
 	});
 }
 
-if (defaultStore.state.reportError && !_DEV_) {
-	Sentry.init({
-		dsn: 'https://fd273254a07a4b61857607a9ea05d629@o501808.ingest.sentry.io/5583438',
-		tracesSampleRate: 1.0,
-	});
-
-	Sentry.setTag('misskey_version', version);
-	Sentry.setTag('ui', ui);
-	Sentry.setTag('lang', lang);
-	Sentry.setTag('host', host);
-}
-
 // タッチデバイスでCSSの:hoverを機能させる
 document.addEventListener('touchend', () => {}, { passive: true });
 
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index 1ea205d5c8..d9400103f5 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -4,7 +4,6 @@ import { Component, defineAsyncComponent, markRaw, reactive, Ref, ref } from 'vu
 import { EventEmitter } from 'eventemitter3';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import * as Misskey from 'misskey-js';
-import * as Sentry from '@sentry/browser';
 import { apiUrl, debug, url } from '@/config';
 import MkPostFormDialog from '@/components/post-form-dialog.vue';
 import MkWaitingDialog from '@/components/waiting-dialog.vue';
@@ -70,19 +69,6 @@ export const api = ((endpoint: string, data: Record<string, any> = {}, token?: s
 					log!.res = markRaw(body.error);
 					log!.state = 'failed';
 				}
-
-				if (defaultStore.state.reportError && !_DEV_) {
-					Sentry.withScope((scope) => {
-						scope.setTag('api_endpoint', endpoint);
-						scope.setContext('api params', data);
-						scope.setContext('api error info', body.info);
-						scope.setTag('api_error_id', body.id);
-						scope.setTag('api_error_code', body.code);
-						scope.setTag('api_error_kind', body.kind);
-						scope.setLevel(Sentry.Severity.Error);
-						Sentry.captureMessage('API error');
-					});
-				}
 			}
 		}).catch(reject);
 	});
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 56b6b25a74..935b785b08 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -29,9 +29,6 @@
 import { computed, defineAsyncComponent, defineComponent, isRef, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import { i18n } from '@/i18n';
 import MkSuperMenu from '@/components/ui/super-menu.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormButton from '@/components/debobigego/button.vue';
 import MkInfo from '@/components/ui/info.vue';
 import { scroll } from '@/scripts/scroll';
 import { instance } from '@/instance';
@@ -41,10 +38,7 @@ import { lookupUser } from '@/scripts/lookup-user';
 
 export default defineComponent({
 	components: {
-		FormBase,
 		MkSuperMenu,
-		FormGroup,
-		FormButton,
 		MkInfo,
 	},
 
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index 59a4281599..3dcfce01e5 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -67,7 +67,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, markRaw, version as vueVersion } from 'vue';
-import FormKeyValueView from '@/components/debobigego/key-value-view.vue';
 import MkInstanceStats from '@/components/instance-stats.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkSelect from '@/components/form/select.vue';
@@ -87,7 +86,6 @@ import * as symbols from '@/symbols';
 export default defineComponent({
 	components: {
 		MkNumberDiff,
-		FormKeyValueView,
 		MkInstanceStats,
 		MkContainer,
 		MkFolder,
diff --git a/packages/client/src/pages/reset-password.vue b/packages/client/src/pages/reset-password.vue
index f9a2500840..e0608654c7 100644
--- a/packages/client/src/pages/reset-password.vue
+++ b/packages/client/src/pages/reset-password.vue
@@ -1,29 +1,25 @@
 <template>
-<FormBase v-if="token">
-	<FormInput v-model="password" type="password">
-		<template #prefix><i class="fas fa-lock"></i></template>
-		<span>{{ $ts.newPassword }}</span>
-	</FormInput>
-	
-	<FormButton primary @click="save">{{ $ts.save }}</FormButton>
-</FormBase>
+<MkSpacer v-if="token" :content-max="700" :margin-min="16" :margin-max="32">
+	<div class="_formRoot">
+		<FormInput v-model="password" type="password" class="_formBlock">
+			<template #prefix><i class="fas fa-lock"></i></template>
+			<template #label>{{ $ts.newPassword }}</template>
+		</FormInput>
+		
+		<FormButton primary class="_formBlock" @click="save">{{ $ts.save }}</FormButton>
+	</div>
+</MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormInput from '@/components/debobigego/input.vue';
-import FormButton from '@/components/debobigego/button.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 
 export default defineComponent({
 	components: {
-		FormBase,
-		FormGroup,
-		FormLink,
 		FormInput,
 		FormButton,
 	},
@@ -39,7 +35,8 @@ export default defineComponent({
 		return {
 			[symbols.PAGE_INFO]: {
 				title: this.$ts.resetPassword,
-				icon: 'fas fa-lock'
+				icon: 'fas fa-lock',
+				bg: 'var(--bg)',
 			},
 			password: '',
 		}
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
index cffd10a0ee..10599d99ff 100644
--- a/packages/client/src/pages/settings/2fa.vue
+++ b/packages/client/src/pages/settings/2fa.vue
@@ -71,9 +71,6 @@ import MkButton from '@/components/ui/button.vue';
 import MkInfo from '@/components/ui/info.vue';
 import MkInput from '@/components/form/input.vue';
 import MkSwitch from '@/components/form/switch.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormButton from '@/components/debobigego/button.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 
diff --git a/packages/client/src/pages/settings/email.vue b/packages/client/src/pages/settings/email.vue
index b04295cce0..e9010fbe42 100644
--- a/packages/client/src/pages/settings/email.vue
+++ b/packages/client/src/pages/settings/email.vue
@@ -41,8 +41,6 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, ref, watch } from 'vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormLink from '@/components/debobigego/link.vue';
 import FormSection from '@/components/form/section.vue';
 import FormInput from '@/components/form/input.vue';
 import FormSwitch from '@/components/form/switch.vue';
@@ -54,8 +52,6 @@ import { i18n } from '@/i18n';
 export default defineComponent({
 	components: {
 		FormSection,
-		FormLink,
-		FormButton,
 		FormSwitch,
 		FormInput,
 	},
diff --git a/packages/client/src/pages/settings/experimental-features.vue b/packages/client/src/pages/settings/experimental-features.vue
deleted file mode 100644
index 5a7bcb3b41..0000000000
--- a/packages/client/src/pages/settings/experimental-features.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-<FormBase>
-	<FormButton @click="error()">error test</FormButton>
-</FormBase>
-</template>
-
-<script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormKeyValueView from '@/components/debobigego/key-value-view.vue';
-import * as os from '@/os';
-import * as symbols from '@/symbols';
-
-export default defineComponent({
-	components: {
-		FormBase,
-		FormSelect,
-		FormSwitch,
-		FormButton,
-		FormLink,
-		FormGroup,
-		FormKeyValueView,
-	},
-
-	emits: ['info'],
-	
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.experimentalFeatures,
-				icon: 'fas fa-flask'
-			},
-			stats: null
-		}
-	},
-
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
-	methods: {
-		error() {
-			throw new Error('Test error');
-		}
-	}
-});
-</script>
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 8ffff86705..fa135c4178 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -218,10 +218,8 @@ export default defineComponent({
 				case 'plugin/manage': return defineAsyncComponent(() => import('./plugin.manage.vue'));
 				case 'import-export': return defineAsyncComponent(() => import('./import-export.vue'));
 				case 'account-info': return defineAsyncComponent(() => import('./account-info.vue'));
-				case 'update': return defineAsyncComponent(() => import('./update.vue'));
 				case 'registry': return defineAsyncComponent(() => import('./registry.vue'));
 				case 'delete-account': return defineAsyncComponent(() => import('./delete-account.vue'));
-				case 'experimental-features': return defineAsyncComponent(() => import('./experimental-features.vue'));
 			}
 			if (page.value.startsWith('registry/keys/system/')) {
 				return defineAsyncComponent(() => import('./registry.keys.vue'));
diff --git a/packages/client/src/pages/settings/other.vue b/packages/client/src/pages/settings/other.vue
index 0d9e60e21d..5e45abf6e1 100644
--- a/packages/client/src/pages/settings/other.vue
+++ b/packages/client/src/pages/settings/other.vue
@@ -1,7 +1,5 @@
 <template>
 <div class="_formRoot">
-	<FormLink to="/settings/update" class="_formBlock">Misskey Update</FormLink>
-
 	<FormSwitch :value="$i.injectFeaturedNote" @update:modelValue="onChangeInjectFeaturedNote" class="_formBlock">
 		{{ $ts.showFeaturedNotesInTimeline }}
 	</FormSwitch>
@@ -9,7 +7,6 @@
 	<FormSwitch v-model="reportError" class="_formBlock">{{ $ts.sendErrorReports }}<template #desc>{{ $ts.sendErrorReportsDescription }}</template></FormSwitch>
 
 	<FormLink to="/settings/account-info" class="_formBlock">{{ $ts.accountInfo }}</FormLink>
-	<FormLink to="/settings/experimental-features" class="_formBlock">{{ $ts.experimentalFeatures }}</FormLink>
 
 	<FormSection>
 		<template #label>{{ $ts.developer }}</template>
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 069f9d964d..82a21d5b16 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -40,7 +40,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import FormSection from '@/components/form/section.vue';
-import FormLink from '@/components/debobigego/link.vue';
 import FormSlot from '@/components/form/slot.vue';
 import FormButton from '@/components/ui/button.vue';
 import FormPagination from '@/components/form/pagination.vue';
@@ -51,7 +50,6 @@ import * as symbols from '@/symbols';
 export default defineComponent({
 	components: {
 		FormSection,
-		FormLink,
 		FormButton,
 		FormPagination,
 		FormSlot,
diff --git a/packages/client/src/pages/settings/theme.install.vue b/packages/client/src/pages/settings/theme.install.vue
index c3e531afb2..52935c75dc 100644
--- a/packages/client/src/pages/settings/theme.install.vue
+++ b/packages/client/src/pages/settings/theme.install.vue
@@ -1,40 +1,29 @@
 <template>
-<FormBase>
-	<FormGroup>
-		<FormTextarea v-model="installThemeCode">
-			<span>{{ $ts._theme.code }}</span>
-		</FormTextarea>
-		<FormButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
-	</FormGroup>
+<div class="_formRoot">
+	<FormTextarea v-model="installThemeCode" class="_formBlock">
+		<template #label>{{ $ts._theme.code }}</template>
+	</FormTextarea>
 
-	<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="fas fa-check"></i> {{ $ts.install }}</FormButton>
-</FormBase>
+	<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> {{ $ts.preview }}</FormButton>
+		<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="fas fa-check"></i> {{ $ts.install }}</FormButton>
+	</div>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import * as JSON5 from 'json5';
 import FormTextarea from '@/components/form/textarea.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormButton from '@/components/debobigego/button.vue';
+import FormButton from '@/components/ui/button.vue';
 import { applyTheme, validateTheme } from '@/scripts/theme';
 import * as os from '@/os';
-import { ColdDeviceStorage } from '@/store';
 import { addTheme, getThemes } from '@/theme-store';
 import * as symbols from '@/symbols';
 
 export default defineComponent({
 	components: {
 		FormTextarea,
-		FormSelect,
-		FormRadios,
-		FormBase,
-		FormGroup,
-		FormLink,
 		FormButton,
 	},
 
diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue
index c605b1eb64..a913ba4748 100644
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ b/packages/client/src/pages/settings/theme.manage.vue
@@ -30,9 +30,6 @@ import { defineComponent } from 'vue';
 import * as JSON5 from 'json5';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormSelect from '@/components/form/select.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
 import FormInput from '@/components/form/input.vue';
 import FormButton from '@/components/ui/button.vue';
 import { Theme, builtinThemes } from '@/scripts/theme';
@@ -46,9 +43,6 @@ export default defineComponent({
 	components: {
 		FormTextarea,
 		FormSelect,
-		FormRadios,
-		FormBase,
-		FormGroup,
 		FormInput,
 		FormButton,
 	},
diff --git a/packages/client/src/pages/settings/update.vue b/packages/client/src/pages/settings/update.vue
deleted file mode 100644
index e0d8f6d15c..0000000000
--- a/packages/client/src/pages/settings/update.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-<FormBase>
-	<template v-if="meta">
-		<FormInfo v-if="version === meta.version">{{ $ts.youAreRunningUpToDateClient }}</FormInfo>
-		<FormInfo v-else warn>{{ $ts.newVersionOfClientAvailable }}</FormInfo>
-	</template>
-	<FormGroup>
-		<template #label>{{ instanceName }}</template>
-		<FormKeyValueView>
-			<template #key>{{ $ts.currentVersion }}</template>
-			<template #value>{{ version }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
-			<template #key>{{ $ts.latestVersion }}</template>
-			<template v-if="meta" #value>{{ meta.version }}</template>
-			<template v-else #value><MkEllipsis/></template>
-		</FormKeyValueView>
-	</FormGroup>
-	<FormGroup>
-		<template #label>Misskey</template>
-		<FormKeyValueView>
-			<template #key>{{ $ts.latestVersion }}</template>
-			<template v-if="releases" #value>{{ releases[0].tag_name }}</template>
-			<template v-else #value><MkEllipsis/></template>
-		</FormKeyValueView>
-		<template v-if="releases" #caption><MkTime :time="releases[0].published_at" mode="detail"/></template>
-	</FormGroup>
-</FormBase>
-</template>
-
-<script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormKeyValueView from '@/components/debobigego/key-value-view.vue';
-import FormInfo from '@/components/debobigego/info.vue';
-import * as os from '@/os';
-import { version, instanceName } from '@/config';
-import * as symbols from '@/symbols';
-
-export default defineComponent({
-	components: {
-		FormBase,
-		FormSelect,
-		FormSwitch,
-		FormButton,
-		FormLink,
-		FormGroup,
-		FormKeyValueView,
-		FormInfo,
-	},
-
-	emits: ['info'],
-	
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: 'Misskey Update',
-				icon: 'fas fa-sync-alt',
-				bg: 'var(--bg)',
-			},
-			version,
-			instanceName,
-			releases: null,
-			meta: null
-		}
-	},
-
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-
-		os.api('meta', {
-			detail: false
-		}).then(meta => {
-			this.meta = meta;
-			localStorage.setItem('v', meta.version);
-		});
-
-		fetch('https://api.github.com/repos/misskey-dev/misskey/releases', {
-			method: 'GET',
-		})
-		.then(res => res.json())
-		.then(res => {
-			this.releases = res;
-		});
-	},
-
-	methods: {
-	}
-});
-</script>
diff --git a/packages/client/src/pages/settings/word-mute.vue b/packages/client/src/pages/settings/word-mute.vue
index 068f88740a..34edd0492c 100644
--- a/packages/client/src/pages/settings/word-mute.vue
+++ b/packages/client/src/pages/settings/word-mute.vue
@@ -31,7 +31,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import FormTextarea from '@/components/form/textarea.vue';
-import FormBase from '@/components/debobigego/base.vue';
 import MkKeyValue from '@/components/key-value.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkInfo from '@/components/ui/info.vue';
@@ -42,7 +41,6 @@ import * as symbols from '@/symbols';
 
 export default defineComponent({
 	components: {
-		FormBase,
 		MkButton,
 		FormTextarea,
 		MkKeyValue,
diff --git a/packages/client/yarn.lock b/packages/client/yarn.lock
index 1b9c9585e6..80cf1fc982 100644
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock
@@ -202,69 +202,6 @@
     node-fetch "^2.6.1"
     yaml-ast-parser "0.0.43"
 
-"@sentry/browser@5.29.2":
-  version "5.29.2"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.29.2.tgz#51adb4005511b1a4a70e4571880fc6653d651f91"
-  integrity sha512-uxZ7y7rp85tJll+RZtXRhXPbnFnOaxZqJEv05vJlXBtBNLQtlczV5iCtU9mZRLVHDtmZ5VVKUV8IKXntEqqDpQ==
-  dependencies:
-    "@sentry/core" "5.29.2"
-    "@sentry/types" "5.29.2"
-    "@sentry/utils" "5.29.2"
-    tslib "^1.9.3"
-
-"@sentry/core@5.29.2":
-  version "5.29.2"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-5.29.2.tgz#9e05fe197234161d57aabaf52fab336a7c520d81"
-  integrity sha512-7WYkoxB5IdlNEbwOwqSU64erUKH4laavPsM0/yQ+jojM76ErxlgEF0u//p5WaLPRzh3iDSt6BH+9TL45oNZeZw==
-  dependencies:
-    "@sentry/hub" "5.29.2"
-    "@sentry/minimal" "5.29.2"
-    "@sentry/types" "5.29.2"
-    "@sentry/utils" "5.29.2"
-    tslib "^1.9.3"
-
-"@sentry/hub@5.29.2":
-  version "5.29.2"
-  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-5.29.2.tgz#208f10fe6674695575ad74182a1151f71d6df00a"
-  integrity sha512-LaAIo2hwUk9ykeh9RF0cwLy6IRw+DjEee8l1HfEaDFUM6TPGlNNGObMJNXb9/95jzWp7jWwOpQjoIE3jepdQJQ==
-  dependencies:
-    "@sentry/types" "5.29.2"
-    "@sentry/utils" "5.29.2"
-    tslib "^1.9.3"
-
-"@sentry/minimal@5.29.2":
-  version "5.29.2"
-  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-5.29.2.tgz#420bebac8d03d30980fdb05c72d7b253d8aa541b"
-  integrity sha512-0aINSm8fGA1KyM7PavOBe1GDZDxrvnKt+oFnU0L+bTcw8Lr+of+v6Kwd97rkLRNOLw621xP076dL/7LSIzMuhw==
-  dependencies:
-    "@sentry/hub" "5.29.2"
-    "@sentry/types" "5.29.2"
-    tslib "^1.9.3"
-
-"@sentry/tracing@5.29.2":
-  version "5.29.2"
-  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-5.29.2.tgz#6012788547d2ab7893799d82c4941bda145dcd47"
-  integrity sha512-iumYbVRpvoU3BUuIooxibydeaOOjl5ysc+mzsqhRs2NGW/C3uKAsFXdvyNfqt3bxtRQwJEhwJByLP2u3pLThpw==
-  dependencies:
-    "@sentry/hub" "5.29.2"
-    "@sentry/minimal" "5.29.2"
-    "@sentry/types" "5.29.2"
-    "@sentry/utils" "5.29.2"
-    tslib "^1.9.3"
-
-"@sentry/types@5.29.2":
-  version "5.29.2"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-5.29.2.tgz#ac87383df1222c2d9b9f8f9ed7a6b86ea41a098a"
-  integrity sha512-dM9wgt8wy4WRty75QkqQgrw9FV9F+BOMfmc0iaX13Qos7i6Qs2Q0dxtJ83SoR4YGtW8URaHzlDtWlGs5egBiMA==
-
-"@sentry/utils@5.29.2":
-  version "5.29.2"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-5.29.2.tgz#99a5cdda2ea19d34a41932f138d470adcb3ee673"
-  integrity sha512-nEwQIDjtFkeE4k6yIk4Ka5XjGRklNLThWLs2xfXlL7uwrYOH2B9UBBOOIRUraBm/g/Xrra3xsam/kRxuiwtXZQ==
-  dependencies:
-    "@sentry/types" "5.29.2"
-    tslib "^1.9.3"
-
 "@sideway/address@^4.1.0":
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.2.tgz#811b84333a335739d3969cfc434736268170cad1"
@@ -5961,11 +5898,6 @@ tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
   integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
 
-tslib@^1.9.3:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
-  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
-
 tslib@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
-- 
cgit v1.2.3-freya


From 408142647cf7b48f1b7b5e9b5f4c47fc12eb9728 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 3 Jan 2022 00:41:01 +0900
Subject: tweak ui

---
 .../client/src/pages/settings/delete-account.vue   |  20 +--
 packages/client/src/pages/settings/index.vue       |  18 ---
 packages/client/src/pages/settings/other.vue       |  21 +--
 .../client/src/pages/settings/registry.keys.vue    | 114 ----------------
 .../client/src/pages/settings/registry.value.vue   | 147 ---------------------
 packages/client/src/pages/settings/registry.vue    |  90 -------------
 6 files changed, 8 insertions(+), 402 deletions(-)
 delete mode 100644 packages/client/src/pages/settings/registry.keys.vue
 delete mode 100644 packages/client/src/pages/settings/registry.value.vue
 delete mode 100644 packages/client/src/pages/settings/registry.vue

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/src/pages/settings/delete-account.vue b/packages/client/src/pages/settings/delete-account.vue
index 6ce8d6509c..17501d9510 100644
--- a/packages/client/src/pages/settings/delete-account.vue
+++ b/packages/client/src/pages/settings/delete-account.vue
@@ -1,28 +1,23 @@
 <template>
-<FormBase>
-	<FormInfo warn>{{ $ts._accountDelete.mayTakeTime }}</FormInfo>
-	<FormInfo>{{ $ts._accountDelete.sendEmail }}</FormInfo>
-	<FormButton v-if="!$i.isDeleted" danger @click="deleteAccount">{{ $ts._accountDelete.requestAccountDelete }}</FormButton>
+<div class="_formRoot">
+	<FormInfo warn class="_formBlock">{{ $ts._accountDelete.mayTakeTime }}</FormInfo>
+	<FormInfo class="_formBlock">{{ $ts._accountDelete.sendEmail }}</FormInfo>
+	<FormButton v-if="!$i.isDeleted" danger class="_formBlock" @click="deleteAccount">{{ $ts._accountDelete.requestAccountDelete }}</FormButton>
 	<FormButton v-else disabled>{{ $ts._accountDelete.inProgress }}</FormButton>
-</FormBase>
+</div>
 </template>
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import FormInfo from '@/components/debobigego/info.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormButton from '@/components/debobigego/button.vue';
+import FormInfo from '@/components/ui/info.vue';
+import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
-import { debug } from '@/config';
 import { signout } from '@/account';
 import * as symbols from '@/symbols';
 
 export default defineComponent({
 	components: {
-		FormBase,
 		FormButton,
-		FormGroup,
 		FormInfo,
 	},
 
@@ -35,7 +30,6 @@ export default defineComponent({
 				icon: 'fas fa-exclamation-triangle',
 				bg: 'var(--bg)',
 			},
-			debug,
 		}
 	},
 
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index fa135c4178..60ed217861 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -218,32 +218,14 @@ export default defineComponent({
 				case 'plugin/manage': return defineAsyncComponent(() => import('./plugin.manage.vue'));
 				case 'import-export': return defineAsyncComponent(() => import('./import-export.vue'));
 				case 'account-info': return defineAsyncComponent(() => import('./account-info.vue'));
-				case 'registry': return defineAsyncComponent(() => import('./registry.vue'));
 				case 'delete-account': return defineAsyncComponent(() => import('./delete-account.vue'));
 			}
-			if (page.value.startsWith('registry/keys/system/')) {
-				return defineAsyncComponent(() => import('./registry.keys.vue'));
-			}
-			if (page.value.startsWith('registry/value/system/')) {
-				return defineAsyncComponent(() => import('./registry.value.vue'));
-			}
 			return null;
 		});
 
 		watch(component, () => {
 			pageProps.value = {};
 
-			if (page.value) {
-				if (page.value.startsWith('registry/keys/system/')) {
-					pageProps.value.scope = page.value.replace('registry/keys/system/', '').split('/');
-				}
-				if (page.value.startsWith('registry/value/system/')) {
-					const path = page.value.replace('registry/value/system/', '').split('/');
-					pageProps.value.xKey = path.pop();
-					pageProps.value.scope = path;
-				}
-			}
-
 			nextTick(() => {
 				scroll(el.value, { top: 0 });
 			});
diff --git a/packages/client/src/pages/settings/other.vue b/packages/client/src/pages/settings/other.vue
index 5e45abf6e1..b941c07c6f 100644
--- a/packages/client/src/pages/settings/other.vue
+++ b/packages/client/src/pages/settings/other.vue
@@ -8,21 +8,6 @@
 
 	<FormLink to="/settings/account-info" class="_formBlock">{{ $ts.accountInfo }}</FormLink>
 
-	<FormSection>
-		<template #label>{{ $ts.developer }}</template>
-		<FormSwitch v-model="debug" @update:modelValue="changeDebug" class="_formBlock">
-			DEBUG MODE
-		</FormSwitch>
-		<template v-if="debug">
-			<FormButton @click="taskmanager">Task Manager</FormButton>
-		</template>
-	</FormSection>
-
-	<FormLink to="/settings/registry" class="_formBlock"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.registry }}</FormLink>
-
-	<FormLink to="/bios" behavior="browser" class="_formBlock"><template #icon><i class="fas fa-door-open"></i></template>BIOS</FormLink>
-	<FormLink to="/cli" behavior="browser" class="_formBlock"><template #icon><i class="fas fa-door-open"></i></template>CLI</FormLink>
-
 	<FormLink to="/settings/delete-account" class="_formBlock"><template #icon><i class="fas fa-exclamation-triangle"></i></template>{{ $ts.closeAccount }}</FormLink>
 </div>
 </template>
@@ -30,10 +15,8 @@
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
 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/debobigego/link.vue';
-import FormButton from '@/components/debobigego/button.vue';
+import FormLink from '@/components/form/link.vue';
 import * as os from '@/os';
 import { debug } from '@/config';
 import { defaultStore } from '@/store';
@@ -42,10 +25,8 @@ import * as symbols from '@/symbols';
 
 export default defineComponent({
 	components: {
-		FormSelect,
 		FormSection,
 		FormSwitch,
-		FormButton,
 		FormLink,
 	},
 
diff --git a/packages/client/src/pages/settings/registry.keys.vue b/packages/client/src/pages/settings/registry.keys.vue
deleted file mode 100644
index 89953ebea1..0000000000
--- a/packages/client/src/pages/settings/registry.keys.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
-<FormBase>
-	<FormGroup>
-		<FormKeyValueView>
-			<template #key>{{ $ts._registry.domain }}</template>
-			<template #value>{{ $ts.system }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
-			<template #key>{{ $ts._registry.scope }}</template>
-			<template #value>{{ scope.join('/') }}</template>
-		</FormKeyValueView>
-	</FormGroup>
-	
-	<FormGroup v-if="keys">
-		<template #label>{{ $ts._registry.keys }}</template>
-		<FormLink v-for="key in keys" :to="`/settings/registry/value/system/${scope.join('/')}/${key[0]}`" class="_monospace">{{ key[0] }}<template #suffix>{{ key[1].toUpperCase() }}</template></FormLink>
-	</FormGroup>
-
-	<FormButton primary @click="createKey">{{ $ts._registry.createKey }}</FormButton>
-</FormBase>
-</template>
-
-<script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
-import * as JSON5 from 'json5';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormKeyValueView from '@/components/debobigego/key-value-view.vue';
-import * as os from '@/os';
-import * as symbols from '@/symbols';
-
-export default defineComponent({
-	components: {
-		FormBase,
-		FormSelect,
-		FormSwitch,
-		FormButton,
-		FormLink,
-		FormGroup,
-		FormKeyValueView,
-	},
-
-	props: {
-		scope: {
-			required: true
-		}
-	},
-
-	emits: ['info'],
-	
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.registry,
-				icon: 'fas fa-cogs',
-				bg: 'var(--bg)',
-			},
-			keys: null,
-		}
-	},
-
-	watch: {
-		scope() {
-			this.fetch();
-		}
-	},
-
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-		this.fetch();
-	},
-
-	methods: {
-		fetch() {
-			os.api('i/registry/keys-with-type', {
-				scope: this.scope
-			}).then(keys => {
-				this.keys = Object.entries(keys).sort((a, b) => a[0].localeCompare(b[0]));
-			});
-		},
-
-		async createKey() {
-			const { canceled, result } = await os.form(this.$ts._registry.createKey, {
-				key: {
-					type: 'string',
-					label: this.$ts._registry.key,
-				},
-				value: {
-					type: 'string',
-					multiline: true,
-					label: this.$ts.value,
-				},
-				scope: {
-					type: 'string',
-					label: this.$ts._registry.scope,
-					default: this.scope.join('/')
-				}
-			});
-			if (canceled) return;
-			os.apiWithDialog('i/registry/set', {
-				scope: result.scope.split('/'),
-				key: result.key,
-				value: JSON5.parse(result.value),
-			}).then(() => {
-				this.fetch();
-			});
-		}
-	}
-});
-</script>
diff --git a/packages/client/src/pages/settings/registry.value.vue b/packages/client/src/pages/settings/registry.value.vue
deleted file mode 100644
index 6acd3f6048..0000000000
--- a/packages/client/src/pages/settings/registry.value.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<template>
-<FormBase>
-	<FormInfo warn>{{ $ts.editTheseSettingsMayBreakAccount }}</FormInfo>
-
-	<template v-if="value">
-		<FormGroup>
-			<FormKeyValueView>
-				<template #key>{{ $ts._registry.domain }}</template>
-				<template #value>{{ $ts.system }}</template>
-			</FormKeyValueView>
-			<FormKeyValueView>
-				<template #key>{{ $ts._registry.scope }}</template>
-				<template #value>{{ scope.join('/') }}</template>
-			</FormKeyValueView>
-			<FormKeyValueView>
-				<template #key>{{ $ts._registry.key }}</template>
-				<template #value>{{ xKey }}</template>
-			</FormKeyValueView>
-		</FormGroup>
-
-		<FormGroup>
-			<FormTextarea v-model="valueForEditor" tall class="_monospace" style="tab-size: 2;">
-				<span>{{ $ts.value }} (JSON)</span>
-			</FormTextarea>
-			<FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
-		</FormGroup>
-
-		<FormKeyValueView>
-			<template #key>{{ $ts.updatedAt }}</template>
-			<template #value><MkTime :time="value.updatedAt" mode="detail"/></template>
-		</FormKeyValueView>
-
-		<FormButton danger @click="del"><i class="fas fa-trash"></i> {{ $ts.delete }}</FormButton>
-	</template>
-</FormBase>
-</template>
-
-<script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
-import * as JSON5 from 'json5';
-import FormInfo from '@/components/debobigego/info.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormTextarea from '@/components/form/textarea.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormKeyValueView from '@/components/debobigego/key-value-view.vue';
-import * as os from '@/os';
-import * as symbols from '@/symbols';
-
-export default defineComponent({
-	components: {
-		FormInfo,
-		FormBase,
-		FormSelect,
-		FormSwitch,
-		FormButton,
-		FormTextarea,
-		FormGroup,
-		FormKeyValueView,
-	},
-
-	props: {
-		scope: {
-			required: true
-		},
-		xKey: {
-			required: true
-		},
-	},
-
-	emits: ['info'],
-	
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.registry,
-				icon: 'fas fa-cogs',
-				bg: 'var(--bg)',
-			},
-			value: null,
-			valueForEditor: null,
-		}
-	},
-
-	watch: {
-		key() {
-			this.fetch();
-		},
-	},
-
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-		this.fetch();
-	},
-
-	methods: {
-		fetch() {
-			os.api('i/registry/get-detail', {
-				scope: this.scope,
-				key: this.xKey
-			}).then(value => {
-				this.value = value;
-				this.valueForEditor = JSON5.stringify(this.value.value, null, '\t');
-			});
-		},
-
-		save() {
-			try {
-				JSON5.parse(this.valueForEditor);
-			} catch (e) {
-				os.alert({
-					type: 'error',
-					text: this.$ts.invalidValue
-				});
-				return;
-			}
-
-			os.confirm({
-				type: 'warning',
-				text: this.$ts.saveConfirm,
-			}).then(({ canceled }) => {
-				if (canceled) return;
-				os.apiWithDialog('i/registry/set', {
-					scope: this.scope,
-					key: this.xKey,
-					value: JSON5.parse(this.valueForEditor)
-				});
-			});
-		},
-
-		del() {
-			os.confirm({
-				type: 'warning',
-				text: this.$ts.deleteConfirm,
-			}).then(({ canceled }) => {
-				if (canceled) return;
-				os.apiWithDialog('i/registry/remove', {
-					scope: this.scope,
-					key: this.xKey
-				});
-			});
-		}
-	}
-});
-</script>
diff --git a/packages/client/src/pages/settings/registry.vue b/packages/client/src/pages/settings/registry.vue
deleted file mode 100644
index 6faff5d2a4..0000000000
--- a/packages/client/src/pages/settings/registry.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-<FormBase>
-	<FormGroup v-if="scopes">
-		<template #label>{{ $ts.system }}</template>
-		<FormLink v-for="scope in scopes" :to="`/settings/registry/keys/system/${scope.join('/')}`" class="_monospace">{{ scope.join('/') }}</FormLink>
-	</FormGroup>
-	<FormButton primary @click="createKey">{{ $ts._registry.createKey }}</FormButton>
-</FormBase>
-</template>
-
-<script lang="ts">
-import { defineAsyncComponent, defineComponent } from 'vue';
-import * as JSON5 from 'json5';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormKeyValueView from '@/components/debobigego/key-value-view.vue';
-import * as os from '@/os';
-import * as symbols from '@/symbols';
-
-export default defineComponent({
-	components: {
-		FormBase,
-		FormSelect,
-		FormSwitch,
-		FormButton,
-		FormLink,
-		FormGroup,
-		FormKeyValueView,
-	},
-
-	emits: ['info'],
-	
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.registry,
-				icon: 'fas fa-cogs',
-				bg: 'var(--bg)',
-			},
-			scopes: null,
-		}
-	},
-
-	created() {
-		this.fetch();
-	},
-
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
-	methods: {
-		fetch() {
-			os.api('i/registry/scopes').then(scopes => {
-				this.scopes = scopes.slice().sort((a, b) => a.join('/').localeCompare(b.join('/')));
-			});
-		},
-
-		async createKey() {
-			const { canceled, result } = await os.form(this.$ts._registry.createKey, {
-				key: {
-					type: 'string',
-					label: this.$ts._registry.key,
-				},
-				value: {
-					type: 'string',
-					multiline: true,
-					label: this.$ts.value,
-				},
-				scope: {
-					type: 'string',
-					label: this.$ts._registry.scope,
-				}
-			});
-			if (canceled) return;
-			os.apiWithDialog('i/registry/set', {
-				scope: result.scope.split('/'),
-				key: result.key,
-				value: JSON5.parse(result.value),
-			}).then(() => {
-				this.fetch();
-			});
-		}
-	}
-});
-</script>
-- 
cgit v1.2.3-freya


From efa72e8d14cb2ab5c0ceba541ee992ca031db35c Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 4 Jan 2022 17:52:44 +0900
Subject: tweak ui

---
 packages/client/src/pages/settings/index.vue       |   1 -
 .../client/src/pages/settings/plugin.install.vue   |  32 ++----
 .../client/src/pages/settings/plugin.manage.vue    | 116 ---------------------
 packages/client/src/pages/settings/plugin.vue      |  86 +++++++++++++--
 4 files changed, 89 insertions(+), 146 deletions(-)
 delete mode 100644 packages/client/src/pages/settings/plugin.manage.vue

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index 60ed217861..c9acf2c63c 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -215,7 +215,6 @@ export default defineComponent({
 				case 'deck': return defineAsyncComponent(() => import('./deck.vue'));
 				case 'plugin': return defineAsyncComponent(() => import('./plugin.vue'));
 				case 'plugin/install': return defineAsyncComponent(() => import('./plugin.install.vue'));
-				case 'plugin/manage': return defineAsyncComponent(() => import('./plugin.manage.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/plugin.install.vue b/packages/client/src/pages/settings/plugin.install.vue
index af93ef2930..bf494fa719 100644
--- a/packages/client/src/pages/settings/plugin.install.vue
+++ b/packages/client/src/pages/settings/plugin.install.vue
@@ -1,15 +1,15 @@
 <template>
-<FormBase>
-	<FormInfo warn>{{ $ts._plugin.installWarn }}</FormInfo>
+<div class="_formRoot">
+	<FormInfo warn class="_formBlock">{{ $ts._plugin.installWarn }}</FormInfo>
 
-	<FormGroup>
-		<FormTextarea v-model="code" tall>
-			<span>{{ $ts.code }}</span>
-		</FormTextarea>
-	</FormGroup>
+	<FormTextarea v-model="code" tall class="_formBlock">
+		<template #label>{{ $ts.code }}</template>
+	</FormTextarea>
 
-	<FormButton :disabled="code == null" primary inline @click="install"><i class="fas fa-check"></i> {{ $ts.install }}</FormButton>
-</FormBase>
+	<div class="_formBlock">
+		<FormButton :disabled="code == null" primary inline @click="install"><i class="fas fa-check"></i> {{ $ts.install }}</FormButton>
+	</div>
+</div>
 </template>
 
 <script lang="ts">
@@ -18,13 +18,8 @@ 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 FormSelect from '@/components/form/select.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormInfo from '@/components/debobigego/info.vue';
+import FormButton from '@/components/ui/button.vue';
+import FormInfo from '@/components/ui/info.vue';
 import * as os from '@/os';
 import { ColdDeviceStorage } from '@/store';
 import { unisonReload } from '@/scripts/unison-reload';
@@ -33,11 +28,6 @@ import * as symbols from '@/symbols';
 export default defineComponent({
 	components: {
 		FormTextarea,
-		FormSelect,
-		FormRadios,
-		FormBase,
-		FormGroup,
-		FormLink,
 		FormButton,
 		FormInfo,
 	},
diff --git a/packages/client/src/pages/settings/plugin.manage.vue b/packages/client/src/pages/settings/plugin.manage.vue
deleted file mode 100644
index 8b9021dc3d..0000000000
--- a/packages/client/src/pages/settings/plugin.manage.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-<FormBase>
-	<FormGroup v-for="plugin in plugins" :key="plugin.id">
-		<template #label><span style="display: flex;"><b>{{ plugin.name }}</b><span style="margin-left: auto;">v{{ plugin.version }}</span></span></template>
-
-		<FormSwitch :modelValue="plugin.active" @update:modelValue="changeActive(plugin, $event)">{{ $ts.makeActive }}</FormSwitch>
-		<div class="_debobigegoItem">
-			<div class="_debobigegoPanel" style="padding: 16px;">
-				<div class="_keyValue">
-					<div>{{ $ts.author }}:</div>
-					<div>{{ plugin.author }}</div>
-				</div>
-				<div class="_keyValue">
-					<div>{{ $ts.description }}:</div>
-					<div>{{ plugin.description }}</div>
-				</div>
-				<div class="_keyValue">
-					<div>{{ $ts.permission }}:</div>
-					<div>{{ plugin.permissions }}</div>
-				</div>
-			</div>
-		</div>
-		<div class="_debobigegoItem">
-			<div class="_debobigegoPanel" style="padding: 16px;">
-				<MkButton v-if="plugin.config" inline @click="config(plugin)"><i class="fas fa-cog"></i> {{ $ts.settings }}</MkButton>
-				<MkButton inline danger @click="uninstall(plugin)"><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</MkButton>
-			</div>
-		</div>
-	</FormGroup>
-</FormBase>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import MkButton from '@/components/ui/button.vue';
-import MkTextarea from '@/components/form/textarea.vue';
-import MkSelect from '@/components/form/select.vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import * as os from '@/os';
-import { ColdDeviceStorage } from '@/store';
-import * as symbols from '@/symbols';
-import { unisonReload } from '@/scripts/unison-reload';
-
-export default defineComponent({
-	components: {
-		MkButton,
-		MkTextarea,
-		MkSelect,
-		FormSwitch,
-		FormBase,
-		FormGroup,
-	},
-
-	emits: ['info'],
-	
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts._plugin.manage,
-				icon: 'fas fa-plug',
-				bg: 'var(--bg)',
-			},
-			plugins: ColdDeviceStorage.get('plugins'),
-		}
-	},
-
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
-	methods: {
-		uninstall(plugin) {
-			ColdDeviceStorage.set('plugins', this.plugins.filter(x => x.id !== plugin.id));
-			os.success();
-			this.$nextTick(() => {
-				unisonReload();
-			});
-		},
-
-		// TODO: この処理をstore側にactionとして移動し、設定画面を開くAiScriptAPIを実装できるようにする
-		async 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 plugins = ColdDeviceStorage.get('plugins');
-			plugins.find(p => p.id === plugin.id).configData = result;
-			ColdDeviceStorage.set('plugins', plugins);
-
-			this.$nextTick(() => {
-				location.reload();
-			});
-		},
-
-		changeActive(plugin, active) {
-			const plugins = ColdDeviceStorage.get('plugins');
-			plugins.find(p => p.id === plugin.id).active = active;
-			ColdDeviceStorage.set('plugins', plugins);
-
-			this.$nextTick(() => {
-				location.reload();
-			});
-		}
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue
index 50e53f459f..d411ad2961 100644
--- a/packages/client/src/pages/settings/plugin.vue
+++ b/packages/client/src/pages/settings/plugin.vue
@@ -1,23 +1,54 @@
 <template>
-<FormBase>
+<div class="_formRoot">
 	<FormLink to="/settings/plugin/install"><template #icon><i class="fas fa-download"></i></template>{{ $ts._plugin.install }}</FormLink>
-	<FormLink to="/settings/plugin/manage"><template #icon><i class="fas fa-folder-open"></i></template>{{ $ts._plugin.manage }}<template #suffix>{{ plugins }}</template></FormLink>
-</FormBase>
+
+	<FormSection>
+		<template #label>{{ $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" :modelValue="plugin.active" @update:modelValue="changeActive(plugin, $event)">{{ $ts.makeActive }}</FormSwitch>
+
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ $ts.author }}</template>
+				<template #value>{{ plugin.author }}</template>
+			</MkKeyValue>
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ $ts.description }}</template>
+				<template #value>{{ plugin.description }}</template>
+			</MkKeyValue>
+			<MkKeyValue class="_formBlock">
+				<template #key>{{ $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="fas fa-cog"></i> {{ $ts.settings }}</MkButton>
+				<MkButton inline danger @click="uninstall(plugin)"><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</MkButton>
+			</div>
+		</div>
+	</FormSection>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormLink from '@/components/debobigego/link.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/ui/button.vue';
+import MkKeyValue from '@/components/key-value.vue';
 import * as os from '@/os';
 import { ColdDeviceStorage } from '@/store';
 import * as symbols from '@/symbols';
 
 export default defineComponent({
 	components: {
-		FormBase,
 		FormLink,
+		FormSwitch,
+		FormSection,
+		MkButton,
+		MkKeyValue,
 	},
 
 	emits: ['info'],
@@ -29,13 +60,52 @@ export default defineComponent({
 				icon: 'fas fa-plug',
 				bg: 'var(--bg)',
 			},
-			plugins: ColdDeviceStorage.get('plugins').length,
+			plugins: ColdDeviceStorage.get('plugins'),
 		}
 	},
 
 	mounted() {
 		this.$emit('info', this[symbols.PAGE_INFO]);
 	},
+
+	methods: {
+		uninstall(plugin) {
+			ColdDeviceStorage.set('plugins', this.plugins.filter(x => x.id !== plugin.id));
+			os.success();
+			this.$nextTick(() => {
+				unisonReload();
+			});
+		},
+
+		// TODO: この処理をstore側にactionとして移動し、設定画面を開くAiScriptAPIを実装できるようにする
+		async 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 plugins = ColdDeviceStorage.get('plugins');
+			plugins.find(p => p.id === plugin.id).configData = result;
+			ColdDeviceStorage.set('plugins', plugins);
+
+			this.$nextTick(() => {
+				location.reload();
+			});
+		},
+
+		changeActive(plugin, active) {
+			const plugins = ColdDeviceStorage.get('plugins');
+			plugins.find(p => p.id === plugin.id).active = active;
+			ColdDeviceStorage.set('plugins', plugins);
+
+			this.$nextTick(() => {
+				location.reload();
+			});
+		}
+	},
 });
 </script>
 
-- 
cgit v1.2.3-freya


From 87c429b5bd63edcd4de36db519ee5e3cc4ef89a5 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 4 Jan 2022 17:58:53 +0900
Subject: tweak ui

---
 packages/client/src/pages/settings/custom-css.vue | 25 +++++---------------
 packages/client/src/pages/settings/mute-block.vue | 28 ++++++++---------------
 2 files changed, 16 insertions(+), 37 deletions(-)

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/src/pages/settings/custom-css.vue b/packages/client/src/pages/settings/custom-css.vue
index 155956923c..6dbb8c2ae9 100644
--- a/packages/client/src/pages/settings/custom-css.vue
+++ b/packages/client/src/pages/settings/custom-css.vue
@@ -1,25 +1,18 @@
 <template>
-<FormBase>
-	<FormInfo warn>{{ $ts.customCssWarn }}</FormInfo>
+<div class="_formRoot">
+	<FormInfo warn class="_formBlock">{{ $ts.customCssWarn }}</FormInfo>
 
-	<FormTextarea v-model="localCustomCss" manual-save tall class="_monospace" style="tab-size: 2;">
-		<span>{{ $ts.local }}</span>
+	<FormTextarea v-model="localCustomCss" manual-save tall class="_monospace _formBlock" style="tab-size: 2;">
+		<template #label>CSS</template>
 	</FormTextarea>
-</FormBase>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import FormTextarea from '@/components/form/textarea.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormRadios from '@/components/form/radios.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormInfo from '@/components/debobigego/info.vue';
+import FormInfo from '@/components/ui/info.vue';
 import * as os from '@/os';
-import { ColdDeviceStorage } from '@/store';
 import { unisonReload } from '@/scripts/unison-reload';
 import * as symbols from '@/symbols';
 import { defaultStore } from '@/store';
@@ -27,12 +20,6 @@ import { defaultStore } from '@/store';
 export default defineComponent({
 	components: {
 		FormTextarea,
-		FormSelect,
-		FormRadios,
-		FormBase,
-		FormGroup,
-		FormLink,
-		FormButton,
 		FormInfo,
 	},
 
diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/mute-block.vue
index 4f42d5e429..6a63c9eb21 100644
--- a/packages/client/src/pages/settings/mute-block.vue
+++ b/packages/client/src/pages/settings/mute-block.vue
@@ -1,5 +1,5 @@
 <template>
-<FormBase>
+<div class="_formRoot">
 	<MkTab v-model="tab" style="margin-bottom: var(--margin);">
 		<option value="mute">{{ $ts.mutedUsers }}</option>
 		<option value="block">{{ $ts.blockedUsers }}</option>
@@ -8,11 +8,9 @@
 		<MkPagination :pagination="mutingPagination" class="muting">
 			<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
 			<template v-slot="{items}">
-				<FormGroup>
-					<FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)">
-						<MkAcct :user="mute.mutee"/>
-					</FormLink>
-				</FormGroup>
+				<FormLink v-for="mute in items" :key="mute.id" :to="userPage(mute.mutee)">
+					<MkAcct :user="mute.mutee"/>
+				</FormLink>
 			</template>
 		</MkPagination>
 	</div>
@@ -20,25 +18,21 @@
 		<MkPagination :pagination="blockingPagination" class="blocking">
 			<template #empty><FormInfo>{{ $ts.noUsers }}</FormInfo></template>
 			<template v-slot="{items}">
-				<FormGroup>
-					<FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)">
-						<MkAcct :user="block.blockee"/>
-					</FormLink>
-				</FormGroup>
+				<FormLink v-for="block in items" :key="block.id" :to="userPage(block.blockee)">
+					<MkAcct :user="block.blockee"/>
+				</FormLink>
 			</template>
 		</MkPagination>
 	</div>
-</FormBase>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkTab from '@/components/tab.vue';
-import FormInfo from '@/components/debobigego/info.vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
+import FormInfo from '@/components/ui/info.vue';
+import FormLink from '@/components/form/link.vue';
 import { userPage } from '@/filters/user';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
@@ -48,8 +42,6 @@ export default defineComponent({
 		MkPagination,
 		MkTab,
 		FormInfo,
-		FormBase,
-		FormGroup,
 		FormLink,
 	},
 
-- 
cgit v1.2.3-freya


From 6c62c0681c31584c926eeb6c8929c6e5726a551f Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 4 Jan 2022 18:21:00 +0900
Subject: tweak ui

---
 packages/client/src/pages/settings/accounts.vue    | 32 ++++++-------
 packages/client/src/pages/settings/api.vue         | 19 +++-----
 packages/client/src/pages/settings/apps.vue        | 14 ++----
 packages/client/src/pages/settings/integration.vue | 54 ++++++++++------------
 4 files changed, 48 insertions(+), 71 deletions(-)

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
index 2d1e0eff4e..9ff11adda3 100644
--- a/packages/client/src/pages/settings/accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -1,41 +1,35 @@
 <template>
-<FormBase>
+<div class="_formRoot">
 	<FormSuspense :p="init">
 		<FormButton primary @click="addAccount"><i class="fas fa-plus"></i> {{ $ts.addAccount }}</FormButton>
 
-		<div v-for="account in accounts" :key="account.id" class="_debobigegoItem _button" @click="menu(account, $event)">
-			<div class="_debobigegoPanel lcjjdxlm">
-				<div class="avatar">
-					<MkAvatar :user="account" class="avatar"/>
+		<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="body">
-					<div class="name">
-						<MkUserName :user="account"/>
-					</div>
-					<div class="acct">
-						<MkAcct :user="account"/>
-					</div>
+				<div class="acct">
+					<MkAcct :user="account"/>
 				</div>
 			</div>
 		</div>
 	</FormSuspense>
-</FormBase>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSuspense from '@/components/debobigego/suspense.vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormButton from '@/components/debobigego/button.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import { getAccounts, addAccount, login } from '@/account';
 
 export default defineComponent({
 	components: {
-		FormBase,
 		FormSuspense,
 		FormButton,
 	},
diff --git a/packages/client/src/pages/settings/api.vue b/packages/client/src/pages/settings/api.vue
index 30a4902a15..1a51b526f2 100644
--- a/packages/client/src/pages/settings/api.vue
+++ b/packages/client/src/pages/settings/api.vue
@@ -1,25 +1,20 @@
 <template>
-<FormBase>
-	<FormButton primary @click="generateToken">{{ $ts.generateAccessToken }}</FormButton>
-	<FormLink to="/settings/apps">{{ $ts.manageAccessTokens }}</FormLink>
-	<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null">API console</FormLink>
-</FormBase>
+<div class="_formRoot">
+	<FormButton primary class="_formBlock" @click="generateToken">{{ $ts.generateAccessToken }}</FormButton>
+	<FormLink to="/settings/apps" class="_formBlock">{{ $ts.manageAccessTokens }}</FormLink>
+	<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null" class="_formBlock">API console</FormLink>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormButton from '@/components/debobigego/button.vue';
+import FormLink from '@/components/form/link.vue';
+import FormButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 
 export default defineComponent({
 	components: {
-		FormBase,
 		FormButton,
 		FormLink,
 	},
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index b5fe4e0aed..68952bbbdb 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -1,5 +1,5 @@
 <template>
-<FormBase>
+<div class="_formRoot">
 	<FormPagination ref="list" :pagination="pagination">
 		<template #empty>
 			<div class="_fullinfo">
@@ -8,7 +8,7 @@
 			</div>
 		</template>
 		<template v-slot="{items}">
-			<div v-for="token in items" :key="token.id" class="_debobigegoPanel bfomjevm">
+			<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>
@@ -34,23 +34,17 @@
 			</div>
 		</template>
 	</FormPagination>
-</FormBase>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormPagination from '@/components/debobigego/pagination.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormButton from '@/components/debobigego/button.vue';
+import FormPagination from '@/components/ui/pagination.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 
 export default defineComponent({
 	components: {
-		FormBase,
 		FormPagination,
 	},
 
diff --git a/packages/client/src/pages/settings/integration.vue b/packages/client/src/pages/settings/integration.vue
index 3d8aaf8a6f..e3dbc6fde9 100644
--- a/packages/client/src/pages/settings/integration.vue
+++ b/packages/client/src/pages/settings/integration.vue
@@ -1,45 +1,39 @@
 <template>
-<FormBase>
-	<div v-if="enableTwitterIntegration" class="_debobigegoItem">
-		<div class="_debobigegoLabel"><i class="fab fa-twitter"></i> Twitter</div>
-		<div class="_debobigegoPanel" style="padding: 16px;">
-			<p v-if="integrations.twitter">{{ $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">{{ $ts.disconnectService }}</MkButton>
-			<MkButton v-else primary @click="connectTwitter">{{ $ts.connectService }}</MkButton>
-		</div>
-	</div>
-
-	<div v-if="enableDiscordIntegration" class="_debobigegoItem">
-		<div class="_debobigegoLabel"><i class="fab fa-discord"></i> Discord</div>
-		<div class="_debobigegoPanel" style="padding: 16px;">
-			<p v-if="integrations.discord">{{ $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">{{ $ts.disconnectService }}</MkButton>
-			<MkButton v-else primary @click="connectDiscord">{{ $ts.connectService }}</MkButton>
-		</div>
-	</div>
-
-	<div v-if="enableGithubIntegration" class="_debobigegoItem">
-		<div class="_debobigegoLabel"><i class="fab fa-github"></i> GitHub</div>
-		<div class="_debobigegoPanel" style="padding: 16px;">
-			<p v-if="integrations.github">{{ $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">{{ $ts.disconnectService }}</MkButton>
-			<MkButton v-else primary @click="connectGithub">{{ $ts.connectService }}</MkButton>
-		</div>
-	</div>
-</FormBase>
+<div class="_formRoot">
+	<FormSection v-if="enableTwitterIntegration">
+		<template #label><i class="fab fa-twitter"></i> Twitter</template>
+		<p v-if="integrations.twitter">{{ $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">{{ $ts.disconnectService }}</MkButton>
+		<MkButton v-else primary @click="connectTwitter">{{ $ts.connectService }}</MkButton>
+	</FormSection>
+
+	<FormSection v-if="enableDiscordIntegration">
+		<template #label><i class="fab fa-discord"></i> Discord</template>
+		<p v-if="integrations.discord">{{ $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">{{ $ts.disconnectService }}</MkButton>
+		<MkButton v-else primary @click="connectDiscord">{{ $ts.connectService }}</MkButton>
+	</FormSection>
+
+	<FormSection v-if="enableGithubIntegration">
+		<template #label><i class="fab fa-github"></i> GitHub</template>
+		<p v-if="integrations.github">{{ $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">{{ $ts.disconnectService }}</MkButton>
+		<MkButton v-else primary @click="connectGithub">{{ $ts.connectService }}</MkButton>
+	</FormSection>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { apiUrl } from '@/config';
-import FormBase from '@/components/debobigego/base.vue';
+import FormSection from '@/components/form/section.vue';
 import MkButton from '@/components/ui/button.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 
 export default defineComponent({
 	components: {
-		FormBase,
+		FormSection,
 		MkButton
 	},
 
-- 
cgit v1.2.3-freya


From 89053d5747075bc6cc4ba5276167a826887fae08 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 4 Jan 2022 21:16:41 +0900
Subject: tweak ui

---
 packages/client/src/components/form/folder.vue     | 101 +++++++++++++++++++++
 packages/client/src/pages/admin/bot-protection.vue | 101 +++++++++------------
 packages/client/src/pages/admin/index.vue          |   6 +-
 .../src/pages/admin/integrations-discord.vue       |  84 -----------------
 .../client/src/pages/admin/integrations-github.vue |  84 -----------------
 .../src/pages/admin/integrations-twitter.vue       |  84 -----------------
 .../src/pages/admin/integrations.discord.vue       |  84 +++++++++++++++++
 .../client/src/pages/admin/integrations.github.vue |  84 +++++++++++++++++
 .../src/pages/admin/integrations.twitter.vue       |  84 +++++++++++++++++
 packages/client/src/pages/admin/integrations.vue   |  34 ++++---
 packages/client/src/pages/admin/other-settings.vue |  45 ++++-----
 packages/client/src/pages/admin/proxy-account.vue  |  38 +++-----
 packages/client/src/pages/admin/queue.vue          |  10 +-
 packages/client/src/pages/admin/security.vue       |  15 ++-
 packages/client/src/pages/settings/deck.vue        |  32 +++----
 15 files changed, 484 insertions(+), 402 deletions(-)
 create mode 100644 packages/client/src/components/form/folder.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
 create mode 100644 packages/client/src/pages/admin/integrations.discord.vue
 create mode 100644 packages/client/src/pages/admin/integrations.github.vue
 create mode 100644 packages/client/src/pages/admin/integrations.twitter.vue

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/src/components/form/folder.vue b/packages/client/src/components/form/folder.vue
new file mode 100644
index 0000000000..fe12202014
--- /dev/null
+++ b/packages/client/src/components/form/folder.vue
@@ -0,0 +1,101 @@
+<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="fas fa-angle-up icon"></i>
+			<i v-else class="fas fa-angle-down icon"></i>
+		</span>
+	</div>
+	<keep-alive>
+		<div v-if="openedAtLeastOnce" v-show="opened" class="body">
+			<MkSpacer :margin-min="14" :margin-max="22">
+				<slot></slot>
+			</MkSpacer>
+		</div>
+	</keep-alive>
+</div>
+</template>
+
+<script lang="ts" setup>
+let opened = $ref(false);
+let openedAtLeastOnce = $ref(false);
+
+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: 12px 14px 12px 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/pages/admin/bot-protection.vue b/packages/client/src/pages/admin/bot-protection.vue
index 5a97083841..81b09fb4d9 100644
--- a/packages/client/src/pages/admin/bot-protection.vue
+++ b/packages/client/src/pages/admin/bot-protection.vue
@@ -1,70 +1,55 @@
 <template>
-<FormBase>
+<div>
 	<FormSuspense :p="init">
-		<FormRadios v-model="provider">
-			<template #desc><i class="fas fa-shield-alt"></i> {{ $ts.botProtection }}</template>
-			<option :value="null">{{ $ts.none }} ({{ $ts.notRecommended }})</option>
-			<option value="hcaptcha">hCaptcha</option>
-			<option value="recaptcha">reCAPTCHA</option>
-		</FormRadios>
+		<div class="_formRoot">
+			<FormRadios v-model="provider" class="_formBlock">
+				<option :value="null">{{ $ts.none }} ({{ $ts.notRecommended }})</option>
+				<option value="hcaptcha">hCaptcha</option>
+				<option value="recaptcha">reCAPTCHA</option>
+			</FormRadios>
 
-		<template v-if="provider === 'hcaptcha'">
-			<div v-sticky-container class="_debobigegoItem _debobigegoNoConcat">
-				<div class="_debobigegoLabel">hCaptcha</div>
-				<div class="main">
-					<FormInput v-model="hcaptchaSiteKey">
-						<template #prefix><i class="fas fa-key"></i></template>
-						<span>{{ $ts.hcaptchaSiteKey }}</span>
-					</FormInput>
-					<FormInput v-model="hcaptchaSecretKey">
-						<template #prefix><i class="fas fa-key"></i></template>
-						<span>{{ $ts.hcaptchaSecretKey }}</span>
-					</FormInput>
-				</div>
-			</div>
-			<div v-sticky-container class="_debobigegoItem _debobigegoNoConcat">
-				<div class="_debobigegoLabel">{{ $ts.preview }}</div>
-				<div class="_debobigegoPanel" style="padding: var(--debobigegoContentHMargin);">
+			<template v-if="provider === 'hcaptcha'">
+				<FormInput v-model="hcaptchaSiteKey" class="_formBlock">
+					<template #prefix><i class="fas fa-key"></i></template>
+					<template #label>{{ $ts.hcaptchaSiteKey }}</template>
+				</FormInput>
+				<FormInput v-model="hcaptchaSecretKey" class="_formBlock">
+					<template #prefix><i class="fas fa-key"></i></template>
+					<template #label>{{ $ts.hcaptchaSecretKey }}</template>
+				</FormInput>
+				<FormSlot class="_formBlock">
+					<template #label>{{ $ts.preview }}</template>
 					<MkCaptcha provider="hcaptcha" :sitekey="hcaptchaSiteKey || '10000000-ffff-ffff-ffff-000000000001'"/>
-				</div>
-			</div>
-		</template>
-		<template v-else-if="provider === 'recaptcha'">
-			<div v-sticky-container class="_debobigegoItem _debobigegoNoConcat">
-				<div class="_debobigegoLabel">reCAPTCHA</div>
-				<div class="main">
-					<FormInput v-model="recaptchaSiteKey">
-						<template #prefix><i class="fas fa-key"></i></template>
-						<span>{{ $ts.recaptchaSiteKey }}</span>
-					</FormInput>
-					<FormInput v-model="recaptchaSecretKey">
-						<template #prefix><i class="fas fa-key"></i></template>
-						<span>{{ $ts.recaptchaSecretKey }}</span>
-					</FormInput>
-				</div>
-			</div>
-			<div v-if="recaptchaSiteKey" v-sticky-container class="_debobigegoItem _debobigegoNoConcat">
-				<div class="_debobigegoLabel">{{ $ts.preview }}</div>
-				<div class="_debobigegoPanel" style="padding: var(--debobigegoContentHMargin);">
+				</FormSlot>
+			</template>
+			<template v-else-if="provider === 'recaptcha'">
+				<FormInput v-model="recaptchaSiteKey" class="_formBlock">
+					<template #prefix><i class="fas fa-key"></i></template>
+					<template #label>{{ $ts.recaptchaSiteKey }}</template>
+				</FormInput>
+				<FormInput v-model="recaptchaSecretKey" class="_formBlock">
+					<template #prefix><i class="fas fa-key"></i></template>
+					<template #label>{{ $ts.recaptchaSecretKey }}</template>
+				</FormInput>
+				<FormSlot v-if="recaptchaSiteKey" class="_formBlock">
+					<template #label>{{ $ts.preview }}</template>
 					<MkCaptcha provider="recaptcha" :sitekey="recaptchaSiteKey"/>
-				</div>
-			</div>
-		</template>
+				</FormSlot>
+			</template>
 
-		<FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+			<FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+		</div>
 	</FormSuspense>
-</FormBase>
+</div>
 </template>
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import FormRadios from '@/components/debobigego/radios.vue';
-import FormInput from '@/components/debobigego/input.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormInfo from '@/components/debobigego/info.vue';
-import FormSuspense from '@/components/debobigego/suspense.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/ui/button.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import FormSlot from '@/components/form/slot.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
@@ -73,11 +58,9 @@ export default defineComponent({
 	components: {
 		FormRadios,
 		FormInput,
-		FormBase,
-		FormGroup,
 		FormButton,
-		FormInfo,
 		FormSuspense,
+		FormSlot,
 		MkCaptcha: defineAsyncComponent(() => import('@/components/captcha.vue')),
 	},
 
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index 935b785b08..a628ce87ae 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -10,7 +10,7 @@
 				</div>
 
 				<MkInfo v-if="noMaintainerInformation" warn class="info">{{ $ts.noMaintainerInformationWarning }} <MkA to="/admin/settings" class="_link">{{ $ts.configure }}</MkA></MkInfo>
-				<MkInfo v-if="noBotProtection" warn class="info">{{ $ts.noBotProtectionWarning }} <MkA to="/admin/bot-protection" class="_link">{{ $ts.configure }}</MkA></MkInfo>
+				<MkInfo v-if="noBotProtection" warn class="info">{{ $ts.noBotProtectionWarning }} <MkA to="/admin/security" class="_link">{{ $ts.configure }}</MkA></MkInfo>
 
 				<MkSuperMenu :def="menuDef" :grid="page == null"></MkSuperMenu>
 			</div>
@@ -228,13 +228,9 @@ export default defineComponent({
 				case 'email-settings': return defineAsyncComponent(() => import('./email-settings.vue'));
 				case 'object-storage': return defineAsyncComponent(() => import('./object-storage.vue'));
 				case 'security': return defineAsyncComponent(() => import('./security.vue'));
-				case 'bot-protection': return defineAsyncComponent(() => import('./bot-protection.vue'));
 				case 'service-worker': return defineAsyncComponent(() => import('./service-worker.vue'));
 				case 'relays': return defineAsyncComponent(() => import('./relays.vue'));
 				case 'integrations': return defineAsyncComponent(() => import('./integrations.vue'));
-				case 'integrations/twitter': return defineAsyncComponent(() => import('./integrations-twitter.vue'));
-				case 'integrations/github': return defineAsyncComponent(() => import('./integrations-github.vue'));
-				case 'integrations/discord': return defineAsyncComponent(() => import('./integrations-discord.vue'));
 				case 'instance-block': return defineAsyncComponent(() => import('./instance-block.vue'));
 				case 'proxy-account': return defineAsyncComponent(() => import('./proxy-account.vue'));
 				case 'other-settings': return defineAsyncComponent(() => import('./other-settings.vue'));
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 9367ef04f1..0000000000
--- a/packages/client/src/pages/admin/integrations-discord.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-	<FormSuspense :p="init">
-		<FormSwitch v-model="enableDiscordIntegration" class="_formBlock">
-			<template #label>{{ $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="fas fa-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 #label>Client Secret</template>
-			</FormInput>
-		</template>
-
-		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
-	</FormSuspense>
-</MkSpacer>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/ui/button.vue';
-import FormInfo from '@/components/ui/info.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import * as symbols from '@/symbols';
-import { fetchInstance } from '@/instance';
-
-export default defineComponent({
-	components: {
-		FormSwitch,
-		FormInput,
-		FormInfo,
-		FormButton,
-		FormSuspense,
-	},
-
-	emits: ['info'],
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: 'Discord',
-				icon: 'fab fa-discord'
-			},
-			enableDiscordIntegration: false,
-			discordClientId: null,
-			discordClientSecret: null,
-		}
-	},
-
-	async mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
-	methods: {
-		async init() {
-			const meta = await os.api('meta', { detail: true });
-			this.uri = meta.uri;
-			this.enableDiscordIntegration = meta.enableDiscordIntegration;
-			this.discordClientId = meta.discordClientId;
-			this.discordClientSecret = meta.discordClientSecret;
-		},
-		save() {
-			os.apiWithDialog('admin/update-meta', {
-				enableDiscordIntegration: this.enableDiscordIntegration,
-				discordClientId: this.discordClientId,
-				discordClientSecret: this.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 7c257b6ec8..0000000000
--- a/packages/client/src/pages/admin/integrations-github.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-	<FormSuspense :p="init">
-		<FormSwitch v-model="enableGithubIntegration" class="_formBlock">
-			<template #label>{{ $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="fas fa-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 #label>Client Secret</template>
-			</FormInput>
-		</template>
-
-		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
-	</FormSuspense>
-</MkSpacer>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/ui/button.vue';
-import FormInfo from '@/components/ui/info.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import * as symbols from '@/symbols';
-import { fetchInstance } from '@/instance';
-
-export default defineComponent({
-	components: {
-		FormSwitch,
-		FormInput,
-		FormInfo,
-		FormButton,
-		FormSuspense,
-	},
-
-	emits: ['info'],
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: 'GitHub',
-				icon: 'fab fa-github'
-			},
-			enableGithubIntegration: false,
-			githubClientId: null,
-			githubClientSecret: null,
-		}
-	},
-
-	async mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
-	methods: {
-		async init() {
-			const meta = await os.api('meta', { detail: true });
-			this.uri = meta.uri;
-			this.enableGithubIntegration = meta.enableGithubIntegration;
-			this.githubClientId = meta.githubClientId;
-			this.githubClientSecret = meta.githubClientSecret;
-		},
-		save() {
-			os.apiWithDialog('admin/update-meta', {
-				enableGithubIntegration: this.enableGithubIntegration,
-				githubClientId: this.githubClientId,
-				githubClientSecret: this.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 4709103ee6..0000000000
--- a/packages/client/src/pages/admin/integrations-twitter.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
-	<FormSuspense :p="init">
-		<FormSwitch v-model="enableTwitterIntegration" class="_formBlock">
-			<template #label>{{ $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="fas fa-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 #label>Consumer Secret</template>
-			</FormInput>
-		</template>
-
-		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
-	</FormSuspense>
-</MkSpacer>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormInput from '@/components/form/input.vue';
-import FormButton from '@/components/ui/button.vue';
-import FormInfo from '@/components/ui/info.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os';
-import * as symbols from '@/symbols';
-import { fetchInstance } from '@/instance';
-
-export default defineComponent({
-	components: {
-		FormSwitch,
-		FormInput,
-		FormInfo,
-		FormButton,
-		FormSuspense,
-	},
-
-	emits: ['info'],
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: 'Twitter',
-				icon: 'fab fa-twitter'
-			},
-			enableTwitterIntegration: false,
-			twitterConsumerKey: null,
-			twitterConsumerSecret: null,
-		}
-	},
-
-	async mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
-	methods: {
-		async init() {
-			const meta = await os.api('meta', { detail: true });
-			this.uri = meta.uri;
-			this.enableTwitterIntegration = meta.enableTwitterIntegration;
-			this.twitterConsumerKey = meta.twitterConsumerKey;
-			this.twitterConsumerSecret = meta.twitterConsumerSecret;
-		},
-		save() {
-			os.apiWithDialog('admin/update-meta', {
-				enableTwitterIntegration: this.enableTwitterIntegration,
-				twitterConsumerKey: this.twitterConsumerKey,
-				twitterConsumerSecret: this.twitterConsumerSecret,
-			}).then(() => {
-				fetchInstance();
-			});
-		}
-	}
-});
-</script>
diff --git a/packages/client/src/pages/admin/integrations.discord.vue b/packages/client/src/pages/admin/integrations.discord.vue
new file mode 100644
index 0000000000..8303afa3b0
--- /dev/null
+++ b/packages/client/src/pages/admin/integrations.discord.vue
@@ -0,0 +1,84 @@
+<template>
+<FormSuspense :p="init">
+	<div class="_formRoot">
+		<FormSwitch v-model="enableDiscordIntegration" class="_formBlock">
+			<template #label>{{ $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="fas fa-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 #label>Client Secret</template>
+			</FormInput>
+		</template>
+
+		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+	</div>
+</FormSuspense>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/ui/button.vue';
+import FormInfo from '@/components/ui/info.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import * as os from '@/os';
+import * as symbols from '@/symbols';
+import { fetchInstance } from '@/instance';
+
+export default defineComponent({
+	components: {
+		FormSwitch,
+		FormInput,
+		FormInfo,
+		FormButton,
+		FormSuspense,
+	},
+
+	emits: ['info'],
+
+	data() {
+		return {
+			[symbols.PAGE_INFO]: {
+				title: 'Discord',
+				icon: 'fab fa-discord'
+			},
+			enableDiscordIntegration: false,
+			discordClientId: null,
+			discordClientSecret: null,
+		}
+	},
+
+	async mounted() {
+		this.$emit('info', this[symbols.PAGE_INFO]);
+	},
+
+	methods: {
+		async init() {
+			const meta = await os.api('meta', { detail: true });
+			this.uri = meta.uri;
+			this.enableDiscordIntegration = meta.enableDiscordIntegration;
+			this.discordClientId = meta.discordClientId;
+			this.discordClientSecret = meta.discordClientSecret;
+		},
+		save() {
+			os.apiWithDialog('admin/update-meta', {
+				enableDiscordIntegration: this.enableDiscordIntegration,
+				discordClientId: this.discordClientId,
+				discordClientSecret: this.discordClientSecret,
+			}).then(() => {
+				fetchInstance();
+			});
+		}
+	}
+});
+</script>
diff --git a/packages/client/src/pages/admin/integrations.github.vue b/packages/client/src/pages/admin/integrations.github.vue
new file mode 100644
index 0000000000..c0316c317a
--- /dev/null
+++ b/packages/client/src/pages/admin/integrations.github.vue
@@ -0,0 +1,84 @@
+<template>
+<FormSuspense :p="init">
+	<div class="_formRoot">
+		<FormSwitch v-model="enableGithubIntegration" class="_formBlock">
+			<template #label>{{ $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="fas fa-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 #label>Client Secret</template>
+			</FormInput>
+		</template>
+
+		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+	</div>
+</FormSuspense>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/ui/button.vue';
+import FormInfo from '@/components/ui/info.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import * as os from '@/os';
+import * as symbols from '@/symbols';
+import { fetchInstance } from '@/instance';
+
+export default defineComponent({
+	components: {
+		FormSwitch,
+		FormInput,
+		FormInfo,
+		FormButton,
+		FormSuspense,
+	},
+
+	emits: ['info'],
+
+	data() {
+		return {
+			[symbols.PAGE_INFO]: {
+				title: 'GitHub',
+				icon: 'fab fa-github'
+			},
+			enableGithubIntegration: false,
+			githubClientId: null,
+			githubClientSecret: null,
+		}
+	},
+
+	async mounted() {
+		this.$emit('info', this[symbols.PAGE_INFO]);
+	},
+
+	methods: {
+		async init() {
+			const meta = await os.api('meta', { detail: true });
+			this.uri = meta.uri;
+			this.enableGithubIntegration = meta.enableGithubIntegration;
+			this.githubClientId = meta.githubClientId;
+			this.githubClientSecret = meta.githubClientSecret;
+		},
+		save() {
+			os.apiWithDialog('admin/update-meta', {
+				enableGithubIntegration: this.enableGithubIntegration,
+				githubClientId: this.githubClientId,
+				githubClientSecret: this.githubClientSecret,
+			}).then(() => {
+				fetchInstance();
+			});
+		}
+	}
+});
+</script>
diff --git a/packages/client/src/pages/admin/integrations.twitter.vue b/packages/client/src/pages/admin/integrations.twitter.vue
new file mode 100644
index 0000000000..5feabcc39d
--- /dev/null
+++ b/packages/client/src/pages/admin/integrations.twitter.vue
@@ -0,0 +1,84 @@
+<template>
+<FormSuspense :p="init">
+	<div class="_formRoot">
+		<FormSwitch v-model="enableTwitterIntegration" class="_formBlock">
+			<template #label>{{ $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="fas fa-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 #label>Consumer Secret</template>
+			</FormInput>
+		</template>
+
+		<FormButton primary class="_formBlock" @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+	</div>
+</FormSuspense>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormInput from '@/components/form/input.vue';
+import FormButton from '@/components/ui/button.vue';
+import FormInfo from '@/components/ui/info.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import * as os from '@/os';
+import * as symbols from '@/symbols';
+import { fetchInstance } from '@/instance';
+
+export default defineComponent({
+	components: {
+		FormSwitch,
+		FormInput,
+		FormInfo,
+		FormButton,
+		FormSuspense,
+	},
+
+	emits: ['info'],
+
+	data() {
+		return {
+			[symbols.PAGE_INFO]: {
+				title: 'Twitter',
+				icon: 'fab fa-twitter'
+			},
+			enableTwitterIntegration: false,
+			twitterConsumerKey: null,
+			twitterConsumerSecret: null,
+		}
+	},
+
+	async mounted() {
+		this.$emit('info', this[symbols.PAGE_INFO]);
+	},
+
+	methods: {
+		async init() {
+			const meta = await os.api('meta', { detail: true });
+			this.uri = meta.uri;
+			this.enableTwitterIntegration = meta.enableTwitterIntegration;
+			this.twitterConsumerKey = meta.twitterConsumerKey;
+			this.twitterConsumerSecret = meta.twitterConsumerSecret;
+		},
+		save() {
+			os.apiWithDialog('admin/update-meta', {
+				enableTwitterIntegration: this.enableTwitterIntegration,
+				twitterConsumerKey: this.twitterConsumerKey,
+				twitterConsumerSecret: this.twitterConsumerSecret,
+			}).then(() => {
+				fetchInstance();
+			});
+		}
+	}
+});
+</script>
diff --git a/packages/client/src/pages/admin/integrations.vue b/packages/client/src/pages/admin/integrations.vue
index 6a6432d2e1..455fb6f4d6 100644
--- a/packages/client/src/pages/admin/integrations.vue
+++ b/packages/client/src/pages/admin/integrations.vue
@@ -1,36 +1,48 @@
 <template>
 <MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 	<FormSuspense :p="init">
-		<FormLink to="/admin/integrations/twitter" class="_formBlock">
-			<i class="fab fa-twitter"></i> Twitter
+		<FormFolder class="_formBlock">
+			<template #icon><i class="fab fa-twitter"></i></template>
+			<template #label>Twitter</template>
 			<template #suffix>{{ enableTwitterIntegration ? $ts.enabled : $ts.disabled }}</template>
-		</FormLink>
-		<FormLink to="/admin/integrations/github" class="_formBlock">
-			<i class="fab fa-github"></i> GitHub
+			<XTwitter/>
+		</FormFolder>
+		<FormFolder to="/admin/integrations/github" class="_formBlock">
+			<template #icon><i class="fab fa-github"></i></template>
+			<template #label>GitHub</template>
 			<template #suffix>{{ enableGithubIntegration ? $ts.enabled : $ts.disabled }}</template>
-		</FormLink>
-		<FormLink to="/admin/integrations/discord" class="_formBlock">
-			<i class="fab fa-discord"></i> Discord
+			<XGithub/>
+		</FormFolder>
+		<FormFolder to="/admin/integrations/discord" class="_formBlock">
+			<template #icon><i class="fab fa-discord"></i></template>
+			<template #label>Discord</template>
 			<template #suffix>{{ enableDiscordIntegration ? $ts.enabled : $ts.disabled }}</template>
-		</FormLink>
+			<XDiscord/>
+		</FormFolder>
 	</FormSuspense>
 </MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormLink from '@/components/form/link.vue';
+import FormFolder from '@/components/form/folder.vue';
 import FormSecion from '@/components/form/section.vue';
 import FormSuspense from '@/components/form/suspense.vue';
+import XTwitter from './integrations.twitter.vue';
+import XGithub from './integrations.github.vue';
+import XDiscord from './integrations.discord.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
 
 export default defineComponent({
 	components: {
-		FormLink,
+		FormFolder,
 		FormSecion,
 		FormSuspense,
+		XTwitter,
+		XGithub,
+		XDiscord,
 	},
 
 	emits: ['info'],
diff --git a/packages/client/src/pages/admin/other-settings.vue b/packages/client/src/pages/admin/other-settings.vue
index eb214a21c8..eb47a3fa1f 100644
--- a/packages/client/src/pages/admin/other-settings.vue
+++ b/packages/client/src/pages/admin/other-settings.vue
@@ -1,34 +1,31 @@
 <template>
-<FormBase>
+<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 	<FormSuspense :p="init">
-		<FormGroup>
-			<FormInput v-model="summalyProxy">
+		<FormSection>
+			<FormInput v-model="summalyProxy" class="_formBlock">
 				<template #prefix><i class="fas fa-link"></i></template>
-				Summaly Proxy URL
+				<template #label>Summaly Proxy URL</template>
 			</FormInput>
-		</FormGroup>
-		<FormGroup>
-			<FormInput v-model="deeplAuthKey">
+		</FormSection>
+		<FormSection>
+			<FormInput v-model="deeplAuthKey" class="_formBlock">
 				<template #prefix><i class="fas fa-key"></i></template>
-				DeepL Auth Key
+				<template #label>DeepL Auth Key</template>
 			</FormInput>
-			<FormSwitch v-model="deeplIsPro">
-				Pro account
+			<FormSwitch v-model="deeplIsPro" class="_formBlock">
+				<template #label>Pro account</template>
 			</FormSwitch>
-		</FormGroup>
-		<FormButton primary @click="save"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
+		</FormSection>
 	</FormSuspense>
-</FormBase>
+</MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@/components/debobigego/switch.vue';
-import FormInput from '@/components/debobigego/input.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormSuspense from '@/components/debobigego/suspense.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormInput from '@/components/form/input.vue';
+import FormSection from '@/components/form/section.vue';
+import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
@@ -37,9 +34,7 @@ export default defineComponent({
 	components: {
 		FormSwitch,
 		FormInput,
-		FormBase,
-		FormGroup,
-		FormButton,
+		FormSection,
 		FormSuspense,
 	},
 
@@ -51,6 +46,12 @@ export default defineComponent({
 				title: this.$ts.other,
 				icon: 'fas fa-cogs',
 				bg: 'var(--bg)',
+				actions: [{
+					asFullButton: true,
+					icon: 'fas fa-check',
+					text: this.$ts.save,
+					handler: this.save,
+				}],
 			},
 			summalyProxy: '',
 			deeplAuthKey: '',
diff --git a/packages/client/src/pages/admin/proxy-account.vue b/packages/client/src/pages/admin/proxy-account.vue
index 14ef92a747..9878df9122 100644
--- a/packages/client/src/pages/admin/proxy-account.vue
+++ b/packages/client/src/pages/admin/proxy-account.vue
@@ -1,42 +1,32 @@
 <template>
-<FormBase>
+<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 	<FormSuspense :p="init">
-		<FormGroup>
-			<FormKeyValueView>
-				<template #key>{{ $ts.proxyAccount }}</template>
-				<template #value>{{ proxyAccount ? `@${proxyAccount.username}` : $ts.none }}</template>
-			</FormKeyValueView>
-			<template #caption>{{ $ts.proxyAccountDescription }}</template>
-		</FormGroup>
+		<MkInfo class="_formBlock">{{ $ts.proxyAccountDescription }}</MkInfo>
+		<MkKeyValue class="_formBlock">
+			<template #key>{{ $ts.proxyAccount }}</template>
+			<template #value>{{ proxyAccount ? `@${proxyAccount.username}` : $ts.none }}</template>
+		</MkKeyValue>
 
-		<FormButton primary @click="chooseProxyAccount">{{ $ts.selectAccount }}</FormButton>
+		<FormButton primary class="_formBlock" @click="chooseProxyAccount">{{ $ts.selectAccount }}</FormButton>
 	</FormSuspense>
-</FormBase>
+</MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormKeyValueView from '@/components/debobigego/key-value-view.vue';
-import FormInput from '@/components/debobigego/input.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormTextarea from '@/components/debobigego/textarea.vue';
-import FormInfo from '@/components/debobigego/info.vue';
-import FormSuspense from '@/components/debobigego/suspense.vue';
+import MkKeyValue from '@/components/key-value.vue';
+import FormButton from '@/components/ui/button.vue';
+import MkInfo from '@/components/ui/info.vue';
+import FormSuspense from '@/components/form/suspense.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
 
 export default defineComponent({
 	components: {
-		FormKeyValueView,
-		FormInput,
-		FormBase,
-		FormGroup,
+		MkKeyValue,
 		FormButton,
-		FormTextarea,
-		FormInfo,
+		MkInfo,
 		FormSuspense,
 	},
 
diff --git a/packages/client/src/pages/admin/queue.vue b/packages/client/src/pages/admin/queue.vue
index 49f3c63e82..719a3c2651 100644
--- a/packages/client/src/pages/admin/queue.vue
+++ b/packages/client/src/pages/admin/queue.vue
@@ -1,29 +1,25 @@
 <template>
-<FormBase>
+<MkSpacer :content-max="800">
 	<XQueue :connection="connection" domain="inbox">
 		<template #title>In</template>
 	</XQueue>
 	<XQueue :connection="connection" domain="deliver">
 		<template #title>Out</template>
 	</XQueue>
-	<FormButton danger @click="clear()"><i class="fas fa-trash-alt"></i> {{ $ts.clearQueue }}</FormButton>
-</FormBase>
+	<MkButton danger @click="clear()"><i class="fas fa-trash-alt"></i> {{ $ts.clearQueue }}</MkButton>
+</MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent, markRaw } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 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({
 	components: {
-		FormBase,
-		FormButton,
 		MkButton,
 		XQueue,
 	},
diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue
index 91b10b68cc..d6ca9e0cba 100644
--- a/packages/client/src/pages/admin/security.vue
+++ b/packages/client/src/pages/admin/security.vue
@@ -2,12 +2,15 @@
 <MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 	<FormSuspense :p="init">
 		<div class="_formRoot">
-			<FormLink to="/admin/bot-protection" class="_formBlock">
-				<i class="fas fa-shield-alt"></i> {{ $ts.botProtection }}
+			<FormFolder class="_formBlock">
+				<template #icon><i class="fas fa-shield-alt"></i></template>
+				<template #label>{{ $ts.botProtection }}</template>
 				<template v-if="enableHcaptcha" #suffix>hCaptcha</template>
 				<template v-else-if="enableRecaptcha" #suffix>reCAPTCHA</template>
 				<template v-else #suffix>{{ $ts.none }} ({{ $ts.notRecommended }})</template>
-			</FormLink>
+
+				<XBotProtection/>
+			</FormFolder>
 		</div>
 	</FormSuspense>
 </MkSpacer>
@@ -15,22 +18,24 @@
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import FormLink from '@/components/form/link.vue';
+import FormFolder from '@/components/form/folder.vue';
 import FormSwitch from '@/components/form/switch.vue';
 import FormInfo from '@/components/ui/info.vue';
 import FormSuspense from '@/components/form/suspense.vue';
 import FormSection from '@/components/form/section.vue';
+import XBotProtection from './bot-protection.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import { fetchInstance } from '@/instance';
 
 export default defineComponent({
 	components: {
-		FormLink,
+		FormFolder,
 		FormSwitch,
 		FormInfo,
 		FormSection,
 		FormSuspense,
+		XBotProtection,
 	},
 
 	emits: ['info'],
diff --git a/packages/client/src/pages/settings/deck.vue b/packages/client/src/pages/settings/deck.vue
index bc82b0ca84..e290b095ac 100644
--- a/packages/client/src/pages/settings/deck.vue
+++ b/packages/client/src/pages/settings/deck.vue
@@ -1,42 +1,41 @@
 <template>
-<FormBase>
+<div class="_formRoot">
 	<FormGroup>
 		<template #label>{{ $ts.defaultNavigationBehaviour }}</template>
 		<FormSwitch v-model="navWindow">{{ $ts.openInWindow }}</FormSwitch>
 	</FormGroup>
 
-	<FormSwitch v-model="alwaysShowMainColumn">{{ $ts._deck.alwaysShowMainColumn }}</FormSwitch>
+	<FormSwitch v-model="alwaysShowMainColumn" class="_formBlock">{{ $ts._deck.alwaysShowMainColumn }}</FormSwitch>
 
-	<FormRadios v-model="columnAlign">
-		<template #desc>{{ $ts._deck.columnAlign }}</template>
+	<FormRadios v-model="columnAlign" class="_formBlock">
+		<template #label>{{ $ts._deck.columnAlign }}</template>
 		<option value="left">{{ $ts.left }}</option>
 		<option value="center">{{ $ts.center }}</option>
 	</FormRadios>
 
-	<FormRadios v-model="columnHeaderHeight">
-		<template #desc>{{ $ts._deck.columnHeaderHeight }}</template>
+	<FormRadios v-model="columnHeaderHeight" class="_formBlock">
+		<template #label>{{ $ts._deck.columnHeaderHeight }}</template>
 		<option :value="42">{{ $ts.narrow }}</option>
 		<option :value="45">{{ $ts.medium }}</option>
 		<option :value="48">{{ $ts.wide }}</option>
 	</FormRadios>
 
-	<FormInput v-model="columnMargin" type="number">
-		<span>{{ $ts._deck.columnMargin }}</span>
+	<FormInput v-model="columnMargin" type="number" class="_formBlock">
+		<template #label>{{ $ts._deck.columnMargin }}</template>
 		<template #suffix>px</template>
 	</FormInput>
 
-	<FormLink @click="setProfile">{{ $ts._deck.profile }}<template #suffix>{{ profile }}</template></FormLink>
-</FormBase>
+	<FormLink class="_formBlock" @click="setProfile">{{ $ts._deck.profile }}<template #suffix>{{ profile }}</template></FormLink>
+</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSwitch from '@/components/debobigego/switch.vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormRadios from '@/components/debobigego/radios.vue';
-import FormInput from '@/components/debobigego/input.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.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 FormGroup from '@/components/form/group.vue';
 import { deckStore } from '@/ui/deck/deck-store';
 import * as os from '@/os';
 import { unisonReload } from '@/scripts/unison-reload';
@@ -48,7 +47,6 @@ export default defineComponent({
 		FormLink,
 		FormInput,
 		FormRadios,
-		FormBase,
 		FormGroup,
 	},
 
-- 
cgit v1.2.3-freya


From 76b2561893cfbfbb6bd33fe921d97d0645e5df74 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 4 Jan 2022 21:37:16 +0900
Subject: tweak ui

---
 packages/client/src/pages/admin/database.vue       |  31 ++---
 .../client/src/pages/settings/account-info.vue     | 150 ++++++++++-----------
 2 files changed, 79 insertions(+), 102 deletions(-)

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/src/pages/admin/database.vue b/packages/client/src/pages/admin/database.vue
index b09f1ad867..fc9a3e9690 100644
--- a/packages/client/src/pages/admin/database.vue
+++ b/packages/client/src/pages/admin/database.vue
@@ -1,28 +1,18 @@
 <template>
-<FormBase>
+<MkSpacer :content-max="700" :margin-min="16" :margin-max="32">
 	<FormSuspense v-slot="{ result: database }" :p="databasePromiseFactory">
-		<FormGroup v-for="table in database" :key="table[0]">
-			<template #label>{{ table[0] }}</template>
-			<FormKeyValueView>
-				<template #key>Size</template>
-				<template #value>{{ bytes(table[1].size) }}</template>
-			</FormKeyValueView>
-			<FormKeyValueView>
-				<template #key>Records</template>
-				<template #value>{{ number(table[1].count) }}</template>
-			</FormKeyValueView>
-		</FormGroup>
+		<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>
-</FormBase>
+</MkSpacer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import FormSuspense from '@/components/debobigego/suspense.vue';
-import FormKeyValueView from '@/components/debobigego/key-value-view.vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
+import FormSuspense from '@/components/form/suspense.vue';
+import MkKeyValue from '@/components/key-value.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
 import bytes from '@/filters/bytes';
@@ -31,10 +21,7 @@ import number from '@/filters/number';
 export default defineComponent({
 	components: {
 		FormSuspense,
-		FormKeyValueView,
-		FormBase,
-		FormGroup,
-		FormLink,
+		MkKeyValue,
 	},
 
 	emits: ['info'],
diff --git a/packages/client/src/pages/settings/account-info.vue b/packages/client/src/pages/settings/account-info.vue
index f3d5e2f2c3..1d6afd9d58 100644
--- a/packages/client/src/pages/settings/account-info.vue
+++ b/packages/client/src/pages/settings/account-info.vue
@@ -1,144 +1,139 @@
 <template>
-<FormBase>
-	<FormKeyValueView>
+<div class="_formRoot">
+	<MkKeyValue>
 		<template #key>ID</template>
 		<template #value><span class="_monospace">{{ $i.id }}</span></template>
-	</FormKeyValueView>
+	</MkKeyValue>
 
-	<FormGroup>
-		<FormKeyValueView>
+	<FormSection>
+		<MkKeyValue>
 			<template #key>{{ $ts.registeredDate }}</template>
 			<template #value><MkTime :time="$i.createdAt" mode="detail"/></template>
-		</FormKeyValueView>
-	</FormGroup>
+		</MkKeyValue>
+	</FormSection>
 
-	<FormGroup v-if="stats">
+	<FormSection v-if="stats">
 		<template #label>{{ $ts.statistics }}</template>
-		<FormKeyValueView>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.notesCount }}</template>
 			<template #value>{{ number(stats.notesCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.repliesCount }}</template>
 			<template #value>{{ number(stats.repliesCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.renotesCount }}</template>
 			<template #value>{{ number(stats.renotesCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.repliedCount }}</template>
 			<template #value>{{ number(stats.repliedCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.renotedCount }}</template>
 			<template #value>{{ number(stats.renotedCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.pollVotesCount }}</template>
 			<template #value>{{ number(stats.pollVotesCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.pollVotedCount }}</template>
 			<template #value>{{ number(stats.pollVotedCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.sentReactionsCount }}</template>
 			<template #value>{{ number(stats.sentReactionsCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.receivedReactionsCount }}</template>
 			<template #value>{{ number(stats.receivedReactionsCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.noteFavoritesCount }}</template>
 			<template #value>{{ number(stats.noteFavoritesCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.followingCount }}</template>
 			<template #value>{{ number(stats.followingCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.followingCount }} ({{ $ts.local }})</template>
 			<template #value>{{ number(stats.localFollowingCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.followingCount }} ({{ $ts.remote }})</template>
 			<template #value>{{ number(stats.remoteFollowingCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.followersCount }}</template>
 			<template #value>{{ number(stats.followersCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.followersCount }} ({{ $ts.local }})</template>
 			<template #value>{{ number(stats.localFollowersCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.followersCount }} ({{ $ts.remote }})</template>
 			<template #value>{{ number(stats.remoteFollowersCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.pageLikesCount }}</template>
 			<template #value>{{ number(stats.pageLikesCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.pageLikedCount }}</template>
 			<template #value>{{ number(stats.pageLikedCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.driveFilesCount }}</template>
 			<template #value>{{ number(stats.driveFilesCount) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.driveUsage }}</template>
 			<template #value>{{ bytes(stats.driveUsage) }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ $ts.reversiCount }}</template>
 			<template #value>{{ number(stats.reversiCount) }}</template>
-		</FormKeyValueView>
-	</FormGroup>
+		</MkKeyValue>
+	</FormSection>
 
-	<FormGroup>
+	<FormSection>
 		<template #label>{{ $ts.other }}</template>
-		<FormKeyValueView>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>emailVerified</template>
 			<template #value>{{ $i.emailVerified ? $ts.yes : $ts.no }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>twoFactorEnabled</template>
 			<template #value>{{ $i.twoFactorEnabled ? $ts.yes : $ts.no }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>securityKeys</template>
 			<template #value>{{ $i.securityKeys ? $ts.yes : $ts.no }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>usePasswordLessLogin</template>
 			<template #value>{{ $i.usePasswordLessLogin ? $ts.yes : $ts.no }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>isModerator</template>
 			<template #value>{{ $i.isModerator ? $ts.yes : $ts.no }}</template>
-		</FormKeyValueView>
-		<FormKeyValueView>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>isAdmin</template>
 			<template #value>{{ $i.isAdmin ? $ts.yes : $ts.no }}</template>
-		</FormKeyValueView>
-	</FormGroup>
-</FormBase>
+		</MkKeyValue>
+	</FormSection>
+</div>
 </template>
 
 <script lang="ts">
 import { defineAsyncComponent, defineComponent } from 'vue';
-import FormSwitch from '@/components/form/switch.vue';
-import FormSelect from '@/components/form/select.vue';
-import FormLink from '@/components/debobigego/link.vue';
-import FormBase from '@/components/debobigego/base.vue';
-import FormGroup from '@/components/debobigego/group.vue';
-import FormButton from '@/components/debobigego/button.vue';
-import FormKeyValueView from '@/components/debobigego/key-value-view.vue';
+import FormSection from '@/components/form/section.vue';
+import MkKeyValue from '@/components/key-value.vue';
 import * as os from '@/os';
 import number from '@/filters/number';
 import bytes from '@/filters/bytes';
@@ -146,13 +141,8 @@ import * as symbols from '@/symbols';
 
 export default defineComponent({
 	components: {
-		FormBase,
-		FormSelect,
-		FormSwitch,
-		FormButton,
-		FormLink,
-		FormGroup,
-		FormKeyValueView,
+		FormSection,
+		MkKeyValue,
 	},
 
 	emits: ['info'],
-- 
cgit v1.2.3-freya


From 1fc2f2e3e476d3151365e1a0d059034df4859494 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 4 Jan 2022 22:51:16 +0900
Subject: tweak ui

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

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/src/pages/settings/other.vue b/packages/client/src/pages/settings/other.vue
index b941c07c6f..acc1fb4d3e 100644
--- a/packages/client/src/pages/settings/other.vue
+++ b/packages/client/src/pages/settings/other.vue
@@ -1,10 +1,10 @@
 <template>
 <div class="_formRoot">
-	<FormSwitch :value="$i.injectFeaturedNote" @update:modelValue="onChangeInjectFeaturedNote" class="_formBlock">
+	<FormSwitch :value="$i.injectFeaturedNote" class="_formBlock" @update:modelValue="onChangeInjectFeaturedNote">
 		{{ $ts.showFeaturedNotesInTimeline }}
 	</FormSwitch>
 
-	<FormSwitch v-model="reportError" class="_formBlock">{{ $ts.sendErrorReports }}<template #desc>{{ $ts.sendErrorReportsDescription }}</template></FormSwitch>
+	<FormSwitch v-model="reportError" class="_formBlock">{{ $ts.sendErrorReports }}<template #caption>{{ $ts.sendErrorReportsDescription }}</template></FormSwitch>
 
 	<FormLink to="/settings/account-info" class="_formBlock">{{ $ts.accountInfo }}</FormLink>
 
-- 
cgit v1.2.3-freya


From 82854236f3006a3b01dc5e90925e92db25ea0a65 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 7 Jan 2022 15:05:45 +0900
Subject: clean up

---
 .../src/components/taskmanager.api-window.vue      |  72 -------
 packages/client/src/components/taskmanager.vue     | 234 ---------------------
 packages/client/src/os.ts                          |  28 +--
 packages/client/src/pages/settings/other.vue       |   5 -
 4 files changed, 1 insertion(+), 338 deletions(-)
 delete mode 100644 packages/client/src/components/taskmanager.api-window.vue
 delete mode 100644 packages/client/src/components/taskmanager.vue

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/src/components/taskmanager.api-window.vue b/packages/client/src/components/taskmanager.api-window.vue
deleted file mode 100644
index 6ec4da3a59..0000000000
--- a/packages/client/src/components/taskmanager.api-window.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-<XWindow ref="window"
-	:initial-width="370"
-	:initial-height="450"
-	:can-resize="true"
-	@close="$refs.window.close()"
-	@closed="$emit('closed')"
->
-	<template #header>Req Viewer</template>
-
-	<div class="rlkneywz">
-		<MkTab v-model="tab" style="border-bottom: solid 0.5px var(--divider);">
-			<option value="req">Request</option>
-			<option value="res">Response</option>
-		</MkTab>
-
-		<code v-if="tab === 'req'" class="_monospace">{{ reqStr }}</code>
-		<code v-if="tab === 'res'" class="_monospace">{{ resStr }}</code>
-	</div>
-</XWindow>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import * as JSON5 from 'json5';
-import XWindow from '@/components/ui/window.vue';
-import MkTab from '@/components/tab.vue';
-
-export default defineComponent({
-	components: {
-		XWindow,
-		MkTab,
-	},
-
-	props: {
-		req: {
-			required: true,
-		}
-	},
-
-	emits: ['closed'],
-
-	data() {
-		return {
-			tab: 'req',
-			reqStr: JSON5.stringify(this.req.req, null, '\t'),
-			resStr: JSON5.stringify(this.req.res, null, '\t'),
-		}
-	},
-
-	methods: {
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.rlkneywz {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-
-	> code {
-		display: block;
-		flex: 1;
-		padding: 8px;
-		overflow: auto;
-		font-size: 0.9em;
-		tab-size: 2;
-		white-space: pre;
-	}
-}
-</style>
diff --git a/packages/client/src/components/taskmanager.vue b/packages/client/src/components/taskmanager.vue
deleted file mode 100644
index c5d2c6d8f8..0000000000
--- a/packages/client/src/components/taskmanager.vue
+++ /dev/null
@@ -1,234 +0,0 @@
-<template>
-<XWindow ref="window" :initial-width="650" :initial-height="420" :can-resize="true" @closed="$emit('closed')">
-	<template #header>
-		<i class="fas fa-terminal" style="margin-right: 0.5em;"></i>Task Manager
-	</template>
-	<div class="qljqmnzj _monospace">
-		<MkTab v-model="tab" style="border-bottom: solid 0.5px var(--divider);">
-			<option value="windows">Windows</option>
-			<option value="stream">Stream</option>
-			<option value="streamPool">Stream (Pool)</option>
-			<option value="api">API</option>
-		</MkTab>
-
-		<div class="content">
-			<div v-if="tab === 'windows'" v-follow class="windows">
-				<div class="header">
-					<div>#ID</div>
-					<div>Component</div>
-					<div>Action</div>
-				</div>
-				<div v-for="p in popups">
-					<div>#{{ p.id }}</div>
-					<div>{{ p.component.name ? p.component.name : '<anonymous>' }}</div>
-					<div><button class="_textButton" @click="killPopup(p)">Kill</button></div>
-				</div>
-			</div>
-			<div v-if="tab === 'stream'" v-follow class="stream">
-				<div class="header">
-					<div>#ID</div>
-					<div>Ch</div>
-					<div>Handle</div>
-					<div>In</div>
-					<div>Out</div>
-				</div>
-				<div v-for="c in connections">
-					<div>#{{ c.id }}</div>
-					<div>{{ c.channel }}</div>
-					<div v-if="c.users !== null">(shared)<span v-if="c.name">{{ ' ' + c.name }}</span></div>
-					<div v-else>{{ c.name ? c.name : '<anonymous>' }}</div>
-					<div>{{ c.in }}</div>
-					<div>{{ c.out }}</div>
-				</div>
-			</div>
-			<div v-if="tab === 'streamPool'" v-follow class="streamPool">
-				<div class="header">
-					<div>#ID</div>
-					<div>Ch</div>
-					<div>Users</div>
-				</div>
-				<div v-for="p in pools">
-					<div>#{{ p.id }}</div>
-					<div>{{ p.channel }}</div>
-					<div>{{ p.users }}</div>
-				</div>
-			</div>
-			<div v-if="tab === 'api'" v-follow class="api">
-				<div class="header">
-					<div>#ID</div>
-					<div>Endpoint</div>
-					<div>State</div>
-				</div>
-				<div v-for="req in apiRequests" @click="showReq(req)">
-					<div>#{{ req.id }}</div>
-					<div>{{ req.endpoint }}</div>
-					<div class="state" :class="req.state">{{ req.state }}</div>
-				</div>
-			</div>
-		</div>
-
-		<footer>
-			<div><span class="label">Windows</span>{{ popups.length }}</div>
-			<div><span class="label">Stream</span>{{ connections.length }}</div>
-			<div><span class="label">Stream (Pool)</span>{{ pools.length }}</div>
-		</footer>
-	</div>
-</XWindow>
-</template>
-
-<script lang="ts">
-import { defineComponent, markRaw, onBeforeUnmount, ref, shallowRef } from 'vue';
-import XWindow from '@/components/ui/window.vue';
-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: {
-		XWindow,
-		MkTab,
-		MkButton,
-	},
-
-	directives: {
-		follow
-	},
-
-	props: {
-	},
-
-	emits: ['closed'],
-
-	setup() {
-		const connections = shallowRef([]);
-		const pools = shallowRef([]);
-		const refreshStreamInfo = () => {
-			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(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 = stream.sharedConnectionPools;
-		};
-		const interval = setInterval(refreshStreamInfo, 1000);
-		onBeforeUnmount(() => {
-			clearInterval(interval);
-		});
-
-		const killPopup = p => {
-			os.popups.value = os.popups.value.filter(x => x !== p);
-		};
-
-		const showReq = req => {
-			os.popup(import('./taskmanager.api-window.vue'), {
-				req: req
-			}, {
-			}, 'closed');
-		};
-
-		return {
-			tab: ref('stream'),
-			popups: os.popups,
-			apiRequests: os.apiRequests,
-			connections,
-			pools,
-			killPopup,
-			showReq,
-		};
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.qljqmnzj {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-
-	> .content {
-		flex: 1;
-		overflow: auto;
-
-		> div {
-			display: table;
-			width: 100%;
-			padding: 16px;
-			box-sizing: border-box;
-
-			> div {
-				display: table-row;
-
-				&:nth-child(even) {
-					//background: rgba(0, 0, 0, 0.1);
-				}
-
-				&.header {
-					opacity: 0.7;
-				}
-
-				> div {
-					display: table-cell;
-					white-space: nowrap;
-
-					&:not(:last-child) {
-						padding-right: 8px;
-					}
-				}
-			}
-
-			&.api {
-				> div {
-					&:not(.header) {
-						cursor: pointer;
-
-						&:hover {
-							color: var(--accent);
-						}
-					}
-
-					> .state {
-						&.pending {
-							color: var(--warn);
-						}
-
-						&.success {
-							color: var(--success);
-						}
-
-						&.failed {
-							color: var(--error);
-						}
-					}
-				}
-			}
-		}
-	}
-
-	> footer {
-		display: flex;
-		width: 100%;
-		padding: 8px 16px;
-		box-sizing: border-box;
-		border-top: solid 0.5px var(--divider);
-		font-size: 0.9em;
-
-		> div {
-			flex: 1;
-
-			> .label {
-				opacity: 0.7;
-				margin-right: 0.5em;
-
-				&:after {
-					content: ":";
-				}
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/os.ts b/packages/client/src/os.ts
index d9400103f5..e6dd4567f7 100644
--- a/packages/client/src/os.ts
+++ b/packages/client/src/os.ts
@@ -4,16 +4,13 @@ import { Component, defineAsyncComponent, markRaw, reactive, Ref, ref } from 'vu
 import { EventEmitter } from 'eventemitter3';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import * as Misskey from 'misskey-js';
-import { apiUrl, debug, url } from '@/config';
+import { apiUrl, url } from '@/config';
 import MkPostFormDialog from '@/components/post-form-dialog.vue';
 import MkWaitingDialog from '@/components/waiting-dialog.vue';
 import { resolve } from '@/router';
 import { $i } from '@/account';
-import { defaultStore } from '@/store';
 
 export const pendingApiRequestsCount = ref(0);
-let apiRequestsCount = 0; // for debug
-export const apiRequests = ref([]); // for debug
 
 const apiClient = new Misskey.api.APIClient({
 	origin: url,
@@ -26,18 +23,6 @@ export const api = ((endpoint: string, data: Record<string, any> = {}, token?: s
 		pendingApiRequestsCount.value--;
 	};
 
-	const log = debug ? reactive({
-		id: ++apiRequestsCount,
-		endpoint,
-		req: markRaw(data),
-		res: null,
-		state: 'pending',
-	}) : null;
-	if (debug) {
-		apiRequests.value.push(log);
-		if (apiRequests.value.length > 128) apiRequests.value.shift();
-	}
-
 	const promise = new Promise((resolve, reject) => {
 		// Append a credential
 		if ($i) (data as any).i = $i.token;
@@ -54,21 +39,10 @@ export const api = ((endpoint: string, data: Record<string, any> = {}, token?: s
 
 			if (res.status === 200) {
 				resolve(body);
-				if (debug) {
-					log!.res = markRaw(JSON.parse(JSON.stringify(body)));
-					log!.state = 'success';
-				}
 			} else if (res.status === 204) {
 				resolve();
-				if (debug) {
-					log!.state = 'success';
-				}
 			} else {
 				reject(body.error);
-				if (debug) {
-					log!.res = markRaw(body.error);
-					log!.state = 'failed';
-				}
 			}
 		}).catch(reject);
 	});
diff --git a/packages/client/src/pages/settings/other.vue b/packages/client/src/pages/settings/other.vue
index acc1fb4d3e..7547013832 100644
--- a/packages/client/src/pages/settings/other.vue
+++ b/packages/client/src/pages/settings/other.vue
@@ -63,11 +63,6 @@ export default defineComponent({
 				injectFeaturedNote: v
 			});
 		},
-
-		taskmanager() {
-			os.popup(import('@/components/taskmanager.vue'), {
-			}, {}, 'closed');
-		},
 	}
 });
 </script>
-- 
cgit v1.2.3-freya


From 586c11251a8c0e7ca9f8f3bbaad9bf745e6ef948 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 9 Jan 2022 21:35:35 +0900
Subject: wip: migrate paging components to composition api

#7681
---
 packages/client/src/components/form/pagination.vue |  44 ----
 packages/client/src/components/notes.vue           | 127 +++-------
 packages/client/src/components/notifications.vue   | 208 ++++++----------
 packages/client/src/components/ui/pagination.vue   | 266 ++++++++++++++++++---
 packages/client/src/components/user-list.vue       | 106 +++-----
 packages/client/src/pages/settings/security.vue    |   8 +-
 packages/client/src/pages/user/index.timeline.vue  |  60 ++---
 packages/client/src/scripts/paging.ts              | 246 -------------------
 8 files changed, 381 insertions(+), 684 deletions(-)
 delete mode 100644 packages/client/src/components/form/pagination.vue
 delete mode 100644 packages/client/src/scripts/paging.ts

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/src/components/form/pagination.vue b/packages/client/src/components/form/pagination.vue
deleted file mode 100644
index 3d3b40a783..0000000000
--- a/packages/client/src/components/form/pagination.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-<FormSlot>
-	<template #label><slot name="label"></slot></template>
-	<div class="abcaccfa">
-		<slot :items="items"></slot>
-		<div v-if="empty" key="_empty_" class="empty">
-			<slot name="empty"></slot>
-		</div>
-		<MkButton v-show="more" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore">
-			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
-			<template v-if="moreFetching"><MkLoading inline/></template>
-		</MkButton>
-	</div>
-</FormSlot>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import MkButton from '@/components/ui/button.vue';
-import FormSlot from './slot.vue';
-import paging from '@/scripts/paging';
-
-export default defineComponent({
-	components: {
-		MkButton,
-		FormSlot,
-	},
-
-	mixins: [
-		paging({}),
-	],
-
-	props: {
-		pagination: {
-			required: true
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-.abcaccfa {
-}
-</style>
diff --git a/packages/client/src/components/notes.vue b/packages/client/src/components/notes.vue
index 4136f72b1b..82703d71c7 100644
--- a/packages/client/src/components/notes.vue
+++ b/packages/client/src/components/notes.vue
@@ -1,114 +1,49 @@
 <template>
-<transition name="fade" mode="out-in">
-	<MkLoading v-if="fetching"/>
-
-	<MkError v-else-if="error" @retry="init()"/>
-
-	<div v-else-if="empty" class="_fullinfo">
-		<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
-		<div>{{ $ts.noNotes }}</div>
-	</div>
-
-	<div v-else class="giivymft" :class="{ noGap }">
-		<div v-show="more && reversed" style="margin-bottom: var(--margin);">
-			<MkButton style="margin: 0 auto;" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMoreFeature">
-				<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
-				<template v-if="moreFetching"><MkLoading inline/></template>
-			</MkButton>
+<MkPagination ref="pagingComponent" :pagination="pagination">
+	<template #empty>
+		<div class="_fullinfo">
+			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+			<div>{{ $ts.noNotes }}</div>
 		</div>
+	</template>
 
-		<XList ref="notes" v-slot="{ item: note }" :items="notes" :direction="reversed ? 'up' : 'down'" :reversed="reversed" :no-gap="noGap" :ad="true" class="notes">
-			<XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note" @update:note="updated(note, $event)"/>
-		</XList>
-
-		<div v-show="more && !reversed" style="margin-top: var(--margin);">
-			<MkButton v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" style="margin: 0 auto;" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore">
-				<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
-				<template v-if="moreFetching"><MkLoading inline/></template>
-			</MkButton>
+	<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" @update:note="updated(note, $event)"/>
+			</XList>
 		</div>
-	</div>
-</transition>
+	</template>
+</MkPagination>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import paging from '@/scripts/paging';
-import XNote from './note.vue';
-import XList from './date-separated-list.vue';
-import MkButton from '@/components/ui/button.vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
+import XNote from '@/components/note.vue';
+import XList from '@/components/date-separated-list.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import { Paging } from '@/components/ui/pagination.vue';
 
-export default defineComponent({
-	components: {
-		XNote, XList, MkButton,
-	},
+const props = defineProps<{
+	pagination: Paging;
+	noGap?: boolean;
+}>();
 
-	mixins: [
-		paging({
-			before: (self) => {
-				self.$emit('before');
-			},
+const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
-			after: (self, e) => {
-				self.$emit('after', e);
-			}
-		}),
-	],
+const updated = (oldValue, newValue) => {
+	const i = pagingComponent.value.items.findIndex(n => n === oldValue);
+	pagingComponent.value.items[i] = newValue;
+};
 
-	props: {
-		pagination: {
-			required: true
-		},
-		prop: {
-			type: String,
-			required: false
-		},
-		noGap: {
-			type: Boolean,
-			required: false,
-			default: false
-		},
+defineExpose({
+	prepend: (note) => {
+		pagingComponent.value?.prepend(note);
 	},
-
-	emits: ['before', 'after'],
-
-	computed: {
-		notes(): any[] {
-			return this.prop ? this.items.map(item => item[this.prop]) : this.items;
-		},
-
-		reversed(): boolean {
-			return this.pagination.reversed;
-		}
-	},
-
-	methods: {
-		updated(oldValue, newValue) {
-			const i = this.notes.findIndex(n => n === oldValue);
-			if (this.prop) {
-				this.items[i][this.prop] = newValue;
-			} else {
-				this.items[i] = newValue;
-			}
-		},
-
-		focus() {
-			this.$refs.notes.focus();
-		}
-	}
 });
 </script>
 
 <style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
-	transition: opacity 0.125s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-
 .giivymft {
 	&.noGap {
 		> .notes {
diff --git a/packages/client/src/components/notifications.vue b/packages/client/src/components/notifications.vue
index 328888c355..aa4b480694 100644
--- a/packages/client/src/components/notifications.vue
+++ b/packages/client/src/components/notifications.vue
@@ -1,159 +1,85 @@
 <template>
-<transition name="fade" mode="out-in">
-	<MkLoading v-if="fetching"/>
-
-	<MkError v-else-if="error" @retry="init()"/>
-
-	<p v-else-if="empty" class="mfcuwfyp">{{ $ts.noNotifications }}</p>
-
-	<div v-else>
-		<XList v-slot="{ item: notification }" class="elsfgstc" :items="items" :no-gap="true">
+<MkPagination ref="pagingComponent" :pagination="pagination">
+	<template #empty>
+		<div class="_fullinfo">
+			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+			<div>{{ $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" @update:note="noteUpdated(notification.note, $event)"/>
 			<XNotification v-else :key="notification.id" :notification="notification" :with-time="true" :full="true" class="_panel notification"/>
 		</XList>
-
-		<MkButton v-show="more" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" primary style="margin: var(--margin) auto;" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" @click="fetchMore">
-			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
-			<template v-if="moreFetching"><MkLoading inline/></template>
-		</MkButton>
-	</div>
-</transition>
+	</template>
+</MkPagination>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType, markRaw } from 'vue';
-import paging from '@/scripts/paging';
-import XNotification from './notification.vue';
-import XList from './date-separated-list.vue';
-import XNote from './note.vue';
+<script lang="ts" setup>
+import { defineComponent, PropType, markRaw, onUnmounted, onMounted, computed, ref } from 'vue';
 import { notificationTypes } from 'misskey-js';
+import MkPagination from '@/components/ui/pagination.vue';
+import { Paging } from '@/components/ui/pagination.vue';
+import XNotification from '@/components/notification.vue';
+import XList from '@/components/date-separated-list.vue';
+import XNote from '@/components/note.vue';
 import * as os from '@/os';
 import { stream } from '@/stream';
-import MkButton from '@/components/ui/button.vue';
-
-export default defineComponent({
-	components: {
-		XNotification,
-		XList,
-		XNote,
-		MkButton,
-	},
-
-	mixins: [
-		paging({}),
-	],
-
-	props: {
-		includeTypes: {
-			type: Array as PropType<typeof notificationTypes[number][]>,
-			required: false,
-			default: null,
-		},
-		unreadOnly: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
-
-	data() {
-		return {
-			connection: null,
-			pagination: {
-				endpoint: 'i/notifications',
-				limit: 10,
-				params: () => ({
-					includeTypes: this.allIncludeTypes || undefined,
-					unreadOnly: this.unreadOnly,
-				})
-			},
-		};
-	},
-
-	computed: {
-		allIncludeTypes() {
-			return this.includeTypes ?? notificationTypes.filter(x => !this.$i.mutingNotificationTypes.includes(x));
-		}
-	},
-
-	watch: {
-		includeTypes: {
-			handler() {
-				this.reload();
-			},
-			deep: true
-		},
-		unreadOnly: {
-			handler() {
-				this.reload();
-			},
-		},
-		// TODO: vue/vuexのバグか仕様かは不明なものの、プロフィール更新するなどして $i が更新されると、
-		// mutingNotificationTypes に変化が無くてもこのハンドラーが呼び出され無駄なリロードが発生するのを直す
-		'$i.mutingNotificationTypes': {
-			handler() {
-				if (this.includeTypes === null) {
-					this.reload();
-				}
-			},
-			deep: true
-		}
-	},
-
-	mounted() {
-		this.connection = markRaw(stream.useChannel('main'));
-		this.connection.on('notification', this.onNotification);
-	},
-
-	beforeUnmount() {
-		this.connection.dispose();
-	},
-
-	methods: {
-		onNotification(notification) {
-			const isMuted = !this.allIncludeTypes.includes(notification.type);
-			if (isMuted || document.visibilityState === 'visible') {
-				stream.send('readNotification', {
-					id: notification.id
-				});
-			}
-
-			if (!isMuted) {
-				this.prepend({
-					...notification,
-					isRead: document.visibilityState === 'visible'
-				});
-			}
-		},
+import { $i } from '@/account';
+
+const props = defineProps<{
+	includeTypes?: PropType<typeof notificationTypes[number][]>;
+	unreadOnly?: boolean;
+}>();
+
+const pagingComponent = ref<InstanceType<typeof MkPagination>>();
+
+const allIncludeTypes = computed(() => props.includeTypes ?? notificationTypes.filter(x => !$i.mutingNotificationTypes.includes(x)));
+
+const pagination: Paging = {
+	endpoint: 'i/notifications' as const,
+	limit: 10,
+	params: computed(() => ({
+		includeTypes: allIncludeTypes.value || undefined,
+		unreadOnly: props.unreadOnly,
+	})),
+};
+
+const onNotification = (notification) => {
+	const isMuted = !allIncludeTypes.value.includes(notification.type);
+	if (isMuted || document.visibilityState === 'visible') {
+		stream.send('readNotification', {
+			id: notification.id
+		});
+	}
 
-		noteUpdated(oldValue, newValue) {
-			const i = this.items.findIndex(n => n.note === oldValue);
-			this.items[i] = {
-				...this.items[i],
-				note: newValue
-			};
-		},
+	if (!isMuted) {
+		pagingComponent.value.prepend({
+			...notification,
+			isRead: document.visibilityState === 'visible'
+		});
 	}
+};
+
+const noteUpdated = (oldValue, newValue) => {
+	const i = pagingComponent.value.items.findIndex(n => n.note === oldValue);
+	pagingComponent.value.items[i] = {
+		...pagingComponent.value.items[i],
+		note: newValue,
+	};
+};
+
+onMounted(() => {
+	const connection = stream.useChannel('main');
+	connection.on('notification', onNotification);
+	onUnmounted(() => {
+		connection.dispose();
+	});
 });
 </script>
 
 <style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
-	transition: opacity 0.125s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-
-.mfcuwfyp {
-	margin: 0;
-	padding: 16px;
-	text-align: center;
-	color: var(--fg);
-}
-
 .elsfgstc {
 	background: var(--panel);
 }
diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index 64af4a54f7..79744e528d 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -13,43 +13,247 @@
 		</slot>
 	</div>
 
-	<div v-else class="cxiknjgy">
+	<div v-else ref="rootEl">
 		<slot :items="items"></slot>
-		<div v-show="more" key="_more_" class="more _gap">
-			<MkButton v-appear="($store.state.enableInfiniteScroll && !disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore">
-				<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
-				<template v-if="moreFetching"><MkLoading inline/></template>
+		<div v-show="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">
+				{{ $ts.loadMore }}
 			</MkButton>
+			<MkLoading v-else class="loading"/>
 		</div>
 	</div>
 </transition>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import MkButton from './button.vue';
-import paging from '@/scripts/paging';
-
-export default defineComponent({
-	components: {
-		MkButton
-	},
-
-	mixins: [
-		paging({}),
-	],
-
-	props: {
-		pagination: {
-			required: true
-		},
-
-		disableAutoLoad: {
-			type: Boolean,
-			required: false,
-			default: false,
+<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/ui/button.vue';
+
+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;
+};
+
+const props = withDefaults(defineProps<{
+	pagination: Paging;
+	disableAutoLoad?: boolean;
+	displayLimit?: number;
+}>(), {
+	displayLimit: 30,
+});
+
+const rootEl = ref<HTMLElement>();
+const items = ref([]);
+const queue = ref([]);
+const offset = ref(0);
+const fetching = ref(true);
+const moreFetching = ref(false);
+const inited = ref(false);
+const more = ref(false);
+const backed = ref(false); // 遡り中か否か
+const isBackTop = ref(false);
+const empty = computed(() => items.value.length === 0 && !fetching.value && inited.value);
+const error = computed(() => !fetching.value && !inited.value);
+
+const init = async () => {
+	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];
+			markRaw(item);
+			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;
+		inited.value = true;
+		fetching.value = false;
+	}, e => {
+		fetching.value = false;
+	});
+};
+
+const reload = () => {
+	items.value = [];
+	init();
+};
+
+const fetchMore = async () => {
+	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,
+		} : {
+			untilId: props.pagination.reversed ? items.value[0].id : items.value[items.value.length - 1].id,
+		}),
+	}).then(res => {
+		for (let i = 0; i < res.length; i++) {
+			const item = res[i];
+			markRaw(item);
+			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;
+	}, e => {
+		moreFetching.value = false;
+	});
+};
+
+const fetchMoreAhead = async () => {
+	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,
+		} : {
+			sinceId: props.pagination.reversed ? items.value[0].id : items.value[items.value.length - 1].id,
+		}),
+	}).then(res => {
+		for (const item of res) {
+			markRaw(item);
 		}
-	},
+		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;
+	}, e => {
+		moreFetching.value = false;
+	});
+};
+
+const prepend = (item) => {
+	if (props.pagination.reversed) {
+		const container = getScrollContainer(rootEl.value);
+		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 {
+		const isTop = isBackTop.value || (document.body.contains(rootEl.value) && isTopVisible(rootEl.value));
+		console.log(item, top);
+
+		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) => {
+	items.value.push(item);
+};
+
+watch(props.pagination.params, init, { deep: true });
+watch(queue, (a, b) => {
+	if (a.length === 0 && b.length === 0) return;
+	this.$emit('queue', queue.value.length);
+}, { deep: true });
+
+init();
+
+onActivated(() => {
+	isBackTop.value = false;
+});
+
+onDeactivated(() => {
+	isBackTop.value = window.scrollY === 0;
+});
+
+defineExpose({
+	items,
+	reload,
+	fetchMoreAhead,
+	prepend,
+	append,
 });
 </script>
 
@@ -64,11 +268,9 @@ export default defineComponent({
 }
 
 .cxiknjgy {
-	> .more > .button {
+	> .button {
 		margin-left: auto;
 		margin-right: auto;
-		height: 48px;
-		min-width: 150px;
 	}
 }
 </style>
diff --git a/packages/client/src/components/user-list.vue b/packages/client/src/components/user-list.vue
index 2148dab608..3e273721c7 100644
--- a/packages/client/src/components/user-list.vue
+++ b/packages/client/src/components/user-list.vue
@@ -1,91 +1,39 @@
 <template>
-<MkError v-if="error" @retry="init()"/>
-
-<div v-else class="efvhhmdq _isolated">
-	<div v-if="empty" class="no-users">
-		<p>{{ $ts.noUsers }}</p>
-	</div>
-	<div class="users">
-		<MkUserInfo v-for="user in users" :key="user.id" class="user" :user="user"/>
-	</div>
-	<button v-show="more" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" class="more" :class="{ fetching: moreFetching }" :disabled="moreFetching" @click="fetchMore">
-		<template v-if="moreFetching"><i class="fas fa-spinner fa-pulse fa-fw"></i></template>{{ moreFetching ? $ts.loading : $ts.loadMore }}
-	</button>
-</div>
+<MkPagination ref="pagingComponent" :pagination="pagination">
+	<template #empty>
+		<div class="_fullinfo">
+			<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
+			<div>{{ $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">
-import { defineComponent } from 'vue';
-import paging from '@/scripts/paging';
-import MkUserInfo from './user-info.vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MkUserInfo from '@/components/user-info.vue';
+import MkPagination from '@/components/ui/pagination.vue';
+import { Paging } from '@/components/ui/pagination.vue';
 import { userPage } from '@/filters/user';
 
-export default defineComponent({
-	components: {
-		MkUserInfo,
-	},
-
-	mixins: [
-		paging({}),
-	],
-
-	props: {
-		pagination: {
-			required: true
-		},
-		extract: {
-			required: false
-		},
-		expanded: {
-			type: Boolean,
-			default: true
-		},
-	},
+const props = defineProps<{
+	pagination: Paging;
+	noGap?: boolean;
+}>();
 
-	computed: {
-		users() {
-			return this.extract ? this.extract(this.items) : this.items;
-		}
-	},
-
-	methods: {
-		userPage
-	}
-});
+const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 </script>
 
 <style lang="scss" scoped>
 .efvhhmdq {
-	> .no-users {
-		text-align: center;
-	}
-
-	> .users {
-		display: grid;
-		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-		grid-gap: var(--margin);
-	}
-
-	> .more {
-		display: block;
-		width: 100%;
-		padding: 16px;
-
-		&:hover {
-			background: rgba(#000, 0.025);
-		}
-
-		&:active {
-			background: rgba(#000, 0.05);
-		}
-
-		&.fetching {
-			cursor: wait;
-		}
-
-		> i {
-			margin-right: 4px;
-		}
-	}
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+	grid-gap: var(--margin);
 }
 </style>
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 82a21d5b16..03f2d6300b 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -12,7 +12,7 @@
 	
 	<FormSection>
 		<template #label>{{ $ts.signinHistory }}</template>
-		<FormPagination :pagination="pagination">
+		<MkPagination :pagination="pagination">
 			<template v-slot="{items}">
 				<div>
 					<div v-for="item in items" :key="item.id" v-panel class="timnmucd">
@@ -25,7 +25,7 @@
 					</div>
 				</div>
 			</template>
-		</FormPagination>
+		</MkPagination>
 	</FormSection>
 
 	<FormSection>
@@ -42,7 +42,7 @@ import { defineComponent } from 'vue';
 import FormSection from '@/components/form/section.vue';
 import FormSlot from '@/components/form/slot.vue';
 import FormButton from '@/components/ui/button.vue';
-import FormPagination from '@/components/form/pagination.vue';
+import MkPagination from '@/components/ui/pagination.vue';
 import X2fa from './2fa.vue';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
@@ -51,7 +51,7 @@ export default defineComponent({
 	components: {
 		FormSection,
 		FormButton,
-		FormPagination,
+		MkPagination,
 		FormSlot,
 		X2fa,
 	},
diff --git a/packages/client/src/pages/user/index.timeline.vue b/packages/client/src/pages/user/index.timeline.vue
index 2ffa496979..7396a76efe 100644
--- a/packages/client/src/pages/user/index.timeline.vue
+++ b/packages/client/src/pages/user/index.timeline.vue
@@ -1,60 +1,36 @@
 <template>
 <div v-sticky-container class="yrzkoczt">
-	<MkTab v-model="with_" class="tab">
+	<MkTab v-model="include" class="tab">
 		<option :value="null">{{ $ts.notes }}</option>
 		<option value="replies">{{ $ts.notesAndReplies }}</option>
 		<option value="files">{{ $ts.withFiles }}</option>
 	</MkTab>
-	<XNotes ref="timeline" :no-gap="true" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
+	<XNotes ref="timeline" :no-gap="true" :pagination="pagination"/>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import * as misskey from 'misskey-js';
 import XNotes from '@/components/notes.vue';
 import MkTab from '@/components/tab.vue';
 import * as os from '@/os';
 
-export default defineComponent({
-	components: {
-		XNotes,
-		MkTab,
-	},
+const props = defineProps<{
+	user: misskey.entities.UserDetailed;
+}>();
 
-	props: {
-		user: {
-			type: Object,
-			required: true,
-		},
-	},
+const include = ref<string | null>(null);
 
-	data() {
-		return {
-			date: null,
-			with_: null,
-			pagination: {
-				endpoint: 'users/notes',
-				limit: 10,
-				params: init => ({
-					userId: this.user.id,
-					includeReplies: this.with_ === 'replies',
-					withFiles: this.with_ === 'files',
-					untilDate: init ? undefined : (this.date ? this.date.getTime() : undefined),
-				})
-			}
-		};
-	},
-
-	watch: {
-		user() {
-			this.$refs.timeline.reload();
-		},
-
-		with_() {
-			this.$refs.timeline.reload();
-		},
-	},
-});
+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" scoped>
diff --git a/packages/client/src/scripts/paging.ts b/packages/client/src/scripts/paging.ts
deleted file mode 100644
index ef63ecc450..0000000000
--- a/packages/client/src/scripts/paging.ts
+++ /dev/null
@@ -1,246 +0,0 @@
-import { markRaw } from 'vue';
-import * as os from '@/os';
-import { onScrollTop, isTopVisible, getScrollPosition, getScrollContainer } from './scroll';
-
-const SECOND_FETCH_LIMIT = 30;
-
-// reversed: items 配列の中身を逆順にする(新しい方が最後)
-
-export default (opts) => ({
-	emits: ['queue'],
-
-	data() {
-		return {
-			items: [],
-			queue: [],
-			offset: 0,
-			fetching: true,
-			moreFetching: false,
-			inited: false,
-			more: false,
-			backed: false, // 遡り中か否か
-			isBackTop: false,
-		};
-	},
-
-	computed: {
-		empty(): boolean {
-			return this.items.length === 0 && !this.fetching && this.inited;
-		},
-
-		error(): boolean {
-			return !this.fetching && !this.inited;
-		},
-	},
-
-	watch: {
-		pagination: {
-			handler() {
-				this.init();
-			},
-			deep: true
-		},
-
-		queue: {
-			handler(a, b) {
-				if (a.length === 0 && b.length === 0) return;
-				this.$emit('queue', this.queue.length);
-			},
-			deep: true
-		}
-	},
-
-	created() {
-		opts.displayLimit = opts.displayLimit || 30;
-		this.init();
-	},
-
-	activated() {
-		this.isBackTop = false;
-	},
-
-	deactivated() {
-		this.isBackTop = window.scrollY === 0;
-	},
-
-	methods: {
-		reload() {
-			this.items = [];
-			this.init();
-		},
-
-		replaceItem(finder, data) {
-			const i = this.items.findIndex(finder);
-			this.items[i] = data;
-		},
-
-		removeItem(finder) {
-			const i = this.items.findIndex(finder);
-			this.items.splice(i, 1);
-		},
-
-		async init() {
-			this.queue = [];
-			this.fetching = true;
-			if (opts.before) opts.before(this);
-			let params = typeof this.pagination.params === 'function' ? this.pagination.params(true) : this.pagination.params;
-			if (params && params.then) params = await params;
-			if (params === null) return;
-			const endpoint = typeof this.pagination.endpoint === 'function' ? this.pagination.endpoint() : this.pagination.endpoint;
-			await os.api(endpoint, {
-				...params,
-				limit: this.pagination.noPaging ? (this.pagination.limit || 10) : (this.pagination.limit || 10) + 1,
-			}).then(items => {
-				for (let i = 0; i < items.length; i++) {
-					const item = items[i];
-					markRaw(item);
-					if (this.pagination.reversed) {
-						if (i === items.length - 2) item._shouldInsertAd_ = true;
-					} else {
-						if (i === 3) item._shouldInsertAd_ = true;
-					}
-				}
-				if (!this.pagination.noPaging && (items.length > (this.pagination.limit || 10))) {
-					items.pop();
-					this.items = this.pagination.reversed ? [...items].reverse() : items;
-					this.more = true;
-				} else {
-					this.items = this.pagination.reversed ? [...items].reverse() : items;
-					this.more = false;
-				}
-				this.offset = items.length;
-				this.inited = true;
-				this.fetching = false;
-				if (opts.after) opts.after(this, null);
-			}, e => {
-				this.fetching = false;
-				if (opts.after) opts.after(this, e);
-			});
-		},
-
-		async fetchMore() {
-			if (!this.more || this.fetching || this.moreFetching || this.items.length === 0) return;
-			this.moreFetching = true;
-			this.backed = true;
-			let params = typeof this.pagination.params === 'function' ? this.pagination.params(false) : this.pagination.params;
-			if (params && params.then) params = await params;
-			const endpoint = typeof this.pagination.endpoint === 'function' ? this.pagination.endpoint() : this.pagination.endpoint;
-			await os.api(endpoint, {
-				...params,
-				limit: SECOND_FETCH_LIMIT + 1,
-				...(this.pagination.offsetMode ? {
-					offset: this.offset,
-				} : {
-					untilId: this.pagination.reversed ? this.items[0].id : this.items[this.items.length - 1].id,
-				}),
-			}).then(items => {
-				for (let i = 0; i < items.length; i++) {
-					const item = items[i];
-					markRaw(item);
-					if (this.pagination.reversed) {
-						if (i === items.length - 9) item._shouldInsertAd_ = true;
-					} else {
-						if (i === 10) item._shouldInsertAd_ = true;
-					}
-				}
-				if (items.length > SECOND_FETCH_LIMIT) {
-					items.pop();
-					this.items = this.pagination.reversed ? [...items].reverse().concat(this.items) : this.items.concat(items);
-					this.more = true;
-				} else {
-					this.items = this.pagination.reversed ? [...items].reverse().concat(this.items) : this.items.concat(items);
-					this.more = false;
-				}
-				this.offset += items.length;
-				this.moreFetching = false;
-			}, e => {
-				this.moreFetching = false;
-			});
-		},
-
-		async fetchMoreFeature() {
-			if (!this.more || this.fetching || this.moreFetching || this.items.length === 0) return;
-			this.moreFetching = true;
-			let params = typeof this.pagination.params === 'function' ? this.pagination.params(false) : this.pagination.params;
-			if (params && params.then) params = await params;
-			const endpoint = typeof this.pagination.endpoint === 'function' ? this.pagination.endpoint() : this.pagination.endpoint;
-			await os.api(endpoint, {
-				...params,
-				limit: SECOND_FETCH_LIMIT + 1,
-				...(this.pagination.offsetMode ? {
-					offset: this.offset,
-				} : {
-					sinceId: this.pagination.reversed ? this.items[0].id : this.items[this.items.length - 1].id,
-				}),
-			}).then(items => {
-				for (const item of items) {
-					markRaw(item);
-				}
-				if (items.length > SECOND_FETCH_LIMIT) {
-					items.pop();
-					this.items = this.pagination.reversed ? [...items].reverse().concat(this.items) : this.items.concat(items);
-					this.more = true;
-				} else {
-					this.items = this.pagination.reversed ? [...items].reverse().concat(this.items) : this.items.concat(items);
-					this.more = false;
-				}
-				this.offset += items.length;
-				this.moreFetching = false;
-			}, e => {
-				this.moreFetching = false;
-			});
-		},
-
-		prepend(item) {
-			if (this.pagination.reversed) {
-				const container = getScrollContainer(this.$el);
-				const pos = getScrollPosition(this.$el);
-				const viewHeight = container.clientHeight;
-				const height = container.scrollHeight;
-				const isBottom = (pos + viewHeight > height - 32);
-				if (isBottom) {
-					// オーバーフローしたら古いアイテムは捨てる
-					if (this.items.length >= opts.displayLimit) {
-						// このやり方だとVue 3.2以降アニメーションが動かなくなる
-						//this.items = this.items.slice(-opts.displayLimit);
-						while (this.items.length >= opts.displayLimit) {
-							this.items.shift();
-						}
-						this.more = true;
-					}
-				}
-				this.items.push(item);
-				// TODO
-			} else {
-				const isTop = this.isBackTop || (document.body.contains(this.$el) && isTopVisible(this.$el));
-
-				if (isTop) {
-					// Prepend the item
-					this.items.unshift(item);
-
-					// オーバーフローしたら古いアイテムは捨てる
-					if (this.items.length >= opts.displayLimit) {
-						// このやり方だとVue 3.2以降アニメーションが動かなくなる
-						//this.items = this.items.slice(0, opts.displayLimit);
-						while (this.items.length >= opts.displayLimit) {
-							this.items.pop();
-						}
-						this.more = true;
-					}
-				} else {
-					this.queue.push(item);
-					onScrollTop(this.$el, () => {
-						for (const item of this.queue) {
-							this.prepend(item);
-						}
-						this.queue = [];
-					});
-				}
-			}
-		},
-
-		append(item) {
-			this.items.push(item);
-		},
-	}
-});
-- 
cgit v1.2.3-freya


From b267a504ca4563e042929198319273e969939fc9 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 12 Jan 2022 17:34:53 +0900
Subject: bye reversi

---
 CHANGELOG.md                                       |   2 +
 locales/ja-JP.yml                                  |  38 -
 packages/backend/src/db/postgre.ts                 |   4 -
 packages/backend/src/games/reversi/core.ts         | 263 ------
 packages/backend/src/games/reversi/maps.ts         | 896 ---------------------
 packages/backend/src/games/reversi/package.json    |  18 -
 packages/backend/src/games/reversi/tsconfig.json   |  21 -
 packages/backend/src/misc/schema.ts                |   4 -
 .../src/models/entities/games/reversi/game.ts      | 133 ---
 .../src/models/entities/games/reversi/matching.ts  |  35 -
 packages/backend/src/models/index.ts               |   4 -
 .../src/models/repositories/games/reversi/game.ts  | 191 -----
 .../models/repositories/games/reversi/matching.ts  |  69 --
 .../server/api/endpoints/games/reversi/games.ts    | 157 ----
 .../api/endpoints/games/reversi/games/show.ts      | 169 ----
 .../api/endpoints/games/reversi/games/surrender.ts |  68 --
 .../api/endpoints/games/reversi/invitations.ts     |  59 --
 .../server/api/endpoints/games/reversi/match.ts    | 109 ---
 .../api/endpoints/games/reversi/match/cancel.ts    |  15 -
 .../src/server/api/endpoints/users/stats.ts        |   8 +-
 .../api/stream/channels/games/reversi-game.ts      | 372 ---------
 .../server/api/stream/channels/games/reversi.ts    |  34 -
 .../src/server/api/stream/channels/index.ts        |   4 -
 packages/backend/src/server/api/stream/types.ts    |  52 --
 packages/backend/src/server/web/index.ts           |   3 -
 packages/backend/src/services/stream.ts            |  13 -
 packages/client/src/menu.ts                        |   5 -
 packages/client/src/pages/reversi/game.board.vue   | 528 ------------
 packages/client/src/pages/reversi/game.setting.vue | 390 ---------
 packages/client/src/pages/reversi/game.vue         |  77 --
 packages/client/src/pages/reversi/index.vue        | 280 -------
 .../client/src/pages/settings/account-info.vue     |   4 -
 packages/client/src/pages/settings/sounds.vue      |   2 -
 packages/client/src/router.ts                      |   2 -
 packages/client/src/scripts/games/reversi/core.ts  | 263 ------
 packages/client/src/scripts/games/reversi/maps.ts  | 896 ---------------------
 .../client/src/scripts/games/reversi/package.json  |  18 -
 .../client/src/scripts/games/reversi/tsconfig.json |  21 -
 packages/client/src/store.ts                       |   2 -
 39 files changed, 3 insertions(+), 5226 deletions(-)
 delete mode 100644 packages/backend/src/games/reversi/core.ts
 delete mode 100644 packages/backend/src/games/reversi/maps.ts
 delete mode 100644 packages/backend/src/games/reversi/package.json
 delete mode 100644 packages/backend/src/games/reversi/tsconfig.json
 delete mode 100644 packages/backend/src/models/entities/games/reversi/game.ts
 delete mode 100644 packages/backend/src/models/entities/games/reversi/matching.ts
 delete mode 100644 packages/backend/src/models/repositories/games/reversi/game.ts
 delete mode 100644 packages/backend/src/models/repositories/games/reversi/matching.ts
 delete mode 100644 packages/backend/src/server/api/endpoints/games/reversi/games.ts
 delete mode 100644 packages/backend/src/server/api/endpoints/games/reversi/games/show.ts
 delete mode 100644 packages/backend/src/server/api/endpoints/games/reversi/games/surrender.ts
 delete mode 100644 packages/backend/src/server/api/endpoints/games/reversi/invitations.ts
 delete mode 100644 packages/backend/src/server/api/endpoints/games/reversi/match.ts
 delete mode 100644 packages/backend/src/server/api/endpoints/games/reversi/match/cancel.ts
 delete mode 100644 packages/backend/src/server/api/stream/channels/games/reversi-game.ts
 delete mode 100644 packages/backend/src/server/api/stream/channels/games/reversi.ts
 delete mode 100644 packages/client/src/pages/reversi/game.board.vue
 delete mode 100644 packages/client/src/pages/reversi/game.setting.vue
 delete mode 100644 packages/client/src/pages/reversi/game.vue
 delete mode 100644 packages/client/src/pages/reversi/index.vue
 delete mode 100644 packages/client/src/scripts/games/reversi/core.ts
 delete mode 100644 packages/client/src/scripts/games/reversi/maps.ts
 delete mode 100644 packages/client/src/scripts/games/reversi/package.json
 delete mode 100644 packages/client/src/scripts/games/reversi/tsconfig.json

(limited to 'packages/client/src/pages/settings')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 501e5cad98..ed5bdd3f1c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,8 @@
 ### Changes
 - Room機能が削除されました
   - 後日別リポジトリとして復活予定です
+- リバーシ機能が削除されました
+  - 後日別リポジトリとして復活予定です
 - Chat UIが削除されました
 
 ### Improvements
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 5ba09c4a81..dd853aa83a 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -242,7 +242,6 @@ uploadFromUrlDescription: "アップロードしたいファイルのURL"
 uploadFromUrlRequested: "アップロードをリクエストしました"
 uploadFromUrlMayTakeTime: "アップロードが完了するまで時間がかかる場合があります。"
 explore: "みつける"
-games: "Misskey Games"
 messageRead: "既読"
 noMoreHistory: "これより過去の履歴はありません"
 startMessaging: "チャットを開始"
@@ -669,7 +668,6 @@ emailVerified: "メールアドレスが確認されました"
 noteFavoritesCount: "お気に入りノートの数"
 pageLikesCount: "Pageにいいねした数"
 pageLikedCount: "Pageにいいねされた数"
-reversiCount: "リバーシの対局数"
 contact: "連絡先"
 useSystemFont: "システムのデフォルトのフォントを使う"
 clips: "クリップ"
@@ -957,40 +955,6 @@ _mfm:
   rotate: "回転"
   rotateDescription: "指定した角度で回転させます。"
 
-_reversi:
-  reversi: "リバーシ"
-  gameSettings: "対局の設定"
-  chooseBoard: "ボードを選択"
-  blackOrWhite: "先行/後攻"
-  blackIs: "{name}が黒(先行)"
-  rules: "ルール"
-  botSettings: "Botのオプション"
-  thisGameIsStartedSoon: "対局は数秒後に開始されます"
-  waitingForOther: "相手の準備が完了するのを待っています"
-  waitingForMe: "あなたの準備が完了するのを待っています"
-  waitingBoth: "準備してください"
-  ready: "準備完了"
-  cancelReady: "準備を再開"
-  opponentTurn: "相手のターンです"
-  myTurn: "あなたのターンです"
-  turnOf: "{name}のターンです"
-  pastTurnOf: "{name}のターン"
-  surrender: "投了"
-  surrendered: "投了により"
-  drawn: "引き分け"
-  won: "{name}の勝ち"
-  black: "黒"
-  white: "白"
-  total: "合計"
-  turnCount: "{count}ターン目"
-  myGames: "自分の対局"
-  allGames: "みんなの対局"
-  ended: "終了"
-  playing: "対局中"
-  isLlotheo: "石の少ない方が勝ち(ロセオ)"
-  loopedMap: "ループマップ"
-  canPutEverywhere: "どこでも置けるモード"
-
 _instanceTicker:
   none: "表示しない"
   remote: "リモートユーザーに表示"
@@ -1118,8 +1082,6 @@ _sfx:
   chatBg: "チャット(バックグラウンド)"
   antenna: "アンテナ受信"
   channel: "チャンネル通知"
-  reversiPutBlack: "リバーシ: 黒が打ったとき"
-  reversiPutWhite: "リバーシ: 白が打ったとき"
 
 _ago:
   unknown: "謎"
diff --git a/packages/backend/src/db/postgre.ts b/packages/backend/src/db/postgre.ts
index b5f228d919..1692b26219 100644
--- a/packages/backend/src/db/postgre.ts
+++ b/packages/backend/src/db/postgre.ts
@@ -40,8 +40,6 @@ import { Signin } from '@/models/entities/signin';
 import { AuthSession } from '@/models/entities/auth-session';
 import { FollowRequest } from '@/models/entities/follow-request';
 import { Emoji } from '@/models/entities/emoji';
-import { ReversiGame } from '@/models/entities/games/reversi/game';
-import { ReversiMatching } from '@/models/entities/games/reversi/matching';
 import { UserNotePining } from '@/models/entities/user-note-pining';
 import { Poll } from '@/models/entities/poll';
 import { UserKeypair } from '@/models/entities/user-keypair';
@@ -166,8 +164,6 @@ export const entities = [
 	AntennaNote,
 	PromoNote,
 	PromoRead,
-	ReversiGame,
-	ReversiMatching,
 	Relay,
 	MutedNote,
 	Channel,
diff --git a/packages/backend/src/games/reversi/core.ts b/packages/backend/src/games/reversi/core.ts
deleted file mode 100644
index 0cf7714543..0000000000
--- a/packages/backend/src/games/reversi/core.ts
+++ /dev/null
@@ -1,263 +0,0 @@
-import { count, concat } from '@/prelude/array';
-
-// MISSKEY REVERSI ENGINE
-
-/**
- * true ... 黒
- * false ... 白
- */
-export type Color = boolean;
-const BLACK = true;
-const WHITE = false;
-
-export type MapPixel = 'null' | 'empty';
-
-export type Options = {
-	isLlotheo: boolean;
-	canPutEverywhere: boolean;
-	loopedBoard: boolean;
-};
-
-export type Undo = {
-	/**
-	 * 色
-	 */
-	color: Color;
-
-	/**
-	 * どこに打ったか
-	 */
-	pos: number;
-
-	/**
-	 * 反転した石の位置の配列
-	 */
-	effects: number[];
-
-	/**
-	 * ターン
-	 */
-	turn: Color | null;
-};
-
-/**
- * リバーシエンジン
- */
-export default class Reversi {
-	public map: MapPixel[];
-	public mapWidth: number;
-	public mapHeight: number;
-	public board: (Color | null | undefined)[];
-	public turn: Color | null = BLACK;
-	public opts: Options;
-
-	public prevPos = -1;
-	public prevColor: Color | null = null;
-
-	private logs: Undo[] = [];
-
-	/**
-	 * ゲームを初期化します
-	 */
-	constructor(map: string[], opts: Options) {
-		//#region binds
-		this.put = this.put.bind(this);
-		//#endregion
-
-		//#region Options
-		this.opts = opts;
-		if (this.opts.isLlotheo == null) this.opts.isLlotheo = false;
-		if (this.opts.canPutEverywhere == null) this.opts.canPutEverywhere = false;
-		if (this.opts.loopedBoard == null) this.opts.loopedBoard = false;
-		//#endregion
-
-		//#region Parse map data
-		this.mapWidth = map[0].length;
-		this.mapHeight = map.length;
-		const mapData = map.join('');
-
-		this.board = mapData.split('').map(d => d === '-' ? null : d === 'b' ? BLACK : d === 'w' ? WHITE : undefined);
-
-		this.map = mapData.split('').map(d => d === '-' || d === 'b' || d === 'w' ? 'empty' : 'null');
-		//#endregion
-
-		// ゲームが始まった時点で片方の色の石しかないか、始まった時点で勝敗が決定するようなマップの場合がある
-		if (!this.canPutSomewhere(BLACK)) this.turn = this.canPutSomewhere(WHITE) ? WHITE : null;
-	}
-
-	/**
-	 * 黒石の数
-	 */
-	public get blackCount() {
-		return count(BLACK, this.board);
-	}
-
-	/**
-	 * 白石の数
-	 */
-	public get whiteCount() {
-		return count(WHITE, this.board);
-	}
-
-	public transformPosToXy(pos: number): number[] {
-		const x = pos % this.mapWidth;
-		const y = Math.floor(pos / this.mapWidth);
-		return [x, y];
-	}
-
-	public transformXyToPos(x: number, y: number): number {
-		return x + (y * this.mapWidth);
-	}
-
-	/**
-	 * 指定のマスに石を打ちます
-	 * @param color 石の色
-	 * @param pos 位置
-	 */
-	public put(color: Color, pos: number) {
-		this.prevPos = pos;
-		this.prevColor = color;
-
-		this.board[pos] = color;
-
-		// 反転させられる石を取得
-		const effects = this.effects(color, pos);
-
-		// 反転させる
-		for (const pos of effects) {
-			this.board[pos] = color;
-		}
-
-		const turn = this.turn;
-
-		this.logs.push({
-			color,
-			pos,
-			effects,
-			turn,
-		});
-
-		this.calcTurn();
-	}
-
-	private calcTurn() {
-		// ターン計算
-		this.turn =
-			this.canPutSomewhere(!this.prevColor) ? !this.prevColor :
-			this.canPutSomewhere(this.prevColor!) ? this.prevColor :
-			null;
-	}
-
-	public undo() {
-		const undo = this.logs.pop()!;
-		this.prevColor = undo.color;
-		this.prevPos = undo.pos;
-		this.board[undo.pos] = null;
-		for (const pos of undo.effects) {
-			const color = this.board[pos];
-			this.board[pos] = !color;
-		}
-		this.turn = undo.turn;
-	}
-
-	/**
-	 * 指定した位置のマップデータのマスを取得します
-	 * @param pos 位置
-	 */
-	public mapDataGet(pos: number): MapPixel {
-		const [x, y] = this.transformPosToXy(pos);
-		return x < 0 || y < 0 || x >= this.mapWidth || y >= this.mapHeight ? 'null' : this.map[pos];
-	}
-
-	/**
-	 * 打つことができる場所を取得します
-	 */
-	public puttablePlaces(color: Color): number[] {
-		return Array.from(this.board.keys()).filter(i => this.canPut(color, i));
-	}
-
-	/**
-	 * 打つことができる場所があるかどうかを取得します
-	 */
-	public canPutSomewhere(color: Color): boolean {
-		return this.puttablePlaces(color).length > 0;
-	}
-
-	/**
-	 * 指定のマスに石を打つことができるかどうかを取得します
-	 * @param color 自分の色
-	 * @param pos 位置
-	 */
-	public canPut(color: Color, pos: number): boolean {
-		return (
-			this.board[pos] !== null ? false : // 既に石が置いてある場所には打てない
-			this.opts.canPutEverywhere ? this.mapDataGet(pos) == 'empty' : // 挟んでなくても置けるモード
-			this.effects(color, pos).length !== 0); // 相手の石を1つでも反転させられるか
-	}
-
-	/**
-	 * 指定のマスに石を置いた時の、反転させられる石を取得します
-	 * @param color 自分の色
-	 * @param initPos 位置
-	 */
-	public effects(color: Color, initPos: number): number[] {
-		const enemyColor = !color;
-
-		const diffVectors: [number, number][] = [
-			[  0,  -1], // 上
-			[ +1,  -1], // 右上
-			[ +1,   0], // 右
-			[ +1,  +1], // 右下
-			[  0,  +1], // 下
-			[ -1,  +1], // 左下
-			[ -1,   0], // 左
-			[ -1,  -1],  // 左上
-		];
-
-		const effectsInLine = ([dx, dy]: [number, number]): number[] => {
-			const nextPos = (x: number, y: number): [number, number] => [x + dx, y + dy];
-
-			const found: number[] = []; // 挟めるかもしれない相手の石を入れておく配列
-			let [x, y] = this.transformPosToXy(initPos);
-			while (true) {
-				[x, y] = nextPos(x, y);
-
-				// 座標が指し示す位置がボード外に出たとき
-				if (this.opts.loopedBoard && this.transformXyToPos(
-					(x = ((x % this.mapWidth) + this.mapWidth) % this.mapWidth),
-					(y = ((y % this.mapHeight) + this.mapHeight) % this.mapHeight)) === initPos) {
-						// 盤面の境界でループし、自分が石を置く位置に戻ってきたとき、挟めるようにしている (ref: Test4のマップ)
-					return found;
-				} else if (x === -1 || y === -1 || x === this.mapWidth || y === this.mapHeight) {
-					return []; // 挟めないことが確定 (盤面外に到達)
-				}
-
-				const pos = this.transformXyToPos(x, y);
-				if (this.mapDataGet(pos) === 'null') return []; // 挟めないことが確定 (配置不可能なマスに到達)
-				const stone = this.board[pos];
-				if (stone === null) return []; // 挟めないことが確定 (石が置かれていないマスに到達)
-				if (stone === enemyColor) found.push(pos); // 挟めるかもしれない (相手の石を発見)
-				if (stone === color) return found; // 挟めることが確定 (対となる自分の石を発見)
-			}
-		};
-
-		return concat(diffVectors.map(effectsInLine));
-	}
-
-	/**
-	 * ゲームが終了したか否か
-	 */
-	public get isEnded(): boolean {
-		return this.turn === null;
-	}
-
-	/**
-	 * ゲームの勝者 (null = 引き分け)
-	 */
-	public get winner(): Color | null {
-		return this.isEnded ?
-			this.blackCount == this.whiteCount ? null :
-			this.opts.isLlotheo === this.blackCount > this.whiteCount ? WHITE : BLACK :
-			undefined as never;
-	}
-}
diff --git a/packages/backend/src/games/reversi/maps.ts b/packages/backend/src/games/reversi/maps.ts
deleted file mode 100644
index 8442c6d741..0000000000
--- a/packages/backend/src/games/reversi/maps.ts
+++ /dev/null
@@ -1,896 +0,0 @@
-/**
- * 組み込みマップ定義
- *
- * データ値:
- * (スペース) ... マス無し
- * - ... マス
- * b ... 初期配置される黒石
- * w ... 初期配置される白石
- */
-
-export type Map = {
-	name?: string;
-	category?: string;
-	author?: string;
-	data: string[];
-};
-
-export const fourfour: Map = {
-	name: '4x4',
-	category: '4x4',
-	data: [
-		'----',
-		'-wb-',
-		'-bw-',
-		'----',
-	],
-};
-
-export const sixsix: Map = {
-	name: '6x6',
-	category: '6x6',
-	data: [
-		'------',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		'------',
-	],
-};
-
-export const roundedSixsix: Map = {
-	name: '6x6 rounded',
-	category: '6x6',
-	author: 'syuilo',
-	data: [
-		' ---- ',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		' ---- ',
-	],
-};
-
-export const roundedSixsix2: Map = {
-	name: '6x6 rounded 2',
-	category: '6x6',
-	author: 'syuilo',
-	data: [
-		'  --  ',
-		' ---- ',
-		'--wb--',
-		'--bw--',
-		' ---- ',
-		'  --  ',
-	],
-};
-
-export const eighteight: Map = {
-	name: '8x8',
-	category: '8x8',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------',
-	],
-};
-
-export const eighteightH1: Map = {
-	name: '8x8 handicap 1',
-	category: '8x8',
-	data: [
-		'b-------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------',
-	],
-};
-
-export const eighteightH2: Map = {
-	name: '8x8 handicap 2',
-	category: '8x8',
-	data: [
-		'b-------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'-------b',
-	],
-};
-
-export const eighteightH3: Map = {
-	name: '8x8 handicap 3',
-	category: '8x8',
-	data: [
-		'b------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'-------b',
-	],
-};
-
-export const eighteightH4: Map = {
-	name: '8x8 handicap 4',
-	category: '8x8',
-	data: [
-		'b------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'b------b',
-	],
-};
-
-export const eighteightH28: Map = {
-	name: '8x8 handicap 28',
-	category: '8x8',
-	data: [
-		'bbbbbbbb',
-		'b------b',
-		'b------b',
-		'b--wb--b',
-		'b--bw--b',
-		'b------b',
-		'b------b',
-		'bbbbbbbb',
-	],
-};
-
-export const roundedEighteight: Map = {
-	name: '8x8 rounded',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		' ------ ',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		' ------ ',
-	],
-};
-
-export const roundedEighteight2: Map = {
-	name: '8x8 rounded 2',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'  ----  ',
-		' ------ ',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		' ------ ',
-		'  ----  ',
-	],
-};
-
-export const roundedEighteight3: Map = {
-	name: '8x8 rounded 3',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'   --   ',
-		'  ----  ',
-		' ------ ',
-		'---wb---',
-		'---bw---',
-		' ------ ',
-		'  ----  ',
-		'   --   ',
-	],
-};
-
-export const eighteightWithNotch: Map = {
-	name: '8x8 with notch',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'---  ---',
-		'--------',
-		'--------',
-		' --wb-- ',
-		' --bw-- ',
-		'--------',
-		'--------',
-		'---  ---',
-	],
-};
-
-export const eighteightWithSomeHoles: Map = {
-	name: '8x8 with some holes',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--- ----',
-		'----- --',
-		'-- -----',
-		'---wb---',
-		'---bw- -',
-		' -------',
-		'--- ----',
-		'--------',
-	],
-};
-
-export const circle: Map = {
-	name: 'Circle',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'   --   ',
-		' ------ ',
-		' ------ ',
-		'---wb---',
-		'---bw---',
-		' ------ ',
-		' ------ ',
-		'   --   ',
-	],
-};
-
-export const smile: Map = {
-	name: 'Smile',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		' ------ ',
-		'--------',
-		'-- -- --',
-		'---wb---',
-		'-- bw --',
-		'---  ---',
-		'--------',
-		' ------ ',
-	],
-};
-
-export const window: Map = {
-	name: 'Window',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--------',
-		'-  --  -',
-		'-  --  -',
-		'---wb---',
-		'---bw---',
-		'-  --  -',
-		'-  --  -',
-		'--------',
-	],
-};
-
-export const reserved: Map = {
-	name: 'Reserved',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'w------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'b------w',
-	],
-};
-
-export const x: Map = {
-	name: 'X',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'w------b',
-		'-w----b-',
-		'--w--b--',
-		'---wb---',
-		'---bw---',
-		'--b--w--',
-		'-b----w-',
-		'b------w',
-	],
-};
-
-export const parallel: Map = {
-	name: 'Parallel',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---bb---',
-		'---ww---',
-		'--------',
-		'--------',
-		'--------',
-	],
-};
-
-export const lackOfBlack: Map = {
-	name: 'Lack of Black',
-	category: '8x8',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---w----',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------',
-	],
-};
-
-export const squareParty: Map = {
-	name: 'Square Party',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--------',
-		'-wwwbbb-',
-		'-w-wb-b-',
-		'-wwwbbb-',
-		'-bbbwww-',
-		'-b-bw-w-',
-		'-bbbwww-',
-		'--------',
-	],
-};
-
-export const minesweeper: Map = {
-	name: 'Minesweeper',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'b-b--w-w',
-		'-w-wb-b-',
-		'w-b--w-b',
-		'-b-wb-w-',
-		'-w-bw-b-',
-		'b-w--b-w',
-		'-b-bw-w-',
-		'w-w--b-b',
-	],
-};
-
-export const tenthtenth: Map = {
-	name: '10x10',
-	category: '10x10',
-	data: [
-		'----------',
-		'----------',
-		'----------',
-		'----------',
-		'----wb----',
-		'----bw----',
-		'----------',
-		'----------',
-		'----------',
-		'----------',
-	],
-};
-
-export const hole: Map = {
-	name: 'The Hole',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'----------',
-		'----------',
-		'--wb--wb--',
-		'--bw--bw--',
-		'----  ----',
-		'----  ----',
-		'--wb--wb--',
-		'--bw--bw--',
-		'----------',
-		'----------',
-	],
-};
-
-export const grid: Map = {
-	name: 'Grid',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'----------',
-		'- - -- - -',
-		'----------',
-		'- - -- - -',
-		'----wb----',
-		'----bw----',
-		'- - -- - -',
-		'----------',
-		'- - -- - -',
-		'----------',
-	],
-};
-
-export const cross: Map = {
-	name: 'Cross',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		'   ----   ',
-		'   ----   ',
-		'   ----   ',
-		'----------',
-		'----wb----',
-		'----bw----',
-		'----------',
-		'   ----   ',
-		'   ----   ',
-		'   ----   ',
-	],
-};
-
-export const charX: Map = {
-	name: 'Char X',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'---    ---',
-		'----  ----',
-		'----------',
-		' -------- ',
-		'  --wb--  ',
-		'  --bw--  ',
-		' -------- ',
-		'----------',
-		'----  ----',
-		'---    ---',
-	],
-};
-
-export const charY: Map = {
-	name: 'Char Y',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'---    ---',
-		'----  ----',
-		'----------',
-		' -------- ',
-		'  --wb--  ',
-		'  --bw--  ',
-		'  ------  ',
-		'  ------  ',
-		'  ------  ',
-		'  ------  ',
-	],
-};
-
-export const walls: Map = {
-	name: 'Walls',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		' bbbbbbbb ',
-		'w--------w',
-		'w--------w',
-		'w--------w',
-		'w---wb---w',
-		'w---bw---w',
-		'w--------w',
-		'w--------w',
-		'w--------w',
-		' bbbbbbbb ',
-	],
-};
-
-export const cpu: Map = {
-	name: 'CPU',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		' b b  b b ',
-		'w--------w',
-		' -------- ',
-		'w--------w',
-		' ---wb--- ',
-		' ---bw--- ',
-		'w--------w',
-		' -------- ',
-		'w--------w',
-		' b b  b b ',
-	],
-};
-
-export const checker: Map = {
-	name: 'Checker',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		'----------',
-		'----------',
-		'----------',
-		'---wbwb---',
-		'---bwbw---',
-		'---wbwb---',
-		'---bwbw---',
-		'----------',
-		'----------',
-		'----------',
-	],
-};
-
-export const japaneseCurry: Map = {
-	name: 'Japanese curry',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'w-b-b-b-b-',
-		'-w-b-b-b-b',
-		'w-w-b-b-b-',
-		'-w-w-b-b-b',
-		'w-w-wwb-b-',
-		'-w-wbb-b-b',
-		'w-w-w-b-b-',
-		'-w-w-w-b-b',
-		'w-w-w-w-b-',
-		'-w-w-w-w-b',
-	],
-};
-
-export const mosaic: Map = {
-	name: 'Mosaic',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'- - - - - ',
-		' - - - - -',
-		'- - - - - ',
-		' - w w - -',
-		'- - b b - ',
-		' - w w - -',
-		'- - b b - ',
-		' - - - - -',
-		'- - - - - ',
-		' - - - - -',
-	],
-};
-
-export const arena: Map = {
-	name: 'Arena',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'- - -- - -',
-		' - -  - - ',
-		'- ------ -',
-		' -------- ',
-		'- --wb-- -',
-		'- --bw-- -',
-		' -------- ',
-		'- ------ -',
-		' - -  - - ',
-		'- - -- - -',
-	],
-};
-
-export const reactor: Map = {
-	name: 'Reactor',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'-w------b-',
-		'b- -  - -w',
-		'- --wb-- -',
-		'---b  w---',
-		'- b wb w -',
-		'- w bw b -',
-		'---w  b---',
-		'- --bw-- -',
-		'w- -  - -b',
-		'-b------w-',
-	],
-};
-
-export const sixeight: Map = {
-	name: '6x8',
-	category: 'Special',
-	data: [
-		'------',
-		'------',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		'------',
-		'------',
-	],
-};
-
-export const spark: Map = {
-	name: 'Spark',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' -      - ',
-		'----------',
-		' -------- ',
-		' -------- ',
-		' ---wb--- ',
-		' ---bw--- ',
-		' -------- ',
-		' -------- ',
-		'----------',
-		' -      - ',
-	],
-};
-
-export const islands: Map = {
-	name: 'Islands',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'--------  ',
-		'---wb---  ',
-		'---bw---  ',
-		'--------  ',
-		'  -    -  ',
-		'  -    -  ',
-		'  --------',
-		'  --------',
-		'  --------',
-		'  --------',
-	],
-};
-
-export const galaxy: Map = {
-	name: 'Galaxy',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'   ------   ',
-		'  --www---  ',
-		' ------w--- ',
-		'---bbb--w---',
-		'--b---b-w-b-',
-		'-b--wwb-w-b-',
-		'-b-w-bww--b-',
-		'-b-w-b---b--',
-		'---w--bbb---',
-		' ---w------ ',
-		'  ---www--  ',
-		'   ------   ',
-	],
-};
-
-export const triangle: Map = {
-	name: 'Triangle',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'    --    ',
-		'    --    ',
-		'   ----   ',
-		'   ----   ',
-		'  --wb--  ',
-		'  --bw--  ',
-		' -------- ',
-		' -------- ',
-		'----------',
-		'----------',
-	],
-};
-
-export const iphonex: Map = {
-	name: 'iPhone X',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' --  -- ',
-		'--------',
-		'--------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------',
-		'--------',
-		' ------ ',
-	],
-};
-
-export const dealWithIt: Map = {
-	name: 'Deal with it!',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'------------',
-		'--w-b-------',
-		' --b-w------',
-		'  --w-b---- ',
-		'   -------  ',
-	],
-};
-
-export const experiment: Map = {
-	name: 'Let\'s experiment',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' ------------ ',
-		'------wb------',
-		'------bw------',
-		'--------------',
-		'    -    -    ',
-		'------  ------',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'wwwwww  bbbbbb',
-	],
-};
-
-export const bigBoard: Map = {
-	name: 'Big board',
-	category: 'Special',
-	data: [
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'-------wb-------',
-		'-------bw-------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-	],
-};
-
-export const twoBoard: Map = {
-	name: 'Two board',
-	category: 'Special',
-	author: 'Aya',
-	data: [
-		'-------- --------',
-		'-------- --------',
-		'-------- --------',
-		'---wb--- ---wb---',
-		'---bw--- ---bw---',
-		'-------- --------',
-		'-------- --------',
-		'-------- --------',
-	],
-};
-
-export const test1: Map = {
-	name: 'Test1',
-	category: 'Test',
-	data: [
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-	],
-};
-
-export const test2: Map = {
-	name: 'Test2',
-	category: 'Test',
-	data: [
-		'------',
-		'------',
-		'-b--w-',
-		'-w--b-',
-		'-w--b-',
-	],
-};
-
-export const test3: Map = {
-	name: 'Test3',
-	category: 'Test',
-	data: [
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'---',
-		'b--',
-	],
-};
-
-export const test4: Map = {
-	name: 'Test4',
-	category: 'Test',
-	data: [
-		'-w--b-',
-		'-w--b-',
-		'------',
-		'-w--b-',
-		'-w--b-',
-	],
-};
-
-// 検証用: この盤面で藍(lv3)が黒で始めると何故か(?)A1に打ってしまう
-export const test6: Map = {
-	name: 'Test6',
-	category: 'Test',
-	data: [
-		'--wwwww-',
-		'wwwwwwww',
-		'wbbbwbwb',
-		'wbbbbwbb',
-		'wbwbbwbb',
-		'wwbwbbbb',
-		'--wbbbbb',
-		'-wwwww--',
-	],
-};
-
-// 検証用: この盤面で藍(lv3)が黒で始めると何故か(?)G7に打ってしまう
-export const test7: Map = {
-	name: 'Test7',
-	category: 'Test',
-	data: [
-		'b--w----',
-		'b-wwww--',
-		'bwbwwwbb',
-		'wbwwwwb-',
-		'wwwwwww-',
-		'-wwbbwwb',
-		'--wwww--',
-		'--wwww--',
-	],
-};
-
-// 検証用: この盤面で藍(lv5)が黒で始めると何故か(?)A1に打ってしまう
-export const test8: Map = {
-	name: 'Test8',
-	category: 'Test',
-	data: [
-		'--------',
-		'-----w--',
-		'w--www--',
-		'wwwwww--',
-		'bbbbwww-',
-		'wwwwww--',
-		'--www---',
-		'--ww----',
-	],
-};
diff --git a/packages/backend/src/games/reversi/package.json b/packages/backend/src/games/reversi/package.json
deleted file mode 100644
index a4415ad141..0000000000
--- a/packages/backend/src/games/reversi/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "misskey-reversi",
-  "version": "0.0.5",
-  "description": "Misskey reversi engine",
-  "keywords": [
-    "misskey"
-  ],
-  "author": "syuilo <i@syuilo.com>",
-  "license": "MIT",
-  "repository": "https://github.com/misskey-dev/misskey.git",
-  "bugs": "https://github.com/misskey-dev/misskey/issues",
-  "main": "./built/core.js",
-  "types": "./built/core.d.ts",
-  "scripts": {
-    "build": "tsc"
-  },
-  "dependencies": {}
-}
diff --git a/packages/backend/src/games/reversi/tsconfig.json b/packages/backend/src/games/reversi/tsconfig.json
deleted file mode 100644
index 851fb6b7e4..0000000000
--- a/packages/backend/src/games/reversi/tsconfig.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-	"compilerOptions": {
-		"noEmitOnError": false,
-		"noImplicitAny": false,
-		"noImplicitReturns": true,
-		"noFallthroughCasesInSwitch": true,
-		"experimentalDecorators": true,
-		"declaration": true,
-		"sourceMap": false,
-		"target": "es2017",
-		"module": "commonjs",
-		"removeComments": false,
-		"noLib": false,
-		"outDir": "./built",
-		"rootDir": "./"
-	},
-	"compileOnSave": false,
-	"include": [
-		"./core.ts"
-	]
-}
diff --git a/packages/backend/src/misc/schema.ts b/packages/backend/src/misc/schema.ts
index 4131875ef7..ae6f1bac86 100644
--- a/packages/backend/src/misc/schema.ts
+++ b/packages/backend/src/misc/schema.ts
@@ -22,8 +22,6 @@ import { packedFederationInstanceSchema } from '@/models/repositories/federation
 import { packedQueueCountSchema } from '@/models/repositories/queue';
 import { packedGalleryPostSchema } from '@/models/repositories/gallery-post';
 import { packedEmojiSchema } from '@/models/repositories/emoji';
-import { packedReversiGameSchema } from '@/models/repositories/games/reversi/game';
-import { packedReversiMatchingSchema } from '@/models/repositories/games/reversi/matching';
 
 export const refs = {
 	User: packedUserSchema,
@@ -49,8 +47,6 @@ export const refs = {
 	FederationInstance: packedFederationInstanceSchema,
 	GalleryPost: packedGalleryPostSchema,
 	Emoji: packedEmojiSchema,
-	ReversiGame: packedReversiGameSchema,
-	ReversiMatching: packedReversiMatchingSchema,
 };
 
 export type Packed<x extends keyof typeof refs> = ObjType<(typeof refs[x])['properties']>;
diff --git a/packages/backend/src/models/entities/games/reversi/game.ts b/packages/backend/src/models/entities/games/reversi/game.ts
deleted file mode 100644
index fe9b8a5ba5..0000000000
--- a/packages/backend/src/models/entities/games/reversi/game.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from '../../user';
-import { id } from '../../../id';
-
-@Entity()
-export class ReversiGame {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the ReversiGame.',
-	})
-	public createdAt: Date;
-
-	@Column('timestamp with time zone', {
-		nullable: true,
-		comment: 'The started date of the ReversiGame.',
-	})
-	public startedAt: Date | null;
-
-	@Column(id())
-	public user1Id: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user1: User | null;
-
-	@Column(id())
-	public user2Id: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public user2: User | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public user1Accepted: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public user2Accepted: boolean;
-
-	/**
-	 * どちらのプレイヤーが先行(黒)か
-	 * 1 ... user1
-	 * 2 ... user2
-	 */
-	@Column('integer', {
-		nullable: true,
-	})
-	public black: number | null;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public isStarted: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public isEnded: boolean;
-
-	@Column({
-		...id(),
-		nullable: true,
-	})
-	public winnerId: User['id'] | null;
-
-	@Column({
-		...id(),
-		nullable: true,
-	})
-	public surrendered: User['id'] | null;
-
-	@Column('jsonb', {
-		default: [],
-	})
-	public logs: {
-		at: Date;
-		color: boolean;
-		pos: number;
-	}[];
-
-	@Column('varchar', {
-		array: true, length: 64,
-	})
-	public map: string[];
-
-	@Column('varchar', {
-		length: 32,
-	})
-	public bw: string;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public isLlotheo: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public canPutEverywhere: boolean;
-
-	@Column('boolean', {
-		default: false,
-	})
-	public loopedBoard: boolean;
-
-	@Column('jsonb', {
-		nullable: true, default: null,
-	})
-	public form1: any | null;
-
-	@Column('jsonb', {
-		nullable: true, default: null,
-	})
-	public form2: any | null;
-
-	/**
-	 * ログのposを文字列としてすべて連結したもののCRC32値
-	 */
-	@Column('varchar', {
-		length: 32, nullable: true,
-	})
-	public crc32: string | null;
-}
diff --git a/packages/backend/src/models/entities/games/reversi/matching.ts b/packages/backend/src/models/entities/games/reversi/matching.ts
deleted file mode 100644
index 70bb555e2f..0000000000
--- a/packages/backend/src/models/entities/games/reversi/matching.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { PrimaryColumn, Entity, Index, JoinColumn, Column, ManyToOne } from 'typeorm';
-import { User } from '../../user';
-import { id } from '../../../id';
-
-@Entity()
-export class ReversiMatching {
-	@PrimaryColumn(id())
-	public id: string;
-
-	@Index()
-	@Column('timestamp with time zone', {
-		comment: 'The created date of the ReversiMatching.',
-	})
-	public createdAt: Date;
-
-	@Index()
-	@Column(id())
-	public parentId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public parent: User | null;
-
-	@Index()
-	@Column(id())
-	public childId: User['id'];
-
-	@ManyToOne(type => User, {
-		onDelete: 'CASCADE',
-	})
-	@JoinColumn()
-	public child: User | null;
-}
diff --git a/packages/backend/src/models/index.ts b/packages/backend/src/models/index.ts
index 7154cca550..67da347395 100644
--- a/packages/backend/src/models/index.ts
+++ b/packages/backend/src/models/index.ts
@@ -18,7 +18,6 @@ import { AccessToken } from './entities/access-token';
 import { UserNotePining } from './entities/user-note-pining';
 import { SigninRepository } from './repositories/signin';
 import { MessagingMessageRepository } from './repositories/messaging-message';
-import { ReversiGameRepository } from './repositories/games/reversi/game';
 import { UserListRepository } from './repositories/user-list';
 import { UserListJoining } from './entities/user-list-joining';
 import { UserGroupRepository } from './repositories/user-group';
@@ -30,7 +29,6 @@ import { BlockingRepository } from './repositories/blocking';
 import { NoteReactionRepository } from './repositories/note-reaction';
 import { NotificationRepository } from './repositories/notification';
 import { NoteFavoriteRepository } from './repositories/note-favorite';
-import { ReversiMatchingRepository } from './repositories/games/reversi/matching';
 import { UserPublickey } from './entities/user-publickey';
 import { UserKeypair } from './entities/user-keypair';
 import { AppRepository } from './repositories/app';
@@ -107,8 +105,6 @@ export const AuthSessions = getCustomRepository(AuthSessionRepository);
 export const AccessTokens = getRepository(AccessToken);
 export const Signins = getCustomRepository(SigninRepository);
 export const MessagingMessages = getCustomRepository(MessagingMessageRepository);
-export const ReversiGames = getCustomRepository(ReversiGameRepository);
-export const ReversiMatchings = getCustomRepository(ReversiMatchingRepository);
 export const Pages = getCustomRepository(PageRepository);
 export const PageLikes = getCustomRepository(PageLikeRepository);
 export const GalleryPosts = getCustomRepository(GalleryPostRepository);
diff --git a/packages/backend/src/models/repositories/games/reversi/game.ts b/packages/backend/src/models/repositories/games/reversi/game.ts
deleted file mode 100644
index a9e0496760..0000000000
--- a/packages/backend/src/models/repositories/games/reversi/game.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-import { User } from '@/models/entities/user';
-import { EntityRepository, Repository } from 'typeorm';
-import { Users } from '../../../index';
-import { ReversiGame } from '@/models/entities/games/reversi/game';
-import { Packed } from '@/misc/schema';
-
-@EntityRepository(ReversiGame)
-export class ReversiGameRepository extends Repository<ReversiGame> {
-	public async pack(
-		src: ReversiGame['id'] | ReversiGame,
-		me?: { id: User['id'] } | null | undefined,
-		options?: {
-			detail?: boolean
-		}
-	): Promise<Packed<'ReversiGame'>> {
-		const opts = Object.assign({
-			detail: true,
-		}, options);
-
-		const game = typeof src === 'object' ? src : await this.findOneOrFail(src);
-
-		return {
-			id: game.id,
-			createdAt: game.createdAt.toISOString(),
-			startedAt: game.startedAt && game.startedAt.toISOString(),
-			isStarted: game.isStarted,
-			isEnded: game.isEnded,
-			form1: game.form1,
-			form2: game.form2,
-			user1Accepted: game.user1Accepted,
-			user2Accepted: game.user2Accepted,
-			user1Id: game.user1Id,
-			user2Id: game.user2Id,
-			user1: await Users.pack(game.user1Id, me),
-			user2: await Users.pack(game.user2Id, me),
-			winnerId: game.winnerId,
-			winner: game.winnerId ? await Users.pack(game.winnerId, me) : null,
-			surrendered: game.surrendered,
-			black: game.black,
-			bw: game.bw,
-			isLlotheo: game.isLlotheo,
-			canPutEverywhere: game.canPutEverywhere,
-			loopedBoard: game.loopedBoard,
-			...(opts.detail ? {
-				logs: game.logs.map(log => ({
-					at: log.at.toISOString(),
-					color: log.color,
-					pos: log.pos,
-				})),
-				map: game.map,
-			} : {}),
-		};
-	}
-}
-
-export const packedReversiGameSchema = {
-	type: 'object' as const,
-	optional: false as const, nullable: false as const,
-	properties: {
-		id: {
-			type: 'string' as const,
-			optional: false as const, nullable: false as const,
-			format: 'id',
-			example: 'xxxxxxxxxx',
-		},
-		createdAt: {
-			type: 'string' as const,
-			optional: false as const, nullable: false as const,
-			format: 'date-time',
-		},
-		startedAt: {
-			type: 'string' as const,
-			optional: false as const, nullable: true as const,
-			format: 'date-time',
-		},
-		isStarted: {
-			type: 'boolean' as const,
-			optional: false as const, nullable: false as const,
-		},
-		isEnded: {
-			type: 'boolean' as const,
-			optional: false as const, nullable: false as const,
-		},
-		form1: {
-			type: 'any' as const,
-			optional: false as const, nullable: true as const,
-		},
-		form2: {
-			type: 'any' as const,
-			optional: false as const, nullable: true as const,
-		},
-		user1Accepted: {
-			type: 'boolean' as const,
-			optional: false as const, nullable: false as const,
-		},
-		user2Accepted: {
-			type: 'boolean' as const,
-			optional: false as const, nullable: false as const,
-		},
-		user1Id: {
-			type: 'string' as const,
-			optional: false as const, nullable: false as const,
-			format: 'id',
-			example: 'xxxxxxxxxx',
-		},
-		user2Id: {
-			type: 'string' as const,
-			optional: false as const, nullable: false as const,
-			format: 'id',
-			example: 'xxxxxxxxxx',
-		},
-		user1: {
-			type: 'object' as const,
-			optional: false as const, nullable: false as const,
-			ref: 'User' as const,
-		},
-		user2: {
-			type: 'object' as const,
-			optional: false as const, nullable: false as const,
-			ref: 'User' as const,
-		},
-		winnerId: {
-			type: 'string' as const,
-			optional: false as const, nullable: true as const,
-			format: 'id',
-			example: 'xxxxxxxxxx',
-		},
-		winner: {
-			type: 'object' as const,
-			optional: false as const, nullable: true as const,
-			ref: 'User' as const,
-		},
-		surrendered: {
-			type: 'string' as const,
-			optional: false as const, nullable: true as const,
-			format: 'id',
-			example: 'xxxxxxxxxx',
-		},
-		black: {
-			type: 'number' as const,
-			optional: false as const, nullable: true as const,
-		},
-		bw: {
-			type: 'string' as const,
-			optional: false as const, nullable: false as const,
-		},
-		isLlotheo: {
-			type: 'boolean' as const,
-			optional: false as const, nullable: false as const,
-		},
-		canPutEverywhere: {
-			type: 'boolean' as const,
-			optional: false as const, nullable: false as const,
-		},
-		loopedBoard: {
-			type: 'boolean' as const,
-			optional: false as const, nullable: false as const,
-		},
-		logs: {
-			type: 'array' as const,
-			optional: true as const, nullable: false as const,
-			items: {
-				type: 'object' as const,
-				optional: true as const, nullable: false as const,
-				properties: {
-					at: {
-						type: 'string' as const,
-						optional: false as const, nullable: false as const,
-						format: 'date-time',
-					},
-					color: {
-						type: 'boolean' as const,
-						optional: false as const, nullable: false as const,
-					},
-					pos: {
-						type: 'number' as const,
-						optional: false as const, nullable: false as const,
-					},
-				},
-			},
-		},
-		map: {
-			type: 'array' as const,
-			optional: true as const, nullable: false as const,
-			items: {
-				type: 'string' as const,
-				optional: false as const, nullable: false as const,
-			},
-		},
-	},
-};
diff --git a/packages/backend/src/models/repositories/games/reversi/matching.ts b/packages/backend/src/models/repositories/games/reversi/matching.ts
deleted file mode 100644
index b55f598068..0000000000
--- a/packages/backend/src/models/repositories/games/reversi/matching.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { EntityRepository, Repository } from 'typeorm';
-import { ReversiMatching } from '@/models/entities/games/reversi/matching';
-import { Users } from '../../../index';
-import { awaitAll } from '@/prelude/await-all';
-import { User } from '@/models/entities/user';
-import { Packed } from '@/misc/schema';
-
-@EntityRepository(ReversiMatching)
-export class ReversiMatchingRepository extends Repository<ReversiMatching> {
-	public async pack(
-		src: ReversiMatching['id'] | ReversiMatching,
-		me: { id: User['id'] }
-	): Promise<Packed<'ReversiMatching'>> {
-		const matching = typeof src === 'object' ? src : await this.findOneOrFail(src);
-
-		return await awaitAll({
-			id: matching.id,
-			createdAt: matching.createdAt.toISOString(),
-			parentId: matching.parentId,
-			parent: Users.pack(matching.parentId, me, {
-				detail: true,
-			}),
-			childId: matching.childId,
-			child: Users.pack(matching.childId, me, {
-				detail: true,
-			}),
-		});
-	}
-}
-
-export const packedReversiMatchingSchema = {
-	type: 'object' as const,
-	optional: false as const, nullable: false as const,
-	properties: {
-		id: {
-			type: 'string' as const,
-			optional: false as const, nullable: false as const,
-			format: 'id',
-			example: 'xxxxxxxxxx',
-		},
-		createdAt: {
-			type: 'string' as const,
-			optional: false as const, nullable: false as const,
-			format: 'date-time',
-		},
-		parentId: {
-			type: 'string' as const,
-			optional: false as const, nullable: false as const,
-			format: 'id',
-			example: 'xxxxxxxxxx',
-		},
-		parent: {
-			type: 'object' as const,
-			optional: false as const, nullable: true as const,
-			ref: 'User' as const,
-		},
-		childId: {
-			type: 'string' as const,
-			optional: false as const, nullable: false as const,
-			format: 'id',
-			example: 'xxxxxxxxxx',
-		},
-		child: {
-			type: 'object' as const,
-			optional: false as const, nullable: false as const,
-			ref: 'User' as const,
-		},
-	},
-};
diff --git a/packages/backend/src/server/api/endpoints/games/reversi/games.ts b/packages/backend/src/server/api/endpoints/games/reversi/games.ts
deleted file mode 100644
index 8b0e812ca9..0000000000
--- a/packages/backend/src/server/api/endpoints/games/reversi/games.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-import $ from 'cafy';
-import { ID } from '@/misc/cafy-id';
-import define from '../../../define';
-import { ReversiGames } from '@/models/index';
-import { makePaginationQuery } from '../../../common/make-pagination-query';
-import { Brackets } from 'typeorm';
-
-export const meta = {
-	tags: ['games'],
-
-	params: {
-		limit: {
-			validator: $.optional.num.range(1, 100),
-			default: 10,
-		},
-
-		sinceId: {
-			validator: $.optional.type(ID),
-		},
-
-		untilId: {
-			validator: $.optional.type(ID),
-		},
-
-		my: {
-			validator: $.optional.bool,
-			default: false,
-		},
-	},
-
-	res: {
-		type: 'array' as const,
-		optional: false as const, nullable: false as const,
-		items: {
-			type: 'object' as const,
-			optional: false as const, nullable: false as const,
-			properties: {
-				id: {
-					type: 'string' as const,
-					optional: false as const, nullable: false as const,
-					format: 'id',
-				},
-				createdAt: {
-					type: 'string' as const,
-					optional: false as const, nullable: false as const,
-					format: 'date-time',
-				},
-				startedAt: {
-					type: 'string' as const,
-					optional: false as const, nullable: false as const,
-					format: 'date-time',
-				},
-				isStarted: {
-					type: 'boolean' as const,
-					optional: false as const, nullable: false as const,
-				},
-				isEnded: {
-					type: 'boolean' as const,
-					optional: false as const, nullable: false as const,
-				},
-				form1: {
-					type: 'any' as const,
-					optional: false as const, nullable: true as const,
-				},
-				form2: {
-					type: 'any' as const,
-					optional: false as const, nullable: true as const,
-				},
-				user1Accepted: {
-					type: 'boolean' as const,
-					optional: false as const, nullable: false as const,
-					default: false,
-				},
-				user2Accepted: {
-					type: 'boolean' as const,
-					optional: false as const, nullable: false as const,
-					default: false,
-				},
-				user1Id: {
-					type: 'string' as const,
-					optional: false as const, nullable: false as const,
-					format: 'id',
-				},
-				user2Id: {
-					type: 'string' as const,
-					optional: false as const, nullable: false as const,
-					format: 'id',
-				},
-				user1: {
-					type: 'object' as const,
-					optional: false as const, nullable: false as const,
-					ref: 'User',
-				},
-				user2: {
-					type: 'object' as const,
-					optional: false as const, nullable: false as const,
-					ref: 'User',
-				},
-				winnerId: {
-					type: 'string' as const,
-					optional: false as const, nullable: true as const,
-					format: 'id',
-				},
-				winner: {
-					type: 'object' as const,
-					optional: false as const, nullable: true as const,
-					ref: 'User',
-				},
-				surrendered: {
-					type: 'string' as const,
-					optional: false as const, nullable: true as const,
-					format: 'id',
-				},
-				black: {
-					type: 'number' as const,
-					optional: false as const, nullable: true as const,
-				},
-				bw: {
-					type: 'string' as const,
-					optional: false as const, nullable: false as const,
-				},
-				isLlotheo: {
-					type: 'boolean' as const,
-					optional: false as const, nullable: false as const,
-				},
-				canPutEverywhere: {
-					type: 'boolean' as const,
-					optional: false as const, nullable: false as const,
-				},
-				loopedBoard: {
-					type: 'boolean' as const,
-					optional: false as const, nullable: false as const,
-				},
-			},
-		},
-	},
-};
-
-// eslint-disable-next-line import/no-default-export
-export default define(meta, async (ps, user) => {
-	const query = makePaginationQuery(ReversiGames.createQueryBuilder('game'), ps.sinceId, ps.untilId)
-		.andWhere('game.isStarted = TRUE');
-
-	if (ps.my && user) {
-		query.andWhere(new Brackets(qb => { qb
-			.where('game.user1Id = :userId', { userId: user.id })
-			.orWhere('game.user2Id = :userId', { userId: user.id });
-		}));
-	}
-
-	// Fetch games
-	const games = await query.take(ps.limit!).getMany();
-
-	return await Promise.all(games.map((g) => ReversiGames.pack(g, user, {
-		detail: false,
-	})));
-});
diff --git a/packages/backend/src/server/api/endpoints/games/reversi/games/show.ts b/packages/backend/src/server/api/endpoints/games/reversi/games/show.ts
deleted file mode 100644
index 020e9e6fc2..0000000000
--- a/packages/backend/src/server/api/endpoints/games/reversi/games/show.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-import $ from 'cafy';
-import { ID } from '@/misc/cafy-id';
-import Reversi from '../../../../../../games/reversi/core';
-import define from '../../../../define';
-import { ApiError } from '../../../../error';
-import { ReversiGames } from '@/models/index';
-
-export const meta = {
-	tags: ['games'],
-
-	params: {
-		gameId: {
-			validator: $.type(ID),
-		},
-	},
-
-	errors: {
-		noSuchGame: {
-			message: 'No such game.',
-			code: 'NO_SUCH_GAME',
-			id: 'f13a03db-fae1-46c9-87f3-43c8165419e1',
-		},
-	},
-
-	res: {
-		type: 'array' as const,
-		optional: false as const, nullable: false as const,
-		items: {
-			type: 'object' as const,
-			optional: false as const, nullable: false as const,
-			properties: {
-				id: {
-					type: 'string' as const,
-					optional: false as const, nullable: false as const,
-					format: 'id',
-				},
-				createdAt: {
-					type: 'string' as const,
-					optional: false as const, nullable: false as const,
-					format: 'date-time',
-				},
-				startedAt: {
-					type: 'string' as const,
-					optional: false as const, nullable: false as const,
-					format: 'date-time',
-				},
-				isStarted: {
-					type: 'boolean' as const,
-					optional: false as const, nullable: false as const,
-				},
-				isEnded: {
-					type: 'boolean' as const,
-					optional: false as const, nullable: false as const,
-				},
-				form1: {
-					type: 'any' as const,
-					optional: false as const, nullable: true as const,
-				},
-				form2: {
-					type: 'any' as const,
-					optional: false as const, nullable: true as const,
-				},
-				user1Accepted: {
-					type: 'boolean' as const,
-					optional: false as const, nullable: false as const,
-					default: false,
-				},
-				user2Accepted: {
-					type: 'boolean' as const,
-					optional: false as const, nullable: false as const,
-					default: false,
-				},
-				user1Id: {
-					type: 'string' as const,
-					optional: false as const, nullable: false as const,
-					format: 'id',
-				},
-				user2Id: {
-					type: 'string' as const,
-					optional: false as const, nullable: false as const,
-					format: 'id',
-				},
-				user1: {
-					type: 'object' as const,
-					optional: false as const, nullable: false as const,
-					ref: 'User',
-				},
-				user2: {
-					type: 'object' as const,
-					optional: false as const, nullable: false as const,
-					ref: 'User',
-				},
-				winnerId: {
-					type: 'string' as const,
-					optional: false as const, nullable: true as const,
-					format: 'id',
-				},
-				winner: {
-					type: 'object' as const,
-					optional: false as const, nullable: true as const,
-					ref: 'User',
-				},
-				surrendered: {
-					type: 'string' as const,
-					optional: false as const, nullable: true as const,
-					format: 'id',
-				},
-				black: {
-					type: 'number' as const,
-					optional: false as const, nullable: true as const,
-				},
-				bw: {
-					type: 'string' as const,
-					optional: false as const, nullable: false as const,
-				},
-				isLlotheo: {
-					type: 'boolean' as const,
-					optional: false as const, nullable: false as const,
-				},
-				canPutEverywhere: {
-					type: 'boolean' as const,
-					optional: false as const, nullable: false as const,
-				},
-				loopedBoard: {
-					type: 'boolean' as const,
-					optional: false as const, nullable: false as const,
-				},
-				board: {
-					type: 'array' as const,
-					optional: false as const, nullable: false as const,
-					items: {
-						type: 'any' as const,
-						optional: false as const, nullable: false as const,
-					},
-				},
-				turn: {
-					type: 'any' as const,
-					optional: false as const, nullable: false as const,
-				},
-			},
-		},
-	},
-};
-
-// eslint-disable-next-line import/no-default-export
-export default define(meta, async (ps, user) => {
-	const game = await ReversiGames.findOne(ps.gameId);
-
-	if (game == null) {
-		throw new ApiError(meta.errors.noSuchGame);
-	}
-
-	const o = new Reversi(game.map, {
-		isLlotheo: game.isLlotheo,
-		canPutEverywhere: game.canPutEverywhere,
-		loopedBoard: game.loopedBoard,
-	});
-
-	for (const log of game.logs) {
-		o.put(log.color, log.pos);
-	}
-
-	const packed = await ReversiGames.pack(game, user);
-
-	return Object.assign({
-		board: o.board,
-		turn: o.turn,
-	}, packed);
-});
diff --git a/packages/backend/src/server/api/endpoints/games/reversi/games/surrender.ts b/packages/backend/src/server/api/endpoints/games/reversi/games/surrender.ts
deleted file mode 100644
index a0eb4705ba..0000000000
--- a/packages/backend/src/server/api/endpoints/games/reversi/games/surrender.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import $ from 'cafy';
-import { ID } from '@/misc/cafy-id';
-import { publishReversiGameStream } from '@/services/stream';
-import define from '../../../../define';
-import { ApiError } from '../../../../error';
-import { ReversiGames } from '@/models/index';
-
-export const meta = {
-	tags: ['games'],
-
-	requireCredential: true as const,
-
-	params: {
-		gameId: {
-			validator: $.type(ID),
-		},
-	},
-
-	errors: {
-		noSuchGame: {
-			message: 'No such game.',
-			code: 'NO_SUCH_GAME',
-			id: 'ace0b11f-e0a6-4076-a30d-e8284c81b2df',
-		},
-
-		alreadyEnded: {
-			message: 'That game has already ended.',
-			code: 'ALREADY_ENDED',
-			id: '6c2ad4a6-cbf1-4a5b-b187-b772826cfc6d',
-		},
-
-		accessDenied: {
-			message: 'Access denied.',
-			code: 'ACCESS_DENIED',
-			id: '6e04164b-a992-4c93-8489-2123069973e1',
-		},
-	},
-};
-
-// eslint-disable-next-line import/no-default-export
-export default define(meta, async (ps, user) => {
-	const game = await ReversiGames.findOne(ps.gameId);
-
-	if (game == null) {
-		throw new ApiError(meta.errors.noSuchGame);
-	}
-
-	if (game.isEnded) {
-		throw new ApiError(meta.errors.alreadyEnded);
-	}
-
-	if ((game.user1Id !== user.id) && (game.user2Id !== user.id)) {
-		throw new ApiError(meta.errors.accessDenied);
-	}
-
-	const winnerId = game.user1Id === user.id ? game.user2Id : game.user1Id;
-
-	await ReversiGames.update(game.id, {
-		surrendered: user.id,
-		isEnded: true,
-		winnerId: winnerId,
-	});
-
-	publishReversiGameStream(game.id, 'ended', {
-		winnerId: winnerId,
-		game: await ReversiGames.pack(game.id, user),
-	});
-});
diff --git a/packages/backend/src/server/api/endpoints/games/reversi/invitations.ts b/packages/backend/src/server/api/endpoints/games/reversi/invitations.ts
deleted file mode 100644
index 0285a2f63b..0000000000
--- a/packages/backend/src/server/api/endpoints/games/reversi/invitations.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import define from '../../../define';
-import { ReversiMatchings } from '@/models/index';
-
-export const meta = {
-	tags: ['games'],
-
-	requireCredential: true as const,
-
-	res: {
-		type: 'array' as const,
-		optional: false as const, nullable: false as const,
-		items: {
-			type: 'object' as const,
-			optional: false as const, nullable: false as const,
-			properties: {
-				id: {
-					type: 'string' as const,
-					optional: false as const, nullable: false as const,
-					format: 'id',
-				},
-				createdAt: {
-					type: 'string' as const,
-					optional: false as const, nullable: false as const,
-					format: 'date-time',
-				},
-				parentId: {
-					type: 'string' as const,
-					optional: false as const, nullable: false as const,
-					format: 'id',
-				},
-				parent: {
-					type: 'object' as const,
-					optional: false as const, nullable: false as const,
-					ref: 'User',
-				},
-				childId: {
-					type: 'string' as const,
-					optional: false as const, nullable: false as const,
-					format: 'id',
-				},
-				child: {
-					type: 'object' as const,
-					optional: false as const, nullable: false as const,
-					ref: 'User',
-				},
-			},
-		},
-	},
-};
-
-// eslint-disable-next-line import/no-default-export
-export default define(meta, async (ps, user) => {
-	// Find session
-	const invitations = await ReversiMatchings.find({
-		childId: user.id,
-	});
-
-	return await Promise.all(invitations.map((i) => ReversiMatchings.pack(i, user)));
-});
diff --git a/packages/backend/src/server/api/endpoints/games/reversi/match.ts b/packages/backend/src/server/api/endpoints/games/reversi/match.ts
deleted file mode 100644
index b1d958306d..0000000000
--- a/packages/backend/src/server/api/endpoints/games/reversi/match.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import $ from 'cafy';
-import { ID } from '@/misc/cafy-id';
-import { publishMainStream, publishReversiStream } from '@/services/stream';
-import { eighteight } from '../../../../../games/reversi/maps';
-import define from '../../../define';
-import { ApiError } from '../../../error';
-import { getUser } from '../../../common/getters';
-import { genId } from '@/misc/gen-id';
-import { ReversiMatchings, ReversiGames } from '@/models/index';
-import { ReversiGame } from '@/models/entities/games/reversi/game';
-import { ReversiMatching } from '@/models/entities/games/reversi/matching';
-
-export const meta = {
-	tags: ['games'],
-
-	requireCredential: true as const,
-
-	params: {
-		userId: {
-			validator: $.type(ID),
-		},
-	},
-
-	errors: {
-		noSuchUser: {
-			message: 'No such user.',
-			code: 'NO_SUCH_USER',
-			id: '0b4f0559-b484-4e31-9581-3f73cee89b28',
-		},
-
-		isYourself: {
-			message: 'Target user is yourself.',
-			code: 'TARGET_IS_YOURSELF',
-			id: '96fd7bd6-d2bc-426c-a865-d055dcd2828e',
-		},
-	},
-};
-
-// eslint-disable-next-line import/no-default-export
-export default define(meta, async (ps, user) => {
-	// Myself
-	if (ps.userId === user.id) {
-		throw new ApiError(meta.errors.isYourself);
-	}
-
-	// Find session
-	const exist = await ReversiMatchings.findOne({
-		parentId: ps.userId,
-		childId: user.id,
-	});
-
-	if (exist) {
-		// Destroy session
-		ReversiMatchings.delete(exist.id);
-
-		// Create game
-		const game = await ReversiGames.save({
-			id: genId(),
-			createdAt: new Date(),
-			user1Id: exist.parentId,
-			user2Id: user.id,
-			user1Accepted: false,
-			user2Accepted: false,
-			isStarted: false,
-			isEnded: false,
-			logs: [],
-			map: eighteight.data,
-			bw: 'random',
-			isLlotheo: false,
-		} as Partial<ReversiGame>);
-
-		publishReversiStream(exist.parentId, 'matched', await ReversiGames.pack(game, { id: exist.parentId }));
-
-		const other = await ReversiMatchings.count({
-			childId: user.id,
-		});
-
-		if (other == 0) {
-			publishMainStream(user.id, 'reversiNoInvites');
-		}
-
-		return await ReversiGames.pack(game, user);
-	} else {
-		// Fetch child
-		const child = await getUser(ps.userId).catch(e => {
-			if (e.id === '15348ddd-432d-49c2-8a5a-8069753becff') throw new ApiError(meta.errors.noSuchUser);
-			throw e;
-		});
-
-		// 以前のセッションはすべて削除しておく
-		await ReversiMatchings.delete({
-			parentId: user.id,
-		});
-
-		// セッションを作成
-		const matching = await ReversiMatchings.save({
-			id: genId(),
-			createdAt: new Date(),
-			parentId: user.id,
-			childId: child.id,
-		} as ReversiMatching);
-
-		const packed = await ReversiMatchings.pack(matching, child);
-		publishReversiStream(child.id, 'invited', packed);
-		publishMainStream(child.id, 'reversiInvited', packed);
-
-		return;
-	}
-});
diff --git a/packages/backend/src/server/api/endpoints/games/reversi/match/cancel.ts b/packages/backend/src/server/api/endpoints/games/reversi/match/cancel.ts
deleted file mode 100644
index 3ef753bcd0..0000000000
--- a/packages/backend/src/server/api/endpoints/games/reversi/match/cancel.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import define from '../../../../define';
-import { ReversiMatchings } from '@/models/index';
-
-export const meta = {
-	tags: ['games'],
-
-	requireCredential: true as const,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default define(meta, async (ps, user) => {
-	await ReversiMatchings.delete({
-		parentId: user.id,
-	});
-});
diff --git a/packages/backend/src/server/api/endpoints/users/stats.ts b/packages/backend/src/server/api/endpoints/users/stats.ts
index bd62e7fb21..84bbd16f0b 100644
--- a/packages/backend/src/server/api/endpoints/users/stats.ts
+++ b/packages/backend/src/server/api/endpoints/users/stats.ts
@@ -2,7 +2,7 @@ import $ from 'cafy';
 import define from '../../define';
 import { ApiError } from '../../error';
 import { ID } from '@/misc/cafy-id';
-import { DriveFiles, Followings, NoteFavorites, NoteReactions, Notes, PageLikes, PollVotes, ReversiGames, Users } from '@/models/index';
+import { DriveFiles, Followings, NoteFavorites, NoteReactions, Notes, PageLikes, PollVotes, Users } from '@/models/index';
 
 export const meta = {
 	tags: ['users'],
@@ -50,7 +50,6 @@ export default define(meta, async (ps, me) => {
 		pageLikedCount,
 		driveFilesCount,
 		driveUsage,
-		reversiCount,
 	] = await Promise.all([
 		Notes.createQueryBuilder('note')
 			.where('note.userId = :userId', { userId: user.id })
@@ -113,10 +112,6 @@ export default define(meta, async (ps, me) => {
 			.where('file.userId = :userId', { userId: user.id })
 			.getCount(),
 		DriveFiles.calcDriveUsageOf(user),
-		ReversiGames.createQueryBuilder('game')
-			.where('game.user1Id = :userId', { userId: user.id })
-			.orWhere('game.user2Id = :userId', { userId: user.id })
-			.getCount(),
 	]);
 
 	return {
@@ -140,6 +135,5 @@ export default define(meta, async (ps, me) => {
 		pageLikedCount,
 		driveFilesCount,
 		driveUsage,
-		reversiCount,
 	};
 });
diff --git a/packages/backend/src/server/api/stream/channels/games/reversi-game.ts b/packages/backend/src/server/api/stream/channels/games/reversi-game.ts
deleted file mode 100644
index 314db48b5e..0000000000
--- a/packages/backend/src/server/api/stream/channels/games/reversi-game.ts
+++ /dev/null
@@ -1,372 +0,0 @@
-import autobind from 'autobind-decorator';
-import * as CRC32 from 'crc-32';
-import { publishReversiGameStream } from '@/services/stream';
-import Reversi from '../../../../../games/reversi/core';
-import * as maps from '../../../../../games/reversi/maps';
-import Channel from '../../channel';
-import { ReversiGame } from '@/models/entities/games/reversi/game';
-import { ReversiGames, Users } from '@/models/index';
-import { User } from '@/models/entities/user';
-
-export default class extends Channel {
-	public readonly chName = 'gamesReversiGame';
-	public static shouldShare = false;
-	public static requireCredential = false;
-
-	private gameId: ReversiGame['id'] | null = null;
-	private watchers: Record<User['id'], Date> = {};
-	private emitWatchersIntervalId: ReturnType<typeof setInterval>;
-
-	@autobind
-	public async init(params: any) {
-		this.gameId = params.gameId;
-
-		// Subscribe game stream
-		this.subscriber.on(`reversiGameStream:${this.gameId}`, this.onEvent);
-		this.emitWatchersIntervalId = setInterval(this.emitWatchers, 5000);
-
-		const game = await ReversiGames.findOne(this.gameId!);
-		if (game == null) throw new Error('game not found');
-
-		// 観戦者イベント
-		this.watch(game);
-	}
-
-	@autobind
-	private onEvent(data: any) {
-		if (data.type === 'watching') {
-			const id = data.body;
-			this.watchers[id] = new Date();
-		} else {
-			this.send(data);
-		}
-	}
-
-	@autobind
-	private async emitWatchers() {
-		const now = new Date();
-
-		// Remove not watching users
-		for (const [userId, date] of Object.entries(this.watchers)) {
-			if (now.getTime() - date.getTime() > 5000) delete this.watchers[userId];
-		}
-
-		const users = await Users.packMany(Object.keys(this.watchers), null, { detail: false });
-
-		this.send({
-			type: 'watchers',
-			body: users,
-		});
-	}
-
-	@autobind
-	public dispose() {
-		// Unsubscribe events
-		this.subscriber.off(`reversiGameStream:${this.gameId}`, this.onEvent);
-		clearInterval(this.emitWatchersIntervalId);
-	}
-
-	@autobind
-	public onMessage(type: string, body: any) {
-		switch (type) {
-			case 'accept': this.accept(true); break;
-			case 'cancelAccept': this.accept(false); break;
-			case 'updateSettings': this.updateSettings(body.key, body.value); break;
-			case 'initForm': this.initForm(body); break;
-			case 'updateForm': this.updateForm(body.id, body.value); break;
-			case 'message': this.message(body); break;
-			case 'set': this.set(body.pos); break;
-			case 'check': this.check(body.crc32); break;
-		}
-	}
-
-	@autobind
-	private async updateSettings(key: string, value: any) {
-		if (this.user == null) return;
-
-		const game = await ReversiGames.findOne(this.gameId!);
-		if (game == null) throw new Error('game not found');
-
-		if (game.isStarted) return;
-		if ((game.user1Id !== this.user.id) && (game.user2Id !== this.user.id)) return;
-		if ((game.user1Id === this.user.id) && game.user1Accepted) return;
-		if ((game.user2Id === this.user.id) && game.user2Accepted) return;
-
-		if (!['map', 'bw', 'isLlotheo', 'canPutEverywhere', 'loopedBoard'].includes(key)) return;
-
-		await ReversiGames.update(this.gameId!, {
-			[key]: value,
-		});
-
-		publishReversiGameStream(this.gameId!, 'updateSettings', {
-			key: key,
-			value: value,
-		});
-	}
-
-	@autobind
-	private async initForm(form: any) {
-		if (this.user == null) return;
-
-		const game = await ReversiGames.findOne(this.gameId!);
-		if (game == null) throw new Error('game not found');
-
-		if (game.isStarted) return;
-		if ((game.user1Id !== this.user.id) && (game.user2Id !== this.user.id)) return;
-
-		const set = game.user1Id === this.user.id ? {
-			form1: form,
-		} : {
-			form2: form,
-		};
-
-		await ReversiGames.update(this.gameId!, set);
-
-		publishReversiGameStream(this.gameId!, 'initForm', {
-			userId: this.user.id,
-			form,
-		});
-	}
-
-	@autobind
-	private async updateForm(id: string, value: any) {
-		if (this.user == null) return;
-
-		const game = await ReversiGames.findOne(this.gameId!);
-		if (game == null) throw new Error('game not found');
-
-		if (game.isStarted) return;
-		if ((game.user1Id !== this.user.id) && (game.user2Id !== this.user.id)) return;
-
-		const form = game.user1Id === this.user.id ? game.form2 : game.form1;
-
-		const item = form.find((i: any) => i.id == id);
-
-		if (item == null) return;
-
-		item.value = value;
-
-		const set = game.user1Id === this.user.id ? {
-			form2: form,
-		} : {
-				form1: form,
-			};
-
-		await ReversiGames.update(this.gameId!, set);
-
-		publishReversiGameStream(this.gameId!, 'updateForm', {
-			userId: this.user.id,
-			id,
-			value,
-		});
-	}
-
-	@autobind
-	private async message(message: any) {
-		if (this.user == null) return;
-
-		message.id = Math.random();
-		publishReversiGameStream(this.gameId!, 'message', {
-			userId: this.user.id,
-			message,
-		});
-	}
-
-	@autobind
-	private async accept(accept: boolean) {
-		if (this.user == null) return;
-
-		const game = await ReversiGames.findOne(this.gameId!);
-		if (game == null) throw new Error('game not found');
-
-		if (game.isStarted) return;
-
-		let bothAccepted = false;
-
-		if (game.user1Id === this.user.id) {
-			await ReversiGames.update(this.gameId!, {
-				user1Accepted: accept,
-			});
-
-			publishReversiGameStream(this.gameId!, 'changeAccepts', {
-				user1: accept,
-				user2: game.user2Accepted,
-			});
-
-			if (accept && game.user2Accepted) bothAccepted = true;
-		} else if (game.user2Id === this.user.id) {
-			await ReversiGames.update(this.gameId!, {
-				user2Accepted: accept,
-			});
-
-			publishReversiGameStream(this.gameId!, 'changeAccepts', {
-				user1: game.user1Accepted,
-				user2: accept,
-			});
-
-			if (accept && game.user1Accepted) bothAccepted = true;
-		} else {
-			return;
-		}
-
-		if (bothAccepted) {
-			// 3秒後、まだacceptされていたらゲーム開始
-			setTimeout(async () => {
-				const freshGame = await ReversiGames.findOne(this.gameId!);
-				if (freshGame == null || freshGame.isStarted || freshGame.isEnded) return;
-				if (!freshGame.user1Accepted || !freshGame.user2Accepted) return;
-
-				let bw: number;
-				if (freshGame.bw == 'random') {
-					bw = Math.random() > 0.5 ? 1 : 2;
-				} else {
-					bw = parseInt(freshGame.bw, 10);
-				}
-
-				function getRandomMap() {
-					const mapCount = Object.entries(maps).length;
-					const rnd = Math.floor(Math.random() * mapCount);
-					return Object.values(maps)[rnd].data;
-				}
-
-				const map = freshGame.map != null ? freshGame.map : getRandomMap();
-
-				await ReversiGames.update(this.gameId!, {
-					startedAt: new Date(),
-					isStarted: true,
-					black: bw,
-					map: map,
-				});
-
-				//#region 盤面に最初から石がないなどして始まった瞬間に勝敗が決定する場合があるのでその処理
-				const o = new Reversi(map, {
-					isLlotheo: freshGame.isLlotheo,
-					canPutEverywhere: freshGame.canPutEverywhere,
-					loopedBoard: freshGame.loopedBoard,
-				});
-
-				if (o.isEnded) {
-					let winner;
-					if (o.winner === true) {
-						winner = freshGame.black == 1 ? freshGame.user1Id : freshGame.user2Id;
-					} else if (o.winner === false) {
-						winner = freshGame.black == 1 ? freshGame.user2Id : freshGame.user1Id;
-					} else {
-						winner = null;
-					}
-
-					await ReversiGames.update(this.gameId!, {
-						isEnded: true,
-						winnerId: winner,
-					});
-
-					publishReversiGameStream(this.gameId!, 'ended', {
-						winnerId: winner,
-						game: await ReversiGames.pack(this.gameId!, this.user),
-					});
-				}
-				//#endregion
-
-				publishReversiGameStream(this.gameId!, 'started',
-					await ReversiGames.pack(this.gameId!, this.user));
-			}, 3000);
-		}
-	}
-
-	// 石を打つ
-	@autobind
-	private async set(pos: number) {
-		if (this.user == null) return;
-
-		const game = await ReversiGames.findOne(this.gameId!);
-		if (game == null) throw new Error('game not found');
-
-		if (!game.isStarted) return;
-		if (game.isEnded) return;
-		if ((game.user1Id !== this.user.id) && (game.user2Id !== this.user.id)) return;
-
-		const myColor =
-			((game.user1Id === this.user.id) && game.black == 1) || ((game.user2Id === this.user.id) && game.black == 2)
-				? true
-				: false;
-
-		const o = new Reversi(game.map, {
-			isLlotheo: game.isLlotheo,
-			canPutEverywhere: game.canPutEverywhere,
-			loopedBoard: game.loopedBoard,
-		});
-
-		// 盤面の状態を再生
-		for (const log of game.logs) {
-			o.put(log.color, log.pos);
-		}
-
-		if (o.turn !== myColor) return;
-
-		if (!o.canPut(myColor, pos)) return;
-		o.put(myColor, pos);
-
-		let winner;
-		if (o.isEnded) {
-			if (o.winner === true) {
-				winner = game.black == 1 ? game.user1Id : game.user2Id;
-			} else if (o.winner === false) {
-				winner = game.black == 1 ? game.user2Id : game.user1Id;
-			} else {
-				winner = null;
-			}
-		}
-
-		const log = {
-			at: new Date(),
-			color: myColor,
-			pos,
-		};
-
-		const crc32 = CRC32.str(game.logs.map(x => x.pos.toString()).join('') + pos.toString()).toString();
-
-		game.logs.push(log);
-
-		await ReversiGames.update(this.gameId!, {
-			crc32,
-			isEnded: o.isEnded,
-			winnerId: winner,
-			logs: game.logs,
-		});
-
-		publishReversiGameStream(this.gameId!, 'set', Object.assign(log, {
-			next: o.turn,
-		}));
-
-		if (o.isEnded) {
-			publishReversiGameStream(this.gameId!, 'ended', {
-				winnerId: winner,
-				game: await ReversiGames.pack(this.gameId!, this.user),
-			});
-		}
-	}
-
-	@autobind
-	private async check(crc32: string | number) {
-		const game = await ReversiGames.findOne(this.gameId!);
-		if (game == null) throw new Error('game not found');
-
-		if (!game.isStarted) return;
-
-		if (crc32.toString() !== game.crc32) {
-			this.send('rescue', await ReversiGames.pack(game, this.user));
-		}
-
-		// ついでに観戦者イベントを発行
-		this.watch(game);
-	}
-
-	@autobind
-	private watch(game: ReversiGame) {
-		if (this.user != null) {
-			if ((game.user1Id !== this.user.id) && (game.user2Id !== this.user.id)) {
-				publishReversiGameStream(this.gameId!, 'watching', this.user.id);
-			}
-		}
-	}
-}
diff --git a/packages/backend/src/server/api/stream/channels/games/reversi.ts b/packages/backend/src/server/api/stream/channels/games/reversi.ts
deleted file mode 100644
index 121560ff87..0000000000
--- a/packages/backend/src/server/api/stream/channels/games/reversi.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import autobind from 'autobind-decorator';
-import { publishMainStream } from '@/services/stream';
-import Channel from '../../channel';
-import { ReversiMatchings } from '@/models/index';
-
-export default class extends Channel {
-	public readonly chName = 'gamesReversi';
-	public static shouldShare = true;
-	public static requireCredential = true;
-
-	@autobind
-	public async init(params: any) {
-		// Subscribe reversi stream
-		this.subscriber.on(`reversiStream:${this.user!.id}`, data => {
-			this.send(data);
-		});
-	}
-
-	@autobind
-	public async onMessage(type: string, body: any) {
-		switch (type) {
-			case 'ping': {
-				if (body.id == null) return;
-				const matching = await ReversiMatchings.findOne({
-					parentId: this.user!.id,
-					childId: body.id,
-				});
-				if (matching == null) return;
-				publishMainStream(matching.childId, 'reversiInvited', await ReversiMatchings.pack(matching, { id: matching.childId }));
-				break;
-			}
-		}
-	}
-}
diff --git a/packages/backend/src/server/api/stream/channels/index.ts b/packages/backend/src/server/api/stream/channels/index.ts
index 89d93f2da3..f3826c4cf7 100644
--- a/packages/backend/src/server/api/stream/channels/index.ts
+++ b/packages/backend/src/server/api/stream/channels/index.ts
@@ -13,8 +13,6 @@ import drive from './drive';
 import hashtag from './hashtag';
 import channel from './channel';
 import admin from './admin';
-import gamesReversi from './games/reversi';
-import gamesReversiGame from './games/reversi-game';
 
 export default {
 	main,
@@ -32,6 +30,4 @@ export default {
 	hashtag,
 	channel,
 	admin,
-	gamesReversi,
-	gamesReversiGame,
 };
diff --git a/packages/backend/src/server/api/stream/types.ts b/packages/backend/src/server/api/stream/types.ts
index f4302f64a0..168f1b3448 100644
--- a/packages/backend/src/server/api/stream/types.ts
+++ b/packages/backend/src/server/api/stream/types.ts
@@ -11,7 +11,6 @@ import { Emoji } from '@/models/entities/emoji';
 import { UserList } from '@/models/entities/user-list';
 import { MessagingMessage } from '@/models/entities/messaging-message';
 import { UserGroup } from '@/models/entities/user-group';
-import { ReversiGame } from '@/models/entities/games/reversi/game';
 import { AbuseUserReport } from '@/models/entities/abuse-user-report';
 import { Signin } from '@/models/entities/signin';
 import { Page } from '@/models/entities/page';
@@ -77,8 +76,6 @@ export interface MainStreamTypes {
 	readAllChannels: undefined;
 	unreadChannel: Note['id'];
 	myTokenRegenerated: undefined;
-	reversiNoInvites: undefined;
-	reversiInvited: Packed<'ReversiMatching'>;
 	signin: Signin;
 	registryUpdated: {
 		scope?: string[];
@@ -158,47 +155,6 @@ export interface MessagingIndexStreamTypes {
 	message: Packed<'MessagingMessage'>;
 }
 
-export interface ReversiStreamTypes {
-	matched: Packed<'ReversiGame'>;
-	invited: Packed<'ReversiMatching'>;
-}
-
-export interface ReversiGameStreamTypes {
-	started: Packed<'ReversiGame'>;
-	ended: {
-		winnerId?: User['id'] | null,
-		game: Packed<'ReversiGame'>;
-	};
-	updateSettings: {
-		key: string;
-		value: FIXME;
-	};
-	initForm: {
-		userId: User['id'];
-		form: FIXME;
-	};
-	updateForm: {
-		userId: User['id'];
-		id: string;
-		value: FIXME;
-	};
-	message: {
-		userId: User['id'];
-		message: FIXME;
-	};
-	changeAccepts: {
-		user1: boolean;
-		user2: boolean;
-	};
-	set: {
-		at: Date;
-		color: boolean;
-		pos: number;
-		next: boolean;
-	};
-	watching: User['id'];
-}
-
 export interface AdminStreamTypes {
 	newAbuseUserReport: {
 		id: AbuseUserReport['id'];
@@ -268,14 +224,6 @@ export type StreamMessages = {
 		name: `messagingIndexStream:${User['id']}`;
 		payload: EventUnionFromDictionary<MessagingIndexStreamTypes>;
 	};
-	reversi: {
-		name: `reversiStream:${User['id']}`;
-		payload: EventUnionFromDictionary<ReversiStreamTypes>;
-	};
-	reversiGame: {
-		name: `reversiGameStream:${ReversiGame['id']}`;
-		payload: EventUnionFromDictionary<ReversiGameStreamTypes>;
-	};
 	admin: {
 		name: `adminStream:${User['id']}`;
 		payload: EventUnionFromDictionary<AdminStreamTypes>;
diff --git a/packages/backend/src/server/web/index.ts b/packages/backend/src/server/web/index.ts
index 5623f7db83..e95a115aec 100644
--- a/packages/backend/src/server/web/index.ts
+++ b/packages/backend/src/server/web/index.ts
@@ -390,9 +390,6 @@ router.get('/cli', async ctx => {
 const override = (source: string, target: string, depth: number = 0) =>
 	[, ...target.split('/').filter(x => x), ...source.split('/').filter(x => x).splice(depth)].join('/');
 
-router.get('/othello', async ctx => ctx.redirect(override(ctx.URL.pathname, 'games/reversi', 1)));
-router.get('/reversi', async ctx => ctx.redirect(override(ctx.URL.pathname, 'games')));
-
 router.get('/flush', async ctx => {
 	await ctx.render('flush');
 });
diff --git a/packages/backend/src/services/stream.ts b/packages/backend/src/services/stream.ts
index 7d11ff3f45..c0cefe9af4 100644
--- a/packages/backend/src/services/stream.ts
+++ b/packages/backend/src/services/stream.ts
@@ -2,7 +2,6 @@ import { redisClient } from '../db/redis';
 import { User } from '@/models/entities/user';
 import { Note } from '@/models/entities/note';
 import { UserList } from '@/models/entities/user-list';
-import { ReversiGame } from '@/models/entities/games/reversi/game';
 import { UserGroup } from '@/models/entities/user-group';
 import config from '@/config/index';
 import { Antenna } from '@/models/entities/antenna';
@@ -20,8 +19,6 @@ import {
 	MessagingIndexStreamTypes,
 	MessagingStreamTypes,
 	NoteStreamTypes,
-	ReversiGameStreamTypes,
-	ReversiStreamTypes,
 	UserListStreamTypes,
 	UserStreamTypes,
 } from '@/server/api/stream/types';
@@ -90,14 +87,6 @@ class Publisher {
 		this.publish(`messagingIndexStream:${userId}`, type, typeof value === 'undefined' ? null : value);
 	};
 
-	public publishReversiStream = <K extends keyof ReversiStreamTypes>(userId: User['id'], type: K, value?: ReversiStreamTypes[K]): void => {
-		this.publish(`reversiStream:${userId}`, type, typeof value === 'undefined' ? null : value);
-	};
-
-	public publishReversiGameStream = <K extends keyof ReversiGameStreamTypes>(gameId: ReversiGame['id'], type: K, value?: ReversiGameStreamTypes[K]): void => {
-		this.publish(`reversiGameStream:${gameId}`, type, typeof value === 'undefined' ? null : value);
-	};
-
 	public publishNotesStream = (note: Packed<'Note'>): void => {
 		this.publish('notesStream', null, note);
 	};
@@ -124,6 +113,4 @@ export const publishAntennaStream = publisher.publishAntennaStream;
 export const publishMessagingStream = publisher.publishMessagingStream;
 export const publishGroupMessagingStream = publisher.publishGroupMessagingStream;
 export const publishMessagingIndexStream = publisher.publishMessagingIndexStream;
-export const publishReversiStream = publisher.publishReversiStream;
-export const publishReversiGameStream = publisher.publishReversiGameStream;
 export const publishAdminStream = publisher.publishAdminStream;
diff --git a/packages/client/src/menu.ts b/packages/client/src/menu.ts
index 98a892d569..184779f21f 100644
--- a/packages/client/src/menu.ts
+++ b/packages/client/src/menu.ts
@@ -163,11 +163,6 @@ export const menuDef = reactive({
 		icon: 'fas fa-laugh',
 		to: '/emojis',
 	},
-	games: {
-		title: 'games',
-		icon: 'fas fa-gamepad',
-		to: '/games/reversi',
-	},
 	scratchpad: {
 		title: 'scratchpad',
 		icon: 'fas fa-terminal',
diff --git a/packages/client/src/pages/reversi/game.board.vue b/packages/client/src/pages/reversi/game.board.vue
deleted file mode 100644
index eb6fef2799..0000000000
--- a/packages/client/src/pages/reversi/game.board.vue
+++ /dev/null
@@ -1,528 +0,0 @@
-<template>
-<div class="xqnhankfuuilcwvhgsopeqncafzsquya">
-	<header><b><MkA :to="userPage(blackUser)"><MkUserName :user="blackUser"/></MkA></b>({{ $ts._reversi.black }}) vs <b><MkA :to="userPage(whiteUser)"><MkUserName :user="whiteUser"/></MkA></b>({{ $ts._reversi.white }})</header>
-
-	<div style="overflow: hidden; line-height: 28px;">
-		<p v-if="!iAmPlayer && !game.isEnded" class="turn">
-			<Mfm :key="'turn:' + turnUser().name" :text="$t('_reversi.turnOf', { name: turnUser().name })" :plain="true" :custom-emojis="turnUser().emojis"/>
-			<MkEllipsis/>
-		</p>
-		<p v-if="logPos != logs.length" class="turn">
-			<Mfm :key="'past-turn-of:' + turnUser().name" :text="$t('_reversi.pastTurnOf', { name: turnUser().name })" :plain="true" :custom-emojis="turnUser().emojis"/>
-		</p>
-		<p v-if="iAmPlayer && !game.isEnded && !isMyTurn()" class="turn1">{{ $ts._reversi.opponentTurn }}<MkEllipsis/></p>
-		<p v-if="iAmPlayer && !game.isEnded && isMyTurn()" class="turn2" style="animation: tada 1s linear infinite both;">{{ $ts._reversi.myTurn }}</p>
-		<p v-if="game.isEnded && logPos == logs.length" class="result">
-			<template v-if="game.winner">
-				<Mfm :key="'won'" :text="$t('_reversi.won', { name: game.winner.name })" :plain="true" :custom-emojis="game.winner.emojis"/>
-				<span v-if="game.surrendered != null"> ({{ $ts._reversi.surrendered }})</span>
-			</template>
-			<template v-else>{{ $ts._reversi.drawn }}</template>
-		</p>
-	</div>
-
-	<div class="board">
-		<div v-if="$store.state.gamesReversiShowBoardLabels" class="labels-x">
-			<span v-for="i in game.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
-		</div>
-		<div class="flex">
-			<div v-if="$store.state.gamesReversiShowBoardLabels" class="labels-y">
-				<div v-for="i in game.map.length">{{ i }}</div>
-			</div>
-			<div class="cells" :style="cellsStyle">
-				<div v-for="(stone, i) in o.board"
-					:class="{ empty: stone == null, none: o.map[i] == 'null', isEnded: game.isEnded, myTurn: !game.isEnded && isMyTurn(), can: turnUser() ? o.canPut(turnUser().id == blackUser.id, i) : null, prev: o.prevPos == i }"
-					:title="`${String.fromCharCode(65 + o.transformPosToXy(i)[0])}${o.transformPosToXy(i)[1] + 1}`"
-					@click="set(i)"
-				>
-					<template v-if="$store.state.gamesReversiUseAvatarStones || true">
-						<img v-if="stone === true" :src="blackUser.avatarUrl" alt="black">
-						<img v-if="stone === false" :src="whiteUser.avatarUrl" alt="white">
-					</template>
-					<template v-else>
-						<i v-if="stone === true" class="fas fa-circle"></i>
-						<i v-if="stone === false" class="far fa-circle"></i>
-					</template>
-				</div>
-			</div>
-			<div v-if="$store.state.gamesReversiShowBoardLabels" class="labels-y">
-				<div v-for="i in game.map.length">{{ i }}</div>
-			</div>
-		</div>
-		<div v-if="$store.state.gamesReversiShowBoardLabels" class="labels-x">
-			<span v-for="i in game.map[0].length">{{ String.fromCharCode(64 + i) }}</span>
-		</div>
-	</div>
-
-	<p class="status"><b>{{ $t('_reversi.turnCount', { count: logPos }) }}</b> {{ $ts._reversi.black }}:{{ o.blackCount }} {{ $ts._reversi.white }}:{{ o.whiteCount }} {{ $ts._reversi.total }}:{{ o.blackCount + o.whiteCount }}</p>
-
-	<div v-if="!game.isEnded && iAmPlayer" class="actions">
-		<MkButton inline @click="surrender">{{ $ts._reversi.surrender }}</MkButton>
-	</div>
-
-	<div v-if="game.isEnded" class="player">
-		<span>{{ logPos }} / {{ logs.length }}</span>
-		<div v-if="!autoplaying" class="buttons">
-			<MkButton inline :disabled="logPos == 0" @click="logPos = 0"><i class="fas fa-angle-double-left"></i></MkButton>
-			<MkButton inline :disabled="logPos == 0" @click="logPos--"><i class="fas fa-angle-left"></i></MkButton>
-			<MkButton inline :disabled="logPos == logs.length" @click="logPos++"><i class="fas fa-angle-right"></i></MkButton>
-			<MkButton inline :disabled="logPos == logs.length" @click="logPos = logs.length"><i class="fas fa-angle-double-right"></i></MkButton>
-		</div>
-		<MkButton :disabled="autoplaying" style="margin: var(--margin) auto 0 auto;" @click="autoplay()"><i class="fas fa-play"></i></MkButton>
-	</div>
-
-	<div class="info">
-		<p v-if="game.isLlotheo">{{ $ts._reversi.isLlotheo }}</p>
-		<p v-if="game.loopedBoard">{{ $ts._reversi.loopedMap }}</p>
-		<p v-if="game.canPutEverywhere">{{ $ts._reversi.canPutEverywhere }}</p>
-	</div>
-
-	<div class="watchers">
-		<MkAvatar v-for="user in watchers" :key="user.id" :user="user" class="avatar"/>
-	</div>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import * as CRC32 from 'crc-32';
-import Reversi, { Color } from '@/scripts/games/reversi/core';
-import { url } from '@/config';
-import MkButton from '@/components/ui/button.vue';
-import { userPage } from '@/filters/user';
-import * as os from '@/os';
-import * as sound from '@/scripts/sound';
-
-export default defineComponent({
-	components: {
-		MkButton
-	},
-
-	props: {
-		initGame: {
-			type: Object,
-			require: true
-		},
-		connection: {
-			type: Object,
-			require: true
-		},
-	},
-
-	data() {
-		return {
-			game: JSON.parse(JSON.stringify(this.initGame)),
-			o: null as Reversi,
-			logs: [],
-			logPos: 0,
-			watchers: [],
-			pollingClock: null,
-		};
-	},
-
-	computed: {
-		iAmPlayer(): boolean {
-			if (!this.$i) return false;
-			return this.game.user1Id == this.$i.id || this.game.user2Id == this.$i.id;
-		},
-
-		myColor(): Color {
-			if (!this.iAmPlayer) return null;
-			if (this.game.user1Id == this.$i.id && this.game.black == 1) return true;
-			if (this.game.user2Id == this.$i.id && this.game.black == 2) return true;
-			return false;
-		},
-
-		opColor(): Color {
-			if (!this.iAmPlayer) return null;
-			return this.myColor === true ? false : true;
-		},
-
-		blackUser(): any {
-			return this.game.black == 1 ? this.game.user1 : this.game.user2;
-		},
-
-		whiteUser(): any {
-			return this.game.black == 1 ? this.game.user2 : this.game.user1;
-		},
-
-		cellsStyle(): any {
-			return {
-				'grid-template-rows': `repeat(${this.game.map.length}, 1fr)`,
-				'grid-template-columns': `repeat(${this.game.map[0].length}, 1fr)`
-			};
-		}
-	},
-
-	watch: {
-		logPos(v) {
-			if (!this.game.isEnded) return;
-			const o = new Reversi(this.game.map, {
-				isLlotheo: this.game.isLlotheo,
-				canPutEverywhere: this.game.canPutEverywhere,
-				loopedBoard: this.game.loopedBoard
-			});
-			for (const log of this.logs.slice(0, v)) {
-				o.put(log.color, log.pos);
-			}
-			this.o = o;
-			//this.$forceUpdate();
-		}
-	},
-
-	created() {
-		this.o = new Reversi(this.game.map, {
-			isLlotheo: this.game.isLlotheo,
-			canPutEverywhere: this.game.canPutEverywhere,
-			loopedBoard: this.game.loopedBoard
-		});
-
-		for (const log of this.game.logs) {
-			this.o.put(log.color, log.pos);
-		}
-
-		this.logs = this.game.logs;
-		this.logPos = this.logs.length;
-
-		// 通信を取りこぼしてもいいように定期的にポーリングさせる
-		if (this.game.isStarted && !this.game.isEnded) {
-			this.pollingClock = setInterval(() => {
-				if (this.game.isEnded) return;
-				const crc32 = CRC32.str(this.logs.map(x => x.pos.toString()).join(''));
-				this.connection.send('check', {
-					crc32: crc32
-				});
-			}, 3000);
-		}
-	},
-
-	mounted() {
-		this.connection.on('set', this.onSet);
-		this.connection.on('rescue', this.onRescue);
-		this.connection.on('ended', this.onEnded);
-		this.connection.on('watchers', this.onWatchers);
-	},
-
-	beforeUnmount() {
-		this.connection.off('set', this.onSet);
-		this.connection.off('rescue', this.onRescue);
-		this.connection.off('ended', this.onEnded);
-		this.connection.off('watchers', this.onWatchers);
-
-		clearInterval(this.pollingClock);
-	},
-
-	methods: {
-		userPage,
-
-		// this.o がリアクティブになった折にはcomputedにできる
-		turnUser(): any {
-			if (this.o.turn === true) {
-				return this.game.black == 1 ? this.game.user1 : this.game.user2;
-			} else if (this.o.turn === false) {
-				return this.game.black == 1 ? this.game.user2 : this.game.user1;
-			} else {
-				return null;
-			}
-		},
-
-		// this.o がリアクティブになった折にはcomputedにできる
-		isMyTurn(): boolean {
-			if (!this.iAmPlayer) return false;
-			if (this.turnUser() == null) return false;
-			return this.turnUser().id == this.$i.id;
-		},
-
-		set(pos) {
-			if (this.game.isEnded) return;
-			if (!this.iAmPlayer) return;
-			if (!this.isMyTurn()) return;
-			if (!this.o.canPut(this.myColor, pos)) return;
-
-			this.o.put(this.myColor, pos);
-
-			// サウンドを再生する
-			sound.play(this.myColor ? 'reversiPutBlack' : 'reversiPutWhite');
-
-			this.connection.send('set', {
-				pos: pos
-			});
-
-			this.checkEnd();
-
-			this.$forceUpdate();
-		},
-
-		onSet(x) {
-			this.logs.push(x);
-			this.logPos++;
-			this.o.put(x.color, x.pos);
-			this.checkEnd();
-			this.$forceUpdate();
-
-			// サウンドを再生する
-			if (x.color !== this.myColor) {
-				sound.play(x.color ? 'reversiPutBlack' : 'reversiPutWhite');
-			}
-		},
-
-		onEnded(x) {
-			this.game = JSON.parse(JSON.stringify(x.game));
-		},
-
-		checkEnd() {
-			this.game.isEnded = this.o.isEnded;
-			if (this.game.isEnded) {
-				if (this.o.winner === true) {
-					this.game.winnerId = this.game.black == 1 ? this.game.user1Id : this.game.user2Id;
-					this.game.winner = this.game.black == 1 ? this.game.user1 : this.game.user2;
-				} else if (this.o.winner === false) {
-					this.game.winnerId = this.game.black == 1 ? this.game.user2Id : this.game.user1Id;
-					this.game.winner = this.game.black == 1 ? this.game.user2 : this.game.user1;
-				} else {
-					this.game.winnerId = null;
-					this.game.winner = null;
-				}
-			}
-		},
-
-		// 正しいゲーム情報が送られてきたとき
-		onRescue(game) {
-			this.game = JSON.parse(JSON.stringify(game));
-
-			this.o = new Reversi(this.game.map, {
-				isLlotheo: this.game.isLlotheo,
-				canPutEverywhere: this.game.canPutEverywhere,
-				loopedBoard: this.game.loopedBoard
-			});
-
-			for (const log of this.game.logs) {
-				this.o.put(log.color, log.pos, true);
-			}
-
-			this.logs = this.game.logs;
-			this.logPos = this.logs.length;
-
-			this.checkEnd();
-			this.$forceUpdate();
-		},
-
-		onWatchers(users) {
-			this.watchers = users;
-		},
-
-		surrender() {
-			os.api('games/reversi/games/surrender', {
-				gameId: this.game.id
-			});
-		},
-
-		autoplay() {
-			this.autoplaying = true;
-			this.logPos = 0;
-
-			setTimeout(() => {
-				this.logPos = 1;
-
-				let i = 1;
-				let previousLog = this.game.logs[0];
-				const tick = () => {
-					const log = this.game.logs[i];
-					const time = new Date(log.at).getTime() - new Date(previousLog.at).getTime()
-					setTimeout(() => {
-						i++;
-						this.logPos++;
-						previousLog = log;
-
-						if (i < this.game.logs.length) {
-							tick();
-						} else {
-							this.autoplaying = false;
-						}
-					}, time);
-				};
-
-				tick();
-			}, 1000);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-
-@use "sass:math";
-
-.xqnhankfuuilcwvhgsopeqncafzsquya {
-	text-align: center;
-
-	> .go-index {
-		position: absolute;
-		top: 0;
-		left: 0;
-		z-index: 1;
-		width: 42px;
-		height :42px;
-	}
-
-	> header {
-		padding: 8px;
-		border-bottom: dashed 1px var(--divider);
-	}
-
-	> .board {
-		width: calc(100% - 16px);
-		max-width: 500px;
-		margin: 0 auto;
-
-		$label-size: 16px;
-		$gap: 4px;
-
-		> .labels-x {
-			height: $label-size;
-			padding: 0 $label-size;
-			display: flex;
-
-			> * {
-				flex: 1;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				font-size: 0.8em;
-
-				&:first-child {
-					margin-left: -(math.div($gap, 2));
-				}
-
-				&:last-child {
-					margin-right: -(math.div($gap, 2));
-				}
-			}
-		}
-
-		> .flex {
-			display: flex;
-
-			> .labels-y {
-				width: $label-size;
-				display: flex;
-				flex-direction: column;
-
-				> * {
-					flex: 1;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					font-size: 12px;
-
-					&:first-child {
-						margin-top: -(math.div($gap, 2));
-					}
-
-					&:last-child {
-						margin-bottom: -(math.div($gap, 2));
-					}
-				}
-			}
-
-			> .cells {
-				flex: 1;
-				display: grid;
-				grid-gap: $gap;
-
-				> div {
-					background: transparent;
-					border-radius: 6px;
-					overflow: hidden;
-
-					* {
-						pointer-events: none;
-						user-select: none;
-					}
-
-					&.empty {
-						border: solid 2px var(--divider);
-					}
-
-					&.empty.can {
-						border-color: var(--accent);
-					}
-
-					&.empty.myTurn {
-						border-color: var(--divider);
-
-						&.can {
-							border-color: var(--accent);
-							cursor: pointer;
-
-							&:hover {
-								background: var(--accent);
-							}
-						}
-					}
-
-					&.prev {
-						box-shadow: 0 0 0 4px var(--accent);
-					}
-
-					&.isEnded {
-						border-color: var(--divider);
-					}
-
-					&.none {
-						border-color: transparent !important;
-					}
-
-					> svg, > img {
-						display: block;
-						width: 100%;
-						height: 100%;
-					}
-				}
-			}
-		}
-	}
-
-	> .status {
-		margin: 0;
-		padding: 16px 0;
-	}
-
-	> .actions {
-		padding-bottom: 16px;
-	}
-
-	> .player {
-		padding: 0 16px 32px 16px;
-		margin: 0 auto;
-		max-width: 500px;
-
-		> span {
-			display: inline-block;
-			margin: 0 8px;
-			min-width: 70px;
-		}
-
-		> .buttons {
-			display: flex;
-
-			> * {
-				flex: 1;
-			}
-		}
-	}
-
-	> .watchers {
-		padding: 0 0 16px 0;
-
-		&:empty {
-			display: none;
-		}
-
-		> .avatar {
-			width: 32px;
-			height: 32px;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/reversi/game.setting.vue b/packages/client/src/pages/reversi/game.setting.vue
deleted file mode 100644
index 28bc598cfd..0000000000
--- a/packages/client/src/pages/reversi/game.setting.vue
+++ /dev/null
@@ -1,390 +0,0 @@
-<template>
-<div class="urbixznjwwuukfsckrwzwsqzsxornqij">
-	<header><b><MkUserName :user="game.user1"/></b> vs <b><MkUserName :user="game.user2"/></b></header>
-
-	<div>
-		<p>{{ $ts._reversi.gameSettings }}</p>
-
-		<div class="card map _panel">
-			<header>
-				<select v-model="mapName" :placeholder="$ts._reversi.chooseBoard" @change="onMapChange">
-					<option v-if="mapName == '-Custom-'" label="-Custom-" :value="mapName"/>
-					<option :label="$ts.random" :value="null"/>
-					<optgroup v-for="c in mapCategories" :key="c" :label="c">
-						<option v-for="m in Object.values(maps).filter(m => m.category == c)" :key="m.name" :label="m.name" :value="m.name">{{ m.name }}</option>
-					</optgroup>
-				</select>
-			</header>
-
-			<div>
-				<div v-if="game.map == null" class="random"><i class="fas fa-dice"></i></div>
-				<div v-else class="board" :style="{ 'grid-template-rows': `repeat(${ game.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.map[0].length }, 1fr)` }">
-					<div v-for="(x, i) in game.map.join('')" :class="{ none: x == ' ' }" @click="onPixelClick(i, x)">
-						<i v-if="x === 'b'" class="fas fa-circle"></i>
-						<i v-if="x === 'w'" class="far fa-circle"></i>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<div class="card _panel">
-			<header>
-				<span>{{ $ts._reversi.blackOrWhite }}</span>
-			</header>
-
-			<div>
-				<MkRadio v-model="game.bw" value="random" @update:modelValue="updateSettings('bw')">{{ $ts.random }}</MkRadio>
-				<MkRadio v-model="game.bw" :value="'1'" @update:modelValue="updateSettings('bw')">
-					<I18n :src="$ts._reversi.blackIs" tag="span">
-						<template #name>
-							<b><MkUserName :user="game.user1"/></b>
-						</template>
-					</I18n>
-				</MkRadio>
-				<MkRadio v-model="game.bw" :value="'2'" @update:modelValue="updateSettings('bw')">
-					<I18n :src="$ts._reversi.blackIs" tag="span">
-						<template #name>
-							<b><MkUserName :user="game.user2"/></b>
-						</template>
-					</I18n>
-				</MkRadio>
-			</div>
-		</div>
-
-		<div class="card _panel">
-			<header>
-				<span>{{ $ts._reversi.rules }}</span>
-			</header>
-
-			<div>
-				<MkSwitch v-model="game.isLlotheo" @update:modelValue="updateSettings('isLlotheo')">{{ $ts._reversi.isLlotheo }}</MkSwitch>
-				<MkSwitch v-model="game.loopedBoard" @update:modelValue="updateSettings('loopedBoard')">{{ $ts._reversi.loopedMap }}</MkSwitch>
-				<MkSwitch v-model="game.canPutEverywhere" @update:modelValue="updateSettings('canPutEverywhere')">{{ $ts._reversi.canPutEverywhere }}</MkSwitch>
-			</div>
-		</div>
-
-		<div v-if="form" class="card form _panel">
-			<header>
-				<span>{{ $ts._reversi.botSettings }}</span>
-			</header>
-
-			<div>
-				<template v-for="item in form">
-					<MkSwitch v-if="item.type == 'switch'" :key="item.id" v-model="item.value" @change="onChangeForm(item)">{{ item.label || item.desc || '' }}</MkSwitch>
-
-					<div v-if="item.type == 'radio'" :key="item.id" class="card">
-						<header>
-							<span>{{ item.label }}</span>
-						</header>
-
-						<div>
-							<MkRadio v-for="(r, i) in item.items" :key="item.id + ':' + i" v-model="item.value" :value="r.value" @update:modelValue="onChangeForm(item)">{{ r.label }}</MkRadio>
-						</div>
-					</div>
-
-					<div v-if="item.type == 'slider'" :key="item.id" class="card">
-						<header>
-							<span>{{ item.label }}</span>
-						</header>
-
-						<div>
-							<input v-model="item.value" type="range" :min="item.min" :max="item.max" :step="item.step || 1" @change="onChangeForm(item)"/>
-						</div>
-					</div>
-
-					<div v-if="item.type == 'textbox'" :key="item.id" class="card">
-						<header>
-							<span>{{ item.label }}</span>
-						</header>
-
-						<div>
-							<input v-model="item.value" @change="onChangeForm(item)"/>
-						</div>
-					</div>
-				</template>
-			</div>
-		</div>
-	</div>
-
-	<footer class="_acrylic">
-		<p class="status">
-			<template v-if="isAccepted && isOpAccepted">{{ $ts._reversi.thisGameIsStartedSoon }}<MkEllipsis/></template>
-			<template v-if="isAccepted && !isOpAccepted">{{ $ts._reversi.waitingForOther }}<MkEllipsis/></template>
-			<template v-if="!isAccepted && isOpAccepted">{{ $ts._reversi.waitingForMe }}</template>
-			<template v-if="!isAccepted && !isOpAccepted">{{ $ts._reversi.waitingBoth }}<MkEllipsis/></template>
-		</p>
-
-		<div class="actions">
-			<MkButton inline @click="exit">{{ $ts.cancel }}</MkButton>
-			<MkButton v-if="!isAccepted" inline primary @click="accept">{{ $ts._reversi.ready }}</MkButton>
-			<MkButton v-if="isAccepted" inline primary @click="cancel">{{ $ts._reversi.cancelReady }}</MkButton>
-		</div>
-	</footer>
-</div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import * as maps from '@/scripts/games/reversi/maps';
-import MkButton from '@/components/ui/button.vue';
-import MkSwitch from '@/components/form/switch.vue';
-import MkRadio from '@/components/form/radio.vue';
-
-export default defineComponent({
-	components: {
-		MkButton,
-		MkSwitch,
-		MkRadio,
-	},
-
-	props: {
-		initGame: {
-			type: Object,
-			require: true
-		},
-		connection: {
-			type: Object,
-			require: true
-		},
-	},
-
-	data() {
-		return {
-			game: this.initGame,
-			o: null,
-			isLlotheo: false,
-			mapName: maps.eighteight.name,
-			maps: maps,
-			form: null,
-			messages: [],
-		};
-	},
-
-	computed: {
-		mapCategories(): string[] {
-			const categories = Object.values(maps).map(x => x.category);
-			return categories.filter((item, pos) => categories.indexOf(item) == pos);
-		},
-		isAccepted(): boolean {
-			if (this.game.user1Id == this.$i.id && this.game.user1Accepted) return true;
-			if (this.game.user2Id == this.$i.id && this.game.user2Accepted) return true;
-			return false;
-		},
-		isOpAccepted(): boolean {
-			if (this.game.user1Id != this.$i.id && this.game.user1Accepted) return true;
-			if (this.game.user2Id != this.$i.id && this.game.user2Accepted) return true;
-			return false;
-		}
-	},
-
-	created() {
-		this.connection.on('changeAccepts', this.onChangeAccepts);
-		this.connection.on('updateSettings', this.onUpdateSettings);
-		this.connection.on('initForm', this.onInitForm);
-		this.connection.on('message', this.onMessage);
-
-		if (this.game.user1Id != this.$i.id && this.game.form1) this.form = this.game.form1;
-		if (this.game.user2Id != this.$i.id && this.game.form2) this.form = this.game.form2;
-	},
-
-	beforeUnmount() {
-		this.connection.off('changeAccepts', this.onChangeAccepts);
-		this.connection.off('updateSettings', this.onUpdateSettings);
-		this.connection.off('initForm', this.onInitForm);
-		this.connection.off('message', this.onMessage);
-	},
-
-	methods: {
-		exit() {
-
-		},
-
-		accept() {
-			this.connection.send('accept', {});
-		},
-
-		cancel() {
-			this.connection.send('cancelAccept', {});
-		},
-
-		onChangeAccepts(accepts) {
-			this.game.user1Accepted = accepts.user1;
-			this.game.user2Accepted = accepts.user2;
-		},
-
-		updateSettings(key: string) {
-			this.connection.send('updateSettings', {
-				key: key,
-				value: this.game[key]
-			});
-		},
-
-		onUpdateSettings({ key, value }) {
-			this.game[key] = value;
-			if (this.game.map == null) {
-				this.mapName = null;
-			} else {
-				const found = Object.values(maps).find(x => x.data.join('') == this.game.map.join(''));
-				this.mapName = found ? found.name : '-Custom-';
-			}
-		},
-
-		onInitForm(x) {
-			if (x.userId == this.$i.id) return;
-			this.form = x.form;
-		},
-
-		onMessage(x) {
-			if (x.userId == this.$i.id) return;
-			this.messages.unshift(x.message);
-		},
-
-		onChangeForm(item) {
-			this.connection.send('updateForm', {
-				id: item.id,
-				value: item.value
-			});
-		},
-
-		onMapChange() {
-			if (this.mapName == null) {
-				this.game.map = null;
-			} else {
-				this.game.map = Object.values(maps).find(x => x.name == this.mapName).data;
-			}
-			this.updateSettings('map');
-		},
-
-		onPixelClick(pos, pixel) {
-			const x = pos % this.game.map[0].length;
-			const y = Math.floor(pos / this.game.map[0].length);
-			const newPixel =
-				pixel == ' ' ? '-' :
-				pixel == '-' ? 'b' :
-				pixel == 'b' ? 'w' :
-				' ';
-			const line = this.game.map[y].split('');
-			line[x] = newPixel;
-			this.game.map[y] = line.join('');
-			this.updateSettings('map');
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.urbixznjwwuukfsckrwzwsqzsxornqij {
-	text-align: center;
-	background: var(--bg);
-
-	> header {
-		padding: 8px;
-		border-bottom: dashed 1px #c4cdd4;
-	}
-
-	> div {
-		padding: 0 16px;
-
-		> .card {
-			margin: 0 auto 16px auto;
-
-			&.map {
-				> header {
-					> select {
-						width: 100%;
-						padding: 12px 14px;
-						background: var(--face);
-						border: 1px solid var(--inputBorder);
-						border-radius: 4px;
-						color: var(--fg);
-						cursor: pointer;
-						transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-						-webkit-appearance: none;
-						-moz-appearance: none;
-						appearance: none;
-
-						&:focus-visible,
-						&:active {
-							border-color: var(--accent);
-						}
-					}
-				}
-
-				> div {
-					> .random {
-						padding: 32px 0;
-						font-size: 64px;
-						color: var(--fg);
-						opacity: 0.7;
-					}
-
-					> .board {
-						display: grid;
-						grid-gap: 4px;
-						width: 300px;
-						height: 300px;
-						margin: 0 auto;
-						color: var(--fg);
-
-						> div {
-							background: transparent;
-							border: solid 2px var(--divider);
-							border-radius: 6px;
-							overflow: hidden;
-							cursor: pointer;
-
-							* {
-								pointer-events: none;
-								user-select: none;
-								width: 100%;
-								height: 100%;
-							}
-
-							&.none {
-								border-color: transparent;
-							}
-						}
-					}
-				}
-			}
-
-			&.form {
-				> div {
-					> .card + .card {
-						margin-top: 16px;
-					}
-
-					input[type='range'] {
-						width: 100%;
-					}
-				}
-			}
-		}
-
-		.card {
-			max-width: 400px;
-
-			> header {
-				padding: 18px 20px;
-				border-bottom: 1px solid var(--divider);
-			}
-
-			> div {
-				padding: 20px;
-				color: var(--fg);
-			}
-		}
-	}
-
-	> footer {
-		position: sticky;
-		bottom: 0;
-		padding: 16px;
-		border-top: solid 1px var(--divider);
-
-		> .status {
-			margin: 0 0 16px 0;
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/reversi/game.vue b/packages/client/src/pages/reversi/game.vue
deleted file mode 100644
index 697d2898b9..0000000000
--- a/packages/client/src/pages/reversi/game.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-<div v-if="game == null"><MkLoading/></div>
-<GameSetting v-else-if="!game.isStarted" :init-game="game" :connection="connection"/>
-<GameBoard v-else :init-game="game" :connection="connection"/>
-</template>
-
-<script lang="ts">
-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({
-	components: {
-		GameSetting,
-		GameBoard,
-	},
-
-	props: {
-		gameId: {
-			type: String,
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts._reversi.reversi,
-				icon: 'fas fa-gamepad'
-			},
-			game: null,
-			connection: null,
-		};
-	},
-
-	watch: {
-		gameId() {
-			this.fetch();
-		}
-	},
-
-	mounted() {
-		this.fetch();
-	},
-
-	beforeUnmount() {
-		if (this.connection) {
-			this.connection.dispose();
-		}
-	},
-
-	methods: {
-		fetch() {
-			os.api('games/reversi/games/show', {
-				gameId: this.gameId
-			}).then(game => {
-				this.game = game;
-
-				if (this.connection) {
-					this.connection.dispose();
-				}
-				this.connection = markRaw(stream.useChannel('gamesReversiGame', {
-					gameId: this.game.id
-				}));
-				this.connection.on('started', this.onStarted);
-			});
-		},
-
-		onStarted(game) {
-			Object.assign(this.game, game);
-		},
-	}
-});
-</script>
diff --git a/packages/client/src/pages/reversi/index.vue b/packages/client/src/pages/reversi/index.vue
deleted file mode 100644
index 93c22c02f3..0000000000
--- a/packages/client/src/pages/reversi/index.vue
+++ /dev/null
@@ -1,280 +0,0 @@
-<template>
-<div v-if="!matching" class="bgvwxkhb">
-	<h1>Misskey {{ $ts._reversi.reversi }}</h1>
-
-	<div class="play">
-		<MkButton primary round style="margin: var(--margin) auto 0 auto;" @click="match">{{ $ts.invite }}</MkButton>
-	</div>
-
-	<div class="_section">
-		<MkFolder v-if="invitations.length > 0">
-			<template #header>{{ $ts.invitations }}</template>
-			<div class="nfcacttm">
-				<button v-for="invitation in invitations" class="invitation _panel _button" tabindex="-1" @click="accept(invitation)">
-					<MkAvatar class="avatar" :user="invitation.parent" :show-indicator="true"/>
-					<span class="name"><b><MkUserName :user="invitation.parent"/></b></span>
-					<span class="username">@{{ invitation.parent.username }}</span>
-					<MkTime :time="invitation.createdAt" class="time"/>
-				</button>
-			</div>
-		</MkFolder>
-
-		<MkFolder v-if="myGames.length > 0">
-			<template #header>{{ $ts._reversi.myGames }}</template>
-			<div class="knextgwz">
-				<MkA v-for="g in myGames" :key="g.id" class="game _panel" tabindex="-1" :to="`/games/reversi/${g.id}`">
-					<div class="players">
-						<MkAvatar class="avatar" :user="g.user1"/><b><MkUserName :user="g.user1"/></b> vs <b><MkUserName :user="g.user2"/></b><MkAvatar class="avatar" :user="g.user2"/>
-					</div>
-					<footer><span class="state" :class="{ playing: !g.isEnded }">{{ g.isEnded ? $ts._reversi.ended : $ts._reversi.playing }}</span><MkTime class="time" :time="g.createdAt"/></footer>
-				</MkA>
-			</div>
-		</MkFolder>
-
-		<MkFolder v-if="games.length > 0">
-			<template #header>{{ $ts._reversi.allGames }}</template>
-			<div class="knextgwz">
-				<MkA v-for="g in games" :key="g.id" class="game _panel" tabindex="-1" :to="`/games/reversi/${g.id}`">
-					<div class="players">
-						<MkAvatar class="avatar" :user="g.user1"/><b><MkUserName :user="g.user1"/></b> vs <b><MkUserName :user="g.user2"/></b><MkAvatar class="avatar" :user="g.user2"/>
-					</div>
-					<footer><span class="state" :class="{ playing: !g.isEnded }">{{ g.isEnded ? $ts._reversi.ended : $ts._reversi.playing }}</span><MkTime class="time" :time="g.createdAt"/></footer>
-				</MkA>
-			</div>
-		</MkFolder>
-	</div>
-</div>
-<div v-else class="sazhgisb">
-	<h1>
-		<I18n :src="$ts.waitingFor" tag="span">
-			<template #x>
-				<b><MkUserName :user="matching"/></b>
-			</template>
-		</I18n>
-		<MkEllipsis/>
-	</h1>
-	<div class="cancel">
-		<MkButton inline round @click="cancel">{{ $ts.cancel }}</MkButton>
-	</div>
-</div>
-</template>
-
-<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';
-
-export default defineComponent({
-	components: {
-		MkButton, MkFolder,
-	},
-
-	inject: ['navHook'],
-
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts._reversi.reversi,
-				icon: 'fas fa-gamepad'
-			},
-			games: [],
-			gamesFetching: true,
-			gamesMoreFetching: false,
-			myGames: [],
-			matching: null,
-			invitations: [],
-			connection: null,
-			pingClock: null,
-		};
-	},
-
-	mounted() {
-		if (this.$i) {
-			this.connection = markRaw(stream.useChannel('gamesReversi'));
-
-			this.connection.on('invited', this.onInvited);
-
-			this.connection.on('matched', this.onMatched);
-
-			this.pingClock = setInterval(() => {
-				if (this.matching) {
-					this.connection.send('ping', {
-						id: this.matching.id
-					});
-				}
-			}, 3000);
-
-			os.api('games/reversi/games', {
-				my: true
-			}).then(games => {
-				this.myGames = games;
-			});
-
-			os.api('games/reversi/invitations').then(invitations => {
-				this.invitations = this.invitations.concat(invitations);
-			});
-		}
-
-		os.api('games/reversi/games').then(games => {
-			this.games = games;
-			this.gamesFetching = false;
-		});
-	},
-
-	beforeUnmount() {
-		if (this.connection) {
-			this.connection.dispose();
-			clearInterval(this.pingClock);
-		}
-	},
-
-	methods: {
-		go(game) {
-			const url = '/games/reversi/' + game.id;
-			if (this.navHook) {
-				this.navHook(url);
-			} else {
-				this.$router.push(url);
-			}
-		},
-
-		async match() {
-			const user = await os.selectUser({ local: true });
-			if (user == null) return;
-			os.api('games/reversi/match', {
-				userId: user.id
-			}).then(res => {
-				if (res == null) {
-					this.matching = user;
-				} else {
-					this.go(res);
-				}
-			});
-		},
-
-		cancel() {
-			this.matching = null;
-			os.api('games/reversi/match/cancel');
-		},
-
-		accept(invitation) {
-			os.api('games/reversi/match', {
-				userId: invitation.parent.id
-			}).then(game => {
-				if (game) {
-					this.go(game);
-				}
-			});
-		},
-
-		onMatched(game) {
-			this.go(game);
-		},
-
-		onInvited(invite) {
-			this.invitations.unshift(invite);
-		}
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.bgvwxkhb {
-	> h1 {
-		margin: 0;
-		padding: 24px;
-		text-align: center;
-		font-size: 1.5em;
-		background: linear-gradient(0deg, #43c583, #438881);
-		color: #fff;
-	}
-
-	> .play {
-		text-align: center;
-	}
-}
-
-.sazhgisb {
-	text-align: center;
-}
-
-.nfcacttm {
-	> .invitation {
-		display: flex;
-		box-sizing: border-box;
-		width: 100%;
-		padding: 16px;
-		line-height: 32px;
-		text-align: left;
-
-		> .avatar {
-			width: 32px;
-			height: 32px;
-			margin-right: 8px;
-		}
-
-		> .name {
-			margin-right: 8px;
-		}
-
-		> .username {
-			margin-right: 8px;
-			opacity: 0.7;
-		}
-
-		> .time {
-			margin-left: auto;
-			opacity: 0.7;
-		}
-	}
-}
-
-.knextgwz {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-	grid-gap: var(--margin);
-
-	> .game {
-		> .players {
-			text-align: center;
-			padding: 16px;
-			line-height: 32px;
-
-			> .avatar {
-				width: 32px;
-				height: 32px;
-
-				&:first-child {
-					margin-right: 8px;
-				}
-
-				&:last-child {
-					margin-left: 8px;
-				}
-			}
-		}
-
-		> footer {
-			display: flex;
-			align-items: baseline;
-			border-top: solid 0.5px var(--divider);
-			padding: 6px 8px;
-			font-size: 0.9em;
-
-			> .state {
-				&.playing {
-					color: var(--accent);
-				}
-			}
-
-			> .time {
-				margin-left: auto;
-				opacity: 0.7;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/client/src/pages/settings/account-info.vue b/packages/client/src/pages/settings/account-info.vue
index 1d6afd9d58..ceff587302 100644
--- a/packages/client/src/pages/settings/account-info.vue
+++ b/packages/client/src/pages/settings/account-info.vue
@@ -94,10 +94,6 @@
 			<template #key>{{ $ts.driveUsage }}</template>
 			<template #value>{{ bytes(stats.driveUsage) }}</template>
 		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ $ts.reversiCount }}</template>
-			<template #value>{{ number(stats.reversiCount) }}</template>
-		</MkKeyValue>
 	</FormSection>
 
 	<FormSection>
diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue
index 0977dd8322..b538bf7cf5 100644
--- a/packages/client/src/pages/settings/sounds.vue
+++ b/packages/client/src/pages/settings/sounds.vue
@@ -94,8 +94,6 @@ export default defineComponent({
 		this.sounds.chatBg = ColdDeviceStorage.get('sound_chatBg');
 		this.sounds.antenna = ColdDeviceStorage.get('sound_antenna');
 		this.sounds.channel = ColdDeviceStorage.get('sound_channel');
-		this.sounds.reversiPutBlack = ColdDeviceStorage.get('sound_reversiPutBlack');
-		this.sounds.reversiPutWhite = ColdDeviceStorage.get('sound_reversiPutWhite');
 	},
 
 	mounted() {
diff --git a/packages/client/src/router.ts b/packages/client/src/router.ts
index a5ae1177e8..312374cdb9 100644
--- a/packages/client/src/router.ts
+++ b/packages/client/src/router.ts
@@ -73,8 +73,6 @@ const defaultRoutes = [
 	{ path: '/tags/:tag', component: page('tag'), props: route => ({ tag: route.params.tag }) },
 	{ path: '/user-info/:user', component: page('user-info'), props: route => ({ userId: route.params.user }) },
 	{ path: '/instance-info/:host', component: page('instance-info'), props: route => ({ host: route.params.host }) },
-	{ path: '/games/reversi', component: page('reversi/index') },
-	{ path: '/games/reversi/:gameId', component: page('reversi/game'), props: route => ({ gameId: route.params.gameId }) },
 	{ path: '/mfm-cheat-sheet', component: page('mfm-cheat-sheet') },
 	{ path: '/api-console', component: page('api-console') },
 	{ path: '/preview', component: page('preview') },
diff --git a/packages/client/src/scripts/games/reversi/core.ts b/packages/client/src/scripts/games/reversi/core.ts
deleted file mode 100644
index 0cb8922e19..0000000000
--- a/packages/client/src/scripts/games/reversi/core.ts
+++ /dev/null
@@ -1,263 +0,0 @@
-import { count, concat } from '@/scripts/array';
-
-// MISSKEY REVERSI ENGINE
-
-/**
- * true ... 黒
- * false ... 白
- */
-export type Color = boolean;
-const BLACK = true;
-const WHITE = false;
-
-export type MapPixel = 'null' | 'empty';
-
-export type Options = {
-	isLlotheo: boolean;
-	canPutEverywhere: boolean;
-	loopedBoard: boolean;
-};
-
-export type Undo = {
-	/**
-	 * 色
-	 */
-	color: Color;
-
-	/**
-	 * どこに打ったか
-	 */
-	pos: number;
-
-	/**
-	 * 反転した石の位置の配列
-	 */
-	effects: number[];
-
-	/**
-	 * ターン
-	 */
-	turn: Color | null;
-};
-
-/**
- * リバーシエンジン
- */
-export default class Reversi {
-	public map: MapPixel[];
-	public mapWidth: number;
-	public mapHeight: number;
-	public board: (Color | null | undefined)[];
-	public turn: Color | null = BLACK;
-	public opts: Options;
-
-	public prevPos = -1;
-	public prevColor: Color | null = null;
-
-	private logs: Undo[] = [];
-
-	/**
-	 * ゲームを初期化します
-	 */
-	constructor(map: string[], opts: Options) {
-		//#region binds
-		this.put = this.put.bind(this);
-		//#endregion
-
-		//#region Options
-		this.opts = opts;
-		if (this.opts.isLlotheo == null) this.opts.isLlotheo = false;
-		if (this.opts.canPutEverywhere == null) this.opts.canPutEverywhere = false;
-		if (this.opts.loopedBoard == null) this.opts.loopedBoard = false;
-		//#endregion
-
-		//#region Parse map data
-		this.mapWidth = map[0].length;
-		this.mapHeight = map.length;
-		const mapData = map.join('');
-
-		this.board = mapData.split('').map(d => d === '-' ? null : d === 'b' ? BLACK : d === 'w' ? WHITE : undefined);
-
-		this.map = mapData.split('').map(d => d === '-' || d === 'b' || d === 'w' ? 'empty' : 'null');
-		//#endregion
-
-		// ゲームが始まった時点で片方の色の石しかないか、始まった時点で勝敗が決定するようなマップの場合がある
-		if (!this.canPutSomewhere(BLACK))
-			this.turn = this.canPutSomewhere(WHITE) ? WHITE : null;
-	}
-
-	/**
-	 * 黒石の数
-	 */
-	public get blackCount() {
-		return count(BLACK, this.board);
-	}
-
-	/**
-	 * 白石の数
-	 */
-	public get whiteCount() {
-		return count(WHITE, this.board);
-	}
-
-	public transformPosToXy(pos: number): number[] {
-		const x = pos % this.mapWidth;
-		const y = Math.floor(pos / this.mapWidth);
-		return [x, y];
-	}
-
-	public transformXyToPos(x: number, y: number): number {
-		return x + (y * this.mapWidth);
-	}
-
-	/**
-	 * 指定のマスに石を打ちます
-	 * @param color 石の色
-	 * @param pos 位置
-	 */
-	public put(color: Color, pos: number) {
-		this.prevPos = pos;
-		this.prevColor = color;
-
-		this.board[pos] = color;
-
-		// 反転させられる石を取得
-		const effects = this.effects(color, pos);
-
-		// 反転させる
-		for (const pos of effects) {
-			this.board[pos] = color;
-		}
-
-		const turn = this.turn;
-
-		this.logs.push({
-			color,
-			pos,
-			effects,
-			turn
-		});
-
-		this.calcTurn();
-	}
-
-	private calcTurn() {
-		// ターン計算
-		this.turn =
-			this.canPutSomewhere(!this.prevColor) ? !this.prevColor :
-			this.canPutSomewhere(this.prevColor!) ? this.prevColor :
-			null;
-	}
-
-	public undo() {
-		const undo = this.logs.pop()!;
-		this.prevColor = undo.color;
-		this.prevPos = undo.pos;
-		this.board[undo.pos] = null;
-		for (const pos of undo.effects) {
-			const color = this.board[pos];
-			this.board[pos] = !color;
-		}
-		this.turn = undo.turn;
-	}
-
-	/**
-	 * 指定した位置のマップデータのマスを取得します
-	 * @param pos 位置
-	 */
-	public mapDataGet(pos: number): MapPixel {
-		const [x, y] = this.transformPosToXy(pos);
-		return x < 0 || y < 0 || x >= this.mapWidth || y >= this.mapHeight ? 'null' : this.map[pos];
-	}
-
-	/**
-	 * 打つことができる場所を取得します
-	 */
-	public puttablePlaces(color: Color): number[] {
-		return Array.from(this.board.keys()).filter(i => this.canPut(color, i));
-	}
-
-	/**
-	 * 打つことができる場所があるかどうかを取得します
-	 */
-	public canPutSomewhere(color: Color): boolean {
-		return this.puttablePlaces(color).length > 0;
-	}
-
-	/**
-	 * 指定のマスに石を打つことができるかどうかを取得します
-	 * @param color 自分の色
-	 * @param pos 位置
-	 */
-	public canPut(color: Color, pos: number): boolean {
-		return (
-			this.board[pos] !== null ? false : // 既に石が置いてある場所には打てない
-			this.opts.canPutEverywhere ? this.mapDataGet(pos) == 'empty' : // 挟んでなくても置けるモード
-			this.effects(color, pos).length !== 0); // 相手の石を1つでも反転させられるか
-	}
-
-	/**
-	 * 指定のマスに石を置いた時の、反転させられる石を取得します
-	 * @param color 自分の色
-	 * @param initPos 位置
-	 */
-	public effects(color: Color, initPos: number): number[] {
-		const enemyColor = !color;
-
-		const diffVectors: [number, number][] = [
-			[  0,  -1], // 上
-			[ +1,  -1], // 右上
-			[ +1,   0], // 右
-			[ +1,  +1], // 右下
-			[  0,  +1], // 下
-			[ -1,  +1], // 左下
-			[ -1,   0], // 左
-			[ -1,  -1]  // 左上
-		];
-
-		const effectsInLine = ([dx, dy]: [number, number]): number[] => {
-			const nextPos = (x: number, y: number): [number, number] => [x + dx, y + dy];
-
-			const found: number[] = []; // 挟めるかもしれない相手の石を入れておく配列
-			let [x, y] = this.transformPosToXy(initPos);
-			while (true) {
-				[x, y] = nextPos(x, y);
-
-				// 座標が指し示す位置がボード外に出たとき
-				if (this.opts.loopedBoard && this.transformXyToPos(
-					(x = ((x % this.mapWidth) + this.mapWidth) % this.mapWidth),
-					(y = ((y % this.mapHeight) + this.mapHeight) % this.mapHeight)) === initPos)
-						// 盤面の境界でループし、自分が石を置く位置に戻ってきたとき、挟めるようにしている (ref: Test4のマップ)
-					return found;
-				else if (x === -1 || y === -1 || x === this.mapWidth || y === this.mapHeight)
-					return []; // 挟めないことが確定 (盤面外に到達)
-
-				const pos = this.transformXyToPos(x, y);
-				if (this.mapDataGet(pos) === 'null') return []; // 挟めないことが確定 (配置不可能なマスに到達)
-				const stone = this.board[pos];
-				if (stone === null) return []; // 挟めないことが確定 (石が置かれていないマスに到達)
-				if (stone === enemyColor) found.push(pos); // 挟めるかもしれない (相手の石を発見)
-				if (stone === color) return found; // 挟めることが確定 (対となる自分の石を発見)
-			}
-		};
-
-		return concat(diffVectors.map(effectsInLine));
-	}
-
-	/**
-	 * ゲームが終了したか否か
-	 */
-	public get isEnded(): boolean {
-		return this.turn === null;
-	}
-
-	/**
-	 * ゲームの勝者 (null = 引き分け)
-	 */
-	public get winner(): Color | null {
-		return this.isEnded ?
-			this.blackCount == this.whiteCount ? null :
-			this.opts.isLlotheo === this.blackCount > this.whiteCount ? WHITE : BLACK :
-			undefined as never;
-	}
-}
diff --git a/packages/client/src/scripts/games/reversi/maps.ts b/packages/client/src/scripts/games/reversi/maps.ts
deleted file mode 100644
index dc0d1bf9d0..0000000000
--- a/packages/client/src/scripts/games/reversi/maps.ts
+++ /dev/null
@@ -1,896 +0,0 @@
-/**
- * 組み込みマップ定義
- *
- * データ値:
- * (スペース) ... マス無し
- * - ... マス
- * b ... 初期配置される黒石
- * w ... 初期配置される白石
- */
-
-export type Map = {
-	name?: string;
-	category?: string;
-	author?: string;
-	data: string[];
-};
-
-export const fourfour: Map = {
-	name: '4x4',
-	category: '4x4',
-	data: [
-		'----',
-		'-wb-',
-		'-bw-',
-		'----'
-	]
-};
-
-export const sixsix: Map = {
-	name: '6x6',
-	category: '6x6',
-	data: [
-		'------',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		'------'
-	]
-};
-
-export const roundedSixsix: Map = {
-	name: '6x6 rounded',
-	category: '6x6',
-	author: 'syuilo',
-	data: [
-		' ---- ',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		' ---- '
-	]
-};
-
-export const roundedSixsix2: Map = {
-	name: '6x6 rounded 2',
-	category: '6x6',
-	author: 'syuilo',
-	data: [
-		'  --  ',
-		' ---- ',
-		'--wb--',
-		'--bw--',
-		' ---- ',
-		'  --  '
-	]
-};
-
-export const eighteight: Map = {
-	name: '8x8',
-	category: '8x8',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const eighteightH1: Map = {
-	name: '8x8 handicap 1',
-	category: '8x8',
-	data: [
-		'b-------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const eighteightH2: Map = {
-	name: '8x8 handicap 2',
-	category: '8x8',
-	data: [
-		'b-------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'-------b'
-	]
-};
-
-export const eighteightH3: Map = {
-	name: '8x8 handicap 3',
-	category: '8x8',
-	data: [
-		'b------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'-------b'
-	]
-};
-
-export const eighteightH4: Map = {
-	name: '8x8 handicap 4',
-	category: '8x8',
-	data: [
-		'b------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'b------b'
-	]
-};
-
-export const eighteightH28: Map = {
-	name: '8x8 handicap 28',
-	category: '8x8',
-	data: [
-		'bbbbbbbb',
-		'b------b',
-		'b------b',
-		'b--wb--b',
-		'b--bw--b',
-		'b------b',
-		'b------b',
-		'bbbbbbbb'
-	]
-};
-
-export const roundedEighteight: Map = {
-	name: '8x8 rounded',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		' ------ ',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		' ------ '
-	]
-};
-
-export const roundedEighteight2: Map = {
-	name: '8x8 rounded 2',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'  ----  ',
-		' ------ ',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		' ------ ',
-		'  ----  '
-	]
-};
-
-export const roundedEighteight3: Map = {
-	name: '8x8 rounded 3',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'   --   ',
-		'  ----  ',
-		' ------ ',
-		'---wb---',
-		'---bw---',
-		' ------ ',
-		'  ----  ',
-		'   --   '
-	]
-};
-
-export const eighteightWithNotch: Map = {
-	name: '8x8 with notch',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'---  ---',
-		'--------',
-		'--------',
-		' --wb-- ',
-		' --bw-- ',
-		'--------',
-		'--------',
-		'---  ---'
-	]
-};
-
-export const eighteightWithSomeHoles: Map = {
-	name: '8x8 with some holes',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--- ----',
-		'----- --',
-		'-- -----',
-		'---wb---',
-		'---bw- -',
-		' -------',
-		'--- ----',
-		'--------'
-	]
-};
-
-export const circle: Map = {
-	name: 'Circle',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'   --   ',
-		' ------ ',
-		' ------ ',
-		'---wb---',
-		'---bw---',
-		' ------ ',
-		' ------ ',
-		'   --   '
-	]
-};
-
-export const smile: Map = {
-	name: 'Smile',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		' ------ ',
-		'--------',
-		'-- -- --',
-		'---wb---',
-		'-- bw --',
-		'---  ---',
-		'--------',
-		' ------ '
-	]
-};
-
-export const window: Map = {
-	name: 'Window',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--------',
-		'-  --  -',
-		'-  --  -',
-		'---wb---',
-		'---bw---',
-		'-  --  -',
-		'-  --  -',
-		'--------'
-	]
-};
-
-export const reserved: Map = {
-	name: 'Reserved',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'w------b',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'b------w'
-	]
-};
-
-export const x: Map = {
-	name: 'X',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'w------b',
-		'-w----b-',
-		'--w--b--',
-		'---wb---',
-		'---bw---',
-		'--b--w--',
-		'-b----w-',
-		'b------w'
-	]
-};
-
-export const parallel: Map = {
-	name: 'Parallel',
-	category: '8x8',
-	author: 'Aya',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---bb---',
-		'---ww---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const lackOfBlack: Map = {
-	name: 'Lack of Black',
-	category: '8x8',
-	data: [
-		'--------',
-		'--------',
-		'--------',
-		'---w----',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------'
-	]
-};
-
-export const squareParty: Map = {
-	name: 'Square Party',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'--------',
-		'-wwwbbb-',
-		'-w-wb-b-',
-		'-wwwbbb-',
-		'-bbbwww-',
-		'-b-bw-w-',
-		'-bbbwww-',
-		'--------'
-	]
-};
-
-export const minesweeper: Map = {
-	name: 'Minesweeper',
-	category: '8x8',
-	author: 'syuilo',
-	data: [
-		'b-b--w-w',
-		'-w-wb-b-',
-		'w-b--w-b',
-		'-b-wb-w-',
-		'-w-bw-b-',
-		'b-w--b-w',
-		'-b-bw-w-',
-		'w-w--b-b'
-	]
-};
-
-export const tenthtenth: Map = {
-	name: '10x10',
-	category: '10x10',
-	data: [
-		'----------',
-		'----------',
-		'----------',
-		'----------',
-		'----wb----',
-		'----bw----',
-		'----------',
-		'----------',
-		'----------',
-		'----------'
-	]
-};
-
-export const hole: Map = {
-	name: 'The Hole',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'----------',
-		'----------',
-		'--wb--wb--',
-		'--bw--bw--',
-		'----  ----',
-		'----  ----',
-		'--wb--wb--',
-		'--bw--bw--',
-		'----------',
-		'----------'
-	]
-};
-
-export const grid: Map = {
-	name: 'Grid',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'----------',
-		'- - -- - -',
-		'----------',
-		'- - -- - -',
-		'----wb----',
-		'----bw----',
-		'- - -- - -',
-		'----------',
-		'- - -- - -',
-		'----------'
-	]
-};
-
-export const cross: Map = {
-	name: 'Cross',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		'   ----   ',
-		'   ----   ',
-		'   ----   ',
-		'----------',
-		'----wb----',
-		'----bw----',
-		'----------',
-		'   ----   ',
-		'   ----   ',
-		'   ----   '
-	]
-};
-
-export const charX: Map = {
-	name: 'Char X',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'---    ---',
-		'----  ----',
-		'----------',
-		' -------- ',
-		'  --wb--  ',
-		'  --bw--  ',
-		' -------- ',
-		'----------',
-		'----  ----',
-		'---    ---'
-	]
-};
-
-export const charY: Map = {
-	name: 'Char Y',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'---    ---',
-		'----  ----',
-		'----------',
-		' -------- ',
-		'  --wb--  ',
-		'  --bw--  ',
-		'  ------  ',
-		'  ------  ',
-		'  ------  ',
-		'  ------  '
-	]
-};
-
-export const walls: Map = {
-	name: 'Walls',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		' bbbbbbbb ',
-		'w--------w',
-		'w--------w',
-		'w--------w',
-		'w---wb---w',
-		'w---bw---w',
-		'w--------w',
-		'w--------w',
-		'w--------w',
-		' bbbbbbbb '
-	]
-};
-
-export const cpu: Map = {
-	name: 'CPU',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		' b b  b b ',
-		'w--------w',
-		' -------- ',
-		'w--------w',
-		' ---wb--- ',
-		' ---bw--- ',
-		'w--------w',
-		' -------- ',
-		'w--------w',
-		' b b  b b '
-	]
-};
-
-export const checker: Map = {
-	name: 'Checker',
-	category: '10x10',
-	author: 'Aya',
-	data: [
-		'----------',
-		'----------',
-		'----------',
-		'---wbwb---',
-		'---bwbw---',
-		'---wbwb---',
-		'---bwbw---',
-		'----------',
-		'----------',
-		'----------'
-	]
-};
-
-export const japaneseCurry: Map = {
-	name: 'Japanese curry',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'w-b-b-b-b-',
-		'-w-b-b-b-b',
-		'w-w-b-b-b-',
-		'-w-w-b-b-b',
-		'w-w-wwb-b-',
-		'-w-wbb-b-b',
-		'w-w-w-b-b-',
-		'-w-w-w-b-b',
-		'w-w-w-w-b-',
-		'-w-w-w-w-b'
-	]
-};
-
-export const mosaic: Map = {
-	name: 'Mosaic',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'- - - - - ',
-		' - - - - -',
-		'- - - - - ',
-		' - w w - -',
-		'- - b b - ',
-		' - w w - -',
-		'- - b b - ',
-		' - - - - -',
-		'- - - - - ',
-		' - - - - -',
-	]
-};
-
-export const arena: Map = {
-	name: 'Arena',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'- - -- - -',
-		' - -  - - ',
-		'- ------ -',
-		' -------- ',
-		'- --wb-- -',
-		'- --bw-- -',
-		' -------- ',
-		'- ------ -',
-		' - -  - - ',
-		'- - -- - -'
-	]
-};
-
-export const reactor: Map = {
-	name: 'Reactor',
-	category: '10x10',
-	author: 'syuilo',
-	data: [
-		'-w------b-',
-		'b- -  - -w',
-		'- --wb-- -',
-		'---b  w---',
-		'- b wb w -',
-		'- w bw b -',
-		'---w  b---',
-		'- --bw-- -',
-		'w- -  - -b',
-		'-b------w-'
-	]
-};
-
-export const sixeight: Map = {
-	name: '6x8',
-	category: 'Special',
-	data: [
-		'------',
-		'------',
-		'------',
-		'--wb--',
-		'--bw--',
-		'------',
-		'------',
-		'------'
-	]
-};
-
-export const spark: Map = {
-	name: 'Spark',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' -      - ',
-		'----------',
-		' -------- ',
-		' -------- ',
-		' ---wb--- ',
-		' ---bw--- ',
-		' -------- ',
-		' -------- ',
-		'----------',
-		' -      - '
-	]
-};
-
-export const islands: Map = {
-	name: 'Islands',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'--------  ',
-		'---wb---  ',
-		'---bw---  ',
-		'--------  ',
-		'  -    -  ',
-		'  -    -  ',
-		'  --------',
-		'  --------',
-		'  --------',
-		'  --------'
-	]
-};
-
-export const galaxy: Map = {
-	name: 'Galaxy',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'   ------   ',
-		'  --www---  ',
-		' ------w--- ',
-		'---bbb--w---',
-		'--b---b-w-b-',
-		'-b--wwb-w-b-',
-		'-b-w-bww--b-',
-		'-b-w-b---b--',
-		'---w--bbb---',
-		' ---w------ ',
-		'  ---www--  ',
-		'   ------   '
-	]
-};
-
-export const triangle: Map = {
-	name: 'Triangle',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'    --    ',
-		'    --    ',
-		'   ----   ',
-		'   ----   ',
-		'  --wb--  ',
-		'  --bw--  ',
-		' -------- ',
-		' -------- ',
-		'----------',
-		'----------'
-	]
-};
-
-export const iphonex: Map = {
-	name: 'iPhone X',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' --  -- ',
-		'--------',
-		'--------',
-		'--------',
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------',
-		'--------',
-		'--------',
-		'--------',
-		' ------ '
-	]
-};
-
-export const dealWithIt: Map = {
-	name: 'Deal with it!',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		'------------',
-		'--w-b-------',
-		' --b-w------',
-		'  --w-b---- ',
-		'   -------  '
-	]
-};
-
-export const experiment: Map = {
-	name: 'Let\'s experiment',
-	category: 'Special',
-	author: 'syuilo',
-	data: [
-		' ------------ ',
-		'------wb------',
-		'------bw------',
-		'--------------',
-		'    -    -    ',
-		'------  ------',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'bbbbbb  wwwwww',
-		'wwwwww  bbbbbb'
-	]
-};
-
-export const bigBoard: Map = {
-	name: 'Big board',
-	category: 'Special',
-	data: [
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'-------wb-------',
-		'-------bw-------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------',
-		'----------------'
-	]
-};
-
-export const twoBoard: Map = {
-	name: 'Two board',
-	category: 'Special',
-	author: 'Aya',
-	data: [
-		'-------- --------',
-		'-------- --------',
-		'-------- --------',
-		'---wb--- ---wb---',
-		'---bw--- ---bw---',
-		'-------- --------',
-		'-------- --------',
-		'-------- --------'
-	]
-};
-
-export const test1: Map = {
-	name: 'Test1',
-	category: 'Test',
-	data: [
-		'--------',
-		'---wb---',
-		'---bw---',
-		'--------'
-	]
-};
-
-export const test2: Map = {
-	name: 'Test2',
-	category: 'Test',
-	data: [
-		'------',
-		'------',
-		'-b--w-',
-		'-w--b-',
-		'-w--b-'
-	]
-};
-
-export const test3: Map = {
-	name: 'Test3',
-	category: 'Test',
-	data: [
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'--w',
-		'w--',
-		'-w-',
-		'---',
-		'b--',
-	]
-};
-
-export const test4: Map = {
-	name: 'Test4',
-	category: 'Test',
-	data: [
-		'-w--b-',
-		'-w--b-',
-		'------',
-		'-w--b-',
-		'-w--b-'
-	]
-};
-
-// 検証用: この盤面で藍(lv3)が黒で始めると何故か(?)A1に打ってしまう
-export const test6: Map = {
-	name: 'Test6',
-	category: 'Test',
-	data: [
-		'--wwwww-',
-		'wwwwwwww',
-		'wbbbwbwb',
-		'wbbbbwbb',
-		'wbwbbwbb',
-		'wwbwbbbb',
-		'--wbbbbb',
-		'-wwwww--',
-	]
-};
-
-// 検証用: この盤面で藍(lv3)が黒で始めると何故か(?)G7に打ってしまう
-export const test7: Map = {
-	name: 'Test7',
-	category: 'Test',
-	data: [
-		'b--w----',
-		'b-wwww--',
-		'bwbwwwbb',
-		'wbwwwwb-',
-		'wwwwwww-',
-		'-wwbbwwb',
-		'--wwww--',
-		'--wwww--',
-	]
-};
-
-// 検証用: この盤面で藍(lv5)が黒で始めると何故か(?)A1に打ってしまう
-export const test8: Map = {
-	name: 'Test8',
-	category: 'Test',
-	data: [
-		'--------',
-		'-----w--',
-		'w--www--',
-		'wwwwww--',
-		'bbbbwww-',
-		'wwwwww--',
-		'--www---',
-		'--ww----',
-	]
-};
diff --git a/packages/client/src/scripts/games/reversi/package.json b/packages/client/src/scripts/games/reversi/package.json
deleted file mode 100644
index a4415ad141..0000000000
--- a/packages/client/src/scripts/games/reversi/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "misskey-reversi",
-  "version": "0.0.5",
-  "description": "Misskey reversi engine",
-  "keywords": [
-    "misskey"
-  ],
-  "author": "syuilo <i@syuilo.com>",
-  "license": "MIT",
-  "repository": "https://github.com/misskey-dev/misskey.git",
-  "bugs": "https://github.com/misskey-dev/misskey/issues",
-  "main": "./built/core.js",
-  "types": "./built/core.d.ts",
-  "scripts": {
-    "build": "tsc"
-  },
-  "dependencies": {}
-}
diff --git a/packages/client/src/scripts/games/reversi/tsconfig.json b/packages/client/src/scripts/games/reversi/tsconfig.json
deleted file mode 100644
index 851fb6b7e4..0000000000
--- a/packages/client/src/scripts/games/reversi/tsconfig.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-	"compilerOptions": {
-		"noEmitOnError": false,
-		"noImplicitAny": false,
-		"noImplicitReturns": true,
-		"noFallthroughCasesInSwitch": true,
-		"experimentalDecorators": true,
-		"declaration": true,
-		"sourceMap": false,
-		"target": "es2017",
-		"module": "commonjs",
-		"removeComments": false,
-		"noLib": false,
-		"outDir": "./built",
-		"rootDir": "./"
-	},
-	"compileOnSave": false,
-	"include": [
-		"./core.ts"
-	]
-}
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index f2732c57d3..745d323100 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -255,8 +255,6 @@ export class ColdDeviceStorage {
 		sound_chatBg: { type: 'syuilo/waon', volume: 1 },
 		sound_antenna: { type: 'syuilo/triple', volume: 1 },
 		sound_channel: { type: 'syuilo/square-pico', volume: 1 },
-		sound_reversiPutBlack: { type: 'syuilo/kick', volume: 0.3 },
-		sound_reversiPutWhite: { type: 'syuilo/snare', volume: 0.3 },
 	};
 
 	public static watchers = [];
-- 
cgit v1.2.3-freya


From 25f15677c3e16bfaf7e47b378df39400d6fd2776 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 13 Jan 2022 01:50:53 +0900
Subject: refactor

---
 packages/client/src/pages/settings/account-info.vue   | 2 --
 packages/client/src/pages/settings/accounts.vue       | 4 ----
 packages/client/src/pages/settings/api.vue            | 4 ----
 packages/client/src/pages/settings/apps.vue           | 4 ----
 packages/client/src/pages/settings/custom-css.vue     | 2 --
 packages/client/src/pages/settings/deck.vue           | 4 ----
 packages/client/src/pages/settings/delete-account.vue | 4 ----
 packages/client/src/pages/settings/drive.vue          | 4 ----
 packages/client/src/pages/settings/email.vue          | 2 --
 packages/client/src/pages/settings/general.vue        | 4 ----
 packages/client/src/pages/settings/import-export.vue  | 4 ----
 packages/client/src/pages/settings/index.vue          | 9 +++++----
 packages/client/src/pages/settings/instance-mute.vue  | 5 -----
 packages/client/src/pages/settings/integration.vue    | 2 --
 packages/client/src/pages/settings/menu.vue           | 4 ----
 packages/client/src/pages/settings/mute-block.vue     | 4 ----
 packages/client/src/pages/settings/notifications.vue  | 4 ----
 packages/client/src/pages/settings/other.vue          | 4 ----
 packages/client/src/pages/settings/plugin.install.vue | 4 ----
 packages/client/src/pages/settings/plugin.vue         | 4 ----
 packages/client/src/pages/settings/privacy.vue        | 4 ----
 packages/client/src/pages/settings/profile.vue        | 4 ----
 packages/client/src/pages/settings/reaction.vue       | 4 ----
 packages/client/src/pages/settings/security.vue       | 4 ----
 packages/client/src/pages/settings/sounds.vue         | 4 ----
 packages/client/src/pages/settings/theme.install.vue  | 4 ----
 packages/client/src/pages/settings/theme.manage.vue   | 4 ----
 packages/client/src/pages/settings/theme.vue          | 4 ----
 packages/client/src/pages/settings/word-mute.vue      | 4 ----
 29 files changed, 5 insertions(+), 109 deletions(-)

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/src/pages/settings/account-info.vue b/packages/client/src/pages/settings/account-info.vue
index ceff587302..c98ad056f6 100644
--- a/packages/client/src/pages/settings/account-info.vue
+++ b/packages/client/src/pages/settings/account-info.vue
@@ -154,8 +154,6 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-
 		os.api('users/stats', {
 			userId: this.$i.id
 		}).then(stats => {
diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
index 9ff11adda3..c795ede8ac 100644
--- a/packages/client/src/pages/settings/accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -53,10 +53,6 @@ export default defineComponent({
 		};
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		menu(account, ev) {
 			os.popupMenu([{
diff --git a/packages/client/src/pages/settings/api.vue b/packages/client/src/pages/settings/api.vue
index 1a51b526f2..20ff2a8d96 100644
--- a/packages/client/src/pages/settings/api.vue
+++ b/packages/client/src/pages/settings/api.vue
@@ -32,10 +32,6 @@ export default defineComponent({
 		};
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		generateToken() {
 			os.popup(import('@/components/token-generate-window.vue'), {}, {
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index 68952bbbdb..a75e06165d 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -67,10 +67,6 @@ export default defineComponent({
 		};
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		revoke(token) {
 			os.api('i/revoke-token', { tokenId: token.id }).then(() => {
diff --git a/packages/client/src/pages/settings/custom-css.vue b/packages/client/src/pages/settings/custom-css.vue
index 6dbb8c2ae9..556ee30c1d 100644
--- a/packages/client/src/pages/settings/custom-css.vue
+++ b/packages/client/src/pages/settings/custom-css.vue
@@ -37,8 +37,6 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-
 		this.$watch('localCustomCss', this.apply);
 	},
 
diff --git a/packages/client/src/pages/settings/deck.vue b/packages/client/src/pages/settings/deck.vue
index e290b095ac..46b90d3d1a 100644
--- a/packages/client/src/pages/settings/deck.vue
+++ b/packages/client/src/pages/settings/deck.vue
@@ -83,10 +83,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		async setProfile() {
 			const { canceled, result: name } = await os.inputText({
diff --git a/packages/client/src/pages/settings/delete-account.vue b/packages/client/src/pages/settings/delete-account.vue
index 17501d9510..7edc81a309 100644
--- a/packages/client/src/pages/settings/delete-account.vue
+++ b/packages/client/src/pages/settings/delete-account.vue
@@ -33,10 +33,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		async deleteAccount() {
 			{
diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
index c123159b61..f1016ebd84 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -99,10 +99,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		chooseUploadFolder() {
 			os.selectDriveFolder(false).then(async folder => {
diff --git a/packages/client/src/pages/settings/email.vue b/packages/client/src/pages/settings/email.vue
index e9010fbe42..54557f8773 100644
--- a/packages/client/src/pages/settings/email.vue
+++ b/packages/client/src/pages/settings/email.vue
@@ -111,8 +111,6 @@ export default defineComponent({
 		});
 
 		onMounted(() => {
-			context.emit('info', INFO);
-
 			watch(emailAddress, () => {
 				saveEmailAddress();
 			});
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index 734bc78442..2e159e56a9 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -195,10 +195,6 @@ export default defineComponent({
 		},
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		async reloadAsk() {
 			const { canceled } = await os.confirm({
diff --git a/packages/client/src/pages/settings/import-export.vue b/packages/client/src/pages/settings/import-export.vue
index a1dd6a1539..21031c559e 100644
--- a/packages/client/src/pages/settings/import-export.vue
+++ b/packages/client/src/pages/settings/import-export.vue
@@ -133,10 +133,6 @@ export default defineComponent({
 			os.api('i/import-blocking', { fileId: file.id }).then(onImportSuccess).catch(onError);
 		};
 
-		onMounted(() => {
-			context.emit('info', INFO);
-		});
-
 		return {
 			[symbols.PAGE_INFO]: INFO,
 			excludeMutingUsers,
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index c9acf2c63c..66c8b147bb 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -14,7 +14,7 @@
 			</div>
 			<div class="main">
 				<div class="bkzroven">
-					<component :is="component" :key="page" v-bind="pageProps" @info="onInfo"/>
+					<component :is="component" :ref="el => pageChanged(el)" :key="page" v-bind="pageProps"/>
 				</div>
 			</div>
 		</div>
@@ -250,8 +250,9 @@ export default defineComponent({
 
 		const emailNotConfigured = computed(() => instance.enableEmail && ($i.email == null || !$i.emailVerified));
 
-		const onInfo = (info) => {
-			childInfo.value = info;
+		const pageChanged = (page) => {
+			if (page == null) return;
+			childInfo.value = page[symbols.PAGE_INFO];
 		};
 
 		return {
@@ -264,7 +265,7 @@ export default defineComponent({
 			pageProps,
 			component,
 			emailNotConfigured,
-			onInfo,
+			pageChanged,
 			childInfo,
 		};
 	},
diff --git a/packages/client/src/pages/settings/instance-mute.vue b/packages/client/src/pages/settings/instance-mute.vue
index 584a21e4bd..f84a209b60 100644
--- a/packages/client/src/pages/settings/instance-mute.vue
+++ b/packages/client/src/pages/settings/instance-mute.vue
@@ -47,11 +47,6 @@ export default defineComponent({
 		},
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
-
 	async created() {
 		this.instanceMutes = this.$i.mutedInstances.join('\n');
 	},
diff --git a/packages/client/src/pages/settings/integration.vue b/packages/client/src/pages/settings/integration.vue
index e3dbc6fde9..ca36c91665 100644
--- a/packages/client/src/pages/settings/integration.vue
+++ b/packages/client/src/pages/settings/integration.vue
@@ -73,8 +73,6 @@ export default defineComponent({
 	},
 
 	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-
 		document.cookie = `igi=${this.$i.token}; path=/;` +
 			` max-age=31536000;` +
 			(document.location.protocol.startsWith('https') ? ' secure' : '');
diff --git a/packages/client/src/pages/settings/menu.vue b/packages/client/src/pages/settings/menu.vue
index 26404f3adf..6e38cd5dfe 100644
--- a/packages/client/src/pages/settings/menu.vue
+++ b/packages/client/src/pages/settings/menu.vue
@@ -67,10 +67,6 @@ export default defineComponent({
 		},
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		async addItem() {
 			const menu = Object.keys(this.menuDef).filter(k => !this.$store.state.menu.includes(k));
diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/mute-block.vue
index 6a63c9eb21..a4f9b41e80 100644
--- a/packages/client/src/pages/settings/mute-block.vue
+++ b/packages/client/src/pages/settings/mute-block.vue
@@ -66,10 +66,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		userPage
 	}
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
index ab26d7d558..12171530bb 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -37,10 +37,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		readAllUnreadNotes() {
 			os.api('i/read-all-unread-notes');
diff --git a/packages/client/src/pages/settings/other.vue b/packages/client/src/pages/settings/other.vue
index 7547013832..6e48cb58a6 100644
--- a/packages/client/src/pages/settings/other.vue
+++ b/packages/client/src/pages/settings/other.vue
@@ -47,10 +47,6 @@ export default defineComponent({
 		reportError: defaultStore.makeGetterSetter('reportError'),
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		changeDebug(v) {
 			console.log(v);
diff --git a/packages/client/src/pages/settings/plugin.install.vue b/packages/client/src/pages/settings/plugin.install.vue
index bf494fa719..d35d20d17a 100644
--- a/packages/client/src/pages/settings/plugin.install.vue
+++ b/packages/client/src/pages/settings/plugin.install.vue
@@ -45,10 +45,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		installPlugin({ id, meta, ast, token }) {
 			ColdDeviceStorage.set('plugins', ColdDeviceStorage.get('plugins').concat({
diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue
index d411ad2961..7a3ab9d152 100644
--- a/packages/client/src/pages/settings/plugin.vue
+++ b/packages/client/src/pages/settings/plugin.vue
@@ -64,10 +64,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		uninstall(plugin) {
 			ColdDeviceStorage.set('plugins', this.plugins.filter(x => x.id !== plugin.id));
diff --git a/packages/client/src/pages/settings/privacy.vue b/packages/client/src/pages/settings/privacy.vue
index 78a0ea8b8d..593ca75105 100644
--- a/packages/client/src/pages/settings/privacy.vue
+++ b/packages/client/src/pages/settings/privacy.vue
@@ -101,10 +101,6 @@ export default defineComponent({
 		this.ffVisibility = this.$i.ffVisibility;
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		save() {
 			os.api('i/update', {
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index 2eaf9a9f83..9a2395872e 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -132,10 +132,6 @@ export default defineComponent({
 		this.$watch('alwaysMarkNsfw', this.save);
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		changeAvatar(e) {
 			selectFile(e.currentTarget || e.target, this.$ts.avatar).then(file => {
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index 0d4db46936..e5b1189947 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -100,10 +100,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		save() {
 			this.$store.set('reactions', this.reactions);
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 03f2d6300b..2386340028 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -72,10 +72,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		async change() {
 			const { canceled: canceled1, result: currentPassword } = await os.inputText({
diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue
index b538bf7cf5..490a1b5514 100644
--- a/packages/client/src/pages/settings/sounds.vue
+++ b/packages/client/src/pages/settings/sounds.vue
@@ -96,10 +96,6 @@ export default defineComponent({
 		this.sounds.channel = ColdDeviceStorage.get('sound_channel');
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		async edit(type) {
 			const { canceled, result } = await os.form(this.$t('_sfx.' + type), {
diff --git a/packages/client/src/pages/settings/theme.install.vue b/packages/client/src/pages/settings/theme.install.vue
index 52935c75dc..deab77c615 100644
--- a/packages/client/src/pages/settings/theme.install.vue
+++ b/packages/client/src/pages/settings/theme.install.vue
@@ -40,10 +40,6 @@ export default defineComponent({
 		}
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		parseThemeCode(code) {
 			let theme;
diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue
index a913ba4748..a1e849b540 100644
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ b/packages/client/src/pages/settings/theme.manage.vue
@@ -78,10 +78,6 @@ export default defineComponent({
 		},
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		copyThemeCode() {
 			copyToClipboard(this.selectedThemeCode);
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 6c88b65699..658e36ec05 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -163,10 +163,6 @@ export default defineComponent({
 			location.reload();
 		});
 
-		onMounted(() => {
-			emit('info', INFO);
-		});
-
 		onActivated(() => {
 			fetchThemes().then(() => {
 				installedThemes.value = getThemes();
diff --git a/packages/client/src/pages/settings/word-mute.vue b/packages/client/src/pages/settings/word-mute.vue
index 34edd0492c..19980dea14 100644
--- a/packages/client/src/pages/settings/word-mute.vue
+++ b/packages/client/src/pages/settings/word-mute.vue
@@ -87,10 +87,6 @@ export default defineComponent({
 		this.hardWordMutedNotesCount = (await os.api('i/get-word-muted-notes-count', {})).count;
 	},
 
-	mounted() {
-		this.$emit('info', this[symbols.PAGE_INFO]);
-	},
-
 	methods: {
 		async save() {
 			this.$store.set('mutedWords', this.softMutedWords.trim().split('\n').map(x => x.trim().split(' ')));
-- 
cgit v1.2.3-freya


From 861d028d0971b026c98f4a68881b3c37749760ee Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 13 Jan 2022 02:26:10 +0900
Subject: refactor

---
 packages/client/src/pages/admin/abuses.vue        |  2 +-
 packages/client/src/pages/admin/emojis.vue        |  4 ++--
 packages/client/src/pages/admin/files.vue         |  2 +-
 packages/client/src/pages/admin/users.vue         |  2 +-
 packages/client/src/pages/announcements.vue       |  2 +-
 packages/client/src/pages/channel.vue             |  2 +-
 packages/client/src/pages/channels.vue            |  6 +++---
 packages/client/src/pages/clip.vue                |  2 +-
 packages/client/src/pages/explore.vue             |  4 ++--
 packages/client/src/pages/featured.vue            |  2 +-
 packages/client/src/pages/federation.vue          |  2 +-
 packages/client/src/pages/follow-requests.vue     |  2 +-
 packages/client/src/pages/gallery/index.vue       | 10 +++++-----
 packages/client/src/pages/gallery/post.vue        |  2 +-
 packages/client/src/pages/mentions.vue            |  2 +-
 packages/client/src/pages/messages.vue            |  2 +-
 packages/client/src/pages/my-antennas/index.vue   |  2 +-
 packages/client/src/pages/my-clips/index.vue      |  2 +-
 packages/client/src/pages/my-groups/index.vue     |  6 +++---
 packages/client/src/pages/my-lists/index.vue      |  2 +-
 packages/client/src/pages/note.vue                |  4 ++--
 packages/client/src/pages/page.vue                |  2 +-
 packages/client/src/pages/pages.vue               |  6 +++---
 packages/client/src/pages/search.vue              |  2 +-
 packages/client/src/pages/settings/apps.vue       |  2 +-
 packages/client/src/pages/settings/mute-block.vue |  4 ++--
 packages/client/src/pages/settings/security.vue   |  2 +-
 packages/client/src/pages/tag.vue                 |  2 +-
 packages/client/src/pages/user/clips.vue          |  2 +-
 packages/client/src/pages/user/follow-list.vue    |  4 ++--
 packages/client/src/pages/user/gallery.vue        |  2 +-
 packages/client/src/pages/user/pages.vue          |  2 +-
 packages/client/src/pages/user/reactions.vue      |  2 +-
 packages/client/src/ui/deck/direct-column.vue     |  2 +-
 packages/client/src/ui/deck/mentions-column.vue   |  2 +-
 35 files changed, 50 insertions(+), 50 deletions(-)

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/src/pages/admin/abuses.vue b/packages/client/src/pages/admin/abuses.vue
index 0f19f8dbe9..31cdef492a 100644
--- a/packages/client/src/pages/admin/abuses.vue
+++ b/packages/client/src/pages/admin/abuses.vue
@@ -95,7 +95,7 @@ export default defineComponent({
 			reporterOrigin: 'combined',
 			targetUserOrigin: 'combined',
 			pagination: {
-				endpoint: 'admin/abuse-user-reports',
+				endpoint: 'admin/abuse-user-reports' as const,
 				limit: 10,
 				params: computed(() => ({
 					state: this.state,
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index 38182e5be7..5b1dfe565a 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -85,7 +85,7 @@ const selectMode = ref(false);
 const selectedEmojis = ref<string[]>([]);
 
 const pagination = {
-	endpoint: 'admin/emoji/list',
+	endpoint: 'admin/emoji/list' as const,
 	limit: 30,
 	params: computed(() => ({
 		query: (query.value && query.value !== '') ? query.value : null,
@@ -93,7 +93,7 @@ const pagination = {
 };
 
 const remotePagination = {
-	endpoint: 'admin/emoji/list-remote',
+	endpoint: 'admin/emoji/list-remote' as const,
 	limit: 30,
 	params: computed(() => ({
 		query: (queryRemote.value && queryRemote.value !== '') ? queryRemote.value : null,
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
index 10341e7e36..87dd12f489 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -95,7 +95,7 @@ export default defineComponent({
 			type: null,
 			searchHost: '',
 			pagination: {
-				endpoint: 'admin/drive/files',
+				endpoint: 'admin/drive/files' as const,
 				limit: 10,
 				params: computed(() => ({
 					type: (this.type && this.type !== '') ? this.type : null,
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index 30220a2a29..03e155ddcf 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -110,7 +110,7 @@ export default defineComponent({
 			searchUsername: '',
 			searchHost: '',
 			pagination: {
-				endpoint: 'admin/show-users',
+				endpoint: 'admin/show-users' as const,
 				limit: 10,
 				params: computed(() => ({
 					sort: this.sort,
diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
index ca94640dda..53727823a4 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -36,7 +36,7 @@ export default defineComponent({
 				bg: 'var(--bg)',
 			},
 			pagination: {
-				endpoint: 'announcements',
+				endpoint: 'announcements' as const,
 				limit: 10,
 			},
 		};
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index 598e173d81..c9a8f36844 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -67,7 +67,7 @@ export default defineComponent({
 			channel: null,
 			showBanner: true,
 			pagination: {
-				endpoint: 'channels/timeline',
+				endpoint: 'channels/timeline' as const,
 				limit: 10,
 				params: computed(() => ({
 					channelId: this.channelId,
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index 48877ab3ec..4e538a6da3 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -60,15 +60,15 @@ export default defineComponent({
 			})),
 			tab: 'featured',
 			featuredPagination: {
-				endpoint: 'channels/featured',
+				endpoint: 'channels/featured' as const,
 				noPaging: true,
 			},
 			followingPagination: {
-				endpoint: 'channels/followed',
+				endpoint: 'channels/followed' as const,
 				limit: 5,
 			},
 			ownedPagination: {
-				endpoint: 'channels/owned',
+				endpoint: 'channels/owned' as const,
 				limit: 5,
 			},
 		};
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index b375856803..6b49221d32 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -50,7 +50,7 @@ export default defineComponent({
 			} : null),
 			clip: null,
 			pagination: {
-				endpoint: 'clips/notes',
+				endpoint: 'clips/notes' as const,
 				limit: 10,
 				params: computed(() => ({
 					clipId: this.clipId,
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index a3c3b771f2..04cc3662a7 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -156,7 +156,7 @@ export default defineComponent({
 				sort: '+createdAt',
 			} },
 			searchPagination: {
-				endpoint: 'users/search',
+				endpoint: 'users/search' as const,
 				limit: 10,
 				params: computed(() => (this.searchQuery && this.searchQuery !== '') ? {
 					query: this.searchQuery,
@@ -178,7 +178,7 @@ export default defineComponent({
 		},
 		tagUsers(): any {
 			return {
-				endpoint: 'hashtags/users',
+				endpoint: 'hashtags/users' as const,
 				limit: 30,
 				params: {
 					tag: this.tag,
diff --git a/packages/client/src/pages/featured.vue b/packages/client/src/pages/featured.vue
index efa74ca599..725c70f0f7 100644
--- a/packages/client/src/pages/featured.vue
+++ b/packages/client/src/pages/featured.vue
@@ -10,7 +10,7 @@ import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
 
 const pagination = {
-	endpoint: 'notes/featured',
+	endpoint: 'notes/featured' as const,
 	limit: 10,
 	offsetMode: true,
 };
diff --git a/packages/client/src/pages/federation.vue b/packages/client/src/pages/federation.vue
index e23c4f8f16..610c9233a3 100644
--- a/packages/client/src/pages/federation.vue
+++ b/packages/client/src/pages/federation.vue
@@ -127,7 +127,7 @@ export default defineComponent({
 			state: 'federating',
 			sort: '+pubSub',
 			pagination: {
-				endpoint: 'federation/instances',
+				endpoint: 'federation/instances' as const,
 				limit: 10,
 				offsetMode: true,
 				params: computed(() => ({
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index 00dfa06564..764daa0d3e 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -42,7 +42,7 @@ import { i18n } from '@/i18n';
 const paginationComponent = ref<InstanceType<typeof MkPagination>>();
 
 const pagination = {
-	endpoint: 'following/requests/list',
+	endpoint: 'following/requests/list' as const,
 	limit: 10,
 };
 
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index cd0d2a40e4..a19d69d5c2 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -81,19 +81,19 @@ export default defineComponent({
 			},
 			tab: 'explore',
 			recentPostsPagination: {
-				endpoint: 'gallery/posts',
+				endpoint: 'gallery/posts' as const,
 				limit: 6,
 			},
 			popularPostsPagination: {
-				endpoint: 'gallery/featured',
+				endpoint: 'gallery/featured' as const,
 				limit: 5,
 			},
 			myPostsPagination: {
-				endpoint: 'i/gallery/posts',
+				endpoint: 'i/gallery/posts' as const,
 				limit: 5,
 			},
 			likedPostsPagination: {
-				endpoint: 'i/gallery/likes',
+				endpoint: 'i/gallery/likes' as const,
 				limit: 5,
 			},
 			tags: [],
@@ -106,7 +106,7 @@ export default defineComponent({
 		},
 		tagUsers(): any {
 			return {
-				endpoint: 'hashtags/users',
+				endpoint: 'hashtags/users' as const,
 				limit: 30,
 				params: {
 					tag: this.tag,
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 9d769deca0..fff2b6a74e 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -93,7 +93,7 @@ export default defineComponent({
 				}]
 			} : null),
 			otherPostsPagination: {
-				endpoint: 'users/gallery/posts',
+				endpoint: 'users/gallery/posts' as const,
 				limit: 6,
 				params: computed(() => ({
 					userId: this.post.user.id
diff --git a/packages/client/src/pages/mentions.vue b/packages/client/src/pages/mentions.vue
index ea23c6a2f6..bda56fc729 100644
--- a/packages/client/src/pages/mentions.vue
+++ b/packages/client/src/pages/mentions.vue
@@ -10,7 +10,7 @@ import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
 
 const pagination = {
-	endpoint: 'notes/mentions',
+	endpoint: 'notes/mentions' as const,
 	limit: 10,
 };
 
diff --git a/packages/client/src/pages/messages.vue b/packages/client/src/pages/messages.vue
index 448aa0241f..8efdc55586 100644
--- a/packages/client/src/pages/messages.vue
+++ b/packages/client/src/pages/messages.vue
@@ -10,7 +10,7 @@ import * as symbols from '@/symbols';
 import { i18n } from '@/i18n';
 
 const pagination = {
-	endpoint: 'notes/mentions',
+	endpoint: 'notes/mentions' as const,
 	limit: 10,
 	params: () => ({
 		visibility: 'specified'
diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue
index d185e796c3..7138d269a9 100644
--- a/packages/client/src/pages/my-antennas/index.vue
+++ b/packages/client/src/pages/my-antennas/index.vue
@@ -38,7 +38,7 @@ export default defineComponent({
 				}
 			},
 			pagination: {
-				endpoint: 'antennas/list',
+				endpoint: 'antennas/list' as const,
 				limit: 10,
 			},
 		};
diff --git a/packages/client/src/pages/my-clips/index.vue b/packages/client/src/pages/my-clips/index.vue
index a5bbc3fd2d..ccfb9095d1 100644
--- a/packages/client/src/pages/my-clips/index.vue
+++ b/packages/client/src/pages/my-clips/index.vue
@@ -38,7 +38,7 @@ export default defineComponent({
 				}
 			},
 			pagination: {
-				endpoint: 'clips/list',
+				endpoint: 'clips/list' as const,
 				limit: 10,
 			},
 			draft: null,
diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue
index db5ccde466..4b2b2963a8 100644
--- a/packages/client/src/pages/my-groups/index.vue
+++ b/packages/client/src/pages/my-groups/index.vue
@@ -87,15 +87,15 @@ export default defineComponent({
 			})),
 			tab: 'owned',
 			ownedPagination: {
-				endpoint: 'users/groups/owned',
+				endpoint: 'users/groups/owned' as const,
 				limit: 10,
 			},
 			joinedPagination: {
-				endpoint: 'users/groups/joined',
+				endpoint: 'users/groups/joined' as const,
 				limit: 10,
 			},
 			invitationPagination: {
-				endpoint: 'i/user-group-invites',
+				endpoint: 'i/user-group-invites' as const,
 				limit: 10,
 			},
 		};
diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue
index 94a869b9ff..1b1b7e2d02 100644
--- a/packages/client/src/pages/my-lists/index.vue
+++ b/packages/client/src/pages/my-lists/index.vue
@@ -40,7 +40,7 @@ export default defineComponent({
 				},
 			},
 			pagination: {
-				endpoint: 'users/lists/list',
+				endpoint: 'users/lists/list' as const,
 				limit: 10,
 			},
 		};
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index d40082381c..2249fa2b91 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -82,7 +82,7 @@ export default defineComponent({
 			showNext: false,
 			error: null,
 			prev: {
-				endpoint: 'users/notes',
+				endpoint: 'users/notes' as const,
 				limit: 10,
 				params: init => ({
 					userId: this.note.userId,
@@ -91,7 +91,7 @@ export default defineComponent({
 			},
 			next: {
 				reversed: true,
-				endpoint: 'users/notes',
+				endpoint: 'users/notes' as const,
 				limit: 10,
 				params: init => ({
 					userId: this.note.userId,
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 5cb3948f1c..429d1ddea2 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -106,7 +106,7 @@ export default defineComponent({
 			page: null,
 			error: null,
 			otherPostsPagination: {
-				endpoint: 'users/pages',
+				endpoint: 'users/pages' as const,
 				limit: 6,
 				params: computed(() => ({
 					userId: this.page.user.id
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index f1dd64f119..dcccf7f7c4 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -62,15 +62,15 @@ export default defineComponent({
 			})),
 			tab: 'featured',
 			featuredPagesPagination: {
-				endpoint: 'pages/featured',
+				endpoint: 'pages/featured' as const,
 				noPaging: true,
 			},
 			myPagesPagination: {
-				endpoint: 'i/pages',
+				endpoint: 'i/pages' as const,
 				limit: 5,
 			},
 			likedPagesPagination: {
-				endpoint: 'i/page-likes',
+				endpoint: 'i/page-likes' as const,
 				limit: 5,
 			},
 		};
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index d25d5af147..ce2b7035da 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -18,7 +18,7 @@ const props = defineProps<{
 }>();
 
 const pagination = {
-	endpoint: 'notes/search',
+	endpoint: 'notes/search' as const,
 	limit: 10,
 	params: computed(() => ({
 		query: props.query,
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index a75e06165d..9c0fa8a54d 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -58,7 +58,7 @@ export default defineComponent({
 				bg: 'var(--bg)',
 			},
 			pagination: {
-				endpoint: 'i/apps',
+				endpoint: 'i/apps' as const,
 				limit: 100,
 				params: {
 					sort: '+lastUsedAt'
diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/mute-block.vue
index a4f9b41e80..903d32d08c 100644
--- a/packages/client/src/pages/settings/mute-block.vue
+++ b/packages/client/src/pages/settings/mute-block.vue
@@ -56,11 +56,11 @@ export default defineComponent({
 			},
 			tab: 'mute',
 			mutingPagination: {
-				endpoint: 'mute/list',
+				endpoint: 'mute/list' as const,
 				limit: 10,
 			},
 			blockingPagination: {
-				endpoint: 'blocking/list',
+				endpoint: 'blocking/list' as const,
 				limit: 10,
 			},
 		}
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 2386340028..6fb3f1c413 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -66,7 +66,7 @@ export default defineComponent({
 				bg: 'var(--bg)',
 			},
 			pagination: {
-				endpoint: 'i/signin-history',
+				endpoint: 'i/signin-history' as const,
 				limit: 5,
 			},
 		}
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index debee2606d..8d8dc0a65c 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -14,7 +14,7 @@ const props = defineProps<{
 }>();
 
 const pagination = {
-	endpoint: 'notes/search-by-tag',
+	endpoint: 'notes/search-by-tag' as const,
 	limit: 10,
 	params: computed(() => ({
 		tag: props.tag,
diff --git a/packages/client/src/pages/user/clips.vue b/packages/client/src/pages/user/clips.vue
index aad5317ce0..870e6f7174 100644
--- a/packages/client/src/pages/user/clips.vue
+++ b/packages/client/src/pages/user/clips.vue
@@ -28,7 +28,7 @@ export default defineComponent({
 	data() {
 		return {
 			pagination: {
-				endpoint: 'users/clips',
+				endpoint: 'users/clips' as const,
 				limit: 20,
 				params: {
 					userId: this.user.id,
diff --git a/packages/client/src/pages/user/follow-list.vue b/packages/client/src/pages/user/follow-list.vue
index e12ea477ca..b34757c166 100644
--- a/packages/client/src/pages/user/follow-list.vue
+++ b/packages/client/src/pages/user/follow-list.vue
@@ -33,14 +33,14 @@ export default defineComponent({
 	data() {
 		return {
 			followingPagination: {
-				endpoint: 'users/following',
+				endpoint: 'users/following' as const,
 				limit: 20,
 				params: computed(() => ({
 					userId: this.user.id,
 				})),
 			},
 			followersPagination: {
-				endpoint: 'users/followers',
+				endpoint: 'users/followers' as const,
 				limit: 20,
 				params: computed(() => ({
 					userId: this.user.id,
diff --git a/packages/client/src/pages/user/gallery.vue b/packages/client/src/pages/user/gallery.vue
index 88f0604f1f..07dda4a292 100644
--- a/packages/client/src/pages/user/gallery.vue
+++ b/packages/client/src/pages/user/gallery.vue
@@ -29,7 +29,7 @@ export default defineComponent({
 	data() {
 		return {
 			pagination: {
-				endpoint: 'users/gallery/posts',
+				endpoint: 'users/gallery/posts' as const,
 				limit: 6,
 				params: computed(() => ({
 					userId: this.user.id
diff --git a/packages/client/src/pages/user/pages.vue b/packages/client/src/pages/user/pages.vue
index 3075dd5729..6ce84da0a2 100644
--- a/packages/client/src/pages/user/pages.vue
+++ b/packages/client/src/pages/user/pages.vue
@@ -27,7 +27,7 @@ export default defineComponent({
 	data() {
 		return {
 			pagination: {
-				endpoint: 'users/pages',
+				endpoint: 'users/pages' as const,
 				limit: 20,
 				params: computed(() => ({
 					userId: this.user.id,
diff --git a/packages/client/src/pages/user/reactions.vue b/packages/client/src/pages/user/reactions.vue
index f51f6669c3..5cb035bace 100644
--- a/packages/client/src/pages/user/reactions.vue
+++ b/packages/client/src/pages/user/reactions.vue
@@ -36,7 +36,7 @@ export default defineComponent({
 	data() {
 		return {
 			pagination: {
-				endpoint: 'users/reactions',
+				endpoint: 'users/reactions' as const,
 				limit: 20,
 				params: computed(() => ({
 					userId: this.user.id,
diff --git a/packages/client/src/ui/deck/direct-column.vue b/packages/client/src/ui/deck/direct-column.vue
index 4206b09b97..7bf6344153 100644
--- a/packages/client/src/ui/deck/direct-column.vue
+++ b/packages/client/src/ui/deck/direct-column.vue
@@ -32,7 +32,7 @@ export default defineComponent({
 	data() {
 		return {
 			pagination: {
-				endpoint: 'notes/mentions',
+				endpoint: 'notes/mentions' as const,
 				limit: 10,
 				params: computed(() => ({
 					visibility: 'specified'
diff --git a/packages/client/src/ui/deck/mentions-column.vue b/packages/client/src/ui/deck/mentions-column.vue
index 4b8dc0c4ee..e007b3e08a 100644
--- a/packages/client/src/ui/deck/mentions-column.vue
+++ b/packages/client/src/ui/deck/mentions-column.vue
@@ -32,7 +32,7 @@ export default defineComponent({
 	data() {
 		return {
 			pagination: {
-				endpoint: 'notes/mentions',
+				endpoint: 'notes/mentions' as const,
 				limit: 10,
 			},
 		}
-- 
cgit v1.2.3-freya


From 41e18aa993c4644c5329e37ff9035a82dad0de9e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 15 Jan 2022 17:58:35 +0900
Subject: wip: refactor(client): migrate components to composition api

---
 packages/client/src/pages/settings/mute-block.vue  |  49 ++++-----
 .../client/src/pages/settings/theme.install.vue    | 117 ++++++++++-----------
 packages/client/src/ui/_common_/upload.vue         |  14 +--
 packages/client/src/widgets/server-metric/disk.vue |  33 ++----
 packages/client/src/widgets/server-metric/pie.vue  |  33 ++----
 5 files changed, 95 insertions(+), 151 deletions(-)

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/mute-block.vue
index 903d32d08c..f4f9ebf8dd 100644
--- a/packages/client/src/pages/settings/mute-block.vue
+++ b/packages/client/src/pages/settings/mute-block.vue
@@ -27,8 +27,8 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import MkPagination from '@/components/ui/pagination.vue';
 import MkTab from '@/components/tab.vue';
 import FormInfo from '@/components/ui/info.vue';
@@ -36,38 +36,25 @@ import FormLink from '@/components/form/link.vue';
 import { userPage } from '@/filters/user';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		MkPagination,
-		MkTab,
-		FormInfo,
-		FormLink,
-	},
+let tab = $ref('mute');
 
-	emits: ['info'],
+const mutingPagination = {
+	endpoint: 'mute/list' as const,
+	limit: 10,
+};
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.muteAndBlock,
-				icon: 'fas fa-ban',
-				bg: 'var(--bg)',
-			},
-			tab: 'mute',
-			mutingPagination: {
-				endpoint: 'mute/list' as const,
-				limit: 10,
-			},
-			blockingPagination: {
-				endpoint: 'blocking/list' as const,
-				limit: 10,
-			},
-		}
-	},
+const blockingPagination = {
+	endpoint: 'blocking/list' as const,
+	limit: 10,
+};
 
-	methods: {
-		userPage
-	}
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.locale.muteAndBlock,
+		icon: 'fas fa-ban',
+		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 deab77c615..e2a3f042b9 100644
--- a/packages/client/src/pages/settings/theme.install.vue
+++ b/packages/client/src/pages/settings/theme.install.vue
@@ -1,18 +1,18 @@
 <template>
 <div class="_formRoot">
 	<FormTextarea v-model="installThemeCode" class="_formBlock">
-		<template #label>{{ $ts._theme.code }}</template>
+		<template #label>{{ i18n.locale._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="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
-		<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="fas fa-check"></i> {{ $ts.install }}</FormButton>
+		<FormButton :disabled="installThemeCode == null" inline @click="() => preview(installThemeCode)"><i class="fas fa-eye"></i> {{ i18n.locale.preview }}</FormButton>
+		<FormButton :disabled="installThemeCode == null" primary inline @click="() => install(installThemeCode)"><i class="fas fa-check"></i> {{ i18n.locale.install }}</FormButton>
 	</div>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import * as JSON5 from 'json5';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormButton from '@/components/ui/button.vue';
@@ -20,71 +20,60 @@ import { applyTheme, validateTheme } from '@/scripts/theme';
 import * as os from '@/os';
 import { addTheme, getThemes } from '@/theme-store';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
-	components: {
-		FormTextarea,
-		FormButton,
-	},
-
-	emits: ['info'],
+let installThemeCode = $ref(null);
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts._theme.install,
-				icon: 'fas fa-download',
-				bg: 'var(--bg)',
-			},
-			installThemeCode: null,
-		}
-	},
+function parseThemeCode(code: string) {
+	let theme;
 
-	methods: {
-		parseThemeCode(code) {
-			let theme;
+	try {
+		theme = JSON5.parse(code);
+	} catch (e) {
+		os.alert({
+			type: 'error',
+			text: i18n.locale._theme.invalid
+		});
+		return false;
+	}
+	if (!validateTheme(theme)) {
+		os.alert({
+			type: 'error',
+			text: i18n.locale._theme.invalid
+		});
+		return false;
+	}
+	if (getThemes().some(t => t.id === theme.id)) {
+		os.alert({
+			type: 'info',
+			text: i18n.locale._theme.alreadyInstalled
+		});
+		return false;
+	}
 
-			try {
-				theme = JSON5.parse(code);
-			} catch (e) {
-				os.alert({
-					type: 'error',
-					text: this.$ts._theme.invalid
-				});
-				return false;
-			}
-			if (!validateTheme(theme)) {
-				os.alert({
-					type: 'error',
-					text: this.$ts._theme.invalid
-				});
-				return false;
-			}
-			if (getThemes().some(t => t.id === theme.id)) {
-				os.alert({
-					type: 'info',
-					text: this.$ts._theme.alreadyInstalled
-				});
-				return false;
-			}
+	return theme;
+}
 
-			return theme;
-		},
+function preview(code: string): void {
+	const theme = parseThemeCode(code);
+	if (theme) applyTheme(theme, false);
+}
 
-		preview(code) {
-			const theme = this.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 })
+	});
+}
 
-		async install(code) {
-			const theme = this.parseThemeCode(code);
-			if (!theme) return;
-			await addTheme(theme);
-			os.alert({
-				type: 'success',
-				text: this.$t('_theme.installed', { name: theme.name })
-			});
-		},
-	}
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.locale._theme.install,
+		icon: 'fas fa-download',
+		bg: 'var(--bg)',
+	},
 });
 </script>
diff --git a/packages/client/src/ui/_common_/upload.vue b/packages/client/src/ui/_common_/upload.vue
index a1c5dcdecc..ab7678a505 100644
--- a/packages/client/src/ui/_common_/upload.vue
+++ b/packages/client/src/ui/_common_/upload.vue
@@ -17,18 +17,12 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import * as os from '@/os';
 
-export default defineComponent({
-	data() {
-		return {
-			uploads: os.uploads,
-			zIndex: os.claimZIndex('high'),
-		};
-	},
-});
+const uploads = os.uploads;
+const zIndex = os.claimZIndex('high');
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/widgets/server-metric/disk.vue b/packages/client/src/widgets/server-metric/disk.vue
index 650101b0ee..052991b554 100644
--- a/packages/client/src/widgets/server-metric/disk.vue
+++ b/packages/client/src/widgets/server-metric/disk.vue
@@ -10,32 +10,19 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 import XPie from './pie.vue';
 import bytes from '@/filters/bytes';
 
-export default defineComponent({
-	components: {
-		XPie
-	},
-	props: {
-		meta: {
-			required: true,
-		}
-	},
-	data() {
-		return {
-			usage: this.meta.fs.used / this.meta.fs.total,
-			total: this.meta.fs.total,
-			used: this.meta.fs.used,
-			available: this.meta.fs.total - this.meta.fs.used,
-		};
-	},
-	methods: {
-		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>
diff --git a/packages/client/src/widgets/server-metric/pie.vue b/packages/client/src/widgets/server-metric/pie.vue
index 38dcf6fcd9..868dbc0484 100644
--- a/packages/client/src/widgets/server-metric/pie.vue
+++ b/packages/client/src/widgets/server-metric/pie.vue
@@ -20,30 +20,17 @@
 </svg>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { } from 'vue';
 
-export default defineComponent({
-	props: {
-		value: {
-			type: Number,
-			required: true
-		}
-	},
-	data() {
-		return {
-			r: 0.45
-		};
-	},
-	computed: {
-		color(): string {
-			return `hsl(${180 - (this.value * 180)}, 80%, 70%)`;
-		},
-		strokeDashoffset(): number {
-			return (1 - this.value) * (Math.PI * (this.r * 2));
-		}
-	}
-});
+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>
-- 
cgit v1.2.3-freya


From daba865a94d19124594caa56254b2b5cd9a26f0a Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 15 Jan 2022 20:35:10 +0900
Subject: wip: refactor(client): migrate components to composition api

---
 packages/client/src/pages/settings/privacy.vue | 86 ++++++++++----------------
 1 file changed, 31 insertions(+), 55 deletions(-)

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/src/pages/settings/privacy.vue b/packages/client/src/pages/settings/privacy.vue
index 593ca75105..dd13ba4bd0 100644
--- a/packages/client/src/pages/settings/privacy.vue
+++ b/packages/client/src/pages/settings/privacy.vue
@@ -47,8 +47,8 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<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';
@@ -56,63 +56,39 @@ import FormGroup from '@/components/form/group.vue';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
 
-export default defineComponent({
-	components: {
-		FormSelect,
-		FormSection,
-		FormGroup,
-		FormSwitch,
-	},
+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);
 
-	emits: ['info'],
-	
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.privacy,
-				icon: 'fas fa-lock-open',
-				bg: 'var(--bg)',
-			},
-			isLocked: false,
-			autoAcceptFollowed: false,
-			noCrawle: false,
-			isExplorable: false,
-			hideOnlineStatus: false,
-			publicReactions: false,
-			ffVisibility: 'public',
-		}
-	},
+let defaultNoteVisibility = $computed(defaultStore.makeGetterSetter('defaultNoteVisibility'));
+let defaultNoteLocalOnly = $computed(defaultStore.makeGetterSetter('defaultNoteLocalOnly'));
+let rememberNoteVisibility = $computed(defaultStore.makeGetterSetter('rememberNoteVisibility'));
+let keepCw = $computed(defaultStore.makeGetterSetter('keepCw'));
 
-	computed: {
-		defaultNoteVisibility: defaultStore.makeGetterSetter('defaultNoteVisibility'),
-		defaultNoteLocalOnly: defaultStore.makeGetterSetter('defaultNoteLocalOnly'),
-		rememberNoteVisibility: defaultStore.makeGetterSetter('rememberNoteVisibility'),
-		keepCw: defaultStore.makeGetterSetter('keepCw'),
-	},
+function save() {
+	os.api('i/update', {
+		isLocked: !!isLocked,
+		autoAcceptFollowed: !!autoAcceptFollowed,
+		noCrawle: !!noCrawle,
+		isExplorable: !!isExplorable,
+		hideOnlineStatus: !!hideOnlineStatus,
+		publicReactions: !!publicReactions,
+		ffVisibility: ffVisibility,
+	});
+}
 
-	created() {
-		this.isLocked = this.$i.isLocked;
-		this.autoAcceptFollowed = this.$i.autoAcceptFollowed;
-		this.noCrawle = this.$i.noCrawle;
-		this.isExplorable = this.$i.isExplorable;
-		this.hideOnlineStatus = this.$i.hideOnlineStatus;
-		this.publicReactions = this.$i.publicReactions;
-		this.ffVisibility = this.$i.ffVisibility;
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.locale.privacy,
+		icon: 'fas fa-lock-open',
+		bg: 'var(--bg)',
 	},
-
-	methods: {
-		save() {
-			os.api('i/update', {
-				isLocked: !!this.isLocked,
-				autoAcceptFollowed: !!this.autoAcceptFollowed,
-				noCrawle: !!this.noCrawle,
-				isExplorable: !!this.isExplorable,
-				hideOnlineStatus: !!this.hideOnlineStatus,
-				publicReactions: !!this.publicReactions,
-				ffVisibility: this.ffVisibility,
-			});
-		}
-	}
 });
 </script>
-- 
cgit v1.2.3-freya


From 9885c6ba6cb17c38ff723e529834ec2fff210d86 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 16 Jan 2022 21:31:09 +0900
Subject: wip: refactor(client): migrate components to composition api

---
 packages/client/src/components/global/avatar.vue |   4 +-
 packages/client/src/pages/settings/profile.vue   | 351 ++++++++++-------------
 packages/client/src/scripts/use-leave-guard.ts   |  12 +
 3 files changed, 167 insertions(+), 200 deletions(-)

(limited to 'packages/client/src/pages/settings')

diff --git a/packages/client/src/components/global/avatar.vue b/packages/client/src/components/global/avatar.vue
index 9e8979fe56..27cfb6e4d4 100644
--- a/packages/client/src/components/global/avatar.vue
+++ b/packages/client/src/components/global/avatar.vue
@@ -35,9 +35,9 @@ const emit = defineEmits<{
 	(e: 'click', ev: MouseEvent): void;
 }>();
 
-const url = defaultStore.state.disableShowingAnimatedImages
+const url = $computed(() => defaultStore.state.disableShowingAnimatedImages
 	? getStaticImageUrl(props.user.avatarUrl)
-	: props.user.avatarUrl;
+	: props.user.avatarUrl);
 
 function onClick(ev: MouseEvent) {
 	emit('click', ev);
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index 9a2395872e..f875146a2c 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -3,50 +3,50 @@
 	<div class="llvierxe" :style="{ backgroundImage: $i.bannerUrl ? `url(${ $i.bannerUrl })` : null }">
 		<div class="avatar _acrylic">
 			<MkAvatar class="avatar" :user="$i" :disable-link="true" @click="changeAvatar"/>
-			<MkButton primary class="avatarEdit" @click="changeAvatar">{{ $ts._profile.changeAvatar }}</MkButton>
+			<MkButton primary class="avatarEdit" @click="changeAvatar">{{ i18n.locale._profile.changeAvatar }}</MkButton>
 		</div>
-		<MkButton primary class="bannerEdit" @click="changeBanner">{{ $ts._profile.changeBanner }}</MkButton>
+		<MkButton primary class="bannerEdit" @click="changeBanner">{{ i18n.locale._profile.changeBanner }}</MkButton>
 	</div>
 
-	<FormInput v-model="name" :max="30" manual-save class="_formBlock">
-		<template #label>{{ $ts._profile.name }}</template>
+	<FormInput v-model="profile.name" :max="30" manual-save class="_formBlock">
+		<template #label>{{ i18n.locale._profile.name }}</template>
 	</FormInput>
 
-	<FormTextarea v-model="description" :max="500" tall manual-save class="_formBlock">
-		<template #label>{{ $ts._profile.description }}</template>
-		<template #caption>{{ $ts._profile.youCanIncludeHashtags }}</template>
+	<FormTextarea v-model="profile.description" :max="500" tall manual-save class="_formBlock">
+		<template #label>{{ i18n.locale._profile.description }}</template>
+		<template #caption>{{ i18n.locale._profile.youCanIncludeHashtags }}</template>
 	</FormTextarea>
 
-	<FormInput v-model="location" manual-save class="_formBlock">
-		<template #label>{{ $ts.location }}</template>
+	<FormInput v-model="profile.location" manual-save class="_formBlock">
+		<template #label>{{ i18n.locale.location }}</template>
 		<template #prefix><i class="fas fa-map-marker-alt"></i></template>
 	</FormInput>
 
-	<FormInput v-model="birthday" type="date" manual-save class="_formBlock">
-		<template #label>{{ $ts.birthday }}</template>
+	<FormInput v-model="profile.birthday" type="date" manual-save class="_formBlock">
+		<template #label>{{ i18n.locale.birthday }}</template>
 		<template #prefix><i class="fas fa-birthday-cake"></i></template>
 	</FormInput>
 
-	<FormSelect v-model="lang" class="_formBlock">
-		<template #label>{{ $ts.language }}</template>
+	<FormSelect v-model="profile.lang" class="_formBlock">
+		<template #label>{{ i18n.locale.language }}</template>
 		<option v-for="x in langs" :key="x[0]" :value="x[0]">{{ x[1] }}</option>
 	</FormSelect>
 
 	<FormSlot>
-		<MkButton @click="editMetadata">{{ $ts._profile.metadataEdit }}</MkButton>
-		<template #caption>{{ $ts._profile.metadataDescription }}</template>
+		<MkButton @click="editMetadata">{{ i18n.locale._profile.metadataEdit }}</MkButton>
+		<template #caption>{{ i18n.locale._profile.metadataDescription }}</template>
 	</FormSlot>
 
-	<FormSwitch v-model="isCat" class="_formBlock">{{ $ts.flagAsCat }}<template #caption>{{ $ts.flagAsCatDescription }}</template></FormSwitch>
+	<FormSwitch v-model="profile.isCat" class="_formBlock">{{ i18n.locale.flagAsCat }}<template #caption>{{ i18n.locale.flagAsCatDescription }}</template></FormSwitch>
 
-	<FormSwitch v-model="isBot" class="_formBlock">{{ $ts.flagAsBot }}<template #caption>{{ $ts.flagAsBotDescription }}</template></FormSwitch>
+	<FormSwitch v-model="profile.isBot" class="_formBlock">{{ i18n.locale.flagAsBot }}<template #caption>{{ i18n.locale.flagAsBotDescription }}</template></FormSwitch>
 
-	<FormSwitch v-model="alwaysMarkNsfw" class="_formBlock">{{ $ts.alwaysMarkSensitive }}</FormSwitch>
+	<FormSwitch v-model="profile.alwaysMarkNsfw" class="_formBlock">{{ i18n.locale.alwaysMarkSensitive }}</FormSwitch>
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { defineComponent, reactive, watch } from 'vue';
 import MkButton from '@/components/ui/button.vue';
 import FormInput from '@/components/form/input.vue';
 import FormTextarea from '@/components/form/textarea.vue';
@@ -57,194 +57,149 @@ import { host, langs } from '@/config';
 import { selectFile } from '@/scripts/select-file';
 import * as os from '@/os';
 import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
+import { $i } from '@/account';
+
+const profile = reactive({
+	name: $i.name,
+	description: $i.description,
+	location: $i.location,
+	birthday: $i.birthday,
+	lang: $i.lang,
+	isBot: $i.isBot,
+	isCat: $i.isCat,
+	alwaysMarkNsfw: $i.alwaysMarkNsfw,
+});
 
-export default defineComponent({
-	components: {
-		MkButton,
-		FormInput,
-		FormTextarea,
-		FormSwitch,
-		FormSelect,
-		FormSlot,
-	},
-	
-	emits: ['info'],
+const additionalFields = reactive({
+	fieldName0: $i.fields[0] ? $i.fields[0].name : null,
+	fieldValue0: $i.fields[0] ? $i.fields[0].value : null,
+	fieldName1: $i.fields[1] ? $i.fields[1].name : null,
+	fieldValue1: $i.fields[1] ? $i.fields[1].value : null,
+	fieldName2: $i.fields[2] ? $i.fields[2].name : null,
+	fieldValue2: $i.fields[2] ? $i.fields[2].value : null,
+	fieldName3: $i.fields[3] ? $i.fields[3].name : null,
+	fieldValue3: $i.fields[3] ? $i.fields[3].value : null,
+});
 
-	data() {
-		return {
-			[symbols.PAGE_INFO]: {
-				title: this.$ts.profile,
-				icon: 'fas fa-user',
-				bg: 'var(--bg)',
-			},
-			host,
-			langs,
-			name: null,
-			description: null,
-			birthday: null,
-			lang: null,
-			location: null,
-			fieldName0: null,
-			fieldValue0: null,
-			fieldName1: null,
-			fieldValue1: null,
-			fieldName2: null,
-			fieldValue2: null,
-			fieldName3: null,
-			fieldValue3: null,
-			avatarId: null,
-			bannerId: null,
-			isBot: false,
-			isCat: false,
-			alwaysMarkNsfw: false,
-			saving: false,
-		}
-	},
+watch(() => profile, () => {
+	save();
+}, {
+	deep: true,
+});
 
-	created() {
-		this.name = this.$i.name;
-		this.description = this.$i.description;
-		this.location = this.$i.location;
-		this.birthday = this.$i.birthday;
-		this.lang = this.$i.lang;
-		this.avatarId = this.$i.avatarId;
-		this.bannerId = this.$i.bannerId;
-		this.isBot = this.$i.isBot;
-		this.isCat = this.$i.isCat;
-		this.alwaysMarkNsfw = this.$i.alwaysMarkNsfw;
+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,
+		alwaysMarkNsfw: !!profile.alwaysMarkNsfw,
+	});
+}
 
-		this.fieldName0 = this.$i.fields[0] ? this.$i.fields[0].name : null;
-		this.fieldValue0 = this.$i.fields[0] ? this.$i.fields[0].value : null;
-		this.fieldName1 = this.$i.fields[1] ? this.$i.fields[1].name : null;
-		this.fieldValue1 = this.$i.fields[1] ? this.$i.fields[1].value : null;
-		this.fieldName2 = this.$i.fields[2] ? this.$i.fields[2].name : null;
-		this.fieldValue2 = this.$i.fields[2] ? this.$i.fields[2].value : null;
-		this.fieldName3 = this.$i.fields[3] ? this.$i.fields[3].name : null;
-		this.fieldValue3 = this.$i.fields[3] ? this.$i.fields[3].value : null;
+function changeAvatar(ev) {
+	selectFile(ev.currentTarget || ev.target, i18n.locale.avatar).then(async (file) => {
+		const i = await os.apiWithDialog('i/update', {
+			avatarId: file.id,
+		});
+		$i.avatarId = i.avatarId;
+		$i.avatarUrl = i.avatarUrl;
+	});
+}
 
-		this.$watch('name', this.save);
-		this.$watch('description', this.save);
-		this.$watch('location', this.save);
-		this.$watch('birthday', this.save);
-		this.$watch('lang', this.save);
-		this.$watch('isBot', this.save);
-		this.$watch('isCat', this.save);
-		this.$watch('alwaysMarkNsfw', this.save);
-	},
+function changeBanner(ev) {
+	selectFile(ev.currentTarget || ev.target, i18n.locale.banner).then(async (file) => {
+		const i = await os.apiWithDialog('i/update', {
+			bannerId: file.id,
+		});
+		$i.bannerId = i.bannerId;
+		$i.bannerUrl = i.bannerUrl;
+	});
+}
 
-	methods: {
-		changeAvatar(e) {
-			selectFile(e.currentTarget || e.target, this.$ts.avatar).then(file => {
-				os.api('i/update', {
-					avatarId: file.id,
-				});
-			});
+async function editMetadata() {
+	const { canceled, result } = await os.form(i18n.locale._profile.metadata, {
+		fieldName0: {
+			type: 'string',
+			label: i18n.locale._profile.metadataLabel + ' 1',
+			default: additionalFields.fieldName0,
 		},
-
-		changeBanner(e) {
-			selectFile(e.currentTarget || e.target, this.$ts.banner).then(file => {
-				os.api('i/update', {
-					bannerId: file.id,
-				});
-			});
+		fieldValue0: {
+			type: 'string',
+			label: i18n.locale._profile.metadataContent + ' 1',
+			default: additionalFields.fieldValue0,
 		},
-
-		async editMetadata() {
-			const { canceled, result } = await os.form(this.$ts._profile.metadata, {
-				fieldName0: {
-					type: 'string',
-					label: this.$ts._profile.metadataLabel + ' 1',
-					default: this.fieldName0,
-				},
-				fieldValue0: {
-					type: 'string',
-					label: this.$ts._profile.metadataContent + ' 1',
-					default: this.fieldValue0,
-				},
-				fieldName1: {
-					type: 'string',
-					label: this.$ts._profile.metadataLabel + ' 2',
-					default: this.fieldName1,
-				},
-				fieldValue1: {
-					type: 'string',
-					label: this.$ts._profile.metadataContent + ' 2',
-					default: this.fieldValue1,
-				},
-				fieldName2: {
-					type: 'string',
-					label: this.$ts._profile.metadataLabel + ' 3',
-					default: this.fieldName2,
-				},
-				fieldValue2: {
-					type: 'string',
-					label: this.$ts._profile.metadataContent + ' 3',
-					default: this.fieldValue2,
-				},
-				fieldName3: {
-					type: 'string',
-					label: this.$ts._profile.metadataLabel + ' 4',
-					default: this.fieldName3,
-				},
-				fieldValue3: {
-					type: 'string',
-					label: this.$ts._profile.metadataContent + ' 4',
-					default: this.fieldValue3,
-				},
-			});
-			if (canceled) return;
-
-			this.fieldName0 = result.fieldName0;
-			this.fieldValue0 = result.fieldValue0;
-			this.fieldName1 = result.fieldName1;
-			this.fieldValue1 = result.fieldValue1;
-			this.fieldName2 = result.fieldName2;
-			this.fieldValue2 = result.fieldValue2;
-			this.fieldName3 = result.fieldName3;
-			this.fieldValue3 = result.fieldValue3;
-
-			const fields = [
-				{ name: this.fieldName0, value: this.fieldValue0 },
-				{ name: this.fieldName1, value: this.fieldValue1 },
-				{ name: this.fieldName2, value: this.fieldValue2 },
-				{ name: this.fieldName3, value: this.fieldValue3 },
-			];
-
-			os.api('i/update', {
-				fields,
-			}).then(i => {
-				os.success();
-			}).catch(err => {
-				os.alert({
-					type: 'error',
-					text: err.id
-				});
-			});
+		fieldName1: {
+			type: 'string',
+			label: i18n.locale._profile.metadataLabel + ' 2',
+			default: additionalFields.fieldName1,
 		},
-
-		save() {
-			this.saving = true;
-
-			os.apiWithDialog('i/update', {
-				name: this.name || null,
-				description: this.description || null,
-				location: this.location || null,
-				birthday: this.birthday || null,
-				lang: this.lang || null,
-				isBot: !!this.isBot,
-				isCat: !!this.isCat,
-				alwaysMarkNsfw: !!this.alwaysMarkNsfw,
-			}).then(i => {
-				this.saving = false;
-				this.$i.avatarId = i.avatarId;
-				this.$i.avatarUrl = i.avatarUrl;
-				this.$i.bannerId = i.bannerId;
-				this.$i.bannerUrl = i.bannerUrl;
-			}).catch(err => {
-				this.saving = false;
-			});
+		fieldValue1: {
+			type: 'string',
+			label: i18n.locale._profile.metadataContent + ' 2',
+			default: additionalFields.fieldValue1,
 		},
-	}
+		fieldName2: {
+			type: 'string',
+			label: i18n.locale._profile.metadataLabel + ' 3',
+			default: additionalFields.fieldName2,
+		},
+		fieldValue2: {
+			type: 'string',
+			label: i18n.locale._profile.metadataContent + ' 3',
+			default: additionalFields.fieldValue2,
+		},
+		fieldName3: {
+			type: 'string',
+			label: i18n.locale._profile.metadataLabel + ' 4',
+			default: additionalFields.fieldName3,
+		},
+		fieldValue3: {
+			type: 'string',
+			label: i18n.locale._profile.metadataContent + ' 4',
+			default: additionalFields.fieldValue3,
+		},
+	});
+	if (canceled) return;
+
+	additionalFields.fieldName0 = result.fieldName0;
+	additionalFields.fieldValue0 = result.fieldValue0;
+	additionalFields.fieldName1 = result.fieldName1;
+	additionalFields.fieldValue1 = result.fieldValue1;
+	additionalFields.fieldName2 = result.fieldName2;
+	additionalFields.fieldValue2 = result.fieldValue2;
+	additionalFields.fieldName3 = result.fieldName3;
+	additionalFields.fieldValue3 = result.fieldValue3;
+
+	const fields = [
+		{ name: additionalFields.fieldName0, value: additionalFields.fieldValue0 },
+		{ name: additionalFields.fieldName1, value: additionalFields.fieldValue1 },
+		{ name: additionalFields.fieldName2, value: additionalFields.fieldValue2 },
+		{ name: additionalFields.fieldName3, value: additionalFields.fieldValue3 },
+	];
+
+	os.api('i/update', {
+		fields,
+	}).then(i => {
+		os.success();
+	}).catch(err => {
+		os.alert({
+			type: 'error',
+			text: err.id
+		});
+	});
+}
+
+defineExpose({
+	[symbols.PAGE_INFO]: {
+		title: i18n.locale.profile,
+		icon: 'fas fa-user',
+		bg: 'var(--bg)',
+	},
 });
 </script>
 
diff --git a/packages/client/src/scripts/use-leave-guard.ts b/packages/client/src/scripts/use-leave-guard.ts
index 21899af59a..3984256251 100644
--- a/packages/client/src/scripts/use-leave-guard.ts
+++ b/packages/client/src/scripts/use-leave-guard.ts
@@ -1,4 +1,5 @@
 import { inject, onUnmounted, Ref } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
 import { i18n } from '@/i18n';
 import * as os from '@/os';
 
@@ -16,6 +17,17 @@ export function useLeaveGuard(enabled: Ref<boolean>) {
 
 			return canceled;
 		});
+	} else {
+		onBeforeRouteLeave(async (to, from) => {
+			if (!enabled.value) return true;
+
+			const { canceled } = await os.confirm({
+				type: 'warning',
+				text: i18n.locale.leaveConfirm,
+			});
+
+			return !canceled;
+		});
 	}
 
 	/*
-- 
cgit v1.2.3-freya