Merge branch 'develop' into vue3

src/client/pages/preferences/sidebar.vue

@@ -7,6 +7,12 @@
 			<template #desc><button class="_textButton" @click="addItem">{{ $t('addItem') }}</button></template>
 		</mk-textarea>
 	</div>
+	<div class="_content">
+		<div>{{ $t('display') }}</div>
+		<mk-radio v-model="sidebarDisplay" value="full">{{ $t('_sidebar.full') }}</mk-radio>
+		<mk-radio v-model="sidebarDisplay" value="icon">{{ $t('_sidebar.icon') }}</mk-radio>
+		<!-- <mk-radio v-model="sidebarDisplay" value="hide" disabled>{{ $t('_sidebar.hide') }}</mk-radio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
+	</div>
 	<div class="_footer">
 		<mk-button inline @click="save()" primary><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
 		<mk-button inline @click="reset()"><fa :icon="faRedo"/> {{ $t('default') }}</mk-button>
@@ -19,12 +25,14 @@ 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 { defaultDeviceUserSettings } from '../../store';
 
 export default defineComponent({
 	components: {
 		MkButton,
 		MkTextarea,
+		MkRadio,
 	},
 	
 	data() {
@@ -38,7 +46,12 @@ export default defineComponent({
 	computed: {
 		splited(): string[] {
 			return this.items.trim().split('\n').filter(x => x.trim() !== '');
-		}
+		},
+
+		sidebarDisplay: {
+			get() { return this.$store.state.device.sidebarDisplay; },
+			set(value) { this.$store.commit('device/set', { key: 'sidebarDisplay', value }); }
+		},
 	},
 
 	created() {

src/client/pages/preferences/theme.vue

@@ -55,8 +55,8 @@
 			<mk-textarea v-model="installThemeCode">
 				<span>{{ $t('_theme.code') }}</span>
 			</mk-textarea>
-			<mk-button @click="() => install(this.installThemeCode)" :disabled="installThemeCode == null" primary inline><fa :icon="faCheck"/> {{ $t('install') }}</mk-button>
-			<mk-button @click="() => preview(this.installThemeCode)" :disabled="installThemeCode == null" inline><fa :icon="faEye"/> {{ $t('preview') }}</mk-button>
+			<mk-button @click="() => install(installThemeCode)" :disabled="installThemeCode == null" primary inline><fa :icon="faCheck"/> {{ $t('install') }}</mk-button>
+			<mk-button @click="() => preview(installThemeCode)" :disabled="installThemeCode == null" inline><fa :icon="faEye"/> {{ $t('preview') }}</mk-button>
 		</details>
 	</div>
 	<div class="_content">
@@ -68,6 +68,7 @@
 			<template v-if="selectedTheme">
 				<mk-textarea readonly tall :value="selectedThemeCode">
 					<span>{{ $t('_theme.code') }}</span>
+					<template #desc><button @click="copyThemeCode()" class="_textButton">{{ $t('copy') }}</button></template>
 				</mk-textarea>
 				<mk-button @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><fa :icon="faTrashAlt"/> {{ $t('uninstall') }}</mk-button>
 			</template>
@@ -80,7 +81,6 @@
 import { defineComponent } from 'vue';
 import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } from '@fortawesome/free-solid-svg-icons';
 import * as JSON5 from 'json5';
-import MkInput from '../../components/ui/input.vue';
 import MkButton from '../../components/ui/button.vue';
 import MkSelect from '../../components/ui/select.vue';
 import MkSwitch from '../../components/ui/switch.vue';
@@ -88,10 +88,10 @@ import MkTextarea from '../../components/ui/textarea.vue';
 import { Theme, builtinThemes, applyTheme, validateTheme } from '../../scripts/theme';
 import { selectFile } from '../../scripts/select-file';
 import { isDeviceDarkmode } from '../../scripts/is-device-darkmode';
+import copyToClipboard from '../../scripts/copy-to-clipboard';
 
 export default defineComponent({
 	components: {
-		MkInput,
 		MkButton,
 		MkSelect,
 		MkSwitch,
@@ -192,6 +192,14 @@ export default defineComponent({
 			});
 		},
 
+		copyThemeCode() {
+			copyToClipboard(this.selectedThemeCode);
+			this.$root.dialog({
+				type: 'success',
+				iconOnly: true, autoClose: true
+			});
+		},
+
 		parseThemeCode(code) {
 			let theme;
 
@@ -247,7 +255,7 @@ export default defineComponent({
 				key: 'themes', value: themes
 			});
 			this.$root.dialog({
-				type: 'info',
+				type: 'success',
 				iconOnly: true, autoClose: true
 			});
 		},