インスタンス管理画面作り直し (#7473)

* wip

* wip

* wip

* wip

11 files changed, 75 insertions, 240 deletions

diff --git a/src/client/components/captcha.vue b/src/client/components/captcha.vue
index 710fcd6169..26215df09d 100644
--- a/src/client/components/captcha.vue
+++ b/src/client/components/captcha.vue
@@ -18,7 +18,7 @@ type Captcha = {
 	getResponse(id: string): string;
 };
 
-type CaptchaProvider = 'hcaptcha' | 'grecaptcha';
+type CaptchaProvider = 'hcaptcha' | 'recaptcha';
 
 type CaptchaContainer = {
 	readonly [_ in CaptchaProvider]?: Captcha;
@@ -57,7 +57,7 @@ export default defineComponent({
 		src() {
 			const endpoint = ({
 				hcaptcha: 'https://hcaptcha.com/1',
-				grecaptcha: 'https://www.recaptcha.net/recaptcha',
+				recaptcha: 'https://www.recaptcha.net/recaptcha',
 			} as Record<PropertyKey, unknown>)[this.provider];
 
 			return `${typeof endpoint == 'string' ? endpoint : 'about:invalid'}/api.js?render=explicit`;
diff --git a/src/client/components/form/base.vue b/src/client/components/form/base.vue
index 34deb39465..132942d527 100644
--- a/src/client/components/form/base.vue
+++ b/src/client/components/form/base.vue
@@ -24,6 +24,8 @@ export default defineComponent({
 	--formXPadding: 32px;
 	--formYPadding: 32px;
 
+	--formContentHMargin: 16px;
+
 	font-size: 95%;
 	line-height: 1.3em;
 	background: var(--bg);
diff --git a/src/client/components/form/form.scss b/src/client/components/form/form.scss
index 8c01fad727..05994ae650 100644
--- a/src/client/components/form/form.scss
+++ b/src/client/components/form/form.scss
@@ -30,7 +30,7 @@
 	top: var(--stickyTop, 0px);
 	z-index: 2;
 	margin: -8px calc(var(--formXPadding) * -1) 0 calc(var(--formXPadding) * -1);
-	padding: 8px calc(16px + var(--formXPadding)) 8px calc(16px + var(--formXPadding));
+	padding: 8px calc(var(--formContentHMargin) + var(--formXPadding)) 8px calc(var(--formContentHMargin) + var(--formXPadding));
 	background: var(--X17);
 	-webkit-backdrop-filter: blur(10px);
 	backdrop-filter: blur(10px);
@@ -42,7 +42,7 @@
 }
 
 ._formCaption {
-	padding: 8px 16px 0 16px;
+	padding: 8px var(--formContentHMargin) 0 var(--formContentHMargin);
 }
 
 ._formItem {
diff --git a/src/client/components/form/key-value-view.vue b/src/client/components/form/key-value-view.vue
index 85f4febef9..ca4c09867f 100644
--- a/src/client/components/form/key-value-view.vue
+++ b/src/client/components/form/key-value-view.vue
@@ -20,7 +20,7 @@ export default defineComponent({
 .anocepby {
 	display: flex;
 	align-items: center;
-	padding: 14px 16px;
+	padding: 14px var(--formContentHMargin);
 
 	> .key {
 		margin-right: 12px;
diff --git a/src/client/components/form/object-view.vue b/src/client/components/form/object-view.vue
index cbd4186e56..59fb62b5e6 100644
--- a/src/client/components/form/object-view.vue
+++ b/src/client/components/form/object-view.vue
@@ -75,7 +75,7 @@ export default defineComponent({
 			max-width: 100%;
 			min-height: 130px;
 			margin: 0;
-			padding: 16px;
+			padding: 16px var(--formContentHMargin);
 			box-sizing: border-box;
 			font: inherit;
 			font-weight: normal;
diff --git a/src/client/components/form/radios.vue b/src/client/components/form/radios.vue
index 3daa7e5bbd..4cfb7c247e 100644
--- a/src/client/components/form/radios.vue
+++ b/src/client/components/form/radios.vue
@@ -18,6 +18,9 @@ export default defineComponent({
 		}
 	},
 	watch: {
+		modelValue() {
+			this.value = this.modelValue;
+		},
 		value() {
 			this.$emit('update:modelValue', this.value);
 		}
diff --git a/src/client/components/form/suspense.vue b/src/client/components/form/suspense.vue
index 6a8282733f..2a48faccb3 100644
--- a/src/client/components/form/suspense.vue
+++ b/src/client/components/form/suspense.vue
@@ -5,9 +5,9 @@
 			<MkLoading/>
 		</div>
 	</div>
-	<FormGroup v-else-if="resolved" class="_formItem">
+	<div v-else-if="resolved" class="_formItem">
 		<slot :result="result"></slot>
-	</FormGroup>
+	</div>
 	<div class="_formItem" v-else>
 		<div class="_formPanel">
 			error!
@@ -20,13 +20,8 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, watch } from 'vue';
 import './form.scss';
-import FormGroup from './group.vue';
 
 export default defineComponent({
-	components: {
-		FormGroup,
-	},
-
 	props: {
 		p: {
 			type: Function as PropType<() => Promise<any>>,
diff --git a/src/client/components/instance-stats.vue b/src/client/components/instance-stats.vue
index aa01f1c806..432c9a1bb9 100644
--- a/src/client/components/instance-stats.vue
+++ b/src/client/components/instance-stats.vue
@@ -1,123 +1,35 @@
 <template>
-<div class="zbcjwnqg" v-size="{ max: [550, 1000] }">
-	<div class="stats" v-if="info">
-		<div class="_panel">
-			<div>
-				<b><i class="fas fa-user"></i>{{ $ts.users }}</b>
-				<small>{{ $ts.local }}</small>
-			</div>
-			<div>
-				<dl class="total">
-					<dt>{{ $ts.total }}</dt>
-					<dd>{{ number(info.originalUsersCount) }}</dd>
-				</dl>
-				<dl class="diff" :class="{ inc: usersLocalDoD > 0 }">
-					<dt>{{ $ts.dayOverDayChanges }}</dt>
-					<dd>{{ number(usersLocalDoD) }}</dd>
-				</dl>
-				<dl class="diff" :class="{ inc: usersLocalWoW > 0 }">
-					<dt>{{ $ts.weekOverWeekChanges }}</dt>
-					<dd>{{ number(usersLocalWoW) }}</dd>
-				</dl>
-			</div>
-		</div>
-		<div class="_panel">
-			<div>
-				<b><i class="fas fa-user"></i>{{ $ts.users }}</b>
-				<small>{{ $ts.remote }}</small>
-			</div>
-			<div>
-				<dl class="total">
-					<dt>{{ $ts.total }}</dt>
-					<dd>{{ number((info.usersCount - info.originalUsersCount)) }}</dd>
-				</dl>
-				<dl class="diff" :class="{ inc: usersRemoteDoD > 0 }">
-					<dt>{{ $ts.dayOverDayChanges }}</dt>
-					<dd>{{ number(usersRemoteDoD) }}</dd>
-				</dl>
-				<dl class="diff" :class="{ inc: usersRemoteWoW > 0 }">
-					<dt>{{ $ts.weekOverWeekChanges }}</dt>
-					<dd>{{ number(usersRemoteWoW) }}</dd>
-				</dl>
-			</div>
-		</div>
-		<div class="_panel">
-			<div>
-				<b><i class="fas fa-pencil-alt"></i>{{ $ts.notes }}</b>
-				<small>{{ $ts.local }}</small>
-			</div>
-			<div>
-				<dl class="total">
-					<dt>{{ $ts.total }}</dt>
-					<dd>{{ number(info.originalNotesCount) }}</dd>
-				</dl>
-				<dl class="diff" :class="{ inc: notesLocalDoD > 0 }">
-					<dt>{{ $ts.dayOverDayChanges }}</dt>
-					<dd>{{ number(notesLocalDoD) }}</dd>
-				</dl>
-				<dl class="diff" :class="{ inc: notesLocalWoW > 0 }">
-					<dt>{{ $ts.weekOverWeekChanges }}</dt>
-					<dd>{{ number(notesLocalWoW) }}</dd>
-				</dl>
-			</div>
-		</div>
-		<div class="_panel">
-			<div>
-				<b><i class="fas fa-pencil-alt"></i>{{ $ts.notes }}</b>
-				<small>{{ $ts.remote }}</small>
-			</div>
-			<div>
-				<dl class="total">
-					<dt>{{ $ts.total }}</dt>
-					<dd>{{ number((info.notesCount - info.originalNotesCount)) }}</dd>
-				</dl>
-				<dl class="diff" :class="{ inc: notesRemoteDoD > 0 }">
-					<dt>{{ $ts.dayOverDayChanges }}</dt>
-					<dd>{{ number(notesRemoteDoD) }}</dd>
-				</dl>
-				<dl class="diff" :class="{ inc: notesRemoteWoW > 0 }">
-					<dt>{{ $ts.weekOverWeekChanges }}</dt>
-					<dd>{{ number(notesRemoteWoW) }}</dd>
-				</dl>
-			</div>
-		</div>
+<div class="zbcjwnqg" style="margin-top: -8px;">
+	<div class="selects" style="display: flex;">
+		<MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;">
+			<optgroup :label="$ts.federation">
+				<option value="federation-instances">{{ $ts._charts.federationInstancesIncDec }}</option>
+				<option value="federation-instances-total">{{ $ts._charts.federationInstancesTotal }}</option>
+			</optgroup>
+			<optgroup :label="$ts.users">
+				<option value="users">{{ $ts._charts.usersIncDec }}</option>
+				<option value="users-total">{{ $ts._charts.usersTotal }}</option>
+				<option value="active-users">{{ $ts._charts.activeUsers }}</option>
+			</optgroup>
+			<optgroup :label="$ts.notes">
+				<option value="notes">{{ $ts._charts.notesIncDec }}</option>
+				<option value="local-notes">{{ $ts._charts.localNotesIncDec }}</option>
+				<option value="remote-notes">{{ $ts._charts.remoteNotesIncDec }}</option>
+				<option value="notes-total">{{ $ts._charts.notesTotal }}</option>
+			</optgroup>
+			<optgroup :label="$ts.drive">
+				<option value="drive-files">{{ $ts._charts.filesIncDec }}</option>
+				<option value="drive-files-total">{{ $ts._charts.filesTotal }}</option>
+				<option value="drive">{{ $ts._charts.storageUsageIncDec }}</option>
+				<option value="drive-total">{{ $ts._charts.storageUsageTotal }}</option>
+			</optgroup>
+		</MkSelect>
+		<MkSelect v-model:value="chartSpan" style="margin: 0;">
+			<option value="hour">{{ $ts.perHour }}</option>
+			<option value="day">{{ $ts.perDay }}</option>
+		</MkSelect>
 	</div>
-
-	<section class="_card">
-		<div class="_title" style="position: relative;"><i class="fas fa-chart-bar"></i> {{ $ts.statistics }}<button @click="fetchChart" class="_button" style="position: absolute; right: 0; bottom: 0; top: 0; padding: inherit;"><i class="fas fa-sync"></i></button></div>
-		<div class="_content" style="margin-top: -8px;">
-			<div class="selects" style="display: flex;">
-				<MkSelect v-model:value="chartSrc" style="margin: 0; flex: 1;">
-					<optgroup :label="$ts.federation">
-						<option value="federation-instances">{{ $ts._charts.federationInstancesIncDec }}</option>
-						<option value="federation-instances-total">{{ $ts._charts.federationInstancesTotal }}</option>
-					</optgroup>
-					<optgroup :label="$ts.users">
-						<option value="users">{{ $ts._charts.usersIncDec }}</option>
-						<option value="users-total">{{ $ts._charts.usersTotal }}</option>
-						<option value="active-users">{{ $ts._charts.activeUsers }}</option>
-					</optgroup>
-					<optgroup :label="$ts.notes">
-						<option value="notes">{{ $ts._charts.notesIncDec }}</option>
-						<option value="local-notes">{{ $ts._charts.localNotesIncDec }}</option>
-						<option value="remote-notes">{{ $ts._charts.remoteNotesIncDec }}</option>
-						<option value="notes-total">{{ $ts._charts.notesTotal }}</option>
-					</optgroup>
-					<optgroup :label="$ts.drive">
-						<option value="drive-files">{{ $ts._charts.filesIncDec }}</option>
-						<option value="drive-files-total">{{ $ts._charts.filesTotal }}</option>
-						<option value="drive">{{ $ts._charts.storageUsageIncDec }}</option>
-						<option value="drive-total">{{ $ts._charts.storageUsageTotal }}</option>
-					</optgroup>
-				</MkSelect>
-				<MkSelect v-model:value="chartSpan" style="margin: 0;">
-					<option value="hour">{{ $ts.perHour }}</option>
-					<option value="day">{{ $ts.perDay }}</option>
-				</MkSelect>
-			</div>
-			<canvas ref="chart"></canvas>
-		</div>
-	</section>
+	<canvas ref="chart"></canvas>
 </div>
 </template>
 
@@ -158,7 +70,6 @@ export default defineComponent({
 
 	data() {
 		return {
-			info: null,
 			notesLocalWoW: 0,
 			notesLocalDoD: 0,
 			notesRemoteWoW: 0,
@@ -216,8 +127,6 @@ export default defineComponent({
 	},
 
 	async created() {
-		this.info = await os.api('stats');
-
 		this.now = new Date();
 
 		this.fetchChart();
@@ -256,15 +165,6 @@ export default defineComponent({
 				}
 			};
 
-			this.notesLocalWoW = this.info.originalNotesCount - chart.perDay.notes.local.total[7];
-			this.notesLocalDoD = this.info.originalNotesCount - chart.perDay.notes.local.total[1];
-			this.notesRemoteWoW = (this.info.notesCount - this.info.originalNotesCount) - chart.perDay.notes.remote.total[7];
-			this.notesRemoteDoD = (this.info.notesCount - this.info.originalNotesCount) - chart.perDay.notes.remote.total[1];
-			this.usersLocalWoW = this.info.originalUsersCount - chart.perDay.users.local.total[7];
-			this.usersLocalDoD = this.info.originalUsersCount - chart.perDay.users.local.total[1];
-			this.usersRemoteWoW = (this.info.usersCount - this.info.originalUsersCount) - chart.perDay.users.remote.total[7];
-			this.usersRemoteDoD = (this.info.usersCount - this.info.originalUsersCount) - chart.perDay.users.remote.total[1];
-
 			this.chart = chart;
 
 			this.renderChart();
@@ -300,10 +200,10 @@ export default defineComponent({
 					aspectRatio: 2.5,
 					layout: {
 						padding: {
-							left: 0,
-							right: 0,
+							left: 16,
+							right: 16,
 							top: 16,
-							bottom: 0
+							bottom: 8
 						}
 					},
 					legend: {
@@ -630,90 +530,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .zbcjwnqg {
-	&.max-width_1000px {
-		> .stats {
-			grid-template-columns: 1fr 1fr;
-			grid-template-rows: 1fr 1fr;
-		}
-	}
-
-	&.max-width_550px {
-		> .stats {
-			grid-template-columns: 1fr;
-			grid-template-rows: 1fr 1fr 1fr 1fr;
-		}
-	}
-
-	> .stats {
-		display: grid;
-		grid-template-columns: 1fr 1fr 1fr 1fr;
-		grid-template-rows: 1fr;
-		gap: var(--margin);
-		margin-bottom: var(--margin);
-		font-size: 90%;
-
-		> div {
-			display: flex;
-			box-sizing: border-box;
-			padding: 16px 20px;
-
-			> div {
-				width: 50%;
-
-				&:first-child {
-					> b {
-						display: block;
-
-						> i {
-							width: 16px;
-							margin-right: 8px;
-						}
-					}
-
-					> small {
-						margin-left: 16px + 8px;
-						opacity: 0.7;
-					}
-				}
-
-				&:last-child {
-					> dl {
-						display: flex;
-						margin: 0;
-						line-height: 1.5em;
-
-						> dt,
-						> dd {
-							width: 50%;
-							margin: 0;
-						}
-
-						> dd {
-							text-overflow: ellipsis;
-							overflow: hidden;
-							white-space: nowrap;
-						}
-
-						&.total {
-							> dt,
-							> dd {
-								font-weight: bold;
-							}
-						}
-
-						&.diff.inc {
-							> dd {
-								color: #82c11c;
-
-								&:before {
-									content: "+";
-								}
-							}
-						}
-					}
-				}
-			}
-		}
+	> .selects {
+		padding: 8px 16px 0 16px;
 	}
 }
 </style>
diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index 7b40561adf..671642b291 100644
--- a/src/client/components/signup.vue
+++ b/src/client/components/signup.vue
@@ -45,7 +45,7 @@
 			</I18n>
 		</label>
 		<captcha v-if="meta.enableHcaptcha" class="captcha" provider="hcaptcha" ref="hcaptcha" v-model:value="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
-		<captcha v-if="meta.enableRecaptcha" class="captcha" provider="grecaptcha" ref="recaptcha" v-model:value="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
+		<captcha v-if="meta.enableRecaptcha" class="captcha" provider="recaptcha" ref="recaptcha" v-model:value="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
 		<MkButton type="submit" :disabled="shouldDisableSubmitting" primary>{{ $ts.start }}</MkButton>
 	</template>
 </form>
diff --git a/src/client/components/tab.vue b/src/client/components/tab.vue
index aca4d32a22..96cbe50fb1 100644
--- a/src/client/components/tab.vue
+++ b/src/client/components/tab.vue
@@ -29,6 +29,7 @@ export default defineComponent({
 <style lang="scss">
 .pxhvhrfw {
 	display: flex;
+	font-size: 90%;
 
 	> button {
 		flex: 1;
diff --git a/src/client/components/ui/pagination.vue b/src/client/components/ui/pagination.vue
index 13181d39e2..ac8ed01e12 100644
--- a/src/client/components/ui/pagination.vue
+++ b/src/client/components/ui/pagination.vue
@@ -1,16 +1,23 @@
 <template>
-<div class="cxiknjgy">
-	<slot :items="items"></slot>
-	<div class="empty" v-if="empty" key="_empty_">
+<transition name="fade" mode="out-in">
+	<MkLoading v-if="fetching"/>
+
+	<MkError v-else-if="error" @retry="init()"/>
+
+	<div class="empty" v-else-if="empty" key="_empty_">
 		<slot name="empty"></slot>
 	</div>
-	<div class="more" v-show="more" key="_more_">
-		<MkButton class="button" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary>
-			<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
-			<template v-if="moreFetching"><MkLoading inline/></template>
-		</MkButton>
+
+	<div v-else class="cxiknjgy">
+		<slot :items="items"></slot>
+		<div class="more" v-show="more" key="_more_">
+			<MkButton class="button" v-appear="$store.state.enableInfiniteScroll ? fetchMore : null" @click="fetchMore" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary>
+				<template v-if="!moreFetching">{{ $ts.loadMore }}</template>
+				<template v-if="moreFetching"><MkLoading inline/></template>
+			</MkButton>
+		</div>
 	</div>
-</div>
+</transition>
 </template>
 
 <script lang="ts">
@@ -36,6 +43,15 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.125s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
 .cxiknjgy {
 	> .more > .button {
 		margin-left: auto;