From 8c70bbe74da740e1a252a6a2060c46960d6b3ac8 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 5 May 2023 08:47:02 +0900
Subject: :art:

---
 .../frontend/src/pages/settings/account-info.vue   | 158 ---------------------
 .../frontend/src/pages/settings/account-stats.vue  | 146 +++++++++++++++++++
 .../frontend/src/pages/settings/delete-account.vue |  52 -------
 packages/frontend/src/pages/settings/other.vue     |  84 +++++++++--
 packages/frontend/src/router.ts                    |  10 +-
 5 files changed, 220 insertions(+), 230 deletions(-)
 delete mode 100644 packages/frontend/src/pages/settings/account-info.vue
 create mode 100644 packages/frontend/src/pages/settings/account-stats.vue
 delete mode 100644 packages/frontend/src/pages/settings/delete-account.vue

diff --git a/packages/frontend/src/pages/settings/account-info.vue b/packages/frontend/src/pages/settings/account-info.vue
deleted file mode 100644
index 584808b0b4..0000000000
--- a/packages/frontend/src/pages/settings/account-info.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<template>
-<div class="_gaps_m">
-	<MkKeyValue>
-		<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>
-			<template #value>{{ number(stats.notesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.repliesCount }}</template>
-			<template #value>{{ number(stats.repliesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.renotesCount }}</template>
-			<template #value>{{ number(stats.renotesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.repliedCount }}</template>
-			<template #value>{{ number(stats.repliedCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.renotedCount }}</template>
-			<template #value>{{ number(stats.renotedCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.pollVotesCount }}</template>
-			<template #value>{{ number(stats.pollVotesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.pollVotedCount }}</template>
-			<template #value>{{ number(stats.pollVotedCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.sentReactionsCount }}</template>
-			<template #value>{{ number(stats.sentReactionsCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.receivedReactionsCount }}</template>
-			<template #value>{{ number(stats.receivedReactionsCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.noteFavoritesCount }}</template>
-			<template #value>{{ number(stats.noteFavoritesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followingCount }}</template>
-			<template #value>{{ number(stats.followingCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followingCount }} ({{ i18n.ts.local }})</template>
-			<template #value>{{ number(stats.localFollowingCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followingCount }} ({{ i18n.ts.remote }})</template>
-			<template #value>{{ number(stats.remoteFollowingCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followersCount }}</template>
-			<template #value>{{ number(stats.followersCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followersCount }} ({{ i18n.ts.local }})</template>
-			<template #value>{{ number(stats.localFollowersCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.followersCount }} ({{ i18n.ts.remote }})</template>
-			<template #value>{{ number(stats.remoteFollowersCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.pageLikesCount }}</template>
-			<template #value>{{ number(stats.pageLikesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.pageLikedCount }}</template>
-			<template #value>{{ number(stats.pageLikedCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.driveFilesCount }}</template>
-			<template #value>{{ number(stats.driveFilesCount) }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>{{ i18n.ts.driveUsage }}</template>
-			<template #value>{{ bytes(stats.driveUsage) }}</template>
-		</MkKeyValue>
-	</FormSection>
-
-	<FormSection>
-		<template #label>{{ i18n.ts.other }}</template>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>emailVerified</template>
-			<template #value>{{ $i.emailVerified ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>twoFactorEnabled</template>
-			<template #value>{{ $i.twoFactorEnabled ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>securityKeys</template>
-			<template #value>{{ $i.securityKeys ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>usePasswordLessLogin</template>
-			<template #value>{{ $i.usePasswordLessLogin ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>isModerator</template>
-			<template #value>{{ $i.isModerator ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-		<MkKeyValue oneline style="margin: 1em 0;">
-			<template #key>isAdmin</template>
-			<template #value>{{ $i.isAdmin ? i18n.ts.yes : i18n.ts.no }}</template>
-		</MkKeyValue>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import FormSection from '@/components/form/section.vue';
-import MkKeyValue from '@/components/MkKeyValue.vue';
-import * as os from '@/os';
-import number from '@/filters/number';
-import bytes from '@/filters/bytes';
-import { $i } from '@/account';
-import { i18n } from '@/i18n';
-import { definePageMetadata } from '@/scripts/page-metadata';
-
-const stats = ref<any>({});
-
-onMounted(() => {
-	os.api('users/stats', {
-		userId: $i!.id,
-	}).then(response => {
-		stats.value = response;
-	});
-});
-
-const headerActions = $computed(() => []);
-
-const headerTabs = $computed(() => []);
-
-definePageMetadata({
-	title: i18n.ts.accountInfo,
-	icon: 'ti ti-info-circle',
-});
-</script>
diff --git a/packages/frontend/src/pages/settings/account-stats.vue b/packages/frontend/src/pages/settings/account-stats.vue
new file mode 100644
index 0000000000..a0f1541b40
--- /dev/null
+++ b/packages/frontend/src/pages/settings/account-stats.vue
@@ -0,0 +1,146 @@
+<template>
+<div class="_gaps_m">
+	<FormSection v-if="stats" first>
+		<template #label>{{ i18n.ts.statistics }}</template>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.notesCount }}</template>
+			<template #value>{{ number(stats.notesCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.repliesCount }}</template>
+			<template #value>{{ number(stats.repliesCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.renotesCount }}</template>
+			<template #value>{{ number(stats.renotesCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.repliedCount }}</template>
+			<template #value>{{ number(stats.repliedCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.renotedCount }}</template>
+			<template #value>{{ number(stats.renotedCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.pollVotesCount }}</template>
+			<template #value>{{ number(stats.pollVotesCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.pollVotedCount }}</template>
+			<template #value>{{ number(stats.pollVotedCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.sentReactionsCount }}</template>
+			<template #value>{{ number(stats.sentReactionsCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.receivedReactionsCount }}</template>
+			<template #value>{{ number(stats.receivedReactionsCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.noteFavoritesCount }}</template>
+			<template #value>{{ number(stats.noteFavoritesCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.followingCount }}</template>
+			<template #value>{{ number(stats.followingCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.followingCount }} ({{ i18n.ts.local }})</template>
+			<template #value>{{ number(stats.localFollowingCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.followingCount }} ({{ i18n.ts.remote }})</template>
+			<template #value>{{ number(stats.remoteFollowingCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.followersCount }}</template>
+			<template #value>{{ number(stats.followersCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.followersCount }} ({{ i18n.ts.local }})</template>
+			<template #value>{{ number(stats.localFollowersCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.followersCount }} ({{ i18n.ts.remote }})</template>
+			<template #value>{{ number(stats.remoteFollowersCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.pageLikesCount }}</template>
+			<template #value>{{ number(stats.pageLikesCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.pageLikedCount }}</template>
+			<template #value>{{ number(stats.pageLikedCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.driveFilesCount }}</template>
+			<template #value>{{ number(stats.driveFilesCount) }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts.driveUsage }}</template>
+			<template #value>{{ bytes(stats.driveUsage) }}</template>
+		</MkKeyValue>
+	</FormSection>
+
+	<FormSection>
+		<template #label>{{ i18n.ts.other }}</template>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>emailVerified</template>
+			<template #value>{{ $i.emailVerified ? i18n.ts.yes : i18n.ts.no }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>twoFactorEnabled</template>
+			<template #value>{{ $i.twoFactorEnabled ? i18n.ts.yes : i18n.ts.no }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>securityKeys</template>
+			<template #value>{{ $i.securityKeys ? i18n.ts.yes : i18n.ts.no }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>usePasswordLessLogin</template>
+			<template #value>{{ $i.usePasswordLessLogin ? i18n.ts.yes : i18n.ts.no }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>isModerator</template>
+			<template #value>{{ $i.isModerator ? i18n.ts.yes : i18n.ts.no }}</template>
+		</MkKeyValue>
+		<MkKeyValue oneline style="margin: 1em 0;">
+			<template #key>isAdmin</template>
+			<template #value>{{ $i.isAdmin ? i18n.ts.yes : i18n.ts.no }}</template>
+		</MkKeyValue>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import FormSection from '@/components/form/section.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
+import * as os from '@/os';
+import number from '@/filters/number';
+import bytes from '@/filters/bytes';
+import { $i } from '@/account';
+import { i18n } from '@/i18n';
+import { definePageMetadata } from '@/scripts/page-metadata';
+
+const stats = ref<any>({});
+
+onMounted(() => {
+	os.api('users/stats', {
+		userId: $i!.id,
+	}).then(response => {
+		stats.value = response;
+	});
+});
+
+const headerActions = $computed(() => []);
+
+const headerTabs = $computed(() => []);
+
+definePageMetadata({
+	title: i18n.ts.accountInfo,
+	icon: 'ti ti-info-circle',
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/delete-account.vue b/packages/frontend/src/pages/settings/delete-account.vue
deleted file mode 100644
index c6e79165c5..0000000000
--- a/packages/frontend/src/pages/settings/delete-account.vue
+++ /dev/null
@@ -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>
diff --git a/packages/frontend/src/pages/settings/other.vue b/packages/frontend/src/pages/settings/other.vue
index 05394b9187..dd80dd737b 100644
--- a/packages/frontend/src/pages/settings/other.vue
+++ b/packages/frontend/src/pages/settings/other.vue
@@ -11,21 +11,50 @@
 	-->
 
 	<div class="_gaps_s">
-		<FormLink to="/settings/account-info"><template #icon><i class="ti ti-info-circle"></i></template>{{ i18n.ts.accountInfo }}</FormLink>
+		<MkFolder>
+			<template #icon><i class="ti ti-info-circle"></i></template>
+			<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>
-		<FormLink to="/settings/delete-account"><template #icon><i class="ti ti-alert-triangle"></i></template>{{ i18n.ts.closeAccount }}</FormLink>
-	</div>
 
-	<MkFolder>
-		<template #icon><i class="ti ti-flask"></i></template>
-		<template #label>{{ i18n.ts.experimentalFeatures }}</template>
+		<MkFolder>
+			<template #icon><i class="ti ti-alert-triangle"></i></template>
+			<template #label>{{ i18n.ts.closeAccount }}</template>
 
-		<div class="_gaps_m">
-			<MkSwitch v-model="enableCondensedLineForAcct">
-				<template #label>Enable condensed line for acct</template>
-			</MkSwitch>
-		</div>
-	</MkFolder>
+			<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>
+			<template #label>{{ i18n.ts.experimentalFeatures }}</template>
+
+			<div class="_gaps_m">
+				<MkSwitch v-model="enableCondensedLineForAcct">
+					<template #label>Enable condensed line for acct</template>
+				</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',
diff --git a/packages/frontend/src/router.ts b/packages/frontend/src/router.ts
index fa19682f32..e46c1eeb77 100644
--- a/packages/frontend/src/router.ts
+++ b/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')),
-	}, {
-		path: '/delete-account',
-		name: 'other',
-		component: page(() => import('./pages/settings/delete-account.vue')),
+		component: page(() => import('./pages/settings/account-stats.vue')),
 	}, {
 		path: '/other',
 		name: 'other',
-- 
cgit v1.3.1-freya