Improve setting page

3 files changed, 49 insertions, 0 deletions

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>