Classic UI

2 files changed, 22 insertions, 18 deletions

diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue
index 8a0171a6e8..17b373fcd8 100644
--- a/src/client/pages/settings/index.vue
+++ b/src/client/pages/settings/index.vue
@@ -26,7 +26,7 @@
 				<template #label>{{ $ts.clientSettings }}</template>
 				<FormLink :active="page === 'general'" replace to="/settings/general"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.general }}</FormLink>
 				<FormLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><i class="fas fa-palette"></i></template>{{ $ts.theme }}</FormLink>
-				<FormLink :active="page === 'sidebar'" replace to="/settings/sidebar"><template #icon><i class="fas fa-list-ul"></i></template>{{ $ts.sidebar }}</FormLink>
+				<FormLink :active="page === 'menu'" replace to="/settings/menu"><template #icon><i class="fas fa-list-ul"></i></template>{{ $ts.menu }}</FormLink>
 				<FormLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><i class="fas fa-music"></i></template>{{ $ts.sounds }}</FormLink>
 				<FormLink :active="page === 'plugin'" replace to="/settings/plugin"><template #icon><i class="fas fa-plug"></i></template>{{ $ts.plugins }}</FormLink>
 			</FormGroup>
@@ -121,7 +121,7 @@ export default defineComponent({
 				case 'theme': return defineAsyncComponent(() => import('./theme.vue'));
 				case 'theme/install': return defineAsyncComponent(() => import('./theme.install.vue'));
 				case 'theme/manage': return defineAsyncComponent(() => import('./theme.manage.vue'));
-				case 'sidebar': return defineAsyncComponent(() => import('./sidebar.vue'));
+				case 'menu': return defineAsyncComponent(() => import('./menu.vue'));
 				case 'sounds': return defineAsyncComponent(() => import('./sounds.vue'));
 				case 'custom-css': return defineAsyncComponent(() => import('./custom-css.vue'));
 				case 'deck': return defineAsyncComponent(() => import('./deck.vue'));
diff --git a/src/client/pages/settings/sidebar.vue b/src/client/pages/settings/menu.vue
index d91cae42f4..4b315145e1 100644
--- a/src/client/pages/settings/sidebar.vue
+++ b/src/client/pages/settings/menu.vue
@@ -1,18 +1,18 @@
 <template>
 <FormBase>
-	<FormTextarea v-model:value="items" tall>
-		<span>{{ $ts.sidebar }}</span>
+	<FormTextarea v-model:value="items" tall manual-save>
+		<span>{{ $ts.menu }}</span>
 		<template #desc><button class="_textButton" @click="addItem">{{ $ts.addItem }}</button></template>
 	</FormTextarea>
 
-	<FormRadios v-model="sidebarDisplay">
+	<FormRadios v-model="menuDisplay">
 		<template #desc>{{ $ts.display }}</template>
-		<option value="full">{{ $ts._sidebar.full }}</option>
-		<option value="icon">{{ $ts._sidebar.icon }}</option>
-		<!-- <MkRadio v-model="sidebarDisplay" value="hide" disabled>{{ $ts._sidebar.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
+		<option value="sideFull">{{ $ts._menuDisplay.sideFull }}</option>
+		<option value="sideIcon">{{ $ts._menuDisplay.sideIcon }}</option>
+		<option value="top">{{ $ts._menuDisplay.top }}</option>
+		<!-- <MkRadio v-model="menuDisplay" value="hide" disabled>{{ $ts._menuDisplay.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
 	</FormRadios>
 
-	<FormButton @click="save()" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton>
 	<FormButton @click="reset()" danger><i class="fas fa-redo"></i> {{ $ts.default }}</FormButton>
 </FormBase>
 </template>
@@ -26,7 +26,7 @@ import FormBase from '@client/components/form/base.vue';
 import FormGroup from '@client/components/form/group.vue';
 import FormButton from '@client/components/form/button.vue';
 import * as os from '@client/os';
-import { sidebarDef } from '@client/sidebar';
+import { menuDef } from '@client/menu';
 import { defaultStore } from '@client/store';
 import * as symbols from '@client/symbols';
 import { unisonReload } from '@client/scripts/unison-reload';
@@ -44,11 +44,11 @@ export default defineComponent({
 	data() {
 		return {
 			[symbols.PAGE_INFO]: {
-				title: this.$ts.sidebar,
+				title: this.$ts.menu,
 				icon: 'fas fa-list-ul'
 			},
-			menuDef: sidebarDef,
-			items: '',
+			menuDef: menuDef,
+			items: defaultStore.state.menu.join('\n'),
 		}
 	},
 
@@ -57,11 +57,17 @@ export default defineComponent({
 			return this.items.trim().split('\n').filter(x => x.trim() !== '');
 		},
 
-		sidebarDisplay: defaultStore.makeGetterSetter('sidebarDisplay')
+		menuDisplay: defaultStore.makeGetterSetter('menuDisplay')
 	},
 
-	created() {
-		this.items = this.$store.state.menu.join('\n');
+	watch: {
+		menuDisplay() {
+			this.reloadAsk();
+		},
+
+		items() {
+			this.save();
+		},
 	},
 
 	mounted() {
@@ -85,7 +91,6 @@ export default defineComponent({
 			});
 			if (canceled) return;
 			this.items = [...this.splited, item].join('\n');
-			this.save();
 		},
 
 		save() {
@@ -96,7 +101,6 @@ export default defineComponent({
 		reset() {
 			this.$store.reset('menu');
 			this.items = this.$store.state.menu.join('\n');
-			this.reloadAsk();
 		},
 
 		async reloadAsk() {