🎨

src/client/pages/settings/import-export.vue

 <template>
-<section class="_section">
-	<div class="_title"><Fa :icon="faBoxes"/> {{ $ts.importAndExport }}</div>
-	<div class="_content">
-		<MkSelect v-model:value="exportTarget">
-			<option value="notes">{{ $ts._exportOrImport.allNotes }}</option>
-			<option value="following">{{ $ts._exportOrImport.followingList }}</option>
-			<option value="user-lists">{{ $ts._exportOrImport.userLists }}</option>
-			<option value="mute">{{ $ts._exportOrImport.muteList }}</option>
-			<option value="blocking">{{ $ts._exportOrImport.blockingList }}</option>
-		</MkSelect>
-		<MkButton inline primary @click="doExport"><Fa :icon="faDownload"/> {{ $ts.export }}</MkButton>
-		<MkButton inline primary @click="doImport" :disabled="!['following', 'user-lists'].includes(exportTarget)"><Fa :icon="faUpload"/> {{ $ts.import }}</MkButton>
-	</div>
-</section>
+<FormBase>
+	<FormGroup>
+		<template #label>{{ $ts._exportOrImport.allNotes }}</template>
+		<FormButton @click="doExport('notes')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton>
+	</FormGroup>
+	<FormGroup>
+		<template #label>{{ $ts._exportOrImport.followingList }}</template>
+		<FormButton @click="doExport('following')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton>
+		<FormButton @click="doImport('following', $event)"><Fa :icon="faUpload"/> {{ $ts.import }}</FormButton>
+	</FormGroup>
+	<FormGroup>
+		<template #label>{{ $ts._exportOrImport.userLists }}</template>
+		<FormButton @click="doExport('user-lists')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton>
+		<FormButton @click="doImport('user-lists', $event)"><Fa :icon="faUpload"/> {{ $ts.import }}</FormButton>
+	</FormGroup>
+	<FormGroup>
+		<template #label>{{ $ts._exportOrImport.muteList }}</template>
+		<FormButton @click="doExport('mute')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton>
+	</FormGroup>
+	<FormGroup>
+		<template #label>{{ $ts._exportOrImport.blockingList }}</template>
+		<FormButton @click="doExport('blocking')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton>
+	</FormGroup>
+</FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faDownload, faUpload, faBoxes } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '@/components/ui/button.vue';
-import MkSelect from '@/components/ui/select.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormButton from '@/components/form/button.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
 import * as os from '@/os';
 import { selectFile } from '@/scripts/select-file';
 
 export default defineComponent({
 	components: {
-		MkButton,
-		MkSelect,
+		FormBase,
+		FormGroup,
+		FormButton,
 	},
 
+	emits: ['info'],
+
 	data() {
 		return {
-			exportTarget: 'notes',
+			INFO: {
+				title: this.$ts.importAndExport,
+				icon: faBoxes
+			},
 			faDownload, faUpload, faBoxes
 		}
 	},
 
+	mounted() {
+		this.$emit('info', this.INFO);
+	},
+
 	methods: {
-		doExport() {
+		doExport(target) {
 			os.api(
-				this.exportTarget == 'notes' ? 'i/export-notes' :
-				this.exportTarget == 'following' ? 'i/export-following' :
-				this.exportTarget == 'blocking' ? 'i/export-blocking' :
-				this.exportTarget == 'user-lists' ? 'i/export-user-lists' :
-				this.exportTarget == 'mute' ? 'i/export-mute' :
+				target == 'notes' ? 'i/export-notes' :
+				target == 'following' ? 'i/export-following' :
+				target == 'blocking' ? 'i/export-blocking' :
+				target == 'user-lists' ? 'i/export-user-lists' :
+				target == 'mute' ? 'i/export-mute' :
 				null, {})
 			.then(() => {
 				os.dialog({
@@ -58,12 +80,12 @@ export default defineComponent({
 			});
 		},
 
-		async doImport(e) {
+		async doImport(target, e) {
 			const file = await selectFile(e.currentTarget || e.target);
 			
 			os.api(
-				this.exportTarget == 'following' ? 'i/import-following' :
-				this.exportTarget == 'user-lists' ? 'i/import-user-lists' :
+				target == 'following' ? 'i/import-following' :
+				target == 'user-lists' ? 'i/import-user-lists' :
 				null, {
 					fileId: file.id
 			}).then(() => {