enhance(client): tweak ui

packages/client/src/pages/admin/files-settings.vue

@@ -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>

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'));

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>

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();
 			});

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,

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,