Improve setting page

locales/ja-JP.yml

@@ -651,6 +651,8 @@ reversiCount: "リバーシの対局数"
 contact: "連絡先"
 useSystemFont: "システムのデフォルトのフォントを使う"
 clips: "クリップ"
+experimentalFeatures: "実験的機能"
+developer: "開発者"
 
 _aboutMisskey:
   about: "Misskeyはsyuiloによって2014年から開発されている、オープンソースのソフトウェアです。"

src/client/pages/settings/experimental-features.vue

@@ -0,0 +1,46 @@
+<template>
+<FormBase>
+
+</FormBase>
+</template>
+
+<script lang="ts">
+import { defineAsyncComponent, defineComponent } from 'vue';
+import { faFlask } from '@fortawesome/free-solid-svg-icons';
+import FormSwitch from '@/components/form/switch.vue';
+import FormSelect from '@/components/form/select.vue';
+import FormLink from '@/components/form/link.vue';
+import FormBase from '@/components/form/base.vue';
+import FormGroup from '@/components/form/group.vue';
+import FormButton from '@/components/form/button.vue';
+import FormKeyValueView from '@/components/form/key-value-view.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		FormBase,
+		FormSelect,
+		FormSwitch,
+		FormButton,
+		FormLink,
+		FormGroup,
+		FormKeyValueView,
+	},
+
+	emits: ['info'],
+	
+	data() {
+		return {
+			INFO: {
+				title: this.$t('experimentalFeatures'),
+				icon: faFlask
+			},
+			stats: null
+		}
+	},
+
+	mounted() {
+		this.$emit('info', this.INFO);
+	},
+});
+</script>

src/client/pages/settings/index.vue

@@ -102,6 +102,7 @@ export default defineComponent({
 				case 'import-export': return defineAsyncComponent(() => import('./import-export.vue'));
 				case 'account-info': return defineAsyncComponent(() => import('./account-info.vue'));
 				case 'regedit': return defineAsyncComponent(() => import('./regedit.vue'));
+				case 'experimental-features': return defineAsyncComponent(() => import('./experimental-features.vue'));
 				default: return null;
 			}
 		});

src/client/pages/settings/other.vue

@@ -5,8 +5,10 @@
 	</FormSwitch>
 
 	<FormLink to="/settings/account-info">{{ $t('accountInfo') }}</FormLink>
+	<FormLink to="/settings/experimental-features">{{ $t('experimentalFeatures') }}</FormLink>
 
 	<FormGroup>
+		<template #label>{{ $t('developer') }}</template>
 		<FormSwitch v-model:value="debug" @update:value="changeDebug">
 			DEBUG MODE
 		</FormSwitch>