From f62c6a05a9a12776a43fbcfee56d3e015843fc8d Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 29 Nov 2020 18:06:35 +0900
Subject: [PATCH] Improve setting page

---
 locales/ja-JP.yml                             |  2 +
 .../pages/settings/experimental-features.vue  | 46 +++++++++++++++++++
 src/client/pages/settings/index.vue           |  1 +
 src/client/pages/settings/other.vue           |  2 +
 4 files changed, 51 insertions(+)
 create mode 100644 src/client/pages/settings/experimental-features.vue

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index e3d94cfea4..57af29389d 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -651,6 +651,8 @@ reversiCount: "リバーシの対局数"
 contact: "連絡先"
 useSystemFont: "システムのデフォルトのフォントを使う"
 clips: "クリップ"
+experimentalFeatures: "実験的機能"
+developer: "開発者"
 
 _aboutMisskey:
   about: "Misskeyはsyuiloによって2014年から開発されている、オープンソースのソフトウェアです。"
diff --git a/src/client/pages/settings/experimental-features.vue b/src/client/pages/settings/experimental-features.vue
new file mode 100644
index 0000000000..cc03afd1f9
--- /dev/null
+++ b/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>
diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue
index a42a4614cc..d8f9fdd7da 100644
--- a/src/client/pages/settings/index.vue
+++ b/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;
 			}
 		});
diff --git a/src/client/pages/settings/other.vue b/src/client/pages/settings/other.vue
index b3bab0e232..4570c060ce 100644
--- a/src/client/pages/settings/other.vue
+++ b/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>