From 6ba97a77635c4b72405259c677b863a4fe48d48b Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 22 Sep 2024 18:35:10 +0900
Subject: [PATCH] enhance(frontend): tweak control panel

---
 packages/frontend/src/pages/admin/index.vue   |  5 --
 .../src/pages/admin/proxy-account.vue         | 71 -------------------
 .../frontend/src/pages/admin/settings.vue     | 40 +++++++++++
 packages/frontend/src/router/definition.ts    |  4 --
 4 files changed, 40 insertions(+), 80 deletions(-)
 delete mode 100644 packages/frontend/src/pages/admin/proxy-account.vue

diff --git a/packages/frontend/src/pages/admin/index.vue b/packages/frontend/src/pages/admin/index.vue
index b9f72e6fb6..db87bd996d 100644
--- a/packages/frontend/src/pages/admin/index.vue
+++ b/packages/frontend/src/pages/admin/index.vue
@@ -199,11 +199,6 @@ const menuDef = computed(() => [{
 		text: i18n.ts.relays,
 		to: '/admin/relays',
 		active: currentPage.value?.route.name === 'relays',
-	}, {
-		icon: 'ti ti-ghost',
-		text: i18n.ts.proxyAccount,
-		to: '/admin/proxy-account',
-		active: currentPage.value?.route.name === 'proxy-account',
 	}, {
 		icon: 'ti ti-link',
 		text: i18n.ts.externalServices,
diff --git a/packages/frontend/src/pages/admin/proxy-account.vue b/packages/frontend/src/pages/admin/proxy-account.vue
deleted file mode 100644
index 81db9f1da9..0000000000
--- a/packages/frontend/src/pages/admin/proxy-account.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<MkStickyContainer>
-	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
-	<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
-		<FormSuspense :p="init">
-			<MkInfo>{{ i18n.ts.proxyAccountDescription }}</MkInfo>
-			<MkKeyValue>
-				<template #key>{{ i18n.ts.proxyAccount }}</template>
-				<template #value>{{ proxyAccount ? `@${proxyAccount.username}` : i18n.ts.none }}</template>
-			</MkKeyValue>
-
-			<MkButton primary @click="chooseProxyAccount">{{ i18n.ts.selectAccount }}</MkButton>
-		</FormSuspense>
-	</MkSpacer>
-</MkStickyContainer>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed } from 'vue';
-import * as Misskey from 'misskey-js';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import MkButton from '@/components/MkButton.vue';
-import MkInfo from '@/components/MkInfo.vue';
-import FormSuspense from '@/components/form/suspense.vue';
-import * as os from '@/os.js';
-import { misskeyApi } from '@/scripts/misskey-api.js';
-import { fetchInstance } from '@/instance.js';
-import { i18n } from '@/i18n.js';
-import { definePageMetadata } from '@/scripts/page-metadata.js';
-
-const proxyAccount = ref<Misskey.entities.UserDetailed | null>(null);
-const proxyAccountId = ref<string | null>(null);
-
-async function init() {
-	const meta = await misskeyApi('admin/meta');
-	proxyAccountId.value = meta.proxyAccountId;
-	if (proxyAccountId.value) {
-		proxyAccount.value = await misskeyApi('users/show', { userId: proxyAccountId.value });
-	}
-}
-
-function chooseProxyAccount() {
-	os.selectUser({ localOnly: true }).then(user => {
-		proxyAccount.value = user;
-		proxyAccountId.value = user.id;
-		save();
-	});
-}
-
-function save() {
-	os.apiWithDialog('admin/update-meta', {
-		proxyAccountId: proxyAccountId.value,
-	}).then(() => {
-		fetchInstance(true);
-	});
-}
-
-const headerActions = computed(() => []);
-
-const headerTabs = computed(() => []);
-
-definePageMetadata(() => ({
-	title: i18n.ts.proxyAccount,
-	icon: 'ti ti-ghost',
-}));
-</script>
diff --git a/packages/frontend/src/pages/admin/settings.vue b/packages/frontend/src/pages/admin/settings.vue
index 1e9682775a..6259088113 100644
--- a/packages/frontend/src/pages/admin/settings.vue
+++ b/packages/frontend/src/pages/admin/settings.vue
@@ -208,6 +208,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</div>
 						</div>
 					</MkFolder>
+
+					<MkFolder>
+						<template #icon><i class="ti ti-ghost"></i></template>
+						<template #label>{{ i18n.ts.proxyAccount }}</template>
+
+						<div class="_gaps">
+							<MkInfo>{{ i18n.ts.proxyAccountDescription }}</MkInfo>
+							<MkKeyValue>
+								<template #key>{{ i18n.ts.proxyAccount }}</template>
+								<template #value>{{ proxyAccount ? `@${proxyAccount.username}` : i18n.ts.none }}</template>
+							</MkKeyValue>
+
+							<MkButton primary @click="chooseProxyAccount">{{ i18n.ts.selectAccount }}</MkButton>
+						</div>
+					</MkFolder>
 				</div>
 			</FormSuspense>
 		</MkSpacer>
@@ -232,6 +247,10 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkButton from '@/components/MkButton.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSelect from '@/components/MkSelect.vue';
+import * as Misskey from 'misskey-js';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+
+const proxyAccount = ref<Misskey.entities.UserDetailed | null>(null);
 
 const name = ref<string | null>(null);
 const shortName = ref<string | null>(null);
@@ -256,6 +275,7 @@ const urlPreviewMaximumContentLength = ref<number>(1024 * 1024 * 10);
 const urlPreviewRequireContentLength = ref<boolean>(true);
 const urlPreviewUserAgent = ref<string | null>(null);
 const urlPreviewSummaryProxyUrl = ref<string | null>(null);
+const proxyAccountId = ref<string | null>(null);
 
 async function init(): Promise<void> {
 	const meta = await misskeyApi('admin/meta');
@@ -282,6 +302,10 @@ async function init(): Promise<void> {
 	urlPreviewRequireContentLength.value = meta.urlPreviewRequireContentLength;
 	urlPreviewUserAgent.value = meta.urlPreviewUserAgent;
 	urlPreviewSummaryProxyUrl.value = meta.urlPreviewSummaryProxyUrl;
+	proxyAccountId.value = meta.proxyAccountId;
+	if (proxyAccountId.value) {
+		proxyAccount.value = await misskeyApi('users/show', { userId: proxyAccountId.value });
+	}
 }
 
 function saveInfo() {
@@ -349,6 +373,22 @@ function saveUrlPreview() {
 	});
 }
 
+function chooseProxyAccount() {
+	os.selectUser({ localOnly: true }).then(user => {
+		proxyAccount.value = user;
+		proxyAccountId.value = user.id;
+		saveProxyAccount();
+	});
+}
+
+function saveProxyAccount() {
+	os.apiWithDialog('admin/update-meta', {
+		proxyAccountId: proxyAccountId.value,
+	}).then(() => {
+		fetchInstance(true);
+	});
+}
+
 const headerTabs = computed(() => []);
 
 definePageMetadata(() => ({
diff --git a/packages/frontend/src/router/definition.ts b/packages/frontend/src/router/definition.ts
index fa19e6cd9e..75f994b865 100644
--- a/packages/frontend/src/router/definition.ts
+++ b/packages/frontend/src/router/definition.ts
@@ -462,10 +462,6 @@ const routes: RouteDef[] = [{
 		path: '/relays',
 		name: 'relays',
 		component: page(() => import('@/pages/admin/relays.vue')),
-	}, {
-		path: '/proxy-account',
-		name: 'proxy-account',
-		component: page(() => import('@/pages/admin/proxy-account.vue')),
 	}, {
 		path: '/external-services',
 		name: 'external-services',