nanka iroiro (#6853)

* wip

* Update maps.ts

* wip

* wip

* wip

* wip

* Update base.vue

* wip

* wip

* wip

* wip

* Update link.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update privacy.vue

* wip

* wip

* wip

* wip

* Update range.vue

* wip

* wip

* wip

* wip

* Update profile.vue

* wip

* Update a.vue

* Update index.vue

* wip

* Update sidebar.vue

* wip

* wip

* Update account-info.vue

* Update a.vue

* wip

* wip

* Update sounds.vue

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update account-info.vue

* Update account-info.vue

* wip

* wip

* wip

* Update d-persimmon.json5

* wip

src/client/pages/settings/sidebar.vue

@@ -1,41 +1,41 @@
 <template>
-<div class="_section">
-	<div class="_card">
-		<div class="_content">
-			<MkTextarea v-model:value="items" tall>
-				<span>{{ $t('sidebar') }}</span>
-				<template #desc><button class="_textButton" @click="addItem">{{ $t('addItem') }}</button></template>
-			</MkTextarea>
-		</div>
-		<div class="_content">
-			<div>{{ $t('display') }}</div>
-			<MkRadio v-model="sidebarDisplay" value="full">{{ $t('_sidebar.full') }}</MkRadio>
-			<MkRadio v-model="sidebarDisplay" value="icon">{{ $t('_sidebar.icon') }}</MkRadio>
-			<!-- <MkRadio v-model="sidebarDisplay" value="hide" disabled>{{ $t('_sidebar.hide') }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
-		</div>
-		<div class="_footer">
-			<MkButton inline @click="save()" primary><Fa :icon="faSave"/> {{ $t('save') }}</MkButton>
-			<MkButton inline @click="reset()"><Fa :icon="faRedo"/> {{ $t('default') }}</MkButton>
-		</div>
-	</div>
-</div>
+<FormBase>
+	<FormTextarea v-model:value="items" tall>
+		<span>{{ $t('sidebar') }}</span>
+		<template #desc><button class="_textButton" @click="addItem">{{ $t('addItem') }}</button></template>
+	</FormTextarea>
+
+	<FormRadios v-model="sidebarDisplay">
+		<template #desc>{{ $t('display') }}</template>
+		<option value="full">{{ $t('_sidebar.full') }}</option>
+		<option value="icon">{{ $t('_sidebar.icon') }}</option>
+		<!-- <MkRadio v-model="sidebarDisplay" value="hide" disabled>{{ $t('_sidebar.hide') }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
+	</FormRadios>
+
+	<FormButton @click="save()" primary><Fa :icon="faSave"/> {{ $t('save') }}</FormButton>
+	<FormButton @click="reset()" danger><Fa :icon="faRedo"/> {{ $t('default') }}</FormButton>
+</FormBase>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { faListUl, faSave, faRedo } from '@fortawesome/free-solid-svg-icons';
-import MkButton from '@/components/ui/button.vue';
-import MkTextarea from '@/components/ui/textarea.vue';
-import MkRadio from '@/components/ui/radio.vue';
+import FormSwitch from '@/components/form/switch.vue';
+import FormTextarea from '@/components/form/textarea.vue';
+import FormRadios from '@/components/form/radios.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormButton from '@/components/form/button.vue';
 import { defaultDeviceUserSettings } from '@/store';
 import * as os from '@/os';
 import { sidebarDef } from '@/sidebar';
 
 export default defineComponent({
 	components: {
-		MkButton,
-		MkTextarea,
-		MkRadio,
+		FormBase,
+		FormButton,
+		FormTextarea,
+		FormRadios,
 	},
 
 	emits: ['info'],
@@ -102,7 +102,3 @@ export default defineComponent({
 	},
 });
 </script>
-
-<style lang="scss" scoped>
-
-</style>