Merge branch 'develop' into vue3

src/client/pages/announcements.vue

@@ -11,7 +11,7 @@
 				<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
 			</div>
 			<div class="_footer" v-if="$store.getters.isSignedIn && !announcement.isRead">
-				<mk-button @click="read(announcement)" primary><fa :icon="faCheck"/> {{ $t('gotIt') }}</mk-button>
+				<mk-button @click="read(items, announcement, i)" primary><fa :icon="faCheck"/> {{ $t('gotIt') }}</mk-button>
 			</div>
 		</section>
 	</mk-pagination>
@@ -47,8 +47,12 @@ export default defineComponent({
 	},
 
 	methods: {
-		read(announcement) {
-			announcement.isRead = true;
+		// TODO: これは実質的に親コンポーネントから子コンポーネントのプロパティを変更してるのでなんとかしたい
+		read(items, announcement, i) {
+			Vue.set(items, i, {
+				...announcement,
+				isRead: true,
+			});
 			this.$root.api('i/read-announcement', { announcementId: announcement.id });
 		},
 	}

src/client/pages/messaging/messaging-room.form.vue

@@ -151,7 +151,7 @@ export default defineComponent({
 		},
 
 		onKeypress(e) {
-			if ((e.which == 10 || e.which == 13) && e.ctrlKey && this.canSend) {
+			if ((e.which == 10 || e.which == 13) && (e.ctrlKey || e.metaKey) && this.canSend) {
 				this.send();
 			}
 		},

src/client/pages/messaging/messaging-room.message.vue

@@ -55,16 +55,16 @@ export default defineComponent({
 	},
 	computed: {
 		isMe(): boolean {
-			return this.message.userId == this.$store.state.i.id;
+			return this.message.userId === this.$store.state.i.id;
 		},
 		urls(): string[] {
 			if (this.message.text) {
 				const ast = parse(this.message.text);
 				return unique(ast
-					.filter(t => ((t.node.type == 'url' || t.node.type == 'link') && t.node.props.url && !t.node.props.silent))
+					.filter(t => ((t.node.type === 'url' || t.node.type === 'link') && t.node.props.url && !t.node.props.silent))
 					.map(t => t.node.props.url));
 			} else {
-				return null;
+				return [];
 			}
 		}
 	},

src/client/pages/messaging/messaging-room.vue

@@ -221,14 +221,20 @@ export default defineComponent({
 				for (const id of x) {
 					if (this.messages.some(x => x.id == id)) {
 						const exist = this.messages.map(x => x.id).indexOf(id);
-						this.messages[exist].isRead = true;
+						this.messages[exist] = {
+							...this.messages[exist],
+							isRead: true,
+						};
 					}
 				}
 			} else if (this.group) {
 				for (const id of x.ids) {
 					if (this.messages.some(x => x.id == id)) {
 						const exist = this.messages.map(x => x.id).indexOf(id);
-						this.messages[exist].reads.push(x.userId);
+						this.messages[exist] = {
+							...this.messages[exist],
+							reads: [...this.messages[exist].reads, x.userId]
+						};
 					}
 				}
 			}

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
 			});
 		},