🎨

packages/frontend/src/pages/settings/account-stats.vue

@@ -1,18 +1,6 @@
 <template>
 <div class="_gaps_m">
-	<MkKeyValue>
+	<FormSection v-if="stats" first>
-		<template #key>ID</template>
-		<template #value><span class="_monospace">{{ $i.id }}</span></template>
-	</MkKeyValue>
-
-	<FormSection>
-		<MkKeyValue>
-			<template #key>{{ i18n.ts.registeredDate }}</template>
-			<template #value><MkTime :time="$i.createdAt" mode="detail"/></template>
-		</MkKeyValue>
-	</FormSection>
-
-	<FormSection v-if="stats">
 		<template #label>{{ i18n.ts.statistics }}</template>
 		<MkKeyValue oneline style="margin: 1em 0;">
 			<template #key>{{ i18n.ts.notesCount }}</template>

packages/frontend/src/pages/settings/delete-account.vue

@@ -1,52 +0,0 @@
-<template>
-<div class="_gaps_m">
-	<FormInfo warn>{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo>
-	<FormInfo>{{ i18n.ts._accountDelete.sendEmail }}</FormInfo>
-	<MkButton v-if="!$i.isDeleted" danger @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</MkButton>
-	<MkButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</MkButton>
-</div>
-</template>
-
-<script lang="ts" setup>
-import FormInfo from '@/components/MkInfo.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os';
-import { signout, $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-async function deleteAccount() {
-	{
-		const { canceled } = await os.confirm({
-			type: 'warning',
-			text: i18n.ts.deleteAccountConfirm,
-		});
-		if (canceled) return;
-	}
-
-	const { canceled, result: password } = await os.inputText({
-		title: i18n.ts.password,
-		type: 'password',
-	});
-	if (canceled) return;
-
-	await os.apiWithDialog('i/delete-account', {
-		password: password,
-	});
-
-	await os.alert({
-		title: i18n.ts._accountDelete.started,
-	});
-
-	await signout();
-}
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts._accountDelete.accountDelete,
-	icon: 'ti ti-alert-triangle',
-});
-</script>

packages/frontend/src/pages/settings/other.vue

@@ -11,10 +11,38 @@
 	-->
 
 	<div class="_gaps_s">
-		<FormLink to="/settings/account-info"><template #icon><i class="ti ti-info-circle"></i></template>{{ i18n.ts.accountInfo }}</FormLink>
+		<MkFolder>
-		<FormLink to="/registry"><template #icon><i class="ti ti-adjustments"></i></template>{{ i18n.ts.registry }}</FormLink>
+			<template #icon><i class="ti ti-info-circle"></i></template>
-		<FormLink to="/settings/delete-account"><template #icon><i class="ti ti-alert-triangle"></i></template>{{ i18n.ts.closeAccount }}</FormLink>
+			<template #label>{{ i18n.ts.accountInfo }}</template>
+
+			<div class="_gaps_m">
+				<MkKeyValue>
+					<template #key>ID</template>
+					<template #value><span class="_monospace">{{ $i.id }}</span></template>
+				</MkKeyValue>
+
+				<MkKeyValue>
+					<template #key>{{ i18n.ts.registeredDate }}</template>
+					<template #value><MkTime :time="$i.createdAt" mode="detail"/></template>
+				</MkKeyValue>
+
+				<FormLink to="/settings/account-stats"><template #icon><i class="ti ti-info-circle"></i></template>{{ i18n.ts.statistics }}</FormLink>
 			</div>
+		</MkFolder>
+
+		<FormLink to="/registry"><template #icon><i class="ti ti-adjustments"></i></template>{{ i18n.ts.registry }}</FormLink>
+
+		<MkFolder>
+			<template #icon><i class="ti ti-alert-triangle"></i></template>
+			<template #label>{{ i18n.ts.closeAccount }}</template>
+
+			<div class="_gaps_m">
+				<FormInfo warn>{{ i18n.ts._accountDelete.mayTakeTime }}</FormInfo>
+				<FormInfo>{{ i18n.ts._accountDelete.sendEmail }}</FormInfo>
+				<MkButton v-if="!$i.isDeleted" danger @click="deleteAccount">{{ i18n.ts._accountDelete.requestAccountDelete }}</MkButton>
+				<MkButton v-else disabled>{{ i18n.ts._accountDelete.inProgress }}</MkButton>
+			</div>
+		</MkFolder>
 
 		<MkFolder>
 			<template #icon><i class="ti ti-flask"></i></template>
@@ -26,6 +54,7 @@
 				</MkSwitch>
 			</div>
 		</MkFolder>
+	</div>
 </div>
 </template>
 
@@ -34,9 +63,12 @@ import { computed, watch } from 'vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import FormLink from '@/components/form/link.vue';
 import MkFolder from '@/components/MkFolder.vue';
+import FormInfo from '@/components/MkInfo.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os';
 import { defaultStore } from '@/store';
-import { $i } from '@/account';
+import { signout, $i } from '@/account';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { unisonReload } from '@/scripts/unison-reload';
@@ -52,6 +84,32 @@ function onChangeInjectFeaturedNote(v) {
 	});
 }
 
+async function deleteAccount() {
+	{
+		const { canceled } = await os.confirm({
+			type: 'warning',
+			text: i18n.ts.deleteAccountConfirm,
+		});
+		if (canceled) return;
+	}
+
+	const { canceled, result: password } = await os.inputText({
+		title: i18n.ts.password,
+		type: 'password',
+	});
+	if (canceled) return;
+
+	await os.apiWithDialog('i/delete-account', {
+		password: password,
+	});
+
+	await os.alert({
+		title: i18n.ts._accountDelete.started,
+	});
+
+	await signout();
+}
+
 async function reloadAsk() {
 	const { canceled } = await os.confirm({
 		type: 'info',

packages/frontend/src/router.ts

@@ -164,7 +164,7 @@ export const routes = [{
 	}, {
 		path: '/migration',
 		name: 'migration',
-		component: page(() => import('./pages/settings/migration.vue'))
+		component: page(() => import('./pages/settings/migration.vue')),
 	}, {
 		path: '/custom-css',
 		name: 'general',
@@ -174,13 +174,9 @@ export const routes = [{
 		name: 'profile',
 		component: page(() => import('./pages/settings/accounts.vue')),
 	}, {
-		path: '/account-info',
+		path: '/account-stats',
 		name: 'other',
-		component: page(() => import('./pages/settings/account-info.vue')),
+		component: page(() => import('./pages/settings/account-stats.vue')),
-	}, {
-		path: '/delete-account',
-		name: 'other',
-		component: page(() => import('./pages/settings/delete-account.vue')),
 	}, {
 		path: '/other',
 		name: 'other',