🎨

locales/ja-JP.yml

@@ -1026,10 +1026,11 @@ _serverRules:
 _accountMigration:
   moveTo: "このアカウントを新しいアカウントに引っ越す"
   moveToLabel: "引っ越し先のアカウント："
-  moveAccountDescription: "この操作は取り消せません。まずは引っ越し先のアカウントでこのアカウントに対しエイリアスを作成したことを確認してください。エイリアス作成後、引っ越し先のアカウントをこのように入力してください：@person@instance.com"
+  moveAccountDescription: "この操作は取り消せません。まずは引っ越し先のアカウントでこのアカウントに対しエイリアスを作成したことを確認してください。\nエイリアス作成後、引っ越し先のアカウントをこのように入力してください：@person@instance.com"
-  moveFrom: "別のアカウントからこのアカウントに引っ越す"
+  moveFrom: "別のアカウントからこのアカウントへ引っ越す"
-  moveFromLabel: "引っ越し元のアカウント："
+  moveFromSub: "別のアカウントへエイリアスを作成"
-  moveFromDescription: "別のアカウントからこのアカウントにフォロワーを引き継いで引っ越したい場合、ここでエイリアスを作成しておく必要があります。必ず引っ越しを実行する前に作成してください！引っ越し元のアカウントをこのように入力してください：@person@instance.com"
+  moveFromLabel: "引っ越し元のアカウント #{n}"
+  moveFromDescription: "別のアカウントからこのアカウントにフォロワーを引き継いで引っ越したい場合、ここでエイリアスを作成しておく必要があります。必ず引っ越しを実行する前に作成してください！\n引っ越し元のアカウントをこのように入力してください：@person@instance.com\n削除するには、入力欄を空にして保存します（非推奨）。"
   migrationConfirm: "本当にこのアカウントを {account} に引っ越しますか？一度引っ越しを行うと取り消せず、二度とこのアカウントを元の状態で使用できなくなります。\nまた、引っ越し先のアカウントでエイリアスを作成したことを確認してください。"
 
 _achievements:

packages/frontend/src/components/MkInfo.vue

@@ -21,6 +21,7 @@ const props = defineProps<{
 	background: var(--infoBg);
 	color: var(--infoFg);
 	border-radius: var(--radius);
+	white-space: pre-wrap;
 
 	&.warn {
 		background: var(--infoWarnBg);

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

@@ -1,8 +1,33 @@
 <template>
 <div class="_gaps_m">
-	<FormSection first>
+	<MkFolder :default-open="true">
-		<template #label>{{ i18n.ts._accountMigration.moveTo }}</template>
+		<template #icon><i class="ti ti-plane-arrival"></i></template>
+		<template #label>{{ i18n.ts._accountMigration.moveFrom }}</template>
+		<template #caption>{{ i18n.ts._accountMigration.moveFromSub }}</template>
+
 		<div class="_gaps_m">
+			<FormInfo warn>
+				{{ i18n.ts._accountMigration.moveFromDescription }}
+			</FormInfo>
+			<div>
+				<MkButton :disabled="accountAliases.length >= 5" inline style="margin-right: 8px;" @click="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+				<MkButton inline primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
+			</div>
+			<div class="_gaps">
+				<MkInput v-for="(_, i) in accountAliases" v-model="accountAliases[i]">
+					<template #prefix><i class="ti ti-plane-arrival"></i></template>
+					<template #label>{{ i18n.t('_accountMigration.moveFromLabel', { n: i + 1 }) }}</template>
+				</MkInput>
+			</div>
+		</div>
+	</MkFolder>
+
+	<MkFolder :default-open="false">
+		<template #icon><i class="ti ti-plane-departure"></i></template>
+		<template #label>{{ i18n.ts._accountMigration.moveTo }}</template>
+
+		<div class="_gaps_m">
+			<FormInfo warn>{{ i18n.ts._accountMigration.moveAccountDescription }}</FormInfo>
 			<div>
 				<MkInput v-model="moveToAccount">
 					<template #prefix><i class="ti ti-plane-departure"></i></template>
@@ -13,34 +38,16 @@
 				<MkButton inline primary :disabled="!moveToAccount" @click="move"><i class="ti ti-check"></i> {{ i18n.ts.ok }}</MkButton>
 			</div>
 		</div>
-	</FormSection>
+	</MkFolder>
-	<FormInfo warn>{{ i18n.ts._accountMigration.moveAccountDescription }}</FormInfo>
-
-	<FormSection>
-		<template #label>{{ i18n.ts._accountMigration.moveFrom }}</template>
-		<div class="_gaps_m">
-			<div v-for="(_, i) in accountAliases">
-				<MkInput v-model="accountAliases[i]">
-					<template #prefix><i class="ti ti-plane-arrival"></i></template>
-					<template #label>{{ i18n.ts._accountMigration.moveToLabel }}</template>
-				</MkInput>
-			</div>
-			<div>
-				<MkButton :disabled="accountAliases.length >= 5" inline style="margin-right: 8px;" @click="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
-				<MkButton inline primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
-			</div>
-		</div>
-	</FormSection>
-	<FormInfo warn>{{ i18n.ts._accountMigration.moveFromDescription }}</FormInfo>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import FormSection from '@/components/form/section.vue';
 import FormInfo from '@/components/MkInfo.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkFolder from '@/components/MkFolder.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
@@ -69,6 +76,7 @@ async function save(): Promise<void> {
 	os.apiWithDialog('i/update', {
 		alsoKnownAs,
 	});
+	accountAliases.value = alsoKnownAs.length === 0 ? [''] : alsoKnownAs;
 }
 
 definePageMetadata({

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

@@ -38,6 +38,10 @@
 			<template #label>{{ i18n.ts._profile.metadataEdit }}</template>
 
 			<div class="_gaps_m">
+				<div>
+					<MkButton :disabled="fields.length >= 16" inline style="margin-right: 8px;" @click="addField"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
+					<MkButton inline primary @click="saveFields"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
+				</div>
 				<FormSplit v-for="(record, i) in fields" :min-width="250">
 					<MkInput v-model="record.name" small>
 						<template #label>{{ i18n.ts._profile.metadataLabel }} #{{ i + 1 }}</template>
@@ -46,10 +50,6 @@
 						<template #label>{{ i18n.ts._profile.metadataContent }} #{{ i + 1 }}</template>
 					</MkInput>
 				</FormSplit>
-				<div>
-					<MkButton :disabled="fields.length >= 16" inline style="margin-right: 8px;" @click="addField"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
-					<MkButton inline primary @click="saveFields"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
-				</div>
 			</div>
 		</MkFolder>
 		<template #caption>{{ i18n.ts._profile.metadataDescription }}</template>